/* =========================================================================
   Tauberhotel Kette · Startseite (Pitch-Teaser)
   Vanilla-CSS, mobile-first, Token-System.
   Design-Quelle: Figma „Pitch-Websites“, Frame 408:201. Farb- und
   Typo-Tokens 1:1 aus get_variable_defs (Kollektion „Tauberhotel Kette“).
   Motion-Startzustände stehen ausschließlich unter .is-animating, damit die
   Seite ohne JS, ohne GSAP und bei reduzierter Bewegung vollständig lesbar
   ist.
   ========================================================================= */

/* ---- Reset (schmal) ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, figcaption, ul, li { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Farben (Figma: Tauberhotel Kette) */
  --ink: #2f4f4f;
  --paper: #ffffff;
  --cream: #fafad2;
  --gold: #b8860b;
  /* Abgeleitete Stufen für Kontrastsicherheit:
     --gold-ink 4,7:1 auf Weiß (reines --gold erreicht nur 3,3:1 und bleibt
     deshalb Flächen-, Linien- und Großschriftfarbe).
     --ink-2 4,9:1 auf Weiß, 4,6:1 auf Creme. */
  --gold-ink: #966c07;
  --gold-deep: #8a6408;   /* 5,0:1 auf Creme, für den Gold-Moment im Haus-Absatz */
  --ink-2: #5d7676;
  --line: rgba(47, 79, 79, 0.14);
  --line-strong: rgba(47, 79, 79, 0.30);
  /* Rahmen von Bedienelementen brauchen 3:1 (WCAG 1.4.11); 0,30 ergibt nur 1,7:1 */
  --line-ui: rgba(47, 79, 79, 0.62);
  --ink-hover: #26403f;

  /* Kettenglieder als nahtlos wiederholbares Tile (Fortschritt im Slider).
     Drei Glieder mit Mittelpunkten bei x = 0, 14 und 28, dadurch greifen sie
     über die Tile-Kante hinweg lückenlos ineinander. */
  --chain-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cg fill='none' stroke='%232f4f4f' stroke-width='1.4'%3E%3Crect x='-9' y='1.5' width='18' height='7' rx='3.5'/%3E%3Crect x='5' y='1.5' width='18' height='7' rx='3.5'/%3E%3Crect x='19' y='1.5' width='18' height='7' rx='3.5'/%3E%3C/g%3E%3C/svg%3E");
  --chain-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cg fill='none' stroke='%232f4f4f' stroke-opacity='0.24' stroke-width='1.4'%3E%3Crect x='-9' y='1.5' width='18' height='7' rx='3.5'/%3E%3Crect x='5' y='1.5' width='18' height='7' rx='3.5'/%3E%3Crect x='19' y='1.5' width='18' height='7' rx='3.5'/%3E%3C/g%3E%3C/svg%3E");

  /* Schrift-Stacks */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-greek: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type-Scale (fluid; Max = Figma-Wert bei 1440, Min bei 375) */
  --fs-display:  clamp(2.5rem, 1.576rem + 3.944vw, 5.125rem);      /* 40 -> 82 */
  --fs-h2:       clamp(1.875rem, 1.391rem + 2.066vw, 3.25rem);     /* 30 -> 52 */
  --fs-pitch:    clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);     /* 22 -> 28 */
  --fs-h3:       clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);     /* 18 -> 20 */
  --fs-preis:    clamp(1.0625rem, 1.041rem + 0.094vw, 1.125rem);   /* 17 -> 18 */
  --fs-body:     clamp(1rem, 0.978rem + 0.094vw, 1.0625rem);       /* 16 -> 17 */
  --fs-body-s:   0.9375rem;   /* 15 */
  --fs-nav:      0.875rem;    /* 14 */
  --fs-button:   0.9375rem;   /* 15 */
  --fs-mono:     0.75rem;     /* 12 */
  --fs-score:    2rem;        /* 32 */

  /* Layout
     --page-pad wächst über 1440px hinaus mit, damit Sektionen und randlose
     Bilder bis zum Viewportrand laufen, der Inhalt aber auf der Layoutbreite
     von 1440px zentriert bleibt. */
  --maxw: 1440px;
  --page-pad: max(clamp(1.25rem, 6.25vw, 5.625rem), calc((100vw - var(--maxw)) / 2 + 5.625rem));
  --header-h: 4.25rem;
  --sect-pad: clamp(3.5rem, 8vw, 7.25rem);        /* 56 -> 116px */
  --radius: 8px;
  --card-w: clamp(16.5rem, 78vw, 25rem);          /* 264 -> 400px */
  --gap-card: 1.5rem;                             /* 24px */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 62rem) {
  :root { --header-h: 5.75rem; }                  /* 92px wie im Layout */
}

/* ---- Grundlagen -------------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.588;                             /* 27/17 */
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

#main, #hero, #zimmer, #haus, #zorbas { scroll-margin-top: calc(var(--header-h) + 1rem); }
#main:focus { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -3rem; left: var(--page-pad); z-index: 100;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--paper);
  font-size: var(--fs-nav); text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.5rem; }

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.038;                             /* 54/52 */
  letter-spacing: -0.0096em;
  text-wrap: balance;
}

.lead { font-size: var(--fs-body); line-height: 1.588; }

.eyebrow {
  display: flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-mono); line-height: 1.333;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow__icon { flex: none; fill: currentColor; }

.mono {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--fs-mono); letter-spacing: 0.08em;
}

.greek { font-family: var(--font-greek); font-size: 0.94em; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 2.75rem;                            /* 44px Touchziel */
  padding: 0.8125rem 1.375rem;
  border-radius: 4px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-button); line-height: 1.0667;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn__icon { flex: none; fill: currentColor; }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--ink-hover); transform: translateY(-1px); }

.btn--ghost { border: 1px solid var(--line-ui); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(47, 79, 79, 0.05); }

.btn--outline { border: 1.5px solid var(--gold); color: var(--ink); }
.btn--outline:hover { background: rgba(184, 134, 11, 0.08); }

.textlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-button);
  text-decoration: underline; text-underline-offset: 0.25em;
}
.textlink svg { fill: var(--gold); flex: none; }
.textlink--offen { cursor: default; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(47, 79, 79, 0.08); }

.site-header__inner {
  padding: 0 var(--page-pad);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.logo { display: block; position: relative; z-index: 2; flex: none; }
@media (min-width: 62rem) {
  /* Der Überstand braucht Grund, sonst scrollt Inhalt durch das transparente
     Logo-PNG hindurch. */
  .logo { background: var(--paper); padding: 0 0.5rem 0.5rem; margin-left: -0.5rem; }
}
.logo img { width: clamp(6.5rem, 18vw, 11.6875rem); height: auto; }

.logo img { transition: transform 0.35s var(--ease); }

/* Ab Desktop ragt das Logo unter die Navbar, wie im Layout. Sobald gescrollt
   wird, nimmt sich der Überstand zurück, ohne zu verschwinden (nur Transform,
   das Layout bleibt unberührt). */
@media (min-width: 62rem) {
  .site-header { overflow: visible; }
  .logo { align-self: flex-start; margin-top: 0.625rem; margin-bottom: -1.375rem; }
  .site-header.is-stuck .logo img { transform: scale(0.86); transform-origin: left top; }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 0.25rem;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-nav);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars span { display: block; height: 2px; background: var(--ink); }

.nav {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none;
  padding: 0.5rem var(--page-pad) 1.5rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-header.is-nav-open .nav { display: block; }
.nav__list { display: grid; gap: 0.25rem; }
.nav__link {
  display: block; padding: 0.8125rem 0;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-nav); line-height: 1.286;
  text-decoration: none;
}
.nav__link--offen { color: var(--ink-2); }
.nav__list a.nav__link:hover { color: var(--gold-ink); }
.site-header__cta { margin-top: 0.75rem; }

@media (min-width: 75rem) {
  .nav-toggle { display: none; }
  .nav {
    position: static; display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem);
    flex: 1 1 auto; justify-content: flex-end;
    padding: 0; border: 0; background: none;
    max-height: none; overflow: visible;
  }
  .nav__list { display: flex; gap: clamp(1rem, 1.8vw, 1.625rem); }
  .nav__link { padding: 0.3125rem 0; }   /* 28px Zielhöhe, WCAG 2.5.8 */
  .site-header__cta { margin-top: 0; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  display: grid; gap: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(2.25rem, 6vw, 3.5rem) 0 0;
}
.hero__content {
  display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem);
  padding: 0 var(--page-pad);
  align-content: center;
}
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-display); line-height: 0.976;   /* 80/82 */
  letter-spacing: -0.0122em;
}
.hero__title .line { display: block; }
.hero__lead { max-width: 30rem; }
.hero__media { overflow: hidden; }
.hero__media img { width: 100%; height: clamp(15rem, 52vw, 37.75rem); object-fit: cover; }

@media (min-width: 62rem) {
  .hero {
    /* Bildspalte proportional (46,67% = 672 von 1440), sonst bleiben der
       Headline zwischen 992 und 1272px nur 186 bis 456px Satzbreite und das
       H1 läuft über seine Spalte hinaus. */
    grid-template-columns: minmax(0, 1fr) minmax(0, min(672px, 46.67%));
    align-items: center; gap: clamp(2rem, 4vw, 4.5rem);
    padding: 0;
  }
  .hero__content { padding: 3.5rem 0 3.5rem var(--page-pad); }
  .hero__media img { height: 37.75rem; }           /* 604px wie im Layout */
}

/* ---- Sektion: Zimmer --------------------------------------------------- */
.rooms {
  padding: var(--sect-pad) 0;
}
.rooms__head {
  display: grid; gap: 1.125rem;
  padding: 0 var(--page-pad);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.rooms__head .lead { max-width: 43.75rem; }

.rooms__slider {
  display: block;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--page-pad);
  padding: 0 var(--page-pad);
}
/* Ohne JS gibt es keine Pfeile, dann bleibt die Scrollleiste als Bedienung */
.is-ready .rooms__slider { scrollbar-width: none; -ms-overflow-style: none; }
.is-ready .rooms__slider::-webkit-scrollbar { display: none; }
.rooms__track { display: flex; gap: var(--gap-card); }
/* Chrome berücksichtigt padding-right eines Flex-Scroll-Containers am
   Scroll-Ende nicht, deshalb ein Spacer als letztes Flex-Kind. */
.rooms__track::after {
  content: ""; flex: 0 0 calc(var(--page-pad) - var(--gap-card)); align-self: stretch;
}

.room {
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  display: grid; gap: 1rem;
  grid-template-rows: auto auto 1fr;
}
.room__media { overflow: hidden; border-radius: var(--radius); }
.room__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transform-origin: 50% 60%;
  transition: transform 0.7s var(--ease);
}
.room:hover .room__media img,
.room:focus-within .room__media img { transform: scale(1.04); }
/* Beim Hover wird eine Haarlinie in Gold gezogen, dieselbe Geste wie die
   Kette im Fortschrittsbalken, nur im Kleinen. */
.room__title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.3;
  text-wrap: balance;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.45s var(--ease);
}
.room:hover .room__title,
.room:focus-within .room__title { background-size: 100% 1px; }
.room__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; align-self: end;
}
.room__price { display: grid; }
.room__price strong {
  font-weight: 600; font-size: var(--fs-preis); line-height: 1.333;
}
.room__price span { font-size: var(--fs-body-s); line-height: 1.533; color: var(--ink-2); }

.rooms__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--page-pad) 0;
}
.rooms__progress { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 12rem; }
.rooms__count { color: var(--ink-2); white-space: nowrap; }

/* Der Fortschritt ist die namensgebende Kette: die Glieder bleiben ortsfest,
   nur das dunkle Segment wandert durch sie hindurch. */
.rooms__bar {
  position: relative; flex: 1 1 auto; max-width: 16.25rem;
  height: 10px; overflow: hidden;
  background-image: var(--chain-faint);
  background-repeat: repeat-x;
  background-position: 0 center;
}
.rooms__bar span {
  position: absolute; inset: 0 auto 0 0;
  width: 12.5%;
  background-image: var(--chain-ink);
  background-repeat: repeat-x;
  background-position: 0 center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-position-x 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.3s var(--ease);
}

/* Blickseite der aktiven Karte, beantwortet die Frage aus der Headline */
.rooms__view { height: 1.35rem; overflow: hidden; display: flex; align-items: center; }
.rooms__view p { color: var(--ink-2); white-space: nowrap; }
@media (max-width: 30rem) { .rooms__view { display: none; } }
.rooms__arrows { display: none; gap: 0.75rem; }
.is-ready .rooms__arrows { display: flex; }
.arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line-ui); border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.arrow svg { fill: currentColor; }
.arrow:hover:not(:disabled) { border-color: var(--ink); background: rgba(47, 79, 79, 0.05); }
.arrow[disabled] { border-color: var(--line-strong); color: var(--ink-2); cursor: default; }

/* ---- Sektion: Das Haus ------------------------------------------------- */
.house {
  background: var(--cream);
  display: grid;
}
.house__media { overflow: hidden; }
.house__media img {
  width: 100%; height: clamp(15rem, 60vw, 36.8125rem); object-fit: cover;
}
.house__text {
  display: grid; gap: 1.5rem; align-content: center;
  padding: var(--sect-pad) var(--page-pad);
}

@media (min-width: 62rem) {
  .house {
    grid-template-columns: minmax(0, 612fr) minmax(0, 828fr);
    align-items: stretch;
  }
  .house__media img { height: 100%; min-height: 36.8125rem; }
  .house__text { padding: var(--sect-pad) var(--page-pad) var(--sect-pad) 4.5rem; }
  .house__text > * { max-width: 41.625rem; }
}

/* ---- Vorschau-Ende: Restaurant Zorbas --------------------------------- */
.handoff { position: relative; overflow: hidden; }
.handoff__inner {
  padding: clamp(3rem, 6vw, 6.25rem) var(--page-pad) 0;
  display: grid; gap: 1.125rem;
}
.handoff__inner .lead { max-width: 56.25rem; }
.handoff__media { margin-top: 1.25rem; overflow: hidden; border-radius: var(--radius); }
.handoff__media img { width: 100%; height: clamp(11rem, 26vw, 18.75rem); object-fit: cover; }
.handoff__veil {
  position: absolute; inset: auto 0 0 0; height: 48%;
  background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.92) 72%,
              var(--paper) 100%);
  pointer-events: none;
}

/* ---- Fester Abschluss: Silberschmidt Media ---------------------------- */
.pitch {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(3rem, 6vw, 5.5rem) var(--page-pad);
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  justify-items: start;
}
.pitch__photo { display: grid; gap: 0.75rem; justify-items: center; }
.pitch__photo img {
  width: clamp(8.75rem, 18vw, 13.125rem); height: auto;
  border-radius: 14px;
}
.pitch__photo figcaption {
  display: grid; gap: 0.1875rem; text-align: center;
  font-weight: 500; font-size: var(--fs-nav); line-height: 1.286;
}
.pitch__role { font-weight: 400; font-size: 0.8125rem; letter-spacing: 0.015em; color: var(--ink-2); }
.pitch__body { display: grid; gap: 1rem; justify-items: start; }
.pitch__eyebrow-link { text-decoration: underline; text-underline-offset: 0.2em; }
.pitch__title {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-pitch); line-height: 1.2857;
  text-wrap: balance;
}
.pitch__fine { font-size: var(--fs-body-s); line-height: 1.533; color: var(--ink-2); }

@media (min-width: 48rem) {
  .pitch { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}

/* ---- Bewertungs-Badge (im Browser unten fixiert) ---------------------- */
.badge {
  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 40;
  display: none;
  align-items: center; gap: 0.875rem;
  padding: 0.875rem 1.25rem 0.875rem 1.125rem;
  background: var(--paper);
  border: 1px solid rgba(47, 79, 79, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(47, 79, 79, 0.18);
}
.badge__score {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-score); line-height: 1.0625;
}
.badge__text { display: grid; gap: 0.1875rem; }
.badge__line { font-weight: 500; font-size: 0.8125rem; line-height: 1.3077; }
.badge__sub { font-size: var(--fs-mono); line-height: 1.333; color: var(--ink-2); }

/* Erst ab Tablet einblenden, damit auf dem Smartphone nichts verdeckt wird */
@media (min-width: 48rem) {
  .badge { display: flex; }
}

/* Badge kommt verzögert herein und räumt ab, sobald der Abschluss erscheint.
   Beides über Klassen am <html>, damit es auch ohne GSAP funktioniert. */
/* Sichtbarkeit über genau zwei Zustände, damit keine Regel die andere
   überstimmt: erscheint verzögert, verschwindet wenn Bedienelemente oder der
   Abschluss den Platz brauchen. */
.is-animating .badge { opacity: 0; transform: translateY(14px); }
.is-animating.is-badge-in:not(.is-badge-hidden) .badge {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.is-badge-hidden .badge {
  opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

/* =========================================================================
   Motion-Startzustände · ausschließlich unter .is-animating.
   Die Klasse setzt main.js nur, wenn GSAP geladen ist und der Nutzer keine
   reduzierte Bewegung verlangt. Ohne JS/GSAP bleibt alles sichtbar.
   ========================================================================= */
.is-animating .hero__title .line,
.is-animating [data-hero-el],
.is-animating [data-reveal] { opacity: 0; }

/* Zeilenmaske im Hero: die Zeilen steigen hinter einer harten Kante auf.
   Das Padding gibt den Ober- und Unterlängen der Cormorant Luft, weil die
   Zeilenhöhe von 0,976 enger ist als die Glyphen. */
.is-animating .hero__title .line {
  overflow: hidden;
  padding: 0.14em 0 0.08em;
  margin: -0.14em 0 -0.08em;
}
.is-animating .hero__title .line__in { display: block; }

/* Der belegte Kern der Historie wird typografisch vollzogen. Kein Abdimmen
   per Deckkraft (das ergäbe nur 2:1), sondern ein Farbwechsel von --ink-2
   (4,6:1 auf Creme) zu Ink. */
.is-animating [data-lost],
.is-animating [data-found] { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}