/* Dienstbit – Website (Startseite + Hilfe). Die App hat ihr eigenes Aussehen in app.html. */
@font-face{font-family:"Barlow";src:url("fonts/barlow-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url("fonts/barlowsemicondensed-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --tanne:#0B6E5F; --tanne2:#095C4F; --tief:#0A3F37; --mint:#E3F1EC; --mint2:#CFE7DF;
  --fuchs:#E9741E; --fuchs-text:#A84E0C; --fuchs-soft:#FDEBDC;
  --papier:#F6F7F5; --weiss:#fff; --linie:#DCE3DF; --linie2:#E9EEEB;
  --tinte:#16201C; --tinte2:#33413B; --grau:#56645E;
  --blau:#1F5E96; --blau-soft:#E2EEF8;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --cond:"Barlow Semi Condensed","Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --w:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block}
a{color:var(--tanne)}
a:hover{color:var(--tanne2)}
:focus-visible{outline:3px solid var(--fuchs);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--cond);font-weight:700;line-height:1.08;letter-spacing:-.005em;margin:0;color:var(--tinte);text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--weiss);padding:8px 12px;border-radius:8px;z-index:9}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
.kopf{padding:calc(env(safe-area-inset-top) + 14px) 0 14px}
.kopf .wrap{display:flex;align-items:center;gap:20px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte);font-family:var(--cond);font-weight:700;font-size:23px;letter-spacing:-.01em;margin-right:auto}
.marke img{width:36px;height:36px;border-radius:10px}
.marke:hover{color:var(--tinte)}
.marke .bit{color:var(--tanne)}
.kopf nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:16px}
.kopf nav a{color:var(--tinte2);text-decoration:none}
.kopf nav a:hover{color:var(--tanne)}
.kopf nav a[aria-current="page"]{color:var(--tanne)}
.kopf nav .breit{display:none}
@media (min-width:820px){.kopf nav .breit{display:inline}}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;font-family:var(--sans);font-weight:600;font-size:17px;text-decoration:none;border:2px solid transparent;white-space:nowrap}
.btn.voll{background:var(--tanne);color:#fff}
.btn.voll:hover{background:var(--tanne2);color:#fff}
.btn.rand{border-color:var(--tanne);color:var(--tanne);background:transparent}
.btn.rand:hover{background:var(--mint);color:var(--tanne2)}
.btn.klein{min-height:40px;padding:0 16px;font-size:15.5px;border-radius:10px}

/* Startseite: Kopfbereich */
.held{padding:28px 0 64px}
.held .wrap{display:grid;gap:40px}
.held h1{font-size:clamp(40px,7.2vw,76px);line-height:.98;letter-spacing:-.012em;max-width:12ch}
.held .lead{font-size:19px;line-height:1.5;color:var(--tinte2);margin-top:20px;max-width:34em}
@media (min-width:980px){
  .held{padding:40px 0 100px}
  .held .wrap{gap:52px}
  .held-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
  .held .lead{margin-top:0}
}
/* Hinweis „Gratis“ über dem Einleitungstext */
.kicker{display:inline-block;margin-top:20px;padding:6px 14px;border-radius:999px;background:var(--fuchs-soft);color:var(--fuchs-text);font-weight:700;font-size:16px;line-height:1.35}
@media (min-width:980px){.held .kicker{margin-top:0}}
.held .kicker + .lead{margin-top:14px}
.aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.notiz{margin-top:16px;font-size:15px;color:var(--grau)}
/* kleine Zusagen unter den Knöpfen */
.zusagen{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--tinte2)}
.zusagen li{display:inline-flex;align-items:center;gap:7px}
.zusagen li::before{content:"";width:12px;height:7px;margin-top:-4px;border-left:2px solid var(--tanne);border-bottom:2px solid var(--tanne);transform:rotate(-45deg)}

/* Band mit den vier wichtigsten Punkten */
.band{background:var(--tief);color:#D7EAE4;padding:28px 0}
.band ul{list-style:none;margin:0 auto;display:grid;gap:18px 32px}
@media (min-width:640px){.band ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.band ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.band li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.band svg{width:26px;height:26px;fill:none;stroke:#F3A563;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.band b{display:block;color:#fff;font-weight:600;font-size:17px;line-height:1.3}
.band span{display:block;font-size:15px;line-height:1.45;margin-top:2px}

/* Vergleich bisher / mit Dienstbit */
.vergleich{margin-top:40px;background:var(--weiss);border-radius:18px;box-shadow:0 0 0 1px var(--linie);overflow:hidden}
.v-kopf{display:none}
.v-zeile{display:grid;gap:6px;padding:16px 18px}
.v-zeile + .v-zeile{border-top:1px solid var(--linie2)}
.v-zeile p{position:relative;padding-left:28px}
.v-zeile p::before{position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;font-size:13px;font-weight:700;line-height:20px;text-align:center}
.v-zeile .alt{color:var(--grau)}
.v-zeile .alt::before{content:"✕";background:var(--papier);color:#8A9590;box-shadow:inset 0 0 0 1px var(--linie)}
.v-zeile .neu{font-weight:600;color:var(--tinte)}
.v-zeile .neu::before{content:"✓";background:var(--tanne);color:#fff}
@media (min-width:760px){
  .v-kopf{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:14px 24px;background:var(--papier);border-bottom:1px solid var(--linie);font-size:14px;font-weight:600;color:var(--grau);text-transform:uppercase;letter-spacing:.06em}
  .v-kopf span + span{color:var(--tanne)}
  .v-zeile{grid-template-columns:1fr 1fr;gap:32px;padding:16px 24px}
}

/* Häufige Fragen auf der Startseite */
.faq{display:grid;gap:32px;align-items:start}
@media (min-width:940px){.faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}}
.faq .fragen{margin-top:0}

/* Beispiel-Wochenplan */
.plan{position:relative}
.blatt{background:var(--weiss);border-radius:18px;box-shadow:0 0 0 1px var(--linie),0 18px 40px -24px rgba(10,63,55,.35);overflow:hidden}
.blatt-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--linie2)}
.blatt-kopf b{font-family:var(--cond);font-size:21px}
.blatt-kopf span{color:var(--grau);font-size:15px;font-variant-numeric:tabular-nums}
.pub{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#12643A;background:#DDF1E4;border-radius:999px;padding:4px 10px}
.pub i{width:8px;height:8px;border-radius:50%;background:#1E8A4F}
.raster{display:grid;grid-template-columns:96px repeat(3,minmax(0,1fr));font-size:14.5px}
@media (min-width:560px){.raster{grid-template-columns:112px repeat(6,minmax(0,1fr))}}
@media (min-width:980px){.raster{grid-template-columns:150px repeat(6,minmax(0,1fr))}.raster > div{min-height:62px;padding:10px 8px}.raster .wer,.raster .ecke{padding-left:20px}}
.raster > div{padding:9px 6px;border-top:1px solid var(--linie2);min-height:58px;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:flex-start}
.raster .tag{min-height:0;padding:8px 6px;border-top:0;font-weight:600;color:var(--grau);font-size:13.5px;line-height:1.2;flex-direction:row;gap:5px;align-items:baseline}
.raster .tag small{font-weight:400;font-size:13px;font-variant-numeric:tabular-nums}
.raster .wer{padding-left:16px;line-height:1.15}
.raster .wer b{font-weight:600;font-size:15px}
.raster .wer small{color:var(--grau);font-size:12.5px}
.raster .ecke{padding-left:16px}
.raster .d4,.raster .d5,.raster .d6{display:none}
@media (min-width:560px){.raster .d4,.raster .d5,.raster .d6{display:flex}}
.s{display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinte);font-size:14px;white-space:nowrap;background:var(--mint);border-radius:7px;padding:3px 7px}
.s i{display:none;font-style:normal}
.lang{display:none}
@media (min-width:980px){.s{flex-direction:row;padding:3px 8px}.s i{display:inline}.lang{display:inline}.kurz{display:none}}
.s.pharm{background:#E3F1EC}
.s.pka{background:#E7EEF7}
.s.lehr{background:#F1ECF7}
.ab{font-size:13px;font-weight:600;border-radius:7px;padding:2px 6px;white-space:nowrap}
.ab.urlaub{color:#12643A;background:#DDF1E4}
.ab.bs{color:var(--blau);background:var(--blau-soft)}
.nacht{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--fuchs-text);background:var(--fuchs-soft);border-radius:7px;padding:2px 6px;white-space:nowrap}
.nacht svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.frei{color:#9AA5A0}

/* Antrag-Karte über dem Plan */
.antrag{position:relative;margin:-12px 0 0 auto;width:min(300px,calc(100% - 24px));background:var(--weiss);border-radius:16px;padding:14px 16px 16px;box-shadow:0 0 0 1px var(--linie),0 22px 44px -18px rgba(10,63,55,.45);animation:antrag .5s cubic-bezier(.2,.8,.2,1) .7s both}
@media (min-width:980px){.antrag{position:absolute;margin:0;right:28px;bottom:-40px}}
@keyframes antrag{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.antrag .k{font-size:13.5px;font-weight:600;color:var(--fuchs-text)}
.antrag .t{font-weight:600;font-size:16.5px;margin-top:2px}
.antrag .z{color:var(--grau);font-size:14.5px;font-variant-numeric:tabular-nums}
.antrag .kn{display:flex;gap:8px;margin-top:12px}
.antrag .kn span{flex:1;text-align:center;border-radius:10px;padding:8px 0;font-weight:600;font-size:14.5px}
.antrag .kn .nein{background:var(--papier);color:var(--tinte2);box-shadow:inset 0 0 0 1px var(--linie)}
.antrag .kn .ja{background:var(--tanne);color:#fff}

/* Abschnitte */
.abschnitt{padding:72px 0}
.abschnitt.weiss{background:var(--weiss)}
.abschnitt h2{font-size:clamp(30px,4.6vw,44px);max-width:24ch}
.abschnitt .intro{font-size:18.5px;color:var(--tinte2);margin-top:14px;max-width:38em}
@media (min-width:980px){.abschnitt{padding:96px 0}}

/* Ablauf: echte Reihenfolge einer Woche */
.ablauf{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:28px;counter-reset:schritt}
@media (min-width:860px){.ablauf{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
.ablauf li{counter-increment:schritt;position:relative;padding-top:58px}
.ablauf li::before{content:counter(schritt);position:absolute;top:0;left:0;font-family:var(--cond);font-weight:700;font-size:28px;line-height:44px;width:44px;height:44px;text-align:center;border-radius:50%;background:var(--tanne);color:#fff}
@media (min-width:860px){.ablauf li::after{content:"";position:absolute;top:21px;left:56px;right:-20px;height:2px;background:var(--mint2)}.ablauf li:last-child::after{display:none}}
.ablauf h3{font-size:23px}
.ablauf p{color:var(--tinte2);margin-top:8px}

/* Funktionen: zwei Zielgruppen */
.zwei{display:grid;gap:48px;margin-top:44px}
@media (min-width:860px){.zwei{grid-template-columns:1fr 1fr;gap:64px}}
.zwei h3{font-size:26px;padding-bottom:12px;border-bottom:2px solid var(--tinte)}
.liste{margin:0;padding:0}
.liste div{padding:16px 0;border-bottom:1px solid var(--linie)}
.liste dt{font-weight:600;font-size:18px}
.liste dd{margin:4px 0 0;color:var(--tinte2)}

/* Branchen */
.branchen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding:0;list-style:none}
.branchen a{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:999px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie);color:var(--tinte);text-decoration:none;font-weight:600;font-size:16px}
.branchen a:hover{box-shadow:inset 0 0 0 2px var(--tanne);color:var(--tinte)}
.branchen svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--mint);color:var(--tanne);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.branchen .apo svg{background:var(--tanne);color:#fff}
.demo-hinweis{margin-top:36px;font-weight:600}
.herkunft{margin-top:32px;padding-left:16px;border-left:4px solid var(--fuchs);color:var(--tinte2);max-width:40em}

/* Datenschutz */
.schutz{display:grid;gap:36px;align-items:start}
@media (min-width:860px){.schutz{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}}
.punkte{list-style:none;margin:0;padding:0}
.punkte li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linie)}
.punkte li:first-child{padding-top:0}
.punkte svg{width:24px;height:24px;margin-top:2px;fill:none;stroke:var(--tanne);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.punkte b{font-weight:600}
.punkte span{color:var(--tinte2)}

/* Preis-Band */
.preis{background:var(--tief);color:#E6F2EE;padding:64px 0}
.preis .wrap{display:grid;gap:24px;align-items:center}
@media (min-width:860px){.preis .wrap{grid-template-columns:1fr auto;gap:48px}}
.preis h2{color:#fff;font-size:clamp(30px,4.6vw,44px)}
.preis p{margin-top:12px;font-size:18px;max-width:36em}
.preis .btn.voll{background:var(--fuchs);color:#2B1404}
.preis .btn.voll:hover{background:#F08A3A;color:#2B1404}
.preis .btn.rand{border-color:#9FD0C3;color:#fff}
.preis .btn.rand:hover{background:rgba(255,255,255,.08);color:#fff}

/* Apotheken-Seite */
.apo-held{padding-bottom:56px}
@media (min-width:980px){.apo-held{padding-bottom:88px}}
.apo-held h1{max-width:14ch}
.kacheln{display:grid;gap:16px;margin-top:40px}
@media (min-width:700px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.kachel{padding:22px 22px 24px;border-radius:16px;background:var(--papier);box-shadow:inset 0 0 0 1px var(--linie2)}
.kachel h3{font-size:23px;padding-left:14px;border-left:4px solid var(--fuchs)}
.kachel p{margin-top:10px;color:var(--tinte2)}

/* Fußzeile */
.fuss{padding:40px 0 calc(env(safe-area-inset-bottom) + 40px);font-size:15.5px;color:var(--grau)}
.fuss .wrap{display:grid;gap:20px}
@media (min-width:860px){.fuss .wrap{grid-template-columns:1fr auto;align-items:start}}
.fuss .marke{font-size:20px}
.fuss .marke img{width:30px;height:30px;border-radius:8px}
.fuss p{margin-top:8px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:600}
.fuss nav a{color:var(--tinte2);text-decoration:none}
.fuss nav a:hover{color:var(--tanne)}

/* Hilfe-Seite */
.hilfe-kopf{padding:20px 0 36px}
.hilfe-kopf h1{font-size:clamp(40px,7vw,60px)}
.hilfe-kopf p{font-size:19px;color:var(--tinte2);margin-top:14px;max-width:36em}
.hilfe-raster{display:grid;gap:32px;padding-bottom:72px}
@media (min-width:940px){.hilfe-raster{grid-template-columns:240px minmax(0,1fr);gap:56px}}
.themen{font-size:16px}
.themen h2{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--grau);margin-bottom:8px}
.themen ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.themen a{display:block;text-decoration:none;color:var(--tinte2);font-weight:600;padding:7px 12px;border-radius:999px;background:var(--weiss);box-shadow:inset 0 0 0 1px var(--linie)}
.themen a:hover{color:var(--tanne);box-shadow:inset 0 0 0 1px var(--tanne)}
@media (min-width:940px){
  .themen{position:sticky;top:20px;align-self:start}
  .themen ul{display:block}
  .themen a{background:none;box-shadow:none;padding:6px 10px;border-radius:8px}
  .themen a:hover{background:var(--mint);box-shadow:none}
}
.thema{scroll-margin-top:16px;padding-top:8px}
.thema + .thema{margin-top:48px}
.thema > h2{font-size:clamp(28px,4vw,36px);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.thema > h2 .fuer{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--fuchs-text);background:var(--fuchs-soft);border-radius:999px;padding:3px 10px;letter-spacing:0}
.thema > p{color:var(--tinte2);margin-top:8px;max-width:40em}
.thema:target > h2{color:var(--tanne)}
.fragen{margin-top:16px;background:var(--weiss);border-radius:16px;box-shadow:0 0 0 1px var(--linie)}
.fragen details + details{border-top:1px solid var(--linie2)}
.fragen summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;font-weight:600;font-size:17.5px;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--grau);border-bottom:2px solid var(--grau);transform:rotate(45deg);transition:transform .15s}
.fragen details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.fragen summary:hover{color:var(--tanne)}
.antwort{padding:0 18px 18px;color:var(--tinte2);max-width:44em}
.antwort p + p,.antwort p + ol,.antwort p + ul,.antwort ol + p,.antwort ul + p{margin-top:10px}
.antwort ol,.antwort ul{margin:0;padding-left:22px}
.antwort li{margin:4px 0}
.antwort b{color:var(--tinte);font-weight:600}
.kontakt-box{margin-top:56px;padding:28px 24px;border-radius:18px;background:var(--mint)}
.kontakt-box h2{font-size:30px}
.kontakt-box p{margin-top:8px;color:var(--tinte2)}

@media print{.kopf nav,.themen,.aktion,.preis{display:none}.fragen details{break-inside:avoid}}