/* tommypowerz.de — öffentliche Startseite.
 *
 * Farbwelt: der Einschaltbildschirm eines C64, aber abgedunkelt. Das Blau
 * #40318D ist das Original-Hintergrundblau, #7869C4 die Original-Schriftfarbe;
 * beide sind hier nach unten gezogen, damit die Seite dunkel bleibt und die
 * Schrift trotzdem trägt. Grün und Gelb stammen aus derselben Palette und
 * kommen genau einmal vor.
 *
 * Der Bootvorgang läuft ohne JavaScript, allein über CSS-Animationen. Fällt
 * das Stylesheet aus, steht trotzdem alles lesbar da.
 */

:root {
  --grund:   #0b0a1f;   /* abgedunkeltes C64-Blau */
  --rahmen:  #40318d;   /* C64-Hintergrundblau, im Original */
  --schrift: #a9a0e8;   /* C64-Hellblau, angehoben für dunklen Grund */
  --hell:    #e9e6ff;
  --signal:  #aaff66;   /* C64-Hellgrün, genau ein Einsatz: der Cursor */
  --gelb:    #eeee77;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { height: 100%; }

body.teaser {
  margin: 0;
  min-height: 100%;
  background: var(--grund);
  color: var(--schrift);
  font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  /* Waagerecht wird nichts gescrollt, senkrecht schon: bei sehr groß
     gestellter Schrift muss der Satz erreichbar bleiben. */
  overflow-x: hidden;
}

/* Die Röhre: Zeilenraster und Randabdunklung, beides sehr leise. Wird es
   lauter, kippt die Seite ins Kostüm. */
.roehre {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, .16) 0 1px,
      rgba(0, 0, 0, 0)   1px 3px),
    radial-gradient(120% 100% at 50% 45%,
      rgba(64, 49, 141, .10) 0%,
      rgba(0, 0, 0, 0)      45%,
      rgba(0, 0, 0, .55)   100%);
}

.schirm {
  position: relative;
  z-index: 1;
  width: min(46rem, 100%);
  /* Ohne das schrumpft ein Flex-Kind nicht unter die Wunschbreite seines
     Inhalts, und das SVG bringt eine eigene mit. */
  min-width: 0;
  text-align: center;
}

/* --- Bootmeldungen ---------------------------------------------------- */

.boot {
  margin: 0 0 clamp(1.6rem, 5vh, 3rem);
  font: 400 clamp(10px, 1.9vw, 12.5px)/1.9 ui-monospace, "SF Mono", Menlo,
        Consolas, monospace;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--schrift) 52%, transparent);
  white-space: pre-wrap;
  max-width: 100%;
  overflow-wrap: break-word;
}

.bootzeile {
  display: block;
  opacity: 0;
  animation: einblenden .01s steps(1) both;
  animation-delay: calc(var(--n) * .34s);
}

/* --- Der Schriftzug: Toms eigener 8x8-Zeichensatz --------------------- */

.marke {
  margin: 0;
  min-width: 0;
  opacity: 0;
  animation: aufziehen .5s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: 1.25s;
}

.wortmarke {
  display: block;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  height: auto;
  fill: var(--hell);
  filter: drop-shadow(0 0 .09em rgba(120, 105, 196, .85));
}

/* --- Satz und Cursorzeile --------------------------------------------- */

.satz {
  margin: clamp(1.5rem, 4.5vh, 2.6rem) auto 0;
  max-width: 30rem;
  font-size: clamp(15px, 2.4vw, 18px);
  color: var(--hell);
  opacity: 0;
  animation: einblenden .55s ease both;
  animation-delay: 1.85s;
}

.bald {
  margin: clamp(1.1rem, 3vh, 1.8rem) 0 0;
  font: 400 clamp(11px, 1.9vw, 13px)/1.6 ui-monospace, "SF Mono", Menlo,
        Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--signal);
  opacity: 0;
  animation: einblenden .4s ease both;
  animation-delay: 2.25s;
}

.cursor {
  display: inline-block;
  width: .62em;
  height: 1.05em;
  margin-right: .5em;
  vertical-align: -.18em;
  background: var(--signal);
  animation: blinken 1.06s steps(1, end) infinite;
}

.uebersetzt {
  margin: 2.4rem 0 0;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--gelb) 60%, transparent);
  opacity: 0;
  animation: einblenden .5s ease both;
  animation-delay: 2.5s;
}

/* --- Sprachumschalter -------------------------------------------------- */

.sprachen {
  position: fixed;
  right: max(1.1rem, 3vw);
  bottom: max(1.1rem, 3vh);
  z-index: 3;
  display: flex;
  gap: 2px;
  font: 400 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.sprachen a {
  padding: .55em .7em;
  color: color-mix(in srgb, var(--schrift) 62%, transparent);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.sprachen a:hover,
.sprachen a:focus-visible {
  color: var(--hell);
  border-color: color-mix(in srgb, var(--rahmen) 80%, transparent);
}

.sprachen a[aria-current] {
  color: var(--grund);
  background: var(--schrift);
}

/* Das Original ist als solches erkennbar: ein Punkt über dem Kürzel. */
.sprachen a[data-original]::after {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* --- Bewegung ---------------------------------------------------------- */

@keyframes einblenden { to { opacity: 1; } }

@keyframes aufziehen {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

@keyframes blinken { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bootzeile, .marke, .satz, .bald, .uebersetzt {
    opacity: 1;
    animation: none;
  }
  .cursor { animation: none; }
}

/* Sehr flache Fenster (Querformat am Telefon): die Bootmeldungen sind das
   Erste, was weichen darf — der Schriftzug ist die Botschaft. */
@media (max-height: 460px) {
  .boot { display: none; }
  body.teaser { padding: 3vh 6vw; }
}

/* --- Rechtliches auf dem Teaser --------------------------------------- */
/* Gegenstück zum Sprachumschalter: der sitzt unten rechts, das hier unten
   links. Gleiche Schrift, gleiche Zurückhaltung — Pflichtlinks müssen
   auffindbar sein, nicht laut. */

.rechtsnav {
  position: fixed;
  left: max(1.1rem, 3vw);
  bottom: max(1.1rem, 3vh);
  z-index: 3;
  font: 400 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .1em;
}

.rechtsnav a {
  padding: .55em .2em;
  color: color-mix(in srgb, var(--schrift) 55%, transparent);
  text-decoration: none;
}

.rechtsnav a:hover,
.rechtsnav a:focus-visible { color: var(--hell); }

.rechtsnav .trenner { color: color-mix(in srgb, var(--schrift) 30%, transparent); }

/* Auf sehr schmalen Schirmen stünden die beiden Leisten nebeneinander im
   Weg. Dann rutscht das Rechtliche über den Sprachumschalter. */
@media (max-width: 26rem) {
  .rechtsnav { bottom: calc(max(1.1rem, 3vh) + 2.2rem); }
}

/* --- Pflichtseiten: Impressum und Datenschutz -------------------------- */
/* Kein Bootvorgang, keine Animation: ein Pflichttext soll lesbar sein und
   nicht inszeniert. Nur die Farbwelt bleibt, damit man nicht das Gefühl hat,
   die Seite verlassen zu haben. */

body.recht {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 400 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
  /* Unten Platz für den fixierten Sprachumschalter, sonst deckt er den Fuß zu. */
  padding: clamp(2rem, 7vh, 4rem) 6vw calc(clamp(2rem, 7vh, 4rem) + 3rem);
  overflow-x: hidden;
}

.blatt {
  position: relative;
  z-index: 1;
  width: min(42rem, 100%);
  margin: 0 auto;
}

.rueck {
  margin: 0 0 2.4rem;
  font: 400 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.rueck a {
  color: color-mix(in srgb, var(--schrift) 62%, transparent);
  text-decoration: none;
}

.rueck a:hover, .rueck a:focus-visible { color: var(--hell); }

.blatt h1 {
  margin: 0;
  font: 400 clamp(20px, 4.5vw, 28px)/1.25 ui-monospace, "SF Mono", Menlo,
        Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--hell);
}

.blatt .lead {
  margin: .9rem 0 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--schrift) 72%, transparent);
}

.blatt .uebersetzt { margin: 1.6rem 0 0; animation: none; opacity: 1; }

.block {
  margin: 2.6rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--rahmen) 55%, transparent);
}

.block h2 {
  margin: 0 0 .7rem;
  font: 400 11.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
}

.block p { margin: 0 0 .9rem; }
.block p:last-child { margin-bottom: 0; }

.blatt a[href^="mailto:"] {
  color: var(--hell);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--schrift) 45%, transparent);
}

.fussrecht {
  margin: 3.2rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--rahmen) 55%, transparent);
  font: 400 11.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em;
}

.fussrecht p { margin: 0; }

.fussrecht .wege a {
  color: color-mix(in srgb, var(--schrift) 62%, transparent);
  text-decoration: none;
}

.fussrecht .wege a:hover,
.fussrecht .wege a:focus-visible { color: var(--hell); }

/* Die Seite, auf der man schon steht, wird nicht noch einmal verlinkt-betont. */
.fussrecht .wege a[aria-current] { color: var(--hell); }

.fussrecht .klein {
  margin-top: .5rem;
  color: color-mix(in srgb, var(--schrift) 38%, transparent);
}