@font-face{font-family:'Saira';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Saira-400.ttf) format('truetype')}
@font-face{font-family:'Saira';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Saira-600.ttf) format('truetype')}
@font-face{font-family:'Saira Condensed';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/SairaCondensed-700.ttf) format('truetype')}
@font-face{font-family:'Saira Condensed';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/SairaCondensed-800.ttf) format('truetype')}
@font-face{font-family:'Saira Stencil One';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/SairaStencilOne-400.ttf) format('truetype')}
/* Nach dem Gestaltungskonzept „Rising Army“ (Entwurf 1.4): vier Ebenen – Gelände, Tafel, Platte, Fenster.
   Erhaben = antippbar (Platte, Gegenschnitt oben links/unten rechts). Flach = Information (Tafel, runde Ecken). */
:root{color-scheme:dark;
--g900:#0b0f0a;--g800:#131911;--g700:#1c2418;--g600:#262f20;--g500:#333d29;--g400:#4d5a3c;--line:#94a866;
--bg-top:#2b3826;--bg-bot:#0d120d;--text:#edf2d9;--dim:rgba(237,242,217,.62);--off:#80857a;
--v-gold:#ffd152;--v-good:#94ff8c;--v-camo:#4debd9;
--f-display:"Saira Condensed","Arial Narrow",sans-serif;--f-body:"Saira","Segoe UI",Roboto,sans-serif;--f-stencil:"Saira Stencil One","Saira Condensed",Impact,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 0 · Gelände */
body{margin:0;color:var(--text);font:400 18px/1.6 var(--f-body);min-height:100vh;display:flex;flex-direction:column;
background:
repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 7px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px),
radial-gradient(ellipse 45% 16% at 12% 14%,rgba(72,92,58,.55),transparent 72%),
radial-gradient(ellipse 38% 14% at 88% 30%,rgba(60,80,50,.5),transparent 72%),
radial-gradient(ellipse 50% 18% at 30% 62%,rgba(55,72,46,.5),transparent 72%),
radial-gradient(ellipse 36% 14% at 82% 84%,rgba(66,86,54,.45),transparent 72%),
linear-gradient(180deg,var(--bg-top),var(--bg-bot)) fixed;
padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
header,main,footer{width:100%;max-width:920px;margin:0 auto}
main{flex:1;padding:24px 0 8px}
/* Platten (Gegenschnitt) */
.pl,nav a,.btn{--c:10px;position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:.02em;color:#f3ecd6;min-height:48px;padding:0 22px;
background:linear-gradient(180deg,#3d4535,#1f251a 55%,#262d20);
border:3px solid transparent;border-image:linear-gradient(180deg,#f6e3a0,#b48a38 55%,#4e3a10) 1;
border-bottom:6px solid #12160f;
clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
text-shadow:0 0 3px #0008,0 1px 0 #0009}
/* border-image und clip-path: Rahmen als innerer Schatten, damit die Fase sauber bleibt */
.pl,nav a,.btn{border:0;box-shadow:inset 0 0 0 3px #b48a38,inset 0 3px 0 3px #f6e3a0,inset 0 -6px 0 0 #12160f}
nav a:hover,nav a:focus-visible,.pl:hover{filter:brightness(1.18);outline:none}
nav a:active,.pl:active{filter:brightness(.8);transform:translateY(3px)}
nav a[aria-current]{background:linear-gradient(180deg,#4fae5c,#2a7a36 55%,#318a3e);color:#fff;text-shadow:0 0 3px #0c2a10,0 1px 0 #0c2a10;
box-shadow:inset 0 0 0 3px #7fd27f,inset 0 3px 0 3px #c9ffbf,inset 0 -6px 0 0 #0f3314}
.gold{background:repeating-linear-gradient(45deg,rgba(72,34,3,.07) 0 2px,transparent 2px 6px),linear-gradient(180deg,#ffc247,#b86600);color:#fff;
text-shadow:-1px -1px 0 #331700,1px -1px 0 #331700,-1px 1px 0 #331700,1px 1px 0 #331700;
box-shadow:inset 0 0 0 3px #d68f24,inset 0 3px 0 3px #fff2b3,inset 0 -6px 0 0 #572e05}
.off{background:#30362e;color:rgba(255,255,255,.5);text-shadow:none;box-shadow:inset 0 0 0 3px #4d5247,inset 0 -6px 0 0 #1f211c;pointer-events:none}
.pl.l{--c:14px;min-height:64px;font-size:1.5rem;padding:0 34px}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;background:transparent;border-bottom:4px solid var(--g800);box-shadow:0 1px 0 var(--line)}
.brand{font-family:var(--f-stencil);font-size:1.45rem;letter-spacing:.06em;color:var(--v-gold);text-decoration:none;text-shadow:0 2px 0 #000a}
nav{display:flex;gap:10px;flex-wrap:wrap}
nav a{min-height:44px;font-size:1.05rem;padding:0 16px}
/* 1 · Tafel (flach, runde Ecken, ohne Rand) */
.tafel{background:var(--g700);border-radius:12px;padding:20px 22px;margin:0 0 12px}
.tafel.hero{padding:32px 28px;background:linear-gradient(180deg,var(--g600),var(--g700))}
.kopf{font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--v-gold);margin:0 0 6px}
h1{font-family:var(--f-stencil);font-weight:400;font-size:clamp(2.4rem,9vw,4.2rem);line-height:1.02;margin:0 0 .35em;letter-spacing:.01em;text-shadow:0 3px 0 #000b}
h2{font-family:var(--f-display);font-weight:800;font-size:1.9rem;line-height:1.1;margin:1.6em 0 .4em}
h2:first-child{margin-top:0}
main>h1+p.note+h2{margin-top:1.2em}
h3{font-family:var(--f-display);font-weight:700;font-size:1.4rem;margin:1em 0 .3em}
p{margin:0 0 .9em;max-width:70ch}
.lead{font-size:1.2rem;max-width:56ch}
a{color:var(--v-gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chip{background:rgba(0,0,0,.38);border-radius:12px;padding:3px 14px;font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--v-gold);font-variant-numeric:tabular-nums}
ul.liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.liste li{background:var(--g700);border-radius:12px;padding:12px 16px 12px 18px;position:relative;max-width:none}
ul.liste li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:2px;background:var(--v-gold)}
.note{background:rgba(255,209,82,.16);border-radius:12px;padding:12px 16px;color:var(--text);margin:0 0 16px}
/* 3 · Fenster-ähnliche Textseite */
.fenster{background:var(--g800);border:3px solid var(--line);border-radius:24px;padding:26px 28px;margin:0 0 12px;box-shadow:0 0 0 100vmax rgba(11,15,10,0) }
.fenster ul{padding-left:1.2em;max-width:70ch}
.fenster li{margin-bottom:.4em}
code{background:rgba(255,255,255,.07);padding:1px 6px;border-radius:6px}
/* Befehlsleiste: links Zurück, rechts Hauptaktion */
.leiste{display:flex;justify-content:space-between;gap:12px;margin:20px 0 0;flex-wrap:wrap}
footer{padding:18px 0 32px;margin-top:24px;border-top:4px solid var(--g800);box-shadow:0 -1px 0 var(--line);color:var(--dim);font-size:.95rem}
footer a{color:var(--dim);margin-right:18px;text-decoration:none}
footer a:hover{color:var(--v-gold)}
footer p{margin:8px 0 0}
@media(max-width:560px){body{font-size:17px}.tafel.hero{padding:24px 18px}.fenster{padding:20px 16px;border-radius:20px}header{padding:12px 0}nav a{padding:0 12px;font-size:1rem}.pl.l{width:100%}}

.galerie{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.galerie figure{margin:0;flex:0 0 min(290px,78%);scroll-snap-align:start;padding:10px 10px 14px}
.galerie img{display:block;width:100%;height:auto;border-radius:8px;background:var(--g800)}
.galerie figcaption{font-size:.95rem;color:var(--dim);margin-top:10px;line-height:1.4}
.galerie figcaption strong{display:block;font-family:var(--f-display);font-weight:800;font-size:1.25rem;color:var(--text)}
@media(min-width:900px){.galerie{overflow:visible}.galerie figure{flex:1 1 0}}