/* keimzelle.css — der erste Kontakt.
   Alles hier ist Vordergrund über der laufenden Welt. Die Welt selbst
   bleibt sichtbar: sie ist der Inhalt, das hier ist nur der Rahmen.
   Darum keine Tafel, kein Fenster, kein Kasten in der Mitte. */


/* ---- Eigene Farben, unabhaengig vom Theme ----
   John, 2026-07-31: "auf dem dunklen Zeug kann man ein bisschen
   schlecht lesen, Kontrast erhoehen."

   Die Ursache war ein Denkfehler von mir: dieser Schirm hat einen FEST
   dunklen Hintergrund, holt sich die Textfarben aber aus dem Theme. Im
   Pergament-Theme ist --txt dunkelbraun (#33291a), weil es dort auf
   hellem Papier steht. Dunkelbraun auf Dunkelblau ist genau das, was
   auf dem Bild zu sehen war.

   Darum definiert dieser Container seine Farben selbst. Wer einen
   festen Grund setzt, muss auch die Schrift dazu setzen. */
.keim{
  --k-txt:#f4f7fd; --k-les:#dbe5f6; --k-mut:#9db0d0;
  --k-gold:#ffd83d; --k-cyan:#5ff7ff; --k-grund:rgba(3,7,13,.9);
  --k-rand:rgba(120,150,200,.35);
  position:fixed; inset:0; z-index:64; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:inherit;
}
.keim[hidden]{display:none}

/* Solange der Einstieg läuft, ist die Oberfläche weg. Nicht gelöscht,
   nur nicht da: sie fährt am Ende wieder ein, und dann sieht man, dass
   sie die ganze Zeit dort war.

   Ausgenommen ist der Steckbrief (#agent). Er ist im Einstieg kein
   Bedienelement, sondern der Inhalt: im Schritt "Wer lebt da?" ist er
   genau das, worauf gezeigt wird. Darum werden die Geschwister einzeln
   ausgeblendet statt #hud als Ganzes, sonst könnte er sich aus einem
   durchsichtigen Elternteil nicht mehr herausholen. */
body[data-keim="an"] #hud > *:not(#agent):not(#agentpanel):not(.keim){
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
body[data-keim="an"] #glasrand{ opacity:.25 }

/* ---- Die Zeit, oben ---- */
.keim-uhr{
  pointer-events:none; text-align:center; padding:min(7vh,64px) 20px 0;
  text-shadow:0 2px 24px rgba(0,0,0,.85);
}
.keim-jahrwort{
  display:block; font-size:11px; letter-spacing:6px; text-transform:uppercase;
  color:var(--k-cyan); opacity:1; font-weight:600;
}
.keim-jahr{
  display:block; font-size:clamp(52px,9vw,132px); line-height:1;
  font-weight:300; letter-spacing:-2px; color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 30px rgba(0,0,0,.95), 0 0 60px rgba(0,0,0,.7);
}
.keim-bev{
  display:block; margin-top:8px; font-size:13px; letter-spacing:2px;
  color:var(--k-txt); opacity:1; font-weight:500;
  /* Steht mitten im hellen Kreis: braucht einen eigenen dunklen
     Ruecken, sonst ist es hell auf hell. */
  background:rgba(3,7,13,.72); display:inline-block; padding:3px 12px; border-radius:99px;
}

/* ---- Die Stimmen und der eine Knopf, unten ---- */
.keim-unten{
  pointer-events:none; padding:0 20px min(6vh,48px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.keim-stimmen{
  width:min(720px,92vw); display:flex; flex-direction:column; gap:9px;
}
.keim-stimme{
  margin:0; display:flex; gap:12px; align-items:baseline;
  background:var(--k-grund); border:1px solid var(--k-rand);
  border-radius:10px; padding:11px 15px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:keimRein .45s ease both;
}
.keim-stimme i{
  flex:0 0 auto; font-style:normal; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; padding-top:2px; font-weight:700;
}
.keim-stimme span{ font-size:14px; line-height:1.55; color:var(--k-txt) }
.keim-john i{ color:var(--k-gold) }
.keim-john{ border-left:3px solid var(--k-gold) }
.keim-agent i{ color:var(--k-cyan) }
.keim-agent{ border-left:3px solid var(--k-cyan); animation-delay:.16s }

@keyframes keimRein{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:none }
}

/* Eigener dunkler Grund unter der Leiste. Ohne ihn steht die
   Überspringen-Zeile auf hellem Gras und ist nicht zu lesen: die Welt
   dahinter ändert ihre Farbe, der Text nicht. */
.keim-leiste{
  pointer-events:auto; display:flex; align-items:center; gap:16px;
  background:var(--k-grund); border:1px solid var(--k-rand);
  border-radius:99px; padding:8px 14px 8px 8px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.keim-knopf{
  font-family:inherit; cursor:pointer; border:0; border-radius:99px;
  padding:14px 34px; font-size:15px; font-weight:700; letter-spacing:.4px;
  background:var(--k-gold); color:#141824;
  box-shadow:0 6px 30px rgba(255,216,61,.28);
}
.keim-knopf:hover{ filter:brightness(1.08) }
.keim-knopf.frisch{ animation:keimPuls 1.9s ease-in-out 2 }
@keyframes keimPuls{
  0%,100%{ box-shadow:0 6px 30px rgba(255,216,61,.28) }
  50%{ box-shadow:0 6px 44px rgba(255,216,61,.7) }
}
.keim-weg{
  font-family:inherit; cursor:pointer; background:none; border:0;
  color:var(--k-les); font-size:12px; text-decoration:underline;
  text-underline-offset:3px;
}
.keim-weg:hover{ color:#fff }

/* Wieviel liegt noch vor mir. Ein Tutorial ohne diese Zeile fühlt sich
   an wie ein Formular ohne Ende. */
.keim-punkte{ display:flex; gap:5px }
.keim-punkte i{
  width:6px; height:6px; border-radius:99px; background:rgba(160,180,215,.35);
  transition:background .3s ease, transform .3s ease;
}
.keim-punkte i.durch{ background:#9db0d0 }
.keim-punkte i.an{ background:var(--k-gold); transform:scale(1.5) }

@media (max-width:640px){
  .keim-uhr{ padding-top:max(18px,env(safe-area-inset-top)) }
  .keim-jahr{ font-size:clamp(40px,13vw,72px) }
  .keim-stimme span{ font-size:12px }
  .keim-knopf{ padding:13px 26px; font-size:14px }
  .keim-leiste{ flex-wrap:wrap; justify-content:center; gap:10px }
}