/* Unterseiten, Neubau 3 (04.10.2026): gebaut aus den Bausteinen der Startseite (start.css lädt vorher mit). User: „schau dir an, wie wir
   die Startseite schön designed haben, bei den Unterseiten ist alles so trocken, auch von den Buttons, und dieses Inhaltsverzeichnis sieht
   beschissen aus“. Hier steht nur, was die Startseite nicht hat (Präfix u-). Stand davor: website/design/vor-unterseiten-startstil-2026-10-04/.
   Regler wie die Startseite: DESIGN_VARIANCE 7 · MOTION_INTENSITY 6 · VISUAL_DENSITY 4. Ein Akzent, Radius 0, dunkles Theme.
   Umbruch: ≤1024 px (iPad), ≤900 px, ≤767 px (Handy). Jede Bewegung fällt bei prefers-reduced-motion weg. */

/* ---------- Titelblatt (05.10., User: „moderner, nicht so altmodisch“): Titel links, rechts eine scharfe Bildkarte mit versetztem
   Akzentrahmen statt eines auslaufenden Fotos; die Karte zoomt beim Wegscrollen leicht auf (CSS scroll-getrieben) ---------- */
.u-held { min-height: clamp(620px, 94vh, 940px); padding: calc(var(--header-h) + 36px) 0 clamp(56px, 8vh, 104px); align-items: center; }
.u-held .smoke-hero { opacity: .7; }
.u-held-raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 5vw, 96px); align-items: center; }
.u-held-inhalt { position: relative; z-index: 1; min-width: 0; }
.u-held .crumbs { margin-bottom: clamp(20px, 3vh, 36px); }
.u-held-karte { position: relative; justify-self: end; width: 100%; max-width: 520px; }
.u-held-karte::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--accent); pointer-events: none; }
.u-held-bild { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 150px); background: var(--bg-3); }
.u-held-bild picture, .u-held-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.u-held-person .u-held-bild img { object-position: 50% 16%; }
.u-held-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 15, 15, .55)); pointer-events: none; }
.u-held-wappen { justify-self: center; width: min(34vw, 420px); display: grid; place-items: center; pointer-events: none; }
.u-held-wappen img { width: 82%; height: auto; }
.u-h1 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.012em;
  font-size: clamp(3.2rem, 6.6vw, 7.6rem); margin: 0; text-wrap: balance; }
/* Wort für Wort aus einer Maske (wie „TATTOO PADERBORN“); Maske höher als die Zeile, damit runde Buchstaben nicht abgeschnitten werden */
.u-wort { display: inline-block; overflow: hidden; vertical-align: top; padding: .07em 0 .05em; margin: -.07em 0 -.05em; }
.u-wort > span { display: block; }
.u-h1 .u-held-unter { max-width: 30ch; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  .js .u-wort > span { transform: translateY(118%); }
  .js .is-loaded .u-wort > span { transform: none; transition: transform 1.1s var(--ease) calc(var(--i) * 70ms); }
  .js .u-held-bild img { transform: scale(1.12); }
  .js .is-loaded .u-held-bild img { transform: none; transition: transform 2.4s var(--ease); }
  .js .u-held-karte::before { transform: translate(-22px, -22px); opacity: 0; }
  .js .is-loaded .u-held-karte::before { transform: none; opacity: 1; transition: transform 1.4s var(--ease) .35s, opacity .8s var(--ease) .35s; }
  @supports (animation-timeline: view()) {
    .u-held-karte { animation: uKarteWeg linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes uKarteWeg { to { transform: translateY(-12%) scale(.94); opacity: .35; } }
@media (min-width: 900px) and (max-width: 1199px) { .u-h1 { font-size: 6.4vw; } }
@media (max-width: 899px) {
  .u-held { min-height: 0; align-items: flex-start; padding-top: calc(var(--header-h) + 20px); }
  .u-held-raster { grid-template-columns: 1fr; gap: 36px; }
  .u-held-karte { order: -1; justify-self: stretch; max-width: none; width: calc(100% - 16px); }
  .u-held-karte::before { inset: 14px -14px -14px 14px; }
  .u-held-bild { aspect-ratio: 5 / 4; max-height: 52svh; }
  .u-held-person .u-held-bild { aspect-ratio: 4 / 5; max-height: 60svh; }
  .u-held-wappen { order: -1; width: 52vw; max-width: 280px; }
  .u-h1 { font-size: 13vw; }
}

/* ---------- Laufband unter dem Titelblatt: die Stile des Studios, langsam durchlaufend (bei reduzierter Bewegung steht es) ---------- */
.u-laufband { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-2); padding: clamp(14px, 1.6vw, 22px) 0; }
.u-laufband-spur { display: flex; width: max-content; }
.u-laufband-spur > div { display: flex; align-items: center; flex: none; }
.u-band-wort { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; white-space: nowrap; color: var(--text); }
.u-band-rot { color: var(--accent); }
.u-band-punkt { flex: none; width: 10px; height: 10px; margin: 0 clamp(20px, 2.4vw, 40px); background: var(--line-strong); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .u-laufband-spur { animation: uLauf 70s linear infinite; }
  .u-laufband:hover .u-laufband-spur { animation-play-state: paused; }
}
@keyframes uLauf { to { transform: translateX(-50%); } }

/* Rechtstexte: ruhiger Kopf ohne Foto und Knöpfe */
.u-held-recht { min-height: 0; padding-bottom: clamp(28px, 4vw, 56px); }
.u-held-recht .u-h1 { font-size: clamp(2.2rem, 6vw, 5.4rem); max-width: none; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 899px) { .u-held-recht { min-height: 0; } .u-held-recht .u-h1 { font-size: 9vw; } }

/* ---------- Intro-Band: wie die Startseite; erster Absatz groß, weitere Absätze in Lesegröße ---------- */
.s .u-intro-text p + p, .s .u-intro-text p + ul { font-size: clamp(1.04rem, 1.15vw, 1.14rem); line-height: 1.65; color: #cfcbc3; margin-top: 1em; max-width: 62ch; }
.s .u-intro-text .u-byline { font-size: .92rem; color: var(--muted); margin: 0 0 18px; }
.s .u-intro-text .u-byline + p { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.5; color: var(--text); margin-top: 0; max-width: 46ch; }
.u-fakt-link { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.u-fakt-link .ico { color: var(--accent); width: 20px; height: 20px; }
.u-fakt-link:hover { color: var(--text); }
.u-intro-recht { padding: 0 0 clamp(16px, 2vw, 32px); }

/* ---------- Abschnitte: wechselnde Fläche, große Titel ---------- */
.u-flaeche { background: var(--bg-2); }
.u-s .s-h2 { max-width: 18ch; }
.u-s .s-h2-unter { max-width: 32ch; }
.u-s .hal-titel { font-size: clamp(3.3rem, 7vw, 7.4rem); }
.u-hal-text { --hal-gap: clamp(32px, 5vw, 96px); margin-top: clamp(4px, 1vw, 12px); }

/* Lesespalte */
.u-fluss { max-width: 66ch; }
.u-fluss > * { margin: 0; }
.u-fluss > * + * { margin-top: 1.05em; }
.s .u-fluss p { font-size: clamp(1.04rem, 1.15vw, 1.14rem); line-height: 1.68; }
.s .u-fluss .u-h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1;
  color: var(--text); margin-top: 1.7em; }
.u-fluss > .u-h3:first-child { margin-top: 0; }
.u-liste { list-style: none; padding: 0; display: grid; gap: 10px; }
.u-liste > li { position: relative; padding-left: 26px; line-height: 1.62; color: #cfcbc3; font-size: 1.04rem; }
.u-liste > li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; background: var(--accent); }
ol.u-liste { counter-reset: u-n; }
ol.u-liste > li { counter-increment: u-n; padding-left: 34px; }
ol.u-liste > li::before { content: counter(u-n); width: auto; height: auto; top: -.05em; background: none; font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; color: var(--accent); }
.u-pfeil { color: var(--accent); }
.s .u-knopf { margin-top: 1.7em; }
.u-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.u-weiter-label { color: var(--muted); margin-right: 6px; font-size: .98rem; }
.u-fluss > .u-weiter, .u-fluss > .s-weiter { margin-top: 1.5em; }
.u-block { margin-top: clamp(28px, 3vw, 44px); }
.u-block:first-child { margin-top: 0; }
.u-block + .u-fluss { margin-top: clamp(24px, 2.6vw, 36px); }
.u-offen { background: transparent; color: var(--accent); border: 1px dashed var(--accent); padding: 1px 6px; font-size: .92em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Felder (Liste mit fettem Anfang, Vergleich, Stile nach Artist): Kacheln wie die Infotafel der Startseite */
.u-felder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 3px; }
.u-feld { min-width: 0; padding: clamp(22px, 2.4vw, 32px); background: var(--bg-3); display: flex; flex-direction: column; gap: 12px; }
.u-feld:first-child { box-shadow: inset 0 3px 0 var(--accent); }
.s .u-feld-titel { margin: 0; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1; color: var(--text); }
.s .u-feld p { margin: 0; font-size: 1rem; line-height: 1.6; }
.u-feld .u-liste > li { font-size: 1rem; }
.u-feld-titel a { color: var(--text); text-decoration: none; }
.u-feld-titel a:hover { color: var(--accent); }
.u-artistfelder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.u-stilliste { list-style: none; margin: 0; padding: 0; }
.u-stilliste li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.u-stilliste strong { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.u-stilliste span { font-size: .95rem; color: var(--muted); }
.u-zuordnung { margin: 0; display: grid; gap: 3px; }
.u-zu { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 24px; padding: 18px 22px; background: var(--bg-3); }
.u-zu dt { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; color: var(--text); }
.u-zu dd { margin: 0; display: flex; gap: 12px; color: #d6d3cc; line-height: 1.55; }
.u-zu dd .ico { flex: none; color: var(--accent); width: 18px; height: 18px; margin-top: .2em; }
.u-tabelle { overflow-x: auto; }
.u-tabelle table { width: 100%; border-collapse: separate; border-spacing: 3px; margin-inline: -3px; }
.u-tabelle thead th { text-align: left; font-size: .86rem; font-weight: 500; color: var(--muted); padding: 0 18px 6px; vertical-align: bottom; }
.u-tabelle tbody th, .u-tabelle td { background: var(--bg-3); padding: 16px 18px; vertical-align: top; text-align: left; line-height: 1.5; }
.u-tabelle tbody th { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; color: var(--text); }
.u-tabelle td { color: var(--text); }
@media (max-width: 767px) {
  .u-zu { grid-template-columns: 1fr; }
  .u-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .u-tabelle table, .u-tabelle tbody, .u-tabelle tr, .u-tabelle th, .u-tabelle td { display: block; }
  .u-tabelle table { border-spacing: 0; margin: 0; }
  .u-tabelle tr { background: var(--bg-3); padding: 18px; margin-bottom: 3px; }
  .u-tabelle tbody th, .u-tabelle td { background: none; padding: 0; }
  .u-tabelle tbody th { margin-bottom: 10px; }
  .u-tabelle td + td { margin-top: 10px; }
  .u-tabelle td::before { content: attr(data-label); display: block; font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
}

/* Karten mit Foto (Orte, Ratgeber-Artikel): Stil-Karten der Startseite im Raster */
.u-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(16px, 1.6vw, 24px); }
.u-karten-artikel { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: clamp(28px, 3vw, 44px); }
.u-karte { scroll-snap-align: none; }
.u-karte .sti-info p { color: #cfcbc3; }

/* ---------- Ablauf (Startseite): so viele Spalten wie Schritte, ab 6 Schritten drei Spalten ohne Linie ---------- */
@media (min-width: 1025px) {
  .u-abl .abl { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .u-abl .abl.u-abl-viele { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
}
.u-ablauf .s-lead { margin-bottom: 8px; }
.u-abl-fuss { display: block; }

/* ---------- Preisfelder (Startseite): Aufteilung nach Anzahl ---------- */
@media (min-width: 1025px) {
  .u-pre-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .u-pre-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-pre-gross .pre-gross { grid-row: span var(--reihen); }
}
.u-pre-drei .pre-zelle, .u-pre-zwei .pre-zelle { min-height: clamp(170px, 14vw, 220px); }
.s .u-pre-info { display: block; margin-top: 6px; font-size: .92rem; }
.u-pre-fuss { display: block; }
.u-preise .s-lead { margin-bottom: 0; }

/* ---------- Infotafel, Karte ---------- */
.u-anfahrt-text { margin-bottom: clamp(32px, 3.6vw, 52px); }
.u-tafel-fuss { margin-top: clamp(28px, 3vw, 40px); }
.u-zeiten .s-h2 + .u-fluss { margin-bottom: clamp(28px, 3vw, 40px); }
.u-karte-s .stu-anfahrt { margin-top: 0; }
.s .u-karte-text .u-fluss p { font-size: clamp(1.06rem, 1.25vw, 1.2rem); max-width: 52ch; }

/* ---------- Stimmen ---------- */
.u-stimmen { display: grid; grid-template-columns: repeat(var(--sp, 1), minmax(0, 1fr)); gap: 3px; margin-top: clamp(28px, 3vw, 44px); columns: auto; }
.u-stimmen .stm-karte { margin: 0; }
.u-stimmen-1 { max-width: 720px; }
.u-stimmen-2 { --sp: 2; max-width: 1080px; }
.u-split-text .u-stimmen, .u-seitlich-text .u-stimmen { --sp: 1; }
.u-wand-eins { columns: 1; }
.u-stimmen-lead { margin-bottom: 8px; }
@media (max-width: 767px) { .u-stimmen-2 { --sp: 1; } }

/* ---------- Bild-Band (Querformat): Foto läuft weich in den Hintergrund aus, wie „Ein Tattoo verschenken“ ---------- */
.u-band-s { padding: 0; }
.u-band .gut-text { max-width: 580px; }
.s .u-band .u-fluss p { font-size: clamp(1.06rem, 1.25vw, 1.18rem); }
.u-band-links .gut-bild { right: auto; left: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.u-band-links .gut-text { margin-left: auto; }
@media (min-width: 768px) and (max-width: 1024px) { .u-band-links .gut-text { margin-left: 50%; } }
@media (max-width: 767px) {
  .u-band-links .gut-bild { left: auto;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%); mask-image: linear-gradient(0deg, transparent 0, #000 40%); }
  .u-band-links .gut-text { margin-left: 0; }
}

/* ---------- Bild + Text im Wechsel (Hochformat, Video, Schieber): das Medium haftet neben dem Text ---------- */
.u-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 104px); align-items: start; }
.u-split-rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.u-split-rechts .u-split-medium { order: 2; }
.u-split-medium { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: 3px; min-width: 0; }
.u-medium { margin: 0; overflow: hidden; background: var(--bg-3); max-height: calc(100dvh - var(--header-h) - 56px); }
.u-medium > picture, .u-medium > picture img, .u-medium > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.u-medium:has(.u-cvr) { max-height: none; background: none; overflow: visible; }
.u-cvr { margin: 0; }
.u-cvr .cvr-bild { aspect-ratio: 1500 / 1340; }   /* Eidechse → Rabe: beide Fotos im gleichen Querformat */
.u-split-zweit { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.u-split-zweit picture, .u-split-zweit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-split-text { min-width: 0; padding-top: clamp(0px, 2vw, 24px); align-self: center; }   /* kurzer Text steht mittig neben dem Bild, langer Text bestimmt die Höhe */
.u-split-text .u-felder { grid-template-columns: 1fr; }
.u-video { display: block; background: var(--bg-3); }
@media (max-width: 900px) {
  .u-split, .u-split-rechts { grid-template-columns: 1fr; }
  .u-split-medium { position: static; order: 0 !important; }
  .u-medium { max-height: 72vh; }
  .u-split-text { padding-top: 0; }
}

/* ---------- Text ohne Bild: Titel links haftend, Text rechts (wie die Fragen der Startseite) ---------- */
.u-seitlich { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 112px); align-items: start; }
.u-seitlich > :is(.s-h2, .hal-titel) { position: sticky; top: calc(var(--header-h) + 32px); margin: 0; }
.u-satz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 112px); align-items: center; }
.u-satz > .s-h2 { margin: 0; }
.s .u-satz-text p { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.5; color: var(--text); max-width: 40ch; }
@media (max-width: 900px) {
  .u-seitlich, .u-satz { grid-template-columns: 1fr; }
  .u-seitlich > :is(.s-h2, .hal-titel) { position: static; }
}

/* ---------- Fragen ---------- */
.u-fragen-hell { background: var(--bg); }
.u-fragen-vorab { margin-bottom: 24px; }
.u-fragen-fuss { margin-top: 28px; }
.u-fragen-fuss .u-fluss p { font-size: 1.02rem; }

/* ---------- Galerie: Mauerwerk mit Filtern ---------- */
.u-galerie-kopf { display: grid; gap: 18px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.u-galerie-kopf .s-h2 { margin: 0; }
.u-filterleiste { display: flex; flex-wrap: wrap; gap: 8px; }
.u-filter { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: inherit; font-size: .95rem; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.u-filter:hover { border-color: var(--text); }
.u-filter:active { transform: translateY(1px); }
.u-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.u-mauer { columns: 4; column-gap: 6px; }
.u-mauer .u-tile { break-inside: avoid; margin: 0 0 6px; aspect-ratio: auto; position: relative; }
.u-mauer .u-tile[hidden] { display: none; }
.u-mauer .tile-btn { display: block; width: 100%; height: auto; padding: 0; border: 0; background: var(--bg-3); cursor: zoom-in; overflow: hidden; }
.u-mauer .tile-btn picture, .u-mauer .tile-btn img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease); }
.u-mauer .tile-btn:hover img { transform: scale(1.04); }
.u-galerie-fuss { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 28px; }
.u-galerie-fuss .stu-chip .ico { width: 18px; height: 18px; }
@media (max-width: 1023px) { .u-mauer { columns: 3; } }
@media (max-width: 767px) {
  .u-mauer { columns: 2; column-gap: 4px; }
  .u-mauer .u-tile { margin-bottom: 4px; }
  .u-filterleiste { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .u-filterleiste::-webkit-scrollbar { display: none; }
  .u-filter { flex: none; }
  .u-galerie-fuss .btn { width: 100%; }
}

/* ---------- Quellen, Rechtstexte ---------- */
.u-quellen { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.u-quellen-h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; line-height: 1; margin: 0 0 14px; color: var(--muted); }
.s .u-quellen-text :is(p, li) { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.s .u-quellen-text :is(p, li) > a:not([class]) { color: var(--muted); overflow-wrap: anywhere; }
.u-rechtstext { padding-top: clamp(16px, 2vw, 32px); }
.u-recht { max-width: 780px; padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.u-recht:first-child { border-top: 0; padding-top: 0; }
.u-recht-h2 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; margin: 0 0 16px; }
.s .u-recht .u-fluss :is(p, li) { font-size: 1rem; }
.u-recht .u-fluss { overflow-wrap: anywhere; }

/* ---------- Einblenden beim Scrollen (CSS scroll-getrieben, ohne Scroll-Listener) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-s .s-h2, .u-s .hal-titel { animation: uAuf linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .u-feld, .u-karte, .u-zu { animation: uAuf linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
  }
}
@keyframes uAuf { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Lange Knopftexte aus den Texten der Seite („Foto vom alten Tattoo per WhatsApp schicken“): auf dem Handy dürfen große Knöpfe umbrechen
   (sonst ragen sie über den Rand), auf dem Desktop bleiben sie einzeilig */
@media (max-width: 767px) {
  .u-held .btn-lg, .u-schluss .btn-lg, .u-knopf .btn-lg { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
  .u-schluss .schluss-raster > * { min-width: 0; }
}

/* Ratgeber-Übersicht: ein einzelner Artikel als breite Karte (Foto neben großem Titel), im Wechsel links/rechts */
.u-karten-eins { grid-template-columns: 1fr; }
.u-karten-eins .sti-karte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(28px, 5vw, 88px); align-items: center; }
.u-karten-eins-rechts .sti-karte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.u-karten-eins-rechts .sti-karte > picture { order: 2; }
.u-karten-eins .sti-karte > picture { aspect-ratio: 4 / 3; }
.u-karten-eins .sti-info { padding-top: 0; gap: 14px; }
.u-karten-eins .sti-info h3 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: .92; }
.s .u-karten-eins .sti-info p { font-size: clamp(1.04rem, 1.2vw, 1.16rem); line-height: 1.65; max-width: 52ch; }
@media (max-width: 767px) {
  .u-karten-eins .sti-karte, .u-karten-eins-rechts .sti-karte { grid-template-columns: 1fr; }
  .u-karten-eins-rechts .sti-karte > picture { order: 0; }
  .u-karten-eins .sti-info { padding-top: 4px; }
}

/* Steckbriefe der Artists (Stile nach Artist, User 04.10.: „die Bilder von den Artists zu dem Steckbrief“): Porträt links wie in der
   Künstlerliste der Startseite, rechts Name, Rolle und Stile; Handy: Porträt oben */
.u-artistfelder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.u-feld.u-artistfeld { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(20px, 2.4vw, 36px); align-items: start; }
.u-artist-bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.u-artist-bild picture { display: block; height: 100%; }
.u-artist-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transition: transform .9s var(--ease); }
.u-artistfeld:hover .u-artist-bild img { transform: scale(1.03); }
.u-artist-text { min-width: 0; }
.s .u-artist-text .u-feld-titel { font-size: clamp(2rem, 3vw, 2.8rem); line-height: .9; }
.s .u-artist-wer { margin: 8px 0 14px; font-size: .98rem; color: var(--muted); }
@media (max-width: 600px) {
  .u-feld.u-artistfeld { grid-template-columns: 1fr; }
  .u-artist-bild { aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .u-artist-bild img { transition: none; } }

/* Punktraster im Dotwork-Stil des Logos (wie das Kartenfeld der Startseite) für Abschnitte mit Feldern/Karten und die Fragen */
.u-breit::before, .u-fragen::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 0; right: 0; width: min(56vw, 820px); height: min(86%, 680px);
  background-image: radial-gradient(rgba(235, 232, 225, .17) 1.2px, transparent 1.7px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000 0%, transparent 72%); }
.u-fragen::before { right: auto; left: 0; top: auto; bottom: 0; width: min(46vw, 640px); height: min(80%, 560px);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 0% 100%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 80% 80% at 0% 100%, #000 0%, transparent 72%); }

/* =====================================================================================================================================
   Modern-Schicht (05.10.2026, User: „die ganzen Unterseiten mehr fancy gestalten, moderner, nicht so altmodisch“). Stand davor:
   website/design/vor-unterseiten-modern-2026-10-05/. Design Read: Unterseiten eines Tattoo-Studios, dunkel, kinetisch-editorial;
   natives CSS mit scroll-getriebener Bewegung, Bento-Kacheln, Magazin-Panels. Regler: VARIANCE 8 · MOTION 8 · DENSITY 4.
   Ersetzt: blass auslaufende Hintergrundfotos (→ scharfe Panels), flache graue Kästen (→ Bento mit Lichtkegel), Titel unter Fotos
   (→ Titel auf dem Foto). Jede Bewegung hat einen Zweck und entfällt bei prefers-reduced-motion. Kein Scroll-Listener.
   ===================================================================================================================================== */

/* Körnung über der ganzen Seite (wie Druck auf Papier/Haut), sehr leicht, nimmt keine Klicks an */
body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ---------- Magazin-Panel: Text-Abschnitt mit randlosem Foto (halbe Breite), großer Titel auf dem Foto, Text daneben ---------- */
.s.u-panel { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "foto text";
  min-height: clamp(560px, 84vh, 820px); border-top: 1px solid var(--line); background: var(--bg); }
.s.u-panel-rechts { grid-template-areas: "text foto"; }
.u-panel-foto { grid-area: foto; position: relative; overflow: hidden; min-height: 100%; background: var(--bg-3); }
.u-panel-foto picture, .u-panel-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.u-panel-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(14, 15, 15, .94) 0%, rgba(14, 15, 15, .5) 38%, rgba(14, 15, 15, .08) 72%); }
.u-panel-titel { grid-area: foto; align-self: end; position: relative; z-index: 1; min-width: 0;
  padding: clamp(28px, 4vw, 64px) clamp(24px, 3vw, 56px) clamp(32px, 4.4vw, 72px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.u-panel-rechts .u-panel-titel { padding-left: clamp(24px, 3vw, 56px); padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.u-panel-titel :is(.s-h2, .hal-titel) { margin: 0; max-width: 13ch; font-size: clamp(2.6rem, 4.6vw, 5rem); text-shadow: 0 2px 24px rgba(14, 15, 15, .6); }
.u-panel-titel .s-h2-unter { color: #d6d2c9; }
.u-panel-text { grid-area: text; align-self: center; min-width: 0;
  padding: clamp(48px, 6vw, 112px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) clamp(48px, 6vw, 112px) clamp(32px, 5vw, 96px); }
.u-panel-rechts .u-panel-text { padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: clamp(32px, 5vw, 96px); }
.u-panel-text .u-fluss { max-width: 56ch; }

.u-panel-text .u-stimmen { --sp: 1; }
.s .u-panel-kurz .u-satz-text p { margin: 0; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.42; color: var(--text); max-width: 30ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-panel-foto img { animation: uPanelZoom linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes uPanelZoom { from { transform: scale(1.18) translateY(-3%); } to { transform: scale(1.03) translateY(3%); } }
@media (max-width: 900px) {
  .s.u-panel, .s.u-panel-rechts { grid-template-columns: 1fr; grid-template-areas: "foto" "text"; min-height: 0; }
  .u-panel-foto { min-height: clamp(340px, 62svh, 560px); }
  .u-panel-titel, .u-panel-rechts .u-panel-titel { padding: 0 var(--gutter) 28px; }
  .u-panel-titel :is(.s-h2, .hal-titel) { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .u-panel-text, .u-panel-rechts .u-panel-text { padding: 32px var(--gutter) 64px; }
}

/* ---------- Bento-Kacheln: Felder in Sektionen über die volle Breite, Größen nach Anzahl; Lichtkegel folgt der Maus (unterseiten.js) ---------- */
.u-felder { gap: clamp(10px, 1vw, 16px); }
.u-feld { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, #1e2120 0%, #151716 100%); border: 1px solid var(--line);
  transition: border-color .35s var(--ease), transform .35s var(--ease); }
.u-feld:first-child { box-shadow: none; border-top: 3px solid var(--accent); }
.u-feld::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(226, 88, 58, .16), transparent 62%); }
.u-feld:hover { border-color: rgba(226, 88, 58, .55); }
.u-feld:hover::after { opacity: 1; }
.s .u-breit .u-feld-titel, .s .u-feld-titel { font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: .95; }
@media (min-width: 1025px) {
  .u-breit .u-felder:not(.u-artistfelder):not(.u-vergleich) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .u-breit .u-felder:not(.u-artistfelder):not(.u-vergleich) > * { grid-column: span 2; }
  .u-breit .u-felder:has(> :nth-child(2):last-child) > *, .u-breit .u-felder:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
  .u-breit .u-felder:has(> :nth-child(5):last-child) > :nth-child(-n+2) { grid-column: span 3; }
  .u-breit .u-felder > :only-child { grid-column: 1 / -1; }
}

/* ---------- Karten mit Foto (Orte, Ratgeber): Titel liegt auf dem Foto, Beschreibung darunter ---------- */
.u-karten:not(.u-karten-eins) .u-karte { display: grid; grid-template-rows: auto auto; align-content: start; }
.u-karten:not(.u-karten-eins) .u-karte > picture { grid-area: 1 / 1; aspect-ratio: 4 / 5; }
.u-karten:not(.u-karten-eins) .u-karte .sti-info { display: contents; }
.u-karten:not(.u-karten-eins) .u-karte .sti-info h3 { grid-area: 1 / 1; align-self: end; z-index: 1; margin: 0; padding: 72px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(14, 15, 15, .92)); font-size: clamp(1.5rem, 1.9vw, 1.9rem); }
.u-karten:not(.u-karten-eins) .u-karte .sti-info p { grid-row: 2; margin: 14px 0 0; }
.u-karte .sti-info h3 .ico { transition: transform .3s var(--ease); }
.u-karte:hover .sti-info h3 .ico { transform: translate(3px, -3px) rotate(0deg); }
.u-karte > picture { position: relative; overflow: hidden; }
.u-karte > picture::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .35s var(--ease); pointer-events: none; }
.u-karte:hover > picture::after { border-color: var(--accent); }

/* ---------- Bilder decken sich beim Hereinscrollen auf (Rahmen öffnet sich, Foto zoomt zurück) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-medium, .u-split-zweit, .u-karte > picture, .u-artist-bild { animation: uAuf2 linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .u-medium img, .u-medium video, .u-split-zweit img, .u-karte > picture img { animation: uBildZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .u-s .s-h2, .u-s .hal-titel { animation: uTitel linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
}
@keyframes uAuf2 { from { clip-path: inset(16% 12% 16% 12%); } to { clip-path: inset(0 0 0 0); } }
@keyframes uBildZoom { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes uTitel { from { clip-path: inset(100% 0 -25% 0); transform: translateY(38%); } to { clip-path: inset(-25% 0 -25% 0); transform: none; } }

/* ---------- Text leuchtet beim Lesen Wort für Wort auf (Einleitung, kurze Panels; unterseiten.js teilt in Wörter) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .u-w { display: inline-block; animation: uLicht linear both; animation-timeline: view(); animation-range: entry 100% cover 42%; }
  }
}
@keyframes uLicht { from { opacity: .16; } to { opacity: 1; } }

/* ---------- Knöpfe: Lichtstreif beim Darüberfahren, Pfeile schieben mit ---------- */
main .btn-accent { position: relative; overflow: hidden; isolation: isolate; }
main .btn-accent::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 236, .38) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main .btn-accent:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
  main .btn .ico, main .stu-chip .ico { transition: transform .3s var(--ease); }
  main .btn:hover .ico { transform: scale(1.12) rotate(-6deg); }
}

/* =====================================================================================================================================
   Einheitliche Schrift (05.10., User zur Preis-Seite: „unterschiedliche Schriftgrößen, Sektionen nicht schön“): drei Stufen für alle
   Unterseiten. Fließtext überall gleich (Abschnitte, Panels, Kacheln, Ablauf, Fragen, Fußtexte), Zwischentitel überall gleich,
   groß gesetzt nur Einleitung und kurze Panel-Sätze. Abstände zwischen Absätzen auch in Fußtexten unter Preisen und Abläufen.
   ===================================================================================================================================== */
main { --u-text: clamp(1.06rem, 1.1vw, 1.14rem); --u-h3: clamp(1.45rem, 1.9vw, 1.8rem); }
.s :is(.u-fluss, .u-feld, .abl-schritt, .faq-list, .gut-text, .stu-text, .u-tafel-fuss, .u-fragen-fuss, .u-zu) :is(p, li, dd):not(.u-feld-titel):not(.pre-neu-zahl) {
  font-size: var(--u-text); line-height: 1.66; }
.s :is(.u-fluss, .u-feld, .abl-schritt, .faq-list, .gut-text) :is(p, li) { color: #d6d2ca; }
.s :is(.u-fluss .u-h3, .u-feld-titel, .abl-schritt h3, .u-zu dt) { font-size: var(--u-h3); line-height: .98; }
.s .u-panel-kurz .u-satz-text p, .s .u-satz-text p { font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.42; }
.s .faq-list summary { font-size: var(--u-text); }
.u-fluss > * + *, .pre-fuss .u-fluss > * + *, .abl-fuss .u-fluss > * + * { margin-top: 1.05em; }
.pre-fuss .u-fluss > .u-h3, .abl-fuss .u-fluss > .u-h3, .u-fluss > * + .u-h3 { margin-top: 1.8em; }
.u-pre-fuss, .u-abl-fuss { margin-top: clamp(40px, 4.4vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.u-pre-fuss .u-fluss, .u-abl-fuss .u-fluss { max-width: 70ch; }
.u-feld { justify-content: flex-start; }

/* Neukunden-Band in den Preisfeldern (wie Startseite), auch im 3er-Raster über die volle Breite */
.u-pre-drei .pre-neu, .u-pre-zwei .pre-neu { grid-column: 1 / -1; min-height: 0; }

/* Kurze Aufzählung (Zahlungsarten) als Schlagwörter */
.u-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.u-tags li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); background: var(--bg-2);
  font-size: var(--u-text); color: var(--text); }
.u-tags li::before { content: ""; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); }

/* Einzelne Bewertung: große Karte über die Breite der Lesespalte */
.u-stimmen-1 { max-width: 860px; }
.u-stimmen-1 .stm-karte { padding: clamp(24px, 3vw, 40px); }
.u-flaeche .stm-karte, .u-flaeche .u-tags li { background: var(--bg-3); }

/* =====================================================================================================================================
   Preis-Seite, Neubau (05.10.2026 abends, preisseite.py; User: „komplett neu aufbauen, vergiss das aktuelle Design, alles neu“).
   Präfix pz-. Eigene feste Schriftskala, gilt für jeden Text der Seite (keine Größen aus anderen Bausteinen):
     --pz-h1 Seitentitel · --pz-h2 Abschnittstitel · --pz-h2k Titel in Karten · --pz-h3 Zwischentitel · --pz-gross große Sätze
     --pz-text Fließtext (überall gleich) · --pz-klein Kleintext · --pz-zahl Preise · --pz-zahl-xl Rabatt
   ===================================================================================================================================== */
main:has(.pz-held) {
  --pz-h1: clamp(3.2rem, 6.6vw, 6.8rem); --pz-h2: clamp(2.5rem, 4.6vw, 4.4rem); --pz-h2k: clamp(1.9rem, 2.8vw, 2.6rem);
  --pz-h3: clamp(1.35rem, 1.6vw, 1.55rem); --pz-gross: clamp(1.25rem, 1.8vw, 1.6rem); --pz-text: 1.0625rem; --pz-klein: .875rem;
  --pz-zahl: clamp(1.9rem, 2.8vw, 2.7rem); --pz-zahl-xl: clamp(3.4rem, 6vw, 5.6rem); --pz-text-farbe: #d8d4cc;
}
.pz-s { position: relative; padding: clamp(80px, 9vw, 136px) 0; }
.pz-flaeche { background: var(--bg-2); }
.pz-s p, .pz-s li, .pz-s dd { font-size: var(--pz-text); line-height: 1.62; color: var(--pz-text-farbe); }
.pz-s p { margin: 0; }
.pz-s :is(p, li) > a:not([class]), .pz-held-lead a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.pz-s :is(p, li) > a:not([class]):hover { color: var(--accent); }
.pz-s strong { color: var(--text); font-weight: 600; }
.pz-text > * + * { margin-top: 1em; }
.pz-s .ico, .pz-held .ico { width: 1.2em; height: 1.2em; flex: none; }
.pz-s .btn .ico, .pz-held .btn .ico { width: 1.3em; height: 1.3em; margin-right: 10px; }

/* Titel */
.pz-h1, .pz-h2, .pz-h3, .pz-kachel-motiv, .pz-was, .pz-tafel-titel { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; color: var(--text); }
.pz-h1 { margin: 0; font-size: var(--pz-h1); line-height: .86; letter-spacing: -.01em; text-wrap: balance; }
.pz-h1-unter { display: block; margin-top: .45em; font-size: .3em; font-weight: 800; line-height: 1.1; color: var(--muted); letter-spacing: .01em; }
.pz-h2 { margin: 0 0 20px; font-size: var(--pz-h2); line-height: .9; letter-spacing: -.005em; max-width: 20ch; text-wrap: balance; }
.pz-h2-unter { display: block; margin-top: .35em; font-size: .42em; font-weight: 800; line-height: 1.1; color: var(--muted); }
.pz-h3 { margin: 0; font-size: var(--pz-h3); line-height: 1; }
.pz-s .pz-lead { max-width: 60ch; }
.pz-kopf { margin-bottom: clamp(36px, 4vw, 56px); }

/* ---------- Kopf: Titel links, Foto rechts ---------- */
.pz-held { min-height: 0; display: block; padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(56px, 7vw, 96px); }
.pz-held-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 112px); align-items: center; }
.pz-held .crumbs { margin-bottom: 24px; }
.pz-by { margin: 0 0 14px; font-size: var(--pz-klein); color: var(--muted); }
.pz-held-lead { margin-top: 28px; max-width: 46ch; }
.pz-held-lead p { margin: 0; font-size: var(--pz-gross); line-height: 1.45; color: var(--text); }
.pz-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pz-held-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 120px); overflow: hidden; background: var(--bg-3); justify-self: end; width: 100%; }
.pz-held-foto picture, .pz-held-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-held-foto::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 6px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .js .pz-held-foto img { transform: scale(1.1); }
  .js .is-loaded .pz-held-foto img { transform: none; transition: transform 2.2s var(--ease); }
  .js .pz-held-foto { clip-path: inset(0 0 100% 0); }
  .js .is-loaded .pz-held-foto { clip-path: inset(0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .1s; }
}
@media (max-width: 899px) {
  .pz-held-raster { grid-template-columns: 1fr; }
  .pz-held-foto { order: -1; aspect-ratio: 5 / 4; max-height: 46svh; }
  .pz-h1 { font-size: 13vw; }
}
@media (max-width: 767px) { .pz-knoepfe .btn { width: 100%; white-space: normal; text-align: center; } }

/* ---------- Preise: Preistafel und Zeitstrahl ---------- */
.pz-tafeln { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); }
.pz-tafel { padding: clamp(24px, 3vw, 44px); background: var(--bg-2); border: 1px solid var(--line); }
.pz-tafel-titel { margin: 0 0 clamp(20px, 2.4vw, 32px) !important; font-size: var(--pz-h3) !important; line-height: 1 !important; color: var(--accent) !important; }
.pz-tafel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 26px); }
.pz-tafel-liste li { display: grid; grid-template-columns: auto minmax(20px, 1fr) auto; align-items: baseline; gap: 14px; }
.pz-was { font-size: var(--pz-h3); line-height: 1; }
.pz-leiter { border-bottom: 2px dotted var(--line-strong); transform: translateY(-.35em); }
.pz-preis, .pz-sk-preis, .pz-kachel-preis { font-family: var(--f-display); font-weight: 900; font-size: var(--pz-zahl); line-height: 1; color: var(--text); white-space: nowrap; }
/* Zeitstrahl: Linie verbindet die Sitzungslängen, füllt sich beim Hereinscrollen */
.pz-strahl { --spalten: 6; list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: 0 8px; }
.pz-strahl::before, .pz-strahl::after { content: ""; position: absolute; left: 0; right: 0; top: calc(2.9em + 7px); height: 2px; background: var(--line-strong); }
.pz-strahl::after { background: var(--accent); transform-origin: left; }
.pz-strahl li { display: grid; grid-template-rows: 2.9em 16px auto; gap: 12px; min-width: 0; }
.pz-s .pz-sk-zeit { font-size: var(--pz-klein); line-height: 1.3; color: var(--muted); align-self: end; }
.pz-sk-punkt { position: relative; z-index: 1; width: 16px; height: 16px; background: var(--accent); }
.pz-sk-preis { font-size: clamp(1.45rem, 2vw, 2rem); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pz-strahl::after { animation: pzLinie linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .pz-sk-punkt { animation: pzPunkt linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
  }
}
@keyframes pzLinie { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pzPunkt { from { transform: scale(.3); background: var(--line-strong); } to { transform: none; } }
/* Neukunden-Band */
.pz-neu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px clamp(28px, 4vw, 64px);
  margin-top: clamp(16px, 2vw, 28px); padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px); background: var(--accent); }
.pz-s .pz-neu-zahl { font-family: var(--f-display); font-weight: 900; font-size: var(--pz-zahl-xl); line-height: .85; color: var(--accent-ink); white-space: nowrap; }
.pz-s .pz-neu-text, .pz-s .pz-neu-text strong { color: var(--accent-ink); max-width: 46ch; }
/* Erklärung */
.pz-erkl { margin-top: clamp(48px, 5vw, 80px); }
.pz-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); margin-top: 18px; }
@media (max-width: 1024px) {
  .pz-tafeln { grid-template-columns: 1fr; }
  .pz-neu { grid-template-columns: auto minmax(0, 1fr); }
  .pz-neu .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) {
  .pz-strahl { grid-template-columns: 1fr; gap: 18px; padding-left: 4px; }
  .pz-strahl::before, .pz-strahl::after { left: 11px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .pz-strahl::after { transform-origin: top; }
  .pz-strahl li { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: 16px; }
  .pz-sk-punkt { grid-column: 1; grid-row: 1; margin-left: 0; }
  .pz-s .pz-sk-zeit { grid-column: 2; grid-row: 1; align-self: center; font-size: var(--pz-text); color: var(--pz-text-farbe); }
  .pz-sk-preis { grid-column: 3; grid-row: 1; }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .pz-strahl::after { animation-name: pzLinieY; } } }
  .pz-neu { display: block; }
  .pz-neu .pz-neu-zahl { margin-bottom: 14px; }
  .pz-neu .btn { width: 100%; margin-top: 20px; }
  .pz-zwei { grid-template-columns: 1fr; }
  .pz-tafel-liste li { gap: 10px; }
}
@keyframes pzLinieY { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- Faktoren: Titel und Foto links haftend, Faktoren rechts ---------- */
.pz-faktoren-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 104px); align-items: start; }
.pz-faktoren-links { position: sticky; top: calc(var(--header-h) + 28px); }
.pz-foto { margin: 0; overflow: hidden; background: var(--bg-3); }
.pz-foto picture, .pz-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-faktoren-links .pz-foto { margin-top: 32px; aspect-ratio: 4 / 3; }
.pz-faktor-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pz-faktor { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px;
  padding: clamp(22px, 2.4vw, 32px); background: var(--bg-3); border: 1px solid var(--line); transition: border-color .35s var(--ease); }
.pz-faktor::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(226, 88, 58, .14), transparent 62%); }
.pz-faktor:hover { border-color: rgba(226, 88, 58, .55); }
.pz-faktor:hover::after { opacity: 1; }
.pz-faktor .pz-h3 { margin-bottom: 8px; }
.pz-ico { width: 52px; height: 52px; display: grid; place-items: center; color: var(--accent); border: 1px solid rgba(226, 88, 58, .5); }
.pz-ico .ico { width: 26px; height: 26px; }
.pz-akzent { margin-top: 12px; padding: clamp(24px, 2.6vw, 36px); border: 2px solid var(--accent); }
.pz-akzent .pz-h3 { margin-bottom: 12px; }
@media (max-width: 899px) {
  .pz-faktoren-raster { grid-template-columns: 1fr; }
  .pz-faktoren-links { position: static; }
}
@media (max-width: 480px) { .pz-faktor { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Beispiele: Kacheln 3x2, darunter großes Zitat ---------- */
.pz-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.pz-kachel { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: clamp(180px, 15vw, 220px); padding: clamp(20px, 2.2vw, 30px);
  background: var(--bg-2); border: 1px solid var(--line); transition: border-color .35s var(--ease), transform .35s var(--ease); }
.pz-kachel:hover { border-color: rgba(226, 88, 58, .55); transform: translateY(-3px); }
.pz-s .pz-kachel-kat { font-size: var(--pz-klein); color: var(--muted); }
.pz-kachel-motiv { font-size: var(--pz-h3); line-height: 1; }
.pz-kachel-preis { align-self: end; }
.pz-nach-kacheln { margin-top: 24px; }
.pz-zitat { margin: clamp(48px, 5vw, 80px) 0 0; max-width: 980px; padding-left: clamp(18px, 2vw, 28px); border-left: 3px solid var(--accent); }
.pz-zitat blockquote { margin: 0; }
.pz-s .pz-zitat blockquote p { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.02; color: var(--text); }
.pz-zitat figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.pz-zitat .g-logo { width: 22px; height: 22px; }
.pz-zitat-wer { display: grid; gap: 2px; }
.pz-s .pz-zitat-wer strong { font-size: var(--pz-text); }
.pz-s .pz-zitat-wer span { font-size: var(--pz-klein); color: var(--muted); }
.pz-zitat .stern { width: 16px; height: 16px; filter: none; }
.pz-zitat-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pz-klein); color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.pz-zitat-link .ico { width: 14px; height: 14px; }
.pz-zitat-link:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 900px) { .pz-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pz-kacheln { grid-template-columns: 1fr; } .pz-kachel { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .pz-kachel-kat { grid-column: 1; grid-row: 2; } .pz-kachel-motiv { grid-column: 1; grid-row: 1; } .pz-kachel-preis { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }

/* ---------- Enthalten: großer Satz, vier Punkte, Hinweise ---------- */
.pz-s .pz-satz { margin: 0 0 clamp(36px, 4vw, 56px); font-size: var(--pz-gross); line-height: 1.42; color: var(--text); max-width: 36ch; }
.pz-inkl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.pz-inkl li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 20px; padding: clamp(22px, 2.4vw, 32px); background: var(--bg-3); }
.pz-inkl .pz-h3 { align-self: center; }
.pz-inkl li p { grid-column: 2; }
.pz-haken { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.pz-haken .ico { width: 24px; height: 24px; }
.pz-hinweise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); margin-top: clamp(36px, 4vw, 56px); }
.pz-s .pz-hinweise p { color: var(--muted); }
@media (max-width: 767px) {
  .pz-inkl, .pz-hinweise { grid-template-columns: 1fr; }
  .pz-inkl li { grid-template-columns: 40px minmax(0, 1fr); }
  .pz-inkl li p { grid-column: 1 / -1; }
}

/* ---------- Bezahlung: Text links, Zahlungs-Karte rechts ---------- */
.pz-bez-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 104px); align-items: start; }
.pz-bez-text .pz-text { max-width: 60ch; }
.pz-zahlkarte { padding: clamp(24px, 3vw, 40px); background: var(--bg-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.pz-s .pz-zahlkarte-titel { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: var(--pz-h3); line-height: 1; color: var(--text); margin-bottom: 20px; }
.pz-arten { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pz-s .pz-arten li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); color: var(--text); }
.pz-arten li::before { content: ""; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); }
@media (max-width: 899px) { .pz-bez-raster { grid-template-columns: 1fr; } }

/* ---------- Budget: Foto links, Tipps rechts ---------- */
.pz-budget-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 104px); align-items: start; }
.pz-budget-foto { position: sticky; top: calc(var(--header-h) + 28px); aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--header-h) - 56px); }
.pz-budget-foto img { object-position: 50% 30%; }
.pz-tipps { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 12px; }
.pz-tipps li { padding: clamp(20px, 2.2vw, 28px); background: var(--bg-3); border-left: 3px solid var(--line-strong); transition: border-color .3s var(--ease); }
.pz-tipps li:hover { border-left-color: var(--accent); }
.pz-tipps .pz-h3 { margin-bottom: 8px; }
.pz-s .pz-warnung { margin-top: 28px; padding: 20px 24px; border-left: 3px solid var(--accent); background: rgba(226, 88, 58, .08); color: var(--text); }
@media (max-width: 899px) {
  .pz-budget-raster { grid-template-columns: 1fr; }
  .pz-budget-foto { position: static; aspect-ratio: 4 / 3; }
}

/* ---------- Weiterlesen: zwei Bildkarten ---------- */
.pz-weiter { padding-top: clamp(64px, 7vw, 104px); }
.pz-karten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); }
.pz-karte { display: grid; grid-template-rows: auto 1fr; background: var(--bg-2); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); transition: border-color .35s var(--ease); }
.pz-karte:hover { border-color: rgba(226, 88, 58, .55); }
.pz-karte-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
.pz-karte-foto picture, .pz-karte-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pz-karte:hover .pz-karte-foto img { transform: scale(1.04); }
.pz-karte-text { padding: clamp(24px, 3vw, 40px); }
.pz-karte .pz-h2 { font-size: var(--pz-h2k); margin-bottom: 16px; }
@media (max-width: 899px) { .pz-karten { grid-template-columns: 1fr; } }

/* ---------- Ablauf (Bausteine der Startseite) in der Schriftskala der Seite ---------- */
.pz-ablauf .abl-bahn { margin-top: clamp(40px, 5vw, 72px); }
.pz-ablauf .abl-schritt h3 { font-size: var(--pz-h3); line-height: 1; }
.pz-ablauf .abl-schritt p { font-size: var(--pz-text); line-height: 1.62; color: var(--pz-text-farbe); }

/* ---------- Quellen ---------- */
.pz-quellen { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.pz-klein-titel { margin: 0 0 12px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; color: var(--muted); }
.pz-s .pz-quellen-text :is(p, li) { font-size: var(--pz-klein); color: var(--muted); overflow-wrap: anywhere; }
.pz-s .pz-quellen-text :is(p, li) > a:not([class]) { color: var(--muted); }

/* ---------- Bewegung: Titel und Kacheln steigen beim Hereinscrollen auf (CSS scroll-getrieben) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pz-s .pz-h2 { animation: uTitel linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    .pz-kachel, .pz-faktor, .pz-inkl li, .pz-tipps li, .pz-karte { animation: uAuf linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .pz-foto, .pz-karte-foto { animation: uAuf2 linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}