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

/* 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: kleiner als Ryhe-Default (80px → 15px) */
.logo__wrapper-img img {
  height: 15px;
}

/* 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) ──
   Raleway 700 wirkt bei kleiner Schriftgröße zu kräftig.
   600 (Semi-Bold) ist dezenter und harmoniert besser mit 500 (Medium). */
strong, b {
  font-weight: 600;
}

/* ── SplitText: Inline-Elemente nicht als Block behandeln ──
   ryhe.css setzt .split-text *:not(h1..h6,p,ul,li,div,...) auf
   display: inline-block. Das macht <strong>/<em> zu atomaren
   Blöcken die SplitText nicht über Zeilen umbrechen kann →
   erzwungener Zeilenumbruch VOR und NACH fettem/kursivem Text.
   Fix: display: inline für reine Formatting-Elemente. SplitText-
   Animation arbeitet auf .split-text__line DIVs, nicht auf diesen
   Elementen. !important nötig wegen Ryhe-Spezifität. */
.split-text strong,
.split-text b,
.split-text em,
.split-text i {
  display: inline !important;
}

/* ── 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;" */
.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;
}

/*# sourceURL=custom-css */