/* =========================================================
   3DGRAFIX — Onepager-Prototyp v2
   Basierend auf dem Layout-PDF: Top-Navigation, Gold-Akzent
   (#FCAF17) auf dunklem Graphit, wie auf der bestehenden
   3dgrafix.de. Roboto lokal eingebunden (keine Google-Fonts-
   Anfrage). Die Sektionen (Leistungen/Projekte/Über/Kontakt) sind
   hier vorerst noch alle auf einer Test-Onepage untergebracht, die
   Hauptnavigation verlinkt aber bereits auf die künftigen eigenen
   Unterseiten (leistungen.html usw.) — die entstehen, sobald das
   Start-Layout final ist. Die Buttons/CTAs innerhalb der Sektionen
   zeigen bis dahin weiter auf die Anker dieser Seite.
   ========================================================= */

/* Zurück auf die vollständige, geprüfte Roboto-Fassung (dieselben Dateien wie
   auf der Live-Site 3dgrafix.de) für ALLE Schnitte — keine aus dem PDF gezogenen
   Teil-Schriften mehr im Einsatz. Grund: Ein PDF bettet nur die Buchstaben ein,
   die im Dokument tatsächlich vorkommen; alles andere ist im Datenformat zwar
   als Zeichen "reserviert", aber ohne sichtbare Form — das führte zu fehlenden
   Buchstaben in Adresse/Rufnummer. Der eckige Punkt aus dem Layout wird separat
   unten als exakt vermessenes CSS-Element nachgebaut, unabhängig von der Schrift. */
@font-face{
  font-family: 'Roboto'; font-style: normal; font-weight: 100;
  src: url('fonts/roboto/roboto-v30-latin-100.woff2') format('woff2'),
       url('fonts/roboto/roboto-v30-latin-100.woff') format('woff');
}
@font-face{
  font-family: 'Roboto'; font-style: normal; font-weight: 400;
  src: url('fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'),
       url('fonts/roboto/roboto-v30-latin-regular.woff') format('woff');
}
@font-face{
  font-family: 'Roboto'; font-style: normal; font-weight: 300;
  src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');
}
@font-face{
  font-family: 'Roboto'; font-style: normal; font-weight: 500;
  src: url('fonts/roboto/roboto-v30-latin-500.woff2') format('woff2'),
       url('fonts/roboto/roboto-v30-latin-500.woff') format('woff');
}
@font-face{
  font-family: 'Roboto'; font-style: normal; font-weight: 700;
  src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face{
  font-family: 'Roboto'; font-style: normal; font-weight: 900;
  src: url('fonts/roboto/Roboto-Black.ttf') format('truetype');
}
/* Dancing Script — SIL Open Font License 1.1, frei für kommerzielle Nutzung,
   lokal eingebunden (kein Google-Fonts-Serveraufruf). Lizenztext liegt bei
   unter fonts/dancing-script/OFL.txt. Ersatz für "Photograph Signature"
   (dafont.com), die ausdrücklich NUR privat genutzt werden darf. */
@font-face{
  font-family: 'Dancing Script';
  font-style: normal; font-weight: 400 700;
  src: url('fonts/dancing-script/DancingScript-Variable.ttf') format('truetype');
}
/* Herr Von Muellerhoff — SIL Open Font License 1.1, frei für kommerzielle Nutzung,
   lokal eingebunden. Ersetzt Dancing Script als Schreibschrift für die
   Schreibschrift-Wasserzeichen hinter den Section-Headlines. */
@font-face{
  font-family: 'Herr Von Muellerhoff';
  font-style: normal; font-weight: 400;
  src: url('fonts/herr-von-muellerhoff/herr-von-muellerhoff-latin-400-normal.woff2') format('woff2'),
       url('fonts/herr-von-muellerhoff/herr-von-muellerhoff-latin-400-normal.woff') format('woff');
}

:root{
  /* Aus den PDF-Vektordaten ausgelesen (nicht geschätzt): #323237 Basis-Hintergrund,
     #4c4d4f zweiter Flächenton (Leistungen-Zeilenbänderung, Bio-Panel, Footer-oben) */
  --bg: #323237;
  --bg-alt: #4c4d4f;
  --bg-deep: #26272a;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);

  --text: #F2F2F0;
  --text-muted: #ABABA8;
  --text-faint: #75746F;

  --gold: #FCAF17;
  --gold-soft: rgba(252,175,23,0.14);
  /* Wasserzeichen-Farbe: exakter RGB-Wert von Daniel aus InDesign (53,53,58
     bei Hintergrund 50,50,55). */
  --watermark-color: #35353A;

  --radius-s: 3px;
  --gutter: clamp(20px, 13.3vw, 160px);
  /* Schmalerer Innenabstand für die beiden "Bleed"-Bereiche, die laut PDF
     breiter laufen als der normale Text-Container (Projekte-Kacheln, Über-Bio-Panel). */
  --gutter-tiles: clamp(12px, 5.83vw, 70px);
  --gutter-bio: clamp(14px, 4.6vw, 55px);
  --container: 1200px;

  --font: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);

  /* ===== Schriftgrößen 1:1 aus InDesign (Dokument ist bei 1200x5000 PIXEL
     angelegt, also 1pt im Dokument = 1px im CSS — keine 4/3-Umrechnung),
     zentral skaliert: Alle Werte hängen an --type-scale — das Verhältnis
     zueinander bleibt auf jeder Bildschirmgröße exakt erhalten, es skaliert
     nur der Gesamtfaktor. */
  --type-scale: 1;

  --fs-hero: 60px;      /* 60pt */      --lh-hero: 1.2;   /* 72pt */
  --fs-hero-sub: 24px;  /* 24pt */      --lh-hero-sub: 1.5; /* 36pt */

  --fs-h2: 60px;        /* 60pt */      --fs-h2-dot-ratio: 1.667; /* 100pt */

  --fs-card-title: 36px; /* 36pt */
  --fs-body: 16px;       /* 16pt */     --lh-body: 1.625; /* 26pt */
  --fs-foot: 24px;       /* 24pt, NUR Leistungen-Fußtext */ --lh-foot: 1.5;   /* 36pt */
  --fs-copy: 22px;       /* 22pt, Projekte-Fuß/Bio/Kontakt-Absatz */ --lh-copy: 1.364; /* 30pt */

  --fs-nav: 18px;        /* 18pt */     --fs-nav-dot-ratio: 1.667; /* 30pt */
  --fs-btn: 18px;        /* 18pt */     --fs-btn-dot-ratio: 1.333; /* 24pt */
  --fs-footer: 18px;     /* 16pt lt. PDF, auf Wunsch 2pt größer */ --lh-footer: 1.5;

  /* Abstand vor/nach den Trennlinien, aus PDF-Daten (Button-Unterkante zu
     nächster Linie ≈100pt, Linie zu Headline-Text ≈78pt) */
  --gap-pre-divider: 100px;
  --gap-post-divider: 78px;
}

@media (max-width: 1100px){ :root{ --type-scale: 0.92; } }
/* Seitenrand auf Mobil war zu großzügig (klemmte bei ~60px), auf Wunsch um
   ~20px schmaler — nur hier, Desktop/Tablet bleiben bei --gutter oben. */
@media (max-width: 700px){ :root{ --type-scale: 0.84; --gutter: clamp(16px, 8vw, 40px); } }
@media (max-width: 420px){ :root{ --type-scale: 0.76; } }

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

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 100;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Keine automatische Silbentrennung mit Bindestrich, und Wörter werden auch
     nicht stillschweigend mitten im Wort umgebrochen — beim Verkleinern des
     Fensters wandert immer das ganze Wort in die nächste Zeile. Einziger
     Kompromiss: ein einzelnes Wort, das breiter als sein Container ist (sehr
     lange Wörter auf sehr schmalen Screens), kann dann über den Rand hinaus-
     ragen statt umzubrechen — das ist der Preis dafür, dass nie ein Wort
     zerrissen wird. */
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; transition: color .25s var(--ease); }
a:hover{ color: var(--gold); }
p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.mark{ color: var(--gold); }
/* Einzelnes Wort in Versalien hervorheben, mitten in einem sonst normal
   geschriebenen Fließtext (z.B. "Projekte" im Projekte-Fußtext). */
.mark-caps{ text-transform: uppercase; }

/* =========================== NAV =========================== */
.site-nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px var(--gutter);
  line-height: 1;
  background: rgba(0,0,0,0.6);
  transition: padding .4s var(--ease), background .4s var(--ease);
}
.site-nav.is-scrolled{
  padding-block: 11px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid var(--line);
}
/* align-self:flex-end statt der geerbten center-Ausrichtung von .site-nav:
   die Unterkante des Logos soll bündig mit den Menüpunkten abschließen. */
.site-nav .logo{ align-self: flex-end; }
/* Testweise 80% Deckkraft fürs Nav-Logo, analog zur 60%-Deckkraft des
   Nav-Balkens dahinter — auf Wunsch von Daniel zum Ausprobieren. */
.site-nav .logo-img{ opacity: 0.8; }
/* Echtes Wortmarken-Logo (transparentes PNG) statt Icon+Text — Maße laut
   Daniel ca. 268×38px, hier proportional mitskaliert über --type-scale. */
.logo-img{ display: block; width: calc(268px * var(--type-scale)); height: auto; }

.nav-links{
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0;
  /* ca. 1/3 des Nav-Innenabstands nach unten versetzt, auf Wunsch */
  transform: translateY(8px);
}
.nav-links a{
  font-size: calc(var(--fs-nav) * var(--type-scale)); font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text);
}
.nav-links a.active{ color: var(--gold); }
.nav-links a:hover{ color: var(--gold); }
/* Eckiger Punkt als reines Formelement statt Schriftzeichen — Maße direkt aus
   dem Vektor-Umriss des Original-Punkts in Daniels PDF berechnet (Breite/Höhe
   relativ zur Schriftgröße, seitenverhältnis- und größentreu je Kontext). So
   ist die Form unabhängig davon, welche Roboto-Version gerade geladen ist. */
.nav-links a .dot{
  display: inline-block; vertical-align: baseline; background: currentColor;
  width: calc(var(--fs-nav) * 0.1115 * var(--type-scale));
  height: calc(var(--fs-nav) * 0.1335 * var(--type-scale));
}

.nav-toggle{ display: none; width: 40px; height: 40px; place-items: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: ""; display: block; width: 20px; height: 1.5px; background: var(--text); position: relative;
}
.nav-toggle span::before{ position: absolute; top: -6px; }
.nav-toggle span::after{ position: absolute; top: 6px; }

@media (max-width: 860px){
  .nav-toggle{ display: grid; }
  .nav-links{
    position: fixed; inset: 64px 0 0 0; height: calc(100dvh - 64px);
    background: var(--bg-deep); flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 20px var(--gutter) 40px; gap: 4px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-links.is-open{ opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-links a{ display: block; padding: 16px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
}

/* =========================== SECTION HEADLINE =========================== */
.section-head{
  /* Kein z-index hier (mehr): ein expliziter Wert würde eine eigene
     Stacking-Context aufmachen, in der das negative z-index des innen
     verschachtelten Wasserzeichens gefangen bliebe — die ganze Headline-Box
     (samt Wasserzeichen) läge dann als Einheit über späterem Section-Inhalt
     wie dem Foto-Panel. Ohne eigenen z-index reicht das negative z-index des
     Wasserzeichens bis zur nächsten echten Stacking-Context durch und landet
     wirklich hinter allem in der Section. */
  position: relative; text-align: center; margin-bottom: 56px;
  padding-top: calc(var(--gap-pre-divider) * var(--type-scale));
}
/* Kontakt hat laut Layout KEINE Trennlinie — Abstand vor+nach der Linie wird
   hier zusammengefasst, damit der Gesamtabstand zur Headline gleich bleibt. */
.kontakt .section-head{
  padding-top: calc((var(--gap-pre-divider) + var(--gap-post-divider)) * var(--type-scale));
}
.divider{
  width: 100%; height: 1.5px; background: var(--gold);
  margin: 0 auto calc(var(--gap-post-divider) * var(--type-scale));
  transform: scaleX(0); transform-origin: center; transition: transform .8s var(--ease);
}
.divider.is-visible{ transform: scaleX(1); }
.section-head h2{
  /* inline-block statt block: die Box umschließt dadurch eng den sichtbaren
     Text (statt die volle Breite von .section-head einzunehmen), damit das
     absolut positionierte Wasserzeichen unten exakt relativ zur Headline
     selbst sitzt und nicht relativ zur ganzen (zentrierten) Zeile. */
  display: inline-block; position: relative;
  font-family: var(--font); font-weight: 100; text-transform: uppercase;
  font-size: calc(var(--fs-h2) * var(--type-scale)); letter-spacing: 0.01em; margin: 0; color: var(--text);
}
.section-head h2 .mark{ color: var(--gold); }
.section-head h2 .dot{
  display: inline-block; vertical-align: baseline; background: currentColor;
  width: calc(var(--fs-h2) * 0.070 * var(--type-scale));
  height: calc(var(--fs-h2) * 0.1059 * var(--type-scale));
}

/* isolation:isolate erzwingt eine eigene Stacking-Context auf Section-Ebene,
   OHNE dafür einen z-index-Wert zu brauchen (der wiederum das Wasserzeichen
   lokal in .section-head gefangen hätte). Dadurch landet das negative
   z-index des Wasserzeichens sauber innerhalb DIESER Section: über dem
   Section-Hintergrund (Layer 1), aber hinter jedem anderen Inhalt darin
   (Layer 3+) — unabhängig davon, ob der später im DOM kommt oder nicht. */
.leistungen, .projekte, .ueber, .kontakt{ position: relative; overflow: hidden; isolation: isolate; }
/* Der negative wm-y-Versatz (Headline-Kante nach oben) reicht bei Leistungen/
   Projekte/Über über den eigentlichen Section-Rand hinaus — ohne diesen
   zusätzlichen Platz schneidet overflow:hidden oben die Schlaufen der
   Schreibschrift (z.B. das "D" in "3Dgrafix") sichtbar ab. Zusätzliches
   padding-top vor der Headline gibt dem Wasserzeichen genug Raum, bevor die
   Section-Kante clippt (dadurch rutscht die Headline minimal weiter nach
   unten, was hier kein Problem ist). Kontakt hat durch den fehlenden
   Divider schon genug Puffer (siehe .kontakt .section-head oben) und
   braucht das nicht. */
.leistungen, .projekte, .ueber{ padding-top: 60px; }
/* Schreibschrift-Wasserzeichen: Position pro Section über --wm-x/--wm-y (in pt,
   inline per style-Attribut gesetzt) — das ist der von Daniel aus dem PDF
   gemessene Versatz zwischen dem linken oberen Eck der Robota-Headline (die
   jetzt dank inline-block exakt diese Bezugsbox ist) und der Schreibschrift.
   1pt = 1px, mitskaliert über --type-scale wie der Rest der Typografie. */
.section-watermark{
  position: absolute;
  left: calc(var(--wm-x, 0) * 1px * var(--type-scale));
  top: calc(var(--wm-y, 0) * 1px * var(--type-scale));
  font-family: 'Herr Von Muellerhoff', cursive;
  font-weight: 400; font-style: normal; text-transform: none;
  font-size: calc(450px * var(--type-scale));
  line-height: 1;
  color: var(--watermark-color);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}

.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* =========================== BUTTON =========================== */
.btn{
  /* align-items:baseline statt center: in Flexbox wird vertical-align auf
     Flex-Kindern (wie dem .dot-Quadrat) sonst ignoriert, wodurch der Punkt
     mittig statt bündig zur Grundlinie saß. */
  display: inline-flex; align-items: baseline; justify-content: center;
  min-width: calc(268px * var(--type-scale));
  background: var(--gold); color: #ffffff; border: none;
  font-size: calc(var(--fs-btn) * var(--type-scale)); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1;
  padding: calc(8px * var(--type-scale)) calc(30px * var(--type-scale));
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn .dot{
  display: inline-block; vertical-align: baseline; background: currentColor;
  width: calc(var(--fs-btn) * 0.1283 * var(--type-scale));
  height: calc(var(--fs-btn) * 0.1314 * var(--type-scale));
}
.btn:hover{ color: #ffffff; box-shadow: 6px 6px 18px -6px rgba(0,0,0,0.7); transform: translateY(-1px); }

/* =========================== HERO =========================== */
.hero{
  /* width:100% ist Pflicht hier: ohne festes width bricht der Browser bei
     aspect-ratio + min-height (schmale Screens) in die Breite statt in die
     Höhe aus — der ganze Hero wurde dann breiter als der Viewport. */
  position: relative; width: 100%; aspect-ratio: 1200 / 540; min-height: 320px; display: flex; align-items: center;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
}
.hero-media{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  background:
    radial-gradient(60% 70% at 68% 38%, rgba(252,175,23,0.10), transparent 60%),
    repeating-linear-gradient(115deg, #23201b 0 2px, #1c1a17 2px 90px),
    linear-gradient(160deg, #211f1c, #17100a 75%);
}
/* Der Verlauf oben bleibt als Hintergrund stehen — falls video/home-header.mp4
   mal fehlt oder noch lädt, ist der Hero trotzdem nicht einfach leer/weiß. */
.hero-overlay{ position: absolute; inset: 0; z-index: -1; background: rgba(10,10,10,0.3); }
/* Die echte 2011er-Schriftdatei ist etwas breiter laufend als der moderne
   Roboto-Webfont, daher hier etwas mehr Raum, damit "Richtig gutes 3D"
   auf einer Zeile bleibt (wie im Layout), statt umzubrechen. */
.hero-body{ max-width: 920px; }
.hero-body h1{
  /* inline-block: die Box (und damit die goldene Linie darunter) ist genau
     so breit wie die längste Textzeile ("richtig gutes 3D"). */
  display: inline-block;
  font-family: var(--font); font-weight: 100; text-transform: uppercase;
  font-size: calc(var(--fs-hero) * var(--type-scale)); line-height: var(--lh-hero); margin: 0; letter-spacing: 0.005em;
}
/* Goldene Linie unter dem Zweizeiler. Abstand Textunterkante → Linie entspricht
   dem optischen Abstand zwischen den beiden Textzeilen (Versalienunterkante
   Zeile 1 → Versalienoberkante Zeile 2). Der Hero zentriert seinen Inhalt
   vertikal (align-items:center) — die Linie gehört mit zum Block, dadurch
   sitzt Text + Linie gemeinsam mittig. */
.hero-body h1::after{
  content: ""; display: block; height: 1.5px; background: var(--gold);
  margin-top: calc(var(--fs-hero) * 0.23 * var(--type-scale));
}
.hero-body h1 .mark{ color: var(--gold); }
.hero-body p{
  margin-top: 20px; color: var(--text-muted); font-weight: 300;
  font-size: calc(var(--fs-hero-sub) * var(--type-scale)); line-height: var(--lh-hero-sub);
}

/* =========================== LEISTUNGEN GRID =========================== */
.leistungen{ background: var(--bg); }

.leistungen-row{ width: 100%; }
.leistungen-row--a{ background: var(--bg-alt); }
.leistungen-row--b{ background: transparent; }

.leistungen-row-inner{
  padding-block: clamp(40px, 5vw, 64px);
  padding-inline: clamp(16px, 2.6vw, 31px);
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 7.2vw, 86px); row-gap: 34px;
}

.leistungen-grid .cell{
  display: flex; align-items: stretch; gap: 12px;
}
.cell-line{
  flex: none; width: 1.5px; background: var(--gold);
}
.cell-body{ min-width: 0; }
.leistungen-grid h3{
  font-family: var(--font); font-weight: 100; text-transform: uppercase;
  font-size: calc(var(--fs-card-title) * var(--type-scale)); line-height: 1.2; letter-spacing: 0.02em; margin: 0 0 14px;
}
.leistungen-grid h3 .mark{ color: var(--gold); }
.leistungen-grid h3 .plus{ color: var(--text); }
.leistungen-grid p{
  font-family: var(--font); font-weight: 300;
  font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
  color: var(--text);
  /* Zeilenabstand fügt oben/unten je eine halbe "Leading"-Zeile hinzu, die
     InDesigns Modell nicht kennt — hier per negativem Randausgleich abgezogen,
     damit die Vertikallinie (align-items:stretch) unten bündig mit dem
     sichtbaren Text abschließt statt darüber hinauszuragen. */
  margin-bottom: calc((var(--lh-body) - 1) * var(--fs-body) * var(--type-scale) * -0.5);
}
@media (max-width: 700px){
  .leistungen-row-inner{ grid-template-columns: 1fr; row-gap: 30px; }
}

/* =========================== LEISTUNGEN IM DETAIL (eigene Seite) ===========================
   Eigener Seitenkopf mit Schreibschrift-Wasserzeichen wie bei Projekte/Über — darum eigene
   Stacking-Context + scoped position:relative auf dem h1 (siehe #projekte-uebersicht). Darunter
   6x abwechselnd ein heller Block (Überschrift + Absatz, zentriert) und ein dunkler Block
   (Bulletliste mit goldener Linie, wie die Cell-Linie im Leistungen-Überblick auf Start). */
#leistungen-uebersicht{ position: relative; overflow: hidden; isolation: isolate; }
#leistungen-uebersicht .page-head{ max-width: 760px; }
#leistungen-uebersicht .page-head h1{ position: relative; color: var(--text); }

.leistung-kopf{
  background: var(--bg-alt); text-align: center;
  padding-block: clamp(40px, 6vw, 68px);
}
.leistung-kopf h2{
  font-family: var(--font); font-weight: 100; text-transform: uppercase;
  font-size: calc(var(--fs-card-title) * var(--type-scale)); letter-spacing: 0.02em;
  margin: 0 0 22px; color: var(--text);
}
.leistung-kopf h2 .mark{ color: var(--gold); }
.leistung-kopf h2 .plus{ color: var(--text); }
.leistung-kopf p{
  max-width: 900px; margin: 0 auto; color: var(--text);
  font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}

.leistung-liste{ background: var(--bg); padding-block: clamp(30px, 4.2vw, 46px); }
.leistung-liste-inner{
  display: flex; align-items: stretch; gap: 12px;
  max-width: 900px; margin: 0 auto; text-align: left;
}
.leistung-liste ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.leistung-liste li{
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text);
  font-size: calc(18px * var(--type-scale)); line-height: 1.45;
}
/* Gleiche Korrektur wie bei .ueber-bullets li::before: Punkt an der ersten
   Zeile zentrieren statt am ganzen (mehrzeiligen) Listeneintrag. */
.leistung-liste li::before{
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted);
  margin-top: calc((18px * var(--type-scale) * 1.45 - 5px) / 2);
}

.leistung-cta{ background: var(--bg-alt); text-align: center; padding-block: clamp(40px, 5vw, 56px); }
.leistung-cta p{
  max-width: 820px; margin: 0 auto; color: var(--text);
  font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}
.leistung-cta .mark{ color: var(--gold); }

.section-foot{ text-align: center; margin-top: 48px; }
.section-foot p{ max-width: 62ch; margin: 0 auto 28px; color: var(--text); }
/* Zwei Fließtext-Schnitte laut PDF-Daten: 24/36pt nur bei Leistungen-Fußtext,
   22/30pt bei Projekte-Fußtext, Über-Bio und Kontakt-Absatz. */
.copy-lg{ font-size: calc(var(--fs-foot) * var(--type-scale)); line-height: var(--lh-foot); }
.copy{ font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy); }

/* =========================== PROJEKTE (Filmstreifen) =========================== */
.projekte{ background: var(--bg); }
/* Laut PDF stehen die vier Kacheln deutlich breiter als der normale Text-
   Container (Rand ~70px statt ~160px) — hier per Negativ-Margin aus dem
   Container-Innenabstand herausgezogen, statt bündig mit den Trennlinien. */
.projekte-strip{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px;
  margin-inline: calc(-1 * (var(--gutter) - var(--gutter-tiles)));
}
@media (max-width: 760px){ .projekte-strip{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .projekte-strip{ grid-template-columns: 1fr; } }

.viewport-tile{
  /* display:block ist Pflicht, seit die Kacheln <a>-Links sind (Default für
     <a> ist inline, das würde aspect-ratio/Grid-Sizing zerschießen). */
  position: relative; display: block; aspect-ratio: 250/152; overflow: hidden;
  background: linear-gradient(155deg, #4a4030, var(--bg-alt) 70%);
  opacity: 0; transform: scale(.96);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.viewport-tile.is-visible{ opacity: 1; transform: scale(1); }
.viewport-tile img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.viewport-tile:hover img,
.viewport-tile:focus-visible img{ transform: scale(1.06); }

/* =========================== ÜBER 3DGRAFIX =========================== */
.ueber{ background: var(--bg); }
.ueber-panel{ background: var(--bg-alt); padding-block: clamp(32px, 5vw, 48px); margin-top: 40px; }
/* Schmalerer Rand als der normale Container, laut PDF-Position (Foto beginnt
   bei x≈55 von 1200 statt beim üblichen Text-Gutter ≈155-160). */
.ueber-panel .container{ padding-inline: var(--gutter-bio); }
.ueber-body{
  display: grid; grid-template-columns: 205px 1fr; gap: 30px;
  /* stretch statt center: Foto übernimmt automatisch die Höhe des Textblocks
     (Absatz + Button), damit Ober-/Unterkante exakt abschließen, wie im Layout. */
  align-items: stretch;
}
.ueber-photo{
  background: linear-gradient(155deg, #4a4030, var(--bg-alt) 70%);
  border: 1px solid var(--line); overflow: hidden;
}
.ueber-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ueber-text p{
  color: var(--text); margin: 0 0 16px;
  font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}
/* Der Button steht laut PDF NICHT bündig mit dem linksbündigen Fließtext,
   sondern exakt an derselben x-Position wie die übrigen CTA-Buttons der
   Seite (identischer x-Bereich wie z.B. "Leistungen im Detail" — beide
   Buttons sind auf der ganzen Seite zentriert, unabhängig von der schmaleren
   Textspalte hier). Bleibt Teil des normalen Textflusses (zählt weiter zur
   Höhe für das Stretch-Layout des Fotos), wird aber um den gemessenen
   Abstand vom Textspalten-Rand nach rechts gerückt. */
.ueber-text .btn{ margin-top: 26px; margin-left: calc(176px * var(--type-scale)); }
@media (max-width: 700px){
  /* Im gestapelten Mobil-Layout gibt es keinen Textblock mehr, an dessen Höhe
     sich das Foto per stretch angleichen könnte — hier braucht es wieder ein
     festes Seitenverhältnis. */
  .ueber-body{ grid-template-columns: 1fr; align-items: start; }
  .ueber-photo{ max-width: 200px; aspect-ratio: 205/254; }
  .ueber-text .btn{ margin-left: 0; }
}

/* =========================== ÜBER 3DGRAFIX (Unterseite) =========================== */
/* Headline mit Schreibschrift-Wasserzeichen im Hintergrund, wie auf Start —
   hier aber als eigener Seitenkopf (h1) statt Section-Headline (h2), da die
   Unterseite kein "Wir sind 3DGrafix" mehr braucht, sondern direkt mit dem
   Seitentitel startet. */
.ueber-seite .ueber-hero{
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg); text-align: center;
  padding: calc(150px * var(--type-scale)) var(--gutter) calc(64px * var(--type-scale));
}
.ueber-hero h1{
  position: relative; display: inline-block;
  font-family: var(--font); font-weight: 100; text-transform: uppercase;
  font-size: calc(var(--fs-hero) * var(--type-scale)); line-height: var(--lh-hero);
  margin: 0; letter-spacing: 0.005em; color: var(--text);
}
.ueber-hero h1 .dot{
  display: inline-block; vertical-align: baseline; background: currentColor;
  margin-left: calc(4px * var(--type-scale));
  width: calc(var(--fs-hero) * 0.070 * var(--type-scale));
  height: calc(var(--fs-hero) * 0.1059 * var(--type-scale));
}

/* Kurzes, zentriertes Statement — wird zweimal auf der Seite verwendet
   (Intro und vor den Kundenlogos), jeweils im helleren Bandton, damit sich
   die Seite im gleichen dunkel/hell-Rhythmus liest wie der Rest der Site. */
.ueber-statement{ background: var(--bg-alt); padding-block: calc(31px * var(--type-scale)); }
.ueber-statement p{
  max-width: 900px; margin: 0 auto; text-align: center; color: var(--text);
  font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}

/* History/Timeline: läuft bewusst über die volle (breitere) Textspalte,
   nicht über die schmalere Bio-Spalte (--gutter-bio) wie Bio-Panel/Bullets
   darunter — im Layout ist dieser Block der breiteste Textbereich der Seite. */
.ueber-history{ background: var(--bg); padding-block: clamp(40px, 5vw, 56px); }
.ueber-history-text{ max-width: 900px; }
.ueber-history-text p{
  color: var(--text); margin: 0 0 20px;
  font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
}
.ueber-history-text p:last-child{ margin-bottom: 0; }

/* Bulletliste unter dem Bio-Panel: richtet sich exakt an der Textspalte des
   Bio-Panels aus (Fotobreite 205px + Spaltenabstand 30px, siehe .ueber-body),
   nicht am breiteren History-Block darüber. */
.ueber-bullets-band{ background: var(--bg); padding-block: clamp(32px, 4.5vw, 48px); }
/* Auf der vollen Über-Seite stehen Bio-Panel und Bulletliste jetzt (nach dem
   Tausch mit dem History-Block laut PDF) an anderer Stelle im hell/dunkel-
   Rhythmus als vorher — dort ist jetzt das Bio-Panel die dunkle und die
   Bulletliste die helle Bande. Bewusst auf .ueber-seite gescoped, damit die
   kompakte Bio-Kachel auf der Startseite (gleiche Klasse .ueber-panel) ihr
   bisheriges helles Band behält. */
.ueber-seite .ueber-panel{ background: var(--bg); }
.ueber-seite .ueber-bullets-band{ background: var(--bg-alt); }
.ueber-bullets-band .container{ padding-inline: var(--gutter-bio); }
.ueber-bullets{
  list-style: none; margin: 0; padding: 0;
  padding-left: 235px; max-width: 820px;
  display: flex; flex-direction: column; gap: 14px;
}
.ueber-bullets li{
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text);
  font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
}
/* Runder Aufzählungspunkt (normaler Mittelpunkt, wie im Text von Daniel
   geschrieben) statt des eckigen Gold-"Dot", der sonst auf der Site ein
   Design-Element ist (Satzzeichen-Ersatz) — hier ist es eine echte Liste,
   kein Deko-Punkt, daher schlicht in Textfarbe statt Gold.
   align-items:flex-start + berechneter margin-top statt baseline/center:
   bei mehrzeiligen Einträgen (z.B. der Transparenz-Punkt) saß der Punkt
   sonst mittig über beide Zeilen verteilt statt an der ersten Zeile. Die
   margin-top-Formel zentriert ihn exakt in der ersten Zeilenhöhe. */
.ueber-bullets li::before{
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted);
  margin-top: calc((var(--fs-body) * var(--type-scale) * var(--lh-body) - 5px) / 2);
}
@media (max-width: 700px){
  .ueber-bullets{ padding-left: 0; }
}

/* Kundenlogos: klein, in zufälliger Reihenfolge (js/kunden-logos.js mischt
   die DOM-Reihenfolge + leichter Vertikal-Versatz), jedes Logo in einem
   quadratischen "Slot" zentriert und per object-fit:contain im eigenen
   Seitenverhältnis skaliert — so wirken hochkant- und querformatige Logos
   gleich groß, statt dass ein breites Logo den Slot sprengt. Die Logos
   selbst sind dunkelgraue PNGs für hellen Untergrund, daher invertiert
   (-> helles Grau) und gedimmt, damit sie sich ruhig ins dunkle Band einfügen. */
.ueber-logos-band{ background: var(--bg); padding-block: clamp(56px, 7vw, 88px); }
.ueber-logos{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(22px, 3.2vw, 36px) clamp(30px, 4.2vw, 48px);
}
.ueber-logos img{
  height: clamp(64px, 8.5vw, 108px); width: clamp(64px, 8.5vw, 108px);
  object-fit: contain;
  filter: invert(1); opacity: 0.62;
  transform: translateY(var(--jitter, 0px));
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.ueber-logos img:hover{ opacity: 1; transform: translateY(calc(var(--jitter, 0px) - 2px)); }

/* =========================== KONTAKT =========================== */
.kontakt{ background: var(--bg); padding-bottom: clamp(72px, 9vw, 120px); text-align: center; }
.kontakt p{
  max-width: 60ch; margin: 0 auto 30px; color: var(--text);
  font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}

/* =========================== UNTERSEITEN-KOPF =========================== */
/* Generischer Titelblock für eigenständige Unterseiten (Kontakt, künftig
   Leistungen/Projekte/Über 3DGrafix usw.) — Gegenstück zu .section-head.
   Steht mittig auf der Seite, auf derselben Mittelachse wie der Adressblock
   im Footer (.footer-contact), statt linksbündig im Container zu kleben. */
.kontaktseite{
  padding: calc(140px * var(--type-scale)) 0 clamp(72px, 9vw, 120px);
  text-align: center;
}
.page-head{ max-width: 640px; margin: 0 auto clamp(40px, 5vw, 56px); }
.page-head h1{
  /* inline-block statt inline-flex: bei langen (mehrzeiligen) Titeln bricht
     der Text sonst innerhalb des Flex-Items um, während der Dot als eigenes
     Flex-Item isoliert neben der ersten Zeile hängen bleibt. Als normales
     Inline-Element wandert der Dot dagegen mit an die letzte Zeile, wie ein
     Satzzeichen — gleiches Prinzip wie bei .section-head h2. */
  display: inline-block;
  font-family: var(--font); font-weight: 100; text-transform: uppercase;
  font-size: calc(var(--fs-h2) * var(--type-scale)); letter-spacing: 0.01em;
  margin: 0 0 20px; color: var(--gold);
}
.page-head h1 .dot{
  display: inline-block; vertical-align: baseline; background: currentColor;
  margin-left: calc(6px * var(--type-scale));
  width: calc(var(--fs-h2) * 0.070 * var(--type-scale));
  height: calc(var(--fs-h2) * 0.1059 * var(--type-scale));
}
.page-head p{
  color: var(--text); font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}

/* =========================== KONTAKTFORMULAR =========================== */
.kontakt-form{
  max-width: 760px; margin: 0 auto; background: var(--bg-alt);
  padding: clamp(24px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 24px;
  text-align: left; /* Formular selbst bleibt innen linksbündig lesbar */
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px){ .form-row{ grid-template-columns: 1fr; } }

.form-field{ display: flex; flex-direction: column; gap: 8px; }
.form-field span{
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: calc(13px * var(--type-scale));
}
.form-field input,
.form-field textarea{
  background: #EBEBE7; border: none; color: var(--bg-deep);
  font-family: var(--font); font-weight: 300;
  font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
  padding: 10px 12px; resize: vertical; transition: box-shadow .3s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus{ outline: none; box-shadow: 0 0 0 2px var(--gold); }
.form-field--full{ grid-column: 1 / -1; }

.form-consent{
  display: flex; align-items: flex-start; gap: 12px;
  font-size: calc(15px * var(--type-scale)); line-height: 1.5; color: var(--text-muted);
}
.form-consent input{
  flex: none; margin-top: 4px; width: 16px; height: 16px; accent-color: var(--gold);
}
.form-consent a{ color: var(--text); text-decoration: underline; }
.form-consent a:hover{ color: var(--gold); }

/* Für Menschen unsichtbar, für Screenreader/Tab-Reihenfolge sauber ausgeblendet
   (kein display:none — sonst füllen Bots das Feld erst gar nicht aus, und genau
   das soll ja passieren, damit sie erkannt werden). */
.form-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kontakt-form .btn{ cursor: pointer; }
.kontakt-form .btn:disabled{ opacity: .55; cursor: default; box-shadow: none; transform: none; }

.form-status{
  margin: 0; color: var(--text); font-size: calc(16px * var(--type-scale));
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.form-status.is-visible{ opacity: 1; transform: translateY(0); }
.form-status.is-error{ color: #ff8a65; }

/* =========================== PROJEKTE-ÜBERSICHT =========================== */
/* Eigener Seitenkopf mit Schreibschrift-Wasserzeichen wie auf Start/Über —
   .page-head h1 ist site-weit sonst einfarbig gold (Kontakt, Projekttitel),
   hier aber zweifarbig ("Ausgewählte" hell, "Projekte" gold), daher scoped
   auf diese Seite statt die gemeinsame Regel zu ändern. */
#kontakt{ position: relative; overflow: hidden; isolation: isolate; }
#kontakt .page-head h1{ position: relative; }
#projekte-uebersicht{ position: relative; overflow: hidden; isolation: isolate; }
#projekte-uebersicht .page-head{ max-width: 760px; }
#projekte-uebersicht .page-head h1{ position: relative; color: var(--text); }

/* Kachel-Grid läuft laut Layout breiter als die normale Textspalte (schmalerer
   Rand, wie schon der Filmstreifen auf Start) — per Negativ-Margin aus dem
   Container-Innenabstand herausgezogen, gleiche Technik wie .projekte-strip. */
.projekte-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px;
  margin-inline: calc(-1 * (var(--gutter) - var(--gutter-tiles)));
}
@media (max-width: 900px){ .projekte-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .projekte-grid{ grid-template-columns: 1fr; } }

/* Fußtext unter dem Kachel-Grid — gleiche Größe/Farbe wie .page-head p
   (der Text über den Kacheln) und gleicher Abstand (clamp 40-56px), nur
   umgekehrt als margin-top statt margin-bottom. */
.projekte-footnote{
  max-width: 640px; margin: clamp(40px, 5vw, 56px) auto 0;
  color: var(--text); font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}
.projekte-footnote a{ color: var(--gold); }
.projekte-footnote a:hover{ text-decoration: underline; }

.projekt-kachel{
  /* 16:9 fest, weil Daniel alle Vorschaubilder/Thumbnails in dem Format anlegt —
     nicht mehr das schmalere 250/152 von vorher. */
  position: relative; display: block; aspect-ratio: 16/9; overflow: hidden;
  background: var(--bg-alt);
}
.projekt-kachel img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.projekt-kachel:hover img,
.projekt-kachel:focus-visible img{ transform: scale(1.06); }
.projekt-kachel-text{
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent 85%);
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.projekt-kachel:hover .projekt-kachel-text,
.projekt-kachel:focus-visible .projekt-kachel-text{ opacity: 1; transform: translateY(0); }
.projekt-kachel-title{
  color: #fff; font-size: calc(15px * var(--type-scale)); letter-spacing: 0.02em;
}
/* Unterzeile aus dem Manifest, in der Kachel etwas kleiner/blasser als der
   Titel — gleiches Prinzip wie auf der Projekt-Detailseite, nur kompakter. */
.projekt-kachel-lead{
  color: rgba(255,255,255,.72); font-size: calc(12px * var(--type-scale));
  letter-spacing: 0.01em;
}

/* =========================== EINZELNE PROJEKTSEITE =========================== */
/* Projekttitel können deutlich länger sein als "Kontakt" — etwas breiterer
   Rahmen, damit nicht jeder zweite Titel unnötig umbricht. */
/* Projektseiten lesen sich komplett linksbündig (Titel, Unterzeile, Fließtext,
   Zurück-Link) statt zentriert wie bei Kontakt — passt besser zu längeren
   Texten und zum darunterliegenden, ebenfalls linksbündigen Medienblock. */
.projektseite .page-head{ max-width: 820px; text-align: left; }
.projekt-back{ margin-bottom: 18px !important; text-align: left; }
/* Zweites "Alle Projekte" unter dem letzten Medienblock, damit man ein
   Projekt durchklicken und danach direkt wieder zurück zur Übersicht kann,
   ohne erst wieder nach oben zu scrollen. Gleiche Breite/Ausrichtung wie
   .projekt-medien darüber, nur mit Abstand nach oben statt unten. */
.projekt-back--ende{ max-width: 980px; margin: clamp(32px, 4vw, 48px) auto 0 !important; }
.projekt-back a{ color: var(--text-muted); font-size: calc(15px * var(--type-scale)); }
.projekt-back a:hover{ color: var(--gold); }
/* Optionale Unterzeile aus dem Manifest ("Unterzeile:") — kurzer, etwas
   größerer Zwischentext/Claim zwischen Titel und dem eigentlichen
   (kleineren) Fließtext. Gleiches Konzept wie Überschrift/Statement auf
   der Über-3DGrafix-Seite, hier nur einzeilig fürs Projekt gedacht. */
.page-head .projekt-lead{
  color: var(--text); text-align: left; margin: 0 0 22px;
  font-size: calc(var(--fs-copy) * var(--type-scale)); line-height: var(--lh-copy);
}
/* Fließtext-Absätze: kleiner Schriftgrad, wie überall sonst auf der Site
   (Leistungen-Karten, Über-3DGrafix-History) — nicht die größere
   .page-head p-Größe, die für Kontakt/Intro-Sätze gedacht ist.
   (Selektor mit ".page-head" davor, weil ".page-head p" sonst wegen
   höherer Spezifität die kleinere Schriftgröße überschreiben würde.) */
.page-head .projekt-copy{
  color: var(--text); text-align: left; margin: 0 0 16px;
  font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
}
.projekt-copy:last-child{ margin-bottom: 0; }

.projekt-medien{
  max-width: 980px; margin: 0 auto; text-align: left;
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px);
}
.projekt-block--gross img,
.projekt-block--video video{
  width: 100%; display: block; background: var(--bg-deep);
}
.projekt-bild-trigger{
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.projekt-block--gross .projekt-bild-trigger img{ transition: opacity .3s var(--ease); }
.projekt-block--gross .projekt-bild-trigger:hover img{ opacity: .88; }

/* =========================== IMPRESSUM / DATENSCHUTZ =========================== */
/* Gleiches Grundgerüst wie die Projektseite: linksbündiger Fließtext statt
   zentriert, Haupttitel bleibt die normale .page-head h1 (gold, Versalien —
   site-weite Grundregel, siehe Kommentar weiter oben). Zwischenüberschriften
   innerhalb des Textes (Datenschutz hat davon viele) bewusst NICHT gold,
   sondern normaler heller Text wie der Rest — nur der große Seitentitel
   oben ist farbig, wie von Daniel gewünscht. */
.rechtsseite .page-head{ max-width: 820px; text-align: left; }
.rechts-copy{ max-width: 820px; margin: 0 auto; text-align: left; }
.rechts-copy p{
  color: var(--text); margin: 0 0 16px;
  font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
}
.rechts-copy p:last-child{ margin-bottom: 0; }
.rechts-copy h2{
  color: var(--text); font-weight: 400; margin: 40px 0 14px;
  font-size: calc(24px * var(--type-scale)); line-height: 1.3;
}
.rechts-copy h2:first-child{ margin-top: 0; }
.rechts-copy h3{
  color: var(--text); font-weight: 400; margin: 26px 0 10px;
  font-size: calc(19px * var(--type-scale)); line-height: 1.3;
}
.rechts-copy ul{
  margin: 0 0 16px; padding-left: 22px;
  color: var(--text); font-size: calc(var(--fs-body) * var(--type-scale)); line-height: var(--lh-body);
}
.rechts-copy li{ margin-bottom: 6px; }
.rechts-copy a{ color: var(--gold); text-decoration: underline; }
.rechts-copy a:hover{ color: var(--text); }
.rechts-adresse{ margin: 0 0 16px; }
.rechts-adresse p{ margin: 0 0 4px; }

.projekt-kacheln{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px){ .projekt-kacheln{ grid-template-columns: repeat(2, 1fr); } }
.projekt-kacheln .projekt-bild-trigger img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: opacity .3s var(--ease);
}
.projekt-kacheln .projekt-bild-trigger:hover img{ opacity: .82; }

/* =========================== LIGHTBOX =========================== */
.lightbox{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.94);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; }
.lightbox-img{ max-width: 88vw; max-height: 84vh; object-fit: contain; }
.lightbox-close,
.lightbox-nav{
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  line-height: 1; transition: color .25s var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover{ color: var(--gold); }
.lightbox-close{ top: 22px; right: 26px; font-size: 26px; }
.lightbox-nav{ top: 50%; transform: translateY(-50%); font-size: 56px; font-weight: 100; padding: 0 14px; }
.lightbox-prev{ left: 10px; }
.lightbox-next{ right: 10px; }
@media (max-width: 700px){
  .lightbox-nav{ font-size: 38px; padding: 0 6px; }
  .lightbox-prev{ left: 2px; }
  .lightbox-next{ right: 2px; }
}

/* =========================== FOOTER =========================== */
.site-footer{ background: var(--bg); }
/* 3-Spalten-Grid statt space-between-Flex: nur so bleibt die Adresse (Spalte 2)
   wirklich mittig im Footer, unabhängig davon, wie breit Logo bzw. die rechte
   Social+Legal-Gruppe gerade sind (bei Flex mit ungleich breiten Außenspalten
   rutscht die Mitte sonst optisch zur schmaleren Seite). */
.footer-top{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 32px;
  background: var(--bg-alt); border-top: 1.5px solid var(--gold);
  padding: 40px var(--gutter);
}
.footer-logo{ justify-self: start; }
.footer-contact{ justify-self: center; text-align: center; }
.footer-contact p{
  font-size: calc(var(--fs-footer) * var(--type-scale)); line-height: var(--lh-footer);
  color: var(--text); margin-bottom: 6px;
}
/* Höhere Spezifität nötig, sonst gewinnt die allgemeine ".footer-contact p"-
   Regel über die Farbe — genau das war der Grund, warum "3DGRAFIX" bisher
   hell statt orange erschien. */
.footer-contact p.footer-label{ color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.footer-contact a:hover{ color: var(--gold); }
/* Social-Icons + Impressum/Datenschutz als eine rechtsbündige Gruppe.
   align-self:stretch macht diese Spalte so hoch wie die Adress-Spalte
   (die Reihe ist sonst wegen .footer-top{align-items:start} nur so hoch
   wie der eigene Inhalt) — erst dadurch kann justify-content:space-between
   die Social-Icons oben und Impressum/Datenschutz unten bündig mit der
   Adresse ausrichten. */
.footer-right{
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 14px;
  justify-self: end; align-self: stretch;
}
.footer-social{ display: flex; gap: 14px; }
.footer-social a{
  width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.footer-social a svg{ width: 15px; height: 15px; fill: currentColor; }
.footer-social a:hover{ border-color: var(--gold); color: var(--gold); }
/* Impressum/Datenschutz: laut PDF zwei gestapelte Zeilen, gleiche Schrift/Größe
   wie die Adresse, rechtsbündig zusammen mit den Social-Icons. */
.footer-legal{ display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.footer-legal a{
  font-size: calc(var(--fs-footer) * var(--type-scale)); line-height: var(--lh-footer);
  color: var(--text);
}
.footer-legal a:hover{ color: var(--gold); }
.footer-bottom{
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding: 22px var(--gutter); font-size: 12.5px; color: var(--text-faint);
}
@media (max-width: 760px){
  .footer-top{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-logo, .footer-contact, .footer-right{ justify-self: center; }
  .footer-right{ align-items: center; }
  .footer-legal{ align-items: center; }
}