/* =========================================================
   Components
   ---------------------------------------------------------
   A small, reusable component layer meant to be copied
   across future projects. Keeps rules scoped (no globals),
   uses design tokens from :root (base.css), and is safe to
   extend.

   Contents:
   - Card: .card, .card__header, .card__title, .card__meta,
           .card__body, .card__footer
   - Variants: .card--interactive, .card--muted
   ========================================================= */

/* -----------------------------
   Card
   -----------------------------
   Usage:
     <section class="card">
       <header class="card__header">
         <h2 class="card__title">Title</h2>
         <p class="card__meta">Optional meta</p>
       </header>
       <div class="card__body">...</div>
       <footer class="card__footer">...</footer>
     </section>
*/
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  display: flex;
  flex-direction: column;
  min-height: 100%;

  /* Layout */
  overflow: hidden; /* keeps rounded corners with inner separators */
}

/* Header / body / footer follow a consistent spacing rhythm */
.card__header,
.card__body,
.card__footer {
  padding: 2rem 2rem;
}

/* Subtle separators are more flexible than hard borders everywhere */
.card__header {
  border-bottom: 1px solid var(--border);
}

.card__footer {
  border-top: 1px solid var(--border);
}

/* Typography inside cards should not fight the global typography */
.card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.card__meta {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Content area default spacing */
.card__body > * + * {
  margin-top: 0.75rem;
}

/* -----------------------------
   Card variants
   ----------------------------- */

/* Use for clickable cards (e.g. dashboards, lists). */
.card--interactive {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.card--interactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.card--interactive:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.10);
}

/* Use when you want a softer card background (secondary surfaces). */
.card--muted {
  background: var(--bg-muted);
}


/* =========================================================
   Buttons
   ---------------------------------------------------------
   Minimal button system for a neutral baseline. The goal is
   predictability and accessibility, not visual flash.

   Classes:
   - .btn (base)
   - .btn--primary, .btn--secondary, .btn--ghost
   - .btn--sm (size), .btn--block (full width)
   ========================================================= */

.btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

.btn:focus-visible {
  outline: 3px solid rgba(0,0,0,.14);
  outline-offset: 2px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  background: var(--primary);
  border-color: var(--on-primary);
  color: var(--on-primary);
}

.btn--secondary {
  background: var(--bg-muted);
}

.btn--ghost {
  background: transparent;
}

.btn--sm {
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  font-size: 0.95rem;
}

.btn--block {
  width: 100%;
}

/* =========================================================
   Card Grid
   ---------------------------------------------------------
   Responsive grid for cards or other panels.
   Uses auto-fit so it adapts without breakpoints.
   ========================================================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

/* =========================================================
   Forms
   ---------------------------------------------------------
   Baseline form styling: consistent inputs, spacing, and
   focus behavior. Keep it neutral and token-driven.
   ========================================================= */

.form {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.label {
  font-weight: 600;
}

.hint {
  color: var(--muted);
  font-size: 0.95rem;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.2;

  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.10);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 720px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   Tiny utilities (Playground-friendly)
   ---------------------------------------------------------
   Keep utilities minimal. Helpful for examples and quick
   prototyping, but avoid turning the base into a utility
   framework.
   ========================================================= */

.u-stack { display: grid; gap: 2rem; }
.u-stack-sm { display: grid; gap: 1rem; }
.u-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.u-mt-lg { margin-top: 2rem; }

/* =========================================================
   Theme Toggle Button
   ---------------------------------------------------------
   A small, neutral switch-like button. It uses existing tokens
   and can be placed anywhere in the layout.
   Markup:
     <button class="theme-toggle" type="button" data-theme-toggle aria-pressed="false">
       Light
     </button>
   ========================================================= */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;

  font: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.theme-toggle:focus-visible {
  outline: 3px solid rgba(0,0,0,.14);
  outline-offset: 2px;
}

/* Small indicator dot */
.theme-toggle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.65;
}


/* =========================================================
   Home: Intro + 2-Panel Layout (News / Termine)
   ---------------------------------------------------------
   Uses existing tokens; safe for Light/Dark.
   ========================================================= */

.page-intro{
  padding: 1.25rem 0 1.1rem;
}

.page-intro h1{
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0 0 .35rem 0;
}

.lead{
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.6;
}

.page-intro--center{
  text-align: center;
}

.page-intro--center .lead{
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px){
  .page-intro--center{
    padding-top: 1rem;
  }
}

/* A subtle anchoring surface so the center content doesn't feel lost on large monitors */
.section-slab{
  background: var(--bg-muted);
  background-image:
    radial-gradient(900px 280px at 10% 0%, var(--brand-tint-2), transparent 62%),
    radial-gradient(900px 260px at 90% 10%, var(--brand-tint-1), transparent 60%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  margin-bottom: 1.5rem;
}



/* If a page starts with a section slab right after the page header,
   it can look like a duplicate "title box". Flatten the first slab so
   the header is the only prominent box at the top. */
.page-header + .page-content > .section-slab:first-child{
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 900px){
  .section-slab{
    padding: 1rem;
    border-radius: 16px;
  position: relative;
  overflow: hidden;
  }
}

.home-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 1.25rem;
}

@media (max-width: 900px){
  .home-grid{
    grid-template-columns: 1fr;
  }
}

/* List rows inside cards */
.item-list{
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-card);
}

.item{
  padding: .95rem 1rem;
}

.item + .item{
  border-top: 1px solid var(--border);
}

.item__link{
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}

.item__link:hover,
.item__link:focus-visible{
  color: var(--link);
  text-decoration: underline;
}

.item__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* =========================================================
   Membership page (Mitglied werden)
   ---------------------------------------------------------
   Lightweight layout helpers to match the "Mitglied werden"
   design (split cards with a vertical divider and price rows).
   Scoped via .membership* classnames.
   ========================================================= */

.membership{
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.membership-note{
  border-radius: 18px;
}

.membership-note .card__body{
  padding: 1.1rem 1.25rem;
}

.membership-note__text{
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.membership-stack{
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.membership-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.membership-col{
  padding: 1.6rem 1.6rem 2.2rem 1.6rem;
}



.membership-col + .membership-col{
  border-left: 1px solid var(--border);
}

.membership-col--center{
  text-align: center;
  display: grid;
  gap: 1rem;
  align-content: center;
}

.membership-title{
  margin: 0 0 0.9rem 0;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  position: relative;
}

.membership-title::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 99px;
  background: var(--accent);
  margin: 0.55rem auto 0;
  opacity: 0.95;
}

.membership-rows{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.membership-row + .membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.membership-row__label{
  color: var(--text);
}


/* Membership rows: consistent spacing and comfortable bottom rhythm */
.membership-rows{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.membership-row:last-child{
  margin-bottom: 0.25rem;
}

.membership-row__hint{
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.membership-row__value{
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 900px){
  .membership-split{
    grid-template-columns: 1fr;
  }

  .membership-col + .membership-col{
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.item__main{
  min-width: 0;
}

.item__title{
  display: block;
  font-weight: 650;
  line-height: 1.35;
}

.item__meta{
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .95rem;
}

.dot{
  opacity: .7;
}

.panel-note{
  margin: .9rem 0 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}

/* Minimal badges for quick scanning */
.badge{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 650;
  color: var(--text);
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.badge--ok{
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
}

.badge--warn{
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.28);
}


/* =========================
   Home Hero
   ========================= */
.home-hero{
  margin: 18px 0 8px;
}

.home-hero__frame{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.home-hero__img{
  width: 100%;
  height: clamp(180px, 22vw, 320px);
  object-fit: cover;
  display: block;
  transform: scale(1.01); /* reduces hairline gaps on some browsers */
}

/* Subtle overlay to integrate with theme (Light/Dark) */
.home-hero__frame::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 280px at 18% 12%, var(--brand-tint-2), transparent 62%),
    linear-gradient(to bottom, transparent 58%, color-mix(in srgb, var(--surface-main) 88%, transparent));
  opacity: .9;
}

@media (max-width: 720px){
  .home-hero{
    margin-top: 14px;
  }
  .home-hero__frame{
    border-radius: 18px;
  }
}


/* =========================================================
   Enhancements: Mitglied werden + Vereinslogo
   ---------------------------------------------------------
   Cosmetic improvements only (no layout-breaking changes).
   ========================================================= */

/* Shared header style for content pages */
.page-intro,
.page-header{
  background: var(--bg-muted);
  background-image:
    radial-gradient(900px 260px at 12% 0%, var(--brand-tint-2), transparent 62%),
    radial-gradient(900px 240px at 88% 10%, var(--brand-tint-1), transparent 60%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}


/* =========================================================
   Page layout helpers
   ========================================================= */
.page-content{
  padding-top: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-content.prose{
  margin-left: auto;
  margin-right: auto;
}

.page-section{
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

.page-section--tight{
  padding-block: clamp(0.75rem, 2vw, 1.5rem);
}
.page-intro h1,
.page-header h1{
  margin: 0;
  letter-spacing: -0.02em;
}

.page-intro--center,
.page-header{
  text-align: center;
}

/* Mitglied werden: add a bit more "card-like" rhythm */
.membership{
  gap: 1.5rem;
}

.membership-note{
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 260px at 14% 0%, var(--brand-tint-2), transparent 62%),
    linear-gradient(to bottom, color-mix(in srgb, var(--surface-main) 92%, transparent), var(--surface-main));
}

.membership-note__text{
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}

.membership-stack .card{
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

.membership-stack .card:hover{
  transform: translateY(-1px);
}

.membership-title{
  letter-spacing: -0.01em;
}

.membership-split{
  position: relative;
}

@media (max-width: 820px){
  }

.membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.membership-row + .membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.membership-row:hover{
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--bg-muted) 80%, transparent);
}

.membership-row__value{
  font-weight: 700;
}

.membership-row__hint{
  display: inline-block;
  margin-left: .35rem;
  font-weight: 500;
  opacity: .85;
}

/* Download card: align buttons + add subtle emphasis */

/* Membership download card: add breathing room at the bottom */
.membership-downloads .membership-col--center{
  padding-block: 1.6rem 2rem;
  align-content: start;
  justify-items: center;
}

.membership-downloads .btn{
  margin-top: 0.25rem;
}

.membership-downloads .btn{
  width: auto;
  min-width: 220px;
  justify-content: center;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  justify-self: center;
}


/* Download card layout refinements */
.membership-downloads .membership-col--center{
  align-items: center;
}

/* Make logo grid read nicely on smaller screens */
@media (max-width: 900px){
  .card-grid.logo-grid{
    grid-template-columns: 1fr;
  }
  .logo-card img{
    width: min(220px, 85%);
  }
}


/* =========================================================
   Text-Fix: Vereinslogo Cards
   ---------------------------------------------------------
   Improve readability (contrast, line-height, font-weight).
   ========================================================= */

:root[data-theme="dark"] .card-grid.logo-grid .card{
  color: var(--text);
}

:root[data-theme="dark"] .card-grid.logo-grid .card h3{
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: .35rem;
}

:root[data-theme="dark"] .card-grid.logo-grid .card p{
  color: var(--muted);
  line-height: 1.65;
  font-weight: 400;
  text-wrap: pretty;
}

/* Slightly brighter surface for text cards (not logo image card) */
:root[data-theme="dark"] .card-grid.logo-grid .card:not(.logo-card){
  background: var(--surface-card);
}

/* Logo card stays neutral */
.card-grid.logo-grid .logo-card{
  background:
    radial-gradient(700px 240px at 50% 0%, var(--brand-tint-1), transparent 62%),
    linear-gradient(180deg, rgba(10,18,30,.9), rgba(8,14,24,.95));
}


/* =========================================================
   Fix: Vereinslogo spacing + underline accents
   ---------------------------------------------------------
   - Add comfortable inner padding so text is not edge-to-edge
   - Add the same underline accent as "Mitglied werden"
   ========================================================= */

.card-grid.logo-grid .card{
  padding: 1.15rem 1.25rem;
}

.card-grid.logo-grid .card h3{
  position: relative;
  margin-top: 0;
  margin-bottom: .85rem;
}

.card-grid.logo-grid .card h3::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 99px;
  background: var(--accent);
  margin-top: .55rem;
  opacity: .95;
}

/* Keep logo card centered, but still padded */
.card-grid.logo-grid .logo-card{
  padding: 1.25rem;
}

/* Ensure paragraphs don't start too tight under the title on small screens */
.card-grid.logo-grid .card p{
  margin: 0;
}


/* =========================================================
   Theme fix: Vereinslogo (respect Light/Dark tokens)
   ---------------------------------------------------------
   Resets earlier hardcoded dark colors so the page follows
   the project's token-based theming.
   ========================================================= */

.card-grid.logo-grid .card{
  background: var(--surface-card);
  color: var(--text);
}

.card-grid.logo-grid .card h3{
  color: var(--text);
}

.card-grid.logo-grid .card p{
  color: var(--muted);
}

/* Add subtle tint without forcing a specific theme */
.card-grid.logo-grid .card:not(.logo-card){
  background:
    radial-gradient(800px 260px at 10% 0%, var(--brand-tint-2), transparent 62%),
    radial-gradient(800px 240px at 90% 10%, var(--brand-tint-1), transparent 60%),
    var(--surface-card);
}

/* Logo card: gentle frame, still token-based */
.card-grid.logo-grid .logo-card{
  background:
    radial-gradient(700px 240px at 50% 0%, var(--brand-tint-3), transparent 62%),
    var(--surface-card);
}

.card-grid.logo-grid .logo-card img{
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.18));
}


/* =========================================================
   Home: News & Aktuelles (Dashboard)
   ---------------------------------------------------------
   Matches the "Mitglied werden" / "Vereinslogo" design language.
   Token-based for Light/Dark.
   ========================================================= */

.section-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  position: relative;
}

.section-title::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 99px;
  background: var(--accent);
  margin: 0.55rem auto 0;
  opacity: 0.95;
}

.section-title--sm{
  font-size: 1.15rem;
  text-align: center;
}

.section-title--sm::after{
  margin-left: auto;
  margin-right: auto;
}

.home-dashboard{
  display: grid;
  gap: 1.25rem;
}

.home-welcome{
  border-radius: 18px;
  background:
    radial-gradient(900px 260px at 14% 0%, var(--brand-tint-2), transparent 62%),
    linear-gradient(to bottom, color-mix(in srgb, var(--surface-main) 92%, transparent), var(--surface-main));
  border: 1px solid var(--border);
}

.home-welcome .card__body{
  padding: 1.1rem 1.25rem;
  text-align: center;
}

.home-welcome__title{
  margin: 0;
  font-size: 1.05rem;
}

.home-welcome__subtitle{
  margin: .35rem 0 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.home-panel__header{
  padding-bottom: .5rem;
}

.home-panel__title{
  margin: 0;
}

.home-list{
  display: grid;
  gap: .9rem;
}

.home-item{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-main);
  padding: 1rem 1.05rem;
}

.home-item--soft{
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--brand-tint-2) 45%, transparent),
      color-mix(in srgb, var(--surface-main) 92%, transparent));
}

.home-item__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.home-item__title{
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.home-item__text{
  margin: .55rem 0 .8rem 0;
  color: var(--muted);
  line-height: 1.6;
}

.home-item__bullets{
  margin: .55rem 0 .85rem 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.home-item__bullets li{
  margin: .25rem 0;
}

.home-item__link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--link);
}

.home-item__link:hover{
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pill{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  font-size: .85rem;
  white-space: nowrap;
}

.home-panel__footer{
  display: flex;
  justify-content: center;
}

.btn__meta{
  opacity: .8;
  font-weight: 700;
  margin-left: .35rem;
}

@media (max-width: 900px){
  .home-item__head{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================
   Home tweaks (keep hero, align with existing design)
   ---------------------------------------------------------
   No new "theme"; only spacing + underline + list item layout.
   ========================================================= */

/* Underline for main page headline like other pages */
.page-intro h1::after,
.page-header h1::after{
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 99px;
  background: var(--accent);
  margin: 0.55rem auto 0;
  opacity: 0.95;
}

/* Home list item layout additions */
.item{
  align-items: flex-start;
}

.item__main{
  min-width: 0;
}

.item__title{
  font-weight: 800;
}

.item__desc{
  margin: .35rem 0 .5rem 0;
  color: var(--muted);
  line-height: 1.6;
}

.item__action{
  flex: 0 0 auto;
  margin-left: 1rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--link);
  white-space: nowrap;
}

.item__action:hover{
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn__meta{
  opacity: .8;
  font-weight: 700;
  margin-left: .35rem;
}

.bullet-list{
  margin: .45rem 0 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.bullet-list li{
  margin: .15rem 0;
}

.item--highlight{
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--brand-tint-2) 45%, transparent),
      color-mix(in srgb, var(--surface-main) 92%, transparent));
  border-radius: 16px;
  padding: .95rem 1rem;
}


/* =========================================================
   Membership spacing fix (Mitglied werden)
   ---------------------------------------------------------
   Tightens consistency: column padding + divider alignment + row rhythm.
   Token-based, no color changes.
   ========================================================= */

.membership-split{
  gap: 1.25rem;
}

.membership-col{
  padding: .25rem .25rem;
}

@media (min-width: 821px){
  .membership-col{
    padding: .25rem 1rem;
  }
}

.membership-title{
  margin-bottom: 1rem;
}

.membership-rows{
  gap: .65rem;
}

.membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.membership-row + .membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

/* Ensure the vertical divider sits between columns only (already hidden on mobile) */

/* =========================================================
   Spacing cleanup (Home / Mitglied werden / Vereinslogo)
   ---------------------------------------------------------
   Goal: consistent vertical rhythm and aligned boxes.
   Token-based, safe for Light/Dark.
   ========================================================= */

:root{
  --gap-sm: .75rem;
  --gap-md: 1rem;
  --gap-lg: 1.25rem;
  --gap-xl: 1.75rem;
}

/* Consistent block spacing */
.page-intro,
.page-header{
  margin: var(--gap-lg) 0 var(--gap-lg) 0;
}

.section-slab{
  margin-top: var(--gap-lg);
}

/* Ensure intro/info elements align with card sections (no narrower max-width) */
.info-box{
  max-width: none;
  margin: 0 0 var(--gap-lg) 0;
}

/* Vereinlogo grid: consistent gaps and no edge-touching */
.card-grid.logo-grid{
  gap: var(--gap-lg);
}

/* Membership page: consistent gaps between cards */
.membership{
  gap: var(--gap-lg);
}

.membership-stack{
  display: grid;
  gap: var(--gap-lg);
}

/* Home: keep the two panels aligned and evenly spaced */
.home-grid{
  gap: var(--gap-lg);
}

/* Improve nested list spacing inside items */
.item__desc{
  margin-top: .4rem;
}

/* Mobile: keep rhythm */
@media (max-width: 720px){
  .page-intro,
  .page-header{
    margin: var(--gap-md) 0 var(--gap-md) 0;
    padding: 1rem;
  }
  .section-slab{
    padding: 1rem;
  }
}


/* =========================================================
   Vorstand (Board)
   ---------------------------------------------------------
   Matches spacing, colors and cards of other pages.
   ========================================================= */

.board-note__body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.board-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-top: var(--gap-lg);
}

@media (max-width: 1000px){
  .board-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .board-grid{ grid-template-columns: 1fr; }
}

.board-card{
  text-align:center;
}

.board-card__img{
  display:flex;
  justify-content:center;
  padding-top:1.25rem;
}

.board-card__img img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  background: var(--bg-muted);
}

.board-card__body{
  padding:1rem 1rem 1.25rem;
}

.board-card__role{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
}

.board-card__role::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  border-radius:99px;
  background: var(--accent);
  margin:.5rem auto .6rem;
}

.board-card__name{
  margin:0;
  font-weight:600;
}

/* Card layout helpers */
.card__body{ flex: 1 1 auto; }
.card__footer{ margin-top: auto; }


/* Page header: title + optional subtitle */
.page-header h1{ font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
.page-subtitle{
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}


@media (max-width: 720px){
  .card__header,
  .card__body,
  .card__footer{
    padding: 1.25rem 1.25rem;
  }
  .page-header{
    padding: 1rem 1rem;
    border-radius: 16px;
  }
}



@media (max-width: 720px){
  .membership-split{
    grid-template-columns: 1fr;
  }
  .membership-col + .membership-col{
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .membership-downloads .btn{
    width: 100%;
    min-width: 0;
  }
}



/* Primary button legibility (light + dark): enforce strong contrast */
.btn--primary{
  color: var(--on-primary) !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.membership-downloads .btn{
  min-height: 44px;
  font-size: 1rem;
}



/* Membership (mobile) overflow/cutoff fix: prevent buttons/columns from exceeding card width */
.membership-downloads .btn{
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px){
  .membership-downloads .btn{
    width: 100%;
    min-width: 0;
  }
}



@media (max-width: 720px){
  .membership-col{
    padding: 1.15rem 1.15rem;
  }
  .membership-downloads .membership-col--center{
    padding-block: 1.25rem 1.6rem;
  }
}



@media (max-width: 720px){
  .membership-col{
    padding: 1.25rem 1.15rem 1.75rem 1.15rem;
  }
  .membership-rows{
    gap: 0.6rem;
  }
  .membership-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface-card) 70%, var(--bg) 30%);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

}



@media (max-width: 480px){
  .membership-row{
    padding: 0.85rem 0.9rem;
  }
  .membership-row__label{
    min-width: 0;
    overflow-wrap: anywhere;
  }
}



/* Unified hover for all membership rows */
.membership-row{
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.membership-row:hover{
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-card) 90%);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border) 55%);
}



/* Disable hover effects on touch devices (mobile), keep active/focus */
@media (hover: none) and (pointer: coarse){
  .membership-row:hover{
    background: initial;
    border-color: initial;
    transform: none;
  }
  .membership-row:active{
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-card) 88%);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border) 45%);
  }
}



/* Vereinslogo page: refined grid + cards (3-per-row, centered last row) */
.logo-grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  justify-content: center; /* centers the last row (e.g., 2 cards) */
  align-items: stretch;     /* equal height per row */
}

.logo-grid > .logo-card{
  flex: 1 1 calc((100% - 2 * clamp(0.9rem, 2vw, 1.4rem)) / 3);
  max-width: 420px;  /* prevents overly wide cards on large screens */
  min-width: 260px;  /* keeps cards readable */
}

.logo-card{
  position: relative;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 18px;
  background:
    radial-gradient(900px 260px at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    var(--surface-card);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.logo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(0,0,0,.22);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border) 60%);
}

.logo-card--image{
  display: grid;
  place-items: center;
  padding: clamp(0.9rem, 2vw, 1.25rem);
}

.logo-card--image img{
  width: min(220px, 90%);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.logo-card__title{
  margin: 0 0 0.7rem 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  position: relative;
}

.logo-card__title::after{
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: var(--primary);
  opacity: .85;
}

.logo-card__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.98rem;
}

@media (max-width: 1100px){
  .logo-grid > .logo-card{
    flex-basis: calc((100% - 1 * clamp(0.9rem, 2vw, 1.4rem)) / 2);
    max-width: 520px;
  }
}

@media (max-width: 820px){
  .logo-grid > .logo-card{
    flex-basis: 100%;
    max-width: 640px;
  }
}

  .logo-card--image{
  grid-column: span 4; }
  .logo-card--info{
  grid-column: span 4; }
}




.logo-card--image{
  justify-content: center;
}

.logo-card--image img{
  width: min(280px, 92%);
  max-height: 220px;
  object-fit: contain;
}



/* Vereinslogo: force all cards to identical size (all rows) + featured logo */
.logo-grid > .logo-card{
  height: clamp(260px, 22vw, 340px);
}

.logo-card__text{
  /* keep cards equal-height by clamping text */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.logo-card--image img{
  width: min(330px, 95%);
  max-height: 260px;
  object-fit: contain;
}

@media (max-width: 820px){
  .logo-grid > .logo-card{
    height: auto;
  }
  .logo-card__text{
    -webkit-line-clamp: unset;
  }
}



/* Vereinslogo (desktop): improve readability */
@media (min-width: 900px){
  .logo-card{
    padding: 1.5rem 1.6rem;
  }
  .logo-card__title{
    font-size: 1.25rem;
  }
  .logo-card__text{
    font-size: 1.08rem;
    line-height: 1.7;
    -webkit-line-clamp: 7;
  }
}



/* Vereinslogo: vertically center text content in cards (desktop) */
@media (min-width: 900px){
  .logo-card--info{
    justify-content: center;
  }

  .logo-card--info > *{
    margin-top: 0;
    margin-bottom: 0;
  }

  .logo-card--info .logo-card__title{
    margin-bottom: 0.9rem;
  }
}


/* Inline link used inside subtitles */
.inline-link{
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  margin-left: .35rem;
}
.inline-link:hover{ text-decoration: underline; }


/* Vorstand page: refined board cards */
.board-section{
  margin-top: var(--gap-lg);
}

.board-card{
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.board-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(0,0,0,.22);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
}

.board-card__img{
  padding-top: 1.35rem;
}

.board-card__img img{
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

.board-card__body{
  padding: 1.05rem 1.2rem 1.35rem;
}

.board-card__role{
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.board-card__name{
  margin-top: .1rem;
  font-size: 1.05rem;
}



/* Vorstand: contact lines (temporary visible for testing) */
.board-card__contact{
  margin-top: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.board-contact{
  display: inline-flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 35%, var(--surface-card) 65%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-weight: 700;
  font-size: 0.95rem;

  cursor: default;
  pointer-events: none;
}

.board-contact{
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border) 60%);

  cursor: default;
  pointer-events: none;
}



/* Vorstand: contact display as plain text blocks */
.board-contact{
  text-decoration: none;
  text-align: center;
}


/* inline-link used as plain text (non-clickable) */
.page-subtitle .inline-link{
  cursor: default;
  pointer-events: none;
}


/* Vorstand: square-crop member photos (works for JPG/WebP) */
.board-card__img img{
  width: 150px;
  height: 150px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
}




/* =========================================================
   Legal / Impressum: readable typography
   ========================================================= */
.content-section{
  margin-top: var(--gap-lg);
}

.text-card{
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.text-card > *{
  max-width: 80ch;
}

.text-card h2{
  margin: 1.75rem 0 0.75rem;
  font-size: clamp(1.15rem, 1.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.text-card h2:first-child{
  margin-top: 0;
}

.text-card h3{
  margin: 1.4rem 0 0.6rem;
  font-size: clamp(1.05rem, 1.05vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.text-card p{
  margin: 0.75rem 0;
  line-height: 1.75;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
}

.text-card strong{
  color: var(--text);
}

.text-muted{
  color: var(--muted);
}



/* =========================================================
   Legal / Impressum: separators + desktop typography
   ========================================================= */
@media (min-width: 992px){
  .text-card{
    font-size: 1.05rem;
  }
  .text-card p{
    font-size: 1.05rem;
    line-height: 1.8;
  }
  .text-card h2{
    font-size: 1.45rem;
  }
  .text-card h3{
    font-size: 1.25rem;
  }
}

.text-card section{
  margin-top: 1.9rem;
  padding-top: 1.9rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.text-card section:first-of-type{
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}


/* =========================================================
   Teich-Detail (Template)
   - Token-basiert (Light/Dark kompatibel)
   - Verwendet bestehende Design-Variablen: --surface-card, --bg-muted, --border, --muted, --text, --brand-tint-*
========================================================= */

.teich-hero{
  border-radius: 18px;
  padding: 22px 22px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--dropdown-shadow);
}

.teich-hero h1{ margin: 0; }

.teich-sub{
  margin: 10px 0 0;
  color: var(--muted);
}

.teich-kpis{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.teich-kpi{
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
}

.teich-kpi small{
  display:block;
  color: var(--muted);
  margin-bottom: 4px;
}

.teich-kpi strong{
  display:block;
  color: var(--text);
  font-size: 1.02rem;
}

.teich-split{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}

.teich-card{
  border-radius: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  padding: 18px 18px;
}

:root[data-theme="dark"] .teich-card{
  box-shadow: 0 12px 34px rgba(0,0,0,.40);
}

.teich-card h2{ margin-top: 0; }

.teich-section-title{ margin: 0 0 12px; }

.teich-media-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.teich-media{
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  position: relative;
}

:root[data-theme="dark"] .teich-media{
  box-shadow: 0 12px 34px rgba(0,0,0,.40);
}

/* =========================================================
   Admin: Userverwaltung
   ---------------------------------------------------------
   Token-driven styling so it works in light + dark mode.
   ========================================================= */

.admin-users .notice{ margin-bottom: 1rem; }

.admin-users__form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.admin-users__form-actions{
  justify-content: flex-end;
  margin-top: 1rem;
}

.admin-users__table-wrap{ overflow: auto; }

.admin-users__table{
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-users__table thead th{
  text-align: left;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
  padding: .75rem .85rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-users__table tbody td{
  padding: .85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.admin-users__table tbody tr:hover td{
  background: rgba(14, 165, 166, 0.06);
}

:root[data-theme="dark"] .admin-users__table tbody tr:hover td{
  background: rgba(34, 195, 197, 0.12);
}

.admin-users__role-form{
  gap: .5rem;
  align-items: center;
}

.admin-users__actions{
  gap: .5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.admin-users details{
  position: relative;
}

.admin-users__details-panel{
  margin-top: .5rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
}

:root[data-theme="dark"] .admin-users__details-panel{
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}

.admin-users__details-actions{
  justify-content: flex-end;
}

.teich-img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: rgba(255,255,255,.04);
}

.teich-media figcaption{
  padding: 10px 12px 12px;
  font-size: .95rem;
  color: var(--muted);
}

/* Wenn Bilder (noch) fehlen: sauberes Placeholder statt kaputter Icons/Text */
.teich-media.is-missing::before{
  content: "Bild folgt";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--muted);
  background:
    radial-gradient(1200px 380px at 20% 0%, var(--brand-tint-3), transparent 60%),
    radial-gradient(900px 320px at 90% 100%, var(--brand-tint-2), transparent 55%),
    var(--bg-muted);
}

.teich-note{
  border-radius: 16px;
  padding: 16px 16px;
  background: var(--brand-tint-1);
  border: 1px solid var(--border);
}

.teich-note h2{ margin: 0 0 8px; }

.teich-note p{ margin: 0; color: var(--text); }

@media (max-width: 900px){
  .teich-kpis{ grid-template-columns: 1fr; }
  .teich-split{ grid-template-columns: 1fr; }
  .teich-media-grid{ grid-template-columns: 1fr; }
}


/* --- Teich Template: Stack spacing fix (prevents cards from touching) --- */
.teich-stack{display:grid;gap:14px;}
@media (max-width:900px){.teich-stack{gap:12px;}}
.teich-stack>.teich-card{margin:0;}
.teich-stack>.teich-card+.teich-card{margin-top:0;}


/* =========================================================
   Dashboard tiles
   ---------------------------------------------------------
   Lightweight grid of clickable cards for internal areas.
   ========================================================= */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.dashboard-card {
  grid-column: span 6;
  text-decoration: none;
}

@media (max-width: 720px) {
  .dashboard-card { grid-column: span 12; }
}

.dashboard-card__media {
  height: 150px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}

/* Use existing site imagery; can be replaced later with dedicated card images */
.dashboard-card[data-card="galerie"] .dashboard-card__media {
  background-image: url("../img/hero.jpg");
  background-position: 50% 35%;
}

.dashboard-card[data-card="downloads"] .dashboard-card__media {
  background-image: url("../img/hero.jpg");
  background-position: 50% 55%;
}

.dashboard-card[data-card="tiefenkarten"] .dashboard-card__media {
  background-image: url("../img/hero.jpg");
  background-position: 50% 65%;
}

.dashboard-card[data-card="account"] .dashboard-card__media {
  background-image: url("../img/hero.jpg");
  background-position: 50% 45%;
}

/* Reduce meta spacing inside dashboard tiles */
.dashboard-card .card__meta {
  margin-top: 0.35rem;
}


/* =========================================================
   Admin users responsive
   ---------------------------------------------------------
   - Mobile-friendly table: becomes card-like rows with labels
   - Scroll wrapper for mid-sized screens
   ========================================================= */

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.table--responsive{
  width:100%;
}

@media (max-width: 720px){
  .table--responsive thead{
    display:none;
  }

  .table--responsive,
  .table--responsive tbody,
  .table--responsive tr,
  .table--responsive td{
    display:block;
    width:100%;
  }

  .table--responsive tr{
    border:1px solid var(--border);
    border-radius:14px;
    background: var(--surface);
    margin: 0 0 1rem 0;
    overflow:hidden;
  }

  .table--responsive td{
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
  }

  .table--responsive td:first-child{
    border-top:none;
  }

  .table--responsive td::before{
    content: attr(data-label);
    display:block;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: .25rem;
  }

  /* Buttons inside action cell */
  .table--responsive td[data-label="Aktionen"] form{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
  }
}

/* Create-user form: keep nice spacing on mobile */
@media (max-width: 720px){
  .admin-users-form-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ================================
   Prose / Lesetypografie
================================ */

.prose{
  width: 100%;
  line-height: 1.75;
  font-size: 1.05rem;
}

.card > .prose{
  max-width: 120ch;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2.0rem;
}

.prose p{
  margin: 0 0 1rem 0;
}

.prose strong{
  font-weight: 700;
}

.prose .lead-quote{
  margin: 0.75rem 0 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--surface-card);
  border-radius: 12px;
  font-weight: 600;
}

/* Signatur */
.prose .signature{
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  opacity: 0.95;
}

.prose .signature p{
  margin: 0 0 0.35rem 0;
}
/*Mitglied werden Bild */
.membership-image{
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;   /* ? DAS ist der wichtige Teil */
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}