/* --- css/fonts.css --- */
/* ==========================================================================
   GazeTo — Self-hosted web fonts
   Replaces Google Fonts CDN dependency — DSGVO-compliant, offline-capable
   Auto-generated: do not edit manually, use tools/download-fonts.py
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/DMSans-400-normal-latin-ext-e5bab11d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/DMSans-400-normal-latin-40fe3cf7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/DMSans-400-normal-latin-ext-e5bab11d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/DMSans-400-normal-latin-40fe3cf7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/DMSans-400-normal-latin-ext-e5bab11d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/DMSans-400-normal-latin-40fe3cf7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-cyrillic-ext-c73bc256.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-cyrillic-144353ea.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-vietnamese-50c55c63.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-latin-ext-da7d3499.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-latin-920604ae.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-cyrillic-ext-c73bc256.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-cyrillic-144353ea.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-vietnamese-50c55c63.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-latin-ext-da7d3499.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-latin-920604ae.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-cyrillic-ext-c73bc256.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-cyrillic-144353ea.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-vietnamese-50c55c63.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-latin-ext-da7d3499.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../assets/fonts/Merriweather-400-normal-latin-920604ae.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-ext-6b10e12a.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-db22166c.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-vietnamese-1f7d94f4.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ext-31399ed9.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ed56cbd3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-ext-6b10e12a.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-db22166c.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-vietnamese-1f7d94f4.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ext-31399ed9.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ed56cbd3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-ext-6b10e12a.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-db22166c.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-vietnamese-1f7d94f4.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ext-31399ed9.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ed56cbd3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-ext-6b10e12a.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-cyrillic-db22166c.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-vietnamese-1f7d94f4.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ext-31399ed9.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Oswald-400-normal-latin-ed56cbd3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- css/tokens.css --- */
/* ==========================================================================
   GazeTo — Design Tokens
   ========================================================================== */

:root {
  /* ── Primary Colors (AssistUK-Blau) ── */
  --color-primary:        #4b698c;
  --color-primary-light:  #6388ad;
  --color-primary-dark:   #3a5a7c;
  --color-primary-bg:     #eef2f7;

  /* AssistUK Red — sponsor badge / critical actions only */
  --color-secondary:      #ce0f0a;
  --color-secondary-light:#e8302b;
  --color-secondary-dark: #a50c08;

  /* ── Neutral Colors ── */
  --color-bg:             #fafafa;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f5f5f5;
  --color-border:         #e0e0e0;
  --color-border-strong:  #bdbdbd;

  --color-text:           #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted:     #525252;
  --color-text-inverse:   #ffffff;

  /* ── Stufen Colors (7 Kompetenzstufen) ── */
  --color-stufe-1:  #6366f1;
  --color-stufe-2:  #8b5cf6;
  --color-stufe-3:  #06b6d4;
  --color-stufe-4:  #10b981;
  --color-stufe-5:  #f59e0b;
  --color-stufe-6:  #ef4444;
  --color-stufe-7:  #ec4899;

  /* ── Category Colors ── */
  --color-cat-sensorisch:    #3b82f6;
  --color-cat-zielspiele:    #22c55e;
  --color-cat-tracking:      #eab308;
  --color-cat-spiele:        #ef4444;
  --color-cat-kreativ:       #a855f7;
  --color-cat-entspannung:   #78716c;
  --color-cat-teilhabe:      #f97316;

  /* ── Feedback Colors ── */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-error:    #dc2626;
  --color-info:     #2563eb;

  /* ── Typography ── */
  --font-headline: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'DM Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    0.875rem;
  --text-sm:    1rem;
  --text-base:  1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   2.75rem;
  --text-5xl:   3.5rem;

  --font-normal:  400;
  --font-medium:  500;
  --font-bold:    700;
  --font-black:   900;

  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing (8px Grid) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ── Radii ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.10);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.15);
  --shadow-glow: 0 0 20px rgba(75,105,140,0.3);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Responsive Breakpoints ──
     Used in @media queries throughout the app.
     IMPORTANT: CSS variables cannot be used directly in @media queries —
     they exist here only for documentation. Use these literal pixel values
     in @media (min-width: ...) clauses across the codebase.
  --bp-xs:  320px   tiny phones
  --bp-sm:  480px   phones (mobile breakpoint — below this, stack everything)
  --bp-md:  768px   small tablets / large phones landscape (iPad portrait)
  --bp-lg:  1024px  tablets landscape / small laptops (iPad landscape, MacBook 13")
  --bp-xl:  1280px  desktops
  --bp-2xl: 1600px  wide screens
  */
}

/* ==========================================================================
   Theme Overrides
   ========================================================================== */

/* ── Kinderwelt: playful, warm, larger touch targets ── */
:root[data-theme="kinderwelt"],
[data-theme="kinderwelt"] {
  --color-primary:        #b85806; /* AAA: weiße Button-Schrift ≥4.5:1 (war #c96209 = 4.01) */
  --color-primary-light:  #ef8a2a;
  --color-primary-dark:   #a04e06;
  --color-primary-bg:     #fff4e6;

  --color-bg:             #fef9f0;
  --color-surface:        #ffffff;
  --color-surface-alt:    #fdf3e7;
  --color-border:         #f0d9c0;
  --color-border-strong:  #ddb88a;

  --color-text:           #3d2b1f;
  --color-text-secondary: #6b4f3a;
  --color-text-muted:     #665038; /* AAA 7:1 auf Creme/Weiß (war #8a6d54 = 4.55) */

  --font-headline: 'Merriweather', Georgia, serif;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;

  --shadow-md:   0 4px 12px rgba(201, 98, 9, 0.14);
  --shadow-lg:   0 8px 24px rgba(201, 98, 9, 0.18);
  --shadow-glow: 0 0 24px rgba(201, 98, 9, 0.3);
}

/* Kinderwelt: Haupt-CTA (sonst Markenblau) folgt der warmen Akzentfarbe */
:root[data-theme="kinderwelt"] .btn-primary-blue,
[data-theme="kinderwelt"] .btn-primary-blue {
  background: var(--color-primary);
  box-shadow: 0 8px 24px rgba(201, 98, 9, 0.28);
}
:root[data-theme="kinderwelt"] .btn-primary-blue:hover,
[data-theme="kinderwelt"] .btn-primary-blue:hover {
  box-shadow: 0 12px 32px rgba(201, 98, 9, 0.42);
}

:root[data-theme="kinderwelt"] .nav-bar,
[data-theme="kinderwelt"] .nav-bar,
:root[data-theme="kinderwelt"] .btn,
[data-theme="kinderwelt"] .btn {
  font-size: 1.05em;
}

:root[data-theme="kinderwelt"] .activity-card,
[data-theme="kinderwelt"] .activity-card {
  border-radius: 1.25rem;
}

/* ── Erwachsen: clean, professional, muted palette ── */
:root[data-theme="erwachsen"],
[data-theme="erwachsen"] {
  --color-primary:        #5c4a9e;
  --color-primary-light:  #7b6bb5;
  --color-primary-dark:   #453780;
  --color-primary-bg:     #f3f1fa;

  --color-bg:             #f7f7f8;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f0f0f2;
  --color-border:         #d4d4d8;
  --color-border-strong:  #a1a1aa;

  --color-text:           #18181b;
  --color-text-secondary: #3f3f46;
  --color-text-muted:     #52525a; /* AAA 7:1 auf Hell/Weiß (war #71717a = 4.51) */

  --font-headline: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.625rem;

  --shadow-md:   0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg:   0 6px 12px rgba(0,0,0,0.10);
  --shadow-glow: 0 0 16px rgba(92, 74, 158, 0.25);
}

:root[data-theme="erwachsen"] .nav-bar,
[data-theme="erwachsen"] .nav-bar,
:root[data-theme="erwachsen"] .btn,
[data-theme="erwachsen"] .btn {
  font-size: 0.95em;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- css/reset.css --- */
/* ==========================================================================
   GazeTo — CSS Reset (Minimal)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Verweil-Ring der runden Bühnen-Knöpfe (_shared_stage: Abrissbirne, Achterbahn,
   Wildwasser, Hupe, Brenner, Klingel, Bagger, Reiten, Weihnachtsband …), 05.10.2026.
   Der Ring ist absichtlich größer als sein Knopf. max-width:100 % oben stauchte ihn
   auf Knopfbreite: kleiner und 7–12 px nach links versetzt. Hier volle Größe und
   genau mittig auf dem Kreis — gleich welche Randbreite („klar sehen“) und Zoom. */
.stage-mount svg[style*="rotate(-90deg)"][style*="absolute"] {
  max-width: none;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  translate: -50% -50%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word;
}

/* --- css/base.css --- */
/* ==========================================================================
   GazeTo — Base Styles
   ========================================================================== */

html {
  font-size: 16px;
  scrollbar-gutter: stable;
}

/* In laufenden Aktivitäten wird nie gerollt: kein freier Streifen rechts (Regressionstest 05.10.2026;
   unter Windows sonst 15–17 px). */
html:has(.screen-activity-runner) { scrollbar-gutter: auto; overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  /* iPad / iOS touch tuning */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation; /* removes 300ms tap delay on Safari */
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in input fields and editable areas */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Buttons: ensure they're touch-friendly + clickable */
button, .btn, [role="button"], .toggle, .profile-card, .activity-card {
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px; /* Apple HIG minimum */
}

/* Activity-runner canvas explicitly accepts pointer events */
.runner-canvas {
  touch-action: none; /* prevent browser gestures stealing the input */
  cursor: pointer;
}

/* PWA Standalone Mode — when installed on Home Screen */
@media all and (display-mode: standalone) {
  body {
    /* Avoid bouncy scroll on iOS standalone */
    overscroll-behavior: none;
    -webkit-touch-callout: none;
  }
  /* Add safe-area padding for notched devices in standalone */
  .screen, .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* Hide any browser-chrome-only UI when standalone */
  .browser-only { display: none !important; }
  /* Slightly larger touch targets in standalone (often used on tablets) */
  .btn, .toggle, .nav-item { min-height: 48px; }
}

/* Window-controls overlay (Edge / Chromium PWA) — leave room for title bar */
@media all and (display-mode: window-controls-overlay) {
  body { padding-top: env(titlebar-area-height, 32px); }
}

/* ── Typography ── */

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Links ── */

a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Focus Styles (Global) ── */

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
[role="link"]:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* High-contrast focus for dark backgrounds */
.pause-overlay :focus-visible,
.help-overlay :focus-visible,
.calibration-overlay :focus-visible {
  outline-color: #ffffff;
}

/* ── Selection ── */

::selection {
  background-color: var(--color-primary-bg);
  color: var(--color-primary-dark);
}

/* ── App Layout ── */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

#app-content {
  flex: 1;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-16) + var(--space-4));
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ── Fullscreen Activity Container ── */

#activity-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: var(--color-bg);
  display: none;
}

#activity-fullscreen.active {
  display: block;
}

#activity-fullscreen canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Scrollbar Styling ── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ── Skip Link ── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--color-primary);
  color: white;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}

.skip-link:focus {
  top: 0;
}

/* ── Utility Classes ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary-dark); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ── Aria Live Regions ── */

[aria-live] {
  position: relative;
}

/* ── Rechts-nach-links (ar, he, fa, ur, ps, yi) ──
   i18n.js setzt <html dir="rtl">. Richtungspfeile zeigen dann in
   Leserichtung: "weiter" nach links, "zurück" nach rechts. Wiedergabe-
   Symbole (play) bleiben wie sie sind — Mediensteuerung wird nicht
   gespiegelt. `scale` statt `transform`, damit vorhandene Hover-
   Verschiebungen weiter greifen. */
[dir="rtl"] [data-lucide="arrow-right"],
[dir="rtl"] [data-lucide="arrow-left"],
[dir="rtl"] [data-lucide="chevron-right"],
[dir="rtl"] [data-lucide="chevron-left"],
[dir="rtl"] [data-lucide="chevrons-right"],
[dir="rtl"] [data-lucide="chevrons-left"] {
  scale: -1 1;
}
/* Sperrsatz (letter-spacing) ist eine Konvention lateinischer Versalien —
   im Hebräischen reißt er Wörter auseinander, im Arabischen stört er die
   Buchstabenverbindung. */
[dir="rtl"] body * {
  letter-spacing: normal !important;
}
/* Zahlen wie "1 / 3" oder "0:04" nicht vom Bidi-Algorithmus umdrehen lassen. */
[dir="rtl"] .stat-card__value,
[dir="rtl"] .metric-card__value {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- css/components.css --- */
/* ==========================================================================
   GazeTo — Components
   ========================================================================== */

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  min-height: 48px;
  min-width: 48px;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  cursor: pointer;
  border: none;
  text-decoration: none;
  line-height: 1;
}

.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
}

.btn-primary:active {
  background-color: var(--color-primary-dark);
  transform: scale(0.98);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary-bg);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
}

.btn-ghost:hover {
  background-color: var(--color-surface-alt);
}

.btn-large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  min-height: 56px;
}

.btn-dwell {
  position: relative;
  min-width: 64px;
  min-height: 64px;
  overflow: hidden;
}

.btn-dwell .dwell-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 3px solid transparent;
  pointer-events: none;
}

.btn-dwell.dwelling .dwell-progress {
  border-color: var(--color-primary-light);
  animation: dwell-fill var(--dwell-duration, 800ms) linear forwards;
}

@keyframes dwell-fill {
  from {
    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  14.28% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  28.56% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
  42.84% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
  57.12% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
  }
  71.4% {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%);
  }
  to {
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
}

/* ── Cards ── */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-clickable {
  cursor: pointer;
}

/* ── Activity Card ── */

.activity-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}

.activity-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.activity-card__thumbnail,
.activity-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: var(--color-surface-alt);
}

.activity-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Detail page thumbnail */
.detail-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg, 12px);
  margin-bottom: var(--space-4, 1rem);
}

.detail-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.activity-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-inverse);
}

.activity-card__body {
  padding: var(--space-3);
}

.activity-card__name {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: 1.6;
}

.activity-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ── Pills / Tags ── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: var(--font-medium);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Bottom Navigation ── */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 64px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  min-width: 48px;
  min-height: 48px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  cursor: pointer;
  background: none;
  border: none;
}

.bottom-nav__item:hover {
  color: var(--color-text-secondary);
}

.bottom-nav__item.active {
  color: var(--color-primary);
}

.bottom-nav__item i {
  width: 24px;
  height: 24px;
}

.bottom-nav__label {
  font-size: 13px;
  font-weight: var(--font-medium);
  /* Zweiwort-Beschriftungen ("Mein Bereich") brachen um und die zweite Zeile wurde
     von der festen 64px-Leiste abgeschnitten (iPhone 03.08.). Kompakte Zeilenhoehe
     und mittige Ausrichtung lassen zwei kurze Zeilen in die Leiste passen. */
  line-height: 1.1;
  text-align: center;
  max-width: 84px;
}

/* ── Activity Grid ── */

.activity-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .activity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .activity-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Filter Bar ── */

.filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.filter-btn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 48px;
  min-width: 48px;
}

.filter-btn:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-btn.active,
.filter-btn.filter-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ── Progress Bar ── */

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--transition-slow);
}

/* ── Toast / Notification ── */

.toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-lg);
  max-width: 300px;
  text-align: center;
  pointer-events: auto;
  animation: toast-in 300ms var(--transition-spring) forwards;
}

.toast.toast-success { background: var(--color-success); }
.toast.toast-error   { background: var(--color-error); }
.toast.toast-info    { background: var(--color-info); }
.toast.toast-achievement {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.toast.hiding {
  animation: toast-out 200ms ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

/* ── Overlay / Modal ── */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.overlay__panel {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

/* ── Slider ── */

.slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.slider-group label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.slider-group input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.slider-group .slider-value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: right;
}

/* ── Toggle Switch ── */

.toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 48px;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__track {
  width: 48px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background var(--transition-fast);
  position: relative;
}

.toggle input:checked + .toggle__track {
  background: var(--color-primary);
}

.toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.toggle input:checked + .toggle__track::after {
  transform: translateX(20px);
}

.toggle__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* ── Section Header ── */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-header h2 {
  font-size: var(--text-2xl);
}

.section-header h3 {
  font-size: var(--text-xl);
}

/* ── Stat Box ── */

.stat-box {
  text-align: center;
  padding: var(--space-4);
}

.stat-box__value {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-dark);
}

.stat-box__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Stars Rating ── */

.stars {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
}

.stars i {
  width: 32px;
  height: 32px;
  color: var(--color-border);
}

.stars i.filled {
  color: #f59e0b;
}

/* ── Pause Overlay ── */

.pause-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  z-index: 2020 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}

.pause-overlay--hidden {
  display: none !important;
}

.pause-overlay__panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px;
  min-width: 320px;
  max-width: 540px;
  width: 90vw;
  padding: 32px;
}

.pause-overlay .pause-btn {
  width: 100% !important;
  min-width: 260px !important;
  min-height: 64px !important;
  font-size: 1.2rem !important;
  padding: 16px 32px !important;
  justify-content: center;
  border-radius: 14px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

/* Volume sliders — large thumb for comfortable iPad touch dragging */
.pause-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.pause-volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
}
.pause-volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
}
.pause-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--color-primary, #4b698c);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.pause-volume-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary, #4b698c);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.pause-overlay .pause-btn.btn--primary {
  background-color: var(--color-primary) !important;
  color: white !important;
  border: none !important;
}

.pause-overlay .pause-btn.btn--outline {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
}

.pause-overlay .pause-btn.btn--danger {
  color: #ff6b6b !important;
  border-color: #ff6b6b !important;
  background: rgba(255,107,107,0.1) !important;
}

.pause-overlay__title {
  color: var(--color-text-inverse);
  font-size: var(--text-3xl);
}

.screen-activity-runner {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2000 !important;
  background: #000;
}

.runner-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 2001;
}

.runner-pause {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2010;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.runner-pause:hover {
  background: rgba(0, 0, 0, 0.5);
}

.btn--icon {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.btn--danger {
  color: var(--color-error);
  border-color: var(--color-error);
}

.btn--danger:hover {
  background: rgba(220, 38, 38, 0.1);
}

.pause-overlay h2 {
  color: var(--color-text-inverse);
  font-size: var(--text-3xl);
}

/* ── Activity-Runner Top-Right Buttons (Pause + Quick-End) ── */

.runner-pause,
.runner-end {
  position: fixed;
  top: var(--space-4);
  /* z-index above .screen-activity-runner (2000) and .pause-overlay (2020) */
  z-index: 2050;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* AssistUK-Logo während der Aktivität: klein, oben links, nie anwählbar */
/* Ton gesperrt (direkter Link/Neuladen): deutlicher Knopf, groß genug für
   Tippen durch die Begleitperson; verschwindet beim ersten Tippen.
   27.09.2026: am unteren Rand statt bei 96 px — in niedriger Querlage
   (844x390) saß er sonst mitten im Spielfeld. Oben liegen Logo, Pause und
   Stopp; unten mittig überdeckt er keinen Kopf-Knopf. */
/* TONKNOPF-2026-10-25 (QA: „verdeckt am Handy die unteren Antworten“): oben links unter dem Logo statt unten
   mittig — dort liegen in vielen Spielen die Antworten. Nach 6 s nur noch das Symbol (--klein). */
.runner-ton-knopf {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  top: calc(72px + env(safe-area-inset-top, 0px));
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  z-index: 2020;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 28px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #1a3a6a;
  color: #fff;
  font: 700 1.25rem/1.2 inherit;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: runnerTonPuls 2.4s ease-in-out infinite;
}
.runner-ton-knopf svg { width: 30px; height: 30px; }
@keyframes runnerTonPuls { 0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,0.45); } 50% { box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 8px rgba(255,255,255,0.25); } }
@media (prefers-reduced-motion: reduce) { .runner-ton-knopf { animation: none; } }
.runner-ton-knopf--klein { padding: 0; width: 64px; min-width: 64px; justify-content: center; gap: 0; }
.runner-ton-knopf--klein span { display: none; }
/* Niedrige Querlage (Handy quer): kleiner und dicht am Rand */
@media (max-height: 500px) {
  .runner-ton-knopf {
    top: calc(56px + env(safe-area-inset-top, 0px));
    min-height: 48px;
    padding: 8px 20px;
    font-size: 1.05rem;
    border-width: 2px;
  }
  .runner-ton-knopf svg { width: 24px; height: 24px; }
}

/* BERICHT-2026-10-25 (Lars: „auf hellem Hintergrund ist das AssistUK-Logo kaum zu sehen“): weißes Logo auf einem
   halb durchsichtigen dunklen Feld — lesbar auf jeder Szene, hell wie dunkel. */
.runner-logo {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  box-sizing: content-box;
  height: 30px;
  width: auto;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  z-index: 2010;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.runner-pause { right: 84px; }   /* leave 12px gap to end button */
.runner-end   { right: 16px; background: rgba(220, 38, 38, 0.7); }

.runner-pause i,
.runner-end i { width: 24px; height: 24px; }

.runner-pause:hover,
.runner-end:hover { background: rgba(0, 0, 0, 0.65); transform: scale(1.05); }
.runner-end:hover { background: rgba(220, 38, 38, 0.9); }

/* ── Screen Base ── */

.screen {
  padding: var(--space-2) 0;
  max-width: 100%;
}

.screen-title {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
  color: var(--color-text);
}

/* ── Badge ── */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: var(--font-bold);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  white-space: nowrap;
}

.badge--stufe {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
}

.badge--large {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

/* ── Activity Card (enhanced layout) ── */

.activity-card {
  display: flex;
  flex-direction: column;
}

.activity-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.activity-card__name {
  display: block;
  padding: var(--space-3) var(--space-3) 0;
}

.activity-card .pill {
  margin: 0 var(--space-3) var(--space-3);
}

/* ── Pill Variants ── */

.pill--category {
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
}

.pill--kompetenz {
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* ── Pill with Tip (competency explanation) ── */

.pill-with-tip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pill-tip {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding-left: var(--space-2, 0.5rem);
  line-height: 1.6;
}

/* ── Stufe Explanation Line ── */

.detail-stufe-explain {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3, 0.75rem);
  margin-top: 0;
  font-style: italic;
  line-height: 1.6;
}

/* ── Filter Separator ── */

.filter-separator {
  display: flex;
  align-items: center;
  color: var(--color-border-strong);
  font-size: var(--text-lg);
  padding: 0 var(--space-1);
  user-select: none;
}

/* ── Empty Message ── */

.empty-message {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  padding: var(--space-8) var(--space-4);
  grid-column: 1 / -1;
}

/* ── Error Message ── */

.error-message {
  text-align: center;
  color: var(--color-error);
  font-size: var(--text-base);
  padding: var(--space-8) var(--space-4);
}

/* ── Back Button ── */

.btn--back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  margin-bottom: var(--space-4);
  cursor: pointer;
}

.btn--back:hover {
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

.btn--back i,
.btn--back svg {
  width: 20px;
  height: 20px;
}

/* ── Detail Page Buttons (uniform sizing) ── */

.detail-action-btn {
  min-width: 160px;
  min-height: 56px;
  font-size: 1.1rem;
  padding: 14px 28px;
  border-radius: 14px;
}

.detail-back-btn {
  min-height: 48px;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 12px;
  /* Now lives in .detail-topbar — no bottom margin needed. */
}

.detail-topbar {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 50;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

/* Mobile: hide the "Zurück"/"Hilfe" text labels, keep icons only —
   gives the prominent "Starten" button room. */
@media (max-width: 600px) {
  .detail-topbar .detail-back-btn span,
  .detail-topbar .detail-action-btn:not(.btn--primary) span {
    display: none;
  }
  .detail-topbar .detail-back-btn,
  .detail-topbar .detail-action-btn:not(.btn--primary) {
    padding: 8px 12px !important;
  }
  .detail-topbar .btn--primary {
    padding: 8px 18px !important;
  }
}

.detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-section-heading {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin: 20px 0 8px 0;
}

/* ── Goals Box (competency descriptions) ── */
.detail-goals-box {
  background: var(--color-surface-alt, #f5f5f5);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-5, 1.25rem);
  margin: var(--space-5, 1.25rem) 0;
}
.detail-goals-box__heading {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4, 1rem) 0;
}
.detail-goals-box__item {
  padding: var(--space-3, 0.75rem) 0;
  border-top: 1px solid var(--color-border, #e0e0e0);
}
.detail-goals-box__item:first-of-type {
  border-top: none;
  padding-top: 0;
}
.detail-goals-box__label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark, #3a5a7c);
  background: var(--color-primary-bg, #fdf2f4);
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  margin-bottom: var(--space-1, 0.25rem);
}
.detail-goals-box__desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #4a4a4a);
  margin: var(--space-1, 0.25rem) 0 0 0;
}

/* ── Help Button ── */

.btn--help {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn--help:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

/* ── Help Overlay ── */

.help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.help-overlay__content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.help-overlay__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.help-overlay__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.help-overlay__close i,
.help-overlay__close svg {
  width: 24px;
  height: 24px;
}

.help-section__title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.help-section__title:first-of-type {
  margin-top: 0;
}

.help-section__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-2);
}

/* ── Section Title (shared) ── */

.section-title {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

/* ── Stats Grid ── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Stat Card ── */

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-card__label {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  line-height: 1.6;
}

.stat-card__value {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ── Metric Card (results screen) ── */

.metric-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.metric-card__label {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  line-height: 1.6;
}

.metric-card__value {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* ── Metrics Grid ── */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 600px) {
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Toggle (button-based in settings) ── */

.toggle--on {
  /* intentional: used in JS toggle */
}

.settings-row--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  min-height: 48px;
}

.settings-row--toggle + .settings-row--toggle {
  border-top: 1px solid var(--color-surface-alt);
}

/* Toggle button component (settings) */

.settings-row--toggle .toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  min-width: 52px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  border-radius: 999px;
  background: #c0c0c0;
  border: 1px solid var(--color-border, #d4d4d4);
  cursor: pointer;
  transition: background var(--transition-fast, 200ms ease);
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: 0;
  vertical-align: middle;
}

.settings-row--toggle .toggle--on {
  /* Theme-independent green "on" state (gray when off). Green reads as
     enabled/active everywhere — avoids the Kinderwelt accent turning toggles red. */
  background: #1f8a5b;
  border-color: #1a774e;
}

.settings-row--toggle .toggle__knob {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast, 200ms ease);
  pointer-events: none;
}

.settings-row--toggle .toggle--on .toggle__knob {
  transform: translateX(22px);
}

/* ==========================================================================
   Webcam Status Indicator
   ========================================================================== */

.webcam-status {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  z-index: 9000;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.webcam-status--loading {
  background-color: #fef3cd;
  color: #856404;
}

.webcam-status--active {
  background-color: #d4edda;
  color: #155724;
}

.webcam-status--error {
  background-color: #f8d7da;
  color: #721c24;
}

.webcam-status--off {
  display: none;
}

/* ==========================================================================
   Webcam Calibration Overlay
   ========================================================================== */

.calibration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--space-6);
}

.calibration-instructions {
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  text-align: center;
  max-width: 600px;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-4);
}

.calibration-progress {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.calibration-point {
  position: fixed;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: 3px solid #ffffff;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10001;
}

.calibration-point__inner {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background-color: var(--color-primary, #4b698c);
  transition: background-color 0.3s;
}

.calibration-point__count {
  position: absolute;
  bottom: -24px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.calibration-point--active {
  animation: calibration-pulse 1.2s ease-in-out infinite;
  border-color: var(--color-primary, #4b698c);
}

.calibration-point--done {
  background-color: rgba(40, 167, 69, 0.4);
  border-color: #28a745;
}

.calibration-point--done .calibration-point__inner {
  background-color: #28a745;
}

.calibration-point--test {
  border-color: #ffc107;
  animation: calibration-pulse 1s ease-in-out infinite;
}

.calibration-point--test .calibration-point__inner {
  background-color: #ffc107;
}

@keyframes calibration-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.15); }
}

.calibration-cancel {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.calibration-cancel:hover {
  border-color: #ffffff;
}

.calibration-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: var(--space-8);
}

.calibration-feedback__title {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin: 0;
}

.calibration-feedback__message {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  margin: 0;
}

.calibration-feedback__quality {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin: 0;
}

.calibration-feedback__quality--good {
  color: #28a745;
}

.calibration-feedback__quality--ok {
  color: #ffc107;
}

.calibration-feedback__quality--poor {
  color: #dc3545;
}

.calibration-done-btn {
  min-width: 160px;
}

.calibration-recal-btn {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Switch Scanning Styles
   ========================================================================== */

.switch-scan-highlight {
  outline: 4px solid var(--color-primary, #4b698c) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px rgba(75, 105, 140, 0.25) !important;
  transition: outline-color 0.15s, box-shadow 0.15s;
}

.switch-scan-selected {
  outline-color: #28a745 !important;
  box-shadow: 0 0 0 8px rgba(40, 167, 69, 0.35) !important;
  transform: scale(0.97);
  transition: transform 0.1s;
}

.switch-scan-ring {
  position: fixed;
  pointer-events: none;
  z-index: 8999;
  border: 3px dashed var(--color-primary, #4b698c);
  border-radius: var(--radius-sm, 8px);
  transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
  animation: switch-ring-pulse 1s ease-in-out infinite;
}

@keyframes switch-ring-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Color Swatch Picker ── */

.color-swatch-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 48px;
  min-width: 48px;
}

.color-swatch:hover {
  border-color: var(--color-text-secondary);
}

.color-swatch--active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text);
}

/* ── Settings subsections for webcam / switch ── */

.settings-subsection {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-secondary, rgba(0, 0, 0, 0.03));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary, #4b698c);
}

/* ==========================================================================
   Stufenmodell — Skill Progression View
   ========================================================================== */

/* ── Header Section ── */

.stufen-header-section {
  margin-bottom: var(--space-6);
  text-align: center;
}

.stufen-overview-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

@media (max-width: 599px) {
  .stufen-overview-row {
    flex-direction: column;
    gap: var(--space-3);
  }
}

.stufen-header-text {
  text-align: left;
  flex: 1;
}

@media (max-width: 599px) {
  .stufen-header-text {
    text-align: center;
  }
}

.stufen-title {
  margin-bottom: var(--space-2);
}

.stufen-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Mini Staircase Graphic ── */

.stufen-stair-graphic {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
  width: 140px;
}

.stufen-stair-step {
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.stufen-stair-step:nth-child(1) { width: 30%; }
.stufen-stair-step:nth-child(2) { width: 40%; }
.stufen-stair-step:nth-child(3) { width: 50%; }
.stufen-stair-step:nth-child(4) { width: 60%; }
.stufen-stair-step:nth-child(5) { width: 72%; }
.stufen-stair-step:nth-child(6) { width: 85%; }
.stufen-stair-step:nth-child(7) { width: 100%; }

.stufen-stair-num {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* ── Overview Image ── */

.stufen-overview-img {
  display: block;
  max-width: 400px;
  width: 100%;
  height: auto;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-lg, 12px);
}

/* ── Stufen Model Container ── */

.stufen-model {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Stufe Row ── */

.stufe-row {
  border-radius: var(--radius-md);
  border-left: 5px solid #ccc;
  padding: var(--space-4);
  background: var(--color-surface);
  transition: box-shadow 0.25s, transform 0.25s;
}

.stufe-row:hover {
  box-shadow: var(--shadow-md);
}

.stufe-current {
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-lg);
  transform: scale(1.01);
}

/* ── Stufe Row Header ── */

.stufe-row-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.stufe-num-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.stufe-row-info {
  flex: 1;
  min-width: 0;
}

.stufe-row-title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.2;
}

.stufe-row-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ── Stufe Progress ── */

.stufe-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 180px;
}

@media (max-width: 599px) {
  .stufe-progress {
    width: 100%;
    margin-top: var(--space-2);
  }
}

.stufe-progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.stufe-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-surface-alt, #eee);
  border-radius: var(--radius-full);
  overflow: hidden;
  min-width: 60px;
}

.stufe-progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.stufe-check {
  color: #28a745;
  display: flex;
  align-items: center;
}

.stufe-check i,
.stufe-check svg {
  width: 20px;
  height: 20px;
}

/* ── Lock Badge (Coming Soon) ── */

.stufe-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: var(--color-surface-alt, #f0f0f0);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.stufe-lock-badge i,
.stufe-lock-badge svg {
  width: 16px;
  height: 16px;
}

/* ── Locked Stufe ── */

.stufe-locked {
  opacity: 0.65;
}

.stufe-locked-content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.stufe-locked-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.stufe-locked-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* ── Activity Cards (horizontal scroll) ── */

/* ── Scroll Wrapper ── */
.stufe-scroll-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.stufe-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border, #ddd);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background 0.15s, box-shadow 0.15s;
}
.stufe-scroll-btn:hover {
  background: var(--color-primary-bg, #fdf2f4);
  box-shadow: var(--shadow-lg);
}
.stufe-scroll-btn--left {
  left: -4px;
}
.stufe-scroll-btn--right {
  right: -4px;
}
.stufe-scroll-btn i,
.stufe-scroll-btn svg {
  width: 20px;
  height: 20px;
}

.stufe-activities {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-2) var(--space-6);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  flex: 1;
}

.stufe-activities::-webkit-scrollbar {
  height: 6px;
}

.stufe-activities::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
}

.stufe-activities::-webkit-scrollbar-thumb {
  background: var(--color-border-strong, #bbb);
  border-radius: var(--radius-full);
}
.stufe-activities::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888);
}

.stufe-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.stufe-card:hover,
.stufe-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.stufe-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.stufe-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.stufe-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stufe-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stufe-card__name {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1.2;
}

.stufe-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stufe-card .pill {
  margin-top: var(--space-1);
  align-self: flex-start;
}

.stufe-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-2);
}

/* ── Responsive: larger cards on wider screens ── */

@media (min-width: 600px) {
  .stufe-card {
    flex: 0 0 260px;
  }
}

@media (min-width: 960px) {
  .stufe-card {
    flex: 0 0 280px;
  }
}

/* ==========================================================================
   Stufe Detail Page
   ========================================================================== */

.screen-stufe-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (max-width: 600px) {
  .stufe-detail-header {
    flex-direction: column !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) !important;
  }
  .stufe-detail-title {
    font-size: var(--text-xl) !important;
  }
}

.stufe-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  border-left: 5px solid #ccc;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.stufe-detail-info {
  flex: 1;
  min-width: 0;
}

.stufe-detail-title {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.2;
}

.stufe-detail-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.stufe-detail-img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto var(--space-6);
  border-radius: var(--radius-lg, 12px);
}

.stufe-detail-activities {
  margin-bottom: var(--space-6);
}

.stufe-detail-accordions {
  margin-bottom: var(--space-6);
}

.stufe-detail-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

/* ── Stufe Accordion ── */

.stufe-accordion {
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.stufe-accordion__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  background: var(--color-surface-alt, #f8f8f8);
  list-style: none;
}

.stufe-accordion__header::-webkit-details-marker {
  display: none;
}

.stufe-accordion__icon {
  font-size: 1.3rem;
}

.stufe-accordion__title {
  flex: 1;
}

.stufe-accordion__chevron {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}

.stufe-accordion[open] .stufe-accordion__chevron {
  transform: rotate(180deg);
}

.stufe-accordion[open] .stufe-accordion__header {
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.stufe-accordion__body {
  padding: 20px;
  line-height: 1.7;
  font-size: 0.95rem;
  white-space: pre-line;
}

.stufe-accordion__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.stufe-accordion--simple .stufe-accordion__header { background: #E8F5E9; }
.stufe-accordion--educational .stufe-accordion__header { background: #E3F2FD; }
.stufe-accordion--therapeutic .stufe-accordion__header { background: #FFF3E0; }
.stufe-accordion--evidence .stufe-accordion__header { background: #F3E5F5; }
.stufe-accordion--tips-parents .stufe-accordion__header { background: #FFF8E1; }
.stufe-accordion--tips-therapists .stufe-accordion__header { background: #E0F7FA; }
.stufe-accordion--links .stufe-accordion__header { background: #F1F8E9; }

/* Links in accordion */
.stufe-link-item {
  margin: 0 0 var(--space-2) 0;
  line-height: 1.6;
}

.stufe-link-item a {
  word-break: break-all;
}

/* ==========================================================================
   Gaze Analytics — Results Screen
   ========================================================================== */

/* ── Analytics Accordion ── */

.analytics-accordion {
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
  margin-top: var(--space-4);
  overflow: hidden;
}

.analytics-accordion__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  background: var(--color-surface-alt, #f8f8f8);
  list-style: none;
}

.analytics-accordion__header::-webkit-details-marker {
  display: none;
}

.analytics-accordion__icon {
  font-size: 1.3rem;
}

.analytics-accordion__title {
  flex: 1;
}

.analytics-accordion__chevron {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}

.analytics-accordion[open] .analytics-accordion__chevron {
  transform: rotate(180deg);
}

.analytics-accordion[open] .analytics-accordion__header {
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.analytics-accordion__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Side Bias Bar ── */

.side-bias-section {
  margin-bottom: var(--space-2);
}

.side-bias-label {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.side-bias-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.side-bias-badge--balanced {
  background: #E8F5E9;
  color: #2e7d32;
}

.side-bias-badge--warning {
  background: #FFF3E0;
  color: #e65100;
}

.side-bias-bar {
  display: flex;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--text-xs);
  font-weight: 600;
}

.side-bias-bar__left {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #42a5f5;
  color: #fff;
  transition: width 0.4s ease;
  min-width: 28px;
}

.side-bias-bar__right {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef5350;
  color: #fff;
  transition: width 0.4s ease;
  min-width: 28px;
}

/* ── Zone Distribution Grid (3x3) ── */

.zone-grid-section {
  margin-bottom: var(--space-2);
}

.zone-grid-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.zone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  max-width: 180px;
  aspect-ratio: 1;
}

.zone-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  min-height: 48px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ── Fatigue Indicator ── */

.fatigue-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

.fatigue-indicator--ok {
  background: #E8F5E9;
  color: #2e7d32;
}

.fatigue-indicator--warning {
  background: #FFF3E0;
  color: #e65100;
}

/* BERICHT-2026-10-25: Sitzung zu kurz für eine Aussage */
.fatigue-indicator--neutral {
  background: #eef2f7;
  color: #334155;
}

.fatigue-indicator__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.fatigue-indicator__text {
  flex: 1;
}

.fatigue-indicator__detail {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Metric Row (label + value inline) ── */

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border, #eee);
  font-size: var(--text-sm);
}

.metric-row:last-child {
  border-bottom: none;
}

.metric-row__label {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.metric-row__value {
  font-weight: 700;
  color: var(--color-text);
}

/* ── Analytics Sections ── */

.analytics-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-border, #eee);
}

.analytics-section-explain {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #4a4a4a);
  margin-bottom: var(--space-3);
  font-style: italic;
  line-height: 1.5;
}

.metric-row__explanation {
  font-size: 0.8rem;
  color: var(--color-text-secondary, #4a4a4a);
  padding: 2px 0 8px 0;
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border, #f0f0f0);
  margin-bottom: 4px;
}

@media (max-width: 599px) {
  .zone-grid {
    max-width: 140px;
  }
  .zone-grid__cell {
    min-height: 40px;
    font-size: 10px;
  }
}

/* ==========================================================================
   Progress Dashboard
   ========================================================================== */

.progress-dashboard {
  padding: var(--space-4);
  padding-bottom: calc(var(--space-16, 4rem) + 80px);
  max-width: 960px;
  margin: 0 auto;
}

.progress-dashboard__header {
  margin-bottom: var(--space-6);
}

.progress-dashboard__title-row {
  margin-bottom: var(--space-3);
}

.progress-dashboard__stats-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.progress-dashboard__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3) var(--space-5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  min-width: 100px;
  flex: 1;
}

.progress-dashboard__stat-value {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 900;
  color: var(--color-primary, #4b698c);
  line-height: 1.2;
}

.progress-dashboard__stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  margin-top: var(--space-1);
  text-align: center;
}

.progress-dashboard__loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted, #6b7280);
}

.progress-dashboard__empty {
  text-align: center;
  padding: var(--space-12, 3rem);
}

.progress-dashboard__empty-icon {
  width: 64px;
  height: 64px;
  color: var(--color-text-muted, #6b7280);
  margin-bottom: var(--space-4);
}

/* ── Progress Sections ── */

.progress-section {
  margin-bottom: var(--space-6);
}

.progress-section__title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-text, #1f2937);
  margin-bottom: var(--space-3);
}

/* ── Trend Cards Row ── */

.trend-cards-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.trend-cards-row::-webkit-scrollbar {
  height: 4px;
}

.trend-cards-row::-webkit-scrollbar-thumb {
  background: var(--color-border, #e5e7eb);
  border-radius: 4px;
}

.trend-card {
  flex: 0 0 200px;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.trend-card__label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.trend-card__value-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.trend-card__value {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 900;
  color: var(--color-text, #1f2937);
}

.trend-card__direction {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
}

.trend-card__change {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.trend-card__sparkline {
  width: 100%;
  height: 60px;
  display: block;
  margin-top: auto;
}

/* ── Side Bias Timeline ── */

.side-bias-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.side-bias-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.side-bias-row__date {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  min-width: 80px;
  flex-shrink: 0;
}

.side-bias-bar {
  flex: 1;
  display: flex;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}

.side-bias-bar__left {
  height: 100%;
  transition: width 0.3s ease;
}

.side-bias-bar__right {
  height: 100%;
  transition: width 0.3s ease;
}

.side-bias-bar--balanced .side-bias-bar__left {
  background: #16a34a;
}
.side-bias-bar--balanced .side-bias-bar__right {
  background: #22c55e;
}

.side-bias-bar--slight .side-bias-bar__left {
  background: #eab308;
}
.side-bias-bar--slight .side-bias-bar__right {
  background: #facc15;
}

.side-bias-bar--strong .side-bias-bar__left {
  background: #dc2626;
}
.side-bias-bar--strong .side-bias-bar__right {
  background: #f87171;
}

.side-bias-row__pct {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.side-bias-legend {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.side-bias-legend__item {
  display: flex;
  align-items: center;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}

.side-bias-legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: var(--space-1);
}

.side-bias-legend__dot--balanced { background: #16a34a; }
.side-bias-legend__dot--slight   { background: #eab308; }
.side-bias-legend__dot--strong   { background: #dc2626; }

/* ── Milestones ── */

.milestone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.milestone-item--achieved {
  border-left: 3px solid #16a34a;
}

.milestone-item--next {
  border-left: 3px solid var(--color-primary, #4b698c);
  background: var(--color-primary-bg, #fef2f4);
}

.milestone-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-primary, #4b698c);
}

.milestone-item--achieved .milestone-item__icon {
  color: #16a34a;
}

.milestone-item__icon i,
.milestone-item__icon svg {
  width: 20px;
  height: 20px;
}

.milestone-item__text {
  flex: 1;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text, #1f2937);
}

.milestone-item__check {
  display: flex;
  align-items: center;
  color: #16a34a;
  flex-shrink: 0;
}

.milestone-item__check i,
.milestone-item__check svg {
  width: 20px;
  height: 20px;
}

/* ── Comparison Grid ── */

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.comparison-card {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.comparison-card__label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.comparison-card__values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.comparison-card__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.comparison-card__block-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  margin-bottom: var(--space-1);
}

.comparison-card__block-value {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-text, #1f2937);
}

.comparison-card__block-value--current {
  color: var(--color-primary, #4b698c);
}

.comparison-card__arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-muted, #6b7280);
}

.comparison-card__arrow i,
.comparison-card__arrow svg {
  width: 18px;
  height: 18px;
}

.comparison-card__change {
  text-align: center;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  margin-top: var(--space-2);
}

/* ── Session History ── */

.session-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.session-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-sm, 8px);
  font-size: var(--text-sm, 0.875rem);
}

.session-history-item:nth-child(even) {
  background: var(--color-surface-alt, #f9fafb);
}

.session-history-item__date {
  color: var(--color-text-muted, #6b7280);
  font-size: var(--text-xs, 0.75rem);
  min-width: 110px;
  flex-shrink: 0;
}

.session-history-item__name {
  flex: 1;
  font-weight: 600;
  color: var(--color-text, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-history-item__duration {
  color: var(--color-text-secondary, #4b5563);
  min-width: 60px;
  text-align: right;
  flex-shrink: 0;
}

.session-history-item__metric {
  font-weight: 700;
  color: var(--color-primary, #4b698c);
  min-width: 45px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Progress Dashboard Responsive ── */

@media (max-width: 599px) {
  .progress-dashboard {
    padding: var(--space-3);
  }

  .progress-dashboard__stats-row {
    gap: var(--space-2);
  }

  .progress-dashboard__stat {
    padding: var(--space-2) var(--space-3);
    min-width: 80px;
  }

  .progress-dashboard__stat-value {
    font-size: var(--text-xl, 1.25rem);
  }

  .trend-card {
    flex: 0 0 170px;
    padding: var(--space-2) var(--space-3);
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .session-history-item {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }

  .session-history-item__date {
    min-width: auto;
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Profile Picker
   ========================================================================== */

.screen-profile-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: var(--space-8) var(--space-4);
}

.profile-picker__title {
  text-align: center;
  margin-bottom: var(--space-8);
  font-size: var(--text-2xl);
}

.profile-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  gap: var(--space-4);
  justify-content: center;
  max-width: 600px;
  width: 100%;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 140px;
  min-height: 210px;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  border: 2px solid transparent;
  box-sizing: border-box;
}

.profile-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.profile-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.profile-card--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-sm);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #fff;
  position: relative;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}

.profile-avatar--small {
  width: 40px;
  height: 40px;
  font-size: var(--text-lg);
  margin-bottom: 0;
}

.profile-avatar--add {
  background: var(--color-surface-alt);
  border: 2px dashed var(--color-border);
}

.profile-avatar__check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-surface);
}

.profile-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}

.profile-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  white-space: nowrap;
}

.profile-add-card {
  border: 2px dashed var(--color-border);
  background: transparent;
}

.profile-add-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

/* ── Profile Form ── */

.profile-form {
  max-width: 400px;
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.profile-form__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  text-align: center;
}

.profile-form__group {
  margin-bottom: var(--space-4);
}

.profile-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.profile-form__input {
  width: 100%;
}

.profile-form__colors {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.profile-form__color-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast),
              border-color var(--transition-fast);
  padding: 0;
}

.profile-form__color-btn:hover {
  transform: scale(1.15);
}

.profile-form__color-btn--active {
  border-color: var(--color-text-primary);
  transform: scale(1.15);
}

.profile-form__color-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Avatar-Galerie (mitgelieferte Bilder als Foto-Alternative) ── */
.profile-form__gallery {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.profile-form__gallery-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-tertiary, #e3e6ec);
  transition: transform var(--transition-fast),
              border-color var(--transition-fast);
}

.profile-form__gallery-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-form__gallery-btn:hover {
  transform: scale(1.12);
}

.profile-form__gallery-btn--active {
  border-color: var(--color-text-primary);
  transform: scale(1.12);
}

.profile-form__gallery-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.profile-form__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-4);
}

/* ── Settings Profile Header ── */

.settings-profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (max-width: 480px) {
  .profile-picker {
    grid-template-columns: repeat(auto-fill, 120px);
    gap: var(--space-3);
  }

  .profile-card {
    width: 120px;
    min-height: 190px;
    height: auto;
  }

  .profile-avatar {
    width: 52px;
    height: 52px;
    font-size: var(--text-xl);
  }
}

/* ── Language Grid ── */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--color-border, #e0e0e0);
  background: var(--color-surface, #fff);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.lang-btn:hover {
  border-color: var(--color-primary);
  background: rgba(75, 105, 140, 0.05);
}
.lang-btn.active {
  border-color: var(--color-primary);
  background: rgba(75, 105, 140, 0.1);
  font-weight: 600;
}
.lang-btn__flag {
  font-size: 1.4rem;
}
.lang-btn__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Modeling-Modus (Vormachen): großer Ring-Cursor folgt Maus/Touch ────── */
body.modeling-on { cursor: none; }
.modeling-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 56px; height: 56px;
  margin-left: -28px; margin-top: -28px;
  border-radius: 50%;
  border: 4px solid var(--c-accent, #4b698c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 18px rgba(75, 105, 140, 0.55);
  background: rgba(75, 105, 140, 0.12);
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  transition: transform 0.08s ease-out, opacity 0.2s;
  will-change: left, top;
}
.modeling-cursor.is-press {
  transform: scale(0.7);
  background: rgba(75, 105, 140, 0.32);
}

/* ── Reduzierte Bewegung ──
   Aktiv ueber die Einstellung reducedMotion (settings.js setzt
   body.reduced-motion) ODER die OS-Vorgabe prefers-reduced-motion.
   dwell-fill bleibt bewusst unangetastet — der Fortschrittsring ist
   funktionales Feedback, keine Deko-Animation. */

@keyframes toast-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-fade-out { from { opacity: 1; } to { opacity: 0; } }

body.reduced-motion .toast { animation: toast-fade-in 150ms ease forwards; }
body.reduced-motion .toast.hiding { animation: toast-fade-out 150ms ease forwards; }
body.reduced-motion .calibration-point--active,
body.reduced-motion .calibration-point--test { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-fade-in 150ms ease forwards; }
  .toast.hiding { animation: toast-fade-out 150ms ease forwards; }
  .calibration-point--active,
  .calibration-point--test { animation: none; }
}
/* --- css/activities.css --- */
/* ==========================================================================
   GazeTo — Activity-specific Styles
   ========================================================================== */

/* ── Gaze Cursor ── */

/* Hide native mouse cursor when custom gaze cursor is active.
   Excludes high-priority modals (camera capture, install prompt, etc.) where
   the user needs to see their cursor to click buttons — the gaze-cursor's
   z-index 9999 sits below modal overlays at z 99000+. */
body.gaze-cursor-active,
body.gaze-cursor-active * {
  cursor: none !important;
}

/* Re-enable system cursor inside high-z-index modal overlays */
body.gaze-cursor-active .heatmap-zoom-overlay,
body.gaze-cursor-active .heatmap-zoom-overlay *,
body.gaze-cursor-active .pwa-install-card,
body.gaze-cursor-active .pwa-install-card *,
body.gaze-cursor-active #pwa-update-card,
body.gaze-cursor-active #pwa-update-card *,
/* Camera capture overlay (built dynamically in profile-picker.js) */
body.gaze-cursor-active div[style*="z-index:99999"],
body.gaze-cursor-active div[style*="z-index:99999"] *,
body.gaze-cursor-active div[style*="z-index: 99999"],
body.gaze-cursor-active div[style*="z-index: 99999"] * {
  cursor: auto !important;
}
/* Hand-Zeiger NUR in den Dialogen oben. Früher stand hier auch
   `body.gaze-cursor-active button` — damit erschien über jedem Knopf die
   Maushand zusätzlich zum Blick-Zeiger bzw. trotz „kein Zeiger“
   (Lars 03.10.2026: „zusätzlich sieht man die Maushand – das soll nicht sein“). */
/* In der laufenden Aktivität mit normalem Mauszeiger: immer der Pfeil, nie die Hand.
   (Die Blick-Zeiger-Regel oben ist spezifischer und gewinnt, wo cursor:none gilt.) */
.screen-activity-runner,
.screen-activity-runner * {
  cursor: default !important;
}
body.gaze-cursor-active div[style*="z-index:99999"] button,
body.gaze-cursor-active .heatmap-zoom-overlay button,
body.gaze-cursor-active .pwa-install-card button {
  cursor: pointer !important;
}

.gaze-cursor {
  --cursor-color: var(--c-accent, #4b698c);
  position: fixed;
  pointer-events: none;
  /* z-index above all modal overlays (PWA card 9000, camera dialog 99999, etc.) */
  z-index: 2147483647;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  /* No transition — gaze updates are already at ~60Hz; transition causes visible lag/jitter */
}

.gaze-cursor--circle {
  width: 40px;
  height: 40px;
  border: 2px solid var(--cursor-color);
  border-radius: 50%;
  opacity: 0.7;
}

.gaze-cursor--circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--cursor-color);
  border-radius: 50%;
}

.gaze-cursor--dot {
  width: 12px;
  height: 12px;
  background: var(--cursor-color);
  border-radius: 50%;
  opacity: 0.7;
}

/* Miniaturpunkt — bewusst sehr klein und satt: minimale Ablenkung,
   bleibt aber als Referenzpunkt sichtbar (Lars-Review-Wunsch 2026-06-11) */
.gaze-cursor--mini {
  width: 6px;
  height: 6px;
  background: var(--cursor-color);
  border-radius: 50%;
  opacity: 0.85;
}

.gaze-cursor--crosshair {
  width: 24px;
  height: 24px;
}

.gaze-cursor--crosshair::before,
.gaze-cursor--crosshair::after {
  content: '';
  position: absolute;
  background: var(--cursor-color);
  opacity: 0.6;
}

.gaze-cursor--crosshair::before {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.gaze-cursor--crosshair::after {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

/* 'arrow' = native system pointer; the overlay element is not drawn.
   'hidden' kept for backward compat (same effect).
   'off' = GAR KEIN Cursor: Overlay unsichtbar, und weil 'off' wie ein
   Overlay-Stil zählt, setzt applyActiveClass() body.gaze-cursor-active
   → der Systemzeiger verschwindet ebenfalls (cursor:none). */
.gaze-cursor--arrow,
.gaze-cursor--hidden,
.gaze-cursor--off {
  display: none;
}

/* ── Dwell Progress Ring ── */

.dwell-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border-radius: 50%;
  pointer-events: none;
}

.dwell-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.dwell-ring circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset linear;
}

.dwelling .dwell-ring circle {
  stroke-dashoffset: 0;
}

/* ── Activity Canvas Area ── */

.activity-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
}

.activity-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Heatmap Overlay ── */

.heatmap-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

.heatmap-container canvas {
  width: 100%;
  height: 100%;
}

/* ── Stufe Badge Colors ── */

.badge-stufe-1 { background: var(--color-stufe-1); }
.badge-stufe-2 { background: var(--color-stufe-2); }
.badge-stufe-3 { background: var(--color-stufe-3); }
.badge-stufe-4 { background: var(--color-stufe-4); }
.badge-stufe-5 { background: var(--color-stufe-5); }
.badge-stufe-6 { background: var(--color-stufe-6); }
.badge-stufe-7 { background: var(--color-stufe-7); }

/* ── Category Colors ── */

.cat-sensorisch  { color: var(--color-cat-sensorisch); }
.cat-zielspiele  { color: var(--color-cat-zielspiele); }
.cat-tracking    { color: var(--color-cat-tracking); }
.cat-spiele      { color: var(--color-cat-spiele); }
.cat-kreativ     { color: var(--color-cat-kreativ); }
.cat-entspannung { color: var(--color-cat-entspannung); }
.cat-teilhabe    { color: var(--color-cat-teilhabe); }

/* ── Onboarding ── */

.screen-onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: var(--space-8);
  text-align: center;
}

.onboarding-steps {
  width: 100%;
  max-width: 480px;
  position: relative;
}

.onboarding-step {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.onboarding-step--active {
  display: flex;
  animation: onb-fadeIn 300ms ease forwards;
}

.onboarding-step--exit {
  display: flex;
  animation: onb-fadeOut 200ms ease forwards;
}

@keyframes onb-fadeIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes onb-fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-20px); }
}

.onboarding-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-6);
}

.onboarding-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition-fast);
}

.onboarding-dot--active {
  background: var(--color-primary);
}

.onboarding-dots__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.onboarding-howto {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-6) 0;
  flex-wrap: wrap;
  justify-content: center;
}

.onboarding-howto__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 160px;
}

.onboarding-howto__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.onboarding-howto__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.onboarding-form {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.form-input {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  min-height: 48px;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(75, 105, 140, 0.1);
}

.form-input--error {
  border-color: var(--color-error);
  animation: shake 300ms ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.btn-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn--outline {
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 48px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.btn--outline:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.btn--outline.btn--active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  cursor: pointer;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--transition-fast);
}

.btn--primary:hover {
  background: var(--color-primary-light);
}

.btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  min-height: 56px;
  margin-top: var(--space-4);
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}

.onboarding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-8);
  text-align: center;
}

.onboarding__illustration {
  width: 100%;
  max-width: 320px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
}

.onboarding__headline {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
}

.onboarding__text {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 400px;
  margin-bottom: var(--space-8);
}

.onboarding__steps {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
}

.onboarding__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 140px;
}

.onboarding__step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.onboarding__dots {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.onboarding__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.onboarding__dot.active {
  background: var(--color-primary);
}

/* ── Result Screen ── */

.result-screen {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.result-screen__emoji {
  font-size: 48px;
  margin-bottom: var(--space-4);
}

.result-screen__title {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.result-screen__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 400px;
  margin: var(--space-6) auto;
}

.result-screen__metric {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.result-screen__metric-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary-dark);
}

.result-screen__metric-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.result-screen__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* ── Settings Section ── */

.settings-section {
  margin-bottom: var(--space-6);
}

.settings-section__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  min-height: 48px;
}

.settings-row + .settings-row {
  border-top: 1px solid var(--color-surface-alt);
}

.settings-row__label {
  font-weight: var(--font-medium);
}

.settings-row__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Theme Chooser ── */

.theme-chooser {
  display: flex;
  gap: var(--space-3);
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-width: 100px;
  min-height: 48px;
  transition: border-color var(--transition-fast);
}

.theme-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.theme-option__preview {
  width: 60px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Screen-specific Styles
   ========================================================================== */

/* ── Activities Screen ── */

.screen-activities .filter-bar {
  margin-bottom: var(--space-6);
  align-items: center;
}

.screen-activities .activity-grid {
  margin-bottom: var(--space-4);
}

/* ── Activity Detail Screen ── */

.screen-activity-detail {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

/* ── Activity Detail Responsive ── */

/* iPad portrait + smaller tablets: tighten spacing, keep 2-col */
@media (max-width: 1024px) {
  .detail-compact {
    grid-template-columns: minmax(220px, 300px) 1fr !important;
    gap: 14px 20px !important;
    padding: 14px 18px !important;
  }
  .detail-compact .detail-thumb {
    min-height: 220px !important;
  }
}

/* iPad portrait threshold: stack vertically — thumb on top, content below */
@media (max-width: 820px) {
  .detail-compact {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr auto !important;
    grid-template-areas:
      "thumb"
      "header"
      "settings"
      "actions" !important;
    min-height: auto !important;
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .detail-compact .detail-compact__left {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .detail-compact .detail-thumb {
    width: 50% !important;
    min-height: 160px !important;
    max-height: 200px !important;
    flex: 0 0 auto !important;
  }
  .detail-compact .detail-stufe-explain {
    flex: 1 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .detail-name {
    font-size: 1.6rem !important;
  }
  .detail-compact-settings {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
}

/* Phone: even tighter, action buttons full-width stacked */
@media (max-width: 480px) {
  .detail-compact {
    padding: 10px 10px !important;
  }
  .detail-compact .detail-compact__left {
    flex-direction: column !important;
  }
  .detail-compact .detail-thumb {
    width: 100% !important;
    min-height: 140px !important;
    max-height: 180px !important;
  }
  .detail-compact .detail-stufe-explain {
    text-align: center !important;
  }
  .detail-name {
    font-size: 1.35rem !important;
  }
  .detail-actions {
    flex-direction: column !important;
  }
  .detail-actions > button {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .detail-back-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

.detail-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-thumb .badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.detail-name {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.detail-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-4);
}

.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.detail-difficulty {
  margin-bottom: var(--space-6);
}

.detail-difficulty__label {
  display: block;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* ── Home Screen ── */

.screen-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.home-greeting {
  margin-bottom: var(--space-2);
}

.home-greeting__title {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.home-greeting__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Continue card */

.card--continue {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card--continue:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card__activity-name {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-inverse);
}

/* Recommended section */

.home-recommended .activity-grid--small {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .home-recommended .activity-grid--small {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Home progress section */

.home-progress .stats-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Progress Screen ── */

.screen-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (max-width: 600px) {
  .screen-progress {
    gap: var(--space-3);
    padding: 0 var(--space-2);
  }
}

.progress-stufen,
.progress-stats,
.progress-recent {
  margin-bottom: var(--space-2);
}

/* Stufe grid */

.stufe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .stufe-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .stufe-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stufe-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stufe-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stufe-card__number {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  color: var(--color-primary);
}

.stufe-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.stufe-card__pct {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: right;
}

/* Session list */

.session-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.session-row + .session-row {
  margin-top: calc(-1px); /* collapse borders */
}

.session-row:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.session-row:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.session-row:only-child {
  border-radius: var(--radius-md);
}

.session-row:hover {
  background: var(--color-surface-alt);
}

.session-row__name {
  font-weight: var(--font-medium);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-row__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.session-row__score {
  font-weight: var(--font-bold);
  color: var(--color-primary-dark);
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

/* ── Results Screen ── */

.screen-results {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-3);
}

@media (max-width: 600px) {
  .screen-results {
    padding: 0 var(--space-2);
  }
  .results-emoji {
    font-size: 2rem !important;
  }
  .results-celebration {
    padding: var(--space-3) 0 !important;
  }
}

.results-celebration {
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.results-emoji {
  font-size: 3rem;
  line-height: 1;
}

.results-stars {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.results-star {
  font-size: var(--text-3xl);
  color: var(--color-border);
  transition: color var(--transition-base), transform var(--transition-spring);
}

.results-star--filled {
  color: #f59e0b;
}

.results-feedback {
  font-size: 1.25rem;
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-top: var(--space-2);
  line-height: 1.6;
}

.results-heatmap {
  margin: var(--space-4) 0;
}

.results-heatmap__canvas {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  transition: box-shadow 0.2s, transform 0.2s;
}
.results-heatmap__canvas:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

/* ── Heatmap Zoom Overlay ── */
.heatmap-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Fully opaque so the page underneath (dark title text on light bg) never
     bleeds through unreadably behind the zoomed heatmap. */
  background: #0b1220;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.heatmap-zoom-title {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 5001;
  color: #fff;
  font-family: var(--font-headline, 'Merriweather', serif);
  font-size: 1.3rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.heatmap-zoom-canvas {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.heatmap-zoom-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5001;
  transition: background 0.15s;
}
.heatmap-zoom-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.results-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-bottom: var(--space-4);
}

/* ── Settings Screen ── */

.screen-settings {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (max-width: 600px) {
  .screen-settings {
    padding: 0 var(--space-2);
  }
  .settings-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-2) !important;
  }
}

.settings-section__body {
  display: flex;
  flex-direction: column;
}

.settings-row--column {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.settings-label {
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  color: var(--color-text);
}

.settings-value {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.settings-input {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  min-height: 48px;
  width: 200px;
  max-width: 100%;
  transition: border-color var(--transition-fast);
}

.settings-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(75, 105, 140, 0.1);
}

.settings-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.settings-slider {
  -webkit-appearance: none;
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.settings-slider__value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 60px;
  text-align: right;
  white-space: nowrap;
}

.settings-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  min-height: 48px;
  background: var(--color-surface);
  cursor: pointer;
}

.settings-select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(75, 105, 140, 0.1);
}

.settings-section__body > .btn {
  margin-top: var(--space-2);
  align-self: flex-start;
}

.settings-section__body > .btn + .btn {
  margin-top: var(--space-2);
}

/* ── Info Screen ── */

.screen-info {
  max-width: 640px;
}

.info-section {
  margin-bottom: var(--space-6);
}

.info-section__title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.info-section__subtitle {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.info-section__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-3);
}

.info-section--version {
  text-align: center;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

.info-version__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.info-version__number {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-bold);
}

/* FAQ */

.info-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.info-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.info-faq__item + .info-faq__item {
  margin-top: calc(-1px);
}

.info-faq__item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.info-faq__item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.info-faq__item:only-child {
  border-radius: var(--radius-md);
}

.info-faq__question {
  padding: var(--space-4);
  font-weight: var(--font-bold);
  cursor: pointer;
  background: var(--color-surface);
  transition: background var(--transition-fast);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-faq__question::-webkit-details-marker {
  display: none;
}

.info-faq__question::after {
  content: '+';
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-3);
  transition: transform var(--transition-fast);
}

.info-faq__item[open] .info-faq__question::after {
  content: '\2212'; /* minus sign */
}

.info-faq__question:hover {
  background: var(--color-surface-alt);
}

.info-faq__answer {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
}

/* ── Onboarding Screen (extended) ── */

.onboarding-illustration {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

.onboarding-illustration i,
.onboarding-illustration svg {
  width: 48px;
  height: 48px;
}

.onboarding-headline {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.onboarding-text {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 420px;
  margin-bottom: var(--space-6);
  line-height: var(--leading-loose);
}

/* ── Sanfter Screen-Fade des Aktivitaets-Runners (~250ms) ──
   activity-runner.js setzt runner-fade--hidden beim Start (Einblenden)
   und vor dem Wechsel zur Auswertung (Ausblenden). Nur visuell —
   Lebenszyklus/Metriken laufen unveraendert. */
.screen-activity-runner {
  opacity: 1;
  transition: opacity 250ms ease;
}
.screen-activity-runner.runner-fade--hidden { opacity: 0; }

/* ── Reduzierte Bewegung: Fades aus, Onboarding-Wechsel sofort, Shake aus ── */
body.reduced-motion .screen-activity-runner,
body.reduced-motion .screen-activity-runner.runner-fade--hidden {
  transition: none;
  opacity: 1;
}
body.reduced-motion .onboarding-step--active { animation: none; }
body.reduced-motion .onboarding-step--exit { animation: none; opacity: 0; }
body.reduced-motion .form-input--error { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .screen-activity-runner,
  .screen-activity-runner.runner-fade--hidden {
    transition: none;
    opacity: 1;
  }
  .onboarding-step--active { animation: none; }
  .onboarding-step--exit { animation: none; opacity: 0; }
  .form-input--error { animation: none; }
}

/* --- css/highcontrast.css --- */
/* ==========================================================================
   GazeTo — High Contrast Mode
   Activated via .high-contrast on <html> or prefers-contrast: more
   ========================================================================== */

/* Apply when .high-contrast is on <html> */
.high-contrast {
  --color-bg:             #000000;
  --color-surface:        #1a1a1a;
  --color-surface-alt:    #2a2a2a;
  --color-border:         #ffffff;
  --color-border-strong:  #ffffff;

  --color-text:           #ffffff;
  --color-text-secondary: #e0e0e0;
  --color-text-muted:     #b0b0b0;
  --color-text-inverse:   #000000;

  --color-primary:        #ffdd00;
  --color-primary-light:  #ffe44d;
  --color-primary-dark:   #ffdd00;
  --color-primary-bg:     #1a1700;

  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --shadow-xl:   none;
  --shadow-glow: 0 0 20px rgba(255, 221, 0, 0.5);

  background-color: #000000;
  color: #ffffff;
}

.high-contrast body {
  background-color: #000000;
  color: #ffffff;
}

/* Also respect OS-level high-contrast preference */
@media (prefers-contrast: more) {
  :root {
    --color-bg:             #000000;
    --color-surface:        #1a1a1a;
    --color-surface-alt:    #2a2a2a;
    --color-border:         #ffffff;
    --color-border-strong:  #ffffff;
    --color-text:           #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-muted:     #b0b0b0;
    --color-text-inverse:   #000000;
    --color-primary:        #ffdd00;
    --color-primary-light:  #ffe44d;
    --color-primary-dark:   #ffdd00;
    --color-primary-bg:     #1a1700;
    --shadow-sm:   none;
    --shadow-md:   none;
    --shadow-lg:   none;
    --shadow-xl:   none;
    --shadow-glow: 0 0 20px rgba(255, 221, 0, 0.5);
  }
}

.high-contrast .card,
.high-contrast .activity-card {
  border-width: 2px;
}

.high-contrast .bottom-nav {
  border-top-width: 2px;
}

.high-contrast img {
  filter: contrast(1.1);
}

.high-contrast .btn-primary {
  background: #ffdd00;
  color: #000000;
}

.high-contrast .btn-primary:hover {
  background: #ffe44d;
}

.high-contrast .btn-secondary {
  border-color: #ffdd00;
  color: #ffdd00;
}

.high-contrast .bottom-nav__item.active {
  color: #ffdd00;
}

.high-contrast .progress-bar__fill {
  background: #ffdd00;
}

.high-contrast :focus-visible {
  outline-color: #ffdd00;
  outline-width: 3px;
}

/* ==========================================================================
   WCAG-AAA fixes (audit tools/_hc-wcag.py): components with hardcoded brand
   colours that the token overrides above don't reach. Black-on-yellow ≈16:1,
   white-on-black =21:1.
   ========================================================================== */

/* Profile avatars (statusbar, settings, picker): arbitrary per-profile colours
   with white initials fail AAA. Force legible white-on-black + white ring. */
.high-contrast .statusbar__avatar,
.high-contrast .profile-avatar,
.high-contrast .profile-avatar--small,
.high-contrast .r-profile-avatar {
  background: #000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* Level-number circles in the home "Alle 7 Stufen" list (white-on-yellow). */
.high-contrast .stufen-row__num {
  background: #ffdd00 !important;
  color: #000000 !important;
}

/* Inline "Start" pill in the 3-day plan card (not a .btn-primary → missed the
   button rule above; was white-on-light-yellow). */
.high-contrast .plan-card__start {
  background: #ffdd00 !important;
  color: #000000 !important;
}
.high-contrast .plan-card__start i,
.high-contrast .plan-card__start svg {
  color: #000000 !important;
}

/* Progress-story hero: brand gradient + white text → solid black + white text
   (white stays AAA on black; the translucent eyebrow/sentence are ≥12:1). */
.high-contrast .progress-story {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
}
.high-contrast .progress-story__icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* Progress screen is an older inline-styled screen; these additive classes let
   the stylesheet win over inline brand colours in high-contrast. */
.high-contrast .pg-stufe-num,
.high-contrast .pg-rec-badge,
.high-contrast .pg-komp-pill,
.high-contrast .pg-diag-btn {
  background: #ffdd00 !important;
  color: #000000 !important;
  border-color: #ffdd00 !important;
}
.high-contrast .pg-diag-btn i,
.high-contrast .pg-diag-btn svg {
  color: #000000 !important;
}

/* Diagnostik result: big stufe number + active progression dots inherit the
   stufe colour (yellow in HC) with white text → black-on-yellow. */
.high-contrast .diag-result-hero__num,
.high-contrast .diag-stufe-dot.is-active {
  background: #ffdd00 !important;
  color: #000000 !important;
}

/* Diagnostik "focus" recommendation card: pale-green light element (green text
   on #f0fdf4) → dark card with white text + green accent, AAA + dark-consistent. */
.high-contrast .diag-focus-box {
  background: #06250f !important;
  border-color: #4ade80 !important;
  color: #ffffff !important;
}
.high-contrast .diag-focus-box i,
.high-contrast .diag-focus-box svg {
  color: #4ade80 !important;
}

/* --- css/dom-dwell.css --- */
/* ==========================================================================
   GazeTo — DOM Dwell Visualization
   Visual feedback for elements registered with GazeDOMDwell.
   --------------------------------------------------------------------------
   - .dom-dwelling: gaze is currently on the element (progress bar/ring fills)
   - .dom-dwelled: brief flash on activation
   ========================================================================== */

/* The progress ring is drawn with a CSS conic-gradient pseudo-element so
   it works on any DOM element (button, div) without extra markup. */

.dom-dwelling {
  position: relative;
}

.dom-dwelling::before {
  content: "";
  position: absolute;
  /* Fixed-size centred ring — never scales with the element, so it stays the
     same compact size on a small button or a large hub tile. */
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  background:
    conic-gradient(
      from -90deg,
      #4b698c calc(var(--dom-dwell-progress, 0) * 360deg),
      rgba(0, 0, 0, 0.4) 0
    );
  /* Subtract the inner disc to leave a clean ring */
  -webkit-mask:
    radial-gradient(circle, transparent 60%, #000 63%);
          mask:
    radial-gradient(circle, transparent 60%, #000 63%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: opacity 0.12s ease-out;
}

/* Simple fill flash on activation */
.dom-dwelled {
  animation: domDwellFlash 0.32s ease-out;
}

@keyframes domDwellFlash {
  0%   { box-shadow: 0 0 0 0 rgba(75, 105, 140, 0.7),
                     0 4px 12px rgba(0, 0, 0, 0.18); }
  60%  { box-shadow: 0 0 0 18px rgba(75, 105, 140, 0),
                     0 4px 12px rgba(0, 0, 0, 0.18); }
  100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .dom-dwelled { animation: none; }
}

/* Optional explicit "dwell-target" class — adds a subtle hint that the
   element is gaze-activatable (helps clients who use a mix of input methods). */
.dwell-target {
  cursor: pointer;
}

.dwell-target:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(75, 105, 140, 0.35);
  pointer-events: none;
}

/* --- css/ansteuerung-einstellungen.css --- */
/* ==========================================================================
   ansteuerung-einstellungen.css — Aussehen des gemeinsamen Bereichs „Ansteuerung“ (kanonisch in _shared_input/).
   Eigener Namensraum .anst-*; Farben über Variablen, damit jede App ihr Thema aufsetzt, ohne das Layout zu ändern:
     --anst-bg, --anst-fg, --anst-leise, --anst-rand, --anst-akzent, --anst-akzent-fg, --anst-feld, --anst-schrift
   Maße nach der Hausregel (Augensteuerung): Knöpfe ≥ 120 × 96 px, Wahl-/Stufenknöpfe ≥ 120 × 96 px,
   „Fertig“ ≈ 220 × 112 px; Fugen ≥ 10 px; nichts blinkt; prefers-reduced-motion beachtet.
   ========================================================================== */
.anst {
  --anst-bg: #141a22; --anst-fg: #f4f6f9; --anst-leise: #b9c2ce; --anst-rand: #ffffff2a;
  --anst-akzent: #ffd400; --anst-akzent-fg: #1d1d1f; --anst-feld: #1f2733; --anst-schrift: inherit;
  color: var(--anst-fg); font-family: var(--anst-schrift); font-size: clamp(18px, 2vw, 24px); line-height: 1.3;
  box-sizing: border-box;
}
.anst *, .anst *::before, .anst *::after { box-sizing: inherit; }
.anst-ueberlagerung {
  /* Nie scrollen (Augensteuerung, Scannen, Grid-Browser): feste Höhe, Inhalt wird geblättert */
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; height: 100vh; height: 100dvh;
  background: var(--anst-bg); padding: 16px 24px max(16px, env(safe-area-inset-bottom)) 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.anst-flaeche { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 12px; max-width: 1600px; width: 100%; margin: 0 auto; }
/* Breite Bildschirme: Einstellzeilen zweispaltig, damit weniger geblättert werden muss; Frage, Erklärung, Probe, Aktionen über die volle Breite */
@media (min-width: 1240px) { .anst-flaeche { grid-template-columns: repeat(2, minmax(0, 1fr)); } .anst-flaeche > :not(.anst-zeile) { grid-column: 1 / -1; } }
/* volle Breite: „Zurück“ immer ganz unten links */
.anst-leiste { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.anst-blaettern { display: flex; align-items: center; gap: 14px; }
/* spezifischer als .anst-knopf (steht weiter unten und würde sonst min-width/-height überschreiben) */
.anst-knopf.anst-zurueck, .anst-knopf.anst-blatt { flex-direction: row; gap: 10px; min-width: 220px; min-height: 112px; font-size: 1.15em; }
.anst-knopf.anst-zurueck svg, .anst-knopf.anst-blatt svg { width: 40px; height: 40px; }
/* Symbol und Text nebeneinander (der Knopf-Inhalt steckt in einem inneren span) */
.anst-knopf.anst-zurueck > span:first-child, .anst-knopf.anst-blatt > span:first-child { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; white-space: nowrap; }
.anst-blatt-platz { display: inline-block; min-width: 220px; }
.anst-blatt-zahl { min-width: 9em; text-align: center; color: var(--anst-leise); font-variant-numeric: tabular-nums; }
.anst-aktionen { display: flex; flex-wrap: wrap; gap: 14px; }
.anst-kopf { flex: none; display: flex; align-items: center; justify-content: center; }
.anst-titel { margin: 0; font-size: clamp(26px, 3vw, 38px); }
.anst-frage h3, .anst-zeile h3 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }
.anst-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.anst-knopf {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 120px; min-height: 96px; padding: 10px 16px; border-radius: 18px;
  border: 3px solid var(--anst-rand); background: var(--anst-feld); color: var(--anst-fg);
  font: inherit; font-weight: 600; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
  transition: border-color .12s ease-out, background .12s ease-out;
}
.anst-knopf:hover, .anst-knopf:focus-visible { border-color: var(--anst-akzent); outline: none; }
.anst-knopf.gewaehlt { border-color: var(--anst-akzent); background: color-mix(in srgb, var(--anst-akzent) 22%, var(--anst-feld)); }
.anst-knopf small { font-size: 0.68em; font-weight: 400; color: var(--anst-leise); }
.anst-knopf svg { width: 44px; height: 44px; flex: none; }
.anst-karte { min-height: 150px; }
.anst-karte .anst-knopf-haupt { display: inline-flex; align-items: center; gap: 8px; }
.anst-liste { display: grid; gap: 12px; max-width: 1200px; width: 100%; margin: 0 auto; }
.anst-erklaer { margin: 0; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--anst-rand); background: color-mix(in srgb, var(--anst-akzent) 10%, transparent); color: var(--anst-fg); font-size: 0.9em; }
.anst-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 10px 16px; border-radius: 16px; background: color-mix(in srgb, var(--anst-feld) 70%, transparent); border: 2px solid var(--anst-rand); }
.anst-zeile h3 { margin: 0; min-width: 240px; flex: 1 1 240px; }
.anst-hinweis { margin: 0; flex: 1 1 100%; color: var(--anst-leise); font-size: 0.8em; }
.anst-werte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.anst-werte .anst-knopf { min-height: 96px; }   /* Hausregel: ≥ 120 × 96 auch für Stufen- und An/Aus-Knöpfe (Befund Studio-Sitzung 24.10.) */
.anst-stufe { min-width: 120px; font-size: 1.6em; line-height: 1; }
.anst-wert { display: inline-block; min-width: 150px; text-align: center; font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; }
.anst-probe { max-width: 1200px; width: 100%; margin: 0 auto; padding: 14px 16px; border-radius: 16px; border: 2px dashed var(--anst-rand); }
.anst-probe-text { margin: 0 0 10px; color: var(--anst-leise); }
.anst-probe-felder { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 14px; }
.anst-probe-feld { min-height: 120px; font-size: 1.1em; }
.anst-probe-feld.getroffen { border-color: var(--anst-akzent); background: var(--anst-akzent); color: var(--anst-akzent-fg); }
.anst-fuss { display: flex; justify-content: space-between; align-items: center; gap: 14px; max-width: 1200px; width: 100%; margin: 0 auto; flex-wrap: wrap; }
.anst-reset { min-width: 220px; min-height: 112px; }
.anst-fertig { min-width: 220px; min-height: 112px; background: var(--anst-akzent); color: var(--anst-akzent-fg); border-color: var(--anst-akzent); font-size: 1.15em; }
.anst-fertig:hover, .anst-fertig:focus-visible { border-color: var(--anst-fg); }
.anst-oeffnen { flex-direction: row; min-width: 220px; min-height: 96px; }
/* Verweil-Anzeige (dwell-dom .dwell-dot) sitzt zentriert über dem Knopf, der Text bleibt frei: Knopftext oben lassen */
.anst-knopf .dwell-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
@media (max-width: 760px) {
  /* schmal: Blättern nur mit Symbol (Text bleibt für Vorlesen im aria-label der Spans), Zahl kompakt */
  .anst-knopf.anst-zurueck { min-width: 150px; }
  .anst-knopf.anst-blatt, .anst-blatt-platz { min-width: 120px; }
  /* Nur das WORT ausblenden (bleibt für Vorlesen und Screenreader da) — nicht den Pfeil und nicht den Verweil-Punkt.
     Vorher traf die Regel jedes span im Knopf, auch die äußere Hülle: der Knopf war leer (Befund 25.10.2026, 375 px). */
  .anst-knopf.anst-blatt > span:first-child > span,
  .zug .anst-knopf.anst-blatt > span:not(.dwell-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .anst-blatt-zahl { min-width: 4.5em; font-size: 0.85em; }
  .anst-leiste, .anst-blaettern { gap: 10px; }
}
/* Telefon (25.10.2026): Zurück, Vorige, Seitenzahl und Nächste passen nicht in eine Zeile (3 × 120 px > 343 px).
   Das Blättern bekommt eine eigene Zeile über „Zurück“; „Zurück“ bleibt unten links. Der Baustein misst danach neu. */
@media (max-width: 520px) {
  .anst-leiste { flex-wrap: wrap-reverse; justify-content: flex-start; row-gap: 10px; }
  .anst-blaettern { flex: 1 1 100%; justify-content: space-between; }
  .anst-blaettern:empty { display: none; }
  /* Die zweite Zeile kostet Höhe: Blättern auf das Hausminimum 96 px („Zurück“ bleibt 112 px), Wege-Karten 130 px —
     sonst passen die Wege-Karten und die Zeile „Form“ nicht mehr auf eine Seite (gemessen 375 × 812). */
  .anst-knopf.anst-blatt { min-height: 96px; }
  .anst-karte { min-height: 130px; }
  /* Die Zeile „Form“ (vier Bildknöpfe in zwei Reihen) war 524 px hoch bei 510 px Fläche */
  .anst-knopf svg.anst-vorschau { width: 34px; height: 34px; }
  .anst-zeile { gap: 8px 12px; padding: 8px 12px; }
}
@media (max-height: 640px) {
  .anst-titel { font-size: 24px; }
  .anst-karte { min-height: 120px; }
}
@media (max-width: 700px) {
  .anst-ueberlagerung { padding: 14px 16px; }
  .anst-zeile h3 { min-width: 0; flex-basis: 100%; }
  .anst-probe-felder { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .anst-knopf { transition: none; } }
.anst-ausfrage { max-width: 1200px; width: 100%; margin: 0 auto; padding: 14px 16px; border-radius: 16px; border: 3px solid var(--anst-akzent); background: color-mix(in srgb, var(--anst-akzent) 14%, var(--anst-feld)); }
.anst-ausfrage p { margin: 0 0 10px; font-weight: 600; }
.anst-aus-ja { min-width: 220px; min-height: 112px; }
.anst-aus-nein { min-width: 220px; min-height: 112px; border-color: var(--anst-akzent); }
.anst-zusatz { min-height: 96px; }

/* Behalten-Abfrage nach einem Wechsel der Ansteuerung (Schutz vor dem Aussperren, 25.10.2026) */
.anst-pruefung { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--anst-bg) 82%, transparent); }
.anst-pruef-box { width: 100%; max-width: 900px; padding: 24px 28px; border-radius: 20px; border: 3px solid var(--anst-akzent); background: var(--anst-feld); text-align: center; }
.anst-pruef-text { margin: 10px 0; font-size: 1.05em; }
.anst-pruef-zahl { margin: 0 0 16px; color: var(--anst-leise); font-variant-numeric: tabular-nums; }
.anst-pruef-knoepfe { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.anst-knopf.anst-pruef-ja, .anst-knopf.anst-pruef-alt { min-width: 220px; min-height: 112px; font-size: 1.15em; }
.anst-knopf.anst-pruef-ja { background: var(--anst-akzent); color: var(--anst-akzent-fg); border-color: var(--anst-akzent); }
.anst-zurueckgesprungen { border-color: var(--anst-akzent); }

/* Bild-Vorschau in Wahlknöpfen (Form, Farbe, Größe): Bild über dem Wort */
.anst-knopf > span:first-child:has(.anst-vorschau) { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.anst-knopf svg.anst-vorschau { width: 44px; height: 44px; display: block; }
.anst-vorschau-text { font-size: 0.9em; }

/* Zusammenfassung „Deine Ansteuerung“ auf der Einstellungsseite der App: Farben der Seite, reiner Text (keine Ziele) */
.anst.anst-zusammenfassung { color: inherit; font-size: inherit; margin: 0 0 16px; }
.anst-zf-weg { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 1.2em; }
.anst-zf-weg svg { width: 44px; height: 44px; flex: none; }
.anst-zf-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; }
.anst-zf-zeile { margin: 0; padding: 10px 14px; border-radius: 14px; border: 2px solid color-mix(in srgb, currentColor 18%, transparent); }
.anst-zf-zeile dt { font-size: 0.85em; opacity: 0.75; }
.anst-zf-zeile dd { margin: 2px 0 0; font-weight: 700; font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.anst-zf-farbe { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); }

/* Taste anlernen: wie die Behalten-Abfrage, ein Knopf „Abbrechen“ in der Mitte */
.anst-lernen .anst-pruef-knoepfe { justify-content: center; }

/* --- css/redesign.css --- */
/* ==========================================================================
   GazeTo — AssistUK Redesign Layer
   Loaded LAST. Bridges the original design tokens to the AssistUK foundation
   (blue accent, Oswald headings, glass shell) and adds the new shared
   components used by the redesigned screens. Existing screens automatically
   pick up the new palette and fonts via the remapped color and font tokens.
   ========================================================================== */

/* ── Token bridge: remap original tokens + add AssistUK design vars ── */
:root {
  /* AssistUK foundation palette */
  --c-bg:           #f5f5f7;
  --c-bg-primary:   #ffffff;
  --c-bg-secondary: #f0f1f4;
  --c-bg-tertiary:  #e3e6ec;
  --c-bg-glass:        rgba(255,255,255,0.72);
  --c-bg-glass-heavy:  rgba(255,255,255,0.92);
  --c-fg1: #1d1d1f;
  --c-fg2: #555e6e;
  --c-fg3: #818a99;
  --c-fg-on-dark:      #f5f5f7;

  --c-accent:        #4b698c;
  --c-accent-2:      #3a5a7c;
  --c-brand-blue:    #1a3a6a;
  --c-orange:        #f97316;

  --c-success: #1f8a5b;
  --c-warning: #f59e0b;
  --c-info:    #5ac8fa;
  --c-danger:  #d32f2f;
  --c-focus:   #4b698c;

  --c-border:        rgba(0,0,0,0.08);
  --c-border-strong: rgba(0,0,0,0.14);
  --c-shadow:        rgba(0,0,0,0.05);
  --c-shadow-md:     rgba(0,0,0,0.09);
  --c-shadow-lg:     rgba(0,0,0,0.16);

  --gradient-hero:   linear-gradient(135deg,#1a3a6a 0%,#3a5a7c 50%,#4b698c 100%);
  --gradient-brand:  linear-gradient(135deg,#1a3a6a 0%,#4b698c 100%);
  --gradient-accent: linear-gradient(135deg,#4b698c,#5ac8fa);

  /* Stufen — Regenbogen */
  --stufe-1: #ec4899; --stufe-2: #f97316; --stufe-3: #eab308;
  --stufe-4: #22c55e; --stufe-5: #06b6d4; --stufe-6: #6366f1;
  --stufe-7: #a855f7; --stufe-vsd: #4b698c;

  --f-display: 'Merriweather', Georgia, serif;
  --f-heading: 'Oswald', 'DM Sans', Helvetica, sans-serif;
  --f-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --blur: 20px;

  /* ── Remap ORIGINAL tokens so every existing screen reskins instantly ── */
  --color-primary:        #4b698c;
  --color-primary-light:  #6388ad;
  --color-primary-dark:   #3a5a7c;
  --color-primary-bg:     #eef2f7;

  --color-secondary:       #f97316;
  --color-secondary-light: #fb923c;
  --color-secondary-dark:  #ea580c;

  --color-bg:             #f5f5f7;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f0f1f4;
  --color-border:         #e4e7ee;
  --color-border-strong:  #c7ccd6;

  --color-text:           #1d1d1f;
  --color-text-secondary: #555e6e;
  --color-text-muted:     #5b6573;
  --color-text-inverse:   #ffffff;

  --color-stufe-1: #ec4899; --color-stufe-2: #f97316; --color-stufe-3: #eab308;
  --color-stufe-4: #22c55e; --color-stufe-5: #06b6d4; --color-stufe-6: #6366f1;
  --color-stufe-7: #a855f7;

  --color-success: #1f8a5b;
  --color-warning: #d97706;
  --color-error:   #d32f2f;
  --color-info:    #2563eb;

  /* Oswald available for condensed labels/eyebrows */
  --font-heading-condensed: 'Oswald', 'DM Sans', sans-serif;
  /* h1-h4 stay Merriweather serif → matches mockup's big serif titles */
  --font-headline: 'Merriweather', Georgia, 'Times New Roman', serif;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 18px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 20px rgba(75,105,140,0.3);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --c-bg: #0f1116; --c-bg-primary: #1a1d24; --c-bg-secondary: #14171d; --c-bg-tertiary: #232831;
  --c-bg-glass: rgba(20,23,29,0.72); --c-bg-glass-heavy: rgba(20,23,29,0.92);
  --c-fg1: #f5f5f7; --c-fg2: #c5cad4; --c-fg3: #8a909c;
  --c-accent: #7ea7d4; --c-accent-2: #a3c0e0;
  --c-border: rgba(255,255,255,0.08); --c-border-strong: rgba(255,255,255,0.18);
  --c-shadow: rgba(0,0,0,0.5); --c-shadow-md: rgba(0,0,0,0.6); --c-shadow-lg: rgba(0,0,0,0.8);

  --color-bg: #0f1116; --color-surface: #1a1d24; --color-surface-alt: #14171d;
  --color-border: #2a2f3a; --color-border-strong: #3a414d;
  --color-text: #f5f5f7; --color-text-secondary: #c5cad4; --color-text-muted: #9aa1ad;
  --color-primary: #7ea7d4; --color-primary-dark: #6391c4; --color-primary-light: #a3c0e0;
  --color-primary-bg: #1c2530;
  --shadow-md: 0 4px 18px rgba(0,0,0,0.5); --shadow-lg: 0 12px 36px rgba(0,0,0,0.7);
}

/* ── High-contrast theme (WCAG AAA) — also honours legacy .high-contrast ── */
[data-theme="contrast"], .high-contrast {
  --c-bg: #000; --c-bg-primary: #000; --c-bg-secondary: #0a0a0a; --c-bg-tertiary: #1a1a1a;
  --c-bg-glass: rgba(0,0,0,0.92); --c-bg-glass-heavy: rgba(0,0,0,0.96);
  --c-fg1: #fff; --c-fg2: #fff; --c-fg3: #ffd60a;
  --c-accent: #ffd60a; --c-accent-2: #ffe566; --c-focus: #ffd60a;
  --c-border: #fff; --c-border-strong: #ffd60a;

  --color-bg: #000; --color-surface: #000; --color-surface-alt: #0a0a0a;
  --color-border: #ffffff; --color-border-strong: #ffd60a;
  --color-text: #fff; --color-text-secondary: #fff; --color-text-muted: #e8e8e8;
  --color-primary: #ffd60a; --color-primary-dark: #ffd60a; --color-primary-light: #ffe566;
  --color-primary-bg: #1a1a1a; --color-text-inverse: #000;
  --gradient-brand: #ffd60a; --gradient-hero: #000;
}
[data-theme="contrast"] .btn--primary,
.high-contrast .btn--primary { background: #ffd60a !important; color: #000 !important; }

/* ── High-contrast: force ALL stufe/accent colors to the single AAA yellow ── */
[data-theme="contrast"], .high-contrast {
  --stufe-1:#ffd60a; --stufe-2:#ffd60a; --stufe-3:#ffd60a; --stufe-4:#ffd60a;
  --stufe-5:#ffd60a; --stufe-6:#ffd60a; --stufe-7:#ffd60a; --stufe-vsd:#ffd60a;
  --color-stufe-1:#ffd60a; --color-stufe-2:#ffd60a; --color-stufe-3:#ffd60a; --color-stufe-4:#ffd60a;
  --color-stufe-5:#ffd60a; --color-stufe-6:#ffd60a; --color-stufe-7:#ffd60a;
  --c-orange:#ffd60a; --color-secondary:#ffd60a; --color-secondary-dark:#ffd60a; --color-secondary-light:#ffe566;
  --c-success:#ffd60a; --c-warning:#ffd60a; --c-info:#ffd60a;
}
/* High-contrast: filled chips/badges/numbers → black text on yellow */
[data-theme="contrast"] .stufe-chip, .high-contrast .stufe-chip,
[data-theme="contrast"] .act-tile__chip, .high-contrast .act-tile__chip,
[data-theme="contrast"] .plan-card__badge, .high-contrast .plan-card__badge,
[data-theme="contrast"] .cycle-step__num, .high-contrast .cycle-step__num,
[data-theme="contrast"] .stufe-tab.is-active, .high-contrast .stufe-tab.is-active {
  background:#ffd60a !important; color:#000 !important; border-color:#ffd60a !important;
}
[data-theme="contrast"] .stufe-tab.is-active .stufe-tab__count,
.high-contrast .stufe-tab.is-active .stufe-tab__count { color:#000 !important; }
/* High-contrast: cards on solid black with a visible white border */
[data-theme="contrast"] .hero-card, .high-contrast .hero-card,
[data-theme="contrast"] .plan-card, .high-contrast .plan-card,
[data-theme="contrast"] .stat-card, .high-contrast .stat-card,
[data-theme="contrast"] .cycle-step, .high-contrast .cycle-step,
[data-theme="contrast"] .stufe-tab, .high-contrast .stufe-tab {
  background:#000 !important; border:2px solid #fff !important; box-shadow:none !important;
}
/* High-contrast: buttons */
[data-theme="contrast"] .btn-primary-blue, .high-contrast .btn-primary-blue {
  background:#ffd60a !important; color:#000 !important; box-shadow:none !important;
}
[data-theme="contrast"] .btn-ghost-pill, .high-contrast .btn-ghost-pill {
  background:#000 !important; color:#fff !important; border:2px solid #fff !important;
}
/* High-contrast: yellow text accents stay yellow on black */
[data-theme="contrast"] .plan-card__day, .high-contrast .plan-card__day,
[data-theme="contrast"] .stat-card__value, .high-contrast .stat-card__value,
[data-theme="contrast"] .accent-text, .high-contrast .accent-text,
[data-theme="contrast"] .orange-text, .high-contrast .orange-text { color:#ffd60a !important; }
/* High-contrast: statusbar active + bottom-nav active */
[data-theme="contrast"] .statusbar__btn--active, .high-contrast .statusbar__btn--active {
  background:#ffd60a !important; color:#000 !important;
}
[data-theme="contrast"] .bottom-nav__item.active, .high-contrast .bottom-nav__item.active { color:#ffd60a !important; }
[data-theme="contrast"] .bottom-nav__item.active::before, .high-contrast .bottom-nav__item.active::before { background:#ffd60a !important; }
[data-theme="contrast"] .statusbar__pill, .high-contrast .statusbar__pill { color:#ffd60a !important; border-color:#ffd60a !important; }

/* ==========================================================================
   APPEARANCE AXIS B — Stufen-Stil (rainbow default / mono / muted)
   Sets BOTH --stufe-* (redesign components) AND --color-stufe-* (the app's
   original stufe tokens, used widely across screens). Rainbow = no attr.
   High-contrast still overrides these (its rules appear later in source via
   !important + later definition order is preserved by the contrast block).
   ========================================================================== */
[data-stufe-style="mono"] {
  --stufe-1: #1a3a6a; --stufe-2: #2c4d80; --stufe-3: #3e6196;
  --stufe-4: #4b698c; --stufe-5: #6388ad; --stufe-6: #7ea0c0;
  --stufe-7: #9bb7d1; --stufe-vsd: #4b698c;
  --color-stufe-1: #1a3a6a; --color-stufe-2: #2c4d80; --color-stufe-3: #3e6196;
  --color-stufe-4: #4b698c; --color-stufe-5: #6388ad; --color-stufe-6: #7ea0c0;
  --color-stufe-7: #9bb7d1;
}
[data-stufe-style="muted"] {
  --stufe-1: #c47291; --stufe-2: #c98561; --stufe-3: #b59854;
  --stufe-4: #6da57e; --stufe-5: #5c95a8; --stufe-6: #6e7bc4;
  --stufe-7: #9b7eb5; --stufe-vsd: #4b698c;
  --color-stufe-1: #c47291; --color-stufe-2: #c98561; --color-stufe-3: #b59854;
  --color-stufe-4: #6da57e; --color-stufe-5: #5c95a8; --color-stufe-6: #6e7bc4;
  --color-stufe-7: #9b7eb5;
}

/* ==========================================================================
   APPEARANCE AXIS C — Karten-Stil (shadow default / glass / outline)
   Ported from the design template and EXTENDED to the redesign card classes
   so the choice actually affects the new surfaces. High-contrast card rules
   (above) use !important and win, so contrast mode stays AAA regardless.
   ========================================================================== */
[data-card-style="shadow"] .card,
[data-card-style="shadow"] .plan-card,
[data-card-style="shadow"] .hero-card,
[data-card-style="shadow"] .stat-card,
[data-card-style="shadow"] .cycle-step,
[data-card-style="shadow"] .act-tile {
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow);
}
[data-card-style="shadow"] .card:hover,
[data-card-style="shadow"] .plan-card:hover,
[data-card-style="shadow"] .hero-card:hover,
[data-card-style="shadow"] .stat-card:hover,
[data-card-style="shadow"] .cycle-step:hover,
[data-card-style="shadow"] .act-tile:hover {
  box-shadow: 0 12px 36px var(--c-shadow-lg);
  transform: translateY(-4px);
}

[data-card-style="glass"] .card,
[data-card-style="glass"] .plan-card,
[data-card-style="glass"] .hero-card,
[data-card-style="glass"] .stat-card,
[data-card-style="glass"] .cycle-step,
[data-card-style="glass"] .act-tile {
  background: var(--c-bg-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 1px 4px var(--c-shadow);
}

[data-card-style="outline"] .card,
[data-card-style="outline"] .plan-card,
[data-card-style="outline"] .hero-card,
[data-card-style="outline"] .stat-card,
[data-card-style="outline"] .cycle-step,
[data-card-style="outline"] .act-tile {
  background: transparent;
  border: 2px solid var(--c-border-strong);
  box-shadow: none;
}
[data-card-style="outline"] .card:hover,
[data-card-style="outline"] .plan-card:hover,
[data-card-style="outline"] .hero-card:hover,
[data-card-style="outline"] .stat-card:hover,
[data-card-style="outline"] .cycle-step:hover,
[data-card-style="outline"] .act-tile:hover {
  border-color: var(--c-accent);
  transform: none;
}

[data-card-style="flat"] .card,
[data-card-style="flat"] .plan-card,
[data-card-style="flat"] .hero-card,
[data-card-style="flat"] .stat-card,
[data-card-style="flat"] .cycle-step,
[data-card-style="flat"] .act-tile {
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border-strong);
  box-shadow: none;
}
[data-card-style="flat"] .card:hover,
[data-card-style="flat"] .plan-card:hover,
[data-card-style="flat"] .hero-card:hover,
[data-card-style="flat"] .stat-card:hover,
[data-card-style="flat"] .cycle-step:hover,
[data-card-style="flat"] .act-tile:hover {
  border-color: var(--c-accent);
  transform: none;
}

/* ── Font scaling (statusbar A- / A+) ── */
html[data-font-scale="s"]  { font-size: 15px; }
html[data-font-scale="m"]  { font-size: 16px; }
html[data-font-scale="l"]  { font-size: 17.5px; }
html[data-font-scale="xl"] { font-size: 19px; }

/* ── Base typography refinements ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: var(--font-heading-condensed);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg3);
  display: block;
  margin: 0 0 8px;
}
.display-serif { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; }
.accent-text { color: var(--c-accent); }
.orange-text { color: var(--c-orange); }

/* =========================================================================
   SHELL — Top statusbar
   ========================================================================= */
.statusbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--c-bg-glass-heavy);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 2px 14px rgba(26,58,106,0.07);
  font-size: 14px;
  color: var(--c-fg2);
  flex-shrink: 0;
}
.statusbar__brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--f-heading);
  font-weight: 600; font-size: 19px; letter-spacing: 0.06em;
  color: var(--c-fg1);
  text-transform: uppercase;
  background: none; border: 0; cursor: pointer;
  min-height: 48px;
}
.statusbar__brand-logo {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--gradient-brand);
  display: grid; place-items: center;
  color: #fff; font-family: var(--f-heading); font-weight: 700; font-size: 18px;
  overflow: hidden;
}
.statusbar__brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.statusbar__spacer { flex: 1; }
/* Knoepfe nicht stauchen: sonst schrumpfen sie auf 48 px, ihre Beschriftung
   laeuft ueber den Nachbarn („Vorlesen" ueber „Entwickelt von"), und der
   „Mehr"-Baustein misst keinen Ueberlauf. Was nicht passt, wandert in „Mehr". */
.statusbar > :not(.statusbar__spacer) { flex-shrink: 0; }
.statusbar__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 980px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  color: var(--c-fg2); background: transparent; border: 1px solid transparent;
  transition: background var(--transition-base), color var(--transition-base);
  min-height: 48px; min-width: 48px; justify-content: center;
}
.statusbar__btn:hover { background: var(--c-bg-tertiary); color: var(--c-fg1); }
.statusbar__btn--active { background: var(--c-accent); color: #fff; }
.statusbar__btn--active:hover { background: var(--c-accent-2); color: #fff; }
.statusbar__btn svg, .statusbar__btn i { width: 20px; height: 20px; }

/* ── Sponsor / "Powered by" slot (managed via js/sponsor.js) ── */
.statusbar__sponsor { display: inline-flex; align-items: center; }
.gz-sponsor {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; border-radius: 980px;
  padding: 5px 12px; min-height: 40px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  color: var(--c-fg3); transition: background var(--transition-base), border-color var(--transition-base);
}
.gz-sponsor:hover { background: var(--c-bg-tertiary); border-color: var(--c-border-strong); }
.gz-sponsor__label {
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
}
.gz-sponsor__logo { height: 20px; width: auto; display: block; }
.gz-sponsor__name { font-weight: 700; color: var(--c-accent); font-size: 13px; }
.gz-sponsor--footer { background: none; border: 0; padding: 0; min-height: 0; color: var(--c-fg2); }
.gz-sponsor--footer .gz-sponsor__logo { height: 18px; }
/* Logo-PNGs sind weiß auf transparent → auf hellen Flächen (bar, footer) schwarz einfarben */
.gz-sponsor--bar .gz-sponsor__logo,
.gz-sponsor--footer .gz-sponsor__logo { filter: brightness(0); opacity: 0.65; }
/* Im Hochkontrast-Mode (dunkler Hintergrund): weißes Logo direkt sichtbar, kein Filter */
.high-contrast .gz-sponsor--bar .gz-sponsor__logo,
.high-contrast .gz-sponsor--footer .gz-sponsor__logo { filter: none; opacity: 1; }
.gz-sponsor--splash .gz-sponsor__label { color: rgba(255,255,255,0.85); }
/* Splash sits on a DARK gradient. The base .gz-sponsor is a WHITE pill, but the
   splash label + logo are white → an empty white pill (the "blank button" at the
   bottom of the splash). Make the splash variant transparent like the footer so
   the white AssistUK logo + "Entwickelt von" label show. */
.gz-sponsor--splash { background: none; border: 0; padding: 0; min-height: 0; }
.gz-sponsor--splash:hover { background: none; border-color: transparent; }
.gz-sponsor--splash .gz-sponsor__name { color: #fff; }

/* Brand row = AssistUK (maker, always) + optional sponsors */
.gz-brandrow { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gz-brandrow__sep { width: 1px; height: 18px; background: var(--c-border); display: inline-block; }
.gz-brandrow__sponsorlabel { font-size: 12px; font-weight: 600; color: var(--c-fg3); white-space: nowrap; }
.gz-brandrow--footer { gap: 8px; }
.gz-brandrow--splash { flex-direction: column; gap: 7px; }
.gz-brandrow--splash .gz-brandrow__sep { width: 40px; height: 1px; }
.statusbar__btn--font { font-family: var(--f-display); font-weight: 700; }
/* Münzen des Profils (02.10.2026): gezeichnete Goldmünze + Zahl, kein Emoji, kein Blinken. */
.statusbar__muenzen {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 980px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  font-size: 15px; font-weight: 700; color: var(--c-text-primary, #1f2937);
}
.statusbar__muenzen[hidden] { display: none; }
.statusbar__muenze {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #f5c542 55%, #c8901a 100%);
  box-shadow: inset 0 0 0 2px rgba(168,116,15,0.55), inset 0 0 0 5px rgba(255,236,160,0.35);
}
.progress-coins { margin-bottom: 28px; }
.progress-coins__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.progress-coins__row .statusbar__muenze { width: 32px; height: 32px; }
.progress-coins__text { margin: 0; font-size: 18px; font-weight: 700; flex: 1 1 auto; }
.progress-coins__reset { min-height: 48px; }
[data-theme="contrast"] .statusbar__muenzen, .high-contrast .statusbar__muenzen { color:#ffd60a !important; border-color:#ffd60a !important; }
.statusbar__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 980px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  font-size: 12px; font-weight: 600; color: var(--c-success);
}
.statusbar__pill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 0 currentColor;
  animation: sb-pulse 2s ease-out infinite;
}
.statusbar__pill--off { color: var(--c-fg3); }
.statusbar__pill--off::before { animation: none; }
@keyframes sb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,138,91,0.4); }
  100% { box-shadow: 0 0 0 9px rgba(31,138,91,0); }
}

@media (prefers-reduced-motion: reduce) {
  .statusbar__pill::before { animation: none; }
}
.statusbar__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--f-heading); font-weight: 700; font-size: 18px;
  border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  background: var(--c-accent); background-size: cover; background-position: center;
  cursor: pointer; flex-shrink: 0;
}
@media (max-width: 700px) {
  .statusbar { gap: 8px; padding: 10px 12px; }
  .statusbar__btn-label, .statusbar__pill, .gz-sponsor__label { display: none; }
  .statusbar__sponsor { display: none; }
}

/* Telefonbreite: Die Leiste traegt mehr Werkzeuge, als in eine Zeile passen.
   Gemessen bei 390 px: Sie braucht 525 px und schnitt Hilfe, Sprache und
   Profil rechts ab — die Sprachwahl war auf dem Telefon also gar nicht mehr
   erreichbar. Mit dem Umschalter „Einfache Sprache" kam ein vierter Knopf
   dazu, der Bestand war damit nicht mehr zu halten.

   Umbrechen statt abschneiden: Seitliches Scrollen waere hier keine Loesung,
   weil diese Apps mit Verweilen und Tastern bedient werden — ein Ziel, das
   erst herangescrollt werden muss, ist fuer Blicksteuerung praktisch nicht
   erreichbar. Die Leiste wird auf schmalen Geraeten also zwei Zeilen hoch. */
@media (max-width: 700px) {
  .statusbar { flex-wrap: nowrap; }
  .statusbar__brand { margin-right: auto; }
}


/* =========================================================================
   SHELL — Bottom nav (overrides existing .bottom-nav markup)
   ========================================================================= */
.bottom-nav {
  background: var(--c-bg-glass-heavy);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border-top: 1px solid var(--c-border);
  box-shadow: none;
}
.bottom-nav__item {
  border-radius: 18px;
  color: var(--c-fg2);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  transition: all var(--transition-base);
  position: relative;
}
.bottom-nav__item:hover { color: var(--c-fg1); background: var(--c-bg-tertiary); }
.bottom-nav__item.active { color: var(--c-accent); background: transparent; }
.bottom-nav__item.active::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 3px; background: var(--c-accent); border-radius: 2px;
}
.bottom-nav__item i, .bottom-nav__item svg { width: 24px; height: 24px; }

/* =========================================================================
   COMPONENTS
   ========================================================================= */

/* Eyebrow + big serif page title pattern */
.page-head { margin-bottom: 28px; }
.page-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--c-fg1);
  margin: 0 0 12px;
  text-wrap: balance;
}
.page-lead {
  font-size: 1.05rem; line-height: 1.5; color: var(--c-fg2);
  max-width: 64ch; margin: 0;
}

/* Buttons (augment existing .btn) */
.btn--pill { border-radius: 980px; }
.btn-primary-blue {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px; border-radius: 980px;
  background: var(--c-accent-2); color: #fff;
  font-family: var(--f-body); font-weight: 700; font-size: 17px;
  border: 0; cursor: pointer; min-height: 56px;
  transition: all var(--transition-base);
  box-shadow: 0 8px 24px rgba(26,58,106,0.28);
}
.btn-primary-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,58,106,0.4); }
.btn-ghost-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 980px;
  background: var(--c-bg-primary); color: var(--c-fg1);
  font-family: var(--f-body); font-weight: 600; font-size: 17px;
  border: 1.5px solid var(--c-border-strong); cursor: pointer; min-height: 56px;
  transition: all var(--transition-base);
}
.btn-ghost-pill:hover { background: var(--c-bg-tertiary); border-color: var(--c-fg2); }
.btn-primary-blue svg, .btn-primary-blue i, .btn-ghost-pill svg, .btn-ghost-pill i { width: 22px; height: 22px; }

/* Stufe chip */
.stufe-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 980px;
  font-family: var(--f-heading); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.stufe-chip--dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Stat cards (progress) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.stat-card {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 22px; padding: 22px 24px; box-shadow: var(--shadow-md);
}
.stat-card__label {
  font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-fg3); margin: 0 0 8px;
}
.stat-card__value {
  font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 1;
  color: var(--c-orange); margin: 0;
}
.stat-card__value--blue { color: var(--c-accent-2); }
.stat-card__value--amber { color: var(--c-warning); }
.stat-card__sub { font-size: 13px; color: var(--c-fg2); margin: 6px 0 0; }

/* Plan cards (home 3-day plan) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.plan-card {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 22px; padding: 20px; box-shadow: var(--shadow-md);
  transition: all var(--transition-base); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card__head { display: flex; align-items: center; justify-content: space-between; }
.plan-card__day { font-family: var(--f-display); font-weight: 900; font-size: 1.3rem; color: var(--stufe-2); }
.plan-card__badge {
  font-family: var(--font-heading-condensed); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: var(--c-accent-2); padding: 4px 10px; border-radius: 980px;
}
.plan-card__thumb {
  width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  background: var(--c-bg-tertiary); object-fit: cover;
}
.plan-card__title { font-family: var(--font-headline); font-weight: 700; font-size: 1.15rem; color: var(--c-fg1); margin: 0; }

/* Plan card — therapeutic framing (goal / reason / duration / inline start) */
.plan-card__goal {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-accent-2); background: rgba(43, 108, 176, 0.10);
  padding: 4px 10px; border-radius: 980px;
}
.plan-card__goal i { width: 14px; height: 14px; }
.plan-card__reason { font-size: 14px; line-height: 1.45; color: var(--c-fg2); margin: 0; }
.plan-card__reason b { color: var(--c-fg1); font-weight: 700; }
.plan-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.plan-card__dur { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--c-fg2); }
.plan-card__dur i { width: 15px; height: 15px; }
.plan-card__start {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: #fff;
  background: var(--c-accent-2); border: none; border-radius: 980px;
  padding: 9px 16px; min-height: 44px; cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
}
.plan-card__start:hover { filter: brightness(1.06); transform: translateY(-1px); }
.plan-card__start i { width: 16px; height: 16px; }

/* Focus-chip row under the plan header */
.home-focus-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 18px; }
.home-focus-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--c-fg1);
  background: var(--c-bg-tertiary); border: 1px solid var(--c-border);
  padding: 6px 12px; border-radius: 980px;
}
.home-focus-chip i { width: 14px; height: 14px; color: var(--c-accent-2); }
.home-focus-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--c-fg2); background: none; border: none;
  cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px;
}
.home-focus-hint i { width: 15px; height: 15px; }

/* Big continue / hero card (home) */
.hero-card {
  position: relative; border-radius: 28px; overflow: hidden;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg); padding: 14px;
}
.hero-card__media { width: 100%; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; background: var(--c-bg-tertiary); position: relative; }
.hero-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }

/* Clickable hero tile (continue-mode) — large tap/dwell target = the CTA */
.hero-card--clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.hero-card--clickable:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(26,58,106,0.20); }
.hero-card--clickable:hover .hero-card__media img { transform: scale(1.03); }
.hero-card--clickable:focus-visible { outline: 3px solid var(--c-accent, #4b698c); outline-offset: 3px; }
/* Play affordance overlay on hover/focus */
.hero-card--clickable .hero-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.0), rgba(0,0,0,0.0));
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.hero-card--clickable:hover .hero-card__media::after,
.hero-card--clickable:focus-visible .hero-card__media::after { opacity: 1; }
.hero-card--clickable .hero-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(75,105,140,0.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.hero-card--clickable .hero-card__play i, .hero-card--clickable .hero-card__play svg { width: 30px; height: 30px; }
.hero-card--clickable:hover .hero-card__play,
.hero-card--clickable:focus-visible .hero-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.high-contrast .hero-card--clickable .hero-card__play { background: #000; border: 2px solid #fff; }

/* Audio-unlock hint (autoplay policy) — prompts the support person to tap once */
.audio-hint-banner {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  z-index: 8500;
  display: flex; align-items: center; gap: 10px;
  max-width: min(440px, calc(100% - 32px));
  padding: 10px 12px 10px 16px;
  background: var(--c-accent, #4b698c); color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(26,58,106,0.30);
  font-size: 14px; font-weight: 600;
  animation: audioHintIn .25s ease;
}
.audio-hint-banner > i, .audio-hint-banner > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.audio-hint-banner > span { line-height: 1.35; }
.audio-hint-banner__close {
  flex: 0 0 auto; margin-left: 2px;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.audio-hint-banner__close:hover { background: rgba(255,255,255,0.32); }
.audio-hint-banner__close i, .audio-hint-banner__close svg { width: 16px; height: 16px; }
@keyframes audioHintIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.high-contrast .audio-hint-banner { background: #000; border: 2px solid #fff; }
.hero-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 6px; gap: 12px; }
.hero-streak { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--c-fg2); }
.hero-streak__num { font-family: var(--f-display); font-weight: 900; font-size: 1.1rem; color: var(--c-fg1); }

/* Stufe tabs (activities) */
.stufe-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.stufe-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 980px;
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--c-fg1);
  cursor: pointer; transition: all var(--transition-base); min-height: 44px;
}
.stufe-tab:hover { background: var(--c-bg-tertiary); }
.stufe-tab__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.stufe-tab__count { color: var(--c-fg3); font-size: 12px; font-weight: 600; }
.stufe-tab.is-active { color: #fff; border-color: transparent; background: var(--c-accent); }
.stufe-tab.is-active .stufe-tab__dot { background: #fff !important; }
.stufe-tab.is-active .stufe-tab__count { color: rgba(255,255,255,0.85); }

/* Stufe banner (activities) */
.stufe-banner {
  display: grid; grid-template-columns: 1fr minmax(0, 42%);
  border-radius: 24px; overflow: hidden; margin-bottom: 28px;
  min-height: 230px; color: #fff; box-shadow: var(--shadow-md);
}
.stufe-banner__text { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.stufe-banner__eyebrow { font-family: var(--font-heading-condensed); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.stufe-banner__title { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 1.05; margin: 2px 0; }
.stufe-banner__subtitle { font-family: var(--font-headline); font-style: italic; font-size: 1.2rem; opacity: 0.92; }
.stufe-banner__desc { font-size: 1rem; line-height: 1.5; opacity: 0.92; margin-top: 8px; max-width: 52ch; }
.stufe-banner__weiter {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; max-width: 56ch;
  padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.14);
  font-size: 0.95rem; line-height: 1.45;
}
.stufe-banner__weiter-icon, .stufe-banner__weiter svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.stufe-banner__media { background-size: cover; background-position: center; }
@media (max-width: 720px) { .stufe-banner { grid-template-columns: 1fr; } .stufe-banner__media { min-height: 160px; } }

/* Per-stufe "Eigene Inhalte" tool hint — a glassy clickable row inside the
   banner that points to the AAC content tool fitting this stufe. */
.stufe-banner__tool {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 12px 16px; border-radius: 14px; text-align: left; cursor: pointer;
  color: #fff; max-width: 52ch;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
  transition: background 0.18s, transform 0.18s;
}
.stufe-banner__tool:hover { background: rgba(255,255,255,0.20); transform: translateY(-1px); }
.stufe-banner__tool-icon { width: 22px; height: 22px; flex-shrink: 0; }
.stufe-banner__tool-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.stufe-banner__tool-eyebrow { font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.stufe-banner__tool-desc { font-size: 0.92rem; line-height: 1.4; opacity: 0.96; }
.stufe-banner__tool-arrow { display: inline-flex; flex-shrink: 0; opacity: 0.9; }
.stufe-banner__tool-arrow svg { width: 20px; height: 20px; }

/* Full-bleed photo banner — the illustration spans the whole banner (no narrow
   panel crop), behind a left→right dark scrim that keeps white text legible on
   any stufe colour or artwork. */
.stufe-banner--photo { position: relative; display: block; }
.stufe-banner--photo .stufe-banner__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.stufe-banner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(13,20,34,0.92) 0%,
    rgba(13,20,34,0.80) 36%,
    rgba(13,20,34,0.38) 66%,
    rgba(13,20,34,0.08) 100%);
}
.stufe-banner--photo .stufe-banner__text { position: relative; z-index: 2; max-width: 62%; }
@media (max-width: 720px) {
  .stufe-banner--photo .stufe-banner__text { max-width: 100%; }
  .stufe-banner__scrim { background: linear-gradient(180deg, rgba(13,20,34,0.45) 0%, rgba(13,20,34,0.88) 100%); }
}

/* Friendly empty state for the Szenenbilder tab */
.r-act-vsd-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: 40px 24px; background: var(--color-surface, #fff);
  border: 2px dashed var(--color-border, #d6dbe3); border-radius: 18px;
}
.r-act-vsd-empty__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(75,105,140,0.12); color: #4b698c;
}
.r-act-vsd-empty__icon svg { width: 28px; height: 28px; }
.r-act-vsd-empty__text { margin: 0; max-width: 42ch; color: var(--color-text-muted, #6b7280); line-height: 1.5; }
.r-act-vsd-empty__btn { padding: 12px 22px; font-weight: 600; border-radius: 12px; }

/* Activity tile (grid) */
/* Gruppen-Überschriften innerhalb einer Stufe (02.10.2026) */
.act-gruppe__titel { margin: 28px 0 12px; font-size: 1.15rem; font-weight: 700; color: var(--c-text-primary, #1f2937); }
.act-gruppe__titel:first-child { margin-top: 4px; }
.act-gruppe__hinweis { margin: -6px 0 12px; max-width: 70ch; font-size: 0.95rem; line-height: 1.45; color: var(--c-text-secondary, #4b5563); }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.act-tile {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-md);
  cursor: pointer; transition: all var(--transition-base); text-align: left;
  display: flex; flex-direction: column;
}
.act-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.act-tile__media { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--c-bg-tertiary); overflow: hidden; }
.act-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-tile__chip {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--f-heading); font-size: 11px; font-weight: 700; color: #fff;
  padding: 4px 10px; border-radius: 980px; letter-spacing: 0.04em;
}
.act-tile__body { padding: 14px 16px 18px; }
.act-tile__title { font-family: var(--font-headline); font-weight: 700; font-size: 1.1rem; color: var(--c-fg1); margin: 0 0 3px; }
.act-tile__focus { font-size: 13px; color: var(--c-fg2); margin: 0; }

/* Therapy cycle (progress) */
.cycle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cycle-step {
  background: var(--c-bg-primary); border: 1px solid var(--c-border);
  border-radius: 18px; padding: 20px; position: relative;
}
.cycle-step--active { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(75,105,140,0.12); background: var(--c-primary-bg, #f3f6fa); }
.cycle-step__num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 14px;
}
.cycle-step__title { font-family: var(--font-headline); font-weight: 700; font-size: 1.2rem; margin: 0 0 8px; color: var(--c-fg1); }
.cycle-step__desc { font-size: 14px; line-height: 1.45; color: var(--c-fg2); margin: 0 0 14px; }
.cycle-step__when { font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-fg3); }

/* Section heading pattern */
.section { margin-top: 44px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section__title { font-family: var(--font-headline); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--c-fg1); margin: 0; }

/* Wider content area for the redesigned screens */
.page-wide { max-width: 1480px; margin: 0 auto; width: 100%; }

/* Home hero layout */
.home-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-top: 18px;
}
.home-hero__text { min-width: 0; }
.home-hero__title {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.04;
  letter-spacing: -0.03em; color: var(--c-fg1); margin: 6px 0 18px; text-wrap: balance;
}
.home-hero__title .accent-text { color: var(--c-accent); display: block; }
.home-hero__lead { font-size: 1.12rem; line-height: 1.55; color: var(--c-fg2); margin: 0 0 30px; max-width: 56ch; }
.home-hero__lead strong { color: var(--c-fg1); font-weight: 700; }
.home-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.home-assess-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.home-assess-hint { font-size: 11px; color: var(--c-fg2, #51607a); padding-left: 4px; }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 28px; }
}
.hero-card__chip-row { display: flex; align-items: center; gap: 16px; }

/* ── Favourites strip (home) ──────────────────────────────────────────── */
.fav-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.fav-card {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 16/10; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  background: var(--c-bg-tertiary);
}
.fav-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.fav-card__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.fav-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.72) 100%);
}
.fav-card__caption {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
}
.fav-card__stufe {
  font-family: var(--font-heading-condensed); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  margin-bottom: 3px;
}
.fav-card__name {
  font-family: var(--f-heading); font-weight: 700; font-size: 1.25rem;
  color: #fff; line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.fav-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 32px 20px;
  background: var(--c-bg-secondary); border: 2px dashed var(--c-border);
  border-radius: 18px; color: var(--c-fg2);
}
.fav-empty__title { font-family: var(--f-heading); font-weight: 700; font-size: 1rem; color: var(--c-fg1); margin: 0; }
.fav-empty__desc { font-size: 14px; line-height: 1.5; margin: 0; max-width: 38ch; }

/* ── Stufen row (home) ───────────────────────────────────────────────── */
.home-stufen__desc {
  font-size: 14px; line-height: 1.6; color: var(--c-fg2, #51607a);
  margin: 0 0 16px; max-width: 72ch;
}
.stufen-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.stufen-row__item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; border-radius: 16px;
  background: var(--c-bg-primary); border: 1.5px solid var(--c-border);
  cursor: pointer; text-align: left;
  transition: all var(--transition-base); min-height: 60px;
}
.stufen-row__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--st-color, var(--c-border));
}
.stufen-row__item.is-active {
  border-color: var(--st-color, var(--c-accent));
  background: linear-gradient(180deg, var(--c-bg-primary), rgba(0,0,0,0.03));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-color, var(--c-accent)) 18%, transparent);
}
.stufen-row__num {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 700; font-size: 1.1rem; color: #fff;
}
.stufen-row__label { min-width: 0; }
.stufen-row__name {
  font-family: var(--f-heading); font-weight: 700; font-size: 0.92rem;
  color: var(--c-fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stufen-row__sub {
  font-size: 11px; color: var(--c-fg3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .stufen-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .stufen-row { grid-template-columns: repeat(2, 1fr); }
  .fav-scroll { grid-template-columns: repeat(2, 1fr); }
}

/* ── Intervention cycle (home) ───────────────────────────────────────────── */
.home-cycle {
  margin: 28px 0 8px;
  padding: 22px 22px 18px;
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 22px;
  background: var(--c-bg-card, #fff);
}
.home-cycle__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--c-fg1, #1a3a6a); }
.home-cycle__sub { margin: 0 0 18px; font-size: 14px; color: var(--c-fg2, #51607a); }
.home-cycle__ring {
  display: flex; align-items: stretch; justify-content: center;
  gap: 10px; flex-wrap: nowrap;
}
.home-cycle__step {
  flex: 1 1 0; min-width: 0; max-width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; text-align: center;
  border: 1px solid var(--c-border, #e4e7ee); border-radius: 18px;
  background: var(--c-bg-subtle, #f6f8fc); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.home-cycle__step:hover, .home-cycle__step:focus-visible {
  transform: translateY(-3px); outline: none;
  box-shadow: 0 10px 26px rgba(26,58,106,0.12);
}
.home-cycle__disc {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 2px;
}
.home-cycle__disc i, .home-cycle__disc svg { width: 28px; height: 28px; }
.home-cycle__step.is-assess { border-color: rgba(214,64,154,0.35); }
.home-cycle__step.is-assess .home-cycle__disc { background: #d6409a; }
.home-cycle__step.is-foster { border-color: rgba(75,105,140,0.40); }
.home-cycle__step.is-foster .home-cycle__disc { background: var(--c-accent, #4b698c); }
.home-cycle__step.is-review { border-color: rgba(46,158,107,0.38); }
.home-cycle__step.is-review .home-cycle__disc { background: #2e9e6b; }
.home-cycle__label { font-weight: 700; font-size: 16px; color: var(--c-fg1, #1a3a6a); }
.home-cycle__steptext { font-size: 13px; color: var(--c-fg2, #51607a); line-height: 1.3; }
.home-cycle__arrow {
  flex: 0 0 auto; align-self: center; color: var(--c-fg3, #94a3b8);
}
.home-cycle__arrow i, .home-cycle__arrow svg { width: 22px; height: 22px; }
.home-cycle__loop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--c-accent, #4b698c);
}
.home-cycle__loop i, .home-cycle__loop svg { width: 16px; height: 16px; }
.high-contrast .home-cycle, .high-contrast .home-cycle__step { border-color: #000; }
/* ── Eigene Inhalte (home → SceneTalk), 04.10.2026 ───────────────────────── */
.home-own {
  margin: 16px 0 8px;
  padding: 22px 22px 18px;
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 22px;
  background: var(--c-bg-card, #fff);
}
.home-own__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-own__card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  min-height: 96px; padding: 14px 16px;
  border: 1px solid var(--c-border, #e4e7ee); border-radius: 18px;
  background: var(--c-bg-subtle, #f6f8fc); cursor: pointer; font: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-own__card:hover, .home-own__card:focus-visible {
  transform: translateY(-3px); outline: none;
  box-shadow: 0 10px 26px rgba(26,58,106,0.12);
}
.home-own__card .home-cycle__disc { flex: 0 0 auto; margin-bottom: 0; background: var(--c-accent, #4b698c); }
.home-own__card.is-games .home-cycle__disc { background: #e07b39; }
.home-own__card.is-mine .home-cycle__disc { background: #2e9e6b; }
.home-own__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.high-contrast .home-own, .high-contrast .home-own__card { border-color: #000; }
@media (max-width: 900px) { .home-own__row { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .home-cycle__ring { flex-direction: column; align-items: stretch; }
  .home-cycle__step { max-width: none; flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; }
  .home-cycle__disc { margin-bottom: 0; }
  .home-cycle__arrow { transform: rotate(90deg); }
}

/* --- css/r-activities.css --- */
/* GazeTo — Activities screen redesign styles (owned by activities screen) */

/* Header block above the stufe tabs */
.screen-activities .r-act-head { margin-bottom: 26px; }
.screen-activities .r-act-head .eyebrow { display: block; margin-bottom: 8px; }
.screen-activities .r-act-head .page-title { margin: 0 0 10px; }
.screen-activities .r-act-head .page-lead { margin: 0; max-width: 64ch; }

/* Age-group filter row — sits above the stufe-tabs. Reuses the pill look of
   the stufe-tabs and the .is-active highlight (accent fill + white text). */
.screen-activities .age-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.screen-activities .age-tabs__label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg3);
  margin-right: 4px;
}
.screen-activities .age-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 980px;
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-fg1);
  cursor: pointer;
  transition: all var(--transition-base, 0.2s);
  min-height: 44px;
}
.screen-activities .age-tab:hover { background: var(--c-bg-tertiary); }
.screen-activities .age-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--c-accent);
}
.screen-activities .age-tab__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.screen-activities .age-tab svg { width: 18px; height: 18px; }
[data-theme="contrast"] .screen-activities .age-tab.is-active,
.high-contrast .screen-activities .age-tab.is-active { background: #ffd60a; color: #000; }

/* Empty state */
.screen-activities .r-act-empty {
  font-size: 1.05rem;
  color: var(--c-fg2);
  padding: 40px 4px;
  text-align: center;
}

/* Star toggle overlaid on the tile media (top-right). It sits above the
   tile button, so clicks are stopped from bubbling in JS. */
.act-tile__media { position: relative; }
.act-tile__star {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  color: #9ca3af;
  z-index: 5;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.act-tile__star:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Lucide star icon: outline by default, filled (via currentColor) when on. */
.act-tile__star .act-tile__star-icon,
.act-tile__star svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
}
.act-tile__star.is-on {
  color: #f59e0b;
  background: rgba(255, 251, 235, 0.97);
}
.act-tile__star.is-on svg { fill: currentColor; }

/* Keep the long focus subtitle tidy (max two lines). */
.act-tile__focus {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────────
   "Eigene Inhalte" entry card — opens the VSD scene editor.
   A prominent, touch-friendly accent card under the header.
   ────────────────────────────────────────────────────────────────────── */
.screen-activities .r-act-create {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  margin: 0 0 22px;
  padding: 18px 20px;
  min-height: 72px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-bg-primary);
  cursor: pointer;
  color: var(--c-fg1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.screen-activities .r-act-create:hover {
  border-color: var(--c-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.screen-activities .r-act-create:active { transform: translateY(1px); }
.screen-activities .r-act-create__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: #fff;
}
.screen-activities .r-act-create__icon svg { width: 28px; height: 28px; }
.screen-activities .r-act-create__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.screen-activities .r-act-create__title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-fg1);
}
.screen-activities .r-act-create__sub {
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--c-fg2);
}
.screen-activities .r-act-create__arrow {
  flex-shrink: 0;
  color: var(--c-fg3);
  display: flex;
  align-items: center;
}
.screen-activities .r-act-create__arrow svg { width: 22px; height: 22px; }
[data-theme="contrast"] .screen-activities .r-act-create__icon,
.high-contrast .screen-activities .r-act-create__icon { background: #ffd60a; color: #000; }

/* Lucide icon inside a stufe-tab (used by the "Eigene"/VSD filter tab). */
.screen-activities .stufe-tab__lucide {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.screen-activities .stufe-tab__lucide svg { width: 16px; height: 16px; }

/* Custom VSD scene tile: chip + image-icon placeholder when no thumbnail. */
.act-tile__chip--vsd {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.act-tile__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--c-bg-tertiary, #eef0f3);
  color: var(--c-fg3, #9ca3af);
}
.act-tile__placeholder svg { width: 40px; height: 40px; }

/* VSD banner variant — accent-tinted media box with a centred image icon. */
.stufe-banner--vsd { background: var(--c-accent); }
.stufe-banner__media--vsd {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
}
.stufe-banner__media--vsd svg { width: 56px; height: 56px; }

/* --- css/r-progress.css --- */
/* GazeTo — Progress screen redesign styles (owned by progress screen) */

/* Header: eyebrow + big serif title + lead on the left, PDF button on the right */
.progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-bottom: 28px;
}
.progress-head__text { min-width: 0; flex: 1 1 420px; }
.progress-head__text .page-title { margin: 4px 0 12px; }
.progress-head__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Stat cards sit directly under the header */
.progress-dashboard .stat-grid { margin-bottom: 8px; }

/* Therapy-cycle section keeps the shared .section rhythm */
.progress-cycle .cycle-step__desc { min-height: 2.6em; }

@media (max-width: 700px) {
  .progress-head__actions { width: 100%; }
  .progress-head__actions .btn-ghost-pill { width: 100%; }
}

/* ── Förderschwerpunkte (focus-area picker) ─────────────────────────────── */
.progress-focus .focus-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.4;
}
.progress-focus .focus-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.progress-focus .focus-pills { gap: 10px; }
.focus-pill {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  border: 1.5px solid var(--color-border, #d6dbe3);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  font: inherit;
  padding: 9px 16px 9px 9px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}
.focus-pill:hover { border-color: #4b698c; transform: translateY(-1px); }
.focus-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(75, 105, 140, 0.12);
  color: #4b698c;
}
.focus-pill__icon i, .focus-pill__icon svg { width: 20px; height: 20px; }
.focus-pill__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.focus-pill__title { font-size: 14px; font-weight: 700; line-height: 1.15; }
.focus-pill__desc { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--color-text-muted, #71717a); }
.focus-pill--on {
  background: #4b698c;
  border-color: #4b698c;
  color: #fff;
}
.focus-pill--on .focus-pill__icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.focus-pill--on .focus-pill__desc { color: rgba(255, 255, 255, 0.85); }
.focus-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.focus-pill--disabled:hover { border-color: var(--color-border, #d6dbe3); transform: none; }

/* ── WeeklyHeatmap (12-week activity calendar) ──────────────────────────── */
.progress-heatmap .heatmap-cal {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  padding-top: 2px;
}
.heatmap-days {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  flex-shrink: 0;
  /* push down so the weekday labels line up under the month-hint row */
  padding-top: 16px;
}
.heatmap-day-label {
  font-size: 9px;
  line-height: 14px;
  color: var(--color-text-muted, #6b7280);
  text-align: right;
  padding-right: 2px;
}
.heatmap-body {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.heatmap-col {
  display: grid;
  grid-template-rows: 14px repeat(7, 14px);
  gap: 3px;
}
.heatmap-month-label {
  font-size: 9px;
  line-height: 14px;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
}
.heatmap-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--color-surface-alt, rgba(75,105,140,0.08));
}
.heatmap-cell--future { background: transparent; }
.heatmap-cell--today { box-shadow: 0 0 0 1.5px var(--color-text, #1f2937); }
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.heatmap-legend__label {
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
}
.heatmap-legend__swatches {
  display: flex;
  gap: 3px;
}

/* ── Analytics row: StarsSparkline + FocusDonut side by side ────────────── */
.progress-analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px;
  margin-bottom: 12px;
  align-items: stretch;
}
@media (max-width: 700px) {
  .progress-analytics-row { grid-template-columns: 1fr; }
}

.progress-viz-empty {
  margin: 0;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
}

/* ── StarsSparkline (compact star-rating trend) ─────────────────────────── */
.progress-spark-card,
.progress-donut-card {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.progress-spark-card__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.progress-spark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.progress-spark__svg { overflow: visible; }
.progress-spark__trend {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-muted, #6b7280);
}
.progress-spark-card__sub {
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
}

/* ── FocusDonut (competency distribution donut + legend) ────────────────── */
.progress-donut {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.progress-donut__svg {
  transform: rotate(-90deg);
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}
.progress-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.progress-donut__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.progress-donut__dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.progress-donut__label {
  color: var(--color-text, #1f2937);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress-donut__val {
  font-weight: 700;
  color: var(--color-text, #1f2937);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 460px) {
  .progress-donut { grid-template-columns: 1fr; justify-items: center; }
  .progress-donut__legend { width: 100%; }
}

/* ── ProgressStory (brand-gradient narrative card) ──────────────────────── */
.progress-story {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  background: var(--gradient-brand, linear-gradient(135deg, #1a3a6a 0%, #4b698c 100%));
  color: #fff;
  border-radius: 18px;
  margin-bottom: 16px;
}
.progress-story__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-story__text { flex: 1; min-width: 0; }
.progress-story__eyebrow { color: rgba(255, 255, 255, 0.72); }
.progress-story__title {
  color: #fff;
  font-size: 22px;
  margin: 4px 0 12px;
  line-height: 1.2;
}
.progress-story__sentence {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 6px;
}
@media (max-width: 560px) {
  .progress-story { flex-direction: column; gap: 12px; padding: 18px; }
}

/* --- css/r-results.css --- */
/* ==========================================================================
   GazeTo — Results screen (AssistUK redesign)
   Presentation only. Reuses redesign.css tokens & components
   (.page-wide, .page-title, .eyebrow, .section, .stat-card,
    .btn-primary-blue, .btn-ghost-pill, .card).
   Print layout is owned by css/print.css — do not duplicate it here.
   ========================================================================== */

.screen-results.results-redesign {
  padding: clamp(16px, 3vw, 36px) clamp(14px, 3vw, 32px) 80px;
}

.results-page {
  display: flex;
  flex-direction: column;
}

/* -- Head: eyebrow + big serif headline -- */
.results-head {
  text-align: center;
  margin-bottom: clamp(12px, 2vw, 20px);
}
.results-eyebrow { text-align: center; }
.results-headline { text-align: center; margin-bottom: 0; }

/* -- Celebration hero -- */
.results-hero {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(14px, 2.5vw, 22px);
}
.results-celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 48px);
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border);
  border-radius: 28px;
  box-shadow: var(--shadow-md);
  max-width: 560px;
  width: 100%;
}
.results-emoji {
  color: var(--c-warning);
  display: flex;
  align-items: center;
  justify-content: center;
}
.results-emoji i,
.results-emoji svg { width: 56px; height: 56px; }

.results-stars {
  display: inline-flex;
  gap: 6px;
  font-size: clamp(40px, 7vw, 60px);
  line-height: 1;
  letter-spacing: 2px;
}
.results-stars .results-star { color: var(--c-border-strong); }
.results-stars .results-star--filled { color: var(--c-warning); }

.results-feedback {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.25;
  color: var(--c-fg1);
  text-wrap: balance;
}
.results-feedback-sub {
  margin: 0;
  color: var(--c-fg2);
  font-size: 0.95rem;
}

/* -- Quick "pin as favourite" toggle under the headline -- */
.results-fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg-primary);
  color: var(--c-fg2);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.results-fav-toggle:hover { border-color: var(--c-warning, #f59e0b); color: var(--c-fg1); }
.results-fav-toggle__icon { display: inline-flex; color: var(--c-border-strong, #9aa3b2); }
.results-fav-toggle__icon i, .results-fav-toggle__icon svg { width: 20px; height: 20px; }
.results-fav-toggle.is-pinned {
  border-color: var(--c-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.12);
  color: var(--c-fg1);
}
.results-fav-toggle.is-pinned .results-fav-toggle__icon { color: var(--c-warning, #f59e0b); }
.results-fav-toggle.is-pinned .results-fav-toggle__icon svg { fill: var(--c-warning, #f59e0b); }

/* -- Metrics: stat-grid of stat-cards -- */
.results-page .metrics-grid.stat-grid {
  margin-bottom: clamp(8px, 1.5vw, 16px);
}
.results-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.results-stat-card .stat-card__icon {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent);
  margin-bottom: 4px;
}
.results-stat-card .stat-card__icon i,
.results-stat-card .stat-card__icon svg { width: 26px; height: 26px; }
.results-stat-card .stat-card__label { margin: 0 0 6px; }
.results-stat-card .stat-card__value { margin: 0; }

/* -- Visualization row (heatmap + scan path side by side) -- */
.results-viz-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.results-viz-row .results-heatmap__card,
.results-viz-row .results-scanpath__card {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 2vw, 22px);
  gap: 10px;
}
.results-viz-caption {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg3, #818a99);
  text-align: center;
}
.results-heatmap__canvas,
.results-scanpath__canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--c-bg-secondary);
  box-shadow: var(--shadow-md);
  cursor: zoom-in;
}

/* -- Detailed analysis section spacing -- */
.results-analytics .analytics-container { margin-top: 4px; }

/* -- Action buttons -- */
.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

@media (max-width: 640px) {
  .results-actions { flex-direction: column; }
  .results-actions .btn-primary-blue,
  .results-actions .btn-ghost-pill { width: 100%; }
}

/* -- Primary nav: prev | replay | next, kept under the stats so the user never
   has to scroll past the visualisations to continue. The prev/next cards
   preview the activity they lead to (thumbnail + name). -- */
.results-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin: clamp(12px, 2vw, 20px) 0 clamp(10px, 1.5vw, 16px);
}
.results-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 18px;
  background: var(--c-bg-primary);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  cursor: pointer;
  text-align: left;
  min-height: 76px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.results-nav-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary, #4b698c);
}
.results-nav-card--next { justify-content: flex-end; text-align: right; }

/* Mittlere Spalte: Nochmal spielen + Aktivitaet anpassen gestapelt */
.results-replay-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.results-replay-stack .results-nav-card--replay { flex: 1; }
.results-adjust-btn { justify-content: center; }
.results-nav-card__thumb {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-bg-secondary);
}
.results-nav-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.results-nav-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.results-nav-card--next .results-nav-card__text { align-items: flex-end; }
.results-nav-card__dir {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-accent, #4b698c);
}
.results-nav-card__dir i, .results-nav-card__dir svg { width: 16px; height: 16px; }
.results-nav-card__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1rem; line-height: 1.2; color: var(--c-fg1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}
/* Replay = central primary button */
.results-nav-card--replay {
  flex-direction: column; justify-content: center; gap: 6px;
  min-width: 150px; text-align: center;
  background: linear-gradient(135deg, #4D96FF 0%, #2c4d80 100%);
  border: none; color: #fff;
}
.results-nav-card--replay:hover { border-color: transparent; }
.results-nav-card--replay .results-nav-card__replay-icon i,
.results-nav-card--replay .results-nav-card__replay-icon svg { width: 26px; height: 26px; }
.results-nav-card__replay-label { font-family: var(--f-display); font-weight: 700; font-size: 1rem; }

/* -- Secondary, low-emphasis actions (overview / settings / report). -- */
.results-actions-secondary {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0 0 clamp(18px, 3vw, 28px);
}

@media (max-width: 640px) {
  .results-nav { grid-template-columns: 1fr; }
  .results-nav-card--next { justify-content: flex-start; text-align: left; }
  .results-nav-card--next .results-nav-card__text { align-items: flex-start; }
  .results-actions-secondary { flex-direction: column; }
  .results-actions-secondary .btn-ghost-pill { width: 100%; }
}

/* ==========================================================================
   Feier-Momente (B1): Sterne-Sequenz, Konfetti, Glanz-Rahmen, Meilenstein
   ========================================================================== */

/* -- Sterne: nacheinander einblenden mit leichtem Overshoot -- */
.results-star {
  display: inline-block;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease-out;
}
.results-star--pending { opacity: 0; transform: scale(0.3); }
.results-star--in { opacity: 1; transform: scale(1); }

/* -- Konfetti-Regen ueber der Ergebnis-Karte --
   pointer-events:none + niedriger z-index: blockiert nie Dwell/Tap. */
.results-hero { position: relative; }
.results-confetti {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.results-confetti__piece {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
  animation: results-confetti-fall 2.2s ease-in forwards;
  will-change: transform, opacity;
}
@keyframes results-confetti-fall {
  0%   { opacity: 0; transform: translate3d(0, -10px, 0) rotate(0deg); }
  10%  { opacity: 0.95; }
  80%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(0, 340px, 0) rotate(540deg); }
}

/* -- Glanz-Rahmen (Ersatz-Feier bei reduzierter Bewegung, statisch) -- */
.results-celebration--glow {
  box-shadow:
    0 0 0 3px var(--c-warning),
    0 0 26px rgba(245, 158, 11, 0.35);
}

/* -- Meilenstein-Toast (fixed: verschiebt kein Layout, blockiert nichts) -- */
.results-milestone-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 480px);
  padding: 14px 22px;
  background: var(--c-bg-primary, #fff);
  border: 1px solid var(--c-border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 12px 36px rgba(0, 0, 0, 0.12));
  z-index: 1200;
  pointer-events: none;
  animation: results-milestone-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.results-milestone-toast--static { animation: none; }
.results-milestone-toast--out {
  /* animation abloesen, sonst gewinnt fill-mode 'both' gegen die Klasse */
  animation: none;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
.results-milestone-toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-bg-secondary, #f0f1f4);
  color: var(--c-warning);
}
.results-milestone-toast__icon i,
.results-milestone-toast__icon svg { width: 26px; height: 26px; }
.results-milestone-toast__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-fg1);
}
.results-milestone-toast__text {
  font-size: 0.9rem;
  color: var(--c-fg2);
}
@keyframes results-milestone-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ── Blick-Wiedergabe (WIEDERGABE-2026-10-23) ─────────────────────────────
   Vollfläche wie der Heatmap-Zoom; Leinwand oben, Bedienleiste unten.
   Knöpfe ≥ 48 px (Begleitperson tippt). */
.results-heatmap .section__head { flex-wrap: wrap; gap: 10px; }
.results-wiedergabe-knopf { display: inline-flex; align-items: center; gap: 8px; }
.heatmap-zoom-overlay.wiedergabe {
  flex-direction: column;
  cursor: default;
  padding: 64px 16px 12px;
  box-sizing: border-box;
}
.wiedergabe__leinwand {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
.wiedergabe__leiste {
  flex: 0 0 auto;
  width: min(1100px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 4px 4px;
  color: #e2e8f0;
}
.wiedergabe__knopf {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: #4b698c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.wiedergabe__knopf svg { width: 26px; height: 26px; }
.wiedergabe__regler {
  flex: 1 1 240px;
  min-width: 160px;
  height: 32px;
  accent-color: #facc15;
  cursor: pointer;
}
.wiedergabe__zeit {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  min-width: 92px;
  text-align: center;
}
.wiedergabe__tempo { display: inline-flex; gap: 6px; }
.wiedergabe__chip {
  min-width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: transparent;
  color: #e2e8f0;
  font-weight: 700;
  cursor: pointer;
}
.wiedergabe__chip.is-active { background: #e2e8f0; color: #0b1220; }
/* Mit/Ohne Szene: Wörter statt „2×" — Platz für längere Übersetzungen (WG-SZENE-2026-10-24) */
.wiedergabe__szene .wiedergabe__chip { padding: 0 16px; white-space: nowrap; }
.wiedergabe__knopf:focus-visible,
.wiedergabe__chip:focus-visible,
.wiedergabe__regler:focus-visible { outline: 3px solid #facc15; outline-offset: 3px; }
.wiedergabe__hinweis {
  flex: 1 1 100%;
  font-size: 0.85rem;
  color: #94a3b8;
}
/* --- css/r-settings.css --- */
/* ==========================================================================
   GazeTo — Settings screen redesign (AssistUK)
   Restyles the Settings screen onto the redesign foundation: eyebrow + big
   serif title, grouped .card blocks, prominent return bar. Presentation only.
   ========================================================================== */

/* Page scaffold */
.screen-settings { padding: 24px 24px 64px; }
.settings-page { display: block; }
.settings-head { margin-bottom: 28px; }

/* ── Shared card (used here; augments the redesign component set) ── */
.card {
  background: var(--c-bg-primary, #fff);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  box-shadow: var(--shadow-md, 0 4px 18px rgba(0, 0, 0, 0.06));
}

/* ── Settings cards ── */
.settings-card {
  padding: 26px 28px;
  margin-bottom: 22px;
}
.settings-card__title {
  margin: 0 0 18px;
  /* inherits .eyebrow styling (Oswald, uppercase, tracked) */
}
.settings-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Return-to-activity bar (one-shot, prominent) ── */
.settings-return-bar {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--c-bg-primary, #fff);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--shadow-md, 0 4px 18px rgba(0, 0, 0, 0.06));
  display: flex;
  justify-content: center;
}
.settings-return-btn {
  width: 100%;
  max-width: 560px;
  min-height: 60px;
}

/* ── Rows ── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.settings-row--column {
  flex-direction: column;
  align-items: stretch;
}
.settings-row--toggle {
  flex-wrap: nowrap;
}
.settings-label {
  font-family: var(--f-body, sans-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-fg1, #1d1d1f);
}
.settings-row--column > .settings-label { margin-bottom: 2px; }

/* Profile header (avatar + spacing) */
.settings-profile-header { gap: 14px; justify-content: flex-start; }

/* Text input */
.settings-input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--c-border-strong, rgba(0, 0, 0, 0.14));
  background: var(--c-bg-primary, #fff);
  color: var(--c-fg1, #1d1d1f);
  font-family: var(--f-body, sans-serif);
  font-size: 1rem;
}
.settings-input:focus {
  outline: none;
  border-color: var(--c-accent, #4b698c);
  box-shadow: 0 0 0 3px rgba(75, 105, 140, 0.15);
}

/* Profile action buttons grouped vertically on wide, wrap on narrow */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.settings-actions .btn { min-height: 48px; }

/* Button group (segmented options) */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn-group .btn {
  flex: 0 1 auto;
  min-height: 48px;
}

/* ── Selected / active option chips ──────────────────────────────────────
   FIX (button-contrast): the selected chip must read clearly. We use the
   accent fill with WHITE text and keep that contrast on :hover (hover only
   darkens the accent — it never lowers fg/bg contrast). The double-class
   selectors raise specificity so this reliably beats the legacy
   `.btn--outline.btn--active` rule (light bg + dark text) from activities.css
   on the redesigned Settings screen, giving one consistent readable look. */
.settings-page .btn-group .btn--active,
.settings-page .btn--outline.btn--active,
.btn-group .btn--outline.btn--active {
  background: var(--c-accent, #4b698c);
  border-color: var(--c-accent, #4b698c);
  color: #fff;
}
.settings-page .btn-group .btn--active:hover,
.settings-page .btn--outline.btn--active:hover,
.btn-group .btn--outline.btn--active:hover {
  background: var(--c-accent-2, #3a5a7c);
  border-color: var(--c-accent-2, #3a5a7c);
  color: #fff;
}
/* Unselected chip hover must not look "selected" or drop contrast. */
.settings-page .btn-group .btn--outline:not(.btn--active):hover {
  background: var(--c-bg-tertiary, #e3e6ec);
  border-color: var(--c-accent, #4b698c);
  color: var(--c-fg1, #1d1d1f);
}

/* Dark theme: the dark-mode accent is a LIGHT blue, so white text on it is
   weak. Use dark text on the light-blue fill for an AA+ selected chip. */
[data-theme="dark"] .settings-page .btn-group .btn--active,
[data-theme="dark"] .settings-page .btn--outline.btn--active {
  background: var(--c-accent, #7ea7d4);
  border-color: var(--c-accent, #7ea7d4);
  color: #0f1116;
}
[data-theme="dark"] .settings-page .btn-group .btn--active:hover,
[data-theme="dark"] .settings-page .btn--outline.btn--active:hover {
  background: var(--c-accent-2, #a3c0e0);
  border-color: var(--c-accent-2, #a3c0e0);
  color: #0f1116;
}

/* High-contrast theme: accent is yellow → selected chip must be BLACK text on
   yellow (white on yellow fails). Unselected chips stay white-on-black. */
[data-theme="contrast"] .settings-page .btn-group .btn--active,
[data-theme="contrast"] .settings-page .btn--outline.btn--active,
.high-contrast .settings-page .btn-group .btn--active,
.high-contrast .settings-page .btn--outline.btn--active {
  background: #ffd60a !important;
  border-color: #ffd60a !important;
  color: #000 !important;
}
[data-theme="contrast"] .settings-page .btn-group .btn--outline:not(.btn--active),
.high-contrast .settings-page .btn-group .btn--outline:not(.btn--active) {
  background: #000;
  border-color: #fff;
  color: #fff;
}
[data-theme="contrast"] .settings-page .btn-group .btn--outline:not(.btn--active):hover,
.high-contrast .settings-page .btn-group .btn--outline:not(.btn--active):hover {
  background: #1a1a1a;
  border-color: #ffd60a;
  color: #fff;
}

/* ── Cursor-style chips: keep any in-button colour PREVIEW visible ────────
   When a chip carries a small preview swatch tinted with the user's cursor
   colour, the swatch can vanish if its colour matches the (now navy) active
   chip background. Give every preview a contrasting white ring + halo so it
   stays visible against accent, dark and high-contrast backgrounds alike. */
.btn .cursor-preview,
.btn .style-preview,
.settings-page .btn-group .btn [data-preview] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}
.btn--active .cursor-preview,
.btn--active .style-preview,
.settings-page .btn-group .btn--active [data-preview] {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.45);
}

/* Webcam sub-settings */
.settings-subsection {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-radius: 16px;
  background: var(--c-bg-secondary, #f0f1f4);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
}

/* Sliders */
.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.settings-slider {
  flex: 1;
  min-width: 0;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 980px;
  background: var(--c-bg-tertiary, #e3e6ec);
  cursor: pointer;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent, #4b698c);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  cursor: pointer;
}
.settings-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-accent, #4b698c);
  border: 3px solid #fff;
  cursor: pointer;
}
.settings-slider__value {
  min-width: 64px;
  text-align: right;
  font-family: var(--f-heading, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-fg2, #555e6e);
}

/* Dwell preview canvas */
.settings-dwell-preview {
  width: 100%;
  max-width: 280px;
  height: 100px;
  display: block;
  background: var(--c-bg-secondary, rgba(0, 0, 0, 0.04));
  border-radius: 14px;
}

/* Cursor style+colour preview canvas */
.settings-cursor-preview {
  width: 100%;
  max-width: 240px;
  height: 72px;
  display: block;
  border-radius: 8px;
}

/* Appearance chips: allow inline preview elements */
.settings-page .btn-group .btn.appearance-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* Theme "Aa" tile and all chip-preview spans */
.chip-preview {
  flex-shrink: 0;
  pointer-events: none;
}
/* Stufe dot rows: keep dots from being squished on small screens */
.chip-preview--stufe {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

/* Cursor colour swatches */
.color-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.color-swatch {
  width: 46px;
  height: 46px;
  min-height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--c-border, rgba(0, 0, 0, 0.12));
  cursor: pointer;
  padding: 0;
}
.color-swatch--active {
  border-color: var(--c-accent, #4b698c);
  box-shadow: 0 0 0 1px var(--c-accent, #4b698c);
  transform: scale(1.08);
}

/* Toggles */
.toggle {
  position: relative;
  width: 60px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 980px;
  border: 0;
  background: var(--c-bg-tertiary, #e3e6ec);
  cursor: pointer;
  transition: background var(--transition-base, 0.2s) ease;
  padding: 0;
}
.toggle--on { background: var(--c-success, #1f8a5b); }
.toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.2));
  transition: transform var(--transition-base, 0.2s) ease;
}
.toggle--on .toggle__knob { transform: translateX(26px); }

/* Language search box */
.lang-search {
  flex: none !important;   /* prevent growth inside column-flex settings-card__body */
  max-width: 320px;
  margin-bottom: 4px;
}

/* Language flag grid */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 12px;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px; /* Dwell-Target-Spezifikation: >= 64px */
  padding: 12px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--c-border-strong, rgba(0, 0, 0, 0.14));
  background: var(--c-bg-primary, #fff);
  color: var(--c-fg1, #1d1d1f);
  font-family: var(--f-body, sans-serif);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-base, 0.2s) ease;
  text-align: left;
}
.lang-btn:hover { background: var(--c-bg-tertiary, #e3e6ec); }
.lang-btn.active {
  border-color: var(--c-accent, #4b698c);
  background: var(--color-primary-bg, #eef2f7);
  box-shadow: 0 0 0 2px var(--c-accent, #4b698c);
}
.lang-btn__flag { font-size: 1.6rem; line-height: 1; }
/* SVG-Flagge (assets/flags/) — ersetzt das frühere Emoji */
.lang-btn__flag-img {
  width: 34px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.lang-btn__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Profile avatar (settings) */
.profile-avatar--small {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--f-heading, sans-serif);
  font-weight: 700;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.15));
}

@media (max-width: 600px) {
  .screen-settings { padding: 16px 14px 56px; }
  .settings-card { padding: 20px 18px; }
  .settings-row--toggle { flex-wrap: nowrap; }
  .btn-group .btn { flex: 1 1 auto; }
}

/* ── Music Selector ── */
.settings-music-panel {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
}

.settings-music-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}

.settings-music-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border, rgba(0,0,0,0.15));
  background: var(--color-surface, #fff);
  color: var(--color-text, #222);
  font-size: 0.82rem;
  font-family: var(--f-body, sans-serif);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.3;
  min-height: 34px;
}

.settings-music-chip:hover {
  border-color: var(--color-primary, #4b698c);
  background: rgba(75,105,140,0.07);
}

.settings-music-chip--active {
  background: var(--color-primary, #4b698c);
  border-color: var(--color-primary, #4b698c);
  color: #fff;
  font-weight: 600;
}

/* Bereich Ansteuerung (24.10.2026): breiter Knopf öffnet den gemeinsamen Baustein (Hausregel ≥ 220 × 96 px) */
.settings-anst { gap: 8px; }
/* EINGABE-AUFGERAEUMT-2026-10-25: Zusammenfassung unter dem Knopf; ohne nowrap dehnt der Spalten-Umbruch sie um ~80 px */
.settings-anst { flex-wrap: nowrap; }
.settings-anst__zf { margin-top: 8px; }
.settings-anst__hint { margin: 0; font-size: 0.95rem; color: var(--color-text-muted, #5b6675); }
.settings-anst__btn { min-width: 320px; min-height: 96px; padding: 12px 24px; border-radius: 18px; border: 3px solid var(--color-primary, #4b698c); background: var(--color-primary, #4b698c); color: #fff; font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.settings-anst__btn:hover, .settings-anst__btn:focus-visible { filter: brightness(1.08); outline: none; }

/* ── QA-2026-10-25: Bildschirm-Prüfung ─────────────────────────────────────
   Feld „Name": in der Spalten-Zeile (≤ 600 px) wurde die Basis 220 px zur
   HÖHE (200 × 220 px). Sprachsuche: volle Breite, in RTL rechts. Tippziele
   ≥ 48 px (Hausregel GazeTo). */
@media (max-width: 600px) {
  .settings-row .settings-input { flex: 0 0 auto; width: 100%; }
}
.lang-search { width: 100%; }
.settings-row--toggle .settings-label { cursor: pointer; }   /* ganze Zeile schaltet (settings.js createToggleRow) */
.settings-music-chip { min-height: 48px; }
.color-swatch { width: 48px; height: 48px; min-height: 48px; }
/* --- css/r-profile.css --- */
/* GazeTo — profile screen redesign styles (AssistUK) */

/* Page head: eyebrow + big serif title */
.r-profile-head { margin-bottom: 32px; }
.r-profile-lead { margin-top: 4px; }

/* Responsive grid of large, touch-friendly profile cards */
.r-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  /* Override the legacy .profile-picker rule (max-width:600px + fixed 120px
     columns + centering) that still rides on this element and squeezed the
     cards into ~2 columns with large empty gaps. */
  max-width: none;
  width: 100%;
  justify-content: stretch;
  justify-items: stretch;
  align-items: stretch;
}

/* A single profile card */
.r-profile-card {
  position: relative;
  /* Override the legacy .profile-card { width: 140px } so the card fills its
     grid track instead of leaving a large gap inside each column. */
  width: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 230px;
  padding: 28px 22px 22px;
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.r-profile-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.r-profile-card:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.r-profile-card.is-active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(75,105,140,0.16), var(--shadow-md);
}

/* Big circular avatar */
.r-profile-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

/* Active check badge */
.r-profile-avatar__check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-success);
  border: 3px solid var(--c-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Profile name */
.r-profile-name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--c-fg1);
  margin: 0;
  word-break: break-word;
}

/* Primary meta (age + age-group) */
.r-profile-meta {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-fg2);
  min-height: 18px;
  margin: -4px 0 0;
}

/* Secondary stats row (sessions + streak) */
.r-profile-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-fg3);
  margin: -8px 0 0;
}
.r-profile-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.r-profile-stat i, .r-profile-stat svg {
  width: 14px;
  height: 14px;
  color: var(--c-warning);
}

/* Compact edit/delete actions */
.r-profile-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  justify-content: center;
}
.r-profile-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border);
  color: var(--c-fg2);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.r-profile-iconbtn:hover { background: var(--c-bg-tertiary); color: var(--c-fg1); }
.r-profile-iconbtn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.r-profile-iconbtn--danger:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.r-profile-iconbtn i, .r-profile-iconbtn svg { width: 18px; height: 18px; }

/* "Add profile" card */
.r-profile-card--add {
  background: transparent;
  border: 2px dashed var(--c-border-strong);
  box-shadow: none;
  justify-content: center;
  color: var(--c-fg2);
}
.r-profile-card--add:hover {
  border-color: var(--c-accent);
  background: var(--c-bg-secondary);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.r-profile-avatar--add {
  background: var(--c-bg-tertiary);
  color: var(--c-accent);
  box-shadow: none;
}
.r-profile-avatar--add i, .r-profile-avatar--add svg { width: 40px; height: 40px; }
.r-profile-card--add .r-profile-name { color: var(--c-fg2); }

/* Back button spacing in manage/add mode */
.r-profile-back { margin-bottom: 16px; }

/* ── Header toolbar (Import + privacy note) ────────────────────────── */
.r-profile-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 20px;
}
.r-profile-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-fg3);
}
.r-profile-privacy i, .r-profile-privacy svg {
  width: 16px;
  height: 16px;
  color: var(--c-success);
  flex-shrink: 0;
}

/* ── Granular data tools ("Daten verwalten") ───────────────────────── */
.r-profile-datatools { margin-top: 4px; }
.r-profile-datatools__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.r-profile-datatools__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.r-profile-datatools__btn i, .r-profile-datatools__btn svg {
  flex-shrink: 0;
}

/* ── Create / Edit form (inline panel) ────────────────────────────── */
.profile-form {
  max-width: 560px;
  width: 100%;
  margin: 28px auto 0;
  padding: 28px 30px 26px;
  background: var(--c-bg-primary);
  border: 1px solid var(--c-border);
  border-radius: 26px;
  box-shadow: 0 12px 40px var(--c-shadow-lg);
}
.profile-form__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--c-fg1);
  margin: 0 0 20px;
}
.profile-form__group { margin-bottom: 18px; }

/* Field labels (Oswald-ish eyebrow tone) */
.r-profile-fieldlabel {
  display: block;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-fg2);
  margin-bottom: 8px;
}

/* Name + age inputs */
.profile-form__input {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  color: var(--c-fg1);
  background: var(--c-bg-secondary);
  border: 1.5px solid var(--c-border-strong);
  border-radius: 14px;
  min-height: 50px;
  box-sizing: border-box;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.profile-form__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(75,105,140,0.16);
}
.profile-form__input.form-input--error {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px rgba(211,47,47,0.16);
}
.r-profile-age-input { max-width: 160px; }

/* Age-group (audience) segmented chooser */
.r-profile-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.r-profile-seg__btn {
  flex: 1 1 0;
  min-width: 96px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-bg-secondary);
  color: var(--c-fg1);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}
.r-profile-seg__btn:hover { border-color: var(--c-accent); background: var(--c-bg-tertiary); }
.r-profile-seg__btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.r-profile-seg__btn.is-on {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(75,105,140,0.3);
}

/* Form action buttons */
.profile-form__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  flex-wrap: wrap;
}
.profile-form__actions .btn-primary-blue,
.profile-form__actions .btn-ghost-pill { min-height: 52px; }

@media (max-width: 560px) {
  .r-profile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .r-profile-card { min-height: 200px; padding: 22px 14px 18px; }
  .r-profile-avatar { width: 84px; height: 84px; font-size: 2rem; }
  .profile-form { padding: 22px 18px 20px; border-radius: 20px; }
  .r-profile-seg__btn { flex-basis: 45%; }
  .profile-form__actions .btn-primary-blue,
  .profile-form__actions .btn-ghost-pill { flex: 1; }
}

/* --- css/r-selection.css --- */
/* GazeTo — selection screen redesign styles (AssistUK)
   Restyles ScreenMySelection ("Meine Auswahl" hub). Presentation only —
   behaviour (touch + mouse + gaze-dwell, pagination, playlist, star-toggle,
   close button) lives in screens/my-selection.js. */

.screen-my-selection {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
  box-sizing: border-box;
}

/* Hub (Mein Bereich) locks page scrolling — eye-gaze users can't scroll, the
   curated selection paginates instead. Class toggled by ScreenMySelection. */
body.hub-noscroll { overflow: hidden; }
body.hub-noscroll #app-content { overflow: hidden; }
/* Bei gesperrtem Scrollen ist der Seiten-Footer nie erreichbar — ausblenden,
   damit er die Seite nicht über den Viewport hinaus verlängert. */
body.hub-noscroll #app-footer { display: none; }

.r-sel-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 28px 24px 24px;
  box-sizing: border-box;
}

/* ── Header (eyebrow + big serif title + count) + action cluster ── */
.r-sel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.r-sel-head__text { min-width: 0; }
.r-sel-head__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Big, obvious round close/back button — gaze-friendly (≥64px). */
.r-sel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  border: 2px solid var(--c-border-strong, rgba(0,0,0,0.14));
  background: var(--c-bg-primary, #fff);
  color: var(--c-fg1, #1d1d1f);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,0.06));
  transition: background var(--transition-base, 0.2s ease), transform 0.12s ease, box-shadow var(--transition-base, 0.2s ease), color var(--transition-base, 0.2s ease);
}
.r-sel-close:hover {
  background: var(--c-accent, #4b698c);
  color: #fff;
  transform: scale(1.05);
  box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,0.12));
}
.r-sel-close svg, .r-sel-close i { width: 34px; height: 34px; }

/* ── Tile grid — 4 columns, big touch/gaze targets ── */
.r-sel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 26px;
  flex: 1;
  min-height: 0;
  align-content: start;
}

/* Tiles reuse .act-tile / .act-tile__* from redesign.css; we just make them
   larger and ensure the star reads as "active" (already in the selection). */
.r-sel-tile { position: relative; }
.r-sel-tile .act-tile__media { aspect-ratio: 16/10; }
.r-sel-tile .act-tile__title {
  font-size: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-sel-tile .act-tile__body { padding: 16px 18px 20px; }

/* Larger star hit-area on the hub (removes from selection). */
.r-sel-tile .act-tile__star {
  width: 52px;
  height: 52px;
  font-size: 28px;
}

/* ── Pagination — large round arrow buttons (≥64px for gaze) ── */
.r-sel-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 8px 8px;
}
.r-sel-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 50%;
  border: 3px solid var(--c-accent, #4b698c);
  background: var(--c-bg-primary, #fff);
  color: var(--c-accent, #4b698c);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,0.08));
  transition: background var(--transition-base, 0.2s ease), color var(--transition-base, 0.2s ease), transform 0.12s ease, box-shadow var(--transition-base, 0.2s ease);
}
.r-sel-page-btn:hover {
  background: var(--c-accent, #4b698c);
  color: #fff;
  transform: scale(1.06);
  box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,0.12));
}
.r-sel-page-btn svg, .r-sel-page-btn i { width: 44px; height: 44px; }

.r-sel-page-indicator {
  font-family: var(--f-heading, 'Oswald', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-fg2, #555e6e);
}

/* ── Empty state ── */
.r-sel-empty {
  max-width: 620px;
  margin: 48px auto;
  padding: 40px 32px;
  text-align: center;
  background: var(--c-bg-primary, #fff);
  border: 1px solid var(--c-border, rgba(0,0,0,0.08));
  border-radius: 24px;
  box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,0.06));
}
.r-sel-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--c-bg-tertiary, #e3e6ec);
  color: #f59e0b;
}
.r-sel-empty__icon svg, .r-sel-empty__icon i { width: 44px; height: 44px; }
.r-sel-empty__title {
  font-family: var(--f-display, 'Merriweather', serif);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--c-fg1, #1d1d1f);
  margin: 0 0 14px;
}
.r-sel-empty__text {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-fg2, #555e6e);
  margin: 0 0 28px;
}

/* ── Responsive (legacy grid) ── */
@media (max-width: 1100px) {
  .r-sel-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .r-sel-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .r-sel-head { flex-direction: column; }
  .r-sel-head__actions { width: 100%; justify-content: space-between; }
  .r-sel-page-btn { width: 72px; height: 72px; min-width: 72px; }
  .r-sel-page-btn svg, .r-sel-page-btn i { width: 34px; height: 34px; }
}

/* ==========================================================================
   Immersive "Mein Bereich" Hub — the client (gaze user) surface.
   Full-bleed, calm, very large dwellable targets, minimal text, high contrast.
   ========================================================================== */

.screen-my-selection.hub {
  position: relative;
  /* Fit fully between the top status bar and the fixed bottom-nav (~64px) so
     NOTHING needs scrolling — eye-gaze users cannot scroll. Override the base
     .screen-my-selection min-height (which otherwise forces extra height). */
  /* Rueckfall vh zuerst, dann dvh (SICHTHOEHE-2026-10-04: stand umgekehrt,
     100vh gewann -> unten hinter der Safari-Leiste) */
  height: calc(100vh - 150px);
  height: calc(100dvh - 150px);
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  color: #fff;
  background: radial-gradient(ellipse at 30% 18%, #1a3a6a 0%, #0a1830 60%, #050b1a 100%);
  overflow: hidden;
}

/* Soft ambient blobs behind the content — purely decorative, no interaction. */
.hub__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hub__bg::before, .hub__bg::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(120px);
}
.hub__bg::before {
  width: 620px; height: 620px; background: #4b698c; opacity: 0.55;
  top: -200px; right: -120px;
}
.hub__bg::after {
  width: 520px; height: 520px; background: #6366f1; opacity: 0.28;
  bottom: -220px; left: 6%;
}

.hub__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 40px 20px;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Header (greeting only — no exit button) ── */
.hub-top {
  position: relative; /* Anker für .hub-exit-hint */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.hub-top__greet {
  font-family: var(--f-display, 'Merriweather', serif);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  text-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
.hub-top__sub {
  margin-top: 8px;
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: clamp(15px, 1.6vw, 19px);
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.01em;
}

/* Big, single-click/dwell exit back to the support-person dashboard. */
.hub-exit {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  padding: 14px 18px;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.32);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}
.hub-exit:hover { background: rgba(0,0,0,0.5); transform: scale(1.04); border-color: rgba(255,255,255,0.5); }
.hub-exit svg, .hub-exit i { width: 40px; height: 40px; }
.hub-exit__label {
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Kiosk lock (Mein Bereich) ──
   When the lock is on, the gaze user cannot leave the hub: the app chrome (top
   statusbar + bottom nav + footer) is hidden, and the only way out is a
   deliberate PRESS-AND-HOLD on the exit badge (pointer/touch only, never
   gaze-dwell). */
body.hub-locked #statusbar,
body.hub-locked .bottom-nav,
body.hub-locked #app-footer { display: none !important; }

.hub-exit--hold { position: relative; overflow: hidden; }
.hub-exit--hold.is-holding {
  background: rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.6);
}
.hub-exit__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  width: 0%;
  background: var(--color-primary-light, #6388ad);
  transition: width 0.06s linear;
  pointer-events: none;
}

/* Erklär-Sprechblase: erscheint, wenn der Halten-Knopf nur kurz angetippt
   wurde — erklärt die richtige Geste (Maus/Finger gedrückt halten). */
.hub-exit-hint {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 10px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 15px;
  line-height: 1.45;
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 5;
}
.hub-exit-hint.is-visible { opacity: 1; }

/* ── Sections ── */
.hub-section {
  margin-top: 22px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Szenen-Sektion braucht keinen flex-grow wenn Favoriten vorhanden */
.hub-section--scenes { flex: 0 0 auto; }
.hub-section__title {
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
  flex-shrink: 0;
}

/* ── Primary action tiles ── */
.hub-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  flex-shrink: 0;
}
.hub-action {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 96px;
  padding: 0 26px;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  color: #fff;
  text-align: left;
  box-shadow: 0 20px 44px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hub-action:hover { box-shadow: 0 28px 60px rgba(0,0,0,0.5), inset 0 0 0 3px rgba(255,255,255,0.25); }
.hub-action--play { background: linear-gradient(135deg, #4D96FF 0%, #2c4d80 100%); }
.hub-action--all { background: linear-gradient(135deg, #6BCB77 0%, #2f7a4a 100%); }
.hub-action__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
}
.hub-action__icon svg, .hub-action__icon i { width: 38px; height: 38px; }
.hub-action__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-action__label {
  font-family: var(--f-display, 'Merriweather', serif);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
}
.hub-action__sub {
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Favourites grid (big launch tiles) ── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  flex: 1;
  min-height: 0;
  align-content: stretch;
  overflow: hidden;
}

/* ── Paginated selection (no scrolling for eye-gaze): fixed grid of tiles,
   big Zurück/Weiter arrows. Each tile = a 2×2 block of the 10×6 gaze grid →
   5 cols × 3 rows = up to 15 per page. The exact column/row count is set
   inline by the screen (gridColsForViewport) so it always matches the page
   size; the values here are the wide-screen default / fallback. ── */
.hub-section--paged { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hub-grid--paged {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-content: stretch;
}
/* Fixed rows divide the height evenly, so tiles keep a consistent size even
   when a page is only partly filled (no more giant stretched tiles). */
.hub-grid--paged .hub-tile,
.hub-grid--paged .hub-scene { min-height: 0; }
.hub-pagination {
  flex-shrink: 0;
  padding: 14px 8px 2px;
  margin-top: auto;
}
.hub-pagination .r-sel-page-btn.is-disabled,
.hub-pagination .r-sel-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
/* On the dark hub, lift the page indicator + arrow contrast. */
.hub-pagination .r-sel-page-indicator { color: rgba(255,255,255,0.92); }
/* MYAREA-GROESSE-2026-10-25: Blättern in „Mein Bereich“ geht mit den Augen → Hausregel „Zurück“ ≈ 220 × 112 (vorher runde
   72–96-px-Knöpfe). Mit Wort, damit klar ist, was passiert. Gilt auch bei schmalem Fenster. */
.hub-pagination .r-sel-page-btn,
.screen-my-selection.hub .hub-pagination .r-sel-page-btn {
  width: 220px; min-width: 220px; height: 112px;
  border-radius: 28px;
  gap: 10px;
  font-family: var(--f-heading, 'Oswald', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
}
.hub-pagination .r-sel-page-btn svg, .hub-pagination .r-sel-page-btn i { width: 40px; height: 40px; }
.hub-pagination .r-sel-page-btn:hover { transform: none; }
/* Stern = Begleitknopf (nur Finger/Maus, kein Verweil-Ziel) → Tippziel ≥ 48 px auch bei schmalem Fenster */
.screen-my-selection.hub .hub-tile__star { min-width: 56px; min-height: 56px; }
.hub-tile {
  position: relative;
  min-height: 160px;
  border: none;
  border-radius: 28px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--tile-color, #4b698c);
  box-shadow: 0 22px 46px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hub-tile:hover {
  /* No scale — the tile must stay put in its grid cell (scaling made it look
     "versetzt" / offset on hover). BERICHT-2026-10-25: Der Ring liegt jetzt INNEN (::after) — außen schnitt
     das Raster (overflow: hidden) Ring und Leuchten ab (Lars 25.10.2026). */
  box-shadow: 0 22px 46px rgba(0,0,0,0.45);
}
.hub-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 5px var(--tile-color, #4b698c), inset 0 0 28px var(--tile-color, #4b698c);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.hub-tile:hover::after, .hub-tile:focus-visible::after { opacity: 1; }
/* Spieldauer auf der Kachel (BERICHT-2026-10-25) */
.hub-tile__dauer {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  pointer-events: none;
}
.hub-tile__dauer svg, .hub-tile__dauer i { width: 18px; height: 18px; }
.hub-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hub-tile:hover .hub-tile__img { transform: scale(1.07); }
.hub-tile__glow { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.72) 100%); }
.hub-tile__body { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.hub-tile__title {
  font-family: var(--f-display, 'Merriweather', serif);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.hub-tile__star {
  position: absolute;
  top: 14px; right: 14px;
  width: 64px; height: 64px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFD93D;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.12s ease;
  z-index: 2;
}
.hub-tile__star:hover { background: rgba(0,0,0,0.62); transform: scale(1.08); }
.hub-tile__star svg, .hub-tile__star i { width: 32px; height: 32px; fill: currentColor; }

/* ── Meine Szenen ── */
.hub-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.hub-scene {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.hub-scene__media { position: relative; height: 180px; background: #16294a; }
.hub-scene__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-scene__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.5);
}
.hub-scene__placeholder svg, .hub-scene__placeholder i { width: 64px; height: 64px; }
.hub-scene__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 18px 14px;
  font-family: var(--f-display, 'Merriweather', serif);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
}

/* Big dwellable action buttons (≥64px tall). */
.hub-scene__actions { display: flex; gap: 2px; }
.hub-scene__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 68px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 18px;
  transition: filter 0.2s ease, transform 0.12s ease;
}
.hub-scene__btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.hub-scene__btn svg, .hub-scene__btn i { width: 26px; height: 26px; }
.hub-scene__btn--play { background: #4D96FF; }
.hub-scene__btn--edit { background: rgba(255,255,255,0.14); }

/* "Neue Szene" tile — dashed, inviting. */
.hub-scene--new {
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 248px;
  border: 3px dashed rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.hub-scene--new:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); transform: scale(1.02); }
.hub-scene__new-icon {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
.hub-scene__new-icon svg, .hub-scene__new-icon i { width: 44px; height: 44px; }
.hub-scene__new-label {
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
}

/* ── Friendly empty states ── */
.hub-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 24px;
  text-align: center;
  border-radius: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.hub-empty--scenes { grid-column: auto; }
.hub-empty__icon {
  display: grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #FFD93D;
}
.hub-empty__icon svg, .hub-empty__icon i { width: 40px; height: 40px; }
.hub-empty__text {
  margin: 0;
  max-width: 36ch;
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}

/* ── Slim sponsor footer strip ── */
.hub-sponsor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 24px;
  background: rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hub-sponsor__label {
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hub-sponsor__mark { display: inline-flex; align-items: center; }
.hub-sponsor__logo { height: 24px; width: auto; opacity: 0.9; }
.hub-sponsor__placeholder {
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}

/* ── Responsive (hub) ── */
@media (max-width: 760px) {
  .hub__inner { padding: 16px 18px 16px; }
  .hub-top { flex-direction: row; margin-bottom: 14px; }
  .hub-top__greet { font-size: clamp(20px, 5vw, 28px); }
  .hub-actions { gap: 12px; }
  .hub-action { min-height: 80px; padding: 0 18px; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hub-scene-grid { grid-template-columns: 1fr; }
  .hub-tile { min-height: 140px; }
  .hub-section { margin-top: 16px; }
}

/* ==========================================================================
   GROSSE-KACHELN-2026-10-05 — „Meine Auswahl“ über den ganzen Bildschirm
   --------------------------------------------------------------------------
   Lars (PC 2000×1100): die Ansicht war ein Kasten von 1200 px Breite
   (#app-content max-width) und 100dvh−150px Höhe, darin 5×3 Mini-Kacheln mit
   28-px-Serifentitel (--f-display), die über den Rand liefen; der Stern lag
   über dem Titel. Jetzt:
   - volle Breite und volle sichtbare Höhe. Die Höhe misst my-selection.js
     (visualViewport → --runner-h, Rückfall wie SICHTHOEHE-2026-10-04) und
     setzt --hub-h = sichtbare Höhe ab Oberkante der Hülle, abzüglich einer
     sichtbaren Unterleiste. Ohne Messung gilt der alte dvh-Rückfall.
   - Raster wird gemessen gewählt (meist 4×2 / 3×2, Handy 2×2), Kacheln groß.
   - Titel in der Überschrift-Schrift (Oswald/DM Sans) auf dunkler Leiste
     unten im Bild, max. 3 Zeilen, wird bei Bedarf kleiner (JS).
   - Stern oben rechts in der Ecke.
   ========================================================================== */
body.hub-noscroll #app-content {
  max-width: none;
  padding: 0;
}
/* base.css hält rechts eine 6-px-Rinne für den Rollbalken frei
   (scrollbar-gutter: stable) — hier wird nie gerollt, also weg damit. */
html:has(body.hub-noscroll) { scrollbar-gutter: auto; overflow: hidden; }
.screen-my-selection.hub {
  height: calc(100vh - 150px);
  height: calc(100dvh - 150px);
  height: var(--hub-h, calc(100dvh - 150px));
  min-height: 0;
  max-height: none;
}
.screen-my-selection.hub .hub__inner {
  max-width: none;
  padding:
    calc(clamp(12px, 2.4vh, 32px) + env(safe-area-inset-top, 0px))
    calc(clamp(16px, 2.6vw, 56px) + env(safe-area-inset-right, 0px))
    calc(clamp(10px, 1.8vh, 24px) + env(safe-area-inset-bottom, 0px))
    calc(clamp(16px, 2.6vw, 56px) + env(safe-area-inset-left, 0px));
}

/* Kopf, „Alle abspielen“ und Blättern wachsen mit. */
.screen-my-selection.hub .hub-top { margin-bottom: clamp(10px, 1.8vh, 24px); }
.screen-my-selection.hub .hub-top__greet { font-size: clamp(26px, min(3.4vw, 5vh), 56px); }
.screen-my-selection.hub .hub-top__sub { font-size: clamp(15px, min(1.5vw, 2.2vh), 24px); }
/* MYAREA-GROESSE-2026-10-25: „Alle abspielen“ wird mit den Augen gewählt → mindestens 96 px hoch (Hausregel Augensteuerung;
   gemessen waren 77 px bei 768 px Fensterhöhe) */
.screen-my-selection.hub .hub-action { min-height: clamp(96px, 12vh, 120px); }
.screen-my-selection.hub .hub-action__label { font-size: clamp(22px, min(2.4vw, 3.6vh), 38px); }
.screen-my-selection.hub .hub-action__sub { font-size: clamp(13px, min(1.3vw, 2vh), 20px); }
.screen-my-selection.hub .hub-section { margin-top: clamp(10px, 2vh, 26px); }
.screen-my-selection.hub .hub-section__title { margin-bottom: clamp(8px, 1.4vh, 16px); }
.screen-my-selection.hub .hub-grid--paged { gap: clamp(12px, 1.4vw, 28px); }
.screen-my-selection.hub .hub-pagination { padding-top: clamp(8px, 1.6vh, 20px); }
/* MYAREA-GROESSE-2026-10-25: Blättern mit den Augen → Hausregel „Zurück“ ≈ 220 × 112 (vorher 72–112 px rund) */
.screen-my-selection.hub .hub-pagination .r-sel-page-btn {
  width: 220px;
  height: 112px;
  min-width: 220px;
}
.screen-my-selection.hub .hub-pagination .r-sel-page-btn svg,
.screen-my-selection.hub .hub-pagination .r-sel-page-btn i { width: 40px; height: 40px; }
.screen-my-selection.hub .hub-pagination .r-sel-page-indicator { font-size: clamp(18px, 2.4vh, 30px); }

/* Kachel: Bild füllt, Titel auf dunkler Leiste unten. */
.hub-grid--paged .hub-tile { border-radius: clamp(18px, 1.6vw, 28px); }
.hub-grid--paged .hub-tile__glow {
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 30%);
}
.hub-grid--paged .hub-tile__body {
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(8px, 1.2vh, 16px) clamp(12px, 1.2vw, 22px);
  background: rgba(5, 11, 26, 0.80);
  text-align: left;
}
.hub-grid--paged .hub-tile__title {
  font-family: var(--f-heading, 'Oswald', 'DM Sans', sans-serif);
  font-weight: 600;
  font-size: var(--hub-title-size, clamp(17px, 1.7vw, 34px));
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: none;
  max-height: 3.6em;             /* = 3 Zeilen */
  overflow: hidden;
  /* Beim Einpassen KEINE Silbentrennung: ein zu langes Wort soll die
     Schrift kleiner machen (JS misst scrollWidth), statt „passen-gers“. */
  overflow-wrap: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
/* Passt der Titel auch mit 14 px nicht → saubere Auslassung nach 3 Zeilen. */
.hub-grid--paged .hub-tile__title.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Stern: oben rechts in der Ecke, Größe passend zur Kachel. */
.hub-grid--paged .hub-tile__star {
  top: clamp(8px, 0.8vw, 14px);
  right: clamp(8px, 0.8vw, 14px);
  width: clamp(44px, 3.2vw, 64px);
  height: clamp(44px, 3.2vw, 64px);
}
.hub-grid--paged .hub-tile__star svg,
.hub-grid--paged .hub-tile__star i { width: 52%; height: 52%; }

/* Niedrige Bildschirme (Handy quer): Kopf kompakt, damit Kacheln groß bleiben. */
@media (max-height: 560px) {
  .screen-my-selection.hub .hub-top__sub,
  .screen-my-selection.hub .hub-section__title,
  .screen-my-selection.hub .hub-action__sub { display: none; }
  .screen-my-selection.hub .hub-top { margin-bottom: 8px; align-items: center; }
  .screen-my-selection.hub .hub-top__greet { font-size: 22px; }
  .screen-my-selection.hub .hub-exit { padding: 6px 12px; gap: 2px; min-width: 72px; border-radius: 16px; }
  .screen-my-selection.hub .hub-exit svg, .screen-my-selection.hub .hub-exit i { width: 24px; height: 24px; }
  .screen-my-selection.hub .hub-exit__label { font-size: 11px; }
  .screen-my-selection.hub .hub-action { min-height: 56px; border-radius: 20px; padding: 0 16px; gap: 12px; }
  .screen-my-selection.hub .hub-action__icon { width: 42px; height: 42px; }
  .screen-my-selection.hub .hub-action__icon svg, .screen-my-selection.hub .hub-action__icon i { width: 24px; height: 24px; }
  .screen-my-selection.hub .hub-action__label { font-size: 20px; }
  .screen-my-selection.hub .hub-section { margin-top: 8px; }
  .screen-my-selection.hub .hub-pagination { padding: 6px 4px 0; }
  .screen-my-selection.hub .hub-pagination .r-sel-page-btn { width: 64px; height: 64px; min-width: 64px; }
}

/* Hoher Kontrast: schwarze Leiste, weißer Rahmen, gelber Stern auf Schwarz. */
.high-contrast .hub-grid--paged .hub-tile { box-shadow: 0 0 0 3px #fff; }
.high-contrast .hub-grid--paged .hub-tile:hover,
.high-contrast .hub-grid--paged .hub-tile:focus-visible { box-shadow: 0 0 0 5px #ffdd00; }
.high-contrast .hub-grid--paged .hub-tile__body { background: #000; border-top: 2px solid #fff; }
.high-contrast .hub-grid--paged .hub-tile__title { color: #fff; }
.high-contrast .hub-grid--paged .hub-tile__star { background: #000; border: 2px solid #ffdd00; color: #ffdd00; }
/* --- css/r-onboarding.css --- */
/* ==========================================================================
   GazeTo — Onboarding screen redesign (AssistUK)
   Full-screen, centred wizard. Statusbar + bottom nav are hidden here.
   ========================================================================== */

.r-onboarding {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(75,105,140,0.10) 0%, rgba(75,105,140,0) 55%),
    var(--color-bg, #f5f5f7);
  padding: 32px 20px;
  box-sizing: border-box;
}

/* Centred stage */
.r-onboarding .onb-stage {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Step indicator (dots) ── */
.r-onboarding .onb-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.r-onboarding .onb-dot {
  width: 10px;
  height: 10px;
  border-radius: 980px;
  background: var(--c-border-strong, #c7ccd6);
  transition: all var(--transition-base, 0.25s ease);
}
.r-onboarding .onb-dot--active {
  width: 30px;
  background: var(--color-primary-dark, #3a5a7c);
}
.r-onboarding .onb-dots__label {
  font-family: var(--font-heading-condensed, 'Oswald', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fg3, #818a99);
  margin-bottom: 22px;
}

/* ── Steps (fade transition) ── */
.r-onboarding .onb-steps {
  width: 100%;
  position: relative;
}
.r-onboarding .onb-step {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.r-onboarding .onb-step--active {
  display: flex;
  animation: onb-fade-in 0.35s var(--ease-out, ease) both;
}
.r-onboarding .onb-step--exit {
  display: flex;
  opacity: 0;
}
@keyframes onb-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Typography (reuse .eyebrow / .page-title / .page-lead) ── */
.r-onboarding .page-title {
  margin: 0 0 12px;
}
.r-onboarding .onb-lead {
  max-width: 48ch;
  margin: 0 auto 28px;
}

/* ── Card (reuse .card, tighten + centre) ── */
.r-onboarding .onb-card {
  width: 100%;
  text-align: left;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 28px;
  box-sizing: border-box;
}

.r-onboarding .onb-field { margin-bottom: 22px; }
.r-onboarding .onb-field:last-child { margin-bottom: 0; }
.r-onboarding .onb-field-label {
  display: block;
  font-family: var(--font-heading-condensed, 'Oswald', sans-serif);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-fg3, #818a99);
  margin-bottom: 10px;
}

/* ── Text input ── */
.r-onboarding .onb-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1.5px solid var(--c-border-strong, #c7ccd6);
  background: var(--c-bg-primary, #fff);
  color: var(--c-fg1, #1d1d1f);
  font-family: var(--f-body, sans-serif);
  font-size: 1.05rem;
  transition: border-color var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease);
}
.r-onboarding .onb-input::placeholder { color: var(--c-fg3, #818a99); }
.r-onboarding .onb-input:focus {
  outline: none;
  border-color: var(--color-primary, #4b698c);
  box-shadow: 0 0 0 4px rgba(75,105,140,0.15);
}
.r-onboarding .onb-input--error {
  border-color: var(--c-danger, #d32f2f);
  box-shadow: 0 0 0 4px rgba(211,47,47,0.15);
  animation: onb-shake 0.4s ease;
}
@keyframes onb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Error state stays visible via border + box-shadow — only the shake stops. */
  .r-onboarding .onb-input--error { animation: none; }
}

/* ── Choice rows (input method / theme) ── */
.r-onboarding .onb-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.r-onboarding .onb-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 980px;
  background: var(--c-bg-primary, #fff);
  border: 1.5px solid var(--c-border-strong, #c7ccd6);
  font-family: var(--f-body, sans-serif);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--c-fg1, #1d1d1f);
  cursor: pointer;
  transition: all var(--transition-base, 0.2s ease);
}
.r-onboarding .onb-choice:hover { background: var(--c-bg-tertiary, #e3e6ec); }
.r-onboarding .onb-choice svg,
.r-onboarding .onb-choice i { width: 20px; height: 20px; }
.r-onboarding .onb-choice--active {
  background: var(--color-primary-dark, #3a5a7c);
  border-color: transparent;
  color: #fff;
}
.r-onboarding .onb-choice--active:hover { background: var(--color-primary, #4b698c); }
.r-onboarding .onb-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45);
}

/* ── Language grid ── */
.r-onboarding .onb-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: 300px; /* 101 Sprachen: mehr sichtbare Zeilen + Suchfeld darüber */
  overflow-y: auto;
  padding-right: 2px;
  /* Die letzte Zeile lag hinter der festen Fussleiste: Gemessen am 15.08.2026
     auf einem 375er iPhone stand "isiZulu" bei 700..764, die Leiste beginnt
     bei 748 - 16 px steckten dahinter, und das Gitter war dabei schon an
     seinem Ende (es hatte keinen unteren Rand). Der Rand traegt jetzt genau
     die Hoehe der Leiste, damit die letzte Sprache immer freizurollen ist. */
  padding-bottom: 64px;
}
.r-onboarding .lang-search {
  margin-bottom: 10px;
  max-width: 320px;
}
/* SVG-Flagge (assets/flags/) — ersetzt das frühere Emoji */
.r-onboarding .onb-lang__flag-img {
  width: 30px;
  height: 21px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.r-onboarding .onb-lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 64px; /* Dwell-Target-Spezifikation: >= 64px */
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--c-bg-primary, #fff);
  border: 1.5px solid var(--c-border, #e4e7ee);
  font-family: var(--f-body, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-fg1, #1d1d1f);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-base, 0.2s ease);
}
.r-onboarding .onb-lang:hover {
  background: var(--c-bg-tertiary, #e3e6ec);
  border-color: var(--c-border-strong, #c7ccd6);
}
.r-onboarding .onb-lang--active {
  border-color: var(--color-primary, #4b698c);
  box-shadow: 0 0 0 3px rgba(75,105,140,0.14);
  color: var(--color-primary-dark, #3a5a7c);
}
.r-onboarding .onb-lang__flag { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.r-onboarding .onb-lang__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── How-it-works (step 2) ── */
.r-onboarding .onb-howto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.r-onboarding .onb-howto__step {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
}
.r-onboarding .onb-howto__icon {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--color-primary-bg, #eef2f7);
  color: var(--color-primary-dark, #3a5a7c);
}
.r-onboarding .onb-howto__icon svg,
.r-onboarding .onb-howto__icon i { width: 26px; height: 26px; }
.r-onboarding .onb-howto__num {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-orange, #f97316);
  color: #fff;
  font-family: var(--f-heading, sans-serif);
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--c-bg-primary, #fff);
}
.r-onboarding .onb-howto__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--c-fg1, #1d1d1f);
}

/* ── Action bar ── */
.r-onboarding .onb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.r-onboarding .onb-primary,
.r-onboarding .onb-back { flex: 1 1 auto; max-width: 340px; }
.r-onboarding .onb-back { flex: 0 1 auto; }
.r-onboarding .onb-primary:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
  box-shadow: 0 8px 24px rgba(26,58,106,0.2);
}

@media (max-width: 520px) {
  .r-onboarding { padding: 24px 14px; }
  .r-onboarding .onb-card { padding: 18px; }
  .r-onboarding .onb-actions { flex-direction: column-reverse; }
  .r-onboarding .onb-primary,
  .r-onboarding .onb-back { width: 100%; max-width: none; }
}

/* ── QA-2026-10-25: Sprachsuche volle Breite; Vorlese-Knopf (oben am Rand,
   absolut) lag am Handy/Tablet über der Schrittanzeige → Abstand oben. */
.r-onboarding .lang-search { width: 100%; }
@media (max-width: 1100px) {
  .r-onboarding .onb-dots { margin-top: 56px; }
}
/* --- css/r-detail.css --- */
/* GazeTo — detail screen redesign styles */

/* ── Header typography (AssistUK look) ──
   The header area is a flex column with gap:8px, so reset the eyebrow's
   default bottom margin and tighten its spacing to the title. */
.screen-activity-detail .detail-eyebrow {
  margin: 0;
}

.screen-activity-detail .detail-name {
  font-family: var(--f-display, 'Merriweather', Georgia, serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-fg1, var(--color-text, #1d1d1f));
  margin: 0;
  text-wrap: balance;
}

/* ── Stufe chip on the thumbnail (keep absolute overlay placement) ── */
.screen-activity-detail .detail-stufe-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ── Top-bar buttons sizing — the shared pill/primary buttons are tall
   (min-height:56px); scale them down a touch for the compact toolbar. ── */
.screen-activity-detail .detail-topbar .btn-ghost-pill,
.screen-activity-detail .detail-topbar .btn-primary-blue {
  min-height: 48px;
  padding: 11px 22px;
  font-size: 16px;
}

.screen-activity-detail .detail-topbar .detail-start-btn {
  padding: 11px 28px;
}

/* ── Setting-cell title icons (Lucide) — small, inline, brand-tinted ── */
.screen-activity-detail .setting-cell__title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.screen-activity-detail .setting-cell__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary, #4b698c);
}

.screen-activity-detail .setting-cell__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ── "Das wird geübt" check bullets (Lucide) ── */
.screen-activity-detail .detail-goal-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.screen-activity-detail .detail-goal-check svg {
  width: 15px;
  height: 15px;
  display: block;
  stroke-width: 3;
}

/* ── Kopfleiste Detail auf dem iPhone (IPHONE-DETAIL-2026-10-04) ─────────────
   components.css versteckt ≤600 px die Texte von Zurück/Hilfe — die Regel
   (:not(.btn--primary)) traf aber auch „Starten“ (.btn-primary-blue), und die
   160 px Mindestbreite von Hilfe/Starten schob „Starten“ rechts aus dem Bild;
   „Zurück“ wurde auf 27 px gequetscht (Pfeil weg). Jetzt: Zurück und Hilfe
   als runde 48-px-Symbolknöpfe, „Starten“ mit Text, alles in der Zeile. */
@media (max-width: 600px) {
  .screen-activity-detail .detail-topbar .detail-back-btn,
  .screen-activity-detail .detail-topbar .detail-action-btn:not(.detail-start-btn) {
    flex: 0 0 auto;
    min-width: 48px;
    width: 48px;
    padding: 0 !important;
    justify-content: center;
  }
  .screen-activity-detail .detail-topbar .detail-start-btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 11px 22px !important;
  }
  .screen-activity-detail .detail-topbar .detail-start-btn span { display: inline !important; }
  .screen-activity-detail .detail-topbar svg { flex-shrink: 0; }
}

/* --- css/r-stufedetail.css --- */
/* ==========================================================================
   GazeTo — Stufe Detail screen (AssistUK redesign)
   Banner + collapsible info cards + activity tile grid + prev/next nav.
   Relies on shared components in redesign.css (.page-wide, .section,
   .section__title, .eyebrow, .stufe-banner, .card, .act-grid, .act-tile,
   .btn-ghost-pill).
   ========================================================================== */

.screen-stufe-detail {
  padding: 28px 24px 64px;
}
@media (max-width: 700px) {
  .screen-stufe-detail { padding: 18px 14px 56px; }
}

/* ── Back button ── */
.r-sd-back {
  margin-bottom: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 48px;
}

/* ── Info section ── */
.r-sd-info { margin-top: 40px; }

.r-sd-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-sd-card {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}
.r-sd-card:hover { transform: none; box-shadow: var(--shadow-md); }

/* Header acts as the expand/collapse toggle */
.r-sd-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--c-fg1);
  min-height: 64px;
  transition: background var(--transition-base);
}
.r-sd-card__head:hover { background: var(--c-bg-secondary); }

.r-sd-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
}
.r-sd-card__icon svg,
.r-sd-card__icon i { width: 22px; height: 22px; }

.r-sd-card__title {
  flex: 1;
  min-width: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.2;
  margin: 0;
}

.r-sd-card__chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--c-fg3);
  transition: transform var(--ease-out, ease) 0.25s;
}
.r-sd-card__chevron svg,
.r-sd-card__chevron i { width: 22px; height: 22px; }
.r-sd-card.is-open .r-sd-card__chevron { transform: rotate(180deg); }

/* Body collapsed by default; revealed when card has .is-open */
.r-sd-card__body {
  display: none;
  padding: 0 24px 22px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-fg2);
  white-space: pre-line;
}
.r-sd-card.is-open .r-sd-card__body { display: block; }

.r-sd-card__body .r-sd-link-item { margin: 0 0 10px; }
.r-sd-card__body a {
  color: var(--c-accent);
  font-weight: 600;
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.r-sd-card__body a:hover { color: var(--c-accent-2); }

/* ── Activities ── */
.r-sd-acts { margin-top: 48px; }

/* ── Prev/next stufe navigation ── */
.r-sd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
}
.r-sd-nav__btn { min-height: 52px; }
.r-sd-nav__btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}
@media (max-width: 480px) {
  .r-sd-nav { flex-direction: column; align-items: stretch; }
  .r-sd-nav__btn { width: 100%; }
}

/* --- css/r-runner.css --- */
/* ==========================================================================
   GazeTo — Activity Runner + Pause overlay redesign (AssistUK)
   Loaded AFTER components.css/redesign.css so it restyles the runner HUD,
   the pause overlay panel, the volume sliders and the floating buttons onto
   the AssistUK foundation (blue accent, glass panels, big touch targets).
   PRESENTATION ONLY — no behaviour changes. All markup/handlers live in
   screens/activity-runner.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Floating HUD buttons — Pause + Quick-End (top-right)
   ≥56px circular glass buttons, clearly visible over any activity bg.
   -------------------------------------------------------------------------- */
.screen-activity-runner .runner-pause,
.screen-activity-runner .runner-end {
  position: fixed;
  top: 20px;
  z-index: 2050;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(20, 23, 29, 0.55);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s var(--ease-out, ease), background 0.15s ease,
              border-color 0.15s ease;
}

.screen-activity-runner .runner-pause { right: 88px; }
.screen-activity-runner .runner-end {
  right: 20px;
}

.screen-activity-runner .runner-pause i,
.screen-activity-runner .runner-end i {
  width: 26px;
  height: 26px;
}

.screen-activity-runner .runner-pause:hover {
  background: rgba(75, 105, 140, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.08);
}
.screen-activity-runner .runner-end:hover {
  background: rgba(75, 105, 140, 0.85);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.08);
}
.screen-activity-runner .runner-pause:focus-visible,
.screen-activity-runner .runner-end:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   TTS "Vorlesen" button — top-center, only visible for quiz activities that
   expose a getCurrentPrompt() method. Large pill shape, eye-gaze friendly.
   -------------------------------------------------------------------------- */
.screen-activity-runner .runner-tts-btn {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2050;
  min-width: 160px;
  height: 60px;
  padding: 0 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(75, 105, 140, 0.75);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.15s var(--ease-out, ease), background 0.15s ease,
              border-color 0.15s ease;
}
.screen-activity-runner .runner-tts-btn i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.screen-activity-runner .runner-tts-btn:hover {
  background: rgba(75, 105, 140, 0.95);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%) scale(1.06);
}
.screen-activity-runner .runner-tts-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* „Schließen" im Auswahl-Modus: seit KNOPFBEREICH-2026-10-05 der Stopp-Knopf
   oben rechts (Regeln am Dateiende), kein schwebender Knopf unten links mehr. */

/* --------------------------------------------------------------------------
   Pause overlay — full-screen glass scrim + centred AssistUK panel
   -------------------------------------------------------------------------- */
.pause-overlay {
  background: rgba(15, 17, 22, 0.86) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 24px !important;
  overflow-y: auto !important;
}

.pause-overlay__panel {
  width: 100% !important;
  max-width: 480px !important;
  min-width: 0 !important;
  gap: 14px !important;
  padding: 32px 30px 26px !important;
  border-radius: 28px;
  /* Fixed dark panel — all text/buttons inside are designed for a dark surface.
     (Do NOT use --c-bg-glass: it resolves light in the light theme, which made
     the white text unreadable.) */
  background: rgba(22, 26, 33, 0.96) !important;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Title — Oswald eyebrow look, centred */
.pause-overlay__title {
  margin: 0 0 6px !important;
  font-family: var(--f-heading, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 30px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff !important;
}
/* Subtitle under the title — readable light grey on the dark panel */
.pause-overlay .pause-overlay__sub {
  margin: 0 0 4px !important;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* --------------------------------------------------------------------------
   Pause action buttons — big touch targets, blue primary, glass ghosts
   -------------------------------------------------------------------------- */
.pause-overlay .pause-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 60px !important;
  gap: 12px !important;
  font-family: var(--f-body, 'DM Sans', sans-serif);
  font-weight: 700 !important;
  font-size: 1.18rem !important;
  padding: 14px 28px !important;
  border-radius: 16px !important;
  justify-content: center;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease,
              border-color 0.15s ease;
}
.pause-overlay .pause-btn i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.pause-overlay .pause-btn:active { transform: scale(0.98); }
.pause-overlay .pause-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Primary "Fortsetzen" — solid blue accent */
.pause-overlay .pause-btn.btn--primary {
  background: var(--c-accent, #4b698c) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(75, 105, 140, 0.45);
}
.pause-overlay .pause-btn.btn--primary:hover {
  background: var(--c-accent-2, #3a5a7c) !important;
}

/* A 2-up row for the secondary actions (Einstellungen / Beenden) */
.pause-overlay .pause-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.pause-overlay .pause-actions-row .pause-btn {
  flex: 1;
  min-width: 0 !important;
}

/* Ghost "Einstellungen" — glass outline */
.pause-overlay .pause-btn.btn--outline {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.32) !important;
}
.pause-overlay .pause-btn.btn--outline:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Danger "Beenden" — restrained red outline */
.pause-overlay .pause-btn.btn--danger {
  background: rgba(220, 38, 38, 0.14) !important;
  color: #fca5a5 !important;
  border: 2px solid rgba(248, 113, 113, 0.55) !important;
}
.pause-overlay .pause-btn.btn--danger:hover {
  background: rgba(220, 38, 38, 0.28) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Volume block — readable grouped sliders. The 180px label column keeps the
   longest label ("Hintergrundmusik") on one line without overlapping the
   slider (the historic width:180px fix, preserved as a real CSS rule).
   -------------------------------------------------------------------------- */
.pause-audio-box {
  width: 100%;
  margin-top: 8px;
  padding: 18px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
}
.pause-audio-box .pause-audio-title {
  font-family: var(--f-heading, 'Oswald', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.pause-audio-box .pause-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pause-audio-box .pause-audio-label {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}
.pause-audio-box .pause-audio-mute {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.pause-audio-box .pause-audio-mute:hover { background: rgba(255, 255, 255, 0.12); }
.pause-audio-box .pause-audio-mute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.pause-audio-box .pause-audio-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* The slider thumb/track styling lives in components.css (.pause-volume-slider).
   Here we only ensure the accent picks up the blue and the flex shrink works. */
.pause-overlay .pause-volume-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--c-accent, #4b698c);
}
.pause-audio-box .pause-audio-readout {
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.pause-audio-box .pause-audio-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Brand footer (QR → logo → URL → tagline) — gentle separator
   -------------------------------------------------------------------------- */
.pause-overlay .pause-brand {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Dark theme — panel sits over #000 already; nudge contrast a touch.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .pause-overlay__panel {
  background: rgba(20, 23, 29, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .pause-overlay .pause-btn.btn--primary {
  background: var(--c-accent, #7ea7d4) !important;
  color: #0f1116 !important;
  box-shadow: 0 8px 22px rgba(126, 167, 212, 0.4);
}
[data-theme="dark"] .pause-overlay .pause-btn.btn--primary:hover {
  background: var(--c-accent-2, #a3c0e0) !important;
}

/* --------------------------------------------------------------------------
   High-contrast theme (WCAG AAA) — black panel, yellow accent, white borders.
   -------------------------------------------------------------------------- */
[data-theme="contrast"] .pause-overlay,
.high-contrast .pause-overlay {
  background: rgba(0, 0, 0, 0.96) !important;
}
[data-theme="contrast"] .pause-overlay__panel,
.high-contrast .pause-overlay__panel {
  background: #000;
  border: 2px solid #fff;
  box-shadow: none;
}
[data-theme="contrast"] .pause-overlay__title,
.high-contrast .pause-overlay__title { color: #fff !important; }

[data-theme="contrast"] .pause-overlay .pause-btn.btn--primary,
.high-contrast .pause-overlay .pause-btn.btn--primary {
  background: #ffd60a !important;
  color: #000 !important;
  box-shadow: none;
}
[data-theme="contrast"] .pause-overlay .pause-btn.btn--outline,
.high-contrast .pause-overlay .pause-btn.btn--outline {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
[data-theme="contrast"] .pause-overlay .pause-btn.btn--danger,
.high-contrast .pause-overlay .pause-btn.btn--danger {
  background: #000 !important;
  color: #ffd60a !important;
  border: 2px solid #ffd60a !important;
}
[data-theme="contrast"] .pause-audio-box,
.high-contrast .pause-audio-box {
  border-color: #fff;
}
[data-theme="contrast"] .pause-overlay .pause-volume-slider,
.high-contrast .pause-overlay .pause-volume-slider {
  accent-color: #ffd60a;
}
[data-theme="contrast"] .screen-activity-runner .runner-pause,
.high-contrast .screen-activity-runner .runner-pause {
  background: #000;
  border: 2px solid #ffd60a;
  color: #ffd60a;
}
[data-theme="contrast"] .screen-activity-runner .runner-end,
.high-contrast .screen-activity-runner .runner-end {
  background: #000;
  border: 2px solid #ffd60a;
  color: #ffd60a;
}

/* --------------------------------------------------------------------------
   Reduced motion — drop hover scale/transitions for sensitive users.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .screen-activity-runner .runner-pause,
  .screen-activity-runner .runner-end,
  .pause-overlay .pause-btn,
  .pause-audio-box .pause-audio-mute {
    transition: none;
  }
  .screen-activity-runner .runner-pause:hover,
  .screen-activity-runner .runner-end:hover { transform: none; }
}

/* Small screens — let the 2-up row wrap if very narrow */
@media (max-width: 360px) {
  .pause-overlay .pause-actions-row { flex-direction: column; }
  .pause-audio-box .pause-audio-label { width: 140px; }
}

/* ── Control hint (eye-gaze vs. support-person), shown briefly at start ── */
.runner-ctrl-hint {
  position: absolute;
  left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1900;
  display: flex; align-items: center; gap: 8px;
  max-width: min(92vw, 640px);
  padding: 9px 16px;
  background: rgba(26, 58, 106, 0.86);
  color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 8px 26px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: runnerCtrlIn .3s ease;
  pointer-events: none;
}
.runner-ctrl-hint i, .runner-ctrl-hint svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .95; }
.runner-ctrl-hint__sep { width: 1px; height: 16px; background: rgba(255,255,255,0.35); margin: 0 4px; }
.runner-ctrl-hint__helper { opacity: 0.92; font-weight: 500; }
.runner-ctrl-hint--out { animation: runnerCtrlOut .4s ease forwards; }
@keyframes runnerCtrlIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes runnerCtrlOut { to { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.high-contrast .runner-ctrl-hint { background: #000; border: 2px solid #fff; }

/* ── Aufgaben-Karte beim Start (26.09.2026) ─────────────────────────────────
   Sagt kurz, was zu tun ist. Mittig oben, unter Logo und Pause/Stopp, weit
   weg vom Knopf „Ton einschalten" (unten mittig). Nie anwählbar
   (pointer-events: none) — das Spiel läuft darunter weiter. */
.runner-aufgabe {
  position: fixed;
  left: 50%;
  top: max(140px, 18vh);
  transform: translateX(-50%);
  z-index: 2015;               /* über Canvas (2001) und Fluid (2002), unter Pause (2020) */
  width: min(92vw, 640px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 22px;
  background: rgba(16, 32, 60, 0.84);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
  animation: runnerAufgabeIn .35s ease;
}
.runner-aufgabe__symbol {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #facc15;
  color: #1a3a6a;
}
.runner-aufgabe__symbol svg, .runner-aufgabe__symbol i { width: 32px; height: 32px; }
.runner-aufgabe__inhalt { min-width: 0; }
.runner-aufgabe__name {
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fde68a; margin-bottom: 4px;
}
.runner-aufgabe__text {
  font-size: clamp(1.2rem, 4.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.3;
}
/* Unten statt oben (act.aufgabeKarte = 'unten'): für Aktivitäten, deren
   Spielinhalt oben liegt. Über dem Steuer-Hinweis (bottom 24 px, ~44 px hoch);
   steht der Knopf „Ton einschalten" (unten mittig, seit 27.09.2026 am Rand) da, rückt sie darüber. */
.runner-aufgabe--unten {
  top: auto;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.screen-activity-runner:has(.runner-ton-knopf) .runner-aufgabe--unten { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
/* Knopf „Ton einschalten" sitzt unten mittig (bis ~84 px): Steuer-Hinweis darüber */
.screen-activity-runner:has(.runner-ton-knopf) .runner-ctrl-hint { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.runner-aufgabe--aus { animation: runnerAufgabeAus .4s ease forwards; }
@keyframes runnerAufgabeIn { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes runnerAufgabeAus { to { opacity: 0; transform: translateX(-50%) translateY(-12px); } }
/* Reduzierte Bewegung: ohne Ein-/Ausblenden */
.runner-aufgabe--ruhig, .reduced-motion .runner-aufgabe { animation: none; }
@media (prefers-reduced-motion: reduce) { .runner-aufgabe { animation: none; } }
/* Klar-Modus (CVI) und Kontrast: schwarz, weiß, gelber Rand */
.runner-aufgabe--klar,
.high-contrast .runner-aufgabe,
[data-theme="contrast"] .runner-aufgabe {
  background: #000;
  border: 4px solid #ffe14d;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.runner-aufgabe--klar .runner-aufgabe__name,
.high-contrast .runner-aufgabe__name { color: #ffe14d; }

/* ── Vorlesen-Knopf auf schmalen Bildschirmen (26.09.2026) ──────────────────
   Mittig oben lag er bei 390 px Breite über der Pause-Taste. Schmal: runder
   Knopf nur mit Symbol, links neben Pause (Pause beginnt bei right 88px). */
@media (max-width: 699px) {
  .screen-activity-runner .runner-tts-btn {
    left: auto;
    right: 156px;
    transform: none;
    min-width: 0;
    width: 60px;
    padding: 0;
    border-radius: 50%;
  }
  .screen-activity-runner .runner-tts-btn span { display: none; }
  .screen-activity-runner .runner-tts-btn:hover { transform: scale(1.06); }
}


/* ── Sichtbare Höhe statt 100vh (SICHTHOEHE-2026-10-04, iPad Safari) ─────────
   components.css setzt Runner und Canvas auf 100vh. In Safari ist 100vh die
   Höhe ohne Adress-/Werkzeugleiste → unten lag ein Streifen der Bühne samt
   Knöpfen (Achterbahn: „Ansicht“, Weichen-Karten) hinter der Leiste.
   Reihenfolge = Rückfall: 100vh → 100dvh → --runner-h (visualViewport, aus
   screens/activity-runner.js). Unten/rechts fest an den Rand: kennt ein alter
   Safari weder dvh noch die Variable, füllt `height:auto` genau den Bereich. */
.screen-activity-runner {
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: var(--runner-h, 100dvh) !important;
}
.runner-canvas {
  height: 100vh;
  height: 100dvh;
  height: var(--runner-h, 100dvh);
}
.pause-overlay {
  height: 100vh !important;
  height: 100dvh !important;
  height: var(--runner-h, 100dvh) !important;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Pause-Fenster auf dem iPhone (IPHONE-PAUSE-2026-10-04) ──────────────────
   Baut auf SICHTHOEHE-2026-10-04 auf (Höhe der Pause-Ebene = --runner-h).
   1. Mittig zentriert per justify-content schnitt ein Fenster, das höher ist
      als der Bildschirm, OBEN ab — dorthin ließ sich nicht scrollen (auch iPad
      quer und PC: Titel fehlte). Jetzt oben beginnen; margin:auto am Fenster
      zentriert weiter, solange es passt (Tablet/PC sehen gleich aus).
   2. Lucide macht aus <i> ein <svg>: die alte Regel `.pause-btn i` griff nicht,
      das Symbol bei „Einstellungen“ schrumpfte auf Punktgröße. */
.pause-overlay {
  justify-content: flex-start !important;
  padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
}
.pause-overlay__panel {
  margin-top: auto;
  margin-bottom: auto;
  flex-shrink: 0;
}
.pause-overlay .pause-btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Schmal (Handy hoch) oder niedrig (Handy quer): Pause/Stopp-Kreise oben
   rechts lagen ÜBER dem Fenster (z-index 2050 > 2020) und verdeckten
   „Fortsetzen“. Solange das Fenster offen ist, ausblenden — „Fortsetzen“ und
   „Stopp“ stehen im Fenster selbst. */
@media (max-width: 699px), (max-height: 500px) {
  .screen-activity-runner:has(.pause-overlay:not(.pause-overlay--hidden)) .runner-pause,
  .screen-activity-runner:has(.pause-overlay:not(.pause-overlay--hidden)) .runner-end,
  .screen-activity-runner:has(.pause-overlay:not(.pause-overlay--hidden)) .runner-tts-btn {
    visibility: hidden;
  }
}

/* Handy hoch: Fenster fast randlos, Knöpfe untereinander, Regler mit Schiene. */
@media (max-width: 560px) {
  .pause-overlay {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .pause-overlay__panel {
    padding: 22px 16px 18px !important;
    gap: 12px !important;
    border-radius: 22px;
  }
  .pause-overlay__title { font-size: 26px !important; }
  /* „Einstellungen“ passte nicht neben „Stopp“: untereinander, volle Breite */
  .pause-overlay .pause-actions-row { flex-direction: column; }
  .pause-overlay .pause-btn {
    min-height: 56px !important;
    padding: 12px 16px !important;
    font-size: 1.1rem !important;
    white-space: normal;
    line-height: 1.2;
  }
  .pause-audio-box { padding: 14px 12px !important; }
  /* Zeile = Beschriftung oben (volle Breite), darunter Schiene + Zahl.
     Vorher 180 px feste Beschriftung → Schiene 0 px breit, „An“ ragte raus. */
  .pause-audio-box .pause-audio-row { flex-wrap: wrap; row-gap: 2px; }
  .pause-audio-box .pause-audio-label {
    width: auto;
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    font-size: 15px;
  }
  .pause-overlay .pause-volume-slider {
    flex: 1 1 0;
    min-width: 120px;
    margin-left: 8px;
  }
  .pause-audio-box .pause-audio-readout { min-width: 52px; font-size: 15px; }
  /* Vorlesen-Zeile hat keinen Regler: Schalter bleibt rechts in derselben Zeile */
  .pause-audio-box .pause-audio-row:has(.pause-tts-schalter) .pause-audio-label { flex: 1 1 auto; }
  .pause-audio-box .pause-tts-schalter { flex: 0 0 auto; margin-left: auto; }
  .pause-audio-box .pause-audio-hint { font-size: 12px; }
}

/* ── Handy: Regler-Tippziel + Aufgaben-Karte quer (IPHONE-AUFGABE-2026-10-04) ──
   Regler waren nur 32 px hoch (inline aus activity-runner.js) → 44 px.
   Handy quer (≤500 px hoch): die Aufgaben-Karte begann bei 140 px und lief
   unten aus dem Bild (3D-Aktivitäten mit langem Text). Höher ansetzen,
   kleiner setzen, nie höher als der sichtbare Bereich. */
@media (max-width: 699px), (max-height: 500px) {
  .pause-overlay .pause-volume-slider { height: 44px !important; }
}
@media (max-height: 500px) {
  .runner-aufgabe {
    top: 72px;
    width: min(84vw, 640px);
    max-height: calc(var(--runner-h, 100dvh) - 84px);
    overflow: hidden;
    align-items: flex-start;   /* zu lang: unten kappen, Titel bleibt sichtbar */
    gap: 12px;
    padding: 10px 14px;
  }
  .runner-aufgabe--unten { top: auto; }
  .runner-aufgabe__symbol { width: 44px; height: 44px; }
  .runner-aufgabe__symbol svg, .runner-aufgabe__symbol i { width: 26px; height: 26px; }
  .runner-aufgabe__name { font-size: 0.85rem; margin-bottom: 2px; }
  .runner-aufgabe__text { font-size: 1rem; line-height: 1.22; }
  .runner-aufgabe__knoepfe { gap: 8px; }
  .runner-aufgabe__knopf { width: 48px; height: 48px; }
}

/* ── Knopfbereich oben rechts (KNOPFBEREICH-2026-10-05) ───────────────────────
   Lars (aus Grid 3, Auswahl-Modus): „Schließen liegt oft über Geschwindigkeit
   einstellen". Der große „Schließen" schwebte unten links über den Bedien-
   elementen der Aktivität (Rennen „Langsamer", Bagger …). Jetzt gilt EIN fester
   Bereich oben rechts für alle Knöpfe der Hülle:
     --runner-knoepfe-breite  Abstand vom rechten Rand, den Aktivitäten freihalten
     --runner-knoepfe-hoehe   Höhe ab Oberkante
   Gelesen von BaseActivity.kopf() (Kopfzeile, Münzbeutel) und von der Bühne
   (_shared_stage, z. B. Hupe im Rennen). Normal: Pause + Stopp (wie bisher,
   150 × 80). Auswahl-Modus: Stopp wird zum beschrifteten „Schließen" (Blick-
   Verweilen, 64 px hoch), Pause rückt links daneben. */
.screen-activity-runner {
  --runner-knoepfe-breite: 150px;
  --runner-knoepfe-hoehe: 80px;
}
.screen-activity-runner.runner--auswahl {
  --runner-knoepfe-breite: 332px;
  --runner-knoepfe-hoehe: 124px;
}
.screen-activity-runner.runner--auswahl .runner-pause {
  top: 36px;
  right: 252px;
  width: 64px;
  height: 64px;
}
/* 23.10.2026 (Lars: „Schließen muss vertikal größer sein"): 64 → 96 px hoch */
.screen-activity-runner .runner-end.runner-end--schliessen {
  right: 20px;
  width: 220px;
  height: 96px;
  min-height: 96px;
  padding: 0 20px;
  gap: 12px;
  border-radius: 48px;
  background: #4b698c;
  border: 4px solid #fff;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(75, 105, 140, 0.4);
}
.screen-activity-runner .runner-end--schliessen svg,
.screen-activity-runner .runner-end--schliessen i { width: 34px; height: 34px; flex-shrink: 0; }
.screen-activity-runner .runner-end--schliessen .runner-end__wort {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-activity-runner .runner-end.runner-end--schliessen:hover {
  background: #3a5a7c;
  border-color: #fff;
  transform: scale(1.05);
}
.screen-activity-runner .runner-end--schliessen:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
[data-theme="contrast"] .screen-activity-runner .runner-end.runner-end--schliessen,
.high-contrast .screen-activity-runner .runner-end.runner-end--schliessen {
  background: #000;
  border-color: #ffe14d;
  color: #fff;
}
/* Schmal (Handy hoch): nur das Zeichen, runder 80-px-Knopf */
@media (max-width: 699px) {
  .screen-activity-runner.runner--auswahl { --runner-knoepfe-breite: 190px; --runner-knoepfe-hoehe: 108px; }
  .screen-activity-runner .runner-end.runner-end--schliessen { width: 80px; height: 80px; min-height: 80px; padding: 0; border-radius: 50%; }
  .screen-activity-runner .runner-end--schliessen .runner-end__wort { display: none; }
  .screen-activity-runner.runner--auswahl .runner-pause { top: 28px; right: 110px; }
  .screen-activity-runner.runner--auswahl .runner-tts-btn { right: 186px; }
}

/* ── Begleitknöpfe ruhen (BEGLEITKNOEPFE-2026-10-23) ──────────────────────────
   Pause und Beenden gehören der Begleitperson und sollen den Blick der Person
   nicht anziehen. activity-runner.js setzt nach der Einstellung begleitKnoepfe
   runner--begleit-ruhe + runner--begleit-aus|dezent; ein Tipp in den
   Knopfbereich setzt runner--begleit-wach (5 s, beim Start 3 s). „Schließen"
   im Auswahl-Modus (runner-end--schliessen) ruht nie. */
.screen-activity-runner.runner--begleit-ruhe .runner-pause,
.screen-activity-runner.runner--begleit-ruhe .runner-end:not(.runner-end--schliessen) {
  transition: opacity 0.6s ease, transform 0.15s ease, background 0.15s ease;
}
.screen-activity-runner.runner--begleit-aus .runner-pause,
.screen-activity-runner.runner--begleit-aus .runner-end:not(.runner-end--schliessen) {
  opacity: 0;
  pointer-events: none;
}
.screen-activity-runner.runner--begleit-dezent .runner-pause,
.screen-activity-runner.runner--begleit-dezent .runner-end:not(.runner-end--schliessen) {
  opacity: 0.25;
  pointer-events: none;
  box-shadow: none;
}
.screen-activity-runner.runner--begleit-ruhe.runner--begleit-wach .runner-pause,
.screen-activity-runner.runner--begleit-ruhe.runner--begleit-wach .runner-end,
.screen-activity-runner.runner--begleit-ruhe .runner-pause:focus-visible,
.screen-activity-runner.runner--begleit-ruhe .runner-end:focus-visible,
.screen-activity-runner.runner--begleit-ruhe:has(.pause-overlay:not(.pause-overlay--hidden)) .runner-pause,
.screen-activity-runner.runner--begleit-ruhe:has(.pause-overlay:not(.pause-overlay--hidden)) .runner-end {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .screen-activity-runner.runner--begleit-ruhe .runner-pause,
  .screen-activity-runner.runner--begleit-ruhe .runner-end { transition: none; }
}
body.reduced-motion .screen-activity-runner.runner--begleit-ruhe .runner-pause,
body.reduced-motion .screen-activity-runner.runner--begleit-ruhe .runner-end { transition: none; }

/* Vollbild-Schalter im Pausenfenster */
.pause-overlay .pause-vollbild { width: 100%; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .screen-activity-runner .runner-end.runner-end--schliessen:hover { transform: none; }
}

/* --- css/r-legal.css --- */
/* ==========================================================================
   GazeTo — Legal screens (Impressum / Datenschutz / AGB)
   ========================================================================== */

/* ── Page scaffold ── */
.screen-legal {
  padding: 24px 24px 80px;
  max-width: 760px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Back button ── */
.legal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 12px;
  margin-bottom: 20px;
  border: none;
  border-radius: 40px;
  background: var(--c-bg-secondary, #f3f6fb);
  color: var(--c-text-secondary, #555);
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
  min-height: 44px;
}
.legal-back-btn:hover,
.legal-back-btn:focus-visible {
  background: var(--c-bg-hover, #e6ecf5);
  outline: none;
}
.legal-back-btn [data-lucide],
.legal-back-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Tab navigation ── */
.legal-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--c-border, rgba(0, 0, 0, 0.08));
}
.legal-tab {
  padding: 9px 18px;
  border: 2px solid transparent;
  border-radius: 40px;
  background: var(--c-bg-secondary, #f3f6fb);
  color: var(--c-text-secondary, #555);
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  min-height: 44px;
}
.legal-tab:hover,
.legal-tab:focus-visible {
  background: var(--c-bg-hover, #e6ecf5);
  outline: none;
}
.legal-tab.is-active {
  background: var(--c-primary, #4b698c);
  border-color: var(--c-primary, #4b698c);
  color: #fff;
}

/* ── Content sections ── */
.legal-section {
  margin-bottom: 28px;
  padding: 24px 28px;
  background: var(--c-bg-primary, #fff);
  border: 1px solid var(--c-border, rgba(0, 0, 0, 0.08));
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.legal-section__title {
  margin: 0 0 14px;
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-primary, #1a2d45);
  line-height: 1.3;
}
.legal-section__body {
  font-family: var(--f-body, 'DM Sans', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-secondary, #444);
}
.legal-section__body p {
  margin: 0 0 12px;
}
.legal-section__body p:last-child {
  margin-bottom: 0;
}
.legal-section__body ul {
  margin: 8px 0 12px 20px;
  padding: 0;
}
.legal-section__body li {
  margin-bottom: 8px;
}
.legal-section__body a {
  color: var(--c-primary, #4b698c);
  text-decoration: underline;
}
.legal-section__body strong {
  color: var(--c-text-primary, #1a2d45);
}

/* ── Sub-sections (nested, inside a section) ── */
.legal-subsection {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: var(--c-bg-secondary, #f3f6fb);
  border-radius: 14px;
}
.legal-subsection:last-child {
  margin-bottom: 0;
}
.legal-subsection__title {
  margin: 0 0 8px;
  font-family: var(--f-heading, 'DM Sans', sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-primary, #1a2d45);
}
.legal-subsection__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-secondary, #555);
}
.legal-subsection__body p {
  margin: 0;
}

/* ── Inline link button (e.g. Datenschutz-link in AGB) ── */
.legal-inline-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--c-primary, #4b698c);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.legal-inline-link:hover,
.legal-inline-link:focus-visible {
  color: var(--c-primary-dark, #3a5a7c);
  outline: none;
}

/* ── Hinweis „verbindlich nur Deutsch/Englisch" (Sprachen außer de/en) ── */
.legal-hinweis {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--c-bg-secondary, #f3f6fb);
  border-inline-start: 4px solid var(--c-primary, #4b698c);
  border-radius: 12px;
  font-family: var(--f-body, 'DM Sans', sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-primary, #1a2d45);
}

/* ── Narrow viewport adjustments ── */
@media (max-width: 480px) {
  .screen-legal {
    padding: 16px 16px 80px;
  }
  .legal-section {
    padding: 18px 18px;
  }
  .legal-tabs {
    gap: 4px;
  }
  .legal-tab {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* --- css/r-shell.css --- */
/* ==========================================================================
   GazeTo — Shell extras: app footer + read-aloud highlight
   Kept in its own file so it composes cleanly with redesign.css.
   ========================================================================== */

/* ── App footer (Powered by / legal links) ── */
.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 40px;
  padding: 22px 24px calc(22px + 76px); /* bottom clears the fixed bottom-nav */
  border-top: 1px solid var(--c-border, #e4e7ee);
  font-family: var(--f-body, sans-serif);
  font-size: 13px;
  color: var(--c-fg2, #555e6e);
  text-align: center;
}
.app-footer__powered { color: var(--c-fg3, #818a99); }
.app-footer__powered strong { font-weight: 700; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.app-footer a {
  color: var(--c-accent, #4b698c);
  font-weight: 600;
  text-decoration: none;
}
.app-footer a:hover { text-decoration: underline; }
.app-footer__brand {
  display: inline-flex; align-items: center; gap: 6px;
}
.app-footer__brand img { height: 16px; width: auto; opacity: 0.8; }
@media print { .app-footer { display: none !important; } }

/* ── Input-method explanation (Eyetracker vs. Webcam) ── */
.input-method-help {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--c-bg-secondary, #f0f1f4);
  border-left: 4px solid var(--c-accent, #4b698c);
  border-radius: 10px;
  font-family: var(--f-body, sans-serif);
}
.input-method-help__head {
  font-family: var(--font-heading-condensed, 'Oswald', sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-fg3, #818a99); margin-bottom: 8px;
}
.input-method-help__line {
  font-size: 14px; line-height: 1.5; color: var(--c-fg2, #555e6e); margin: 0 0 8px;
}
.input-method-help__line:last-child { margin-bottom: 0; }
.input-method-help__line strong { color: var(--c-fg1, #1d1d1f); font-weight: 700; }

/* ── Read-aloud ("Vorlesen") highlight of the element currently spoken ── */
.tts-reading {
  background: rgba(75, 105, 140, 0.16) !important;
  outline: 2px solid var(--c-accent, #4b698c);
  outline-offset: 3px;
  border-radius: 6px;
  scroll-margin: 120px;
  transition: background 0.15s var(--ease-out, ease), outline-color 0.15s var(--ease-out, ease);
}
[data-theme="dark"] .tts-reading { background: rgba(126, 167, 212, 0.22) !important; }
[data-theme="contrast"] .tts-reading, .high-contrast .tts-reading {
  background: rgba(255, 214, 10, 0.28) !important;
  outline-color: #ffd60a;
}

/* ── In-app confirmation dialog (GazeToConfirm) ── */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: appConfirmFade 0.12s ease;
}
@keyframes appConfirmFade { from { opacity: 0; } to { opacity: 1; } }
.app-confirm {
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  text-align: center;
  border-radius: 20px;
}
.app-confirm__title {
  margin: 0;
  font-family: var(--font-headline, var(--f-display, serif));
  font-size: 1.4rem;
  line-height: 1.2;
}
.app-confirm__msg {
  margin: 0;
  color: var(--c-fg2, #4a4a4a);
  font-size: 1.05rem;
  line-height: 1.5;
}
.app-confirm__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.app-confirm__actions button { min-height: 52px; padding: 0 24px; }
.app-confirm__danger {
  min-height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--color-error, #dc2626);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.app-confirm__danger:hover { background: #b91c1c; }
.app-confirm__danger:focus-visible { outline: 3px solid #ffd60a; outline-offset: 2px; }

/* ── Prominent raised center bottom-nav button ("Mein Bereich") ── */
.bottom-nav__item--primary {
  position: relative;
  justify-content: flex-end;
}
.bottom-nav__primary-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: -30px;                 /* lift the disc above the nav bar */
  margin-bottom: 2px;
  background: linear-gradient(140deg, #4b698c, #2f4a6b);
  color: #fff;
  border: 4px solid var(--c-bg-primary, #fff);
  box-shadow: 0 8px 22px rgba(75, 105, 140, 0.5), 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bottom-nav__primary-disc i,
.bottom-nav__primary-disc svg { width: 28px; height: 28px; color: #fff; }
.bottom-nav__item--primary .bottom-nav__label {
  color: var(--c-accent, #4b698c);
  font-weight: 700;
}
.bottom-nav__item--primary:hover .bottom-nav__primary-disc { transform: translateY(-2px) scale(1.04); }
.bottom-nav__item--primary.active .bottom-nav__primary-disc {
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(75, 105, 140, 0.6), 0 0 0 3px rgba(255, 214, 10, 0.5);
}

/* ── iPhone schmal (IPHONE-SHELL-2026-10-04) ─────────────────────────────────
   „Mehr“-Knopf (drei Punkte, kopfleiste-mehr.js) erbt die Klasse des
   Marken-Knopfs und war nur 33 px breit → Tippziel auf 44 px. */
@media (max-width: 699px), (max-height: 500px) {
  #sb-mehr { min-width: 44px; justify-content: center; }
}
/* iPhone SE (320 px): „Einschätzung“ und „Fortschritt“ liefen über ihre
   Knopfbreite hinaus. Etwas kleinere Schrift, weniger Seitenabstand. */
@media (max-width: 359px) {
  .bottom-nav__item { padding-left: 2px; padding-right: 2px; }
  .bottom-nav__label { font-size: 11.5px; }
}

/* ── QA-2026-10-25: Tippziele ≥ 48 px — „Mehr"-Knopf und Fußzeilenlinks ── */
#sb-mehr { min-width: 48px; justify-content: center; }
.app-footer a { display: inline-flex; align-items: center; min-height: 48px; }
/* REST-2026-10-25: übrige Knöpfe unter 48 px (Bildschirm-QA Runde 2) — #app für Vorrang
   vor redesign.css/r-activities.css, Optik sonst unverändert */
#app .age-tab, #app .stufe-tab, #app .plan-card__start, #app .home-cycle__step,
#app .home-focus-hint, #app .pg-diag-btn, #app .results-fav-toggle, #app .legal-back-btn,
#app .setting-cell .btn, #app .detail-settings-toggle { min-height: 48px; }
#app .act-tile__star { min-width: 48px; min-height: 48px; }
/* --- css/r-diagnostik.css --- */
/* ==========================================================================
   GazeTo — Diagnostik-Screen Styles
   Wizard-Layout fuer Blicksteuerungs-Einschaetzung (Fachkraefte)
   ========================================================================== */

/* ── Shared layout wrapper ────────────────────────────────────────────── */
.screen-diagnostik {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 80px;
  box-sizing: border-box;
}

/* ── INTRO SCREEN ─────────────────────────────────────────────────────── */
.diag-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}

.diag-intro__title {
  font-family: var(--font-headline, 'Merriweather', serif);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text, #1a1a1a);
  margin: 0;
}

.diag-intro__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary, #4a4a4a);
  margin: 0;
  max-width: 640px;
}

/* Framework reference cards */
.diag-fw-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.diag-fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.diag-fw-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 10px;
  font-size: 13px;
}

.diag-fw-card i[data-lucide],
.diag-fw-card i svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary, #4b698c);
  margin-bottom: 2px;
}

.diag-fw-card strong {
  font-size: 14px;
  color: var(--color-text, #1a1a1a);
}

.diag-fw-card__desc {
  color: var(--color-text-secondary, #4a4a4a);
  font-size: 12px;
  line-height: 1.4;
}

.diag-fw-card__levels {
  color: var(--color-primary, #4b698c);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

/* Info box */
.diag-info-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--color-primary-bg, #eef2f7);
  border-radius: 12px;
  border-left: 4px solid var(--color-primary, #4b698c);
}

.diag-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text, #1a1a1a);
}

.diag-info-row i[data-lucide],
.diag-info-row i svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary, #4b698c);
  flex-shrink: 0;
}

.diag-disclaimer {
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.5;
  font-style: italic;
  margin: 0;
  padding: 10px 14px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
}

.diag-start-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* ── QUESTION SCREEN ──────────────────────────────────────────────────── */
.diag-question {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 20px;
}

.diag-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-progress__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.diag-progress__bar {
  height: 6px;
  background: var(--color-border, #e0e0e0);
  border-radius: 99px;
  overflow: hidden;
}

.diag-progress__fill {
  height: 100%;
  background: var(--color-primary, #4b698c);
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* Back button */
.diag-back {
  align-self: flex-start;
  min-height: 40px;
  font-size: 14px;
  padding: 8px 16px;
  gap: 6px;
}

.diag-back i svg {
  width: 16px;
  height: 16px;
}

/* Topic row */
.diag-q-topic {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary, #4b698c);
}

.diag-q-topic i[data-lucide],
.diag-q-topic i svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.diag-q-topic__text {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Question title */
.diag-q-title {
  font-family: var(--font-headline, 'Merriweather', serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.3;
  color: var(--color-text, #1a1a1a);
  margin: 0;
}

/* Hint box */
.diag-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #f59e0b40;
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text-secondary, #4a4a4a);
  line-height: 1.5;
}

.diag-hint i[data-lucide],
.diag-hint i svg {
  width: 16px;
  height: 16px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Framework reference */
.diag-fw-ref {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

.diag-fw-ref i[data-lucide],
.diag-fw-ref i svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Options */
.diag-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diag-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--color-surface, #fff);
  border: 2px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  min-height: 60px;
  width: 100%;
}

.diag-option:hover {
  border-color: var(--color-primary, #4b698c);
  background: var(--color-primary-bg, #eef2f7);
  transform: translateY(-1px);
}

.diag-option:active {
  transform: translateY(0);
}

.diag-option.is-selected {
  border-color: var(--color-primary, #4b698c);
  background: var(--color-primary-bg, #eef2f7);
  font-weight: 700;
}

.diag-option__score {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #4b698c);
}

.diag-option__label {
  flex: 1;
  line-height: 1.4;
}

.diag-option__arrow {
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.diag-option__arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

.diag-option:hover .diag-option__arrow,
.diag-option.is-selected .diag-option__arrow {
  opacity: 0.8;
}

/* ── RESULT SCREEN ────────────────────────────────────────────────────── */
.diag-result {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 20px;
}

/* Hero result card */
.diag-result-hero {
  padding: 24px 28px;
  border: 2px solid currentColor;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diag-result-hero__title {
  font-family: var(--font-headline, 'Merriweather', serif);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.1;
}

.diag-result-hero__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  flex-shrink: 0;
}

.diag-result-hero__sub {
  font-size: 14px;
  color: var(--color-text-secondary, #4a4a4a);
  margin: 0;
}

/* Stufe progress dots */
.diag-stufe-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.diag-stufe-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #e0e0e0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted, #6b7280);
  transition: background 0.2s;
  flex-shrink: 0;
}

.diag-stufe-dot.is-active {
  color: #fff;
}

/* Result sections */
.diag-result-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diag-result-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text, #1a1a1a);
  margin: 0;
}

.diag-result-section__title i[data-lucide],
.diag-result-section__title i svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary, #4b698c);
  flex-shrink: 0;
}

/* Framework grid */
.diag-result-fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.diag-result-fw-card {
  padding: 14px 16px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-result-fw-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.diag-result-fw-card__head i[data-lucide],
.diag-result-fw-card__head i svg {
  width: 15px;
  height: 15px;
  color: var(--color-primary, #4b698c);
  flex-shrink: 0;
}

.diag-result-fw-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #6b7280);
}

.diag-result-fw-card__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary, #4b698c);
  line-height: 1.3;
}

.diag-result-fw-card__desc {
  font-size: 12px;
  color: var(--color-text-secondary, #4a4a4a);
  line-height: 1.5;
  margin: 0;
}

/* Tips list */
.diag-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diag-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text, #1a1a1a);
  padding: 10px 14px;
  background: rgba(75, 105, 140, 0.05);
  border-radius: 8px;
}

.diag-tip-item i[data-lucide],
.diag-tip-item i svg {
  width: 16px;
  height: 16px;
  color: var(--color-success, #16a34a);
  flex-shrink: 0;
  margin-top: 2px;
}

.diag-observe-box {
  padding: 12px 14px;
  background: rgba(75, 105, 140, 0.06);
  border-left: 3px solid var(--color-primary, #4b698c);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text, #1a1a1a);
  line-height: 1.5;
}

.diag-focus-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  font-size: 13px;
  color: #166534;
  line-height: 1.5;
}

.diag-focus-box i[data-lucide],
.diag-focus-box i svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #16a34a;
}

/* Score summary */
.diag-score-section {
  padding: 18px 20px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
}

.diag-score-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.diag-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.diag-score-row__topic {
  min-width: 160px;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  flex-shrink: 0;
}

.diag-score-row__dots {
  display: flex;
  gap: 5px;
}

.diag-score-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-border, #e0e0e0);
  transition: background 0.15s;
}

.diag-score-dot.is-filled {
  border-color: transparent;
}

.diag-score-row__answer {
  color: var(--color-text-secondary, #4a4a4a);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}

/* Action buttons row */
.diag-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.diag-disclaimer--result {
  font-size: 11px;
}

/* ── "Fur Fachkraefte" section in activity-detail ─────────────────────── */
.detail-fachkraefte {
  border-top: 1px solid var(--color-border, #e0e0e0);
  padding-top: 12px;
  margin-top: 4px;
}

.detail-fachkraefte__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted, #6b7280);
  padding: 6px 0;
  text-align: left;
  letter-spacing: 0.02em;
  width: 100%;
}

.detail-fachkraefte__toggle:hover {
  color: var(--color-primary, #4b698c);
}

.detail-fachkraefte__toggle i[data-lucide],
.detail-fachkraefte__toggle i svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.detail-fachkraefte__body {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 4px;
}

.detail-fachkraefte__body.is-open {
  display: flex;
}

/* Framework badge row */
.detail-fw-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.detail-fw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-primary-bg, #eef2f7);
  color: var(--color-primary-dark, #3a5a7c);
  letter-spacing: 0.03em;
}

.detail-fw-badge i[data-lucide],
.detail-fw-badge i svg {
  width: 12px;
  height: 12px;
}

.detail-fw-observe {
  font-size: 12px;
  color: var(--color-text-secondary, #4a4a4a);
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(75, 105, 140, 0.05);
  border-left: 3px solid var(--color-primary, #4b698c);
  border-radius: 4px;
}

.detail-fw-observe strong {
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  display: block;
  margin-bottom: 3px;
}

.detail-fachkraefte__diag-btn {
  align-self: flex-start;
  font-size: 12px;
  padding: 7px 14px;
  min-height: 34px;
  gap: 6px;
}

.detail-fachkraefte__diag-btn i svg {
  width: 14px;
  height: 14px;
}

/* ── Guided assessment dashboard (intro) ──────────────────────────────── */
.diag-dash {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 22px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e7ee);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(26,58,106,0.06);
}

.diag-dash__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.diag-dash__headl { flex: 1 1 auto; min-width: 0; }
.diag-dash__head .eyebrow { display: block; }
.diag-dash__lead {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary, #51607a);
}

.diag-dash__count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-primary-bg, #eef2f7);
  color: var(--color-primary, #4b698c);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

.diag-dash__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary-bg, #eef2f7);
  overflow: hidden;
}
.diag-dash__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4b698c, #6388ad);
  transition: width .5s ease;
}

.diag-dash__next {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(75,105,140,0.14), rgba(75,105,140,0.05));
  border: 1px solid rgba(75,105,140,0.25);
  color: #2f4a66; /* WCAG AAA (8.0:1) on the tinted-blue hint */
  font-weight: 700;
  font-size: 14px;
}
.diag-dash__next i[data-lucide], .diag-dash__next i svg { width: 18px; height: 18px; flex-shrink: 0; }
.diag-dash__next.is-complete {
  background: rgba(47,158,68,0.10);
  border-color: rgba(47,158,68,0.30);
  color: #237637;
  cursor: default;
}

.diag-modules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diag-module {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--color-border, #e3e7ee);
  border-radius: 14px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.diag-module:hover, .diag-module:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary, #4b698c);
  box-shadow: 0 8px 22px rgba(26,58,106,0.12);
  outline: none;
}

.diag-module__num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-bg, #eef2f7);
  color: var(--color-primary, #4b698c);
  font-weight: 800; font-size: 13px;
}
.diag-module__icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--color-primary-bg, #eef2f7);
  color: var(--color-primary, #4b698c);
}
.diag-module__icon i[data-lucide], .diag-module__icon i svg { width: 22px; height: 22px; }

.diag-module__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diag-module__title { font-weight: 700; color: var(--color-text, #1a3a6a); font-size: 15.5px; }
.diag-module__sub { font-size: 13px; color: var(--color-text-secondary, #51607a); line-height: 1.4; }

.diag-module__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 3px;
}
.diag-module__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #eef1f6;
  color: #3f4859; /* WCAG AAA (8.1:1) on #eef1f6 */
}
.diag-module__badge.is-loading { color: #6b7280; }
.diag-module__badge.is-done {
  background: rgba(47,158,68,0.14);
  color: #14532d; /* WCAG AAA (7.8:1) on the tinted-green badge */
}
.diag-module__badge.is-done::before {
  content: '✓';
  font-weight: 900;
}
.diag-module__chip {
  font-size: 12px;
  font-weight: 600;
  color: #3a5a7c; /* WCAG AAA (7.2:1) on white card */
}

.diag-module__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.diag-module__report {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--color-border, #e3e7ee);
  background: var(--color-surface, #fff);
  color: var(--color-primary, #4b698c);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.diag-module__report:hover, .diag-module__report:focus-visible {
  background: var(--color-primary-bg, #eef2f7);
  border-color: var(--color-primary, #4b698c);
  transform: translateY(-1px);
  outline: none;
}
.diag-module__report i[data-lucide], .diag-module__report i svg { width: 19px; height: 19px; }

.diag-module__go {
  flex: 0 0 auto;
  color: var(--color-text-muted, #97a1b4);
  display: flex; align-items: center;
}
.diag-module__go i[data-lucide], .diag-module__go i svg { width: 20px; height: 20px; }

.diag-module:focus-visible {
  outline: 3px solid var(--color-primary, #4b698c);
  outline-offset: 2px;
}
.high-contrast .diag-module__report { border-color: #000; }

.diag-module.is-done { background: rgba(47,158,68,0.04); border-color: rgba(47,158,68,0.22); }
.diag-module.is-next {
  border-color: var(--color-primary, #4b698c);
  box-shadow: 0 0 0 3px rgba(75,105,140,0.16);
}
.diag-module.is-next .diag-module__num {
  background: var(--color-primary, #4b698c);
  color: #fff;
}

.diag-dash__reports {
  align-self: flex-start;
  margin-top: 2px;
}

/* Evidence base — collapsed by default, secondary to the path */
.diag-fw-cards {
  background: rgba(0,0,0,0.015);
  border: 1px solid var(--color-border, #e3e7ee);
  border-radius: 14px;
  padding: 4px 16px;
}
.diag-fw-cards[open] { padding-bottom: 16px; }
.diag-fw-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 12px 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b7280);
}
.diag-fw-summary::-webkit-details-marker { display: none; }
.diag-fw-summary i[data-lucide], .diag-fw-summary i svg { width: 16px; height: 16px; }
.diag-fw-cards[open] .diag-fw-grid { margin-bottom: 12px; }
/* Aufklapp-Pfeil: der native Marker ist ausgeblendet, ohne Pfeil wirkte der
   zugeklappte Block wie eine Überschrift ohne Inhalt. */
.diag-fw-summary .diag-fw-summary__pfeil,
.diag-fw-summary svg.diag-fw-summary__pfeil { margin-left: auto; width: 18px; height: 18px; transition: transform .2s ease; }
.diag-fw-cards[open] .diag-fw-summary__pfeil { transform: rotate(180deg); }

.high-contrast .diag-dash,
.high-contrast .diag-module,
.high-contrast .diag-fw-cards { border-color: #000; }
.high-contrast .diag-module__badge.is-done { color: #000; background: #fff; border: 1px solid #000; }

/* ── Vokabular-Finder hint ────────────────────────────────────────────── */
.diag-vocab-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--color-surface-raised, #f4f6f9);
  border: 1px solid var(--color-border, #dde3ea);
  color: var(--color-text-muted, #5a6a7e);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.diag-vocab-hint:hover,
.diag-vocab-hint:focus {
  background: var(--color-primary-light, #e8eef5);
  color: var(--color-primary, #4b698c);
  text-decoration: underline;
}
.diag-vocab-hint__icon [data-lucide] { width: 13px; height: 13px; flex-shrink: 0; }
.diag-vocab-hint__text { line-height: 1.3; }

/* ── Responsive tweaks ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .diag-dash__head { flex-wrap: wrap; }
  .diag-module__num { display: none; }
  .diag-fw-grid,
  .diag-result-fw-grid {
    grid-template-columns: 1fr;
  }

  .diag-score-row__topic {
    min-width: 110px;
  }

  .diag-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .diag-action-row .btn-primary-blue,
  .diag-action-row .btn-ghost-pill {
    width: 100%;
  }
}

/* --- css/r-tour.css --- */
/* ==========================================================================
   GazeTo — Feature-Tour / Funktions-Überblick (#tour) + Onboarding-Schritt
   ========================================================================== */

.r-tour {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 28px) 40px;
}

.tour-head { margin-bottom: 20px; }
.tour-head .page-title { margin: 4px 0 8px; }

/* Card list — shared by the standalone screen and the onboarding step */
.tour-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tour-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--c-bg-card, #fff);
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 16px;
  text-align: left;
}

.tour-card--link {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tour-card--link:hover,
.tour-card--link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 58, 106, 0.12);
  border-color: var(--c-accent, #4b698c);
  outline: none;
}

.tour-card__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.tour-card__icon i,
.tour-card__icon svg { width: 26px; height: 26px; }

.tour-card__body { flex: 1 1 auto; min-width: 0; }
.tour-card__title {
  margin: 0 0 2px;
  font-family: var(--f-display, serif);
  font-size: clamp(17px, 2.6vw, 20px);
  color: var(--c-fg1, #1a3a6a);
}
.tour-card__text {
  margin: 0;
  font-size: clamp(14px, 2.2vw, 15px);
  line-height: 1.4;
  color: var(--c-fg2, #51607a);
}

.tour-card__chev {
  flex: 0 0 auto;
  color: var(--c-accent, #4b698c);
  opacity: .7;
}
.tour-card__chev i,
.tour-card__chev svg { width: 22px; height: 22px; }

/* Companion hint */
.tour-companion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--c-accent-tint, rgba(75, 105, 140, 0.08));
  border: 1px dashed var(--c-accent, #4b698c);
  border-radius: 14px;
}
.tour-companion i,
.tour-companion svg {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  color: var(--c-accent, #4b698c);
  margin-top: 2px;
}
.tour-companion p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-fg2, #51607a);
}

.tour-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* Onboarding embed: lists sit inside the onb card, trim the card padding */
.onb-features { padding: 12px; }
.onb-features .tour-card { background: var(--c-bg-subtle, #f6f8fb); }
.onb-features .tour-companion { margin-top: 12px; }

/* ── Kontext-Hilfe für Begleitpersonen (ⓘ) ─────────────────────────────── */
.help-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent-tint, rgba(75, 105, 140, 0.12));
  color: var(--c-accent, #4b698c);
  cursor: pointer;
  vertical-align: middle;
  flex: 0 0 auto;
  transition: background .12s ease;
}
.help-info-btn:hover,
.help-info-btn:focus-visible { background: var(--c-accent, #4b698c); color: #fff; outline: none; }
.help-info-btn i, .help-info-btn svg { width: 18px; height: 18px; pointer-events: none; }

.help-pop {
  position: fixed;
  z-index: 70;
  background: var(--c-bg-card, #fff);
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(26, 58, 106, 0.18);
  padding: 12px 14px;
}
.help-pop__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--c-accent, #4b698c);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.help-pop__head i, .help-pop__head svg { width: 16px; height: 16px; }
.help-pop__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-fg1, #1d1d1f);
}
.high-contrast .help-info-btn { background: #fff; color: #000; border: 1px solid #000; }
.high-contrast .help-pop { border-color: #000; }
.high-contrast .help-pop__head, .high-contrast .help-pop__body { color: #000; }

/* High contrast */
.high-contrast .tour-card { border-color: #000; }
.high-contrast .tour-card__title,
.high-contrast .tour-card__text,
.high-contrast .tour-companion p { color: #000; }
.high-contrast .tour-companion { border-color: #000; background: #fff; }

/* --- css/r-gridtest.css --- */
/* ==========================================================================
   GazeTo — Diagnostik: Raster-Treffsicherheits-Test (#grid-accuracy-test)
   ========================================================================== */

.r-gridtest {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px) clamp(12px, 3vw, 24px) 36px;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}

.gat-head { margin-bottom: 16px; }
.gat-head .page-title { margin: 4px 0 8px; }

/* Intro */
.gat-intro-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gat-intro-step { display: flex; align-items: center; gap: 14px; }
.gat-intro-step__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-tint, rgba(75,105,140,0.1)); color: var(--c-accent, #4b698c);
}
.gat-intro-step__icon i, .gat-intro-step__icon svg { width: 22px; height: 22px; }
.gat-intro-step p { margin: 0; font-size: 16px; color: var(--c-fg1, #1d1d1f); }

.gat-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gat-primary { font-size: 17px; }

/* Top bar during a round */
.gat-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.gat-bar__progress { font-weight: 700; color: var(--c-fg1, #1a3a6a); font-size: 16px; }
.gat-trial-dots { display: flex; gap: 6px; flex: 1 1 auto; }
.gat-trial-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-border, #d7dce6);
}
.gat-trial-dot.is-hit { background: #2f9e44; }
.gat-trial-dot.is-miss { background: #e8a33d; }
.gat-exit { margin-left: auto; }

/* Grid stage — fills available space */
.gat-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 50vh;
}
.gat-grid {
  display: grid;
  gap: clamp(8px, 1.6vw, 16px);
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.gat-cell {
  position: relative;
  border: 3px solid transparent;
  border-radius: 16px;
  background: rgba(75,105,140,0.10);
  cursor: pointer;
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gat-cell__star { opacity: 0; transition: opacity .15s ease, transform .15s ease; color: #fff; }
.gat-cell__star i, .gat-cell__star svg { width: 40px; height: 40px; }

/* ── Full-screen board during a running round ──────────────────────────────
   Real communication grids span the whole page, not a narrow centred column —
   so the test board fills the entire viewport while a round is active. */
body.gat-playing .gat-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  margin: 0; padding: 8px 14px;
  background: var(--c-bg, #fff);
  border-bottom: 1px solid var(--c-border, #e4e7ee);
}
body.gat-playing .gat-stage {
  position: fixed; top: 50px; left: 0; right: 0; bottom: 0;
  min-height: 0; margin: 0; padding: 10px; display: block;
}
body.gat-playing .gat-grid {
  max-width: none; width: 100%; height: 100%; margin: 0;
  gap: clamp(4px, 1vw, 12px);
}
body.gat-playing .gat-cell { min-height: 0; border-width: 2px; border-radius: 10px; }
body.gat-playing .gat-cell__star i,
body.gat-playing .gat-cell__star svg { width: clamp(14px, 4.5vmin, 40px); height: clamp(14px, 4.5vmin, 40px); }

/* ── Zonen-Genauigkeitstest: Bühne ────────────────────────────────────────
   Fällt im laufenden Test auf Vollbild — genau wie das Raster (gat-stage),
   damit die Ziele den ganzen Bildschirm abdecken und nicht eine kleine Box. */
.zt-stage {
  position: relative; width: 100%; height: 72vh; min-height: 360px;
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #eef4fb, #dfe8f3);
}
body.gat-playing .zt-stage {
  position: fixed; top: 50px; left: 0; right: 0; bottom: 0;
  width: auto; height: auto; min-height: 0; margin: 0; border-radius: 0;
}

/* Weitere Reichweiten-Test-Bühnen (Verweilzeit, Fixation/Treffer, Multitouch).
   Diese setzen ihre Größe per Inline-Style (height:NNvh / flex) → !important nötig,
   damit sie im laufenden Test ebenfalls Vollbild werden. Hintergrund bleibt je Test. */
body.gat-playing .dt-stage,
body.gat-playing .fx-stage,
body.gat-playing .hittest-stage {
  position: fixed !important; top: 50px !important; left: 0 !important; right: 0 !important;
  bottom: 0 !important; width: auto !important; height: auto !important;
  min-height: 0 !important; margin: 0 !important; border-radius: 0 !important;
}

/* Active target — pulsing, inviting */
.gat-cell--target {
  border-color: #ffd60a;
  background: linear-gradient(135deg, #ffe16b, #ffb01f);
  box-shadow: 0 0 0 4px rgba(255,214,10,0.35), 0 10px 28px rgba(255,176,31,0.4);
  animation: gat-pulse 1.1s ease-in-out infinite;
}
.gat-cell--target .gat-cell__star { opacity: 1; transform: scale(1); }
@keyframes gat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Hit / miss feedback */
.gat-cell--hit {
  border-color: #2f9e44 !important;
  background: #2f9e44 !important;
  animation: gat-pop .35s ease;
}
.gat-cell--hit .gat-cell__star { opacity: 1; }
@keyframes gat-pop {
  0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); }
}
.gat-cell--miss { animation: gat-shake .35s ease; }
@keyframes gat-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
}
/* Show where the target was after a miss */
.gat-cell--showtarget {
  border-color: #ffd60a;
  box-shadow: 0 0 0 4px rgba(255,214,10,0.4);
}
.gat-cell--showtarget .gat-cell__star { opacity: .9; }

/* DOM-dwell ring reuses .dom-dwelling (dom-dwell.css) — cells are dwell targets. */

/* Interstitial */
.gat-inter {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 40px 16px;
}
.gat-inter__icon {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-tint, rgba(75,105,140,0.12)); color: var(--c-accent, #4b698c);
  animation: gat-pop .5s ease;
}
.gat-inter__icon i, .gat-inter__icon svg { width: 44px; height: 44px; }
.gat-inter__title { margin: 6px 0 0; font-family: var(--f-display, serif); font-size: 26px; color: var(--c-fg1, #1a3a6a); }
.gat-inter__text { margin: 0; font-size: 17px; color: var(--c-fg2, #51607a); }

/* Result */
.gat-result { display: flex; flex-direction: column; gap: 16px; }
.gat-reco {
  text-align: center;
  padding: 24px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(75,105,140,0.12), rgba(75,105,140,0.04));
  border: 2px solid var(--c-accent, #4b698c);
}
.gat-reco__size { font-family: var(--f-display, serif); font-size: clamp(40px, 12vw, 64px); font-weight: 800; color: var(--c-accent, #4b698c); line-height: 1; }
.gat-reco__label { margin-top: 6px; font-size: 17px; color: var(--c-fg1, #1a3a6a); font-weight: 600; }
.gat-reco__mini { margin-top: 4px; font-size: 14px; color: var(--c-fg2, #51607a); }

.gat-table { border: 1px solid var(--c-border, #e4e7ee); border-radius: 14px; overflow: hidden; }
.gat-table__row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; }
.gat-table__row + .gat-table__row { border-top: 1px solid var(--c-border, #eef1f6); }
.gat-table__row--head { background: var(--c-bg-subtle, #f6f8fb); font-weight: 700; color: var(--c-fg2, #51607a); }
.gat-table__c { padding: 10px 12px; font-size: 15px; }
.gat-table__row.is-pass { background: rgba(47,158,68,0.06); }
.gat-table__row.is-fail { background: rgba(232,163,61,0.06); }

.gat-note { font-size: 13px; line-height: 1.5; color: var(--c-fg3, #7a8597); margin: 0; }

/* CTA card on the Diagnostik result screen */
.diag-gridtest-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 16px;
  background: var(--c-bg-card, #fff);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.diag-gridtest-cta:hover, .diag-gridtest-cta:focus-visible {
  transform: translateY(-2px); border-color: var(--c-accent, #4b698c);
  box-shadow: 0 8px 24px rgba(26,58,106,0.12); outline: none;
}
.diag-gridtest-cta__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: #B983FF; color: #fff;
}
.diag-gridtest-cta__icon i, .diag-gridtest-cta__icon svg { width: 24px; height: 24px; }
.diag-gridtest-cta__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.diag-gridtest-cta__title { font-weight: 700; color: var(--c-fg1, #1a3a6a); font-size: 16px; }
.diag-gridtest-cta__text { font-size: 14px; color: var(--c-fg2, #51607a); }
.diag-gridtest-cta > i:last-child, .diag-gridtest-cta > svg:last-child { color: var(--c-accent, #4b698c); opacity: .7; }
.high-contrast .diag-gridtest-cta { border-color: #000; }

/* Stage-appropriate note shown instead of the test in Stufe 1–2 (non-interactive). */
.diag-gridtest-note {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; margin: 14px 0 4px; padding: 14px 16px;
  border: 1px dashed var(--c-border, #d7dbe6);
  border-radius: 16px;
  background: var(--c-bg-subtle, #f6f8fc);
}
.diag-gridtest-note__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(75,105,140,0.12); color: var(--c-accent, #4b698c);
}
.diag-gridtest-note__icon i, .diag-gridtest-note__icon svg { width: 22px; height: 22px; }
.diag-gridtest-note__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.diag-gridtest-note__title { font-weight: 700; color: var(--c-fg1, #1a3a6a); font-size: 15px; }
.diag-gridtest-note__text { font-size: 14px; line-height: 1.45; color: var(--c-fg2, #51607a); }
.high-contrast .diag-gridtest-note { border-color: #000; background: transparent; }

/* Recommended-size badge in the VSD editor grid chooser */
.vsd-size-btn--reco {
  position: relative;
  border-color: var(--c-accent, #4b698c) !important;
  box-shadow: 0 0 0 3px rgba(75,105,140,0.18);
}
.vsd-size-btn__badge {
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--c-accent, #4b698c); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.high-contrast .vsd-size-btn--reco { border-color: #000 !important; }
.high-contrast .vsd-size-btn__badge { background: #000; color: #fff; }

/* High contrast */
.high-contrast .gat-cell { border-color: #000; background: #fff; }
.high-contrast .gat-cell--target { background: #ffd60a; border-color: #000; }
.high-contrast .gat-reco { border-color: #000; }
.high-contrast .gat-table { border-color: #000; }
.high-contrast .gat-note { color: #000; }

/* --- css/r-diagreport.css --- */
/* ==========================================================================
   GazeTo — Diagnostik-Bericht (Heatmaps, Blickpfade, PDF-Druck)
   ========================================================================== */

.diag-report { padding-bottom: 40px; }

.diag-report__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 8px 0 18px;
}
.diag-report__title { margin: 2px 0 0; font-size: 30px; font-weight: 800; color: var(--c-fg1, #1a3a6a); }
.diag-report__who { margin: 4px 0 0; color: var(--c-fg2, #51607a); font-weight: 600; }
.diag-report__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.diag-report__printhead { display: none; }

.diag-report__body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) { .diag-report__body { grid-template-columns: 1fr; } }

.diag-report__card {
  border: 1px solid var(--c-border, #e4e7ee);
  border-radius: 18px;
  background: var(--c-bg-card, #fff);
  padding: 16px;
}
.diag-report__card--quest { grid-column: 1 / -1; background: var(--c-bg-subtle, #f6f8fc); }

/* Rahmenbedingungen (Beobachtung): fünf Notizfelder. Bis 14.10.2026 gab es
   hierfür kein CSS (die Klasse vsd-input stammt aus dem entfernten
   Szenen-Teil) — Beschriftung und Feld standen ungeordnet nebeneinander und
   die Nachbarkarte blieb halb leer. Jetzt: volle Breite, Beschriftung links,
   Feld rechts; schmal untereinander. */
.diag-report__card--context { grid-column: 1 / -1; }
.diag-report__ctxrow {
  display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 6px 16px; align-items: start; padding: 10px 0;
  border-top: 1px solid var(--c-border, #e4e7ee);
}
.diag-report__ctxlabel {
  display: flex; align-items: center; gap: 10px; padding-top: 8px;
  font-size: 15px; font-weight: 600; color: var(--c-fg1, #1a3a6a);
}
.diag-report__ctxicon { display: inline-flex; flex: 0 0 auto; color: var(--c-accent, #4b698c); }
.diag-report__ctxicon svg, .diag-report__ctxicon i { width: 20px; height: 20px; }
.diag-report__ctxinput {
  width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical;
  padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.45;
  color: var(--c-fg1, #1a3a6a); background: var(--c-bg-card, #fff);
  border: 1px solid var(--c-border-strong, #c9d1de); border-radius: 12px;
}
.diag-report__ctxinput:focus { outline: 3px solid var(--c-accent, #4b698c); outline-offset: 1px; }
@media (max-width: 640px) {
  .diag-report__ctxrow { grid-template-columns: 1fr; }
  .diag-report__ctxlabel { padding-top: 0; }
}
.high-contrast .diag-report__ctxinput { border-color: #000; }
.diag-report__intro { grid-column: 1 / -1; background: var(--c-bg-subtle, #f6f8fc); border-left: 4px solid var(--c-accent, #4b698c); }
.diag-report__introtext { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--c-fg2, #51607a); }
.diag-report__gloss { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.diag-report__gloss li { font-size: 13.5px; line-height: 1.5; color: var(--c-fg2, #51607a); }
.diag-report__gloss strong { color: var(--c-fg1, #1a3a6a); }
.diag-report__introtip { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-fg3, #7a8597); font-style: italic; }

/* Plain-language "Worum geht es?" block — shown on every check card */
.diag-report__explain {
  margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--c-fg2, #51607a);
}
.diag-report__explain strong { color: var(--c-fg1, #1a3a6a); }

/* "Das bedeutet" interpretation callout */
.diag-report__meaning {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0 0; padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255,196,0,0.10);
  border: 1px solid rgba(214,158,46,0.30);
}
.diag-report__meaningicon { flex: 0 0 auto; color: #b8860b; display: flex; }
.diag-report__meaningicon i, .diag-report__meaningicon svg { width: 18px; height: 18px; }
.diag-report__meaningbody { font-size: 14px; line-height: 1.5; color: #5b4a16; }
.diag-report__meaningbody strong { color: #4a3c10; }
.diag-report__cardhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.diag-report__cardicon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(75,105,140,0.12); color: var(--c-accent, #4b698c);
}
.diag-report__cardicon i, .diag-report__cardicon svg { width: 22px; height: 22px; }
.diag-report__cardtitle { margin: 0; font-size: 17px; font-weight: 800; color: var(--c-fg1, #1a3a6a); }
.diag-report__carddate { font-size: 13px; color: var(--c-fg3, #94a3b8); }

.diag-report__canvas {
  display: block; width: 100%; height: auto; max-width: 520px;
  border-radius: 12px; background: #0e1726; margin: 0 auto 12px;
}
.diag-report__metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.diag-report__metric { display: flex; flex-direction: column; min-width: 110px; }
.diag-report__metriclabel { font-size: 12px; color: var(--c-fg3, #94a3b8); }
.diag-report__metricvalue { font-size: 18px; font-weight: 800; color: var(--c-fg1, #1a3a6a); }
.diag-report__legend { font-size: 12px; color: var(--c-fg3, #94a3b8); margin-top: 4px; }
.diag-report__questline { font-size: 18px; font-weight: 700; color: var(--c-fg1, #1a3a6a); margin: 0 0 4px; }
.diag-report__empty { color: var(--c-fg2, #51607a); margin: 4px 0 10px; }
.diag-report__loading { color: var(--c-fg2, #51607a); }
.diag-report__cardprint { margin-top: 12px; }
.diag-report__cardsave { margin-top: 12px; margin-left: 8px; }

.high-contrast .diag-report__card,
.high-contrast .diag-report__cardicon { border-color: #000; }

/* ── Print / PDF ─────────────────────────────────────────────────────────── */
.printonly { display: none; }
@media print {
  .statusbar, .bottom-nav, .app-footer, .noprint, .diag-report__head { display: none !important; }
  body, #app, #app-content { background: #fff !important; }
  .printonly { display: block; }
  .diag-report__printhead { display: block; margin: 0 0 14px; }
  .diag-report__printhead h1 { margin: 0; font-size: 22px; }
  .diag-report__printhead p { margin: 2px 0 0; color: #444; }
  .diag-report__body { display: block; }
  .diag-report__card {
    border: 1px solid #ccc; border-radius: 10px; margin: 0 0 14px;
    page-break-inside: avoid; break-inside: avoid;
  }
  .diag-report__canvas { max-width: 100%; }
  /* single-card print mode */
  body.print-single .diag-report__card { display: none !important; }
  body.print-single .diag-report__card.print-target { display: block !important; }
  body.print-single .diag-report__printhead { display: block; }
}

/* --- css/r-support.css --- */
/* ==========================================================================
   GazeTo — Bildschirm „Unterstützen" (screens/support.js) und sein Knopf in
   der Kopfleiste (js/statusbar.js). Vorbild: BookTo/src/css/support.css.
   ========================================================================== */

/* ---- Der Knopf ------------------------------------------------------------
   Nur auf der Startseite (statusbar.js setzt sonst `hidden`). Im Markup steht
   er am ENDE der Leiste und wird mit `order` nach links neben das Logo geholt:
   - sichtbar ist er oben links (wie in BookTo),
   - Tastatur und Taster kommen zuerst zu „Vorlesen", nicht zur Bitte um Geld,
   - anders als in BookTo bleibt er IMMER in der Zeile (`data-mehr-fest`):
     Die GazeTo-Leiste ist schon am Desktop voll (Sprache und Profil liegen
     bei 1280 px hinter „Mehr“), er wäre dort sonst nie zu sehen.
   Ziel 64 px hoch für Verweilen; der negative Rand hält die Leiste trotzdem
   auf ihrer Höhe (48 px Knöpfe + 2 × 10 px Innenabstand). */
/* Per id, nicht per Klasse: der „Mehr"-Knopf erbt die Klassen des ersten
   Knopfs der Leiste (des Logos) und wanderte sonst mit nach links. */
#sb-brand { order: -2; }
.statusbar > #sb-support { order: -1; }
#sb-support {
  min-height: 64px; min-width: 64px;
  margin-top: -8px; margin-bottom: -8px;
  border-color: var(--c-border-strong);
}
#sb-support[hidden] { display: none; }
#sb-support svg, #sb-support i { color: var(--c-accent); }
/* In der „Mehr"-Klappe trägt er seinen Namen wieder und keinen Ausgleichsrand. */
.sb-mehr-klappe #sb-support { margin: 0; }
.sb-mehr-klappe #sb-support .statusbar__btn-label { display: inline; }

/* ---- Die Seite ------------------------------------------------------------ */
.screen-support { padding-bottom: 40px; }
.support__zurueck { min-height: 64px; margin-bottom: 20px; }
.support__text,
.support__wege,
.support__ehrlich {
  max-width: 62em;
  margin: 0 0 24px;
}
.support__text p,
.support__ehrlich p { margin: 0 0 12px; font-size: 18px; line-height: 1.55; color: var(--c-fg1); }
.support__text .page-lead { font-size: 20px; }
.support__liste { margin: 0 0 12px; padding-left: 1.3em; font-size: 18px; line-height: 1.55; color: var(--c-fg1); }
.support__liste li { margin-bottom: 8px; }
.support__leicht { margin: 0 0 16px; }

.support__wege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.support__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 20px;
  background: var(--c-bg-primary);
  color: var(--c-fg1);
}
.support__karte h2 { margin: 0; font-family: var(--f-heading); font-size: 24px; }
/* Ein QR-Code braucht hellen Grund — auch im dunklen und im Kontrast-Schema. */
.support__qr {
  width: min(100%, 220px);
  height: auto;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}
/* Bezeichnung ÜBER dem Wert: Neben der Bezeichnung brach die IBAN in zwei
   Zeilen — eine Nummer zum Abschreiben soll in einer stehen. */
.support__konto { margin: 0; width: 100%; text-align: center; }
.support__konto dt { margin-top: 8px; font-size: 14px; color: var(--c-fg2); }
.support__konto dt:first-child { margin-top: 0; }
.support__konto dd { margin: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.support__nr { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.support__link { min-height: 64px; text-decoration: none; }
.support__hinweis { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-fg2); }
.support__karte .support__leicht { margin: 0; align-self: stretch; }

.support__ehrlich {
  padding: 20px;
  border-left: 6px solid var(--c-accent);
  border-radius: 12px;
  background: var(--c-bg-secondary);
}
.support__ehrlich p:last-child { margin-bottom: 0; }
.support__ehrlich a { color: inherit; font-weight: 700; }

@media (max-width: 720px) {
  .support__wege { grid-template-columns: minmax(0, 1fr); }
}

/* „Entwickelt von AssistUK“ in der Kopfleiste: Logo größer, Leiste bleibt gleich hoch
   (Lars 04.10.2026). Die Pille ist 40 px hoch; das Logo füllt jetzt ihre Innenhöhe statt 20 px. */
.gz-sponsor--bar { padding-top: 3px; padding-bottom: 3px; }
.gz-sponsor--bar .gz-sponsor__logo { height: 32px; margin: -2px 0; }

/* ---- Audit 04.10.2026: Kontrast und Zielgröße ------------------------------ */
/* „Sponsoring" und „Kontakt": vorher Textlinks im Fließtext (52 bzw. 24 px hoch),
   jetzt zwei Pillen-Knöpfe mit 64 px — mit Verweilen und Finger gut zu treffen. */
.support__mehr { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px; }
.support__ehrlich .support__mehr:last-child { margin-bottom: 0; }
.support__ehrlich .support__mehr a { color: var(--c-fg1); }
/* Dunkles Schema: .btn-primary-blue nimmt dort --c-accent-2 (#a3c0e0) mit weißer
   Schrift = 1,9 : 1. Dunkle Schrift auf demselben Blau: 10 : 1 (AAA). */
[data-theme="dark"] .support__link.btn-primary-blue { color: #0f1116; }
/* „Entwickelt von AssistUK" (Kopf- und Fußleiste) im dunklen Schema: Die Logo-PNG
   ist weiß; redesign.css färbt sie für helle Flächen schwarz (brightness(0)) —
   auf dunklem Grund war sie damit fast unsichtbar. Hier bleibt sie weiß wie
   assistuk-logo-white.png, wie schon im Kontrast-Schema. */
[data-theme="dark"] .gz-sponsor--bar .gz-sponsor__logo,
[data-theme="dark"] .gz-sponsor--footer .gz-sponsor__logo { filter: none; opacity: 1; }

/* --- css/r-werkstatt.css --- */
/* ==========================================================================
   GazeTo — Werkstatt: eigene Aktivitäten (WERKSTATT-2026-10-23)
   Bedienung durch die Begleitperson: Ziele ≥ 48 px, Touch und Maus.
   Markup: screens/werkstatt.js.
   ========================================================================== */
.screen-activities .r-act-create--werkstatt { margin-top: -10px; }

.screen-werkstatt .werk-page { padding-bottom: 120px; }
.screen-werkstatt .werk-head { margin-bottom: 18px; }

.screen-werkstatt .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
}
.screen-werkstatt .btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.screen-werkstatt .werk-gross { min-height: 56px; padding: 0 22px; font-size: 1.05rem; }
.screen-werkstatt .werk-klein { min-height: 44px; padding: 0 12px; font-size: 0.9rem; }

.werk-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }

/* Liste */
.werk-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.werk-leer {
  grid-column: 1 / -1;
  padding: 28px 22px;
  border: 2px dashed var(--c-border);
  border-radius: 16px;
  color: var(--c-fg);
  line-height: 1.5;
}
.werk-karte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-bg-primary);
}
.werk-karte__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #2c4a70; display: block; }
.werk-karte__text { padding: 12px 16px 4px; }
.werk-karte__name { font-size: 1.15rem; margin: 0 0 4px; }
.werk-karte__info { margin: 0; font-size: 0.9rem; color: var(--c-fg); opacity: 0.8; }
.werk-karte__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }

/* Editor */
.werk-block {
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 16px;
  background: var(--c-bg-primary);
}
.werk-label { display: block; font-weight: 700; margin: 14px 0 6px; }
.werk-block > .werk-label:first-child { margin-top: 0; }
.werk-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 1.05rem;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg-primary);
  color: inherit;
  box-sizing: border-box;
}
.werk-input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.werk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.werk-chip {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 24px;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg-primary);
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}
.werk-chip--rund { min-width: 48px; padding: 0; }
.werk-chip.is-active { background: #4b698c; border-color: #4b698c; color: #fff; }
.werk-chip:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.werk-frage__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.werk-frage__titel { font-size: 1.15rem; margin: 0; }

.werk-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.werk-k {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
}
.werk-k.is-richtig { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.35); }
.werk-k__bild {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--c-border);
  border-radius: 10px;
  background: var(--c-bg-tertiary, #f1f5f9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  color: inherit;
  font-weight: 600;
}
.werk-k__bild svg { width: 32px; height: 32px; }
.werk-k__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.werk-k__bild.is-laedt { opacity: 0.5; }
.werk-k__bild:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.werk-k__leiste { display: flex; flex-wrap: wrap; gap: 6px; }
.werk-k__richtig.is-active { background: #16a34a; border-color: #16a34a; }

.werk-karte-plus {
  min-height: 120px;
  border: 2px dashed var(--c-border);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.werk-karte-plus svg { width: 28px; height: 28px; }
.werk-neue-frage { margin: 4px 0 16px; }

.werk-hinweis {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #e0f2fe;
  color: #0c4a6e;
  font-weight: 600;
}
.werk-hinweis--fehler { background: #fef2f2; color: #991b1b; }
.werk-hinweis ul { margin: 0; padding-left: 20px; }

/* Feste Leiste unten: Zurück · Ausprobieren · Speichern */
.werk-fuss {
  position: sticky;
  bottom: 72px;   /* über der festen unteren Navigation (64 px) */
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  background: var(--c-bg-secondary, #f6f7f9);
  border-top: 1px solid var(--c-border);
}
.werk-fuss__rechts { display: flex; flex-wrap: wrap; gap: 10px; }

[data-theme="contrast"] .werk-chip.is-active,
.high-contrast .werk-chip.is-active { background: #000; color: #ffe14d; border-color: #ffe14d; }

/* ── Vorlage „Szene": Foto mit aufziehbaren Stellen (23.10.2026) ── */
.werk-weise { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--c-fg); opacity: 0.85; }
.werk-szene {
  position: relative;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  user-select: none;
  -webkit-user-select: none;
}
.werk-szene__foto { display: block; width: 100%; height: auto; pointer-events: none; }
.werk-szene__ebene { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.werk-stelle {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid #facc15;
  border-radius: 10px;
  background: rgba(250, 204, 21, 0.16);
  padding: 0;
  cursor: pointer;
}
.werk-stelle.is-gewaehlt { border-color: #22c55e; background: rgba(34, 197, 94, 0.22); border-width: 4px; }
.werk-stelle--neu { border-style: dashed; pointer-events: none; }
.werk-stelle__nr {
  position: absolute;
  left: 4px;
  top: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.werk-stellen { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.werk-stelle-zeile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
}
.werk-stelle-zeile.is-gewaehlt { border-color: #22c55e; }
.werk-stelle-zeile__felder { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 560px) {
  .werk-stelle-zeile { grid-template-columns: auto 1fr; }
  .werk-stelle-zeile > .btn { grid-column: 1 / -1; }
}

/* ── Vorlage „Zielen" (24.10.2026) ── */
.werk-k__bild--rund { aspect-ratio: 1; border-radius: 50%; }
.werk-k__bild--rund img { object-fit: contain; }
.werk-hg { display: flex; flex-direction: column; gap: 10px; }
.werk-hg__bild { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }

/* ── Freiform-Stellen (24.10.2026, wie SceneTalk) ── */
.werk-formwahl { margin-top: 10px; }
.werk-formwahl .werk-chip { display: inline-flex; align-items: center; gap: 6px; }
.werk-formwahl .werk-chip svg { width: 18px; height: 18px; }
.werk-szene__umrisse { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.werk-umriss {
  fill: rgba(250, 204, 21, 0.18);
  stroke: #facc15;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: visiblePainted;
  cursor: pointer;
}
.werk-umriss.is-gewaehlt { fill: rgba(34, 197, 94, 0.24); stroke: #22c55e; stroke-width: 4; }
.werk-umriss--neu { fill: rgba(250, 204, 21, 0.10); stroke-dasharray: 6 4; pointer-events: none; }
.werk-stelle__nr--frei { pointer-events: none; }