/* SIGES Intro-Justify — Adaption mwg_097
   Justified word-spacing reveal beim Scrollen. Brand-Farben, hell. */

.siges-ij {
  /* Full-bleed: Hintergrund über volle Viewport-Breite */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--sg-sec-bg, #f7f5f1);
  color: var(--sg-sec-text, #3a3028);
  /* Nur vertikales Padding — horizontal handled der Container */
  padding: clamp(60px, 9vw, 130px) 0;
  /* overflow:visible nötig damit der gepinnte Header (position:sticky) funktioniert.
     Das Word-Reveal-Clipping übernimmt jetzt .siges-ij__container. */
  overflow: visible;
  isolation: isolate;
  transition: background 0.4s ease;
}

/* ── Container — 2-Spalten Grid: Sidebar(384px) | Main(1fr) ─────────── */
.siges-ij__container {
  display: grid;
  grid-template-columns: var(--sg-grid, 384px 1fr);
  gap: var(--sg-gap, 16px);
  max-width: var(--siges-content-max, 1600px);
  margin: 0 auto;
  /* Outer padding = 16px (Figma) */
  padding: 0 var(--sg-outer, 16px);
  width: 100%;
  box-sizing: border-box;
  align-items: start;
  /* clippt das Word-Reveal (vorher machte das .siges-ij overflow:hidden) */
  overflow: hidden;
}

/* Header = Eyebrow-Bar oberhalb der Cards.
   - KEIN sticky/pin mehr (User-Wunsch: „sieht nicht gut aus").
   - Cap auf 1600px content-max → Eyebrows fluchten mit den Cards, nicht mit
     den Viewport-Rändern. Identisches Padding wie der Container.
   - Scrollt natürlich mit dem Section-Content mit. */
.siges-ij__header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: var(--siges-content-max, 1600px);
  margin: 0 auto clamp(20px, 2.5vw, 36px);
  box-sizing: border-box;
  padding: 0 var(--sg-outer, 16px);
  pointer-events: none;
}

/* Jede Caption = eigene weiße Pille (Pattern wie .siges-hero-split__h1) */
.siges-ij__caption {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 2px 8px rgba(44, 40, 37, 0.08);
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: clamp(9px, 1.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--siges-gold, #BE9B53);
  line-height: 1.3;
  white-space: nowrap;
}
.siges-ij__caption--right { text-align: right; }

/* Content: spannt IMMER beide Grid-Spalten (volle 1600px Content-Max).
   Frühere 384px-Sidebar-Offset entfernt — Cards nutzen jetzt den vollen
   max-width des Containers, fluchten visuell mit der Eyebrow-Bar.
   User-Wunsch: Content Cards max-width 1600px. */
.siges-ij__content {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Mobile: stack vertikal */
@media (max-width: 900px) {
  .siges-ij__container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0;
  }
  /* Eyebrow-Header: NICHT mehr pinned/sticky auf Mobile — User-Wunsch.
     position: static gewinnt gegen jedes inherited sticky. top:auto entfernt
     den alten calc()-Offset (Legacy aus sticky-Phase). */
  .siges-ij__header {
    position: static;
    top: auto;
    padding: 0 var(--sg-outer, 16px);
  }
  .siges-ij__content { grid-column: 1; }
}

/* GSAP-Target (.siges-ij__content p) bleibt — Content ist Wrapper aller Block-Rows */
.siges-ij__content {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ── Block-Row: pro Text-Block ein eigenes 40/60 Grid ─────────────────── */
.siges-ij__block {
  display: flex;
  align-items: center;
  width: 100%;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(1.5rem, 3vw, 3rem);
  background-color: var(--ij-card-bg, transparent);
  border: 1.5px solid var(--ij-card-border, var(--siges-forest-green, #58886D));
  border-radius: 20px;
  color: var(--ij-card-text, inherit);
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.siges-ij__block:last-child { margin-bottom: 0; }
/* Hover-Hintergrund — via ACF oder Forest-Green Default */
.siges-ij__block:hover {
  background-color: var(--ij-card-hover, rgba(88, 136, 109, 0.07));
}

/* RIGHT — Arrow-Pane: ganz rechts (margin-left:auto), deutlich größer */
.siges-ij__arrow-pane {
  width: clamp(160px, 22vw, 340px);
  flex-shrink: 0;
  margin-left: auto;          /* schiebt den Pfeil an den rechten Section-Rand */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  color: var(--ij-arrow-color, var(--siges-gold, #BE9B53));   /* ACF Pfeil-Farbe */
  box-sizing: border-box;
  transition: color 0.4s ease;
}

/* Generisches Sizing — gilt für Default- UND Custom-SVG (überschreibt width/height-Attr) */
.siges-ij__arrow-pane svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.siges-ij__arrow {
  width: 100%;
  max-width: 340px;
  height: auto;
  overflow: visible;
  display: block;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.siges-ij__arrow-shaft,
.siges-ij__arrow-head {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
  transform-box: fill-box;
}

/* Hover über DIESER Block's Content → DIESER Pfeil wird schwarz + bewegt sich */
.siges-ij__block:has(.siges-ij__block-text:hover) .siges-ij__arrow-pane {
  color: var(--siges-text, #2C2825);
}
.siges-ij__block:has(.siges-ij__block-text:hover) .siges-ij__arrow {
  transform: scale(1.06) translateX(20px);
}
.siges-ij__block:has(.siges-ij__block-text:hover) .siges-ij__arrow-shaft {
  transform: translateX(-8px) scaleX(1.2);
}
.siges-ij__block:has(.siges-ij__block-text:hover) .siges-ij__arrow-head {
  transform: translateX(24px);
}

/* Reduced-Motion: nur Color, keine Bewegung */
@media (prefers-reduced-motion: reduce) {
  .siges-ij__arrow,
  .siges-ij__arrow-shaft,
  .siges-ij__arrow-head {
    transition: none;
    transform: none !important;
  }
}

/* MITTE — Block-Text: volle verfügbare Breite (kein max-width-Cap) */
.siges-ij__block-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
/* Title-Margin Reset für Block-Layout (das alte first-child-Margin kommt aus
   __content > Block — jetzt sitzt Title innerhalb von __block-text, also reset) */
.siges-ij__block-text .siges-ij__title { margin-top: 0; }
.siges-ij__block-text .siges-ij__title:first-child { margin-top: 0; }

/* ── Mobile (≤1024px) — Block wird Column: Arrow oben, Content unten ──── */
@media (max-width: 1024px) {
  .siges-ij__block {
    flex-direction: column;
    align-items: stretch;
    padding: clamp(2rem, 6vw, 3rem) 14px;
  }
  .siges-ij__arrow-pane {
    width: 100%;
    padding: clamp(0.5rem, 2vw, 1rem) 0 0;   /* Pfeil sitzt jetzt UNTER dem Text */
    justify-content: flex-start;
  }
  .siges-ij__arrow {
    max-width: 96px;
  }
  .siges-ij__block-text {
    max-width: 100%;
    padding-right: 0;
  }
}

.siges-ij__title {
  color: #BE9B53;
  font-size: max(16px, 1.05vw);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: clamp(50px, 8vw, 110px) 0 1.25rem;
  font-weight: 500;
}
.siges-ij__title:first-child {
  margin-top: 0;
}

.siges-ij__text {
  /* Nutzt globalen Section-Title-Token (fluid 24→44px). Eigener clamp wurde
     entfernt — Type-Scale ist jetzt zentral in filter.css :root. */
  font-size: var(--sg-font-section);
  line-height: var(--sg-lh-section, 1.15);
  font-weight: 500;
  color: var(--ij-card-text, #3a3028);
  margin: 0;
  letter-spacing: -0.005em;
}

/* SplitText: line wrapper + word wrapper (gesetzt von JS) */
.siges-ij .line {
  width: max-content;
  display: block;
}
.siges-ij .word {
  will-change: transform;
  display: inline-block;
}

/* Unter Tablet (--bp-md): kein Justify-Effekt — Worte staffeln einfach.
   Schwelle 768→900 angepasst, damit der Word-Spread-Effekt nur dort läuft, wo
   genug Breite für eine elegante Zeilenverteilung existiert. */
@media (max-width: 899px) {
  .siges-ij {
    padding: 100px 0 60px;  /* horizontal 0 → Header-Bar wird bündig (eigenes Padding) */
  }
  /* Eyebrows: stacken statt überlappen. Beide Pills sind nowrap und space-between
     zwingt sie auf gleicher Y-Höhe → bei knappem Viewport überlappen sie.
     Mit flex-wrap brechen sie auf zwei Zeilen um, links bleibt links, rechts wird
     auf die zweite Zeile rechtsbündig gezogen. */
  .siges-ij__header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--sg-outer, 16px);  /* matched Header-Nav-Padding */
  }
  .siges-ij__caption {
    font-size: 10px;
    /* nowrap bleibt — aber max-width verhindert dass eine Pill > 100% wird */
    max-width: 100%;
  }
  .siges-ij__caption--right {
    margin-left: auto;  /* rechte Pille bleibt rechtsbündig auch nach Wrap */
  }
  .siges-ij__content {
    width: 100%;
    /* Content auch mit Header-Nav-Padding ausrichten (Cards bündig zum Nav-Pill) */
    padding: 0 var(--sg-outer, 16px);
    box-sizing: border-box;
  }
  .siges-ij__title {
    font-size: 14px;
    margin-top: 40px;
  }
  .siges-ij__text {
    font-size: 24px;
    line-height: 1.35;
  }
  /* SplitText-Lines: auf Desktop setzt JS width:max-content für Word-Justify-Effekt.
     Auf Mobile gibt's keinen Justify-Effekt (kein Platz für elegante Verteilung),
     also Lines wieder zurück auf Block-Standard damit Text natürlich umbricht
     statt in schmale 2-3 Spalten zu kollabieren. */
  .siges-ij .line {
    width: 100% !important;
    max-width: 100%;
    white-space: normal;
  }
  .siges-ij .word {
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lead-Pill — weiße Pille, Textfarbe = Brand-Lead-Farbe (inline per PHP)
   ═══════════════════════════════════════════════════════════════════════════ */
.siges-ij__lead-pill {
  display: inline-block;
  background: #fff;
  color: var(--ij-lead, #BE9B53);          /* von PHP via inline style überschrieben */
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: max(12px, 0.78vw);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 0 1.4rem;
  box-shadow: 0 2px 10px rgba(58, 48, 40, 0.07);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pro-Item-Bild — links neben JEDEM Block (ersetzt den Pfeil-Pane)
   Gleiche Breite wie .siges-ij__arrow-pane (40vw) → konsistente Ausrichtung,
   egal ob ein Block ein Bild oder den Pfeil zeigt.
   ═══════════════════════════════════════════════════════════════════════════ */
.siges-ij__block-media {
  width: clamp(200px, 28vw, 420px);
  flex-shrink: 0;
  box-sizing: border-box;
}
.siges-ij__block-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  max-height: 70vh;
}
@media (max-width: 1024px) {
  /* Mobile: Bild oben, Text darunter (wie der Arrow-Pane) */
  .siges-ij__block-media {
    width: 100%;
    padding: 0 0 clamp(0.75rem, 2.5vw, 1.25rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA-Button — unter dem Text (rechts neben dem linken Pfeil)
   ═══════════════════════════════════════════════════════════════════════════ */
.siges-ij__cta-row {
  margin-top: clamp(28px, 4vw, 52px);
  display: flex;
  justify-content: flex-start;
}
.siges-ij__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--page-accent, #513C2D);
  color: #fff;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.siges-ij__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #fff;
}
.siges-ij__cta-arrow { transition: transform 0.22s ease; }
.siges-ij__cta:hover .siges-ij__cta-arrow { transform: translateX(3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   Dark-Mode — bei dunklem Section-BG: heller Text, Gold-Akzente
   ═══════════════════════════════════════════════════════════════════════════ */
.siges-ij--dark { color: #F1F1F1; }
.siges-ij--dark .siges-ij__text { color: #F1F1F1; }
.siges-ij--dark .siges-ij__caption { color: rgba(255, 255, 255, 0.7); }
.siges-ij--dark .siges-ij__arrow-pane { color: var(--siges-gold, #BE9B53); }
.siges-ij--dark .siges-ij__block:has(.siges-ij__block-text:hover) .siges-ij__arrow-pane { color: #fff; }
/* Lead-Pill bleibt weiß mit Brand-Textfarbe — gut lesbar auf dunklem BG */