/* ==========================================================================
   Kiki's Nails — Startseite
   Tokens und Motion-Werte 1:1 aus BRIEFING.md
   ========================================================================== */

/* ==========================================================================
   Schriften — selbst gehostet (BRIEFING.md Abschnitt 7, DSGVO)
   Kein Request an fonts.googleapis.com oder fonts.gstatic.com: Hotlinking
   überträgt die IP-Adresse der Besucherin ungefragt an Google
   (LG München I, 20.01.2022, Az. 3 O 17493/20).
   Nebeneffekt: der Preload bleibt dauerhaft wirksam, weil Google die
   Subset-URLs nicht mehr unter uns rotieren kann — CLS bleibt 0.

   Nur Gewicht 400, Stil normal: mehr wird auf der Seite nachweislich
   nicht gerendert (im Browser geprüft). Nur latin + latin-ext, die
   Seite ist deutsch.
   ========================================================================== */
/* Bodoni Moda — latin-ext */
@font-face{
  font-family:"Bodoni Moda";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/bodoni-moda-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bodoni Moda — latin */
@font-face{
  font-family:"Bodoni Moda";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/bodoni-moda-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Farben */
  --white:#ffffff;
  --offwhite:#faf9f7;
  --ink:#151514;
  --green:#4d5241;
  --sand:#cbbca8;
  --grey:#8a8580;

  /* Typo */
  --display:"Bodoni Moda","Didot","Playfair Display",Georgia,serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Layout */
  --pad:clamp(18px,2.55vw,38px);
  --rhythm:clamp(56px,9vw,190px);
  --r-lg:30px;
  --r-md:19px;
  --r-sm:16px;

  /* Nur als Sicherheitsnetz gegen einzelne helle Pixel im Video —
     die Lesbarkeit muss der Scrim leisten, nicht der Schatten. */
  --hero-shadow:0 1px 2px rgba(21,21,20,.28);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --reveal-dur:1.15s;
  --menu-dur:.65s;
}

@media (min-width:900px){
  :root{ --r-lg:30px; --menu-dur:.85s; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,p,figure,blockquote,ul,li{ margin:0; padding:0; }
ul{ list-style:none; }
img,svg{ display:block; max-width:100%; }
/* <picture> darf keine eigene Box erzeugen — sonst verliert das Hero-Bild
   seinen Prozenthoehen-Bezug und object-fit greift ins Leere. */
picture{ display:contents; }
button{ font:inherit; color:inherit; background:none; border:0; }

html,body{
  /* Kein horizontaler Overflow — harte Kante gegen 390px-Probleme */
  overflow-x:clip;
  max-width:100%;
}

/* Platz der Scrollleiste dauerhaft reservieren.
   Ohne das erscheint sie erst, wenn der Inhalt geparst ist: der
   Layout-Viewport schrumpft dann um 15px und der rechtsbuendige Burger
   springt mit (gemessen bei 430px, t=21ms, x 378 -> 363, CLS 0.000057).
   Seiten, die ohnehin scrollen, aendern sich dadurch nicht. */
html{ scrollbar-gutter:stable; }

body{
  background:var(--white);
  color:var(--ink);                    /* Fließtext IMMER --ink */
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

a{ color:inherit; text-decoration:none; }

/* Scroll-Lock bei offenem Menü */
body.is-locked{ overflow:hidden; }

.skip-link{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-200%);
  background:var(--ink); color:var(--white);
  padding:10px 16px; border-radius:999px; font-size:13px;
}
.skip-link:focus-visible{ transform:none; }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }

/* ---------- Bausteine ---------- */
.label{
  display:block;
  font-size:11px; line-height:1.4;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey);
}
.label--sand{ color:var(--sand); }

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem,11vw,10.5rem);
  letter-spacing:-.03em;
  line-height:.86;
  color:var(--ink);
}
.display--sm{ font-size:clamp(2.1rem,5.4vw,4.6rem); line-height:.95; }

.arrow{
  width:.9em; height:.9em; flex:none;
  transition:transform .45s var(--ease);
}
a:hover .arrow,
.btn:hover .arrow{ transform:translate(3px,-3px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:14px; letter-spacing:.02em;
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
}

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:15px 26px; border-radius:999px;
  background:var(--sand); color:var(--ink);
  font-size:14px; letter-spacing:.02em;
  transition:background .45s var(--ease), color .45s var(--ease);
}
.btn:hover{ background:var(--white); }
.btn--ghost{
  background:transparent; color:var(--sand);
  box-shadow:inset 0 0 0 1px rgba(203,188,168,.42);
}
.btn--ghost:hover{ background:rgba(203,188,168,.12); color:var(--sand); }

.section{
  padding:var(--rhythm) var(--pad);
}
.section__head{ max-width:1600px; margin:0 auto clamp(34px,4.6vw,70px); }
.section__head .label{ margin-bottom:clamp(16px,2vw,26px); }
/* line-height .86 lässt Unterlängen aus der Box laufen — Abstand daher
   schriftgrößen-relativ, sonst berührt das „g" von „Leistungen." den Lead. */
.section__head .display{ margin-bottom:max(16px,.2em); }
.section__lead{ max-width:46ch; color:var(--ink); }
.section__head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}

/* Bild-Seitenverhältnisse */
.ratio-3x4,.ratio-16x9{
  position:relative; overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--offwhite);
}
.ratio-3x4{ aspect-ratio:3/4; }
.ratio-16x9{ aspect-ratio:16/9; }
.ratio-3x4 img,.ratio-16x9 img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

/* ==========================================================================
   Header — EIN persistenter Header für die gesamte Seite
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:clamp(14px,1.6vw,22px) var(--pad);
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease;
}

/* Im dunklen Zustand bekommt der Header seine weisse Flaeche zurueck,
   sobald gescrollt wird. Gemessener Grund: ueber Fotos traegt reine
   Textfarbe nicht — die Wortmarke faellt im Hero von 6,97:1 bei 0px
   auf 1,47:1 bei 260px Scroll. Eine Flaeche macht den Kontrast vom
   Bildinhalt unabhaengig. Im hellen Zustand bleibt der Header
   flaechenlos, sonst waere die Wortmarke am Seitenanfang eingerahmt. */
.header.is-dark.is-scrolled{
  background:var(--white);
  box-shadow:0 1px 0 rgba(21,21,20,.08);
}
/* Ueber dem offenen Menue traegt das Panel selbst die Flaeche. */
.header.is-open{ background:transparent; box-shadow:none; }

/* ---------------------------------------------------------------------
   Adaptive Faerbung. Wortmarke, Burger und Label wechseln IMMER
   gemeinsam — nie einzeln. Ohne Klasse gilt dunkel, das ist der
   sichere Standard fuer eine ueberwiegend weisse Seite.
   --------------------------------------------------------------------- */
.header__logo img{
  height:clamp(15px,1.5vw,19px); width:auto;
  transition:filter .35s ease;
}
.burger,
.burger__label{ transition:color .35s ease, text-shadow .35s ease; }

/* dunkel (Standard) */
.header .header__logo img{ filter:none; }
.header .burger{ color:var(--ink); text-shadow:none; }

/* hell — nur hier bleibt der dezente Schatten als Sicherheitsnetz */
.header.is-light .header__logo img{
  /* Wortmarke ist ein SVG mit fester Fuellfarbe — Filter statt color */
  filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(21,21,20,.28));
}
.header.is-light .burger{
  color:#ffffff;
  text-shadow:var(--hero-shadow);
}

.burger{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 4px; cursor:pointer;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.burger__label{ line-height:1; }
.burger__box{
  position:relative; display:block;
  width:26px; height:12px;
}
.burger__line{
  position:absolute; left:0; top:50%;
  width:100%; height:1px;
  background:currentColor;
  transition:transform .3s var(--ease);
}
.burger__line:nth-child(1){ transform:translateY(-5px); }
.burger__line:nth-child(2){ transform:translateY(4px); }
/* Burger morpht in-place zum × — kein zweiter Header, kein Icon-Tausch */
.burger[aria-expanded="true"] .burger__line:nth-child(1){ transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2){ transform:rotate(-45deg); }

@media (max-width:520px){
  .burger__label{ display:none; }
}

/* ==========================================================================
   Fullscreen-Menü
   ========================================================================== */
.menu{
  position:fixed; inset:0; z-index:110;
  height:100dvh;
  background:var(--white);            /* deckend, kein Alpha */
  transform:translate3d(0,-100%,0);
  will-change:transform;
  overflow-y:auto;
  overscroll-behavior:contain;
  /* NIE display:none — Element bleibt gerendert, nur unsichtbar geparkt */
  visibility:hidden;
  transition:transform var(--menu-dur) var(--ease), visibility 0s linear var(--menu-dur);
}
.menu.is-open{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform var(--menu-dur) var(--ease), visibility 0s;
}

.menu__inner{
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(clamp(14px,1.6vw,22px) + 46px) var(--pad) calc(var(--pad) + 10px);
}

.menu__list{
  display:flex; flex-direction:column;
  padding-top:clamp(20px,5vw,60px);
}
.menu__item{
  border-top:1px solid rgba(21,21,20,.1);
}
.menu__item:last-child{ border-bottom:1px solid rgba(21,21,20,.1); }
.menu__item a{
  display:flex; align-items:baseline; gap:clamp(12px,2vw,28px);
  padding:clamp(12px,1.9vw,22px) 0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,7.2vw,5rem);
  line-height:1;
  letter-spacing:-.03em;
  text-transform:uppercase;              /* Menüpunkte GROSS */
  color:var(--ink);
  transition:color .4s var(--ease);
}
.menu__item a:hover{ color:var(--green); }
.menu__idx{
  font-family:var(--body);
  font-size:11px; letter-spacing:.18em;
  color:var(--grey);
}

/* Links "fahren mit": Fade + 24px Rise, Stagger 0.06s */
.menu__item,
.menu__col{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.menu.is-open .menu__item,
.menu.is-open .menu__col{
  opacity:1;
  transform:none;
  transition-delay:var(--d,0s);
}

.menu__foot{
  display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,80px);
  padding-top:clamp(28px,4vw,50px);
}
.menu__col .label{ margin-bottom:8px; }
.menu__col p{ font-size:14px; color:var(--ink); }
.menu__col a{ border-bottom:1px solid rgba(21,21,20,.22); }

/* ==========================================================================
   (1) Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100dvh;
  padding:calc(clamp(14px,1.6vw,22px) + 60px) var(--pad) calc(var(--pad) + 8px);
  display:grid;
  /* Explizite Spalten UND Platzierung — sonst legt die Auto-Platzierung
     eine zweite implizite Spalte an und die Wortmarke rutscht aus der Mitte. */
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr auto;
  column-gap:var(--pad);
  overflow:hidden;
}
/* Nicht sichtbarer Marker: deklariert die Zone, in der der Hero-Scrim
   den Untergrund wirklich abdunkelt. Rein fuer den adaptiven Header. */
.hero__headerzone{
  position:absolute; top:0; left:0; right:0; height:70px;
  z-index:-1; pointer-events:none;
}

.hero__media{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden;
  background:var(--offwhite);
}
.hero__img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  transition:transform 1.4s var(--ease);
}
.hero__img.is-settled{ transform:scale(1); }

/* Hero-Video liegt ueber dem Poster. Es blendet erst ein, wenn es
   wirklich laeuft — schlaegt das fehl, bleibt das Standbild stehen.
   Der Settle laeuft ueber dieselbe Klasse und wird in main.js EINMAL
   ausgeloest, fuer Bild und Video gleichzeitig. */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .8s var(--ease), transform 1.4s var(--ease);
  pointer-events:none;
}
.hero__video.is-settled{ transform:scale(1); }
.hero__video.is-playing{ opacity:1; }

/* ---------------------------------------------------------------------
   Gerichtete Scrims — kein flaechiger Schleier.
   Das Motiv hat links eine fast weisse Wand, rechts mitteltoniges
   Salbeigruen und unten warmes Holz. Ein flaechiges Overlay wuerde die
   helle Wand grau zuziehen; deshalb zwei Verlaeufe nur dort, wo Text
   steht: unten (Tagline) und oben (Leistungsliste, Header).
   Ton ist --ink, nie reines Schwarz und nie gruenstichig.
   Sie liegen ueber dem Video, aber innerhalb von .hero__media
   (z-index:-1) — also immer unter dem Text.
   --------------------------------------------------------------------- */
.hero__media::before,
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}
/* unten: traegt Headline und Tagline.
   Stops aus der Messung zurueckgerechnet: die Oberkante der Headline
   liegt bei ~33% Hoehe und braucht dort >= .40 Deckung, damit weisser
   Text auch im hellsten Frame (t=4,9s) ueber 3:1 bleibt. */
.hero__media::after{
  background:linear-gradient(to top,
    rgba(21,21,20,.78) 0%,
    rgba(21,21,20,.62) 18%,
    rgba(21,21,20,.44) 34%,
    rgba(21,21,20,.16) 48%,
    transparent 60%);
}
/* oben: traegt Header und Leistungsliste.
   Die Wortmarke steht links vor der hellen Wand (gemessene Leuchtdichte
   ~0,45) und braucht dort >= .60 Deckung fuer 4,5:1. Deshalb steiler
   und kraeftiger als der untere Verlauf, dafuer auf die oberen ~9%
   begrenzt, damit daraus kein Balken wird. */
.hero__media::before{
  background:linear-gradient(to bottom,
    rgba(21,21,20,.76) 0%,
    rgba(21,21,20,.50) 9%,
    rgba(21,21,20,.20) 20%,
    transparent 34%);
}

.hero__services{
  grid-area:1 / 2 / 2 / 3;
  justify-self:end; align-self:start; text-align:right;
  display:flex; flex-direction:column; gap:4px;
  font-size:12px; letter-spacing:.06em;
  color:rgba(255,255,255,.86);
  text-shadow:var(--hero-shadow);
}

/* Rasterzeile 2 bleibt bewusst leer (1fr): sie haelt den Abstand
   zwischen Leistungsliste oben und Tagline unten. Die frueher hier
   zentrierte Wortmarke ist entfallen — sie doppelte den Header und
   lag auf Pampasgras und Lampe. */

.hero__tagline{
  grid-area:3 / 1 / 4 / 2;
  align-self:end;
  max-width:34ch;
}
.hero__tagline h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  color:#ffffff;                          /* erster Satz: weiss */
  text-shadow:var(--hero-shadow);
  margin-bottom:14px;
}
.hero__tagline p{
  font-size:14px;
  color:rgba(255,255,255,.78);            /* Rest: gedimmtes Weiss */
  text-shadow:var(--hero-shadow);
  max-width:38ch;
}

/* CTA-Karte unten rechts */
.cta-card{
  display:block;
  background:var(--white);
  border-radius:var(--r-md);
  padding:18px 20px;
  max-width:290px;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.cta-card:hover{ transform:translateY(-3px); box-shadow:0 12px 34px rgba(21,21,20,.1); }
.cta-card__label{
  display:block; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey); margin-bottom:10px;
}
.cta-card__text{
  display:block; font-size:13.5px; line-height:1.5; color:var(--ink);
  margin-bottom:14px;
}
.cta-card__go{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:13px; color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid var(--ink);
}
.hero__cta{
  grid-area:3 / 2 / 4 / 3;
  justify-self:end; align-self:end;
}

@media (max-width:820px){
  .hero{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto auto;
    row-gap:22px;
  }
  .hero__services{
    grid-area:1 / 1 / 2 / 2;
    flex-direction:row; flex-wrap:wrap; gap:4px 14px;
    justify-self:start; text-align:left;
    font-size:11px; color:var(--grey);
    max-width:24ch;
  }
  .hero__tagline{ grid-area:3 / 1 / 4 / 2; max-width:none; }
  .hero__cta{ grid-area:4 / 1 / 5 / 2; justify-self:stretch; max-width:none; }
}

/* ==========================================================================
   (2) Leistungen
   ========================================================================== */
.services{ background:var(--white); }

.grid-4{
  max-width:1600px; margin:0 auto;
  display:grid; gap:clamp(26px,2.4vw,38px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .grid-4{ grid-template-columns:minmax(0,1fr); } }

/* Karte: dünne Kopfzeile über großem Bild */
.card__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px;
  padding-bottom:10px; margin-bottom:14px;
  border-bottom:1px solid rgba(21,21,20,.14);
}
.card__name{
  font-family:var(--display);
  font-size:clamp(1.05rem,1.3vw,1.35rem);
  letter-spacing:-.01em; line-height:1.1;
  color:var(--ink);
}
.card__idx{
  font-size:11px; letter-spacing:.18em; color:var(--sand);
}
.card__media{ border-radius:var(--r-sm); }
.card__media img{ transition:transform .9s var(--ease); }
.card a:hover .card__media img{ transform:scale(1.04); }
.card__text{
  margin-top:16px;
  font-size:14px; color:var(--ink); max-width:34ch;
}

/* ==========================================================================
   (3) + (7) Dunkle Inset-Karten mit schmalem hellen Rand ums Viewport
   ========================================================================== */
.inset{
  padding:0 var(--pad) var(--rhythm);
  background:var(--white);
}
.inset--cta{ padding-top:0; }

.inset__card{
  max-width:1600px; margin:0 auto;
  background:var(--green);
  color:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(34px,5vw,86px);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,4vw,70px);
  align-items:center;
}
@media (max-width:900px){
  .inset__card{ grid-template-columns:minmax(0,1fr); border-radius:20px; }
}

.inset__text .label{ margin-bottom:clamp(16px,2vw,26px); }
.inset__text .display{ color:var(--white); margin-bottom:clamp(18px,2vw,28px); }
.inset__text p{
  color:var(--sand);
  max-width:52ch;
  margin-bottom:16px;
}
.inset__text .link-arrow{ margin-top:10px; color:var(--white); }
.inset__media{ border-radius:var(--r-md); }

.inset__card--cta{
  grid-template-columns:minmax(0,1fr);
  text-align:left;
  justify-items:start;
}
.inset__card--cta .display{ color:var(--white); max-width:16ch; }
.inset__card--cta p{ color:var(--sand); max-width:54ch; }
.inset__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(20px,2.4vw,32px);
}

/* ==========================================================================
   (4) Galerie
   ========================================================================== */
.gallery{ background:var(--offwhite); }
.gallery__row{
  max-width:1600px; margin:0 auto;
  display:grid; gap:clamp(16px,1.6vw,26px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1000px){ .gallery__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.gallery__item figure img{ transition:transform .9s var(--ease); }
.gallery__item:hover figure img{ transform:scale(1.04); }
.gallery__cap{
  display:block; margin-top:12px;
  font-size:12px; letter-spacing:.04em; color:var(--ink);
}
.gallery__cap em{ font-style:normal; color:var(--sand); margin-left:6px; }

/* ==========================================================================
   (5) Bewertungen
   ========================================================================== */
.reviews{
  background:var(--white);
  max-width:1600px; margin:0 auto;
  display:grid; gap:clamp(28px,3vw,54px);
  grid-template-columns:auto 1fr 1fr;
  align-items:start;
}
@media (max-width:900px){ .reviews{ grid-template-columns:minmax(0,1fr); } }

.reviews__num{
  display:block;
  font-family:var(--display);
  font-size:clamp(3rem,5vw,4.6rem);
  line-height:1; letter-spacing:-.03em;
  color:var(--ink);
}
.reviews__stars{
  display:flex; gap:3px; margin:12px 0 8px;
  color:var(--sand);
}
.reviews__stars svg{ width:15px; height:15px; }
.reviews__meta{ font-size:12px; color:var(--grey); }

.reviews__quote p{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.35; letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:14px;
}
.reviews__quote cite{
  font-style:normal; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
}

/* ==========================================================================
   (6) Einzugsgebiet
   ========================================================================== */
.area{ background:var(--offwhite); }
.area__list{ max-width:1600px; margin:0 auto; }
.area__list li{ border-top:1px solid rgba(21,21,20,.13); }
.area__list li:last-child{ border-bottom:1px solid rgba(21,21,20,.13); }
.area__list a{
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  padding:clamp(16px,2vw,26px) 0;
  transition:color .4s var(--ease);
}
.area__list a:hover{ color:var(--green); }
.area__idx{ font-size:11px; letter-spacing:.18em; color:var(--sand); flex:none; }
.area__name{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.05; letter-spacing:-.03em;
  flex:1 1 auto;
  min-width:0;
}
.area__list .arrow{ width:22px; height:22px; color:var(--grey); }

/* ==========================================================================
   (8) Footer
   ========================================================================== */
.footer{
  background:var(--green);
  color:var(--white);
  padding:var(--rhythm) var(--pad) calc(var(--pad) + 8px);
}
.footer__top{
  max-width:1600px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(30px,5vw,90px);
  align-items:start;
  padding-bottom:clamp(40px,5vw,80px);
}
@media (max-width:800px){ .footer__top{ grid-template-columns:minmax(0,1fr); } }

.footer__logo{ width:clamp(110px,12vw,170px); height:auto; }

.footer__cols{
  display:grid; gap:clamp(24px,3vw,50px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:640px){ .footer__cols{ grid-template-columns:minmax(0,1fr); } }
.footer__col .label{ margin-bottom:10px; }
.footer__col p{ font-size:14px; color:var(--white); }
.footer__col a{ border-bottom:1px solid rgba(255,255,255,.3); }

.footer__bottom{
  max-width:1600px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:14px 26px;
  justify-content:space-between; align-items:center;
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:12px; color:var(--sand);
}
.footer__legal{ display:flex; gap:22px; }
.footer__legal a:hover{ color:var(--white); }

/* ==========================================================================
   Scroll-Reveals
   Rise 40–60px + Fade, Bilder zusätzlich scale(1.05 → 1)
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,48px,0);
  transition:
    opacity var(--reveal-dur) var(--ease) var(--d,0s),
    transform var(--reveal-dur) var(--ease) var(--d,0s);
}
[data-reveal].is-in{
  opacity:1;
  transform:none;
}
[data-reveal] img{
  transform:scale(1.05);
  transition:transform 1.4s var(--ease) var(--d,0s);
}
[data-reveal].is-in img{ transform:scale(1); }

/* Hover-Scale darf den Reveal nicht überschreiben */
.card a:hover .card__media img,
.gallery__item:hover figure img{ transform:scale(1.04); }

/* ==========================================================================
   Curtain — Seitenuebergang (BRIEFING.md 2)
   Dunkelgruenes Panel von unten, 0.6s Desktop / 0.45s Mobil,
   cubic-bezier(.76,0,.24,1), Wortmarke zentriert.
   Faehrt oben wieder heraus; JS raeumt es nach 1.5s in jedem Fall weg.
   ========================================================================== */
.curtain{
  position:fixed; inset:0; z-index:200;
  background:var(--green);
  display:flex; align-items:center; justify-content:center;
  transform:translate3d(0,100%,0);
  will-change:transform;
  pointer-events:none;
  transition:transform .6s cubic-bezier(.76,0,.24,1);
}
.curtain.is-covering{ transform:translate3d(0,0,0); }
.curtain.is-leaving{ transform:translate3d(0,-100%,0); }
.curtain__mark{
  width:clamp(110px,14vw,190px); height:auto;
  opacity:0; transition:opacity .3s var(--ease);
}
.curtain.is-covering .curtain__mark{ opacity:1; }
html.is-transitioning{ cursor:progress; }

@media (max-width:700px){
  .curtain{ transition-duration:.45s; }
}

/* Ankommender Inhalt steigt 50px auf. Als Animation, nicht als Klasse,
   die jemand vergessen koennte zu entfernen — sie endet von selbst. */
html.is-arriving #hauptinhalt{ animation:curtain-rise .7s var(--ease) both; }
@keyframes curtain-rise{
  from{ transform:translate3d(0,50px,0); opacity:0; }
  to{ transform:none; opacity:1; }
}

/* ==========================================================================
   Galerie — Masonry-Bildwand (BRIEFING.md 6, Fassung 05.09.2026)
   ========================================================================== */
.wall{
  --gutter:clamp(6px,.6vw,12px);
  column-count:4;
  column-gap:var(--gutter);
  padding:0 var(--gutter) var(--rhythm);
}
@media (max-width:900px){ .wall{ column-count:3; } }
@media (max-width:600px){ .wall{ column-count:2; } }

.wall__tile{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:block; width:100%;
  margin:0 0 var(--gutter);
  padding:0; border:0;
  position:relative; overflow:hidden;
  border-radius:8px;
  background:var(--offwhite);
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.wall__tile img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.r-3x4{ aspect-ratio:3/4; }
.r-4x5{ aspect-ratio:4/5; }
.r-1x1{ aspect-ratio:1/1; }
.r-16x9{ aspect-ratio:16/9; }

.gallery-intro{ padding:calc(var(--rhythm) * .55) var(--pad) clamp(20px,2.4vw,34px); }
.gallery-intro .label{ margin-bottom:clamp(16px,2vw,26px); }
.gallery-intro .display{ margin-bottom:max(16px,.2em); }
.gallery-intro p{ max-width:46ch; color:var(--ink); }

/* Hover erst nach den Reveal-Regeln, damit es diese ueberschreibt. */
@media (hover:hover){
  .wall__tile img{ transition:transform .6s var(--ease); }
  .wall__tile:hover img{ transform:scale(1.03); }
}

/* ==========================================================================
   /ueber-chiara/
   ========================================================================== */
.ueber{ position:relative; }

/* Der Faden. Absolut im Fluss von <main> — nicht fixed, nicht sticky.
   Er scrollt mit der Seite mit; nichts wird gepinnt oder gehalten. */
.faden{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
.ueber > section{ position:relative; z-index:1; }
@media (max-width:900px){
  /* Auf schmalen Viewports faellt die Linie ersatzlos weg. */
  .faden{ display:none; }
}

/* (01) Hero */
.uc-hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,72px);
  align-items:end;
  padding:calc(var(--rhythm) * .75) var(--pad) var(--rhythm);
  max-width:1600px; margin:0 auto;
}
.uc-hero__text .label{ margin-bottom:clamp(16px,2vw,26px); }
.uc-hero__text .display{ margin-bottom:max(16px,.2em); }
.uc-hero__name{
  font-family:var(--display);
  font-size:clamp(2.2rem,6vw,5.2rem);
  line-height:.9; letter-spacing:-.03em;
  color:var(--sand);
  margin-bottom:clamp(18px,2.4vw,32px);
}
.uc-hero__line{
  font-size:clamp(15px,1.3vw,18px);
  max-width:34ch; color:var(--ink);
}
.uc-hero__media{
  border-radius:var(--r-md);
  justify-self:end;
  width:min(100%,520px);
  transform:translateY(clamp(0px,3vw,48px));
}
.uc-hero__cap{
  position:absolute; left:0; bottom:0; right:0;
  padding:14px 16px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white);
  background:linear-gradient(to top, rgba(21,21,20,.62), transparent);
}
@media (max-width:900px){
  .uc-hero{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .uc-hero__media{ justify-self:stretch; width:100%; transform:none; }
}

/* (02) Diptychon */
.uc-diptychon{
  max-width:1600px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,80px);
}
.uc-diptychon__seite{ position:relative; padding-left:clamp(18px,2vw,34px); }
.uc-diptychon__seite + .uc-diptychon__seite{
  border-left:1px solid rgba(203,188,168,.7);
}
.uc-diptychon__idx{
  display:block; margin-bottom:12px;
  font-size:11px; letter-spacing:.18em; color:var(--sand);
}
.uc-diptychon__titel{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.05; letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:clamp(14px,1.6vw,22px);
}
.uc-diptychon__seite p{ max-width:42ch; margin-bottom:14px; }
@media (max-width:900px){
  .uc-diptychon{ grid-template-columns:minmax(0,1fr); }
  .uc-diptychon__seite{ padding-left:0; }
  .uc-diptychon__seite + .uc-diptychon__seite{
    border-left:0; border-top:1px solid rgba(203,188,168,.7);
    padding-top:clamp(24px,3vw,40px);
  }
}

/* (03) Zitat */
.uc-zitat{ background:var(--offwhite); }
.uc-zitat > .label{ max-width:1600px; margin:0 auto clamp(30px,4vw,60px); }
.uc-zitat__fig{ max-width:1100px; margin:0 auto; }
.uc-zitat blockquote p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,3rem);
  line-height:1.18; letter-spacing:-.02em;
  color:var(--ink);
}
.uc-zitat figcaption{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey);
}

/* (04) Der Weg */
.uc-weg__liste{ max-width:1600px; margin:0 auto; list-style:none; }
.uc-weg__liste li{
  display:flex; gap:clamp(16px,2.4vw,40px);
  padding:clamp(20px,2.4vw,32px) 0;
  border-top:1px solid rgba(21,21,20,.13);
}
.uc-weg__liste li:last-child{ border-bottom:1px solid rgba(21,21,20,.13); }
.uc-weg__idx{ font-size:11px; letter-spacing:.18em; color:var(--sand); flex:none; padding-top:6px; }
.uc-weg__liste h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem,2vw,1.7rem);
  letter-spacing:-.02em; color:var(--ink);
  margin-bottom:8px;
}
.uc-weg__liste p{ color:var(--ink); max-width:52ch; }

/* (05) Handwerk */
.uc-handwerk{ background:var(--offwhite); }
.uc-spalten{
  max-width:1600px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,54px);
}
.uc-spalten p{ max-width:40ch; }
@media (max-width:900px){ .uc-spalten{ grid-template-columns:minmax(0,1fr); } }

/* (06) Zertifikate */
.uc-zertifikate__text{ max-width:56ch; }

/* ==========================================================================
   /termin/ — Anfrage-Konfigurator
   ========================================================================== */
.tm-vh{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden;
  white-space:nowrap;
}
.tm-honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tm-kopf{ padding:calc(var(--rhythm) * .7) var(--pad) clamp(24px,3vw,44px); max-width:1600px; margin:0 auto; }
.tm-kopf .label{ margin-bottom:clamp(16px,2vw,26px); }
.tm-kopf .display{ margin-bottom:max(16px,.2em); }
.tm-kopf__lead{ max-width:52ch; color:var(--ink); }
.tm-vertrauen{
  margin-top:clamp(14px,1.6vw,22px);
  font-size:13px; color:var(--grey);
  padding-left:14px; border-left:2px solid var(--sand);
}
.tm-vertrauen--klein{ margin-top:0; }

.tm-raster{
  max-width:1600px; margin:0 auto;
  padding:0 var(--pad) var(--rhythm);
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
@media (max-width:1000px){
  .tm-raster{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Schritte ---------- */
.tm-schritt{ border:0; padding:0; margin:0 0 clamp(38px,5vw,70px); }
.tm-schritt legend, .tm-schritt__kopf{
  display:flex; align-items:baseline; gap:14px;
  padding:0; margin-bottom:10px;
}
.tm-schritt__idx{ font-size:11px; letter-spacing:.18em; color:var(--sand); }
.tm-schritt__titel{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.9rem);
  letter-spacing:-.02em; color:var(--ink);
}
.tm-schritt__hinweis{
  font-size:13.5px; color:var(--grey);
  max-width:56ch; margin-bottom:clamp(16px,2vw,26px);
}

/* ---------- Leistungs-Karten ---------- */
.tm-karten{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px); }
@media (max-width:620px){ .tm-karten{ grid-template-columns:minmax(0,1fr); } }
.tm-karte{ display:block; cursor:pointer; }
.tm-karte__inner{
  position:relative; display:block;
  padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-sm);
  background:var(--offwhite);
  box-shadow:inset 0 0 0 1px rgba(21,21,20,.08);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.tm-karte__name{
  display:block; font-family:var(--display);
  font-size:clamp(1rem,1.3vw,1.2rem); color:var(--ink); margin-bottom:6px;
}
.tm-karte__text{ display:block; font-size:13px; color:var(--grey); max-width:30ch; }
.tm-karte__haken{
  position:absolute; top:14px; right:14px;
  width:22px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); background:transparent;
  box-shadow:inset 0 0 0 1px rgba(21,21,20,.18);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.tm-karte__haken svg{ width:13px; height:13px; opacity:0; transition:opacity .2s var(--ease); }
.tm-karte input:checked + .tm-karte__inner{
  background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--green);
}
.tm-karte input:checked + .tm-karte__inner .tm-karte__haken{
  background:var(--green); box-shadow:none;
}
.tm-karte input:checked + .tm-karte__inner .tm-karte__haken svg{ opacity:1; }
.tm-karte input:focus-visible + .tm-karte__inner{
  outline:2px solid var(--green); outline-offset:3px;
}

/* ---------- Kacheln (Tage / Tageszeit) ---------- */
.tm-gruppe{ border:0; padding:0; margin:0 0 clamp(22px,2.6vw,34px); }
.tm-gruppe__legende{
  padding:0; margin-bottom:12px;
  font-size:13.5px; color:var(--ink);
}
.tm-kacheln{ display:flex; flex-wrap:wrap; gap:8px; }
.tm-kachel{ cursor:pointer; }
.tm-kachel span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; padding:11px 16px;
  border-radius:999px; font-size:13px; letter-spacing:.04em;
  color:var(--ink); background:var(--offwhite);
  box-shadow:inset 0 0 0 1px rgba(21,21,20,.1);
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.tm-kacheln--breit .tm-kachel span{ min-width:104px; }
.tm-kachel input:checked + span{
  background:var(--green); color:var(--white); box-shadow:none;
}
.tm-kachel input:focus-visible + span{ outline:2px solid var(--green); outline-offset:3px; }

/* ---------- Felder ---------- */
.tm-feld{ margin-bottom:clamp(18px,2.2vw,28px); }
.tm-feld label{
  display:block; margin-bottom:8px;
  font-size:13.5px; color:var(--ink);
}
.tm-optional{ color:var(--grey); font-size:12px; }
.tm-pflicht{ color:var(--sand); }
.tm-feld input[type=text],
.tm-feld input[type=email],
.tm-feld input[type=tel],
.tm-feld textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  padding:13px 15px; border:0; border-radius:var(--r-sm);
  background:var(--offwhite);
  box-shadow:inset 0 0 0 1px rgba(21,21,20,.12);
  transition:box-shadow .3s var(--ease);
}
.tm-feld textarea{ resize:vertical; min-height:110px; }
.tm-feld input:focus-visible,
.tm-feld textarea:focus-visible{
  outline:none; box-shadow:inset 0 0 0 1.5px var(--green);
}
.tm-hilfe{ margin-top:7px; font-size:12.5px; color:var(--grey); }
.tm-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px); }
@media (max-width:620px){ .tm-zwei{ grid-template-columns:minmax(0,1fr); } }

/* Sanfte Fehler — kein Alarmrot, Ton bleibt Sand und Grau. */
.tm-fehler{
  margin-top:8px; font-size:12.5px; color:var(--ink);
  padding-left:11px; border-left:2px solid var(--sand);
}
[aria-invalid="true"] input[type=text],
[aria-invalid="true"] input[type=email],
[aria-invalid="true"] input[type=tel],
input[aria-invalid="true"]{
  box-shadow:inset 0 0 0 1.5px var(--sand);
}
.tm-zusammenfassung{
  margin-bottom:clamp(24px,3vw,38px);
  padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-sm);
  background:var(--offwhite);
  box-shadow:inset 0 0 0 1px var(--sand);
}
.tm-zusammenfassung:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.tm-zusammenfassung__titel{ font-size:13.5px; color:var(--ink); margin-bottom:8px; }
.tm-zusammenfassung ul{ list-style:none; }
.tm-zusammenfassung li{ font-size:13px; margin-top:5px; }
.tm-zusammenfassung a{ color:var(--ink); border-bottom:1px solid var(--sand); }
.tm-live{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- Einwilligung ---------- */
.tm-feld--consent{ margin-top:clamp(24px,3vw,36px); }
/* Spezifitaet bewusst erhoeht: .tm-feld label setzt display:block und
   wuerde die Flex-Zeile sonst schlagen (0,1,1 gegen 0,1,0). */
.tm-feld .tm-consent{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin:0; }
.tm-consent__box{
  flex:none; width:22px; height:22px; margin-top:1px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:var(--white); background:transparent;
  box-shadow:inset 0 0 0 1px rgba(21,21,20,.28);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.tm-consent__box svg{ width:13px; height:13px; opacity:0; transition:opacity .2s var(--ease); }
.tm-consent input:checked + .tm-consent__box{ background:var(--green); box-shadow:none; }
.tm-consent input:checked + .tm-consent__box svg{ opacity:1; }
.tm-consent input:focus-visible + .tm-consent__box{ outline:2px solid var(--green); outline-offset:3px; }
.tm-consent__text{ font-size:13px; color:var(--ink); line-height:1.55; }
.tm-consent__text a{ border-bottom:1px solid var(--sand); }

.tm-absenden{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); flex-wrap:wrap; }
.tm-submit{ background:var(--green); color:var(--white); }
.tm-submit:hover{ background:var(--ink); color:var(--white); }
.tm-submit[disabled]{ opacity:.6; cursor:progress; }

/* ---------- Deine Auswahl ---------- */
.tm-auswahl__innen{
  position:sticky; top:calc(clamp(14px,1.6vw,22px) + 62px);
  padding:clamp(20px,2.2vw,28px);
  border-radius:var(--r-md);
  background:var(--offwhite);
  box-shadow:inset 0 0 0 1px rgba(21,21,20,.08);
}
.tm-auswahl__titel{
  font-family:var(--display); font-weight:400;
  font-size:1.15rem; color:var(--ink);
  margin-bottom:clamp(14px,1.6vw,20px);
}
.tm-auswahl__zeile{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-top:1px solid rgba(21,21,20,.1);
}
.tm-auswahl__zeile dt{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); flex:none; }
.tm-auswahl__zeile dd{ font-size:13px; color:var(--ink); text-align:right; }
.tm-auswahl__fuss{
  margin-top:clamp(14px,1.6vw,20px); padding-top:14px;
  border-top:1px solid rgba(21,21,20,.1);
  font-size:12px; color:var(--grey);
}
@media (max-width:1000px){ .tm-auswahl{ display:none; } }

/* ---------- Mobile Bottom-Bar ---------- */
.tm-bar{ display:none; }
@media (max-width:1000px){
  .tm-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    background:var(--white);
    box-shadow:0 -1px 0 rgba(21,21,20,.1), 0 -12px 30px rgba(21,21,20,.06);
    transform:translate3d(0,0,0);
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  /* Verschwindet, solange in ein Feld getippt wird — sonst verdeckt die
     Bildschirmtastatur zusammen mit der Bar genau das aktive Feld. */
  .tm-bar.is-versteckt{ transform:translate3d(0,110%,0); opacity:0; pointer-events:none; }
  .tm-bar__label{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
  .tm-bar__wert{ display:block; font-size:13px; color:var(--ink); }
  .tm-bar__btn{
    flex:none; padding:12px 20px; border-radius:999px;
    background:var(--green); color:var(--white);
    font-size:13px; cursor:pointer;
  }
}

/* ---------- Danke ---------- */
.tm-danke{
  max-width:1600px; margin:0 auto;
  padding:calc(var(--rhythm) * .8) var(--pad) var(--rhythm);
}
.tm-danke__innen{ max-width:60ch; }
.tm-danke .label{ margin-bottom:clamp(16px,2vw,26px); }
.tm-danke .display{ margin-bottom:max(16px,.2em); }
.tm-danke .display:focus-visible{ outline:2px solid var(--green); outline-offset:6px; }
.tm-danke__text{ color:var(--ink); margin-bottom:14px; }
.tm-danke__text--klein{ font-size:14px; color:var(--grey); }
.tm-danke__aktionen{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,32px);
  flex-wrap:wrap; margin-top:clamp(24px,3vw,38px);
}
.tm-danke__aktionen .btn{ background:var(--green); color:var(--white); }
.tm-danke__aktionen .btn:hover{ background:var(--ink); }

/* ==========================================================================
   Lightbox — eigenes Modul, teilt sich nichts mit Curtain oder Menue
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(21,21,20,.95);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,64px);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .4s var(--ease), visibility 0s;
}
.lightbox__fig{
  margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.lightbox__img{
  max-width:100%; max-height:78vh;
  width:auto; height:auto;
  border-radius:8px;
  object-fit:contain;
}
.lightbox__cap{
  font-size:12px; letter-spacing:.06em;
  color:var(--sand); text-align:center; max-width:60ch;
}
.lightbox__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); cursor:pointer;
  background:rgba(255,255,255,.08);
  transition:background .3s var(--ease);
}
.lightbox__btn:hover{ background:rgba(255,255,255,.18); }
.lightbox__btn--prev{ left:clamp(8px,2vw,28px); }
.lightbox__btn--next{ right:clamp(8px,2vw,28px); }
.lightbox__close{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px);
  width:46px; height:46px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); cursor:pointer;
  background:rgba(255,255,255,.08);
  transition:background .3s var(--ease);
}
.lightbox__close:hover{ background:rgba(255,255,255,.18); }
.lightbox__zaehler{
  position:absolute; bottom:clamp(12px,2vw,26px); left:50%;
  transform:translateX(-50%);
  font-size:11px; letter-spacing:.18em; color:var(--sand);
}
@media (max-width:600px){
  .lightbox__btn{ width:44px; height:44px; }
}

/* ==========================================================================
   prefers-reduced-motion — alles sichtbar, keine Bewegung
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal] img{ transform:none !important; }
  .hero__img{ transform:none !important; }
  .hero__video{ transform:none !important; }
  .curtain{ display:none !important; }
  html.is-arriving #hauptinhalt{ animation:none !important; }
  /* Faden vollstaendig gezeichnet, keine Animation */
  .faden__pfad{ stroke-dasharray:1 !important; stroke-dashoffset:0 !important; }
  /* Header schaltet sofort um, ohne Farbuebergang */
  .header__logo img,
  .header .burger,
  .header .burger__label{ transition:none !important; }
  .menu__item,.menu__col{ opacity:1; transform:none; }
}