/* ============================================================
   STUDIO OBHOLZ — Foto- & Videografie
   Helles, warmes Design mit Gold-Akzenten & lebendigen Effekten
   ============================================================ */

:root {
  --bg: #faf8f4;
  --bg-soft: #f3eee5;
  --bg-card: #ffffff;
  --ink: #211d18;
  --ink-soft: #5c554b;
  --gold: #b3893f;
  --gold-light: #d4b47a;
  --gold-pale: #f0e6d2;
  --red: #c22026;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', sans-serif;
  --shadow: 0 20px 60px -18px rgba(60, 45, 20, .22);
  --radius: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

/* Hier darf KEIN overflow stehen. Der Darstellungsbereich uebernimmt seinen
   overflow vom html-Element; nur wenn der dort "visible" ist, wird der Wert
   vom body weitergereicht. Sobald html einen eigenen Wert bekommt, greift
   "body { overflow: hidden }" nicht mehr auf den Darstellungsbereich durch –
   und genau damit sperren Menue und Lightbox das Scrollen im Hintergrund.
   Ein Versuch mit "overflow-x: clip" hat genau das kaputtgemacht. */
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto ist Pflicht, sobald die Bilder width/height-Attribute tragen –
   sonst wird die feste Hoehe gegen die skalierte Breite gerechnet und das Bild
   verzerrt. Spezifischere Regeln (.hero-bg img, .card img) ueberschreiben das. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--gold); color: #fff; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  transition: opacity .7s var(--ease), visibility .7s;
  /* Notbremse: blendet sich auch ohne JavaScript selbst aus, damit die
     Seite nie dauerhaft hinter dem Overlay verschwindet. */
  animation: preloaderFailsafe .7s var(--ease) 4s forwards;
}
.preloader.done {
  animation: none;
  opacity: 0; visibility: hidden; pointer-events: none;
}
@keyframes preloaderFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
html.noanim .preloader { display: none; }
.preloader img { width: 74px; animation: apertureSpin 2.4s var(--ease) infinite; }
.preloader span {
  font-family: var(--serif); font-size: 20px; letter-spacing: .35em;
  text-transform: uppercase; color: var(--ink-soft);
}
@keyframes apertureSpin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background .45s, box-shadow .45s, padding .45s;
  padding: 22px 0;
}
.nav.scrolled {
  background: rgba(250, 248, 244, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 30px rgba(60, 45, 20, .08);
  padding: 12px 0;
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 44px; transition: transform .6s var(--ease); }
.brand:hover img { transform: rotate(120deg); }
.brand-name {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.1;
}
.brand-name small {
  display: block; font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: .42em; color: var(--gold); text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 14px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  position: relative; padding: 4px 0; color: var(--ink);
  transition: color .35s;
}
/* Über dem dunklen Hero-Bild: helle Navigation (nicht auf Seiten mit .solid) */
.nav:not(.scrolled):not(.solid) .nav-links a,
.nav:not(.scrolled):not(.solid) .brand-name { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.nav:not(.scrolled):not(.solid) .nav-links a.active,
.nav:not(.scrolled):not(.solid) .brand-name small { color: var(--gold-light); }
.nav:not(.scrolled):not(.solid) .nav-cta { border-color: rgba(255,255,255,.7); }
.nav:not(.scrolled):not(.solid) .burger span { background: #fff; }
.nav:not(.scrolled).open-menu .burger span { background: var(--ink); }
/* Bei offenem Menue liegt heller Grund hinter der Leiste – die weisse
   Wortmarke war darauf unsichtbar. Das Kreuz war schon dunkel gestellt,
   die Schrift bisher nicht. */
.nav:not(.scrolled).open-menu .brand-name { color: var(--ink); text-shadow: none; }
.nav:not(.scrolled).open-menu .brand-name small { color: var(--gold); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--gold); transition: width .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--gold); }
.nav-cta {
  border: 1px solid var(--gold); padding: 10px 24px !important; border-radius: 40px;
  transition: background .35s, color .35s;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold); color: #fff !important; }

.burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 34px; height: 26px; position: relative; z-index: 1001;
}
.burger span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  transition: all .4s var(--ease);
}
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 12px; }
.burger span:nth-child(3) { top: 22px; width: 60%; }
.burger.open span:nth-child(1) { top: 12px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 12px; width: 100%; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 950; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--serif); font-size: clamp(30px, 7vw, 44px); font-weight: 500;
  padding: 6px 0; opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-menu.open a { opacity: 1; transform: none; }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--gold); }
.mobile-menu.open a:nth-child(1) { transition-delay: .08s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .14s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .20s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .26s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .32s; }
.mobile-menu.open a:nth-child(6) { transition-delay: .38s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 36px; border-radius: 50px; cursor: pointer;
  border: 1px solid var(--gold); position: relative; overflow: hidden;
  transition: color .4s var(--ease), transform .3s var(--ease), box-shadow .4s;
  z-index: 1;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--gold), var(--gold-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn-solid { color: #fff; }
.btn-solid::before { transform: scaleX(1); }
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(179, 137, 63, .55); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { color: #fff; }
.btn-ghost:hover::before { transform: scaleX(1); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(6px); }

/* ---------- Layout helpers ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
section { position: relative; }
.section-pad { padding: 110px 0; }
.bg-soft { background: var(--bg-soft); }

.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.kicker::before { content: ''; width: 46px; height: 1px; background: var(--gold); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; }
h2 { font-size: clamp(34px, 4.6vw, 56px); margin-bottom: 24px; }
h3 { font-size: 26px; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 720px; }
.center { text-align: center; }
.center .kicker::before { display: none; }
.center .lead { margin: 0 auto; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  position: relative; overflow: hidden; color: #fff;
}
.hero-sub.small { min-height: 72svh; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 16s var(--ease) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-1.5%, 1.5%); }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  /* Die Schrift steht links. Auf hellen Aufnahmen (weisse Bruecke bei
     Hochzeit, Wiese bei Familie, heller Messestand bei Business) war sie
     kaum zu lesen. Der linke Verlauf ist deshalb dichter und reicht
     weiter nach rechts; ueber der ganzen Flaeche liegt zusaetzlich ein
     schwacher Schleier, der die hellsten Stellen daempft.
     Oben liegt zusaetzlich ein dunkles Band ueber den ersten 130 px: dort
     steht die feste Kopfleiste in Weiss, und auf dem Stuck des Kontakt-
     Kopfbildes war sie kaum noch zu erkennen. Das Band faellt bis 130 px
     wieder auf den alten Wert ab, die Ueberschrift darunter bleibt also
     unveraendert. */
  background:
    linear-gradient(105deg, rgba(20, 15, 8, .68) 0%, rgba(20, 15, 8, .38) 45%, rgba(20, 15, 8, .06) 78%, transparent 92%),
    linear-gradient(to bottom, rgba(20, 15, 8, .42) 0, rgba(20, 15, 8, 0) 130px),
    /* Nach unten ins Dunkle, nicht ins Creme. Der Verlauf endete bisher
       auf der Hintergrundfarbe der Seite; auf den dunklen Aufnahmen sah
       das untere Fuenftel dadurch aus wie Nebel - beim Kopfbild der
       Startseite verschwanden Kleid und Boden in einer milchigen Flaeche.
       Jetzt bleibt das Foto bis zur Unterkante stehen und trifft dort auf
       die helle Laufschrift; die Kante ist gewollt und liegt auf deren
       ohnehin vorhandener Trennlinie. */
    linear-gradient(to bottom, rgba(20, 15, 8, .5), rgba(20, 15, 8, .3) 45%, rgba(20, 15, 8, .96) 100%);
}
.hero-content { position: relative; z-index: 2; width: 100%; padding-block: 160px 120px; }
.hero .kicker { color: var(--gold-light); }
.hero .kicker::before { background: var(--gold-light); }
.hero h1 {
  font-size: clamp(44px, 7.4vw, 96px); max-width: 15ch;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .35);
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero .lead { color: rgba(255, 255, 255, .88); margin: 26px 0 40px; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* Wort-für-Wort Animation der Headline */
.split .w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .24em; margin-bottom: -.24em;
}
.split .w i {
  display: inline-block; font-style: inherit;
  transform: translateY(140%); opacity: 0;
  transition: transform 1s var(--ease), opacity .8s;
}
.split.go .w i { transform: none; opacity: 1; }
/* Nach Abschluss der Animation Maske entfernen, damit Unterlängen (g, j, y) nie beschnitten werden */
.split.done .w, html.noanim .split .w { overflow: visible; }

/* ---------- Marquee-Laufband ---------- */
.marquee {
  overflow: hidden; white-space: nowrap; padding: 26px 0;
  border-top: 1px solid var(--gold-pale); border-bottom: 1px solid var(--gold-pale);
  background: var(--bg);
}
.marquee-track { display: inline-block; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--serif); font-size: 30px; font-style: italic;
  color: var(--ink); margin: 0 28px;
}
.marquee b { color: var(--gold); font-weight: 400; margin-right: 56px; font-size: 22px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Reveal-Animationen ---------- */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
/* Der Einzug von der Seite ragt vor dem Einblenden 60 px ueber den
   Inhaltsbereich hinaus. Der Inhalt ist hoechstens 1240 px breit; erst ab
   rund 1360 px Bildschirmbreite bleiben links und rechts genug Luft dafuer.
   Darunter macht der Versatz das Dokument breiter als den Bildschirm –
   Chrome schneidet das zwar ab, mobile Browser lassen die Seite dann aber
   seitlich schieben. Deshalb dort von unten einblenden.
   Nicht am html-Element loesen: ein overflow dort kappt die Weitergabe von
   "body { overflow: hidden }" und damit die Scroll-Sperre von Menue und
   Lightbox. */
@media (max-width: 1360px) {
  .reveal-left, .reveal-right { transform: translateY(40px); }
}
.reveal-zoom { opacity: 0; transform: scale(.88); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-zoom.visible { opacity: 1; transform: none; }

/* ---------- Über uns / Split-Layout ---------- */
.split-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.frame { position: relative; }
.frame img { border-radius: var(--radius); box-shadow: var(--shadow); }
.frame::before {
  content: ''; position: absolute; inset: -22px 22px 22px -22px;
  border: 1.5px solid var(--gold-light); border-radius: var(--radius); z-index: -1;
  transition: transform .6s var(--ease);
}
.frame:hover::before { transform: translate(8px, 8px); }
.frame-badge {
  position: absolute; right: -24px; bottom: -24px;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow);
  padding: 20px 26px; text-align: center;
}
.frame-badge b {
  display: block; font-family: var(--sans); font-size: 36px; font-weight: 500; color: var(--gold); line-height: 1;
}
.frame-badge span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Zahlen / Counter ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin-top: 54px; text-align: center;
}
/* Ohne min-width: 0 waechst eine Rasterspalte auf die Breite ihres laengsten
   Wortes ("Foto-/Videobegleitung") und sprengt damit die ganze Seite.
   Getrennt wird mit hyphens statt mit overflow-wrap: letzteres schneidet
   irgendwo mitten im Wort ab ("FOTO-/VIDEOBEGLE | ITUNG"), hyphens trennt
   nach den Regeln der Sprache aus dem lang-Attribut. */
.stat { min-width: 0; }
.stat span { hyphens: auto; }
.stat b {
  display: block; font-family: var(--sans); font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 500; color: var(--gold); line-height: 1; letter-spacing: .02em;
}
.stat span { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Leistungs-Karten ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 64px; }
.card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4.1; display: block; box-shadow: 0 14px 40px -16px rgba(60, 45, 20, .25);
}
.card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter 1s;
}
.card:hover img { transform: scale(1.09); }
.card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25, 18, 8, .78) 0%, rgba(25, 18, 8, .12) 55%, transparent 100%);
  transition: background .5s;
}
.card:hover::after { background: linear-gradient(to top, rgba(140, 100, 35, .8) 0%, rgba(140, 100, 35, .18) 60%, transparent 100%); }
.card-label {
  position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; color: #fff;
  transition: transform .5s var(--ease);
}
.card:hover .card-label { transform: translateY(-8px); }
.card-label h3 { font-size: 28px; margin-bottom: 4px; }
.card-label p { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.card-label .go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light);
  opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s var(--ease);
}
.card:hover .go { opacity: 1; transform: none; }

/* ---------- Feature-Liste (Hochzeit Leistungen) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 60px; }
/* Abweichende Spaltenzahl einzelner Abschnitte. Bewusst als Klasse und nicht
   als style-Attribut im HTML: ein Inline-Stil schlaegt jede Medienabfrage,
   die Kacheln blieben dann auch auf dem Handy nebeneinander stehen. */
.features.spalten-2 { grid-template-columns: repeat(2, 1fr); }
.features.spalten-4 { grid-template-columns: repeat(4, 1fr); }
.feature {
  background: var(--bg-card); border-radius: var(--radius); padding: 40px 34px;
  border: 1px solid var(--gold-pale);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.feature:hover { transform: translateY(-10px); box-shadow: var(--shadow); border-color: var(--gold-light); }
.feature .num {
  font-family: var(--serif); font-size: 46px; font-style: italic; color: var(--gold-light);
  line-height: 1; display: block; margin-bottom: 18px;
}
.feature h3 { font-size: 21px; margin-bottom: 12px; letter-spacing: .04em; }
.feature p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Galerie ---------- */
.gallery { columns: 3; column-gap: 22px; margin-top: 60px; }
/* Sobald main.js die Bilder in Spalten verteilt hat (siehe dort), traegt
   die Galerie diese Klasse und wird zum Raster. Ohne JavaScript bleibt es
   bei den CSS-Spalten darueber. */
.gallery.gallery-verteilt {
  columns: auto; display: grid; gap: 22px;
  grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
  align-items: start;
}
.gallery-spalte { display: flex; flex-direction: column; gap: 22px; }
.gallery.gallery-verteilt a { margin-bottom: 0; }
/* Auf sehr breiten Bildschirmen wirkten die Aufnahmen wie Briefmarken: der
   Inhalt endet bei 1240 px, auf 2560 blieb links und rechts mehr Rand als
   Bild. Die Galerie - und nur sie - tritt deshalb aus dem Textmass heraus.
   Der Text bleibt schmal, sonst werden die Zeilen unlesbar lang. */
@media (min-width: 1600px) {
  .gallery {
    width: min(1760px, calc(100vw - 120px));
    margin-left: 50%; transform: translateX(-50%);
    column-gap: 26px;
  }
}
.gallery a {
  display: block; margin-bottom: 22px; border-radius: 14px; overflow: hidden;
  position: relative; cursor: zoom-in;
  /* Ohne das darf der Browser ein Bild zwischen zwei Spalten aufteilen –
     dann steht der Kopf in der einen und der Rest in der naechsten. Bei
     fuenf Bildern fiel das nie auf, die Familien-Galerie hat 23. */
  break-inside: avoid;
}
.gallery a img { transition: transform .9s var(--ease); }
.gallery a::after {
  content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 54px; font-weight: 300; color: #fff;
  background: rgba(140, 100, 35, .38); opacity: 0; transition: opacity .5s;
}
.gallery a:hover::after { opacity: 1; }
.gallery a:hover img { transform: scale(1.07); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(18, 14, 8, .94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 92vw; max-height: 88vh; border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  animation: lbIn .5s var(--ease);
}
@keyframes lbIn { from { transform: scale(.92); opacity: 0; } }
.lightbox button {
  position: absolute; background: none; border: none; color: #fff; cursor: pointer;
  font-size: 44px; line-height: 1; padding: 18px; opacity: .75; transition: opacity .3s, transform .3s;
  font-family: var(--serif);
}
.lightbox button:hover { opacity: 1; transform: scale(1.15); }
.lb-close { top: 18px; right: 24px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.15); }
.lb-next:hover { transform: translateY(-50%) scale(1.15); }

/* ---------- Testimonials ---------- */
.testi-wrap { max-width: 940px; margin: 60px auto 0; position: relative; }
.testi-quote-mark {
  font-family: var(--serif); font-size: 130px; line-height: .4; color: var(--gold-light);
  display: block; margin-bottom: 30px; text-align: center;
}
.testi-slide { display: none; animation: testiIn .8s var(--ease); }
/* Foto und Zitat nebeneinander; ohne Foto nimmt das Zitat die volle Breite. */
.testi-slide.active {
  display: grid; grid-template-columns: auto 1fr; gap: 46px; align-items: center;
}
@keyframes testiIn { from { opacity: 0; transform: translateY(26px); } }

.testi-photo { margin: 0; flex: none; }
.testi-photo img {
  width: 300px; height: 300px; border-radius: 20px; object-fit: cover;
  box-shadow: var(--shadow);
}

.testi-slide blockquote { margin: 0; }
.testi-slide p {
  font-family: var(--serif); font-size: clamp(19px, 2.2vw, 25px); font-style: italic;
  line-height: 1.55; color: var(--ink);
}
.testi-slide cite {
  display: block; margin-top: 26px; font-family: var(--sans); font-style: normal;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.testi-slide cite span {
  display: block; margin-top: 6px; letter-spacing: .18em;
  font-size: 11.5px; color: var(--ink-soft);
}
/* Blaettern von Hand: Pfeil, Punkte, Pfeil in einer Zeile. */
.testi-nav {
  display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px;
}
.testi-dots { display: flex; justify-content: center; gap: 0; }
/* Der Punkt bleibt optisch 10 px klein, der Knopf darum herum ist 26 px
   gross – sonst ist er mit dem Finger kaum zu treffen. */
.testi-dots button {
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center;
}
.testi-dots button::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--gold); background: transparent;
  transition: background .35s, transform .35s;
}
.testi-dots button.active::before { background: var(--gold); transform: scale(1.35); }
.testi-dots button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 0; border-radius: 50%; }
.testi-arrow {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--gold-light); background: transparent;
  color: var(--gold); cursor: pointer;
  font-family: var(--serif); font-size: 30px; line-height: 1;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
/* Das Zeichen sitzt in der Schrift zu tief – ein Hauch nach oben ruecken. */
.testi-arrow span { display: block; margin-top: -4px; }
.testi-arrow:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.testi-arrow:active { transform: scale(.94); }
.testi-arrow:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------- Videos ---------- */
/* Feste zwei Spalten liessen bei drei Videos (Business) eine halbe Reihe
   leer. auto-fit richtet sich nach der Anzahl und der Breite. */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; margin-top: 60px; }
.video-embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: #14100a;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Steht nur ein Video im Raster, zieht auto-fit es auf die volle
   Containerbreite von 1184 px. Das Vorschaubild misst 960 px und
   wuerde dabei aufgezogen - deshalb hier gedeckelt und mittig. */
.video-grid.einzeln { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }

/* Klick-zum-Laden: vor der Einwilligung wird nichts von Vimeo geladen. */
.video-consent {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: #14100a; cursor: pointer;
  display: block; text-align: left; color: #fff; font-family: var(--sans);
}
.video-consent img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .58; transition: opacity .5s var(--ease), transform 1s var(--ease);
}
.video-consent:hover img, .video-consent:focus-visible img { opacity: .78; transform: scale(1.04); }
.video-consent-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .4s, border-color .4s, transform .4s var(--ease);
}
.video-consent-play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.video-consent:hover .video-consent-play, .video-consent:focus-visible .video-consent-play {
  background: var(--gold); border-color: var(--gold); transform: translate(-50%, -50%) scale(1.08);
}
.video-consent-text { position: absolute; left: 22px; right: 22px; bottom: 20px; }
/* In die Vorschaubilder sind teils eigene Titel einbelichtet, und helle
   Kader verschlucken weisse Schrift. Ein Verlauf am unteren Rand traegt
   die Beschriftung, ohne das Bild zuzudecken. */
.video-consent::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(15, 11, 5, .82), rgba(15, 11, 5, .45) 45%, transparent);
  pointer-events: none;
}
.video-consent-text, .video-consent-play { z-index: 1; }
.video-consent-text b {
  display: block; font-size: 15px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.video-consent-text small {
  display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.video-consent:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.video-note {
  grid-column: 1 / -1; margin-top: 18px;
  font-size: 12.5px; color: var(--ink-soft); text-align: center;
}
.video-note a { color: var(--gold); text-decoration: underline; }

/* ---------- CTA-Banner ---------- */
.cta-banner {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: 130px 28px;
}
.cta-banner .hero-bg::after {
  background: linear-gradient(rgba(30, 22, 10, .68), rgba(30, 22, 10, .68));
}
.cta-banner h2 { font-size: clamp(34px, 5vw, 60px); position: relative; z-index: 2; }
.cta-banner p { position: relative; z-index: 2; color: rgba(255,255,255,.85); max-width: 640px; margin: 18px auto 40px; font-size: 17px; }
.cta-banner .btn { position: relative; z-index: 2; }
/* Das flache Banner (rund 4:1) schneidet Nahaufnahmen so eng an, dass das
   Motiv nicht mehr zu erkennen ist. .hoch gibt ihm mehr Hoehe, damit vom
   Foto mehr sichtbar bleibt – nur dort einsetzen, wo das Motiv es braucht.
   Auf schmalen Bildschirmen ist das Banner ohnehin hoeher als breit, dort
   bleibt es beim normalen Abstand. */
.cta-banner.hoch { padding-block: 190px; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; margin-top: 60px; }
.contact-info li {
  display: flex; gap: 20px; align-items: flex-start; margin-bottom: 30px;
}
.contact-info .ico {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: var(--gold-pale); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease), background .4s, color .4s;
}
.contact-info li:hover .ico { transform: rotate(-10deg) scale(1.1); background: var(--gold); color: #fff; }
.contact-info b { display: block; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; margin-bottom: 3px; }
.contact-info span { color: var(--ink-soft); }
/* Rufnummer und Adresse SIND Verknuepfungen, sahen aber aus wie Fliesstext.
   Auf dem Telefon erwartet man, dass die Nummer waehlt. */
.contact-info a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.contact-info a:hover { color: var(--ink); }
.contact-info a { color: var(--ink-soft); transition: color .3s; }
.contact-info li a:hover { color: var(--gold); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.form input, .form textarea {
  width: 100%; background: var(--bg-card); border: 1px solid var(--gold-pale);
  border-radius: 12px; padding: 15px 18px; font-family: var(--sans); font-size: 15px; color: var(--ink);
  transition: border-color .35s, box-shadow .35s; resize: vertical;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(179, 137, 63, .13);
}
/* Auswahlfeld wie die uebrigen Felder, nur mit eigenem Pfeil. */
.form select {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--gold-pale); border-radius: 12px; padding: 15px 42px 15px 18px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b3893f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px;
}
/* Beschriftungen standen zu blass ueber den Feldern. */
.form label { color: var(--ink); }
.form label .freiwillig { color: var(--ink-soft); letter-spacing: normal; text-transform: none; font-size: 12px; }
.form-note { font-size: 12.5px; color: var(--ink-soft); }
.form-note a, .consent a { color: var(--gold); text-decoration: underline; }

/* Honeypot – vor Menschen verborgen, aber nicht via display:none, damit
   Bots das Feld weiterhin finden und ausfuellen. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.consent { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.consent input {
  /* 20 px war mit dem Finger kaum zu treffen. Pseudoelemente helfen hier
     nicht: ein Kontrollkaestchen ist ein ersetztes Element und zeichnet
     ::before nicht. Also das Kaestchen selbst groesser. Die Beschriftung
     daneben schaltet ohnehin mit (label for=…). */
  width: 26px; height: 26px; flex: none; margin-top: 0; accent-color: var(--gold);
  accent-color: var(--gold); cursor: pointer;
}
/* flex: 1 1 0 ist hier entscheidend: ohne eine Basis von 0 waere die
   hypothetische Breite des Labels seine max-content-Breite. Die passt nicht
   neben die Checkbox, also wuerde das Label in eine eigene Zeile umbrechen,
   statt sich zu verkleinern. */
.consent label {
  flex: 1 1 0; min-width: 12rem;
  font-size: 13.5px; line-height: 1.6; letter-spacing: 0;
  text-transform: none; color: var(--ink-soft); margin: 0; cursor: pointer;
}

.form input:user-invalid, .form textarea:user-invalid { border-color: var(--red); }
.form .field-error { display: block; width: 100%; margin-top: 6px; font-size: 12.5px; color: var(--red); }

.form-status {
  margin-top: 4px; padding: 16px 20px; border-radius: 12px; font-size: 15px;
}
.form-status.ok { background: var(--gold-pale); border-left: 3px solid var(--gold); }
.form-status.err { background: #fbeaea; border-left: 3px solid var(--red); color: #7d1418; }
.form-fallback { padding: 16px 20px; border-radius: 12px; background: #fbeaea; border-left: 3px solid var(--red); color: #7d1418; }
.form-fallback p { margin: 0; }
.form-fallback p + p { margin-top: 8px; }
.form-fallback a { color: inherit; font-weight: 500; }

/* ---------- Referenz-Liste (Business) ---------- */
.ref-list { margin-top: 40px; }
/* Vorher flex mit space-between: die mittlere Spalte begann je nach Laenge
   des Namens woanders, die drei Zeilen liefen unterschiedlich weit an.
   Feste Spalten stellen sie untereinander. */
/* Die Spalten waren mit fr-Anteilen ueber die volle Containerbreite
   verteilt. Bei kurzen Eintraegen ("Zahnmedizin") blieben dadurch bis zu
   250 px Leerraum hinter dem Text stehen, bevor die naechste Spalte
   begann - die drei Teile einer Zeile lasen sich wie drei getrennte
   Listen. Jetzt richten sich die Spalten nach ihrem laengsten Inhalt und
   stehen beieinander; der Rest der Breite bleibt rechts frei. Die
   Trennlinie laeuft weiterhin ueber die volle Breite.
   Feste Maße statt max-content: bei max-content bemisst jede Zeile ihre
   Spalten selbst, dann beginnen Beschreibung und Verweis in jeder Zeile
   woanders und die Liste franst aus. */
.ref-list li {
  border-bottom: 1px solid var(--gold-pale); padding: 26px 8px;
  display: grid; grid-template-columns: 23em 15em auto;
  justify-content: start;
  align-items: center; gap: 40px;
  transition: background .35s, padding-left .35s;
}
@media (max-width: 1000px) {
  /* Zwischen 861 und 1000 px reicht die Breite fuer 23em nicht - dann
     liefe der Verweis aus der Zeile. */
  .ref-list li { grid-template-columns: 18em 13em auto; gap: 28px; }
}
@media (max-width: 860px) {
  .ref-list li { grid-template-columns: 1fr; gap: 6px; }
}
.ref-list li:hover { background: var(--gold-pale); padding-left: 22px; }
.ref-list b { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.ref-list a { color: var(--gold); font-size: 14px; letter-spacing: .12em; }
.ref-list a:hover { text-decoration: underline; }

/* ---------- Workshop Checkliste ---------- */
.check-list { margin-top: 30px; }
.check-list li {
  display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; font-size: 16.5px; color: var(--ink-soft);
}
.check-list li::before {
  content: '✦'; color: var(--gold); flex: none; margin-top: 2px;
}
.check-list a {
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}
.check-list a:hover { color: var(--ink); }

/* ---------- Footer ---------- */
footer { background: #1d1913; color: #c9c2b6; padding: 90px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; }
footer .brand-name { color: #fff; }
footer h4 {
  font-family: var(--sans); font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 22px; font-weight: 500;
}
footer li { margin-bottom: 12px; }
footer a { transition: color .3s, padding-left .3s; font-size: 15px; }
footer a:hover { color: var(--gold-light); padding-left: 6px; }
.footer-about { font-size: 15px; max-width: 320px; margin-top: 20px; }
.socials { display: flex; gap: 14px; margin-top: 26px; }
.socials a {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .35s, border-color .35s, transform .35s;
}
.socials a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-4px); padding-left: 0; }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom {
  margin-top: 70px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #8a8375;
}
.footer-bottom a:hover { padding-left: 0; }
/* Der Zum-Anfang-Knopf schwebt unten rechts und lag auf schmaleren
   Bildschirmen genau ueber der AGB-Verknuepfung – einer Pflichtangabe.
   Deshalb rechts Platz fuer ihn freihalten. */
@media (max-width: 1439px) {
  .footer-bottom { padding-right: 72px; }
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 800;
  width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gold); color: #fff; font-size: 20px;
  box-shadow: 0 12px 28px -8px rgba(179, 137, 63, .6);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .4s, visibility .4s, transform .4s var(--ease), background .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); }

/* ---------- Handlungsleiste am unteren Rand (nur Handy) ----------
   Auf dem Telefon steht in der Kopfleiste nur Zeichen und Menueknopf; die
   Schaltflaeche "Kontakt" der Bildschirmfassung fehlt dort. Diese Leiste
   haelt Anrufen und Anfragen dauerhaft in Daumenreichweite. */
.aktionsleiste { display: none; }
@media (max-width: 860px) {
  .aktionsleiste {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: rgba(250, 248, 244, .96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -6px 26px rgba(60, 45, 20, .12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .aktionsleiste a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; font-family: var(--sans); font-size: 14px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
  }
  .aktionsleiste .ruf { color: var(--ink); border-right: 1px solid var(--gold-pale); }
  .aktionsleiste .anfrage { background: var(--gold); color: #fff; }
  .aktionsleiste svg { width: 17px; height: 17px; fill: currentColor; }
  /* Platz fuer die Leiste, damit sie nichts verdeckt */
  body { padding-bottom: 56px; }
  /* Der Zum-Anfang-Knopf wuerde auf der Leiste liegen und nimmt den Platz
     weg, an dem jetzt die Anfrage steht. */
  .to-top { display: none; }
  .footer-bottom { padding-right: 0; }
}

/* ---------- Legal pages ---------- */
/* Lange Adressen (…/legal/EU_data_transfer_addendum) und deutsche
   Bandwurmwoerter haben die Rechtsseiten auf dem Handy breiter gemacht als
   den Bildschirm. Sie duerfen jetzt umbrechen. */
.legal { max-width: 820px; margin: 0 auto; padding: 180px 28px 100px; }
/* Nur der Fliesstext darf hart umbrechen (lange Adressen). Ueberschriften
   nicht - dort entstanden Brueche mitten im Wort. */
.legal p, .legal li, .legal a { overflow-wrap: anywhere; }
.legal h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 40px; hyphens: auto; }
.legal h2 { font-size: 26px; margin: 44px 0 14px; }
.legal p { margin-bottom: 16px; color: var(--ink-soft); }
.legal .hint {
  background: var(--gold-pale); border-left: 3px solid var(--gold);
  padding: 18px 22px; border-radius: 0 12px 12px 0; color: var(--ink); font-size: 15px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .features, .features.spalten-2, .features.spalten-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .section-pad { padding: 80px 0; }
  .split-grid { grid-template-columns: 1fr; gap: 50px; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .video-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .frame-badge { right: 10px; bottom: -20px; }
  /* Foto ueber das Zitat stellen und mittig ausrichten */
  .testi-slide.active { grid-template-columns: 1fr; gap: 26px; justify-items: center; text-align: center; }
  .testi-photo img { width: 150px; height: 150px; border-radius: 16px; }
  .cta-banner.hoch { padding-block: 130px; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .features, .features.spalten-2, .features.spalten-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 26px; }
  .gallery { columns: 1; }
  /* Auf dem Handy ist die Video-Kachel nur rund 180 px hoch; der mittige
     Abspielknopf lief dort in die Beschriftung am unteren Rand hinein. */
  .video-consent-play { width: 54px; height: 54px; top: 38%; }
  .video-consent-text { left: 14px; right: 14px; bottom: 12px; }
  .form { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(38px, 11vw, 52px); }
}

/* Fallback ohne Animationen (?noanim) */
html.noanim .reveal, html.noanim .reveal-left, html.noanim .reveal-right, html.noanim .reveal-zoom { opacity: 1 !important; transform: none !important; }
html.noanim .split .w i { transform: none !important; opacity: 1 !important; }
html.noanim .testi-slide:first-of-type { display: grid; }
html.noanim .testi-slide { animation: none; }
html.noanim .hero-bg img { animation: none; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}


/* ---------- Nachbesserungen aus der Durchsicht ---------- */

/* Wortmarke brach unter 380 px auf zwei Zeilen um und machte die
   Kopfleiste hoeher. Der Zusatz tritt dort zurueck. */
@media (max-width: 380px) {
  .brand-name { font-size: 19px; letter-spacing: .08em; }
  .brand-name small { display: none; }
  .brand img { width: 38px; }
}

/* Der goldene Zierrahmen sitzt 22 px links ausserhalb des Bildes. Sobald
   die Spalte die volle Breite einnimmt, stand er fast auf der
   Bildschirmkante. */
@media (max-width: 860px) {
  .frame::before { inset: -14px 14px 14px -14px; }
}

/* Beide Spalten des zweispaltigen Abschnitts oben buendig - rechts stand
   der Block sonst hoeher als links (Workshop). */
.split-grid.oben { align-items: start; }

/* Mittlere Spalte der Referenzen linksbuendig: zentriert liefen die drei
   Zeilen unterschiedlich weit an und wirkten zufaellig. */
.ref-mitte { text-align: left; }

/* Zwei Absaetze desselben Abschnitts hatten unterschiedliche Maxbreite. */
.center .lead + p, .center p.lead { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Die 404-Seite ist kuerzer als der Bildschirm; die Fusszeile hing in der
   Mitte. Jetzt sitzt sie unten. */
body.kurz { min-height: 100svh; display: flex; flex-direction: column; }
body.kurz main { flex: 1 0 auto; }
body.kurz footer { flex: none; }

/* Rufnummer und E-Mail stehen in der Fusszeile und im Kontaktblock. Im
   Kontaktblock sind sie als Verknuepfung erkennbar, in der Fusszeile sahen
   dieselben Angaben wie gewoehnlicher Text aus. */
footer .footer-kontakt a, footer li a[href^="tel:"], footer li a[href^="mailto:"] {
  color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px;
}
footer li a[href^="tel:"]:hover, footer li a[href^="mailto:"]:hover { color: #fff; }

/* Verweise auf die Webseiten der Referenzkunden - gleiche Auszeichnung wie
   die uebrigen Verknuepfungen im Fliesstext. */
.ref-list a { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- Nachbesserungen aus der Abnahme ---------- */

/* Die Zahlenreihe stand in drei Spalten zu 148 px, die Beschriftungen sind
   aber 211 und 191 px breit - sie liefen uebereinander. Zwischen 860 und
   1360 px ist die Spalte am engsten (der Abschnitt ist dort zweispaltig),
   dort tritt die Schrift zurueck. */
/* Die Spalte der Zahlenreihe ist rund 184 px breit - bei jeder
   Bildschirmgroesse, denn der Abschnitt ist zweispaltig und der Inhalt auf
   1240 px begrenzt. Mit 13 px und .22em Sperrung war "Foto-/Videobegleitung"
   211 px breit und lief in die Nachbarspalte. Deshalb hier kleiner und enger
   gesetzt; erst wenn die Zahlen untereinander stehen (unter 560 px), ist
   wieder Platz fuer die weite Sperrung. */
.stat span { font-size: 11px; letter-spacing: .04em; }
@media (max-width: 560px) {
  .stat span { font-size: 13px; letter-spacing: .18em; }
}

/* Der Zum-Anfang-Knopf schwebt unten rechts. Solange der Inhalt fast die
   ganze Fensterbreite einnimmt, liegt er auf dem Text - beobachtet auf
   Kundenstimmen, Aufzaehlungen und der Einwilligung. Auf dem Handy ist er
   schon weg; hier faellt er bis 1360 px ebenfalls fort, ab da hat der
   Inhalt links und rechts genug Rand. */
@media (max-width: 1360px) {
  .to-top { display: none; }
  .footer-bottom { padding-right: 0; }
}

/* Die Fusszeile klappte unter 860 px auf eine Spalte - auf dem Tablet blieb
   die rechte Haelfte leer. Zwei Spalten nutzen die Breite. */
@media (min-width: 561px) and (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tippziele ----------
   Auf dem Telefon sind unter 44 px kaum sicher zu treffen. Gemessen wurden
   bei 360, 390 und 414 px: das Menuezeichen 34x26, die Punkte unter den
   Kundenstimmen 26x26, die Verweise der 404-Seite 28 px hoch. Die Flaeche
   waechst, das Aussehen bleibt. */
.burger { position: relative; }
.burger::after {
  /* unsichtbarer Rand um das Zeichen: 34+16=50 breit, 26+18=44 hoch */
  content: ''; position: absolute; inset: -9px -8px;
}
@media (max-width: 860px) {
  .testi-dots button { width: 44px; height: 44px; }
  .check-list a { display: inline-block; padding: 8px 0; }
}
.socials a { width: 44px; height: 44px; }
@media (max-width: 560px) {
  /* Der Wortmarken-Verweis war 38 px hoch. */
  .brand { min-height: 44px; }
}
@media (max-width: 860px) {
  /* Unterhalb 860 px steht die Referenzliste einspaltig, der Verweis war
     dort nur 24 px hoch. */
  .ref-list a { display: inline-block; padding: 10px 0; }
}
/* Die Breite allein sagt nichts darueber, womit bedient wird. Ein Tablet
   quer misst 1024 px und wird trotzdem mit dem Finger bedient. Deshalb
   dieselben Flaechen noch einmal fuer grobe Zeiger, unabhaengig von der
   Breite. Mit der Maus bleiben die Ziele klein - dort reicht das. */
@media (pointer: coarse) {
  .testi-dots button { width: 44px; height: 44px; }
  .check-list a, .ref-list a { display: inline-block; padding: 10px 0; }
}

/* ---------- Einwilligung fuer den Facebook-Pixel ---------- */
/* Erscheint unten und ueberdeckt nichts Wichtiges. Ueber der Aktionsleiste
   (z-index 900), aber unter Lichtkasten (2000) und Vorschalter (9999).
   Beide Schaltflaechen gleich gross und gleich auffaellig - eine
   hervorgehobene Zustimmung gilt als unwirksam. */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  padding: 22px clamp(20px, 5vw, 60px);
  background: rgba(250, 248, 244, .98);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -10px 40px rgba(60, 45, 20, .16);
  border-top: 1px solid var(--gold-pale);
  transform: translateY(102%);
  transition: transform .7s var(--ease);
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}
.einwilligung.sichtbar { transform: none; }
.einwilligung-text { flex: 1 1 460px; min-width: 0; }
.einwilligung-text strong {
  display: block; font-family: var(--serif); font-size: 21px;
  font-weight: 500; margin-bottom: 6px;
}
.einwilligung-text p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.einwilligung-text a { color: var(--gold); text-decoration: underline; }
.einwilligung-knoepfe { display: flex; gap: 14px; flex: 0 0 auto; }
/* Beide Schaltflaechen bekommen dieselbe Geometrie und dasselbe Gewicht:
   gleiche Breite, gleiche Hoehe, beide gefuellt. Unterschieden werden sie nur
   durch die Farbe. Eine hervorgehobene Zustimmung neben einer blassen
   Ablehnung gilt in Deutschland als unwirksame Einwilligung - die Ablehnung
   muss genauso leicht fallen. */
.einwilligung-knoepfe .btn {
  flex: 1 1 200px; min-width: 200px; max-width: 240px; justify-content: center;
}
.einwilligung-knoepfe [data-wahl="nein"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.einwilligung-knoepfe [data-wahl="nein"]:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

@media (max-width: 860px) {
  /* Die Aktionsleiste steht selbst unten; der Hinweis legt sich darueber und
     laesst sie frei, sonst waeren Anrufen und Anfragen verdeckt. */
  .einwilligung { bottom: 56px; padding: 18px 20px; gap: 18px; }
  .einwilligung-knoepfe { width: 100%; }
  .einwilligung-knoepfe .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .einwilligung-text strong { font-size: 19px; }
  .einwilligung-text p { font-size: 14px; }
}

/* Solange der Hinweis steht, darf die Zurueck-nach-oben-Taste nicht
   dahinter verschwinden. */
.einwilligung ~ .to-top, body:has(.einwilligung) .to-top { bottom: 150px; }

@media (prefers-reduced-motion: reduce) {
  .einwilligung { transition: none; }
}