/* Silent River – Infoseite (info.silentriver.eu)
   Eigenstaendige statische Seite. Quelltext: C:\SilentRiver\info-web-quelle (node bauen.js).
   Keine fremden Dienste, keine Cookies, Schriften lokal. */

@font-face { font-family: 'Oswald'; src: url('assets/fonts/oswald-latin.woff2') format('woff2'); font-weight: 200 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Oswald'; src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2'); font-weight: 200 700; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/fonts/inter-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  /* 07.10.2026 einen Tick heller (vorher #121016 / #17151b / #1d1b22 / #25222b) */
  --grund: #1b1920;
  --grund-2: #211e27;
  --flaeche: #2a2731;
  --flaeche-2: #332f3b;
  --linie: rgba(255, 255, 255, .11);
  --rot: #c9962f;
  --rot-hell: #e0b450;
  --rot-dunkel: #8a5f10;
  --text: #f1ede7;
  --text-2: #c4bfcb;
  --text-3: #9a94a3;

  --titel: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --lauf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breite: 1200px;
  --r: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16.5px/1.65 var(--lauf); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--rot-hell); text-underline-offset: 3px; }
a:hover { color: #fff; }
strong { color: #fff; font-weight: 600; }
h1, h2, h3 { margin: 0; font-family: var(--titel); font-weight: 700; text-transform: uppercase; line-height: 1.05; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; }
code, kbd { font-family: ui-monospace, Consolas, monospace; font-size: .88em; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .25); border-radius: 5px; padding: .05em .4em; }
:focus-visible { outline: 2px solid var(--rot-hell); outline-offset: 3px; border-radius: 4px; }
svg { width: 1em; height: 1em; flex: none; }

.breite { width: min(var(--breite), 100% - 32px); margin-inline: auto; }
.breite.schmal { width: min(840px, 100% - 32px); }
.mittig { text-align: center; margin-inline: auto; }
.rot { color: var(--rot); }
.umriss { color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.voll { color: var(--text); }
.kicker { font: 600 .9rem var(--titel); letter-spacing: .3em; text-transform: uppercase; color: var(--rot); margin: 0 0 .8rem; }
.einleitung { font-size: 1.08rem; color: var(--text-2); max-width: 760px; margin: 1.1rem 0 0; }
.einleitung.mittig { margin-inline: auto; }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .9em 1.9em; border-radius: 999px; border: 2px solid transparent;
  font: 500 1rem/1 var(--titel); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf.klein { padding: .65em 1.3em; font-size: .86rem; margin-top: .8rem; }
.knopf-rot { background: linear-gradient(180deg, var(--rot), var(--rot-dunkel)); color: #fff; box-shadow: 0 10px 26px -12px rgba(201, 150, 47, .9); }
.knopf-rot:hover { color: #fff; box-shadow: 0 14px 30px -10px rgba(201, 150, 47, 1); }
.knopf-rand { border-color: rgba(255, 255, 255, .35); color: var(--text); }
.knopf-rand:hover { border-color: var(--rot); color: #fff; }
.knopf-weiss { background: #fff; color: var(--rot-dunkel); }
.knopf-weiss:hover { background: #ffe9ea; color: var(--rot-dunkel); }
.knopf-rand-hell { border-color: rgba(255, 255, 255, .7); color: #fff; }
.knopf-rand-hell:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 max(16px, calc((100% - var(--breite)) / 2));
  background: rgba(27, 25, 32, .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 150, 47, .55);
}
.kopf-marke img { width: 86px; height: auto; }
.navi { display: flex; align-items: center; gap: 2rem; }
.navi a { color: var(--text); text-decoration: none; font: 400 1rem var(--titel); letter-spacing: .1em; text-transform: uppercase; transition: color .2s; }
.navi a:hover { color: var(--rot-hell); }
.navi-discord { display: inline-flex; align-items: center; gap: .45em; padding: .5em 1.1em; border-radius: 999px; background: var(--rot); color: #fff !important; }
.navi-discord:hover { background: var(--rot-hell); }
.menue-knopf { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menue-knopf span { display: block; width: 26px; height: 2px; margin: 5px 0; background: var(--text); transition: transform .25s, opacity .25s; }

/* ---------- Start ---------- */
.held { position: relative; min-height: min(100svh, 980px); display: flex; align-items: center; padding: 120px 0 170px; overflow: hidden; isolation: isolate; }
.held-bilder { position: absolute; inset: 0; z-index: -2; }
.held-bild { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.8s ease; }
.held-bild.aktiv { opacity: 1; animation: kenburns 14s ease-out both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.held::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 18, 24, .82) 0%, rgba(20, 18, 24, .56) 45%, rgba(20, 18, 24, .32) 100%),
              linear-gradient(180deg, rgba(20, 18, 24, .2), rgba(20, 18, 24, .5));
}
.held-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; }
.held h1 { display: grid; gap: .1em; }
.held h1 .voll { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
.held h1 .umriss { font-size: clamp(2.9rem, 7.8vw, 6rem); font-weight: 700; -webkit-text-stroke-width: 2px; }
.held-unter { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #ddd6e2; max-width: 560px; margin: 1.3rem 0 0; }
.held-zahlen { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1.5rem; text-align: center; }
.held-zahlen div { display: flex; flex-direction: column-reverse; }
.held-zahlen dd { margin: 0; font: 200 clamp(2.8rem, 5vw, 4.2rem)/1 var(--titel); color: #fff; }
.held-zahlen dd em { font-style: normal; color: var(--rot); }
.held-zahlen dt { margin-top: .4rem; font: 400 .95rem var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.schraege-unten { position: absolute; inset: auto 0 -1px; height: 90px; background: var(--grund-2); clip-path: polygon(0 100%, 50% 15%, 100% 100%); }

/* ---------- Live ---------- */
.live-band { background: var(--grund-2); padding: 0 0 2.5rem; }
.live-raster { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 1.3rem 1.6rem; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.live-titel { display: flex; align-items: center; gap: .6rem; font: 600 1rem var(--titel); letter-spacing: .14em; text-transform: uppercase; }
.live-punkt { width: 11px; height: 11px; border-radius: 50%; background: #3ddc6b; animation: puls 2s infinite; }
.live-band.aus .live-punkt { background: var(--text-3); animation: none; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 107, .6); } 70% { box-shadow: 0 0 0 10px rgba(61, 220, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 107, 0); } }
.live-zahlen { margin: 0; flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.live-zahlen dt { font: 400 .78rem var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.live-zahlen dd { margin: 0; font: 500 1.7rem/1.15 var(--titel); color: #fff; }
.live-zahlen dd small { font-size: .95rem; color: var(--text-3); font-weight: 400; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(70px, 9vw, 120px) 0; background: var(--grund-2); position: relative; }
.abschnitt.dunkler { background: var(--grund); }

.karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 3rem; }
.karte {
  position: relative; padding: 1.7rem 1.5rem 1.6rem; background: var(--flaeche);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  transition: transform .25s, background .25s;
}
.karte::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--rot), transparent); opacity: 0; transition: opacity .25s; }
.karte:hover { transform: translateY(-5px); background: var(--flaeche-2); }
.karte:hover::before { opacity: 1; }
.karte-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; background: rgba(201, 150, 47, .12); color: var(--rot-hell); font-size: 28px; margin-bottom: 1.1rem; }
.karte h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.karte p { margin: 0; color: var(--text-2); font-size: .96rem; }
.karte-dunkel { background: linear-gradient(160deg, #3a2d16, var(--flaeche)); }
.karte-dunkel .karte-icon { background: rgba(201, 150, 47, .22); }

.mehr { background: var(--grund); padding: clamp(60px, 8vw, 100px) 0; overflow: hidden; }
.gross { font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1; }
.mehr .gross { text-align: center; }
.mehr .umriss { -webkit-text-stroke-width: 2px; }
.chips { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.chips li { padding: .55rem 1.2rem; border-radius: 999px; border: 1px solid rgba(201, 150, 47, .45); background: rgba(201, 150, 47, .07); font: 400 1rem var(--titel); letter-spacing: .06em; text-transform: uppercase; }

.figur-raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.figur-raster.links { grid-template-columns: .8fr 1.2fr; }
.figur { width: 100%; max-width: 420px; height: auto; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.mit-figur { overflow: hidden; }
.haken { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.haken li { display: flex; align-items: center; gap: .8rem; font-size: 1.04rem; }
.haken svg { width: 1.35em; height: 1.35em; color: var(--rot); }

/* Rotes Band mit Anleitung */
.rot-band {
  position: relative; background: linear-gradient(135deg, #b8862b, var(--rot) 45%, #a87618);
  padding: clamp(110px, 12vw, 150px) 0; color: #fff;
  clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
  margin: -30px 0;
}
.anleitung-raster { display: grid; grid-template-columns: .8fr 1.6fr; gap: 3rem; align-items: start; }
.anleitung-kopf h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.anleitung-kopf p { margin: 1rem 0 0; color: rgba(255, 255, 255, .88); font-size: 1.05rem; }
.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.schritte li { counter-increment: s; display: flex; gap: 1rem; align-items: flex-start; }
.schritte li:last-child { grid-column: 1 / -1; }
.schritt-icon { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--rot-dunkel); font-size: 26px; }
.schritt-icon::after { content: counter(s); position: absolute; top: -4px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #1a1218; color: #fff; font: 600 .75rem var(--titel); }
.schritte h3 { font-size: 1.25rem; margin: .2rem 0 .35rem; }
.schritte p { margin: 0; color: rgba(255, 255, 255, .9); font-size: .97rem; }
.schritte strong { color: #fff; }
.schritte code, .schritte kbd { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .45); color: #fff; }

.staedte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3rem; }
.stadt { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 3 / 4; }
.stadt img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; filter: saturate(.9); }
.stadt:hover img { transform: scale(1.06); }
.stadt figcaption { position: absolute; inset: auto 0 0; padding: 4rem 1.2rem 1.2rem; background: linear-gradient(180deg, transparent, rgba(20, 18, 24, .92)); display: grid; gap: .25rem; }
.stadt figcaption strong { font: 700 1.5rem var(--titel); text-transform: uppercase; letter-spacing: .03em; }
.stadt figcaption span { color: var(--text-2); font-size: .93rem; }
.stadt::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.stadt:hover::after { transform: scaleX(1); }

.ucp-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.ucp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ucp-liste li { display: grid; gap: .1rem; padding: 1rem 1.2rem; background: var(--flaeche); border-left: 3px solid var(--rot); border-radius: 0 var(--r) var(--r) 0; }
.ucp-liste strong { font: 600 1.1rem var(--titel); text-transform: uppercase; letter-spacing: .05em; }
.ucp-liste span { color: var(--text-2); font-size: .95rem; }

details { border-bottom: 1px solid var(--linie); }
details:first-of-type { margin-top: 2.4rem; border-top: 1px solid var(--linie); }
summary { cursor: pointer; list-style: none; padding: 1.15rem 2.6rem 1.15rem 0; position: relative; font: 500 1.18rem var(--titel); letter-spacing: .04em; text-transform: uppercase; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: .3rem; top: .8rem; font: 300 1.8rem var(--titel); color: var(--rot); transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--rot-hell); }
details p { margin: 0 0 1.3rem; color: var(--text-2); }

.schluss { position: relative; padding: clamp(100px, 12vw, 150px) 0 0; overflow: hidden; isolation: isolate; background: var(--grund); }
.schluss::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--rot-dunkel), var(--rot) 55%, #ecc56a);
  clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
.schluss-raster { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: end; }
.schluss-raster > div { padding-bottom: clamp(60px, 8vw, 110px); }
.schluss .umriss { -webkit-text-stroke: 2px #fff; }
.schluss .voll { color: #fff; }
.schluss p { font-size: 1.2rem; color: rgba(255, 255, 255, .92); margin: 1rem 0 0; }
.schluss .figur { max-width: 340px; margin-bottom: -6px; }

.fuss { padding: 3rem 0 2.5rem; background: #15131a; border-top: 3px solid var(--rot); }
.fuss-raster { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 3rem; align-items: start; }
.fuss-spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.fuss-spalten nav { display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; gap: .45rem; }
.fuss-spalten strong { font: 600 .95rem var(--titel); letter-spacing: .12em; text-transform: uppercase; color: var(--rot); margin-bottom: .3rem; }
.fuss-spalten a { text-transform: none !important; letter-spacing: 0 !important; font: 400 .95rem var(--lauf) !important; }
@media (max-width: 900px) { .fuss-spalten { grid-template-columns: repeat(2, 1fr); } }
.fuss-marke { display: flex; align-items: center; gap: 1.2rem; }
.fuss-marke img { width: 110px; height: auto; }
.fuss-marke p { margin: 0; color: var(--text-2); max-width: 220px; font-size: .95rem; }
.fuss nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem 1.8rem; }
.fuss nav a { color: var(--text-2); text-decoration: none; font: 400 .98rem var(--titel); letter-spacing: .1em; text-transform: uppercase; }
.fuss nav a:hover { color: var(--rot-hell); }
.fuss-hinweis { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .8rem; color: var(--text-3); }

/* ---------- Menue mit Untermenues ---------- */
.navi { gap: 1.5rem; }
.navi-gruppe { position: relative; }
.navi-oben {
  display: inline-flex; align-items: center; gap: .3em; background: none; border: 0; padding: .4rem 0; cursor: pointer;
  color: var(--text); font: 400 1rem var(--titel); letter-spacing: .1em; text-transform: uppercase;
}
.navi-oben svg { transition: transform .2s; }
.navi-oben:hover, .navi-gruppe.offen .navi-oben { color: var(--rot-hell); }
.navi-gruppe.offen .navi-oben svg { transform: rotate(180deg); }
.navi-gruppe.aktiv .navi-oben, .navi-link.aktiv { color: var(--rot-hell); }
.navi-unter {
  position: absolute; top: calc(100% + 14px); left: -1rem; min-width: 270px; padding: .5rem;
  background: rgba(36, 33, 42, .98); border: 1px solid var(--linie); border-top: 2px solid var(--rot); border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.navi-gruppe.offen .navi-unter { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1101px) {
  .navi-gruppe:hover .navi-unter { opacity: 1; visibility: visible; transform: none; }
  .navi-gruppe:hover .navi-oben { color: var(--rot-hell); }
  .navi-gruppe::after { content: ''; position: absolute; inset: 100% -1rem auto; height: 16px; }
}
.navi-unter a { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 7px; font-size: .95rem; letter-spacing: .06em; }
.navi-unter a:hover { background: rgba(201, 150, 47, .1); color: #fff; }
.navi-unter svg { color: var(--rot); font-size: 1.1rem; }
.navi-link { display: inline-flex; align-items: center; gap: .35em; }
.navi-link svg { font-size: .85em; opacity: .7; }
.navi-discord { background: #5865f2; display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.2em; border-radius: 999px; color: #fff !important; box-shadow: 0 8px 22px -10px rgba(88, 101, 242, .9); }
.navi-discord:hover { background: #6d78ff; color: #fff !important; }
.knopf-discord { background: #5865f2; color: #fff; box-shadow: 0 10px 26px -12px rgba(88, 101, 242, .9); }
.knopf-discord:hover { background: #6d78ff; color: #fff; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seiten-kopf {
  position: relative; padding: 160px 0 120px; overflow: hidden; isolation: isolate;
  background: var(--bild) center / cover;
}
.seiten-kopf::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 18, 24, .85), rgba(20, 18, 24, .6) 60%, rgba(20, 18, 24, .42)); }
.seiten-kopf h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.seiten-unter { max-width: 660px; margin: 1rem 0 0; color: #ddd6e2; font-size: 1.1rem; }

/* ---------- Bausteine ---------- */
.system-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 3rem 0 2rem; }
.system { display: block; padding: 1.6rem 1.5rem; background: var(--flaeche); border-radius: var(--r); border: 1px solid var(--linie); color: var(--text); text-decoration: none; transition: transform .25s, border-color .25s, background .25s; }
.system-link:hover { transform: translateY(-4px); border-color: rgba(201, 150, 47, .55); background: var(--flaeche-2); color: var(--text); }
.system-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(201, 150, 47, .12); color: var(--rot-hell); font-size: 24px; margin-bottom: 1rem; }
.system h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.system p { margin: 0; color: var(--text-2); font-size: .96rem; }
.system-mehr { display: inline-flex; align-items: center; gap: .4em; margin-top: 1rem; color: var(--rot-hell); font: 500 .92rem var(--titel); letter-spacing: .08em; text-transform: uppercase; }

.zwei-spalten { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
.info-kasten { padding: 1.8rem; background: var(--flaeche); border-radius: var(--r); border-top: 3px solid var(--rot); }
.info-kasten h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.info-kasten h3 svg { color: var(--rot); }
.info-kasten ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--text-2); }
.punkt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; color: var(--text-2); }
.punkt-liste strong { color: #fff; }
.klein-hinweis { font-size: .88rem; color: var(--text-3); margin: 1.2rem 0 0; }
.lade-hinweis { color: var(--text-2); text-align: center; padding: 2rem 0; }
.leer-kasten { text-align: center; padding: 3rem 1.5rem; background: var(--flaeche); border-radius: var(--r); border: 1px dashed rgba(201, 150, 47, .4); }
.leer-kasten p { color: var(--text-2); margin: .6rem 0 1.4rem; }
.leer-kasten .knopf { margin-top: 0; }

.tabelle-huelle { overflow-x: auto; margin-top: 2.4rem; }
.tabelle { width: 100%; max-width: 720px; margin: 0 auto; border-collapse: collapse; }
.tabelle th { text-align: left; padding: .8rem 1rem; font: 500 .92rem var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border-bottom: 2px solid var(--rot); }
.tabelle td { padding: .8rem 1rem; border-bottom: 1px solid var(--linie); }
.tabelle td:nth-child(2) { color: var(--rot-hell); font-weight: 600; white-space: nowrap; }

/* ---------- Team (Nachbau der UCP-Teamuebersicht, ucp-web index.css .team-*) ---------- */
.breite-voll { width: min(1900px, 100% - 24px); margin-inline: auto; }
.team-abschnitt { padding-top: 40px; }
.team { position: relative; overflow-x: auto; overflow-y: hidden; }
.tc-flaeche { position: relative; margin: 0 auto; }
.tc-linien { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tc-linie-grund { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.5; }
.tc-linie-fluss { fill: none; stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round; opacity: .85; animation: tc-fluss 2.4s linear infinite; }
@keyframes tc-fluss { to { stroke-dashoffset: -24; } }
.tc-kachel {
  position: absolute; border-radius: 10px; padding: 1.75em 1.05em 1.15em; text-align: center; font-family: var(--lauf);
  background:
    linear-gradient(180deg, var(--rolle-weich) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
    rgba(38, 35, 45, .85);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: tc-auftritt .55s cubic-bezier(.2, .7, .3, 1) backwards;
}
.tc-flaeche.ruhig .tc-kachel { animation: none; }
@keyframes tc-auftritt { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.tc-kachel:hover { transform: translateY(-3px); border-color: var(--rolle-linie); box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 0 26px var(--rolle-weich), inset 0 1px 0 rgba(255, 255, 255, .08); }
.tc-kante { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0;
  background-image: linear-gradient(90deg, var(--rolle), var(--rolle-2), var(--rolle)); background-size: 200% auto; }
.tc-kante.animiert { animation: tc-schimmer 4s linear infinite; }
.tc-medaillon {
  position: absolute; top: -1.375em; left: 50%; margin-left: -1.375em; width: 2.75em; height: 2.75em; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(180deg, #34303d, #2a2731);
  box-shadow: 0 0 0 1px var(--rolle-linie), 0 0 18px var(--rolle-weich), 0 4px 10px rgba(0, 0, 0, .5);
}
.tc-medaillon svg { width: 1.15em; height: 1.15em; stroke-width: 2; }
.tc-titel { font-weight: 800; font-size: 1.08em; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; word-break: break-word; }
.tc-kachel.stufe-0 .tc-titel { font-size: 1.32em; letter-spacing: .12em; }
.tc-kachel.stufe-1 .tc-titel { font-size: 1.18em; }
.tc-namen { margin-top: .7em; display: grid; gap: .3em; font-size: 1.04em; line-height: 1.35; word-break: break-word; }
.tc-name { display: flex; align-items: center; justify-content: center; gap: .4em; }
.tc-name .tc-verlauf { font-weight: 500; }
.tc-untertitel { margin-top: .5em; color: var(--text-2); font-size: .9em; line-height: 1.35; }
.tc-offen { margin-top: .55em; font-family: ui-monospace, Consolas, monospace; font-size: .76em; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); opacity: .75; }
.tc-verlauf { background-size: 100% auto; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.tc-verlauf.animiert { background-size: 200% auto; animation: tc-schimmer 4s linear infinite; }
@keyframes tc-schimmer { from { background-position: 0% center; } to { background-position: 100% center; } }
@media (prefers-reduced-motion: reduce) {
  .tc-kachel:hover { transform: none; }
  .tc-linie-fluss { animation-duration: 7s; }
  .tc-verlauf.animiert, .tc-kante.animiert { animation-duration: 12s; }
}

/* ---------- Regeln ---------- */
.regeln-raster { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
.regeln-seite { position: sticky; top: 100px; }
.suche { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; color: var(--text-3); }
.suche:focus-within { border-color: var(--rot); }
.suche input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: .98rem; }
.regeln-inhalt { display: grid; gap: .1rem; margin-top: 1.2rem; max-height: 60vh; overflow-y: auto; }
.regeln-inhalt a { padding: .45rem .7rem; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: .92rem; }
.regeln-inhalt a:hover { background: var(--flaeche); color: #fff; }
.regeln-intro { margin: 0 0 2rem; padding: 1.2rem 1.4rem; background: rgba(201, 150, 47, .08); border-left: 3px solid var(--rot); border-radius: 0 var(--r) var(--r) 0; color: #e9e3ee; }
.regel-kat { margin-bottom: 2.8rem; scroll-margin-top: 100px; }
.regel-kat h2 { font-size: 1.7rem; display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1rem; }
.regel-kat h2 span { color: var(--rot); font-weight: 300; }
.regel { padding: 1rem 1.2rem; border-radius: var(--r); background: var(--flaeche); margin-bottom: .6rem; }
.regel h3 { font: 600 1.05rem var(--lauf); text-transform: none; letter-spacing: 0; display: flex; gap: .7rem; align-items: baseline; }
.regel h3 span { color: var(--rot-hell); font: 500 .85rem var(--titel); letter-spacing: .05em; white-space: nowrap; }
.regel p { margin: .4rem 0 0; color: var(--text-2); }

/* ---------- Events ---------- */
.event-liste { display: grid; gap: 1rem; }
.event { display: grid; grid-template-columns: 90px 1fr auto; gap: 1.4rem; align-items: center; padding: 1.3rem 1.4rem; background: var(--flaeche); border-radius: var(--r); border-left: 3px solid var(--rot); }
.event-datum { text-align: center; }
.event-datum strong { display: block; font: 700 2.4rem/1 var(--titel); }
.event-datum span { font: 500 .9rem var(--titel); text-transform: uppercase; letter-spacing: .12em; color: var(--rot-hell); }
.event-kat { font: 500 .78rem var(--titel); letter-spacing: .14em; text-transform: uppercase; color: var(--rot); }
.event h3 { font-size: 1.35rem; margin: .2rem 0 .3rem; }
.event-meta { margin: 0; color: var(--text-3); font-size: .92rem; }
.event-text p:not(.event-meta) { margin: .6rem 0 0; color: var(--text-2); }
.event-plaetze { font: 500 .95rem var(--titel); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.event-plaetze.voll { color: var(--rot-hell); }

/* ---------- Blog ---------- */
.blog-liste { display: grid; gap: 1.4rem; }
.beitrag { padding: 1.8rem 2rem; background: var(--flaeche); border-radius: var(--r); border: 1px solid var(--linie); }
.beitrag.neuester { border-color: rgba(201, 150, 47, .5); }
.beitrag-datum { margin: 0 0 .4rem; font: 500 .85rem var(--titel); letter-spacing: .14em; text-transform: uppercase; color: var(--rot); }
.beitrag h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.beitrag-intro { margin: .8rem 0 0; color: var(--text-2); font-size: 1.05rem; }
.beitrag details { margin-top: 1rem; border: 0; }
.beitrag details:first-of-type { margin-top: 1rem; border: 0; }
.beitrag summary { font-size: 1rem; color: var(--rot-hell); padding: .4rem 2rem .4rem 0; }
.beitrag summary::after { top: .05rem; }
.beitrag-abschnitt { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 8px; background: rgba(255, 255, 255, .025); border-left: 3px solid var(--kat); }
.beitrag-abschnitt h3 { font-size: 1rem; color: var(--kat); letter-spacing: .1em; }
.beitrag-abschnitt ul { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--text-2); }
.beitrag-abschnitt p { margin: .5rem 0 0; color: var(--text-2); }
.kat-neu { --kat: #58c98a; } .kat-geaendert { --kat: #f0b429; } .kat-behoben { --kat: #6cb6ff; } .kat-entfernt { --kat: #ff6b70; } .kat-sonstiges { --kat: #9d99a6; }

/* ---------- Tasten & Befehle ---------- */
.befehle-werkzeug { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.befehle-werkzeug .suche { flex: 1 1 320px; max-width: 520px; }
.reiter { display: inline-flex; padding: 4px; background: var(--flaeche); border-radius: 999px; border: 1px solid var(--linie); }
.reiter button { display: inline-flex; align-items: center; gap: .45em; padding: .6em 1.2em; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 500 .95rem var(--titel); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.reiter button.aktiv { background: var(--rot); color: #fff; }
.befehl-gruppe { margin-bottom: 2.2rem; }
.befehl-titel { font-size: 1.35rem; margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linie); }
.befehl-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.2rem; }
.befehl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 1rem; align-items: center; padding: .7rem .9rem; background: var(--flaeche); border-radius: 8px; }
.befehl-taste { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.befehl-taste kbd { background: #2c2933; border: 1px solid rgba(255, 255, 255, .18); border-bottom-width: 3px; border-radius: 6px; padding: .2em .55em; font-size: .82rem; color: #fff; white-space: nowrap; }
.befehl-taste code { background: rgba(201, 150, 47, .12); border-color: rgba(201, 150, 47, .35); color: var(--rot-hell); font-size: .85rem; white-space: nowrap; }
.befehl-taste .trenner { color: var(--text-3); font-size: .8rem; }
.befehl-text { font-size: .95rem; }
.befehl-text small { display: block; color: var(--text-3); font-size: .82rem; margin-top: .1rem; }

/* Einblenden beim Scrollen */
.js .zeigen { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.js .zeigen.sichtbar { opacity: 1; transform: none; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1100px) {
  .karten { grid-template-columns: repeat(3, 1fr); }
  .staedte { grid-template-columns: repeat(2, 1fr); }
  .stadt { aspect-ratio: 4 / 3; }
  .live-zahlen { grid-template-columns: repeat(3, 1fr); }
  .live-zahlen > div:nth-child(n+4) { display: none; }
}
@media (max-width: 1100px) {
  .menue-knopf { display: block; }
  .navi {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - 76px); overflow-y: auto;
    background: rgba(30, 27, 35, .98); border-bottom: 1px solid rgba(201, 150, 47, .55); padding: .4rem 16px 1.3rem;
    transform: translateY(-130%); visibility: hidden; transition: transform .3s, visibility .3s;
  }
  .navi.offen { transform: none; visibility: visible; }
  .navi > a, .navi-oben { width: 100%; justify-content: space-between; padding: .95rem 0; border-bottom: 1px solid var(--linie); }
  .navi-unter { position: static; min-width: 0; padding: 0 0 .4rem .4rem; border: 0; box-shadow: none; background: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; display: none; }
  .navi-gruppe.offen .navi-unter { display: block; }
  .navi-unter a { padding: .75rem .4rem; }
  .navi-discord { justify-content: center; margin-top: 1rem; border-bottom: 0 !important; }
  .menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .system-raster { grid-template-columns: repeat(2, 1fr); }
  .regeln-raster { grid-template-columns: 1fr; gap: 1.5rem; }
  .regeln-seite { position: static; }
  .regeln-inhalt { display: none; }
}
@media (max-width: 900px) {
  .zwei-spalten { grid-template-columns: 1fr; }
  .befehl-liste { grid-template-columns: 1fr; }
  .event { grid-template-columns: 70px 1fr; }
  .event-plaetze { grid-column: 2; }
  .held-raster, .figur-raster, .figur-raster.links, .anleitung-raster, .ucp-raster, .schluss-raster { grid-template-columns: 1fr; }
  .held-zahlen { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .held-zahlen dd { font-size: 2.4rem; }
  .held-zahlen dt { font-size: .74rem; }
  .figur { max-width: 300px; }
  .figur-raster.links .figur { order: 2; }
  .karten { grid-template-columns: repeat(2, 1fr); }
  .schritte { grid-template-columns: 1fr; }
  .schluss .figur { max-width: 240px; }
  .schluss-raster > div { padding-bottom: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .kopf { height: 68px; }
  .navi { inset: 68px 0 auto; }
  .kopf-marke img { width: 74px; }
  .held { padding: 100px 0 130px; }
  .held-zahlen { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .karten { grid-template-columns: 1fr; }
  .staedte { grid-template-columns: 1fr; }
  .live-raster { gap: 1rem; padding: 1.1rem 1.1rem; }
  .live-zahlen { gap: .6rem; }
  .live-zahlen dt { font-size: .66rem; }
  .live-zahlen dd { font-size: 1.35rem; }
  .rot-band { clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%); }
  .fuss-raster { grid-template-columns: 1fr; }
  .knopf { padding: .85em 1.5em; }
  .system-raster { grid-template-columns: 1fr; }
  .seiten-kopf { padding: 120px 0 100px; }
  .befehl { grid-template-columns: 1fr; gap: .4rem; }
  .beitrag { padding: 1.4rem 1.2rem; }
  .team-karte { width: 100%; }
  .event { grid-template-columns: 1fr; gap: .6rem; }
  .event-datum { text-align: left; display: flex; align-items: baseline; gap: .5rem; }
  .event-datum strong { display: inline; font-size: 1.6rem; }
  .event-plaetze { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .held-bild.aktiv { animation: none; }
  .js .zeigen { opacity: 1; transform: none; transition: none; }
  .live-punkt { animation: none; }
}

/* ==========================================================================
   HELLES THEMA (07.10.2026) – warm, einladend: Pergament und Sand fuer die
   Inhalte, dunkles Holz fuer Kopf, Fuss und Teamtafel, Rot als Akzent.
   Das dunkle Design liegt gesichert in info-web-quelle/alt/style_dunkel_2026-10-07.css.
   ========================================================================== */
:root {
  --grund: #f3ead9;          /* Pergament */
  --grund-2: #faf5ec;        /* helles Papier */
  --flaeche: #ffffff;
  --flaeche-2: #fff8ee;
  --linie: rgba(92, 62, 30, .16);
  --text: #2b2016;
  --text-2: #5a4a3a;
  --text-3: #85725f;
  --rot: #b07d1e;
  --rot-hell: #c9962f;
  --rot-dunkel: #7d5510;
  --holz: #2a1f17;
  --holz-2: #3a2b20;
  --schatten-weich: 0 10px 28px -14px rgba(70, 45, 20, .35);
}
body { background: var(--grund-2); color: var(--text); }
a { color: var(--rot); }
a:hover { color: var(--rot-dunkel); }
strong { color: var(--text); }
code, kbd { background: rgba(92, 62, 30, .08); border-color: rgba(92, 62, 30, .25); color: var(--text); }
.abschnitt { background: var(--grund-2); }
.abschnitt.dunkler { background: var(--grund); }
.einleitung { color: var(--text-2); }

/* Kopfleiste und Untermenues: dunkles Holz, helle Schrift */
.kopf { background: rgba(42, 31, 23, .92); border-bottom-color: rgba(176, 125, 30, .7); }
.navi a, .navi-oben { color: #f3e9da; }
.navi a:hover, .navi-oben:hover, .navi-gruppe.offen .navi-oben, .navi-gruppe.aktiv .navi-oben, .navi-link.aktiv { color: #f3d48a; }
.navi-unter { background: rgba(48, 36, 27, .98); border-color: rgba(255, 255, 255, .08); }
.navi-unter a { color: #f3e9da; }
.navi-unter a:hover { background: rgba(176, 125, 30, .22); color: #fff; }
.navi-unter svg { color: #e8bd62; }
.menue-knopf span { background: #f3e9da; }
@media (max-width: 1100px) { .navi { background: rgba(42, 31, 23, .98); } .navi > a, .navi-oben { border-bottom-color: rgba(255, 255, 255, .1); } }

/* Bildbereiche bleiben dunkel ueberblendet – darauf helle Schrift */
.held::after {
  background: linear-gradient(90deg, rgba(30, 20, 12, .72) 0%, rgba(30, 20, 12, .45) 50%, rgba(30, 20, 12, .15) 100%),
              linear-gradient(180deg, rgba(30, 20, 12, .15), rgba(30, 20, 12, .35));
}
.seiten-kopf::before { background: linear-gradient(90deg, rgba(30, 20, 12, .78), rgba(30, 20, 12, .5) 60%, rgba(30, 20, 12, .25)); }
.held, .seiten-kopf { color: #fff; }
.held strong, .seiten-kopf strong { color: #fff; }
.held h1 .voll, .seiten-kopf h1 { color: #fff8ee; }
.held h1 .umriss { -webkit-text-stroke-color: #fff8ee; }
.held .rot, .seiten-kopf .rot { color: #f0c260; }
.held .kicker, .seiten-kopf .kicker { color: #f3d48a; }
.held-unter, .seiten-unter { color: #fbf1e3; }
.held-zahlen dt { color: #f1e2cc; }
.held-zahlen dd em { color: #f0c260; }
.held .knopf-rand { border-color: rgba(255, 248, 238, .7); color: #fff8ee; }
.held .knopf-rand:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .1); }
.schraege-unten { background: var(--grund-2); }

/* Live-Leiste */
.live-band { background: var(--grund-2); }
.live-raster { background: var(--flaeche); border-color: var(--linie); box-shadow: var(--schatten-weich); }
.live-zahlen dd { color: var(--text); }
.live-zahlen dt, .live-zahlen dd small { color: var(--text-3); }

/* Karten & Bausteine: weiss auf Pergament, weicher Schatten */
.karte, .system, .info-kasten, .regel, .event, .beitrag, .leer-kasten, .live-raster, .befehl, .ucp-liste li { box-shadow: var(--schatten-weich); }
.karte { background: var(--flaeche); }
.karte:hover { background: #fffdf9; }
.karte p, .system p, .weg p { color: var(--text-2); }
.karte-dunkel { background: linear-gradient(160deg, #f8ecd2, #ffffff); }
.karte-icon, .system-icon { background: rgba(176, 125, 30, .1); color: var(--rot); }
.system { border-color: var(--linie); }
.system-link:hover { background: #fffdf9; border-color: rgba(176, 125, 30, .45); color: var(--text); }
.knopf-rand { border-color: rgba(43, 32, 22, .35); color: var(--text); }
.knopf-rand:hover { border-color: var(--rot); color: var(--rot); }
.haken svg { color: var(--rot); }
.punkt-liste strong { color: var(--text); }
.klein-hinweis, .lade-hinweis { color: var(--text-3); }

/* "Und noch viel mehr": warmes Sandband */
.mehr { background: #ead9bd; }
.mehr .umriss { -webkit-text-stroke-color: var(--text); }
.chips li { background: rgba(255, 255, 255, .6); border-color: rgba(176, 125, 30, .35); color: var(--text); }
.chips li a { color: var(--rot); }

/* Staedte: Bildunterschriften bleiben hell auf dunklem Verlauf */
.stadt figcaption { background: linear-gradient(180deg, transparent, rgba(30, 20, 12, .85)); }
.stadt figcaption strong { color: #fff8ee; }
.stadt figcaption span { color: #f1e2cc; }
.stadt { box-shadow: var(--schatten-weich); }

/* Figuren-Abschnitte und FAQ */
.mit-figur { background: var(--grund); }
details { border-color: var(--linie); }
summary { color: var(--text); }
summary:hover { color: var(--rot); }
details p { color: var(--text-2); }

/* UCP-Liste, Tabellen, Regeln, Events, Blog, Befehle */
.ucp-liste li { background: var(--flaeche); }
.tabelle th { color: var(--text-3); }
.regeln-intro { background: rgba(176, 125, 30, .07); color: var(--text); }
.regeln-inhalt a { color: var(--text-2); }
.regeln-inhalt a:hover { background: var(--flaeche); color: var(--text); }
.regel h3 span, .event-datum span { color: var(--rot); }
.suche { background: var(--flaeche); color: var(--text-3); box-shadow: var(--schatten-weich); }
.reiter { background: var(--flaeche); box-shadow: var(--schatten-weich); }
.reiter button { color: var(--text-2); }
.beitrag-abschnitt { background: #fbf6ee; }
.kat-neu { --kat: #2f9a5e; } .kat-geaendert { --kat: #c48a0c; } .kat-behoben { --kat: #2f7fd0; } .kat-entfernt { --kat: #c62f37; } .kat-sonstiges { --kat: #7d7468; }
.befehl-taste kbd { background: #3a2b20; color: #fff8ee; border-color: rgba(0, 0, 0, .25); }
.befehl-taste code { background: rgba(176, 125, 30, .08); color: var(--rot-dunkel); border-color: rgba(176, 125, 30, .3); }
.event-plaetze.voll { color: var(--rot); }

/* Teamtafel: dunkles Holz wie eine Anschlagtafel – die Kacheln sind dafuer gemacht */
.team-abschnitt { background: linear-gradient(180deg, #2f231a, #241a13); }
.team-abschnitt .lade-hinweis { color: #e8d9c4; }
.tc-untertitel, .tc-offen { color: #cbb9a2; }

/* Abschluss: rotes Band auf Pergament */
.schluss { background: var(--grund); }

/* Fusszeile: dunkles Holz */
.fuss { background: var(--holz); border-top-color: var(--rot); }
.fuss-marke p, .fuss nav a, .fuss-spalten a { color: #d9c8b2 !important; }
.fuss nav a:hover, .fuss-spalten a:hover { color: #fff !important; }
.fuss-spalten strong { color: #e8bd62; }
.fuss-hinweis { color: #a8937c; }

/* Kopierschutz (wie im UCP): kein Markieren - Eingabefelder bleiben bedienbar */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }

/* GOLD statt Rot (07.10.2026) - auf Goldflaechen dunkle Schrift, sonst zu wenig Kontrast.
   Fassung mit Rot: info-web-quelle/alt/style_hell_rot_2026-10-07.css */
:root { --gold-text: #2a1f12; }
.knopf-rot { background: linear-gradient(180deg, #e3b955, #b8862b); color: var(--gold-text); box-shadow: 0 10px 26px -12px rgba(176, 125, 30, .8); }
.knopf-rot:hover { color: var(--gold-text); box-shadow: 0 14px 30px -10px rgba(176, 125, 30, .95); }
.reiter button.aktiv { background: #c9962f; color: var(--gold-text); }
.rot-band { background: linear-gradient(135deg, #b8862b, #d9a845 45%, #a87618); color: var(--gold-text); }
.rot-band h2, .rot-band h3, .rot-band strong { color: var(--gold-text); }
.anleitung-kopf p, .schritte p { color: rgba(42, 31, 18, .88); }
.schritte code, .schritte kbd { background: rgba(255, 255, 255, .35); border-color: rgba(42, 31, 18, .3); color: var(--gold-text); }
.schritte a:not(.knopf) { color: var(--gold-text); }
.schritt-icon { background: #2a1f12; color: #f0c260; }
.schritt-icon::after { background: #fff8e8; color: var(--gold-text); }
.knopf-weiss { background: #2a1f12; color: #f3d48a; }
.knopf-weiss:hover { background: #3d2d18; color: #fff1cc; }
.schluss::before { background: linear-gradient(120deg, #ead7b0, #f3e5c8 55%, #faf1df); box-shadow: inset 0 3px 0 rgba(201, 150, 47, .55); }
.schluss .umriss { -webkit-text-stroke-color: var(--gold-text); }
.schluss .voll, .schluss p { color: var(--gold-text); }
.knopf-rand-hell { border-color: rgba(42, 31, 18, .55); color: var(--gold-text); }
.knopf-rand-hell:hover { background: rgba(42, 31, 18, .08); color: var(--gold-text); }
.kopf { border-bottom-color: rgba(201, 150, 47, .75); }
.fuss { border-top-color: #c9962f; }
.karte::before { background: linear-gradient(90deg, #c9962f, transparent); }

/* Fusszeilen-Spalten oben buendig (ueberschreibt die alte .fuss nav-Regel) */
.fuss .fuss-spalten nav { justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; }

/* "Bist du bereit?" wieder dunkler (07.10.2026): warmes dunkles Holz mit Goldschimmer,
   helle Schrift - dunkler als Pergament, aber nicht mehr knallig golden */
.schluss::before { background: linear-gradient(120deg, #2e2116, #4a3520 55%, #6b4e28); box-shadow: inset 0 3px 0 rgba(201, 150, 47, .7); }
.schluss .umriss { -webkit-text-stroke-color: #f3d48a; }
.schluss .voll { color: #fff8ee; }
.schluss p { color: #ecdcc4; }
.schluss .knopf-rand-hell { border-color: rgba(243, 212, 138, .7); color: #f3d48a; }
.schluss .knopf-rand-hell:hover { background: rgba(243, 212, 138, .12); color: #fff1cc; }

/* "Join Discord" ueberall weiss mit schwarzer Schrift (07.10.2026) */
.navi-discord, .navi a.navi-discord { background: #ffffff; color: #111111 !important; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .55); }
.navi-discord:hover, .navi a.navi-discord:hover { background: #f1ece4; color: #000000 !important; }
.knopf-discord { background: #ffffff; color: #111111; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .55); border-color: rgba(0, 0, 0, .08); }
.knopf-discord:hover { background: #f1ece4; color: #000000; }

/* Kein Innenschatten oben: durch den schraegen Zuschnitt blieb davon rechts ein goldener Keil stehen */
.schluss::before { box-shadow: none; }

/* Hintergrund ueber der Schraege = Hintergrund des Abschnitts davor, sonst entsteht eine feine Stufe */
.schluss { background: var(--grund-2); }
.mit-figur + .schluss, .dunkler + .schluss, .mehr + .schluss { background: var(--grund); }
.mehr + .schluss { background: #ead9bd; }

/* Teamseite: die Schraege unter dem Kopfbild nimmt den Ton der dunklen Teamtafel an,
   sonst bleibt ein heller Keil zwischen Bild und Tafel stehen */
.seiten-kopf:has(+ .team-abschnitt) .schraege-unten { background: #2f231a; }
.team-abschnitt { background: linear-gradient(180deg, #2f231a, #241a13); }

/* Zentrierte Knopfreihen wirklich mittig */
.knopf-reihe.mittig { justify-content: center; }

/* Dunkle Wege (Kriminell, Schwarzbrennerei): dunkles Holz statt heller als die anderen Karten */
.karte-dunkel { background: linear-gradient(160deg, #3d2c1f, #2a1f17); }
.karte-dunkel:hover { background: linear-gradient(160deg, #46331f, #2f2318); }
.karte-dunkel h3 { color: #f3d48a; }
.karte-dunkel p { color: #e4d3bb; }
.karte-dunkel .karte-icon { background: rgba(240, 194, 96, .16); color: #f0c260; }

/* Dunkle Wege einen Tick heller (warmes Mittelbraun statt fast Schwarz) */
.karte-dunkel { background: linear-gradient(160deg, #6b4f33, #523b26); }
.karte-dunkel:hover { background: linear-gradient(160deg, #765838, #5a412a); }
.karte-dunkel p { color: #f1e4d0; }
.karte-dunkel .karte-icon { background: rgba(243, 212, 138, .18); }

/* "Und noch viel mehr" im Design von "Bist du bereit?": dunkles Holz mit Goldschimmer, schraege Kanten.
   Der Grund hinter den Schraegen: oben der Ton des Abschnitts davor, unten der des Abschnitts danach. */
.mehr {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(110px, 12vw, 150px) 0;
  background: linear-gradient(180deg, var(--grund-2) 50%, var(--grund) 50%);
}
.mehr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, #2e2116, #4a3520 55%, #6b4e28);
  clip-path: polygon(0 70px, 100% 0, 100% calc(100% - 70px), 0 100%);
}
.mehr .umriss { -webkit-text-stroke-color: #f3d48a; }
.mehr .rot { color: #fff8ee; }
.chips li { background: rgba(255, 248, 238, .06); border-color: rgba(243, 212, 138, .45); color: #f1e4d0; }
.chips li a { color: #f3d48a; }
.chips li a:hover { color: #fff1cc; }
@media (max-width: 560px) { .mehr::before { clip-path: polygon(0 34px, 100% 0, 100% calc(100% - 34px), 0 100%); } }

/* Tasten & Befehle: Bereiche als Dropdowns */
.befehl-gruppe { margin-bottom: .8rem; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); box-shadow: var(--schatten-weich); overflow: hidden; }
.befehl-gruppe:first-of-type { margin-top: 0; border-top: 1px solid var(--linie); }
.befehl-gruppe > summary.befehl-titel {
  display: flex; align-items: center; gap: .8rem; margin: 0; padding: 1.05rem 3.2rem 1.05rem 1.3rem; border: 0;
  font: 600 1.25rem var(--titel); letter-spacing: .04em; text-transform: uppercase; color: var(--text); cursor: pointer;
}
.befehl-gruppe > summary.befehl-titel:hover { background: #fffaf2; color: var(--rot); }
.befehl-gruppe > summary.befehl-titel::after { content: '+'; position: absolute; right: 1.3rem; top: .7rem; font: 300 1.8rem var(--titel); color: var(--rot); transition: transform .25s; }
.befehl-gruppe > summary.befehl-titel { position: relative; }
.befehl-gruppe[open] > summary.befehl-titel::after { transform: rotate(45deg); }
.befehl-gruppe[open] > summary.befehl-titel { border-bottom: 1px solid var(--linie); }
.befehl-anzahl { font: 500 .8rem var(--titel); letter-spacing: .06em; padding: .15em .65em; border-radius: 999px; background: rgba(176, 125, 30, .12); color: var(--rot-dunkel); }
.befehl-gruppe > .befehl-liste { padding: 1rem; background: var(--grund-2); }
.befehl-gruppe .befehl { box-shadow: none; border: 1px solid var(--linie); }

/* ---------- Teamseite: Positionen nach Rang, darunter Kacheln je Mitglied ---------- */
.team-liste { display: grid; gap: 3.2rem; }
.team-position-titel { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 1.4rem; }
.team-position-titel span { background: var(--rolle-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.team-position-titel::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--rolle), transparent); opacity: .5; }
.team-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.team-kachel { display: flex; flex-direction: column; background: var(--flaeche); border-radius: 14px; overflow: hidden; box-shadow: var(--schatten-weich); border-top: 4px solid var(--rolle); transition: transform .25s, box-shadow .25s; }
.team-kachel:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgba(70, 45, 20, .45); }
.team-foto { aspect-ratio: 1 / 1; background: linear-gradient(160deg, #e9dcc3, #d9c5a3); display: grid; place-items: center; overflow: hidden; }
.team-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-foto span { font: 700 4.5rem var(--titel); color: rgba(60, 40, 20, .35); }
.team-text { padding: 1.1rem 1.25rem 1.3rem; }
.team-rang { margin: 0; font: 600 .78rem var(--titel); letter-spacing: .16em; text-transform: uppercase; color: var(--rolle); }
.team-text h3 { font-size: 1.35rem; margin: .25rem 0 0; color: var(--text); }
.team-charakter { margin: .3rem 0 0; font-style: italic; color: var(--text-2); }
.team-beschreibung { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linie); color: var(--text-2); font-size: .95rem; }
.team-beschreibung p { margin: 0 0 .5rem; }
.team-beschreibung p:last-child { margin-bottom: 0; }

/* Startseite: "Wer willst du sein?" im selben Ton wie "Neu bei Silent River?" -
   dazu Live-Leiste, Schraege unter dem Bild und die Oberkante von "Und noch viel mehr" */
body[data-seite="home"] .held .schraege-unten,
body[data-seite="home"] .live-band { background: var(--grund); }
body[data-seite="home"] .mehr { background: var(--grund); }

/* ---------- Team: Steckbrief ("Hallo, ich bin ...") ---------- */
@font-face { font-family: 'Allura'; src: url('assets/fonts/allura-latin.woff2') format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: 'Allura'; src: url('assets/fonts/allura-latin-ext.woff2') format('woff2'); font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F; }
button.team-kachel { font: inherit; text-align: left; padding: 0; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; color: inherit; width: 100%; }
button.team-kachel:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.team-mehr { display: inline-block; margin-top: .8rem; font: 600 .8rem var(--titel); letter-spacing: .12em; text-transform: uppercase; color: var(--rot); }
.team-kachel.klickbar:hover .team-mehr { text-decoration: underline; }

.steckbrief { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 6px; background: #fbf9f5; color: #2a2622; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: auto; }
.steckbrief::backdrop { background: rgba(30, 20, 12, .62); backdrop-filter: blur(3px); }
.steckbrief[open] { animation: sb-auf .25s ease-out; }
@keyframes sb-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sb-blatt { position: relative; padding: 2.4rem 2.6rem 2.6rem; border-top: 5px solid var(--rolle, var(--rot)); }
.steckbrief-zu { position: absolute; top: .7rem; right: .9rem; width: 2.4rem; height: 2.4rem; border: 0; background: none; font-size: 2rem; line-height: 1; color: #3a2a1c; cursor: pointer; border-radius: 50%; }
.steckbrief-zu:hover { background: rgba(0, 0, 0, .06); }
.sb-kopf { display: flex; align-items: center; gap: 1.1rem; padding-right: 2rem; }
.sb-foto { width: 74px; height: 74px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rolle, var(--rot)); }
.sb-kopf h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .5em; margin: 0; text-transform: none; font-weight: 400; line-height: 1.1; }
.sb-hallo { font: 500 1.55rem var(--lauf); letter-spacing: .32em; text-transform: uppercase; color: #2a2622; }
.sb-schrift { font-family: 'Allura', cursive; font-size: 2.6rem; color: #2a2622; letter-spacing: 0; }
.sb-name { font-size: 1.55em; }
.sb-rang { margin: .4rem 0 1.4rem; font: 600 .78rem var(--titel); letter-spacing: .2em; text-transform: uppercase; color: var(--rolle, var(--rot)); }
.sb-zeile { margin-top: 1.1rem; }
.sb-frage { margin: 0 0 .4rem; font: 500 .82rem var(--lauf); letter-spacing: .3em; text-transform: uppercase; color: #2a2622; }
.sb-antwort { margin: 0; padding: .85rem 1.1rem; background: #ecebea; font-style: italic; font-size: 1.12rem; color: #2a2622; overflow-wrap: anywhere; }
.sb-frei p { margin: 0 0 .5rem; }
.sb-frei p:last-child { margin: 0; }
@media (max-width: 560px) {
  .sb-blatt { padding: 2rem 1.2rem 1.6rem; }
  .sb-hallo { font-size: 1.15rem; }
  .sb-schrift { font-size: 2rem; }
  .sb-foto { width: 58px; height: 58px; }
  .sb-frage { letter-spacing: .18em; font-size: .74rem; }
  .sb-antwort { font-size: 1rem; }
}

/* ---------- Popups (Features: Systeme) ---------- */
.system-link[role="button"] { cursor: pointer; }
.system-link[role="button"]:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.popup { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 14px; background: #fbf8f2; color: var(--text); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: auto; }
.popup::backdrop { background: rgba(30, 20, 12, .62); backdrop-filter: blur(3px); }
.popup[open] { animation: sb-auf .25s ease-out; }
.popup-blatt { position: relative; padding: 2.3rem 2.5rem 2.4rem; border-top: 5px solid var(--rot); }
.popup-zu { position: absolute; top: .7rem; right: .9rem; width: 2.4rem; height: 2.4rem; border: 0; background: none; font-size: 2rem; line-height: 1; color: #3a2a1c; cursor: pointer; border-radius: 50%; }
.popup-zu:hover { background: rgba(0, 0, 0, .06); }
.popup-kicker { display: flex; align-items: center; gap: .5em; margin: 0 0 .5rem; font: 600 .82rem var(--titel); letter-spacing: .18em; text-transform: uppercase; color: var(--rot); }
.popup-kicker svg { width: 1.2em; height: 1.2em; }
.popup-inhalt h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 2rem .9rem 0; color: var(--text); }
.popup-inhalt h3 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; color: var(--rot-dunkel); }
.popup-inhalt p { margin: 0 0 .8rem; color: var(--text-2); line-height: 1.65; }
.popup-inhalt ul, .popup-inhalt ol { margin: 0 0 .8rem; padding-left: 1.3rem; color: var(--text-2); line-height: 1.6; }
.popup-inhalt li { margin-bottom: .4rem; }
.popup-inhalt li::marker { color: var(--rot); }
.popup-inhalt strong { color: var(--text); }
.popup-knoepfe { margin-top: 1.4rem !important; }
@media (max-width: 560px) {
  .popup-blatt { padding: 2rem 1.2rem 1.6rem; }
}

/* Umlaut-Punkte (Ä, Ö, Ü) sollen nicht in die Zeile darueber ragen */
h1, h2, h3 { line-height: 1.18; }
.gross { line-height: 1.12; }
.sb-kopf h2 { line-height: 1.1; }

/* Abschnitte, die thematisch zusammengehoeren: gleicher Hintergrund, kleinerer Abstand */
.abschnitt-folge { padding-top: 0; }

/* ---------- Hauskarte (Features -> Housing) ---------- */
.hauskarte-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; margin-top: 2.4rem; align-items: start; }
.hauskarte { position: relative; aspect-ratio: 9000 / 7004; overflow: hidden; border-radius: var(--r); background: #d8c7a3 url('/assets/karte/map-lq.webp') center / cover; box-shadow: var(--schatten-weich); border: 1px solid var(--linie); touch-action: none; cursor: grab; user-select: none; }
.hauskarte.zieht { cursor: grabbing; }
.hk-flaeche { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.hk-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hk-punkte { position: absolute; inset: 0; }
.hk-punkt { position: absolute; width: 30px; height: 30px; margin: 0; padding: 5px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; display: grid; place-items: center; transform: translate(-50%, 50%) scale(var(--gegenzoom, 1)); transform-origin: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .45); transition: box-shadow .2s; }
.hk-punkt svg { width: 100%; height: 100%; }
.hk-punkt.frei { background: var(--rot); color: #fff; z-index: 2; }
.hk-punkt.belegt { background: #8a8178; color: #f3eee6; width: 22px; height: 22px; padding: 4px; z-index: 1; }
.hk-punkt.aktiv { z-index: 3; box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 4px 14px rgba(0, 0, 0, .5); }
.hk-knoepfe { position: absolute; top: 12px; right: 12px; display: grid; gap: 6px; z-index: 5; }
.hk-knoepfe button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--linie); background: #fffdf9; color: var(--text); font: 600 1.3rem var(--lauf); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.hk-knoepfe button:hover { background: #fff; color: var(--rot); }
.hk-knoepfe svg { width: 18px; height: 18px; }
.hk-legende { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; gap: .9rem; padding: .4rem .75rem; border-radius: 8px; background: rgba(255, 253, 249, .92); font-size: .85rem; color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.hk-legende span { display: inline-flex; align-items: center; gap: .4em; }
.hk-legende i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.hk-legende .hk-frei { background: var(--rot); }
.hk-legende .hk-belegt { background: #8a8178; }
.hk-info { position: absolute; left: 12px; bottom: 12px; z-index: 6; width: min(300px, calc(100% - 24px)); padding: 1rem 1.1rem 1.05rem; border-radius: 10px; background: #fffdf9; border-top: 4px solid var(--rot); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); cursor: auto; }
.hk-info-zu { position: absolute; top: .3rem; right: .45rem; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-2); cursor: pointer; padding: .2rem .4rem; }
.hk-info-ort { margin: 0; font: 600 .74rem var(--titel); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); }
.hk-info h3 { font-size: 1.25rem; margin: .2rem 1.5rem .35rem 0; color: var(--text); }
.hk-info-status { margin: 0 0 .5rem; font-size: .92rem; color: var(--text-2); }
.hk-info-status.belegt { margin: 0; }
.hk-info dl { margin: 0; display: grid; gap: .25rem; }
.hk-info dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; border-top: 1px solid var(--linie); padding-top: .3rem; }
.hk-info dt { color: var(--text-2); }
.hk-info dd { margin: 0; font-weight: 600; color: var(--text); }
.hk-liste { background: var(--flaeche); border-radius: var(--r); padding: 1.3rem 1.2rem; box-shadow: var(--schatten-weich); border: 1px solid var(--linie); }
.hk-liste h3 { display: flex; align-items: center; gap: .5em; font-size: 1.15rem; margin-bottom: .9rem; }
.hk-liste h3 svg { width: 1.1em; height: 1.1em; color: var(--rot); }
#hausListe { display: grid; gap: .55rem; max-height: 440px; overflow: auto; }
.hk-eintrag { display: grid; gap: .15rem; text-align: left; width: 100%; padding: .7rem .85rem; border-radius: 8px; border: 1px solid var(--linie); background: #fffdf9; cursor: pointer; font: inherit; color: var(--text); transition: border-color .2s, background .2s; }
.hk-eintrag:hover, .hk-eintrag.aktiv { border-color: var(--rot); background: #fff8ec; }
.hk-eintrag-name { font-weight: 700; }
.hk-eintrag-ort { font-size: .88rem; color: var(--text-2); }
.hk-eintrag-status { font-size: .8rem; color: var(--rot-dunkel); }
.hk-liste .klein-hinweis { margin: 1rem 0 0; }
@media (max-width: 900px) {
  .hauskarte-raster { grid-template-columns: 1fr; }
  #hausListe { max-height: none; }
}
@media (max-width: 560px) {
  .hk-legende { font-size: .78rem; gap: .6rem; }
  .hk-punkt { width: 26px; height: 26px; }
}