/* Niemiecki od zera – Oberfläche. Farben und Formen wie in den Schwester-Apps.
   Polen-Ausgabe: Erklärsprache Polnisch (links nach rechts). Deutsch bleibt
   fett, die Erklärung steht darunter. */

:root{
  --ink:#1c2436; --muted:#5c6672; --paper:#fff; --cream:#F9F9FB;
  --blau:#1E3A8A; --tuerkis:#0F7A7A; --gold:#E8A317;
  --gut:#1c9c5a; --gut-hell:#e6f9ee; --nicht:#b95f55; --nicht-hell:#fff0ef;
  --der:#1E5BA8; --die:#B0403C; --das:#1c7a4e;
  --line:#e3e6ec; --schatten:0 12px 30px rgba(26,43,76,.12); --radius:20px; --font-scale:1;
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--font-scale));background:var(--cream)}
body{margin:0;color:var(--ink);background:var(--cream);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.app-shell{width:min(100%,760px);margin:auto;min-height:100vh;background:var(--paper);padding-bottom:104px}

/* Kopf */
.topbar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);padding:10px 16px}
.marke{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;color:inherit;text-align:left;width:100%}
.marke img{border-radius:8px;flex:none}
.marke strong{display:block;font-size:1.1rem}
.marke-unter{font-size:.72rem;color:var(--muted)}
.entwickler{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.6rem;color:var(--muted);opacity:.8}
.entwickler img{width:56px;height:20px;object-fit:contain}
@media(max-width:520px){.entwickler span:not(.version){display:none}}

main{padding:16px;display:block}

/* Erklärzeilen (Polnisch) */
.sq{line-height:1.6}
.x-zeile{margin:8px 0;color:#33413a}
.klein{font-size:.82rem;color:var(--muted)}
.warnung{color:#8a352d}
/* Hinweis, dass der Browserspeicher die Freischaltung verlieren kann. */
.warnkasten{background:#fdf6ec;border:1px solid #e8d3ae;box-shadow:none;margin:0 0 10px;padding:12px 14px}
/* Anleitung „auf den Startbildschirm legen“. */
.anheften-karte{text-align:start}
.anheften-liste{margin:8px 0 10px;padding-inline-start:1.4em;line-height:1.8}
.anheften-liste li{margin-bottom:6px}
.gut{color:var(--gut)}

/* Knöpfe */
button{font:inherit}
.primary,.secondary,.gefahr,.text-knopf{border:0;border-radius:14px;padding:13px 16px;font-weight:800;cursor:pointer}
.primary{background:var(--blau);color:#fff;width:100%;margin-top:12px}
.secondary{background:#e9edf6;color:var(--ink);margin:6px 6px 0 0}
.gross{font-size:1.1rem;padding:16px}
.gefahr{background:#fff;border:1px solid var(--nicht);color:#8a352d;width:100%}
.text-knopf{background:none;color:var(--blau);padding:6px 0}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}

/* Start */
.start{text-align:center;padding:24px 8px 40px}
.start h1{font-size:1.7rem;line-height:1.4}
.start-bild{width:132px;height:132px;border-radius:26px;object-fit:cover;object-position:top}
.sprachwahl{display:grid;gap:12px;margin-top:24px}

/* Listen */
.seitenkopf{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.stationskopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.stationskopf b{direction:ltr}
.seitentitel{font-size:1.4rem;margin:0}
.niveau-kopf{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-weight:800}
.lektionskarte,.stationskarte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:14px;margin-bottom:10px;
  box-shadow:0 4px 14px rgba(26,43,76,.05);color:inherit}
.lektionskarte[disabled]{opacity:.55}
.lk-kopf{display:flex;flex-direction:column;gap:2px;flex:1;min-width:60%}
.stationskarte{align-items:center}
.stationskarte.fertig{background:var(--gut-hell);border-color:var(--gut)}
.st-nummer{width:34px;height:34px;border-radius:50%;background:#e9edf6;color:var(--blau);
  display:grid;place-items:center;font-weight:800;flex:none}
.st-mitte{display:flex;flex-direction:column;flex:1;gap:2px}
.haken{color:var(--gut);font-weight:900}
.marke{font-size:.72rem}
span.marke{padding:3px 9px;border-radius:999px;background:#eef2f9;color:var(--blau);font-weight:800;width:auto}
span.marke.frei{background:#e8f6ee;color:var(--gut)}
span.marke.zu{background:#f3f4f6;color:var(--muted)}
span.marke.gut{background:var(--gut-hell);color:var(--gut)}

/* Karten */
.karte{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--schatten);margin-bottom:14px}
.kopf{font-size:1.25rem;margin:0 0 10px}
.jupp-bild{float:right;width:84px;height:84px;margin:0 0 8px 12px;border-radius:18px;object-fit:cover;object-position:top}
.liste{padding-left:20px;padding-right:0}
.richtungspfeil{font-size:2rem;color:var(--gold);text-align:left}

/* Deutsche Zeile mit Lautsprecher */
.de-zeile{margin:10px 0;padding:10px 12px;border-radius:13px;background:#eef2f9;direction:ltr;text-align:left}
.de-kopf{display:flex;align-items:flex-start;gap:9px}
.de-text{font-size:1.05rem;line-height:1.5}
.laut{border:0;background:#fff;color:var(--blau);border-radius:50%;width:34px;height:34px;flex:none;
  font-size:1rem;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.laut.spricht{background:var(--gold);color:#fff}
.muster{background:#fff7e9}

/* Buchstaben und Zahlen */
.buchstaben{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.buchstabe{display:flex;flex-direction:column;gap:3px;align-items:flex-start;border:1px solid var(--line);
  background:#fff;border-radius:14px;padding:12px;text-align:left;cursor:pointer}
.buchstabe.spricht{border-color:var(--gold);background:#fff7e9}
.b-zeichen{font-size:1.6rem;direction:ltr}
.b-wort{color:var(--blau);font-weight:700;direction:ltr}
.b-laut,.b-x{font-size:.8rem;color:var(--muted)}
.zahlen{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:9px;margin-top:12px}
.zahl{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px;display:grid;gap:2px;cursor:pointer}
.z-ziffer{font-size:1.5rem}
.z-wort{color:var(--blau);font-weight:700}

/* Wortkarte */
.wortkarte{border-top:5px solid var(--line)}
.wortkarte.art-der{border-top-color:var(--der)}
.wortkarte.art-die{border-top-color:var(--die)}
.wortkarte.art-das{border-top-color:var(--das)}
.wort-kopf{display:flex;gap:10px;align-items:center}
.wort-gross{font-size:1.5rem;direction:ltr}
.wort-artikel{font-weight:800;margin-right:6px}
.art-der .wort-artikel{color:var(--der)}
.art-die .wort-artikel{color:var(--die)}
.art-das .wort-artikel{color:var(--das)}
.wort-plural{color:var(--muted);font-size:.85rem;direction:ltr}

/* Dialog */
.dialog-zeile{display:flex;gap:10px;margin-bottom:10px}
.wer{min-width:86px;font-size:.78rem;font-weight:800;color:var(--tuerkis);direction:ltr}
.dialog-inhalt{flex:1}

/* Grammatik */
.gtabelle{margin:12px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.gzeile{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.gzeile:last-child{border-bottom:0}
.gde{display:flex;align-items:center;gap:8px;flex:1;direction:ltr}
.gx{flex:1;font-size:.9rem;color:var(--muted)}
.platz2{margin:12px 0;display:grid;gap:8px}
.p2-zeile{display:flex;gap:6px;align-items:center;direction:ltr;flex-wrap:wrap}
.p2-feld{padding:7px 10px;border-radius:10px;background:#eef2f9;font-weight:700}
.p2-verb{background:var(--gold);color:#fff}
.p2-marke{font-size:.7rem;color:var(--muted)}
.bruecke{position:relative;margin:16px 0 8px;padding:16px 14px 10px;border:1px solid #d9cfac;border-radius:16px;background:#fff8e7}
.bruecke-marke{position:absolute;top:-11px;left:16px;background:var(--gold);color:#fff;font-size:.72rem;
  padding:3px 10px;border-radius:999px;font-weight:700}
.achte{margin-top:10px;padding:10px 12px;border-radius:12px;background:#eef4f0}

/* Übungen */
.uebung .hinweis{font-size:.85rem;color:var(--muted)}
.gross-hoeren{margin-bottom:12px}
.wahl{display:grid;gap:10px;margin:14px 0}
.wahl-artikel{grid-template-columns:repeat(3,1fr)}
.wahl-knopf{border:2px solid #dbe2ea;background:#fff;border-radius:14px;padding:13px;cursor:pointer;text-align:left;width:100%}
.wahl-knopf .wahl-de{font-weight:750;direction:ltr;display:block}
.wahl-knopf.gut{background:var(--gut-hell);border-color:var(--gut)}
.wahl-knopf.nicht{background:var(--nicht-hell);border-color:var(--nicht)}
.wahl-artikel .wahl-knopf{text-align:center;font-size:1.1rem}
.wahl-artikel .art-der{color:var(--der)} .wahl-artikel .art-die{color:var(--die)} .wahl-artikel .art-das{color:var(--das)}
.rueckmeldung{margin-top:12px;padding:12px;border-radius:13px;background:#f3f5f9}
.rueckmeldung.gut{background:var(--gut-hell)}
.rueckmeldung.nicht{background:var(--nicht-hell)}
.ordnen-ziel{min-height:56px;border:2px dashed #cbd3de;border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;
  gap:6px;direction:ltr;margin:10px 0}
.ordnen-ziel.als-wort{gap:2px}
.ordnen-ziel.gut{border-color:var(--gut);background:var(--gut-hell)}
.ordnen-ziel.nicht{border-color:var(--nicht);background:var(--nicht-hell)}
.ordnen-vorrat{display:flex;flex-wrap:wrap;gap:8px;direction:ltr}
.teil{border:2px solid #dbe2ea;background:#fff;border-radius:11px;padding:9px 12px;font-weight:700;cursor:pointer}
.teil.gewaehlt{border-color:var(--blau);background:#eef2f9}
.loesung-zeile{margin-top:10px;direction:ltr;font-weight:700}
.aufgabe-de{background:#fff7e9}

/* Aussprache und Aufnahme */
.aufnahme{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.aufnahme small{display:block;margin-top:8px}

/* Rollenspiel */
.rolle{display:grid;gap:10px;margin:12px 0}
.rolle-du{padding:10px 12px;border-radius:13px;background:#fff7e9}
.rolle-uhr{font-size:1.4rem;font-weight:800;color:var(--gold)}
.muster-marke{display:block;font-size:.72rem;color:var(--tuerkis);font-weight:800}

/* Prüfung */
.pruefungs-marke{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--blau);color:#fff;
  font-size:.7rem;font-weight:800;margin-bottom:10px;direction:ltr}
.pruefkarte{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:9px}
.pruefkarte.spaeter{opacity:.65}
.stichwort{display:block;font-size:1.05rem;color:var(--blau);direction:ltr}
.ergebnis-zahl{font-size:2.4rem;font-weight:800;text-align:center;color:var(--blau);direction:ltr}

/* Schreibfeld */
.schreibfeld{position:relative;margin:12px 0;border:1px solid var(--line);border-radius:16px;background:#fff;height:130px;overflow:hidden}
.schreibvorlage{position:absolute;inset:0;display:grid;place-items:center;font-size:4rem;color:#e6e9ef;direction:ltr;user-select:none}
.schreibflaeche{position:absolute;inset:0;width:100%;height:130px;touch-action:none}

/* Vokabelheft */
.reiter{display:flex;gap:6px;margin-bottom:12px}
.reiter-knopf{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;cursor:pointer}
.reiter-knopf.aktiv{background:var(--blau);color:#fff;border-color:var(--blau)}
.faellig-zahl{font-weight:800;color:var(--blau);margin-bottom:10px}
.karteikarte{min-height:180px;display:flex;flex-direction:column;gap:10px}
.kk-frage{display:flex;align-items:center;gap:10px;font-size:1.5rem;direction:ltr}
.kk-x{font-size:1.4rem}
.noten{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.note{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 4px;font-size:.85rem;cursor:pointer}
.note-nochmal{border-color:var(--nicht);color:#8a352d}
.note-gut{border-color:var(--gut);color:var(--gut)}
.wortliste{display:grid;gap:8px;margin-top:10px}
.wortzeile{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.wortzeile-mitte{display:flex;flex-direction:column;flex:1;direction:ltr}
.wortzeile.art-der{border-left:4px solid var(--der)}
.wortzeile.art-die{border-left:4px solid var(--die)}
.wortzeile.art-das{border-left:4px solid var(--das)}
.quelle{font-size:.7rem;color:var(--muted)}
.feld,.suchfeld{width:100%;border:1px solid #cbd3de;border-radius:12px;padding:11px 12px;font:inherit;background:#fff;margin-bottom:8px}
label.sq{display:block;margin-top:8px;font-size:.85rem;color:var(--muted)}
.code-feld{direction:ltr;text-transform:uppercase;letter-spacing:.06em;font-family:ui-monospace,Menlo,Consolas,monospace}
/* Sicherungstext: lang, lateinisch, Groß- und Kleinschreibung zählt. */
.sich-feld{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.code-aus{direction:ltr;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem}

/* Wissen */
.abschnitt{font-size:1.15rem;margin:22px 0 10px}
.verbkarte summary,.tabelle summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.05rem}
.verbkarte summary b,.tabelle summary b{direction:ltr}
.tabelle{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.tabellengitter{display:grid;gap:8px;margin-top:10px}
.tabellengitter.spalten-2{grid-template-columns:repeat(2,1fr)}
.tabellengitter.spalten-3{grid-template-columns:repeat(3,1fr)}
.tabellenzelle{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px;display:grid;gap:2px;cursor:pointer}
.tabellenzelle b{direction:ltr;font-size:1.05rem}
.verbtabelle{display:grid;gap:4px;margin-top:10px}
.verbzeile{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:11px;padding:8px 10px;direction:ltr;cursor:pointer}
.verbzeile.unregel{background:#fff7e9;border-color:var(--gold)}
.person{min-width:82px;color:var(--muted);font-size:.85rem}
.perfektzeile{display:flex;align-items:center;gap:9px;margin-top:10px;direction:ltr}

/* Einstellungen */
.schalter{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.schieber{padding:10px 0;border-bottom:1px solid var(--line)}
.schieber-kopf{display:flex;justify-content:space-between;align-items:center}
.schieber input[type=range]{width:100%}
.wahlreihe{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.wahlblock{margin:12px 0}
.chip,.haken-knopf{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer}
.chip.an,.haken-knopf.an{background:var(--blau);color:#fff;border-color:var(--blau)}
.auswahl-lektionen{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.haken-knopf{border-radius:12px;direction:ltr}
.rechtlich{display:flex;gap:18px;justify-content:center;margin:14px 0 6px}
.rechtlich a{color:var(--blau)}

/* Fußzeile und Navigation */
.fusszeile{display:flex;justify-content:center;gap:20px;padding:8px 16px 20px;color:var(--muted);font-size:.78rem}
.fusszeile a{color:var(--blau)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,760px);z-index:10;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bottom-nav button{border:0;background:none;color:var(--muted);min-height:56px;border-radius:12px;
  display:grid;place-items:center;gap:1px;cursor:pointer}
.bottom-nav span{font-size:1.1rem}
.bottom-nav b{font-size:.64rem}
.bottom-nav i{font-size:.62rem;font-style:normal;opacity:.85}
.bottom-nav button.aktiv{background:#e9edf6;color:var(--blau)}

/* Hörbuch */
.hoerbox{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;width:min(100%,760px);z-index:20;
  background:#101a33;color:#fff;padding:16px 16px 12px;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.3)}
.hoerbox-satz{font-size:1.25rem;line-height:1.6;direction:ltr;min-height:2.6em}
.hb-wort{padding:1px 2px;border-radius:5px}
.hb-wort.jetzt{background:var(--gold);color:#16213c}
.hoerbox-x{color:#c7d0e4;font-size:.95rem;margin-top:6px}
.hoerbox-leiste{height:4px;background:rgba(255,255,255,.2);border-radius:4px;margin:10px 0}
.hoerbox-leiste i{display:block;height:4px;background:var(--gold);border-radius:4px;width:0}
.hoerbox-knoepfe{display:flex;gap:8px;justify-content:center}
.hoerbox-knoepfe button{border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;
  font-size:1.1rem;padding:10px 18px;cursor:pointer;margin:0}
.hoerbox-knoepfe .primary{background:var(--gold);color:#16213c;width:auto;margin:0}
body.hoerbuch-an .app-shell{padding-bottom:230px}

@media(min-width:640px){main{padding:22px}.karte{padding:22px}}
@media(prefers-reduced-motion:no-preference){.karte{animation:auf .22s ease-out}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}

/* Hinweis unter der Perfekt-Zeile in der Verbkarte. */
.perfekt-hinweis { color: #6b7280; padding: 0 12px 10px; line-height: 1.6; }

/* Wissen: die drei Bereiche sind zusammenklappbar. */
.wissensblock{background:#fff;border:1px solid #dfe3ea;border-radius:14px;margin:12px 0;overflow:hidden}
.wissensblock > summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:baseline;gap:8px;font-size:17px}
.wissensblock > summary::-webkit-details-marker{display:none}
.wissensblock > summary::after{content:'▾';margin-inline-start:auto;color:#6b7280}
.wissensblock[open] > summary::after{content:'▴'}
.wissensblock[open] > summary{border-bottom:1px solid #dfe3ea}
.wissensblock > *:not(summary){margin:12px}
.wissensblock > summary .de-wort{font-size:17px}
.wissensblock > summary .sq{font-weight:400;margin-inline-start:10px}

/* Vertiefung: deutsche Überschrift oben, Übersetzung darunter. */
.kopf-de{direction:ltr;text-align:left;font-size:19px;line-height:1.4;margin:0 0 4px}
.kopf-neben{margin:0 0 10px;font-size:15px;color:#4b5563;font-weight:400}

/* Vertiefung: Kapitelkarten und der Einstieg dorthin. */
.vertiefungskarte.blass{opacity:.55}
.vertiefungseinstieg{border-style:dashed}

/* ------------------------------------------------- Kulturhinweis an einer Seite
   Zugeklappt und in Gold: ein Angebot, keine Ermahnung. Der Hinweis soll den
   Unterricht nicht unterbrechen – wer sich wundert, tippt darauf. */
.kulturfeld{margin:14px 0 0;border:1px solid #f0dcb0;border-radius:var(--radius);
  background:#fffaf0;overflow:hidden}
.kultur-knopf{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:13px 15px;text-align:start;color:var(--ink);font-weight:700;font-size:1rem}
.kultur-zeichen{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.kultur-titel{direction:ltr;text-align:start}
.kulturfeld.offen .kultur-knopf{border-bottom:1px solid #f0dcb0}
.kultur-text{padding:12px 15px 15px}
.kultur-text > *{margin:0 0 9px}
.kultur-text > *:last-child{margin-bottom:0}

/* Die eine Frage am Anfang: Kennst du die lateinischen Buchstaben schon? */
.hinweiskasten{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;margin:0 0 14px}
.hinweiskasten p{margin:8px 0 0;color:var(--muted)}
.frage-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.frage-knoepfe button{flex:1 1 auto}
.dochzeigen{margin-top:10px}

/* Darija-Sprechblase: die Erklärung so, wie man sie in Rabat sagen würde –
   in der Chat-Schrift, die die Lernenden von WhatsApp kennen. Bewusst als
   Blase und nicht als Fließtext: Sie ist eine Brücke, kein Lernstoff. */
.darija{position:relative;margin:16px 0 4px;padding:12px 14px 10px;background:#e7f6ee;
  border:1px solid #bfe5cf;border-radius:18px 18px 18px 4px;color:#173b2a}
.darija-marke{position:absolute;top:-10px;left:14px;background:#1c7a4e;color:#fff;font-size:.7rem;
  font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:.02em}
.darija-text{margin:2px 0 0;line-height:1.55;font-size:1.02rem}
.darija-glosse{margin:6px 0 0;font-size:.82rem;color:#3f6b55;font-style:italic}
.darija-text b{color:#0f4f31}

/* Verbund: Installationsleiste (app.js → installLeiste) */
.install-leiste{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom));
  width:min(calc(100% - 24px),520px);z-index:20;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px rgba(20,30,60,.18)}
.install-leiste .install-bild{width:40px;height:40px;border-radius:10px;flex:none}
.install-leiste .primary{flex:1;margin:0;min-height:44px}
.install-zu{flex:none;border:0;background:none;font-size:1.6rem;line-height:1;color:var(--muted);width:40px;height:40px;cursor:pointer}

/* B1plus: deutsche Erklärtexte im Feld der Muttersprache, und die Ergänzung darunter */
.b2-erkl{white-space:pre-line}
.sq.lat{direction:ltr;text-align:left;unicode-bidi:isolate;font-family:inherit;line-height:1.55}
.x-hilfe{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed #cfd8d3;font-size:.92em;color:#4b5a52;
  white-space:normal;line-height:1.6}
.x-hilfe.lat{direction:ltr;text-align:left;line-height:1.5}