/* ══════════════════════════════════════════════════════════════
   Grundregeln

   Diese Regeln hat sich community.html Stueck fuer Stueck erarbeitet -
   meistens, nachdem etwas schiefgegangen war. Solange sie nur als
   Kommentar in einer Datei standen, fing die naechste Seite wieder
   bei null an. Genau das ist beim Overlay-Editor passiert.

   Hier stehen sie so, dass eine neue Seite sie bekommt, indem sie
   diese Datei einbindet. Nicht als Empfehlung - als Voreinstellung.

   Einbinden:  <link rel="stylesheet" href="/assets/grundregeln.css?v=…">
   und zwar VOR dem eigenen <style>, damit die Seite noch abweichen
   kann, wo sie einen Grund hat.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Unter 44 Pixeln trifft ein Daumen daneben. Das ist keine Meinung,
     das ist an dieser Seite gemessen worden. */
  --ziel-min: 44px;
  /* Unter 11 Pixeln hoert Text auf, Text zu sein - man erkennt ihn
     hoechstens wieder. Grossbuchstaben mit Sperrung sind die Ausnahme,
     und auch die nicht darunter. */
  --schrift-min: 0.72rem;
}

/* ── 1. Daumenmass ──────────────────────────────────────────
   Alles, was man antippt, ist mindestens 44 Pixel hoch. Wo eine
   Seite bewusst abweicht (ein Schliesskreuz in einer Zeile etwa),
   setzt sie es selbst - aber sie muss es dann bewusst tun. */
button, a.knopf, .knopf, input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea{
  min-height: var(--ziel-min);
}

/* ── 2. iOS zoomt hinein, wenn ein Feld kleiner als 16px ist ──
   Das ist kein Stilproblem: die Seite springt beim Antippen, und
   der Nutzer landet irgendwo anders als er wollte.

   Das !important steht hier bewusst. Es gibt keinen Fall, in dem
   ein Eingabefeld auf einem Handy kleiner als 16px sein soll -
   und ohne !important gewinnt jede Seitenregel wie ".feld input",
   also genau die, die das Problem verursacht. */
@media (max-width: 820px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea{ font-size: 16px !important; }
}

/* ── 3. Nichts ragt heraus ──────────────────────────────────
   Ein einzelnes zu breites Bild schiebt die ganze Seite seitlich.

   Was hier bewusst NICHT steht: overflow-x:hidden auf html/body.
   Das versteckt den Fehler, statt ihn zu beheben - und es macht
   jedes position:sticky auf der Seite kaputt, weil ein Vorfahre
   mit overflow != visible einen neuen Scroll-Bereich aufmacht.
   Der Kopf des Overlay-Editors und das Schliesskreuz im Chat
   haengen beide daran. */
img, video, canvas, svg, table, pre{ max-width: 100%; }

/* ── 4. Wer nicht mit der Maus arbeitet, muss sehen wo er ist ── */
:focus-visible{
  outline: 2px solid var(--neon2, #bf00ff);
  outline-offset: 2px;
}

/* ── 5. Bewegung ist freiwillig ─────────────────────────────
   Wer im Betriebssystem "weniger Bewegung" eingestellt hat, hat
   dafuer einen Grund. Fuer manche Menschen ist eine Animation
   nicht Zierrat, sondern Uebelkeit. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 6. Ein title reicht nicht ──────────────────────────────
   Auf einem Handy gibt es kein Schweben. Was nur im title steht,
   steht fuer zwei Drittel der Leute nirgends. Deshalb: title als
   Zugabe, nie als einzige Erklaerung - und jeder Knopf ohne
   sichtbaren Text braucht ein aria-label. Das laesst sich in CSS
   nicht erzwingen; es steht hier, damit es an einer Stelle steht,
   die man beim Bauen einer neuen Seite liest. */

/* ── 7. Die Woerter ─────────────────────────────────────────
   Eine Sache, ein Wort. Fuer diese Seite heisst das:

     freischalten / Freischaltung  - nicht "pruefen", nicht
       "verifizieren", nicht "bestaetigen", nicht "genehmigen".
     Stream-Tag   - ein Tag, an dem wirklich gestreamt wurde.
     Teamherz-Serie - nicht "Streak" im sichtbaren Text.
     Zuschauer    - nicht "User", nicht "Nutzer".
     Du           - durchgehend, auch in Fehlermeldungen.

   Fuenf Woerter fuer dieselbe Sache lassen eine Seite aussehen,
   als haetten fuenf Leute daran gebaut, die nicht miteinander
   reden. */