/* css/kopf.css · Der Kopf, das erste Bauteil von R10.
 *
 * Kanon ist die Figma-Komponente „Kopfrahmen" (58:275), am 02.09.2026 über den Draht
 * gemessen: Rahmen 393 × 180 ohne Füllung, darin drei Bilder in dieser Stapelreihenfolge
 * von unten nach oben: Rumo 130 × 130 bei 298 / −4, um 30 Grad im Uhrzeigersinn um seine
 * linke obere Ecke gedreht; das Neon-Schild 359,45 × 157 bei 16 / 30; die Flagge 393 × 231
 * bei 0 / −10 mit Mischmodus Multiplizieren und 35 Prozent Deckkraft. Alle drei füllen ihren
 * Rahmen (Figma FILL, im Browser object-fit: cover).
 *
 * Alle Maße stehen hier in Prozent der Bezugsbreite 393 (README, Architektur), damit der
 * Kopf nach Festregel 6 auf jeder Bildschirmbreite gleich aussieht. Bei genau 393 px
 * ergeben sie die Figma-Pixel. Waagerechte Werte teilen durch 393, senkrechte durch 180,
 * die Höhe des Kopfes kommt aus dem Seitenverhältnis 393 zu 180.
 *
 * Rumo und Flagge ragen über den Rahmen hinaus, so wie in Figma (Beschnitt aus). Rechts
 * schneidet overflow-x: hidden aus grund.css ab (Klärung in DESIGN.md Abschnitt 1).
 * Styling-Datei im Sinne von CLAUDE.md: Claude ändert sie nie ungefragt.
 */
.app {
  position: relative;
  max-width: 393px;          /* Bezugsbreite aller Screens, README „Architektur" */
  margin: 0 auto;
}
.kopf {
  position: relative;
  aspect-ratio: 393 / 180;   /* Kopfrahmen 393 × 180 */
}
.kopf img {
  position: absolute;
  display: block;
  object-fit: cover;
}
.kopf .rumo {                /* Figma: rumo-sit 1, 130 × 130 bei 298 / −4, Drehung −30 (Figma) = 30 im Uhrzeigersinn */
  left: 75.827%;
  top: -2.222%;
  width: 33.079%;
  aspect-ratio: 1 / 1;
  transform: rotate(30deg);
  transform-origin: 0 0;
}
.kopf .schild {              /* Figma: Chatti-Bild_FINAL_3_2607 1, 359,45 × 157 bei 16 / 30 */
  left: 4.071%;
  top: 16.667%;
  width: 91.464%;
  aspect-ratio: 359.45 / 157;
}
.kopf .flagge {              /* Figma: Flagge transparent pur 1, 393 × 231 bei 0 / −10, Multiplizieren, 35 % */
  left: 0;
  top: -5.556%;
  width: 100%;
  aspect-ratio: 393 / 231;
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}