/* ZD — neuer TBW-Auftritt (2026-09-19), Regelwerk tbw-orga\TBW-Brand\BRAND.md.
   Override-Schicht: wird NACH frontend.css geladen, frontend.css bleibt unveraendert.
   Rueckbau = die <link>-Zeile in private/includes/header.php entfernen.
   Tokens wie url.tbw.ch / Theme tbw-intranet. Keine Rastertoene der Sekundaerfarben. */

@font-face { font-family: "dmsans";   src: url("fonts/DMSans-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "dmsans";   src: url("fonts/DMSans-SemiBold.ttf") format("truetype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "fraunces"; src: url("fonts/fraunces_72pt-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --tbw-schwarz: #000;
  --tbw-weiss: #fff;
  --tbw-moosgruen: #0F3C28;
  --tbw-apricot: #DC6446;
  --tbw-sand: #E9D9C4;
  --tbw-pastellblau: #8291C8;
  --tbw-schwarz-30: rgba(0, 0, 0, .3);
  --tbw-schwarz-55: rgba(0, 0, 0, .55);
  --tbw-schwarz-4: rgba(0, 0, 0, .04);
  --tbw-grau-text: #4a4a4a;
  --tbw-font-sans: "dmsans", Arial, sans-serif;
  --tbw-font-akzent: "fraunces", Georgia, serif;
}

/* ---------- Grundlage ---------- */
body {
  font-family: var(--tbw-font-sans);
  font-weight: 300;
  letter-spacing: .01em;
  background: var(--tbw-weiss);
  color: var(--tbw-schwarz);
  -webkit-font-smoothing: antialiased;
}
strong, b { font-weight: 600; }
input, select, textarea, button { font-family: inherit; }

/* ---------- Kopf ---------- */
.header { box-shadow: none; border-bottom: 1px solid var(--tbw-schwarz-30); }
.header-title { color: var(--tbw-schwarz); font-weight: 600; }
/* Neues Logo (SVG, ab 2026-09-21): schmaler als das alte PNG, Mindestbreite 100 px (BRAND.md 2.4).
   Mandanten-Logos (PNG/JPG aus uploads/logos) bleiben bei den Massen aus frontend.css. */
img.logo[src$=".svg"] { height: 44px; width: auto; min-width: 100px; }

.lang-btn {
  background: transparent; color: var(--tbw-schwarz);
  border: 1px solid var(--tbw-schwarz); border-radius: 50000px;
  font-weight: 600; padding: 6px 14px;
}
.lang-btn:hover { background: var(--tbw-schwarz); color: var(--tbw-weiss); }
.lang-btn.active { background: var(--tbw-schwarz); color: var(--tbw-weiss); border-color: var(--tbw-schwarz); }

/* ---------- Karten ---------- */
.card, .welcome-card, .reading-card, .success-card {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--tbw-schwarz-30);
}
.card h1, .welcome-card h1, .reading-card h1, .success-card h1 { color: var(--tbw-schwarz); font-weight: 300; font-size: 34px; line-height: 1.15; letter-spacing: 0; }
.card h2, .welcome-card h2, .reading-card h2, .success-card h2 { color: var(--tbw-schwarz); font-weight: 300; }
@media (max-width: 768px) {
  .card h1, .welcome-card h1, .reading-card h1, .success-card h1 { font-size: 26px; }
  img.logo[src$=".svg"] { height: 36px; }
}
.card-text { color: var(--tbw-grau-text); }

/* ---------- Zaehler-Info ---------- */
.meter-info { background: var(--tbw-sand); border-left: 0; border-radius: 0; }
.meter-info-row { border-bottom-color: var(--tbw-schwarz-30); }
.meter-info-label { color: var(--tbw-schwarz); font-weight: 600; }
.meter-info-value { color: var(--tbw-schwarz); font-weight: 300; }

.meter-badge { border-radius: 50000px; font-weight: 600; }
.meter-badge-gas    { background: var(--tbw-apricot);     color: var(--tbw-schwarz); }
.meter-badge-wasser { background: var(--tbw-pastellblau); color: var(--tbw-schwarz); }

/* ---------- Formulare ---------- */
.form-group label { color: var(--tbw-schwarz); font-weight: 600; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"] {
  border: 1px solid var(--tbw-schwarz-55);
  border-radius: 0;
  font-weight: 300;
}
.form-group input:focus { border-color: var(--tbw-schwarz); box-shadow: 0 0 0 1px var(--tbw-schwarz); }
.form-group input.error { border-color: var(--tbw-apricot); box-shadow: 0 0 0 1px var(--tbw-apricot); }
.hint { color: var(--tbw-grau-text); }

.form-note {
  background: var(--tbw-sand); color: var(--tbw-schwarz);
  border-left: 0; border-radius: 0;
}
/* index.php setzt hier Inline-Farben (gelb) -> nur mit !important zu ueberschreiben */
.manual-entry-option .form-note { background: var(--tbw-sand) !important; border-color: transparent !important; }
.manual-entry-option hr { border-top-color: var(--tbw-schwarz-30) !important; }

/* manual_entry.php: Auswahlfeld traegt Inline-Stil */
#system_id { border: 1px solid var(--tbw-schwarz-55) !important; border-radius: 0 !important; background: var(--tbw-weiss); color: var(--tbw-schwarz); }
#system_id:focus { outline: none; border-color: var(--tbw-schwarz) !important; box-shadow: 0 0 0 1px var(--tbw-schwarz); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--tbw-schwarz); }

/* ---------- Gas-Hinweis ---------- */
.gas-hint { background: var(--tbw-weiss); border: 1px solid var(--tbw-moosgruen); border-left: 4px solid var(--tbw-moosgruen); border-radius: 0; }
.gas-hint img { border-radius: 0; border-color: var(--tbw-schwarz-30); }
.gas-hint p { color: var(--tbw-moosgruen); }

/* ---------- Meldungen ---------- */
.error   { background: var(--tbw-schwarz-4); color: var(--tbw-schwarz); border-left: 4px solid var(--tbw-apricot);   border-radius: 0; }
.success { background: var(--tbw-schwarz-4); color: var(--tbw-schwarz); border-left: 4px solid var(--tbw-moosgruen); border-radius: 0; }
.warning { background: var(--tbw-sand);      color: var(--tbw-schwarz); border-left: 4px solid var(--tbw-apricot);   border-radius: 0; }
/* input.error ist ein Feld: nur die Farbe anpassen, Masse bleiben wie in frontend.css */
.form-group input.error { background: var(--tbw-weiss); color: var(--tbw-schwarz); }

/* ---------- Knoepfe ---------- */
.btn { border-radius: 0; font-weight: 600; border: 1px solid transparent; }
.btn-primary { background: var(--tbw-schwarz); color: var(--tbw-weiss); border-color: var(--tbw-schwarz); }
.btn-primary:hover { background: var(--tbw-moosgruen); border-color: var(--tbw-moosgruen); }
.btn-secondary { background: var(--tbw-weiss); color: var(--tbw-schwarz); border-color: var(--tbw-schwarz); }
.btn-secondary:hover { background: var(--tbw-schwarz); color: var(--tbw-weiss); }
.btn-success { background: var(--tbw-moosgruen); color: var(--tbw-weiss); border-color: var(--tbw-moosgruen); }
.btn-success:hover { background: var(--tbw-schwarz); border-color: var(--tbw-schwarz); }
.btn:focus-visible { outline: 2px solid var(--tbw-schwarz); outline-offset: 2px; }

/* ---------- Zaehler-Auswahl (select.php hat einen eigenen <style>-Block im Body -> body-Praefix) ---------- */
body .meter-choice-card { border: 1px solid var(--tbw-schwarz-55); border-radius: 0; }
body .meter-choice-card:hover { border-color: var(--tbw-schwarz); background: var(--tbw-schwarz-4); }
body .meter-choice-card:has(input:checked) { border-color: var(--tbw-schwarz); background: var(--tbw-sand); box-shadow: 0 0 0 1px var(--tbw-schwarz); }
body .meter-choice-address { color: var(--tbw-grau-text); }

/* ---------- Bestaetigung ---------- */
.success-summary { background: var(--tbw-sand); border-radius: 0; }
.summary-row { border-bottom-color: var(--tbw-schwarz-30); }
.summary-label { color: var(--tbw-schwarz); font-weight: 600; }
.summary-value { color: var(--tbw-schwarz); font-weight: 300; }

/* ---------- Fuss (schwarz wie die neue Webseite) ---------- */
.footer { background: var(--tbw-schwarz); color: var(--tbw-weiss); border-top: 0; }
.footer-section h3 { color: var(--tbw-weiss); font-weight: 600; }
.footer-section p, .footer-section a { color: var(--tbw-weiss); }
.footer-section a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.footer-section a:hover { color: var(--tbw-weiss); text-decoration-thickness: 2px; }
.footer-claim {
  max-width: 1400px; margin: 24px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-family: var(--tbw-font-akzent); font-weight: 300; font-size: 20px; color: var(--tbw-weiss);
}