/* Custom Overrides — projektspezifische Anpassungen
   Nur Regeln die NICHT im Ryhe-Theme oder kirki-styles.css enthalten sind.
   Wird NACH kirki-styles.css geladen (höchste Spezifität). */

/* ── Mobile Overscroll + Status-Bar ──────────────────────────
   body background-color wird per Inline-Style in header.php
   gesetzt: var(--color-{$bodyBg}) — passt automatisch zur
   ersten Section jeder Seite.
   Safari iOS zeigt body-bg im Status-Bar-Bereich und beim
   Overscroll-Bounce (oben + unten). Per-page matching sorgt
   dafür, dass beides zur Seite passt (dunkel bei Masthead,
   hell bei Kontakt etc.).

   Header + Preloader auf Mobile: absolute statt fixed.
   Safari 26 Liquid Glass sampelt position:fixed Elemente am
   oberen Viewport-Rand → erzeugt dunklen Tint in der Status-Bar.
   Mit position:absolute entfällt das Sampling → Status-Bar zeigt
   nur noch den Body-BG (per-page matched).
   Tradeoff: Kein sticky Header auf Mobile — Header scrollt mit
   der Seite, kein Auto-Show beim Hochscrollen.
   Desktop bleibt unverändert (position: fixed). */
@media screen and (max-width: 991px) {
  .header_fixed,
  .header_sticky,
  .preloader {
    position: absolute !important;
  }
}

/* Cursor Progress */
.cursor-progress, .cursor-progress * { cursor: progress !important; }

/* PJAX-Transition: Header-Columns verstecken während Curtain.
   !important überschreibt GSAP-Inline-Styles (opacity:1, visibility:inherit),
   die von _initHeader() mit delay:0 während des Curtains gesetzt werden.
   Klasse wird per JS in barba.hooks.before gesetzt, in .after entfernt. */
.header__col--pjax-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==========================================
   Layout-Overrides für Kirby-gerenderte Sections
   (ersetzt layout-custom.css)
   ========================================== */

/* Circle-button in Video-Sections:
   z-index verhindert, dass Poster-Bild den Button überdeckt */
.section-video__container .circle-button.circle-button_link {
  z-index: 60;
  width: 110px;
  height: 110px;
}

.section-video__container .circle-button.circle-button_link .svg-circle {
  width: 120px;
  height: 120px;
}

/* Background-Video: Content-Overlay über dem <video>-Element */
.section-image > .container,
.section-image > .container-fluid {
  position: relative;
  z-index: 2;
}

/* Footer: Logo kleiner als im Header */
.footer img {
  height: 40px;
}

/* Section-Services Letter: Ryhe hat keinen arts-theme-light Override
   für den Deko-Buchstaben (Original nutzt nur helle Hintergründe).
   Zwei Selektoren: Attribut für Standard-Sections, Klasse für
   Services/Scroll-Sections (FIX 33c entfernt dort data-arts-theme-text). */
[data-arts-theme-text="light"] .section-services__letter,
.arts-theme-light .section-services__letter {
  color: var(--color-light-1);
}

/* ── Transparenter Sticky Header ──────────────────────────
   Kein fester Hintergrund beim Scrollen. Logo/Burger wechseln
   die Farbe per IntersectionObserver (header-observer.js).
   Auto-Hide per GSAP-Animation in header-observer.js (yPercent). */
.header_sticky {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Header-Logo: Höhe wird über Panel gesteuert (site.yml → logoheight).
   Inline-Override in head.php überschreibt kirki-styles.css Default (80px).
   Padding vergrößert den Klickbereich rund um das SVG-Logo,
   damit man nicht exakt auf die dünne Schrift zielen muss. */
a.logo {
  padding: 10px;
}

/* Sanfte Transition für Burger-Linien beim Farbwechsel */
.header__burger-line {
  transition: background-color 0.3s ease;
}

/* Logo-Swap: KEINE CSS-Transition auf Logo-Images setzen!
   GSAP (3.12+) nutzt die Web Animations API. Eine CSS transition
   auf opacity/visibility erzeugt steckenbleibende Web Animations
   (fill:backwards bei currentTime:0 → Logo bleibt unsichtbar).
   GSAP steuert Logo-Sichtbarkeit korrekt ohne CSS-Transition. */

/* ── Fullscreen Section (100vh) ──────────────────────────
   Für Kontakt, Landing Pages etc. Per cssclass-Feld in
   den Section-Settings zuweisbar. min-height statt height
   damit Inhalt auf kleinen Screens nicht abgeschnitten wird.
   Ryhe setzt display:flex auf der Section — Container erbt
   die Höhe automatisch. Container + Row brauchen flex-Layout
   damit align-self-* auf Spalten wirkt. */
.section-fullheight {
  min-height: 100vh;
}
.section-fullheight > .container,
.section-fullheight > .container-fluid {
  display: flex;
  flex-direction: column;
}
.section-fullheight > .container > .row,
.section-fullheight > .container-fluid > .row {
  flex: 1;
}

/* ── Gestreckte Spalte: Höhe-Kette komplett durchreichen ──
   Wenn eine Spalte "Strecken" hat (align-self-stretch),
   muss die gesamte Kette col → section-content__inner →
   section-image → wrapper → mask-reveal → img die volle
   Höhe erben. Ohne height:100% auf section-content__inner
   bricht die Kette und Padding + Bild-Füllung funktionieren nicht.
   !important nötig weil Ryhe Lazy-Loading inline-Styles setzt:
   height:0 + padding-bottom:XX% (Aspect-Ratio-Trick). */
.align-self-stretch > .section-content__inner {
  height: 100%;
}
.align-self-stretch > .section-image,
.align-self-stretch > .section-content__inner > .section-image {
  height: 100%;
}
.align-self-stretch .section-image__wrapper,
.align-self-stretch .section-image__wrapper .mask-reveal__layer {
  height: 100% !important;
  padding-bottom: 0 !important;
}

/* ── Bild mit Max-Width: Ausrichtung folgt Spalte ────────
   section-image_sized = Bild hat max-width aus Panel.
   Standard: zentriert. text-right/text-left auf Spalte
   verschiebt das Bild nach rechts/links.
   text-lg-* Varianten: Desktop-Override (Bootstrap Mobile-First). */
.section-image_sized {
  margin-left: auto;
  margin-right: auto;
}
.text-right .section-image_sized {
  margin-left: auto;
  margin-right: 0;
}
.text-left .section-image_sized {
  margin-right: auto;
  margin-left: 0;
}
@media (min-width: 992px) {
  .text-lg-right .section-image_sized {
    margin-left: auto;
    margin-right: 0;
  }
  .text-lg-left .section-image_sized {
    margin-right: auto;
    margin-left: 0;
  }
  .text-lg-center .section-image_sized {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── SplitText vs. responsive Textausrichtung ────────────
   GSAP SplitText backt text-align als Inline-Style ein (einmalig beim Laden).
   Startet die Seite auf Desktop, wird "right" eingebrannt → bleibt auf Mobil.
   Startet die Seite auf Mobil, wird "left" eingebrannt → bleibt auf Desktop.
   Fix: Beide Richtungen mit !important auf den Kind-Elementen überschreiben.
   Parent-!important reicht nicht — Inline-Style auf Kind blockt Vererbung. */

/* Mobil: Basis-Klassen (text-left/center/right) erzwingen */
@media (max-width: 991.98px) {
  .text-left .split-text__line,
  .text-left .split-text__word {
    text-align: left !important;
  }
  .text-center .split-text__line,
  .text-center .split-text__word {
    text-align: center !important;
  }
  .text-right .split-text__line,
  .text-right .split-text__word {
    text-align: right !important;
  }
}
/* Desktop: Override-Klassen (text-lg-*) erzwingen */
@media (min-width: 992px) {
  .text-lg-left .split-text__line,
  .text-lg-left .split-text__word {
    text-align: left !important;
  }
  .text-lg-center .split-text__line,
  .text-lg-center .split-text__word {
    text-align: center !important;
  }
  .text-lg-right .split-text__line,
  .text-lg-right .split-text__word {
    text-align: right !important;
  }
}

/* ── Fließtext: Bold etwas leichter (Semi-Bold statt Bold) ──
   Montserrat 700 wirkt bei kleiner Schriftgröße zu kräftig.
   600 (Semi-Bold) ist dezenter und harmoniert besser mit 400 (Regular). */
strong, b {
  font-weight: 600;
}

/* ── Responsive iframe wrapper ───────────────────────────
   Für Matterport, YouTube, Vimeo etc. im HTML-Block.
   Wrapper: <div class="responsive-iframe">
   Fallback 16:9. Anderes Format per inline style am iframe:
   style="aspect-ratio: 1706/840;"
   contain + content-visibility isolieren den iframe-Renderer
   vom Compositing-Thread (verhindert Scroll-Ruckeln bei WebGL-
   iframes wie Matterport neben scrub-Parallax-Animationen). */
.responsive-iframe {
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: auto 100vw auto 56.25vw;
}
.responsive-iframe iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}

/* ── Decorative Circle (404, Fullscreen) ──────────────────
   Ryhe v4.2.6 positions .section__circle (absolute, centered,
   calc(100vw - gutter*4)) but removed border + border-radius
   from older versions. Re-add for visible decorative outline.
   Used on: error.php (404), potentially fullscreen sections. */
.section__circle {
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 100%;
}

/* ── .lazy Placeholder-Flash bei PJAX overlayMenu ─────────
   Ryhe CSS: .lazy { background-color: rgba(136,136,136,.1) }
   zeigt hellgraue Platzhalter auf Bild-Wrappern.
   Problem: Bei overlayMenu-Transition (Menü → Grid-Seite)
   gibt es ~100ms zwischen Curtain-Reveal und enableAnimations().
   In dieser Lücke sind Sections sichtbar (GSAP autoAlpha:1 von
   sectionGrid.init), aber mask-reveal Animationen laufen noch
   nicht → .lazy Backgrounds blitzen als graue Kästchen auf.
   Alter Ansatz [data-arts-os-animation]:not([..="animated"])
   funktioniert nicht: sectionGrid setzt attr auf "animated"
   BEVOR die Section sichtbar wird → Regel greift nie im
   entscheidenden Moment.
   Fix: .lazy direkt transparent machen (unabhängig vom attr).
   Mask-reveal verdeckt den Bereich ohnehin → kein sichtbarer
   Placeholder nötig. !important nötig wegen Ryhe-Spezifität. */
.lazy:not(.lazy_loaded) {
  background-color: transparent !important;
}

/* ── Mobile-Padding wiederherstellen ───────────────────────────
   Ryhe section-services__container setzt padding auf 0.
   Fix: Container-Padding für no-gutters und container-Varianten.
   container-fluid ohne no-gutters (z.B. Hotelfotografie) bekommt
   Padding nur auf dem Text-Wrapper — Slider/Bilder bleiben
   edge-to-edge. Scroll-Group-Sections (z.B. Team) bekommen
   Extra-Padding auf dem äußeren section-content__inner. */
@media screen and (max-width: 991px) {
  .section-services__container.no-gutters,
  .container.section-services__container {
    padding-left: var(--gutter-horizontal) !important;
    padding-right: var(--gutter-horizontal) !important;
  }
  .container-fluid.section-services__container:not(.no-gutters) .section-services__wrapper-content {
    padding-left: var(--gutter-horizontal);
    padding-right: var(--gutter-horizontal);
  }
  .section-scroll > .container > .row > [class*="col"] > .section-content__inner {
    padding-left: var(--gutter-horizontal);
    padding-right: var(--gutter-horizontal);
  }
}

/* ── Video Cover-Modus für Mobile ──────────────────────────
   Panel-Toggle "Mobile Cover" im Video-Block setzt die Klasse
   video-cover-mobile + CSS Custom Properties auf das <video>.
   --cover-ratio: Seitenverhältnis (1/1, 3/4, 2/3, 9/16)
   --cover-position: Ausschnitt-Position (top, center, bottom)
   Desktop bleibt unverändert (kein cover, natürliche Proportionen).
   Anwendungsfall: Hochkant-Videos (z.B. 9:16) in Services-Sections
   die auf Mobile nicht 889px hoch sein sollen. */
@media screen and (max-width: 991px) {
  video.video-cover-mobile {
    object-fit: cover !important;
    aspect-ratio: var(--cover-ratio, 1/1) !important;
    object-position: var(--cover-position, center) !important;
  }
}

/* ── Services: Text auf Mobile sofort sichtbar ──────────────
   Problem: sectionContent.js erstellt EINEN ScrollTrigger pro
   Section, getriggert am ersten .section-content__inner (= Video-
   Spalte). Bei gestapelten Spalten auf Mobile liegt die Text-Spalte
   ~700px unterhalb — der Text-Reveal feuert viel zu spät (oder
   gar nicht im Viewport).
   Fix: GSAP-Initialstyles (autoAlpha:0, y:XX) per !important
   überschreiben. Text erscheint sofort, kein Reveal auf Mobile.
   Nur Services-Sections betroffen (.section-services), nicht
   allgemeine section-content. */
@media screen and (max-width: 991px) {
  .section-services .section-content__heading,
  .section-services .section-content__text,
  .section-services .section-content__button,
  .section-services .social__item,
  .section-services .split-text__line,
  .section-services .split-text__word,
  .section-services .split-text__char {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ── Grid-Layout: CSS Grid für Team-, Foto-, Video-Grids ─────────
   Aktivierung: Section-Modus "Grid: 2 Spalten" / "Grid: 3 Spalten"
   in den Section-Settings. PHP sammelt alle Blöcke aus allen Spalten
   und rendert sie flach in einem Grid-Container. DOM-Reihenfolge =
   Lesereihenfolge → korrekte Mobile-Stapelung.
   --grid-cols wird per inline style gesetzt (2 oder 3). */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
  gap: var(--gutter-horizontal);
}
@media (max-width: 991px) {
  .grid-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Portfolio-Slider (figure-service) ───────────────────────
   Einheitliche Slide-Höhen auf Desktop. Ryhe-Original nutzt
   exakt diese Regel (services-1.css: min-height: 570px auf
   .figure-service__content), damit variable Textlängen die
   Slide-Höhe nicht beeinflussen. Auf Tablet/Mobile deaktiviert,
   damit Content nicht unnötig Leerraum erzeugt. */
.figure-service__content {
  min-height: 570px;
}
@media (max-width: 1024px) {
  .figure-service__content {
    min-height: 0;
  }
}

/* ── Info-Box: Styles an Ryhe-Original angleichen ────────
   Original (Raleway): Label 700 + #777, Wert 400 + #262626.
   kirki-styles.css setzt .subheading auf --fw-medium (500)
   und .paragraph auf --fw-regular (400) — passend für Montserrat
   global, aber für figure-info zu leicht/hell.
   Doppelklasse (.figure-info .figure-info__*) nötig weil
   #panel-design-overrides (inline <style> aus head.php)
   .subheading { font-weight: 400 } NACH custom.css setzt.
   Höhere Spezifität schlägt die Lade-Reihenfolge. */
.figure-info .figure-info__option {
  font-weight: var(--fw-bold);
  color: var(--subheading-color-dark);
}
.figure-info .figure-info__value {
  font-weight: var(--fw-regular);
  color: var(--paragraph-color-dark);
}

/*# sourceURL=custom-css */