/* =========================================================
   Nina – Nachhilfe & Lernbegleitung
   Getönte Seite, weiße Inhaltsfläche, schwebende Pillen-
   Navigation, Bogenporträt, Korall als Aktionsfarbe.
   Keine externen Requests. Farben unter :root ändern.
   ========================================================= */

:root{
  --mint:    #E7F2EB;   /* Seitenhintergrund                 */
  --mint-2:  #D5E9DC;   /* Deko, Bildhintergrund             */
  --tanne:   #10241C;   /* Text und Überschriften            */
  --grau:    #5A6B63;   /* Nebentext                         */
  --korall:  #EE5A45;   /* Aktionen, Hervorhebungen          */
  --korall-d:#D64730;   /* Hover                             */
  --sonne:   #F7C948;   /* zweiter Akzent, sehr sparsam      */
  --weiss:   #FFFFFF;
  --linie:   #E8EDE9;

  --sheet: 34px;   /* Radius der weißen Inhaltsfläche */
  --rund:  22px;   /* Karten                          */
  --breit: 76rem;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Eigene Schrift? Dateien nach fonts/ legen, Block aktivieren.
  @font-face{ font-family:"Eigen"; src:url("fonts/eigen.woff2") format("woff2");
              font-weight:400 800; font-display:swap; } */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; overflow-x:hidden;
  background:var(--mint); color:var(--tanne);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .17vw,1.09rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Typografie --------------------------------- */

h1,h2,h3{ color:var(--tanne); margin:0; }

h1{
  font-size:clamp(2.6rem,1.5rem + 4.6vw,5rem);
  font-weight:700; line-height:1.02; letter-spacing:-.042em;
  margin-bottom:1.4rem;
}
h2{
  font-size:clamp(1.95rem,1.4rem + 2.1vw,3.1rem);
  font-weight:700; line-height:1.08; letter-spacing:-.035em;
  margin-bottom:1.1rem; max-width:20ch;
}
h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.5rem; }

/* farbig hervorgehobenes Wort in Überschriften */
h1 em, h2 em{ font-style:normal; color:var(--korall); }

p{ margin:0 0 1.15rem; max-width:40rem; }
p:last-child{ margin-bottom:0; }

.gross{ font-size:clamp(1.08rem,1rem + .5vw,1.28rem); line-height:1.6;
        color:var(--grau); max-width:33rem; }
.klein{ font-size:.9rem; color:var(--grau); }

.marker{
  display:inline-block; font-size:.8rem; font-weight:600;
  letter-spacing:.05em; color:var(--korall);
  background:#FDEAE6; border-radius:999px; padding:.35rem .95rem;
  margin:0 0 1.1rem;
}

a{ color:var(--korall); }
:focus-visible{ outline:2px solid var(--korall); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:-9999px; background:var(--tanne); color:#fff;
       padding:.7rem 1.2rem; border-radius:999px; }
.skip:focus{ left:1rem; top:1rem; z-index:99; }

/* ---------- Schwebende Navigation ---------------------- */

.kopf{ position:sticky; top:0; z-index:30; padding:.9rem 1.25rem; }
.kopf__inner{
  max-width:var(--breit); margin:0 auto;
  background:var(--weiss); border-radius:999px;
  box-shadow:0 6px 26px rgba(16,36,28,.07);
  padding:.6rem .7rem .6rem 1.6rem;
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; align-items:center;
}
.marke{ font-size:1.1rem; font-weight:700; color:var(--tanne);
        text-decoration:none; letter-spacing:-.025em; line-height:1.2; }
.marke span{ display:block; font-size:.66rem; font-weight:500; letter-spacing:.09em;
             text-transform:uppercase; color:var(--grau); }
.nav{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-left:auto; font-size:.96rem; }
.nav a{ color:var(--grau); text-decoration:none; font-weight:500;
        transition:color .15s ease; }
.nav a:hover{ color:var(--tanne); }
.nav a[aria-current="page"]{ color:var(--korall); }
.kopf .knopf{ padding:.7rem 1.4rem; font-size:.94rem; }

/* ---------- Knöpfe ------------------------------------- */

.knopf{
  display:inline-block; text-decoration:none;
  background:var(--korall); color:#fff;
  padding:1rem 2rem; border:2px solid var(--korall);
  border-radius:999px; font-size:1rem; font-weight:600;
  letter-spacing:-.01em;
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.knopf:hover{ background:var(--korall-d); border-color:var(--korall-d);
              transform:translateY(-2px); box-shadow:0 10px 24px rgba(238,90,69,.28); }
.knopf--leise{ background:var(--weiss); color:var(--tanne); border-color:var(--weiss); }
.knopf--leise:hover{ background:var(--weiss); border-color:var(--tanne);
                     box-shadow:0 10px 24px rgba(16,36,28,.12); }
.knopf--hell{ background:#fff; color:var(--tanne); border-color:#fff; }
.knopf--hell:hover{ background:#fff; border-color:#fff; }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; margin:2rem 0 0; }

/* ---------- Hero --------------------------------------- */

.held{ max-width:var(--breit); margin:0 auto; padding:clamp(1.5rem,4vw,3rem) 1.5rem 0; }
.held__inner{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.held__bild{
  position:relative; aspect-ratio:4/5; background:var(--mint-2);
  border-radius:999px 999px var(--rund) var(--rund);
  overflow:hidden;
}
.held__bild img{ width:100%; height:100%; object-fit:cover; }
.held__bild::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(16,36,28,.06);
}

/* Social Proof über der Headline */
.beweis{ display:inline-flex; align-items:center; gap:.7rem;
         background:var(--weiss); border-radius:999px; padding:.4rem 1.1rem .4rem .5rem;
         font-size:.88rem; font-weight:500; color:var(--tanne);
         box-shadow:0 4px 16px rgba(16,36,28,.06); margin-bottom:1.6rem; }
.koepfe{ display:flex; }
.koepfe span{
  width:1.9rem; height:1.9rem; border-radius:50%; flex:none;
  background:var(--mint-2); color:var(--tanne); border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; margin-right:-.6rem;
}
.koepfe span:last-child{ margin-right:0; background:var(--sonne); }

/* schwebende Karten, überlappen die Hero-Kante */
.schweber{
  max-width:var(--breit); margin:0 auto; padding:0 1.5rem;
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin-top:-2.5rem; position:relative; z-index:2;
}
.schweber > div{
  background:var(--weiss); border-radius:var(--rund); padding:1.3rem 1.4rem;
  box-shadow:0 8px 30px rgba(16,36,28,.08);
}
.schweber strong{ display:block; font-size:1.7rem; font-weight:700;
                  letter-spacing:-.03em; line-height:1.15; }
.schweber span{ font-size:.88rem; color:var(--grau); }

/* ---------- Weiße Inhaltsfläche ------------------------ */

.blatt{
  max-width:var(--breit); margin:2.5rem auto 2.5rem;
  background:var(--weiss); border-radius:var(--sheet);
  padding:clamp(.5rem,2vw,1.5rem) clamp(1.5rem,4vw,4rem);
  box-shadow:0 4px 30px rgba(16,36,28,.05);
}

.teil{ padding:clamp(3rem,6vw,5.5rem) 0; }
.teil + .teil{ border-top:1px solid var(--linie); }
.teil--offen{ padding-top:clamp(2rem,4vw,3.5rem); border-top:none; }

/* farbige Vollbreitenbänder innerhalb der Fläche */
.band{
  background:var(--mint); border-radius:var(--rund);
  padding:clamp(2.2rem,4vw,3.5rem);
  margin:clamp(3rem,6vw,5rem) 0;
}
.band--tief{ background:var(--tanne); color:#fff; }
.band--tief h2{ color:#fff; }
.band--tief h2 em{ color:var(--sonne); }
.band--tief p{ color:rgba(255,255,255,.78); }
.band--tief .marker{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- Text neben Bild ---------------------------- */

.duo{ display:grid; gap:clamp(2rem,5vw,3.5rem);
      grid-template-columns:1fr 1fr; align-items:center; }
.duo--gedreht .duo__bild{ order:-1; }
.duo__bild{ border-radius:var(--rund); overflow:hidden; aspect-ratio:4/3;
            background:var(--mint-2); }
.duo__bild img{ width:100%; height:100%; object-fit:cover; }
.duo__bild--bogen{ border-radius:999px 999px var(--rund) var(--rund); aspect-ratio:4/5; }

/* ---------- Karten ------------------------------------- */

.raster{ display:grid; gap:1.3rem; margin-top:2.5rem;
         grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.karte{
  background:var(--mint); border-radius:var(--rund); padding:1.9rem 1.7rem;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.karte:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,36,28,.09); }
.karte--betont{ background:var(--tanne); color:#fff; }
.karte--betont h3, .karte--betont .preis{ color:#fff; }
.karte--betont ul, .karte--betont .klein{ color:rgba(255,255,255,.75); }
.karte .preis{ display:block; font-size:2rem; font-weight:700;
               letter-spacing:-.035em; margin:.7rem 0 1rem; color:var(--tanne); }
.karte ul{ margin:0 0 1.3rem; padding-left:1.15rem; font-size:.95rem; color:var(--grau); }
.karte li{ margin-bottom:.45rem; }
.karte .knopfreihe{ margin-top:auto; }
.karte__bild{ border-radius:16px; overflow:hidden; aspect-ratio:16/10;
              background:var(--mint-2); margin:-.5rem 0 1.3rem; }
.karte__bild img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Schritte ----------------------------------- */

.schritte{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1.3rem;
           grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.schritte li{ background:var(--mint); border-radius:var(--rund); padding:1.9rem 1.7rem; }
.schritte .zahl{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--korall); color:#fff; font-weight:700; font-size:1.05rem;
  margin-bottom:1.1rem;
}
.schritte p{ margin:0; color:var(--grau); font-size:.98rem; }

/* ---------- Stimmen ------------------------------------ */

.stimmen{ display:grid; gap:1.3rem; margin-top:2.5rem;
          grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.stimme{ background:var(--mint); border-radius:var(--rund); padding:1.9rem 1.7rem; }
.stimme blockquote{ margin:0 0 1.3rem; font-size:1.06rem; }
.stimme footer{ display:flex; align-items:center; gap:.8rem; }
.stimme .kringel{ width:2.6rem; height:2.6rem; border-radius:50%; flex:none;
  background:var(--korall); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:.95rem; }
.stimme cite{ font-style:normal; font-size:.9rem; color:var(--grau); }

/* ---------- Hinweis ------------------------------------ */

.notiz{ background:var(--mint); border-radius:var(--rund);
        padding:1.2rem 1.5rem; margin:1.9rem 0; font-size:.97rem; max-width:38rem; }
.band .notiz{ background:var(--weiss); }
.band--tief .notiz{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- Lücken ------------------------------------- */

.fuellen{ background:#FFF2C9; box-shadow:inset 0 -2px 0 var(--sonne);
          border-radius:4px; padding:0 .18em; }

/* ---------- Bildplätze --------------------------------- */

.medienplatz{
  width:100%; height:100%; min-height:11rem; border-radius:inherit;
  background:var(--mint-2); display:grid; place-items:center; text-align:center;
  color:var(--grau); font-size:.9rem; padding:1.5rem;
}
.bildreihe{ display:grid; gap:1.2rem; margin:2rem 0;
            grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.bildreihe > *{ border-radius:var(--rund); overflow:hidden; aspect-ratio:4/5;
                background:var(--mint-2); }
img,video{ max-width:100%; display:block; }
video{ border-radius:var(--rund); }

/* ---------- Fragen ------------------------------------- */

.frage{ border-bottom:1px solid var(--linie); padding:1.7rem 0; max-width:46rem; }
.frage h3{ margin-bottom:.5rem; }
.frage p{ color:var(--grau); margin:0; }

/* ---------- Rechtstexte -------------------------------- */

.rechtstext{ max-width:42rem; }
.rechtstext h2{ font-size:1.25rem; margin:2.6rem 0 .7rem; max-width:none;
                letter-spacing:-.02em; }
.rechtstext h2:first-of-type{ margin-top:1.6rem; }

/* ---------- Fuß ---------------------------------------- */

.fuss{ background:var(--tanne); color:rgba(255,255,255,.7);
       border-radius:var(--sheet) var(--sheet) 0 0;
       max-width:var(--breit); margin:0 auto;
       padding:3rem clamp(1.5rem,4vw,4rem) 2.6rem; font-size:.92rem; }
.fuss__inner{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:center; }
.fuss a{ color:#fff; text-decoration:none;
         border-bottom:1px solid rgba(255,255,255,.35); }
.fuss a:hover{ border-bottom-color:#fff; }

/* ---------- Bewegung ----------------------------------- */

@media (prefers-reduced-motion:no-preference){
  .auf{ animation:auf .7s cubic-bezier(.22,.61,.24,1) backwards; }
  .auf:nth-child(2){ animation-delay:.07s; }
  .auf:nth-child(3){ animation-delay:.14s; }
  .auf:nth-child(4){ animation-delay:.21s; }
  @keyframes auf{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
}

/* ---------- Schmale Bildschirme ------------------------ */

@media (max-width:58rem){
  .held__inner{ grid-template-columns:1fr; }
  .held__bild{ aspect-ratio:1/1; border-radius:999px 999px var(--rund) var(--rund); }
  .duo{ grid-template-columns:1fr; }
  .duo--gedreht .duo__bild{ order:0; }
  .nav{ order:3; width:100%; margin-left:0; gap:1.1rem; font-size:.9rem;
        padding:.2rem 0 .3rem; }
  .kopf__inner{ border-radius:26px; padding:.8rem 1rem .8rem 1.2rem; }
  .schweber{ margin-top:1.5rem; }
  .blatt{ border-radius:26px; margin:1.5rem auto; }
}

@media print{ .kopf,.knopf,.medienplatz{ display:none; }
  body{ background:#fff; } .blatt,.fuss{ box-shadow:none; background:#fff; color:#000; } }