/* ==========================================================================
   MASTELL, Bausteine
   Karten, Raster, Galerie, Zahlen, Ablauf, Fragen, Formulare, Assistent.
   Grundlagen stehen in basis.css.
   ========================================================================== */

/* ---------------------------------------------------------------- Bereiche
   Drei Türen zu drei Seiten. Aufbau von oben nach unten:
   weißes Namensband, Leistungsbild, weiße Textbox. Das Markenzeichen sitzt
   im Kreis auf der Naht zwischen Bild und Text.

   Der Bereichsname steht ganz oben, weil er eine Wegweisung ist und keine
   Überschrift: Er sagt, wo man landet. In der Leserichtung kommt er damit
   zuerst und muss nicht mit der Schlagzeile um Aufmerksamkeit ringen. */
/* Der Kopf dieses Abschnitts laeuft nicht im normalen Textrahmen, sondern auf
   derselben Kante wie die Kacheln, sonst stuende er 27 px daneben, und das
   sieht nach Versehen aus statt nach Absicht. */
.bereiche-kopf{max-width:none;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,3.5rem)}

.bereiche{
  display:grid;gap:clamp(.9rem,1.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  max-width:none;margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,3.5rem);
  align-items:stretch;
}
.bereich{
  position:relative;display:flex;flex-direction:column;
  background:var(--papier);border:1px solid var(--haar);
  border-radius:var(--rund);overflow:hidden;isolation:isolate;
  transition:border-color var(--mittel) ease,box-shadow var(--mittel) ease,
             transform var(--mittel) var(--weich);
}
.bereich:hover{
  border-color:var(--eigen);transform:translateY(-4px);
  box-shadow:0 22px 50px -30px rgba(13,26,19,.4),0 0 0 4px var(--eigen-schimmer);
}

/* Namensband: weiß, groß, fett, in der Bereichsfarbe.
   Ohne Punkt, die farbige Linie darunter ordnet den Bereich bereits zu. */
.bereich__kopf{
  display:flex;align-items:center;
  padding:clamp(1rem,1.5vw,1.35rem) clamp(1.3rem,2vw,1.9rem);
  background:var(--papier);border-bottom:3px solid var(--eigen);
  color:var(--eigen);
  font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:800;
  font-stretch:104%;letter-spacing:-.02em;text-transform:uppercase;
  line-height:1;
}

/* Leistungsbild der Zielseite */
.bereich__bild{
  position:relative;aspect-ratio:16/10;overflow:hidden;background:#0A120D;
}
.bereich__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--weich)}
.bereich:hover .bereich__bild img{transform:scale(1.06)}
.bereich__bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,11,8,.5),rgba(5,11,8,0) 60%),
             var(--eigen-schimmer);
}

/* Markenzeichen im Kreis, auf der Naht zwischen Bild und Textbox. */
.bereich__marke{
  position:absolute;right:clamp(1.1rem,1.8vw,1.6rem);top:0;z-index:2;
  transform:translateY(-50%);
  display:grid;place-items:center;
  width:clamp(132px,15.5vw,172px);height:clamp(132px,15.5vw,172px);
  padding:1.05rem;border-radius:99px;
  background:var(--papier);border:1px solid var(--haar);
  box-shadow:0 12px 30px -16px rgba(13,26,19,.55);
}
.bereich__marke img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

.bereich__innen{
  position:relative;
  padding:clamp(1.5rem,2.4vw,2.2rem);
  padding-top:clamp(5.4rem,8.5vw,6.6rem);     /* Luft unter dem Kreis */
  display:flex;flex-direction:column;flex:1;
}
.bereich h3{
  font-size:clamp(1.4rem,2vw,1.85rem);letter-spacing:-.035em;line-height:1.04;
  color:var(--ink);margin-bottom:.85rem;font-stretch:100%;
}
.bereich h3 em{font-style:normal;color:var(--eigen);display:block}
.bereich__innen p{color:var(--leise);font-size:.95rem;line-height:1.62;margin-bottom:1.6rem}

/* Knopf steht von Anfang an in der Bereichsfarbe, damit man ihn auch ohne
   Maus als Schaltfläche erkennt, auf dem Handy gibt es kein Überfahren.
   Beim Überfahren wird er nur eine Spur dunkler. */
.bereich__gehen{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.6rem;min-height:var(--griff);
  padding:.85rem 1.4rem;border:1px solid var(--eigen);
  background:var(--eigen);color:#fff;
  font-weight:800;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;
  transition:filter var(--mittel) ease;
}
.bereich:hover .bereich__gehen,
.bereich__link:focus-visible ~ .bereich__innen .bereich__gehen{
  filter:brightness(.86)}
.bereich__gehen svg{transition:transform var(--mittel) var(--weich)}
.bereich:hover .bereich__gehen svg{transform:translateX(4px)}

/* Die ganze Kachel ist die Schaltfläche, nicht nur der Knopf. */
.bereich__link{position:absolute;inset:0;z-index:3;border-radius:var(--rund)}

@media(max-width:519px){
  .bereich__marke{width:118px;height:118px;padding:.85rem}
  .bereich__innen{padding-top:4.8rem}
}
/* ------------------------------------------------------------------ Karte */
.karte{
  display:flex;flex-direction:column;background:var(--papier);
  border:1px solid var(--haar);text-align:left;padding:0;
  transition:border-color var(--mittel) ease,transform var(--mittel) var(--weich);
}
.karte--klick{cursor:pointer;appearance:none;font:inherit;color:inherit;width:100%}
.karte--klick:hover{border-color:var(--ton);transform:translateY(-4px)}
.karte__bild{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--papier-warm)}
.karte__bild img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--weich)}
.karte--klick:hover .karte__bild img{transform:scale(1.05)}
.karte__text{display:block;padding:1.25rem 1.35rem 1.5rem;flex:1}
.karte h3{margin-bottom:.55rem}
.karte p{color:var(--leise);font-size:.9rem;margin-bottom:0}
.karte__mehr{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-weight:800;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ton)}
.karte--klick:hover .karte__mehr svg{transform:translateX(4px)}
.karte__mehr svg{transition:transform var(--mittel) var(--weich)}
.karte__nr{display:block;font-family:ui-monospace,monospace;font-size:.8rem;
  letter-spacing:.16em;color:var(--ton);margin-bottom:.5rem}

/* Leistungsraster, dichter als das normale Raster.
   Die Trennlinien liegen auf den Kacheln selbst, nicht als Fläche darunter.
   Sonst schien in einer unvollständigen letzten Zeile die graue Rasterfläche
   durch und stand als Block neben der letzten Kachel. Ein box-shadow braucht
   keinen Platz, benachbarte Linien liegen deshalb genau übereinander. */
.leistungen{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.leistungen>*{box-shadow:0 0 0 1px var(--haar);background:var(--papier)}
.leistungen .karte{border:0}
/* Neun Kacheln gehen in drei Spalten glatt auf, in vier bliebe eine
   allein übrig. */
@media(min-width:900px){.leistungen--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* -------------------------------------------------------------- Aktuelles
   Bewusst ohne Bilder. Weiter unten tragen die Karten ihre Fotos; hier soll
   man in wenigen Sekunden überfliegen können, was gerade gefragt ist. Die
   Bereichsfarbe kommt über --eigen aus dem HTML, wie bei den Kacheln oben. */
.aktuelles{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));
}
/* Sechs Kacheln gehen in drei Spalten glatt auf, in vier blieben zwei
   übrig und die leeren Zellen ständen als graue Fläche daneben. */
@media(min-width:900px){.aktuelles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.aktuelles__stueck{
  position:relative;display:flex;flex-direction:column;
  background:var(--papier);padding:clamp(1.3rem,2.2vw,1.85rem);
  border-top:3px solid var(--eigen);
  box-shadow:0 0 0 1px var(--haar);
  transition:background var(--mittel) ease;
}
.aktuelles__stueck:hover{background:var(--eigen-hell)}
/* Der Bereichsname muss auf einen Blick lesbar sein, nicht als winziges
   Mono-Kürzel, das man überliest. */
.aktuelles__bereich{
  display:block;color:var(--eigen);margin-bottom:.55rem;
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.aktuelles__stueck h3{
  font-size:clamp(1.1rem,1.6vw,1.34rem);letter-spacing:-.028em;
  margin-bottom:.5rem;font-stretch:100%;
}
.aktuelles__stueck p{color:var(--leise);font-size:.92rem;line-height:1.58;margin:0 0 1.1rem}
.aktuelles__gehen{
  margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  color:var(--eigen);font-weight:800;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;
}
.aktuelles__gehen svg{transition:transform var(--mittel) var(--weich)}
.aktuelles__stueck:hover .aktuelles__gehen svg{transform:translateX(4px)}
/* Die ganze Fläche ist der Link, nicht nur die Zeile unten. */
.aktuelles__link{position:absolute;inset:0;z-index:2}
.aktuelles__link:focus-visible{outline:3px solid var(--eigen);outline-offset:-3px}

/* --------------------------------------------------------------- Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  border-top:2px solid var(--linie);border-left:1px solid var(--haar)}
.zahl{padding:clamp(1.3rem,3vw,2.4rem);
  border-right:1px solid var(--haar);border-bottom:1px solid var(--haar)}
.zahl__wert{display:block;font-size:clamp(2.7rem,6vw,4.8rem);font-weight:800;
  letter-spacing:-.058em;line-height:.9;font-variant-numeric:tabular-nums}
.zahl__wert sup{font-size:.42em;vertical-align:super;color:var(--ton);letter-spacing:0}
.zahl__text{display:block;margin:.85rem 0 0;color:var(--leise);
  font-family:ui-monospace,monospace;font-size:.65rem;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.55}
.abschnitt--dunkel .zahlen{border-left-color:rgba(255,255,255,.16)}
.abschnitt--dunkel .zahl{border-right-color:rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16)}
.abschnitt--dunkel .zahl__text{color:rgba(255,255,255,.6)}
.abschnitt--dunkel .zahl__wert sup{color:var(--ton-leucht)}

/* --------------------------------------------------------------- Aktion */
.aktion{background:var(--ink);color:var(--papier);display:grid;
  grid-template-columns:minmax(0,1fr);border-bottom:2px solid var(--ink)}
@media(min-width:960px){.aktion{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.aktion__text{padding:clamp(2rem,4.5vw,var(--r5)) clamp(1.1rem,4vw,3.5rem)}
.aktion__zahl{font-size:clamp(4rem,11vw,8.5rem);font-weight:800;letter-spacing:-.06em;
  line-height:.82;color:var(--ton-leucht);margin:0 0 var(--r2);font-variant-numeric:tabular-nums}
.aktion__zahl span{font-size:.34em;vertical-align:super;letter-spacing:-.02em}
.aktion h2{color:var(--papier);max-width:20ch;margin-bottom:var(--r2)}
.aktion p{color:rgba(255,255,255,.72);max-width:52ch}
/* Doppelt qualifiziert, weil sonst „.aktion p" die Farbe wieder auf Grau zöge. */
.aktion .kicker{color:var(--ton-leucht)}
.aktion__medium{position:relative;min-height:280px;overflow:hidden}
.aktion__medium img,.aktion__medium video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.haken{list-style:none;margin:0 0 var(--r3);padding:0;display:grid;gap:.62rem}
.haken li{padding-left:1.7rem;position:relative;font-size:.93rem;line-height:1.58}
.haken li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:2px;background:var(--ton)}
.abschnitt--dunkel .haken li::before,.aktion .haken li::before{background:var(--ton-leucht)}
.aktion .haken li{color:rgba(255,255,255,.88)}

/* Rabattband */
.rabatt-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;
  border:2px solid var(--ton);padding:.9rem 1.2rem;margin-block:var(--r3)}
.rabatt-band strong{font-size:1.35rem;font-weight:800;letter-spacing:-.04em;color:var(--ton)}
.rabatt-band span{font-family:ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise)}

/* --------------------------------------------------------------- Ablauf */
.ablauf{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));counter-reset:s}
/* Höchstens drei Spalten: Die Karriereseite hat sechs Schritte, die sonst
   als fünf plus einer brächen. Drei Seiten mit drei Schritten bleiben
   davon unberührt. */
@media(min-width:900px){.ablauf{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ablauf__schritt{background:var(--papier);padding:clamp(1.4rem,2.5vw,2.1rem);
  counter-increment:s;box-shadow:0 0 0 1px var(--haar)}
.ablauf__schritt::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;
  color:var(--ton);margin-bottom:.9rem}
.ablauf__schritt h3{margin-bottom:.6rem}
.ablauf__schritt p{color:var(--leise);font-size:.91rem;margin:0}
.abschnitt--dunkel .ablauf__schritt{background:var(--ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.abschnitt--dunkel .ablauf__schritt p{color:rgba(255,255,255,.68)}
.abschnitt--dunkel .ablauf__schritt::before{color:var(--ton-leucht)}

/* --------------------------------------------------------- Zwei Einstiege */
.wege{display:grid;gap:1px;background:var(--haar);border:1px solid var(--haar)}
@media(min-width:860px){.wege{grid-template-columns:repeat(2,minmax(0,1fr))}}
.weg{background:var(--papier);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column}
.weg .mono{color:var(--ton);margin-bottom:.9rem}
.weg h3{margin-bottom:.9rem;max-width:22ch}
.weg>p{color:var(--leise);font-size:.94rem}
.weg .knopfreihe{margin-top:auto;padding-top:var(--r2)}

/* -------------------------------------------------------------- Galerie */
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
  background:var(--haar);border:1px solid var(--haar)}
.galerie figure{margin:0;grid-column:span 12;position:relative;overflow:hidden;background:var(--papier)}
@media(min-width:700px){
  .galerie .g-4{grid-column:span 4}
  .galerie .g-6{grid-column:span 6}
  .galerie .g-8{grid-column:span 8}
  .galerie .g-12{grid-column:span 12}
}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .95s var(--weich)}
.galerie .g-6 img,.galerie .g-8 img{aspect-ratio:16/10}
.galerie .g-12 img{aspect-ratio:21/9}
.galerie figure:hover img{transform:scale(1.045)}
.galerie figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.95rem 1.1rem;color:#fff;
  background:linear-gradient(to top,rgba(13,26,19,.92),rgba(13,26,19,0));
  font-family:ui-monospace,monospace;font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.45;
  opacity:0;transform:translateY(8px);transition:opacity var(--mittel) ease,transform var(--mittel) var(--weich);
}
.galerie figure:hover figcaption,.galerie figure:focus-within figcaption{opacity:1;transform:none}
@media(hover:none){.galerie figcaption{opacity:1;transform:none}}

/* Filterleiste über der Galerie */
.filter{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--haar);
  margin-bottom:clamp(1.2rem,2.5vw,2rem);width:fit-content;max-width:100%}
.filter button{
  appearance:none;background:transparent;border:0;border-right:1px solid var(--haar);
  padding:.72rem 1.1rem;min-height:var(--griff);cursor:pointer;color:var(--leise);
  touch-action:manipulation;
  font-family:ui-monospace,monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  transition:background var(--kurz) ease,color var(--kurz) ease;
}
.filter button:last-child{border-right:0}
.filter button:hover{color:var(--ink)}
.filter button[aria-pressed="true"]{background:var(--ton);color:#fff}

/* --------------------------------------------------- Vorher/Nachher */
.schieber{position:relative;overflow:hidden;border:1px solid var(--haar);
  touch-action:pan-y;user-select:none;aspect-ratio:16/10}
.schieber img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.schieber__oben{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.schieber__griff{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
  background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(13,26,19,.25)}
.schieber__griff::after{
  content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);background:#fff;border:2px solid var(--ink);
}
.schieber__griff::before{
  content:"";position:absolute;top:50%;left:50%;z-index:1;width:16px;height:8px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(to right,var(--ink) 0 2px,transparent 2px 6px,var(--ink) 6px 8px) no-repeat left center/8px 8px,
    linear-gradient(to left,var(--ink) 0 2px,transparent 2px 6px,var(--ink) 6px 8px) no-repeat right center/8px 8px;
}
.schieber__marke{position:absolute;top:.8rem;padding:.35rem .7rem;background:rgba(13,26,19,.82);
  color:#fff;font-family:ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.schieber__marke--l{left:.8rem}
.schieber__marke--r{right:.8rem}
.schieber input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* --------------------------------------------------------- Frage/Antwort */
.fragen{border-top:2px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--haar)}
.fragen summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-weight:800;font-size:clamp(1rem,1.5vw,1.18rem);letter-spacing:-.02em;
  transition:color var(--kurz) ease;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--ton)}
.fragen summary::after,.fragen summary::before{
  content:"";position:absolute;right:.5rem;top:50%;background:var(--ton);
  transition:transform var(--mittel) var(--weich);
}
.fragen summary::after{width:16px;height:2px;transform:translateY(-50%)}
.fragen summary::before{width:2px;height:16px;right:1.4rem;transform:translateY(-50%)}
.fragen details[open] summary::before{transform:translateY(-50%) rotate(90deg)}
.fragen details>div{padding-bottom:1.5rem;max-width:70ch}
.fragen details p{color:var(--leise);margin-bottom:.8rem}
.fragen__suche{
  display:block;width:100%;padding:1rem 1.1rem;margin-bottom:1.5rem;
  border:2px solid var(--linie);background:var(--papier);
  font-size:.95rem;
}
.fragen__suche::placeholder{color:var(--leise)}
.fragen__leer{padding:1.5rem 0;color:var(--leise);font-size:.92rem}

/* ------------------------------------------------------------ Kontaktkarte */
.kontakt-karte{background:var(--papier);border:1px solid var(--haar);
  padding:clamp(1.4rem,2.5vw,2rem);display:flex;flex-direction:column;
  border-top:5px solid var(--eigen)}
/* Die Karte ist ein Spalten-Flex. Dessen Vorgabe „stretch" zieht das Bild auf
   die volle Kartenbreite, bei fester Hoehe wird das Logo dann platt gedrueckt.
   „align-self" stoppt das. Ein festes Feld statt fester Hoehe haelt ausserdem
   alle drei Ueberschriften auf einer Linie, obwohl die drei Logos sehr
   verschiedene Seitenverhaeltnisse haben (3,8:1 bis 1,4:1). */
.kontakt-karte__logo{
  align-self:flex-start;
  width:clamp(112px,62%,150px);height:52px;
  object-fit:contain;object-position:left center;
  margin-bottom:1.2rem}
.kontakt-karte h3{margin-bottom:1rem}
.kontakt-karte dl{margin:0 0 1.4rem;display:grid;grid-template-columns:auto 1fr;
  gap:.4rem 1.2rem;font-size:.89rem}
.kontakt-karte dt{font-family:ui-monospace,monospace;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leise);padding-top:.25em}
.kontakt-karte dd{margin:0}
/* Auf dunklem Grund trägt das normale Grau nicht, dort braucht es einen
   hellen Ton, sonst steht die Beschriftung bei 2,6:1 statt 4,5:1. */
.abschnitt--dunkel .kontakt-karte dt{color:rgba(255,255,255,.72)}
.abschnitt--dunkel .kontakt-karte dd a:hover{color:var(--ton-leucht)}
.kontakt-karte dd a:hover{color:var(--eigen)}
.kontakt-karte .knopfreihe{margin-top:auto}
.kontakt-karte .knopf{background:var(--eigen);border-color:var(--eigen)}
.kontakt-karte .knopf--linie{background:transparent;color:var(--ink);border-color:var(--ink)}

.kontaktband{display:grid;gap:var(--r2);align-items:center;
  border:1px solid rgba(255,255,255,.2);padding:clamp(1.3rem,2.5vw,2rem)}
@media(min-width:900px){.kontaktband{grid-template-columns:auto 1fr auto;gap:var(--r3)}}
.kontaktband__logo{height:38px;width:auto}
.kontaktband__logo--wappen{height:52px}
.kontaktband h3{margin-bottom:.4rem}

/* ------------------------------------------------------------- Aufruf */
.aufruf{display:grid;gap:var(--r2);align-items:center;
  border:2px solid var(--linie);padding:clamp(1.5rem,3vw,2.4rem)}
@media(min-width:860px){.aufruf{grid-template-columns:1fr auto;gap:var(--r4)}}
.aufruf h2{font-size:clamp(1.5rem,2.8vw,2.3rem);margin-bottom:.6rem;max-width:20ch}
.aufruf p{color:var(--leise);font-size:.94rem;margin:0;max-width:48ch}

/* -------------------------------------------------------------- Formulare */
.feld{display:grid;gap:.45rem}
.feld label{font-family:ui-monospace,monospace;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--leise)}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.92rem 1rem;background:var(--papier);color:var(--ink);
  border:2px solid var(--haar);border-radius:0;font-size:.98rem;
  transition:border-color var(--kurz) ease;
}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--leise)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:0;border-color:var(--ton)}
.feld textarea{resize:vertical;min-height:120px;line-height:1.6}
.feld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
/* Fehlerhafte Felder bekommen zusätzlich einen hellen Grund. Sonst hinge
   der Unterschied allein am Farbton, und auf der Immobilienseite ist die
   Bereichsfarbe selbst rot: Ein gerade angeklicktes Feld sähe dort fast
   aus wie ein falsch ausgefülltes. */
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{
  border-color:var(--warnung);background:#FDF2F1}
.feld__fehler{font-size:.78rem;color:var(--warnung);font-weight:600}

/* ---------------------------------------------------------- Einsatzgebiet
   Die Karte ist bewusst schematisch und als SVG eingebettet: eine echte
   Kartenkachel käme von einem fremden Server, würde die IP der Besucher
   dorthin schicken und damit ein Einwilligungsbanner nötig machen. */
.gebiet{display:grid;gap:var(--r3)}
@media(min-width:900px){
  .gebiet{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--r4);align-items:center}
}
/* Kartenrahmen. Das feste Seitenverhältnis reserviert den Platz, bevor die
   Karte da ist, damit beim Nachladen nichts springt. */
.karte{border:1px solid var(--haar);background:var(--papier)}
.karte__flaeche{position:relative;aspect-ratio:4/3;background:var(--papier-warm)}
.karte__flaeche>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:600px){.karte__flaeche{aspect-ratio:1/1}}
/* Die Karte auf der Startseite wirkte zu groß, daher flacher gesetzt. */
#einsatzgebiet .karte__flaeche{aspect-ratio:16/10}
@media(max-width:600px){#einsatzgebiet .karte__flaeche{aspect-ratio:4/3}}

/* KI-Kennzeichnung (Art. 50 KI-VO): sichtbar an der Darstellungsstelle der
   KI-generierten Bilder, dezent, nie klickblockierend. */
.medien-hinweis{
  position:absolute;z-index:2;margin:0;pointer-events:none;
  right:clamp(1rem,4vw,3.5rem);bottom:clamp(.9rem,2.4vw,1.5rem);
  padding:.22rem .55rem;
  background:rgba(9,17,12,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:rgba(255,255,255,.85);
  font-family:ui-monospace,monospace;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.3;
}
@media(max-width:860px){
  .hero .medien-hinweis{bottom:calc(var(--klebe-hoehe) + .5rem)}
}
/* In Karten sitzt der Hinweis oben rechts im Bild. */
.medien-hinweis--karte{right:.55rem;bottom:auto;top:.55rem}
.karte__bild{position:relative}

/* KI-Kennzeichnung als kleine „KI"-Marke: ein runder Knopf an der Bildstelle,
   führt ins Impressum zum Abschnitt „Bilder und künstliche Intelligenz".
   Der Wortlaut „KI" muss am Bild selbst lesbar sein (Art. 50 KI-VO:
   Kennzeichnung an der Darstellungsstelle, nicht erst nach einem Klick). */
/* Info-Zeichen für die teils mit KI erstellten Symbolbilder. Ein schlichtes
   „i", das ins Impressum führt. Es sitzt oben rechts, damit es sich unten
   nicht mit dem Rabatt-Knopf überschneidet, der dort schwebt. */
.ki-hinweis{
  position:absolute;z-index:3;
  top:calc(var(--kopf-hoehe) + .7rem);right:clamp(1rem,4vw,3.5rem);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;padding:0;border-radius:999px;
  background:rgba(9,17,12,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
  color:rgba(255,255,255,.92);
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:600;
  font-size:1.02rem;line-height:1;text-decoration:none;
}
.ki-hinweis:hover,.ki-hinweis:focus-visible{
  background:rgba(9,17,12,.85);border-color:#fff;color:#fff;
}
/* In Karten und Angeboten sitzt das „i" enger in der oberen rechten Ecke. */
.ki-hinweis--karte{right:.55rem;top:.55rem}

/* Datenschutz-Platzhalter der Karte (lädt Google erst auf Klick). */
.karte-consent{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;text-align:center;
  padding:clamp(1.2rem,3vw,2rem);background:var(--papier-warm);
}
.karte-consent__text{max-width:46ch;margin:0;color:var(--leise);font-size:.95rem;line-height:1.6}
.karte-consent__klein{margin:0;font-size:.82rem;color:var(--leise)}
.karte-consent__klein a{color:var(--ton);text-decoration:underline;text-underline-offset:2px}

/* Immobilien, Abschnitt „Was bei uns nichts kostet": die sieben Leistungen
   standen als eine lange, lose Spalte neben dem Bild. Jetzt kompakt in zwei
   Spalten und oben bündig mit dem Bild, das wirkt aufgeräumter. */
#verkaufen .textblock{align-items:start}
@media(min-width:760px){
  #verkaufen .haken{grid-template-columns:1fr 1fr;column-gap:1.8rem}
}
.karte__leiste{padding:.85rem 1rem;border-top:1px solid var(--haar);background:var(--papier-warm)}
.karte__hinweis{margin:0;font-size:.78rem;line-height:1.5;color:var(--leise)}
.karte__hinweis a{color:var(--ton);text-decoration:underline;text-underline-offset:2px}

.plz{border:1px solid var(--haar);background:var(--papier);padding:clamp(1.3rem,2.4vw,1.9rem)}
.plz__zeile{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch}
.plz__zeile .feld{flex:1 1 9ch;min-width:0}
.plz__zeile .knopf{flex:0 0 auto}
.plz__antwort{margin-top:1.1rem;font-size:.93rem;line-height:1.6;
  padding:.95rem 1.1rem;border-left:4px solid var(--haar);background:var(--papier-warm);
  color:var(--leise)}
.plz__antwort strong{color:var(--ink)}
.plz__antwort:empty{display:none}
.plz__antwort--ja{border-left-color:var(--gruen);background:var(--gruen-hell)}
.plz__antwort--offen{border-left-color:var(--blau);background:var(--blau-hell)}
.plz__antwort--frage{border-left-color:var(--haar)}
/* Weiterführende Links in der Antwort, wenn ein Ort nicht in der Liste steht. */
.plz__weiter{display:inline-block;margin-top:.35rem;color:var(--blau);
  font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* -------------------------------------------------------- Zwei Angebote
   Dachreinigung und Winterdienst nebeneinander, jedes auf einem eigenen
   Foto. Der Verlauf darüber ist kein Effekt, sondern Bedingung: ohne ihn
   stünde weiße Schrift auf hellem Himmel und wäre unlesbar. Er ist unten
   am dichtesten, weil dort der Text sitzt. */
/* Der Kopf gehört zu den Kacheln darunter, deshalb keine Trennlinie
   dazwischen und unten weniger Luft als oben. */
.angebote-kopf{border-bottom:0;padding-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.angebote-kopf__titel{max-width:22ch;margin-inline:auto;text-align:center}

.angebote{display:grid;gap:2px;background:var(--linie);border-bottom:2px solid var(--linie)}
@media(min-width:900px){.angebote{grid-template-columns:repeat(2,minmax(0,1fr))}}
.angebot{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(30rem,44vw,38rem);
  padding:clamp(1.8rem,3.6vw,3.2rem);
  color:#fff;background:var(--ink);
}
.angebot__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.angebot::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(6,12,9,.94) 8%,rgba(6,12,9,.86) 34%,rgba(6,12,9,.62) 62%,rgba(6,12,9,.32));
}
/* Der Bereichsname trägt hier mehr als sonst: Er sagt, worum es überhaupt
   geht, bevor die Schlagzeile das Argument bringt. Deshalb deutlich größer
   als der übliche Kicker. */
.angebot .kicker{
  font-size:clamp(1.3rem,2.1vw,1.75rem);letter-spacing:-.02em;
  margin-bottom:.5rem;text-shadow:0 2px 20px rgba(6,12,9,.6);
}
.angebot h2{
  font-size:clamp(2rem,3.7vw,3.2rem);max-width:16ch;line-height:1.02;
  margin-bottom:var(--r2);text-shadow:0 2px 24px rgba(6,12,9,.6);
}
.angebot h2 em{color:var(--ton-leucht)}
.angebot>p{color:rgba(255,255,255,.9);max-width:42ch;
  font-size:clamp(1.02rem,1.35vw,1.15rem);line-height:1.6}
.angebot .haken li{color:rgba(255,255,255,.9)}
.angebot .haken li::before{background:var(--ton-leucht)}
/* Kein margin-top:auto hier: zusammen mit justify-content:flex-end risse es
   den Block auseinander, Text oben, Knöpfe unten. Der Inhalt soll als
   Einheit unten stehen. */
.angebot .knopfreihe{padding-top:var(--r2)}

/* ------------------------------------------------------- Aktionsfenster
   Geht nach fünf Sekunden auf. Auf dem Rechner unten rechts, damit es die
   Seite nicht zudeckt; auf dem Handy als Blatt von unten, weil dort
   seitlich kein Platz ist. Der Schleier hebt es heraus, ohne dass das
   Fenster selbst laut werden muss. */
.werbung{position:fixed;inset:0;z-index:90}
.werbung[hidden]{display:none}
.werbung__schleier{
  position:absolute;inset:0;background:rgba(6,12,9,.6);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--mittel) ease;
}
.werbung.auf .werbung__schleier{opacity:1}
.werbung__kasten{
  position:absolute;right:clamp(1rem,2.4vw,2.4rem);bottom:clamp(1rem,2.4vw,2.4rem);
  width:min(25rem,calc(100vw - 2rem));
  background:var(--papier);border:1px solid var(--haar);
  box-shadow:0 34px 80px -34px rgba(6,12,9,.75);
  padding:clamp(1.5rem,2.6vw,2rem);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity var(--mittel) ease,transform var(--mittel) var(--weich);
}
.werbung.auf .werbung__kasten{opacity:1;transform:none}
/* Das Band ist ein <p> und lag damit unter der allgemeineren Regel
   „.werbung__kasten p" (dunkle Fließtextfarbe --leise), die es wegen höherer
   Spezifität überschrieb: „10 % Rabatt" erschien auf dem roten Grund dunkel
   statt weiß. Mit dem vorangestellten Kasten-Selektor gewinnt Weiß sicher, in
   jedem Zustand. Reine Stiländerung, die Funktion des Fensters bleibt. */
.werbung__kasten p.werbung__band{
  display:inline-block;background:var(--warnung);color:#fff;
  padding:.3rem .7rem;margin-bottom:.9rem;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.werbung__kasten h2{font-size:clamp(1.35rem,2vw,1.7rem);margin-bottom:.7rem}
.werbung__kasten p{color:var(--leise);font-size:.94rem;line-height:1.6;margin-bottom:var(--r2)}
.werbung__kasten .knopfreihe{gap:.6rem}
.werbung__kasten .knopf{flex:1 1 auto;padding-inline:1.1rem;font-size:.7rem}
.werbung__zu{
  position:absolute;top:.5rem;right:.5rem;
  width:var(--griff);height:var(--griff);display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--leise);
  font-size:1.5rem;line-height:1;
}
.werbung__zu:hover{color:var(--ink)}
/* Solange das Fenster offen ist, steht die Seite still. */
body.werbung-offen{overflow:hidden}

/* Der kleine Knopf, der nach dem Schließen bleibt. Die rote Zeile darüber
   ist der Grund, warum man ihn überhaupt noch einmal drückt. */
.werbung-knopf{
  position:fixed;right:clamp(1rem,2.4vw,2.4rem);bottom:clamp(1rem,2.4vw,2.4rem);
  z-index:80;display:flex;flex-direction:column;align-items:stretch;
  border:0;padding:0;background:none;cursor:pointer;text-align:center;
  box-shadow:0 20px 44px -22px rgba(6,12,9,.6);
}
.werbung-knopf[hidden]{display:none}
/* Am Fußbereich blendet der Knopf aus, damit er die Fußzeile nicht überdeckt.
   Kein display:none, sondern weich ausgeblendet und aus dem Tab-Fluss genommen. */
.werbung-knopf--weg{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  transition:opacity var(--mittel) ease,transform var(--mittel) var(--weich),visibility 0s linear var(--mittel);
}
.werbung-knopf__band{
  background:var(--warnung);color:#fff;padding:.34rem .9rem;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.werbung-knopf__text{
  background:var(--ink);color:#fff;padding:.66rem .9rem;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--kurz) ease;
}
.werbung-knopf:hover .werbung-knopf__text{background:#24382C}

/* Der Knopf meldet sich in Abständen kurz zu Wort: ein knappes Kippen,
   dann lange Ruhe. Die Bewegung steckt im Wackeln selbst, deshalb sind
   96 Prozent der Laufzeit Stillstand. Beim Überfahren hält er an, sonst
   zappelt etwas unter dem Zeiger, das man gerade treffen will. */
@keyframes werbung-wackeln{
  0%,92%,100%{transform:none}
  93%  {transform:rotate(-3deg) translateY(-2px)}
  94.5%{transform:rotate(3deg)  translateY(-2px)}
  96%  {transform:rotate(-2deg) translateY(-1px)}
  97.5%{transform:rotate(2deg)}
  99%  {transform:rotate(-1deg)}
}
.werbung-knopf{
  transform-origin:bottom right;
  animation:werbung-wackeln 9s ease-in-out 4s infinite;
}
.werbung-knopf:hover,.werbung-knopf:focus-visible{animation-play-state:paused}
/* Auf dem Handy sitzt unten die klebende Anrufleiste, sobald man die zweite
   Sektion hinter sich hat. Der Rabatt-Knopf rückt dann darüber, damit sich
   beide nicht überdecken. */
@media(max-width:860px){
  body.cta-frei .werbung-knopf{bottom:calc(var(--klebe-hoehe) + .6rem)}
}
/* Das rote Band pulst zwischen den Wackelrunden ganz leicht nach, damit
   der Knopf auch im Augenwinkel wahrgenommen wird. */
@keyframes werbung-band{
  0%,88%,100%{box-shadow:0 0 0 0 rgba(179,48,42,0)}
  92%{box-shadow:0 0 0 7px rgba(179,48,42,.28)}
  96%{box-shadow:0 0 0 12px rgba(179,48,42,0)}
}
.werbung-knopf__band{animation:werbung-band 9s ease-out 4s infinite}
/* Wer Bewegung abbestellt hat, bekommt sie nicht. */
@media(prefers-reduced-motion:reduce){
  .werbung-knopf,.werbung-knopf__band{animation:none}
}

@media(max-width:620px){
  .werbung__kasten{
    left:0;right:0;bottom:0;width:auto;
    border-inline:0;border-bottom:0;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  }
  .werbung__kasten .knopfreihe{flex-direction:column}
}
/* Unter 860 px liegt die Handyleiste fest am unteren Rand, der Knopf
   muss darüber ausweichen. */
@media(max-width:860px){
  .werbung-knopf{bottom:calc(56px + 1rem + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------ Kurzanfrage
   Unter dem Assistenten, für alles, was in keine der drei Türen passt:
   Winterdienst, Dachrinne, Hausmeisterdienst. Absichtlich nur drei Angaben. */
.kurzanfrage{margin-top:var(--r3);border:1px solid var(--haar);background:var(--papier);
  padding:clamp(1.4rem,2.6vw,2.1rem);display:grid;gap:var(--r3)}
@media(min-width:900px){
  .kurzanfrage{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--r4);align-items:start}
}
.kurzanfrage__form{display:grid;gap:1rem}
@media(min-width:640px){
  .kurzanfrage__form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kurzanfrage__breit,.kurzanfrage__form .honig,
  .kurzanfrage__form button,.kurzanfrage__form .formular__meldung{grid-column:1/-1}
}

.zustimmung{display:flex!important;gap:.75rem;align-items:flex-start;cursor:pointer;
  font-family:'Manrope',sans-serif!important;font-size:.85rem!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--leise)!important;line-height:1.55}
.zustimmung input{width:22px;height:22px;flex:0 0 22px;margin:.1rem 0 0;accent-color:var(--ton);
  border:2px solid var(--haar);padding:0}
.zustimmung a{color:var(--ton);text-decoration:underline;text-underline-offset:2px}

/* Honigtopf gegen Maschinen, für Menschen unsichtbar */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.zusicherung{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  font-family:ui-monospace,monospace;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--leise)}
.zusicherung li{padding-left:1.4rem;position:relative}
.zusicherung li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:2px;background:var(--ton)}

.formular__meldung{margin-top:1rem;padding:1rem 1.2rem;border-left:3px solid var(--ton);
  background:var(--ton-hell);font-size:.9rem}
.formular__meldung[data-art="fehler"]{border-left-color:var(--warnung);background:#FBEDEC}
/* Feldbezogene Fehlerzeile direkt unter dem betroffenen Eingabefeld. */
.feld__fehler{margin:.4rem 0 0;font-size:.8rem;line-height:1.4;color:var(--warnung)}
.abschnitt--dunkel .feld__fehler{color:#F2A69E}

.rueckruf{display:grid;gap:var(--r3)}
@media(min-width:900px){.rueckruf{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--r5);align-items:start}}
.rueckruf__form{display:grid;gap:1.1rem;border:2px solid var(--linie);padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--papier);position:relative}
.abschnitt--dunkel .rueckruf__form{border-color:rgba(255,255,255,.25)}

/* --------------------------------------------------------- Anfrage-Assistent
   Fragt sich vom Bereich über die Leistung bis zu den Details durch.
   Nennt keine Preise, er sammelt nur, was für ein Angebot gebraucht wird. */
.anfrage{border:2px solid var(--linie);background:var(--papier);position:relative;overflow:hidden}
.anfrage__balken{height:4px;background:var(--haar);position:relative}
.anfrage__balken i{position:absolute;inset:0 auto 0 0;background:var(--ton);width:0;
  transition:width .45s var(--weich)}
.anfrage__kopf{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,3vw,2.2rem);border-bottom:1px solid var(--haar)}
.anfrage__schritt{font-family:ui-monospace,monospace;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise)}
.anfrage__zurueck{appearance:none;background:transparent;border:0;cursor:pointer;padding:.3rem 0;
  display:inline-flex;align-items:center;gap:.45rem;color:var(--ton);
  font-weight:800;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}
.anfrage__zurueck[hidden]{display:none}
.anfrage__leib{padding:clamp(1.4rem,3.5vw,2.6rem)}
.anfrage__frage{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.08;text-transform:uppercase;margin:0 0 .6rem;max-width:22ch}
.anfrage__hilfe{color:var(--leise);font-size:1.02rem;margin:0 0 var(--r3)}

.wahl{display:grid;gap:1px;background:var(--haar);border:1px solid var(--haar);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.wahl button{
  appearance:none;background:var(--papier);border:0;cursor:pointer;text-align:left;
  padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.3rem;min-height:64px;
  transition:background var(--kurz) ease,color var(--kurz) ease;
}
.wahl button:hover{background:var(--ton-hell)}
.wahl button[aria-pressed="true"]{background:var(--ton);color:#fff}
.wahl button[aria-pressed="true"] small{color:rgba(255,255,255,.8)}
.wahl b{font-weight:800;font-size:.96rem;letter-spacing:-.015em}
.wahl small{font-size:.8rem;color:var(--leise);line-height:1.45}

.anfrage__fuss{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1.2rem clamp(1.2rem,3vw,2.2rem);border-top:1px solid var(--haar);background:var(--papier-warm)}

/* Zusammenfassung im letzten Schritt */
.pruefen{border:1px solid var(--haar);margin-bottom:var(--r3)}
.pruefen__zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--haar);font-size:.9rem}
@media(min-width:600px){.pruefen__zeile{grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1.2rem}}
.pruefen__zeile:last-child{border-bottom:0}
.pruefen__zeile dt{font-family:ui-monospace,monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);margin:0;padding-top:.25em}
.pruefen__zeile dd{margin:0;font-weight:600}

.anfrage__fertig{text-align:center;padding:clamp(2rem,5vw,3.5rem) clamp(1.2rem,3vw,2.2rem)}
.anfrage__fertig svg{margin:0 auto var(--r2);color:var(--ton)}
.anfrage__fertig h3{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:.8rem}
.anfrage__fertig p{color:var(--leise);max-width:46ch;margin-inline:auto}

/* -------------------------------------------------------------- Fenster */
.fenster{
  position:fixed;inset:0;z-index:120;display:none;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(13,26,19,.82);
}
.fenster[open],.fenster.auf{display:grid}
.fenster__blatt{position:relative;background:var(--papier);width:min(760px,100%);
  max-height:88vh;overflow-y:auto;border:2px solid var(--linie)}
.fenster__zu{position:absolute;top:0;right:0;width:52px;height:52px;z-index:2;
  background:var(--ink);color:#fff;border:0;cursor:pointer;display:grid;place-items:center}
.fenster__bild img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fenster__text{padding:clamp(1.4rem,3vw,2.2rem)}
.fenster__text h3{font-size:clamp(1.3rem,2.5vw,1.85rem);margin-bottom:.9rem}
.fenster__text p{color:var(--leise)}

/* ---------------------------------------------------------- Objektliste */
.objekte{display:grid;gap:1px;background:var(--haar);border:1px solid var(--haar);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.objekt{background:var(--papier);display:flex;flex-direction:column}
.objekt__bild{aspect-ratio:3/2;overflow:hidden;position:relative;background:var(--papier-warm)}
.objekt__bild img{width:100%;height:100%;object-fit:cover}
.objekt__status{position:absolute;top:0;left:0;padding:.4rem .8rem;background:var(--ton);color:#fff;
  font-family:ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.objekt__text{padding:1.3rem 1.35rem 1.5rem;flex:1;display:flex;flex-direction:column}
.objekt dl{margin:.9rem 0 1.3rem;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.85rem}
.objekt dt{font-family:ui-monospace,monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);padding-top:.3em}
.objekt dd{margin:0;font-weight:700}
.objekt .textlink{margin-top:auto}

.objekte-hinweis{border:2px dashed var(--haar);padding:clamp(2rem,4vw,3.2rem);text-align:center}
.objekte-hinweis p{margin-inline:auto;margin-bottom:var(--r3)}
.objekte-hinweis .knopfreihe{justify-content:center}

/* ------------------------------------------------------------ Rechtstext */
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(1.15rem,2vw,1.5rem);margin:var(--r4) 0 var(--r2);
  padding-top:var(--r2);border-top:2px solid var(--linie)}
.rechtstext h2:first-child{margin-top:0;border-top:0;padding-top:0}
.rechtstext h3{font-size:1rem;margin:var(--r3) 0 .5rem}
.rechtstext p{color:var(--leise);margin-bottom:var(--r2)}
.rechtstext a{color:var(--ton);text-decoration:underline;text-underline-offset:2px}
.luecke{display:inline-block;border:2px dashed var(--warnung);color:var(--warnung);
  padding:.1rem .5rem;font-weight:700;font-size:.85em}

/* -------------------------------------------------------------- Textblock */
.textblock{display:grid;gap:var(--r3)}
@media(min-width:900px){.textblock{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--r5);align-items:center}}
.textblock__medium{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--papier-warm);
  border:1px solid var(--haar)}
.textblock__medium img,.textblock__medium video{width:100%;height:100%;object-fit:cover}

/* Markenzeichen über der Einleitung einer Unterseite. Festes Feld statt
   fester Höhe: Die drei Logos haben sehr verschiedene Seitenverhältnisse
   (3,8:1 bis 1,4:1) und säßen sonst optisch unterschiedlich schwer. */
.markenlogo{
  width:clamp(150px,17vw,205px);height:clamp(56px,6.2vw,74px);
  object-fit:contain;object-position:left center;
  margin-bottom:var(--r2);
}

/* -------------------------------------------------------------- Laufband */
.band{background:var(--ink);color:rgba(255,255,255,.5);overflow:hidden;
  padding-block:.85rem;border-bottom:2px solid var(--ink)}
.band__spur{display:flex;gap:2.5rem;width:max-content;animation:lauf 42s linear infinite}
.band__spur span{font-family:ui-monospace,monospace;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:2.5rem}
.band__spur span::after{content:"";width:5px;height:5px;background:var(--gruen-leucht)}
@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none;flex-wrap:wrap;width:auto}}