/* V1/Final/theme.css — DemenzErleben Redesign: Design-Tokens & globales Theme */
:root {
  /* Werte müssen mit V1/Final/theme-tokens.js (TOKENS) übereinstimmen. */
  --de-bg: #FAF7F2;
  --de-surface: #FFFFFF;
  --de-surface-2: #EFEAE1;
  --de-text: #161615;
  --de-text-muted: #5D6A73;
  --de-border: #E3DDD0;
  --de-accent-brand: #00A9EA; /* dekorativ, siehe theme-tokens.js */
  --de-accent: #0B6E93;
  --de-accent-contrast: #FFFFFF;
  --de-accent-soft: #E1F1F9;
  --de-success: #336634;
  --de-danger: #BF0012;
  --de-footer-bg: #161615;
  --de-footer-text: #E7ECEF;
}

body {
  background: var(--de-bg);
  color: var(--de-text);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
}

a { color: var(--de-accent); }
a:hover, a:focus { color: #084F6B; }

#nodeTitle { color: var(--de-text); letter-spacing: -0.01em; }
#nodeDecoration { background: none !important; border-bottom: 3px solid var(--de-accent-soft); padding: 0.3em 0; }

.iDevice.emphasis0 {
  background: var(--de-surface);
  border: 1px solid var(--de-border);
  border-radius: 12px;
  padding: 1em;
}

.exe-block-info { background: var(--de-accent-soft); color: var(--de-accent); border-color: var(--de-accent); }
.exe-block-success { background: #E5F3E0; color: var(--de-success); border-color: var(--de-success); }
.exe-block-danger { background: #FEF0EF; color: var(--de-danger); border-color: var(--de-danger); }

/* Site chrome (site-chrome.js) */
#site-chrome-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; background: var(--de-surface);
  border-bottom: 1px solid var(--de-border);
}
.site-logo { height: 48px; width: auto; display: block; }
.site-logo-footer { height: 36px; width: auto; display: block; }

.progress-row {
  padding: 12px 24px 16px; background: var(--de-surface);
  border-bottom: 1px solid var(--de-border);
  display: flex; flex-direction: column; gap: 8px;
}
.progress-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 0.9em; color: var(--de-text-muted); font-weight: bold;
  flex-wrap: wrap;
}
.progress-top svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.overview-link {
  background: none; border: none; color: var(--de-accent);
  font-weight: bold; font-size: 1em; cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.overview-link:hover, .overview-link:focus { text-decoration: underline; outline: 3px solid var(--de-accent); }
.progress-track { height: 8px; border-radius: 999px; background: var(--de-surface-2); overflow: hidden; }
.progress-fill { height: 100%; background: var(--de-accent); border-radius: 999px; }

.nav-buttons { display: flex; justify-content: space-between; padding: 20px 24px; gap: 12px; }
.btn-secondary, .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.85em 1.4em; border-radius: 12px; font-weight: bold; font-size: 1em;
  text-decoration: none; min-height: 44px;
}
.btn-secondary { border: 2px solid var(--de-border); background: var(--de-surface); color: var(--de-text); }
.btn-primary { border: 2px solid var(--de-accent); background: var(--de-accent); color: var(--de-accent-contrast); }
/* nav.css's legacy ".pagination a" rule (class+element = higher specificity
   than the single-class rules above) sets display:block, position:absolute,
   a fixed 32x32px box, zero padding, and the old eXe arrow-sprite background
   — all of which silently override the .btn-* rules above on the actual
   #bottomPagination markup (class="nav-buttons pagination noprt"), collapsing
   the flex layout, clipping the button labels, and dropping below the 44px
   hit-target minimum. Re-declare every property .pagination a contests, at
   the same raised (two-class) specificity, to win outright rather than
   patching background-color alone. nav.css's ".pagination .next" (right,
   background-position) is left alone deliberately: both properties are
   already inert once position is static and background-image is none. */
.nav-buttons .btn-secondary,
.nav-buttons .btn-primary {
  display: inline-flex; position: static; width: auto; height: auto;
  padding: 0.85em 1.4em; min-width: 44px; background-image: none;
}
.nav-buttons .btn-secondary { background-color: var(--de-surface); }
.nav-buttons .btn-primary { background-color: var(--de-accent); }
.btn-secondary:hover, .btn-secondary:focus,
.btn-primary:hover, .btn-primary:focus { outline: 3px solid var(--de-accent); }

#site-chrome-footer {
  margin-top: 2em; padding: 20px 24px; background: var(--de-footer-bg);
  color: var(--de-footer-text); display: flex; align-items: center;
  gap: 16px; font-size: 0.85em;
}

.site-overview-dialog, .glossary-dialog {
  border: none; border-radius: 16px; padding: 24px; max-width: 32em; width: 90vw;
  background: var(--de-surface); color: var(--de-text);
}
.site-overview-dialog::backdrop, .glossary-dialog::backdrop { background: rgba(22, 22, 21, 0.5); }
.site-overview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-overview-list a {
  display: flex; align-items: center; gap: 10px; padding: 0.75em;
  border-radius: 10px; text-decoration: none; color: var(--de-text); min-height: 44px;
}
.site-overview-list a svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--de-accent); }
.site-overview-list a:hover, .site-overview-list a:focus { background: var(--de-accent-soft); outline: 3px solid var(--de-accent); }
.site-overview-list a[aria-current="page"] { font-weight: bold; background: var(--de-accent-soft); }
.site-overview-close, .glossary-dialog-close {
  margin-top: 16px; padding: 0.75em 1.25em; border-radius: 10px;
  border: 2px solid var(--de-border); background: var(--de-surface);
  font-weight: bold; min-height: 44px;
}
.site-overview-close:hover, .site-overview-close:focus,
.glossary-dialog-close:hover, .glossary-dialog-close:focus { outline: 3px solid var(--de-accent); }

.today-preview { padding: 24px; }
.today-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
}
.today-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px; background: var(--de-surface); border: 1px solid var(--de-border); border-radius: 14px;
}
.today-card svg { width: 28px; height: 28px; color: var(--de-accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Applies on every page (theme.css is loaded by all 8), unlike the old
   exercise-shell.css location — erzhlen.html and sei_wieder_du_selbst.html
   never load exercise-shell.css, so the rule was silently dead there even
   though site-chrome.js's renderHeader now applies the body class everywhere. */
body.mode-gruppe, body.mode-barrierearm { font-size: 1.25em; }

/* nav.css's #main-wrapper rule (an ID selector, so no class-based rule here
   can outrank it) reserves a 305px left gutter and paints the old eXe
   sidebar background — originally neutralized by body.no-nav, a class only
   ever added by _style_js.js's jQuery hideMenu(), which this redesign
   deleted (Task 15). Below 768px nav.css's own mobile media query already
   resets this correctly; only the desktop width needs the override, scoped
   here to avoid fighting that existing, working mobile reset. Same ID
   specificity as nav.css's rule, so source order decides — theme.css loads
   after nav.css on every page, so this wins. */
@media (min-width: 769px) {
  #main-wrapper { padding-left: 25px; background: var(--de-surface); }
}

/* The intro portrait's inline width/height attributes (kept for layout
   stability before CSS loads) would otherwise float a fixed 250px image
   next to the welcome text on any viewport — on ~375px phones that leaves
   the text too narrow to wrap without breaking mid-word. Below 769px it
   drops the float and sizes down instead of sitting beside the text. */
.intro-portrait { float: right; margin: 0 0 1em 1em; }
@media (max-width: 768px) {
  .intro-portrait { float: none; display: block; margin: 0 auto 1em; width: 60%; height: auto; max-width: 250px; }
}

/* "Erzählen" nutzt eXeLearnings generisches GameQP/Adivina-iDevice (Lücken-
   ratespiel), dessen Icons/Buttons als eXe-Sprite-PNGs (exequext*.png)
   kommen und dadurch aus dem restlichen, neu gestalteten Theme herausfallen.
   Das Spiel selbst (Logik/Daten) bleibt eXeLearnings Engine — hier werden
   nur die visuellen Icons durch eigene, zum Theme passende SVGs ersetzt.
   Gleiche (Zwei-Klassen-)Spezifität wie gameqp-activity.css, das vor
   theme.css geladen wird — Quellreihenfolge entscheidet zugunsten hier. */
.gameQP-GameContainer .exeQuextIcons-Number {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='18' font-size='18' font-family='Arial,sans-serif' font-weight='bold' text-anchor='middle' fill='%235D6A73'%3E%23%3C/text%3E%3C/svg%3E");
}
.gameQP-GameContainer .exeQuextIcons-Hit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' fill='none' stroke='%23336634' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gameQP-GameContainer .exeQuextIcons-Error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23BF0012' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gameQP-GameContainer .exeQuextIcons-Life {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-9.5-8.8C.7 8 2 4.5 5.3 4c2-.3 3.7.6 4.7 2.2C11 4.6 12.7 3.7 14.7 4c3.3.5 4.6 4 3.8 7.2C16 15.6 12 20 12 20z' fill='%230B6E93'/%3E%3C/svg%3E");
}
.gameQP-GameContainer .exeQuextIcons-Time {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%230B6E93' stroke-width='2'/%3E%3Cpath d='M12 7v5l4 2' fill='none' stroke='%230B6E93' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Minimieren/Vollbild der eXe-Engine werden in allen Modi nicht angeboten
   (Nutzerwunsch): ganze Links ausblenden, damit sie auch nicht per Tab erreichbar sind. */
.gameQP-LinkMinimize, .gameQP-LinkFullScreen { display: none !important; }
.gameQP-MainContainer .exeQuextIcons-Submit {
  background-color: var(--de-accent); border: 2px solid var(--de-accent); border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l5 5L20 6' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 55% 55%; background-repeat: no-repeat; background-position: center;
}
.gameQP-MainContainer .exeQuextIcons-MoveOne {
  background-color: var(--de-surface); border: 2px solid var(--de-border); border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230B6E93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 55% 55%; background-repeat: no-repeat; background-position: center;
}

#site-chrome-footer { flex-wrap: wrap; }
#site-chrome-footer a { color: var(--de-footer-text); text-decoration: underline; }
#takeaway { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 0.75em; margin-top: 0.5em; }
#mode-select-mount { scroll-margin-top: 1em; }
.gameQP-DivReply { flex-wrap: wrap; gap: 0.5em; }
.gameQP-DivReply button { font-size: 1em; min-height: 44px; }
.gameQP-EdReply { min-width: 0; max-width: 100%; }
.gameQP-MainContainer.is-paused * { animation-play-state: paused !important; transition: none !important; }
body.has-active-exercise #bottomPagination a.next { display: none !important; }

/* Review 06.09: a shorter route into the experience and one visual language. */
#site-chrome-header { justify-content: flex-start; }
.site-product-name { padding-left: 16px; border-left: 1px solid var(--de-border); font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; }
#main { max-width: 76rem; margin: 0 auto; }
#main .iDevice.emphasis0 { max-width: 64rem; margin-inline: auto; }
.intro-lead { max-width: 48rem; font-size: 1.18em; line-height: 1.45; }
.intro-details { max-width: 48rem; margin: 1em 0; padding: 0.85em 1em; border-radius: 12px; background: var(--de-surface-2); }
.intro-details summary { cursor: pointer; font-weight: bold; }
.mode-select { max-width: 48rem; margin: 0 auto; padding: clamp(1em, 3vw, 1.5em) !important; color: var(--de-text); }
.mode-select-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65em; margin: 1em 0; }
.mode-select-option { display: flex; align-items: flex-start; gap: 0.55em; min-height: 7rem; padding: 0.8em; border: 2px solid var(--de-border); border-radius: 12px; background: var(--de-surface); cursor: pointer; }
.mode-select-option:has(input:checked) { border-color: var(--de-accent); box-shadow: 0 0 0 3px var(--de-accent-soft); }
.mode-select-option input { width: 1.25em; height: 1.25em; margin-top: 0.1em; flex: 0 0 auto; }
.mode-select-option span { display: grid; gap: 0.35em; }
.mode-select-option small { color: var(--de-text-muted); line-height: 1.25; }

.site-overview-dialog { max-height: calc(100dvh - 2rem); padding: 0; overflow-y: auto; }
.site-overview-title-row { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em 1.25em; background: var(--de-surface); border-bottom: 1px solid var(--de-border); }
.site-overview-title-row h2 { margin: 0; }
.site-overview-dialog > p, .site-overview-dialog > ul { margin-left: 1.25em; margin-right: 1.25em; }
.site-overview-close { display: inline-flex; align-items: center; gap: 0.35em; margin: 0; padding: 0.55em 0.75em; }
.site-overview-close svg { width: 20px; height: 20px; }

.today-preview { max-width: 64rem; margin: 0 auto; padding: 1.25em 0; }
.today-cards { gap: 0.75em; }
.today-card { padding: 0.85em; border-radius: 12px; }
.takeaway-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; margin: 1em 0 1.5em; }
.takeaway-cards section { padding: 1em; border: 1px solid var(--de-border); border-radius: 12px; background: var(--de-surface-2); }
/* Überschrift und Text je Karte als Subgrid-Zeilen: nebeneinander beginnen alle Texte auf einer Höhe. */
.takeaway-cards section { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.takeaway-cards h3 { margin-top: 0; font-size: 1.05em; }
#copy-takeaway { margin-top: 0.2em; }
#copy-takeaway-feedback:empty { display: none; }
#takeaway { min-height: 6.5em; border: 2px solid var(--de-border); border-radius: 10px; background: var(--de-surface); color: var(--de-text); }
#takeaway:focus { outline: 3px solid var(--de-accent); outline-offset: 2px; }

/* GameQP remains the original eXe engine; the board only exposes task,
   progress and time instead of its gamified score, errors and life counters. */
.gameQP-MainContainer { max-width: 48rem; font-size: inherit; }
.gameQP-GameContainer { padding: 0.85em; border: 1px solid var(--de-border); border-radius: 14px; background: var(--de-surface); }
.gameQP-GameScores, .gameQP-LifesGame, .gameQP-NumberLifesGame, .gameQP-DataScore, .gameQP-Multimedia, .gameQP-AuthorLicence { display: none !important; }
.gameQP-GameScoreBoard { justify-content: flex-end; margin-bottom: 0.75em; }
.gameQP-TimeNumber { gap: 0.35em; padding: 0.35em 0.65em; border-radius: 999px; background: var(--de-accent-soft); }
.gameQP-TimeNumber::before { content: 'Zeit'; font-weight: bold; }
.gameQP-QuestionDiv { display: grid; min-width: 0; gap: 0.75em; }
.gameQP-Question { order: 1; width: 100%; min-width: 0; max-width: 100%; min-height: 0; margin: 0; padding: 0.75em; border-radius: 10px; background: var(--de-surface-2); overflow-wrap: anywhere; }
.gameQP-Prhase { order: 2; width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.gameQP-DivReply { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; justify-content: stretch; }
.gameQP-EdReply { min-width: 0; width: 100%; max-width: 100%; min-height: 44px; padding: 0.55em 0.75em; border: 2px solid var(--de-border); border-radius: 10px; box-sizing: border-box; font: inherit; text-align: left; }
.gameQP-Letter { min-width: 1.85em; height: 2.2em; border: 2px solid var(--de-border); border-radius: 8px; background: var(--de-surface); }
.gameQP-DivReply .btn-secondary { min-height: 44px; }
.gameQP-MainContainer.is-before-start { display: none !important; }
.erzaehlen-progress { margin: 0.65em 0; font-weight: bold; color: var(--de-accent); }
@media (max-width: 700px) {
  .mode-select-options, .takeaway-cards { grid-template-columns: 1fr; }
  .mode-select-option { min-height: auto; }
  .site-product-name { font-size: 1.2rem; }
  .site-logo { height: 40px; }
  #id33 .iDevice.emphasis0, #id-mode-select .iDevice.emphasis0 { padding: 0.7em; }
  .intro-portrait { float: right; width: 7.5rem; max-width: 34%; margin: 0 0 0.45em 0.75em; }
  .intro-lead { margin-top: 0; font-size: 1.08em; }
  .intro-details { margin: 0.65em 0; padding: 0.65em 0.75em; }
  .mode-select { padding: 0.8em !important; }
  .mode-select h3, .mode-select > p { margin: 0 0 0.5em; }
  .mode-select-options { gap: 0.45em; margin: 0.6em 0; }
  .mode-select-option { gap: 0.45em; padding: 0.55em 0.65em; }
  .mode-select-option small { font-size: 0.88em; }
  .gameQP-DivReply { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gameQP-EdReply { grid-column: 1 / -1; }
  .gameQP-DivReply .btn-secondary { width: 100%; justify-content: center; }
  .gameQP-Prhase { flex-wrap: nowrap; }
  .gameQP-Word { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .gameQP-Letter {
    flex: 0 1 1.15em !important;
    min-width: 0 !important;
    width: 1.15em !important;
    max-width: none;
    height: 2em;
    font-size: min(6vw, 24px) !important;
  }
}