/*
 * Schreiben – Feld in Creme. Oben der Text in einer dunklen Leiste (wie die Satzleiste im Talker), darunter Vorschläge
 * und Extras, unten die Tastatur in 22 halben Spalten: Buchstaben 2, Umschalten und Löschen 3, Wort löschen 4,
 * Leerzeichen 10. Gespeicherte Sätze und Verlauf stehen an Stelle der Tastatur. Die Großanzeige liegt über allem.
 */

.schreiben {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.6vh, 12px);
    padding: clamp(10px, 2.4vh, 20px);
    color: var(--tinte);
}

/* ---------- Text, Alles löschen, Vorlesen ---------- */

.schreiben__oben {
    flex: none;
    height: clamp(92px, 19vh, 160px);
    display: flex;
    gap: 10px;
    padding: clamp(6px, 1.4vh, 12px);
    border-radius: clamp(18px, 3.2vh, 26px);
    background: var(--tinte);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35);
}
.schreiben__text {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 4px 14px;
    color: var(--creme);
    font-family: var(--schrift-titel);
    font-size: clamp(24px, 4.6vh, 40px);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    scrollbar-width: none;
}
.schreiben__text::-webkit-scrollbar { display: none; }
.schreiben__inhalt { white-space: pre-wrap; }
.schreiben__marke {
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -.12em;
    background: var(--orange);
    animation: schreiben-marke 1.1s steps(1) infinite;
}
@keyframes schreiben-marke {
    50% { opacity: 0; }
}
.bewegung-aus .schreiben__marke { animation: none; }
.schreiben__leer { margin-left: 8px; font-size: clamp(16px, 2.6vh, 21px); font-weight: 600; color: var(--tinte-leise); }

.schreiben__oben-knopf {
    flex: none;
    height: 100%;
    aspect-ratio: 104 / 100;
    display: grid;
    place-items: center;
    border-radius: clamp(16px, 2.7vh, 22px);
    cursor: pointer;
    transition: transform .45s var(--feder);
}
.schreiben__oben-knopf:active { transform: scale(.92); }
.schreiben__alles-loeschen { border: 2px solid var(--tinte-rand); background: var(--tinte-knopf); color: var(--creme); }
.schreiben__vorlesen { aspect-ratio: 130 / 100; border: 0; background: var(--orange); color: var(--tinte); box-shadow: var(--glanz-knopf); }
.schreiben__symbol { width: clamp(30px, 5.4vh, 48px); height: clamp(30px, 5.4vh, 48px); }

/* ---------- Wortvorschläge und Extras ---------- */

.schreiben__mitte { flex: none; height: clamp(50px, 8.2vh, 66px); display: flex; gap: 10px; }
.schreiben__vorschlaege { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.schreiben__vorschlag {
    min-width: 0;
    padding: 0 10px;
    border: 0;
    border-radius: clamp(14px, 2.2vh, 18px);
    background: var(--weiss);
    color: var(--tinte);
    box-shadow: inset 0 0 0 3px var(--orange), 0 4px 10px rgba(90, 60, 10, .1);
    font-family: var(--schrift-titel);
    font-size: clamp(16px, 2.7vh, 23px);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform .45s var(--feder);
    animation: schreiben-vorschlag .25s var(--feder);
}
.schreiben__vorschlag:active { transform: scale(.93); }
@keyframes schreiben-vorschlag {
    from { transform: scale(.85); opacity: 0; }
}
.bewegung-aus .schreiben__vorschlag { animation: none; }
.schreiben__extras { flex: none; display: flex; gap: 8px; }
.schreiben__extra {
    height: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: clamp(14px, 2.2vh, 18px);
    background: var(--tinte);
    color: var(--creme);
    cursor: pointer;
    transition: transform .45s var(--feder);
}
.schreiben__extra:active { transform: scale(.92); }
.schreiben__extra .schreiben__symbol { width: 58%; height: 58%; }

/* ---------- Tastatur ---------- */

.schreiben__tastatur {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(22, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(5px, 1vh, 9px);
}
.schreiben__taste {
    grid-column: span 2;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: clamp(12px, 2vh, 16px);
    background: var(--weiss);
    color: var(--tinte);
    box-shadow: 0 5px 12px rgba(90, 60, 10, .14);
    font-family: var(--schrift-titel);
    font-size: clamp(22px, 4.6vh, 40px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .3s var(--feder), background-color .15s;
}
.schreiben__taste:active { transform: scale(.9); background: var(--creme-dunkel); }
/* Großbuchstaben zeigen, wenn der nächste Buchstabe groß wird (ß bleibt ß) */
.schreiben__tastatur.ist-gross .schreiben__taste[data-zeichen]:not(.schreiben__taste--klein, .schreiben__taste--leer) { text-transform: uppercase; }
.schreiben__taste--umschalt, .schreiben__taste--loeschen { grid-column: span 3; background: var(--creme-dunkel); }
.schreiben__taste--umschalt.ist-an { background: var(--orange); }
.schreiben__taste--wort { grid-column: span 4; background: var(--creme-dunkel); font-size: clamp(14px, 2.3vh, 19px); }
.schreiben__taste--leer { grid-column: span 10; font-size: clamp(13px, 2vh, 16px); color: color-mix(in oklch, var(--tinte) 45%, var(--weiss)); }
.schreiben__taste .schreiben__symbol { width: clamp(28px, 5vh, 44px); height: clamp(28px, 5vh, 44px); }

/* ---------- Tafel: gespeicherte Sätze oder Verlauf (statt der Tastatur) ---------- */

.schreiben__tafel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(12px, 2vh, 18px);
    border-radius: clamp(18px, 3vh, 24px);
    background: var(--tinte);
    color: var(--creme);
}
.schreiben__tafel-kopf { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.schreiben__tafel-titel { flex: 1; margin: 0; font-family: var(--schrift-titel); font-size: clamp(20px, 3vh, 26px); font-weight: 700; }
.schreiben__tafel-hinweis { flex: none; margin: 0; font-size: 15px; color: var(--tinte-leise); }
.schreiben__tafel-liste {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.schreiben__eintrag { display: flex; gap: 8px; }
.schreiben__eintrag-text {
    flex: 1;
    min-width: 0;
    min-height: 58px;
    padding: 10px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--tinte-flaeche);
    color: var(--creme);
    font-family: var(--schrift-titel);
    font-size: clamp(17px, 2.6vh, 22px);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: transform .3s var(--feder);
}
.schreiben__eintrag-text:active { transform: scale(.98); }
.schreiben__eintrag-vorlesen {
    flex: none;
    width: 64px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    background: var(--orange);
    color: var(--tinte);
    cursor: pointer;
}
.schreiben__eintrag-vorlesen svg { width: 32px; height: 32px; }

/* ---------- Großanzeige: weiß, Text so groß wie möglich (Größe setzt skript.js) ---------- */

.schreiben-gross {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: grid;
    padding: 5vmin;
    background: var(--weiss);
    color: var(--tinte);
    cursor: pointer;
}
.schreiben-gross__text {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--schrift-titel);
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
    transition: transform .4s ease;
}
.schreiben-gross__text.ist-gedreht { transform: rotate(180deg); }
.schreiben-gross__knopf {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--tinte);
    color: var(--creme);
    cursor: pointer;
}
.schreiben-gross__knopf .schreiben__symbol { width: 34px; height: 34px; }

/* ---------- Schmal (Handy hochkant): drei Vorschläge, Extras darunter ---------- */

@media (max-width: 599px) {
    .schreiben { padding: 10px; }
    .schreiben__mitte { height: auto; flex-wrap: wrap; }
    .schreiben__vorschlaege { flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 48px; }
    .schreiben__extras { height: 48px; }
    .schreiben__taste { font-size: 20px; }
}