/* ==========================================================================
   udokerzinger.de · Dachmarke — Unterseiten
   Seitenkopf, Fließtext, abgesetzte Bänder, Zahlen, Zitat, Weltenbrücke.
   ========================================================================== */

/* ---------- Seitenkopf ---------------------------------------------------- */

.page-hero {
  padding-block: clamp(7rem, 5rem + 8vw, 11rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.page-hero__statement {
  margin-top: clamp(1.2rem, .8rem + 1.6vw, 2rem);
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  max-width: 20ch;
  text-wrap: balance;
}


/* ---------- Fließtext ------------------------------------------------------ */

.prose > * + * { margin-top: var(--sp-md); }
.prose p { max-width: 62ch; color: var(--muted); }
.prose p.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: 38ch;
}


/* ---------- Zweispaltig mit Bild ------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split           { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
  .split--reverse  { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
}

.figure-img {
  position: relative;
  margin: 0;
}

.figure-img picture { display: block; }

.figure-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--focal, 50% 30%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 899px) {
  .figure-img img { aspect-ratio: 4 / 3; }
}

.figure-img::after {
  content: '';
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  z-index: 0;
}

/* Platzhalter für ein noch fehlendes Bild. Zeigt, was hier hingehört —
   statt einfach leer oder kaputt zu wirken. */
.figure-slot {
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  text-align: center;
}

.figure-slot__tag {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.figure-slot__hint {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted);
  max-width: 28ch;
}

.figure-slot code {
  font-size: var(--fs-micro);
  color: var(--muted-soft);
  word-break: break-all;
}


/* ---------- Abgesetzte Bänder ---------------------------------------------- */

.band--warm {
  background: var(--paper-warm);
  border-block: 1px solid var(--line);
}

.band--dark {
  background: var(--ink-deep);
  color: var(--on-dark);
}

.band--dark .t-eyebrow,
.band--dark .prose p { color: var(--on-dark-muted); }


/* ---------- Die Brücke zu den drei Welten ----------------------------------

   Drei Bilder, drei Texte, drei Wege — vom Innen über das Erleben zum
   Konkreten.

   Bewusst keine Karten: kein Kasten, kein Schatten, kein Rahmen. Was die
   drei Spalten zusammenhält, ist der gleiche Bildzuschnitt und der gleiche
   Rhythmus, nicht eine gezeichnete Box. Das hält den Abschnitt ruhig genug
   für eine Dachmarke und trotzdem klar getrennt.

   Die Weltfarbe steckt nur in der feinen Linie und im Link. Drei bunte
   Flächen nebeneinander würden das Gegenteil von ruhig ergeben.        */

.bridge__list {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  display: grid;
  gap: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
}

@media (min-width: 860px) {
  .bridge__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bridge__item { min-width: 0; }

/* Die ganze Spalte ist ein Ziel. Wer auf das Bild tippt, landet dort, wo
   der Link hinführt — auf dem Telefon ist das der Unterschied zwischen
   „bedienbar" und „hübsch".

   Als Flex-Spalte über die volle Höhe, damit die drei Links unten auf
   einer Linie stehen. Sonst rutscht der eine Link nach unten, dessen Text
   eine Zeile mehr braucht, und die drei Spalten wirken unsortiert. */
.bridge__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.bridge__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: clamp(10px, .4rem + .6vw, 16px);
  background: var(--surface-soft, rgba(23, 33, 43, .04));
}

.bridge__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 700ms var(--ease-soft), filter 700ms var(--ease-soft);
}

/* Die feine Linie unter dem Bild trägt die Farbe der Welt. */
.bridge__title {
  margin-top: var(--sp-md);
  padding-top: var(--sp-sm);
  border-top: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: var(--ls-head);
}

.bridge__text {
  margin-top: var(--sp-xs);
  color: var(--muted);
  font-size: var(--fs-body);
  max-width: 34ch;
}

.bridge__cta {
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  gap: .5em;
  margin-top: auto;
  padding-top: var(--sp-md);
  color: var(--accent-strong);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .01em;
}

.bridge__cta .label {
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-soft);
}

.bridge__cta .arrow {
  transition: transform 300ms var(--ease-soft);
}

/* Hover nur dort, wo es eine Maus gibt. Auf dem Telefon würde der Zustand
   nach dem Antippen kleben bleiben. */
@media (hover: hover) and (pointer: fine) {
  .bridge__link:hover .bridge__media img {
    transform: scale(1.035);
    filter: brightness(1.03);
  }
  .bridge__link:hover .bridge__cta .label { border-bottom-color: currentColor; }
  .bridge__link:hover .bridge__cta .arrow { transform: translateX(.25em); }
}

.bridge__link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 6px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .bridge__media img,
  .bridge__cta .label,
  .bridge__cta .arrow { transition: none; }
  .bridge__link:hover .bridge__media img { transform: none; }
}

/* Fehlt ein Bild, hält der Platzhalter dieselbe Fläche frei. */
.figure-slot--square {
  aspect-ratio: 1 / 1;
  height: 100%;
}


/* ---------- Zahlen ---------------------------------------------------------- */

.figures {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

@media (min-width: 700px)  { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.figure__rule {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--accent-second);
  margin-bottom: var(--sp-sm);
}

.figure__value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
}

.figure__label {
  display: block;
  margin-top: .6rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 26ch;
}

.note {
  margin-top: clamp(2rem, 1.4rem + 2.5vw, 3rem);
  padding-left: clamp(1rem, .7rem + 1vw, 1.5rem);
  border-left: 2px solid var(--accent-second);
  max-width: var(--w-text);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--on-dark-muted);
}


/* ---------- Zitat ------------------------------------------------------------ */

.quote {
  margin: 0 auto;
  max-width: 44rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

.quote::before {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--line-strong);
  margin: 0 auto clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.quote__cite {
  display: block;
  margin-top: clamp(1.2rem, .9rem + 1.2vw, 1.8rem);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}


/* ---------- Abschluss --------------------------------------------------------- */

.page-close__text {
  margin-top: var(--sp-md);
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.page-close__actions {
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  display: flex;
  gap: var(--sp-md) var(--sp-lg);
  flex-wrap: wrap;
  align-items: center;
}