@import url('/schrift/schrift.css');
:root { --grund:#FBF7EF; --stein:#F2EDE4; --text:#141414; --akzent:#FFE459; --cta:#141414; --cta-hover:#141414; --cta-text:#FBF7EF; --flaeche:#141414; --linie:rgba(20,20,20,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--grund); color:var(--text); font-family:Manrope, system-ui, sans-serif; font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.rahmen { max-width:68rem; margin:0 auto; padding-left:1.4rem; padding-right:1.4rem; }
.eng { max-width:42rem; }
nav { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); }
nav .rahmen { display:flex; align-items:center; justify-content:space-between; height:3.7rem; }
nav .logo { font-family:"Instrument Serif", Georgia, serif; font-size:1.4rem; text-decoration:none; }
nav .links a { text-decoration:none; font-size:.9rem; margin-left:1.4rem; opacity:.7; }
nav .links a:hover { opacity:1; }
@media (max-width:760px) { nav .links a:not(.knopf) { display:none; } }
.knopf { display:inline-block; border:1px solid var(--cta); border-radius:999px; padding:.8rem 1.6rem; background:var(--cta); color:var(--cta-text) !important; font-weight:600; text-decoration:none; opacity:1 !important; transition:transform .25s ease, background .2s; cursor:pointer; font-size:1rem; font-family:inherit; }
.knopf:hover { transform:translateY(-1px); background:var(--cta-hover); border-color:var(--cta-hover); }
.knopf.hell { background:transparent; color:var(--text) !important; border-color:var(--text); }
.knopf.hell:hover { background:var(--stein); border-color:var(--text); }
nav .knopf { padding:.45rem 1.05rem; font-size:.86rem; }
.marke { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.5; }
h1, h2, h3 { font-family:"Instrument Serif", Georgia, serif; font-weight:400; line-height:1.04; margin:0; letter-spacing:-.005em; }
h1 { font-size:clamp(2.8rem, 7.5vw, 5.4rem); }
h2 { font-size:clamp(2rem, 4.6vw, 3.2rem); margin-bottom:1rem; }
h3 { font-size:1.55rem; margin-bottom:.4rem; }
em.ton { font-style:italic; background:linear-gradient(transparent 64%, var(--akzent) 64%); }
.gross { font-size:1.18rem; opacity:.82; max-width:36rem; }
.leise { opacity:.62; }
.klein { font-size:.9rem; }
.abschnitt { padding-top:6rem; padding-bottom:6rem; }
.haar { height:1px; background:var(--linie); }
.kopf { padding-top:6rem; padding-bottom:3rem; }
/* Stufen */
.stufe { display:grid; grid-template-columns:5rem 1fr 1fr; gap:2.5rem; align-items:center; padding:3.5rem 0; border-top:1px solid var(--linie); opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease; }
.stufe.da { opacity:1; transform:none; }
.stufe .nr { font-family:"Instrument Serif", Georgia, serif; font-size:3.6rem; line-height:1; opacity:.25; }
.stufe .rolle { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.55; margin-bottom:.4rem; }
.stufe ul { padding-left:1.1rem; margin:.6rem 0 0; }
.stufe li { margin:.25rem 0; }
.bild { aspect-ratio:4/3; border-radius:1.2rem; background:var(--stein); overflow:hidden; position:relative; }
.bild::before { content:""; position:absolute; inset:0; background-image:radial-gradient(var(--text) 1px, transparent 1px); background-size:22px 22px; opacity:.08; }
.bild img { position:relative; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px) { .stufe { grid-template-columns:1fr; gap:1.2rem; } .stufe .nr { font-size:2.6rem; } }
.module { display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; margin-top:2rem; }
@media (max-width:860px) { .module { grid-template-columns:1fr 1fr; } }
.modul { border:1px solid var(--linie); border-radius:1rem; padding:1rem; font-size:.88rem; background:color-mix(in srgb, #fff 55%, transparent); }
.modul b { display:block; font-weight:600; margin-bottom:.2rem; }
.modul span { opacity:.6; }
.regeln { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2rem; }
@media (max-width:860px) { .regeln { grid-template-columns:1fr; } }
.ampel { display:inline-flex; gap:.35rem; margin-bottom:.6rem; }
.ampel i { width:.7rem; height:.7rem; border-radius:50%; display:block; }
/* Magazin */
.artikel-liste { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; }
@media (max-width:860px) { .artikel-liste { grid-template-columns:1fr; } }
.artikel-karte { display:block; text-decoration:none; border-top:1px solid var(--text); padding-top:1rem; }
.artikel-karte h3 { font-size:1.6rem; margin:.4rem 0; }
.artikel-karte:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
article { font-size:1.08rem; }
article h2 { font-size:1.9rem; margin:2.4rem 0 .6rem; }
article p, article li { opacity:.88; }
.quelle { font-size:.85rem; opacity:.6; border-top:1px solid var(--linie); margin-top:3rem; padding-top:1rem; }
.hinweis { border-left:3px solid var(--akzent); padding:.2rem 0 .2rem 1rem; font-size:.95rem; opacity:.8; }
/* Termin */
.tage { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.4rem; margin:1.4rem 0; }
.tag { flex:0 0 auto; border:1px solid var(--linie); border-radius:.9rem; padding:.6rem .9rem; background:transparent; font:inherit; cursor:pointer; text-align:center; min-width:5.2rem; }
.tag.an, .zeit.an { background:var(--cta); color:var(--cta-text); border-color:var(--cta); }
.zeiten { display:flex; flex-wrap:wrap; gap:.5rem; }
.zeit { border:1px solid var(--linie); border-radius:999px; padding:.5rem 1rem; background:transparent; font:inherit; cursor:pointer; }
.formular { display:grid; gap:.8rem; margin-top:1.6rem; max-width:30rem; }
.formular input, .formular textarea { width:100%; font:inherit; padding:.75rem .9rem; border:1px solid var(--linie); border-radius:.7rem; background:#fff; color:var(--text); }
.formular label.ok { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; }
.formular input[type=checkbox] { width:auto; margin-top:.3rem; flex:0 0 auto; }
footer { padding:3.5rem 0; font-size:.86rem; opacity:.65; border-top:1px solid var(--linie); margin-top:4rem; }
footer a { margin-right:1.2rem; }
nav .knopf { white-space:nowrap; }
@media (max-width:560px) { nav .knopf.hell { display:none; } }

/* T-0209 26.10.: edle Fußzeile, Flagge */
footer { text-align:center; }
footer a { margin:0 .7rem; }
.fuss-edel { margin-top:1.6rem; display:grid; gap:.35rem; }
.fuss-edel .fuss-satz { font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-size:1.5rem; margin-top:.6rem; }
.de { display:inline-block; width:1.05em; height:.68em; margin-left:.32em; vertical-align:-.04em; border-radius:2px; background:linear-gradient(#141414 0 33.4%, #DD0000 33.4% 66.7%, #FFCE00 66.7%); box-shadow:0 0 0 1px rgba(20,20,20,.08); }