/* Schulspanisch Lernzusammenfassung v1.1 (Rollout Grammatik 2026-10-30)
   Overlay „Das Wichtigste auf einen Blick“ + kompakter Übungseinstieg.
   Inhalte stehen ausschließlich im HTML der jeweiligen Seite (#sg-summary-dialog).
   Bausteine: .sg-ending-grid (Karten), .sg-sum-block, .sg-sum-table, .sg-formula,
   .sg-sum-compare, .sg-sum-list, .sg-sum-chips, .sg-sum-note(--warn). Siehe ANLEITUNG. */

/* ---------- Button im Aktionscontainer ---------- */
.slr-entry--hero #sg-summary-open{margin-bottom:12px}
.slr-entry--hero .slr-trigger>span:not(.slr-spark):not(.slr-trigger-arrow){min-width:0;overflow-wrap:anywhere}

/* ---------- Dialog ---------- */
#sg-summary-dialog{box-sizing:border-box;width:calc(100% - 24px);max-width:800px;max-height:calc(100dvh - 32px);margin:auto;padding:28px;border:1px solid #e3e7ed;border-radius:26px;background:#fff;color:#18202d;overflow:auto;overscroll-behavior:contain;font-family:system-ui,sans-serif;box-shadow:0 24px 80px #0003}
#sg-summary-dialog::backdrop{background:#121a2980;backdrop-filter:blur(6px)}
#sg-summary-dialog *,#sg-summary-dialog *::before,#sg-summary-dialog *::after{box-sizing:border-box}
#sg-summary-dialog .sg-summary-head{position:sticky;top:-28px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-28px -28px 20px;padding:28px 28px 12px;background:inherit;border-radius:26px 26px 0 0}
#sg-summary-dialog .sg-summary-head h2{margin:0;font-size:clamp(23px,4vw,32px);line-height:1.2;letter-spacing:-.03em;color:inherit}
#sg-summary-close{flex:none;width:44px;height:44px;padding:0;border:1px solid #e3e7ed;border-radius:50%;background:#f6f7f9;color:inherit;font-size:25px;line-height:1;cursor:pointer}
#sg-summary-close:hover{background:#eceff3}
#sg-summary-dialog :focus-visible{outline:3px solid #1764d4;outline-offset:3px}

/* ---------- Spickzettel-Kopf ---------- */
#sg-summary-dialog .sg-cheatsheet{display:block;margin:0;padding:0;border:0;background:transparent;box-shadow:none;max-width:none}
#sg-summary-dialog .sg-mini-eyebrow{margin:0;color:#1764d4;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#sg-summary-dialog h3{font-size:21px;line-height:1.3;margin:8px 0;color:inherit}
#sg-summary-dialog .sg-cheatsheet__intro{margin:0;padding:0;border:0;background:none}
#sg-summary-dialog .sg-cheatsheet__intro>p:last-child:not(.sg-mini-eyebrow){color:#596476;line-height:1.5;margin:0 0 22px;font-size:15px}
#sg-summary-dialog strong,#sg-summary-dialog b{font-weight:700}

/* ---------- Karten (Pilot) ---------- */
#sg-summary-dialog .sg-ending-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;border:0;background:none}
#sg-summary-dialog .sg-ending-grid>div{display:flex;flex-direction:column;gap:7px;min-width:0;padding:18px;border:1px solid #e3eaf4;border-radius:16px;background:#f2f7fd;box-shadow:none;text-align:left;overflow-wrap:anywhere}
#sg-summary-dialog .sg-ending-grid span{display:block;margin:0;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:#596476}
#sg-summary-dialog .sg-ending-grid strong{display:block;margin:0;font-size:20px;line-height:1.3;color:#2165aa}
#sg-summary-dialog .sg-ending-grid small{display:block;margin:0;font-size:14px;line-height:1.4;color:#596476}
#sg-summary-dialog .sg-ending-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
#sg-summary-dialog .sg-ending-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
#sg-summary-dialog .sg-ending-grid--compact{gap:10px}
#sg-summary-dialog .sg-ending-grid--compact>div{padding:12px 14px;gap:4px}
#sg-summary-dialog .sg-ending-grid--compact strong{font-size:17px}

/* ---------- Abschnitte ---------- */
#sg-summary-dialog .sg-sum-block{margin:24px 0 0;padding:22px 0 0;border-top:1px solid #e3e7ed}
#sg-summary-dialog .sg-cheatsheet__intro+.sg-sum-block{margin-top:0;padding-top:0;border-top:0}
#sg-summary-dialog .sg-sum-title{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-size:17px;line-height:1.35;font-weight:700;color:inherit}
#sg-summary-dialog .sg-sum-title small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#596476}
#sg-summary-dialog .sg-sum-text{margin:0 0 14px;font-size:15px;line-height:1.55;color:#596476}
#sg-summary-dialog .sg-sum-block>*:last-child{margin-bottom:0}
#sg-summary-dialog .sg-sum-block>*+.sg-ending-grid,#sg-summary-dialog .sg-sum-block>*+.sg-sum-scroll,#sg-summary-dialog .sg-sum-block>*+.sg-sum-compare{margin-top:0}
#sg-summary-dialog .sg-sum-block>.sg-ending-grid+*,#sg-summary-dialog .sg-sum-block>.sg-sum-scroll+*,#sg-summary-dialog .sg-sum-block>.sg-sum-compare+*{margin-top:14px}
#sg-summary-dialog [lang="es"]{font-style:normal}
#sg-summary-dialog .sg-hl{color:#2165aa;font-weight:750}

/* ---------- Bildungsformel ---------- */
#sg-summary-dialog .sg-formula{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:12px 16px;border:1px dashed #c9d8ea;border-radius:14px;background:transparent;font-size:16px;line-height:1.4;color:#18202d;box-shadow:none}
#sg-summary-dialog .sg-formula>span{color:#596476}
#sg-summary-dialog .sg-formula>strong{color:#2165aa}

/* ---------- Tabellen ---------- */
#sg-summary-dialog .sg-sum-scroll{max-width:100%;overflow-x:auto;margin:0 0 14px;border:1px solid #e3eaf4;border-radius:16px;-webkit-overflow-scrolling:touch}
#sg-summary-dialog .sg-sum-table{display:table;width:100%;margin:0;border-collapse:collapse;font-size:15px;line-height:1.4;background:none}
#sg-summary-dialog .sg-sum-table th,#sg-summary-dialog .sg-sum-table td{padding:9px 14px;border:0;border-bottom:1px solid #e3eaf4;text-align:left;vertical-align:top;white-space:nowrap;background:none;color:inherit}
#sg-summary-dialog .sg-sum-table tr:last-child>*{border-bottom:0}
#sg-summary-dialog .sg-sum-table thead th{background:#f2f7fd;font-size:12px;font-weight:700;letter-spacing:.04em;color:#596476}
#sg-summary-dialog .sg-sum-table tbody th{font-weight:500;color:#596476}
#sg-summary-dialog .sg-sum-table td{font-weight:500}
#sg-summary-dialog .sg-sum-table b{color:#2165aa;font-weight:750}
#sg-summary-dialog .sg-sum-table--wrap td{white-space:normal}

/* ---------- Gegenüberstellung ---------- */
#sg-summary-dialog .sg-sum-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
#sg-summary-dialog .sg-sum-compare--3{grid-template-columns:repeat(3,minmax(0,1fr))}
#sg-summary-dialog .sg-sum-col{min-width:0;padding:18px;border:1px solid #e3eaf4;border-radius:16px;background:#f2f7fd;overflow-wrap:anywhere}
#sg-summary-dialog .sg-sum-col>h5{margin:0;font-size:20px;line-height:1.3;color:#2165aa}
#sg-summary-dialog .sg-sum-col>p{margin:4px 0 12px;font-size:14px;line-height:1.45;color:#596476}
#sg-summary-dialog .sg-sum-col>*:last-child{margin-bottom:0}

/* ---------- Beispiel-Listen ---------- */
#sg-summary-dialog .sg-sum-list{margin:0;padding:0;list-style:none}
#sg-summary-dialog .sg-sum-list>li{display:flex;flex-direction:column;gap:2px;margin:0;padding:8px 0;border-top:1px solid #e3eaf4;background:none}
#sg-summary-dialog .sg-sum-list>li:first-child{border-top:0;padding-top:0}
#sg-summary-dialog .sg-sum-list>li::before{content:none}
#sg-summary-dialog .sg-sum-list span{font-size:12px;color:#596476}
#sg-summary-dialog .sg-sum-list strong{font-size:16px;line-height:1.4;font-weight:600;color:inherit}
#sg-summary-dialog .sg-sum-list small{font-size:14px;line-height:1.4;color:#596476}

/* ---------- Signalwörter ---------- */
#sg-summary-dialog .sg-sum-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
#sg-summary-dialog .sg-sum-chips>li{margin:0;padding:5px 12px;border:1px solid #e3eaf4;border-radius:999px;background:#f2f7fd;font-size:14px;line-height:1.35;color:inherit}
#sg-summary-dialog .sg-sum-chips>li::before{content:none}

/* ---------- Hinweise ---------- */
#sg-summary-dialog .sg-sum-note{margin:14px 0 0;padding:14px 16px;border:0;border-left:4px solid #1764d4;border-radius:12px;background:#f2f7fd;font-size:15px;line-height:1.55;color:inherit}
#sg-summary-dialog .sg-sum-note--warn{border-left-color:#c98a10;background:#fff7e8}
#sg-summary-dialog .sg-sum-note p{margin:0}
#sg-summary-dialog .sg-sum-note p+p{margin-top:6px}

/* ---------- Übungseinstieg (unterhalb der H1 in der Hierarchie) ---------- */
.sg-training-section .sg-learning-unit>.sg-training-intro{max-width:none;margin:0 0 22px;padding:0 0 20px;border:0;border-bottom:1px solid #dae3ee;text-align:left}
.sg-training-section .sg-learning-unit>.sg-training-intro h2{font-size:clamp(23px,2.2vw,30px);line-height:1.22;letter-spacing:-.025em;margin:6px 0 10px}
.sg-training-section .sg-learning-unit>.sg-training-intro>.sg-eyebrow{font-size:11px;letter-spacing:.1em;margin:0;font-weight:750}
.sg-training-section .sg-learning-unit>.sg-training-intro>p:not(.sg-eyebrow){font-size:15px;line-height:1.6;margin:0;max-width:65ch}
.sg-training-section .sg-learning-unit>.sg-stage-tabs{margin-top:0}

/* ---------- Mobil ---------- */
@media(max-width:767px){
 .sg-training-section .sg-learning-unit>.sg-training-intro{margin-bottom:16px;padding-bottom:16px}
 .sg-training-section .sg-learning-unit>.sg-training-intro h2{font-size:23px}
 .sg-training-section .sg-learning-unit>.sg-training-intro>p:not(.sg-eyebrow){font-size:14px}
 .slr-entry--hero .slr-trigger{height:auto;min-height:54px}
 #sg-summary-dialog{max-height:calc(100dvh - 24px);padding:18px}
 #sg-summary-dialog .sg-summary-head{top:-18px;margin:-18px -18px 16px;padding:18px 18px 10px}
 #sg-summary-dialog .sg-ending-grid{gap:10px}
 #sg-summary-dialog .sg-ending-grid>div{padding:14px}
 #sg-summary-dialog .sg-ending-grid strong{font-size:18px}
 #sg-summary-dialog .sg-ending-grid--3,#sg-summary-dialog .sg-ending-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
 #sg-summary-dialog .sg-sum-compare,#sg-summary-dialog .sg-sum-compare--3{grid-template-columns:1fr;gap:10px}
 #sg-summary-dialog .sg-sum-col{padding:14px}
 #sg-summary-dialog .sg-sum-table th,#sg-summary-dialog .sg-sum-table td{padding:8px 10px}
 #sg-summary-dialog .sg-sum-block{margin-top:20px;padding-top:18px}
}
@media(max-width:359px){
 #sg-summary-dialog{padding:14px}
 #sg-summary-dialog .sg-summary-head{top:-14px;margin:-14px -14px 14px;padding:14px 14px 10px}
 #sg-summary-dialog .sg-ending-grid,#sg-summary-dialog .sg-ending-grid--3{grid-template-columns:1fr}
 #sg-summary-dialog .sg-ending-grid--4.sg-ending-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
 #sg-summary-dialog .sg-sum-table{font-size:14px}
 #sg-summary-dialog .sg-sum-table th,#sg-summary-dialog .sg-sum-table td{padding:7px 8px}
}

/* ---------- Dark Mode ---------- */
@media(prefers-color-scheme:dark){
 #sg-summary-dialog{background:#1c1e24;color:#f3f4f7;border-color:#393e49}
 #sg-summary-close{background:#252830;border-color:#393e49}
 #sg-summary-close:hover{background:#2e323b}
 #sg-summary-dialog :focus-visible{outline-color:#91bfff}
 #sg-summary-dialog .sg-mini-eyebrow,#sg-summary-dialog .sg-ending-grid strong,#sg-summary-dialog .sg-hl,#sg-summary-dialog .sg-formula>strong,#sg-summary-dialog .sg-sum-table b,#sg-summary-dialog .sg-sum-col>h5{color:#91bfff}
 #sg-summary-dialog .sg-cheatsheet__intro>p:last-child:not(.sg-mini-eyebrow),#sg-summary-dialog .sg-ending-grid span,#sg-summary-dialog .sg-ending-grid small,#sg-summary-dialog .sg-sum-title small,#sg-summary-dialog .sg-sum-text,#sg-summary-dialog .sg-formula>span,#sg-summary-dialog .sg-sum-table thead th,#sg-summary-dialog .sg-sum-table tbody th,#sg-summary-dialog .sg-sum-col>p,#sg-summary-dialog .sg-sum-list span,#sg-summary-dialog .sg-sum-list small{color:#bdc8d8}
 #sg-summary-dialog .sg-ending-grid>div,#sg-summary-dialog .sg-sum-col,#sg-summary-dialog .sg-sum-chips>li{background:#232e3d;border-color:#354459}
 #sg-summary-dialog .sg-formula{color:#f3f4f7;border-color:#46597a}
 #sg-summary-dialog .sg-sum-block{border-top-color:#393e49}
 #sg-summary-dialog .sg-sum-scroll{border-color:#354459}
 #sg-summary-dialog .sg-sum-table th,#sg-summary-dialog .sg-sum-table td,#sg-summary-dialog .sg-sum-list>li{border-bottom-color:#354459;border-top-color:#354459}
 #sg-summary-dialog .sg-sum-table thead th{background:#232e3d}
 #sg-summary-dialog .sg-sum-note{background:#232e3d;border-left-color:#91bfff}
 #sg-summary-dialog .sg-sum-note--warn{background:#30291c;border-left-color:#e0a83a}
 .sg-training-section .sg-learning-unit>.sg-training-intro{border-bottom-color:#393e49}
}

/* ---------- Ohne JavaScript: Zusammenfassung erscheint am Seitenende ---------- */
#sg-summary-dialog.sg-summary--static{display:block;position:static;width:auto;max-width:800px;max-height:none;margin:32px auto;overflow:visible;box-shadow:none}
#sg-summary-dialog.sg-summary--static .sg-summary-head{position:static;margin:0 0 20px;padding:0}
#sg-summary-dialog.sg-summary--static #sg-summary-close{display:none}
#sg-summary-dialog .sg-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Globale Tabellenregeln aus navigation/menu.css (min-width, Radius, !important) im Overlay neutralisieren. */
#sg-summary-dialog .sg-sum-table{width:100%!important;min-width:0!important;margin:0!important;border:0!important;border-radius:0!important}
#sg-summary-dialog .sg-sum-table tr,#sg-summary-dialog .sg-sum-table th,#sg-summary-dialog .sg-sum-table td{min-width:0!important;border-radius:0!important;font-size:inherit;background:transparent}
#sg-summary-dialog .sg-sum-table tr{border:0;padding:0}
#sg-summary-dialog .sg-sum-table thead th{background:#f2f7fd;font-size:12px}
@media(prefers-color-scheme:dark){#sg-summary-dialog .sg-sum-table thead th{background:#232e3d}}
#sg-summary-dialog #sg-summary-close:focus,#sg-summary-dialog #sg-summary-close:focus-visible{outline:none}
#sg-summary-dialog #sg-summary-close:focus-visible{border-color:#8b95a7;background:#eceff3}
@media(prefers-color-scheme:dark){#sg-summary-dialog #sg-summary-close:focus-visible{border-color:#7d8799;background:#2e323b}}
/* Schmale Displays: Tabellen ohne Querscrollen, Zellen dürfen umbrechen. */
@media(max-width:479px){
 #sg-summary-dialog .sg-sum-table{font-size:14px}
 #sg-summary-dialog .sg-sum-table th,#sg-summary-dialog .sg-sum-table td{padding:8px 7px;white-space:normal}
 #sg-summary-dialog .sg-sum-table thead th{font-size:11px;letter-spacing:.02em}
}