/* ==========================================================================
   INVORA IMMOBILIEN AG

   Konzept: "Das Verzeichnis" — die Website ist das Registerbuch der Firma.
   Jede Akquisition ist ein Eintrag; das Verzeichnis selbst ist das Argument.

   Zwei Schriften: Cormorant Garamond (Display) · Jost (Text).
   Eine Akzentfarbe: Oliv, aus dem bestehenden Signet — höchstens zweimal
   pro Seite eingesetzt, Fokusringe ausgenommen.

   Alle Werte stammen aus den Tokens weiter unten. Keine Einzelfallgrössen.
   ========================================================================== */

/* --- Schriften (selbst gehostet, keine Drittanbieter-Requests) ------------ */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300;
  src: url('assets/fonts/cormorantgaramond-300.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  src: url('assets/fonts/cormorantgaramond-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300;
  src: url('assets/fonts/cormorantgaramond-300-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 300;
  src: url('assets/fonts/jost-300.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400;
  src: url('assets/fonts/jost-400.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500;
  src: url('assets/fonts/jost-500.woff2') format('woff2'); font-display: swap;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  /* --- Schriftfamilien --------------------------------------------------- */
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --text:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Schriftgrade · modulare Skala, Verhältnis ~1.25 ------------------- */
  --t-2xs:  0.6875rem;  /* 11px — Bildunterschriften              */
  --t-xs:   0.75rem;    /* 12px — Eyebrows, Registerlabels        */
  --t-sm:   0.875rem;   /* 14px — Meta, Hinweise                  */
  --t-base: 1.0625rem;  /* 17px — Fliesstext                      */
  --t-md:   1.25rem;    /* 20px — grosser Fliesstext, dt          */
  --t-lg:   1.5rem;     /* 24px                                   */
  --t-xl:   2rem;       /* 32px                                   */
  --t-2xl:  2.5rem;     /* 40px                                   */
  --t-3xl:  3.25rem;    /* 52px                                   */
  --t-4xl:  4rem;       /* 64px                                   */

  /* Fliessende Grade interpolieren ausschliesslich zwischen Skalenstufen */
  --t-h1:   clamp(var(--t-2xl), 4.6vw, var(--t-4xl));
  --t-h2:   clamp(var(--t-xl),  3.2vw, var(--t-3xl));
  --t-h3:   clamp(var(--t-lg),  1.8vw, var(--t-xl));
  --t-lede: clamp(var(--t-md),  2.1vw, var(--t-lg));
  --t-year: clamp(var(--t-2xl), 4.4vw, var(--t-3xl));

  /* --- Typografische Konstanten ------------------------------------------ */
  --lh-display: 1.05;
  --lh-body:    1.6;
  --tr-display: -0.025em;   /* -0.02 … -0.03em */
  --tr-eyebrow:  0.14em;    /*  0.12 … 0.18em  */
  --measure:    65ch;

  /* --- Raster · 8px, mit einem 4px-Halbschritt --------------------------- */
  --sp-h: 0.25rem;  /*   4 */
  --sp-1: 0.5rem;   /*   8 */
  --sp-2: 1rem;     /*  16 */
  --sp-3: 1.5rem;   /*  24 */
  --sp-4: 2rem;     /*  32 */
  --sp-5: 3rem;     /*  48 */
  --sp-6: 4rem;     /*  64 */
  --sp-7: 6rem;     /*  96 */
  --sp-8: 8rem;     /* 128 */

  --section-y: clamp(var(--sp-6), 9vw, var(--sp-8));
  --gutter:    clamp(var(--sp-3), 5vw, var(--sp-7));
  --max:       75rem;                 /* 1200px */
  /* Linke Satzkante — identisch in .wrap und im vollbreiten Auftakt */
  --edge:      max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  --rail:      9.5rem;                /* Registerspalte links */

  /* --- Farbe · Tiefschwarz, Offweiss, zwei warme Neutraltöne, ein Akzent -- */
  --paper:    #f6f2ea;   /* Grundfläche — bewusst kein reines Weiss  */
  --paper-2:  #efe9dd;   /* abgesetzte Abschnitte                    */
  --sand:     #e5dcca;   /* Bildgrund vor dem Laden                  */
  --rule:     #ddd2bd;   /* Haarlinie                                */
  --ink:      #17150f;   /* Überschriften        15.8:1              */
  --ink-2:    #4a463c;   /* Fliesstext            8.4:1              */
  --ink-3:    #6b6252;   /* Meta, Labels          5.4:1              */
  --accent:   #556434;   /* Akzent, textsicher    5.8:1              */
  --accent-hi:#677741;   /* Markenoliv, nur Hover                    */
  --error:    #8c3a2b;

  /* --- Bewegung · knappes Budget ----------------------------------------- */
  --dur-fast: 180ms;                       /* Hover, Fokus  150–200ms */
  --dur-rise: 520ms;                       /* Einblenden    450–600ms */
  --dur-img:  600ms;                       /* Bildskalierung, langsam */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --rise-y:   12px;
  --stagger:  60ms;   /* script.js spiegelt diesen Wert beim Staffeln */
}

/* ==========================================================================
   GRUNDLAGEN
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-7);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

::selection { background: color-mix(in oklab, var(--accent) 20%, transparent); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  border-radius: 2px;
}

.skip {
  position: absolute; left: var(--sp-2); top: calc(-1 * var(--sp-6)); z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: var(--sp-1) var(--sp-3); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: var(--sp-2); }

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;          /* keine Schusterjungen in Überschriften */
  hyphens: manual;             /* nur an gesetzten ­-Stellen trennen */
}
h1 { font-size: var(--t-h1); text-wrap: pretty; overflow-wrap: break-word; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }

p  { max-width: var(--measure); }

/* Gesetzte Zeilenumbrüche in der Hauptzeile — nur wo Platz dafür ist.
   Darunter bricht der Satz von selbst um. */
.br-lg { display: none; }
@media (min-width: 60rem) { .br-lg { display: inline; } }
a  { color: inherit; }
em { font-style: italic; }

/* Eyebrow — die einzige Kleinschrift-Auszeichnung der Seite */
.eyebrow {
  font-family: var(--text);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: lining-nums tabular-nums;
}

.lede {
  font-family: var(--display);
  font-size: var(--t-lede);
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 32ch;
}

.text-soft { color: var(--ink-2); }
.note      { font-size: var(--t-sm); color: var(--ink-3); max-width: 46ch; }
.nowrap    { white-space: nowrap; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section        { padding-block: var(--section-y); }
.section--warm  { background: var(--paper-2); }
.section--tight { padding-block: clamp(var(--sp-5), 7vw, var(--sp-7)); }

.rule { border: 0; border-top: 1px solid var(--rule); }

.section-head {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(var(--sp-4), 5vw, var(--sp-6));
}
.section-head h2 { flex: 1 1 auto; }

/* Zweispaltiger Block — Aussage links, Handlung rechts */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(var(--sp-4), 6vw, var(--sp-7));
  align-items: start;
}
.split__aside > * + * { margin-top: var(--sp-2); }

/* ==========================================================================
   KOPFZEILE
   ========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.site-head.is-stuck { border-bottom-color: var(--rule); }

.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* Die Wortmarke ohne Monogramm. Über die Höhe gesetzt, aber niedriger als
   die frühere Bildmarke: dort bestimmte das Signet die Höhe und der Schriftzug
   sass klein daneben. Ohne Signet steht hier nur noch Schrift, dieselbe Höhe
   würde die Buchstaben um die Hälfte vergrössern. Die Werte unten lassen
   INVORA rund ein Zehntel grösser erscheinen als zuvor — die Marke trägt den
   Kopf jetzt allein, soll ihn aber nicht erdrücken. */
.brand__logo {
  display: block;
  height: clamp(1.35rem, 2.2vw, 1.7rem);
  width: auto;
}

.nav { display: flex; align-items: center; gap: clamp(var(--sp-2), 2.4vw, var(--sp-4)); }
.nav a {
  position: relative;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-3);
  padding-block: var(--sp-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: var(--sp-h);
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   AUFTAKT
   Satzspiegel links, Bild an die rechte Kante gesetzt.
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(38vw, 32rem);
  align-items: center;
  gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  padding-block: clamp(var(--sp-5), 6vw, var(--sp-7));
}
.hero__type { padding-left: var(--edge); padding-right: var(--sp-2); }
.hero__kicker { margin-bottom: var(--sp-3); }
.hero h1 { margin-bottom: var(--sp-3); }

/* Die Hauptzeile ist ein ganzer Satz, keine Schlagzeile: eine Stufe unter
   --t-h1, damit sie im Satzspiegel nicht zur Wand wird. */
.hero__claim {
  font-size: var(--t-h2);
  max-width: 20ch;
}
.hero__lede {
  font-size: var(--t-base);
  color: var(--ink-2);
  max-width: 42ch;
  margin-bottom: 0;      /* schliesst den Auftakt ab — nichts folgt darunter */
}

/* Unterseiten: gleiche Satzkante, ohne Bild */
.hero--sub {
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(var(--sp-5), 6vw, var(--sp-7)) var(--sp-4);
}
.hero--sub .hero__type { padding-right: var(--edge); }
.hero--sub h1 { margin-bottom: var(--sp-3); }

/* ==========================================================================
   REGISTEREINTRAG — das Kernmuster
   ========================================================================== */
.entries { border-top: 1px solid var(--rule); }

.entry {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding-block: clamp(var(--sp-3), 4vw, var(--sp-5));
  border-bottom: 1px solid var(--rule);
}
.entry__n { color: var(--ink-3); }
.entry h3 { margin-bottom: var(--sp-1); }
.entry p  { color: var(--ink-2); }

/* --- Ankaufsprofil -------------------------------------------------------- */
/* Gleiche Sprache wie .entry: Label in der linken Schiene, Inhalt rechts,
   Haarlinie als Zeilentrenner. Als <dl> ausgezeichnet, weil es genau das ist —
   Kriterium und Ausprägung. Die Zeilen liegen in <div>, damit dt/dd zusammen
   ein Rasterelement bilden dürfen. */
.profil {
  margin-top: clamp(var(--sp-5), 6vw, var(--sp-6));
  border-top: 1px solid var(--rule);
}
.profil__row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding-block: clamp(var(--sp-3), 4vw, var(--sp-4));
  border-bottom: 1px solid var(--rule);
}
.profil__row dt { color: var(--ink-3); }
.profil__row dd { margin: 0; }

.profil__list {
  list-style: none; padding: 0;
  display: grid; gap: var(--sp-1);
  color: var(--ink-2);
  max-width: var(--measure);
}
/* Der Aufzählungspunkt sitzt in der Marge, damit die Satzkante steht. */
.profil__list li { position: relative; padding-left: var(--sp-3); }
.profil__list li::before {
  content: '·';
  position: absolute; left: var(--sp-1); top: 0;
  color: var(--ink-3);
}
/* Kurze, gleichrangige Angaben nebeneinander statt untereinander. Flex statt
   Raster, damit die Reihe auf schmalen Schirmen von selbst umbricht. */
.profil__list--inline {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}
.profil__intro { margin-top: var(--sp-2); max-width: 46ch; }

/* --- Verzeichnis ---------------------------------------------------------- */
.ledger { border-top: 1px solid var(--rule); }

.year {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding-block: var(--sp-4) var(--sp-1);
}
.year__n {
  font-family: var(--display); font-weight: 300;
  font-size: var(--t-year); line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--ink-3);
  font-variant-numeric: lining-nums;
}

.akq {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  padding-block: clamp(var(--sp-4), 4vw, var(--sp-5));
  border-top: 1px solid var(--rule);
}
.ledger-more  { margin-top: var(--sp-4); }
.cta-lede     { margin-block: var(--sp-3); }

.akq__rail { display: flex; flex-direction: column; gap: var(--sp-h); }
.akq h3    { margin-bottom: var(--sp-1); }
.akq p     { color: var(--ink-2); max-width: 46ch; }

.facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-h) var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--rule);
}
.facts div { display: flex; align-items: baseline; gap: var(--sp-1); }
.facts dd  { font-size: var(--t-sm); color: var(--ink-2); }

/* ==========================================================================
   ARCHIVTAFEL
   Ein Seitenverhältnis für alle Bilder; der Ausschnitt wird je Motiv
   gesetzt (siehe "Bildausschnitte"). Die Tafeln liegen entsättigt im
   Papier und kehren bei Zuwendung in die Farbe zurück.
   ========================================================================== */
.plates { display: grid; gap: var(--sp-1); }

.plate {
  position: relative; display: block;
  aspect-ratio: 3 / 2;
  background: var(--sand);
  overflow: hidden;
  border: 1px solid var(--rule);
}
/* <picture> ist inline und ohne eigene Höhe — ohne diese Zeile greift
   height:100% am Bild ins Leere und die Tafel zeigt unten den Papierrand. */
.plate picture { display: block; width: 100%; height: 100%; }
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: saturate(.58) contrast(1.05) sepia(.16);
  transform: scale(1.001);
  transition: filter var(--dur-img) var(--ease-out),
              transform var(--dur-img) var(--ease-out);
}
.plate:hover img,
.plate:focus-visible img {
  filter: saturate(1) contrast(1) sepia(0);
  transform: scale(1.03);        /* Obergrenze laut Vorgabe */
}
.plate__cap {
  display: flex; justify-content: space-between; gap: var(--sp-1);
  align-items: baseline;
  margin-top: var(--sp-h);
  font-size: var(--t-2xs);
  color: var(--ink-3);
}
/* Ohne Hover bleiben die Tafeln nicht dauerhaft entfärbt */
@media (hover: none) {
  .plate img { filter: saturate(.88) contrast(1.02) sepia(.05); }
}

/* --- Bildausschnitte · Art Direction je Motiv ----------------------------- */
/* Die Vorlagen haben Seitenverhältnisse von 1.06 bis 2.06. Damit alle
   Tafeln im selben 3:2 sitzen, wird der Bildmittelpunkt einzeln gesetzt. */
.f-auftakt     { --focus: 50% 50%; }  /* Vorlage schon 3:2 — kein Schnitt */
.f-wipkingen   { --focus: 50% 32%; }  /* Dachlandschaft halten          */
.f-oerlikon    { --focus: 50% 45%; }  /* Fassade statt Vordergrundbaum  */
.f-hottingen   { --focus: 50% 38%; }  /* Autos am unteren Rand kürzen   */
.f-horgen      { --focus: 50% 45%; }
.f-kuesnacht   { --focus: 55% 50%; }  /* Blick Richtung See             */
.f-goldkueste  { --focus: 50% 48%; }  /* Parzellenumriss zentriert      */

/* ==========================================================================
   SCHALTFLÄCHEN UND LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  min-height: 3rem; padding: var(--sp-1) var(--sp-4);
  background: var(--accent); color: var(--paper);   /* Akzent 2 von 2 */
  font-size: var(--t-base); letter-spacing: 0.015em;
  text-decoration: none; border: 1px solid var(--accent); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  text-decoration: none; color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: left 100%;
  transition: background-size var(--dur-fast) var(--ease-out);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link:hover .link__arrow { transform: translateX(var(--sp-h)); }

/* Link im Fliesstext */
.link-inline {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link-inline:hover, .link-inline:focus-visible { text-decoration-color: var(--ink); }

/* ==========================================================================
   FORMULAR
   ========================================================================== */
.form { display: grid; gap: var(--sp-3); max-width: 34rem; }
.field { display: grid; gap: var(--sp-h); }
.field label { font-size: var(--t-sm); color: var(--ink-2); }
.field .req  { color: var(--ink-3); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  min-height: 3rem;
  font-size: var(--t-base);          /* ≥16px: kein Zoom auf iOS */
  background: color-mix(in oklab, var(--paper) 55%, #fff);
  border: 1px solid var(--ink-3);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.field select { appearance: auto; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); background: #fff;
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea,
.field[data-invalid='true'] select { border-color: var(--error); }
.field__err { font-size: var(--t-sm); color: var(--error); }
.field__err:empty { display: none; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form__actions > * + * { margin-top: var(--sp-1); }
.form__status { font-size: var(--t-sm); }
.form__status[data-state='ok']  { color: var(--accent); }
.form__status[data-state='err'] { color: var(--error); }

/* Honigtopf — für Menschen unsichtbar, für Bots verlockend */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   ADRESSE UND FUSSZEILE
   ========================================================================== */
.addr { font-style: normal; color: var(--ink-2); }
.addr strong { font-weight: 500; color: var(--ink); }

.site-foot {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding-block: clamp(var(--sp-5), 7vw, var(--sp-7)) var(--sp-4);
}
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 5vw, var(--sp-6));
}
.foot-grid h4 {
  font-family: var(--text); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--sp-2);
}
.foot-list { list-style: none; padding: 0; display: grid; gap: var(--sp-h); }
.foot-list a {
  text-decoration: none; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.foot-list a:hover, .foot-list a:focus-visible { color: var(--ink); }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1);
  margin-top: clamp(var(--sp-5), 6vw, var(--sp-6));
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   FLIESSTEXTSEITEN (Impressum, Datenschutz, 404)
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-xl); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose h3 { font-size: var(--t-md); margin-top: var(--sp-4); margin-bottom: var(--sp-1); }
.prose p, .prose li { color: var(--ink-2); max-width: none; }
.prose p + p { margin-top: var(--sp-2); }
.prose ul { margin: var(--sp-2) 0; padding-left: var(--sp-3); display: grid; gap: var(--sp-h); }
.prose > *:first-child { margin-top: 0; }
.prose a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.prose a:hover, .prose a:focus-visible { text-decoration-color: var(--ink); }
.prose-foot { margin-top: var(--sp-5); }
.todo {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  padding: 0.05em 0.35em; border-bottom: 1px dashed var(--accent);
}

/* 404 */
.error-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ==========================================================================
   BEWEGUNG
   Einblenden: Deckkraft + 12px, einmalig, 60ms Versatz zwischen Geschwistern.
   Nichts hiervon verzögert Lesen oder Klicken — der Inhalt steht sofort.
   ========================================================================== */
.rise { opacity: 0; transform: translateY(var(--rise-y)); }
.js .rise {
  transition: opacity var(--dur-rise) var(--ease-out),
              transform var(--dur-rise) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.rise.is-in { opacity: 1; transform: none; }
html:not(.js) .rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .plate img { transform: none; }
  .plate:hover img { transform: none; }
}

/* ==========================================================================
   BREITENSTUFEN
   ========================================================================== */

/* Bild unter den Satz — ab hier wird die Nebenstellung zu eng */
@media (max-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: clamp(var(--sp-4), 6vw, var(--sp-6)) 0;
  }
  .hero__type { padding-right: var(--edge); }
  /* randlos über die volle Breite — bewusst anders gesetzt als am Desktop */
  .hero__figure .plate { aspect-ratio: 4 / 3; border-inline: 0; }
}

@media (max-width: 62rem) {
  :root { --rail: 6.5rem; }
  .akq { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .akq__media { grid-column: 2; max-width: 28rem; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  :root { --rail: auto; }

  .entry, .akq, .profil__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .entry__rail, .entry__body,
  .akq__rail, .akq__body, .akq__media { grid-column: 1; }
  .akq__rail { flex-direction: row; gap: var(--sp-2); align-items: baseline; }
  .akq__media { max-width: none; margin-top: var(--sp-1); }

  /* Hochformatigerer Ausschnitt: das Motiv trägt auf kleinen Schirmen mehr */
  .plate { aspect-ratio: 4 / 3; }

  .form__row { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: var(--sp-2); }
}

/* ==========================================================================
   DRUCK
   ========================================================================== */
@media print {
  .site-head, .btn, .skip { display: none; }
  body { background: #fff; color: #000; }
  .plate img { filter: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
}