/* ==========================================================================
   HAFID AZZA · DEKORATIONSMALER
   Designsystem, abgeleitet aus dem Logo (Schwarz / Warmweiß / Gold, Montserrat)
   ========================================================================== */

/* --- Schrift: selbst gehostet (kein Google-Fonts-CDN, DSGVO-freundlich) --- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Signaturschrift: nur für die eine Signaturzeile am Seitenende. */
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/greatvibes-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Farben */
  --ink:          #211D1E;
  --ink-2:        #302B2C;
  --ink-3:        #3E3839;
  --gold:         #D6A33E;
  --gold-light:   #E5BF67;
  --gold-deep:    #B88A32;
  --paper:        #F7F4EE;
  --sand:         #EEE8DC;
  --white:        #FFFFFF;
  --line:         #DDD9D1;
  --line-dark:    rgba(247, 244, 238, .16);
  --muted:        #66615F;
  --muted-dark:   #A9A29B;
  --body:         #332F30;

  /* Typografie */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --t-micro: clamp(.6875rem, .66rem + .09vw, .75rem);   /* 11 bis 12 Labels */
  --t-small: clamp(.8125rem, .79rem + .11vw, .875rem);  /* 13 bis 14         */
  --t-body:  clamp(1.0625rem, 1.03rem + .17vw, 1.1875rem); /* 17 bis 19      */
  --t-lead:  clamp(1.1875rem, 1.11rem + .38vw, 1.4375rem); /* 19 bis 23      */
  --t-h3:    clamp(1.25rem, 1.16rem + .42vw, 1.5rem);
  --t-h2:    clamp(1.95rem, 1.45rem + 2.5vw, 4rem);
  /* auf 390 px ergibt das 40 px, dadurch bricht die Hero-Zeile auf zwei statt drei Zeilen */
  /* Obergrenze so gewählt, dass „Oberflächen mit" in sieben Rasterspalten passt */
  --t-h1:    clamp(2.25rem, 1.135rem + 5.6vw, 4.5rem);
  --t-num:   clamp(2.4rem, 1.7rem + 4.4vw, 6rem);

  /* Raster & Abstände */
  --wrap:      1280px;
  --wrap-text: 68ch;
  --gutter:    clamp(1.25rem, 4.4vw, 4rem);
  --sec-y:     clamp(3.5rem, 8vw, 9rem);
  /* Drei Abstände, mehr braucht die Seite nicht.
     intro = Kopf einer Sektion zum Inhalt
     block = zwischen zwei grossen Blöcken innerhalb einer Sektion
     item  = kleinere Abstände zwischen zusammengehörenden Teilen */
  --gap-intro: clamp(2.5rem, 5.5vw, 4.5rem);
  --gap-block: clamp(3.5rem, 8vw, 7rem);
  --gap-item:  clamp(1.5rem, 3vw, 2.5rem);
  /* Strecke vom Rasterrand bis zum Viewport-Rand (für randlose Bilder) */
  --bleed:     calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter));
  --hero-top:  clamp(7rem, 14vw, 9rem);
  --hero-bot:  clamp(3rem, 6vw, 5rem);
  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;  --sp-7: 6rem;

  /* Form */
  --r-btn: 4px;
  --r-img: 2px;
  --r-card: 8px;

  /* Bewegung */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .55s;

  /* Ebenen */
  --z-base: 1; --z-sticky: 60; --z-header: 80; --z-menu: 90;
}

/* ==========================================================================
   2. RESET / BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* Randlose Elemente ziehen sich auf 100vw, was auf dem Desktop die Scrollbar
     mit einschliesst und sonst wenige Pixel Ueberhang erzeugt. clip haelt das
     zurueck, ohne einen Scroll-Container zu bilden (position: sticky bleibt aktiv). */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* muss jede display-Regel aus Klassen schlagen */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
  /* lange deutsche Komposita dürfen notfalls umbrechen, statt das Raster zu sprengen */
  overflow-wrap: break-word;
}

/* Raster- und Flexkinder dürfen schrumpfen. Ohne das erzwingt ein langes Wort
   eine Spur, die breiter ist als der Bildschirm, und die Seite scrollt seitlich. */
.wrap > *, .split > *, .svc > *, .proj > *, .contact > *,
.about__grid > *, .stucco__top > *, .cards > *, .objects > * { min-width: 0; }
h3 { font-weight: 700; line-height: 1.22; letter-spacing: -.01em; }
p  { margin: 0; text-wrap: pretty; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

/* Sichtbarer, markenkonformer Fokus, nie entfernen */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; left: var(--sp-2); top: var(--sp-2);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink); color: var(--paper);
  font-size: var(--t-small); font-weight: 600;
  border-radius: var(--r-btn);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: none; }

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

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

.section { padding-block: var(--sec-y); position: relative; }

/* Einheitliche Abstände statt Einzelfallwerte im HTML */
.section-intro { margin-bottom: var(--gap-intro); }
.section-block { margin-top: var(--gap-block); }
.mt-item       { margin-top: var(--gap-item); }

.section--paper { background: var(--paper); }
.section--sand  { background: var(--sand); }
.section--white { background: var(--white); }
.section--ink   { background: var(--ink); }

/* Dunkle Flächen: Farbumkehr in einem Rutsch */
.on-dark { color: rgba(247, 244, 238, .78); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--paper); }
.on-dark .eyebrow { color: var(--gold-light); }
.on-dark .lead { color: rgba(247, 244, 238, .9); }

/* ==========================================================================
   4. TYPO-KOMPONENTEN
   ========================================================================== */
/* Abschnittslabel: allein durch Typografie, ohne Strich davor. */
.eyebrow {
  display: block;
  margin: 0 0 var(--sp-2);
  color: var(--gold-deep);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.lead {
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -.005em;
}
.on-dark .lead { color: rgba(247, 244, 238, .82); }

.prose { max-width: var(--wrap-text); }
.prose > * + * { margin-top: 1.15em; }
.prose strong { font-weight: 700; color: var(--ink); }
.on-dark .prose strong { color: var(--paper); }

/* Inline-Textlink innerhalb von Fließtext: dezent, goldene Unterlinie */
.link-inline {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.link-inline:hover { color: var(--gold-deep); }
.on-dark .link-inline { color: var(--paper); }
.on-dark .link-inline:hover { color: var(--gold-light); }

.gold { color: var(--gold-deep); }
.on-dark .gold { color: var(--gold-light); }

/* Zitat / persönliche Aussage */
.quote {
  max-width: 22ch;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--ink);
}
.on-dark .quote { color: var(--paper); }
.quote em { font-style: normal; font-weight: 700; }

/* Schlusszitat als bewusster Abschluss des Abschnitts: linksbündig an der
   Rasterkante, breitenbegrenzt, ohne Strich und ohne Zitatgrafik. Schliesst
   optisch die linke Spalte ab, statt rechts in einer Leerfläche zu schweben. */
.pullquote {
  margin: var(--gap-intro) 0 0;
  max-width: 20ch;
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.8rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
}
.on-dark .pullquote { color: var(--paper); }
.pullquote em { font-style: normal; font-weight: 700; }

/* Große Editorial-Nummer */
.num {
  font-size: var(--t-num);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  user-select: none;
}

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: .9rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  font-size: clamp(.9375rem, .91rem + .1vw, 1rem);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.btn--primary:hover { background: var(--gold-light); border-color: var(--gold-light); }

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

.btn--ghost {
  background: transparent; border-color: var(--line); color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(33, 29, 30, .04); }

.on-dark .btn--ghost { border-color: var(--line-dark); color: var(--paper); }
.on-dark .btn--ghost:hover { border-color: var(--paper); background: rgba(247, 244, 238, .07); }

.btn--sm { min-height: 44px; padding: .6rem 1.1rem; font-size: var(--t-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Textlink mit „ausrollender“ Goldlinie (Anlehnung an die Farbrolle im Logo) */
.link {
  position: relative;
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;               /* Mindestgröße für Fingerbedienung */
  padding-block: 2px;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}
.on-dark .link { color: var(--paper); }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link svg { flex: none; transition: transform .42s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   6. BILDER
   ========================================================================== */
.fig { margin: 0; position: relative; }
.fig img {
  /* height:auto, damit die ratio-Klassen das Seitenverhältnis bestimmen.
     Mit height:100% würde eine gestreckte Rasterzelle das Verhältnis überschreiben. */
  width: 100%; height: auto;
  object-fit: cover;
  border-radius: var(--r-img);
  background: var(--sand);
}
.fig figcaption {
  margin-top: .85rem;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.5;
}
.on-dark .fig figcaption { color: var(--muted-dark); }

.ratio-34  { aspect-ratio: 3 / 4; }
.ratio-11  { aspect-ratio: 1 / 1; }
.ratio-43  { aspect-ratio: 4 / 3; }
.ratio-169 { aspect-ratio: 16 / 9; }

/* Bildplatzhalter, klar als solcher erkennbar */
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem;
  padding: var(--sp-4);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-img);
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(214, 163, 62, .07) 11px 22px),
    var(--sand);
  color: var(--muted);
  text-align: center;
}
.placeholder__tag {
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.placeholder__hint { font-size: var(--t-small); line-height: 1.5; max-width: 30ch; }
.on-dark .placeholder { border-color: var(--line-dark); background: rgba(247,244,238,.04); color: var(--muted-dark); }

/* ==========================================================================
   7. HEADER
   ========================================================================== */
.header {
  position: fixed; inset-inline: 0; top: 0;
  z-index: var(--z-header);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 92px;
  transition: min-height .35s var(--ease);
}
.header.is-scrolled {
  background: rgba(247, 244, 238, .93);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--line);
}
.header.is-scrolled .header__inner { min-height: 74px; }

/* Logo */
.logo {
  display: block; flex: none;
  color: var(--paper);                    /* über dem dunklen Hero */
  --logo-knockout: var(--ink);
  text-decoration: none;
  transition: color .35s var(--ease);
}
.header.is-scrolled .logo,
.header.is-menu-open .logo { color: var(--ink); --logo-knockout: var(--paper); }
/* Das Logo ist 413:224 breit zu hoch. Bei 128 px Breite sind das 69 px Höhe,
   in einem 92 px hohen Header bleiben oben und unten je 11 px Luft. */
.logo svg { width: clamp(102px, 9.5vw, 128px); height: auto; }
.header.is-scrolled .logo svg { width: clamp(94px, 8.5vw, 112px); }

/* Navigation */
.nav { margin-left: auto; }
.nav__list {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  margin: 0; padding: 0; list-style: none;
}
.nav__link {
  position: relative;
  display: block; padding: .4rem 0;
  color: rgba(247, 244, 238, .84);
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .3s var(--ease);
}
.header.is-scrolled .nav__link { color: var(--body); }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link:hover { color: var(--paper); }
.header.is-scrolled .nav__link:hover { color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(247, 244, 238, .28);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  transition: background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.header.is-scrolled .icon-btn { border-color: var(--line); color: var(--ink); }
.icon-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1.5px solid rgba(247, 244, 238, .28);
  border-radius: var(--r-btn);
  background: transparent;
  cursor: pointer;
}
.header.is-scrolled .burger, .header.is-menu-open .burger { border-color: var(--line); }
.burger span {
  display: block; width: 20px; height: 1.5px;
  margin: 4px auto;
  background: var(--paper);
  transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.header.is-scrolled .burger span, .header.is-menu-open .burger span { background: var(--ink); }
.header.is-menu-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.header.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.header.is-menu-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: var(--sp-4);
  min-height: 100svh;
  padding-block: var(--hero-top) var(--hero-bot);
}
/* Spalten 1 bis 7. Darf sich nicht mit dem Bild ab Spalte 8 überschneiden,
   sonst rutscht das Bild in eine zweite Rasterzeile. */
.hero__content { grid-column: 1 / 8; grid-row: 1; position: relative; z-index: 2; }

.hero__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--paper);
}
.hero__title .is-gold { color: var(--gold); }

.hero__sub { max-width: 44ch; margin-bottom: var(--sp-5); }

.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 1.15rem;
  margin: var(--sp-5) 0 0; padding: 0;
  list-style: none;
  color: rgba(247, 244, 238, .68);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .04em;
}
.hero__trust li { display: flex; align-items: center; gap: .6rem; }
.hero__trust li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* Bildpanel: bricht rechts und oben/unten randlos aus dem Raster aus */
.hero__media {
  grid-column: 8 / -1;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  margin-right: calc(var(--bleed) * -1);
  margin-block: calc(var(--hero-top) * -1) calc(var(--hero-bot) * -1);
}
.hero__media img {
  width: 100%; height: 100%;
  min-height: 100svh;
  object-fit: cover;
  object-position: 58% 50%;
  border-radius: 0;
}
.hero__media::after {           /* Verlauf zur Textseite + Fuß für die Bildunterschrift */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(33, 29, 30, .8) 0%, rgba(33, 29, 30, .25) 22%, transparent 40%),
    linear-gradient(100deg, var(--ink) 0%, rgba(33, 29, 30, .55) 22%, transparent 62%);
  pointer-events: none;
}
/* muss `.fig figcaption` schlagen, sonst dunkler Text auf dunklem Bild */
.hero__media figcaption.hero__caption {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  z-index: 2;
  max-width: 21ch;
  padding-left: .85rem;
  border-left: 2px solid var(--gold);
  color: rgba(247, 244, 238, .92);
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: .04em;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex; align-items: center; gap: .6rem;
  color: rgba(247, 244, 238, .5);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll svg { animation: nudge 2.6s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ==========================================================================
   9. LEISTUNGEN, redaktionelle Wechselreihen
   ========================================================================== */
.svc { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); align-items: center; }
.svc + .svc { margin-top: clamp(4rem, 9vw, 8.5rem); }

.svc__media { grid-column: 1 / 7; }
.svc__body  { grid-column: 8 / -1; }
.svc--flip .svc__media { grid-column: 7 / -1; grid-row: 1; }
.svc--flip .svc__body  { grid-column: 1 / 6;  grid-row: 1; }

/* Rhythmus: unterschiedliche Höhen & Versätze statt gleichförmiger Kacheln */
.svc:nth-child(even) .svc__media { transform: translateY(clamp(0px, 2vw, 28px)); }

.svc__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: var(--sp-3); }
.svc__num  { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.svc__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.35rem); }
.svc__text { margin-bottom: var(--sp-3); color: var(--muted); }
.svc__tags {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin: 0 0 var(--sp-3); padding: 0; list-style: none;
}
.svc__tags li {
  padding: .3rem .7rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--muted);
  font-size: var(--t-micro);
  letter-spacing: .05em;
}

/* Leistung ohne Foto: Text nutzt die volle Rasterbreite statt rechts zu kleben */
.svc--textonly { grid-template-columns: repeat(12, 1fr); }
.svc--textonly .svc__body { grid-column: 1 / 9; }
.svc--textonly .svc__text { max-width: 62ch; }

/* zweites, kleineres Bild innerhalb einer Leistung */
.svc__second { max-width: 300px; margin-top: var(--sp-4); }

/* Detailbild, das über das Hauptbild ragt */
.svc__detail {
  position: absolute; right: -8%; bottom: -10%;
  width: 42%;
  border: 6px solid var(--paper);
  border-radius: var(--r-img);
  box-shadow: 0 18px 40px -22px rgba(33, 29, 30, .5);
}
.section--sand .svc__detail { border-color: var(--sand); }

/* ==========================================================================
   10. STUCCO ANTICO, Signature
   ========================================================================== */
/* Zeile 1: Label + Überschrift links, Einführung rechts. */
.stucco__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); align-items: start; }
.stucco__intro { grid-column: 1 / 6; }
.stucco__note  { grid-column: 7 / -1; max-width: 62ch; }

/* Zeile 2: zwei gleichwertige Materialspalten, gleiche Startlinie, dezente
   vertikale Trennung statt schwebender Karten. */
.stucco__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: var(--gap-block);
  border-top: 1px solid var(--line-dark);
}
.stucco__card {
  padding-top: var(--sp-4);
}
.stucco__card + .stucco__card {
  padding-left: clamp(1.75rem, 4vw, 3.5rem);
  border-left: 1px solid var(--line-dark);
  margin-left: clamp(1.75rem, 4vw, 3.5rem);
}
.stucco__card h3 {
  margin-bottom: var(--sp-3);
  font-size: var(--t-h3);
}
.stucco__list { margin: 0; padding: 0; list-style: none; }
.stucco__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(247, 244, 238, .74);
}
.stucco__list li + li { margin-top: .5rem; }
.stucco__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
/* Zeile 3: gemeinsamer Beratungsabschluss über die volle Breite, klar abgesetzt. */
.stucco__close {
  margin-top: var(--gap-block);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
  align-items: center;
}
.stucco__close p { grid-column: 1 / 8; max-width: 60ch; }
.stucco__close .btn-row { grid-column: 9 / -1; justify-content: flex-end; }

/* ==========================================================================
   11. ALLGEMEINE RASTER
   ========================================================================== */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); align-items: start; }
.split__a { grid-column: 1 / 6; }
.split__b { grid-column: 7 / -1; }

/* ==========================================================================
   12. ÜBER HAFID
   ========================================================================== */
/* overflow:clip hält das Wasserzeichen in der Sektion, ohne einen Scrollbereich zu erzeugen */
.about { position: relative; overflow: clip; }
.about__mark {
  position: absolute;
  top: 50%; right: -2%;
  translate: 0 -50%;
  width: clamp(220px, 30vw, 420px);
  opacity: .11;
  pointer-events: none;
  user-select: none;
}
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.about__media { grid-column: 1 / 6; }
.about__body  { grid-column: 7 / -1; position: relative; z-index: 2; }

.facts { margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  flex: 0 0 clamp(120px, 30%, 190px);
  color: var(--muted);
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: .04em;
}
.facts dd { margin: 0; font-size: var(--t-small); }

/* Inline-Platzhalter für noch fehlende Angaben */
.ph {
  display: inline-block;
  padding: .1em .55em;
  border: 1px dashed var(--gold-deep);
  border-radius: 3px;
  background: rgba(214, 163, 62, .18);
  color: #6E5214;                 /* dunkles Gold, erreicht 4.5:1 auf hellem Grund */
  font-size: .92em; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.on-dark .ph { color: var(--gold-light); border-color: var(--gold-light); background: rgba(214,163,62,.14); }

/* ==========================================================================
   13. PROJEKTE
   ========================================================================== */
.proj { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4) clamp(1.5rem, 3vw, 3rem); }
.proj + .proj { margin-top: clamp(3.5rem, 8vw, 7rem); }
.proj__main  { grid-column: 1 / 8; }
.proj__side  { grid-column: 8 / -1; align-self: center; }
.proj--flip .proj__main { grid-column: 6 / -1; grid-row: 1; }
.proj--flip .proj__side { grid-column: 1 / 6;  grid-row: 1; }

.proj__title { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); margin-bottom: var(--sp-3); }
.proj__meta { margin: var(--sp-3) 0 0; padding: 0; }
.proj__meta div { display: flex; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.on-dark .proj__meta div { border-top-color: var(--line-dark); }
.proj__meta dt {
  flex: 0 0 clamp(88px, 26%, 128px);
  color: var(--gold-deep);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  padding-top: .2em;
}
.on-dark .proj__meta dt { color: var(--gold-light); }
.proj__meta dd { margin: 0; font-size: var(--t-small); line-height: 1.6; }

/* Bildreihen unterhalb eines Projekts */
.proj__row { margin-top: clamp(.6rem, 1.6vw, 1.25rem); }
.proj__row:first-of-type { margin-top: clamp(1.25rem, 3vw, 2.25rem); }
/* Abstand zwischen zwei Projekten, wenn Bildreihen dazwischenliegen */
.proj--gap { margin-top: clamp(3.5rem, 8vw, 7rem); }
/* kleines Detailbild in der Projektspalte */
.proj__inlinefig { margin-top: var(--sp-4); max-width: 320px; }
/* eigenständiger Block innerhalb einer Sektion */
.section-block { margin-top: clamp(3.5rem, 8vw, 7rem); }

/* Bildreihen innerhalb eines Projekts */
.objects {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2vw, 1.5rem);
  align-items: start;   /* Bilder nicht auf Zeilenhöhe dehnen */
}
.objects--2 { grid-template-columns: repeat(2, 1fr); }
.objects figcaption { margin-top: .6rem; font-size: var(--t-micro); }

/* ==========================================================================
   14. ABLAUF
   ========================================================================== */
.steps { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps::before {
  content: ""; position: absolute;
  left: 21px; top: .5rem; bottom: 3.5rem;
  width: 1.5px;
  background: linear-gradient(var(--gold), rgba(214, 163, 62, .18));
}
/* Goldene Fülllinie: wächst beim Scrollen mit (Höhe kommt aus dem JS).
   Ohne JavaScript bleibt sie unsichtbar, die statische Linie darüber bleibt. */
.steps::after {
  content: ""; position: absolute;
  left: 21px; top: .5rem;
  width: 1.5px;
  height: var(--steps-fill, 0px);
  background: var(--gold);
  box-shadow: 0 0 6px rgba(214, 163, 62, .5);
  will-change: height;
}
.step { position: relative; padding-left: 4.25rem; counter-increment: step; }
.step + .step { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1em;
  display: flex; align-items: center; justify-content: center;
  width: 43px; height: 43px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold-deep);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .02em;
  transition: background .4s ease, color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.section--sand .step::before { background: var(--sand); }
.section--ink  .step::before { background: var(--ink); color: var(--gold-light); }
/* Aktiver Punkt: gefüllt, sobald die Fülllinie ihn erreicht. */
.step.is-active::before,
.section--sand .step.is-active::before,
.section--ink  .step.is-active::before {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--paper);
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(214, 163, 62, .12);
}
@media (prefers-reduced-motion: reduce) {
  .step::before { transition: none; }
}
.step h3 { font-size: var(--t-h3); margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: var(--t-small); line-height: 1.65; max-width: 52ch; }
.on-dark .step p { color: rgba(247, 244, 238, .72); }

/* ==========================================================================
   15. FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 13px; height: 13px; margin-top: .35em;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  rotate: 45deg;
  transition: rotate .3s var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; }
.faq__answer { padding: 0 0 1.5rem; max-width: 68ch; color: var(--muted); }
.faq__answer > * + * { margin-top: .85em; }

/* ==========================================================================
   16. FORMULAR
   ========================================================================== */
.form { display: grid; gap: 1.1rem; }
/* Honeypot: fuer Menschen unsichtbar, bleibt aber im DOM, damit Bots hineintappen. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .45rem; }
.field--half { grid-column: span 1; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field label {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--paper);
}
.field .opt { color: var(--muted-dark); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  border: 1.5px solid rgba(247, 244, 238, .22);
  border-radius: var(--r-btn);
  background: rgba(247, 244, 238, .05);
  color: var(--paper);
  /* Mindestens 16px, sonst zoomt iOS Safari beim Fokussieren automatisch hinein. */
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(247, 244, 238, .38); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(247, 244, 238, .38); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); background: rgba(247, 244, 238, .08); outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold-light); outline-offset: 2px;
}
.field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: var(--ink-2); color: var(--paper); }

/* Datei-Upload */
.file {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .85rem 1rem;
  border: 1.5px dashed rgba(247, 244, 238, .28);
  border-radius: var(--r-btn);
}
.file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file__btn {
  padding: .5rem .9rem;
  border: 1.5px solid rgba(247, 244, 238, .3);
  border-radius: var(--r-btn);
  font-size: var(--t-small); font-weight: 600;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.file__btn:hover { border-color: var(--gold); background: rgba(214, 163, 62, .12); }
.file__name { font-size: var(--t-small); color: var(--muted-dark); }
.file:focus-within { border-color: var(--gold); }

/* Checkbox */
.check { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.check input {
  flex: none;
  width: 22px; height: 22px;
  margin: .15rem 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.check span { font-size: var(--t-small); line-height: 1.55; color: rgba(247, 244, 238, .78); }
.check a { color: var(--gold-light); text-underline-offset: 3px; }

/* Radiogruppe */
.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radios label {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 46px;              /* Mindestgröße für Fingerbedienung */
  padding: .55rem 1.1rem;
  border: 1.5px solid rgba(247, 244, 238, .22);
  border-radius: 100px;
  font-size: var(--t-small); font-weight: 500;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.radios input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radios label:hover { border-color: rgba(247, 244, 238, .45); }
.radios label:has(input:checked) { border-color: var(--gold); background: var(--gold); color: var(--ink); font-weight: 600; }
.radios label:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Fehler & Erfolg */
.error {
  display: none;
  color: #F0A9A0;
  font-size: var(--t-small);
  font-weight: 500;
}
.field.has-error .error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C9695C; }
.field.has-error label { color: #F0A9A0; }

.form__note { font-size: var(--t-micro); color: var(--muted-dark); line-height: 1.6; }

.form__success {
  display: none;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1.5px solid var(--gold);
  border-radius: var(--r-card);
  background: rgba(214, 163, 62, .1);
}
.form__success.is-visible { display: block; }
.form__success h3 { font-size: var(--t-h3); margin-bottom: .6rem; }
.form__success p { color: rgba(247, 244, 238, .82); font-size: var(--t-small); }

/* ==========================================================================
   17. KONTAKT-BLOCK
   ========================================================================== */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact__intro { grid-column: 1 / 6; position: sticky; top: 110px; }
.contact__form  { grid-column: 7 / -1; }

.contact__links { margin: var(--sp-5) 0 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
/* nur die direkten Kinder der Liste, nicht die Text-Spans darin */
.contact__links > li > a,
.contact__links > li > span {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.contact__links a:hover { color: var(--gold-light); }
.contact__links svg { flex: none; width: 19px; height: 19px; color: var(--gold); }
.contact__links b { font-weight: 600; }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
/* Eigenständige Sektion: hellerer Ton als der Kontaktbereich darüber,
   dazu eine Goldkante als sichtbare Trennung. */
.footer {
  position: relative;
  background: var(--ink-2);
  border-top: 2px solid var(--gold);
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Abschlusszeile der Kontaktsektion, damit der Fussbereich nicht anschliesst */
.section--ink + .footer { margin-top: 0; }
/* muss `.footer a` schlagen, sonst wird das Logo grau statt hell */
.footer a.footer__logo { display: inline-block; color: var(--paper); --logo-knockout: var(--ink); }
.footer__logo svg { width: 190px; height: auto; }
.footer__desc { margin-top: var(--sp-3); max-width: 34ch; font-size: var(--t-small); color: rgba(247,244,238,.66); }

.footer h4 {
  margin-bottom: var(--sp-3);
  color: var(--gold-light);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
}
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
/* auch Einträge ohne Link (Adresse, Einsatzgebiet) */
.footer li { font-size: var(--t-small); line-height: 1.5; color: rgba(247, 244, 238, .7); }
.footer a {
  color: rgba(247, 244, 238, .7);
  font-size: var(--t-small);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer a:hover { color: var(--gold-light); }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-dark);
  color: rgba(247, 244, 238, .45);
  font-size: var(--t-micro);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   19. STICKY-KONTAKTLEISTE (mobil)
   ========================================================================== */
.dock {
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: none;
  background: rgba(33, 29, 30, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(247, 244, 238, .14);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.dock.is-visible { transform: none; }
.dock__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.dock a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-height: 60px;
  padding: .55rem .5rem;
  color: rgba(247, 244, 238, .85);
  font-size: 11px; font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
}
.dock a + a { border-left: 1px solid rgba(247, 244, 238, .12); }
.dock a svg { width: 19px; height: 19px; color: var(--gold); }
.dock a.is-primary { background: var(--gold); color: var(--ink); }
.dock a.is-primary svg { color: var(--ink); }

/* ==========================================================================
   20. REVEAL-ANIMATIONEN
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__content { grid-column: 1 / 8; }
  .svc__media { grid-column: 1 / 7; }
  .svc__body { grid-column: 7 / -1; }
  .svc--flip .svc__media { grid-column: 7 / -1; }
  .svc--flip .svc__body  { grid-column: 1 / 7; }
  .split__a { grid-column: 1 / 7; }
  .split__b { grid-column: 7 / -1; }
  .about__media { grid-column: 1 / 6; }
  .about__body  { grid-column: 6 / -1; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }

  /* Navigation → Panel (vollhöhig und intern scrollbar, damit auch bei
     geringer Bildschirmhöhe im Querformat alle Einträge erreichbar sind) */
  .nav {
    position: fixed; inset: 76px 0 0;
    margin: 0;
    padding: var(--sp-3) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background: var(--paper);
    box-shadow: 0 18px 40px -28px rgba(33, 29, 30, .45);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .header.is-menu-open .nav { opacity: 1; visibility: visible; transform: none; }
  .header.is-menu-open { background: var(--paper); border-bottom-color: transparent; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__link { padding: 1rem 0; color: var(--ink); font-size: 1.0625rem; }
  .nav__link::after { display: none; }

  .burger { display: block; margin-left: auto; }
  .header__actions .btn { display: none; }
  .header__inner { min-height: 76px; }

  /* Hero → gestapelt, Bild als Band oben */
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 0 clamp(2.5rem, 7vw, 4rem);
    gap: 0;
  }
  .hero__media {
    grid-column: 1 / -1;
    grid-row: auto;          /* sonst liegt es über dem Text */
    order: -1;
    margin: 0 calc(var(--bleed) * -1);
    height: clamp(240px, 40svh, 380px);
  }
  .hero__media img { min-height: 0; height: 100%; object-position: 55% 52%; }
  .hero__media::after {
    background: linear-gradient(to bottom, rgba(33,29,30,.5) 0%, rgba(33,29,30,.15) 40%, var(--ink) 97%);
  }
  .hero__content { grid-column: 1 / -1; grid-row: auto; padding-top: var(--sp-4); }
  .hero__media figcaption.hero__caption {
    right: auto; left: var(--gutter); bottom: var(--sp-3);
    max-width: 26ch;
  }
  .hero__scroll { display: none; }
  .hero__sub { margin-bottom: var(--sp-4); }
  .hero__trust { margin-top: var(--sp-4); }
  .hero__title { margin-bottom: var(--sp-3); }
  /* Knöpfe nebeneinander, solange sie passen, sonst gleich breit untereinander */
  .hero .btn-row .btn { flex: 1 1 auto; }

  /* Sektionen gestapelt */
  .svc, .split, .stucco__top, .about__grid, .proj, .contact { grid-template-columns: 1fr; }
  .svc__media, .svc__body, .svc--flip .svc__media, .svc--flip .svc__body,
  .split__a, .split__b, .stucco__intro, .stucco__note,
  .about__media, .about__body, .proj__main, .proj__side,
  .proj--flip .proj__main, .proj--flip .proj__side,
  .contact__intro, .contact__form { grid-column: 1 / -1; grid-row: auto; }

  /* Lesereihenfolge auf dem Handy: Überschrift, dann Bild, dann Text.
     display:contents löst den Textcontainer auf, damit die Teile einzeln
     sortierbar werden. */
  .svc { display: flex; flex-direction: column; gap: var(--sp-3); }
  .svc__body { display: contents; }
  .svc__head { order: 1; margin-bottom: 0; }
  .svc__media { order: 2; }
  .svc__text, .svc__tags, .svc .link, .svc__second { order: 3; }
  .svc__text { margin-bottom: 0; }
  .svc__text + .svc__text { margin-top: calc(var(--sp-3) * -1 + .9rem); }
  .svc:nth-child(even) .svc__media { transform: none; }
  .svc + .svc { margin-top: clamp(3rem, 9vw, 4.5rem); }
  .svc--textonly { grid-template-columns: none; }
  .proj__main { order: -1; }
  /* Stucco gestapelt: Kalk, dann Lehm, dann gemeinsamer Abschluss. */
  .stucco__grid { grid-template-columns: 1fr; }
  .stucco__card + .stucco__card {
    padding-left: 0; margin-left: 0; border-left: 0;
    padding-top: var(--sp-4); border-top: 1px solid var(--line-dark);
  }
  .stucco__close { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stucco__close p, .stucco__close .btn-row { grid-column: 1 / -1; }
  .stucco__close .btn-row { justify-content: flex-start; }
  .contact__intro { position: static; }
  .about__mark { top: auto; bottom: -3%; right: -8%; translate: none; opacity: .08; width: 240px; }

  /* auf Tablets zweispaltig, erst auf dem Handy einspaltig */

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  /* Tippfläche gehört an den Link, nicht an den Listenpunkt */
  .footer ul { gap: 0; }
  .footer li { display: flex; align-items: center; min-height: 44px; }
  .footer li a { display: flex; align-items: center; width: 100%; min-height: 44px; }
  .footer__bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }

  .dock { display: block; }
  /* Platz für die fixierte Kontaktleiste, damit sie die letzten Footer-Zeilen
     (Impressum, Datenschutz, Copyright) nie verdeckt. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  .svc__detail { position: static; width: 55%; margin-top: .75rem; border-width: 0; box-shadow: none; }
  .form__row { grid-template-columns: 1fr; }
  .form button[type="submit"] { width: 100%; justify-self: stretch; }
  /* zweispaltig statt einspaltig: sonst werden Begleitbilder riesig */
  .objects { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .marquee__item { width: 78vw; }
  /* Atelier-Zeile über der Sticky-Kontaktleiste halten */
  .atelier { bottom: calc(72px + env(safe-area-inset-bottom) + .75rem); }
  .facts div { flex-direction: column; gap: .1rem; }
  .facts dt { flex: none; }
  .proj__meta div { flex-direction: column; gap: .25rem; }
  .proj__meta dt { flex: none; }
  .step { padding-left: 3.5rem; }
  .steps::before { left: 18px; }
  .steps::after { left: 18px; }
  .step::before { width: 37px; height: 37px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .hero__trust { gap: .4rem .8rem; }
  .eyebrow { letter-spacing: .14em; }
  .quote { max-width: none; }
  .proj__inlinefig { max-width: 220px; }
  .svc__second { max-width: 200px; }
  /* Bildunterschriften im Projektraster kurz halten */
  .proj__row--grid figcaption { font-size: 11px; line-height: 1.45; }
}

/* ==========================================================================
   21b. RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================================== */
.legal { padding-block: clamp(7rem, 12vw, 10rem) var(--sec-y); }
.legal__inner { max-width: 74ch; }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); margin-bottom: var(--sp-4); }
.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: var(--t-h3); margin-top: var(--sp-4); margin-bottom: .4rem; }
.legal p, .legal ul { font-size: var(--t-small); line-height: 1.75; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: .9em; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .35rem; }
.legal a { color: var(--gold-deep); text-underline-offset: 3px; }
.legal address { font-style: normal; }
.legal .back {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: var(--sp-4);
  color: var(--muted);
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.legal .back:hover { color: var(--ink); }

/* Hinweiskasten für Punkte, die noch juristisch zu prüfen sind */
.notice {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--gold);
  background: rgba(214, 163, 62, .09);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
}
.notice p { font-size: var(--t-small); }
.notice strong { color: var(--ink); }

/* ==========================================================================
   21c. CONSENT-BANNER
   ========================================================================== */
.consent {
  position: fixed; inset: 0;
  z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--sp-3);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(33, 29, 30, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.consent.is-open { opacity: 1; }

.consent__box {
  width: 100%; max-width: 720px;
  max-height: calc(100svh - var(--sp-5));
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--paper);
  border-radius: var(--r-card);
  border-top: 3px solid var(--gold);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
  transform: translateY(18px);
  transition: transform .38s var(--ease);
}
.consent.is-open .consent__box { transform: none; }

.consent__title {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  margin-bottom: .7rem;
}
/* Fokus wandert beim Öffnen programmatisch auf die Überschrift, damit
   Screenreader den Dialog ansagen. Ein sichtbarer Rahmen ist dort nicht
   nötig, weil die Überschrift kein Bedienelement ist. */
.consent__title:focus, .consent__title:focus-visible { outline: none; }
.consent__text {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

.consent__details {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
}
.consent__opt { display: grid; gap: .4rem; }
.consent__opttext {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--muted);
  padding-left: 3.6rem;
  max-width: 60ch;
}
.consent__switch {
  display: flex; align-items: center; gap: .9rem;
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
}
.consent__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent__track {
  flex: none;
  position: relative;
  width: 46px; height: 26px;
  border-radius: 100px;
  background: #C9C3B9;
  transition: background-color .28s var(--ease);
}
.consent__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .28s var(--ease);
}
.consent__switch input:checked + .consent__track { background: var(--gold); }
.consent__switch input:checked + .consent__track::after { transform: translateX(20px); }
.consent__switch input:disabled + .consent__track { background: var(--gold-deep); opacity: .55; }
.consent__switch input:disabled ~ .consent__optname { color: var(--muted); }
.consent__switch input:focus-visible + .consent__track {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.consent__optname em { font-style: normal; font-weight: 500; color: var(--muted); }

.consent__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: var(--sp-4);
}
.consent__actions .btn { flex: 1 1 auto; min-width: 168px; }
.consent__toggle {
  flex: 0 0 auto;
  padding: .5rem .25rem;
  margin-left: auto;
  border: 0; background: none;
  color: var(--muted);
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.consent__toggle:hover { color: var(--ink); }
.consent__save { flex: 1 1 100%; }

.consent__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.consent__links a {
  color: var(--muted);
  font-size: var(--t-micro);
  text-underline-offset: 3px;
}
.consent__links a:hover { color: var(--gold-deep); }

/* Platzhalter für blockierte externe Inhalte */
.consent-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem;
  min-height: 220px;
  padding: var(--sp-4);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-img);
  background: var(--sand);
  text-align: center;
}
.consent-block p { font-size: var(--t-small); color: var(--muted); max-width: 44ch; }

@media (max-width: 620px) {
  .consent { padding: 0; align-items: flex-end; }
  .consent__box { border-radius: var(--r-card) var(--r-card) 0 0; max-height: 88svh; }
  .consent__actions .btn { flex: 1 1 100%; }
  .consent__toggle { margin: .25rem auto 0; }
  .consent__opttext { padding-left: 0; }
}

/* ==========================================================================
   21c1. KARTEN
   Editorial gehaltene Karten: warme Fläche auf getöntem Grund, eine große
   golden konturierte Nummer als Akzent (wie in den Leistungen), kräftiger
   Titel, ruhiger Text. Feiner Hover mit leichtem Anheben. Kein Vollrand-Gold,
   keine schweren Schatten, kein Baukasten-Look.
   ========================================================================== */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}
.card__index {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--gold);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  user-select: none;
}
.card__title {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.22;
  margin-bottom: .7rem;
  text-wrap: balance;
}
.card p {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--muted);
}
/* Hover nur bei echtem Zeiger: leichtes Anheben, Rand in Gold, weicher Schatten */
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 22px 48px -30px rgba(33, 29, 30, .45);
  }
}

/* auf dunklem Grund */
.on-dark .card {
  background: rgba(247, 244, 238, .04);
  border-color: var(--line-dark);
}
.on-dark .card__title { color: var(--paper); }
.on-dark .card p { color: rgba(247, 244, 238, .74); }
.on-dark .card:hover { border-color: var(--gold-light); box-shadow: 0 22px 48px -30px rgba(0, 0, 0, .6); }

/* Liste innerhalb einer Karte */
.card__list { margin: .3rem 0 0; padding: 0; list-style: none; }
.card__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--muted);
}
.card__list li + li { margin-top: .45rem; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
.on-dark .card__list li { color: rgba(247, 244, 238, .74); }

/* statisches Raster, gleiche Höhen */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards > * { height: 100%; }
/* Responsive hier, damit es die Basisdefinition sicher überschreibt
   (Media Queries erhöhen die Spezifität nicht, Quellreihenfolge entscheidet).
   Bei 3 Karten kein 2-Spalten-Zwischenschritt: der würde eine Waisenkarte
   mit Leerraum erzeugen. Darum unter 900px direkt gestapelt, volle Breite. */
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

/* ==========================================================================
   21c1b. LAUFBAND (Karten ziehen langsam von rechts nach links)
   Reines CSS, keine Bibliothek. Pausiert beim Zeigen und beim Fokussieren,
   steht still bei prefers-reduced-motion.
   ========================================================================== */
.marquee {
  position: relative;
  /* randlos über die volle Breite, damit das Band nicht abrupt endet */
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  overflow: hidden;
  /* die Ränder weich ausblenden */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item {
  flex: 0 0 auto;
  width: clamp(260px, 26vw, 340px);
  display: flex;
}
.marquee__item > .card { width: 100%; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  /* genau die halbe Strecke: der Inhalt liegt zweimal im Track */
  to   { transform: translate3d(calc(-50% - clamp(.5rem, 1vw, .75rem)), 0, 0); }
}

/* ==========================================================================
   21c2. KARUSSELL (horizontale Bildergalerie ohne Bibliothek)
   Verhindert, dass viele Bilder untereinander gestapelt werden. Wer möchte,
   blättert seitwärts; niemand muss dafür nach unten scrollen.
   ========================================================================== */
.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox */
  /* etwas Luft, damit der letzte Rand nicht klebt */
  padding-bottom: var(--sp-2);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track {
  display: flex;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  margin: 0; padding: 0;
  list-style: none;
}
.carousel__slide {
  flex: 0 0 auto;
  width: clamp(220px, 30%, 340px);       /* Desktop: gut drei bis vier Bilder */
  scroll-snap-align: start;
}
.carousel__slide .fig { margin: 0; }
.carousel__slide figcaption { margin-top: .6rem; font-size: var(--t-micro); }

/* Steuerung: zwei ruhige Knöpfe, rechtsbündig über dem Band */
.carousel__controls {
  display: flex; gap: .5rem; justify-content: flex-end;
  margin-top: var(--sp-3);
}
.carousel__btn {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.carousel__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn:disabled:hover { background: transparent; border-color: var(--line); color: var(--ink); }
.carousel__btn svg { width: 20px; height: 20px; }
/* Fortschritt: eine Zeile, die zeigt, wie weit man ist */
.carousel__progress {
  flex: 1;
  align-self: center;
  height: 2px;
  background: var(--line);
  position: relative;
  margin-right: var(--sp-2);
}
.carousel__progress span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--gold);
  width: 30%;
  transition: left .3s var(--ease), width .3s var(--ease);
}
.on-dark .carousel__btn { border-color: var(--line-dark); color: var(--paper); }
.on-dark .carousel__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.on-dark .carousel__progress { background: var(--line-dark); }

/* --- Vorher/Nachher: zwei beschriftete Bilder nebeneinander -------------- */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); }
.beforeafter--three { grid-template-columns: repeat(3, 1fr); }
/* Drei Rahmen sind mobil zu schmal: unter 620px gestapelt, volle Breite. */
@media (max-width: 620px) { .beforeafter--three { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }
.beforeafter figure { margin: 0; position: relative; }
.beforeafter figcaption {
  position: absolute; left: .75rem; top: .75rem;
  padding: .3rem .7rem;
  background: rgba(33, 29, 30, .82);
  color: var(--paper);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 3px;
}

@media (max-width: 620px) {
  .carousel__slide { width: 78%; }       /* mobil: ein Bild plus Vorschau */
}

/* ==========================================================================
   21d. MARKENINTERAKTIONEN (dezente Easter Eggs)
   ========================================================================== */

/* --- 1. Vergoldungs-Reflex: ein Lichtstreif zieht einmal über ein Wort ------
   Kein Glitzer, keine Partikel. Nur ein langsamer Reflex wie Licht auf Blattgold.
   Läuft genau einmal, wenn das Element in den Blick kommt. */
.gild {
  position: relative;
  color: var(--gold-deep);                 /* Rückfallfarbe ohne Verlaufsclip */
  /* Grundton golddunkel über die ganze Breite, mit einer schmalen hellen
     Lichtbahn, die einmal langsam hindurchzieht. */
  background-image: linear-gradient(
    100deg,
    var(--gold-deep) 0%,
    var(--gold-deep) 40%,
    var(--gold-light) 47%,
    #fff 50%,
    var(--gold-light) 53%,
    var(--gold-deep) 60%,
    var(--gold-deep) 100%
  );
  /* 300 % breit: das Wort ist bei jeder Position voll gedeckt, keine Lücken. */
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;    /* damit die Lichtbahn sichtbar wird */
}
.gild.is-lit {
  animation: gild-sweep 2.4s var(--ease) forwards;
}
@keyframes gild-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
/* Rückfall für Browser ohne background-clip:text: schlicht golddunkel. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gild { -webkit-text-fill-color: currentColor; background: none; }
}

/* --- 2. Oberfläche reagiert auf Licht ---------------------------------------
   Detailbilder von Material bekommen beim Zeigen der Maus einen sehr leichten
   Glanz, der der Mausposition folgt. Struktur und Kellenspuren treten dabei
   minimal stärker hervor. Nur auf Geräten mit echtem Zeiger. */
.lightshift { position: relative; }
.lightshift::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
  background: radial-gradient(
    140px 140px at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 250, 240, .28),
    rgba(255, 250, 240, 0) 60%
  );
  mix-blend-mode: soft-light;
}
@media (hover: hover) and (pointer: fine) {
  .lightshift:hover::after { opacity: 1; }
}

/* --- 4. Atelier-Modus: Dreifachklick auf das Chamäleon ----------------------
   Ein kurzer, stiller Einblick in Hafids Blick auf den Raum. Kein Popup, kein
   Ton, nichts wird blockiert. Eine ruhige Zeile am unteren Rand, die auftaucht
   und nach wenigen Sekunden wieder verschwindet. */
.atelier {
  position: fixed;
  left: 50%; bottom: clamp(1.5rem, 4vw, 3rem);
  transform: translate(-50%, 12px);
  z-index: 70;
  width: min(92vw, 640px);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
  background: rgba(33, 29, 30, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;               /* verdeckt und blockiert nichts */
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
}
.atelier.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.atelier__label {
  display: block;
  color: var(--gold-light);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: .7rem;
}
.atelier__line {
  color: var(--paper);
  font-size: clamp(1.05rem, .95rem + .7vw, 1.4rem);
  font-weight: 300; font-style: italic;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 auto;
  max-width: 32ch;
}
.atelier__notes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem .9rem;
  margin-top: 1rem;
}
.atelier__notes span {
  color: rgba(247, 244, 238, .6);
  font-size: var(--t-micro);
  font-style: italic;
  letter-spacing: .04em;
}
.atelier__notes span::before { content: "– "; color: var(--gold); font-style: normal; }

/* --- 6. Persönlicher Abschluss: Signaturzeile am Seitenende -----------------
   Baut sich beim ersten Sichtbarwerden einmal langsam auf, wie mit dem Pinsel
   gezogen. Danach bleibt sie stehen, keine Endlosschleife. */
.signature {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-dark);
}
.signature__line {
  max-width: 26ch;
  color: var(--paper);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -.015em;
}
.signature__line em { font-style: normal; font-weight: 700; }

/* Die Signatur selbst: in einer Schreibschrift, sie baut sich beim ersten
   Sichtbarwerden einmal langsam auf, wie mit dem Pinsel gezogen. */
.signature__sign {
  display: block;
  margin-top: var(--sp-4);
  font-family: "Great Vibes", "Segoe Script", cursive;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  line-height: 1;
  color: var(--gold-light);
  /* Grundzustand sichtbar (auch ohne JavaScript). Beim Reveal fährt eine
     Maske einmal von links nach rechts auf, wie ein Pinselzug. */
  -webkit-mask-image: linear-gradient(90deg, #000 0 0);
  mask-image: linear-gradient(90deg, #000 0 0);
  -webkit-mask-size: 130% 100%;
  mask-size: 130% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.signature.is-in .signature__sign {
  animation: sign-in 1.8s var(--ease) .1s backwards;
}
@keyframes sign-in {
  from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
  to   { -webkit-mask-size: 130% 100%; mask-size: 130% 100%; }
}
.signature__name {
  margin-top: var(--sp-2);
  color: var(--muted-dark);
  font-size: var(--t-small);
}

/* ==========================================================================
   22. BEWEGUNG REDUZIEREN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Markeninteraktionen ohne Bewegung: sichtbar, aber statisch. */
  .gild { background: none; -webkit-text-fill-color: currentColor; color: var(--gold-deep); }
  .signature__sign { -webkit-mask-image: none; mask-image: none; }
  .lightshift::after { display: none; }
  /* Laufband steht still und wird seitwärts scrollbar, damit nichts verloren geht */
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .atelier { transition: opacity .01ms, visibility .01ms; }
}

/* ==========================================================================
   23. DRUCK
   ========================================================================== */
@media print {
  .header, .dock, .hero__scroll, .btn, .form { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .reveal { opacity: 1; transform: none; }
}