/* Piron LED Wall, werbung-kleve.de. Grundlage: stil.css von pironmetallbau.de (12.09.2026), davor piron.nrw.
   Hausfarbe #0055a9, uebernommen aus dem Stylesheet und der theme-color
   von pironmetallbau.de. Warmgrau #949187, ausgezaehlt aus dem Logo. */

:root{
  --blau:#0055a9;
  --blau-dunkel:#004488;
  --grau:#949187;
  --text:#2a2a2a;
  --text-hell:#5a6a76;
  --linie:#dfe4e8;
  --flaeche:#f7f7f7;
  --weiss:#fff;
  --bahn:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--weiss);
  line-height:1.65;
  font-size:17px;
  -webkit-text-size-adjust:100%;
}

.bahn{max-width:var(--bahn);margin:0 auto;padding:0 24px}

a{color:var(--blau)}
a:hover{color:var(--blau-dunkel)}

img{max-width:100%;height:auto}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--blau);color:#fff;
  padding:10px 18px;z-index:100
}
.skip:focus{left:0}

/* ---------- Kopf mit Partnernetzwerk ---------- */

.kopf{background:#eceff1}

/* Schalter fuers Aufklappmenue, unsichtbar aber bedienbar */
.menuschalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.kopf-bahn{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;
}

.marke img{width:220px;display:block}

/* Kacheln des Partnernetzwerks */
.partner{display:flex;align-items:stretch;gap:9px}

.partnerkachel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:106px;min-height:64px;padding:10px 10px 5px;
  background:#fff;border:1px solid var(--blau);border-radius:6px;
  text-decoration:none;color:var(--blau);
}
.partnerkachel:hover{background:#f2f6fa}
.partnerkachel img{
  display:block;width:100px;height:auto;margin:auto;object-fit:contain;
}
.partnerkachel span{
  font-size:11px;text-transform:uppercase;font-weight:700;
  color:var(--blau);text-align:center;line-height:1.25;margin-top:5px;
}

.aktionsknopf{
  display:flex;align-items:center;
  background:var(--blau);color:#fff;text-decoration:none;
  padding:0 18px;border-radius:6px;min-height:64px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.aktionsknopf:hover{background:var(--blau-dunkel);color:#fff}

/* Aufklappknopf, nur auf schmalen Geraeten sichtbar */
.burger{
  display:none;align-items:center;gap:9px;cursor:pointer;
  padding:11px 14px;border:1px solid var(--blau);border-radius:6px;background:#fff;
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--blau);
}
.burger-striche{
  position:relative;display:block;width:19px;height:2px;background:var(--blau);
}
.burger-striche::before,.burger-striche::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:var(--blau);
}
.burger-striche::before{top:-6px}
.burger-striche::after{top:6px}

/* Blaue Navigationsleiste */
.navi{background:var(--blau)}
.navi-innen{display:flex;justify-content:center}
.navi ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center}
.navi li + li{border-left:1px solid rgba(255,255,255,.22)}
.navi a{
  display:block;padding:13px 15px;color:#fff;text-decoration:none;
  font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.navi a:hover{background:var(--blau-dunkel);color:#fff}
.navi a[aria-current="page"]{background:var(--blau-dunkel)}

/* Im Aufklappmenue erscheinen Kacheln und Kontakt, auf dem Rechner nicht */
.partner-menue,.menue-kontakt{display:none}

@media(max-width:1180px){
  .partner-oben{display:none}
  .burger{display:flex}

  .navi{display:none}
  .menuschalter:checked ~ .navi{display:block;padding:8px 0 22px}

  .navi-innen{flex-direction:column;gap:22px}
  .navi ul{flex-direction:column;justify-content:flex-start}
  .navi li + li{border-left:0;border-top:1px solid rgba(255,255,255,.22)}
  .navi a{padding:13px 4px;font-size:15px}

  .partner-menue{display:flex;flex-wrap:wrap;gap:10px}
  .partner-menue .partnerkachel{flex:1 1 132px}
  .partner-menue .aktionsknopf{flex:1 1 100%;justify-content:center;padding:13px 18px}

  .menue-kontakt{display:flex;flex-direction:column;gap:5px}
  .menue-kontakt a{color:#fff;text-decoration:none;font-weight:600}
  .menue-kontakt a:first-child{font-size:21px}
}

.brotkrumen{background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:14px}
.brotkrumen .bahn{padding-top:10px;padding-bottom:10px;color:var(--text-hell)}
.brotkrumen span{margin:0 8px}
.brotkrumen span:last-child{margin:0;color:var(--text)}

/* ---------- Bildband am Seitenanfang ---------- */

.buehne{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(400px,62vh,600px);background:#0b2033;
}

/* Das Bild liegt als echtes <img> darin, nicht als CSS-Hintergrund.
   Nur so laedt es der Browser frueh, hat einen Alt-Text und zaehlt
   sauber als groesstes Element fuer den LCP. */
.buehne-hg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}

/* Der Schleier ist seit 10.09.2026 deutlich leichter (vorher .88/.74/.40),
   damit vom Foto etwas zu sehen bleibt. Die Lesbarkeit kommt aus dem
   weichen Schatten hinter dem Textblock (.buehne-text::before), der nur
   dort abdunkelt, wo Text steht. */
.buehne-schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(6,24,40,.72) 0%, rgba(6,24,40,.52) 44%, rgba(6,24,40,.18) 100%);
}

.buehne-innen{
  position:relative;z-index:2;width:100%;
  padding-top:54px;padding-bottom:54px;
}

.buehne-text{max-width:680px;color:#fff;position:relative;isolation:isolate}
.buehne-text::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-48px -80px -48px -120px;
  background:radial-gradient(ellipse at 40% 50%,
    rgba(6,24,40,.62) 0%, rgba(6,24,40,.42) 45%, rgba(6,24,40,0) 78%);
}

.buehne-text .marke{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#9fc6ea;margin-bottom:14px;
}

.buehne-text h1{
  color:#fff;margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.buehne-text h1 em{font-style:normal;color:#8fc0ec}

.buehne-unter{
  font-size:19px;line-height:1.6;color:#dde7f0;
  margin-bottom:0;max-width:60ch;
}

.buehne-aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.knopf.hell{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);
  padding:11px 24px;
}
.knopf.hell:hover{background:#fff;color:var(--blau)}

.zahlen-oben{margin-top:0}

@media(max-width:760px){
  .buehne{min-height:clamp(360px,72vh,540px)}
  .buehne-innen{padding-top:38px;padding-bottom:38px}
  .buehne-unter{font-size:17px}
  .buehne-aktion .knopf{flex:1 1 100%;text-align:center}
}

/* ---------- Bewegung ---------- */

@keyframes auf{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

@keyframes ring{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  60% {box-shadow:0 0 0 18px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

@keyframes kenburns{
  from{transform:scale(1.04) translate(-1.2%,-.8%)}
  to  {transform:scale(1.14) translate(1.2%,.8%)}
}

/* Laeuft nur, wenn im Betriebssystem keine Bewegungsreduzierung eingestellt
   ist. Fuellmodus "backwards" statt "both": Fuehrt ein Browser die Animation
   nicht aus, steht der Text trotzdem sichtbar da. */
@media (prefers-reduced-motion: no-preference){

  .buehne-text > *{animation:auf .7s cubic-bezier(.22,.61,.36,1) backwards}
  .buehne-text > *:nth-child(1){animation-delay:.05s}
  .buehne-text > *:nth-child(2){animation-delay:.17s}
  .buehne-text > *:nth-child(3){animation-delay:.30s}
  .buehne-text > *:nth-child(4){animation-delay:.43s}

  .buehne-hg{
    /* "backwards" ist hier entscheidend: ohne den Fuellmodus stuende das Bild
       waehrend der Wartesekunde auf scale(1) und wuerde beim Start sichtbar
       auf scale(1.04) springen. */
    animation:kenburns 26s ease-in-out 1s infinite alternate backwards;
  }

  .zahlen-oben > div{animation:auf .6s ease-out backwards}
  .zahlen-oben > div:nth-child(1){animation-delay:.52s}
  .zahlen-oben > div:nth-child(2){animation-delay:.60s}
  .zahlen-oben > div:nth-child(3){animation-delay:.68s}
  .zahlen-oben > div:nth-child(4){animation-delay:.76s}
}

/* ---------- Textbausteine ---------- */

h1{
  font-size:clamp(28px,4vw,42px);line-height:1.2;font-weight:700;
  letter-spacing:-.01em;margin-bottom:20px
}
h2{
  font-size:clamp(22px,2.6vw,29px);line-height:1.25;font-weight:700;
  margin:44px 0 16px
}
h3{font-size:20px;font-weight:600;margin:28px 0 10px}

p{margin-bottom:16px}
p:last-child{margin-bottom:0}

.einstieg{font-size:19px;color:var(--text-hell);max-width:65ch}

section{padding:44px 0}
section.hell{background:var(--flaeche)}

ul.blank{list-style:none}
ul.blank li{margin-bottom:7px}

.liste{margin:0 0 18px 22px}
.liste li{margin-bottom:8px}

/* ---------- Bausteine ---------- */

.kacheln{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.kachel{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.kachel:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(11,32,51,.14);
  border-color:#b9cde0;
}

/* Bild mit blauem Schleier. Er weicht beim Ueberfahren zurueck und das Foto
   kommt in voller Farbe. Der Text bleibt davon unberuehrt und ist immer
   sichtbar, es wird nichts erst beim Ueberfahren eingeblendet. */
.kachelbild{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--flaeche)}
.kachelbild img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.kachelbild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(0,85,169,.46) 0%,rgba(0,40,80,.30) 100%);
  transition:opacity .45s ease;
}
.kachel:hover .kachelbild::after{opacity:0}
.kachel:hover .kachelbild img{transform:scale(1.06)}

.kachelinhalt{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.kachel h3{margin:0 0 9px;font-size:21px}
.kachel p{font-size:16px;color:var(--text-hell);margin-bottom:16px}
.kachel .weiterlesen{margin-top:auto}

.zahlen{
  display:grid;gap:2px;margin:34px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--linie);          /* die Luecken werden zu Trennlinien */
  border:1px solid var(--linie);border-radius:6px;overflow:hidden;
}
.zahlen > div{
  background:var(--weiss);
  padding:26px 22px 24px;
  display:flex;flex-direction:column;gap:6px;
  transition:background .25s ease;
}
.zahlen > div:hover{background:#fbfcfd}

/* Die Zahl. strong und span sind beide Inline-Elemente, deshalb muessen
   sie ausdruecklich als Block gesetzt werden. Genau das fehlte. */
.zahlen strong{
  display:block;
  font-size:clamp(27px,3.4vw,36px);line-height:1.05;
  font-weight:700;letter-spacing:-.02em;color:var(--blau);
  font-variant-numeric:tabular-nums;
}
.zahlen span{
  display:block;
  font-size:14.5px;line-height:1.35;color:var(--text-hell);
  letter-spacing:.02em;
}

/* Auf hellem Abschnitt steht die Kachel weiss, sonst wuerde sie verschwinden */
section.hell .zahlen{border-color:#dde3e8}

.zahl{background:var(--weiss);border:1px solid var(--linie);padding:22px;border-radius:3px}
.zahl b{display:block;font-size:31px;line-height:1.1;color:var(--blau);font-weight:700}
.zahl span{font-size:15px;color:var(--text-hell)}

.knopf{
  display:inline-block;background:var(--blau);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:3px;font-weight:600;
  /* vertical-align ist Pflicht: Inline-Bloecke richten sich sonst an der
     Schriftgrundlinie aus. Sobald einer overflow:hidden bekommt, was der
     Puls-Effekt braucht, wandert seine Grundlinie an die Unterkante und er
     sackt gegenueber dem Nachbarknopf ab. */
  vertical-align:top;
}
.knopf:hover{background:var(--blau-dunkel);color:#fff}
.knopf.rand{background:transparent;color:var(--blau);border:2px solid var(--blau);padding:11px 24px}
.knopf.rand:hover{background:var(--blau);color:#fff}

/* WhatsApp-Knopf und -Verweis (v0.5.10). Dunkles Gruen statt Markengruen,
   damit weisse Schrift den Kontrast von 4,5 zu 1 haelt. */
.knopf.whatsapp{
  background:#0f7a3f;color:#fff;display:inline-flex;align-items:center;gap:9px;
}
.knopf.whatsapp:hover{background:#0b5f31;color:#fff}
.wa-zeichen{flex:0 0 auto;display:inline-block;vertical-align:-3px}
.wa-link{white-space:nowrap}
.wa-link .wa-zeichen{width:15px;height:15px;margin-right:5px;color:#1faa54}
.support-festnetz{margin:12px 0 0;font-size:14.5px;opacity:.85}

.hinweis{
  border-left:4px solid var(--grau);background:var(--flaeche);
  padding:18px 22px;margin:24px 0;font-size:16px
}

/* ---------- Bilder ---------- */

.hauptbild{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:3px;margin:30px 0 8px;
  background:var(--flaeche);
}

.bildreihe{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:20px 0 8px;
}
.bildreihe figure{margin:0}
.bildreihe img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:3px;background:var(--flaeche);
}
.bildreihe figcaption{
  font-size:14px;color:var(--text-hell);
  padding-top:8px;line-height:1.45;
}

@media(max-width:600px){
  .hauptbild{aspect-ratio:4/3}
}

/* ---------- Beitraege ---------- */

.newsband{background:linear-gradient(180deg,#fff 0%,var(--flaeche) 100%);padding:52px 0 58px}

.abschnittkopf{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:30px;
}
.abschnittkopf h2{margin:0}

.marke.dunkel{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--blau);margin-bottom:8px;
}

.newsraster{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}

.newskarte{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--linie);border-radius:6px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.newskarte:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(11,32,51,.13);
  border-color:#b9cde0;
}

/* Die erste Karte laeuft ueber die volle Breite, Bild links, Text rechts */
.newskarte-gross{grid-column:1 / -1;flex-direction:row}
.newskarte-gross .newsbild{flex:0 0 46%;aspect-ratio:auto}
.newskarte-gross .newstext{padding:32px 34px}
.newskarte-gross h3{font-size:25px}

.newsbild{display:block;overflow:hidden;background:var(--flaeche);aspect-ratio:16/9}
.newsbild img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.newskarte:hover .newsbild img{transform:scale(1.05)}

.newstext{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}

.newsdatum{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--grau);margin-bottom:9px;
}

.newskarte h3{font-size:20px;line-height:1.3;margin:0 0 10px}
.newskarte h3 a{color:var(--text);text-decoration:none}
.newskarte:hover h3 a{color:var(--blau)}

.newsanriss{font-size:16px;color:var(--text-hell);margin-bottom:16px}

.weiterlesen{
  margin-top:auto;align-self:flex-start;
  font-weight:700;font-size:15px;text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;
}
.weiterlesen span{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.newskarte:hover .weiterlesen span{transform:translateX(5px)}

@media(max-width:860px){
  .newsraster{grid-template-columns:1fr}
  .newskarte-gross{flex-direction:column}
  .newskarte-gross .newsbild{flex:none;aspect-ratio:16/9}
  .newskarte-gross .newstext{padding:24px 26px 26px}
  .newskarte-gross h3{font-size:21px}
}

/* ---------- Einzelbeitrag auf der News-Seite ---------- */

.beitrag{padding:38px 0;border-top:1px solid var(--linie)}
.beitrag:first-of-type{border-top:0}
.beitrag:nth-of-type(even){background:var(--flaeche)}

.beitrag-raster{
  display:grid;gap:38px;align-items:start;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
}
.beitrag-gedreht .beitrag-raster{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.beitrag-gedreht .beitrag-bild{order:2}
.beitrag-gedreht .beitrag-text{order:1}

.beitrag-bild{margin:0;position:sticky;top:22px}
.beitrag-bild img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:6px;background:var(--linie);
}

.beitrag-text h2{margin:6px 0 16px;font-size:clamp(21px,2.4vw,27px)}
.beitrag-text p{font-size:16.5px}

@media(max-width:860px){
  .beitrag-raster,.beitrag-gedreht .beitrag-raster{grid-template-columns:1fr;gap:22px}
  .beitrag-gedreht .beitrag-bild{order:0}
  .beitrag-gedreht .beitrag-text{order:0}
  .beitrag-bild{position:static}
}

/* ---------- Bewegung beim Scrollen ---------- */

@keyframes vonlinks{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes vonrechts{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

/* Nur in Browsern, die scrollgesteuerte Ablaeufe koennen. Aeltere ignorieren
   den Block vollstaendig und zeigen alles sofort, ohne Nachteil. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    .newskarte{
      animation:auf .8s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 46%;
    }
    .newsraster > .newskarte:nth-child(2){animation-range:entry 4% entry 50%}
    .newsraster > .newskarte:nth-child(3){animation-range:entry 8% entry 54%}

    .kacheln > .kachel{
      animation:auf .8s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 46%;
    }
    .kacheln > .kachel:nth-child(2){animation-range:entry 5% entry 51%}
    .kacheln > .kachel:nth-child(3){animation-range:entry 10% entry 56%}

    .beitrag-bild{
      animation:vonlinks .9s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 48%;
    }
    .beitrag-text{
      animation:vonrechts .9s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 52%;
    }
    .beitrag-gedreht .beitrag-bild{animation-name:vonrechts}
    .beitrag-gedreht .beitrag-text{animation-name:vonlinks}
  }
}

/* ---------- Suche und Sprungmarken ---------- */

.suche{margin:6px 0 26px}
.suche label{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--grau);margin-bottom:9px;
}
.suchzeile{display:flex;gap:10px;flex-wrap:wrap}
.suchzeile input[type=search]{
  flex:1 1 320px;min-width:0;
  font:inherit;font-size:16px;padding:12px 15px;
  border:1px solid #c2ced9;border-radius:6px;background:#fff;color:var(--text);
}
.suchzeile input[type=search]:focus{
  outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.16);
}
.suchzeile .knopf{border-radius:6px}

.suchbefund{font-size:16px;color:var(--text-hell);margin-bottom:18px}

mark{background:#ffe9a8;color:inherit;padding:0 2px;border-radius:2px}

.sprungmarken{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.sprungmarken a{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border:1px solid var(--linie);border-radius:99px;
  background:#fff;text-decoration:none;font-size:14px;font-weight:600;
  color:var(--text);transition:border-color .2s ease,background .2s ease;
}
.sprungmarken a:hover{border-color:var(--blau);background:#f2f7fc;color:var(--blau)}
.sprungmarken span{
  background:var(--blau);color:#fff;border-radius:99px;
  font-size:12px;padding:1px 8px;font-variant-numeric:tabular-nums;
}

h2[id]{scroll-margin-top:18px}

/* ---------- Aufklappbare Fragen ---------- */

/* Bewusst <details>/<summary>: das kann jeder Browser von sich aus,
   es braucht kein JavaScript und der Text steht immer im HTML. */
.fragen{margin:26px 0 8px;border-top:1px solid var(--linie)}

.fragen details{border-bottom:1px solid var(--linie)}

.fragen summary{
  display:flex;align-items:flex-start;gap:14px;
  padding:19px 2px;cursor:pointer;list-style:none;
  font-size:18px;font-weight:650;line-height:1.35;color:var(--text);
  transition:color .2s ease;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--blau)}

/* Zeichen links, dreht sich beim Aufklappen */
.fragen summary::before{
  content:"+";
  flex:0 0 auto;width:26px;height:26px;margin-top:1px;
  display:grid;place-items:center;
  background:var(--blau);color:#fff;border-radius:50%;
  font-size:17px;font-weight:700;line-height:1;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.fragen details[open] summary::before{content:"–";transform:rotate(180deg)}

.fragen .antwort{padding:0 2px 22px 40px}
.fragen .antwort p{font-size:16.5px;color:var(--text-hell)}
.fragen .antwort p:last-child{margin-bottom:0}

@media(max-width:600px){
  .fragen summary{font-size:16.5px;gap:11px}
  .fragen .antwort{padding-left:0}
}

/* ---------- Formular ---------- */

.formular{max-width:820px;margin-top:8px}

.formular fieldset{border:0;padding:0;margin:0 0 30px}
.formular legend{
  padding:0;margin-bottom:16px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--blau);
}

.feldpaar{display:grid;gap:0 20px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.feldpaar{grid-template-columns:1fr}}

.feld{margin-bottom:18px}
.feld label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.pflicht{color:#c0392b}

.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld select,
.feld textarea{
  width:100%;font:inherit;font-size:16px;
  padding:11px 14px;border:1px solid #c2ced9;border-radius:6px;
  background:#fff;color:var(--text);
}
.feld textarea{resize:vertical;min-height:130px;line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.16);
}
.feld input[type=file]{
  width:100%;font:inherit;font-size:15px;padding:11px 0;
}
.hilfe{display:block;font-size:14px;color:var(--text-hell);margin-top:7px;line-height:1.5}

.einwilligung label{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:15.5px}
.einwilligung input{margin-top:4px;width:18px;height:18px;flex:0 0 auto}

/* Fuer Menschen unsichtbar, aber nicht per display:none, damit Automaten
   das Feld finden und ausfuellen. */
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.meldung{border-radius:6px;padding:22px 24px;margin-bottom:26px}
.meldung h2{margin:0 0 10px;font-size:23px}
.meldung p:last-child{margin-bottom:0}
.meldung.gut{background:#eaf6ec;border-left:4px solid #2e7d43}
.meldung.schlecht{background:#fdeeec;border-left:4px solid #c0392b}
.meldung.schlecht .liste{margin-bottom:0}

/* ---------- Tabellen ---------- */

.tabellenrahmen{overflow-x:auto;margin:18px 0 30px}

table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
caption{text-align:left;font-weight:600;padding-bottom:10px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{background:var(--flaeche);font-weight:600;white-space:nowrap}
tbody tr:hover{background:#fafbfc}
td.nr{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--blau)}
td.kurz{white-space:nowrap;color:var(--text-hell)}

/* ---------- Kontakt ---------- */

.kontaktraster{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kontaktblock{background:var(--flaeche);padding:26px;border-radius:3px}
.kontaktblock .telefon{font-size:25px;font-weight:700;color:var(--blau);text-decoration:none;display:block}

/* ---------- Karte auf der Kontaktseite ---------- */

.karte{margin:20px 0 26px}
.karte a{display:block;overflow:hidden;border-radius:6px;border:1px solid var(--linie)}
.karte img{
  display:block;width:100%;height:auto;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.karte a:hover img{transform:scale(1.03)}
.karte figcaption{
  font-size:14px;color:var(--text-hell);padding-top:9px;line-height:1.5;
}

/* ---------- Fuss ---------- */

.fuss{background:#1b2733;color:#c3ccd4;margin-top:56px;padding:44px 0 0;font-size:15px}
.fuss a{color:#c3ccd4;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-titel{color:#fff;font-weight:600;margin-bottom:12px}
.fuss-raster{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding-bottom:32px}
.fuss-zeile{border-top:1px solid #2c3a48;padding-top:18px;padding-bottom:22px;font-size:14px;color:#8f9ba7}

/* ---------- Rechtstexte ---------- */

.rechtstext{max-width:76ch}
.rechtstext h2{font-size:22px;margin-top:34px}
.rechtstext h3{font-size:18px}
.rechtstext p,.rechtstext li{font-size:16px}

@media(max-width:760px){
  body{font-size:16px}
  .marke img{width:180px}
  .burger-text{display:none}
  .burger{padding:10px 12px}
  section{padding:32px 0}
}

/* ==========================================================================
   Ergaenzungen fuer pironmetallbau.de, 07.09.2026
   Alles darueber stammt unveraendert aus piron.nrw. Hier steht nur, was der
   Privatauftritt zusaetzlich braucht: Untermenue, Ortsliste, Bildergalerie,
   Videobaustein und Bewertungen.
   ========================================================================== */

/* ---------- Untermenue in der Hauptnavigation ----------
   Rein per CSS, ohne JavaScript. Auf dem Rechner klappt es beim Ueberfahren
   und beim Tastaturfokus auf, auf dem Handy steht es dauerhaft eingerueckt
   im Aufklappmenue. Ein Aufklappmenue, das sich nur mit der Maus oeffnet,
   waere per Tastatur nicht erreichbar, deshalb :focus-within. */

.navi li.hat-unter{position:relative}

.navi li.hat-unter > a::after{
  content:"";display:inline-block;margin-left:7px;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);
}

/* Achtung Spezifitaet: Weiter oben steht .navi ul{display:flex;flex-wrap:wrap}.
   Diese Regel ist spezifischer als ein blosses .untermenue und wuerde das
   Untermenue dauerhaft sichtbar und zweispaltig machen. Deshalb steht hier
   ueberall .navi davor. */
.navi .untermenue{
  display:none;position:absolute;left:0;top:100%;z-index:30;
  min-width:250px;background:var(--blau-dunkel);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  flex-wrap:nowrap;
}

.navi li.hat-unter:hover > .untermenue,
.navi li.hat-unter:focus-within > .untermenue{display:block}

.navi .untermenue li{border-left:0;display:block;width:100%}
.navi .untermenue li + li{border-top:1px solid rgba(255,255,255,.16)}

.navi .untermenue a{
  padding:11px 16px;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:500;white-space:nowrap;
}
.navi .untermenue a:hover{background:var(--blau)}

/* ---------- Ortsliste ----------
   Beschreibende Linktexte nebeneinander statt einer langen Spalte. */

.ortsliste{
  display:flex;flex-wrap:wrap;gap:8px 0;
  margin:14px 0 0;padding:0;
}
.ortsliste li{margin:0;padding:0 14px;border-left:1px solid var(--linie)}
.ortsliste li:first-child{padding-left:0;border-left:0}

.fuss-orte{padding-top:24px;margin-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.fuss-orte .ortsliste li{border-left-color:rgba(255,255,255,.22)}

/* ---------- Bildergalerie ----------
   Feste Seitenverhaeltnisse, damit beim Laden nichts springt (CLS). */

/* Feste Spaltenbreite und Seitenverhaeltnis, damit die Reihen gleich hoch
   sind. Vorher stand hier height:100% zusammen mit aspect-ratio, dadurch
   ueberlappten die Bildunterschriften die naechste Reihe. */
.galerie{
  display:grid;gap:18px;margin:24px 0;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.galerie figure{margin:0;display:flex;flex-direction:column}

.galerie a,
.galerie .bildrahmen{
  display:block;overflow:hidden;border-radius:3px;background:var(--flaeche);
}
.galerie img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.galerie .bildrahmen:hover img{transform:scale(1.06)}

.galerie figcaption{
  font-size:14px;color:var(--text-hell);margin-top:8px;line-height:1.45;
}

/* ---------- Videobaustein ----------
   Der Player von YouTube wird erst nach einem Klick geladen. Vorher steht
   hier nur ein eigenes Bild. So wird ohne Einwilligung nichts an Google
   uebertragen, und die Seite laedt nicht 24 Player auf einmal. */

.videoliste{
  display:grid;gap:18px;margin:24px 0;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

.video{
  position:relative;display:block;overflow:hidden;
  border-radius:3px;background:#0b2033;text-decoration:none;
}
.video img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.video::after{
  content:"";position:absolute;left:50%;top:50%;
  width:0;height:0;transform:translate(-30%,-50%);
  border-style:solid;border-width:15px 0 15px 26px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.video:hover img{opacity:.86}

.video-titel{
  display:block;padding:10px 2px 0;color:var(--text);
  font-size:15px;font-weight:600;line-height:1.4;
}
.video-hinweis{font-size:14px;color:var(--text-hell);margin-top:10px}

/* ---------- Google-Bewertungen als Endlosband ----------
   Die Karten laufen langsam von rechts nach links durch. Dafuer steht die
   Liste zweimal im Band: das Band wandert um genau die halbe Breite und
   springt dann zurueck an den Anfang. Der Sprung faellt nicht auf, weil an
   dieser Stelle wieder dieselbe erste Karte steht.

   Wichtig: der Abstand zwischen den Karten liegt als margin-right auf der
   Karte, nicht als gap auf dem Band. Sonst waere die halbe Bandbreite um
   einen halben Abstand kuerzer als eine Listenbreite, und bei jedem Durchlauf
   gaebe es einen sichtbaren Ruck. */

.bw-band{
  --bw-karte:320px;
  --bw-abstand:20px;
  position:relative;margin:26px 0 0;
  overflow:hidden;
}

.bw-lauf{
  display:flex;align-items:stretch;
  width:max-content;
  animation:bw-lauf 140s linear infinite;   /* 10.09.2026: halbes Tempo, vorher 70s */
  will-change:transform;
}
@keyframes bw-lauf{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

/* Stillstand, solange jemand hinsieht oder mit der Tastatur darin ist. */
.bw-band:hover .bw-lauf,
.bw-band:focus-within .bw-lauf{animation-play-state:paused}

/* Ohne JavaScript: jede Bewertung steht nur einmal im HTML (11.09.2026), die
   Kopie fuer die Schleife setzt klick.js. Solange sie fehlt, steht das Band
   still und laesst sich seitlich schieben. */
.bw-band.bw-einfach{overflow-x:auto}
.bw-band.bw-einfach .bw-lauf{animation:none}

/* Weicher Auslauf an beiden Raendern, damit die Karten nicht abgeschnitten
   wirken. Die Farbe ist die des hellen Abschnitts. */
.bw-band::before,
.bw-band::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;
  pointer-events:none;
}
.bw-band::before{left:0;background:linear-gradient(90deg,var(--flaeche),rgba(247,247,247,0))}
.bw-band::after{right:0;background:linear-gradient(270deg,var(--flaeche),rgba(247,247,247,0))}

/* Die Karte. Feste Breite, gleiche Hoehe ueber align-items:stretch. */
.bewertung{
  flex:0 0 var(--bw-karte);
  margin:0 var(--bw-abstand) 0 0;
  display:flex;flex-direction:column;
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:6px;padding:22px 24px 20px;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.bw-band:hover .bewertung:hover{box-shadow:0 12px 28px rgba(11,32,51,.10);border-color:#b9cde0}

.bewertung .sterne{color:#f5a623;letter-spacing:3px;font-size:17px;line-height:1}

/* Alle Texte auf fuenf Zeilen. Damit sind die Karten gleich hoch und im
   Vorbeilaufen trotzdem lesbar. */
.bw-text{margin:12px 0 0}
.bw-text p{
  font-size:15px;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
  line-clamp:5;overflow:hidden;
}

.bewertung .wer{
  font-size:14px;color:var(--text-hell);font-weight:600;
  margin-top:auto;padding-top:16px;
}
.bewertung .wann{font-size:13px;color:var(--text-hell);font-weight:400}

/* Rueckfall: kein Dauerlauf, sondern ein Band zum Wischen. Gilt bei
   abgeschalteter Bewegung und auf Geraeten ohne Mauszeiger, wo Wischen
   ohnehin naeher liegt und ein Dauerlauf nur stoert. */
@media (prefers-reduced-motion: reduce), (hover: none){
  .bw-lauf{
    animation:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;
  }
  .bw-band{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .bw-lauf{overflow:visible}
  .bewertung{scroll-snap-align:start}
  .bw-lauf > .bewertung[aria-hidden="true"]{display:none}
  .bw-band::before,.bw-band::after{display:none}
}

@media(max-width:520px){
  .bw-band{--bw-karte:min(300px,82vw)}
}


/* ---------- Schmale Bildschirme ---------- */

@media(max-width:1180px){
  /* Im Aufklappmenue steht das Untermenue offen und eingerueckt. */
  .navi .untermenue{
    display:block;position:static;min-width:0;box-shadow:none;
    background:transparent;
  }
  .navi li.hat-unter > a::after{display:none}
  .navi .untermenue a{padding-left:34px;opacity:.9}
  .navi .untermenue li + li{border-top:0}
}

@media(max-width:760px){
  .ortsliste{display:block}
  .ortsliste li{padding:0;border-left:0;margin-bottom:7px}
  .galerie{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* ---------- Filmkacheln, Ergaenzung vom 07.09.2026 ----------
   .videoliste und .video stehen weiter oben. Hier kommt dazu, was die
   Zwei-Klick-Loesung zusaetzlich braucht. */

.videokachel{display:flex;flex-direction:column}

.video-kanal{
  display:block;font-size:13px;color:var(--text-hell);
  margin-top:2px;padding:0 2px;
}

/* Nimmt nach dem Klick den Platz der Vorschau ein. Festes Seitenverhaeltnis,
   damit beim Austausch nichts springt. */
.videorahmen{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:3px;overflow:hidden;
}
.videorahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Bild über die volle Breite der Bahn ---------- */
.grossbild{margin:26px 0 0}
.grossbild img{
  display:block;width:100%;height:auto;border-radius:3px;
}
.grossbild figcaption{
  font-size:14px;color:var(--text-hell);margin-top:8px;line-height:1.45;
}

/* ---------- Ergänzungen 08.09.2026, zweiter Durchgang ---------- */

/* Drei Kacheln je Reihe statt vier. Bei 1180 Bahnbreite passen mit 320 als
   Mindestbreite genau drei nebeneinander, darunter bricht es sauber um. */
.kacheln{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* Bewegung auf den Knöpfen, wie bei den Kacheln: leichtes Anheben und ein
   Schatten. Der Pfeil im Weiterlesen-Link wandert beim Überfahren. */
.knopf{
  transition:transform .25s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s ease, background .2s ease;
}

/* Der Knopf zur Anfrage soll auffallen, ohne zu blinken. Hartes An und Aus
   ist bei Bedienhilfen ein Ausschlusskriterium und wirkt billig. Stattdessen
   zwei ruhige Bewegungen im selben Takt: ein Ring, der nach aussen ausklingt,
   und ein Lichtstreif, der einmal ueber die Flaeche wandert.

   --puls ist die Ringfarbe als RGB-Liste. Auf dem dunklen Buehnenbild weiss,
   sonst das Hausblau. */
.knopf-puls,
.knopf.pulsiert,
.buehne-aktion .knopf:not(.hell),
a.knopf[href$="/anfrage/"]:not(.hell):not(.rand){
  --puls:0,85,169;
  position:relative;overflow:hidden;isolation:isolate;
  animation:knopf-puls 3.4s ease-in-out infinite;
}
/* Auf dunklem Grund waere ein blauer Ring nicht zu sehen. Das betrifft
   das Buehnenbild, den Aktionsblock und den Carport-Streifen. */
.buehne-aktion .knopf-puls,
.buehne-aktion .knopf:not(.hell),
.aktion .knopf-puls,
.aktion .knopf:not(.hell),
.schwester .knopf-puls,
.schwester .knopf:not(.hell){--puls:255,255,255}

@keyframes knopf-puls{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--puls),.5)}
  55%    {box-shadow:0 0 0 12px rgba(var(--puls),0)}
}

.knopf-puls::after,
.knopf.pulsiert::after,
.buehne-aktion .knopf:not(.hell)::after,
a.knopf[href$="/anfrage/"]:not(.hell):not(.rand)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 35%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 65%);
  transform:translateX(-130%);
  animation:knopf-glanz 3.4s ease-in-out infinite;
}
@keyframes knopf-glanz{
  0%      {transform:translateX(-130%)}
  40%,100%{transform:translateX(130%)}
}

/* Wer den Knopf ansteuert, hat ihn gefunden. Dann ist die Bewegung erledigt. */
.knopf-puls:hover,.knopf-puls:focus-visible,
.knopf.pulsiert:hover,.knopf.pulsiert:focus-visible,
.buehne-aktion .knopf:not(.hell):hover,
.buehne-aktion .knopf:not(.hell):focus-visible,
a.knopf[href$="/anfrage/"]:not(.hell):not(.rand):hover,
a.knopf[href$="/anfrage/"]:not(.hell):not(.rand):focus-visible{animation-play-state:paused;box-shadow:none}
.knopf-puls:hover::after,.knopf-puls:focus-visible::after,
.knopf.pulsiert:hover::after,
.buehne-aktion .knopf:not(.hell):hover::after,
.buehne-aktion .knopf:not(.hell):focus-visible::after,
a.knopf[href$="/anfrage/"]:not(.hell):not(.rand):hover::after,
a.knopf[href$="/anfrage/"]:not(.hell):not(.rand):focus-visible::after{animation-play-state:paused;opacity:0}

@media (prefers-reduced-motion: reduce){
  .knopf-puls,.knopf.pulsiert,.buehne-aktion .knopf:not(.hell),a.knopf[href$="/anfrage/"]:not(.hell):not(.rand),
  .knopf-puls::after,.knopf.pulsiert::after,
  .buehne-aktion .knopf:not(.hell)::after,a.knopf[href$="/anfrage/"]:not(.hell):not(.rand)::after{animation:none}
  .knopf-puls::after,.knopf.pulsiert::after,
  .buehne-aktion .knopf:not(.hell)::after,a.knopf[href$="/anfrage/"]:not(.hell):not(.rand)::after{display:none}
}
.knopf:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,85,169,.28);
}
.knopf:active{transform:translateY(0);box-shadow:none}

.knopf.hell:hover{box-shadow:0 10px 22px rgba(0,0,0,.22)}

.weiterlesen span{display:inline-block;margin-left:6px;transition:transform .25s ease}
.weiterlesen:hover span{transform:translateX(4px)}

/* ---------- Siegel und Auszeichnungen im Fuß ---------- */
.fuss-siegel{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;
  padding-top:24px;margin-top:24px;
  border-top:1px solid rgba(255,255,255,.15);
}
.fuss-siegel img{
  display:block;height:56px;width:auto;
  background:#fff;border-radius:3px;padding:6px 10px;
}
.fuss-siegel .siegel-hoch img{height:72px}

@media(max-width:760px){
  .fuss-siegel{gap:18px;justify-content:center}
  .fuss-siegel img{height:44px}
  .fuss-siegel .siegel-hoch img{height:58px}
}

/* ---------- Stellenanzeigen ---------- */
.stelle{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:3px;
  padding:26px 28px;margin:22px 0;
}
.stelle h3{margin-top:0;font-size:22px}
.stelle h4{font-size:17px;margin:20px 0 8px}
.stellenart{
  font-size:14px;color:var(--text-hell);font-weight:600;
  letter-spacing:.02em;margin-bottom:14px;
}

/* ---------- Schlichter Seitenkopf für Rechtstexte ----------
   Kein Bild, aber auch keine nackte Überschrift auf weißem Grund. */
.seitenkopf{
  background:linear-gradient(160deg,#0b2033 0%,var(--blau-dunkel) 100%);
  color:#fff;padding:44px 0 38px;
}
.seitenkopf h1{color:#fff;margin:0}
.seitenkopf .marke{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#9fc6ea;margin-bottom:12px;
}

/* ---------- Merkmale, drei nebeneinander ----------
   Jede Spalte mit Bild, Nummer und Text. Die Bewegung kommt ohne Skript:
   beim Ueberfahren zoomt das Bild, beim Scrollen blenden die Spalten
   nacheinander ein. Das Einblenden laeuft ueber animation-timeline, das
   koennen noch nicht alle Browser. Wo es fehlt, steht der Block einfach
   fertig da, es geht nichts verloren. */
.merkmale{
  display:grid;gap:30px;margin:32px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* Bei vier Karten wuerde die vierte allein in der zweiten Reihe stehen,
   weil in die Bahn drei nebeneinander passen. Deshalb hier fest zwei
   Spalten, also zwei mal zwei. Die Karten werden dadurch breiter und die
   Bilder groesser. */
.merkmale.merkmale-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){
  .merkmale.merkmale-vier{grid-template-columns:1fr}
}

.merkmal{
  display:flex;flex-direction:column;
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease, border-color .3s ease;
}
.merkmal:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(11,32,51,.13);
  border-color:#b9cde0;
}

.merkmalbild{position:relative;display:block;overflow:hidden;aspect-ratio:16/10}
.merkmalbild img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.merkmal:hover .merkmalbild img{transform:scale(1.07)}

/* Nummer als Marke auf dem Bild */
.merkmalbild::before{
  content:attr(data-nr);
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--blau);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.06em;
  padding:7px 15px;border-radius:0 6px 0 0;
}

.merkmalinhalt{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.merkmal h3{margin:0 0 10px;font-size:20px;line-height:1.3}
.merkmal p{font-size:16px;color:var(--text-hell);margin:0}
.merkmal p + p{margin-top:12px}

/* Gestaffeltes Einblenden beim Scrollen, rein in CSS. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .merkmal{
      animation: merkmal-auf linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    .merkmal:nth-child(2){animation-range: entry 2% cover 30%}
    .merkmal:nth-child(3){animation-range: entry 0% cover 34%}
  }
}
@keyframes merkmal-auf{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:760px){
  .merkmale{gap:24px}
}

.fuss-orte-text{font-size:15px;margin:6px 0 12px;max-width:70ch}

/* Nur für Vorleseprogramme, optisch nicht sichtbar */
.hilfe-versteckt{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.bewertung{margin:0;position:relative}
.bewertung blockquote{margin:0}
.bewertung blockquote p{margin:0}

/* ---------- Aktionsblock ----------
   Grosse Flaeche mit Bild als Hintergrund, wie eine zweite Bühne mitten auf
   der Seite. Das Bild liegt als echtes <img> darin, damit es früh lädt und
   einen Alt-Text hat. */
.aktion{
  position:relative;overflow:hidden;
  min-height:clamp(320px,42vh,440px);
  display:flex;align-items:center;
  background:#0b2033;
}
.aktion-hg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.aktion-schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(6,24,40,.90) 0%, rgba(6,24,40,.72) 46%, rgba(6,24,40,.30) 100%);
}
.aktion-innen{position:relative;z-index:2;width:100%;padding:48px 0;color:#fff}
.aktion-text{max-width:640px}
.aktion h2{color:#fff;margin:0 0 14px;font-size:clamp(26px,3.2vw,36px)}
.aktion p{color:#dde7f0;font-size:18px;line-height:1.6;margin:0 0 24px}
.aktion .marke{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#9fc6ea;margin-bottom:12px;
}
.aktion .knopf-reihe{display:flex;flex-wrap:wrap;gap:12px}

@media(max-width:760px){
  .aktion{min-height:0}
  .aktion-innen{padding:36px 0}
  .aktion-schleier{background:linear-gradient(180deg,rgba(6,24,40,.86),rgba(6,24,40,.92))}
}


/* ---------- Meldung: die Einzelseite eines Beitrags ----------
   Redaktioneller Aufbau statt einer Reihe gleicher Absaetze: Kennzeile,
   Titel, Bild ueber die volle Bahn, danach eine schmale Textspalte. Die
   Spalte ist bewusst schmal, rund 70 Zeichen je Zeile lesen sich am besten. */

.bahn.schmal{max-width:760px}

.meldung{padding:0 0 10px}

.meldung-kopf{padding:44px 0 26px}
.meldung-kennzeile{
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-hell);margin:0 0 14px;
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
}
.meldung-kennzeile a{color:var(--blau);text-decoration:none;font-weight:600}
.meldung-kennzeile a:hover{text-decoration:underline}
.meldung-kennzeile span{color:var(--linie)}

.meldung-kopf h1{
  margin:0;font-size:clamp(28px,4.2vw,44px);line-height:1.18;
  letter-spacing:-.015em;max-width:16em;
}

.meldung-bild{margin:0 0 34px}
.meldung-bild img{
  display:block;width:100%;height:auto;
  max-height:min(60vh,520px);object-fit:cover;
  border-radius:6px;
}

/* --- Die Textspalte --- */
.meldung-text{font-size:17.5px;line-height:1.72;color:var(--text)}
.meldung-text p{margin:0 0 20px}

/* Der Vorspann fasst den Beitrag zusammen und wird groesser gesetzt. */
.meldung-text .vorspann{
  font-size:21px;line-height:1.58;font-weight:500;color:#1c2a35;
  margin:0 0 26px;padding-left:20px;
  border-left:4px solid var(--blau);
}

/* Zwischenueberschriften mit Luft davor, damit der Text Abschnitte bekommt. */
.meldung-text h2{
  margin:42px 0 14px;font-size:clamp(22px,2.6vw,28px);line-height:1.28;
  letter-spacing:-.01em;
}
.meldung-text h2:first-child{margin-top:0}

/* Aufzaehlungen mit eigenem Punkt statt des Standardpunkts. */
.meldung-liste{list-style:none;margin:0 0 24px;padding:0}
.meldung-liste li{position:relative;padding:0 0 0 30px;margin:0 0 12px}
.meldung-liste li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--blau);
}
.meldung-liste strong{color:#1c2a35}

.meldung-signatur{
  margin:34px 0 0;padding-top:18px;border-top:1px solid var(--linie);
  font-size:14px;color:var(--text-hell);
}

/* --- Aufforderung am Fuss des Textes --- */
.meldung-aktion{
  margin:30px 0 44px;padding:28px 30px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;
}
.meldung-aktion h2{margin:0 0 10px;font-size:21px}
.meldung-aktion p{margin:0 0 16px;font-size:16px;color:var(--text-hell)}
.meldung-aktion-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}

.newsraster-drei{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

@media(max-width:760px){
  .meldung-kopf{padding:30px 0 20px}
  .meldung-text{font-size:16.5px}
  .meldung-text .vorspann{font-size:19px;padding-left:16px}
  .meldung-text h2{margin-top:32px}
  .meldung-aktion{padding:22px 20px}
  .meldung-aktion-knoepfe .knopf{flex:1 1 100%;text-align:center}
}

.einstieg-klein{
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-hell);margin:0 0 22px;
}

/* ---------- Verweis auf die Schwesterseite piron-carport.de ----------
   Dunkler Streifen, damit der Block auffaellt, ohne wie eine Anzeige
   auszusehen. Links ein Stapel aus drei Fotos, rechts der Text. Auf
   schmalen Geraeten wandern die Fotos ueber den Text. */

.schwester{
  background:#0b2033;color:#e8eef4;
  padding:64px 0;margin:0;
  position:relative;overflow:hidden;
}
/* Ein weicher Lichtschein, damit die Flaeche nicht tot wirkt. */
.schwester::before{
  content:"";position:absolute;inset:auto -10% -40% 40%;
  height:70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,85,169,.5),transparent);
}

.schwester-innen{
  position:relative;z-index:1;
  display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
}

/* --- Der Fotostapel --- */
.schwester-bilder{
  display:grid;gap:12px;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
}
.schwester-bilder img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
/* Das erste Bild nimmt die ganze obere Reihe ein. */
.schwester-bilder img:nth-child(1){grid-column:1 / -1;aspect-ratio:16/9}
.schwester-bilder img:nth-child(2){aspect-ratio:4/5}
.schwester-bilder img:nth-child(3){aspect-ratio:4/5}

/* --- Der Text --- */
.schwester-text .marke{
  color:#7fb2e0;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 12px;font-weight:600;
}
.schwester-text h2{
  margin:0 0 16px;color:#fff;
  font-size:clamp(25px,3.1vw,36px);line-height:1.22;letter-spacing:-.015em;
}
.schwester-text p{color:#c3d2df;font-size:17px;line-height:1.68;margin:0 0 18px}

.schwester-punkte{list-style:none;margin:0 0 24px;padding:0}
.schwester-punkte li{
  position:relative;padding:0 0 0 32px;margin:0 0 11px;
  color:#e8eef4;font-size:16px;line-height:1.55;
}
/* Haken aus zwei Strichen, kein Symbol aus dem Zeichensatz. */
.schwester-punkte li::before{
  content:"";position:absolute;left:4px;top:.32em;
  width:7px;height:13px;
  border:solid #6fd08c;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.schwester .knopf-reihe{margin:0 0 14px}
.schwester-hilfe{font-size:15px;color:#93a7b8 !important}
.schwester-hilfe a{color:#9fc6ea}
.schwester-hilfe a:hover{color:#fff}

@media(max-width:900px){
  .schwester{padding:46px 0}
  .schwester-innen{grid-template-columns:1fr;gap:30px}
  .schwester-bilder img:nth-child(1){aspect-ratio:16/9}
}
@media(max-width:520px){
  .schwester-bilder{grid-template-columns:1fr}
  .schwester-bilder img:nth-child(2),
  .schwester-bilder img:nth-child(3){aspect-ratio:16/10}
  .schwester .knopf{display:block;text-align:center}
}

.einstieg-nach{
  margin:22px 0 0;font-size:16.5px;color:var(--text-hell);
  padding-left:16px;border-left:3px solid var(--linie);
}

/* ---------- Ueber uns, zweite Fassung ----------
   Die Seite nutzt sonst die Bausteine der uebrigen Seiten. Hier stehen nur
   die Ergaenzungen. */

/* Abstand unter einem Kartenblock, bevor ein Knopf folgt. */
.merkmale-nach{margin:30px 0 0}

/* --- Bild und Text nebeneinander, danach umgekehrt --- */
.angebot{margin:26px 0 0}
.angebot + .angebot{margin-top:38px}
.angebot-raster{
  display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,44%) minmax(0,1fr);
}
.angebot-gedreht .angebot-raster{grid-template-columns:minmax(0,1fr) minmax(0,44%)}
.angebot-gedreht .angebot-bild{order:2}
.angebot-gedreht .angebot-text{order:1}

.angebot-bild{margin:0;overflow:hidden;border-radius:6px}
.angebot-bild img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.angebot:hover .angebot-bild img{transform:scale(1.05)}

.angebot-marke{
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blau);font-weight:700;margin:0 0 8px;
  display:inline-flex;align-items:center;gap:8px;
}
/* Kleiner Strich vor der Kennzeile, statt eines Symbols. */
.angebot-marke::before{
  content:"";width:26px;height:2px;background:var(--blau);display:inline-block;
}
.angebot-text h3{margin:0 0 12px;font-size:clamp(21px,2.3vw,27px);line-height:1.28}
.angebot-text p{font-size:16.5px;line-height:1.68;margin:0 0 14px}
.angebot-text .einstieg{margin-bottom:14px}
.angebot-text p:last-child{margin-bottom:0}

/* --- Zitat als Blickfang --- */
.zitat{
  position:relative;margin:38px 0 0;padding:30px 34px 26px 78px;
  background:var(--weiss);border:1px solid var(--linie);
  border-left:4px solid var(--blau);border-radius:6px;
}
.zitat::before{
  content:"\201C";                 /* typografisches Anfuehrungszeichen */
  position:absolute;left:22px;top:2px;
  font-size:82px;line-height:1;color:var(--blau);opacity:.22;
  font-family:Georgia,"Times New Roman",serif;
}
.zitat blockquote{margin:0}
.zitat blockquote p{
  margin:0;font-size:clamp(19px,2.2vw,23px);line-height:1.5;
  font-weight:500;color:#1c2a35;
}
.zitat figcaption{
  margin-top:16px;font-size:15px;font-weight:600;color:var(--text-hell);
}
.zitat-quelle{
  display:block;font-weight:400;font-size:13.5px;color:var(--grau);
  margin-top:3px;
}

/* --- Ansprechpartner --- */
.personen{
  display:grid;gap:24px;margin:26px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:stretch;
}
.person{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s ease, border-color .3s ease;
}
.person:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(11,32,51,.12);
  border-color:#b9cde0;
}
/* Blauer Streifen an der Oberkante, der beim Ueberfahren aufzieht. */
.person::before{
  content:"";display:block;height:4px;background:var(--blau);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.person:hover::before{transform:scaleX(1)}

.person-bild{display:block;overflow:hidden;aspect-ratio:16/9}
.person-bild img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.person:hover .person-bild img{transform:scale(1.06)}

.person-inhalt{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.person h3{margin:0 0 4px;font-size:21px;line-height:1.25}
.person-rolle{
  margin:0 0 14px;font-size:14px;font-weight:700;color:var(--blau);
  letter-spacing:.03em;
}
.person p{font-size:16px;line-height:1.62;margin:0 0 14px}
.person-kontakt{
  margin:auto 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font-size:15.5px;line-height:1.8;
}

/* --- Bilderstrecke mit genau zwei Aufnahmen --- */
.galerie.galerie-zwei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* --- Bewegung beim Scrollen. Nur wo der Browser view() kennt und der
       Besucher Bewegung nicht abgeschaltet hat. --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .zahlen > div{
      animation:auf .7s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }
    .zahlen > div:nth-child(2){animation-delay:.06s}
    .zahlen > div:nth-child(3){animation-delay:.12s}
    .zahlen > div:nth-child(4){animation-delay:.18s}

    .zitat{
      animation:auf .8s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    .person{
      animation:auf .8s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 58%;
    }
    .person:nth-child(2){animation-delay:.1s}
  }
}

@media(max-width:820px){
  .angebot-raster,
  .angebot-gedreht .angebot-raster{grid-template-columns:1fr;gap:22px}
  .angebot-gedreht .angebot-bild{order:0}
  .angebot-gedreht .angebot-text{order:0}
  .zitat{padding:26px 24px 22px 62px}
  .zitat::before{left:16px;font-size:66px}
  .zahlen > div{padding:22px 18px 20px}
}


/* ---------- Bilderstrecke als Mosaik ----------
   Neun gleich grosse Kacheln wirken wie ein Katalog. Hier bekommt jedes
   sechste Bild die doppelte Breite und Hoehe, jedes sechste plus drei die
   doppelte Breite. "dense" fuellt die Luecken, die dabei entstehen, mit den
   naechsten kleinen Bildern auf.

   Die Bildunterschrift liegt im Bild und faehrt beim Ueberfahren herein.
   Auf Geraeten ohne Mauszeiger steht sie fest, sonst waere sie dort nie
   zu sehen. */

.galerie.galerie-mosaik{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:200px;
  grid-auto-flow:dense;
  gap:14px;
}

.galerie-mosaik figure{
  display:block;position:relative;margin:0;
  overflow:hidden;border-radius:6px;
  background:var(--flaeche);
}
.galerie-mosaik figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.galerie-mosaik figure:nth-child(6n+4){grid-column:span 2}

.galerie-mosaik .bildrahmen{
  display:block;height:100%;border-radius:0;overflow:hidden;
}
.galerie-mosaik img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.galerie-mosaik figure:hover img{transform:scale(1.06)}

/* Ein leichter Schleier, der beim Ueberfahren aufzieht. Ohne ihn waere die
   weisse Schrift auf hellen Aufnahmen schlecht zu lesen. */
.galerie-mosaik figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,22,36,0) 45%,rgba(8,22,36,.72));
  opacity:0;transition:opacity .4s ease;
}
.galerie-mosaik figure:hover::after{opacity:1}

.galerie-mosaik figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:16px 18px 15px;
  color:#fff;font-size:15px;font-weight:600;line-height:1.35;
  transform:translateY(12px);opacity:0;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.galerie-mosaik figure:hover figcaption{transform:none;opacity:1}

/* Sichtbarer Rahmen fuer die Tastaturbedienung. */
.galerie-mosaik figure:focus-within::after,
.galerie-mosaik figure:focus-within figcaption{opacity:1}

@media(max-width:1080px){
  .galerie.galerie-mosaik{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:180px}
}

/* Auf Geraeten ohne Mauszeiger gibt es kein Ueberfahren. Dort steht die
   Beschriftung fest im Bild. */
@media (hover: none){
  .galerie-mosaik figure::after{opacity:1}
  .galerie-mosaik figcaption{transform:none;opacity:1}
}

/* Auf dem Handy wird aus dem Mosaik ein Band zum Wischen mit
   Einrastpunkten. Eine Kolonne aus neun Bildern waere sonst endlos. */
@media(max-width:700px){
  .galerie.galerie-mosaik{
    display:flex;gap:12px;
    grid-template-columns:none;grid-auto-rows:auto;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
    scrollbar-width:thin;
  }
  .galerie-mosaik figure,
  .galerie-mosaik figure:nth-child(6n+1),
  .galerie-mosaik figure:nth-child(6n+4){
    flex:0 0 82%;scroll-snap-align:center;
  }
  .galerie-mosaik .bildrahmen{aspect-ratio:4/3;height:auto}
  .galerie-mosaik img{height:100%}
}

@media (prefers-reduced-motion: reduce){
  .galerie-mosaik img,
  .galerie-mosaik figcaption,
  .galerie-mosaik figure::after{transition:none}
  .galerie-mosaik figure:hover img{transform:none}
}

/* Absaetze, die zwei Knoepfe nebeneinander tragen. Ohne das steht zwischen
   ihnen nur der Wortabstand, und beim Umbruch kleben sie aneinander. */
.knopf + .knopf{margin-left:12px}


/* ---------- Filterbare Bilderstrecke ----------
   Die Schalter sind verdeckte Auswahlfelder vor der Strecke. Das CSS
   blendet ueber den Geschwisterwaehler aus, was nicht zum gewaehlten
   Merkmal passt. Kein Skript noetig, und mit der Tastatur bedienbar. */

.filtergalerie{position:relative;margin:26px 0 0}

.fg-schalter{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.filterleiste{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 22px;
}

.fg-knopf{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:999px;cursor:pointer;
  background:var(--weiss);border:1px solid var(--linie);
  font-size:15px;font-weight:600;color:var(--text);
  transition:background .25s ease,border-color .25s ease,color .25s ease,
             box-shadow .25s ease,transform .2s ease;
  user-select:none;
}
.fg-knopf span{
  font-size:12.5px;font-weight:700;line-height:1;
  padding:4px 8px;border-radius:999px;
  background:var(--flaeche);color:var(--text-hell);
  transition:background .25s ease,color .25s ease;
}
.fg-knopf:hover{border-color:#b9cde0;transform:translateY(-1px)}

/* Kleiner Farbpunkt vor der Beschriftung, damit die Auswahl auf einen
   Blick zu erfassen ist. */
.fg-knopf::before{
  content:"";width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(0,0,0,.16);flex:0 0 auto;
}
.fg-knopf.fg-alle::before{
  background:conic-gradient(#3a4149 0 25%,#e9e6de 0 50%,#7a4a24 0 75%,#c0392b 0);
  border-color:rgba(0,0,0,.2);
}
.fg-knopf.fg-anthrazit::before{background:#3a4149}
.fg-knopf.fg-weiss::before{background:#eceae4}
.fg-knopf.fg-holz::before{background:#7a4a24}
.fg-knopf.fg-sonder::before{background:linear-gradient(135deg,#c0392b 50%,#2f6fb5 50%)}
.fg-knopf.fg-lamellen::before{
  background:repeating-linear-gradient(180deg,#5a6672 0 3px,#aeb6bd 3px 5px);
}
.fg-knopf.fg-schiebe::before{background:linear-gradient(135deg,#bcd8e8 50%,#7f8c95 50%)}
.fg-knopf.fg-xl::before{background:#2f6fb5}
.fg-knopf.fg-sl150::before{background:#8a9aa6}
.fg-knopf.fg-klassisch::before{background:#c9cfd4}
.fg-knopf.fg-aufdach::before{background:linear-gradient(180deg,#f2c94c 45%,#bcd8e8 45%)}
.fg-knopf.fg-unterdach::before{background:linear-gradient(180deg,#bcd8e8 45%,#f2c94c 45%)}
.fg-knopf.fg-senkrecht::before{background:linear-gradient(90deg,#f2c94c 50%,#7f8c95 50%)}
.fg-knopf.fg-ausstellung::before{background:#c9cfd4}
.fg-knopf.fg-led::before{
  background:radial-gradient(circle at 50% 50%,#fff6cc 0 40%,#f2c94c 41%,#d9a92a 100%);
}

.fg-schalter:focus-visible + .filterleiste .fg-knopf,
.fg-schalter:focus-visible ~ .filterleiste .fg-knopf{outline:none}

/* Ausgewaehlt: blau gefuellt. Frueher nannten diese Regeln die
   Auswahlfelder beim Namen, damit galten sie nur fuer eine Seite. Jetzt
   traegt jedes Feld sein Merkmal in data-w, und :has() prueft am Block, was
   gerade gewaehlt ist. Damit gilt der Filter ueberall.

   Aeltere Browser ohne :has() zeigen alle Bilder. Das ist kein Fehler,
   sondern der gewollte Rueckfall. */
.filtergalerie:has(.fg-schalter[data-w="alle"]:checked)      .fg-alle,
.filtergalerie:has(.fg-schalter[data-w="anthrazit"]:checked) .fg-anthrazit,
.filtergalerie:has(.fg-schalter[data-w="weiss"]:checked)     .fg-weiss,
.filtergalerie:has(.fg-schalter[data-w="holz"]:checked)      .fg-holz,
.filtergalerie:has(.fg-schalter[data-w="sonder"]:checked)    .fg-sonder,
.filtergalerie:has(.fg-schalter[data-w="led"]:checked)       .fg-led,
.filtergalerie:has(.fg-schalter[data-w="lamellen"]:checked)  .fg-lamellen,
.filtergalerie:has(.fg-schalter[data-w="schiebe"]:checked)   .fg-schiebe,
.filtergalerie:has(.fg-schalter[data-w="xl"]:checked)        .fg-xl,
.filtergalerie:has(.fg-schalter[data-w="sl150"]:checked)     .fg-sl150,
.filtergalerie:has(.fg-schalter[data-w="aufdach"]:checked)   .fg-aufdach,
.filtergalerie:has(.fg-schalter[data-w="unterdach"]:checked) .fg-unterdach,
.filtergalerie:has(.fg-schalter[data-w="senkrecht"]:checked) .fg-senkrecht,
.filtergalerie:has(.fg-schalter[data-w="ausstellung"]:checked) .fg-ausstellung,
.filtergalerie:has(.fg-schalter[data-w="klassisch"]:checked) .fg-klassisch{
  background:var(--blau);border-color:var(--blau);color:#fff;
  box-shadow:0 8px 20px rgba(0,85,169,.28);
}
.filtergalerie:has(.fg-schalter[data-w="alle"]:checked)      .fg-alle span,
.filtergalerie:has(.fg-schalter[data-w="anthrazit"]:checked) .fg-anthrazit span,
.filtergalerie:has(.fg-schalter[data-w="weiss"]:checked)     .fg-weiss span,
.filtergalerie:has(.fg-schalter[data-w="holz"]:checked)      .fg-holz span,
.filtergalerie:has(.fg-schalter[data-w="sonder"]:checked)    .fg-sonder span,
.filtergalerie:has(.fg-schalter[data-w="led"]:checked)       .fg-led span,
.filtergalerie:has(.fg-schalter[data-w="lamellen"]:checked)  .fg-lamellen span,
.filtergalerie:has(.fg-schalter[data-w="schiebe"]:checked)   .fg-schiebe span,
.filtergalerie:has(.fg-schalter[data-w="xl"]:checked)        .fg-xl span,
.filtergalerie:has(.fg-schalter[data-w="sl150"]:checked)     .fg-sl150 span,
.filtergalerie:has(.fg-schalter[data-w="aufdach"]:checked)   .fg-aufdach span,
.filtergalerie:has(.fg-schalter[data-w="unterdach"]:checked) .fg-unterdach span,
.filtergalerie:has(.fg-schalter[data-w="senkrecht"]:checked) .fg-senkrecht span,
.filtergalerie:has(.fg-schalter[data-w="ausstellung"]:checked) .fg-ausstellung span,
.filtergalerie:has(.fg-schalter[data-w="klassisch"]:checked) .fg-klassisch span{
  background:rgba(255,255,255,.22);color:#fff;
}

/* Tastaturbedienung sichtbar machen. */
.filtergalerie:has(.fg-schalter[data-w="alle"]:focus-visible)      .fg-alle,
.filtergalerie:has(.fg-schalter[data-w="anthrazit"]:focus-visible) .fg-anthrazit,
.filtergalerie:has(.fg-schalter[data-w="weiss"]:focus-visible)     .fg-weiss,
.filtergalerie:has(.fg-schalter[data-w="holz"]:focus-visible)      .fg-holz,
.filtergalerie:has(.fg-schalter[data-w="sonder"]:focus-visible)    .fg-sonder,
.filtergalerie:has(.fg-schalter[data-w="led"]:focus-visible)       .fg-led,
.filtergalerie:has(.fg-schalter[data-w="lamellen"]:focus-visible)  .fg-lamellen,
.filtergalerie:has(.fg-schalter[data-w="schiebe"]:focus-visible)   .fg-schiebe,
.filtergalerie:has(.fg-schalter[data-w="xl"]:focus-visible)        .fg-xl,
.filtergalerie:has(.fg-schalter[data-w="sl150"]:focus-visible)     .fg-sl150,
.filtergalerie:has(.fg-schalter[data-w="aufdach"]:focus-visible)   .fg-aufdach,
.filtergalerie:has(.fg-schalter[data-w="unterdach"]:focus-visible) .fg-unterdach,
.filtergalerie:has(.fg-schalter[data-w="senkrecht"]:focus-visible) .fg-senkrecht,
.filtergalerie:has(.fg-schalter[data-w="ausstellung"]:focus-visible) .fg-ausstellung,
.filtergalerie:has(.fg-schalter[data-w="klassisch"]:focus-visible) .fg-klassisch{
  outline:3px solid rgba(0,85,169,.45);outline-offset:2px;
}

/* Ausblenden, was nicht zum gewaehlten Merkmal passt. */
.filtergalerie:has(.fg-schalter[data-w="anthrazit"]:checked) .galerie figure:not(.m-anthrazit),
.filtergalerie:has(.fg-schalter[data-w="weiss"]:checked)     .galerie figure:not(.m-weiss),
.filtergalerie:has(.fg-schalter[data-w="holz"]:checked)      .galerie figure:not(.m-holz),
.filtergalerie:has(.fg-schalter[data-w="sonder"]:checked)    .galerie figure:not(.m-sonder),
.filtergalerie:has(.fg-schalter[data-w="led"]:checked)       .galerie figure:not(.m-led),
.filtergalerie:has(.fg-schalter[data-w="lamellen"]:checked)  .galerie figure:not(.m-lamellen),
.filtergalerie:has(.fg-schalter[data-w="schiebe"]:checked)   .galerie figure:not(.m-schiebe),
.filtergalerie:has(.fg-schalter[data-w="xl"]:checked)        .galerie figure:not(.m-xl),
.filtergalerie:has(.fg-schalter[data-w="sl150"]:checked)     .galerie figure:not(.m-sl150),
.filtergalerie:has(.fg-schalter[data-w="aufdach"]:checked)   .galerie figure:not(.m-aufdach),
.filtergalerie:has(.fg-schalter[data-w="unterdach"]:checked) .galerie figure:not(.m-unterdach),
.filtergalerie:has(.fg-schalter[data-w="senkrecht"]:checked) .galerie figure:not(.m-senkrecht),
.filtergalerie:has(.fg-schalter[data-w="ausstellung"]:checked) .galerie figure:not(.m-ausstellung),
.filtergalerie:has(.fg-schalter[data-w="klassisch"]:checked) .galerie figure:not(.m-klassisch){
  display:none;
}

/* Die sichtbaren Kacheln blenden gestaffelt ein. Der Wechsel von
   display:none zurueck startet die Bewegung von selbst neu, deshalb
   braucht es dafuer kein Skript. */
@media (prefers-reduced-motion: no-preference){
  .galerie-filter figure{animation:fg-rein .45s cubic-bezier(.22,.61,.36,1) both}
  .galerie-filter figure:nth-child(2){animation-delay:.03s}
  .galerie-filter figure:nth-child(3){animation-delay:.06s}
  .galerie-filter figure:nth-child(4){animation-delay:.09s}
  .galerie-filter figure:nth-child(5){animation-delay:.12s}
  .galerie-filter figure:nth-child(6){animation-delay:.15s}
  .galerie-filter figure:nth-child(7){animation-delay:.18s}
  .galerie-filter figure:nth-child(8){animation-delay:.21s}
  .galerie-filter figure:nth-child(n+9){animation-delay:.24s}
}
@keyframes fg-rein{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to  {opacity:1;transform:none}
}

@media(max-width:600px){
  .filterleiste{
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;
    scrollbar-width:thin;
  }
  .fg-knopf{flex:0 0 auto}
}


/* ---------- Bausteine der Ueberdachungsseite ---------- */

/* Drei Karten nebeneinander. auto-fit wuerde bei genau drei zwar passen,
   aber fest gesetzt bleibt die Reihe auch bei knapper Bahn stabil. */
.merkmale.merkmale-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .merkmale.merkmale-drei{grid-template-columns:1fr}
}

/* --- Wegweiser: die Karte ist als Ganzes ein Verweis --- */
a.merkmal.wegweiser{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.merkmal.wegweiser .merkmalinhalt{display:flex;flex-direction:column;flex:1}

.wegweiser-frage{
  display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blau);font-weight:700;margin-bottom:6px;
}
.wegweiser-antwort{
  display:block;font-size:22px;font-weight:700;line-height:1.25;
  color:var(--text);margin-bottom:10px;letter-spacing:-.01em;
}
.wegweiser-text{
  display:block;font-size:16px;line-height:1.6;color:var(--text-hell);
  margin-bottom:16px;
}
a.merkmal.wegweiser .weiterlesen{margin-top:auto}
a.merkmal.wegweiser:hover .wegweiser-antwort{color:var(--blau)}

/* --- Eckdaten unter einem Systemtext --- */
.eckliste{list-style:none;margin:14px 0 0;padding:0}
.eckliste li{
  position:relative;padding:0 0 0 26px;margin:0 0 9px;
  font-size:15.5px;line-height:1.55;color:var(--text-hell);
}
.eckliste li::before{
  content:"";position:absolute;left:2px;top:.44em;
  width:6px;height:11px;
  border:solid var(--blau);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* --- Hervorgehobener Merkkasten --- */
.merkkasten{
  position:relative;margin:0 0 44px;padding:34px 38px 30px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:8px;
  border-left:5px solid var(--blau);
  box-shadow:0 14px 34px rgba(11,32,51,.07);
}
.merkkasten-marke{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blau);font-weight:700;margin:0 0 8px;
}
.merkkasten h2{margin:0 0 12px;font-size:clamp(22px,2.6vw,29px);line-height:1.25}
.merkkasten p{font-size:16.5px;line-height:1.7;margin:0 0 16px;max-width:70ch}
.merkkasten p:last-child{margin-bottom:0}

/* --- Ablauf als nummerierte Kette --- */
.schritte{
  list-style:none;counter-reset:schritt;
  margin:26px 0 0;padding:0;
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.schritte li{position:relative;padding-top:56px}
.schritte li::before{
  counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blau);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,85,169,.3);
}
/* Verbindungslinie zwischen den Schritten, nur solange sie in einer Reihe
   stehen. Beim Umbruch waere sie sinnlos. */
.schritte li::after{
  content:"";position:absolute;left:54px;top:21px;right:-26px;height:2px;
  background:linear-gradient(90deg,var(--linie),rgba(223,228,232,0));
}
.schritte li:last-child::after{display:none}
.schritte h3{margin:0 0 8px;font-size:18.5px;line-height:1.3}
.schritte p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-hell)}

@media(max-width:760px){
  .schritte{grid-template-columns:1fr;gap:22px}
  .schritte li{padding:0 0 0 62px}
  .schritte li::after{
    left:21px;top:50px;bottom:-22px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--linie),rgba(223,228,232,0));
  }
  .merkkasten{padding:26px 22px 24px}
}

/* Einblenden beim Scrollen, wie bei den uebrigen Bausteinen. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .schritte:not(.schritte-start) li{
      animation:auf .7s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
    }
    .schritte li:nth-child(2){animation-delay:.08s}
    .schritte li:nth-child(3){animation-delay:.16s}
    .schritte li:nth-child(4){animation-delay:.24s}
    .merkkasten{
      animation:auf .8s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
  }
}

/* --- Schrittfolge der Startseite (v0.5.2) ---
   Die Kreise springen nacheinander auf, die Verbindungslinie zeichnet sich
   zum naechsten Schritt, Titel und Text folgen von unten. klick.js setzt
   "bereit" (versteckt) und beim Sichtbarwerden "laeuft", einmalig. Ohne
   Skript oder bei Bewegungsreduzierung steht der Block sofort komplett da.
   Die uebrigen Seiten (Ablauf, Anfrage) behalten das Einblenden von oben. */
@media (prefers-reduced-motion: no-preference){
  .schritte-start.bereit li::before{transform:scale(.4);opacity:0}
  .schritte-start.bereit li::after{transform:scaleX(0);transform-origin:left center}
  .schritte-start.bereit h3,.schritte-start.bereit p{opacity:0;transform:translateY(12px)}
  .schritte-start.laeuft li::before{animation:schritt-kreis .55s cubic-bezier(.34,1.56,.64,1) forwards}
  .schritte-start.laeuft li::after{animation:schritt-linie .6s ease-out forwards}
  .schritte-start.laeuft h3,.schritte-start.laeuft p{animation:schritt-text .5s ease-out forwards}
  .schritte-start.laeuft li:nth-child(1)::before{animation-delay:0.0s}
  .schritte-start.laeuft li:nth-child(1)::after{animation-delay:0.25s}
  .schritte-start.laeuft li:nth-child(1) h3,.schritte-start.laeuft li:nth-child(1) p{animation-delay:0.12s}
  .schritte-start.laeuft li:nth-child(2)::before{animation-delay:0.35s}
  .schritte-start.laeuft li:nth-child(2)::after{animation-delay:0.6s}
  .schritte-start.laeuft li:nth-child(2) h3,.schritte-start.laeuft li:nth-child(2) p{animation-delay:0.47s}
  .schritte-start.laeuft li:nth-child(3)::before{animation-delay:0.7s}
  .schritte-start.laeuft li:nth-child(3)::after{animation-delay:0.95s}
  .schritte-start.laeuft li:nth-child(3) h3,.schritte-start.laeuft li:nth-child(3) p{animation-delay:0.82s}
  .schritte-start.laeuft li:nth-child(4)::before{animation-delay:1.05s}
  .schritte-start.laeuft li:nth-child(4)::after{animation-delay:1.3s}
  .schritte-start.laeuft li:nth-child(4) h3,.schritte-start.laeuft li:nth-child(4) p{animation-delay:1.17s}
  @media(max-width:760px){
    .schritte-start.bereit li::after{transform:scaleY(0);transform-origin:center top}
    .schritte-start.laeuft li::after{animation-name:schritt-linie-senkrecht}
  }
}
@keyframes schritt-kreis{to{transform:scale(1);opacity:1}}
@keyframes schritt-linie{to{transform:scaleX(1)}}
@keyframes schritt-linie-senkrecht{to{transform:scaleY(1)}}
@keyframes schritt-text{to{opacity:1;transform:none}}


/* ---------- Der Seitenstandard: Filmband, Siegel, Farbpalette, Fragen ---------- */

/* --- Filme als wischbares Band mit Einrastpunkten.
       24 Filme in einem Raster sind ein Archiv, ein Band ist eine Einladung. --- */
.videoliste.filmband{
  display:flex;gap:16px;
  grid-template-columns:none;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 14px;margin:18px 0 0;
  scrollbar-width:thin;scrollbar-color:var(--linie) transparent;
}
.videoliste.filmband .videokachel{
  flex:0 0 min(340px,78vw);scroll-snap-align:start;
}
/* Zarte Kante rechts als Hinweis, dass es weitergeht. */
.filmband-huelle{position:relative}
.filmband-huelle::after{
  content:"";position:absolute;top:0;bottom:14px;right:0;width:56px;
  pointer-events:none;
  background:linear-gradient(270deg,var(--weiss),rgba(255,255,255,0));
}
section.hell .filmband-huelle::after{
  background:linear-gradient(270deg,var(--flaeche),rgba(247,247,247,0));
}
.filmband-hinweis{
  font-size:13.5px;color:var(--text-hell);margin:6px 0 0;
  display:flex;align-items:center;gap:8px;
}
.filmband-hinweis::before{
  content:"";width:22px;height:2px;background:var(--linie);display:inline-block;
}

/* --- Siegel-Leiste: Bild oder Wort, daneben die Bedeutung --- */
.siegelleiste{
  display:grid;gap:16px;margin:26px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.siegelkachel{
  display:flex;align-items:center;gap:16px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  padding:14px 18px;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.siegelkachel:hover{box-shadow:0 10px 26px rgba(11,32,51,.09);border-color:#b9cde0}
.siegelbild{flex:0 0 96px;display:flex;align-items:center;justify-content:center}
.siegelbild img{max-width:96px;max-height:56px;width:auto;height:auto;display:block}
.siegelwort{
  flex:0 0 96px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-align:center;
  color:var(--blau);line-height:1.25;
  border:2px solid var(--blau);border-radius:4px;padding:8px 6px;
}
.siegeltext{font-size:14.5px;line-height:1.45;color:var(--text-hell)}
.siegeltext strong{display:block;color:var(--text);font-size:15px;margin-bottom:2px}

/* --- Farbpalette: echte Musterfotos als Kacheln --- */
.farbpalette{
  display:grid;gap:14px;margin:22px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.farbmuster{
  margin:0;text-align:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.farbmuster:hover{transform:translateY(-4px)}
.farbbild{
  display:block;overflow:hidden;border-radius:50%;
  aspect-ratio:1/1;width:100%;max-width:150px;margin:0 auto;
  border:4px solid var(--weiss);
  box-shadow:0 8px 22px rgba(11,32,51,.14);
  transition:box-shadow .3s ease;
}
.farbmuster:hover .farbbild{box-shadow:0 14px 30px rgba(11,32,51,.22)}
.farbbild img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15)}
.farbmuster figcaption{
  margin-top:10px;font-size:14px;font-weight:600;line-height:1.35;color:var(--text);
}

/* --- Fragen auf Leistungsseiten: gleiche Optik wie die FAQ-Seite,
       nur mit etwas mehr Luft nach oben --- */
.fragen.fragen-seite{margin-top:22px}

/* --- Bewegung beim Scrollen --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .siegelkachel,
    .farbmuster{
      animation:auf .7s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    .siegelkachel:nth-child(2){animation-delay:.07s}
    .siegelkachel:nth-child(3){animation-delay:.14s}
    .farbmuster:nth-child(2){animation-delay:.04s}
    .farbmuster:nth-child(3){animation-delay:.08s}
    .farbmuster:nth-child(4){animation-delay:.12s}
    .farbmuster:nth-child(5){animation-delay:.16s}
    .farbmuster:nth-child(6){animation-delay:.20s}
    .farbmuster:nth-child(7){animation-delay:.24s}
    .farbmuster:nth-child(8){animation-delay:.28s}
  }
}

@media(max-width:600px){
  .siegelkachel{padding:12px 14px;gap:12px}
  .siegelbild,.siegelwort{flex-basis:78px}
  .farbpalette{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* Eckliste zweispaltig, fuer laengere Merkmalslisten. */
.eckliste.eckliste-zwei{
  display:grid;gap:6px 34px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

/* Modelltabellen der Markisen: die Tabelle behaelt ihre Struktur, bekommt
   aber Rahmen, Zebra und einen Rand zum Wischen auf schmalen Geraeten. */
.modelltabelle{margin:18px 0 38px;overflow-x:auto}
.modelltabelle p{font-size:15.5px;color:var(--text-hell);margin:0 0 10px}
.modelltabelle table{
  width:100%;border-collapse:collapse;font-size:15px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  overflow:hidden;
}
.modelltabelle th,.modelltabelle td{
  padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linie);
}
.modelltabelle th{
  background:var(--flaeche);font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-hell);
}
.modelltabelle tr:last-child td{border-bottom:0}
.modelltabelle td:first-child{font-weight:700;color:var(--blau);white-space:nowrap}


/* ---------- Anfrage in drei Schritten ----------
   Ein Formular, drei Abschnitte. Die Leiste oben zeigt, wo man ist, und
   springt per Anker. Kein Skript, deshalb keine echten Seitenwechsel. */

.fortschritt{
  list-style:none;margin:26px 0 30px;padding:0;
  display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));
  counter-reset:keiner;
}
.fortschritt a{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:6px;
  background:var(--weiss);border:1px solid var(--linie);
  color:var(--text);text-decoration:none;font-weight:600;font-size:15px;
  transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease;
}
.fortschritt a:hover{border-color:#b9cde0;box-shadow:0 8px 20px rgba(11,32,51,.08);transform:translateY(-1px)}
.fortschritt a span{
  flex:0 0 32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blau);color:#fff;font-size:14px;font-weight:700;
}

.anfrage-schritte .schritt{
  border:1px solid var(--linie);border-radius:8px;
  padding:26px 28px 24px;margin:0 0 24px;
  background:var(--weiss);
  scroll-margin-top:90px;
}
.anfrage-schritte legend{
  display:flex;align-items:center;gap:12px;
  font-size:21px;font-weight:700;padding:0 10px;margin-left:-10px;
}
.schrittnr{
  flex:0 0 36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blau);color:#fff;font-size:15px;
}
.schritt-hilfe{margin:4px 0 16px;font-size:15px;color:var(--text-hell)}
.hilfe-inline{font-weight:400;font-size:13.5px;color:var(--text-hell);margin-left:6px}

/* --- Bereich als Bildkacheln. Das Auswahlfeld bleibt bedienbar, ist aber
       verdeckt; ausgewaehlt wird ueber das Label. --- */
.bereichkacheln{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.bereichkachel{
  position:relative;display:flex;flex-direction:column;
  border:2px solid var(--linie);border-radius:8px;overflow:hidden;
  background:var(--weiss);cursor:pointer;
  transition:border-color .2s ease,box-shadow .25s ease,transform .2s ease;
}
.bereichkachel:hover{border-color:#b9cde0;transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,32,51,.10)}
.bereichkachel input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bereichbild{display:block;aspect-ratio:4/3;overflow:hidden}
.bereichbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.bereichkachel:hover .bereichbild img{transform:scale(1.05)}
.bereichname{display:block;padding:12px 14px 2px;font-weight:700;font-size:15.5px}
.bereichtext{display:block;padding:0 14px 14px;font-size:13.5px;color:var(--text-hell);line-height:1.4}
.bereichkachel-ohne{justify-content:center;min-height:120px;background:var(--flaeche)}
.bereichkachel-ohne .bereichname{padding-top:16px}

/* Ausgewaehlt: blauer Rand und Haken oben rechts. */
.bereichkachel:has(input:checked){border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.18)}
.bereichkachel:has(input:checked)::after{
  content:"";position:absolute;top:10px;right:10px;
  width:26px;height:26px;border-radius:50%;background:var(--blau);
  background-image:linear-gradient(45deg,transparent 0 40%,#fff 40% 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 0 45%,#fff 45% 60%,transparent 60%);
  background-size:9px 9px,14px 14px;background-repeat:no-repeat;
  background-position:7px 12px,10px 6px;
}
.bereichkachel:has(input:focus-visible){outline:3px solid rgba(0,85,169,.45);outline-offset:2px}

.absenden{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 0}
.absenden .hilfe{font-size:14px;color:var(--text-hell)}

@media(max-width:700px){
  .fortschritt{grid-template-columns:1fr;gap:8px}
  .fortschritt a{padding:11px 14px}
  .anfrage-schritte .schritt{padding:20px 16px 18px}
  .bereichkacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ---------- Kontakt: Karte, Fahrzeiten, Adresse ---------- */

/* Zwei-Klick-Karte: Bild vom eigenen Server, Schleier mit Knopf darueber. */
.karte{
  position:relative;margin:24px 0 34px;border-radius:8px;overflow:hidden;
  border:1px solid var(--linie);background:var(--flaeche);
  aspect-ratio:3/2;max-height:520px;
}
.karte img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.karte-schleier{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.55));
  padding:20px;
}
.karte-schleier .knopf + .knopf{margin-left:0}
.karte-schleier .knopf.hell{color:var(--blau);border-color:var(--blau)}
.karte-schleier .knopf.hell:hover{background:var(--blau);color:#fff}
.karte-hinweis{margin:6px 0 0;font-size:13.5px;color:var(--text);max-width:52ch;
  background:rgba(255,255,255,.85);padding:8px 12px;border-radius:4px}
.karte.karte-aktiv{aspect-ratio:auto;height:520px;background:var(--weiss)}
.karte-rahmen{width:100%;height:100%;border:0;display:block}

/* Fahrzeiten aus den 14 Orten als Liste in Spalten */
.fahrzeiten{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;gap:0 30px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.fahrzeiten li{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--linie);font-size:15.5px;
}
.fahrzeiten a{color:var(--text);text-decoration:none;font-weight:600}
.fahrzeiten a:hover{color:var(--blau)}
.fahrzeit-km{color:var(--text-hell);font-size:14px;font-variant-numeric:tabular-nums}
.fahrzeit-min{color:var(--blau);font-weight:700;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}

/* Adressbloecke unter den Ansprechpartnern */
.adresse{
  display:grid;gap:22px;margin:30px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.adresse-block h3{margin:0 0 8px;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-hell)}
.adresse-block p{margin:0;font-size:16px;line-height:1.9}
.adresse-block a{font-weight:600}

/* Bildunterschriften mit fettem Vorsatz, etwa beim Gelaende */
.galerie-zwei figcaption strong{display:block;color:var(--text);margin-bottom:2px}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .fahrzeiten li,.bereichkachel{
      animation:auf .6s ease-out both;animation-timeline:view();
      animation-range:entry 0% entry 50%;
    }
  }
}


/* ---------- Aktionsblock mit Farbwaehler ----------
   Links der Text, rechts ein Tor, das die Farbe wechselt. Die acht Bilder
   liegen uebereinander, sichtbar ist das zur gewaehlten Option. Ohne :has()
   bleibt das erste stehen, die Punkte sind dann nur Beschriftung. */

.aktion-zwei .aktion-raster{
  display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,46%);
}
.aktion-zwei .aktion-text{max-width:none}

.aktion-spiel{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:22px 22px 18px;
  backdrop-filter:blur(6px);
}
.fw-titel{
  margin:0 0 14px;color:#dbe6f0;font-size:14px;letter-spacing:.02em;
}

.farbwaehler{position:relative}
.fw-schalter{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.fw-buehne{
  position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  background:#0b1520;box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.fw-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .55s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}

.fw-punkte{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.fw-punkt{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:var(--f);border:2px solid rgba(255,255,255,.85);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;
}
.fw-punkt:hover{transform:scale(1.15)}

.fw-name{margin:12px 0 0;color:#fff;font-weight:700;font-size:16px;min-height:1.4em}
.fw-name span{display:none}

.farbwaehler:has(.fw-schalter[data-nr="1"]:checked) .fw-bild[data-nr="1"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="1"]:checked) .fw-name span[data-nr="1"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="1"]:checked) .fw-punkt:nth-child(1){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="1"]:focus-visible) .fw-punkt:nth-child(1){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="2"]:checked) .fw-bild[data-nr="2"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="2"]:checked) .fw-name span[data-nr="2"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="2"]:checked) .fw-punkt:nth-child(2){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="2"]:focus-visible) .fw-punkt:nth-child(2){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="3"]:checked) .fw-bild[data-nr="3"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="3"]:checked) .fw-name span[data-nr="3"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="3"]:checked) .fw-punkt:nth-child(3){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="3"]:focus-visible) .fw-punkt:nth-child(3){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="4"]:checked) .fw-bild[data-nr="4"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="4"]:checked) .fw-name span[data-nr="4"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="4"]:checked) .fw-punkt:nth-child(4){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="4"]:focus-visible) .fw-punkt:nth-child(4){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="5"]:checked) .fw-bild[data-nr="5"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="5"]:checked) .fw-name span[data-nr="5"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="5"]:checked) .fw-punkt:nth-child(5){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="5"]:focus-visible) .fw-punkt:nth-child(5){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="6"]:checked) .fw-bild[data-nr="6"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="6"]:checked) .fw-name span[data-nr="6"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="6"]:checked) .fw-punkt:nth-child(6){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="6"]:focus-visible) .fw-punkt:nth-child(6){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="7"]:checked) .fw-bild[data-nr="7"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="7"]:checked) .fw-name span[data-nr="7"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="7"]:checked) .fw-punkt:nth-child(7){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="7"]:focus-visible) .fw-punkt:nth-child(7){outline:3px solid #fff;outline-offset:3px}
.farbwaehler:has(.fw-schalter[data-nr="8"]:checked) .fw-bild[data-nr="8"]{opacity:1;transform:scale(1)}
.farbwaehler:has(.fw-schalter[data-nr="8"]:checked) .fw-name span[data-nr="8"]{display:inline}
.farbwaehler:has(.fw-schalter[data-nr="8"]:checked) .fw-punkt:nth-child(8){transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--f)}
.farbwaehler:has(.fw-schalter[data-nr="8"]:focus-visible) .fw-punkt:nth-child(8){outline:3px solid #fff;outline-offset:3px}

/* Beim ersten Erscheinen laufen die Punkte einmal durch, damit der Blick
   dorthin geht. Nur, wenn Bewegung erlaubt ist. */
@media (prefers-reduced-motion: no-preference){
  .fw-punkt{animation:fw-wink .6s ease-out both}
  .fw-punkt:nth-child(1){animation-delay:.15s}
  .fw-punkt:nth-child(2){animation-delay:.22s}
  .fw-punkt:nth-child(3){animation-delay:.29s}
  .fw-punkt:nth-child(4){animation-delay:.36s}
  .fw-punkt:nth-child(5){animation-delay:.43s}
  .fw-punkt:nth-child(6){animation-delay:.50s}
  .fw-punkt:nth-child(7){animation-delay:.57s}
  .fw-punkt:nth-child(8){animation-delay:.64s}
}
@keyframes fw-wink{
  0%{transform:translateY(10px) scale(.6);opacity:0}
  60%{transform:translateY(-3px) scale(1.12);opacity:1}
  100%{transform:none;opacity:1}
}

@media(max-width:900px){
  .aktion-zwei .aktion-raster{grid-template-columns:1fr;gap:26px}
  .aktion-spiel{padding:16px 16px 14px}
}


/* ---------- Partnerkacheln: einmal umklappen ----------
   Die fuenf Kacheln im Kopf drehen sich beim Erscheinen einmal um die
   Hochachse, nacheinander, dann ist Ruhe. Nur auf der Startseite; auf
   Unterseiten wuerde das bei jedem Klick wiederholt und stoeren. Im
   Aufklappmenue laeuft es beim Oeffnen, weil display:none -> flex die
   Bewegung neu startet.

   Reine transform-Bewegung: nichts verschiebt sich im Layout, also kein
   CLS. Rueckseite unsichtbar, dadurch wirkt es wie eine Karte, die kurz
   auf der Kante steht. */

.partner{perspective:900px}
.partnerkachel,.aktionsknopf{
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,background .2s ease;
}
.partnerkachel:hover,.aktionsknopf:hover{
  transform:translateY(-2px) rotateY(-7deg);
  box-shadow:0 8px 18px rgba(11,32,51,.14);
}

@media (prefers-reduced-motion: no-preference){
  .partner-dreht .partnerkachel,
  .partner-dreht .aktionsknopf{
    /* 1,4 s je Kachel, Start erst nach einer halben Sekunde, damit CSS und
       Logos sicher da sind. 170 ms Versatz, dann liest das Auge die Reihe. */
    animation:partner-flip 1.4s cubic-bezier(.45,.05,.35,1) both;
  }
  .partner-dreht > :nth-child(1){animation-delay:.50s}
  .partner-dreht > :nth-child(2){animation-delay:.67s}
  .partner-dreht > :nth-child(3){animation-delay:.84s}
  .partner-dreht > :nth-child(4){animation-delay:1.01s}
  .partner-dreht > :nth-child(5){animation-delay:1.18s}
}
@keyframes partner-flip{
  from{transform:rotateY(0deg)}
  to  {transform:rotateY(360deg)}
}


/* ---------- Buehne als Folge ----------
   Fuenf Bilder liegen uebereinander. Jedes ist 6 Sekunden dran, die
   Schleife dauert 30 Sekunden. Eine Sekunde weiches Ueberblenden, dazu
   ein langsamer Kamerazug. Die Zeile unter der H1 und der Balken in der
   Leiste laufen im selben Takt, ueber dieselben Verzoegerungen.

   Ohne Bewegung (prefers-reduced-motion) oder in Browsern ohne Animation
   steht das erste Bild fest, die erste Zeile ist sichtbar, die Leiste ist
   eine normale Liste von Verweisen. */

.buehne{min-height:clamp(520px,66vh,720px);align-items:flex-end}
.buehne-innen{
  padding-top:64px;padding-bottom:40px;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;
}
.buehne-text{max-width:700px}

.buehne-folge .buehne-hg{opacity:0}
.buehne-folge .buehne-hg[data-nr="1"]{opacity:1}

/* Die wechselnde Zeile: fester Platz, damit nichts springt. */
.buehne-wechsel{
  position:relative;height:1.5em;margin:-6px 0 14px;
  font-size:clamp(19px,2.2vw,26px);font-weight:600;color:#9fc6ea;
  letter-spacing:-.01em;
}
.buehne-wechsel span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.buehne-wechsel span[data-nr="1"]{opacity:1}

/* --- Gewerkeleiste --- */
.buehne-leiste{
  display:flex;gap:6px;flex:0 0 auto;max-width:100%;
  background:rgba(6,24,40,.55);border:1px solid rgba(255,255,255,.14);
  border-radius:8px;padding:6px;backdrop-filter:blur(6px);
}
.buehne-leiste a{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:10px 14px 12px;min-width:118px;border-radius:5px;
  color:#dde7f0;text-decoration:none;font-size:13px;line-height:1.3;font-weight:600;
  overflow:hidden;transition:background .25s ease,color .25s ease;
}
.buehne-leiste a:hover{background:rgba(255,255,255,.12);color:#fff}
.leiste-nr{font-size:11px;letter-spacing:.12em;color:#8fc0ec;font-weight:700}
.buehne-leiste a i{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:#8fc0ec;transform:scaleX(0);transform-origin:left;
}

@media (prefers-reduced-motion: no-preference){
  /* Der alte Zoom (kenburns) ist fuer die Folge ersetzt. */
  .buehne-folge .buehne-hg{animation:buehne-bild 30s linear infinite both}
  .buehne-folge .buehne-hg[data-nr="1"]{opacity:0}
  .buehne-wechsel span{animation:buehne-zeile 30s ease-in-out infinite both}
  .buehne-wechsel span[data-nr="1"]{opacity:0}
  .buehne-leiste a i{animation:buehne-balken 30s linear infinite both}
.buehne-folge .buehne-hg[data-nr="1"],
.buehne-wechsel span[data-nr="1"],
.buehne-leiste a[data-nr="1"] i{animation-delay:0s}
.buehne-folge .buehne-hg[data-nr="2"],
.buehne-wechsel span[data-nr="2"],
.buehne-leiste a[data-nr="2"] i{animation-delay:6s}
.buehne-folge .buehne-hg[data-nr="3"],
.buehne-wechsel span[data-nr="3"],
.buehne-leiste a[data-nr="3"] i{animation-delay:12s}
.buehne-folge .buehne-hg[data-nr="4"],
.buehne-wechsel span[data-nr="4"],
.buehne-leiste a[data-nr="4"] i{animation-delay:18s}
.buehne-folge .buehne-hg[data-nr="5"],
.buehne-wechsel span[data-nr="5"],
.buehne-leiste a[data-nr="5"] i{animation-delay:24s}
}

/* Sichtbar von 0 bis 6 s, je eine Sekunde ein- und ausblenden, dazu der
   Kamerazug ueber die ganze Sichtzeit. */
@keyframes buehne-bild{
  0%     {opacity:0;transform:scale(1.10) translate(1.2%,.6%)}
  3.33%  {opacity:1}
  16.67% {opacity:1;transform:scale(1.02) translate(-.6%,-.3%)}
  20.00%  {opacity:0;transform:scale(1.02) translate(-.8%,-.4%)}
  100%   {opacity:0;transform:scale(1.02) translate(-.8%,-.4%)}
}
@keyframes buehne-zeile{
  0%     {opacity:0;transform:translateY(10px)}
  3.33%  {opacity:1;transform:none}
  16.67% {opacity:1;transform:none}
  20.00%  {opacity:0;transform:translateY(-8px)}
  100%   {opacity:0;transform:translateY(-8px)}
}
@keyframes buehne-balken{
  0%     {transform:scaleX(0)}
  16.67% {transform:scaleX(1)}
  20.00%  {transform:scaleX(1);opacity:0}
  100%   {transform:scaleX(0);opacity:0}
}

@media(max-width:900px){
  .buehne{min-height:clamp(480px,70vh,640px)}
  .buehne-innen{padding-top:44px;padding-bottom:22px;gap:18px}
  .buehne-leiste{
    flex:1 1 100%;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .buehne-leiste a{scroll-snap-align:start;min-width:132px}
  .buehne-wechsel{font-size:18px}
}


/* ---------- Ortsseiten ---------- */

/* Sechs kurze Leistungsabschnitte, eine H2 je Suchbegriff. */
.ortsleistungen h2{margin-top:34px;font-size:clamp(21px,2.3vw,26px)}
.ortsleistungen h2:first-child{margin-top:0}
.ortsleistungen p{max-width:72ch}
.ortsleistungen p a{font-weight:600;white-space:nowrap}

/* Die Ortsteile als Kacheln, damit sie ins Auge fallen. */
.ortsteile{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.ortsteile li{
  padding:9px 16px;border-radius:999px;font-size:15px;font-weight:600;
  background:var(--weiss);border:1px solid var(--linie);color:var(--text);
  transition:border-color .25s ease,transform .2s ease;
}
.ortsteile li:hover{border-color:#b9cde0;transform:translateY(-1px)}

/* ---------- Anfahrt als Routengrafik (Ortsseiten) ----------
   Dunkles Band. Links das SVG aus routenkarte(): Werkstatt, Zielort und
   Nachbarn an ihrer echten Position, Entfernungsringe, Route. Rechts die
   beiden Wege und zwei Knoepfe. Darunter die Nachbarorte als Verweise.
   Bewegung nur bei prefers-reduced-motion: no-preference, das Zeichnen der
   Route haengt am Scrollen ueber die benannte view-timeline des Rahmens. */
.route{background:#0b2033;color:#dde7f0}
.route h2{color:#fff}
.route-innen{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:44px;align-items:center;
}
.route-karte{
  position:relative;border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#153756,#0b2033 72%);
  border:1px solid rgba(255,255,255,.12);
  view-timeline:--route block;
}
.route-svg{display:block;width:100%;height:auto;font-family:inherit}
.route-ring{fill:none;stroke:rgba(255,255,255,.16);stroke-dasharray:3 5}
.route-ringtext{fill:rgba(255,255,255,.45);font-size:10px;letter-spacing:.08em;font-weight:500}
.route-spur{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:4 6}
.route-linie{fill:none;stroke:#8fc0ec;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.route-fahrt{fill:#fff;display:none}
.route-svg text{fill:#dde7f0;font-size:12px;font-weight:600}
.route-werk circle{fill:#fff}
.route-puls{fill:rgba(255,255,255,.35)}
.route-ziel circle{fill:#8fc0ec;stroke:#fff;stroke-width:2}
.route-zielname{font-size:15px;font-weight:700;fill:#fff}
.route-nachbar circle{fill:rgba(255,255,255,.55)}
.route-nachbarname{fill:rgba(221,231,240,.8);font-size:11.5px}
.route-schild rect{fill:#fff}
.route-schild text{fill:var(--blau);font-size:13px;font-weight:700}
.route-nord path{fill:rgba(255,255,255,.6)}
.route-nord text{fill:rgba(255,255,255,.6);font-size:11px;text-anchor:middle;letter-spacing:.1em}

.route-punkt{
  display:flex;gap:18px;margin-top:22px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
}
.route-nr{font-size:12px;font-weight:700;letter-spacing:.14em;color:#8fc0ec;padding-top:4px}
.route-punkt h3{margin:0 0 6px;font-size:18px;color:#fff}
.route-punkt p{margin:0;font-size:16px;line-height:1.65;color:#c9d6e2}
.route-punkt a{color:#fff}
.route-text .knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.route .knopf:not(.hell){--puls:255,255,255}

.route-nachbarn{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
}
.route-nachbarn h3{
  margin:0 14px 0 0;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#8fc0ec;
}
.route-nachbarn a{
  display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);
  color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  transition:background .25s ease,border-color .25s ease,transform .2s ease;
}
.route-nachbarn a b{font-weight:500;font-size:12.5px;color:#9fc6ea}
.route-nachbarn a:hover{background:rgba(255,255,255,.1);border-color:#8fc0ec;transform:translateY(-1px)}

@media (prefers-reduced-motion: no-preference){
  .route-puls{transform-box:fill-box;transform-origin:center;animation:route-puls 2.6s ease-out infinite}
  .route-fahrt{display:block;animation:route-fahrt 7s linear infinite}
  @supports (animation-timeline: view()){
    .route-linie{stroke-dashoffset:100;animation:route-zeichnen 1s linear both;animation-timeline:--route;animation-range:entry 15% entry 75%}
    .route-ziel,.route-schild{opacity:0;animation:route-auf .6s ease-out both;animation-timeline:--route;animation-range:entry 55% entry 85%}
    .route-nachbar{opacity:0;animation:route-auf .6s ease-out both;animation-timeline:--route;animation-range:entry 25% entry 60%}
  }
}
@keyframes route-puls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes route-fahrt{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes route-zeichnen{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes route-auf{from{opacity:0}to{opacity:1}}

@media(max-width:900px){
  .route-innen{grid-template-columns:1fr;gap:28px}
  .route-nachbarn{margin-top:30px}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ortsteile li{animation:auf .5s ease-out both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}


/* ---------- Kinoblock (Startseite) und Portraetfilm (Ueber uns) ----------
   Dunkles Band, Hintergrund ist das weichgezeichnete Vorschaubild des
   Hauptfilms. Links der Film mit leichter Perspektive und Lichtstreif,
   rechts der Text, darunter die uebrigen Filme als Filmstreifen mit
   Perforation. Bewegung nur bei prefers-reduced-motion: no-preference. */
.kino{position:relative;overflow:hidden;background:#06121f;color:#dde7f0;padding:0}
.kino-hg{
  position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);
  object-fit:cover;z-index:0;filter:blur(30px) saturate(1.3) brightness(.5);
}
.kino-schleier{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 28% 45%,rgba(0,85,169,.35),transparent 55%),
    linear-gradient(180deg,rgba(6,18,31,.62),rgba(6,18,31,.94));
}
.kino-innen{position:relative;z-index:2;padding-top:76px;padding-bottom:56px}
.kino-buehne{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:52px;align-items:center;
}
.kino-film{
  position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14);
  transform:perspective(1400px) rotateY(5deg);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.kino-film:hover{transform:perspective(1400px) rotateY(0deg) scale(1.015)}
.kino-film .video{border-radius:14px;background:#000}
.kino-film .video img{transition:transform 7s ease}
.kino-film:hover .video img{transform:scale(1.07)}
.kino-film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);
  transform:translateX(-120%);
}

/* Eigener Play-Knopf statt des kleinen Dreiecks von .video */
.video-mit-knopf::after{display:none}
.video-mit-knopf:hover img{opacity:1}
.kino-play{
  position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.45);--puls:255,255,255;
  transition:transform .3s ease;
}
.kino-play i{
  width:0;height:0;border-style:solid;border-width:17px 0 17px 30px;
  border-color:transparent transparent transparent var(--blau);margin-left:7px;
}
.video-mit-knopf:hover .kino-play{transform:scale(1.08)}
.kino-play.klein{width:58px;height:58px;margin:-29px 0 0 -29px}
.kino-play.klein i{border-width:10px 0 10px 18px;margin-left:4px}
.kino-dauer{
  position:absolute;right:14px;bottom:14px;padding:5px 10px;border-radius:4px;
  background:rgba(6,18,31,.88);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
}
.kino-folge{
  position:absolute;left:14px;top:14px;padding:6px 11px;border-radius:4px;
  background:#fff;color:var(--blau);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}

.kino-marke{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#8fc0ec;margin:0 0 14px;
}
.kino-text h2{
  color:#fff;font-size:clamp(28px,3.4vw,44px);line-height:1.12;
  margin:0 0 18px;letter-spacing:-.01em;
}
.kino-text p{font-size:17px;line-height:1.65;color:#c9d6e2;margin:0}
.kino-text .knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.kino .knopf:not(.hell){--puls:255,255,255}

/* Filmstreifen: schwarzes Band mit Perforation oben und unten */
.filmstreifen{
  position:relative;margin-top:60px;padding:26px 0 30px;background:#000;
  border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.filmstreifen::before,.filmstreifen::after{
  content:"";position:absolute;left:0;right:0;height:12px;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,255,255,.55) 12px 26px,transparent 26px 38px);
  -webkit-mask:linear-gradient(#000,#000);
}
.filmstreifen::before{top:5px}
.filmstreifen::after{bottom:5px}
.filmstreifen-innen{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;
  align-items:center;padding:16px 28px 18px;
}
.filmstreifen-titel{
  margin:0;color:#fff;font-weight:800;font-size:14px;line-height:1.35;
  text-transform:uppercase;letter-spacing:.14em;
}
.filmstreifen-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.filmstreifen .videokachel .video{border-radius:6px;transition:transform .35s ease,box-shadow .35s ease}
.filmstreifen .videokachel:hover .video{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.filmstreifen .video-titel{color:#fff}
.filmstreifen .video-kanal{color:#8fc0ec}
.kino .video-hinweis{color:#8fa5b8;margin-top:26px}

/* Portraetfilm auf Ueber uns */
.portraet-film{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;
  align-items:center;margin-top:28px;padding:24px;border-radius:8px;
  background:#0b2033;color:#dde7f0;
}
.portraet-film-bild .video{border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.portraet-film-text h3{color:#fff;font-size:clamp(22px,2.4vw,28px);margin:0 0 12px}
.portraet-film-text p{color:#c9d6e2;font-size:16px;line-height:1.65;margin:0}

@media (prefers-reduced-motion: no-preference){
  .kino-play{animation:knopf-puls 3.4s ease-in-out infinite}
  .kino-film::after{animation:kino-licht 7s ease-in-out infinite}
  @supports (animation-timeline: view()){
    .kino-film-wrap{animation:kino-links .9s cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .kino-text{animation:kino-rechts .9s cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .filmstreifen{animation:auf .8s ease-out both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes kino-licht{
  0%,55%{transform:translateX(-120%)}
  75%,100%{transform:translateX(120%)}
}
@keyframes kino-links{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@keyframes kino-rechts{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .kino-innen{padding-top:52px;padding-bottom:40px}
  .kino-buehne{grid-template-columns:1fr;gap:30px}
  .kino-film{transform:none}
  .kino-film:hover{transform:none}
  .kino-play{width:74px;height:74px;margin:-37px 0 0 -37px}
  .filmstreifen{margin-top:40px}
  .filmstreifen-innen{grid-template-columns:1fr;gap:16px;padding:14px 18px}
  .filmstreifen-band{grid-template-columns:1fr}
  .portraet-film{grid-template-columns:1fr;padding:18px}
}

/* ---------- Ortsraster im Fuss ----------
   Vierzehn Orte als gleich breite Kacheln, sortiert nach Fahrzeit. Sieben
   Spalten am Desktop, vier am Tablet, zwei am Handy. */
.ortsraster{
  display:grid;gap:10px;margin:16px 0 0;padding:0;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.ortsraster li{margin:0}
.ortsraster a{
  display:flex;flex-direction:column;gap:3px;height:100%;
  padding:11px 12px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#fff;font-weight:600;font-size:14px;line-height:1.3;text-decoration:none;
  transition:border-color .25s ease,background .25s ease,transform .2s ease;
}
.ortsraster a span{font-size:12px;font-weight:500;color:#8fa5b8}
.ortsraster a:hover{
  border-color:#8fc0ec;background:rgba(255,255,255,.09);
  transform:translateY(-2px);text-decoration:none;color:#fff;
}
.ortsraster a:hover span{color:#c9d6e2}
@media(max-width:1000px){.ortsraster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.ortsraster{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Ortstafel-Abzeichen in der Kachel: gelber Grund, schwarzer Doppelrand,
   wie das Verkehrszeichen im Kleinformat. Rein dekorativ (aria-hidden),
   der Linktext darunter bleibt "Metallbau <Ort>". */
.ortsraster a{gap:4px;padding-top:10px}
.ortsraster a .ortstafel{
  display:inline-block;align-self:flex-start;max-width:100%;
  margin-bottom:6px;padding:7px 11px 6px;
  background:#f2c200;color:#111;border:2px solid #111;border-radius:5px;
  box-shadow:inset 0 0 0 2px #f2c200,inset 0 0 0 3px #111;
  font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.02em;
  transition:transform .2s ease;
}
.ortsraster a:hover .ortstafel{transform:rotate(-2deg) scale(1.04)}


/* ---------- Torfinder (/novoferm/) ----------
   Links die Wahl (Ausfuehrung als vier Karten, dann die Farben der
   gewaehlten Ausfuehrung), rechts das ganze Tor. Verdeckte Radios,
   Bildwechsel ueber :has(). Die Regeln je Ausfuehrung und je Tor stehen
   unten, erzeugt aus inc/bilder.php. Ohne :has() bleibt das erste Tor
   stehen und die Wahl ist eine gewoehnliche Radioliste. */
.torfinder{position:relative;margin:22px 0 40px}
.tf-schalter{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tf-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:32px;align-items:start}
.tf-schritt{
  display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-hell);
}
.tf-schritt b{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--blau);color:#fff;font-size:13px;
}
.tf-schritt + .tf-gruppen{margin-bottom:22px}
.tf-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tf-gruppe{
  display:flex;flex-direction:column;gap:7px;padding:8px;cursor:pointer;
  background:var(--weiss);border:2px solid var(--linie);border-radius:8px;
  font-size:14px;font-weight:600;color:var(--text);
  transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease;
}
.tf-gruppe:hover{border-color:#b9cde0;transform:translateY(-2px)}
.tf-gruppe img{
  width:100%;height:auto;aspect-ratio:5/4;object-fit:contain;
  background:#eef1f4;border-radius:5px;padding:6px;
}
.tf-farben{display:flex;flex-wrap:wrap;gap:8px}
.tf-farbe{
  display:none;align-items:center;gap:8px;padding:5px 11px 5px 6px;cursor:pointer;
  background:var(--weiss);border:2px solid var(--linie);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--text);line-height:1.2;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.tf-farbe:hover{transform:translateY(-1px);border-color:#b9cde0}
.tf-farbe i{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  background:var(--f);border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.tf-hinweis{margin:18px 0 0;font-size:14px;color:var(--text-hell)}
.tf-buehne{
  position:relative;aspect-ratio:5/4;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#f4f6f8,#e4e9ee);border:1px solid var(--linie);
  box-shadow:0 20px 50px rgba(11,32,51,.12);
}
.tf-tor{
  position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  opacity:0;transition:opacity .4s ease;
}
.tf-tor img{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:contain;padding:28px 28px 0}
.tf-tor figcaption{
  flex:0 0 auto;padding:12px 18px;text-align:center;
  font-size:15px;font-weight:700;color:var(--text);background:rgba(255,255,255,.75);
}
@media(max-width:900px){
  .tf-innen{grid-template-columns:1fr;gap:22px}
  .tf-buehne{order:-1}
  .tf-tor img{padding:16px 16px 0}
}
@media(max-width:560px){
  .tf-gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-gruppe{font-size:13px}
}

/* --- erzeugte Regeln --- */
.torfinder:has(#tf-g-grosssicke-glatt:checked) .tf-farbe[data-g="grosssicke-glatt"]{display:inline-flex}
.torfinder:has(#tf-g-grosssicke-glatt:checked) .tf-gruppe[for="tf-g-grosssicke-glatt"]{border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.18)}
.torfinder:has(#tf-g-grosssicke-glatt:focus-visible) .tf-gruppe[for="tf-g-grosssicke-glatt"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-glatt:checked):not(:has(.tf-t[data-g="grosssicke-glatt"]:checked)) .tf-tor[data-t="0"]{opacity:1}
.torfinder:has(#tf-g-grosssicke-glatt:checked):not(:has(.tf-t[data-g="grosssicke-glatt"]:checked)) .tf-farbe[for="tf-t-0"]{border-color:var(--blau)}
.torfinder:has(#tf-g-grosssicke-glatt:checked):has(#tf-t-0:checked) .tf-tor[data-t="0"]{opacity:1}
.torfinder:has(#tf-t-0:checked) .tf-farbe[for="tf-t-0"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-0:focus-visible) .tf-farbe[for="tf-t-0"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-glatt:checked):has(#tf-t-1:checked) .tf-tor[data-t="1"]{opacity:1}
.torfinder:has(#tf-t-1:checked) .tf-farbe[for="tf-t-1"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-1:focus-visible) .tf-farbe[for="tf-t-1"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-glatt:checked):has(#tf-t-2:checked) .tf-tor[data-t="2"]{opacity:1}
.torfinder:has(#tf-t-2:checked) .tf-farbe[for="tf-t-2"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-2:focus-visible) .tf-farbe[for="tf-t-2"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-glatt:checked):has(#tf-t-3:checked) .tf-tor[data-t="3"]{opacity:1}
.torfinder:has(#tf-t-3:checked) .tf-farbe[for="tf-t-3"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-3:focus-visible) .tf-farbe[for="tf-t-3"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-glatt:checked):has(#tf-t-4:checked) .tf-tor[data-t="4"]{opacity:1}
.torfinder:has(#tf-t-4:checked) .tf-farbe[for="tf-t-4"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-4:focus-visible) .tf-farbe[for="tf-t-4"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked) .tf-farbe[data-g="grosssicke-woodgrain"]{display:inline-flex}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked) .tf-gruppe[for="tf-g-grosssicke-woodgrain"]{border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.18)}
.torfinder:has(#tf-g-grosssicke-woodgrain:focus-visible) .tf-gruppe[for="tf-g-grosssicke-woodgrain"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked):not(:has(.tf-t[data-g="grosssicke-woodgrain"]:checked)) .tf-tor[data-t="5"]{opacity:1}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked):not(:has(.tf-t[data-g="grosssicke-woodgrain"]:checked)) .tf-farbe[for="tf-t-5"]{border-color:var(--blau)}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked):has(#tf-t-5:checked) .tf-tor[data-t="5"]{opacity:1}
.torfinder:has(#tf-t-5:checked) .tf-farbe[for="tf-t-5"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-5:focus-visible) .tf-farbe[for="tf-t-5"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked):has(#tf-t-6:checked) .tf-tor[data-t="6"]{opacity:1}
.torfinder:has(#tf-t-6:checked) .tf-farbe[for="tf-t-6"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-6:focus-visible) .tf-farbe[for="tf-t-6"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked):has(#tf-t-7:checked) .tf-tor[data-t="7"]{opacity:1}
.torfinder:has(#tf-t-7:checked) .tf-farbe[for="tf-t-7"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-7:focus-visible) .tf-farbe[for="tf-t-7"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosssicke-woodgrain:checked):has(#tf-t-8:checked) .tf-tor[data-t="8"]{opacity:1}
.torfinder:has(#tf-t-8:checked) .tf-farbe[for="tf-t-8"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-8:focus-visible) .tf-farbe[for="tf-t-8"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-glatt:checked) .tf-farbe[data-g="grosslamelle-glatt"]{display:inline-flex}
.torfinder:has(#tf-g-grosslamelle-glatt:checked) .tf-gruppe[for="tf-g-grosslamelle-glatt"]{border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.18)}
.torfinder:has(#tf-g-grosslamelle-glatt:focus-visible) .tf-gruppe[for="tf-g-grosslamelle-glatt"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):not(:has(.tf-t[data-g="grosslamelle-glatt"]:checked)) .tf-tor[data-t="9"]{opacity:1}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):not(:has(.tf-t[data-g="grosslamelle-glatt"]:checked)) .tf-farbe[for="tf-t-9"]{border-color:var(--blau)}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):has(#tf-t-9:checked) .tf-tor[data-t="9"]{opacity:1}
.torfinder:has(#tf-t-9:checked) .tf-farbe[for="tf-t-9"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-9:focus-visible) .tf-farbe[for="tf-t-9"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):has(#tf-t-10:checked) .tf-tor[data-t="10"]{opacity:1}
.torfinder:has(#tf-t-10:checked) .tf-farbe[for="tf-t-10"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-10:focus-visible) .tf-farbe[for="tf-t-10"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):has(#tf-t-11:checked) .tf-tor[data-t="11"]{opacity:1}
.torfinder:has(#tf-t-11:checked) .tf-farbe[for="tf-t-11"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-11:focus-visible) .tf-farbe[for="tf-t-11"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):has(#tf-t-12:checked) .tf-tor[data-t="12"]{opacity:1}
.torfinder:has(#tf-t-12:checked) .tf-farbe[for="tf-t-12"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-12:focus-visible) .tf-farbe[for="tf-t-12"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-glatt:checked):has(#tf-t-13:checked) .tf-tor[data-t="13"]{opacity:1}
.torfinder:has(#tf-t-13:checked) .tf-farbe[for="tf-t-13"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-13:focus-visible) .tf-farbe[for="tf-t-13"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-microline:checked) .tf-farbe[data-g="grosslamelle-microline"]{display:inline-flex}
.torfinder:has(#tf-g-grosslamelle-microline:checked) .tf-gruppe[for="tf-g-grosslamelle-microline"]{border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.18)}
.torfinder:has(#tf-g-grosslamelle-microline:focus-visible) .tf-gruppe[for="tf-g-grosslamelle-microline"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-microline:checked):not(:has(.tf-t[data-g="grosslamelle-microline"]:checked)) .tf-tor[data-t="14"]{opacity:1}
.torfinder:has(#tf-g-grosslamelle-microline:checked):not(:has(.tf-t[data-g="grosslamelle-microline"]:checked)) .tf-farbe[for="tf-t-14"]{border-color:var(--blau)}
.torfinder:has(#tf-g-grosslamelle-microline:checked):has(#tf-t-14:checked) .tf-tor[data-t="14"]{opacity:1}
.torfinder:has(#tf-t-14:checked) .tf-farbe[for="tf-t-14"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-14:focus-visible) .tf-farbe[for="tf-t-14"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-microline:checked):has(#tf-t-15:checked) .tf-tor[data-t="15"]{opacity:1}
.torfinder:has(#tf-t-15:checked) .tf-farbe[for="tf-t-15"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-15:focus-visible) .tf-farbe[for="tf-t-15"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-microline:checked):has(#tf-t-16:checked) .tf-tor[data-t="16"]{opacity:1}
.torfinder:has(#tf-t-16:checked) .tf-farbe[for="tf-t-16"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-16:focus-visible) .tf-farbe[for="tf-t-16"]{outline:3px solid var(--blau);outline-offset:2px}
.torfinder:has(#tf-g-grosslamelle-microline:checked):has(#tf-t-17:checked) .tf-tor[data-t="17"]{opacity:1}
.torfinder:has(#tf-t-17:checked) .tf-farbe[for="tf-t-17"]{border-color:var(--blau);background:#eef4fa}
.torfinder:has(#tf-t-17:focus-visible) .tf-farbe[for="tf-t-17"]{outline:3px solid var(--blau);outline-offset:2px}


/* ==========================================================================
   Ergaenzungen fuer werbung-kleve.de, 13.09.2026
   Alles darueber stammt unveraendert aus pironmetallbau.de (Stand 12.09.2026).
   Hier steht nur, was die LED-Seite zusaetzlich braucht: LIVE-Knopf,
   Zahlenband unter der Buehne, Praesenz-Punkte, Live-Teaser, Merkmalraster,
   Standortblock, Logoband, Mappe, Live-Wand, Aktionsblock.
   ========================================================================== */

:root{
  --led-dunkel:#26333F;   /* Hero-Farbe der Praesentationsmappe */
  --live-rot:#e0312e;
}

/* ---------- Logo im Kopf ---------- */
.marke img{width:190px}
@media(max-width:760px){.marke img{width:150px}}

/* ---------- LIVE-Knopf im Kopf ---------- */
.live-knopf{gap:9px;background:var(--led-dunkel)}
.live-knopf:hover{background:#111a22}
.live-knopf i,.live-punkt{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--live-rot);box-shadow:0 0 0 0 rgba(224,49,46,.6);
  vertical-align:middle;
}
.live-teaser .marke .live-punkt{margin-right:8px;position:relative;top:-1px}
@keyframes live-puls{
  0%  {box-shadow:0 0 0 0 rgba(224,49,46,.65)}
  70% {box-shadow:0 0 0 9px rgba(224,49,46,0)}
  100%{box-shadow:0 0 0 0 rgba(224,49,46,0)}
}
@media (prefers-reduced-motion: no-preference){
  .live-knopf i,.live-punkt{animation:live-puls 1.8s ease-out infinite}
}

/* Heller Knopf mit Live-Punkt auf der Buehne */
.knopf.live-hell i{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--live-rot);margin-right:9px;vertical-align:middle;
  position:relative;top:-1px;
}
@media (prefers-reduced-motion: no-preference){
  .knopf.live-hell i{animation:live-puls 1.8s ease-out infinite}
}

/* ---------- Zahlenband direkt unter der Buehne ---------- */
.zahlen-abschnitt{padding:0;background:var(--weiss)}
.zahlen-abschnitt .zahlen{margin-top:-34px;position:relative;z-index:3;box-shadow:0 18px 40px rgba(11,32,51,.14)}
@media(max-width:760px){.zahlen-abschnitt .zahlen{margin-top:0;box-shadow:none}}

/* ---------- Praesenz-Punkte ---------- */
.praesenz{
  list-style:none;display:grid;gap:18px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.praesenz li{
  padding:18px 20px 18px 48px;position:relative;
  background:var(--flaeche);border-radius:6px;font-size:16px;color:var(--text-hell);line-height:1.5;
}
.praesenz li strong{display:block;color:var(--text);font-size:17px;margin-bottom:4px}
.praesenz li::before{
  content:"";position:absolute;left:18px;top:22px;width:16px;height:16px;border-radius:50%;
  background:var(--blau);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/><path d='M4 8.5l2.6 2.6L12 5.7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/><path d='M4 8.5l2.6 2.6L12 5.7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* ---------- Live-Teaser auf der Startseite ---------- */
.live-teaser{
  position:relative;overflow:hidden;background:var(--led-dunkel);color:#fff;
  padding:0;min-height:420px;display:flex;align-items:center;
}
.live-teaser-hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.live-teaser-schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(38,51,63,.92) 0%,rgba(38,51,63,.72) 45%,rgba(38,51,63,.25) 100%);
}
.live-teaser-innen{position:relative;z-index:2;padding-top:64px;padding-bottom:64px;max-width:var(--bahn)}
.live-teaser .marke{color:#9fc6ea;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.live-teaser h2{color:#fff;margin-top:0;max-width:18ch}
.live-teaser p{max-width:56ch;color:#dde7f0;font-size:17px}
.live-teaser .knopf{background:#fff;color:var(--led-dunkel)}
.live-teaser .knopf:hover{background:#e6eef5;color:var(--led-dunkel)}

/* ---------- Merkmalraster (Gestaltung im Hause) ---------- */
.merkmalraster{
  display:grid;gap:18px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.merkmalpunkt{
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;padding:22px 24px;
  border-top:4px solid var(--blau);
}
.merkmalpunkt h3{margin:0 0 8px;font-size:18px}
.merkmalpunkt p{font-size:15.5px;color:var(--text-hell);margin:0}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- Standortblock: Text neben Foto ---------- */
.standort-block{display:grid;gap:40px;grid-template-columns:1.1fr 1fr;align-items:center}
.standort-block h2{margin-top:6px}
.standort-bild{margin:0}
.standort-bild img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 18px 40px rgba(11,32,51,.18)}
.strassen{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.strassen li{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:999px;
  padding:7px 16px 7px 30px;font-weight:600;font-size:15px;position:relative;
}
.strassen li::before{
  content:"";position:absolute;left:13px;top:50%;width:9px;height:9px;margin-top:-5px;
  border-radius:50%;background:var(--blau);
}
@media(max-width:860px){.standort-block{grid-template-columns:1fr}}

/* ---------- Logoband der Referenzen ---------- */
.logoband{
  list-style:none;display:grid;gap:14px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
}
.logoband li{
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  aspect-ratio:1/1;display:grid;place-items:center;padding:14px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.logoband img{
  width:100%;height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.78;transition:filter .3s ease,opacity .3s ease;
}
.logoband li:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,32,51,.12)}
.logoband li:hover img{filter:none;opacity:1}

/* ---------- Logolauf: Markenband der Startseite (v0.5.1) ---------- */
/* Zwei Reihen ohne Kaesten. Still und umbrechend, solange klick.js die
   Reihen nicht verdoppelt und "laeuft" gesetzt hat; dann wandert die obere
   Reihe nach links, die untere nach rechts, ein Umlauf gut eine Minute.
   Beim Ueberfahren haelt das Band an und das Logo wird farbig. */
.logolauf{margin:30px 0 8px;overflow:hidden}
.logolauf-reihe{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:22px 44px;
}
.logolauf-reihe+.logolauf-reihe{margin-top:26px}
.logolauf-reihe li{flex:0 0 auto;height:64px;display:flex;align-items:center}
.logolauf-reihe img{
  height:100%;width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s ease,opacity .3s ease;
}
.logolauf-reihe li:hover img{filter:none;opacity:1}

.logolauf.laeuft{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* Die Reihe enthaelt Original und Kopie; padding-right ist die Luecke vor
   der Kopie, damit -50% genau eine Periode ist. */
.logolauf.laeuft .logolauf-reihe{
  flex-wrap:nowrap;justify-content:flex-start;width:max-content;
  gap:0 56px;padding-right:56px;
  animation:logolauf 70s linear infinite;
}
.logolauf.laeuft .logolauf-reihe.zurueck{animation-direction:reverse;animation-duration:78s}
.logolauf.laeuft:hover .logolauf-reihe{animation-play-state:paused}
@keyframes logolauf{to{transform:translateX(-50%)}}
@media(max-width:760px){
  .logolauf-reihe{gap:16px 26px}
  .logolauf-reihe li{height:44px}
  .logolauf-reihe img{max-width:120px}
}

/* ---------- Praesentationsmappe ---------- */
.mappe{margin:26px -24px 0;padding:0 24px}
.mappe-band{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;scrollbar-width:thin;
}
.mappe-band figure{
  flex:0 0 min(360px,78vw);scroll-snap-align:start;margin:0;
}
.mappe-band img{
  display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 12px 30px rgba(11,32,51,.16);
}
.mappe-band figcaption{font-size:13px;color:var(--text-hell);padding-top:8px;text-align:center}

/* ---------- Live-Wand: zwei Fotos mit Player in der Bildflaeche ---------- */
.live-abschnitt{background:var(--led-dunkel);color:#fff}
.live-abschnitt h1,.live-abschnitt h2{color:#fff}
.live-abschnitt .einstieg{color:#c9d3dd}
.live-wand{display:grid;gap:32px;grid-template-columns:1fr 1fr;margin-top:26px}
@media(max-width:900px){.live-wand{grid-template-columns:1fr}}
.live-wand .wall{position:relative;margin:0}
.live-wand .wall > img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.live-wand figcaption{
  color:#fff;opacity:.85;font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-top:10px;text-align:center;
}

/* Die LED-Bildflaeche im Foto, am Foto ausgemessen (Juli 2026):
   Ecken (268,117) (750,101) (748,388) (270,397) bei 1040x520, um 1,49 Grad
   gekippt. Mit Ueberstand von rund 1 % breit und 1,5 % hoch je Seite, damit
   der alte LED-Rand aus dem Foto nicht hervorschaut. */
.wall-screen{
  position:absolute;left:25.0%;top:19.5%;width:47.9%;height:57.5%;
  transform:rotate(-1.49deg);overflow:hidden;background:#000;
  --wk-zoom:1.35;--wk-shift:0%;
}
.wall-screen iframe{
  position:absolute;border:0;background:#000;
  width:calc(100% * var(--wk-zoom));height:calc(100% * var(--wk-zoom));
  left:calc((100% - 100% * var(--wk-zoom)) / 2);
  top:calc((100% - 100% * var(--wk-zoom)) / 2 + var(--wk-shift));
}
.live-laden{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#fff;text-decoration:none;font-weight:700;font-size:clamp(11px,1.6vw,16px);letter-spacing:.06em;text-transform:uppercase;
  background:radial-gradient(ellipse at center,rgba(0,85,169,.55) 0%,rgba(0,0,0,.75) 100%);
}
.live-laden:hover{background:radial-gradient(ellipse at center,rgba(0,85,169,.75) 0%,rgba(0,0,0,.8) 100%);color:#fff}
.live-laden .live-punkt{width:14px;height:14px}
.live-hinweis{font-size:14px;color:#9aa7b4;max-width:760px;margin:22px auto 0;text-align:center}

/* ---------- Aktionsblock am Seitenende ---------- */
.aktion-block{background:var(--led-dunkel);color:#fff}
.aktion-block h2{color:#fff;margin-top:6px}
.aktion-block .marke{color:#9fc6ea;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.aktion-block .einstieg{color:#dde7f0}
.aktion-block .knopf.rand{color:#fff;border-color:rgba(255,255,255,.7)}
.aktion-block .knopf.rand:hover{background:#fff;color:var(--led-dunkel)}
.kontaktzeile{margin-top:22px;font-size:14.5px;color:#9aa7b4}
.kontaktzeile a{color:#dde7f0}

/* ---------- Fuss ---------- */
.fuss-logo{width:170px;height:auto;display:block;margin-bottom:14px;opacity:.95}
.fuss-siegel{display:flex;align-items:center;gap:20px;padding-bottom:26px}
.fuss-siegel-text{font-size:14px;color:#8f9ba7;max-width:52ch;margin:0}

/* ---------- Anfrage-Punkt im Menue ---------- */
.navi-anfrage a{background:rgba(255,255,255,.14)}


/* ==========================================================================
   Stufe 2, 15.09.2026: Live-Seite, Standort und Reichweite, Anfrage
   Alles darueber bleibt unveraendert. Jede Bewegung laeuft nur ohne
   Bewegungsreduzierung im Betriebssystem, und scrollgesteuerte Ablaeufe nur
   in Browsern, die sie koennen; alle anderen zeigen die Inhalte sofort.
   ========================================================================== */

/* ---------- Sendestatus auf der Live-Seite ---------- */
.sendestatus{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:8px 16px 8px 12px;border-radius:999px;margin:0 0 18px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#dde7f0;font-size:14px;font-weight:600;letter-spacing:.02em;
}
.sendestatus i{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--live-rot);box-shadow:0 0 0 0 rgba(224,49,46,.6);
}
.sendestatus.aus i{background:#8a97a3;box-shadow:none}
.sendestatus time{color:#9fc6ea;font-variant-numeric:tabular-nums}
.sendestatus-trenner{color:#6f7e8c}

/* 24/7-Hinweis im Hero der Startseite (v0.5.9, Wunsch Sascha Piron 17.09.2026):
   roter Chip, Versalien, pulsierender Punkt wie beim Sendestatus. */
.usp-24-7{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:0 0 16px;padding:10px 18px;border-radius:14px;max-width:100%;
  background:var(--live-rot);color:#fff;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;
  box-shadow:0 8px 22px rgba(224,49,46,.35);
}
.usp-24-7 strong{font-weight:800;font-size:15px;flex:1 1 auto}
.usp-24-7 span:last-child{flex:1 0 100%}
.usp-24-7 i{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);
}
.usp-trenner{display:none}
@media (prefers-reduced-motion: no-preference){
  .usp-24-7 i{animation:live-puls 1.8s ease-out infinite}
}
@media(max-width:560px){.usp-24-7{font-size:12px;padding:8px 13px}}
@media (prefers-reduced-motion: no-preference){
  .sendestatus.an i{animation:live-puls 1.8s ease-out infinite}
}
.live-abschnitt .knopf.live-beide{background:#fff;color:var(--led-dunkel);display:inline-flex;align-items:center;gap:10px}
.live-abschnitt .knopf.live-beide:hover{background:#e6eef5;color:var(--led-dunkel)}
.live-abschnitt .knopf.live-beide .live-punkt{width:10px;height:10px}

/* LED-Saum: Die Bildflaeche im Foto glimmt leicht, bis der Player laeuft.
   Danach leuchtet sie ruhig hell, so wie die Wall selbst bei Nacht. */
.wall-screen{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 26px rgba(0,85,169,.32)}
.wall-screen.wall-aktiv{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 42px rgba(143,192,236,.5)}
@keyframes led-saum{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 22px rgba(0,85,169,.28)}
  50%    {box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 46px rgba(0,85,169,.58)}
}
@media (prefers-reduced-motion: no-preference){
  .wall-screen:not(.wall-aktiv){animation:led-saum 3.4s ease-in-out infinite}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .live-wand .wall{
      animation:auf .8s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    .live-wand .wall:nth-child(2){animation-range:entry 6% entry 48%}
  }
}

/* ---------- West, Ost, beide: drei Karten ---------- */
.richtungen{
  display:grid;gap:18px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.richtung{
  position:relative;overflow:hidden;
  background:var(--led-dunkel);color:#dde7f0;border-radius:8px;
  padding:26px 24px 22px;min-height:190px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.richtung:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,32,51,.22)}
.richtung h3{color:#fff;margin:0 0 8px;font-size:19px;position:relative}
.richtung p{font-size:15.5px;margin:0;position:relative;max-width:34ch}
.richtung-kennung{
  position:absolute;right:14px;top:6px;
  font-size:72px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:rgba(143,192,236,.16);user-select:none;
}
.richtung-beide{background:var(--blau)}
.richtung-beide .richtung-kennung{color:rgba(255,255,255,.16);font-size:56px;top:12px}
/* Scrollgesteuerte Einblendung entfernt (v0.2.4, 15.09.2026): Im echten
   Browser wurde die Karte "Beide Seiten" waehrend ihrer Einblendung halb
   durchsichtig ueber dem Buehnentext gezeichnet. Chromium malt Elemente
   mit animation-timeline: view() auf Seiten mit einer 3D-Szene
   (Wall-Modell, preserve-3d) an falscher Stelle. Auf den anderen Seiten
   ohne 3D-Szene bleiben die Einblendungen. */

/* ---------- Die Fahrt zur Wall: Blickpunkte als Strecke ---------- */
.strecke{
  list-style:none;margin:30px -24px 0;padding:0 24px 16px;
  display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scroll-padding-left:24px;
}
.strecke li{
  position:relative;flex:0 0 min(300px,76vw);scroll-snap-align:start;
  padding-top:46px;
}
/* Die Strasse: eine gestrichelte Linie von Station zu Station, die sich
   langsam in Fahrtrichtung bewegt. */
.strecke li::before{
  content:"";position:absolute;left:-26px;right:0;top:16px;height:4px;
  background:repeating-linear-gradient(90deg,var(--blau) 0 22px,transparent 22px 38px);
  background-size:38px 4px;opacity:.45;
}
.strecke li:first-child::before{left:16px}
.strecke li:last-child::before{right:auto;width:42px}
@keyframes fahrt{to{background-position:38px 0}}
@media (prefers-reduced-motion: no-preference){
  .strecke li::before{animation:fahrt 1.6s linear infinite}
}
.station-nr{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--blau);color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 0 0 5px var(--flaeche);z-index:1;
}
.strecke figure{margin:0}
.strecke .bildrahmen{
  display:block;overflow:hidden;border-radius:8px;aspect-ratio:1/1;
  box-shadow:0 12px 28px rgba(11,32,51,.14);
}
.strecke img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.strecke li:hover img{transform:scale(1.05)}
.strecke figcaption{font-size:14.5px;color:var(--text);font-weight:600;padding-top:10px;line-height:1.45}
.strecke-hinweis{font-size:13.5px;color:var(--text-hell);margin:6px 0 0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .strecke li{
      animation:vonrechts .7s linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% entry 55%;
    }
  }
}
@media(max-width:760px){
  .strecke{gap:20px}
  .strecke li{flex-basis:min(260px,78vw)}
}

/* Karte auf der Standortseite: das Luftbild ist sehr breit (1600 x 503). */
.karte.karte-breit{aspect-ratio:1600/503;max-height:none}
.karte.karte-breit.karte-aktiv{aspect-ratio:auto;height:480px}
@media(max-width:700px){
  .karte.karte-breit{aspect-ratio:3/2}
  .karte.karte-breit.karte-aktiv{height:380px}
}

/* ---------- Einzugsgebiet: sechs Orte mit Ankern ---------- */
.orte{
  display:grid;gap:18px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.ort{
  background:var(--weiss);border:1px solid var(--linie);border-left:4px solid var(--blau);
  border-radius:6px;padding:22px 24px;scroll-margin-top:90px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .3s ease;
}
.ort:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,32,51,.10)}
.ort h3{margin:0 0 8px;font-size:18px}
.ort p{font-size:15.5px;color:var(--text-hell);margin:0}
/* Wer ueber eine alte Ortsadresse kommt, landet per Anker hier: der
   Abschnitt hebt sich kurz ab. */
.ort:target{border-left-color:var(--live-rot);box-shadow:0 0 0 3px rgba(0,85,169,.16)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ort{animation:auf .8s linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .ort:nth-child(even){animation-range:entry 6% entry 46%}
  }
}

/* ---------- Anfrage: Anlass-Kacheln mit Spot-Vorschau ---------- */
.anlasskacheln .bereichbild{aspect-ratio:16/9;background:var(--led-dunkel)}
.anlasskacheln .bereichbild img{object-fit:cover}

/* ---------- Anfrage: Seite der Wall als kleine Wall ---------- */
.seitenwahl{
  display:grid;gap:14px;margin:0 0 22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.seitenkachel{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  border:2px solid var(--linie);border-radius:8px;padding:18px 12px 14px;
  background:var(--weiss);cursor:pointer;
  transition:border-color .2s ease,box-shadow .25s ease,transform .2s ease;
}
.seitenkachel:hover{border-color:#b9cde0;transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,32,51,.10)}
.seitenkachel input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.miniwall{display:flex;gap:6px;margin-bottom:12px}
.miniwall i{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:34px;border-radius:3px;
  background:var(--led-dunkel);border:2px solid #3b4a57;
  color:#6f7e8c;font-style:normal;font-weight:700;font-size:13px;
  transition:background .3s ease,box-shadow .3s ease,color .3s ease,border-color .3s ease;
}
.miniwall i::after{content:attr(data-s)}
.seitenname{display:block;font-weight:700;font-size:15.5px}
.seitentext{display:block;font-size:13.5px;color:var(--text-hell);line-height:1.4;margin-top:2px}
.seitenkachel:has(input:checked){border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.18)}
.seitenkachel:has(input:checked) .miniwall i.an{
  background:var(--blau);border-color:#3f86d6;color:#fff;
  box-shadow:0 0 16px rgba(0,85,169,.65);
}
.seitenkachel:has(input:focus-visible){outline:3px solid rgba(0,85,169,.45);outline-offset:2px}
@media(max-width:560px){
  .seitenwahl{grid-template-columns:1fr}
  .seitenkachel{flex-direction:row;text-align:left;gap:14px;padding:12px 14px}
  .miniwall{margin:0}
  .miniwall i{width:44px;height:26px;font-size:12px}
}

/* ---------- Anfrage: Auswahl als Pillen ---------- */
.pillen{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.pille{position:relative;cursor:pointer}
.pille input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pille span{
  display:inline-block;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:600;
  background:var(--flaeche);border:1px solid var(--linie);color:var(--text);
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.pille:hover span{border-color:#b9cde0}
.pille:has(input:checked) span{background:var(--blau);border-color:var(--blau);color:#fff}
.pille:has(input:focus-visible) span{outline:3px solid rgba(0,85,169,.45);outline-offset:2px}

.feld-halb{max-width:calc(50% - 10px)}
.feld .hilfe{display:block;font-size:13.5px;color:var(--text-hell);margin-top:6px;line-height:1.45}
@media(max-width:700px){.feld-halb{max-width:none}}

/* ---------- Regie-Ansicht: zwei LED-Kabinette (15.09.2026, v0.2.1) ----------
   Ersetzt die Foto-Attrappe. Der Player bekommt einen sauberen 16:9-Rahmen
   mit schwarzem Grund, nichts wird beschnitten oder gedreht. Die alten
   Regeln fuer .live-wand und .wall-screen bleiben oben stehen; hier werden
   sie fuer .regie ueberschrieben. */
.regie{
  display:grid;gap:28px;grid-template-columns:1fr 1fr;margin-top:30px;
}
@media(max-width:900px){.regie{grid-template-columns:1fr}}
.schirm{margin:0;display:flex;flex-direction:column}

/* Kopfleiste ueber dem Schirm */
.schirm-kopf{
  display:flex;align-items:center;gap:14px;
  padding:0 4px 10px;color:#dde7f0;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.schirm-seite{color:#fff;font-size:15px;letter-spacing:.14em}
.schirm-live{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 10px 3px 8px;border-radius:999px;font-size:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#9aa7b4;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.schirm-live i{width:8px;height:8px;border-radius:50%;background:#6f7e8c;transition:background .3s ease}
.schirm-voll{
  margin-left:auto;color:#9fc6ea;text-decoration:none;font-size:12px;letter-spacing:.06em;
  text-transform:none;font-weight:600;
}
/* "Neu starten", von klick.js eingesetzt, sobald der Player laeuft (v0.2.3) */
.schirm-neu{
  margin-left:auto;cursor:pointer;font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:none;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 12px;
  transition:background .2s ease,border-color .2s ease;
}
.schirm-neu:hover{background:var(--blau);border-color:var(--blau)}
.schirm-neu + .schirm-voll{margin-left:0}
.schirm-voll:hover{color:#fff;text-decoration:underline}

/* Das Kabinett: dunkles Gehaeuse mit feiner Kante und blauem Lichtsaum */
.schirm-rahmen{
  position:relative;padding:10px;border-radius:10px;
  background:linear-gradient(160deg,#3a4652 0%,#1f2930 45%,#161d23 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 22px 50px rgba(0,0,0,.45),
    0 0 34px rgba(0,85,169,.22);
  transition:box-shadow .6s ease;
}
.schirm:has(.wall-aktiv) .schirm-rahmen{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 22px 50px rgba(0,0,0,.45),
    0 0 60px rgba(143,192,236,.45);
}
@keyframes kabinett-glimmen{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.45),0 0 26px rgba(0,85,169,.18)}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.45),0 0 50px rgba(0,85,169,.42)}
}
@media (prefers-reduced-motion: no-preference){
  .schirm:not(:has(.wall-aktiv)) .schirm-rahmen{animation:kabinett-glimmen 3.4s ease-in-out infinite}
}

/* Die Bildflaeche: 16:9, schwarz, ohne Neigung und ohne Zoom in den Inhalt.
   Ueberschreibt .wall-screen aus der Foto-Attrappe. */
.regie .wall-screen{
  position:relative;left:auto;top:auto;width:100%;height:auto;
  aspect-ratio:16/9;transform:none;animation:none;
  border-radius:4px;overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  --wk-zoom:1.04;--wk-shift:0%;   /* 1.04 schluckt nur den grauen Rand des Players */
}
.regie .wall-screen iframe{
  position:absolute;border:0;background:#000;
  width:calc(100% * var(--wk-zoom));height:calc(100% * var(--wk-zoom));
  left:calc((100% - 100% * var(--wk-zoom)) / 2);
  top:calc((100% - 100% * var(--wk-zoom)) / 2);
}

/* Ausgeschaltetes Panel: LED-Punktraster, schwaches Glimmen, Logo als
   Ruhebild, darueber der Knopf. Alles vom eigenen Server. */
.regie .live-laden{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  color:#fff;text-decoration:none;
  background:
    radial-gradient(circle at 50% 45%,rgba(0,85,169,.35) 0%,rgba(0,0,0,0) 62%),
    radial-gradient(circle,rgba(255,255,255,.075) 0 1px,transparent 1.6px) 0 0/6px 6px,
    #05080b;
  transition:background-color .3s ease;
}
.regie .live-laden:hover{color:#fff}
.regie .live-laden::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 40%);
}
.schirm-ruhe{
  width:38%;max-width:220px;height:auto;opacity:.28;
  filter:drop-shadow(0 0 18px rgba(143,192,236,.35));
  transition:opacity .4s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.regie .live-laden:hover .schirm-ruhe{opacity:.45;transform:scale(1.03)}
.schirm-knopf{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:6px;
  background:var(--blau);color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(0,85,169,.45);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.regie .live-laden:hover .schirm-knopf{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,85,169,.55);background:#1466c0}
.schirm-knopf .live-punkt{width:10px;height:10px}
@keyframes ruhe-atmen{0%,100%{opacity:.24}50%{opacity:.36}}
@media (prefers-reduced-motion: no-preference){
  .schirm-ruhe{animation:ruhe-atmen 4s ease-in-out infinite}
  .regie .live-laden:hover .schirm-ruhe{animation:none}
}

/* Laeuft der Player, wird die Kopfleiste rot und zeigt LIVE */
.schirm:has(.wall-aktiv) .schirm-live{background:rgba(224,49,46,.18);border-color:rgba(224,49,46,.5);color:#fff}
.schirm:has(.wall-aktiv) .schirm-live i{background:var(--live-rot)}
@media (prefers-reduced-motion: no-preference){
  .schirm:has(.wall-aktiv) .schirm-live i{animation:live-puls 1.8s ease-out infinite}
}

.schirm-fuss{margin:10px 4px 0;font-size:13px;color:#9aa7b4;letter-spacing:.02em}

/* Gestaffeltes Einblenden beim Scrollen wie bei den Fotos zuvor */
/* Scrollgesteuerte Einblendung der Kabinette entfernt (v0.2.4): siehe .richtung. */
@media(max-width:560px){
  .schirm-kopf{flex-wrap:wrap;gap:10px}
  .schirm-voll{margin-left:0;flex-basis:100%}
  .schirm-rahmen{padding:7px;border-radius:8px}
  .schirm-knopf{padding:10px 16px;font-size:14px}
}

/* ---------- Wall-Modell: drehbarer Kubus auf dem Mast (15.09.2026, v0.2.2) ----------
   Reines CSS-3D, kein Fremdhost. Masse: Bildflaeche im Verhaeltnis 672:384,
   Tiefe des Kubus, Mast und Bodenplatte sind nicht belegt und nur
   schematisch. Winkel 0 = Schmalseite Sued vorn, 90 = West, 270 = Ost.
   assets/js/modell.js macht das Modell greifbar; ohne Skript dreht es
   per CSS von selbst. */
.modell-abschnitt{padding-top:0}
.live-abschnitt .marke{color:#9fc6ea;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.modell{
  --w:340px;   /* Breite der Bildflaeche */
  --h:194px;   /* Hoehe der Bildflaeche, 340 / 1.75 */
  --d:340px;   /* Tiefe des Kubus: seit v0.5.12 gleich der Breite, quadratischer Grundriss wie am Original (Sascha Piron 17.09.2026) */
  --mast:210px;
  --mast-d:26px;
  --platte:560px;
  --s:1;
  --dreh:62deg;
  margin-top:8px;
}
.modell-buehne{
  position:relative;height:560px;overflow:hidden;border-radius:12px;
  background:
    radial-gradient(ellipse at 50% 78%,rgba(0,85,169,.22) 0%,rgba(0,0,0,0) 55%),
    linear-gradient(180deg,#1b2530 0%,#141c24 60%,#0f151b 100%);
  perspective:1400px;perspective-origin:50% 42%;
  touch-action:pan-y;user-select:none;cursor:grab;
  outline:none;
}
.modell-buehne.greift{cursor:grabbing}
.modell-buehne:focus-visible{box-shadow:0 0 0 3px rgba(143,192,236,.6)}
.modell-welt{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translateY(170px) scale(var(--s)) rotateX(-16deg) rotateY(var(--dreh));
}
/* Ohne Skript: Eigen-Drehung per CSS. Mit Skript (modell-aktiv) setzt
   modell.js --dreh und die Animation bleibt aus. */
@keyframes modell-drehen{
  from{transform:translateY(170px) scale(var(--s)) rotateX(-16deg) rotateY(0deg)}
  to  {transform:translateY(170px) scale(var(--s)) rotateX(-16deg) rotateY(360deg)}
}
@media (prefers-reduced-motion: no-preference){
  .modell:not(.modell-aktiv) .modell-welt{animation:modell-drehen 48s linear infinite}
}

/* Alle Flaechen sitzen zentriert im Ursprung und werden von dort gedreht
   und verschoben. Der Ursprung liegt am Fuss des Mastes auf der Platte. */
.modell-welt > *{position:absolute;left:0;top:0;transform-style:preserve-3d}
.flaeche{
  position:absolute;left:0;top:0;backface-visibility:hidden;
  transform-origin:50% 50%;
}

/* Kubus: Mittelpunkt liegt auf Masthoehe plus halbe Hoehe. */
.kubus{transform:translateY(calc(-1 * var(--mast) - var(--h) / 2))}
.kubus .flaeche{margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);width:var(--w);height:var(--h)}
.kubus .schmal{margin-left:calc(var(--d) / -2);width:var(--d)}
.kubus .deckel,.kubus .unten{margin-left:calc(var(--d) / -2);margin-top:calc(var(--w) / -2);width:var(--d);height:var(--w)}

.kubus .west  {transform:rotateY(-90deg) translateZ(calc(var(--d) / 2))}
.kubus .ost   {transform:rotateY(90deg)  translateZ(calc(var(--d) / 2))}
.kubus .sued  {transform:rotateY(0deg)   translateZ(calc(var(--w) / 2))}
.kubus .nord  {transform:rotateY(180deg) translateZ(calc(var(--w) / 2))}
.kubus .deckel{transform:rotateX(90deg)  translateZ(calc(var(--h) / 2))}
.kubus .unten {transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}

/* LED-Flaechen: schwarz, drei Spots blenden ineinander ueber, darueber
   ein feines Punktraster wie die LED-Module. */
.kubus .led{background:#000;overflow:hidden;box-shadow:inset 0 0 0 2px #1f2a33}
.kubus .led img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:spot-wechsel 15s ease-in-out infinite;
}
.kubus .led img:nth-child(2){animation-delay:5s}
.kubus .led img:nth-child(3){animation-delay:10s}
@keyframes spot-wechsel{
  0%{opacity:0}4%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .kubus .led img{animation:none}
  .kubus .led img:first-child{opacity:1}
}
/* Ohne Mischmodus (v0.2.3): mix-blend-mode zwang den Browser, die ganze
   Szene in jedem Bild neu zu mischen und nahm den Live-Playern Leistung. */
.kubus .led::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,transparent 0 40%,rgba(0,0,0,.38) 62%) 0 0/3px 3px;
}
.led-tag{
  position:absolute;left:10px;top:8px;z-index:2;
  padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:rgba(224,49,46,.85);
}
.led-tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:1px}

/* Schmalseiten: weiss mit dem PIRON-Schriftzug, wie am Original. */
.kubus .schmal{
  background:linear-gradient(180deg,#fdfdfd,#e9edf0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px #cfd6dc;
}
.kubus .schmal img{width:72%;height:auto;opacity:.95}
.kubus .deckel{background:linear-gradient(90deg,#3a4652,#243039)}
.kubus .unten{background:#0e1419}

/* Mast: vier schmale Flaechen. */
.mast{transform:translateY(calc(-1 * var(--mast) / 2))}
.mast .flaeche{
  margin-left:calc(var(--mast-d) / -2);margin-top:calc(var(--mast) / -2);
  width:var(--mast-d);height:var(--mast);
  background:linear-gradient(90deg,#4a5764,#8b98a4 45%,#3a4652);
}
.mast .flaeche:nth-child(1){transform:rotateY(0deg)   translateZ(calc(var(--mast-d) / 2))}
.mast .flaeche:nth-child(2){transform:rotateY(90deg)  translateZ(calc(var(--mast-d) / 2))}
.mast .flaeche:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--mast-d) / 2))}
.mast .flaeche:nth-child(4){transform:rotateY(270deg) translateZ(calc(var(--mast-d) / 2))}

/* Bodenplatte mit Kompassrose und Schatten, liegt flach im Ursprung. */
.platte{
  margin-left:calc(var(--platte) / -2);margin-top:calc(var(--platte) / -2);
  width:var(--platte);height:var(--platte);border-radius:50%;
  transform:rotateX(90deg);overflow:hidden;
  /* Flache Fuellung ohne Verlauf: Ein grosser Verlauf auf der gekippten
     Platte wurde bei schraegem Blick als Viereck gerastert (15.09.2026). */
  background:rgba(159,198,234,.05);
  box-shadow:inset 0 0 0 1px rgba(159,198,234,.22);
}

/* Strassen auf der Platte (v0.2.3), schematisch nach dem Kartenbild der
   alten Seite: Die B 220n Tweestrom laeuft noerdlich der Wall von West
   nach Ost, die Medline-Strasse zweigt auf der Westseite nach Sueden ab,
   die van-Houten-Strasse liegt suedlich. Oben auf der Platte ist Norden. */
.strasse{
  position:absolute;background:#2b3641;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.strasse.b220n{left:-10%;right:-10%;top:9%;height:12%;transform:rotate(-6deg)}
.strasse.medline{left:20%;top:16%;width:6%;height:70%}
.strasse.houten{left:20%;right:12%;top:80%;height:5%}
/* Mittellinie */
.strasse.b220n::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 22px,transparent 22px 40px);
}
/* Verkehr: Lichtpunkte in beide Richtungen, weiss vorwaerts, rot rueckwaerts. */
.strasse.b220n::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,244,214,.9) 0 2px,transparent 3px) 0 28%/90px 100% repeat-x,
    radial-gradient(circle,rgba(255,80,60,.9) 0 2px,transparent 3px) 45px 72%/120px 100% repeat-x;
}
@keyframes verkehr-hin{from{background-position:0 28%,45px 72%}to{background-position:90px 28%,-75px 72%}}
@media (prefers-reduced-motion: no-preference){
  .strasse.b220n::after{animation:verkehr-hin 2.4s linear infinite}
}
.strasse-name{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#9fc6ea;background:rgba(15,21,27,.75);padding:2px 8px;border-radius:999px;
}
.strasse.b220n .strasse-name{top:auto;bottom:-16px;transform:translate(-50%,0)}
.strasse.medline .strasse-name{transform:translate(-50%,-50%) rotate(90deg);left:50%;top:62%}
.strasse.houten .strasse-name{top:auto;bottom:-16px;transform:translate(-50%,0)}
/* Richtungsangaben an der B 220n. Hiess bis v0.2.4 ".richtung" und kollidierte
   mit den drei Karten West/Ost/Beide Seiten (.richtung) weiter oben. */
.strasse-richtung{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#dde7f0;
}
.strasse-richtung.west{left:12%}
.strasse-richtung.west::before{content:"\2190\00a0"}
.strasse-richtung.ost{right:12%}
.strasse-richtung.ost::after{content:"\00a0\2192"}
/* Schatten des Kubus als eigenes rundes Element auf der Platte */
.platte .schatten{
  position:absolute;left:50%;top:50%;width:48%;height:48%;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,0,0,.62) 0%,rgba(0,0,0,.32) 42%,rgba(0,0,0,0) 70%);
}
.platte::before,.platte::after{
  content:"";position:absolute;left:50%;top:50%;background:rgba(159,198,234,.22);
}
.platte::before{width:1px;height:100%;transform:translate(-50%,-50%)}
.platte::after{width:100%;height:1px;transform:translate(-50%,-50%)}
.kompass{
  position:absolute;color:#9fc6ea;font-size:15px;font-weight:800;letter-spacing:.1em;
  transform:translate(-50%,-50%);
}
/* Auf der um 90 Grad gekippten Platte: oben = Norden (hinten), unten =
   Sueden (vorn), links = Westen, rechts = Osten. Die Buchstaben liegen
   wie Bodenmarkierungen flach auf der Platte und sind von vorn lesbar. */
.kompass.n{left:50%;top:7%}
.kompass.s{left:50%;top:93%}
.kompass.w{left:7%;top:50%}
.kompass.o{left:93%;top:50%}

/* Steuerung unter der Buehne */
.modell-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px}
.modell-steuer .knopf{color:#fff;border-color:rgba(255,255,255,.6);background:transparent;cursor:pointer;font:inherit;font-weight:700}
.modell-steuer .knopf:hover{background:#fff;color:var(--led-dunkel)}
.modell-blick{margin:0;color:#c9d3dd;font-size:15px}
.modell-blick strong{color:#fff}
.modell-hinweis{font-size:13px;color:#9aa7b4;margin:12px 0 0;max-width:70ch}

@media(max-width:900px){
  .modell{--s:.78}
  .modell-buehne{height:470px}
}
@media(max-width:560px){
  .modell{--s:.58}
  .modell-buehne{height:380px;perspective:1000px}
  .modell-welt{transform:translateY(130px) scale(var(--s)) rotateX(-16deg) rotateY(var(--dreh))}
  .modell-steuer .knopf{flex:1 1 auto;text-align:center}
}


/* ==========================================================================
   Stufe 3, 15.09.2026 (v0.3.0): Gestaltung, Ablauf, Referenzen, Fragen,
   Aktuelles. Alle Klassennamen vorher per grep auf Kollision geprueft.
   ========================================================================== */

/* Zahlenband bei Tablet-Breite zwei mal zwei statt drei plus eins */
@media(max-width:900px) and (min-width:430px){
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Gestaltung: fuenf Regeln mit Beispielpaar ---------- */
.regeln{
  display:grid;gap:22px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.regel{
  background:var(--weiss);border:1px solid var(--linie);border-radius:8px;
  padding:16px 16px 20px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.regel:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,32,51,.12)}
.regel h3{margin:14px 0 6px;font-size:18px}
.regel p{margin:0;font-size:15.5px;color:var(--text-hell)}
.regelbild{display:grid;gap:10px;grid-template-columns:1fr 1fr}
/* Eine kleine LED-Flaeche im Format 7:4, mit Punktraster wie die Module */
.led-mini{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:7/4;border-radius:4px;overflow:hidden;padding:8px 10px;text-align:center;
  background:#0a0f14;color:#fff;line-height:1.1;
}
.led-mini::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,transparent 0 40%,rgba(0,0,0,.35) 62%) 0 0/3px 3px;
}
.led-mini b{display:block;font-weight:800;letter-spacing:.02em}
.led-mini i{display:block;font-style:normal;margin-top:4px;opacity:.9}
.led-mini em{
  position:absolute;left:6px;top:6px;z-index:2;font-style:normal;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(46,125,67,.95);color:#fff;
}
.led-mini.schlecht em{background:rgba(192,57,43,.95)}
.led-mini.schlecht{opacity:.92}
/* Regel 1: klar vs. ueberladen */
.r1g{background:linear-gradient(160deg,#0055a9,#003b7a)}
.r1g b{font-size:clamp(15px,2.6vw,22px)}
.r1g i{font-size:12px}
.r1s{background:#1c2733}
.r1s b{font-size:11px;font-weight:600}
.r1s i{font-size:8px;line-height:1.25;opacity:.8}
/* Regel 2: gross vs. klein */
.r2g{background:linear-gradient(160deg,#b8244a,#7a1230)}
.r2g b{font-size:clamp(28px,4.4vw,40px)}
.r2g i{font-size:12px}
.r2s{background:#1c2733}
.r2s b{font-size:9px;font-weight:600;line-height:1.3}
/* Regel 3: gerade vs. Serifen kursiv */
.r3g{background:linear-gradient(160deg,#0f7a4f,#0a5236)}
.r3g b{font-size:clamp(18px,3vw,26px)}
.r3g i{font-size:12px}
.r3s{background:#1c2733;font-family:Georgia,"Times New Roman",serif;font-style:italic}
.r3s b{font-size:clamp(16px,2.6vw,22px);font-weight:400}
.r3s i{font-size:12px;font-style:italic}
/* Regel 4: hell auf dunkel vs. grau auf hell */
.r4g{background:#0a0f14}
.r4g b{font-size:clamp(18px,3vw,26px);color:#fff}
.r4g i{font-size:12px}
.r4s{background:#e8ecef;color:#9aa3ab}
.r4s b{font-size:clamp(18px,3vw,26px);color:#aab3ba}
.r4s i{font-size:12px;color:#b8c0c6}
/* Regel 5: Farbe vs. weiss */
.r5g{background:linear-gradient(135deg,#e0312e 0%,#b8244a 45%,#0055a9 100%)}
.r5g b{font-size:clamp(18px,3vw,26px)}
.r5g i{font-size:12px}
.r5s{background:#fafafa;color:#6b7680}
.r5s b{font-size:clamp(18px,3vw,26px);color:#5a6a76}
.r5s i{font-size:12px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .regel{animation:auf .8s linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .regel:nth-child(even){animation-range:entry 6% entry 46%}
  }
}

/* Zwei Bilder nebeneinander (Format und 30/70-Schema) */
.galerie.galerie-zwei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.galerie.galerie-drei{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Anforderungen neben Support */
.anforderungen{display:grid;gap:40px;grid-template-columns:1.1fr 1fr;align-items:start}
@media(max-width:860px){.anforderungen{grid-template-columns:1fr}}
.hakenliste{list-style:none;margin:18px 0 0;padding:0}
.hakenliste li{
  position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--linie);font-size:16px;
}
.hakenliste li::before{
  content:"";position:absolute;left:4px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--blau);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/><path d='M4 8.5l2.6 2.6L12 5.7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/><path d='M4 8.5l2.6 2.6L12 5.7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.hakenliste strong{color:var(--text)}
.support{
  background:var(--led-dunkel);color:#dde7f0;border-radius:8px;padding:28px 30px;
}
.support .marke{color:#9fc6ea;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.support h2{color:#fff;margin-top:0;font-size:24px}
.support p{font-size:15.5px}
.support .knopf.rand{color:#fff;border-color:rgba(255,255,255,.7)}
.support .knopf.rand:hover{background:#fff;color:var(--led-dunkel)}

/* ---------- Spot-Galerie mit Filter ohne Skript ---------- */
.spotfilter{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
.spotfilter .pille span b{
  display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;
  background:rgba(0,85,169,.12);color:var(--blau);font-size:12px;font-weight:700;line-height:20px;
}
.spotfilter .pille:has(input:checked) span b{background:rgba(255,255,255,.25);color:#fff}
.spotgalerie:has(.spot-schalter[data-g="image"]:checked)      .videokachel:not(.g-image),
.spotgalerie:has(.spot-schalter[data-g="recruiting"]:checked) .videokachel:not(.g-recruiting),
.spotgalerie:has(.spot-schalter[data-g="event"]:checked)      .videokachel:not(.g-event),
.spotgalerie:has(.spot-schalter[data-g="beispiel"]:checked)   .videokachel:not(.g-beispiel){display:none}
.videoliste.spots{margin-top:18px}

/* Eigene MP4-Spots */
.eigene-spots{display:grid;gap:22px;margin:26px 0 0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.eigene-spots figure{margin:0}
.eigene-spots video{
  display:block;width:100%;height:auto;aspect-ratio:7/4;background:#000;border-radius:4px;
  box-shadow:0 12px 28px rgba(11,32,51,.16);
}
.eigene-spots figcaption{font-size:14px;color:var(--text-hell);padding-top:8px}

/* ---------- Ablauf: Sendeuhr ---------- */
.ablauf-logik{display:grid;gap:40px;grid-template-columns:1.1fr 1fr;align-items:center}
@media(max-width:860px){.ablauf-logik{grid-template-columns:1fr}}
.sendeuhr-halter{text-align:center}
.sendeuhr{position:relative;width:min(300px,80vw);aspect-ratio:1;margin:0 auto}
.sendeuhr::before{
  content:"";position:absolute;left:50%;top:-6px;z-index:3;
  border-style:solid;border-width:16px 10px 0 10px;border-color:var(--live-rot) transparent transparent transparent;
  transform:translateX(-50%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.sendeuhr-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(
    var(--blau) 0 30deg,
    #26333F 30deg 60deg,#3a4652 60deg 90deg,#26333F 90deg 120deg,#3a4652 120deg 150deg,
    #26333F 150deg 180deg,#3a4652 180deg 210deg,#26333F 210deg 240deg,#3a4652 240deg 270deg,
    #26333F 270deg 300deg,#3a4652 300deg 330deg,#26333F 330deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0 58%,#000 59%);
  mask:radial-gradient(circle,transparent 0 58%,#000 59%);
  box-shadow:0 18px 40px rgba(11,32,51,.16);
}
@keyframes sendeuhr-drehen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: no-preference){
  .sendeuhr-ring{animation:sendeuhr-drehen 36s linear infinite}
}
.sendeuhr-mitte{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52%;aspect-ratio:1;border-radius:50%;background:var(--weiss);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--linie);
}
.sendeuhr-mitte strong{font-size:clamp(18px,4vw,24px);color:var(--blau);line-height:1.1}
.sendeuhr-mitte span{font-size:13px;color:var(--text-hell);margin-top:4px}
.sendeuhr-mitte em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:2px}
.sendeuhr-text{font-size:14px;color:var(--text-hell);max-width:38ch;margin:18px auto 0}

/* ---------- Aktuelles: Zeitstrahl der Bau-Chronik ---------- */
.zeitstrahl{list-style:none;margin:30px 0 0;padding:0;position:relative}
.zeitstrahl::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--blau),rgba(0,85,169,.25));
}
.zeitstrahl li{position:relative;padding:0 0 34px 44px}
.zeitstrahl li::before{
  content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--blau);box-shadow:0 0 0 5px var(--flaeche);
}
.zeitstrahl li:last-child{padding-bottom:0}
.zeit-datum{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blau)}
.zeit-karte{
  display:grid;gap:0;grid-template-columns:minmax(0,260px) 1fr;
  background:var(--weiss);border:1px solid var(--linie);border-radius:8px;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.zeit-karte:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,32,51,.12)}
.zeit-bild{display:block;overflow:hidden;background:var(--flaeche);aspect-ratio:16/10}
.zeit-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.zeit-karte:hover .zeit-bild img{transform:scale(1.05)}
.zeit-text{padding:20px 24px 22px;display:flex;flex-direction:column}
.zeit-text h3{margin:0 0 8px;font-size:18px;line-height:1.35}
.zeit-text h3 a{color:var(--text);text-decoration:none}
.zeit-karte:hover h3 a{color:var(--blau)}
.zeit-text p{font-size:15px;color:var(--text-hell);margin:0 0 12px}
.zeit-text .weiterlesen{margin-top:auto}
@media(max-width:640px){
  .zeit-karte{grid-template-columns:1fr}
  .zeitstrahl li{padding-left:34px}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .zeitstrahl li{animation:vonrechts .7s linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}


/* ==========================================================================
   Stufe 4, 15.09.2026 (v0.4.0): Technik, Vorteile, Zielgruppen, AGB,
   Impressum, Datenschutz. Klassennamen per grep auf Kollision geprueft;
   .rechtstext und .hakenliste werden wiederverwendet.
   ========================================================================== */

/* ---------- Technik: Modulraster 7 x 4 ---------- */
.modulraster{
  position:relative;display:grid;gap:4px;margin:30px auto 0;
  grid-template-columns:repeat(7,1fr);max-width:840px;aspect-ratio:7/4;
  padding:6px;background:#0a0f14;border-radius:6px;
  box-shadow:0 18px 40px rgba(11,32,51,.18),0 0 0 1px #26333F;
}
.modulraster i{
  position:relative;display:block;border-radius:2px;
  background:
    radial-gradient(circle,rgba(255,255,255,.10) 0 1px,transparent 1.5px) 0 0/5px 5px,
    linear-gradient(160deg,#16202a,#0d141a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:background .25s ease,box-shadow .25s ease,transform .2s ease;
}
.modulraster i::after{
  content:"96 × 96";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(8px,1.4vw,12px);font-weight:700;letter-spacing:.04em;color:rgba(159,198,234,.35);
  font-style:normal;white-space:nowrap;
}
.modulraster i:hover{
  background:linear-gradient(160deg,#1466c0,var(--blau));
  box-shadow:0 0 18px rgba(0,85,169,.7),inset 0 0 0 1px rgba(255,255,255,.3);
  transform:scale(1.04);z-index:2;
}
.modulraster i:hover::after{color:#fff;content:"Kabinett " attr(data-n) " · 96 cm · 96 px"}
.modul-mass{
  position:absolute;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text-hell);
  text-transform:uppercase;white-space:nowrap;
}
.modul-breit{left:50%;bottom:-26px;transform:translateX(-50%)}
.modul-hoch{left:-14px;top:50%;transform:translate(-100%,-50%) rotate(-90deg);transform-origin:center}
.modul-hinweis{font-size:13.5px;color:var(--text-hell);text-align:center;margin:44px 0 0}
@media(max-width:700px){
  .modulraster{gap:3px;padding:4px}
  .modul-hoch{display:none}
  .modulraster i::after{font-size:7px}
  .modulraster i:hover::after{content:attr(data-n)}
}

/* ---------- Vorteile: Tag und Nacht, zehn Punkte ---------- */
.tagnacht{display:grid;gap:18px;margin:26px 0 8px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.tagnacht{grid-template-columns:1fr}}
.tagnacht-karte{
  position:relative;overflow:hidden;border-radius:8px;padding:28px 26px 26px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.tagnacht-karte:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,32,51,.18)}
.tagnacht-karte h2{margin:0 0 8px;font-size:22px}
.tagnacht-karte p{margin:0;font-size:15.5px;max-width:40ch}
.tagnacht-karte.tag{background:linear-gradient(160deg,#eaf2fb,#d6e6f7);color:var(--text)}
.tagnacht-karte.tag h2{color:var(--blau)}
.tagnacht-karte.nacht{background:linear-gradient(160deg,#26333F,#0f151b);color:#dde7f0}
.tagnacht-karte.nacht h2{color:#fff}
.tagnacht-zeit{
  position:absolute;right:16px;top:8px;font-size:64px;font-weight:800;letter-spacing:-.04em;
  line-height:1;opacity:.12;user-select:none;
}
.tagnacht-karte.nacht .tagnacht-zeit{color:#9fc6ea;opacity:.18}
.vorteile{
  list-style:none;margin:26px 0 8px;padding:0;counter-reset:vorteil;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.vorteile li{
  counter-increment:vorteil;position:relative;
  padding:18px 18px 18px 64px;background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  font-size:15.5px;color:var(--text-hell);line-height:1.5;
}
.vorteile li::before{
  content:counter(vorteil,decimal-leading-zero);position:absolute;left:16px;top:16px;
  width:34px;height:34px;border-radius:50%;background:var(--blau);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
.vorteile strong{display:block;color:var(--text);font-size:16.5px;margin-bottom:3px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .vorteile li{animation:auf .7s linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .vorteile li:nth-child(even){animation-range:entry 5% entry 45%}
  }
}

/* ---------- Zielgruppen ---------- */
.zielgruppen{
  display:grid;gap:22px;margin:26px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.zielgruppe{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--weiss);border:1px solid var(--linie);border-radius:8px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.zielgruppe:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,32,51,.12)}
.zielgruppe-bild{display:block;aspect-ratio:16/9;overflow:hidden;background:#0a0f14;position:relative}
.zielgruppe-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.zielgruppe:hover .zielgruppe-bild img{transform:scale(1.05)}
.zielgruppe-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,transparent 0 40%,rgba(0,0,0,.28) 62%) 0 0/3px 3px;
}
.zielgruppe-text{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.zielgruppe-text h3{margin:0 0 8px;font-size:18px}
.zielgruppe-text p{margin:0;font-size:15.5px;color:var(--text-hell)}
.zielgruppe-text .knopf-reihe{margin-top:auto;padding-top:16px}
.zielgruppe-offen{background:var(--led-dunkel);border-color:var(--led-dunkel);color:#dde7f0;justify-content:center}
.zielgruppe-offen h3{color:#fff}
.zielgruppe-offen p{color:#dde7f0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .zielgruppe{animation:auf .8s linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .zielgruppe:nth-child(even){animation-range:entry 6% entry 46%}
  }
}

/* ---------- AGB: Dokumentkarten ---------- */
.dokumente{display:grid;gap:18px;margin:26px 0 22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dokument{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--weiss);border:1px solid var(--linie);border-radius:8px;padding:22px 22px;
  text-decoration:none;color:var(--text);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.dokument:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,32,51,.12);border-color:#b9cde0;color:var(--text)}
.dokument-symbol{
  flex:0 0 54px;height:66px;border-radius:4px;position:relative;
  background:var(--led-dunkel);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
}
.dokument-symbol::before{
  content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 14px 14px 0;
  border-color:transparent var(--flaeche) transparent transparent;
}
.dokument-text{display:flex;flex-direction:column;gap:6px}
.dokument-text strong{font-size:17px}
.dokument-text span{font-size:15px;color:var(--text-hell);line-height:1.5}
.dokument-text em{font-style:normal;font-size:13px;color:var(--blau);font-weight:700}
.hinweis-klein{font-size:14.5px;color:var(--text-hell);max-width:70ch}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext h1{margin-bottom:14px}
.rechtstext .einstieg{margin-bottom:8px}
.rechtstext h2{scroll-margin-top:90px}


/* ==========================================================================
   Startseite: Modell-Buehne (v0.5.0, 15.09.2026)
   Claim links, drehbarer Kubus rechts mit laufenden Spots, Nachtfoto schwach
   dahinter. Klassennamen per grep geprueft. Konzept:
   KONZEPT_2026-09-15_startseite-eyecatcher.md
   ========================================================================== */
.buehne-modell{min-height:0}
.buehne-modell .buehne-hg{opacity:.55;object-position:50% 20%}
.buehne-modell .buehne-schleier{
  /* v0.5.12: Textseite fast deckend, damit der Turm des Hintergrundfotos
     nicht hinter dem Text durchscheint; rechts bleibt der Verkehr sichtbar. */
  background:linear-gradient(90deg,rgba(6,18,31,.97) 0%,rgba(6,18,31,.95) 40%,rgba(6,18,31,.62) 62%,rgba(6,18,31,.5) 100%);
}
.buehne-zwei{
  display:grid;gap:26px;grid-template-columns:1.05fr 1fr;align-items:center;
  padding-top:44px;padding-bottom:44px;
}
.buehne-modell .buehne-text{max-width:600px}
.buehne-modell .buehne-text .sendestatus{margin-bottom:16px}
.buehne-modell .buehne-aktion{margin-top:18px}

/* Das Feld "Ihr Name auf der Wall" */
.vorschau-form{margin-top:24px}
.vorschau-form label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#9fc6ea;margin-bottom:8px;
}
.vorschau-zeile{display:flex;gap:10px;flex-wrap:wrap}
.vorschau-zeile input{
  flex:1 1 220px;min-width:0;padding:13px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.96);color:var(--text);font:inherit;font-size:16px;
}
.vorschau-zeile input:focus{outline:3px solid rgba(143,192,236,.6);outline-offset:1px;border-color:#fff}
.vorschau-zeile .knopf{flex:0 0 auto}

/* Das Modell schwebt ueber dem Foto: keine eigene Buehne, kein Rand */
.buehne-modell-halter{position:relative;z-index:2}
.buehne-modell .modell{margin:0;--s:.92}
.buehne-modell .modell-buehne{
  height:470px;background:transparent;border-radius:0;box-shadow:none;overflow:visible;
}
.buehne-modell .modell-welt{transform:translateY(130px) scale(var(--s)) rotateX(-16deg) rotateY(var(--dreh))}
.buehne-modell .platte{background:rgba(159,198,234,.04)}
.buehne-modell-hinweis{font-size:12.5px;color:#9aa7b4;text-align:center;margin:34px 0 0;position:relative;z-index:3}

/* MP4-Spot auf der LED-Flaeche, von modell.js eingesetzt */
.kubus .led video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kubus .led.mit-video img{display:none}

/* Vorschau des Firmennamens: legt sich ueber Bild oder Video */
.led-vorschau{
  position:absolute;inset:0;z-index:3;display:none;
  align-items:center;justify-content:center;text-align:center;padding:6% 8%;
  background:linear-gradient(160deg,#0055a9,#003060);color:#fff;
  font-weight:800;font-size:clamp(15px,2.3vw,30px);line-height:1.08;letter-spacing:.02em;
  text-transform:uppercase;word-break:break-word;
}
.led-vorschau::after{
  content:"jetzt in Kleve";display:block;font-size:.42em;font-weight:600;letter-spacing:.16em;
  margin-top:.6em;opacity:.85;
}
.kubus.zeigt .led-vorschau{display:flex}
@keyframes led-an{0%{opacity:0;filter:brightness(3)}40%{opacity:1;filter:brightness(1.6)}100%{filter:brightness(1)}}
@media (prefers-reduced-motion: no-preference){
  .kubus.zeigt .led-vorschau{animation:led-an .55s ease-out}
}

@media(max-width:1000px){
  .buehne-zwei{grid-template-columns:1fr 1fr;gap:16px}
  .buehne-modell .modell{--s:.72}
  .buehne-modell .modell-buehne{height:400px}
  .buehne-modell .modell-welt{transform:translateY(110px) scale(var(--s)) rotateX(-16deg) rotateY(var(--dreh))}
}
@media(max-width:760px){
  .buehne-zwei{grid-template-columns:1fr;padding-top:30px;padding-bottom:26px}
  .buehne-modell .buehne-text{max-width:none}
  .buehne-modell .modell{--s:.6}
  .buehne-modell .modell-buehne{height:330px}
  .buehne-modell .modell-welt{transform:translateY(95px) scale(var(--s)) rotateX(-16deg) rotateY(var(--dreh))}
  .vorschau-zeile .knopf{flex:1 1 100%;text-align:center}
}

/* ==========================================================================
   Startseite: Verkehr-Abschnitt (v0.5.16, 17.09.2026)
   Dunkle Buehne, grosse Tag-Nacht-Ueberblendung per CSS (zwei Optionsfelder,
   kein Skript), darunter zwei Bilder mit Unterschrift im Bild. Klassennamen
   vor dem Anlegen per Suche geprueft.
   ========================================================================== */
.verkehr-abschnitt{background:var(--led-dunkel);color:#fff}
.verkehr-kopf{max-width:720px;margin-bottom:30px}
.verkehr-abschnitt .marke{color:#9fc6ea;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.verkehr-abschnitt h2{color:#fff}
.verkehr-abschnitt .einstieg{color:#c9d6e2}

.tn-rahmen{position:relative}
.tn-wahl{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tn-buehne{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  aspect-ratio:16/9;background:#0f151b;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  transition:box-shadow 1.1s ease;
}
.tn-bild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  transition:opacity 1.1s ease;
}
.tn-bild-nacht{opacity:0}
#tn-nacht:checked ~ .tn-buehne .tn-bild-nacht{opacity:1}
#tn-nacht:checked ~ .tn-buehne{box-shadow:0 30px 90px rgba(0,85,169,.45)}
.tn-buehne figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:60px 24px 20px;font-size:16px;line-height:1.45;color:#fff;
  background:linear-gradient(180deg,rgba(6,18,31,0) 0%,rgba(6,18,31,.82) 70%);
}
.tn-chip{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:6px 12px;border-radius:999px;background:var(--live-rot);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.tn-chip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff}

/* Schalter oben rechts im Bild */
.tn-schalter{
  position:absolute;right:16px;top:16px;z-index:3;display:inline-flex;gap:4px;padding:4px;
  border-radius:999px;background:rgba(6,18,31,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
.tn-schalter label{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:9px 16px;border-radius:999px;color:#dfe9f2;
  font-size:14px;font-weight:700;line-height:1;
  transition:background .25s ease,color .25s ease;
}
.tn-schalter label:hover{color:#fff}
#tn-tag:checked ~ .tn-schalter label[for="tn-tag"],
#tn-nacht:checked ~ .tn-schalter label[for="tn-nacht"]{background:#fff;color:#0b2033}
#tn-tag:focus-visible ~ .tn-schalter label[for="tn-tag"],
#tn-nacht:focus-visible ~ .tn-schalter label[for="tn-nacht"]{outline:3px solid #8fc0ec;outline-offset:2px}

/* Dezente Marke in der Bildecke */
.bild-marke{
  position:absolute;left:14px;top:14px;z-index:2;
  padding:5px 10px;border-radius:999px;background:rgba(6,18,31,.55);color:#dfe9f2;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* Zwei Bilder darunter, Unterschrift im Bild */
.verkehr-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
.verkehr-bild{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#0f151b}
.verkehr-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.verkehr-bild:hover img{transform:scale(1.05)}
.verkehr-bild figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 20px 16px;
  font-size:15.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,rgba(6,18,31,0) 0%,rgba(6,18,31,.8) 75%);
}

@media (prefers-reduced-motion: no-preference){
  /* Hinweis, dass sich die Nacht schalten laesst, solange der Tag steht */
  #tn-tag:checked ~ .tn-schalter label[for="tn-nacht"]{animation:tn-hinweis 2.6s ease-in-out infinite}
}
@keyframes tn-hinweis{
  0%,100%{box-shadow:0 0 0 0 rgba(159,198,234,0)}
  50%{box-shadow:0 0 0 5px rgba(159,198,234,.28)}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .tn-rahmen,.verkehr-bild{
      animation:auf .8s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
  }
}
@media(max-width:700px){
  .verkehr-zwei{grid-template-columns:1fr;gap:16px}
  .tn-buehne{aspect-ratio:4/3;border-radius:10px}
  .tn-buehne figcaption{padding:46px 16px 14px;font-size:14.5px}
  .tn-schalter{right:10px;top:10px}
  .tn-schalter label{padding:8px 12px;font-size:13px}
  .bild-marke{left:10px;top:10px;font-size:10px}
}

/* ---------- Profil- und Teilen-Zeile im Seitenfuss (v0.5.19) ---------- */
.fuss-sozial{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-bottom:14px}
.fuss-sozial p{margin:0}
.fuss-sozial a{color:#dfe9f2;text-decoration:none}
.fuss-sozial a:hover{color:#fff;text-decoration:underline}
.fuss-sozial .wa-zeichen{width:15px;height:15px;margin-right:6px;color:#9fc6ea;vertical-align:-2px}
.teilen-leiste{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.teilen-leiste span{color:#8f9ba7}