@font-face{font-family:'Fraunces Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('/assets/fonts/fraunces.woff2') format('woff2')}
@font-face{font-family:'Karla Variable';font-style:normal;font-display:swap;font-weight:200 800;src:url('/assets/fonts/karla.woff2') format('woff2')}

/* ------------------------------------------------------------------
   Löwenzahn · Yoga & Klang — Design-System
   Ästhetik: ruhige editoriale Eleganz, organische Wärme.
   Parchment-Grund, tiefes Tannengrün, Löwenzahn-Gold als rarer Akzent.
------------------------------------------------------------------- */

:root {
  /* Farben */
  --paper: #f6f1e7;          /* warmes Pergament */
  --paper-deep: #efe7d7;     /* abgedunkelte Fläche */
  --pine: #1f3527;           /* tiefes Tannengrün — Primärtinte */
  --pine-soft: #35503f;      /* aufgehelltes Grün für Fließtext auf hell */
  --moss: #6d7f5e;           /* gedämpftes Moos für Nebentexte */
  --gold: #c9930f;           /* Löwenzahn-Gold — sparsam! */
  --gold-bright: #e8b437;    /* Gold auf dunklem Grund */
  --clay: #b4653f;           /* Terrakotta für Klang-Kurse */
  --cream: #fbf8f1;          /* Karten auf Pergament */
  --ink-on-dark: #ede5d2;    /* Text auf Tannengrün */

  /* Typografie */
  --font-display: 'Fraunces Variable', Georgia, serif;
  --font-body: 'Karla Variable', 'Helvetica Neue', sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --text-hero: clamp(2.6rem, 1.6rem + 5.2vw, 5.4rem);

  --leading-tight: 1.08;
  --leading-body: 1.65;

  /* Raum & Form */
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius-organic: 62% 38% 46% 54% / 55% 48% 52% 45%;
  --radius-card: 4px;
  --max-width: 74rem;

  --shadow-lift: 0 20px 50px -24px rgba(31, 53, 39, 0.35);
  --transition-slow: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--pine);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variation-settings: 'wght' 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorn: feine Textur über der ganzen Seite */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: 'wght' 470, 'SOFT' 60, 'WONK' 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 1.1em; }

em { font-style: italic; font-variation-settings: 'wght' 420, 'SOFT' 100, 'WONK' 1; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s ease;
}
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--gold-bright); color: var(--pine); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }

/* Kicker: kleine Überzeile in Kapitälchen-Optik */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-size: var(--text-xs);
  font-variation-settings: 'wght' 640;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1.4rem;
}
.kicker::before {
  content: '';
  width: 2.2em;
  height: 1px;
  background: var(--gold);
}

.lead {
  font-size: var(--text-lg);
  color: var(--pine-soft);
  max-width: 38em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-variation-settings: 'wght' 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--pine);
  border-radius: 999px;
  background: var(--pine);
  color: var(--ink-on-dark);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--pine); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--pine);
}
.btn--ghost:hover { background: var(--pine); border-color: var(--pine); color: var(--ink-on-dark); }

.btn--light {
  background: var(--ink-on-dark);
  border-color: var(--ink-on-dark);
  color: var(--pine);
}
.btn--light:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--pine); }

/* Scroll-Reveal (JS setzt .is-visible; ohne JS bleibt alles sichtbar) */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    transition-delay: var(--reveal-delay, 0s);
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Formulare */
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: var(--text-xs);
  font-variation-settings: 'wght' 640;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85em 1em;
  font: inherit;
  color: var(--pine);
  background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--pine) 22%, transparent);
  border-radius: var(--radius-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}



      .skip-link {
        position: absolute;
        left: -999px;
        top: 0;
        z-index: 2000;
        background: var(--pine);
        color: var(--ink-on-dark);
        padding: 0.7em 1.2em;
      }
      .skip-link:focus { left: 0; }

      /* ---------- Header ---------- */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--pine);
        color: var(--ink-on-dark);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid color-mix(in srgb, var(--gold-bright) 18%, transparent);
      }
      .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding-block: 0.85rem;
      }
      .brand {
        display: block;
        flex: 0 0 auto;
        text-decoration: none;
      }
      .brand .brand__logo {
        display: block;
        width: 54px;
        height: 54px;
        object-fit: contain;
      }
      .site-nav {
        display: flex;
        align-items: center;
        gap: clamp(1rem, 3vw, 2.2rem);
      }
      .site-nav__link {
        color: color-mix(in srgb, var(--ink-on-dark) 84%, transparent);
        font-size: var(--text-sm);
        font-variation-settings: 'wght' 560;
        letter-spacing: 0.06em;
        text-decoration: none;
        position: relative;
      }
      .site-nav__link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
      }
      .site-nav__link:hover::after,
      .site-nav__link[aria-current='page']::after { transform: scaleX(1); }
      .site-nav__link:hover,
      .site-nav__link[aria-current='page'] { color: var(--ink-on-dark); }
      .site-nav__cta {
        padding: 0.65em 1.5em;
        background: var(--gold-bright);
        border-color: var(--gold-bright);
        color: var(--pine);
      }
      .site-nav__cta:hover { background: var(--ink-on-dark); border-color: var(--ink-on-dark); }

      .site-menu { display: none; position: relative; margin-left: auto; }
      .site-menu__toggle {
        min-width: 4.25rem;
        min-height: 44px;
        display: inline-grid;
        place-items: center;
        padding: 0.55rem 0.9rem;
        border: 1px solid color-mix(in srgb, var(--ink-on-dark) 35%, transparent);
        border-radius: var(--radius-card);
        color: var(--ink-on-dark);
        font-size: var(--text-sm);
        font-variation-settings: 'wght' 620;
        cursor: pointer;
        list-style: none;
      }
      .site-menu__toggle::-webkit-details-marker { display: none; }
      .site-menu[open] .site-menu__toggle {
        border-color: var(--gold-bright);
        color: var(--gold-bright);
      }
      .site-menu__panel {
        position: absolute;
        top: calc(100% + 0.65rem);
        right: 0;
        width: min(18rem, calc(100vw - 2rem));
        padding: 0.55rem;
        border: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
        border-radius: 8px;
        background: var(--pine);
        box-shadow: 0 18px 45px rgba(12, 28, 18, 0.28);
      }
      .site-menu__nav { display: grid; gap: 0.2rem; }
      .site-menu__link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.65rem 0.8rem;
        border-radius: var(--radius-card);
        color: color-mix(in srgb, var(--ink-on-dark) 82%, transparent);
        text-decoration: none;
      }
      .site-menu__link[aria-current='page'] {
        background: color-mix(in srgb, var(--gold-bright) 14%, transparent);
        color: var(--gold-bright);
      }
      .site-menu__cta {
        min-height: 44px;
        justify-content: center;
        margin-top: 0.35rem;
        padding: 0.65em 1rem;
        background: var(--gold-bright);
        border-color: var(--gold-bright);
        color: var(--pine);
      }

      @media (max-width: 760px) {
        .site-header__inner { min-height: 4rem; padding-block: 0.3rem; }
        .brand .brand__logo { width: 48px; height: 48px; }
        .site-nav--desktop { display: none; }
        .site-menu { display: block; }
      }

      /* ---------- Footer ---------- */
      .site-footer {
        background: var(--pine);
        color: var(--ink-on-dark);
        margin-top: var(--space-section);
      }
      .site-footer a { color: inherit; }
      .site-footer__content { padding-block: 3.5rem 3rem; }
      .site-footer__brand {
        display: flex;
        align-items: center;
        gap: clamp(1.5rem, 4vw, 3.5rem);
        padding-bottom: 2.5rem;
        border-bottom: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
      }
      .site-footer__grid {
        display: grid;
        grid-template-columns: 1fr 1.3fr 0.8fr;
        gap: clamp(2rem, 6vw, 6rem);
        padding-top: 2.5rem;
      }
      .site-footer .site-footer__logo {
        display: block;
        flex: 0 0 auto;
        width: 145px;
        height: auto;
      }
      .site-footer__tagline {
        color: color-mix(in srgb, var(--ink-on-dark) 75%, transparent);
        max-width: 38ch;
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--text-lg);
        line-height: 1.45;
        font-variation-settings: 'wght' 420;
      }
      .site-footer__heading {
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-variation-settings: 'wght' 650;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-bright);
        margin-bottom: 0.9rem;
      }
      .site-footer address { font-style: normal; }
      .site-footer__links {
        display: grid;
        gap: 0.35rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .site-footer__links li { margin: 0; }
      .site-footer__legal {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.6rem;
        padding-block: 1.4rem;
        border-top: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
        font-size: var(--text-sm);
        color: color-mix(in srgb, var(--ink-on-dark) 70%, transparent);
      }

      @media (max-width: 800px) {
        .site-footer__content { padding-block: 3rem 2.5rem; }
        .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
      }
      @media (max-width: 560px) {
        .site-footer__brand { display: grid; gap: 1.2rem; padding-bottom: 2rem; }
        .site-footer .site-footer__logo { width: 130px; }
        .site-footer__tagline { font-size: var(--text-base); }
        .site-footer__legal { display: grid; }
      }
    


  .page-intro { max-width: 52rem; }



  .kurs-karte {
    position: relative;
    background: var(--cream);
    border: 1px solid color-mix(in srgb, var(--pine) 10%, transparent);
    border-radius: var(--radius-card);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  }
  .kurs-karte::before {
    /* farbige Oberkante je Kategorie */
    content: '';
    position: absolute;
    top: 0;
    left: 1.6rem;
    right: 1.6rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--kategorie-farbe, var(--moss));
  }
  .ist-yoga { --kategorie-farbe: var(--moss); }
  .ist-klang { --kategorie-farbe: var(--clay); }
  .ist-kombi { --kategorie-farbe: var(--gold); }

  .kurs-karte:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }

  .kurs-karte__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.8rem 1.6rem;
    text-decoration: none;
  }

  .kurs-karte__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.1rem;
  }
  .kurs-karte__kategorie {
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kategorie-farbe, var(--moss));
    font-variation-settings: 'wght' 660;
  }
  .kurs-karte__preis {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'wght' 500;
    color: var(--pine);
  }
  .kurs-karte__titel { font-size: var(--text-xl); margin-bottom: 0.25em; }
  .kurs-karte__untertitel {
    font-style: italic;
    font-family: var(--font-display);
    font-variation-settings: 'wght' 400, 'SOFT' 100, 'WONK' 1;
    color: var(--moss);
    margin-bottom: 0.9em;
  }
  .kurs-karte__text {
    font-size: var(--text-sm);
    color: var(--pine-soft);
    flex-grow: 1;
  }
  .kurs-karte__fuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
  }
  .kurs-karte__termin {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--moss);
  }
  .kurs-karte__pfeil {
    font-size: var(--text-lg);
    transition: transform 0.3s ease;
  }
  .kurs-karte:hover .kurs-karte__pfeil { transform: translateX(6px); color: var(--gold); }



  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    display: grid;
    align-items: center;
    /* füllt den ersten Screen: Viewport minus Sticky-Header (~62px);
       svh = kleine Viewport-Höhe, damit mobile Browserleisten nicht überlappen */
    min-height: calc(100svh - 62px);
    padding-block: clamp(1.5rem, 3vh, 3rem);
  }
  .hero__grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hero__titel em {
    color: var(--gold);
    font-style: italic;
  }
  .hero__lead { margin-block: 1.6rem 2.4rem; }
  .hero__aktionen { display: flex; gap: 1rem; flex-wrap: wrap; }

  /* Eingangs-Choreografie */
  @media (prefers-reduced-motion: no-preference) {
    .hero__kicker, .hero__titel, .hero__lead, .hero__aktionen, .hero__bild {
      animation: hero-auftritt 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .hero__titel { animation-delay: 0.1s; }
    .hero__lead { animation-delay: 0.22s; }
    .hero__aktionen { animation-delay: 0.34s; }
    .hero__bild { animation-delay: 0.28s; }
    @keyframes hero-auftritt {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: none; }
    }
  }

  .hero__bild {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(260px, 40vw, 460px);
  }
  .hero__blob {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-organic);
    background:
      radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gold-bright) 30%, transparent), transparent 60%),
      linear-gradient(160deg, var(--pine) 0%, #2c4a36 70%, #3a5c44 100%);
    box-shadow: var(--shadow-lift);
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__blob {
      animation: blob-atmen 12s ease-in-out infinite;
    }
    @keyframes blob-atmen {
      0%, 100% { border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%; }
      50% { border-radius: 45% 55% 58% 42% / 46% 56% 44% 54%; }
    }
  }
  .hero .hero__logo {
    position: relative;
    width: clamp(130px, 18vw, 210px);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  }

  @media (max-width: 820px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__bild { order: -1; min-height: 220px; max-width: 320px; margin-inline: auto; }
  }

  /* ---------- Philosophie ---------- */
  .philosophie {
    background: var(--paper-deep);
    border-block: 1px solid color-mix(in srgb, var(--pine) 8%, transparent);
  }
  .philosophie__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .philosophie__zitat {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-variation-settings: 'wght' 420, 'SOFT' 90, 'WONK' 1;
    line-height: 1.25;
    font-style: italic;
  }
  .philosophie__zitat p { margin: 0; }
  .philosophie__text { color: var(--pine-soft); }
  @media (max-width: 820px) {
    .philosophie__grid { grid-template-columns: 1fr; }
  }

  /* ---------- Angebote ---------- */
  .angebote h2 { margin-bottom: 2.2rem; }
  .angebote__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem 2rem;
  }
  .angebote__punkt {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'wght' 460;
  }
  .angebote__punkt::before {
    content: '●';
    font-size: 0.5em;
    color: var(--gold);
    flex-shrink: 0;
  }
  @media (max-width: 980px) { .angebote__liste { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .angebote__liste { grid-template-columns: 1fr; } }

  /* ---------- Kurse ---------- */
  .kurse__kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
  }
  .kurse__kopf h2 { margin-bottom: 0; }
  .kurse__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
  @media (max-width: 980px) { .kurse__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .kurse__grid { grid-template-columns: 1fr; } }

  /* ---------- Termine ---------- */
  .termine {
    background: var(--pine);
    color: var(--ink-on-dark);
  }
  .termine__kicker { color: var(--gold-bright); }
  .termine__kicker::before { background: var(--gold-bright); }
  .termine__titel { margin-bottom: 2.5rem; }
  .termine__liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .termine__link {
    display: grid;
    grid-template-columns: 220px 1fr auto auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.3rem 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
    text-decoration: none;
    transition: background 0.25s ease, padding-left 0.25s ease;
  }
  .termine__eintrag:last-child .termine__link {
    border-bottom: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
  }
  .termine__link:hover {
    background: color-mix(in srgb, var(--ink-on-dark) 6%, transparent);
    padding-left: 1rem;
  }
  .termine__datum {
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-bright);
  }
  .termine__kurs {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'wght' 480;
  }
  .termine__zeit { font-size: var(--text-sm); color: color-mix(in srgb, var(--ink-on-dark) 70%, transparent); }
  .termine__cta {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-bright);
  }
  @media (max-width: 720px) {
    .termine__link { grid-template-columns: 1fr auto; }
    .termine__zeit { display: none; }
  }

  /* ---------- FAQ ---------- */
  .faq__grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  @media (max-width: 820px) { .faq__grid { grid-template-columns: 1fr; } }

  .faq__eintrag {
    border-bottom: 1px solid color-mix(in srgb, var(--pine) 15%, transparent);
  }
  .faq__eintrag summary {
    cursor: pointer;
    padding: 1.2rem 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'wght' 480;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .faq__eintrag summary::-webkit-details-marker { display: none; }
  .faq__eintrag summary::after {
    content: '+';
    font-size: 1.4em;
    color: var(--gold);
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .faq__eintrag[open] summary::after { transform: rotate(45deg); }
  .faq__eintrag p { color: var(--pine-soft); padding-bottom: 1.2rem; max-width: 55ch; }



  .kopf { padding-bottom: 0; }

  .kategorie { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .kategorie__kopf {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 1.5rem 3rem;
    margin-bottom: 2.2rem;
  }
  .kategorie__titel {
    margin: 0;
    padding-left: 1rem;
    border-left: 4px solid var(--kat-farbe, var(--moss));
  }
  .ist-yoga { --kat-farbe: var(--moss); }
  .ist-klang { --kat-farbe: var(--clay); }
  .ist-kombi { --kat-farbe: var(--gold); }
  .kategorie__text {
    margin: 0;
    color: var(--pine-soft);
    max-width: 48ch;
  }
  .kategorie__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
  @media (max-width: 980px) { .kategorie__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) {
    .kategorie__grid { grid-template-columns: 1fr; }
    .kategorie__kopf { grid-template-columns: 1fr; }
  }

  .veranstaltungen {
    background: var(--pine);
    color: var(--ink-on-dark);
  }
  .veranstaltungen .kicker { color: var(--gold-bright); }
  .veranstaltungen .kicker::before { background: var(--gold-bright); }
  .veranstaltungen h2 { margin-bottom: 2.5rem; }
  .veranstaltungen h3 {
    font-size: var(--text-lg);
    color: var(--gold-bright);
    margin-bottom: 1rem;
  }
  .veranstaltungen__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
  @media (max-width: 720px) { .veranstaltungen__grid { grid-template-columns: 1fr; } }
  .veranstaltungen__liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .veranstaltungen__liste li {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
  }
  .veranstaltungen__liste li:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--ink-on-dark) 18%, transparent);
  }
  .veranstaltungen__datum {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-bright);
  }
  .veranstaltungen__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'wght' 480;
  }
  .veranstaltungen__hinweis {
    margin-top: 2rem;
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--ink-on-dark) 75%, transparent);
    max-width: 55ch;
  }
  .veranstaltungen__hinweis a { color: var(--gold-bright); }



  .kurs-kopf {
    background: var(--paper-deep);
    border-bottom: 1px solid color-mix(in srgb, var(--pine) 8%, transparent);
    padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
  }
  .brotkrumen {
    font-size: var(--text-sm);
    color: var(--moss);
    margin-bottom: 2.2rem;
  }
  .brotkrumen a { color: inherit; }
  .brotkrumen span[aria-hidden] { margin-inline: 0.4em; opacity: 0.5; }

  .ist-yoga .kicker { color: var(--moss); }
  .ist-klang .kicker { color: var(--clay); }
  .ist-klang .kicker::before { background: var(--clay); }
  .ist-kombi .kicker { color: var(--gold); }

  .kurs-kopf__untertitel {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'wght' 400, 'SOFT' 100, 'WONK' 1;
    font-size: var(--text-xl);
    color: var(--moss);
    margin-bottom: 2rem;
  }

  .eckdaten {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin: 0 0 2.2rem;
    padding: 1.4rem 0;
    border-block: 1px solid color-mix(in srgb, var(--pine) 15%, transparent);
  }
  .eckdaten__punkt dt {
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 0.3rem;
  }
  .eckdaten__punkt dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'wght' 480;
  }
  .eckdaten__punkt small {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--moss);
  }

  .inhalt {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block: var(--space-section);
  }
  @media (max-width: 820px) { .inhalt { grid-template-columns: 1fr; } }

  .inhalt__text p { max-width: 62ch; color: var(--pine-soft); }
  .inhalt__text p:first-of-type {
    font-size: var(--text-lg);
    color: var(--pine);
  }

  .info-box {
    background: var(--cream);
    border: 1px solid color-mix(in srgb, var(--pine) 10%, transparent);
    border-radius: var(--radius-card);
    padding: 1.6rem 1.7rem;
    margin-bottom: 1.4rem;
  }
  .info-box h3 {
    font-size: var(--text-base);
    font-family: var(--font-body);
    font-variation-settings: 'wght' 680;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 0.8rem;
  }
  .info-box h3:not(:first-child) { margin-top: 1.6rem; }
  .info-box ul { margin: 0; padding-left: 1.1em; }
  .info-box li { margin-bottom: 0.35em; }

  .buchung-bereich { padding-bottom: var(--space-section); }



  .buchung { background: var(--pine); color: var(--ink-on-dark); border-radius: 6px; padding: clamp(2rem, 5vw, 4rem); box-shadow: var(--shadow-lift); }
  .buchung__kopf { max-width: 48rem; }
  .buchung__kopf .kicker { color: var(--gold-bright); }
  .buchung__kopf .kicker::before { background: var(--gold-bright); }
  .buchung__kopf .lead { color: color-mix(in srgb, var(--ink-on-dark) 82%, transparent); }
  .buchung__leer { font-size: var(--text-lg); margin-top: 2rem; }
  .buchung__leer a { color: var(--gold-bright); }
  .buchung__form { margin-top: 2.5rem; }
  .buchung__felder { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .schritt-label { display: block; margin: 0 0 1.1rem; font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); font-variation-settings: 'wght' 650; }

  .termin-karte { display: block; cursor: pointer; margin-bottom: 0.8rem; }
  .termin-karte input { position: absolute; opacity: 0; pointer-events: none; }
  .termin-karte__inhalt { display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--ink-on-dark) 25%, transparent); border-radius: var(--radius-card); transition: border-color .25s, background .25s, transform .25s; }
  .termin-karte__check { width: 18px; height: 18px; border: 1px solid color-mix(in srgb, var(--ink-on-dark) 45%, transparent); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--pine); }
  .termin-karte:hover .termin-karte__inhalt { transform: translateX(4px); }
  .termin-karte input:checked + .termin-karte__inhalt { border-color: var(--gold-bright); background: color-mix(in srgb, var(--gold-bright) 12%, transparent); }
  .termin-karte input:checked + .termin-karte__inhalt .termin-karte__check { background: var(--gold-bright); }
  .termin-karte input:focus-visible + .termin-karte__inhalt { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
  .termin-karte input:disabled + .termin-karte__inhalt { opacity: .45; cursor: not-allowed; }
  .termin-karte__datum, .termin-karte__zeit, .termin-karte__plaetze { display: block; }
  .termin-karte__datum { font-variation-settings: 'wght' 640; }
  .termin-karte__zeit { font-size: var(--text-sm); color: color-mix(in srgb, var(--ink-on-dark) 75%, transparent); }
  .termin-karte__plaetze { min-height: 1em; font-size: var(--text-xs); letter-spacing: .08em; color: var(--gold-bright); }
  .termin-karte__plaetze.ist-knapp { color: #f0b467; }
  .termin-karte__plaetze.ist-voll { color: #e08c8c; text-transform: uppercase; letter-spacing: .15em; }

  .kontaktdaten .field label { color: color-mix(in srgb, var(--ink-on-dark) 70%, transparent); }
  .kontaktdaten .field input, .kontaktdaten .field select, .kontaktdaten .field textarea { background: color-mix(in srgb, var(--ink-on-dark) 8%, transparent); border-color: color-mix(in srgb, var(--ink-on-dark) 28%, transparent); color: var(--ink-on-dark); }
  .kontaktdaten .field select option { color: var(--pine); }
  .buchung__zeile { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }

  .checkout { margin-top: clamp(2rem, 5vw, 3.5rem); padding: clamp(1.3rem, 4vw, 2.3rem); background: var(--cream); color: var(--pine); border-radius: 8px; box-shadow: 0 22px 50px -32px rgba(0,0,0,.7); }
  .checkout__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
  .checkout__kopf .schritt-label { color: var(--gold); margin-bottom: .45rem; }
  .checkout__kopf h3 { margin: 0; font-size: var(--text-xl); }
  .checkout__status { padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--moss) 18%, var(--cream)); color: var(--pine-soft); font-size: var(--text-xs); font-variation-settings: 'wght' 650; white-space: nowrap; }
  .checkout__details { display: grid; grid-template-columns: 1.5fr .8fr .8fr; border: 1px solid color-mix(in srgb, var(--pine) 12%, transparent); border-radius: 6px; overflow: hidden; }
  .checkout__position { padding: 1rem 1.1rem; border-right: 1px solid color-mix(in srgb, var(--pine) 10%, transparent); background: var(--paper); }
  .checkout__position--kurs { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--pine) 10%, transparent); }
  .checkout__position span, .checkout__summe span { display: block; margin-bottom: .3rem; color: var(--moss); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
  .checkout__position strong, .checkout__position small { display: block; }
  .checkout__position small { margin-top: .18rem; color: var(--moss); font-size: var(--text-xs); }
  .checkout__summe { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: var(--pine); color: var(--ink-on-dark); }
  .checkout__summe span { margin: 0; color: color-mix(in srgb, var(--ink-on-dark) 70%, transparent); }
  .checkout__summe strong { font-family: var(--font-display); font-size: 1.65rem; color: var(--gold-bright); }
  .checkout__zahlung { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--moss) 24%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--moss) 7%, var(--cream)); }
  .checkout__schloss { width: 20px; flex: 0 0 20px; color: var(--moss); }
  .checkout__schloss svg { display: block; width: 20px; height: 20px; }
  .checkout__zahlung strong, .checkout__zahlung small { display: block; }
  .checkout__zahlung small { margin-top: .2rem; color: var(--moss); font-size: var(--text-xs); }
  .checkout__nicht-aktiv { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--clay); background: color-mix(in srgb, var(--clay) 9%, var(--cream)); color: var(--pine-soft); font-size: var(--text-sm); }
  .checkout__rechtlich { margin: 1rem 0; color: var(--moss); font-size: var(--text-xs); line-height: 1.55; }
  .checkout__rechtlich a { color: var(--pine); }
  .buchung__submit { width: 100%; justify-content: space-between; background: var(--gold-bright); border-color: var(--gold-bright); color: var(--pine); }
  .buchung__submit:hover { background: var(--pine); border-color: var(--pine); color: var(--ink-on-dark); }
  .buchung__submit:disabled { opacity: .48; cursor: not-allowed; transform: none; }
  .buchung__submit strong { font-size: 1.05em; }
  .buchung__status { min-height: 1.5em; margin: .8rem 0 0; }
  .buchung__status.ist-fehler { color: var(--clay); font-variation-settings: 'wght' 650; }
  .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  @media (max-width: 820px) { .buchung__felder { grid-template-columns: 1fr; } }
  @media (max-width: 600px) {
    .buchung { padding-inline: 1.15rem; }
    .buchung__zeile { grid-template-columns: 1fr; gap: 0; }
    .checkout__kopf { flex-direction: column; }
    .checkout__details { grid-template-columns: 1fr 1fr; }
    .checkout__position { border-bottom: 1px solid color-mix(in srgb, var(--pine) 10%, transparent); }
    .checkout__position:nth-of-type(3) { border-right: 0; }
    .checkout__position:nth-of-type(4) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  }
  @media (max-width: 480px) {
    .checkout__details { grid-template-columns: 1fr; }
    .checkout__position,
    .checkout__position:nth-of-type(3),
    .checkout__position:nth-of-type(4) { grid-column: 1 / -1; border-right: 0; }
    .checkout__position:nth-of-type(4) { border-bottom: 0; }
  }



  .danke { min-height: 65vh; display: grid; align-items: center; }
  .danke__inhalt { max-width: 52rem; }
  .danke .danke__mark { display: block; width: 90px; height: 90px; object-fit: contain; margin-bottom: 1.5rem; }
  .bestaetigung {
    margin-top: 2rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pine) 14%, transparent);
    border-radius: 8px;
    background: var(--cream);
    box-shadow: var(--shadow-lift);
  }
  .bestaetigung__kurs { padding: 1.2rem 1.4rem; border-bottom: 1px solid color-mix(in srgb, var(--pine) 10%, transparent); }
  .bestaetigung span, .bestaetigung dt { display: block; margin-bottom: .25rem; color: var(--moss); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
  .bestaetigung__kurs strong { font-family: var(--font-display); font-size: var(--text-xl); }
  .bestaetigung dl { display: grid; grid-template-columns: 1.5fr .7fr 1fr .8fr; margin: 0; }
  .bestaetigung dl > div { padding: 1.1rem 1.4rem; border-right: 1px solid color-mix(in srgb, var(--pine) 9%, transparent); }
  .bestaetigung dl > div:last-child { border-right: 0; }
  .bestaetigung dd { margin: 0; font-variation-settings: 'wght' 650; }
  .bestaetigung dd small { display: block; margin-top: .2rem; color: var(--moss); font-size: var(--text-xs); font-variation-settings: 'wght' 400; }
  .bestaetigung__preis { color: var(--gold); font-size: var(--text-lg); }
  .bestaetigung__fuss { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.4rem; background: var(--pine); color: var(--ink-on-dark); }
  .bestaetigung__fuss span { margin: 0; color: color-mix(in srgb, var(--ink-on-dark) 65%, transparent); }
  .bestaetigung__fuss strong { margin-right: auto; }
  .bestaetigung__fuss .bezahlt-chip { padding: .25rem .65rem; border-radius: 999px; background: var(--gold-bright); color: var(--pine); font-variation-settings: 'wght' 700; }
  .danke__aktionen { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
  .danke__mailhinweis { margin-top: 1.2rem; padding: .8em 1em; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--pine-soft); }
  @media (max-width: 700px) {
    .bestaetigung dl { grid-template-columns: 1fr 1fr; }
    .bestaetigung dl > div { border-bottom: 1px solid color-mix(in srgb, var(--pine) 9%, transparent); }
    .bestaetigung dl > div:nth-child(even) { border-right: 0; }
  }



  .admin-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 0.5rem;
    font-size: var(--text-sm);
    color: var(--pine-soft);
    cursor: pointer;
  }
  .admin-check input { width: 1.1em; height: 1.1em; accent-color: var(--pine); }
  .admin-feld[hidden] { display: none !important; }



      .login-body {
        min-height: 100vh;
        background:
          radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--pine) 16%, var(--paper)), var(--paper) 62%) fixed;
        display: grid;
        place-items: center;
        padding: clamp(1rem, 5vw, 3rem) 1.25rem;
      }
      .login { width: 100%; max-width: 27rem; }
      .login-karte {
        position: relative;
        overflow: hidden;
        background: linear-gradient(155deg, #264433 0%, var(--pine) 58%, #172b20 100%);
        color: var(--ink-on-dark);
        border: 1px solid color-mix(in srgb, var(--gold-bright) 28%, transparent);
        border-radius: 12px;
        padding: clamp(1.7rem, 5vw, 2.7rem);
        box-shadow: 0 28px 70px -30px rgba(19, 39, 27, 0.7);
        text-align: left;
      }
      .login-karte::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--gold-bright);
      }
      .login-karte .login-logo {
        display: block;
        width: 145px;
        height: auto;
        margin: 0 0 1.8rem;
      }
      .login-kicker {
        font-size: var(--text-xs);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-bright);
        margin-bottom: 0.35rem;
        font-variation-settings: 'wght' 650;
      }
      .login-karte h1 {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        font-variation-settings: 'wght' 460;
        color: var(--ink-on-dark);
        margin-bottom: 0.35rem;
      }
      .login-lead {
        color: color-mix(in srgb, var(--ink-on-dark) 68%, transparent);
        font-size: var(--text-sm);
        margin-bottom: 1.8rem;
      }
      .login-form { text-align: left; }
      .login-btn { width: 100%; justify-content: center; margin-top: 0.35rem; }
      .login-fehler {
        background: color-mix(in srgb, var(--clay) 35%, transparent);
        border-left: 3px solid var(--clay);
        color: var(--ink-on-dark);
        text-align: left;
        padding: 0.7em 1em;
        border-radius: var(--radius-card);
        margin-bottom: 1.2rem;
        font-size: var(--text-sm);
      }
      .login-hinweis {
        background: color-mix(in srgb, var(--gold-bright) 13%, transparent);
        border-left: 3px solid var(--gold-bright);
        text-align: left;
        padding: 0.8em 1em;
        border-radius: var(--radius-card);
        margin-bottom: 1.2rem;
        font-size: var(--text-sm);
        color: var(--ink-on-dark);
      }
      .login-hinweis code {
        background: color-mix(in srgb, var(--ink-on-dark) 12%, transparent);
        padding: 0.05em 0.4em;
        border-radius: 3px;
        font-size: 0.9em;
      }
      .login-zurueck {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin-top: 1.35rem;
        font-size: var(--text-sm);
        color: color-mix(in srgb, var(--ink-on-dark) 68%, transparent);
      }
      .login-zurueck:hover { color: var(--ink-on-dark); }

      /* Formular-Styles aus AdminLayout hier lokal spiegeln (eigene Seite) */
      .admin-feld { display: block; margin-bottom: 1.1rem; }
      .admin-feld > span {
        display: block;
        font-size: var(--text-xs);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ink-on-dark) 72%, transparent);
        margin-bottom: 0.4rem;
        font-variation-settings: 'wght' 600;
      }
      .admin-feld input {
        width: 100%;
        min-height: 52px;
        font: inherit;
        font-size: var(--text-base);
        color: var(--ink-on-dark);
        caret-color: var(--gold-bright);
        background: color-mix(in srgb, var(--ink-on-dark) 8%, transparent);
        border: 1px solid color-mix(in srgb, var(--ink-on-dark) 30%, transparent);
        border-radius: var(--radius-card);
        padding: 0.75em 0.9em;
      }
      .admin-feld input:focus {
        outline: 2px solid var(--gold-bright);
        outline-offset: 2px;
        border-color: var(--gold-bright);
      }
      .admin-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        font: inherit;
        font-size: var(--text-base);
        font-variation-settings: 'wght' 620;
        padding: 0.7em 1.3em;
        border-radius: var(--radius-card);
        border: none;
        cursor: pointer;
        background: var(--gold-bright);
        color: var(--pine);
      }
      .admin-btn:hover { background: #f2c451; }

      @media (max-width: 520px) {
        .login-body { align-items: start; padding: 0; background: var(--pine); }
        .login { max-width: none; min-height: 100vh; }
        .login-karte {
          min-height: 100vh;
          border: 0;
          border-radius: 0;
          padding: 2rem 1.35rem;
          box-shadow: none;
        }
        .login-karte .login-logo { width: 130px; }
      }
    


    .kacheln {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      margin-bottom: 2.5rem;
    }
    .kachel {
      background: var(--cream);
      border: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
      border-radius: var(--radius-card);
      padding: 1.3rem 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .kachel--warnung { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 8%, var(--cream)); }
    .kachel__wert {
      font-family: var(--font-display);
      font-size: 2.4rem;
      line-height: 1;
      font-variation-settings: 'wght' 500;
      color: var(--pine);
    }
    .kachel__label { font-size: var(--text-sm); color: var(--pine-soft); }
    .kachel__sub { font-size: var(--text-xs); color: var(--moss); }

    .dash-kopf {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .dash-kopf h2 { font-family: var(--font-display); font-size: var(--text-xl); font-variation-settings: 'wght' 460; }

    .grau { color: var(--moss); }
    .leer { text-align: center; display: grid; gap: 1rem; place-items: center; }
  


    .kopf {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }
    .kopf .admin-lead { margin-bottom: 1.5rem; }
    .kurs-link { font-variation-settings: 'wght' 620; color: var(--pine); text-decoration: none; }
    .kurs-link:hover { text-decoration: underline; }
    .grau { color: var(--moss); }
    .termine-zahlen { white-space: nowrap; }
    .termine-zahlen > span,
    .termine-zahlen > small { display: block; }
    .termine-zahlen strong { color: var(--pine); }
    .preis-zelle > span,
    .preis-zelle > small { display: block; white-space: nowrap; }
    .aktionen { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
    .leer { text-align: center; display: grid; gap: 1rem; place-items: center; }
  


    .admin-brotkrumen { margin-bottom: 1rem; font-size: var(--text-sm); }
    .admin-brotkrumen a { color: var(--moss); }
    .form-aktionen {
      display: flex;
      gap: 0.8rem;
      justify-content: flex-end;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
    }
  


    .admin-brotkrumen { margin-bottom: 1rem; font-size: var(--text-sm); }
    .admin-brotkrumen a { color: var(--moss); }
    .kopf {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .kopf-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

    .spalten {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 1.5rem;
      align-items: start;
    }
    @media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }

    .abschnitt {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      font-variation-settings: 'wght' 500;
      margin-bottom: 0.8rem;
    }
    .grau { color: var(--moss); }

    .termin-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
    .vergangene-termine { margin: 0 0 1.5rem; }
    .vergangene-termine summary {
      cursor: pointer;
      color: var(--moss);
      font-size: var(--text-sm);
      margin-bottom: 0.8rem;
    }
    .termin {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.7rem 0.9rem;
      background: var(--paper);
      border: 1px solid color-mix(in srgb, var(--pine) 10%, transparent);
      border-radius: var(--radius-card);
    }
    .termin--vergangen { opacity: 0.6; }
    .termin__info { display: flex; flex-direction: column; gap: 0.1rem; font-size: var(--text-sm); }
    .termin__datum { font-variation-settings: 'wght' 620; }
    .termin__zeit { color: var(--pine-soft); }
    .termin__belegung { color: var(--moss); font-size: var(--text-xs); }

    .termin-neu {
      border-top: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
      padding-top: 1.3rem;
    }
    .termin-neu__titel {
      font-size: var(--text-xs);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--moss);
      font-variation-settings: 'wght' 640;
      margin-bottom: 0.8rem;
    }
    .termin-neu__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    @media (max-width: 480px) { .termin-neu__felder { grid-template-columns: 1fr; } }

    .form-aktionen {
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
    }
  


    .filterleiste {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-bottom: 1.2rem;
    }
    .filterhinweis {
      margin: -0.8rem 0 1.2rem;
      padding: 0.75rem 1rem;
      border-left: 3px solid var(--gold);
      background: color-mix(in srgb, var(--gold) 9%, var(--cream));
      color: var(--pine-soft);
      font-size: var(--text-sm);
    }
    .filter { display: flex; align-items: flex-end; gap: 0.7rem; }
    .filter__feld { margin-bottom: 0; min-width: 220px; }
    .filter__reset { margin-bottom: 0.05rem; }

    .summen { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: var(--text-sm); color: var(--pine-soft); }
    .summe strong { font-family: var(--font-display); font-size: var(--text-lg); font-variation-settings: 'wght' 520; color: var(--pine); margin-right: 0.2em; }
    .summe--offen strong { color: var(--gold); }

    .grau { color: var(--moss); }
    .grau a { color: inherit; }
    .nachricht {
      margin-top: 0.3rem;
      max-width: 22ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--text-xs);
      color: var(--pine-soft);
      font-style: italic;
    }
    .aktionen { display: flex; gap: 0.4rem; justify-content: flex-end; }
    .zeile--vergangen td { opacity: 0.62; }
    .zeile--inaktiv td { opacity: 0.55; }
    .leer { text-align: center; }
  


    .mail-kopf {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
    }
    .ansicht-wahl { display: flex; gap: 0.5rem; padding-top: 0.25rem; }
    .mail-tabs {
      display: flex;
      gap: 0.55rem;
      overflow-x: auto;
      padding: 0.2rem 0 0.8rem;
      margin-bottom: 0.8rem;
    }
    .mail-tab {
      flex: 0 0 auto;
      padding: 0.55rem 0.85rem;
      border: 1px solid color-mix(in srgb, var(--pine) 20%, transparent);
      border-radius: 999px;
      color: var(--pine-soft);
      font-size: var(--text-sm);
      text-decoration: none;
      background: var(--cream);
    }
    .mail-tab:hover { border-color: var(--pine); }
    .mail-tab--aktiv { background: var(--pine); color: var(--ink-on-dark); border-color: var(--pine); }
    .mail-meta {
      padding: 1rem 1.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .mail-meta div { display: grid; gap: 0.15rem; }
    .mail-meta__label {
      color: var(--moss);
      font-size: var(--text-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .mail-meta p { margin: 0; color: var(--moss); font-size: var(--text-sm); text-align: right; }
    .preview-buehne {
      padding: clamp(0.5rem, 2vw, 1.5rem);
      overflow-x: auto;
      border-radius: var(--radius-card);
      background:
        linear-gradient(45deg, rgba(31, 53, 39, 0.04) 25%, transparent 25%) 0 0 / 20px 20px,
        linear-gradient(-45deg, rgba(31, 53, 39, 0.04) 25%, transparent 25%) 0 10px / 20px 20px,
        var(--paper-deep);
      border: 1px solid color-mix(in srgb, var(--pine) 12%, transparent);
    }
    .preview-frame {
      display: block;
      width: 100%;
      min-width: 680px;
      height: 1100px;
      margin: 0 auto;
      border: 0;
      border-radius: 6px;
      background: white;
      box-shadow: 0 12px 35px -18px rgba(31, 53, 39, 0.5);
      transition: width 0.25s ease, min-width 0.25s ease;
    }
    .preview-frame--mobil { width: 390px; min-width: 390px; }
    .text-vorschau { margin-top: 1rem; }
    .text-vorschau summary { cursor: pointer; font-weight: 650; }
    .text-vorschau pre {
      margin: 1rem 0 0;
      padding: 1rem;
      overflow-x: auto;
      white-space: pre-wrap;
      background: var(--paper);
      border-radius: var(--radius-card);
      color: var(--pine-soft);
      font: 0.88rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    @media (max-width: 720px) {
      .mail-kopf, .mail-meta { align-items: stretch; flex-direction: column; }
      .mail-meta p { text-align: left; }
      .ansicht-wahl { display: none; }
      .preview-buehne { padding: 0.35rem; overflow: hidden; }
      .preview-frame,
      .preview-frame--mobil {
        width: 100%;
        min-width: 0;
        min-height: 760px;
      }
    }