/* ============================================================
   R&R Lackierkonzept — Grundlagen
   Farben, Schrift, Abstände. Keine Bausteine, keine Abschnitte.
   Jeder Block der Seite baut ausschließlich auf diesen Werten auf.
   Die Schriften werden über schriften/schriften.css geladen.
   ============================================================ */

:root {
  /* --- Farben ---------------------------------------------
     Akzent ist BMW Atlantisblau 399, ein echter Werkston.
     Die Neutraltöne sind leicht zum Akzent hin gekippt,
     damit die Seite nicht nach Standardgrau aussieht. */
  --akzent:          #007D87;   /* Flächen, Knöpfe, weiße Schrift darauf */
  --akzent-aktiv:    #00676F;   /* Hover und aktiver Zustand */
  --akzent-schrift:  #00555C;   /* wenn der Akzent selbst Schrift ist */
  --akzent-hell:     #E0EFF1;   /* zarte Fläche */
  --akzent-zart:     #F0F7F8;   /* sehr zarte Fläche */

  --grund:           #FBFCFC;   /* Seitenhintergrund */
  --flaeche:         #F1F4F5;   /* abgesetzte Abschnitte */
  --flaeche-tief:    #15191B;   /* dunkle Vollbild-Abschnitte */
  --linie:           #DCE3E5;
  --linie-tief:      rgba(255,255,255,.14);

  --schrift:         #14181A;   /* Fließtext auf hellem Grund */
  --schrift-leise:   #596367;   /* Nebentext, Bildunterschriften */
  --schrift-hell:    #EDF1F2;   /* Text auf dunklem Grund */
  --schrift-hell-leise: #AAB4B7;

  /* --- Schriftfamilien ------------------------------------ */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text:    'Onest', system-ui, -apple-system, sans-serif;
  --f-code:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* --- Schriftgrößen --------------------------------------
     Alle Stufen wachsen mit der Fensterbreite. */
  --t-riesig:  clamp(2.25rem, 1.30rem + 4.2vw, 4.75rem);
  --t-gross:   clamp(1.75rem, 1.25rem + 2.2vw, 3.00rem);
  --t-mittel:  clamp(1.35rem, 1.12rem + 1.0vw, 1.90rem);
  --t-klein:   clamp(1.10rem, 1.02rem + 0.4vw, 1.30rem);
  --t-text:    1.0625rem;   /* 17px */
  --t-neben:   0.9375rem;   /* 15px */
  --t-code:    0.8125rem;   /* 13px */

  --zeile-eng:   1.08;
  --zeile-mittel:1.35;
  --zeile-weit:  1.65;
  --sperrung:    0.14em;    /* für Großbuchstaben-Beschriftungen */

  /* --- Abstände, Vierer-Raster ---------------------------- */
  --a1: 0.25rem;  --a2: 0.5rem;   --a3: 0.75rem;  --a4: 1rem;
  --a5: 1.5rem;   --a6: 2rem;     --a7: 3rem;     --a8: 4rem;
  --a9: 6rem;     --a10: 8rem;

  /* Luft zwischen Abschnitten, wächst mit dem Fenster */
  --abschnitt: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* --- Maße ----------------------------------------------- */
  --spur:      1240px;   /* Inhaltsbreite */
  --spur-eng:  720px;    /* Lesebreite für Fließtext */
  --rand:      clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --radius:    2px;      /* bewusst klein, nichts wirkt wie eine App */

  --zeit-kurz: .18s;
  --zeit:      .35s;
  --zeit-lang: .6s;
  --kurve:     cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* ============================================================
   Grundlagen
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--f-text);
  font-size: var(--t-text);
  line-height: var(--zeile-weit);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--f-display);
  line-height: var(--zeile-eng);
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-riesig); font-weight: 800; }
h2 { font-size: var(--t-gross);  font-weight: 700; }
h3 { font-size: var(--t-mittel); font-weight: 600; }

p { margin: 0; }
p + p { margin-top: var(--a4); }

a { color: var(--akzent-schrift); text-underline-offset: .18em; }
a:hover { color: var(--akzent-aktiv); }

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

/* Beschriftung in Großbuchstaben, für Vorzeilen und Codes */
.beschriftung {
  font-family: var(--f-code);
  font-size: var(--t-code);
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

/* Inhaltsspur und Abschnittsluft */
.spur     { width: 100%; max-width: var(--spur); margin-inline: auto; padding-inline: var(--rand); }
.spur-eng { max-width: var(--spur-eng); }
.abschnitt { padding-block: var(--abschnitt); }

/* Zahlen in Spalten sauber untereinander */
.zahlen { font-variant-numeric: tabular-nums; }

/* ============================================================
   Bewegung
   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat,
   bekommt die Seite vollständig, aber still.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Audit: Tastaturzugang und gezielte Lesbarkeitskorrekturen. */
.skip-link{position:fixed;top:1rem;left:1rem;z-index:10001;transform:translateY(calc(-100% - 2rem));background:#FFFFFF;color:#00555C;padding:.75rem 1rem;border:2px solid #00555C;border-radius:4px;font-weight:700;text-decoration:underline}
.skip-link:focus{transform:translateY(0)}
#hauptinhalt{scroll-margin-top:100px}
.recht-hero h1,.recht-sektion h2{overflow-wrap:anywhere;hyphens:auto}
.galerie-sektion a:focus-visible,.galerie-sektion button:focus-visible,.galerie-modal button:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
a.knopf:hover,a.btn-prim:hover,a.karte-maps-btn:hover{color:#FFFFFF}
a.flip-anfrage-btn:hover{color:#0A0D0E}