/* =============================================================================
   Riverside Properties — gesamtes CSS in einer Datei, feste Reihenfolge:

     Schriften → Variablen → Reset → Layout → Bausteine → Abschnitte →
     Formular → Fuß → Utilities → Media Queries → Druck

   Diese Reihenfolge einhalten. Eine 1000-Zeilen-Datei ohne verlässliche
   Gliederung wird nach dem dritten Kundenwunsch unlesbar, und dann schreibt
   jemand dieselbe Regel ein zweites Mal weiter unten.

   Farben, Abstände und Schriftgrößen NUR über die Variablen unten. Ein
   hartkodierter Hex-Wert mitten in einer Regel wird beim Branding-Wechsel
   übersehen — genau das ist beim Wechsel von Orange auf Gelb der Prüfstein
   gewesen, und er ging auf, weil alles in :root stand.
   ============================================================================= */

/* ── Schriften ────────────────────────────────────────────────────────────── */
/* Lokal einbinden, nicht vom Google-CDN: sonst geht bei jedem Seitenaufruf die
   IP des Besuchers an Google — in der EU ohne Einwilligung angreifbar. Lokal
   ist außerdem schneller (ein Request weniger, keine fremde Verbindung).

   Die Dev-Seite setzt durchgehend Figtree (Elementor: primary, secondary,
   text und accent alle auf Figtree) und Josefin Sans nur für die kleinen
   Auszeichnungszeilen. Sie lädt zusätzlich Inter und Sora, benutzt beide
   aber nicht — die bleiben weg. */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("/fonts/josefin-sans.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

/* ── Variablen ────────────────────────────────────────────────────────────── */
/* Farben aus dev.riverside-properties.lu. Nicht aus dem Screenshot gepipettet
   und auch nicht aus der Elementor-Palette abgeschrieben — die nennt in
   post-17.css nur #000000, benutzt aber tatsaechlich Gruen. Ermittelt wurde es
   durch Auszaehlen der gerenderten Seite: #142611 taucht in den Ueberschriften
   auf, #7A7C34 in den kleinen Auszeichnungen.

   Das Orange #FFA600 der alten Framer-Seite ist ersatzlos entfallen.

   Gelb #E8F243 bleibt den Bedienelementen und Rahmen vorbehalten. Als
   Textfarbe waere es auf Weiss unlesbar. */
:root {
  --primaer: #142611;         /* Dunkelgruen — Ueberschriften, Fuss */
  --sekundaer: #7a7c34;       /* Oliv — Auszeichnungen, "Ab", Ortsangaben */
  --akzent: #e8f243;          /* Limettengelb — Knoepfe, Rahmen, Punkte */
  --text: #2f2f2f;
  --text-leise: #737373;
  --flaeche: #ffffff;
  --flaeche-hell: #f4f6f6;
  --flaeche-dunkel: #142611;
  --linie: #e0e6e5;
  --schleier: rgb(20 38 17 / 0.5);

  /* Schrift */
  --schrift: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-auszeichnung: "Josefin Sans", var(--schrift);
  --schrift-titel: var(--schrift);
  --gr-klein: 0.875rem;
  --gr-text: 1rem;
  --gr-fuehrung: 1.125rem;
  --gr-h3: 1.375rem;
  --gr-h2: clamp(1.75rem, 4vw, 2.75rem);
  --gr-h1: clamp(2.5rem, 6vw, 4.5rem);

  /* Abstände */
  --a-1: 0.5rem;
  --a-2: 1rem;
  --a-3: 1.5rem;
  --a-4: 2rem;
  --a-5: 3rem;
  --a-6: 5rem;

  /* Maße */
  --huelle: 1200px;
  --huelle-schmal: 760px;
  --radius: 6px;
  --radius-gross: 24px;   /* Bildkarten auf der Dev-Seite sind stark gerundet */
  --radius-pill: 999px;
  --kopf-hoehe: 76px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-hoehe); }

/* Wer Bewegung abgeschaltet hat, meint auch das Scrollen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--gr-text);
  line-height: 1.6;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--schrift-titel); line-height: 1.1; margin: 0 0 var(--a-3); color: var(--primaer); letter-spacing: -0.02em; }
h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }
p { margin: 0 0 var(--a-2); }

a { color: inherit; }
img, iframe, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

/* Ohne sichtbaren Fokus ist die Seite mit der Tastatur unbedienbar.
   :focus-visible statt :focus — sonst sieht auch der Mausklick den Ring. */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.huelle { width: min(100% - 2 * var(--a-3), var(--huelle)); margin-inline: auto; }
.huelle--schmal { max-width: var(--huelle-schmal); }

.skip {
  position: absolute; left: -9999px;
  background: var(--primaer); color: #fff; padding: var(--a-2) var(--a-3); z-index: 100;
}
.skip:focus { left: var(--a-2); top: var(--a-2); }

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--flaeche);
  transition: box-shadow 0.2s;
}
.kopf.ist-gescrollt { box-shadow: 0 1px 12px rgb(0 0 0 / 0.08); }

.kopf__reihe { display: flex; align-items: center; justify-content: space-between; min-height: var(--kopf-hoehe); gap: var(--a-3); }

.marke { display: flex; align-items: center; text-decoration: none; }
.marke img { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--a-4); }
.nav__punkte { display: flex; gap: var(--a-4); }
.nav a { text-decoration: none; font-size: var(--gr-klein); letter-spacing: 0.02em; }
/* Kein Gelb als Textfarbe: #E8F243 auf Weiss ist unlesbar. Der Akzent kommt
   hier als Unterstreichung, die Farbe bleibt. */
.nav a:hover { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 3px; text-underline-offset: 6px; }

.burger { display: none; background: none; border: 0; padding: var(--a-1); cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--primaer); margin: 5px 0; }

.sprachen { position: relative; }
.sprachen summary { cursor: pointer; list-style: none; font-size: var(--gr-klein); }
.sprachen summary::-webkit-details-marker { display: none; }
.sprachen__liste {
  position: absolute; right: 0; top: 100%;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  display: grid; min-width: 72px;
}
.sprachen__liste a { padding: var(--a-1) var(--a-2); }
.sprachen__liste a[aria-current="true"] { font-weight: 700; }

/* ── Bausteine ────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: var(--a-1);
  background: var(--akzent); color: var(--primaer);
  padding: 0.85rem 1.75rem; border: 0; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf:hover { filter: brightness(0.94); }
.knopf:disabled { opacity: 0.5; cursor: progress; }
.knopf--klein { padding: 0.5rem 1rem; font-size: var(--gr-klein); }
.knopf--geist { background: transparent; border: 1px solid currentColor; color: inherit; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--a-2); }

.augenbraue {
  font-family: var(--schrift-auszeichnung);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: var(--gr-klein); font-weight: 600;
  color: var(--text-leise);
  border-left: 3px solid var(--akzent); padding-left: var(--a-2);
  margin: 0 0 var(--a-2);
}
.fuehrung { font-size: var(--gr-fuehrung); color: var(--text-leise); }
.ikone { width: 20px; height: 20px; flex: none; }
.ikone--zurueck { rotate: 180deg; }

/* Zweizeilige Überschrift („Das Morgen / Gestalten", „Lebensraum, / der
   bleibt."). Die zweite Zeile ist zurückgenommen statt eingefärbt: Gelb wäre
   auf Weiß unlesbar, und ein Gelb in Überschriften ist kein Akzent mehr,
   sondern ein zweiter Grundton. */
.titel { display: grid; font-weight: 800; letter-spacing: -0.02em; }
.titel__akzent { color: inherit; opacity: 0.5; }
/* Kundenwunsch 2026-08-07: „Das Morgen gestalten" in einer Zeile statt
   gestapelt. Das Leerzeichen zwischen den spans steht im Markup.
   „gestalten" dort in Weiß statt der 50%-Abstufung — auf dem dunklen
   Hintergrundbild war das Grau schlecht lesbar. */
.titel--einzeilig { display: block; }
.titel--einzeilig span { display: inline; }
.titel--einzeilig .titel__akzent { opacity: 1; }


/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.abschnitt { padding-block: var(--a-6); }
.abschnitt--hell { background: var(--flaeche-hell); }
.abschnitt--dunkel { color: var(--flaeche-hell); }
.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--flaeche-hell); }
.abschnitt--dunkel .fuehrung { color: rgb(244 246 246 / 0.8); }
.abschnitt--dunkel .augenbraue { color: rgb(244 246 246 / 0.7); }

/* Abschnitt mit Hintergrundbild. Das Bild kommt über die Variable --bild aus
   dem Generator, weil es je Abschnitt ein anderes ist und aus daten/inhalt.json
   stammt — im Stylesheet stünde es hartkodiert und wäre beim Bildwechsel
   vergessen. Der Schleier ist nicht Deko: ohne ihn steht heller Text auf einem
   hellen Foto. */
.abschnitt--bild {
  position: relative; color: var(--flaeche-hell);
  background-image: var(--bild); background-size: cover; background-position: center;
}
.abschnitt--bild > .huelle { position: relative; z-index: 1; }
.abschnitt--bild h1, .abschnitt--bild h2, .abschnitt--bild h3 { color: var(--flaeche-hell); }
.abschnitt--bild .fuehrung { color: rgb(244 246 246 / 0.85); }
.abschnitt--bild .augenbraue { color: rgb(244 246 246 / 0.75); }
.abschnitt__schleier { position: absolute; inset: 0; background: rgb(12 13 14 / 0.7); }

/* Kundenwunsch 2026-08-07: der Fließtext unter „Das Morgen gestalten" im
   Blocksatz. hyphens dazu, sonst reißt Blocksatz bei langen deutschen
   Wörtern unschöne Lücken. */
.abschnitt--morgen .fuehrung { text-align: justify; hyphens: auto; }

/* Zweispalter: Bild neben Text bzw. Text neben Video. */
/* stretch statt center: sonst steht die quadratische Bildkarte neben einem
   langen Formular als kurzer Stummel da. */
.zweispalt { display: grid; gap: var(--a-5); align-items: stretch; }
.zweispalt > * { align-self: center; }
.zweispalt > .bildkarte { align-self: stretch; }
.bild--gerahmt { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--primaer); min-height: 78vh; display: grid; align-items: end; }
.hero__medium { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__schleier { position: absolute; inset: 0; background: linear-gradient(to top, rgb(12 13 14 / 0.8), rgb(12 13 14 / 0.35)); }
.hero__text { position: relative; z-index: 1; color: var(--flaeche-hell); padding-block: var(--a-6); }
.hero__text h1 { color: var(--flaeche-hell); }
.hero__text .fuehrung { color: rgb(244 246 246 / 0.9); max-width: 46rem; margin-bottom: var(--a-4); }

/* ── Projekte ─────────────────────────────────────────────────────────────── */
.projekte { display: grid; gap: var(--a-5); margin-top: var(--a-5); }
.projekt {
  background: var(--flaeche); border-radius: var(--radius-gross);
  overflow: hidden; display: grid;
  box-shadow: 0 2px 24px rgb(20 38 17 / 0.06);
}

/* Bild mit dem gruenen Balken am unteren Rand */
.projekt__medium { position: relative; }
.projekt__medium img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
/* Kompaktes, fast deckendes Band am unteren Bildrand — kein weicher Verlauf
   ueber das halbe Bild. So haelt es die Dev-Seite. */
.projekt__balken {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-3) var(--a-4);
  background: linear-gradient(transparent, rgb(20 38 17 / 0.94) 40%);
  color: #fff;
}
.projekt__label {
  font-family: var(--schrift-auszeichnung);
  color: var(--akzent); text-transform: uppercase;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.3;
  border-right: 2px solid rgb(255 255 255 / 0.45); padding-right: var(--a-3);
  /* 13em statt 9: bei 9em bricht „APARTMENTS ZUM VERKAUF" auf drei Zeilen,
     die Vorlage zeigt zwei. */
  max-width: 13em;
}
.projekt__ort {
  display: flex; align-items: center; gap: var(--a-1);
  text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; font-weight: 600;
}
.projekt__ort .ikone { width: 18px; height: 18px; color: var(--akzent); }

.projekt__text { padding: var(--a-5) var(--a-4); display: grid; gap: var(--a-3); align-content: start; }
.projekt__titel { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); text-transform: uppercase; }
.projekt__beschreibung { color: var(--text-leise); margin: 0; }

/* Die drei Datenspalten, oben und unten von einer Linie eingefasst */
.projekt__daten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--a-3); margin: 0;
  border-block: 1px solid var(--linie); padding-block: var(--a-3);
}
.projekt__wert dt { color: var(--primaer); font-weight: 600; font-size: var(--gr-klein); margin-bottom: var(--a-1); }
.projekt__wert dd { margin: 0; display: flex; align-items: center; gap: var(--a-1); color: var(--text-leise); }
.projekt__wert .ikone { color: var(--sekundaer); }

.projekt__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3); }
.projekt__preis { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--primaer); line-height: 1.1; }
.projekt__preis span {
  display: block; font-size: var(--gr-klein); font-weight: 400;
  color: var(--sekundaer); letter-spacing: 0.04em;
}

/* ── Bildkarte ────────────────────────────────────────────────────────────── */
/* Werte aus der Elementor-Konfiguration der Dev-Seite uebernommen, nicht
   geschaetzt: --overlay-opacity 0.3 auf #000000, --border-radius 30px,
   box-shadow 0 10px 36px rgba(0,0,0,.5), padding 22px.

   Entscheidend ist der SCHLEIER: eine flaechige schwarze Ebene mit 30 % ueber
   dem GANZEN Bild — kein Verlauf nur am unteren Rand. Die Motive sind helle
   Innenraeume; ein Textschatten allein traegt darauf nicht, weisse Schrift
   verschwindet im hellen Parkett. */
.bildkarte {
  position: relative; margin: 0;
  border-radius: 30px; overflow: hidden;
  box-shadow: 0 10px 36px rgb(0 0 0 / 0.5);
}
.bildkarte img { width: 100%; height: 100%; min-height: 420px; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.bildkarte__schleier { position: absolute; inset: 0; background: #000; opacity: 0.3; }

.bildkarte figcaption {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
}
.bildkarte__marke {
  align-self: start;
  display: inline-flex; align-items: center; gap: var(--a-1);
  background: var(--flaeche); color: var(--text);
  border: 2px solid var(--akzent); border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem; font-size: var(--gr-klein); font-weight: 500;
}
.bildkarte__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); }

/* Titel und Unterzeile gehoeren zusammen an den unteren Rand. Als getrennte
   Kinder eines space-between-Containers waere der Titel in die Bildmitte
   gerutscht — genau das war der Fehler. */
.bildkarte__unten { display: grid; gap: 0.35rem; }
.bildkarte__titel { color: #fff; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.2; }
.bildkarte__text { color: rgb(255 255 255 / 0.9); font-size: var(--gr-text); }

/* ── Merkmale ─────────────────────────────────────────────────────────────── */
.merkmale { list-style: none; padding: 0; margin: var(--a-5) 0; display: grid; gap: var(--a-3); }
.merkmal { border-top: 2px solid var(--akzent); padding-top: var(--a-2); display: grid; gap: var(--a-1); }
.merkmal__titel { font-weight: 700; }

/* Merkmale als Pillen mit gelbem Rahmen — so zeigt es die Dev-Seite.
   justify-items: start, damit jede Pille nur so breit wird wie ihr Text. */
.pillen { list-style: none; padding: 0; margin: var(--a-4) 0 0; display: grid; gap: var(--a-2); justify-items: start; }
.pille {
  display: inline-flex; align-items: center; gap: var(--a-2);
  border: 2px solid var(--akzent); border-radius: var(--radius-pill);
  padding: 0.6rem 1.4rem; background: var(--flaeche);
}
.pille .ikone { color: var(--sekundaer); }

/* ── Video (YouTube, click-to-load) ───────────────────────────────────────── */
/* Das iframe entsteht erst beim Klick. Direkt eingebettet laedt es beim
   Seitenaufruf ungefragt von Google und setzt Cookies, auch wenn nie jemand
   auf Play drueckt. */
.video { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--primaer); }
.video__standbild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.6; }
.video__knopf {
  position: absolute; inset: 0 0 auto 0; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: var(--a-2);
  background: none; border: 0; color: #fff; cursor: pointer; font-weight: 600;
}
.video__ikone { width: 56px; height: 56px; fill: currentColor; stroke: none; }
.video__hinweis {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: var(--a-1) var(--a-2);
  background: rgb(12 13 14 / 0.75); color: rgb(244 246 246 / 0.9);
  font-size: 0.75rem; text-align: center;
}
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* ── Formular ─────────────────────────────────────────────────────────────── */
.formular { display: grid; gap: var(--a-3); margin-top: var(--a-4); }
.formular .knopf { justify-self: start; }
.formular__reihe { display: grid; gap: var(--a-3); grid-template-columns: 1fr 1fr; }

.feld { display: grid; gap: var(--a-1); }
.feld__text { font-size: var(--gr-klein); }
.feld input,
.feld select,
.feld textarea {
  font: inherit; color: inherit;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--sekundaer); }
.feld__text { color: var(--primaer); font-weight: 600; }
/* Rotes Sternchen wie auf der Dev-Seite. Es ist reine Optik — die Pflicht
   meldet `required` bereits an Screenreader, deshalb aria-hidden im Markup. */
.pflicht { color: #d8434b; margin-left: 0.25em; }
.feld [aria-invalid="true"] { border-color: #c0392b; }
.feld__fehler { font-size: var(--gr-klein); color: #ffb4a8; min-height: 1.2em; }

/* Kein Leerraum, solange nichts gemeldet wird — sonst klafft unter dem Knopf
   dauerhaft eine Luecke. Platz entsteht erst mit Inhalt. */
.formular__status:empty { display: none; }
.formular__status { margin: 0; }
.formular__status[data-art="erfolg"] { color: var(--akzent); }
.formular__status[data-art="fehler"] { color: #ffb4a8; }
.formular__hinweis { font-size: var(--gr-klein); opacity: 0.7; }

/* Honeypot: nicht display:none — manche Bots erkennen das und lassen das Feld
   dann absichtlich leer. Aus dem Blick geschoben und für Screenreader und
   Tastatur unerreichbar. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Fuß ──────────────────────────────────────────────────────────────────── */
/* Es gibt keine Impressums- und keine Datenschutzseite. Die Pflichtangaben
   stehen deshalb NUR in diesem Block — siehe aufgaben/006.md. */
.fuss { background: var(--primaer); color: var(--flaeche-hell); padding-block: var(--a-5) var(--a-3); }
.fuss a { color: inherit; }
.fuss__reihe { display: grid; gap: var(--a-4); font-size: var(--gr-klein); }
.fuss__logo { height: 44px; width: auto; }
.fuss__titel { font-size: var(--gr-h3); color: var(--flaeche-hell); margin-bottom: var(--a-2); }
.fuss__adresse { font-style: normal; line-height: 2; }
.fuss__leitung { line-height: 2; }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a-2);
  margin-top: var(--a-4); padding-top: var(--a-3);
  border-top: 1px solid rgb(244 246 246 / 0.15);
  font-size: var(--gr-klein);
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
/* Einblenden beim Scrollen. Der Startzustand wird von JavaScript gesetzt, nicht
   hier — ohne JS bliebe der Inhalt sonst dauerhaft auf opacity 0 und die Seite
   wäre leer. */
[data-zeigen] { transition: opacity 0.5s ease, translate 0.5s ease; }
[data-zeigen].ist-versteckt { opacity: 0; translate: 0 16px; }

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Media Queries ────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .burger { display: block; }

  .nav {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0;
    background: var(--flaeche); border-bottom: 1px solid var(--linie);
    flex-direction: column; align-items: stretch; gap: var(--a-2);
    padding: var(--a-3);
    display: none;
  }
  .nav.ist-offen { display: flex; }
  .nav__punkte { flex-direction: column; gap: var(--a-2); }

  .formular__reihe { grid-template-columns: 1fr; }
  .hero { min-height: 60vh; }
}

@media (min-width: 760px) {
  .merkmale { grid-template-columns: repeat(3, 1fr); }
  .zweispalt { grid-template-columns: 1fr 1fr; }
  .projekt { grid-template-columns: 1fr 1fr; }
  .projekt__bild { height: 100%; aspect-ratio: auto; }
  .fuss__reihe { grid-template-columns: auto 1fr auto; align-items: start; }
}

/* ── Druck ────────────────────────────────────────────────────────────────── */
@media print {
  .kopf, .nav, .burger, .formular, .video, .hero__medium { display: none; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}