/* Startseite unterhalb des Heros. Neuaufbau 02.10.2026 nach dem Taste-Skill (design-taste-frontend).
   Design Read: Startseite eines lokalen Tattoo-Studios (Redesign, Marke bleibt) für Leute aus dem Raum Paderborn,
   dunkle, rohe Plakat-Sprache; natives CSS + Big Shoulders Display/Geist + Phosphor-Icons.
   Regler: DESIGN_VARIANCE 7 · MOTION_INTENSITY 5 · VISUAL_DENSITY 4.
   Festgelegt: ein Akzent (Zinnoberrot, Sterne bleiben Google-Gelb wie im Hero), Radius 0 überall, nur dunkles Theme
   (Marke „Nachtschicht“), keine Eyebrows, keine Nummern-Kacheln, kein Glow, kein Scroll-Listener am Fenster.
   Jede Bewegung hat einen Zweck und fällt bei prefers-reduced-motion weg.
   Umbruch: ≤1024 px (iPad) und ≤767 px (Handy) je Sektion ausdrücklich. */

/* ---------- Grundgerüst ---------- */
/* Leistung (04.10., User: „Startseite beim Desktop schneller“): Abschnitte unterhalb des ersten Bildschirms baut der Browser erst, wenn sie
   in die Nähe kommen (Seitenaufbau gemessen 158 ms → unter 50 ms). Gemerkte Höhe verhindert Springen der Scrollleiste. */
main > section.s:not(.hero):not(.s-intro), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.s { position: relative; padding: clamp(84px, 10vw, 152px) 0; }
.s .wrap { position: relative; z-index: 1; }
.s .ico { width: 1.15em; height: 1.15em; flex: none; }
.s-h2 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.005em;
  font-size: clamp(2.5rem, 5.4vw, 4.9rem); margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: 17ch; text-wrap: balance; }
.s-h2-unter { display: block; font-size: .46em; font-weight: 800; line-height: 1.05; color: var(--muted); margin-top: .3em; }
.s p { color: #cfcbc3; }
.s strong { color: var(--text); font-weight: 600; }
.s-lead p { font-size: clamp(1.06rem, 1.2vw, 1.18rem); line-height: 1.65; max-width: 62ch; margin: 0 0 1em; }
.s-lead p:last-child { margin-bottom: 0; }
/* Fließtext-Links (aus Markdown, ohne Klasse) */
.s :is(p, li, dd) > a:not([class]), .s :is(p, li) > strong > a:not([class]) { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s var(--ease); }
.s :is(p, li, dd) > a:not([class]):hover { color: var(--accent); }
.s-weiter { display: flex; gap: 10px; align-items: baseline; margin: 1.6rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--muted) !important; }
.s-weiter .ico { color: var(--accent); transform: translateY(.2em); }
.s .btn .ico { width: 1.3em; height: 1.3em; margin-right: 10px; }
.stm-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.stm-link .ico { color: var(--accent); transition: transform .25s var(--ease); }
.stm-link:hover .ico { transform: translate(2px, -2px); }
.s [data-reveal] { transition-delay: calc(var(--i, 0) * 90ms) !important; }

/* ---------- 0 Hero „Gestochen“: Nadel sticht das Wappen als Dotwork, Arm davor, 3D-Pen folgt der Nadel ---------- */
.hero-dot { align-items: flex-end; padding: calc(var(--header-h) + 32px) 0 clamp(48px, 9vh, 104px); }
.held-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; touch-action: pan-y; }
/* Arm ganz im Bild (User 03.10.: „mehr sichtbar, alles vom Arm mehr rein“): rechte Fotokante schließt mit dem Fenster bzw. Inhaltsrand ab */
.held-arm { position: absolute; z-index: -1; top: 0; bottom: 0; right: max(0px, calc((100vw - var(--max)) / 2 - 2vw)); width: min(64vw, 1000px);
  display: flex; justify-content: flex-end; pointer-events: none; }
.held-arm img { height: 104%; width: auto; max-width: none; margin-top: calc(var(--header-h) - 16px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 30%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 30%, #000 92%, transparent 100%); mask-composite: intersect; }
.held-inhalt { position: relative; z-index: 1; pointer-events: none; }
.held-inhalt a { pointer-events: auto; }
.held-titel { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .8; letter-spacing: -.012em; font-size: clamp(4.4rem, 11vw, 12rem); margin: 0; }
.held-titel .z { display: block; overflow: hidden; padding: .07em 0 .05em; margin: -.07em 0 -.01em; }   /* Maske höher als die Zeile: runde Buchstaben (O) ragen über die Versalhöhe, sonst abgeschnitten (User 04.10.); Zeilenabstand bleibt */
.held-titel .z > span { display: block; }
.js .held-titel .z > [data-intro] { transform: translateY(118%); opacity: 1; }
.js .is-loaded .held-titel .z > [data-intro] { transform: none; transition: transform 1.1s var(--ease); }
.js .is-loaded .held-titel .z:nth-child(2) > [data-intro] { transition-delay: .1s; }
.held-unter { display: block; font-size: clamp(1.3rem, 2.3vw, 2.1rem); font-weight: 800; line-height: 1; color: var(--muted); margin-top: .55em; letter-spacing: .01em; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-dot .btn .ico, .s-schluss .btn .ico { width: 1.3em; height: 1.3em; margin-right: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .js .held-arm img { opacity: 0; transform: translateX(3%) scale(1.03); }
  .js .is-loaded .held-arm img { opacity: 1; transform: none; transition: opacity 1.6s var(--ease) .2s, transform 2s var(--ease) .2s; }
}
@media (max-width: 899px) {
  /* Foto rechts an den Rand (sonst ist es zwischen 600 und 900 px schmaler als sein Bereich und zeigt rechts eine harte Kante, User 03.10.) */
  .held-arm { right: -10vw; width: 112vw; bottom: auto; height: 74%; justify-content: flex-end; }
  .held-arm img { height: 100%; margin-top: 40px;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%), linear-gradient(90deg, #000 0%, #000 82%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(0deg, transparent 0%, #000 45%), linear-gradient(90deg, #000 0%, #000 82%, transparent 100%); mask-composite: intersect; }
  .held-titel { font-size: 18.5vw; }
}
@media (max-width: 767px) { .held-knoepfe .btn { width: 100%; } }
/* 900 bis 1199 px: Titel etwas kleiner, damit er neben dem Arm Platz hat */
@media (min-width: 900px) and (max-width: 1199px) { .held-titel { font-size: 9vw; } }

/* Intro-Band: Einleitung + drei Fakten (Google live) */
.s-intro { padding: clamp(56px, 7vw, 104px) 0; border-bottom: 1px solid var(--line); }
.intro-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px clamp(40px, 7vw, 128px); align-items: center; }
.s .intro-absatz p { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.5; color: var(--text); margin: 0; max-width: 46ch; }
.intro-fakten { border-top: 1px solid var(--line-strong); }
.intro-fakten li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.intro-fakten strong { color: var(--text); font-weight: 600; }
.intro-google a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.intro-google a:hover strong { color: var(--accent); }
.intro-google .g-logo { width: 30px; height: 30px; }
.intro-g-text { display: grid; gap: 3px; min-width: 0; }
.intro-g-zeile { display: flex; align-items: center; gap: 10px; }
.intro-g-anzahl { white-space: nowrap; }
.intro-google .intro-g-pfeil { color: var(--accent); }
.intro-google .sterne { gap: 2px; flex: none; }
.intro-google .stern { width: 16px; height: 16px; filter: none; }
@media (max-width: 900px) { .intro-raster { grid-template-columns: 1fr; } }

/* Schluss: Anfrage, die Maschine sticht das Wappen noch einmal klein */
.s-schluss { background: var(--bg-2); border-top: 1px solid var(--line); }
.schluss-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px clamp(32px, 6vw, 120px); align-items: center; }
.s-schluss .s-h2 { font-size: clamp(3rem, 6.6vw, 6.6rem); max-width: 11ch; }
.s .schluss-lead { margin: 20px 0 0; font-size: 1.12rem; }
.schluss-dots { width: 100%; aspect-ratio: 3 / 4; max-height: 600px; }
@media (max-width: 900px) { .schluss-raster { grid-template-columns: 1fr; } .schluss-dots { max-height: 400px; order: -1; } }

/* 3D-Pen (src/maschine.js): feste Ebene über dem Inhalt, unter Kopfzeile und Menü, nimmt keine Klicks an */
.maschine { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; opacity: 0; }

/* ---------- 1 Haltung: Plakat, Wappen rechts, „08/15“ knallt rein ---------- */
.s-hal { overflow: hidden; }
.hal-grid { --hal-gap: clamp(32px, 5vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(220px, 23vw, 320px);
  grid-template-areas: "titel titel crest" "text text crest" "zitat zitat zitat"; grid-template-rows: auto 1fr auto; column-gap: var(--hal-gap); align-items: start; }
.hal-titel { grid-area: titel; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.01em;
  font-size: clamp(3.3rem, 8vw, 8.4rem); margin: 0 0 clamp(36px, 4.4vw, 64px); }
.hal-z1 { display: block; }
.hal-z2 { display: inline-flex; align-items: center; gap: .2em; margin-top: .04em; }
.hal-statt { font-size: .32em; font-weight: 800; color: var(--accent); letter-spacing: .02em; transform: translateY(-.1em); }
.hal-durch { position: relative; display: inline-block; padding: 0 .04em; }
.hal-durch::after { content: ""; position: absolute; left: -5%; right: -5%; top: 47%; height: .12em; background: var(--accent);
  transform: rotate(-8deg); transform-origin: left center; box-shadow: 0 0 0 .025em var(--bg); }
.hal-platz { grid-area: crest; min-height: clamp(380px, 34vw, 520px); display: grid; place-items: center; }
.hal-ersatz { width: 70%; max-width: 230px; }
.maschine-an .hal-ersatz { display: none; }
.hal-text { grid-area: text; display: grid; grid-template-columns: 1fr 1fr; gap: var(--hal-gap); }
.hal-text p { font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.65; color: #d6d3cc; margin: 0; max-width: 42ch; }
.hal-zitat { grid-area: zitat; margin: clamp(48px, 5.5vw, 88px) 0 0; padding-left: clamp(18px, 1.6vw, 26px); border-left: 3px solid var(--accent); }
.hal-einl { margin: 0 0 .8rem; font-size: 1rem; color: var(--muted) !important; }
.hal-zitat blockquote { margin: 0; }
.hal-zitat blockquote p { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; color: var(--text);
  font-size: clamp(2.4rem, 5.6vw, 5.8rem); line-height: 1; text-wrap: wrap; }
.hal-rot { color: var(--accent); }
.hal-zitat figcaption { margin-top: 1rem; font-size: 1rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .hal-z2:not(.punch) .hal-statt, .js .hal-z2:not(.punch) .hal-durch { opacity: 0; }
  .js .hal-z2:not(.punch) .hal-durch::after { transform: rotate(-8deg) scaleX(0); }
  .hal-z2.punch .hal-statt { animation: halStatt .35s cubic-bezier(.2, .8, .3, 1) both; }
  .hal-z2.punch .hal-durch { animation: halPunch .55s cubic-bezier(.18, 1.4, .4, 1) .15s both; }
  .hal-z2.punch .hal-durch::after { animation: halStrich .2s cubic-bezier(.9, 0, .4, 1) .72s both; }
  .hal-z2.punch { animation: halWackeln .34s ease-out .9s both; }
}
@keyframes halStatt { from { opacity: 0; transform: translate(-.6em, -.1em); } to { opacity: 1; transform: translate(0, -.1em); } }
@keyframes halPunch { 0% { opacity: 0; transform: scale(2.6) rotate(-4deg); filter: blur(6px); } 55% { opacity: 1; transform: scale(.9) rotate(1deg); filter: blur(0); } 100% { opacity: 1; transform: none; } }
@keyframes halStrich { from { transform: rotate(-8deg) scaleX(0); } to { transform: rotate(-8deg) scaleX(1); } }
@keyframes halWackeln { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px) rotate(-.6deg); } 40% { transform: translate(5px, -2px) rotate(.5deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
@media (max-width: 1024px) {
  .hal-grid { grid-template-columns: 190px minmax(0, 1fr); grid-template-areas: "titel titel" "text text" "crest zitat"; grid-template-rows: auto; column-gap: 40px; }
  .hal-platz, .hal-zitat { align-self: center; margin-top: clamp(48px, 7vw, 72px); }
  .hal-platz { min-height: 260px; }
  .hal-text { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
  .hal-zitat blockquote p { font-size: clamp(1.6rem, 4.4vw, 2.6rem); }
}
@media (max-width: 767px) {
  .hal-titel { font-size: 13vw; margin-bottom: 28px; }
  .hal-text { grid-template-columns: 1fr; gap: 1.1em; }
  .hal-grid { grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; }
  .hal-platz, .hal-zitat { margin-top: 44px; }
  .hal-platz { min-height: 190px; }
  .hal-zitat { padding-left: 14px; }
  .hal-zitat blockquote p { font-size: 6.4vw; }
}

/* ---------- 2 Cover-Up: „Halten statt Schieben“ (Neubau 03.10.2026 nach Taste-Skill) ----------
   Kopf gestapelt (Titel, ein Absatz, Bedienhinweis), darunter ein asymmetrisches Paar (5:7, bündig) mit je einem Schieber,
   darunter ein Band mit zweitem Absatz, Fakten und Knopf. Bewegung mit Zweck: einmaliger Hinweis-Schwenk des Schiebers
   beim ersten Sichtkontakt (zeigt die Bedienung). Bei reduzierter Bewegung: kein Schwenk. */
.s-cvr { background: var(--bg-2); }
.cvr-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 860px); column-gap: clamp(32px, 5vw, 96px); margin-bottom: clamp(36px, 4.4vw, 64px); }
.cvr-kopf { min-width: 0; }
/* Freier Platz rechts neben dem Kopf (User 04.10.: „mach hier rechts wieder den Pen wo Platz ist“): fester Pen-Platz wie bei Haltung,
   der Pen steht und dreht sich nur um die eigene Achse; ohne Pen bleibt der Platz leer */
.cvr-platz { min-height: clamp(280px, 24vw, 360px); align-self: stretch; order: -1; }   /* Pen links, Text rechts (User 04.10.) */
.cvr-titel { margin: 0 0 clamp(20px, 2.4vw, 32px); font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .84; }
.cvr-gross { display: block; font-size: clamp(3.8rem, 9vw, 8.6rem); letter-spacing: -.012em; }
.cvr-unter { display: block; margin-top: .3em; font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 800; color: var(--muted); line-height: 1; }
.cvr-rot { color: var(--accent); }
.s .cvr-lead p { margin: 0; color: var(--text); font-size: clamp(1.14rem, 1.45vw, 1.32rem); line-height: 1.6; max-width: 58ch; }
.s .cvr-tipp { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: .95rem; color: var(--muted); }
.cvr-tipp .ico { color: var(--accent); width: 22px; height: 22px; }
.cvr-paar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.cvr-fall { margin: 0; min-width: 0; }
.cvr-bild { position: relative; display: block; width: 100%; background: var(--bg-3); overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cvr-fall-0 .cvr-bild { aspect-ratio: 5 / 7; }   /* 5:7 bei 5fr ist so hoch wie 1:1 bei 7fr: Bilder oben und unten bündig */
.cvr-fall-1 .cvr-bild { aspect-ratio: 1 / 1; }
.cvr-nachher, .cvr-vorher { position: absolute; inset: 0; display: block; }
.cvr-bild picture, .cvr-bild img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cvr-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cvr-griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.cvr-griff span { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); transition: transform .25s var(--ease); }
.cvr-griff .ico { width: 24px; height: 24px; }
.cvr-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cvr-bild:has(.cvr-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.cvr-bild:has(.cvr-range:active) .cvr-griff span { transform: translate(-50%, -50%) scale(1.08); }
.cvr-cap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.cvr-cap p { margin: 0; font-size: .94rem; line-height: 1.45; color: var(--muted); transition: color .3s var(--ease), opacity .3s var(--ease); }
.cvr-cap strong { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; line-height: 1.05; color: inherit; margin-bottom: 2px; }
.cvr-cap .cvr-n { text-align: right; }
.cvr-cap .cvr-v strong { color: var(--text); }
.cvr-cap .cvr-n strong { color: var(--accent); }
.cvr-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px clamp(32px, 6vw, 112px); align-items: end;
  margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
.cvr-band-text p { margin: 0; font-size: 1.04rem; line-height: 1.7; max-width: 62ch; }
.cvr-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.6rem 0 0; max-width: 640px; }
.cvr-fakten div { padding: 16px 16px 0 0; min-width: 0; }
.cvr-fakten div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.cvr-fakten dt { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1; color: var(--text); }
.cvr-fakten dd { margin: 6px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.cvr-band-cta { display: grid; gap: 14px; justify-items: start; }
.cvr-band-cta .s-weiter { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
}
@media (max-width: 900px) {
  .cvr-band { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 1024px) {
  .cvr-oben { grid-template-columns: clamp(150px, 22vw, 220px) minmax(0, 1fr); column-gap: 32px; }
  .cvr-platz { min-height: 240px; }
}
@media (max-width: 767px) {
  .cvr-oben { display: block; }
  .cvr-platz { display: none; }
  .cvr-gross { font-size: 19vw; }
  .cvr-paar { grid-template-columns: 1fr; gap: 44px; }
  .cvr-fall-0 .cvr-bild { aspect-ratio: 4 / 5; }
  .cvr-fakten { grid-template-columns: 1fr; }
  .cvr-fakten div, .cvr-fakten div + div { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-left: 0; }
  .cvr-fakten div + div { border-top: 1px solid var(--line); }
  .cvr-fakten dt { min-width: 46%; font-size: 1.15rem; }
  .cvr-fakten dd { margin: 0; }
  .cvr-band-cta { justify-items: stretch; }
  .cvr-band-cta .btn { width: 100%; }
}

/* ---------- 3 Stile: Galerie-Fahrt (Desktop, CSS scroll-getrieben) / Wischleiste (Handy, Firefox) ----------
   Zweck: die Stile ziehen wie ein Portfolio am Auge vorbei; die 3D-Maschine zieht unten die rote Fortschrittslinie. */
.s-sti { overflow: clip; }
.sti-kopf { width: 100%; max-width: var(--max); margin: 0 auto clamp(28px, 3.4vw, 44px); padding-inline: var(--gutter); }
.sti-kopf .s-lead p { max-width: 52ch; }
.sti-kopf .s-weiter { margin-top: 1.1rem; }
.sti-pfeile { display: flex; gap: 8px; margin-top: 24px; }
.sti-btn { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s; }
.sti-btn .ico { width: 22px; height: 22px; }
.sti-btn:hover:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); }
.sti-btn:active:not(:disabled) { transform: translateY(1px); }
.sti-btn:disabled { opacity: .3; cursor: default; }
.sti-rail { --rand: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  list-style: none; margin: 0; padding: 0 var(--gutter) 4px var(--rand); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 25vw, 360px);
  gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; overscroll-behavior-x: contain; }
.sti-rail::-webkit-scrollbar { display: none; }
.sti-karte { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.sti-karte > picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-3); }
.sti-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.sti-karte:hover img { transform: scale(1.04); }
.sti-info { padding-top: 18px; display: grid; gap: 6px; }
.sti-info h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 2vw, 1.95rem); line-height: .95; margin: 0;
  display: flex; align-items: center; gap: 8px; }
.sti-info h3 a { color: var(--text); text-decoration: none; }
.sti-info h3 a::after { content: ""; position: absolute; inset: 0; }
.sti-info h3 a:focus-visible { outline: 0; }
.sti-karte:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.sti-info h3 .ico { color: var(--accent); width: .78em; height: .78em; transition: transform .25s var(--ease); }
.sti-karte:hover h3 .ico { transform: translate(2px, -2px); }
.sti-info p { margin: 0; font-size: .98rem; line-height: 1.5; }
.sti-info .sti-wer { color: var(--muted); font-size: .9rem; }
.sti-mosaik { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 3 / 4; overflow: hidden; }
.sti-mosaik picture { display: block; height: 100%; overflow: hidden; }
.sti-rest .sti-info h3 { font-size: clamp(1.25rem, 1.5vw, 1.45rem); line-height: 1.1; }
.sti-fortschritt { display: none; }
@media (max-width: 767px) {
  .sti-pfeile { display: none; }
  .sti-rail { grid-auto-columns: 78vw; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .s-sti { --kh: clamp(300px, 52vh, 560px); height: 420vh; padding: 0; overflow: visible; view-timeline-name: --sti; view-timeline-axis: block; view-timeline-inset: 0; }
    .sti-buehne { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
    .sti-spur { display: flex; align-items: center; gap: clamp(32px, 3.6vw, 72px); width: max-content; padding: calc(var(--header-h) + 8px) var(--gutter) 120px;
      animation: stiFahrt linear both; animation-timeline: --sti; animation-range: contain 0% contain 100%; }
    .sti-kopf { width: min(80vw, 470px); flex: none; margin: 0; padding: 0; }
    .sti-pfeile { display: none; }
    .sti-rail { display: flex; align-items: center; overflow: visible; padding: 0; gap: clamp(28px, 3.2vw, 60px); scroll-snap-type: none; }
    .sti-karte { flex: none; width: calc(var(--kh) * .75); }
    .sti-karte:nth-child(odd) { transform: translateY(-3.5vh); }
    .sti-karte:nth-child(even) { transform: translateY(4vh); }
    .sti-fortschritt { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 2px; background: var(--line); }
    .sti-fortschritt span { position: absolute; inset: 0; background: var(--accent); transform-origin: left center;
      animation: stiBalken linear both; animation-timeline: --sti; animation-range: contain 0% contain 100%; }
  }
}
@keyframes stiFahrt { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
@keyframes stiBalken { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 4 Tätowierer: Künstlerliste, statisch (Neubau 03.10.2026 nach Taste-Skill, keine Animation) ----------
   Je Artist eine Zeile über die volle Breite, Porträt links (36 %), Text rechts; Zeilen durch eine Linie getrennt. Handy: Porträt
   quadratisch oben (Kopf im Bild), Text darunter. */
.s-kl { background: var(--bg); border-top: 1px solid var(--line); }
.kl-liste { margin-top: clamp(28px, 3.6vw, 52px); border-top: 1px solid var(--line-strong); }
.kl-zeile { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: clamp(28px, 5vw, 88px); align-items: start;
  padding: clamp(32px, 4.4vw, 64px) 0; border-bottom: 1px solid var(--line); }
.kl-bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.kl-bild picture { display: block; height: 100%; }
.kl-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.kl-text { min-width: 0; padding-top: 4px; }
.kl-name { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 6.6vw, 6.4rem); line-height: .84; letter-spacing: -.01em; }
.kl-name a { color: var(--text); text-decoration: none; }
.kl-name a:hover { color: var(--accent); }
.s .kl-wer { margin: 12px 0 0; font-size: 1.05rem; color: var(--muted); }
.s .kl-fokus { margin: 22px 0 0; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.05; color: var(--accent); }
.kl-fokus span { color: var(--muted); }
.kl-daten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 0; border-top: 1px solid var(--line-strong); max-width: 640px; }
.kl-daten div { padding: 16px 16px 0 0; min-width: 0; }
.kl-daten div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.kl-daten dt { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1; color: var(--text); }
.kl-daten dd { margin: 6px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.4; }
.kl-bio { margin-top: 26px; }
.kl-bio p { margin: 0; font-size: 1.04rem; line-height: 1.7; max-width: 62ch; }
.kl-links { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin: 24px 0 0; }
.kl-mehr { display: inline-flex; gap: 8px; align-items: center; color: var(--text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.kl-mehr .ico { color: var(--accent); }
.kl-mehr:hover { color: var(--accent); }
.kl-insta { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); text-decoration: none; font-size: .95rem; }
.kl-insta:hover { color: var(--text); }
.kl-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 40px; margin-top: clamp(28px, 3vw, 40px); }
.kl-fuss p { margin: 0; }
.kl-fuss .s-weiter { margin: 0; }
@media (max-width: 1024px) {
  .kl-zeile { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 32px; }
  .kl-daten { grid-template-columns: 1fr; }
  .kl-daten div, .kl-daten div + div { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-left: 0; }
  .kl-daten div + div { border-top: 1px solid var(--line); }
  .kl-daten dt { min-width: 42%; }
  .kl-daten dd { margin: 0; }
}
@media (max-width: 767px) {
  .kl-zeile { grid-template-columns: 1fr; gap: 24px; }
  .kl-bild { aspect-ratio: 1 / 1; }
  .kl-name { font-size: 15vw; }
  .kl-fuss { display: block; }
  .kl-fuss .s-weiter { margin-top: 1rem; }
}

/* ---------- 5 Preise: Hauptfeld + 2x2 + Neukunden-Band, ohne Fotos (User 02.10.) ---------- */
.s-pre { background: var(--bg-2); }
.pre-grid { list-style: none; margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
.pre-zelle { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: clamp(210px, 18vw, 270px);
  padding: clamp(22px, 2.4vw, 36px); background: var(--bg-3); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.pre-gross { grid-row: span 2; background: #181a19; }
.pre-rauch.smoke { z-index: -1; }
.s .pre-was { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.35; color: var(--text); }
.s .pre-gross .pre-was { font-size: clamp(1.15rem, 1.4vw, 1.3rem); }
.pre-zusatz { font-weight: 400; color: var(--muted); }
.s .pre-preis { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 4vw, 4rem); line-height: .9; color: var(--text); white-space: nowrap; }
.s .pre-gross .pre-preis { font-size: clamp(4rem, 6.6vw, 7rem); }
.pre-ab { font-size: .42em; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.pre-neu { grid-column: 1 / -1; min-height: 0; background: var(--accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 20px clamp(28px, 4vw, 64px); padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px); }
.s .pre-neu p, .s .pre-neu strong { color: var(--accent-ink); }
.s .pre-neu-zahl { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: .85; white-space: nowrap; }
.s .pre-text { margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; max-width: 44ch; }
.btn-tinte { background: var(--bg); color: var(--text); }
.btn-tinte:hover { background: #262928; }
.pre-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 48px; margin-top: clamp(28px, 3vw, 40px); }
.pre-fuss p { margin: 0; max-width: 62ch; }
.pre-fuss .s-weiter { margin: 0; }
@media (max-width: 1024px) {
  .pre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pre-gross { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
  .pre-zelle:not(.pre-gross):not(.pre-neu) { min-height: 180px; }
  .pre-neu { grid-template-columns: auto minmax(0, 1fr); }
  .pre-neu .btn { grid-column: 1 / -1; justify-self: start; }
  .pre-fuss { display: block; }
  .pre-fuss .s-weiter { margin-top: 1rem; }
}
@media (max-width: 767px) {
  .pre-grid { grid-template-columns: 1fr; }
  .pre-zelle:not(.pre-gross):not(.pre-neu) { min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
  .s .pre-zelle:not(.pre-gross) .pre-preis { font-size: 2.3rem; }
  .pre-gross { min-height: 250px; }
  .s .pre-gross .pre-preis { font-size: 17vw; }
  .pre-neu { display: block; padding: 26px 20px; }
  .s .pre-neu-zahl { font-size: 4rem; margin-bottom: 14px; }
  .pre-neu .btn { width: 100%; margin-top: 20px; }
}

/* Preise in Bewegung (User 02.10.: „mach das cooler mit animationen“). Zweck je Effekt:
   Felder füllen sich gestaffelt von unten wie Tinte (Reihenfolge), Preise laufen als Zahlenwalzen auf ihren Wert
   (der Preis ist die Botschaft), Neukunden-Band wischt von links herein, im Hauptfeld steigt der Rauch aus dem Hero,
   mit Maus folgt ein weicher Lichtkegel dem Zeiger (Rückmeldung). Bei reduzierter Bewegung alles statisch. */
.s .pre-preis, .s .pre-neu-zahl { font-variant-numeric: tabular-nums; }
.walze { position: relative; display: inline-block; line-height: 1; clip-path: inset(0 -.12em); }
.walze-ziel { visibility: hidden; }
.walze-band { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transform: translateY(0); }
.walze-band span { display: block; height: 1em; line-height: 1; }
.pre-grid.an .walze-band { transform: translateY(calc(var(--z) * -1em));
  transition: transform 1.7s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 120ms + 380ms + var(--w) * 90ms); }
@media (prefers-reduced-motion: no-preference) {
  .js .pre-grid .pre-zelle { transition: clip-path 1.05s cubic-bezier(.7, 0, .2, 1) calc(var(--i) * 120ms); }
  .js .pre-grid:not(.an) .pre-zelle { clip-path: inset(100% 0 0 0); }
  .js .pre-grid:not(.an) .pre-neu { clip-path: inset(0 100% 0 0); }
  .js .pre-grid.an .pre-zelle { clip-path: inset(0 0 0 0); }
  .js .pre-grid .pre-zelle > :is(p, .btn) { transition: opacity .7s var(--ease) calc(var(--i) * 120ms + 320ms), transform .9s var(--ease) calc(var(--i) * 120ms + 320ms); }
  .js .pre-grid:not(.an) .pre-zelle > :is(p, .btn) { opacity: 0; transform: translateY(18px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pre-zelle::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(235, 232, 225, .09), transparent 65%); }
  .pre-neu::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 244, 236, .22), transparent 65%); }
  .pre-zelle:hover::after { opacity: 1; }
  .js .pre-grid.an .pre-zelle .pre-preis { transition: opacity .7s var(--ease), transform .5s var(--ease); }
  .js .pre-grid.an .pre-zelle:hover .pre-preis { transform: translateX(8px); }
}

/* ---------- 6 Ablauf: Nadel-Spur (User 02.10.: „mach hier coole animationen rein“) ----------
   Zweck: zeigt die Reihenfolge. Eine Tattoo-Nadel fährt die Dotwork-Linie von Schritt zu Schritt ab (surrt beim Fahren wie
   eine laufende Maschine) und zieht die rote Linie nach; erreicht sie einen Schritt, springt das Icon-Feld an (Tinten-Ring),
   die Überschrift wird von links „gestochen“, der Text blendet ein. Lage der Spur misst start.js (Desktop waagerecht,
   Handy senkrecht, iPad 2x2 ohne Spur). Ohne JS oder bei reduzierter Bewegung: alles sofort sichtbar. */
.abl-bahn { position: relative; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 1025px) { .abl-bahn { margin-top: clamp(140px, 12vw, 180px); } }
.abl-nadel { visibility: hidden !important; }
/* Handy (senkrechte Linie, User 04.10.: „der Pen kommt so verzögert“): die Linie wächst mit dem Scrollen, ihre Spitze steht bei 60 % der
   Fensterhöhe; der 3D-Pen hält die Spitze und zieht die Linie mit. Gesteuert über die Zeitleiste der Spur (start.js setzt .abl-scroll und --spurh). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .abl-bahn.abl-scroll .abl-spur { view-timeline: --ablspur block; }
    .abl-bahn.abl-scroll[data-achse="y"] .abl-fuell { transition: none; animation: ablWachsen linear both; animation-timeline: --ablspur;
      animation-range: cover 40vh cover calc(40vh + var(--spurh, 400px)); }
    /* Desktop: Linie läuft, während die Bahn von 80 % bis 35 % der Fensterhöhe wandert (passt zu den Schritt-Schwellen in start.js) */
    .abl-bahn.abl-scroll[data-achse="x"] .abl-fuell { transition: none; animation: ablWachsenX linear both; animation-timeline: --ablspur;
      animation-range: cover 20vh cover 65vh; }
  }
}
@keyframes ablWachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ablWachsenX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.maschine-an .abl-bahn[data-achse="y"] { margin-top: 156px; }
/* Scroll-Modus: Text der Schritte sofort lesbar, nur das Icon springt an, wenn die Spitze es erreicht */
.js .abl-bahn.abl-scroll:not(.fertig) .abl-schritt:not(.an) h3 { clip-path: none; }
.js .abl-bahn.abl-scroll:not(.fertig) .abl-schritt:not(.an) p { opacity: 1; transform: none; }   /* Platz über dem ersten Schritt: der Pen steht dort, ohne in die Überschrift zu ragen */   /* keine 2D-Nadel mehr (User 04.10.): Element bleibt nur als Takt („surrt“) für den 3D-Pen */
.abl { --g: clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.abl-schritt { position: relative; z-index: 1; min-width: 0; }
.abl-ico { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 24px;
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .55s cubic-bezier(.3, 1.7, .5, 1); }
.abl-ico .ico { width: 26px; height: 26px; }
.abl-ico::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.abl-schritt h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: .95; margin: 0 0 .6rem; }
.abl-schritt p { margin: 0; font-size: .98rem; line-height: 1.6; }
.abl-spur { display: none; position: absolute; z-index: 0; pointer-events: none; }
.abl-bahn[data-achse] .abl-spur { display: block; }
.abl-bahn[data-achse="x"] .abl-spur { height: 8px; margin-top: -4px; background: radial-gradient(circle, rgba(235, 232, 225, .38) 1.2px, transparent 1.8px) 0 50% / 9px 8px repeat-x; }
.abl-bahn[data-achse="y"] .abl-spur { width: 8px; margin-left: -4px; background: radial-gradient(circle, rgba(235, 232, 225, .38) 1.2px, transparent 1.8px) 50% 0 / 8px 9px repeat-y; }
.abl-fuell { position: absolute; background: var(--accent); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.abl-bahn[data-achse="x"] .abl-fuell { left: 0; right: 0; top: 3px; height: 2px; transform-origin: left center; transform: scaleX(var(--anteil, 1)); }
.abl-bahn[data-achse="y"] .abl-fuell { top: 0; bottom: 0; left: 3px; width: 2px; transform-origin: center top; transform: scaleY(var(--anteil, 1)); }
.abl-nadel { position: absolute; left: 0; top: 0; width: 34px; height: 34px; color: var(--text); opacity: 0; transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .4s var(--ease); }
.abl-nadel .ico { width: 34px; height: 34px; display: block; }
.abl-bahn[data-achse="x"] .abl-nadel { transform: translate(calc(var(--weg, 0px) - 4px), -30px); }
.abl-bahn[data-achse="y"] .abl-nadel { transform: translate(-30px, calc(var(--weg, 0px) - 4px)) scaleX(-1); }
.abl-bahn.laeuft .abl-nadel { opacity: 1; }
.abl-nadel.surrt .ico { animation: ablSurren .06s steps(2) infinite; }
@keyframes ablSurren { 0% { transform: translate(1px, -1px); } 100% { transform: translate(-1px, 1px); } }
@keyframes ablTinte { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.abl-fuss { margin-top: clamp(40px, 4.4vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.abl-fuss p { margin: 0; }
.s .abl-hinweis { color: var(--text); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .js .abl-bahn:not(.fertig) .abl-schritt:not(.an) .abl-ico { background: var(--bg); border-color: var(--line-strong); color: var(--muted); transform: scale(.8); }
  .js .abl-schritt.an .abl-ico::after { animation: ablTinte .75s ease-out; }
  .js .abl-bahn:not(.fertig) .abl-schritt:not(.an) h3 { clip-path: inset(0 100% 0 0); }
  .js .abl-schritt h3 { transition: clip-path .65s cubic-bezier(.65, 0, .35, 1) .08s; }
  .js .abl-bahn:not(.fertig) .abl-schritt:not(.an) p { opacity: .14; transform: translateY(10px); }
  .js .abl-schritt p { transition: opacity .7s var(--ease) .25s, transform .8s var(--ease) .25s; }
  .abl-schritt.an:hover .abl-ico { transform: translateY(-4px); }
}
@media (max-width: 1024px) {
  .abl { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}
@media (max-width: 767px) {
  .abl { grid-template-columns: 1fr; row-gap: 36px; padding-left: 76px; }
  .abl-ico { position: absolute; left: -76px; top: -6px; margin: 0; }
}

/* ---------- 7 Stimmen: Google-Wert + Bewertungen ungekürzt (04.10., User: „volle Bewertungen, mehr Google-Trust-Icons“) ----------
   Links haftet der Google-Wert (Logo, Schnitt, Sterne, Anzahl, Link), rechts die Bewertungen als Karten in zwei Spalten (Masonry über
   CSS-Spalten). Jede Karte: Initial, Name, „Google-Bewertung, Monat Jahr“, Google-Logo, Sterne, voller Text, Link zur Original-Bewertung.
   Google-Gelb bei Sternen und die Google-Logofarben sind Markenzeichen, kein zweiter Akzent. Radius 0 auch beim Initial. */
.s-stm { border-top: 1px solid var(--line); }
.stm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: clamp(24px, 3vw, 44px); }
.stm-wert { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 28px); padding: clamp(24px, 2.6vw, 36px); background: var(--bg-2); min-width: 0;
  border-top: 3px solid #4285f4; }
.s .stm-quelle { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-weight: 600; color: var(--text); }
.stm-quelle .g-logo { width: 30px; height: 30px; }
.s .stm-zahl { font-family: var(--f-display); font-weight: 900; font-size: clamp(5rem, 8.6vw, 7.8rem); line-height: .8; margin: 0 0 16px; color: var(--text); }
.stm-wert .sterne { gap: 4px; }
.stm-wert .stern { width: 26px; height: 26px; filter: none; }
.s .stm-anzahl { margin: 14px 0 22px; color: var(--muted); }
.stm-wand { grid-column: 5 / span 8; columns: 2; column-gap: 3px; min-width: 0; }
.stm-karte { break-inside: avoid; margin: 0 0 3px; padding: clamp(20px, 2.2vw, 30px); background: var(--bg-2); display: flex; flex-direction: column; gap: 14px;
  transition: background-color .3s var(--ease); }
.stm-karte:hover { background: #1a1c1b; }
.stm-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.stm-initial { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line-strong);
  font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; color: var(--text); }
.stm-wer { display: grid; gap: 2px; min-width: 0; }
.stm-wer strong { font-weight: 600; color: var(--text); font-size: 1rem; }
.stm-wer span { font-size: .85rem; color: var(--muted); }
.stm-kopf .g-logo { width: 22px; height: 22px; }
.stm-karte .sterne { gap: 2px; }
.stm-karte .stern { width: 17px; height: 17px; filter: none; }
.stm-karte blockquote { margin: 0; }
.s .stm-karte blockquote p { margin: 0; color: var(--text); font-size: 1.04rem; line-height: 1.62; overflow-wrap: anywhere; }
.s .stm-karte-gross blockquote p { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.08; }
.stm-original { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.stm-original .ico { width: 14px; height: 14px; }
.stm-original:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 1024px) {
  .stm-wert { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: center; margin-bottom: 3px; }
  .s .stm-quelle { grid-column: 1 / -1; }
  .s .stm-zahl { grid-row: span 3; margin: 0; }
  .s .stm-anzahl { margin: 8px 0 12px; }
  .stm-wert .stm-link { justify-self: start; }
  .stm-wand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .stm-wand { columns: 1; }
  .stm-wert { grid-template-columns: 1fr; padding: 22px; }
  .s .stm-zahl { grid-row: auto; margin-bottom: 14px; }
  .stm-wert .stm-link { font-size: .95rem; }
}

/* ---------- 8 Studio: Infotafel (04.10., User: „besser übersichtlicher für Desktop, iPad, iPhone“) ----------
   Titel; Infotafel aus drei Feldern (Ort mit Status heute, Parken/Bus, Route | Öffnungszeiten | Kontakt), auf dem iPad Ort oben über
   zwei Feldern, auf dem Handy untereinander in dieser Reihenfolge. Darunter Anfahrt: Karte mit sichtbarem Studiofoto neben dem Text
   (Handy: Text vor der Karte). Unten Umland: Text links, Links als Chips. */
.s-stu { background: var(--bg-2); }
.stu-tafel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3.6fr); gap: 3px; margin-top: clamp(8px, 1.4vw, 20px); }
.stu-feld { min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 32px); background: var(--bg-3); }
.stu-feld-ort { border-top: 3px solid var(--accent); justify-content: space-between; gap: 24px; }
.stu-ort-kopf, .stu-ort-fuss { display: grid; gap: 16px; }
.stu-adresse { font-style: normal; display: flex; gap: 14px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.04; }
.stu-adresse .ico { color: var(--accent); width: 28px; height: 28px; }
.s .stu-status { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.stu-status::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--muted); }   /* echter Zustand (offen/zu), kein Deko-Punkt */
.stu-status.offen::before { background: #34a853; }
.stu-wege { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.stu-wege li { display: flex; gap: 12px; align-items: center; font-size: .97rem; color: #d2cfc8; }
.stu-wege .ico { width: 20px; height: 20px; color: var(--muted); }
.stu-route { justify-self: start; }
.stu-route .ico { width: 1.1em; height: 1.1em; margin-left: 10px; }
.stu-h3 { display: flex; gap: 10px; align-items: center; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1; margin: 0; }
.stu-h3 .ico { color: var(--accent); }
.stu-zeiten { display: grid; gap: 2px; }
.stu-zeiten li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; margin-inline: -12px; }
.stu-zeiten span { font-size: .95rem; color: #d2cfc8; }
.stu-zeiten strong { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; line-height: 1; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.stu-zeiten .zu strong { color: var(--muted); }
.stu-zeiten li.heute { background: #2a2d2c; box-shadow: inset 3px 0 0 var(--accent); }
.stu-zeiten li.heute strong { color: var(--accent); }
.stu-heute { font-style: normal; margin-left: 8px; font-size: .74rem; font-weight: 600; color: var(--accent); }
.stu-kontakt { display: grid; gap: 2px; }
.stu-kontakt a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; margin-inline: -12px; color: var(--text); text-decoration: none; min-width: 0;
  transition: background-color .2s var(--ease); }
.stu-kontakt a:hover { background: #2a2d2c; }
.stu-kontakt a:active { transform: translateY(1px); }
.stu-kontakt .ico { color: var(--accent); width: 22px; height: 22px; }
.stu-kontakt span { min-width: 0; }
.stu-kontakt small { display: block; font-size: .78rem; color: var(--muted); }
.stu-kontakt b { display: block; font-weight: 500; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-anfahrt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: stretch; margin-top: clamp(48px, 5vw, 80px); }
.stu-text { align-self: center; padding-left: clamp(18px, 1.6vw, 26px); border-left: 3px solid var(--accent); }
.s .stu-text p { margin: 0; max-width: 46ch; font-size: clamp(1.1rem, 1.35vw, 1.28rem); line-height: 1.62; color: var(--text); }
/* Kartenfeld vor dem Laden: Punktraster (Dotwork-Anmutung, reines CSS), mittig Stecknadel, Hinweis und Knopf */
.stu-map.map { grid-area: auto; position: relative; min-height: clamp(320px, 28vw, 420px); overflow: hidden; display: grid; place-items: center;
  background-color: var(--bg-3); background-image: radial-gradient(rgba(235, 232, 225, .19) 1.3px, transparent 1.8px); background-size: 18px 18px; }
.stu-map.map::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, var(--bg-3) 82%); }
.stu-map .map-consent { position: relative; z-index: 1; max-width: 380px; padding: clamp(20px, 2.4vw, 32px); text-align: center; display: grid; justify-items: center; }
.stu-pin { width: 58px; height: 58px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); margin-bottom: 18px; }
.stu-pin .ico { width: 30px; height: 30px; }
.stu-map .map-title { font-size: 1.6rem; margin: 0 0 8px; }
.stu-map .map-consent p:not(.map-title) { font-size: .94rem; margin: 0; }
.stu-map .map-actions { margin-top: 18px; justify-content: center; }
.stu-orte { margin-top: clamp(40px, 4.4vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px clamp(28px, 4vw, 72px); align-items: center; }
.stu-orte-text p { margin: 0; max-width: 64ch; }
.stu-orte-links { display: flex; flex-wrap: wrap; gap: 8px; }
.stu-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); color: var(--text); text-decoration: none;
  font-size: .95rem; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.stu-chip .ico { width: 16px; height: 16px; color: var(--accent); transition: transform .25s var(--ease), color .2s var(--ease); }
.stu-chip:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.stu-chip:hover .ico { color: var(--bg); transform: translateX(3px); }
@media (max-width: 1024px) {
  .stu-tafel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stu-feld-ort { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px 40px; }
  .stu-ort-fuss .stu-wege { padding-top: 0; border-top: 0; }
  .stu-anfahrt { grid-template-columns: 1fr; }
  .s .stu-text p { max-width: 64ch; }
  .stu-orte { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .stu-tafel { grid-template-columns: 1fr; }
  .stu-feld-ort { grid-template-columns: 1fr; }
  .stu-ort-fuss .stu-wege { padding-top: 16px; border-top: 1px solid var(--line); }
  .stu-route { justify-self: stretch; }
  .stu-anfahrt { gap: 28px; margin-top: 40px; }
  .stu-map.map { min-height: 300px; }
  .s .stu-text p { font-size: 1.06rem; }
}

/* ---------- 9 Gutschein: Bild-Band ---------- */
.s-gut { padding-top: 0; }
.gut-band { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(520px, 50vw, 700px); display: flex; align-items: center; }
.gut-bild { position: absolute; top: 0; bottom: 0; right: 0; width: min(64%, 1000px); z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.gut-bild picture, .gut-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gut-band .wrap { width: 100%; }
.gut-text { max-width: 560px; padding: clamp(80px, 9vw, 128px) 0; }
.gut-text p { font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.65; max-width: 44ch; }
.gut-text .btn { margin-top: .8rem; }
.gut-pflege { padding-top: 28px; border-top: 1px solid var(--line); }
.gut-pflege p { margin: 0; max-width: 72ch; }
@media (max-width: 767px) {
  .gut-band { display: block; min-height: 0; }
  .gut-bild { position: relative; width: 100%; height: 120vw; max-height: 520px;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%); mask-image: linear-gradient(0deg, transparent 0, #000 40%); -webkit-mask-composite: source-over; mask-composite: add; }
  .gut-text { padding: 0 0 56px; margin-top: -64px; position: relative; }
  .gut-text .btn { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .gut-bild { width: 62%; }
  .gut-text { max-width: 50%; }
}

/* ---------- 10 FAQ ---------- */
.s-faq.faq { padding: clamp(84px, 10vw, 152px) 0; }
.s-faq .faq-title { max-width: 10ch; }

/* ---------- Bewegung reduziert ---------- */
@media (prefers-reduced-motion: reduce) {
  .sti-karte img { transition: none; }
  .sti-karte:hover img { transform: none; }
}