/* ==========================================================================
   Nadja's Hairstyle – Stylesheet
   Farbwelt: Aubergine / Flieder / Messing auf hellem Papierton
   Schrift:  Fraunces (Display) + Karla (Text & Preise)
   ========================================================================== */

:root {
  /* Farben */
  --ink:        #1c1a21;
  --ink-soft:   #4a4551;
  --plum:       #5b4a78;
  --plum-deep:  #33294a;
  --lilac:      #a392c4;
  --brass:      #b08d57;   /* Linien, Rahmen, Text auf dunklem Grund      */
  --brass-text: #8a6a3a;   /* dasselbe Messing, dunkel genug für Fließtext */
  --brass-hell: #bd9a63;   /* und aufgehellt für Text auf dunklem Grund    */
  --paper:      #f7f4f8;
  --paper-2:    #ede6f0;
  --white:      #ffffff;
  --line:       rgba(28, 26, 33, .14);
  --line-light: rgba(255, 255, 255, .18);

  /* Bilder – hier bei Bedarf austauschen */
  --bg-hero:   url('img/background.png');   
  --bg-about1: url('img/about1.png');       
  --bg-about2: url('img/about2.png');       
  --bg-about3: url('img/about3.jpg');       

  /* Maße */
  --wrap: 1140px;
  --r:    14px;
  --r-sm: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Kopfbild: hier lässt sich die Bewegung einstellen */
  --zoom-dauer:     11s;    /* eine Zoomrichtung                          */
  --zoom-staerke:   1.10;   /* Endvergrößerung, 1.10 = zehn Prozent       */
  --wechsel-takt:   12s;     /* wie lange ein Bild stehen bleibt           */
  --wechsel-dauer:  5s;   /* Länge der Überblendung                     */

  /* Schrift */
  --display: "Fraunces", Georgia, serif;                 /* Überschriften   */
  --script:  "Hurricane", "Segoe Script", cursive;       /* Signatur-Akzent */
  --text:    "Lato", "Segoe UI", system-ui, sans-serif;  /* Fließtext       */
  --ui:      "OpenSansNH", "Segoe UI", system-ui, sans-serif; /* Labels     */
}

/* --------------------------------------------------------------- Schriften
   Alle Dateien liegen im Ordner /fonts auf dem eigenen Server. Nichts wird
   von fremden Servern nachgeladen. Format ist woff2 – von jedem Browser der
   letzten zehn Jahre unterstützt und rund viermal kleiner als TTF.
   Als zweite Quelle stehen die TTF im Web-Root, die du schon hattest.      */

/* Display: Fraunces, eine Variable Font. Die Achse opsz stellt die Schrift
   je nach Größe um – große Überschriften bekommen feinere Serifen, kleine
   bleiben kräftig. SOFT rundet die Endungen leicht ab, WONK aktiviert die
   lebendigeren Alternativformen.                                          */
@font-face {
  font-family: "Fraunces";
  src: url('fonts/fraunces.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Hurricane";
  src: url('fonts/hurricane.woff2') format('woff2'),
       url('Hurricane-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/lato-regular.woff2') format('woff2'),
       url('Lato-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/lato-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "OpenSansNH";
  src: url('fonts/opensans.woff2') format('woff2'),
       url('OpenSans.ttf') format('truetype');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

/* Lieber ruhiger und klassischer? Marcellus liegt fertig im Ordner. Dann
   diesen Block aktivieren und oben --display auf "Marcellus" setzen.
@font-face {
  font-family: "Marcellus";
  src: url('fonts/marcellus.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/

/* --------------------------------------------------------------- Basis -- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--plum); text-decoration: none; }
a:hover { color: var(--brass-text); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 35, "WONK" 1;
  line-height: 1.13;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

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

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: var(--r-sm);
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* Kleine Überschriftenzeile */
.eyebrow {
  font-family: var(--ui);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brass-text);
  margin: 0 0 .8em;
}
.eyebrow--light { color: var(--lilac); }
/* Auf dunklem Grund ist das hellere Messing das lesbarere */
.hero .eyebrow { color: var(--brass-hell); }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--text); font-weight: 700;
  font-size: .95rem; letter-spacing: .02em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--plum); color: var(--white); }
.btn--primary:hover { background: var(--plum-deep); color: var(--white); }

.btn--ghost { border-color: currentColor; color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--plum-deep); }

.btn--call {
  background: transparent; color: var(--ink);
  border-color: var(--line); padding: 9px 18px; font-size: .9rem;
}
.btn--call:hover { border-color: var(--plum); color: var(--plum); }

/* ------------------------------------------------------------ Ankündigung */
.announce {
  position: relative;
  background: var(--plum-deep); color: var(--paper);
  font-size: .92rem; text-align: center;
  padding: 10px 46px;
}
.announce p { margin: 0; }
.announce a { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--white); }
.announce__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--paper);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 10px;
}

/* ------------------------------------------------------------------ Logo --
   Die Logodatei ist reines Weiß auf transparentem Grund und wird deshalb
   nur auf dunklen Flächen eingesetzt: Hero und Fußzeile.                */
.logo { display: block; height: auto; }

/* ----------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); }
/* Die Wortmarke steht in der Schreibschrift. Sie ist monolinig und dünn –
   unter etwa 32 px zerfallen die Striche, deshalb bewusst groß gesetzt und
   die Kopfzeile entsprechend höher. */
.brand__name {
  font-family: var(--script);
  font-size: 2.35rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--plum);
  padding-bottom: .12em;   /* Platz für die Unterlängen */
}
.brand__name em { font-style: normal; color: inherit; }
.brand:hover .brand__name { color: var(--plum-deep); }

/* Logo im Header statt Schriftzug? Dann in der index.html
   <img class="logo brand__logo" src="img/logo.png" alt="Nadja's Hairstyle">
   vor dem Schriftzug einfügen und diese Zeilen aktivieren. Achtung: das
   Logo ist weiß – auf dem hellen Header braucht es eine dunkle Version.
.brand__logo { width: 150px; }
.brand__name { display: none; }
*/

.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a {
  color: var(--ink-soft); font-size: .95rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.nav a:hover { background: var(--paper-2); color: var(--plum-deep); }
.nav a.is-active { color: var(--plum); background: var(--paper-2); }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 11px 10px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .25s, opacity .2s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  background: var(--plum-deep);
  color: var(--white);
  overflow: hidden;
}
/* Eine Ebene je Hintergrundbild. Ohne JavaScript gibt es genau eine,
   sie trägt die Klasse "aktiv" schon im HTML. Findet das Skript weitere
   Bilder, legt es zusätzliche Ebenen an und blendet zwischen ihnen um. */
.hero__bild {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity var(--wechsel-dauer) ease-in-out;
}
.hero__bild.aktiv { opacity: .5; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
              rgba(51, 41, 74, .92) 0%,
              rgba(51, 41, 74, .72) 45%,
              rgba(51, 41, 74, .35) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  padding: clamp(70px, 13vw, 140px) 0 clamp(60px, 10vw, 120px);
  max-width: 720px; margin-inline: auto;
  width: min(100% - 40px, var(--wrap));
}
.hero__logo {
  width: clamp(130px, 20vw, 190px);
  margin-bottom: 26px;
  opacity: .95;
}
.hero__title {
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  line-height: 1.13;
  margin-bottom: .62em;   /* Platz für die Unterlängen der Schreibschrift */
}
/* Das hervorgehobene Wort steht in der Schreibschrift – sie ist hauchdünn
   und wirkt erst ab dieser Größe. line-height hält die Zeile schmal,
   trotz der hohen Ober- und Unterlängen. */
.hero__title em {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.7em;
  line-height: .92;   /* reserviert Raum, ohne die Zeile aufzublähen */
  color: var(--lilac);
  padding-right: .06em;
}
.hero__text {
  font-size: 1.08rem; max-width: 46ch;
  color: rgba(255, 255, 255, .88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ----------------------------------------------------------------- Fakten */
.facts { background: var(--ink); color: var(--paper); }
.facts__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px 0;
  padding: 0;
}
.fact {
  padding: 22px 26px 22px 0;
  border-right: 1px solid var(--line-light);
  display: flex; flex-direction: column; gap: 4px;
}
.fact:last-child { border-right: 0; }
.fact + .fact { padding-left: 26px; }
.fact__label {
  font-family: var(--ui);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lilac); font-weight: 700;
}
.fact__value { font-size: .95rem; line-height: 1.45; }

/* -------------------------------------------------------------- Abschnitt */
.section { padding: clamp(64px, 9vw, 110px) 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--plum-deep); color: var(--paper); }

.section__title {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  margin-bottom: .3em;
}
.section__title--light { color: var(--white); }

.section__lead {
  max-width: 58ch; color: var(--ink-soft);
  font-size: 1.03rem; margin-bottom: 2.4em;
}
.section__lead--light { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------- Preiskarte */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: var(--r);
  box-shadow: 0 20px 50px -30px rgba(51, 41, 74, .55);
  overflow: hidden;
}

/* Kein overflow hier. Ein Scroll-Container würde das eine Pixel abschneiden,
   das der aktive Reiter per margin-bottom nach unten ragt – der Messingstrich
   käme dann nur 1 px dick heraus und verschwände bei manchen Zoomstufen
   ganz. Passt eine Kategorie nicht mehr in die Zeile, bricht sie um. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 0 4px;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--line);
}

.tab {
  flex: 0 0 auto;
  font-family: var(--text); font-size: .92rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 16px; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--plum); }
.tab[aria-selected="true"] { color: var(--plum-deep); border-bottom-color: var(--brass); }

.panel { padding: 30px clamp(18px, 3.5vw, 40px) 26px; }

.panel__head {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-family: var(--ui); font-weight: 700;
  color: var(--brass-text);
  margin: 34px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.panel__head:first-child { margin-top: 0; }
.panel__note { color: var(--ink-soft); font-size: .95rem; margin: -4px 0 14px; }

/* Preiszeilen mit Punktlinie */
.price { list-style: none; margin: 0 0 4px; padding: 0; }
.price li {
  display: flex; align-items: baseline; gap: 6px;
  padding: 9px 2px;
  border-radius: var(--r-sm);
  transition: background-color .2s;
}
.price li:hover { background: var(--paper); }

.price__name { flex: 0 1 auto; }
.price__dots {
  flex: 1 1 auto; min-width: 16px;
  align-self: flex-end;
  margin-bottom: 5px;
  border-bottom: 1px dotted var(--line);
}
.price__val {
  flex: 0 0 auto;
  font-weight: 700; color: var(--plum-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price--feature .price__val { color: var(--brass-text); }

.note {
  margin-top: 22px; padding: 14px 18px;
  background: var(--paper); border-left: 3px solid var(--lilac);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .95rem; color: var(--ink-soft);
}

.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chip {
  display: inline-block;
  font-size: .88rem; font-weight: 700;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--plum);
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { background: var(--plum); border-color: var(--plum); color: var(--white); }

.card__foot {
  margin: 0;
  padding: 15px 24px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ Salon */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.split:last-child { margin-bottom: 0; }
.split--flip .split__media { order: 2; }

.split__media {
  min-height: 340px;
  border-radius: var(--r);
  background-size: cover; background-position: center;
}
.split__text h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: .45em;
}
.split__text p { color: var(--ink-soft); margin-bottom: 0; }

/* --------------------------------------------------------------- Akkordeon */
.accordion { border-top: 1px solid var(--line-light); }

.acc { border-bottom: 1px solid var(--line-light); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  cursor: pointer; list-style: none;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--white);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--lilac); }

.acc__sign {
  flex: 0 0 auto; position: relative;
  width: 20px; height: 20px;
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--brass);
  transition: transform .25s;
}
.acc__sign::after { transform: rotate(90deg); }
.acc[open] .acc__sign::after { transform: rotate(0deg); }

.acc__body {
  padding: 0 4px 26px;
  max-width: 72ch;
  color: rgba(255, 255, 255, .82);
}
.acc__body h4 {
  font-family: var(--ui); font-weight: 700;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lilac);
  margin: 24px 0 8px;
}
.acc__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Termine */
.termine {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.termine__text p:not(.eyebrow) { color: var(--ink-soft); max-width: 48ch; }
.termine__text .btn { margin-top: 10px; }

.hours {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 28px;
}
.hours__title {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-family: var(--ui); font-weight: 700; color: var(--brass-text);
  margin-bottom: 14px;
}
.hours__list { margin: 0; }
.hours__list > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--line);
}
.hours__list > div:last-child { border-bottom: 0; }
.hours__list dt { color: var(--ink-soft); }
.hours__list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.hours__note {
  margin: 16px 0 0; font-size: .88rem; color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- Kontakt */
.kontakt {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
.kontakt__list { list-style: none; margin: 0; padding: 0; }
.kontakt__list li {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.kontakt__list li:first-child { border-top: 1px solid var(--line); }
.kontakt__label {
  font-family: var(--ui);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--brass-text); padding-top: 4px;
}

.kontakt__map {
  display: block; position: relative;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line);
}
.kontakt__map img { width: 100%; height: 100%; object-fit: cover; }
.kontakt__maphint {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--white); color: var(--plum-deep);
  font-size: .85rem; font-weight: 700;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}

/* ----------------------------------------------------------------- Footer */
.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, .72);
  padding: 56px 0 24px;
  font-size: .93rem;
}
.site-footer a { color: var(--lilac); }
.site-footer a:hover { color: var(--brass); }

.footer__top {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-light);
}
.footer__top p { margin: 0 0 4px; }
.footer__logo { width: 140px; margin-bottom: 14px; }
.footer__brand {
  font-family: var(--display); font-size: 1.3rem;
  color: var(--white); margin-bottom: 8px !important;
}
.footer__brand em { font-style: italic; color: var(--lilac); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-start; }

.legal { margin: 22px 0; }
.legal summary {
  cursor: pointer; font-weight: 700; color: var(--white);
  padding: 10px 0; list-style: none;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::before { content: "▸ "; color: var(--brass); }
.legal[open] summary::before { content: "▾ "; }
.legal__body {
  columns: 2; column-gap: 44px;
  font-size: .85rem; line-height: 1.6;
  padding: 10px 0 20px;
}
.legal__body h3 {
  font-family: var(--ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lilac);
  margin: 18px 0 6px; break-after: avoid;
}
.legal__body h3:first-child { margin-top: 0; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  padding-top: 20px;
  font-size: .85rem;
}
.footer__bottom p { margin: 0; }

/* ------------------------------------------------------------- Anrufleiste */
.callbar {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  background: var(--plum); color: var(--white);
  text-align: center; font-weight: 700; font-size: .95rem;
  padding: 15px 16px; border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(51, 41, 74, .8);
}
.callbar:hover { color: var(--white); }

/* ------------------------------------------------------------- Bewegung --
   Grundsatz: eine zusammenhängende Choreografie statt vieler Einzeleffekte.
   Alles hängt an der Klasse "js" am <html>. Läuft kein JavaScript, ist auch
   nichts versteckt – die Seite bleibt in jedem Fall lesbar.               */

/* --- Auftritt beim Laden: der Hero baut sich der Reihe nach auf --------- */
@keyframes auftritt {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Die Schreibschrift kommt zuletzt und leicht aus der Schräge –
   als würde jemand den Schriftzug hinschreiben. */
@keyframes schriftzug {
  from { opacity: 0; transform: translateX(-14px) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}

.js .hero__inner > * { opacity: 0; }

.hero.laeuft .hero__inner > * { animation: auftritt .85s var(--ease) both; }
.hero.laeuft .hero__logo      { animation-delay: .05s; }
.hero.laeuft .eyebrow         { animation-delay: .22s; }
.hero.laeuft .hero__title     { animation-delay: .34s; }
.hero.laeuft .hero__text      { animation-delay: .52s; }
.hero.laeuft .hero__actions   { animation-delay: .64s; }
.hero.laeuft .hero__title em  { animation: schriftzug 1s var(--ease) .62s both; }

/* Langsamer Zoom über alle Ebenen im Gleichtakt. Weil alle Ebenen dieselbe
   Animation zur selben Zeit laufen, springt beim Überblenden nichts. */
.js .hero__bild {
  animation: atmen var(--zoom-dauer) ease-in-out infinite alternate;
}
@keyframes atmen {
  from { transform: scale(1); }
  to   { transform: scale(var(--zoom-staerke)); }
}

/* --- Einblenden beim Scrollen ------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--stufe, 0) * 80ms);
}
/* Bewusst keine seitlichen Einblendungen: ein Element, das von rechts
   hereinfährt, steht kurz neben dem Bildschirm und erzeugt auf dem Handy
   eine waagrechte Bildlaufleiste. Alles kommt von unten. */
.js [data-reveal].sichtbar { opacity: 1; transform: none; }

/* --- Kopfzeile schrumpft beim Scrollen --------------------------------- */
.site-header { transition: box-shadow .35s ease, background-color .35s ease; }
.header__inner { transition: min-height .35s var(--ease); }
.brand__name  { transition: font-size .35s var(--ease), color .2s ease; }

.site-header.kompakt { box-shadow: 0 8px 28px -22px rgba(28, 26, 33, .85); }
.site-header.kompakt .header__inner { min-height: 60px; }
.site-header.kompakt .brand__name   { font-size: 1.85rem; }

/* --- Preis-Reiter blenden über ----------------------------------------- */
.panel { animation: auftritt .45s var(--ease) both; }

/* --- Akkordeon öffnet und schließt weich ------------------------------- */
.acc__body { display: grid; grid-template-rows: 1fr; }
.js .acc__body {
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease), opacity .3s ease;
  opacity: 0;
}
.js .acc.offen .acc__body { grid-template-rows: 1fr; opacity: 1; }
.acc__inner { min-height: 0; overflow: hidden; }

/* --- Kleine Regungen bei Berührung ------------------------------------- */
.split__media { transition: transform .7s var(--ease); }
.split:hover .split__media { transform: scale(1.025); }

.price li { transition: background-color .25s ease, padding-left .25s var(--ease); }
.price li:hover { padding-left: 10px; }

.btn { transition: background-color .2s, color .2s, border-color .2s,
                   transform .2s var(--ease), box-shadow .25s ease; }
.btn--primary:hover { box-shadow: 0 12px 26px -14px rgba(51, 41, 74, .9); }

.chip, .kontakt__map img { transition: transform .5s var(--ease),
                                       background-color .2s, border-color .2s, color .2s; }
.kontakt__map:hover img { transform: scale(1.04); }

/* --- Wer weniger Bewegung möchte, bekommt keine ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .hero__inner > * { opacity: 1; }
  .js .hero__bild { animation: none; }
  .js .acc__body { transition: none; }
  .split:hover .split__media,
  .kontakt__map:hover img { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* Auch die Verzögerungen zurücksetzen. Ohne diese beiden Zeilen bleibt
       der Hero-Button trotz abgeschalteter Animation 0,64 s unsichtbar –
       die Dauer ist dann null, die Wartezeit davor aber nicht. */
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 900px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .fact { border-right: 0; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
  .fact:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line-light); }
  .fact + .fact { padding-left: 0; }
  .fact:nth-child(even) { padding-left: 22px; }
  .fact:nth-last-child(-n+2) { border-bottom: 0; }

  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media { min-height: 240px; }

  .termine, .kontakt { grid-template-columns: 1fr; }
  .legal__body { columns: 1; }
}

/* ==========================================================================
   Smartphone
   ========================================================================== */
@media (max-width: 720px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 86px; }

  .header__call { display: none; }
  .burger { display: block; }

  .brand { gap: 10px; }
  .brand__name { font-size: 2rem; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .5);
    padding: 8px 20px 16px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 4px; border-radius: 0; font-size: 1.05rem; }
  .nav a + a { border-top: 1px solid var(--line); }

  .hero__inner { padding-top: 64px; padding-bottom: 72px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Fünf Reiter passen nicht nebeneinander. Waagrecht scrollen scheidet
     aus – ohne Bildlaufleiste verschwinden die hinteren unbemerkt. Also
     umbrechen. Die Unterstreichung bleibt: sie hängt am Reiter selbst,
     nicht an der Leiste, und funktioniert darum auch in der zweiten Zeile.
     Dafür weniger Luft links und rechts, damit drei Reiter pro Zeile
     Platz finden. */
  .tabs {
    gap: 0 2px;
    padding: 12px 12px 0;
  }

  .tab { padding: 12px 10px; }

  .panel { padding: 24px 18px 20px; }

  /* Punktlinie weg, Preis bleibt rechtsbündig neben dem Namen */
  .price li { gap: 14px; padding: 11px 2px; }
  .price__name { flex: 1 1 auto; }
  .price__dots { display: none; }
  .price__val { flex: 0 0 auto; margin-left: auto; font-size: .95rem; }

  .kontakt__list li { grid-template-columns: 1fr; gap: 2px; }
  .kontakt__label { padding-top: 0; }

  .callbar { display: block; }
  .site-footer { padding-bottom: 90px; }
}