/* ============================================================
   SH-IMMOBILIEN — base.css
   Globale Ebene des Themes: Fonts, Tokens, Utilities und die
   drei globalen Theme-Parts (Header, Kontakt-Rail, Footer).

   Diese Datei wird auf JEDER Seite geladen. Alles, was nur eine
   einzelne Sektion betrifft, liegt in acf-blocks/<block>/style.css
   und wird von WordPress erst geladen, wenn der Block auf der
   Seite wirklich vorkommt (block.json → "style").

   Reihenfolge unverändert aus dem Entwurf css/redesign.css
   übernommen — nur die Font-Pfade sind an die Theme-Struktur
   angepasst (../fonts/ statt ../assets/fonts/).
   ============================================================ */

/* ------------------------------------------------------------
   0. FONTS (self-hosted, identische Dateien wie style.css)
   ------------------------------------------------------------ */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  /* In dieser Art Direction Teil der Hero-Headline — wird vorgeladen */
  src: url("../fonts/newsreader-italic-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Headline-Grotesk (Fontshare Free Font License, siehe
     assets/fonts/FFL-CabinetGrotesk.txt) — Serifen bleiben den
     Akzenten vorbehalten */
  font-family: "Cabinet Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/cabinet-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Farbe — identische Markenwerte wie Rev. 8 (aus dem Logo gesampelt) */
  --papier:   #F4F3EF;
  --kontor:   #FFFFFF;
  --tinte:    #101812;
  --forst:    #2A6735;
  --forst-2:  #1E5F2C;
  --tiefgruen:#0C4623;
  --tresor:   #0B3521;
  --mint:     #A9C9B4;
  --hairline: #DAD8CE;   /* NUR dekorative Linien — kein UI-Rand */
  --feldrand: #878D84;   /* Ränder bedienbarer Felder (WCAG 1.4.11) */
  --muted:    #63685F;
  --fehler:   #A33A2A;

  --focus-ring: var(--forst);

  /* Headlines: Grotesk. Serife (Newsreader) NUR für Akzente und Ledes. */
  --font-head: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Newsreader", Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Layout — breiter und luftiger als Rev. 8: der Weißraum IST
     das Gestaltungsmittel dieser Art Direction */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --block-pad: clamp(80px, 10vw, 148px);

  --ease: cubic-bezier(.22, .61, .21, 1);
}

/* ------------------------------------------------------------
   2. BASIS + UTILITIES
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body { overflow-x: clip; }

/* Lenis (Smooth Scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

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

p { text-wrap: pretty; }

[hidden] { display: none !important; }

h1, h2, h3, dl, dd, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

a { color: var(--tinte); }

::selection { background: var(--forst); color: var(--papier); }

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

.r-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.r-block { padding-block: var(--block-pad); }

/* Skip-Links */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--tiefgruen);
  color: var(--papier);
  font-size: .9rem;
}
.skip-link:focus-visible { left: 0; }

.u-nowrap { white-space: nowrap; }

.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Typo-Utilities ------------------------------------------------ */

/* Große Editorial-Headline pro Sektion: Grotesk, das Akzentwort
   in Serifen-Kursive. Zeilenumbrüche macht SplitText maskierbar. */
.r-display {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: clamp(2.3rem, 4.6vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-wrap: balance;
}
.r-display em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 420;
  letter-spacing: -0.005em;
}

/* Sektions-Hairline: die stille Ordnungs-Signatur der Seite (Audit M1:
   Labels + Nummern entfielen — die Linie trägt die Gliederung allein).
   Zeichnet sich per Motion von links (--lx wird von GSAP getweent). */
.r-rule {
  --lx: 1;
  border: 0;
  height: 1px;
  margin: 0 0 clamp(2.4rem, 5vw, 4rem);
  background: currentColor;
  opacity: .28;
  transform: scaleX(var(--lx));
  transform-origin: left center;
}

/* --- Interaktions-Utilities ---------------------------------------- */

.r-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 1.02rem 1.9rem;
  background: var(--tiefgruen);
  color: var(--papier);
  border: 1px solid var(--tiefgruen);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .14s ease-out;
}
/* Press-Feedback (Audit M6): die Oberfläche bestätigt den Druck sofort */
.r-btn:active { transform: scale(.97); }

.r-btn--ghost {
  background: transparent;
  border-color: var(--feldrand);
  color: var(--tinte);
}

/* Kompakte Primär-Variante (Header) — gleiche Hierarchiestufe, weniger Masse */
.r-btn--small {
  padding: .72rem 1.35rem;
  font-size: .72rem;
}

/* Invertierte Primär-Variante für dunkle bzw. mediale Flächen */
.r-btn--invert {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--tinte);
}

.r-link {
  display: inline-block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
  text-decoration-color: var(--feldrand);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}

/* Hover nur auf echten Pointern (Audit C7) — Touch feuert sonst
   beim Tippen falsche Hover-Zustände */
@media (hover: hover) and (pointer: fine) {
  .r-btn:hover { background: var(--forst); border-color: var(--forst); }
  .r-btn--ghost:hover { background: transparent; border-color: var(--tinte); color: var(--tinte); }
  .r-btn--invert:hover { background: var(--mint); border-color: var(--mint); color: var(--tresor); }
  .r-link:hover { color: var(--forst); text-decoration-color: var(--forst); }
}

/* --- Medien-Utilities ---------------------------------------------- */

.r-media { overflow: hidden; }
.r-media img,
.r-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reveal-Architektur (Audit M9): Ausgangszustände setzt AUSSCHLIESSLICH
   JavaScript (gsap.set bzw. .reveal-armed) — kein Inhalt ist je per
   purem CSS versteckt. Scheitert JS, bleibt alles sichtbar. */
.reveal-armed {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-armed.is-in {
  opacity: 1;
  transform: none;
}

/* Manuell maskierte Headline-Zeilen (Hero): ohne Motion statisch */
.r-hl__line { display: block; overflow: hidden; }
.r-hl__inner { display: inline-block; }



/* ------------------------------------------------------------
   3. BLOCK: header
   ------------------------------------------------------------ */
.r-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
}
.r-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--tinte);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.r-header.is-scrolled::after { opacity: .18; }

.r-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 78px;
}

.r-header__logo { width: 212px; height: auto; }

.r-header__nav {
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}
.r-header__nav a {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.r-header__nav a.is-active { border-bottom-color: var(--tinte); }

@media (hover: hover) and (pointer: fine) {
  .r-header__nav a:hover { color: var(--forst); }
}

@media (max-width: 760px) {
  .r-header__nav { display: none; }
  .r-header__inner { height: 72px; }
  .r-header__logo { width: 168px; }
}



/* --- Kontakt-Rail: fixierte, runde Direktkontakt-Icons rechts -------
   (globales Theme-Part; z-Skala: Header 50 > Rail 40 > Inhalt) */
.kontakt-rail {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kontakt-rail__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kontor);
  border: 1px solid var(--hairline);
  color: var(--tiefgruen);
  box-shadow: 0 2px 14px rgba(16, 24, 18, .10);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .14s ease-out;
}
.kontakt-rail__btn svg { width: 21px; height: 21px; }
.kontakt-rail__btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .kontakt-rail__btn:hover {
    background: var(--tiefgruen);
    border-color: var(--tiefgruen);
    color: var(--papier);
  }
}
/* Die Rail erscheint erst ab der Seitenmitte (JS armiert + toggelt;
   ohne JS bleibt sie dauerhaft sichtbar — nichts ist CSS-gated) */
.kontakt-rail--armed {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
}
.kontakt-rail--armed.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .kontakt-rail--armed,
  .kontakt-rail--armed.is-visible { transition: none; }
}

@media (max-width: 760px) {
  /* Mobil in die Daumenzone: unten rechts, weiter rund und fixiert */
  .kontakt-rail { top: auto; bottom: 16px; transform: none; }
  .kontakt-rail__btn { width: 48px; height: 48px; }
  .kontakt-rail--armed { transform: translateX(14px); }
  .kontakt-rail--armed.is-visible { transform: none; }
}


/* ------------------------------------------------------------
   12. BLOCK: footer
   ------------------------------------------------------------ */
.r-footer {
  --focus-ring: var(--papier);
  background: var(--tresor);
  color: var(--papier);
  padding-top: clamp(64px, 8vw, 104px);
}
.r-footer ::selection { background: var(--mint); color: var(--tresor); }

.r-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.r-footer__brand {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: 1.3rem;
  margin-bottom: .4rem;
}
/* Als Logo-Container braucht er etwas mehr Luft nach unten, weil das Bild
   keine Schriftunterlaenge mitbringt, die optisch Abstand erzeugt. */
.r-footer__brand:has(.r-footer__logo) { margin-bottom: .9rem; }
/* Logo im Footer.

   brightness(0) faerbt jeden nicht durchsichtigen Pixel schwarz, invert(1)
   dreht das auf Weiss — die Transparenz bleibt erhalten. Dadurch wird JEDES
   Logo weiss, egal in welcher Farbe die Datei vorliegt. Das gruene
   Marken-WebP muss also nicht extra weiss exportiert werden, und eine
   bereits weisse Datei bleibt unveraendert weiss. */
.r-footer__logo {
  display: block;
  width: 200px;
  height: auto;
  filter: brightness(0) invert(1);
}

@media (max-width: 700px) {
  .r-footer__logo { width: 168px; }
}

/* Im Windows-Kontrastmodus wird der Filter ignoriert; dort sorgt das
   System selbst fuer ausreichenden Kontrast. */
@media (forced-colors: active) {
  .r-footer__logo { filter: none; }
}

/* Zugehoerigkeit zur Unternehmensgruppe: leiser als der Firmenname, aber
   klar als Link erkennbar. Sitzt zwischen Firmierung und Claim, deshalb
   ein knapper Abstand nach unten. */
.r-footer__group {
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: .55rem;
  /* Großzügig, damit die Zeile auf dem Desktop einzeilig bleibt — der Deckel
     greift erst, wenn ein längerer Text eingetragen wird. */
  max-width: 54ch;
}
.r-footer__group a {
  color: var(--papier);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: color-mix(in srgb, var(--mint) 55%, transparent);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .r-footer__group a:hover {
    color: var(--mint);
    text-decoration-color: var(--mint);
  }
}

.r-footer__tagline {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--mint);
}

.r-footer__meta { text-align: right; }

/* Kontaktkanäle im Footer: runde Geste in der Dunkel-Variante */
.r-footer__channels {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.r-footer__channel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--mint) 45%, transparent);
  color: var(--papier);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .14s ease-out;
}
.r-footer__channel svg { width: 18px; height: 18px; }
.r-footer__channel:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .r-footer__channel:hover {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--tresor);
  }
}
.r-footer__address { color: var(--mint); margin-bottom: 1rem; }
.r-footer__nav { display: flex; gap: 1.6rem; justify-content: flex-end; }
.r-footer__nav a {
  color: var(--papier);
  font-size: .84rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: color-mix(in srgb, var(--mint) 55%, transparent);
}
.r-footer__nav a:hover { text-decoration-color: var(--mint); }

@media (max-width: 700px) {
  .r-footer__meta { text-align: left; }
  .r-footer__nav { justify-content: flex-start; }
  .r-footer__channels { justify-content: flex-start; }
}



/* ------------------------------------------------------------
   13. PRINT
   ------------------------------------------------------------ */
@media print {
  .r-header, .skip-link, .form__progress, .form__nav, .kontakt-rail { display: none !important; }
  .form--multistep .form__step {
    display: block !important;
    visibility: visible !important;
  }
  .form--multistep .form__step-inner { opacity: 1 !important; overflow: visible !important; }
  .r-block { padding-block: 24px; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------
   14. THEME-ERGÄNZUNGEN (nicht im Entwurf, WordPress-spezifisch)
   ------------------------------------------------------------ */

/* Logo-Fallback: greift nur, solange in den Optionen kein Logo
   hinterlegt ist. Im fertigen Zustand nie sichtbar. */
.r-header__brand-text {
  font-family: var(--font-head);
  font-weight: 540;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--tinte);
}

/* Die Footer-Adresse kommt aus einem Textarea-Feld und darf mehrzeilig
   sein — sie soll die Schriftgröße der Rechtslinks aufnehmen, nicht die
   des Fließtexts. */
.r-footer__address {
  font-size: .84rem;
  line-height: 1.55;
}

/* WordPress-Ausrichtungsklassen im Rechtstext-Fließtext. */
.legal .alignleft  { float: left;  margin: .4rem 1.4rem 1rem 0; }
.legal .alignright { float: right; margin: .4rem 0 1rem 1.4rem; }
.legal .aligncenter { display: block; margin-inline: auto; }
.legal ul, .legal ol { margin: .8rem 0 .8rem 1.4rem; }
.legal li { margin-bottom: .35rem; max-width: 65ch; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: .25em; }

/* --- WordPress-Werkzeugleiste --------------------------------
   Die Leiste liegt im eingeloggten Zustand fixiert am oberen
   Rand. Der Header klebt mit top:0 und verschwand darunter.
   Er rückt deshalb um die Höhe der Leiste nach unten.
   Werte von WordPress: 32px ab 783px Breite, darunter 46px.
   Unter 600px scrollt die Leiste mit weg (sie ist dort nicht
   fixiert) — dann braucht der Header keinen Versatz. */
body.admin-bar .r-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .r-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .r-header { top: 0; }
}

/* --- Ankersprünge -------------------------------------------
   Ohne diesen Versatz landet ein Sprung auf #fundament,
   #ankaufsprofil oder #kontakt unter dem klebenden Header.
   Bei aktivem JavaScript federt Lenis das ab, aber nicht bei
   abgeschalteten Animationen und nicht beim Aufruf einer URL
   mit Anker — deshalb gehört es ins CSS.
   (Der Rev.-8-Stand hatte diese Regel, im Redesign fehlte sie.) */
[id] { scroll-margin-top: 96px; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 88px; }
}
body.admin-bar [id] { scroll-margin-top: 128px; }

@media screen and (max-width: 782px) {
  body.admin-bar [id] { scroll-margin-top: 134px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar [id] { scroll-margin-top: 88px; }
}