/* Elfenbein als Grund, Kupfer wie smilify.pro fuer die eine Aktion, Petrol als zweiter Akzent und fuer die dunklen Inseln. Kein Gold.
   Jedes Kapitel .ch hat eine angeheftete Buehne .pin, alle Bewegung haengt an der Scrollposition, nichts laeuft endlos. */
:root {
  --bg: #F6F1E8; --bg2: #EFE8DC; --surface: #FFFFFF;
  --text: #17191F; --muted: #5C5F68; --line: hsl(225 14% 11% / .1);
  --petrol: #1E6872; --cu-text: #9A4F24;
  --cu-hi: #F8C1AA; --cu-gl: #E79A74; --cu: #E19970; --cu-me: #D17A47; --cu-deep: #C66D39; --cu-45: #B26234;
  --island: #15191D; --island2: #1C2126; --i-text: #F3EEE6; --i-muted: #AEB4BA; --i-line: hsl(0 0% 100% / .1); --i-petrol: #7FC1C9;
  --nav-rgb: 246 241 232; --dark-rgb: 17 20 23;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --navh: 64px;
  color-scheme: light dark;
}
/* Dunkel ist ein eigener Entwurf: Grafit statt Schwarz, Kupfer heller, Petrol nur als feine Marke */
:root[data-theme="dark"] { --bg: #111417; --bg2: #161A1E; --surface: #1B2025; --text: #F1ECE4; --muted: #A9AFB5; --line: hsl(0 0% 100% / .1);
  --petrol: #7FC1C9; --cu-text: #E9A47C; --island: #0B0D10; --island2: #121518; --nav-rgb: 17 20 23; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #111417; --bg2: #161A1E; --surface: #1B2025; --text: #F1ECE4; --muted: #A9AFB5; --line: hsl(0 0% 100% / .1);
    --petrol: #7FC1C9; --cu-text: #E9A47C; --island: #0B0D10; --island2: #121518; --nav-rgb: 17 20 23; color-scheme: dark; }
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-contrast: more) {
  :root { --muted: #3E4048; --line: hsl(225 14% 11% / .3); --i-muted: #D2DEDF; }
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.cu-word { background-image: linear-gradient(100deg, var(--cu-45) 0%, var(--cu-gl) 30%, var(--cu-hi) 48%, var(--cu-gl) 62%, var(--cu-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cu-text); }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .6; }
.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
@media (min-width: 768px) { .wrap { width: min(1120px, 100% - 48px); } }
@media (min-width: 1100px) { .wrap { width: min(1120px, 100% - 64px); } }

/* Knoepfe: Kupfer nur fuer die eine Aktion */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 1rem/1 var(--font); text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn-cu { color: #1B120C; background: linear-gradient(180deg, var(--cu-hi), var(--cu-gl) 45%, var(--cu-me) 100%); box-shadow: inset 0 1px 0 hsl(20 100% 92% / .7), 0 8px 24px -12px hsl(22 70% 40% / .55); }
.btn-cu:hover { transform: translateY(-1px); }
.btn-ghost { color: inherit; box-shadow: inset 0 0 0 1px currentColor; background: transparent; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--cu-text); outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Kopfzeile: Glas erscheint erst beim Scrollen */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); --g: 0; color: var(--text); transition: color .25s var(--ease);
  background: rgb(var(--nav-rgb) / calc(var(--g) * .72));
  -webkit-backdrop-filter: blur(calc(var(--g) * 20px)) saturate(calc(100% + var(--g) * 40%)); backdrop-filter: blur(calc(var(--g) * 20px)) saturate(calc(100% + var(--g) * 40%));
  box-shadow: inset 0 -1px 0 hsl(225 14% 11% / calc(var(--g) * .08)); }
.nav.dark { color: var(--i-text); background: rgb(var(--dark-rgb) / calc(var(--g) * .62)); box-shadow: inset 0 -1px 0 hsl(0 0% 100% / calc(var(--g) * .08)); }
@media (prefers-reduced-transparency: reduce) { .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--nav-rgb) / var(--g)); } .nav.dark { background: rgb(var(--dark-rgb) / var(--g)); } }
.nav-in { height: var(--navh); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; min-height: 44px; align-items: center; }
.logo b { font: 400 1.6rem/1 var(--serif); font-style: italic; letter-spacing: -.01em; }
.logo span { font-size: .8125rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.nav-links { display: none; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: .9375rem; font-weight: 500; text-decoration: none; opacity: .82; }
.nav-links a:hover { opacity: 1; }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
@media (min-width: 980px) { body:not(.mit-tropf) .nav-links { display: flex; } }
/* Mit Tropfen-Leiste (body.mit-tropf) bleibt die Kopfzeile ohne Reiterleiste, der Rest steht im Menue */

/* Kapitel */
.ch { position: relative; height: var(--len, 220vh); }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* 1 Einstieg: Foto waechst aus der Karte zum Vollbild */
#intro { --len: 180vh; } /* Chris 25.10.2026: der Start soll schneller losgehen */
#intro .pin { background: var(--bg); }
.hero-title { position: absolute; left: 0; right: 0; top: calc(var(--navh) + env(safe-area-inset-top, 0px) + 4vh); text-align: center; padding: 0 16px; display: grid; justify-items: center; gap: 12px; }
.hero-title h1 { font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cu-text); }
.hero-title .big { font-family: var(--serif); font-size: clamp(3.4rem, 12.5vw, 10rem); line-height: .92; letter-spacing: -.02em; }
.hero-title .big span { display: inline-block; }
.hero-shot { position: absolute; inset: 0; clip-path: inset(var(--t, 46%) var(--s, 5vw) var(--b, 5vh) var(--s, 5vw) round var(--r, 28px)); will-change: clip-path; }
.hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translateY(var(--y, 0vh)) scale(var(--k, 1.16)); will-change: transform; }
.hero-shot .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, hsl(210 14% 8% / .75) 0%, hsl(210 14% 8% / .35) 22%, hsl(210 14% 8% / .05) 42%, hsl(210 14% 8% / .2) 62%, hsl(210 14% 8% / .82) 100%); }
.hero-shot .hero-title { color: var(--i-text); }
.hero-shot .hero-title h1 { color: var(--cu-hi); }
.hero-sub { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 24px; padding: 0 16px; text-align: center; color: var(--i-text); }
.hero-sub p { font-size: clamp(1.0625rem, 2.4vw, 1.375rem); font-weight: 500; max-width: 30ch; }
.load-in { animation: rise .9s var(--ease) both; }
.load-in.d2 { animation-delay: .12s; } .load-in.d3 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.cue { position: absolute; left: 50%; bottom: 2.4vh; transform: translateX(-50%); font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* 2 Vertrauen */
.trust { padding: 96px 0 64px; }
.trust-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .trust-row { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.stat { background: var(--surface); border-radius: 28px; padding: 32px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.stat .n { font-family: var(--serif); font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: .95; color: var(--text); font-variant-numeric: tabular-nums; }
.stat .n small { font-size: .45em; color: var(--cu-text); margin-left: 6px; font-family: var(--font); font-weight: 600; vertical-align: .9em; }
.stat .l { color: var(--muted); font-weight: 500; }
.stars { display: inline-flex; gap: 4px; color: var(--cu-deep); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }

/* 3 Der Abend: dunkle Petrol-Insel */
#abend { --len: 495vh; }
#abend .pin { background: var(--island); color: var(--i-text); }
.shots { position: absolute; inset: 0; }
.shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity, transform; }
/* Hochkant liegt das Gesicht sonst unter dem Text (Ja., Anstossen.): das Foto rueckt als Band unter den Text, oben weich eingeblendet */
@media (max-width: 899px) { .shots img[data-mobil="unten"] { top: auto; height: min(58%, calc(100% - 23.75rem)); object-position: 50% var(--mobil-y, 0%) !important; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); } }
.shots::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, hsl(210 14% 8% / .7) 0%, hsl(210 14% 8% / .15) 32%, hsl(210 14% 8% / .5) 62%, hsl(210 14% 8% / .96) 100%); }
@media (min-width: 900px) { .shots::after { background: linear-gradient(90deg, hsl(210 14% 8% / .94) 0%, hsl(210 14% 8% / .6) 38%, hsl(210 14% 8% / .05) 70%), linear-gradient(0deg, hsl(210 14% 8% / .9) 0%, transparent 38%); } }
.abend-copy { position: absolute; left: 0; right: 0; top: calc(var(--navh) + env(safe-area-inset-top, 0px) + 24px); }
.abend-copy .eyebrow { color: var(--cu); }
.phases { position: relative; margin-top: 16px; min-height: 13.5rem; }
.phase { position: absolute; inset: 0 auto auto 0; max-width: 34rem; opacity: 0; transform: translateY(16px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.phase.vis { opacity: 1; transform: none; }
.phase .when { font-size: .9375rem; font-weight: 600; color: var(--cu-hi); font-variant-numeric: tabular-nums; }
.phase h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 8vw, 6.25rem); line-height: .95; letter-spacing: -.02em; margin: 4px 0 12px; }
.phase p { color: var(--i-muted); font-size: 1.0625rem; max-width: 30rem; }
.phase .btn { margin-top: 16px; color: var(--i-text); }
.curve { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.curve svg { width: 100%; height: auto; overflow: visible; display: block; }
.curve .base { fill: none; stroke: hsl(0 0% 100% / .16); stroke-width: 2; vector-effect: non-scaling-stroke; }
.curve .live { fill: none; stroke: url(#cuLine); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curve .bars rect { fill: hsl(22 70% 70% / .14); }
.curve .head { fill: var(--cu-hi); }
.curve .halo { fill: hsl(22 80% 70% / .25); }
.ticks { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: 12px; }
@media (max-width: 700px) { .tick { visibility: hidden; text-align: center !important; white-space: nowrap; } .tick.on { visibility: visible; } }
.tick { font-size: .8125rem; font-weight: 600; color: var(--i-muted); letter-spacing: .04em; transition: color .25s var(--ease); }
.tick.on { color: var(--cu); }
.tick:nth-child(n+2) { text-align: center; } .tick:last-child { text-align: right; }

/* 4 Hinter dem Pult */
.about { padding: 96px 0; }
.about-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.about-pics { position: relative; padding-bottom: 18%; }
.about-pics .main { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.about-pics .main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-pics .sub { position: absolute; right: -4%; bottom: 0; width: 56%; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 8px var(--bg); aspect-ratio: 3 / 2; }
.about-pics .sub img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: grid; gap: 24px; }
.about-copy h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.02em; }
.about-copy .who { font-weight: 600; color: var(--petrol); margin-top: -12px; }
.about-copy .txt { color: var(--muted); max-width: 40rem; }
.quote-chip { display: inline-flex; gap: 12px; align-items: flex-start; background: var(--surface); border-radius: 20px; padding: 16px 20px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; max-width: 34rem; }
.quote-chip i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 12px; background: hsl(22 70% 55% / .14); color: var(--cu-text); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--text); text-decoration: none; }
.lnk svg { stroke: var(--cu-text) !important; }
.lnk svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); }
.lnk:hover svg { transform: translateX(4px); }

/* 5 Stimmen */
#stimmen { --len: 220vh; background: var(--bg2); }
#stimmen .pin { display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-top: var(--navh); }
.st-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.st-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.02em; }
.st-meta { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.track { display: flex; gap: 16px; padding-left: max(16px, calc((100vw - 1120px) / 2)); will-change: transform; }
.card { flex: 0 0 min(460px, 84vw); align-self: flex-start; background: var(--surface); border-radius: 28px; padding: 32px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 16px; }
.card .qm { font-family: var(--serif); font-size: 4rem; line-height: .6; height: 28px; color: var(--cu-deep); }
.card blockquote { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text); }
.card cite { font-style: normal; font-weight: 700; color: var(--petrol); margin-top: auto; }
@media (min-width: 900px) and (max-height: 860px) { .card { padding: 24px; gap: 12px; } #stimmen .pin { gap: 24px; } }
@media (max-width: 899px) {
  #stimmen { height: auto; } #stimmen .pin { position: static; height: auto; overflow: visible; padding: 96px 0 64px; }
  .track { flex-direction: column; padding: 0 16px; transform: none !important; } .card { flex: none; width: 100%; }
}

/* 6 Technik und Add-ons */
.tech { padding: 96px 0; }
.tech-band { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 8; min-height: 320px; }
.tech-band img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.tech-band .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, hsl(210 14% 8% / .85) 0%, transparent 60%); }
.tech-band .cap { position: absolute; left: 32px; right: 32px; bottom: 32px; color: var(--i-text); display: grid; gap: 8px; }
.tech-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: .98; letter-spacing: -.02em; }
.tech-band .cap .eyebrow { color: var(--cu-hi); }
@media (max-width: 600px) { .tech-band { aspect-ratio: 4 / 5; } .tech-band .cap { left: 20px; right: 20px; bottom: 24px; } }
.tech-txt { max-width: 40rem; color: var(--muted); margin: 32px 0 48px; }
.addons { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .addons { grid-template-columns: repeat(4, 1fr); } }
.addon { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; min-height: 196px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.addon:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px hsl(22 65% 55% / .55); }
.addon .no { font-family: var(--serif); font-size: 2.25rem; line-height: 1; }
.addon h3 { font-size: 1.25rem; }
.addon p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.addon .lnk { margin-top: auto; min-height: 24px; }

/* 7 Regionen */
.regions { padding: 32px 0 96px; }
.reg-head { display: grid; gap: 12px; margin-bottom: 32px; }
.reg-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.02em; }
.reg-head p { color: var(--muted); max-width: 36rem; }
.reg-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reg-grid { grid-template-columns: repeat(4, 1fr); } }
.reg { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 20px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 600; transition: background .2s var(--ease), color .2s var(--ease); }
.reg svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--cu-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.reg:hover svg { transform: translateX(4px); }
.reg.lead { background: var(--island); color: #F3EEE6; box-shadow: inset 0 0 0 1px hsl(22 65% 60% / .35); }
.reg.lead svg { stroke: var(--cu-hi); }
@media (min-width: 1000px) { .reg.lead { grid-column: span 2; } }

/* 8 Firmen, Sie-Form, eigene Flaeche */
.biz { padding: 0 0 96px; }
.biz-card { background: var(--island); color: var(--i-text); border-radius: 28px; padding: 48px 32px; display: grid; gap: 24px; }
@media (min-width: 900px) { .biz-card { grid-template-columns: 1.2fr 1fr; padding: 64px; gap: 48px; align-items: end; } }
.biz-card .eyebrow { color: var(--cu); }
.biz-card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; margin-top: 12px; }
.biz-card p { color: var(--i-muted); }
.biz-card .btn { color: var(--i-text); justify-self: start; }
.firms { font-size: .9375rem; color: var(--i-muted); border-top: 1px solid var(--i-line); padding-top: 24px; grid-column: 1 / -1; }
.firms b { color: var(--i-text); font-weight: 600; }

/* 9 Endkarte */
#ende { --len: 170vh; }
#ende .pin { background: var(--island); color: var(--i-text); display: grid; place-items: center; text-align: center; }
.end-in { display: grid; justify-items: center; gap: 24px; padding: 0 16px; max-width: 46rem; position: relative; z-index: 1; }
.end-in .eyebrow { color: var(--cu); }
.end-in h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 10vw, 8rem); line-height: .92; letter-spacing: -.02em; }
.end-in p { color: var(--i-muted); }
.end-in .tel { font-weight: 600; color: var(--i-text); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.end-wave { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: .5; }
.end-wave svg { width: 100%; height: 40vh; }
.end-wave path { fill: none; stroke: url(#cuLine); stroke-width: 2; vector-effect: non-scaling-stroke; }

footer { background: var(--bg2); padding: 48px 0 calc(112px + env(safe-area-inset-bottom, 0px)); font-size: .9375rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
footer a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { footer { padding-bottom: 48px; } }

/* Mitlaufender Anfrageknopf auf dem Telefon, unteres Drittel */
.dock { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; justify-content: center; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.dock.on { opacity: 1; transform: none; pointer-events: auto; }
.dock .btn { width: 100%; max-width: 420px; min-height: 52px; }
@media (min-width: 900px) { .dock { display: none; } }

/* Einblenden beim Erreichen */
[data-view] { opacity: 0; transform: translateY(32px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
[data-view].vis { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ch { height: auto !important; } .pin { position: relative; height: auto; min-height: 100svh; }
  .load-in { animation: fade .3s both; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  [data-view] { transform: none; transition: opacity .3s; }
  .phase { position: relative; opacity: 1; transform: none; margin-bottom: 32px; } .phases { min-height: 0; }
  .shots img:first-child { opacity: 1; }
  .hero-shot { clip-path: none; } .hero-shot img { transform: none; }
  #intro .pin > .hero-title, .cue { display: none; }
  .curve, .end-wave { display: none; }
  .abend-copy { position: relative; padding: 120px 0 64px; }
  .end-in { padding: 120px 16px; }
}

/* Kupferlinie unter Ueberschriften, waechst beim Erreichen */
.rule { display: block; width: 72px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cu-45), var(--cu-gl) 45%, var(--cu-hi) 75%, var(--cu)); transform-origin: 0 50%; transform: scaleX(0); transition: transform .4s var(--ease) .1s; }
.rule.vis { transform: scaleX(1); }
.center .rule { margin: 0 auto; transform-origin: 50% 50%; }
.reg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(180deg, var(--cu-hi), var(--cu-me)); flex: 0 0 auto; }
.reg span { display: inline-flex; align-items: center; gap: 12px; }

/* Schalter hell und dunkel */
.nav-right { display: flex; align-items: center; gap: 8px; }
.mode { min-width: 52px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.mode .trk { position: relative; width: 52px; height: 30px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; opacity: .9; }
.mode .knob { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #1B120C;
  background: linear-gradient(180deg, var(--cu-hi), var(--cu-gl) 45%, var(--cu-me)); transition: transform .2s var(--ease); }
.mode[aria-checked="true"] .knob { transform: translateX(22px); }
.mode svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode .moon { display: none; } .mode[aria-checked="true"] .moon { display: block; } .mode[aria-checked="true"] .sun { display: none; }
.mode:focus-visible { outline: 2px solid var(--cu-text); outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .rule { transform: none; transition: none; } }

/* Fotocredit mit Link zum Fotografen, gesetzt von tools/credits.py */
.credit { position: absolute; right: 8px; bottom: 8px; z-index: 3; min-height: 44px; min-width: 44px; display: inline-flex; align-items: flex-end; justify-content: flex-end; padding: 4px; text-decoration: none; }
.credit span { padding: 4px 10px; border-radius: 8px; background: hsl(210 14% 8% / .62); color: #F3EEE6; font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.credit:hover span { background: hsl(210 14% 8% / .85); }
@media (prefers-reduced-transparency: reduce) { .credit span { background: hsl(210 14% 8%); } }
.credits-line { margin-top: 16px; font-size: .8125rem; color: var(--muted); }
.credits-line a { min-height: 0; display: inline; text-decoration: underline; text-decoration-color: var(--cu-text); text-underline-offset: 3px; }

/* Kupferschrift auf hellem Grund dunkler, damit grosse Zeilen 3 zu 1 halten */
:root:not([data-theme="dark"]) .cu-word { background-image: linear-gradient(100deg, #8A4420 0%, #B5602F 35%, #C8794A 50%, #B5602F 65%, #8A4420 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cu-word { background-image: linear-gradient(100deg, var(--cu-45) 0%, var(--cu-gl) 30%, var(--cu-hi) 48%, var(--cu-gl) 62%, var(--cu-deep) 100%); } }
.hero-shot .cu-word, .island .cu-word, .cta-end .cu-word, #abend .cu-word { background-image: linear-gradient(100deg, var(--cu-45) 0%, var(--cu-gl) 30%, var(--cu-hi) 48%, var(--cu-gl) 62%, var(--cu-deep) 100%); }
.credit span { background: hsl(210 14% 8% / .78); }

/* Menue auf dem Telefon: Knopf in der Kopfzeile, Blatt mit allen Bereichen */
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; }
@media (min-width: 980px) { body:not(.mit-tropf) .menu-btn { display: none; } }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 420px) { .nav .btn-cu { padding: 0 14px; } .logo span { display: none; } }
.sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.sheet.open { display: block; }
.sheet .bg { position: absolute; inset: 0; background: hsl(210 14% 8% / .45); }
.sheet .panel { position: absolute; left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); border-radius: 28px; padding: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 64px -24px hsl(210 30% 5% / .6); display: grid; gap: 4px; animation: sheetin .25s var(--ease) both; }
@keyframes sheetin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.sheet .panel a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.sheet .panel a:hover { background: var(--bg2); }
.sheet .panel .btn-cu { justify-content: center; margin-top: 8px; }
.sheet .close { justify-self: end; }
@media (prefers-reduced-motion: reduce) { .sheet .panel { animation: none; } }

/* Fusszeile mit Linkspalten, gesetzt von tools/fusszeile.py */
footer { padding-top: 64px; }
.fuss { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .fuss { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fuss { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cu-text); margin-bottom: 12px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fuss a { color: var(--text); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; font-weight: 500; }
.fuss a:hover { color: var(--cu-text); }
@media (min-width: 1000px) { .fuss > div:first-child ul { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
footer .fuss { display: grid; align-items: start; justify-content: stretch; }
footer .credits-line { display: block; }
footer .credits-line a { display: inline; }

[hidden] { display: none !important; }
.stat .s { color: var(--muted); font-size: .9375rem; line-height: 1.5; }

#shotCredit { top: calc(var(--navh) + 8px); bottom: auto; z-index: 4; }

/* Kundenstimmen zum Aufklappen, gesetzt von assets/site.js */
.rv-hl { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; color: var(--text); margin: 0; }
.rv-full { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--ease), opacity .3s var(--ease), margin .4s var(--ease); margin-top: 0; }
.rv-full > div { overflow: hidden; color: var(--muted); }
.rv.open .rv-full { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.rv-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin-top: 4px; border: 0; border-radius: 999px; background: transparent; color: var(--cu-text); font: 600 .9375rem/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px currentColor; }
.rv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s var(--ease); }
.rv-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.island .rv-hl, .cta-end .rv-hl { color: var(--i-text); }
@media (prefers-reduced-motion: reduce) { .rv-full, .rv-btn svg { transition: none; } }

.abend-lead { color: var(--i-muted); font-size: .9375rem; max-width: 30rem; margin-top: 8px; }

@media (max-width: 700px) { .hero-shot img { object-position: 50% 30%; } }

/* Unterlaengen (g, y) bei der Kupferschrift nicht abschneiden */
.cu-word { display: inline-block; padding: 0 .08em .16em 0; margin-bottom: -.16em; }

.cta-end .fb-touch, #ende .fb-touch { color: var(--i-text); }

/* Musiknote statt Punkt auf der Energiekurve */
.curve-box { position: relative; }
.curve .note { position: absolute; left: 0; top: 83%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, hsl(22 80% 70% / .35), transparent 70%); pointer-events: none; }
.curve .note svg { width: 22px; height: 22px; fill: none; stroke: var(--cu-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px hsl(22 90% 65% / .6)); }
.stat .l a, .st-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--cu-text); text-underline-offset: 3px; }

/* ---------- Tropfen-Leiste (Chris 25.10.2026, Prototyp in _prototyp/navigation) ----------
   Die Kugel gleitet nicht, die Leiste fliesst wie Wasser um sie herum. Ebene 1 (Filter #tropf-goo) haelt Leiste,
   Mulde und Schweif in Leistenfarbe, ein Ring um die Kugel wird ausgeschnitten (der feine Spalt). Ebene 2 ist die Kupferkugel. */
/* Getoentes Glas (Chris 25.10.2026): dunkle Toenung, dahinter verschwimmt die Seite, oben eine feine Lichtkante */
:root { --t-bar: #0C0F12; --t-glas: .74; --t-text: #C3C8CD; }
:root[data-theme="dark"] { --t-bar: #07090B; --t-glas: .7; --t-text: #B4BAC0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-bar: #07090B; --t-glas: .7; --t-text: #B4BAC0; } }
body.mit-tropf { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.tropf { --w: min(560px, calc(100vw - 24px)); --h: 64px; --k: 52px; --lift: -22px;
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: var(--w); height: var(--h); transform: translateX(-50%); touch-action: none; transition: transform .5s var(--ease), opacity .35s var(--ease); user-select: none; -webkit-user-select: none; }
.tropf-glas { position: absolute; inset: 0; border-radius: 22px; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); pointer-events: none; }
.tropf-goo { opacity: var(--t-glas); --mx: -100px; --my: -100px; --mr: 0px; position: absolute; inset: -40px -10px -10px; filter: url(#tropf-goo); pointer-events: none;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), transparent var(--mr), #000 calc(var(--mr) + 1px)); mask: radial-gradient(circle at var(--mx) var(--my), transparent var(--mr), #000 calc(var(--mr) + 1px)); }
.tropf-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: var(--h); border-radius: 22px; background: var(--t-bar); }
.tropf-geist { position: absolute; left: 2px; bottom: calc(10px + (var(--h) - var(--k)) / 2 - 8px); width: calc(var(--k) + 16px); height: calc(var(--k) + 16px); border-radius: 50%; background: var(--t-bar); will-change: transform; }
.tropf-schweif { position: absolute; left: 10px; bottom: calc(10px + (var(--h) - var(--k) * .7) / 2); width: calc(var(--k) * .7); height: calc(var(--k) * .7); border-radius: 50%; background: var(--t-bar); opacity: 0; transition: opacity .25s; will-change: transform; }
.tropf-licht { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(180deg, hsl(0 0% 100% / .07), transparent 45%); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .16), inset 0 0 0 1px hsl(0 0% 100% / .06), 0 18px 40px -18px hsl(0 0% 0% / .55); pointer-events: none; }
@media (prefers-reduced-transparency: reduce) { .tropf-glas { -webkit-backdrop-filter: none; backdrop-filter: none; } .tropf-goo { opacity: 1; } }
.tropf-kugel { position: absolute; left: 0; top: calc((var(--h) - var(--k)) / 2); width: var(--k); height: var(--k); border-radius: 50%; z-index: 2; display: grid; place-items: center; color: #1B120C; cursor: grab; transform-origin: 50% 60%;
  background: linear-gradient(180deg, var(--cu-hi), var(--cu-gl) 45%, var(--cu-me)); box-shadow: inset 0 1px 0 hsl(20 100% 94% / .8), 0 10px 24px -8px hsl(22 70% 40% / .7); will-change: transform; transition: opacity .25s; }
.tropf-kugel:active { cursor: grabbing; }
.tropf-kugel svg, .tropf a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tropf.ohne .tropf-kugel, .tropf.ohne .tropf-geist { opacity: 0; }
.tropf.weg { transform: translate(-50%, calc(100% + 48px)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tropf { transition: opacity .2s; } .tropf.weg { transform: translateX(-50%); } }
.tropf ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); z-index: 1; }
.tropf a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 12px; height: 100%; min-width: 44px; text-decoration: none; color: var(--t-text); font: 600 .6875rem/1 var(--font); letter-spacing: .02em; border-radius: 16px; transition: color .3s; }
.tropf a svg { transition: opacity .2s, transform .3s; }
.tropf a span { transition: transform .35s var(--ease); }
.tropf a[aria-current="page"] { color: var(--cu-hi); }
.tropf a[aria-current="page"] svg { opacity: 0; transform: scale(.6); }
.tropf a[aria-current="page"] span { transform: translateY(8px); }
.tropf a:focus-visible { outline: 2px solid var(--cu-gl); outline-offset: -4px; }
/* Tropfen mit sieben Zielen: auf dem Handy kleinere Kugel und Schrift, damit jedes Ziel 44 px breit bleibt */
@media (max-width: 480px) { .tropf { --k: 44px; } .tropf a { font-size: .625rem; letter-spacing: 0; } .tropf a span { white-space: nowrap; } .tropf-kugel svg, .tropf a svg { width: 20px; height: 20px; } }
@media (max-width: 359px) { .tropf a { font-size: .5625rem; } }
@media print { .tropf { display: none; } }
@media (max-width: 979px) { body.mit-tropf .nav-right .btn { display: none; } }
/* Platz fuer die Tropfen-Leiste (25.10.2026): Leiste und Kugel reichen bis 92 px ueber den unteren Rand.
   Knopf und Fotocredit im Seitenkopf sitzen darueber, das Verhalten der Leiste bleibt gleich */
@media (max-width: 1023px) {
  body.mit-tropf .hero-shot .credit, body.mit-tropf .phero-shot .credit { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.mit-tropf .hero-sub { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
  body.mit-tropf .phero-copy { bottom: calc(148px + var(--b, 0vh) + env(safe-area-inset-bottom, 0px)); }
}
body.mit-tropf .dock { display: none !important; }