/* aurora.css - das gemeinsame Kleid aller Seiten außerhalb der App selbst * (Anmelden, Registrieren, Passwort, Bestätigung, Startseite, Rechtstexte, * Quellenübersicht). * * Die App unter index.html trägt dieselben Werte, aber inline: sie muss auch * offline vollständig aussehen, ohne eine zweite Datei nachzuladen. Wer hier * einen Wert ändert, ändert ihn dort mit. * * Umschaltung: ; ohne Attribut entscheidet * das System. Dieselbe Schreibweise wie in der App (mk_theme). */ :root{ --bg:#f5f3ef; --bg-soft:#ebe8e2; --card:#ffffff; --border:#e2dfd8; --glas:rgba(255,255,255,.66); --glas-rand:rgba(30,25,40,.08); --glas-kante:rgba(255,255,255,.9); --ink:#1c1a20; --muted:#6c6a76; --brand:#f2704a; --brand-text:#b8431e; /* Koralle erreicht auf Weiß nur 2,9:1, Text läuft deshalb hierüber */ --purple:#a259b5; --purple-hell:#7c3f87; --verlauf:linear-gradient(120deg,#f2704a,#a259b5); --gruen:#1f7a4d; --gruen-feld:rgba(31,122,77,.12); --gefahr:#b3352c; --gefahr-feld:rgba(179,53,44,.11); --schatten:0 10px 30px rgba(30,25,40,.12); --aurora-deckkraft:.3; --radius:18px; --radius-klein:12px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]){ --bg:#07070b; --bg-soft:#14141a; --card:#16161b; --border:#27272f; --glas:rgba(255,255,255,.055); --glas-rand:rgba(255,255,255,.09); --glas-kante:rgba(255,255,255,.16); --ink:#f5f3f8; --muted:#9b98a6; --brand-text:#ff9a78; --purple-hell:#c9a0e8; --gruen:#43b581; --gruen-feld:rgba(67,181,129,.14); --gefahr:#e05a52; --gefahr-feld:rgba(224,90,82,.13); --schatten:0 10px 30px rgba(0,0,0,.45); --aurora-deckkraft:.5; } } :root[data-theme="dunkel"]{ --bg:#07070b; --bg-soft:#14141a; --card:#16161b; --border:#27272f; --glas:rgba(255,255,255,.055); --glas-rand:rgba(255,255,255,.09); --glas-kante:rgba(255,255,255,.16); --ink:#f5f3f8; --muted:#9b98a6; --brand-text:#ff9a78; --purple-hell:#c9a0e8; --gruen:#43b581; --gruen-feld:rgba(67,181,129,.14); --gefahr:#e05a52; --gefahr-feld:rgba(224,90,82,.13); --schatten:0 10px 30px rgba(0,0,0,.45); --aurora-deckkraft:.5; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; min-height:100dvh; } a{color:var(--brand-text)} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} .symbol{vertical-align:-.18em;flex:none} /* ---------- Nordlicht ---------- */ .aurora{ position:fixed;width:70vmax;height:70vmax;border-radius:50%; filter:blur(70px);opacity:var(--aurora-deckkraft); pointer-events:none;z-index:0; } .aurora.a1{ background:radial-gradient(circle,rgba(242,112,74,.55) 0%,transparent 62%); top:-34vmax;left:-24vmax; animation:aurora-treiben1 16s ease-in-out infinite alternate; } .aurora.a2{ background:radial-gradient(circle,rgba(124,63,135,.6) 0%,transparent 62%); bottom:-32vmax;right:-26vmax; animation:aurora-treiben2 21s ease-in-out infinite alternate; } @keyframes aurora-treiben1{to{transform:translate(9vmax,12vmax) scale(1.12)}} @keyframes aurora-treiben2{to{transform:translate(-10vmax,-13vmax) scale(1.18)}} @media (prefers-reduced-motion:reduce){.aurora{animation:none}} /* ---------- Glas ---------- */ .glas{ background:var(--glas); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border:1px solid var(--glas-rand); border-top-color:var(--glas-kante); } @media (prefers-reduced-transparency:reduce){ .glas{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none} } /* ---------- Formularseiten (Anmelden, Registrieren, Passwort) ---------- */ .mitte{ position:relative;z-index:1; min-height:100dvh;display:flex;align-items:center;justify-content:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); } .saeule{width:100%;max-width:400px} .marke{ display:flex;align-items:center;justify-content:center;gap:10px; font-size:26px;font-weight:800;letter-spacing:-.025em; background:var(--verlauf); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* Traegt das echte App-Icon als Bild: Anmeldeseite und Homescreen zeigen dasselbe Zeichen. Der Verlauf steckt im Bild, nicht mehr im CSS. */ .marke-zeichen{ width:38px;height:38px;flex:none;border-radius:11px;overflow:hidden; display:block; box-shadow:0 8px 22px -10px rgba(242,112,74,.75); } .unterzeile{margin:8px 0 20px;text-align:center;color:var(--muted);font-size:14.5px} .karte{ border-radius:22px;padding:22px 20px; box-shadow:var(--schatten); } .karte h2{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.02em} .karte .lauf{margin:0 0 16px;color:var(--muted);font-size:14px} .feld{display:block;margin-top:14px} .feld:first-of-type{margin-top:0} .feld span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px} .feld input{ width:100%;background:var(--bg-soft); border:1px solid var(--border);border-radius:12px; padding:13px;font-size:16px; } .feld input::placeholder{color:var(--muted)} .knopf{ display:block;width:100%;margin-top:20px;padding:14px; border:none;border-radius:14px;cursor:pointer; background:var(--verlauf);color:#fff; font-size:15.5px;font-weight:650;text-align:center;text-decoration:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s ease; } .knopf:active{transform:scale(.985);opacity:.92} .knopf.leise{ background:var(--glas);color:var(--brand-text); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent); } .nebenzeile{text-align:center;margin:14px 0 0} .nebenzeile a{font-size:13.5px;font-weight:600;text-decoration:none} /* Meldungen: Fehler, Erfolg, Hinweis */ .meldung{ display:flex;gap:10px;align-items:flex-start; border-radius:var(--radius-klein);padding:11px 13px; font-size:13.5px;line-height:1.5;margin-bottom:14px; } .meldung .symbol{margin-top:2px} .meldung.fehler{background:var(--gefahr-feld);color:var(--gefahr); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gefahr) 30%,transparent)} .meldung.gut{background:var(--gruen-feld);color:var(--gruen); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gruen) 30%,transparent)} .meldung.info{background:var(--bg-soft);color:var(--muted); box-shadow:inset 0 0 0 1px var(--border)} /* Fußbereich mit Rechtslinks und Effora-Band */ .fuss{margin-top:20px;text-align:center;color:var(--muted);font-size:13px} .fuss a{font-weight:600;text-decoration:none} .fuss-links{margin-top:10px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:12.5px} .effora{ display:inline-flex;align-items:center;gap:7px;margin-top:14px; padding:7px 14px;border-radius:999px; border:1px solid var(--border);color:var(--muted); font-size:11.5px;font-weight:700;text-decoration:none; } .effora img{width:16px;height:16px;display:block} /* ---------- Rechtstexte und Quellen ---------- */ .textseite{ position:relative;z-index:1; max-width:720px;margin:0 auto; padding:calc(32px + env(safe-area-inset-top)) 22px calc(60px + env(safe-area-inset-bottom)); } .textseite .zurueck{ display:inline-flex;align-items:center;gap:7px;margin-bottom:20px; color:var(--muted);font-size:14px;font-weight:600;text-decoration:none; } .textseite h1{font-size:clamp(26px,6vw,34px);font-weight:750;letter-spacing:-.03em; margin:0 0 6px;text-wrap:balance} .textseite .stand{color:var(--muted);font-size:13.5px;margin:0 0 24px} .textseite h2{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:28px 0 8px} .textseite h3{font-size:15.5px;font-weight:650;margin:20px 0 6px} .textseite p,.textseite li{font-size:15px;line-height:1.65;color:var(--ink);max-width:66ch} .textseite p{margin:0 0 12px} .textseite ul{margin:0 0 12px;padding-left:20px} .textseite li{margin-bottom:6px} .textseite a{font-weight:600} .textseite table{width:100%;border-collapse:collapse;font-size:14px} .textseite .rolle{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius); background:var(--card);margin-bottom:16px} .textseite th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);padding:11px 14px; border-bottom:1px solid var(--border);background:var(--bg-soft)} .textseite td{padding:12px 14px;border-top:1px solid var(--border);vertical-align:top} .textseite tr:first-child td{border-top:none} .textseite .block{border-radius:var(--radius);padding:16px 18px;margin:0 0 16px} /* Kleiner Hinweis unter einem Eingabefeld (Passwortregeln) */ .hinweis-klein{ display:block;margin-top:7px; font-size:12.5px;line-height:1.5;color:var(--muted);font-weight:400; } /* Zweispaltige Tabellen sind auf dem Handy nicht lesbar - die zweite Spalte verschwindet nach rechts. Unter 560 px wird deshalb jede Zeile ein Block: Kommune fett, amtliche Quelle darunter. Kein seitliches Wischen mehr. */ @media (max-width: 560px){ .textseite .rolle{overflow-x:visible} .textseite table,.textseite tbody,.textseite tr,.textseite td{display:block;width:100%} .textseite thead{display:none} .textseite tr{padding:13px 15px;border-top:1px solid var(--border)} .textseite tr:first-child{border-top:none} .textseite td{padding:0;border:none} .textseite td:first-child{font-weight:650;margin-bottom:3px} .textseite td:last-child{font-size:13.5px;color:var(--muted)} .textseite td:last-child a{overflow-wrap:anywhere} }