:root{
    /* --- Markenfarben (unveraendert) ------------------------------------ */
    --ivory:#FAF7F2;
    --ivory-deep:#F1ECE3;
    --ivory-card:#FFFFFF;
    --ink:#17140F;
    --ink-soft:#6E6656;
    --sand:#C6C0B2;
    --sand-light:#DED4C8;
    --clay:#6F5940;
    --clay-dark:#584434;
    --line:#E4DDD1;

    /* --- Farbregel: jede Seite nutzt dieselben fuenf Farben -------------
       1 Ivory       Seitenkopf und Grundflaeche
       2 Ivory-deep  Inhaltsband (genau eins pro Seite)
       3 Weiss       Karten und Blaetter
       4 Tinte       Schrift und Footer (einzige dunkle Flaeche)
       5 Clay        Akzent: Buttons, Nummern, kursives Schlusswort
       Sand-light kommt nur im Footer vor. Keine weiteren Toene.        */

    /* --- Flaechen: welche Farbe wofuer ---------------------------------- */
    --surface-main:var(--ivory);          /* Standardflaeche der Seite      */
    --surface-alt:var(--ivory-deep);      /* trennt groessere Abschnitte    */
    --surface-card:var(--ivory-card);     /* Karten auf hellem Grund        */
    --surface-strong:var(--ink);          /* nur Footer                     */

    /* --- Text ------------------------------------------------------------ */
    --text-primary:var(--ink);
    --text-secondary:var(--ink-soft);
    --text-accent:var(--clay);

    /* --- Rahmen und Akzent ----------------------------------------------- */
    --border-default:var(--line);
    --accent-primary:var(--clay);
    --accent-primary-hover:var(--clay-dark);

    /* --- Auf dunklem Grund: fuenf Stufen statt 22 Zufallswerte ----------- */
    --on-ink-surface:rgba(250,247,242,0.05);   /* Kartenflaeche, Tipp-Kasten */
    --on-ink-line:rgba(250,247,242,0.14);      /* Trennlinien, Rahmen        */
    --on-ink-muted:rgba(250,247,242,0.45);     /* Beschriftungen, Zaehler    */
    --on-ink-body:rgba(250,247,242,0.72);      /* Fliesstext                 */
    --on-ink-strong:var(--ivory);              /* Ueberschriften             */
    --accent-on-strong:var(--sand-light);      /* Akzent im Footer           */

    /* --- Radien: vier Stufen statt zwoelf -------------------------------- */
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-pill:999px;

    /* --- Abstaende -------------------------------------------------------- */
    --space-section:104px;
    --space-section-mobile:76px;
    --space-head:56px;      /* Section-Head zum Inhalt                      */
    --space-page-head:72px; /* Seitenkopf oben, auf allen Unterseiten gleich */
    --space-page-head-mobile:48px;
    --title-size:clamp(34px,4.8vw,54px); /* H1 auf allen Unterseiten       */

    /* --- Schrift: genau zwei Rollen, wie auf der Verpackung -------------
       Grundschrift  Inter Tight — Fliesstext, Ueberschriften, Labels
       Schlusswort   Fraunces Italic — wie "Für zuhause." auf der
                     Startseite. Immer .em verwenden, nie eine eigene
                     Kursive bauen.                                         */
    --font-sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-accent:'Fraunces',Georgia,serif;
    --card-pad:28px;        /* Standard-Innenabstand Karten                 */
    --card-pad-sm:18px;     /* kompakte Karten                             */
    --card-pad-lg:36px;     /* grosse Karten                               */

    --shadow-1: 0 1px 2px rgba(23,20,15,0.05);
    --shadow-2: 0 10px 24px -12px rgba(111,89,64,0.35), 0 2px 6px rgba(23,20,15,0.06);
    --shadow-3: 0 30px 60px -24px rgba(23,20,15,0.28), 0 12px 24px -12px rgba(111,89,64,0.25);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  body{
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  button{font-family:inherit;}

  /* Das kursive Schlusswort — ueberall identisch: gleiche Schrift, gleiche
     Farbe, gleicher Schnitt. Groesse kommt immer von der Ueberschrift.   */
  .em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--clay);letter-spacing:-0.02em;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    font-size:11px;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .eyebrow::before{content:'';display:inline-block;width:14px;height:1px;background:var(--clay);margin-right:10px;vertical-align:middle;}

  h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.01em;line-height:1.25;}
  h1{font-size:var(--title-size);line-height:1.06;letter-spacing:-0.02em;}
  h2{font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-0.02em;}
  p{margin:0;}

  .idx{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--clay);font-size:0.9em;margin-right:0.15em;}

  /* focus */
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--clay);
    outline-offset:3px;
    border-radius:3px;
  }

  /* buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:var(--radius-pill);
    font-size:14px;
    font-weight:600;
    letter-spacing:0.01em;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s var(--ease);
    white-space:nowrap;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{
    background:var(--clay);
    color:var(--ivory);
    box-shadow:var(--shadow-2);
  }
  .btn-primary:hover{background:var(--clay-dark);transform:translateY(-2px);box-shadow:var(--shadow-3);}
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border-color:var(--line);
  }
  .btn-ghost:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-2px);}
  .btn-sm{padding:10px 18px;font-size:13px;}
  .icon{width:14px;height:14px;flex:none;}

  .scan-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:8px 14px;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:var(--ivory-card);
  }
  .scan-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--clay);flex:none;}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:var(--ivory);
    border-bottom:1px solid transparent;
    transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(23,20,15,0.02);}
  .site-header .wrap{
    display:flex;align-items:center;justify-content:space-between;
    height:76px;
  }
  .brand-logo{height:20px;width:auto;}
  .main-nav{display:flex;align-items:center;gap:36px;}
  .main-nav a{
    font-size:14px;font-weight:500;color:var(--ink-soft);
    position:relative;padding:4px 0;
    transition:color 0.3s var(--ease);
  }
  .main-nav a::after{
    content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
    background:var(--clay);transform:scaleX(0);transform-origin:right;
    transition:transform 0.35s var(--ease);
  }
  .main-nav a:hover{color:var(--ink);}
  .main-nav a:hover::after{transform:scaleX(1);transform-origin:left;}
  .header-actions{display:flex;align-items:center;gap:18px;}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
  .nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform 0.3s var(--ease),opacity 0.3s var(--ease);}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(6.5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-6.5px) rotate(-45deg);}

  @media (max-width:860px){
    .main-nav{
      position:fixed;inset:76px 0 0 0;background:var(--ivory);
      flex-direction:column;justify-content:flex-start;align-items:flex-start;
      padding:32px;gap:22px;
      transform:translateY(-8px);opacity:0;pointer-events:none;
      transition:transform 0.4s var(--ease),opacity 0.4s var(--ease);
      border-top:1px solid var(--line);
    }
    .main-nav.open{transform:translateY(0);opacity:1;pointer-events:auto;}
    .main-nav a{font-size:20px;}
    .nav-toggle{display:block;}
    .header-actions .btn-primary{display:none;}
  }

  /* ---------- Produktbilder ----------
     Die Produktfotos haben einen fast weissen Hintergrund. Mit multiply
     verschwindet er in der Flaeche, auf der das Bild steht — das Set liegt
     dann direkt auf der Seite statt in einem Kasten. Der Rahmen bekommt
     dieselbe Flaechenfarbe, damit das Mischen auch waehrend einer
     Animation (eigener Stapelkontext) die richtige Farbe trifft.          */
  .shot{margin:0;position:relative;background:var(--surface-main);}
  .shot img{width:100%;height:auto;mix-blend-mode:multiply;}
  .band-alt .shot{background:var(--surface-alt);}
  .review-card .shot{background:var(--surface-card);}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:var(--space-page-head) 0 var(--space-section);}
  .hero-grain{
    position:absolute;inset:0;z-index:1;opacity:0.035;pointer-events:none;mix-blend-mode:multiply;
  }
  .hero .wrap{
    display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;position:relative;
  }
  .hero-copy h1{
    font-size:clamp(44px,6.2vw,80px);
    line-height:1.02;
    letter-spacing:-0.02em;
    margin:22px 0 26px;
  }
  .hero-copy p.lede{
    font-size:18px;line-height:1.7;color:var(--ink-soft);max-width:44ch;margin-bottom:34px;
  }
  .hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:28px;}
  .hero-trust{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);}
  .hero-trust svg{width:16px;height:16px;flex:none;color:var(--clay);}

  /* Weicher Lichtkegel unter dem Set: Ivory-deep in der Mitte, zum Rand
     hin Ivory — so bekommt das freigestellte Set Boden unter den Fuessen. */
  .hero .shot{
    background:
      radial-gradient(closest-side at 50% 54%, var(--surface-alt) 0%, var(--surface-alt) 38%, var(--surface-main) 100%);
  }

  /* Ladeanimation: Text und Bild steigen leicht auf. Endzustand ist
     transform:none, damit kein Stapelkontext zurueckbleibt.              */
  @keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  .hero-copy > *{animation:rise 0.9s var(--ease) both;}
  .hero-copy > :nth-child(2){animation-delay:0.06s;}
  .hero-copy > :nth-child(3){animation-delay:0.12s;}
  .hero-copy > :nth-child(4){animation-delay:0.18s;}
  .hero-copy > :nth-child(5){animation-delay:0.24s;}
  .hero .shot{animation:rise 1.1s var(--ease) 0.1s both;}
  @media (prefers-reduced-motion: reduce){
    .hero-copy > *,.hero .shot{animation:none;}
  }

  @media (max-width:940px){
    .hero{padding:var(--space-page-head-mobile) 0 var(--space-section-mobile);}
    .hero .wrap{grid-template-columns:1fr;gap:28px;}
    .hero .shot{order:-1;max-width:480px;width:100%;margin:0 auto;}
  }

  /* ---------- section shell ---------- */
  section{padding:var(--space-section) 0;}
  .section-head{max-width:640px;margin-bottom:var(--space-head);}
  .section-head h1,
  .section-head h2{margin-top:16px;}
  .section-head p,
  .page-lede{margin-top:18px;font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:52ch;}

  /* Seitenkopf: auf jeder Unterseite gleich — Ivory, gleicher Abstand,
     danach folgt das Inhaltsband in Ivory-deep.                         */
  section.page-head{padding:var(--space-page-head) 0 calc(var(--space-page-head) - 8px);}
  .page-head .section-head{margin-bottom:0;}
  @media (max-width:780px){
    section.page-head{padding:var(--space-page-head-mobile) 0 calc(var(--space-page-head-mobile) - 8px);}
  }

  /* ---------- about ---------- */
  .about{background:var(--surface-alt);}
  .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:start;}
  .about h2{margin-top:16px;}
  .about-lede{margin-top:28px;}
  .about-lede p{font-size:19px;line-height:1.75;color:var(--ink);}
  .pillars{display:flex;flex-direction:column;gap:0;}
  .pillar{
    display:grid;grid-template-columns:44px 1fr;gap:18px;
    padding:26px 0;border-top:1px solid var(--line);
  }
  .pillar:last-child{border-bottom:1px solid var(--line);}
  .pillar .idx{font-size:28px;}
  .pillar h3{font-size:17px;margin-bottom:8px;}
  .pillar p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;}

  @media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:44px;}}

  /* ---------- product ---------- */
  .product-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;}
  .product-top h1{margin-top:16px;}
  .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  .tag-pill{
    font-size:12px;font-weight:600;letter-spacing:0.03em;color:var(--ink);
    background:var(--surface-card);border:1px solid var(--border-default);
    padding:7px 14px;border-radius:var(--radius-pill);
  }

  /* Das Set: grosses Produktbild links, Legende der sechs Teile rechts.
     Die Legende nutzt dieselbe Zeilenform wie die Saeulen auf der
     Startseite, damit beide Seiten gleich gebaut wirken.                */
  .set-layout{display:grid;grid-template-columns:1.25fr 0.75fr;gap:56px;align-items:start;}
  .set-layout .shot{position:sticky;top:100px;}
  .pillar-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
  .pillar-title h3{margin-bottom:0;}
  .spec{font-size:12px;color:var(--clay);font-weight:600;letter-spacing:0.02em;white-space:nowrap;}
  .set-extra{margin-top:22px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);}
  .set-extra strong{color:var(--ink);font-weight:600;}

  @media (max-width:940px){
    .set-layout{grid-template-columns:1fr;gap:28px;}
    .set-layout .shot{position:static;max-width:620px;}
  }

  .product-cta{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;flex-wrap:wrap;padding:var(--card-pad);border-radius:var(--radius-md);
    background:var(--surface-card);border:1px solid var(--border-default);box-shadow:var(--shadow-1);
  }
  .product-cta h2{font-size:18px;letter-spacing:-0.01em;}
  .product-cta .note{font-size:13px;color:var(--ink-soft);margin-top:6px;}

  /* Schlussabschnitt mit einer einzelnen Karte braucht weniger Luft */
  section.closing{padding:var(--space-page-head) 0;}
  @media (max-width:780px){section.closing{padding:var(--space-page-head-mobile) 0;}}

  /* ---------- reviews ---------- */
  .reviews .wrap{
    display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
    padding:56px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--ivory-card);
  }
  .reviews h2{font-size:clamp(26px,3.4vw,36px);}
  .reviews p.lede{color:var(--ink-soft);margin-top:14px;max-width:44ch;font-size:16px;line-height:1.7;}

  /* ---------- footer ---------- */
  footer{background:var(--surface-strong);color:var(--on-ink-body);padding:72px 0 32px;}
  .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--on-ink-line);}
  .footer-brand .brand-logo{height:18px;}
  .footer-brand p{font-size:14px;line-height:1.7;margin-top:18px;max-width:32ch;color:var(--on-ink-muted);}
  .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:0.12em;color:var(--on-ink-muted);margin-bottom:18px;}
  .footer-col ul{display:flex;flex-direction:column;gap:12px;}
  .footer-col a{font-size:14px;color:var(--on-ink-body);transition:color 0.3s var(--ease);}
  .footer-col a:hover{color:var(--accent-on-strong);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:12.5px;color:var(--on-ink-muted);}

  @media (max-width:780px){
    .footer-top{grid-template-columns:1fr 1fr;}
    .about-grid, .reviews .wrap{gap:32px;}
    section{padding:var(--space-section-mobile) 0;}
    .product-top{align-items:flex-start;}
  }
  @media (max-width:520px){
    .wrap{padding:0 20px;}
    .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
    .reviews .wrap{padding:36px 24px;}
  }

  [data-reveal]{opacity:1;}

  /* Aktive Seite in der Navigation */
  .main-nav a[aria-current="page"]{color:var(--ink);}
  .main-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}


  /* Teaser-Karten auf der Startseite */
  .teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .teaser{
    display:flex;flex-direction:column;gap:12px;
    padding:var(--card-pad);border:1px solid var(--border-default);border-radius:var(--radius-md);
    background:var(--ivory-card);
    transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease),border-color 0.3s var(--ease);
  }
  .teaser:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--clay);}
  .teaser:active{transform:translateY(-1px);}
  .teaser .idx{font-size:24px;}
  .teaser h3{font-size:18px;}
  .teaser p{font-size:14px;color:var(--ink-soft);line-height:1.65;}
  .teaser .go{
    margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;color:var(--clay);
    display:inline-flex;align-items:center;gap:7px;
  }
  .teaser .go svg{width:13px;height:13px;transition:transform 0.35s var(--ease);}
  .teaser:hover .go svg{transform:translateX(3px);}
  @media (max-width:860px){.teasers{grid-template-columns:1fr;}}

  /* Kurze Seite: Inhalt vertikal mittig, damit der Footer nicht hochdrängt */
  .page-fill{min-height:calc(100vh - 76px);display:flex;align-items:center;}
  .page-fill > .wrap{width:100%;}

  /* =======================================================================
     TRAININGSBEREICH
     Nutzt ausschließlich die vorhandenen Tokens. Mobile First: die
     Basisregeln gelten für Smartphones, größere Layouts folgen per
     min-width-Abfragen weiter unten.
     ======================================================================= */

  /* --- Trainingsplan: Seitenkopf der Trainingsseite ----------------------
     Hell wie jeder andere Seitenkopf. Links Aufruf bzw. Wochenplan,
     rechts das App-Motiv aus den Produktbildern.                         */
  /* Die Wrapper loesen sich auf, damit Kopf, Bild und Wochenplan direkt im
     Raster liegen: Bild neben dem Kopf, Wochenplan darunter in voller Breite. */
  .plan-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start;}
  .plan-main,
  #planHost{display:contents;}
  .plan-band .scan-tag{grid-column:1;grid-row:1;justify-self:start;margin-bottom:26px;}
  .plan-cta{grid-column:1;grid-row:2;}
  .plan-grid > .shot{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .plan-week{grid-column:1 / -1;grid-row:3;}

  .plan-cta h1{margin:16px 0 0;}
  .plan-cta p{
    margin-top:18px;font-size:17px;line-height:1.7;
    color:var(--ink-soft);max-width:48ch;
  }
  .plan-cta .plan-summary{color:var(--clay);font-size:15px;font-weight:600;}
  .plan-actions{
    display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;
  }
  .plan-actions .btn{min-height:48px;}

  @media (max-width:940px){
    .plan-grid{grid-template-columns:1fr;}
    .plan-band .scan-tag,
    .plan-cta,
    .plan-grid > .shot,
    .plan-week{grid-column:1;grid-row:auto;}
    .plan-grid > .shot{order:1;max-width:560px;margin-top:36px;}
    .plan-week{order:2;}
  }

  /* --- Wochenplan --------------------------------------------------------- */
  .plan-week{margin-top:32px;display:flex;flex-direction:column;}
  .plan-day{border-top:1px solid var(--line);}
  .plan-day:last-child{border-bottom:1px solid var(--line);}
  .plan-day > summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
    padding:20px 2px;min-height:44px;
    transition:opacity 0.3s var(--ease);
  }
  .plan-day > summary::-webkit-details-marker{display:none;}
  .plan-day > summary:hover{opacity:0.72;}
  .plan-day > summary:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:4px;}
  .plan-day-head{flex:1;min-width:0;}
  .plan-day-name{display:block;font-size:16px;font-weight:600;color:var(--ink);}
  .plan-day-meta{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
  .plan-day-body{padding-bottom:12px;}
  .plan-day[open] > summary .ex-chevron{transform:rotate(180deg);}

  .plan-ex{border-top:1px solid var(--line);}
  .plan-ex:first-child{border-top:none;}

  /* --- Übungsbibliothek --------------------------------------------------- */
  .library{display:flex;flex-direction:column;margin-top:8px;}
  .library-fallback{font-size:15px;color:var(--ink-soft);padding:20px 0;}

  details.cat{border-top:1px solid var(--line);}
  details.cat:last-of-type{border-bottom:1px solid var(--line);}
  details.cat > summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;gap:14px;
    padding:22px 2px;min-height:44px;
    transition:opacity 0.3s var(--ease);
  }
  details.cat > summary::-webkit-details-marker{display:none;}
  details.cat > summary:hover{opacity:0.7;}
  details.cat > summary:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:4px;}
  .cat-head{flex:1;min-width:0;}
  .cat-name{
    display:block;font-size:19px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);
  }
  .cat-desc{
    display:none;font-size:13.5px;color:var(--ink-soft);margin-top:4px;line-height:1.55;
  }
  .cat-count{
    font-size:12px;letter-spacing:0.04em;color:var(--ink-soft);white-space:nowrap;
  }
  details.cat[open] > summary .ex-chevron{transform:rotate(180deg);}
  details.cat > summary .ex-chevron{color:var(--ink-soft);}
  .cat-body{padding:0 0 14px;}

  /* --- Einzelne Übung (Bibliothek und Plan) -------------------------------- */
  details.ex{border-top:1px solid var(--line);}
  details.ex > summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;gap:14px;
    padding:16px 2px;min-height:44px;
    transition:opacity 0.3s var(--ease);
  }
  details.ex > summary::-webkit-details-marker{display:none;}
  details.ex > summary:hover{opacity:0.7;}
  details.ex > summary:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:4px;}
  details.ex[open] > summary .ex-chevron{transform:rotate(180deg);}
  .ex-num{
    font-family:var(--font-accent);font-style:italic;font-size:15px;
    color:var(--clay);flex:none;width:22px;
  }
  .ex-head{flex:1;min-width:0;}
  .ex-name{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35;}
  .ex-sub{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.45;}
  .ex-chevron{
    width:13px;height:13px;flex:none;color:var(--ink-soft);
    transition:transform 0.35s var(--ease);
  }

  /* --- Detailansicht einer Übung ------------------------------------------ */
  .ex-detail{padding:4px 0 26px;}

  /* Übungsbild bzw. -video: erscheint nur, wenn eine Datei vorhanden ist */
  .ex-media{margin:0 0 22px;max-width:520px;}
  .ex-image[hidden]{display:none;}
  .ex-image img{
    width:100%;height:auto;border-radius:var(--radius-md);
    background:var(--surface-alt);
  }
  .ex-video{border-radius:var(--radius-md);overflow:hidden;background:var(--surface-alt);aspect-ratio:16/9;}
  .ex-video video{width:100%;height:100%;object-fit:cover;display:block;}

  .ex-facts{
    display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;
    padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line);
  }
  .ex-fact h4{
    font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
    color:var(--ink-soft);margin:0 0 6px;
  }
  .ex-fact p{font-size:14px;line-height:1.5;color:var(--ink);}

  .ex-section{margin-bottom:22px;}
  .ex-section:last-child{margin-bottom:0;}
  .ex-section h4{
    font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
    color:var(--ink-soft);margin:0 0 12px;
  }

  ol.ex-steps{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:10px;counter-reset:step;
  }
  ol.ex-steps li{
    display:grid;grid-template-columns:22px 1fr;gap:10px;
    font-size:14.5px;line-height:1.6;color:var(--ink);
  }
  ol.ex-steps li::before{
    counter-increment:step;content:counter(step,decimal-leading-zero);
    font-family:var(--font-accent);font-style:italic;font-size:12.5px;color:var(--clay);
  }

  ul.ex-bullets{display:flex;flex-direction:column;gap:8px;}
  ul.ex-bullets li{
    position:relative;padding-left:16px;
    font-size:14px;line-height:1.6;color:var(--ink-soft);
  }
  ul.ex-bullets li::before{
    content:'';position:absolute;left:2px;top:9px;
    width:4px;height:4px;border-radius:50%;background:var(--clay);
  }

  .ex-tip{
    background:var(--ivory-deep);border-radius:var(--radius-md);padding:var(--card-pad-sm);
  }
  .ex-tip p{font-size:14px;line-height:1.6;color:var(--ink);}
  .ex-tip h4{margin-bottom:8px;}

  /* --- Wizard (Vollbild-Overlay) ------------------------------------------- */
  body.wiz-open{overflow:hidden;}

  .wiz{
    position:fixed;inset:0;z-index:100;
    background:rgba(23,20,15,0.6);
    display:flex;align-items:flex-end;justify-content:center;
    animation:wizFade 0.25s var(--ease);
  }
  @keyframes wizFade{from{opacity:0;}to{opacity:1;}}

  .wiz-panel{
    background:var(--ivory);width:100%;max-height:92vh;
    border-radius:var(--radius-lg) 20px 0 0;
    display:flex;flex-direction:column;
    box-shadow:var(--shadow-3);
    animation:wizUp 0.35s var(--ease);
  }
  @keyframes wizUp{from{transform:translateY(24px);}to{transform:translateY(0);}}

  @media (prefers-reduced-motion: reduce){
    .wiz,.wiz-panel{animation:none;}
  }

  .wiz-top{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px 0;
  }
  .wiz-step{
    font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
    color:var(--ink-soft);
  }
  .wiz-close{
    background:none;border:none;cursor:pointer;padding:8px;margin:-8px;
    color:var(--ink-soft);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
    transition:color 0.3s var(--ease);
  }
  .wiz-close:hover{color:var(--ink);}
  .wiz-close:focus-visible{outline:2px solid var(--clay);outline-offset:2px;}
  .wiz-close svg{width:18px;height:18px;}

  .wiz-progress{display:flex;gap:6px;padding:14px 20px 0;}
  .wiz-dot{
    height:3px;flex:1;border-radius:2px;background:var(--line);
    transition:background 0.35s var(--ease);
  }
  .wiz-dot.on{background:var(--clay);}

  .wiz-body{padding:22px 20px 8px;overflow-y:auto;flex:1;}
  .wiz-body h2{
    font-size:clamp(22px,5.5vw,28px);line-height:1.2;letter-spacing:-0.01em;margin:0;
  }
  .wiz-hint{font-size:13.5px;color:var(--ink-soft);margin-top:8px;}

  .wiz-options{display:flex;flex-direction:column;gap:10px;margin-top:22px;}

  .wiz-opt{
    text-align:left;width:100%;cursor:pointer;
    background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);
    padding:var(--card-pad-sm);min-height:56px;
    display:flex;flex-direction:column;gap:4px;
    transition:border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .wiz-opt:hover{border-color:var(--clay);}
  .wiz-opt:active{transform:scale(0.99);}
  .wiz-opt:focus-visible{outline:2px solid var(--clay);outline-offset:2px;}
  .wiz-opt.on{border-color:var(--clay);background:var(--surface-alt);}
  .wiz-opt-label{font-size:15.5px;font-weight:600;color:var(--ink);}
  .wiz-opt-desc{font-size:13px;line-height:1.5;color:var(--ink-soft);}
  .wiz-options.compact .wiz-opt{padding:14px 16px;min-height:48px;}

  .wiz-foot{
    display:flex;gap:10px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:var(--ivory);
  }
  .wiz-foot .btn{flex:1;justify-content:center;min-height:50px;}
  .wiz-next:disabled{opacity:0.4;cursor:not-allowed;}
  .wiz-next:disabled:hover{background:var(--clay);transform:none;box-shadow:var(--shadow-2);}

  /* --- Ab Tablet ----------------------------------------------------------- */
  @media (min-width:700px){

    .cat-desc{display:block;}
    .ex-facts{grid-template-columns:repeat(4,1fr);}
    .ex-detail{padding:4px 0 30px;padding-left:36px;}

    .wiz{align-items:center;padding:24px;}
    .wiz-panel{
      max-width:620px;border-radius:var(--radius-lg);max-height:86vh;
    }
    .wiz-top{padding:24px 28px 0;}
    .wiz-progress{padding:16px 28px 0;}
    .wiz-body{padding:26px 28px 10px;}
    .wiz-foot{padding:18px 28px;}
    .wiz-foot .btn{flex:0 0 auto;}
    .wiz-foot .wiz-next{margin-left:auto;}
    .wiz-options{
      display:grid;grid-template-columns:1fr 1fr;gap:12px;
    }
    .wiz-options .wiz-opt{height:100%;}
  }

  @media (min-width:960px){
    .ex-num{width:26px;font-size:16px;}
    .cat-name{font-size:21px;}
  }

  /* --- Sicherheitshinweis: weisse Karte im Inhaltsband ------------------ */
  .safety-note{
    margin-top:40px;padding:var(--card-pad-sm);border-radius:var(--radius-md);
    border:1px solid var(--border-default);background:var(--surface-card);
    display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:flex-start;
  }
  .safety-note svg{width:18px;height:18px;color:var(--clay);margin-top:2px;flex:none;}
  .safety-note p{font-size:13px;line-height:1.65;color:var(--ink-soft);}
  .safety-note strong{color:var(--ink);}

  /* Kasten auf Ivory ist Ivory-deep, Kasten auf Ivory-deep ist Weiss —
     so bleibt jede Box sichtbar, ohne eine weitere Farbe zu brauchen.   */
  .band-alt .ex-tip,
  .band-alt .ex-video,
  .band-alt .ex-image img{background:var(--surface-card);}

  /* --- Bewertungskarte --------------------------------------------------- */
  .review-card{
    display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
    padding:var(--card-pad-lg);
    border:1px solid var(--border-default);border-radius:var(--radius-lg);
    background:var(--surface-card);box-shadow:var(--shadow-2);
  }
  .review-card h1{margin-top:16px;}
  .review-card .lede{margin-top:18px;font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:44ch;}
  .review-card .btn{margin-top:30px;max-width:100%;white-space:normal;text-align:center;}
  .review-card .shot{width:100%;max-width:380px;justify-self:center;}
  @media (min-width:860px){
    .review-card{grid-template-columns:1.15fr 0.85fr;padding:56px;gap:48px;}
    .review-card .btn{white-space:nowrap;}
  }

  /* --- Menue-Button: ausreichend grosses Touch-Ziel ---------------------- */
  .nav-toggle{
    min-width:44px;min-height:44px;
    display:none;align-items:center;justify-content:center;flex-direction:column;
  }
  @media (max-width:860px){ .nav-toggle{display:flex;} }

  /* --- Beiges Zwischenband -------------------------------------------------- */
  .band-alt{background:var(--surface-alt);}

  /* =======================================================================
     RECHTSSEITEN
     Lange Fließtexte brauchen mehr Zeilenabstand und eine begrenzte
     Zeilenlänge als der Rest der Website. Die .fill-in-Markierung macht
     offene Stellen unübersehbar, damit sie nicht versehentlich live gehen.
     ======================================================================= */

  .legal{max-width:68ch;}

  /* Der Rechtstext liegt als weisses Blatt im Inhaltsband */
  .legal-sheet{
    max-width:calc(68ch + 2 * var(--card-pad-lg));
    padding:var(--card-pad-lg);border-radius:var(--radius-lg);
    background:var(--surface-card);border:1px solid var(--border-default);
    box-shadow:var(--shadow-1);
  }
  .legal-sheet > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
  .legal a{
    color:var(--accent-primary);text-decoration:underline;text-underline-offset:3px;
    transition:color 0.3s var(--ease);
  }
  .legal a:hover{color:var(--accent-primary-hover);}
  .legal a:active{opacity:0.7;}
  @media (max-width:520px){
    .legal-sheet{padding:var(--card-pad) 20px;}
  }

  .legal h2{
    font-size:clamp(20px,3.4vw,24px);letter-spacing:-0.01em;
    margin:44px 0 14px;padding-top:24px;
    border-top:1px solid var(--line);
  }
  .legal h2:first-of-type{margin-top:8px;}
  .legal h3{
    font-size:16px;margin:28px 0 10px;
  }
  .legal p{
    font-size:15.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px;
  }
  .legal p strong{color:var(--ink);font-weight:600;}
  .legal-address{
    font-size:15.5px;line-height:1.75;color:var(--ink);
    padding:var(--card-pad-sm);border-radius:var(--radius-md);
    background:var(--surface-alt);border:1px solid var(--border-default);
    margin-bottom:14px;
  }

  .legal-list{
    display:flex;flex-direction:column;gap:9px;margin:0 0 18px;
  }
  .legal-list li{
    position:relative;padding-left:18px;
    font-size:15.5px;line-height:1.7;color:var(--ink-soft);
  }
  .legal-list li::before{
    content:'';position:absolute;left:2px;top:11px;
    width:4px;height:4px;border-radius:50%;background:var(--clay);
  }
  .legal-list li strong{color:var(--ink);font-weight:600;}

  /* Kurzfassung ganz oben */
  .legal-summary{
    padding:var(--card-pad);border-radius:var(--radius-md);
    background:var(--surface-alt);border:1px solid var(--border-default);
    margin-bottom:12px;
  }
  .legal-summary h3{
    font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
    color:var(--ink-soft);margin:0 0 14px;
  }
  .legal-summary ul{display:flex;flex-direction:column;gap:10px;}
  .legal-summary li{
    position:relative;padding-left:20px;
    font-size:15px;line-height:1.65;color:var(--ink-soft);
  }
  .legal-summary li::before{
    content:'';position:absolute;left:0;top:9px;
    width:6px;height:6px;border-radius:50%;background:var(--clay);
  }
  .legal-summary li strong{color:var(--ink);font-weight:600;}

  /* Erläuternde Randbemerkung */
  .legal-note{
    font-size:14px;line-height:1.65;
    padding-left:16px;border-left:2px solid var(--border-default);
    color:var(--ink-soft);
  }

  /* Offene Stelle — muss vor dem Livegang ausgefüllt werden */
  .fill-in{
    display:inline;
    background:var(--surface-alt);
    border-bottom:2px dashed var(--clay);
    color:var(--clay);font-weight:600;
    padding:1px 4px;border-radius:3px;
  }
  .fill-in::before{content:'\26A0\FE0E  ';}

  /* Abschließender Hinweiskasten */
  .legal-disclaimer{
    margin-top:48px;padding:var(--card-pad);border-radius:var(--radius-md);
    background:var(--surface-alt);border:1px solid var(--border-default);
    color:var(--text-secondary);
  }
  .legal-disclaimer h3{
    font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
    color:var(--text-secondary);margin:0 0 12px;
  }
  .legal-disclaimer p{color:var(--text-secondary);margin:0;font-size:14.5px;}
  .legal-disclaimer p strong{color:var(--text-primary);}

  @media (max-width:520px){
    .legal-summary{padding:22px 20px;}
    .legal-address{padding:16px 18px;}
    .legal-disclaimer{padding:20px 20px;}
  }

  /* --- Kennzeichnung KI-erzeugter Bilder und Videos (Art. 50 KI-VO) --------------------------------- */
  .ki-note{
    margin-top:8px;
    font-size:12px;letter-spacing:0.04em;color:var(--text-secondary);
    display:flex;align-items:center;gap:7px;
  }
  .ki-note::before{
    content:"";width:5px;height:5px;border-radius:50%;
    background:var(--accent-primary);flex:none;
  }
  .hero .ki-note{justify-content:center;}

  /* =======================================================================
     KONTAKTFORMULAR — weisses Blatt im Inhaltsband, wie die Rechtsseiten
     ======================================================================= */
  .form-card{
    max-width:calc(68ch + 2 * var(--card-pad-lg));
    padding:var(--card-pad-lg);border-radius:var(--radius-lg);
    background:var(--surface-card);border:1px solid var(--border-default);
    box-shadow:var(--shadow-1);
    display:flex;flex-direction:column;gap:22px;
  }
  .field{display:flex;flex-direction:column;gap:8px;}
  .field label{font-size:13px;font-weight:600;color:var(--text-primary);}
  .field input,
  .field textarea{
    font:inherit;font-size:15.5px;color:var(--text-primary);
    background:var(--surface-main);border:1px solid var(--border-default);
    border-radius:var(--radius-sm);padding:13px 15px;
    transition:border-color 0.3s var(--ease);
  }
  .field textarea{resize:vertical;min-height:150px;line-height:1.6;}
  .field input:hover,
  .field textarea:hover{border-color:var(--text-secondary);}
  .field input:focus-visible,
  .field textarea:focus-visible{outline:2px solid var(--accent-primary);outline-offset:1px;border-color:var(--accent-primary);}
  .field-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .form-note{font-size:13px;line-height:1.6;color:var(--text-secondary);}
  .form-card .btn{align-self:flex-start;}
  .form-status{
    padding:var(--card-pad-sm);border-radius:var(--radius-md);
    background:var(--surface-alt);border-left:2px solid var(--accent-primary);
    font-size:14.5px;line-height:1.6;color:var(--text-primary);
  }
  .form-status.is-error{border-left-style:dashed;}
  .text-link{
    color:var(--accent-primary);text-decoration:underline;text-underline-offset:3px;
    transition:color 0.3s var(--ease);
  }
  .text-link:hover{color:var(--accent-primary-hover);}
  @media (max-width:520px){ .form-card{padding:var(--card-pad) 20px;} }
  .legal h2[id],
  .form-card{scroll-margin-top:100px;}

  /* --- Fotos (Szenen statt freigestellter Produkte) ---------------------
     Ganzflaechig, abgerundet, mit leichtem Schatten — keine Mischung mit
     dem Hintergrund, weil das Foto seinen eigenen Raum hat.            */
  .photo{margin:0;}
  .photo img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-2);}
  /* Kopf der Übungsbibliothek: Text links, Szene rechts */
  .library-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:var(--space-head);}
  .library-head .section-head{margin-bottom:0;}
  @media (max-width:940px){ .library-head{grid-template-columns:1fr;gap:28px;} }
  .review-card .photo{width:100%;max-width:440px;justify-self:center;}

  /* --- Detailabschnitt auf der Set-Seite --------------------------------- */
  .feature{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;margin-bottom:var(--space-section);}
  .feature h2{margin-top:16px;}
  .feature-reverse > figure{order:2;}
  .feature-reverse{grid-template-columns:0.9fr 1.1fr;}
  .feature-specs{margin-top:22px;font-size:12px;font-weight:600;letter-spacing:0.02em;color:var(--accent-primary);}
  @media (max-width:940px){
    .feature{grid-template-columns:1fr;gap:28px;margin-bottom:var(--space-section-mobile);}
    .feature .shot,
    .feature .photo{max-width:600px;}
    .feature-reverse > figure{order:0;}
    .feature-reverse{grid-template-columns:1fr;}
  }

  /* --- Startseite: Set im Einsatz ---------------------------------------- */
  .feature-list{margin-top:24px;border-top:1px solid var(--border-default);}
  .feature-list li{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
    padding:12px 0;border-bottom:1px solid var(--border-default);font-size:14.5px;
  }
  .feature-list strong{font-weight:600;color:var(--text-primary);}
  .feature-list span{font-size:13px;color:var(--text-secondary);}
  .feature-link{
    display:inline-flex;align-items:center;gap:7px;margin-top:22px;
    font-size:13px;font-weight:600;color:var(--accent-primary);
    transition:color 0.3s var(--ease);
  }
  .feature-link svg{width:13px;height:13px;transition:transform 0.35s var(--ease);}
  .feature-link:hover{color:var(--accent-primary-hover);}
  .feature-link:hover svg{transform:translateX(3px);}
  .feature-link:active svg{transform:translateX(1px);}
  .feature-specs + .feature-link{display:flex;width:max-content;}
  .feature-more{
    display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
    padding:var(--card-pad-sm) 0;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);
  }
  .feature-more p{font-size:15px;line-height:1.65;color:var(--text-secondary);max-width:62ch;}
  .feature-more strong{color:var(--text-primary);font-weight:600;}
  .feature-more .feature-link{margin-top:0;}
  section.start{padding-top:0;}
  .start-cta{margin-top:48px;}

  /* =======================================================================
     BILDVORSCHLAG — leeres Bildfeld, bis das passende Foto da ist.
     Bewusst auffaellig (gestrichelt in Clay), damit es nicht live geht.
     ======================================================================= */
  .img-slot{
    display:flex;flex-direction:column;justify-content:center;gap:10px;
    aspect-ratio:1/1;width:100%;padding:var(--card-pad-lg);
    border:2px dashed var(--accent-primary);border-radius:var(--radius-lg);
    background:var(--surface-alt);
  }
  .band-alt .img-slot,
  .review-card .img-slot{background:var(--surface-main);}
  .plan-grid > .img-slot{grid-column:2;grid-row:1 / span 2;align-self:center;aspect-ratio:16/10;}
  .library-head .img-slot{aspect-ratio:16/9;}
  .img-slot-review{max-width:440px;justify-self:center;aspect-ratio:4/5;}
  .img-slot-label{
    font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-primary);
  }
  .img-slot-title{font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;}
  .img-slot p{font-size:14px;line-height:1.65;color:var(--text-secondary);max-width:46ch;}
  .img-slot-format{font-size:12px;font-weight:600;color:var(--accent-primary);}
  @media (max-width:940px){
    .plan-grid > .img-slot{grid-column:1;grid-row:auto;order:1;margin-top:36px;}
    .img-slot{aspect-ratio:auto;min-height:320px;padding:var(--card-pad);}
  }

  /* --- Ring & Ball: zwei Fotos überlappend --------------------------------- */
  .photo-pair{position:relative;padding-bottom:22%;}
  .photo-pair .photo-main{width:82%;}
  .photo-pair .photo-inset{position:absolute;right:0;bottom:0;width:46%;}
  .photo-pair .photo-inset img{border:6px solid var(--surface-main);box-shadow:var(--shadow-3);}

  /* --- Handy-Ansicht im Seitenkopf der Trainingsseite ---------------------- */
  .plan-mockup{margin:0;}
  .plan-mockup img{width:100%;height:auto;}
  .plan-grid > .plan-mockup{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .shot-caption{margin-top:10px;font-size:13px;color:var(--text-secondary);text-align:center;}
  /* Nur in der Desktop-Ansicht: auf Handy und Tablet fällt das Bild weg */
  @media (max-width:940px){
    .plan-grid > .plan-mockup{display:none;}
  }

  /* --- Set-Seite: Legende verlinkt auf die Detailabschnitte --------------- */
  .pillar-link{transition:color 0.3s var(--ease);}
  .pillar-link:hover{color:var(--accent-primary);}
  .pillar-link:active{opacity:0.7;}
  .feature[id]{scroll-margin-top:100px;}
  section.pieces .feature:last-of-type{margin-bottom:var(--space-head);}
  .feature-more + .product-cta{margin-top:48px;}

  /* --- Startseite: Set- und Trainings-Teaser ------------------------------- */
  .set-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px;}
  .set-chips li{
    font-size:12.5px;font-weight:600;color:var(--text-primary);
    padding:7px 14px;border-radius:var(--radius-pill);
    background:var(--surface-card);border:1px solid var(--border-default);
  }
  .phone-shot{margin:0;justify-self:center;width:100%;max-width:380px;}
  .phone-shot img{width:100%;height:auto;}
  .feature-btn{margin-top:28px;}
  section.start .feature{margin-bottom:var(--space-head);}

  /* App-Overlay: weißer Bildhintergrund verschmilzt mit der Fläche */
  .plan-mockup{background:var(--surface-main);}
  .plan-mockup img{mix-blend-mode:multiply;}
  .plan-mockup .ki-note{justify-content:center;}