/* ============================================================
   KOMPONENTEN — Nav, Buttons, Karten, Zeilen, Formular, Footer
   Sämtliche Maße sind am Original bei 1440 × 900 nachgemessen.
   ============================================================ */

@media (max-width: 1100px) {
  .about__media { position: relative; left: auto; bottom: auto; translate: none; }
}

/* ---------- ABOUT ---------------------------------------------------
   Drei Ebenen, alle unten bündig 20px über dem Sektionsende:
   links 300px, rechts 360px, dazwischen die zentrierte 400×456
   Flip-Karte. Der linke Absatz läuft auf 22px, nicht auf 18px. */
/* Die Sektion sitzt bewusst hoch: vorher standen oben 420px leer,
   die man erst wegscrollen musste. */
.about {
  position: relative;
  padding-block: clamp(72px, 10svh, 128px) 20px;
}

.about__cols {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 459px;
}

.about__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about__col--left  { width: 300px; }
.about__col--right { width: 360px; justify-content: flex-end; gap: 20px; }

/* 22px / 600 — der linke Absatz läuft halbfett, nicht normal */
.about__lead {
  font-size: var(--t-h5);
  font-weight: var(--w-semi);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* Das Porträt startet weiter oben — dadurch ist es sichtbar, bevor
   die Sektion ganz im Bild steht — und schiebt sich beim Scrollen in
   die Lücke zwischen den Spalten. --about-shift setzt js/motion.js. */
.about__media {
  position: absolute;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  width: 400px;
  height: 456px;
  transform: translateY(0);   /* js/motion.js schreibt direkt hierher */
  will-change: transform;
}

/* Auf dem Handy soll „Wer bin ich?" gleich nach dem Durchflug stehen,
   nicht erst nach einem weiteren Wischer Leerraum. */
@media (max-width: 680px) {
  .about { padding-block: clamp(44px, 6svh, 72px) 20px; }
}

@media (max-width: 1100px) {
  .about__cols { flex-direction: column; height: auto; gap: 40px; }
  .about__col--left, .about__col--right { width: 100%; }
  .about__media { position: relative; left: auto; bottom: auto; translate: none;
                  transform: none; width: min(400px, 100%); height: auto;
                  aspect-ratio: 400 / 456; margin: 40px auto; }
}

/* ---------- SCRUB-ABSATZ ---------------------------------------------
   840px breit, mittig, 44px. Sitzt vertikal zentriert im gepinnten
   Viewport der .pin-section. */
.scrub-block {
  width: min(840px, 100%);
  text-align: center;
  font-size: var(--t-scrub);      /* 36px, nicht 44 */
  font-weight: var(--w-medium);   /* 500 */
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

/* ---------- SERVICE-ZEILEN --------------------------------------------
   Jede Zeile ist ein eigener Block mit Creme-Grund, 1px Unterkante und
   16px Abstand zur nächsten — keine durchlaufende Liste.

   Zwei Spalten: links Titel und Schlagworte, rechts zwei Zeilen, die
   die Leistung erklären. Die 120px von früher sind jetzt Mindesthöhe:
   der Text darf bei schmalen Spalten eine Zeile mehr brauchen. */
.srows { display: flex; flex-direction: column; gap: var(--grid-gap); }

.srow {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 24px 56px;
  min-height: 120px;
  padding-block: 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  /* Der warme Balken links fährt beim Hovern mit der Einrückung auf */
  box-shadow: inset 3px 0 0 transparent;
  transition: padding-left 420ms var(--ease-spring),
              box-shadow var(--d-color) linear,
              border-color var(--d-color) linear;
}

.srow:hover {
  padding-left: 16px;
  border-bottom-color: var(--c-amber);
  box-shadow: inset 3px 0 0 var(--c-amber);
}

.srow__head { display: flex; flex-direction: column; gap: 10px; }
.srow__title { transition: color var(--d-color) linear; }

.srow__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--t-small);
  color: var(--fg-muted);
  transition: color var(--d-color) linear;
}

.srow__tags span + span::before { content: "•"; margin-right: 8px; }

/* Der Erklärtext liegt gedämpft und hellt beim Hovern auf Tinte auf —
   dasselbe Signal wie die Schlagworte. */
.srow__desc {
  max-width: 48ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg-muted);
  text-wrap: pretty;
  transition: color var(--d-color) linear;
}

.srow:hover .srow__tags,
.srow:hover .srow__desc { color: var(--fg); }

@media (max-width: 900px) {
  .srow { gap: 16px 32px; }
}

@media (max-width: 680px) {
  .srow { grid-template-columns: 1fr; gap: 14px; padding-block: 24px; }
  .srow__desc { max-width: none; font-size: var(--t-small); }
  /* Beim Umbruch landete der Trennpunkt am Zeilenanfang. Auf schmalen
     Viewports trennt deshalb der Abstand statt des Punkts. */
  .srow__tags { gap: 4px 18px; }
  .srow__tags span + span::before { content: none; }
}

/* ---------- REFERENZ-PANELS -------------------------------------------
   Drei gleich breite Flächen nebeneinander. Beim Hovern wächst die
   angesteuerte über flex-grow, die beiden anderen weichen zurück.
   Animiert wird flex-grow statt width, damit die Summe immer aufgeht
   und keine Lücke aufreißt. */
.rpanels {
  display: flex;
  gap: var(--grid-gap);
  height: clamp(360px, 56svh, 560px);
}

.rpanel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  color: var(--fg-invert);
  transition: flex-grow 620ms var(--ease-spring);
}

/* Sobald eine Fläche angesteuert wird, treten die anderen zurück */
.rpanels:hover .rpanel { flex-grow: 0.78; }
.rpanels .rpanel:hover,
.rpanels .rpanel:focus-visible { flex-grow: 2.1; }

.rpanel__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-spring);
}

.rpanel:hover .rpanel__img,
.rpanel:focus-visible .rpanel__img { transform: scale(1.05); }

/* Verlauf, damit die Beschriftung auf jedem Bild lesbar bleibt.
   Nicht neutrales Schwarz, sondern der warme Tiefton aus dem Tunnel —
   die Hallenfotos bekommen dadurch dieselbe Lichtstimmung wie der Hero. */
.rpanel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(36,26,18,0) 38%, rgba(36,26,18,0.78) 100%);
}

.rpanel__text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Kein nowrap: in der eingeklappten Breite würde jeder Titel
   abgeschnitten. Umbrechen ist hier das kleinere Übel. */
.rpanel__title { display: block; text-wrap: balance; }

.rpanel__sub {
  display: block;
  color: var(--fg-invert-muted);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 420ms var(--ease-ui), translate 420ms var(--ease-spring);
}

.rpanel:hover .rpanel__sub,
.rpanel:focus-visible .rpanel__sub { opacity: 1; translate: 0 0; }

.rpanel:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Schmale Viewports: kein Hover, also untereinander in voller Breite */
@media (max-width: 800px) {
  .rpanels { flex-direction: column; height: auto; }
  .rpanel { flex: none; height: 260px; }
  .rpanels:hover .rpanel,
  .rpanels .rpanel:hover { flex-grow: 0; }
  .rpanel__sub { opacity: 1; translate: 0 0; }
}

/* ---------- BUTTONS --------------------------------------------------- */
/* Buttonlabel: 18px / 400 / lh 1.4 / −0.04em */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body);
  font-weight: var(--w-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

.btn__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1px currentColor;
  overflow: hidden;
  transition: background var(--d-ui) var(--ease-ui);
}

.btn__arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 420ms var(--ease-spring), color var(--d-ui) var(--ease-ui);
}

.btn__arrow svg:nth-child(2) { position: absolute; transform: translate(-140%, 140%); }
.btn:hover .btn__arrow { background: currentColor; }
.btn:hover .btn__arrow svg { transform: translate(140%, -140%); color: var(--bg); }
.btn:hover .btn__arrow svg:nth-child(2) { transform: translate(0, 0); }

.on-dark .btn:hover .btn__arrow svg { color: var(--bg-invert); }

/* ---------- KONTAKTFORMULAR --------------------------------------------
   Linke Spalte 640px, 40px Abstand, Formular füllt den Rest (500px). */
.contact {
  display: grid;
  grid-template-columns: 640px 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: var(--section-pt);
}

/* ---------- Mail-Karte statt Formular --------------------------------
   Übernimmt die visuelle Rolle des früheren Formulars: dunkle Fläche
   als Gegengewicht zur hellen Textspalte. */
.mailcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(28px, 4svw, 44px);
  border-radius: var(--r-card);
  background: var(--bg-invert);
  color: var(--fg-invert);
}

.mailcard__label {
  color: var(--fg-invert-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mailcard__mail {
  /* Grad so gewählt, dass die Adresse einzeilig bleibt — bei 36px
     brach sie nach „icloud.co" um und ließ das m allein stehen. */
  font-size: clamp(17px, 2.05vw, 30px);
  font-weight: var(--w-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line-invert);
  transition: border-color var(--d-color) linear;
}

.mailcard__mail:hover { border-color: var(--c-cream); }

.mailcard__hint {
  max-width: 42ch;
  color: var(--fg-invert-muted);
}

/* Schreiben und Anrufen stehen nebeneinander und teilen sich die
   Kartenbreite. Reicht sie nicht, bricht der zweite Knopf darunter —
   deshalb flex-basis statt der 13rem Mindestbreite des Grundknopfs. */
.mailcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
}

.mailcard__actions .ihbutton {
  flex: 1 1 170px;
  min-width: 0;
}

.contact__data {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  margin-top: clamp(32px, 6svh, 64px);
  font-style: normal;
}

.contact__data a {
  border-bottom: 1px solid var(--line);
  transition: border-color var(--d-color) linear;
}

.contact__data a:hover { border-color: var(--fg); }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- FOOTER — Sticky Reveal --------------------------------
   Nachgebaut nach der übergebenen StickyFooter-Komponente.

   Der Trick steckt im clip-path: er macht .footer zum Containing
   Block für das fixierte Kind. Das Kind hängt dadurch am unteren
   Rand des Footers statt am Viewport und wird vom clip-path
   beschnitten — der Seiteninhalt schiebt sich darüber hinweg und
   gibt den Footer nach und nach frei.

   Die Höhe muss fest sein: sie ist zugleich die Enthüllungsstrecke. */
:root { --footer-h: 812px; }   /* = Enthüllungsstrecke; muss den Inhalt fassen */

.footer {
  position: relative;
  width: 100%;
  background: var(--bg-invert);
  color: var(--fg-invert);
}

/* Der Reveal ist optional: er braucht oberhalb genug Scrollstrecke.
   Kurze Unterseiten bekommen den Footer deshalb ohne Mechanik. */
.footer--sticky {
  height: var(--footer-h);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.footer--sticky .footer__fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: var(--footer-h);
}

.footer--sticky .footer__sticky {
  position: sticky;
  top: calc(100svh - var(--footer-h));
  height: 100%;
  overflow-y: auto;
}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding-block: clamp(56px, 9svh, 104px) clamp(20px, 3svh, 32px);
  border-top: 1px solid var(--line-invert);
  background: var(--bg-invert);
  overflow: hidden;
}

/* Lichtschlieren: drei weiche, gedrehte Verläufe — im Ton des
   Tunnellichts, damit der dunkle Footer den Hero aufgreift statt
   neutral grau zu leuchten. */
.footer__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.footer__glow span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  rotate: -45deg;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(253, 226, 168, 0.075) 0%,
              rgba(253, 226, 168, 0.018) 80%,
              transparent 100%);
}

.footer__glow span:nth-child(1) { width: 560px; height: 1280px; translate: -30% -55%; }
.footer__glow span:nth-child(2) { width: 240px; height: 1280px; translate:  20% -50%; }
.footer__glow span:nth-child(3) { width: 240px; height: 1280px; translate: 120% -60%; }

.footer__top { position: relative; z-index: 1; }

.footer__grid {
  display: grid;
  grid-template-columns: 460px 360px 360px;
  gap: 0;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; max-width: 240px; }

.footer__link {
  padding: 8px 16px;
  border-radius: var(--r-chip);
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: var(--t-small);
  transition: background var(--d-ui) var(--ease-ui),
              box-shadow var(--d-ui) var(--ease-ui);
}

.footer__link:hover { background: #fff; box-shadow: var(--shadow-float); }

.footer__adresse {
  display: block;
  margin-top: 24px;
  font-size: var(--t-small);
  font-style: normal;
  line-height: 1.7;
  color: var(--fg-invert-muted);
}

.footer__adresse a {
  color: var(--fg-invert-muted);
  transition: color var(--d-color) linear;
}

.footer__adresse a:hover { color: var(--fg-invert); }

/* Wortmarke: füllt die Inhaltsspalte, steht vollständig im Bild.
   Deckel bei 357px, weil oberhalb 1450px der Viewport weiterwächst,
   die Inhaltsspalte aber bei 1180px stehenbleibt. */
.footer__wordmark {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: min(24.6vw, 357px);
  font-weight: var(--w-bold);
  line-height: 0.86;
  letter-spacing: -0.045em;
  /* Warm angehauchtes Creme statt neutralem — der Schriftzug steht in
     denselben Lichtschlieren wie der Rest des Footers. */
  color: rgba(253, 226, 168, 0.13);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Abschlusszeile, wie in der Vorlage durch eine Linie abgesetzt */
.footer__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: clamp(14px, 2.4svh, 26px);
  padding-top: 14px;
  border-top: 1px solid var(--line-invert);
  font-size: var(--t-small);
  color: var(--fg-invert-muted);
}

@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .footer__wordmark { font-size: 27vw; }
}

@media (max-width: 900px) {
  :root { --footer-h: 700px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}

/* Das Verfahren braucht eine feste Footerhöhe. Reicht der Platz auf
   sehr kleinen Geräten nicht, fällt es auf einen normalen Footer
   zurück — lieber unspektakulär als abgeschnitten. */
@media (max-width: 560px), (max-height: 620px) {
  .footer--sticky { height: auto; clip-path: none; }
  .footer--sticky .footer__fixed { position: static; height: auto; }
  .footer--sticky .footer__sticky { position: static; height: auto; overflow: visible; }
}