/* ==========================================================================
   Elektro Wenzel, Vellmar — Portfolio-Seite 2 von 4 der erfundenen Agentur
   „Eberhard Media" (prototypen/handwerk). Eine Welt, eine Datei.

   DIE WELT      „Klar": Ein Elektrobetrieb verkauft hier ein Produkt, keine
                 Handwerkskunst. Die Seite ist deshalb gebaut wie ein guter
                 Onlineshop und nicht wie ein Aushang: hell, aufgeräumt, drei
                 Schritte, ein Preis, ein Termin. Wer sie öffnet, soll in
                 zehn Sekunden wissen, was es kostet und wann es fertig ist.
   ABGRENZUNG    Bewusst das Gegenteil der Agenturseite (Schwarz auf Weiß,
                 keine Kästen, Haarlinien, Plakatschrift, eigener Zeiger) und
                 der Schwesterseite handwerk-dach (Anthrazit, Video,
                 Versalien, Rundung 0). Hier: Weiß, KARTEN mit 14 px Rundung
                 und einem weichen Schatten, PILLEN als Knöpfe, eine einzige
                 Schrift, eine Akzentfarbe, viele kleine schnelle Bewegungen.
                 Kein Schwarz als Fläche, keine Versalien-Schlagzeile, keine
                 Serife, kein Gelb, kein Glas, kein Farbverlauf.
   MATERIAL      Weiß als Grund, Hellgrau (#F2F5FA) für jedes zweite Band,
                 Navy (#0E1A33) für Schrift, Elektro-Blau (#1F5BD6) für alles
                 Anklickbare, Grün (#1E9E63) NUR für Häkchen und
                 „förderfähig". Sonst keine Farbe. Genau ein Schatten
                 (0 8px 24px rgba(14,26,51,.06)) — der auf der Karte; ein
                 zweiter, tieferer nur im Zeigen-Zustand.
   SCHRIFT       Manrope allein, variabel 200–800. Schlagzeilen 800 mit
                 -0.02em, Zwischenüberschriften 700, Text 400/500. Zahlen
                 immer mit tabular-nums, damit der rollende Preis nicht
                 zappelt. Die Schlagzeile ist bewusst kleiner als bei Dach —
                 hier trägt der Planer, nicht die Schrift.
   BEWEGUNG      Schnell, klein, viele: 180–240 ms ease-out. Reiterwechsel
                 schiebt 16 px, der Preis rollt in 400 ms, Häkchen zeichnen
                 sich, Karten heben sich beim Zeigen um 2 px. Erscheinen beim
                 Scrollen: 16 px von unten, 320 ms, 60 ms Staffel je Karte.
                 Keine Parallaxe, kein Pinning, kein Video, nichts Langsames.
                 `prefers-reduced-motion` schaltet alles ab und zeigt den
                 fertigen Zustand.

   TRANSFORM-REGEL: Erscheinen benutzt `translate` (nicht `transform`), das
   Heben der Karten `transform`, das Schieben im Planer `translate` auf der
   Bühne. So überschreibt sich nichts. Erscheinen läuft als Animation, nicht
   als Übergang, und die Animation wird nach `animationend` abgelegt
   (`ist-da`) — sonst hält `forwards` das `translate` fest und die
   Hover-Übergänge auf denselben Karten kommen nie an.

   CSP: kein Inline-Stil, kein Inline-Skript (siehe _headers). Werte, die das
   Skript setzt, gehen über `style.setProperty`.
   ========================================================================== */

/* --- Schrift (selbst gehostet, CSP font-src 'self') ------------------------ */
@font-face {
  font-family: "Manrope";
  src: url("/portfolio/elektro/assets/fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("/portfolio/elektro/assets/fonts/manrope-var-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Werte ------------------------------------------------------------------ */
:root {
  --weiss: #FFFFFF;
  --band: #F2F5FA;          /* jedes zweite Band */
  --navy: #0E1A33;          /* Schrift, 16:1 auf Weiß */
  --grau: #5B6675;          /* zweite Ordnung, 5,6:1 auf Weiß — nicht heller machen */
  --grau-hell: #8892A4;     /* nur groß oder als Beschriftung über 1rem */
  --linie: #DCE3EF;
  --linie-stark: #C4CFE2;
  --blau: #1F5BD6;          /* 6,0:1 mit Weiß */
  --blau-dunkel: #1848AD;
  --blau-hell: #E8EFFC;     /* Grund für Hinweise */
  --gruen: #1E9E63;         /* NUR Häkchen und „förderfähig" */
  --gruen-hell: #E6F5EE;

  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --mass: 1200px;
  --rand: clamp(1.25rem, 5vw, 2.5rem);
  --kopf: 72px;

  --rund: 14px;             /* Karten und Felder */
  --rund-klein: 8px;        /* Kacheln im Planer */
  --rund-pille: 999px;      /* Knöpfe */

  --schatten: 0 8px 24px rgba(14, 26, 51, .06);
  --schatten-hoch: 0 14px 34px rgba(14, 26, 51, .10);

  --schnell: .18s;
  --mittel: .24s;
  --kurve: cubic-bezier(.2, .7, .3, 1);
}

/* --- Grundlage -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Muss vor allem anderen stehen und muss !important sein: .knopf ist
   inline-flex, und das schlägt sonst das hidden-Attribut. Das Skript
   schaltet Sichtbarkeit ausschließlich über hidden, nie über style.display. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--navy);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--band); }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--blau-dunkel); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.springmarke {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--rund-pille); text-decoration: none; font-weight: 700;
  transition: top var(--schnell) var(--kurve);
}
.springmarke:focus { top: 12px; color: #fff; }

/* --- Bänder und Raster ------------------------------------------------------ */
.wrap { width: min(100% - 2 * var(--rand), var(--mass)); margin-inline: auto; }

.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.band--grau { background: var(--band); }
.band--eng { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.band__kopf { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band__kopf--mitte { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blau); margin-bottom: .85rem;
}
.kicker::before {
  content: ""; width: 22px; height: 2px; background: var(--blau); border-radius: 2px;
}
.band__kopf--mitte .kicker { justify-content: center; }

.band__kopf h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.band__kopf p {
  margin-top: .9rem; color: var(--grau); font-size: 1.0625rem; max-width: 42rem;
}
.band__kopf--mitte p { margin-inline: auto; }

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

/* --- Knöpfe (Pillen) -------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: var(--rund-pille);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--schnell) var(--kurve),
              border-color var(--schnell) var(--kurve),
              color var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve);
}
.knopf--blau { background: var(--blau); color: #fff; box-shadow: 0 4px 12px rgba(31, 91, 214, .22); }
.knopf--blau:hover { background: var(--blau-dunkel); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(31, 91, 214, .28); }
.knopf--blau:active { transform: translateY(0); }

.knopf--rand { background: var(--weiss); color: var(--navy); border-color: var(--linie-stark); }
.knopf--rand:hover { background: var(--weiss); color: var(--blau); border-color: var(--blau); transform: translateY(-1px); }

.knopf--still { background: transparent; color: var(--blau); padding-inline: .25rem; }
.knopf--still:hover { color: var(--blau-dunkel); text-decoration: underline; }

.knopf--breit { width: 100%; }
.knopf--gross { padding: 1rem 1.9rem; font-size: 1.0625rem; }

/* Pfeil, der beim Zeigen einen Schritt weitergeht — die einzige Zierde an den
   Knöpfen dieser Seite. */
.knopf__pfeil { transition: translate var(--schnell) var(--kurve); }
.knopf:hover .knopf__pfeil { translate: 3px 0; }

/* --- Häkchen ---------------------------------------------------------------- */
.haken { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; color: var(--gruen); }
.haken path { stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.hakenliste { display: grid; gap: .6rem; }
.hakenliste li { display: flex; gap: .65rem; align-items: flex-start; color: var(--grau); }
.hakenliste li b { color: var(--navy); font-weight: 700; }
.hakenliste--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 620px) { .hakenliste--zwei { grid-template-columns: minmax(0, 1fr); } }

/* Die Häkchen zeichnen sich, wenn ihre Zeile erscheint. */
@media (prefers-reduced-motion: no-preference) {
  .hat-io .zeig .haken path { stroke-dasharray: 26; stroke-dashoffset: 26; }
  .hat-io .zeig.ist-da .haken path { animation: haken-zeichnen .42s var(--kurve) forwards; }
}
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }

/* --- Sterne (Attrappe, kein Google-Profil) ---------------------------------- */
.sterne { display: inline-flex; gap: 2px; color: #F5A623; }
.sterne svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Kopf ------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  height: var(--kopf);
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  height: 100%; display: flex; align-items: center; gap: 1.5rem;
}

.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em;
  color: var(--navy); text-decoration: none; flex: 0 0 auto;
}
.marke:hover { color: var(--navy); }
.marke__zeichen {
  width: 34px; height: 34px; border-radius: var(--rund-klein);
  background: var(--blau); display: grid; place-items: center;
  transition: transform var(--schnell) var(--kurve);
}
.marke:hover .marke__zeichen { transform: rotate(-6deg); }
.marke__zeichen svg { width: 18px; height: 18px; fill: #fff; }
.marke small {
  display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  color: var(--grau); text-transform: uppercase; line-height: 1;
}
.marke__text { line-height: 1.05; }

.menu { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.menu a, .menu .menu__knopf {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .75rem; border-radius: var(--rund-klein);
  font-weight: 600; font-size: .96875rem; color: var(--navy);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: background var(--schnell) var(--kurve), color var(--schnell) var(--kurve);
}
.menu a:hover, .menu .menu__knopf:hover { background: var(--band); color: var(--blau); }

/* Aufklappliste „Leistungen" */
.menu__gruppe { position: relative; }
.menu__knopf svg { width: 14px; height: 14px; fill: currentColor; transition: transform var(--schnell) var(--kurve); }
.menu__knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu__liste {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 15rem;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten-hoch);
  padding: .5rem; display: grid; gap: 2px;
}
.menu__liste[hidden] { display: none; }
.menu__liste a { display: block; padding: .55rem .7rem; font-weight: 600; }
.menu__liste a span { display: block; font-weight: 500; font-size: .875rem; color: var(--grau); }

.kopf__rechts {
  display: flex; align-items: center; gap: .75rem; flex: 0 0 auto;
  /* Muss selbst nach rechts schieben: .menu trägt zwar margin-left:auto,
     ist aber unter 1080 px ausgeblendet — dann stünde alles links. */
  margin-left: auto;
}
.kopf__tel {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--navy); text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kopf__tel:hover { color: var(--blau); }
.kopf__tel svg { width: 17px; height: 17px; fill: var(--blau); }
.kopf__tel small { display: block; font-size: .6875rem; font-weight: 600; color: var(--grau); line-height: 1; }

/* Die drei Striche liegen absolut, nicht im Fluss: im Rasterfluss kamen die
   beiden gedrehten Striche nicht auf dieselbe Höhe und das Kreuz wurde zum
   Winkel. Mit festem `top` ist die Mitte eindeutig. */
.burger {
  display: none; position: relative;
  width: 44px; height: 44px; border: 1px solid var(--linie);
  border-radius: var(--rund-klein); background: var(--weiss); cursor: pointer;
  padding: 0;
}
.burger span {
  position: absolute; left: calc(50% - 9px);
  width: 18px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: top var(--schnell) var(--kurve), rotate var(--schnell) var(--kurve), opacity var(--schnell);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 20px; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 20px; rotate: -45deg; }

/* Menü als weißes Blatt von oben (Telefon) */
.blatt {
  position: fixed; inset: var(--kopf) 0 auto 0; z-index: 39;
  background: var(--weiss); border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten-hoch);
  padding: 1.25rem var(--rand) 1.75rem;
  display: grid; gap: .25rem;
  max-height: calc(100dvh - var(--kopf)); overflow-y: auto;
}
.blatt[hidden] { display: none; }
/* Offenes Blatt: die Seite dahinter steht still. */
body.menu-offen { overflow: hidden; }
.blatt a {
  padding: .85rem .25rem; font-weight: 700; font-size: 1.125rem;
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--linie);
}
.blatt a:last-of-type { border-bottom: 0; }
.blatt .knopf { margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .blatt { animation: blatt-rein var(--mittel) var(--kurve); }
  @keyframes blatt-rein { from { opacity: 0; translate: 0 -12px; } }
}

@media (max-width: 1080px) {
  .menu { display: none; }
  .burger { display: block; }
  .kopf__rechts .knopf { display: none; }
}
@media (max-width: 560px) {
  /* Ohne die Nummer bleibt vom Telefonlink nur das 17-px-Zeichen — als
     Tippfläche zu klein, und genau hier, neben dem Burger, wird getippt.
     Also bekommt er dieselbe Fläche wie der Knopf daneben. */
  .kopf__tel span { display: none; }
  .kopf__tel { min-width: 44px; min-height: 44px; justify-content: center; margin-right: -.35rem; }
  .marke small { display: none; }
}

/* ==========================================================================
   HELD — Zweispalter: links das Versprechen, rechts der Planer,
   dahinter versetzt das Produktfoto.
   ========================================================================== */
.held {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background: var(--weiss);
}
.held__innen {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  align-items: center;
  min-height: min(88svh, 44rem);
}
.held__text { max-width: 37rem; }
.held h1 {
  font-size: clamp(2.2rem, 4.1vw, 3.5rem);
  letter-spacing: -.03em;
}
.held h1 span { display: block; }
.held h1 .held__zeile2 { color: var(--blau); }
.held__satz { margin-top: 1.25rem; color: var(--grau); font-size: 1.125rem; max-width: 30rem; }

.vertrauen {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem;
  font-size: .96875rem; font-weight: 600;
}
.vertrauen li { display: flex; align-items: center; gap: .45rem; }

.held__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.held__buehne { position: relative; z-index: 1; }

/* Das Produktfoto steht unter dem Text und schließt die linke Spalte ab.
   Das Hochformat wird auf ein liegendes Band beschnitten; der Ausschnitt
   sitzt so, dass die Wallbox links und die Ladeklappe des Autos rechts beide
   im Bild bleiben. Bis zum 2026-09-10 lag es als Tafel am rechten Fensterrand
   hinter der Planer-Karte und war zu vier Fünfteln verdeckt. */
.held__foto {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: var(--rund);
  overflow: hidden;
}
.held__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }

@media (max-width: 1080px) {
  .held__innen { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .held__text { max-width: none; }
  .held__foto { aspect-ratio: 4 / 3; }
}

/* --- Der Planer (Signatur) --------------------------------------------------- */
.planer {
  position: relative; z-index: 1;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}
.planer__kopf { padding: 1.1rem 1.25rem .25rem; }
.planer__titel { font-size: 1.0625rem; font-weight: 800; }
.planer__unter { font-size: .875rem; color: var(--grau); margin-top: .15rem; }

.reiter {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem; padding: .85rem 1.25rem 0;
}
.reiter__knopf {
  display: flex; align-items: center; gap: .45rem; justify-content: center;
  padding: .55rem .35rem .8rem; background: none; border: 0; cursor: pointer;
  font-size: .875rem; font-weight: 700; color: var(--grau);
  border-bottom: 2px solid var(--linie);
  transition: color var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve);
}
.reiter__knopf b {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--band); color: var(--grau); font-size: .75rem; font-weight: 800;
  transition: background var(--schnell) var(--kurve), color var(--schnell) var(--kurve);
}
.reiter__knopf:hover { color: var(--navy); }
.reiter__knopf[aria-selected="true"] { color: var(--blau); border-bottom-color: var(--blau); }
.reiter__knopf[aria-selected="true"] b { background: var(--blau); color: #fff; }
.reiter__knopf.ist-fertig b { background: var(--gruen); color: #fff; }

.planer__buehne { padding: 1.25rem; }
.planer__schritt { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.planer__schritt legend {
  padding: 0; font-weight: 800; font-size: 1.0625rem; margin-bottom: .2rem;
}
.planer__hinweis { font-size: .875rem; color: var(--grau); margin-bottom: .9rem; }

/* Ohne Skript stehen alle drei Schritte untereinander — ein normales
   Formular. Die Reiter wären dann Knöpfe ohne Wirkung, also weg.

   Deshalb steht das hidden-Attribut NICHT im Markup: sonst fehlten ohne
   Skript zwei Drittel des Formulars. Bis script.js den Planer übernimmt
   (.ist-bereit), blendet diese Regel die Schritte 2 und 3 aus — flag.js
   setzt .js vor dem ersten Bild, es flackert also nichts. */
html:not(.js) .reiter { display: none; }
html:not(.js) .planer__schritt + .planer__schritt { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
html.js .planer:not(.ist-bereit) .planer__schritt + .planer__schritt { display: none; }

.planer__feldgruppe + .planer__feldgruppe { margin-top: 1.1rem; }
.planer__label { display: block; font-size: .8125rem; font-weight: 700; color: var(--grau); margin-bottom: .45rem; }

/* Kacheln = die Wahl im Planer. Radio bleibt echt, nur unsichtbar. */
.kacheln { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Die Kacheln einer Reihe sind gleich hoch, auch wenn der Text der einen über
   drei Zeilen läuft und der der anderen über zwei: das Label füllt seine
   Rasterzelle, der Rahmen darin das Label. Ohne das schrumpft die kürzeste
   Kachel auf ihren Inhalt und sitzt zwischen den beiden anderen in der Mitte —
   auf dem Telefon, wo enger umbrochen wird, fällt es sofort auf. */
.kachel { position: relative; display: block; height: 100%; cursor: pointer; }
.kachel input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.kachel__innen {
  display: block; height: 100%; padding: .7rem .65rem; text-align: center;
  border: 1.5px solid var(--linie); border-radius: var(--rund-klein);
  background: var(--weiss);
  transition: border-color var(--schnell) var(--kurve),
              background var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve);
}
.kachel__titel { display: block; font-weight: 800; font-size: .9375rem; }
.kachel__text { display: block; font-size: .75rem; color: var(--grau); margin-top: .1rem; line-height: 1.35; }
.kachel:hover .kachel__innen { border-color: var(--linie-stark); transform: translateY(-1px); }
.kachel input:checked + .kachel__innen {
  border-color: var(--blau); background: var(--blau-hell);
}
.kachel input:checked + .kachel__innen .kachel__titel { color: var(--blau); }
.kachel input:focus-visible + .kachel__innen { outline: 3px solid var(--blau); outline-offset: 2px; }

/* Feld-Attrappe für das Foto des Zählerschranks */
.abwurf {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem; border: 1.5px dashed var(--linie-stark);
  border-radius: var(--rund-klein); background: var(--band);
  font-size: .8125rem; color: var(--grau); cursor: pointer;
  transition: border-color var(--schnell) var(--kurve), background var(--schnell) var(--kurve);
}
.abwurf:hover { border-color: var(--blau); background: var(--blau-hell); }
.abwurf svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--blau); stroke-width: 1.5; }
.abwurf b { display: block; color: var(--navy); font-weight: 700; font-size: .875rem; }
.abwurf input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.feld { display: block; }
.feld + .feld { margin-top: .75rem; }
.feld span { display: block; font-size: .8125rem; font-weight: 700; color: var(--grau); margin-bottom: .3rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: .7rem .85rem;
  border: 1.5px solid var(--linie); border-radius: var(--rund-klein);
  background: var(--weiss); color: var(--navy);
  transition: border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: 0; border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell);
}
.feld--paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
/* Im Paar stehen die beiden Felder nebeneinander, nicht untereinander: dort
   ist `.feld + .feld` der falsche Abstand — er schöbe das rechte Feld samt
   seiner Beschriftung um seine eigene Zeile nach unten, und „Telefon" säße
   tiefer als „Name". Den Abstand macht hier der Grid-gap, in beide Richtungen,
   also auch einspaltig unter 520 px. */
.feld--paar > .feld + .feld { margin-top: 0; }
@media (max-width: 520px) { .feld--paar { grid-template-columns: minmax(0, 1fr); } }

/* Das Preisband — immer sichtbar, rollt bei jeder Änderung. */
.planer__fuss {
  border-top: 1px solid var(--linie); background: var(--band);
  padding: 1rem 1.25rem 1.15rem;
  display: grid; gap: .75rem;
}
.preisband { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.preisband__wort { font-size: .8125rem; font-weight: 700; color: var(--grau); }
.preisband__wert {
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.preisband__zusatz { font-size: .75rem; color: var(--grau); margin-top: -.35rem; }

.planer__zurueck {
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
}
html:not(.js) .planer__zurueck { display: none; }

/* --- Erscheinen beim Scrollen ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hat-io .zeig { opacity: 0; }
  .hat-io .zeig.ist-da { animation: auf .32s var(--kurve) both; animation-delay: var(--verzug, 0ms); }
  .hat-io .zeig.ist-fertig { opacity: 1; animation: none; }
  @keyframes auf { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
}

/* ==========================================================================
   KARTEN — das Ordnungsmittel dieser Seite (die Agenturseite hat Haarlinien,
   Dach hat Balken; hier ist es die Karte mit genau einem Schatten).
   ========================================================================== */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 1.5rem;
  transition: transform var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve);
}
.karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.karte h3 { font-size: 1.1875rem; }
.karte p { color: var(--grau); margin-top: .5rem; font-size: .96875rem; }

.karte__zeichen {
  width: 44px; height: 44px; border-radius: var(--rund-klein);
  background: var(--blau-hell); display: grid; place-items: center; margin-bottom: 1rem;
}
.karte__zeichen svg { width: 24px; height: 24px; fill: none; stroke: var(--blau); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.karte__nummer {
  font-size: .75rem; font-weight: 800; color: var(--blau);
  letter-spacing: .08em; margin-bottom: .35rem;
}

/* Karte mit Bild oben (Leistungen, Karriere) */
.karte--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karte--bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte--bild .karte__koerper { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.karte--bild .karte__koerper .knopf--still { margin-top: auto; padding-top: 1rem; align-self: flex-start; }

/* --- Modellkarten ------------------------------------------------------------ */
.modell { display: flex; flex-direction: column; }
.modell__bild {
  background: var(--band); border-radius: var(--rund-klein);
  margin-bottom: 1.1rem; overflow: hidden;
}
.modell__bild img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--mittel) var(--kurve); }
.modell:hover .modell__bild img { transform: scale(1.03); }
.modell__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.modell__preis { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.modell__preis small { display: block; font-size: .6875rem; font-weight: 600; color: var(--grau); text-align: right; }
.modell .hakenliste { margin: 1rem 0 1.25rem; font-size: .9375rem; }
.modell .knopf { margin-top: auto; }

.marke-pille {
  display: inline-block; padding: .2rem .6rem; border-radius: var(--rund-pille);
  background: var(--gruen-hell); color: var(--gruen); font-size: .75rem; font-weight: 800;
}

/* ==========================================================================
   FÖRDERUNG ERKLÄRT — zweite Signatur: Aufklapper und eine Zeitleiste.
   ========================================================================== */
.foerderung { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .foerderung { grid-template-columns: minmax(0, 1fr); } }

.klapper {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten); overflow: hidden;
}
.klapper + .klapper { margin-top: .75rem; }
.klapper summary {
  display: flex; align-items: center; gap: .75rem; cursor: pointer;
  padding: 1rem 1.25rem; font-weight: 700; list-style: none;
}
.klapper summary::-webkit-details-marker { display: none; }
.klapper summary::after {
  content: ""; margin-left: auto; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid var(--blau); border-bottom: 2px solid var(--blau);
  rotate: 45deg; translate: 0 -2px;
  transition: rotate var(--schnell) var(--kurve);
}
.klapper[open] summary::after { rotate: -135deg; translate: 0 2px; }
.klapper summary:hover { color: var(--blau); }
.klapper__inhalt { padding: 0 1.25rem 1.25rem; color: var(--grau); font-size: .96875rem; }
.klapper__marke {
  width: 30px; height: 30px; border-radius: var(--rund-klein); flex: 0 0 auto;
  background: var(--blau-hell); color: var(--blau);
  display: grid; place-items: center; font-size: .75rem; font-weight: 800;
}
@media (prefers-reduced-motion: no-preference) {
  .klapper[open] .klapper__inhalt { animation: auf .2s var(--kurve); }
}

.zeitleiste { display: grid; gap: 0; }
.zeitschritt {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 1rem;
  padding-bottom: 1.5rem; position: relative;
}
.zeitschritt::before {
  content: ""; position: absolute; left: 16px; top: 34px; bottom: 0;
  width: 2px; background: var(--linie);
}
.zeitschritt:last-child { padding-bottom: 0; }
.zeitschritt:last-child::before { display: none; }
.zeitschritt__punkt {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--weiss); border: 2px solid var(--linie);
  font-weight: 800; font-size: .8125rem; color: var(--grau);
}
.zeitschritt--wir .zeitschritt__punkt { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.zeitschritt h3 { font-size: 1.0625rem; }
.zeitschritt p { color: var(--grau); font-size: .9375rem; margin-top: .25rem; }
.zeitschritt__wer {
  display: inline-block; margin-top: .45rem; padding: .15rem .55rem;
  border-radius: var(--rund-pille); font-size: .75rem; font-weight: 800;
  background: var(--gruen-hell); color: var(--gruen);
}
.zeitschritt__wer--sie { background: var(--band); color: var(--grau); }

.merkzettel {
  margin-top: 1.5rem; background: var(--blau-hell); border-radius: var(--rund);
  padding: 1.35rem 1.5rem;
}
.merkzettel h3 { font-size: 1.0625rem; margin-bottom: .8rem; }

/* ==========================================================================
   ZAHLEN + INHABER
   ========================================================================== */
.inhaber { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; }
@media (max-width: 820px) { .inhaber { grid-template-columns: minmax(0, 1fr); } }
.inhaber__bild { border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten); }
.inhaber__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.inhaber blockquote { margin: 1.25rem 0 0; }
.inhaber blockquote p { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
.inhaber blockquote footer { margin-top: .6rem; color: var(--grau); font-size: .9375rem; font-weight: 600; }

.zahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 720px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahl {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.25rem; box-shadow: var(--schatten);
}
.zahl b {
  display: block; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.zahl span { display: block; margin-top: .4rem; font-size: .875rem; color: var(--grau); font-weight: 600; }

/* ==========================================================================
   STIMMEN
   ========================================================================== */
.stimme { display: flex; flex-direction: column; }
.stimme blockquote { margin: .9rem 0 0; }
.stimme blockquote p { color: var(--navy); font-size: 1rem; font-weight: 500; }
.stimme footer { margin-top: auto; padding-top: 1.1rem; color: var(--grau); font-size: .875rem; font-weight: 700; }

/* ==========================================================================
   KARRIERE-TEASER
   ========================================================================== */
.karriere {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; overflow: hidden; border-radius: var(--rund);
  border: 1px solid var(--linie); box-shadow: var(--schatten); background: var(--weiss);
}
@media (max-width: 820px) { .karriere { grid-template-columns: minmax(0, 1fr); } }
.karriere img { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; }
.karriere__text { padding: clamp(1.75rem, 4vw, 3rem); align-self: center; }
.karriere__text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.karriere__text p { color: var(--grau); margin-top: .8rem; }
.karriere__text .knopf { margin-top: 1.5rem; }

/* ==========================================================================
   TERMIN
   ========================================================================== */
.termin { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 900px) { .termin { grid-template-columns: minmax(0, 1fr); } }

.zusammenfassung {
  background: var(--blau-hell); border-radius: var(--rund-klein);
  padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-size: .9375rem;
}
.zusammenfassung[hidden] { display: none; }
.zusammenfassung b { font-weight: 800; }
.zusammenfassung ul { margin-top: .4rem; display: grid; gap: .15rem; color: var(--grau); }
.zusammenfassung li::before { content: "· "; color: var(--blau); font-weight: 800; }

.antwort {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--rund-klein);
  background: var(--gruen-hell); color: #14603E; font-size: .9375rem; font-weight: 600;
}
.antwort[hidden] { display: none; }

.kontaktbox { display: grid; gap: 1.25rem; }
.kontaktbox dl { margin: 0; display: grid; gap: .9rem; }
.kontaktbox dt { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.kontaktbox dd { margin: .15rem 0 0; font-weight: 600; }
.kontaktbox dd a { font-weight: 700; text-decoration: none; }
.kontaktbox dd a:hover { text-decoration: underline; }

.direkt { display: flex; flex-wrap: wrap; gap: .6rem; }
.direkt .knopf { flex: 1 1 auto; }
.direkt svg { width: 18px; height: 18px; fill: currentColor; }

/* Karten-Attrappe: eigenes SVG, kein Fremd-Iframe, keine echte Geografie. */
.karte-svg {
  border-radius: var(--rund); overflow: hidden; border: 1px solid var(--linie);
  background: var(--band);
}
.karte-svg svg { width: 100%; height: auto; display: block; }
.karte-svg figcaption { padding: .6rem .9rem; font-size: .75rem; color: var(--grau); background: var(--weiss); border-top: 1px solid var(--linie); }

.gebiet { display: flex; flex-wrap: wrap; gap: .4rem; }
.gebiet li {
  padding: .25rem .7rem; border-radius: var(--rund-pille);
  /* Weiß mit Linie, nicht var(--band): die Ortsliste steht auf dem grauen
     Band, dort wäre eine graue Pille unsichtbar. */
  background: var(--weiss); border: 1px solid var(--linie);
  font-size: .8125rem; font-weight: 600; color: var(--grau);
}

/* ==========================================================================
   FUSS
   ========================================================================== */
.fuss { background: var(--band); border-top: 1px solid var(--linie); padding-block: clamp(3rem, 5vw, 4rem) 2rem; }
.fuss__raster {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fuss__raster { grid-template-columns: minmax(0, 1fr); } }
.fuss h3 { font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--grau); margin-bottom: .9rem; }
.fuss ul { display: grid; gap: .5rem; }
.fuss a { color: var(--navy); text-decoration: none; font-weight: 600; }
.fuss a:hover { color: var(--blau); text-decoration: underline; }
.fuss address { font-style: normal; color: var(--grau); font-weight: 500; }
.fuss__marke { margin-bottom: 1rem; }
.fuss__zwischen { margin-top: 1.5rem; }

.fuss__strich {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid var(--linie-stark);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .875rem; color: var(--grau);
}
/* Die zwei Pflichtzeilen jeder Portfolio-Seite: wer die Seite gebaut hat,
   und dass alles darauf erfunden ist. */
.fuss__hinweis { max-width: 46rem; }
.fuss__hinweis b { color: var(--navy); }

/* ==========================================================================
   UNTERE LEISTE (Telefon) — zeigt das Preisband erst, wenn der Planer
   benutzt wurde.
   ========================================================================== */
.mobilleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .6rem;
  box-shadow: 0 -6px 18px rgba(14, 26, 51, .07);
}
.mobilleiste__preis { flex: 1 1 auto; min-width: 0; }
.mobilleiste__preis[hidden] { display: none; }
.mobilleiste__preis b { display: block; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .96875rem; }
.mobilleiste__preis span { display: block; font-size: .6875rem; color: var(--grau); }
.mobilleiste .knopf { flex: 0 0 auto; padding-inline: 1.1rem; }
.mobilleiste__anruf {
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
  display: grid; place-items: center; border-radius: var(--rund-pille);
  border: 1px solid var(--linie-stark); background: var(--weiss);
}
.mobilleiste__anruf svg { width: 18px; height: 18px; fill: var(--blau); }
.mobilleiste .knopf--blau { margin-left: auto; }
@media (max-width: 760px) {
  .mobilleiste { display: flex; }
  .cookie:not([hidden]) ~ .mobilleiste { display: none; } /* das Banner deckte Anruf und Termin bis auf 12 px zu; solange es offen ist, gibt es die Leiste nicht */
  body { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   KLEINE SEITEN (Impressum, Datenschutz, 404)
   ========================================================================== */
.text-seite { padding-block: clamp(3rem, 6vw, 5rem); }
.text-seite__innen { max-width: 46rem; }
.text-seite h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.25rem; }
.text-seite h2 { font-size: 1.25rem; margin-top: 2.25rem; margin-bottom: .6rem; }
.text-seite p { color: var(--grau); margin-top: .75rem; }
.text-seite p:first-of-type { font-size: 1.0625rem; }
.text-seite ul { margin-top: .75rem; display: grid; gap: .4rem; color: var(--grau); }
.text-seite li::before { content: "· "; color: var(--blau); font-weight: 800; }
.hinweiskasten {
  background: var(--blau-hell); border-radius: var(--rund); padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
}
.hinweiskasten p { color: var(--navy); margin: 0; font-weight: 600; }

.fehler { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.fehler__zahl {
  font-size: clamp(5rem, 18vw, 11rem); font-weight: 800; letter-spacing: -.05em;
  line-height: .9; color: var(--blau-hell);
}
.fehler h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: -.5rem; }
.fehler p { color: var(--grau); margin-top: 1rem; }
.fehler .held__knoepfe { justify-content: center; }

/* ==========================================================================
   RUHE — prefers-reduced-motion zeigt den fertigen Zustand, ohne Bewegung.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .zeig { opacity: 1 !important; translate: none !important; }
  .karte:hover, .knopf--blau:hover, .knopf--rand:hover { transform: none; }
}

/* --- Cookie-Banner (seit 2026-09-11) ---------------------------------------
   Das Markup baut cookies.js — dieselbe Datei auf allen fünf Handwerk-Seiten.
   Hier nur das Aussehen, in der Sprache dieser Seite: eine weiße Karte mit
   14 px Rundung und genau einem Schatten, Pillen als Knöpfe, Schalter in Blau.
   „Alle akzeptieren" und „Nur notwendige" sind gleich stark — Ablehnen darf
   nicht mühsamer sein als Zustimmen. Unten links, auf dem Telefon unten über
   die volle Breite. `[hidden]` braucht bei `.cookie__details` eine eigene
   Regel, weil `display: grid` die des Browsers schlägt. */
.cookie { position: fixed; z-index: 300; left: var(--rand); bottom: 1.25rem; width: min(30rem, calc(100% - 2 * var(--rand))); background: var(--weiss); color: var(--navy); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten-hoch); font-family: var(--schrift); opacity: 0; translate: 0 1rem; transition: opacity .35s var(--kurve), translate .35s var(--kurve); }
.cookie--da { opacity: 1; translate: 0 0; }
/* Die Absatzabstände der Seite gelten hier nicht — das Raster setzt sie. */
.cookie p { margin: 0; }
.cookie__innen { display: grid; gap: .85rem; padding: 1.4rem 1.5rem 1.2rem; max-height: calc(100svh - 2.5rem); overflow-y: auto; }
.cookie__titel { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.cookie__text { font-size: .9rem; line-height: 1.55; color: var(--grau); }
.cookie__text a { color: var(--blau); font-weight: 600; }
.cookie__details { display: grid; gap: .5rem; }
.cookie__details[hidden] { display: none; }
.cookie__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .75rem .9rem; background: var(--band); border-radius: var(--rund-klein); }
label.cookie__zeile { cursor: pointer; }
.cookie__art b { display: block; font-size: .9rem; font-weight: 700; }
.cookie__art span { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.45; color: var(--grau); }
.cookie__immer { font-size: .75rem; font-weight: 700; color: var(--grau); }
.cookie__schalter { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.5rem; margin: 0; border-radius: var(--rund-pille); background: var(--linie-stark); cursor: pointer; transition: background-color var(--mittel) var(--kurve); }
.cookie__schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; transition: translate var(--mittel) var(--kurve); }
.cookie__schalter:checked { background: var(--blau); }
.cookie__schalter:checked::after { translate: 1.1rem 0; }
.cookie__schalter:focus-visible, .cookie__knopf:focus-visible, .cookie__text a:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__knopf { flex: 1 1 9rem; padding: .8rem 1.1rem; border: 1px solid var(--blau); border-radius: var(--rund-pille); background: var(--blau); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background-color var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve); }
.cookie__knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.cookie__knopf--leise { flex: 0 0 auto; background: transparent; border-color: transparent; color: var(--blau); }
.cookie__knopf--leise:hover { background: var(--blau-hell); border-color: var(--blau-hell); }
.cookie--offen .cookie__knopf--leise { flex: 1 1 100%; border-color: var(--linie-stark); }
.cookie__prototyp { font-size: .75rem; line-height: 1.45; color: var(--grau); }
@media (max-width: 600px) {
  .cookie { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
}
.cookie-link { appearance: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; }
.cookie-link:hover { color: var(--blau); text-decoration: underline; }