/* ==========================================================================
   stenVal Consult — Inhaltsseiten aus dem Pagebuilder
   Dünne Raster- und Bild-Schicht über stenval.css. Nur Tokens, keine
   Fremdfarben. Wird per extraCss nur von Pagebuilder-Seiten geladen.
   Freie Anordnung = großer Schirm; schmal bricht alles sauber untereinander um.
   ========================================================================== */

/* Pagebuilder-Seiten dürfen breiter sein als die Lesespalte der Rechtstexte,
   damit Blöcke nebeneinander Platz haben. */
.page--builder {
  max-width: calc(1120px + 2 * var(--pad-x) + var(--safe-l) + var(--safe-r));
}

/* Optionaler LinkedIn-Link neben der Seiten-Überschrift (seite.linkedin). */
.page-head h1 .page-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(20px, 0.5em, 30px);
  height: clamp(20px, 0.5em, 30px);
  margin-left: 0.3em;
  vertical-align: 0.04em;
  color: var(--consult);
  transition: color 0.15s ease;
}
.page-head h1 .page-linkedin svg { width: 100%; height: 100%; fill: currentColor; }
.page-head h1 .page-linkedin:hover { color: var(--val); }

/* Freie (absolute) Anordnung – 1:1 wie im Pagebuilder: 48 Spalten, Zeile = 6px.
   Das Design ist fest 1120px breit und wird per site.js proportional auf die
   verfügbare Breite skaliert (Scale-to-fit) – so bleibt die Anordnung inkl.
   Überlappung auf jeder Breite exakt, nichts verrutscht/verschwimmt. */
/* --kopf-rueckt: zieht das gesamte Raster als Einheit nach oben, um den
   Abstand zwischen Seitenkopf und erstem Block zu verkleinern. Die
   Anordnung IM Raster bleibt dabei unberührt – alle Blöcke wandern
   gemeinsam. Der Wert steht je Seite im style-Attribut der Quelle. */
.pb-scale { position: relative; width: 100%; overflow: hidden;
            margin-top: var(--kopf-rueckt, 0); }
.pb-grid {
  position: relative;
  width: 1120px;
  min-height: var(--pb-h, 0);
  margin-inline: auto;          /* zentriert, wenn Platz ≥ 1120px */
  transform-origin: top left;   /* site.js setzt transform: scale(...) */
}
.pb-col {
  position: absolute;
  left: calc((var(--x, 1) - 1) / 48 * 100%);
  width: calc(var(--w, 48) / 48 * 100%);
  top: calc((var(--y, 1) - 1) * 6px);
  min-height: calc(var(--h, 1) * 6px);
  min-width: 0;                 /* verhindert Überlaufen langer Wörter/Bilder */
}
/* Button-Leiste: auf großem Schirm transparent – die Buttons liegen frei per
   --x/--y (absolut). Erst beim Stapeln wird sie zu einer Reihe (siehe @media). */
.pb-buttonleiste { display: contents; }

/* Ein auslaufendes Bild (Verlauf) liegt IMMER über dem Nachbartext – so läuft es
   über den Text aus (Text scheint durch), unabhängig von der Blockreihenfolge.
   Sonst kippt bei tiefer sitzendem Text die Stapelung und der Schleier verdeckt
   das Foto (weiße „Karte"). Bilder ohne Verlauf bleiben unberührt. */
.pb-col:has(> .pb-figure[class*="is-verlauf-"]) { z-index: 2; }

/* Schmale Schirme: kein Skalieren, sondern gestapelt in Lesereihenfolge
   (DOM-Reihenfolge = oben→unten, links→rechts). Überlappung nur auf großem Schirm.
   Flex-Spalte, damit „order" Blöcke ans Ende schieben kann (z. B. Bild). */
@media (max-width: 46rem) {
  .pb-scale { overflow: visible; }
  .pb-grid {
    width: 100% !important; transform: none !important; min-height: 0 !important;
    margin: 0; display: flex; flex-direction: column;
  }
  .pb-col {
    position: static;
    left: auto;
    top: auto;
    width: 100% !important;
    min-height: 0;
    margin-bottom: clamp(20px, 5vh, 32px);
  }
  .pb-col.pb-mobil-zuletzt { order: 10; margin-bottom: 0; }  /* z. B. Bild ganz nach unten */

  /* Button-Leiste als EINE Reihe: Buttons auf gleicher Höhe, natürliche Breite,
     an den Rändern (space-between), bei zu wenig Platz umbrechend. */
  .pb-buttonleiste {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 12px 16px;
    margin-bottom: clamp(20px, 5vh, 32px);
  }
  .pb-buttonleiste .pb-col--button { width: auto !important; min-height: 0; margin-bottom: 0; flex: 0 1 auto; }
  .pb-buttonleiste .pb-buttonzeile { margin: 0; }
}

/* Text -------------------------------------------------------------------- */
/* Überschriften kommen aus .page h1 / .prose h2,h3; hier nur die Tönung.    */
.pb-text.pb-ton-val    :where(h1, h2, h3) { color: var(--val); }
.pb-text.pb-ton-consult :where(h1, h2, h3) { color: var(--consult); }
.pb-text.pb-ton-ink    :where(h1, h2, h3) { color: var(--ink); }
.pb-text > :first-child { margin-top: 0; }

/* Schriftgröße je Textblock – skaliert den Fließtext (Überschriften behalten ihre Skala) */
.pb-text.pb-size-s  { font-size: 0.85em; }
.pb-text.pb-size-m  { font-size: 1.08em; }   /* Feinstufe: ~1–2 pt größer */
.pb-text.pb-size-l  { font-size: 1.18em; }
.pb-text.pb-size-xl { font-size: 1.4em; }

/* Zeilenabstand je Textblock (Standard aus stenval.css ≈ 1.6) */
.pb-text.pb-lh-eng    { line-height: 1.4; }
.pb-text.pb-lh-mittel { line-height: 1.5; }   /* Feinstufe zwischen eng und normal */
.pb-text.pb-lh-weit   { line-height: 1.85; }

/* Textausrichtung (links = Standard) */
.pb-text.pb-align-mitte  { text-align: center; }
.pb-text.pb-align-rechts { text-align: right; }

/* Button-Zeile aus Pagebuilder-Button-Blöcken (nutzt .btn / .btn--ghost aus stenval.css) */
.pb-buttonzeile { display: flex; margin: 6px 0; }
.pb-buttonzeile.is-mitte  { justify-content: center; }
.pb-buttonzeile.is-rechts { justify-content: flex-end; }

/* Textfarbe des Fließtexts – nur Tokens; Überschriften behalten ihren Ton */
/* Höhere Spezifität (.prose ist immer da) + text-fill-color: die gewählte
   Textfarbe GEWINNT über Schleier und Verlauf. „standard" = keine Klasse, dann
   bestimmen Prose/Schleier/Verlauf die Farbe. */
.pb-text.pb-farbe-sten.prose    p, .pb-text.pb-farbe-sten.prose    li { color: var(--sten);     -webkit-text-fill-color: var(--sten); }
.pb-text.pb-farbe-val.prose     p, .pb-text.pb-farbe-val.prose     li { color: var(--val);      -webkit-text-fill-color: var(--val); }
.pb-text.pb-farbe-consult.prose p, .pb-text.pb-farbe-consult.prose li { color: var(--consult);  -webkit-text-fill-color: var(--consult); }
.pb-text.pb-farbe-ink.prose     p, .pb-text.pb-farbe-ink.prose     li { color: var(--ink);      -webkit-text-fill-color: var(--ink); }
.pb-text.pb-farbe-soft.prose    p, .pb-text.pb-farbe-soft.prose    li { color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); }
.pb-text.pb-farbe-weiss.prose   p, .pb-text.pb-farbe-weiss.prose   li { color: #fff;            -webkit-text-fill-color: #fff; }

/* Text-Farbverlauf: die Schrift wird mit einem Verlauf aus zwei VOLL-Tönen
   gefüllt (Weiß ↔ Navy) – die Farbe wechselt über die Fläche, die Schrift wird
   NICHT schwächer (keine Transparenz). Gedacht für Text über einem auslaufenden
   Bild; Richtung gegenläufig wählbar. */
/* --tv-ab = Fixpunkt (wo der Farbwechsel liegt), --tv-w = halbe Übergangsbreite
   (klein = harte Kante/hoher Kontrast, groß = weicher Verlauf). */
.pb-text.pb-tverlauf-rechts { background-image: linear-gradient(to right,  var(--tv-a, var(--paper)) calc(var(--tv-ab, 50%) - var(--tv-w, 18%)), var(--tv-b, var(--sten)) calc(var(--tv-ab, 50%) + var(--tv-w, 18%))); }
.pb-text.pb-tverlauf-links  { background-image: linear-gradient(to left,   var(--tv-a, var(--paper)) calc(var(--tv-ab, 50%) - var(--tv-w, 18%)), var(--tv-b, var(--sten)) calc(var(--tv-ab, 50%) + var(--tv-w, 18%))); }
.pb-text.pb-tverlauf-oben   { background-image: linear-gradient(to top,    var(--tv-a, var(--paper)) calc(var(--tv-ab, 50%) - var(--tv-w, 18%)), var(--tv-b, var(--sten)) calc(var(--tv-ab, 50%) + var(--tv-w, 18%))); }
.pb-text.pb-tverlauf-unten  { background-image: linear-gradient(to bottom, var(--tv-a, var(--paper)) calc(var(--tv-ab, 50%) - var(--tv-w, 18%)), var(--tv-b, var(--sten)) calc(var(--tv-ab, 50%) + var(--tv-w, 18%))); }
.pb-text.pb-tvon-hell   { --tv-a: var(--paper); --tv-b: var(--sten); }   /* hell → dunkel */
.pb-text.pb-tvon-dunkel { --tv-a: var(--sten);  --tv-b: var(--paper); }  /* dunkel → hell */
/* Verlauf auf die Glyphen klippen und deren Eigenfüllung transparent machen,
   damit der Verlauf durchscheint – auch bei Überschriften/Absätzen/Listen. */
.pb-text[class*="pb-tverlauf-"] {
  -webkit-background-clip: text;
          background-clip: text;
}
.pb-text[class*="pb-tverlauf-"],
.pb-text[class*="pb-tverlauf-"] p,
.pb-text[class*="pb-tverlauf-"] li,
.pb-text[class*="pb-tverlauf-"] :where(h1, h2, h3) {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Lesbarkeits-Schleier hinter dem Text: dezentes halbtransparentes Feld, das den
   Kontrast über JEDER Bildstelle sichert. --sl-a = Stärke (Deckkraft). Die
   Schriftfarbe wird passend gesetzt (hell → dunkle Schrift, dunkel → weiße). */
.pb-text.pb-schleier-hell,
.pb-text.pb-schleier-dunkel {
  padding: clamp(14px, 2vw, 22px);
  border-radius: 14px;
}
.pb-text.pb-schleier-hell   { background-color: rgba(255, 255, 255, var(--sl-a, 0.55)); }
.pb-text.pb-schleier-dunkel { background-color: rgba(28, 63, 116, var(--sl-a, 0.55)); }
.pb-text.pb-schleier-hell p, .pb-text.pb-schleier-hell li { color: #3a3a3c; -webkit-text-fill-color: #3a3a3c; }
.pb-text.pb-schleier-hell :where(h1, h2, h3) { color: var(--sten); -webkit-text-fill-color: var(--sten); }
.pb-text.pb-schleier-dunkel,
.pb-text.pb-schleier-dunkel p,
.pb-text.pb-schleier-dunkel li,
.pb-text.pb-schleier-dunkel :where(h1, h2, h3) { color: #fff; -webkit-text-fill-color: #fff; }

/* Bild -------------------------------------------------------------------- */
.pb-figure { margin: 0; }
.pb-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pb-radius, 14px);
}
.pb-figure.is-cover img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.pb-figure.is-radius-none img { border-radius: 0; }
.pb-figure.is-radius-s img { --pb-radius: 8px; }
.pb-figure.is-radius-l img { --pb-radius: 22px; }
.pb-figcaption {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Verschmelzen: Bild läuft zu einer Seite hin ins Helle aus und geht in die
   Fläche (und damit den Text) über. Zugleich gleiche Höhe wie der Nachbar. */
.pb-col.is-stretch { align-self: stretch; }
.pb-col.is-stretch .pb-figure { height: 100%; }
.pb-col.is-stretch .pb-figure img { height: 100%; object-fit: cover; }
/* --pb-vab: „ab hier" ausblenden (Standard 30 %). Wird je Bild gesetzt. */
.pb-figure.is-verlauf-rechts img {
  -webkit-mask-image: linear-gradient(to right, #000 var(--pb-vab, 30%), transparent 100%);
          mask-image: linear-gradient(to right, #000 var(--pb-vab, 30%), transparent 100%);
}
.pb-figure.is-verlauf-links img {
  -webkit-mask-image: linear-gradient(to left, #000 var(--pb-vab, 30%), transparent 100%);
          mask-image: linear-gradient(to left, #000 var(--pb-vab, 30%), transparent 100%);
}
.pb-figure.is-verlauf-oben img {
  -webkit-mask-image: linear-gradient(to top, #000 var(--pb-vab, 30%), transparent 100%);
          mask-image: linear-gradient(to top, #000 var(--pb-vab, 30%), transparent 100%);
}
.pb-figure.is-verlauf-unten img {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--pb-vab, 30%), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--pb-vab, 30%), transparent 100%);
}
@media (max-width: 46rem) {
  /* schmal (gestapelt): das Bild voll zeigen – kein Ausblenden/Heller-werden.
     Der Verlauf ergibt nur in der Überlappung auf großem Schirm Sinn. */
  .pb-figure.is-verlauf-rechts img,
  .pb-figure.is-verlauf-links img,
  .pb-figure.is-verlauf-oben img,
  .pb-figure.is-verlauf-unten img {
    -webkit-mask-image: none;
            mask-image: none;
  }
}