@import url("../fonts/fonts.css");

/* ============================================================
   Hagenbäumer Werbung — Designsystem
   Konzept: Papier & Druckfarbe. Ein Untergrund, eine Tinte,
   eine Sonderfarbe. Typografie trägt die Seite.
   ============================================================ */

:root {
  /* Farben */
  --paper: #f5f2ea;
  --paper-deep: #ebe6da;
  --ink: #17191a;
  --ink-soft: #3d4144;
  --muted: #6e6a62;

  /* --- Markengrün ---------------------------------------------------------
     --brand ist die Hausfarbe RGB(118,184,42). Sie ist hell und trägt auf dem
     Papierton KEINEN Text: Kontrast nur 2,17:1, die Norm verlangt 4,5:1
     (3:1 selbst für große Schrift). Auf der dunklen Tinte dagegen 7,27:1.
     Deshalb:
       --brand      Flächen, Linien, Punkte, Ränder + Text auf dunklem Grund
       --brand-ink  abgedunkelt, für Text auf Papier (5,06:1 / 4,55:1)
     Nie --brand für Text auf hellem Grund verwenden.

     --brand-ink wurde in OKLCH abgedunkelt, NICHT in HSB. In HSB abgedunkelt
     ergab sich #487317: rechnerisch derselbe Farbton, aber die Buntheit brach
     von 0,181 auf 0,128 ein — die Farbe blich zu Oliv aus. In OKLCH bleibt
     möglichst viel Buntheit erhalten (0,149; mehr gibt sRGB bei dieser
     Lichtheit nicht her). Wer das anpasst: bitte wieder in OKLCH rechnen. */
  --brand: #76b82a;
  --brand-ink: #377500;

  --spot: var(--brand-ink);
  --spot-bright: var(--brand);
  --line: rgba(23, 25, 26, 0.14);

  /* --- Typografie ---------------------------------------------------------
     Eine Familie für alles. Hierarchie entsteht über Schnitt und Größe.

     Markenschrift ist Myriad. Die darf laut Adobes Nutzungsbedingungen NICHT
     selbst gehostet werden — erlaubt ist nur Adobes eigener Einbettungscode,
     und der würde die IP jedes Besuchers an Adobe in die USA senden. Damit
     wären „keine Cookies, keine Dritten, kein Banner" hinfällig.
     Deshalb Source Sans 3: Adobes eigene quelloffene humanistische Grotesk
     aus derselben Formenfamilie, SIL Open Font License, lokal gespeichert.

     Bewusst OHNE "Myriad" im Stack: sonst sähe nur Tanja (Adobe installiert)
     das echte Myriad und alle Kunden etwas anderes — ohne dass es auffällt. */
  --display: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: var(--display);

  /* Maße */
  --page: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--spot);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 999;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- Kopfzeile ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.1rem;
}

/* Wortmarke — ersetzt das alte Puzzleteil */
.brand {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.7rem;
  line-height: 1;
}

.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  letter-spacing: -0.02em;
}

.brand__sub {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0; /* steht jetzt neben dem Namen, an der Grundlinie ausgerichtet */
}

.brand__dot {
  color: var(--brand);
}

/* Die zwei Trema-Punkte über dem „ä“ in der Hausfarbe.

   Warum so umständlich: „ä“ ist EINE Glyphe, Teilbereiche lassen sich nicht
   einfärben. Der naheliegende Trick — „a“ + kombinierendes Trema (U+0308) als
   eigenes Element — scheitert an Source Sans 3: Die Schrift setzt beides per
   ccmp-Funktion wieder zum fertigen „ä“ zusammen, und eine Glyphe kann nur eine
   Farbe haben.

   Deshalb dient die Schrift hier als Maske für einen Farbverlauf, der genau in
   der Lücke zwischen Punkten und a-Schale umschlägt. Der Wert ist NICHT
   gerechnet, sondern durch Abtasten der gerenderten Glyphe ermittelt:
     Punkte    143 bis 115 über der Grundlinie
     Lücke     115 bis 102   <- hier wird geschnitten
     a-Schale  102 bis  -1
   Mitte der Lücke = 108,5 über der Grundlinie = 33,86 % der Inline-Box von oben.
   In em gerechnet, gilt also für jede Schriftgröße.

   Bei Schriftwechsel neu abtasten — der Wert hängt an Source Sans 3.

   --umlaut-basis statt currentColor: currentColor würde durch das nötige
   color:transparent zu transparent aufgelöst — der Buchstabe verschwände. */
.brand__umlaut {
  --umlaut-basis: var(--ink);
  background-image: linear-gradient(
    to bottom,
    var(--brand) 0 33.86%,
    var(--umlaut-basis) 33.86% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Im Footer steht die Wortmarke auf dunklem Grund. */
.site-footer .brand__umlaut {
  --umlaut-basis: var(--paper);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* :not(.btn) — sonst überschreibt diese Regel die Textfarbe des Buttons */
.nav a:not(.btn) {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.2s;
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--spot);
  transition: width 0.25s ease;
}

.nav a:not(.btn):hover {
  color: var(--ink);
}
.nav a:not(.btn):hover::after {
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 100px;
  font-family: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, color 0.2s;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--spot);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}

/* Der Kreis wird am INHALT ausgerichtet, nicht am Fensterrand.
   Vorher hing er an .hero (volle Fensterbreite) und driftete auf breiten
   Bildschirmen immer weiter vom Text weg — bei 1600px ragte er 136px über
   den Inhaltsbereich hinaus. */
.hero .wrap {
  position: relative;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* Das Herz ersetzt den früheren Strich als Akzent und steht rechts vom Text.

   Breite/Höhe im Verhältnis der Herzform (17 : 15,93), sonst würde die eng
   gesetzte viewBox das Herz in eine quadratische Box einpassen und es säße
   wieder mit Luft darin statt bündig.

   translateY: align-items:center zentriert auf die Zeilenbox, nicht auf die
   Versalhöhe. Der Text ist reine Versalschrift ohne Unterlängen, deshalb sitzt
   das Herz ohne Korrektur rund 0,5px zu hoch. Der Wert ist AM GERENDERTEN
   Ergebnis gemessen (Herzmitte gegen Mitte der Versalhöhe), nicht gerechnet.
   Bei Änderung von Schriftgröße oder Zeilenhöhe bitte neu nachmessen. */
.hero__eyebrow .herz {
  height: 0.78em;
  width: 0.832em;
  color: var(--brand);
  flex-shrink: 0;
  transform: translateY(0.041em);
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  max-width: 16ch;
  margin-bottom: 1.75rem;
  /* Etwas lockerer als die globalen 1.06, damit das Farbband hinter
     „anfassen" Luft zur Zeile darüber hat. */
  line-height: 1.14;
}

/* Hausfarbe als Fläche statt als Schrift.
   Lindgrüner Text auf Papier ist unlesbar (2,17:1) und lässt sich nur durch
   Abdunkeln retten — dann ist es aber nicht mehr die Hausfarbe. Umgekehrt
   funktioniert es: dunkle Schrift AUF dem Lindgrün ergibt 7,27:1, und die
   Hausfarbe erscheint unverfälscht. */
.hero h1 em {
  font-style: italic;
  color: var(--ink);

  /* Kein flaechiges background: Die Hintergrundflaeche eines Inline-Elements
     folgt der Schriftmetrik (Oberlaenge 92 + Unterlaenge 36 = 128px bei 90px
     Schrift), nicht dem Wort. „anfassen" ist aber nur 65px hoch und hat fast
     keine Unterlaenge — die Haelfte des Blocks waere leeres Gruen.
     Stattdessen ein Farbband, das exakt auf die Buchstaben gelegt wird:
     0,9em hoch, 0,22em unter der Oberkante — je ~8px Luft ueber und unter
     dem Wort, symmetrisch. */
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-size: 100% 0.9em;
  background-position: 0 0.22em;
  padding-inline: 0.11em;
  margin-inline: -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  /* Beim Laden wächst das Grün von links nach rechts — wie Farbe, die aufs
     Papier kommt.

     WICHTIG: Der Grundzustand oben ist 100 %, die Animation startet per
     from-Wert bei 0 %. Mit fill-mode "backwards" gilt der 0-%-Zustand nur
     während der Verzögerung; danach fällt das Element auf den Grundzustand
     zurück. Läuft die Animation gar nicht (abgeschaltet, alter Browser),
     ist das Band trotzdem da. Andersherum — Grundzustand 0 % — wäre die
     Kernaussage im Fehlerfall unsichtbar. */
  animation: farbe-auftragen 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.25s backwards;
}

@keyframes farbe-auftragen {
  from { background-size: 0% 0.9em; }
  to   { background-size: 100% 0.9em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; }
}

.hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0 0 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ---------- Kreis-Siegel im Hero ----------
   Porträt in der Mitte, Text kreisförmig darum, langsam rotierend.
   Der Text sitzt per SVG <textPath> auf einem Kreis — reines CSS/SVG,
   keine Bibliothek und kein externer Aufruf. */

.hero {
  position: relative;
}

.siegel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(120px, 13vw, 168px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.siegel:hover {
  transform: scale(1.05);
}

.siegel__text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: siegel-dreht 22s linear infinite;
}

.siegel__text text {
  font-family: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--ink-soft);
}

/* Porträt rund, deutlich kleiner als der Kreis, damit der Text Luft hat */
.siegel__foto {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
}

/* Gegen den Uhrzeigersinn: negativer Winkel. */
@keyframes siegel-dreht {
  to { transform: rotate(-360deg); }
}

/* Wer Bewegung reduziert haben will, bekommt den Kreis still. */
@media (prefers-reduced-motion: reduce) {
  .siegel__text { animation: none; }
}

/* Kennzahlen */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.fact__num {
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.fact__label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ---------- Schnittmarken & Passerkreuz ----------
   Die Marken vom Druckbogen als leise Zierde. Bewusst in derselben Tinte und
   halb transparent: Sie sollen die Seite nach Druckerei riechen lassen, nicht
   um Aufmerksamkeit bitten. Auf dem Handy ausgeblendet — dort ist kein Platz
   für Marken außerhalb des Inhalts. */

.bogen {
  --strich: 1px;
  --laenge: 18px;
  --luecke: 7px;
  --rand: -26px;
  position: relative;
}

.marke {
  position: absolute;
  color: var(--ink-soft);
  opacity: 0.55;
}

.marke::before,
.marke::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.marke::before { width: var(--laenge); height: var(--strich); }
.marke::after  { width: var(--strich); height: var(--laenge); }

/* Die Striche berühren die Ecke NICHT — wie auf einem echten Bogen. */
.marke--ol { top: var(--rand); left: var(--rand); }
.marke--ol::before { right: calc(100% + var(--luecke)); top: 0; }
.marke--ol::after  { left: 0; bottom: calc(100% + var(--luecke)); }

.marke--or { top: var(--rand); right: var(--rand); }
.marke--or::before { left: calc(100% + var(--luecke)); top: 0; }
.marke--or::after  { right: 0; bottom: calc(100% + var(--luecke)); }

.marke--ul { bottom: var(--rand); left: var(--rand); }
.marke--ul::before { right: calc(100% + var(--luecke)); bottom: 0; }
.marke--ul::after  { left: 0; top: calc(100% + var(--luecke)); }

.marke--ur { bottom: var(--rand); right: var(--rand); }
.marke--ur::before { left: calc(100% + var(--luecke)); bottom: 0; }
.marke--ur::after  { right: 0; top: calc(100% + var(--luecke)); }

@media (max-width: 900px) {
  .marke { display: none; }
}

.passer-trenner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--ink-soft);
  opacity: 0.5;
}

.passer-trenner::before,
.passer-trenner::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.passer-trenner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---------- Laufband ----------
   Zeigt die Bandbreite, ohne eine Liste zu sein. Die Spur enthält die Wörter
   zweimal; bei -50% ist die zweite Gruppe genau dort, wo die erste startete —
   deshalb wirkt es endlos. Zeiger drauf hält es an. */

.laufband {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1rem;
  background: var(--paper);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband__spur {
  display: flex;
  width: max-content;
  animation: laufband 38s linear infinite;
}

.laufband:hover .laufband__spur {
  animation-play-state: paused;
}

.laufband__gruppe {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.laufband__stern {
  color: var(--brand);
  font-size: 0.8em;
}

@keyframes laufband {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
}

/* ---------- Abschnitte ---------- */

.section {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.section--dark {
  background: var(--ink);
  color: var(--paper);
}
.section--dark .section__label,
.section--dark .fact__label {
  color: rgba(245, 242, 234, 0.55);
}

.section--paper-deep {
  background: var(--paper-deep);
}

.section__head {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.section__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.section h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.section__intro {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

.section--dark .section__intro {
  color: rgba(245, 242, 234, 0.75);
}

/* ---------- Leistungen ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service {
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background 0.25s;
}

.service:hover {
  background: var(--paper-deep);
}

.service__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--spot);
  letter-spacing: 0.05em;
}

.service h3 {
  font-size: 1.35rem;
}

.service p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.service__list {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.service__list li {
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border-radius: 100px;
  padding: 0.28rem 0.7rem;
}

.service:hover .service__list li {
  background: var(--paper);
}

/* ---------- Portfolio ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.filter {
  background: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
  font-family: var(--text);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s;
}

.filter:hover {
  border-color: var(--ink);
}

.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: var(--radius);
}

.tile.is-hidden {
  display: none;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tile:hover img {
  transform: scale(1.04);
}

.tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(transparent, rgba(23, 25, 26, 0.8));
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.25s;
}

.tile:hover .tile__cap,
.tile:focus-within .tile__cap {
  opacity: 1;
}

/* Logos sind transparente PNGs und meist quer. Sie dürfen nicht wie Fotos
   beschnitten werden (object-fit: cover) — sonst fehlt der halbe Schriftzug.
   Weißer Grund, weil Logos dafür gezeichnet sind. */
.tile--logo {
  background: #fff;
}

.tile--logo img {
  object-fit: contain;
  padding: 14%;
}

.tile--logo:hover img {
  transform: scale(1.03);
}

/* Bildunterschrift bei Logos dauerhaft lesbar halten statt Verlauf über Weiß */
.tile--logo .tile__cap {
  background: linear-gradient(transparent, rgba(23, 25, 26, 0.75));
}

/* Platzhalter, solange keine echten Bilder eingesetzt sind */
.tile--placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  border-style: dashed;
}

/* ---------- Über ---------- */

/* Porträtspalte bewusst schmal: eine feste, kleine Breite statt eines
   Spaltenanteils. Als 5fr von 11 war das Foto ~545px breit und 680px hoch —
   viel zu dominant für ein Porträt. */
/* Ohne Porträt: einspaltiger Textblock, Zeilenlänge auf Lesebreite begrenzt. */
.about {
  max-width: 62ch;
}

.about__portrait {
  aspect-ratio: 4 / 5;
  max-width: 260px;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Das Foto ist 560x830 (Verhältnis 0,674), der Rahmen 4:5 (0,800) — es wird
   oben und unten beschnitten. object-position schiebt den Ausschnitt nach oben,
   sonst schneidet die Mittelstellung Haaransatz ab und zeigt dafür mehr Kleid.
   25% setzt die Augen etwa auf die obere Drittellinie. */
.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.about h2 {
  margin-bottom: 1.25rem;
}

.about p {
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.about blockquote {
  margin: 2rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--brand);
  font-family: var(--display);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Kartiges (Schwestermarke) ---------- */

/* Reihenfolge im HTML: Text, dann Logo — also Text links, Logo rechts.
   Gespiegelt zum Abschnitt „Über mich" darüber (Bild links, Text rechts).
   Auf dem Handy fällt das Raster auf eine Spalte, dann steht der Text oben. */
.sister {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

/* Weiße Karte. Das Kartiges-Logo hat KEINE Transparenz (geprüft: hasAlpha no),
   sein Weiß ist reines rgb(255,255,255) bis in die Ecken. Deshalb ist der
   Kartengrund exakt #fff — so verschmelzen Bild und Karte zu einer Fläche und
   es gibt keine sichtbare Kante zwischen beiden.
   Kein gestrichelter Rahmen (das war der Platzhalter-Stil) und kein festes
   4:3-Format: Die Karte folgt dem Seitenverhältnis des Logos (800:305). */
.sister__media {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(1.75rem, 6%, 3.25rem);
  display: grid;
  place-items: center;
}

.sister__media img {
  width: 100%;
  height: auto;
}

.sister h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 0.35rem;
}

.sister__claim {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 1.5rem;
}

.sister p {
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.sister__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 1.75rem 0 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.sister__facts .fact__num {
  font-size: 1.85rem;
}

/* ---------- Ablauf ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}

.step {
  padding-top: 1.5rem;
  border-top: 2px solid var(--spot-bright);
}

.step__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--spot-bright);
  margin-bottom: 0.75rem;
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.step p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(245, 242, 234, 0.7);
  line-height: 1.6;
}

/* ---------- Kontakt ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}

.contact__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact__list dt,
.contact__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.contact__value {
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

a.contact__value:hover {
  color: var(--spot);
  border-bottom-color: var(--spot);
}

.hours {
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-size: 0.95rem;
}

.hours h3 {
  font-size: 1rem;
  font-family: var(--text);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.35rem;
  color: var(--ink-soft);
}

.hours__note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* Formular */
.form {
  display: grid;
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  font-family: var(--text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--spot);
  box-shadow: 0 0 0 3px rgba(118, 184, 42, 0.28);
}

.field textarea {
  resize: vertical;
  min-height: 130px;
}

.field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.consent input {
  margin-top: 0.2rem;
  accent-color: var(--spot);
  flex-shrink: 0;
}

.hp {
  position: absolute;
  left: -9999px;
}

.form__note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

/* ---------- Fußzeile ---------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(245, 242, 234, 0.15);
}

.site-footer .brand__sub {
  color: rgba(245, 242, 234, 0.5);
}

.footer__blurb {
  color: rgba(245, 242, 234, 0.65);
  font-size: 0.92rem;
  max-width: 34ch;
  margin: 1.25rem 0 0;
}

.footer h4 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, 0.5);
  margin: 0 0 1rem;
  font-weight: 500;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer a {
  color: rgba(245, 242, 234, 0.8);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--spot-bright);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: 0.82rem;
  color: rgba(245, 242, 234, 0.5);
}

/* ---------- Rechtstexte ---------- */

.legal {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.legal__body {
  max-width: 72ch;
}

.legal h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 0.85rem;
}

.legal h3 {
  font-size: 1.05rem;
  font-family: var(--text);
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}

.legal p,
.legal li {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.legal address {
  font-style: normal;
  line-height: 1.8;
}

.legal a {
  color: var(--spot);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 2rem;
}

.legal__back:hover {
  color: var(--spot);
}

/* ---------- Einblenden beim Scrollen ---------- */

/* Nur wenn JavaScript läuft, wird überhaupt ausgeblendet. Sonst wäre bei
   fehlerhaftem oder blockiertem Skript der halbe Seiteninhalt unsichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Mobil — der Punkt, an dem die alte Seite komplett versagt hat
   ============================================================ */

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  /* backdrop-filter erzeugt einen Containing Block — das eingeblendete
     Menü (position: fixed) wäre sonst im Header gefangen statt bildschirmfüllend. */
  .site-header {
    backdrop-filter: none;
    background: var(--paper);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    padding: var(--gutter);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
  }

  .nav.is-open {
    transform: none;
  }

  .nav a:not(.btn) {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--ink);
  }

  .nav .btn {
    margin-top: 0.5rem;
    font-size: 1rem;
  }

  .nav-toggle {
    position: relative;
    z-index: 300;
  }

  .field--row {
    grid-template-columns: 1fr;
  }

  .facts {
    gap: 2rem 3rem;
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .gallery {
    grid-template-columns: 1fr;
  }
}

/* ---------- Druck ---------- */

@media print {
  .site-header,
  .nav-toggle,
  .hero__actions,
  .form {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ---------- Consent-Banner ----------
   Beide Knöpfe bewusst GLEICH gestaltet: „Ablehnen" muss so leicht sein
   wie „Annehmen" (kein Dark Pattern) — sonst ist der Banner nicht rechtskonform. */

.cookiebanner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookiebanner.is-visible {
  transform: none;
}

.cookiebanner__inner {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
  padding-block: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
}

.cookiebanner__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(245, 242, 234, 0.86);
  flex: 1 1 320px;
}

.cookiebanner__text a {
  color: var(--brand);
  text-decoration: underline;
}

.cookiebanner__buttons {
  display: flex;
  gap: 0.7rem;
  flex-shrink: 0;
}

.cookiebanner__btn {
  font-family: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  min-width: 132px; /* beide Knöpfe exakt gleich breit — „Ablehnen“ so leicht wie „Annehmen“ */
  border-radius: 100px;
  border: 1px solid rgba(245, 242, 234, 0.4);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cookiebanner__btn:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

@media (max-width: 560px) {
  .cookiebanner__buttons { width: 100%; }
  .cookiebanner__btn { flex: 1; }
}