/* ==========================================================================
   WEGNER BEDACHUNGSUNTERNEHMEN GMBH, Bausteine
   Kopfbild, Zahlenband, Leistungskarten, Anfrage-Fenster, Ergebnisse,
   Ablauf, Formulare, Fragen, Kontakt.
   Grundlagen stehen in basis.css.

   Farbregel: Rot nur auf Knoepfen, in einem hervorgehobenen Wort und bei
   Fehlern. Alles andere ist Anthrazit, Weiss und Grau.
   ========================================================================== */

/* --------------------------------------------------------------- Kopfbild */
.hero{
  position:relative;min-height:min(92vh,880px);
  display:flex;align-items:stretch;
  /* Unten bewusst wenig Luft, damit der Textblock tief steht. Die
     Merkmalzeile, die frueher darunter lag, ist entfallen. */
  padding-block:calc(var(--kopf-hoehe) + 1rem) clamp(2.2rem,4vw,3.4rem);
  background:var(--anthrazit);overflow:hidden;
}
.hero__bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.58;
}
/* Zwei Verlaeufe: einer von unten fuer den Text, einer von links fuer die
   Ruhe hinter der Ueberschrift. Zusammen bleibt das Foto lesbar, ohne dass
   ein grauer Schleier ueber dem ganzen Bild liegt. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,10,12,.95) 0%,rgba(8,10,12,.6) 46%,rgba(8,10,12,.14) 80%),
    linear-gradient(to right,rgba(8,10,12,.74) 0%,rgba(8,10,12,0) 66%);
}
/* Der Kopfbereich haengt bewusst NICHT am zentrierten Inhaltsraster.
   Das Raster ist auf 1240 Pixel begrenzt und mittig gesetzt, auf einem
   breiten Bildschirm stuende die Ueberschrift dadurch mehrere hundert Pixel
   vom Rand entfernt. Hier zaehlt stattdessen ein eigener, kleiner Abstand
   zum Fensterrand: deutlich links, aber nie buendig an der Kante.
   Die Zeilenlaenge begrenzen h1 und .hero__unter ueber ihre ch-Masse. */
.hero__innen{
  position:relative;z-index:2;color:#fff;
  width:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-inline:clamp(1.25rem,3vw,4rem);
}
.hero h1{color:#fff;max-width:19ch}
.hero__unter{
  font-size:clamp(1.08rem,1.7vw,1.36rem);line-height:1.55;
  color:#D5D9DD;max-width:54ch;margin-top:1.5rem;
}
/* Platz fuer das grosse Logo ueber dem Vorspann. Das Bild selbst liegt in der
   Kopfleiste (siehe basis.css, Startseite) und wird hierher projiziert. Ohne
   JavaScript entfaellt der Platz, das Logo bleibt dann klein in der Leiste. */
.hero__marke{display:none}
.js .hero__marke{
  display:block;height:var(--logo-gross);aspect-ratio:2/1;
  /* Mittig im freien Raum zwischen Leiste und Vorspann, dank auto-Raendern
     im Spaltenflex. Wird der Raum knapp (Handy), rueckt es unter die Leiste. */
  margin-block:auto;
}
.js .hero .hero__vorspann{padding-top:clamp(1.2rem,3vw,2rem)}

/* Vorspann als schlichte Druckschrift, ohne Kasten und ohne Punkt davor. */
.hero__vorspann{
  display:block;margin-bottom:1.5rem;
  font-family:'Archivo',sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#B9C0C6;
}
.hero .knopfreihe{margin-top:2.4rem}

/* Kopfbereich der Unterseiten, ohne Foto */
.seitenkopf{
  background:var(--anthrazit);color:#fff;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem);
}
.seitenkopf h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:20ch}
.seitenkopf .lead{color:#B7BEC5;margin-top:1.2rem}
.brotkrumen{
  display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:#AEB6BD;
  margin-bottom:1.4rem;
}
.brotkrumen a{text-decoration:underline;text-underline-offset:3px}
.brotkrumen a:hover{color:#fff}
.brotkrumen span{color:#939BA2}

/* ------------------------------------------------------------- Zahlenband
   Bewusst kein Raster aus vier gleichen Kaesten. Links ein Aufmacher, der
   die aelteste und staerkste Angabe gross setzt, rechts drei Zeilen an
   Haarlinien. Alles linksbuendig. Das liest sich wie eine Zeitungsspalte
   und nicht wie eine Kachelwand. */
.band{background:var(--papier-kuehl);border-block:1px solid var(--haar)}
.band__raster{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.6rem,4vw,4.5rem);
  padding-block:clamp(2rem,4vw,3.2rem);
}
@media(max-width:820px){
  .band__raster{grid-template-columns:1fr;gap:1.8rem}
}

/* Die Zeichen sind erzeugte SVG, siehe MASTERPROMPT Abschnitt 6. */
.band__aufmacher img{
  display:block;width:clamp(38px,4.4vw,52px);height:auto;margin-bottom:1rem;
}
.band__gross{
  margin:0 0 .55rem;color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:800;font-stretch:104%;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:.98;letter-spacing:-.022em;
}
.band__aufmacher p:last-child{margin:0;max-width:32ch}

.band__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--haar)}
.band__liste li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.9rem,1.6vw,1.3rem);align-items:start;
  padding:clamp(.85rem,1.6vw,1.15rem) 0;
  border-bottom:1px solid var(--haar);
}
.band__liste img{width:28px;height:28px;margin-top:.1rem;flex:none}
.band__liste strong{
  display:block;margin-bottom:.12rem;color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:1.03rem;
}
.band__text{display:block;font-size:.92rem;color:var(--leise);line-height:1.5}

/* Zeile unter den Leistungskacheln. Drei bestaetigte Leistungen, die keine
   eigene Kachel bekommen, weil sechs Kacheln die richtige Zahl sind. Der
   Kasten hebt sie trotzdem aus dem Fliesstext heraus. */
.weiteres{
  margin-top:1.5rem;padding:.95rem 1.2rem;
  background:var(--papier-kuehl);border-left:3px solid var(--anthrazit);
  font-size:.96rem;line-height:1.55;color:var(--leise);max-width:78ch;
}
.weiteres strong{color:var(--ink)}
.abschnitt--kuehl .weiteres{background:#fff}

/* ------------------------------------------------------ Leistungskarten */
.karten{
  display:grid;gap:1px;background:var(--haar);
  border:1px solid var(--haar);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1000px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.karten{grid-template-columns:1fr}}

/* Bei sieben Karten bliebe in der letzten Reihe eine allein stehen und die
   grauen Fugenflaechen wuerden daneben durchscheinen. Die letzte Karte nimmt
   deshalb die ganze Reihe ein, wenn sie sonst allein staende. */
@media(min-width:1001px){
  .karten .karte:last-child:nth-child(3n+1){grid-column:1/-1}
}
@media(min-width:661px) and (max-width:1000px){
  .karten .karte:last-child:nth-child(2n+1){grid-column:1/-1}
}

.karte{
  background:var(--papier);padding:clamp(1.6rem,2.6vw,2.2rem);
  display:flex;flex-direction:column;
  position:relative;transition:background var(--mittel);
}
.karte:hover{background:var(--papier-kuehl)}
.karte__zeichen{
  width:50px;height:50px;display:grid;place-items:center;flex:none;
  background:var(--papier-kuehl);color:var(--ink);margin-bottom:1.3rem;
  border:1px solid var(--haar);
  transition:background var(--mittel),color var(--mittel),border-color var(--mittel);
}
.karte:hover .karte__zeichen{background:var(--anthrazit);color:#fff;border-color:var(--anthrazit)}
.karte__zeichen svg{width:25px;height:25px}
.karte h3{margin-bottom:.6rem}
.karte p{font-size:.96rem;color:var(--leise);margin-bottom:1.4rem}

/* Der Knopf in der Karte oeffnet das Anfrage-Fenster. Ohne JavaScript ist
   es ein gewoehnlicher Sprung zum Kontaktformular. */
.karte__anfrage{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.55rem;min-height:var(--griff);
  padding:.7rem 1.15rem;background:var(--rot);color:#fff;border:2px solid var(--rot);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:background var(--kurz),border-color var(--kurz);
}
.karte__anfrage:hover{background:var(--rot-tief);border-color:var(--rot-tief)}
.karte__anfrage svg{width:16px;height:16px;transition:transform var(--kurz)}
.karte__anfrage:hover svg{transform:translateX(4px)}

.raster-2{display:grid;gap:1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.raster-3{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.raster-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.raster-2{grid-template-columns:1fr}}
@media(max-width:660px){.raster-3{grid-template-columns:1fr}}

/* ------------------------------------------------- Anfrage-Fenster (Dialog)
   Ein eigenes Fenster je Leistung. Das native dialog-Element bringt
   Tastenbedienung, Fokusfang und Hintergrundabdunklung mit. Faellt
   JavaScript aus, bleibt der Inhalt verborgen und die Karten springen
   stattdessen zum Formular. */
dialog:not([open]){display:none}
.fenster{
  width:min(100% - 2rem,660px);max-height:min(86dvh,860px);
  padding:0;border:none;background:var(--papier);color:var(--ink);
  box-shadow:0 30px 80px rgba(8,10,12,.4);
  overflow:hidden;
}
.fenster::backdrop{background:rgba(8,10,12,.72);backdrop-filter:blur(3px)}
.fenster__kopf{
  display:flex;align-items:flex-start;gap:1.5rem;
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.4rem,3vw,2.2rem) 0;
}
.fenster__kopf h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0}
.fenster__zu{
  margin-left:auto;flex:none;width:40px;height:40px;
  display:grid;place-items:center;cursor:pointer;
  background:var(--papier-kuehl);border:1px solid var(--haar);color:var(--ink);
  transition:background var(--kurz),color var(--kurz);
}
.fenster__zu:hover{background:var(--anthrazit);color:#fff;border-color:var(--anthrazit)}
.fenster__zu svg{width:18px;height:18px}
.fenster__inhalt{
  padding:1.2rem clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2rem);
  overflow-y:auto;max-height:calc(min(86dvh,860px) - 190px);
}
.fenster__inhalt p{font-size:.98rem;color:var(--leise)}
.fenster__inhalt .haken{margin-top:1.5rem;gap:.9rem}

/* Bild oben im Fenster, damit es nicht nur Text ist. */
.fenster__bild{
  margin:0 0 1.3rem;aspect-ratio:16/7;overflow:hidden;background:var(--papier-kuehl);
}
.fenster__bild img{width:100%;height:100%;object-fit:cover;display:block}

/* Haken im Fenster deutlicher: rote Scheibe mit weissem Haken statt
   duennem Strich. Das ist die einzige Stelle ausserhalb der Knoepfe, an der
   Rot als Flaeche vorkommt, und zwar auf ausdruecklichen Wunsch. */
.haken--stark li{gap:.85rem}
.haken--stark .zeichen{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--rot);color:#fff;display:grid;place-items:center;margin-top:.1rem;
}
.haken--stark .zeichen svg{width:15px;height:15px;color:#fff}
.haken--stark strong{font-size:1rem;margin-bottom:.2rem}
.haken--stark span{font-size:.95rem}
.fenster__fuss{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
  padding:1.1rem clamp(1.4rem,3vw,2.2rem);
  background:var(--papier-kuehl);border-top:1px solid var(--haar);
}
.fenster__fuss .klein{margin-left:auto}
@media(max-width:560px){.fenster__fuss .klein{margin-left:0;width:100%}}

/* ------------------------------------------------------------ Ergebnisse
   Nur fertige Daecher. Kein Regler, keine Baustellenzwischenstaende. */
.ergebnisse{
  display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1000px){.ergebnisse{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.ergebnisse{grid-template-columns:1fr}}

.ergebnis{margin:0;position:relative;overflow:hidden;background:#0F1214}
.ergebnis img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .9s var(--weich),opacity var(--mittel);
}
.ergebnis:hover img{transform:scale(1.04)}
.ergebnis figcaption{
  position:absolute;inset:auto 0 0;padding:2.4rem 1.2rem 1.1rem;
  background:linear-gradient(to top,rgba(8,10,12,.92),rgba(8,10,12,0));
  color:#fff;
}
.ergebnis figcaption strong{
  display:block;font-family:'Archivo',sans-serif;font-size:1.02rem;font-weight:700;
}
.ergebnis figcaption span{
  display:block;font-size:.85rem;color:#B9C0C6;margin-top:.15rem;
}

/* Ein einziges Vorher und Nachher, nebeneinander statt mit Regler. */
.paar{display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}
@media(max-width:760px){.paar{grid-template-columns:1fr}}
.paar figure{margin:0;position:relative}
/* Beide Bilder liegen als 16:9 vor und zeigen das Haus gleich gross. Der
   Ausschnitt des Vorher-Bildes ist in der Bilddatei selbst gesetzt, siehe
   werkzeuge/bilder.py. Frueher stand hier ein transform:scale, das den Zoom
   nur vorgetaeuscht und die beiden Kaesten unterschiedlich hoch gemacht hat. */
.paar img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.paar figcaption{
  position:absolute;top:0;left:0;
  padding:.42rem .9rem;
  font-family:'Archivo',sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.paar .ist-vorher figcaption{background:rgba(8,10,12,.82);color:#fff}
.paar .ist-nachher figcaption{background:#fff;color:var(--anthrazit)}

/* ------------------------------------------------------------------ Ablauf */
.ablauf{
  display:grid;gap:1px;background:var(--haar);border:1px solid var(--haar);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  counter-reset:schritt;
}
.schritt{
  background:var(--papier);padding:clamp(1.6rem,2.6vw,2.2rem);
  position:relative;counter-increment:schritt;
}
/* Einstellige Ziffern, nicht 01 bis 04. Vier Schritte sind kein Kapitelwerk. */
.schritt::before{
  content:counter(schritt);
  display:grid;place-items:center;
  width:46px;height:46px;margin-bottom:1.1rem;
  background:var(--anthrazit);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:750;
  font-size:1.5rem;line-height:1;font-stretch:96%;
}
.schritt h3{font-size:1.15rem;margin-bottom:.5rem}
.schritt p{font-size:.94rem;color:var(--leise);margin:0}
.abschnitt--dunkel .ablauf{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.13)}
.abschnitt--dunkel .schritt{background:var(--anthrazit)}
.abschnitt--dunkel .schritt::before{background:#fff;color:var(--anthrazit)}
.abschnitt--dunkel .schritt p{color:#AEB6BD}

/* Handlungsaufruf am Fuss eines Abschnitts, mittig und ruhig gesetzt. */
.abschluss{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--haar);
  display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;
}
.abschluss p{
  margin:0;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.25;max-width:34ch;
}
.abschluss .knopfreihe{margin:0 0 0 auto}
@media(max-width:700px){.abschluss .knopfreihe{margin-left:0}}
.abschnitt--dunkel .abschluss,.auf-dunkel .abschluss{border-top-color:rgba(255,255,255,.16)}

/* --------------------------------------------------------- Text und Bild */
.duo{
  display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.duo--breit-links{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
/* Bild deutlich groesser als der Text daneben. */
.duo--bild-gross{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media(max-width:900px){.duo,.duo--breit-links,.duo--bild-gross{grid-template-columns:1fr}}
.duo__bild{position:relative}
.duo__bild img{width:100%;object-fit:cover}
.duo__notiz{
  position:absolute;right:-1rem;bottom:-1rem;max-width:280px;
  background:var(--anthrazit);color:#fff;padding:1.2rem 1.35rem;
}
.duo__notiz p{font-size:.94rem;line-height:1.5;margin:0;color:#C7CDD2}
.duo__notiz strong{
  display:block;font-family:'Archivo',sans-serif;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4rem;color:#fff;
}
@media(max-width:560px){.duo__notiz{position:static;max-width:none;margin-top:1rem}}

/* Hakenliste */
.haken{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1.1rem}
.haken li{display:flex;gap:.9rem;align-items:flex-start}
.haken svg{width:21px;height:21px;flex:none;margin-top:.2rem;color:var(--ink)}
.haken strong{display:block;font-weight:700;margin-bottom:.15rem}
.haken span{font-size:.96rem;color:var(--leise);line-height:1.5}
.abschnitt--dunkel .haken svg,.auf-dunkel .haken svg{color:#fff}
.abschnitt--dunkel .haken span,.auf-dunkel .haken span{color:#AEB6BD}

/* Kleine Kennzeichnung ueber einer Ueberschrift. Bewusst nur dort, wo ein
   Abschnitt sich an eine andere Zielgruppe richtet als der Rest der Seite,
   derzeit also nur bei der Karriere. */
.abschnitt-label{
  display:block;margin-bottom:.9rem;
  font-family:'Archivo',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--leise);
}
.auf-dunkel .abschnitt-label,.abschnitt--dunkel .abschnitt-label{color:#AEB6BD}
.seitenkopf .abschnitt-label{color:#AEB6BD}

/* ------------------------------------------------------------ Kundenstimme
   Nur echte, nachweisbare Zitate. Die Quelle steht immer dabei, sonst ist es
   wertlos und im Zweifel abmahnfaehig. */
.stimmen{
  display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2rem,4vw,3rem);
}
@media(max-width:900px){.stimmen{grid-template-columns:1fr}}
.stimme{
  margin:0;padding:1.3rem 1.4rem;display:flex;flex-direction:column;
  background:var(--papier);border:1px solid var(--haar);
  border-top:4px solid var(--anthrazit);
}
.stimme p{
  margin:0;font-size:.98rem;line-height:1.5;color:var(--ink);
}
.stimme cite{
  display:block;margin-top:auto;padding-top:.9rem;font-style:normal;
  font-size:.82rem;color:var(--leise);
}
.stimme .sterne{
  display:block;margin-bottom:.7rem;color:var(--rot);
  font-size:.95rem;letter-spacing:.14em;
}

/* --------------------------------------------------------------- Formular */
.formular{background:var(--papier);border:1px solid var(--haar);padding:clamp(1.4rem,2.6vw,2rem)}
.feldreihe{display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:379px){.feldreihe{grid-template-columns:1fr}}
/* Felder duerfen ihre Spalte nicht aufweiten. */
.feld{min-width:0}
.feld input,.feld select,.feld textarea{width:100%;max-width:100%;min-width:0}

}
.feld{display:flex;flex-direction:column;gap:.3rem}
.feld--voll{grid-column:1/-1}
.feld label{font-size:.86rem;font-weight:700}
.feld .hinweis{font-size:.8rem;color:var(--leise);font-weight:400}
.feld input,.feld select,.feld textarea{
  min-height:var(--griff);padding:.8rem .9rem;
  background:var(--papier);border:1px solid var(--haar);border-radius:0;
  transition:border-color var(--kurz),box-shadow var(--kurz);
}
.feld textarea{min-height:84px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--anthrazit);box-shadow:0 0 0 3px rgba(21,24,27,.12);outline:none;
}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:var(--warnung)}
/* Ohne feste Mindesthoehe. Fuenf leere Fehlerzeilen machten das Formular
   sonst rund neunzig Pixel laenger als noetig. */
.feld .fehler{font-size:.82rem;color:var(--warnung);font-weight:600}
.feld .fehler:not(:empty){margin-top:.15rem}

/* Auswahl als Kacheln, angenehmer zu treffen als ein Auswahlfeld */
.wahl{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.wahl label{
  display:flex;align-items:center;gap:.7rem;
  padding:.9rem 1rem;border:1px solid var(--haar);cursor:pointer;
  font-size:.94rem;font-weight:600;min-height:var(--griff);
  transition:border-color var(--kurz),background var(--kurz);
}
.wahl label:hover{border-color:var(--anthrazit)}
.wahl input{accent-color:var(--anthrazit);width:19px;height:19px;flex:none;min-height:0}
.wahl label:has(input:checked){border-color:var(--anthrazit);background:var(--papier-kuehl)}

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

.formular__fuss{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--haar);
}
.melder{margin-top:1rem;font-size:.92rem;font-weight:600}
.melder:empty{margin:0}
.melder[data-art="fehler"]{color:var(--warnung)}
.melder[data-art="gut"]{color:var(--erfolg)}

/* Gruppe im Formular, zum Beispiel die Auswahl der Leistung */
.feldsatz{border:0;padding:0;margin:0 0 1.4rem}
.feldsatz legend{
  padding:0;margin-bottom:.7rem;
  font-size:.86rem;font-weight:700;
}

/* Ein einzelnes Kaestchen, hier fuer den Rueckrufwunsch */
.wahl-einzeln{
  display:flex;align-items:flex-start;gap:.7rem;margin-top:.85rem;
  padding:.7rem .9rem;border:1px solid var(--haar);cursor:pointer;
  font-size:.92rem;line-height:1.4;
}
.wahl-einzeln:hover{border-color:var(--anthrazit)}
.wahl-einzeln input{accent-color:var(--rot);width:19px;height:19px;flex:none;margin-top:.15rem}
.wahl-einzeln:has(input:checked){border-color:var(--rot);background:var(--rot-hauch)}

/* Das Anfragefenster ist breiter, es traegt das ganze Formular. */
/* Das Anfragefenster ist zweiteilig: links die Tafel mit dem Formular,
   rechts eine Kundenstimme, die mit kurzer Verzoegerung einschwebt. Der
   dialog selbst ist dafuer nur noch die Klammer und traegt keine Flaeche
   mehr, die Flaeche liegt auf der Tafel. */
.fenster--breit{
  width:min(100% - 2rem,1120px);max-height:min(94dvh,940px);
  background:transparent;box-shadow:none;overflow:visible;
  display:flex;align-items:flex-start;gap:1rem;
}
.fenster__tafel{
  flex:1 1 720px;min-width:0;
  display:flex;flex-direction:column;
  max-height:min(94dvh,940px);overflow:hidden;
  background:var(--papier);box-shadow:0 30px 80px rgba(8,10,12,.4);
}
/* Statt einer gerechneten Hoehe darf der Inhalt jetzt selbst schrumpfen.
   Das trifft die verfuegbare Hoehe immer, egal wie hoch Kopf und Fuss sind. */
.fenster--breit .fenster__inhalt{padding:0;overflow-y:auto;min-height:0;max-height:none}

.fenster__stimme{
  flex:0 0 clamp(210px,21vw,272px);
  background:var(--anthrazit);color:#fff;
  padding:1.25rem 1.35rem;
  box-shadow:0 30px 80px rgba(8,10,12,.4);
}
@media(prefers-reduced-motion:no-preference){
  .fenster__stimme{animation:stimme-rein .55s .2s both cubic-bezier(.2,.75,.3,1)}
}
@keyframes stimme-rein{
  from{opacity:0;transform:translateX(-22px) scale(.97)}
  to{opacity:1;transform:none}
}
.fenster__stimme .sterne{
  display:block;margin-bottom:.6rem;color:#fff;
  font-size:.9rem;letter-spacing:.14em;
}
.fenster__stimme p{
  margin:0;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:1rem;line-height:1.42;color:#fff;
}
.fenster__stimme cite{
  display:block;margin-top:.85rem;font-style:normal;
  font-size:.78rem;color:#AEB6BD;
}

/* Auf dem Telefon steht die Stimme schmal unter der Tafel und schwebt von
   unten ein. Kopf, Fuss und Stimme sind dort deutlich flacher, damit vom
   Formular so viel wie moeglich ohne Scrollen zu sehen ist. */
@media(max-width:900px){
  .fenster--breit{
    flex-direction:column;gap:.55rem;
    width:min(100% - 1rem,600px);
  }
  .fenster__tafel{flex:0 1 auto;width:100%;max-height:none}
  .fenster__stimme{flex:none;width:100%;padding:.75rem .95rem}
  .fenster__stimme .sterne{
    display:inline;margin:0 .5rem 0 0;font-size:.8rem;vertical-align:.05em;
  }
  .fenster__stimme p{display:inline;font-size:.86rem;font-weight:500}
  .fenster__stimme cite{margin-top:.35rem;font-size:.72rem}
}
@media(prefers-reduced-motion:no-preference) and (max-width:900px){
  .fenster__stimme{animation-name:stimme-rein-unten}
}
@keyframes stimme-rein-unten{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.fenster--breit .formular{border:none;padding:clamp(1.2rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem)}
.fenster__kopf .klein{color:var(--leise)}

/* ----------------------------------------------------------------- Fragen */
.fragen{border-top:1px solid var(--haar)}
.frage{border-bottom:1px solid var(--haar)}
.frage summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 0;cursor:pointer;list-style:none;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;
  min-height:var(--griff);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";flex:none;width:13px;height:13px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform var(--mittel) var(--weich);
}
.frage[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.frage summary:hover{color:var(--rot)}
.frage__text{padding:0 0 1.4rem;max-width:78ch;color:var(--leise)}

/* ---------------------------------------------------------------- Kontakt */
.kontakt-raster{display:grid;gap:2rem;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media(max-width:900px){.kontakt-raster{grid-template-columns:1fr}}

/* Die dunkle Karte bleibt bewusst knapp. Sie soll neben dem Formular
   stehen, nicht darunter hinauslaufen. */
.kontaktkarte{
  background:var(--anthrazit);color:#fff;padding:clamp(1.4rem,2.4vw,1.9rem);
  align-self:start;
}
.kontaktkarte h3{color:#fff;font-size:1.2rem;margin-bottom:.4rem}
.kontaktkarte .lead{color:#AEB6BD;font-size:.95rem}
.kontaktzeilen{display:grid;gap:0;margin:1.2rem 0}
.kontaktzeile{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.7rem 0;border-top:1px solid rgba(255,255,255,.13);
}
.kontaktzeile strong{font-size:.98rem}
.kontaktzeile small{font-size:.8rem}
.kontaktzeile svg{width:21px;height:21px;flex:none;color:#fff;margin-top:.15rem}
.kontaktzeile strong{display:block;font-size:1.05rem;font-weight:700}
.kontaktzeile small{display:block;font-size:.85rem;color:#9BA3AA;margin-top:.1rem}
a.kontaktzeile:hover strong{color:var(--rot-leucht)}

/* Karte als Zwei-Klick-Loesung. Ohne Zutun laedt nichts von fremden Hosts. */
.karten-platz{
  position:relative;aspect-ratio:16/10;background:var(--papier-kuehl);
  border:1px solid var(--haar);display:grid;place-items:center;text-align:center;
  padding:2rem;overflow:hidden;
}
.karten-platz__gitter{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--haar) 1px,transparent 1px),
                   linear-gradient(90deg,var(--haar) 1px,transparent 1px);
  background-size:38px 38px;
}
.karten-platz__innen{position:relative;max-width:44ch}
.karten-platz iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ------------------------------------------------------------ Aufruf-Band
   Frueher eine vollflaechig rote Flaeche. Das war zu laut, jetzt traegt
   Anthrazit die Flaeche und der Knopf allein das Rot. */
.aufruf{background:var(--anthrazit);color:#fff;padding-block:clamp(3rem,6vw,4.5rem)}
.aufruf h2{color:#fff;max-width:20ch}
.aufruf p{color:#B4BBC1;max-width:56ch;font-size:1.06rem}
.aufruf__innen{
  display:grid;gap:2rem;align-items:center;
  grid-template-columns:minmax(0,1.3fr) minmax(0,auto);
}
@media(max-width:820px){.aufruf__innen{grid-template-columns:1fr}}

/* ------------------------------------------------------------- Stellenzeile */
.stelle{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1.5rem 0;border-bottom:1px solid var(--haar);
}
.stelle h3{margin:0 0 .3rem}
.stelle p{margin:0;font-size:.94rem;color:var(--leise)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.marke-chip{
  display:inline-block;padding:.28rem .7rem;background:var(--papier-kuehl);
  border:1px solid var(--haar);font-size:.78rem;color:var(--leise);
}
.auf-dunkel .marke-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#C7CDD2}

/* ------------------------------------------------------------ Rechtstexte */
.rechtstext{max-width:78ch}
.rechtstext h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:2.6rem}
.rechtstext h3{font-size:1.1rem;margin-top:1.8rem}
.rechtstext ul{padding-left:1.2rem;color:var(--leise)}
.rechtstext li{margin-bottom:.4rem}
.rechtstext p{color:var(--leise)}
.rechtstext strong{color:var(--ink)}

/* -------------------------------------------------------------------- 404 */
.leerseite{
  min-height:60vh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(3rem,8vw,6rem);
}
.leerseite__zahl{
  font-family:'Archivo',sans-serif;font-weight:750;font-stretch:70%;
  font-size:clamp(6rem,20vw,14rem);line-height:.85;color:#EDF0F2;
}


/* ══════════════════════════════════════════ Anfragefenster auf dem Telefon
   Steht bewusst ganz am Ende der Datei. Die Regeln muessen die allgemeinen
   Formularmasse ueberschreiben, und bei gleicher Spezifitaet gewinnt die
   spaetere Regel. Ziel ist, vom Formular so viel wie moeglich ohne Scrollen
   zu zeigen. Ein Formular mit zehn Feldern passt auf ein Telefon nie ganz,
   aber der Weg dorthin wird kurz. */
@media(max-width:600px){
  .fenster--breit .formular{padding:.9rem .85rem}
  .fenster--breit .feldreihe{gap:.55rem}
  .fenster--breit .feld{gap:.15rem}
  .fenster--breit .feld label{font-size:.8rem;line-height:1.25}
  .fenster--breit .feld input,
  .fenster--breit .feld select{padding:.55rem .65rem;font-size:.94rem;min-height:0}
  .fenster--breit .feld textarea{min-height:62px;padding:.55rem .65rem;font-size:.94rem}
  .fenster--breit .wahl-einzeln{
    margin-top:.55rem;padding:.5rem .65rem;font-size:.82rem;line-height:1.3;
  }
  .fenster--breit .formular__fuss{margin-top:.7rem;padding-top:.7rem;gap:.45rem}
  .fenster--breit .formular__fuss .knopf{
    flex:1 1 100%;justify-content:center;min-height:46px;padding:.6rem 1rem;
  }
  .fenster--breit .formular .klein{font-size:.74rem;line-height:1.35;margin-top:.6rem}
  .fenster--breit .fenster__kopf{padding:.8rem 1rem 0}
  .fenster--breit .fenster__kopf h2{font-size:1.12rem}
  .fenster--breit .fenster__kopf .klein{font-size:.76rem;margin-top:.25rem}
}