/* eyeris — Grundgestaltung der klassischen Seite (Kino, dunkel; Papier für Ablauf, Fragen, Rechtstexte).
   Regal und Kino-Fenster stehen in regal.css, die Bühne in dialog.css (Kern) + dialog-tokens.css + dialog-eyeris.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoehe) + 1rem)}
body{margin:0;background:var(--ey-schwarz);color:var(--ey-weiss);font-family:var(--ey-schrift);font-size:var(--fs-text);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img,video,svg{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3,.h3{font-size:var(--fs-h3);line-height:1.2}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
address{font-style:normal}
:focus-visible{outline:2px solid var(--ey-signal);outline-offset:3px;border-radius:4px}
.sektion--papier :focus-visible,.recht :focus-visible{outline-color:var(--ey-ziegel)}
::selection{background:var(--ey-rot);color:#fff}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.springlink{position:absolute;left:-200vw;top:.5rem;z-index:200;background:var(--ey-weiss);color:var(--ey-tinte);padding:.75rem 1.1rem;border-radius:8px}
.springlink:focus{left:.5rem}
@media (max-width:480px){h1,h2,h3{overflow-wrap:anywhere;hyphens:auto}}

.innen{width:100%;max-width:var(--breite-max);margin-inline:auto;padding-inline:var(--pad)}
.innen--schmal > *{max-width:var(--breite-schmal)}   /* schmale Lesespalte, bündig mit dem Raster der Seite (nicht mittig) */
.sektion{padding-block:var(--abstand)}
.sektion--eng{padding-block:calc(var(--abstand) * .55)}
.sektion--kopfabstand{padding-top:calc(var(--kopf-hoehe) + var(--abstand) * .7)}
.sektion--papier{background:var(--ey-papier);color:var(--ey-tinte)}
.kicker{margin:0 0 1.1em;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ey-signal)}
.sektion--papier .kicker,.recht .kicker{color:var(--ey-ziegel)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ey-nebel);max-width:46ch;text-wrap:pretty}
.sektion--papier .lead{color:var(--ey-tinte-2)}
.punkt{color:var(--ey-signal)}
.hinweis-zeile{margin-top:2rem}

/* Knöpfe: die Pille ist Markenform — je Sichtbereich EINE Haupt-Handlung, sonst Textlink mit Pfeil (CD §2.4) */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.6em;border:1px solid var(--ey-rot);border-radius:var(--ey-radius-pille);
  background:var(--ey-rot);color:#fff;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--kurve)}
.knopf:hover{background:var(--ey-rot-tief);border-color:var(--ey-rot-tief)}
.knopf:active{transform:scale(.98)}
.knopf--geist{background:transparent;border-color:rgba(244,244,244,.45);color:var(--ey-weiss)}
.knopf--geist:hover{background:rgba(244,244,244,.1);border-color:var(--ey-weiss)}
.sektion--papier .knopf--geist{border-color:rgba(31,31,31,.4);color:var(--ey-tinte)}
.sektion--papier .knopf--geist:hover{background:rgba(31,31,31,.06);border-color:var(--ey-tinte)}
.knopf--klein{min-height:44px;padding:.5em 1.15em;font-size:.92rem}
.textlink{display:inline-flex;align-items:center;gap:.35em;min-height:44px;padding:0;border:0;background:none;font-weight:600;color:inherit;text-decoration:underline;text-decoration-color:var(--ey-signal);
  text-decoration-thickness:2px;text-underline-offset:.3em;cursor:pointer}
.textlink:hover{color:var(--ey-signal)}
.sektion--papier .textlink{text-decoration-color:var(--ey-ziegel)} .sektion--papier .textlink:hover{color:var(--ey-ziegel)}
.aktionen{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin-top:1.8rem}

/* ---------- Kopfzeile ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--kopf-hoehe);background:linear-gradient(to bottom,rgba(15,15,16,.78),rgba(15,15,16,0));transition:background .3s,box-shadow .3s}
.kopf--fest,.kopf--offen{background:rgba(15,15,16,.94);box-shadow:0 1px 0 var(--ey-graphit)}
@supports (backdrop-filter:blur(8px)){.kopf--fest{background:rgba(15,15,16,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.kopf__innen{height:100%;max-width:var(--breite-max);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem)}
.kopf__marke{display:flex;align-items:center;min-height:44px;flex:none}
.kopf__wortmarke{width:131px;height:37px} .kopf__bildmarke{display:none;width:40px;height:40px}
.kopf__nav{display:flex;align-items:center;gap:clamp(.4rem,1.6vw,1.6rem);margin-left:auto}
.kopf__link{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:0 .5rem;font-weight:500;font-size:.98rem;text-decoration:none;border-radius:6px}
.kopf__link:hover,.kopf__link[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-color:var(--ey-signal);text-decoration-thickness:2px;text-underline-offset:.45em}
.kopf__gruppe{position:relative}
.kopf__aktion{display:flex;align-items:center;gap:1.1rem;flex:none}
.kopf__merk{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(244,244,244,.35);border-radius:50%;background:rgba(15,15,16,.35);cursor:pointer;transition:border-color .2s,background .2s}
.kopf__merk:hover{border-color:var(--ey-weiss)}
.kopf__merk--voll{border-color:var(--ey-signal)}
.kopf__merk-zahl{position:absolute;right:1px;top:1px;width:13px;height:13px;border-radius:50%;background:var(--ey-rot);border:2px solid var(--ey-schwarz)}
.kopf__burger{display:none;flex:none;width:46px;height:46px;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;cursor:pointer}
.kopf__burger{flex-direction:column;gap:5px}
.kopf__burger span{display:block;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--kurve),opacity .2s}
.kopf__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kopf__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kopf__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.panel{position:absolute;top:calc(100% + .6rem);left:50%;translate:-50% 0;width:min(40rem,calc(100vw - 2 * var(--pad)));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.4rem 2rem;padding:1.4rem 1.6rem;
  background:var(--ey-kohle);border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.panel__titel{margin:0 0 .4rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ey-nebel)}
.panel ul{list-style:none;margin:0;padding:0}
.panel li a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;padding:.2rem .6rem;margin-inline:-.6rem;border-radius:8px;text-decoration:none;font-size:.96rem}
.panel li a:hover{background:var(--ey-graphit)}
.panel li a span{color:var(--ey-nebel);font-size:.82rem;font-variant-numeric:tabular-nums}
.panel__fuss{grid-column:1/-1;margin-top:.4rem;padding-top:.6rem;border-top:1px solid var(--ey-graphit);display:flex;flex-wrap:wrap;gap:.2rem 1.6rem}
.panel--eins{grid-template-columns:minmax(0,1fr);width:min(22rem,calc(100vw - 2 * var(--pad)))}
@media (max-width:899px){
  .kopf__nav{display:none}
  .kopf__aktion{margin-left:auto;gap:.5rem}
  .kopf__burger{display:inline-flex}
}
@media (max-width:399px){.kopf__kontakt{padding-inline:.9rem;font-size:.88rem}.kopf__innen{gap:.4rem}}
@media (max-width:359px){.kopf__wortmarke{display:none}.kopf__bildmarke{display:block}}
.mobilmenue{position:fixed;inset:var(--kopf-hoehe) 0 0 0;z-index:59;overflow-y:auto;padding:1.2rem var(--pad) 3rem;background:var(--ey-schwarz);display:flex;flex-direction:column}
.mobilmenue a{display:flex;align-items:center;min-height:54px;border-bottom:1px solid var(--ey-graphit);font-size:1.25rem;font-weight:600;text-decoration:none}
.mobilmenue a.mobilmenue__unter{min-height:46px;padding-left:1rem;font-size:1rem;font-weight:400;color:var(--ey-nebel)}
.mobilmenue a.mobilmenue__leise{min-height:46px;font-size:1rem;font-weight:400;color:var(--ey-nebel)}
.mobilmenue a.mobilmenue__kontakt{margin-top:1.4rem;justify-content:center;min-height:52px;border:0;border-radius:var(--ey-radius-pille);background:var(--ey-rot);color:#fff;font-size:1.05rem}
@media (min-width:900px){.mobilmenue{display:none !important}}

/* ---------- Hero im Kino-Format ---------- */
.kino-hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:max(34rem,min(calc(100vw / 2.39),88vh));padding-block:calc(var(--kopf-hoehe) + 2rem) clamp(2.2rem,5vw,4.5rem);overflow:hidden}
.kino-hero__film{position:absolute;inset:0;z-index:-1;margin-inline:auto;max-width:2304px;background:#000}   /* 1920 px Quelle × 1,2 — breiter wird nicht gestreckt */
.kino-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kino-hero__film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--ey-schwarz) 0%,rgba(15,15,16,.72) 26%,rgba(15,15,16,.18) 58%,rgba(15,15,16,.5) 100%),linear-gradient(to right,rgba(15,15,16,.78),rgba(15,15,16,0) 62%)}
@media (min-width:2305px){.kino-hero__film{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}}
.kino-hero__text h1{max-width:13ch;margin-bottom:.35em}
.kino-hero__ihrer{display:block;font-weight:300}
.kino-hero__text .lead{color:var(--ey-weiss);max-width:34ch}
.kino-hero__pause{position:absolute;right:var(--pad);bottom:1.2rem;z-index:2;width:46px;height:46px;border:1px solid rgba(244,244,244,.4);border-radius:50%;background:rgba(15,15,16,.5);cursor:pointer;display:grid;place-items:center}
.kino-hero__pause span{width:12px;height:14px;border-inline:4px solid var(--ey-weiss)}
.kino-hero__pause[aria-pressed="true"] span{width:0;height:0;border:0;border-block:8px solid transparent;border-left:13px solid var(--ey-weiss);margin-left:3px}
@media (max-width:700px) and (orientation:portrait){
  .kino-hero{min-height:0;padding-top:0;align-items:start}
  .kino-hero__film{position:relative;aspect-ratio:1/1;width:100%;grid-row:1}
  .kino-hero__film::after{background:linear-gradient(to top,var(--ey-schwarz) 0%,rgba(15,15,16,.2) 38%,rgba(15,15,16,.55) 100%)}
  .kino-hero__text{grid-row:2;margin-top:-4.5rem;position:relative}
  .kino-hero__pause{bottom:5.4rem}
}
/* Telefon quer (844 × 390): Überschrift und Hauptknopf müssen ins erste Bild — Schrift richtet sich nach der Höhe */
@media (max-height:500px) and (orientation:landscape){
  .kino-hero{min-height:100vh;min-height:100svh;padding-block:calc(var(--kopf-hoehe) + .4rem) 1rem}
  .kino-hero__text h1{font-size:clamp(1.5rem,9.5vh,2.6rem);max-width:none;margin-bottom:.2em}
  .kino-hero__ihrer{display:inline}
  .kino-hero__text .kicker{margin-bottom:.5em}
  .kino-hero__text .lead{font-size:1rem;max-width:none;margin-bottom:0}
  .kino-hero .aktionen{margin-top:.9rem}
  .kino-hero__pause{bottom:.6rem}
}
@media (prefers-reduced-motion:reduce){.kino-hero__pause{display:none}}

/* ---------- Kategorie-Leiste: Chips gleicher Höhe, Breite nach Wortlänge (Ansage Michael 29.09.2026) ---------- */
.leiste{padding-block:clamp(1.4rem,3vw,2.4rem);border-bottom:1px solid var(--ey-graphit)}
.leiste--branchen,.leiste--ratgeber{border-bottom:0}
.leiste__titel{margin:0 0 .9rem;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ey-nebel)}
.leiste__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.leiste__chips li{display:flex}
.chip{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 1.35rem;border:1px solid #777780;border-radius:var(--ey-radius-pille);background:rgba(23,23,26,.72);text-decoration:none;
  font-weight:600;font-size:.98rem;line-height:1;white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:var(--ey-signal);background:var(--ey-graphit)}
.chip[aria-current="page"]{background:var(--ey-weiss);border-color:var(--ey-weiss);color:var(--ey-tinte)}
@media (max-width:699px){
  .leiste .innen{padding-inline:0}
  .leiste__titel{padding-inline:var(--pad)}
  .leiste__chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);padding:2px var(--pad) .4rem;scrollbar-width:none}
  .leiste__chips::-webkit-scrollbar{display:none}
  .leiste__chips li{flex:none;scroll-snap-align:start}
  .chip{height:48px;padding:0 1.15rem;font-size:.94rem}
}

/* ---------- Statement (Problem) ---------- */
.statement__gitter{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.statement__bild{margin:0} .statement__bild img{width:100%;border-radius:var(--ey-radius-karte);aspect-ratio:16/10;object-fit:cover}
.ursachen{list-style:none;counter-reset:u;margin:2rem 0;padding:0;display:grid;gap:1.1rem}
.ursachen li{counter-increment:u;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:.6rem;align-items:baseline}
.ursachen li::before{content:counter(u,decimal-leading-zero);grid-row:1/3;font-weight:600;font-size:.84rem;letter-spacing:.08em;color:var(--ey-ziegel)}
.ursachen b{font-size:1.15rem;font-weight:600} .ursachen span{color:var(--ey-tinte-2)}
.statement__schluss{font-size:1.1rem;max-width:44ch}
@media (max-width:899px){.statement__gitter{grid-template-columns:minmax(0,1fr)}.statement__bild{order:-1}}

/* ---------- Wirkungen (Lösung) ---------- */
/* Sieben Karten ohne Waise: oben drei breite, darunter vier schmale (12er-Raster) */
.wirkungen{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.5rem)}
.wirkungen li{display:flex;min-width:0;grid-column:span 3}
.wirkungen li:nth-child(-n+3){grid-column:span 4}
.wirkungen--drei li:nth-child(n){grid-column:span 4}
.wirkung{position:relative;display:flex;flex-direction:column;gap:.35rem;width:100%;min-width:0;padding:1.3rem 1.3rem 1.2rem;border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:var(--ey-kohle);text-decoration:none;overflow:hidden;
  transition:border-color .25s,transform .3s var(--kurve)}
.wirkung--bild{padding-top:0}
.wirkung img{width:calc(100% + 2.6rem);max-width:none;margin:0 -1.3rem .9rem;aspect-ratio:16/9;object-fit:cover;opacity:.82;transition:opacity .3s,transform .5s var(--kurve)}
.wirkung__art{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ey-signal)}
.wirkung b{font-size:1.2rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;overflow-wrap:anywhere}
.wirkung__text{font-size:.95rem;color:var(--ey-nebel);line-height:1.5}
.wirkung__mehr{margin-top:auto;padding-top:.8rem;font-size:.9rem;font-weight:600}
.sektion--papier .wirkung{background:#fff;border-color:var(--ey-papier-2)}
.sektion--papier .wirkung__art{color:var(--ey-ziegel)} .sektion--papier .wirkung__text{color:var(--ey-tinte-2)}
a.wirkung:hover{border-color:var(--ey-signal)} a.wirkung:hover img{opacity:1}
.sektion--papier a.wirkung:hover{border-color:var(--ey-ziegel)}
@media (hover:hover) and (pointer:fine){a.wirkung:hover{transform:translateY(-3px)}a.wirkung:hover img{transform:scale(1.03)}}
@media (max-width:1099px){.wirkungen li:nth-child(n){grid-column:span 6}.wirkungen li:nth-child(1){grid-column:span 12}.wirkungen--drei li:nth-child(n){grid-column:span 4}
  .wirkungen li:nth-child(1) .wirkung img{aspect-ratio:21/9}}
@media (max-width:799px){.wirkungen--drei li:nth-child(n){grid-column:span 12}}
@media (max-width:599px){.wirkungen li:nth-child(n){grid-column:span 12}.wirkungen li:nth-child(1) .wirkung img{aspect-ratio:16/9}}

/* ---------- Ablauf ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.4rem,5vw,4.5rem)}
.schritt{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:center;max-width:var(--breite-schmal)}
.schritt--bild{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);max-width:none}
.schritt--bild:nth-child(even) .schritt__bild{order:-1}
.schritt__nr{display:flex;align-items:baseline;gap:.8rem;margin:0 0 .6rem;font-weight:600;color:var(--ey-ziegel)}
.schritt__nr span:first-child{font-size:2.2rem;line-height:1;letter-spacing:-.03em}
.schritt__wer{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.schritt[data-wer="wir"] .schritt__nr{color:var(--ey-tinte-2)}
.schritt__ergebnis{margin-top:1rem;padding:.9rem 1.1rem;border-left:3px solid var(--ey-rot);background:var(--ey-papier-2);border-radius:0 8px 8px 0;font-size:.98rem}
.schritt__bild{margin:0} .schritt__bild img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--ey-radius-karte)}
@media (max-width:899px){.schritt--bild{grid-template-columns:minmax(0,1fr)}.schritt--bild .schritt__bild{order:-1}}

/* ---------- Fragen ---------- */
.fragen{margin-top:2rem;border-top:1px solid var(--ey-graphit)}
.sektion--papier .fragen{border-top-color:var(--ey-papier-2)}
.frage{border-bottom:1px solid var(--ey-graphit)} .sektion--papier .frage{border-bottom-color:var(--ey-papier-2)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:.9rem 0;font-size:1.15rem;font-weight:600;line-height:1.3;cursor:pointer;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ey-signal);border-bottom:2px solid var(--ey-signal);transform:rotate(45deg);transition:transform .25s var(--kurve);margin-right:.4rem}
.sektion--papier .frage summary::after{border-color:var(--ey-ziegel)}
.frage[open] summary::after{transform:rotate(225deg)}
.frage__text{padding:0 0 1.4rem;max-width:64ch;color:var(--ey-nebel)} .sektion--papier .frage__text{color:var(--ey-tinte-2)}

/* ---------- Zwei Türen ---------- */
.tueren__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.5rem)}
.tuer{display:flex;flex-direction:column;gap:.4rem;height:100%;padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);text-decoration:none;transition:border-color .25s,background .25s}
.tuer:hover{border-color:var(--ey-signal);background:var(--ey-kohle)}
.tuer__art{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ey-signal)}
.tuer b{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.tuer span:not(.tuer__art):not(.tuer__mehr){color:var(--ey-nebel)}
.tuer__mehr{margin-top:auto;padding-top:1rem;font-weight:600}
@media (max-width:699px){.tueren__liste{grid-template-columns:minmax(0,1fr)}}

/* ---------- Anfrage ---------- */
.anfrage{background:linear-gradient(to bottom,var(--ey-kohle),var(--ey-schwarz));border-top:1px solid var(--ey-graphit)}
.anfrage__gitter{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.anfrage__weg{margin-top:2.2rem;padding:1.3rem 1.4rem;border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:rgba(15,15,16,.5);max-width:34rem}
.anfrage__weg-titel{margin:0 0 .3rem;font-weight:600;font-size:1.1rem}
.anfrage__weg p{color:var(--ey-nebel);font-size:.98rem}
.anfrage__weg .knopf{margin-top:.4rem}
.formular__merk .haken{color:var(--ey-weiss)} .formular__merk b{font-weight:500;color:var(--ey-nebel)}
.formular{display:grid;gap:1rem;padding:clamp(1.2rem,3vw,2.2rem);border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:var(--ey-schwarz);min-width:0}
.formular__felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feld{display:grid;gap:.35rem;min-width:0;font-size:.9rem;font-weight:500}
.feld small{font-weight:400;color:var(--ey-nebel)}
.feld input,.feld select,.feld textarea{width:100%;min-width:0;min-height:50px;padding:.7rem .9rem;border:1px solid #777780;border-radius:10px;background:var(--ey-kohle);color:var(--ey-weiss);font:inherit;font-size:1rem;font-weight:400}
.feld textarea{min-height:7.5rem;resize:vertical}
.feld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ey-weiss) 50%),linear-gradient(135deg,var(--ey-weiss) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--ey-signal);outline-offset:1px;border-color:var(--ey-signal)}
.honig{position:absolute;left:-200vw;width:1px;height:1px;opacity:0}
.haken{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;font-size:.9rem;color:var(--ey-nebel);line-height:1.5}
.haken input{width:24px;height:24px;margin:.1rem 0 0;accent-color:var(--ey-rot)}
.formular__meldung{margin:0;padding:.8rem 1rem;border-radius:10px;background:var(--ey-graphit);font-size:.95rem}
.formular__meldung[data-art="fehler"]{border-left:3px solid var(--ey-signal)}
.formular__meldung[data-art="dank"]{border-left:3px solid #6fcf97}
.formular .knopf{justify-self:start}
@media (max-width:899px){.anfrage__gitter{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.formular__felder{grid-template-columns:minmax(0,1fr)}.formular .knopf{justify-self:stretch}}

/* ---------- Kopf einer Unterseite ---------- */
.unterkopf{position:relative;isolation:isolate;padding:calc(var(--kopf-hoehe) + clamp(2.5rem,7vw,6rem)) 0 clamp(2.5rem,6vw,5rem);overflow:hidden}
.unterkopf--bild{min-height:min(34rem,70vh);display:grid;align-items:end}
.unterkopf__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.unterkopf--bild::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--ey-schwarz) 2%,rgba(15,15,16,.82) 40%,rgba(15,15,16,.6) 100%)}
.unterkopf h1{max-width:20ch;font-size:clamp(2.1rem,1.3rem + 3.4vw,4rem)}
.unterkopf .lead{max-width:52ch;color:var(--ey-weiss)}

/* ---------- Rechtstexte ---------- */
.recht{background:var(--ey-papier);color:var(--ey-tinte);padding:calc(var(--kopf-hoehe) + clamp(2.5rem,6vw,5rem)) 0 var(--abstand)}
.recht h1{font-size:var(--fs-h2)} .recht h2{font-size:1.35rem;margin-top:2.2em;letter-spacing:-.01em} .recht h3{font-size:1.08rem;margin-top:1.6em;letter-spacing:0}
.recht p,.recht li{max-width:70ch;color:#2b2a28} .recht a{color:var(--ey-ziegel);overflow-wrap:anywhere}
.recht ul{padding-left:1.2rem}
.recht__vermerk{padding:1rem 1.2rem;border-left:3px solid var(--ey-rot);background:var(--ey-papier-2);border-radius:0 8px 8px 0;font-size:.95rem}
body.hell .kopf:not(.kopf--fest):not(.kopf--offen){background:rgba(15,15,16,.94)}

/* ---------- Fuß ---------- */
.fuss{padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid var(--ey-graphit);background:var(--ey-schwarz);font-size:.95rem}
.fuss__gitter{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:2.4rem clamp(1.5rem,4vw,4rem)}
.fuss__marke p{margin-top:1.1rem;max-width:36ch;color:var(--ey-nebel)}
.fuss__marke img{width:142px;height:40px}
.fuss__titel{margin:0 0 .6rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ey-nebel)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li a,.fuss__link,.fuss__kontakt a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.fuss li a:hover,.fuss__link:hover,.fuss__kontakt a:hover{color:var(--ey-signal)}
.fuss__link{padding:0;border:0;background:none;cursor:pointer;text-align:left}
.fuss__kontakt{line-height:1.2}
.fuss address{color:var(--ey-nebel);line-height:1.6;margin-bottom:.8rem}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--ey-graphit);font-size:var(--fs-klein);color:var(--ey-nebel)}
.fuss__zeile p{margin:0}
.fuss__titel--zwei{margin-top:1.4rem}
@media (max-width:1199px){.fuss__gitter{grid-template-columns:repeat(3,minmax(0,1fr))}.fuss__marke{grid-column:1/-1}}
@media (max-width:699px){.fuss__gitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.fuss__gitter{grid-template-columns:minmax(0,1fr)}}

/* ---------- Einblenden beim Scrollen (nur mit JS und ohne reduzierte Bewegung) ---------- */
.js-bewegung [data-ein]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
.js-bewegung [data-ein].ist-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* transition-duration 0s (nicht .01ms): Sonst läuft JEDE Stiländerung als Übergang, und ein Skript, das direkt danach misst, liest den alten Wert (Chips ohne Waise, 29.09.2026) */
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important}
}

/* ---------- Nachträge nach der ersten Sichtung (27.09.2026) ---------- */
/* Textlink, der umbricht: Pfeil bleibt am Text (Anfrage-Sektion mobil) */
.anfrage__weg .textlink{display:inline;text-align:left;line-height:1.9}
/* Wirkungen mobil: kompakte Karten mit kleinem Bild links — sieben Karten mit Vollbild machten die Seite unnötig lang */
@media (max-width:599px){
  .wirkungen:not(.wirkungen--drei) li:nth-child(n+2) .wirkung--bild{display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:.9rem;padding:.9rem}
  .wirkungen:not(.wirkungen--drei) li:nth-child(n+2) .wirkung--bild img{grid-row:1/5;width:6.5rem;margin:0;border-radius:8px;aspect-ratio:1/1;align-self:start}
  .wirkungen:not(.wirkungen--drei) li:nth-child(n+2) .wirkung--bild .wirkung__text{display:none}
  .wirkungen:not(.wirkungen--drei) li:nth-child(n+2) .wirkung--bild .wirkung__mehr{padding-top:.3rem}
  .wirkungen:not(.wirkungen--drei) li:nth-child(n+2) .wirkung--bild b{font-size:1.05rem}
}

/* ================= Stufe 2 (29.09.2026) — Michaels Sichtung ================= */
/* ---------- Partikel-Ebene: liegt hinter dem Inhalt; dunkle Sektionen ohne eigenen Grund lassen sie durchscheinen ---------- */
.iris-hintergrund{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* Wasserzeichen im Hero (Ansage Michael 30.09.2026): steht die Bildmarke oben, liegt der Canvas VOR dem Hero-Bild (unter Kopfzeile 60, Kino 120, Merkliste 125, Bühne 130) */
html.iris-oben .iris-hintergrund{z-index:40}
main,.fuss{position:relative;z-index:1}
.anfrage{background:linear-gradient(to bottom,rgba(23,23,26,.86),rgba(15,15,16,.94))}
.fuss{background:rgba(15,15,16,.9)}

/* ---------- Kopf einer Unterseite: Pfad, kleine Fassung ---------- */
.unterkopf .pfad{margin-bottom:.6rem}
.unterkopf--klein{padding-bottom:clamp(1.2rem,3vw,2.4rem)}
.unterkopf--klein.unterkopf--bild{min-height:min(26rem,56vh)}
.unterkopf .aktionen{margin-top:1.6rem}

/* ---------- Wirkungen: neun Karten (Stufe 2f), drei je Reihe ab 600 px; darunter Listenzeilen ---------- */
.wirkungen--raster li:nth-child(n){grid-column:span 4}
.wirkung img{aspect-ratio:16/10}
button.wirkung{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.wirkung:hover{border-color:var(--ey-ziegel)}
@media (max-width:1099px){.wirkungen--raster li:nth-child(n){grid-column:span 4}.wirkungen--raster li:nth-child(1) .wirkung img{aspect-ratio:16/10}}
@media (max-width:599px){.wirkungen--raster li:nth-child(n){grid-column:span 12}
  .wirkungen--raster li:nth-child(n) .wirkung--bild{display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:.9rem;padding:.9rem}
  .wirkungen--raster li:nth-child(n) .wirkung--bild img{grid-row:1/5;width:6.5rem;margin:0;border-radius:8px;aspect-ratio:1/1;align-self:start}
  .wirkungen--raster li:nth-child(n) .wirkung--bild .wirkung__text{display:none}
  .wirkungen--raster li:nth-child(n) .wirkung--bild .wirkung__mehr{padding-top:.3rem}
  .wirkungen--raster li:nth-child(n) .wirkung--bild b{font-size:1.05rem}}
.verweise{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.verweise li{display:flex;flex:1 1 15rem;min-width:0}
.verweis{display:flex;flex-direction:column;gap:.25rem;width:100%;padding:1rem 1.2rem;border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:rgba(23,23,26,.72);text-decoration:none;transition:border-color .2s}
.verweis b{font-weight:600;line-height:1.3} .verweis:hover{border-color:var(--ey-signal)}
.kontakt__anschrift{margin-top:2rem;font-size:.95rem;color:var(--ey-tinte-2)}

/* Logowand: Darstellung und Klappmechanik kommen aus dem LOGOWAND-STANDARD (~/Claude/Logowand → css/logowand.css, js/logowand.js); Tokens --lw-* in css/tokens.css */
.streifen:focus-visible{outline:2px solid var(--ey-signal);outline-offset:3px}

/* ---------- Kundenstimmen: Plakat links, Text rechts ---------- */
.stimmen__liste{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.4rem)}
.stimme{display:grid;grid-template-columns:clamp(9rem,13vw,13rem) minmax(0,1fr);gap:clamp(1.6rem,3vw,2.8rem);align-items:center;padding:clamp(1rem,1.6vw,1.4rem);border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:rgba(23,23,26,.78)}
.stimme.film{display:grid}
.stimme__kunde{margin:0 0 .4rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ey-signal)}
.stimme h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem);margin-bottom:.5em}
.stimme__text{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.stimme__text .textlink{display:inline;line-height:1.9;text-align:left}
@media (max-width:379px){.stimme.film{grid-template-columns:minmax(0,1fr)}.stimme .plakat{max-width:9rem}}
.stimme h3 .film__titel{display:inline;font-size:inherit;font-weight:inherit;padding:0;white-space:normal;overflow:visible;color:inherit}
.stimme__text p{color:var(--ey-nebel);font-size:.98rem}
@media (max-width:1099px){.stimmen__liste{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.stimme{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);align-items:start}.stimme__text > p:not(.stimme__kunde){display:none}}

/* ---------- Ablauf als Filmstreifen ---------- */
.ablauf{overflow:hidden}
.ablauf--rolle{overflow:clip}   /* clip statt hidden: hidden macht die Sektion zum Scroll-Container und hebelt position:sticky der Bühne aus (Prüfbefund 2c B2) */
.streifen{margin-top:2.4rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;scroll-snap-type:x proximity;scroll-padding-inline:var(--rand)}
.streifen::-webkit-scrollbar{display:none}
.streifen--zieht{cursor:grabbing;scroll-snap-type:none;user-select:none}
.streifen--rand{padding-inline:var(--rand)}
.streifen__band{list-style:none;margin:0;padding:0;display:flex;width:max-content;background:#141416;border-radius:6px;box-shadow:0 18px 40px rgba(31,31,31,.25)}
.streifen__bild{display:flex;flex-direction:column;flex:none;width:clamp(13.5rem,17vw,16.5rem);scroll-snap-align:start}
.streifen__loecher{display:block;height:22px;background:
  radial-gradient(circle at 50% 50%,transparent 0 0) ,
  repeating-linear-gradient(to right,transparent 0 10px,var(--ey-papier) 10px 24px,transparent 24px 34px);
  background-size:auto,34px 10px;background-repeat:repeat-x;background-position:0 6px;border-radius:0}
.streifen__loecher{-webkit-mask-image:none}
.streifen__feld{position:relative;display:flex;flex-direction:column;gap:.35rem;flex:1;margin-inline:5px;padding:1.1rem 1.1rem 1.2rem;min-height:12.5rem;border-radius:4px;background:#232327;color:var(--ey-weiss);border-top:4px solid #5a5a62}
.streifen__nr{font-size:2rem;font-weight:600;line-height:1;letter-spacing:-.03em;color:#8d8d95;font-variant-numeric:tabular-nums}
.streifen__wer{align-self:flex-start;padding:.22rem .6rem;border-radius:var(--ey-radius-pille);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#3a3a41;color:#e2e2e6}
.streifen__feld b{font-size:1.08rem;font-weight:600;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
.streifen__kurz{font-size:.9rem;line-height:1.45;color:#c9c9ce}
.streifen__bild[data-wer="gemeinsam"] .streifen__feld{background:var(--ey-rot);border-top-color:#fff}
.streifen__bild[data-wer="gemeinsam"] .streifen__nr{color:#fff}
.streifen__bild[data-wer="gemeinsam"] .streifen__wer{background:#fff;color:#8f1d0d}
.streifen__bild[data-wer="gemeinsam"] .streifen__kurz{color:#fff}
.streifen__bild--vor .streifen__feld{border-style:dashed solid solid;border-width:4px 1px 1px;border-color:#fff #5a5a62 #5a5a62}
.streifen__bild--vor[data-wer="wir"] .streifen__feld{background:#1a1a1d;border-top-color:#3a3a41}
/* Filmrolle (Stufe 2c, Ansage Michael 30.09.2026): ab 1024 px klebt die Bühne, Text links steht, die Rolle läuft mit dem Scrollweg der Sektion
   vorbei und liegt leicht in der Tiefe (perspective + rotateY); js/basis.js setzt nur transform. Darunter: die wischbare Rolle. */
.rolle__gitter{display:grid;gap:clamp(1.6rem,3vw,3rem)}
.rolle__text .streifen__legende{margin-top:1.2rem}
@media (min-width:1024px){
  .ablauf--rolle{padding-block:0;min-height:260vh}
  .rolle__buehne{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding-block:clamp(3rem,6vh,5rem)}
  .rolle__gitter{grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);align-items:center}
  .streifen.rolle__fenster{margin-top:0;overflow:hidden;cursor:default;scroll-snap-type:none;perspective:1400px;perspective-origin:20% 50%;padding-block:2.5rem 3rem;margin-right:calc(var(--rand) * -1)}
  .rolle__band{transform-style:preserve-3d;will-change:transform;transform:rotateY(-9deg) translateX(0)}
  .rolle__band .streifen__bild{width:clamp(15rem,17.5vw,18.5rem)}
}
@media (prefers-reduced-motion:reduce){
  .ablauf--rolle{min-height:auto;padding-block:clamp(2.2rem,5vw,4.5rem)}
  .rolle__buehne{position:static;min-height:auto;padding-block:0}
  .streifen.rolle__fenster{overflow-x:auto;perspective:none;cursor:grab;scroll-snap-type:x proximity}
  .rolle__band{transform:none !important;will-change:auto}
}
html.statisch .ablauf--rolle{min-height:auto} html.statisch .rolle__buehne{position:static;min-height:auto} html.statisch .rolle__band{transform:none !important}
.streifen__legende{list-style:none;margin:1.4rem auto 0;padding-block:0;display:flex;flex-wrap:wrap;gap:.5rem 2rem;font-size:.92rem;color:var(--ey-tinte-2)}
.streifen__legende li{display:flex;align-items:center;gap:.6rem}
.streifen__legende span{flex:none;width:1.1rem;height:1.1rem;border-radius:3px;background:#232327}
.streifen__legende [data-wer="gemeinsam"] span{background:var(--ey-rot)}
.schritt[data-wer="gemeinsam"] .schritt__wer{padding:.25rem .7rem;border-radius:var(--ey-radius-pille);background:var(--ey-rot);color:#fff}
.schritt[data-wer="wir"] .schritt__wer{padding:.25rem .7rem;border-radius:var(--ey-radius-pille);background:var(--ey-papier-2);color:var(--ey-tinte)}
.schritt__nr{align-items:center}
.schritt__teil{margin-top:1rem;padding:.9rem 1.1rem;border-radius:8px;background:#fff;border:1px solid var(--ey-papier-2);font-size:.98rem}
.vorschritte__liste{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)}
.vorschritte__liste li{padding:1.4rem;border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:rgba(23,23,26,.78)}
.vorschritte__nr{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:.9rem;border-radius:50%;border:1px solid #777780;font-weight:600;font-size:.9rem}
.vorschritte__liste p{color:var(--ey-nebel);font-size:.98rem}
@media (max-width:899px){.vorschritte__liste{grid-template-columns:minmax(0,1fr)}}

/* ---------- Region ---------- */
.region{border-top:1px solid var(--ey-graphit)}
.region__gitter{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.region__orte{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.region__orte li{padding:.45rem 1rem;border:1px solid #55555d;border-radius:var(--ey-radius-pille);background:rgba(15,15,16,.6);font-size:.92rem}
@media (max-width:899px){.region__gitter{grid-template-columns:minmax(0,1fr)}}

/* ---------- Langer Text (Filmart, Branche, Fotografie, Über uns) ---------- */
.kurzantwort{max-width:var(--breite-schmal);padding:clamp(1.3rem,2.4vw,2rem);border-left:4px solid var(--ey-rot);border-radius:0 var(--ey-radius-karte) var(--ey-radius-karte) 0;background:#fff}
.kurzantwort h2{font-size:var(--fs-h3);margin-bottom:.5em}
.kurzantwort__text{font-size:1.12rem;line-height:1.6;max-width:66ch}
.abschnitt{margin-top:clamp(2.6rem,5vw,4.6rem)}
.abschnitt__text{max-width:var(--breite-schmal)}
.abschnitt__text h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem)}
.abschnitt__text p,.abschnitt__text li{max-width:66ch;color:#2b2a28}
.abschnitt--film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4.5rem);align-items:center}
.abschnitt--links .abschnitt__text{order:2}
.punkte{margin:1rem 0;padding:0;list-style:none;display:grid;gap:.5rem}
.punkte li{position:relative;padding-left:1.6rem}
.punkte li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;border-radius:50%;background:var(--ey-rot)}
.textfilm{margin:0;min-width:0}
.textfilm__bild{position:relative;border-radius:var(--ey-radius-karte);overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 18px 44px rgba(31,31,31,.22)}
.textfilm--foto .textfilm__bild{aspect-ratio:16/10}
.textfilm__bild img{width:100%;height:100%;object-fit:cover}
.textfilm figcaption{display:grid;gap:.1rem;margin-top:.7rem;font-size:.9rem;color:var(--ey-tinte-2)}
.textfilm .film__titel{color:var(--ey-tinte);font-size:1rem}
@media (max-width:899px){.abschnitt--film{grid-template-columns:minmax(0,1fr)}.abschnitt--links .abschnitt__text{order:0}}

/* ---------- Hervorgehobener Film (Filmart-Seite) ---------- */
.held__gitter{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.4rem,3.4vw,3.6rem);align-items:center}
.held__gitter.film{display:grid}
.held__bild{position:relative;border-radius:var(--ey-radius-karte);overflow:hidden;aspect-ratio:16/9;background:#000}
.held__bild img{width:100%;height:100%;object-fit:cover}
.held__kunde{color:var(--ey-nebel);margin-top:-.4rem}
.held__text h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.4rem)}
@media (max-width:899px){.held__gitter{grid-template-columns:minmax(0,1fr)}}

/* ---------- Ratgeber ---------- */
.beitraege{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.8rem)}
.beitraege li{display:flex;min-width:0}
.beitrag{display:flex;flex-direction:column;gap:.4rem;width:100%;padding:0 1.3rem 1.3rem;border:1px solid var(--ey-graphit);border-radius:var(--ey-radius-karte);background:rgba(23,23,26,.82);text-decoration:none;overflow:hidden;transition:border-color .25s,transform .3s var(--kurve)}
.beitrag img{width:calc(100% + 2.6rem);max-width:none;margin:0 -1.3rem .8rem;aspect-ratio:16/9;object-fit:cover;opacity:.85;transition:opacity .3s}
.beitrag:not(:has(img)){padding-top:1.3rem}
.beitrag__art{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ey-signal)}
.beitrag b{font-size:1.18rem;font-weight:600;line-height:1.28;letter-spacing:-.01em}
.beitrag__text{font-size:.95rem;color:var(--ey-nebel);line-height:1.5}
.beitrag__datum{margin-top:auto;padding-top:.7rem;font-size:.84rem;color:var(--ey-nebel)}
.beitrag:hover{border-color:var(--ey-signal)} .beitrag:hover img{opacity:1}
@media (max-width:1099px){.beitraege{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:649px){.beitraege{grid-template-columns:minmax(0,1fr)}}
.beitragsseite .unterkopf h1{max-width:24ch}
.beitragsseite__text{max-width:calc(var(--breite-schmal) + 2 * var(--pad))}
.beitragsseite__text h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem);margin-top:2em}
.beitragsseite__text p,.beitragsseite__text li{max-width:68ch;color:#2b2a28}
.beitragsseite__text .lead{color:var(--ey-tinte);max-width:60ch;margin-bottom:1.6em}
.beitragsseite__film{margin:2.4rem 0;max-width:44rem}
.beitragsseite__fuss{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--ey-papier-2);font-size:.95rem}
.beitragsseite__fuss a{color:var(--ey-ziegel)}
.unterkopf .beitrag__datum{color:var(--ey-weiss);margin-top:1rem}
.treffer__leer a{color:var(--ey-weiss)}