/* =====================================================================
   zlobota.de – Startseite
   Grundlayout + Kachel-Baukasten. Das Aussehen jeder Kachel steckt in
   kacheln/<name>.css und wird nur über die --k-Variablen gesteuert.
   ===================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --seite:     #17151f;
  --seite-ink: #f1edf7;
  --seite-dim: #a7a1b6;

  /* Verlauf aus den Akzenten der drei Seiten: Bordfunk → Games → Garten */
  --verlauf: linear-gradient(100deg, #f0a73c 0%, #ff3d9a 36%, #c05bff 58%, #3dc8d6 80%, #7fd35a 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; height: 100%; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--seite);
  color: var(--seite-ink);
  font: 400 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding:
    max(28px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  position: relative;
  overflow-x: hidden;
}

/* Weiches Leuchten hinter dem Kopf, in den Farben der drei Welten */
body::before {
  content: "";
  position: absolute;
  inset: -20vh 0 auto;
  height: 70vh;
  background:
    radial-gradient(40% 60% at 18% 40%, #227a8c55, transparent 70%),
    radial-gradient(35% 55% at 55% 30%, #c05bff40, transparent 70%),
    radial-gradient(35% 55% at 88% 45%, #4a9a4240, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* ---------- Kopf ---------- */
.kopf {
  max-width: 1120px;
  margin: 0 auto clamp(28px, 6vw, 56px);
  padding-top: clamp(8px, 4vw, 40px);
}
.kopf__titel {
  display: inline-block; /* Verlauf nur so breit wie der Schriftzug */
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.045em;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em; /* Unterlängen nicht abschneiden */
}
.kopf__text {
  margin: 10px 0 0;
  color: var(--seite-dim);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
}

/* ---------- Kachel-Raster ---------- */
.kacheln {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 2.4vw, 24px);
}

/* ---------- Kachel-Baukasten ----------
   Jede Kachel-Datei setzt nur diese Variablen (und darf Extras ergänzen):
     --k-bg           Hintergrund (Farbe, Verlauf, Muster)
     --k-ink          Schriftfarbe
     --k-dim          Zweitfarbe für den Beschreibungstext
     --k-akzent       Akzentfarbe (Fokusrahmen, Pfad)
     --k-rand         Rahmenfarbe
     --k-radius       Eckenradius
     --k-titel-font   Schrift des Titels
     --k-titel-gr     Titelgröße
     --k-titel-lauf   Laufweite des Titels
   -------------------------------------- */
.kachel {
  --k-bg: #2a2733;
  --k-ink: #fff;
  --k-dim: #ffffffaa;
  --k-akzent: #fff;
  --k-rand: transparent;
  --k-radius: 18px;
  --k-titel-font: inherit;
  --k-titel-gr: clamp(2.2rem, 5vw, 2.9rem);
  --k-titel-lauf: -.02em;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: clamp(260px, 52vw, 440px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--k-radius);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: inset 0 0 0 1px var(--k-rand);
  text-decoration: none;
  transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.kachel:hover { transform: translateY(-4px); }
.kachel:active { transform: translateY(-1px); }
.kachel:focus-visible {
  outline: 3px solid var(--k-akzent);
  outline-offset: 4px;
}

.kachel__bild {
  position: absolute;
  top: clamp(20px, 3vw, 28px);
  right: clamp(20px, 3vw, 28px);
  z-index: 1;
}

.kachel__titel {
  position: relative; z-index: 1;
  font-family: var(--k-titel-font);
  font-size: var(--k-titel-gr);
  letter-spacing: var(--k-titel-lauf);
  line-height: 1;
}
.kachel__text {
  position: relative; z-index: 1;
  color: var(--k-dim);
  max-width: 32ch;
}
.kachel__fuss {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 8px;
  font-size: .875rem;
}
.kachel__pfad { color: var(--k-akzent); font-weight: 600; }
.kachel__zugang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--k-dim);
}
.kachel__zugang::before {
  /* kleines Schloss, nimmt die Textfarbe an */
  content: "";
  width: 11px; height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2.5 5V3.6a3 3 0 0 1 6 0V5h.7c.7 0 1.3.6 1.3 1.3v5.4c0 .7-.6 1.3-1.3 1.3H1.8C1.1 13 .5 12.4.5 11.7V6.3C.5 5.6 1.1 5 1.8 5zm1.6 0h2.8V3.6a1.4 1.4 0 0 0-2.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2.5 5V3.6a3 3 0 0 1 6 0V5h.7c.7 0 1.3.6 1.3 1.3v5.4c0 .7-.6 1.3-1.3 1.3H1.8C1.1 13 .5 12.4.5 11.7V6.3C.5 5.6 1.1 5 1.8 5zm1.6 0h2.8V3.6a1.4 1.4 0 0 0-2.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .kachel { transition: none; }
  .kachel:hover, .kachel:active { transform: none; }
}