/* grammatik2026.css für grammatiken.de – auf main.g begrenzt (Lernseiten-2026/converter) */
/* grammatik2026.css — gemeinsames Stylesheet der Grammatiken, Design 5O (Udo, 2026-10-27)
   Bausteine (Klassen):
   main.g            Seitenrahmen          header.kopf > .kat + h1   Kopf mit Kapitelzeile
   p.intro           Einleitung (Karte)    section#sN > h2 > span.nr Abschnitt mit Nummer
   div.tw > table.gt Tabelle; td.k = Schlüsselspalte, td[data-l] = Spaltenname fürs Handy,
                     span.ls = Fremdsprache, span.ue = Übersetzung
   div.merke > .mt   Merke-Kasten          div.bsp > div.b > .bn + .bt > .ls/.tl/.ue  Beispielsätze
   Desktop: jede zweite Tabellenzeile zartgelb. Handy (bis 640 px): Tabellenzeilen werden Karten. */
*{box-sizing:border-box}.g{margin:0;font-family:Ubuntu,"Source Sans Pro",system-ui,sans-serif;font-size:17px;line-height:1.55;}
.g{max-width:860px;margin:0 auto;padding:28px 32px 48px}.g h1{margin:.2em 0 .6em;line-height:1.2}.g h2{display:flex;align-items:center;gap:10px;margin:1.8em 0 .7em;font-size:1.2em}
.g h2>:not(.nr){display:contents}   /* <b>/<i> in der Überschrift sonst eigene Flex-Spalten, die auf dem Handy nicht umbrechen (2026-10-31) */
.tw{overflow-x:auto}table.gt{border-collapse:separate;border-spacing:0;width:100%}.g caption{display:none}.gt td,.gt th{text-align:left;vertical-align:top}
.gt .ls,.bsp .ls{display:block}.gt .ue{display:block}
.bsp{display:grid;gap:10px}.b{display:flex;gap:12px}
.tl{font-size:.88em}
@media (max-width:640px){body{font-size:16px}.g{padding:16px 16px 40px}.g h1{font-size:1.5em}}.g{background:#EEF1F7;color:#1F2633}.g{padding:0 0 48px;max-width:900px}
.intro,section{margin:18px 24px;background:#fff;border-radius:16px;padding:18px 22px;box-shadow:0 1px 3px rgba(20,34,75,.08)}.g h2{margin-top:0}.gt .ue{color:#5A6378;font-size:.92em}.tl{color:#7A8399;font-style:italic}
.b{background:#F7F9FD;border:1px solid #E1E5EF;border-radius:14px;padding:12px 14px;align-items:center}
.bn{width:40px;height:40px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0}.bn:before{content:none}
.bsp .ls{font-weight:600;font-size:1.05em}
@media (max-width:640px){h1{font-size:1.45em}.intro,section{margin:12px 10px;padding:14px}
.gt thead{display:none}.gt,.gt tbody,.gt tr,.gt td{display:block}.gt tr{border:1px solid #E1E5EF;border-radius:14px;margin-bottom:10px;overflow:hidden}
.gt td{border:0 !important;padding:6px 14px}.gt .k{padding:8px 14px}}
.kopf{background:linear-gradient(135deg,#00006E,#1E2A8C);color:#fff;padding:30px 32px 26px;border-radius:0 0 22px 22px;border-bottom:6px solid #FAC832}
.kat{color:#FAC832;font-size:.85em;letter-spacing:.05em;text-transform:uppercase;font-weight:700}.g h1{color:#fff;font-size:2em;margin-bottom:0}.g h2{color:#00006E}.nr{background:#FAC832;color:#00006E;border-radius:10px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:.85em}
.gt th{color:#5A6378;font-size:.8em;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px}.gt td{padding:12px;border-top:1px solid #EEF1F7}
.gt .k{font-weight:700;color:#00006E;white-space:nowrap}.gt .k:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#FAC832;margin-right:8px}
.merke{background:#FFF4D6;border:1px solid #F1D58A;border-radius:12px;padding:12px 16px}.mt{font-weight:700;color:#00006E}
.bn{background:#FAC832}.bsp .ls{color:#00006E}
@media (max-width:640px){.kopf{padding:22px 18px}.gt .k{background:#00006E;color:#fff}}
@media (min-width:641px){.tw{border:1px solid #E1E5EF;border-radius:12px;overflow-x:auto}
.gt th{background:#00006E;color:#fff;font-size:.82em;padding:11px 12px}.gt td{border-top:0;border-bottom:1px solid #F0EADA}
.gt tbody tr:nth-child(even) td{background:#FFF8E6}.gt tbody tr:hover td{background:#FFF0C2}.gt tr:last-child td{border-bottom:0}}
/* Ergänzungen für den Umbau der Bestandsseiten (2026-10-27) */
.g a{color:#1E2A8C;text-decoration:underline;text-underline-offset:2px}
.g u,.g mark{background:#FFE7A0;color:inherit;text-decoration:none;border-radius:2px;padding:0}
.g h3{color:#00006E;font-size:1.05em;margin:1.3em 0 .5em}
.g ul,.g ol{padding-left:1.4em}.g li{margin:.3em 0}
.g img{max-width:100%;height:auto;border-radius:8px}
.g .tw+.tw,.g .tw+p,.g p+.tw{margin-top:14px}
.gt caption.tt{display:table-caption;caption-side:top;text-align:left;font-weight:700;color:#00006E;padding:0 0 8px}
/* Zweispaltige Paarlisten (Fremdsprache | Übersetzung) bleiben auch am Handy eine Tabelle */
@media (max-width:640px){
.gt.liste,.gt.liste tbody{display:table-row-group}.gt.liste{display:table;width:100%}
.gt.liste tr{display:table-row;border:0;border-radius:0;margin:0;overflow:visible;background:none}
.gt.liste td{display:table-cell;padding:9px 10px;border-bottom:1px solid #F0EADA !important}
.gt.liste tbody tr td,.gt.liste tbody tr td.k{background:transparent !important;color:inherit}
.gt.liste tbody tr td.k{color:#00006E}
.gt.liste tbody tr:nth-child(even) td,.gt.liste tbody tr:nth-child(even) td.k{background:#FFF8E6 !important}
.gt.liste thead{display:table-header-group}.gt.liste th{background:#00006E;color:#fff;font-size:.82em;padding:9px 10px}
.gt.liste td:before{content:none}}
/* Ohne Audio: Nummer statt Lautsprecher (Lautsprecher nur mit .bn.audio) */
.bsp .bn:not(.audio){font-size:.9em;font-weight:700;color:#00006E}.bsp .bn:not(.audio):before{content:none}
/* Auf einen Blick (Zusammenfassung am Seitenende) */
.merke.blick{background:#EEF3FC;border:1px solid #C9D7F0;border-left:6px solid #00006E;border-radius:12px}
.merke.blick .mt{color:#00006E}
/* Glossar-Links (nur deutschsprachige Grammatiken) */
.g a.glossar{color:inherit;text-decoration:underline dotted #9DB2D8;text-underline-offset:3px}
.g a.glossar:hover{color:#1E2A8C;text-decoration-style:solid}
/* Audio-Knöpfe (grammatik2026.js setzt .audio bzw. .g-audio) */
.bsp .bn.audio{cursor:pointer;border:0;background:#FAC832;font-size:0}
.bsp .bn.audio:before{content:none}
.bsp .bn.audio .g-ico{font-size:18px;color:#00006E}.bsp .bn.audio.spielt .g-ico{color:#FFF}
.g button.g-audio .g-ico{color:#00006E}.g button.g-audio.spielt .g-ico{color:#FFF}
.bsp .bn.audio.spielt{background:#00006E}
.g button.g-audio{border:0;background:#FFF1C7;border-radius:50%;width:28px;height:28px;margin-left:6px;cursor:pointer;vertical-align:middle;font-size:14px;line-height:28px;padding:0}
.g button.g-audio.spielt{background:#00006E}
/* langues.css (Punkt 55) setzt bei button.g-audio font-size:0 !important und zeigt den Lautsprecher als Hintergrundbild:
   das Fontawesome-SVG (1em = 0) zeichnete dann 640 px groß über den Text (Udo 2026-10-31). */
.g svg.g-ico{overflow:hidden!important}
.g button.g-audio svg.g-ico{width:16px!important;height:14px!important}
body.sl-redesign-2026 .g button.g-audio svg.g-ico{display:none!important}
/* Farbschemata des Kurses: Dunkelmodus und alle data-farbe-Varianten nutzen die Kursvariablen */
html[data-theme='dark'] .g,html[data-farbe] .g{background:var(--color-bg-neutral)}
html[data-theme='dark'] .g,html[data-farbe] .g{color:var(--color-text)}
html[data-theme='dark'] .intro,html[data-theme='dark'] .g section,html[data-farbe] .intro,html[data-farbe] .g section{background:var(--color-surface);box-shadow:none;border:1px solid var(--color-border)}
html[data-theme='dark'] .kopf,html[data-farbe] .kopf{background:var(--color-surface);border:1px solid var(--color-border);border-bottom:6px solid #FAC832}
html[data-theme='dark'] .kopf h1,html[data-farbe] .kopf h1,html[data-theme='dark'] .g h2,html[data-farbe] .g h2,html[data-theme='dark'] .g h3,html[data-farbe] .g h3,html[data-theme='dark'] .gt .k,html[data-farbe] .gt .k,html[data-theme='dark'] .bsp .ls,html[data-farbe] .bsp .ls,html[data-theme='dark'] .mt,html[data-farbe] .mt{color:var(--color-heading)}
html[data-theme='dark'] .kat,html[data-farbe] .kat{color:var(--color-text-secondary)}
html[data-theme='dark'] .gt .ue,html[data-farbe] .gt .ue,html[data-theme='dark'] .tl,html[data-farbe] .tl,html[data-theme='dark'] .bsp .ue,html[data-farbe] .bsp .ue{color:var(--color-text-secondary)}
html[data-theme='dark'] .tw,html[data-farbe] .tw{border-color:var(--color-border)}
html[data-theme='dark'] .gt th,html[data-farbe] .gt th{background:var(--color-heading);color:var(--color-surface)}
html[data-theme='dark'] .gt td,html[data-farbe] .gt td{border-color:var(--color-border) !important}
html[data-theme='dark'] .gt tbody tr:nth-child(even) td,html[data-farbe] .gt tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--color-text) 7%,var(--color-surface)) !important}
html[data-theme='dark'] .gt tbody tr:hover td,html[data-farbe] .gt tbody tr:hover td{background:color-mix(in srgb,#FAC832 18%,var(--color-surface)) !important}
html[data-theme='dark'] .merke,html[data-farbe] .merke,html[data-theme='dark'] .b,html[data-farbe] .b{background:color-mix(in srgb,var(--color-heading) 10%,var(--color-surface));border-color:var(--color-border)}
html[data-theme='dark'] .merke.blick,html[data-farbe] .merke.blick{border-left-color:#FAC832}
html[data-theme='dark'] .g a,html[data-farbe] .g a{color:var(--color-heading)}
html[data-theme='dark'] .g u,html[data-farbe] .g u{background:color-mix(in srgb,#FAC832 35%,var(--color-surface))}
html[data-theme='dark'] .bsp .bn:not(.audio),html[data-farbe] .bsp .bn:not(.audio){color:#00006E}
@media (max-width:640px){html[data-theme='dark'] .gt tbody tr td.k,html[data-farbe] .gt tbody tr td.k{background:var(--color-heading) !important;color:var(--color-surface) !important}
html[data-theme='dark'] .gt tr,html[data-farbe] .gt tr{border-color:var(--color-border);background:var(--color-surface)}
html[data-theme='dark'] .gt.liste tbody tr td.k,html[data-farbe] .gt.liste tbody tr td.k{background:transparent !important;color:var(--color-heading) !important}}
html[data-theme='dark'] .g h2,html[data-farbe] .g h2{border-bottom-color:var(--color-border)}
/* Happen-Viewer für den Tagestrainer (grammatik2026-happen.js) */
.grh-inhalt{height:calc(100% - 64px);overflow:auto}
.g.grh{padding:0 0 8px;max-width:none}.g.grh .intro,.g.grh section{margin:10px 6px}
.grh-leiste{height:64px;display:flex;align-items:center;justify-content:center;gap:18px}
.grh-leiste button{width:48px;height:48px;border-radius:50%;border:0;background:#00006E;color:#fff;font-size:26px;line-height:48px;cursor:pointer}
.grh-leiste button.grh-weiter{background:#FAC832;color:#00006E}
.grh-leiste button:disabled{opacity:.3;cursor:default}
.grh-stand{font-weight:700;color:#00006E;min-width:64px;text-align:center}
html[data-theme='dark'] .grh-stand,html[data-farbe] .grh-stand{color:var(--color-heading)}
.grh-wdh{display:inline-block;margin:8px 6px 0;padding:3px 12px;border-radius:999px;background:#FFF1C7;color:#5C4400;font-size:.8em;font-weight:700}
.grh-leiste a.grh-ganz{color:#00006E;font-weight:600;text-decoration:underline;text-underline-offset:3px}