/* Page Base */

/* Fredoka wird selbst gehostet (public/fonts/) statt von Google geladen.
   Grund: Beim Laden von fonts.googleapis.com geht die IP jedes Besuchers an
   Google — bei einer Seite für Kinder ein Thema, das man sich spart. Nebenbei
   lädt die Seite schneller: Ein @import muss erst geparst werden, bevor der
   Browser überhaupt merkt, dass er noch etwas holen soll.

   Es ist eine VARIABLE Font: EINE Datei deckt alle Schnitte ab, deshalb
   font-weight als BEREICH (300 700) statt drei einzelner @font-face-Blöcke.
   font-stretch deckt die zweite Achse (wdth) ab.
   font-display: swap -> Text ist sofort lesbar (erst in der Systemschrift),
   statt beim Laden unsichtbar zu bleiben.
   Pfad ist relativ zu DIESER Datei (public/style.css). */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* Monospace für die Befehle (.command-text). */
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   THEMES  ·  ALLE Farb-Tokens an EINER Stelle
   ---------------------------------------------------------------------
   Drei Blöcke:
     1) :root                         nur Werte, die in BEIDEN Themes
                                      gleich sind
     2) html:not([data-theme="dark"]) LIGHT
     3) html[data-theme="dark"]       DARK

   Block 2 und 3 haben dieselben Tokens in derselben Reihenfolge und
   denselben Gruppen — man kann sie Zeile für Zeile nebeneinander lesen.
   Was in einem Block steht, MUSS im anderen auch stehen.

   Warum nicht :root für Light? theme.js ENTFERNT das Attribut für Light
   und setzt es nur für Dark. Beide Theme-Selektoren haben dieselbe
   Spezifität (0,1,1) und schließen sich gegenseitig aus — die Reihenfolge
   ist also egal und ein Vergessen fällt sofort auf, statt still vom
   :root geerbt zu werden. Genau diese Falle gab es vorher.

   Verstreute "html[data-theme=dark] .foo"-Regeln bleiben bewusst bei
   ihren Light-Gegenstücken — dort entscheidet die Reihenfolge sehr wohl.
   ===================================================================== */

/* --- 1) Konstant: in beiden Themes identisch ------------------------- */
:root {
  --glass-blur: 10px;
  --background-clr-1: #8a2be2;
  --background-clr-2: #9370db;
  --background-clr-3: #6a1b9a;
  --background-clr-4: #20b2aa;
  --button-type-2: linear-gradient(180deg, #c71585 0%, #a2106b 100%);
  --danger-text: #ffffff;
}

/* --- 2) LIGHT ----------------------------------------------- */
html:not([data-theme="dark"]) {
  /* Flächen & Glas */
  --nav-bg: rgba(60, 66, 76, 0.06);
  --nav-bg-2: rgba(60, 66, 76, 0.09);
  --nav-bg-hover: rgba(60, 66, 76, 0.1);
  --nav-border: rgba(60, 66, 76, 0.18);

  /* Schrift (3 Stufen) */
  --text: #454b54;
  --text-2: #5f666f;
  --text-muted: rgba(69, 75, 84, 0.6);

  /* Akzentfarben */
  --accent: #1a8f38;
  --accent-dark: #14702c;
  --cta-warm: #b4560a;
  --cta-accent: #9a6a05;
  --link-color: #0d7a74;
  --ok-green: #16a34a;

  /* Buttons */
  --button-type-3: linear-gradient(135deg, #14847e 0%, #0e6b66 100%);

  /* Eingabefelder */
  --input-bg: rgba(255, 255, 255, 0.85);
  --option-bg: #ffffff;
  --toggle-off: #c2c7d0;

  /* Status-Farben */
  --success-bg: #e7f6ec;
  --success-text: #1e4620;
  --success-border: #b7dfc2;
  --danger: #c8362b;

  /* Schatten */
  --box-shadow: 0 8px 30px rgba(20, 45, 70, 0.16);

  /* Seitenhintergrund */
  --bg-color: #fbfdfe;
  --bg-color: oklch(99% 0.005 220);
  --bg-image: none;
}

/* --- 3) DARK ------------------------------------------------ */
html[data-theme="dark"] {
  /* Flächen & Glas */
  --nav-bg: rgba(255, 255, 255, 0.06);
  --nav-bg-2: rgba(0, 0, 0, 0.18);
  --nav-bg-hover: rgba(255, 255, 255, 0.12);
  --nav-border: rgba(255, 255, 255, 0.22);

  /* Schrift (3 Stufen) */
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.55);

  /* Akzentfarben */
  --accent: #4aa3df;
  --accent-dark: #3b82c4;
  --cta-warm: #ffb84d;
  --cta-accent: #fde047;
  --link-color: #6cb6e0;
  --ok-green: #34d27a;

  /* Buttons */
  --button-type-3: linear-gradient(135deg, #3b82c4 0%, #2c6aa0 100%);

  /* Eingabefelder */
  --input-bg: rgba(0, 0, 0, 0.22);
  --option-bg: #17202c;
  --toggle-off: #4b5563;

  /* Status-Farben */
  --success-bg: rgba(63, 181, 107, 0.14);
  --success-text: #9fe6bb;
  --success-border: rgba(63, 181, 107, 0.35);
  --danger: #e0483d;

  /* Schatten */
  --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);

  /* Seitenhintergrund */
  --bg-color: #0f1018;
  --bg-image:
    radial-gradient(at 0% 0%, hsla(255, 30%, 15%, 1) 0, transparent 55%),
    radial-gradient(at 100% 0%, hsla(210, 30%, 16%, 1) 0, transparent 55%),
    radial-gradient(at 50% 100%, hsla(185, 28%, 13%, 1) 0, transparent 60%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 300px;
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
  font-family:
    "Fredoka",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1rem;
  color: var(--text);
  background-color: var(--bg-color);
  background-image: var(--bg-image);
  background-size: cover;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.02rem;
}

body.menu-is-open {
  overflow: hidden;
  touch-action: none;
}

button,
input,
select,
textarea {
  font-family:
    "Fredoka",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/*
video,
img {
  border-radius: 0.5rem;
}
*/

svg {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
  position: relative;
  stroke-width: 1.2;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: currentColor;
  shape-rendering: geometricPrecision;
  overflow: visible !important;
}

.icon-fill {
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
}

.icon-navbar {
  width: 2rem;
  height: 2rem;
}

main {
  padding: 1rem;
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Auf die Tokens zeigen statt fester Farben: #fde047 und #ffb84d sind für
   weiße Schrift auf dunklem Grund gemacht und auf hellem Grund kaum lesbar. */
.c-accent {
  color: var(--cta-accent) !important;
}

.c-warm {
  color: var(--cta-warm) !important;
}

.c-link {
  color: var(--link-color) !important;
}

html a {
  color: var(--link-color);
}

.gl-bg {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
}

/* Felder, an denen im HTML "gl-bg" steht (z.B. .description-input,
   .message-input): gl-bg setzt die KARTEN-Fläche (--nav-bg). Ein Feld, in das
   man tippt, muss sich aber von seiner Karte abheben — sonst verschwindet es
   darin. Deshalb hier auf --input-bg zurückgeholt.
   Das !important ist nötig, weil .gl-bg selbst !important benutzt; ohne
   Umbau des HTML geht es nicht anders. */
input.gl-bg,
textarea.gl-bg,
select.gl-bg {
  background: var(--input-bg) !important;
}

.gl-bg-2 {
  background: var(--nav-bg-2) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
}

.select-none {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tap-highlight-none {
  -webkit-tap-highlight-color: transparent;
}

.pointer {
  cursor: pointer;
}

.br {
  border: 1px solid var(--nav-border);
}

.bx-sh {
  box-shadow: var(--box-shadow);
}

.br-1 {
  border-radius: 1rem;
}

.br-05 {
  border-radius: 0.5rem;
}

.br {
  border: 1px solid var(--nav-border);
}

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.tx-cr {
  text-align: center;
}

.ai-cr {
  align-items: center;
}

.jc-cr {
  justify-content: center;
}

.wf {
  width: 100%;
}

.mw-80 {
  max-width: 80rem;
}

.mg-0 {
  margin: 0;
}

.mg-top-1 {
  margin-top: 1rem;
}

.mg-top-5 {
  margin-top: 5rem;
}

.font-s-1 {
  font-size: 1rem;
}

.font-s-12 {
  font-size: 1.2rem;
}

.font-s-14 {
  font-size: 1.4rem;
}

.font-s-15 {
  font-size: 1.5rem;
}

.font-s-16 {
  font-size: 1.6rem;
}

.font-s-18 {
  font-size: 1.8rem;
}

.font-s-20 {
  font-size: 2rem;
}

.font-s-22 {
  font-size: 2.2rem;
}

.tx-d-none {
  text-decoration: none;
}

.btn-a-style-1 {
  background: linear-gradient(180deg, #c71585, #a2106b);
  box-shadow: 0 8px 22px rgba(199, 21, 133, 0.22);
  color: #fff;
}

.btn-a-style-2 {
  background: linear-gradient(135deg, #176e60, #098b6f);
  box-shadow: 0 8px 22px rgba(27, 88, 78, 0.22);
  color: #fff;
}

.btn-a-style-3 {
  background: linear-gradient(135deg, #197571 0%, #1a9a92 100%);
  box-shadow: 0 8px 22px rgba(27, 88, 78, 0.22);
  color: #fff;
}

.btn-a-stlye-1-hov {
  transform: scale(1.01);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
}

.padding-05 {
  padding: 0.5rem;
}

.padding-1 {
  padding: 1rem;
}

.padding-1-2 {
  padding: 1rem 2rem;
}

.font-w-400 {
  font-weight: 400;
}

.font-w-500 {
  font-weight: 500;
}

.font-w-600 {
  font-weight: 600;
}

.font-w-700 {
  font-weight: 700;
}

.gap-05 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-15 {
  gap: 1.5rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.gap-4 {
  gap: 4rem;
}

.gap-5 {
  gap: 5rem;
}

.cw {
  color: #fff;
}

/* -- SNOWFLAKES -- */

.effect-toggle-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.effect-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.snow-icon {
  width: 35px;
  height: 35px;
  stroke: white;
  top: 1px;
}

/* --- Popup-style-1 --- */

.dialog-popup-style-1 {
  position: fixed;
  max-width: 32rem;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overscroll-behavior: contain;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.2, 0, 0.3, 1),
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

.dialog-popup-style-1[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .dialog-popup-style-1[open] {
    opacity: 0;
    transform: scale(0.8);
  }
}

.popup-close-div {
  justify-content: space-between;
  margin-bottom: 1rem;
}

.close-popup-btn {
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}

.placeholder-close {
  width: 2rem;
  height: 2rem;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* --- Footer --- */

/* Dezent abgesetzte Fläche über die Tokens, in beiden Themes stimmig.
   Der Rand oben trennt vom Inhalt, ohne einen Farbblock zu setzen.
   (Vorgänger-Style: components-reference.css) */
footer {
  position: relative;
  width: calc(100% - 1rem);
  bottom: 0;
  z-index: 2;
  margin: 4rem 0.5rem 0.5rem 0.5rem;
  padding: 2.5rem 2rem 2rem 2rem;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 1rem;
  color: var(--text);
}

.footer-content {
  max-width: 46rem;
}

.footer-content p {
  color: var(--text-2);
  margin: 0.35rem 0;
}

.links-footer {
  gap: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nav-border);
  width: 100%;
  max-width: 46rem;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Die Footer-Links: eigene Farbe, damit sie sich vom Fließtext abheben. */
.links-a {
  color: var(--link-color);
  font-weight: 600;
}

.footer-about-us,
.partner-website {
  color: var(--link-color);
  font-weight: 600;
}

/* Leiseste Textstufe — kippt mit dem Theme. */
.end {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
}

/* -- BREADCRUMB -- */

.breadcrumb {
  display: flex;
  align-items: center;
  margin: 0 0 1rem 0;
  width: 100%;
  max-width: 80rem;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  list-style: none;
  flex-direction: row;
  gap: 1rem;
  padding: 0;
}

.breadcrumb a {
  color: #bebebe;
  text-decoration: none;
}

/* === HOME.HTML === */

/* --- Minecraft-Banner (Startseite) ---
   Liegt hinter Navbar und Hero und blendet nach unten in den Seiten-
   hintergrund aus, sodass es keine sichtbare Kante gibt.

   Technik: position:absolute OHNE positionierten Vorfahren -> das Element
   hängt am Seitenanfang (nicht am Viewport-Rand), scrollt also mit weg.
   z-index:-1 schiebt es hinter allen Inhalt, aber noch VOR den
   Seitenhintergrund (der von body auf die Canvas durchgereicht wird).

   Das Ausblenden macht mask-image: Der Verlauf bestimmt die Sichtbarkeit —
   oben deckend, unten komplett transparent. Anders als ein aufgelegter
   Farbverlauf funktioniert das unabhängig von der Hintergrundfarbe und
   passt deshalb in Light UND Dark Mode.
   -webkit-mask-image zusätzlich für Safari/ältere WebKits. */
.home-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 88vh;
  min-height: 460px;

  z-index: -1;
  pointer-events: none;

  /* background-image und background-position stehen NICHT hier, sondern kommen
     inline aus public/index.php (homeBanner()) — beides ist im Dashboard
     einstellbar, und zwei Quellen für denselben Wert gehen erfahrungsgemäß
     irgendwann auseinander. Der Standard (imgs/lobby.png, Ausschnitt 25%)
     steckt in den Konstanten in include/functions.php.

     Zur Position: Bei "cover" wird das Bild auf die Breite skaliert, senkrecht
     bleibt ein Überhang. Ein extremer Wert (z.B. 96%) zeigt nur einen schmalen
     Streifen ganz unten und wirkt wie stark hineingezoomt; 25% zeigt die Szene
     als Ganzes. Genau diese Abwägung macht jetzt der Regler im Dashboard. */
  background-size: cover;

  /* Volle Deckkraft: Die Schrift daneben ist dunkel, der helle Himmel ist
     deshalb kein Kontrastproblem und muss nicht ausgebleicht werden. */
  opacity: 1;

  /* Ausblenden nach unten.

     Die vielen Stufen sind kein Zierrat, sondern eine nachgebaute Kurve —
     "smoothstep", die S-Kurve. Ein Verlauf aus wenigen Stufen mit geraden
     Strecken dazwischen trifft am Ende mit voller Steigung auf die Null und
     bricht dort ab. Genau so ein Knick ist es, den das Auge als LINIE sieht,
     obwohl der Verlauf rechnerisch stetig ist (Mach-Bande) — die Unterkante
     bleibt dann "trotz smoothness" sichtbar.

     Die Kurve hier ist alpha = 1 - (3t² - 2t³) über 40%..100%. Ihre Steigung
     geht an BEIDEN Enden gegen null: Sie löst sich oben aus dem vollen Bild
     heraus und läuft unten sanft in die Null aus, ohne Knick an beiden
     Stellen. Zwischenwerte interpoliert der Browser linear, deshalb die
     Stützstellen alle 6%.

     Was das NICHT behebt: Wie stark der Übergang auffällt, hängt auch davon
     ab, welcher Teil des Bildes unten landet — und das verschiebt sich mit
     der Fensterhöhe (der Banner ist 88vh, das Bild wird auf die BREITE
     skaliert). Auf kurzen Bildschirmen endet er im hellen Aufbau, auf hohen
     im dunklen Boden. Dagegen hilft der Ausschnitt-Regler im Dashboard. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0.972) 46%,
    rgba(0, 0, 0, 0.896) 52%,
    rgba(0, 0, 0, 0.784) 58%,
    rgba(0, 0, 0, 0.648) 64%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.352) 76%,
    rgba(0, 0, 0, 0.216) 82%,
    rgba(0, 0, 0, 0.104) 88%,
    rgba(0, 0, 0, 0.028) 94%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0.972) 46%,
    rgba(0, 0, 0, 0.896) 52%,
    rgba(0, 0, 0, 0.784) 58%,
    rgba(0, 0, 0, 0.648) 64%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.352) 76%,
    rgba(0, 0, 0, 0.216) 82%,
    rgba(0, 0, 0, 0.104) 88%,
    rgba(0, 0, 0, 0.028) 94%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Der Hero-Text liegt auf dem Banner-Bild: Der Banner ist 88vh hoch und bis
   40% seiner Höhe voll deckend, .home-title startet bei margin-top: 24vh —
   also mitten im Bild, dem unruhigsten Untergrund der Seite.

   Lesbar wird der Text nicht über einen Schatten oder eine Fläche unter ihm:
   Auf einem Foto wechselt der Untergrund alle paar Pixel zwischen hell und
   dunkel, dagegen hilft kein Schatten, und eine Fläche darunter legt sich wie
   ein Pflaster über das Bild. Beides behandelt nur das Symptom; die
   verworfenen Varianten stehen in components-reference.css.

   Stattdessen trägt der Akzentbalken links (border-left) die Lesbarkeit: Er
   gibt dem Auge eine klare Kante zum Andocken und übernimmt das Hervorheben —
   ohne Karte, Fleck oder Schatten, und das Bild bleibt unangetastet. */
.home-title {
  /* Volle Breite nötig: main zentriert seine Kinder (align-items: center).
     Ohne width:100% würde der Block auf Textbreite schrumpfen und mittig
     landen. 90rem = dieselbe Breite wie die Karten darunter, dadurch sitzt
     der Akzentbalken exakt auf deren linker Kante. */
  width: 100%;
  max-width: 90rem;
  text-align: left;
  padding-left: 1.5rem;
  border-left: 5px solid var(--accent);
  /* Muss hier stehen: Am Block im HTML hängen keine Flex-Utility-Klassen;
     ohne diese Regel laufen Badges und Button ineinander. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  /* Setzt den Text in den oberen Bereich des 88vh-Banners (dort ist das Bild
     noch voll deckend). Getragen wird er vom Akzentbalken, siehe oben. */
  margin-top: 24vh !important;
}

/* Der Text selbst bleibt schmal — über 90rem laufende Zeilen liest niemand. */
.home-title h1,
.home-title h2,
.home-title .home-badges {
  max-width: 46rem;
}

.home-title h1 {
  margin-top: 0.4rem !important;
}

/* Die zwei Merkmale als Pillen in der Einleitung. */
.home-badges {
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.home-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
}

@media (max-width: 700px) {
  .home-title {
    margin-top: 20vh !important;
  }
}

/* Der Markenname muss größer sein als der Untertitel darunter, sonst
   verliert er sich auf dem Bild. */
.home-title h2 {
  font-size: 3.4rem !important;
  line-height: 1.1;
}

.home-title h1 {
  font-size: 1.6rem;
  max-width: 42ch;
}

@media (max-width: 700px) {
  .home-title h2 {
    font-size: 2.4rem !important;
  }
  .home-title h1 {
    font-size: 1.2rem;
  }
}

/* Im Dark Mode gedämpft: Dort ist der Hintergrund fast schwarz und die Schrift
   weiß — ein hell strahlender Tageshimmel wäre daneben ein Fremdkörper und
   würde die weiße Schrift schlucken. Im Light Mode darf das Bild dagegen voll
   stehen (siehe opacity: 1 oben). */
html[data-theme="dark"] .home-banner {
  opacity: 0.4;
}

/* --- Startseiten-Karten: Emojis, Haken, Pfeile ------------------------- */

/* Überschrift + Icon-Box nebeneinander, vertikal auf einer Mittellinie.
   flex mit align-items: center macht das zuverlässig und unabhängig von der
   Schriftgröße — vertical-align hängt das Icon schief unter die Zeile. */
.about-us h2,
.rules h2,
.projects h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1;
  /* Die Schriftgröße steht bewusst weiter unten (~Zeile 1160) — dort liegt
     eine gleichrangige Regel, die eine hier gesetzte Größe überschreiben
     würde. */
}

/* Die Box um das Icon. Der Verlauf kommt je Karte aus --karten-clr-1/-2
   (unten gesetzt), das Icon selbst ist weiß — genauer: in der Hintergrund-
   farbe der Seite, damit es sich in beide Themes einfügt. */
/* Box exakt so hoch wie die Überschrift daneben (1em der h2-Schriftgröße) —
   dadurch stehen Box und Text auf derselben Höhe und die Zeile wirkt ruhig.
   In em, nicht in rem: sonst hängt die Höhe nicht an der Schrift daneben. */
.karten-icon-box {
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  border-radius: 0.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    var(--karten-clr-1) 0%,
    var(--karten-clr-2) 100%
  );
  box-shadow: 0 3px 10px
    color-mix(in srgb, var(--karten-clr-2) 40%, transparent);
}

/* --- Info-Box ---------------------------------------------------------
   Für Hinweise, die keine Fehler sind: Eine getönte Fläche mit Icon liest
   sich als "Hinweis" — ein oranger Satz dagegen wie eine Warnung. */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  margin: 0.75rem 0 1.25rem 0;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--link-color) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--link-color) 30%, transparent);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

.info-box-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  fill: var(--link-color);
  stroke: none;
}

.info-box a {
  color: var(--link-color);
  font-weight: 600;
}

/* --- Spenden-Button ---------------------------------------------------
   Bewusst NICHT im Türkis der übrigen Buttons: Spenden ist keine Pflicht-
   aktion wie "Anmelden", sondern eine freiwillige, emotionale. Ein warmes
   Rosé hebt ihn von den funktionalen Buttons ab, ohne zu schreien.
   Das Herz schlägt beim Hover einmal kurz — ein kleines Dankeschön-Signal. */
.spenden-btn {
  gap: 0.6rem;
  color: #fff !important;
  background: linear-gradient(180deg, #f2607f 0%, #d92e63 100%) !important;
  box-shadow: 0 6px 20px rgba(217, 46, 99, 0.3);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.spenden-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(217, 46, 99, 0.42);
}

.spenden-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: #fff;
  stroke: none;
}

.spenden-btn:hover .spenden-icon {
  animation: herzschlag 700ms ease;
}

@keyframes herzschlag {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.18);
  }
}

/* Wer "weniger Bewegung" eingestellt hat, bekommt keinen Herzschlag. */
@media (prefers-reduced-motion: reduce) {
  .spenden-btn:hover .spenden-icon {
    animation: none;
  }
  .spenden-btn:hover {
    transform: none;
  }
}

.karten-icon {
  width: 1.05em;
  height: 1.05em;
  fill: var(--bg-color);
  /* stroke: none ist entscheidend. Die globale svg-Regel setzt
     "stroke: currentColor" — bei Outline-Icons (Schild, Werkzeug) legt das
     eine Kontur in der Überschriftfarbe um die weiße Füllung, und bei dieser
     Größe dominiert die Kontur: Das Icon sah dann farbig statt weiß aus.
     Nur solide Icons (Personen) waren davon nicht betroffen. */
  stroke: none;
}

/* Regel-Liste: grüner Ring, weiß gefüllt, grüner Haken darin.
   Bewusst als SVG-Hintergrund statt als Text-Häkchen: Ein Häkchen als Zeichen
   sitzt je nach Schriftart unterschiedlich hoch und ließ sich im Kreis nicht
   sauber zentrieren. Das SVG hat feste Geometrie und sitzt immer mittig. */
.regel-liste {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.regel-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.regel-liste li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid var(--ok-green);
  /* Haken als Inline-SVG in der Akzentfarbe. %23 = # (in einer data-URL muss
     die Raute kodiert sein, sonst gilt der Rest als Fragment). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2316a34a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85rem 0.85rem;
}

/* Im Dark Mode: Ring und Haken heller, Füllung dunkel statt weiß. */
html[data-theme="dark"] .regel-liste li::before {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2334d27a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E");
}

/* "Alle Regeln" / "Mehr über uns": als Aktion markiert, nicht als Fließtext. */
.alle-regeln,
.more-about-us {
  color: var(--link-color);
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Der "hier entlang"-Pfeil. Rutscht beim Hover der Karte ein Stück nach
   rechts — kleiner Hinweis, dass es weitergeht. */
.pfeil {
  display: inline-block;
  font-size: 1.25em;
  line-height: 1;
  transition: transform 200ms ease;
}

.about-us:hover .pfeil,
.rules:hover .pfeil,
.projects-div a:hover .pfeil {
  transform: translateX(3px);
}

/* Die „›"-Glyphe sitzt in der Schrift optisch etwas tief; ein kleiner Versatz
   nach OBEN (negatives top) zentriert sie sauber zum Text. (position:relative,
   nicht transform — der Hover nutzt transform schon fürs Nach-rechts-Rutschen.) */
.more-about-us .pfeil,
.alle-regeln .pfeil {
  position: relative;
  top: -0.06em;
}

.proj-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Eine Farbe je Startseiten-Karte ----------------------------------
   Über uns = Lila, Regeln = Grün, Projekte = Blau.
   Je Karte zwei Töne: --karten-clr-1 (oben) und -2 (unten) speisen den
   Verlauf der Icon-Box; die Überschrift nimmt den dunkleren.
   Kontrast auf der hellen Karte jeweils über 4.9:1 geprüft. */
/* Der Verlauf läuft von HELL (oben) nach SATT (unten) — nicht von satt nach
   dunkel. Das lässt die Box leuchten statt sie zu beschweren.
   Der dunklere Ton (-2) ist jeweils so gewählt, dass das weiße Icon darauf
   über Kontrast 3 liegt (Mindestwert für Grafik). */
.about-us {
  /* Lila mit einem Zug ins Magenta (Farbton ~285 statt ~271) */
  --karten-clr-1: #c77bf7;
  --karten-clr-2: #9b30e0;
}
.rules {
  /* Helles Frischgrün -> sattes Grün */
  --karten-clr-1: #5ee08b;
  --karten-clr-2: #16a34a;
}
.projects {
  /* Freundliches Hellblau -> sattes Blau */
  --karten-clr-1: #6cb0fb;
  --karten-clr-2: #2f6fe4;
}

/* Die Überschriften bleiben dunkler als die Boxen: Sie sind Text auf weißer
   Karte und brauchen 4.5:1 — die hellen Box-Töne würden das reißen. */
.about-us h2 {
  color: #8b2ad4;
}
.rules h2 {
  color: #15803d;
}
.projects h2 {
  color: #2563eb;
}

.about-us .more-about-us {
  color: #8b2ad4;
}
.rules .alle-regeln {
  color: #15803d;
}

/* Projekt-Zeilen: blauer Rand links als Farbtupfer, Pfeil in Blau — ohne
   Farbe wirken die Zeilen wie deaktiviert. */
.projects-div a {
  border-left: 3px solid #2563eb !important;
}

.projects-div a .pfeil {
  color: #2563eb;
}

.projects-div a:hover {
  background: rgba(29, 78, 216, 0.08) !important;
}

/* Dark Mode: dieselben Farbfamilien, aber aufgehellt — die dunklen Töne oben
   sind auf fast schwarzem Grund nicht mehr lesbar. */
html[data-theme="dark"] .about-us h2,
html[data-theme="dark"] .about-us .more-about-us {
  color: #b18cf5;
}
html[data-theme="dark"] .rules h2,
html[data-theme="dark"] .rules .alle-regeln {
  color: #4dbf85;
}
html[data-theme="dark"] .projects h2 {
  color: #7aa7f7;
}
html[data-theme="dark"] .projects-div a {
  border-left-color: #7aa7f7 !important;
}
html[data-theme="dark"] .projects-div a .pfeil {
  color: #7aa7f7;
}
html[data-theme="dark"] .projects-div a:hover {
  background: rgba(122, 167, 247, 0.12) !important;
}

/* --- Home News section */

/* Der Ankündigungs-Balken liegt als einziges Element direkt auf dem Banner.
   Sein Glas-Hintergrund (gl-bg) ist für ruhigen Untergrund gerechnet und
   reicht vor einem Bild nicht — der Text verschwindet darin. Deshalb hier
   kräftigeres Milchglas. Betrifft nur die Startseite, den Balken gibt es
   nirgends sonst. */
.home-news-section {
  /* Gleiche Behandlung wie die Navbar direkt darüber: fast weiß, kein echtes
     Glas. Die beiden liegen übereinander — wenn eins Glas ist und das andere
     nicht, sieht es zusammengestückelt aus.
     !important nötig: Im HTML steht an diesem Balken die Klasse gl-bg, und die
     setzt ihren Hintergrund selbst mit !important. Ohne das hier wirkte die
     Regel gar nicht und der Balken blieb durchsichtig. */
  background: rgba(252, 253, 254, 0.94) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* Dark Mode: dort ist die Schrift weiß, also braucht der Balken einen dunklen
   statt eines milchig-weißen Untergrunds. */
html[data-theme="dark"] .home-news-section {
  background: rgba(16, 18, 26, 0.94) !important;
}

.home-news-section:hover {
  cursor: pointer;
}

.home-news-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 3px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 20%,
    rgba(178, 128, 255, 0.3) 55%,
    rgba(0, 255, 255, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  transition:
    filter 0.3s ease,
    box-shadow 0.3s ease;
}

.home-news-section:hover::before {
  filter: brightness(1.5) saturate(1.2);
  box-shadow: 0 0 15px rgba(191, 0, 255, 0.3);
  transition:
    filter 0.3s ease,
    box-shadow 0.3s ease;
}

.home-news-section a {
  text-decoration: none;
}

/* --- Formatierungs-Codes (&-Codes wie in Minecraft) ---

   Die Klassen setzt renderFormatCodes() (include/functions.php), wenn im
   Dashboard z.B. "&6&lGoldig" eingetippt wurde. Die Farbwerte sind die
   Minecraft-Standardpalette — "&6" soll hier schließlich so aussehen wie
   im Spiel.

   ACHTUNG: Der Block steht nochmal in admin-dashboard/admin-style.css, weil
   die Vorschau im Dashboard ihn braucht und die beiden Stylesheets sich
   nichts teilen. Änderst du hier eine Farbe, dort mit ändern. */
.mc-black {
  color: #000000;
}
.mc-dark-blue {
  color: #0000aa;
}
.mc-dark-green {
  color: #00aa00;
}
.mc-dark-aqua {
  color: #00aaaa;
}
.mc-dark-red {
  color: #aa0000;
}
.mc-dark-purple {
  color: #aa00aa;
}
.mc-gold {
  color: #ffaa00;
}
.mc-gray {
  color: #aaaaaa;
}
.mc-dark-gray {
  color: #555555;
}
.mc-blue {
  color: #5555ff;
}
.mc-green {
  color: #55ff55;
}
.mc-aqua {
  color: #55ffff;
}
.mc-red {
  color: #ff5555;
}
.mc-light-purple {
  color: #ff55ff;
}
.mc-yellow {
  color: #ffff55;
}
.mc-white {
  color: #ffffff;
}

.mc-bold {
  font-weight: 700;
}
.mc-italic {
  font-style: italic;
}
.mc-underline {
  text-decoration: underline;
}
.mc-strike {
  text-decoration: line-through;
}
/* Beides zusammen (&n&m): ohne diese Regel gewinnt schlicht die weiter
   unten stehende und eine der beiden Linien fehlt. */
.mc-underline.mc-strike {
  text-decoration: underline line-through;
}
/* &k sind im Spiel flimmernde Zufallszeichen. Das echt nachzubauen hieße,
   den Text per JS im Dauerlauf umzuschreiben — für einen Balken, der
   nebenbei gelesen wird, zu teuer. Unscharf trifft die Absicht ("hier
   steht was Verstecktes") und kostet nichts. */
.mc-obf {
  filter: blur(0.12em);
}

/* --- Home-Title --- */

.home-title a {
  max-width: 16rem;
  transition: box-shadow 200ms ease;
}

.home-title a:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

/* --- Über uns - Regeln - Projekte --- */

.abt-us-rules-top-div {
  max-width: 90rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 10rem;
  align-items: stretch;
  justify-items: center;
}

.about-us,
.rules,
.projects {
  text-align: left;
  min-height: 300px;
  font-size: 0.9rem;
  padding: 2rem;
  transition: all 300ms ease;
  width: 100%;
  max-width: 500px;
  text-decoration: none;
  color: var(--text);
}

.about-us:hover,
.rules:hover,
.projects:hover {
  background: var(--nav-bg-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42);
}

.more-about-us {
  transition: color 200ms ease;
  margin: 1rem 0 0 0;
  padding: 0;
}

.more-about-us:hover {
  color: var(--link-color);
}

.punkte {
  display: flex;
  gap: 30px;
  padding-top: 20px;
  align-items: center;
}

.grüner-punkt {
  width: 1rem;
  height: 1rem;
  background-color: #39d353;
  border-radius: 50%;
  display: inline-block;
}

.gelber-punkt {
  width: 1rem;
  height: 1rem;
  background-color: #ffb84d;
  border-radius: 50%;
  display: inline-block;
}

.t1-div,
.t2-div {
  gap: 0.3rem;
}

/* Die Icon-Box daneben trägt einen Teil der Wirkung, die Schrift muss nicht
   allein laut sein.
   Die Größe MUSS hier stehen, nicht im Layout-Block weiter oben (~Zeile 811):
   Beide Regeln haben dieselbe Spezifität, und die spätere gewinnt. */
.about-us h2,
.rules h2,
.projects h2 {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem 0;
}

.about-us p {
  font-size: 1.125rem;
  line-height: 1.1;
}

/* Die Liste trägt ihre Haken über .regel-liste li::before (weiter oben).
   Hier deshalb weder text-indent noch list-style-type: Ersteres zieht die
   erste Zeile nach links, der Haken landet dadurch IM Text statt davor;
   Letzteres stellt ein zweites Aufzählungszeichen neben den Haken.
   Ohne das hier greift .regel-liste nicht: ".rules ul" ist spezifischer
   (Klasse + Element) als ".regel-liste" (nur Klasse) und gewinnt. */
.rules ul {
  list-style: none;
  padding: 0;
  text-indent: 0;
}

.rules li {
  margin-bottom: 0.55rem;
  font-size: 1.05rem;
  line-height: 1.45;
  transition: color 200ms ease;
}

.rules li:hover {
  color: #c71585;
}

.projects {
  cursor: default;
  padding: 2rem 2rem 0 2rem !important;
}

.sub-title {
  position: absolute;
  top: -1.2rem;
  left: 1rem;
  font-size: 0.7rem;
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
}

.projects-div {
  margin-bottom: 2rem;
  margin-top: 2rem;
  flex: 1;
}

.projects-div a {
  text-decoration: none;
  color: var(--text);
  font-size: 1.1rem;
  padding: 0.9rem 1rem;
  /* Über die Tokens statt fester Weißtöne: Nur so sind die Links in beiden
     Themes als Zeilen erkennbar (weiß auf weiß wäre im Light Mode
     unsichtbar). */
  background: var(--nav-bg);
  width: 100%;
  /* Name links, Pfeil rechts — signalisiert "hier entlang". */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  border: 1px solid var(--nav-border);
  border-bottom: none;
  transition: all 300ms ease;
}

.projects-div a:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.projects-div a:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}

.projects-div a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* --- Warum Uns Wählen --- */

/* --- Entdecke den Server: Feature-Karten mit Screenshots --- */

.discover {
  margin-top: 10rem;
}

.discover-top {
  text-align: center;
  margin-bottom: 2rem;
}

.discover-top h2 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

.discover-top h3 {
  font-weight: 500;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  align-items: stretch;
}

/* Die Karte selbst hat kein Padding: Das Bild soll bis an die (runden) Ränder
   laufen. overflow:hidden schneidet Bild + Zoom-Effekt sauber auf die Radien. */
.discover-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.discover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.discover-media {
  position: relative;
  aspect-ratio: 16 / 12;
  overflow: hidden;
}

.discover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

/* Minimaler Glow: eine unscharfe, gespiegelte Kopie der unteren Bildkante
   scheint leicht ins Textfeld hinein – als würde das Bild nach unten leuchten.
   Das Motiv kommt per Inline-Variable --dc-img von der jeweiligen Karte. */
.discover-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3.5rem;
  transform: translateY(-45%) scaleY(-1);
  background-image: var(--dc-img);
  background-size: cover;
  background-position: bottom center;
  filter: blur(14px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.discover-card:hover .discover-media img {
  transform: scale(1.06);
}

/* Icon-Badge unten links auf dem Bild – wie kleine „Rubrik-Marke" der Karte. */
.discover-badge {
  position: absolute;
  z-index: 3;
  left: 0.9rem;
  /* Im Bild unten links – gleicher Abstand links wie nach unten zur Linie. */
  bottom: 0.9rem;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Farbiger Schatten passend zur Badge-Farbe (--badge-shadow je Farbklasse). */
  box-shadow: 0 6px 16px var(--badge-shadow, rgba(0, 0, 0, 0.4));
}

.discover-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: #fff;
}

.dc-spawn {
  background-color: #8b5cf6;
  --badge-shadow: rgba(139, 92, 246, 0.5);
}

.dc-plots {
  background-color: #228b22;
  --badge-shadow: rgba(34, 139, 34, 0.5);
}

.dc-shop {
  background-color: #ffb84d;
  --badge-shadow: rgba(255, 184, 77, 0.55);
}

.dc-events {
  background-color: #1e90ff;
  --badge-shadow: rgba(30, 144, 255, 0.5);
}

.discover-body {
  position: relative;
  padding: 1.1rem 1.2rem 1.4rem;
  text-align: left;
}

.discover-body h4 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.4rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.discover-body p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  opacity: 0.9;
}

.item1 {
  animation-delay: 0s;
}

.item2 {
  animation-delay: 0.3s;
}

.item3 {
  animation-delay: 0.6s;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* --- Server Section --- */

.server-section {
  margin-top: 10rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.server-info-top {
  text-align: center;
  margin-bottom: 2rem;
}

.server-info-top h2 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

.server-info-top h3 {
  font-weight: 500;
}

.server-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 900px;
  align-items: stretch;
  gap: 1rem;
}

/* Bewusst breiter als hoch: Bei vier Kacheln nebeneinander (je ~210px breit)
   wirkten sie mit gestapeltem Icon + 3 Textzeilen quadratisch bis hochkant.
   Kompaktere Zeilenhöhen und ein kleineres Icon drücken die Höhe unter die
   Breite, ohne dass Inhalt wegfällt. */
.server-info-box {
  height: 100%;
  padding: 0.85rem 0.6rem;
  gap: 0.15rem;
  transition: all 300ms ease;
}

.server-info-box h4 {
  margin: 0.1rem 0 0 0;
  line-height: 1.15;
}

.server-info-box p {
  margin: 0;
  line-height: 1.25;
}

.ip-card {
  background: linear-gradient(135deg, #3a9dbd 0%, #5a6eb1 100%);
  box-shadow: 0 0 15px rgba(58, 157, 189, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.version-card {
  background: linear-gradient(
    135deg,
    #f2c377 0%,
    #eda09a 35%,
    #e083b8 70%,
    #be7de5 100%
  );
  box-shadow: 0 0 15px rgba(216, 130, 133, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.players-card {
  background: linear-gradient(
    135deg,
    #44cdd4 0%,
    #8fcda8 35%,
    #c9c993 70%,
    #fbcf86 100%
  );
  box-shadow: 0 0 15px rgba(55, 188, 99, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.gamemode-card {
  background: linear-gradient(135deg, #d4b556 0%, #bd5b3e 100%);
  box-shadow: 0 0 15px rgba(216, 137, 114, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.server-info-box:hover {
  transform: translateY(-3px);
}

/* Klein gehalten: Das Icon ist der Haupttreiber für die Kachelhöhe. */
.server-info-box-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.server-info-box h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.server-info-box h4:hover {
  cursor: default;
}

.server-info-box p {
  font-size: 1rem;
}

/* IP-Karte: Port dichter unter die IP rücken (Karte weniger hochkant) */
.ip-card p {
  margin-bottom: 0;
}
.server-ip-port {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.server-info-box p:hover {
  cursor: default;
}

.server-section a {
  transition: all 180ms ease;
  margin-top: 2rem;
  cursor: pointer;
}

.server-section a:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(-3px);
  cursor: pointer;
}

.home-donation-wrapper h2 {
  margin: 0 0 1rem 0;
}

.home-donation-div {
  text-align: center;
}

.home-donation-div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 3px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 20%,
    rgba(178, 128, 255, 0.3) 55%,
    rgba(0, 255, 255, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* === ABOUT-US.HTML === */

.introduction-div img {
  max-width: 10rem;
  width: 100%;
  height: auto;
}

/* === DONATION.HTML === */

.donation-div-wrapper h3 {
  margin: 3rem 0 1rem 0;
}

.donation-button-div a {
  height: 100%;
  color: inherit;
  padding: 1rem 5rem;
}

.donation-button-div {
  white-space: nowrap;
}

/* NUR der Spenden-Button auf der Startseite. Bewusst über :has() an
   .spenden-btn gehängt statt an .donation-button-div: Dieselbe Klasse trägt
   auf der Spenden-SEITE die Ko-fi-/Patreon-/PayPal-Buttons — Änderungen an
   ihr treffen also beides. */
.donation-button-div:has(.spenden-btn) {
  width: fit-content;
  margin: 0.5rem auto 0 auto;
}

.donation-button-div:has(.spenden-btn) a {
  padding: 0.85rem 2rem;
}

.donation-icon-1 {
  width: 1.7rem;
  height: 1.5rem;
}

.donation-icon-2,
.donation-icon-3 {
  width: 1.5rem;
  height: 1.5rem;
}

.donation-div-1-text::before,
.donation-div-2-text::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 3px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 20%,
    rgba(178, 128, 255, 0.3) 55%,
    rgba(0, 255, 255, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.donation-button-div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  padding: 3px;
  background: linear-gradient(
    135deg,
    rgba(155, 114, 12, 0.9) 0%,
    rgba(191, 0, 255, 0.7) 30%,
    rgba(27, 151, 114, 0.418) 60%,
    rgba(138, 43, 226, 0.8) 85%,
    rgba(255, 245, 150, 0.6) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  transition:
    filter 0.3s ease,
    box-shadow 0.3s ease;
}

.donation-button-div:hover::before {
  filter: brightness(1.3) saturate(1.2);
  box-shadow: 0 0 15px rgba(191, 0, 255, 0.3);
  transition:
    filter 0.3s ease,
    box-shadow 0.3s ease;
}

/* === WIKI.HTML === */

.wiki-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.wiki-selector-link {
  min-height: 20rem;
  transition: all 300ms ease;
  font-size: 2.2rem;
  font-weight: 600;
  text-decoration: none;

  /* Light Mode: saubere weiße Karte mit runden Ecken, KEIN Blackstone-Rahmen.
     Der Rahmen (.mc-frame) ist im Dark Mode stimmig, auf der hellen Seite
     wirkte er wie ein Fremdkörper. Er wird unten per CSS abgeschaltet, statt
     die Klasse aus dem HTML zu nehmen — so bleibt er für Dark erhalten. */
  background: #ffffff !important;
  border: 1px solid var(--nav-border);
  border-radius: 1rem;
  gap: 0.15rem;
  min-height: 16.5rem;
  padding: 2rem !important;
}

/* Der Blackstone-Eckrahmen: im Light Mode aus, im Dark Mode an.
   Im Dark bleiben die Ecken eckig — der Rahmen ist quadratisch gezeichnet,
   runde Ecken würden ihn abschneiden. */
.wiki-selector-link.mc-frame::after {
  content: none;
}

html[data-theme="dark"] .wiki-selector-link {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
}

html[data-theme="dark"] .wiki-selector-link.mc-frame::after {
  content: "";
}

/* Titel: klein genug, damit Titel und Untertitel zusammen die Kachel tragen.
   Die Farbe kommt aus der wiki-c-…-Klasse weiter unten. */
.wiki-kachel-titel {
  font-size: 1.45rem;
  font-weight: 600;
  margin-top: 0.9rem;
}

/* Untertitel: die leiseste Stufe, damit der Titel die Kachel trägt. */
.wiki-kachel-text {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-2);
  text-align: center;
  max-width: 26ch;
  margin-top: 0.3rem;
}

/* Nur die Galerie-Kachel steht linksbündig — sie ist breiter und hat mehr
   Text, zentriert wirkte sie unruhig. Die sechs quadratischen Kacheln oben
   bleiben zentriert. */
.galerie-box-link {
  align-items: flex-start !important;
  text-align: left !important;
}

/* --- Eine Farbe je Kachel ---------------------------------------------
   Färbt Icon UND Titel. So sind die sechs Einstiege auf einen Blick
   auseinanderzuhalten, statt sechsmal dasselbe Orange.
   Alle Töne liegen auf weißer Karte bei Kontrast 5.2–6.0 (WCAG AA).
   Das !important beim Icon ist nötig, weil .wiki-icon den gemeinsamen
   SVG-Verlauf (fill: url(#iconGradient)) ebenfalls mit !important setzt. */
.wiki-c-rules .wiki-kachel-titel {
  color: #2563eb;
}
.wiki-c-rules .wiki-icon {
  fill: #2563eb !important;
}

.wiki-c-commands .wiki-kachel-titel {
  color: #7c3aed;
}
.wiki-c-commands .wiki-icon {
  fill: #7c3aed !important;
}

.wiki-c-server .wiki-kachel-titel {
  color: #0e7490;
}
.wiki-c-server .wiki-icon {
  fill: #0e7490 !important;
}

.wiki-c-instructions .wiki-kachel-titel {
  color: #c2410c;
}
.wiki-c-instructions .wiki-icon {
  fill: #c2410c !important;
}

.wiki-c-projects .wiki-kachel-titel {
  color: #047857;
}
.wiki-c-projects .wiki-icon {
  fill: #047857 !important;
}

.wiki-c-news .wiki-kachel-titel {
  color: #be185d;
}
.wiki-c-news .wiki-icon {
  fill: #be185d !important;
}

/* Dark Mode: dieselben Farben wären auf fast schwarzem Grund zu dunkel.
   Deshalb je Kachel die helle Variante desselben Farbtons. */
html[data-theme="dark"] .wiki-c-rules .wiki-kachel-titel {
  color: #7aa7f7;
}
html[data-theme="dark"] .wiki-c-rules .wiki-icon {
  fill: #7aa7f7 !important;
}
html[data-theme="dark"] .wiki-c-commands .wiki-kachel-titel {
  color: #b18cf5;
}
html[data-theme="dark"] .wiki-c-commands .wiki-icon {
  fill: #b18cf5 !important;
}
html[data-theme="dark"] .wiki-c-server .wiki-kachel-titel {
  color: #4fc3dd;
}
html[data-theme="dark"] .wiki-c-server .wiki-icon {
  fill: #4fc3dd !important;
}
html[data-theme="dark"] .wiki-c-instructions .wiki-kachel-titel {
  color: #f59b6b;
}
html[data-theme="dark"] .wiki-c-instructions .wiki-icon {
  fill: #f59b6b !important;
}
html[data-theme="dark"] .wiki-c-projects .wiki-kachel-titel {
  color: #4dbf95;
}
html[data-theme="dark"] .wiki-c-projects .wiki-icon {
  fill: #4dbf95 !important;
}
html[data-theme="dark"] .wiki-c-news .wiki-kachel-titel {
  color: #f278ac;
}
html[data-theme="dark"] .wiki-c-news .wiki-icon {
  fill: #f278ac !important;
}

/* =====================================================================
   .mc-frame — wiederverwendbarer Blackstone-Eckrahmen.
   Einfach die Klasse "mc-frame" an eine Box im HTML setzen. Der Rahmen
   liegt als SVG (public/imgs/tile-frame.svg) in den 4 Ecken; die Kanten
   dazwischen bleiben frei. Farbe/Blöcke → im SVG anpassbar.
   Hinweis: bei sehr kleinen Boxen ggf. border-Breite (40px) reduzieren.
   ===================================================================== */
.mc-frame {
  position: relative;
}
/* ::after, damit es sich mit Boxen verträgt, die schon ein ::before haben */
.mc-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 40px solid transparent;
  border-image: url("imgs/tile-frame.svg") 40 stretch;
}

/* Hover: in beiden Themes einen Schritt in Richtung "heller", ohne die
   Grundhelligkeit der Kachel umzuwerfen. */
.wiki-selector-link:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  transform: translateY(-3px);
}

html[data-theme="dark"] .wiki-selector-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.wiki-icon {
  fill: url(#iconGradient) !important;
  width: 5rem;
  height: 5rem;
  filter: drop-shadow(0 0 8px rgba(55, 80, 75, 0.3));
}

.wiki-server-infos {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  z-index: 1;
}

.wiki-server-infos-details {
  position: relative;
}

.wiki-server-infos-details::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 3px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 20%,
    rgba(178, 128, 255, 0.3) 55%,
    rgba(0, 255, 255, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.wiki-server-infos-galerie {
  position: relative;
  transition: all 300ms ease;
  cursor: pointer;
}

.wiki-server-infos-galerie::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 3px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 20%,
    rgba(178, 128, 255, 0.3) 55%,
    rgba(0, 255, 255, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.wiki-server-infos-galerie:hover {
  scale: 1.01;
  background: var(--nav-bg-hover) !important;
}

/* Galerie-Box: "Ansehen →"-Hinweis unter dem Text */
.galerie-box-link {
  gap: 0.5rem;
}
.galerie-box-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
}
.galerie-box-arrow {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transform: scaleX(-1);
  transition: transform 0.25s ease;
}
.wiki-server-infos-galerie:hover .galerie-box-arrow {
  transform: scaleX(-1) translateX(-3px);
}

.wiki-info {
  flex: 1;
}

.wiki-people-icon,
.wiki-tools-icon,
.wiki-gear-icon {
  width: 4rem;
  height: 4rem;
  stroke-width: 0.1;
  margin-right: 0.2rem;
}

.wiki-info-divider ul {
  padding: 0 0 0 0.5rem;
  list-style-type: none;
}

.wiki-info-divider > p {
  padding: 0 0 0 0.5rem;
}

/* === Rules.html === */

/* -- rules-div -- */

.rules-div ul {
  margin: 1rem 0 0 0;
}

.rules-div ul li {
  margin-bottom: 0.5rem;
}

.rules-div p {
  margin: 0;
  padding: 0;
}

.rules-div h2 {
  font-weight: 550;
}

/* -- Rules Grid Layout -- */

.rules-grid,
.consequences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

/* Das helle Pink #e7a6f1 mit lila Leuchten war für DUNKLEN Grund gemacht —
   auf der hellen Karte kam es auf Kontrast 1.71, also praktisch unsichtbar.
   #a21caf hält den Pink-Charakter und liegt bei 5.73. Das Leuchten fällt weg:
   Ein Schein um dunkle Schrift auf hellem Grund sieht nur schmutzig aus.
   Der Dark Mode behält beides unverändert (Regel direkt darunter). */
.rule h3,
.consequence h3 {
  font-weight: 550;
  color: #a21caf;
  margin: 0 0 1rem 0;
}

html[data-theme="dark"] .rule h3,
html[data-theme="dark"] .consequence h3 {
  color: #e7a6f1;
  text-shadow: 0 0 10px rgba(186, 104, 200, 0.6);
}

.rule-double-div {
  display: grid;
  gap: 1.5rem;
}

.consequence {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* === Projects.html === */

.project-div-wrapper {
  margin: 0 0 3rem 0;
}

.project-div-wrapper h2 {
  margin: 0 0 1rem 0;
}

.project-div-infos img {
  align-self: flex-start;
  width: 100%;
  max-width: 20rem;
  height: auto;
  border-radius: 0.5rem;
}

.project-div-infos-text-wrapper {
  justify-content: space-between;
}

.project-div-infos-subject {
  margin: 1rem 0 0 0;
  font-weight: 600;
  color: var(--link-color);
}

.project-div-infos-register-2 a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.6rem 1.6rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

/* Gemeinsame Basis: Verlaufs-Buttons wie der Rest der Seite (btn-a-style-*).
   Weicher Schatten + leichtes Anheben beim Hover – kein Neon-Glow. */
.project-div-infos-register-2-button-1,
.project-div-infos-register-2-button-2 {
  cursor: pointer;
  min-width: 11rem;
  text-align: center;
  border: none;
  border-radius: 0.7rem;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.project-div-infos-register-2-button-1:hover,
.project-div-infos-register-2-button-2:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Anmelden = HAUPT-Aktion: gefüllt, in derselben Farbe wie "Server beitreten"
   (--button-type-3). */
.project-div-infos-register-2-button-1 {
  background: var(--button-type-3);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}

.project-div-infos-register-2-button-1 a {
  color: #fff;
}

.project-div-infos-register-2-button-1:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* Details = ZWEITE Aktion: nur Umriss, kein Verlauf.
   Zwei gleich laute Verlaufs-Buttons nebeneinander sagen dem Auge nicht,
   was die eigentliche Aktion ist. Gefüllt + Umriss macht die Rangfolge klar. */
.project-div-infos-register-2-button-2 {
  background: transparent;
  border: 2px solid var(--nav-border);
  box-shadow: none;
}

.project-div-infos-register-2-button-2 a {
  color: var(--text);
}

.project-div-infos-register-2-button-2:hover {
  background: var(--nav-bg);
  border-color: var(--text-2);
  box-shadow: none;
}

/* === Commands.html === */

/* - Commands Header */

.commands-header {
  margin-bottom: 1rem;
}

.commands-header h1 {
  font-weight: 700;
}

/* - Command Search - */

.command-search {
  justify-content: space-between;
  padding: 1.3rem;
  margin-bottom: 1rem;
}

.command-search-input-div input {
  flex: 1;
  padding: 1rem;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text);
}

/* Der Platzhalter stand auf halbtransparentem Weiß — im Light Mode unsichtbar.
   (Der getippte Text war schon korrekt auf var(--text); nur der Platzhalter
   hing noch am alten Wert.) */
.command-search-input-div input::placeholder {
  color: var(--text-muted);
}

.command-search-input-div input:focus {
  outline: none;
}

/* - Commands Columns */

.commands-columns {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: start;
}

/* jump-to */ /* Complexity-list */

.jump-to,
.commands-complexity-div {
  min-width: 245px;
  padding: 0.5rem;
}

.jump-to h2,
.commands-complexity-div h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nav-border);
}

.jump-to ul {
  list-style: none;
  padding: 0;
}

.jump-to ul li a {
  color: #e7a6f1;
  text-shadow: 0 0 10px rgba(186, 104, 200, 0.3);
  font-size: 1.4rem;
  font-weight: 550;
  text-decoration: none;
  transition:
    color 200ms ease,
    text-decoration 200ms ease;
}

.jump-to ul li a:hover {
  text-decoration: underline;
  color: #c71585;
}

/* Command List */

.command-list {
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.command-list h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nav-border);
}

.command-jumper h3 {
  color: var(--cta-accent);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

.command-item {
  border-bottom: 1px solid var(--nav-border);
  margin-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* "cyan" war fest verdrahtet — auf dunklem Grund knallig, auf hellem kaum zu
   sehen. --link-color liefert je Theme den passenden Türkiston: hell im Dark
   Mode, abgedunkelt im Light Mode. */
.command-item p {
  margin: 0;
  color: var(--link-color);
}

.command-item:last-child {
  border-bottom: none;
}

.command-text {
  font-weight: 600;
  /* Monospace für Befehle: Sie sind Text, den man abtippt — eine Schreibmaschinen-
     Schrift signalisiert das und lässt die Zeichen gleichmäßig stehen.
     Der Rückfall auf generische Monospace-Schriften greift, falls die Datei
     mal fehlt; dann bleibt der Charakter erhalten statt in Fredoka zu kippen. */
  font-family: "Fira Code", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem;
  color: #39d353;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(var(--glass-blur));
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.command-text svg {
  pointer-events: none;
  height: 18px;
  width: 18px;
  color: #39d353;
}

.copy-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 5px;
  outline: none;
  display: inline-flex;
  align-items: center;
  transition:
    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    filter 0.2s ease;
  display: inline-flex;
  justify-content: center;
  will-change: transform;
}

.complexity-copy-button {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Collapsible Header */

.collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Zugeklappte Gruppe wird lila (aufgeklappt gilt .command-jumper h3). */
.collapsible-header-h3.is-closed {
  color: #6a1b9a;
}
/* Dark Mode: #6a1b9a ist ein SEHR dunkles Lila — auf hellem Grund kräftig,
   auf dem dunklen Untergrund kommt es auf gut 2:1 Kontrast und die
   Überschrift verschwindet fast. Deshalb dasselbe aufgehellte Lila, das die
   Commands-Kachel im Wiki im Dark Mode schon benutzt (weiter oben:
   html[data-theme="dark"] .wiki-c-commands) — so sind Commands überall in
   derselben Farbe und es gibt keinen zweiten Lila-Ton zu pflegen. */
html[data-theme="dark"] .collapsible-header-h3.is-closed {
  color: #b18cf5;
}

.collapsible-header-h3 {
  margin: 0;
}

.expand-icon {
  display: none;
}

.collapsible-header.is-closed .collapse-icon {
  display: inline;
}

.collapsible-header.is-closed .expand-icon {
  display: none;
}

.collapsible-header .collapse-icon {
  display: none;
}

.collapsible-header .expand-icon {
  display: inline;
}

.command-collapse.collapsed {
  max-height: 0;
  overflow: hidden;
}

/* Abgetrennte Unterstützungs-Kategorie (Ko-fi / Patreon): eine klare Trennlinie
   über der ersten Support-Gruppe, dann die Gruppen selbst (eingeklappt gerendert). */
.command-support-divider {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px dashed var(--accent, #6a1b9a);
}
.command-support-divider-title {
  margin: 0 0 0.25rem;
  color: var(--accent, #6a1b9a);
}
.command-support-divider p {
  margin: 0;
  opacity: 0.85;
}
html[data-theme="dark"] .command-support-divider {
  border-top-color: #b18cf5;
}
html[data-theme="dark"] .command-support-divider-title {
  color: #b18cf5;
}
.command-jumper--support {
  border: 1px solid var(--accent, #6a1b9a);
}
html[data-theme="dark"] .command-jumper--support {
  border-color: #b18cf5;
}

/* Rechtstexte (Datenschutz / Nutzungsbedingungen) — aus Markdown gerendert.
   Angenehme Lesebreite und etwas Luft zwischen den Abschnitten. */
.legal-content {
  margin: 1rem auto;
  max-width: 60rem;
  line-height: 1.65;
}
.legal-content h1 {
  margin: 0 0 1rem;
}
.legal-content h2,
.legal-content h3 {
  margin: 1.6rem 0 0.5rem;
}
.legal-content p {
  margin: 0 0 1rem;
}
.legal-content ul,
.legal-content ol {
  margin: 0 0 1rem 1.4rem;
}
.legal-content li {
  margin: 0.25rem 0;
}
.legal-content hr {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
  margin: 1.5rem 0;
}
.legal-content a {
  text-decoration: underline;
}

/* === Galerie.html === */

.galerie-picture-button {
  padding: 0.5rem 1rem;
  transition: all 300ms ease;
}

.galerie-picture-button:hover {
  box-shadow: var(--box-shadow);
  scale: 1.02;
}

.galerie-wrapper {
  gap: 2rem;
}

.galerie-item {
  max-width: 60rem;
  height: auto;
}

.galerie-wrapper img {
  /* Ganzes Bild sichtbar (nichts abgeschnitten), aber Höhe gedeckelt:
     quadratische Bilder werden dadurch kleiner, breite bleiben breit.
     width/height auto + object-fit:contain -> Seitenverhältnis bleibt erhalten. */
  max-width: 30rem;
  max-height: 16rem;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.75rem;
  box-shadow: 0 0 15px rgba(180, 160, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.galerie-item:nth-child(even) {
  flex-direction: row-reverse;
  text-align: right;
  align-self: flex-end;
}

.galerie-item-text {
  min-width: 15rem;
}

.galerie-item-date {
  font-size: 0.9rem;
  color: #888888;
}

/* Anklickbares Item: dezentes Anheben beim Hover, damit klar wird "klickbar" */
.galerie-item-clickable {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.galerie-item-clickable:hover {
  transform: translateY(-3px);
}
.galerie-item-clickable:focus-visible {
  outline: 2px solid var(--accent, #b280ff);
  outline-offset: 3px;
}

/* ===== Galerie-Lightbox (Card-Popup beim Klick) ===== */
.galerie-popup {
  max-width: 46rem;
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.galerie-popup::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.galerie-popup-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.4rem;
  height: 2.4rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.galerie-popup-close:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.5);
}
.galerie-popup-close svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
.galerie-popup-card {
  position: relative;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.galerie-popup-card img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.75rem;
  box-shadow: 0 0 20px rgba(180, 160, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
}
.galerie-popup-text {
  text-align: center;
  width: 100%;
  /* Popup ist immer dunkel -> Text hell erzwingen (sonst im Light-Mode unsichtbar) */
  color: #f2f2f2;
}
.galerie-popup-text h3 {
  font-size: 1.6rem;
  font-weight: 700;
}
.galerie-popup-desc {
  margin: 0.5rem 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.92);
}

.galerie-border-style-base::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  padding: 3px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.galerie-border-style-1::before {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.3) 0%,
    rgba(255, 0, 255, 0.3) 20%,
    rgba(178, 128, 255, 0.3) 55%,
    rgba(0, 255, 255, 0.3) 100%
  );
}

.galerie-border-style-2::before {
  background: linear-gradient(
    135deg,
    rgba(155, 114, 12, 0.9) 0%,
    rgba(191, 0, 255, 0.7) 30%,
    rgba(27, 151, 114, 0.418) 60%,
    rgba(138, 43, 226, 0.8) 85%,
    rgba(255, 245, 150, 0.6) 100%
  );
}

.galerie-border-style-3::before {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.9) 0%,
    rgba(0, 150, 255, 0.7) 30%,
    rgba(0, 80, 255, 0.418) 60%,
    rgba(100, 0, 255, 0.8) 85%,
    rgba(200, 255, 255, 0.6) 100%
  );
}

.galerie-border-style-4::before {
  background: linear-gradient(
    135deg,
    rgba(255, 69, 0, 0.9) 0%,
    rgba(255, 140, 0, 0.7) 30%,
    rgba(255, 20, 147, 0.418) 60%,
    rgba(139, 0, 0, 0.8) 85%,
    rgba(255, 215, 0, 0.6) 100%
  );
}

.galerie-border-style-5::before {
  background: linear-gradient(
    135deg,
    rgba(57, 255, 20, 0.9) 0%,
    rgba(0, 255, 127, 0.7) 30%,
    rgba(34, 139, 34, 0.418) 60%,
    rgba(0, 100, 0, 0.8) 85%,
    rgba(173, 255, 47, 0.6) 100%
  );
}

.name-gradient-base {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
}

.name-style-1 {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 1) 0%,
    rgba(178, 128, 255, 1) 55%,
    rgba(0, 255, 255, 1) 100%
  );
}

.name-style-2 {
  background: linear-gradient(
    135deg,
    rgba(255, 245, 150, 0.6) 0%,
    rgb(214, 52, 200) 60%,
    rgba(27, 151, 114, 1) 85%
  );
}

.name-style-3 {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 1) 0%,
    rgba(0, 150, 255, 1) 40%,
    rgb(213, 204, 228) 85%
  );
}

.name-style-4 {
  background: linear-gradient(
    135deg,
    rgb(245, 159, 128) 0%,
    rgba(255, 20, 147, 1) 60%,
    rgba(255, 215, 0, 1) 100%
  );
}

.name-style-5 {
  background: linear-gradient(
    135deg,
    rgba(57, 255, 20, 1) 0%,
    rgba(0, 255, 127, 1) 30%,
    rgba(173, 255, 47, 1) 100%
  );
}

/* === SUBMIT-GALERIE-IMG.HTML === */

.submit-galerie-img-form {
  max-width: 40rem;
}

.submit-galerie-img-form input,
.submit-galerie-img-form textarea {
  padding: 0.5rem;
  font-size: 1.2rem;
  border: 1px solid var(--nav-border);
  background: var(--input-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border-radius: 0.5rem;
  color: var(--text);
}

.submit-galerie-img-displayname-info,
.submit-galerie-img-description-info {
  font-size: 0.9rem;
  color: var(--link-color);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.theme-card {
  position: relative;
  padding: 2.5rem 1rem;
  transition: all 0.2s ease;
}

.hidden-radio {
  position: absolute;
  opacity: 0;
}

.theme-card::before {
  opacity: 0.5;
  transition:
    opacity 0.2s ease,
    padding 0.2s ease;
}

.name-gradient-base {
  filter: saturate(0.5) brightness(0.8);
  transition: all 0.2s ease;
}

.theme-card:hover::before {
  opacity: 0.8;
}

.theme-card:has(.hidden-radio:checked) {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

.theme-card:has(.hidden-radio:checked)::before {
  opacity: 1;
  padding: 5px;
}

.theme-card:has(.hidden-radio:checked) .name-gradient-base {
  filter: saturate(1) brightness(1.2);
  transform: scale(1.1);
}

.submit-galerie-img-submit-button {
  padding: 1rem 2rem;
  background: var(--button-type-3);
  transition: all 300ms ease;
}

.submit-galerie-img-submit-button:hover {
  box-shadow: var(--box-shadow);
  scale: 1.02;
}

#image-preview-container {
  width: 100%;
  max-height: 20rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
}

#image-preview-element {
  object-fit: contain;
  max-height: 280px;
}

.hidden {
  display: none !important;
}

/* === SUPPORT.HTML === */

/* -- Support Header -- */

.support-header {
  margin-bottom: 2rem;
}

.support-header h1 {
  font-size: 3rem;
  color: var(--cta-warm);
  margin: 0;
}

.support-header h3,
.support-header h4 {
  margin: 0;
  font-weight: 500;
}

/* -- Support Content -- */

/* - grid 1fr - */

.support-content {
  max-width: 60rem;
}

.grid-1fr h2 {
  color: var(--cta-accent);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Support-Anfrage */

/* Support anfrage form */

.support-name-email-div {
  margin-bottom: 1.5rem;
}

.support-name-div input,
.support-email-div input {
  padding: 1rem;
  border: 1px solid var(--nav-border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.support-name-div input::placeholder,
.support-email-div input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.8;
  font-size: 1rem;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  margin-top: 0.5rem;
}

.hidden-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Die Kacheln liegen AUF der Formularkarte, die selbst schon eine getönte
   Glasfläche ist. Mit gl-bg (= dieselbe Tönung) wären sie grau auf grau und
   kaum als eigene Flächen erkennbar. Deshalb hier heller als ihr Untergrund —
   dasselbe Prinzip wie bei den Eingabefeldern. */
.category-card {
  transition: all 180ms ease;
  border: 2px solid var(--nav-border);
  background: var(--input-bg) !important;
  position: relative;
}

.category-card:hover {
  background-color: var(--nav-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.category-card:has(.hidden-radio:checked) {
  border-color: #7289da;
  background-color: rgba(114, 137, 218, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(114, 137, 218, 0.3);
}

/* Die Icon-Fläche der Kategorie-Karten: kein Kreis dahinter, das Icon trägt
   die Farbe selbst. */
.category-card-icon {
  margin-top: 0.5rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  transition: transform 180ms ease;
}

/* Eine Farbe je Kategorie — dieselbe Logik wie bei den Wiki-Kacheln:
   vier gleich aussehende Kreise sind schwerer auseinanderzuhalten als vier
   verschiedene. Der dunklere Ton liegt jeweils über Kontrast 3 gegen das
   weiße Icon (Mindestwert für Grafik). */
.kat-c-technik {
  --kat-clr-1: #6cb0fb;
  --kat-clr-2: #2f6fe4;
}
.kat-c-konto {
  --kat-clr-1: #c77bf7;
  --kat-clr-2: #9b30e0;
}
.kat-c-ingame {
  --kat-clr-1: #5ee08b;
  --kat-clr-2: #16a34a;
}
.kat-c-sonstiges {
  --kat-clr-1: #fbaa5a;
  --kat-clr-2: #d97316;
}

/* Der Rahmen der ausgewählten Karte nimmt die Farbe ihrer eigenen Kategorie. */
.category-card:has(.hidden-radio:checked) {
  border-color: var(--kat-clr-2);
  background: color-mix(
    in srgb,
    var(--kat-clr-2) 8%,
    var(--input-bg)
  ) !important;
}

/* Das Icon trägt die Farbe seiner Kategorie.
   --kat-clr-2 ist der satte Ton der jeweiligen Kategorie. */
.kat-icon {
  width: 2.1rem;
  height: 2.1rem;
  fill: var(--kat-clr-2);
  /* stroke: none — die globale svg-Regel setzt stroke: currentColor und
     würde Outline-Icons eine Kontur in der Textfarbe verpassen. */
  stroke: none;
}

/* Ausgewählte Kategorie: das Icon hebt sich leicht.
   (Der farbige Rahmen dazu steht oben bei den Farbklassen.) */
.category-card:has(.hidden-radio:checked) .category-card-icon {
  transform: scale(1.08);
}

.category-card:has(.hidden-radio:checked) .category-card-icon {
  background-color: rgba(114, 137, 218, 0.2);
}

.category-card p {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

/* Token statt festem #ffb84d: Der helle Orangeton ist für dunklen Grund
   gemacht und auf der hellen Seite kaum lesbar. --cta-warm liefert je Theme
   den passenden Ton (Light: dunkles Orange, Dark: unverändert hell). */
.entry-warning {
  color: var(--cta-warm);
}

.description {
  margin-top: 1rem;
}

.description-input {
  margin-top: 0.5rem;
  color: var(--text);
}

.description-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.8;
  font-size: 1rem;
}

.description-input:focus {
  outline: none;
  border-radius: 0.5rem;
}

.support-form-counter {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
  font-weight: 400;
}

.message {
  margin-top: 1rem;
}

.message-input {
  margin-top: 0.5rem;
  color: var(--text);
  min-height: 10rem;
}

.message-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.8;
  font-size: 1rem;
}

.message-input:focus {
  outline: none;
  border-radius: 0.5rem;
}

.relevant-info-div {
  margin-top: 2rem;
  align-items: flex-start;
}

.relevant-info p {
  margin: 0;
  margin-left: 1rem;
  font-size: 1.2rem;
}

.relevant-info ul {
  margin-top: 1rem;
  padding: 0;
  margin-left: 1rem;
}

.relevant-info li {
  margin-top: 0.5rem;
  list-style: none;
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.7;
  font-weight: 400;
}

.support-legal-information {
  margin: 1rem 0 1rem 0;
}

.support-submit-button-div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.support-submit-button {
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.support-submit-button:hover {
  background: linear-gradient(135deg, #1a9a92 0%, #20b2aa 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42);
  cursor: pointer;
}

.support-submit-button span {
  font-size: 1.2rem;
  font-weight: 550;
}

/* === PROFILE.HTML === */

.profile-block-infos {
  margin-bottom: 1rem;
}

.profile-block-infos h1 {
  margin: 0;
}

.profile-buttons button,
.add-children-button {
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
  padding: 1.2rem 3rem;
  text-decoration: none;
  transition: all 300ms ease-in-out;
}

.profile-buttons button:hover,
.profile-buttons a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.profile-buttons svg {
  margin: 0 0.3rem 0 0;
}

.profile-grid-system {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  align-items: start;
}

.profile-added-children-grid {
  padding: 1rem;
  height: auto;
}

.profile-added-children-grid h2,
.acount-account-infos-grid h2 {
  font-size: 1.5rem;
  margin: 0;
}

.acount-account-infos-grid h2,
.profile-added-children-grid h2 {
  color: var(--cta-warm);
  font-weight: 520;
}

.account-info {
  margin-top: 1rem;
  border-bottom: 1px solid var(--nav-border);
  padding-bottom: 0.4rem;
}

.account-info p {
  margin: 0;
  margin-left: 0.5rem;
  margin-top: 0.2rem;
}

.account-info h3 {
  margin: 0;
  font-weight: 550;
}

/* Hübsche Link-Cards im Profil (freie Grundstücke / Feedback) */
.profile-link-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.profile-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  border-color: #1a9a92;
}

.profile-link-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1.5rem;
  border-radius: 0.7rem;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
}

.profile-link-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.profile-link-text strong {
  font-size: 1.05rem;
  font-weight: 600;
}

.profile-link-text small {
  opacity: 0.7;
  font-size: 0.85rem;
}

/* Profil: grüne Erfolgsmeldung */
.msg-success {
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  margin: 0 0 1rem;
  background: #e7f6ec;
  color: #1e4620;
  border: 1px solid #b7dfc2;
}

/* "In Bearbeitung"-Badge (gleicher Look wie bei den Kindern) */
.profile-link-badge {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #7a5200;
  background: #fdf3d8;
  border: 1px solid #f0dca0;
}

/* "Freie Grundstücke" ist noch in Bearbeitung -> kein Link, kein Hover */
.plot-infos-button-disabled {
  cursor: default;
  opacity: 0.8;
}
.plot-infos-button-disabled:hover {
  transform: none;
  box-shadow: var(--box-shadow);
  border-color: var(--nav-border);
}

.profile-link-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #1a9a92;
  transition: transform 0.18s ease;
}

.profile-link-arrow svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}

.profile-link-card:hover .profile-link-arrow {
  transform: translateX(4px);
}

.profile-column h3,
.children-column h3 {
  font-weight: 500;
  font-size: 1.3rem;
}

.profile-infos-name,
.profile-infos-email,
.profile-infos-password,
.acfti {
  margin-top: 0.5rem;
  justify-content: space-between;
}

.profile-infos-name p,
.profile-infos-email p,
.profile-infos-password p {
  font-size: 1rem;
  margin: 0;
}

.profile-delete-account-div,
.profile-column-infos {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nav-border);
}

.profile-logout-all-devices-div h3,
.profile-delete-account-div h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.editable-input {
  font-size: 1rem;
  margin: 0;
  flex-grow: 1;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  margin-right: 10px;
}

.editable-input:focus {
  outline: none;
  border-bottom: 1px solid #fde047;
}

.save-controls-error-messages {
  align-self: start;
}

.save-controls-buttons {
  justify-content: center;
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.save-controls button {
  background: linear-gradient(180deg, #c71585, #a2106b);
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
}

.save-controls button:hover {
  background: var(--button-type-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.profile-logout-all-devices-button {
  display: inline-block;
  background: var(--button-type-2);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 180ms ease;
  padding: 0.7rem;
  text-decoration: none;
}

.profile-logout-all-devices-button:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.profile-delete-account-button {
  display: inline-block;
  border: 2px solid #c71585 !important;
  color: #c71585;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: all 180ms ease;
  padding: 0.7rem;
  text-decoration: none;
}

.profile-delete-account-button:hover {
  color: #fff;
}

.settings-switch-div {
  margin: 1rem 0;
}

/* ============================================================
   SEITE NICHT GEFUNDEN (404)
   ============================================================ */
.notfound-main {
  min-height: 60vh;
  padding: 2rem 1rem 4rem;
  text-align: center;
}
.notfound-card {
  max-width: 32rem;
  gap: 0.4rem;
}
.notfound-code {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}
.notfound-text {
  max-width: 34ch;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0 0 0.6rem;
}
.notfound-links {
  gap: 0.6rem;
  flex-wrap: wrap;
}
.notfound-btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: opacity 0.15s;
}
.notfound-btn:hover {
  opacity: 0.88;
}
.notfound-btn-2 {
  background: transparent;
  color: inherit;
  border: 1px solid var(--nav-border);
}
.notfound-btn-2:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

/* Children container added */

.children-container {
  justify-content: space-between;
  margin-top: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Namensblock darf schrumpfen und lange Namen umbrechen, statt den Button
   zu erdrücken. */
.children-container-names {
  flex: 1 1 auto;
  min-width: 0;
}

.children-container-names h2,
.children-container-names h3 {
  overflow-wrap: anywhere;
}

.children-container-names h2 {
  margin: 0;
}

.children-container-names h3 {
  margin: 0;
  font-weight: 500;
}

/* Button behält seine Größe und knickt nicht ein; passt er nicht mehr neben
   den Namen, rutscht er (dank flex-wrap) in die nächste Zeile. */
.children-container-edit-button {
  flex-shrink: 0;
  white-space: nowrap;
}

.child-status {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.child-status-added {
  color: #1e4620;
  background: #e7f6ec;
  border-color: #b7dfc2;
}

.child-status-pending {
  color: #7a5200;
  background: #fdf3d8;
  border-color: #f0dca0;
}

.child-status-banner {
  border: 1px solid transparent;
  margin-bottom: 0.5rem;
}

/* Minimalistisch: statt Vollflächen-Verlauf ein dezenter Ghost-Button.
   Überschreibt bewusst .btn-a-style-3 (Verlauf/Schatten) und .padding-1.
   Light Mode: leichte Teal-Füllung + dunkleres Teal, damit der Button auf
   dem hellen Glas klar sichtbar ist (transparent verschwand vorher fast). */
.children-container-edit-button {
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 200ms ease-in-out;
  padding: 0.4rem 0.9rem;
  background: #1a9a92;
  color: #fff;
  border: 1px solid #1a9a92;
  box-shadow: 0 2px 8px rgba(26, 154, 146, 0.3);
}

.children-container-edit-button:hover {
  background: #147d76;
  border-color: #147d76;
}

/* Dark Mode: der luftige Ghost-Look funktioniert dort gut -> so beibehalten. */
html[data-theme="dark"] .children-container-edit-button {
  background: transparent;
  color: #1a9a92;
  border-color: rgba(26, 154, 146, 0.45);
}

html[data-theme="dark"] .children-container-edit-button:hover {
  background: rgba(26, 154, 146, 0.12);
  border-color: #1a9a92;
}

/* === CHILDREN-INFOS.HTML === */

.children-infos-wrapper p {
  padding: 0;
  margin: 0 0 0.5rem 0;
}

.children-infos-wrapper > div > input {
  padding: 0.5rem;
  font-size: 1.2rem;
  color: var(--text);
  outline: none;
}

.children-infos-wrapper > div > textarea {
  padding: 0.5rem;
  font-size: 1.2rem;
  color: var(--text);
  outline: none;
}

.children-infos-wrapper > div input::placeholder,
.children-infos-wrapper > div textarea::placeholder {
  color: lightgray;
}

.date-input-group {
  padding: 0.5rem;
}

/* Höhere Spezifität als ".whitelist-form-div input", damit die inneren
   Datums-Felder KEIN eigenes Padding bekommen (sonst doppeltes Padding ->
   das Feld wird höher/dicker als die anderen Inputs). */
.whitelist-form-div .date-input-group input,
.children-infos-wrapper .date-input-group input {
  font-size: 1.2rem;
  border: none;
  outline: none;
  text-align: center;
  min-width: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  margin: 0;
  padding: 0;
  color: var(--text);
}

/* === WHITELIST-FORMULAR.HTML === */ /* === FEEDBACK.HTML === */

.whitelist-form-top-div p {
  margin: 0;
  padding: 0;
}

.whitelist-form,
.feedback-form {
  margin-top: 1rem;
  max-width: 40rem;
  gap: 2rem;
}

.whitelist-form-div input,
.whitelist-form-div textarea,
.feedback-form-div input,
.feedback-form-div textarea {
  padding: 0.5rem;
  font-size: 1.2rem;
  color: var(--text);
  outline: none;
}

/* =========================================================
   Komponenten-Klasse: Dropdown (Standard-Look, theme-fähig).
   Überall an <select> nutzbar.
   ========================================================= */
.select-01 {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.8rem;
  font-size: 1.2rem;
  font-family: inherit;
  color: var(--text);
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 0.5rem;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  cursor: pointer;
  outline: none;
}
.select-01:focus {
  border-color: var(--accent);
}
.select-01 option {
  background: var(--option-bg);
  color: var(--text);
}

/* =========================================================
   Komponenten-Klasse: Text-Eingabefeld GLAS-Variante (Public).
   Gegenstück zu .input-01 (Admin, dunkel). Für NEUE Felder:
   einfach class="input-02" ans <input>/<textarea> schreiben.
   ========================================================= */
.input-02 {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  font-size: 1.2rem;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--nav-border);
  border-radius: 0.5rem;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  outline: none;
}
.input-02:focus {
  border-color: var(--accent);
}
textarea.input-02 {
  min-height: 7rem;
  resize: vertical;
}

.whitelist-form-div input::placeholder,
.feedback-form-div input::placeholder {
  color: lightgray;
}

.whitelist-form-div textarea::placeholder,
.feedback-form-div textarea::placeholder {
  color: lightgray;
}

.whitelist-form-logged-in,
.feedback-form-logged-in {
  margin: 0;
  font-size: 0.9rem;
  color: lightgray;
}

.whitelist-form-div label,
.feedback-form-div label {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Etwas Luft zwischen Beschriftung und Eingabefeld — in ALLEN Formularen.

   Bewusst NUR margin-bottom und kein font-size/weight wie oben: Die anderen
   Formulare sollen ihre Schrift behalten, es geht allein um den Abstand.
   Das ">" ist wichtig — sonst trifft die Regel auch die Karten-Labels
   (.category-card, .theme-card), die selbst gar keine Beschriftungen sind. */
.login-email-div > label,
.login-password-div > label,
.signup-username-div > label,
.signup-email-div > label,
.signup-password-div-1 > label,
.signup-password-div-2 > label,
.support-name-div > label,
.support-email-div > label,
.support-category > label,
.description > label,
.message > label,
.submit-galerie-img-form > label {
  /* flex statt block: Die Beschriftungen im Login/Registrieren haben ein Icon
     davor. Als Inline-Element hing das am "vertical-align: middle" der
     globalen svg-Regel — und die richtet an der Mittellinie der Kleinbuchstaben
     aus, nicht an der Zeilenmitte. Dadurch saß das Icon minimal zu hoch.
     align-items: center setzt Icon und Text zuverlässig auf eine Mittellinie,
     unabhängig von Schriftgröße. Labels ohne Icon stört es nicht. */
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

/* Das Icon soll nicht mitschrumpfen oder -wachsen, wenn der Text lang wird. */
.login-email-div > label svg,
.login-password-div > label svg,
.signup-username-div > label svg,
.signup-email-div > label svg,
.signup-password-div-1 > label svg,
.signup-password-div-2 > label svg {
  flex: 0 0 auto;
}

.whitelist-form-minecraft-name-div p {
  margin: 0;
  padding: 0;
}

/* Minecraft-Namen prüfen: Eingabe + "Prüfen"-Button nebeneinander */
.mc-check-row {
  align-items: stretch;
}
.mc-check-row input {
  flex: 1;
  min-width: 0;
}
.mc-check-btn {
  padding: 0 1.3rem;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-dark) 100%
  );
  transition: opacity 0.2s ease;
}
.mc-check-btn:hover {
  opacity: 0.9;
}
.mc-check-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Status-/Vorschau-Zeile unter dem Feld */
.mc-check-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
  min-height: 1.2rem;
  font-size: 0.95rem;
}
.mc-check-status.err {
  color: #ff8a8d;
}
.mc-check-status.warn {
  color: #ffc46b;
}
.mc-check-status.warn .mc-found {
  color: #ffc46b;
}
.mc-check-status.loading {
  color: lightgray;
}
.mc-check-status .mc-head {
  width: 44px;
  height: 44px;
  border-radius: 0.4rem;
  image-rendering: pixelated;
  flex-shrink: 0;
  /* Lade-Shimmer, bis das Kopfbild da ist (per JS .is-loaded). */
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.04) 70%) #000;
  background-size: 250% 100%;
  animation: mcHeadShimmer 1.1s ease-in-out infinite;
}
.mc-check-status .mc-head.is-loaded {
  animation: none;
  background: #000;
}
@keyframes mcHeadShimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
.mc-check-status .mc-found {
  font-weight: 600;
  color: #6ede9b;
}
.mc-check-status .mc-uuid-text {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.8rem;
  opacity: 0.8;
  word-break: break-all;
}

/* "color: var(--nav-text)" stand hier — das Token gibt es nirgends, die Zeile
   war also wirkungslos. Die Schriftfarbe liefert btn-a-style-3 (weiß auf dem
   gefüllten Verlauf); deshalb ersatzlos raus statt sie zu "reparieren". */
.whitelist-form-submit-button,
.feedback-form-submit-button {
  margin-top: 1rem;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 1.2rem 2rem;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
  margin-bottom: 1rem;
}

/* Weicher Schatten in der Button-Farbe statt hartem Schwarz — passt zu den
   anderen Buttons der Seite und hebt beim Hover leicht an. */
.whitelist-form-submit-button:hover,
.feedback-form-submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent);
}

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.star-rating input {
  display: none;
}

.star-rating label:before {
  content: "★";
}

.star-rating label {
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.1s ease-in-out;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #926f10;
}

.star-rating input:checked ~ label {
  color: #f5b301;
}

.star-rating .star-rating:hover input:checked ~ label {
  color: #c59100;
}

.whitelist-submit-sent-wrapper {
  max-width: 40rem;
}

.whitelist-submit-sent-wrapper a {
  margin: 1rem 0 0 0;
}

/* === LOGIN.HTML === */ /* === SIGNUP.HTML === */ /* === EMAIL-RESET.HTML === */ /* === PASSWORD-RESET.HTML === */ /* === DELETE-ACCOUNT.HTML === */

.login-header h1,
.signup-header h1,
.email-reset-header h1,
.password-reset-header h1,
.delete-account-header h1 {
  color: var(--cta-warm);
  margin: 0;
  font-size: 2.7rem;
}

.p1 {
  font-size: 1.1rem;
  color: lightgray;
}

.p2 {
  font-size: 0.9rem;
  color: #bebebe;
}

.login-form,
.signup-form,
.email-reset-form,
.input-code-form,
.request-code-form,
.password-reset-form,
.delete-account-form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  max-width: 90vw;
  width: 30rem;
  gap: 1rem;
}

.email-changed-div,
.password-resetted-div {
  padding: 2rem;
  max-width: 90vw;
  width: 30rem;
}

.login-email-div input,
.login-password-div input,
.signup-div-div input,
.reset-email-div-div input,
.reset-password-div-div input {
  border-radius: 0.5rem;
  background: var(--input-bg);
  /* Kein "border: none" in dieser Regel: Der Rand ist die einzige Kante, die
     das Feld hat — im Dark Mode hebt sich der Feld-Hintergrund kaum vom
     Formular ab, ohne Rand wäre das Feld praktisch unsichtbar. */
  border: 1px solid var(--nav-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  width: 100%;
  font-size: 1.2rem;
  outline: none;
  color: var(--text);
}

/* Beim Tippen klar erkennbar, welches Feld aktiv ist. */
.login-email-div input:focus,
.login-password-div input:focus,
.signup-div-div input:focus,
.reset-email-div-div input:focus,
.reset-password-div-div input:focus {
  border-color: var(--accent);
}

.login-email-div input::placeholder,
.login-password-div input::placeholder,
.signup-div-div input::placeholder,
.reset-email-div-div input::placeholder,
.reset-password-div-div input::placeholder {
  color: lightgray;
}

.login-password,
.signup-password,
.reset-password-eye-icon {
  position: relative;
  width: 100%;
}

.login-email-input,
.signup-email-input,
.signup-username-input,
.reset-email-div-div input,
.reset-password-div-div input {
  padding: 1rem;
}

.login-password-input,
.signup-password-input {
  padding: 1rem 3rem 1rem 1rem;
}

.toggle-password,
.toggle-password-reset {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translatey(-50%);
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 180ms ease;
}

.remember-me-password-forgot-div {
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Checkbox + Label auf einer Linie, sauber vertikal zentriert */
.remember-me-div {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.login-remember-me {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #20b2aa;
  cursor: pointer;
}

.remember-me-div label {
  font-size: 0.9rem;
  color: lightgray;
  line-height: normal;
  cursor: pointer;
}

/* "vergessen"-Links: dezent in der Login-Akzentfarbe, klarer Hover je Link */
.login-forgot-password {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: right;
}

.login-forgot-password a {
  color: #20b2aa;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}

.login-forgot-password a:hover {
  color: #1a9a92;
  text-decoration: underline;
}

.login-html-button,
.signup-html-button,
.reset-email-submit-button-1,
.reset-email-submit-button-2,
.reset-password-button-1,
.reset-password-button-2 {
  padding: 1.2rem;
  background: linear-gradient(135deg, #20b2aa 0%, #1a9a92 100%);
  color: var(--text);
  font-size: 1.2rem;
  border: none;
  transition:
    background 180ms ease,
    transform 180ms ease;
  gap: 0.3rem;
}

.signup-html-button-icon,
.login-html-button-icon {
  width: 1.7rem;
  height: 1.7rem;
  top: 0.1px;
}

.signup-html-button-icon {
  top: -2px;
}

.login-link-button-icon,
.signup-link-button-icon {
  height: 1.5rem;
  width: 1.5rem;
}

.login-html-button:hover,
.signup-html-button:hover,
.reset-email-submit-button-1:hover,
.reset-email-submit-button-2:hover,
.reset-password-button-1:hover,
.reset-password-button-2:hover {
  background: linear-gradient(135deg, #1a9a92 0%, #20b2aa 100%);
  transform: translateY(-3px);
  cursor: pointer;
}

.sign-up-section,
.login-section {
  border-radius: 1rem;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  text-align: center;
  padding: 2rem;
  max-width: 90vw;
  width: 30rem;
  margin-top: 2rem;
}

.sign-up-section h3,
.login-section h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
}

.sign-up-section p,
.login-section p {
  font-size: 0.9rem;
  color: lightgray;
}

.sign-up-section a,
.login-section a {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 1rem;
  padding: 1rem 2.2rem;
  border-radius: 0.5rem;
  background: rgba(255, 165, 0, 0.8);
  box-shadow: 0 8px 32px 0 rgba(255, 165, 0, 0.3);
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.sign-up-section a:hover,
.login-section a:hover {
  background: rgba(255, 165, 0, 0.9);
  transform: translateY(-3px);
  cursor: pointer;
}

.legal-information,
.rules-information,
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Checkbox behält ihre Größe; umgebrochene Label-Zeilen laufen NICHT
   unter die Checkbox, sondern brechen bündig neben ihr um. */
.legal-information input[type="checkbox"],
.rules-information input[type="checkbox"],
.contact-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.features-grid-system {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 30rem;
  width: 100%;
}

.features-grid-card-icon {
  font-size: 1.3rem;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.features-grid-card-icon-1 {
  color: #20b2aa;
}

.features-grid-card-icon-3 {
  color: #ffa500;
}

.features-icon-1,
.features-icon-2,
.features-icon-3,
.sign-up-back-to-home-icon {
  top: 0.1px;
  height: 1.5rem;
  width: 1.5rem;
}

.features-grid-card h4 {
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.features-grid-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: lightgray;
  font-weight: 300;
}

.back-to-home-div a {
  color: lightgray;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 300;
}

/* email-reset input code section */

/* === NEWS.HTML === */

.news {
  border-bottom: 1px solid var(--nav-border);
}

.news-date {
  padding: 0;
  margin: 0;
  color: lightgray;
}

.news-subject {
  color: var(--cta-warm);
  font-size: 1.4rem;
  font-weight: 540;
  padding: 0;
  margin: 0;
}

.news-text {
  font-size: 1rem;
  padding: 0;
  flex-grow: 1;
}

.news-item-img {
  width: 20rem;
  flex-shrink: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.news-img {
  width: 100%;
  height: auto;
  display: block;
}

/* === PAGINIERUNG (News, Angebote, Projekte) === */

.news-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
}

.news-pagination a,
.news-pagination span {
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nav-border);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  background: var(--nav-bg);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.news-pagination a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Pfeil-Icon (Seiten wechseln): links = Original, rechts = gespiegelt */
.news-pagination .np-arrow {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  display: block;
}
.news-pagination .np-arrow-next {
  transform: scaleX(-1);
}

.news-pagination .np-current {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-color: transparent;
}

.news-pagination .np-dots {
  border: none;
  background: none;
  min-width: 1rem;
  opacity: 0.6;
}

.news-pagination .np-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* === INSTRUCTIONS.HTML === */

.instructions-content-header {
  align-items: flex-start;
  margin-bottom: 1rem;
}

.instructions-jump-to-div {
  margin-bottom: 1rem;
}

.instructions-jump-to-div ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.instructions-div h3 {
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0.5rem 0 0 0;
  color: var(--cta-warm);
}

.instructions:not(:last-child) {
  border-bottom: 2px solid var(--nav-border);
}

.instructions video,
.instructions img {
  width: 100%;
}

.java_add_server_img {
  width: 100%;
  max-width: 40rem;
}

.instructions img,
.instructions video {
  margin-bottom: 0.5rem;
}

.instructions span {
  color: var(--cta-accent);
}

/* === ABOUT-US.HTML === */

.about-us-server-overview-1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-us-server-overview-1-h1 {
  align-self: flex-start;
}

.about-us-server-overview-1-p {
  margin: 0;
}

.about-us-server-overview-1 ul li {
  list-style-type: none;
  margin-left: -1rem;
}

.about-us-top-div h3 {
  color: var(--cta-warm);
}

.about-us-top-div label {
  font-size: 1.1rem;
  font-weight: 600;
}

.about-us-top-div p span {
  font-weight: 600;
  color: var(--link-color);
}

.about-us-server-overview-1 strong {
  color: var(--cta-accent);
}

.about-us-top-div a {
  color: var(--link-color);
}

.about-us-div img {
  max-width: 40rem;
  max-height: 40rem;
  width: 100%;
}

.about-us-server-overview-1-pvp ul {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--nav-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.32);
  border-radius: 0.5rem;
  width: fit-content;
  padding: 1rem 1rem 1rem 2rem;
}

.pvp-span {
  font-weight: 600;
  color: var(--background-clr-2);
}

.pvp-span-2-grün {
  color: #39d353;
  text-shadow:
    0 0 5px #39d353,
    0 0 10px #39d353;
}

.pvp-span-2-rot {
  color: #ff0000;
  text-shadow:
    0 0 5px #ff0000,
    0 0 10px #ff0000;
}

.about-us-arrow-left-short-icon {
  top: 1px;
}

.about-us-back-to-home {
  margin-top: 2rem;
}

/* -- NAV BAR -- */

.top-nav {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10005;
  padding: 0 2rem 0 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  height: 5.5rem;
}

.top-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Fast weiß statt Milchglas.
     Grund: Ein Glaseffekt braucht etwas zum Durchscheinen. Auf der Startseite
     liegt das Banner-Bild dahinter — da sah die Navbar gut aus. Auf allen
     anderen Seiten liegt nur der einfarbige Hintergrund dahinter, und "Glas
     über Nichts" ist einfach eine blasse Fläche. Ergebnis: Die Navbar sah
     auf jeder Seite anders aus.
     Deshalb eine feste, fast weiße Fläche — überall identisch, und auf der
     Startseite deckt sie das Bild sauber ab statt es durchschimmern zu lassen.
     Der Weichzeichner bleibt ganz schwach, damit die Kante nicht hart wirkt. */
  background: rgba(252, 253, 254, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);

  /* Puts it behind the nav text/links */
  z-index: -1;
  border-radius: inherit;
}

/* Dark Mode: dasselbe Prinzip, nur eben fast schwarz statt fast weiß. */
html[data-theme="dark"] .top-nav::before {
  background: rgba(16, 18, 26, 0.94);
}

/* - NAV BAR IMAGE - */

.nav-bar-img {
  border-radius: 0.5rem;
  height: 4rem;
  width: auto;
  /* block statt inline: sonst rechnet der umschließende <a> den Baseline-
     Leerraum unter dem Bild mit, und align-items:center schiebt das Logo
     dadurch leicht nach oben. */
  display: block;
}

/* - NAV BAR CENTER CONTENT - */

.nav-center {
  display: flex;
  flex-direction: row;
  list-style: none;
  position: relative;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.nav-center li {
  position: static;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 50rem;
  padding-top: 2rem;
  /*
  transform: translateX(-50%);
  */
  left: 50%;
  margin-left: -25rem;
  text-align: left;
}

.dropdown-inner-box {
  display: none;
  width: 100%;
  justify-content: space-between;
}

.dropdown-inner-box a {
  min-width: 15rem;
  text-decoration: none;
}

.dropdown-inner-box h3 {
  margin-left: 0.5rem;
  font-weight: 500;
  font-size: 1.3rem;
}

.dropdown-content a {
  padding: 0.5rem;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in-out;
}

.dropdown-content a:hover {
  text-decoration: underline !important;
}

.dropdown:hover .dropdown-content {
  display: flex !important;
}

.dropdown:hover .dropdown-inner-box {
  display: flex !important;
}

.unselected > a {
  text-decoration: none;
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 200ms ease-in-out;
  display: flex;
}

.unselected > a:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.03)
  );
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.selected > a {
  display: flex;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.3rem;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* - NAV BAR PROFILE DROPDOWN MENU - */

.dropbtn {
  display: flex;
  align-items: center;
  margin-right: 1rem;
  color: var(--text);
  background-color: transparent;
  padding: 0;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: rgb(74 144 226);
  border: rgba(255, 255, 255, 0.3) 2px solid;
}

.profile-icon p {
  font-size: 1rem;
  font-weight: 550;
}

.fa-circle-down {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  transition: transform 200ms ease-in-out;
  transform-origin: center;
  display: inline-flex;
  /* Festes Weiß wäre auf der fast weißen Navbar unsichtbar. currentColor
     nimmt die Farbe des Buttons daneben (.dropbtn -> --text), dadurch
     passen Name und Pfeil in beiden Themes zusammen. */
  fill: currentColor;
  stroke: none;
}

.rotate {
  transform: rotate(180deg);
}

#profile-link-container {
  position: relative;
}

.profile-dropdown-content {
  display: flex;
  position: absolute;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease-in-out,
    padding 0.3s ease-in-out;
  margin-top: 1rem;
  gap: 0.5rem;
  right: 0;
  min-width: 12rem;
  z-index: 1;
}

.profile-dropdown-content a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  transition: background 250ms ease;
  text-decoration: none;
  color: var(--text);
  border-radius: 0.5rem;
}
.profile-dropdown-content a svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* Kein eigener backdrop-filter beim Hover: ein Blur INNERHALB des schon
   geblurrten Dropdowns (verschachtelt) löste die Repaint-Naht aus, die
   blieb, solange man auf einem Link stand. Stattdessen nur eine Tönung. */
.profile-dropdown-content a:hover {
  background: var(--nav-bg-hover);
}

.show-div {
  /* großzügig, damit der Inhalt (inkl. Theme-Switch) IMMER reinpasst;
     die tatsächliche Höhe richtet sich nach dem Inhalt */
  max-height: 500px;
  padding: 0.5rem;
}

/* - NAV BAR RIGHT - */

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-bar-login-button {
  background: var(--background-clr-4);
  box-shadow: 0 8px 22px rgba(199, 21, 133, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border: none;
}

.nav-bar-login-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  background: #1c9c95;
}

/* Registrieren = zweite Aktion, deshalb nur Umriss statt gefüllt.
   Über die Tokens, damit es mit dem Theme kippt — weißes Glas mit weißer
   Schrift wäre auf der fast weißen Navbar unsichtbar. */
.nav-bar-signup-button {
  background: transparent;
  border: 1px solid var(--nav-border);
  color: var(--text) !important;
}

.nav-bar-signup-button:hover {
  background: var(--nav-bg);
}

.nav-bar-signup-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.nav-bar-login-button,
.nav-bar-signup-button {
  font-size: 1.2rem;
  text-decoration: none;
  /* Nur der Anmelden-Button ist gefüllt (btn-a-style-*) und braucht Weiß —
     Registrieren überschreibt das oben mit var(--text). */
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.9rem 1.5rem;
  font-weight: 580;
  cursor: pointer;
  transition:
    transform 400ms ease,
    box-shadow 400ms ease,
    background 400ms ease;
}

/* --- HAMBURGER BUTTON STYLES --- */
#hamburger {
  width: 30px;
  height: 22px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 10006;
  position: relative;
}

#hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  /* currentColor nimmt die Textfarbe und kippt damit mit dem Theme; ein
     festes "white" wäre auf der fast weißen Navbar unsichtbar. */
  background-color: currentColor;
  color: var(--text);
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
}

.menu-is-open #hamburger span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
}

.menu-is-open #hamburger span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.menu-is-open #hamburger span:nth-child(3) {
  transform: translateY(-9.5px) rotate(-45deg);
}

/* --- OVERLAY STYLES --- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-list-div {
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  box-shadow: inset 0 10px 28px rgba(136, 118, 126, 0.18);
  padding: 1rem 2rem 1rem 2rem;

  overflow: hidden;
  position: relative;
}

.mobile-nav-list {
  list-style: none;
  text-align: center;
  width: 50%;
  flex-shrink: 0;
}

.mobile-nav-list a {
  color: white;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  padding: 0.4rem;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.mobile-nav-list a:hover {
  opacity: 0.65;
}

.nav-slider {
  display: flex;
  width: 100%;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-slider.slide-active {
  transform: translateX(-100%);
}

.sub-menu {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
}

.sub-menu.active-view {
  display: flex;
  opacity: 1;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-divider {
  width: 100%;
  max-width: 10rem;
  margin: 0.8rem auto;
  border: none;
  height: 2px;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
}

.mb-selector-div {
  justify-content: space-between;
  max-width: 20rem;
  width: 100%;
}

.mb-unselected,
.mb-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mb-selected div svg {
  color: var(--link-color);
}

.mb-selected div a {
  color: var(--link-color);
}

.mb-placeholder-icon {
  height: 1.6rem;
  width: 1.6rem;
}

.mb-icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* === MEDIA QUERIES max-width === */

/* BREAKPOINT: ab 1444px */
@media (max-width: 1444px) {
  /* --- NAVBAR --- */

  #hamburger {
    display: flex;
  }

  .nav-center,
  .nav-right,
  .profile-dropdown {
    display: none !important;
  }

  .top-nav {
    position: relative;
  }

  .left-nav-top {
    display: none;
  }

  .left-nav-bottom {
    display: none;
  }
}

/* BREAKPOINT: ab 1250px */
@media (max-width: 1250px) {
  .our-offers {
    flex-direction: column;
  }
}

/* BREAKPOINT: ab 1100px */
@media (max-width: 1100px) {
  /* --- HOME.HTML --- */
  .abt-us-rules-top-div {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }

  .our-offers-div {
    grid-column: auto;
  }

  .discover {
    margin-top: 0 !important;
  }

  .discover-grid {
    grid-template-columns: 1fr 1fr;
  }

  .server-section {
    margin: 0 0 1rem 0 !important;
  }

  /* --- NEWS.HTML --- */
  .news-item-body {
    flex-direction: column;
  }

  /* --- PROFILE.HTML --- */
  .profile-grid-system {
    grid-template-columns: 1fr;
  }

  /* --- WIKI.HTML --- */
  .wiki-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wiki-selector-link {
    min-height: 15rem;
  }

  /* --- offers.html --- */
  .project-div-infos {
    flex-direction: column;
  }

  .project-div-infos img {
    max-width: 30rem;
  }

  .project-div-infos-register-2 {
    justify-content: center;
  }
}

/* BREAKPOINT: ab 900px */
@media (max-width: 900px) {
  /* --- GALERIE.HTML --- */
  .galerie-wrapper {
    padding: 0.5rem;
  }

  .galerie-item {
    flex-direction: column !important;
    max-width: 30rem;
  }

  .galerie-item img {
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 20rem !important;
  }
}

/* BREAKPOINT: ab 768px */
@media (max-width: 768px) {
  /* --- PAGE-BASE --- */
  main {
    padding: 0.5rem;
  }

  /* --- NAVBAR --- */
  .top-nav {
    margin: 0.5rem;
  }

  .close-menu {
    right: 2.6rem;
    top: 2.1rem;
  }

  /* --- HOME.HTML --- */

  .abt-us-rules-top-div {
    grid-template-columns: 1fr;
  }

  .about-us,
  .rules,
  .projects {
    padding: 1rem !important;
    min-height: auto !important;
  }

  .projects-div {
    margin: 1rem 0 0 0;
    flex: none;
  }

  /* Handy: kompaktes 2x2-Raster statt vier XXL-Karten untereinander. */
  .discover-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    max-width: 34rem;
  }

  .discover-top h2 {
    font-size: 2rem;
  }

  .discover-body {
    padding: 0.85rem 0.9rem 1rem;
  }

  .discover-body h4 {
    font-size: 1.05rem;
  }

  .discover-body p {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .discover-badge {
    width: 2.4rem;
    height: 2.4rem;
    left: 0.6rem;
    bottom: 0.6rem;
  }

  .discover-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .server-info {
    flex-direction: column;
    align-items: center !important;
  }

  .server-info {
    grid-template-columns: 1fr;
  }

  /* --- RULES.HTML --- */
  .rules-grid,
  .consequences-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .rules-div {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
  }

  /* --- COMMANDS.HTML --- */
  .commands-columns {
    grid-template-columns: 1fr;
  }

  .command-search {
    padding: 0.5rem;
  }

  /* --- SIGN-UP.HTML --- */
  .signup-form,
  .login-form,
  .sign-up-section,
  .login-section {
    padding: 2rem 1rem;
  }

  /* ABOUT-US.HTML */

  .about-us-main {
    padding: 0.5rem;
  }

  .about-us-top-div {
    padding: 0;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  .about-us-div {
    padding: 0.5rem;
  }

  .about-us-top-div h1 {
    margin: 0 0 1rem 0;
  }

  /* --- DONATION.HTML --- */

  .donation-button-wrapper {
    flex-direction: column;
    width: 100%;
  }

  .donation-button-div {
    width: 100%;
  }

  .donation-button-div a {
    padding: 1rem 0;
    text-align: center;
  }

  /* --- WIKI.HTML --- */
  .wiki-server-infos {
    grid-template-columns: 1fr;
  }

  .wiki-server-infos-galerie {
    min-height: 8rem;
  }
}

/* BREAKPOINT: ab 660px */
@media (max-width: 660px) {
  /* --- SUPPORT.HTML --- */
  .grid-1fr {
    grid-template-columns: 1fr;
  }

  .support-name-email-div {
    flex-direction: column !important;
  }

  .category-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- NEWS.HTML --- */
  .news {
    padding: 1rem 0 1rem 0;
  }

  /* --- PROFILE.HTML --- */
  .profile-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  /* --- DONATE.HTML --- */

  .donation-grid-1 {
    grid-template-columns: 1fr;
  }

  .donation-amount-input-div input {
    font-size: 3rem;
  }

  .donation-amount-input-div span {
    font-size: 3rem;
  }

  /* --- WIKI.HTML --- */
  /* Handy: Kacheln als kompakte Zeilen statt hoher Karten – Icon links,
     Titel + Untertitel rechts. Grid (statt der flex-column-Utility) lässt das
     Icon beide Textzeilen überspannen, ganz ohne Markup-Wrapper. Spart massiv
     Scroll: 6 kurze Zeilen statt 6 großer Karten. */
  .wiki-selector-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .wiki-selector-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon titel"
      "icon text";
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.1rem;
    min-height: 0;
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 1rem;
    /* Sanft von oben einklappen, gestaffelt je Kachel (nth-child weiter unten).
       cubic-bezier = weiches Ausklingen ohne Ruckeln. backwards = vor dem Delay
       schon im Start-Zustand (unsichtbar). */
    animation: wikiDropIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .wiki-selector-link:nth-child(1) { animation-delay: 0.05s; }
  .wiki-selector-link:nth-child(2) { animation-delay: 0.17s; }
  .wiki-selector-link:nth-child(3) { animation-delay: 0.29s; }
  .wiki-selector-link:nth-child(4) { animation-delay: 0.41s; }
  .wiki-selector-link:nth-child(5) { animation-delay: 0.53s; }
  .wiki-selector-link:nth-child(6) { animation-delay: 0.65s; }

  .wiki-icon {
    grid-area: icon;
    width: 2.4rem;
    height: 2.4rem;
  }

  .wiki-kachel-titel {
    grid-area: titel;
    margin-top: 0;
    font-size: 1.15rem;
  }

  .wiki-kachel-text {
    grid-area: text;
    text-align: left;
    font-size: 0.85rem;
  }

  .wiki-server-infos {
    grid-template-columns: 1fr;
  }

  /* --- OFFERS.HTML --- */
  .project-div-infos-register-2 {
    flex-direction: column;
  }

  .project-div-wrapper {
    padding: 0.5rem;
  }

  /* --- GALERIE.HTML --- */
  .galerie-wrapper {
    align-items: center !important;
    justify-content: center !important;
  }

  .galerie-item:nth-child(even) {
    text-align: left;
    align-self: auto;
  }

  /* --- WIKI.HTML --- */
  .wiki-server-infos-details {
    flex-direction: column;
  }

  /* --- ABOUT-US.HTML --- */

  .introduction-div img {
    max-width: 5rem;
  }
}

/* BREAKPOINT: ab 430px */
@media (max-width: 430px) {
  /* --- NEWS.HTML --- */
  .news-item-img {
    width: 100%;
  }

  /* --- LOGIN.HTML --- */
  .remember-me-password-forgot-div {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Links links ausrichten (statt rechts), damit sie sauber unter der
     Checkbox stehen und nicht schief nach rechts wegrücken */
  .login-forgot-password {
    text-align: left;
  }

  /* -- FOOTER --
     Auf schmalen Handys die Links als sauberes 2-Spalten-Raster statt als
     flatterndem Flex-Umbruch. 6 Links ergeben so ordentliche 3 Reihen.
     Die frühere Mittellinie (::after bei 50 %) ist raus – bei 3 Reihen
     würde sie mitten durch die Beschriftung laufen; die Trennlinie oben
     (border-top aus .links-footer) genügt. */
  .links-footer {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    column-gap: 2.5rem;
    row-gap: 0.9rem;
    margin: 1.25rem 1rem 0;
    padding-top: 1.25rem;
  }
}

/* === MEDIA QUERIES min-width === */

/* BREAKPOINT: ab 1101px */
@media (min-width: 1101px) {
  .scroll-arrow {
    display: none !important;
  }
}

/* === MEDIA QUERIES max-height === */

/* BREAKPOINT: ab 700px */
@media (max-height: 700px) {
  /* --- PROFILE.HTML --- */
  #settings-content,
  #addChildDiv {
    top: 5%;
    transform: translate(-50%, 0) scale(0.7);
  }
  #settings-content.show,
  #addChildDiv.show {
    transform: translate(-50%, 0) scale(1);
  }
}

/* OTHERS */

/* Scroll Arrow Styles */

.scroll-arrow {
  width: 50px;
  height: 50px;
  border: 2px solid #fff; /* Kreis-Farbe */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 4rem auto;
  transition: all 0.3s ease;
}

.scroll-arrow span {
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-top: -5px;
}

.scroll-arrow:hover {
  background-color: #333;
}

.scroll-arrow:hover span {
  border-color: #fff;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.scroll-arrow {
  animation: bounce 7s infinite;
}

/* Errro-messages */

.error-message {
  color: red;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
}

.error-message h4 {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.error-message ul {
  margin: 0;
}

/* ===== Absenden-Buttons (Support + Bild senden): Icon + weicher Verlaufs-Wechsel =====
   Ein linear-gradient kann per transition nicht animiert werden -> wir blenden
   einen zweiten Verlauf per Pseudo-Element (::before) über Opacity weich ein. */
.support-submit-button,
.submit-galerie-img-submit-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #197571 0%, #1a9a92 100%);
  color: #fff;
}
.support-submit-button::before,
.submit-galerie-img-submit-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a9a92 0%, #20b2aa 100%);
  opacity: 0;
  transition: opacity 320ms ease;
}
.support-submit-button:hover::before,
.submit-galerie-img-submit-button:hover::before {
  opacity: 1;
}
/* Basis-Verlauf bleibt beim Hovern gleich -> nur das Pseudo blendet über (kein Sprung).
   Kein Vergrößern/Anheben mehr -> nur der Farbwechsel. */
.support-submit-button:hover,
.submit-galerie-img-submit-button:hover {
  background: linear-gradient(135deg, #197571 0%, #1a9a92 100%);
  transform: none;
  scale: 1;
  box-shadow: 0 8px 22px rgba(27, 88, 78, 0.22);
}
/* Inhalt (Icon + Text) über dem Pseudo-Element halten */
.support-submit-button span,
.submit-galerie-img-submit-button span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.support-submit-button svg,
.submit-galerie-img-submit-button svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

/* Sanfter Übergang beim Theme-Wechsel (siehe theme.js / View Transitions):
   die ganze Seite wird kurz weich übergeblendet statt hart umzuspringen. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: ease;
}

/* Theme-Switch im Mobile-Menü (mittig) */
.mobile-theme-li {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0;
  list-style: none;
}

/* Untere Zeile im Profil-Dropdown: Theme-Switch links, Abmelden-Kreis rechts */
.dropdown-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem;
}
/* Abmelden als runder roter Icon-Button (überschreibt die a-Regel des Dropdowns) */
.dropdown-bottom-row .logout-circle-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 72, 77, 0.15);
  color: #ff5a5f;
  transition: background 200ms ease;
}
.dropdown-bottom-row .logout-circle-btn:hover {
  background: rgba(229, 72, 77, 0.3);
}
.dropdown-bottom-row .logout-circle-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}
/* Theme-Switch im Profil-Dropdown (Light links / Dark rechts, Glass-Knopf gleitet) */
.theme-switch {
  position: relative;
  display: inline-flex;
  width: 92px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--nav-border);
  cursor: pointer;
}
.theme-switch-option {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 200ms ease;
}
/* --- "beta"-Abzeichen am Light-Mode-Schalter -------------------------
   Der Light Mode ist noch nicht fertig; das Abzeichen sagt das, bevor
   jemand umschaltet und sich wundert. Sitzt oben rechts an der Sonne.

   position: absolute + der Schalter hat position: relative -> das
   Abzeichen haengt AUSSERHALB des Icons und schiebt es nicht zur Seite
   (sonst waeren Sonne und Mond nicht mehr gleich breit).
   pointer-events: none -> Klicks gehen durch, der Schalter bleibt
   auf ganzer Flaeche bedienbar. */
.beta-badge {
  position: absolute;
  /* Links oben, nicht rechts: Die Sonne ist die LINKE Haelfte des Schalters —
     rechts angeschlagen landete das Abzeichen in der Mitte und sah aus, als
     gehoerte es zu beiden Optionen. */
  top: -0.3rem;
  left: -0.4rem;
  pointer-events: none;
  /* Schrift war mit 0.45rem (~7px) kaum zu entziffern. Groesser wird nur der
     TEXT — die orange Pille soll gleich klein bleiben, sonst erschlaegt sie das
     Sonnen-Icon darunter. Das engere line-height und padding fangen die
     groessere Schrift wieder auf: 0.6*1.15 + 2*0.02 ergibt exakt dieselbe
     Hoehe wie vorher 0.45*1.4 + 2*0.05 (0.73rem). Nur in der Breite kommen
     ~4px dazu, die schluckt der Schalter. */
  padding: 0.02rem 0.25rem;
  border-radius: 999px;
  background: var(--cta-warm);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.theme-switch-option svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
/* aktive Seite hervorheben */
html:not([data-theme="dark"]) .theme-switch-option:first-child,
html[data-theme="dark"] .theme-switch-option:last-child {
  opacity: 1;
}
/* gleitender Glass-Knopf */
.theme-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
html[data-theme="dark"] .theme-switch-knob {
  transform: translateX(100%);
}

/* Schwebender Theme-Switch unten links (nur ausgeloggt sichtbar) */
.theme-switch-floating {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 50;
}

/* --- Projekte-Kachel: "zukuenftig"-Label oben-links --- */
.projects-div a {
  position: relative;
}
.projects-div a .proj-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.6rem;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  line-height: 1;
}

/* --- Datei-Upload-Feld (Support / Galerie / Feedback) --- */
.file-input-hidden {
  display: none;
}
.file-drop {
  gap: 0.2rem;
  margin-top: 0.5rem;
  padding: 1.4rem;
  border: 2px dashed #b7bdca;
  border-radius: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.file-drop:hover,
.file-drop.dragover {
  border-color: #7c5cff;
  background: rgba(124, 92, 255, 0.1);
}
.file-drop-text {
  font-weight: 600;
}
.file-drop small {
  opacity: 0.65;
}

/* Vorschau-Raster (Support / Feedback) */
.file-preview-grid {
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.file-preview-item {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid #cbd2dd;
  background: #000;
}
.file-preview-item img,
.file-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Entfernen-Button (Basis = Support/Feedback 24px; Galerie etwas groesser) */
.file-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-remove svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}
.file-remove:hover {
  background: #e5484d;
}
#galerie-img-remove {
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
}

.file-error {
  display: none;
  margin-top: 0.6rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: #611a15;
  background: #fdecea;
  border: 1px solid #f5c6c3;
  border-radius: 0.5rem;
}

/* --- Support-Formular (Meldungen) --- */
.support-msg {
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}
.support-msg-ok {
  background: #e7f6ec;
  color: #1e4620;
  border: 1px solid #b7dfc2;
}
.support-msg-err {
  background: #fdecea;
  color: #611a15;
  border: 1px solid #f5c6c3;
}
.support-msg-err ul {
  margin: 0;
  padding-left: 1.2rem;
}
.support-content-form .error-message {
  display: none;
}
.support-screenshots-div {
  margin: 1rem 0;
}

/* --- Galerie-Bild-Upload (Meldungen) --- */
.msg-ok {
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
  background: #e7f6ec;
  color: #1e4620;
  border: 1px solid #b7dfc2;
}
.msg-err {
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
  background: #fdecea;
  color: #611a15;
  border: 1px solid #f5c6c3;
}
.msg-err ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* --- Whitelist-Formular (Meldungen + Hinweis) --- */
.whitelist-msg {
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
  max-width: 40rem;
  box-sizing: border-box;
}
.whitelist-msg-ok {
  background: #e7f6ec;
  color: #1e4620;
  border: 1px solid #b7dfc2;
}
.whitelist-msg-err {
  background: #fdecea;
  color: #611a15;
  border: 1px solid #f5c6c3;
}
.whitelist-msg-err ul {
  margin: 0;
  padding-left: 1.2rem;
}
.whitelist-form-minecraft-name-div .field-hint,
.whitelist-form-tel-div .field-hint {
  font-size: 0.9rem;
  margin-top: 0.45rem;
}
.whitelist-form-tel-div .field-hint {
  color: lightgray;
}

/* Telefon: Ländervorwahl per Dropdown + Nummer als EIN zusammenhängendes
   Glas-Feld. Keine führende 0; die Vorwahl (+49, +41, …) kommt aus dem Select. */
.tel-input-group {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.tel-input-group:focus-within {
  border-color: var(--accent);
}
.tel-plus {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.1rem 0.5rem 0.6rem;
  font-size: 1.2rem;
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
}
.whitelist-form-div .tel-prefix-input {
  flex: 0 0 3rem;
  width: 3rem;
  min-width: 0;
  padding-left: 0.15rem;
  text-align: left;
  background: transparent;
  border: none;
  border-right: 1px solid var(--nav-border);
  box-shadow: none;
}
.whitelist-form-div .tel-number-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* --- Feedback-Formular (Meldungen + Senden-Button) --- */
.fb-msg {
  border-radius: 0.6rem;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}
.fb-msg-ok {
  background: #e7f6ec;
  color: #1e4620;
  border: 1px solid #b7dfc2;
}
.fb-msg-err {
  background: #fdecea;
  color: #611a15;
  border: 1px solid #f5c6c3;
}
.fb-msg-err ul {
  margin: 0;
  padding-left: 1.2rem;
}
.feedback-form-submit-button {
  color: #fff;
  display: inline-flex;
}
.feedback-form-submit-button svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

/* =====================================================================
   EINSTELLUNGS-POPUP (Profil): Look vom Admin-Popup übernommen.
   Der Dialog-Hintergrund ist dunkel/durchscheinend – darauf brauchen die
   Felder hellere Flächen + kräftigere Ränder, sonst "verschwinden" sie.
   ===================================================================== */

/* Anzeige-Felder (Benutzername / E-Mail / Passwort) heben sich jetzt klar
   vom dunklen Overlay ab – in beiden Themes. */
.settings-popup .profile-infos-name,
.settings-popup .profile-infos-email,
.settings-popup .profile-infos-password {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
}

/* Echte Eingabefelder im Popup – ohne Checkbox/Radio, die einen eigenen
   Look bekommen. */
.dialog-popup-style-1 input:not([type="checkbox"]):not([type="radio"]),
.dialog-popup-style-1 select,
.dialog-popup-style-1 textarea {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.dialog-popup-style-1 input:not([type="checkbox"]):not([type="radio"]):focus,
.dialog-popup-style-1 select:focus,
.dialog-popup-style-1 textarea:focus {
  border-color: var(--accent) !important;
  outline: none;
}

/* ============================================================
   SCHALTER IM EINSTELLUNGS-POPUP
   (Zwei-Faktor-Anmeldung, Newsletter)

   Der Schalter selbst ist derselbe wie im Dashboard (.toggle mit .track,
   siehe admin-style.css) — gleiche Maße, gleiche Bewegung, damit sich beide
   Bereiche gleich anfühlen. Ein Unterschied: Im Dashboard schaltet man damit
   Sperren EIN, dort ist "an" deshalb rot. Hier bedeutet "an" etwas Gutes
   (Schutz aktiv, Newsletter abonniert) — also die Akzentfarbe.
   ============================================================ */
.toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex: 0 0 auto;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle .track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--toggle-off);
  transition: background 0.18s ease;
}
.toggle .track::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.toggle input:checked + .track {
  background: var(--accent);
}
.toggle input:checked + .track::before {
  transform: translateX(24px);
}
/* Tastatur-Bedienung: der echte Haken ist unsichtbar, also muss die Schiene
   den Fokus zeigen — sonst weiß man beim Durchtabben nicht, wo man ist. */
.toggle input:focus-visible + .track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Ein Schalter-Block: Überschrift, Schalter+Text, Meldung darunter */
.settings-switch-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.settings-switch-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
}
/* Name des Schalters, direkt neben dem Schalter */
.settings-switch-name {
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
/* Über welchen Weg das läuft — rechtsbündig ans Zeilenende geschoben. */
.settings-switch-channel {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.75;
  white-space: nowrap;
}
.settings-switch-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
}
.settings-switch-text strong {
  font-size: 0.95rem;
  line-height: 1.3;
}
.settings-switch-text small {
  font-size: 0.82rem;
  opacity: 0.75;
  line-height: 1.4;
}

/* Passwort-Rückfrage beim Ausschalten der Zwei-Faktor-Anmeldung */
.settings-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  /* eingerückt auf Höhe des Textes neben dem Schalter */
  padding-left: calc(52px + 0.7rem);
  margin-top: 0.2rem;
}
/* MUSS nach der display-Regel stehen: Ein `display` aus dem Autoren-CSS
   überstimmt sonst das eingebaute `hidden` des Browsers, und der Kasten wäre
   immer sichtbar — auch wenn gar nichts zu bestätigen ist. */
.settings-confirm[hidden] {
  display: none;
}
.settings-confirm label {
  font-size: 0.82rem;
  opacity: 0.85;
}
.settings-confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.settings-confirm-row input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--nav-border);
  background: var(--option-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.settings-confirm-row input:focus {
  border-color: var(--accent);
  outline: none;
}
.settings-confirm-ok,
.settings-confirm-cancel {
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--nav-border);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.settings-confirm-ok:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.settings-confirm-cancel:hover {
  background: rgba(127, 127, 127, 0.12);
}

@media (max-width: 480px) {
  /* Auf schmalen Schirmen bringt die Einrückung nichts — sie nimmt nur Platz. */
  .settings-confirm {
    padding-left: 0;
  }
}

.newsletter-status {
  font-size: 0.85rem;
  color: #7ee0a1;
  /* unter dem Text, bündig zur Beschriftung (Schalter-Breite + Abstand) */
  margin-left: calc(52px + 0.7rem);
  min-height: 1rem;
}
@media (max-width: 480px) {
  .newsletter-status {
    margin-left: 0;
  }
}

/* --- Buttons im Popup: einheitlicher & etwas hübscher --- */
.profile-logout-all-devices-div form {
  margin: 0;
}
.profile-logout-all-devices-button,
.profile-delete-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.profile-logout-all-devices-button-icon,
.profile-delete-account-button-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  flex-shrink: 0;
}
.profile-logout-all-devices-button:hover,
.profile-delete-account-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
/* Logout-Button: ruhiger Glas-Look statt Pink; Icon + Text weiss */
.profile-logout-all-devices-button {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.profile-logout-all-devices-button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent);
  color: #fff;
}
/* Löschen-Button: auf dem dunklen Overlay ein kräftigeres, gut lesbares Rot */
.profile-delete-account-button {
  background: transparent;
  color: #ff6b7a;
  border: 2px solid #ff6b7a !important;
}
.profile-delete-account-button:hover {
  background: #e5484d;
  color: #fff;
  border-color: #e5484d !important;
}

/* --- Nur für Screenreader ---
   Text, der vorgelesen, aber nicht angezeigt wird. Gab es im Projekt noch
   nicht; gebraucht beim Minecraft-Chip weiter unten: Der pixelige Kopf sagt
   einem SEHENDEN sofort "Minecraft", einem Screenreader aber gar nichts —
   der läse sonst nur "Flinkihunta" ohne jeden Zusammenhang.

   Warum dieses umständliche clip-path/1px-Konstrukt und nicht display:none?
   Weil display:none und visibility:hidden den Text auch für Screenreader
   entfernen. Das hier nimmt ihn nur aus dem Bild. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Minecraft-Namens-Chip (Über uns) ---
   Steht neben dem echten Namen statt in Klammern dahinter. */
.intro-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Auf schmalen Handys rutscht der Chip unter den Namen statt ihn zu
     quetschen. */
  flex-wrap: wrap;
}
/* Das h3 behält bewusst seine Standard-Abstände. Die Seite hat KEINEN
   Überschriften-Reset — der Abstand zwischen Name und Absatz kommt allein von
   diesen Browser-Vorgaben. Ein margin:0 hier würde die Karten enger machen —
   eine Layout-Änderung, die diese Regel nicht treffen soll. Sie
   sind oben und unten gleich groß, also sitzt der Chip trotzdem mittig zum
   Namen. */

.mc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Links weniger Luft als rechts: Der Kopf ist ein randvolles Quadrat, der
     Text nicht — gleiche Werte sähen links zu luftig aus. */
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  border: 1px solid var(--nav-border);
  /* Abgerundetes Rechteck statt Pille (999px). Zwei Gründe, beide am
     Screenshot gesehen: Bei einer Pille ist der Radius die halbe Höhe, und
     diese Rundung schnitt links unten in den quadratischen Kopf. Und ein
     eckiger Rahmen passt schlicht besser zu Minecraft — dieselben 0.4–0.5rem
     nutzt auch .mc-check-status .mc-head im Whitelist-Formular. */
  border-radius: 0.5rem;
  background: var(--nav-bg-2);
  /* Fira Code ist wegen der Befehle ohnehin geladen — kostet hier also nichts
     extra und trägt dieselbe "das ist aus dem Spiel"-Anmutung. */
  font-family: "Fira Code", ui-monospace, "Consolas", monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
}
/* Zwei Klassen (0,2,0) statt einer — das ist hier kein Zufall, sondern nötig:
   Weiter oben steht ".introduction-div img { max-width: 10rem; width: 100% }"
   für die großen Profilbilder. Diese Regel hat Spezifität (0,1,1) und trifft
   auch diesen Kopf, weil er im selben Container sitzt. Mit nur ".mc-tag-head"
   (0,1,0) verlöre sie sich dagegen — und der Kopf wurde 160px groß und
   sprengte den Chip. (0,2,0) schlägt (0,1,1). */
.mc-tag .mc-tag-head {
  /* 24px ist kein beliebiger Wert. Das Gesicht sind 8x8 Klötzchen, also muss
     die ANZEIGEGRÖSSE durch 8 teilbar sein, sonst landen die Klötzchen auf
     halben Pixeln und werden ungleichmäßig — bei 20px waren es 2,5px pro
     Klötzchen, im ersten Screenshot gut an den schiefen Augen zu sehen.
     24/8 = 3 saubere Pixel.
     Die Datei liegt passend dazu als 48x48 vor: auf normalen Bildschirmen
     exakt 2:1 verkleinert, auf 2x-Displays (24 CSS-px = 48 Geräte-px) sogar
     1:1 gezeichnet. Änderst du die Größe hier, hol den Kopf im doppelten Wert
     neu — der genaue Befehl steht bei mcTag() in include/functions.php.
     Dort unbedingt /helm/ nehmen und nicht /avatar/, sonst fehlt die
     Overlay-Ebene des Skins. */
  width: 24px;
  height: 24px;
  /* Kommt ebenfalls von der Profilbild-Regel und geht diesen Kopf nichts an. */
  max-width: none;
  border-radius: 0.2rem;
  /* DER entscheidende Wert: Ohne das glättet der Browser die Klötzchen zu
     Matsch. Mit pixelated bleiben sie scharf — genau das macht ihn als
     Minecraft-Kopf erkennbar. Gleiche Behandlung wie .mc-check-status
     .mc-head im Whitelist-Formular. */
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* Wiki-Kacheln „steinig" von oben einklappen (nur Handy ≤660px, nur Wiki).
   Sanftes, gestaffeltes Einklappen von oben (cubic-bezier im .wiki-selector-link
   oben lässt es weich ausklingen). */
@keyframes wikiDropIn {
  from {
    opacity: 0;
    transform: translateY(-1.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bewegungs-empfindlich (wichtig bei dieser Zielgruppe): kein Einklappen. */
@media (prefers-reduced-motion: reduce) {
  .wiki-selector-link {
    animation: none;
  }
}

/* Pflichtfeld-Markierung: das "*" in Labels hell rosarot hervorheben. */
.req {
  color: #ff6f91;
  font-weight: 600;
}