/* Baukasten-Gestaltung für Kundenwebseiten.
   ANPASSEN: (1) die Farben unter :root, (2) die Schriftnamen und die Pfade
   in den @font-face-Zeilen, (3) überall muster-schuldnerberatung durch den Ordnernamen
   der Seite ersetzen (derselbe Name wie BASIS in baue-seiten.py).
   Der Scroll-Fix darunter ist Pflicht und wird nicht angefasst. */

/* Scroll-Fix (Pflicht, iPhone) */
html,body{height:auto !important;min-height:100%;overflow-y:auto !important;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}

@font-face{font-family:"Open Sans";src:url("/referenzen/schuldnerberatung/schriften/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("/referenzen/schuldnerberatung/schriften/OpenSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Merriweather";src:url("/referenzen/schuldnerberatung/schriften/Merriweather-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Farbwelt aus dem Logo der alten Seite abgeleitet (Blau, weiße Schrift):
   ruhiges, vertrauenswürdiges Blau statt Alarmfarben. */
:root{
  --tinte:#12181f;
  --dunkel:#222d3b;      /* weiches Blaugrau statt hartem Schwarz für dunkle Flächen */
  --dunkel-text:#c9d2de; /* heller Text auf den dunklen Flächen, kühl abgestimmt */
  --akzent:#1a4f9e;
  --akzent-dunkel:#123c7a;
  --akzent-blass:#eef4fb;   /* sehr helle Tönung, für Flächen */
  --akzent-hell:#cfe0f5;    /* helle Tönung, für Text und Knöpfe auf Akzentfläche */
  --papier:#ffffff;
  --grau:#f4f6f9;
  /* Linie hebt Kästen messbar von der Fläche ab (Farbverlauf-Regel 9,
     mindestens 1,30:1): 1,48 auf Weiß, 1,37 auf Grau, 1,34 auf Hellblau. */
  --linie:#cdd5df;
  --nebentext:#4d5560;
  /* Schatten tragen die dunkle Firmenfarbe, nie Schwarz
     (Torben, 04.09.2026). RGB-Zahlen, weil sie in rgba() stecken. */
  --schatten:34,45,59;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Open Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinte);background:var(--papier);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:700;line-height:1.2}
/* KEINE Silbentrennung, nirgends (Torben, 06.09.2026: "Globale Regel, wir
   wollen keine Worte trennen"). Ein Wort wird nie mit Bindestrich umbrochen
   und auch nicht stillschweigend mitten durchgeschnitten. Lange deutsche
   Woerter loest man mit einer kuerzeren Ueberschrift oder kleinerer Schrift,
   nicht mit einer Trennung. */
h1,h2,h3,h4,p,li,dt,dd,th,blockquote,figcaption{hyphens:manual;overflow-wrap:normal;word-break:keep-all}
/* Ein Begriff, der nie auseinandergerissen werden darf, bekommt die Klasse. */
.zusammen{white-space:nowrap}
/* Ausnahme: E-Mail-Adressen und Links sind keine Woerter, sondern
   Zeichenketten. Die duerfen umbrechen, sonst ragen sie aus dem Bild. */
a,td{overflow-wrap:break-word}
/* Überschriften in Merriweather wie auf der bisherigen Seite des Kunden */
h1,h2{font-family:"Merriweather","Open Sans",Georgia,serif}
h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px}
h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px}
h3{font-size:19px}
p{margin-bottom:14px;color:var(--tinte)}
.innen{max-width:1120px;margin:0 auto;padding:0 20px}
.schmal{max-width:780px}
/* Schmaler Textblock, der LINKS am Raster bleibt. Ohne das wird der Block
   zentriert und beginnt weiter rechts als die Ueberschrift und das Bild
   darueber. Gleichartige Elemente gehoeren auf eine Ebene (Torben). Fuer
   bewusst mittig gesetzte Abschnitte weiter .schmal nehmen. */
.innen.schmal-links{max-width:1120px}
.innen.schmal-links>*{max-width:780px}
.mittig{text-align:center}
.breit-text{max-width:760px;color:var(--nebentext)}
.mittig.breit-text,p.mittig{margin-left:auto;margin-right:auto}
.abschnitt{padding:72px 0}
.abschnitt-grau{background:var(--grau)}
.abschnitt-blass{background:var(--akzent-blass)}
.abschnitt-blass .breit-text{margin-left:auto;margin-right:auto}
.abschnitt-dunkel{background:var(--dunkel);color:#fff}
.abschnitt-dunkel h2,.abschnitt-dunkel p{color:#fff}
.abschnitt-dunkel .breit-text{color:var(--dunkel-text);margin-left:auto;margin-right:auto}
.abschnitt-akzent{background:var(--akzent);color:#fff}
.abschnitt-akzent h2,.abschnitt-akzent p{color:#fff}
.abschnitt-akzent .breit-text{color:var(--akzent-hell);margin-left:auto;margin-right:auto}
/* Kante statt Verlauf, wo eine kräftige blaue Fläche auf eine helle folgt
   (Muster 3a). Die Klasse setzt weiche_uebergaenge() im Generator. */
.abschnitt-akzent.kante,.zeichenband.kante{border-top:5px solid var(--akzent-hell)}

/* Weiche Übergänge zwischen hellen Flächen (Muster 3a; Torben, 10.09.2026:
   "keine so harten Übergänge"). Farben kommen aus uebergang(von, nach) im
   Generator und sind immer die der BEIDEN Nachbarflächen. */
.uebergang{display:block;height:96px}
@media (max-width:900px){.uebergang{height:60px}}
.seitenkopf{padding-bottom:40px}
.ico{flex:none}
.ico-akzent{color:var(--akzent)}

/* Kopfzeile */
.kopfzeile{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);z-index:50}
.kopf-innen{display:flex;align-items:stretch;justify-content:space-between;gap:18px;min-height:78px}
.kopf-innen>.marke,.kopf-innen>.burger{align-self:center}
.marke img{width:320px;height:auto}
.hauptmenue{display:flex;align-items:center;gap:26px;font-weight:700;font-size:16px}
.hauptmenue a{text-decoration:none}
.hauptmenue a:not(.knopf):hover{color:var(--akzent);text-decoration:underline;text-underline-offset:5px}
/* Leistungen-Untermenue in der Kopfzeile (Pflicht, Muster Abschnitt 3b).
   Der Menuepunkt muss auf volle Kopfzeilenhoehe gezogen werden
   (align-self:stretch), sonst bleibt zwischen Punkt und Untermenue eine
   Luecke, in der das Zeigen abreisst und die Liste sofort wieder zuklappt. */
.hauptmenue{align-self:stretch}
.menue-punkt{position:relative;align-self:stretch;display:flex;align-items:center;gap:4px}
.unter-schalter{display:flex;align-items:center;background:none;border:0;padding:4px;
  color:inherit;cursor:pointer;border-radius:6px}
.unter-schalter svg{transition:transform var(--dur-1)}
.unter-schalter:hover{color:var(--akzent)}
.unter-schalter:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.menue-punkt:hover .unter-schalter svg,
.menue-punkt:focus-within .unter-schalter svg,
.menue-punkt.offen .unter-schalter svg{transform:rotate(180deg)}
/* EINE Spalte, nicht zwei: das Menue dieser Seite sitzt rechts in der
   Kopfzeile, ein zweispaltiges Untermenue (rund 570 Pixel breit) ragte ab
   940 Pixel Bildschirmbreite rechts aus dem Bild. Sechs Eintraege
   untereinander sind schmal genug und bleiben in jeder Breite im Bild.
   Nachgemessen mit werkzeuge/pruefe-untermenue.mjs, Ziel "gesamt 0". */
.untermenue{display:none;position:absolute;top:100%;left:-16px;z-index:60;
  grid-template-columns:1fr;gap:2px;padding:12px;max-width:calc(100vw - 32px);
  background:var(--papier);border:1px solid var(--linie);
  border-top:4px solid var(--akzent);border-radius:0 0 12px 12px;
  box-shadow:0 20px 44px rgba(var(--schatten),.20)}
.menue-punkt:hover .untermenue,
.menue-punkt:focus-within .untermenue,
.menue-punkt.offen .untermenue{display:grid}
.untermenue a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  font-size:15px;font-weight:600;white-space:nowrap}
.untermenue a .ico{color:var(--akzent)}
.hauptmenue .untermenue a:hover,.hauptmenue .untermenue a:focus-visible{
  background:var(--akzent-blass);color:var(--akzent);text-decoration:none}
.untermenue .unter-alle{color:var(--akzent)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:24px;height:2px;background:var(--tinte);margin:5px 0}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--akzent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:8px;border:2px solid var(--akzent);cursor:pointer;
  transition:background var(--dur-1),border-color var(--dur-1),opacity var(--dur-1)}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.knopf-klein{padding:9px 16px;font-size:15px;border-radius:7px}
.knopf-umriss{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-umriss:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}
.knopf-weiss{background:#fff;color:var(--akzent);border-color:#fff}
.knopf-weiss:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);color:var(--akzent-dunkel)}
.knopf-umriss-weiss{background:transparent;color:#fff;border-color:#fff}
.knopf-umriss-weiss:hover{background:#fff;color:var(--tinte);border-color:#fff}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.abschnitt-dunkel .knopfreihe,.abschnitt-akzent .knopfreihe{justify-content:center}

/* Held (Startseite) */
.held{padding:64px 0}
.held-raster{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:stretch}
.held-text{display:flex;flex-direction:column;justify-content:center}
.vorzeile{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--akzent);margin-bottom:14px}
.held-bildrahmen{border-radius:14px;overflow:hidden;min-height:340px}
.held-bildrahmen img,.held-bildrahmen video{width:100%;height:100%;object-fit:cover}

/* Erreichbarkeits-Band (Telefon, E-Mail). Hell in Firmenblau statt fast
   schwarz (Torben, 10.09.2026), weich angeblendet über .uebergang. */
.band{background:var(--akzent-hell);color:var(--akzent-dunkel);padding:18px 0}
.band-innen{display:flex;align-items:center;justify-content:center;gap:14px 34px;flex-wrap:wrap;
  font-weight:700;font-size:16px;text-align:center}
.band a{display:inline-flex;align-items:center;gap:10px;color:var(--akzent-dunkel);text-decoration:none}
.band a:hover{color:var(--akzent);text-decoration:underline;text-underline-offset:4px}
.band .ico{color:var(--akzent)}

/* Stärken-Karten */
.staerken{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.staerken-drei{grid-template-columns:repeat(3,1fr)}
.staerke{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px;
  display:flex;flex-direction:column}
.karte-kopf{display:flex;align-items:center;gap:14px;min-height:56px;margin-bottom:8px}
/* Feste Höhe für die Überschrift: sonst sitzt eine zweizeilige Überschrift
   in der Nachbarkarte 11 Pixel höher als eine einzeilige (Torbens Regel
   "gleichartige Elemente auf einer Ebene"). Der Asymmetrie-Wächter meldet
   das sonst als E:Ueberschrift. */
.karte-kopf h3{margin:0;min-height:46px;display:flex;align-items:center}
.karte-kopf .ico{color:var(--akzent)}
.staerke p{margin:0;color:var(--nebentext);font-size:15.5px}

/* Leistungs-Kacheln: feste Breite, zentriert (nie 2+1-Loch) */
.kachelreihe{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:34px}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:26px;
  width:340px;display:flex;flex-direction:column;text-decoration:none;
  transition:transform var(--dur-1),box-shadow var(--dur-1),border-color var(--dur-1)}
.kachel:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,79,158,.14);border-color:var(--akzent)}
.kachel p{color:var(--nebentext);font-size:15.5px;margin-bottom:16px}
.weiter{font-weight:700;font-size:15px;margin-top:auto;color:var(--akzent)}
/* Bild oben in der Kachel, bündig bis an den Rand; zoomt sanft beim Überfahren */
.kachel-bildrahmen{display:block;margin:-26px -26px 18px;border-radius:11px 11px 0 0;
  overflow:hidden;aspect-ratio:16/9}
.kachel-bildrahmen img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) ease}
.kachel:hover .kachel-bildrahmen img{transform:scale(1.06)}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;align-items:stretch}
.schritt{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px;
  display:flex;flex-direction:column}
/* Zahl und Überschrift stehen in EINER Zeile (Icon links, Titel rechts),
   nie untereinander. Die feste Kopfhöhe hält die Texte auf einer Ebene. */
.schritt-zahl{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--akzent);color:#fff;font-weight:700;font-size:19px;flex:none}
.schritt h3{margin:0}
.schritt p{margin:0;color:var(--nebentext);font-size:15.5px}

/* ---- Ablauf: der Rahmen läuft durch (Baukasten, bausteine-ablauf.py) ------
   Torben, 04.09.2026: Der Ablauf-Abschnitt ist IMMER animiert. Beim
   Herunterscrollen zeichnet sich um jedes Kästchen ein Rahmen in Firmenblau,
   läuft über ein Verbindungsstück zum nächsten und bleibt stehen. Beim
   letzten Schritt erscheint statt der Ziffer ein grünes Häkchen. Läuft einmal.
   Zeiten als Vielfache von --dur-takt (Erzähl-Animation, Farbverlauf-Regel 4,
   dokumentierte Ausnahme), Verläufe in oklab (Regel 1). */
.ablauf{
  --glut-a:#4f86d6;      /* helles Firmenblau, Anfang des Strichs */
  --glut-b:#123c7a;      /* tiefes Firmenblau, Ende des Strichs */
  --rohr:rgba(var(--schatten),.14);
  --fertig:#16a34a;      /* Grün für das Häkchen am Schluss */
  --zeichnen:calc(var(--dur-takt) * 1.4);
  --versatz:calc(var(--dur-takt) * 1.2);
}
.ablauf-beratung{--glut-a:#4f86d6;--glut-b:#123c7a}
.ablauf .schritt{position:relative;overflow:visible;border-radius:14px}
.schritt-inhalt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.rahmen{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:2}
.rahmen rect{fill:none;stroke:var(--glutstrich);stroke-width:2;
  stroke-dasharray:100;stroke-dashoffset:100}
.rahmen-halo{stroke-width:7;opacity:.18}
.laeuft .rahmen rect{animation:rahmen-zeichnen var(--zeichnen) var(--ease-in-out) forwards;
  animation-delay:calc(var(--nr) * var(--versatz))}
@keyframes rahmen-zeichnen{to{stroke-dashoffset:0}}
.ablauf .schritt::before,.ablauf .schritt::after{content:"";position:absolute;top:50%;right:-20px;
  width:20px;height:3px;margin-top:-1.5px;border-radius:2px}
.ablauf .schritt::before{background:var(--rohr)}
.ablauf .schritt::after{background-color:var(--glut-b);
  background-image:linear-gradient(90deg in oklab,var(--glut-a),var(--glut-b));
  transform:scaleX(0);transform-origin:left center}
.laeuft .schritt::after{animation:strecke-fuellen var(--dur-2) var(--ease-out) forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen))}
.ablauf .schritt:last-child::before,.ablauf .schritt:last-child::after{display:none}
@keyframes strecke-fuellen{to{transform:scaleX(1)}}
.ablauf .schritt-zahl{position:relative}
.zahl-ziffer{position:relative}
.fertig-haken{position:absolute;inset:0;border-radius:50%;background:var(--fertig);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5)}
.fertig-haken svg{width:24px;height:24px}
.laeuft .fertig-haken{animation:haken-stempel var(--dur-3) var(--ease-pop) forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen) + var(--dur-1))}
@keyframes haken-stempel{
  0%{opacity:0;transform:scale(.5)}
  60%{opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}
/* Ohne JavaScript steht das fertige Bild da */
html:not(.js) .rahmen rect{stroke-dashoffset:0}
html:not(.js) .ablauf .schritt::after{transform:scaleX(1)}
html:not(.js) .fertig-haken{opacity:1;transform:scale(1)}
/* Zwei Spalten (bis 1100 Pixel wie .schritte): kein Verbindungsstück */
@media (max-width:1100px){
  .ablauf .schritt::before,.ablauf .schritt::after{display:none}
}
/* Handy: Kästchen untereinander, Verbindungsstück senkrecht */
@media (max-width:560px){
  .ablauf .schritt::before,.ablauf .schritt::after{display:block;top:auto;bottom:-20px;
    left:50%;right:auto;width:3px;height:20px;margin-top:0;margin-left:-1.5px}
  .ablauf .schritt::after{background-image:linear-gradient(180deg in oklab,var(--glut-a),var(--glut-b));
    transform:scaleY(0);transform-origin:top center}
  .laeuft .schritt::after{animation-name:strecke-fuellen-hoch}
  html:not(.js) .ablauf .schritt::after{transform:scaleY(1)}
  .ablauf .schritt:last-child::before,.ablauf .schritt:last-child::after{display:none}
}
@keyframes strecke-fuellen-hoch{to{transform:scaleY(1)}}
/* "Bewegung reduzieren": sofort das fertige Bild */
@media (prefers-reduced-motion:reduce){
  .laeuft .rahmen rect,.laeuft .schritt::after,.laeuft .fertig-haken{animation:none}
  .rahmen rect{stroke-dashoffset:0}
  .ablauf .schritt::after{transform:scaleX(1)}
  .fertig-haken{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .ablauf .schritt::after{transform:scaleY(1)}
}

/* Vorher/Nachher-Schieberegler: das obere (Vorher-)Bild wird über eine
   CSS-Variable beschnitten, der unsichtbare Schieber darüber steuert sie.
   touch-action:pan-y lässt die Seite auf dem Handy weiter senkrecht rollen. */
.vergleich{position:relative;max-width:920px;margin:34px auto 0;border-radius:14px;
  overflow:hidden;aspect-ratio:16/9;box-shadow:0 18px 44px rgba(var(--schatten),.42)}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergleich-vorher{-webkit-clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vergleich-griff{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  margin-left:-1.5px;background:#fff;pointer-events:none;box-shadow:0 0 10px rgba(var(--schatten),.5)}
.vergleich-knauf{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--akzent);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
  box-shadow:0 2px 10px rgba(var(--schatten),.35)}
.vergleich-schild{position:absolute;bottom:14px;background:rgba(var(--schatten),.62);color:#fff;
  font-weight:700;font-size:14px;padding:5px 12px;border-radius:999px;pointer-events:none}
.vergleich-schild-links{left:14px}
.vergleich-schild-rechts{right:14px}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;touch-action:pan-y}
.vergleich input::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px}
.vergleich:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px}

/* Zweispalter: beide Kästen gleich hoch */
.zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.zweispalter .knopf{margin-top:8px}
.bildrahmen{border-radius:14px;overflow:hidden;min-height:300px}
.bildrahmen img,.bildrahmen video{width:100%;height:100%;object-fit:cover}
/* Wiederholen-Knopf: erscheint auf Verwandlungs-Filmen, wenn sie zu Ende sind */
.bildrahmen,.held-bildrahmen{position:relative}
.film-neustart{position:absolute;right:14px;bottom:14px;width:46px;height:46px;
  border-radius:50%;border:0;background:rgba(var(--schatten),.62);color:#fff;display:none;
  align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-1)}
.film-neustart:hover{background:var(--akzent)}
.film-neustart.da{display:flex}
.bild-breit{min-height:0}
.bild-breit img,.bild-breit video{aspect-ratio:16/7;object-fit:cover}

/* Leistungsseite */
.brotkrumen{font-size:14px;color:var(--nebentext);margin-bottom:16px}
.brotkrumen a{color:var(--nebentext)}
/* Seitenkopf der Leistungsseiten: links der Text, rechts die Animation.
   Beide Spalten enden oben und unten auf derselben Linie. */
.kopf-zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.kopf-zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start}
.kopf-zweispalter .bildrahmen{min-height:340px}
.kopf-zweispalter h1{margin-bottom:14px}
.kopf-zweispalter .breit-text{max-width:none}
.kopf-zweispalter .knopfreihe{margin-top:6px}
.zweispalter-breit{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:stretch}
.hakenliste{list-style:none;margin-top:10px}
.hakenliste li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--linie);font-size:16.5px}
.hakenliste li:last-child{border-bottom:0}
.hakenliste .ico{margin-top:4px;color:var(--akzent)}
.infokasten{background:var(--akzent-blass);border:1px solid #d3dfee;border-radius:12px;padding:28px;
  display:flex;flex-direction:column;gap:12px;justify-content:center}
.infokasten p{color:var(--nebentext);font-size:15.5px;margin:0 0 4px}
.infokasten .knopf{width:100%}

/* Fragen */
.frage{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:0;margin-top:14px}
.frage summary{cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;position:relative;padding-right:46px}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--akzent)}
.frage summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--akzent)}
.frage[open] summary::after{content:"–"}
.frage p{padding:0 22px 18px;color:var(--nebentext);margin:0}

/* Kontakt */
.kontakt-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.kontakt-karten .kachel{width:auto}
.formular-raster{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:stretch}
.formular-bildrahmen{border-radius:12px;overflow:hidden}
.formular-bildrahmen img{width:100%;height:100%;object-fit:cover}
.formular-kasten{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:32px}
form label{display:block;font-weight:700;font-size:15px;margin-bottom:16px}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid #cbc5c4;border-radius:8px;font:inherit;font-weight:400;background:#fff;color:var(--tinte)}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--akzent);outline-offset:1px}
form .knopf{width:100%}
.formular-hinweis{font-size:13.5px;color:var(--nebentext);margin:10px 0 0}

/* Zeichenband: die fünf Sinnbilder wie auf der Werbeanzeige des Kunden */
.zeichenband{background:var(--akzent);padding:38px 0}
.zeichen-reihe{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.zeichen{display:flex;align-items:center;justify-content:center;width:66px;height:66px;
  border:2px solid #fff;border-radius:5px;color:#fff;flex:none}

/* Rechtstexte */
.rechtstext h2{margin-top:34px}
.rechtstext h3{margin-top:24px;margin-bottom:8px}
.rechtstext h4{margin-top:18px;margin-bottom:6px;font-size:16.5px}
.rechtstext p{color:var(--nebentext)}
.platzhalter{background:var(--akzent-blass);border-left:4px solid var(--akzent);border-radius:8px;
  padding:16px 20px;margin:10px 0 18px}
.platzhalter p{color:var(--tinte);margin:0}

/* Fußzeile */
.fusszeile{background:var(--dunkel);color:#fff;padding:56px 0 0;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px}
.fusszeile h3{margin-bottom:12px;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.fusszeile p{color:var(--dunkel-text);font-size:15.5px}
.fusszeile a{display:block;color:var(--dunkel-text);text-decoration:none;font-size:15.5px;padding:3px 0}
.fusszeile a:hover{color:#fff;text-decoration:underline}
.fuss-logo{width:300px;height:auto;margin-bottom:14px}
/* Pflichthinweis (keine Rechtsberatung) auf jeder Seite */
.fuss-hinweis{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;padding-bottom:4px}
.fuss-hinweis p{color:#9aa3ad;font-size:13.5px;line-height:1.6}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);padding-top:18px;padding-bottom:18px;
  font-size:14.5px;color:#a8b2c0}
.fuss-rechts{display:flex;gap:20px}
.fuss-rechts a{display:inline;padding:0}

/* Sanftes Einblenden beim Scrollen. Die Klasse "anim" setzt das Skript nur,
   wenn der Besucher keine reduzierte Bewegung eingestellt hat; ohne die
   Klasse (und ohne JavaScript) bleibt alles ganz normal sichtbar. */
html.anim :is(.kachel,.staerke,.schritt,.vergleich){opacity:0}
html.anim .sichtbar{opacity:1;animation:einblenden var(--dur-3) ease backwards}
@keyframes einblenden{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Zwischenbreiten: vier Spalten würden die Karten so schmal machen, dass die
   Titel neben dem Zeichen umbrechen. Deshalb hier schon auf zwei Spalten. */
/* Kundenstimmen. Drei Karten nebeneinander auf der Startseite: gleich hoch
   und gleich breit, der Name sitzt unten auf einer Linie (margin-top:auto).
   Die Ausschnitte sind deshalb im Generator auf gleiche Laenge gebracht. */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:28px}
.stimme{margin:0;background:var(--papier);border:1px solid var(--linie);border-left:4px solid var(--akzent);
  border-radius:12px;padding:24px 24px 20px;display:flex;flex-direction:column}
.stimme blockquote{margin:0;quotes:"\201E" "\201C";color:var(--tinte);font-size:16.5px;line-height:1.62}
.stimme blockquote::before{content:open-quote;color:var(--akzent);font-size:30px;line-height:0;
  vertical-align:-8px;margin-right:2px}
.stimme blockquote::after{content:close-quote;color:var(--akzent);font-size:30px;line-height:0;
  vertical-align:-8px;margin-left:2px}
.stimme figcaption{margin-top:auto;padding-top:16px;font-weight:700;font-size:15px;color:var(--nebentext)}

/* Die volle Fassung auf der eigenen Seite: untereinander, damit die sehr
   unterschiedlich langen Texte nicht gegeneinander ausgerichtet werden
   muessen. Nebeneinander waeren sie nie gleich hoch. */
.stimme-lang{margin:0 0 34px;background:var(--papier);border:1px solid var(--linie);
  border-left:4px solid var(--akzent);border-radius:12px;padding:28px 30px 24px}
.stimme-lang h2{font-size:20px;margin-bottom:14px;color:var(--akzent-dunkel)}
.stimme-lang blockquote{margin:0}
.stimme-lang blockquote p:last-child{margin-bottom:0}
.stimme-gruss{margin-top:14px;margin-bottom:0;font-style:italic}
.stimme-lang figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--linie);
  font-weight:700;font-size:15.5px;color:var(--nebentext)}
.herkunft{font-size:14px;color:var(--nebentext);line-height:1.6;margin-top:8px}

@media (max-width:1100px){.staerken,.schritte{grid-template-columns:1fr 1fr}}

/* Handy */
@media (max-width:900px){
  .abschnitt{padding:52px 0}
  .held{padding:36px 0}
  .held-raster,.zweispalter,.zweispalter-breit,.formular-raster,
  .kopf-zweispalter{grid-template-columns:1fr;gap:28px}
  /* Ein Bild klebt nie auf der Ueberschrift (Torben, 05.09.2026): steht das
     Bild gestapelt ueber dem Text, kommt zusaetzliche Luft dazwischen.
     Pruefen mit werkzeuge/pruefe-bildabstand.mjs, Ziel "gesamt 0". */
  .zweispalter>.bildrahmen,.zweispalter-breit>.bildrahmen,
  .kopf-zweispalter>.bildrahmen,.held-raster>.held-bildrahmen,
  .formular-raster>.formular-bildrahmen{margin-bottom:14px}
  .kopf-zweispalter .bildrahmen{min-height:0}
  .kopf-zweispalter .bildrahmen img,.kopf-zweispalter .bildrahmen video{aspect-ratio:16/10}
  .staerken,.schritte{grid-template-columns:1fr 1fr}
  .staerken-drei,.stimmen{grid-template-columns:1fr}
  .kontakt-karten{grid-template-columns:1fr}
  .held-bildrahmen{min-height:240px;order:-1}
  .formular-bildrahmen{max-height:340px}
  .marke img{width:250px}
  .burger{display:block}
  .hauptmenue{display:none;position:absolute;left:0;right:0;top:78px;background:#fff;
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;
    padding:14px 20px;gap:4px}
  .hauptmenue.offen{display:flex}
  .hauptmenue a{padding:12px 4px}
  /* Auf dem Handy oeffnet ausschliesslich der Schalter. Zeigen und
     Tastaturfokus muessen hier ausdruecklich wieder ausgeschaltet werden,
     sonst klappt die Liste beim ersten Antippen unkontrolliert auf. */
  .hauptmenue{align-self:auto}
  .menue-punkt{align-self:auto;justify-content:space-between;flex-wrap:wrap}
  .menue-punkt > a{flex:1}
  .unter-schalter{padding:12px 6px}
  .menue-punkt:hover .untermenue,
  .menue-punkt:focus-within .untermenue{display:none}
  .menue-punkt.offen .untermenue{display:grid}
  .untermenue{position:static;width:100%;grid-template-columns:1fr;
    padding:6px;margin:0 0 8px;border:0;border-left:3px solid var(--akzent);
    border-radius:0 8px 8px 0;background:var(--grau);box-shadow:none}
  .untermenue a{padding:11px 10px}
  .hauptmenue .knopf-klein{justify-content:center;margin-top:8px}
  .band-innen{flex-direction:column;gap:12px}
  /* Die dreispaltige Fusszeile bricht auf eine Spalte um. Ohne das steht die
     Kontaktspalte rechts ausserhalb des Bildschirms und die Seite laesst sich
     seitwaerts schieben (Muster, Abschnitt 6a). */
  .fuss-raster{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .staerken,.staerken-drei,.schritte{grid-template-columns:1fr}
  .stimmen{grid-template-columns:1fr}
  /* Auf schmalen Handys weniger Rand, damit der in Grossbuchstaben
     geschriebene Firmenname aus den Zitaten in eine Zeile passt. */
  .stimme-lang{padding:22px 18px 20px}
  .stimme{padding:20px 18px 18px}
  .kachel{width:100%}
  .bild-breit img,.bild-breit video{aspect-ratio:16/10}
  .vergleich{aspect-ratio:4/3}
  /* Untereinander stehende Knöpfe sind gleich breit, nie unterschiedlich lang */
  .knopfreihe{flex-direction:column;align-items:stretch}
  .knopfreihe .knopf{width:100%}
}

/* Kauf-Leiste (nur solange die Seite eine Demo ist): führt zur honeyflow-Verkaufsseite */
.kauf-leiste{background:#2540a8;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
.kauf-leiste .kauf-knopf{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#2540a8;
  font-weight:700;font-size:15px;text-decoration:none;padding:9px 20px;border-radius:999px;white-space:normal;line-height:1.35}
.kauf-leiste .kauf-knopf:hover{background:#eef1fb}
.kauf-leiste .kauf-knopf svg{flex:none}