/* ============================================================
   LIVÉRA Property Care — Basis
   Reset, Typografie, Layout-Grundformen.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--raum-3));
}

body {
  margin: 0;
  background: var(--buehne);
  color: var(--text);
  font-family: var(--schrift-sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--dauer) var(--kurve-sanft),
              color var(--dauer) var(--kurve-sanft);
}

/* Der Bühnenverlauf des hellen Modus.
   Er liegt fest im Bild, nicht am Dokument — sonst zöge er sich über
   die ganze Seitenlänge und wäre auf langen Seiten nicht mehr zu
   sehen, auf kurzen dagegen ein Farbsprung. Ganz hinten, auch hinter
   der Atmosphäre (die steht auf z-index 0).
   Im dunklen Modus ist --buehne-verlauf `none`; dann malt hier nichts
   und body trägt die Fläche allein. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--buehne-verlauf);
  pointer-events: none;
}

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

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

a { color: inherit; text-decoration: none; }
/* Telefonnummer nie am Bindestrich umbrechen */
a[href^="tel:"] { white-space: nowrap; }

button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--akzent-a22); color: var(--text); }

/* ---------- Typografie ---------- */

.mega, .h1, .h2, .h3 {
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: var(--sperr-eng);
  text-transform: uppercase;
  text-wrap: balance;
  /* Deutsche Komposita sind lang. Lieber trennen als überlaufen. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.mega { font-size: var(--t-mega); }
.h1   { font-size: var(--t-h1); }
.h2   { font-size: var(--t-h2); }
.h3 {
  font-size: var(--t-h3);
  letter-spacing: 0.1em;
  line-height: 1.3;
}

/* Serif-Kursiv ist die zweite Stimme: dort, wo die Marke
   persönlich spricht statt strukturiert. */
.serif {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

.eyebrow {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 var(--raum-3);
}

.eyebrow--nr { display: flex; align-items: center; gap: var(--raum-2); }
.eyebrow--nr::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--linie-akzent), transparent);
  max-width: 180px;
  /* Die Linie wächst erst, wenn der Abschnitt einblendet. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--kurve) 0.35s;
}
.ist-da .eyebrow--nr::after,
.kein-js .eyebrow--nr::after { transform: scaleX(1); }

/* Ein kleines Zeichen vor dem Label (Meeting 04.09.2026: „Icons mit
   einbinden"). Gleiche Linienstärke wie die Kompetenzfeld-Icons. */
.eyebrow-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  stroke-width: 1.4;
  opacity: 0.9;
}

.lead {
  font-size: var(--t-lead);
  color: var(--text-2);
  line-height: 1.65;
  max-width: var(--breite-text);
}

.fliess { color: var(--text-2); max-width: var(--breite-text); }
.fliess + .fliess { margin-top: var(--raum-3); }

.leise { color: var(--text-3); }
.klein { font-size: var(--t-klein); }

.akzent { color: var(--akzent); }
.gold   { color: var(--gold); }

.signum {
  font-family: var(--schrift-signum);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--akzent);
  text-transform: none;
  letter-spacing: 0;
}

/* Gesetzte Zeilen: das Manifest und die Zitate.
   Die Umbrüche sind Teil des Textes und bleiben erhalten. */
.gesetzt {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.8;
  font-weight: 300;
  color: var(--text);
  max-width: 58ch;
  text-wrap: pretty;
}
.gesetzt p + p { margin-top: 1.4em; }

/* Textlink mit wachsender Linie */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--akzent);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color var(--dauer-kurz) var(--kurve-sanft),
              background-size var(--dauer) var(--kurve);
}
.textlink:hover, .textlink:focus-visible { background-size: 0% 1px; color: var(--text); }
.textlink .pfeil { transition: transform var(--dauer) var(--kurve); }
.textlink:hover .pfeil { transform: translateX(5px); }

/* Fließtextlinks (Rechtstexte, Kontaktdaten) */
.link {
  color: var(--akzent);
  border-bottom: 1px solid var(--linie-akzent);
  transition: color var(--dauer-kurz) var(--kurve-sanft),
              border-color var(--dauer-kurz) var(--kurve-sanft);
}
.link:hover, .link:focus-visible { color: var(--text); border-color: currentColor; }

/* ---------- Layout ---------- */

.huelle {
  width: 100%;
  max-width: var(--breite-huelle);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.huelle--schmal { max-width: 1040px; }  /* 14.09.2026: vorher 920 */
.huelle--weit   { max-width: var(--breite-weit); }

.sektion {
  position: relative;
  padding-block: var(--sektion);

  /* Der Salbei-Schimmer der dunklen Bühne: sehr weit, sehr schwach,
     von Abschnitt zu Abschnitt auf die andere Seite versetzt. Er
     liegt als background-image auf dem Abschnitt selbst — ein
     Pseudo-Element müsste sich sonst mit dem Inhalt um die Ebene
     streiten. Im hellen Modus sind beide Token `none`. */
  background-image: var(--schimmer-a);
}

.sektion:nth-of-type(even) { background-image: var(--schimmer-b); }

.sektion--fest { background-color: var(--buehne-2); }

/* Feine Trennlinie zwischen zwei Sektionen gleicher Bühne */
.sektion--linie { border-top: 1px solid var(--linie-fein); }

.sektion-kopf { margin-bottom: var(--raum-5); max-width: var(--breite-text); }
.sektion-kopf .h2 { margin-bottom: var(--raum-3); }

/* „Links mal rechts bündiger Text" (Meeting 04.09.2026): jeder zweite
   Abschnittskopf steht rechts. Erst ab 720 px — auf dem Handy bleibt
   alles links, sonst wandert das Auge bei jedem Abschnitt. */
@media (min-width: 720px) {
  .sektion-kopf--rechts {
    margin-left: auto;
    text-align: right;
  }
  .sektion-kopf--rechts .eyebrow--nr { flex-direction: row-reverse; }
  .sektion-kopf--rechts .eyebrow--nr::after {
    background: linear-gradient(to left, var(--linie-akzent), transparent);
    transform-origin: right;
  }
}

.raster {
  display: grid;
  gap: var(--raum-4);
}

@media (min-width: 720px) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .raster--seite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--raum-6); }
}

.trenner {
  /* Steht als <span> im Text — ohne display: block bliebe die Linie
     ein inline-Kasten ohne Breite und damit unsichtbar. */
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--akzent), transparent);
  margin: var(--raum-4) auto;
}

/* ---------- Hilfsklassen ---------- */

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

.sprung {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 200;
  background: var(--buehne-3);
  color: var(--text);
  border: 1px solid var(--akzent);
  padding: 0.8rem 1.4rem;
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  transition: top var(--dauer-kurz) var(--kurve-sanft);
}
.sprung:focus { top: calc(var(--raum-2)); }

/* ---------- Einblenden beim Scrollen ---------- */
/* Aus der Loader-DNA: es blendet ein, es fliegt nicht herein. */

.blende {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.8s var(--kurve-sanft),
              transform 1.4s var(--kurve);
}
.blende.ist-da { opacity: 1; transform: none; }

/* Kacheln einer Reihe treten gemeinsam ins Bild und blendeten deshalb
   gleichzeitig ein — das liest sich als Schalter, nicht als Bewegung.
   Mit --i bekommt jede ihren eigenen Einsatz (Material empfiehlt
   30–50 ms; bei dieser langsamen Kurve tragen 70 ms besser). */
.blende--staffel { transition-delay: calc(var(--i, 0) * 70ms); }

/* Ohne JS darf nichts unsichtbar bleiben. */
.kein-js .blende { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blende { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Druck
   Wer die Kontaktseite oder das Impressum ausdruckt, soll die
   Angaben lesbar auf Papier bekommen — nicht die dunkle Bühne.
   ============================================================ */

@media print {
  :root {
    --buehne-verlauf: none;
    --flaeche-licht: none;
    --kantenlicht: none;
    --schimmer-a: none;
    --schimmer-b: none;
    --buehne: #fff;
    --buehne-2: #fff;
    --buehne-3: #fff;
    --text: #000;
    --text-2: #1a1a1a;
    --text-3: #444;
    --akzent: #46543F;
    --linie: #bbb;
    --linie-fein: #ddd;
    --linie-akzent: #999;
    --flaeche: transparent;
  }

  .atmo, .intro, .kopf, .fuss, .sprung,
  .held-baender, .held-rahmen, .scroll-linie,
  .btn, .kompass-nav, .thema-schalter, .menue-knopf, .nach-oben, .wa-knopf, .wa-dialog { display: none !important; }

  .held { min-height: auto; padding-block: 0 var(--raum-4); }
  .held-bild { display: none; }

  body { background: #fff; color: #000; }
  .akt-invers { background: #fff; color: #000; }
  .blende { opacity: 1 !important; transform: none !important; }
  .sektion { padding-block: var(--raum-3); page-break-inside: avoid; }

  /* Adressen ausschreiben — auf Papier ist ein Link nur Text. */
  .kontakt-liste a[href^="mailto:"]::after,
  .kontakt-liste a[href^="tel:"]::after { content: ""; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }

  /* Alle Antworten sichtbar drucken. */
  details { display: block; }
  details > summary { list-style: none; }
  .faq-antwort { display: block !important; }
}

/* ------------------------------------------------------------------
   Hell/Dunkel: weicher Wechsel statt hartem Umschalten.
   Moderne Browser blenden per View-Transition den alten Bildschirm
   in den neuen über (Verläufe, Logos, Bilder inklusive). Alle anderen
   bekommen über .thema-wechsel ein kurzes Überblenden der Farben.
   livera.js setzt die Klasse nur für die Dauer des Wechsels und gar
   nicht bei „Bewegung reduzieren“.
   ------------------------------------------------------------------ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.6s;
  animation-timing-function: var(--kurve-sanft);
}

/* Während der Überblendung keine zweite Farb-Transition darüberlegen. */
:root.thema-blende *,
:root.thema-blende *::before,
:root.thema-blende *::after { transition: none !important; }

:root.thema-wechsel *,
:root.thema-wechsel *::before,
:root.thema-wechsel *::after {
  transition: background-color 0.5s var(--kurve-sanft), color 0.5s var(--kurve-sanft),
              border-color 0.5s var(--kurve-sanft), fill 0.5s var(--kurve-sanft),
              stroke 0.5s var(--kurve-sanft), box-shadow 0.5s var(--kurve-sanft) !important;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}