/*
 * Dateiname: basis.css
 * Zielverzeichnis: /assets/design/
 * Zweck: Einheitliche, bewusst gekapselte Grundgestaltung der Mitfahrhilfe.
 * Test-URL (nach späterer Einbindung): https://mitfahren.brothaus.tel/fahrer_registrieren.php
 * @ROADMAP: Erst als separate Datei bereitstellen; anschließend PHP-Templates einzeln prüfen
 *           und nur mit aktivierter CI-Steuerung an diese Klassen anschließen.
 * @CALLS: Keine; verwendet CSS-Variablen aus /assets/design/design.css.
 * @CALLED_BY: Noch keine produktive PHP-Datei. Spätere Einbindung nur nach Quellcodeprüfung.
 * KID-MARKER: BROTHAUS-CI-BASIS-20261104-A
 * 🛑 STOP-Box / Ampel: GELB – nur bereitstellen, nicht pauschal auf alle Seiten anwenden.
 * 🧹 Löschbarkeit: Solange noch keine Seite diese Datei lädt, gefahrlos entfernbar.
 * Parameter: Keine URL-Parameter. CSS-URL nach Upload:
 *   https://mitfahren.brothaus.tel/assets/design/basis.css
 * Beispielseite nach späterer Integration:
 *   https://mitfahren.brothaus.tel/mitfahrwunsch.php
 *
 * 🎨 DESIGN: Die Farbwerte sind absichtlich nicht hier festgeschrieben.
 *    Die freigegebene design.css stellt --ink, --accent, --line, --soft,
 *    --brothaus-ci-left, --brothaus-ci-middle, --brothaus-ci-right,
 *    --brothaus-ci-card und --brothaus-ci-button bereit.
 *    Fallback-Werte dienen ausschließlich der stabilen Darstellung ohne Profil.
 * 🎨 LAYOUT: Alle Regeln sind auf .bh-ui begrenzt. So wird keine Altseite
 *    versehentlich durch allgemeine Selektoren wie body, header oder button verändert.
 */

/* 1. Komponentenrahmen: Schrift und grundlegende Boxberechnung. */
.bh-ui, .bh-ui *, .bh-ui *::before, .bh-ui *::after { box-sizing: border-box; }
.bh-ui { color: var(--ink, #123F4A); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; }

/* 2. 🎨 LAYOUT: Einheitliche Inhaltsbreite, auf kleinen Geräten flexibel. */
.bh-ui .bh-seite { width: min(100% - 32px, 1100px); margin-inline: auto; background: #fff; }
.bh-ui .bh-inhalt { padding: clamp(16px, 3vw, 30px); }

/* 3. 🎨 HEADER: Überschrift mittig, Logo rechts, drei gleich breite Spalten. */
.bh-ui .bh-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 12px; min-height: 110px; padding: 18px 26px;
  color: var(--ink, #123F4A);
  background: linear-gradient(90deg, var(--brothaus-ci-left, #bcebc2), var(--brothaus-ci-middle, #D5F1BB) 50%, var(--brothaus-ci-right, #DDF5B5));
}
.bh-ui .bh-header-titel { grid-column: 2; margin: 0; text-align: center; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.bh-ui .bh-header-logo { grid-column: 3; justify-self: end; max-width: 150px; width: 100%; max-height: 85px; object-fit: contain; }
.bh-ui .bh-seitentitel { margin: 0 0 18px; font-size: clamp(21px, 2.5vw, 28px); }

/* 4. 🎨 INFO-KACHELN: Einheitlicher Hintergrund und Rahmen. */
.bh-ui .bh-info { padding: 16px 18px; border: 1px solid var(--line, #CBDED3); border-radius: 10px; background: var(--brothaus-ci-card, #edf8f3); margin-block: 14px; }

/* 5. 🎨 FORMULARE: Lesbare Felder, identische Abstände und Fokusdarstellung. */
.bh-ui .bh-formular { display: grid; gap: 16px; }
.bh-ui .bh-feld { display: grid; gap: 6px; }
.bh-ui .bh-feld > label { font-weight: 650; }
.bh-ui .bh-feld :is(input, select, textarea) { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line, #CBDED3); border-radius: 7px; background: #fff; color: var(--ink, #123F4A); font: inherit; }
.bh-ui .bh-feld textarea { min-height: 100px; resize: vertical; }
.bh-ui :is(input, select, textarea, button, a):focus-visible { outline: 3px solid var(--accent, #08775b); outline-offset: 2px; }

/* 6. 🎨 SCHALTFLÄCHEN: Nur ausdrücklich markierte Komponenten verändern. */
.bh-ui .bh-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 42px; border: 1px solid transparent; border-radius: 8px; background: var(--brothaus-ci-button, #08775b); color: #fff; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.bh-ui .bh-button:hover { filter: brightness(.9); }
.bh-ui .bh-button-sekundaer { background: var(--soft, #edf8f3); color: var(--ink, #123F4A); border-color: var(--line, #CBDED3); }
.bh-ui .bh-button-gefahr { background: #a32323; color: #fff; }

/* 7. 🎨 MOBIL: Header und Formularflächen dürfen nicht überlaufen. */
@media (max-width: 600px) {
  .bh-ui .bh-seite { width: 100%; }
  .bh-ui .bh-header { padding: 14px; min-height: 88px; gap: 8px; }
  .bh-ui .bh-header-logo { max-width: 100px; max-height: 65px; }
  .bh-ui .bh-inhalt { padding: 16px; }
}