/*
 * Grundlagen der MimicSMP-Startseite.
 *
 * Das Layout steckt fast vollstaendig in style-Attributen — so kam der
 * Entwurf aus Claude Design, und es eins zu eins zu uebernehmen ist
 * sicherer, als es nachtraeglich in Klassen zu uebersetzen. Hier steht
 * nur, was sich nicht inline ausdruecken laesst: Schriften, globale
 * Grundwerte und die zwei Muster-Variablen.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Feines Rauschen ueber der ganzen Seite — nimmt den Flaechen das
     Digitale, ohne dass man es bewusst wahrnimmt. */
  --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.89 0 0 0 0 0.84 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");

  /* Schraffur hinter einzelnen Abschnitten */
  --hatch: repeating-linear-gradient(45deg, rgba(201,128,63,0.07) 0 1px, transparent 1px 26px),
           repeating-linear-gradient(-45deg, rgba(201,128,63,0.07) 0 1px, transparent 1px 26px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #0d0f0b;
  color: #ece6d6;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #c9803f; text-decoration: none; }
a:hover { color: #e2a25b; }

button { font: inherit; }

:focus-visible { outline: 2px solid #c9803f; outline-offset: 3px; }

img { max-width: 100%; }

/* Tabellen und breite Bloecke duerfen scrollen, die Seite selbst nie. */
body { overflow-x: hidden; }

/*
 * Auf schmalen Geraeten bricht das zweispaltige Raster des Entwurfs
 * sonst nicht um: Die Spaltenangaben stehen in style-Attributen und
 * haben damit Vorrang vor jeder Klasse. !important ist hier kein
 * Pfusch, sondern die einzige Moeglichkeit, sie zu ueberstimmen.
 */
@media (max-width: 860px) {
  section[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section#hero[style*="grid-template-columns"] {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  /* Drei Kacheln nebeneinander werden auf dem Handy zu schmal. */
  [data-statistik] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Die feste Kapitelleiste am linken Rand hat auf dem Handy keinen
     Platz und wuerde ueber dem Text liegen. */
  [data-kapitelleiste] { display: none !important; }
}


/* ===================================================================
   Handy: Kopfleiste, Countdown, Kapitel-Pille
   ===================================================================

   Gemessen auf 375 px, nicht geschaetzt:

     Kopfleiste       564 px breit bei 375 px Platz
     Countdown        382 px bei 323 px Platz
     Kapitel-Pille    lag mitten auf dem Fliesstext

   Die Kopfleiste war der ernste Fall. Sie ist fixiert, und der
   Seitencontainer schneidet waagerecht ab (overflow-x:hidden) — es gab
   also nicht einmal eine Bildlaufleiste, mit der man drankommt. Der
   Sprachumschalter war auf dem Handy schlicht weg, und der IP-Knopf
   halb abgeschnitten.

   Alle Masse stehen im Entwurf in style-Attributen. Deshalb hier
   ueberall !important — anders sind Inline-Angaben nicht zu
   ueberstimmen. Die Anker (.kopf-*, .cd-*) setzt bauen.js. */

/* Die Kurzform steckt immer im Text, ist aber normalerweise unsichtbar.
   So entscheidet die Breite und nicht JavaScript, was zu sehen ist —
   beim Laden springt dadurch nichts. */
.kopf-konto-kurz { display: none; }

@media (max-width: 640px) {
  .kopf { gap: 10px !important; padding: 14px 16px !important; }
  .kopf-marke { gap: 7px !important; }

  /* "· S3" ist auf dem Handy der erste verzichtbare Platzfresser:
     Die Season steht drei Zeilen weiter unten noch einmal. */
  .kopf-s3 { display: none !important; }

  .kopf-aktionen { gap: 8px !important; }

  /* Der IP-Knopf ist der groesste Brocken (149 px) und der einzige,
     den es doppelt gibt: "IP kopieren" steht gross im Kopfbereich und
     noch einmal ganz unten. Hier faellt also nichts weg, was es nicht
     woanders gaebe. */
  .kopf-ip { display: none !important; }

  .kopf-konto {
    padding: 8px 11px !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
    white-space: nowrap !important;
  }
  .kopf-konto-lang { display: none; }
  .kopf-konto-kurz { display: inline; }

  .kopf-sprache button {
    padding: 6px 10px !important;
    font-size: 9px !important;
  }

  /* Eine Zeile, vier gleiche Spalten. Ein Countdown, der 3+1 umbricht,
     sieht aus wie ein Fehler, auch wenn er rechnet. */
  .cd-reihe {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100%;
  }
  .cd-zelle {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding: 12px 4px !important;
  }
  .cd-zelle [data-cd] { font-size: 30px !important; }

}

/* Die schwebende Kapitel-Pille.
 *
 * Auf dem Rechner steht sie im leeren Raum neben dem zweispaltigen
 * Satz. Sobald das Raster einspaltig wird — und das tut es ab 860 px,
 * siehe oben — geht der Text von Rand zu Rand, und sie liegt darauf.
 *
 * Die Grenze ist deshalb dieselbe wie die des Rasters und nicht die
 * der Handy-Regeln: gemessen lag sie auf einem Tablett mit 768 px an
 * vier Stellen ueber dem Text, unter anderem ueber "Keine Kits" und
 * ueber der Zeile "Der Bliss Gem kommt dazu". */
@media (max-width: 860px) {
  .kapitel-pille { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Ohne JavaScript bleibt der Inhalt sichtbar — die Einblende-Effekte
   werden erst per Skript gesetzt, nicht hier. */


/* ===================================================================
   Gem-Detailansicht

   Ein Klick auf eine Gem-Karte zoomt auf diese Tafel, ein Klick
   daneben schliesst sie wieder. Die Zoom-Bewegung selbst macht
   JavaScript, weil sie von der Position der angeklickten Karte
   abhaengt und die vorher nicht bekannt ist.
   =================================================================== */

button[data-gem]:hover {
  transform: translateY(-2px);
}

.gem-ueberlagerung {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 9, 7, .82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}

.gem-ueberlagerung.ist-offen { opacity: 1; }

/* Ohne diese Zeile bleibt die Ueberlagerung trotz hidden liegen: Das
   display:flex oben ist staerker als der Standardwert, den das
   hidden-Attribut mitbringt. Sie waere dann unsichtbar, wuerde aber
   weiter jeden Klick auf der Seite abfangen. */
.gem-ueberlagerung[hidden] { display: none; }

.gem-tafel {
  position: relative;
  width: min(440px, 100%);
  background: #0d0f0b;
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  /* Dieselben abgeschraegten Kanten wie die Karten — nur kraeftiger,
     damit die Tafel wie ein herausgehobener Block wirkt. */
  border-top: 3px solid rgba(255, 255, 255, .2);
  border-left: 3px solid rgba(255, 255, 255, .2);
  border-right: 3px solid rgba(0, 0, 0, .6);
  border-bottom: 3px solid rgba(0, 0, 0, .6);
  transform-origin: center;
}

.gem-tafel:focus { outline: none; }

.gem-tafel .kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gem-tafel .bild {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(236, 230, 214, .14);
}

.gem-tafel .bild[hidden],
.gem-tafel .stein[hidden] { display: none; }

.gem-tafel .stein {
  width: 54px;
  height: 54px;
  display: block;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.gem-tafel .nr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(236, 230, 214, .32);
}

.gem-tafel .name {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 300;
  font-size: 42px;
  line-height: 1;
  color: #ece6d6;
}

.gem-tafel .rolle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c9803f;
}

.gem-tafel .text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(236, 230, 214, .72);
}

.gem-tafel .hinweis {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(236, 230, 214, .32);
}

@media (max-width: 480px) {
  .gem-tafel { padding: 26px 22px 22px; }
  .gem-tafel .name { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .gem-ueberlagerung { transition: none; }
}


/* =====================================================================
   Live-Bereich: Minecraft und Discord getrennt
   =====================================================================

   Vorher standen drei gleich aussehende Kacheln in einer Reihe:
   Discord-online, Discord-Mitglieder, Minecraft-Status. Das las sich
   als eine Aussage ueber den Minecraft-Server — "56 online, 149
   Mitglieder, Wartungsarbeiten" — obwohl die ersten zwei Zahlen von
   Discord kommen. Die Beschriftungen darunter waren 9px gross und
   sind dabei untergegangen.

   Jetzt zwei Bloecke mit je einer Marke darueber. Die Marke ist die
   eigentliche Korrektur; alles andere ist Beiwerk.

   .live-status, .ls-dot, .ls-label und .ls-players kommen aus
   style.css auf dem Server und werden hier NICHT neu definiert —
   nur dort angepasst, wo sie in diesem Zusammenhang stoeren. */

.live-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  border: 1px solid rgba(236, 230, 214, .12);
  background: #0d0f0b;
}

.live-marke {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c9803f;
}

/* .live-status bringt aus style.css margin:40px 0 8px mit — dort stand
   sie allein unter einer Ueberschrift, hier sitzt sie in einem Kasten
   mit eigenen Abstaenden. */
.live-block .live-status {
  margin: 0;
  align-self: flex-start;
}

.live-motd {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(236, 230, 214, .42);
}

/* Ohne Text keine leere Zeile: sonst klafft im Wartungsmodus eine
   Luecke, sobald der Server keinen MOTD schickt. */
.live-motd:empty { display: none; }

.live-zahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.live-zahl {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.live-zahl .wert {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 300;
  color: #ece6d6;
  overflow-wrap: anywhere;
}

.live-zahl .was {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(236, 230, 214, .42);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .live-zahl .wert { font-size: 34px; }
}


/* =====================================================================
   Serverstatus und Ankuendigungen
   =====================================================================

   Diese Klassen stehen bereits in style.css auf dem Server — die alte
   Seite hat sie benutzt, und sie sind gut. Die Startseite laedt aber
   nur start.css: sie kommt vollstaendig aus dem Entwurf und wuerde
   sich mit den globalen Regeln aus style.css beissen (fester Kopf,
   Rauschen, Abschnittsraster).

   Deshalb stehen sie hier noch einmal, mit ausgeschriebenen Farben
   statt Variablen. Doppelt gepflegt, ja — die Alternative waere, der
   Startseite ein zweites Stylesheet unterzuschieben, das ihr Layout
   anfasst. Wer sie aendert, aendert sie an beiden Stellen; dafuer
   steht dieser Absatz hier. */

/* --- Statuspunkt ----------------------------------------------------
   Die Farbe ist nie das einzige Signal. Die Beschriftung daneben sagt
   dasselbe in Worten, damit die Anzeige auch bei Farbfehlsichtigkeit
   eindeutig bleibt. */

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid rgba(236, 230, 214, .12);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(236, 230, 214, .62);
}

.live-status .ls-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(236, 230, 214, .32);
  flex-shrink: 0;
}

.live-status.is-online { color: #ece6d6; border-color: rgba(122, 168, 96, .4); }
.live-status.is-online .ls-dot { background: #7aa860; box-shadow: 0 0 0 4px rgba(122, 168, 96, .16); }

.live-status.is-maintenance { color: #ece6d6; border-color: rgba(212, 166, 74, .45); }
.live-status.is-maintenance .ls-dot { background: #d4a64a; box-shadow: 0 0 0 4px rgba(212, 166, 74, .16); }

.live-status.is-offline { border-color: rgba(180, 90, 70, .35); }
.live-status.is-offline .ls-dot { background: #b45a46; }

.live-status .ls-players:not(:empty)::before {
  content: "·";
  margin: 0 10px 0 4px;
  color: rgba(236, 230, 214, .32);
}


/* --- Ankuendigungen ------------------------------------------------- */

.ann-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ann-item {
  padding: 32px 0;
  border-top: 1px solid rgba(236, 230, 214, .12);
}

.ann-item:first-child { border-top: 0; padding-top: 0; }
.ann-item:last-child { border-bottom: 1px solid rgba(236, 230, 214, .12); }

.ann-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ann-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ann-author {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #e2a25b;
}

/* Schiebt die Zeit ans rechte Ende. Ohne das kleben Name und
   Zeitangabe aneinander — "Diegovor 5 Tagen". */
.ann-time {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: rgba(236, 230, 214, .32);
  white-space: nowrap;
}

.ann-body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(236, 230, 214, .62);
  overflow-wrap: anywhere;
}

.ann-empty {
  padding: 32px 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: rgba(236, 230, 214, .32);
}

.ann-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.ann-images img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 2px;
}

.ann-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ann-reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(236, 230, 214, .12);
  border-radius: 2px;
  font-size: 13px;
  line-height: 1;
}

.ann-reaction img { width: 16px; height: 16px; }

.ann-reaction-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(236, 230, 214, .32);
}


/* --- Discord-Formatierung im Ankuendigungstext -----------------------
   Diese Klassen erzeugt der Bot. Anderes HTML kommt nicht durch. */

.ann-body .d-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  color: #ece6d6;
  margin: 22px 0 8px;
  line-height: 1.25;
}
.ann-body h3.d-heading { font-size: 22px; }
.ann-body h4.d-heading { font-size: 19px; }
.ann-body h5.d-heading { font-size: 17px; }
.ann-body > .d-heading:first-child { margin-top: 0; }

.ann-body strong { color: #ece6d6; font-weight: 600; }

.ann-body .d-quote {
  margin: 14px 0;
  padding-left: 16px;
  border-left: 2px solid rgba(236, 230, 214, .12);
  color: rgba(236, 230, 214, .32);
}

.ann-body .d-link {
  color: #e2a25b;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ann-body .d-link:hover { color: #ece6d6; }

.ann-body .d-inline-code,
.ann-body .d-codeblock {
  font-family: 'JetBrains Mono', monospace;
  font-size: .86em;
  background: rgba(236, 230, 214, .06);
}

.ann-body .d-inline-code { padding: .14em .42em; border-radius: 2px; }

.ann-body .d-codeblock {
  display: block;
  padding: 16px 18px;
  margin: 16px 0;
  overflow-x: auto;
  border: 1px solid rgba(236, 230, 214, .12);
  border-radius: 2px;
}
.ann-body .d-codeblock code { background: none; padding: 0; }

/* Das Orange, das du meintest: Erwaehnungen wie im Discord hinterlegt. */
.ann-body .d-mention {
  padding: .08em .4em;
  border-radius: 2px;
  background: rgba(201, 128, 63, .16);
  color: #e2a25b;
  white-space: nowrap;
}

.ann-body .d-emoji {
  display: inline-block;
  vertical-align: -.22em;
  width: 1.25em;
  height: 1.25em;
}

.ann-body .d-spoiler {
  background: rgba(236, 230, 214, .12);
  color: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.ann-body .d-spoiler:hover,
.ann-body .d-spoiler:focus-within {
  color: rgba(236, 230, 214, .62);
  background: rgba(236, 230, 214, .06);
}

.ann-body .d-timestamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: .9em;
  color: rgba(236, 230, 214, .32);
}

@media (max-width: 640px) {
  .ann-item { padding: 24px 0; }
  .ann-body { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ann-body .d-spoiler { transition: none; }
}