/* css/start.css · Der Start-Screen (R10), gebaut nach dem Figma-Screen „Start" (83:22),
 * am 02.09.2026 über den Draht gemessen. Jede Zahl hier ist eine Figma-Zahl, die Lage zählt
 * ab der linken oberen Ecke des Screens, so wie in Figma.
 *
 * Die Einheit --u ist ein Pixel bei 393 px Bezugsbreite und schrumpft auf schmaleren
 * Bildschirmen proportional (Festregel 6: nichts verrutscht). Auf breiteren Bildschirmen
 * bleibt die Bühne 393 (Tabea, 02.09.2026).
 *
 * Werte aus der DESIGN.md: Champagner #f5e4b8 als Badge- und Kartenfläche, Herz-Gold
 * #f0b429 als 4-px-Kontur innen (Stilregel 6), Standard-Schatten −6 / 8 / 14 Espresso 40 %
 * (Stilregel 7), Radien 24 und 32 (Abschnitt 5), Espresso #2a1d12 als Text, Herz-Rot
 * #c62b1e für die Werte, Trennlinie 1 px Espresso 70 % (Stilregel 6), Schriften und
 * Größen wie in der Bestandsaufnahme (Abschnitt 3): Rubik Dirt 14 / 8 / 18 / 24,
 * Indie Flower 18 / 24. Ersatzschrift, falls Google Fonts nicht lädt: die neutrale
 * Systemschrift sans-serif für beide (Tabea, 02.09.2026, DESIGN.md Abschnitt 3).
 *
 * Styling-Datei im Sinne von CLAUDE.md: Claude ändert sie nie ungefragt.
 */
.app { --u: calc(min(100vw, 393px) / 393); }

.start {
  position: relative;
  height: calc(1157 * var(--u));          /* Figma-Bühne 393 × 1157, unten Auslauf für die Leiste */
}
.start > .kopf {
  position: absolute;
  left: 0; top: calc(10 * var(--u));      /* Kopfrahmen bei y 10 */
  width: 100%;
}
.start .abs { position: absolute; }

/* Badges: fünf Stück, 118 × 70, Radius 24, Champagner, Goldkontur innen, Standard-Schatten */
.badge {
  position: absolute;
  width: calc(118 * var(--u)); height: calc(70 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #f5e4b8;
  border: calc(4 * var(--u)) solid #f0b429;
  box-shadow: calc(-6 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) rgba(42, 29, 18, .4);
  box-sizing: border-box;
}
.badge > * { position: absolute; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
/* Reihe 1 (y 222): x 11,5 · 137,5 · 263,5. Reihe 2 (y 340): x 74,5 · 200,5 */
.badge.b1 { left: calc(11.5 * var(--u)); top: calc(222 * var(--u)); }
.badge.b2 { left: calc(137.5 * var(--u)); top: calc(222 * var(--u)); }
.badge.b3 { left: calc(263.5 * var(--u)); top: calc(222 * var(--u)); }
.badge.b4 { left: calc(74.5 * var(--u)); top: calc(340 * var(--u)); }
.badge.b5 { left: calc(200.5 * var(--u)); top: calc(340 * var(--u)); }
/* Innen zählt ab der Badge-Ecke; die 4 px Kontur liegen innen, darum minus 4 */
.badge .label {                            /* Rubik Dirt 14, Espresso, Kasten 118 × 24 bei y 6 */
  left: calc(-4 * var(--u)); top: calc(2 * var(--u)); width: calc(118 * var(--u)); height: calc(24 * var(--u));
  font: calc(14 * var(--u)) "Rubik Dirt", sans-serif; color: #2a1d12;
}
.badge .mini {                             /* Rubik Dirt 8, Espresso 75 %, je 50,5 × 10 bei y 26 */
  top: calc(22 * var(--u)); width: calc(50.5 * var(--u)); height: calc(10 * var(--u));
  font: calc(8 * var(--u)) "Rubik Dirt", sans-serif; color: rgba(42, 29, 18, .75);
}
.badge .mini.links { left: calc(4 * var(--u)); }
.badge .mini.rechts { left: calc(55.5 * var(--u)); }
.badge .linie {                            /* 1 × 22 bei x 58,5 / y 40, Espresso 70 % */
  left: calc(54.5 * var(--u)); top: calc(36 * var(--u)); width: calc(1 * var(--u)); height: calc(22 * var(--u));
  background: rgba(42, 29, 18, .7);
}
.badge .wert {                             /* je 50,5 × 28 bei y 37, Herz-Rot */
  top: calc(33 * var(--u)); width: calc(50.5 * var(--u)); height: calc(28 * var(--u)); color: #c62b1e;
}
.badge .wert.gesamt { left: calc(4 * var(--u)); font: calc(18 * var(--u)) "Rubik Dirt", sans-serif; }     /* benannte Ausnahme, DESIGN.md Abschnitt 3 */
.badge .wert.saison { left: calc(55.5 * var(--u)); font: calc(18 * var(--u)) "Indie Flower", sans-serif; }
/* Champ-Badges: Label 118 × 30 bei y 10, Name Indie Flower 24 bei y 35, ungeteilt */
.badge .label.champ { top: calc(6 * var(--u)); height: calc(30 * var(--u)); line-height: calc(30 * var(--u)); }
.badge .name {
  left: calc(-4 * var(--u)); top: calc(31 * var(--u)); width: calc(118 * var(--u)); height: calc(30 * var(--u));
  font: calc(24 * var(--u)) / calc(30 * var(--u)) "Indie Flower", sans-serif; color: #c62b1e;
}

/* Treppchen-Karte mit Pokal: Pokal 125,44 × 131 bei 45,5 / 488, Karte 180 × 200 bei 18 / 613 */
.pokal {
  left: calc(45.5 * var(--u)); top: calc(488 * var(--u)); width: calc(125.44 * var(--u)); height: calc(131 * var(--u));
  object-fit: cover;
}
.treppchen {
  left: calc(18 * var(--u)); top: calc(613 * var(--u)); width: calc(180 * var(--u)); height: calc(200 * var(--u));
  border-radius: calc(32 * var(--u));
  background: #f5e4b8;
  border: calc(4 * var(--u)) solid #f0b429;
  box-shadow: calc(-6 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) rgba(42, 29, 18, .4);
  box-sizing: border-box;
}
.treppchen > * { position: absolute; }
.treppchen .titel {                        /* Rubik Dirt 24, 138 × 30 bei 46 / 613, also 28 / 0 in der Karte */
  left: calc(24 * var(--u)); top: calc(-4 * var(--u)); width: calc(138 * var(--u)); height: calc(30 * var(--u));
  font: calc(24 * var(--u)) / calc(30 * var(--u)) "Rubik Dirt", sans-serif; color: #2a1d12; text-align: center; white-space: nowrap;
}
.treppchen .ziffer { left: calc(7 * var(--u)); height: calc(32 * var(--u)); object-fit: cover; }
.treppchen .ziffer.z1 { top: calc(34.5 * var(--u)); width: calc(25.73 * var(--u)); }
.treppchen .ziffer.z2 { top: calc(82.5 * var(--u)); width: calc(29.49 * var(--u)); }
.treppchen .ziffer.z3 { top: calc(130.5 * var(--u)); width: calc(29.32 * var(--u)); }
.treppchen .name {                         /* Indie Flower 24, 102 × 30 bei x 64, also 42 in der Karte */
  left: calc(42 * var(--u)); width: calc(102 * var(--u)); height: calc(30 * var(--u));
  font: calc(24 * var(--u)) / calc(30 * var(--u)) "Indie Flower", sans-serif; color: #2a1d12; text-align: center; white-space: nowrap;
}
.treppchen .name.n1 { top: calc(35.5 * var(--u)); }
.treppchen .name.n2 { top: calc(83.5 * var(--u)); }
.treppchen .name.n3 { top: calc(131.5 * var(--u)); }

/* Strichliste-Zettel: Bild 149,96 × 546 bei 214 / 458. Figma nennt am Rechteck „Rotation 180",
   die Transformationsmatrix ist aber eine Spiegelung an der senkrechten Achse (x negativ, y bleibt):
   Nadel oben, Eselsohr unten links. Formtreuer Schatten. */
.zettel {
  left: calc(214 * var(--u)); top: calc(458 * var(--u)); width: calc(149.96 * var(--u)); height: calc(546 * var(--u));
  object-fit: cover;
  transform: scaleX(-1);
  /* Der Browser spiegelt nach dem Filter, darum steht der Versatz hier mit +6: gespiegelt liegt
     der Schatten dann wie in Figma und nach Stilregel 7 unten links, also bei −6 / 8. */
  filter: drop-shadow(calc(6 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)) rgba(42, 29, 18, .4));
}
.strichliste-titel {                       /* Rubik Dirt 24, 150 × 30 bei 214 / 488 */
  left: calc(214 * var(--u)); top: calc(488 * var(--u)); width: calc(150 * var(--u)); height: calc(30 * var(--u));
  font: calc(24 * var(--u)) / calc(30 * var(--u)) "Rubik Dirt", sans-serif; color: #2a1d12; text-align: center; white-space: nowrap;
}
.zeile {                                   /* Name Indie Flower 24, 102 × 30 bei x 214; Zeilen ab y 528 im Abstand 40 */
  left: calc(214 * var(--u)); width: calc(102 * var(--u)); height: calc(30 * var(--u));
  font: calc(24 * var(--u)) / calc(30 * var(--u)) "Indie Flower", sans-serif; color: #2a1d12; text-align: center; white-space: nowrap;
}
.striche {                                 /* ab x 316, 3 unter der Zeilenoberkante, Höhe 24 */
  left: calc(316 * var(--u)); height: calc(24 * var(--u)); display: flex; align-items: flex-start;
}
.striche img { display: block; height: calc(24 * var(--u)); object-fit: cover; }
.striche .b5 { width: calc(26 * var(--u)); margin-right: calc(-3 * var(--u)); }     /* Bündel 26 × 24, Lücke −3 */
.striche .s1 { width: calc(7 * var(--u)); margin-right: calc(-3 * var(--u)); transform: scaleX(-1); }  /* Strich 7 × 24, in Figma an der senkrechten Achse gespiegelt */