/* =========================================================
   SV 09 Otzenrath – Unterseiten (statischer Inhalt)
   ========================================================= */

/* ---------- Seitenkopf ---------- */
.page-hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:clamp(96px,9vw,130px) var(--gutter) clamp(60px,6vw,90px)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:16px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.crumbs span[aria-hidden]{opacity:.6}
.page-title{position:relative;z-index:2;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(44px,6.4vw,108px);line-height:.88;margin:0;max-width:14ch}
.page-title .row{display:block;overflow:hidden;padding:.12em 0 .04em;margin-top:-.12em} /* Luft für Umlaut-Punkte */
.page-title .c{display:inline-block;will-change:transform}
.page-title .outline{color:transparent;-webkit-text-stroke:2px var(--paper)}
.page-lead{position:relative;z-index:2;max-width:52ch;font-size:clamp(17px,1.3vw,21px);margin:18px 0 0;opacity:.9}
.ph-doodle-wrap{position:absolute;right:-4vw;top:50%;width:min(36vw,400px);margin-top:calc(min(36vw,400px) / -2);z-index:1;pointer-events:none}
.ph-doodle{width:100%;height:auto;color:var(--paper);opacity:.22}
@media (max-width:820px){.ph-doodle-wrap{right:-30vw;width:90vw;margin-top:-45vw}}

/* ---------- Layout: Inhaltsverzeichnis + Text ---------- */
.page-body{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,760px);gap:clamp(32px,7vw,120px);
  padding:clamp(40px,4.5vw,70px) var(--gutter) clamp(48px,6vw,90px);max-width:1240px}
.page-body.no-toc{grid-template-columns:minmax(0,820px)}
@media (max-width:900px){.page-body{grid-template-columns:1fr}.toc{display:none}}

.toc{position:sticky;top:110px;align-self:start}
/* News-Detail: Seitenleiste "Auch interessant" statt Inhaltsverzeichnis (wie .toc, ab 900px ausgeblendet) */
.side-mehr{position:sticky;top:110px;align-self:start}
.side-mehr .kick{font-family:var(--hand);font-size:26px;margin-bottom:12px}
.side-mehr .gruppe+.gruppe{margin-top:24px}
.side-mehr .gruppe-titel{margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.side-mehr ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.side-mehr li a{display:block;padding:8px 0 8px 20px;text-decoration:none;font-size:15px;line-height:1.3;opacity:.75;transition:opacity .3s,transform .3s}
.side-mehr li a:hover{opacity:1;transform:translateX(4px)}
.side-mehr small{display:block;font-size:12px;letter-spacing:.06em;opacity:.7;margin-bottom:2px}
.side-alle{display:inline-block;margin-top:20px;font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:900px){.side-mehr{display:none}}
/* News-Detail: lange Titel im Seitenkopf kleiner (nur dort, siehe $titelKlasse) */
.page-title.mittel{font-size:clamp(36px,4.6vw,78px);max-width:20ch}
.page-title.lang{font-size:clamp(30px,3.4vw,58px);max-width:26ch}
.toc .kick{font-family:var(--hand);font-size:26px;margin-bottom:12px}
.toc nav{position:relative;border-left:2px solid var(--line)}
.toc a{display:block;padding:8px 0 8px 22px;text-decoration:none;font-size:15px;line-height:1.3;opacity:.6;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.toc a:hover{opacity:1}
.toc a.on{opacity:1;font-weight:700;transform:translateX(4px)}
.toc-ball{position:absolute;left:-9px;top:0;width:16px;height:16px;color:var(--ink);opacity:0}
.toc-ball svg{width:100%;height:100%}

/* ---------- Fließtext-Bausteine ---------- */
.prose{font-size:clamp(17px,1.2vw,19px);line-height:1.7;min-width:0}
.prose > :first-child{margin-top:0}
.prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(38px,4.6vw,68px);line-height:.95;margin:2.1em 0 .45em;scroll-margin-top:110px}
.prose h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.2vw,32px);line-height:1.05;margin:1.8em 0 .4em}
.prose p{margin:0 0 1.1em}
.prose .lead{font-size:1.25em;line-height:1.5}
.prose a:not(.btn){text-decoration-thickness:2px;text-underline-offset:4px}
.prose a:not(.btn):hover{background:var(--ink);color:var(--paper);text-decoration:none}
.prose strong{font-weight:700}

/* Listen mit gezeichneten Strichen / handschriftlichen Zahlen */
.prose ul,.prose ol{list-style:none;padding:0;margin:0 0 1.4em}
.prose li{position:relative;padding-left:34px;margin:.5em 0}
.prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:20px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M1,6 C5,1 9,9 13,4 S18,3 19,5' fill='none' stroke='%230d0d0d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.prose ol{counter-reset:n}
.prose ol li::before{counter-increment:n;content:counter(n);position:absolute;left:2px;top:-.18em;font-family:var(--hand);font-weight:700;font-size:1.5em}

/* Zitat */
.prose blockquote{position:relative;margin:2.2em 0;padding:0 0 0 clamp(56px,6vw,80px);font-family:var(--hand);font-weight:700;font-size:clamp(30px,3vw,46px);line-height:1.08}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:14px;font-family:var(--body);font-weight:500;font-style:normal;font-size:14px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.prose blockquote::before{content:"";position:absolute;left:0;top:-2px;width:clamp(40px,4.2vw,56px);aspect-ratio:60/50;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cg fill='%230d0d0d'%3E%3Cpath d='M15,5 C19,1 28,2 28,9 C28,13 26,16 23,22 L14,42 C13,44 10,43 11,41 L12,14 C12,10 13,7 15,5 Z'/%3E%3Cpath d='M40,5 C44,1 53,2 53,9 C53,13 51,16 48,22 L39,42 C38,44 35,43 36,41 L37,14 C37,10 38,7 40,5 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.prose blockquote .qm{display:none} /* alte, im Inhalt eingebettete Zeichen: ersetzt durch ::before */

/* Infokasten */
.prose .box{position:relative;border:2px solid var(--ink);padding:clamp(22px,2.4vw,34px);margin:2.2em 0;box-shadow:8px 8px 0 var(--ink);rotate:-.5deg;background:var(--paper)}
.prose .box > :last-child{margin-bottom:0}
.prose .box .box-title{font-family:var(--hand);font-weight:700;font-size:28px;line-height:1;margin:0 0 10px}
.prose .box.dark{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--grey);rotate:.5deg}
.prose .box.dark ul li::before{filter:invert(1)}

/* Bild mit Bildunterschrift */
.prose figure{margin:2.4em 0}
.prose figure .frame{overflow:hidden;border:2px solid var(--ink)}
.prose figure img{width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
.prose figure .frame.hatch{padding:clamp(24px,5vw,60px);display:grid;place-items:center}
.prose figure .frame.hatch img{width:min(100%,260px);filter:none}
.prose figcaption{font-family:var(--hand);font-size:22px;margin-top:10px}

/* Tabelle */
.prose .table-wrap{overflow-x:auto;margin:2em 0}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:18px;text-align:left;border-bottom:2px solid var(--ink);padding:10px 16px 10px 0}
.prose td{border-bottom:1px solid var(--line);padding:11px 16px 11px 0;vertical-align:top}
/* Steckbrief-Tabelle (Beschriftung in der Zeile, ohne Kopfzeile): kräftige Linie oben/unten, feine dazwischen */
.prose tbody th{width:1%;white-space:nowrap;font-size:17px;border-bottom:1px solid var(--line);padding:15px clamp(24px,4vw,56px) 15px 0;vertical-align:baseline}
.prose tbody th + td{line-height:1.45;padding:15px 0;vertical-align:baseline}
.prose table:not(:has(thead)) tbody tr:first-child > *{border-top:2px solid var(--ink)}
.prose table:not(:has(thead)) tbody tr:last-child > *{border-bottom:2px solid var(--ink)}
.prose tr:hover td,.prose tbody tr:hover th{background:rgba(13,13,13,.04)}

/* Gezeichnete Trennlinie */
.prose hr{border:0;height:16px;margin:3em 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M2,9 C40,3 70,13 110,8 S190,4 230,9 S320,13 398,6' fill='none' stroke='%230d0d0d' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* Button-Reihe */
.prose .actions{display:flex;flex-wrap:wrap;gap:14px;margin:2em 0}
.prose .actions .btn{font-size:clamp(18px,1.6vw,24px);padding:16px 26px}


/* ---------- Inhaltsseiten: gezeichnetes Spielfeld als Rahmen ---------- */
.page-body{isolation:isolate} /* Spielfeld-Rahmen (z-index:-1) bleibt hinter dem Text, aber vor dem Seitenhintergrund */
.prose.spielfeld{position:relative;padding:clamp(84px,8vw,110px) clamp(28px,4.5vw,64px)}
.prose.spielfeld::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;background:
 /* Tor + Torraum oben */
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M30,3 C31,22 30,40 31,56 C90,58 150,55 209,57 C210,40 209,22 210,3'/%3E%3Cpath d='M95,57 C102,66 138,66 145,57'/%3E%3Ccircle cx='120' cy='42' r='1.8' fill='%230d0d0d'/%3E%3C/g%3E%3C/svg%3E") 50% 0/240px 64px no-repeat,
 /* Tor + Torraum unten */
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M30,61 C31,42 30,24 31,8 C90,6 150,9 209,7 C210,24 209,42 210,61'/%3E%3Cpath d='M95,7 C102,-2 138,-2 145,7'/%3E%3Ccircle cx='120' cy='22' r='1.8' fill='%230d0d0d'/%3E%3C/g%3E%3C/svg%3E") 50% 100%/240px 64px no-repeat,
 /* Eckfahnen-Bögen */
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2,24 C14,24 24,14 24,2' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/30px 30px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M28,24 C16,24 6,14 6,2' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 100% 0/30px 30px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2,6 C14,6 24,16 24,28' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/30px 30px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M28,6 C16,6 6,16 6,28' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 100% 100%/30px 30px no-repeat,
 /* Seiten- und Torauslinien: vier einzelne Linien, jeweils nur in der Laenge gestreckt -
    sitzen bei jeder Seitenlaenge genau 2px vom Rand, wie Eckboegen und Torraeume */
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 4' preserveAspectRatio='none'%3E%3Cpath d='M0,2 C120,1 280,3 400,2' fill='none' stroke='%230d0d0d' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 4px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 4' preserveAspectRatio='none'%3E%3Cpath d='M0,2 C120,3 280,1 400,2' fill='none' stroke='%230d0d0d' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100%/100% 4px no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 600' preserveAspectRatio='none'%3E%3Cpath d='M2,0 C1,200 3,400 2,600' fill='none' stroke='%230d0d0d' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/4px 100% no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 600' preserveAspectRatio='none'%3E%3Cpath d='M2,0 C3,200 1,400 2,600' fill='none' stroke='%230d0d0d' stroke-width='1.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 100% 0/4px 100% no-repeat}
@media (max-width:600px){.prose.spielfeld{padding:76px 20px}.prose.spielfeld::before{background-size:180px 48px,180px 48px,22px 22px,22px 22px,22px 22px,22px 22px,100% 4px,100% 4px,4px 100%,4px 100%}}

@media (prefers-reduced-motion:reduce){.ph-doodle{opacity:.18}}