/* =========================================================
WIFA-TRAINER GRUEN – neue Arbeitsversion
Unterscheidung zum alten lila WiFa-Trainer
========================================================= */
body {
background: linear-gradient(135deg, #eef8f1, #dff3e5);
}
.app-shell,
.main-layout,
.card,
.view,
.panel,
.content-card {
border-color: #b7dec2;
}
.header,
.app-header,
.topbar {
background: linear-gradient(135deg, #dff3e5, #c8ead2);
}
.nav-btn.active,
.primary-btn,
button.primary,
button.active {
background: linear-gradient(135deg, #4f9f68, #2f7d4c) !important;
color: #ffffff !important;
}
.progress-fill,
.result-mini-fill {
background: linear-gradient(135deg, #4f9f68, #2f7d4c) !important;
}
.section-title,
.stat-value,
.result-mini-title {
color: #245c3a;
}
.status,
.result-list-empty {
border-color: #b7dec2;
background: #f2fbf5;
}
input:focus,
textarea:focus,
select:focus {
border-color: #4f9f68 !important;
box-shadow: 0 0 0 3px rgba(79, 159, 104, 0.18) !important;
}
/* =========================================================
GRUENE TESTVERSION – starke Farbüberschreibung
========================================================= */
:root {
--wifa-gruen-hell: #eef8f1;
--wifa-gruen-mittel: #d8f0df;
--wifa-gruen-akzent: #3f9460;
--wifa-gruen-dunkel: #245c3a;
--wifa-gruen-border: #b7dec2;
}
/* Grundhintergrund */
html,
body {
background: linear-gradient(135deg, #eef8f1, #dff3e5) !important;
color: #163522 !important;
}
/* große Inhaltsflächen */
main,
.view,
.card,
.hero,
.start-hero,
.section-card,
.content-card,
.app-shell,
.main-layout {
background: #f6fcf8 !important;
border-color: #b7dec2 !important;
}
/* Navigation oben */
.nav-btn,
.dropdown > button,
button.nav-btn {
background: #dff3e5 !important;
color: #163522 !important;
border-color: #b7dec2 !important;
}
.nav-btn-split .nav-btn-label,
.nav-btn-split .nav-btn-arrow {
background: transparent !important;
background-color: transparent !important;
}
.nav-btn.active,
.nav-btn:hover,
.dropdown.open > button {
background: linear-gradient(135deg, #4f9f68, #2f7d4c) !important;
color: #ffffff !important;
}
.nav-btn {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
}
.nav-hamburger {
background: #dff3e5 !important;
border-color: #b7dec2 !important;
}
.nav-menu {
background: #ffffff !important;
border-color: #b7dec2 !important;
}
.site-footer {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 18px auto 0 !important;
width: 100% !important;
max-width: 1100px !important;
}
.secondary-btn {
border-color: #b7dec2 !important;
}
.primary-btn,
button.primary,
button.active {
background: linear-gradient(135deg, #4f9f68, #2f7d4c) !important;
color: #ffffff !important;
}
/* Überschriften und wichtige Texte */
h1,
h2,
h3,
.section-title,
.stat-value,
.result-mini-title {
color: #245c3a !important;
}
/* Boxen, Status, Ergebnisfelder */
.status,
.result-list-empty,
.result-mini-entry,
.solution-box,
.hinweis-box,
#hinweisOverlay .card {
background: #f2fbf5 !important;
border-color: #b7dec2 !important;
color: #163522 !important;
}
/* Fortschrittsbalken */
.progress-fill,
.result-mini-fill {
background: linear-gradient(135deg, #4f9f68, #2f7d4c) !important;
}
/* Eingabefelder */
input,
textarea,
select {
background: #ffffff !important;
border-color: #b7dec2 !important;
color: #163522 !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: #4f9f68 !important;
box-shadow: 0 0 0 3px rgba(79, 159, 104, 0.18) !important;
}
/* Kilian-Bubble */
#kilianBubbleButton,
.kilian-bubble-button,
.floating-kilian,
.floating-btn {
background: linear-gradient(135deg, #4f9f68, #2f7d4c) !important;
color: #ffffff !important;
}
/* Nutzungshinweis unten links */
#hinweisButton,
.hinweis-button,
.nutzungs-hinweis,
.notice-button {
background: #dff3e5 !important;
color: #245c3a !important;
border-color: #b7dec2 !important;
}
/* =========================================================
STARTSEITE / HERO ebenfalls grün überschreiben
========================================================= */
.hero,
.start-hero,
.welcome-card,
#startView .card,
#startView section,
#startView .hero-section {
background: linear-gradient(135deg, #f2fbf5, #e1f4e7) !important;
border-color: #b7dec2 !important;
color: #163522 !important;
}
/* großer Startbereich, falls er keine eigene Klasse hat */
#startView > div,
#startView .card,
#startView .content-card {
background: linear-gradient(135deg, #f2fbf5, #e1f4e7) !important;
}
/* Icon-Kreis auf der Startseite */
.hero-icon,
.start-icon,
#startView .icon-circle,
#startView .hero-emoji,
#startView .emoji-circle {
background: #d8f0df !important;
}
/* Texte auf der Startseite */
#startView h1,
#startView h2,
#startView h3 {
color: #245c3a !important;
}
#startView p,
#startView li,
#startView div {
color: #163522 !important;
}
#startView .hero-card {
background: linear-gradient(135deg, #e8f7ed, #f6fbf7) !important;
border: 1px solid #b7dec2;
box-shadow: 0 10px 26px rgba(36, 92, 58, 0.12);
}
#startView .hero-icon {
width: 172px;
height: 172px;
font-size: 82px;
background: #d0ebd8 !important;
box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.42), 0 8px 18px rgba(36, 92, 58, 0.12);
}
#startView .hero-text h1 {
margin-bottom: 8px;
font-size: 36px;
letter-spacing: 0;
}
#startView .start-head-block {
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding: 0 0 10px;
position: relative;
}
#startView .start-head-block::after {
content: "";
display: block;
width: 100%;
height: 4px;
margin-top: 2px;
border-radius: 999px;
background: #b794f6;
}
#startView #startUserGreeting {
margin: 14px 0 16px;
padding: 0;
border: 0;
background: transparent !important;
}
#startView #startUserGreeting .start-user-name {
display: inline;
margin-right: 4px;
color: #4a3970 !important;
font-size: 19px;
font-weight: 700;
font-style: italic;
}
#startView #startUserGreeting .start-user-welcome {
color: #4a3970 !important;
font-size: 16px;
font-weight: 700;
font-style: normal;
}
#startView .hero-text p {
color: #2d4a38 !important;
}
@media (max-width: 799px) {
#startView .hero-icon {
width: 136px;
height: 136px;
font-size: 66px;
}
}
/* falls der große lila Block über eine alte Klasse läuft */
.intro-card,
.welcome-section,
.start-card,
.landing-card {
background: linear-gradient(135deg, #f2fbf5, #e1f4e7) !important;
border-color: #b7dec2 !important;
}
/* =========================================================
Frage-ID direkt im Fragetext
========================================================= */
.frage-id-badge {
display: inline-flex;
align-items: center;
margin-right: 8px;
padding: 3px 8px;
border-radius: 999px;
background: #dff3e5;
border: 1px solid #b7dec2;
color: #245c3a;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
Thema abgeschlossen
========================================================= */
.thema-abgeschlossen-box {
padding: 18px;
border: 1px solid #b7dec2;
border-radius: 14px;
background: #f2fbf5;
color: #163522;
line-height: 1.6;
font-size: 15px;
}
.thema-abgeschlossen-box strong {
color: #245c3a;
}
/* =========================================================
Gesetzeslinks
========================================================= */
.gesetzeslinks-liste {
display: grid;
gap: 14px;
margin-top: 14px;
}
.gesetzeslinks-gruppe {
display: grid;
gap: 10px;
}
.gesetzeslinks-gruppe h3 {
margin: 12px 0 2px;
color: #245c3a;
}
.gesetzeslink-card {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
border: 1px solid #b7dec2;
border-radius: 14px;
background: #f2fbf5;
color: #163522;
text-decoration: none;
}
.gesetzeslink-card:hover {
background: #dff3e5;
}
.gesetzeslink-kurz {
min-width: 58px;
padding: 6px 8px;
border-radius: 999px;
background: #dff3e5;
color: #245c3a;
font-weight: 800;
text-align: center;
}
.gesetzeslink-inhalt {
display: grid;
gap: 4px;
line-height: 1.4;
}
.gesetzeslink-inhalt span {
font-size: 13px;
}
/* =========================================================
Auth-View: gezielte Eingabefeld-Stile (nur innerhalb #authView)
Sorgen für einheitliche Breite, Höhe, Innenabstände und Fokus
========================================================= */
#authView input[type="text"],
#authView input[type="password"],
#authView input[type="email"] {
width: 100%;
height: 52px;
box-sizing: border-box;
padding: 12px 14px;
font-size: 16px;
border: 1px solid var(--wifa-gruen-border, #b7dec2);
border-radius: 14px;
background: #ffffff;
color: inherit;
outline: none;
}
#authView input[type="text"]:focus,
#authView input[type="password"]:focus,
#authView input[type="email"]:focus {
border-color: var(--wifa-gruen-accent, #3f9460);
box-shadow: 0 0 0 3px rgba(79,159,104,0.12);
}
/* Checkbox nicht beeinflussen */
#authView input[type="checkbox"] {
width: auto;
height: auto;
padding: 0;
}
/* Ensure inner containers fit and align */
#authView .nav-btn {
flex: none;
}
/* Auth tabs: two equal columns, prevent overflow and remove transforms/positioning */
#authView .auth-tabs {
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
#authView .auth-tabs .nav-btn {
width: 100%;
min-width: 0;
margin: 0;
position: static !important;
transform: none !important;
box-sizing: border-box;
}
/* Buttons row inside auth should be side-by-side on desktop, stacked on mobile */
#authView .button-row {
display: flex;
gap: 10px;
align-items: center;
}
#authView .button-row > button {
flex: 1 1 0;
min-width: 0;
}
#startUserGreeting {
margin: 0 0 14px;
font-size: 16px;
}
#startUserGreeting .start-user-name {
color: #245c3a !important;
font-size: 18px;
font-weight: 700;
}
#startUserGreeting .start-user-welcome {
font-size: 16px;
font-weight: 400;
}
.account-profile {
text-align: left;
}
.account-greeting {
margin-bottom: 16px;
color: #245c3a;
font-size: 18px;
font-weight: 700;
}
.account-section {
margin-top: 16px;
}
.account-profile .account-readonly,
.account-profile .account-verification-status {
margin-top: 10px;
font-size: 14px;
}
.account-profile .account-verification-status.is-verified {
color: #245c3a;
font-weight: 700;
}
.account-profile .account-actions {
max-width: 420px;
}
.account-display-name {
margin-bottom: 8px;
font-weight: 700;
}
.account-edit-link {
width: auto;
border: 0;
padding: 0;
background: transparent;
color: #245c3a;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
#displayNameEditArea {
margin-top: 12px;
}
@media (max-width: 520px) {
.title-row .nav-menu {
width: min(350px, calc(100% - 40px));
}
#authView > .card {
width: calc(100% - 32px);
padding-left: 12px;
padding-right: 12px;
}
#authView .button-row {
flex-direction: column;
}
}
/* Desktop: make auth inputs narrower (approx left half), keep mobile 100% */
@media (min-width: 521px) {
#authView input[type="text"],
#authView input[type="password"],
#authView input[type="email"] {
width: 48%;
display: inline-block;
box-sizing: border-box;
}
/* keep buttons side-by-side and equal width */
#authView .button-row {
display: flex;
gap: 10px;
}
#authView .button-row > button {
flex: 1 1 0;
min-width: 0;
}
#authView .account-profile input[type="text"] {
width: 48%;
}
}
.lernstand-head-block {
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding: 0 0 10px;
position: relative;
}
.lernstand-head-block::after {
content: "";
display: block;
width: 100%;
height: 4px;
margin-top: 2px;
border-radius: 999px;
background: #b794f6;
}
.lernstand-content {
display: grid;
gap: 22px;
}
.lernstand-metrics,
.lernstand-overview,
.lernstand-strength-grid {
display: grid;
gap: 12px;
align-items: stretch;
}
.lernstand-metric,
.lernstand-summary-card,
.lernstand-subject,
.lernstand-analysis-card,
.lernstand-error-card {
border: 1px solid #b7dec2;
border-radius: 12px;
background: #f2fbf5;
padding: 14px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* Kennzahlen: neutral gehalten, damit Gruen/Lila/warme Akzente andernorts hervorstechen */
.lernstand-metric {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px;
background: #f8f7fc;
border-color: #e2deef;
}
.lernstand-metric-label,
.lernstand-bar-detail,
.lernstand-subject-stats,
.lernstand-topic,
.lernstand-subject-toggle small {
font-size: 13px;
}
.lernstand-metric-label {
color: #245c3a;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.lernstand-metric-value {
margin: 2px 0;
color: #245c3a;
font-size: 26px;
font-weight: 800;
}
.lernstand-metric-detail {
margin-top: auto;
color: #4a3970;
font-size: 13px;
}
.lernstand-section,
.lernstand-bar-row,
.lernstand-topic {
display: grid;
gap: 10px;
}
.lernstand-development-grid {
display: grid;
gap: 18px;
}
.lernstand-attempt-chart {
border: 1px solid #d9c7ff;
border-radius: 12px;
background: #f6f2ff;
padding: 14px;
}
.lernstand-attempt-chart h3 {
margin: 0 0 10px;
font-size: 16px;
color: #245c3a;
}
.lernstand-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 10px;
font-size: 13px;
color: #4a3970;
}
.lernstand-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lernstand-chart-legend-dot {
width: 10px;
height: 10px;
border-radius: 3px;
display: inline-block;
}
.lernstand-chart-legend-dot-bar {
background: #9163d6;
}
.lernstand-chart-legend-dot-line {
background: #2f7d4c;
border-radius: 999px;
}
.lernstand-chart-scroll {
overflow-x: auto;
}
.lernstand-chart-scroll svg {
display: block;
width: 100%;
min-width: 320px;
height: 180px;
}
.audio-einstellungen {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 14px 0 0;
padding: 12px;
border: 1px solid #b7dec2;
border-radius: 10px;
background: #f2fbf5;
}
.audio-einstellungen legend {
flex-basis: 100%;
color: #245c3a;
font-weight: 700;
}
.audio-einstellungen label {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 32px;
font-size: 14px;
}
#podcastPauseEinstellung {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
gap: 8px 14px;
}
#podcastPauseEinstellung[hidden] {
display: none;
}
#wissenKarteikartenBereich .button-row button[hidden] {
display: none;
}
@media (min-width: 521px) {
#wissenKarteikartenBereich .button-row {
display: flex;
flex-wrap: wrap;
}
#wissenKarteikartenBereich .button-row button {
flex: 1 1 180px;
}
}
.lernstand-chart-grid,
.lernstand-chart-axis {
stroke: #d9c7ff;
stroke-width: 1;
}
.lernstand-chart-bar {
fill: #9163d6;
}
.lernstand-chart-x-label,
.lernstand-chart-y-label {
fill: #4a3970;
font-size: 12px;
}
.lernstand-chart-x-label {
text-anchor: middle;
}
.lernstand-chart-y-label {
text-anchor: end;
}
.lernstand-chart-y-label-percent {
text-anchor: start;
fill: #2f7d4c;
}
.lernstand-chart-line {
fill: none;
stroke: #2f7d4c;
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.lernstand-chart-point {
fill: #ffffff;
stroke: #2f7d4c;
stroke-width: 2;
}
@media (max-width: 520px) {
.lernstand-chart-scroll svg {
height: 150px;
}
}
.lernstand-summary-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.lernstand-summary-card h3 {
margin: 0 0 12px;
font-size: 16px;
}
.lernstand-bar-label,
.lernstand-subject-heading,
.lernstand-subject-stats {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.lernstand-bar-label strong {
font-size: 16px;
color: #245c3a;
}
.lernstand-bar {
height: 12px;
overflow: hidden;
border-radius: 999px;
background: #d8f0df;
box-shadow: inset 0 1px 2px rgba(36, 92, 58, 0.14);
}
.lernstand-bar-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(135deg, #4f9f68, #2f7d4c);
transition: width 0.3s ease;
}
.lernstand-subject-list,
.lernstand-topics {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: stretch;
}
.lernstand-topic {
min-width: 0;
overflow-wrap: anywhere;
}
.lernstand-analysis-group {
display: grid;
gap: 22px;
}
.lernstand-analysis-card {
display: flex;
flex-direction: column;
gap: 8px;
background: #fbfbfe;
border: 1px solid #e2deef;
border-left: 4px solid transparent;
}
.lernstand-analysis-card .section-title {
margin-bottom: 4px;
}
/* Staerkste Themen: dezenter gruener Hintergrund, gruener Akzent */
.lernstand-strong-card {
background: #e3f4e8;
border-color: #b6ddc2;
border-left-color: #2f7d4c;
}
.lernstand-strong-card .lernstand-bar-fill {
background: linear-gradient(135deg, #4f9f68, #2f7d4c);
}
/* Wiederholen: dezenter orange/gelblicher Hintergrund, warmer Akzent statt gruen */
.lernstand-repeat-card {
background: #fbe8c8;
border-color: #ecc98a;
border-left-color: #c97f1f;
}
.lernstand-repeat-card .lernstand-bar {
background: #f6e6c4;
}
.lernstand-repeat-card .lernstand-bar-fill {
background: linear-gradient(135deg, #e3a53d, #c97f1f);
}
.lernstand-repeat-card .lernstand-bar-label strong {
color: #8a5a12;
}
.lernstand-repeat-empty p {
margin: 0;
color: #8a5a12;
font-weight: 700;
}
.lernstand-repeat-empty small {
color: #4a3970;
font-size: 13px;
}
/* Offene Fehler: neutrale Flaeche, dezenter Rose-Akzent zur Abgrenzung von positiven Bereichen */
.lernstand-error-card {
background: #fbfbfe;
border-color: #f0d6d1;
border-left: 4px solid #c0554a;
}
.lernstand-error-card p {
margin: 0;
color: #4a3970;
}
.lernstand-subject,
.lernstand-topics-panel {
--subject-bg-start: #f5fbf6;
--subject-bg-end: #ebf7ee;
--subject-border: #d9eadb;
--subject-accent: #8ec39a;
--subject-shadow: rgba(31, 74, 50, 0.08);
--subject-status-bg: rgba(255, 255, 255, 0.22);
--progress-fill: var(--subject-accent);
align-self: stretch;
padding: 12px 14px 14px;
border: 1px solid var(--subject-border);
border-left: 7px solid var(--subject-accent);
background: linear-gradient(135deg, var(--subject-bg-start), var(--subject-bg-end));
color: #1f2f24;
box-shadow: 0 2px 8px var(--subject-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-neutral {
--subject-bg-start: #f4fbf4;
--subject-bg-end: #e7f5e7;
--subject-border: #d9ebd8;
--subject-accent: #8ebd93;
--progress-fill: #8ebd93;
--subject-status-bg: rgba(142, 189, 147, 0.14);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-good-4 {
--subject-bg-start: #eafafc;
--subject-bg-end: #bfe5ee;
--subject-border: #b7dfe8;
--subject-accent: #6bb3c4;
--progress-fill: #6bb3c4;
--subject-status-bg: rgba(107, 179, 196, 0.12);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-good-3 {
--subject-bg-start: #edf9fc;
--subject-bg-end: #cfeaf2;
--subject-border: #c3e0ec;
--subject-accent: #7eb7c8;
--progress-fill: #7eb7c8;
--subject-status-bg: rgba(126, 183, 200, 0.12);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-good-2 {
--subject-bg-start: #f0f9fb;
--subject-bg-end: #dfeef7;
--subject-border: #d0e8f3;
--subject-accent: #9ccfe0;
--progress-fill: #9ccfe0;
--subject-status-bg: rgba(156, 207, 224, 0.12);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-bad-3 {
--subject-bg-start: #fff9f1;
--subject-bg-end: #f7e2bf;
--subject-border: #f0d7a8;
--subject-accent: #e7a55a;
--progress-fill: #e7a55a;
--subject-status-bg: rgba(231, 165, 90, 0.13);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-bad-2 {
--subject-bg-start: #fff4e8;
--subject-bg-end: #f8d6aa;
--subject-border: #efc98a;
--subject-accent: #e2913e;
--progress-fill: #e2913e;
--subject-status-bg: rgba(226, 145, 62, 0.12);
}
:is(.lernstand-subject, .lernstand-topics-panel).status-bad-1 {
--subject-bg-start: #ffeedc;
--subject-bg-end: #f9c789;
--subject-border: #efba74;
--subject-accent: #d9822d;
--progress-fill: #d9822d;
--subject-status-bg: rgba(217, 130, 45, 0.12);
}
.lernstand-subject-heading > span:first-child {
display: grid;
gap: 2px;
}
.lernstand-subject-status {
display: inline-flex;
align-items: center;
width: fit-content;
margin-top: 8px;
padding: 4px 8px;
border-radius: 999px;
background: var(--subject-status-bg);
border: 1px solid rgba(31, 47, 36, 0.08);
font-size: 11px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: lowercase;
color: #2c4434;
}
.lernstand-subject-status.badge-neutral {
background: rgba(142, 189, 147, 0.16);
border-color: rgba(110, 160, 116, 0.18);
color: #2c4a35;
}
.lernstand-subject-status.badge-good-start,
.lernstand-subject-status.badge-safe,
.lernstand-subject-status.badge-mostly-safe {
background: rgba(118, 178, 198, 0.15);
border-color: rgba(86, 151, 176, 0.18);
color: #234d59;
}
.lernstand-subject-status.badge-mixed {
background: rgba(240, 201, 110, 0.16);
border-color: rgba(206, 156, 62, 0.18);
color: #685220;
}
.lernstand-subject-status.badge-unsafe {
background: rgba(216, 138, 58, 0.13);
border-color: rgba(188, 112, 40, 0.18);
color: #744417;
}
.lernstand-subject-stats {
margin-top: 10px;
}
.lernstand-subject-progress {
position: relative;
height: 8px;
margin-top: 8px;
border-radius: 999px;
overflow: hidden;
background: rgba(74, 92, 79, 0.08);
border: 1px solid rgba(74, 92, 79, 0.08);
}
.lernstand-subject-progress-fill {
display: block;
height: 100%;
min-width: 4px;
border-radius: inherit;
background: var(--progress-fill);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.lernstand-subject.progress-1 .lernstand-subject-progress-fill {
opacity: 0.55;
}
.lernstand-subject.progress-2 .lernstand-subject-progress-fill {
opacity: 0.7;
}
.lernstand-subject.progress-3 .lernstand-subject-progress-fill {
opacity: 0.84;
}
.lernstand-subject.progress-4 .lernstand-subject-progress-fill {
opacity: 1;
}
.lernstand-topics {
grid-template-columns: 1fr;
}
.lernstand-topics-panel {
grid-column: 1 / -1;
min-width: 0;
margin: 0;
padding: 18px 14px 14px;
border-radius: 14px;
}
/* The expanded head and its full-row body form a single subject surface.
Only this decorative connector is positioned; all content stays in grid flow. */
.lernstand-subject.is-expanded,
.lernstand-topics-panel {
background: linear-gradient(var(--subject-bg-start), var(--subject-bg-start));
}
.lernstand-subject.is-expanded {
position: relative;
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: none;
}
.lernstand-subject.is-expanded::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 1;
left: -7px;
right: -1px;
top: 100%;
height: 14px;
box-sizing: border-box;
background: var(--subject-bg-start);
border-left: 7px solid var(--subject-accent);
border-right: 1px solid var(--subject-border);
}
.lernstand-topics-panel.starts-at-left {
border-top-left-radius: 0;
}
.lernstand-topics-panel[hidden] {
display: none !important;
}
/* =========================================================
Lerntexte & Podcast
========================================================= */
.lerntexte-head-block {
width: fit-content;
max-width: 100%;
box-sizing: border-box;
padding: 0 0 10px;
position: relative;
}
.lerntexte-head-block::after {
content: "";
display: block;
width: 100%;
height: 4px;
margin-top: 2px;
border-radius: 999px;
background: #b794f6;
}
#lerntexteFachGrid .subject-btn {
width: auto;
}
@media (min-width: 640px) {
#lerntexteFachGrid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
#lerntexteInhaltBereich {
max-width: 920px;
margin: 16px auto 0;
padding: 0 18px 32px;
box-sizing: border-box;
}
.lerntexte-audio-progress {
margin: 0 0 18px;
padding: 12px 14px 10px;
border: 1px solid rgba(122, 98, 171, 0.18);
border-radius: 14px;
background: linear-gradient(180deg, rgba(200, 181, 245, 0.10), rgba(255, 255, 255, 0.65));
box-shadow: 0 2px 10px rgba(80, 60, 122, 0.06);
}
.lerntexte-audio-progress-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
color: #2d1f46;
font-weight: 600;
}
.lerntexte-audio-progress-header strong {
color: #4a3970;
}
.lerntexte-audio-progress-track {
position: relative;
width: 100%;
height: 10px;
border-radius: 999px;
background: rgba(132, 111, 192, 0.14);
overflow: hidden;
}
.lerntexte-audio-progress-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #b794f6 0%, #7c3aed 55%, #5b21b6 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.lerntexte-audio-progress-meta {
margin-top: 8px;
color: #5b4d7a;
font-size: 0.82rem;
letter-spacing: 0.02em;
}
.lerntexte-kapitel-titel {
margin: 34px 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid #eadfff;
color: #221344;
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.35;
letter-spacing: 0.01em;
}
.lerntexte-einheit {
margin: 0 0 28px;
padding: 0 0 18px;
border-bottom: 1px solid rgba(122, 98, 171, 0.18);
}
.lerntexte-einheit:last-child {
border-bottom: none;
padding-bottom: 0;
}
.lerntexte-einheit-titel {
margin: 0 0 18px;
color: #4a3970;
font-size: clamp(1.1rem, 1.4vw, 1.35rem);
line-height: 1.35;
font-weight: 700;
}
.lerntexte-text {
max-width: none;
color: #2d1f46;
font-size: clamp(1.05rem, 1.1vw + 0.8rem, 1.14rem);
line-height: 1.7;
text-align: left;
}
.lerntexte-text p {
margin: 0 0 16px;
}
.lerntexte-text p:last-child {
margin-bottom: 0;
}
.lerntexte-text p + p {
margin-top: 4px;
}
.podcast-word-active {
background: rgba(59, 130, 246, 0.18);
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.45);
color: #1d4ed8;
transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.podcast-word-spoken {
color: #2563eb;
}
.lerntexte-abschnitt {
display: block;
margin: 0 0 10px;
color: #4a3970;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.72rem;
line-height: 1.45;
}
.lerntexte-sektionsblock,
.lerntexte-kernidee {
margin: 18px 0 20px;
border: 1px solid rgba(122, 98, 171, 0.18);
border-radius: 14px;
background: rgba(255, 255, 255, 0.4);
padding: 16px 18px;
box-shadow: 0 1px 0 rgba(122, 98, 171, 0.04);
}
.lerntexte-kernidee {
background: linear-gradient(180deg, rgba(138, 115, 198, 0.09), rgba(194, 220, 184, 0.09));
border-color: rgba(118, 92, 177, 0.18);
}
.lerntexte-sektionsblock .lerntexte-abschnitt,
.lerntexte-kernidee .lerntexte-abschnitt {
margin: 0 0 8px;
}
.lerntexte-kernidee .lerntexte-abschnitt {
color: #473266;
}
.lerntexte-section-header {
margin: 22px 0 10px;
color: #4a3970;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 640px) {
#lerntexteInhaltBereich {
padding-left: 12px;
padding-right: 12px;
}
.lerntexte-einheit {
margin-bottom: 22px;
padding-bottom: 16px;
}
.lerntexte-kapitel-titel {
margin-top: 26px;
}
.lerntexte-text {
font-size: 1rem;
line-height: 1.7;
}
}
.lernstand-error-button {
max-width: 260px;
}
@media (min-width: 521px) {
.lernstand-metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.quizlernstand-subject-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lernstand-overview,
.lernstand-strength-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 700px) {
.lernstand-subject-list {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.lernstand-topics {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
}
@media (min-width: 1100px) {
.lernstand-topics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lernstand-topic-toggle,
.lernstand-theme-btn,
.fehleranalyse-toggle,
.fehleranalyse-resolved-toggle,
.fehleranalyse-repeat {
width: auto;
margin-top: 12px;
padding: 8px 12px;
font-size: 13px;
}
.lernstand-theme-btn {
margin-top: 10px;
padding: 6px 10px;
font-size: 12px;
display: inline-flex;
width: fit-content;
max-width: max-content;
align-self: flex-start;
justify-self: start;
}
.lernstand-theme-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.lernstand-topic-stats {
display: grid;
gap: 6px;
margin-top: 8px;
}
.lernstand-topic-stat-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: baseline;
font-size: 13px;
}
.lernstand-topic-stat-label {
color: #4a3970;
font-weight: 600;
}
.lernstand-topic-stat-value {
color: #245c3a;
font-weight: 700;
}
.lernstand-stat-fullpoints .lernstand-topic-stat-label,
.lernstand-stat-fullpoints .lernstand-topic-stat-value {
color: #18703c;
font-weight: 800;
}
.lernstand-stat-open-errors.is-error .lernstand-topic-stat-label,
.lernstand-stat-open-errors.is-error .lernstand-topic-stat-value {
color: #b42318;
font-weight: 800;
}
.lernstand-stat-open-errors.is-clear .lernstand-topic-stat-label,
.lernstand-stat-open-errors.is-clear .lernstand-topic-stat-value {
color: #245c3a;
}
.lernstand-topic-head {
margin-bottom: 4px;
}
.lernstand-topic-head strong {
font-size: 14px;
color: #1f2f24;
overflow-wrap: anywhere;
}
.fehleranalyse-subject,
.fehleranalyse-question {
display: grid;
gap: 8px;
border: 1px solid #b7dec2;
border-radius: 12px;
background: #f2fbf5;
padding: 14px;
}
.fehleranalyse-subject {
gap: 12px;
}
.fehleranalyse-subject-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.fehleranalyse-subject-heading span,
.fehleranalyse-topic span,
.fehleranalyse-question span {
font-size: 13px;
}
.fehleranalyse-topic {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding-top: 10px;
border-top: 1px solid #b7dec2;
}
.fehleranalyse-topic > div:first-child {
display: grid;
gap: 2px;
}
.fehleranalyse-questions {
display: grid;
grid-column: 1 / -1;
gap: 8px;
margin-top: 2px;
}
.fehleranalyse-questions[hidden] {
display: none !important;
}
@media (max-width: 520px) {
.fehleranalyse-topic {
grid-template-columns: 1fr;
align-items: stretch;
}
}
.fehleranalyse-repeat:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.pruefungslernstand-overview {
display: grid;
gap: 12px;
}
.pruefungslernstand-teilbereich {
display: grid;
gap: 10px;
border: 1px solid #b7dec2;
border-radius: 12px;
background: #f2fbf5;
padding: 14px;
}
.pruefungslernstand-teilbereich h3 {
margin: 0;
font-size: 16px;
}
.pruefungslernstand-einheiten {
display: grid;
gap: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #b7dec2;
}
.pruefungslernstand-einheiten[hidden] {
display: none !important;
}
.pruefungslernstand-einheit {
display: grid;
gap: 4px;
font-size: 13px;
border: 1px solid #b7dec2;
border-radius: 10px;
background: #ffffff;
padding: 10px 12px;
}
.pruefungslernstand-entry {
display: grid;
gap: 8px;
border: 1px solid #b7dec2;
border-radius: 12px;
background: #f2fbf5;
padding: 14px;
}
.pruefungslernstand-entry-head,
.pruefungslernstand-entry-score {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
font-size: 13px;
}
.pruefungslernstand-status {
font-weight: 700;
}
.pruefungslernstand-status-bestanden {
color: #16a34a;
}
.pruefungslernstand-status-nicht_bestanden {
color: #dc2626;
}
.pruefungslernstand-detail {
display: grid;
gap: 10px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid #b7dec2;
}
.pruefungslernstand-detail[hidden] {
display: none !important;
}
.pruefungslernstand-task {
display: grid;
gap: 6px;
font-size: 13px;
border: 1px solid #b7dec2;
border-radius: 10px;
background: #ffffff;
padding: 12px;
}
.pruefungslernstand-task p {
margin: 0;
line-height: 1.5;
}
.pruefungslernstand-skizzen-hinweis {
color: #92650c;
}
@media (max-width: 520px) {
.pruefungslernstand-entry-head,
.pruefungslernstand-entry-score {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
/* =========================================================
Quiz
========================================================= */
.quiz-card {
display: grid;
gap: 14px;
}
.quiz-mode {
display: grid;
gap: 6px;
max-width: 420px;
}
.quiz-mode label {
font-size: 13px;
font-weight: 700;
color: #245c3a;
}
.quiz-mode select {
min-height: 42px;
border: 1px solid #9fcdb0;
border-radius: 8px;
background: #fff;
padding: 8px 10px;
color: inherit;
font: inherit;
}
.quiz-progress {
font-size: 14px;
font-weight: 700;
color: #245c3a;
}
.quiz-optionen {
display: grid;
gap: 10px;
}
.quiz-option {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #b7dec2;
border-radius: 12px;
background: #fff;
padding: 12px 14px;
cursor: pointer;
}
.quiz-option-letter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
border-radius: 999px;
background: #dff3e5;
color: #245c3a;
font-weight: 700;
font-size: 13px;
}
.quiz-option-text {
flex: 1 1 0;
line-height: 1.5;
}
.quiz-option-selected {
border-color: #4f9f68;
box-shadow: 0 0 0 2px rgba(79, 159, 104, 0.2);
}
.quiz-option-richtig {
border-color: #16a34a;
background: #e8f8ee;
}
.quiz-option-falsch {
border-color: #dc2626;
background: #fdeaea;
}
.quiz-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.quiz-ergebnis {
border-radius: 12px;
padding: 12px 14px;
font-weight: 700;
}
.quiz-ergebnis-richtig {
background: #e8f8ee;
color: #16a34a;
}
.quiz-ergebnis-falsch {
background: #fdeaea;
color: #dc2626;
}
.quiz-ergebnis[hidden],
.quiz-card[hidden],
.quiz-card [hidden] {
display: none !important;
}
.quiz-session-stats {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
}
.quiz-stat-richtig strong {
color: #16a34a;
}
.quiz-stat-falsch strong {
color: #dc2626;
}
/* =========================================================
Lernstand – Quiz (Donut-Diagramm)
========================================================= */
.quizlernstand-chart {
display: grid;
justify-items: center;
gap: 14px;
padding: 8px 0;
}
.quizlernstand-filter-row {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0;
}
.quizlernstand-filter-row label {
color: #245c3a;
font-weight: 700;
}
.quizlernstand-filter-row select {
min-width: 210px;
}
.quizlernstand-subject-summary {
display: grid;
gap: 12px;
}
.quizlernstand-summary-card {
position: relative;
overflow: hidden;
min-width: 0;
padding: 18px;
}
.quizlernstand-summary-strong {
border: 2px solid #2f7d4c;
background: #e4f6e9;
box-shadow: 0 6px 18px rgba(47, 125, 76, 0.18);
}
.quizlernstand-summary-strong::before,
.quizlernstand-summary-weak::before {
position: absolute;
inset: 0 auto 0 0;
width: 6px;
content: '';
}
.quizlernstand-summary-weak {
border: 2px solid #c2414d;
background: #fff0f1;
box-shadow: 0 6px 18px rgba(194, 65, 77, 0.16);
}
.quizlernstand-summary-strong::before {
background: #2f7d4c;
}
.quizlernstand-summary-weak::before {
background: #c2414d;
}
.quizlernstand-summary-strong .lernstand-metric-label {
color: #216238;
}
.quizlernstand-summary-weak .lernstand-metric-label {
color: #a83240;
}
.quizlernstand-summary-subject {
overflow-wrap: anywhere;
color: #173f29;
font-size: 24px;
line-height: 1.15;
}
.quizlernstand-summary-weak .quizlernstand-summary-subject {
color: #762b35;
}
.quizlernstand-summary-strong .lernstand-metric-detail,
.quizlernstand-summary-weak .lernstand-metric-detail {
color: #374151;
font-weight: 600;
}
.quizlernstand-daily-grid {
display: grid;
gap: 18px;
margin-top: 18px;
}
.quizlernstand-daily-chart {
overflow: hidden;
border: 1px solid #d9c7ff;
border-radius: 12px;
background: #f6f2ff;
padding: 14px;
}
.quizlernstand-daily-chart h3 {
margin: 0 0 10px;
color: #245c3a;
font-size: 16px;
}
.quizlernstand-chart-scroll {
overflow-x: auto;
}
.quizlernstand-chart-scroll svg {
display: block;
width: 100%;
min-width: 320px;
height: 220px;
}
.quizlernstand-chart-grid,
.quizlernstand-chart-axis {
stroke: #d9c7ff;
stroke-width: 1;
}
.quizlernstand-chart-bar {
fill: #9163d6;
}
.quizlernstand-chart-x-label,
.quizlernstand-chart-y-label {
fill: #4a3970;
font-size: 12px;
}
.quizlernstand-chart-x-label {
text-anchor: middle;
}
.quizlernstand-chart-y-label {
text-anchor: end;
}
.quizlernstand-chart-line {
fill: none;
stroke: #2f7d4c;
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.quizlernstand-chart-point {
fill: #fff;
stroke: #2f7d4c;
stroke-width: 2;
}
.quizlernstand-donut-wrap {
position: relative;
width: 200px;
max-width: 100%;
aspect-ratio: 1 / 1;
}
.quizlernstand-donut {
width: 100%;
height: 100%;
border-radius: 50%;
}
.quizlernstand-donut-hole {
position: absolute;
inset: 22px;
border-radius: 50%;
background: #fff;
display: grid;
justify-items: center;
align-content: center;
gap: 2px;
box-shadow: 0 0 0 1px #b7dec2;
}
.quizlernstand-donut-hole strong {
font-size: 22px;
color: #245c3a;
}
.quizlernstand-donut-hole span {
font-size: 12px;
color: #4b5563;
}
.quizlernstand-legende {
display: grid;
gap: 8px;
font-size: 14px;
}
.quizlernstand-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.quizlernstand-dot-richtig {
background: #2f7d4c;
}
.quizlernstand-dot-falsch {
background: #dc2626;
}
.quizlernstand-fortschritt {
text-align: center;
font-weight: 700;
color: #245c3a;
}
/* =========================================================
Circle Harbor Company Info (details/summary)
========================================================= */
.circle-harbor-info {
background: #ffffff;
border-radius: 18px;
padding: 0;
margin-bottom: 14px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
border: 1px solid #eadfff;
overflow: hidden;
}
.circle-harbor-info > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease;
}
.circle-harbor-info > summary:hover {
background-color: #faf7ff;
}
.circle-harbor-info > summary:focus-visible {
outline: 2px solid #b794f6;
outline-offset: -2px;
}
.circle-harbor-summary-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.circle-harbor-summary-icon {
font-size: 20px;
flex-shrink: 0;
}
.circle-harbor-summary-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.circle-harbor-summary-title {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #221344;
}
.circle-harbor-summary-subtitle {
margin: 0;
font-size: 13px;
color: #5a4a80;
line-height: 1.4;
}
.circle-harbor-summary-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #4a3970;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.circle-harbor-info[open] > summary .circle-harbor-summary-arrow {
transform: rotate(180deg);
}
.circle-harbor-info > div {
padding: 0 16px 16px 16px;
border-top: 1px solid #eadfff;
}
.circle-harbor-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.circle-harbor-content h3 {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #221344;
}
.circle-harbor-content p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #3d2d63;
}
.circle-harbor-content p + p {
margin-top: 10px;
}
/* Circle Harbor hint on homepage */
.circle-harbor-hint {
background: linear-gradient(135deg, #f3ebff, #efe7ff);
border: 1px solid #d8c8f8;
border-radius: 18px;
padding: 18px;
margin-bottom: 14px;
box-shadow: 0 4px 14px rgba(80, 45, 140, 0.08);
}
.circle-harbor-hint h3 {
margin: 0 0 8px 0;
font-size: 17px;
font-weight: bold;
color: #221344;
}
.circle-harbor-hint p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #3d2d63;
}
@media (max-width: 520px) {
.circle-harbor-info > summary {
padding: 14px;
}
.circle-harbor-info > div {
padding: 0 14px 14px 14px;
}
.circle-harbor-summary-title {
font-size: 15px;
}
.circle-harbor-summary-subtitle {
font-size: 12px;
}
.circle-harbor-hint {
padding: 14px;
}
.circle-harbor-hint h3 {
font-size: 16px;
}
.circle-harbor-hint p {
font-size: 14px;
}
}