/* ========================================================================== Clevero Design-System (Prototyp) Verspielt + hochwertig: runde Formen, "chunky" 3D-Buttons, sanfte Animationen, Nunito als freundliche Rundschrift. ========================================================================== */ :root { /* Navy = Struktur/Primaerfarbe, Orange/Amber = XP/Gamification, Teal = Akzent (Ferien) - alle drei aus dem Clevero-Logo (Loewe mit Brille/Buch in Navy, Gluehbirne in Teal). */ --violet-500: #3F5D96; --violet-600: #2C4676; --violet-700: #21365D; --violet-800: #182849; --violet-950: #0B1424; --teal-50: #EFFAF8; --teal-100: #D6F3EE; --teal-300: #6DDBCB; --teal-400: #35C2AF; --teal-500: #1FAE9A; --teal-700: #106259; --ink: #172542; /* Überschriften / Primärtext */ --ink-soft: #64728C; /* Sekundärtext */ --amber: #F5900E; /* XP */ --amber-deep: #D9720A; --flame: #FF6B35; /* Streak */ --green-100: #DCFCE7; --green-600: #16A34A; --green-700: #15803D; --red-100: #FEE2E2; --red-600: #DC2626; --red-700: #B91C1C; --canvas: #F5F7FB; /* Seitenhintergrund */ --surface: #FFFFFF; --bg-soft: #F2F5FA; /* zarter Flächen-Hintergrund (Hover/Chips) – war nur via Fallback genutzt */ --line: #E8EDF6; /* zarte navy Linie */ --line-strong: #CFD9EC; --radius-s: 12px; --radius-m: 16px; --radius-l: 24px; --radius-pill: 999px; /* Weiche, gestufte Schatten (statt harter 3D-Offsets) - moderner, cleaner Look */ --shadow-card: 0 1px 2px rgba(23, 37, 66, 0.04), 0 10px 28px rgba(23, 37, 66, 0.07); --shadow-card-hover: 0 2px 6px rgba(23, 37, 66, 0.06), 0 18px 44px rgba(23, 37, 66, 0.12); --shadow-btn: 0 6px 16px rgba(44, 70, 118, 0.28); --shadow-btn-hover: 0 10px 22px rgba(44, 70, 118, 0.34); --shadow-soft: 0 1px 2px rgba(23, 37, 66, 0.05); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; /* kein grauer Tap-Flash am Handy/Tablet */ } /* Das hidden-Attribut muss immer greifen - sonst ueberstimmen Regeln wie ".review-actions { display: flex }" oder "#study-done { display: flex }" das eingebaute [hidden] { display: none } (Author-Styles schlagen UA-Styles). */ [hidden] { display: none !important; } body { margin: 0; font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--canvas); min-height: 100vh; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overscroll-behavior-y: none; /* kein versehentliches Pull-to-Refresh -> App-Gefühl */ overflow-x: hidden; /* Sicherheitsnetz gegen horizontales Wackeln auf sehr schmalen Handys (<360px). Auf propagiert der Wert auf den Viewport, das body bleibt effektiv visible -> sticky Header bleibt intakt (gleiches erprobte Muster wie .lp-body auf der Landing). */ } /* Premium-Feinschliff: snappy Taps, keine störende Markierung auf Bedienelementen, dezent gebrandete Textauswahl. */ ::selection { background: rgba(44, 70, 118, 0.18); } button, .btn, .nav-link, [role="button"] { touch-action: manipulation; /* schnellere Taps, kein Doppeltipp-Zoom */ user-select: none; } /* -------------------------------------------------------------------------- Header: Verlaufs-Banner mit Logo, Level-Pille, XP-Bar (Schimmer) & Streak -------------------------------------------------------------------------- */ .header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #E7EDF6; backdrop-filter: blur(6px); padding: 0.4rem 1.5rem; position: sticky; top: 0; z-index: 10; } .header-brand { display: inline-flex; align-items: center; gap: 0.6rem; } .header-logo-link { display: inline-flex; line-height: 0; cursor: pointer; transition: transform 0.12s ease; } .header-logo-link:hover { transform: scale(1.04); } .header-logo { height: 60px; width: auto; object-fit: contain; } .badge { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet-700); background: #EAF0F8; border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.55rem; vertical-align: middle; } .greeting { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); margin-left: 0.4rem; } /* -------------------------------------------------------------------------- Navigationsleiste: Faecher / Ferien / Profil -------------------------------------------------------------------------- */ .navbar { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid var(--line); padding: 0.6rem 1rem; backdrop-filter: blur(6px); } .nav-link { font-family: inherit; border: none; background: transparent; color: var(--ink); font-weight: 800; font-size: 0.9rem; border-radius: 999px; padding: 0.4rem 1rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: #F5F1FF; } .nav-link-active { background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); color: #fff; box-shadow: 0 4px 12px rgba(44, 70, 118, 0.28); } .nav-link-active:hover { background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); } .progress { position: relative; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; /* Ohne Umbruch zwingt diese Zeile (Level + XP-Bar + Streak + Credits) die ganze Seite auf >500px Breite -> horizontales Scrollen auf dem Handy. */ flex-wrap: wrap; } .level { font-weight: 900; color: var(--violet-800); background: #FFE9AE; border: 1px solid #FFD666; border-radius: 999px; padding: 0.25rem 0.75rem; box-shadow: 0 2px 8px rgba(232, 185, 59, 0.28); white-space: nowrap; } .xp-bar { width: 130px; height: 14px; border-radius: 999px; background: #EEF2F9; border: 1px solid var(--line); overflow: hidden; } .xp-bar-fill { position: relative; height: 100%; width: 0%; border-radius: 999px; /* VERTIKALER Glanz (hell oben -> satt unten), NICHT horizontal von satt nach blass: ein horizontaler Verlauf liess die FUEHRENDE Kante ausgeblichen wirken -> die Leiste sah "unfertig" aus. So bleibt die Spitze bei jedem Fuellstand voll gesaettigt. */ background: linear-gradient(180deg, #FFCF5C, var(--amber) 55%, var(--amber-deep)); transition: width 0.5s cubic-bezier(0.25, 1, 0.35, 1); overflow: hidden; } .xp-bar-fill::after { content: ""; position: absolute; inset: 0; /* Dezenter Glanz-Sweep. Vorher 0.65 Weiss -> beim Durchlaufen sah die Leiste kurz ausgewaschen/zweigeteilt aus ("manchmal komisch"). 0.3 ist ein Schimmer, kein Washout. */ background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%); transform: translateX(-100%); animation: xp-shine 2.6s ease-in-out infinite; } @keyframes xp-shine { 0% { transform: translateX(-100%); } 55% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .xp-label { color: var(--ink-soft); font-weight: 700; white-space: nowrap; } .streak { color: var(--ink-soft); font-weight: 900; background: #EEF2F9; border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; } .streak.streak-active { background: linear-gradient(135deg, var(--flame), #FF9F1C); box-shadow: 0 0 14px rgba(255, 107, 53, 0.65); animation: streak-pulse 1.6s ease-in-out infinite; } @keyframes streak-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* schwebende XP-Zahl nach richtig/falsch */ .xp-float { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-weight: 900; font-size: 1rem; pointer-events: none; animation: xp-float 1.1s ease-out forwards; text-shadow: 0 2px 8px rgba(46, 16, 101, 0.4); } .xp-float { text-shadow: none; } .xp-float-plus { color: var(--green-600); } .xp-float-minus { color: var(--red-600); } @keyframes xp-float { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, 26px) scale(1); } } /* -------------------------------------------------------------------------- Layout & Views -------------------------------------------------------------------------- */ .main { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .view { animation: view-in 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes view-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .view-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } h1 { font-size: 1.6rem; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 1rem 0; } .view-header h1 { margin: 0; } .hint { color: var(--ink-soft); text-align: center; font-weight: 600; } .hint-left { text-align: left; font-size: 0.85rem; margin: -0.4rem 0 0 0; } .hint-left.error-text { color: var(--red-600); } /* Untertitel liegen im Bild (wie bei echten Videos), nicht darunter als Textblock. */ .video-caption { position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); max-width: 88%; padding: 0.4rem 0.8rem; border-radius: 8px; background: rgba(16, 24, 40, 0.72); color: #fff; font-size: 0.9rem; font-weight: 600; line-height: 1.4; text-align: center; text-wrap: balance; z-index: 3; } /* Sind die Untertitel an, raeumt der Folieninhalt den unteren Streifen frei. */ .video-stage.mit-untertitel .video-slide-content { padding-bottom: 3.6rem; } .btn.video-cc { font-size: 0.8rem; } .btn.video-cc-an { background: var(--teal-100); border-color: var(--teal-500); color: var(--teal-700); } /* Podcast: Aktionen unter dem Player + eingeklapptes Transkript */ .podcast-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; } .podcast-details { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-m, 10px); background: var(--bg-soft, #F2F5FA); overflow: hidden; } .podcast-details > summary { cursor: pointer; padding: 0.65rem 0.9rem; font-weight: 800; font-size: 0.9rem; color: var(--ink-soft); list-style: none; } .podcast-details > summary::-webkit-details-marker { display: none; } .podcast-details > summary::after { content: " ▾"; } .podcast-details[open] > summary::after { content: " ▴"; } .podcast-details > summary:hover { color: var(--ink); } .podcast-details .podcast-transkript { padding: 0 0.9rem 0.9rem; } /* Foto-Eingabe: fuer die Zielgruppe der WICHTIGSTE Weg, Stoff hereinzubekommen. Ein Kind der 5. Klasse hat kein PDF - es hat ein Heft und ein Handy. Deshalb ist der Knopf gross und selbsterklaerend und nicht bloss ein weiteres Datei-Feld. */ .foto-box { margin: 0.9rem 0 0.2rem; } .foto-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.85rem 1rem; border: 2px dashed var(--teal-400); border-radius: var(--radius-l, 14px); background: var(--teal-50); color: var(--ink); font-family: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease; } .foto-btn:hover { background: var(--teal-100); border-color: var(--teal-500); } .foto-btn:active { transform: translateY(1px); } .foto-btn:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; } .foto-btn-icon { font-size: 1.6rem; line-height: 1; flex: none; } .foto-btn strong { display: block; font-weight: 800; } .foto-btn-sub { display: block; margin-top: 0.15rem; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); } /* KI-Hinweis: steht ueberall dort, wo Inhalte von einer KI erzeugt wurden. Bewusst ruhig gestaltet - er soll ehrlich sein, aber Kinder nicht verunsichern oder vom Lernen ablenken. Deshalb keine Warnfarbe und kein Ausrufezeichen. Der Text kommt aus KI_HINWEIS in app.js (eine Quelle fuer alle Stellen). */ .ki-hinweis { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.9rem 0 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-m, 10px); background: var(--bg-soft, #F2F5FA); border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; line-height: 1.45; } .ki-hinweis::before { content: "🤖"; flex: none; font-size: 0.9rem; line-height: 1.35; } /* Im Chat sitzt der Hinweis direkt ueber dem Eingabefeld - dort reicht er schmaler. */ .ki-hinweis-schmal { margin-top: 0.5rem; padding: 0.4rem 0.6rem; font-size: 0.74rem; } .error { color: var(--red-600); font-size: 0.875rem; font-weight: 700; } /* -------------------------------------------------------------------------- Adaptives Dashboard: Tages-Ziel, Schwachstellen-Radar, Lernplan -------------------------------------------------------------------------- */ .tagesziel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .tagesziel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .tagesziel-label { font-weight: 900; color: var(--ink); } .tagesziel-count { font-weight: 800; color: var(--ink-soft); font-size: 0.9rem; } .tagesziel-bar { height: 14px; border-radius: 999px; background: #EEF2F9; border: 1px solid var(--line); overflow: hidden; } .tagesziel-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber-deep), var(--amber)); transition: width 0.4s ease; } .tagesziel-fill-done { background: linear-gradient(90deg, var(--green-600), #34D399); } .tagesziel-msg { margin: 0.5rem 0 0; font-weight: 800; color: var(--green-700); font-size: 0.85rem; } .radar-card { background: linear-gradient(135deg, #FFF7E6, #FFF0E0); border: 2px solid #FBD38D; border-radius: var(--radius-l); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .radar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .radar-title { font-weight: 900; color: var(--ink); } .radar-list, .lernplan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .radar-list li { font-size: 0.9rem; font-weight: 600; color: var(--ink); } .lernplan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); } .lernplan-title { display: block; font-weight: 900; color: var(--ink); margin-bottom: 0.5rem; } .lernplan-list li { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); padding: 0.55rem 0; border-top: 1px solid var(--line); } .lernplan-list li:first-child { border-top: none; } .lernplan-item-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .lernplan-badge { flex-shrink: 0; background: var(--red-600); color: #fff; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 900; white-space: nowrap; } .lernplan-hint { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } .lernplan-empfehlung { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); } .lernplan-btn { flex-shrink: 0; padding: 0.4rem 0.9rem; font-size: 0.8rem; } @media (max-width: 460px) { .lernplan-empfehlung { flex-direction: column; align-items: flex-start; } } /* -- Handy: Kopfzeile kompakt halten, damit nichts seitlich hinausläuft ------- */ @media (max-width: 560px) { .header { padding: 0.4rem 0.9rem; gap: 0.5rem; } .header-logo { height: 46px; } .greeting { margin-left: 0; } /* Fortschrittszeile bekommt die volle Breite und darf umbrechen */ .progress { width: 100%; gap: 0.5rem 0.6rem; } /* XP-Bar schrumpft mit, statt 130px zu erzwingen */ .xp-bar { flex: 1 1 70px; width: auto; min-width: 60px; } } /* -------------------------------------------------------------------------- Erfolge / Abzeichen (Dashboard) -------------------------------------------------------------------------- */ .erfolge-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); } .erfolge-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .erfolge-title { font-weight: 900; color: var(--ink); } .erfolge-count { font-weight: 900; color: var(--violet-700); background: #EAF0F8; border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.85rem; } .erfolge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; } .erfolg-chip { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; border-radius: var(--radius-m); padding: 0.7rem 0.5rem; border: 1px solid var(--line); } .erfolg-erreicht { background: linear-gradient(135deg, #FFF7E6, #FFF0E0); border-color: #FBD38D; } .erfolg-gesperrt { background: #F5F8FC; opacity: 0.75; } .erfolg-icon { font-size: 1.6rem; line-height: 1; } .erfolg-gesperrt .erfolg-icon { filter: grayscale(1); opacity: 0.7; } .erfolg-titel { font-size: 0.8rem; font-weight: 900; color: var(--ink); } .erfolg-fortschritt { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); } .erfolg-erreicht .erfolg-fortschritt { color: var(--amber-deep); } /* -------------------------------------------------------------------------- Eltern-Wochenbericht -------------------------------------------------------------------------- */ .eb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.25rem 0; } .eb-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.85rem 0.5rem; text-align: center; box-shadow: var(--shadow-card); } .eb-stat-zahl { display: block; font-size: 1.4rem; font-weight: 900; color: var(--ink); } .eb-stat-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); margin-top: 0.15rem; } .eb-heading { font-size: 1.05rem; font-weight: 900; color: var(--ink); margin: 0 0 0.6rem; } .eb-faecher { display: flex; flex-direction: column; gap: 0.5rem; } .eb-fach { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.7rem 0.9rem; box-shadow: var(--shadow-card); } .eb-fach-name { font-weight: 800; color: var(--ink); } .eb-fach-quote { font-weight: 700; color: var(--ink-soft); font-size: 0.85rem; margin-left: auto; } .eb-status { border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.72rem; font-weight: 900; color: #fff; white-space: nowrap; } .status-gut { background: var(--green-600); } .status-solide { background: var(--amber-deep); } .status-schwach { background: var(--red-600); } /* -------------------------------------------------------------------------- "Heute lernen"-Widget (Startansicht) -------------------------------------------------------------------------- */ .lernen-heute-widget { display: flex; align-items: center; gap: 0.85rem; width: 100%; font-family: inherit; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; cursor: pointer; box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .lernen-heute-clevero { width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; } .lernen-heute-body { flex: 1; } .lernen-heute-widget:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .lernen-heute-widget-faellig { border-color: #FBD38D; background: linear-gradient(135deg, #FFF7E6, #FFF0E0); } .lernen-heute-label { margin: 0; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber-deep); } .lernen-heute-text { margin: 0.2rem 0 0 0; font-size: 1.1rem; font-weight: 900; color: var(--ink); } /* -------------------------------------------------------------------------- Karten-Grid (Fächer & Decks) -------------------------------------------------------------------------- */ .deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .deck-card { font-family: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.25rem 1.1rem; cursor: pointer; text-align: left; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .deck-card:hover { transform: translateY(-4px) rotate(-0.4deg); border-color: var(--violet-500); box-shadow: var(--shadow-card-hover); } .deck-card:active { transform: translateY(-1px) scale(0.99); } .deck-card h3 { margin: 0 0 0.3rem 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); } .deck-card p { margin: 0.15rem 0; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Formulare -------------------------------------------------------------------------- */ form { display: flex; flex-direction: column; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; box-shadow: var(--shadow-card); } label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; font-weight: 800; color: var(--ink); } textarea, select, input[type="text"], input[type="date"], input[type="number"] { font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); padding: 0.7rem 0.85rem; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } textarea:focus, select:focus, input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 3px rgba(63, 93, 150, 0.14); background: #fff; } input[type="file"] { font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); border: 2px dashed var(--line-strong); border-radius: var(--radius-s); padding: 0.8rem; background: #F5F8FC; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } input[type="file"]:hover { border-color: var(--violet-500); background: #EEF3FA; } .form-row { display: flex; gap: 1rem; flex-wrap: wrap; } .form-row label { flex: 1; min-width: 160px; } .form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; } /* -------------------------------------------------------------------------- Buttons: "chunky" mit 3D-Unterkante, die beim Klick eindrückt -------------------------------------------------------------------------- */ .btn { font-family: inherit; border: none; border-radius: 14px; padding: 0.72rem 1.35rem; font-size: 0.92rem; font-weight: 800; letter-spacing: 0; text-transform: none; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); color: #fff; box-shadow: var(--shadow-btn); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); filter: brightness(1.04); } .btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-btn); } .btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); } .btn-secondary:hover:not(:disabled) { background: #F7F9FD; border-color: var(--violet-500); transform: translateY(-1px); } .btn-secondary:active:not(:disabled) { transform: translateY(0); } .btn-block { width: 100%; margin-top: 1rem; padding: 0.9rem 1.25rem; font-size: 1rem; } .btn-wrong { flex: 1; background: var(--red-100); color: var(--red-700); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.16); padding: 0.9rem 1rem; font-size: 1rem; } .btn-wrong:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22); } .btn-right { flex: 1; background: var(--green-100); color: var(--green-700); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.16); padding: 0.9rem 1rem; font-size: 1rem; } .btn-right:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22, 163, 74, 0.22); } /* -------------------------------------------------------------------------- Lernansicht: 3D-Flip-Karte -------------------------------------------------------------------------- */ .study-label { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.8rem; font-weight: 800; color: var(--violet-700); margin: 0 auto 1rem; } .study-context-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin: -0.5rem 0 1rem; } #view-study { text-align: center; } .flashcard-scene { perspective: 1400px; cursor: pointer; margin-bottom: 1rem; } .flashcard-inner { position: relative; height: 300px; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 0.9, 0.35, 1.15); } .flashcard-scene.flipped .flashcard-inner { transform: rotateY(180deg); } .flashcard-inner.snap { transition: none !important; } .flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; border-radius: var(--radius-l); padding: 2rem 1.75rem; overflow-y: auto; } .flashcard-front { background: var(--surface); border: 3px solid var(--line); box-shadow: var(--shadow-card); } .flashcard-back { background: linear-gradient(135deg, var(--violet-700), var(--violet-500)); box-shadow: 0 10px 26px rgba(24, 40, 73, 0.4); transform: rotateY(180deg); color: #fff; } .face-label { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; border-radius: 999px; padding: 0.25rem 0.75rem; } .flashcard-front .face-label { color: var(--violet-700); background: #EAF0F8; } .flashcard-back .face-label { color: #fff; background: rgba(255, 255, 255, 0.2); } /* 🔊 Vorlese-Knopf auf den Kartenseiten (Barrierefreiheit – liest die sichtbare Seite vor). Sitzt oben rechts; auf der (gedrehten) Rückseite erscheint er automatisch korrekt. */ .karte-vorlesen { position: absolute; top: 0.6rem; right: 0.6rem; width: 2.2rem; height: 2.2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; border: none; border-radius: 999px; cursor: pointer; background: rgba(0, 0, 0, 0.06); transition: transform 0.12s, background 0.12s; } .flashcard-back .karte-vorlesen { background: rgba(255, 255, 255, 0.22); } .karte-vorlesen:hover { transform: scale(1.1); } .karte-vorlesen:active { transform: scale(0.94); } .karte-vorlesen:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 2px; } /* Töne-/Vibration-Umschalter in den Einstellungen (rein clientseitig, localStorage). */ .toene-toggle { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); font-weight: 700; cursor: pointer; } .toene-toggle input { width: auto; flex: none; } .flashcard-face p { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.45; white-space: pre-wrap; } .flip-hint { font-size: 0.78rem !important; font-weight: 700 !important; color: #8FA3C4 !important; } .review-actions { display: flex; gap: 1rem; margin-top: 1.25rem; } /* Feier-Screen am Ende eines Decks */ #study-done { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } #study-done p { font-size: 1.25rem; font-weight: 900; color: var(--ink); } .study-summary { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .summary-row { display: flex; gap: 0.6rem; } .summary-chip { border-radius: 999px; padding: 0.35rem 0.9rem; font-weight: 900; font-size: 0.9rem; } .summary-richtig { background: #D7F5DC; color: var(--green-700); border: 2px solid #58CC02; } .summary-falsch { background: #FFE0E0; color: var(--red-700); border: 2px solid #FF5B5B; } .summary-score { margin: 0 !important; font-size: 0.95rem !important; font-weight: 800 !important; color: var(--ink-soft) !important; } .study-done-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .done-emoji { font-size: 4rem; animation: done-bounce 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate; } .done-clevero { width: 170px; height: 170px; object-fit: contain; animation: clevero-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both; } @keyframes done-bounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-14px) scale(1.04); } } /* -------------------------------------------------------------------------- Quellen (Deck-Info) & PDF-Chips -------------------------------------------------------------------------- */ .quellen-edit-box { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.25rem; box-shadow: var(--shadow-card); } .quellen-edit-box textarea { max-height: 16rem; } .pdf-file-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pdf-chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); padding: 0.45rem 0.85rem; font-size: 0.83rem; font-weight: 700; color: var(--ink); text-decoration: none; max-width: 15rem; box-shadow: var(--shadow-soft); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .pdf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Anhang-Chip mit Link (Quellen bearbeiten): Dateiname klickbar oeffnen, X entfernt. */ .pdf-chip > a { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; color: inherit; text-decoration: none; } .pdf-chip > a:hover { color: var(--violet-700); } .pdf-chip.pdf-chip-link:hover { border-color: var(--violet-500); color: var(--violet-700); transform: translateY(-1px); box-shadow: var(--shadow-card); cursor: pointer; } .pdf-chip-remove { background: none; border: none; color: #A5A0C8; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; } .pdf-chip-remove:hover { color: var(--red-600); } /* -------------------------------------------------------------------------- Ferienplaner -------------------------------------------------------------------------- */ .ferien-highlight { border-radius: var(--radius-l); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; border: 2px solid; } .ferien-highlight-jetzt { background: linear-gradient(135deg, #FFF7E6, #FFF0E0); border-color: #FBD38D; } .ferien-highlight-bald { background: linear-gradient(135deg, #E6FBF8, #F0FBF9); border-color: var(--teal-300); } .ferien-highlight-label { margin: 0; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber-deep); } .ferien-highlight-bald .ferien-highlight-label { color: var(--teal-700); } .ferien-highlight-name { margin: 0.2rem 0 0 0; font-size: 1.2rem; font-weight: 900; color: var(--ink); } .ferien-highlight-info { margin: 0.15rem 0 0 0; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); } .ferien-list { display: flex; flex-direction: column; gap: 0.65rem; } .ferien-item { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.85rem 1.1rem; box-shadow: var(--shadow-card); } .ferien-item-highlight { border-color: var(--teal-500); } .ferien-item-name { margin: 0; font-weight: 800; color: var(--ink); } .ferien-item-dates { margin: 0.15rem 0 0 0; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); } .ferien-badge { font-size: 0.7rem; font-weight: 900; color: #fff; border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; } .ferien-badge-jetzt { background: var(--amber-deep); } .ferien-badge-bald { background: var(--teal-500); } /* -------------------------------------------------------------------------- Monatsübersicht (Kalender) im Ferienplaner -------------------------------------------------------------------------- */ .kalender { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-card); } .kalender-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .kalender-header p { margin: 0; font-weight: 900; color: var(--ink); } .kalender-header .btn { padding: 0.35rem 0.8rem; } .kalender-wochentage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 0.25rem; } .kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; } .kalender-tag { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-size: 0.85rem; font-weight: 700; color: var(--ink); border: 1px solid transparent; } .kalender-tag-leer { visibility: hidden; } .kalender-tag-ferien { background: #E6FBF8; border-color: var(--teal-500); color: var(--teal-700); } .kalender-tag-heute { box-shadow: 0 0 0 2px var(--violet-500) inset; } .kalender-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--red-600); margin-top: 2px; } .kalender-legende { display: flex; gap: 1.25rem; margin-top: 0.75rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); } .kalender-legende span { display: inline-flex; align-items: center; gap: 0.4rem; } .legende-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } .legende-ferien { background: #E6FBF8; border: 1px solid var(--teal-500); } .legende-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--red-600); display: inline-block; } .ka-delete { background: none; border: none; color: #8FA3C4; font-size: 1rem; cursor: pointer; padding: 0.25rem; } .ka-delete:hover { color: var(--red-600); } /* -------------------------------------------------------------------------- Schulplaner: Zwei-Spalten-Layout (links Kalender, rechts Termine) -------------------------------------------------------------------------- */ .planer-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } @media (min-width: 820px) { .planer-grid { grid-template-columns: 1fr 320px; } } .planer-left { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .planer-form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.25rem; box-shadow: var(--shadow-card); } .planer-form-card h2 { margin: 0 0 0.75rem 0; font-size: 1.05rem; } /* Das Formular im Card-Wrapper nicht doppelt umranden. */ .planer-form-card form { border: none; box-shadow: none; padding: 0; background: transparent; gap: 0.75rem; } .planer-right h2 { margin: 0 0 0.75rem 0; font-size: 1.05rem; } .termin-item { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); padding: 0.7rem 0.85rem; box-shadow: var(--shadow-card); } .termin-ferien { border-color: var(--teal-300); background: #F0FBF9; } .termin-ferien-jetzt { border-color: #FBD38D; background: #FFF7E6; } .termin-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .termin-name { margin: 0; font-weight: 800; color: var(--ink); font-size: 0.92rem; } .termin-date { margin: 0.2rem 0 0 0; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); } .termin-actions { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } .termin-badge { border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.68rem; font-weight: 900; color: #fff; white-space: nowrap; } .termin-badge-jetzt { background: var(--amber-deep); } .termin-badge-ferien { background: var(--teal-500); } .termin-badge-ka { background: var(--red-600); } /* -------------------------------------------------------------------------- Multiple-Choice-Frage/Optionen (gemeinsam genutzt von Bergsteigen) -------------------------------------------------------------------------- */ .quiz-frage { background: #fff; border: 3px solid var(--line); border-radius: var(--radius-l); padding: 1.75rem 1.5rem; min-height: 110px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2rem; font-weight: 800; color: var(--ink); box-shadow: var(--shadow-card); margin-bottom: 1rem; } .quiz-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .quiz-option { font-family: inherit; font-size: 0.95rem; font-weight: 800; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-m); padding: 1rem; cursor: pointer; box-shadow: var(--shadow-soft); transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, border-color 0.16s ease; } .quiz-option:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--violet-500); box-shadow: var(--shadow-card); } .quiz-option:active:not(:disabled) { transform: translateY(0); } .quiz-option:disabled { cursor: default; } .quiz-option-richtig { background: var(--green-100); color: var(--green-700); border-color: #58CC02; box-shadow: 0 6px 16px rgba(22, 163, 74, 0.18); } .quiz-option-falsch { background: var(--red-100); color: var(--red-700); border-color: #FF5B5B; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.18); } @media (max-width: 460px) { .quiz-optionen { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Clevero-Bergsteigen -------------------------------------------------------------------------- */ .berg-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .berg-hoehe { font-weight: 900; color: var(--ink); } .berg-fragen { font-weight: 700; color: var(--ink-soft); font-size: 0.85rem; } /* Die Bergszene hat EINE Geometrie-Quelle: die Variablen hier unten. Vorher standen Hang (clip-path), Cleveros Route (in app.js) und die Fahne getrennt im Code - sie liefen auseinander, sodass Clevero den "Gipfel" 28 % neben der Fahne erreichte. Jetzt leiten Hang, Route, Stufenpunkte UND Fahne alles hieraus ab: Der Hang laeuft von links unten zum Gipfel, also gilt auf ihm unten% = x%. Wer die Route aendert, aendert sie damit ueberall gleichzeitig. */ .berg-szene { --gipfel-x: 74%; /* Bergspitze */ --gipfel-y: 74%; /* liegt auf dem Hang: y = x */ --route-x0: 8%; /* Startpunkt unten links */ --route-x1: 66%; /* Endpunkt: knapp unter der Fahne */ --fortschritt: 0; /* 0..1 - das Einzige, was app.js setzt */ position: relative; height: 260px; border-radius: var(--radius-l); border: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, #BFE4FF 0%, #DDF1FF 55%, #F6FBFF 100%); box-shadow: var(--shadow-card); margin-bottom: 1rem; } /* Gemeinsame Platzierung auf der Route: Clevero und die Stufenpunkte nutzen dieselbe Formel, nur mit eigenem --fortschritt. Dadurch koennen sie gar nicht verrutschen. */ .berg-clevero, .berg-marke { position: absolute; left: calc(var(--route-x0) + (var(--route-x1) - var(--route-x0)) * var(--fortschritt)); bottom: calc(var(--route-x0) + (var(--route-x1) - var(--route-x0)) * var(--fortschritt)); transform: translateX(-50%); } .berg-sonne { position: absolute; top: 12%; left: 10%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #FFE9A8 0%, #FFD470 55%, rgba(255, 212, 112, 0) 72%); } /* Ferne Kette: gibt der Szene Tiefe, damit der Berg nicht wie ein flacher Keil wirkt. */ .berg-fernkette { position: absolute; inset: 0; background: linear-gradient(180deg, #A8C8DE, #C3DCEC); clip-path: polygon(0 100%, 14% 52%, 30% 72%, 46% 40%, 62% 66%, 82% 46%, 100% 70%, 100% 100%); opacity: 0.75; } /* Hauptberg: Spitze bei --gipfel-x, linke Flanke ist die Kletterroute. */ .berg-huegel { position: absolute; inset: 0; background: linear-gradient(150deg, #9BCB80 0%, #6BA85E 42%, #4A8248 72%, #3B6A3D 100%); clip-path: polygon(0 100%, var(--gipfel-x) calc(100% - var(--gipfel-y)), 100% 100%); } /* Schneekappe: exakt DIESELBE Silhouette wie der Berg, nur oben weiss eingefaerbt. Ein handgezeichnetes Schnee-Polygon ging daneben - die rechte Flanke ist deutlich steiler als die linke, sodass die Kappe rechts in der Luft hing. Indem der Schnee die Bergform erbt und nur per Verlauf nach unten ausblendet, KANN er nicht mehr neben dem Berg liegen - auch nicht, wenn die Geometrie spaeter geaendert wird. */ .berg-schnee { position: absolute; inset: 0; clip-path: polygon(0 100%, var(--gipfel-x) calc(100% - var(--gipfel-y)), 100% 100%); background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF calc(100% - var(--gipfel-y) + 10%), rgba(235, 246, 253, 0.92) calc(100% - var(--gipfel-y) + 13%), rgba(255, 255, 255, 0) calc(100% - var(--gipfel-y) + 19%) ); } /* Stufenpunkte: machen sichtbar, wie viele Schritte noch fehlen - der Weg wird zur Anzeige, nicht nur Deko. Erreichte Stufen fuellen sich. */ /* Der dunkle Ring ist wichtig: Die Route laeuft ueber Gruen UND ueber die weisse Schneekappe - rein weisse Punkte waeren oben unsichtbar. */ .berg-marke { width: 11px; height: 11px; margin-bottom: -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); border: 2px solid rgba(28, 46, 82, 0.35); transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } .berg-marke-erreicht { background: var(--amber, #F5A623); border-color: rgba(120, 72, 0, 0.45); transform: translateX(-50%) scale(1.25); } .berg-gipfel { position: absolute; left: var(--gipfel-x); bottom: var(--gipfel-y); /* Der Mast sitzt links im Emoji-Zeichenkasten: nur ein Viertel zurueckschieben, damit er auf der Spitze steht und nicht daneben. */ transform: translateX(-28%); margin-bottom: -13px; /* Emoji-Unterkante ist nicht die Glyph-Unterkante */ font-size: 1.8rem; z-index: 3; filter: drop-shadow(0 2px 4px rgba(24, 40, 73, 0.35)); } .berg-wolke { position: absolute; font-size: 1.6rem; opacity: 0.9; z-index: 1; animation: berg-zieh 26s linear infinite; } .berg-wolke-1 { top: 10%; left: -14%; } .berg-wolke-2 { top: 26%; left: -14%; font-size: 1.15rem; opacity: 0.7; animation-duration: 38s; animation-delay: -12s; } .berg-wolke-3 { top: 17%; left: -14%; font-size: 0.95rem; opacity: 0.55; animation-duration: 46s; animation-delay: -28s; } @keyframes berg-zieh { from { transform: translateX(0); } to { transform: translateX(950%); } } .berg-clevero { width: 56px; height: 56px; object-fit: contain; z-index: 2; margin-bottom: -6px; /* Fuesse leicht in den Hang, statt darauf zu schweben */ transition: left 0.6s cubic-bezier(0.3, 0.9, 0.35, 1.15), bottom 0.6s cubic-bezier(0.3, 0.9, 0.35, 1.15); filter: drop-shadow(0 3px 6px rgba(24, 40, 73, 0.3)); } /* Koerperliches Feedback: hochziehen bei richtig, abrutschen bei falsch. */ .berg-clevero-hoch { animation: berg-hoch 0.6s ease; } .berg-clevero-rutsch { animation: berg-rutsch 0.5s ease; } @keyframes berg-hoch { 0% { transform: translateX(-50%) translateY(0) rotate(0deg); } 45% { transform: translateX(-50%) translateY(-14px) rotate(-6deg); } 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } } @keyframes berg-rutsch { 0% { transform: translateX(-50%) rotate(0deg); } 35% { transform: translateX(-50%) rotate(9deg) translateY(4px); } 100% { transform: translateX(-50%) rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .berg-wolke { animation: none; } .berg-clevero { transition: none; } .berg-clevero-hoch, .berg-clevero-rutsch { animation: none; } } /* -------------------------------------------------------------------------- Chat-Tutor "Frag Clevero" -------------------------------------------------------------------------- */ .chat-messages { display: flex; flex-direction: column; gap: 0.75rem; height: 55vh; min-height: 320px; overflow-y: auto; padding: 1rem; margin-top: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); } .chat-msg { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 85%; animation: chat-in 0.2s ease-out both; } @keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .chat-msg-user { align-self: flex-end; flex-direction: row-reverse; } .chat-msg-clevero { align-self: flex-start; } .chat-avatar { width: 34px; height: 34px; border-radius: 999px; object-fit: contain; background: #EAF0F8; flex-shrink: 0; } .chat-bubble { padding: 0.6rem 0.85rem; border-radius: 16px; font-size: 0.95rem; font-weight: 600; line-height: 1.45; white-space: pre-wrap; } .chat-msg-clevero .chat-bubble { background: #EEF2F9; color: var(--ink); border-bottom-left-radius: 5px; } .chat-msg-user .chat-bubble { background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); color: #fff; border-bottom-right-radius: 5px; } .chat-typing .chat-bubble { color: var(--ink-soft); font-style: italic; animation: le-pulse 1.2s ease-in-out infinite; } .chat-input-row { display: flex; flex-direction: row; gap: 0.6rem; align-items: flex-end; margin-top: 0.75rem; /* Formular-Grundstil (weisser Kasten) hier nicht anwenden */ background: transparent; border: none; box-shadow: none; padding: 0; } .chat-input-row textarea { flex: 1; resize: none; min-height: 46px; max-height: 140px; } .chat-input-row .btn { flex-shrink: 0; } /* -------------------------------------------------------------------------- Lerneinheit-Auswahl (Deck-Info): Karteikarten / Lernvideo / Lernzettel -------------------------------------------------------------------------- */ .lerneinheit-heading { margin: 1.5rem 0 0.75rem; font-size: 1.05rem; font-weight: 900; color: var(--ink); } .lerneinheit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .lerneinheit-card { font-family: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.1rem 1.15rem; box-shadow: var(--shadow-card); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .lerneinheit-card:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--violet-500); box-shadow: var(--shadow-card-hover); } .lerneinheit-card:active:not(:disabled) { transform: translateY(-1px) scale(0.99); } .lerneinheit-card:disabled { cursor: default; opacity: 0.65; } .le-icon { font-size: 1.9rem; line-height: 1; } .le-title { font-size: 1.05rem; font-weight: 900; color: var(--ink); } .le-desc { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); line-height: 1.35; } /* Ladezustand der Lernvideo-Kachel (blinkt sanft, waehrend das Video erstellt wird) */ .lerneinheit-card.le-loading { border-color: var(--amber-deep); animation: le-pulse 1.2s ease-in-out infinite; } @keyframes le-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* -------------------------------------------------------------------------- Lernvideo-Player (Folien + Sprecher-Audio + Untertitel) -------------------------------------------------------------------------- */ .video-stage { position: relative; /* Bezugspunkt fuer die eingeblendeten Untertitel */ border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: #fff; } .video-slide { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 2rem 2.25rem; /* Fallback-Hintergrund (wenn kein KI-Bild verfuegbar) */ background: linear-gradient(135deg, var(--violet-800), var(--violet-600) 70%, var(--teal-500)); color: #fff; } /* KI-Bild als Hintergrund mit langsamer Ken-Burns-Bewegung */ .video-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); } .video-slide-bg.kb { animation: ken-burns 14s ease-out both; } @keyframes ken-burns { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -2%); } } /* Abdunkelung unten, damit Titel/Bullets auf dem Bild lesbar bleiben */ .video-slide-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 20, 36, 0) 35%, rgba(11, 20, 36, 0.82) 100%); opacity: 0; transition: opacity 0.2s ease; } .video-slide-has-bild .video-slide-scrim { opacity: 1; } .video-slide-content { position: relative; z-index: 1; } .video-slide h2 { margin: 0 0 1rem 0; font-size: 1.6rem; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(11, 20, 36, 0.5); } .video-slide ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; } .video-slide li { font-size: 1.1rem; font-weight: 700; line-height: 1.4; text-shadow: 0 2px 8px rgba(11, 20, 36, 0.5); } .video-slide-in { animation: video-slide-in 0.35s ease-out both; } @keyframes video-slide-in { from { opacity: 0; } to { opacity: 1; } } .video-progress { height: 6px; background: var(--line); } .video-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--amber-deep), var(--amber)); transition: width 0.2s linear; } .video-controls { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; } .video-szene-label { margin-left: auto; font-size: 0.82rem; font-weight: 800; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Lern-Podcast (Audio-Player + Transkript) -------------------------------------------------------------------------- */ .podcast-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .podcast-cover { width: 84px; height: 84px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(24, 40, 73, 0.18)); } .podcast-kicker { margin: 0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-deep); } .podcast-head h1 { margin: 0.15rem 0; font-size: 1.5rem; } .podcast-player { background: linear-gradient(160deg, var(--violet-800), var(--violet-950)); border-radius: var(--radius-l); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); } .podcast-transkript { display: flex; flex-direction: column; gap: 0.9rem; } .podcast-kapitel { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--teal-500); border-radius: var(--radius-m); padding: 0.9rem 1.2rem; box-shadow: var(--shadow-card); } .podcast-kapitel h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 900; color: var(--ink); } .podcast-kapitel p { margin: 0; font-size: 0.96rem; font-weight: 600; line-height: 1.6; color: var(--ink-soft); } /* -------------------------------------------------------------------------- Mindmap (SVG-Diagramm: Zentrum -> Aeste -> Blaetter) -------------------------------------------------------------------------- */ .mindmap-head { margin-bottom: 0.5rem; } .mindmap-kicker { margin: 0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-deep); } .mindmap-head h1 { margin: 0.15rem 0; font-size: 1.5rem; } .mindmap-stage { margin-top: 1rem; padding: 0.5rem; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); } .mindmap-svg { width: 100%; height: auto; display: block; min-width: 680px; } .mm-slot { width: 100%; height: 100%; display: flex; align-items: center; /* SVG-foreignObject erbt die Body-Schrift NICHT -> sonst Serif/Times. Explizit setzen. */ font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mm-branch { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem 0.7rem; box-shadow: var(--shadow-card); } .mm-branch-label { color: #fff; font-weight: 900; font-size: 0.86rem; border-radius: 9px; padding: 0.28rem 0.55rem; margin-bottom: 0.4rem; text-align: center; } .mm-branch ul { margin: 0; padding-left: 1.1rem; } .mm-branch li { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); line-height: 1.4; } .mm-center-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mm-center { background: linear-gradient(180deg, var(--violet-600), var(--violet-800)); color: #fff; font-weight: 900; font-size: 0.95rem; text-align: center; border-radius: 14px; padding: 0.6rem 0.8rem; box-shadow: var(--shadow-card-hover); } /* -------------------------------------------------------------------------- Meine Medien (Bibliothek erstellter Videos/Podcasts/Lernzettel/Mindmaps) -------------------------------------------------------------------------- */ .medien-grid { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; } .medien-card { display: flex; align-items: center; gap: 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0.85rem 1rem; box-shadow: var(--shadow-card); } .medien-icon { flex: none; font-size: 1.7rem; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-m); background: #EAF0F8; } .medien-body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .medien-typ { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-deep); } .medien-titel { font-weight: 800; color: var(--ink); font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .medien-meta { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .medien-btn { flex: none; padding: 0.5rem 0.9rem; font-size: 0.82rem; } /* -------------------------------------------------------------------------- Clevero-Maskottchen, Sprechblasen & Duolingo-Feedback -------------------------------------------------------------------------- */ /* Grosser Teal-Aktionsbutton (Duolingo-"Weiter") */ .btn-go { background: linear-gradient(180deg, var(--teal-300), var(--teal-500)); color: #fff; box-shadow: 0 8px 18px rgba(16, 98, 89, 0.30); text-transform: none; letter-spacing: 0; font-weight: 900; } .btn-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(16, 98, 89, 0.36); } .btn-go:active:not(:disabled) { transform: translateY(0); box-shadow: 0 8px 18px rgba(16, 98, 89, 0.30); } /* Begruessungs-Zeile mit Maskottchen + Sprechblase (Onboarding/Dashboard) */ .mascot-row { display: flex; align-items: flex-end; gap: 0.75rem; margin-bottom: 1.25rem; } .mascot-img { width: 92px; height: 92px; object-fit: contain; flex-shrink: 0; } .speech { position: relative; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0.85rem 1rem; margin-bottom: 0.4rem; font-weight: 800; color: var(--ink); box-shadow: var(--shadow-card); } .speech::before { content: ""; position: absolute; left: -11px; top: 22px; width: 20px; height: 20px; background: #fff; border-left: 2px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); } .clevero-pop { animation: clevero-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both; } @keyframes clevero-pop { from { opacity: 0; transform: scale(0.6) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Inline-Feedback-Banner (nach der Antwort, direkt unter den Buttons) */ .feedback-bar { display: flex; align-items: center; gap: 0.85rem; margin-top: 1rem; padding: 0.85rem 1.1rem; border-radius: var(--radius-l); text-align: left; animation: feedback-in 0.22s ease-out both; } .feedback-bar-correct { background: #D7F5DC; border: 2px solid #58CC02; } .feedback-bar-wrong { background: #FFE0E0; border: 2px solid #FF5B5B; } .feedback-clevero { width: 110px; height: 110px; object-fit: contain; flex-shrink: 0; animation: clevero-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .feedback-text { flex: 1; } .feedback-title { margin: 0; font-size: 1.05rem; font-weight: 900; } .feedback-bar-correct .feedback-title { color: var(--green-700); } .feedback-bar-wrong .feedback-title { color: var(--red-700); } .feedback-sub { margin: 0.1rem 0 0 0; font-size: 0.85rem; font-weight: 700; } .feedback-bar-correct .feedback-sub { color: var(--green-700); } .feedback-bar-wrong .feedback-sub { color: var(--red-700); } .feedback-sub:empty { display: none; } @keyframes feedback-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- Barrierefreiheit: reduzierte Bewegung respektieren -------------------------------------------------------------------------- */ /* -- Kartentypen: Multiple-Choice & Lückentext -------------------------------- */ .karte-mc, .karte-luecke { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: 1.5rem 1.4rem; margin-bottom: 1rem; } .luecke-satz { margin: 0 0 1.1rem; font-size: 1.15rem; font-weight: 800; line-height: 1.6; color: var(--ink); } .luecke-form { display: flex; gap: 0.6rem; flex-wrap: wrap; } #luecke-input { flex: 1 1 12rem; font-size: 1.05rem; font-weight: 800; } #luecke-input:disabled { opacity: 0.7; } @media (max-width: 460px) { .luecke-form { flex-direction: column; } } /* -- Onboarding-Wizard (Klick-Strecke) --------------------------------------- */ .onb-wizard { max-width: 560px; margin: 0 auto; } .onb-mascot-row { margin-bottom: 1.25rem; } .onb-progress { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; } .onb-progress-bar { flex: 1; height: 8px; background: #EEF2F9; border-radius: 999px; overflow: hidden; } .onb-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet-500), var(--teal-500)); transition: width 0.35s cubic-bezier(0.25, 1, 0.35, 1); } .onb-progress-label { font-size: 0.8rem; font-weight: 800; color: var(--ink-soft); white-space: nowrap; } .onb-frage { font-size: 1.55rem; margin: 0 0 1rem; text-wrap: balance; } .onb-optional { font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); } .onb-hint { margin-top: -0.4rem; margin-bottom: 1.1rem; } .onb-input { width: 100%; font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; } .onb-fehler { margin: -0.4rem 0 0.8rem; } /* Registrierung: Dienst-Buttons */ .onb-dienste { display: flex; flex-direction: column; gap: 0.7rem; } .onb-dienst { font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1.2rem; font-size: 1rem; font-weight: 800; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-m); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .onb-dienst:hover { border-color: var(--violet-500); transform: translateY(-1px); box-shadow: var(--shadow-card); } .onb-dienst-icon { font-size: 1.2rem; } .onb-dienst-mail { background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); color: #fff; border-color: transparent; box-shadow: var(--shadow-btn); } .onb-dienst-mail:hover { border-color: transparent; } /* Auswahl-Kacheln (Klasse / Alter / Bundesland / Nutzen) */ .onb-kacheln { display: grid; gap: 0.6rem; } .onb-kacheln-mini { grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); } .onb-kacheln-klein { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } .onb-optionen { display: flex; flex-direction: column; gap: 0.6rem; } .onb-kachel { font-family: inherit; font-size: 1rem; font-weight: 800; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-m); padding: 0.9rem 0.6rem; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .onb-kacheln-mini .onb-kachel { padding: 0.85rem 0.4rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .onb-kacheln-klein .onb-kachel { font-size: 0.9rem; font-weight: 700; padding: 0.75rem 0.5rem; } .onb-kachel-breit { display: flex; align-items: center; gap: 0.7rem; text-align: left; padding: 1rem 1.1rem; } .onb-opt-icon { font-size: 1.4rem; line-height: 1; } .onb-kachel:hover { border-color: var(--violet-500); background: #F7F9FD; transform: translateY(-2px); box-shadow: var(--shadow-card); } /* Eintritts-/Starterpaket im letzten Onboarding-Schritt */ .onb-starter { border: 1.5px solid var(--teal-500); background: #E9FBF7; border-radius: var(--radius-l); padding: 1.25rem 1.3rem; margin-bottom: 1.1rem; box-shadow: 0 8px 22px rgba(31, 174, 154, 0.16); } .onb-starter-kopf { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .onb-starter-preis { font-size: 2rem; font-weight: 900; color: var(--ink); line-height: 1; } .onb-starter-credits { font-weight: 900; color: var(--teal-700); background: #fff; border: 1px solid var(--teal-300); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.9rem; } .onb-starter-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .onb-starter-liste li { font-size: 0.94rem; font-weight: 700; color: var(--ink-soft); line-height: 1.4; } .onb-demo-hinweis { margin-top: 0.6rem; text-align: center; } .onb-zurueck { display: inline-block; margin-top: 1.25rem; padding: 0.4rem 0.2rem; background: none; border: none; font-family: inherit; font-size: 0.92rem; font-weight: 800; color: var(--ink-soft); cursor: pointer; } .onb-zurueck:hover { color: var(--violet-600); } /* -- XP-Gamification: Serien-Anzeige + Perfekte-Runde-Bonus ------------------ */ .combo-anzeige { display: inline-block; margin: 0 0 0.75rem; padding: 0.3rem 0.85rem; border-radius: 999px; font-weight: 900; font-size: 0.9rem; color: #fff; background: linear-gradient(135deg, var(--flame), var(--amber)); box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35); animation: combo-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes combo-pop { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .summary-bonus { margin: 0.6rem 0 0; font-weight: 900; color: var(--amber-deep); background: #FFF7E6; border: 1px solid #F5B301; border-radius: var(--radius-s); padding: 0.5rem 0.9rem; display: inline-block; } /* Inline-„Credits kaufen"-Link, wenn eine Aktion an leeren Credits scheitert (kein Sackgassen-Fehler) */ .credits-nachladen-link { font-family: inherit; font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(180deg, var(--violet-500), var(--violet-600)); border: none; border-radius: 999px; padding: 0.25rem 0.7rem; margin-left: 0.4rem; cursor: pointer; white-space: nowrap; vertical-align: middle; } .credits-nachladen-link:hover { filter: brightness(1.06); } /* Kurzes Hervorheben des Credits-Panels, wenn man per „Credits kaufen" dorthin springt */ @keyframes credits-panel-flash { 0%, 100% { box-shadow: var(--shadow-card); } 30% { box-shadow: 0 0 0 3px var(--violet-500), var(--shadow-card-hover); } } .credits-panel-flash { animation: credits-panel-flash 1.5s ease; } /* -- Credit-/Limit-System: Header-Chip + Tarif-Panel (Demo) ------------------- */ .credits-chip { font-weight: 900; color: var(--violet-700); background: #EEF1FF; border: 1px solid #D9DEFA; border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; } .credits-chip.credits-leer { color: var(--red-700); background: var(--red-100); border-color: #F7C9C9; } .tarif-panel { margin-top: 1.75rem; padding: 1.25rem 1.35rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); } .tarif-panel-head h2 { margin: 0 0 0.35rem; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; } .tarif-demo-badge { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet-700); background: #EAF0F8; border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem; } /* Credit-Stand, Kostenliste und kaufbare Pakete (Prepaid, kein Abo) */ .credits-stand { margin: 1rem 0 1.25rem; } .credits-gross { display: flex; align-items: baseline; gap: 0.5rem; font-size: 2.4rem; font-weight: 900; color: var(--violet-600); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 0.45rem; /* Luft zwischen der grossen Zahl und "X gekauft (verfaellt nie)" */ } .credits-gross-label { font-size: 0.95rem; font-weight: 800; color: var(--ink-soft); } .credits-untertitel { font-size: 0.95rem; font-weight: 900; color: var(--ink); margin: 1.25rem 0 0.5rem; } .credits-kostenliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; } .credits-kostenliste li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.9rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); } .credits-kostenliste li:last-child { border-bottom: none; } .credits-kostenliste strong { font-weight: 900; color: var(--violet-600); font-variant-numeric: tabular-nums; white-space: nowrap; } .credits-kosten-zusatz { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); } .credits-bundles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; } /* Widerruf-Einwilligung vor dem Kauf (§ 356 BGB) – aktiv anzuklicken, nicht vorausgewählt. */ .widerruf-consent { display: flex; align-items: flex-start; gap: 0.55rem; text-align: left; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); margin: 0.9rem 0 0.5rem; cursor: pointer; } .widerruf-consent input { margin-top: 0.15rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; cursor: pointer; } .credits-bundle { position: relative; font-family: inherit; display: flex; flex-direction: column; gap: 0.15rem; text-align: left; padding: 0.9rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-m); background: #fff; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .credits-bundle:hover { border-color: var(--violet-500); transform: translateY(-2px); box-shadow: var(--shadow-card); } .credits-bundle.is-beliebt { border-color: var(--violet-600); box-shadow: 0 0 0 3px rgba(63, 93, 150, 0.14); } /* Starterpaket: einmaliges Willkommensangebot - deutlich hervorheben, damit der spätere Normalpreis nicht wie eine Preiserhöhung wirkt. */ .credits-bundle.is-einmalig { border-color: var(--teal-500); background: #E9FBF7; box-shadow: 0 0 0 3px rgba(31, 174, 154, 0.18); } .credits-bundle.is-einmalig .credits-bundle-cr, .credits-bundle.is-einmalig .credits-bundle-je { color: var(--teal-700); } .credits-bundle.is-einmalig .credits-bundle-flag { background: linear-gradient(180deg, var(--teal-500), var(--teal-700)); } .credits-bundle-hinweis { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; line-height: 1.35; color: var(--teal-700); } .credits-bundle-flag { position: absolute; top: -0.7rem; left: 0.9rem; font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: linear-gradient(180deg, var(--amber), var(--amber-deep)); border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap; } .credits-bundle-name { font-weight: 900; color: var(--ink); } .credits-bundle-cr { font-size: 0.85rem; font-weight: 800; color: var(--violet-600); } .credits-bundle-preis { font-size: 1.2rem; font-weight: 900; color: var(--ink); margin-top: 0.2rem; } .credits-bundle-je { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); } /* Der Kauf-Knopf wird an den UNTEREN Kartenrand gedrueckt (margin-top:auto), damit die Knoepfe einer Reihe fluchten - auch wenn eine Karte (Starterpaket) durch den Zusatztext hoeher ist als die anderen. Der Mindestabstand nach oben kommt aus dem margin-bottom des letzten Textelements (je / hinweis). */ .credits-bundle-je, .credits-bundle-hinweis { margin-bottom: 0.55rem; } /* § 312j BGB: eindeutig als zahlungspflichtige Bestellung gekennzeichneter Kauf-Button. */ .credits-bundle-cta { margin-top: auto; padding: 0.5rem 0.6rem; text-align: center; font-size: 0.82rem; font-weight: 900; color: #fff; background: var(--violet-600); border-radius: var(--radius-s); transition: background 0.15s ease; } .credits-bundle:hover .credits-bundle-cta { background: var(--violet-700); } .credits-bundle.is-einmalig .credits-bundle-cta { background: var(--teal-700); } @media (max-width: 560px) { .credits-bundles { grid-template-columns: 1fr; } .credits-bundle-flag { top: -0.6rem; } } /* -- Kauf- & Energie-Verlauf (aufklappbar im Energie-Panel) --------------------- */ .credits-verlauf { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 0.8rem; } .credits-verlauf > summary { cursor: pointer; font-weight: 800; font-size: 0.9rem; color: var(--violet-600); list-style: none; padding: 0.2rem 0; } .credits-verlauf > summary::-webkit-details-marker { display: none; } .credits-verlauf > summary::before { content: "▸ "; } .credits-verlauf[open] > summary::before { content: "▾ "; } .verlauf-titel { font-size: 0.8rem; font-weight: 900; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.9rem 0 0.35rem; } .verlauf-liste { list-style: none; margin: 0; padding: 0; } .verlauf-liste li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 0.2rem 0.7rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; } .verlauf-liste li:last-child { border-bottom: none; } .verlauf-datum { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.78rem; } .verlauf-text { color: var(--ink); font-weight: 700; } .verlauf-menge { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; } .verlauf-menge.plus { color: var(--teal-700, #0f766e); } .verlauf-menge.minus { color: var(--ink); } .verlauf-preis, .verlauf-saldo { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.78rem; text-align: right; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -- Video-/Podcast-Menü: Optionen wählen + Liste erzeugter Medien ------------- */ .medienmenu-head { margin-bottom: 1.25rem; } .medienmenu-kicker { font-weight: 700; color: var(--teal-700); margin: 0 0 0.15rem; } .medienmenu-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: 1.35rem 1.4rem 1.5rem; margin-bottom: 1.75rem; } .medienmenu-label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; } .medienmenu-input { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); font-size: 1rem; color: var(--ink); background: #fff; } .medienmenu-input:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 3px rgba(63, 93, 150, 0.16); } .medienmenu-laengen { display: flex; gap: 0.55rem; flex-wrap: wrap; } .medienmenu-chip { flex: 1 1 auto; min-width: 92px; padding: 0.6rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: #fff; color: var(--ink-soft); font-weight: 700; font-size: 0.98rem; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .medienmenu-chip:hover { border-color: var(--violet-500); } .medienmenu-chip.is-aktiv { background: var(--violet-600); border-color: var(--violet-600); color: #fff; } .medienmenu-liste-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .medienmenu-liste-head h2 { margin: 0; } .medienmenu-limit { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .medienmenu-liste { display: flex; flex-direction: column; gap: 0.6rem; } .medienmenu-item { display: flex; align-items: stretch; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-card); overflow: hidden; } .medienmenu-item-open { flex: 1 1 auto; display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; background: none; border: none; text-align: left; cursor: pointer; } .medienmenu-item-open:hover { background: rgba(63, 93, 150, 0.06); } .medienmenu-item-icon { font-size: 1.5rem; line-height: 1; } .medienmenu-item-body { display: flex; flex-direction: column; gap: 0.15rem; } .medienmenu-item-titel { font-weight: 700; color: var(--ink); } .medienmenu-item-meta { font-size: 0.88rem; color: var(--ink-soft); } .medienmenu-item-del { flex: 0 0 auto; padding: 0 1rem; background: none; border: none; border-left: 1px solid var(--line); font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); transition: background 0.15s, color 0.15s; } .medienmenu-item-del:hover { background: var(--red-100); color: var(--red-700); } /* Quellen-Panel: speichern (gratis) und auswerten (kostet) nebeneinander, damit der Unterschied auf einen Blick sichtbar ist. */ .quellen-aktionen { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* Zweite Zeile am Auswerten-Knopf: erklaert den Wert der Quellen, ohne den Preis zu verschleiern. Bewusst leiser gesetzt als die Kostenangabe darueber. */ .kosten-zusatz { display: block; margin-top: 0.3rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } /* --- Kartenverwaltung im Karteikarten-Menü -------------------------------- */ .karten-liste-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; margin: 1.8rem 0 0.5rem; } .karten-liste-head h2 { margin: 0; font-size: 1.1rem; font-weight: 900; } .karten-erstellen-head { margin: 1.8rem 0 0.5rem; font-size: 1.1rem; font-weight: 900; } .karten-liste { display: flex; flex-direction: column; gap: 0.5rem; } .karte-zeile { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-m, 12px); background: #fff; } /* Der Lernstand je Karte: fuenf Leitner-Boxen als kleine Leiste. Macht sichtbar, was das Wiederholsystem im Hintergrund tut - sonst bleibt es eine Blackbox. */ .karte-box { flex: none; display: flex; gap: 2px; margin-top: 0.35rem; } .karte-box i { width: 5px; height: 14px; border-radius: 2px; background: var(--line); display: block; } .karte-box i.voll { background: var(--teal-500); } .karte-inhalt { flex: 1; min-width: 0; } .karte-frage { font-weight: 800; font-size: 0.92rem; line-height: 1.4; } .karte-antwort { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.15rem; } .karte-marken { display: flex; gap: 0.35rem; margin-top: 0.35rem; flex-wrap: wrap; } .karte-marke { font-size: 0.68rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--bg-soft, #F2F5FA); color: var(--ink-soft); } .karte-marke-schwach { background: #FFEDE3; color: #B4491B; } .karte-marke-eigen { background: var(--teal-50); color: var(--teal-700); } .karte-aktionen { display: flex; gap: 0.3rem; flex: none; } .karte-aktion { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 0.25rem 0.45rem; cursor: pointer; font-size: 0.85rem; line-height: 1; } .karte-aktion:hover { background: var(--bg-soft, #F2F5FA); } /* Bearbeiten direkt in der Zeile - kein Dialog, der den Zusammenhang verdeckt. */ .karte-form { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; } .karte-form input, .karte-form textarea { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 0.9rem; } .karte-form-aktionen { display: flex; gap: 0.4rem; } /* Medien, deren Quellen sich seit der Erzeugung geaendert haben. Bewusst dezent: Sie sind weiterhin brauchbar - es ist ein Hinweis, keine Warnung. */ .medien-veraltet { color: #B4491B; font-weight: 800; } /* --- Quellen als Kacheln --------------------------------------------------- Vorher waren PDFs graue Text-Pillen. Bei mehreren Dateien wurde daraus eine Reihe fast identischer Streifen - man musste jeden Namen lesen, um sie zu unterscheiden. Icon mit Dateiendung + Name + Groesse lassen sich dagegen ueberfliegen. */ .pdf-file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.55rem; margin: 0.6rem 0; } .quelle-kachel { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-m, 12px); background: #fff; overflow: hidden; } .quelle-kachel-inhalt { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; padding: 0.55rem 0.6rem; text-decoration: none; color: inherit; } a.quelle-kachel-inhalt:hover { background: var(--bg-soft, #F2F5FA); } /* Das Icon sieht bewusst nach Dokument aus: rote Ecke wie ein PDF-Symbol, mit der Dateiendung darin - so erkennt man den Typ, ohne den Namen zu lesen. */ .quelle-icon { flex: none; width: 2.1rem; height: 2.6rem; border-radius: 4px 8px 4px 4px; background: linear-gradient(160deg, #F26B5B, #D2402E); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.25rem; box-shadow: inset -6px 6px 0 rgba(255, 255, 255, 0.28); } .quelle-icon-endung { font-size: 0.56rem; font-weight: 900; color: #fff; letter-spacing: 0.03em; } .quelle-text { min-width: 0; display: flex; flex-direction: column; } .quelle-name { font-size: 0.85rem; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quelle-meta { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); } .quelle-weg { flex: none; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink-soft); padding: 0 0.6rem; cursor: pointer; font-size: 0.8rem; } .quelle-weg:hover { background: #FFF1EE; color: var(--red-600, #C0392B); } /* --- Gefuehrte Ersteinrichtung ---------------------------------------------- Wichtig: NICHTS in dieser Tour faengt Klicks ab. Der Nutzer bedient das echte Element; die Tour legt sich nur darueber. So kann niemand darin feststecken. */ #tour { position: fixed; inset: 0; z-index: 100; pointer-events: none; } /* Der Scheinwerfer ist EIN Element: ein riesiger Schatten ringsum laesst die Mitte frei. Kein SVG-Maskieren, kein Verschieben des Zielelements - beides waere fehleranfaellig, sobald sich das Layout aendert. */ .tour-loch { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(16, 24, 40, 0.6); outline: 3px solid var(--amber, #F5A623); outline-offset: 2px; transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease; pointer-events: none; } .tour-blase { position: fixed; left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 2rem)); display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.9rem 2.2rem 0.9rem 0.9rem; border-radius: var(--radius-l); background: #fff; box-shadow: 0 16px 40px rgba(16, 24, 40, 0.3); pointer-events: auto; /* nur die Blase selbst ist bedienbar (Schliessen-Knopf) */ } .tour-blase-clevero { width: 52px; height: auto; flex: none; } .tour-blase-text { min-width: 0; } .tour-schritt { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); } .tour-blase h3 { margin: 0.1rem 0 0.25rem; font-size: 1.02rem; font-weight: 900; } .tour-blase p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); } .tour-weg { position: absolute; top: 0.5rem; right: 0.6rem; border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: 0.9rem; line-height: 1; } .tour-weg:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .tour-loch { transition: none; } } /* --- Erste Schritte --------------------------------------------------------- */ .erste-schritte { margin-bottom: 1.2rem; padding: 1.1rem 1.2rem; border: 1px solid var(--teal-300); border-radius: var(--radius-l); background: var(--teal-50); } .es-kopf { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; } .es-clevero { width: 54px; height: auto; flex: none; } .es-kopf h2 { margin: 0; font-size: 1.05rem; font-weight: 900; } .es-kopf p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--ink-soft); } .es-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .es-liste li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 700; } .es-haken { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--teal-300); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; color: var(--teal-700); } .es-liste li.es-fertig { color: var(--ink-soft); text-decoration: line-through; } .es-liste li.es-fertig .es-haken { background: var(--teal-500); border-color: var(--teal-500); color: #fff; } /* Begruessung vor der Fuehrung. Faengt Klicks BEWUSST ab (anders als der Scheinwerfer) - es ist ein Dialog mit zwei Knoepfen, kein Overlay ueber der Oberflaeche. */ .tour-start-huelle { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(16, 24, 40, 0.55); } .tour-start-karte { max-width: 400px; width: 100%; padding: 1.5rem 1.5rem 1.3rem; border-radius: var(--radius-l); background: #fff; box-shadow: 0 20px 50px rgba(16, 24, 40, 0.28); text-align: center; } .tour-start-clevero { width: 104px; height: auto; margin: -3.8rem auto 0.5rem; display: block; } .tour-start-karte h2 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 900; text-wrap: balance; } .tour-start-karte p { margin: 0 0 1.2rem; font-size: 0.94rem; line-height: 1.6; color: var(--ink-soft); } .tour-start-aktionen { display: flex; flex-direction: column; gap: 0.5rem; } /* Klammert die drei Wege, Stoff hereinzubekommen (PDF, Foto, Text). Existiert vor allem, damit die gefuehrte Tour sie GEMEINSAM anleuchten kann - vorher zeigte der Scheinwerfer nur auf den Foto-Knopf, obwohl alle drei gleichwertig sind. */ .quellen-eingabe { display: block; } /* Die Batterie ist ein Knopf (fuehrt zum Aufladen) - sie muss also auch danach aussehen. */ .credits-chip { cursor: pointer; font-family: inherit; font-size: inherit; transition: transform 0.12s ease, background-color 0.18s ease; } .credits-chip:hover { background: #E3E8FF; transform: translateY(-1px); } .credits-chip.credits-leer:hover { background: #FBD9D9; } .credits-chip:active { transform: translateY(0); } .credits-chip:focus-visible { outline: 3px solid var(--violet-600, #1C2E52); outline-offset: 2px; } /* --- Konto schliessen ------------------------------------------------------- Steht ganz unten und in Rot: Wer es sucht, findet es - wer nur scrollt, klickt nicht versehentlich darauf. */ .konto-gefahr { margin-top: 2.5rem; padding: 1.1rem 1.2rem; border: 1px solid #F3C9C9; border-radius: var(--radius-l); background: #FFF7F7; } .konto-gefahr h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 900; color: var(--red-700, #A6342C); } .konto-gefahr p { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); } .btn-gefahr { background: var(--red-600, #C0392B); color: #fff; border: 1px solid var(--red-700, #A6342C); box-shadow: 0 4px 0 var(--red-700, #A6342C); } .btn-gefahr:hover:not(:disabled) { background: #B03428; } .btn-gefahr:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-700, #A6342C); } .konto-dialog-huelle { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(16, 24, 40, 0.6); } .konto-dialog { max-width: 420px; width: 100%; padding: 1.4rem 1.5rem; border-radius: var(--radius-l); background: #fff; box-shadow: 0 20px 50px rgba(16, 24, 40, 0.3); text-align: center; } .konto-dialog-bild { width: 190px; height: auto; margin: -2.2rem auto 0.4rem; display: block; } .konto-dialog h2 { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: 900; } .konto-dialog > p { margin: 0 0 0.9rem; color: var(--ink-soft); line-height: 1.55; } .konto-verlust { list-style: none; margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-m, 10px); background: var(--bg-soft, #F2F5FA); text-align: left; font-size: 0.9rem; font-weight: 700; } .konto-verlust li { display: flex; gap: 0.5rem; } .konto-verlust li::before { content: "✕"; color: var(--red-600, #C0392B); flex: none; } .konto-warnung { margin: 0 0 1.1rem; font-size: 0.87rem; line-height: 1.5; font-weight: 700; color: var(--red-700, #A6342C); } .konto-dialog-aktionen { display: flex; flex-direction: column; gap: 0.5rem; } /* --- Abmelden --------------------------------------------------------------- Bewusst leiser als der Batterie-Chip daneben: Abmelden ist kein Ziel, das jemand sucht. Es soll auffindbar sein, aber nicht mit "Lernrunde starten" um Aufmerksamkeit ringen. */ .btn-abmelden { font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .btn-abmelden:hover { background: var(--surface); color: var(--ink); } .btn-abmelden:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 2px; } /* --- Anmeldeschirm nach dem Abmelden ---------------------------------------- */ .login-karte { max-width: 380px; margin: 8vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; } .login-clevero { width: 140px; height: auto; } .login-karte h1 { font-size: 1.5rem; margin: 0; color: var(--ink); } .login-karte > p { margin: 0; color: var(--ink-soft); } /* Der Bestand wird in Gruen belegt - er ist die gute Nachricht auf diesem Schirm. */ .login-stand { font-size: 0.95rem; font-weight: 700; color: var(--green-700); background: var(--green-100); border-radius: var(--radius-s); padding: 0.5rem 0.9rem; } .login-stand:empty { display: none; } .login-karte .btn-block { width: 100%; } .login-hinweis { text-align: center; } /* --- Echte Anmeldung (Supabase-Modus) -------------------------------------- Ruhig und mittig – der erste Bildschirm für neue Nutzer. Nutzt dieselben Tokens wie der Rest, damit es nicht wie eine Fremdseite wirkt. */ .auth-karte { max-width: 380px; margin: 7vh auto 0; display: flex; flex-direction: column; gap: 0.7rem; text-align: center; } .auth-logo { width: 120px; height: auto; margin: 0 auto 0.4rem; } .auth-karte h1 { font-size: 1.5rem; margin: 0; color: var(--ink); } .auth-unter { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.95rem; } .auth-form { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; } .auth-label { font-weight: 700; font-size: 0.85rem; color: var(--ink); margin-top: 0.4rem; } .auth-input { font-family: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); } .auth-input:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 1px; } .auth-form .btn-block { width: 100%; margin-top: 0.9rem; } .auth-fehler { color: var(--red-700); background: var(--red-100); border-radius: var(--radius-s); padding: 0.5rem 0.7rem; font-size: 0.9rem; margin: 0.3rem 0 0; } .auth-hinweis { color: var(--green-700); background: var(--green-100); border-radius: var(--radius-s); padding: 0.5rem 0.7rem; font-size: 0.9rem; margin: 0.3rem 0 0; } .auth-wechsel { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); } .auth-wechsel-link { background: none; border: none; cursor: pointer; padding: 0; font: inherit; font-weight: 800; color: var(--violet-600); text-decoration: underline; } /* Passwort-Regeln-Hinweis unter dem Passwortfeld (nur beim Registrieren/Reset). */ .auth-regeln { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.35; text-align: left; margin: 0.1rem 0 0.2rem; } /* "Passwort vergessen?" – unter dem Anmelden-Knopf, dezent zentriert. */ .auth-vergessen { display: block; margin: 0.7rem auto 0; font-size: 0.85rem; font-weight: 700; } /* Rechtliches-Links (AGB/Impressum/Datenschutz) – Anmeldung + Einstellungen. */ .auth-rechtliches { margin-top: 1rem; font-size: 0.8rem; color: var(--ink-soft); text-align: center; line-height: 1.5; } .auth-rechtliches a { color: var(--violet-600); } .rechtliches-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e6e8f0; text-align: center; } .rechtliches-footer a { margin: 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; } .rechtliches-footer a:hover { text-decoration: underline; } /* Passwortfeld mit Auge-Umschalter (Anzeigen/Verbergen). Der Knopf sitzt absolut im Feld; das Feld bekommt rechts Platz, damit der Text nicht darunter läuft. */ .pw-wrap { position: relative; width: 100%; } .pw-wrap input { width: 100%; display: block; box-sizing: border-box; padding-right: 2.9rem; } .pw-wrap input[hidden] { display: none; } .pw-auge { position: absolute; right: 0.3rem; top: 0; bottom: 0; margin: auto 0; height: 2.1rem; width: 2.1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 8px; transition: color 0.15s, background 0.15s; } .pw-auge:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); } .pw-auge:focus-visible { outline: 2px solid var(--violet-600); outline-offset: 1px; } .pw-auge .auge { width: 20px; height: 20px; display: block; } /* Standard (Passwort verborgen): "Anzeigen"-Auge zeigen. Sichtbar: durchgestrichenes. */ .pw-auge .auge-verbergen { display: none; } .pw-auge.pw-auge-offen .auge-anzeigen { display: none; } .pw-auge.pw-auge-offen .auge-verbergen { display: block; } /* Ist das Feld ausgeblendet (z. B. "Wiederholen" nur beim Registrieren), soll auch der Auge-Knopf verschwinden – sonst schwebt er allein im Layout. */ .pw-wrap input[hidden] + .pw-auge { display: none; } /* Und der ganze Wrapper verschwindet, damit im Flex-Formular kein Leer-Abstand (gap) für das verborgene Feld übrig bleibt. */ .pw-wrap:has(input[hidden]) { display: none; } /* Einstellungen: E-Mail-Zeile + Passwort-ändern-Block */ .konto-zugang-mail { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); } .konto-zugang-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); } .konto-zugang-wert { font-size: 1rem; color: var(--ink); word-break: break-all; } .pw-aendern-form { margin-top: 0.2rem; } .pw-aendern-form .credits-untertitel { margin-top: 0; } /* Ordner (Fach) umbenennen – dezenter Textknopf unter dem Fach-Titel. */ .fach-umbenennen { background: none; border: none; padding: 0; margin-top: 0.35rem; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; } .fach-umbenennen:hover { color: var(--violet-600); } /* E-Mail-bestätigen-Screen (nach der Registrierung). Freigestellte Löwen, die auf der weißen Karte "schweben" – wie die übrigen Maskottchen (kein dunkler Kasten). */ .mailbest-bild { width: 184px; margin: 0 auto 0.4rem; animation: mailbest-float 4s ease-in-out infinite; } .mailbest-bild img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(24, 40, 73, 0.16)); } @keyframes mailbest-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .mailbest-bild { animation: none; } } .mailbest-tipp { font-size: 0.85rem; color: var(--ink-soft); margin: 0.9rem 0 0.4rem; } #mailbest-postfach { margin-top: 0.4rem; } /* ── Große Feier: animierter Clevero + Konfetti (Streak-Meilenstein, Deck gemeistert) ── */ .feier-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(24, 40, 73, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s ease; } .feier-overlay.feier-an { opacity: 1; } .feier-box { position: relative; z-index: 2; background: var(--surface); border-radius: 24px; padding: 1.6rem 1.6rem 1.4rem; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(24, 40, 73, 0.35); transform: scale(0.8) translateY(12px); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1.4, 0.4, 1), opacity 0.3s ease; } .feier-overlay.feier-an .feier-box { transform: scale(1) translateY(0); opacity: 1; } .feier-clevero-wrap { position: relative; display: inline-block; margin-bottom: 0.4rem; } .feier-clevero { width: 150px; height: auto; display: block; animation: feier-pop 0.6s cubic-bezier(0.22, 1.4, 0.4, 1) both; } .feier-emoji { position: absolute; top: -6px; right: -12px; font-size: 2.5rem; animation: feier-emoji-pop 0.5s 0.2s cubic-bezier(0.22, 1.6, 0.4, 1) both; } @keyframes feier-pop { 0% { transform: scale(0.4) rotate(-8deg); } 60% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } @keyframes feier-emoji-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } } .feier-titel { margin: 0.2rem 0 0.3rem; font-size: 1.5rem; font-weight: 900; color: var(--ink); } .feier-text { margin: 0 0 1.1rem; color: var(--ink-soft); line-height: 1.5; font-size: 0.98rem; } .feier-konfetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .konfetti { position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 2px; opacity: 0.9; animation: konfetti-fall linear forwards; } @keyframes konfetti-fall { 0% { transform: translateY(-14px) rotate(0); } 100% { transform: translateY(104vh) rotate(720deg); } } @media (prefers-reduced-motion: reduce) { .feier-box, .feier-clevero, .feier-emoji { animation: none !important; transform: none !important; } .konfetti { display: none; } } /* ══ Gamification-Stufe 2: Tages-Quests, Wochen-Truhe, Clevero-Deko, Belohnungs-Toasts ══ */ .quests-card, .deko-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .quests-head, .deko-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .quests-title, .deko-title { font-weight: 800; color: var(--ink); font-size: 1.05rem; } .quests-meta { display: inline-flex; align-items: center; gap: 0.5rem; } .quests-fortschritt { font-size: 0.85rem; color: var(--ink-soft); font-weight: 700; } .quests-freeze { display: inline-flex; align-items: center; gap: 0.2rem; background: #E8F6FF; color: #2478B5; border: 1px solid #CDEAFB; border-radius: var(--radius-pill); padding: 0.1rem 0.55rem; font-size: 0.82rem; font-weight: 800; } .quests-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .quest { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-m); background: #F7F9FC; border: 1px solid var(--line); } .quest-fertig { background: #EEF9F0; border-color: #CFEBD5; } .quest-icon { font-size: 1.5rem; line-height: 1; } .quest-body { min-width: 0; } .quest-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .quest-titel { font-weight: 800; color: var(--ink); font-size: 0.95rem; } .quest-xp { font-weight: 800; color: var(--amber-deep); font-size: 0.82rem; flex: none; } .quest-text { font-size: 0.82rem; color: var(--ink-soft); margin: 0.1rem 0 0.4rem; } .quest-bar { height: 7px; border-radius: 999px; background: #E3E9F3; overflow: hidden; } .quest-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--amber-deep)); transition: width 0.5s ease; } .quest-fertig .quest-fill { background: linear-gradient(90deg, #38B24C, #2E9E42); } .quest-stand { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink-soft); font-size: 0.82rem; flex: none; } .quests-alle { margin: 0.85rem 0 0; text-align: center; font-weight: 800; color: #2478B5; font-size: 0.9rem; } /* Wochen-Truhe */ .truhe-card { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 0.9rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .truhe-offen { cursor: pointer; background: linear-gradient(135deg, #FFF7E8, #FFEFD0); border-color: #F4D79A; animation: truhe-wackeln 2.2s ease-in-out infinite; } .truhe-offen:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .truhe-emoji { font-size: 2rem; line-height: 1; flex: none; } .truhe-emoji-zu { opacity: 0.75; } .truhe-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .truhe-title { font-weight: 800; color: var(--ink); } .truhe-text { font-size: 0.85rem; color: var(--ink-soft); } .truhe-cta { flex: none; background: var(--amber); color: #fff; font-weight: 800; border-radius: var(--radius-pill); padding: 0.4rem 0.95rem; font-size: 0.9rem; } .truhe-bar { height: 7px; border-radius: 999px; background: #E3E9F3; overflow: hidden; margin-top: 0.35rem; } .truhe-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-500), #17998A); transition: width 0.5s ease; } @keyframes truhe-wackeln { 0%,92%,100% { transform: rotate(0); } 94% { transform: rotate(-3deg); } 96% { transform: rotate(3deg); } 98% { transform: rotate(-2deg); } } /* Clevero-Deko */ .deko-hint { font-size: 0.8rem; color: var(--ink-soft); } .deko-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; } .deko-teil { font: inherit; cursor: pointer; background: #F7F9FC; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-weight: 700; font-size: 0.9rem; color: var(--ink); transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .deko-teil:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--violet-500); } .deko-aktiv { background: var(--violet-600); color: #fff; border-color: var(--violet-600); } .deko-gesperrt { opacity: 0.55; cursor: not-allowed; color: var(--ink-soft); } .deko-abnehmen { color: var(--ink-soft); } /* Deko-Overlay über dem feiernden Clevero (Kosmetik sichtbar machen) */ .feier-clevero-wrap { position: relative; } .feier-deko { position: absolute; top: -6%; left: 50%; transform: translateX(-50%); font-size: 2.4rem; line-height: 1; z-index: 2; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); } /* Belohnungs-Toast (nicht blockierend) */ .gami-toast { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -140%); z-index: 60; display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.6rem 1.1rem 0.6rem 0.8rem; box-shadow: var(--shadow-card-hover); max-width: min(92vw, 420px); opacity: 0; transition: transform 0.32s cubic-bezier(.2,.9,.3,1.2), opacity 0.25s ease; } .gami-toast-an { transform: translate(-50%, 0); opacity: 1; } .gami-toast-icon { font-size: 1.6rem; line-height: 1; flex: none; } .gami-toast-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .gami-toast-titel { font-weight: 800; color: var(--ink); font-size: 0.95rem; } .gami-toast-text { font-size: 0.82rem; color: var(--ink-soft); } @media (prefers-reduced-motion: reduce) { .truhe-offen { animation: none; } .gami-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); } } /* ══ Prüfungs-Countdown-Coach ══ */ .lernplan-coach-btn { margin-top: 0.6rem; width: 100%; font: inherit; cursor: pointer; background: #EAF7F4; color: #12796C; border: 1.5px solid #BFE7DF; border-radius: var(--radius-m); padding: 0.55rem 0.9rem; font-weight: 800; font-size: 0.9rem; transition: transform 0.12s ease, background 0.12s ease; } .lernplan-coach-btn:hover { transform: translateY(-1px); background: #DDF1EC; } .pruefung-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.4rem 1.3rem; box-shadow: var(--shadow-card); } .pruefung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .pruefung-kicker { display: inline-block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 800; color: var(--teal-500); margin-bottom: 0.3rem; } .pruefung-titel { font-size: 1.4rem; font-weight: 900; color: var(--ink); margin: 0; line-height: 1.15; } .pruefung-countdown { margin: 0.35rem 0 0; color: var(--ink-soft); } .pruefung-countdown strong { color: var(--amber-deep); } .pruefung-ring { --ring: 0; width: 94px; height: 94px; border-radius: 50%; flex: none; display: grid; place-items: center; text-align: center; position: relative; background: conic-gradient(var(--teal-500) calc(var(--ring) * 1%), #E3E9F3 0); } .pruefung-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); } .pruefung-ring-zahl { position: relative; z-index: 1; font-size: 1.35rem; font-weight: 900; color: var(--ink); line-height: 1; } .pruefung-ring-label { position: relative; z-index: 1; font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); } .pruefung-stand { margin: 1rem 0 0; color: var(--ink-soft); } .pruefung-stand strong { color: var(--amber-deep); } .pruefung-aktionen { display: flex; gap: 0.6rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; } .pruefung-aktionen .btn { flex: 1 1 auto; } .pruefung-plan { margin-top: 1.1rem; } .pruefung-plan-titel { font-weight: 800; color: var(--ink); font-size: 0.95rem; } .pruefung-tage { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .pruefung-tag { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.85rem; border-radius: var(--radius-m); background: #F7F9FC; border: 1px solid var(--line); } .pruefung-tag-heute { background: #FFF6E9; border-color: #F4D79A; } .pruefung-tag-probe { background: #EAF7F4; border-color: #BFE7DF; } .pruefung-tag-datum { font-weight: 800; color: var(--ink); font-size: 0.85rem; min-width: 6.5em; } .pruefung-tag-label { color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; text-align: right; } .pruefung-hinweis { margin: 1rem 0 0; font-size: 0.75rem; color: var(--ink-soft); text-align: center; } .pruefung-kein-fach { color: var(--ink-soft); line-height: 1.6; margin: 0.8rem 0 0; } /* ══ Karten-Heilung (adaptiv: Clevero formuliert schwache Karten neu) ══ */ .karte-aktion-heilen { font-size: 1rem; } .karte-heilen-laedt { font-size: 0.82rem; color: var(--ink-soft); font-weight: 700; white-space: nowrap; } .karte-heilung { flex: 1; background: #EAF7F4; border: 1px solid #BFE7DF; border-radius: var(--radius-m); padding: 0.85rem 1rem; } .karte-heilung-kopf { font-weight: 800; color: #12796C; margin-bottom: 0.6rem; } .karte-heilung-neu { display: flex; flex-direction: column; gap: 0.4rem; } .karte-heilung-zeile { display: flex; gap: 0.6rem; align-items: baseline; } .karte-heilung-label { flex: none; min-width: 4.5em; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding-top: 0.1rem; } .karte-heilung-zeile > span:last-child { color: var(--ink); font-weight: 600; } .karte-heilung-erklaerung { margin: 0.5rem 0 0; color: var(--ink-soft); line-height: 1.55; font-size: 0.9rem; } .karte-heilung .karte-form-aktionen { margin-top: 0.8rem; display: flex; gap: 0.5rem; } /* 🏆 Erfolge-Reiter: eigener Kinder-Bereich für Quests/Serie/Truhe/Abzeichen. */ .erfolge-hero { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, #FFF6E9 0%, #F1FBF8 100%); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.1rem 1.3rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .erfolge-hero-clevero { width: 72px; height: 72px; object-fit: contain; flex: none; } .erfolge-hero-text { min-width: 0; } .erfolge-hero-titel { margin: 0; font-size: 1.4rem; font-weight: 900; color: var(--ink); line-height: 1.1; } .erfolge-hero-untertitel { margin: 0.3rem 0 0; color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; } /* Willkommens-Übersicht: motivierender Landepunkt nach dem Anmelden. Als Spalte aufgebaut (Kopf → Chip-Reihe → Button volle Breite), damit nichts gedrängt wirkt oder abschneidet. */ .willkommen { display: flex; flex-direction: column; gap: 0.7rem; background: linear-gradient(135deg, #FFF3DE 0%, #FFE9CC 100%); border: 1px solid #F4D79A; border-radius: var(--radius-l); padding: 1.1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); } .willkommen-kopf { display: flex; align-items: center; gap: 0.9rem; } .willkommen-clevero { width: 68px; height: 68px; object-fit: contain; flex: none; } .willkommen-body { min-width: 0; } .willkommen-gruss { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--ink); line-height: 1.15; } .willkommen-spruch { margin: 0.25rem 0 0; color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; } .willkommen-stats { display: flex; flex-wrap: wrap; gap: 0.45rem; } .wk-chip { display: inline-flex; align-items: center; gap: 0.2rem; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(23, 37, 66, 0.06); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-weight: 800; font-size: 0.86rem; color: var(--ink); } .wk-streak { color: var(--amber-deep); } .wk-freeze { color: #2478B5; } .willkommen-erfolge-btn { width: 100%; } /* --- Quellen-Disclaimer: was Clevero liest + Kosten, direkt beim Upload --- */ .quellen-disclaimer { margin: 1.1rem 0; padding: 0.9rem 1.1rem; background: #eef7f6; border: 1px solid var(--teal-300, #b9e6df); border-left: 4px solid var(--teal-500, #14b8a6); border-radius: 12px; font-size: 0.9rem; color: var(--ink, #1f2540); } .quellen-disclaimer > strong { display: block; margin-bottom: 0.45rem; font-size: 0.95rem; } .quellen-disclaimer ul { margin: 0; padding-left: 1.2rem; } .quellen-disclaimer li { margin: 0.3rem 0; line-height: 1.5; } .quellen-tipp { margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--teal-300, #b9e6df); font-size: 0.82rem; color: var(--ink-soft, #5a6480); } /* --- Lade-Overlay beim Auslesen von PDF/Fotos --- */ .scan-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(20, 24, 45, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 1.5rem; } .scan-overlay[hidden] { display: none; } .scan-overlay-box { background: #fff; border-radius: 20px; padding: 2rem 1.75rem; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); } .scan-overlay-icon { font-size: 3rem; line-height: 1; animation: scan-bob 1.4s ease-in-out infinite; } @keyframes scan-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .scan-overlay-box h3 { margin: 0.8rem 0 1rem; font-size: 1.15rem; color: var(--ink, #1f2540); } .scan-progress { height: 12px; background: #e6e8f0; border-radius: 999px; overflow: hidden; margin: 0.5rem 0; } .scan-progress-bar { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #2C4676, var(--teal-500, #14b8a6)); transition: width 0.35s ease; } .scan-overlay-text { margin: 0.6rem 0 0; font-weight: 800; color: var(--ink, #1f2540); } .scan-overlay-hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--ink-soft, #5b6382); } @media (prefers-reduced-motion: reduce) { .scan-overlay-icon { animation: none; } } /* --- Inline-Umbenennen eines Ordners (statt prompt()) --- */ .fach-rename-input { font: inherit; font-weight: inherit; line-height: inherit; color: var(--ink, #1f2540); background: #fff; border: 2px solid var(--teal-500, #14b8a6); border-radius: 10px; padding: 2px 10px; max-width: 100%; min-width: 8ch; } .fach-rename-input:focus { outline: none; box-shadow: 0 0 0 3px var(--teal-100, #d3f4ee); }