/*
==============================================================================
Project      : Hummelwerk Website
Design       : Andrea Kurz
Development  : Andrea Kurz
Website      : https://software.andreakurz.at

Copyright © 2026 Andrea Kurz.
All rights reserved.

Created      : 2026
Version      : 1.0
==============================================================================
*/

    /* ─────────────────────────────────────────
       VARIABLES
    ───────────────────────────────────────── */
    :root {
      --sage:         #6B8F71;
      --sage-dark:    #4a6b50;
      --sage-light:   #8aaa90;
      --moss:         #7d9a7e;
      --dusty-blue:   #7A9BAF;
      --warm-white:   #FAF8F3;
      --sand:         #EDE8DF;
      --sand-dark:    #ddd6c8;
      --terracotta:   #C4694B;
      --dusty-rose:   #C4917A;
      --mustard:      #C8973A;
      --text-dark:    #2d3a2e;
      --text-mid:     #4a5c4b;
      --text-light:   #7a8c7b;
      --radius-sm:    0.75rem;
      --radius-md:    1.25rem;
      --radius-lg:    1.5rem;
      --radius-xl:    2rem;
      --radius-pill:  999px;
    }

    /* ─────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    section[id] { scroll-margin-top: 6rem; }
    body {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      color: var(--text-mid);
      background: var(--warm-white);
      overflow-x: hidden;
      line-height: 1.8;
    }
    img { display: block; }
    a { text-decoration: none; color: inherit; transition: color 0.2s; }

    /* ─────────────────────────────────────────
       TYPOGRAPHY
    ───────────────────────────────────────── */
    h1 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2.5rem, 3.5vw, 3.5rem);
      line-height: 1.1;
      color: var(--text-dark);
      letter-spacing: -0.01em;
    }
    h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2rem, 3vw, 2.8rem);
      line-height: 1.15;
      color: var(--text-dark);
    }
    h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.3rem;
      color: var(--text-dark);
      line-height: 1.3;
    }

    /* ─────────────────────────────────────────
       SHARED COMPONENTS
    ───────────────────────────────────────── */
    .tag {
      display: inline-block;
      padding: 0.4rem 0.9rem;
      border: 1px solid rgba(107, 143, 113, 0.4);
      border-radius: var(--radius-pill);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sage);
      font-weight: 500;
    }

    .btn-primary {
      display: inline-block;
      padding: 0.9rem 2.2rem;
      background: var(--sage);
      color: white;
      border-radius: var(--radius-pill);
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .btn-primary:hover {
      background: var(--sage-dark);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(107, 143, 113, 0.32);
    }

    .btn-secondary {
      display: inline-block;
      padding: 0.9rem 2.2rem;
      background: transparent;
      color: var(--sage-dark);
      border-radius: var(--radius-pill);
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1.5px solid var(--sage);
      cursor: pointer;
      transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .btn-secondary:hover {
      background: var(--sage);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(107, 143, 113, 0.32);
    }

    /* ─────────────────────────────────────────
       ANIMATIONS
    ───────────────────────────────────────── */
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      33%       { transform: translateY(-10px) rotate(0.8deg); }
      66%       { transform: translateY(-5px) rotate(-0.5deg); }
    }

    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-36px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(36px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .anim-left  { animation: fadeInLeft  0.9s ease both; }
    .anim-right { animation: fadeInRight 0.9s ease 0.2s both; }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* Barrierefreiheit: Bewegung reduzieren (CLAUDE.md-Pflicht) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      .reveal { opacity: 1 !important; transform: none !important; }
    }


    /* ─────────────────────────────────────────
       HEADER
    ───────────────────────────────────────── */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 4vw;
      background: rgba(250, 248, 243, 0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(107, 143, 113, 0.1);
    }

    .header-logo-link {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }

    .header-logo {
      height: 160px;
      width: auto;
      object-fit: contain;
    }

    /* ── Main navigation ── */
    .main-nav ul {
      display: flex;
      list-style: none;
      gap: 2.2rem;
      margin: 0;
      padding: 0;
      align-items: center;
    }
    .main-nav li {
      flex-shrink: 0;
    }
    .nav-link {
      position: relative;
      display: inline-block;
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.76rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-mid);
      white-space: nowrap;
      padding: 0.65rem 0;
      transition: color 0.25s ease;
    }
    /* Dezenter Punkt unter dem aktiven/Hover-Link — vermeidet Konflikt
       mit dem Logo-Untertitel und passt zur skandinavisch-organischen Ästhetik. */
    .nav-link::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0.15rem;
      width: 22px;
      height: 5px;
      border-radius: 999px;
      background: var(--sage);
      transform: translateX(-50%) scaleX(0.3);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.3s ease;
    }
    .nav-link:hover { color: var(--sage); }
    .nav-link:hover::after { opacity: 0.45; transform: translateX(-50%) scaleX(1); }
    .nav-link.active { color: var(--sage); }
    .nav-link.active::after { opacity: 1; transform: translateX(-50%) scaleX(1); }

    /* ── Hamburger button (mobile only) ── */
    .nav-toggle {
      display: none;
      background: transparent;
      border: 1px solid rgba(107, 143, 113, 0.4);
      border-radius: 999px;
      width: 42px;
      height: 42px;
      padding: 0;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: background 0.2s, border-color 0.2s;
    }
    .nav-toggle:hover { border-color: var(--sage); }
    .nav-toggle span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--text-dark);
      border-radius: 1px;
      transition: transform 0.3s ease, opacity 0.2s ease;
    }
    .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .header-contact {
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-mid);
      padding: 0.65rem 1.6rem;
      border: 1px solid rgba(107, 143, 113, 0.4);
      border-radius: var(--radius-pill);
      transition: all 0.25s;
    }
    .header-contact:hover {
      background: var(--sage);
      color: white;
      border-color: var(--sage);
    }

    /* Right-side header cluster: mode toggle (+ hamburger on mobile) */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 1.4rem;
      align-self: flex-end;
      margin-bottom: 1.25rem;
    }

    /* Nav sitzt auch etwas tiefer, sodass Punkt-Marker unter dem Logo-Untertitel
       liegt und visuell nicht damit kollidiert. */
    .main-nav {
      align-self: flex-end;
      margin-bottom: 1.1rem;
    }

    /* Mode toggle — Pill mit zwei Seiten (links Erwachsene, rechts Kind) */
    .modus-toggle {
      display: flex;
      align-items: center;
      background: transparent;
      border: 1px solid rgba(107, 143, 113, 0.35);
      border-radius: 999px;
      padding: 4px;
      gap: 0;
      width: fit-content;
    }
    .modus-btn {
      background: transparent;
      border: none;
      padding: 0.4rem 0.95rem;
      cursor: pointer;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      color: var(--text-mid);
      transition: background 0.3s ease, color 0.3s ease;
    }
    .modus-btn img {
      display: block;
      object-fit: contain;
      pointer-events: none;
    }
    .modus-btn--erwachsen img { width: 32px; height: 32px; }
    .modus-btn--kind img      { width: 22px; height: 22px; }
    .modus-btn.active {
      background: var(--sage);
      color: white;
    }
    .modus-btn-label {
      display: inline-block;
      font-family: 'Jost', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.06em;
      font-weight: 400;
    }

    /* Kindmodus (hugos-welt.html): nur Logo + Toggle, normale Nav ausgeblendet */
    body.modus-kind .main-nav { display: none; }
    body.modus-kind .nav-toggle { display: none; }


    /* ─────────────────────────────────────────
       HERO
    ───────────────────────────────────────── */
    #hero {
      min-height: 100vh;
      padding-top: 148px; /* header clearance */
      padding-bottom: 0;
      background: var(--warm-white);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Atmospheric background blobs */
    .hero-bg-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    .hb1 { width: 600px; height: 600px; background: var(--sage);      opacity: 0.07; top: -120px; right: -80px; }
    .hb2 { width: 400px; height: 400px; background: var(--dusty-blue); opacity: 0.06; bottom: 80px; left: -120px; }
    .hb3 { width: 260px; height: 260px; background: var(--mustard);   opacity: 0.045; top: 45%; left: 38%; }

    .hero-inner {
      flex: 1;
      position: relative;
      z-index: 2; /* immer über der SVG-Szene (Bäume/Vögel z-index: 1) */
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
      padding: 3rem 4vw 0;
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      gap: 2rem;
      align-items: center;
    }

    /* ── LEFT: Text content ── */
    .hero-content {
      display: flex;
      flex-direction: column;
      gap: 1.6rem;
      padding-bottom: 5rem;
    }

    .hero-kicker {
      display: inline-block;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(1.6rem, 2.4vw, 2.1rem);
      line-height: 1;
      color: var(--sage);
      letter-spacing: 0.01em;
    }

    .hero-h1 em {
      font-style: italic;
      color: var(--sage);
      font-size: 1.3em;
      font-weight: 400;
    }

    .hero-sub {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(1.05rem, 1.4vw, 1.35rem);
      color: var(--text-light);
      line-height: 1.5;
    }

    .hero-text {
      font-size: 0.97rem;
      color: var(--text-mid);
      max-width: 460px;
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-top: 0.25rem;
    }

    .hero-scroll-hint {
      font-size: 0.78rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .hero-scroll-hint::before {
      content: '';
      display: block;
      width: 24px;
      height: 1px;
      background: var(--sand-dark);
    }

    /* ── RIGHT: Visual composition (Bee + Photo) ── */
    .hero-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      min-height: 560px;
    }

    /* The photo in an organic blob */
    .photo-wrap {
      position: relative;
      z-index: 2; /* sits clearly above the hero background scene */
      width: 400px;
      max-width: 100%;
    }

    .photo-blob {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      /* Clean circle — egg shape is reserved for the Hugo logo */
      border-radius: 50%;
      box-shadow:
        0 24px 64px rgba(45, 58, 46, 0.14),
        0 4px 16px rgba(45, 58, 46, 0.08);
      display: block;
    }

    /* Subtle decorative ring behind the photo */
    .photo-ring {
      position: absolute;
      inset: -18px;
      border-radius: 55% 45% 50% 50% / 52% 40% 60% 48%;
      border: 1.5px solid rgba(107, 143, 113, 0.18);
      pointer-events: none;
    }

    /* Hugo-Wrapper: fixed so he can roam the entire viewport */
    .hugo-wrap {
      position: fixed;
      z-index: 300;
      width: 202px;
      pointer-events: none;
      /* Position via left/top in rAF (JS); transform reserved for Touch-Hop */
      transition: transform 0.3s ease-out;
    }

    /* Inner float wrapper — keeps float animation isolated from any future wrap transforms */
    .hugo-float {
      position: relative;
      animation: float 5.5s ease-in-out infinite;
    }

    .bee-hero {
      width: 100%;
      display: block;
      overflow: visible; /* Flügel/Antennen dürfen aus der viewBox ragen */
      position: relative;
      z-index: 0;
      /* Hugo selbst ist tappbar (für Touch-Hop) — der wrap bleibt pointer-events:none */
      pointer-events: auto;
      touch-action: manipulation;
    }

    /* Hugo's speech bubble — balloon shape, above-right of his head */
    .hugo-bubble {
      position: absolute;
      z-index: 1;
      left: 130px;
      top: -50px;
      background: var(--warm-white);
      border: 1.5px solid rgba(107, 143, 113, 0.38);
      border-radius: 2rem;          /* balloon roundness */
      padding: 0.75rem 1.25rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 0.97rem;
      line-height: 1.5;
      color: var(--sage);
      white-space: nowrap;
      box-shadow: 0 6px 24px rgba(45, 58, 46, 0.11);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    /* Balloon tail pointing down-left toward Hugo */
    .hugo-bubble::before {
      content: '';
      position: absolute;
      bottom: -11px;
      left: 18px;
      width: 0; height: 0;
      border-left: 9px solid transparent;
      border-right: 5px solid transparent;
      border-top: 12px solid rgba(107, 143, 113, 0.38);
    }
    .hugo-bubble::after {
      content: '';
      position: absolute;
      bottom: -9px;
      left: 20px;
      width: 0; height: 0;
      border-left: 7px solid transparent;
      border-right: 3px solid transparent;
      border-top: 10px solid var(--warm-white);
    }

    /* Small sage-green accent shape behind the bee/photo unit */
    .hero-accent-blob {
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: var(--sage);
      opacity: 0.07;
      top: 20px;
      right: -40px;
      pointer-events: none;
      filter: blur(40px);
    }

    /* Bottom wave: minimal sand-colored transition (Erwachsenen-Modus) */
    .hero-wave {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      pointer-events: none;
      display: block;
      line-height: 0;
      transition: opacity 0.4s ease;
    }
    .hero-wave svg {
      width: 100%;
      display: block;
    }

    /* Hero background scene (hills + trees + birds — Kindmodus) */
    .hero-bg-scene {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      z-index: 1; /* hinter dem Content (.hero-inner z-index: 2) — Bäume nie über Text */
      pointer-events: none;
      display: block;
      transition: opacity 0.4s ease;
    }
    /* Erwachsenen-Modus: scene hidden, wave visible */
    body.modus-erwachsen .hero-bg-scene { opacity: 0; }
    /* Kindmodus: wave hidden, scene visible */
    body.modus-kind .hero-wave { opacity: 0; }

    /* Wellenförmige Oberkante einer Sektion — gleiche Form wie die Hero-Welle.
       Die sandfarbene Welle ragt nach oben in die (hellere) Sektion darüber.
       Voraussetzung: die Sektion hat einen sandfarbenen Hintergrund. */
    .wave-top { position: relative; }
    .wave-top::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 60px;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23EDE8DF'%20d='M0,45%20C240,90%20480,10%20720,45%20C960,80%201200,20%201440,50%20L1440,90%20L0,90%20Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      pointer-events: none;
    }

    /* Erwachsenen-Modus: Hugo sitzt still rechts unten auf der Hero-Welle,
       um die Hälfte kleiner. Im Kindmodus fliegt er weiterhin frei (rAF im JS). */
    body.modus-erwachsen .hugo-wrap {
      width: clamp(90px, 9vw, 144px);
      right: 5vw;
      bottom: 40px;
      left: auto;
      top: auto;
    }
    body.modus-erwachsen .hugo-float { animation: none; }
    body.modus-erwachsen .hugo-bubble { display: none; }
    body.modus-erwachsen .bee-hero { pointer-events: none; }

    /* Hugo schweigt im Erwachsenen-Modus — außer er hat eine Neuigkeit.
       Steht ein Vortrag an, rendert index.php die Blase als Link und schaltet
       sie damit gezielt wieder ein. Gleiche Spezifität wie die Sperre eine
       Zeile darüber, deshalb muss diese Regel danach stehen. */
    body.modus-erwachsen .hugo-bubble--termin {
      display: block;
      /* Ein Vortragstitel ist zu lang für nowrap — der würde die Blase
         waagrecht aus dem Bild schieben. */
      white-space: normal;
      /* Die normale Blase sitzt rechts neben Hugos Kopf (left: 130px). Hugo
         selbst klebt aber am rechten Rand (right: 5vw), dort ist kein Platz für
         mehrere Zeilen. Die Termin-Blase steht deshalb ÜBER ihm und läuft nach
         links in die freie Fläche. */
      left: auto;
      right: 16px;
      top: auto;
      bottom: calc(100% - 12px);
      width: max-content;
      max-width: min(17rem, 60vw);
      /* .hugo-wrap ist pointer-events:none, damit Hugo nichts blockiert.
         Ein Link darin braucht die Zeiger zurück. */
      pointer-events: auto;
      text-decoration: none;
    }
    /* Zipfel wandert mit: er zeigt jetzt von unten rechts auf Hugo hinunter. */
    body.modus-erwachsen .hugo-bubble--termin::before { left: auto; right: 24px; }
    body.modus-erwachsen .hugo-bubble--termin::after  { left: auto; right: 26px; }
    body.modus-erwachsen .hugo-bubble--termin:hover,
    body.modus-erwachsen .hugo-bubble--termin:focus-visible {
      border-color: var(--sage);
      color: var(--sage-dark);
    }

    /* Termin in der Leistungskachel auf der Startseite */
    .card-termin {
      display: inline-block;
      margin-top: 0.35rem;
      font-size: 0.82rem;
      letter-spacing: 0.04em;
      color: var(--dusty-rose);
      font-weight: 500;
    }
    /* Hugo-Sonderflug (Einladung) — temporär im Erwachsenenmodus */
    body.hugo-greeting .hugo-wrap {
      right: auto;
      bottom: auto;
      width: clamp(120px, 16vw, 200px);
      transition: left 1.2s ease, top 1.2s ease, width 0.6s ease;
    }
    body.hugo-greeting .hugo-float  { animation: float 5.5s ease-in-out infinite; }
    body.hugo-greeting .hugo-bubble { display: block; }
    body.hugo-greeting .bee-hero    { pointer-events: auto; cursor: pointer; }


    /* ─────────────────────────────────────────
       ÜBER UNS / PHILOSOPHIE
    ───────────────────────────────────────── */
    #about {
      background: var(--sand);
      padding: 7rem 4vw;
      position: relative;
      overflow: hidden;
    }

    /* Large decorative letter behind the section */
    #about::before {
      content: '🐝';
      position: absolute;
      font-size: 20rem;
      opacity: 0.04;
      right: 2%;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;
      line-height: 1;
    }

    .about-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 6rem;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .about-left {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    /* Large decorative number / typographic element */
    .about-typo-deco {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(7rem, 12vw, 12rem);
      font-weight: 300;
      line-height: 1;
      color: var(--sage);
      opacity: 0.12;
      user-select: none;
      letter-spacing: -0.04em;
    }

    /* Decorative thin horizontal line */
    .about-line {
      width: 60px;
      height: 1px;
      background: var(--sage);
      opacity: 0.4;
      margin: 1rem 0;
    }

    .about-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.4rem, 2.2vw, 2rem);
      font-weight: 300;
      font-style: italic;
      color: var(--text-dark);
      line-height: 1.4;
      opacity: 0.55;
    }

    .about-right {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .about-right .tag { margin-bottom: 0.5rem; }
    .about-right h2 { margin-bottom: 0.5rem; }

    .about-right p {
      color: var(--text-mid);
      font-size: 0.97rem;
      line-height: 1.9;
    }
    .about-right p strong {
      font-weight: 400;
      color: var(--text-dark);
    }
    .about-quote {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 1.1rem;
      color: var(--sage);
      margin-top: 1rem;
      line-height: 1.5;
    }


    /* ─────────────────────────────────────────
       FÜR WEN
    ───────────────────────────────────────── */
    #fur-wen {
      background: var(--warm-white);
      padding: 7rem 4vw;
    }

    .fur-wen-inner {
      max-width: 1280px;
      margin: 0 auto;
    }

    .fur-wen-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    .fur-wen-card {
      --accent: var(--sage);
      background: var(--sand);
      border-radius: var(--radius-lg);
      border-top: 4px solid var(--accent);
      padding: 2.25rem 2rem 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    /* Farbliche Akzente je Zielgruppe */
    .fur-wen-card--blue       { --accent: var(--dusty-blue); background: color-mix(in srgb, var(--dusty-blue) 8%, var(--warm-white)); }
    .fur-wen-card--terracotta { --accent: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 8%, var(--warm-white)); }
    .fur-wen-card--mustard    { --accent: var(--mustard);    background: color-mix(in srgb, var(--mustard) 9%, var(--warm-white)); }

    .fur-wen-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 56px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .fur-wen-card-audience {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
      margin-bottom: 0.75rem;
      display: block;
    }

    .fur-wen-card h3 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      line-height: 1.3;
    }

    .fur-wen-card p {
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.85;
      margin-bottom: 0.5rem;
    }

    .fur-wen-card p:last-child { margin-bottom: 0; }

    .fur-wen-card-link {
      margin-top: 1.25rem;
      align-self: flex-start;
      font-family: 'Jost', sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      color: var(--accent);
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.25s, color 0.25s;
    }
    .fur-wen-card-link:hover {
      border-bottom-color: var(--accent);
    }


    /* ─────────────────────────────────────────
       LEISTUNGEN
    ───────────────────────────────────────── */
    #leistungen {
      background: var(--warm-white);
      padding: 7rem 4vw;
    }

    .leistungen-inner {
      max-width: 1280px;
      margin: 0 auto;
    }

    .section-header {
      margin-bottom: 3.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

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

    .leistungen-home-cta {
      text-align: center;
      margin-top: 2.5rem;
    }

    .card {
      display: block;
      color: inherit;
      background: var(--warm-white);
      border: 1px solid rgba(107, 143, 113, 0.14);
      border-radius: var(--radius-lg);
      padding: 2rem 1.75rem 2.25rem;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    a.card { cursor: pointer; }

    /* Subtle sage tint on hover */
    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(107,143,113,0.04), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Bottom accent bar */
    .card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: var(--sage);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }

    .card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(45, 58, 46, 0.09); }
    .card:hover::before { opacity: 1; }
    .card:hover::after  { transform: scaleX(1); }

    .card-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.2rem;
      background: var(--sage);
    }
    .card-icon svg {
      width: 30px;
      height: 30px;
      display: block;
    }

    /* Farb-Leitsystem (Postkarte / DESIGN.md) */
    .icon-diagnostik { background: #6B8F71; } /* Sage Green — Lupe */
    .icon-therapie   { background: #C4694B; } /* Terracotta — Herz */
    .icon-eltern     { background: #7A9BAF; } /* Dusty Blue — Familie */
    .icon-gruppen    { background: #4a6b8f; } /* Dunkelblau — Gruppe */
    .icon-lernen     { background: #C8973A; } /* Mustard — Doktorhut */
    .icon-workshops  { background: #C4917A; } /* Dusty Rose — Präsentation */
    .icon-paar       { background: #C4694B; } /* Paartherapie — Therapie-Familie */

    /* Akzentleiste je Kachel passend zur Leistungsfarbe */
    .s-diagnostik::after { background: #6B8F71; }
    .s-therapie::after   { background: #C4694B; }
    .s-eltern::after     { background: #7A9BAF; }
    .s-gruppen::after    { background: #4a6b8f; }
    .s-lernen::after     { background: #C8973A; }
    .s-workshops::after  { background: #C4917A; }

    /* Farb-Leitsystem auf der Leistungsseite (Sektions-Akzente) */
    .leistung-aside .card-icon { align-self: flex-start; margin-bottom: 1.1rem; }

    /* Therapie → Terracotta */
    #therapie .tag { color: #C4694B; }
    #therapie .leistung-aside-line { background: #C4694B; }
    #therapie .leistung-quote { color: #C4694B; border-left-color: rgba(196, 105, 75, 0.4); }

    /* Elternbegleitung → Dusty Blue */
    #elternbegleitung .tag { color: #7A9BAF; }
    #elternbegleitung .leistung-aside-line { background: #7A9BAF; }
    #elternbegleitung .leistung-quote { color: #7A9BAF; border-left-color: rgba(122, 155, 175, 0.4); }

    /* Paartherapie → Terracotta (Therapie-Familie) */
    #paartherapie .tag { color: #C4694B; }
    #paartherapie .leistung-aside-line { background: #C4694B; }

    /* Lernbegleitung und Vorträge sind Flip-Kacheln und holen ihre Farbe
       über .g-mustard / .g-rose (siehe Farbcodierung bei den Gruppen). */

    .card h3 { margin-bottom: 0.4rem; }

    .card p {
      font-size: 0.88rem;
      color: var(--text-light);
      line-height: 1.65;
    }


    /* ─────────────────────────────────────────
       GRUPPENANGEBOTE TEASER
    ───────────────────────────────────────── */
    #gruppen-teaser {
      background: var(--sand);
      padding: 6rem 4vw;
    }
    /* Gruppenangebote-Identitätsfarbe (Leitsystem: Dunkelblau) */
    #gruppen-teaser .tag { color: #4a6b8f; }

    .gruppen-teaser-inner {
      max-width: 1080px;
      margin: 0 auto;
      text-align: center;
    }

    #gruppen-teaser .section-header {
      align-items: center;
      margin-bottom: 2.5rem;
    }

    .gruppen-teaser-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.25rem;
    }

    .gruppen-teaser-content > p {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.85;
      max-width: 640px;
    }

    .gruppen-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.55rem;
      max-width: 760px;
    }

    .gruppen-pill {
      display: inline-block;
      padding: 0.5rem 1.1rem;
      background: var(--warm-white);
      border: 1px solid rgba(107, 143, 113, 0.2);
      border-radius: var(--radius-pill);
      font-family: 'Jost', sans-serif;
      font-size: 0.78rem;
      font-weight: 400;
      color: var(--text-mid);
      letter-spacing: 0.04em;
    }


    /* ─────────────────────────────────────────
       QUOTE BANNER
    ───────────────────────────────────────── */
    #quote {
      background: var(--sage);
      padding: 6rem 8vw;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .quote-deco {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      pointer-events: none;
    }
    .qd1 { width: 500px; height: 500px; top: -200px; left: -150px; }
    .qd2 { width: 350px; height: 350px; bottom: -120px; right: -60px; }

    #quote blockquote {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto;
    }

    .quote-guillemet {
      font-family: 'Cormorant Garamond', serif;
      font-size: 5rem;
      line-height: 0.6;
      color: rgba(255, 255, 255, 0.28);
      display: block;
      margin-bottom: 1.5rem;
    }

    .quote-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.9rem, 3.5vw, 3rem);
      font-weight: 300;
      font-style: italic;
      color: white;
      line-height: 1.35;
    }

    .quote-attr {
      display: block;
      margin-top: 2rem;
      font-size: 0.78rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.5);
    }
    .quote-sub {
      display: block;
      margin-top: 1.5rem;
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.82rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.6);
    }


    /* ─────────────────────────────────────────
       KONTAKT
    ───────────────────────────────────────── */
    #kontakt {
      background: var(--sand);
      padding: 7rem 4vw;
    }

    .kontakt-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 5rem;
      align-items: start;
    }

    .kontakt-info { display: flex; flex-direction: column; gap: 2rem; }
    .kontakt-info h2 { line-height: 1.2; }

    .kontakt-sub {
      font-size: 0.97rem;
      color: var(--text-mid);
      line-height: 1.85;
    }

    .kontakt-details {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      padding-top: 0.5rem;
    }

    .kontakt-item {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      font-size: 0.94rem;
      color: var(--text-mid);
    }
    .kontakt-item span.icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
    .kontakt-item a:hover { color: var(--sage); }

    /* Divider */
    .kontakt-divider {
      width: 48px;
      height: 1px;
      background: var(--sand-dark);
    }

    /* Form card */
    .form-card {
      background: var(--warm-white);
      border-radius: var(--radius-xl);
      padding: 2.75rem;
      box-shadow: 0 6px 40px rgba(45, 58, 46, 0.06);
    }

    .form-card h3 {
      font-size: 1.1rem;
      margin-bottom: 1.75rem;
      color: var(--text-dark);
    }

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

    .form-group { display: flex; flex-direction: column; gap: 0.35rem; }
    .form-group.span2 { grid-column: 1 / -1; }

    .form-checkbox label {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 0.6rem;
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.82rem;
      line-height: 1.5;
      color: var(--text-mid);
      cursor: pointer;
    }
    .form-checkbox input[type="checkbox"] {
      width: auto;
      margin-top: 0.2rem;
      /* Native Checkbox wiederherstellen: die generische .form-group-input-Regel
         setzt appearance:none + Rahmen/Padding/Hintergrund, was die Checkbox
         unsichtbar/„nicht anhakbar" macht. Hier zurücksetzen. */
      padding: 0;
      border: none;
      background: none;
      -webkit-appearance: auto;
      appearance: auto;
      accent-color: var(--sage);
      flex-shrink: 0;
    }
    .form-checkbox a { color: var(--sage-dark); }

    .form-group label {
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-light);
      font-weight: 500;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      border: 1px solid rgba(107, 143, 113, 0.22);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      background: var(--warm-white);
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      font-size: 0.93rem;
      color: var(--text-dark);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      -webkit-appearance: none;
      appearance: none;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--text-light); opacity: 0.7; }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--sage);
      box-shadow: 0 0 0 3px rgba(107, 143, 113, 0.1);
    }
    .form-group textarea { resize: vertical; min-height: 110px; }

    .form-footer {
      margin-top: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .form-footer .form-hint {
      font-size: 0.78rem;
      color: var(--text-light);
    }
    .form-footer button {
      padding: 0.9rem 2.4rem;
      background: var(--sage);
      color: white;
      border-radius: var(--radius-pill);
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: all 0.25s;
    }
    .form-footer button:hover {
      background: var(--sage-dark);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(107, 143, 113, 0.32);
    }

    /* Spam-Honeypot: für Menschen unsichtbar, für Bots ein Köder. */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    /* Formular-Rückmeldungen */
    .form-message--error {
      margin: 0 0 1rem;
      padding: 0.75rem 1rem;
      border-radius: 14px;
      background: #f6e4dd;
      color: #8a3b2e;
      font-size: 0.92rem;
      line-height: 1.5;
    }
    .form-success {
      text-align: center;
      padding: 2.5rem 1rem;
    }
    .form-success h3 {
      margin: 0 0 0.5rem;
      color: var(--sage, #6b7f5e);
    }
    .form-success p {
      margin: 0;
      color: var(--text-dark, #2d3a2e);
    }


    /* ─────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────── */
    footer {
      background: var(--text-dark);
      padding: 2.5rem 4vw;
    }

    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .footer-logo {
      height: 48px;
      width: auto;
      object-fit: contain;
      opacity: 0.75;
    }

    .footer-copy {
      font-size: 0.82rem;
      color: rgba(250, 248, 243, 0.45);
      line-height: 1.7;
    }

    .footer-links {
      display: flex;
      gap: 1.75rem;
    }
    .footer-links a {
      font-size: 0.82rem;
      letter-spacing: 0.06em;
      color: rgba(250, 248, 243, 0.4);
    }
    .footer-links a:hover { color: rgba(250, 248, 243, 0.85); }


    /* ─────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────── */
    @media (max-width: 1800px) {
      .photo-wrap { width: 320px; }
      .hugo-wrap  { width: 168px; }
      /* Tablet/iPad: hero-inner schmäler als auf Desktop */
      .hero-inner { 
        width: 100%; }
      #hero { padding-top: 200px; }
    }

    /* Mid-Desktop / Tablet (900–1400px): zweispaltig bleibt erhalten,
       aber Spalten passen sich dem Inhalt an und werden zentriert,
       sodass Text und Foto bei kleineren Viewports zusammenrücken. */
    @media (min-width: 900px) and (max-width: 1400px) {
      .hero-inner {
        padding: 3rem 5vw 0;
        gap: 2vw;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
      }
      .photo-wrap { width: clamp(240px, 22vw, 340px); margin-right: 0; }
      .hero-h1    { font-size: clamp(2rem, 3vw, 3.5rem); }
    }

    /* Sektionen (außer Hero) einspaltig ab 1200px */
    @media (max-width: 1200px) {
      .about-inner   { grid-template-columns: 1fr; gap: 3rem; }
      .about-left    { display: none; }
      .fur-wen-cards { grid-template-columns: 1fr; }
      .kontakt-inner { grid-template-columns: 1fr; gap: 3rem; }
      .footer-inner  { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
      .header-logo   { height: 90px; }
    }

    /* Navigation: ab hier Hamburger statt Inline-Nav */
    @media (max-width: 1100px) {
      .nav-toggle { display: flex; }

      /* Reset Desktop-Offsets — Header-Actions wieder zentriert */
      .header-actions {
        align-self: center;
        margin-bottom: 0;
      }

      .main-nav {
        align-self: auto;
        margin-bottom: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(250, 248, 243, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(107, 143, 113, 0.12);
        padding: 1.5rem 4vw 1.75rem;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
        box-shadow: 0 12px 32px rgba(45, 58, 46, 0.08);
      }
      header.nav-open .main-nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
      }
      .main-nav ul {
        flex-direction: column;
        gap: 1.1rem;
        align-items: flex-start;
      }
      .nav-link {
        font-size: 0.9rem;
        padding: 0.35rem 0;
      }
      .nav-link.active { border-bottom-color: transparent; padding-left: 0.5rem; border-left: 2px solid var(--sage); }
    }

    /* Intermediate Desktop (z. B. MacBook 14" @ ~1512px): Inline-Nav bleibt,
       aber Logo & Nav werden kompakter, damit nichts überlappt. */
    @media (min-width: 1101px) and (max-width: 1700px) {
      header        { padding: 1rem 2.5vw; }
      .header-logo  { height: 104px; }
      .main-nav ul  { gap: 1.4rem; }
      .nav-link     { font-size: 0.72rem; letter-spacing: 0.12em; }
    }

    /* Hero: erst unter 900px einspaltig (Text oben, Foto unten) */
    @media (max-width: 900px) {
      .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 1rem;
        gap: 3rem;
        bottom: -15vw;
      }
      .hero-content { align-items: center; padding-bottom: 0; }
      .hero-text    { max-width: 520px; }
      .hero-visual  { min-height: 480px; }
      .photo-wrap   { width: 280px; margin: 0 auto; }
      .hugo-wrap    { width: 146px; }
      .hugo-bubble  { font-size: 0.85rem; left: 94px; top: -50px; }

      /* Padding-bottom damit der CTA-Button nicht in der SVG-Szene versinkt */
      #hero { padding-bottom: 350px; padding-top: 0; }
    }

    @media (max-width: 640px) {
      /* Header: stack vertically — logo above, toggle + Kontakt below.
         Prevents the modus-toggle from overlapping the 'hummelwerk' logo text. */
      header {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 4vw;
      }
      .header-logo  { height: 60px; }
      /* Stack toggle (pill) und Kontakt-Button vertikal unter dem Logo */
      .header-actions {
        flex-direction: column;
        gap: 0.6rem;
      }

      /* Hamburger floatet oben rechts, damit der bestehende Stack erhalten bleibt */
      .nav-toggle {
        position: absolute;
        top: 0.7rem;
        right: 4vw;
        width: 38px;
        height: 38px;
      }
      .nav-toggle span { width: 16px; }

      /* Pill etwas kompakter auf Mobile */
      .modus-btn { padding: 0.35rem 0.85rem; gap: 0.45rem; }
      .modus-btn-label { font-size: 0.74rem; }
      .modus-btn--erwachsen img { width: 28px; height: 28px; }
      .modus-btn--kind img      { width: 20px; height: 20px; }

      .header-contact {
        font-size: 0.74rem;
        padding: 0.5rem 1.1rem;
      }

      /* Extra top clearance because the header is now two rows on mobile.
         padding-bottom: kleineres Foto + niedrigere Szene → weniger Leerraum
         zwischen Foto und Wellenrand/Landschaft als die 350px aus dem 900px-Block. */
      #hero { padding-top: 170px; padding-bottom: 210px; }

      .cards-grid   { grid-template-columns: 1fr; }
      .form-grid    { grid-template-columns: 1fr; }
      .form-group.span2 { grid-column: 1; }
      .hero-visual { min-height: 360px; }
      .photo-wrap  { width: 220px; }
      .hugo-wrap   { width: 112px; }
      .hugo-bubble {
        left: 72px; top: -60px;
        font-size: 0.78rem;
        padding: 0.55rem 0.9rem;
        white-space: normal;
        max-width: 160px;
        line-height: 1.4;
      }

      /* CTA-Buttons im Hero etwas kompakter auf Smartphone */
      .hero-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
      }
      .hero-actions .btn-primary,
      .hero-actions .btn-secondary {
        padding: 0.7rem 1.5rem;
        font-size: 0.74rem;
        letter-spacing: 0.08em;
      }
    }

    @media (min-width: 641px) and (max-width: 900px) {
      .fur-wen-cards { grid-template-columns: repeat(2, 1fr); }
    }

    @media (min-width: 901px) and (max-width: 1060px) {
      .cards-grid { grid-template-columns: repeat(2, 1fr); }
    }


    /* ═════════════════════════════════════════
       LEISTUNGEN-SEITE
    ═════════════════════════════════════════ */

    /* ── Page Hero (kleinerer Banner statt Full-Screen-Hero) ── */
    .page-hero {
      background: var(--warm-white);
      padding: 15rem 4vw 5rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .page-hero-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    .page-hero-blob.pb1 { width: 480px; height: 480px; background: var(--sage); opacity: 0.07; top: -120px; right: -80px; }
    .page-hero-blob.pb2 { width: 320px; height: 320px; background: var(--dusty-blue); opacity: 0.05; bottom: -100px; left: -60px; }

    .hero-heart {
      width: clamp(22px, 2.2vw, 28px);
      height: auto;
      margin-top: 1.6rem;
      fill: var(--sage);
      opacity: 0.85;
    }

    /* Akzent-Flourish unter der Headline — drei warme Markenfarben */
    .hero-accent {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      margin-top: -0.4rem;
    }
    .hero-accent::before,
    .hero-accent::after {
      content: "";
      width: clamp(28px, 4vw, 44px);
      height: 1px;
      background: var(--sage);
      opacity: 0.3;
    }
    .hero-accent-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }
    .hero-accent-dot.d1 { background: var(--sage); }
    .hero-accent-dot.d2 { background: var(--terracotta); }
    .hero-accent-dot.d3 { background: var(--dusty-blue); }

    /* Akzent-Zitat im Kontakt-Hero ("Vielleicht …") — Look wie auf Über uns,
       nur für die zentrierte Hero-Spalte positioniert. */
    .hero-quote {
      max-width: 540px;
      margin: 0.6rem auto 0;
      text-align: left;
    }
    .hero-quote-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 1.1rem;
      line-height: 1.35;
      color: var(--terracotta);
    }
    .hero-quote-list li {
      position: relative;
      padding-left: 1.3rem;
    }
    .hero-quote-list li::before {
      content: '•';
      position: absolute;
      left: 0.2rem;
      top: 0;
      color: var(--terracotta);
      font-style: normal;
      font-size: 1.1rem;
      line-height: 1.35;
    }

    /* Über uns — Lücke zwischen Herz und Geschichte schließen */
    .page-ueber-uns .page-hero { padding-bottom: 2rem; }

    /* Leistungen — Lücke unter dem Hero-Button reduzieren */
    .page-leistungen .page-hero { padding-bottom: 2rem; }
    .page-leistungen #diagnostik { padding-top: 2.5rem; }

    /* Für wen — Abstand unter den Navcards reduzieren */
    .page-fuer-wen .page-hero { padding-bottom: 2.5rem; }
    .page-fuer-wen #erwachsene { padding-top: 2.5rem; }

    /* Kontakt — Lücke zwischen Hero-Herz und Kompassgespräch schließen */
    .page-kontakt .page-hero,
    .page-termin .page-hero { padding-bottom: 0.25rem; }

    /* Gruppenangebote — Lücke unter dem Stundenplan-Button reduzieren */
    .page-gruppen .page-hero { padding-bottom: 2rem; }
    .page-gruppen #gruppen-intro { padding-top: 2.5rem; }

    .page-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }
    .page-hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2.4rem, 4vw, 3.8rem);
      line-height: 1.1;
      color: var(--text-dark);
    }
    .page-hero-sub {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.85;
      max-width: 640px;
    }


    /* ── Leistung-Sektion (zweispaltig: Aside + Content) ── */
    .leistung-section {
      background: var(--warm-white);
      padding: 6rem 4vw;
    }
    .leistung-section.alt { background: var(--sand); }

    .leistung-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.85fr 1.5fr;
      gap: 4.5rem;
      align-items: start;
    }

    .leistung-aside {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      position: sticky;
      top: 220px;
    }
    .leistung-aside .tag { align-self: flex-start; }
    .leistung-aside h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(1.9rem, 2.6vw, 2.5rem);
      line-height: 1.15;
      color: var(--text-dark);
    }
    .leistung-aside-line {
      width: 48px;
      height: 1px;
      background: var(--sage);
      opacity: 0.5;
      margin-top: 0.25rem;
    }

    /* Über uns — organische Farbformen in der Geschichte-Sektion */
    #geschichte { position: relative; overflow: clip; padding-top: 2rem; padding-bottom: 2.5rem; }
    #geschichte .leistung-inner { position: relative; z-index: 1; }
    .geschichte-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }
    .gb1 { width: 440px; height: 440px; background: var(--sage);        opacity: 0.12; top: 4%;  left: -90px; }
    .gb2 { width: 320px; height: 320px; background: var(--mustard);     opacity: 0.10; top: 42%; left: 2%;   }
    .gb3 { width: 300px; height: 300px; background: var(--terracotta);  opacity: 0.08; top: 74%; left: -60px; }

    .leistung-content {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
    }
    .leistung-content h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.3rem;
      color: var(--text-dark);
      margin-top: 1rem;
      line-height: 1.3;
    }
    .leistung-content h3:first-of-type { margin-top: 0.5rem; }
    .leistung-content p {
      font-size: 0.97rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
    .leistung-content p em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--sage);
    }

    .leistung-lead {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
      line-height: 1.55 !important;
      color: var(--text-mid) !important;
      margin-bottom: 0.5rem;
    }
    .leistung-lead em {
      color: var(--sage) !important;
      font-style: italic;
      font-size: inherit !important;
    }

    /* Check-Liste mit Sage-Häkchen */
    .check-list {
      list-style: none;
      padding: 0;
      margin: 0.25rem 0 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    .check-list li {
      position: relative;
      padding-left: 1.6rem;
      font-size: 0.95rem;
      color: var(--text-mid);
      line-height: 1.75;
    }
    .check-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--sage);
      font-weight: 500;
      font-size: 0.95rem;
    }

    .leistung-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.8rem;
      margin: 1rem 0 0.25rem;
      font-size: 0.92rem;
      color: var(--text-mid);
    }
    .tag-soft {
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sage);
      font-weight: 500;
    }

    .leistung-quote {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-style: italic;
      font-size: clamp(1.1rem, 1.4vw, 1.3rem);
      color: var(--sage);
      line-height: 1.55;
      padding: 0.5rem 0 0.5rem 1.5rem;
      border-left: 2px solid rgba(107, 143, 113, 0.4);
      margin: 1.5rem 0 0.5rem;
    }

    /* Hervorgehobenes Akzent-Zitat (Über uns — Geschichte) */
    .leistung-quote--feature {
      position: relative;
      color: var(--terracotta);
      font-size: clamp(1.3rem, 1.9vw, 1.7rem);
      line-height: 1.45;
      border-left: 3px solid var(--terracotta);
      background: color-mix(in srgb, var(--terracotta) 7%, var(--warm-white));
      border-radius: 0 14px 14px 0;
      padding: 1.4rem 1.6rem 1.4rem 1.8rem;
      margin: 2rem 0 1rem;
    }
    .leistung-quote--feature::before {
      content: "\201C";
      position: absolute;
      top: -0.35em;
      right: 0.3em;
      font-family: 'Cormorant Garamond', serif;
      font-size: 4.5rem;
      line-height: 1;
      color: var(--terracotta);
      opacity: 0.16;
      pointer-events: none;
    }

    .leistung-cta {
      align-self: flex-start;
      margin-top: 1.5rem;
    }

    .leistung-cta-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      margin-top: 1.5rem;
      align-self: flex-start;
    }
    .leistung-cta-group .leistung-cta { margin-top: 0; }


    /* ── Lernbegleitung + Vorträge (umdrehbare Kacheln) ──────────────
       Die Kacheln selbst kommen aus .gruppe-card--flip (siehe
       Gruppenangebote), hier steht nur die Fläche und das Raster. */
    .leistung-placeholders {
      background: var(--warm-white);
      padding: 6rem 4vw;
    }
    .leistung-placeholders-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.75rem;
    }


    /* ── Kommende Vorträge (aus Nicolas Google-Kalender) ──────────────
       Offene Fläche mit feinen Trennlinien, wie die Kacheln darüber —
       keine Kästen. Datum links in einer schmalen Spalte, damit die Augen
       eine Kante zum Scannen haben. */
    .vortraege-section {
      background: var(--sand);
      padding: 5rem 4vw;
    }
    .vortraege-inner {
      --accent: var(--dusty-rose);
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .vortraege-inner .tag { color: var(--dusty-rose); align-self: flex-start; }

    .vortraege-liste {
      display: flex;
      flex-direction: column;
    }
    .vortrag-zeile {
      display: grid;
      grid-template-columns: 8.5rem 1fr;
      gap: 1.5rem;
      align-items: baseline;
      padding: 1.25rem 0;
      border-top: 1px solid rgba(45, 58, 46, 0.12);
    }
    .vortrag-zeile:last-child { border-bottom: 1px solid rgba(45, 58, 46, 0.12); }

    .vortrag-datum time {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .vortrag-wochentag {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--dusty-rose);
      font-weight: 500;
    }
    .vortrag-tag {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      line-height: 1.15;
      color: var(--text-dark);
    }
    .vortrag-jahr {
      font-size: 0.8rem;
      color: var(--text-light);
    }

    .vortrag-titel {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.25rem;
      line-height: 1.3;
      color: var(--text-dark);
      margin-bottom: 0.3rem;
    }
    .vortrag-ort {
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.6;
    }

    /* Beschreibung aus dem Kalender. Hier steht bei Nicola die Substanz,
       deshalb bekommt sie Lesebreite und echten Absatzabstand. */
    .vortrag-text {
      margin-top: 0.6rem;
      max-width: 46rem;
    }
    .vortrag-text p {
      font-size: 0.94rem;
      line-height: 1.75;
      color: var(--text-mid);
    }
    .vortrag-text p + p { margin-top: 0.7rem; }
    /* Der letzte Absatz ist bei Nicola oft ein Hinweis („Verbindliche
       Anmeldung notwendig") — leicht abgesetzt, damit er nicht untergeht. */
    .vortrag-text p:last-child:not(:only-child) {
      margin-top: 0.9rem;
      font-size: 0.88rem;
      color: var(--text-light);
    }

    .vortraege-cta { align-self: flex-start; margin-top: 0.5rem; }


    /* ── Gruppenangebote-Teaser auf Sage-Hintergrund ── */
    #leistungen-gruppen-teaser {
      background: #4a6b8f; /* Gruppenangebote — Dunkelblau (Leitsystem) */
      padding: 6rem 4vw;
      text-align: center;
      position: relative;
      overflow: hidden;
      color: white;
    }
    #leistungen-gruppen-teaser .quote-deco { background: rgba(255, 255, 255, 0.05); }

    .leistungen-gruppen-inner {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.75rem;
    }
    .tag-light {
      display: inline-block;
      padding: 0.4rem 0.9rem;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: var(--radius-pill);
      font-family: 'Jost', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.92);
      font-weight: 500;
    }
    #leistungen-gruppen-teaser h2 {
      color: white;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      line-height: 1.3;
    }
    #leistungen-gruppen-teaser h2 em {
      font-style: italic;
      color: rgba(255, 255, 255, 0.88);
    }
    #leistungen-gruppen-teaser p {
      color: rgba(255, 255, 255, 0.85);
      font-size: 1rem;
      line-height: 1.85;
      max-width: 640px;
    }
    .gruppen-pills.on-sage { max-width: 760px; }
    .gruppen-pills.on-sage .gruppen-pill {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: white;
    }

    .btn-on-sage {
      display: inline-block;
      padding: 0.9rem 2.2rem;
      background: white;
      color: var(--sage);
      border-radius: var(--radius-pill);
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
      margin-top: 0.5rem;
    }
    .btn-on-sage:hover {
      background: rgba(255, 255, 255, 0.92);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }


    /* ── Finale CTA-Sektion ── */
    #leistungen-cta {
      background: var(--sand);
      padding: 7rem 4vw;
    }
    .leistungen-cta-inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }
    .leistungen-cta-inner h2 { margin: 0.25rem 0 0.5rem; }
    .leistungen-cta-inner p {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
    .leistungen-cta-inner .btn-primary { margin-top: 1rem; }


    /* ── Responsive (Leistungen) ── */
    @media (max-width: 1100px) {
      .leistung-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
      .leistung-aside { position: static; }
      .page-hero { padding: 12rem 4vw 4rem; }
    }

    @media (max-width: 640px) {
      .leistung-placeholders-inner { grid-template-columns: 1fr; }
      .page-hero { padding: 11rem 4vw 3rem; }
      .leistung-section, .leistung-placeholders, #leistungen-gruppen-teaser, #leistungen-cta {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .leistung-section, .leistung-placeholders, #leistungen-gruppen-teaser, #leistungen-cta { padding-top: 4rem; padding-bottom: 4rem; }
      #leistungen-gruppen-teaser { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    }


    /* ═════════════════════════════════════════
       KONTAKT-SEITE
    ═════════════════════════════════════════ */

    .page-hero-text {
      font-size: 0.95rem;
      color: var(--text-light);
      line-height: 1.85;
      max-width: 600px;
      text-align: center;
    }

    /* ── Kontaktdaten + Karte ── */
    #kontaktdaten {
      background: var(--warm-white);
      padding: 6rem 4vw;
    }

    .kontakt-map { width: 100%; }

    .map-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      text-align: center;
      min-height: 320px;
      height: 100%;
      padding: 2.5rem;
      background: var(--sand);
      border: 1px solid var(--sand-dark);
      border-radius: var(--radius-lg);
      color: var(--text-mid);
      text-decoration: none;
      transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
    }
    .map-placeholder:hover {
      background: #e6ded0;
      box-shadow: 0 16px 44px rgba(45, 58, 46, 0.1);
      transform: translateY(-2px);
    }
    .map-placeholder--wide { min-height: 380px; }
    .map-pin { font-size: 2.5rem; line-height: 1; }
    .map-label {
      font-size: 0.95rem;
      line-height: 1.7;
    }
    .map-link-text {
      display: inline-block;
      margin-top: 0.5rem;
      color: var(--sage-dark);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    /* ── Karte: Klick-zum-Laden (DSGVO-konform) ── */
    .map-embed { width: 100%; height: 100%; }
    .map-embed .map-load-btn { margin-top: 1rem; }
    .map-privacy-note {
      margin-top: 0.75rem;
      font-size: 0.8rem;
      color: var(--text-soft, var(--text-mid));
      opacity: 0.85;
    }
    .map-fallback-link {
      margin-top: 0.4rem;
      font-size: 0.82rem;
      color: var(--sage-dark);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .map-fallback-link:hover { color: var(--accent, var(--sage)); }
    .map-frame {
      display: block;
      width: 100%;
      min-height: 320px;
      height: 100%;
      border: 0;
      border-radius: var(--radius-lg);
    }
    .map-embed--wide .map-frame { min-height: 380px; }

    /* ── Termin buchen: Google-Kalender, Klick-zum-Laden (DSGVO-konform) ── */
    .termin-section {
      background: var(--warm-white);
      padding: 5rem 4vw;
    }
    .termin-inner { max-width: 900px; margin: 0 auto; }
    .termin-head { text-align: center; margin-bottom: 2.5rem; }
    .termin-head h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      color: var(--text-dark);
      margin: 0.75rem 0 1rem;
      line-height: 1.2;
    }
    .termin-head p {
      color: var(--text-mid);
      line-height: 1.8;
      max-width: 640px;
      margin: 0 auto;
    }
    .termin-head p a {
      color: var(--sage-dark);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .cal-embed { width: 100%; text-align: center; }
    .cal-frame {
      display: block;
      width: 100%;
      min-height: 700px;
      border: 0;
      border-radius: var(--radius-lg);
    }
    .cal-fallback-link {
      display: inline-block;
      margin-top: 0.9rem;
      font-size: 0.82rem;
      color: var(--sage-dark);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .cal-fallback-link:hover { color: var(--accent, var(--sage)); }
    .termin-back { text-align: center; margin-top: 2rem; }
    .termin-back a {
      color: var(--sage-dark);
      text-decoration: none;
      font-size: 0.9rem;
      letter-spacing: 0.02em;
    }
    .termin-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* ── Formular-Sektion ── */
    #formular {
      background: var(--sand);
      padding: 6rem 4vw;
    }
    .formular-inner {
      max-width: 720px;
      margin: 0 auto;
    }
    .hugo-form-note {
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.05rem, 1.6vw, 1.3rem);
      color: var(--sage);
      line-height: 1.6;
      max-width: 520px;
      margin: 1.5rem auto 2.25rem;
    }

    /* ── FAQ ── */
    #faq {
      background: var(--warm-white);
      padding: 6rem 4vw;
    }
    .faq-inner {
      max-width: 800px;
      margin: 0 auto;
    }
    .faq-list {
      margin-top: 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .faq-item {
      background: var(--sand);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: box-shadow 0.25s;
    }
    .faq-item[open] { box-shadow: 0 12px 36px rgba(45, 58, 46, 0.07); }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 1.35rem 1.75rem;
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      color: var(--text-dark);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      font-size: 1.4rem;
      color: var(--sage);
      line-height: 1;
      flex-shrink: 0;
      transition: transform 0.25s;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-answer {
      padding: 0 1.75rem 1.5rem;
    }
    .faq-answer p {
      font-size: 0.94rem;
      color: var(--text-mid);
      line-height: 1.8;
    }

    /* ── Anfahrt ── */
    .anfahrt-inner {
      max-width: 900px;
      margin: 0 auto;
    }
    .anfahrt-inner .section-header { margin-bottom: 2.5rem; }
    .anfahrt-note {
      text-align: center;
      font-size: 0.88rem;
      color: var(--text-light);
      line-height: 1.7;
      margin-top: 1.5rem;
    }

    /* ── Abschlussbereich (geteilt: Kontakt + Für wen) ── */
    .abschluss-banner {
      background: #e8efe7;
      padding: 7rem 4vw;
      text-align: center;
    }
    .abschluss-banner-inner {
      max-width: 720px;
      margin: 0 auto;
    }
    .abschluss-banner-inner h2 {
      margin: 0.5rem 0 1.5rem;
      line-height: 1.2;
    }
    .abschluss-banner-inner p {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.9;
      margin-bottom: 2rem;
    }

    /* ═══════════════════════════════════════════
       KONTAKTSEITE — Akzentfarben pro Sektion
       Variablen-getrieben: jede Sektion setzt --accent
       + --accent-soft, die gemeinsamen Elemente lesen daraus.
       Alles unter .page-kontakt gescoped, damit geteilte
       Komponenten auf anderen Seiten unberührt bleiben.
    ═══════════════════════════════════════════ */
    .page-kontakt #kompassgespraech { --accent: var(--dusty-blue); --accent-soft: rgba(122, 155, 175, 0.4); }
    .page-kontakt #kontaktdaten     { --accent: var(--terracotta);  --accent-soft: rgba(196, 105, 75, 0.4); }
    .page-kontakt #formular         { --accent: var(--mustard);     --accent-soft: rgba(200, 151, 58, 0.4); }
    .page-kontakt #faq              { --accent: var(--dusty-rose);  --accent-soft: rgba(196, 145, 122, 0.4); }
    .page-kontakt #anfahrt          { --accent: var(--sage);        --accent-soft: rgba(107, 143, 113, 0.4); }

    /* Tag-Pille pro Sektion einfärben */
    .page-kontakt #kompassgespraech .tag,
    .page-kontakt #kontaktdaten .tag,
    .page-kontakt #formular .tag,
    .page-kontakt #faq .tag,
    .page-kontakt #anfahrt .tag {
      color: var(--accent);
      border-color: var(--accent-soft);
    }

    /* Kompassgespräch — Dusty Blue */
    .page-kontakt #kompassgespraech .leistung-aside-line { background: var(--accent); }
    .page-kontakt #kompassgespraech .check-list li::before { color: var(--accent); }
    .page-kontakt #kompassgespraech .leistung-quote {
      color: var(--accent);
      border-left-color: var(--accent-soft);
    }
    .page-kontakt #kompassgespraech .leistung-lead em,
    .page-kontakt #kompassgespraech .leistung-content p em { color: var(--accent); }

    /* Kontaktdaten — Terracotta */
    .page-kontakt #kontaktdaten .kontakt-item a:hover { color: var(--accent); }
    .page-kontakt #kontaktdaten .kontakt-divider { background: var(--accent); opacity: 0.55; }
    .page-kontakt #kontaktdaten .map-link-text { color: var(--accent); }

    /* Formular — Mustard */
    .page-kontakt #formular .hugo-form-note { color: var(--accent); }
    .page-kontakt #formular .form-group input:focus,
    .page-kontakt #formular .form-group select:focus,
    .page-kontakt #formular .form-group textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .page-kontakt #formular .form-checkbox input[type="checkbox"] { accent-color: var(--accent); }
    .page-kontakt #formular .form-checkbox a { color: var(--accent); }

    /* FAQ — Dusty Rose */
    .page-kontakt #faq .faq-item summary::after { color: var(--accent); }
    .page-kontakt #faq .faq-item[open] summary { color: var(--accent); }

    /* Anfahrt — Sage */
    .page-kontakt #anfahrt .map-link-text { color: var(--accent); }

    /* Buntere Hero-Blobs (nur Kontaktseite) */
    .page-kontakt .page-hero-blob.pb1,
    .page-termin .page-hero-blob.pb1 { background: var(--sage); opacity: 0.08; }
    .page-kontakt .page-hero-blob.pb2,
    .page-termin .page-hero-blob.pb2 { background: var(--dusty-blue); opacity: 0.06; }
    .page-kontakt .page-hero-blob.pb3,
    .page-termin .page-hero-blob.pb3 {
      width: 360px; height: 360px;
      background: var(--terracotta);
      opacity: 0.05;
      top: 40px; left: 12%;
    }

    @media (max-width: 640px) {
      #kontaktdaten, #formular, #faq, #kontakt-abschluss {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
      }
    }


    /* ═════════════════════════════════════════
       FÜR-WEN-SEITE
    ═════════════════════════════════════════ */

    /* ── Navigationskarten im Hero ── */
    .fuer-wen-navcards {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 3.5rem auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    .fuer-wen-navcard {
      --accent: var(--sage);
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      padding: 1.75rem 1.75rem 1.5rem;
      background: color-mix(in srgb, var(--accent) 8%, var(--warm-white));
      border: 1px solid rgba(45, 58, 46, 0.08);
      border-radius: var(--radius-lg);
      border-top: 3px solid var(--accent);
      text-decoration: none;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .fuer-wen-navcard:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 56px color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .fuer-wen-navcard.nav-sage    { --accent: var(--sage); }
    .fuer-wen-navcard.nav-blue    { --accent: var(--dusty-blue); }
    .fuer-wen-navcard.nav-mustard { --accent: var(--mustard); background: color-mix(in srgb, var(--mustard) 9%, var(--warm-white)); }
    .navcard-label {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--text-light);
    }
    .nav-sage .navcard-label    { color: var(--sage); }
    .nav-blue .navcard-label    { color: var(--dusty-blue); }
    .nav-mustard .navcard-label { color: var(--mustard); }
    .navcard-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      line-height: 1.35;
      color: var(--text-dark);
    }
    .navcard-arrow {
      margin-top: 0.25rem;
      color: var(--sage);
      font-size: 1.1rem;
    }

    /* ── Akzentfarben pro Sektion ── */
    .accent-blue .tag { color: var(--dusty-blue); }
    .accent-blue .leistung-aside-line { background: var(--dusty-blue); }

    /* ── Middot-Aufzählungen ── */
    .leistung-tags {
      color: var(--text-mid) !important;
      font-style: italic;
      line-height: 2 !important;
    }

    /* ── Hugo-Inline-Zitat ── */
    .hugo-inline {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
      color: var(--sage) !important;
      margin-top: 1.75rem;
    }

    /* ── Kinder-Sektion ── */
    .kinder-section {
      background: linear-gradient(180deg, #fbf6ea 0%, var(--warm-white) 100%);
      padding: 6rem 4vw;
      transition: background 0.5s ease;
      position: relative;
    }
    .kinder-inner {
      max-width: 820px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    /* Hintergrund-Szene (Hügel + Bäume + Vögel) — als „Boden" unten in der
       Sektion, hinter dem Inhalt. Nur im Kind-Modus eingeblendet.
       Der Clip-Wrapper deckt die ganze Sektion ab und kappt das Bild oben,
       falls es höher als die Sektion wäre. Er ist KEIN Vorfahre der sticky
       Reise-Bühne, daher bleibt deren Sticky-Verhalten unberührt. */
    .kinder-bg-clip {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    body.modus-kind .kinder-bg-clip { opacity: 1; }
    .kinder-bg-scene {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      user-select: none;
    }
    .kinder-hint {
      background: var(--sand);
      border-radius: var(--radius-md);
      padding: 1rem 1.5rem;
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.7;
      margin-bottom: 3rem;
      text-align: center;
    }
    .kinder-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .kinder-hugo {
      width: 90px;
      height: auto;
      margin-bottom: 1rem;
      transition: width 0.4s ease, transform 0.4s ease;
    }
    .kinder-header h2 { margin-top: 0.5rem; }
    .kinder-content h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.3rem, 1.9vw, 1.6rem);
      color: var(--mustard);
      margin: 2.25rem 0 0.75rem;
    }
    .kinder-content p {
      font-size: 0.97rem;
      color: var(--text-mid);
      line-height: 1.85;
      margin-bottom: 0.6rem;
    }
    .kinder-content .leistung-lead { color: var(--text-dark); }
    .kinder-content em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--mustard);
    }

    /* ── Modus-Kopplung (siehe MODUS-TOGGLE.md) ── */
    .kinder-only-kind  { display: none; }
    .kinder-only-adult { display: block; }
    body.modus-kind .kinder-only-kind  { display: block; }
    body.modus-kind .kinder-only-adult { display: none; }

    /* Kindmodus: Sektion verspielter + Hugo prominenter */
    body.modus-kind .kinder-section {
      background: linear-gradient(180deg, #fdf3df 0%, #f6efe0 100%);
    }
    body.modus-kind .kinder-hugo {
      width: 130px;
      animation: float 4s ease-in-out infinite;
    }

    @media (max-width: 900px) {
      .fuer-wen-navcards { grid-template-columns: 1fr; max-width: 480px; }
    }
    @media (max-width: 640px) {
      .kinder-section { padding: 4rem 1.5rem; }
    }


    /* ═════════════════════════════════════════
       GRUPPENANGEBOTE-SEITE
    ═════════════════════════════════════════ */

    /* ── Einleitung ── */
    #gruppen-intro {
      background: var(--warm-white);
      padding: 5rem 4vw 3rem;
    }
    .gruppen-intro-inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .gruppen-intro-lead {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.3rem, 2vw, 1.7rem);
      color: var(--text-dark);
      line-height: 1.4;
      margin-bottom: 1.5rem;
    }
    .gruppen-intro-inner p {
      font-size: 0.97rem;
      color: var(--text-mid);
      line-height: 1.85;
    }
    .gruppen-intro-claim {
      margin-top: 1.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important;
      color: var(--sage) !important;
    }

    /* ── Gruppen-Sektionen ── */
    .gruppen-section {
      padding: 5rem 4vw;
      background: var(--warm-white);
    }
    .gruppen-section.alt { background: var(--sand); }
    .gruppen-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
    .gruppen-inner .section-header { margin-bottom: 2.5rem; }

    /* Seiten-Identitätsfarbe Gruppenangebote (Dunkelblau) */
    .page-gruppen .page-hero .tag,
    .page-gruppen .gruppen-inner .section-header .tag { color: #4a6b8f; }

    /* Icon-Sprite: die <symbol>-Definitionen werden nie selbst gerendert,
       nur über <use> referenziert. */
    .icon-sprite { display: none; }

    .gruppen-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    /* ── Gruppenkachel (umdrehbar) ──────────────────────────────────
       Vorderseite = Flyer-Inhalt (Icon, Name, Meta-Zeilen),
       Rückseite   = Vorstellungstext, scrollt intern.
       Interaktion und Reduced-Motion-Verhalten teilen sich die Kacheln
       mit den Teamkacheln über den Handler in script.js.          */
    .gruppe-card {
      --accent: var(--sage);
      border-radius: var(--radius-lg);
    }
    .gruppe-card--flip {
      perspective: 1400px;
      cursor: pointer;
      outline: none;
      /* Feste Höhe, weil die Rückseite absolut positioniert ist und
         sonst keinen Bezug hätte. Reicht für die Vorderseite; der
         längere Text auf der Rückseite scrollt. */
      height: clamp(19.5rem, 24vw, 21.5rem);
    }
    .gruppe-card--flip:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    .gruppe-flip {
      position: relative;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .gruppe-card.is-flipped .gruppe-flip { transform: rotateY(180deg); }
    /* Offene Flächen statt Kästen: der Flyer rahmt die Angebote nicht ein,
       sie stehen auf der durchgehenden Cremefläche und sind nur durch eine
       feine Linie getrennt. Die Fläche muss deckend sein, sonst scheint
       beim Drehen die Rückseite durch. */
    .gruppe-face {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      /* Innenabstand auf allen vier Seiten, damit der Inhalt nicht am Rand
         klebt. Die Trennlinie unten läuft trotzdem über die volle Breite —
         sie sitzt am Element, nicht am Inhalt. */
      padding: 1rem 1.4rem 1.4rem;
      background: var(--warm-white);
      border-bottom: 1px solid rgba(45, 58, 46, 0.12);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: background 0.25s;
    }
    .gruppe-face--back { transform: rotateY(180deg); }
    .gruppe-card--flip:hover .gruppe-face {
      background: color-mix(in srgb, var(--accent) 5%, var(--warm-white));
    }

    .gruppe-kopf {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
      margin-bottom: 1.3rem;
    }
    .gruppe-icon {
      flex: 0 0 auto;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--accent) 13%, var(--warm-white));
      color: var(--accent);
    }
    /* Die gelieferten Angebots-Icons bringen ihren getönten Kreis und ihre
       Farbe selbst mit — dann darf hier kein zweiter Kreis darunter liegen.
       Nur die noch als SVG gezeichneten Icons behalten den CSS-Kreis. */
    .gruppe-icon:has(img) { background: none; }
    .gruppe-icon img {
      width: 100%;
      height: 100%;
      display: block;
    }
    .gruppe-icon--klein { width: 46px; height: 46px; }
    .gruppe-icon--klein svg { width: 22px; height: 22px; }
    .gruppe-icon svg {
      width: 38px;
      height: 38px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .gruppe-card h3 {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 1.02rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-dark);
      line-height: 1.3;
    }
    .gruppe-sub {
      display: block;
      margin-top: 0.4rem;
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 400;
      color: var(--text-mid);
      line-height: 1.6;
    }

    .gruppe-meta {
      list-style: none;
      margin: 0;
      /* fluchtet mit dem Titel, nicht mit dem Icon */
      padding: 0 0 0 calc(78px + 1.2rem);
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .gruppe-meta li {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      font-size: 0.85rem;
      color: var(--text-mid);
      line-height: 1.45;
    }
    /* Starttermin etwas kräftiger als die übrigen Meta-Zeilen — das ist die
       Information, nach der beim Überfliegen als Erstes gesucht wird. */
    .gruppe-meta .gruppe-start {
      color: var(--text-dark);
      font-weight: 500;
    }
    .meta-icon {
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      margin-top: 0.12rem;
      fill: none;
      stroke: var(--accent);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .gruppe-hinweis {
      margin-top: auto;
      padding: 1.1rem 0 0 calc(78px + 1.2rem);
      font-size: 0.75rem;
      font-style: italic;
      color: var(--text-light);
      line-height: 1.5;
    }

    /* Rückseite */
    .gruppe-face--back h3 { margin-bottom: 0.85rem; }
    .gruppe-text {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 0.6rem;
    }
    .gruppe-text p,
    .gruppe-text li {
      font-size: 0.8rem;
      line-height: 1.68;
      color: var(--text-mid);
    }
    .gruppe-text p { margin-bottom: 0.7rem; }
    .gruppe-text p:last-child { margin-bottom: 0; }
    .gruppe-text-claim {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.05rem !important;
      line-height: 1.4 !important;
      color: var(--text-dark) !important;
    }
    /* Untertitel und Leitung auf der Rückseite, direkt unter dem Gruppennamen */
    .gruppe-text-lead {
      font-size: 0.74rem !important;
      line-height: 1.55 !important;
      letter-spacing: 0.01em;
      color: var(--text-light) !important;
      margin-bottom: 0.9rem !important;
    }
    /* Betonte Kernsätze im Fließtext der Rückseite — in der Akzentfarbe der
       jeweiligen Karte, damit sie sich vom übrigen Text abheben. */
    .gruppe-text-betont {
      padding: 0.7rem 0 0.7rem 0.85rem;
      border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
      color: var(--text-dark) !important;
      font-weight: 500;
      margin: 0.9rem 0 !important;
    }
    .gruppe-text-label {
      font-weight: 500;
      color: var(--accent) !important;
      margin-top: 1rem;
      margin-bottom: 0.4rem !important;
    }
    .gruppe-text ul {
      margin: 0 0 0.8rem 1.05rem;
      padding: 0;
    }
    .gruppe-text li { margin-bottom: 0.32rem; }

    .gruppe-flip-hint {
      color: var(--accent);
      opacity: 0.5;
      pointer-events: none;
    }
    .gruppe-face--front .gruppe-flip-hint {
      position: absolute;
      right: 0.9rem;
      bottom: 0.7rem;
      font-size: 1.15rem;
      line-height: 1;
    }
    .gruppe-face--back .gruppe-flip-hint {
      align-self: flex-end;
      margin-top: 0.6rem;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      opacity: 0.6;
    }

    /* Farbcodierung — Zuordnung wie am gedruckten Flyer.
       Klassenweit (nicht an .gruppe-card gebunden), damit Einzelangebots-
       Kacheln und Wochenplan-Einträge dieselben Akzente nutzen. */
    .g-sage     { --accent: var(--sage); }
    .g-blue     { --accent: var(--dusty-blue); }
    .g-darkblue { --accent: #4a6b8f; }
    .g-mustard  { --accent: var(--mustard); }
    .g-rose     { --accent: var(--dusty-rose); }
    .g-terra    { --accent: var(--terracotta); }
    .g-sage h3     { color: var(--sage-dark); }
    .g-blue h3     { color: #5a7d92; }
    .g-darkblue h3 { color: #4a6b8f; }
    .g-mustard h3  { color: #a87b28; }
    .g-rose h3     { color: #b07a64; }
    .g-terra h3    { color: var(--terracotta); }

    /* ── Stundenplan ── */
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--radius-lg);
    }
    .stundenplan {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
      background: var(--warm-white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      font-size: 0.85rem;
    }
    .stundenplan th,
    .stundenplan td {
      padding: 0.9rem 0.85rem;
      text-align: center;
      border-bottom: 1px solid var(--sand);
      vertical-align: middle;
    }
    .stundenplan thead th {
      background: var(--sage);
      color: white;
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.74rem;
    }
    .stundenplan tbody th[scope="row"] {
      background: var(--sand);
      color: var(--text-dark);
      font-weight: 500;
      white-space: nowrap;
      font-size: 0.78rem;
    }
    .sp-slot {
      display: inline-block;
      font-weight: 500;
      color: var(--text-dark);
      letter-spacing: 0.02em;
      line-height: 1.3;
    }
    .sp-slot small {
      display: block;
      font-weight: 300;
      color: var(--text-light);
      letter-spacing: 0;
    }
    .sp-empty { color: var(--sand-dark); }
    .stundenplan-note {
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-light);
      line-height: 1.7;
      margin-top: 1.5rem;
    }

    /* ── Einzelangebote ────────────────────────────────────────────
       Am Flyer ist das eine Kachel mit zwei Einträgen, keine zwei
       Kacheln. Sitzt als sechstes Feld im 2×3-Raster und teilt die
       offene Anmutung der Gruppenkacheln. */
    .einzel-card {
      --accent: var(--sage);
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      /* gleiche Innenabstände wie .gruppe-face, damit die Einzelangebots-
         Kachel in derselben Reihe auf einer Linie mit den Flip-Kacheln steht */
      padding: 1rem 1.4rem 1.4rem;
      background: var(--warm-white);
      border-bottom: 1px solid rgba(45, 58, 46, 0.12);
    }
    .einzel-titel {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 1.02rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--sage-dark);
      padding-left: calc(46px + 1.2rem);
    }
    .einzel-eintrag {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
    }
    .einzel-eintrag h4 {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.88rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-dark);
      line-height: 1.35;
      margin-bottom: 0.3rem;
    }
    .einzel-meta {
      font-size: 0.82rem;
      color: var(--text-mid);
      line-height: 1.6;
    }
    .einzel-link {
      align-self: flex-start;
      margin-top: auto;
      margin-left: calc(46px + 1.2rem);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--accent);
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
      padding-bottom: 1px;
    }
    .einzel-link:hover { border-bottom-color: var(--accent); }

    /* ── Wochenplan ─────────────────────────────────────────────────
       Farben und Aufbau 1:1 vom gedruckten Flyer abgenommen:
       eigene Kopffarbe je Tag, Blöcke als Volltonflächen mittig in der
       Spalte, Stundenlinien im Hintergrund.
       Ein gemeinsames Grid: Spalte 1 ist die Zeitachse, Spalten 2–5 sind
       Montag bis Donnerstag. .wp-achse und .wp-tag sind display:contents,
       damit ihre Kinder direkt im Grid sitzen und Achse und Einträge
       dieselben Zeilen teilen. Eine Zeile = 30 Minuten, Zeile 1 = 14:00. */
    .wochenplan-titel {
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      font-size: 0.92rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--sage-dark);
      margin-bottom: 1.75rem;
    }
    /* Herz wie im Hero von ueber-uns.html — gleiches SVG, nur ohne den
       dortigen Abstand nach oben und in Zeilenhöhe eingebettet. */
    .wochenplan-titel {
      display: flex;
      align-items: center;
      gap: 0.55rem;
    }
    .wochenplan-herz {
      margin-top: 0;
      width: clamp(15px, 1.3vw, 18px);
    }

    .wochenplan {
      display: grid;
      grid-template-columns: 4.5rem repeat(4, 1fr);
      grid-template-rows: auto repeat(15, 1.5rem);
      column-gap: 0.4rem;
    }
    .wp-achse, .wp-tag { display: contents; }

    .wp-achse span {
      grid-column: 1;
      grid-row: calc(var(--von) + 1);
      font-size: 0.74rem;
      color: var(--text-mid);
      text-align: right;
      padding-right: 0.7rem;
      /* Label an die Stundenlinie heben, nicht in die Zeile mittig */
      transform: translateY(-0.5rem);
    }

    .wp-tag-name {
      grid-column: var(--spalte);
      grid-row: 1;
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.74rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-align: center;
      color: var(--text-dark);
      padding: 0.7rem 0.4rem;
      border-radius: 0.55rem 0.55rem 0 0;
      margin-bottom: 0.4rem;
    }
    .wp-tag--mo .wp-tag-name { background: #cecbb9; }
    .wp-tag--di .wp-tag-name { background: #d9bdbc; }
    .wp-tag--mi .wp-tag-name { background: #bfc5ce; }
    .wp-tag--do .wp-tag-name { background: #d5987d; }

    /* Rasterhintergrund je Tagesspalte: Trennlinie links, Stundenlinien
       als Wiederholung über zwei Zeilen (2 × 1.5rem = 3rem). */
    .wp-raster {
      grid-column: var(--spalte);
      grid-row: 2 / -1;
      border-left: 1px solid rgba(45, 58, 46, 0.10);
      background: repeating-linear-gradient(
        to bottom,
        rgba(45, 58, 46, 0.07) 0 1px,
        transparent 1px 3rem
      );
    }
    .wp-tag--do .wp-raster { border-right: 1px solid rgba(45, 58, 46, 0.10); }

    .wp-eintrag {
      grid-column: var(--spalte);
      /* +1, weil Zeile 1 die Tagesüberschriften trägt */
      grid-row: calc(var(--von) + 1) / calc(var(--bis) + 1);
      position: relative;
      z-index: 1;
      margin: 0.2rem 0.55rem;
      padding: 0.5rem 0.6rem;
      border-radius: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.15rem;
      overflow: hidden;
    }
    .wp-name {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.76rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-dark);
      line-height: 1.3;
    }
    .wp-meta {
      font-size: 0.72rem;
      color: rgba(45, 58, 46, 0.72);
      line-height: 1.3;
    }
    .wp-name--zweit { margin-top: 1.1rem; }

    /* Blockfarben — Farbwerte aus dem Flyer entnommen */
    .wp-f-sage      { background: #e0dbcb; }
    .wp-f-blau      { background: #dadcdf; }
    .wp-f-blau-tief { background: #c7cdd5; }
    .wp-f-rose      { background: #ddc4c3; }
    .wp-f-mustard   { background: #edbe7e; }
    .wp-f-terra     { background: #d69779; }

    /* ── Anmeldung & Kosten ── */
    .anmeldung-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      max-width: 860px;
      margin: 0 auto;
    }
    .anmeldung-punkt {
      padding: 1.6rem;
      background: var(--warm-white);
      border: 1px solid rgba(45, 58, 46, 0.08);
      border-radius: var(--radius-lg);
    }
    .anmeldung-punkt h3 {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 1rem;
      letter-spacing: 0.04em;
      color: var(--sage-dark);
      margin-bottom: 0.6rem;
    }
    .anmeldung-punkt p {
      font-size: 0.88rem;
      line-height: 1.7;
      color: var(--text-mid);
    }
    .kassen-hinweis {
      max-width: 860px;
      margin: 1.5rem auto 0;
      padding: 1.5rem 1.75rem;
      background: color-mix(in srgb, var(--mustard) 10%, var(--warm-white));
      border-left: 3px solid var(--mustard);
      border-radius: var(--radius-md);
    }
    .kassen-hinweis p {
      font-size: 0.86rem;
      line-height: 1.75;
      color: var(--text-mid);
    }
    .kassen-link {
      display: inline-block;
      margin-top: 0.9rem;
      font-size: 0.82rem;
      font-weight: 500;
      color: #a87b28;
      border-bottom: 1px solid rgba(168, 123, 40, 0.4);
      padding-bottom: 1px;
    }
    .kassen-link:hover { border-bottom-color: #a87b28; }

    /* Flyer-Claim im Hero */
    .page-hero-claim {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.05rem, 1.8vw, 1.35rem);
      color: var(--sage-dark);
      margin-top: 0.4rem;
    }

    @media (max-width: 900px) {
      /* Wochenplan: Tage stapeln statt Zeitraster. display:contents wird
         aufgehoben, damit jeder Tag ein eigener Block mit Liste wird. */
      .wochenplan {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
      }
      .wp-achse { display: none; }
      .wp-tag {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .wp-tag-name { margin-bottom: 0; text-align: left; padding-left: 0.9rem; }
      .wp-eintrag { padding: 0.8rem 0.9rem; }
    }
    @media (max-width: 640px) {
      .gruppen-grid, .anmeldung-grid { grid-template-columns: 1fr; }
      .gruppen-section, #gruppen-intro { padding-left: 1.5rem; padding-right: 1.5rem; }
      .gruppe-card--flip { height: clamp(20rem, 74vw, 23rem); }
      /* Kleineres Icon, damit die Textspalte auf schmalen Displays nicht
         zusammengedrückt wird und lange Untertitel nicht anstoßen. */
      .gruppe-icon { width: 56px; height: 56px; }
      .gruppe-icon svg { width: 28px; height: 28px; }
      .gruppe-kopf { gap: 0.9rem; }
      .gruppe-meta { padding-left: calc(56px + 0.9rem); }
      .gruppe-hinweis { padding-left: calc(56px + 0.9rem); }
      .einzel-titel  { padding-left: calc(46px + 0.9rem); }
      .einzel-link   { margin-left: calc(46px + 0.9rem); }
      /* „Legasthenie- & Dyskalkulietraining" ist zu lang für 390px */
      .einzel-eintrag h4 { font-size: 0.8rem; letter-spacing: 0.04em; }
      /* auf schmalen Displays schmalere Ränder, damit die Textspalte bleibt */
      .gruppe-face, .einzel-card { padding-left: 1rem; padding-right: 1rem; }
      /* Unter 640px stapeln Datum und Titel, sonst bleibt für den Titel zu
         wenig übrig. Das Datum läuft dann einzeilig. */
      .vortraege-section { padding-left: 1.5rem; padding-right: 1.5rem; }
      .vortrag-zeile { grid-template-columns: 1fr; gap: 0.5rem; }
      .vortrag-datum time { flex-direction: row; align-items: baseline; gap: 0.5rem; }
      /* Auf schmalen Schirmen schmaler, damit die Blase nicht die halbe
         Hero-Fläche verdeckt. Position und Zipfel erbt sie von oben. */
      body.modus-erwachsen .hugo-bubble--termin { max-width: 70vw; font-size: 0.85rem; }
    }


    /* ═════════════════════════════════════════
       PREISE-SEITE
    ═════════════════════════════════════════ */
    .preise-section { padding: 4.5rem 4vw 6rem; }
    .preise-inner {
      max-width: 880px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .preis-card {
      background: var(--warm-white);
      border: 1px solid rgba(45, 58, 46, 0.08);
      border-top: 3px solid var(--sage);
      border-radius: var(--radius-lg);
      padding: 2rem 2rem 2.25rem;
    }
    .preis-card h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.6rem;
      color: var(--sage-dark);
      margin-bottom: 0.85rem;
    }
    .preis-betrag {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 1.5rem;
      color: var(--text-dark);
    }
    .preis-dauer {
      font-size: 0.95rem;
      font-weight: 300;
      color: var(--text-light);
      letter-spacing: 0.02em;
    }
    .preis-note {
      margin-top: 0.85rem;
      font-size: 0.9rem;
      color: var(--text-mid);
      line-height: 1.7;
    }
    /* Kassenhinweis läuft über beide Kachelspalten und steht direkt unter
       den Preisen. Mehrere Absätze brauchen hier — anders als auf
       gruppenangebote.html — einen Abstand untereinander. */
    .preise-inner .kassen-hinweis {
      grid-column: 1 / -1;
      margin-top: 0.5rem;
      text-align: left;
    }
    .preise-inner .kassen-hinweis p + p { margin-top: 0.9rem; }
    .preise-hinweis {
      grid-column: 1 / -1;
      text-align: center;
      font-size: 0.9rem;
      color: var(--text-light);
      line-height: 1.7;
      margin-top: 1rem;
    }
    .preise-section .leistung-cta-group {
      grid-column: 1 / -1;
      margin-top: 1.25rem;
    }
    @media (max-width: 700px) {
      .preise-inner { grid-template-columns: 1fr; }
    }


    /* ═════════════════════════════════════════
       ÜBER-UNS-SEITE
    ═════════════════════════════════════════ */

    /* ── Foto-Platzhalter (geteilt) ── */
    .photo-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: var(--sand);
      border: 1px dashed var(--sand-dark);
      border-radius: var(--radius-lg);
      color: var(--text-light);
      min-height: 220px;
      text-align: center;
    }
    .photo-placeholder-icon {
      font-size: 2.5rem;
      opacity: 0.45;
      line-height: 1;
    }
    .photo-placeholder-label {
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    /* ── Haltung ── */
    .haltung-section {
      background: var(--warm-white);
      padding: 6rem 4vw;
    }
    .haltung-inner {
      max-width: 1000px;
      margin: 0 auto;
    }
    .haltung-text {
      max-width: 680px;
      margin: 0 auto 3rem;
      text-align: center;
    }
    .haltung-text p {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.9;
      margin-bottom: 0.75rem;
    }
    .haltung-claim {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
      color: var(--sage) !important;
      margin-top: 1.25rem;
    }
    .werte-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    .werte-box {
      background: var(--sand);
      border-radius: var(--radius-lg);
      padding: 1.75rem 1.5rem;
      border-top: 3px solid var(--sage);
    }
    .werte-box h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.35rem;
      color: var(--sage-dark);
      margin-bottom: 0.6rem;
    }
    .werte-box p {
      font-size: 0.88rem;
      color: var(--text-mid);
      line-height: 1.7;
    }

    /* ── Team ── */
    .team-section {
      background: var(--sand);
      padding: 6rem 4vw;
    }
    .team-inner {
      max-width: 1000px;
      margin: 0 auto;
    }
    .team-intro {
      max-width: 720px;
      margin: 0 auto 3.5rem;
      text-align: center;
    }
    .team-intro p {
      font-size: 0.97rem;
      color: var(--text-mid);
      line-height: 1.85;
      margin-bottom: 0.8rem;
    }

    /* Leiterin-Karte: umdrehbar wie das Team-Grid, aber im breiten Prominenz-Layout.
       Perspektive/Cursor/Fokus kommen aus .team-card--flip. */
    .team-lead {
      margin-bottom: 3.5rem;
    }
    .team-lead .team-flip {
      transform-style: preserve-3d;
      transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .team-lead.is-flipped .team-flip { transform: rotateY(180deg); }
    .team-lead .team-face {
      border-radius: var(--radius-xl);
      padding: 2.5rem;
      box-shadow: 0 6px 40px rgba(45, 58, 46, 0.06);
    }
    .team-lead .team-face--front {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 3.5rem;
      align-items: center;
    }
    .team-lead .team-face--back { text-align: left; }
    .team-lead .team-face--back h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.4rem, 2.2vw, 1.85rem);
      color: var(--text-dark);
      margin: 0 0 1rem;
      line-height: 1.2;
    }
    .team-lead .team-bio p { font-size: 0.9rem; line-height: 1.7; }
    .team-lead .team-bio h4 {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
      color: var(--sage);
      margin: 1.3rem 0 0.5rem;
    }
    .team-lead-photo { min-height: 320px; }
    .team-lead-photo img {
      width: 100%;
      height: 360px;
      object-fit: cover;
      object-position: center 30%;
      border-radius: var(--radius-lg);
      display: block;
    }
    .team-role {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--terracotta);
      font-weight: 500;
    }
    .team-lead-info h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      color: var(--text-dark);
      margin: 0.5rem 0;
      line-height: 1.2;
    }
    .team-fn {
      font-size: 0.92rem;
      color: var(--text-mid);
      line-height: 1.6;
    }

    .team-grid-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.5rem;
      color: var(--text-dark);
      text-align: center;
      margin-bottom: 1.5rem;
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    /* Team-Karte als Flip-Karte: Vorderseite Foto/Funktion, Rückseite Vorstellungstext */
    .team-card {
      text-align: center;
      border-radius: var(--radius-lg);
    }
    .team-card--flip {
      perspective: 1400px;
      cursor: pointer;
      outline: none;
    }
    .team-card--flip:focus-visible {
      outline: 2px solid var(--sage);
      outline-offset: 3px;
    }
    .team-flip {
      position: relative;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .team-card.is-flipped .team-flip { transform: rotateY(180deg); }
    .team-face {
      background: var(--warm-white);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      box-sizing: border-box;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .team-face--front { position: relative; height: 100%; }
    .team-face--back {
      position: absolute;
      inset: 0;
      transform: rotateY(180deg);
      display: flex;
      flex-direction: column;
    }
    .team-face--back h4 { margin-bottom: 0.75rem; }
    .team-bio {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      text-align: left;
    }
    .team-bio p {
      font-size: 0.82rem;
      line-height: 1.65;
      color: var(--text-mid);
      margin-bottom: 0.7rem;
    }
    .team-bio p:last-child { margin-bottom: 0; }
    .team-bio-soon { color: var(--text-light); font-style: italic; }
    .team-flip-hint {
      color: var(--sage);
      opacity: 0.5;
      pointer-events: none;
    }
    .team-face--front .team-flip-hint {
      position: absolute;
      right: 0.9rem;
      bottom: 0.7rem;
      font-size: 1.15rem;
      line-height: 1;
    }
    .team-face--back .team-flip-hint {
      align-self: flex-end;
      margin-top: 0.6rem;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      opacity: 0.6;
    }

    .team-card .photo-placeholder { min-height: 200px; aspect-ratio: 4 / 5; margin-bottom: 1.25rem; }
    .team-card .team-photo {
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: center top;
      border-radius: var(--radius-lg);
      margin-bottom: 1.25rem;
      display: block;
    }
    .team-card h4 {
      font-family: 'Jost', sans-serif;
      font-weight: 500;
      font-size: 1rem;
      color: var(--text-dark);
      margin-bottom: 0.35rem;
    }
    .team-card--placeholder h4 { color: var(--text-light); }

    /* Reduced Motion: kein 3D-Dreh, sondern ruhiges Überblenden (ADHS-Richtlinie) */
    @media (prefers-reduced-motion: reduce) {
      .team-flip { transition: none; }
      .team-card.is-flipped .team-flip { transform: none; }
      .team-face {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        transition: opacity 0.3s ease;
      }
      .team-face--back { transform: none; opacity: 0; }
      .team-card.is-flipped .team-face--front { opacity: 0; }
      .team-card.is-flipped .team-face--back { opacity: 1; }
      .team-lead.is-flipped .team-flip { transform: none; }
      .team-lead.is-flipped .team-face--front { opacity: 0; }
      .team-lead.is-flipped .team-face--back { opacity: 1; }

      /* Gruppenkacheln auf gruppenangebote.html — gleiches Verhalten */
      .gruppe-flip { transition: none; }
      .gruppe-card.is-flipped .gruppe-flip { transform: none; }
      .gruppe-face {
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        transition: opacity 0.3s ease;
      }
      .gruppe-face--back { transform: none; opacity: 0; }
      .gruppe-card.is-flipped .gruppe-face--front { opacity: 0; }
      .gruppe-card.is-flipped .gruppe-face--back { opacity: 1; }
    }

    .team-note {
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-light);
      line-height: 1.7;
      margin-top: 1.75rem;
    }

    /* ── Bewerbungs-Hinweis unter dem Team ── */
    .team-join {
      max-width: 620px;
      margin: 2.75rem auto 0;
      padding: 2.25rem 2rem;
      text-align: center;
      background: rgba(107, 143, 113, 0.07);
      border: 1px solid rgba(107, 143, 113, 0.18);
      border-radius: var(--radius-lg);
    }
    .team-join-icon {
      display: block;
      font-size: 1.6rem;
      margin-bottom: 0.6rem;
    }
    .team-join h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.4rem;
      color: var(--sage-dark);
      margin-bottom: 0.6rem;
    }
    .team-join p {
      font-size: 0.95rem;
      color: var(--text-mid);
      line-height: 1.8;
      margin-bottom: 1.4rem;
    }

    .team-verbindet {
      max-width: 640px;
      margin: 3.5rem auto 0;
      text-align: center;
    }
    .team-verbindet h3 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: 1.5rem;
      color: var(--sage-dark);
      margin-bottom: 1.25rem;
    }
    .team-verbindet .check-list {
      display: inline-block;
      text-align: left;
      margin: 0 auto 1.25rem;
    }
    .team-verbindet p {
      font-size: 0.95rem;
      color: var(--text-mid);
      line-height: 1.8;
    }
    .team-verbindet em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--sage);
    }

    /* ── Was uns verbindet ── */
    .verbindet-section {
      background: var(--warm-white);
      padding: 6rem 4vw;
    }
    .verbindet-inner {
      max-width: 1100px;
      margin: 0 auto;
    }
    .verbindet-inner .section-header { margin-bottom: 2.5rem; }
    .verbindet-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    .verbindet-card {
      background: var(--sand);
      border-radius: var(--radius-lg);
      padding: 2rem 1.5rem;
      text-align: center;
    }
    .verbindet-icon {
      font-size: 2rem;
      display: block;
      margin-bottom: 0.9rem;
    }
    .verbindet-card h3 {
      font-size: 1rem;
      font-weight: 500;
      color: var(--text-dark);
      margin-bottom: 0.6rem;
      line-height: 1.3;
    }
    .verbindet-card p {
      font-size: 0.88rem;
      color: var(--text-mid);
      line-height: 1.7;
    }

    /* ── Vision ── */
    .vision-section {
      background: var(--sage);
      padding: 7rem 4vw;
      text-align: center;
      color: white;
    }
    .vision-inner {
      max-width: 720px;
      margin: 0 auto;
    }
    .vision-inner .tag { color: rgba(255, 255, 255, 0.85); }
    .vision-inner h2 {
      color: white;
      margin: 0.5rem 0 1.75rem;
      line-height: 1.2;
    }
    .vision-inner p {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.9;
      margin-bottom: 1rem;
    }
    .vision-claim {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important;
      color: white !important;
    }
    .vision-tags {
      font-size: 0.85rem !important;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.8) !important;
    }

    @media (max-width: 900px) {
      .werte-grid    { grid-template-columns: repeat(2, 1fr); }
      .verbindet-grid { grid-template-columns: repeat(2, 1fr); }
      .team-grid     { grid-template-columns: repeat(2, 1fr); }
      .team-lead .team-face--front {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.75rem;
      }
      .team-lead-photo { min-height: 260px; }
      .team-lead-photo img { height: 300px; }
    }
    @media (max-width: 640px) {
      .werte-grid, .verbindet-grid, .team-grid { grid-template-columns: 1fr; }
      .haltung-section, .team-section, .verbindet-section, .vision-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }


    /* ═════════════════════════════════════════
       GLOBALER ANIMIERTER HUGO (SVG)
       Bewegung (Wandern/Flucht/Hüpfen) bleibt in script.js auf .hugo-wrap;
       hier nur die Teil-Animationen, die sich draufsetzen.
    ═════════════════════════════════════════ */
    .hugo-wrap #hugo-root,
    .hugo-wrap #hugo-koerper,
    .hugo-wrap #hugo-augen,
    .hugo-wrap #hugo-fluegel-links,
    .hugo-wrap #hugo-fluegel-rechts,
    .hugo-wrap #hugo-antenne-links,
    .hugo-wrap #hugo-antenne-rechts { transform-box: fill-box; }
    .hugo-wrap #hugo-fluegel-rechts { transform-origin: 0% 53%; }
    .hugo-wrap #hugo-fluegel-links  { transform-origin: 100% 53%; }
    .hugo-wrap #hugo-antenne-links,
    .hugo-wrap #hugo-antenne-rechts { transform-origin: 50% 100%; }
    .hugo-wrap #hugo-augen          { transform-origin: 50% 50%; }
    .hugo-wrap #hugo-koerper        { transform-origin: 50% 100%; }

    /* Kind-Modus: voll lebendig (zusätzlich zum Schweben/Wandern) */
    body.modus-kind .hugo-wrap #hugo-fluegel-rechts { animation: hgFlapR .5s ease-in-out infinite; }
    body.modus-kind .hugo-wrap #hugo-fluegel-links  { animation: hgFlapL .5s ease-in-out infinite; }
    body.modus-kind .hugo-wrap #hugo-augen          { animation: hgBlink 4.2s infinite; }
    body.modus-kind .hugo-wrap #hugo-antenne-links  { animation: hgSwayL 3s ease-in-out infinite; }
    body.modus-kind .hugo-wrap #hugo-antenne-rechts { animation: hgSwayR 3.2s ease-in-out infinite; }

    /* Freuen-Burst des Hero-Hugo bei jeder gelösten Aufgabe (von fuer-wen.js via .freut
       ausgelöst, ~1,9 s, danach zurück ins Idle). Hüpfen + deutlich schnellerer Flügel-
       schlag/Antennen — überlagert kurz das Idle. Höhere Spezifität (body.modus-kind …
       .freut) ist nötig, damit es die Idle-Regeln oben schlägt. Der Wrapper-Flug
       (left/top per rAF in script.js) bleibt davon unberührt. */
    body.modus-kind .hugo-wrap.freut #hugo-root           { animation: hgHop 0.55s ease-in-out infinite; }
    body.modus-kind .hugo-wrap.freut #hugo-fluegel-rechts { animation: hgFlapRFreut 0.16s ease-in-out infinite; }
    body.modus-kind .hugo-wrap.freut #hugo-fluegel-links  { animation: hgFlapLFreut 0.16s ease-in-out infinite; }
    body.modus-kind .hugo-wrap.freut #hugo-antenne-links  { animation: hgSwayLFreut 0.3s ease-in-out infinite; }
    body.modus-kind .hugo-wrap.freut #hugo-antenne-rechts { animation: hgSwayRFreut 0.32s ease-in-out infinite; }

    /* Erwachsenen-Modus: sanft lebendig — sitzt, atmet, blinzelt, langsamer Flügelschlag */
    body.modus-erwachsen .hugo-wrap #hugo-koerper        { animation: hgBreathe 4.5s ease-in-out infinite; }
    body.modus-erwachsen .hugo-wrap #hugo-fluegel-rechts { animation: hgFlapR 1.4s ease-in-out infinite; }
    body.modus-erwachsen .hugo-wrap #hugo-fluegel-links  { animation: hgFlapL 1.4s ease-in-out infinite; }
    body.modus-erwachsen .hugo-wrap #hugo-augen          { animation: hgBlink 5.5s infinite; }

    @keyframes hgFlapR  { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(8deg)} }
    @keyframes hgFlapL  { 0%,100%{transform:rotate(5deg)}  50%{transform:rotate(-8deg)} }
    @keyframes hgSwayL  { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
    @keyframes hgSwayR  { 0%,100%{transform:rotate(4deg)}  50%{transform:rotate(-4deg)} }
    @keyframes hgBlink  { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }
    @keyframes hgBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
    @keyframes hgHop    { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-22%)} 55%{transform:translateY(0)} }
    /* Freuen-Flügel/Antennen — eigene Namen (frischer Neustart, kein Konflikt mit Idle), wie im Preview */
    @keyframes hgFlapRFreut { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(8deg)} }
    @keyframes hgFlapLFreut { 0%,100%{transform:rotate(5deg)}  50%{transform:rotate(-8deg)} }
    @keyframes hgSwayLFreut { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
    @keyframes hgSwayRFreut { 0%,100%{transform:rotate(4deg)}  50%{transform:rotate(-4deg)} }

    /* ═════════════════════════════════════════
       HUGOS ENTDECKUNGSREISE  (#kinder auf fuer-wen.html)
       Progressive Enhancement: Text bleibt immer im DOM.
       Sicht-Zustände via body.modus-* und data-locked.
    ═════════════════════════════════════════ */

    /* ── Modus-Sichtbarkeit der Reise-Bausteine ── */
    .reise-steuer { display: none; }
    body.modus-kind .reise-steuer { display: block; }
    body.modus-kind .reise-teaser { display: none; }

    /* Stationstitel (die Frage) — sitzt über der Aufgabe */
    .station-titel {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.3rem, 1.9vw, 1.6rem);
      color: var(--mustard, #C39E4A);
      margin: 0 0 1.25rem;
      text-align: center;
    }

    /* Erwachsenen-Modus: Titel + Stationstexte eingeklappt, bis „Lieber nur lesen" */
    body.modus-erwachsen .station-buehne { display: none; }
    body.modus-erwachsen .station-titel { display: none; }
    body.modus-erwachsen .reise-station .station-text { display: none; }
    body.modus-erwachsen.reise-lesen .station-titel { display: block; }
    body.modus-erwachsen.reise-lesen .reise-station .station-text { display: block; }

    /* Kind-Modus:
       - Titel erscheint, sobald die Station erreicht (entsperrt) ist
       - Text erst, wenn DAS Rätsel dieser Station gelöst ist ([data-geloest])
       - gesperrte (künftige) Stationen: Titel + Text verdeckt, Aufgabe gedimmt */
    body.modus-kind .station-titel { display: none; }
    body.modus-kind .reise-station:not([data-locked]) .station-titel { display: block; }
    body.modus-kind .reise-station .station-text { display: none; }
    body.modus-kind .reise-station[data-geloest] .station-text { display: block; }
    /* Gesperrte (künftige) Stationen: gedimmt UND nicht anklickbar — verhindert,
       dass man Aufgaben außer der Reihe löst (sonst bliebe eine Station gesperrt
       und ihre Überschrift unsichtbar). */
    body.modus-kind .reise-station[data-locked] .station-buehne { opacity: 0.45; pointer-events: none; }
    body.modus-kind .reise-station {
      border-radius: var(--radius-lg, 1.25rem);
      padding: 1.5rem clamp(1rem, 3vw, 2rem);
      margin-bottom: 1.25rem;
      transition: background 0.4s ease, box-shadow 0.4s ease;
    }
    /* Aktuell zu lösende Aufgabe — zartes Apricot-Pastell, hebt die Kachel klar hervor */
    body.modus-kind .reise-station.aktiv {
      background: #f7ddd1;
      box-shadow: 0 8px 30px rgba(212, 149, 139, 0.18);
    }
    /* Gelöste Aufgabe — wechselt auf ruhiges Pastellgrün („erledigt") */
    body.modus-kind .reise-station[data-geloest] {
      background: #e3ede0;
      box-shadow: 0 4px 18px rgba(107, 143, 113, 0.12);
    }

    /* Text-Reveal beim Lösen; Titel-Reveal beim Erreichen der Station */
    body.modus-kind .reise-station[data-geloest] .station-text,
    body.modus-kind .reise-station:not([data-locked]) .station-titel {
      animation: reiseReveal 0.5s ease both;
    }
    @keyframes reiseReveal {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Reise-Bühne (Hugo-Begleiter + Sprechblase), klebt beim Scrollen ── */
    .reise-buehne {
      position: sticky;
      top: 5.5rem;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 1rem;
      max-width: 520px;
      margin: 0 auto 1.5rem;
      padding: 0.75rem 1rem;
      background: rgba(250, 248, 243, 0.92);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(107, 143, 113, 0.25);
      border-radius: 999px;
    }
    .reise-hugo-slot {
      flex: 0 0 auto;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .reise-hugo-slot svg { width: 100%; height: 100%; overflow: visible; }
    .reise-hugo-slot:empty::before {
      content: "?";
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      color: var(--sage-green, #6B8F71);
      opacity: 0.5;
    }
    .reise-bubble {
      margin: 0;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1rem, 2.4vw, 1.2rem);
      color: var(--sage-green, #6B8F71);
      line-height: 1.4;
      transition: opacity 0.3s ease;
    }

    /* ── Honigwaben-Spur ── */
    .wabenspur {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      padding: 0;
      margin: 0 auto 1.25rem;
      max-width: 420px;
    }
    .wabe {
      width: 34px;
      height: 38px;
      background: rgba(195, 158, 74, 0.18);
      clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
      transition: background 0.45s ease, transform 0.45s ease;
    }
    .wabe.gefuellt {
      background: var(--mustard, #C39E4A);
      transform: scale(1.08);
    }

    /* ── „Alles anzeigen" / „Lieber nur lesen" ── */
    .reise-skip {
      display: block;
      margin: 0 auto 2rem;
      background: none;
      border: none;
      font-size: 0.85rem;
      color: var(--text-mid, #6b6b6b);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .reise-skip:hover,
    .reise-skip:focus-visible { color: var(--sage-green, #6B8F71); }
    .reise-lesen-toggle { margin-top: 1rem; }

    /* ── Honig-Orden (Finale) ── */
    .reise-orden {
      text-align: center;
      margin: 1rem auto 2rem;
      max-width: 460px;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reise-orden.gezeigt { opacity: 1; transform: scale(1); }
    .reise-orden .orden-medaille {
      width: 96px; height: 108px; margin: 0 auto 0.75rem;
      background: radial-gradient(circle at 50% 40%, #f3d27a, var(--mustard, #C39E4A));
      clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem;
    }
    .reise-orden p {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--sage-green, #6B8F71);
      font-size: 1.15rem;
    }

    /* ── Gemeinsame Puzzle-Widget-Basis ── */
    .station-buehne:empty { display: none; }
    body.modus-kind .reise-station[data-locked] .station-buehne:not(:empty) { display: block; }
    .puzzle {
      margin: 0 0 1.25rem;
      padding: 1.25rem;
      background: rgba(255,255,255,0.6);
      border: 1px dashed rgba(107, 143, 113, 0.4);
      border-radius: var(--radius-md, 1rem);
      text-align: center;
    }
    .puzzle-ziel {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0.4rem;
      min-width: 44px; min-height: 44px;
      margin: 0.3rem;
      padding: 0.5rem 0.9rem;
      border: 1px solid rgba(107, 143, 113, 0.4);
      border-radius: 999px;
      background: var(--warm-white, #FAF8F3);
      color: var(--text-dark, #2d3a2e);
      font-size: 0.95rem;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease, opacity 0.3s ease;
    }
    .puzzle-ziel:focus-visible {
      outline: 2px solid var(--sage-green, #6B8F71);
      outline-offset: 2px;
    }
    .puzzle-ziel.getroffen {
      background: var(--mustard, #C39E4A);
      color: #fff;
      transform: scale(1.05);
    }
    .puzzle-ziel.weg { opacity: 0; pointer-events: none; transform: scale(0.6); }
    .puzzle-shake { animation: reiseShake 0.4s ease; }
    @keyframes reiseShake {
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
    }

    /* ── Reduced Motion: keine Bewegungs-Mechaniken/Jubel ── */
    @media (prefers-reduced-motion: reduce) {
      .reise-buehne { position: static; }
      .reise-station .station-text,
      .reise-station .station-titel { animation: none !important; }
      .puzzle-shake { animation: none; }
      .wabe { transition: background 0.2s ease; }
      .reise-orden { transform: none; transition: opacity 0.4s ease; }
      .reise-orden.gezeigt { transform: none; }
      .puzzle-ziel { transition: background 0.2s ease, opacity 0.2s ease; }
      .puzzle-ziel.getroffen, .puzzle-ziel.weg { transform: none; }
      .wabe.gefuellt { transform: none; }
    }

    /* Station 3 — springende Gedanken */
    .puzzle-fangen { position: relative; min-height: 160px; }
    .gedanke {
      position: absolute;
      width: 56px; height: 56px;
      border-radius: 50%;
      border: none;
      background: radial-gradient(circle at 40% 35%, #fff, var(--sage-green, #6B8F71));
      color: #fff; font-size: 1.4rem; cursor: pointer;
      animation: gedankeSpringen 2.4s ease-in-out infinite;
    }
    .gedanke:nth-child(2) { animation-duration: 3s;   animation-delay: -0.6s; }
    .gedanke:nth-child(3) { animation-duration: 2.7s; animation-delay: -1.2s; }
    .gedanke.gefangen { animation: none; opacity: 0; transform: scale(0.4); pointer-events: none; }
    @keyframes gedankeSpringen {
      0%   { top: 60%; left: 10%; }
      25%  { top: 10%; left: 70%; }
      50%  { top: 65%; left: 80%; }
      75%  { top: 15%; left: 30%; }
      100% { top: 60%; left: 10%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .gedanke { animation: none !important; position: relative; display: inline-block; margin: 0.4rem; }
      .puzzle-fangen { min-height: auto; }
    }

    /* Station 4 — Gefühls-Regler */
    .puzzle-regler label { display: block; margin-bottom: 0.75rem; color: var(--text-mid, #6b6b6b); }
    .puzzle-regler input[type="range"] { width: min(280px, 80%); accent-color: var(--sage-green, #6B8F71); }
    .regler-anzeige { margin-top: 0.6rem; font-size: 1.6rem; }

    /* Station 5 — Halten */
    .halte-btn {
      position: relative; overflow: hidden;
      padding: 1rem 1.5rem; min-width: 200px;
      border: 1px solid rgba(107,143,113,0.4); border-radius: 999px;
      background: var(--warm-white, #FAF8F3); color: var(--text-dark, #2d3a2e);
      font-size: 1rem; cursor: pointer;
    }
    .halte-btn.zappelt { animation: halteZappel 0.25s ease-in-out infinite; }
    @keyframes halteZappel { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
    .halte-fill {
      position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
      background: rgba(195,158,74,0.35); transition: width 0.1s linear; z-index: 0;
    }
    .halte-btn span { position: relative; z-index: 1; }
    @media (prefers-reduced-motion: reduce) { .halte-btn.zappelt { animation: none; } }

    /* Station 6 — „zu" entfernen */
    .zu-chip {
      display: inline-flex; align-items: center; gap: 0.3rem;
      margin: 0.3rem; padding: 0.4rem 0.8rem;
      border: 1px solid rgba(107,143,113,0.4); border-radius: 999px;
      background: var(--warm-white, #FAF8F3); color: var(--text-dark, #2d3a2e);
    }
    .zu-weg {
      border: none; background: rgba(195,158,74,0.25); color: var(--mustard, #C39E4A);
      border-radius: 999px; padding: 0.1rem 0.5rem; cursor: pointer; font-weight: 600;
      min-width: 32px; min-height: 32px;
    }
    .zu-weg:focus-visible { outline: 2px solid var(--sage-green,#6B8F71); outline-offset: 2px; }
    .zu-chip.erledigt { background: #eef3ec; }

    /* Station 7 — Helfer einsammeln */
    .puzzle-rucksack .helfer-reihe { margin-bottom: 1rem; }
    .rucksack {
      margin: 0 auto; padding: 0.75rem 1rem; max-width: 320px;
      border: 2px dashed var(--mustard, #C39E4A); border-radius: var(--radius-md, 1rem);
      min-height: 60px; color: var(--text-mid, #6b6b6b);
    }
    .rucksack .helfer-drin { background: var(--mustard, #C39E4A); color: #fff; border-color: transparent; }
    .helfer.weg { opacity: 0; transform: scale(0.5); pointer-events: none; }

    /* ── Mobile ── */
    @media (max-width: 640px) {
      .reise-buehne { top: 4.5rem; }
      .wabe { width: 28px; height: 32px; }
    }

/* ══════════════════════════════════════════════════════════════════════
   HUGOS WELT — Kinder-OnePager (hugos-welt.html)
   ══════════════════════════════════════════════════════════════════════ */

#hugos-welt-main {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(8rem, 16vh, 11rem) clamp(1.25rem, 4vw, 2.5rem) clamp(8rem, 22vh, 16rem);
}

/* Durchgehende Scroll-Seite: großzügiger Abstand zwischen den Stationen,
   damit beim Scrollen ruhig „eine Sache pro Screen" wirkt. */
.kw-section {
  margin: clamp(3rem, 9vh, 6rem) 0;
}
.kw-block + .kw-block {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}

/* ── Hero-Begrüßung ── */
.kw-hero {
  text-align: center;
  min-height: 62vh;                 /* Hero füllt beim Einstieg ~einen Screen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: clamp(3rem, 9vh, 6rem);
}
.kw-hero-hallo {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  color: var(--sage-dark, #4a6b50);
  margin: 0 0 1.25rem;
}
.kw-hero-text {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.9;
  color: var(--text-mid, #4a5c4b);
  margin: 0;
}
.kw-hero-text { max-width: 40ch; margin-left: auto; margin-right: auto; }
.kw-hero-text strong { color: var(--terracotta, #C4694B); }

.kw-section-titel {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  color: var(--sage-dark, #4a6b50);
  text-align: center;
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
}

.kw-textkarte {
  background: rgba(250, 248, 243, 0.82); /* leicht transparent — Szene scheint dezent durch */
  border: 2px solid var(--sand-dark, #ddd6c8);
  border-radius: 24px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(1.05rem, 2.3vw, 1.25rem);
  line-height: 1.85;
  color: var(--text-mid, #4a5c4b);
}
.kw-textkarte strong { color: var(--terracotta, #C4694B); }
.kw-frage {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--sage-dark, #4a6b50);
  margin-top: 0;
}

/* ── Tap-/Flip-Karten (Info-Bereich) ── */
.kw-step-lead, .kw-step-uebergang {
  text-align: center;
  color: var(--text-mid, #4a5c4b);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}
.kw-step-uebergang { margin-top: 1.5rem; font-style: italic; }
.kw-cards {
  display: grid;
  gap: clamp(0.9rem, 2.5vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .kw-cards { grid-template-columns: 1fr 1fr; } }
/* Einzelne Karte über die volle Breite ziehen (statt allein in einer Spalte).
   Mobil ist das Grid einspaltig → wirkt wie jede andere Karte. */
@media (min-width: 600px) { .kw-card--breit { grid-column: 1 / -1; } }

.kw-card {
  --kw-accent: var(--sage, #6B8F71);
  display: block;
  width: 100%;
  min-height: clamp(190px, 46vw, 210px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 900px;
  font: inherit;
  text-align: left;
}
.kw-card--acc-sage       { --kw-accent: var(--sage, #6B8F71); }
.kw-card--acc-blau       { --kw-accent: var(--dusty-blue, #7A9BAF); }
.kw-card--acc-terracotta { --kw-accent: var(--terracotta, #C4694B); }
.kw-card--acc-mustard    { --kw-accent: var(--mustard, #C8973A); }
.kw-card--acc-rose       { --kw-accent: var(--dusty-rose, #C4917A); }

.kw-card-inner {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(190px, 46vw, 210px);
  transition: transform 0.55s ease;
  transform-style: preserve-3d;
}
.kw-card.flipped .kw-card-inner { transform: rotateY(180deg); }

.kw-card-front, .kw-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow-y: auto;
}
.kw-card-front {
  background: var(--kw-accent);
  color: #fff;
  text-align: center;
}
.kw-card-emoji { font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; }
.kw-card-frage {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  font-weight: 500;
}
.kw-card-back {
  background: var(--warm-white, #FAF8F3);
  border: 2px solid var(--kw-accent);
  color: var(--text-mid, #4a5c4b);
  transform: rotateY(180deg);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.7;
  text-align: center;
}
.kw-card:focus-visible { outline: 3px solid var(--sage-dark, #4a6b50); outline-offset: 3px; border-radius: 22px; }

/* Reduced Motion: keine Drehung — Vorder-/Rückseite überblenden */
@media (prefers-reduced-motion: reduce) {
  .kw-card-inner { transition: none; }
  .kw-card.flipped .kw-card-inner { transform: none; }
  .kw-card-front, .kw-card-back {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none;
    transition: opacity 0.2s ease;
  }
  .kw-card-back { opacity: 0; }
  .kw-card.flipped .kw-card-front { opacity: 0; }
  .kw-card.flipped .kw-card-back  { opacity: 1; }
}

/* ── Memory-Slider (mehrere Spiele, seitwärts wischen / Pfeile) ── */
.kw-memory-viewport { position: relative; }
.kw-memory-pfeil {
  position: absolute;
  top: 42%;                           /* etwa auf Höhe des Spielfelds */
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.3rem, 8vw, 2.9rem);
  height: clamp(2.3rem, 8vw, 2.9rem);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sage, #6B8F71);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(45, 58, 46, 0.6);
  transition: background 0.18s ease, opacity 0.18s ease;
}
.kw-memory-pfeil--prev { left: -0.5rem; }
.kw-memory-pfeil--next { right: -0.5rem; }
.kw-memory-pfeil:hover:not(:disabled) { background: var(--sage-dark, #4a6b50); }
.kw-memory-pfeil:disabled { opacity: 0; pointer-events: none; }
.kw-memory-pfeil:focus-visible { outline: 3px solid var(--sage-dark, #4a6b50); outline-offset: 3px; }

.kw-memory-slider {
  position: relative;
  display: flex;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  padding-bottom: 0.5rem;
}
.kw-memory-slider::-webkit-scrollbar { display: none; }  /* WebKit */
.kw-memory-slider > .kw-memory {
  flex: 0 0 100%;                     /* volle Breite — immer genau ein Spiel im Blick, kein Peek */
  scroll-snap-align: start;
  margin-top: 0;                      /* Slide-Abstand kommt vom Slider, nicht von .kw-memory */
}
.kw-memory-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1rem, 3vh, 1.5rem);
}
.kw-memory-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sand-dark, #ddd6c8);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.kw-memory-dot.aktiv { background: var(--sage, #6B8F71); transform: scale(1.25); }
.kw-memory-dot:focus-visible { outline: 3px solid var(--sage-dark, #4a6b50); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kw-memory-slider { scroll-behavior: auto; }
  .kw-memory-dot { transition: none; }
  .kw-memory-pfeil { transition: none; }
}

/* ── Memory-Spiel (Spiel-/Rätsel-Ecke) ── */
.kw-memory { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.kw-memory-frage {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--sage-dark, #4a6b50);
  text-align: center;
  margin: 0 0 0.5rem;
}
.kw-memory-lead {
  text-align: center;
  color: var(--text-mid, #4a5c4b);
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
}
.kw-memory-board {
  display: grid;
  gap: clamp(0.6rem, 2vw, 1rem);
  grid-template-columns: repeat(2, 1fr);   /* mobil 2×4 */
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .kw-memory-board { grid-template-columns: repeat(4, 1fr); } /* 4×2 */
}
.kw-memory-card {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 900px;
  font: inherit;
}
.kw-memory-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}
.kw-memory-card.aufgedeckt .kw-memory-card-inner,
.kw-memory-card.gefunden   .kw-memory-card-inner { transform: rotateY(180deg); }
.kw-memory-card-cover,
.kw-memory-card-symbol {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: clamp(1.8rem, 8vw, 2.8rem);
}
.kw-memory-card-cover {
  background: var(--sage, #6B8F71);
  color: #fff;
}
.kw-memory-card-symbol {
  background: var(--warm-white, #FAF8F3);
  border: 2px solid var(--sand-dark, #ddd6c8);
  transform: rotateY(180deg);
}
.kw-memory-card.gefunden .kw-memory-card-symbol {
  border-color: var(--sage, #6B8F71);
  box-shadow: 0 0 0 3px rgba(107, 143, 113, 0.25);
}
.kw-memory-card.gefunden { cursor: default; }
.kw-memory-card:focus-visible {
  outline: 3px solid var(--sage-dark, #4a6b50);
  outline-offset: 3px;
  border-radius: 18px;
}

.kw-memory-antwort {
  max-width: 640px;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
  background: rgba(250, 248, 243, 0.82);
  border: 2px solid var(--sand-dark, #ddd6c8);
  border-radius: 22px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.kw-memory-antwort-titel {
  font-family: "Cormorant Garamond", serif;
  color: var(--sage-dark, #4a6b50);
  text-align: center;
  margin: 0 0 0.75rem;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
}
.kw-memory-antwort-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  color: var(--text-mid, #4a5c4b);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.6;
}
.kw-antwort-neu { animation: kwAntwortRein 0.4s ease; }
@keyframes kwAntwortRein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.kw-memory-nochmal { display: block; margin: clamp(1.25rem, 3vh, 2rem) auto 0; }
.kw-memory-nochmal[hidden] { display: none; }

/* Reduced Motion: keine Drehung — Cover/Symbol überblenden */
@media (prefers-reduced-motion: reduce) {
  .kw-memory-card-inner { transition: none; }
  .kw-memory-card.aufgedeckt .kw-memory-card-inner,
  .kw-memory-card.gefunden   .kw-memory-card-inner { transform: none; }
  .kw-memory-card-cover,
  .kw-memory-card-symbol {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none;
    transition: opacity 0.2s ease;
  }
  .kw-memory-card-symbol { opacity: 0; }
  .kw-memory-card.aufgedeckt .kw-memory-card-cover,
  .kw-memory-card.gefunden   .kw-memory-card-cover { opacity: 0; }
  .kw-memory-card.aufgedeckt .kw-memory-card-symbol,
  .kw-memory-card.gefunden   .kw-memory-card-symbol { opacity: 1; }
  .kw-antwort-neu { animation: none; }
}

/* ── Chips (kompakte Tap-Karten, Schritt „Was wir für dich tun") ── */
.kw-chips {
  display: grid;
  gap: clamp(0.9rem, 2.5vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .kw-chips { grid-template-columns: 1fr 1fr; } }
.kw-chip, .kw-chip .kw-card-inner { min-height: 140px; }
.kw-chip .kw-card-front .kw-card-frage { font-size: clamp(1.1rem, 3vw, 1.4rem); }
.kw-chip .kw-card-front em { font-size: 0.85em; opacity: 0.9; font-style: italic; }

/* ── Gruppen-Karten (Schritt „Gruppenangebote") ── */
@media (min-width: 900px) { .kw-cards--drei { grid-template-columns: 1fr 1fr 1fr; } }
.kw-card-alter {
  display: block;
  margin-top: 0.25rem;
  font-family: "Jost", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* ── Eltern-Brücke (Abschluss-Sektion am Ende der Scroll-Seite) ── */
.kw-abschluss {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  text-align: center;
  background: #eef3ec;
  border-radius: 26px;
  padding: clamp(2rem, 6vw, 3.25rem);
}
.kw-abschluss-text {
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  line-height: 1.9;
  color: var(--text-dark, #2d3a2e);
  margin: 0 0 1.75rem;
}

/* ── Kinderwelt-Hintergrund (nur hugos-welt.html) ──
   Sanfter Himmel-Verlauf auf dem Body + fixierte Hügel-/Baum-/Vogel-Szene
   unten als „Boden". z-index:-1 hält die Szene hinter allen Inhalten. */
body:has(#hugos-welt-main) {
  background: linear-gradient(180deg, #e9f0ea 0%, #f4efe3 58%, var(--sand, #EDE8DF) 100%);
  background-attachment: fixed;
}
.kw-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.kw-bg-scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 720px;   /* auf schmalen Screens nicht zu winzig werden lassen */
  height: auto;
  user-select: none;
}