/* ===========================================================================
   Brandschutzservice Burak Boydas — gemeinsame Basis der Phase-4-Entwuerfe

   Alle drei Entwuerfe (A, B, C) teilen sich Farbe, Schrift, Knoepfe, Kopf,
   Fuss und Formular. Sie unterscheiden sich ausschliesslich in Aufbau und
   Bewegung. Was hier steht, ist also die feste Groesse; was in der jeweiligen
   index.html im <style> steht, ist die Variante.

   Farbe: Grundton aus v1 (Navy), Rot gegenueber dem Logo gedaempft.
   Das Logo selbst bleibt unangetastet bei #d30c13 und sitzt deshalb immer
   auf einer weissen Traegerflaeche.
   =========================================================================== */

:root{
  /* Navy-Reihe, gemessen uebernommen aus v1 */
  --navy:#12233f; --navy-2:#1b3054; --navy-3:#2a4368; --navy-linie:#243a5c;

  /* Gedaempftes Rot. #a5161b traegt Weiss mit 7,69:1 und liest sich als
     Werkstattrot, nicht als Alarmrot. Nur als Flaeche oder als Text auf
     Hell verwenden — auf Navy faellt es auf 2,04:1 durch. */
  --rot:#a5161b; --rot-tief:#7d1114; --rot-kante:#8c1114;

  --papier:#fff; --grau:#f4f5f7; --grau-2:#e3e7ed; --grau-3:#cfd6e0;
  /* Sichtbare Kartenkante. --grau-2 traegt gegen den grauen Bandhintergrund
     nur 1,09 : 1 — eine weisse Karte auf #f4f5f7 war damit praktisch
     randlos und schwamm im Hintergrund. --kante liegt bei 1,7 : 1 und
     zeichnet die Karte als eigenen Koerper, ohne hart zu wirken. */
  --kante:#bcc7d8;
  --text:#37455c; --text-2:#4a5872;
  --auf-navy:#c3ccda;      /* 9,69:1 auf Navy */
  --auf-navy-2:#a9b6ca;    /* 7,65:1 auf Navy */

  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --schmal:'Barlow Condensed','Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --rand:1220px;
  --kurve:cubic-bezier(.22,.61,.36,1);
  /* Weicher, mit langem Auslauf. Fuer alles, was sich anfuehlen soll,
     als haette es Gewicht: Knoepfe, Karten, Flaechenwechsel. */
  --sanft:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--papier);color:var(--text);
  line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.wrap{width:min(100% - 2.5rem,var(--rand));margin-inline:auto}
.weit{width:min(100% - 2.5rem,1480px);margin-inline:auto}

/* ---------- Schriftbild ---------- */
h1,h2{font-family:var(--schmal);text-transform:uppercase;font-weight:700;
  line-height:.93;letter-spacing:.005em;color:var(--navy)}
h1{font-size:clamp(2.7rem,8vw,6.2rem)}
h2{font-size:clamp(2rem,4.8vw,3.6rem)}
h3{font-family:var(--schmal);text-transform:uppercase;font-size:1.35rem;
  letter-spacing:.03em;font-weight:600;color:var(--navy);line-height:1.15}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel{color:var(--auf-navy)}

/* Vorspann. Der rote Strich ist Dekoration, traegt keinen Text und
   unterliegt deshalb keiner Kontrastpflicht. */
.vorspann{font-family:var(--schmal);font-size:.95rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--rot);
  display:flex;align-items:center;gap:.7rem}
.vorspann::before{content:"";width:28px;height:3px;background:var(--rot);flex:none}
.dunkel .vorspann{color:#fff}
.dunkel .vorspann::before{background:var(--rot);width:28px;height:3px}

.lead{font-size:1.1rem;max-width:52ch}
.mono-klein{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2)}
.dunkel .mono-klein{color:var(--auf-navy-2)}

/* ---------- Knoepfe ---------- */
/* Die Fuellung wischt von links durch, statt hart umzuspringen. Sie liegt
   als eigene Flaeche hinter dem Text (z-index -1 im eigenen Stapelkontext),
   deshalb wird nur transform bewegt und nichts neu umbrochen. */
.knopf{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 1.8rem;font-family:var(--schmal);font-size:1.08rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  border:2px solid transparent;background:none;
  transition:color .32s var(--sanft),border-color .32s var(--sanft),
             transform .4s var(--sanft),box-shadow .4s var(--sanft)}
.knopf::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:right;
  transition:transform .48s var(--sanft)}
.knopf:hover::before,.knopf:focus-visible::before{transform:scaleX(1);transform-origin:left}
.knopf:hover,.knopf:focus-visible{transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(18,35,63,.17)}
/* Beim Druecken kurz und schnell nachgeben. Die kurze Dauer ist der ganze
   Trick: sonst fuehlt sich der Klick traege an. */
.knopf:active{transform:translateY(-1px) scale(.982);
  box-shadow:0 3px 8px rgba(18,35,63,.2);transition-duration:.08s}
.knopf svg{width:1.1em;height:1.1em;flex:none}

.knopf--rot{background:var(--rot);color:#fff}
.knopf--rot::before{background:var(--rot-tief)}
.knopf--navy{background:var(--navy);color:#fff}
.knopf--navy::before{background:var(--rot)}
.knopf--weiss{border-color:rgba(255,255,255,.45);color:#fff}
.knopf--weiss::before{background:#fff}
.knopf--weiss:hover,.knopf--weiss:focus-visible{color:var(--navy);border-color:#fff}
.knopf--linie{border-color:var(--navy);color:var(--navy)}
.knopf--linie::before{background:var(--navy)}
.knopf--linie:hover,.knopf--linie:focus-visible{color:#fff}

/* ---------- Offene Stelle ----------
   Alles, was noch echten Inhalt von Burak braucht, wird sichtbar markiert
   statt still erfunden. Diese Markierungen muessen vor dem Livegang leer
   sein — sie sind die Abnahmecheckliste. */
/* Doppelt notiert, und das mit Absicht: als einfache Klasse verliert .offen
   gegen jede Regel der Form ".zahl span" oder ".norm span", und die Markierung
   erbt dann die Textfarbe ihres Abschnitts — auf dem gelben Grund faellt sie
   damit auf 1,5 : 1. Zwei Klassen schlagen Element-plus-Klasse sicher. */
.offen,.offen.offen{display:inline-block;background:#fff8db;border:1px dashed #b8860b;
  color:#6b4e00;padding:.15em .55em;font-family:var(--sans);font-size:.78rem;
  line-height:1.5;font-weight:500;letter-spacing:0;text-transform:none}

/* ---------- Bildflaeche ----------
   Steht dort, wo spaeter ein echtes Foto liegt. Bewusst keine graue Kiste:
   Navy-Verlauf, das Loescher-Sinnbild aus dem Logo als grosses Wasserzeichen
   und eine feine Koernung. Traegt damit dasselbe optische Gewicht wie ein
   Foto, sodass sich der Aufbau beurteilen laesst. */
.bildflaeche{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 18%,#2a4368 0%,#1b3054 45%,#0d1b31 100%);}
.bildflaeche::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:url("loescher-icon.png");
  background-repeat:no-repeat;background-position:82% 55%;
  background-size:auto 118%;opacity:.17;
  filter:grayscale(.35) contrast(1.1)}
.bildflaeche::after{content:"";position:absolute;inset:0;z-index:-1;
  opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bildflaeche > *{position:relative;z-index:1}

/* Echtes Foto. Fuellt seinen Kasten formatunabhaengig, damit der Aufbau
   nicht kippt, wenn spaeter ein anders geschnittenes Bild kommt. */
.foto{position:relative;overflow:hidden;background:var(--navy)}
/* Absolut gesetzt, nicht mit height:100 %. Die Bildkaesten bekommen ihre
   Hoehe ueber min-height, und eine Prozenthoehe loest daran nicht auf —
   das Bild blieb sonst niedriger als sein Kasten und liess unten einen
   Streifen Hintergrund stehen. */
.foto picture{position:absolute;inset:0;display:block}
.foto img{width:100%;height:100%;object-fit:cover;object-position:var(--schnitt,center);
  display:block}

/* Variante der Bildflaeche fuer helle Abschnitte */
.bildflaeche--hell{background:
    radial-gradient(120% 90% at 30% 20%,#e9edf3 0%,#dbe2ec 55%,#c8d2df 100%)}
.bildflaeche--hell::before{opacity:.22;filter:none;background-position:75% 60%}
.bildflaeche--hell::after{opacity:.28;mix-blend-mode:multiply}

/* Hinweis auf einer Bildflaeche */
.bild-hinweis{position:absolute;left:1rem;bottom:1rem;right:1rem;z-index:2;
  max-width:34ch}

/* ---------- Kennzeichnung kuenstlich erzeugter Bilder ----------
   Pflicht nach EU-KI-Verordnung (Verordnung (EU) 2024/1689, Artikel 50):
   kuenstlich erzeugte Bild-Inhalte muessen als solche erkennbar sein.
   Deshalb steht die Marke direkt IM Bild und nicht nur in einer Fussnote —
   sie bleibt beim Weiterreichen des Bildausschnitts sichtbar.

   Bewusst zurueckgenommen (Aug. 2026): vorher 0,7 rem, kraeftiger
   Traegergrund. Jetzt kleiner und der Grund durchsichtiger, damit sie sich
   als leiser Bildnachweis liest statt als Stoerer — vor allem im Hero, wo
   sie sonst wie eine Aussage ueber die ganze Seite wirkt. Was NICHT
   angetastet wurde, weil es die Erkennbarkeit traegt: voller Wortlaut
   dauerhaft sichtbar (kein Ausklappen beim Zeigen — auf dem Handy gibt es
   kein Zeigen), Kontrast weiterhin ueber 4,5 : 1.

   Wortlaut auf Englisch (Aug. 2026, Yunus' Wahl): "AI Generated" statt
   "KI-generiert" — international lesbares Kuerzel, auf einer Bildmarke
   unproblematisch, weil es nur die Marke selbst betrifft, nicht den
   deutschen Seiteninhalt. Das kleine Schaltkreis-Symbol davor zitiert den
   Chip-Look, den man mit "AI" verbindet, bleibt aber ein blosser Strich in
   Textgroesse statt eines eigenen grafischen Elements — genau das haelt es
   unauffaellig. Ergaenzend steht im Fuss ein Satz, der die Marke erklaert. */
.ki-marke{position:absolute;right:.45rem;bottom:.4rem;z-index:3;
  display:inline-flex;align-items:center;gap:.32em;
  /* .62 rem sind rund 10 px — die Untergrenze, ab der die Marke auf einem
     Handy noch im Vorbeigehen lesbar ist. Kleiner waere nicht mehr
     "erkennbar" im Sinne der Verordnung. */
  font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  line-height:1.4;text-transform:uppercase;color:rgba(255,255,255,.92);
  /* Kein Traegergrund mehr (Aug. 2026): der dunkle Kasten las sich wie ein
     Warnschild statt wie ein Bildnachweis. Die Lesbarkeit haengt jetzt an
     einem gestreuten Schlagschatten statt an einer Flaeche — er dunkelt nur
     die Pixel direkt hinter der Schrift ab. Vier Richtungen plus ein
     weicher Hof: gegen einen HELLEN Bildgrund traegt der Hof den Kontrast,
     gegen einen unruhigen die harten Kanten. Weniger Ebenen reichen nicht,
     dann verschwindet die Marke auf hellem Putz. */
  text-shadow:
    0 1px 2px rgba(9,18,33,.95),
    0 -1px 2px rgba(9,18,33,.85),
    1px 0 2px rgba(9,18,33,.85),
    -1px 0 2px rgba(9,18,33,.85),
    0 0 8px rgba(9,18,33,.8);
  padding:.12em 0;pointer-events:none}
/* Das Chip-Symbol traegt denselben Schlagschatten wie der Text (per
   currentColor + filter), sonst faellt es auf hellem Bildgrund aus dem
   Rahmen, den der Text bekommt. */
.ki-marke svg{width:1.05em;height:1.05em;flex:none;
  filter:drop-shadow(0 1px 1.5px rgba(9,18,33,.9))
    drop-shadow(0 0 4px rgba(9,18,33,.7))}
/* Fuer Bilder, deren untere Ecke von einem Element im Vordergrund belegt
   ist (der Hero: dort liegt unten der Kontaktknopf). Bleibt gleich klein
   und gleich durchsichtig wie die Grundform — nur die Ecke wechselt. */
.ki-marke--oben{top:.5rem;bottom:auto}

/* Erklaerung im Fuss. Sie ersetzt die Marke nicht, sie ergaenzt sie —
   deshalb darf die Marke im Bild kleiner sein. */
.ki-hinweis{font-size:.78rem;color:var(--auf-navy-2);max-width:60ch}

/* ---------- Kopf ---------- */
/* Der Kopf ist weiss, weil das Logo einen weissen Grund hat. Auf Navy
   sass es sichtbar auf einer Platte und wirkte aufgeklebt. */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--grau-2);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  backdrop-filter:saturate(150%) blur(8px)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;
  padding:.6rem 0}
.kopf-marke{display:block;flex:none}
.kopf-marke img{height:42px;width:auto}

/* Ab hier Tablet und Handy: nav wird zum Feld, das sich unter dem Kopf
   aufklappt, statt beim Schmalerwerden ersatzlos zu verschwinden. Die
   Verlinkungen darin bleiben dieselben Elemente, nur der Behaelter aendert
   Groesse und Anordnung — deshalb genuegt ein Innencontainer fuer den
   grid-rows-Trick, keine Verzweigung im Markup. */
.kopf nav{display:flex;font-family:var(--schmal);font-size:1.04rem;
  letter-spacing:.09em;text-transform:uppercase;font-weight:600}
/* Die Abstaende muessen auf .nav-liste liegen, nicht auf nav: nav hat seit
   dem Klappmenue nur noch EIN Kind. Ein gap auf nav trennt daher nichts,
   die Verlinkungen standen als reiner Textfluss aneinander. */
.nav-liste{display:flex;align-items:center;gap:2.4rem}
.kopf nav a{text-decoration:none;color:var(--navy);position:relative;padding-block:.2rem}
.kopf nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--kurve)}
.kopf nav a:hover::after,.kopf nav a:focus-visible::after{transform:scaleX(1)}
.kopf .knopf{padding:.8rem 1.3rem;font-size:1rem}

.menu-schalter{display:none;position:relative;width:46px;height:46px;flex:none;
  background:none;border:0;cursor:pointer;padding:0;margin-left:.3rem}
.menu-linie{position:absolute;left:11px;right:11px;height:2px;background:var(--navy);
  transition:transform .32s var(--sanft),opacity .2s var(--sanft)}
.menu-linie--oben{top:16px}
.menu-linie--mitte{top:22px}
.menu-linie--unten{top:28px}
.menu-schalter[aria-expanded="true"] .menu-linie--oben{transform:translateY(6px) rotate(45deg)}
.menu-schalter[aria-expanded="true"] .menu-linie--mitte{opacity:0}
.menu-schalter[aria-expanded="true"] .menu-linie--unten{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1000px){
  .menu-schalter{display:block;order:3}
  .kopf .knopf{order:2}
  .kopf-marke{order:1}
  /* nav klappt als Feld unter dem Kopf auf. grid-template-rows:0fr->1fr
     braucht einen einzelnen Innenblock als Zeile — die Links selbst
     bilden sonst mehrere implizite Zeilen, die sich nicht gemeinsam
     kollabieren liessen. */
  .kopf nav{order:4;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--grau-2);
    box-shadow:0 16px 28px rgba(18,35,63,.1);
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .38s var(--sanft)}
  .kopf nav.offen{grid-template-rows:1fr}
  .kopf nav .nav-liste{overflow:hidden;min-height:0;display:flex;gap:0;
    align-items:stretch;flex-direction:column;
    padding-inline:max(1.25rem,calc((100vw - var(--rand)) / 2))}
  .kopf nav a{padding:1rem 0;border-bottom:1px solid var(--grau-2);font-size:1.08rem}
  .kopf nav a:last-child{border-bottom:0}
  .kopf nav a::after{display:none}
}
@media(max-width:520px){.kopf-marke img{height:32px}
  .kopf .knopf{padding:.7rem 1rem;font-size:.92rem;letter-spacing:.05em}}

/* ---------- Abschnitte ---------- */
section{padding:clamp(3.5rem,7.5vw,6.5rem) 0}
.abschnitt-kopf{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem)}
.abschnitt-kopf h2{margin-top:.9rem}
.navy-band{background:var(--navy)}
.grau-band{background:var(--grau)}

/* ---------- Kontaktleiste direkt unter dem Hero ----------
   Der Auftrag der Seite ist der Kontakt, nicht eine bestimmte Nummer.
   Deshalb ist die ganze Leiste ein einziger Link zum Kontaktabschnitt,
   Telefon und E-Mail stehen dort ausfuehrlich mit allen Kanaelen. */
.kontaktleiste{display:block;background:var(--rot);color:#fff;text-decoration:none;
  transition:background .3s var(--sanft)}
.kontaktleiste:hover,.kontaktleiste:focus-visible{background:var(--rot-tief)}
.kontaktleiste-innen{display:flex;align-items:center;justify-content:center;
  gap:.8rem;padding:1.15rem 0;font-family:var(--schmal);font-size:1.25rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#fff}
.kontaktleiste-innen svg{width:1.25em;height:1.25em;flex:none}
.kontaktleiste-pfeil{transition:transform .3s var(--sanft)}
.kontaktleiste:hover .kontaktleiste-pfeil,
.kontaktleiste:focus-visible .kontaktleiste-pfeil{transform:translateX(5px)}

/* ---------- Schwebender WhatsApp-Knopf ----------
   Eigenstaendiges Gruen statt --rot: Nutzer sollen die Marke auf einen
   Blick erkennen, Rot ist im Rest der Seite als "Anruf/Handeln"-Farbe
   belegt und wuerde hier zur Verwechslung mit dem Telefonknopf fuehren. */
.whatsapp-schwebe{position:fixed;right:1.3rem;bottom:1.3rem;z-index:70;
  width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .3s var(--sanft),background .3s var(--sanft),box-shadow .3s var(--sanft)}
.whatsapp-schwebe svg{width:29px;height:29px;fill:currentColor}
.whatsapp-schwebe:hover,.whatsapp-schwebe:focus-visible{
  background:#1fad57;transform:scale(1.07);box-shadow:0 10px 26px rgba(0,0,0,.32)}
@media(max-width:560px){
  .whatsapp-schwebe{right:1rem;bottom:1rem;width:52px;height:52px}
  .whatsapp-schwebe svg{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){.whatsapp-schwebe{transition:none}}

/* ---------- Kontaktabschnitt ---------- */
.kontakt-raster{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem)}
.kontakt-daten{display:grid;gap:1.35rem;margin-top:2rem}
.kontakt-zeile{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.kontakt-zeile svg{width:22px;height:22px;color:var(--rot);margin-top:.35rem;flex:none}
.dunkel .kontakt-zeile svg{color:#fff}
.kontakt-zeile b{display:block;font-family:var(--schmal);font-size:.92rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);font-weight:600}
.dunkel .kontakt-zeile b{color:var(--auf-navy-2)}
.kontakt-zeile a,.kontakt-zeile .wert{display:block;font-size:1.08rem;font-weight:600;
  color:var(--navy);text-decoration:none;word-break:break-word;margin-top:.15rem}
.dunkel .kontakt-zeile a,.dunkel .kontakt-zeile .wert{color:#fff}
.kontakt-zeile a:hover{text-decoration:underline}

form{display:grid;gap:1rem;background:var(--grau);border:1px solid var(--kante);
  padding:clamp(1.6rem,3.5vw,2.4rem)}
.dunkel form{background:var(--navy-2);border-color:var(--navy-linie)}
label{font-family:var(--schmal);font-size:.92rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);display:block;margin-bottom:.4rem;
  font-weight:600}
.dunkel label{color:var(--auf-navy)}
/* Randfarbe --kante statt --grau-3: das Feld ist weiss, der Formularkasten
   grau — ohne kraeftigen Rand verschwimmt die Feldgrenze auf 1,3 : 1 und
   man sieht nicht mehr, wo geschrieben werden kann. */
input,textarea,select{width:100%;padding:.85rem .9rem;background:#fff;
  border:1px solid var(--kante);color:var(--navy);font:inherit;font-size:.97rem;
  border-radius:0}
input::placeholder,textarea::placeholder{color:var(--text-2);opacity:1}

/* Spam-Falle: fuer sehende Nutzer unsichtbar, fuer Screenreader trotzdem
   vorhanden -- display:none wuerde manche Bots dazu bringen, das Feld
   einfach zu ignorieren statt es (falsch) auszufuellen. */
.sr-nur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.einwilligung{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  font-family:var(--sans);font-size:.86rem;line-height:1.5;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--text)}
.dunkel .einwilligung{color:var(--auf-navy)}
.einwilligung input{width:auto;margin-top:.2rem;accent-color:var(--rot);flex:none}

.form-status{font-size:.9rem;min-height:1.3em}
.form-status--ok{color:#1e6b3a}
.form-status--fehler{color:var(--rot-tief)}
.dunkel .form-status--ok{color:#7fd6a0}
.dunkel .form-status--fehler{color:#ff8a8a}
.dunkel input,.dunkel textarea,.dunkel select{background:var(--navy);
  border-color:var(--navy-linie);color:#fff}
input:focus,textarea:focus,select:focus{outline:3px solid var(--rot);outline-offset:1px}
textarea{resize:vertical;min-height:110px}
@media(max-width:880px){.kontakt-raster{grid-template-columns:1fr}}

/* ---------- Rechtstexte (Impressum, Datenschutz) ----------
   Eigene, schmalere Spalte: Fliesstext ueber die volle 1220-px-Breite ist
   unlesbar. 68 Zeichen ist die Obergrenze, ab der das Auge die naechste
   Zeile nicht mehr sicher findet. Bewusst nuechtern gehalten — hier wird
   nichts verkauft, hier wird nachgeschlagen. */
.rechtstext{width:min(100% - 2.5rem,68ch);margin-inline:auto;
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.rechtstext h1{font-size:clamp(2.1rem,5.5vw,3.4rem);margin-bottom:.6rem}
.rechtstext h2{font-size:clamp(1.35rem,2.8vw,1.75rem);margin-top:2.8rem;
  margin-bottom:.9rem;line-height:1.1}
.rechtstext h3{font-size:1.08rem;margin-top:1.8rem;margin-bottom:.5rem}
.rechtstext p,.rechtstext li{font-size:1rem;line-height:1.7}
.rechtstext p{margin-bottom:1rem}
.rechtstext ul{margin:0 0 1.2rem 1.3rem;display:grid;gap:.45rem}
.rechtstext a{color:var(--rot);text-underline-offset:.2em}
.rechtstext a:hover{text-decoration:none}
.rechtstext .stand{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:2.5rem;display:block}
/* Anschriften und andere Bloecke, die ihre Zeilenumbrueche behalten muessen */
.rechtstext .block{margin-bottom:1.2rem;line-height:1.65}
/* Ruecksprung zur Startseite, oben auf jeder Rechtsseite */
.zurueck{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--schmal);font-size:.98rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);text-decoration:none;
  margin-bottom:2rem}
.zurueck svg{width:16px;height:16px;transition:transform .3s var(--sanft)}
.zurueck:hover{color:var(--rot)}
.zurueck:hover svg{transform:translateX(-3px)}

/* ---------- Fuss ---------- */
footer{background:var(--navy);color:var(--auf-navy);
  padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem;font-size:.93rem}
.fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;
  padding-bottom:2rem;border-bottom:1px solid var(--navy-linie)}
/* Im Fuss steht die Hellfassung des Logos: dieselbe Zeichnung, nur die
   schwarze Wortmarke ist zu Weiss invertiert. Damit braucht es keine
   weisse Platte mehr, die im dunklen Fuss immer aufgeklebt aussah. */
.fuss-marke{display:inline-block;margin-bottom:1rem}
.fuss-marke img{height:52px;width:auto}
footer h4{font-family:var(--schmal);color:#fff;font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1rem;font-weight:600}
footer ul{list-style:none;display:grid;gap:.6rem}
footer a{color:var(--auf-navy);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fuss-unten{padding-top:1.3rem;display:flex;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;font-size:.84rem;color:var(--auf-navy-2)}
@media(max-width:760px){.fuss-raster{grid-template-columns:1fr}}

/* ---------- Rezensionen, gemeinsame Bausteine ----------
   Aufbau und Bewegung macht jede Variante selbst. Karte, Sterne und
   Medaillon sehen ueberall gleich aus, damit der Vergleich wirklich nur
   die Animation misst. */
.wertung{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.wertung b{font-family:var(--schmal);font-size:2.4rem;line-height:1;color:var(--navy)}
.dunkel .wertung b{color:#fff}
.sterne{display:inline-flex;gap:.15rem}
.sterne i{width:1.05em;height:1.05em;background:#e0a400;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* Der leere Stern muss sich vom weissen Grund abheben, sonst liest man
   4 von 5 als 4 von 4. --grau-3 lag bei 1,29 : 1, dieser Ton bei 1,9 : 1. */
.sterne i.leer{background:#aeb9c9}
.dunkel .sterne i.leer{background:var(--navy-3)}

.stimme{background:#fff;border:1px solid var(--kante);padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.9rem}
.dunkel .stimme{background:var(--navy-2);border-color:var(--navy-linie)}
/* pre-line: die echten Rezensionen haben Absaetze. Ohne das liefe eine
   vierteilige Bewertung zu einem einzigen Block zusammen — genau die
   Glaettung, die beim Uebernehmen verboten ist. */
.stimme p{color:var(--text);font-size:.97rem;line-height:1.6;white-space:pre-line}
.dunkel .stimme p{color:var(--auf-navy)}
.stimme footer{background:none;padding:0;display:flex;align-items:center;gap:.75rem;
  margin-top:auto;font-size:.9rem;color:var(--text-2)}
.dunkel .stimme footer{color:var(--auf-navy-2)}
.stimme cite{font-style:normal;font-weight:700;color:var(--navy);display:block}
.dunkel .stimme cite{color:#fff}
.stimme .wann{display:block;font-size:.8rem}
.medaillon{width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:var(--rot);color:#fff;font-family:var(--schmal);font-size:1.3rem;
  font-weight:700;line-height:1}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}