/* ================================================================
   SAMER'S STUDIO — Gestaltung (Version 3)
   Dunkler Start wie der Laden am Abend, dann wird die Seite beim
   Scrollen cremig. Tannengrün aus dem Laden zieht sich durch.
   Schriften liegen auf unserem Server (kein Google Fonts).
   ================================================================ */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/schrift/archivo.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("/schrift/plex.woff2") format("woff2"); }

:root {
  --nacht: #0c110e;
  --nacht-2: #121a15;
  --tanne: #1d3b2a;
  --tanne-tief: #13271c;
  --moos: #7f9f63;
  --moos-hell: #b5c79a;
  --creme: #f3efe7;
  --creme-hell: #faf8f3;
  --creme-2: #e8e2d6;
  --tinte: #151413;
  --tinte-2: #57524b;
  --gold-licht: #e9dcc0;

  /* Werte, die je nach Ton wechseln */
  --grund: var(--creme);
  --text: var(--tinte);
  --text-2: var(--tinte-2);
  --linie: rgba(21, 20, 19, .14);
  --akzent: var(--tanne);

  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-text: "Plex", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(18px, 4vw, 56px);
  --breit: 1320px;
  --kopf: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-weich: cubic-bezier(.65, 0, .35, 1);
}
body.dunkel {
  --grund: var(--nacht);
  --text: var(--creme);
  --text-2: rgba(243, 239, 231, .66);
  --linie: rgba(243, 239, 231, .13);
  --akzent: var(--moos-hell);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 16px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color 1.1s var(--ease-weich), color .9s var(--ease-weich);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--moos-hell); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--moos); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--tinte); color: var(--creme); padding: .6rem 1rem; }
.skip:focus { left: 8px; }
.rahmen { width: min(var(--breit), 100% - 2 * var(--rand)); margin-inline: auto; position: relative; }

/* ---------- Schwebende Teilchen (wie bei NEED'S) ---------- */
#teilchen { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main, .kopf, .fuss { position: relative; z-index: 1; }

/* ================= KINO-START ================= */
/* Der Vorhang ist sofort da (kein Aufblitzen der Seite). Ohne JavaScript
   verschwindet er nach 4 Sekunden von selbst. */
.vorhang { position: fixed; inset: 0; z-index: 300; cursor: pointer; animation: notaus 0s 3s forwards; }
@keyframes notaus { to { visibility: hidden; pointer-events: none; } }
.vorhang i { position: absolute; left: 0; right: 0; height: 50.5%; background: #060806; transition: transform 1.25s var(--ease-weich); }
.vorhang i:first-child { top: 0; }
.vorhang i:last-child { bottom: 0; }
.vorhang-logo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 2; transition: opacity .6s ease; }
.vorhang-logo b {
  display: block; line-height: 0; color: var(--creme);
}
.vorhang-svg { width: min(78vw, 720px); height: auto; }
.vorhang-logo small { margin-top: 1.1rem; font: 500 .66rem var(--f-text); letter-spacing: .5em; text-transform: uppercase; color: rgba(243, 239, 231, .55); opacity: 0; animation: einblenden .8s .9s ease forwards; }
@keyframes lichtstreif { to { background-position: -20% 0; } }
@keyframes einblenden { to { opacity: 1; } }
.vorhang.auf .vorhang-logo { opacity: 0; }
.vorhang.auf i:first-child { transform: translateY(-101%); }
.vorhang.auf i:last-child { transform: translateY(101%); }
.vorhang.weg { display: none !important; }

/* ================= KOPFZEILE ================= */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--kopf); transition: background-color .5s ease, border-color .5s ease, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.kopf.voll { background: color-mix(in srgb, var(--grund) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--linie); }
.kopf .rahmen { height: 100%; display: flex; align-items: center; gap: 1.6rem; }
.marke { font: 800 1.1rem/1 var(--f-display); letter-spacing: .04em; text-decoration: none; display: flex; align-items: center; gap: .7rem; }
.marke .marke-svg { height: 17px; width: auto; display: block; }
.marke small { font: 500 .58rem/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--linie); padding: .35rem .5rem; }
.nav { margin-left: auto; display: flex; gap: 1.7rem; }
.nav a { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; position: relative; padding: .4rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--akzent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.kopf-termin { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--text); padding: .7rem 1rem; transition: background-color .3s, color .3s; white-space: nowrap; }
.kopf-termin:hover { background: var(--text); color: var(--grund); }
.menue-knopf { display: none; margin-left: auto; background: none; border: 0; font: 600 .7rem var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--text); padding: .6rem 0; cursor: pointer; }

/* ================= TYPO ================= */
.marker { display: flex; align-items: center; gap: .9rem; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); margin: 0 0 1.1rem; }
.marker b { font-weight: 600; color: var(--text); }
.marker i { width: 34px; height: 1px; background: var(--akzent); }
.h2 { font: 300 clamp(2.2rem, 5.6vw, 4.4rem)/1.0 var(--f-display); letter-spacing: -.025em; margin: 0; }
.h2 em { font-style: normal; font-weight: 700; color: var(--akzent); }
.zeile { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 64px); }
.zeile > p { margin: 0; color: var(--text-2); font-size: .85rem; max-width: 34ch; }
.abschnitt { padding: clamp(80px, 12vw, 160px) 0; position: relative; }

/* Wörter steigen einzeln auf */
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.wort > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.da .wort > span, .wort.da > span { transform: none; }

/* ================= KNÖPFE ================= */
.knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }
.knopf { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .7rem; min-height: 52px; padding: 0 1.5rem; font: 600 .68rem/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--text); color: var(--text); background: transparent; isolation: isolate; transition: color .35s ease, border-color .35s; cursor: pointer; }
.knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--text); transform: translateY(101%); transition: transform .45s var(--ease); }
.knopf:hover { color: var(--grund); }
.knopf:hover::before { transform: none; }
.knopf-gruen { background: var(--tanne); border-color: var(--tanne); color: var(--creme-hell); }
.knopf-gruen::before { background: var(--moos); }
.knopf-gruen:hover { color: var(--tinte); border-color: var(--moos); }
.knopf svg { width: 16px; height: 16px; flex: none; }

/* ================= BÜHNE (Startseite) ================= */
.buehne { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--kopf) + 40px) 0 clamp(70px, 11vh, 120px); overflow: hidden; color: var(--creme); }
.buehne-foto { position: absolute; inset: 0; z-index: -2; }
.buehne-foto img, .buehne-foto video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: kamera 22s ease-out forwards; filter: saturate(.85) contrast(1.05); }
@keyframes kamera { to { transform: scale(1.0); } }
.buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 80% at 70% 30%, rgba(12, 17, 14, .38) 0%, rgba(12, 17, 14, .78) 60%, var(--nacht) 100%),
  linear-gradient(180deg, rgba(12, 17, 14, .6) 0%, rgba(12, 17, 14, .35) 35%, rgba(12, 17, 14, .92) 88%, var(--nacht) 100%); }
.buehne .sechseck { position: absolute; right: 6%; top: 16%; width: clamp(160px, 24vw, 360px); opacity: .7; z-index: -1; }
.sechseck path { fill: none; stroke: var(--moos-hell); stroke-width: 1; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: zeichnen 3s .6s var(--ease) forwards; filter: drop-shadow(0 0 6px rgba(181, 199, 154, .6)); }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.wortmarke { font: 900 clamp(3.6rem, 17vw, 18rem)/.78 var(--f-display); font-stretch: 112%; letter-spacing: -.045em; margin: 0 0 clamp(18px, 3vw, 36px) -.04em; white-space: nowrap; }
.wortmarke { line-height: 0; }
.wortmarke svg { display: block; width: 100%; max-width: 1240px; height: auto; color: var(--creme); filter: drop-shadow(0 4px 30px rgba(0, 0, 0, .45)); }
.logo-svg .apo { stroke: var(--moos-hell); }
.wortmarke path, .vorhang-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.los .wortmarke path { animation: schreiben 1.3s var(--ease) var(--d) forwards; }
.vorhang-svg path { animation: schreiben 1.1s var(--ease) var(--d) forwards; }
@keyframes schreiben { to { stroke-dashoffset: 0; } }
@keyframes buchstabe { to { opacity: 1; transform: none; } }
.buehne-unten { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 2rem; align-items: end; }
.buehne h1 { font: 300 clamp(1.5rem, 3vw, 2.5rem)/1.12 var(--f-display); margin: 0 0 1.4rem; max-width: 22ch; }
.buehne h1 b { font-weight: 700; }
.buehne .knopf { border-color: var(--creme); color: var(--creme); }
.buehne .knopf::before { background: var(--creme); }
.buehne .knopf:hover { color: var(--tinte); }
.buehne .knopf-gruen { border-color: var(--moos); background: var(--tanne); }
.buehne .knopf-gruen::before { background: var(--moos-hell); }
.siegel { display: grid; gap: .9rem; justify-items: end; text-align: right; }
.siegel div { display: grid; }
.siegel b { font: 700 clamp(1.3rem, 2.2vw, 1.9rem)/1 var(--f-display); }
.buehne-unten { padding-right: clamp(0px, 7vw, 100px); }
.siegel small { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 239, 231, .6); }
.sterne { color: var(--gold-licht); letter-spacing: .1em; }
.scroll-hinweis { position: absolute; left: 50%; bottom: 18px; width: 1px; height: 46px; background: rgba(243, 239, 231, .2); overflow: hidden; }
.scroll-hinweis::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--moos-hell); animation: rieseln 2.2s infinite var(--ease-weich); }
@keyframes rieseln { to { top: 110%; } }
.buehne-stueck { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.los .buehne-stueck { opacity: 1; transform: none; }
.los .buehne-stueck:nth-of-type(2) { transition-delay: .15s; }

/* ================= LAUFBAND ================= */
.laufband { position: relative; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); background: var(--tanne); color: var(--creme); overflow: hidden; border-block: 1px solid rgba(181, 199, 154, .25); }
.laufband-spur { display: flex; width: max-content; animation: laufen 70s linear infinite; will-change: transform; }
.laufband figure { margin: 0; display: flex; align-items: center; gap: 1rem; padding: 1.3rem 2.4rem; white-space: nowrap; border-right: 1px solid rgba(181, 199, 154, .2); }
.laufband blockquote { margin: 0; font: 300 1.05rem var(--f-display); }
.laufband figcaption { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--moos-hell); }
.laufband .sterne { font-size: .7rem; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ================= PREISTAFEL ================= */
.tafel { border: 1px solid var(--linie); background: linear-gradient(180deg, rgba(29, 59, 42, .22), rgba(29, 59, 42, .05)); padding: clamp(24px, 4vw, 56px); position: relative; }
.tafel::before, .tafel::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--akzent); }
.tafel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tafel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.preise-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px) clamp(28px, 6vw, 96px); }
.preis-gruppe h3 { font: 600 .62rem var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--akzent); margin: 0 0 .3rem; }
.preis-liste { list-style: none; margin: 0; padding: 0; }
.preis-liste li { display: flex; align-items: baseline; gap: .7rem; padding: .95rem 0; border-bottom: 1px solid var(--linie); transition: padding .35s var(--ease); }
.preis-liste li:hover { padding-left: .5rem; }
.preis-liste i { flex: 1; border-bottom: 1px dotted var(--linie); transform: translateY(-4px); }
.preis-liste b { font: 500 1.35rem var(--f-display); white-space: nowrap; }
.preis-hinweis { font-size: .8rem; color: var(--text-2); }
.chef-zeile { margin-top: clamp(28px, 4vw, 44px); padding-top: 1.4rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline; font-size: .9rem; color: var(--text-2); }
.chef-zeile b { color: var(--text); font: 600 1rem var(--f-display); }

/* ================= TERMIN ================= */
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.weg { position: relative; overflow: hidden; background: var(--grund); padding: clamp(24px, 3vw, 40px); text-decoration: none; display: flex; flex-direction: column; gap: .5rem; min-height: 280px; isolation: isolate; transition: color .45s ease; }
.weg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tanne); transform: translateY(101%); transition: transform .6s var(--ease); }
.weg:hover { color: var(--creme); }
.weg:hover::before { transform: none; }
.weg .nr { font: 200 4.4rem/1 var(--f-display); color: var(--akzent); transition: color .45s; }
.weg:hover .nr { color: var(--moos-hell); }
.weg b { font: 700 1.4rem var(--f-display); }
.weg span { color: inherit; opacity: .7; font-size: .88rem; }
.weg u { margin-top: auto; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; display: inline-flex; gap: .6rem; align-items: center; }
.weg u::after { content: "→"; transition: transform .4s var(--ease); }
.weg:hover u::after { transform: translateX(6px); }

/* ================= LEISTUNGEN mit Bildvorschau ================= */
.leistungen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.leistungen a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto 2rem; gap: 1rem; align-items: center; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--linie); text-decoration: none; transition: padding .45s var(--ease), color .3s; }
.leistungen a:hover { padding-left: 1.2rem; color: var(--akzent); }
.leistungen small { font-size: .62rem; letter-spacing: .2em; color: var(--text-2); }
.leistungen b { font: 300 clamp(1.7rem, 4.4vw, 3.6rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.leistungen span { font-size: .8rem; color: var(--text-2); text-align: right; }
.leistungen em { font-style: normal; font-weight: 600; color: var(--text); }
.leistungen i { font-style: normal; transition: transform .4s var(--ease); }
.leistungen a:hover i { transform: translateX(6px) rotate(-45deg); }
.vorschau { position: fixed; left: 0; top: 0; width: 260px; aspect-ratio: 3 / 4; pointer-events: none; z-index: 80; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .35s ease, transform .45s var(--ease); }
.vorschau.an { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vorschau img { width: 100%; height: 100%; object-fit: cover; }

/* ================= GALERIE (Bilder enthüllen sich) ================= */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(8px, 1.4vw, 18px); }
.galerie figure { aspect-ratio: 3 / 4; }
.galerie figure { margin: 0; position: relative; overflow: hidden; background: var(--creme-2); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.8s var(--ease); }
.galerie figure::after { content: ""; position: absolute; inset: 0; background: var(--tanne); transform-origin: top; transition: transform 1.2s var(--ease-weich); }
.galerie.da figure::after { transform: scaleY(0); }
.galerie.da img { transform: scale(1); }
.filme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); margin-top: clamp(8px, 1.4vw, 18px); }
.filme figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 9 / 16; background: var(--nacht); }
.filme video { width: 100%; height: 100%; object-fit: cover; display: block; }
.filme figcaption { position: absolute; left: 10px; bottom: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--creme); background: rgba(12, 17, 14, .6); padding: 4px 8px; }
.galerie.da figure:nth-child(2)::after { transition-delay: .15s; }
.galerie.da figure:nth-child(3)::after { transition-delay: .3s; }
.galerie.da figure:nth-child(4)::after { transition-delay: .45s; }
.galerie.da figure:nth-child(5)::after { transition-delay: .6s; }
.galerie figcaption { position: absolute; left: 0; bottom: 0; padding: .9rem 1rem; color: #fff; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); width: 100%; }
.extras { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.extras div { background: var(--grund); padding: 1.4rem 1.2rem; transition: background-color 1.1s var(--ease-weich); }
.extras dt { font: 700 1rem var(--f-display); margin-bottom: .3rem; }
.extras dd { margin: 0; font-size: .82rem; color: var(--text-2); }

/* ================= VERSPRECHEN ================= */
.versprechen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--akzent); }
.versprechen li { padding: 1.6rem 1.4rem 1.8rem 0; border-right: 1px solid var(--linie); }
.versprechen li + li { padding-left: 1.4rem; }
.versprechen li:last-child { border-right: 0; }
.versprechen span { display: block; font: 200 2.6rem/1 var(--f-display); color: var(--akzent); margin-bottom: 1.2rem; }
.versprechen b { display: block; font: 700 1.2rem/1.2 var(--f-display); margin-bottom: .5rem; }
.versprechen p { margin: 0; font-size: .9rem; color: var(--text-2); }
.versprechen-fuss { margin: 1.8rem 0 0; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 1020px) { .versprechen { grid-template-columns: 1fr 1fr; } .versprechen li:nth-child(2) { border-right: 0; } .versprechen li:nth-child(3) { padding-left: 0; } .versprechen li { border-bottom: 1px solid var(--linie); } }
@media (max-width: 640px) { .versprechen { grid-template-columns: 1fr; } .versprechen li, .versprechen li + li { padding: 1.4rem 0; border-right: 0; } }

/* ================= BUZZER-SPIEL ================= */
.buzzer { background: var(--tanne); color: var(--creme); position: relative; overflow: hidden; }
.buzzer::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 50% at 75% 50%, rgba(181, 199, 154, .18), transparent 70%); pointer-events: none; }
.buzzer .marker, .buzzer .zeile > p { color: rgba(243, 239, 231, .7); }
.buzzer .marker b { color: var(--creme); }
.buzzer .marker i { background: var(--moos-hell); }
.buzzer .h2 em { color: var(--moos-hell); }
.buzzer-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.buzzer-regeln { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; color: rgba(243, 239, 231, .82); }
.buzzer-regeln li::before { content: "—"; color: var(--moos-hell); margin-right: .7rem; }
.uhr { font: 200 clamp(4rem, 12vw, 9rem)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-align: center; min-width: 5.2ch; }
.uhr.blind { color: transparent; text-shadow: 0 0 22px rgba(243, 239, 231, .55); }
.buzzer-knopf { width: clamp(150px, 20vw, 210px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; display: block; margin: 1.4rem auto 0; background: radial-gradient(circle at 40% 35%, #f05a4a, #b3150c 60%, #6e0b06); box-shadow: 0 14px 0 #5a0904, 0 26px 50px -10px rgba(0, 0, 0, .7), inset 0 -8px 18px rgba(0, 0, 0, .35), inset 0 6px 12px rgba(255, 255, 255, .25); color: #fff; font: 800 .8rem var(--f-text); letter-spacing: .24em; text-transform: uppercase; transition: transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color: transparent; }
.buzzer-knopf:active, .buzzer-knopf.druck { transform: translateY(10px); box-shadow: 0 4px 0 #5a0904, 0 12px 30px -10px rgba(0, 0, 0, .7), inset 0 -6px 14px rgba(0, 0, 0, .35), inset 0 6px 12px rgba(255, 255, 255, .2); }
.buzzer-ergebnis { min-height: 3.2em; text-align: center; margin: 1.6rem 0 0; font: 400 1.05rem/1.4 var(--f-display); }
.buzzer-ergebnis b { color: var(--moos-hell); }
.buzzer-hinweis { text-align: center; font-size: .72rem; color: rgba(243, 239, 231, .55); margin: .6rem 0 0; }

/* ================= ÜBER SAMER ================= */
.samer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.samer figure { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.samer figure img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; will-change: transform; }
.samer figure::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(243, 239, 231, .45); pointer-events: none; }
.zitat { font: 300 clamp(1.7rem, 3.6vw, 3rem)/1.15 var(--f-display); letter-spacing: -.02em; margin: 0 0 1.6rem; }
.zitat b { font-weight: 700; color: var(--akzent); }
.samer-text p { margin: 0 0 .9rem; color: var(--text-2); max-width: 54ch; }
.zahlen { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: clamp(20px, 4vw, 56px); margin: 2rem 0; }
.zahlen b { display: block; font: 800 clamp(2.2rem, 4.6vw, 3.6rem)/1 var(--f-display); color: var(--akzent); }
.zahlen small { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }

/* ================= FRAGEN ================= */
.fragen-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.fragen-liste { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; font: 500 1.02rem var(--f-display); transition: color .3s; }
.frage summary:hover { color: var(--akzent); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font: 200 1.6rem/1 var(--f-display); color: var(--akzent); transition: transform .4s var(--ease); }
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { margin: 0 0 1.3rem; color: var(--text-2); max-width: 60ch; }
.frage a, .text a { color: var(--akzent); text-underline-offset: 3px; }

/* ================= KONTAKT ================= */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.zwei figure { margin: 0; overflow: hidden; }
.tabelle { margin: 0; border-top: 1px solid var(--linie); }
.tabelle div { display: grid; grid-template-columns: minmax(110px, 12rem) 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--linie); }
.tabelle dt { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); padding-top: .3rem; }
.tabelle dd { margin: 0; }
.tabelle a { text-underline-offset: 3px; }
.auszeichnung { display: grid; grid-template-columns: auto 1fr auto auto; gap: clamp(16px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-block: 1px solid var(--linie); }
.auszeichnung strong { font: 900 clamp(3rem, 8vw, 7rem)/.88 var(--f-display); color: var(--akzent); letter-spacing: -.03em; }
.auszeichnung p { margin: 0; font-size: .85rem; color: var(--text-2); max-width: 30ch; }
.auszeichnung div b { display: block; font: 500 1.8rem var(--f-display); }
.auszeichnung div span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }

/* ================= UNTERSEITEN ================= */
.seitenkopf { position: relative; overflow: hidden; color: var(--creme); padding: calc(var(--kopf) + clamp(48px, 8vw, 110px)) 0 clamp(48px, 7vw, 96px); }
.seitenkopf .sechseck { position: absolute; right: -60px; top: 80px; width: clamp(200px, 30vw, 440px); opacity: .5; }
.seiten-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.krumen { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); margin-bottom: 1.6rem; }
.krumen a { text-decoration: none; }
.krumen a:hover { color: var(--akzent); }
.seitenkopf h1 { font: 300 clamp(2.6rem, 7.4vw, 6.2rem)/.95 var(--f-display); letter-spacing: -.03em; margin: 0 0 1.4rem; max-width: 14ch; }
.seitenkopf h1 b { font-weight: 800; }
.seitenkopf .lead { margin: 0 0 1.8rem; font-size: 1.05rem; color: var(--text-2); max-width: 44ch; }
.seiten-bild { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.seiten-bild img { width: 100%; height: 100%; object-fit: cover; animation: kamera 14s ease-out forwards; transform: scale(1.1); }
.seiten-bild::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(243, 239, 231, .4); }
.punkte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.punkte li { padding: .95rem 0 .95rem 1.8rem; border-bottom: 1px solid var(--linie); position: relative; }
.punkte li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: .8rem; height: 1px; background: var(--akzent); }
.weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid var(--linie); }
.weiter a { padding: 1.3rem 1rem 1.3rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; display: flex; justify-content: space-between; gap: 1rem; font: 500 1.05rem var(--f-display); transition: color .25s ease, padding .35s var(--ease); }
.weiter a:hover { color: var(--akzent); padding-left: .6rem; }
.text p { margin: 0 0 1rem; max-width: 62ch; }
.produkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.produkte li { padding: 1.4rem 1.2rem; display: grid; gap: .25rem; background: var(--grund); transition: background-color 1.1s var(--ease-weich); }
.produkte b { font: 700 1.05rem var(--f-display); }
.produkte span { font-size: .82rem; color: var(--text-2); }
.produkte em { font-style: normal; color: var(--akzent); font-weight: 600; }
.rechtlich h2 { font: 600 1.05rem var(--f-display); margin: 2rem 0 .4rem; }
.rechtlich p { max-width: 70ch; color: var(--text-2); }

/* ================= FUSSZEILE ================= */
.fuss { background: #080b09; color: var(--creme); padding: clamp(64px, 9vw, 120px) 0 calc(28px + env(safe-area-inset-bottom)); overflow: hidden; }
.fuss .fuss-gross { margin: 0 0 clamp(36px, 5vw, 64px); line-height: 0; color: rgba(181, 199, 154, .7); }
.fuss .fuss-gross svg { display: block; width: 100%; height: auto; }
.fuss-marke svg { height: 20px; width: auto; display: block; }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.fuss h3 { font: 600 .6rem var(--f-text); letter-spacing: .24em; text-transform: uppercase; color: var(--moos-hell); margin: 0 0 .9rem; }
.fuss p { margin: 0; font-size: .86rem; line-height: 2; color: rgba(243, 239, 231, .78); }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--moos-hell); }
.fuss-unten { margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid rgba(243, 239, 231, .12); font-size: .72rem; color: rgba(243, 239, 231, .5); }

.schnell { display: none; }

/* ================= AUFTAUCHEN ================= */
.zeigen { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.zeigen.da { opacity: 1; transform: none; }

/* ================= PANDA ================= */
.panda { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 95; }
.panda-knopf { width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(21, 20, 19, .15); background: var(--creme-hell); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .55); cursor: pointer; padding: 6px; position: relative; transition: transform .35s var(--ease); animation: schweben 4s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-5px); } }
.panda-knopf:hover { transform: translateY(-3px) rotate(-5deg); animation: none; }
.panda-knopf svg { width: 100%; height: 100%; pointer-events: none; }
.panda-knopf { touch-action: none; cursor: grab; }
.panda.zieht .panda-knopf { cursor: grabbing; animation: none; transform: scale(1.08); box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .6); }
.panda.links .panda-fenster { right: auto; left: 0; }
.panda.oben .panda-fenster { bottom: auto; top: 92px; }
.panda.links .panda-ruf { right: auto; left: 88px; }
.pf-anruf { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tanne); color: var(--creme-hell); text-decoration: none; margin-left: auto; }
.pf-anruf svg { width: 16px; height: 16px; }
.pf-anruf + .pf-zu { margin-left: .4rem; }
.panda-knopf .schild { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); background: var(--tanne); color: var(--creme-hell); font: 600 .5rem var(--f-text); letter-spacing: .18em; padding: .25rem .5rem; white-space: nowrap; }
.panda-ruf { position: absolute; right: 88px; bottom: 22px; background: var(--creme-hell); color: var(--tinte); font-size: .78rem; padding: .6rem .85rem; white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity .4s ease, transform .4s var(--ease); pointer-events: none; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.panda-ruf.da { opacity: 1; transform: none; }
.panda .rauch { animation: rauch 3.2s ease-in-out infinite; transform-origin: 93px 66px; }
@keyframes rauch { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .75; } 100% { opacity: 0; transform: translateY(-8px); } }
.panda .augen-lid { transform-origin: center; animation: blinzeln 5s infinite; }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.panda-fenster { position: absolute; right: 0; bottom: 92px; width: min(410px, calc(100vw - 28px)); height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--creme-hell); color: var(--tinte); border: 1px solid rgba(21, 20, 19, .14); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; transition: opacity .3s ease, transform .35s var(--ease); }
.panda-fenster { visibility: hidden; }
.panda.offen .panda-fenster { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.pf-kopf { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(21, 20, 19, .12); }
.pf-kopf svg { width: 38px; height: 38px; }
.pf-kopf b { font: 700 .95rem var(--f-display); display: block; }
.pf-kopf small { font-size: .7rem; color: var(--tinte-2); }
.pf-zu { margin-left: auto; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--tinte-2); }
.pf-verlauf { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.pf-msg { max-width: 88%; padding: .6rem .85rem; font-size: .88rem; line-height: 1.45; white-space: pre-line; }
.pf-er { background: var(--creme-2); align-self: flex-start; }
.pf-du { background: var(--tanne); color: var(--creme-hell); align-self: flex-end; }
.pf-msg a { color: var(--tanne); font-weight: 600; }
.pf-msg .pf-wa { display: inline-flex; gap: .4rem; margin-top: .5rem; background: var(--tanne); color: var(--creme-hell); padding: .45rem .75rem; text-decoration: none; font-size: .8rem; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem .8rem; border-top: 1px solid rgba(21, 20, 19, .08); flex-shrink: 0; }
.pf-chips::-webkit-scrollbar { display: none; }
.pf-chips button { white-space: nowrap; padding: .3rem .55rem !important; font-size: .72rem !important; background: none; border: 1px solid rgba(21, 20, 19, .15); padding: .35rem .6rem; font: 500 .75rem var(--f-text); color: var(--tinte); cursor: pointer; }
.pf-chips button:hover { border-color: var(--tanne); color: var(--tanne); }
.pf-form { display: flex; gap: .4rem; padding: .7rem; border-top: 1px solid rgba(21, 20, 19, .12); }
.pf-form input { flex: 1; min-width: 0; border: 1px solid rgba(21, 20, 19, .15); background: #fff; padding: .6rem .7rem; font: inherit; font-size: .88rem; color: var(--tinte); }
.pf-form input:focus { outline: 2px solid var(--moos); outline-offset: -1px; }
.pf-form button { border: 0; background: var(--tinte); color: var(--creme-hell); padding: 0 1rem; font: 600 .7rem var(--f-text); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* ================= RESPONSIV ================= */
@media (max-width: 1020px) {
  .nav, .kopf-termin { display: none; }
  .menue-knopf { display: block; }
  .kopf.offen { background: var(--grund); }
  .kopf.offen .nav { display: flex; position: absolute; top: var(--kopf); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--grund); border-bottom: 1px solid var(--linie); padding: .5rem var(--rand) 1.2rem; }
  .kopf.offen .nav a { padding: 1rem 0; border-bottom: 1px solid var(--linie); font-size: .8rem; }
  .preise-raster, .fragen-raster, .zwei, .seiten-raster, .samer, .buzzer-raster { grid-template-columns: 1fr; }
  .buehne-unten { grid-template-columns: 1fr; }
  .siegel { justify-items: start; text-align: left; grid-template-columns: repeat(3, auto); gap: 1.4rem; }
  .wege { grid-template-columns: 1fr; }
  .weg { min-height: 0; }
  .extras { grid-template-columns: 1fr 1fr; }
  .auszeichnung { grid-template-columns: 1fr 1fr; }
  .auszeichnung strong { grid-column: 1 / -1; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .seiten-bild { max-width: 480px; }
  .vorschau { display: none; }
}
@media (max-width: 640px) {
  body { padding-bottom: 64px; }
  .schnell { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding-bottom: env(safe-area-inset-bottom); background: #080b09; }
  .schnell a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 58px; color: var(--creme-hell); text-decoration: none; font: 600 .72rem var(--f-text); letter-spacing: .18em; text-transform: uppercase; }
  .schnell a + a { background: var(--tanne); }
  .schnell svg { width: 18px; height: 18px; }
  .panda { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .panda-knopf { width: 62px; height: 62px; }
  .panda-ruf { right: 72px; bottom: 16px; }
  .panda-fenster, .panda.links .panda-fenster, .panda.oben .panda-fenster { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(158px + env(safe-area-inset-bottom)); width: auto; height: min(470px, calc(100svh - 230px)); max-height: none; top: auto; }
  .pf-zu { font-size: 2rem; width: 44px; height: 44px; }
  .pf-kopf { padding: .6rem .8rem; }
  .buehne { min-height: 92svh; }
  .buehne .knopf { flex: 1 1 auto; justify-content: center; }
  .siegel { grid-template-columns: repeat(3, auto); gap: 1rem; }
  .siegel b { font-size: 1.3rem; }
  .galerie { grid-template-columns: 1fr 1fr; }

  .galerie figure { aspect-ratio: 3 / 4; }
  .extras { grid-template-columns: 1fr; }
  .leistungen a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .leistungen a > i, .leistungen span .lang { display: none; }
  .tabelle div { grid-template-columns: 1fr; gap: .2rem; }
  .zahlen { grid-template-columns: repeat(3, auto); gap: 1.2rem; }
  .fuss-raster { grid-template-columns: 1fr; }
  .tafel { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vorhang { display: none !important; }
  .zeigen, .wortmarke span, .buehne-stueck, .wort > span { opacity: 1 !important; transform: none !important; }
  .wortmarke path, .vorhang-svg path { stroke-dashoffset: 0 !important; }
  .galerie figure::after { transform: scaleY(0); }
  .galerie img, .buehne-foto img, .buehne-foto video, .seiten-bild img { transform: none; }
  .sechseck path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

.kleeblatt-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); }
.kleeblatt-reihe figure { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nacht); }
.kleeblatt-reihe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kleeblatt-reihe figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--creme); background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
@media (max-width: 760px) { .kleeblatt-reihe, .filme { grid-template-columns: 1fr 1fr; } }

/* Produkte zum Aufklappen */
.produkt-klappe { margin-top: clamp(14px, 2vw, 24px); border: 1px solid var(--linie); }
.produkt-klappe summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 1.3rem; font: 700 1.05rem var(--f-display); }
.produkt-klappe summary::-webkit-details-marker { display: none; }
.produkt-klappe summary small { font: 500 .62rem var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.produkt-klappe summary i { margin-left: auto; font-style: normal; font-size: 1.4rem; line-height: 1; transition: transform .3s var(--ease); }
.produkt-klappe[open] summary i { transform: rotate(45deg); }
.produkt-klappe .produkt-raster { padding: 0 1.3rem 1.3rem; }
.produkt-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.produkt-raster li { display: grid; gap: .2rem; align-content: start; }
.produkt-raster img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; margin-bottom: .5rem; background: var(--nacht); }
.produkt-raster b { font: 700 .95rem var(--f-display); }
.produkt-raster span { font-size: .78rem; color: var(--text-2); line-height: 1.35; }
.produkt-raster em { font-style: normal; color: var(--akzent); font-weight: 600; font-size: .9rem; }
@media (max-width: 640px) { .produkt-raster { grid-template-columns: 1fr 1fr; } }
/* Instagram */
.insta { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.insta .insta-logo { width: 18px; height: 18px; flex-shrink: 0; }
.zeile .insta { margin-top: .6rem; font-weight: 600; color: var(--text); }
.zeile .insta:hover span { text-decoration: underline; }
/* Empfehlungen */
.empf-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.empf { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1.5rem 1.3rem 1.7rem; background: var(--grund); color: var(--text); text-decoration: none; transition: background-color .3s ease; }
.empf:hover { background: var(--creme-2); }
.empf small { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.empf b { font: 800 1.35rem var(--f-display); letter-spacing: -.01em; }
.empf p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-2); }
.empf span { position: absolute; top: 1.2rem; right: 1.2rem; color: var(--akzent); transition: transform .3s var(--ease); }
.empf:hover span { transform: translate(3px, -3px); }

/* Ein Ort: Intro, Kunden, Abschluss */
.ort-intro { max-width: 34ch; display: grid; gap: .9rem; justify-items: start; }
.ort-intro p { margin: 0; }
.insta-farbe { padding: .55rem .95rem .55rem .6rem; border: 1px solid var(--linie); border-radius: 999px; font-weight: 600; color: var(--text); transition: border-color .3s ease; }
.insta-farbe:hover { border-color: #d6249f; }
.insta .insta-logo { width: 22px; height: 22px; }
.kunden { margin-top: clamp(8px, 1.4vw, 18px); }
.ort-satz { max-width: 62ch; margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 36px); font: 400 clamp(1.15rem, 1.9vw, 1.55rem)/1.45 var(--f-display); letter-spacing: -.01em; }

/* Galerie gemischt + Mehr */
.galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerie figure.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie figure.film::after { display: none; }
.galerie-mehr { margin-top: clamp(10px, 1.4vw, 18px); border: 1px solid var(--linie); }
.galerie-mehr summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 1.3rem; font: 700 1.05rem var(--f-display); }
.galerie-mehr summary::-webkit-details-marker { display: none; }
.galerie-mehr summary small { font: 500 .62rem var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.galerie-mehr summary i { margin-left: auto; font-style: normal; font-size: 1.4rem; line-height: 1; transition: transform .3s var(--ease); }
.galerie-mehr[open] summary i { transform: rotate(45deg); }
.galerie-mehr .galerie { padding: 0 1.3rem 1.3rem; }
.galerie-mehr .galerie figure::after { transform: scaleY(0); }
.galerie-mehr .galerie img { transform: none; }
.empf-bald { background: transparent; }
.empf-bald b { color: var(--akzent); }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr 1fr; } }

.kontakt-solo > div { max-width: 760px; }

.amp { font-family: "Plex", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0; padding: 0 .04em; }

/* Prüfung 12.10.: Lesbarkeit & Recht */
.seitenkopf[data-ton="dunkel"] { background: var(--nacht); }
.laufband-hinweis { margin: .9rem auto 0; padding: 0 16px; max-width: 900px; text-align: center; font-size: .68rem; line-height: 1.5; color: var(--text-2); }
.laufband-hinweis a { color: inherit; }
.bedingungen { margin-top: 1.2rem; font-size: .8rem; }
.bedingungen summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.bedingungen ul { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; opacity: .85; line-height: 1.5; }
.preis-mwst { margin: 1rem 0 0; font-size: .72rem; color: var(--text-2); }
.buzzer-hinweis { opacity: .95; }
@media (max-width: 640px) {
  .leistungen a { grid-template-columns: 2.4rem minmax(0, 1fr) 1.4rem; row-gap: .3rem; }
  .leistungen a > span { grid-column: 2 / 3; grid-row: 2; text-align: left; }
  .leistungen a > i { grid-column: 3; grid-row: 1 / 3; }
}

.laufband-spur { -webkit-mask-image: none; }
.laufband > .laufband-spur { }