/* PIRON Metallbau GmbH, 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}

.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}

/* 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 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%;
    }
  }
}


/* ---------- 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}