/* pr4geo.de · Gestaltung
   Papier, Tinte, Kobalt für Quellenverweise und ein Textmarker für das, was zitiert wird. */
@font-face{font-family:'Schibsted Grotesk';src:url(/assets/fonts/schibsted-grotesk-400-900-latin.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(/assets/fonts/atkinson-next-200-800-latin.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(/assets/fonts/atkinson-next-200-800-latin-ext.woff2) format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(/assets/fonts/atkinson-next-italic-200-800-latin.woff2) format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/fonts/geist-mono-100-900-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{--kopf-h:66px;
  --grund:#F5F6F2;--flaeche:#FFFFFF;--flaeche2:#ECEEE7;--tinte:#11131B;--text2:#4B5160;--linie:#D8DBD2;
  --navy:#112C51;--navy-tief:#0B1E38;--kupfer:#9C653F;--kobalt:#112C51;--kobalt-tief:#0B1E38;--kobalt-hauch:#E3E8F0;--marker:#E3EF4C;--nacht:#0B1E38;--nacht2:#173A68;--rot:#B42318;
  --display:'Schibsted Grotesk','Arial Narrow',system-ui,sans-serif;
  --text:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --mag:Georgia,'Times New Roman',serif;
  --rand:clamp(16px,4vw,40px);--max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 1.0625rem/1.62 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--kobalt);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--kobalt-tief)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--max),100% - 2*var(--rand));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Schrift */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(2.55rem,1.15rem + 4.7vw,5.15rem);letter-spacing:-.042em;line-height:.97}
h2{font-size:clamp(2rem,1.25rem + 2.5vw,3.3rem);letter-spacing:-.036em}
h3{font-size:1.24rem;font-weight:700;letter-spacing:-.016em;line-height:1.22}
.eyebrow{font:600 .76rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--kobalt);margin:0 0 18px}
.lead{font-size:clamp(1.08rem,1rem + .35vw,1.24rem);line-height:1.58;color:var(--text2);max-width:60ch}
.kopfzeile{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.kopfzeile .lead{margin-top:18px}

/* Textmarker und Quellenchip: die zwei Zeichen der Marke */
.mark{background-image:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 93%,transparent 93%);background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em}
.q{display:inline-block;font:600 .3em/1 var(--mono);letter-spacing:0;background:var(--kupfer);color:#fff;border-radius:.28em;padding:.24em .38em .2em;vertical-align:top;margin:.12em 0 0 .1em;text-decoration:none}
a.q:hover{background:var(--navy);color:#fff}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:.35em;background:var(--kupfer);color:#fff;font:600 .72rem/1 var(--mono);letter-spacing:0;vertical-align:.12em}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:.8em 1.35em;border-radius:12px;border:1.5px solid transparent;font:700 1rem/1.1 var(--display);letter-spacing:-.01em;text-decoration:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.knopf--haupt{background:var(--navy);color:#fff}
.knopf--haupt:hover{background:var(--navy-tief);color:#fff}
.knopf--rand{border-color:var(--navy);color:var(--navy)}
.knopf--rand:hover{background:var(--navy);color:#fff}
.knopf svg{width:18px;height:18px;flex:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(245,246,242,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.ist-gerollt{border-bottom-color:var(--linie)}
.kopf__innen{display:flex;align-items:center;gap:28px;min-height:var(--kopf-h)}
.kopf__marke{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:none;min-width:0;padding:4px 0}
.kopf__logo{display:block;flex:none}
.kopf__logo img{height:32px;width:auto}
.kopf__claim{margin:0;font:600 .7rem/1.2 var(--display);letter-spacing:.01em;color:var(--text2);white-space:nowrap}
/* Handy: Unterzeile zweizeilig, Kopf dafür 68 px hoch (auch für die klebende Suchleiste der Magazinliste) */
@media (max-width:560px){
  :root{--kopf-h:68px}
  .kopf__logo img{height:28px}
  .kopf__claim{white-space:normal;font-size:.64rem;max-width:23em;text-wrap:balance}
}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{color:var(--tinte);text-decoration:none;font:600 .95rem/1 var(--display);padding:10px 12px;border-radius:8px}
.nav a:hover{background:var(--flaeche2);color:var(--tinte)}
.kopf .knopf{min-height:38px;padding:.5em 1em;font-size:.92rem}
.menue{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center}
.menue span,.menue span::before,.menue span::after{display:block;width:20px;height:2px;background:var(--tinte);border-radius:2px;position:relative;transition:transform .2s}
.menue span::before,.menue span::after{content:"";position:absolute;left:0}
.menue span::before{top:-6px}.menue span::after{top:6px}
@media (max-width:1240px){
  .kopf__innen{gap:12px}
  .menue{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--rand) 18px;background:var(--grund);border-bottom:1px solid var(--linie);margin:0}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--linie);border-radius:0;font-size:1.05rem}
  .kopf.ist-offen .nav{display:flex}
  .kopf .kopf__cta{display:none}
}

/* Hero */
.hero{padding:clamp(36px,6vw,84px) 0 clamp(44px,6vw,72px)}
.hero__raster{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,64px);align-items:center}
.hero h1 .q{font-size:.26em}
.hero h1{font-size:clamp(2.4rem,1.1rem + 3.9vw,4.3rem)}
.hero h1 .mark--fest{white-space:nowrap}
.hero .lead{margin:26px 0 30px}
.hero__fussnote{display:flex;gap:10px;align-items:flex-start;margin:30px 0 0;padding-top:18px;border-top:1px solid var(--linie);font-size:.9rem;line-height:1.5;color:var(--text2);max-width:56ch}
.hero__fussnote .chip{flex:none;margin-top:.1em}
@media (max-width:960px){.hero__raster{grid-template-columns:1fr}}

.film{position:relative;margin:0;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--nacht);box-shadow:0 30px 70px -20px rgba(11,30,56,.45)}
.film img,.film video{width:100%;height:100%;object-fit:cover}
.film__hinweis{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.94);color:var(--tinte);border-radius:999px;padding:8px 18px 8px 8px;font-size:.92rem;line-height:1.25;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.film__play{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;flex:none}
.film__play svg{width:14px;height:14px;margin-left:2px}
.film__hinweis b{font-family:var(--display)}
.film__start{cursor:pointer;text-align:left;transform-origin:left bottom;transition:transform .2s}
.film__start:hover{transform:scale(1.04)}
.film__start[hidden]{display:none}
.film__start .film__play{width:52px;height:52px}
.film__start .film__play svg{width:18px;height:18px}
@media (max-width:600px){.film__start{left:10px;bottom:10px;gap:9px;padding:5px 13px 5px 5px;font-size:.76rem}.film__start .film__play{width:34px;height:34px}.film__start .film__play svg{width:13px;height:13px}}

.kanaele{border-block:1px solid var(--linie);padding:18px 0}
.kanaele .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.kanaele p{margin:0;font:600 .74rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text2)}
.kanaele ul{display:flex;flex-wrap:wrap;gap:8px 22px}
.kanaele li{font:700 1.02rem/1.2 var(--display);letter-spacing:-.01em;color:var(--tinte)}

/* Abschnitte */
.abschnitt{padding:clamp(64px,9vw,124px) 0}
.abschnitt--weiss{background:var(--flaeche)}
.abschnitt--nacht{background:var(--nacht);color:#fff}
.abschnitt--nacht .eyebrow{color:#A9BCD8}
.abschnitt--nacht .lead,.abschnitt--nacht p{color:#C6D0DF}
.abschnitt--nacht h2,.abschnitt--nacht h3{color:#fff}

/* Probe: dieselbe Frage, zwei Antworten */
.probe__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.probe__text h2{margin-bottom:22px}
.probe__text h3{margin:34px 0 10px;font-size:1.3rem}
.probe__text .mark{color:var(--tinte)}
@media (max-width:960px){.probe__raster{grid-template-columns:1fr}}
.schalter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);margin-bottom:18px}
.schalter button{font:700 .94rem/1 var(--display);color:#fff;padding:.7em 1.15em;border-radius:999px;transition:background .2s,color .2s}
.schalter button[aria-pressed="true"]{background:#fff;color:var(--nacht)}
.schalter button:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.14)}
.antwortkarte{background:#fff;color:var(--tinte);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.antwortkarte .antwortkarte__frage{color:var(--tinte);margin:0;display:flex;gap:12px;align-items:flex-start;background:var(--flaeche2);padding:18px 22px;font:500 .95rem/1.45 var(--mono)}
.antwortkarte__frage span{color:var(--kobalt);font-weight:800}
.antwort{padding:22px 22px 20px}
.antwort p{color:var(--tinte);margin:0 0 16px;font-size:1.06rem;line-height:1.62}
.antwort .chip{margin-left:.2em}
.antwort__quellen{display:grid;gap:8px;padding:14px 0 0;border-top:1px solid var(--linie);font:500 .8rem/1.4 var(--mono);color:var(--text2)}
.antwort__quellen li{display:flex;gap:10px;align-items:flex-start}
.antwort__quellen .chip{margin:0;flex:none}
.antwort .antwort__status{display:flex;gap:10px;align-items:center;margin:16px -22px -20px;padding:14px 22px;font:700 .95rem/1.3 var(--display)}
.antwort__status svg{width:20px;height:20px;flex:none}
.antwort--ohne .antwort__status{background:#FBEDEB;color:var(--rot)}
.antwort--mit .antwort__status{background:var(--kobalt-hauch);color:var(--kobalt-tief)}
.antwort--mit .mark{animation:markieren .9s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes markieren{from{background-size:0 100%}to{background-size:100% 100%}}
.probe__hinweis{margin:14px 4px 0;font-size:.85rem;color:#AEB3D6}

/* Vorteile */
.vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.5vw,48px)}
.vorteil{padding:28px 0 34px;border-top:1px solid var(--linie)}
.vorteil svg{width:30px;height:30px;color:var(--kobalt);margin-bottom:18px}
.vorteil h3{margin-bottom:10px}
.vorteil p{color:var(--text2);margin:0}
@media (max-width:900px){.vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.vorteile{grid-template-columns:1fr}}

.ablauf__titel{margin:clamp(48px,7vw,84px) 0 22px}
.ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.schritt{background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;padding:26px 24px 24px}
.schritt .chip{font-size:.95rem;margin-bottom:20px}
.schritt h3{margin-bottom:8px}
.schritt p{margin:0;color:var(--text2)}
@media (max-width:820px){.ablauf{grid-template-columns:1fr}}

/* Beispiele */
.reiter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.reiter button{font:700 .95rem/1 var(--display);padding:.8em 1.15em;border-radius:999px;border:1.5px solid var(--linie);background:var(--flaeche);color:var(--tinte);transition:border-color .2s,background .2s,color .2s}
.reiter button:hover{border-color:var(--tinte)}
.reiter button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.tafel{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,40px);align-items:start}
.tafel+.tafel{margin-top:56px}
html.js .tafel+.tafel{margin-top:0}
@media (max-width:980px){.tafel{grid-template-columns:1fr}}
.legende{display:grid;gap:18px;position:sticky;top:96px}
.legende h3{font-size:1.15rem}
.legende li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.97rem;color:var(--text2)}
.legende li b{display:block;color:var(--tinte);font-family:var(--display);font-weight:700}
.legende .chip{margin-top:.15em}
.legende li>svg{width:20px;height:20px;color:var(--kobalt);margin-top:.15em}
.legende__fuss{font-size:.85rem;color:var(--text2);border-top:1px solid var(--linie);padding-top:14px}

.browser{background:#fff;border:1px solid var(--linie);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(17,19,27,.35)}
.browser__leiste{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--flaeche2);border-bottom:1px solid var(--linie)}
.browser__punkte{display:flex;gap:6px;flex:none}
.browser__punkte i{width:10px;height:10px;border-radius:50%;background:#C9CCC2}
.browser__adresse{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:6px 12px;font:500 .8rem/1.3 var(--mono);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__adresse svg{width:12px;height:12px;flex:none;color:#7A7F89}

/* Magazinansicht im Browserrahmen: bewusst in der Anmutung der Magazine, nicht der Marke */
.mag{font-family:var(--mag);color:#1c1c1c;padding:0 0 28px}
.mag__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px clamp(16px,3vw,32px);border-bottom:1px solid #e6e6e6}
.mag__marke{font:italic 700 1.45rem/1 var(--mag);letter-spacing:-.01em;color:#141414}
.mag__nav{display:flex;gap:16px;font:600 .68rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#6b6b6b}
@media (max-width:640px){.mag__nav span:nth-child(n+3){display:none}}
.mag__koerper{padding:26px clamp(16px,4vw,48px) 0;max-width:760px}
.mag__zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font:600 .7rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#6b6b6b}
.anzeige{display:inline-block;font:700 .64rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#555;border:1px solid #bdbdbd;border-radius:4px;padding:4px 7px}
.mag .mag__titel{font:700 clamp(1.5rem,1.1rem + 1.4vw,2.2rem)/1.12 var(--mag);letter-spacing:-.01em;margin:0 0 10px;color:#111}
.mag .mag__autor{font:400 .85rem/1.4 var(--text);color:#6b6b6b;margin-bottom:20px}
.mag p:not([class]){font-size:1.02rem;line-height:1.7;color:#2a2a2a}
.mag .mark{color:inherit}
.mag a{color:#1c1c1c;text-decoration-color:var(--kobalt);text-decoration-thickness:2px}
.ki{position:relative;margin:0 0 20px}
.ki img:first-child{width:100%;border-radius:6px}
.ki__badge{position:absolute;right:10px;bottom:10px;height:22px;width:auto}
.fakten{border:1px solid #e2e2e2;border-left:4px solid #1c1c1c;border-radius:6px;padding:16px 18px;margin:20px 0 0;font-family:var(--text);background:#fafafa}
.fakten p{font:700 .7rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#555;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.fakten dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.92rem}
.fakten dt{color:#6b6b6b}
.fakten dd{margin:0;color:#1c1c1c;font-weight:600}
.verweis svg{width:13px;height:13px}
.verweis{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font:600 .78rem/1 var(--mono);background:#111;color:#fff;border-radius:6px;padding:6px 9px;margin-left:6px;vertical-align:.15em}

.banner{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#141414;margin:6px 0 22px;font-family:var(--text);color:#fff}
.banner img{position:absolute;right:0;top:0;width:66%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.banner__glas{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:min(46%,360px);padding:clamp(14px,2vw,24px);border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.banner__marke{font:italic 400 .95rem/1.2 var(--mag);opacity:.9;margin:0 0 6px}
.banner__titel{font:700 clamp(1.05rem,.8rem + 1.1vw,1.6rem)/1.15 var(--mag);margin:0 0 8px}
.banner__text{font-size:clamp(.8rem,.72rem + .3vw,.92rem);line-height:1.45;opacity:.88;margin:0 0 12px}
.banner__link{font-weight:700;font-size:.88rem;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.banner__werbung{position:absolute;left:12px;top:12px;font:700 .6rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.45);border-radius:4px;padding:5px 7px}
.banner .banner__ki{position:absolute;right:10px;bottom:10px;width:auto;height:20px;-webkit-mask-image:none;mask-image:none}
.banner--hoch .banner__ki{bottom:auto;top:12px}
.banner--hoch{aspect-ratio:9/16;width:min(300px,100%);margin-inline:auto}
.banner--hoch img{width:100%;height:62%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.banner--hoch .banner__glas{left:14px;right:14px;top:auto;bottom:14px;transform:none;width:auto}
.format{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--flaeche2);margin:0 0 16px}
.format button{font:700 .85rem/1 var(--display);padding:.6em 1em;border-radius:999px;color:var(--text2)}
.format button[aria-pressed="true"]{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.handy{width:min(330px,100%);margin:0 auto 22px;border:10px solid #111;border-radius:34px;padding:16px 12px;background:#fff}
.handy p{font-size:.92rem}
.platzhalter{display:grid;gap:9px;margin:0 0 20px}
.platzhalter i{display:block;height:9px;border-radius:5px;background:#ececec}
.platzhalter i:nth-child(3n){width:82%}

.teaser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px);padding:0 clamp(16px,3vw,32px)}
.teaser__karte{font-family:var(--mag);position:relative;border-radius:8px;padding:0 0 4px}
.teaser__karte.ist-anzeige{outline:2px solid var(--kobalt);outline-offset:6px}
.teaser__karte .ki{margin-bottom:12px}
.teaser__karte .ki img:first-child{aspect-ratio:4/3;object-fit:cover}
.teaser__karte .ki__badge{height:18px}
.teaser__karte b{display:block;font:700 1.02rem/1.25 var(--mag);color:#111;margin-top:6px}
.teaser__karte small{font:600 .64rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#6b6b6b}
@media (max-width:640px){.teaser{grid-template-columns:1fr}.teaser__karte:not(.ist-anzeige){display:none}}
.mag__rubrik{display:flex;align-items:center;gap:12px;padding:22px clamp(16px,3vw,32px) 14px;font:700 .72rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#444}
.mag__rubrik::after{content:"";flex:1;height:1px;background:#e2e2e2}
.oben-fest{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:18px;align-items:center;margin:0 clamp(16px,3vw,32px);padding:14px;border:2px solid var(--kobalt);border-radius:10px;font-family:var(--mag)}
.oben-fest .ki{margin:0}
.oben-fest .ki img:first-child{aspect-ratio:4/3;object-fit:cover}
.oben-fest b{display:block;font:700 1.15rem/1.25 var(--mag);color:#111;margin:6px 0 4px}
.oben-fest span{font:400 .9rem/1.45 var(--text);color:#555}
@media (max-width:560px){.oben-fest{grid-template-columns:1fr}}

/* Magazinliste: nur über persönlichen Link, Akkordeon mit Filterkopf */
.netzwerk{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(24px,4vw,40px)}
.netz{background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;box-shadow:0 30px 70px -44px rgba(17,19,27,.4)}
.netz__kopf{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(22px,3vw,34px) clamp(20px,3.5vw,40px);border-radius:23px;background:var(--nacht);color:#fff;position:relative;overflow:hidden}
.netz__kopf::-webkit-details-marker{display:none}
.netz__kopf::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.netz__kopftext{position:relative}
.netz__kopf .eyebrow{color:var(--marker);margin:0 0 10px;display:block}
.netz__kopf h2{color:#fff;font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem)}
.netz__zahlen{display:block;margin-top:10px;font:500 .9rem/1.3 var(--mono);color:#C6D0DF}
.netz__auf{position:relative;width:52px;height:52px;border-radius:50%;background:var(--marker);color:var(--nacht);display:grid;place-items:center;flex:none}
.netz__auf svg{width:22px;height:22px;transform:rotate(90deg);transition:transform .25s}
.netz[open] .netz__auf svg{transform:rotate(-90deg)}
.netz[open] .netz__kopf{border-radius:23px 23px 0 0}
.netz__kopf:hover .netz__auf{background:#fff}
.netz__inhalt{padding:0 clamp(14px,3vw,32px) clamp(20px,3vw,32px)}
.netz__filter{position:sticky;top:var(--kopf-h);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 calc(-1 * clamp(14px,3vw,32px)) 18px;padding:10px clamp(14px,3vw,32px);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.netz__suche{flex:1 1 320px;display:flex;align-items:center;gap:10px;background:var(--grund);border:1.5px solid var(--linie);border-radius:12px;padding:0 12px;min-height:42px;transition:border-color .2s}
.netz__suche:focus-within{border-color:var(--kobalt)}
.netz__suche svg{width:20px;height:20px;color:var(--text2);flex:none}
.netz__suche input{flex:1;min-width:0;border:0;background:transparent;font:500 .98rem/1.2 var(--text);color:var(--tinte);outline:none}
/* Dropdowns Thema und Sprache (seit 05.11.2026), gleiche Höhe und Form wie das Suchfeld */
.netz__waehler{display:flex;gap:8px;flex:0 1 auto;min-width:0}
.netz__wahl{position:relative;display:block;min-width:0}
.netz__wahl::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.netz__wahl select{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:280px;min-height:42px;margin:0;padding:0 38px 0 14px;border:1.5px solid var(--linie);border-radius:12px;background:var(--grund);font:500 .95rem/1.2 var(--text);color:var(--tinte);cursor:pointer;text-overflow:ellipsis;transition:border-color .2s,background-color .2s}
.netz__wahl select:hover{border-color:var(--tinte)}
.netz__wahl select:focus{outline:none;border-color:var(--kobalt)}
.netz__wahl select:focus-visible{box-shadow:0 0 0 3px rgba(17,44,81,.18)}
.netz__wahl select.ist-aktiv{background:#fff;border-color:var(--navy);color:var(--navy);font-weight:600}
.netz__wahl:has(select.ist-aktiv)::after{border-color:var(--navy)}
.netz__treffer{margin:0;font:600 .88rem/1.2 var(--mono);color:var(--text2)}
.netz__treffer b{color:var(--kobalt)}
.netz__leer button{flex:none;font:700 .86rem/1 var(--display);color:var(--kobalt);text-decoration:underline;text-underline-offset:.2em;padding:.5em .3em}
/* Handy: Trefferzahl rechts im Suchfeld, darunter die beiden Dropdowns nebeneinander */
@media (max-width:600px){
  .netz__suche{flex-basis:100%;padding-right:76px}
  .netz__suche input{text-overflow:ellipsis}
  .netz__waehler{flex:1 1 100%}
  .netz__wahl{flex:1 1 0}
  .netz__wahl select{max-width:none;font-size:.9rem;padding-left:12px;padding-right:32px}
  .netz__wahl::after{right:13px}
  .netz__treffer{position:absolute;right:calc(clamp(14px,3vw,32px) + 12px);top:31px;transform:translateY(-50%);font-size:.78rem;pointer-events:none}
  .netz__mag{display:none}
}
/* Sieben Ausgaben passen am Handy nur ohne das Wort Ausgabe in eine Zeile */
@media (max-width:420px){.tk__aus:has(> button:nth-of-type(7)) > span:first-child{display:none}}
/* Vier Karten nebeneinander (Nutzer 05.11.2026), darunter 3, 2 und 1 */
.netz__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.netz__raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.netz__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.netz__raster{grid-template-columns:1fr}}
.netz__mehr{display:flex;justify-content:center;margin-top:24px}
.netz__leer{margin:20px 0 0;padding:18px;border-radius:14px;background:var(--grund);color:var(--text2);text-align:center}
.tk{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:18px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.tk:hover{box-shadow:0 18px 40px -24px rgba(17,19,27,.35)}
.tk__schirm{position:relative;aspect-ratio:16/10;background:var(--flaeche2);border-bottom:1px solid var(--linie)}
.tk__schirm img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tk__ohne{display:grid;place-items:center;height:100%;font:600 1rem/1 var(--mono);color:var(--text2)}
.tk__host{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);background:rgba(255,255,255,.95);color:var(--tinte);font:500 .8rem/1.2 var(--mono);padding:6px 10px;border-radius:999px;text-decoration:none;box-shadow:0 2px 8px rgba(17,19,27,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk__host:hover{color:var(--kobalt)}
.tk__host svg{width:13px;height:13px;flex:none}
.tk__text{display:flex;flex-direction:column;gap:8px;padding:14px 16px 12px;flex:1}
.tk__name{font-size:1.28rem;letter-spacing:-.025em}
.tk .tk__slogan{margin:0;font-size:.96rem;line-height:1.45;color:var(--text2)}
.tk__kat{display:flex;flex-wrap:wrap;gap:4px 12px;font:500 .74rem/1.3 var(--mono);color:var(--kobalt-tief)}
.tk__aus{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.tk__aus>span:first-child{font:500 .74rem/1 var(--mono);color:var(--text2);margin-right:2px}
.aus{min-width:34px;min-height:34px;padding:0 6px;border-radius:8px;border:1.5px solid var(--linie);background:#fff;font:600 .8rem/1 var(--mono);text-transform:uppercase;color:var(--tinte);cursor:pointer}
.aus:hover{border-color:var(--tinte)}
.aus[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.aus small{font-size:.68rem;text-transform:none;opacity:.8;margin-left:1px}
.aus--fest{display:inline-grid;place-items:center;cursor:default}
.tk__cta{margin:0 16px 16px;min-height:44px;padding:.55em .8em;font-size:.88rem;text-align:center}
.tk__cta[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* Wunschleiste: unten am Bildschirm, sobald ein Wunschtitel vorgemerkt ist (seit 05.11.2026) */
.wunschleiste{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:45;transform:translateX(-50%);display:flex;align-items:center;gap:10px 18px;width:min(940px,calc(100% - 2 * var(--rand)));padding:10px 10px 10px 18px;border-radius:18px;background:var(--nacht);color:#fff;box-shadow:0 22px 50px -16px rgba(11,30,56,.65);transition:opacity .25s,transform .25s,visibility .25s}
.wunschleiste.ist-weg{opacity:0;visibility:hidden;transform:translate(-50%,24px)}
.wunschleiste__text{flex:1;min-width:0;margin:0;display:flex;align-items:center;gap:10px;font:500 .92rem/1.35 var(--text)}
.wunschleiste__text>span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wunschleiste__zahl{flex:none;display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--marker);color:var(--nacht);font:700 .84rem/1 var(--mono)}
.wunschleiste__knoepfe{display:flex;gap:8px;flex:none}
.wunschleiste .knopf{min-height:44px;padding:.6em 1.1em;font-size:.92rem;border:0}
.wunschleiste__wa{background:#25D366;color:var(--nacht)}
.wunschleiste__wa:hover{background:#1FB959;color:var(--nacht)}
.wunschleiste__form{background:#fff;color:var(--nacht)}
.wunschleiste__form:hover{background:var(--marker);color:var(--nacht)}
body.hat-wunschleiste{padding-bottom:96px}
.wunschleiste__kurz{display:none}
@media (max-width:640px){
  .wunschleiste__lang{display:none}
  .wunschleiste__kurz{display:inline}
  .wunschleiste{left:0;right:0;bottom:0;width:auto;transform:none;flex-wrap:wrap;border-radius:18px 18px 0 0;padding:12px var(--rand) calc(12px + env(safe-area-inset-bottom))}
  .wunschleiste.ist-weg{transform:translateY(24px)}
  .wunschleiste__text{flex-basis:100%}
  .wunschleiste__knoepfe{flex:1 1 100%}
  .wunschleiste .knopf{flex:1 1 0;padding:.6em .7em;font-size:.88rem}
  body.hat-wunschleiste{padding-bottom:132px}
}

/* Pakete */
.zahlweise{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--flaeche);border:1px solid var(--linie);margin:0 0 36px}
.zahlweise button{font:700 .95rem/1 var(--display);padding:.75em 1.2em;border-radius:999px;color:var(--text2);display:inline-flex;align-items:center;gap:8px}
.zahlweise button[aria-pressed="true"]{background:var(--navy);color:#fff}
.zahlweise small{font:600 .7rem/1 var(--mono);background:var(--marker);color:var(--tinte);border-radius:5px;padding:4px 6px}
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:980px){.pakete{grid-template-columns:1fr;max-width:520px}}
.paket{display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;padding:30px 28px 28px;position:relative}
.paket--premium{border:2px solid var(--kobalt);box-shadow:0 30px 60px -36px rgba(17,44,81,.45)}
.paket--exklusive{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.paket__tag{position:absolute;top:-13px;left:26px;font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--kobalt);color:#fff;border-radius:6px;padding:6px 9px}
.paket h3{font-size:1.6rem;letter-spacing:-.03em}
.paket__fuer{margin:6px 0 22px;color:var(--text2);font-size:.97rem}
.paket--exklusive .paket__fuer{color:#C6D0DF}
.preis{display:flex;align-items:baseline;gap:8px;font-family:var(--display);margin:0}
.preis b{font-size:clamp(2.6rem,2rem + 1.6vw,3.3rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.preis .einheit{font-size:1rem;font-weight:600;color:var(--text2);margin-left:.35em}
.paket--exklusive .preis .einheit{color:#C6D0DF}
.preis__zusatz{min-height:1.5em;margin:10px 0 24px;font-size:.92rem;color:var(--text2)}
.paket--exklusive .preis__zusatz{color:#C6D0DF}
.preis__plan{display:flex;align-items:center;gap:8px;margin:-14px 0 22px;font-size:.88rem;font-weight:700;color:var(--kobalt-tief)}
.preis__plan span{display:inline-flex;align-items:center;gap:6px}
.preis__plan svg{width:16px;height:16px;flex:none}
.paket--exklusive .preis__plan{color:var(--marker)}
.zahlweise__hinweis{margin:-24px 0 32px;font-size:.92rem;color:var(--text2)}
.preis__zusatz strong{color:var(--tinte);background:var(--marker);padding:0 .25em;border-radius:3px}
.paket--exklusive .preis__zusatz strong{color:var(--nacht)}
.paket__liste{display:grid;gap:12px;margin:0 0 28px;padding-top:22px;border-top:1px solid var(--linie)}
.paket--exklusive .paket__liste{border-top-color:rgba(255,255,255,.18)}
.paket__liste li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:.98rem;line-height:1.45}
.paket__liste svg{width:20px;height:20px;color:var(--kobalt);margin-top:1px}
.paket--exklusive .paket__liste svg{color:var(--marker)}
.paket__liste .menge{font-family:var(--display);font-weight:800}
.paket__liste .plus{font-weight:700}
.paket .knopf{margin-top:auto;width:100%}
.paket--exklusive .knopf--haupt{background:var(--marker);color:var(--nacht)}
.paket--exklusive .knopf--haupt:hover{background:#fff;color:var(--nacht)}
.pakete__fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;margin-top:26px;color:var(--text2);font-size:.92rem}

.paket__zahl{display:flex;align-items:center;gap:14px;margin:0 0 6px;padding:16px 0 0;border-top:1px solid var(--linie)}
.paket__zahl b{font:800 2.4rem/1 var(--display);letter-spacing:-.04em;color:var(--kobalt)}
.paket__zahl span{font-size:.9rem;line-height:1.35;color:var(--text2)}
.paket--exklusive .paket__zahl{border-top-color:rgba(255,255,255,.18)}
.paket--exklusive .paket__zahl b{color:var(--marker)}
.paket--exklusive .paket__zahl span{color:#C6D0DF}
.pakete__fuss a{font-weight:700}
.vergleich__titel{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);letter-spacing:-.025em;margin:clamp(56px,7vw,88px) 0 8px}
.vergleich__hinweis{font-size:.88rem;color:var(--text2);margin:0 0 18px}
@media (min-width:900px){.vergleich__hinweis{display:none}}
.vergleich{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--linie);border-radius:22px;background:var(--flaeche)}
.vergleich table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:.95rem}
.vergleich th,.vergleich td{padding:14px 16px;border-bottom:1px solid var(--linie);text-align:center;vertical-align:middle}
.vergleich thead th{background:var(--flaeche);font:800 1.05rem/1.2 var(--display);letter-spacing:-.015em;padding-top:20px;padding-bottom:16px}
.vergleich th[scope="row"],.vergleich thead th:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--flaeche);width:46%;min-width:240px}
.vergleich .zeile{display:flex;gap:12px;align-items:flex-start}
.vergleich .nr{flex:none;font-style:normal;margin-top:.1em;min-width:2.2em}
.vergleich .nr--leer{width:2.2em}
.vergleich .summe .nr--leer,.vergleich .info .nr--leer{display:none}
.vergleich th[scope="row"] b{display:block;font:700 .98rem/1.3 var(--display);color:var(--tinte)}
.vergleich th[scope="row"] span{display:block;font-weight:400;font-size:.86rem;line-height:1.45;color:var(--text2);margin-top:3px}
.vergleich th[scope="row"] a{color:var(--kobalt)}
.vergleich td{font-weight:700;font-family:var(--display);color:var(--tinte);white-space:nowrap}
.vergleich td svg{width:20px;height:20px;color:var(--kobalt);margin:0 auto}
.vergleich td.leer svg{color:#A3A8B2;stroke-width:2.2}
.vergleich thead .spalte--exklusive{background:var(--nacht);color:#fff}
.vergleich td:last-child{background:#F2F3FB}
.vergleich .gruppe th{text-align:left;background:var(--flaeche2);font:600 .74rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text2);padding:12px 16px}
.vergleich .summe th[scope="row"] b,.vergleich .summe td{font-size:1.15rem}
.vergleich .summe td{color:var(--kobalt)}
.vergleich .anfragen th,.vergleich .anfragen td{border-bottom:0;padding:18px 12px}
.vergleich .anfragen .knopf{min-height:42px;padding:.55em 1em;font-size:.92rem}
@media (max-width:640px){
  .vergleich table{min-width:560px;font-size:.9rem}
  .vergleich th,.vergleich td{padding:12px 10px}
  .vergleich th[scope="row"],.vergleich thead th:first-child{min-width:164px;width:38%;box-shadow:6px 0 10px -8px rgba(17,19,27,.25)}
  .vergleich th[scope="row"] span{font-size:.78rem}
}
.zahlweise small{white-space:nowrap}
/* Handy: Schalter Monatlich/Jährlich war 365 px breit und schob die Seite um 6 px nach rechts */
@media (max-width:420px){.zahlweise{max-width:100%}.zahlweise button{padding:.7em .8em;font-size:.9rem}}

/* Klartext */
.klartext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:820px){.klartext{grid-template-columns:1fr}}
.klartext__spalte{background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;padding:30px 28px}
.klartext__spalte h3{margin-bottom:20px}
.klartext__spalte li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--linie);color:var(--text2)}
.klartext__spalte li b{color:var(--tinte);font-weight:700}
.klartext__spalte svg{width:22px;height:22px;margin-top:2px}
.klartext__spalte--ja svg{color:var(--kobalt)}
.klartext__spalte--nein svg{color:var(--rot)}
.klartext__satz{margin:34px 0 0;font:800 clamp(1.4rem,1rem + 1.4vw,2rem)/1.2 var(--display);letter-spacing:-.025em;max-width:30ch}

/* FAQ */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 2px;font:700 clamp(1.06rem,1rem + .3vw,1.22rem)/1.3 var(--display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--flaeche2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311131B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--text2);margin:0 0 22px;padding-right:46px;max-width:70ch}

/* Kontakt */
.kontakt__raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:960px){.kontakt__raster{grid-template-columns:1fr}}
.auswahl{display:inline-flex;align-items:center;gap:10px;margin:8px 0 26px;padding:10px 14px;border-radius:12px;background:var(--kobalt-hauch);color:var(--kobalt-tief);font:700 .95rem/1.3 var(--display)}
.auswahl svg{width:18px;height:18px;flex:none}
.direkt{display:grid;gap:12px;margin-top:10px}
.direkt a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--flaeche);border:1px solid var(--linie);color:var(--tinte);text-decoration:none;transition:border-color .2s}
.direkt a:hover{border-color:var(--tinte);color:var(--tinte)}
.direkt svg{width:22px;height:22px;color:var(--kobalt);flex:none}
.direkt b{display:block;font:800 1.15rem/1.2 var(--display);letter-spacing:-.01em}
.direkt small{color:var(--text2);font-size:.88rem}
.formular{background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;padding:clamp(14px,2.5vw,28px);min-height:420px}
.formular iframe{width:100%;border:0;display:block;color-scheme:normal}
.formular__ersatz{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linie);font-size:.9rem;color:var(--text2)}
.formular__ersatz svg{width:16px;height:16px;flex:none;color:var(--kobalt)}
.formular__ersatz a{font-weight:700}
.hero__preis{margin:16px 0 0;font:600 .95rem/1.4 var(--display);color:var(--text2)}

/* Fuß */
.fuss{background:var(--nacht);color:#C6D0DF;padding:56px 0 40px;font-size:.95rem}
.fuss__raster{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media (max-width:820px){.fuss__raster{grid-template-columns:1fr}}
.fuss img{height:32px;width:auto;margin-bottom:16px}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:var(--marker)}
.fuss h2{font:600 .74rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#A9BCD8;margin:4px 0 14px}
.fuss li{margin-bottom:8px}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem}
.netz-verbund{margin:0}

/* Rechtstexte und Fehlerseite */
.recht{padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,110px)}
.recht .wrap{max-width:780px}
.recht h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);margin-bottom:28px}
.recht h2{font-size:1.35rem;letter-spacing:-.02em;margin:34px 0 10px}
.recht p,.recht li{color:#2c303b}
.recht ul{list-style:disc;padding-left:1.2em;margin:0 0 1em}
.fehler{min-height:62vh;display:grid;align-items:center;padding:60px 0}
.fehler h1 .q{font-size:.26em}
.fehler .lead{margin:22px 0 28px}

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

/* Bewertung 04.11.2026: Karten vergleichbar (Artikelzahl, Plus), Tabelle zum Aufklappen, Anliegen-Knopf */
.pakete__frage{min-height:44px}
.paket__zahlen{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:0 0 14px;padding:16px 0 0;border-top:1px solid var(--linie)}
.paket__zahlen .paket__zahl{border-top:0;padding:0;margin:0;gap:10px}
.paket__zahlen .paket__zahl b{font-size:2.1rem}
.paket--exklusive .paket__zahlen{border-top-color:rgba(255,255,255,.18)}
.paket__plus{margin:0 0 4px;padding:10px 12px;border-radius:10px;background:var(--kobalt-hauch);color:var(--kobalt-tief);font:700 .9rem/1.35 var(--display)}
.paket--exklusive .paket__plus{background:rgba(227,239,76,.12);color:var(--marker)}
.vergleich__auf{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.vergleich__auf>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.vergleich__auf>summary::-webkit-details-marker{display:none}
.vergleich__auf .vergleich__titel{margin:0}
.vergleich__auf[open]{padding-bottom:24px}
.vergleich__schalter{width:44px;height:44px;border-radius:50%;background:var(--kobalt);color:#fff;display:grid;place-items:center;flex:none;transition:transform .2s}
.vergleich__schalter svg{width:20px;height:20px;transform:rotate(90deg)}
.vergleich__auf[open] .vergleich__schalter{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.vergleich__schalter{transition:none}}
/* Öffentliche Auswahl von sechs Titeln (#magazine) */
.tk .tk__themen{margin:0;font-size:.88rem;line-height:1.45;color:var(--text2)}
.tk__themen b{font:600 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinte);margin-right:6px}
.tk .tk__sprachen{margin:auto 0 0;padding-top:6px;font:500 .78rem/1.3 var(--mono);color:var(--text2)}
.magazine__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.magazine__fuss p{margin:0;font-size:.92rem;color:var(--text2)}

/* Sprachumschalter (pr4geo.de, pr4geo.com, pr4geo.es), im Menü am Handy als Zeile */
.nav__sprachen{display:flex;align-items:center;gap:2px;margin-left:8px;padding-left:10px;border-left:1px solid var(--linie)}
.nav .nav__sprachen a{font:600 .74rem/1 var(--mono);letter-spacing:.06em;padding:8px 6px;color:var(--text2);border-radius:6px}
.nav .nav__sprachen a[aria-current]{color:var(--tinte);text-decoration:underline;text-underline-offset:.3em}
@media (max-width:1240px){
  .nav__sprachen{margin:10px 0 0;padding:0;border-left:0;gap:6px}
  .nav .nav__sprachen a{border-bottom:0;padding:10px 12px;font-size:.86rem;background:var(--flaeche2)}
}

/* Wortwolke der Markennamen (#magazine), Größe = Zahl der Sprachausgaben */
.wolke{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.2em 1.05em;margin:0;padding:clamp(26px,4.5vw,56px) clamp(18px,4vw,52px);list-style:none;background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;font-family:var(--display);line-height:1.15;text-align:center}
.wolke__name{font-weight:700;letter-spacing:-.02em;color:var(--tinte);white-space:nowrap}
.wolke .g1{font-size:clamp(.9rem,.82rem + .3vw,1.05rem);font-weight:600;color:var(--text2)}
.wolke .g2{font-size:clamp(1.1rem,.95rem + .6vw,1.4rem)}
.wolke .g3{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);color:var(--kobalt)}
.wolke .g4{font-size:clamp(1.8rem,1.3rem + 1.9vw,2.9rem);font-weight:800;color:var(--kobalt);letter-spacing:-.035em}