/*
 * Talker – Feld in Creme. Oben die Satzleiste, darunter Kategorien und das Wortraster (6 × 4).
 * Bildflächen sind schraffierte Platzhalter, bis klar ist, woher die Symbole kommen.
 */

.talker {
    --schraffur: repeating-linear-gradient(135deg, #F3E7CB 0 8px, #FBF5E6 8px 16px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.7vh, 14px);
    padding: clamp(10px, 2.7vh, 22px);
    color: var(--tinte);
}

/* ---------- Satzleiste ---------- */

.talker__satzleiste {
    flex: none;
    height: clamp(76px, 15vh, 124px);           /* Satzleiste wächst mit der Bildschirmhöhe */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: clamp(6px, 1.5vh, 12px);
    border-radius: clamp(18px, 3.2vh, 26px);
    background: var(--tinte);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, .35);
}
.talker__satz {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.talker__satz::-webkit-scrollbar { display: none; }
.talker__leer { padding-left: 14px; font-size: 19px; color: var(--tinte-leise); }

/* Wort im Satz */
.talker__karte {
    flex: none;
    height: 100%;
    aspect-ratio: 104 / 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 16px;
    background: var(--creme);
    color: var(--tinte);
}
.talker__karte .talker__bild { border-radius: 10px; }
.talker__karte .talker__wort-text { font-size: clamp(12px, 2.1vh, 17px); }

.talker__loeschen,
.talker__vorlesen {
    flex: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, .7vh, 6px);
    border-radius: clamp(16px, 2.7vh, 22px);
    font-family: var(--schrift-titel);
    font-weight: 700;
    cursor: pointer;
    transition: transform .45s var(--feder);
}
.talker__loeschen {
    aspect-ratio: 104 / 100;
    border: 2px solid var(--tinte-rand);
    background: transparent;
    color: var(--creme);
    font-size: clamp(12px, 2vh, 16px);
}
.talker__loeschen:active { transform: scale(.92); }

/* Löschen und Alles löschen als ein Block: gemeinsamer Rahmen, Trennlinie, „Alles löschen“ etwas heller */
.talker__loeschgruppe {
    flex: none;
    height: 100%;
    display: flex;
    border: 2px solid var(--tinte-rand);
    border-radius: clamp(16px, 2.7vh, 22px);
    overflow: hidden;
}
.talker__loeschgruppe .talker__loeschen { border: 0; border-radius: 0; transition: background-color .15s; }
.talker__loeschgruppe .talker__loeschen:active { transform: none; background: var(--tinte-rand); }
.talker__loeschgruppe .talker__alles-loeschen { border-left: 2px solid var(--tinte-rand); background: var(--tinte-knopf); }
/* Nur Symbole, dafür groß */
.talker__loeschen .talker__knopf-symbol { width: clamp(30px, 5.4vh, 46px); height: clamp(30px, 5.4vh, 46px); }
.talker__vorlesen {
    aspect-ratio: 130 / 100;
    border: 0;
    background: var(--orange);
    color: var(--tinte);
    box-shadow: var(--glanz-knopf);
    font-size: clamp(14px, 2.3vh, 19px);
}
.talker__vorlesen:active { transform: scale(.93); }
.talker__vorlesen .talker__knopf-symbol { width: clamp(34px, 6.2vh, 52px); height: clamp(34px, 6.2vh, 52px); }

/* ---------- Wortvorschläge: bis zu 6 kleine Karten unter dem Satz (Bild links, Wort rechts) ---------- */

.talker__vorschlaege {
    flex: none;
    height: clamp(46px, 7.6vh, 62px);         /* bleibt gleich hoch, auch ohne Vorschläge */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 100%;
    gap: clamp(6px, 1.2vh, 10px);
}
.talker__vorschlag {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border: 0;
    border-radius: clamp(12px, 2vh, 16px);
    background: var(--weiss);
    color: var(--tinte);
    box-shadow: inset 0 0 0 3px var(--kfarbe), 0 4px 10px rgba(90, 60, 10, .1);
    cursor: pointer;
    transition: transform .45s var(--feder);
    animation: vorschlag-neu .3s var(--feder);
}
.talker__vorschlag.kfarbe-creme { box-shadow: inset 0 0 0 3px var(--creme-dunkel), 0 4px 10px rgba(90, 60, 10, .1); }
.talker__vorschlag:active { transform: scale(.92); }
.talker__vorschlag .talker__bild { flex: none; width: auto; height: 100%; min-height: 0; aspect-ratio: 1; border-radius: 9px; }
.talker__vorschlag .talker__wort-text { flex: 1; min-width: 0; text-align: left; font-size: clamp(14px, 2.2vh, 18px); }
@keyframes vorschlag-neu {
    from { transform: scale(.85); opacity: 0; }
}
.bewegung-aus .talker__vorschlag { animation: none; }

/* ---------- Kategorien ---------- */

.talker__kategorien {
    flex: none;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 7px;               /* Platz für den Doppelring der gewählten Kategorie … */
    margin: -5px;               /* … ohne dass die Zeile dadurch höher wirkt */
}
.talker__kategorien::-webkit-scrollbar { display: none; }
.talker__kategorie {
    flex: none;
    height: clamp(40px, 6.3vh, 52px);
    padding: 0 clamp(14px, 2.7vh, 22px);
    border: 0;
    border-radius: var(--radius-voll);
    background: var(--creme-dunkel);
    color: var(--tinte);
    font-family: var(--schrift-titel);
    font-size: clamp(15px, 2.2vh, 18px);
    font-weight: 700;
    cursor: pointer;
    transition: transform .45s var(--feder), background-color .25s;
}
.talker__kategorie:active { transform: scale(.92); }
/* Jede Kategorie in ihrer Farbe (Einstellungen → Talker → Karten); die gewählte mit Doppelring */
.talker__kategorie[class*="kfarbe-"] { background: var(--kfarbe); color: var(--kfarbe-text); }
.talker__kategorie.kfarbe-creme { box-shadow: inset 0 0 0 2px var(--creme-dunkel); }   /* sonst auf dem cremefarbenen Feld unsichtbar */
.talker__kategorie.ist-gewaehlt { box-shadow: 0 0 0 3px var(--creme), 0 0 0 6px var(--tinte); }

/* Weg auf einer Unterseite – steht an Stelle der Kategorien und ist genauso hoch */
.talker__weg {
    flex: none;
    height: clamp(40px, 6.3vh, 52px);
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.talker__weg-knopf {
    flex: none;
    height: 100%;
    padding: 0 clamp(16px, 2.9vh, 24px);
    border: 0;
    border-radius: var(--radius-voll);
    background: var(--tinte);
    color: var(--creme);
    font-family: var(--schrift-titel);
    font-size: clamp(15px, 2.2vh, 18px);
    font-weight: 700;
    cursor: pointer;
    transition: transform .45s var(--feder);
}
.talker__weg-knopf:active { transform: scale(.92); }
.talker__weg-text {
    flex: 1;
    min-width: 0;
    font-family: var(--schrift-titel);
    font-size: clamp(16px, 2.5vh, 21px);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Fläche: links Kernwörter, rechts die Karten der Kategorie ---------- */

/*
 * Rechts sichtbar sind --spalten × --zeilen Karten (je Kategorie einstellbar: 6×4, 8×6, 12×8), links eine schmale
 * Spalte mit 8 kleinen, quadratischen Kernwort-Karten (bei jeder Rastergröße gleich) – beide lassen sich senkrecht wischen,
 * wenn mehr Karten da sind. --rand = farbiger Rand.
 */
.talker__flaeche {
    --spalten: 6;
    --zeilen: 4;
    --rand: 4px;
    --ecke: 44px;                       /* Ecke der Unterseiten */
    --raster-abstand: clamp(6px, 1.2vh, 10px);
    flex: 1;
    min-height: 0;
    display: flex;
    gap: var(--raster-abstand);
    container-type: size;               /* der Kernbereich richtet seine Breite nach der Höhe (cqh) */
}
.talker__kern, .talker__raster {
    min-height: 0;
    display: grid;
    grid-auto-rows: calc((100% - (var(--zeilen) - 1) * var(--raster-abstand)) / var(--zeilen));
    gap: var(--raster-abstand);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.talker__kern::-webkit-scrollbar, .talker__raster::-webkit-scrollbar { display: none; }
.talker__kern {
    --zeilen: 8;                                   /* eine Spalte, 8 kleine Karten untereinander */
    --rand: 3px;
    --ecke: 22px;
    --raster-abstand: clamp(4px, .8vh, 7px);
    flex: none;
    width: clamp(64px, 8vh, 84px);                 /* Ersatz für alte Browser */
    /* quadratische Karten: Spalte so breit wie eine der 8 Reihen hoch ist (cqh = Höhe der Fläche), dazu Abstand und Linie */
    width: calc((100cqh - 7 * var(--raster-abstand)) / 8 + clamp(6px, 1.2vh, 10px) + 3px);
    grid-template-columns: minmax(0, 1fr);
    padding-right: clamp(6px, 1.2vh, 10px);
    border-right: 3px solid var(--creme-dunkel);   /* trennt die Kernwörter von der Kategorie */
}
.talker__rechts { flex: var(--spalten) 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--raster-abstand); }
.talker__raster { flex: 1; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); }
.talker__wort {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, .7vh, 6px);
    padding: clamp(6px, 1.2vh, 10px);   /* Bild bleibt innerhalb des farbigen Rands */
    border: 0;
    border-radius: clamp(12px, 2.2vh, 18px);
    background: var(--weiss);
    color: var(--tinte);
    box-shadow: 0 6px 14px rgba(90, 60, 10, .12);
    cursor: pointer;
    transition: transform .45s var(--feder);
}
.talker__wort:active { transform: scale(.92); }
.talker__wort[hidden] { display: none; }       /* Karten der anderen Kategorien */
/* Rand in der Farbe der Kategorie (rechts die gewählte, links die der Kernwörter) */
.hat-kategorie .talker__wort { box-shadow: inset 0 0 0 var(--rand) var(--kfarbe), 0 6px 14px rgba(90, 60, 10, .12); }
.hat-kategorie.kfarbe-creme .talker__wort { box-shadow: inset 0 0 0 var(--rand) var(--creme-dunkel), 0 6px 14px rgba(90, 60, 10, .12); }

/*
 * Unterseite (öffnet weitere Karten): ganze Karte hell in der Kategoriefarbe, dazu oben rechts eine große Ecke
 * in der Kategoriefarbe mit Pfeil „›“ – erst die Ecke (::before), darüber der Pfeil (::after).
 */
.talker__wort { position: relative; }
/* Kernwörter links: ganz leicht in der Farbe ihrer Kategorie – so heben sie sich von den Karten rechts ab */
.talker__kern.hat-kategorie .talker__wort:not(.talker__wort--seite) { background: color-mix(in srgb, var(--kfarbe) 13%, var(--weiss)); }
.talker__kern.hat-kategorie.kfarbe-creme .talker__wort:not(.talker__wort--seite) { background: color-mix(in srgb, var(--creme-dunkel) 25%, var(--weiss)); }
.hat-kategorie .talker__wort--seite { background: color-mix(in srgb, var(--kfarbe) 30%, var(--weiss)); }
.hat-kategorie.kfarbe-creme .talker__wort--seite { background: color-mix(in srgb, var(--creme-dunkel) 45%, var(--weiss)); }
.talker__wort--seite::before,
.talker__wort--seite::after {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}
.talker__wort--seite::before {
    content: "";
    width: var(--ecke);
    height: var(--ecke);
    border-top-right-radius: inherit;
    background: var(--kfarbe, var(--tinte));
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.talker__wort--seite::after {
    content: "›";
    width: calc(var(--ecke) * .6);
    height: calc(var(--ecke) * .54);
    display: grid;
    place-items: center;
    font-family: var(--schrift-titel);
    font-size: calc(var(--ecke) * .9);
    font-weight: 700;
    line-height: 1;
    color: var(--kfarbe-text, var(--weiss));
}
.kfarbe-creme .talker__wort--seite::before { background: var(--creme-dunkel); }
.kfarbe-creme .talker__wort--seite::after { color: var(--tinte); }

/* Mehr Karten auf einmal: kleinere Abstände, Ränder, Ecken und Schrift */
.talker__flaeche.raster-8x6 { --spalten: 8; --zeilen: 6; --rand: 3px; --ecke: 32px; --raster-abstand: clamp(5px, 1vh, 8px); }
.raster-8x6 .talker__wort { gap: 2px; padding: clamp(5px, .9vh, 8px); border-radius: clamp(10px, 1.7vh, 14px); }
.raster-8x6 .talker__wort-text { font-size: clamp(11px, 1.9vh, 16px); }
.talker__flaeche.raster-12x8 { --spalten: 12; --zeilen: 8; --rand: 2px; --ecke: 22px; --raster-abstand: clamp(3px, .7vh, 6px); }
.raster-12x8 .hat-kategorie .talker__wort { gap: 1px; padding: clamp(3px, .6vh, 5px); border-radius: clamp(7px, 1.2vh, 10px); box-shadow: inset 0 0 0 var(--rand) var(--kfarbe); }
.raster-12x8 .talker__wort-text { font-size: clamp(9px, 1.4vh, 12px); }
.raster-12x8 .talker__bild { border-radius: 5px; }

/* Kernwörter: kleine Karten mit kleinem Symbol – gleich bei jeder Rastergröße */
.talker__flaeche .talker__kern .talker__wort { container-type: inline-size; gap: 1px; padding: clamp(3px, .6vh, 5px); border-radius: clamp(8px, 1.4vh, 12px); }
.talker__flaeche .talker__kern .talker__wort-text {
    font-size: clamp(10px, 1.5vh, 13px);         /* Ersatz für alte Browser */
    font-size: clamp(9px, 26cqi, 14px);          /* wächst mit der Karte (cqi = Breite innen) */
}
.talker__flaeche .talker__kern .talker__bild { border-radius: 6px; }

/* Bild der Karte (ARASAAC oder Foto) – ohne Bild eine schraffierte Fläche */
.talker__bild { flex: 1; min-height: 0; width: 100%; display: block; border-radius: 12px; object-fit: contain; -webkit-user-drag: none; }
.talker__bild--leer { background: var(--schraffur); }
.talker__keine-karten { grid-column: 1 / -1; align-self: center; padding: 20px; text-align: center; font-size: 19px; font-weight: 700; color: color-mix(in oklch, var(--tinte) 60%, var(--creme)); }
.talker__wort-text {
    display: block;
    font-family: var(--schrift-titel);
    font-size: clamp(13px, 2.4vh, 20px);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fliegendes Wort (Kopie der Kachel auf dem Weg in die Satzleiste) */
.talker__flieger {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 16px;
    background: var(--weiss);
    color: var(--tinte);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.talker__flieger .talker__bild { border-radius: 10px; }
.talker__flieger .talker__wort-text { font-size: 18px; }

/* ---------- Kleinere Bildschirme: weniger Spalten, das Feld scrollt ---------- */

@media (max-width: 599px), (orientation: portrait) {
    .talker { height: auto; }
    .talker__flaeche { flex: none; flex-direction: column; container-type: normal; }
    .talker__kern { flex: none; width: auto; padding: 0 0 var(--raster-abstand); border-right: 0; border-bottom: 3px solid var(--creme-dunkel); }
    .talker__kern, .talker__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 120px; overflow: visible; }
}
/* Handy hochkant: drei Spalten; Löschen, Alles löschen und Vorlesen in einer Reihe unter dem Satz */
@media (max-width: 599px) {
    .talker { padding: 12px; }
    .talker__satzleiste { height: auto; flex-wrap: wrap; gap: 6px; }
    .talker__satz { flex: 1 1 100%; height: 72px; }
    .talker__loeschgruppe { flex: 2 1 0; min-width: 0; height: 68px; }
    .talker__loeschen, .talker__vorlesen { flex: 1 1 0; min-width: 0; height: 68px; aspect-ratio: auto; padding: 0 4px; }
    .talker__loeschgruppe .talker__loeschen { height: 100%; }
    .talker__loeschen .talker__knopf-symbol, .talker__vorlesen .talker__knopf-symbol { width: 34px; height: 34px; }
    .talker__kern, .talker__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 104px; }
    .talker__vorschlaege { height: auto; min-height: 52px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 52px; }
    .talker__wort-text { font-size: 17px; }
}