/* Alpines Wintercamp. Farben ausschliesslich als Token, damit Hell und Dunkel
   aus derselben Quelle kommen. Schnee, Nachtblau, Alpenrose als einziger Akzent. */
:root{
  --font-display:'Schibsted Grotesk','Segoe UI',sans-serif;
  --font-text:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shell:1180px;
  --gut:clamp(18px,4vw,34px);
  --sp:clamp(44px,6.5vw,104px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:6px;--r-s:4px;
  color-scheme:light;
  --bg:#F3F5F8;--bg2:#E6EAF1;--surface:#FFFFFF;
  --ink:#0D1420;--text:#28303E;--muted:#576274;--line:#D2D8E2;
  --primary:#152340;--primary-ink:#E9EFF8;
  --accent:#9A3A4D;--accent-ink:#FFF1F3;
  --shade:18 26 44;
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.13rem,1.06rem + .32vw,1.32rem);
  --step-2:clamp(1.34rem,1.2rem + .62vw,1.78rem);
  --step-3:clamp(1.68rem,1.4rem + 1.2vw,2.55rem);
  --step-4:clamp(2.1rem,1.55rem + 2.3vw,3.6rem);
  --step-5:clamp(2.5rem,1.5rem + 4.1vw,5.1rem);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C0F16;--bg2:#12161F;--surface:#181D27;
  --ink:#EEF2F8;--text:#CFD6E1;--muted:#8D97A7;--line:#252C39;
  --primary:#9FBCE8;--primary-ink:#0A1120;
  --accent:#E58095;--accent-ink:#2A0F17;
  --shade:0 0 0;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:var(--step-0);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
picture{display:contents}
/* Nur noch minimal negativ getrackt. Bei -.02em stiess in der Anzeigeschrift das a
   ins b und "dabei" sah aus wie "da.bei". */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.08;
  font-weight:700;letter-spacing:-.008em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
p{text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--primary);color:var(--primary-ink)}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);
  color:var(--primary-ink);padding:12px 20px;font-weight:600;border-radius:0 0 var(--r) 0}
.skip:focus{left:0;top:0}

/* ---------- Vorschau-Hinweis ---------- */
.pv{background:var(--ink);color:var(--bg);font-size:.83rem}
.pv__in{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding-block:9px}
.pv a{color:var(--bg);text-underline-offset:.2em}

/* ---------- Kopf ---------- */
.head{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head__in{display:flex;align-items:center;gap:14px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;
  color:var(--ink);flex:0 1 auto;min-width:0}
.brand__mark{width:55px;height:36px;flex:0 0 auto;object-fit:contain}
.brand__t{font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.15;
  letter-spacing:-.01em;min-width:0}
.brand__t small{display:block;font-family:var(--font-text);font-weight:500;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.nav{margin-inline-start:auto}
.nav ul{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav a{display:inline-block;padding:10px 13px;border-radius:var(--r-s);text-decoration:none;
  color:var(--text);font-size:.94rem;font-weight:500;white-space:nowrap;transition:.2s var(--ease)}
.nav a:hover{background:var(--bg2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--primary);color:var(--primary-ink)}
.tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;background:none;
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink);cursor:pointer;
  transition:.2s var(--ease)}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn .i-moon{display:none}
[data-theme="dark"] .iconbtn .i-sun{display:none}
[data-theme="dark"] .iconbtn .i-moon{display:block}
/* Die drei Striche liegen absolut, sonst trifft das Kreuz beim Oeffnen nicht. */
.burger{display:none;position:relative}
.burger span{position:absolute;left:50%;top:50%;width:19px;height:2px;margin-left:-9.5px;
  background:currentColor;
  transition:transform .22s var(--ease),opacity .12s linear}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(2){transform:translateY(0)}
.burger span:nth-child(3){transform:translateY(6px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
@media (max-width:1000px){
  .burger{display:block}
  /* Das Panel haengt am klebrigen Kopf, nicht an einer gerechneten Pixelhoehe. */
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgb(var(--shade)/.5);
    max-height:80dvh;overflow-y:auto;display:none;margin:0}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px}
  .nav a{padding:13px 12px;font-size:1.02rem;border-radius:var(--r-s)}
  .tools{margin-inline-start:auto}
}
@media (max-width:520px){.brand__t{font-size:.98rem}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--primary);isolation:isolate}
.hero__bg{position:absolute;inset:0;margin:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(8 13 24/.42) 0%,rgb(8 13 24/.58) 55%,rgb(8 13 24/.84) 100%)}
.hero__in{position:relative;padding-block:clamp(72px,12vw,150px);color:#fff;
  min-height:min(84vh,720px);display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{color:#fff;font-size:var(--step-5);letter-spacing:-.035em;max-width:15ch}
.hero__lead{margin-top:20px;font-size:var(--step-1);max-width:50ch;color:rgb(255 255 255/.88)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.hero .kicker{color:#F5C3CD}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;flex:0 0 auto}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;
  padding:13px 26px;border-radius:var(--r);font-weight:600;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:.2s var(--ease)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--light{background:#fff;color:#132038}
.btn--light:hover{background:#F5C3CD;color:#2A0F17}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.hero .btn--ghost{background:transparent;border-color:rgb(255 255 255/.6);color:#fff}
.hero .btn--ghost:hover{background:#fff;color:#132038}

/* Kennzahlen unter dem Hero */
.facts{border-block:1px solid var(--line);background:var(--bg)}
.facts__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-block:0;margin-inline:auto;padding-block:0}
.facts__i{padding:26px clamp(14px,2vw,28px);position:relative;text-align:center}
.facts__i+.facts__i::before{content:"";position:absolute;inset-block:22px;left:0;
  width:1px;background:var(--line)}
.facts__i dt{font-family:var(--font-display);font-size:var(--step-2);color:var(--ink);
  line-height:1.05}
.facts__i dd{margin:8px 0 0;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);line-height:1.35}
@media (max-width:720px){
  .facts__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts__i:nth-child(n+3)::after{content:"";position:absolute;top:0;inset-inline:14px;
    height:1px;background:var(--line)}
  .facts__i:nth-child(odd)::before{display:none}
}

/* ---------- Abschnitte ---------- */
.sec{padding-block:var(--sp)}
.sec--alt{background:var(--bg2)}
.sec--tint{background:var(--primary);color:var(--primary-ink)}
.sec--tint h2,.sec--tint h3{color:var(--primary-ink)}
.sec--tint .kicker{color:color-mix(in srgb,var(--accent) 55%,var(--primary-ink))}
.sec--tint p{color:color-mix(in srgb,var(--primary-ink) 86%,transparent)}
.sechead{max-width:64ch;margin-bottom:clamp(28px,4vw,52px)}
.sechead h2{font-size:var(--step-3)}
.sechead p{margin-top:14px;font-size:var(--step-1);color:var(--muted)}
.sec--tint .sechead p{color:color-mix(in srgb,var(--primary-ink) 78%,transparent)}
.prose{max-width:68ch}
.prose p+p{margin-top:1em}
.lnk{color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;
  align-items:center;gap:.45em}
.lnk::after{content:"";width:.8em;height:.8em;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);transition:translate .2s var(--ease)}
.lnk:hover::after{translate:.22em 0}

/* Zweispaltig mit Bild */
/* Oben buendig statt zentriert: sonst haengt das Bild je nach Textlaenge
   um 30 bis 40 Pixel gegen die Ueberschrift versetzt. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(26px,4vw,64px);row-gap:0;align-items:start}
.split>.kicker{grid-column:1;grid-row:1}
.split__text{grid-column:1;grid-row:2}
/* Das Bild beginnt auf Hoehe der Ueberschrift, nicht schon beim Kicker. */
.split__media{grid-column:2;grid-row:2}
.split--rev>.kicker{grid-column:2}
.split--rev .split__text{grid-column:2}
.split--rev .split__media{grid-column:1}
.split__media{margin:0;border-radius:var(--r);overflow:hidden}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split__media figcaption{padding:10px 2px 0;font-size:.86rem;color:var(--muted)}
@media (max-width:880px){
  .split{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(20px,4vw,30px)}
  .split>.kicker,.split__text,.split__media,
  .split--rev>.kicker,.split--rev .split__text,.split--rev .split__media{
    grid-column:1;grid-row:auto}
  .split>.kicker{margin-bottom:-14px}
}

/* Kacheln */
.tiles{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,2vw,22px)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px)}
.sec--tint .tile{background:color-mix(in srgb,#fff 8%,transparent);border-color:rgb(255 255 255/.16)}
.tile h3{font-size:1.16rem;margin-bottom:10px}
.tile p{color:var(--muted);font-size:.97rem}
.sec--tint .tile p{color:color-mix(in srgb,var(--primary-ink) 80%,transparent)}
.tile__n{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--accent);
  line-height:1;margin-bottom:12px}

/* Wochen */
.weeks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.week{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 22px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px clamp(18px,2.4vw,26px)}
.week__n{font-family:var(--font-display);font-size:1.24rem;color:var(--ink)}
.week__d{color:var(--text)}
.week__tag{justify-self:end;padding:5px 10px;border-radius:var(--r-s);font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);
  white-space:nowrap}
@media (max-width:620px){.week{grid-template-columns:1fr}.week__tag{justify-self:start}}

/* Galerie */
.gal{list-style:none;padding:0;margin:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gal button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r);overflow:hidden}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:scale .5s var(--ease)}
.gal button:hover img{scale:1.05}

/* Tabelle */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.96rem}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--bg2);font-family:var(--font-display);color:var(--ink);font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
tbody th{font-weight:600;color:var(--ink)}
td{color:var(--muted)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* FAQ */
.faq{display:grid;gap:12px;max-width:80ch}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0 clamp(18px,2.4vw,24px)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;cursor:pointer;font-family:var(--font-display);font-size:1.1rem;color:var(--ink);
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:0 0 auto;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 0 22px;max-width:70ch;color:var(--muted)}
.faq__a p+p{margin-top:.8em}

/* Hinweis */
.note{display:flex;gap:16px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,2.6vw,28px);max-width:80ch}
.note svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;margin-top:2px}
.note h3{font-size:1.08rem;margin-bottom:6px}
.note p{color:var(--muted)}

/* Handlungsaufruf */
.cta{position:relative;isolation:isolate;border-radius:var(--r);overflow:hidden;color:#fff;
  padding:clamp(34px,5vw,68px);text-align:center}
.cta__bg{position:absolute;inset:0;margin:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgb(9 14 26/.72)}
.cta h2{color:#fff;font-size:var(--step-3);max-width:20ch;margin-inline:auto}
.cta p{margin:16px auto 0;max-width:56ch;color:rgb(255 255 255/.88)}
.cta .btn--ghost{background:transparent;border-color:rgb(255 255 255/.6);color:#fff}
.cta .btn--ghost:hover{background:#fff;border-color:#fff;color:#132038}
.cta__b{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ---------- Formular ---------- */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3.4vw,40px);max-width:860px}
.fset{border:0;padding:0;margin:0 0 26px}
.fset:last-of-type{margin-bottom:0}
.fset legend{font-family:var(--font-display);font-size:1.1rem;color:var(--ink);
  padding:0 0 14px;font-weight:700}
/* Feste zwei Spalten: mit auto-fit rutschte je nach Breite ein Feld allein in
   eine Zeile und stand halb so breit neben leerem Raum. */
.grid2{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:620px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:7px}
.field--wide{grid-column:1/-1}
.field label{font-weight:600;font-size:.93rem;color:var(--ink);display:flex;align-items:baseline;
  gap:.4em;flex-wrap:wrap}
.req{color:var(--accent)}
.opt{font-weight:400;font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:13px 15px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);color:var(--text);
  font-size:16px;transition:border-color .2s var(--ease)}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field [aria-invalid="true"]{border-color:var(--accent);border-width:2px}
.hint{font-size:.85rem;color:var(--muted)}
.err{font-size:.85rem;font-weight:600;color:var(--accent);min-height:0}
.err:empty{display:none}
.choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.choice{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;transition:.2s var(--ease)}
.choice:hover{border-color:var(--muted)}
.choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.choice input{width:22px;height:22px;min-height:0;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}
.choice span{font-size:.97rem}
.choice b{display:block;font-weight:600;color:var(--ink)}
.choice small{color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:8px}
.check input{width:24px;height:24px;min-height:0;flex:0 0 auto;margin-top:9px;
  accent-color:var(--accent);cursor:pointer}
.check label{font-weight:400;color:var(--text);line-height:1.55;padding-block:8px;cursor:pointer}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.actions .btn{min-width:220px}
.formmsg{margin-top:18px;padding:16px 18px;border-radius:var(--r-s);font-weight:600;display:none}
.formmsg.is-on{display:block}
.formmsg.is-ok{background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  border:1px solid var(--primary);color:var(--ink)}
.formmsg.is-bad{background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border:1px solid var(--accent);color:var(--ink)}
.formmsg p+p{margin-top:.5em;font-weight:400;color:var(--muted)}
altcha-widget{display:block;max-width:340px;--altcha-color-base:var(--bg);
  --altcha-color-border:var(--line);--altcha-color-text:var(--text);
  --altcha-color-border-focus:var(--accent);--altcha-border-radius:10px}

/* Rechtsdokument */
.doc{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:start}
.doc__toc{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px}
.doc__toc h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px}
.doc__toc ol{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
.doc__toc a{color:var(--muted);text-decoration:none}
.doc__toc a:hover{color:var(--accent)}
.art+.art{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.art h2{font-size:1.26rem;margin-bottom:12px}
.art p+p,.art ul+p,.art p+ul{margin-top:.85em}
.art ul{margin:0;padding-left:1.3em;display:grid;gap:6px}
.art li::marker{color:var(--accent)}
@media (max-width:880px){.doc{grid-template-columns:1fr}.doc__toc{position:static}}

/* Fuss */
.foot{background:var(--primary);color:color-mix(in srgb,var(--primary-ink) 86%,transparent);
  padding-top:clamp(44px,6vw,76px)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);padding-bottom:clamp(34px,5vw,58px)}
.foot h2{font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--primary-ink) 64%,transparent);margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.94rem}
.foot a{color:var(--primary-ink);text-decoration:none}
.foot a:hover{color:var(--accent);text-decoration:underline}
.foot__brand .brand{color:var(--primary-ink)}
.foot__brand .brand__t small{color:color-mix(in srgb,var(--primary-ink) 62%,transparent)}
.foot__note{margin-top:14px;font-size:.93rem;max-width:44ch;
  color:color-mix(in srgb,var(--primary-ink) 74%,transparent)}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:20px;
  border-top:1px solid color-mix(in srgb,var(--primary-ink) 20%,transparent);font-size:.86rem}
@media (max-width:900px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:5vmin;
  background:rgb(var(--shade)/.95)}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1100px,92vw)}
.lb img{max-width:100%;max-height:80vh;object-fit:contain;margin-inline:auto;border-radius:var(--r)}
.lb figcaption{margin-top:14px;text-align:center;color:#fff;opacity:.85;font-size:.92rem}
.lb__x{position:absolute;top:16px;right:16px;width:48px;height:48px;font-size:1.7rem;line-height:1;
  background:none;border:1px solid rgb(255 255 255/.45);border-radius:var(--r);color:#fff;cursor:pointer}
.lb__x:hover{background:#fff;color:#000}

@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
  .hero__in>*{animation:rise .8s var(--ease) both}
  .hero__in>*:nth-child(2){animation-delay:.1s}
  .hero__in>*:nth-child(3){animation-delay:.18s}
  .hero__in>*:nth-child(4){animation-delay:.26s}
}
@media print{
  .head,.foot,.pv,.lb,.iconbtn{display:none!important}
  body{background:#fff;color:#000}
  .doc{grid-template-columns:1fr}.doc__toc{display:none}
}

/* ---------- Preisoptionen, statt einer Tabelle zum Seitwaertsscrollen ---------- */
/* Eigener Praefix: .opt gehoert schon dem Wort "optional" im Formular. */
.opts{list-style:none;padding:0;margin:0;display:grid;gap:12px}
@media (min-width:760px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pass{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px clamp(16px,2.2vw,24px);display:grid;grid-template-columns:1fr auto;gap:4px 16px}
.pass__n{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1.06rem}
.pass__p{font-family:var(--font-display);font-weight:700;color:var(--accent);
  white-space:nowrap;text-align:right}
.pass__h{grid-column:1/-1;color:var(--muted);font-size:.93rem;margin-top:2px}

/* ---------- Linkliste ---------- */
.lnks{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lnks a{display:block;background:var(--surface);padding:14px clamp(14px,2vw,20px);
  text-decoration:none;color:var(--text);font-weight:500;transition:.15s var(--ease)}
.lnks a:hover{background:var(--bg2);color:var(--ink)}

/* ---------- Gesperrtes Formular ---------- */
/* Statushinweis, kein Werbebanner: zwei Linien, Symbol auf der Zeile der
   Ueberschrift, Text darunter in Hinweisgroesse. */
.lock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 11px;
  border-block:1px solid var(--line);padding:18px 0;margin-bottom:26px}
.lock svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.lock h3{font-size:1.02rem;letter-spacing:0}
.lock p{grid-column:2;color:var(--muted);font-size:.93rem;max-width:62ch}
.form--locked{opacity:.75}
.form--locked .btn[disabled]{cursor:not-allowed;opacity:.55}

/* ---------- CTA ohne Bild ---------- */
.cta--plain{background:var(--primary);color:var(--primary-ink);
  padding:clamp(30px,5vw,58px) var(--gut)}
.cta--plain h2{color:inherit}
.cta--plain p{color:color-mix(in srgb,var(--primary-ink) 84%,transparent)}
.cta--plain::after{display:none}

/* ---------- Tabellen stapeln am Handy, statt seitwaerts zu scrollen ---------- */
@media (max-width:640px){
  .tablewrap{overflow-x:visible;border:0;background:none}
  table{min-width:0;display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tbody,tr,th,td{display:block;width:100%}
  tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:14px 16px;margin-bottom:12px}
  th,td{border:0;padding:3px 0}
  tbody th{font-size:1.04rem;font-family:var(--font-display)}
  td::before{content:attr(data-l) ": ";color:var(--ink);font-weight:600}
}

/* ---------- Am Handy kuerzer: Hero und Vorschau-Band nehmen weniger Platz ---------- */
@media (max-width:640px){
  .hero__in{min-height:min(62vh,520px);padding-block:clamp(52px,9vw,88px)}
  .pv{font-size:.76rem}
  .pv__in{padding-block:7px;gap:2px 12px}
  .facts__i{padding:18px 12px}
  .sechead{margin-bottom:22px}
}

/* Fuss am Handy zweispaltig, sonst kostet er allein vier Bildschirme. */
@media (max-width:640px){
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}

/* ---------- Bildnachweis ---------- */
.creds{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cred{background:var(--surface);padding:13px clamp(14px,2vw,18px)}
.cred b{display:block;color:var(--ink);font-weight:600;font-size:.95rem}
.cred span{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}
.cred a{color:var(--muted);text-underline-offset:.2em}
.cred a:hover{color:var(--accent)}

/* ---------- Bildansicht: Blaettern ---------- */
.lb__zurueck,.lb__vor{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:1px solid color-mix(in srgb,var(--primary-ink) 35%,transparent);
  border-radius:50%;background:color-mix(in srgb,var(--ink) 55%,transparent);
  cursor:pointer;display:grid;place-items:center}
.lb__zurueck{left:clamp(10px,3vw,32px)} .lb__vor{right:clamp(10px,3vw,32px)}
.lb__zurueck::before,.lb__vor::before{content:"";width:11px;height:11px;
  border-top:2px solid var(--primary-ink);border-right:2px solid var(--primary-ink)}
.lb__zurueck::before{transform:rotate(-135deg);margin-left:3px}
.lb__vor::before{transform:rotate(45deg);margin-right:3px}
.lb__zurueck:hover,.lb__vor:hover{background:color-mix(in srgb,var(--ink) 78%,transparent)}
.lb__zurueck:focus-visible,.lb__vor:focus-visible{outline:2px solid var(--primary-ink);
  outline-offset:2px}
@media (max-width:640px){.lb__zurueck,.lb__vor{width:40px;height:40px}}