/* Clubkontor · v2.css — Fassung 2.0: eine Aussage, ein Bild, ein Satz. Liegt über stil.css, gleiche Schriften.
   Akzent in 2.0: Fairwaygrün statt Tinte, dieselbe Farbe wie die Balllinie (Andreas, 24.09.2026). */
body.v2{--tinte:#1B5E3A;--spur:#1B5E3A}
body.v2 .platzhalter{background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(27,94,58,.12) 5px 6px)}

/* Scorecard: Schläge als Bälle, die Schritte klappen auf */
.sc2 .auf{display:grid;grid-template-columns:auto 1fr;column-gap:.2rem;text-align:left;width:100%;cursor:pointer}
.sc2 .auf .loch-nr{grid-row:1/3}
.sc2 .auf:hover .aufgabe{color:var(--tinte)}
.striche{display:flex;gap:7px;flex-wrap:wrap}
.striche i{width:17px;height:17px;border-radius:50%;display:block}
.striche-ohne i{background:radial-gradient(circle at 35% 30%,#fff 0 30%,#d9dfd5 31% 100%);box-shadow:inset 0 0 0 1.5px rgba(15,31,25,.5)}
.striche-mit i{background:var(--tinte)}
.fruehjs .sc2 tbody tr:not(.offen) ol{display:none}
.sc2 tbody tr.offen ol{margin-top:.6rem}
.sc2 td{vertical-align:top}
.sc2 tbody .aufgabe::after{content:"  +";white-space:pre;color:var(--tinte)}
.sc2 tr.offen .aufgabe::after{content:"  –"}
.sc2 td{padding-right:1.2rem}
.sc2 .zeile{display:flex;align-items:center;gap:.9rem}
.sc2 .schlaege{position:static;min-width:1.3em}
.sc2 tbody th{width:30%}

/* Zitatband: Foto über die ganze Breite, der Satz auf ruhigem Grund */
.band{position:relative;margin:0;min-height:clamp(22rem,62vh,40rem);display:grid;align-items:end;overflow:hidden}
.band-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band-satz{position:relative;margin:0 var(--rand) clamp(2rem,6vw,5rem);max-width:30ch;background:var(--morgen);padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem)}
.band-satz p{font-family:var(--antiqua);font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem);line-height:1.15;letter-spacing:-.01em;font-variation-settings:"wght" 360;text-wrap:balance}
.band-satz::before{content:"";display:block;width:2.5rem;height:2px;background:var(--tinte);margin-bottom:1.1rem}

/* Ein Tag auf der Anlage: waagerechte Strecke, einrastend, ohne Scroll-Übernahme */
.tag{background:var(--morgen);padding-left:0;padding-right:0}
.tag .absatz{padding:0 var(--rand)}
.tag-rahmen{position:relative;margin-top:3rem}
.tag-strecke{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,30rem);gap:clamp(1.2rem,3vw,2.5rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 1.6rem;scroll-padding:0 var(--rand);scrollbar-width:thin;scrollbar-color:var(--linie-stark) transparent;outline-offset:-4px}
.tag-karte{scroll-snap-align:start;display:flex;flex-direction:column;gap:.8rem}
.tag-karte .uhr{font-family:var(--antiqua);font-size:clamp(2.4rem,1.8rem + 2vw,3.6rem);line-height:1;letter-spacing:-.02em;font-variation-settings:"wght" 330;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--linie-stark);padding-bottom:.6rem}
.tag-karte h3{font-size:1.45rem;margin-top:.4rem}
.tag-karte p{font-size:1rem;line-height:1.5}
.tag-karte .zum-loch{margin-top:auto;font-size:.85rem;color:var(--moos)}
.tag-karte .geraet{height:clamp(15rem,34vw,20rem)}
.tag-knoepfe{display:none;justify-content:flex-end;gap:.6rem;padding:0 var(--rand)}
.js .tag-knoepfe,.tag-knoepfe.an{display:flex}
.knopf.rund{width:2.8rem;height:2.8rem;padding:0;display:grid;place-items:center;font-size:1.1rem}
.knopf.rund:disabled{opacity:.3;cursor:default}

/* Geräte-Rahmen */
.geraet{margin:0;position:relative;overflow:hidden;background:var(--tau)}
.geraet a.gross{display:block;height:100%;cursor:zoom-in}
.geraet img{width:100%;height:100%;object-fit:cover;object-position:top}
.geraet.fenster{border:1px solid var(--linie-stark);border-radius:10px;padding-top:26px;background:#fff}
.geraet.fenster .leiste{position:absolute;top:0;left:0;right:0;height:26px;display:flex;gap:6px;align-items:center;padding-left:12px;border-bottom:1px solid var(--linie);background:var(--morgen)}
.geraet.fenster .leiste i{width:8px;height:8px;border-radius:50%;background:var(--linie-stark)}
.geraet.telefon{background:var(--tau);border-radius:10px;display:grid;place-items:center;padding:1rem 0}
.geraet.telefon a.gross{height:100%;aspect-ratio:9/19.5;border:6px solid var(--nadel);border-radius:26px;overflow:hidden;background:#fff}
.geraet.telefon img{object-fit:cover}

/* Nachtkarte */
.tag-karte.nacht .nacht-log{height:clamp(15rem,34vw,20rem);background:var(--nadel);color:#E3EBDD;border-radius:10px;padding:1.4rem 1.4rem;display:flex;align-items:flex-end;position:relative;overflow:hidden}
.nacht-log::before{content:"";position:absolute;right:1.4rem;top:1.2rem;width:10px;height:10px;border-radius:50%;background:#E3EBDD;box-shadow:-4px -3px 0 0 var(--nadel) inset}
.nacht-log ol{font-size:.88rem;line-height:1.5;display:grid;gap:.45rem}
.nacht-log time{color:#A8D8B6;font-variant-numeric:tabular-nums;margin-right:.5rem}
.js .nacht-log li{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i,0) * 350ms)}
.js .nacht-log.an li{opacity:1;transform:none}

/* Maschinenraum: neugierig machen, nichts verraten */
.maschinenraum{background:var(--morgen)}
.mr-blick{max-width:var(--mass);margin:3.5rem auto 0;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--linie-stark);aspect-ratio:16/9;background:#fff;cursor:crosshair;touch-action:pan-y}
.mr-bild{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.mr-bild.an{opacity:1}
.mr-schirm{position:absolute;inset:0}
.mr-schirm img{width:100%;height:100%;object-fit:cover;object-position:top left}
.mr-schirm.unscharf{filter:blur(7px) saturate(.5);opacity:.7}
.mr-schirm.scharf{--x:30%;--y:45%;--r:90px;-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 55%,transparent 100%);mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 55%,transparent 100%)}
.fruehjs:not(.js) .mr-schirm.scharf{display:none}
.mr-blick figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;justify-content:space-between;align-items:end;gap:1rem;pointer-events:none;z-index:2}
.mr-siegel{background:var(--nadel);color:var(--morgen);padding:.6rem 1.2rem;border-radius:999px;font-weight:600;font-size:.9rem;letter-spacing:.02em}
.mr-hinweis{background:rgba(245,246,242,.9);padding:.35rem .8rem;border-radius:999px;font-size:.82rem;color:var(--moos)}
@media (hover:none){.mr-hinweis{display:none!important}}
.mr-leiste{max-width:var(--mass);margin:1.2rem auto 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.mr-wahlen{display:none;gap:.5rem}
.js .mr-wahlen{display:flex}
.mr-wahl{border:1px solid var(--linie-stark);border-radius:999px;padding:.35rem .9rem;font-size:.9rem}
.mr-wahl[aria-pressed="true"]{background:var(--nadel);color:var(--morgen);border-color:var(--nadel)}
.mr-zahlen{display:flex;gap:2.2rem}
.mr-zahlen li{display:flex;align-items:baseline;gap:.5rem}
.mr-zahlen strong{font-family:var(--antiqua);font-weight:400;font-size:2.4rem;line-height:1;color:var(--tinte);font-variation-settings:"wght" 350}
.mr-zahlen span{font-size:.9rem;color:var(--moos)}
.mr-kacheln{max-width:var(--mass);margin:4rem auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linie-stark);border-left:1px solid var(--linie-stark)}
.mr-kacheln li{border-right:1px solid var(--linie-stark);border-bottom:1px solid var(--linie-stark)}
.mr-kacheln a,.mr-kacheln li>div{display:grid;gap:.4rem;padding:1.3rem 1.2rem 1.5rem;height:100%;text-decoration:none;transition:background .3s}
.mr-kacheln a:hover{background:var(--tau)}
.mr-kacheln a:hover h3{color:var(--tinte)}
.mr-nr{font-size:.75rem;letter-spacing:.14em;color:var(--moos);font-variant-numeric:tabular-nums}
.mr-kacheln h3{font-size:1.35rem}
.mr-kacheln p{font-size:.92rem;color:var(--moos);line-height:1.45}
.mr-wirkung{max-width:var(--mass);margin:3.5rem auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.mr-wirkung li{border-top:1px solid var(--nadel);padding-top:1rem}
.mr-wirkung h3{font-size:1.6rem;margin-bottom:.35rem}
.mr-wirkung p{color:var(--moos);font-size:1rem}
@media (max-width:980px){.mr-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.mr-wirkung{grid-template-columns:1fr}.mr-blick{aspect-ratio:4/3}.mr-zahlen{gap:1.4rem}}
@media (max-width:420px){.mr-kacheln{grid-template-columns:1fr}}

/* Übersetzung: gespeichert heißt übersetzt */
.ue{max-width:var(--mass);margin:4.5rem auto 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.ue h3{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);margin-bottom:1rem}
.ue-text p{text-wrap:pretty}
.ue-quelle{font-size:.82rem;color:var(--moos);margin-top:1rem}
.ue-liste{display:grid;border-top:1px solid var(--linie-stark)}
.ue-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--linie-stark)}
.ue-liste p{font-family:var(--antiqua);font-size:1.12rem;line-height:1.25;font-variation-settings:"wght" 370}
.ue-liste .en{color:var(--tinte)}
.pruef{display:flex;gap:4px}
.pruef i{width:9px;height:9px;border-radius:50%;background:var(--tinte)}
.js .ue-liste .pruef i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linie-stark);transition:background .25s,box-shadow .25s}
.js .ue-liste .en{opacity:0;transform:translateX(-6px);transition:opacity .5s,transform .5s}
.js .ue-liste li.p1 .pruef i:nth-child(1),.js .ue-liste li.p2 .pruef i:nth-child(-n+2),.js .ue-liste li.p3 .pruef i{background:var(--tinte);box-shadow:none}
.js .ue-liste li.fertig .en{opacity:1;transform:none}
@media (max-width:860px){.ue{grid-template-columns:1fr}}
@media (max-width:520px){.ue-liste li{grid-template-columns:1fr;gap:.4rem}}

/* KI: Fragen wie ein Gast, Zitate in KI-Antworten */
.ki{max-width:var(--mass);margin:3.5rem auto 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start;border-top:1px solid var(--nadel);padding-top:1.8rem}
.ki .zahl{font-family:var(--antiqua);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);line-height:1;letter-spacing:-.02em;font-variation-settings:"wght" 350;display:block;margin-bottom:.5rem}
.ki-kopf span{font-size:1rem;display:block;max-width:34em}
.ki-punkte{display:grid;grid-template-columns:repeat(20,1fr);gap:6px;max-width:30rem;margin:1.4rem 0}
.ki-punkte i{aspect-ratio:1;border-radius:50%}
.ki-punkte i.gut{background:var(--tinte)}
.ki-punkte i.offen{box-shadow:inset 0 0 0 1.5px var(--tinte)}
.ki-offen-kopf{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moos);margin-bottom:.6rem}
.ki-offen{display:flex;flex-wrap:wrap;gap:.5rem}
.ki-offen li{border:1px dashed var(--tinte);border-radius:999px;padding:.3rem .9rem;font-size:.92rem}
.ki-zitiert{background:var(--nadel);color:var(--morgen);border-radius:6px;padding:1.5rem}
.ki-zitiert span{display:block;font-size:1rem}
.ki-zitiert .quelle{display:block;opacity:.7;margin-top:.8rem}
@media (max-width:860px){.ki{grid-template-columns:1fr}}

/* Systemkarte 2.0: Bild und Link in der Erklärung */
.karte-erkl .sys-bild{grid-column:1/-1;display:block;max-width:26rem;border:1px solid var(--linie-stark);border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:16/9}
.karte-erkl .sys-bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.karte-erkl .sys-bild img.hoch{object-fit:contain}
.karte-erkl .sys-mehr{display:inline-block;margin-top:.6rem;color:var(--tinte);font-weight:600;text-decoration:none;border-bottom:1px solid var(--tinte)}
.karte-text .systeme .sys-bild{display:none}
.karte-text .sys-mehr{font-size:.9rem;color:var(--tinte)}
.bahnen-auf{margin-top:2rem}
.bahnen-auf summary{cursor:pointer;font-size:.9rem;color:var(--moos)}
.bahnen-auf .bahnen-liste{margin-top:1rem}

/* SEO: Rundlauf, Leaderboard, Linie */
.seo{background:var(--tau)}
.seo-innen{max-width:var(--mass);margin:3.5rem auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.rundlauf{display:grid;gap:0;counter-reset:rl;position:relative}
.rundlauf li{display:grid;grid-template-columns:3rem 1fr;column-gap:1rem;padding:1.1rem 0;border-top:1px solid var(--linie-stark)}
.rundlauf li:last-child{border-bottom:1px solid var(--linie-stark)}
.rundlauf .rl-nr,.schrittfolge .rl-nr{grid-row:1/3;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid var(--tinte);color:var(--tinte);display:grid;place-items:center;font-family:var(--antiqua);font-size:1.2rem}
.rundlauf h3{font-size:1.45rem}
.rundlauf p{font-size:.98rem;color:var(--moos);margin-top:.2rem}
.rundlauf li:last-child .rl-nr::after{content:"↺";position:absolute;margin-top:3.4rem;color:var(--tinte);font-size:1.2rem}
.leaderboard{margin:0;background:var(--nadel);color:var(--morgen);border-radius:6px;padding:1.4rem 1.4rem 1.2rem;font-variant-numeric:tabular-nums}
.leaderboard figcaption{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(245,246,242,.3);padding-bottom:.8rem;margin-bottom:.4rem;gap:1rem}
.lb-titel{font-family:var(--antiqua);font-size:1.6rem;letter-spacing:.01em}
.lb-wer{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.leaderboard table{width:100%;border-collapse:collapse;font-size:.98rem}
.leaderboard th{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:left;opacity:.6;padding:.5rem 0}
.leaderboard td{padding:.42rem 0;border-bottom:1px solid rgba(245,246,242,.12)}
.leaderboard td.pos{width:3.6rem;font-family:var(--antiqua);font-size:1.25rem}
.leaderboard tr:not(.drunter):not(.cut) td.pos{color:#fff}
.leaderboard tr.drunter{opacity:.62}
.leaderboard tr.cut td{border:0;padding:.7rem 0 .3rem}
.leaderboard tr.cut span{display:flex;align-items:center;gap:.8rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#A8D8B6}
.leaderboard tr.cut span::before,.leaderboard tr.cut span::after{content:"";flex:1;border-top:1px dashed #A8D8B6}
.lb-fuss{font-size:.85rem;opacity:.7;margin-top:.9rem}
.seo-mess{max-width:var(--mass);margin:3.5rem auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.seo-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.seo-zahlen.senkrecht{grid-template-columns:1fr;margin-bottom:2rem}
.seo-zahlen li{display:grid;gap:.3rem;border-top:1px solid var(--nadel);padding-top:.9rem}
.seo-zahlen .zahl{font-family:var(--antiqua);font-weight:400;font-size:clamp(2rem,1.5rem + 1.8vw,3rem);line-height:1;letter-spacing:-.02em;font-variation-settings:"wght" 350}
.seo-zahlen .was{font-size:.95rem}
.seo-zahlen .quelle{color:var(--moos)}
.seo-linie{margin:0}
.seo-linie svg{width:100%;overflow:visible}
.seo-linie .grund{stroke:var(--linie-stark);stroke-width:1;fill:none}
.seo-linie .linie{stroke:var(--tinte);stroke-width:2.2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.seo-linie circle{fill:var(--tinte)}
.seo-linie text{font-size:11px;fill:var(--moos);font-family:var(--grotesk)}
.seo-linie figcaption{font-size:.85rem;color:var(--moos);margin-top:.4rem}
.js .seo-linie .linie{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.6,.2,1)}
.js .seo-linie.an .linie{stroke-dashoffset:0}
.seo-quelle{max-width:var(--mass);margin:1.8rem auto 0;font-size:.8rem;color:var(--moos)}
.seo .weiter{max-width:var(--mass);margin:2rem auto 0}
.seo .knopf,.loch-seite .knopf{text-decoration:none;display:inline-block}
@media (max-width:860px){.seo-innen,.seo-mess{grid-template-columns:1fr}}
@media (max-width:560px){.seo-zahlen{grid-template-columns:1fr}}

/* Nachzählen kompakt */
.nachzaehlen-huelle{padding:clamp(3rem,6vw,5rem) var(--rand) 0}
.panel-kurz{margin-top:0}

/* Preis */
.preis{max-width:var(--mass);margin:3rem auto 0;border-top:1px solid var(--nadel)}
.preis-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);gap:1rem 2.5rem;align-items:baseline;padding:1.3rem 0;border-bottom:1px solid var(--linie-stark)}
.preis-was{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moos)}
.preis strong{font-family:var(--antiqua);font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,3.4rem);line-height:1;letter-spacing:-.02em;font-variation-settings:"wght" 350;font-variant-numeric:tabular-nums}
.preis-zeile.haupt strong{font-size:clamp(2.8rem,1.8rem + 3.5vw,5rem);color:var(--tinte)}
.preis-wie{color:var(--moos);font-size:.98rem}
.preis .quelle{display:block;margin-top:.8rem;color:var(--moos)}
@media (max-width:700px){.preis-zeile{grid-template-columns:1fr;gap:.4rem}}

/* Seite je Loch */
.loch-seite section{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.loch-kopf{padding-top:calc(clamp(2.6rem,2rem + 1.6vw,3.8rem) + 6rem)!important;max-width:calc(var(--mass) + 2*var(--rand));margin:0 auto}
.loch-kopf h1{font-size:clamp(2.6rem,1.6rem + 5vw,6rem);max-width:14em}
.brotkrumen{font-size:.85rem;color:var(--moos);margin-bottom:2rem}
.brotkrumen a{color:var(--moos)}
.loch-bild{margin:0 auto;max-width:calc(var(--mass) + 2*var(--rand));padding:0 var(--rand)}
.loch-bild .geraet{height:clamp(18rem,45vw,34rem)}
.loch-bild.foto img{width:100%;height:clamp(16rem,40vw,30rem);object-fit:cover}
.loch-inhalt{max-width:calc(var(--mass) + 2*var(--rand));margin:0 auto;display:grid;gap:3.5rem}
.loch-station,.loch-werk{max-width:44rem}
.loch-station h2,.loch-werk h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);margin-bottom:1rem}
.loch-station p,.loch-werk p{text-wrap:pretty}
.loch-inhalt .merksatz{font-family:var(--antiqua);font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);line-height:1.25;margin-top:1.4rem;padding-left:1.2rem;border-left:2px solid var(--tinte);font-variation-settings:"wght" 350}
.loch-werk .link{margin-top:1rem}
.fluesse{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2rem;border-top:1px solid var(--nadel);padding-top:1.6rem}
.fluesse h3{font-family:var(--grotesk);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moos);margin-bottom:.8rem}
.fluesse li{display:grid;gap:.1rem;padding:.6rem 0;border-bottom:1px solid var(--linie)}
.fluesse a{font-family:var(--antiqua);font-size:1.25rem;text-decoration:none}
.fluesse a:hover{color:var(--tinte)}
.fluesse span{font-size:.9rem;color:var(--moos)}
.schrittfolge{display:grid;gap:0}
.schrittfolge li{display:grid;grid-template-columns:3.4rem 1fr;padding:1.4rem 0;border-top:1px solid var(--linie-stark);max-width:48rem}
.schrittfolge h3{font-size:1.6rem;margin-bottom:.4rem}
.loch-weiter{max-width:calc(var(--mass) + 2*var(--rand));margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;border-top:1px solid var(--linie-stark);padding-top:1.6rem}
.loch-weiter a{text-decoration:none;font-family:var(--antiqua);font-size:1.3rem;display:grid}
.loch-weiter small{font-family:var(--grotesk);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moos)}
.loch-weiter .nach{text-align:right}
.loch-weiter .karte-link{font-family:var(--grotesk);font-size:.9rem;border-bottom:1px solid var(--linie-stark)}
.loch-kontakt{background:var(--tau);margin-top:4rem;text-align:left}
.loch-kontakt h2{max-width:var(--mass);margin:0 auto;font-size:clamp(1.8rem,1.3rem + 2vw,3rem)}
.loch-kontakt .mail{max-width:var(--mass);margin:1rem auto 0}
@media (max-width:600px){.loch-weiter{grid-template-columns:1fr 1fr}.loch-weiter .karte-link{grid-column:1/-1;grid-row:2;justify-self:center}}

@media (max-width:760px){.sc2 td{padding-right:0}.sc2 .schlaege{position:static}}

/* Newsletter-Studio: Galerie, Können, Zustellbarkeit */
.newsletter{background:var(--tau)}
.nl-galerie{max-width:var(--mass);margin:3.5rem auto 0;display:grid}
.nl-bild{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.nl-bild.an{opacity:1;visibility:visible}
.fruehjs:not(.js) .nl-bild{opacity:1;visibility:visible;grid-area:auto;margin-bottom:2rem}
.nl-bild .geraet{aspect-ratio:16/10;height:auto}
.nl-bild figcaption{font-size:.95rem;color:var(--moos);margin-top:.8rem}
.nl-wahl{max-width:var(--mass);margin:1rem auto 0;display:none;gap:.5rem;flex-wrap:wrap}
.js .nl-wahl{display:flex}
.nl-unten{max-width:var(--mass);margin:3.5rem auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem)}
.nl-h{font-family:var(--grotesk);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moos);margin-bottom:1rem}
.nl-koennen{display:flex;flex-wrap:wrap;gap:.5rem}
.nl-koennen li{border:1px solid var(--linie-stark);border-radius:999px;padding:.3rem .9rem;font-size:.92rem;background:var(--morgen)}
.nl-zahl{margin-top:2rem;display:grid;gap:.2rem}
.nl-zahl strong{font-family:var(--antiqua);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);line-height:1;color:var(--tinte);font-variation-settings:"wght" 350}
.nl-zahl .quelle{color:var(--moos)}
.nl-ankommen{background:var(--nadel);color:var(--morgen);border-radius:6px;padding:1.5rem}
.nl-ankommen .nl-h{color:rgba(245,246,242,.7)}
.nl-ankommen ul{display:grid;gap:.9rem;margin-bottom:1.2rem}
.nl-ankommen li{display:grid;grid-template-columns:5rem 1fr;gap:.8rem;align-items:baseline;border-bottom:1px solid rgba(245,246,242,.15);padding-bottom:.8rem}
.nl-ankommen strong{font-family:var(--antiqua);font-weight:400;font-size:1.5rem;color:#A8D8B6;letter-spacing:.02em}
.nl-ankommen p{font-size:.95rem;opacity:.85}
.newsletter-einbau{display:grid}
@media (max-width:860px){.nl-unten{grid-template-columns:1fr}}

/* Mitgliedskonto: drei Quellen, ein Konto */
.konto{max-width:var(--mass);margin:4.5rem auto 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.konto h3{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);margin-bottom:1rem}
.konto-text p{text-wrap:pretty}
.konto-bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3.4rem;align-items:center}
.konto-quellen{display:grid;gap:.8rem}
.konto-quellen li{border:1px solid var(--linie-stark);border-radius:8px;padding:.7rem .9rem;display:grid;gap:.15rem;background:#fff}
.konto-quellen strong{font-family:var(--antiqua);font-weight:400;font-size:1.15rem;font-variation-settings:"wght" 380}
.konto-quellen span{font-size:.82rem;color:var(--moos)}
.konto-fluss{display:none}
.konto-quellen li{position:relative}
.konto-quellen li::after{content:"";position:absolute;left:calc(100% + .4rem);top:50%;width:2.2rem;height:2px;background:var(--tinte);transform-origin:left}
.konto-quellen li::before{content:"";position:absolute;left:calc(100% + 2.35rem);top:calc(50% - 4px);border:5px solid transparent;border-left:7px solid var(--tinte);border-right:0}
.js .konto-quellen li::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.js .konto-quellen li::before{opacity:0;transition:opacity .3s .6s}
.js .konto.an .konto-quellen li::after{transform:none}
.js .konto.an .konto-quellen li::before{opacity:1}
.js .konto.an .konto-quellen li:nth-child(2)::after{transition-delay:.15s}
.js .konto.an .konto-quellen li:nth-child(3)::after{transition-delay:.3s}
.konto-karte{background:var(--nadel);color:var(--morgen);border-radius:10px;padding:1.2rem 1.3rem}
.konto-kopf{display:flex;align-items:center;gap:.7rem;font-family:var(--antiqua);font-size:1.35rem;padding-bottom:.8rem;margin-bottom:.4rem;border-bottom:1px solid rgba(245,246,242,.2)}
.konto-kreis{width:2rem;height:2rem;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(245,246,242,.85) 0 26%,transparent 27%),radial-gradient(circle at 50% 100%,rgba(245,246,242,.85) 0 45%,transparent 46%);box-shadow:inset 0 0 0 1.5px rgba(245,246,242,.5)}
.konto-karte li{display:flex;align-items:center;gap:.6rem;padding:.42rem 0;font-size:.92rem;border-bottom:1px solid rgba(245,246,242,.1)}
.konto-karte li:last-child{border-bottom:0}
.konto-karte li i{width:8px;height:8px;border-radius:50%;background:#A8D8B6;flex:none}
@media (max-width:860px){.konto{grid-template-columns:1fr}}
@media (max-width:520px){.konto-bild{grid-template-columns:1fr}.konto-quellen li::after,.konto-quellen li::before{display:none}.konto-karte{margin-top:1rem}}

/* Preisrechner: drei Modelle, Laufzeit und Folgeaufträge einstellen */
.rechner{max-width:var(--mass);margin:3rem auto 0}
.rk-regler{display:none;grid-template-columns:minmax(0,1fr);gap:.6rem 3rem;align-items:center;border-top:1px solid var(--nadel);padding-top:1.4rem}
.js .rk-regler{display:grid}
.rk-regler label{grid-row:1;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moos);display:flex;justify-content:space-between;align-items:baseline}
.rk-regler output{font-family:var(--antiqua);font-size:1.6rem;letter-spacing:0;text-transform:none;color:var(--nadel);font-weight:400;font-variant-numeric:tabular-nums}
.rk-regler input{grid-row:2;width:100%;accent-color:var(--tinte);height:2rem}
.rk-modelle{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2rem}
.js .rk-modelle{display:grid}
.rk-modell{border:1px solid var(--linie-stark);border-radius:10px;padding:1.3rem 1.3rem 1.2rem;display:grid;gap:.4rem;align-content:start;transition:border-color .3s,background .3s,color .3s;background:#fff}
.rk-name{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moos)}
.rk-name small{margin-left:.5rem;font-size:.7rem;border:1px solid currentColor;border-radius:999px;padding:.05rem .5rem;letter-spacing:.08em}
.rk-summe output{font-family:var(--antiqua);font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"wght" 350;font-variant-numeric:tabular-nums}
.rk-satz{font-size:.92rem;color:var(--moos)}
.rk-guenstig{visibility:hidden;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte);margin-top:.3rem}
.rk-modell.bester{border-color:var(--tinte);box-shadow:inset 0 0 0 1px var(--tinte)}
.rk-modell.bester .rk-summe output{color:var(--tinte)}
.rk-modell.bester .rk-guenstig{visibility:visible}
.rk-kurve{display:none;margin:2rem 0 0}
.js .rk-kurve{display:block}
.rk-kurve svg{width:100%;overflow:visible}
.rk-achsen line{stroke:var(--linie);stroke-width:1}
.rk-achsen text{font-size:10px;fill:var(--moos);font-family:var(--grotesk)}
.rk-linien path{fill:none;stroke-width:2.2;stroke-linejoin:round}
.rk-linien .l-fest,.rk-leg .l-fest{stroke:var(--tinte);background:var(--tinte)}
.rk-linien .l-kauf,.rk-leg .l-kauf{stroke:var(--nadel);stroke-dasharray:7 5;background:repeating-linear-gradient(90deg,var(--nadel) 0 5px,transparent 5px 8px)}
.rk-linien .l-miete,.rk-leg .l-miete{stroke:var(--moos);stroke-dasharray:2 4;background:repeating-linear-gradient(90deg,var(--moos) 0 2px,transparent 2px 5px)}
.rk-linien .jetzt{stroke:var(--linie-stark);stroke-width:1;stroke-dasharray:3 3}
.rk-kurve figcaption{font-size:.85rem;color:var(--moos);margin-top:.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.rk-leg{display:flex;gap:.9rem;align-items:center}
.rk-leg i{display:inline-block;width:22px;height:2px;margin-right:.35rem;vertical-align:middle}
.rk-matrix{width:100%;border-collapse:collapse;margin-top:3rem;font-size:.95rem}
.rk-matrix th,.rk-matrix td{text-align:left;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
.rk-matrix thead th{font-family:var(--antiqua);font-weight:400;font-size:1.4rem;border-bottom:1px solid var(--nadel)}
.rk-matrix thead th small{display:block;font-family:var(--grotesk);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte)}
.rk-matrix tbody th{font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--moos);width:24%}
.rk-matrix tr.summe th,.rk-matrix tr.summe td{border-bottom:1px solid var(--nadel)}
.rk-matrix tr.summe strong{font-family:var(--antiqua);font-weight:400;font-size:1.3rem}
.rk-fuss{font-size:.88rem;color:var(--moos);margin-top:1.2rem;max-width:46em}
@media (max-width:760px){.rk-modelle{grid-template-columns:1fr}.rk-regler{grid-template-columns:1fr}.rk-regler label,.rk-regler input{grid-row:auto}
  .rk-matrix{font-size:.85rem}.rk-matrix thead th{font-size:1.1rem}.rk-matrix th,.rk-matrix td{padding-right:.5rem}}

/* In jedem Modell inklusive */
.inklusive{max-width:var(--mass);margin:3rem auto 0;background:var(--nadel);color:var(--morgen);border-radius:12px;padding:clamp(1.6rem,3vw,2.6rem)}
.ink-kopf{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A8D8B6;margin-bottom:1.6rem}
.inklusive ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.inklusive li{border-top:1px solid rgba(245,246,242,.25);padding-top:1rem;display:grid;gap:.35rem;align-content:start}
.inklusive strong{font-family:var(--antiqua);font-weight:400;font-size:clamp(3rem,2rem + 3vw,4.6rem);line-height:1;letter-spacing:-.03em;font-variation-settings:"wght" 330;color:#fff}
.inklusive h3{font-size:1.35rem;color:#fff}
.inklusive p{font-size:.92rem;opacity:.8;text-wrap:pretty}
.rk-matrix tbody td{text-wrap:pretty}
@media (max-width:980px){.inklusive ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.inklusive ol{grid-template-columns:1fr}}

/* Was der Preis umfasst */
.umfang{max-width:var(--mass);margin:1.5rem auto 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem}
.umfang>div{border:1px solid var(--linie-stark);border-radius:12px;padding:1.5rem 1.6rem}
.umfang h3{font-size:1.6rem;margin-bottom:.4rem}
.umfang p{font-size:.92rem;color:var(--moos);margin-bottom:1rem}
.umfang-drin ul{display:flex;flex-wrap:wrap;gap:.5rem}
.umfang-drin li a{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--nadel);border-radius:999px;padding:.35rem .95rem;font-size:.95rem;text-decoration:none}
.umfang-drin li a::before{content:"✓";color:var(--tinte);font-weight:600}
.umfang-drin li a:hover{border-color:var(--tinte);color:var(--tinte)}
.umfang-dazu{border-style:dashed!important}
.umfang-dazu li{display:grid;gap:.1rem;padding:.6rem 0;border-top:1px solid var(--linie)}
.umfang-dazu li a{font-family:var(--antiqua);font-size:1.2rem;text-decoration:none}
.umfang-dazu li a::before{content:"+ ";color:var(--tinte)}
.umfang-dazu li span{font-size:.88rem;color:var(--moos)}
@media (max-width:860px){.umfang{grid-template-columns:1fr}}
.rk-ref{grid-column:1/-1;grid-row:3!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:1rem;padding:.8rem 1rem;border:1px dashed var(--tinte);border-radius:10px;text-transform:none!important;letter-spacing:0!important;font-size:1rem!important;color:var(--nadel)!important;cursor:pointer;justify-content:flex-start!important}
.rk-ref input{width:1.2rem;height:1.2rem;accent-color:var(--tinte);grid-row:auto;margin:0}
.rk-ref span{font-weight:600}
.rk-ref small{color:var(--moos);font-weight:400}
@media (max-width:760px){.rk-ref{grid-row:auto!important}}

/* Recht und Datenschutz */
.recht{background:var(--morgen);padding-top:clamp(3.5rem,7vw,6rem)}
.recht-liste{max-width:var(--mass);margin:3rem auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.5rem}
.recht-liste li{border-top:1px solid var(--nadel);padding-top:1rem;display:grid;gap:.4rem;align-content:start}
.recht-liste strong{font-family:var(--antiqua);font-weight:400;font-size:1.6rem;color:var(--tinte);font-variation-settings:"wght" 380}
.recht-liste p{font-size:.95rem;color:var(--moos)}
@media (max-width:860px){.recht-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.recht-liste{grid-template-columns:1fr}}
.rk-bezug{font-size:.82rem;color:var(--moos);margin-top:-.1rem}
.rk-modell.gebunden .rk-bezug{color:var(--tinte);font-weight:600}
.rk-linien .punkt{stroke:var(--morgen);stroke-width:2;transition:cx .25s,cy .25s}
.rk-linien .p-fest{fill:var(--tinte)}.rk-linien .p-kauf{fill:var(--nadel)}.rk-linien .p-miete{fill:var(--moos)}
.rk-linien .jetzt{transition:x1 .25s,x2 .25s}
.rk-regler input[type=range]{cursor:grab}
.rk-regler input[type=range]:active{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.rk-linien .punkt,.rk-linien .jetzt{transition:none}}
.umfang-dazu li{grid-template-columns:minmax(0,1fr) auto;column-gap:1rem}
.umfang-dazu li span{grid-column:1/-1}
.dazu-preis{font-family:var(--antiqua);font-weight:400;font-size:1.2rem;color:var(--tinte);white-space:nowrap;font-variant-numeric:tabular-nums}
.umfang-satz{font-family:var(--antiqua);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)!important;line-height:1.2;color:var(--nadel)!important;margin:1.4rem 0 0!important;font-variation-settings:"wght" 380}
.umfang-rest{margin:1rem 0 0!important;padding-top:.8rem;border-top:1px solid var(--linie);color:var(--nadel)!important}

/* Maildesigner: Leinwand wie im Ablauf-Baukasten – Punktraster, Karten mit getöntem Kopf, gestrichelte Verbindungen */
.maildesigner{background:var(--morgen)}
.md-leinwand{max-width:var(--mass);margin:3rem auto 0;border:1px solid var(--linie-stark);border-radius:12px;overflow:hidden;background:#FBFBF7}
.md-kopfleiste{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--linie);background:#fff}
.md-titel{font-weight:600;font-size:.95rem;border:1px solid var(--linie-stark);border-radius:8px;padding:.35rem .7rem}
.md-status{font-size:.8rem;background:var(--tau);border-radius:999px;padding:.2rem .7rem;color:var(--tinte);font-weight:600}
.md-flaeche{overflow-x:auto;background-image:radial-gradient(circle,rgba(15,31,25,.16) 1px,transparent 1.2px);background-size:16px 16px;padding:1rem .8rem}
.md-flaeche svg{display:block;width:100%;min-width:860px;height:auto}
.md-karte{fill:#fff;stroke:rgba(15,31,25,.22);stroke-width:1}
.md-kopf{fill:#EEEEE9}
.md-auslöser .md-kopf,.md-auslöser .md-kopf{fill:#E3EEDF}
.md-ausloeser .md-kopf{fill:#E3EEDF}.md-filter .md-kopf{fill:#E4EAF2}.md-weiche .md-kopf{fill:#ECE7F1}
.md-freigabe .md-kopf{fill:#F5EED8}.md-mail .md-kopf{fill:#E6EFE3}
.md-ausloeser .md-karte,.md-filter .md-karte,.md-weiche .md-karte,.md-mail .md-karte,.md-freigabe .md-karte{stroke:rgba(27,94,58,.55);stroke-width:1.4}
.md-typ{font-family:var(--grotesk);font-size:9.5px;font-weight:600;letter-spacing:.12em;fill:var(--moos)}
.md-zeile{font-family:var(--grotesk);font-size:11.5px;fill:var(--moos)}
.md-zeile.fett{fill:var(--nadel);font-weight:600}
.md-port{fill:#fff;stroke:rgba(15,31,25,.4);stroke-width:1}
.md-kante{fill:none;stroke:var(--tinte);stroke-width:1.6;stroke-dasharray:5 4;opacity:.75}
.md-etikett{font-family:var(--grotesk);font-size:10px;fill:var(--moos)}
.md-punkte circle{fill:var(--tinte);stroke:#fff;stroke-width:2}
.md-knoten.puls .md-karte{stroke:var(--tinte);stroke-width:2.4}
/* Aufbau: Knoten erscheinen der Reihe nach, Kanten zeichnen sich */
.js .maildesigner .md-knoten{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--i) * 90ms)}
.js .maildesigner .md-kante{stroke-dashoffset:60;opacity:0;transition:opacity .5s;transition-delay:calc(var(--i) * 90ms + 200ms)}
.js .maildesigner.an .md-knoten{opacity:1;transform:none}
.js .maildesigner.an .md-kante{opacity:.75;animation:md-fluss 1.4s linear infinite}
@keyframes md-fluss{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){.js .maildesigner .md-knoten,.js .maildesigner .md-kante{opacity:1;transform:none;transition:none;animation:none}}
.md-unten{max-width:var(--mass);margin:2.5rem auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem)}
.md-satz{font-family:var(--antiqua);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.2;margin-top:1.4rem;font-variation-settings:"wght" 380}
@media (max-width:860px){.md-unten{grid-template-columns:1fr}}
.loch-seite .maildesigner.einbau{padding:0;background:none}
.loch-seite .maildesigner.einbau .absatz{display:none}
.md-pcc{font-family:var(--grotesk);font-size:8px;font-weight:600;letter-spacing:.08em;fill:var(--tinte)}
.md-pcc-liste li{border-color:var(--tinte);color:var(--tinte);font-weight:600}
.md-h2{margin-top:1.6rem}

/* Maildesigner: Bausteinleiste rechts, gezogener Baustein */
.md-leinwand{position:relative}
.md-innen{display:grid;grid-template-columns:minmax(0,1fr) 13.5rem}
.md-palette{border-left:1px solid var(--linie);background:#fff;padding:1rem .9rem}
.md-pal-kopf{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moos)}
.md-pal-titel{font-weight:600;font-size:1rem;margin:.1rem 0 .6rem}
.md-pal-hinweis{font-size:.78rem;color:var(--moos);line-height:1.4;margin-bottom:.8rem}
.md-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.md-kacheln li{display:flex;align-items:center;gap:.45rem;border:1px solid var(--linie-stark);border-radius:8px;padding:.45rem .5rem;font-size:.82rem;background:#fff;cursor:grab;transition:background .2s,border-color .2s,transform .2s}
.md-kacheln li.gegriffen{background:var(--tau);border-color:var(--tinte);transform:scale(.96)}
.md-zeichen{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border:1px solid var(--linie-stark);border-radius:5px;font-size:.72rem;color:var(--nadel);flex:none}
.md-geist{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:3;will-change:transform}
.md-geist.an{opacity:1}
.md-geist-kachel{display:flex;align-items:center;gap:.45rem;border:1.5px solid var(--tinte);border-radius:8px;padding:.45rem .6rem;font-size:.82rem;background:#fff;box-shadow:0 12px 22px -10px rgba(15,31,25,.45);white-space:nowrap}
.md-zeiger{position:absolute;right:-14px;bottom:-16px;width:26px;height:26px;fill:#fff;stroke:var(--nadel);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.js .maildesigner .md-neu{opacity:0!important;transform:scale(.9)!important;transform-origin:center;transform-box:fill-box}
.js .maildesigner .md-neu.da{opacity:1!important;transform:none!important;transition:opacity .35s,transform .35s!important}
.js .maildesigner path.md-neu.da{opacity:.75!important}
.js .maildesigner .md-etikett[data-neu]{opacity:0;transition:opacity .4s}
.js .maildesigner .md-etikett[data-neu].da{opacity:1}
@media (prefers-reduced-motion:reduce){.js .maildesigner .md-neu,.js .maildesigner .md-etikett[data-neu]{opacity:1!important;transform:none!important}}
@media (max-width:900px){.md-innen{grid-template-columns:1fr}.md-palette{border-left:0;border-top:1px solid var(--linie)}.md-kacheln{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.md-kacheln{grid-template-columns:repeat(2,1fr)}}
/* Leinwand breiter als das Textmaß, rechts eine Gasse für Balllinie und Ball */
@media (min-width:1000px){.md-leinwand{max-width:none;margin-left:0;margin-right:70px}}
.md-zeile{font-size:12px}
.md-typ{font-size:10px}
.md-etikett{font-size:11px}

/* Sprungmenü: steht unter der Kopflinie, heftet sich beim Scrollen oben an und zeigt die aktuelle Station */
.menue{position:absolute;left:0;right:0;top:calc(clamp(2.75rem,2.1rem + 1.7vw,4rem) + 2.9rem);z-index:20;display:flex;align-items:center;gap:1rem;padding:.55rem var(--rand);transition:background .3s,box-shadow .3s,transform .3s}
.menue ol{display:flex;gap:.2rem 1.4rem;margin:0 auto;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:.1rem 0}
.menue ol::-webkit-scrollbar{display:none}
.menue a{text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--moos);padding:.3rem 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.menue a:hover{color:var(--nadel)}
.menue a[aria-current="true"]{color:var(--tinte);border-bottom-color:var(--tinte)}
.menue-marke{display:none;flex:none;line-height:0}
.menue-marke svg{height:1.6rem;width:auto;overflow:visible}
.menue.fest{position:fixed;top:0;background:rgba(245,246,242,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--linie-stark)}
.menue.fest .menue-marke{display:block}
.menue.fest ol{margin:0 0 0 auto}
body.v2 main > section,body.v2 #nachzaehlen{scroll-margin-top:3.6rem}
@media (max-width:900px){.menue{padding:.5rem 16px}.menue ol{margin:0}.menue.fest .menue-marke{display:none}}
@media (max-width:480px){.menue{top:calc(clamp(2.75rem,2.1rem + 1.7vw,4rem) + 5.4rem)}}

/* Maildesigner: Reiter, Beispiele, Rabattschalter und Mailvorschau */
.md-kopfleiste{flex-wrap:wrap}
.md-reiter{border:1px solid var(--linie-stark);border-radius:8px;padding:.35rem .8rem;font-size:.9rem;font-weight:600;color:var(--moos);background:#fff}
.md-reiter.an{border-color:var(--nadel);color:var(--nadel);box-shadow:inset 0 -2px 0 var(--tinte)}
.md-bsp{display:none}
.md-bsp.an{display:block}
.fruehjs:not(.js) .md-bsp{display:block;margin-bottom:1rem}
.md-bsp .md-status{display:inline-block;margin:0 0 .6rem .2rem}
.md-code,.md-code-absatz{transition:opacity .35s}
.maildesigner:not(.mit-code) .md-code,.maildesigner:not(.mit-code) .md-code-absatz{opacity:0}
.maildesigner:not(.mit-code) .md-code-absatz{height:0;margin:0;overflow:hidden}
.md-code{fill:var(--tinte);font-weight:600}
.md-extra{display:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:start;padding:1.1rem 1.2rem 1.3rem;border-top:1px solid var(--linie);background:#fff}
.maildesigner[data-bsp="ecart"] .md-extra{display:grid}
.md-schalter{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;position:relative}
.md-schalter input{position:absolute;opacity:0;width:2.6rem;height:1.5rem;margin:0;cursor:pointer}
.md-schalter-bahn{flex:none;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--linie-stark);position:relative;transition:background .25s}
.md-schalter-bahn::after{content:"";position:absolute;left:3px;top:3px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s}
.md-schalter input:checked + .md-schalter-bahn{background:var(--tinte)}
.md-schalter input:checked + .md-schalter-bahn::after{transform:translateX(1.1rem)}
.md-schalter input:focus-visible + .md-schalter-bahn{outline:2px solid var(--tinte);outline-offset:3px}
.md-schalter small{display:block;color:var(--moos);font-size:.85rem;margin-top:.15rem}
.md-vorschau{border:1px solid var(--linie-stark);border-radius:10px;padding:1rem 1.2rem;font-size:.92rem;display:grid;gap:.5rem;background:var(--morgen)}
.md-v-kopf{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moos)}
.md-v-betreff{font-weight:600;font-size:1rem;border-bottom:1px solid var(--linie);padding-bottom:.5rem}
.md-code-absatz{background:#fff;border:1px dashed var(--tinte);border-radius:8px;padding:.6rem .8rem}
@media (max-width:860px){.md-extra{grid-template-columns:1fr}}

/* Kulisse: der Kernsatz der Seite, an der Schwelle zwischen Website und Backend */
.kulisse{position:relative;overflow:hidden;background:var(--nadel);color:var(--morgen);padding:clamp(6rem,14vw,11rem) var(--rand)}
.kulisse-bild{position:absolute;inset:-4%;opacity:.22;filter:blur(6px) saturate(.4)}
.kulisse-bild img{width:100%;height:100%;object-fit:cover;object-position:top left}
.kulisse::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(15,31,25,.2),rgba(15,31,25,.85) 75%)}
.kulisse-text{position:relative;z-index:1;max-width:var(--mass);margin:0 auto}
.kulisse h2{font-size:clamp(2.2rem,1.3rem + 3.8vw,5rem);line-height:1.05;letter-spacing:-.02em;max-width:16em;color:#fff;font-variation-settings:"wght" 340;text-wrap:balance}
.kulisse-link{display:inline-flex;gap:.5rem;align-items:center;margin-top:2.4rem;color:#A8D8B6;text-decoration:none;font-weight:600;letter-spacing:.04em;border-bottom:1px solid currentColor;padding-bottom:.15rem}
.kulisse-link:hover{color:#fff}
.js .kulisse h2{opacity:0;transform:translateY(18px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .kulisse.sichtbar h2{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .kulisse h2{opacity:1;transform:none;transition:none}}

/* Neue Ordnung: Anrisse (Bild + Satz + Link), PC CADDIE, Referenz */
.anriss-innen{max-width:var(--mass);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.anriss-bild{margin:0}
.anriss-bild .geraet{aspect-ratio:16/10;height:auto}
.anriss-ank{display:grid;gap:.4rem;margin-top:1.4rem;font-size:.95rem;color:var(--moos)}
.anriss-ank strong{display:inline-block;min-width:4.2rem;font-family:var(--antiqua);font-weight:400;font-size:1.15rem;color:var(--tinte)}
.anriss .weiter,.pccaddie .weiter,.referenz .weiter,.seo .weiter{margin-top:1.8rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.nebenlink{font-size:.95rem;color:var(--tinte)}
.seo.anriss{background:var(--morgen)}
.seo-quer{max-width:var(--mass);margin:2.8rem auto 0}
.seo-quer .rundlauf{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.seo-quer .rundlauf li{grid-template-columns:1fr;border-bottom:0;row-gap:.5rem;border-top:1px solid var(--nadel)}
.seo-quer .rundlauf .rl-nr{grid-row:auto;margin-top:.2rem}
.seo-quer .rundlauf li:last-child .rl-nr::after{content:none}
.seo.anriss .weiter{max-width:var(--mass);margin-left:auto;margin-right:auto}
.pccaddie{background:var(--tau)}
.pcc-liste{max-width:var(--mass);margin:2.4rem auto 0}
.pccaddie .konto{margin-top:3.5rem}
.pccaddie .weiter{max-width:var(--mass);margin-left:auto;margin-right:auto}
.referenz{background:var(--tau)}
.referenz-google{background:var(--tau)}
.referenz-google .seo-mess{margin-top:2.5rem}
.referenz-google .seo-innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.referenz-google .ki{grid-template-columns:1fr;margin-top:0;border-top:0;padding-top:0}
@media (max-width:860px){.anriss-innen{grid-template-columns:1fr}.seo-quer .rundlauf{grid-template-columns:repeat(2,minmax(0,1fr))}.referenz-google .seo-innen{grid-template-columns:1fr}}
@media (max-width:520px){.seo-quer .rundlauf{grid-template-columns:1fr}}

/* Kürzer: niedrigere Bänder, Tabelle zum Aufklappen, Nachzählen in einer Zeile */
.band{min-height:clamp(16rem,44vh,28rem)}
.rk-tabelle{margin-top:2.4rem;border-top:1px solid var(--linie-stark);padding-top:1rem}
.rk-tabelle summary{cursor:pointer;font-weight:600;color:var(--tinte);font-size:.95rem}
.rk-tabelle .rk-matrix{margin-top:1.2rem}
.panel-kurz{grid-template-columns:auto 1fr auto;align-items:center;gap:1rem 2.5rem;padding-top:1.6rem}
.panel-kurz h3{grid-column:auto;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.panel-kurz .messung{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;grid-column:auto!important;margin:0}
.panel-kurz .p-zeile{display:flex;gap:.5rem;align-items:baseline;border:0;padding:0}
.panel-kurz .p-zeile dt{font-size:.85rem;color:var(--moos)}
.panel-kurz .p-zeile dd{font-size:1.4rem;margin:0}
.panel-kurz>p,.panel-kurz .p-host,.panel-kurz .bedeutung{grid-column:1/-1!important}
.panel-kurz>p:has(.knopf){grid-column:auto!important;grid-row:1}
.panel-kurz .bedeutung{font-size:.9rem;margin:0}
@media (max-width:860px){.panel-kurz{grid-template-columns:1fr}.panel-kurz>p:has(.knopf){grid-row:auto}}
.menue ol{min-width:0;max-width:100%}
.mr-zahlen{flex-wrap:wrap}@media (max-width:420px){.mr-zahlen{gap:.4rem 1.1rem}.mr-zahlen strong{font-size:1.9rem}}

/* Scorecard: vier Monate zeigen, der Rest klappt auf; die Bilanz steht immer da */
.js .sc2:not(.alle) tbody tr.spaeter{display:none}
.sc-mehr{max-width:var(--mass);margin:1.2rem auto 0;display:none}
.js .sc-mehr{display:block}
.js .sc2:not(.alle) tbody tr:nth-child(4){border-bottom:1px dashed var(--linie-stark)}

/* Ton und Sprache bleiben stehen: bei angeheftetem Menü sitzen sie rechts in der Leiste */
.menue-fest .kopf .kopf-rechts{position:fixed;top:0;right:var(--rand);height:2.95rem;z-index:21;display:flex;align-items:center;gap:1.2rem;font-size:.85rem}
.menue-fest .menue.fest ol{margin-right:10.5rem}
@media (max-width:900px){.menue-fest .kopf .kopf-rechts{right:16px;gap:.8rem;font-size:.8rem;background:rgba(245,246,242,.94);padding-left:.6rem}.menue-fest .menue.fest ol{margin-right:8.5rem}}
.menue-fest .kopf{z-index:22}
/* Loch-Seiten: Platz für das Menü unter der Kopflinie */
.loch-seite .loch-kopf{padding-top:calc(clamp(2.6rem,2rem + 1.6vw,3.8rem) + 9rem)!important}

/* Magnetischer Strich: ein Element, zwei Kanten mit eigener Feder (vorn straff, hinten weich) */
.menue ol{position:relative}
.menue a[aria-current="true"]{border-bottom-color:transparent}
.js .menue a{border-bottom-color:transparent!important;display:inline-block;will-change:transform}
.menue-strich{position:absolute;left:0;bottom:.05rem;height:2px;width:1px;background:var(--tinte);border-radius:2px;transform-origin:left;pointer-events:none;opacity:0;transition:opacity .3s}
.menue-strich.an{opacity:1}

/* Leistungsseite: Paket, Module, Matrix je Bereich */
.leistungsseite .ls-uebersicht{max-width:calc(var(--mass) + 2*var(--rand));margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:2rem;align-items:start}
.ls-paket{background:var(--nadel);color:var(--morgen);border-radius:12px;padding:1.6rem}
.ls-paket-preis{font-family:var(--antiqua);font-size:1.3rem;margin:.2rem 0 .8rem}
.ls-paket-preis strong{font-weight:400;font-size:clamp(2.6rem,2rem + 2vw,3.6rem);color:#fff}
.ls-paket p{font-size:.95rem;opacity:.9}
.ls-paket a{color:#A8D8B6}
.ls-betrieb-kopf{margin-top:1.4rem}
.ls-paket ul{display:grid;gap:.35rem;font-size:.9rem}
.ls-paket li::before{content:"✓ ";color:#A8D8B6}
.ls-module h2,.ls-bereich h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);margin-bottom:.8rem}
.ls-tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.ls-tabelle th,.ls-tabelle td{text-align:left;vertical-align:top;padding:.7rem 1rem .7rem 0;border-bottom:1px solid var(--linie)}
.ls-tabelle thead th{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moos);border-bottom:1px solid var(--nadel)}
.ls-tabelle tbody th{font-weight:600;width:26%}
.ls-tabelle tbody th small{display:block;font-weight:400;color:var(--moos);font-size:.82rem}
.ls-tabelle tbody th a{text-decoration:none}
.ls-tabelle td:nth-child(2){color:var(--moos)}
.ls-preis,.ls-art strong{font-family:var(--antiqua);font-size:1.15rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.ls-art{width:22%;white-space:nowrap}
.ls-art span{display:block;font-size:.78rem;color:var(--moos)}
.ls-art.paket strong{color:var(--tinte)}
.ls-art.modul strong{color:var(--nadel)}
.ls-art.modul span{color:var(--tinte);font-weight:600}
.ls-filter{max-width:var(--mass);margin:3rem auto 0;padding:0 var(--rand);display:none;gap:.5rem;box-sizing:content-box}
.js .ls-filter{display:flex}
.ls-bereiche{max-width:var(--mass);margin:0 auto;padding:0 var(--rand);box-sizing:content-box}
.ls-bereich{padding:2.4rem 0 0!important}
.ls-bereiche.nur-paket tr[data-art="modul"],.ls-bereiche.nur-modul tr[data-art="paket"]{display:none}
.ls-fuss{max-width:var(--mass);margin:2.4rem auto 0;padding:0 var(--rand);box-sizing:content-box;font-size:.88rem;color:var(--moos)}
.umfang-alle{margin-top:1.2rem}
.dazu-kurz li{display:flex!important;justify-content:space-between;gap:1rem;padding:.45rem 0!important}
@media (max-width:860px){.leistungsseite .ls-uebersicht{grid-template-columns:1fr}}
@media (max-width:640px){.ls-tabelle thead{display:none}.ls-tabelle tr{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--linie)}.ls-tabelle th,.ls-tabelle td{border:0;padding:0;width:auto!important}.ls-tabelle td:nth-child(2){grid-column:1/-1;grid-row:2}.ls-art{text-align:right}}
@media (max-width:640px){.ls-art{white-space:normal}.ls-art span{white-space:normal}.ls-tabelle tr{grid-template-columns:minmax(0,1fr) auto}.ls-module .ls-tabelle td:nth-child(2){grid-column:1/-1}}
.ls-filter{flex-wrap:wrap;box-sizing:border-box;padding:0 16px}