/* ============================================================================
   Farbliche Auffrischung des öffentlichen Bereichs
   ----------------------------------------------------------------------------
   Wird NACH tailwind.css geladen und überschreibt gezielt einzelne Farbwerte.
   So bleibt die kompilierte Tailwind-Datei unangetastet — ein erneuter
   Kompiliervorgang ist nicht nötig, und die Änderung lässt sich rückgängig
   machen, indem diese Datei entfernt wird.

   Gestaltungsgedanke: Das Blau bleibt Hausfarbe. Dazu kommen ein warmer
   Grundton, der das kühle Grau ablöst, und ein Rostrot als Akzent — bewusst
   sparsam eingesetzt, damit der Blick dorthin geht, wo etwas zu tun ist.
   ============================================================================ */

:root {
  /* Warme Grundtöne statt kühlem Grau */
  --creme:      #FAF6EF;
  --sand:       #E8DCC8;
  --sand-hell:  #F2E9DA;

  /* Akzentfarben */
  --akzent:       #B4472A;   /* Rostrot - war bereits als "rust" hinterlegt */
  --akzent-dunkel:#93381F;
  --bernstein:    #C8842B;
}

/* ----------------------------------------------------------------------------
   Flächen: kühles Grau wird zu warmem Creme
   ---------------------------------------------------------------------------- */
.bg-paper { background-color: var(--creme) !important; }

/* Abgestufte Flächen behalten ihre Abstufung, werden aber ebenfalls wärmer */
.bg-paper\/25 { background-color: rgba(250, 246, 239, .55) !important; }
.bg-mercury\/40 { background-color: rgba(232, 220, 200, .45) !important; }

/* ----------------------------------------------------------------------------
   Trennlinien: wärmer, damit sie nicht kalt gegen die Flächen stehen
   ---------------------------------------------------------------------------- */
.border-mercury { border-color: var(--sand) !important; }

/* ----------------------------------------------------------------------------
   Hauptschaltfläche: Rostrot statt Blau.
   Nur der Knopf, der zur Preisberechnung führt — dadurch fällt er auf.
   ---------------------------------------------------------------------------- */
.knopf-akzent,
a[href*="sofortpreis"].bg-marke,
button.bg-marke[type="submit"] {
  background-color: var(--akzent) !important;
}
.knopf-akzent:hover,
a[href*="sofortpreis"].bg-marke:hover,
button.bg-marke[type="submit"]:hover {
  background-color: var(--akzent-dunkel) !important;
}

/* ----------------------------------------------------------------------------
   Kennzahlen und Aufzählungen: eine farbige Kante gibt Halt
   ---------------------------------------------------------------------------- */
.kennzahl-akzent {
  border-left: 3px solid var(--bernstein);
  padding-left: 1rem;
}

/* Zahlen in Kennzahlenblöcken bleiben blau, die Beschriftung wird wärmer */
.kennzahl-beschriftung { color: #7A6A52; }

/* ----------------------------------------------------------------------------
   Abschnittsüberschriften: kleine farbige Marke davor
   ---------------------------------------------------------------------------- */
.abschnitt-marke::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--akzent);
  margin-bottom: .9rem;
  border-radius: 2px;
}

/* ----------------------------------------------------------------------------
   Leistungsseiten: dieselben Töne, damit alles zusammenpasst
   ---------------------------------------------------------------------------- */
body .titel-bereich { background: var(--creme); border-bottom-color: var(--sand); }
body section.hell { background: var(--creme); }

body .knopf-voll { background: var(--akzent); }
body .knopf-voll:hover { background: var(--akzent-dunkel); }

body .karte { border-color: var(--sand); }
body .karte .symbol { background: var(--bernstein); }

body .schritt { border-left-color: var(--sand); }
body .schritt:first-child { border-left-color: var(--akzent); }
body .schritt .nr { color: var(--bernstein); }

body .fahrzeuge th { background: var(--sand-hell); border-bottom-color: var(--sand); }
body .fahrzeuge { border-color: var(--sand); }
body .fahrzeuge td { border-bottom-color: var(--sand-hell); }

body .branche { border-color: var(--sand); }
body .branche:hover { border-color: var(--akzent); color: var(--akzent); }

body .frage { border-color: var(--sand); }
body .frage[open] summary { border-bottom-color: var(--sand); color: var(--akzent); }
body .frage summary span:last-child { color: var(--bernstein); }

body .verwandt a { border-color: var(--sand); }
body .verwandt a:hover { border-color: var(--akzent); }

body .merkmale .zahl { color: var(--bernstein); }

/* Der Abschluss-Aufruf bleibt blau — er soll ruhig wirken, nicht drängen.
   Nur der Knopf darin ist farbig. */
body .abschluss .knopf-voll { background: var(--creme); color: var(--akzent); }
body .abschluss .knopf-voll:hover { background: #fff; }

/* ----------------------------------------------------------------------------
   Dunkle Flächen leicht anwärmen
   ----------------------------------------------------------------------------
   Das nahezu schwarze Blau wirkt gegen die warmen Töne hart. Ein Hauch mehr
   Braun darin nimmt die Kante, ohne dass es bräunlich aussieht.
   ---------------------------------------------------------------------------- */
.bg-ink { background-color: #1B222A !important; }
body .merkmale { background: #1B222A; }
body .fuss { background: #1B222A; }

/* Die Zahlen in der Merkmalsleiste in Bernstein - sie gliedern und
   verbinden die dunkle Fläche mit den warmen Tönen darüber und darunter. */
body .merkmale .zahl { color: var(--bernstein); }

/* ----------------------------------------------------------------------------
   Lesbarkeit
   ----------------------------------------------------------------------------
   Bernstein auf Weiß hat für Fließtext zu wenig Kontrast. Er wird deshalb nur
   für Flächen, Symbole und kurze Beschriftungen verwendet, nie für längere
   Texte. Rostrot ist auf Weiß ausreichend kontrastreich.
   ---------------------------------------------------------------------------- */

/* ============================================================================
   Punkt 93 (18.8.2026, Wunsch Sascha): Der Sofortpreis-Rechner freundlicher -
   farbig statt fast schwarz, und mit gefälligerer Schrift.
   ----------------------------------------------------------------------------
   Gestaltungsgedanke: Der Kasten wird zu einem freundlichen Verlauf in der
   Hausfarbe (Markenblau, nach unten heller), die Eingaben zu warmen
   Creme-Feldern mit weichen Ecken, der Rechen-Knopf zu warmem Bernstein.
   Die technisch harte Schreibmaschinen-Schrift (JetBrains Mono) weicht im
   Rechner der freundlichen Haus-Schrift Public Sans (liegt lokal vor -
   keine neue Abhängigkeit). F56-Lehre beachtet: Alle Textfarben sind gegen
   den NEUEN helleren Verlauf geprüft und wo nötig im Rechner-Bereich
   angehoben (Silbergrau wäre auf hellem Blau zu schwach).
   ============================================================================ */

/* Freundlicher Blau-Verlauf statt Fast-Schwarz; weiche Ecken */
#rechner {
  background: linear-gradient(165deg, #2E5583 0%, #40699B 45%, #5E88B5 100%) !important;
  border-radius: .9rem !important;
}

/* Gefälligere Schrift im ganzen Rechner: Public Sans statt Schreibmaschine */
#rechner, #rechner input, #rechner select, #rechner button,
#rechner .font-mono, #rechner .font-display {
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
#rechner h2, #rechner .font-display.font-bold { font-weight: 700; }

/* Beschriftungen: auf dem helleren Blau kräftig weiß statt Silbergrau */
#rechner .text-mercury, #rechner .text-mercury\/80 { color: #EAF1F8 !important; }
#rechner .text-steel { color: #DCE7F1 !important; }

/* Eingaben: warme Creme-Felder, weiche Ecken, warmer Fokus-Rahmen */
#rechner input, #rechner select {
  background-color: var(--creme) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  border-radius: .55rem !important;
}
#rechner input:focus, #rechner select:focus {
  outline: 2px solid var(--bernstein);
  outline-offset: 1px;
}
#rechner ::placeholder { color: #8A9096; }

/* Weiche Ecken auch für Knöpfe, Listen und Kästen im Rechner */
#rechner .rounded-sm { border-radius: .55rem !important; }

/* Haupt-Knöpfe (Weiter zur Fahrzeugwahl, Jetzt zum Auftrag): warmes
   Bernstein - freundlich und gut sichtbar auf dem Blau */
#rechner button[type="submit"], #rechner #zumAuftrag {
  background-color: var(--bernstein) !important;
  color: #FFFDF8 !important;
}
#rechner button[type="submit"]:hover, #rechner #zumAuftrag:hover {
  background-color: #A96C1F !important;
  color: #fff !important;
}

/* Nettobetrag: warmes Hellgold statt Markenblau (Blau auf Blau wäre unsichtbar) */
#rechner #calcNetto { color: #FFDFAE !important; }

/* Warnhinweis: helles Warm-Rot auf Blau lesbar (Rost pur wäre zu dunkel) */
#rechner #calcWarnung {
  color: #FFE0D6 !important;
  background-color: rgba(147, 56, 31, .55) !important;
  border-color: rgba(255, 224, 214, .5) !important;
}

/* Kontakt-Band "alles zu klein": kräftiges Rost, damit der Blick hingeht */
#rechner #fwAlleZuKlein {
  background-color: var(--akzent-dunkel) !important;
  border-color: rgba(255, 224, 214, .5) !important;
  color: #FFF3EE !important;
}

/* Fahrzeug-Karten: Creme-Karten mit weichen Ecken; Empfehlungs-Band bleibt
   Markenblau, die Ladedaten dunkel genug auf Creme */
#rechner .fw-karte { border-radius: .7rem !important; }
#rechner .fw-karte .text-steel { color: #48586A !important; }

/* ============================================================
   F62 (18.8.2026, Wunsch Sascha): Feldueberschriften UEBERALL
   IMMER FETT - "ueberall" schliesst den oeffentlichen Rechner
   und die Formulare der oeffentlichen Seiten mit ein. Die
   vorgefertigte tailwind.css kennt keine eigene Label-Gewichts-
   Regel, darum greift die Element-Regel hier durchgaengig.
   ============================================================ */
label { font-weight: 700; }

/* ============================================================
   F64 (19.8.2026, Befund Sascha): Der Sofortpreis-Rechner war
   am Handy BREITER als das Display und wurde nicht schmaeler.
   Zwei Ursachen: (1) Eingabefelder bringen eine Browser-
   Eigenbreite (~size 20) mit, und Grid-/Flex-Kinder duerfen
   ohne min-width:0 nie schmaler werden als ihr Inhalt - die
   zweispaltigen Orte-Felder drueckten so den ganzen Kasten
   auf. (2) Die Packstueck-Zeile (87) ist eine starre Flex-
   Zeile (Auswahl 7,5rem + Anzahl + Gewicht + Knopf), die
   nicht umbrechen durfte. Alle Regeln NUR im Handy-Bereich -
   am PC bleibt die Gestaltung pixelgleich (F56-Lehre).
   ============================================================ */
@media (max-width: 640px) {
  /* Der Rechner-Kasten selbst ist Grid-Kind der Startseiten-
     Zeile und braucht dieselbe Schrumpf-Erlaubnis. */
  #rechner { min-width: 0; }

  /* Felder duerfen schmaler werden als ihre Browser-Eigenbreite
     und nie breiter als ihre Spalte. */
  #rechner input, #rechner select { min-width: 0; max-width: 100%; }

  /* Grid-Spalten (Orte-Paar, Datum/Uhrzeit) und Flex-Kinder
     duerfen mit dem Display schrumpfen. */
  #rechner .grid > * { min-width: 0; }

  /* Packstueck-Zeile: darf umbrechen; die Auswahl gibt ihre
     feste Inline-Mindestbreite auf (deshalb !important) und
     teilt sich die erste Zeile mit der Anzahl, das Gewicht
     ruecken bei Platznot samt Entfernen-Knopf darunter. */
  #rechner .pack-zeile { flex-wrap: wrap; }
  #rechner .pack-zeile .pk-art { min-width: 0 !important; flex: 1 1 8rem; }
  #rechner .pack-zeile .pk-anzahl { flex: 0 0 4.5rem; width: 4.5rem; }
  #rechner .pack-zeile .pk-gewicht { flex: 1 1 7.5rem; }
}