/* binichbeziehungsbereit.de - Kundenseiten
   Farben nach Amorazza: rose-Palette und Text-Grau #6b5560.
   Die in der Arbeitsanweisung verbotene Sonderfarbe kommt hier
   nicht vor - auch nicht als Beispiel, damit sie niemand von hier
   abschreibt.
   Buttons: EINE Formensprache - btn / btn-primary / btn-secondary /
   btn-block. Keine Sonderklassen. */

:root {
  --ton-50:  #fdf6f3;
  --ton-100: #fbeaf0;
  --ton-200: #f4c0d1;
  --ton-400: #d4537e;
  --ton-600: #993556;
  --ton-800: #4b1528;
  --text:    #6b5560;
  --linie:   #e6dcd9;
  --weiss:   #ffffff;
  /* V047: --gold ist ENTFERNT. Goldgelb war kein Bestandteil der
     rose-Palette und kam zuletzt nur noch an einer einzigen Stelle
     vor. Falls es je zurueckkommen soll: #ffd24a. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  background: var(--ton-50);
  -webkit-text-size-adjust: 100%;
}

.bb-kopf { padding: 16px 20px; background: var(--ton-800); }
.bb-marke {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ton-100); text-decoration: none; font-size: 15px;
  letter-spacing: .4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Das Logo ist Beiwerk, kein Inhaltsbild - fuer C2 (konstantes
   Fenster, contain, Passepartout) waere hier der falsche Ort.
   Der Abstand steht zusaetzlich als Rand, weil aeltere Browser
   "gap" bei inline-flex nicht kennen. */
.bb-logo { display: block; width: 26px; height: auto; margin-right: 10px; }

.bb-inhalt { max-width: 680px; margin: 0 auto; padding: 8px 20px 60px; }

.bb-block {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: 26px 24px; margin: 20px 0;
}

h1 { font-size: 27px; line-height: 1.3; color: var(--ton-800); margin: 0 0 14px; font-weight: 600; }
h2 { font-size: 21px; line-height: 1.4; color: var(--ton-800); margin: 26px 0 12px; font-weight: 600; }
.bb-block > h2:first-child { margin-top: 0; }
p { margin: 0 0 16px; }

.bb-satz { font-size: 20px; color: var(--ton-800); }

/* V046: mittig gesetzt. EIGENE KLASSE, nicht text-align auf .bb-satz:
   Die Klasse traegt auch der Schlusssatz "Was Du danach daraus machst,
   entscheidest allein Du." - der sollte nicht mitwandern, er wurde
   nicht genannt. Und bei den Ueberschriften ist es nur EINE von vier.
   So bleibt jede Stelle einzeln entscheidbar. */
.bb-mittig { text-align: center; }
.bb-kernsatz {
  font-size: 21px; line-height: 1.5; color: var(--ton-800);
  border-left: 3px solid var(--ton-200); padding-left: 16px; margin: 22px 0;
}
.bb-schritt {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ton-400); margin: 0 0 10px;
}
.bb-klein { font-size: 14px; opacity: .8; }
.bb-hinweis { font-size: 16px; background: var(--ton-50); border-radius: 8px; padding: 12px 14px; }

/* --- Bilder ------------------------------------------------------
   C2: EINE Regel im ganzen System. Konstantes Fenster,
   object-fit contain, Pastell-Passepartout, volle Breite.
   NIE cover, NIE freie Hoehe. Nur die Fenstergroesse folgt dem
   Kontext - beim Auftakt ist sie 4:3, dem Bild entsprechend. */
.bb-bild {
  margin: 20px 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5efe9, #ebe4dd);
}
.bb-bild picture { display: block; height: 100%; }
.bb-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bb-bild-auftakt { aspect-ratio: 4 / 3; }

/* Inhaltsbilder im Text: volle Breite, eigenes Seitenverhaeltnis,
   KEIN Passepartout. Weicht bewusst von C2 ab - auf Christians
   Entscheidung vom 04.08.2026 ("volle breite, format bleibt").
   Die Hoehe ergibt sich aus dem Bild, deshalb stehen die Masse im
   Markup: sonst springt der Text beim Laden. */
.bb-bild-voll { margin: 20px 0; }
.bb-bild-voll picture { display: block; }
.bb-bild-voll img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
}

/* Der Schlusssatz des Einstiegs. Er gehoert zur Haltung der Seite,
   nicht ins Kleingedruckte - deshalb etwas Luft davor und die
   ruhigere, groessere Schrift. */
.bb-zusage {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  color: var(--ton-800);
}

.bb-gedanken { list-style: none; padding: 0; margin: 0 0 20px; }
.bb-gedanken li {
  padding: 10px 0 10px 18px; border-left: 3px solid var(--ton-100);
  margin-bottom: 6px; font-style: italic;
}

.bb-intro { background: var(--ton-50); border-radius: 10px; padding: 18px 20px; margin-bottom: 26px; }
.bb-intro p:last-child { margin-bottom: 0; }

/* --- Die Zueignung ganz oben ---------------------------------------
   Der erste Satz der Seite, unter dem Auftaktbild. Er steht fuer sich:
   heller Grund, rosa Rahmen, mittig, dazu zwei Trennstriche in der
   Rahmenfarbe, die zu den Seiten auslaufen.
   V047: Die Beschreibung sprach noch von einer GOLDENEN Linie und von
   einer Stellung VOR dem Bild. Beides stimmt seit V036 bzw. V042
   nicht mehr - der Kommentar ist mit umgezogen worden, ohne
   nachgefuehrt zu werden. */
.bb-zueignung {
  margin: 22px 0 6px;
  padding: 28px 24px 26px;
  text-align: center;
  background: var(--weiss);
  border: 2px solid var(--ton-200);
  border-radius: 14px;
}
.bb-zueignung p { margin: 0; }
.bb-zueignung-satz {
  font-size: 24px; line-height: 1.35; font-weight: 600;
  color: var(--ton-800);
}

/* Trennstrich in der Farbe des Rahmens: in der Mitte voll, nach beiden
   Seiten auslaufend. Kein durchgehender Balken - der wuerde den Kasten
   in Faecher teilen, statt die Gedanken zu trennen. */
.bb-trenner {
  border: 0;
  height: 2px;
  width: 100%;
  max-width: 340px;
  margin: 18px auto;
  background: linear-gradient(to right,
              rgba(244,192,209,0) 0%,
              var(--ton-200) 30%,
              var(--ton-200) 70%,
              rgba(244,192,209,0) 100%);
}

.bb-zueignung p + p,
.bb-zueignung .bb-trenner + p {
  font-size: 18px; line-height: 1.6; color: var(--text);
}

/* Die beiden langen Absaetze linksbuendig: mittig gesetzte Fliesstexte
   ueber mehrere Zeilen liest niemand gern. Die kurzen Saetze oben
   bleiben mittig. */
.bb-zueignung-fliess {
  text-align: left;
  margin-bottom: 14px !important;
}
.bb-zueignung-fliess:last-child { margin-bottom: 0 !important; }

@media (max-width: 480px) {
  .bb-zueignung { padding: 22px 18px 20px; }
  .bb-zueignung-satz { font-size: 21px; }
  .bb-zueignung p + p { font-size: 17px; }
  .bb-trenner { margin: 15px auto; }
}

/* --- Schrittleiste ------------------------------------------------
   Wie in einem Kaufvorgang: erledigt ist anklickbar und traegt einen
   Haken, der aktuelle Schritt ist hervorgehoben, kommende sind blass
   und gesperrt. */
.bb-schritte { margin: 20px 0 -4px; }
.bb-schritte ol {
  display: flex; list-style: none; margin: 0; padding: 0;
  gap: 6px; justify-content: space-between;
}
.bb-schritte li { flex: 1 1 0; min-width: 0; position: relative; }

/* Verbindungslinie zwischen den Feldern */
.bb-schritte li + li::before {
  content: ""; position: absolute; left: -6px; top: 50%;
  width: 6px; height: 2px; background: var(--linie);
}
.bb-schritte li.fertig + li::before,
.bb-schritte li.jetzt + li::before { background: var(--ton-200); }

.bb-schritte a,
.bb-schritte span[title] {
  display: flex; align-items: center; justify-content: center;
  height: 38px; border-radius: 9px;
  border: 1px solid var(--linie); background: var(--weiss);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--text);
  text-decoration: none;
}
.bb-schritte li.fertig a {
  border-color: var(--ton-200); background: var(--ton-100); color: var(--ton-800);
}
.bb-schritte li.fertig a:hover { background: var(--ton-200); }
.bb-schritte li.jetzt span[title] {
  border-color: var(--ton-400); background: var(--ton-400); color: var(--weiss);
}
/* Begonnen, aber noch nicht fertig: anklickbar wie erledigt, aber mit
   Ziffer statt Haken und nur umrandet - man sieht, wo noch etwas fehlt. */
.bb-schritte li.begonnen a {
  border-color: var(--ton-400); background: var(--weiss); color: var(--ton-600);
}
.bb-schritte li.begonnen a:hover { background: var(--ton-100); }
.bb-schritte li.begonnen + li::before { background: var(--ton-200); }
.bb-schritte li.offen span[title] { opacity: .5; }

/* Im erledigten Feld steht der Haken statt der Zahl - er wird gar
   nicht erst ausgegeben, wo er nicht hingehoert. */
.bb-schritte .bb-haken { font-size: 15px; }

.bb-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Fragen ------------------------------------------------------- */
.bb-frage-block { border: 0; padding: 0; margin: 0 0 30px; }
.bb-frage-block legend {
  padding: 0 0 12px; font-size: 19px; line-height: 1.5; color: var(--ton-800);
}
.bb-frage-block.bb-fehler legend { color: #8a5a00; }

.bb-skala { display: flex; flex-direction: column; gap: 6px; }
.bb-wahl {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--linie); border-radius: 9px;
  background: var(--weiss); cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
.bb-wahl:hover { border-color: var(--ton-200); background: var(--ton-50); }
.bb-wahl input { margin: 0; accent-color: var(--ton-400); flex: 0 0 auto; }
.bb-wahl:has(input:checked) { border-color: var(--ton-400); background: var(--ton-100); }
.bb-zahl {
  flex: 0 0 24px; text-align: center; font-weight: 700; color: var(--ton-600);
}
.bb-weissnicht { margin-top: 8px; font-style: italic; opacity: .85; }
.bb-weissnicht .bb-wort { padding-left: 2px; }

.bb-status {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; min-height: 20px; margin: 0 0 8px;
}
.bb-status-fehler { color: #8a5a00; }

/* --- Buttons ------------------------------------------------------ */
/* Der Rand ist IMMER 2 Pixel breit, im Ruhezustand nur durchsichtig
   bzw. in der eigenen Farbe. Sonst wuerde der Knopf beim Ueberfahren
   groesser und die Seite ruckelte. */
.btn {
  display: inline-block; padding: 14px 21px; margin-top: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; font-weight: 600; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: 10px; cursor: pointer;
}
/* V047: KEIN GOLD MEHR. Bis hierher wechselte beim Ueberfahren nur der
   RAHMEN auf Goldgelb - eine Farbe, die sonst nirgends vorkommt und
   die beim Darueberfahren aufblitzte.

   Jetzt dieselbe Sprache wie auf amorazza.de:
     der wichtige Knopf ist GEFUELLT und wird beim Ueberfahren dunkler
     der zweite hat einen RAHMEN und wird beim Ueberfahren voller
   In beiden Faellen aendert sich die FLAECHE, nicht eine Zierlinie.
   Das ist ruhiger und sagt zugleich mehr.

   Die Palette ist dieselbe wie drueben: --ton-400 entspricht
   --rose-400, --ton-600 entspricht --rose-600. */
.btn:focus-visible { outline: 2px solid var(--ton-600); outline-offset: 2px; }

/* Der wichtige Knopf: gefuellt, wird beim Ueberfahren DUNKLER.

   NICHT --ton-400 als Ruhefarbe, obwohl amorazza.de es so macht:
   Weiss auf #d4537e ergibt nur 3,93 zu 1. Fuer Text dieser Groesse
   sind 4,5 gefordert - Amorazzas eigener Knopf erfuellt das nicht,
   nachgemessen. Diesen Mangel wollte ich nicht mituebernehmen.

   Stattdessen --ton-600 in Ruhe (7,0 zu 1) und --ton-800 beim
   Ueberfahren (14,6 zu 1). Die Sprache bleibt dieselbe wie drueben:
   gefuellte Flaeche, die sich beim Ueberfahren aendert - nur eben
   lesbar. */
.btn-primary {
  background: var(--ton-600); color: var(--weiss);
  border-color: var(--ton-600);
}
.btn-primary:hover {
  background: var(--ton-800); border-color: var(--ton-800);
}
.btn-primary[disabled] { background: var(--ton-200); border-color: var(--ton-200); color: var(--ton-800); cursor: not-allowed; }
.btn-primary[disabled]:hover { background: var(--ton-200); border-color: var(--ton-200); }

/* Der zweite Knopf: Rahmen statt Fuellung, mit einem Hauch Farbe
   innen - genau die Machart der Kaesten auf amorazza.de. */
.btn-secondary {
  background: rgba(212, 83, 126, .05);
  color: var(--ton-600);
  border-color: var(--ton-400);
}
.btn-secondary:hover {
  background: rgba(212, 83, 126, .12);
  border-color: var(--ton-600);
}

.btn-block { display: block; width: 100%; }

.bb-tor .btn { margin-top: 10px; }

/* --- Ergebnis ----------------------------------------------------- */
.bb-stufe { background: var(--ton-100); border-color: var(--ton-200); }
.bb-stufe h1 { font-size: 30px; }
.bb-befund .bb-satz { font-size: 22px; line-height: 1.5; margin: 0; }
.bb-belege ul { list-style: none; padding: 0; margin: 0; }
.bb-belege li {
  padding: 12px 0 12px 18px; border-left: 3px solid var(--ton-200); margin-bottom: 10px;
}
/* Die Zusage vor den freiwilligen Angaben. Sie muss ins Auge fallen,
   sonst wirkt die Zwischenseite wie eine Mautstelle.
   V047: Der goldene Balken links ist raus - Gold kommt auf der Seite
   nirgends mehr vor, und fuer eine einzige Stelle lohnt keine eigene
   Farbe. Stattdessen ein kraeftigerer Balken in --ton-400: dieselbe
   Farbe wie die Knopfrahmen, nur breiter. Der Kasten faellt weiterhin
   auf, jetzt aber in der Sprache der Seite. */
.bb-zusage-kasten {
  margin: 4px 0 22px;
  padding: 18px 20px;
  background: var(--ton-100);
  border: 2px solid var(--ton-200);
  border-left: 4px solid var(--ton-400);
  border-radius: 10px;
}
.bb-zusage-kasten p { margin: 0 0 10px; color: var(--ton-800); font-size: 19px; }
.bb-zusage-kasten p:last-child { margin-bottom: 0; font-size: 17px; color: var(--text); }

/* --- Bereichsprofil ------------------------------------------------
   Ein Balken und ein Wort, keine Zahl. Die Faerbung folgt dem Band,
   nicht dem Werturteil: kein Rot fuer "schlecht", kein Gruen fuer
   "gut". Alles bleibt in der rose-Palette, nur unterschiedlich satt. */
.bb-profil-liste { list-style: none; padding: 0; margin: 18px 0 0; }
.bb-profil-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--linie);
}
.bb-profil-zeile:first-child { border-top: 0; }
.bb-profil-name { font-size: 17px; color: var(--ton-800); }
.bb-profil-balken {
  display: block; height: 10px; border-radius: 5px;
  background: var(--ton-50); overflow: hidden;
}
.bb-profil-fuellung { display: block; height: 100%; background: var(--ton-200); width: 0; }
/* Breiten in Fuenferschritten. Als Klasse, weil die CSP Stilangaben
   direkt am Element verbietet - siehe Kommentar in ergebnis.php. */
.bb-profil-fuellung.breite-0 { width: 0%; }
.bb-profil-fuellung.breite-5 { width: 5%; }
.bb-profil-fuellung.breite-10 { width: 10%; }
.bb-profil-fuellung.breite-15 { width: 15%; }
.bb-profil-fuellung.breite-20 { width: 20%; }
.bb-profil-fuellung.breite-25 { width: 25%; }
.bb-profil-fuellung.breite-30 { width: 30%; }
.bb-profil-fuellung.breite-35 { width: 35%; }
.bb-profil-fuellung.breite-40 { width: 40%; }
.bb-profil-fuellung.breite-45 { width: 45%; }
.bb-profil-fuellung.breite-50 { width: 50%; }
.bb-profil-fuellung.breite-55 { width: 55%; }
.bb-profil-fuellung.breite-60 { width: 60%; }
.bb-profil-fuellung.breite-65 { width: 65%; }
.bb-profil-fuellung.breite-70 { width: 70%; }
.bb-profil-fuellung.breite-75 { width: 75%; }
.bb-profil-fuellung.breite-80 { width: 80%; }
.bb-profil-fuellung.breite-85 { width: 85%; }
.bb-profil-fuellung.breite-90 { width: 90%; }
.bb-profil-fuellung.breite-95 { width: 95%; }
.bb-profil-fuellung.breite-100 { width: 100%; }
.bb-profil-zeile.band-hoch      .bb-profil-fuellung { background: var(--ton-400); }
.bb-profil-zeile.band-sehr_hoch .bb-profil-fuellung { background: var(--ton-600); }
.bb-profil-zeile.band-unklar    .bb-profil-balken   { background: repeating-linear-gradient(
    45deg, var(--ton-50), var(--ton-50) 5px, var(--weiss) 5px, var(--weiss) 10px); }
.bb-profil-wort {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; color: var(--text);
}

.bb-bilanz { background: var(--ton-50); }

.bb-entlastung { background: var(--ton-50); }
.bb-frage .bb-kernsatz { border: 0; padding: 0; font-size: 23px; text-align: center; }
.bb-kachel { background: var(--ton-800); border-color: var(--ton-800); color: var(--ton-100); }
.bb-kachel p { color: var(--ton-100); }
.bb-kachel .bb-satz { color: var(--weiss); }
/* V047: Auf dem dunklen Kachelgrund muss der Knopf HELL sein, sonst
   verschwindet er. Beim Ueberfahren wird er weiss - wieder die Flaeche
   statt einer Zierlinie. */
.bb-kachel .btn-primary { background: var(--ton-200); border-color: var(--ton-200); color: var(--ton-800); }
.bb-kachel .btn-primary:hover { background: var(--weiss); border-color: var(--weiss); color: var(--ton-800); }
.bb-kachel .btn:focus-visible { outline-color: var(--ton-200); }

.bb-status-ok { color: var(--ton-600); }
.bb-merken .btn { margin-top: 10px; }
.bb-angaben .bb-frage-block { margin-bottom: 22px; }
.bb-angaben .bb-frage-block legend { font-size: 17px; }

.bb-link input {
  width: 100%; padding: 11px 13px; font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--linie); border-radius: 8px; color: var(--text);
  background: var(--ton-50);
}

/* Die beiden Ausgaenge stehen in einer eigenen, ruhigen Karte GANZ
   UNTEN - weit weg vom Weiter-Knopf, damit niemand versehentlich
   seine Antworten loescht. */
.bb-ausgang { background: transparent; border-style: dashed; }
.bb-ausgang .btn { margin-top: 8px; }
.bb-ausgang form { margin: 0; }

.bb-zwischenstand {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
}
.bb-zwischenstand a { color: var(--ton-600); }
.bb-erledigt { color: var(--ton-600); }

/* --- Rechtsseiten ------------------------------------------------- */
.bb-legal h2 { font-size: 19px; margin: 30px 0 10px; }
.bb-legal ul { padding-left: 22px; margin: 0 0 16px; }
.bb-legal li { margin-bottom: 8px; }
.bb-legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; background: var(--ton-50); padding: 1px 5px; border-radius: 4px;
}
.bb-tabelle {
  width: 100%; border-collapse: collapse; margin: 0 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}
.bb-tabelle th {
  text-align: left; padding: 9px 10px; background: var(--ton-100);
  color: var(--ton-800); font-size: 14px;
}
.bb-tabelle td {
  padding: 10px; border-top: 1px solid var(--linie); vertical-align: top;
  line-height: 1.5;
}

.bb-recht {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: 13px; line-height: 2;
}
.bb-recht a { color: var(--ton-600); }

.bb-fuss {
  max-width: 680px; margin: 0 auto; padding: 10px 20px 50px;
  font-size: 14px; text-align: center; opacity: .85;
}
.bb-fuss a { color: var(--ton-600); }

@media (max-width: 480px) {
  body { font-size: 17px; }
  .bb-block { padding: 20px 16px; border-radius: 10px; }
  h1 { font-size: 24px; }
  .bb-inhalt { padding: 4px 12px 50px; }
}