/* Regeln und Herleitung: DESIGN.md */
@font-face{font-family:"Gabarito";src:url("fonts/gabarito-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Gabarito";src:url("fonts/gabarito-latin-900-normal.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --gruen:#008D36;--gruen-tief:#00682A;
  --papier:#F6F7F2;--papier-tief:#E8EBE3;
  --tinte:#14231A;--tinte-weich:#46544B;
  --zettel:#FFDB33;
  --radius:3px;
  --rand:clamp(16px,4.4vw,64px);
  --breit:1440px;
  --kopf:"Gabarito","Trebuchet MS",sans-serif;
  --text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
}

/* Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.125rem/1.55 var(--text);overflow-x:clip;overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--kopf);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2rem,1.3rem + 3vw,3.75rem);line-height:1.04}
h3{font-size:1.5rem;line-height:1.15}
h4{font-size:1.375rem;line-height:1.2;letter-spacing:-.015em}
p{text-wrap:pretty}
a{color:var(--gruen-tief);text-underline-offset:.15em;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,104,42,.2)}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.flaeche-gruen :focus-visible,.kopf-band :focus-visible,.hero :focus-visible{outline-color:#fff}
.huelle{width:100%;max-width:var(--breit);margin-inline:auto;padding-inline:var(--rand)}
.huelle>*,.huelle>*>*{min-width:0}
.sprung{position:absolute;left:-999px;top:8px;background:#fff;color:var(--tinte);padding:12px 16px;z-index:10;border-radius:var(--radius)}
.sprung:focus{left:16px}
.sprung-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sektion{padding-block:clamp(64px,8vw,128px)}
.flaeche-tief{background:var(--papier-tief)}
.flaeche-gruen{background:var(--gruen);color:#fff}
.funktion{scroll-margin-top:24px}
.funktion p{margin-top:6px;max-width:34em}
.funktion .offen{margin-top:14px;max-width:min(25rem,95%)}

/* Knopf und Handlung */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 26px;border-radius:var(--radius);font:800 1.1875rem/1.1 var(--kopf);letter-spacing:-.005em;text-align:center;text-decoration:none;background:var(--papier);color:var(--gruen-tief);transition:transform .1s}
.knopf:hover{background:#fff}
.knopf:active{transform:translateY(1px)}
.handlung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:28px}
.adresse{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:1.1875rem}
.adresse:hover{text-decoration-thickness:2px}
.hero .adresse,.flaeche-gruen .adresse{color:#fff}

/* Kopf */
.kopf-band{background:var(--gruen);color:#fff}
.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:20px}
.marke{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-height:44px;margin-right:auto}
.marke:hover .marke-wort{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.marke-zeichen{flex:none;width:44px;height:44px}
.marke-wort{font:800 1.75rem/1 var(--kopf);letter-spacing:-.02em}
.kopf nav ul{display:flex;flex-wrap:wrap;gap:4px 28px}
.kopf nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:#fff;font:800 1.1875rem/1 var(--kopf);text-decoration:none}
.kopf nav a:hover{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px}
@media (max-width:1023px){.kopf>.knopf{display:none}}

/* Hero: Kopfzeile, Text und die App. Die Buehne ragt aus dem Gruen in das Papier */
.hero{background:var(--papier)}
.hero-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px clamp(32px,5vw,80px);padding-block:clamp(16px,2.5vw,32px) clamp(32px,3.6vw,52px)}
.hero>.hero-kopf{max-width:none;padding-inline:max(var(--rand),calc((100% - var(--breit))/2 + var(--rand)));background:var(--gruen);color:#fff}
h1{flex:7 1 34rem;font-size:clamp(2.25rem,.5rem + 4.6vw,5rem);font-weight:900;line-height:1.02;letter-spacing:-.025em}
.hero-seite{flex:5 1 22rem}
.hero-unter{font:400 1.5rem/1.32 var(--text);max-width:27em}
.hero .handlung{margin-top:20px}
.folge{flex-basis:100%;max-width:32em}
.am-stueck{white-space:nowrap}
.hero .folge,.flaeche-gruen .folge{font-size:1.1875rem;font-weight:700;line-height:1.35}
.buehne-band{background:linear-gradient(var(--gruen) 0 46%,var(--papier) 46%)}
.hinweis{padding-top:18px;font-size:.9375rem;color:var(--tinte-weich)}
@media (prefers-reduced-motion:no-preference){
  .buehne>*{animation:auftritt .5s cubic-bezier(.2,.8,.25,1) both}
  .buehne>.handy{animation-delay:.12s}
  @keyframes auftritt{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* Rahmen um die App-Bilder: nur CSS */
.fenster{overflow:hidden;background:#fff;border:1px solid rgba(20,35,26,.14);border-radius:10px;box-shadow:0 2px 4px rgba(0,50,20,.08),0 22px 48px -18px rgba(0,50,20,.32)}
.fenster-voll::before{--p:radial-gradient(circle closest-side,#B7BCB2 92%,transparent);content:"";display:block;height:clamp(14px,1.7vw,24px);background:var(--p) 10px 50%/7px 7px no-repeat,var(--p) 22px 50%/7px 7px no-repeat,var(--p) 34px 50%/7px 7px no-repeat,#E9EBE4;border-bottom:1px solid rgba(20,35,26,.1)}
.handy{padding:clamp(4px,.55vw,7px);background:var(--tinte);border-radius:clamp(20px,2.4vw,34px);box-shadow:0 3px 6px rgba(0,50,20,.16),0 26px 44px -16px rgba(0,50,20,.45)}
.handy-allein{max-width:300px;justify-self:center}
.handy img{border-radius:clamp(16px,1.95vw,27px)}
.paar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.paar>.fenster{grid-area:1/1/2/11}
.paar>.handy{grid-area:1/10/2/13;margin-top:14%;z-index:1;justify-self:end;width:100%}
.paar>.fenster{margin-right:7%}
@media (min-width:1300px){.buehne>.fenster{margin-right:4%}}
.buehne>.handy{max-width:300px;margin-top:9%}

/* Register unter dem Hero */
.register{background:var(--papier)}
.register ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 clamp(16px,2vw,32px);padding-block:10px}
.register a{display:inline-flex;align-items:center;min-height:52px;min-width:44px;color:var(--tinte);font:800 clamp(1.125rem,.8rem + .75vw,1.4375rem)/1 var(--kopf);letter-spacing:-.015em;text-decoration:none}
.register a:hover{color:var(--gruen-tief);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
@media (max-width:1023px){.register ul{justify-content:flex-start}}
@media (max-width:640px){
  .register ul{gap:0 14px;padding-block:6px}
  .register a{min-height:48px}
}

/* Abgrenzung */
.abgrenzung{padding-block:clamp(48px,6vw,88px)}
.abgrenzung-raster{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,5vw,80px);align-items:end}
.nicht-kopf{font-weight:600}
.nicht-liste{margin-top:4px;color:var(--tinte-weich)}
.nicht-liste li{text-decoration:line-through;text-decoration-color:var(--gruen);text-decoration-thickness:2px}
.nicht-schluss{margin-top:12px;font:800 1.5rem/1.15 var(--kopf);letter-spacing:-.015em;color:var(--gruen-tief)}

/* Drei Kernvorteile: jeder in eigener Form, keine Karten. Danach folgt Bereiche auf derselben Flaeche, nur ein Abstand */
.sektion.kern{padding-bottom:0}
.kern-kopf{max-width:17em}
.vorteil{display:grid;gap:clamp(24px,4vw,64px);margin-top:clamp(48px,6vw,96px)}
.vorteil h3{font-size:clamp(1.75rem,1.2rem + 2vw,3rem);line-height:1.06}
.vorteil-text p{margin-top:16px;font-size:1.25rem;line-height:1.45;max-width:30em}
.vorteil-a{grid-template-columns:minmax(0,1fr)}
.vorteil-b{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.vorteil-c{grid-template-columns:minmax(0,1fr)}
.vorteil-a .vorteil-text,.vorteil-c .vorteil-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px clamp(24px,4vw,64px);align-items:end}
.vorteil-a .vorteil-text p,.vorteil-c .vorteil-text p{margin-top:0}

/* Zweiter Start: ein gruenes Band hinter den Pflichten, einspaltig */
.start-gruen{padding-block:clamp(48px,6vw,96px)}
.start-gruen h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem)}

/* Bereiche: jede Gruppe hat ihre eigene Form */
.bereiche-kopf{max-width:17em}
.gruppe{display:grid;grid-template-columns:8fr 4fr;gap:clamp(32px,4.5vw,72px);align-items:center;margin-top:clamp(48px,6vw,96px)}
.gruppe-b{grid-template-columns:4fr 8fr}
.gruppe h3{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.08}
.gruppe ul{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}

/* Alles in diesem Bereich */
.alles{margin-top:clamp(32px,4vw,48px);border-block:2px solid var(--tinte)}
.alles>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding-block:12px;font:800 1.25rem/1.15 var(--kopf);letter-spacing:-.01em;cursor:pointer;list-style:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,104,42,.2)}
.alles>summary::-webkit-details-marker{display:none}
.alles>summary::before{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat,linear-gradient(currentColor,currentColor) center/3px 100% no-repeat}
.alles[open]>summary::before{background:linear-gradient(currentColor,currentColor) center/100% 3px no-repeat}
.alles>summary:hover{color:var(--gruen-tief)}
.alles-inhalt{columns:2 22rem;column-gap:clamp(32px,5vw,80px);padding-block:8px 16px}
.alles-inhalt>div{break-inside:avoid;padding-bottom:24px}
.alles-kopf{font:800 1.25rem/1.2 var(--kopf);letter-spacing:-.01em}
.alles-inhalt li{margin-top:8px;max-width:36em}

/* Offene Punkte: gelber Zettel */
.offen{background:var(--zettel);color:var(--tinte);padding:16px 24px;max-width:min(25rem,100%);font-size:1rem;line-height:1.42;rotate:-1.2deg;box-shadow:5px 7px 0 rgba(0,40,15,.24)}
.offen strong{display:block;margin-bottom:2px;font:800 1.25rem/1.2 var(--kopf);letter-spacing:-.01em}

/* Pflichten */
.pflichten-kopf p{margin-top:16px;font-size:1.25rem;max-width:32em}
.pflichten-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.pflichten-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px}
.pflichten-kopf .funktion p{margin-top:6px;font-size:1.125rem}
#pflichten .funktion h3{font-size:1.375rem;line-height:1.2;letter-spacing:-.015em}

/* Leitung */
.leitung-kopf{max-width:14em}
.leitung-liste{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:32px clamp(24px,3vw,48px)}
.leitung-liste .funktion{padding-top:14px;border-top:2px solid var(--tinte)}
.leitung-liste .funktion:last-child{grid-column:1/-1}
.gruppe-v{grid-template-columns:7fr 5fr;align-items:center}
.verbund h3{font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem);line-height:1.04}
.verbund-unter{margin-top:12px;font-size:1.375rem;line-height:1.3;max-width:26em}

/* Ihre Praxis */
.anpassen{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center}
.anpassen p{margin-top:20px;max-width:32em}
.farben{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:16px 8px;margin-top:28px}
.farben li{font-size:1rem;line-height:1.25}
.farben span{display:block;height:44px;margin-bottom:6px;background:var(--f)}

/* Wie wir mit Ihren Daten umgehen */
.betrieb{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,80px)}
.betrieb dl>div{display:grid;grid-template-columns:2fr 3fr;gap:8px clamp(24px,4vw,64px);padding-block:22px;border-top:2px solid var(--tinte)}
.betrieb dl>div>*{min-width:0}
.betrieb dl>div:last-child{border-bottom:2px solid var(--tinte)}
.betrieb dt{font:800 1.375rem/1.2 var(--kopf);letter-spacing:-.015em}
.zettel-reihe{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}
.zettel-reihe .offen{flex:1 1 16rem}
.zettel-reihe .offen:nth-child(2){rotate:1deg;flex:0 1 auto}
.zettel-reihe .offen:nth-child(3){rotate:-.6deg}

/* Preise */
.preis-raster{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.preis-unter{margin-top:16px;font-size:1.25rem}
.preis-zettel{display:grid;gap:32px;justify-items:end;margin-top:8px}
.preis-zettel .offen:nth-child(2){rotate:.9deg}
.preise{width:100%;max-width:46rem;margin-top:clamp(24px,3vw,40px);border-collapse:collapse;text-align:left}
.preise th,.preise td{padding-block:clamp(12px,1.4vw,20px);border-top:2px solid var(--tinte);font-weight:400;vertical-align:baseline}
.preise tbody tr:last-child>*{border-bottom:2px solid var(--tinte)}
.preise thead th{padding:0;border:0}
.preis-groesse{width:4.5rem;font:900 clamp(2.25rem,1.6rem + 2vw,3.5rem)/1 var(--kopf)}
.preise th.preis-groesse{font-weight:900}
.preis-betrag span{font:900 clamp(2.25rem,1.6rem + 2vw,3.5rem)/1 var(--kopf);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;border-bottom:4px dashed var(--tinte-weich)}
.preis-betrag small{font-size:1rem;margin-left:4px;white-space:nowrap}
.preis-leute{font-size:1.25rem;padding-left:16px}
.preis-mehr{margin-top:20px;font-size:1.25rem;font-weight:600}

/* So starten Sie */
.abschluss{padding-block:clamp(64px,8vw,120px)}
.abschluss-raster{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:start}
.ablauf{counter-reset:s}
.ablauf li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6em;align-items:baseline;padding-block:14px;border-top:2px solid #fff;font:800 clamp(1.75rem,1.4rem + 1.5vw,2.75rem)/1.1 var(--kopf);letter-spacing:-.015em}
.ablauf li:last-child{border-bottom:2px solid #fff}
.ablauf li::before{content:"0" counter(s);flex:none;font-variant-numeric:tabular-nums}

/* Fuss */
.fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-block:28px}
.fuss ul{display:flex;flex-wrap:wrap;gap:0 28px}
.fuss ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--tinte);font-weight:600}
.fuss ul a:hover{color:var(--gruen-tief);text-decoration-thickness:2px}

.abschluss .folge{margin-top:24px}
.wer{margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,32px);border-top:2px solid #fff}
.wer-namen{font:800 1.75rem/1.1 var(--kopf);letter-spacing:-.015em}
.wer .folge{margin-top:8px}
.wer .offen{margin-top:24px}
.absender{margin-left:auto;font-size:1rem;color:var(--tinte-weich)}

/* Rechtsseiten */
.recht{padding-block:clamp(48px,6vw,96px);min-height:50vh}
.recht h1{color:var(--tinte);font-size:clamp(2.25rem,1.6rem + 3vw,3.75rem);font-weight:800}
.recht h2{max-width:46rem;margin-top:32px;font-size:clamp(1.5rem,1.2rem + 1vw,1.75rem);line-height:1.2}
.recht p{max-width:46rem;margin-top:16px}
.recht a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
.recht a:hover{text-decoration-thickness:2px}

/* Schmale Breiten */
@media (max-width:1023px){
  .abgrenzung-raster,.gruppe,.gruppe-b,.gruppe-v,.anpassen,.betrieb,.abschluss-raster,.preis-raster,.vorteil-b,.vorteil-a .vorteil-text,.vorteil-c .vorteil-text,.pflichten-raster{grid-template-columns:minmax(0,1fr)}
  .vorteil-b .vorteil-text{order:-1}
  .gruppe .gruppe-text{order:-1}
  .preis-zettel{justify-items:start}
}
@media (max-width:640px){
  .sektion{padding-block:48px}
  .abgrenzung{padding-block:40px}
  .vorteil,.gruppe{margin-top:32px}
  .abschluss{padding-block:48px}
  .alles{margin-top:16px}
  .farben{grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr))}
  .farben li{font-size:.875rem}
  .paar>.fenster,.buehne>.fenster{grid-area:1/1/2/13;margin-right:0}
  .paar>.handy,.buehne>.handy{grid-area:2/5/3/13;margin-top:16px;max-width:none}
  .fenster-voll::before{display:none}
  .nur-breit{display:none}
  .handy-allein{width:168px;justify-self:end}
  .paar:not(.buehne)>.handy{width:168px}
  .offen,.zettel-reihe .offen:nth-child(n),.preis-zettel .offen:nth-child(n){rotate:none}
  .buehne-band{background:linear-gradient(var(--gruen) 0 24%,var(--papier) 24%)}
  .absender{margin-left:0;width:100%}
  .betrieb dl>div{grid-template-columns:1fr}
  .kopf nav ul{gap:4px 16px}
  .preise,.preise tbody{display:block}
  .preise tr{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:4px 8px;padding-block:14px;border-top:2px solid var(--tinte)}
  .preise tbody tr:last-child{border-bottom:2px solid var(--tinte)}
  .preise th,.preise td,.preise tbody tr:last-child>*{display:block;border:0;padding:0;width:auto}
  .preis-groesse{grid-row:1 / span 2}
  .preis-betrag,.preis-leute{grid-column:2}
}