/* ═══════════════════════════════════════════════
   Barber Brothers Wolfsburg – Stylesheet
   Farben: Schwarz / Warmweiß / Kupfer (wie im Salon)
   ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   Schriften – liegen bewusst auf dem eigenen Server
   ───────────────────────────────────────────────
   Nicht über fonts.googleapis.com eingebunden: dabei ginge die
   IP-Adresse jedes Besuchers an Google, was ohne vorherige
   Einwilligung gegen die DSGVO verstößt (LG München I, 20.01.2022,
   Az. 3 O 17493/20). Beide Schriften stehen unter der SIL Open Font
   License, eigenes Ausliefern ist also ausdrücklich erlaubt.

   Es sind Variable Fonts: eine Datei je Familie deckt den ganzen
   angegebenen Strichstärkenbereich ab. */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  /* Lateinischer Zeichensatz inkl. Umlaute und ß */
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

:root {
  --black: #131311;
  --dark: #1c1c1a;
  --dark-soft: #242422;
  --cream: #f6f3ee;
  --white: #ffffff;
  --copper: #b87742;
  --copper-light: #d29a63;
  --text: #2b2b28;
  --text-muted: #6d6a63;
  --text-on-dark: #e8e4dc;
  --text-on-dark-muted: #a8a49a;
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Jost", "Segoe UI", sans-serif;
  --radius: 6px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .14);

  /* ─────────── Bewegung ───────────
     Der Browser-Standard "ease" ist nahezu symmetrisch: gleich schnell los
     wie aus. Das wirkt beliebig. Teuer wirkt Bewegung, die zügig ansetzt und
     lange sanft ausläuft - wie etwas mit Masse, das abgebremst wird.

     --aus     Regelfall: schneller Antritt, langes weiches Auslaufen.
     --gleiten Für größere Wege; setzt behutsamer an, damit nichts springt.
     --weich   Für Farben und Deckkraft, wo es keine Trägheit zu zeigen gibt.

     Drei Dauern statt frei gewählter Werte, damit nichts aus der Reihe fällt.
     Kurze Wege dürfen nicht lange brauchen, lange nicht hetzen. */
  --aus: cubic-bezier(.22, 1, .36, 1);
  --gleiten: cubic-bezier(.52, 0, .22, 1);
  --weich: cubic-bezier(.4, 0, .25, 1);

  --dauer-kurz: .22s;
  --dauer-mittel: .4s;
  --dauer-lang: .75s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--cream);
}

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

.container { width: min(1140px, 92%); margin-inline: auto; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; }

h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .6em; }
h3 { font-size: 1.25rem; margin-bottom: .5em; }

.center { text-align: center; }

.kicker {
  font-size: .85rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
  margin-bottom: .8em;
}

.section { padding: clamp(4rem, 9vw, 6.5rem) 0; }

/* Sprungziele nicht unter dem mitlaufenden Kopfbereich enden lassen */
/* Sprungziele müssen mindestens die Höhe des mitlaufenden Kopfbereichs
   Abstand halten – sonst liegt hinter dessen durchscheinendem Grund noch
   der vorherige Abschnitt und zeichnet einen hellen Streifen.
   Den genauen Wert setzt das Skript, der Rückfallwert gilt ohne Skript. */
[id] { scroll-margin-top: var(--kopf-hoehe, 100px); }

.section-dark {
  background: var(--dark);
  color: var(--text-on-dark);
}
.section-dark h2 { color: var(--white); }

.section-intro {
  max-width: 44ch;
  margin: 0 auto 3rem;
  color: var(--text-muted);
}
.section-dark .section-intro { color: var(--text-on-dark-muted); }

.stars { color: var(--copper-light); letter-spacing: .15em; }

/* ─────────── Buttons ─────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .8em 1.9em;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dauer-kurz) var(--weich), color var(--dauer-kurz) var(--weich), border-color var(--dauer-kurz) var(--weich),
              transform var(--dauer-mittel) var(--aus), box-shadow var(--dauer-kurz) var(--weich);
  /* Unterdrückt das graue Kästchen, das Handys beim Antippen einblenden */
  -webkit-tap-highlight-color: transparent;
}

/* Rückmeldung beim Drücken: sofort, ohne Übergang – eine Verzögerung
   fühlt sich an, als hätte das Gerät die Berührung verschluckt */
.btn:active {
  transform: scale(.96);
  opacity: .8;
  transition: none;
}

.btn-primary {
  background: var(--copper);
  color: var(--white);
}

/* Button mit Pfeil: Der Pfeil rückt beim Berühren in Laufrichtung */
.btn-arrow svg {
  flex-shrink: 0;
  transition: transform var(--dauer-mittel) var(--aus);
}
.btn-arrow:active svg { transform: translateX(4px); }
.btn-arrow-links:active svg { transform: translateX(-4px); }

.btn-ghost {
  border-color: rgba(255, 255, 255, .45);
  color: var(--white);
}

#bewertungen .btn-ghost { margin-top: 2.5rem; }

.btn-outline {
  border-color: var(--copper);
  color: var(--copper);
}

/* Hover nur für echte Zeigegeräte – auf Touchscreens bliebe der
   Hover-Zustand sonst nach dem Antippen hängen */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--copper-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(184, 119, 66, .3);
  }
  .btn-ghost:hover { border-color: var(--copper-light); color: var(--copper-light); }
  .btn-outline:hover { background: var(--copper); color: var(--white); }
  .btn-arrow:hover svg { transform: translateX(5px); }
  .btn-arrow-links:hover svg { transform: translateX(-5px); }
}

/* ─────────── Meldung (Urlaub, Feiertage) ─────────── */

/* Warmes Pergament statt Warnfarbe: hebt sich vom dunklen Kopfbereich ab,
   ohne wie ein Störer zu wirken. */
.meldung {
  background: #efe7d9;
  border-bottom: 1px solid rgba(184, 119, 66, .3);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .03);
}

.meldung-inhalt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: .85rem 0;
}

.meldung-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--copper);
}

.meldung-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem .7rem;
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text);
}

.meldung-text strong {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .01em;
  color: var(--copper);
}

/* Der Zeitraum ist die eigentliche Information – er bekommt das Gewicht */
.meldung-zeitraum {
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}

.meldung-zeitraum::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: .7rem;
  vertical-align: middle;
  background: var(--copper);
  opacity: .5;
}

.meldung-zusatz { color: var(--text-muted); }

@media (max-width: 700px) {
  .meldung-inhalt { gap: .7rem; padding: .8rem 0; align-items: flex-start; }
  .meldung-icon { margin-top: .15rem; }
  .meldung-text { justify-content: flex-start; text-align: left; font-size: .9rem; }
  .meldung-text strong { font-size: 1rem; }
  /* Der Strich vor dem Zeitraum ergibt nur in einer Zeile Sinn */
  .meldung-zeitraum { flex-basis: 100%; }
  .meldung-zeitraum::before { display: none; }
  .meldung-zusatz { flex-basis: 100%; font-size: .85rem; }
}

/* ─────────── Header ─────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(19, 19, 17, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .8rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  transition: transform var(--dauer-mittel) var(--aus), opacity var(--dauer-kurz) var(--weich);
  -webkit-tap-highlight-color: transparent;
}
.logo:active { transform: scale(.96); opacity: .8; transition: none; }

/* Das verschränkte BB-Zeichen aus dem Logo */
.logo-mark {
  display: block;
  width: auto;
  height: 44px;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
}

.main-nav {
  display: flex;
  gap: 1.6rem;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .06em;
  padding: .3em 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dauer-kurz) var(--weich), border-color var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.main-nav a:active {
  color: var(--copper-light);
  transform: scale(.96);
  opacity: .8;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: var(--copper-light); border-bottom-color: var(--copper-light); }
}

/* Logo und Anruf-Button erscheinen nur im mobilen Vollbild-Menü */
.nav-logo, .nav-cta { display: none; }

.header-phone { padding: .55em 1.2em; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  /* 44px Trefferfläche, auch wenn die Striche kleiner sind */
  min-width: 44px;
  min-height: 44px;
  padding: .4rem;
  cursor: pointer;
  transition: transform var(--dauer-mittel) var(--aus), opacity var(--dauer-kurz) var(--weich);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:active { transform: scale(.9); opacity: .7; transition: none; }
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  transition: transform var(--dauer-mittel) var(--aus), opacity var(--dauer-kurz) var(--weich);
}

/* ─────────── Hero ─────────── */

.hero {
  position: relative;
  /* Am Handy 92 % der Fensterhoehe: ein voller Wert kaeme mit der ein- und
     ausfahrenden Adressleiste ins Rutschen, und unten liegt ohnehin der feste
     Aktionsbalken darueber. Am Rechner wird stattdessen genau die Kopfhoehe
     abgezogen - siehe ganz unten. Frueher stand hier eine Deckelung auf
     820 Punkte; dadurch schaute auf hohen Bildschirmen die Vorteilsleiste
     mit ins erste Bild. */
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 15, 13, .88) 0%,
    rgba(15, 15, 13, .62) 55%,
    rgba(15, 15, 13, .35) 100%
  );
}

.hero-content { position: relative; padding: 6rem 0; }

.hero-kicker {
  font-size: .9rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--copper-light);
  font-weight: 500;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hero h1 span { color: var(--copper-light); }

.hero h1 .h1-city {
  display: block;
  font-size: .38em;
  font-weight: 500;
  letter-spacing: .42em;
  color: var(--white);
  margin-top: .35em;
}

.hero-sub {
  margin: 1.4rem 0 2.2rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 42ch;
  color: var(--text-on-dark);
}

/* Öffnungsstatus – sitzt zwischen Untertitel und Schaltflächen */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.8rem;
  padding: .5em 1.1em .5em .9em;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--text-on-dark);
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-status[hidden] { display: none; }

.status-punkt {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #7d7a72;
}

/* Drei Zustaende, drei Farben. Die Bewegung unterscheidet sie zusaetzlich:
   offen pulst nach aussen wie ein Herzschlag, "schliesst bald" pulst
   schneller und knapper, geschlossen atmet nur ruhig - eine blinkende rote
   Lampe wirkt wie eine Stoerungsmeldung, nicht wie ein Feierabend. */

.ist-offen .status-punkt {
  background: #5fb87a;
  box-shadow: 0 0 0 0 rgba(95, 184, 122, .6);
  animation: statusPuls 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.schliesst-bald .status-punkt {
  background: #e0a33f;
  box-shadow: 0 0 0 0 rgba(224, 163, 63, .6);
  animation: statusPulsWarnung 1.7s cubic-bezier(.22, .61, .36, 1) infinite;
}

.ist-zu .status-punkt {
  background: #d1544a;
  box-shadow: 0 0 7px 0 rgba(209, 84, 74, .55);
  animation: statusAtmen 3.4s ease-in-out infinite;
}

@keyframes statusPulsWarnung {
  0%   { box-shadow: 0 0 0 0 rgba(224, 163, 63, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(224, 163, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 163, 63, 0); }
}

/* Kein Ausschlag nach aussen, nur ein leichtes An- und Abschwellen des
   Scheins - das wirkt wie eine Lampe, die brennt, statt wie ein Alarm. */
@keyframes statusAtmen {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(209, 84, 74, .40); }
  50%      { box-shadow: 0 0 11px 1px rgba(209, 84, 74, .75); }
}

/* Ruhiger Puls – zeigt, dass die Angabe gerade jetzt gilt */
@keyframes statusPuls {
  0%   { box-shadow: 0 0 0 0 rgba(95, 184, 122, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(95, 184, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 184, 122, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ist-offen .status-punkt,
  .schliesst-bald .status-punkt,
  .ist-zu .status-punkt { animation: none; }
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.6rem; }

.hero-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2em .6em;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.5;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .6em 1.3em;
  transition: border-color var(--dauer-kurz) var(--weich);
}
.hero-rating:active {
  border-color: var(--copper-light);
  transform: scale(.97);
  opacity: .8;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .hero-rating:hover { border-color: var(--copper-light); }
}
.hero-rating strong { color: var(--white); }

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--copper-light));
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .25; transform: scaleY(.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ─────────── USP-Leiste ─────────── */

.usp-bar {
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 1.6rem 0;
}

.usp-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.usp { text-align: center; }

.usp-title {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--copper-light);
  margin-bottom: .15em;
}

.usp-text { font-size: .92rem; color: var(--text-on-dark-muted); }

/* Schlichtes Ampersand – Playfair setzt sonst ein verschnörkeltes */
.amp {
  font-family: var(--font-body);
  font-weight: 400;
}

/* ─────────── Über uns ─────────── */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.split-text p { margin-bottom: 1.1em; }

/* Ohne Bildspalte steht der Text allein. Eine Spalte statt zwei, und eine
   begrenzte Zeilenlaenge - ueber die ganze Breite waere er unlesbar, weil
   das Auge beim Zeilenwechsel die Spur verliert. */
.split-ohne-bild {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.split-ohne-bild .split-text { max-width: 62ch; }
.split-ohne-bild .checklist {
  display: inline-grid;
  text-align: left;
}

.checklist {
  list-style: none;
  margin-top: 1.4rem;
}
.checklist li {
  padding-left: 1.9em;
  position: relative;
  margin-bottom: .55em;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 1em;
  height: .5em;
  border-left: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(-45deg);
}

.split-media { position: relative; }

.split-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* ─────────── Leistungen ─────────── */

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem 3.5rem;
  max-width: 900px;
  margin: 0 auto 3.5rem;
}

.price-item {
  display: flex;
  align-items: baseline;
  gap: .8em;
  padding: .85em 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.price-name { white-space: nowrap; }
.price-name small { color: var(--text-on-dark-muted); font-size: .82em; }


.price-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, .25);
  transform: translateY(-.25em);
}

.price-value {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--copper-light);
  white-space: nowrap;
}

.package {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  background: var(--dark-soft);
  border: 1px solid rgba(210, 154, 99, .35);
  border-radius: var(--radius);
  padding: 2.6rem 2.2rem 2.2rem;
}

.package-badge {
  position: absolute;
  top: -0.9em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--copper);
  color: var(--white);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3em 1.2em;
  border-radius: 999px;
}

.package h3 { font-size: 1.6rem; color: var(--white); }

.package ul {
  list-style: none;
  margin: 1.2rem 0;
  color: var(--text-on-dark);
}
.package li { padding: .28em 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.package li:last-child { border-bottom: 0; }

.package-price {
  font-family: var(--font-head);
  font-size: 2.6rem;
  color: var(--copper-light);
  margin-bottom: 1.2rem;
}

.package-note {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--text-on-dark-muted);
}

/* ─────────── Galerie ─────────── */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery figure {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  background: var(--dark-soft);
}

/* Hochformate zeigen in einer 4/3-Kachel nur 60 Prozent ihrer Hoehe. Liegt
   das Wesentliche nicht in der Mitte, wird der Ausschnitt verschoben statt
   das Raster zu veraendern.
   10 % zeigt die Bildhoehe von 4 bis 64 Prozent - damit bleiben Koepfe im
   oberen Bildbereich drin. */
.gallery figure[data-ausschnitt="oben"] img { object-position: center 10%; }

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dauer-lang) var(--gleiten);
}
.gallery figure:active img { transform: scale(1.04); transition: transform .12s var(--weich); }

@media (hover: hover) and (pointer: fine) {
  .gallery figure:hover img { transform: scale(1.05); }
}

.gallery-more { margin-top: 2.5rem; }

/* ─────────── Rechtstexte (Impressum, Datenschutz) ─────────── */

.legal-text { max-width: 760px; }

.legal-text h3 {
  margin-top: 2.2rem;
  font-size: 1.15rem;
}
.legal-text p { margin-bottom: .4rem; }

/* ─────────── Zurück-Pfeil auf Unterseiten ─────────── */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  margin-bottom: 1.2rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .05em;
  transition: color var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.back-link svg { transition: transform var(--dauer-mittel) var(--aus); }
.back-link:active {
  color: var(--copper);
  transform: scale(.97);
  opacity: .8;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .back-link:hover { color: var(--copper); }
  .back-link:hover svg { transform: translateX(-3px); }
}

/* ─────────── Bewertungen ─────────── */

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.review {
  background: var(--dark-soft);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  border-top: 3px solid var(--copper);
  display: flex;
  flex-direction: column;
}

.review p { flex: 1; font-size: .98rem; }

.review footer {
  margin-top: 1.2rem;
  font-size: .88rem;
  color: var(--text-on-dark-muted);
}

/* ─────────── Kontakt ─────────── */

.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 2rem;
  align-items: stretch;
}

.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.2rem 2rem;
}

.contact-card h3 {
  color: var(--copper);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 1.4rem;
}
.contact-card h3:first-child { margin-top: 0; }

.contact-link {
  /* inline-block, sonst greift das transform der :active-Rückmeldung nicht */
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  /* Polsterung vergrößert die Trefferfläche auf Daumengröße. Der Unterstrich
     kommt daher als Hintergrundbild und bleibt am Text statt am Rand zu kleben */
  padding: .4em 0;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .4em);
  background-size: 100% 1px;
  transition: color var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.contact-link:active {
  color: var(--copper);
  transform: scale(.97);
  opacity: .8;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact-link:hover { color: var(--copper); }
}

/* Social-Buttons (Instagram, Google) */

.social-row {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.social-btn {
  display: flex;
  align-items: center;
  gap: .85em;
  padding: .85em 1.1em;
  border: 1px solid #e4dcd0;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: #fdfbf8;
  transition: border-color var(--dauer-kurz) var(--weich), background var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.social-btn:active {
  border-color: var(--copper);
  transform: scale(.97);
  opacity: .85;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .social-btn:hover {
    border-color: var(--copper);
    background: var(--white);
    transform: translateY(-2px);
  }
}
.social-btn svg { flex-shrink: 0; }
.social-btn span { display: flex; flex-direction: column; line-height: 1.35; }
.social-btn strong { font-weight: 500; font-size: 1rem; }
.social-btn small { font-size: .85rem; color: var(--text-muted); }

.social-insta svg { color: #c1348b; }
.social-google svg { color: #d64a3d; }
.social-fb svg { color: #1877f2; }

.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: .35em 0; }
.hours td:last-child { text-align: right; white-space: nowrap; }
.hours tr + tr td { border-top: 1px solid #eee6da; }

.hours-note {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--text-muted);
}

.contact-map {
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.contact-map iframe { display: block; min-height: 420px; border: 0; width: 100%; }

/* ─────────── Karte als eigenes Bild ───────────
   Statt eines fremden Kartenrahmens ein Lageplan vom eigenen Server.
   Die ganze Fläche ist der Weg zur Routenplanung. */

/* Der Rahmen trägt die Positionierung, damit die Quellenangabe auch dann
   am Bildrand sitzt, wenn das Bild seitlich beschnitten wird. */
.contact-map { position: relative; }

.karte-quelle {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: .25rem .6rem;
  font-size: .72rem;
  line-height: 1.4;
  color: #3c3c3a;
  background: rgba(255, 255, 255, .84);
  border-top-left-radius: 5px;
  pointer-events: auto;
}
.karte-quelle a { color: inherit; text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .karte-quelle a:hover { color: var(--copper); }
}

.karte-bild {
  position: relative;
  display: block;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.karte-bild img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  /* Der Standort liegt in der Bildmitte und bleibt bei jedem
     Seitenverhältnis sichtbar */
  object-position: center;
  transition: transform var(--dauer-lang) var(--gleiten);
}

/* Schild mit Anschrift über der Karte */
.karte-schild {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.1rem .7rem .9rem;
  border-radius: 999px;
  background: rgba(19, 19, 17, .9);
  backdrop-filter: blur(6px);
  color: var(--text-on-dark);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
  transition: background var(--dauer-kurz) var(--weich);
}
.karte-schild svg { color: var(--copper-light); flex-shrink: 0; }
.karte-schild strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.25;
}
.karte-schild small {
  display: block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--copper-light);
}

/* Auf schmalen Bildschirmen reicht das Adressschild fast bis zur
   Quellenangabe – deshalb rückt es dort eine Zeile höher. */
@media (max-width: 600px) {
  .karte-schild { bottom: 2.4rem; left: .75rem; }
}

@media (hover: hover) and (pointer: fine) {
  .karte-bild:hover img { transform: scale(1.03); }
  .karte-bild:hover .karte-schild { background: rgba(19, 19, 17, .97); }
}
.karte-bild:active img { transform: scale(1.01); transition: none; }
.karte-bild:focus-visible { outline: 3px solid var(--copper); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .karte-bild img { transition: none; }
  .karte-bild:hover img, .karte-bild:active img { transform: none; }
}

/* ─────────── Footer ─────────── */

.site-footer {
  background: var(--black);
  color: var(--text-on-dark-muted);
  padding: 3rem 0 1.5rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 1.1rem;
}

.footer-col p { font-size: .95rem; margin-bottom: .9rem; }
.footer-col p:last-child { margin-bottom: 0; }

.footer-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
.footer-logo .logo-mark { height: 38px; }
.footer-logo .logo-text { font-size: 1rem; }

.footer-brand > p { max-width: 34ch; }

.footer-phone {
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--copper);
  padding-bottom: .1em;
  transition: color var(--dauer-kurz) var(--weich);
  -webkit-tap-highlight-color: transparent;
}
.footer-phone:active { color: var(--copper-light); }

@media (hover: hover) and (pointer: fine) {
  .footer-phone:hover { color: var(--copper-light); }
}

.footer-hours { line-height: 1.9; }

.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* großzügige Trefferfläche um die kleinen Icons */
  min-width: 44px;
  min-height: 44px;
  color: var(--text-on-dark-muted);
  transition: color var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.footer-social a:active {
  color: var(--copper-light);
  transform: scale(.9);
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover { color: var(--copper-light); }
}

/* Fester Aktionsbalken (nur Handy) */

.mobile-bar { display: none; }

.mobile-bar-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 1em .5em;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
/* Der Balken sitzt am Bildschirmrand – hier zählt eine deutliche
   Rückmeldung besonders, weil er blind mit dem Daumen getroffen wird */
.mobile-bar-btn:active {
  filter: brightness(1.18);
  transform: scale(.97);
  transition: none;
}

.mobile-bar-call { background: var(--copper); color: var(--white); }
.mobile-bar-route { background: var(--dark-soft); color: var(--text-on-dark); }

/* ─────────── Auswahl der Karten-App (nur Apple-Geräte) ─────────── */

.routenwahl {
  /* Der globale Reset setzt margin auf 0 und nimmt dem Dialog damit die
     automatische Zentrierung des Browsers – hier wieder herstellen. */
  margin: auto;
  width: min(320px, calc(100vw - 2.5rem));
  padding: 1.6rem 1.4rem 1.2rem;
  border: 1px solid rgba(184, 119, 66, .35);
  border-radius: 14px;
  background: var(--dark);
  color: var(--text-on-dark);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.routenwahl::backdrop {
  background: rgba(10, 10, 9, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.routenwahl h2 {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  text-align: center;
  color: var(--white);
}

.routenwahl-knoepfe {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.routenwahl button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  min-height: 52px;
  padding: .9em 1.2em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-on-dark);
  background: var(--dark-soft);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dauer-kurz) var(--weich), border-color var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.routenwahl button svg { color: var(--copper-light); flex-shrink: 0; }

.routenwahl button:active {
  transform: scale(.97);
  border-color: var(--copper);
  transition: none;
}

.routenwahl-abbruch {
  margin-top: .9rem;
  min-height: 44px !important;
  font-size: .92rem !important;
  color: var(--text-on-dark-muted) !important;
  background: none !important;
  border: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .routenwahl button:hover {
    background: #2e2e2b;
    border-color: var(--copper);
  }
  .routenwahl-abbruch:hover {
    background: none !important;
    color: var(--text-on-dark) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .routenwahl button:active { transform: none; }
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.footer-legal { display: flex; gap: 1.5rem; }

/* Am Handy brauchen Fingerziele Hoehe: 44 Punkte sind die Empfehlung,
   mit .25em Innenabstand kamen die Verweise nur auf 33. Am Rechner mit
   Maus zaehlt das nicht, dort bliebe der Fussbereich sonst zu luftig. */
@media (pointer: coarse) {
  .footer-nav { gap: 0; }
  .footer-nav a, .footer-legal a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.footer-nav a, .footer-legal a {
  display: inline-block;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: .95rem;
  padding: .25em 0;
  transition: color var(--dauer-kurz) var(--weich), transform var(--dauer-mittel) var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.footer-nav a:active, .footer-legal a:active {
  color: var(--copper-light);
  transform: scale(.96);
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover, .footer-legal a:hover { color: var(--copper-light); }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  font-size: .85rem;
}
.footer-bottom p { margin: 0; }

/* ─────────── Scroll-Reveal ─────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dauer-lang) var(--weich), transform var(--dauer-lang) var(--aus);
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll { animation: none; }

  /* Rückmeldung beim Drücken bleibt erhalten, aber ohne Bewegung –
     nur die Abdunklung zeigt an, dass die Berührung angekommen ist */
  .btn:active,
  .btn:hover,
  .logo:active,
  .nav-toggle:active,
  .main-nav a:active,
  .main-nav a.nav-cta:active,
  .hero-rating:active,
  .contact-link:active,
  .social-btn:active,
  .social-btn:hover,
  .footer-social a:active,
  .footer-nav a:active,
  .footer-legal a:active,
  .mobile-bar-btn:active,
  .gallery figure:active img,
  .gallery figure:hover img,
  .btn-arrow:hover svg,
  .btn-arrow:active svg,
  .btn-arrow-links:hover svg,
  .btn-arrow-links:active svg {
    transform: none;
  }
}

/* ─────────── Responsive ─────────── */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split-media { margin-top: 1rem; }
  .split-media-small { right: 0; }

  .price-grid { grid-template-columns: 1fr; gap: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .usp-inner { grid-template-columns: 1fr; gap: 1rem; }

  /* Marke oben über die volle Breite, Kontakt und Seiten darunter nebeneinander */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* Vollbild-Menü mit weichem Milchglas-Hintergrund */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 5.5rem 6% 3rem;
    background: rgba(19, 19, 17, .8);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity var(--dauer-mittel) var(--weich), visibility var(--dauer-mittel) var(--weich);
  }
  .main-nav.open { opacity: 1; visibility: visible; }

  .main-nav a {
    font-size: 1.3rem;
    font-weight: 400;
    border-bottom: 0;
    padding: .15em 0;
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.4rem;
  }
  .nav-logo .logo-mark { height: 52px; }
  .nav-logo .logo-text { font-size: 1.2rem; }

  /* .main-nav a ist spezifischer als .nav-cta – daher hier mitschreiben,
     sonst überschreibt die Link-Regel Innenabstand und Farbe des Buttons */
  .main-nav a.nav-cta {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 1.4rem;
    font-size: 1rem;
    font-weight: 500;
    padding: .95em 2.4em;
    border-radius: 999px;
    color: var(--white);
    background: var(--copper);
  }
  /* .main-nav a:active setzt sonst nur die Textfarbe – hier die
     Button-Rückmeldung mit passender Spezifität nachziehen */
  .main-nav a.nav-cta:active {
    background: var(--copper-light);
    color: var(--white);
    transform: scale(.96);
    opacity: .85;
    transition: none;
  }

  /* Menüpunkte behalten ihre Höhe, auch wenn der Platz knapp wird */
  .main-nav a { flex-shrink: 0; }

  /* Beim geöffneten Menü bleibt nur das X im Header stehen */
  body.nav-open .site-header {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
  }
  body.nav-open .logo,
  body.nav-open .header-phone {
    opacity: 0;
    pointer-events: none;
  }
  body.nav-open { overflow: hidden; }

  .nav-toggle { display: flex; position: relative; z-index: 210; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobil: Anruf-Button und Menü rechts oben, Anruf nur als Icon */
  .header-inner { gap: .7rem; }
  .header-phone { padding: .6em .75em; margin-left: auto; }
  .header-phone-num { display: none; }

  .price-name { white-space: normal; }

  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Fester Aktionsbalken unten einblenden */
  .mobile-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .28);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Platz schaffen, damit der Balken nichts überdeckt */
  .site-footer { padding-bottom: 5.5rem; }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   Grosse Bildschirme
   ═══════════════════════════════════════════════
   Ab etwa 1500 Punkten Breite wirkte die Seite zu klein: Der Inhalt hoerte
   bei 1140 Punkten auf, die Schrift blieb bei ihren Obergrenzen stehen, und
   drumherum stand nur noch Leerraum.

   Angehoben wird die Grundgroesse, nicht jede Groesse einzeln. Fast alle
   Werte stehen in rem - auch die Obergrenzen der clamp-Ausdruecke -, also
   waechst die ganze Staffelung im selben Verhaeltnis mit und nichts faellt
   aus der Reihe. Nachgemessen bleiben es dabei 65 bis 67 Zeichen je Zeile,
   also weiter im gut lesbaren Bereich. */

@media (min-width: 1500px) {
  html { font-size: 17.5px; }
  .container { width: min(1280px, 92%); }
  /* Der Hero ist kein Fliesstext und darf breiter laufen als die
     Abschnitte, in denen wirklich gelesen wird. */
  .hero .container { width: min(1420px, 92%); }
}

@media (min-width: 1850px) {
  html { font-size: 18.5px; }
  .container { width: min(1360px, 92%); }
  .hero .container { width: min(1560px, 92%); }
}

/* ─────────── Hero und "Über uns" fuellen den ersten Blick ───────────
   Der Kopfbereich steht auf sticky und zaehlt damit in der Hoehe mit. Wird
   er abgezogen, endet der Abschnitt genau an der Fensterunterkante und der
   naechste draengt sich nicht mit hinein.

   4.4375rem ist die Hoehe des Kopfbereichs: 71 Punkte bei der Grundschrift
   von 16. Bewusst in rem und nicht in px, weil die Innenabstaende des Kopfes
   ebenfalls in rem stehen - auf grossen Bildschirmen waechst er mit auf 78
   bzw. 82 Punkte, und die Rechnung bleibt dadurch genau.

   Bewusst auch nicht die von main.js gemessene Variable: Die steht erst nach
   dem Laden bereit, was ein sichtbares Nachrucken ergaebe. Zwischen 780 und
   1024 Punkten Breite waechst der Kopf auf 97 Punkte - dann ist der Abschnitt
   etwas zu hoch, was lediglich heisst, dass der naechste knapp unter der
   Kante beginnt. Das ist die unschaedliche Richtung. */
@media (min-width: 761px) {
  .hero { min-height: calc(100vh - 4.4375rem); }

  /* min-height statt height: Ist der Inhalt einmal hoeher als das Fenster,
     waechst der Abschnitt mit, statt abzuschneiden. align-content zentriert
     die eine Zeile senkrecht; die .container darin behaelt ihre Breite und
     bleibt waagerecht mittig. */
  #ueber-uns {
    min-height: calc(100vh - 4.4375rem);
    display: grid;
    align-content: center;
    /* Weniger Polsterung als die uebrigen Abschnitte: Die Mindesthoehe
       sorgt hier schon fuer Luft, und der Inhalt sitzt mittig. Mit der
       vollen Polsterung wuchs der Abschnitt ueber eine Bildschirmhoehe
       hinaus, sobald der Text laenger wurde. */
    padding-block: clamp(2rem, 3.5vw, 3rem);
  }
}

/* ─────────── Video in der Galerie ───────────
   Verhaelt sich wie eine Bildkachel. Das Video traegt im Verweis ein
   "#t=1": dadurch zeigt der Browser das Bild von Sekunde eins an, noch
   bevor etwas abgespielt wird - ein eigenes Vorschaubild erspart das. */

.galerie-video { position: relative; overflow: hidden; }

.galerie-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dark);
}

/* Kleines Zeichen, damit erkennbar ist, dass sich hier etwas bewegt.
   Verschwindet, sobald das Video laeuft. */
.galerie-video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background:
    linear-gradient(transparent, transparent),
    rgba(19, 19, 17, .55);
  backdrop-filter: blur(3px);
  border: 1.5px solid rgba(255, 255, 255, .55);
  /* Dreieck als Rand gezeichnet, spart ein zusaetzliches Bild */
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  transition: opacity var(--dauer-mittel) var(--weich);
  pointer-events: none;
}
.galerie-video::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -9px 0 0 -5px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
  transition: opacity var(--dauer-mittel) var(--weich);
  pointer-events: none;
}
.galerie-video.laeuft::after,
.galerie-video.laeuft::before { opacity: 0; }


/* ═══════════════════════════════════════════════
   Feinheiten der Bewegung
   ═══════════════════════════════════════════════ */

/* Gestaffeltes Einblenden: Die Kacheln einer Galerie erscheinen nicht alle
   im selben Augenblick, sondern kurz nacheinander. Der Versatz ist winzig -
   bewusst gerade so viel, dass man ihn spuert und nicht sieht. Erscheinen
   alle gleichzeitig, wirkt es wie ein Schalter; nacheinander wirkt es, als
   lege jemand die Bilder hin. */
/* Der Rahmen blendet nur auf, ohne selbst zu wandern - sonst bewegte sich
   alles doppelt: einmal als Block und einmal je Kachel. */
.gallery.reveal { transform: none; }
.gallery.visible figure { animation: kachelEin var(--dauer-lang) var(--aus) backwards; }
.gallery.visible figure:nth-child(1) { animation-delay: 0ms; }
.gallery.visible figure:nth-child(2) { animation-delay: 60ms; }
.gallery.visible figure:nth-child(3) { animation-delay: 120ms; }
.gallery.visible figure:nth-child(4) { animation-delay: 180ms; }
.gallery.visible figure:nth-child(5) { animation-delay: 240ms; }
.gallery.visible figure:nth-child(6) { animation-delay: 300ms; }
.gallery.visible figure:nth-child(n+7) { animation-delay: 360ms; }

@keyframes kachelEin {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Druck auf eine Flaeche: Der Weg hinein ist sofort - ein Finger erwartet
   unmittelbare Antwort. Der Weg zurueck darf sich Zeit lassen, das liest
   sich als Nachgeben statt als Zurueckschnappen. Deshalb steht die Dauer
   im Grundzustand und nicht in :active. */
.btn, .wahl-karte, .tag-karte, .zeit-knopf, .social-btn, .mobile-bar-btn {
  transition-property: background, border-color, color, box-shadow, transform;
  transition-duration: var(--dauer-mittel);
  transition-timing-function: var(--aus);
}
.btn:active, .social-btn:active, .mobile-bar-btn:active { transition-duration: 0s; }

@media (prefers-reduced-motion: reduce) {
  .gallery.visible figure { animation: none; }
}



/* ─────────── Presse-Hinweis im Fussbereich ───────────
   Steht ueber der Rechtszeile und damit am Ende, ohne sich
   vorzudraengen. Der Artikel wird nur verlinkt - er selbst und sein
   Foto gehoeren dem Verlag. */
.footer-presse {
  padding-top: 1.6rem;
  margin-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .88rem;
  color: var(--text-on-dark-muted);
  text-align: center;
}
.footer-presse a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 119, 66, .55);
}
.presse-quelle {
  display: inline-block;
  margin-left: .5em;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--copper);
}
@media (hover: hover) and (pointer: fine) {
  .footer-presse a:hover {
    color: var(--copper-light);
    text-decoration-color: var(--copper-light);
  }
}
.footer-presse a:active { opacity: .65; transition-duration: 0s; }

@media (max-width: 560px) {
  .presse-quelle { display: block; margin: .3rem 0 0; }
}