/* ============================================================
   BASE — Schneider Immobilien (Foundation, Phase 3 / Etappe 1)
   Lädt Fonts lokal, setzt Grundtypografie, Layout-Rhythmus und
   die Shared-Patterns (Buttons, Karten, Trust-Zeile, Flächen).
   Themen-Quelle ist AUSSCHLIESSLICH tokens.css — hier keine
   Hex-Werte außerhalb der Tokens.
   ============================================================ */

/* ---- Fonts (lokal, variable, latin inkl. Umlaute) ---- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Allura";
  src: url("fonts/allura-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- Grundfläche & Text ---- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--surface-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { max-width: 68ch; text-wrap: pretty; }

/* Formular-Rückmeldung (Anfrage-Handler) */
.form-success, .form-flash { max-width: none; padding: 1rem 1.15rem; border-radius: 12px; line-height: 1.5; font-weight: 600; }
.form-success, .form-flash--ok { background: #eef4ec; border: 1px solid #cfe0c8; color: #2f5130; }
.form-flash--fehler { background: #fbecec; border: 1px solid #f0cccc; color: #8a2b2b; }
.form-flash { margin-bottom: 1.25rem; }
/* block + absolut positionierte Checkbox: Text und Datenschutz-Link fließen inline
   (früher flex → Link wurde eigene Spalte, Satz brach mobil gedrängt) */
.form-consent { display: block; position: relative; padding-left: 1.6rem; max-width: none; margin: .5rem 0; font-size: .85rem; line-height: 1.45; color: var(--text-on-light-dim); }
.form-consent input { position: absolute; left: 0; top: .2rem; }
.form-consent a { color: var(--brand); }

/* ---- Headings: Display-Font; groß ≠ fett (DESIGN.md §2) ---- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--fs-hero); font-weight: 560; letter-spacing: 0; line-height: 1.06; }
h2 { font-size: var(--fs-h2);   font-weight: 560; letter-spacing: .005em; }
h3 { font-size: var(--fs-h3);   font-weight: 600; line-height: 1.3; font-family: var(--font-text); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--brand); color: var(--surface-light); }

/* ---- Layout-Rhythmus ---- */
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sy); }

/* Flächen-Dramaturgie: dunkle Sektionen laufen full-bleed */
.section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.section--dark ::selection { background: var(--brand-glow); color: var(--surface-dark); }
.section--sand { background: var(--surface-sand); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-text); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  padding: .8rem 1.6rem; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: scale(1.02); }
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.btn--primary { background: var(--brand); color: var(--surface-light-2); }
.btn--primary:hover { background: var(--brand-deep); box-shadow: 0 8px 24px rgba(167, 29, 50, .25); }

.btn--secondary { background: var(--surface-light-2); color: var(--text-on-light); border-color: var(--border-light); }
.btn--secondary:hover { border-color: var(--text-on-light-dim); box-shadow: 0 6px 18px rgba(43, 35, 32, .08); }

.section--dark .btn--secondary { background: transparent; color: var(--text-on-dark); border-color: var(--glass-bd); }
.section--dark .btn--secondary:hover { border-color: var(--text-on-dark-dim); }

/* Friction-Killer-Zeile unter Primär-CTAs */
.cta-note { font-size: var(--fs-small); color: var(--text-on-light-dim); margin-top: var(--sp-2); }
.section--dark .cta-note { color: var(--text-on-dark-dim); }

/* ---- Karten ---- */
.card {
  background: var(--surface-light-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(43, 35, 32, .09); }
}

/* ---- Trust-Zeile (★ 5,0 auf Google) ---- */
.trust { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-small); }
.trust .stars { color: var(--brand); letter-spacing: .12em; font-size: 1rem; }
.trust strong { font-weight: 700; }

/* ---- Chips (Orte, Objekttypen) ---- */
.chip {
  display: inline-flex; align-items: center;
  padding: .5rem 1.1rem; border-radius: 999px;
  background: var(--surface-light-2); border: 1px solid var(--border-light);
  font-size: var(--fs-small); font-weight: 600; text-decoration: none; color: var(--text-on-light);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--brand); }
.chip--active { background: var(--brand); border-color: var(--brand); color: var(--surface-light-2); }

/* ---- Formular-Basics (Bewertungs-Widget) ---- */
.input {
  width: 100%; padding: .875rem 1rem; border-radius: var(--radius-btn);
  border: 1px solid var(--border-light); background: var(--surface-light-2);
  color: var(--text-on-light);
}
.input::placeholder { color: var(--text-on-light-dim); }
.input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* ---- Skip-Link ---- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: var(--surface-light-2); padding: .6rem 1rem; border-radius: 0 0 var(--radius-btn) 0; }
.skip-link:focus { left: 0; }

/* ---- A11y & Motion ---- */
:focus-visible { outline-color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}