/* =========================================================
   Events by Niclas – Startseite im Stil von weddingsbytrey.com
   Design-Breite 1440 px. Alle Desktop-Positionen sind aus der Vorlage
   gemessen und stehen als Inline-Stile im HTML.
   1024–1439 px: die Bühne wird per JS proportional verkleinert.
   Unter 1024 px greift das Mobil-Layout am Ende dieser Datei.
   ========================================================= */

/* ---------- Schriften (alle lokal, keine externen Font-Server) ----------
   Überschriften Poppins 600/700, Fließtext Figtree, Labels JetBrains Mono
   (Schriftwahl wie outboundleads.com). Die Größen im HTML sind darauf abgestimmt. */
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-500.woff2?v=a09f2fcc") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-500-italic.woff2?v=88042d51") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-600.woff2?v=72993ddd") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-700.woff2?v=25b0e113") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-400.woff2?v=0420badb") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-400-italic.woff2?v=e2188321") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-500.woff2?v=0420badb") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-500-italic.woff2?v=e2188321") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-600.woff2?v=0420badb") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-500.woff2?v=22c20b7a") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-600.woff2?v=22c20b7a") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Farben und Grundwerte ---------- */
:root {
  --braun: #251F18;        /* Textfarbe der Vorlage */
  --braun-2: #2E2D2D;      /* Zitate, "Hey, ich bin" */
  --dunkel: #0D191C;       /* Leistungs-Sektion */
  --creme: #FCFBF9;        /* Investment, zweite Stimme */
  --blaugrau: #869D9F;     /* Footer und Menü */
  --weiss: #ffffff;
  --linie: rgba(37, 31, 24, .2);
  --linie-hell: rgba(244, 242, 236, .5);
  --breite: 1440px;
}

* { box-sizing: border-box; }
/* overflow-x nur auf html: auf body würde es body zum Scroll-Container machen und damit jedes
   position: sticky auf der Seite abschalten (Header, klebende Überschrift, Portfolio, CTA-Text). */
html { background: var(--weiss); overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--braun);
  font-family: "Figtree", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .8; }
p, h1, h2, h3 { margin: 0; }

/* ---------- Typografie-Klassen ---------- */
.serif  { font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; }
.xl     { font-weight: 200; }
.it     { font-family: "Poppins", sans-serif; font-style: italic; font-weight: inherit; }
.script { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; }
.gara   { font-family: "Figtree", sans-serif; font-style: italic; font-weight: 400; }
.rhd    { font-family: "JetBrains Mono", monospace; text-transform: uppercase; }
.p      { font-family: "Figtree", sans-serif; font-weight: 400; }

/* ---------- Layout-Bausteine ---------- */
/* Jede Sektion ist volle Breite; die Bühne darin ist 1440 px breit und zentriert.
   Alles in der Bühne wird absolut positioniert (wie in der Showit-Vorlage). */
.sec   { position: relative; width: 100%; }
.stage { position: relative; width: var(--breite); height: 100%; margin: 0 auto; }
.abs   { position: absolute; }

/* Bild-Container: fester Rahmen, Bild füllt ihn (object-fit: cover). */
.img { position: absolute; overflow: hidden; }
.img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Schwebende Bilder (data-scroll): das JS macht das Bild um 2 × Stärke höher als den Rahmen
   und verschiebt es beim Scrollen, damit die Bewegung keine Ränder zeigt. */
.img[data-scroll] img { will-change: transform; }

/* Vollflächiger Hintergrund mit Parallax (data-bg): Das Bild läuft mit halber Scrollgeschwindigkeit
   (Vorlage: Showit-Parallax 0,5). Während die Sektion den Viewport durchläuft, wandert das Bild um
   die Hälfte von (Viewport + Sektionshöhe) nach oben; genau um so viel ist es höher als die Sektion. */
.bg { position: absolute; inset: 0; overflow: hidden; }
.bg img { position: absolute; left: 0; top: 0; width: 100%; height: calc(150% + 50vh); object-fit: cover; object-position: 50% 50%; will-change: transform; }

/* Einblenden beim Scrollen, wie in der Vorlage: fadeIn 0,5 s ease-out, sobald das Element bis zur
   Unterkante im Viewport ist (bei hohen Elementen: sobald ein Drittel der Viewporthöhe sichtbar ist).
   data-reveal="1" dauert 1 s, data-reveal="marq" ist der Lauftext im Footer: er gleitet über 80 s
   von rechts herein und wird dabei immer langsamer (slideInRight, 80 s, wie in der Vorlage). */
[data-reveal] { opacity: 0; }
[data-reveal].is-visible { animation: fadeIn .5s ease-out both; }
[data-reveal="1"].is-visible { animation-duration: 1s; }
[data-reveal="marq"].is-visible { animation: slideInRight 80s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 1; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }

/* Linien */
.line { position: absolute; background: var(--linie); }

/* Buttons – exakt wie die Vorlage: 1 px Rahmen, 13 px 30 px Innenabstand, eckig. */
.btn {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid var(--braun);
  border-radius: 0;
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .15em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--braun);
  cursor: pointer;
  transition: border-color .5s, color .5s, background-color .5s;
}
.btn:hover { border-color: rgba(37, 31, 24, .7); color: rgba(37, 31, 24, .7); opacity: 1; }
.btn.pri { border-color: var(--weiss); color: var(--weiss); font-size: 12px; }
.btn.pri:hover { background: var(--weiss); color: var(--braun); border-color: var(--weiss); }
.btn.fill { background: var(--braun); color: var(--weiss); }
.btn.fill:hover { background: transparent; color: var(--braun); border-color: var(--braun); }

/* ---------- Header (klebt oben) ---------- */
.hdr {
  position: sticky; top: 0; z-index: 30;
  height: 53px; background: var(--weiss);
  border-bottom: 1px solid rgba(37, 31, 24, .15);
}
.hdr .nav { position: absolute; top: 17px; left: 394px; display: flex; gap: 56px; margin: 0; padding: 0; list-style: none; }
.hdr .nav a, .hdr .inq {
  font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 12px;
  letter-spacing: 1.2px; line-height: 21px; text-transform: uppercase; color: var(--braun);
}
.hdr .inq { position: absolute; top: 17px; right: 15px; }
.burger {
  position: absolute; top: 5px; left: 23px; width: 80px; height: 44px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.burger svg { width: 34px; height: 34px; fill: #595754; }

/* Menü-Overlay (Vorlage: Vollbild in Blaugrau) */
.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--blaugrau);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu a { font-family: "Poppins", sans-serif; font-weight: 200; font-size: 64px; line-height: 1.1; color: var(--weiss); }
.menu .close { position: absolute; top: 14px; right: 24px; border: 0; background: transparent; color: var(--weiss); font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
.menu .menu-mail { font-family: "Figtree", sans-serif; font-style: italic; font-size: 22px; margin-top: 24px; }

/* ---------- Sektionen ---------- */
.s-logo   { height: 221px; background: var(--weiss); overflow: hidden; }
.s-hero   { height: 900px; background: var(--weiss); }
.s-bio    { height: 710px; background: var(--weiss); }
.s-float  { height: 1054px; background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); overflow: hidden; }

/* Die Bio-Sektion klebt oben (Vorlage: locking "st"). Alle Sektionen danach liegen mit z-index 1
   darüber und schieben sich beim Scrollen über die Überschrift. Die Bilder-Sektion hat dafür den
   Verlauf von transparent (oben) nach weiß (unten): die schwebenden Bilder laufen über den Text,
   der dabei langsam ausgeblendet wird. */
.s-bio { position: sticky; top: 0; z-index: 0; }
.s-bio ~ .sec { z-index: 1; }

/* Sektionen mit Vollhöhe (Vorlage: nature "wH"): mindestens so hoch wie der Viewport, Inhalt mittig. */
.s-hero, .s-feat { min-height: 100vh; display: flex; align-items: center; }
.s-hero .stage, .s-feat .stage { height: 900px; }
.s-feat .bg, .s-feat .shade { z-index: 0; }
.s-feat .stage { z-index: 1; }
.cta-img { height: 100vh; min-height: 700px; }
.s-opt    { height: 396px; background: var(--weiss); }
.s-wwd    { height: 1117px; background: var(--dunkel); color: var(--weiss); }
.s-about  { height: 801px; background: linear-gradient(0deg, #ffffff 0%, var(--creme) 100%); }
.s-rev    { height: 541px; background: var(--weiss); }
.s-div    { height: 700px; background: var(--weiss); }
.s-ptitle { height: 228px; background: var(--weiss); }
.s-port   { height: 1560px; background: var(--weiss); }
.s-feat   { height: 900px; background: var(--braun); color: var(--weiss); }
.s-inv    { height: 868px; background: var(--creme); }
.s-rev2   { height: 402px; background: var(--creme); }
.s-cta    { height: 2714px; background: var(--braun); color: var(--weiss); }
.s-foot   { height: 1240px; background: var(--blaugrau); color: var(--weiss); overflow: hidden; }

/* Hero: Textebene liegt über den beiden Bildern */
.hero-txt { pointer-events: none; }

/* Portfolio: rechte Gruppe klebt beim Scrollen */
.stickgroup { position: sticky; top: 74px; width: 489px; height: 545px; }

/* Aktuelles Projekt: dunkler Verlauf über dem Hintergrund */
.shade { position: absolute; inset: 0; opacity: .7; background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%); }

/* CTA "Lass uns dein Event festhalten": Text klebt am Viewport, die drei Bilder laufen dahinter durch.
   Wie in der Vorlage bleibt der Text bis zum Seitenende oben stehen, und der Footer (z-index 9)
   schiebt sich darüber: Die Sektion reicht dafür um die Footerhöhe unter den Footer. */
.stickytext { position: sticky; top: 0; height: 0; z-index: 8; }
@media (min-width: 1024px) {
  .s-cta { height: auto; margin-bottom: -1240px; }
  .s-cta::after { content: ""; display: block; height: 1240px; }
  .s-foot { z-index: 9; }
}
.stickytext .inner {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh; min-height: 900px;
  background: linear-gradient(0deg, rgba(37, 31, 24, .8) 0%, rgba(37, 31, 24, 0) 100%);
}
.stickytext .stage { height: 900px; }
.cta-img { position: relative; width: 100%; overflow: hidden; }

/* Footer */
.flink {
  position: absolute; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 15px;
  letter-spacing: 2.25px; line-height: 24px; text-transform: uppercase; color: var(--weiss);
}
.s-foot .line { background: var(--linie-hell); }
/* „erstellt von webdesignbyniclas“ unten links, klein und hell, Logo weiß */
.foot-credit { display: flex; align-items: center; gap: 6px; font-family: "Figtree", sans-serif; font-size: 13px; line-height: 21px; color: var(--weiss); opacity: .75; white-space: nowrap; }
.foot-credit:hover { opacity: 1; }
.foot-credit img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.foot-credit .fc-von { font-size: 11px; }

/* ---------- Portfolio-Seite (Vorlage: weddingsbytrey.com/portfolio) ----------
   Geometrie der Vorlage im 1200er-Raster, hier um 120 px nach rechts verschoben (Bühne 1440).
   Alle Bilder Querformat; die vier Projektblöcke zeigen beide Bildplätze der Vorlage gestapelt. */
.p-head  { height: 86px; background: var(--weiss); }
.p-hero  { height: 387px; background: transparent; position: sticky; top: 0; z-index: 0; }
.p-hero ~ .sec { z-index: 1; }
.p-stag1 { height: 900px; background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }
.p-stag2 { height: 1600px; background: var(--weiss); }
.p-stag1, .p-stag2 { overflow-x: clip; }  /* Bilder ragen wie in der Vorlage nach oben in den Nachbarblock, aber nicht über den rechten Rand */
.p-feat  { height: 759px; background: var(--weiss); }
.p-rev   { height: 471px; background: var(--weiss); }
.p-show  { height: 870px; min-height: 100vh; background: var(--braun); color: var(--weiss); display: flex; align-items: center; overflow: hidden; }
.p-show .stage { height: 870px; z-index: 1; }
.p-where { height: 988px; background: var(--weiss); }
.p-where .nr { color: var(--braun); }
.p-cta   { height: 700px; min-height: 100vh; background: var(--braun); color: var(--weiss); display: flex; align-items: center; }
.p-cta .stage { height: 700px; z-index: 1; }
.p-cta .bg { z-index: 0; }

/* Diashow: die Bilder überblenden sich, jedes Bild 5 s, Gesamtzyklus = Anzahl × 5 s.
   Die Verzögerung je Bild steht inline (animation-delay). 70 % Deckkraft wie in der Vorlage. */
.slides { position: absolute; inset: 0; z-index: 0; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; animation: dia 25s ease-in-out infinite both; }
.slides img.is-static { opacity: .7; animation: none; }
@keyframes dia { 0% { opacity: 0; } 5% { opacity: .7; } 20% { opacity: .7; } 25% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- Leistungen-Seite (Vorlage: weddingsbytrey.com/services) ----------
   Geometrie der Vorlage +120 px auf der 1440er-Bühne, Bilder im Querformat. Die ersten beiden
   Leistungen kleben 20 px unter dem oberen Rand, die nächste schiebt sich mit einer Linie darüber
   (Vorlage: locking st, offset 20). „Meine Werte“ klebt links, die Werte rechts laufen durch. */
.v-hero  { height: 900px; background: var(--braun); color: var(--weiss); }
.v-hero .bg { z-index: 0; }
.v-hero .shade { position: absolute; left: 0; top: 373px; width: 100%; height: 527px; z-index: 1; opacity: .5;
  background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%); }
.v-hero .stage { z-index: 2; }
.v-appr  { height: 743px; background: var(--weiss); }
.v-known { height: 660px; background: var(--weiss); }
.v-rev   { height: 361px; background: var(--blaugrau); color: var(--weiss); }
.v-opt   { height: 370px; background: var(--weiss); }
.v-full  { height: 735px; background: var(--weiss); }
.v-svc   { height: 800px; min-height: 100vh; background: var(--weiss); display: flex; align-items: center; }
.v-svc .stage { height: 800px; }
.v-svc1, .v-svc2 { position: sticky; top: 20px; }
.v-svc .nr { font-weight: 400; }  /* Ziffer zentriert unter „No.“ */
.v-core  { height: 984px; background: var(--weiss); position: sticky; top: 0; }
.v-core .frame { background: var(--braun); }
.v-values { height: 344px; background: transparent; }
.v-values .wipe { background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); }
.v-values .nr { color: var(--blaugrau); }
/* Stapelreihenfolge: jeder spätere Block liegt über dem klebenden davor */
.sec.v-svc1 { z-index: 1; }
.v-svc1 ~ .sec { z-index: 2; }
.v-svc2 ~ .sec { z-index: 3; }
.sec.v-core { z-index: 4; }
.v-core ~ .sec { z-index: 5; }

/* ---------- Projektseiten (Vorlage: Galerieseiten wie claudine-and-austin) ----------
   Hero 636 px mit Verlauf oben, dann schiebt sich das Bild rechts über den Hero (top -86 px), links
   Brotkrumen, Einleitung, Linie, Text; rechts unter den Bildern die Details. Die Galerie ist ein Raster
   mit drei Spalten und 40 px Abstand wie die Kachelgalerie der Vorlage, alle Bilder im Querformat. */
.g-hero  { height: 636px; background: var(--braun); color: var(--weiss); }
.g-hero .bg { z-index: 0; }
.g-hero .shade { position: absolute; left: 0; top: 0; width: 100%; height: 223px; z-index: 1; opacity: .5;
  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%); }
.g-hero .stage { z-index: 2; }
.g-intro { height: 1101px; background: var(--weiss); z-index: 1; }
.g-rev   { height: 402px; background: var(--weiss); }
.g-gal   { background: var(--weiss); padding: 0 0 40px; }
.g-gal .stage { height: auto; padding: 0 40px; }
.g-gal .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.g-gal .grid .img { position: relative; aspect-ratio: 3 / 2; }
.g-gal .back { margin: 64px 0 0; }

/* ---------- Events-Seite (Vorlage: weddingsbytrey.com/weddings) ---------- */
.e-hero  { height: 885px; background: var(--braun); color: var(--weiss); }
.e-hero .half, .e-cta .half { z-index: 0; }
.e-hero .shade { position: absolute; left: 0; top: 0; width: 100%; height: 303px; z-index: 1; opacity: .7;
  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%); }
.e-hero .stage > .abs, .e-cta .stage > .abs { z-index: 2; }
.e-why   { height: 657px; background: var(--weiss); }
.e-three { height: 520px; background: var(--weiss); }
.e-full1 { height: 686px; background: var(--weiss); }
.e-artist { height: 917px; background: var(--weiss); }
.e-dhead { height: 204px; background: var(--weiss); }
.e-offer1 { height: 630px; background: var(--weiss); }
.e-offer2 { height: 665px; background: var(--weiss); }
.e-offer3 { height: 655px; background: var(--weiss); }
.e-how   { background: var(--blaugrau); color: var(--weiss); }
.e-how .line { background: var(--linie-hell); }
.e-how1  { height: 733px; }
.e-how2  { height: 534px; }
.e-how3  { height: 631px; }
.e-full2 { height: 756px; background: var(--weiss); }
.e-revs  { height: 1272px; background: var(--weiss); }
.e-revs .gara { display: block; margin-top: 14px; font-size: 22px; }
.e-stand { height: 796px; background: var(--creme); }
.e-stand .ring svg { width: 100%; height: 100%; display: block; }
.e-start { height: 835px; background: var(--weiss); }
.e-faq   { height: 1px; background: transparent; position: sticky; top: 0; z-index: 0; }
.e-faq ~ .sec { z-index: 1; }
.e-faqs  { height: 1506px; background: transparent; }
.e-faqs .q { margin: 0 0 10px; }
.e-faqs .a { margin: 0 0 44px; }
.e-cta   { height: 700px; min-height: 100vh; background: var(--braun); color: var(--weiss); display: flex; align-items: center; }
.e-cta .stage { height: 700px; }
.e-cta .half { height: 100% !important; }

/* ---------- Über-mich-Seite (Vorlage: weddingsbytrey.com/about) ---------- */
.u-hero  { height: 900px; background: var(--braun); color: var(--weiss); }
.u-hero .bg { z-index: 0; }
.u-hero .shade { position: absolute; left: 0; top: 0; width: 100%; height: 303px; z-index: 1; opacity: .7;
  background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%); }
.u-hero .stage { z-index: 2; }
.u-intro { height: 912px; background: var(--weiss); }
.u-rev   { height: 449px; background: var(--weiss); }
.u-imgs  { height: 640px; background: var(--weiss); }
.u-artist { height: 1303px; background: var(--weiss); }
.u-artist .sig { line-height: 1; }
.u-facts { height: 755px; background: var(--creme); }
.u-facts .nr { color: var(--braun); }
.u-focus { height: 1099px; background: var(--weiss); }
.u-more  { height: 700px; background: var(--weiss); }
.u-more a.img { display: block; }
.u-more a.img img { transition: transform .6s ease; }
.u-more a.img:hover img { transform: scale(1.03); }
.u-cta   { height: 543px; background: var(--weiss); }
.u-full  { height: 644px; background: var(--weiss); }

/* ---------- Anfrage-Seite (Vorlage: weddingsbytrey.com/inquire) ----------
   Hero 700 px mit Vollbild-Foto, darunter der Formularblock in Creme: zwei Querformate links,
   rechts der Einleitungstext und das Formular. Das Formular steht im Textfluss, damit der Block mit
   ihm wächst; Bilder und Text sind wie in der Vorlage absolut gesetzt. */
.a-hero { height: 700px; background: var(--braun); color: var(--weiss); }
.a-hero .bg { z-index: 0; }
.a-hero .stage { z-index: 1; }
.a-form { min-height: 992px; background: var(--creme); }
.a-form .stage { height: auto; padding: 288px 0 96px; }
.a-form .form { margin: 0 0 0 663px; width: 595px; }
.a-form .hint { font-family: "Figtree", sans-serif; font-style: italic; font-size: 22px; margin: 8px 0 0; }
.a-form .hint a { border-bottom: 1px solid var(--linie); }

/* ---------- Unterseiten (Impressum, Datenschutz) ----------
   Diese Seiten laufen als normaler Textfluss, nicht auf der 1440-px-Bühne. */
.s-flow { background: var(--weiss); }
.flow { max-width: 760px; margin: 0 auto; padding: 120px 20px 140px; }
.flow .eyebrow { font-family: "Figtree", sans-serif; font-style: italic; font-size: 26px; line-height: 1.2; text-align: center; }
.flow h1 { font-family: "Poppins", sans-serif; font-weight: 200; font-size: 96px; line-height: 1; letter-spacing: -1px; text-transform: uppercase; text-align: center; margin: 18px 0 40px; }
.flow .lead { font-size: 20px; line-height: 1.6; text-align: center; max-width: 620px; margin: 0 auto; }
.flow .hint { font-family: "Figtree", sans-serif; font-style: italic; font-size: 22px; text-align: center; margin: 32px auto 0; max-width: 560px; }
.flow .hint a { border-bottom: 1px solid var(--linie); }

/* Anfrageformular – Linienfelder wie in der Showit-Vorlage */
.form { margin-top: 72px; display: grid; gap: 34px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; }
.field label { display: block; font-family: "Poppins", sans-serif; font-weight: 300; font-size: 17px; line-height: 1.35; margin-bottom: 4px; }
.field label:has(+ :required)::after, .field label:has(+ select:required)::after { content: " *"; }
.field label span { text-transform: none; letter-spacing: 0; opacity: .6; }
.field input, .field textarea, .field select {
  width: 100%; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0;
  background: transparent; padding: 10px 0; margin: 0;
  font-family: "Figtree", sans-serif; font-size: 18px; line-height: 1.5; color: var(--braun);
  -webkit-appearance: none; appearance: none;
}
.field select { cursor: pointer; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23251F18' stroke-width='1.2'/></svg>") no-repeat right center; padding-right: 24px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--braun); }
.field input::placeholder, .field textarea::placeholder { color: rgba(37, 31, 24, .4); }
.form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 8px; }
.form .note { font-size: 13px; line-height: 1.6; opacity: .75; max-width: 420px; }
.form .status { font-family: "Figtree", sans-serif; font-style: italic; font-size: 20px; min-height: 1.4em; }
.form .status.is-error { color: #8a2c2c; }
/* Honeypot gegen Spam: für Menschen unsichtbar */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rechtstexte */
.legal h2 { font-family: "Poppins", sans-serif; font-weight: 300; font-size: 34px; line-height: 1.15; margin: 56px 0 14px; }
.legal h3 { font-family: "Figtree", sans-serif; font-style: italic; font-weight: 500; font-size: 22px; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; margin: 0 0 12px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal a { border-bottom: 1px solid var(--linie); }
.legal .todo { background: #FFF6D6; padding: 0 4px; }
.legal .stand { font-family: "Figtree", sans-serif; font-style: italic; opacity: .8; margin-top: 48px; }

/* Weniger Bewegung auf Wunsch des Systems */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal].is-visible { opacity: 1; animation: none; transform: none; }
  .s-bio { position: relative; }
  .img[data-scroll] img, .bg img { transform: none !important; }
}

/* =========================================================
   MOBIL-LAYOUT (unter 1024 px)
   Die Vorlage (Showit) hat ein eigenes Mobil-Layout; hier wird die
   Desktop-Bühne aufgelöst: alle absolut positionierten Elemente
   laufen untereinander. Weil die Desktop-Positionen als Inline-Stile
   im HTML stehen, brauchen die Überschreibungen !important.
   ========================================================= */
@media (max-width: 1023px) {
  body { font-size: 17px; }

  /* Bühne wird zum Fluss */
  .sec { height: auto !important; }
  .stage { width: 100% !important; height: auto !important; padding: 64px 20px; }
  .abs, .img, .line {
    position: relative !important;
    left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; inset: auto !important;
    width: auto !important; height: auto !important;
    margin: 0 0 20px;
  }
  .stage .abs { text-align: center !important; white-space: normal !important; }
  .line { display: none; }
  .img { aspect-ratio: 3 / 2; }
  .img.portrait { aspect-ratio: 3 / 4; }
  .s-hero, .s-feat { min-height: 0; display: block; }
  .img img { top: 0; height: 100%; transform: none !important; }
  .m-hide { display: none !important; }

  /* Mobile Schriftgrößen (überschreiben die Inline-Werte) */
  .m-h1   { font-size: clamp(30px, 10.6vw, 64px) !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; margin: 0; overflow: hidden; }
  .m-h2   { font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.05 !important; letter-spacing: -.01em !important; }
  .m-h3   { font-size: clamp(38px, 11.5vw, 56px) !important; line-height: 1 !important; letter-spacing: -.01em !important; }
  .m-quote{ font-size: clamp(24px, 7.2vw, 32px) !important; line-height: 1.15 !important; }
  .m-eye  { font-size: 20px !important; line-height: 1.3 !important; }
  .m-lead { font-size: 18px !important; line-height: 1.6 !important; }
  .m-p    { font-size: 17px !important; line-height: 1.65 !important; }
  .m-link { font-size: 13px !important; line-height: 1.6 !important; letter-spacing: .18em !important; margin-bottom: 8px; }
  .m-small{ font-size: 13px !important; line-height: 1.5 !important; }
  .m-flex { display: flex !important; flex-direction: column; align-items: center; gap: 14px; }

  /* Header */
  .hdr { height: 53px !important; }
  .hdr .stage { padding: 0; }
  .hdr .nav { display: none; }
  .menu { gap: 18px; }
  .menu a { font-size: 40px; }
  .menu .menu-mail { font-size: 18px; }

  /* Logo-Zeile */
  .s-logo .stage { padding: 36px 20px 24px; }
  .s-logo .abs { margin: 0; }

  /* Hero: ein Bild, Text liegt darüber */
  .s-hero .stage { padding: 0; }
  .s-hero .img { aspect-ratio: 1 / 1; margin: 0; }
  .s-hero .hero-txt {
    position: absolute !important; inset: 0 !important; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
  }
  .s-hero .hero-txt .abs { margin: 0 0 14px; }
  .s-hero .hero-txt img { width: 84px !important; height: auto !important; margin-bottom: 24px; }
  .s-hero .hero-txt .m-h2 { font-size: clamp(30px, 8.5vw, 40px) !important; }

  /* Bio */
  .s-bio .stage { padding: 72px 20px 40px; }

  /* Schwebende Bilder: großes Bild oben, zwei kleine darunter */
  .s-float .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 20px 48px; }
  .s-float .img { margin: 0; }
  .s-float .img:first-child { grid-column: 1 / -1; }

  /* Drei Optionen */
  .s-opt .stage { padding: 24px 20px 40px; }
  .s-opt .m-p { margin-bottom: 40px; }

  /* Leistungen: linksbündig mit Linien */
  .s-wwd .stage { padding: 88px 24px 96px; }
  .s-wwd .stage .abs { text-align: left !important; }
  .s-wwd .m-eye { margin-bottom: 36px; }
  .s-wwd .m-h3 { margin: 0; }
  .s-wwd .line { display: block; width: 100% !important; height: 1px !important; margin: 18px 0 22px; }
  .s-wwd .m-p { margin: 40px 0 36px; }
  .s-wwd .btn { margin: 0; }

  /* Über mich */
  .s-about .stage { padding: 56px 20px 64px; }
  .s-about .img { margin-bottom: 40px; }
  .s-about .m-h2 { margin-bottom: 24px; }
  .s-about .btn { margin: 8px 0 0; }

  /* Stimmen */
  .s-rev .stage, .s-rev2 .stage { padding: 72px 24px; }
  .s-rev .m-quote, .s-rev2 .m-quote { margin-bottom: 28px; }

  /* Vollbild-Foto */
  .s-div { height: 62vh !important; }

  /* Portfolio */
  .s-ptitle .stage { padding: 64px 20px 8px; }
  .s-port .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 20px 64px; }
  .s-port .stage > .abs { grid-column: 1 / -1; margin-bottom: 20px; }
  .s-port .stickgroup { position: relative; top: auto; width: auto; height: auto; }
  .s-port .stickgroup .img { margin-bottom: 24px; }
  .s-port .stickgroup .btn { margin: 4px 0 20px; }
  .s-port .stage > .img { aspect-ratio: 3 / 2; margin: 0; }

  /* Aktuelles Projekt: Text unten über dem Bild */
  .s-feat .shade { position: absolute !important; inset: 0 !important; margin: 0; }
  .s-feat .stage { padding: 62vh 24px 56px; }
  .s-feat .stage .abs { text-align: left !important; }
  .s-feat .m-h2 { font-size: clamp(24px, 7vw, 36px) !important; }

  /* Investment */
  .s-inv .stage { padding: 56px 20px 64px; }
  .s-inv .img { margin-bottom: 40px; }
  .s-inv .m-h2 { margin-bottom: 24px; }
  .s-inv .m-flex .note { width: auto !important; text-align: center; }

  /* CTA: kein Sticky, ein Bild */
  .s-cta .stickytext { position: relative; height: auto; }
  .s-cta .stickytext .inner { position: relative; width: auto; height: auto; min-height: 0; background: var(--braun); }
  .s-cta .stage { padding: 88px 24px 72px; }
  .s-cta .m-it { font-size: 32px !important; line-height: 1.1 !important; margin-bottom: 6px; }
  .s-cta .m-h3 { margin-bottom: 26px; }
  .s-cta .m-p { margin-bottom: 32px; }
  .s-cta .cta-img { height: 70vh !important; min-height: 0; }

  /* Footer */
  .s-foot .stage { padding: 56px 20px 40px; }
  .s-foot .marq { font-size: clamp(30px, 11.5vw, 64px) !important; line-height: 1 !important; white-space: nowrap !important; margin: 0 -20px 32px; }
  .s-foot .foot-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 36px; }
  .s-foot .foot-fotos .img { margin: 0; aspect-ratio: 3 / 2; }
  .s-foot .m-h3 { font-size: 40px !important; margin-bottom: 24px; }
  .s-foot .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 48px 0 8px; text-align: center; }
  .s-foot .foot-cols .colhead { grid-column: 1 / -1; font-size: 26px !important; line-height: 1.2 !important; margin: 24px 0 8px; }
  .s-foot .flink { position: relative !important; left: auto !important; top: auto !important; display: block; font-size: 13px; letter-spacing: .18em; }
  .s-foot .foot-about { grid-column: 1 / -1; margin: 0 0 12px; }
  .s-foot .foot-ig { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 10px; }
  .s-foot .foot-ig svg { position: static !important; width: 18px !important; height: 18px !important; margin: 0; }
  .s-foot .foot-ig .flink { display: inline; }
  .s-foot .foot-logo { width: 90px !important; margin: 40px auto 20px; }
  .s-foot .foot-more { display: block; font-size: 20px !important; text-align: center !important; margin: 0 0 10px; }
  .s-foot .foot-copy { margin: 32px 0 0; }
  .s-foot .foot-credit { position: static !important; justify-content: center; margin: 14px 0 0; height: auto !important; }

  /* Portfolio-Seite */
  .p-head .stage { padding: 28px 20px 8px; }
  .p-head .abs { margin: 0; font-size: 22px !important; line-height: 1.2 !important; }
  .p-hero .stage { padding: 24px 20px 32px; }
  .p-hero .abs { margin: 0; }
  .p-stag1 .stage, .p-stag2 .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 20px 48px; }
  .p-stag1 .img, .p-stag2 .img { margin: 0; }
  .p-stag1 .img:first-child, .p-stag2 .img:first-child, .p-stag2 .img:nth-child(4), .p-stag2 .img:nth-child(8) { grid-column: 1 / -1; }
  .p-stag2 .stage > p { grid-column: 1 / -1; margin: 24px 0 0; text-align: left !important; }
  .p-feat .stage { padding: 48px 20px 56px; }
  .p-feat .img { margin-bottom: 12px; }
  .p-feat .img + .img { margin-bottom: 36px; }
  .p-feat .stage .abs { text-align: left !important; }
  .p-feat .m-h2 { margin-bottom: 20px; }
  .p-feat .btn { margin: 8px 0 0; }
  .p-rev .stage { padding: 64px 24px 56px; }
  .p-rev .m-quote { margin-bottom: 28px; }
  .p-show, .p-cta { min-height: 0; display: block; }
  .p-show .stage { padding: 60vh 24px 56px; }
  .p-show .stage .abs { text-align: left !important; }
  .p-show .m-h2 { font-size: clamp(24px, 7vw, 36px) !important; }
  .p-where .stage { padding: 64px 20px 56px; }
  .p-where .m-eye { margin-bottom: 28px; }
  .p-where .m-h3 { margin: 0 0 4px; }
  .p-where .nr { margin: 0 0 22px; }
  .p-where .m-flex { margin-top: 24px; }
  .p-cta .stage { padding: 96px 24px 88px; }
  .p-cta .m-h2 { font-size: clamp(24px, 7.4vw, 34px) !important; }
  .p-cta .bg { position: absolute !important; inset: 0 !important; margin: 0; }

  /* Leistungen-Seite */
  .v-hero, .v-svc, .v-core { min-height: 0; display: block; position: relative !important; top: auto; }
  .v-hero .stage { padding: 52vh 24px 56px; }
  .v-hero .bg { position: absolute !important; inset: 0 !important; margin: 0; }
  .v-hero .shade { position: absolute; top: 30%; height: 70%; }
  .v-hero .logo { display: none; }
  .v-hero .stage .abs { text-align: left !important; }
  .v-hero .m-eye { margin-bottom: 14px; }
  .v-hero .m-h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  .v-appr .stage { padding: 64px 24px 56px; }
  .v-appr .m-link { margin-bottom: 20px; }
  .v-appr .m-h1 { white-space: normal !important; font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.05 !important; margin-bottom: 24px; }
  .v-known .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 48px; }
  .v-known .img { margin: 0; }
  .v-known .img:first-child, .v-known p { grid-column: 1 / -1; }
  .v-known p { margin: 20px 0 0; text-align: left !important; }
  .v-rev .stage { padding: 56px 24px 48px; }
  .v-rev .m-quote { margin-bottom: 24px; }
  .v-opt .stage { padding: 56px 20px 40px; }
  .v-opt .m-link { margin-bottom: 24px; }
  .v-opt h3 { font-size: 28px !important; line-height: 1.1 !important; margin: 0 0 10px; }
  .v-opt p + h3 { margin-top: 28px; }
  .v-full { height: 62vw !important; }
  .v-full .bg { position: absolute !important; inset: 0 !important; margin: 0; }
  .v-svc .stage { padding: 48px 20px 56px; }
  .v-svc .stage .abs, .v-values .stage .abs { text-align: left !important; }
  .v-svc .nr { margin: 0 0 12px; }
  .v-svc .img { margin: 0 0 28px; }
  .v-svc .m-h2 { margin-bottom: 20px; }
  .v-svc .btn { margin-top: 8px; }
  .v-core .stage { padding: 64px 20px 0; }
  .v-core .frame { display: none; }
  .v-core .m-h1 { white-space: normal !important; line-height: 1 !important; margin-bottom: 28px; }
  .v-values .stage { padding: 40px 20px 56px; }
  .v-values .nr { margin: 28px 0 6px; text-align: left !important; }
  .v-values .m-h3 { font-size: 30px !important; line-height: 1.15 !important; margin: 0 0 12px; }

  /* Projektseiten */
  .g-hero { min-height: 0; }
  .g-hero .stage { padding: 88px 24px 56px; }
  .g-hero .bg { position: absolute !important; inset: 0 !important; margin: 0; }
  .g-hero .shade { position: absolute; }
  .g-hero .logo { display: none; }
  .g-hero .stage .abs { text-align: left !important; }
  .g-hero .m-h1 { white-space: normal !important; margin: 6px 0 0; }
  .g-intro .stage { padding: 12px 24px 40px; }
  .g-intro .img { margin: 0 0 12px; }
  .g-intro .m-link { text-align: left !important; margin: 20px 0 14px; }
  .g-intro .m-h2 { text-align: left !important; font-size: clamp(24px, 6.8vw, 30px) !important; line-height: 1.25 !important; margin-bottom: 20px; }
  .g-intro .line { display: block; width: 100% !important; height: 1px !important; margin: 0 0 24px; }
  .g-intro .m-p { text-align: left !important; }
  .g-intro .m-link + .m-p { margin-top: 6px; }
  .g-rev .stage { padding: 40px 24px 40px; }
  .g-rev .m-quote { font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.35 !important; margin-bottom: 18px; }
  .g-gal .stage { padding: 0 20px; }
  .g-gal .grid { grid-template-columns: 1fr; gap: 12px; }
  .g-gal .grid .img { margin: 0; }
  .g-gal .back { margin: 32px 0 0; text-align: left !important; }

  /* Events-Seite */
  .e-hero, .e-cta, .e-faq { min-height: 0; display: block; position: relative !important; top: auto; height: auto !important; }
  .e-hero .stage { padding: 0 0 8px; }
  .e-hero .half, .e-cta .half { width: 100% !important; margin: 0; aspect-ratio: 3 / 2; }
  .e-hero .shade, .e-hero .logo { display: none; }
  .e-hero .m-h1 { margin: 20px 24px 12px; color: var(--braun) !important; text-align: left !important; }
  .e-why .stage { padding: 56px 24px 48px; }
  .e-why .m-link { margin-bottom: 20px; }
  .e-why .m-h2 { font-size: clamp(22px, 6.4vw, 30px) !important; line-height: 1.3 !important; }
  .e-three .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 40px; }
  .e-three .img { margin: 0; }
  .e-three .img:first-child, .e-three p { grid-column: 1 / -1; }
  .e-three p { margin: 20px 0 8px; text-align: left !important; }
  .e-full1, .e-full2 { height: 62vw !important; }
  .e-full1 .bg, .e-full2 .bg { position: absolute !important; inset: 0 !important; margin: 0; }
  .e-artist .stage { padding: 56px 24px 40px; }
  .e-artist .m-h2 { text-align: left !important; margin-bottom: 20px; }
  .e-artist .img { margin: 0 0 12px; }
  .e-artist .m-eye { text-align: left !important; margin: 20px 0 16px; }
  .e-artist .m-p { text-align: left !important; }
  .e-dhead .stage { padding: 40px 24px 0; }
  .e-dhead .m-h1 { white-space: normal !important; text-align: left !important; margin: 0; }
  .e-dhead .line { display: block; width: 100% !important; height: 1px !important; margin: 24px 0 0; }
  .e-offer .stage { padding: 40px 24px 32px; }
  .e-offer .stage > .abs, .e-offer .stage > p { text-align: left !important; }
  .e-offer .img { margin: 0 0 12px; }
  .e-offer .m-eye, .e-offer .m-link { margin: 20px 0 14px; }
  .e-offer .m-h2 { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.25 !important; margin-bottom: 18px; }
  .e-offer .line { display: block; width: 100% !important; height: 1px !important; margin: 0 0 32px; }
  .e-how .stage { padding: 48px 24px 40px; }
  .e-how1 .m-h1 { white-space: normal !important; margin-bottom: 28px; }
  .e-how .img { margin: 0 0 24px; }
  .e-how .m-h3 { text-align: left !important; font-size: 34px !important; line-height: 1 !important; margin: 0 0 14px; }
  .e-how .m-p { text-align: left !important; }
  .e-revs .stage { padding: 56px 24px 24px; }
  .e-revs .m-link { text-align: left !important; margin-bottom: 20px; }
  .e-revs .m-h3 { text-align: left !important; font-size: 28px !important; line-height: 1.2 !important; margin: 0 0 14px; }
  .e-revs .m-p { text-align: left !important; }
  .e-revs .img { margin: 20px 0 0; }
  .e-revs .line { display: block; width: 100% !important; height: 1px !important; margin: 32px 0; }
  .e-stand .stage { padding: 56px 24px 40px; }
  .e-stand .m-link { text-align: left !important; margin-bottom: 8px; }
  .e-stand .m-h3 { text-align: left !important; font-size: clamp(22px, 6vw, 28px) !important; line-height: 1.25 !important; margin: 20px 0 0; padding-left: 20px; border-left: 1px solid var(--braun); }
  .e-start .stage { padding: 48px 24px 40px; }
  .e-start .img { margin: 0 0 12px; }
  .e-start .m-h2 { text-align: left !important; margin: 24px 0 20px; }
  .e-start .m-eye, .e-start .m-link { text-align: left !important; margin-bottom: 10px; }
  .e-start .m-p { text-align: left !important; }
  .e-start .line { display: block; width: 100% !important; height: 1px !important; margin: 24px 0; }
  .e-start .btn { margin-top: 24px; }
  .e-faq .stage { padding: 56px 24px 0; }
  .e-faq .m-h2 { text-align: left !important; margin: 0; }
  .e-faqs { height: auto !important; }
  .e-faqs .stage { padding: 24px 24px 40px; }
  .e-faqs .qa { position: static; width: auto; }
  .e-faqs .q { text-align: left !important; margin-bottom: 8px; }
  .e-faqs .a { text-align: left !important; margin-bottom: 32px; }
  .e-cta { background: var(--braun); }
  .e-cta .stage { padding: 0 0 56px; }
  .e-cta .half { display: none; }
  .e-cta .half:first-child { display: block; margin-bottom: 40px; }
  .e-cta .m-eye { margin-bottom: 14px; }
  .e-cta .m-h2 { margin-bottom: 24px; }

  /* Über-mich-Seite */
  .u-hero { min-height: 0; }
  .u-hero .stage { padding: 96px 24px 64px; }
  .u-hero .bg { position: absolute !important; inset: 0 !important; margin: 0; }
  .u-hero .shade { position: absolute; }
  .u-hero .logo { display: none; }
  .u-hero .stage .abs { text-align: left !important; }
  .u-hero .m-h1 { white-space: normal !important; margin: 8px 0 0; }
  .u-intro .stage { padding: 56px 24px 48px; }
  .u-intro .img { margin: 0 0 12px; }
  .u-intro .m-h2 { margin: 28px 0 24px; text-align: left !important; font-size: clamp(26px, 7.6vw, 36px) !important; }
  .u-intro .m-link { text-align: left !important; }
  .u-intro .m-p { text-align: left !important; }
  .u-rev .stage { padding: 40px 24px 48px; }
  .u-rev .m-quote { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.35 !important; margin-bottom: 20px; }
  .u-imgs .stage { padding: 0 20px 24px; }
  .u-imgs .img { margin: 0 0 12px; }
  .u-artist .stage { padding: 48px 24px 40px; }
  .u-artist .m-h1 { white-space: normal !important; margin-bottom: 24px; }
  .u-artist .m-eye { margin-bottom: 28px; }
  .u-artist .img { margin: 0 0 28px; }
  .u-artist .m-p { text-align: left !important; }
  .u-artist .sig { font-size: 44px !important; margin-top: 24px; text-align: left !important; }
  .u-facts .stage { padding: 56px 24px 48px; }
  .u-facts .m-link { text-align: left !important; margin-bottom: 20px; }
  .u-facts .nr { text-align: left !important; margin: 18px 0 2px; }
  .u-facts .m-h3 { font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.3 !important; text-align: left !important; }
  .u-focus .stage { padding: 56px 24px 56px; }
  .u-focus .m-eye { text-align: left !important; margin-bottom: 20px; }
  .u-focus .m-h3 { text-align: left !important; font-size: 34px !important; margin: 0 0 12px; }
  .u-focus .m-p { text-align: left !important; }
  .u-focus .line { display: block; width: 100% !important; height: 1px !important; margin: 26px 0; }
  .u-focus .btn { margin: 24px 0 36px; }
  .u-focus .img { margin: 0 0 12px; }
  .u-more .stage { padding: 40px 24px 40px; }
  .u-more .m-eye { text-align: left !important; margin-bottom: 20px; }
  .u-more a.img { margin: 0 0 16px; }
  .u-more .m-h3 { text-align: left !important; font-size: 28px !important; margin: 0 0 6px; }
  .u-more .m-link { text-align: left !important; margin-bottom: 40px; }
  .u-cta .stage { padding: 56px 24px 56px; }
  .u-cta .m-eye { margin-bottom: 14px; }
  .u-cta .m-h2 { margin-bottom: 20px; font-size: clamp(24px, 7.4vw, 34px) !important; }
  .u-cta .m-flex { margin-top: 24px; }
  .u-full { height: 62vw !important; }
  .u-full .bg { position: absolute !important; inset: 0 !important; margin: 0; }

  /* Anfrage-Seite */
  .a-hero { min-height: 0; }
  .a-hero .stage { padding: 120px 24px 72px; }
  .a-hero .bg { position: absolute !important; inset: 0 !important; margin: 0; }
  .a-hero .m-h1 { margin: 0; }
  .a-form { min-height: 0; }
  .a-form .stage { padding: 24px 20px 72px; }
  .a-form .img { margin: 0 0 12px; }
  .a-form p.m-link { margin: 28px 0 0; text-align: left !important; }
  .a-form .form { margin: 40px 0 0; width: auto; }

  /* Unterseiten */
  .flow { padding: 72px 20px 96px; }
  .flow h1 { font-size: clamp(38px, 11.5vw, 72px); margin-bottom: 28px; }
  .flow .eyebrow { font-size: 21px; }
  .flow .lead { font-size: 18px; }
  .flow .hint { font-size: 19px; }
  .form { margin-top: 48px; gap: 30px; }
  .form .row { grid-template-columns: 1fr; gap: 30px; }
  .form .actions { flex-direction: column; align-items: flex-start; }
  .legal h2 { font-size: 24px; overflow-wrap: break-word; hyphens: auto; }
}

/* =========================================================
   Schriftschnitte und Laufweiten (Poppins, Figtree, JetBrains Mono).
   Stehen am Ende, damit sie die Grundregeln oben und im Mobil-Layout überschreiben.
   ========================================================= */
/* ---------- Grundschrift: Figtree ---------- */
body, .p, .field input, .field textarea, .field select, .form .note { font-family: "Figtree", sans-serif; }
.p { font-weight: 400; }

/* ---------- Überschriften: Poppins ---------- */
.serif  { font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: -.02em; }
.serif.xl { font-weight: 700; letter-spacing: -.025em; }
.it     { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.menu a, .flow h1, .legal h2, .field label { font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: -.02em; }
.flow h1 { font-weight: 700; }
.field label { font-weight: 500; letter-spacing: 0; font-size: 15px; }
/* Akzentwörter („by“, „No.“, Unterschrift): Poppins kursiv 500 */
.script { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 500; font-size: .62em; letter-spacing: 0; }
.marq .script { font-size: .62em; }
.u-artist .sig { font-size: 44px !important; }

/* ---------- Kursive Zwischenzeilen: Figtree 500 kursiv ---------- */
.gara, .flow .eyebrow, .flow .hint, .a-form .hint, .form .status, .menu .menu-mail, .legal h3, .legal .stand {
  font-family: "Figtree", sans-serif; font-style: italic; font-weight: 500; letter-spacing: 0;
}

/* ---------- Labels: JetBrains Mono ---------- */
.rhd, .hdr .nav a, .hdr .inq, .btn, .flink, .menu .close { font-family: "JetBrains Mono", monospace; font-weight: 500; }
.rhd { letter-spacing: .08em !important; }
.hdr .nav a, .hdr .inq { font-weight: 600; letter-spacing: .06em; }
.btn { font-weight: 600; letter-spacing: .06em; }