/* ==========================================================================
   PIANOVIBES — Ekaterina Gehring
   Maison-Ästhetik nach dem Vorbild von Graff und Harry Winston:
   Elfenbein, Ebenholz, Messing. Keine Rundungen, keine Schatten —
   getrennt wird nur mit Haarlinien, getragen wird von Weißraum.

   Aufbau
     1  Schriften (selbst ausgeliefert)      8  Bühne und Kopfbänder
     2  Marken-Tokens                        9  Abschnittskopf
     3  Basis                               10  Redaktionelle Blöcke
     4  Typografie                          11  Bildkacheln
     5  Hilfsklassen                        12  Preise
     6  Bausteine                           13  Kontakt und Fragen
     7  Navigation                          14  Fuß, Bewegung, Responsiv
   ========================================================================== */

/* --- 1. Schriften ------------------------------------------------------- */
/* Liegen unter fonts/ auf dem eigenen Server. Bewusst nicht von Google
   geladen: Das würde die IP-Adresse jedes Besuchers dorthin übertragen. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-italic-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-italic-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-italic-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-italic-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-300-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-500-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/cormorant-garamond-500-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/montserrat-300-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/montserrat-300-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-500-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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-500-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;
}

/* --- 2. Marken-Tokens --------------------------------------------------- */
:root {
  /* Farben — 60 % Elfenbein, 30 % Ebenholz, 10 % Messing */
  --ivory:        #F5F2EB;
  --ivory-deep:   #EAE4D8;
  --ink:          #141110;
  --ink-soft:     #4C443E;
  --ink-mute:     #7C736B;
  --brass:        #A98850;
  --brass-light:  #C7AC79;
  --hairline:     rgba(20, 17, 16, 0.14);
  --hairline-inv: rgba(245, 242, 235, 0.22);
  --on-ink:       rgba(245, 242, 235, 0.74);
  --on-ink-mute:  rgba(245, 242, 235, 0.58);

  /* Schrift */
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Maße */
  --page:    1320px;
  --measure: 58ch;
  --gutter:  clamp(1.5rem, 5vw, 5rem);
  --section: clamp(5.5rem, 11vw, 10.5rem);
  --nav-h:   80px;

  /* Rhythmus — eine Leiter, überall dieselbe */
  --s1: 0.75rem;
  --s2: 1.5rem;
  --s3: clamp(1.75rem, 3vw, 2.5rem);
  --s4: clamp(2.5rem, 5vw, 4rem);
  --s5: clamp(3.5rem, 7vw, 6rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Weicher Seitenwechsel. Browser ohne Unterstuetzung ignorieren den Block
   einfach, die Navigation funktioniert dort unveraendert. Bewusst ohne
   JavaScript: Ein Skriptfehler duerfte niemals Links blockieren. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* --- 3. Basis ----------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 4px;
}

/* Sprungmarke für Tastatur und Screenreader */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- 4. Typografie ------------------------------------------------------ */
h1, h2, h3, h4, .tariff__name, .faq__q {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
  /* Cormorant setzt sonst Mediävalziffern: die Eins in "10 €" sähe aus
     wie ein I. In Überschriften brauchen Zahlen Versalziffern. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

.d1 { font-size: clamp(2.9rem, 7.6vw, 6rem); }
.d2 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); }
.d3 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); line-height: 1.18; }
.d4 { font-size: clamp(1.2rem, 1.8vw, 1.5rem);  line-height: 1.25; }

/* Kursive Serife in Messing — die eine Betonung, die wir uns erlauben */
.em { font-style: italic; color: var(--brass); }
.band-ink .em, .hero .em, .pagehead .em, .imageband .em { color: var(--brass-light); }

/* Gesperrte Kleinversalien — das Signaturelement beider Vorbilder */
.micro {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.6;
}

.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

p { max-width: var(--measure); }
strong { font-weight: 500; color: var(--ink); }
.band-ink strong, .imageband strong { color: var(--ivory); }

.prose > * + * { margin-top: 1.35em; }

/* --- 5. Hilfsklassen ---------------------------------------------------- */
/* Nur so viele, wie nötig sind, um ohne style-Attribute im HTML auszukommen. */
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.narrow { max-width: 46ch; }
.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }
.center .actions, .actions.center { justify-content: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 6. Bausteine ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
  background: var(--ivory);   /* deckt die festehende Buehne ab */
}
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.band-ink  { background: var(--ink); color: var(--on-ink); }
.band-deep { background: var(--ivory-deep); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--ivory); }
.band-ink .micro { color: var(--brass-light); }
.band-ink .lead, .band-ink p { color: var(--on-ink); }

.rule { height: 1px; background: var(--hairline); border: 0; }
.band-ink .rule { background: var(--hairline-inv); }

/* Messing-Strich vor der Beschriftung */
.eyebrow { display: flex; align-items: center; gap: 1.1rem; }
.eyebrow::before {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--brass);
  flex: none;
}
/* In zentrierten Blöcken steht der Strich senkrecht darüber */
.center .eyebrow {
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.center .eyebrow::before { width: 1px; height: clamp(30px, 3.5vw, 46px); }

/* Textlink: gesperrte Versalien über einer Haarlinie, die beim
   Überfahren zurückweicht — die Geste beider Vorbilder. */
.link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.5rem;
  position: relative;
}
.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.link:hover::after { transform: scaleX(0.28); }
.band-ink .link, .hero .link, .pagehead .link, .imageband .link { color: var(--ivory); }

/* Umrandeter Knopf, füllt sich beim Überfahren */
.btn {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 1.15rem 2.5rem;
  background: transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn--light { color: var(--ivory); border-color: rgba(245, 242, 235, 0.5); }
.btn--light:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--brass { color: var(--ivory); background: var(--brass); border-color: var(--brass); }
.btn--brass:hover { background: var(--ink); border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* Markenzeichen. Gefüllte Pfade fuer WhatsApp und Instagram, damit sie
   sofort erkannt werden; die uebrigen als duenne Striche. */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; }
.icon--solid { fill: currentColor; stroke: none; }

/* WhatsApp ist der Hauptweg, deshalb der auffaelligste Knopf:
   Messing gefuellt, mit dem Markenzeichen davor. */
.btn--wa {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ivory);
}
.btn--wa:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.btn--big { padding: 1.25rem 2.75rem; font-size: 0.75rem; }
.btn--big .icon { width: 1.35em; height: 1.35em; }

/* --- 7. Navigation ------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; right: 0; bottom: auto; left: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), height 0.5s var(--ease);
}
/* Logo links, Navigation rechts. Vorher stand das Logo in der Mitte eines
   Dreispalters, aber die rechte Spalte ist mit fuenf Punkten deutlich
   breiter als die linke, dadurch wurde das Logo an den ersten Menuepunkt
   geschoben. Ein Flexlayout mit space-between kann das nicht passieren. */
.nav__inner {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* Bildmarke — hell über dem Foto, dunkel auf Elfenbein */
.wordmark { display: block; line-height: 0; flex: none; }
.wordmark img { height: clamp(36px, 3.6vw, 48px); width: auto; transition: height 0.5s var(--ease); }
.wordmark__dark { display: none; }

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }

.nav__links a {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 242, 235, 0.82);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;          /* sonst bricht "Über mich" um */
}
.nav__links a:hover { color: var(--ivory); border-bottom-color: currentColor; }

/* Instagram und WhatsApp am Ende der Navigation, durch eine Haarlinie
   abgesetzt. WhatsApp steht rechts und traegt Messing, weil es der
   Hauptkontaktweg ist. */
.nav__social {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.2vw, 1rem);
  padding-left: clamp(0.9rem, 1.6vw, 1.5rem);
  margin-left: clamp(0.2rem, 0.8vw, 0.6rem);
  border-left: 1px solid var(--hairline-inv);
}
.nav__social a {
  display: grid;
  place-items: center;
  padding: 0;
  border-bottom: 0 !important;
}
.nav__social .icon { width: 18px; height: 18px; }
.nav__wa { color: var(--brass-light); }
.nav__wa:hover { color: var(--ivory); }
.nav.is-solid .nav__social { border-left-color: var(--hairline); }
.nav.is-solid .nav__wa { color: var(--brass); }
.nav.is-solid .nav__wa:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--brass-light); }

/* Ueber dem Video ist der Hintergrund stellenweise sehr hell. Ein feiner
   Schatten haelt Menuepunkte und Bildmarke lesbar, ohne die Flaeche
   abzudunkeln. Sobald die Leiste fest wird, faellt er weg. */
.nav:not(.is-solid) .nav__links a,
.nav:not(.is-solid) .nav__social a { text-shadow: 0 1px 14px rgba(10, 8, 7, 0.75); }
.nav:not(.is-solid) .wordmark img { filter: drop-shadow(0 1px 10px rgba(10, 8, 7, 0.6)); }
.nav:not(.is-solid) .nav__social svg { filter: drop-shadow(0 1px 8px rgba(10, 8, 7, 0.7)); }

/* Fester Zustand nach dem Scrollen */
.nav.is-solid { background: var(--ivory); border-bottom-color: var(--hairline); height: 66px; }
.nav.is-solid .wordmark img { height: clamp(32px, 3vw, 40px); }
.nav.is-solid .wordmark__light { display: none; }
.nav.is-solid .wordmark__dark { display: block; }
.nav.is-solid .nav__links a { color: var(--ink-mute); }
.nav.is-solid .nav__links a:hover,
.nav.is-solid .nav__links a[aria-current="page"] { color: var(--ink); }
.nav.is-solid .nav__links a[aria-current="page"] { border-bottom-color: var(--brass); }

/* Menüknopf */
.burger { display: none; flex: none; width: 30px; height: 18px; position: relative; z-index: 120; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--ivory);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; }
.burger span:nth-child(3) { top: 100%; }
.nav.is-solid .burger span { background: var(--ink); }
.burger.is-open span { background: var(--ink); }
.burger.is-open span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

/* Vollflächiges Menü */
.drawer {
  position: fixed; inset: 0; z-index: 110;
  background: var(--ivory);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
}
.drawer__nav a[aria-current="page"] { color: var(--brass); }
.drawer .rule { margin: var(--s3) 0 var(--s2); }
.drawer__meta { display: flex; flex-direction: column; gap: 0.7rem; }
.drawer__meta a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
}

/* --- 8. Bühne und Kopfbänder -------------------------------------------- */
/* Regel für die ganze Seite: Titelseiten bekommen ein Foto und zentrierte
   Schrift, Rechtstexte ein ruhiges Ebenholzband. */
.hero {
  position: relative;
  min-height: 100vh;    /* Rueckfall fuer iOS vor 15.4, dort fehlt svh */
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  text-align: center;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Kein CSS-Filter auf dem Videoelement. saturate()/contrast() bricht in
   Safari die Hardwarebeschleunigung, das Video bleibt dann beim ersten
   Bild stehen. Die Entsaettigung ist deshalb beim Kodieren ins Video
   gebacken (ffmpeg eq=saturation=0.82:contrast=1.03). */
.hero__media img { object-position: 54% 74%; animation: slow-zoom 24s var(--ease) forwards; }
@keyframes slow-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  /* Zwei Lagen: ein weicher Lichthof unter der zentrierten Schrift, damit sie
     auch über dem hellen Fenster trägt — und darunter der übliche Verlauf,
     der die Leiste oben und den Rand unten fasst. */
  /* Zwei Lagen, bewusst zurueckhaltend: ein weicher Lichthof genau unter
     der Schrift und ein Verlauf, der oben die Leiste und unten die Knoepfe
     fasst. In der Flaeche dazwischen bleibt das Video deutlich sichtbar.
     Die eigentliche Lesbarkeit macht der Schattenwurf auf der Schrift. */
  background:
    radial-gradient(ellipse 58% 46% at 50% 52%,
      rgba(10, 8, 7, 0.58) 0%,
      rgba(10, 8, 7, 0.30) 58%,
      rgba(10, 8, 7, 0) 100%),
    linear-gradient(to bottom,
      rgba(10, 8, 7, 0.55) 0%,
      rgba(10, 8, 7, 0.18) 28%,
      rgba(10, 8, 7, 0.22) 64%,
      rgba(10, 8, 7, 0.78) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--page);
  padding: calc(var(--nav-h) + var(--s4)) var(--gutter) var(--s5);
}
.hero h1 { color: var(--ivory); max-width: 16ch; margin-inline: auto; }

/* Der Schatten schafft Kontrast genau an der Schrift, nicht auf der
   ganzen Flaeche. Dadurch bleibt das Video sichtbar und der Text
   trotzdem lesbar, auch ueber den hellen Stellen der Aufnahme. */
.hero h1,
.hero__sub,
.hero .micro { text-shadow: 0 2px 26px rgba(10, 8, 7, 0.6), 0 1px 4px rgba(10, 8, 7, 0.45); }
.hero__sub { text-shadow: 0 1px 18px rgba(10, 8, 7, 0.85), 0 1px 3px rgba(10, 8, 7, 0.6); }
.hero .micro { color: #DCC69B; }
.hero .eyebrow { flex-direction: column; align-items: center; gap: 1.15rem; margin-bottom: var(--s2); }
.hero .eyebrow::before { width: 1px; height: clamp(30px, 3.5vw, 46px); }
.hero__sub {
  color: rgba(245, 242, 235, 0.82);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin: var(--s2) auto 0;
  max-width: 46ch;
}
.hero .actions { justify-content: center; margin-top: var(--s4); }

/* Feiner senkrechter Strich am unteren Rand als Hinweis zum Weiterscrollen */
.hero__cue {
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: clamp(48px, 7vh, 84px);
  background: linear-gradient(to bottom, transparent, rgba(245, 242, 235, 0.55));
  z-index: 2;
}

/* Kopfband der Unterseiten — gleicher Bau, nur flacher */
.pagehead {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(4.5rem, 10vw, 8.5rem));
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
  background: var(--ink);
  overflow: hidden;
  text-align: center;
}
.pagehead--photo::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center 38%;
}
.pagehead--photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 66% 62% at 50% 62%,
      rgba(12, 10, 9, 0.58) 0%, rgba(12, 10, 9, 0) 100%),
    linear-gradient(to top,
      rgba(12, 10, 9, 0.94) 0%, rgba(12, 10, 9, 0.78) 50%, rgba(12, 10, 9, 0.64) 100%);
}
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { color: var(--ivory); max-width: 20ch; margin-inline: auto; }
.pagehead .micro { color: #DCC69B; }
.pagehead .eyebrow {
  flex-direction: column; align-items: center; gap: 1.15rem; margin-bottom: var(--s2);
}
.pagehead .eyebrow::before { width: 1px; height: clamp(30px, 3.5vw, 46px); }
.pagehead__sub {
  color: rgba(245, 242, 235, 0.74);
  margin: var(--s2) auto 0;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  max-width: 52ch;
}

/* --- 9. Abschnittskopf -------------------------------------------------- */
/* Überall derselbe Dreiklang: Beschriftung, Serifentitel, Vorspann. */
.sec-head { max-width: 48ch; }
.sec-head .eyebrow { margin-bottom: var(--s2); }
.sec-head .lead { margin-top: var(--s2); }
.sec-head--center { max-width: 54ch; margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { flex-direction: column; align-items: center; gap: 1.15rem; }
.sec-head--center .eyebrow::before { width: 1px; height: clamp(30px, 3.5vw, 46px); }
.sec-head--center .lead { margin-inline: auto; }
.sec-head + * { margin-top: var(--s4); }
.sec-head + .actions { margin-top: var(--s3); }

/* --- 10. Redaktionelle Blöcke ------------------------------------------- */
/* Bewusst asymmetrisch — 50/50 wirkt statisch. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.split--top { align-items: start; }
.split--reverse .split__media { order: 2; }
.split--offset .split__body { padding-top: clamp(0rem, 5vw, 4rem); }

.split__media { position: relative; overflow: hidden; }
.split__media img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.split__media--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.split__media--wide img { aspect-ratio: 4 / 3; object-fit: cover; }

.caption {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.band-ink .caption { border-top-color: var(--hairline-inv); color: var(--on-ink-mute); }

/* Ganzflächiges Bildband — der Atemzug zwischen zwei Textstrecken */
.imageband {
  position: relative;
  min-height: clamp(400px, 58vh, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  text-align: center;
}
.imageband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imageband::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(12, 10, 9, 0.76), rgba(12, 10, 9, 0.5));
}
.imageband .wrap { position: relative; z-index: 2; }
.imageband h2 { color: var(--ivory); max-width: 22ch; margin-inline: auto; }
.imageband .micro { color: var(--brass-light); }
.imageband .lead { color: rgba(245, 242, 235, 0.8); margin-inline: auto; }

/* Säulen mit Haarlinien statt Karten */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--hairline);
}
.columns > * {
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.columns > *:first-child { padding-left: 0; }
.columns > *:last-child { border-right: 0; padding-right: 0; }
.columns h3 { margin-bottom: var(--s1); }
.columns p { font-size: 0.9375rem; max-width: 34ch; }
.columns .num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--s2);
}
.band-ink .columns, .band-ink .columns > * { border-color: var(--hairline-inv); }

/* Bildstreifen */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.strip figure { overflow: hidden; }
.strip img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s var(--ease); }
.strip figure:hover img { transform: scale(1.04); }

/* --- 11. Bildkacheln ---------------------------------------------------- */
/* Die wiederkehrende Einheit beider Vorbilder: Bild, Kleinversalien,
   Serifentitel, ein Satz, ein Textlink. Die ganze Kachel ist anklickbar. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 3.5vw, 3.25rem);
}
.tile { display: block; text-decoration: none; color: inherit; }
.tile__media { overflow: hidden; background: var(--ink); }
.tile__media img {
  width: 100%;
  height: auto;          /* sonst gewinnt das height-Attribut aus dem HTML */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.tile:hover .tile__media img { transform: scale(1.045); }
.tile .micro { margin-top: var(--s2); color: var(--brass); }
.tile h3 { margin-top: var(--s1); }
.tile p { margin-top: 0.9rem; font-size: 0.9375rem; max-width: 34ch; }
.tile__link {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.5rem;
  position: relative;
}
.tile__link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.tile:hover .tile__link::after { transform: scaleX(0.28); }
.band-ink .tile .micro { color: var(--brass-light); }
.band-ink .tile__link { color: var(--ivory); }

/* --- 12. Preise --------------------------------------------------------- */
/* Preisliste wie eine Notenzeile: Titel links, Preis rechts, Haarlinie darunter */
.tariffs { border-top: 1px solid var(--hairline); }
.tariff {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem 1.5rem;
  padding: clamp(1.75rem, 3.2vw, 2.5rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.tariff__name { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); color: var(--ink); line-height: 1.2; }
.tariff__note { display: block; margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-mute); max-width: 46ch; }
.tariff__price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  color: var(--ink);
  white-space: nowrap;
  /* Cormorant setzt sonst Mediävalziffern — die Eins sähe aus wie ein I. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.tariff__price span { font-size: 0.56em; color: var(--ink-mute); margin-left: 0.12em; }
.tariff--feature .tariff__price { color: var(--brass); }

/* Rahmenbedingungen in Feldern mit Haarlinienraster */
.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.notes__item { background: var(--ivory); padding: clamp(1.5rem, 3vw, 2.25rem); }
.notes__item dt {
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass); margin-bottom: var(--s1);
}
.notes__item dd { font-size: 0.9375rem; color: var(--ink-soft); max-width: 40ch; }

/* Aufzählung mit Messing-Strich statt Punkt */
.ticks { list-style: none; display: grid; gap: 1rem; }
.ticks li { position: relative; padding-left: 2.25rem; font-size: 0.9375rem; max-width: 48ch; }
.ticks li::before {
  content: '';
  position: absolute; left: 0; top: 0.85em;
  width: 1.25rem; height: 1px;
  background: var(--brass);
}
.band-ink .ticks li { color: var(--on-ink); }

/* --- 13. Kontakt und Fragen --------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.contact-grid--single { grid-template-columns: 1fr; }
.contact-card { background: var(--ivory); padding: clamp(2rem, 4vw, 3rem); }
.contact-card .micro { color: var(--brass); margin-bottom: var(--s2); }
.contact-card a {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-variant-numeric: lining-nums;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.4s var(--ease);
  word-break: break-word;
}
.contact-card a:hover { border-bottom-color: var(--ink); }
.contact-card address {
  font-style: normal;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--ink);
  line-height: 1.45;
}
.contact-card p { font-size: 0.875rem; color: var(--ink-mute); margin-top: 0.9rem; }

/* Hinweiszeile mit Messing-Kante */
.notice {
  border-left: 1px solid var(--brass);
  padding: 0.35rem 0 0.35rem 1.5rem;
  font-size: 0.9375rem;
  max-width: 54ch;
}
.band-ink .notice { color: var(--on-ink); }
.center .notice { margin-inline: auto; text-align: left; }

/* Häufige Fragen — Haarlinienliste, alles offen sichtbar */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--hairline); }
.faq__q {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink);
  line-height: 1.25;
}
.faq__a { margin-top: 0.9rem; font-size: 0.9375rem; max-width: 60ch; }

/* Kontaktwege. Ein grosser Block fuer WhatsApp, darunter die Ausnahmen. */
.channel {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.channel__body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.channel__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
  font-variant-numeric: lining-nums;
  color: var(--ink);
  transition: color 0.4s var(--ease);
}
.channel__note { font-size: 0.9375rem; color: var(--ink-mute); max-width: 46ch; }
.channel__icon { display: grid; place-items: center; flex: none; }
.channel__icon .icon { width: clamp(28px, 4vw, 40px); height: clamp(28px, 4vw, 40px); }
.channel__go { font-size: 1.5rem; line-height: 1; opacity: 0.6; transition: transform 0.45s var(--ease); }

/* Der WhatsApp-Block: gefuellt, gross, oben auf der Seite */
.channel--wa {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ivory);
  padding: clamp(2rem, 5vw, 3.25rem);
}
.channel--wa .micro { color: rgba(245, 242, 235, 0.82); }
.channel--wa .channel__name { color: var(--ivory); font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.channel--wa .channel__note { color: rgba(245, 242, 235, 0.82); }
.channel--wa:hover { background: var(--ink); border-color: var(--ink); }
.channel--wa:hover .channel__go { transform: translateX(6px); }

/* Die Ausnahmen darunter, ruhiger */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.channels .channel--alt { border: 0; background: var(--ivory); }
.channel--alt .channel__name { font-size: clamp(1.05rem, 1.7vw, 1.25rem); word-break: break-word; }
.channel--alt .channel__icon .icon { width: 22px; height: 22px; color: var(--brass); }
.channel--alt:hover { background: var(--ivory-deep); }
.channel--alt:hover .channel__name { color: var(--brass); }

.channels__hint { font-size: 0.9375rem; color: var(--ink-mute); }

/* Kundenstimmen. Zitate in Serifenschrift, getrennt durch Haarlinien,
   darueber die Sterne in Messing. Kein fremdes Widget, reiner Text. */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  border-top: 1px solid var(--hairline);
}
.voice {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.voice:first-child { padding-left: 0; }
.voice:last-child { border-right: 0; padding-right: 0; }

.stars { display: flex; gap: 0.2rem; color: var(--brass); }
.stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }

.voice__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  max-width: none;
}
.voice__name { margin-top: auto; }

/* Zusammenfassung ueber den Zitaten */
.rating-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.rating-summary__score {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.rating-summary__meta { font-size: 0.9375rem; color: var(--ink-mute); }

.band-ink .voices, .band-ink .voice { border-color: var(--hairline-inv); }
.band-ink .voice__text, .band-ink .rating-summary__score { color: var(--ivory); }

@media (max-width: 900px) {
  .voice { border-right: 0; padding-inline: 0; }
}

/* Bewertungsliste auf der eigenen Seite. Einspaltig, weil die Texte
   sehr unterschiedlich lang sind. */
.reviews { border-top: 1px solid var(--hairline); }
.review {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.review__who { display: flex; flex-direction: column; gap: 0.6rem; }
.review__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  color: var(--ink);
}
.review__text { font-size: 0.9375rem; max-width: 62ch; }
.review__text p + p { margin-top: 1rem; }

@media (max-width: 760px) {
  .review { grid-template-columns: 1fr; gap: 1rem; }
}

/* Rechtstexte */
.legal { max-width: 68ch; }
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: var(--s4); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); margin-top: var(--s3); }
.legal p, .legal ul { margin-top: 1rem; font-size: 0.9375rem; max-width: none; }
.legal ul { list-style: none; display: grid; gap: 0.6rem; }
.legal li { position: relative; padding-left: 1.75rem; }
.legal li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 0.875rem; height: 1px; background: var(--brass);
}
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal address { font-style: normal; margin-top: 1rem; font-size: 0.9375rem; }

/* Schlussband */
.closer { text-align: center; }
.closer h2 { margin-inline: auto; max-width: 24ch; }
.closer .lead, .closer p { margin-inline: auto; }
.closer .actions { justify-content: center; margin-top: var(--s4); }

/* --- 14. Fuß ------------------------------------------------------------ */
.foot { background: var(--ink); color: var(--on-ink-mute); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.foot .wordmark { justify-self: start; grid-column: auto; }
.foot .wordmark img { height: 52px; }
.foot__blurb { font-size: 0.9375rem; color: var(--on-ink-mute); margin-top: var(--s2); max-width: 34ch; }
.foot h2 {
  font-family: var(--font-body);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: var(--s2);
}
.foot ul { list-style: none; display: grid; gap: 0.85rem; }
.foot a { color: rgba(245, 242, 235, 0.68); text-decoration: none; font-size: 0.9375rem; transition: color 0.35s var(--ease); }
.foot a:hover { color: var(--ivory); }

/* Soziale Kanäle als dünne Strichsymbole */
.foot__social { display: flex; gap: 1rem; margin-top: var(--s3); }
.foot__social a {
  width: 42px; height: 42px;
  border: 1px solid var(--hairline-inv);
  display: grid; place-items: center;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.foot__social a:hover { border-color: var(--brass); background: rgba(169, 136, 80, 0.12); }
/* Nur Groesse und Farbe. Frueher stand hier fill: none mit einer Kontur,
   das hat die gefuellten Markenzeichen als Umrisse gezeichnet. Fuellung
   und Kontur regelt jetzt allein .icon beziehungsweise .icon--solid. */
.foot__social svg { width: 18px; height: 18px; color: rgba(245, 242, 235, 0.8); }
.foot__social a:hover svg { color: var(--ivory); }

.foot__bottom {
  border-top: 1px solid var(--hairline-inv);
  padding-top: 2rem;
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between; align-items: center;
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.foot__bottom p, .foot__bottom a { font-size: 0.75rem; letter-spacing: 0.06em; color: rgba(245, 242, 235, 0.45); }
.foot__bottom a:hover { color: var(--ivory); }

/* --- 15. Bewegung ------------------------------------------------------- */
/* Grundsatz: nur Transparenz und Transform, nie Layout. Alles laeuft ueber
   dieselbe Kurve. Wer Bewegung reduziert haben moechte, bekommt gar keine. */

/* Fortschrittslinie am oberen Rand */
.progress {
  position: fixed;
  top: 0; right: 0; bottom: auto; left: 0;
  height: 2px;
  z-index: 200;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Gestaffelt: die Kinder kommen nacheinander, nicht alle auf einmal */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.stagger.is-in > * { opacity: 1; transform: none; }

/* Bilder werden von unten nach oben aufgedeckt */
.unveil { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease); }
.unveil.is-in { clip-path: inset(0 0 0 0); }
/* Der Beschnitt gehoert zum Aufdecken, die Bewegung des Bildes selbst
   uebernimmt die Parallaxe weiter unten. Sonst wuerden sich zwei Regeln
   um dieselbe transform-Eigenschaft streiten. */

/* Haarlinien zeichnen sich von links */
.rule { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.rule.is-in, .no-js .rule { transform: none; }

/* Auftritt der Buehne: die Teile steigen nacheinander hinter einer Kante auf */
.hero__content > * { opacity: 0; transform: translateY(34px); animation: rise 1.1s var(--ease) forwards; }
.hero__content > *:nth-child(1) { animation-delay: 0.25s; }
.hero__content > *:nth-child(2) { animation-delay: 0.4s; }
.hero__content > *:nth-child(3) { animation-delay: 0.55s; }
.hero__content > *:nth-child(4) { animation-delay: 0.7s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Der Scroll-Hinweis pulsiert langsam */
.hero__cue { animation: cue 2.8s var(--ease) infinite; transform-origin: bottom; }
@keyframes cue {
  0%, 100% { transform: scaleY(0.4); opacity: 0.35; }
  50%      { transform: scaleY(1);   opacity: 0.9; }
}

/* Ueberschriften kommen Wort fuer Wort, jedes hinter einer Kante hervor */
.words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;   /* sonst schneidet die Kante Unterlaengen ab */
  margin-bottom: -0.12em;
}
.words .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.words.is-in .w > i { transform: none; }

/* Bilder wandern beim Scrollen leicht gegen die Seite */
.par { overflow: hidden; }
.par img { transform: scale(1.14) translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Der Messingstrich vor der Beschriftung zeichnet sich */
.eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease) 0.15s; }
.is-in .eyebrow::before, .eyebrow.is-in::before { transform: none; }
.center .eyebrow::before, .sec-head--center .eyebrow::before,
.hero .eyebrow::before, .pagehead .eyebrow::before { transform-origin: top; }

/* Laufband mit kurzen Zitaten */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline-inv);
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  animation: slide 68s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--on-ink);
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--brass);
  vertical-align: middle;
  margin-left: clamp(2rem, 5vw, 4.5rem);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* Zahl zaehlt hoch */
.count { font-variant-numeric: lining-nums tabular-nums; }

/* Kacheln heben sich leicht */
.tile { transition: transform 0.6s var(--ease); }
.tile:hover { transform: translateY(-6px); }

/* Knoepfe reagieren spuerbar */
.btn { transform: translateZ(0); }
.btn--wa:hover { transform: translateY(-2px); }
.channel--wa:hover { transform: translateY(-3px); }
.channel { transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .words .w > i { transform: none !important; transition: none !important; }
  .par img { transform: none !important; }
  .eyebrow::before { transform: none !important; }
  .reveal, .stagger > *, .unveil, .rule {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero__content > * { opacity: 1; transform: none; animation: none; }
  .hero__media img, .hero__cue, .marquee__track { animation: none; }
  .tile:hover, .btn--wa:hover, .channel--wa:hover { transform: none; }
  .tile__media img, .strip img, .split__media img, .unveil img { transition: none; transform: none; }
  .progress { display: none; }
}

/* --- 16. Responsiv ------------------------------------------------------ */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s4); }
  .split--reverse .split__media { order: 0; }
  .split--offset .split__body { padding-top: 0; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .columns > * { border-right: 0; padding-inline: 0; }
}

@media (max-width: 760px) {
  :root { --nav-h: 66px; }
  /* Schmale Bildschirme zeigen mehr vom hellen Fenster — dunkler abdecken */
  .hero__media img { object-position: 68% 74%; }
  .hero__media::after {
    background:
      radial-gradient(ellipse 92% 42% at 50% 52%,
        rgba(10, 8, 7, 0.62) 0%, rgba(10, 8, 7, 0) 100%),
      linear-gradient(to bottom,
        rgba(10, 8, 7, 0.62) 0%, rgba(10, 8, 7, 0.3) 30%,
        rgba(10, 8, 7, 0.34) 64%, rgba(10, 8, 7, 0.86) 100%);
  }
  .nav__links { display: none; }
  .burger { display: block; }
  .tariff { grid-template-columns: 1fr; gap: 0.75rem; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__bottom { justify-content: flex-start; }
}