/* ===== MythosNetwork – Startseite ohne 3D-Welt =====
   Gilt nur für <body class="plain"> (index.html). Das Aussehen (Pixel-Schrift, Knöpfe, Karten, Symbole, Farben) kommt
   unverändert aus style.css; hier steht nur der Aufbau der Seite. Keine Scroll-Animationen, nichts wird eingeblendet. */

/* Feines Pixelraster im Hintergrund, damit die Seite nicht flach wirkt (Farbe aus dem jeweiligen Design) */
body.plain {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---- Start (kompakt, damit "Über uns" gleich sichtbar ist) ---- */
.hero-plain {
  /* füllt den ersten Bildschirm bis auf einen schmalen Streifen, damit der nächste Abschnitt nur angedeutet ist */
  display: flex; align-items: center;
  min-height: calc(100vh - 71px - 72px);
  min-height: calc(100svh - 71px - 72px);
  padding: 36px 0 44px;
  text-align: center;
  background: radial-gradient(ellipse 62% 70% at 50% 34%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
}
.hero-plain .container { width: 100%; }
.hero-plain .hero-logo-static { display: block; width: min(640px, 88%); height: auto; margin: 0 auto 24px; filter: drop-shadow(0 12px 40px var(--glow)); }
.hero-plain .hero-subtitle { margin-bottom: 30px; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.hero-plain .hero-actions { flex-direction: column; align-items: stretch; width: min(580px, 100%); margin: 0 auto; gap: 14px; }
.hero-plain .hero-actions .btn { width: 100%; padding: 19px 20px; font-size: 1.2rem; white-space: normal; }

/* Knopf "Entdecke Mythos Client": Minecraft-Redstone-Block als Hintergrund (Textur aus Minecraft 1.20.1).
   Zwei Lagen derselben Textur treiben sehr langsam in verschiedene Richtungen, die obere abdunkelnd: das wirkt wie
   zähflüssige Lava, bleibt aber ruhig. Die Wege sind Vielfache der Kachelgröße, darum gibt es keinen Sprung am Ende.
   "Weniger Bewegung" in den Systemeinstellungen schaltet die Bewegung ab (siehe style.css). */
.btn-client {
  isolation: isolate;
  color: #fff;
  text-shadow: 2px 2px 0 #3a0600;
  background-color: #d02010;
  background-image: url(images/redstone-block.png);
  background-size: 64px 64px;
  image-rendering: pixelated;
  border-color: rgba(255, 190, 170, 0.5);
  border-top-color: rgba(255, 210, 190, 0.75);
  border-left-color: rgba(255, 200, 180, 0.65);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 90, 30, 0.35), var(--hard);
  animation: redstone-drift-a 34s linear infinite;
}
.btn-client::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(images/redstone-block.png) 0 0 / 96px 96px;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
  opacity: 0.55;
  animation: redstone-drift-b 44s linear infinite;
}
.btn-client .btn-label { position: relative; z-index: 1; }
.btn-client:hover { filter: brightness(1.12) saturate(1.1); }
@keyframes redstone-drift-a { from { background-position: 0 0; } to { background-position: 128px 64px; } }
@keyframes redstone-drift-b { from { background-position: 0 0; } to { background-position: -192px 96px; } }

/* ---- Abschnitte ---- */
.sec { padding: clamp(34px, 4.5vw, 52px) 0; border-top: 3px solid var(--line); }
.sec-alt { background: var(--bg-2); }
.sec-head { margin-bottom: 20px; }
.sec-head .gui-tag { margin-bottom: 10px; }
.sec-title { margin-bottom: 12px; font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: 0.4px; word-spacing: -0.12em; overflow-wrap: break-word; color: var(--ink); }
.sec-lead { max-width: 720px; font-size: 1.05rem; color: var(--ink-2); }
.sec-sub { margin: 24px 0 12px; font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-2); }

.cards { display: grid; gap: 16px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Karten aus style.css, hier angepasst, damit Überschriften in der Pixel-Schrift in die Breite passen */
.cards .gui h3 { font-size: clamp(0.95rem, 1.25vw, 1.1rem); letter-spacing: 0.2px; }
.cards .gui-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 18px; }
.cards .gui-mini h3 { margin-bottom: 6px; font-size: clamp(0.7rem, 0.82vw, 0.85rem); letter-spacing: 0; word-spacing: -0.2em; overflow-wrap: normal; hyphens: none; }
.cards .gui-mini p { font-size: 0.9rem; line-height: 1.5; }
.cards .pill-list { gap: 6px; }
.cards .pill-list li { padding: 2px 8px; font-size: 0.72rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

@media (max-width: 1100px) {
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cards-3 { grid-template-columns: 1fr; }
  .cards .gui { padding: 20px; }
}
@media (max-width: 640px) {
  .cards-2, .cards-4 { grid-template-columns: 1fr; }
  .card-actions .btn { width: 100%; }
}