/* ══════════════════════════════════════════════════════════════
   Eine Website, ein Gesicht.

   Orbitron und kantig - so sehen Startseite und Mod-Bereich aus, und
   so sieht jetzt auch alles andere aus. Diese Datei laedt NACH dem
   Stil der jeweiligen Seite, damit der Look an EINER Stelle steht und
   nicht in fuenf Dateien auseinanderlaeuft.
   ══════════════════════════════════════════════════════════════ */

/* Orbitron ist breit und laut. Als Ueberschrift traegt es; als
   Fliesstext waere es anstrengend - der bleibt in Inter. Dafuer sind
   die Ueberschriften etwas kleiner und leicht gesperrt, wie im
   Mod-Bereich. */
h1,h2,h3{font-family:'Orbitron',sans-serif;letter-spacing:.03em;}
h1{font-size:clamp(1.2rem,4.4vw,1.65rem);font-weight:700;}
h2{font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

/* Kantig: 8 Pixel statt Pille. */
.knopf,.reiter button,.filter button,.bausteinknopf,.ebene,
.feld input,.feld select,.feld textarea,td input,td select{border-radius:8px;}
.knopf{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.02em;}
.karte,.hinweisbox,.wartet,.schloss,.bistdu,.bistdu-karte,.kachel,.rang,.fenster-innen{border-radius:12px;}
.abzeichen{border-radius:5px;}

/* ── Schriftgroesse am Handy ────────────────────────────────
   Die Benotung wollte 15-16 Pixel Lesetext statt 12-14. Statt hundert
   Einzelwerte anzufassen, waechst am Handy die Grundgroesse: alles in
   rem zieht gleichmaessig mit (12,2 -> 13,4 px; Lesetext 14 -> 15,5 px),
   das Layout bleibt in sich stimmig. Tippziele sind in px und bleiben. */
@media(max-width:520px){
  html{font-size:110%;}
  /* Der Preis der groesseren Schrift, gemessen: die sechs Wertungen
     brachen in drei Reihen um, das Podest rutschte 50 Pixel tiefer und
     kein Listenplatz war mehr zu sehen. Engere Raender in den Filtern
     holen die zwei Reihen zurueck - die Schrift dort bleibt ueber 12 px,
     die Knoepfe bleiben 44 px hoch. */
  .filter{gap:5px;}
  .filter button{padding:0 9px;font-size:.72rem;}
  /* "Bist du dabei?" am Handy als eine Zeile: das Feld sagt selbst, was
     hineingehoert. Die Frage bleibt fuer Vorleseprogramme erhalten, sie
     steht nur nicht mehr als zweizeiliger Satz zwischen Podest und Liste. */
  .bistdu{padding:10px 12px;margin-bottom:12px;}
  /* Der Satz ist die beste Einladung der Seite - er bleibt sichtbar, nur
     knapp: eine Zeile, klein. (Vorher war er am Handy nur fuer
     Vorleseprogramme da, und der Platzhalter im Feld war abgeschnitten.) */
  .bistdu label{display:block;font-size:.8rem;line-height:1.3;margin:0 0 6px;color:var(--text);}
  .bistdu .bistdu-zeile{margin-top:0;}
}