/* Gestaltung der Landingpage regio-media.info
   Grundzustand ist das ruhige Standbild (Telefone, reduzierte Bewegung, ohne Skript).
   Die Scroll-Fahrt gilt nur unter html.scrub, das start.js und seite.js setzen.
   Pins und Zettel im Flug sind fest ins Video eingerechnet, hier liegt nur die Pinnwand am Ende. */

@font-face{font-family:"Bricolage Grotesque";src:url("schrift/bricolage-grotesque-latin.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("schrift/source-sans-3-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("schrift/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --canvas:#f4f8fb;
  --panel:#ffffff;
  --brand:#0a71b3;
  --brand-deep:#075a8f;
  --accent:#7bb52a;
  --accent-hover:#6aa01f;
  --accent-muted:#bfe37a;
  --k-gruen:#4aa02c;
  --k-lime:#a2c614;
  --k-tuerkis:#1aa391;
  --k-blau:#1472b8;
  --zettel:#d7eec5;
  --text-primary:#12324a;
  --text-secondary:#4a5f70;
  --schrift-titel:"Bricolage Grotesque","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --schrift-text:"Source Sans 3","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --schrift-klein:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --weich:cubic-bezier(.22,.61,.36,1);
  --ruhig:cubic-bezier(.65,0,.35,1);
  --tschatten:0 1px 2px rgba(6,16,26,.85),0 3px 14px rgba(6,16,26,.6),0 10px 44px rgba(6,16,26,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--canvas);color:var(--text-primary);
  font-family:var(--schrift-text);font-size:1.0625rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p{margin:0}
a{color:var(--brand-deep)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
main:focus{outline:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--panel);padding:.6rem 1rem;border-radius:.5rem;transition:top .25s var(--weich)}
.sprung:focus{top:1rem}

/* Kopfzeile */
.kopf{
  position:fixed;left:0;right:0;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,4vw,3rem);
  background:rgba(255,255,255,.95);
  border-bottom:1px solid rgba(10,113,179,.14);
  transition:background .5s var(--weich),border-color .5s var(--weich);
}
.kopf nav{display:flex;align-items:center;gap:1.4rem}
.marke{display:inline-flex;align-items:center;background:#fff;border-radius:.7rem;padding:.28rem .7rem .34rem;text-decoration:none;box-shadow:0 4px 14px -6px rgba(18,50,74,.35)}
.marke img{display:block;height:2.5rem;width:auto}
.telefon{font-family:var(--schrift-klein);font-size:.85rem;font-weight:500;color:var(--text-primary);text-decoration:none;transition:color .5s var(--weich)}
/* über dem Film ist die Kopfzeile durchsichtig */
body.im-film .kopf{background:transparent;border-color:transparent}
body.im-film .telefon{color:#fff;text-shadow:var(--tschatten)}

/* Knöpfe */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#0b2a12;font-weight:700;text-decoration:none;
  padding:.9rem 1.6rem;border-radius:999px;
  transition:background .25s var(--weich),transform .25s var(--weich);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-klein{padding:.5rem 1.1rem;font-size:.95rem}
.textlink{font-weight:600;text-underline-offset:.22em}
@media (max-width:620px){
  .telefon{display:none}
  .marke img{height:2rem}
  .btn-klein{padding:.45rem .85rem;font-size:.85rem;white-space:nowrap}
}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ------------------------------------------------------------------
   Startbereich, Grundzustand: Standbild
------------------------------------------------------------------ */
.hero{position:relative}
.stage{
  position:relative;min-height:100svh;overflow:hidden;
  padding:min(62vw,46svh) clamp(1rem,5vw,4rem) 3rem;
  display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem;align-items:start;
}
.welt{position:absolute;inset:0;z-index:0}
.welt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,248,251,0) 28%,rgba(244,248,251,.92) 62%,var(--canvas) 78%)}
.poster{position:absolute;inset:0;background:url("hero-poster.jpg") 62% 3.6rem/auto min(70vw,52svh) no-repeat var(--canvas)}
.poster-ende,.dunkel,.hinten,.ring,.cue,.hero video,.erster-knopf{display:none}

.band{position:relative;z-index:2;order:1}
.b1,.b2,.b3{display:none}
.schirm{position:relative;z-index:2;order:2}

.karte{position:relative;max-width:42rem}
.zeile,.b4 h1{
  font-family:var(--schrift-titel);font-weight:800;line-height:1.0;letter-spacing:-.028em;
}
.b4 h1{font-size:clamp(2.2rem,4.4vw,4.2rem);max-width:15ch;color:var(--text-primary)}
.b4 h1 em,.b4 .w.em{font-style:normal;color:var(--brand)}
.w{display:inline-block}
.satz{display:block}
.dach{
  font-family:var(--schrift-klein);font-size:.78rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-deep);margin-bottom:.85rem;
}
.unter{font-size:1.2rem;color:var(--text-secondary);max-width:42ch;margin:1.1rem 0 1.6rem}
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}

/* Pinnwand: dem Portal Regio-Ortenau.de nachempfunden. Alle Maße hängen an --u */
/* Die Regio-Plattform im Bildschirm: Kopf, Reiter und die Pinnwand. Alle Maße hängen an der Breite der Fläche (cqw). */
.schirm{container-type:inline-size}
.tafel{
  --u:1.1995cqw;--lande:1;
  position:relative;width:100%;aspect-ratio:var(--seiten,1.495);overflow:hidden;
  background:#f6f7f9;border-radius:1.2cqw;box-shadow:0 2.4cqw 6cqw -2.4cqw rgba(18,50,74,.4);
}
.portal-kopf{display:flex;align-items:center;gap:2cqw;height:6.2cqw;padding:0 2.5cqw;background:#fff;border-bottom:1px solid #e3e6ea}
.portal-logo{display:block;height:4.4cqw;width:auto}
.portal-spruch{font-size:.95cqw;font-weight:600;line-height:1.25;color:#2a3542;max-width:11cqw}
.portal-suche{flex:1;font-size:1.05cqw;color:#7d8894;background:#eef0f3;border-radius:999px;padding:.9cqw 1.6cqw}
.portal-knopf{font-size:1cqw;font-weight:600;color:#2a3542;border:1px solid #d5d9df;border-radius:999px;padding:.7cqw 1.4cqw}
.portal-gruen{background:#3f9c35;border-color:#3f9c35;color:#fff}
.portal-reiter{display:flex;gap:.8cqw;padding:1.1cqw 2.5cqw .9cqw}
.portal-reiter span{font-size:1cqw;font-weight:600;color:#2a3542;background:#fff;border:1px solid #e3e6ea;border-radius:999px;padding:.55cqw 1.3cqw}
.portal-reiter .an{background:#1773bb;border-color:#1773bb;color:#fff}
.portal-reiter i{font-style:normal;font-size:.72cqw;background:#3f9c35;color:#fff;border-radius:999px;padding:.1cqw .5cqw;margin-left:.3cqw}

/* sieben feste Spalten: die unterste Karte jeder Spalte läuft wie auf der echten Seite unten aus dem Bild */
.brett{position:relative;padding:.4cqw 2.5cqw 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1cqw;align-items:start}
.spalte{display:flex;flex-direction:column;gap:1cqw;min-width:0}
.spalte > *{transform:rotate(var(--r,0deg))}
.brett .pin,.brett .zettel{width:100%}
/* der Klebestreifen liegt im durchsichtigen Rand, sonst rutscht er beim Spaltenumbruch in die Nachbarspalte */
.zettel{border-top:calc(var(--u)*.62) solid transparent;background-clip:padding-box}
.zr1{--r:-.8deg}
.zr2{--r:.7deg}

.pin{
  width:calc(var(--u)*10.6);overflow:hidden;
  background:#fffdf8;color:#1b2a36;border:1px solid #e3e6ea;border-radius:calc(var(--u)*1.05);
  box-shadow:0 calc(var(--u)*.3) calc(var(--u)*.9) rgba(18,50,74,.14);
  font-family:var(--schrift-text);line-height:1.3;
}
.pin .bild{position:relative;aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#dbe3ea}
.bild-kaechelen{background-image:url("pins/pin-kaechelen.webp")}
.bild-autoren{background-image:url("pins/pin-autorennetzwerk.webp")}
.bild-guenther{background-image:url("pins/pin-guenther.webp")}
.bild-haller{background-image:url("pins/pin-haller.webp")}
.bild-oelmuehle{background-image:url("pins/pin-oelmuehle.webp")}
.bild-amb{background-image:url("pins/pin-amb.webp")}
.bild-heckmann{background-image:url("pins/pin-heckmann.webp")}
.bild-deck{background-image:url("pins/pin-deck.webp")}
.bild-hautwohl{background-image:url("pins/pin-hautwohl.webp")}
.bild-naturerdung{background-image:url("pins/pin-naturerdung.webp")}
.bild-eisenbeiss{background-image:url("pins/pin-eisenbeiss.webp")}
.bild-jobfinder{background-image:url("pins/pin-jobfinder.webp");background-position:center top}
.bild-weiss{background-image:url("pins/pin-weiss.webp")}
.bild-jazzcolours{background-image:url("pins/pin-jazzcolours.webp");background-position:center top}
.bild-fix{background-image:url("pins/pin-fix.webp")}
.bild-brillen{background-image:url("pins/pin-brillen.webp")}
.bild-kachelofen{background-image:url("pins/pin-kachelofen.webp");background-position:right center}
.bild-pellets{background-image:url("pins/pin-pellets.webp")}
.bild-handlauf{background-image:url("pins/pin-handlauf.webp")}
.bild-messe{background-image:url("pins/pin-messe.webp")}
.bild-wundberatung{background-image:url("pins/pin-wundberatung.webp")}
.schild{
  position:absolute;left:calc(var(--u)*.6);top:calc(var(--u)*.6);
  display:inline-flex;align-items:center;gap:calc(var(--u)*.3);
  color:#fff;font-size:calc(var(--u)*.62);font-weight:600;letter-spacing:.01em;white-space:nowrap;
  padding:calc(var(--u)*.24) calc(var(--u)*.6);border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.schild i{width:calc(var(--u)*.34);height:calc(var(--u)*.34);border-radius:50%;background:#fff;opacity:.85}
.m-neu{background:#1773bb}
.m-kultur{background:#138a8a}
.m-angebot{background:#b88520}
.m-job{background:#8e44ad}
.koerper{padding:calc(var(--u)*.75) calc(var(--u)*.8) calc(var(--u)*.8)}
.ptitel{display:block;font-family:var(--schrift-titel);font-size:calc(var(--u)*.88);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin-bottom:calc(var(--u)*.5)}
.meta{display:flex;align-items:center;gap:calc(var(--u)*.4);font-size:calc(var(--u)*.66);font-weight:600;color:#2a3542;border-top:1px solid #e3e6ea;padding-top:calc(var(--u)*.5)}
.av{flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u)*1.25);height:calc(var(--u)*1.25);border-radius:50%;color:#fff;font-size:calc(var(--u)*.62);font-weight:600}

.zettel{
  position:relative;width:calc(var(--u)*9.9);border-radius:2px;color:#1b2a36;
  background:linear-gradient(168deg,#e4f4d7 0%,var(--zettel) 78%,#c8e3b2 100%);
  padding:calc(var(--u)*1.5) calc(var(--u)*.85) calc(var(--u)*.8);
  box-shadow:0 calc(var(--u)*.6) calc(var(--u)*1.1) calc(var(--u)*-.5) rgba(60,90,30,.55);
  font-family:var(--schrift-text);font-size:calc(var(--u)*.74);line-height:1.3;font-weight:600;
}
.zettel::before{
  content:"";position:absolute;left:50%;top:calc(var(--u)*-.56);
  width:calc(var(--u)*5.4);height:calc(var(--u)*1.3);
  background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.1);
  transform:translateX(-50%) rotate(-2deg);
}
.zettel::after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 calc(var(--u)*1.2) calc(var(--u)*1.2);border-color:transparent transparent rgba(90,130,50,.22) transparent}
.zkopf{display:block;font-size:calc(var(--u)*.56);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#3f7d2c;margin-bottom:calc(var(--u)*.44)}
.kat{display:inline-block;background:#3f9c35;color:#fff;font-size:calc(var(--u)*.64);font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:calc(var(--u)*.38);padding:calc(var(--u)*.12) calc(var(--u)*.5);margin-bottom:calc(var(--u)*.38)}
.titel{display:block;font-size:calc(var(--u)*.8);line-height:1.3;font-weight:600}
.zettel .ort{display:block;color:#3f4a55;font-weight:600;font-size:calc(var(--u)*.66);border-top:1px dashed rgba(90,130,50,.35);margin-top:calc(var(--u)*.5);padding-top:calc(var(--u)*.38)}

/* am Telefon wäre die Plattform im Startbereich zu klein zum Lesen, dort folgt gleich die Pinnwand */
@media (max-width:720px){html:not(.scrub) .schirm{display:none}}

@media (min-width:1000px){
  /* Standbild am großen Bildschirm: links der Text, rechts das Foto, darunter die Pinnwand */
  html:not(.scrub) .stage{padding-top:0;padding-bottom:4rem;gap:0}
  html:not(.scrub) .welt{bottom:auto;height:min(100svh,54rem)}
  html:not(.scrub) .poster{background-size:cover;background-position:center}
  html:not(.scrub) .welt::after{background:linear-gradient(90deg,rgba(244,248,251,.92) 0%,rgba(244,248,251,.7) 34%,rgba(244,248,251,0) 62%),linear-gradient(0deg,var(--canvas) 0%,rgba(244,248,251,0) 16%)}
  html:not(.scrub) .b4{display:flex;align-items:center;min-height:min(100svh,54rem);padding-top:4rem}
  html:not(.scrub) .schirm{padding-top:3.5rem}
}

/* ------------------------------------------------------------------
   Startbereich mit Scroll-Fahrt
------------------------------------------------------------------ */
html.scrub .hero{height:740vh}
html.scrub .stage{position:sticky;top:0;height:100vh;min-height:0;padding:0;display:block}
html.scrub .welt{inset:auto;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
html.scrub .welt::after{display:none}
html.scrub .poster{background:url("hero-poster.jpg") center/cover no-repeat}
html.scrub .hero video{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--weich);transform:translateZ(0);
}
html.scrub .stage.video-ready video{opacity:1}
html.scrub .poster-ende{display:block;background:none;opacity:0}
html.scrub .stage.video-failed .poster-ende{background:url("hero-ende.jpg") center/cover no-repeat}

/* Abdunklung links, damit die weiße Schrift auf jedem Bild lesbar bleibt */
html.scrub .dunkel{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:
    linear-gradient(98deg,rgba(6,18,30,.66) 0%,rgba(6,18,30,.46) 30%,rgba(6,18,30,.1) 54%,rgba(6,18,30,0) 66%),
    linear-gradient(180deg,rgba(6,18,30,.3) 0%,rgba(6,18,30,0) 20%),
    linear-gradient(0deg,rgba(6,18,30,.5) 0%,rgba(6,18,30,.24) 22%,rgba(6,18,30,0) 44%);
}
html.scrub .hinten{display:block;position:absolute;inset:0;z-index:2;background:var(--canvas);opacity:0;pointer-events:none}

html.scrub .schirm{
  position:absolute;left:0;top:0;z-index:3;order:0;
  background:var(--canvas);overflow:hidden;opacity:0;visibility:hidden;
  transform-origin:0 0;will-change:transform,opacity;container-type:size;
}
/* im Film liegt die Anzeige im Gegenlicht: derselbe Farbton, er weicht beim Eintauchen */
html.scrub .schirm::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ton,#0a2e0d);opacity:calc(var(--schleier,1)*var(--ton-a,.24))}
html.scrub .schirm{container-type:size}
/* erst füllt die Plattform den ganzen Bildschirm, dann rückt sie als Fenster nach rechts und macht Platz für die Überschrift */
html.scrub .tafel{
  position:absolute;left:0;top:0;height:100%;aspect-ratio:auto;transform-origin:97% 52%;
  transform:scale(calc(1 - .42*var(--lande)));
  border-radius:0;box-shadow:none;will-change:transform;
}
html.scrub .tafel.fenster{border-radius:1.6cqw;box-shadow:0 2.4cqw 6cqw -2.4cqw rgba(18,50,74,.45)}

html.scrub .band{
  position:absolute;left:clamp(1.2rem,5.5vw,6rem);top:13vh;z-index:5;order:0;
  width:min(46rem,52vw);opacity:0;visibility:hidden;
}
html.scrub .b1,html.scrub .b2,html.scrub .b3{display:block;color:#fff;text-shadow:var(--tschatten)}
html.scrub .erster-knopf{display:block}
html.scrub .zeile{font-size:clamp(2.3rem,4.3vw,4.6rem);max-width:15ch}
html.scrub .beisatz{font-size:clamp(1.05rem,1.35vw,1.35rem);font-weight:600;max-width:40ch;margin-top:1rem;opacity:clamp(0,(var(--k,0) - .6)*3,1)}
html.scrub .erster-knopf{margin-top:1.1rem;opacity:clamp(0,(var(--k,0) - .75)*4,1)}
html.scrub .erster-knopf .btn{text-shadow:none}
html.scrub .b2,html.scrub .b3{top:auto;bottom:9vh}
html.scrub .b2 .zeile,html.scrub .b3 .zeile{font-size:clamp(2.1rem,4.1vw,4.3rem);max-width:17ch}
html.scrub .b4{top:50%;transform:translateY(-46%);width:min(40rem,36vw)}
html.scrub .b4 h1{font-size:clamp(2rem,3.5vw,3.6rem)}

html.scrub .band .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.5em));
}
html.scrub .b3 .zeile{transform:scale(calc(.88 + .12*var(--k,0)));transform-origin:left center}
/* die Hauptüberschrift bleibt für Vorleseprogramme immer erreichbar */
html.scrub .b4 h1 .sr{visibility:visible}
html.scrub .b4 .unter{--ks:clamp(0,(var(--k,0) - .6)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
html.scrub .b4 .knoepfe{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

html.scrub .ring{
  display:block;position:absolute;right:1.5rem;bottom:1.5rem;z-index:6;width:2.4rem;height:2.4rem;
  color:#fff;transform:rotate(-90deg);transition:opacity .5s var(--weich);
  background:rgba(6,18,30,.45);border-radius:50%;
}
html.scrub .ring circle{stroke-dashoffset:var(--ld,126)}
html.scrub .stage.video-ready .ring,html.scrub .stage.video-failed .ring{opacity:0}
html.scrub .cue{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  position:absolute;left:50%;bottom:1.5rem;z-index:6;transform:translateX(-50%);
  font-family:var(--schrift-klein);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-shadow:var(--tschatten);
}
html.scrub .cue i{width:1px;height:1.1rem;background:currentColor;transform-origin:top;animation:zug 2.4s var(--ruhig) -1.2s infinite}
@keyframes zug{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (max-height:560px){html.scrub .cue{display:none}}

/* Standbild: Text auf heller Fläche unter dem Foto */
html:not(.scrub) .b4 .karte{
  background:rgba(255,255,255,.94);border-radius:1.1rem;padding:1.6rem 1.5rem 1.7rem;
  box-shadow:0 18px 50px -18px rgba(18,50,74,.4);
}

/* Aufnahme der Pinnwand für das Einrechnen ins Video (Adresse mit ?tafel=Zahl) */
html.tafelbild .kopf,html.tafelbild .welt,html.tafelbild .dunkel,html.tafelbild .band,
html.tafelbild .ring,html.tafelbild .cue,html.tafelbild .abschnitt,html.tafelbild .umgebung,html.tafelbild .fuss{display:none !important}
html.tafelbild .spalte > *{visibility:hidden}
html.tafelbild .spalte > .da{visibility:visible}

/* ------------------------------------------------------------------
   Abschnitte darunter (Demo) und Fuß
------------------------------------------------------------------ */
h3{margin:0}
.navlink{font-weight:600;font-size:.95rem;color:var(--text-primary);text-decoration:none;transition:color .5s var(--weich)}
.navlink:hover{text-decoration:underline;text-underline-offset:.25em}
body.im-film .navlink{color:#fff;text-shadow:var(--tschatten)}
@media (max-width:900px){.navlink{display:none}}
.btn-blau{background:var(--brand);color:#fff}
.btn-blau:hover{background:var(--brand-deep)}
button.btn{border:0;font:inherit;font-weight:700;cursor:pointer}

/* eine feste, sehr leise Ebene mit hellem Morgenlicht hinter allen Abschnitten */
.umgebung{
  position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 24% 20%,rgba(255,243,212,.6),rgba(255,243,212,0) 70%),
    radial-gradient(46vmax 46vmax at 80% 70%,rgba(10,113,179,.09),rgba(10,113,179,0) 70%),
    radial-gradient(36vmax 36vmax at 62% 34%,rgba(162,198,20,.07),rgba(162,198,20,0) 70%);
  animation:drift 80s var(--ruhig) -20s infinite alternate;
}
@keyframes drift{from{transform:translate3d(-3vmax,-2vmax,0)}to{transform:translate3d(3vmax,2vmax,0)}}

.abschnitt{position:relative;padding:clamp(4.5rem,9vw,8rem) clamp(1rem,5vw,4rem)}
.abschnitt .innen{max-width:78rem;margin:0 auto}
.abschnitt h2{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.03;letter-spacing:-.025em;max-width:16ch}
.lede{font-size:1.2rem;color:var(--text-secondary);max-width:40ch;margin-top:1rem}
.hinweis{margin-top:1rem;font-size:.95rem}
mark.offen{
  background:#ffe27a;color:#3a2c00;padding:.08em .35em;border-radius:.25em;
  font-family:var(--schrift-klein);font-size:.8em;font-weight:500;letter-spacing:0;line-height:1.5;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Erkennungszeichen: die Kacheln aus dem Regio-Logo */
.kacheln{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:.24em;width:2em;rotate:-8deg;font-size:1.15rem;margin-bottom:1.2rem}
.kacheln i{display:block;aspect-ratio:1;border-radius:.24em;background:var(--k-gruen);box-shadow:0 0 0 .1em #fff}
.kacheln i:nth-child(2){background:var(--k-lime);translate:.22em -.28em}
.kacheln i:nth-child(3){background:var(--k-tuerkis);translate:-.2em .1em;scale:.8}
.kacheln i:nth-child(4){background:var(--k-blau)}
.abschnitt.sichtbar .kacheln i{animation:atem 6s var(--ruhig) -1.5s infinite}
.abschnitt.sichtbar .kacheln i:nth-child(2){animation-delay:-3s}
.abschnitt.sichtbar .kacheln i:nth-child(3){animation-delay:-4.5s}
.abschnitt.sichtbar .kacheln i:nth-child(4){animation-delay:-.4s}
@keyframes atem{0%,100%{opacity:1}50%{opacity:.6}}

/* Auftritt: erst wenn das Skript läuft, sonst steht alles im Endzustand */
html.js .abschnitt [data-auf]{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--weich),transform .9s var(--weich);
  transition-delay:calc(var(--i,0)*90ms);
}
html.js .a-pinnwand .wand [data-auf]{transform:translateY(-26px) rotate(-3deg) scale(1.03)}
html.js .a-pinnwand .wand [data-auf]:nth-child(even){transform:translateY(-26px) rotate(3deg) scale(1.03)}
html.js .a-zahlen [data-auf]{transform:scale(.94)}
html.js .abschnitt.in [data-auf],
html.js .abschnitt.in .wand [data-auf]:nth-child(n){opacity:1;transform:none}
html.js .abschnitt.fertig [data-auf]{transition-delay:0s;transition-duration:.35s}

/* 1. Pinnwand */
.a-pinnwand .innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.a-kopf{position:sticky;top:6.5rem}
.wand{--u:clamp(15px,1.28vw,20px);column-count:3;column-gap:calc(var(--u)*1.1)}
.wand > *{break-inside:avoid;width:100%;margin:0 0 calc(var(--u)*1.1)}
.wand .zettel{rotate:var(--r,0deg)}
.wand .pin:hover,html.js .abschnitt.in .wand .pin:hover{transform:translateY(-4px)}
.wand .pin{transition:transform .35s var(--weich)}
.m-eigen{background:var(--brand)}
.bild-eigen{display:grid;place-items:center;background:linear-gradient(135deg,#e6f1f9 0%,#f3f9e8 100%)}
.kacheln-gross{font-size:calc(var(--u)*2.2);margin:0}
.pin-eigen.landet{animation:landen .9s var(--weich) both}
@keyframes landen{0%{opacity:0;transform:translateY(-60px) rotate(-7deg) scale(1.12)}60%{opacity:1}100%{opacity:1;transform:none}}

.mitmachen{
  margin-top:2.2rem;padding:1.4rem 1.4rem 1.5rem;background:var(--panel);border-radius:1.2rem;
  border:1px solid rgba(10,113,179,.14);box-shadow:0 18px 50px -24px rgba(18,50,74,.35);max-width:30rem;
}
.mm-zeile{display:block;font-family:var(--schrift-titel);font-weight:800;font-size:1.4rem;line-height:1.1;letter-spacing:-.015em;margin-bottom:.9rem}
.mm-feld{display:flex;flex-wrap:wrap;gap:.6rem}
.mm-feld input{flex:1 1 12rem;min-width:0}
.mm-hinweis{font-size:.85rem;color:var(--text-secondary);margin-top:.7rem}
.mm-danach:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.1rem;padding-top:1.1rem;border-top:1px dashed rgba(18,50,74,.25);animation:auf .7s var(--weich) both}
.mm-satz{font-weight:600}
@keyframes auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

input[type=text],input[type=email],input[type=tel],textarea{
  font:inherit;color:var(--text-primary);background:#fff;width:100%;
  border:1.5px solid #7f93a3;border-radius:.7rem;padding:.75rem .9rem;
  transition:border-color .25s var(--weich),box-shadow .25s var(--weich);
}
input:hover,textarea:hover{border-color:var(--brand)}
textarea{resize:vertical;min-height:8rem}

/* 2. Zahlen */
.a-zahlen{background:var(--brand);color:#fff;padding-block:clamp(3.5rem,7vw,6rem)}
.a-zahlen .innen{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.zahl{display:flex;flex-direction:column;gap:.35rem}
.zahl:last-child{align-items:flex-end;text-align:right}
.wert{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(2.8rem,6.5vw,6rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wert mark.offen{display:inline-block;font-size:clamp(.85rem,1.3vw,1.1rem)}
.was{font-size:1.2rem;font-weight:600}
.quelle{font-family:var(--schrift-klein);font-size:.78rem;letter-spacing:.04em;opacity:.9}
.a-zahlen .kacheln{font-size:1.9rem;margin:0}

/* 3. So läuft es */
.a-schritte{background:var(--panel)}
.a-schritte h2{max-width:none;text-align:center}
.weg{position:relative;margin-top:clamp(3rem,6vw,5rem)}
.weg-linie{position:absolute;left:0;top:-1.6rem;width:100%;height:7.5rem;color:var(--accent);pointer-events:none;overflow:visible}
.weg-zug{stroke-dashoffset:0}
html.js .weg-zug{stroke-dashoffset:var(--zug,1)}
.schritte{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem)}
.schritte li{position:relative;padding-top:6.4rem}
.schritte li:nth-child(1){margin-top:1.4rem}
.schritte li:nth-child(2){margin-top:.2rem}
.zeichen{position:absolute;left:0;top:0;width:4.8rem;height:4.8rem;padding:.85rem;color:var(--brand);background:var(--panel);border-radius:50%;box-shadow:0 0 0 1.5px rgba(10,113,179,.28),0 10px 24px -12px rgba(18,50,74,.4)}
.nr{display:block;font-family:var(--schrift-klein);font-size:.8rem;letter-spacing:.12em;color:var(--brand-deep);margin-bottom:.3rem}
.schritte h3{font-family:var(--schrift-titel);font-weight:800;font-size:1.6rem;line-height:1.1;letter-spacing:-.015em;margin-bottom:.5rem}
.schritte p{color:var(--text-secondary);max-width:34ch}

/* 4. Preise */
.preis-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 3rem}
.preis-kopf .lede{margin-top:0;font-family:var(--schrift-klein);font-size:.9rem;letter-spacing:.04em}
.preise{list-style:none;margin:clamp(2rem,4vw,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:1.1rem}
.preise li{display:flex}
.preis{
  flex:1;background:var(--panel);border-radius:1.3rem;padding:1.6rem 1.5rem 1.8rem;
  border:1px solid rgba(10,113,179,.16);box-shadow:0 18px 44px -28px rgba(18,50,74,.45);
  transition:transform .35s var(--weich),box-shadow .35s var(--weich);
}
.preis:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(18,50,74,.5)}
.preis h3{font-family:var(--schrift-klein);font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep)}
.betrag{margin:.9rem 0 1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
.betrag b{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(2.3rem,3.2vw,3.1rem);line-height:1;letter-spacing:-.03em}
.betrag span{color:var(--text-secondary);font-weight:600}
.preis p:last-child{color:var(--text-secondary)}
.preis-erster{background:var(--brand-deep);color:#fff;border-color:transparent}
.preis-erster h3{color:#fff}
.preis-erster .betrag span,.preis-erster p:last-child{color:rgba(255,255,255,.92)}
.preis-knopf{margin-top:2.2rem}

/* 5. Stimmen */
.a-stimmen{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 18%,rgba(255,255,255,.75) 82%,rgba(255,255,255,0) 100%)}
.a-stimmen h2{margin-left:auto;text-align:right}
.stimmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2rem,4vw,3.5rem);align-items:start}
.stimme{margin:0}
.stimme-2{margin-top:clamp(2rem,6vw,5.5rem)}
.stimme blockquote{margin:0}
.stimme blockquote p{font-family:var(--schrift-titel);font-weight:600;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.3;letter-spacing:-.01em}
.stimme figcaption{margin-top:1.3rem;padding-left:1rem;border-left:3px solid var(--brand)}
.stimme figcaption span{display:flex;flex-direction:column;color:var(--text-secondary);font-size:.95rem}
.stimme figcaption b{color:var(--text-primary);font-size:1.05rem}

/* 6. Fragen */
.a-fragen .innen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.fragen-ruf{margin-top:1.2rem;color:var(--text-secondary)}
.fragen-ruf a{font-family:var(--schrift-klein);font-weight:500;white-space:nowrap}
.fragen details{border-bottom:1.5px solid rgba(18,50,74,.24)}
.fragen details:first-child{border-top:1.5px solid rgba(18,50,74,.24)}
.fragen summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
  padding:1.2rem 0;font-family:var(--schrift-titel);font-weight:600;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.25rem;color:var(--brand);
  background:linear-gradient(currentColor,currentColor) center/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) center/2.5px 100% no-repeat;
  transition:transform .35s var(--weich);
}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details p{padding:0 2.5rem 1.4rem 0;max-width:62ch;color:var(--text-secondary)}
.fragen details[open] p{animation:auf .5s var(--weich) both}

/* 7. Kontakt */
.a-kontakt{background:#0b2438;color:#fff}
.a-kontakt .innen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.a-kontakt h2{max-width:14ch}
.a-kontakt .lede{color:rgba(255,255,255,.88)}
.a-kontakt a{color:#fff}
.person{position:sticky;top:6.5rem}
.person img{display:block;width:100%;height:auto;border-radius:1.3rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.person-text{margin-top:1.2rem;display:grid;gap:.25rem}
.person-name{font-family:var(--schrift-titel);font-weight:800;font-size:1.35rem;letter-spacing:-.015em;margin-bottom:.3rem}
.formular{margin-top:2rem;background:var(--panel);color:var(--text-primary);border-radius:1.3rem;padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.1rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.formular a{color:var(--brand-deep)}
.f-hinweis{font-size:.9rem;color:var(--text-secondary)}
.f-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.f-feld label{display:block;font-weight:600;margin-bottom:.35rem}
.f-haken{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;align-items:start}
.f-haken input{width:1.35rem;height:1.35rem;margin:.15rem 0 0;accent-color:var(--brand)}
.f-haken label{font-weight:400;font-size:.95rem;margin:0}
.f-haken .f-fehler{grid-column:2}
.f-fehler{color:#b3261e;font-size:.9rem;font-weight:600;margin-top:.3rem}
.f-fehler:empty{display:none}
[aria-invalid=true]{border-color:#b3261e !important;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.formular .btn{justify-self:start}
.f-meldung:empty{display:none}
.f-meldung{padding:.9rem 1.1rem;border-radius:.8rem;font-weight:600;animation:auf .5s var(--weich) both}
.f-meldung.gut{background:#eaf5dc;color:#23440b}
.f-meldung.schlecht{background:#fbe9e7;color:#8c1d18}

/* Fuß */
.fuss{background:#071a2a;color:#fff;padding:2.4rem clamp(1rem,5vw,4rem) 2.8rem}
.fuss .innen{max-width:78rem;margin:0 auto;display:grid;gap:.9rem}
.fuss a{color:#fff;text-underline-offset:.25em}
.fuss-links{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.fuss .klein{font-size:.9rem;opacity:.85}
@media (pointer:coarse){.fuss-links a,.fragen-ruf a,.person-text a,.textlink,.marke{display:inline-flex;align-items:center;min-height:44px}}

@media (max-width:1000px){
  .preise{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .a-pinnwand .innen,.a-fragen .innen,.a-kontakt .innen{grid-template-columns:minmax(0,1fr)}
  .a-kopf,.person{position:static}
  .mitmachen{max-width:none}
  .wand{--u:clamp(12px,3.4vw,18px);column-count:2}
  .person{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1.2rem;align-items:center}
  .person-text{margin-top:0}
  .person{order:2}
  .weg-linie{display:none}
  .schritte{grid-template-columns:minmax(0,1fr)}
  .schritte li,.schritte li:nth-child(1),.schritte li:nth-child(2){margin-top:0;padding:0 0 0 6rem;min-height:4.8rem}
  .stimmen{grid-template-columns:minmax(0,1fr)}
  .stimme-2{margin-top:0}
  .a-stimmen h2{margin-left:0;text-align:left}
}
@media (max-width:700px){
  .a-zahlen .innen{grid-template-columns:minmax(0,1fr)}
  .a-zahlen .kacheln{display:none}
  .zahl:last-child{align-items:flex-start;text-align:left}
}
@media (max-width:560px){
  .preise,.f-reihe{grid-template-columns:minmax(0,1fr)}
}

/* Rechtsseiten: Impressum, Datenschutz, Bildnachweis */
.rechtsseite main{max-width:50rem;margin:0 auto;padding:8.5rem clamp(1rem,5vw,2rem) 5rem}
.rechtsseite h1{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.03;letter-spacing:-.025em;margin-bottom:1.2rem}
.rechtsseite h2{font-family:var(--schrift-titel);font-weight:800;font-size:1.45rem;line-height:1.15;letter-spacing:-.015em;margin:2.4rem 0 .7rem}
.rechtsseite main p{margin-bottom:.9rem;max-width:68ch}
.rechtsseite dl{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:.5rem 1.5rem;margin:1rem 0}
.rechtsseite dt{font-weight:600}
.rechtsseite dd{margin:0}
.rechtsseite table{width:100%;border-collapse:collapse;margin:1rem 0}
.rechtsseite th,.rechtsseite td{text-align:left;vertical-align:top;padding:.7rem .8rem .7rem 0;border-bottom:1px solid rgba(18,50,74,.2)}
.rechtsseite .stand{font-family:var(--schrift-klein);font-size:.85rem;color:var(--text-secondary)}
@media (max-width:600px){.rechtsseite dl{grid-template-columns:minmax(0,1fr);gap:.1rem}.rechtsseite dd{margin-bottom:.6rem}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  html.js .abschnitt [data-auf],html.js .a-pinnwand .wand [data-auf]{opacity:1;transform:none}
  html.js .weg-zug{stroke-dashoffset:0}
}
body.pause *,body.pause *::before,body.pause *::after{animation-play-state:paused !important}

/* Aufnahme der einzelnen Karten für das Einrechnen ins Video (Adresse mit ?karten=1) */
html.kartenbild,html.kartenbild body{background:transparent}
html.kartenbild body > *:not(.kartenliste){display:none !important}
/* gleiche Größe wie auf der Pinnwand bei 1600 Pixeln Breite, damit der Umbruch der Texte gleich ist */
.kartenliste{--u:22.52px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;padding:20px}
.kartenrahmen{padding:18px}
.kartenliste .pin,.kartenliste .zettel{width:238.7px;margin:0}
.kartenrahmen > *{position:relative;transform:none;box-shadow:none}

/* der Leitsatz mit in der Ortenau bricht in drei ruhige Zeilen */
html.scrub .b1 .zeile{max-width:18ch}

/* ------------------------------------------------------------------
   Umbau auf neun Sektionen (29.09.2026): Logo frei im Morgenlicht,
   vier Rubriken als Reiter, Redaktion und Schwarzes Brett, Weg des Kunden
------------------------------------------------------------------ */
.marke{background:none;box-shadow:none;padding:0;border-radius:0}
.marke img{height:3rem;transition:height .5s var(--weich)}
.kopf::before{
  content:"";position:absolute;left:-5rem;top:-5rem;width:26rem;height:14rem;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .5s var(--weich);
  background:radial-gradient(closest-side,rgba(255,255,255,.97),rgba(255,255,255,.84) 55%,rgba(255,255,255,0));
}
body.im-film .kopf::before{opacity:1}
body.im-film .marke img{height:4.6rem}
@media (max-width:620px){.marke img{height:2.4rem}}
html.scrub .b1{top:19vh}
.b4 h1,html.scrub .b4 h1{max-width:18ch}

/* 2. Zahlen mit einer Stimme */
.a-zahlen .zahl:last-of-type{align-items:flex-end;text-align:right}
.zahl-stimme{
  grid-column:1/-1;margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding-top:clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid rgba(255,255,255,.4);
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:1rem 3rem;align-items:end;
}
.zahl-stimme blockquote{margin:0}
.zahl-stimme blockquote p{font-family:var(--schrift-titel);font-weight:600;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.3;letter-spacing:-.01em}
.zahl-stimme figcaption{text-align:right;font-size:.95rem}

/* 3. Vier Rubriken */
.rubrik-kopf{max-width:46rem}
.rubriken{
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1rem,2.4vw,2rem);
  background:var(--panel);border-radius:1.5rem;border:1px solid rgba(10,113,179,.14);
  box-shadow:0 24px 60px -34px rgba(18,50,74,.45);
}
.reiterleiste{display:none;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
html.js .reiterleiste{display:flex}
.reiter{
  font:inherit;font-weight:700;cursor:pointer;color:var(--text-primary);background:var(--canvas);
  border:1.5px solid rgba(18,50,74,.32);border-radius:999px;padding:.6rem 1.3rem;min-height:44px;
  transition:background .25s var(--weich),color .25s var(--weich),border-color .25s var(--weich);
}
.reiter:hover{border-color:var(--brand)}
.reiter[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.feld{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.feld[hidden]{display:none}
.feld + .feld{margin-top:2.5rem;padding-top:2.5rem;border-top:1px dashed rgba(18,50,74,.25)}
html.js .feld + .feld{margin-top:0;padding-top:0;border-top:0}
.feld-text h3{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:.8rem}
.feld-text p{color:var(--text-secondary);max-width:38ch}
.abschnitt .paket{margin:1rem 0 1.4rem;color:var(--text-primary)}
.feld-pins{--u:clamp(13px,1.2vw,19px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.1);align-items:start}
.feld-pins .pin{width:100%;transition:transform .35s var(--weich)}
.feld-pins .pin:hover,html.js .abschnitt.in .feld-pins .pin:hover{transform:translateY(-4px)}
.feld.frisch .pin{animation:landen .7s var(--weich) backwards}
.feld.frisch .pin:nth-child(2){animation-delay:.09s}
.feld.frisch .pin:nth-child(3){animation-delay:.18s}
.feld.frisch .feld-text{animation:auf .5s var(--weich) backwards}
.bild-job-eisenbeiss{background-image:url("pins/pin-job-eisenbeiss.webp")}
.bild-job-service{background-image:url("pins/pin-job-service.webp")}

.mitmach-reihe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.mitmach-reihe .mitmachen{margin-top:0;max-width:none}
.eigen-platz{
  --u:clamp(15px,1.4vw,21px);min-height:calc(var(--u)*15.5);display:grid;place-items:center;
  border:2px dashed rgba(10,113,179,.4);border-radius:calc(var(--u)*1.3);padding:var(--u);
  transition:border-color .4s var(--weich);
}
.eigen-platz.belegt{border-color:transparent}
.eigen-leer{font-family:var(--schrift-klein);font-size:.85rem;letter-spacing:.04em;color:var(--brand-deep);text-align:center}
.eigen-platz .pin{width:calc(var(--u)*11.5)}

/* 4. Redaktion und Schwarzes Brett */
.a-darum{background:linear-gradient(180deg,rgba(234,245,224,0) 0%,rgba(234,245,224,.85) 14%,rgba(234,245,224,.85) 86%,rgba(234,245,224,0) 100%)}
.a-darum h2{max-width:20ch}
.a-darum .lede{max-width:52ch}
.darum{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(2rem,4vw,3.5rem);align-items:start}
.darum h3{font-family:var(--schrift-klein);font-size:.85rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:1rem}
.geschichten{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.geschichte{
  display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:1.3rem;align-items:center;overflow:hidden;
  background:var(--panel);border-radius:1.1rem;border:1px solid rgba(10,113,179,.14);box-shadow:0 16px 40px -30px rgba(18,50,74,.5);
  transition:transform .35s var(--weich);
}
.geschichte:hover{transform:translateY(-3px)}
.g-bild{aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#dbe3ea}
.g-text{padding:.8rem 1.1rem .8rem 0}
.format{display:block;font-family:var(--schrift-klein);font-size:.75rem;letter-spacing:.06em;color:var(--brand-deep);margin-bottom:.35rem}
.geschichte b{display:block;font-family:var(--schrift-titel);font-weight:800;font-size:1.2rem;line-height:1.15;letter-spacing:-.01em}
.zettelwand{--u:clamp(14px,1.25vw,19px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.5) calc(var(--u)*1.1);padding-top:calc(var(--u)*.6);align-items:start}
.zettelwand .zettel{width:100%;rotate:var(--r,0deg)}
.brett-satz{margin:1.5rem 0 .6rem;color:var(--text-secondary)}

/* 5. Weg des Kunden */
.buergerweg{margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2.5rem);border-top:1px dashed rgba(18,50,74,.25)}
.buergerweg h3{font-family:var(--schrift-titel);font-weight:800;font-size:1.45rem;letter-spacing:-.015em;margin-bottom:1rem}
.buergerweg ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:weg}
.buergerweg li{counter-increment:weg;background:var(--canvas);border-radius:1rem;padding:1rem 1.1rem 1.1rem;color:var(--text-secondary)}
.buergerweg li::before{content:counter(weg);display:block;font-family:var(--schrift-klein);font-size:.8rem;letter-spacing:.1em;color:var(--brand-deep);margin-bottom:.3rem}
.buergerweg li b{color:var(--text-primary)}

/* 6. Preise: wozu jedes Paket passt */
.preis p:not(.betrag){color:var(--text-secondary)}
.preis-erster p:not(.betrag){color:rgba(255,255,255,.92)}
.preis .passt{margin-top:.9rem;font-family:var(--schrift-klein);font-size:.78rem;letter-spacing:.03em;color:var(--brand-deep)}
.preis-erster .passt{color:#d9ecfa}

/* 7. Stimmen */
.stimme-offen p{margin-top:.4rem}

/* fester Anruf-Knopf, nur am Telefon */
.ruf{display:none}
@media (max-width:720px){
  .ruf{
    display:inline-flex;align-items:center;justify-content:center;position:fixed;right:1rem;bottom:1rem;z-index:40;
    min-height:48px;padding:.7rem 1.4rem;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;text-decoration:none;
    box-shadow:0 12px 28px -10px rgba(6,16,26,.6);
  }
  .fuss{padding-bottom:5.5rem}
}
html.tafelbild .ruf{display:none !important}

@media (max-width:900px){
  .feld,.darum,.mitmach-reihe,.zahl-stimme{grid-template-columns:minmax(0,1fr)}
  .zahl-stimme figcaption{text-align:left}
  .feld-pins{--u:clamp(12px,2.2vw,18px)}
  .zettelwand{--u:clamp(13px,2.4vw,18px)}
  .buergerweg ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){.a-zahlen .zahl:last-of-type{align-items:flex-start;text-align:left}}
@media (max-width:600px){
  .feld-pins{--u:clamp(12px,3.4vw,17px);grid-template-columns:repeat(2,minmax(0,1fr))}
  .zettelwand{--u:clamp(12px,3.4vw,17px)}
  .geschichte{grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:.9rem}
  .geschichte b{font-size:1.05rem}
}
@media (max-width:460px){.buergerweg ol{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.feld.frisch .pin,.feld.frisch .feld-text{animation:none}}

/* ------------------------------------------------------------------
   Logo „Regio Ortenau | Pins", Pin-Sprüche, Postfach (29.09.2026 nachts)
------------------------------------------------------------------ */
.marke{display:inline-flex;align-items:center;gap:.55em;font-size:1rem;text-decoration:none;transition:font-size .5s var(--weich)}
.marke img,body.im-film .marke img{height:2.7em;width:auto;transition:none}
.marke-strich{width:2px;height:2.2em;border-radius:2px;background:#c7d3dd}
.marke-zeichen{display:block;height:2.3em;width:auto}
.marke-pins{font-family:var(--schrift-titel);font-weight:800;font-size:1.95em;line-height:1;letter-spacing:-.04em;color:#3f9c35}
body.im-film .marke{font-size:1.4rem}
.kopf::before{left:-6rem;top:-6rem;width:38rem;height:17rem}
@media (max-width:620px){
  .marke{font-size:.74rem}
  .marke img,body.im-film .marke img{height:2.7em}
}
html.scrub .b1{top:21vh}

/* die vier Sprüche als große Reiter */
html.js .reiterleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:2rem}
.reiter{
  display:flex;align-items:center;gap:.9rem;text-align:left;border-radius:1.1rem;padding:1rem 1.1rem;min-height:5.2rem;
  background:var(--canvas);border:1.5px solid rgba(18,50,74,.2);color:var(--text-primary);
  transition:background .3s var(--weich),color .3s var(--weich),border-color .3s var(--weich),transform .3s var(--weich),box-shadow .3s var(--weich);
}
.reiter:hover{transform:translateY(-2px);border-color:var(--farbe)}
.r-neu{--farbe:#1773bb}
.r-angebot{--farbe:#b88520}
.r-termin{--farbe:#138a8a}
.r-job{--farbe:#8e44ad}
.r-zeichen{flex:none;width:2.1rem;height:2.5rem;color:var(--farbe);rotate:-7deg;transition:rotate .4s var(--weich),color .3s var(--weich)}
.r-text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.r-name{font-family:var(--schrift-klein);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--farbe)}
.r-spruch{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(1.05rem,1.45vw,1.4rem);line-height:1.05;letter-spacing:-.02em}
.reiter[aria-selected="true"]{background:var(--farbe);border-color:var(--farbe);color:#fff;box-shadow:0 16px 30px -18px var(--farbe)}
.reiter[aria-selected="true"] .r-name{color:rgba(255,255,255,.9)}
.reiter[aria-selected="true"] .r-zeichen{color:rgba(255,255,255,.28);rotate:4deg}

/* die Sprüche im Film: vier Zeilen */
html.scrub .b2 .zeile{font-size:clamp(1.9rem,3.6vw,3.9rem);max-width:none}

/* Vom Pin zur Nachricht */
.a-post .post-kopf{max-width:46rem}
.post{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,4vw,3.5rem);align-items:stretch}
.post-feld{background:var(--panel);border-radius:1.5rem;border:1px solid rgba(10,113,179,.14);box-shadow:0 24px 60px -36px rgba(18,50,74,.5);padding:clamp(1.2rem,2.4vw,2rem)}
.post-feld h3{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:1.3rem}
.faden{--u:clamp(13px,1.15vw,17px);display:grid;grid-template-columns:minmax(0,calc(var(--u)*11)) minmax(0,1fr);gap:.9rem 1.4rem;align-items:start}
.faden .pin,.faden .zettel{width:100%;grid-row:1 / span 2}
.faden .zettel{rotate:var(--r,0deg);margin-top:calc(var(--u)*.6)}
.brief{
  display:flex;align-items:center;gap:calc(var(--u)*.4);margin-top:calc(var(--u)*.6);
  font-size:calc(var(--u)*.7);font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:calc(var(--u)*.35) calc(var(--u)*.7);width:max-content;max-width:100%;
}
.brief i{flex:none;width:calc(var(--u)*.95);height:calc(var(--u)*.68);border-radius:2px;background:
  linear-gradient(to bottom right,transparent 47%,var(--brand) 47%,var(--brand) 53%,transparent 53%) left top/50% 62% no-repeat,
  linear-gradient(to bottom left,transparent 47%,var(--brand) 47%,var(--brand) 53%,transparent 53%) right top/50% 62% no-repeat,#fff}
.blase{position:relative;max-width:30ch;padding:.75rem 1rem .85rem;border-radius:1.1rem;font-size:1rem;line-height:1.4}
.blase .wer{display:block;font-family:var(--schrift-klein);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:.25rem}
.blase.von{background:#e6f1f9;color:var(--text-primary);border-bottom-left-radius:.3rem;justify-self:start}
.blase.an{background:var(--brand);color:#fff;border-bottom-right-radius:.3rem;justify-self:end}
.post-betrieb .blase.an{background:#3f7d2c}
html.js .abschnitt .blase[data-auf]{transform:translateY(14px) scale(.92);transform-origin:left bottom}
html.js .abschnitt .blase.an[data-auf]{transform-origin:right bottom}
html.js .abschnitt.in .blase[data-auf]{transform:none}
.post-satz{margin-top:1.4rem;padding-top:1.1rem;border-top:1px dashed rgba(18,50,74,.25);color:var(--text-secondary)}

@media (max-width:1000px){html.js .reiterleiste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.post{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  .reiter{padding:.8rem .8rem;gap:.6rem;min-height:4.6rem}
  .r-zeichen{width:1.6rem;height:1.9rem}
  .faden{grid-template-columns:minmax(0,1fr)}
  .faden .pin,.faden .zettel{grid-row:auto;max-width:calc(var(--u)*12)}
}
@media (prefers-reduced-motion:reduce){html.js .abschnitt .blase[data-auf]{transform:none}}

/* kurzer Film am Schwarzen Brett, am Telefon und bei reduzierter Bewegung bleibt das Standbild */
.brett-film{aspect-ratio:16/9;border-radius:1.1rem;overflow:hidden;margin-bottom:1.6rem;background:#dbe3ea url("brett-poster.jpg") center/cover no-repeat;box-shadow:0 20px 44px -30px rgba(18,50,74,.6)}
.brett-film video{display:block;width:100%;height:100%;object-fit:cover}

/* Jens 29.09. nachts: Logo in einer durchgehenden weißen Leiste, auch über dem Film */
.kopf::before{display:none}
body.im-film .kopf{background:rgba(255,255,255,.96);border-color:rgba(10,113,179,.14)}
body.im-film .navlink,body.im-film .telefon{color:var(--text-primary);text-shadow:none}
.marke,body.im-film .marke{font-size:1.12rem}
@media (max-width:620px){.marke,body.im-film .marke{font-size:.74rem}}
html.scrub .b1{top:16vh}
.darum .brett-film{grid-column:1 / -1;aspect-ratio:21/9;margin-bottom:0;border-radius:1.4rem}
.brett-film video{object-position:center 42%}
@media (max-width:900px){.darum .brett-film{aspect-ratio:16/9}}

/* weiches Gleiten der ganzen Seite (Lenis), wie bei planetensignatur.de */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* neue Preistreppe: vier gleich breite Karten, die empfohlene ist hervorgehoben */
.preise{grid-template-columns:repeat(4,minmax(0,1fr))}
.preis{position:relative}
.flagge{position:absolute;right:1rem;top:-.8rem;background:var(--accent);color:#0b2a12;font-family:var(--schrift-klein);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.35rem .7rem}
@media (max-width:1000px){.preise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.preise{grid-template-columns:minmax(0,1fr)}}
.gespraech-hinweis{margin-top:clamp(2rem,4vw,3rem);padding:1.2rem 1.4rem;border-radius:1.1rem;background:var(--canvas);border-left:5px solid var(--brand);max-width:56rem}
.gespraech-hinweis p{color:var(--text-secondary)}
.gespraech-hinweis b{color:var(--text-primary)}

/* Vereine und Ehrenamt: kostenfrei */
.a-vereine{background:#3f7d2c;color:#fff}
.a-vereine .innen{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.a-vereine h2{max-width:14ch}
.a-vereine .lede{color:rgba(255,255,255,.93);max-width:44ch;margin-bottom:1.6rem}
.verein-marke{display:inline-block;font-family:var(--schrift-klein);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:#2c5f1d;border-radius:999px;padding:.4rem .9rem;margin-bottom:1.1rem}
.btn-weiss{background:#fff;color:#1f4a13}
.btn-weiss:hover{background:#eaf5dc}
.verein-zettel{--u:clamp(14px,1.3vw,20px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.5) calc(var(--u)*1.2);align-items:start}
.verein-zettel .zettel{width:100%;rotate:var(--r,0deg)}
@media (max-width:900px){.a-vereine .innen{grid-template-columns:minmax(0,1fr)}.verein-zettel{--u:clamp(13px,2.6vw,18px)}}

/* Jens 29.09. nachts: statt der vier Kacheln steht überall das Pin-Zeichen */
.kacheln{display:inline-block;width:2.9em;height:2.7em;rotate:0deg;background:url("pin-zeichen.svg") center/contain no-repeat}
.kacheln i{display:none}
.a-zahlen .kacheln,.kacheln-hell{background-image:url("pin-zeichen-hell.svg")}
.kacheln-gross{width:3.4em;height:3.2em}

/* Vereine zeigen Pins wie ein Betrieb */
.verein-pins{--u:clamp(14px,1.3vw,20px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.2);align-items:start}
.verein-pins .pin{width:100%}
.verein-pins .pin:nth-child(2){margin-top:calc(var(--u)*2.4)}
@media (max-width:900px){.verein-pins{--u:clamp(12px,3.2vw,18px)}}

/* Filmstreifen über die volle Breite, wie der Startfilm */
.streifen{position:relative;height:min(78vh,46rem);min-height:22rem;overflow:hidden;background:#12324a url("brett-poster.jpg") center 40%/cover no-repeat}
.streifen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.streifen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(98deg,rgba(6,18,30,.7) 0%,rgba(6,18,30,.42) 32%,rgba(6,18,30,0) 60%),linear-gradient(0deg,rgba(6,18,30,.45) 0%,rgba(6,18,30,0) 40%)}
.streifen-text{position:absolute;z-index:1;left:clamp(1.2rem,5.5vw,6rem);bottom:clamp(2rem,9vh,5rem);max-width:min(40rem,80vw);color:#fff;text-shadow:var(--tschatten)}
.streifen-zeile{font-family:var(--schrift-titel);font-weight:800;font-size:clamp(2rem,4.2vw,4.2rem);line-height:1.02;letter-spacing:-.028em}
.streifen-unter{font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:600;margin-top:.8rem}
html.tafelbild .streifen{display:none !important}

/* Spamfalle: für Menschen unsichtbar, Programme füllen sie aus */
.f-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular button[disabled]{opacity:.6;cursor:progress}

/* ---------- Weiterempfehlen, schwebende Knöpfe (30.09.2026) ---------- */
.teilen{background:#fff;padding:clamp(3rem,6vw,4.5rem) clamp(1rem,5vw,4rem);text-align:center;border-top:1px solid rgba(10,113,179,.14)}
.teilen .innen{max-width:60rem;margin:0 auto}
.teilen h2{font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.2;margin:0}
.teil-text{margin:.6rem auto 0;max-width:46ch}
.teilen-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.4rem}
.teil-knopf{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1.05rem;border-radius:999px;
  border:1.5px solid var(--brand);background:#fff;color:var(--brand-deep);font:inherit;font-weight:600;font-size:.95rem;
  text-decoration:none;cursor:pointer;transition:background .25s var(--weich),color .25s var(--weich);
}
.teil-knopf:hover,.teil-knopf:focus-visible{background:var(--brand);color:#fff}
.teil-knopf[hidden]{display:none}
.teil-hinweis{margin:1.2rem auto 0;font-size:.88rem;opacity:.75;max-width:52ch}
.fuss-knopf{background:none;border:0;padding:0;color:#fff;font:inherit;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.fuss-knopf[hidden]{display:none}
@media (pointer:coarse){.fuss-knopf{min-height:44px}}

.seiten-knoepfe{display:none}
html.js .seiten-knoepfe{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;position:fixed;right:1rem;bottom:1.25rem;z-index:39;
  opacity:0;visibility:hidden;transform:translateY(.6rem);
  transition:opacity .35s var(--weich),transform .35s var(--weich),visibility 0s linear .35s;
}
html.js .seiten-knoepfe.da{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sk-knopf{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(10,113,179,.35);background:rgba(255,255,255,.96);color:var(--brand-deep);
  box-shadow:0 8px 22px -8px rgba(6,16,26,.45);transition:background .25s var(--weich),color .25s var(--weich);
}
.sk-knopf:hover,.sk-knopf:focus-visible{background:var(--brand);color:#fff}
.sk-meldung{font-size:.82rem;font-weight:600;background:#fff;color:#12324a;border-radius:.5rem;padding:.3rem .6rem;box-shadow:0 6px 16px -8px rgba(6,16,26,.4)}
.sk-meldung:empty{display:none}
html.tafelbild .seiten-knoepfe,html.kartenbild .seiten-knoepfe{display:none !important}
@media (max-width:720px){
  html.js .seiten-knoepfe{bottom:4.9rem}
}
@media (prefers-reduced-motion:reduce){
  html.js .seiten-knoepfe{transition:none;transform:none}
}