/* ============================================================
   GM Immobilien Holding GmbH – Basis-Stylesheet
   Farbwelt aus dem Logo: Weiß, Dunkelblau (#002B54), Anthrazit.
   Schrift: Inter (lokal, variable, Subset Latin/Latin-1/Latin-Ext-A).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* Farben */
  --navy: #002B54;        /* Logo-Blau, Überschriften, Primär-Buttons */
  --navy-deep: #001C38;   /* Hover-Zustand, Verläufe */
  --ink: #1F262E;         /* Fließtext (Anthrazit aus dem Logo) */
  --slate: #4F5D6E;       /* Sekundärtext – 6.5:1 auf Weiß */
  --line: #D6DCE3;        /* Trennlinien (dekorativ) */
  --line-strong: #6E7C8D; /* Formularrahmen – ≥ 3:1 auf Weiß */
  --paper: #F3F5F8;       /* leicht getönte Flächen */
  --white: #FFFFFF;
  --on-navy-muted: #C2CCD9; /* Sekundärtext auf Dunkelblau – ≥ 9:1 */
  --focus: #0A5BD1;       /* Fokusring, 3:1 gegen Weiß UND Navy erfüllt s. Baseline */
  --error: #B3261E;       /* Fehlertext – 6.4:1 auf Weiß */

  /* Typografie */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --a11y-lh: 1.6;

  /* Layout */
  --max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--white);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  line-height: var(--a11y-lh);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; min-width: 0; }

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--navy-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Skip-Link – erst bei Fokus sichtbar */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10000;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; outline-color: var(--white); outline-offset: -6px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* ── Header ── */
.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--navy);
}
.brand img { height: 44px; width: auto; }
.brand-name {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.brand-name small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--slate);
  letter-spacing: 0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--paper); color: var(--navy-deep); }
.btn-on-navy { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-on-navy:hover { background: var(--paper); border-color: var(--paper); color: var(--navy-deep); }
.btn-outline-on-navy { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-outline-on-navy:hover { border-color: var(--white); background: rgba(255,255,255,.08); color: var(--white); }

/* ── Aufbau-Seite (Phase 1) ── */
.stage {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100dvh - var(--header-h));
}
.stage-text {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  display: flex;
  align-items: center;
}
.stage-text .inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.stage-text h1 { max-width: 16ch; }
.stage-lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--slate);
  max-width: 48ch;
  margin-bottom: 2rem;
}
.stage-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.stage-panel {
  background: var(--navy);
  color: var(--white);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  display: flex;
  align-items: center;
}
.stage-panel .inner { width: min(100%, 34rem); margin-inline: auto; }
.stage-panel h2 {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-list li { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; align-items: start; }
.contact-list svg { width: 24px; height: 24px; margin-top: 2px; color: var(--on-navy-muted); }
.contact-list .label { display: block; font-size: 0.85rem; color: var(--on-navy-muted); margin-bottom: 0.15rem; }
.contact-list a { color: var(--white); font-weight: 500; font-size: 1.15rem; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-list address { font-style: normal; font-size: 1.05rem; line-height: 1.5; }
.stage-panel :focus-visible { outline-color: var(--white); }

@media (min-width: 900px) {
  .stage { grid-template-columns: 7fr 5fr; }
  .stage-text .inner { width: auto; margin: 0 0 0 max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-right: clamp(2rem, 5vw, 5rem); }
}

/* ── Rechtsseiten ── */
.legal {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem);
}
.legal .wrap { max-width: 76ch; }
.legal p, .legal li, .legal address, .legal td, .legal th { overflow-wrap: break-word; hyphens: auto; }
.legal a, .legal code { overflow-wrap: anywhere; }
.legal .meta { color: var(--slate); font-size: 0.95rem; margin-bottom: 2.5rem; }
.legal h2 { margin-top: 2.5rem; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }
.legal h3 { margin-top: 1.75rem; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4em; }
.legal address { font-style: normal; }
.legal .box {
  background: var(--paper);
  border-left: 3px solid var(--navy);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.legal .toc { list-style: none; padding: 0; margin: 0 0 2rem; columns: 2; column-gap: 2rem; font-size: 0.95rem; }
.legal .toc li { break-inside: avoid; margin-bottom: 0.35em; }
@media (max-width: 640px) { .legal .toc { columns: 1; } }
.legal table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.legal th { color: var(--navy); font-weight: 600; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.legal table { min-width: 22rem; }

/* Offene Punkte – nur im Entwurf sichtbar, vor Go-live entfernen */
.todo {
  background: #FDECEC;
  color: #8E1B14;
  border: 1px dashed #C62828;
  padding: 0.1em 0.4em;
  font-weight: 600;
  border-radius: var(--radius);
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
  font-size: 0.9rem;
  color: var(--slate);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a { color: var(--navy); text-decoration: none; padding: 0.35rem 0; display: inline-block; }
.site-footer a:hover { text-decoration: underline; }

/* ── Bewegung ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

.back-link { margin-top: 2.5rem; }

/* Kopfzeile auf schmalen Viewports: nur Icon, Text bleibt als aria-label */
@media (max-width: 720px) {
  .brand-name { white-space: nowrap; }
  
/* Schmale Viewports: lange Einzelwörter in Überschriften dürfen umbrechen.
   Zwei getrennte Regeln mit Absicht:
   overflow-wrap greift nur, wenn ein Wort sonst über den Rand liefe, und ist
   deshalb bis 420 px gefahrlos. hyphens:auto trennt dagegen auch dann, wenn
   das Wort noch passt ("Kapi-talanlage" auf einem 375-px-Telefon), und bleibt
   deshalb den wirklich engen Geräten vorbehalten. */
@media (max-width: 420px) {
  h1, h2, h3 { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  h1, h2, h3 { hyphens: auto; }
}

.contact-list .hours-line { margin: 0; font-size: 1.05rem; line-height: 1.5; }

/* ── Aufbau-Seite auf schmalen Geräten ──
   Zwei Schaltflächen mit unterschiedlicher Textlänge werden unterschiedlich
   breit (gemessen 211 px gegen 197 px). Untereinander gestapelt sieht das nach
   Versehen aus, nicht nach Absicht. Deshalb hier gleiche Breite über die volle
   Spalte. Dazu etwas mehr Luft nach unten, damit die Schaltflächen nicht direkt
   an der harten Farbkante des blauen Feldes kleben. */
@media (max-width: 560px) {
  .stage-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .stage-actions .btn { width: 100%; }
  .stage-text { padding-bottom: 3.5rem; }
  .stage-panel { padding-top: 2.75rem; }
}