/* ===========================================================================
   SILENZIO — Tastenbelegung (/tastenbelegung/), im sil-stil seit 12.10.2026
   Baut auf ../css/start.css (Token, Navigation, Knöpfe, Fußzeile) und
   ../css/seiten.css auf. Hier steht nur, was diese Seite allein braucht: die
   3D-Tastatur, die Anzeige der gewählten Taste und die Liste. Alle Tastenmaße
   hängen an --u (eine Tastenbreite), damit die Tastatur als Ganzes mit dem
   Fenster wächst.

   Das Markup unter der Kopfzeile baut tasten.js (unverändert; dieselbe Liste
   speist das Tasten-Fenster im Pausemenü, docs/tastenbelegung.md). Seine
   Klassen sind HAKEN. Die Prüfstände /home/tools/tastenbelegung/ und
   /home2/tools/tastenbelegung/ ankern auf vier Zeilen dieser Datei.

   Gold steht hier für eine Bedeutung: belegte Tasten leuchten, die gewählte
   Taste ist golden. Gehäuse, Karten und Linien sind neutral. Die Tastatur ist
   eine ABBILDUNG (wie Bankkarte und Kennzeichen im Spiel) und trägt deshalb
   feste Farbwerte für ihr Material.
   =========================================================================== */

.keys {
    padding: 40px var(--ss-gutter) 0;
}
.keys-head {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.keys-head .ss-h2 { font-size: clamp(32px, 4.4vw, 50px); }
.keys-head .ss-lead { margin-top: 2px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; }

/* ===== SUCHE + BEREICHSWAHL ===== */
.keys-tools {
    position: relative;
    z-index: 6;                 /* die Vorschläge liegen über der Tastatur */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 18px;
    margin: clamp(18px, 2.4vw, 24px) auto 0;
}
.suche {
    position: relative;
    flex: 0 1 290px;
    min-width: 230px;
}
.suche input {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 40px 0 42px;
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-r-ctl);
    font-family: var(--ss-ui);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ss-text);
    background: rgba(0, 0, 0, 0.35);
    outline: none;
    transition: border-color 160ms var(--ss-ease), box-shadow 160ms var(--ss-ease), background 160ms var(--ss-ease);
}
.suche input::placeholder { color: var(--ss-text-3); font-weight: 500; opacity: 1; }
.suche input:hover { border-color: rgba(255, 255, 255, 0.2); }
.suche input:focus {
    border-color: var(--ss-gold);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: var(--ss-ring);
}
.suche .lupe {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 17px; height: 17px;
    margin-top: -8.5px;
    fill: none; stroke: var(--ss-text-3); stroke-width: 1.9; stroke-linecap: round;
    pointer-events: none;
}
.suche .leeren {
    position: absolute;
    right: 7px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    margin-top: -15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ss-text-3);
    background: none;
    cursor: pointer;
}
.suche .leeren[hidden] { display: none; }
.suche .leeren:hover, .suche .leeren:focus-visible { color: var(--ss-text); background: rgba(255, 255, 255, 0.09); outline: none; }
.suche .leeren svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.vorschlaege {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(430px, calc(100vw - 2 * var(--ss-gutter)));
    padding: 6px;
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-r-card);
    background: linear-gradient(180deg, var(--ss-bg-3) 0%, var(--ss-bg-2) 100%);   /* deckend: darunter liegen Bereichsknöpfe und Tastatur */
    box-shadow: var(--ss-light-top), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 26px 48px -16px #000;
    text-align: left;
}
.vorschlaege[hidden] { display: none; }
.vorschlag {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 9px 10px 8px;
    border: 0;
    border-radius: var(--ss-r-ctl);
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    cursor: pointer;
}
.vorschlag:hover { background: rgba(255, 255, 255, 0.045); }
.vorschlag[aria-selected="true"] {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0.045) 100%);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.2);
}
.vorschlag-text strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ss-text); }
.vorschlag-text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-text-3);
}
.vorschlag-hinweis { margin: 0; padding: 9px 10px; font-size: 13px; line-height: 1.5; color: var(--ss-text-3); }

.keys-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* Bereich wählen: gewählt ist der aktive Zustand (Goldton), kein gefüllter Goldknopf */
.bereich {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-r-pill);
    font-family: var(--ss-ui);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--ss-text-2);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    transition: color 160ms var(--ss-ease), border-color 160ms var(--ss-ease), background 160ms var(--ss-ease), box-shadow 160ms var(--ss-ease);
}
.bereich b {
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-text-3);
    font-variant-numeric: tabular-nums;
}
.bereich:hover { color: var(--ss-text); border-color: var(--ss-line-strong); background: rgba(255, 255, 255, 0.06); }
.bereich[aria-pressed="true"] {
    color: var(--ss-text);
    border-color: transparent;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.07) 100%);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.3);
}
.bereich[aria-pressed="true"] b { color: var(--ss-gold-hi); }

/* ===== TASTATUR ===== */
.kb-wrap {
    max-width: 1280px;
    margin: clamp(8px, 1.4vw, 16px) auto 0;
}
.kb-scroll { padding: 30px 0 76px; }
.kb-stage {
    /* Gehäuse = 23 Tasten + Rand. Unter 34 px je Taste wird nicht mehr
       verkleinert, sondern seitlich verschoben (siehe unten, max-width 960px). */
    --u: clamp(34px, calc((min(100vw, 1280px) - 2 * var(--ss-gutter)) / 26), 50px);
    width: max-content;
    margin: 0 auto;
    perspective: 1500px;
    perspective-origin: 50% -20%;
}
.kb {
    position: relative;
    padding: calc(var(--u) * 0.5) calc(var(--u) * 0.6) calc(var(--u) * 0.62);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: calc(var(--u) * 0.44);
    background: linear-gradient(180deg, #1c1c21 0%, #121215 58%, #0c0c0e 100%);
    /* Die gestapelten Schatten nach unten sind die Vorderkante des Gehäuses:
       gekippt wirken sie wie Materialstärke. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 0 0 1px rgba(0, 0, 0, 0.6),
        inset 0 calc(var(--u) * -0.3) calc(var(--u) * 0.5) rgba(0, 0, 0, 0.35),
        0 calc(var(--u) * 0.1) 0 #141417,
        0 calc(var(--u) * 0.2) 0 #0d0d10,
        0 calc(var(--u) * 0.3) 0 #08080a,
        0 calc(var(--u) * 0.32) 0 rgba(255, 255, 255, 0.07),
        0 calc(var(--u) * 1) calc(var(--u) * 1.3) rgba(0, 0, 0, 0.9),
        0 calc(var(--u) * 0.6) calc(var(--u) * 2.4) rgba(212, 175, 55, 0.11);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 28deg)) rotateY(var(--ry, 0deg));
    transform-origin: 50% 62%;
    transition: transform 600ms var(--ss-ease);
    will-change: transform;
}
.kb.is-tilting { transition: transform 120ms linear; }

/* Lichtschein unter dem Gehäuse (das Licht der belegten Tasten), liegt in der Tiefe dahinter */
.kb::before {
    content: '';
    position: absolute;
    inset: 12% -3% -16%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 55%, rgba(240, 210, 122, 0.42) 0%, rgba(212, 175, 55, 0.15) 42%, transparent 70%);
    filter: blur(calc(var(--u) * 0.7));
    transform: translateZ(calc(var(--u) * -1.4));
    pointer-events: none;
}

/* Markenschild über dem Ziffernblock, mit drei Lämpchen */
.kb-brand {
    position: absolute;
    top: calc(var(--u) * 0.5);
    right: calc(var(--u) * 0.6);
    width: calc(var(--u) * 4);
    height: var(--u);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--u) * 0.14);
    padding-right: calc(var(--u) * 0.1);
}
.kb-brand span {
    margin-left: calc(var(--u) * 0.18);
    font-family: var(--ss-display);
    font-weight: 600;
    font-size: calc(var(--u) * 0.28);
    letter-spacing: 0.22em;
    color: var(--ss-text-3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.kb-brand i {
    width: calc(var(--u) * 0.1);
    height: calc(var(--u) * 0.1);
    border-radius: 50%;
    background: var(--ss-gold-hi);
    box-shadow: 0 0 calc(var(--u) * 0.16) rgba(240, 210, 122, 0.9);
}
.kb-brand i:nth-child(2) { opacity: 0.35; box-shadow: none; }
.kb-brand i:nth-child(3) { animation: lampe 2.8s ease-in-out infinite; }
@keyframes lampe { 50% { opacity: 0.25; } }

.kb-grid {
    display: grid;
    grid-template-columns: repeat(92, calc(var(--u) / 4));
    grid-auto-rows: calc(var(--u) / 4);
    transform-style: preserve-3d;
}

/* --- eine Taste: Schacht (::before) + Kappe (.cap) --- */
.key {
    position: relative;
    display: block;
    margin: 0;
    padding: calc(var(--u) * 0.055);
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: center;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}
button.key { cursor: pointer; }
.key::before {
    content: '';
    position: absolute;
    inset: calc(var(--u) * 0.03);
    border-radius: calc(var(--u) * 0.15);
    background: #040405;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.95);
    transition: background 260ms var(--ss-ease), box-shadow 260ms var(--ss-ease);
}
.cap {
    --lift: calc(var(--u) * 0.15);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--u) * 0.18);
    font-family: var(--ss-ui);
    font-size: calc(var(--u) * 0.31);
    font-weight: 600;
    line-height: 1;
    color: #6e6c66;
    background: linear-gradient(168deg, #323237 0%, #242428 46%, #19191d 100%);
    /* Der feste Schatten nach unten ist die Vorderwand der Kappe */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 calc(var(--u) * -0.06) calc(var(--u) * 0.07) rgba(0, 0, 0, 0.38),
        0 var(--lift) 0 #0d0d10,
        0 calc(var(--lift) + 2px) 4px rgba(0, 0, 0, 0.85);
    transform: translateY(calc(var(--lift) * -1)) translateZ(calc(var(--u) * 0.14));
    transition: transform 110ms var(--ss-ease), box-shadow 110ms var(--ss-ease), background 260ms var(--ss-ease), color 260ms var(--ss-ease), text-shadow 260ms var(--ss-ease);
}
/* die Mulde auf der Kappe */
.cap::before {
    content: '';
    position: absolute;
    inset: 7% 9% 15%;
    border-radius: calc(var(--u) * 0.13);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.012) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.cap > span, .cap > svg { position: relative; margin-top: -6%; }
.cap svg {
    width: calc(var(--u) * 0.36);
    height: calc(var(--u) * 0.36);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.key.is-word .cap { font-size: calc(var(--u) * 0.2); letter-spacing: 0.02em; }
.key.is-mid .cap { font-size: calc(var(--u) * 0.25); }

/* --- belegte Taste: beleuchtete Beschriftung, Licht im Schacht --- */
.key.is-on::before {
    background: #4a3a10;
    box-shadow:
        inset 0 0 calc(var(--u) * 0.2) rgba(240, 210, 122, 0.75),
        0 0 calc(var(--u) * 0.26) rgba(212, 175, 55, 0.5);
}
.key.is-on .cap {
    font-weight: 700;
    color: var(--ss-gold-hi);
    text-shadow: 0 0 calc(var(--u) * 0.2) rgba(240, 210, 122, 0.8);
    background: linear-gradient(168deg, #39393f 0%, #27272c 46%, #1b1b20 100%);
}
/* Zahl der Funktionen, oben rechts auf der Kappe */
.cap .n {
    position: absolute;
    top: 11%;
    right: 13%;
    font-style: normal;
    font-size: calc(var(--u) * 0.17);
    font-weight: 700;
    color: var(--ss-gold);
    opacity: 0.75;
    text-shadow: none;
}
.key:not(.is-on) .cap .n { opacity: 0; }

button.key:hover .cap,
button.key:focus-visible .cap {
    transform: translateY(calc(var(--lift) * -0.45)) translateZ(calc(var(--u) * 0.14));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 calc(var(--u) * -0.06) calc(var(--u) * 0.07) rgba(0, 0, 0, 0.38),
        0 calc(var(--lift) * 0.45) 0 #0d0d10,
        0 calc(var(--lift) * 0.45 + 2px) 4px rgba(0, 0, 0, 0.85);
}
button.key:focus-visible { outline: none; }
button.key:focus-visible .cap { outline: 2px solid var(--ss-gold-hi); outline-offset: 2px; }

/* gedrückt: per Maus, per Tippen oder auf der echten Tastatur */
.key.is-down .cap,
button.key:active .cap {
    transform: translateY(0) translateZ(calc(var(--u) * 0.04));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5),
        inset 0 calc(var(--u) * 0.05) calc(var(--u) * 0.08) rgba(0, 0, 0, 0.5),
        0 0 0 #0d0d10,
        0 1px 2px rgba(0, 0, 0, 0.85);
}

/* gewählt: goldene Kappe */
.key.is-sel::before {
    background: #7a5f17;
    box-shadow:
        inset 0 0 calc(var(--u) * 0.24) rgba(255, 240, 180, 0.95),
        0 0 calc(var(--u) * 0.5) rgba(240, 210, 122, 0.85);
}
.key.is-sel .cap {
    color: var(--ss-gold-ink);
    text-shadow: none;
    background: var(--ss-gold-fill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(80, 60, 10, 0.5),
        inset 0 calc(var(--u) * -0.06) calc(var(--u) * 0.07) rgba(90, 66, 10, 0.5),
        0 calc(var(--lift) * 0.6) 0 var(--ss-gold-deep),
        0 calc(var(--lift) * 0.6 + 2px) calc(var(--u) * 0.3) rgba(212, 175, 55, 0.55);
    transform: translateY(calc(var(--lift) * -0.6)) translateZ(calc(var(--u) * 0.14));
}
.key.is-sel .cap .n { color: rgba(26, 20, 4, 0.7); opacity: 1; }

/* Einschalt-Welle: läuft beim Laden einmal von links nach rechts */
.kb.is-boot .key.is-on .cap {
    animation: welle 1100ms var(--ss-ease) both;
    animation-delay: calc(var(--x) * 34ms + 150ms);
}
@keyframes welle {
    0%   { color: #6e6c66; text-shadow: none; filter: brightness(1); }
    35%  { color: #fff3c4; text-shadow: 0 0 calc(var(--u) * 0.5) rgba(255, 236, 160, 1); filter: brightness(1.7); }
    100% { filter: brightness(1); }
}

.kb-swipe {
    display: none;
    margin: -44px 0 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ss-text-3);
}

/* ===== ANZEIGE DER GEWÄHLTEN TASTE ===== */
.readout {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(26px, 3.4vw, 40px) clamp(22px, 4vw, 48px);
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-r-panel);
    background:
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(212, 175, 55, 0.085) 0%, rgba(212, 175, 55, 0) 62%),
        linear-gradient(180deg, var(--ss-bg-2) 0%, var(--ss-bg-1) 100%);
    box-shadow: var(--ss-light-top), var(--ss-shadow-panel);
}
/* Lichtkante wie an den Fenstern der Startseite */
.readout::before {
    content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(240, 210, 122, 0) 0%, rgba(240, 210, 122, 0.75) 50%, rgba(240, 210, 122, 0) 100%);
    box-shadow: 0 0 22px 1px rgba(212, 175, 55, 0.35);
}
.readout-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(20px, 3.4vw, 44px);
    align-items: center;
    min-height: 132px;
}
.bigkey {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 104px;
    padding: 0 22px 8px;
    border-radius: 20px;
    font-family: var(--ss-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--ss-gold-ink);
    background: var(--ss-gold-fill);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 0 1px rgba(80, 60, 10, 0.5),
        inset 0 -8px 10px rgba(90, 66, 10, 0.45),
        0 12px 0 var(--ss-gold-deep),
        0 14px 0 #3d2f0c,
        0 26px 34px -8px rgba(0, 0, 0, 0.9),
        0 16px 44px rgba(212, 175, 55, 0.35);
    transform: translateY(-8px);
}
.bigkey.is-word { font-size: 24px; }
.bigkey.is-mid { font-size: 32px; }
.bigkey.is-leer {
    color: var(--ss-text-3);
    background: linear-gradient(168deg, #323237 0%, #242428 46%, #19191d 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 -8px 10px rgba(0, 0, 0, 0.4),
        0 12px 0 #0d0d10,
        0 14px 0 #060607,
        0 26px 34px -8px rgba(0, 0, 0, 0.9);
}
.bigkey svg {
    width: 44px; height: 44px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.readout-title {
    margin: 6px 0 0;
    font-family: var(--ss-display);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    word-spacing: 0.06em;
    color: var(--ss-text);
}
.readout-leer {
    margin: 8px 0 0;
    max-width: 520px;
    font-size: 15.5px;
    color: var(--ss-text-2);
}
.fn {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.fn li {
    padding: 14px 16px 15px;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-r-ctl);
    background: var(--ss-card-bg);
    box-shadow: var(--ss-light-top);
    transition: opacity 200ms var(--ss-ease);
}
.fn li.is-off { opacity: 0.42; }
.fn-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ss-text-3);
}
.fn-meta i { font-style: normal; color: var(--ss-text-3); }
.fn strong {
    display: block;
    margin-top: 6px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ss-text);
}
.fn p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ss-text-2); }

/* ===== LISTE ===== */
.keys-section {
    max-width: 1100px;
    margin: clamp(64px, 8vw, 104px) auto 0;
}
.keys-section-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.keys-h2 {
    font-family: var(--ss-display);
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    word-spacing: 0.06em;
    color: var(--ss-text);
}
.keys-sub { max-width: 560px; font-size: 15.5px; color: var(--ss-text-2); }
.keys-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: clamp(28px, 4vw, 44px);
}
.gcard {
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-r-card);
    background: var(--ss-card-bg);
    box-shadow: var(--ss-light-top), var(--ss-shadow-card);
}
.gcard[hidden] { display: none; }
.keys-leer { margin: clamp(28px, 4vw, 44px) 0 0; text-align: center; font-size: 15.5px; color: var(--ss-text-3); }
.keys-leer[hidden] { display: none; }
.gcard h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--ss-line);
    font-family: var(--ss-display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.2;
    word-spacing: 0.06em;
    color: var(--ss-text);
}
.gcard h3 small {
    font-family: var(--ss-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ss-text-3);
    white-space: nowrap;
}
.gcard ul { margin: 0; padding: 6px 0 10px; list-style: none; }
.row {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 11px 22px;
}
.row[hidden] { display: none; }
.row + .row { border-top: 1px solid var(--ss-line); }
.row-text strong {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ss-text);
}
.row-text strong em {
    margin-left: 8px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ss-text-3);
    white-space: nowrap;
}
.row-text span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ss-text-3); }

/* kleine Kappen in der Liste */
.kc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 6px;
    padding-top: 3px;
}
.kc-row > i { font-style: normal; font-size: 12px; color: var(--ss-text-3); }
.kc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    margin: 0;
    padding: 0 8px 2px;
    border: 0;
    border-radius: 8px;
    font-family: var(--ss-ui);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--ss-gold-hi);
    background: linear-gradient(168deg, #37373d 0%, #25252a 46%, #1a1a1e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 3px 0 #0b0b0e,
        0 4px 0 rgba(212, 175, 55, 0.4),
        0 7px 10px rgba(0, 0, 0, 0.6);
    transform: translateY(-3px);
    transition: transform 110ms var(--ss-ease), box-shadow 110ms var(--ss-ease), color 160ms var(--ss-ease);
}
.kc.is-word { font-size: 11px; letter-spacing: 0.01em; }
.kc svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
button.kc { cursor: pointer; }
button.kc:hover, button.kc:focus-visible {
    color: #f8e3a0;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 1px 0 #0b0b0e,
        0 2px 0 rgba(240, 210, 122, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.6);
    outline: none;
}
.kc.is-leer { color: var(--ss-text-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 3px 0 #0b0b0e, 0 7px 10px rgba(0, 0, 0, 0.6); }

/* ===== OHNE STANDARDTASTE ===== */
.keys-free {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(24px, 3.4vw, 36px);
}
.free {
    padding: 22px 20px 20px;
    border: 1px dashed var(--ss-line-strong);
    border-radius: var(--ss-r-card);
    background: rgba(255, 255, 255, 0.02);
    text-align: center;
}
.free strong { display: block; margin-top: 14px; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ss-text); }
.free span.t { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ss-text-3); }

/* ===== EIGENE TASTEN ===== */
.keys-howto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 860px;
    margin: clamp(56px, 7vw, 88px) auto 0;
    padding: 26px 28px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--ss-r-card);
    background: var(--ss-gold-06);
}
.keys-howto h2 {
    font-family: var(--ss-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    word-spacing: 0.06em;
    color: var(--ss-text);
}
.keys-howto p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; }
.keys-howto strong { font-weight: 600; }
.keys-howto .muted { font-size: 13.5px; color: var(--ss-text-3); }
.keys-howto .kc-row { padding-top: 8px; }
.keys-noscript {
    max-width: 860px;
    margin: 40px auto 0;
    padding: 18px 20px;
    border: 1px solid var(--ss-line-strong);
    border-radius: var(--ss-r-card);
    text-align: center;
    color: var(--ss-text);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
    .keys-free { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    /* Die Tastatur bleibt lesbar groß und lässt sich seitlich verschieben.
       Die Seite selbst scrollt dabei nicht zur Seite. */
    .kb-wrap { margin-left: calc(var(--ss-gutter) * -1); margin-right: calc(var(--ss-gutter) * -1); }
    .kb-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 30px 22px 76px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .kb-scroll::-webkit-scrollbar { display: none; }
    .kb { transform: rotateX(14deg); }
    .kb-swipe { display: block; }
    .keys-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .readout-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .readout-inner > div:not(.bigkey) { width: 100%; }
    .fn { text-align: left; }
    .fn-meta { justify-content: flex-start; }
    .readout-leer { margin-left: auto; margin-right: auto; }
    .bigkey { min-width: 88px; height: 88px; font-size: 34px; }
    .row { grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 11px 16px; }
    .kc-row { gap: 9px 4px; }
    .kc { min-width: 28px; padding: 0 6px 2px; }
    .gcard h3 { padding: 16px 16px 14px; font-size: 19px; }
    .keys-howto { grid-template-columns: 1fr; padding: 22px 20px; }
    .bereich { padding: 0 13px; font-size: 12.5px; }
    .suche { flex: 1 1 100%; }
    .suche input { font-size: 16px; }
    .vorschlaege { width: 100%; }
    .vorschlag { grid-template-columns: 112px minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .keys { padding-top: 28px; }
}
@media (max-width: 460px) {
    .keys-free { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .kb, .cap, .kc, .bereich, .suche input { transition: none; }
    .kb.is-boot .key.is-on .cap, .kb-brand i:nth-child(3) { animation: none; }
}