/* WEB10 Basis + PETER-LAYOUT 10.10.: Kopf oben, Text fliesst mittig im eigenen Bereich, Leiste + Fusszeile immer unten, Hintergrund gut sichtbar. Kontrast-AA-Neupruefung durch FOA-Web offen. */
body[data-bg]::before{animation:none;transform:none}
.anim-canvas{position:fixed;inset:0;width:100%;height:100vh;z-index:-2;pointer-events:none}
@media(prefers-reduced-motion:reduce){body:not(.anim-force) .anim-canvas{display:none}}

:root{--pa:90%}
@media(prefers-color-scheme:light){:root{--pa:78%}}

body[data-bg]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;height:100vh;height:100dvh;min-height:0;overflow:hidden}
body[data-bg]>a.skip{position:absolute}
body[data-bg]>.top{grid-row:1;background:color-mix(in srgb,var(--panel) var(--pa),transparent)}
body[data-bg]>main{grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-block:.6rem;padding:1rem 1.25rem;border-radius:.6rem;background:color-mix(in srgb,var(--panel) var(--pa),transparent)}
body[data-bg]>.anim-toolbar{grid-row:3;width:auto;max-width:none;margin:0;padding:.35rem 1rem;justify-content:center;border-top:1px solid var(--border);background:color-mix(in srgb,var(--panel) 94%,transparent)}
body[data-bg]>footer{grid-row:4;margin-top:0;padding:.45rem 0;background:color-mix(in srgb,var(--panel) 94%,transparent)}
body[data-bg]::after{background:linear-gradient(rgba(8,12,18,.08),rgba(8,12,18,.16))}
@media(prefers-color-scheme:light){body[data-bg]::after{background:linear-gradient(rgba(245,247,250,.03),rgba(245,247,250,.06))}}

.anim-toolbar button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--muted);border-radius:.4rem;min-height:44px;min-width:44px;padding:.4rem .75rem;cursor:pointer}
.anim-toolbar button:disabled{cursor:default;opacity:1}
.anim-toolbar button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.anim-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.anim-toolbar nav{display:flex;flex-wrap:wrap;gap:.25rem}
.anim-toolbar nav a{padding-inline:.6rem}
.anim-toolbar [role=status]{min-width:2.5rem}

/* Text ausblenden: nur der Textbereich verschwindet, Kopf und untere Leiste bleiben. */
body.anim-picture>main,body.anim-picture>a.skip{display:none}
body.anim-picture::after{background:rgba(8,12,18,0)}

/* PETER-PAPIER 10.10. 18:2x: Kopf und untere Leiste/Fusszeile als Pergament-/Papierflaeche mit Holzrand (nur CSS, keine Bilder). Kontrast-AA-Neupruefung offen. */
body[data-bg]>.top,body[data-bg]>.anim-toolbar,body[data-bg]>footer{
  --text:#2b1d0c;--muted:#4a3418;--accent:#5a2a00;--panel:#f3e7c4;--border:#6b4423;color:#2b1d0c;position:relative;
  background:radial-gradient(ellipse at 18% 25%,rgba(255,255,255,.38),transparent 55%),radial-gradient(ellipse at 82% 75%,rgba(150,105,40,.22),transparent 60%),repeating-linear-gradient(0deg,rgba(120,85,30,.045) 0 1px,transparent 1px 4px),#e8d6a8;
  box-shadow:inset 0 0 34px rgba(120,80,20,.28)}
body[data-bg]>.top a,body[data-bg]>.anim-toolbar a,body[data-bg]>footer a{color:#5a2a00}
body[data-bg]>.top .brand{color:#4a2200}
body[data-bg]>.top{padding-bottom:12px;border-bottom:0}
body[data-bg]>.top::after,body[data-bg]>.anim-toolbar::before{content:"";position:absolute;left:0;right:0;height:12px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(0,0,0,.30)),repeating-linear-gradient(90deg,#6b4423 0 22px,#5c3a1c 22px 26px,#7a5330 26px 51px,#573619 51px 54px)}
body[data-bg]>.top::after{bottom:0;box-shadow:0 2px 6px rgba(0,0,0,.35)}
body[data-bg]>.anim-toolbar::before{top:0;box-shadow:0 -2px 6px rgba(0,0,0,.35)}
body[data-bg]>.anim-toolbar{padding-top:calc(.35rem + 12px);border-top:0}
body[data-bg]>footer{border-top:0}
body[data-bg]>.top .site-menu summary,body[data-bg]>.anim-toolbar button{background:#f6ecce;color:#2b1d0c;border:1px solid #6b4423}

/* PETER-ANIM3 10.10. 18:3x: Schrift kleiner, Text-Falter oben rechts, Ton-Schalter. */
html{font-size:14px}
body[data-bg]{font-size:15px}
body[data-bg] h1{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2}
body[data-bg] h2{font-size:1.05rem}
body[data-bg] .lead{font-size:1rem}
body[data-bg] main,body[data-bg] main p,body[data-bg] main li{font-size:.85rem}
body[data-bg]>.anim-fold{grid-column:1;grid-row:2;justify-self:end;align-self:start;margin:1rem 1.4rem;z-index:3;font:inherit;font-size:.85rem;color:#2b1d0c;background:#f6ecce;border:1px solid #6b4423;border-radius:.4rem;min-height:36px;padding:.25rem .7rem;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
body[data-bg]>.anim-fold:focus-visible{outline:3px solid #5a2a00;outline-offset:2px}
@media(max-width:1250px){body[data-bg]>.anim-fold{display:none}}
.anim-toolbar button[aria-pressed=true]{background:#e2c98a}
/* PETER-GRIDFIX 10.10.: Fold-Knopf erzeugte eine zweite Gitterspalte -> alles explizit in Spalte 1. */
body[data-bg]{grid-template-columns:minmax(0,1fr)}
body[data-bg]>.top,body[data-bg]>main,body[data-bg]>.anim-toolbar,body[data-bg]>footer{grid-column:1}

/* PETER-REGLER 10.10. 18:4x: Lautstaerke-Regler in der unteren Leiste. */
.anim-toolbar .anim-vol{width:110px;min-height:44px;margin:0;accent-color:#6b4423;cursor:pointer;flex:0 1 110px}
.anim-toolbar .anim-vol:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* PETER-SOUNDGRP 10.10. 18:5x: Sound-Schalter mit Zustand + Regler als Gruppe. */
.anim-toolbar .anim-soundgrp{display:flex;align-items:center;gap:.5rem}
.anim-toolbar .anim-vol-out{min-width:3.2em;font-size:.85rem;color:var(--text)}

/* PETER-RAND 10.10. 18:5x: Animation/Sound als kleine, dezente Gruppe rechts; Status-Text nur noch fuer Screenreader. */
body[data-bg]>.anim-toolbar{justify-content:flex-start}
.anim-toolbar [data-anim-picture]{order:1}
.anim-toolbar nav{order:2}
.anim-toolbar [data-anim-toggle]{order:3;margin-left:auto}
.anim-toolbar .anim-soundgrp{order:4}
.anim-toolbar [data-anim-status]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.anim-toolbar [data-anim-toggle],.anim-toolbar .anim-sound{min-height:36px;padding:.2rem .6rem;font-size:.85rem;opacity:.85}
.anim-toolbar [data-anim-toggle]:hover,.anim-toolbar .anim-sound:hover,.anim-toolbar [data-anim-toggle]:focus-visible,.anim-toolbar .anim-sound:focus-visible{opacity:1}
.anim-toolbar .anim-vol{width:80px;flex:0 1 80px;min-height:36px;opacity:.85}
.anim-toolbar .anim-soundgrp{gap:.35rem}

/* PETER-FUCHS 10.10.: Fuchs mit Spendendose auf der Spenden-Seite, Pixel-Art unverwischt. */
.fox-donate{float:right;width:154px;height:auto;margin:0 0 .5rem 1.2rem;image-rendering:pixelated;image-rendering:crisp-edges;shape-outside:margin-box}
@media(max-width:600px){.fox-donate{width:115px;margin-left:.8rem}}

/* PETER-DUNKEL 10.10. 20:4x: Spenden-Seite: dunkel-transparenter Textkasten mit weisser Schrift; Fuchs steht auf breiten Bildschirmen rechts neben dem Text im Hintergrundbild. */
body.page-spende[data-bg]>main{--text:#fff;--muted:rgba(255,255,255,.88);--accent:#ffd18a;--panel:#0b0805;--border:rgba(255,255,255,.4);color:#fff;background:transparent;border-radius:0}
body.page-spende[data-bg]>main a{color:#ffd9a0}
body.page-spende[data-bg]>main .back-top a{color:#ffd9a0;border-color:rgba(255,255,255,.45)}
body.page-spende[data-bg]>main .eye{color:#ffd18a}
body.page-spende[data-bg]>.fox-bg{display:none}
@media(min-width:1100px){
  body.page-spende[data-bg]>main{width:min(700px,calc(100% - 2rem));justify-self:start;margin-inline:max(1rem,calc((100% - 1120px)/2)) 0}
  body.page-spende[data-bg] main .fox-donate{display:none}
  /* Fuchs steht rechts neben dem Text; anim.js (PETER-FUCHSHOEHE) setzt margin-top so, dass seine Fuesse auf Hoehe der Unterkante von "Zum Anfang" stehen. Ohne Skript: unten im Hintergrund. */
  body.page-spende[data-bg]>.fox-bg{display:block;grid-column:1;grid-row:2;justify-self:start;align-self:end;margin:0 0 .6rem calc(max(1rem,(100% - 1120px)/2) + 700px + 2rem);width:154px;height:auto;z-index:2;position:relative;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
}
/* PETER-SCHWARZ 10.10. 20:5x: Spenden-Seite: Seitenhintergrund schwarz (kein Waldbild, keine Animation), Textkasten durchsichtig, weisse Schrift. Kopf und untere Leiste bleiben Pergament. */
body.page-spende[data-bg]{background:#000}
body.page-spende[data-bg]::before{background:none;animation:none}
body.page-spende[data-bg]::after{background:none}
body.page-spende[data-bg] .anim-canvas{display:none}
/* PETER-ANIMFEST 10.10. 21:1x: Animation ist immer aktiv, der Schalter "Animation: An/Aus" ist ausgeblendet (anim.js braucht das Element weiter, daher nur per CSS versteckt). */
.anim-toolbar [data-anim-toggle]{display:none!important}

/* PETER-BLASE 10.10. 21:1x: Fuchs ist ein Link (PayPal). Bei ausgeblendetem Text steht er mittig auf dem schwarzen Hintergrund mit Sprechblase. */
body.page-spende[data-bg] .fox-bg img{display:block;width:154px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
body.page-spende[data-bg] .fox-bg .fox-link{display:block;position:relative;pointer-events:auto;cursor:pointer;outline-offset:6px}
body.page-spende[data-bg] .fox-bg .fox-link:hover img,body.page-spende[data-bg] .fox-bg .fox-link:focus-visible img{filter:brightness(1.15)}
body.page-spende[data-bg] .fox-bg .fox-link:focus:not(:focus-visible){outline:none}
.fox-bubble{display:none}
body.page-spende.anim-picture[data-bg]>.fox-bg{display:block;grid-column:1;grid-row:2;justify-self:center;align-self:center;margin:0;width:154px;height:auto;position:relative;z-index:2}
body.page-spende .fox-bubble{display:block;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:18px;padding:.55rem 1rem;background:#fff8e6;color:#2b1d0e;border:2px solid #3a2a14;border-radius:12px;font:600 1.05rem/1.2 "Segoe UI",system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.55);animation:foa-bubble 3.2s ease-in-out infinite}
body.page-spende .fox-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-10px;border:10px solid transparent;border-top-color:#3a2a14;border-bottom:0}
body.page-spende .fox-bubble::before{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;margin-top:-3px;border:7px solid transparent;border-top-color:#fff8e6;border-bottom:0;z-index:1}
body.page-spende .fox-link:hover .fox-bubble{background:#fff}
@keyframes foa-bubble{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
@media(prefers-reduced-motion:reduce){body.page-spende .fox-bubble{animation:none}}

/* PETER-NAVWEG 10.10. 21:1x: Die drei Links See / Wald / Huette in der unteren Leiste sind ausgeblendet (anim.js braucht das nav-Element weiter, daher nur per CSS). */
.anim-toolbar>nav{display:none!important}

/* PETER-BLASE2 10.10. 21:1x: Sprechblase auch beim normalen Fuchs neben dem Text; der Fuchs im Textbereich (schmale Bildschirme) ist ebenfalls klickbar. */
body.page-spende .fox-donate{cursor:pointer}

/* PETER-PAPYRUS 10.10. 21:4x: Textkasten als Papyrus (Bild von Peter, 9-Teile-Rahmen), Rolle in der Ecke immer sichtbar (Seitenname darauf); Klick rollt den Text nach oben ein bzw. nach unten aus. Spendenseite behaelt ihren schwarzen Hintergrund mit weisser Schrift (kein Papyrus). */
.anim-fold{display:none!important}
body[data-bg]:not(.page-spende)>main{--text:#2b1d0e;--muted:#5a4426;--accent:#8a4b12;--border:rgba(90,60,20,.35);color:#2b1d0e;background:none;border-radius:0;border:solid transparent;border-width:51px 48px 54px;border-image:url(papyrus-offen.png) 17 16 18 fill/51px 48px 54px stretch;image-rendering:pixelated;padding:.2rem .5rem}
body[data-bg]:not(.page-spende)>main a{color:#7a3b0c}
body[data-bg]>main{max-height:calc(100vh - 12rem);transition:max-height .65s ease-in-out,opacity .3s}
body.anim-picture>main{display:block;max-height:102px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:max-height .65s ease-in-out,opacity .3s .4s,visibility 0s .7s}
@media(max-width:600px){
  body[data-bg]:not(.page-spende)>main{border-width:34px 32px 36px;border-image-width:34px 32px 36px;padding:.2rem .3rem}
}
@media(prefers-reduced-motion:reduce){body[data-bg]>main,body.anim-picture>main{transition:none}}
body.anim-noanim>main{transition:none!important}

/* PETER-HROLLE 10.10. 21:5x: Eingeklappt: waagerechte Rolle mit Seitenname oben links (dort, wo der Text beginnt). Ausgeklappt: kleiner Knopf "Text einklappen" unten rechts auf dem Pergament. */
.anim-scroll{display:block;position:relative;grid-column:1;grid-row:2;z-index:6;padding:0;border:0;cursor:pointer;font:inherit}
.anim-scroll .sc-label,.anim-scroll .sc-txt{pointer-events:none;white-space:nowrap}
body.anim-picture>.anim-scroll{justify-self:start;align-self:start;margin:.7rem 0 0 max(1rem,calc((100% - 1120px)/2));width:196px;height:40px;background:url(papyrus-rolle-h.png) center/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));animation:foa-hroll .35s ease-out}
body.anim-picture>.anim-scroll:hover{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)) brightness(1.1)}
body.anim-picture>.anim-scroll .sc-label{position:absolute;left:18%;right:18%;top:0;bottom:0;display:flex;align-items:center;justify-content:center;overflow:hidden;font:700 .95rem/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.04em;color:#3a2410;text-shadow:0 1px 0 rgba(255,240,200,.7)}
body.anim-picture>.anim-scroll .sc-txt{display:none}
body:not(.anim-picture)>.anim-scroll{justify-self:end;align-self:end;margin:0 calc(max(1rem,calc((100% - 1120px)/2)) + 100px) calc(.6rem + 14px) 0;width:auto;height:auto;padding:.32rem .85rem;background:#fff6df;border:1px solid #8a6a35;border-radius:6px;box-shadow:0 2px 0 rgba(58,36,16,.45);color:#3a2410;font:600 .8rem/1.2 "Segoe UI",system-ui,sans-serif}
body:not(.anim-picture)>.anim-scroll:hover{background:#fffaf0}
body:not(.anim-picture)>.anim-scroll .sc-label{display:none}
.anim-scroll:focus-visible{outline:3px solid #ffd18a;outline-offset:3px}
@media(min-width:1100px){
  body.page-spende:not(.anim-picture)>.anim-scroll{justify-self:start;margin:0 0 calc(.6rem + 8px) calc(max(1rem,calc((100% - 1120px)/2)) + 700px - 150px)}
}
@media(max-width:600px){
  body.anim-picture>.anim-scroll .sc-label{font-size:.8rem}
  body:not(.anim-picture)>.anim-scroll{margin-right:calc(max(1rem,calc((100% - 1120px)/2)) + 70px)}
}
@keyframes foa-hroll{from{transform:scaleX(.2);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){body.anim-picture>.anim-scroll{animation:none}}

/* PETER-TITEL 10.10. 21:5x: Auf der oberen Pergamentrolle steht mittig gross der Seitenname (nur bei ausgeklapptem Text, nicht auf der Spendenseite). */
.anim-title{display:none}
body:not(.anim-picture):not(.page-spende)>.anim-title{display:block;position:relative;grid-column:1;grid-row:2;justify-self:center;align-self:start;margin-top:calc(.6rem + 25px);transform:translateY(-50%);z-index:5;pointer-events:none;font:700 1.45rem/1.1 "Segoe UI",system-ui,sans-serif;letter-spacing:.06em;color:#3a2410;text-shadow:0 1px 0 rgba(255,240,200,.75);white-space:nowrap;max-width:calc(100% - 9rem);overflow:hidden;text-overflow:ellipsis;animation:foa-title .4s .45s both}
@keyframes foa-title{from{opacity:0}to{opacity:1}}
@media(max-width:600px){body:not(.anim-picture):not(.page-spende)>.anim-title{font-size:1.1rem;margin-top:calc(.6rem + 17px)}}
@media(prefers-reduced-motion:reduce){.anim-title{animation:none!important}}

/* PETER-RAHMEN: Pixel-Rahmen und Schrift */
@font-face{font-family:"Pixelify Sans";src:url(PixelifySans.ttf) format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
html body[data-bg],html body[data-bg] button,html body[data-bg] summary,html body[data-bg] .sc-label,html body[data-bg] .anim-title,html body[data-bg] .fox-bubble{font-family:"Pixelify Sans","Segoe UI",system-ui,sans-serif}
html body[data-bg]{letter-spacing:.01em}
body[data-bg]:not(.page-spende)>main :is(.notice,.preview-note,.badge,.card,.feature-list li,.downloadbox,.button,.wiki-nav a,.back-top a,.menu-links a,.placeholder){border-style:solid;border-color:transparent;border-radius:0;box-shadow:none;image-rendering:pixelated}
body[data-bg]:not(.page-spende)>main :is(.notice,.preview-note){border-width:8px;border-image:url(f-note.png) 4 fill/8px stretch;background:none;color:#3a2410;padding:.3rem .6rem;margin:14px 0}
body[data-bg]:not(.page-spende)>main :is(.card,.feature-list li){border-width:12px;border-image:url(f-box.png) 4 fill/12px stretch;background:none;color:#2b1d0e;padding:.4rem .7rem}
body[data-bg]:not(.page-spende)>main .downloadbox{border-width:12px;border-image:url(f-info.png) 4 fill/12px stretch;background:none;color:#2b1d0e;padding:.4rem .7rem}
body[data-bg]:not(.page-spende)>main .badge{border-width:8px;border-image:url(f-note.png) 4 fill/8px stretch;background:none;color:#3a2410;padding:0 .2rem}
body[data-bg]:not(.page-spende)>main .placeholder{border-width:8px;border-image:url(f-note.png) 4 fill/8px stretch;background:none;color:#702035;padding:0 .2rem}
body[data-bg]:not(.page-spende)>main .button{border-width:8px;border-image:url(f-btn.png) 4 fill/8px stretch;background:none;color:#2b1608;min-height:56px;padding:.35rem 1.1rem;font-weight:700;text-shadow:0 1px 0 rgba(255,225,160,.6)}
body[data-bg]:not(.page-spende)>main :is(.button.secondary,.wiki-nav a,.back-top a,.menu-links a){border-width:8px;border-image:url(f-btn2.png) 4 fill/8px stretch;background:none;color:#2b1608;padding:.3rem .8rem}
body[data-bg]:not(.page-spende)>main :is(.button,.wiki-nav a,.back-top a):hover{filter:brightness(1.07)}
body[data-bg]:not(.page-spende)>main :is(.button,.wiki-nav a,.back-top a):active{transform:translateY(2px)}
body[data-bg]:not(.page-spende)>main figure img,body[data-bg]:not(.page-spende)>main .shot{border:solid transparent;border-width:12px;border-image:url(f-box.png) 4 stretch;border-radius:0;image-rendering:auto}
/* Knoepfe in Kopf/Leiste */
html body[data-bg]>.anim-toolbar button,html body[data-bg]>.top .site-menu summary{border:solid transparent;border-width:8px;border-image:url(f-btn2.png) 4 fill/8px stretch;border-radius:0;background:none;color:#2b1608;box-shadow:none;image-rendering:pixelated;padding:.1rem .55rem;min-height:44px}
html body[data-bg]>.anim-toolbar button:hover:not(:disabled){filter:brightness(1.07)}
html body[data-bg]>.anim-toolbar button[aria-pressed=true]{border-image:url(f-btn.png) 4 fill/8px stretch;background:none}
html body[data-bg]>.anim-toolbar :is([data-anim-toggle],.anim-sound){min-height:40px;padding:0 .45rem;opacity:1}
html body:not(.anim-picture)>.anim-scroll{border:solid transparent;border-width:8px;border-image:url(f-btn2.png) 4 fill/8px stretch;border-radius:0;background:none;box-shadow:none;image-rendering:pixelated;padding:.1rem .5rem;color:#2b1608}

/* PETER-RAHMEN2: Lesbarkeit Pixel-Schrift */
html body[data-bg]:not(.page-spende)>main{font-size:1.1rem;line-height:1.55}
html body[data-bg]:not(.page-spende)>main :is(p,li,td,th,.lead,.small,.eye,figcaption,.status){color:#2b1d0e;font-size:1.1rem}
html body[data-bg]:not(.page-spende)>main :is(.notice,.preview-note,.badge,.button,.wiki-nav a){font-size:1.05rem}
html body[data-bg]>.anim-toolbar button,html body[data-bg]>.anim-toolbar .anim-vol-out,html body:not(.anim-picture)>.anim-scroll{font-size:.95rem}

/* PETER-RAHMEN3: Spende-Seite */
body.page-spende>main :is(.notice,.preview-note,.placeholder){border:solid transparent;border-width:8px;border-image:url(f-note.png) 4 fill/8px stretch;border-radius:0;background:none;box-shadow:none;image-rendering:pixelated;color:#3a2410;padding:.3rem .6rem}
body.page-spende>main .placeholder{padding:0 .2rem;color:#702035}

/* PETER-RAHMEN4: Schrift groesser */
html body[data-bg]:not(.page-spende)>main{font-size:1.3rem;line-height:1.5}
html body[data-bg]:not(.page-spende)>main :is(p,li,td,th,.lead,.small,.eye,figcaption,.status){font-size:1.3rem}
html body[data-bg]:not(.page-spende)>main h2{font-size:1.75rem}
html body[data-bg]:not(.page-spende)>main h3{font-size:1.5rem}
html body[data-bg]:not(.page-spende)>main :is(.notice,.preview-note,.badge,.button,.wiki-nav a,.back-top a){font-size:1.2rem}
html body[data-bg]>.anim-toolbar button,html body[data-bg]>.anim-toolbar .anim-vol-out,html body:not(.anim-picture)>.anim-scroll{font-size:1.05rem}
html body[data-bg] .anim-title{font-size:1.8rem}
html body[data-bg]>footer,html body[data-bg]>.top nav a{font-size:1.1rem}

/* PETER-RAHMEN5: alle Texte fett */
html body[data-bg],html body[data-bg] :is(main,p,li,td,th,a,span,div,small,figcaption,button,summary,footer,nav,label,code){font-weight:700}

/* PETER-RAHMEN6: kraeftiger und dunkler */
html body[data-bg]:not(.page-spende)>main,html body[data-bg]:not(.page-spende)>main :is(h1,h2,h3,p,li,td,th,.eye,.lead,.small,.sources,.sources h2,.sources p,figcaption,.status){color:#1f1308}
html body[data-bg]:not(.page-spende)>main a:not(.button){color:#4a1f00;text-decoration-thickness:2px}
html body[data-bg]:not(.page-spende)>main :is(h1,h2,h3,p,li,td,th,.eye,.lead,.small,a,figcaption,.status,.notice,.badge){-webkit-text-stroke:.45px currentColor;paint-order:stroke fill}
html body[data-bg]>.anim-toolbar button,html body[data-bg]>footer,html body[data-bg]>.top a{-webkit-text-stroke:.35px currentColor}

/* PETER-SCROLLBAR: Pixel-Rollbalken im Papyrus-Stil */
html body[data-bg]>main::-webkit-scrollbar{width:18px;height:18px}
html body[data-bg]>main::-webkit-scrollbar-track{background:repeating-linear-gradient(0deg,#d7ae6a 0 4px,#cfa45e 4px 8px);border-left:3px solid #6b4423;box-shadow:inset 3px 0 0 rgba(58,36,16,.28)}
html body[data-bg]>main::-webkit-scrollbar-thumb{background:linear-gradient(90deg,transparent 0 5px,rgba(58,36,16,.45) 5px 7px,transparent 7px 10px,rgba(58,36,16,.45) 10px 12px,transparent 12px),#9a6a32;border:3px solid #3a2410;border-radius:0;box-shadow:inset 3px 3px 0 #d9a85c,inset -3px -3px 0 #6b4423;min-height:48px}
html body[data-bg]>main::-webkit-scrollbar-thumb:hover{background-color:#b27c3a}
html body[data-bg]>main::-webkit-scrollbar-button{display:none;width:0;height:0}
html body[data-bg]>main::-webkit-scrollbar-corner{background:#cfa45e}
@supports not selector(::-webkit-scrollbar){html body[data-bg]>main{scrollbar-width:auto;scrollbar-color:#9a6a32 #d7ae6a}}

/* PETER-SCROLLBAR2: modern dezent (ersetzt Pixel-Rollbalken) */
html body[data-bg]>main::-webkit-scrollbar{width:10px;height:10px}
html body[data-bg]>main::-webkit-scrollbar-track{background:transparent;border:0;box-shadow:none}
html body[data-bg]>main::-webkit-scrollbar-thumb{background:rgba(74,42,12,.55);background-clip:padding-box;border:2px solid transparent;border-radius:10px;box-shadow:none;min-height:48px}
html body[data-bg]>main::-webkit-scrollbar-thumb:hover{background:rgba(74,42,12,.85);background-clip:padding-box}
html body[data-bg]>main::-webkit-scrollbar-button{display:none;width:0;height:0}
html body[data-bg]>main::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){html body[data-bg]>main{scrollbar-width:thin;scrollbar-color:rgba(74,42,12,.6) transparent}}

/* PETER-LEISTE: breite Bildschirme: Menue rechts oben, untere Leiste ueber die ganze Breite (Pergament oder Symbole, umschaltbar), Rechtezeile rechts in der Leiste. */
@media(min-width:1100px){
  html body[data-bg]{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto minmax(0,1fr) auto}
  html body[data-bg]>.top{grid-column:2;grid-row:1}
  html body[data-bg]>:is(main,.anim-scroll,.anim-title,.fox-bg,.anim-fold){grid-column:1;grid-row:1/3!important}
  html body[data-bg]>main{max-height:calc(100dvh - 5.4rem)}
  html body[data-bg]>.top{padding:.7rem .8rem 1.4rem}
  html body[data-bg]>.top nav.w{display:block;max-width:none;padding:0}
  html body[data-bg]>.top .nav-bar{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
  html body[data-bg]>.top .brand{font-size:1.2rem;line-height:1.2}
  html body[data-bg]>.top .site-menu{display:none}
  html body[data-bg]>.top .desktop-links{display:flex!important;flex-direction:column;gap:.15rem;margin-top:.7rem}
  html body[data-bg]>.top .desktop-links a{padding:.15rem 0;font-size:1.15rem}
  html body[data-bg]>.anim-toolbar{grid-column:1/-1;grid-row:3;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:.6rem;padding:calc(.35rem + 12px) 1rem .35rem}
  html body[data-bg]>.anim-toolbar .anim-soundgrp{order:2;flex:0 0 auto;width:auto;flex-wrap:nowrap}
  html body[data-bg]>.anim-toolbar .anim-sound{white-space:nowrap}
  html body[data-bg]>.anim-toolbar .anim-vol{flex:0 0 100px;width:100px}
  html body[data-bg]>.anim-toolbar .bar-switch{order:6;margin-left:.4rem}
  html body[data-bg]>footer{grid-column:1/-1;grid-row:3;align-self:stretch;justify-self:end;display:flex;align-items:center;z-index:2;background:none;box-shadow:none;padding:12px 1.2rem .35rem;pointer-events:none}
  html body[data-bg]>footer .w{max-width:none;margin:0;padding:0;font-size:1rem;white-space:nowrap}
  html body[data-bg]>footer a{pointer-events:auto}
  /* Symbol-Leiste */
}
.bar-switch{font:inherit;display:none!important}
@media(min-width:1100px){html body[data-bg]>.anim-toolbar .bar-switch{display:inline-flex!important}}
/* Symbol-Knoepfe (Leiste Z) */
@media(min-width:1100px){
  html body.bar-sym[data-bg]>.anim-toolbar :is([data-anim-picture],.anim-sound,.bar-switch){font-size:0;width:38px;min-width:38px;min-height:38px;height:38px;padding:0;border:0;border-image:none;border-radius:50%;background:#3a2410 center/20px 20px no-repeat;box-shadow:none;filter:none}
  html body.bar-sym[data-bg]>.anim-toolbar :is([data-anim-picture],.anim-sound,.bar-switch):hover{background-color:#5a3a1c;filter:none}
  html body.bar-sym[data-bg]>.anim-toolbar [data-anim-picture]{background-image:url(ic-eye.svg)}
  html body.bar-sym[data-bg]>.anim-toolbar [data-anim-picture][aria-pressed=true]{background-image:url(ic-eyeoff.svg)}
  html body.bar-sym[data-bg]>.anim-toolbar .anim-sound{background-image:url(ic-snd-off.svg)}
  html body.bar-sym[data-bg]>.anim-toolbar .anim-sound[aria-pressed=true]{background-image:url(ic-snd-on.svg)}
  html body.bar-sym[data-bg]>.anim-toolbar .bar-switch{background-image:url(ic-layout.svg)}
}
/* Einklapp-Knopf: rundes Symbol mit Pfeil (Tooltip), ausgeklappter Zustand */
html body[data-bg]:not(.anim-picture)>.anim-scroll{border:0;border-image:none;border-radius:50%;width:42px;height:42px;padding:0;font-size:0;background:rgba(58,34,12,.84);box-shadow:0 2px 8px rgba(0,0,0,.4)}
html body[data-bg]:not(.anim-picture)>.anim-scroll:hover{background:rgba(40,22,6,.95)}
html body[data-bg]:not(.anim-picture)>.anim-scroll .sc-txt{display:block;font-size:0;width:0;height:0}
html body[data-bg]:not(.anim-picture)>.anim-scroll::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);border:7px solid transparent;border-top:0;border-bottom:10px solid #fbe9bf}

@media(max-width:600px){html body[data-bg]:not(.anim-picture)>.anim-scroll{margin-right:26px;margin-bottom:calc(.6rem + 8px);width:38px;height:38px}}

html body.page-spende[data-bg]:not(.anim-picture)>.anim-scroll{box-shadow:0 0 0 2px rgba(251,233,191,.7),0 2px 8px rgba(0,0,0,.5)}

/* PETER-LEISTE3: Menue-Spalte rechts ueber die volle Hoehe mit Holzrand an der linken Seite (wie der Rand oben an der unteren Leiste). */
@media(min-width:1100px){
  html body[data-bg]>.top{grid-row:1/3;padding:.7rem .8rem 1rem calc(.8rem + 12px)}
  html body[data-bg]>.top::after{top:0;bottom:0;left:0;right:auto;width:12px;height:auto;background:linear-gradient(to right,rgba(255,255,255,.22),rgba(0,0,0,.30)),repeating-linear-gradient(0deg,#6b4423 0 22px,#5c3a1c 22px 26px,#7a5330 26px 51px,#573619 51px 54px);box-shadow:2px 0 6px rgba(0,0,0,.35)}
  html body[data-bg]>.anim-toolbar{z-index:3}
}

@media(min-width:1100px){html body[data-bg]>footer{z-index:4}}

/* PETER-LEISTE4: Menue-Spalte nur so hoch wie der Inhalt (bis "Lizenz"), Holzrand links und unten; Pfeil-Knopf weiter rechts. */
@media(min-width:1100px){
  html body[data-bg]>.top{grid-row:1;padding:.7rem .8rem calc(12px + .8rem) calc(.8rem + 12px)}
  html body[data-bg]>.top::after{top:auto;bottom:0;left:0;right:0;width:auto;height:12px;background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(0,0,0,.30)),repeating-linear-gradient(90deg,#6b4423 0 22px,#5c3a1c 22px 26px,#7a5330 26px 51px,#573619 51px 54px);box-shadow:0 2px 6px rgba(0,0,0,.35)}
  html body[data-bg]>.top::before{content:"";position:absolute;top:0;bottom:0;left:0;width:12px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,.22),rgba(0,0,0,.30)),repeating-linear-gradient(0deg,#6b4423 0 22px,#5c3a1c 22px 26px,#7a5330 26px 51px,#573619 51px 54px);box-shadow:2px 0 6px rgba(0,0,0,.35)}
  html body[data-bg]:not(.anim-picture):not(.page-spende)>.anim-scroll{margin-right:calc(max(1rem,calc((100% - 1120px)/2)) + 52px)}
}

/* PETER-LEISTE5: saubere Ecke unten links an der Menue-Spalte (senkrechter Rand endet auf dem unteren Rand, Rand unten liegt darueber). */
@media(min-width:1100px){
  html body[data-bg]>.top::before{bottom:12px;z-index:1;box-shadow:none;background:linear-gradient(to right,rgba(255,255,255,.22),rgba(0,0,0,.30)),repeating-linear-gradient(0deg,#6b4423 0 22px,#5c3a1c 22px 26px,#7a5330 26px 51px,#573619 51px 54px)}
  html body[data-bg]>.top::after{z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.35),-2px 0 5px rgba(0,0,0,.25)}
  html body[data-bg]>.top{box-shadow:inset 0 0 34px rgba(120,80,20,.28),-3px 0 6px rgba(0,0,0,.3)}
}

/* PETER-PFEIL: Einklapp-Knopf halb so gross, unter dem Rollbalken. */
html body[data-bg]:not(.anim-picture)>.anim-scroll{width:22px;height:22px}
html body[data-bg]:not(.anim-picture)>.anim-scroll::after{border-width:4px;border-top:0;border-bottom:6px solid #fbe9bf;transform:translate(-50%,-62%)}
html body[data-bg]:not(.anim-picture):not(.page-spende)>.anim-scroll{margin-bottom:32px}
@media(min-width:1100px){html body[data-bg]:not(.anim-picture):not(.page-spende)>.anim-scroll{margin-right:calc(max(1rem,calc((100% - 1120px)/2)) + 42px)}}
@media(max-width:600px){html body[data-bg]:not(.anim-picture):not(.page-spende)>.anim-scroll{width:22px;height:22px;margin-right:34px;margin-bottom:24px}}

/* PETER-PFEIL2: Kreis nur beim Darueberfahren sichtbar, Pfeil dunkel; etwas tiefer. */
html body[data-bg]:not(.anim-picture)>.anim-scroll{background:transparent;box-shadow:none;transition:background-color .2s}
html body[data-bg]:not(.anim-picture)>.anim-scroll::after{border-bottom-color:#3a2410;transition:border-color .2s}
html body[data-bg]:not(.anim-picture)>.anim-scroll:is(:hover,:focus-visible){background:rgba(58,34,12,.88)}
html body[data-bg]:not(.anim-picture)>.anim-scroll:is(:hover,:focus-visible)::after{border-bottom-color:#fbe9bf}
html body[data-bg]:not(.anim-picture):not(.page-spende)>.anim-scroll{margin-bottom:24px}
@media(max-width:600px){html body[data-bg]:not(.anim-picture):not(.page-spende)>.anim-scroll{margin-bottom:18px}}
html body.page-spende[data-bg]:not(.anim-picture)>.anim-scroll::after{border-bottom-color:#fbe9bf}
html body.page-spende[data-bg]:not(.anim-picture)>.anim-scroll{box-shadow:none}

/* PETER-PFEIL3: Pfeil-Knopf wird per Skript an die echte Textbox jeder Seite gesetzt (rechts unten). */
html body[data-bg]:not(.anim-picture)>.anim-scroll.pos{position:fixed;left:calc(var(--sb-x) - 11px);top:calc(var(--sb-y) - 11px);right:auto;bottom:auto;margin:0!important;z-index:6}

/* PETER-WIKI: Inhaltsverzeichnis, Tabellen, Code im Papyrus-Stil */
html body[data-bg]:not(.page-spende)>main :is(.wiki-toc summary,.site-menu summary){border:solid transparent;border-width:8px;border-image:url(f-btn2.png) 4 fill/8px stretch;border-radius:0;background:none;color:#2b1608;padding:.2rem .7rem;image-rendering:pixelated;box-shadow:none;cursor:pointer}
html body[data-bg]:not(.page-spende)>main .wiki-toc[open] summary{border-image:url(f-btn.png) 4 fill/8px stretch}
html body[data-bg]:not(.page-spende)>main :is(table){border-collapse:collapse;background:rgba(247,236,208,.55)}
html body[data-bg]:not(.page-spende)>main :is(th,td){border:2px solid #6b4423;padding:.3rem .6rem}
html body[data-bg]:not(.page-spende)>main th{background:rgba(214,176,106,.7)}
html body[data-bg]:not(.page-spende)>main :is(pre,code){background:rgba(58,36,16,.88);color:#f7ecd0;border-radius:0;border:2px solid #3a2410;font-family:Consolas,"Courier New",monospace;font-weight:700;-webkit-text-stroke:0}
html body[data-bg]:not(.page-spende)>main code{padding:0 .3rem}
html body[data-bg]:not(.page-spende)>main pre{padding:.6rem .8rem;overflow:auto}
html body[data-bg]:not(.page-spende)>main pre code{border:0;padding:0;background:none}
html body[data-bg]:not(.page-spende)>main hr{border:0;border-top:2px solid rgba(90,52,16,.5)}

/* PETER-HOEHE: Papyrus passt sich bei kurzen Seiten dem Inhalt an (statt die ganze Hoehe zu fuellen). */
html body[data-bg]:not(.page-spende)>main{align-self:start}

/* PETER-SPENDEBILD: Spenden-Seite mit zufaelligem Schatzhoehlen-Hintergrund (4 Bilder), Text auf dunklem Kasten. */
body.page-spende[data-bg].sp1{--spbg:url(spende-1-960.webp)}
body.page-spende[data-bg].sp2{--spbg:url(spende-2-960.webp)}
body.page-spende[data-bg].sp3{--spbg:url(spende-3-960.webp)}
body.page-spende[data-bg].sp4{--spbg:url(spende-4-960.webp)}
@media(min-width:900px){
  body.page-spende[data-bg].sp1{--spbg:url(spende-1-1672.webp)}
  body.page-spende[data-bg].sp2{--spbg:url(spende-2-1672.webp)}
  body.page-spende[data-bg].sp3{--spbg:url(spende-3-1672.webp)}
  body.page-spende[data-bg].sp4{--spbg:url(spende-4-1672.webp)}
}
html body.page-spende[data-bg]::before{background:var(--spbg,none) center/cover no-repeat;image-rendering:pixelated;image-rendering:crisp-edges}
html body.page-spende[data-bg]>main{background:rgba(12,7,3,.7);border:2px solid rgba(255,225,160,.35);padding:.8rem 1.2rem;align-self:start}
@media(min-width:1100px){html body.page-spende[data-bg]>main{margin-inline:max(1rem,calc((100% - 1120px)/2)) 0}}

/* PETER-LESBAR: Ziffern in lesbarer Schrift (Pixelify verwechselt 2/8 und 5/S), Rechtsseiten komplett in normaler Schrift, Tageszeit-Toenung. */
@font-face{font-family:"Pixelify Sans";src:local("Segoe UI"),local("SegoeUI"),local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");font-weight:400;unicode-range:U+0030-0039}
@font-face{font-family:"Pixelify Sans";src:local("Segoe UI Bold"),local("SegoeUI-Bold"),local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");font-weight:700;unicode-range:U+0030-0039}
html body.page-legal[data-bg]:not(.page-spende)>main :is(p,li,td,th,address,dd,dt,small,div,span,a,figcaption){font-family:"Segoe UI",system-ui,Arial,sans-serif;font-weight:600;-webkit-text-stroke:0;letter-spacing:0;font-size:1.1rem;line-height:1.6}
html body.page-legal[data-bg]:not(.page-spende)>main :is(h2,h3){font-family:"Segoe UI",system-ui,Arial,sans-serif;font-weight:700;-webkit-text-stroke:0;letter-spacing:0}
html body.tod-dusk[data-bg]:not(.page-spende)::after{background:linear-gradient(rgba(255,150,70,.10),rgba(130,60,90,.20))}
html body.tod-night[data-bg]:not(.page-spende)::after{background:linear-gradient(rgba(10,25,70,.26),rgba(5,10,45,.38))}

html body.page-legal[data-bg]:not(.page-spende)>main :is(p,li,td,th,address,dd,dt,small,div,span,a,figcaption){font-size:1.2rem}

/* PETER-FUCHSPLATZ 10.10. 23:0x: Fuchs steht je Hintergrundbild an einer anderen Stelle (x in Prozent der Fensterbreite, Fuesse in Prozent der Fensterhoehe: siehe anim.js). */
@media(min-width:1100px){
  body.page-spende.sp1:not(.anim-picture)[data-bg]>.fox-bg{margin-left:clamp(calc(max(1rem,(100% - 1120px)/2) + 700px + 2rem),calc(70vw - 77px),calc(100vw - 250px - 154px - 1rem))}
  body.page-spende.sp2:not(.anim-picture)[data-bg]>.fox-bg{margin-left:clamp(calc(max(1rem,(100% - 1120px)/2) + 700px + 2rem),calc(66vw - 77px),calc(100vw - 250px - 154px - 1rem))}
  body.page-spende.sp3:not(.anim-picture)[data-bg]>.fox-bg{margin-left:clamp(calc(max(1rem,(100% - 1120px)/2) + 700px + 2rem),calc(72vw - 77px),calc(100vw - 250px - 154px - 1rem))}
  body.page-spende.sp4:not(.anim-picture)[data-bg]>.fox-bg{margin-left:clamp(calc(max(1rem,(100% - 1120px)/2) + 700px + 2rem),calc(74vw - 77px),calc(100vw - 250px - 154px - 1rem))}
}

/* PETER-TEXTMITTE 10.10. 23:1x: Spenden-Seite: Textkasten vertikal mittig (leicht nach unten versetzt) statt oben am Rand. */
@media(min-width:1100px){
  html body.page-spende[data-bg]:not(.anim-picture)>main{align-self:center;margin-top:3vh;margin-bottom:0;max-height:calc(100% - 3vh - 1rem)}
}

/* PETER-FUCHS-FREI 10.10. 23:2x: Fuchs ohne Spendendose am Seitenende (Start, Download, Hilfe, Discord, 404) mit Spruch. */
.fox-free{display:block;width:134px;margin:3.4rem 2.4rem 0 auto;position:relative;pointer-events:none}
.fox-free img{display:block;width:134px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.fox-free .fox-bubble{display:block;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:14px;padding:.5rem .9rem;background:#fff8e6;color:#2b1d0e;border:2px solid #3a2a14;border-radius:12px;font:600 1.05rem/1.2 "Segoe UI",system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.45);animation:foa-bubble 3.2s ease-in-out infinite}
.fox-free .fox-bubble::after{content:"";position:absolute;top:100%;left:50%;margin-left:-10px;border:10px solid transparent;border-top-color:#3a2a14;border-bottom:0}
.fox-free .fox-bubble::before{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;margin-top:-3px;border:7px solid transparent;border-top-color:#fff8e6;border-bottom:0;z-index:1}
@media(prefers-reduced-motion:reduce){.fox-free .fox-bubble{animation:none}}

/* PETER-FUCHS-ECKE 10.10. 23:2x: Auf grossen Fenstern steht der Fuchs fest unten rechts unter dem Menue (immer sichtbar), sonst am Seitenende. */
@media(min-width:1100px) and (min-height:760px){
  body[data-bg]:not(.anim-picture) .fox-free{position:fixed;right:calc(125px - 50px);bottom:68px;margin:0;width:100px;z-index:3}
  body[data-bg] .fox-free img{width:100px}
  body[data-bg] .fox-free .fox-bubble{font-size:.95rem;padding:.4rem .75rem}
}
/* PETER-FUCHS-HAMMER 10.10. 23:3x: breitere Fuchs-Bilder (Hammer / Balken); FOA-Tools-Fuchs klopft. */
.fox-free.fox-w{width:fit-content}
.fox-free.fox-w img{width:auto;height:300px;image-rendering:pixelated;image-rendering:crisp-edges}
@media(min-width:1100px) and (min-height:760px){
  body[data-bg]:not(.anim-picture) .fox-free.fox-w{right:30px;width:fit-content}
  body[data-bg] .fox-free.fox-w img{width:auto;height:225px}
}
@keyframes foa-klopf{0%,55%,100%{transform:none}62%{transform:translate(3px,4px) rotate(1.6deg)}70%{transform:none}78%{transform:translate(2px,3px) rotate(1deg)}86%{transform:none}}
.fox-free img[src$="fuchs-hammer.png"]{transform-origin:50% 100%;animation:foa-klopf 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.fox-free img[src$="fuchs-hammer.png"]{animation:none}}

/* PETER-TAVERNE 10.10. 23:5x: Gruppenbild in der Taverne (Discord) + wechselnde Tavernen-Figur unten rechts. */
.taverne{margin:2rem 0 .5rem;text-align:center}
.taverne img{display:inline-block;width:min(100%,720px);height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.fox-free.fox-w img[style*="--ph"]{height:calc(var(--ph)*2px)}
@media(min-width:1100px) and (min-height:760px){
  body[data-bg] .fox-free.fox-w img[style*="--ph"]{height:calc(var(--ph)*1.5px)}
}

/* PETER-TAVERNE2: kein Pixelrahmen um das Gruppenbild */
html body .taverne img{border:0!important;border-image:none!important;background:none!important;padding:0!important;box-shadow:none!important}

/* PETER-FUCHS-IMMER 11.10.: Fuchs/Figur unten rechts bleibt auch bei ausgeblendetem Text stehen (JS legt dann eine Kopie .fox-clone direkt in body). */
body:not(.anim-picture)>.fox-clone{display:none!important}
body.anim-picture>.fox-clone{display:block;position:fixed;right:75px;bottom:68px;margin:0;width:100px;z-index:3;pointer-events:none}
body.anim-picture>.fox-clone img{display:block;width:100px;height:auto;border:0!important;border-image:none!important;background:none!important;padding:0!important;box-shadow:none!important;image-rendering:pixelated;image-rendering:crisp-edges}
body.anim-picture>.fox-clone .fox-bubble{font-size:.95rem;padding:.4rem .75rem}
body.anim-picture>.fox-clone.fox-w{right:30px;width:fit-content}
body.anim-picture>.fox-clone.fox-w img{width:auto;height:225px}
body.anim-picture>.fox-clone.fox-w img[style*="--ph"]{height:calc(var(--ph)*1.5px)}

/* PETER-COMMUNITY 11.10.: Discord-Seite - Gruppenbild oben, darunter Ueberschrift + Button. */
.community-cta{text-align:center;margin:.4rem 0 1.6rem}
.community-cta h2{margin:.2rem 0 .8rem}
.community-cta p{margin:0}
.taverne{margin:1rem 0 .6rem}


/* PETER-BAUSTELLE 11.10.: 404-Seite - Fuchs mit Baustellenschild (fuchs-baustelle.png, 124x150, 2x / Ecke 1.5x). */
.fox-free.fox-w img[src*="b404-"]{width:auto;height:300px}
@media(min-width:1100px) and (min-height:760px){
  body[data-bg] .fox-free.fox-w img[src*="b404-"]{width:auto;height:225px}
}


/* PETER-COMMUNITY2 11.10.: Discord-Seite - Kopf (Community / Discord / Fragen ...) mittig im Text. */
main:has(.community-cta) .hero{text-align:center}
main:has(.community-cta) .hero :is(.eye,h1,.lead){text-align:center;margin-left:auto;margin-right:auto}

/* PETER-404BILD 11.10.: 404-Seite - eigener Hintergrund (404-bg) + zufaellige Bauarbeiter-Figur (b404-*.png, 150 px hoch, 2x / Ecke 1.5x). */
body.page-b404[data-bg]{--b4bg:url(404-bg-960.webp)}
@media(min-width:900px){ body.page-b404[data-bg]{--b4bg:url(404-bg-1672.webp)} }
html body.page-b404[data-bg]::before{background:var(--b4bg,none) center/cover no-repeat}
html body.page-b404[data-bg] .anim-canvas{display:none}

/* PETER-404SZENE 11.10.: 404-Seite ohne Text/Rolle - nur Hintergrund, darauf stehen die 10 Figuren (3 Tiefenreihen, Groesse nach Reihe). Text bleibt nur fuer Screenreader (unsichtbar). */
html body.page-b404[data-bg]>main{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
html body.page-b404[data-bg]>:is(.anim-title,.anim-fold,.anim-scroll){display:none!important}
html body.page-b404[data-bg]>.anim-toolbar [data-anim-picture]{display:none!important}
.b404-scene{position:fixed;left:0;top:0;right:0;bottom:0;z-index:3;pointer-events:none;overflow:hidden}
.b404-fig{position:absolute;display:block;width:auto;max-width:none;transform:translateX(-50%);image-rendering:pixelated;image-rendering:crisp-edges;border:0!important;border-image:none!important;background:none!important;padding:0!important;box-shadow:none!important}
.b404-back{bottom:calc(80px + 22vh);height:clamp(90px,20vh,230px)}
.b404-mid{bottom:calc(80px + 11vh);height:clamp(105px,25vh,280px)}
.b404-front{bottom:80px;height:clamp(120px,30vh,330px)}
.b404-f1{left:14%}
.b404-f2{left:34%}
.b404-f3{left:56%}
.b404-f4{left:78%}
.b404-f5{left:8%}
.b404-f6{left:45%}
.b404-f7{left:90%}
.b404-f8{left:22%}
.b404-f9{left:66%}
.b404-f10{left:80%}
@media(max-width:700px){
  .b404-back{display:none}
  .b404-mid{bottom:calc(70px + 8vh);height:clamp(90px,20vh,170px)}
  .b404-front{bottom:70px;height:clamp(100px,24vh,200px)}
  .b404-f5{left:14%}
  .b404-f6{left:50%}
  .b404-f7{left:86%}
  .b404-f8{left:30%}
  .b404-f9{left:60%}
  .b404-f10{left:84%}
}

/* PETER-404SZENE2 11.10.: Figurengroesse auch nach Fensterbreite begrenzen; bei schmalen Fenstern Abstand nach unten wegen Leiste und Fuss (Figuren stehen nicht auf der Leiste). */
.b404-back{height:clamp(80px,min(20vh,12vw),230px)}
.b404-mid{height:clamp(95px,min(25vh,15vw),280px)}
.b404-front{height:clamp(110px,min(30vh,18vw),330px)}
@media(max-width:1099px){
  .b404-back{bottom:calc(140px + 16vh)}
  .b404-mid{bottom:calc(140px + 8vh)}
  .b404-front{bottom:140px}
}
@media(max-width:700px){
  .b404-mid{bottom:calc(135px + 6vh);height:clamp(85px,min(20vh,24vw),170px)}
  .b404-front{bottom:135px;height:clamp(95px,min(24vh,28vw),200px)}
}

/* PETER-404SZENE3: kleiner, ohne Ueberlappung (ab 1100px) */
@media(min-width:1100px){
html body .b404-scene .b404-back{height:clamp(70px,min(17vh,10.5vw),195px)!important}
html body .b404-scene .b404-mid{height:clamp(85px,min(21vh,13vw),240px)!important}
html body .b404-scene .b404-front{height:clamp(95px,min(25.5vh,15.5vw),280px)!important}
html body .b404-scene .b404-f4{left:72%!important}
html body .b404-scene .b404-f9{left:60%!important}
html body .b404-scene .b404-f10{left:82%!important}
html body .b404-scene .b404-f7{left:92%!important}
html body .b404-scene .b404-f5{left:9%!important}
html body .b404-scene .b404-f1{left:17%!important}
html body .b404-scene .b404-f8{left:26%!important}
}

/* PETER-404SZENE4: nur 5 Figuren, weich gerendert (passt zum gemalten BG) */
html body .b404-scene .b404-f1,html body .b404-scene .b404-f2,html body .b404-scene .b404-f4,html body .b404-scene .b404-f5,html body .b404-scene .b404-f10{display:none!important}
html body .b404-scene .b404-fig{image-rendering:auto!important;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
html body .b404-scene .b404-f8{left:20%!important}
html body .b404-scene .b404-f6{left:42%!important}
html body .b404-scene .b404-f3{left:58%!important}
html body .b404-scene .b404-f9{left:68%!important}
html body .b404-scene .b404-f7{left:86%!important}
@media(max-width:700px){html body .b404-scene .b404-f3{display:none!important}html body .b404-scene .b404-f8{left:18%!important}html body .b404-scene .b404-f6{left:50%!important}html body .b404-scene .b404-f9{left:80%!important}html body .b404-scene .b404-f7{display:none!important}}

/* PETER-404SZENE5: Figuren deutlich groesser (Massstab zum BG) */
html body .b404-scene .b404-back{height:clamp(130px,min(31vh,19vw),360px)!important}
html body .b404-scene .b404-mid{height:clamp(150px,min(37vh,22vw),420px)!important}
html body .b404-scene .b404-front{height:clamp(170px,min(43vh,25vw),480px)!important}
@media(max-width:700px){html body .b404-scene .b404-mid{height:clamp(120px,min(30vh,40vw),260px)!important}html body .b404-scene .b404-front{height:clamp(130px,min(34vh,46vw),300px)!important}}

/* PETER-404SZENE6: 2 Figuren pro Aufruf (wechselnd), Slots s0/s1 */
html body .b404-scene .b404-front{height:clamp(190px,min(50vh,28vw),540px)!important}
html body .b404-scene .b404-s0{left:36%!important}
html body .b404-scene .b404-s1{left:63%!important}
@media(max-width:700px){html body .b404-scene .b404-front{height:clamp(140px,min(36vh,50vw),320px)!important}html body .b404-scene .b404-s0{left:27%!important}html body .b404-scene .b404-s1{left:73%!important}}

/* PETER-404TALK: Sprechblasen */
.b404-bub{position:fixed;z-index:4;transform:translateX(-50%);max-width:min(230px,38vw);padding:.45em .7em;border:2px solid #5a3b1f;border-radius:12px;background:#f7edd2;color:#3a2410;font-size:clamp(12px,1.25vw,16px);line-height:1.3;text-align:center;box-shadow:0 3px 6px rgba(0,0,0,.3);pointer-events:none}
.b404-bub::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:#5a3b1f}

/* PETER-COMMUNITY3: Kopfbereich exakt mittig im Pergament (kein 900px-Limit links ausgerichtet) */
main:has(.community-cta) .hero{max-width:none;margin-left:0;margin-right:0}

/* PETER-COMMUNITY4: Beitreten-Button mittig */
main .community-cta,main .community-cta p{text-align:center;max-width:none;margin-left:0;margin-right:0}
main .community-cta .button{display:inline-block;margin-left:auto;margin-right:auto}

/* PETER-ROLLEN: Holztafel mit Figur (Karten je Seite angepasst) */
main .cards,main .feature-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;list-style:none;padding:0}
main .rolle{position:relative;background:linear-gradient(#7a5230,#6a4526)!important;color:#f6e7c4!important;border:3px solid #3a2410!important;border-radius:0!important;box-shadow:inset 0 0 0 3px #8d6339,3px 4px 0 #2b1708!important;padding:18px 18px 16px 130px!important;min-height:112px;margin:0 0 14px}
main .cards .rolle,main .feature-list .rolle{margin:0}
main .rolle::before,main .rolle::after{content:"";position:absolute;top:7px;width:6px;height:6px;background:#c9c2b0;box-shadow:0 0 0 1px #2b1708}
main .rolle::before{left:7px}main .rolle::after{right:7px}
main .rolle h2,main .rolle h3,main .rolle h4{color:#f3c15a!important;margin:0 0 .4em;padding-right:6.5em}
main .rolle p,main .rolle li,main .rolle strong{color:#f6e7c4}
main .rolle p:last-child{margin-bottom:0}
main .rolle a:not(.button){color:#ffd98a!important}
main .rolle-av{position:absolute;left:18px;top:50%;width:96px;height:96px;margin-top:-48px;image-rendering:pixelated;border:3px solid #3a2410;background:#4a3019;box-shadow:inset 0 0 0 2px #8d6339;box-sizing:content-box}
main .rolle-tag{position:absolute;right:16px;top:9px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#d9b06a}
main .downloadbox.rolle,main .callout.rolle,main p.notice.rolle{display:block}
main p.notice.rolle,main .callout.rolle{min-height:90px}
@media(max-width:560px){main .rolle{padding-left:112px!important}main .rolle-av{width:72px;height:72px;margin-top:-36px;left:14px}main .cards,main .feature-list{grid-template-columns:1fr}}

/* PETER-ROLLEN2: Raster erzwingen, Rollenname ueber der Ueberschrift, schmalere Figur */
main .cards,main .feature-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))!important}
main .rolle{padding-left:116px!important}
main .rolle-av{width:80px;height:80px;margin-top:-40px;left:16px}
main .rolle-tag{position:static;display:block;margin:0 0 3px;font-size:11px}
main .rolle h2,main .rolle h3,main .rolle h4{padding-right:0}
@media(max-width:560px){main .rolle{padding-left:104px!important}main .rolle-av{width:72px;height:72px;margin-top:-36px}}
main .rolle h2,main .rolle h3,main .rolle h4{font-size:clamp(1rem,2.2vw,1.2rem);hyphens:auto;overflow-wrap:break-word}

/* PETER-CODEUMBRUCH */
main code.nb{white-space:nowrap}

/* PETER-ROLLEN3: Hinweiskaesten volle Breite */
main p.notice.rolle,main .callout.rolle,main .downloadbox.rolle{max-width:none;width:auto}

/* PETER-ROLLEN4: Schrift auf den Holztafeln scharf und gut lesbar */
main .rolle,main .rolle p,main .rolle li,main .rolle div,main .rolle span:not(.rolle-tag),main .rolle strong{color:#fbf0d6!important;text-shadow:none!important;-webkit-font-smoothing:antialiased;font-weight:600;letter-spacing:.01em}
main .rolle h2,main .rolle h3,main .rolle h4{color:#ffd36b!important;text-shadow:none!important;font-weight:700}
main .rolle .rolle-tag{color:#e6c07a!important;text-shadow:none!important;font-weight:700}
main .rolle code{background:#3a2410;color:#ffe9b0!important;border:1px solid #2b1708}
main .rolle p,main .rolle li{hyphens:auto;overflow-wrap:break-word;font-size:clamp(.88rem,1.9vw,1rem)}
main .rolle h2,main .rolle h3,main .rolle h4{font-size:clamp(.95rem,2vw,1.15rem)}
/* PETER-ROLLEN5: Text nach der Ueberschrift nicht fett (Test) */
main .rolle p,main .rolle li,main .rolle div,main .rolle span:not(.rolle-tag),main .rolle strong{font-weight:400!important}

/* PETER-ROLLEN6: Typografie D (Trebuchet), goldene Titel, cremefarbener Normaltext, mehr Raum fuer Figuren */
main .rolle,main .rolle *{font-family:"Trebuchet MS","Segoe UI",sans-serif!important}
main .rolle{padding:18px 18px 16px 136px!important;min-height:132px;line-height:1.5}
main .rolle .rolle-av{width:100px!important;height:100px!important}
main .rolle h2,main .rolle h3,main .rolle h4,main .rolle > strong:first-of-type{color:#ffd36b!important;font-weight:700!important}
main .rolle p,main .rolle li,main .rolle div,main .rolle span:not(.rolle-tag),main .rolle a{color:#fbf0d6!important;font-weight:400!important;line-height:1.5}
@media (max-width:560px){main .rolle{padding-left:104px!important;min-height:112px}main .rolle .rolle-av{width:80px!important;height:80px!important}}

/* PETER-ROLLEN7: Rollenname und Titel gross und fett, Fliesstext normal */
main .rolle{font-weight:400!important}
main .rolle .rolle-tag{font-size:clamp(1rem,2.4vw,1.2rem)!important;font-weight:700!important;letter-spacing:.06em;color:#ffd36b!important;margin-bottom:4px}
main .rolle h2,main .rolle h3,main .rolle h4{font-size:clamp(1.25rem,2.8vw,1.55rem)!important;font-weight:700!important}
main .rolle p,main .rolle li{font-weight:400!important}
/* PETER-NORMALTEXT: Inhaltstexte nicht fett, Ueberschriften/Labels bleiben fett */
main p,main li,main figcaption,main td,main dd,main dt,main .lead,main .notice,main .callout{font-weight:400!important}
main strong,main b,main th{font-weight:700!important}
main .rolle .rolle-tag,main .rolle h2,main .rolle h3,main .rolle h4{font-weight:700!important}
/* PETER-KEINSTROKE: kein kuenstlicher Rand, Text wirklich normal */
main .rolle,main .rolle *{-webkit-text-stroke:0!important;text-shadow:none!important;-webkit-font-smoothing:auto!important}
main .rolle .rolle-tag,main .rolle h2,main .rolle h3,main .rolle h4{-webkit-text-stroke:0!important}
/* PETER-AVATARMITTE: Figur immer senkrecht mittig, Karte mindestens so hoch wie die Figur */
main .rolle .rolle-av{top:50%!important;margin-top:0!important;transform:translateY(-50%)!important;box-sizing:border-box!important;width:106px!important;height:106px!important}
main .rolle{min-height:130px!important}
@media (max-width:560px){main .rolle .rolle-av{width:86px!important;height:86px!important}main .rolle{min-height:110px!important}}
/* PETER-HERZ: Spenden-Button als Pixel-Herz auf Holztafel */
main a.herz-btn{display:inline-flex;align-items:center;justify-content:center;padding:18px 24px!important;background:linear-gradient(#7a5230,#6a4526)!important;border:3px solid #3a2410!important;box-shadow:inset 0 0 0 3px #8d6339,3px 4px 0 #2b1708!important;border-radius:0!important;text-decoration:none!important}
main a.herz-btn img{width:120px;height:104px;image-rendering:pixelated;display:block;transition:transform .15s}
main a.herz-btn:hover img,main a.herz-btn:focus-visible img{transform:scale(1.1)}
main a.herz-btn:focus-visible{outline:3px solid #ffd36b;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){main a.herz-btn img{animation:herzpuls 2.2s ease-in-out infinite}}
@keyframes herzpuls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* PETER-SPENDEMITTE: Spendenseite mittig, Herz ohne Holzrahmen */
main:has(.herz-btn) .hero{max-width:none;margin-left:0;margin-right:0;text-align:center}
main:has(.herz-btn) .hero .lead{margin-left:auto;margin-right:auto}
main:has(.herz-btn)>p{text-align:center;margin-left:auto;margin-right:auto}
main a.herz-btn{background:none!important;border:0!important;box-shadow:none!important;padding:8px!important}
/* PETER-HERZHINT: kleiner Hinweis unter dem Herz */
main p.herz-hint{font-size:.85rem;margin-top:0;margin-bottom:14px}
/* PETER-SPENDEPOS: Kasten auf grossen Bildschirmen weiter rechts und etwas hoeher */
@media(min-width:1300px){html body.page-spende[data-bg]:not(.anim-picture)>main{margin-inline:calc(max(1rem,(100% - 1120px)/2) + 9vw) 0;margin-bottom:16vh}}
/* PETER-SPENDEFEST: Spendenfenster nicht ausblendbar, Umschalter dort versteckt */
body.page-spende .anim-fold{display:none!important}
body.page-spende>main{display:block!important;visibility:visible!important;opacity:1!important}
/* PETER-SPENDEFEST2: Schriftrolle zum Einklappen auf der Spendenseite aus */
html body.page-spende>.anim-scroll,html body.page-spende .anim-scroll{display:none!important}

/* PETER-BADGE: Badge in Rollenkarten lesbar (dunkel auf hell) */
main .rolle .badge,main .rolle .badge *{color:#2b1708!important;font-weight:700!important}

html body main .rolle span.badge,html body main .rolle span.badge:not(.rolle-tag){color:#2b1708!important;font-weight:700!important}

/* PETER-SPENDEGROESSE: Schrift im Spendenkasten groesser und mitwachsend */
main:has(.herz-btn) .hero .lead{font-size:clamp(1rem,.3vw + .9rem,1.45rem)!important;line-height:1.5}
main:has(.herz-btn) p.herz-hint{font-size:clamp(1.1rem,.4vw + .95rem,1.6rem)!important;font-weight:700!important;color:#ffd9a0!important;margin-top:0}
main:has(.herz-btn)>p:not(.herz-hint){font-size:clamp(.95rem,.25vw + .85rem,1.25rem)!important;line-height:1.5}
@media(min-width:1600px){html body.page-spende[data-bg]:not(.anim-picture)>main{width:clamp(700px,32vw,980px)}}
/* PETER-MENUHERZ */
img.herz-mini{width:15px;height:13px;image-rendering:pixelated;vertical-align:-1px;margin-right:6px;display:inline-block}

/* PETER-KONTAKT: Kontaktformular im Holztafel-Stil */
main .kontakt-form{max-width:640px;background:linear-gradient(#7a5230,#6a4526);border:3px solid #3a2410;box-shadow:inset 0 0 0 3px #8d6339,3px 4px 0 #2b1708;padding:20px 22px;margin:10px 0 18px;font-family:"Trebuchet MS","Segoe UI",sans-serif}
main .kontakt-form p{margin:0 0 14px;color:#fbf0d6!important;font-weight:400!important}
main .kontakt-form label{display:block;color:#ffd36b!important;font-weight:700!important;margin-bottom:5px}
main .kontakt-form input[type=text],main .kontakt-form input[type=email],main .kontakt-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:#2b1708;background:#fbf0d6;border:2px solid #3a2410;border-radius:0;padding:9px 10px}
main .kontakt-form textarea{resize:vertical;min-height:130px}
main .kontakt-form input:focus,main .kontakt-form textarea:focus,main .kontakt-form button:focus-visible{outline:3px solid #ffd36b;outline-offset:2px}
main .kontakt-form .k-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
main .kontakt-form .k-hinweis{font-size:.9rem}
main .kontakt-form .k-hinweis a{color:#ffd9a0!important}
main .kontakt-form button.button{cursor:pointer;font:inherit;font-weight:700}
main .kontakt-form .k-meldung{min-height:1.5em;font-weight:700!important}
main .kontakt-form .k-ok{color:#b9f0b0!important}
main .kontakt-form .k-fehler{color:#ffb0a8!important}
/* PETER-KONTAKT2: Link im Hinweistext des Formulars als normaler Textlink (kein Leerraum vor dem Punkt) */
main .kontakt-form .k-hinweis a{display:inline;min-height:0;min-width:0;padding:0;margin:0;vertical-align:baseline}

/* PETER-FOOTERKONTAKT */ footer .w a{padding-left:0;padding-right:0}

/* PETER-KONTAKT3: Absenden rechts, kein Leerraum unter dem Formular, Meldung nur mit Platz wenn sie Text hat */
main .kontakt-form p.k-senden{margin:0;text-align:right}
main .kontakt-form .k-meldung{min-height:0;margin:0}
main .kontakt-form .k-meldung:not(:empty){margin-top:14px}

/* PETER-FUCHSPOS2 (11.10. 19:50): Fuchs weiter links, steht auf der Leiste (bottom 68px), Sprechblase gross und gut lesbar, nie am Rand abgeschnitten */
@media (min-width:1100px) and (min-height:760px){
  html body[data-bg]:not(.anim-picture) .fox-free.fox-w{right:150px;bottom:42px}
  html body.anim-picture>.fox-clone.fox-w{right:150px;bottom:42px}
}
html body[data-bg] .fox-free .fox-bubble,html body.anim-picture>.fox-clone .fox-bubble,html body .fox-free .fox-bubble{font-size:1.25rem;font-weight:700;line-height:1.25;color:#1c1206;background:#fffdf4;border:3px solid #2b1d0e;padding:.6rem 1rem;white-space:normal;width:max-content;max-width:min(300px,36vw);text-align:center;box-shadow:0 3px 0 #2b1d0e}

/* PETER-LESBAR2 (11.10. 19:55): Kleinzeile ueber der Ueberschrift (Community, Jetzt helfen ...) groesser, ohne Pixelschrift, besser lesbar */
html body[data-bg] main .hero .eye,html body main .hero .eye{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:1.4rem;line-height:1.2;letter-spacing:.04em;font-weight:700}
/* PETER-LESBAR3 11.10.: Rechtstext-Seiten (Lizenz/Impressum/Datenschutz) groesser, kraeftiger, hoher Kontrast; Fuchs Spende (sp2) auf Sandboden */
html body.page-legal[data-bg] main,html body.page-legal main{color:#160c03}
html body.page-legal main p,html body.page-legal main li,html body.page-legal main dd,html body.page-legal main dt,html body.page-legal main td{font-size:1.3rem;line-height:1.6;font-weight:500;color:#160c03}
html body.page-legal main .eye{font-size:1.5rem;font-weight:700;letter-spacing:.04em;color:#3a1a00}
html body.page-legal main h2{font-size:1.75rem;line-height:1.25;color:#160c03}
html body.page-legal main h1{font-size:clamp(2rem,3.4vw,2.6rem);color:#160c03}
html body.page-legal main a{color:#4a1f00;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
html body.page-legal main li{margin-bottom:.35rem}
/* PETER-LESBAR4 11.10.: Rechtstext-Seiten - hoehere Spezifitaet noetig (gleiche wie PETER-LESBAR-Alt) */
html body.page-legal[data-bg]:not(.page-spende)>main :is(p,li,td,th,address,dd,dt,small,figcaption,div,span){font-size:1.3rem;line-height:1.6;font-weight:500;color:#160c03}
html body.page-legal[data-bg]:not(.page-spende)>main .eye{font-size:1.5rem;font-weight:700;letter-spacing:.04em;color:#3a1a00}
html body.page-legal[data-bg]:not(.page-spende)>main a{font-size:inherit;font-weight:700;color:#4a1f00;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
html body.page-legal[data-bg]:not(.page-spende)>main h2{font-size:1.75rem}
html body.page-legal[data-bg]:not(.page-spende)>main h1{font-size:clamp(2rem,3.4vw,2.6rem)}
/* PETER-LESBAR5 11.10.: Rechtstext-Seiten ohne Pixelschrift - Ueberschriften und Rollen-Titel in normaler, gut lesbarer Schrift */
html body.page-legal[data-bg] :is(h1,h2,h3,.eye,.anim-title,.anim-scroll .sc-label){font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;letter-spacing:0;font-weight:700;text-shadow:none}
html body.page-legal[data-bg]>.anim-title{font-size:1.6rem;color:#160c03}
/* PETER-SPBUBBLE 11.10.: Spende-Sprechblase gut lesbar (normale Schrift, gross, kraeftig) */
html body.page-spende .fox-bubble,html body.page-spende[data-bg] .fox-bg .fox-bubble{font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:1.3rem;font-weight:700;line-height:1.25;letter-spacing:0;color:#1c1206;background:#fffdf4;border:3px solid #2b1d0e;padding:.6rem 1.1rem;text-shadow:none}