/* Unterseiten (Impressum, Datenschutz, 404): was bundle.css nicht kennt.
   Werte nur aus tokens.css, Schrift ueber die Stilklassen im Markup. */

/* Schlichte Kapsel: der Weg zurueck als Textlink, wie ein Navigationspunkt.
   display, Hoehe (target-min) und die Ausblendung bis 480 Inhalt (533px Fenster, stufe-klein)
   kommen aus bundle.css; eine eigene display-Angabe hier setzte die Ausblendung ausser Kraft.
   Darunter traegt die Marke den Weg zurueck. */
.cc-bar__home {
  white-space: nowrap; color: var(--text-light); text-decoration: none; padding-inline: var(--space-3);
  transition: color var(--duration-ui) var(--ease-standard);
}
.cc-bar__home:hover { color: var(--text); }

/* Rechtstext auf einer Glasflaeche, acht von zwoelf Spalten. Unter 1040px eine Spalte:
   zwoelf Spalten mit ihren Abstaenden sind breiter als ein schmales Telefon. */
.cc-legal {
  grid-column: 1 / span 8; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.cc-legal > .headline { color: var(--text); margin-bottom: var(--space-4); }
.cc-legal > .title { color: var(--text); margin-top: var(--space-6); }
.cc-legal p, .cc-legal li { color: var(--text-light); max-width: var(--measure-text); }
.cc-legal ul { margin: 0; padding-left: var(--space-5); }
.cc-legal li + li { margin-top: var(--space-2); }
.cc-legal strong { color: var(--text); }
.cc-legal .cc-letterhead { margin-bottom: var(--space-4); }
@container page (max-width: 1040px) {
  .cc-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .cc-legal { grid-column: 1 / -1; }
}

/* 404: Ziffer, ein Satz, eine Klarglas-Pille, in der Hoehe des ersten Bildschirms. */
.cc-404 {
  box-sizing: border-box;
  min-height: calc(100svh - var(--band-height) - var(--nav-offset) - var(--nav-height));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--space-5);
}
.cc-404__code { color: var(--text); }
.cc-404__text { color: var(--text-light); max-width: var(--measure-lead); }

/* 404, Zugabe: das Ballspiel. Ohne Skript, bei reduzierter Bewegung und auf schmalen
   Telefonen bleibt die Glasflaeche versteckt, dann gilt das Layout oben unveraendert.
   Zeigt 404-spiel.js sie, bekommt .cc-404 die Klasse cc-404--spiel: ab 1041px Ziffer,
   Satz und Pille links, das Spielfeld rechts wie die Belege im Auftakt; darunter
   untereinander. Das Feld ist vertieftes Glas (field-fill, field-shadow) wie ein
   Eingabefeld; Ball und Schlaeger zeichnet das Skript in gold. */
.cc-404__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.cc-404__spiel[hidden] { display: none; }
.cc-404--spiel {
  display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap); row-gap: var(--space-7);
  align-content: center; align-items: center;
}
.cc-404--spiel .cc-404__copy { grid-column: 1 / span 6; }
.cc-404__spiel { grid-column: 7 / -1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.cc-404__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3) var(--space-6); }
.cc-404__titel { color: var(--text); }
.cc-404__stand { display: flex; gap: var(--space-6); margin: 0; }
.cc-404__stand dt { color: var(--text-light); }
.cc-404__stand dd { margin: 0; color: var(--gold); font-variant-numeric: tabular-nums; }
.cc-404__feld {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  background: var(--field-fill); border-radius: var(--radius-s); box-shadow: var(--field-shadow);
  touch-action: pan-y; /* waagerecht steuert den Schlaeger, senkrecht scrollt weiter die Seite */
}
.cc-404__feld:focus-visible { outline: 2px solid transparent; box-shadow: var(--field-shadow), var(--focus-ring); }
.cc-404__hinweis { color: var(--text-light); }
@container page (max-width: 1040px) {
  .cc-404--spiel { grid-template-columns: minmax(0, 1fr); }
  .cc-404--spiel .cc-404__copy, .cc-404__spiel { grid-column: 1 / -1; }
}
@container page (max-width: 680px) {
  .cc-404__spiel { gap: var(--space-4); }
  .cc-404__stand { gap: var(--space-5); }
}