/* toolpulse.one: Schneidetisch in Cyan. Schwarz als Grund, Cyan mit Korn als einzige Farbe,
   lange Texte nur in ausgestanzten weißen Fenstern, Rang über die Spaltenbreite, Zustand als Zeichen. */
@font-face{font-family:'League Gothic';src:url(/assets/fonts/league-gothic.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sofia Sans Condensed';src:url(/assets/fonts/sofia-sans-condensed.woff2) format('woff2');font-weight:1 1000;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/assets/fonts/source-serif-4.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(/assets/fonts/source-serif-4-italic.woff2) format('woff2');font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --schwarz:#050505;--frame:#0B0B0B;--flaeche:#161616;--strich:#2A2A2A;--strich-hell:#5E5E5E;
  --weiss:#fff;--grau:#B9BEC2;--cyan:#00C8F0;--cyan-text:#006F8F;--tinte:#0B0B0B;--tinte-2:#3F4347;--linie-hell:#DADDE0;
  --anzeige:'League Gothic',Impact,'Arial Narrow',sans-serif;
  --label:'Sofia Sans Condensed','Arial Narrow',Arial,sans-serif;
  --lese:'Source Serif 4',Georgia,serif;
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 -.21'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
  --loch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect x='5' y='3' width='12' height='8' rx='2' fill='%23050505'/%3E%3C/svg%3E");
  --kreuz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3 4 Q50 13 97 26M3 27 Q48 18 97 3' fill='none' stroke='%2300C8F0' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --perf:22px;--frame-b:calc(var(--perf)*8 - 4px);--frame-h:188px;--rand:32px;--spalt:16px;
  --h1:clamp(58px,7.22vw,104px);--h1-seite:clamp(50px,6vw,88px);--h2:clamp(38px,4vw,58px);
  --abstand:clamp(56px,7vw,104px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px;scrollbar-color:var(--cyan) var(--schwarz)}
body{margin:0;background:var(--schwarz);color:var(--weiss);font:500 18px/1.35 var(--label);overflow-x:clip;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--cyan);color:var(--schwarz)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.fenster :focus-visible{outline-color:var(--cyan-text)}
.fenster,.abo,.urteil,.rand-feld{color-scheme:light}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--cyan);color:var(--schwarz);padding:10px 16px;font-weight:700;z-index:10}
.skip:focus{top:8px}
[hidden]{display:none!important}
h1,h2{font-family:var(--anzeige);font-weight:400;text-transform:uppercase;line-height:.96;letter-spacing:.005em;text-wrap:balance;overflow-wrap:break-word}
time,.d,.pr{font-variant-numeric:tabular-nums lining-nums}

html[lang=de] h1,html[lang=es] h1,html[lang=de] h2,html[lang=es] h2{hyphens:auto}
/* Kopfzeile */
.kopfzeile{display:flex;align-items:center;gap:30px;min-height:66px;padding:0 var(--rand);border-bottom:1px solid var(--cyan)}
.marke{margin-right:auto;flex:none}.marke img{height:24px;width:auto}
.haupt{display:flex;gap:30px}
.haupt a,.cta{font-weight:600;font-size:17px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.haupt a{padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.haupt a:hover{color:var(--cyan)}.haupt a[aria-current]{border-bottom-color:var(--cyan)}
.cta{border:1px solid var(--cyan);color:var(--cyan);padding:9px 26px;transition:background .15s,color .15s}
.cta:hover{background:var(--cyan);color:var(--schwarz)}
.sprachen{display:flex;gap:2px;flex:none}
.sprachen a{font-weight:600;font-size:14px;letter-spacing:.06em;padding:4px 6px;color:var(--grau);border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.sprachen a:hover{color:var(--cyan)}.sprachen a[aria-current]{color:#fff;border-bottom-color:var(--cyan)}

/* Filmstreifen */
.streifen{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:4px;scrollbar-width:none;cursor:grab;position:relative;-webkit-overflow-scrolling:touch}
.streifen::-webkit-scrollbar{display:none}
.streifen.wischt{cursor:grabbing;scroll-snap-type:none;user-select:none}.streifen.wischt a{pointer-events:none}
.spur{width:max-content;min-width:100%}
.lineal{height:26px;background:repeating-linear-gradient(90deg,var(--strich-hell) 0 1px,transparent 1px calc(var(--perf)*2)) 4px 0 repeat-x}
.rail{background-color:var(--cyan);background-image:var(--korn)}
.perf{height:18px;background:var(--loch) repeat-x left center}
.frs{display:flex;gap:4px;padding:0 4px;counter-reset:fr}
.frs>li{flex:0 0 var(--frame-b);display:flex;position:relative;counter-increment:fr;scroll-snap-align:start}
.frs>li::before{content:counter(fr);position:absolute;left:4px;top:-44px;font-size:13px;font-weight:600;color:var(--grau);line-height:26px;font-variant-numeric:tabular-nums}
.fr{display:flex;flex-direction:column;width:100%;min-height:var(--frame-h);padding:12px;background:var(--frame);color:var(--weiss);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
a.fr:hover{box-shadow:inset 0 0 0 2px var(--weiss)}
.fr b{font:400 30px/1 var(--anzeige);text-transform:uppercase;letter-spacing:.015em;overflow-wrap:anywhere}
.fr i{font-style:normal;font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--grau);margin-top:10px}
.fr span{font-size:18px;font-weight:600;line-height:1.2;margin-top:3px}
.fr em{margin-top:auto;font-style:normal;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--grau)}
.fr.w{background:var(--weiss);color:var(--schwarz)}
.fr.w b{font-size:50px;line-height:.98}.fr.w b.g2{font-size:38px}.fr.w b.g3{font-size:30px}
.fr.w span{font-size:19px;font-weight:700;margin-top:auto;line-height:1.1}
.fr.w em{margin-top:6px;color:var(--tinte-2)}
.frs>li.z2{flex-basis:calc(var(--frame-b)*2 + 4px)}
.z2 .fr.w b,.z2 .fr.w b.g2{font-size:50px}.z2 .fr.w b.g3{font-size:38px}
.fr-wert{font-size:18px;font-weight:600;line-height:1.3;margin-top:8px;color:var(--tinte)}
.fr-wert del{margin-right:8px}
a.fr.w:hover{box-shadow:inset 0 0 0 2px var(--schwarz)}
a.fr:focus-visible{outline-color:var(--cyan);outline-offset:-4px}a.fr.w:focus-visible{outline-color:var(--schwarz)}
.flag{position:absolute;right:10px;top:-44px;width:38px;height:54px;z-index:3;background-color:#0098B8;background-image:linear-gradient(180deg,transparent 0 25px,rgba(5,5,5,.75) 25px 27px,rgba(5,5,5,.2) 27px 100%),var(--korn);clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);transform-origin:50% 0;animation:fahne 1.8s cubic-bezier(.3,.1,.3,1) both .25s;pointer-events:none}
@keyframes fahne{0%{transform:rotate(9deg)}28%{transform:rotate(-6deg)}52%{transform:rotate(3deg)}76%{transform:rotate(-1.2deg)}100%{transform:rotate(0)}}
.frs::after{content:"";flex:1 1 0;min-width:0;background:repeating-linear-gradient(90deg,rgba(5,5,5,.3) 0 1px,transparent 1px calc(var(--frame-b) + 4px))}
.rail.leer{height:54px}
.streifen.kurz{--frame-h:136px}
.pin-reihe{padding:0 var(--rand);--bleed:var(--rand);margin-bottom:8px;overflow:hidden;padding-bottom:6px}
.streifen + .abschnitt.voll,.streifen + .abschnitt{padding-top:28px}
.pin-reihe + .abschnitt.voll,.pin-reihe + .abschnitt{padding-top:16px}

/* Pins */
.lbl{font-weight:700;font-size:16px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);margin-top:16px}
.pins{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;position:relative;padding-top:6px}
.pins::before{content:"";position:absolute;left:calc(var(--bleed,0px)*-1);right:calc(var(--rand)*-1);top:0;height:1px;background:#6A6A6A}
.tag{flex:0 0 118px;min-height:92px;color:var(--weiss);background-color:var(--flaeche);background-image:repeating-linear-gradient(45deg,#2E2E2E 0 1px,transparent 1px 7px);border:1px solid #3A3A3A;transform:rotate(var(--r));transform-origin:50% 0;position:relative;animation:pendel 1.7s cubic-bezier(.3,.1,.3,1) both;animation-delay:calc(var(--i)*60ms + .3s)}
.tag::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--cyan)}
.tag a{display:block;height:100%;min-height:90px;padding:18px 8px 8px}
.tag b{font-weight:700;font-size:16px;line-height:1.05;letter-spacing:.03em;text-transform:uppercase;display:block;overflow-wrap:anywhere}
.tag:hover{background-color:#222;animation:pendel2 1.2s cubic-bezier(.3,.1,.3,1) both}
.pendelt .tag{animation:pendel2 1.3s cubic-bezier(.3,.1,.3,1) both;animation-delay:calc(var(--i)*30ms)}
@keyframes pendel{0%{transform:rotate(calc(var(--r) + 6deg))}28%{transform:rotate(calc(var(--r) - 4deg))}52%{transform:rotate(calc(var(--r) + 2deg))}76%{transform:rotate(calc(var(--r) - .8deg))}100%{transform:rotate(var(--r))}}
@keyframes pendel2{0%{transform:rotate(var(--r))}25%{transform:rotate(calc(var(--r) + 3.5deg))}50%{transform:rotate(calc(var(--r) - 2.5deg))}75%{transform:rotate(calc(var(--r) + 1deg))}100%{transform:rotate(var(--r))}}

/* Startseite: erster Bildschirm */
.top{display:grid;grid-template-columns:minmax(0,35%) minmax(0,1fr)}
.txt{padding:18px 0 0 var(--rand);grid-column:1}
.top h1{font-size:var(--h1);line-height:.93}.top h1 span{color:var(--cyan)}
.sub{font-size:21px;line-height:1.35;margin-top:10px;max-width:27em}
.suche{display:flex;max-width:440px;margin-top:12px;border:1px solid var(--strich-hell);background:var(--frame)}
.suche:focus-within{border-color:var(--cyan)}
.suche input{flex:1;min-width:0;background:none;border:0;padding:9px 12px;font-size:18px;caret-color:var(--cyan);outline:0;appearance:none}
.suche input::placeholder{color:var(--grau);opacity:1}
.suche button{background:none;border:0;border-left:1px solid var(--strich-hell);padding:0 14px;font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.suche button:hover{background:var(--cyan);color:var(--schwarz)}
.zahlen{font-size:15px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grau);font-variant-numeric:tabular-nums}
.bench{grid-column:2;display:flex;flex-direction:column;margin-left:24px;padding-top:14px;min-width:0;overflow:hidden;background-color:var(--cyan);background-image:var(--korn)}
.bench .lineal{background-image:repeating-linear-gradient(90deg,var(--schwarz) 0 1px,transparent 1px calc(var(--perf)*2))}
.bench .frs>li::before{color:var(--schwarz)}
.feld{flex:1;display:flex;flex-direction:column;background-color:var(--cyan);background-image:var(--korn);color:var(--schwarz);padding:8px var(--rand) 12px 16px;--bleed:16px}
.feld .lbl{color:var(--schwarz);margin-top:0}
.feld .pins{margin-top:8px;padding-bottom:6px}
.feld .pins::before{background:var(--schwarz)}
.feld .tag::before{background:var(--weiss)}
.feld .tag{flex:1 1 92px;max-width:118px;min-width:0}
.feld .tag a{padding-left:6px;padding-right:4px}
.feld .tag b{font-size:15px;letter-spacing:.01em}
.feld .zahlen{color:var(--schwarz);margin-top:auto;padding-top:10px}

.unten{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--spalt);padding:var(--spalt) var(--rand) 0}
.fenster{background:var(--weiss);color:var(--tinte);padding:clamp(20px,3.4vw,48px)}
.bericht{display:grid;grid-template-columns:1fr 1fr;gap:6px 36px;padding:22px 30px;align-content:start}
.bericht h2{font-size:var(--h2);line-height:.98}
.bericht h2 a:hover{color:var(--cyan-text)}
.meta{font-weight:700;font-size:16px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-2);margin-top:10px}
.meta.g{margin-top:2px}
.lk{display:inline-block;margin-top:14px;font-weight:700;font-size:18px;letter-spacing:.07em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--cyan-text)}
.lk:hover{color:var(--tinte)}
.vd{font:400 19px/1.5 var(--lese);text-wrap:pretty}
.vd a,.lese a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.vd a:hover,.lese a:hover{color:var(--tinte)}

/* Anmeldung */
.abo{background-color:var(--cyan);background-image:var(--korn);color:var(--schwarz);padding:14px 24px 14px}
.abo h2{font-size:40px;line-height:1}
.abo>p{font-size:18px;line-height:1.35;font-weight:600;margin-top:6px}
.abo-form{margin-top:10px}
.abo-feld input{display:block;width:100%;background:var(--weiss);color:var(--tinte);border:0;padding:11px 12px;font:400 18px var(--lese);caret-color:var(--cyan-text);border-radius:0;appearance:none}
.abo-feld input::placeholder{color:var(--tinte-2);opacity:1}
.abo-form button{display:block;width:100%;margin-top:6px;background:var(--schwarz);color:var(--weiss);border:0;padding:12px;font-weight:700;font-size:18px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:color .15s}
.abo-form button:hover{color:var(--cyan)}.abo-form button:disabled{opacity:.7;cursor:progress}
.abo-consent{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:15px;line-height:1.3;font-weight:600;cursor:pointer}
.abo-consent input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--schwarz)}
.abo-consent a{text-decoration:underline;text-underline-offset:2px}
.abo :focus-visible,.kat-band :focus-visible,.urteil :focus-visible,.rand-feld :focus-visible,.feld :focus-visible{outline-color:var(--schwarz)}
.abo ::selection,.kat-band ::selection,.urteil ::selection,.rand-feld ::selection,.feld ::selection{background:var(--schwarz);color:var(--weiss)}
.abo-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.abo-ts:empty{display:none}.abo-ts{margin-top:8px}
.abo-msg{margin-top:8px;font-size:16px;font-weight:700;line-height:1.2}.abo-msg:empty{display:none}
.abo-fehler{background:var(--schwarz);color:var(--weiss);padding:8px 10px}
p.abo-ok{font-size:18px;line-height:1.3;font-weight:600}

/* Abschnitte */
.abschnitt{padding:var(--abstand) var(--rand) 0}
.abschnitt.dicht{padding-top:var(--spalt)}
.dicht .spalte-kopf h2{font-size:clamp(34px,3.2vw,46px)}
.dicht .spalte-kopf{margin-left:calc(var(--rand)*-1);padding:clamp(20px,3.4vw,48px) 20px 20px var(--rand);background-color:var(--cyan);background-image:var(--korn);color:var(--schwarz)}
.seitenkopf.feld + .abschnitt.dicht{padding-top:28px}
.raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--spalt)}
.spalte-kopf h2,.kopf-reihe h2{font-size:var(--h2)}
.lk-h{display:inline-block;margin-top:16px;font-weight:700;font-size:17px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);border-bottom:1px solid var(--cyan);padding-bottom:2px}
.lk-h:hover{color:var(--weiss);border-color:var(--weiss)}
.kopf-reihe{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:var(--spalt);align-items:end;margin-bottom:24px}
.kopf-reihe p{font-size:20px;line-height:1.35}
.kopf-reihe .lk-h{justify-self:end;margin:0}
.rang{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--spalt);align-items:start}
.rang-1{display:flex;flex-direction:column;gap:14px;align-self:stretch;transition:box-shadow .15s}
.rang-1 b{font:400 var(--h2)/.98 var(--anzeige);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.rang-1 span{font:400 20px/1.45 var(--lese);color:var(--tinte);max-width:36em}
.rang-1 em{margin-top:auto;font-style:normal;font-size:15px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-2)}
.rang-1:hover{box-shadow:inset 0 0 0 2px var(--schwarz)}
.zeilen.rang-liste a{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
.rang-liste b{font-size:28px}
.rang-liste .z-meta{padding-top:0}

.kat-band{margin-top:var(--abstand);padding:44px var(--rand) 48px;background-color:var(--cyan);background-image:var(--korn);color:var(--schwarz)}
.kat-band .lk-h{color:var(--schwarz);border-color:var(--schwarz)}.kat-band .lk-h:hover{color:var(--schwarz);border-bottom-width:3px}
.kat-band .kopf-reihe{grid-template-columns:minmax(0,9fr) minmax(0,3fr)}
.kat-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--spalt);border-top:1px solid rgba(5,5,5,.5)}
.kat-liste a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 0 16px;border-bottom:1px solid rgba(5,5,5,.5);height:100%}
.kat-liste b{font:400 32px/1 var(--anzeige);text-transform:uppercase;letter-spacing:.01em}
.kat-liste em{font-style:normal;font-weight:700;font-size:16px;letter-spacing:.07em;text-transform:uppercase;align-self:center}
.kat-liste span{grid-column:1/-1;font-size:18px;font-weight:600;line-height:1.35}
.kat-liste a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.kat-liste :focus-visible{outline-color:var(--schwarz)}

.schluss{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--spalt);align-items:end;padding:var(--abstand) var(--rand) 0}
.schluss-t h2{font-size:var(--h1);line-height:.93}
.schluss-t p{font-size:21px;line-height:1.35;margin-top:12px;max-width:27em}
.schluss .abo{padding:20px 24px}
.schluss .abo-form{margin-top:0}

/* Innenseiten */
.seitenkopf{padding:26px var(--rand) 30px;max-width:1160px}
.seitenkopf h1{font-size:var(--h1-seite)}
.fakt{font-size:clamp(20px,1.7vw,23px);line-height:1.35;margin-top:14px;max-width:25em;text-wrap:pretty}
.seitenkopf.feld{display:block;max-width:none;padding:26px var(--rand) 22px}
.seitenkopf.feld .fakt{font-weight:600}
.seitenkopf.feld + .streifen{background-color:var(--cyan);background-image:var(--korn)}
.seitenkopf.feld + .streifen .lineal{background-image:repeating-linear-gradient(90deg,var(--schwarz) 0 1px,transparent 1px calc(var(--perf)*2))}
.seitenkopf.feld + .streifen .frs>li::before{color:var(--schwarz)}
.stand{margin-top:12px;font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--grau);font-variant-numeric:tabular-nums}
.krumen{font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grau);margin-bottom:12px}
.krumen a{color:var(--cyan)}.krumen a:hover{color:var(--weiss)}
.aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.knopf{display:inline-block;padding:9px 20px;background:var(--cyan);color:var(--schwarz);font-weight:700;font-size:16px;letter-spacing:.09em;text-transform:uppercase;transition:background .15s,color .15s}
.knopf:hover{background:var(--weiss)}
.knopf.rand{background:none;color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.knopf.rand:hover{background:var(--cyan);color:var(--schwarz)}
.paid-link{font-size:.82em;font-weight:600;white-space:nowrap}
.aktionen .paid-link{color:var(--grau)}

.lese-raster{padding:var(--spalt) var(--rand) 0;align-items:start}
/* Tool- und Beitragsseiten: das Cyan-Feld läuft von der Kopfzeile bis ans Ende, Titel und Text rechts daneben */
.lese-raster.hoch{padding-top:0;row-gap:0}
.hoch>.seitenkopf,.hoch>.post-kopf{padding:26px 0 24px;max-width:none}
.hoch>.leiste{min-width:0;margin:0 calc(var(--rand)*-1)}
.hoch>.leiste:empty{display:none}
@media (min-width:901px){
  .lese-raster.hoch{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto auto 1fr}
  .hoch>.seitenkopf,.hoch>.post-kopf{grid-column:2;grid-row:1}
  .hoch>.leiste{grid-column:2;grid-row:2;margin:0 calc(var(--rand)*-1) 20px calc(var(--spalt)*-1)}
  .hoch>.rand-feld{grid-column:1;grid-row:1/-1;padding-top:28px}
  .hoch>.fenster{grid-column:2;grid-row:3;align-self:start}
}
/* Randspalte als Cyan-Feld bis an den Seitenrand, Inhalt bleibt beim Lesen stehen */
.rand-feld{align-self:stretch;display:flex;flex-direction:column;gap:22px;margin-left:calc(var(--rand)*-1);padding:20px 20px 24px var(--rand);background-color:var(--cyan);background-image:var(--korn);color:var(--schwarz)}
.rand-feld .rand-spalte{flex:none}
.rand-feld .urteil{background:none;padding:0}
.rand-feld .facts>div{border-top-color:rgba(5,5,5,.5)}
.rand-feld .facts>div:first-child{border-top:0;padding-top:0}
.rand-feld .facts dt,.rand-feld .facts dd .pr{color:var(--schwarz)}
.rand-feld .facts dd a{color:var(--schwarz);text-decoration:underline;text-underline-offset:3px}
.rand-feld .toc-h{color:var(--schwarz)}
.rand-feld .toc li{border-top-color:rgba(5,5,5,.5)}
.rand-feld .toc a:hover{color:var(--schwarz);text-decoration:underline;text-underline-offset:3px}
.rand-spalte{position:sticky;top:16px;display:flex;flex-direction:column;gap:24px;max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:thin;padding-right:8px}
.feste-seite{padding-top:30px}
.feste-seite h1{font-size:var(--h1-seite)}
.facts>div{padding:10px 0;border-top:1px solid var(--strich-hell)}
.facts dt{font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grau)}
.facts dd{font-size:19px;line-height:1.3;margin-top:2px;font-weight:600}
.facts dd a{color:var(--cyan)}.facts dd .pr{display:block;font-weight:500;color:var(--grau);font-size:17px;margin-top:2px}
.nv{display:inline-flex;align-items:center;gap:6px}
.nv::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

.toc-h{font:700 16px/1.2 var(--label);letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.toc li{border-top:1px solid var(--strich)}
.toc a{display:block;padding:7px 0;font-size:17px;line-height:1.3}
.toc a:hover{color:var(--cyan)}

/* Lesespalte */
.lese{font:400 19px/1.6 var(--lese);font-optical-sizing:auto}
.lese>*{max-width:68ch}
.lese p,.lese ul,.lese ol{margin-bottom:1em;text-wrap:pretty}
.lese ul{list-style:disc;padding-left:1.15em}.lese ol{list-style:decimal;padding-left:1.3em}
.lese li{margin-bottom:.4em}.lese li::marker{color:var(--cyan-text)}
.lese h2{font-size:clamp(34px,3.2vw,46px);margin:1.3em 0 .4em;scroll-margin-top:16px}
.lese h3{font:400 clamp(26px,2.2vw,32px)/1.05 var(--anzeige);text-transform:uppercase;letter-spacing:.01em;margin:1.4em 0 .45em;padding-top:.5em;border-top:1px solid var(--linie-hell);text-wrap:balance}
.lese>:first-child{margin-top:0}
.lese>:last-child{margin-bottom:0}
.lese strong{font-weight:650}
.lese .disclosure{font:600 16px/1.3 var(--label);padding:10px 12px;border:1px solid var(--tinte)}
.lese .fein,.fein{font:500 16px/1.3 var(--label);color:var(--tinte-2)}
.fein{margin-top:14px}
.fein a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:3px}
.shot{margin:0 0 1.2em;max-width:440px}
.shot img{width:100%;border:1px solid var(--linie-hell)}
.shot figcaption{font:500 14px/1.25 var(--label);color:var(--tinte-2);margin-top:6px}
/* Fremde Bilder nur im ausgestanzten weißen Fenster */
.rand-spalte .shot{background:var(--weiss);padding:10px;margin:0;color-scheme:light}
.rand-spalte .shot figcaption{color:var(--tinte-2)}
.rand-spalte .shot a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:2px}

/* Tabellen */
.tab-w{max-width:none!important;overflow-x:auto;margin-bottom:1em;-webkit-overflow-scrolling:touch}
.tab-w table,.tab{width:100%;border-collapse:collapse;font:500 18px/1.35 var(--label)}
.tab-w th,.tab-w td{padding:9px 14px 9px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie-hell)}
.tab-w thead th{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-2);border-bottom:2px solid var(--tinte);white-space:nowrap}
.tab-w tbody th{font-weight:700}
.tab-w a{color:var(--cyan-text);text-decoration:underline;text-underline-offset:3px}
.tab-w a:hover{color:var(--tinte)}
.tab-fenster{padding:clamp(14px,2.2vw,28px) clamp(14px,2.4vw,32px)}
.tab-fenster .tab-w{margin:0}
.tab-tools tbody th a,.tab-log tbody th a{font:400 26px/1.02 var(--anzeige);text-transform:uppercase;letter-spacing:.015em;text-decoration:none;color:var(--tinte)}
.tab-tools tbody th a:hover,.tab-log tbody th a:hover{color:var(--cyan-text)}
.tab-tools .ein b{font-weight:700;display:block}
.tab-tools .ein .pr{color:var(--tinte-2);font-size:17px}
.tab-tools tbody tr:hover,.tab-log tbody tr:hover{background:#F0FBFE}
.d{white-space:nowrap}
.tab-log .was p{margin:0}
.wert{margin-top:4px!important;font-weight:600;color:var(--tinte-2)}
del{text-decoration:none;position:relative;display:inline-block;margin-right:12px;color:var(--tinte)}
del::after{content:"";position:absolute;inset:-1px -3px;background:var(--kreuz) center/100% 100% no-repeat}
ins{text-decoration:none;font-weight:700;color:var(--tinte)}
.log{list-style:none!important;padding:0!important}
.log li{padding:10px 0;border-top:1px solid var(--linie-hell);font:600 16px/1.3 var(--label)}
.log p{font:400 19px/1.5 var(--lese);margin:4px 0 0}
.log .wert{font:600 17px/1.3 var(--label)}

/* Filter und Suche */
.werkzeuge{display:flex;gap:10px;margin-bottom:var(--spalt);flex-wrap:wrap}
.werkzeuge input,.werkzeuge select{background:var(--frame);border:1px solid var(--strich-hell);padding:10px 12px;font-size:18px;border-radius:0;min-width:0}
.werkzeuge input{flex:1 1 280px;max-width:440px;caret-color:var(--cyan);appearance:none}
.werkzeuge input::placeholder{color:var(--grau);opacity:1}
.werkzeuge select{flex:0 1 280px}
.werkzeuge input:focus,.werkzeuge select:focus{border-color:var(--cyan);outline:0}
.leer{font-size:20px;padding:18px 0}
.leer button{background:none;border:0;padding:0;color:var(--cyan-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:700}
.filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--spalt)}
.filter button{background:none;border:1px solid var(--strich-hell);padding:8px 16px;font-weight:600;font-size:16px;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.filter button:hover{border-color:var(--cyan)}
.filter button[aria-pressed=true]{background:var(--cyan);color:var(--schwarz);border-color:var(--cyan)}
.zeilen li{border-top:1px solid var(--strich-hell)}
.zeilen li:last-child{border-bottom:1px solid var(--strich-hell)}
.zeilen a{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,5fr) minmax(0,4.6fr);gap:6px var(--spalt);padding:16px 0;align-items:start;transition:color .12s}
.zeilen a:hover b{color:var(--cyan)}
.z-meta{font-size:15px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grau);padding-top:4px}
.z-werbung,.rang-1 em .z-werbung{font:inherit;letter-spacing:inherit;max-width:none;color:inherit;white-space:nowrap}
.zeilen b{font:400 30px/1.02 var(--anzeige);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.z-text{font-size:18px;line-height:1.35;color:var(--grau)}
.band-streifen{padding-top:var(--abstand)}
.band-h{font-size:var(--h2);padding:0 var(--rand);margin-bottom:6px}
.abschnitt.voll .band-h{padding:0;margin-bottom:16px}
.streifen.breit{--frame-b:calc(var(--perf)*16 - 4px)}
.breit .fr p{font-size:20px;line-height:1.35;font-weight:500;margin-top:18px}

/* Beitrag */
.post-kopf{padding:26px var(--rand) 12px}
.post-titel h1{font-size:clamp(44px,4.8vw,72px)}
.urteil{font:400 19px/1.45 var(--lese);text-wrap:pretty}
.urteil strong{font-weight:700}
.urteil a{text-decoration:underline;text-underline-offset:3px}
.nachbarn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);padding:var(--abstand) var(--rand) 0}
.nachbarn a{display:block;padding-top:12px;border-top:1px solid var(--cyan)}
.nachbarn a[rel=next]{grid-column:2;text-align:right}
.nachbarn span{display:block;font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grau);margin-bottom:6px}
.nachbarn b{font:400 28px/1.04 var(--anzeige);text-transform:uppercase;letter-spacing:.01em}
.nachbarn a:hover b{color:var(--cyan)}

/* Fußzeile */
.fuss{margin-top:var(--abstand)}
.fuss-perf{height:18px;background:var(--loch) repeat-x left center var(--cyan);background-image:var(--loch),var(--korn)}
.fuss-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px var(--spalt);padding:28px var(--rand) 32px;color:var(--grau);font-size:17px;line-height:1.3}
.fuss-text p+p{margin-top:8px}
.fuss-text a{color:var(--weiss);text-decoration:underline;text-underline-offset:3px}
.fuss-nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-content:start;justify-content:flex-end;font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase}
.fuss-nav a{padding:4px 0;color:var(--weiss)}.fuss-nav a:hover{color:var(--cyan)}
.fuss-c{grid-column:1/-1;font-size:15px}

/* Schmaler als Desktop */
/* Werbung in eigener Sache: nie in Vergleichen oder auf Tool-Seiten */
.ygg{padding-top:var(--abstand)}
.ygg-lineal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;align-items:flex-end;padding:0 var(--rand) 8px;font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grau);font-variant-numeric:tabular-nums}
.ygg-lineal strong{font-weight:700;color:var(--weiss)}
.ygg-welten{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:0 4px}
.ygg-welten li{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:96px;padding:12px;background-color:var(--frame);color:var(--weiss)}
.ygg-welten b{font:400 26px/1 var(--anzeige);text-transform:uppercase;letter-spacing:.015em}
.ygg-welten span{font-size:14px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grau)}
.ygg-welten .leuchtet{background-color:var(--weiss);color:var(--schwarz)}
.ygg-welten .leuchtet span{color:var(--tinte-2)}
.ygg-welten .glimmt{background-image:repeating-linear-gradient(135deg,#2E2E2E 0 2px,transparent 2px 7px)}
.ygg-welten .dunkel{background-color:var(--schwarz)}
.ygg-t{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--spalt);padding:28px var(--rand) 0;align-items:start}
.ygg .ygg-t h2{font-size:var(--h2);max-width:16em;hyphens:manual}
.ygg-text{display:flex;flex-direction:column;gap:12px;font-size:19px;line-height:1.35;text-wrap:pretty}
.ygg-wege{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
.ygg-wege .lk-h{margin-top:0;white-space:nowrap}
@media (max-width:1180px){.ygg-welten{grid-template-columns:repeat(3,minmax(0,1fr))}.ygg-welten li{min-height:84px}}
@media (max-width:900px){.ygg-t{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.ygg-welten li{padding:10px 8px}.ygg-welten b{font-size:clamp(19px,5.6vw,24px);letter-spacing:0}.ygg-welten span{font-size:13px;letter-spacing:.05em}.ygg-lineal{font-size:14px;letter-spacing:.05em}}
@media (max-width:1180px){
  .haupt{gap:20px}.kopfzeile{gap:20px}.cta{padding:8px 16px}
  .top{grid-template-columns:minmax(0,1fr)}
  .txt{padding:22px var(--rand) 0;grid-column:1}
  .suche{margin-top:14px}
  .bench{grid-column:1;margin:18px 0 0;padding-top:10px}
  .feld{padding:8px var(--rand) 14px;--bleed:var(--rand)}
  .sub,.schluss-t p{max-width:34em}
  .bericht{grid-template-columns:1fr}
  .b-kopf{display:contents}.bericht .lk{order:2;justify-self:start}
  .kat-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kopf-reihe{grid-template-columns:minmax(0,1fr);align-items:start;gap:8px}
  .kat-band .kopf-reihe{grid-template-columns:minmax(0,1fr)}
  .kopf-reihe .lk-h{justify-self:start}
  .zeilen a{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  :root{--rand:16px;--spalt:12px}
  .unten,.raster,.schluss,.rang{grid-template-columns:minmax(0,1fr)}
  .rand-spalte{position:static;max-height:none;overflow:visible;padding-right:0}
  .rand-spalte:empty,.rand-feld.leer{display:none}
  .rand-feld{margin:0 calc(var(--rand)*-1);padding:16px var(--rand) 18px}
  .rand-feld{margin-bottom:12px}
  .dicht .spalte-kopf{margin:0 calc(var(--rand)*-1);padding:14px var(--rand) 16px}
  .kat-liste{grid-template-columns:minmax(0,1fr)}
  .fuss-in{grid-template-columns:minmax(0,1fr)}
  .fuss-nav{justify-content:flex-start}
  .nachbarn{grid-template-columns:minmax(0,1fr)}
  .nachbarn a[rel=next]{grid-column:auto;text-align:left}
  .schluss-t h2{font-size:clamp(58px,14vw,104px)}
  /* Tabellen werden auf dem Handy zu Zeilenblöcken, damit nichts seitlich wandert */
  .tab-tools thead,.tab-log thead,.tab-plaene thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tab-tools,.tab-tools tbody,.tab-tools tr,.tab-tools th,.tab-tools td,
  .tab-log,.tab-log tbody,.tab-log tr,.tab-log th,.tab-log td,
  .tab-plaene,.tab-plaene tbody,.tab-plaene tr,.tab-plaene th,.tab-plaene td{display:block;width:100%}
  .tab-w tbody tr{padding:12px 0;border-bottom:1px solid var(--linie-hell)}
  .tab-w .tab tbody th,.tab-w .tab tbody td{border:0;padding:2px 0}
  .tab td[data-l]{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:8px}
  .tab td[data-l]::before{content:attr(data-l);font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte-2);padding-top:3px;line-height:1.15}
  .d{white-space:normal}
  .tab-log tr{display:flex;flex-direction:column}.tab-log tbody th{order:-1}
  .abschnitt.dicht{padding-top:28px}
}
/* Kopfzeile zweizeilig: darf nicht erst bei 640 px greifen, sonst ragt der Knopf aus der Seite. Mit Sprachwahl und längeren Menüs auf Deutsch und Spanisch ab 880 px */
@media (max-width:880px){
  .kopfzeile{display:grid;grid-template-columns:auto 1fr auto;justify-content:space-between;row-gap:6px;padding-top:10px;padding-bottom:6px}
  .marke{margin:0}.marke img{height:20px}
  .sprachen{grid-column:2;grid-row:1;justify-self:end}
  .cta{grid-column:3;grid-row:1}
  .haupt{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:12px}
  .sprachen a{font-size:13px;padding:3px 6px}
  .haupt a{font-size:16px;letter-spacing:.07em}
  .cta{font-size:14px;padding:7px 10px;letter-spacing:.07em}
}
/* Auf dem Handy passt die Sprachwahl nicht neben Logo und Knopf: eigene schmale Zeile */
@media (max-width:480px){
  .kopfzeile{grid-template-columns:auto auto}
  .sprachen{grid-column:1/-1;grid-row:3;justify-self:end;margin-top:-4px}
  .cta{grid-column:2}
  .sprachen a{padding:2px 7px}
}
@media (max-width:640px){
  .fenster{padding:18px 16px}
  .bericht{padding:18px 16px}
  .tag,.feld .tag{flex:0 1 calc(33.33% - 7px);min-width:0;min-height:74px}.pin-reihe .tag{flex:0 0 118px}.tag a{min-height:72px;padding:14px 7px 6px}.tag b{font-size:15px}
  .lese{font-size:18px}
}
@media (max-width:360px){.feld .tag b{letter-spacing:0}}
@media (min-width:641px){.feld .tag{min-width:min-content}.feld .tag b{overflow-wrap:break-word}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .kopfzeile,.streifen,.rail,.pins,.pin-reihe,.schluss,.abo,.fuss-perf,.fuss-nav,.suche,.filter,.werkzeuge{display:none}
  *,*::before,*::after{background:none!important;color:#000!important;box-shadow:none!important}
  html,body{background:#fff!important;color-scheme:light}
  .raster,.top,.unten,.rang{display:block}.rand-feld{margin:0;padding:0}.fenster{padding:0}
}
.nach-strecke{height:12px}