/* ==========================================================================
   Karlscraft – Bürgerportal
   Badisches Rot und Gold auf Planpapier. Schriften liegen auf diesem Server –
   kein Abruf bei Google, keine Besucheradressen an Dritte.
   Fira: SIL Open Font License, siehe schrift/OFL.txt
   ========================================================================== */
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schrift/fira-sans-condensed-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schrift/fira-sans-condensed-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(schrift/fira-sans-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Sans Condensed'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(schrift/fira-sans-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schrift/fira-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schrift/fira-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(schrift/fira-sans-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(schrift/fira-sans-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schrift/fira-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schrift/fira-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schrift/fira-sans-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schrift/fira-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schrift/fira-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schrift/fira-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schrift/fira-mono-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schrift/fira-mono-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --plan:        #E9E7E1;
  --plan-tief:   #DEDBD2;
  --karte:       #FCFBF8;
  --tinte:       #14181B;
  --tinte-leise: #5C6369;
  --tinte-zart:  #8A9096;
  --baden:       #A9121D;
  --baden-hell:  #C8323D;
  --baden-zart:  rgba(169, 18, 29, 0.07);
  --gold:        #B8860D;
  --gold-hell:   #F2C230;
  --gold-zart:   #FBF3DC;
  --gruen:       #2E7D4F;
  --linie:       rgba(20, 24, 27, 0.14);
  --linie-fein:  rgba(20, 24, 27, 0.07);
  --balken-leise: #C4BFB3;

  --display: "Fira Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --body:    "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "Fira Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --rand: 1px solid var(--linie);
  --seitenleiste: 15.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--tinte);
  background-color: var(--plan);
  background-image:
    linear-gradient(var(--linie-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-fein) 1px, transparent 1px);
  background-size: 28px 28px;
}

a { color: var(--baden); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--baden-hell); }
:focus-visible { outline: 2px solid var(--baden); outline-offset: 3px; }
img { max-width: 100%; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.leise { color: var(--tinte-leise); }
.klein { font-size: 0.86rem; }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Typografie ----------------------------------------------------------- */

.augenbraue {
  margin: 0 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baden);
}
.augenbraue--gold { color: var(--gold); }
.augenbraue--leise { color: var(--tinte-leise); }

.titel {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
}
.titel--seite { font-size: clamp(1.7rem, 3.6vw, 2.35rem); }

h2, .h2 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}
h3, .h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.anriss { margin: 0 0 1.4rem; font-size: 1.05rem; max-width: 42rem; }
.hinweis {
  margin: 1.5rem 0 0;
  padding-top: 0.9rem;
  border-top: var(--rand);
  font-size: 0.88rem;
  color: var(--tinte-leise);
  max-width: 42rem;
}

/* --- Öffentlicher Rahmen -------------------------------------------------- */

.kopf-oeffentlich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: var(--rand);
  background: rgba(233, 231, 225, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf-oeffentlich__rechts { display: flex; align-items: center; gap: 0.9rem; }
.kopf-oeffentlich__links { display: flex; gap: 0.5rem; }

.marke { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--tinte); text-decoration: none; }
.marke:hover { color: var(--tinte); }
.marke__wappen { width: 32px; height: auto; display: block; }
.marke__text { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; line-height: 1; }
.marke__unter {
  display: block; margin-top: 0.2rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinte-leise);
}

.inhalt-oeffentlich {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem);
}
.inhalt-schmal { max-width: 30rem; margin: 0 auto; }
.inhalt-mittel { max-width: 46rem; margin: 0 auto; }

.fuss {
  border-top: var(--rand);
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--tinte-leise);
}
.fuss p { margin: 0; }
.fuss a { color: var(--tinte-leise); }
.fuss__trenner { margin: 0 0.35rem; opacity: 0.5; }

/* --- Portalrahmen mit Seitenleiste ---------------------------------------- */

.rahmen { display: grid; grid-template-columns: var(--seitenleiste) minmax(0, 1fr); min-height: 100vh; }

.leiste {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--plan-tief);
  border-right: 1px solid var(--linie);
  box-shadow: inset -3px 0 0 var(--baden);
}
.leiste__marke { padding: 1.1rem 1.2rem 0.9rem; }
.leiste__nav { flex: 1; padding: 0.4rem 0 1rem; }
.leiste__gruppe { margin: 0.9rem 0 0.25rem; padding: 0 1.2rem; }
.leiste__gruppe-titel {
  margin: 0 0 0.35rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-zart);
}
.leiste__eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 -1.2rem;
  padding: 0.42rem 1.2rem 0.42rem 1.05rem;
  border-left: 3px solid transparent;
  color: var(--tinte);
  text-decoration: none;
  font-size: 0.94rem;
  line-height: 1.3;
}
.leiste__eintrag:hover { background: rgba(252, 251, 248, 0.55); color: var(--tinte); }
.leiste__eintrag[aria-current="page"] {
  background: var(--karte);
  border-left-color: var(--baden);
  font-weight: 500;
}
.leiste__eintrag--wichtig { color: var(--baden); font-weight: 500; }
.zaehler {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--baden);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
}
.zaehler--gold { background: var(--gold); }

.leiste__ich {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--linie);
}
.leiste__ich-text { min-width: 0; flex: 1; line-height: 1.25; }
.leiste__ich-name { display: block; font-weight: 500; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste__ich-link { font-size: 0.78rem; color: var(--tinte-leise); }
.leiste__ich form { margin: 0; }
.leiste__abmelden {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; color: var(--tinte-leise); text-decoration: underline;
  text-underline-offset: 3px;
}

.hauptbereich { min-width: 0; display: flex; flex-direction: column; }
.oberleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 3vw, 2.2rem);
  border-bottom: var(--rand);
  background: rgba(233, 231, 225, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 15;
}
.oberleiste__pfad {
  margin: 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.oberleiste__mobil { display: none; }
.inhalt { flex: 1; width: 100%; max-width: 74rem; padding: clamp(1.4rem, 3.6vw, 2.6rem) clamp(1rem, 3vw, 2.2rem); }

/* Menü für schmale Schirme */
.menue { display: none; }
.menue > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--tinte);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  background: var(--karte);
}
.menue > summary::-webkit-details-marker { display: none; }

/* --- Serverstatus-Anzeige --------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem 0.28rem 0.55rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--tinte);
  text-decoration: none;
  font-size: 0.82rem;
  white-space: nowrap;
}
.status:hover { color: var(--tinte); border-color: var(--tinte); }
.status__punkt { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tinte-zart); flex: none; }
.status--online .status__punkt { background: var(--gruen); box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.18); }
.status__zahl { font-family: var(--mono); font-size: 0.78rem; color: var(--tinte-leise); }

/* --- Uhren: Ortszeit und Ingame-Zeit -------------------------------------- */

.oberleiste__rechts { display: flex; align-items: center; gap: 0.6rem; }
.uhren {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  font-size: 0.82rem;
  white-space: nowrap;
}
.uhr { display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.28rem 0.75rem; cursor: default; }
.uhr + .uhr { border-left: 1px solid var(--linie); }
.uhr__name {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.uhr__zeit { font-family: var(--mono); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
/* Tag und Nacht im Spiel: Sonne gold, Mond schieferblau. */
.uhr__sonne {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none;
  background: var(--gold-hell);
  box-shadow: 0 0 0 3px rgba(242, 194, 48, 0.22);
}
.uhr--nacht .uhr__sonne { background: #3B4A63; box-shadow: 0 0 0 3px rgba(59, 74, 99, 0.16); }
.uhr--steht .uhr__zeit, .uhr--steht .uhrenkarte__zeit { color: var(--tinte-zart); }
.uhr--steht .uhr__sonne { background: var(--tinte-zart); box-shadow: none; }

/* Große Fassung auf der Seite Serverstatus */
.uhrenkarte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--rand);
  background: var(--karte);
}
.uhrenkarte__feld { padding: 1rem clamp(1rem, 2.6vw, 1.5rem) 1.1rem; min-width: 0; }
.uhrenkarte__feld + .uhrenkarte__feld { border-left: var(--rand); }
.uhrenkarte__feld .augenbraue { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.uhrenkarte__zeit {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.uhrenkarte__unter { margin: 0.3rem 0 0; font-size: 0.84rem; color: var(--tinte-leise); }
@media (max-width: 420px) {
  .uhrenkarte { grid-template-columns: 1fr; }
  .uhrenkarte__feld + .uhrenkarte__feld { border-left: 0; border-top: var(--rand); }
}
/* Auf schmalen Schirmen passt in der Kopfzeile nur der Serverstatus - ohne
   Konto stehen dort zusätzlich die Knöpfe zum Anmelden. Die Uhren gibt es
   dann groß auf der Seite Serverstatus, zu der die Statusanzeige führt. */
@media (max-width: 900px) {
  .kopf-oeffentlich .uhren { display: none; }
}
/* Startseite ohne Konto: Uhren in der Karte "Spielserver", sobald sie in der
   Kopfzeile fehlen. */
.uhrenzeile { display: none; margin: 1rem 0 0; font-size: 0.82rem; }
.uhrenzeile .uhr { padding: 0 1rem 0 0; }
.uhrenzeile .uhr + .uhr { border-left: 0; }
@media (max-width: 900px) {
  .uhrenzeile { display: flex; flex-wrap: wrap; gap: 0.3rem 0; }
}
@media (max-width: 720px) {
  .uhren { display: none; }
}

/* --- Karten und Raster ---------------------------------------------------- */

.karte {
  background: var(--karte);
  border: var(--rand);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
}
.karte--rot { border-top: 3px solid var(--baden); }
.karte--gold { border-left: 3px solid var(--gold); }
.karte--tinte { border-left: 3px solid var(--tinte); }
.karte__titel { margin: 0 0 0.3rem; font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.karte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.karte__kopf h2, .karte__kopf .karte__titel { margin: 0; }
.karte__anriss { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--tinte-leise); }
.karte__fuss { margin: 1rem 0 0; font-size: 0.86rem; color: var(--tinte-leise); }
.karte__mehr { font-size: 0.86rem; white-space: nowrap; }

.raster { display: grid; gap: 1.2rem; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--haupt { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.stapel > * + * { margin-top: 1.2rem; }
.abstand-oben { margin-top: 1.6rem; }

.leer {
  padding: 1.4rem;
  border: 1px dashed var(--linie);
  color: var(--tinte-leise);
  font-size: 0.92rem;
  text-align: center;
  background: rgba(252, 251, 248, 0.5);
}

/* --- Kennzahlen ----------------------------------------------------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: var(--rand);
}
.kennzahl { background: var(--karte); padding: 1rem 1.1rem; min-width: 0; }
.kennzahl__name {
  margin: 0 0 0.3rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.kennzahl__wert {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kennzahl__unter { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--tinte-leise); }

/* --- Rangbalken ----------------------------------------------------------- */

.balken { list-style: none; margin: 0; padding: 0; }
.balken__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linie-fein);
  position: relative;
}
.balken__zeile:last-child { border-bottom: 0; }
.balken__name { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken__mod {
  margin-left: 0.35rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--tinte-zart);
}
.balken__wert { font-family: var(--mono); font-size: 0.82rem; text-align: right; font-variant-numeric: tabular-nums; }
.balken__spur { grid-column: 1 / -1; height: 6px; background: var(--linie-fein); border-radius: 0 4px 4px 0; }
.balken__fuellung {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--baden);
  border-radius: 0 4px 4px 0;
}
.balken--gold .balken__fuellung { background: var(--gold); }
.balken__zeile--leise .balken__fuellung { background: var(--balken-leise); }
.balken__platz {
  display: inline-block; min-width: 1.8rem;
  font-family: var(--mono); font-size: 0.75rem; color: var(--tinte-zart);
}
.balken__zeile--ich { background: var(--gold-zart); margin: 0 -0.6rem; padding-left: 0.6rem; padding-right: 0.6rem; }
.balken__zeile--ich .balken__name { font-weight: 500; }
.balken__zeile:hover .balken__fuellung, .balken__zeile:focus-within .balken__fuellung { filter: brightness(0.88); }

.tipp {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  padding: 0.4rem 0.6rem;
  background: var(--tinte);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
  border-radius: 4px;
  max-width: 18rem;
  box-shadow: 0 4px 14px rgba(20, 24, 27, 0.25);
}

/* Breiten der Rangbalken (Inline-Styles verbietet die Content-Security-Policy) */
.bw-0{width:0%} .bw-1{width:1%} .bw-2{width:2%} .bw-3{width:3%} .bw-4{width:4%} .bw-5{width:5%} .bw-6{width:6%} .bw-7{width:7%} .bw-8{width:8%} .bw-9{width:9%} .bw-10{width:10%} .bw-11{width:11%} .bw-12{width:12%} .bw-13{width:13%} .bw-14{width:14%} .bw-15{width:15%} .bw-16{width:16%} .bw-17{width:17%} .bw-18{width:18%} .bw-19{width:19%} .bw-20{width:20%} .bw-21{width:21%} .bw-22{width:22%} .bw-23{width:23%} .bw-24{width:24%} .bw-25{width:25%} .bw-26{width:26%} .bw-27{width:27%} .bw-28{width:28%} .bw-29{width:29%} .bw-30{width:30%} .bw-31{width:31%} .bw-32{width:32%} .bw-33{width:33%} .bw-34{width:34%} .bw-35{width:35%} .bw-36{width:36%} .bw-37{width:37%} .bw-38{width:38%} .bw-39{width:39%} .bw-40{width:40%} .bw-41{width:41%} .bw-42{width:42%} .bw-43{width:43%} .bw-44{width:44%} .bw-45{width:45%} .bw-46{width:46%} .bw-47{width:47%} .bw-48{width:48%} .bw-49{width:49%} .bw-50{width:50%} .bw-51{width:51%} .bw-52{width:52%} .bw-53{width:53%} .bw-54{width:54%} .bw-55{width:55%} .bw-56{width:56%} .bw-57{width:57%} .bw-58{width:58%} .bw-59{width:59%} .bw-60{width:60%} .bw-61{width:61%} .bw-62{width:62%} .bw-63{width:63%} .bw-64{width:64%} .bw-65{width:65%} .bw-66{width:66%} .bw-67{width:67%} .bw-68{width:68%} .bw-69{width:69%} .bw-70{width:70%} .bw-71{width:71%} .bw-72{width:72%} .bw-73{width:73%} .bw-74{width:74%} .bw-75{width:75%} .bw-76{width:76%} .bw-77{width:77%} .bw-78{width:78%} .bw-79{width:79%} .bw-80{width:80%} .bw-81{width:81%} .bw-82{width:82%} .bw-83{width:83%} .bw-84{width:84%} .bw-85{width:85%} .bw-86{width:86%} .bw-87{width:87%} .bw-88{width:88%} .bw-89{width:89%} .bw-90{width:90%} .bw-91{width:91%} .bw-92{width:92%} .bw-93{width:93%} .bw-94{width:94%} .bw-95{width:95%} .bw-96{width:96%} .bw-97{width:97%} .bw-98{width:98%} .bw-99{width:99%} .bw-100{width:100%}

/* --- Tabellen ------------------------------------------------------------- */

.tabelle-huelle { overflow-x: auto; border: var(--rand); background: var(--karte); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th {
  text-align: left;
  padding: 0.65rem 0.9rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte-leise);
  background: var(--plan);
  border-bottom: var(--rand);
  white-space: nowrap;
}
.tabelle td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--linie-fein); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: rgba(233, 231, 225, 0.45); }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.85rem; }
.tabelle--ungelesen td:first-child { box-shadow: inset 3px 0 0 var(--baden); }
.zelle-person { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.zelle-person__text { min-width: 0; line-height: 1.25; }
.zelle-person__unter { display: block; font-family: var(--mono); font-size: 0.74rem; color: var(--tinte-leise); }

.fakten {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: var(--rand);
}
.fakten > div { background: var(--plan); padding: 0.8rem 1rem; }
.fakten--karte > div { background: var(--karte); }
.fakten--eins { grid-template-columns: 1fr; }
.fakten dt {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinte-leise); margin-bottom: 0.15rem;
}
.fakten dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }

/* --- Abzeichen ------------------------------------------------------------ */

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--plan);
}
.abzeichen--offen { color: var(--baden); border-color: rgba(169, 18, 29, 0.35); background: var(--baden-zart); }
.abzeichen--beantwortet { color: #7A5A08; border-color: rgba(184, 134, 13, 0.45); background: var(--gold-zart); }
.abzeichen--erledigt { color: var(--tinte-leise); }
.abzeichen--gruen { color: var(--gruen); border-color: rgba(46, 125, 79, 0.35); background: rgba(46, 125, 79, 0.08); }
.abzeichen--admin { color: var(--baden); }
.abzeichen--moderator { color: var(--gruen); }

/* Präfixe aus dem Spiel – auf dunklem Grund, wie im Chat */
.mc-chip {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  background: #23272B;
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: nowrap;
}
.mc-0 { color: #000000; } .mc-1 { color: #0000AA; } .mc-2 { color: #00AA00; } .mc-3 { color: #00AAAA; }
.mc-4 { color: #E0383E; } .mc-5 { color: #AA00AA; } .mc-6 { color: #FFAA00; } .mc-7 { color: #AAAAAA; }
.mc-8 { color: #8A8A8A; } .mc-9 { color: #7777FF; } .mc-a { color: #55FF55; } .mc-b { color: #55FFFF; }
.mc-c { color: #FF5555; } .mc-d { color: #FF55FF; } .mc-e { color: #FFFF55; } .mc-f { color: #FFFFFF; }
.mc-fett { font-weight: 700; } .mc-kursiv { font-style: italic; }
.mc-unter { text-decoration: underline; } .mc-durch { text-decoration: line-through; }

/* --- Minecraft-Köpfe ------------------------------------------------------ */
/* Die Skin wird achtfach vergrößert und so verschoben, dass genau das
   Gesichtsfeld (8–16 | 8–16) sichtbar ist; die Hutebene liegt darüber. */

.kopf {
  --k: 40px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--k);
  height: var(--k);
  overflow: hidden;
  border-radius: 3px;
  background:
    linear-gradient(180deg, #9C8E7A 0 37.5%, #C9B79C 37.5% 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 27, 0.12);
}
.kopf img {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 800%;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.kopf img.kopf__hut { left: -500%; }
.kopf--s { --k: 22px; border-radius: 2px; }
.kopf--m { --k: 36px; }
.kopf--l { --k: 64px; border-radius: 4px; }
.kopf--xl { --k: 108px; border-radius: 6px; }

/* --- Formulare ------------------------------------------------------------ */

.feld { margin-bottom: 1.25rem; }
.feld label, .feld__titel {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"],
.feld input[type="search"], .feld select, .feld textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--plan);
  border: 1px solid var(--tinte);
  border-radius: 0;
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--baden); outline-offset: 1px; background: #fff; }
.feld [aria-invalid="true"] { border-color: var(--baden); background: #FFF8F8; }
.feld__hilfe { margin: 0.4rem 0 0; font-size: 0.83rem; line-height: 1.45; color: var(--tinte-leise); }
.feld--code input {
  font-family: var(--mono);
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0.55rem;
}
.haken { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1.1rem; font-size: 0.92rem; }
.haken input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--baden); flex: none; }
.zeilenform { display: flex; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; }
.zeilenform input[type="search"], .zeilenform input[type="text"] {
  flex: 1 1 14rem; min-width: 0;
  padding: 0.55rem 0.75rem; font: inherit; background: var(--karte); border: 1px solid var(--tinte); border-radius: 0;
}
.zeilenform select { padding: 0.5rem 0.6rem; font: inherit; background: var(--karte); border: 1px solid var(--tinte); }

.formular-karte { border-top: 3px solid var(--baden); }

/* --- Knöpfe --------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 0.62rem 1.3rem;
  border: 1px solid var(--tinte);
  border-radius: 0;
  background: transparent;
  color: var(--tinte);
  text-decoration: none;
  cursor: pointer;
  transition: transform 90ms ease, background-color 120ms ease, color 120ms ease;
}
.knopf:hover { background: var(--plan-tief); color: var(--tinte); }
.knopf--haupt { background: var(--baden); border-color: var(--baden); color: #fff; }
.knopf--haupt:hover { background: var(--baden-hell); border-color: var(--baden-hell); color: #fff; }
.knopf--gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.knopf--gold:hover { background: #9E730B; border-color: #9E730B; color: #fff; }
.knopf--klein { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.knopf--breit { width: 100%; }
.knopf--warnung { border-color: var(--baden); color: var(--baden); }
.knopf--warnung:hover { background: var(--baden-zart); color: var(--baden); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.textknopf {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--baden); text-decoration: underline; text-underline-offset: 3px;
}
form.inline { display: inline; margin: 0; }

/* --- Meldungen ------------------------------------------------------------ */

.meldung {
  margin: 0 0 1.2rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--baden);
  background: var(--baden-zart);
  font-size: 0.93rem;
}
.meldung p { margin: 0 0 0.35rem; }
.meldung p:last-child { margin-bottom: 0; }
.meldung--erfolg { border-left-color: var(--gruen); background: rgba(46, 125, 79, 0.08); }
.meldung--hinweis, .meldung--warnung { border-left-color: var(--gold); background: rgba(184, 134, 13, 0.1); }
.meldung--stoerung { border-left-color: var(--tinte); background: var(--plan-tief); }
.meldungen { margin-bottom: 1.2rem; }
.meldungen .meldung { margin-bottom: 0.6rem; }


/* ==== Einbürgerung: Fächer, Prüfung, Ergebnis (aus der Verifizierung übernommen) ==== */

/* --- Fächer (Fortschritt) ------------------------------------------------- */

.fortschritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
.faecher { width: min(340px, 92%); height: auto; overflow: visible; }
.faecher__schloss { fill: var(--tinte); }

.strahl {
  stroke: var(--tinte);
  stroke-opacity: 0.16;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 180ms ease, stroke-opacity 180ms ease, stroke-width 180ms ease;
}
.strahl--fertig { stroke: var(--baden); stroke-opacity: 1; }
.strahl--aktuell { stroke: var(--gold); stroke-opacity: 1; stroke-width: 3.5; }

.fortschritt__zaehler {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--tinte-leise);
}

.faecher--voll { width: min(380px, 96%); margin: 0 auto; display: block; }

/* Wappen als Siegel im Strahlenkranz */
.siegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.75rem;
}
.siegel__wappen {
  width: 96px;
  height: auto;
  margin-top: -52px;
  filter: drop-shadow(0 2px 6px rgba(20, 24, 27, 0.22));
}
.strahl--gold {
  stroke: var(--gold);
  stroke-opacity: 1;
  stroke-width: 2.5;
  animation: strahl-auf 420ms ease both;
}
@keyframes strahl-auf {
  from { stroke-opacity: 0; transform: scaleY(0.6); transform-origin: 210px 126px; }
  to   { stroke-opacity: 1; transform: scaleY(1); }
}

/* --- Prüfung -------------------------------------------------------------- */

.pruefung { max-width: 46rem; margin: 0 auto; }
.pruefung .frage { margin-bottom: 1.25rem; }

.frage {
  margin: 0 0 1.25rem;
  border: var(--rand);
  border-left: 3px solid var(--tinte);
  padding: clamp(1.15rem, 3vw, 1.7rem);
  background: var(--karte);
}
body.mit-schritten .frage { display: none; }
body.mit-schritten .frage--aktiv {
  display: block;
  animation: karte-auf 160ms ease both;
}
@keyframes karte-auf {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.frage__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0;
  margin-bottom: 0.9rem;
  width: 100%;
}
.frage__nummer {
  color: var(--baden);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.frage__quelle {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.frage__text {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.25;
}

.optionen { display: grid; gap: 0.6rem; }

.option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--linie);
  background: var(--plan);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.option:hover { border-color: var(--tinte); }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option__marke {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--tinte);
  font-size: 0.78rem;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}
.option__text { line-height: 1.45; }
.option:has(input:checked) { border-color: var(--baden); background: rgba(169, 18, 29, 0.05); }
.option:has(input:checked) .option__marke {
  background: var(--baden);
  border-color: var(--baden);
  color: #fff;
}
.option:has(input:focus-visible) { outline: 2px solid var(--baden); outline-offset: 2px; }

.steuerung {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.5rem;
}
body:not(.mit-schritten) [data-rolle="weiter"],
body:not(.mit-schritten) [data-rolle="zurueck"] { display: none; }

.offen {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--baden);
}
/* Nach einem Abgabeversuch: Fragen ohne Antwort sind markiert. */
.frage__offen {
  display: none;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--baden);
}
.frage--offen { border-left-color: var(--baden); }
.frage--offen .frage__offen { display: inline; }

/* --- Ergebnis ------------------------------------------------------------- */

.ergebnis { max-width: 46rem; margin: 0 auto; }

.ergebnis__zahl {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0.35rem 0.8rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--gold);
}
.ergebnis__zahl--offen { background: var(--tinte); }

.schritte { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: none; }
.schritte li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: var(--rand);
}
.schritte li:last-child { border-bottom: var(--rand); }
.schritte__marke {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--tinte);
  font-size: 0.8rem;
}
.schritte h2 {
  margin: 0 0 0.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}
.schritte p { margin: 0; font-size: 0.92rem; color: var(--tinte-leise); }

.lesestoff { margin: 1.5rem 0; border-left: 3px solid var(--gold); }

/* --- Roleplay-Name ------------------------------------------------------- */

.namenskarte {
  margin: 2rem 0 0;
  border-left: 3px solid var(--gold);
}
.namenskarte--fertig { border-left-color: var(--baden); }

.namenskarte__name {
  margin: 0.2rem 0 0.9rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.namensform {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: 0.4rem;
}
.namensform input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--tinte);
  background: var(--plan);
  border: 1px solid var(--tinte);
  border-radius: 0;
}
.namensform input:focus { outline: 2px solid var(--baden); outline-offset: 1px; background: #fff; }
.namensform input[aria-invalid="true"] { border-color: var(--baden); }
.namensform .knopf { flex: 0 0 auto; white-space: nowrap; }

.feld__versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
}

@media (max-width: 520px) {
  .namensform { flex-direction: column; }
  .namensform .knopf { width: 100%; }
}
.abschnittsliste { margin: 0; padding-left: 1.1rem; }
.abschnittsliste li { margin-bottom: 0.3rem; font-size: 0.95rem; }
.abschnittsliste__rest { color: var(--tinte-leise); font-style: italic; }

.bestandskarte { margin-bottom: 1.5rem; border-left: 3px solid var(--tinte); }
.wiederholen { margin-top: 1.5rem; }


/* --- Bürgerausweis -------------------------------------------------------- */
/* Angelehnt an den Personalausweis: Lichtbild, Felder in Kapitälchen,
   maschinenlesbare Zeile. Das goldene Schrägband zitiert das Wappen. */

.ausweis {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 1.4rem;
  max-width: 36rem;
  min-height: 19.5rem;
  padding: 1.15rem 1.4rem 0;
  border-radius: 14px;
  border: 1px solid rgba(20, 24, 27, 0.18);
  overflow: hidden;
  background:
    linear-gradient(118deg, transparent 0 61%, rgba(242, 194, 48, 0.34) 61% 69%, transparent 69%),
    repeating-radial-gradient(circle at 88% 22%, rgba(184, 134, 13, 0.07) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, #FDFBF5, #F4EFE3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 26px -14px rgba(20, 24, 27, 0.35);
}
.ausweis__wappen {
  position: absolute;
  right: -1.4rem;
  bottom: 2.6rem;
  width: 10.5rem;
  opacity: 0.09;
  pointer-events: none;
}
.ausweis__kopfzeile {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(169, 18, 29, 0.35);
}
.ausweis__land {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--baden);
}
.ausweis__art {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.ausweis__bild { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.ausweis__bild .kopf { box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(20, 24, 27, 0.2); }
.ausweis__nummer { font-family: var(--mono); font-size: 0.72rem; color: var(--baden); letter-spacing: 0.06em; }
.ausweis__felder { margin: 0; display: grid; gap: 0.55rem; align-content: start; position: relative; }
.ausweis__felder dt {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.ausweis__felder dd { margin: 0.05rem 0 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.ausweis__name { font-size: 1.55rem !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.ausweis__rollen { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ausweis__mrz {
  grid-column: 1 / -1;
  margin: 1rem -1.4rem 0;
  padding: 0.55rem 1.4rem 0.65rem;
  background: rgba(20, 24, 27, 0.045);
  border-top: 1px solid rgba(20, 24, 27, 0.08);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: #3D4247;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.ausweis--vorlaeufig .ausweis__land::after {
  content: " · vorläufig";
  color: var(--tinte-leise);
  font-weight: 700;
}

.uebersicht-kopf {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: stretch;
  margin-bottom: 1.6rem;
}
.naechster-schritt { display: flex; flex-direction: column; justify-content: center; }
.naechster-schritt .titel { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* --- Startseite (öffentlich) ---------------------------------------------- */

.auftakt {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: 3rem;
}
.auftakt__wappen { width: clamp(84px, 11vw, 118px); height: auto; display: block; margin-bottom: 1.2rem; }
.auftakt__knoepfe { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.weg { list-style: none; margin: 0; padding: 0; counter-reset: weg; }
.weg li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: var(--rand);
}
.weg li:last-child { border-bottom: var(--rand); }
.weg__nr {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border: 1px solid var(--tinte); font-family: var(--mono); font-size: 0.85rem; background: var(--karte);
}
.weg h3 { margin: 0 0 0.15rem; }
.weg p { margin: 0; font-size: 0.9rem; color: var(--tinte-leise); }

/* --- Amtsblatt ------------------------------------------------------------ */

.bekanntmachung { padding: 1.3rem 0; border-top: var(--rand); }
.bekanntmachung:first-child { border-top: 0; padding-top: 0; }
.bekanntmachung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin-bottom: 0.4rem; }
.bekanntmachung__titel { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.bekanntmachung__datum { font-family: var(--mono); font-size: 0.74rem; color: var(--tinte-leise); }
.bekanntmachung__text p { margin: 0 0 0.7rem; }
.bekanntmachung__text h3 { margin-top: 1rem; }
.bekanntmachung__text ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.bekanntmachung--angeheftet .bekanntmachung__titel::before {
  content: "Angeheftet";
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.05rem 0.4rem;
  vertical-align: 0.2em;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--gold);
}
.amtsblatt-kurz { list-style: none; margin: 0; padding: 0; }
.amtsblatt-kurz li { padding: 0.65rem 0; border-top: 1px solid var(--linie-fein); }
.amtsblatt-kurz li:first-child { border-top: 0; padding-top: 0; }
.amtsblatt-kurz a { font-weight: 500; text-decoration: none; color: var(--tinte); }
.amtsblatt-kurz a:hover { color: var(--baden); }
.amtsblatt-kurz p { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--tinte-leise); }

/* --- Anliegen: Chatverlauf ------------------------------------------------ */

.gespraech { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.4rem; align-items: start; }
.gespraech__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1rem; }
.verlauf {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.1rem;
  background: rgba(252, 251, 248, 0.6);
  border: var(--rand);
  min-height: 12rem;
}
.nachricht {
  position: relative;
  max-width: min(38rem, 86%);
  align-self: flex-start;
  padding: 0.6rem 0.9rem 0.55rem;
  border: 1px solid var(--linie);
  border-radius: 12px 12px 12px 4px;
  background: var(--karte);
  animation: nachricht-auf 180ms ease both;
}
.nachricht--eigen {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: var(--gold-zart);
  border-color: rgba(184, 134, 13, 0.4);
}
.nachricht--team:not(.nachricht--eigen) { border-left: 3px solid var(--gold); }
.nachricht--intern {
  background: repeating-linear-gradient(135deg, #F4F1E8 0 9px, #EEEADF 9px 18px);
  border-style: dashed;
  border-color: rgba(20, 24, 27, 0.3);
}
.nachricht--system {
  align-self: center;
  max-width: 90%;
  padding: 0.15rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--plan-tief);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--tinte-leise);
  text-align: center;
}
.nachricht__kopf { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.25rem; font-size: 0.78rem; color: var(--tinte-leise); }
.nachricht__wer { font-weight: 500; color: var(--tinte); }
.nachricht__text { overflow-wrap: anywhere; }
.nachricht__text p { margin: 0 0 0.45rem; }
.nachricht__text p:last-child { margin-bottom: 0; }
.nachricht__zeit { display: block; margin-top: 0.2rem; text-align: right; font-family: var(--mono); font-size: 0.68rem; color: var(--tinte-zart); }
.nachricht__bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.4rem; margin-top: 0.45rem; }
.nachricht__bilder a { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); background: var(--plan); }
.nachricht__bilder img { display: block; width: 100%; height: 8rem; object-fit: cover; }
.nachricht__marke {
  display: inline-block; padding: 0 0.35rem; border-radius: 3px;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--tinte); color: #fff;
}
.nachricht__marke--team { background: var(--gold); }
@keyframes nachricht-auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.schreibfeld {
  position: sticky;
  bottom: 0;
  margin-top: 0.9rem;
  padding: 0.8rem;
  background: var(--karte);
  border: var(--rand);
  border-top: 3px solid var(--baden);
  box-shadow: 0 -8px 18px -14px rgba(20, 24, 27, 0.3);
}
.schreibfeld textarea {
  width: 100%; min-height: 4.6rem; max-height: 16rem; resize: vertical;
  padding: 0.6rem 0.75rem; font: inherit; line-height: 1.45;
  background: var(--plan); border: 1px solid var(--tinte); border-radius: 0;
}
.schreibfeld textarea:focus { outline: 2px solid var(--baden); outline-offset: 1px; background: #fff; }
.schreibfeld__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.55rem; }
.schreibfeld__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.schreibfeld--intern { border-top-color: var(--tinte); background: #F6F3EC; }
.datei-knopf { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; color: var(--tinte); font-size: 0.86rem; }
.datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.datei-knopf:focus-within { outline: 2px solid var(--baden); outline-offset: 2px; }
.vorschau { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.vorschau img { width: 4.2rem; height: 4.2rem; object-fit: cover; border: 1px solid var(--linie); border-radius: 4px; }
.schalter { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.86rem; }
.schalter input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--tinte); }
.tastenhinweis { font-family: var(--mono); font-size: 0.7rem; color: var(--tinte-zart); }

.akte { position: sticky; top: 4.5rem; }
.akte .fakten dd { font-size: 0.95rem; }

/* --- Grundbuch ------------------------------------------------------------ */

.flurstueck {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  background: var(--karte);
  border: var(--rand);
}
.flurstueck + .flurstueck { margin-top: 0.8rem; }
.flurstueck__plan {
  position: relative;
  aspect-ratio: 1;
  background:
    linear-gradient(rgba(184, 134, 13, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 134, 13, 0.25) 1px, transparent 1px);
  background-size: 13px 13px;
  background-color: #F7F2E4;
  border: 1px solid rgba(184, 134, 13, 0.45);
  display: grid;
  place-items: center;
}
.flurstueck__flaeche {
  border: 2px solid var(--baden);
  background: rgba(169, 18, 29, 0.12);
  min-width: 10%;
  min-height: 10%;
}
.flurstueck__titel { margin: 0 0 0.25rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.flurstueck__zeile { margin: 0.15rem 0; font-size: 0.88rem; color: var(--tinte-leise); }

/* --- Einwohnerverzeichnis ------------------------------------------------- */

.verzeichnis { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.einwohner {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  background: var(--karte);
  border: var(--rand);
}
.einwohner__name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.einwohner__unter { margin: 0.1rem 0 0; font-family: var(--mono); font-size: 0.74rem; color: var(--tinte-leise); }
.einwohner--ich { border-color: rgba(184, 134, 13, 0.6); background: var(--gold-zart); }

.online-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem; }
.online-liste li { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem; background: var(--karte); border: var(--rand); }

.statusschild {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  background: var(--karte);
  border: var(--rand);
  border-left: 5px solid var(--tinte-zart);
}
.statusschild--online { border-left-color: var(--gruen); }
.statusschild__punkt { width: 1rem; height: 1rem; border-radius: 50%; background: var(--tinte-zart); flex: none; }
.statusschild--online .statusschild__punkt { background: var(--gruen); box-shadow: 0 0 0 5px rgba(46, 125, 79, 0.16); }
.statusschild__titel { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.statusschild__unter { margin: 0.2rem 0 0; color: var(--tinte-leise); font-size: 0.9rem; }

.adresse {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.4rem 0.4rem 0.4rem 0.75rem;
  border: 1px dashed var(--tinte);
  background: var(--karte);
  font-family: var(--mono);
}

/* --- Code-Anzeige --------------------------------------------------------- */

.code-anzeige {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 2px dashed var(--baden);
  background: #fff;
  font-family: var(--mono);
  font-size: 2.2rem;
  letter-spacing: 0.25em;
  font-weight: 500;
}

/* --- Akte (Prüfungsversuche) ---------------------------------------------- */

.versuch { margin-top: 1rem; }
.versuch > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.8rem 1rem;
  background: var(--karte);
  border: var(--rand);
  list-style: none;
}
.versuch > summary::-webkit-details-marker { display: none; }
.versuch[open] > summary { border-bottom-color: transparent; }
.versuch__inhalt { border: var(--rand); border-top: 0; background: var(--karte); padding: 0 1rem 1rem; }
.antwortzeile { padding: 0.7rem 0; border-top: 1px solid var(--linie-fein); font-size: 0.9rem; }
.antwortzeile__frage { margin: 0 0 0.25rem; font-weight: 500; }
.antwortzeile__falsch { color: var(--baden); }
.antwortzeile__richtig { color: var(--gruen); }

/* --- Seitenkopf in Portal-Seiten ------------------------------------------ */

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.seitenkopf .titel { margin-bottom: 0.2rem; }
.seitenkopf p { margin: 0; color: var(--tinte-leise); max-width: 40rem; }
.reiter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.reiter a {
  padding: 0.35rem 0.75rem; border: var(--rand); background: var(--karte); text-decoration: none;
  color: var(--tinte); font-size: 0.88rem;
}
.reiter a[aria-current="page"] { border-color: var(--tinte); background: var(--tinte); color: #fff; }

/* --- Schmale Schirme ------------------------------------------------------ */

@media (max-width: 1100px) {
  .uebersicht-kopf { grid-template-columns: 1fr; }
  .gespraech { grid-template-columns: 1fr; }
  .akte { position: static; }
}

@media (max-width: 980px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { display: none; }
  .oberleiste__mobil { display: flex; align-items: center; gap: 0.7rem; }
  .oberleiste__pfad { display: none; }
  .menue { display: block; position: relative; }
  .menue[open] > .leiste {
    display: flex;
    position: fixed;
    inset: 3.6rem 0 0 0;
    height: auto;
    z-index: 30;
    width: 100%;
    box-shadow: 0 18px 30px -10px rgba(20, 24, 27, 0.35);
  }
  .raster--haupt, .raster--3 { grid-template-columns: 1fr; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auftakt { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .raster--2 { grid-template-columns: 1fr; }
  .fakten { grid-template-columns: 1fr; }
  .ausweis { grid-template-columns: 1fr; padding: 1rem 1rem 0; }
  .ausweis__bild { flex-direction: row; align-items: center; margin-bottom: 0.9rem; }
  .ausweis__mrz { margin: 0.9rem -1rem 0; padding-left: 1rem; font-size: 0.7rem; letter-spacing: 0.12em; }
  .flurstueck { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .nachricht { max-width: 94%; }
  .kopf-oeffentlich__links .knopf--leise-mobil { display: none; }
  .tabelle th, .tabelle td { padding: 0.55rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .leiste, .oberleiste, .schreibfeld, .fuss { display: none !important; }
  .rahmen { display: block; }
  body { background: #fff; }
}
@media (pointer: coarse) { .tastenhinweis { display: none; } }

/* --- Nachträge ------------------------------------------------------------ */

/* Steht am Ende, damit es Abstände einzelner Bausteine (z. B. .fakten) schlägt. */
.abstand-oben { margin-top: 1.6rem; }
.zelle-person + .fakten { margin-top: 1rem; }
/* Aktueller Status in der Verwaltung: gefüllt statt ausgegraut. */
.knopf[aria-pressed="true"], .knopf[aria-pressed="true"]:disabled {
  opacity: 1; background: var(--tinte); border-color: var(--tinte); color: #fff;
}
@media (max-width: 640px) {
  .schreibfeld { padding: 0.6rem; }
  .schreibfeld textarea { min-height: 2.9rem; }
  .schreibfeld__leiste { flex-wrap: nowrap; margin-top: 0.4rem; }
  .schreibfeld__links { min-width: 0; gap: 0.3rem 0.8rem; }
  .tastenhinweis { display: none; }
}
/* Ungerade Anzahl in einer zweispaltigen Faktenliste: letzte Zeile über die volle Breite. */
.fakten:not(.fakten--eins) > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.feld label.datei-knopf { display: inline-flex; margin: 0.15rem 0 0; font-weight: 500; }
@media (max-width: 520px) {
  /* Kopfzeile ohne Konto: Wappen, Name und Knöpfe passen sonst nicht nebeneinander.
     Den Serverstatus zeigt die Startseite ohnehin als eigene Karte. */
  .kopf-oeffentlich { gap: 0.6rem; }
  .kopf-oeffentlich .marke__unter, .kopf-oeffentlich .status { display: none; }
  .kopf-oeffentlich .knopf { white-space: nowrap; }
}
@media (max-width: 640px) {
  .schreibfeld .schalter .leise { display: none; }
}