/* Referenzseite (referenz-layerforge.html): ergänzt themen.css */
.ref-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); margin-top: clamp(28px, 5vh, 56px); }
.ref-facts div { padding: 18px 20px 4px 0; }
.ref-facts dt { font-size: .78rem; letter-spacing: .08em; text-transform: lowercase; color: var(--muted); }
.ref-facts dd { margin: 4px 0 0; font-size: 1.05rem; font-weight: 500; }
.ref-intro { padding-top: clamp(56px, 9vh, 112px); }
.ref-intro p { max-width: 62ch; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5; font-weight: 300; }
.ref-intro p + p { margin-top: 1em; color: var(--muted); }
.ref-shots { display: grid; gap: clamp(28px, 5vw, 56px); padding-top: clamp(56px, 9vh, 112px); }
.ref-shot { margin: 0; display: grid; gap: 14px; }
.ref-shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: #0B1019; }
.ref-shot figcaption { color: var(--muted); max-width: 70ch; font-size: .98rem; }
.ref-shot figcaption b { color: inherit; font-weight: 500; }
.ref-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.ref-pair .ref-shot--phone img { max-width: 320px; }
.ref-note { color: var(--muted); font-size: .9rem; max-width: 70ch; padding-top: 24px; }
@media (max-width: 860px) {
  .ref-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-pair { grid-template-columns: 1fr; }
}

/* Auflockerung: Text/Bild-Wechsel, Stolpersteine, Shop-Maske, Studio */
.ref-h { font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.08; max-width: 24ch; margin-top: clamp(20px, 3vh, 36px); }
.ref-lead { max-width: 62ch; margin-top: 18px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--muted); }
.ref-lead b { color: inherit; font-weight: 500; }
.ref-probleme, .ref-maske, .ref-studio { padding-top: clamp(64px, 10vh, 128px); }

.ref-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 7vh, 88px); }
.ref-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.ref-split .ref-shot img { margin: 0; }
.ref-text h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.ref-text p { margin-top: 12px; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }
.ref-text .ref-small { font-size: .82rem; opacity: .8; }
.ref-split .ref-shot { margin: 0; }

.ref-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 5vh, 48px); }
.ref-card { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 18px; padding: clamp(20px, 2.4vw, 32px); background: color-mix(in srgb, currentColor 4%, transparent); }
.ref-card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; margin: 10px 0 8px; }
.ref-card p { color: var(--muted); line-height: 1.55; }
.ref-card em { color: var(--accent-text, var(--hero-accent)); font-style: normal; font-weight: 500; }
.ref-tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text, var(--hero-accent)); }

.ref-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin-top: clamp(28px, 5vh, 48px); }
.ref-flow i { align-self: center; font-style: normal; font-size: 1.6rem; color: var(--muted); }
.ref-node { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 16px; padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.ref-node b { font-size: 1.15rem; font-weight: 500; }
.ref-node span { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.ref-node--accent { border-color: var(--hero-accent); background: color-mix(in srgb, var(--hero-accent) 12%, transparent); }
.ref-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(28px, 5vh, 48px); }
.ref-points b { font-weight: 500; }
.ref-points p { color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ref-mehr { padding-top: clamp(64px, 10vh, 128px); }

@media (max-width: 860px) {
  .ref-split, .ref-split--flip, .ref-cards, .ref-points { grid-template-columns: 1fr; }
  .ref-split--flip .ref-text { order: -1; }
  .ref-flow { grid-template-columns: 1fr; }
  .ref-flow i { transform: rotate(90deg); justify-self: center; }
}

/* Headline wird „gedruckt“: Schicht für Schicht von unten nach oben, Düsenlinie läuft mit, danach klingt die Schichtstruktur aus */
.ref-print .hero-title .line > span { position: relative; display: inline-block; animation: lf-print 1.5s steps(18, end) both; }
.ref-print .hero-title .line-2 > span { animation-delay: 1.5s; }
.ref-print .hero-title .line > span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 100%; opacity: 0; pointer-events: none;
  background: var(--hero-accent); box-shadow: 0 0 14px 2px var(--hero-accent);
  animation: lf-nozzle 1.5s steps(18, end) both;
}
.ref-print .hero-title .line-2 > span::after { animation-delay: 1.5s; }
.ref-print .hero-title .line > span::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(to bottom, transparent 0 .055em, var(--bg) .055em .07em);
  animation: lf-layers 1s ease 1.2s both;
}
.ref-print .hero-title .line-2 > span::before { animation-delay: 2.7s; }
@keyframes lf-print { from { clip-path: inset(100% 0 -.3em 0); } to { clip-path: inset(0 0 -.3em 0); } }
@keyframes lf-nozzle { 0% { top: 100%; opacity: 1; } 99% { top: 0; opacity: 1; } 100% { top: 0; opacity: 0; } }
@keyframes lf-layers { from { opacity: .55; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ref-print .hero-title .line > span, .ref-print .hero-title .line > span::before, .ref-print .hero-title .line > span::after { animation: none; }
  .ref-print .hero-title .line > span::before, .ref-print .hero-title .line > span::after { display: none; }
}

/* Sprungmarken zu den Stolpersteinen */
.ref-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vh, 32px); }
.ref-jump a { padding: 8px 16px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; font-size: .92rem; text-decoration: none; color: inherit; transition: background .2s, border-color .2s, color .2s; }
.ref-jump a:hover, .ref-jump a:focus-visible { border-color: var(--hero-accent); background: color-mix(in srgb, var(--hero-accent) 14%, transparent); }
.ref-card { scroll-margin-top: 88px; }
.ref-card:target { border-color: var(--hero-accent); }
@media (max-width: 860px) { .ref-jump a { flex: 1 1 calc(50% - 10px); text-align: center; } }