/* Schriften: Space Mono fuer Titel, Menue und Beschriftungen, JetBrains Mono fuer den Text. Beide selbst gehostet (SIL OFL 1.1, siehe fonts/LICENSE.txt). */
@font-face{font-family:"Space Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/space-mono-400.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/space-mono-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/jetbrains-mono-700.woff2) format("woff2")}
:root{--f-text:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Noto Sans Tifinagh",monospace;--f-titel:"Space Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Noto Sans Tifinagh",monospace}
html body{font-family:var(--f-text)}
html h1,
html h2,
html h3,
html .h,
html #titel,
html #kopf,
html #ort,
html #satz,
html #hinweis,
html #unter,
html #hin,
html #stand,
html #leiste,
html #leiste a,
html #leiste button,
html #sprache button,
html .spr button,
html .fest,
html legend,
html label em,
html #esc span,
html #wahl button,
html #wahl span,
html #teilen,
html #senden span,
html .klein,
html b,
html .stand,
html .tor a,
html #oede a{font-family:var(--f-titel)}

/* Runde 3 (23.10.2026) – Schrift- und Farbrollen. Regel: Space Mono = Titel und alle Beschriftungen in Grossbuchstaben (Menü, Knöpfe, Labels);
   JetBrains Mono = ganze Sätze (Fliesstext, Hinweise). Grössen: 12 Beschriftung · 15 Kurztext · 16–18 Fliesstext · Titel.
   Laufweite Grossbuchstaben: .06em Knöpfe/Menü · .08em Labels. Hell: 100 % · 80 % Fliesstext · 60 % Meta/inaktiv · 40 % leer. */
/* 1 Schriftrollen */
html #sprache a,html #wo,html #zurueck span,html label,html .wahl span,html #oede p,html .taste2 span,html #k2 span,html .karte i,html #runter{font-family:var(--f-titel)}
html .lead,html #fuss p,html #sozial p{font-family:var(--f-text)}
/* 2 Grössen und Laufweite */
html .lead,html .strahl span{font-size:clamp(16px,1.25vw,18px);line-height:1.6}
html #kennen,html #ablauf li span{font-size:15px}
html #zurueck span,html #esc span,html #wahl span,html .strahl b,html #wo,html #k2 span{letter-spacing:.08em}
/* 3 Farben */
html .lead,html .strahl span{color:rgba(242,242,238,.8)}
html .klein,html .karte i,html #oede p,html #wo,html #wahl span,html label i,html #meldung,html #ablauf li b,html #ablauf .ab-n,html #wahl button{color:rgba(242,242,238,.6)}
html #wahl button[aria-pressed=true]{color:#f2f2ee}
html .karte.alt strong,html #platz strong.leer{color:rgba(242,242,238,.4)}
html legend em{font-style:normal;color:#ff5a00}

/* Runde 4 (23.10.2026) – Mikro-Interaktionen. Regel: sofortige, leise Rückmeldung (0,15 s), keine Verzögerung, keine Bewegung, die bremst.
   Darüberfahren nur auf Geräten mit Maus (hover:hover), damit auf dem Handy nichts «kleben» bleibt. Drücken überall. */
html #leiste a,html #leiste button,html #sprache a,html #wahl button,html #teilen,html #weiter{transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s}
@media (hover:hover){
html #leiste a:not([aria-current]):hover,html #leiste button:not([aria-pressed=true]):hover,html #sprache a:not([aria-current=true]):hover{background:rgba(10,11,14,.1)}
html #wahl button:not([aria-pressed=true]):hover{color:#f2f2ee;border-right-color:rgba(242,242,238,.6)}
html #esc:hover,html #zurueck:hover,html .taste2:hover,html #senden:hover,html #k2:hover{filter:brightness(1.15)}
html #teilen:hover,html .wahl label:hover input:not(:checked)+span{border-color:#f2f2ee}
html #weiter:hover{box-shadow:inset 0 -1px 0 #ff5a00}
}
html #leiste a:active,html #leiste button:active,html #sprache a:active{background:rgba(10,11,14,.18)}