/* ============================================================================
   randnotiz.css — Vorlage „Randnotiz"
   Eine Kanzlei-Website als gedruckte Magazin-Reportage, durch die ein blauer
   Füllfederhalter mitliest. Welt „Druckbogen & Tinte": Papier, Druckschwarz,
   Königsblau (nur für die Tinte). Grammatik: Chaptered Editorial, harte
   Grundwechsel pro Kapitel, kein Drift, kein Scrub.
   Engine-Tokens werden nur überschrieben, scrollcraft.css bleibt unberührt
   (bis auf den dokumentierten Regel-8-Fix in der eigenen Kopie).
   ========================================================================== */

/* ------------------------------- Schriften ------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/librefranklin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------- Tokens --------------------------------- */

:root {
  --sc-canvas:     #F5F1E8;   /* Papier */
  --sc-surface:    #EDE7DA;
  --sc-ink:        #2B2420;   /* Druckschwarz, warm */
  --sc-ink-soft:   #6B5F52;
  --sc-accent:     #2440A8;   /* Königsblau, gehört allein der Tinte */
  --sc-accent-ink: #F5F1E8;

  --sc-font-display: "Newsreader", Charter, Georgia, serif;
  --sc-font-text:    "Newsreader", Charter, Georgia, serif;

  --rn-label: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --rn-dunkel: #2B2420;       /* Grund der Intertitel-Seiten */
  --rn-papier: #F5F1E8;
  --rn-tinte: var(--sc-accent);

  --rn-kante: 0rem;           /* Platz für das Folio in der Blattkante */
  --sc-shadow-color: 40 12% 12%;
}
@media (min-width: 980px) {
  :root { --rn-kante: 12rem; }
}

html { background: var(--sc-canvas); }
body {
  font-family: var(--sc-font-text);
  font-optical-sizing: auto;
  color: var(--sc-ink);
}

:focus-visible {
  outline: 2px solid var(--rn-fokus, var(--sc-accent));
  outline-offset: 3px;
}

/* Tinten-Fortschritt: ohne JS bzw. unter reduced motion steht alles fertig da.
   Nur wenn html.rn-js gesetzt ist (JS aktiv UND Motion erlaubt), wird der
   Fortschritt --rn-p aus der Scrollposition geschrieben. */
:root { --rn-p: 1; }

/* ============================== Chrome: Folio ============================= */

.rn-folio {
  position: fixed;
  left: clamp(0.75rem, 1.5vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--sc-z-chrome);
  width: 9.5rem;
  background: var(--rn-papier);
  border: 1px solid var(--sc-hairline-strong);
  padding: var(--sc-4) var(--sc-4) var(--sc-3);
  box-shadow: var(--sc-e1);
  display: none;
}
@media (min-width: 980px) { .rn-folio { display: block; } }

.rn-folio__kap {
  font-family: var(--rn-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  display: grid;
  gap: 0.2rem;
  margin: 0 0 var(--sc-3);
  border-bottom: 1px solid var(--sc-hairline);
  padding-bottom: var(--sc-3);
}
.rn-folio__name { color: var(--sc-ink); font-weight: 600; letter-spacing: 0.1em; }
.rn-folio__name:empty { display: none; }
.rn-folio__tel {
  font-family: var(--rn-label);
  font-size: max(14px, 0.9rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  text-decoration: none;
  display: inline-block;
  padding: 0.35rem 0;
  min-height: 24px;
}
.rn-folio__tel:hover { color: var(--rn-tinte); }

/* Mobile Papierzeile oben */
.rn-mobilbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  background: var(--rn-papier);
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding: 0.55rem var(--sc-gutter);
}
@media (min-width: 980px) { .rn-mobilbar { display: none; } }
.rn-mobilbar__links {
  font-family: var(--rn-label);
  font-size: max(12px, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  display: flex;
  gap: 0.8em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.rn-mobilbar__marke { color: var(--sc-ink); font-weight: 600; }
.rn-mobilbar__tel {
  font-family: var(--rn-label);
  font-size: max(14px, 0.85rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  text-decoration: none;
  padding: 0.55rem 0;
  flex: none;
}
@media (max-width: 979px) {
  body { padding-top: 2.6rem; }
}
@media (max-width: 420px) {
  .rn-mobilbar__marke { display: none; }
}

/* ============================ Die Tinte (global) ========================== */

/* Unterstreichung im Drucktext: gewellter Federstrich als background-image,
   Breite folgt --rn-p (vorwärts schreibt, rückwärts radiert exakt). */
.rn-u {
  font-style: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 20 2, 40 7, 60 4 S 100 2, 118 5' fill='none' stroke='%232440A8' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: calc(var(--rn-p, 1) * 100%) 0.34em;
  padding-bottom: 0.14em;
}

/* Randnotiz: die Ich-Stimme in Königsblau-Kursive, hängt in der Spaltengasse */
.rn-note {
  font-family: var(--sc-font-display);
  font-style: italic;
  color: var(--rn-tinte);
  font-size: 1.05rem;
  line-height: 1.42;
  transform: rotate(-1.2deg);
  clip-path: inset(-6% calc((1 - var(--rn-p, 1)) * 103%) -10% -3%);
}
.rn-note::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--rn-tinte);
  border-radius: 2px;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
@media (min-width: 1240px) {
  /* Die Notiz hängt in der Spaltengasse: die Prosa-Spalte trägt rechts
     14rem Innenabstand (Teil ihrer eigenen Box, wird also von keinem
     contain:paint beschnitten), der Float ragt genau dort hinein. */
  .rn-prosa { padding-right: 14rem; }
  .rn-prosa .rn-note {
    float: right;
    width: 11.5rem;
    margin-right: -13.5rem;
    margin-left: var(--sc-5);
    margin-block: 0.2rem 1rem;
  }
}
@media (max-width: 1239px) {
  .rn-prosa .rn-note {
    margin: var(--sc-5) 0 var(--sc-5) var(--sc-6);
    max-width: 26rem;
  }
}

/* Gezeichnete Federzüge (SVG-Pfade): pathLength wird per JS auf 1 gesetzt */
.rn-schnoerkel path, .rn-doppelstrich path, .rn-signatur__zug path {
  stroke: var(--rn-tinte);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.rn-js .rn-schnoerkel path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--rn-p, 1));
}

/* ============================= Akt 1: Titelseite ========================== */

.rn-titel {
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  background: var(--sc-canvas);
}
.rn-titel__innen {
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding: calc(var(--sc-6) + 0.5rem) var(--sc-gutter) var(--sc-7)
           calc(var(--sc-gutter) + var(--rn-kante) * 0.8);
  display: flex;
  flex-direction: column;
}
.rn-titel__masthead {
  display: flex;
  justify-content: space-between;
  gap: var(--sc-5);
  font-family: var(--rn-label);
  font-size: max(12px, 0.74rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-top: 2px solid var(--sc-ink);
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding: 0.65rem 0;
  margin-bottom: clamp(2.5rem, 8vh, 6rem);
}
.rn-demotag { color: var(--sc-ink); font-weight: 600; }
.rn-titel__kicker {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-2);
}
.rn-titel__wort {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-4xl);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  max-width: 12ch;
  margin: 0 0 var(--sc-5);
}
.rn-titel__unterzeile {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 380;
  line-height: 1.3;
  color: var(--sc-ink);
  max-width: 26ch;
  text-wrap: pretty;
  margin-bottom: auto;
}
.rn-titel__standfirst {
  margin-top: clamp(2.5rem, 7vh, 5rem);
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: var(--sc-5);
  display: grid;
  gap: 0.35rem;
  max-width: 34rem;
}
.rn-sf__name { font-size: var(--sc-t-lg); font-weight: 500; }
.rn-sf__gebiete {
  font-family: var(--rn-label);
  font-size: max(13px, 0.8rem);
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
}
.rn-sf__adresse { font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.rn-sf__tel { font-size: var(--sc-t-lg); margin-top: var(--sc-2); }
.rn-sf__tel a {
  color: var(--sc-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--rn-tinte);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  display: inline-block;
  padding: 0.2rem 0;
}
.rn-sf__tel a:hover { color: var(--rn-tinte); }
@media (max-width: 700px) {
  .rn-titel__wort { font-size: var(--sc-t-3xl); }
  .rn-titel__unterzeile { font-size: var(--sc-t-lg); }
}
@media (max-width: 760px) {
  /* Der externe Lotse-Fab wohnt unten rechts: die Standfirst-Telefonzeile
     endet sonst genau dort (gemessener Overlap im Mobile-Lauf). Zusätzlich
     kompaktere Abstände, damit die Titelseite in einen Bildschirm passt. */
  .rn-titel__innen { padding-bottom: var(--rn-fabplatz, 6.5rem); }
  /* Die Mobilzeile (2.6rem) sitzt über dem Dokument: ohne Abzug ragt die
     100svh-Titelseite unter die Falz und die Telefonzeile in den Fab. */
  .rn-titel { min-height: calc(100svh - 2.6rem); }
  .rn-titel__masthead { margin-bottom: 1.5rem; padding: 0.5rem 0; }
  .rn-titel__kicker { margin-bottom: 0.2rem; }
  .rn-titel__wort { margin-bottom: 1rem; }
  .rn-titel__standfirst { margin-top: 1.5rem; padding-top: 1rem; gap: 0.25rem; }
  .rn-sf__name { font-size: var(--sc-t-base); }
  .rn-sf__tel { margin-top: 0.25rem; }
}

/* ========================= Intertitel-Trennseiten ========================= */

.rn-inter {
  background: var(--rn-dunkel);
  --sc-ink: #F5F1E8;
  --sc-ink-soft: #B7AF9F;
  --rn-fokus: #F5F1E8;
  color: var(--sc-ink);
  min-height: 72svh;
  display: flex;
  align-items: center;
}
.rn-inter__innen {
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding: var(--sc-8) var(--sc-gutter) var(--sc-8)
           calc(var(--sc-gutter) + var(--rn-kante) * 0.8);
}
.rn-inter__kicker {
  font-family: var(--rn-label);
  font-size: max(12px, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-4);
}
.rn-inter__wipe { line-height: 1; padding-bottom: 0.12em; }
.rn-inter__titel {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 460;
  letter-spacing: var(--sc-track-snug);
  line-height: 1.02;
  padding-bottom: 0.08em;
}
.rn-inter__unterzeile {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-size: var(--sc-t-lg);
  font-weight: 380;
  color: var(--sc-ink-soft);
  margin-top: var(--sc-4);
}

/* ============================ Kapitel-Spreads ============================= */

.rn-kapitel {
  background: var(--sc-canvas);
  padding: clamp(4rem, 9vh, 7rem) var(--sc-gutter) clamp(4.5rem, 10vh, 8rem)
           calc(var(--sc-gutter) + var(--rn-kante) * 0.8);
}
.rn-kapitel__spread {
  max-width: var(--sc-maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 56rem) minmax(16rem, 22rem);
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}
.rn-fig--breit { grid-column: 1 / -1; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
@media (max-width: 979px) {
  .rn-kapitel__spread { grid-template-columns: minmax(0, 1fr); }
}

.rn-prosa {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: var(--sc-leading-body);
  max-width: var(--sc-measure);
}
.rn-prosa > p { text-wrap: pretty; }
.rn-prosa > p + p { margin-top: 1.1em; }
.rn-prosa > p:first-of-type::first-letter {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: 3.1em;
  line-height: 0.82;
  float: left;
  padding: 0.06em 0.12em 0 0;
}

.rn-medien {
  display: grid;
  gap: clamp(2rem, 4vh, 3.5rem);
}
.rn-fig { margin: 0; }
.rn-fig img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.06) contrast(1.02);
}
.rn-fig figcaption {
  font-family: var(--rn-label);
  font-size: max(12px, 0.74rem);
  letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
  border-bottom: 1px solid var(--sc-hairline);
  padding: 0.55rem 0;
}
@media (max-width: 979px) {
  .rn-medien { grid-template-columns: 1fr; margin-top: var(--sc-6); }
}

/* ========================== Akt 5: PEAK, die Antwort ====================== */

.rn-peak__stage { background: var(--sc-canvas); }
.rn-peak__blatt {
  height: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 5rem) var(--sc-gutter) clamp(2rem, 5vh, 4rem)
           calc(var(--sc-gutter) + var(--rn-kante) * 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rn-peak__kicker {
  font-family: var(--rn-label);
  font-size: max(12px, 0.76rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-4);
}
.rn-peak__frage {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 480;
  line-height: 1.14;
  letter-spacing: var(--sc-track-snug);
  max-width: 30ch;
  text-wrap: balance;
  margin-bottom: clamp(1.5rem, 4.5vh, 3rem);
}
.rn-fragezeile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 20 2, 40 7, 60 4 S 100 2, 118 5' fill='none' stroke='%232440A8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: calc(var(--rn-p, 1) * 100%) 0.22em;
  padding-bottom: 0.12em;
}
.rn-antwort {
  font-family: var(--sc-font-display);
  font-style: italic;
  color: var(--rn-tinte);
  font-size: clamp(1.15rem, 0.9rem + 0.95vw, 1.55rem);
  line-height: 1.4;
  max-width: 36ch;
  display: grid;
  gap: 0.45em;
  margin-left: clamp(0rem, 4vw, 4rem);
}
.rn-zeile {
  clip-path: inset(-8% calc((1 - var(--rn-p, 1)) * 103%) -12% -2%);
  text-wrap: pretty;
}
.rn-zeile:nth-child(odd) { transform: rotate(-0.5deg); }
.rn-zeile:nth-child(even) { transform: rotate(0.35deg) translateX(0.6rem); }
.rn-zeile--schluss { font-weight: 560; }
.rn-schnoerkel {
  display: block;
  width: min(13rem, 60%);
  height: auto;
  margin-top: 0.3em;
}
@media (max-height: 800px) {
  .rn-peak__blatt { padding-top: 2rem; padding-bottom: 1.5rem; }
  .rn-peak__kicker { margin-bottom: var(--sc-2); }
  .rn-peak__frage { margin-bottom: 1.2rem; font-size: var(--sc-t-lg); }
  .rn-antwort { font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.3rem); line-height: 1.36; gap: 0.4em; }
}

/* ==================== Akt 7: Bildstrecke der Rechtsgebiete ================ */

.rn-strecke__stage { background: var(--sc-surface); }
.rn-rail {
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(3rem, 5vw, 5.5rem);
  padding-inline: calc(var(--sc-gutter) + var(--rn-kante) * 0.8) var(--sc-gutter);
}
.rn-rail__lead {
  flex: 0 0 auto;
  width: min(24rem, 78vw);
}
.rn-rail__titel {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 480;
  line-height: 1.05;
  margin-bottom: var(--sc-4);
}
.rn-rail__satz {
  font-size: var(--sc-t-lg);
  font-weight: 380;
  color: var(--sc-ink-soft);
  max-width: 24ch;
  text-wrap: pretty;
}
.rn-register {
  flex: 0 0 auto;
  width: min(19rem, 74vw);
  border-top: 2px solid var(--sc-ink);
  padding-top: var(--sc-4);
}
.rn-register__fig {
  margin: 0 0 var(--sc-4);
}
.rn-register__fig img {
  width: 100%;
  height: auto;
  display: block;
}
.rn-register__begriff {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.rn-register__begriff span { position: relative; display: inline-block; padding-bottom: 0.16em; }
.rn-register__begriff span::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 20 2, 40 7, 60 4 S 100 2, 118 5' fill='none' stroke='%232440A8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transform-origin: left center;
}
.rn-register__problem {
  font-family: var(--rn-label);
  font-size: max(13px, 0.8rem);
  letter-spacing: 0.05em;
  color: var(--sc-ink-soft);
  margin-bottom: 0.7rem;
}
.rn-register__zeile {
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.rn-rail__schluss {
  flex: 0 0 auto;
  width: min(22rem, 74vw);
  font-size: var(--sc-t-lg);
  font-weight: 380;
  line-height: 1.45;
  text-wrap: pretty;
}
.rn-rail__schluss a {
  color: var(--sc-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--rn-tinte);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.rn-rail__schluss a:hover { color: var(--rn-tinte); }

/* Gestaffeltes Setzen der Registereinträge aus --sc-p (rein deklarativ,
   exakt reversibel). Erster Eintrag ist vom Stagger ausgenommen. */
@media (prefers-reduced-motion: no-preference) {
  html.sc-ready .rn-rail > * { --rn-i: 0; }
  html.sc-ready .rn-rail > *:nth-child(3) { --rn-i: 1; }
  html.sc-ready .rn-rail > *:nth-child(4) { --rn-i: 2; }
  html.sc-ready .rn-rail > *:nth-child(5) { --rn-i: 3; }
  html.sc-ready .rn-rail > *:nth-child(6) { --rn-i: 4; }
  html.sc-ready .rn-rail > *:nth-child(7) { --rn-i: 5; }
  html.sc-ready .rn-rail > *:nth-child(8) { --rn-i: 6; }
  html.sc-ready .rn-rail > *:not(:first-child):not(:nth-child(2)) {
    opacity: clamp(0.55, (var(--sc-p, 1) * 9 - var(--rn-i)) * 0.6 + 0.55, 1);
  }
  html.sc-ready .rn-register__begriff span::after {
    transform: scaleX(clamp(0, (var(--sc-p, 1) * 9 - var(--rn-i)) * 0.8, 1));
  }
}

/* ====================== Akt 9: Kapitel IV, Werkzeug ======================= */

.rn-k4__spread { grid-template-columns: minmax(0, 56rem) minmax(16rem, 24rem); }
@media (max-width: 979px) {
  .rn-k4__spread { grid-template-columns: minmax(0, 1fr); }
}
.rn-k4__titel {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 480;
  line-height: 1.05;
  margin-bottom: var(--sc-2);
}
.rn-k4__unterzeile {
  font-size: var(--sc-t-lg);
  font-weight: 380;
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-5);
}
.rn-lotse__zeile { margin-top: var(--sc-6); }
.rn-lotse__knopf {
  display: none;
  font-family: var(--rn-label);
  font-size: max(14px, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink);
  background: transparent;
  border: 1.5px solid var(--sc-ink);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.rn-lotse__knopf[data-ready] { display: inline-block; }
.rn-lotse__knopf:hover { background: var(--sc-ink); color: var(--rn-papier); }
.rn-lotse__knopf:active { transform: translateY(1px); }

/* ======================= Akt 10: Die letzte Seite ========================= */

.rn-schluss {
  background: var(--sc-canvas);
  border-top: 2px solid var(--sc-ink);
  padding: clamp(4.5rem, 11vh, 8rem) var(--sc-gutter) var(--sc-7)
           calc(var(--sc-gutter) + var(--rn-kante) * 0.8);
}
.rn-schluss__innen { max-width: var(--sc-maxw); margin-inline: auto; }
.rn-schluss__kicker {
  font-family: var(--rn-label);
  font-size: max(12px, 0.78rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.rn-tinte {
  font-family: var(--sc-font-display);
  font-style: italic;
  color: var(--rn-tinte);
}
.rn-tinte__satz {
  font-size: var(--sc-t-xl);
  font-weight: 400;
  line-height: 1.35;
  max-width: 24ch;
  text-wrap: pretty;
  margin-bottom: var(--sc-5);
  transform: rotate(-0.4deg);
}
.rn-tinte__tel { display: inline-block; }
.rn-tinte__tel a {
  font-size: var(--sc-t-3xl);
  font-weight: 520;
  font-variant-numeric: tabular-nums;
  color: var(--rn-tinte);
  text-decoration: none;
  letter-spacing: var(--sc-track-snug);
  display: inline-block;
  padding: 0.1em 0;
}
.rn-tinte__tel a:hover { opacity: 0.85; }
.rn-doppelstrich {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -0.15em;
}
.rn-signatur { margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.rn-signatur__zug {
  display: block;
  width: min(18rem, 70vw);
  height: auto;
  stroke-width: 2;
}
.rn-signatur__name {
  font-style: normal;
  font-family: var(--rn-label);
  font-size: max(13px, 0.8rem);
  color: var(--sc-ink-soft);
  border-top: 1px solid var(--sc-hairline-strong);
  max-width: 22rem;
  padding-top: 0.6rem;
  margin-top: -0.4rem;
}
.rn-signatur__hinweis { display: block; margin-top: 0.15rem; }

/* Der einmalige Schreibzug des Finales: erst wenn .rn-geschrieben gesetzt ist
   (Latch, wird nie entfernt), zeichnen Doppelstrich und Unterschrift. Ohne JS
   oder unter reduced motion stehen sie von Anfang an vollständig. */
html.rn-js [data-rn-finale]:not(.rn-geschrieben) .rn-doppelstrich path,
html.rn-js [data-rn-finale]:not(.rn-geschrieben) .rn-signatur__zug path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.rn-js [data-rn-finale].rn-geschrieben .rn-doppelstrich path,
html.rn-js [data-rn-finale].rn-geschrieben .rn-signatur__zug path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 950ms var(--sc-ease-in-out);
}
html.rn-js [data-rn-finale].rn-geschrieben .rn-signatur__zug path {
  transition-delay: 500ms;
  transition-duration: 1400ms;
}

.rn-druckzeilen {
  margin-top: clamp(3rem, 8vh, 5rem);
  display: grid;
  gap: 0.4rem;
  font-size: var(--sc-t-base);
  color: var(--sc-ink);
}
.rn-druckzeilen a {
  color: var(--sc-ink);
  text-decoration-color: var(--rn-tinte);
  text-underline-offset: 4px;
}
.rn-druckzeilen a:hover { color: var(--rn-tinte); }

.rn-kolophon {
  margin-top: clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--sc-hairline-strong);
  padding-top: var(--sc-5);
  display: grid;
  gap: 0.35rem;
  font-family: var(--rn-label);
  font-size: max(12px, 0.76rem);
  color: var(--sc-ink-soft);
  /* Freiraum für den extern injizierten Lotse-Fab unten rechts */
  margin-bottom: var(--rn-fabplatz, 0px);
}
.rn-kolophon a { color: inherit; text-underline-offset: 3px; padding: 0.2rem 0; display: inline-block; }
.rn-kolophon a:hover { color: var(--sc-ink); }
@media (max-width: 760px) {
  .rn-kolophon { margin-bottom: var(--rn-fabplatz, 5.5rem); }
}

/* =========================== Bußgeldlotse-Fab ============================= */

/* Standard-Position unten rechts bleibt unangetastet aus embed.js. Nur die
   Farbe wird an die Tintenwelt angepasst; provisorisch per CSS, weil
   kanzleien/SLUG.json ohne CORS-Header auf fremden Domains still scheitert
   (gamroth-standard SPEC §7). WICHTIG: bewusst KEINE
   body:has(.bgl-overlay)-Ausblenderegel — das deployte embed.js erzeugt sein
   Overlay schon beim Laden; eine solche Regel würde den Fab dauerhaft
   verstecken (bekannter Bug, in Nachtflug/Kamerafahrt gefunden). */
.bgl-fab {
  background: var(--sc-accent) !important;
  color: #F5F1E8 !important;
  box-shadow: 0 6px 20px -6px rgba(36, 64, 168, 0.5),
              0 2px 5px rgba(28, 27, 25, 0.35) !important;
}

/* ============================== Druck/Fallback ============================ */

@media print {
  .rn-folio, .rn-mobilbar, .bgl-fab { display: none !important; }
}