/* RSM Connect: Taghimmel. Regeln und Begründungen stehen in .claude/DESIGN.md */

@font-face{font-family:"Lexend";src:url("fonts/lexend-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-italic-var.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Saira";src:url("fonts/saira-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url("fonts/permanent-marker-400.woff2") format("woff2");font-display:swap}

:root{
  color-scheme:light;
  /* Himmel */
  --ink:#0f2b3d; --body:#33505f; --mute:#4c6a7a;
  --cloud:#fff; --card:rgba(255,255,255,.8);
  /* Eigene Karten 80 % deckend. In einer Karte liegende Flächen 50 % mit kräftigerer Farbe: gleicher Farbton, die Taube bleibt sichtbar. */
  --card-mist:rgba(238,247,253,.8); --card-green:rgba(228,246,236,.8);
  --in-mist:rgba(221,239,251,.5); --in-green:rgba(201,237,217,.5); --in-warn:rgba(255,233,191,.5);
  --mist:#eef7fd; --line:#d5e6f0; --line2:#a9c6d6;
  --sky-1:#58aee8; --sky-2:#8ccbf3; --sky-3:#c6e6fa;
  /* Wiese: der einzige Akzent */
  --green:#0f8450; --green-ink:#0b6e42; --green-lit:#2fbf77; --green-soft:#e4f6ec; --green-deep:#0a4f31;
  /* feste Bedeutung */
  --warn:#8a5200; --warn-soft:#fff4df; --alert:#b92f20;
  /* Nachthimmel: nur für GIGABIT FABRIK */
  --night:#05090b; --night-2:#0b1417; --fiber:#1fd0e3; --chalk:#f1f6f7;

  --f-word:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-head:"Newsreader",Georgia,"Times New Roman",serif;
  --f-gf:"Saira",var(--f-word);
  --f-brush:"Permanent Marker","Segoe Print",cursive;

  --max:1200px;
  --gutter:clamp(16px,4vw,48px);
  --hdr-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cloud);color:var(--body);font:300 1.0625rem/1.6 var(--f-word);overflow-wrap:break-word}
[hidden]{display:none!important}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
address{font-style:normal}
a{color:var(--green-ink);text-underline-offset:.16em}
a:hover{color:var(--green)}
b,strong{font-weight:600;color:var(--ink)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.night :focus-visible{outline-color:var(--fiber)}

.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:60}
.skip:focus{top:10px;color:#fff}

/* ---------- Schrift ---------- */
h1,h2{font-family:var(--f-head);font-style:italic;font-weight:500;color:var(--ink);letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.6rem,5vw,4.3rem);line-height:1.02}
h2{font-size:clamp(2.2rem,4.8vw,3.7rem);line-height:1.04}
h2 em{font-style:inherit;color:var(--green-ink)}
h3{font-weight:600;font-size:1.2rem;line-height:1.3;color:var(--ink)}
h4{font-weight:600;font-size:1.05rem;line-height:1.3;color:var(--ink)}
.label{display:block;font-weight:600;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--green-ink);margin-bottom:.8rem}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;color:var(--ink);max-width:38em;margin-top:1.1rem}
.note{font-size:.875rem;line-height:1.55;color:var(--mute);max-width:60em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;padding:.6rem 1.25rem;border:2px solid var(--green);border-radius:999px;background:var(--green);color:#fff;font:500 1rem/1.2 var(--f-word);text-decoration:none;text-align:center;cursor:pointer;transition:transform .15s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px);background:var(--green-ink);border-color:var(--green-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--green-ink)}
.btn.ghost:hover{background:var(--green);border-color:var(--green);color:#fff}
.btn.to-night{background:var(--night);border-color:var(--night);color:var(--chalk)}
.btn.to-night:hover{background:var(--night-2);border-color:var(--fiber);color:var(--chalk)}
.btn[disabled]{opacity:.55;cursor:wait;transform:none}

/* ---------- Kopf ---------- */
.mast{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,43,61,.1)}
.mast .wrap{display:flex;align-items:center;gap:1.4rem;min-height:68px;flex-wrap:wrap;padding-block:.5rem}
.brand{display:block;flex:none;line-height:0}
.brand img{height:25px;width:auto;display:block}
.nav{display:flex;gap:.2rem;margin-left:auto}
.nav a{display:block;padding:.45rem .7rem;font-size:.92rem;font-weight:400;color:var(--ink);text-decoration:none;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--mist);color:var(--ink)}
.nav a.active{background:var(--green-soft);color:var(--green-ink);font-weight:500}
.mast .btn{min-height:40px;padding:.35rem 1rem;font-size:.92rem}
.gf-name{font-family:var(--f-gf);font-weight:800;letter-spacing:.015em;font-style:normal;white-space:nowrap}

@media (max-width:1040px){
  .mast .wrap{gap:.3rem .8rem;padding-block:.55rem .35rem}
  .mast .btn{margin-left:auto}
  .navbox{order:3;width:calc(100% + 2*var(--gutter));margin-inline:calc(-1*var(--gutter));overflow-x:auto;scrollbar-width:none;padding-inline:calc(var(--gutter) - .5rem)}
  .navbox::-webkit-scrollbar{display:none}
  .nav{margin:0;width:max-content}
  .nav a{font-size:.875rem;padding:.4rem .65rem}
}
@media (min-width:1041px){.navbox{margin-left:auto}}
@media (max-width:440px){.brand img{height:20px}.mast .btn{padding:.3rem .75rem;font-size:.8rem}}

/* ---------- Wolken ---------- */
.clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cl{position:absolute;display:block;height:auto;overflow:visible;animation:drift var(--t,160s) linear infinite alternate}
@keyframes drift{from{transform:translateX(calc(var(--dx,50px)*-1))}to{transform:translateX(var(--dx,50px))}}

/* Wolkenkante zwischen zwei Abschnitten. --from: Fläche darüber, --to: Fläche darunter */
.bank{position:relative;height:clamp(64px,9vw,128px);background:var(--from,transparent);overflow:hidden}
.bank::before,.bank::after{content:"";position:absolute;inset:0;background:var(--to,#fff);-webkit-mask:var(--tile) repeat-x left bottom/auto 100%;mask:var(--tile) repeat-x left bottom/auto 100%}
.bank::before{opacity:.55;-webkit-mask-position:-310px bottom;mask-position:-310px bottom}
.bank::after{inset:24% 0 0}
.bank{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 130' width='800' height='130'%3E%3Cg%3E%3Ccircle cx='0' cy='102' r='56'/%3E%3Ccircle cx='800' cy='102' r='56'/%3E%3Ccircle cx='92' cy='86' r='50'/%3E%3Ccircle cx='172' cy='72' r='62'/%3E%3Ccircle cx='262' cy='96' r='44'/%3E%3Ccircle cx='342' cy='76' r='58'/%3E%3Ccircle cx='432' cy='100' r='42'/%3E%3Ccircle cx='512' cy='72' r='66'/%3E%3Ccircle cx='602' cy='94' r='48'/%3E%3Ccircle cx='682' cy='80' r='56'/%3E%3Ccircle cx='752' cy='102' r='42'/%3E%3Crect y='100' width='800' height='30'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 42%,var(--sky-3) 78%,#e4f3fc 100%);isolation:isolate}
.hero .inner{position:relative;display:grid;grid-template-columns:1.06fr .94fr;grid-template-areas:"copy portal" "doors portal";gap:clamp(20px,3vw,32px) clamp(28px,5vw,72px);padding-block:clamp(30px,4vw,56px) clamp(6px,1vw,12px);align-items:start}
.hero .copy{grid-area:copy}
.pill{display:inline-block;background:var(--cloud);color:var(--green-ink);font-weight:600;font-size:.82rem;letter-spacing:.03em;padding:.3rem .85rem;border-radius:999px;margin-bottom:1.1rem}
.hero h1 .gf-name{display:block;font-size:.8em;line-height:1.15;letter-spacing:-.005em;color:var(--night);margin-top:.12em}
.hero .lead{margin-top:1.3rem}

.doors{grid-area:doors;display:grid;gap:.6rem;max-width:34rem}
.door{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.15rem;background:var(--card);border:2px solid transparent;border-radius:16px;color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s,background .15s}
.door:hover{transform:translateY(-2px);border-color:var(--green);background:#fff;color:var(--ink)}
.door b{display:block;font-weight:600;line-height:1.3}
.door small{display:block;font-size:.875rem;line-height:1.35;color:var(--mute)}
.door i{flex:none;font-style:normal;font-size:1.25rem;color:var(--green-ink)}

/* Fenster in den Nachthimmel */
.hc1{width:150px;left:max(-70px,calc(50% - 900px));top:4%;opacity:.9;--dx:40px;--t:150s}
.hc2{width:130px;left:calc(50% - 90px);top:2%;opacity:.75;--dx:24px;--t:190s}
.hc3{width:300px;left:max(-150px,calc(50% - 980px));top:64%;opacity:.7;--dx:50px;--t:170s}
.hc4{width:260px;right:-4%;top:70%;opacity:.85;--dx:50px;--t:140s}
@media (max-width:860px){.hc1,.hc2{display:none}}
.portal-frame{grid-area:portal;position:relative;align-self:center;margin-block:clamp(10px,2vw,24px)}
.night{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,#0e2a32 0,var(--night-2) 42%,var(--night) 100%);color:var(--chalk);border-radius:clamp(28px,4vw,44px);padding:clamp(28px,4vw,46px) clamp(22px,3.4vw,42px) clamp(62px,7vw,84px)}
.night canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.night>*:not(canvas){position:relative}
.gf-logo{display:flex;align-items:center;gap:.65rem;margin-bottom:1.5rem}
.gf-logo svg{width:44px;height:44px;flex:none}
.gf-logo span{font:800 1.05rem/1.05 var(--f-gf);letter-spacing:.03em;text-transform:uppercase;color:var(--chalk)}
.gf-logo b{display:block;font-weight:800;color:var(--fiber)}
.brushline{display:block;font:400 clamp(2.9rem,6.4vw,5.1rem)/.95 var(--f-brush);color:var(--chalk);transform:rotate(-4deg);transform-origin:left bottom;white-space:nowrap}
.brushline span{color:var(--fiber)}
.swipe{display:inline-block;background:var(--chalk);color:var(--night);font:400 clamp(1.05rem,2.1vw,1.55rem)/1.2 var(--f-brush);padding:.45em 1em;transform:rotate(-3deg);margin:.5rem 0 1.5rem -.3rem;clip-path:polygon(2% 12%,10% 4%,30% 9%,55% 2%,78% 7%,99% 0,97% 40%,100% 78%,88% 96%,62% 90%,38% 100%,14% 92%,0 98%,3% 60%)}
.night p{color:#cbd8db;max-width:30em;font-size:1rem}
.night .btn{margin-top:1.3rem;background:var(--fiber);border-color:var(--fiber);color:var(--night);font-weight:600;position:relative}
.night .btn:hover{background:var(--chalk);border-color:var(--chalk);color:var(--night)}
.portal-frame .cl{z-index:2;pointer-events:none}
.pc1{width:min(62%,300px);left:-10%;bottom:-9%;--dx:14px;--t:46s}
.pc2{width:min(42%,190px);right:-7%;top:-7%;--dx:12px;--t:38s}
.pc3{width:min(50%,240px);right:-3%;bottom:-6%;--dx:10px;--t:52s}

@media (max-width:860px){
  .hero .inner{grid-template-columns:1fr;grid-template-areas:"copy" "portal" "doors"}
  .doors{max-width:none}
}

/* ---------- Abschnitte ---------- */
.band{position:relative;padding-block:clamp(20px,3.5vw,44px) clamp(48px,7vw,92px)}
.band.white{background:var(--cloud)}
.band.mist{background:var(--mist)}
.band.sky{background:linear-gradient(180deg,#b7dff8 0,#d3ecfb 100%);isolation:isolate}

/* ---------- Anschlussarten ---------- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,4vw,48px);align-items:start}
.way{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 12px 30px -22px rgba(15,43,61,.5)}
.scene{display:block;width:100%;height:auto;background:linear-gradient(180deg,var(--sky-2),#dff1fc)}
.scene text{font:500 11px var(--f-word);fill:var(--ink)}
.signal{stroke-dasharray:3 8;animation:signal 1.6s linear infinite}
@keyframes signal{to{stroke-dashoffset:-22}}
.way-b{padding:1.15rem 1.15rem 1.2rem}
.way h3{font-family:var(--f-head);font-style:italic;font-weight:500;font-size:1.9rem;line-height:1.05}
.way .how{margin-top:.3rem;color:var(--ink);font-weight:400;line-height:1.4}
.pts{margin-top:.8rem;display:grid;gap:.3rem;font-size:.92rem;line-height:1.4}
.pts li{position:relative;padding-left:1.2rem}
.pts li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:2px;background:var(--green-lit);border-radius:2px}
.pts li.minus::before{background:var(--line2)}

.tr-cap{display:flex;justify-content:space-between;gap:.5rem;margin-top:1.05rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--mute)}
.trs{display:grid;gap:.4rem;margin-top:.35rem}
.tr{display:grid;grid-template-columns:auto 1fr auto;gap:.1rem .6rem;align-items:center;width:100%;padding:.55rem .7rem;background:transparent;border:1.5px solid var(--line);border-radius:12px;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.tr:hover{border-color:var(--green)}
.tr .tick{grid-row:1/4;width:20px;height:20px;border:2px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:700;line-height:1}
.tr .nm{font-weight:600;color:var(--ink);line-height:1.25}
.tr .pr{font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tr .sp{grid-column:2/4;font-size:.84rem;color:var(--mute);line-height:1.3;font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;gap:.5rem}
.tr .bars{grid-column:2/4;display:grid;gap:2px;margin-top:.3rem}
.tr .bars i{display:block;height:4px;width:calc(var(--w,0)*100%);border-radius:2px;background:var(--sky-1);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.tr .bars i+i{background:var(--green-lit)}
.ways.pre .bars i{width:0}
.tr[aria-pressed="true"]{border-color:var(--green);background:var(--in-green);box-shadow:inset 0 0 0 1px var(--green)}
.tr[aria-pressed="true"] .tick{background:var(--green);border-color:var(--green)}
.tr[aria-pressed="true"] .nm{color:var(--green-ink)}

.fee{margin-top:.8rem;padding:.7rem .85rem;background:var(--in-mist);border-radius:12px;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap}
.fee span{font-size:.9rem;color:var(--ink);font-weight:400}
.fee small{display:block;font-size:.8rem;color:var(--mute);line-height:1.3}
.fee b{font-size:1.15rem;white-space:nowrap}

.key{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-top:1.2rem;font-size:.875rem;color:var(--mute)}
.key i{display:inline-block;width:18px;height:4px;border-radius:2px;background:var(--sky-1);vertical-align:middle;margin-right:.4rem}
.key span+span i{background:var(--green-lit)}

.incl{display:grid;grid-template-columns:.8fr 2.2fr;gap:1.2rem 2rem;margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,32px);background:var(--card-mist);border-radius:22px}
.incl ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 1.6rem}
.incl li{position:relative;padding-left:1.25rem;line-height:1.45}
.incl li::before{content:"";position:absolute;left:0;top:.65em;width:.75rem;height:2px;background:var(--green-lit);border-radius:2px}

@media (max-width:980px){
  .ways{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .incl{grid-template-columns:1fr}
}
@media (max-width:560px){.incl ul{grid-template-columns:1fr}}

/* ---------- Telefon ---------- */
.tel-h{margin-top:2.4rem}
.tel-sub{margin-top:.3rem;max-width:44em;font-size:.95rem}
.tel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1rem}
.tel-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tel-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:1.05rem 1.15rem 1.15rem;cursor:pointer;transition:border-color .15s,background .15s}
.tel-card:hover{border-color:var(--green)}
.tel-tag{display:inline-block;width:max-content;max-width:100%;font-size:.75rem;font-weight:600;color:var(--green-ink);background:var(--green-soft);padding:.1rem .6rem;border-radius:999px;margin-bottom:.45rem}
.tel-price{margin-top:.3rem;font-weight:600;font-size:1.3rem;color:var(--ink)}
.tel-price small{font-weight:300;font-size:.85rem;color:var(--mute);margin-left:.35rem}
.tel-card ul{margin-top:.55rem;display:grid;gap:.2rem;font-size:.92rem;line-height:1.4}
.tel-card li{position:relative;padding-left:1.1rem}
.tel-card li::before{content:"";position:absolute;left:0;top:.6em;width:.6rem;height:2px;background:var(--green-lit);border-radius:2px}
.pickmark{margin-top:auto;padding-top:.8rem;font-size:.875rem;font-weight:500;color:var(--green-ink)}
.tel-card.selected{border-color:var(--green);background:var(--card-green);box-shadow:inset 0 0 0 1px var(--green)}
.tel-bottom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:2.4rem;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.3rem}
.panel h3+*{margin-top:.6rem}
.panel p+p{margin-top:.6rem}
.panel.accent{border-left:5px solid var(--green)}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem}
dl.kv dt{color:var(--mute)}
dl.kv dd{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums;min-width:0}
dl.kv dd span{color:var(--mute);font-weight:300}
.tel-bottom .note{margin-top:.8rem}
@media (max-width:860px){.tel-grid,.tel-grid.two,.tel-bottom{grid-template-columns:1fr}}

/* ---------- Bestellen ---------- */
.order{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,56px);align-items:start}
.pickbox{background:var(--card);border-radius:24px;padding:clamp(18px,3vw,30px);box-shadow:0 20px 44px -30px rgba(15,43,61,.55)}
.field{display:block;margin-top:.95rem}
.field:first-child{margin-top:0}
label.lb,.field>label{display:block;font-weight:500;font-size:.93rem;color:var(--ink);margin-bottom:.28rem}
input:not([type=radio]):not([type=checkbox]),select,textarea{width:100%;min-height:46px;padding:.55rem .8rem;background:var(--cloud);border:1.5px solid var(--line2);border-radius:11px;color:var(--ink);font:300 1rem/1.4 var(--f-word)}
textarea{display:block;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(15,132,80,.22)}
::placeholder{color:#5f7c8b;opacity:1}
[aria-invalid="true"]{border-color:var(--alert)!important}
.choice{display:flex;gap:.65rem;align-items:flex-start;margin-top:.55rem;padding:.65rem .8rem;background:transparent;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink);font-weight:400;line-height:1.35}
.choice:hover{border-color:var(--green)}
.choice:has(input:checked){border-color:var(--green);background:var(--in-green)}
.choice input{accent-color:var(--green);width:18px;height:18px;margin:.12rem 0 0;flex:none}
.choice small{display:block;font-weight:300;font-size:.85rem;color:var(--mute)}
.hint{font-size:.85rem;line-height:1.45;color:var(--mute);margin-top:.5rem}
.hint.warn{color:var(--warn);background:var(--in-warn);padding:.5rem .7rem;border-radius:9px}
.total{margin-top:1.1rem;padding:.85rem 1rem;background:var(--in-green);border-radius:14px;color:var(--ink);line-height:1.5}
.total small{display:block;color:var(--mute);font-size:.84rem}
.channels{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.channel{display:grid;grid-template-columns:auto 1fr;gap:0 .7rem;align-items:center;padding:.75rem .9rem;background:var(--green);border:2px solid var(--green);border-radius:15px;color:#fff;text-decoration:none;transition:transform .15s,background .15s}
.channel:hover{transform:translateY(-2px);background:var(--green-ink);border-color:var(--green-ink);color:#fff}
.channel svg{grid-row:1/3;width:26px;height:26px}
.channel b{color:inherit;font-weight:600;line-height:1.25}
.channel span{font-size:.78rem;line-height:1.3;opacity:.92;overflow-wrap:anywhere}
.channel.alt{background:var(--cloud);color:var(--green-ink)}
.channel.alt:hover{background:var(--green-soft);border-color:var(--green-ink);color:var(--green-ink)}
.channel.disabled{opacity:.45;cursor:not-allowed}
.channel.disabled:hover{transform:none}
.sub-fields{margin-top:.6rem;padding-left:.9rem;border-left:3px solid var(--line)}
@media (max-width:860px){.order{grid-template-columns:1fr}}
@media (max-width:480px){.channels{grid-template-columns:1fr}}

/* Auswahlleiste unten */
.pickbar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:.9rem;width:max-content;max-width:calc(100% - 24px);padding:.45rem .5rem .45rem 1.1rem;background:var(--ink);color:#fff;border-radius:999px;box-shadow:0 14px 34px -12px rgba(15,43,61,.7);font-size:.92rem;line-height:1.25}
.pickbar b{color:#fff;display:block}
.pickbar small{color:#bcd3e0;font-size:.8rem}
.pickbar .btn{flex:none;min-height:40px;padding:.3rem 1rem;font-size:.9rem;background:var(--green-lit);border-color:var(--green-lit);color:var(--night);font-weight:600}
.pickbar .btn:hover{background:#fff;border-color:#fff;color:var(--night)}

/* ---------- Kontakt ---------- */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:1.8rem}
.cols h3{margin-bottom:.5rem}
.contact-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.8rem}
.contact-main .channel{min-height:78px}
@media (max-width:860px){.cols,.contact-main{grid-template-columns:1fr}}

/* ---------- Kündigen ---------- */
.cancel{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,56px);align-items:start}
.cancel p+p{margin-top:.8rem}
.cancel>div>p:first-of-type{margin-top:1rem}
.form{background:var(--card-mist);border-radius:22px;padding:clamp(18px,3vw,30px)}
.form h3{margin-bottom:.7rem}
.form .btn{margin-top:1rem}
.form legend{font-weight:500;font-size:.93rem;color:var(--ink);padding:0;margin-top:.9rem}
.form fieldset:first-of-type legend{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
.grid3{display:grid;grid-template-columns:7rem 1fr;gap:0 .8rem}
.grid2 .field:first-child,.grid3 .field:first-child{margin-top:.95rem}
.err{color:var(--alert);font-size:.875rem;font-weight:400;margin-top:.3rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{border-left:5px solid var(--green);background:var(--card-green)}
.done:focus{outline:0}
.done dl.kv{margin-top:.8rem}
@media (max-width:860px){.cancel{grid-template-columns:1fr}}
@media (max-width:480px){.grid2{grid-template-columns:1fr}.grid2 .field+.field{margin-top:.95rem}}

/* ---------- Gut zu wissen ---------- */
.know{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.8rem;align-items:start}
.know p{margin-top:.5rem}
.biz{display:grid;gap:.6rem;margin-top:.7rem}
.biz li b{display:block}
.faq{margin-top:1.8rem;display:grid;gap:.5rem}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:15px}
.faq summary{cursor:pointer;padding:.85rem 1.15rem;font-weight:500;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--green-ink);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 1.15rem 1rem;max-width:52em}
.faq .ans p+p{margin-top:.6rem}
.stats{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin-top:1.5rem}
.stats b{display:block;font-family:var(--f-head);font-style:italic;font-weight:500;font-size:2.4rem;line-height:1;color:var(--green-ink)}
.stats span{font-size:.92rem}
@media (max-width:860px){.know{grid-template-columns:1fr}}

/* ---------- Impressum ---------- */
.imp{border-top:1px solid var(--line);margin-top:clamp(44px,6vw,72px);padding-top:clamp(36px,5vw,56px)}
.imp h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.imp h3{font-size:1rem;margin-top:1.3rem;margin-bottom:.3rem}
.imp .cols>div>h3:first-child{margin-top:0}
.imp .cols{font-size:.95rem}
.schlichtung{margin-top:2rem;max-width:52em;font-size:.95rem}
.schlichtung address{margin-top:.5rem}
.schlichtung p+address+p{margin-top:.6rem}

/* ---------- Boden und Fuß ---------- */
.ground{display:block;width:100%;height:clamp(120px,18vw,260px);background:var(--mist)}
.foot{background:var(--green-deep);color:#d6efe1;font-size:.93rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;padding-block:1.4rem calc(1.4rem + env(safe-area-inset-bottom,0px))}
.foot nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem}
.foot a{color:#fff;text-underline-offset:.2em}
.foot a:hover{color:#bdf0d3}

/* ---------- Textseiten ---------- */
.page-sky{position:relative;background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 55%,var(--sky-3));isolation:isolate}
.page-sky .inner{position:relative;padding-block:clamp(32px,5vw,60px) 8px}
.page-sky .btn{margin-top:1rem}
.text{max-width:48em;padding-block:clamp(20px,3vw,36px) clamp(48px,7vw,84px)}
.text h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin-top:2.2rem;line-height:1.15}
.text h3{margin-top:1.3rem}
.text p,.text ul,.text address{margin-top:.65rem}
.text ul{display:grid;gap:.25rem}
.text li{position:relative;padding-left:1.2rem}
.text li::before{content:"";position:absolute;left:0;top:.75em;width:.7rem;height:2px;background:var(--green-lit)}
.text .stand{color:var(--mute);margin-top:1rem}
.box{background:var(--green-soft);border-left:5px solid var(--green);border-radius:12px;padding:.9rem 1.1rem;margin-top:.7rem}
.box p{margin:0}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Druck ---------- */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000;font-size:11pt}
  .mast,.clouds,.bank,.ground,.pickbar,.foot,.skip,.scene{display:none!important}
  .hero,.band,.page-sky{background:#fff!important}
  .btn{display:none!important}
  a{color:#000}
  body.print-only-k main>:not(#kuendigen-wrap){display:none!important}
  body.print-only-k #kuendigen-wrap .cancel{display:block}
  body.print-only-k #kuendigen-wrap .cancel>div:first-child{display:none}
  .done{background:#fff;border:1px solid #000}
}

/* Nummerierte Rechtstexte (AGB § 1) */
.text ol{list-style:decimal;padding-left:1.5rem;margin-top:.65rem;display:grid;gap:.5rem}
.text ol li{padding-left:.2rem}
.text ol li::before{display:none}

/* Feinschliff: Kontrast auf dem Himmel, Wolken liegen nie über Bedienelementen */
.band.sky .label{color:var(--green-deep)}
.doors{position:relative;z-index:3}
.bank{margin-bottom:-1px}

/* Link zum Produktinformationsblatt unter jedem Tarif */
.pib{display:inline-block;padding:.3rem .7rem .1rem;font-size:.8rem;line-height:1.3;color:var(--green-ink)}

/* Brieftaube: fliegt über den Flächen, aber hinter allen Inhalten */
.hero,.band.sky{isolation:auto}
main>.hero>.wrap,main>.band>.wrap,.foot{position:relative;z-index:2}
.taube{position:fixed;left:0;top:0;z-index:1;width:clamp(72px,7vw,104px);pointer-events:none;will-change:transform}
.taube-flip{display:block;will-change:transform}
.taube svg{display:block;width:100%;height:auto;overflow:visible}
.taube .fl{transform-origin:68px 38px;animation:taube-flap .3s ease-in-out infinite alternate}
.taube .fl2{animation-delay:-.05s}
@keyframes taube-flap{from{transform:scaleY(1)}to{transform:scaleY(-.62) rotate(-6deg)}}
@media print{.taube{display:none!important}}