/* mechatronik-lernen.at - Gestaltung */ /* Comfortaa liegt im Projekt, nicht bei Google. Beim Einbinden ueber das Google-CDN wuerde bei jedem Seitenaufruf die IP-Adresse des Besuchers an Google uebertragen - bei einem entgeltlichen Angebot in der EU ein Datenschutzproblem. Die Schrift steht unter der SIL Open Font License und darf mitgeliefert werden. Es ist eine Variable Font, eine Datei deckt alle Schnitte von 300 bis 700 ab. */ @font-face { font-family: 'Comfortaa'; src: url('fonts/comfortaa.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } /* Inter für alle Texte außer der Wortmarke - ebenfalls im Projekt, aus font/Inter_18pt-*.ttf auf Latein, Satzzeichen, € und ein paar technische Zeichen gekürzt (SIL Open Font License). Der Browser lädt nur die Schnitte, die eine Seite wirklich braucht. Zwischenwerte wie 550 oder 650 im CSS nimmt er vom nächststärkeren Schnitt. */ @font-face { font-family: 'Inter'; src: url('fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* Markenfarben */ --blau: #215267; --tuerkis: #48b28d; --grau: #434343; --bg: #f4f6f9; --surface: #ffffff; --border: #dde3ec; --text: var(--grau); --muted: #6b7785; --accent: var(--blau); --accent-dark: #193E4D; --correct: #15803d; --correct-bg: #eaf7ee; --wrong: #b91c1c; --wrong-bg: #fdecec; --radius: 12px; /* Der Markenverlauf. Senkrecht, damit die Bildschirmbreite keine Rolle spielt; die Balkenvariante laeuft waagrecht mit dem Fuellstand mit. */ --gradient: linear-gradient(180deg, var(--blau) 0%, var(--tuerkis) 100%); --gradient-bar: linear-gradient(90deg, var(--blau) 0%, var(--tuerkis) 100%); --gradient-mark: linear-gradient(145deg, var(--blau) 0%, var(--tuerkis) 100%); --card-shadow: 0 1px 2px rgb(16 32 56 / 6%), 0 12px 32px -12px rgb(16 32 56 / 18%); --panel: rgb(255 255 255 / 72%); --panel-line: rgb(255 255 255 / 34%); --on-gradient: #ffffff; } /* Das Farbschema haengt am Attribut data-theme auf . Gesetzt wird es bereits im HTML (Vorgabe: dunkel), damit beim Laden nichts aufblitzt; assets/app.js ueberschreibt es mit der gespeicherten Wahl des Nutzers. */ :root[data-theme="dark"] { --bg: #0e1319; --surface: #182029; --border: #2b3543; --text: #e8edf4; --muted: #94a3b8; /* Dunkelblau ist auf dunklem Grund nicht lesbar - aufgehellte Variante. */ --accent: #5DAACB; --accent-dark: #4E97B6; --tuerkis: #75C7AB; --correct: #4ade80; --correct-bg: #14321f; --wrong: #f87171; --wrong-bg: #3a1a1a; --gradient: linear-gradient(180deg, #14313E 0%, #1D493A 100%); --card-shadow: 0 20px 48px -18px rgb(0 0 0 / 70%); --panel: rgb(24 32 41 / 74%); --panel-line: rgb(255 255 255 / 8%); } * { box-sizing: border-box; } /* Muss nach den Layout-Regeln greifen: display:flex/grid würde das hidden-Attribut sonst aushebeln. */ [hidden] { display: none !important; } /* Der Verlauf liegt fest hinter dem gesamten Fenster - er gilt fuer alle Ansichten und bleibt beim Scrollen stehen. Unabhaengig von Breite, Scrollbalken und Inhaltshoehe. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--gradient); } /* Die Fußzeile sitzt immer unten, auch wenn der Inhalt kurz ist. */ body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.55; } main { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; } h1, h2, h3 { line-height: 1.25; } /* ------------------------------------------------------------- Kopfzeile */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; position: sticky; top: 0; z-index: 10; background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--panel-line); } .brand { display: flex; text-decoration: none; align-items: center; gap: 11px; background: none; border: 0; padding: 0; cursor: pointer; } /* Wortmarke: drei Farben, ein Wort. Comfortaa nur hier, der Fliesstext bleibt bei der Systemschrift - die liest sich in langen Antworten besser. */ .wordmark { font-family: 'Comfortaa', system-ui, sans-serif; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.005em; white-space: nowrap; } .wordmark-gross { display: block; margin: 0 0 6px; font-size: 1.4rem; } .wm-blau { color: var(--blau); } .wm-tuerkis { color: var(--tuerkis); } .wm-grau { color: var(--grau); } /* Auf dunklem Grund sind Dunkelblau und Grau nicht lesbar. */ :root[data-theme="dark"] .wm-blau { color: #7FC4DD; } :root[data-theme="dark"] .wm-grau { color: #B4BCC6; } /* Schriftzug in der Kopfzeile - ohne Signet, nur der Text */ .brand .wordmark { font-size: 1.28rem; } .topbar-right { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; } .user-mail { color: var(--muted); } /* Schaltflächen in der Kopfzeile: nur Sinnbild, Beschriftung über aria-label. */ .icon-button, .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .icon-button:hover, .theme-toggle:hover { color: var(--text); border-color: var(--muted); } .icon-button svg { width: 17px; height: 17px; } /* Der Umschalter zeigt immer das Schema, in das gewechselt wird. */ .theme-toggle svg { display: none; width: 17px; height: 17px; } :root[data-theme="dark"] .theme-toggle .icon-light { display: block; } :root[data-theme="light"] .theme-toggle .icon-dark { display: block; } .badge { padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; white-space: nowrap; } .badge.is-paid { color: var(--correct); border-color: var(--correct); } /* Die Wortmarke ist breit, dadurch wird die Kopfzeile früh eng. Die E-Mail-Adresse ist die entbehrlichste Angabe und entfällt als Erstes, sonst bricht die Zeile schon am Tablet um. */ @media (max-width: 900px) { .user-mail { display: none; } } @media (max-width: 560px) { .topbar { padding: 10px 12px; } .topbar-right { gap: 9px; width: 100%; justify-content: space-between; } .badge { padding: 3px 9px; font-size: 0.78rem; } .brand .wordmark { font-size: 1.12rem; } } /* ---------------------------------------------------------------- Bausteine */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; margin-bottom: 20px; box-shadow: var(--card-shadow); } /* Schaltflaechen und Felder erben Schrift und Textfarbe nicht von selbst - ohne diese Zeile nehmen sie das Schwarz des Browsers und verschwinden im dunklen Schema. */ button, input, select, textarea, a.as-link { font: inherit; color: inherit; } .primary { display: inline-block; width: 100%; padding: 12px 18px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; } .primary:hover { background: var(--accent-dark); } /* Symbol vor dem Text, etwa der Einkaufswagen beim Bestellen. */ .button-icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; } .link-button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; } a.link-button { display: inline-block; text-decoration: none; } .link-button:hover { text-decoration: underline; } .back { margin-bottom: 14px; color: var(--on-gradient); text-shadow: 0 1px 3px rgb(0 0 0 / 28%); } .hint { color: var(--muted); font-size: 0.86rem; } .error { background: var(--wrong-bg); color: var(--wrong); border-radius: 8px; padding: 10px 12px; margin: 4px 0 14px; font-size: 0.9rem; } .loading { color: var(--on-gradient); text-align: center; padding: 40px 0; text-shadow: 0 1px 3px rgb(0 0 0 / 28%); } /* ------------------------------------------------------------- Anmeldung */ /* Der Anmeldescreen bekommt einen eigenen, kühlen Hintergrund: zwei weiche Lichtpunkte über einem leichten Verlauf. Bewusst schwach gesättigt, damit die Karte im Vordergrund bleibt und der Text gut lesbar ist. */ .auth-view { display: flex; justify-content: center; align-items: flex-start; margin: -24px -16px -64px; padding: 9vh 16px 48px; } .auth-card { width: 100%; max-width: 400px; padding: 30px 28px 26px; } .subtitle { margin: 0 0 24px; color: var(--muted); font-size: 0.92rem; } /* Umschalter Anmelden / Konto erstellen */ .tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 22px; } .tab { flex: 1; padding: 9px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .tab:hover { color: var(--text); } .tab.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgb(16 32 56 / 14%); } label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 550; color: var(--muted); } input[type="email"], input[type="password"], input[type="text"], input[type="search"], input[type="number"] { width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input[type="email"]:hover, input[type="password"]:hover, input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover { border-color: var(--muted); } /* Eigener Fokusrahmen statt outline - der Sprung um 2px wirkt sonst unruhig. */ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(33 82 103 / 16%); } /* Umschalter für das Farbschema */ .theme-switch { display: flex; gap: 6px; justify-content: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .theme-option { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font-size: 0.85rem; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .theme-option svg { width: 15px; height: 15px; } .theme-option:hover { color: var(--text); } .theme-option.is-active { border-color: var(--border); background: var(--bg); color: var(--text); font-weight: 600; } /* Der Hinweis gehört optisch zum Feld darüber, nicht zum Feld darunter. */ form .hint { margin: -8px 0 18px; } .auth-card .primary { margin-top: 4px; } /* "Passwort vergessen?" und "Zurück zur Anmeldung" unter dem Hauptknopf */ .auth-switch { display: block; margin: 14px auto 0; font-size: 0.9rem; } .auth-title { margin: 0 0 8px; font-size: 1.1rem; } .auth-text { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; } /* Bestätigungscode: vier große Ziffern, mittig. */ input.code-input { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.5em; text-align: center; padding-left: 0.5em; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ NQR-Niveau */ /* Niveau und Fortschritt nebeneinander, am Handy untereinander. */ .dashboard-top { display: grid; grid-template-columns: minmax(300px, 2fr) 3fr; gap: 14px; margin-bottom: 20px; } .dashboard-top > .card { margin: 0; padding: 18px 20px; } .nqr-card { position: relative; } .nqr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .nqr-label { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); } .help-button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .help-button:hover, .help-button[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); } .nqr-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .nqr-select:hover { border-color: var(--muted); } .nqr-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(33 82 103 / 16%); } /* Beschreibung hinter dem Fragezeichen, schwebt über dem Inhalt darunter. */ .nqr-info { position: absolute; top: 52px; left: 12px; z-index: 20; width: min(380px, calc(100vw - 56px)); padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--card-shadow); font-size: 0.85rem; } .nqr-info-intro { margin: 0 0 10px; color: var(--muted); } .nqr-info dl { margin: 0; } .nqr-info dt { margin-top: 10px; font-weight: 700; color: var(--text); } .nqr-info dt:first-child { margin-top: 0; } .nqr-info dd { margin: 2px 0 0; color: var(--muted); } @media (max-width: 700px) { .dashboard-top { grid-template-columns: 1fr; } } /* Kennzeichen des NQR-Niveaus einer Frage in der Quizkarte */ .nqr-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: 1px; white-space: nowrap; } .nqr-tag-4 { color: var(--tuerkis); } .nqr-tag-5 { color: var(--accent); } .nqr-tag-6 { color: #c2410c; } :root[data-theme="dark"] .nqr-tag-6 { color: #fb923c; } /* ------------------------------------------------------------ Fortschritt */ .overall h2 { margin: 0 0 10px; font-size: 1.1rem; } .overall-text { margin: 0 0 12px; font-size: 1.15rem; } .overall-text strong { font-size: 1.35rem; } .overall-quota { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; } .bar { height: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; width: 0; background: var(--gradient-bar); transition: width 0.3s ease; } /* Steht ohne Karte direkt auf dem Verlauf - deshalb weiss statt Textfarbe. */ .section-title { margin: 28px 0 14px; font-size: 1.1rem; color: var(--on-gradient); text-shadow: 0 1px 3px rgb(0 0 0 / 28%); } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .category { text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; cursor: pointer; box-shadow: var(--card-shadow); transition: transform 0.15s ease, border-color 0.15s ease; } .category:hover { border-color: var(--accent); transform: translateY(-2px); } .category-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .category-name { font-weight: 600; } .category-quota { flex: none; color: var(--muted); font-size: 0.85rem; white-space: nowrap; } .category-quota.good { color: var(--correct); } .category-quota.poor { color: var(--wrong); } /* ------------------------------------------------------------------ Quiz */ .quiz-category { margin: 0 0 6px; color: var(--muted); font-size: 0.85rem; } .question { margin: 0 0 20px; font-size: 1.15rem; font-weight: 600; } .options { display: flex; flex-direction: column; gap: 10px; } .option { width: 100%; text-align: left; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); cursor: pointer; } .option:hover:not(:disabled) { border-color: var(--accent); } .option:disabled { cursor: default; } .option.is-correct { border-color: var(--correct); background: var(--correct-bg); color: var(--correct); font-weight: 600; } .option.is-wrong { border-color: var(--wrong); background: var(--wrong-bg); color: var(--wrong); } .feedback { margin-top: 22px; } .feedback-title { font-weight: 650; margin: 0 0 10px; } .feedback-title.correct { color: var(--correct); } .feedback-title.wrong { color: var(--wrong); } .explanation { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 18px; font-size: 0.94rem; white-space: pre-line; } .explanation-label { display: block; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } /* Hinweis auf eine korrigierte oder ergänzte Antwort */ .note { border: 1px solid var(--accent); border-left-width: 4px; border-radius: 10px; padding: 13px 15px; margin-bottom: 18px; font-size: 0.89rem; } .note-label { display: block; color: var(--accent); font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .note-sources { margin-top: 8px; color: var(--muted); font-size: 0.83rem; } .note-sources a { color: var(--accent); } /* ------------------------------------------------------------------ Konto */ .card-title { margin: 0 0 16px; font-size: 1.1rem; } .unlock-state { margin: 0; font-size: 0.94rem; } /* Auf der Kontoseite schliesst der Bezahlblock an den Satz darueber an. */ #view-account .support { margin-bottom: 0; } /* Hinweis aufs Unterstützen unter der Freischaltung */ .support-hint { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.92rem; } .support-hint { text-align: center; } .support-hint p { margin: 0 0 12px; text-align: left; } /* Link mit kräftig rotem Herz - soll auffallen, ohne zu drängeln. */ .support-heart { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid #fecdd3; border-radius: 999px; background: #fff1f2; color: #be123c; font: inherit; font-weight: 650; cursor: pointer; } .support-heart svg { width: 22px; height: 22px; fill: #e11d48; } .support-heart:hover { background: #ffe4e6; border-color: #fda4af; } .support-heart:hover svg { transform: scale(1.12); } .support-heart svg { transition: transform 0.15s ease; } :root[data-theme="dark"] .support-heart { background: #3b1219; border-color: #7f1d2d; color: #fda4af; } :root[data-theme="dark"] .support-heart svg { fill: #fb7185; } :root[data-theme="dark"] .support-heart:hover { background: #4c1621; } .account-facts { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 10px 20px; margin: 0; font-size: 0.94rem; } .account-facts dt { color: var(--muted); } .account-facts dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; } /* Rechnungsadresse mehrzeilig, eine Zeile je Angabe */ .account-facts .account-address { white-space: pre-line; } @media (max-width: 460px) { .account-facts { grid-template-columns: 1fr; gap: 2px 0; } .account-facts dd { margin-bottom: 10px; } } /* Kontolöschung: bewusst kein gefüllter Knopf, damit er nicht einlädt. */ .delete-text { margin: 0 0 16px; font-size: 0.94rem; } .danger-button { display: block; width: 100%; padding: 11px 18px; border: 1px solid var(--wrong); border-radius: 9px; background: none; color: var(--wrong); font-weight: 600; cursor: pointer; } .danger-button:hover { background: var(--wrong-bg); } .danger-button:disabled { opacity: 0.5; cursor: default; background: none; } /* Häkchen vor dem Löschantrag - wie beim Bestellen. */ .delete-check { display: flex; color: var(--text); font-weight: 400; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: 0.86rem; line-height: 1.45; cursor: pointer; } .delete-check[hidden] { display: none; } .delete-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--wrong); } .success { background: var(--correct-bg); color: var(--correct); border-radius: 8px; padding: 10px 12px; margin: 4px 0 14px; font-size: 0.9rem; } /* ------------------------------------------------------------- Fußzeile */ .site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 18px 16px 22px; color: var(--on-gradient); font-size: 0.84rem; text-shadow: 0 1px 3px rgb(0 0 0 / 28%); } .site-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .site-footer a:hover { text-decoration-thickness: 2px; } .auth-legal { margin-top: -8px; } /* -------------------------------------------------------- Rechtliche Seiten */ .legal { padding: 28px 30px 30px; } .legal h1 { margin: 0 0 8px; font-size: 1.5rem; } .legal h2 { margin: 28px 0 8px; font-size: 1.1rem; } .legal h3 { margin: 18px 0 4px; font-size: 0.98rem; } .legal p { margin: 0 0 10px; } .legal a { color: var(--accent); } .legal-lead { color: var(--muted); } .legal-facts { display: grid; grid-template-columns: 190px 1fr; gap: 6px 16px; margin: 0; } .legal-facts dt { color: var(--muted); } .legal-facts dd { margin: 0; } @media (max-width: 560px) { .legal { padding: 22px 18px 24px; } .legal-facts { grid-template-columns: 1fr; gap: 0; } .legal-facts dd { margin-bottom: 10px; } } /* Noch offene Angaben - müssen vor dem Livegang ergänzt werden. */ mark.offen { padding: 1px 4px; border-radius: 4px; background: #fff1a8; color: #6b4e00; } /* Muster-Rücktrittsformular: abgesetzt, damit man es als Vorlage erkennt. */ .legal-form { margin: 8px 0 10px; padding: 14px 16px 6px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg); font-size: 0.92rem; } .legal-stand { margin-top: 24px !important; color: var(--muted); font-size: 0.86rem; } /* ------------------------------------------------------------- Verwaltung */ /* Die Verwaltung bekommt mehr Breite als die Lernansichten - eine Zeile pro Konto braucht Platz für Adresse, Status und Knöpfe nebeneinander. */ main:has(#view-admin:not([hidden])) { max-width: 1120px; } .admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; } .admin-filter { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 0.82rem; cursor: pointer; } .admin-filter b { margin-left: 4px; color: var(--text); font-weight: 650; } .admin-filter:hover { border-color: var(--muted); } .admin-filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .admin-filter.is-active b { color: #fff; } /* Die Liste gibt die Spalten vor, jede Zeile übernimmt sie (subgrid). So richtet sich die Knopfspalte nach der breitesten Zeile - nichts ragt heraus, egal wie breit die Schrift auf dem Rechner ausfällt - und alle Zeilen bleiben trotzdem bündig untereinander. */ .admin-list { display: grid; grid-template-columns: minmax(0, 1fr) 250px auto; column-gap: 12px; row-gap: 4px; } .admin-list > * { grid-column: 1 / -1; } /* Eine Zeile pro Konto. Der Streifen links zeigt den Zugang: grau = Probezugang, grün = freigeschaltet, rot = gesperrt. Status und Knöpfe stehen über alle Zeilen hinweg untereinander. */ .admin-user { display: grid; grid-template-columns: subgrid; align-items: center; gap: 12px; padding: 7px 10px 7px 12px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; background: var(--bg); } .admin-user:hover { border-color: var(--muted); } .admin-user.is-unlocked { border-left-color: var(--correct); } .admin-user.is-blocked { border-left-color: var(--wrong); background: var(--wrong-bg); } /* Das Admin-Konto hebt sich farbig von allen anderen ab. */ .admin-user.is-admin { border-color: var(--accent); border-left-color: var(--accent); background: linear-gradient(120deg, color-mix(in srgb, var(--blau) 16%, var(--surface)) 0%, color-mix(in srgb, var(--tuerkis) 16%, var(--surface)) 100%); } .admin-who { min-width: 0; line-height: 1.25; } .admin-mail { display: block; font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-meta { display: block; color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-tags { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; } .admin-tag { padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .admin-tag.is-good { background: var(--correct-bg); border-color: transparent; color: var(--correct); } .admin-tag.is-bad { background: var(--wrong); border-color: transparent; color: #fff; } .admin-tag.is-note { background: #fff4d6; border-color: transparent; color: #8a5a00; } .admin-tag.is-delete { background: var(--wrong-bg); border-color: var(--wrong); color: var(--wrong); } /* Spender: kräftiges Gold - heller Gelbton ist schon "offen". */ .admin-tag.is-donor { background: #fde047; border-color: transparent; color: #713f12; } :root[data-theme="dark"] .admin-tag.is-donor { background: #facc15; color: #422006; } .admin-tag.is-admin { background: var(--gradient-mark); border-color: transparent; color: #fff; } :root[data-theme="dark"] .admin-tag.is-note { background: #3a2f12; color: #f5c451; } /* Linksbündig: "+60 Tage" und "Dauerhaft" stehen so in jeder Zeile an derselben Stelle. */ .admin-actions { display: flex; gap: 5px; justify-content: flex-end; } /* Ältere Browser ohne subgrid: feste, großzügige Knopfspalte. */ @supports not (grid-template-columns: subgrid) { .admin-user { grid-template-columns: minmax(0, 1fr) 250px 420px; } } .admin-action { padding: 4px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.78rem; white-space: nowrap; cursor: pointer; } .admin-action:hover { border-color: var(--muted); } .admin-action:disabled { opacity: 0.5; cursor: default; } .admin-action.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .admin-action.is-primary:hover { background: var(--accent-dark); } .admin-action.is-danger { color: var(--wrong); } .admin-action.is-danger-solid { background: var(--wrong); border-color: var(--wrong); color: #fff; } /* Rückfrage vor Entziehen, Sperren und Löschen - über die ganze Zeilenbreite. */ .admin-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 6px; background: var(--wrong-bg); } .admin-confirm p { flex: 1 1 260px; margin: 0; font-size: 0.85rem; white-space: pre-line; color: var(--text); } .admin-summary { margin: 12px 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; } .admin-more { display: block; margin: 6px auto 0; font-size: 0.9rem; } .admin-empty { margin: 8px 0; color: var(--muted); font-size: 0.9rem; } /* Fenster "Konto bearbeiten" */ .admin-edit { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px 20px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); } .admin-edit::backdrop { background: rgb(10 20 30 / 50%); } .admin-edit .contact-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .edit-meta { margin: -4px 0 12px; color: var(--muted); font-size: 0.85rem; } .edit-block { margin: 0; padding: 14px 0; border-top: 1px solid var(--border); } .edit-block h3 { margin: 0 0 10px; font-size: 0.95rem; } .edit-inline { display: flex; gap: 8px; align-items: center; } .edit-inline input { flex: 1; min-width: 0; } .edit-block.invoice-form { margin-top: 0; } .edit-block .admin-action.is-primary { margin-top: 4px; } .edit-actions { flex-wrap: wrap; justify-content: flex-start; color: var(--muted); font-size: 0.85rem; } .edit-block .admin-confirm { margin-top: 10px; } .edit-saved { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--correct-bg); color: var(--correct); font-size: 0.88rem; } .edit-saved[hidden] { display: none; } /* Mittlere Breite: Status rutscht unter die Adresse, die Knöpfe bleiben rechts. Die Grenzen sind so gesetzt, dass für die Adresse immer mindestens rund 230 px bleiben - sonst schrumpft sie auf ein paar Buchstaben. */ @media (max-width: 1100px) { .admin-user { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; } .admin-tags { grid-column: 1; grid-row: 2; } .admin-actions { grid-column: 2; grid-row: 1 / 3; } } /* Schmal und Handy: auch die Knöpfe kommen unter die Adresse. */ @media (max-width: 820px) { .admin-user { grid-template-columns: minmax(0, 1fr); } .admin-tags, .admin-actions { grid-column: 1; grid-row: auto; } .admin-actions { flex-wrap: wrap; justify-content: flex-start; } } /* ------------------------------------------------------ Nachricht an mich */ /* Hellblauer Knopf mit weißem Rand und Schatten - hebt sich vom blau-grünen Verlauf ab, im hellen wie im dunklen Modus. */ .contact-fab { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #60a5fa; box-shadow: 0 8px 22px -4px rgb(0 0 0 / 50%); cursor: pointer; transition: transform 0.15s ease; } .contact-fab:hover { transform: scale(1.06); background: #4b95ee; } .contact-fab svg { width: 26px; height: 26px; stroke-width: 2.4; } .contact-panel { position: fixed; right: 16px; bottom: 76px; z-index: 50; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); } .contact-panel[hidden] { display: none; } .contact-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .contact-head h2 { margin: 0; font-size: 1.05rem; } .contact-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; } .contact-close:hover { background: var(--bg); color: var(--text); } .contact-kinds { display: flex; gap: 6px; margin-bottom: 12px; } .contact-kinds label { flex: 1; cursor: pointer; } .contact-kinds input { position: absolute; opacity: 0; pointer-events: none; } .contact-kinds span { display: block; padding: 7px 4px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font-size: 0.85rem; color: var(--muted); } .contact-kinds input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; } .contact-kinds input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .contact-field { display: block; margin-bottom: 10px; font-size: 0.85rem; font-weight: 550; color: var(--muted); } .contact-field[hidden] { display: none; } .contact-field input { display: block; margin-top: 5px; } .contact-amount input { max-width: 160px; } .contact-field textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-weight: 400; resize: vertical; box-sizing: border-box; } .contact-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .contact-done { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--correct-bg); color: var(--correct); font-size: 0.9rem; } /* Platz unter dem Inhalt, damit der Knopf nichts verdeckt. */ .site-footer { padding-bottom: 76px; } /* --------------------------------------------------------------- Tagesziel */ .limit-card { max-width: 480px; margin-inline: auto; padding: 30px 26px 24px; text-align: center; } /* Haken als Belohnung - der Tag ist geschafft, nicht abgebrochen. */ .done-mark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; color: #fff; background: var(--gradient-mark); box-shadow: 0 6px 16px -6px rgb(33 82 103 / 45%); } .done-mark svg { width: 25px; height: 25px; } .limit-card h2 { margin: 0 0 6px; font-size: 1.35rem; } .limit-count { margin: 0 0 14px; color: var(--muted); } .limit-text { margin: 0; font-size: 0.95rem; } /* Der Spendenkasten: getönt statt umrandet, das wirkt einladender als ein harter Rahmen. */ .support { margin: 22px 0 16px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(160deg, rgb(33 82 103 / 8%) 0%, rgb(72 178 141 / 13%) 100%); text-align: left; } :root[data-theme="dark"] .support { background: linear-gradient(160deg, rgb(33 82 103 / 18%) 0%, rgb(72 178 141 / 15%) 100%); } .support h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font-size: 1.02rem; } .support-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: var(--gradient-mark); } .support-icon svg { width: 15px; height: 15px; } .support p { margin: 0 0 16px; font-size: 0.94rem; } /* Einziger Knopf im Markenverlauf - hier darf er hervorstechen. */ .support .primary { background: var(--gradient-mark); box-shadow: 0 6px 16px -6px rgb(33 82 103 / 45%); } .support .primary:hover { filter: brightness(1.08); } /* Rechnungsanschrift */ .invoice-form { margin-top: 16px; } .invoice-form label { display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 550; color: var(--muted); } .invoice-form input { display: block; margin-top: 5px; } .invoice-fields { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; } .invoice-heading { display: block; padding: 0; margin-bottom: 8px; font-weight: 650; color: var(--text); } /* Bekannte Adresse aus der letzten Bestellung - muss nicht neu getippt werden. */ .invoice-known { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; } .invoice-known .invoice-heading { margin-bottom: 4px; } .invoice-known-text { margin: 0 0 8px; white-space: pre-line; } /* Häkchen beim Bestellen: Kästchen links, Text daneben in normaler Schrift. */ .invoice-form label.check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 12px; color: var(--text); font-weight: 400; font-size: 0.86rem; line-height: 1.45; cursor: pointer; } .invoice-form label.check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); } .invoice-form label.check a { color: var(--accent); } .invoice-row { display: flex; gap: 12px; } .invoice-row label { flex: 1; } .invoice-plz { flex: 0 0 32% !important; } .invoice-cancel { display: block; margin: 12px auto 0; } .invoice-done { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--correct-bg); color: var(--correct); font-size: 0.9rem; } .support-note { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 0.83rem; } /* ------------------------------------------------------------- Startseite */ /* Öffentliche Seite für Besucher ohne Anmeldung. Sie steht schon im HTML (für Suchmaschinen); die Knöpfe mit data-auth öffnen die Anmeldekarte. */ main:has(#view-landing:not([hidden])) { max-width: 1080px; } .lp-bar { flex-wrap: nowrap; } .lp-bar .topbar-right { gap: 10px; } .lp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 18px; border: 1px solid transparent; border-radius: 9px; font-weight: 600; white-space: nowrap; cursor: pointer; } .lp-primary { background: var(--accent); color: #fff; } .lp-primary:hover { background: var(--accent-dark); } .lp-ghost { background: transparent; color: var(--text); border-color: var(--border); } .lp-ghost:hover { border-color: var(--muted); } .lp-light { background: #fff; color: var(--blau); min-height: 48px; padding: 12px 26px; font-size: 1.05rem; } .lp-light:hover { background: #eef3f6; } .lp-hero { padding: 48px 0 8px; text-align: center; color: var(--on-gradient); } .lp-hero h1 { max-width: 780px; margin: 0 auto 16px; font-size: clamp(1.9rem, 5.2vw, 3.1rem); line-height: 1.15; text-shadow: 0 2px 14px rgb(0 0 0 / 25%); } .lp-lead { max-width: 640px; margin: 0 auto 28px; font-size: clamp(1.05rem, 2.2vw, 1.25rem); text-shadow: 0 1px 6px rgb(0 0 0 / 20%); } .lp-note { margin: 12px 0 0; font-size: 0.88rem; opacity: 0.9; } .lp-section { margin-top: 56px; } .lp-title { margin: 0 0 8px; text-align: center; color: var(--on-gradient); font-size: clamp(1.5rem, 3.4vw, 2rem); text-shadow: 0 1px 10px rgb(0 0 0 / 20%); } .lp-intro { max-width: 640px; margin: 0 auto 24px; text-align: center; color: var(--on-gradient); opacity: 0.92; } .lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; } .lp-card { margin-bottom: 0; } .lp-card h3 { margin: 12px 0 6px; font-size: 1.15rem; } .lp-card p { margin: 0; color: var(--muted); font-size: 0.95rem; } .lp-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--gradient-mark); color: #fff; font-size: 0.8rem; font-weight: 700; } /* Ablauf: Nummer vor der Überschrift, aus der Liste gezählt. */ .lp-steps { counter-reset: schritt; } .lp-steps h3 { margin-top: 0; } .lp-steps h3::before { counter-increment: schritt; content: counter(schritt); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: var(--gradient-mark); color: #fff; font-size: 0.95rem; } .lp-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .lp-topics li { padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--card-shadow); font-weight: 600; font-size: 0.95rem; } .lp-price { max-width: 520px; margin: 20px auto 0; text-align: center; } .lp-amount { margin: 0; font-size: 2.6rem; font-weight: 800; line-height: 1.1; } .lp-amount small { font-size: 1.1rem; font-weight: 600; color: var(--muted); } .lp-price ul { margin: 16px 0 20px; padding: 0; list-style: none; color: var(--muted); } .lp-price li { padding: 3px 0; } .lp-price li::before { content: '✓ '; color: var(--correct); font-weight: 700; } .lp-faq { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; } .lp-faq details { padding: 0 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--card-shadow); } .lp-faq summary { padding: 15px 0; font-weight: 600; cursor: pointer; } .lp-faq details p { margin: 0 0 16px; color: var(--muted); } /* Zurück zur Startseite, oben in der Anmeldekarte. */ .auth-home { display: inline-flex; align-items: center; gap: 4px; margin: -8px 0 18px -6px; padding: 6px 12px 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.88rem; cursor: pointer; } .auth-home:hover { color: var(--text); border-color: var(--muted); } .auth-home svg { width: 16px; height: 16px; } @media (max-width: 760px) { .lp-grid { grid-template-columns: 1fr; } } /* Am Handy ist neben der Wortmarke nur Platz für einen Knopf - "Kostenlos starten" steht ohnehin groß direkt darunter. */ @media (max-width: 560px) { .lp-bar .topbar-right { width: auto; } .lp-bar .lp-primary { display: none; } .lp-bar .lp-button { min-height: 34px; padding: 6px 12px; font-size: 0.88rem; } .lp-bar .wordmark { font-size: 1rem; } .lp-hero { padding-top: 28px; } }