/* ==========================================================================
   Merava Private — Utilities (Relume-aligned)
   --------------------------------------------------------------------------
   Section, Container, Layout-Helpers, A11Y, Type-Modifier, Buttons.
   Relume-Design-Sprache:
   - Section bekommt px-[5%] direkt; Container ist nur max-width
   - Null Border-Radius
   - Null Shadows
   - Hairline-Borders (1px)
   - 3-stufiges responsive Spacing
   ========================================================================== */

/* -------------------------------------------------------------------------
   Section — Relume-Pattern: 5% Side-Padding + responsive Vertical
   ------------------------------------------------------------------------- */

.section {
  /* KEIN inline-padding auf Mobile/Tablet: der .container-Gutter ist die
     einzige horizontale Quelle. Vorher: Section 5% + Container 24px = ~44px
     je Seite auf Mobile (Doppel-Padding). Das 5% kommt erst ab Laptop wieder
     dazu (siehe 64em-Block) -> Laptop bleibt exakt wie bisher. */
  padding-block: var(--section-py-mobile);          /*  64px */
}

@media (min-width: 48em) {
  .section { padding-block: var(--section-py-tablet); }   /*  96px */
}

@media (min-width: 64em) {
  .section {
    padding-block: var(--section-py-desktop);             /* 112px */
    padding-inline: var(--section-inline-padding);        /* 5% — erst ab Laptop */
  }
}

/* Tight-Variant (Hero, CTA-Banner, Sub-Page-Intros) */
.section--tight {
  padding-block: var(--section-py-mobile-tight);
}
@media (min-width: 48em) {
  .section--tight { padding-block: var(--section-py-tablet-tight); }
}
@media (min-width: 64em) {
  .section--tight { padding-block: var(--section-py-desktop-tight); }
}

.section--flush {
  padding-block: 0;
}

.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}
.section--dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-on-dark);
}
.section--dark p {
  color: var(--text-on-dark);
}

/* -------------------------------------------------------------------------
   Container — zentrierter Wrapper innerhalb der Section
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  /* Horizontaler Gutter, damit der Inhalt auf schmalen Fenstern (<= max-width)
     nicht am Bildschirmrand klebt. Die max-width ist um 2x Gutter erhoeht,
     damit die effektive Content-Breite auf breiten Screens UNVERAENDERT
     bleibt (box-sizing: border-box). */
  max-width: calc(var(--container-default) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--container-gutter)); }
.container--wide   { max-width: calc(var(--container-wide) + 2 * var(--container-gutter)); }

/* Responsiver Container-Gutter = horizontaler Seitenabstand je Breite.
   Default (tokens.css) = 16px Hochformat. Auf Mobile/Tablet ist der Gutter die
   EINZIGE horizontale Quelle (.section steuert kein inline-padding bei); ab
   Laptop kommt Section-5% dazu, daher dort zurueck auf 24px. */
@media (min-width: 30em) { :root { --container-gutter: 1.5rem; } }  /* 24px — Querformat / groessere Phones */
@media (min-width: 48em) { :root { --container-gutter: 2rem;   } }  /* 32px — Tablet */
@media (min-width: 64em) { :root { --container-gutter: 1.5rem; } }  /* 24px — Laptop (+ Section 5%) */

/* Section-Intro: linksbündig, max-width für lesbare Zeilenlängen.
   Ersetzt das alte text-center-wrap (zentrierte H2 sind editorial off). */
.section-intro {
  max-width: 36rem;        /* 576 px — leicht breiter als max-w-lg */
  text-align: left;
  margin-bottom: var(--space-7);
}

/* Innerhalb des section-intro: Spacing zwischen Eyebrow / H2 / Lede / Body.
   Globales `* { margin: 0 }` reset killt sonst alles → keine Abstände. */
.section-intro > * + * {
  margin-top: var(--space-4);
}
.section-intro .eyebrow + h1,
.section-intro .eyebrow + h2,
.section-intro .eyebrow + h3 {
  margin-top: var(--space-3);  /* Eyebrow direkt unter dem Headline-Block */
}
@media (min-width: 48em) {
  .section-intro { margin-bottom: 4.5rem; }    /* 72 px */
}
@media (min-width: 64em) {
  .section-intro { margin-bottom: var(--space-8); }   /* 64 px Tablet → 80 px Effekt */
}

/* Backward-Compat: alter Name verweist auf neuen Style */
.text-center-wrap { max-width: 36rem; text-align: left; margin-bottom: var(--space-7); }

/* -------------------------------------------------------------------------
   Stack — vertikale Spacing (Owl-Selector)
   ------------------------------------------------------------------------- */

.stack > * + * { margin-top: var(--space-5); }
.stack--sm > * + * { margin-top: var(--space-3); }
.stack--md > * + * { margin-top: var(--space-5); }
.stack--lg > * + * { margin-top: var(--space-7); }
.stack--xl > * + * { margin-top: var(--space-9); }

/* -------------------------------------------------------------------------
   Cluster — horizontale Gruppe (Buttons, Tags, Inline-Items)
   ------------------------------------------------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.cluster--sm { gap: var(--space-2); }
.cluster--lg { gap: var(--space-6); }

/* -------------------------------------------------------------------------
   Grid Helfer
   ------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-6);
}

/* 3-Spalter Cards (Relume: gap-x-8 gap-y-12 → 32/48px) */
.grid--3 {
  grid-template-columns: 1fr;
  gap: var(--space-7) var(--space-6);    /* y=48, x=32 — mobile single col */
}
@media (min-width: 48em) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);  /* y=64 ab tablet */
  }
}
@media (min-width: 64em) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 2-Spalter Cards / Editorial-Split */
.grid--2 {
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 48em) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);          /* 48px Tablet */
  }
}
@media (min-width: 64em) {
  .grid--2 { column-gap: var(--space-8); }  /* 64px Desktop, näher an Relume 80 */
}

/* 4-Spalter (Layout31) */
.grid--4 {
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);     /* y=32 x=24 — Relume gap-x-6 gap-y-8 */
}
@media (min-width: 30em) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 2x2-Spezialfall (Stage 3: Service-/Location-Tiles auf Startseite) */
.grid--2x2 {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48em) {
  .grid--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* Editorial-Split: 1/1 Spalten, optional gewichtet via Modifier */
.split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-7);                    /* 48px mobile */
}
@media (min-width: 48em) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);           /* 48px tablet */
  }
}
@media (min-width: 64em) {
  .split { column-gap: 5rem; }            /* 80px desktop */
}

.split--media-right { /* default: media-left visuell. Reihenfolge via order */ }
.split--media-right > :first-child { order: 2; }
.split--media-right > :last-child  { order: 1; }
@media (max-width: 48em) {
  /* Auf Mobile: media immer oben, Text drunter */
  .split--media-right > :first-child,
  .split--media-right > :last-child { order: initial; }
}

/* -------------------------------------------------------------------------
   A11Y Helfer
   ------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: var(--z-toast);
}
.skip-link:focus { transform: translateY(0); }

/* -------------------------------------------------------------------------
   Type-Modifier — applied auf Headings/Paragraphs für Override
   -------------------------------------------------------------------------
   Relume-aligned:
   - .h-display = Section-Headline (text-7xl bzw. responsive)
   - .h-hero    = Hero-Display (text-9xl/10xl — Startseite, Ablauf)
   - .eyebrow   = font-semibold, kein uppercase, kein tracking
   ------------------------------------------------------------------------- */

/* Section-Headline (= h2 Webflow-Default 60 px) */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);             /* 60 px desktop, responsive via Token-Overrides */
  line-height: var(--leading-snug);       /* 1.2 */
  letter-spacing: var(--tracking-h2);
}

/* Hero-Display (= h1 Webflow-Default 84 px) */
.h-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);             /* 84 px desktop, responsive */
  line-height: var(--leading-tight);      /* 1.1 */
  letter-spacing: var(--tracking-h1);
}

/* Card-Title (= h3 Webflow-Default 48 px, in Cards meist kleiner = h4 40 px) */
.h-card {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);             /* 40 px desktop, responsive */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h4);
}

/* Eyebrow / Tagline — Relume-Pattern: kein Caps, semibold, gleiche Body-Size */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: block;
}
@media (min-width: 48em) {
  .eyebrow { margin-bottom: var(--space-4); }
}

/* Eyebrow auf dunklem BG / Image-Overlay — kleiner, semibold */
.eyebrow--small {
  font-size: var(--text-sm);
}

/* Lede / Body-Lead — größerer Intro-Absatz */
.lede {
  font-size: var(--text-md);                /* 18 px — Webflow text-size-medium-2 */
  line-height: var(--leading-body);         /* 1.6 */
  color: var(--text-primary);
  max-width: 50ch;
}

.text-muted    { color: var(--text-muted); }
.text-on-dark  { color: var(--text-on-dark); }
.text-accent   { color: var(--accent); }
.text-center   { text-align: center; }

/* -------------------------------------------------------------------------
   Buttons — Relume-Style-Guide aligned
   -------------------------------------------------------------------------
   Hierarchie:
     - .btn--primary    = Gold-Filled (Hauptaktion, Default-CTA)
     - .btn--secondary  = Outline transparent (zweite Aktion)
     - .btn--alternate  = Anthrazit-Filled (Dark-CTA, sparsam)
     - .btn--link       = Link-with-Arrow (Tertiary, in Text-Kontexten)
   Geometrie: 24/12 px Padding · 8 px Radius · 1 px Border
   Hover: 2 px Lift + Multi-Layer-Inset-Shadow (Relume-Original) · 200 ms
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);                        /* 8 px Icon-Abstand */
  padding: var(--space-3) var(--space-5);     /* 12 / 24 */
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 0;                                  /* Webflow: kein Border, Shadow ersetzt */
  border-radius: var(--radius-button);        /* 6 px */
  cursor: pointer;
  will-change: transform;
  background-color: var(--accent);            /* Default = Primary Gold */
  color: var(--text-primary);
  box-shadow: var(--shadow-button);           /* Multi-Layer im DEFAULT */
  /* WICHTIG: color NICHT transitionieren — Webflow-Spec hat kein Color-Change im Hover */
  transition: transform var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}

.btn:hover {
  background-color: var(--accent-active);     /* Gold-Dark */
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-button);
  transition-duration: var(--duration-fast);
}

/* Explizites :focus-visible — der globale Reset-Style ist da, aber der
   eigene box-shadow von .btn kann den 2-px-Outline visuell ueberlagern.
   Hier gehen wir auf Nummer sicher mit etwas mehr Offset. */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Größen-Variante — kleiner (Webflow .is-small) */
.btn--sm {
  padding: var(--space-2) var(--space-4);     /* 8 / 16 — Webflow */
  font-size: var(--text-sm);
}

/* Primary — explizit, identisch zum Default */
.btn--primary {
  background-color: var(--accent);
  color: var(--text-primary);
}
.btn--primary:hover { background-color: var(--accent-active); }

/* Backward-Compat */
.btn--gold {
  background-color: var(--accent);
  color: var(--text-primary);
}
.btn--gold:hover { background-color: var(--accent-active); }

/* Secondary — Glass-Subtle (Webflow .is-secondary)
   Transparenter Dark-Tint + Backdrop-Blur + soft Shadow */
.btn--secondary {
  background-color: var(--opacity-black-5);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-button-subtle);
}
.btn--secondary:hover {
  background-color: var(--opacity-black-15);
  box-shadow: var(--shadow-button-subtle);    /* Webflow: kein Shadow-Change */
  transform: translateY(-2px);                /* Wir behalten den Lift für Konsistenz */
}

/* Alternate — Schwarz (Webflow .is-alternate) */
.btn--alternate {
  background-color: var(--color-black);
  color: var(--color-white);
}
.btn--alternate:hover { background-color: var(--color-neutral-darker); }

/* Secondary auf dunklem BG (Webflow .is-secondary.is-alternate) */
.section--dark .btn--secondary,
.btn--secondary-on-dark {
  background-color: var(--opacity-white-10);
  color: var(--color-white);
  box-shadow:
    0 1px 2px 0 var(--opacity-black-5),
    inset 0 -2px 1px 0 var(--opacity-black-5),
    inset 0 0 0 1px var(--opacity-white-10);
}
.section--dark .btn--secondary:hover,
.btn--secondary-on-dark:hover {
  background-color: var(--opacity-white-10);   /* kein Farbwechsel */
  /* Gleiche Subtle-Shadow wie im Default — verhindert, dass .btn:hover die
     schwere Multi-Layer-Shadow (fetterer Border/Sheen) draufsetzt. */
  box-shadow:
    0 1px 2px 0 var(--opacity-black-5),
    inset 0 -2px 1px 0 var(--opacity-black-5),
    inset 0 0 0 1px var(--opacity-white-10);
  transform: translateY(-2px);                 /* nur der dezente 2px-Lift wie bei den anderen Buttons */
}

/* Link — Text-Link-Variante (Webflow .is-link)
   Transparent, kein Padding-Großzügig, kein Shadow, kein Lift.
   Hover: Color wechselt zu Gold + Pfeil rutscht nach rechts. */
.btn--link {
  padding: 0.25rem 0;                         /* 4 / 0 — Webflow */
  background-color: transparent;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  border-radius: 0;
  box-shadow: none;
  gap: var(--space-2);
  /* Eigene Transition (überschreibt .btn-Default-Transition) — color animieren */
  transition: color var(--duration-base) var(--ease-default);
}
.btn--link:hover {
  background-color: transparent;
  transform: none;
  box-shadow: none;
  color: var(--accent);                       /* Gold beim Hover */
}

.section--dark .btn--link,
.btn--link-on-dark { color: var(--color-white); }

/* Pfeil-Icon — matcht sowohl .arrow als auch .link-arrow__icon SVG */
.btn--link .arrow,
.btn--link .link-arrow__icon {
  width: 1em;
  height: 1em;
  transition: transform var(--duration-base) var(--ease-default);
}
.btn--link:hover .arrow,
.btn--link:hover .link-arrow__icon {
  transform: translateX(4px);
}

/* Mobile (<48em): Buttons fluellen ihren Container. Klassisches Mobile-Pattern —
   leichter zu treffen, klarere Hierarchie. In .cluster (2 Buttons nebeneinander)
   stapeln sie sich automatisch durch flex-wrap. white-space loesen wir, damit
   lange Labels umbrechen statt abgeschnitten zu werden. */
@media (max-width: 47.99em) {
  .btn {
    width: 100%;
    white-space: normal;
  }
  /* Inline-Link-Variante nicht (sollen weiterhin inline mit Pfeil bleiben). */
  .btn--link { width: auto; }
}

/* -------------------------------------------------------------------------
   Misc Layout Helfer
   ------------------------------------------------------------------------- */

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  width: 100%;
}

.divider--dark { background: var(--border-dark); }

/* -------------------------------------------------------------------------
   Section-Helfer (Stage 3) — zentrierte Intro + zentrierte Sektions-Aktion
   ------------------------------------------------------------------------- */
.section-intro--center {
  max-width: 48rem;          /* breiter als die 36rem-Default-Intro */
  margin-inline: auto;       /* zentriert den Block selbst im Container */
  text-align: center;
}
.section-intro--center > * { margin-inline: auto; }   /* zentriert auch max-width-Blocks (z.B. .lede) */

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.section-actions--start { justify-content: flex-start; }

/* Action-Wrapper innerhalb einer .section-intro (z.B. Honorare-Pricing-Header
   wo der Cross-Link zwischen Lede und Grid sitzt). Linksbuendig wenn die
   section-intro--center ist, behaelt der Wrapper sein eigenes center-Alignment. */
.section-intro__action {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
}
.section-intro:not(.section-intro--center) .section-intro__action { justify-content: flex-start; }