/* Duopaw – Webseite. Farben und Schriften wie in der App (src/lib/design.ts) */
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(fonts/Baloo2_800ExtraBold.woff) format("woff")}
@font-face{font-family:Nunito;font-weight:600;font-display:swap;src:url(fonts/Nunito_600SemiBold.woff) format("woff")}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(fonts/Nunito_700Bold.woff) format("woff")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(fonts/Nunito_800ExtraBold.woff) format("woff")}

:root{
  --koralle:#FF6B4A;--koralle-dunkel:#C8462A;--koralle-hell:#FFE1D8;
  --sonne-hell:#FFF0C7;--tuerkis:#2EC4B6;--tuerkis-dunkel:#0F5E57;--tuerkis-hell:#CFF3EE;
  --tinte:#2B2140;--tinte-weich:#5A4E6B;--grau:#6E6380;--linie:#EADFD3;--creme:#FFF6EC;--weiss:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--tinte);font-family:Nunito,system-ui,sans-serif;font-weight:600;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--koralle-dunkel);font-weight:800}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--tuerkis);outline-offset:3px;border-radius:8px}
.springen{position:absolute;left:12px;top:-60px;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:10px;z-index:10}
.springen:focus{top:12px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.schmal{max-width:760px}

/* Kopf */
.kopf{display:flex;align-items:center;gap:22px;padding-top:18px;padding-bottom:18px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte);margin-right:auto}
.marke img{width:44px;height:44px}
.marke span{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:27px;line-height:1}
.kopf nav{display:flex;align-items:center;gap:22px}
.kopf nav a{color:var(--tinte-weich);text-decoration:none;font-size:15px}
.kopf nav a:hover{color:var(--tinte)}

/* Knöpfe im Duopaw-Look */
.knopf{display:inline-block;border:2px solid var(--tinte);border-radius:999px;padding:12px 24px;font-weight:800;font-size:18px;line-height:1.2;text-decoration:none;color:var(--weiss);background:var(--koralle);text-shadow:0 1px 1px rgba(43,33,64,.45);box-shadow:0 3px 0 var(--tinte);transition:transform .08s,box-shadow .08s;text-align:center}
.knopf:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--tinte)}
.knopf:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinte)}
.knopf.hell{background:var(--weiss);color:var(--tinte);text-shadow:none}
.knopf.klein{padding:9px 18px;font-size:16px}
.kopf nav .knopf{color:var(--weiss)}

/* Startseite */
.hero{display:flex;align-items:center;gap:40px;padding-top:26px;padding-bottom:46px}
.hero .text{flex:1}
h1,.h1{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(40px,7vw,62px);line-height:1.02;letter-spacing:-.5px}
h1 em{font-style:normal;color:var(--koralle)}
.lead{font-size:19px;color:var(--tinte-weich);margin:18px 0 24px;max-width:500px}
.fakten{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fakten li{background:var(--weiss);border:1.5px solid var(--linie);border-radius:999px;padding:6px 13px;font-size:14px;font-weight:800;color:var(--tinte-weich)}
.fakten li::before{content:"✓ ";color:var(--tuerkis-dunkel)}
.handy{width:290px;flex:none;border:3px solid var(--tinte);border-radius:36px;overflow:hidden;box-shadow:0 6px 0 var(--tinte);background:var(--weiss);aspect-ratio:375/700}
.handy img{width:100%;height:100%;object-fit:cover;object-position:top}
.handy.video{aspect-ratio:600/1214;position:relative}
.videoknopf{position:absolute;right:10px;top:27%;z-index:2;width:44px;height:44px;border-radius:50%;border:2px solid var(--tinte);background:var(--weiss);color:var(--tinte);font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 2px 0 var(--tinte)}
.handy video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
h2{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(28px,4vw,36px);line-height:1.1;text-align:center;margin-bottom:22px}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
main>section.wrap:not(.hero):not(.seite){padding-top:clamp(36px,6vw,64px)}
.karte{background:var(--weiss);border:2px solid var(--tinte);border-radius:22px;padding:20px;box-shadow:0 4px 0 var(--tinte)}
.karte h3{font-size:18px;font-weight:800;margin-bottom:6px}
.karte p{font-size:15px;color:var(--tinte-weich)}
.nr{width:36px;height:36px;border-radius:50%;border:2px solid var(--tinte);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}
.n1{background:var(--koralle-hell)}.n2{background:var(--sonne-hell)}.n3{background:var(--tuerkis-hell)}
.testen{background:var(--tuerkis-hell);border:2px solid var(--tinte);border-radius:26px;padding:26px;box-shadow:0 4px 0 var(--tinte);margin-bottom:clamp(36px,6vw,64px);scroll-margin-top:20px}
.testen h2{text-align:left;margin-bottom:6px}
.testen>p{color:var(--tuerkis-dunkel);max-width:620px}
.wege{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.weg{background:var(--weiss);border:2px solid var(--tinte);border-radius:20px;padding:18px}
.weg h3{font-size:18px;font-weight:800}
.weg ol{padding-left:20px;margin:8px 0 14px;color:var(--tinte-weich);font-size:15px}
.hinweis{font-size:14px;color:var(--tuerkis-dunkel);margin-top:10px}

/* Textseiten (Datenschutz, Impressum, Hilfe …) */
.seite{padding-top:10px;padding-bottom:50px}
.zurueck{font-size:14px;text-decoration:none}
.seite h1{font-size:clamp(34px,6vw,46px);margin:10px 0 6px}
.stand{font-size:14px;color:var(--grau);margin-bottom:6px}
.seite .lead{font-size:17px;margin:6px 0 4px;max-width:none}
.abschnitt{background:var(--weiss);border:1.5px solid var(--linie);border-radius:22px;padding:20px 22px;margin-top:16px;box-shadow:0 6px 16px rgba(43,33,64,.06)}
.abschnitt h2{font-family:Nunito,sans-serif;font-size:19px;font-weight:800;text-align:left;margin-bottom:8px;line-height:1.3}
.abschnitt p{color:var(--tinte-weich);font-size:16px;margin-top:8px;white-space:pre-line}
.abschnitt p:first-of-type{margin-top:0}
.abschnitt ul,.abschnitt ol{padding-left:22px;color:var(--tinte-weich);font-size:16px;margin-top:6px}
.abschnitt li{margin-top:4px}
.abschnitt .knopf{margin-top:14px}

/* Fuß */
.fuss{background:var(--tinte);color:#fff;padding:22px 0;margin-top:10px}
.fuss .wrap{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;font-size:14px}
.fuss a{color:#fff;text-decoration:none;font-weight:700}
.fuss a:hover{text-decoration:underline}
.fuss .rechts{margin-left:auto;color:#CFC6DD}
.fuss .rechts a{color:#CFC6DD}


/* Wachstum und Erlebnisse */
.unter{text-align:center;color:var(--tinte-weich);margin:-12px 0 22px}
.stufen{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:end}
.stufe{text-align:center}
.stufe .bild{aspect-ratio:500/1012;border-radius:24px;border:2px solid var(--tinte);background:var(--weiss);box-shadow:0 3px 0 var(--tinte);margin-bottom:10px;overflow:hidden}
.stufe .bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.stufe b{display:block;font-size:16px;font-weight:800}
.stufe span{font-size:13px;color:var(--grau);font-weight:700}
.erlebnis{display:flex;align-items:center;gap:44px;margin:0 auto 34px;max-width:900px}
.erlebnis:last-child{margin-bottom:0}
.erlebnis.rechts{flex-direction:row-reverse}
.etext{flex:1}
.etext h3{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:28px;line-height:1.1;margin-bottom:8px}
.etext p{color:var(--tinte-weich)}
.handy.klein{width:260px}
.handy.bild{aspect-ratio:600/1215}
.platz{display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:800;color:var(--grau);background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f6efe6 10px,#f6efe6 20px);padding:14px}
/* Häufige Fragen */
.fragen{display:flex;flex-direction:column;gap:10px}
.fragen details{background:var(--weiss);border:2px solid var(--tinte);border-radius:18px;box-shadow:0 3px 0 var(--tinte)}
.fragen summary{cursor:pointer;list-style:none;padding:15px 48px 15px 18px;font-weight:800;font-size:17px;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--koralle-dunkel)}
.fragen details[open] summary::after{content:"–"}
.fragen details p{padding:0 18px 16px;color:var(--tinte-weich);font-size:16px}
@media (max-width:760px){
  .stufen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .stufe{flex:none;width:165px;scroll-snap-align:center}
  .erlebnis,.erlebnis.rechts{flex-direction:column;gap:16px;text-align:center}
  .handy.klein{width:220px}
}

/* Handy */
@media (max-width:760px){
  body{font-size:16px}
  .kopf nav a:not(.knopf){display:none}
  .hero{flex-direction:column;align-items:flex-start;gap:26px;padding-top:10px}
  .handy{width:250px;align-self:center}
  .schritte,.wege{grid-template-columns:1fr}
  .testen{padding:20px}
  .fuss .rechts{margin-left:0;width:100%}
  .fuss .wrap{gap:4px 18px}
  .fuss a{display:inline-block;padding:8px 0}
  .fakten li{font-size:13px}
}