/* ===================================================================
   perfus.io – gemeinsame Grundlage aller Seiten.
   Farben stehen ausschliesslich hier; eine Seite waehlt ueber
   <html data-theme="dark"> nur aus, sie definiert nie eigene Werte.
   =================================================================== */

:root{
  --bg:#d5d2c8;      /* Grund, warmes Grau-Weiss */
  --ink:#14140f;     /* Schrift                  */
  --ink2:#5c5a50;    /* Sekundaerschrift         */
  --line:#2a2a22;    /* Rahmen, Linien           */
  --locked:#aeaba2;  /* Gesperrtes, Zurueckhaltendes */
  --field:#f5f4f0;   /* Eingabeflaeche           */
  --accent:#A970AD;  /* Lila aus dem Logo        */
  --scan:rgba(0,0,0,.028);
}
[data-theme="dark"]{
  --bg:#0c0e14; --ink:#e8eaed; --ink2:#7d8189;
  --line:#c8cbd0; --locked:#3a3f48; --field:#161a22;
  --accent:#c78ad0; --scan:rgba(255,255,255,.030);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  font-size:13px; line-height:1.5;
  -webkit-font-smoothing:none; font-smooth:never;
}
body:focus,[tabindex]:focus{outline:none}

/* Zentriertes Grundlayout – Startseite und Hauptmenue */
body.centered{
  display:flex; align-items:center; justify-content:center;
  padding:32px 22px 48px;
}
/* Bereichsseiten: Leiste oben, Inhalt darunter */
body.paged{display:flex; flex-direction:column; min-height:100%}

/* CRT-Anmutung, dreht sich mit der Darstellung */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  background:repeating-linear-gradient(to bottom,var(--scan) 0 1px,transparent 1px 3px);
}

.screen{width:100%; max-width:560px; position:relative; z-index:1}

/* ---------- Kopf: Schriftzug links, Logo rechts ---------- */
.head{display:flex; align-items:baseline; justify-content:space-between; gap:20px}
.head-txt{min-width:0}
h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(20px,5.6vw,29px); line-height:1;
  margin:0; color:var(--ink); white-space:nowrap;
}
.logo{
  cursor:pointer; width:clamp(158px,38vw,238px); height:auto; flex-shrink:0;
  transform:translateY(21.9%);      /* Balken-Grundlinie auf die Schrift */
}
.sub{font-size:11.5px; color:var(--ink2); letter-spacing:.07em; margin:7px 0 0 8px}

/* Blinkender Block – Schreibmarke und Auswahlpfeile */
.caret{
  display:inline-block; width:7px; height:12px; background:var(--accent);
  vertical-align:-2px; margin-left:5px; animation:blink 1.05s step-end infinite;
}
@keyframes blink{50%{opacity:0}}

.sig{
  position:fixed; right:12px; bottom:10px; z-index:10;
  font-size:10px; color:var(--ink2); letter-spacing:.09em;
}

/* ===================================================================
   Handy. Der Kopf ist der kritische Teil: der Schriftzug bricht nicht
   um, deshalb muessen Schrift und Logo zusammen schmaler werden.
   =================================================================== */
@media (max-width:600px){
  /* Schriftzug und Logo bleiben nebeneinander, ruecken aber als Paar in die
     Mitte: nicht mehr an die Raender auseinandergezogen, sondern dicht
     beieinander. Die Balken stehen weiter auf der Schrift-Grundlinie. */
  body.centered{align-items:flex-start; padding:13vh 16px 44px}
  .screen{max-width:none}
  .head{justify-content:center; gap:10px}
  h1{font-size:clamp(15px,4.9vw,24px)}
  .sub{font-size:10.5px; letter-spacing:.05em; margin:7px 0 0 5px}
  .logo{width:clamp(102px,32vw,175px)}
  .caret{width:6px; height:10px; margin-left:4px}
  .sig{right:10px; bottom:8px; font-size:9px}
}