/*
  Design-System „Nachtpraxis" — Praxis Sibylle Etnar Brumen, Kaiserslautern
  Fraunces + Newsreader. Anthrazit dark-forward, Creme, Teal.
  Individuell für diese Praxis; nicht wiederverwenden.
*/
:root {
  --anthrazit: #1c1e22;
  --anthrazit-tief: #141519;
  --anthrazit-karte: #24272d;
  --creme: #f3ede2;
  --creme-weich: rgba(243, 237, 226, 0.78);
  --teal: #4a9e8f;
  --teal-hell: #6bb8a8;
  --linie: rgba(243, 237, 226, 0.14);
  --linie-stark: rgba(243, 237, 226, 0.4);
  --disp: 'Fraunces', Georgia, serif;
  --text: 'Newsreader', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--teal); color: var(--anthrazit); }

body { background: var(--anthrazit); color: var(--creme); font-family: var(--text); font-size: 17px; line-height: 1.72; -webkit-font-smoothing: antialiased; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--teal); color: var(--anthrazit); }

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Kopf */
.kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  padding: 1.25rem clamp(1.1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linie);
}
.kopf-name { font-family: var(--disp); font-weight: 600; font-size: 1.2rem; color: var(--creme); }
.kopf-name span { display: block; font-family: var(--text); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243,237,226,0.5); margin-top: 0.2rem; }
.kopf-nav { display: flex; gap: clamp(0.8rem, 2.2vw, 1.8rem); flex-wrap: wrap; justify-content: flex-end; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.kopf-nav a { color: var(--creme-weich); padding-bottom: 0.15rem; }
.kopf-nav a:hover { color: var(--teal-hell); }
.kopf-nav a[aria-current="page"] { color: var(--teal-hell); border-bottom: 2px solid var(--teal); }

/* Vollblei-Hero */
.vollblei {
  position: relative; min-height: 86vh;
  display: flex; align-items: flex-end;
  color: var(--creme); isolation: isolate;
}
.vollblei img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vollblei::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,21,25,0.82), rgba(20,21,25,0.25) 55%, rgba(20,21,25,0.35)); }
.vollblei-inhalt { padding: 0 clamp(1.1rem, 4vw, 3rem) clamp(2.8rem, 6vw, 4.6rem); width: 100%; max-width: 1120px; margin: 0 auto; }
.vollblei-inhalt .vorzeile { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--teal-hell); margin-bottom: 1rem; }
.vollblei-inhalt h1 { font-family: var(--disp); font-weight: 600; font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 17ch; }
.vollblei-inhalt .unter { margin-top: 1.2rem; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.7; color: rgba(243,237,226,0.88); }
.vollblei-inhalt .takt { margin-top: 1.8rem; }

/* Fläche */
.buch { max-width: 940px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 3rem); }
.abschnitt { padding: clamp(3rem, 7vw, 5.6rem) 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }
.kennung { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-hell); margin-bottom: 1.1rem; }
h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.14; margin-bottom: 1.1rem; }
h3 { font-weight: 600; font-size: 1rem; margin-bottom: 0.4rem; }
p + p { margin-top: 0.9rem; }
.einleitung { font-size: clamp(1rem, 1.45vw, 1.16rem); color: var(--creme-weich); max-width: 56ch; line-height: 1.75; }

/* Steckbrief */
.steck { border-top: 1px solid var(--linie-stark); }
.steck > div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 0.6rem 1.8rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
.steck dt { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,237,226,0.5); padding-top: 0.28rem; }
.steck dd { font-size: 0.96rem; line-height: 1.6; }
.steck dd a { border-bottom: 1px solid var(--linie-stark); }
.steck dd a:hover { color: var(--teal-hell); border-color: var(--teal-hell); }

/* Knöpfe */
.takt { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.7rem; }
.knopf { display: inline-block; padding: 0.78rem 1.5rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 1.5px solid var(--creme); color: var(--creme); }
.knopf:hover { background: var(--creme); color: var(--anthrazit); }
.knopf-teal { background: var(--teal); border-color: var(--teal); color: var(--anthrazit); }
.knopf-teal:hover { background: var(--teal-hell); border-color: var(--teal-hell); color: var(--anthrazit); }

/* Krise */
.krise { border: 1.5px solid var(--teal); background: var(--anthrazit-karte); padding: 1.5rem 1.7rem; margin-top: 2.4rem; }
.krise h3 { font-family: var(--disp); font-weight: 600; color: var(--teal-hell); margin-bottom: 0.5rem; }
.krise p, .krise li { font-size: 0.94rem; color: var(--creme-weich); }
.krise ul { list-style: none; margin-top: 0.55rem; }
.krise li { padding: 0.26rem 0; }
.krise a { border-bottom: 1px solid var(--linie-stark); }

/* Fussnote */
.fussnote { border-top: 1px solid var(--linie); margin-top: 2.4rem; padding-top: 0.85rem; font-size: 0.76rem; color: rgba(243,237,226,0.5); }
sup { color: var(--teal-hell); font-size: 0.72em; }

/* Bildtafel */
.tafel { max-width: 860px; margin: clamp(2.4rem, 5vw, 3.6rem) auto; }
.tafel img { width: 100%; height: clamp(220px, 38vh, 380px); object-fit: cover; }
.tafel figcaption { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243,237,226,0.5); padding-top: 0.5rem; text-align: center; }

/* Fusszeile */
.fuss { background: var(--anthrazit-tief); color: var(--creme); padding: clamp(2.4rem, 5vw, 3.6rem) 0 1.5rem; }
.fuss .buch > p:first-child { font-family: var(--disp); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 1.6rem; }
.fuss-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid rgba(243,237,226,0.18); padding-top: 1.3rem; font-size: 0.87rem; }
.fuss-raster h3 { font-family: var(--text); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243,237,226,0.5); margin-bottom: 0.5rem; }
.fuss-raster p { color: rgba(243,237,226,0.85); line-height: 1.7; }
.fuss-raster a { border-bottom: 1px solid rgba(243,237,226,0.35); }
.fuss-recht { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; font-size: 0.72rem; color: rgba(243,237,226,0.5); }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 780px) {
  .steck > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .fuss-raster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .kopf { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .kopf-nav { justify-content: flex-start; }
}