/* ==========================================================================
   MarbeOne — Ergaenzungen auf das Archinix-Template (Brief 04)
   Nur Ergaenzungen, die das Template selbst nicht mitbringt: Sprachumschalter,
   Barrierefreiheit (Fokusringe, Beruehrflaechen), prefers-reduced-motion.
   Keine Umgestaltung des Template-Looks (das ist Brief 05).
   ========================================================================== */

/* Wurzel gegen horizontales Ausbrechen absichern (feste Overlay-Flaechen
   werden vom body-overflow nicht geklippt). */
html { overflow-x: hidden; }

/* --- Sprachumschalter DE/EN/ES (im Template nicht vorhanden) --------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  font-family: var(--mo-schrift-text);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(from var(--mo-kalk) r g b / .6);
  transition: color .3s ease;
}
.lang-switch__link:hover,
.lang-switch__link.active { color: var(--mo-kalk); }

/* --- Barrierefreiheit ----------------------------------------------------- */
/* Sichtbarer Fokusring (Template hat keinen). currentColor passt sich hell/dunkel an. */
/* Das Template setzt an mehreren Stellen outline-width:0 !important. Der
   sichtbare Fokusring liegt daher als box-shadow (von den outline-Resets nicht
   erreichbar); currentColor passt sich hell/dunkel an. Transparente outline
   bleibt fuer den Windows-Hochkontrastmodus sichtbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px currentColor !important;
}

/* --- Brief 06 Phase 2: Kopfleiste + Vollbild-Overlay ---------------------- */
/* Persistente Leiste ueber dem Kopfbereich. Ton (Kalk/Text) folgt dem
   Untergrund, gesetzt per JS-Klasse .mo-header--over-dark (kein Scroll-Trigger).
   Offen -> dunkler Ton auf dem hellen Kalk-Overlay. */
.mo-header { color: var(--mo-text); }
.mo-header--over-dark { color: var(--mo-kalk); }
.mo-header--filled { color: var(--mo-text); }
.mo-header.is-open { color: var(--mo-text); }
.mo-header__bar {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1300; padding: 22px 0; pointer-events: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* --- Brief 07: gefuellte Kopfleiste beim Scrollen ------------------------
   Ueber dem Hero (dunkle Zone) bleibt die Leiste transparent, das Logo in
   Kalk. Verlaesst der Kopf die dunkle Zone, bekommt er eine Flaeche in Kalk
   und der Ton wechselt auf Text -> die Leiste bleibt ueber hellen Abschnitten
   sichtbar (vorher durchgehend transparent). --filled und --over-dark
   schliessen sich gegenseitig aus (siehe main.js updateHeaderTone). */
.mo-header--filled .mo-header__bar {
  background: var(--mo-kalk);
  box-shadow: 0 1px 0 var(--mo-linie);
}
.mo-header__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.mo-logo, .mo-header__right { pointer-events: auto; }

.mo-logo { display: inline-flex; align-items: center; color: inherit; }
.mo-logo svg { height: 26px; width: auto; display: block; fill: currentColor; }
@media (max-width: 767px) { .mo-logo svg { height: 22px; } }

.mo-header__right { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.mo-header.is-open .mo-header__right { visibility: hidden; }   /* Overlay bringt eigene */

/* Sprachumschalter in der Leiste folgt der Kopf-Farbe */
.mo-header__bar .lang-switch__link { color: currentColor; opacity: .6; min-width: 40px; }
.mo-header__bar .lang-switch__link:hover,
.mo-header__bar .lang-switch__link.active { opacity: 1; color: currentColor; }

/* Menueknopf */
.mo-menu-toggle {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 0 4px; background: transparent; border: 0; cursor: pointer; color: inherit;
  font-family: var(--mo-schrift-text); font-size: var(--mo-grad-marke); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.mo-menu-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; }
.mo-menu-toggle__bars span { display: block; height: 2px; background: currentColor; }
@media (max-width: 480px) {
  .mo-menu-toggle__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;   /* schmal: nur Icon, Text bleibt fuer AT */
  }
}

/* Vollbild-Overlay: helle Kalk-Flaeche, einzige Navigation */
.mo-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: var(--mo-kalk); color: var(--mo-text);
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
.mo-overlay.is-open { opacity: 1; visibility: visible; }
/* margin-block:auto zentriert vertikal, weicht bei Ueberlauf auf 0 -> oben
   angesetzt und scrollbar (kleine Bildschirmhoehe). */
.mo-overlay__inner { width: 100%; margin-block: auto; padding-block: 110px 64px; }
.mo-overlay__list { list-style: none; margin: 0; padding: 0; }
.mo-overlay__link {
  display: inline-block; font-family: var(--mo-schrift-titel);
  font-size: var(--mo-grad-2); line-height: 1.3; color: var(--mo-sekundaer);
  padding: 6px 0; transition: color .25s ease;
}
.mo-overlay__link:hover, .mo-overlay__link:focus-visible,
.mo-overlay__link.is-active { color: var(--mo-text); }
.mo-overlay .lang-switch--overlay { margin-top: clamp(28px, 4vw, 48px); }
.mo-overlay .lang-switch--overlay .lang-switch__link {
  min-width: 0; justify-content: flex-start; padding: 6px 18px 6px 0; color: var(--mo-sekundaer);
}
.mo-overlay .lang-switch--overlay .lang-switch__link:hover,
.mo-overlay .lang-switch--overlay .lang-switch__link.active { color: var(--mo-text); }
.mo-overlay__close {
  position: absolute; top: 22px; right: clamp(16px, 5vw, 60px);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; background: transparent; border: 0;
  cursor: pointer; color: var(--mo-text); font-size: 26px; z-index: 2;
}

/* --- Hero-Bildwechsler (Ueberblendung; owl-Carousel-Ersatz) --------------- */
#home-2 { position: relative; height: 700px; }
@media (max-width: 767px) { #home-2 { height: 560px; } }
#home-2 .single-slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
#home-2 .single-slide-item.is-active { opacity: 1; z-index: 1; }
#home-2 .hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}

/* --- Brief 07: Hero-Fluchtlinie ------------------------------------------
   Logo und Kopfleiste sitzen an der zentrierten Container-Kante. Der Hero-Text
   stand nicht buendig darunter: (1) das Template schob ihn um 80px nach rechts
   (padding-left), (2) die Folie ist ein Flex-Container, in dem .hero-area-content
   auf Inhaltsbreite schrumpft und links andockt -> der innere .container zentriert
   nicht. width:100% laesst den inneren .container wieder zentrieren, damit die
   Hero-Kante auf derselben Fluchtlinie wie das Logo sitzt (wie beim Overlay). */
#home-2 .hero-area-content { padding-left: 0; width: 100%; }

/* --- Startseiten-Projektkacheln als Raster (owl-Slider-Ersatz) ------------ */
.project-grid-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
/* Das Template setzt .single-project-item.bg-cover auf height:450px. Kein
   aspect-ratio ergaenzen (sonst width = 450*4/3 = 600px -> sprengt die Spalte).
   Breite kommt aus der 1fr-Spalte. */
.project-grid-home .single-project-item { width: auto; min-width: 0; margin: 0; }
@media (max-width: 1024px) { .project-grid-home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .project-grid-home { grid-template-columns: 1fr; } }

/* --- Phase 4: Unterseiten ------------------------------------------------- */
/* Portfolio-Kachel ist ein ganzflaechiger Link */
#project-grid .single-project-item { display: block; color: inherit; }

/* Kontaktformular: Template stylt input/textarea; Button (statt input[submit],
   von contact-form.js gebraucht) und Select ergaenzen. */
.subimit-form-wrap form select {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--mo-linie);
  background: var(--mo-kalk);
  font-family: var(--mo-schrift-text);
  font-size: 15px;
  color: var(--mo-text);
}
.subimit-form-wrap form button[type="submit"] {
  min-height: 48px;
  padding: 14px 42px;
  border: 1px solid var(--mo-akzent);
  background: var(--mo-akzent);
  color: var(--mo-kalk);
  font-family: var(--mo-schrift-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.subimit-form-wrap form button[type="submit"]:hover { background: transparent; color: var(--mo-akzent); }
.subimit-form-wrap form .row { display: flex; gap: 16px; }
.subimit-form-wrap form .row > [class*="col-"] { flex: 1; padding: 0; }
.form-message { padding: 14px 18px; margin-bottom: 18px; font-size: 14px; }
.form-message.success { background: var(--mo-erfolg-grund); color: var(--mo-erfolg); }
.form-message.error { background: var(--mo-fehler-grund); color: var(--mo-fehler); }
.subimit-form-wrap form .error { display: block; margin: -10px 0 14px; color: var(--mo-fehler); font-size: 13px; }
.subimit-form-wrap form .has-error { border-color: var(--mo-fehler); }

/* Villendetail: Vor/Zurück-Navigation */
.project-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--mo-linie); padding-top: 28px; }
.project-pager__side--right { margin-left: auto; text-align: right; }
.project-pager__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--mo-schrift-text); text-transform: uppercase;
  letter-spacing: .08em; font-size: 14px;
}

/* --- Phase 5: Bild-Text-Abschnitt (Bildstrecke-Box) ----------------------- */
.abschnitt__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
@media (max-width: 767px) { .abschnitt__media { margin-bottom: 28px; } }

/* --- Phase 2: Zitatband / Schritte / Wertekarten (Template-Palette) ------- */
.zitatband { background: var(--mo-dunkel); color: var(--mo-kalk); padding: clamp(60px, 9vw, 120px) 0; }
.zitatband__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.zitatband__marke {
  display: inline-block; font-family: var(--mo-schrift-text);
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(from var(--mo-kalk) r g b / .55); margin-bottom: 1.2rem;
}
.zitatband__text { font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.4; color: var(--mo-kalk); margin: 0; }

.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(30px, 4vw, 50px); }
.schritt__nr { display: block; font-family: var(--mo-schrift-titel); font-size: 2.4rem; color: var(--mo-linie); margin-bottom: .5rem; }
.schritt__titel { margin-bottom: .5rem; }
/* Genau vier Schritte: vier Spalten statt 3 + 1 einzeln, auf mittlerer Breite 2 × 2 */
.schritte:has(> .schritt:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) { .schritte:has(> .schritt:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .schritte, .schritte:has(> .schritt:nth-child(4):last-child) { grid-template-columns: 1fr; } }

.werte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: clamp(30px, 4vw, 50px); }
.werte-karte { padding: clamp(28px, 3vw, 44px); background: var(--mo-kalk); }
.werte-karte__titel { margin-bottom: .6rem; }
.werte-einleitung, .schritte-einleitung { max-width: 62ch; margin: 1.25rem 0 0; font-size: var(--mo-grad-lead); line-height: 1.6; }
@media (max-width: 900px) { .werte-grid { grid-template-columns: 1fr; } }

/* --- Phase 3: Ergaenzungen ------------------------------------------------ */
.project-area .sub-headline { max-width: 620px; margin-top: 1rem; }
.cta-img-area .abschluss-text { max-width: 600px; margin: 0 auto; }
/* --- Brief 07: Abschluss-Block ------------------------------------------
   Ohne gepflegtes abschluss_bild lag hier nur die helle Kalk-Grundflaeche
   unter dem Template-Scrim -> wirkte als graue, leere Flaeche. Ruhige
   Umbra-Flaeche als Grund (Palette unveraendert). Ein spaeter gepflegtes Bild
   ueberlagert sie (data-background setzt background-image, der Grund bleibt
   nur Fallback). Keine neue Farbe. */
.cta-img-area { background-color: var(--mo-dunkel); }
.breadcrumb-marke { display: block; font-family: var(--mo-schrift-text); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--mo-kalk); opacity: .85; margin-bottom: .6rem; }
.breadcrumb-untertitel { margin-top: .8rem; max-width: 620px; color: var(--mo-kalk); }

/* --- Phase 5: Bildband (Über uns) ---------------------------------------- */
.bildband-section { padding: clamp(40px, 6vw, 80px) 0; }
.bildband-inner { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }

/* --- Phase 4: Standorte (Kontakt) ---------------------------------------- */
.standorte { row-gap: 40px; }
.standort__label { font-family: var(--mo-schrift-text); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-sekundaer); margin-bottom: .4rem; }
.standort__firma { margin-bottom: .5rem; }
.standort__adresse { margin-bottom: .5rem; }
.standort__link { display: flex; align-items: center; min-height: 44px; }

/* --- Brief 07: Footer-Logo -----------------------------------------------
   Das Template liess das Logo-PNG (801x178) auf die Spaltenbreite laufen
   (~80px hoch) -> viel zu gross. Auf eine ruhige Fusszeilen-Groesse begrenzt,
   Seitenverhaeltnis bleibt erhalten. */
.footer-area .logo { height: auto; }
.footer-area .logo img { height: 38px; width: auto; }

/* --- Brief 07: Eyebrow ohne Kasten --------------------------------------
   Das Template legte die Marke ueber der Ueberschrift (MARBEONE, LAGE,
   KONTAKT ...) auf eine graue Kasten-Flaeche (background + padding). Wirkte
   unbeabsichtigt. Als ruhiges, flaechenloses Eyebrow. Auf dunklen Baendern
   traegt die zusaetzliche Klasse .text-white weiterhin Kalk. */
.section-title h6 {
  background: none;
  padding: 0;
  color: var(--mo-sekundaer);
  letter-spacing: .16em;
}

/* --- Hero-Titel: Zeilenfuehrung ueber maximale Zeilenlaenge --------------
   Kein harter Umbruch im Inhalt (der bricht in drei Sprachen an anderer
   Stelle falsch); die Breite bestimmt den Umbruch. */
#home-2 .project-title h1 { max-width: 16ch; }
@media (max-width: 767px) { #home-2 .project-title h1 { max-width: 13ch; } }

/* --- Brief 06 Phase 5: Kontrast ------------------------------------------
   Heller Text (Hero, Breadcrumb) liegt ueber Bildern. Der Template-Scrim
   overlay-3 lag hinter dem Bild (z-index:-1, 0.3) und dunkelte es nicht ab.
   Hier als Verlauf ueber dem Bild, damit Kalk-Text unabhaengig vom Motiv
   ausreichend Kontrast hat. Werte relativ aus der Dunkelrolle (kein Fixwert). */
#home-2 .single-slide-item .overlay-3,
.breadcrumb-bg .overlay-3 {
  z-index: 0;
  opacity: 1;
  background: linear-gradient(to bottom,
    rgb(from var(--mo-dunkel) r g b / .42),
    rgb(from var(--mo-dunkel) r g b / .72));
}
/* Leisten-Sprachumschalter etwas kraeftiger fuer Kontrast ueber dem Kopfbild */
.mo-header__bar .lang-switch__link { opacity: .7; }

/* --- Brief 06 Phase 4: Video-Klick-Fassade ------------------------------- */
.videofassade-section { padding-block: clamp(30px, 4vw, 56px); }
.videofassade__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--mo-dunkel) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.videofassade__frame::before {          /* Scrim fuer Knopf-Kontrast */
  content: ""; position: absolute; inset: 0;
  background: rgb(from var(--mo-dunkel) r g b / .35);
}
.videofassade__frame.is-playing::before { display: none; }
.videofassade__play {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 26px 12px 16px;
  background: rgb(from var(--mo-kalk) r g b / .92); color: var(--mo-text);
  border: 0; cursor: pointer;
  font-family: var(--mo-schrift-text); font-size: 15px; font-weight: 500; letter-spacing: .04em;
}
.videofassade__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mo-akzent); color: var(--mo-kalk); font-size: 18px;
}
.videofassade__play:hover { background: var(--mo-kalk); }
.videofassade__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Brief 06: Schrift-Feinregel ------------------------------------------
   Bodoni traegt laut Basis nur die grossen Grade (h1-h3). style.css setzt
   die ganze h1-h6-Gruppe auf Titelschrift; unter 20px bricht Bodonis
   Strichkontrast weg, darum h4/h5/h6 zurueck auf Archivo. */
h4, h5, h6 { font-family: var(--mo-schrift-text); }

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

/* --- Rechtsseiten (Impressum, Datenschutz) und Fehlerseite ----------------
   Ruhige Lesespalte: links ausgerichtet (kein Blocksatz, der reisst Löcher),
   begrenzte Zeilenlänge, Zwischenüberschriften klein und ohne Grossbuchstaben.
   Langer Rechtstext mit vielen h2 würde mit der Abschnittsgrösse laut wirken. */
.rechtstext { max-width: 72ch; }
.rechtstext__einleitung {
  font-size: var(--mo-grad-lead); line-height: 1.55;
  color: var(--mo-text); margin-bottom: 2.5rem;
}
.rechtstext h2 {
  font-size: var(--mo-grad-3); line-height: 1.3;
  text-transform: none; letter-spacing: 0;
  margin: 2.5rem 0 .75rem;
}
.rechtstext h3 {
  font-family: var(--mo-schrift-text); font-size: var(--mo-grad-4);
  font-weight: 500; margin: 1.75rem 0 .5rem;
}
.rechtstext p, .rechtstext li { font-size: var(--mo-grad-text); line-height: 1.7; text-align: left; }
.rechtstext a:not(.mo-knopf) { color: var(--mo-akzent); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext ul, .rechtstext ol { padding-left: 1.25rem; margin-bottom: 1rem; }

/* Breadcrumb ohne eigenes Bild: kein leeres 480px-Feld mit dem (nicht
   vorhandenen) Template-Hintergrund, sondern ein flaches Umbra-Band. Der
   obere Abstand hält die Kopfleiste frei, die über dem Band liegt. */
.breadcrumb-bg--ohne-bild {
  height: auto;
  background-image: none;
  background-color: var(--mo-dunkel);
  padding: 150px 0 56px;
}
.breadcrumb-bg--ohne-bild .overlay-3 { display: none; }
@media (max-width: 767px) {
  .breadcrumb-bg--ohne-bild { padding: 112px 0 36px; }
}