/* Gesprächswürfel */
.kopf p { max-width: var(--lesebreite); }
#wahl { margin-top: 1.2rem; }
.kat small { line-height: 1.3; /* gestaltung: ok */ }

.buehne { margin: 1rem 0; padding: 1.1rem 1.3rem 1.3rem; border-top: 4px solid var(--akzent); background: color-mix(in srgb, var(--akzent-hell) 45%, var(--blatt)); }
.buehne-kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.buehne-titel { font-family: var(--titel-schrift); font-size: 1.35rem; }
.stapel-zahl { font-size: .85rem; color: var(--tinte-leise); flex: 1 1 auto; }
.knopf.klein { min-height: 2.25rem; padding: .2rem .8rem; font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center; }

.wurfzone { display: flex; justify-content: center; gap: 1.6rem; margin: 1.2rem 0 1rem; min-height: 7.5rem; }
.wuerfel-huelle { display: grid; justify-items: center; gap: .35rem; }
.wuerfel-huelle small { font-size: .78rem; color: var(--tinte-leise); }
.wuerfel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 4px; width: 5.75rem; height: 5.75rem; padding: 12px; border-radius: 18px; background: var(--blatt); border: 2px solid var(--akzent); box-shadow: 0 6px 0 color-mix(in srgb, var(--akzent) 35%, transparent); }
.auge { border-radius: 50%; /* gestaltung: ok – Würfelaugen, Größe im Würfel gesetzt */ }
.auge.an { background: var(--akzent); }
.wuerfel.rollt { animation: rollen .21s ease-in-out; }
@keyframes rollen { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(18deg) translateY(-10px); } 100% { transform: rotate(-6deg) translateY(0); } }

.stapel { position: relative; width: 9.375rem; height: 6.5rem; }
.stapelkarte { position: absolute; inset: 0; border-radius: 12px; background: var(--blatt); border: 2px solid var(--akzent); box-shadow: 0 4px 0 color-mix(in srgb, var(--akzent) 30%, transparent); }
.stapelkarte:nth-child(1) { transform: rotate(-6deg); }
.stapelkarte:nth-child(2) { transform: rotate(4deg); }
.stapelkarte:nth-child(3) { background: var(--akzent); }
.stapel.rollt .stapelkarte:nth-child(3) { animation: mischen .2s ease-in-out; }
@keyframes mischen { 50% { transform: translateX(18px) rotate(8deg); } }
.stapel.gezogen .stapelkarte:nth-child(3) { animation: ziehen .4s ease-out; }
@keyframes ziehen { from { transform: translateY(-14px) rotate(-3deg); } to { transform: none; } }

.ausgabe { min-height: 9rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--blatt); border: 1px solid var(--linie); transition: opacity .15s ease; }
.ausgabe.verdeckt { opacity: .25; }
.karte-kopf { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: .5rem; }
.kategorie { padding: .1rem .65rem; border-radius: var(--rund-pille); background: var(--akzent); color: var(--akzent-text); font-size: .8rem; font-weight: 700; }
.karte-kopf .nr { font-weight: 700; color: var(--akzent); font-size: .92rem; }
.frage { margin: 0; font-family: var(--titel-schrift); font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.3; }
.impuls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; margin-top: 1rem; padding: .6rem .8rem; border-radius: 10px; background: var(--gold-hell); font-size: .95rem; }
.impuls .ic { color: var(--gold); margin-top: .15rem; }
.leer-hinweis { margin: 0; color: var(--tinte-leise); text-align: center; padding-top: 2rem; }

.steuerung { display: flex; flex-wrap: wrap; gap: var(--eng); align-items: center; margin-top: 1rem; }
.knopf.gross { min-height: 3.25rem; padding: .4rem 1.6rem; font-size: 1.1rem; display: inline-flex; gap: .5rem; align-items: center; }
.steuerung .knopf { display: inline-flex; gap: .4rem; align-items: center; }
.timer-wahl { display: inline-flex; flex-wrap: wrap; gap: var(--eng); align-items: center; font-size: .88rem; color: var(--tinte-leise); }
.timer-wahl button { font: inherit; font-weight: 600; min-height: 2.125rem; padding: .1rem .6rem; border-radius: var(--rund-pille); border: 1px solid var(--linie-fest); background: var(--blatt); color: var(--tinte); cursor: pointer; }
.timer-wahl button:hover { border-color: var(--akzent); }
.timer { font-family: var(--titel-schrift); font-size: 1.8rem; color: var(--akzent); cursor: pointer; min-width: 4.5rem; text-align: center; }
.timer.vorbei { animation: blinken 1s ease-in-out 3; }
@keyframes blinken { 50% { opacity: .2; } }

.methoden { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--spalte); margin: .6rem 0; }
.methode { padding: .9rem 1rem; }
.methode h3 { margin: .3rem 0 .2rem; font-size: 1.1rem; }
.methode p { margin: 0; font-size: .93rem; }
.methode .symbol { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--akzent-hell); color: var(--akzent); line-height: 1; }
.gruppe { margin-top: 2rem; }
.gruppe h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.5rem; }
.gruppe h2 .ic { color: var(--akzent); }
.leise-klein { font-size: .88rem; color: var(--tinte-leise); }
.alle-karten > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; display: flex; gap: .5rem; align-items: center; list-style: none; }
.alle-karten > summary::-webkit-details-marker { display: none; }
.alle-karten > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; font-weight: 400; color: var(--akzent); }
.alle-karten[open] > summary::after { content: "–"; }
#alle-liste { padding: 0 1.1rem 1rem; }
#alle-liste h3 { font-size: 1.05rem; margin: 1rem 0 .3rem; color: var(--akzent); }
#alle-liste ul { margin: 0; padding-left: 1.2rem; }
#alle-liste li { margin: .3rem 0; font-size: .94rem; }

/* Vollbild für den Beamer */
.buehne:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 3vw 6vw; background: var(--papier); overflow: auto; }
.buehne:fullscreen .frage { font-size: clamp(2rem, 4vw, 3.4rem); }
.buehne:fullscreen .wuerfel { width: 8.75rem; height: 8.75rem; }
.buehne:fullscreen .impuls { font-size: 1.3rem; }
@media (max-width: 560px) { .buehne { padding: .9rem; } .wuerfel { width: 4.75rem; height: 4.75rem; padding: 10px; } .ausgabe { padding: .9rem; } }
.stapelkarte:nth-child(1), .stapelkarte:nth-child(2) { background: var(--akzent-hell); }
.stapelkarte:nth-child(3)::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--akzent-text); font-family: var(--titel-schrift); font-size: 3rem; }
.art { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: var(--rund-pille); font-size: .78rem; font-weight: 700; border: 1px solid currentColor; }
.art-situation { color: var(--gold); background: var(--gold-hell); }
.art-frage { color: var(--akzent); background: var(--akzent-hell); }
.art .ic { width: 0.9375rem; height: 0.9375rem; }
.frage.situation { font-style: italic; }
.art-mini { display: inline-block; margin-right: .4rem; padding: 0 .45rem; border-radius: var(--rund-pille); font-size: .7rem; font-weight: 700; }
.filterleiste .trenner { color: var(--linie-fest); margin: 0 .2rem; }
.wuerfel.zahl { display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; font-family: var(--titel-schrift); font-size: 2.6rem; color: var(--akzent); }
.buehne:fullscreen .wuerfel.zahl { font-size: 4rem; }
.zum-kompass { display: inline-block; margin-top: .6rem; font-weight: 700; font-size: .9rem; }
.aufdecken { margin-top: .7rem; }
.aufdecken > summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--akzent); display: inline-flex; align-items: center; gap: .35rem; }
.aufdecken ol { margin: .5rem 0 0; padding-left: 1.3rem; }
.aufdecken li { margin: .3rem 0; }
.timer-feld { display: inline-flex; align-items: center; gap: .4rem; }
.timer-feld[hidden] { display: none; }
.timer { cursor: default; }

/* Alle Karten kompakt in zwei Spalten */
#alle-liste ul { columns: 2; column-gap: calc(var(--spalte) + 1.2rem); max-width: none; }
#alle-liste li { break-inside: avoid; margin-top: 0; }
@media (max-width: 720px) { #alle-liste ul { columns: 1; } }