/* * Atrium Core – Frontend (erste Ausbaustufe) * * Zwei-gleisige Optik über Design-Tokens (CSS-Variablen): heller Standard-Modus * und ein Dunkel-Modus im Stil des Admin-Backends. Umschaltung setzt die Klasse * .atrium-theme-dark auf . Der farbige Hero bleibt in beiden Modi markant. * Bewusst ohne externe Webfonts (DSGVO) – Charakter über Layout, Farbe, Typo. */ .atrium-fe { /* Hell (Standard) – ruhig, nicht aufdringlich */ --fe-bg: #f3f6fc; --fe-surface: #ffffff; --fe-surface-2: #eef2fa; --fe-line: #e3e9f3; --fe-text: #1b2435; --fe-muted: #57637a; --fe-faint: #8a97ad; --fe-brand: #2f6bff; --fe-brand-2: #1e3a8a; --fe-accent: #16a34a; --fe-shadow: 0 16px 38px -22px rgba(20, 40, 90, .35); --fe-card-grad: linear-gradient(180deg, #ffffff, #fbfcff); --fe-maxw: 1280px; /* * **Vier Tokens, die lange gefehlt haben** (v0.152.0). * * Ohne sie stand im Postfach an fünf Stellen eine fest kodierte Farbe: * `#b3261e` als Warnrot, `#e5484d` als Gefahrrot, `color:#fff` auf der * Markenfläche, dunkelblaue Schatten. Im Hellmodus tragen die alle – im * Dunkelmodus sind es 2,5:1 und 3,7:1, also unlesbar. Der Sperr-Hinweis im * Personen-Kärtchen erklärt, *warum* dort keine Knöpfe stehen; ausgerechnet * der war nicht zu entziffern. * * `--fe-on-brand` ist die Schriftfarbe **auf** der Markenfläche. Sie muss * mitkippen, weil `--fe-brand` im Dunkelmodus heller wird, nicht dunkler. */ --fe-warn: #b3261e; --fe-warn-flaeche: rgba(179, 38, 30, .09); /* Bernstein für Auskünfte, die keine Fehler sind – „im Urlaub bis 15.09." */ --fe-hinweis: #8a5a00; --fe-hinweis-flaeche: rgba(168, 106, 0, .12); --fe-on-brand: #ffffff; --fe-shadow-pop: 0 22px 60px -20px rgba(10, 20, 50, .5); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; color: var(--fe-text); background: var(--fe-bg); /* Lange Wörter/URLs umbrechen, statt den Container zu sprengen (Mobil). */ overflow-wrap: break-word; } .atrium-theme-dark .atrium-fe { /* Dunkel – wie das Admin-Backend (Ink-Navy, Glas, Royal→Cyan) */ --fe-bg: #0e1525; --fe-surface: #141d33; --fe-surface-2: #1a2440; --fe-line: rgba(148, 163, 184, .16); --fe-text: #e9eefb; --fe-muted: #93a2bf; --fe-faint: #6b7a99; --fe-brand: #3b82f6; --fe-brand-2: #22d3ee; --fe-accent: #34d399; --fe-shadow: 0 24px 60px -26px rgba(0, 0, 0, .75); --fe-card-grad: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); /* Aufgehelltes Rot: #b3261e ergibt hier 2,56:1, dieses 7,4:1. Und die Schrift auf der Markenfläche wird dunkel, weil `--fe-brand` hell ist. */ --fe-warn: #ff8a80; --fe-warn-flaeche: rgba(255, 138, 128, .12); --fe-hinweis: #ffd08a; --fe-hinweis-flaeche: rgba(255, 208, 138, .13); --fe-on-brand: #0b1230; --fe-shadow-pop: 0 22px 60px -18px rgba(0, 0, 0, .8); } .atrium-fe * { box-sizing: border-box; } /* [hidden] muss [hidden] bleiben. Der Browser setzt dafuer `display:none` – aber jede eigene Regel mit einem `display`-Wert schlaegt das, weil Autoren-CSS vor dem UA-Stylesheet kommt. Das ist hier dreimal live passiert: die Wetterkachel stand als leerer Glaskasten im Hero, der Zuruecksetzen-Knopf klebte dauerhaft in der Filterleiste, und der Rechte-Block der Nutzerverwaltung war immer offen. Einmal zentral statt dreimal einzeln – und die Falle ist strukturell zu. */ .atrium-fe [hidden], .atrium-fe[hidden] { display: none !important; } .atrium-fe__wrap { max-width: var(--fe-maxw); margin: 0 auto; padding: 0 22px; } /* Mono für Ziffern/Uhr */ .atrium-fe [data-atrium-clock], .atrium-hero__weather-temp { font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; } /* ── Sektionen ───────────────────────────────────────────────────────── */ .atrium-section { padding: 58px 0; background: var(--fe-bg); } .atrium-section__head { margin-bottom: 26px; } .atrium-section__title { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--fe-text); } .atrium-section__sub { margin: 6px 0 0; color: var(--fe-muted); font-size: 15px; } .atrium-card { background: var(--fe-card-grad); border: 1px solid var(--fe-line); border-radius: 16px; padding: 22px; box-shadow: var(--fe-shadow); } .atrium-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); } /* ── Hero (in beiden Modi farbig) ────────────────────────────────────── */ .atrium-hero { position: relative; overflow: hidden; color: #eaf0ff; background: radial-gradient(1100px 460px at 12% -20%, rgba(99, 179, 255, .35), transparent 60%), linear-gradient(135deg, #16265e 0%, #2f6bff 52%, #16265e 100%); } .atrium-theme-dark .atrium-hero { background: radial-gradient(1100px 460px at 12% -20%, rgba(34, 211, 238, .28), transparent 60%), linear-gradient(135deg, #0b1430 0%, #1e3a8a 52%, #0b1430 100%); } .atrium-hero__aura { position: absolute; inset: -40% -10% auto -10%; height: 120%; background: radial-gradient(40% 60% at 80% 20%, rgba(34, 211, 238, .35), transparent 70%); filter: blur(10px); opacity: .8; pointer-events: none; animation: atrium-aura 14s ease-in-out infinite alternate; } @keyframes atrium-aura { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } } .atrium-hero__wrap { position: relative; z-index: 1; padding-top: 18px; padding-bottom: 40px; } .atrium-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Zwei-Spalten-Körper: Begrüßung/Spruch/News links, Wetterkachel rechts (unter Profil). */ .atrium-hero__body { display: flex; align-items: flex-start; gap: 28px; margin-top: 16px; } .atrium-hero__main { flex: 1 1 auto; min-width: 0; } .atrium-hero__aside { flex: 0 0 auto; width: clamp(300px, 34%, 400px); margin-top: 4px; } .atrium-hero__brand { display: flex; align-items: center; gap: 16px; min-height: 46px; } .atrium-hero__brand img { height: 42px; width: auto; max-width: 220px; object-fit: contain; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); } .atrium-hero__brandtext { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: #fff; } .atrium-hero__topclock { display: flex; flex-direction: column; line-height: 1.05; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .28); } .atrium-theme-switch { display: inline-flex; gap: 2px; flex: 0 0 auto; padding: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .atrium-theme-opt { width: 36px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: rgba(255, 255, 255, .7); font-size: 15px; line-height: 1; transition: background .2s ease, color .2s ease, transform .15s ease; } .atrium-theme-opt:hover { color: #fff; transform: translateY(-1px); } body:not(.atrium-theme-dark):not(.atrium-theme-glass) .atrium-theme-opt[data-atrium-theme-set="light"], body.atrium-theme-dark .atrium-theme-opt[data-atrium-theme-set="dark"], body.atrium-theme-glass .atrium-theme-opt[data-atrium-theme-set="glass"] { background: #fff; color: #16265e; box-shadow: 0 4px 12px rgba(0, 0, 0, .28); } .atrium-hero__greet { margin: 0 0 4px; font-weight: 800; letter-spacing: -.03em; color: #fff; font-size: clamp(28px, 5.2vw, 50px); line-height: 1.05; text-shadow: 0 8px 30px rgba(0, 0, 0, .25); } .atrium-hero__name { color: #bfe0ff; } .atrium-hero__sub { margin: 0; font-size: clamp(15px, 2vw, 19px); color: rgba(234, 240, 255, .85); } .atrium-hero__clock { font-size: 22px; font-weight: 800; letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(8, 18, 48, .65), 0 1px 2px rgba(8, 18, 48, .5); } .atrium-hero__date { font-size: 12.5px; color: rgba(234, 240, 255, .85); text-shadow: 0 1px 8px rgba(8, 18, 48, .55); } .atrium-hero__weather { width: 100%; padding: 15px 18px; border-radius: 18px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .5); /* Querformat: Wetter-Hauptblock links, Werte rechts daneben, Tagestrend unten. */ display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: center; } .atrium-hero__weather-main { grid-column: 1; display: flex; align-items: center; gap: 13px; } .atrium-hero__weather-icon { font-size: 38px; line-height: 1; } .atrium-hero__weather-head { display: flex; flex-direction: column; line-height: 1.18; } .atrium-hero__weather-temp { font-size: 26px; font-weight: 800; color: #fff; } .atrium-hero__weather-cond { font-size: 13px; color: rgba(234, 240, 255, .9); } .atrium-hero__weather-place { font-size: 12px; color: rgba(234, 240, 255, .7); } .atrium-hero__weather-stats { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .16); align-content: center; } .atrium-hero__weather-days { grid-column: 1 / -1; } .atrium-hero__weather-stats span { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .atrium-hero__weather-stats i { color: rgba(234, 240, 255, .7); font-style: normal; } .atrium-hero__weather-stats b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; } .atrium-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 76px; line-height: 0; overflow: hidden; } /* Dauerhaft GPU-promoteter Layer statt `will-change: transform`: Letzteres lässt WebKit/iOS (Chrome auf iPad) den Layer periodisch verwerfen/neu rastern, was sich als Flackern alle paar Sekunden zeigt. translateZ(0) + backface-hidden halten den Layer stabil; die Keyframes nutzen translate3d (bleibt durchgehend auf dem Compositor). Bei 200 % Breite kachelt der Pfad nahtlos. */ .atrium-hero__wave svg { position: absolute; left: 0; bottom: 0; display: block; width: 200%; height: 76px; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .atrium-hero__wave path { fill: var(--fe-bg); } .atrium-hero__wave-back { opacity: .5; animation: atrium-wave 15s linear infinite; } .atrium-hero__wave-front { animation: atrium-wave 9s linear infinite; } @keyframes atrium-wave { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .atrium-hero__wave-back, .atrium-hero__wave-front { animation: none; } } /* ── Tool-Launcher ───────────────────────────────────────────────────── */ .atrium-tools__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); } .atrium-tool { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; text-align: center; text-decoration: none; background: var(--fe-card-grad); border: 1px solid var(--fe-line); border-radius: 13px; color: var(--fe-text); box-shadow: var(--fe-shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .atrium-tool:hover { transform: translateY(-4px); border-color: var(--fe-brand); box-shadow: 0 22px 44px -22px rgba(47, 107, 255, .55); } .atrium-tool__icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--fe-surface-2); border: 1px solid var(--fe-line); overflow: hidden; } .atrium-tool__icon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .atrium-tool__initial { font-size: 19px; font-weight: 800; color: var(--fe-brand); } .atrium-tool__name { font-weight: 700; font-size: 12.5px; line-height: 1.25; } .atrium-tool__type { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--fe-faint); } .atrium-tool__type--sso { color: var(--fe-accent); } .atrium-tools__hint, .atrium-news__soon { color: var(--fe-muted); } /* Login-Tools (SSO): dezentes Schloss statt Text-Label */ .atrium-tool__lock { position: absolute; top: 8px; right: 8px; font-size: 12px; line-height: 1; opacity: .6; } .atrium-tool--sso:hover .atrium-tool__lock { opacity: 1; } /* Zwei-Spalten-Modul: Werkzeuge links, Aktionen rechts */ .atrium-workspace .atrium-section__head { margin-bottom: 18px; } .atrium-fe__cols { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 30px; align-items: start; } /* Grid-Spalten dürfen schrumpfen (verhindert Überlauf durch lange Inhalte/URLs). */ .atrium-fe__col { min-width: 0; } .atrium-fe__col--tools { position: sticky; top: 18px; } @media (max-width: 900px) { .atrium-fe__cols { grid-template-columns: 1fr; gap: 34px; } .atrium-fe__col--tools { position: static; } } /* Auswahl-Pillen (Mehrfachauswahl ohne Dropdown) */ .atrium-pills { display: flex; flex-wrap: wrap; gap: 8px; } .atrium-pill { position: relative; display: inline-flex; align-items: center; cursor: pointer; border: 1px solid var(--fe-line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--fe-muted); background: var(--fe-surface); user-select: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .atrium-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .atrium-pill:hover { border-color: var(--fe-brand); color: var(--fe-brand); } .atrium-pill:has(input:checked) { background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); border-color: transparent; color: #fff; } .atrium-pill:focus-within { outline: 2px solid var(--fe-brand); outline-offset: 2px; } /* ── News (Platzhalter) ──────────────────────────────────────────────── */ .atrium-news__soon { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .atrium-news__text { margin: 0; color: var(--fe-muted); } /* ── Karte ───────────────────────────────────────────────────────────── */ .atrium-map__canvas { height: 460px; border-radius: 16px; overflow: hidden; border: 1px solid var(--fe-line); box-shadow: var(--fe-shadow); z-index: 0; } .atrium-fe .leaflet-popup-content { font-size: 14px; } .atrium-fe .leaflet-popup-content strong { display: block; margin-bottom: 2px; } /* ── Reveal (nur wenn JS aktiv ist – sonst bleibt alles sichtbar) ────── */ .atrium-js .atrium-section { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .atrium-js .atrium-section.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .atrium-js .atrium-section { opacity: 1; transform: none; transition: none; } .atrium-hero__aura { animation: none; } } /* ── Mobil ───────────────────────────────────────────────────────────── */ @media (max-width: 680px) { .atrium-section { padding: 42px 0; } .atrium-hero__wrap { padding-bottom: 52px; } /* Logo + Bedienelemente dürfen umbrechen, damit das Profil nicht abgeschnitten wird. */ .atrium-hero__top { flex-wrap: wrap; row-gap: 10px; } .atrium-hero__controls { flex-wrap: wrap; justify-content: flex-end; } /* Hero-Body untereinander stapeln: die Wetterkachel (min. 300px) darf auf schmalen Handys nicht mehr neben der Begrüßung stehen (sonst Überlauf). */ .atrium-hero__body { flex-direction: column; gap: 18px; } .atrium-hero__aside { width: 100%; } .atrium-hero__weather { margin-left: 0; } /* Externe News (RSS) im Hero sind mobil verzichtbar und drückten den Header aus dem Bild – nur am Desktop anzeigen (der Block „Externe News" in der Neuigkeiten-Spalte bleibt mobil erhalten). */ .atrium-hero__news { display: none; } .atrium-tools__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; } .atrium-tool__icon { width: 40px; height: 40px; } .atrium-map__canvas { height: 360px; } } /* ════════════════════════════════════════════════════════════════════════ * Premium-Schliff: weiche Übergänge, Akzente, interaktives Licht, Glass-Theme * ════════════════════════════════════════════════════════════════════════ */ /* Weiche Übergänge beim Theme-Wechsel */ .atrium-fe, .atrium-section, .atrium-card, .atrium-tool, .atrium-tool__icon, .atrium-hero { transition: background-color .45s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Akzent-Balken an jeder Sektions-Überschrift (alle Themes) */ .atrium-section__head { position: relative; padding-left: 16px; } .atrium-section__head::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--fe-brand), var(--fe-brand-2)); } /* Heller Modus: dezente Punkt-Textur + etwas wärmeres Licht (verfeinert) */ body:not(.atrium-theme-dark):not(.atrium-theme-glass) .atrium-section { background-image: radial-gradient(rgba(47, 107, 255, .045) 1px, transparent 1px); background-size: 24px 24px; } /* Interaktives Licht-Highlight auf Karten/Tools (folgt dem Zeiger) */ .atrium-tool, .atrium-card { position: relative; overflow: hidden; } .atrium-tool::after, .atrium-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(180px 180px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 56%); opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light; } .atrium-tool:hover::after, .atrium-card:hover::after { opacity: 1; } .atrium-tool:active { transform: translateY(-1px) scale(.99); } /* Sanfte Einblend-Animationen (nur mit JS) */ @keyframes atrium-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .atrium-js .atrium-hero__greet { animation: atrium-rise .6s both .06s; } .atrium-js .atrium-hero__sub { animation: atrium-rise .6s both .14s; } .atrium-js .atrium-hero__news { animation: atrium-rise .6s both .22s; } .atrium-js .atrium-hero__aside { animation: atrium-rise .6s both .3s; } .atrium-js .atrium-hero__top { animation: atrium-rise .5s both; } .atrium-js .atrium-tools.is-in .atrium-tool { animation: atrium-rise .5s both; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(1) { animation-delay: .04s; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(2) { animation-delay: .08s; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(3) { animation-delay: .12s; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(4) { animation-delay: .16s; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(5) { animation-delay: .20s; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(6) { animation-delay: .24s; } .atrium-js .atrium-tools.is-in .atrium-tool:nth-child(n+7) { animation-delay: .28s; } /* ── Theme „Glass" (Glasmorphismus / Liquid Glass) ───────────────────── */ body.atrium-theme-glass .atrium-fe { --fe-bg: #0b1230; --fe-surface: rgba(255, 255, 255, .10); --fe-surface-2: rgba(255, 255, 255, .14); --fe-line: rgba(255, 255, 255, .26); --fe-text: #f2f6ff; --fe-muted: rgba(234, 240, 255, .82); --fe-faint: rgba(234, 240, 255, .6); --fe-brand: #8ab0ff; --fe-brand-2: #5ee0ff; --fe-accent: #5ef0c0; --fe-shadow: 0 26px 64px -24px rgba(0, 0, 0, .6); --fe-card-grad: rgba(255, 255, 255, .10); /* Der Glasmodus ist der schwierigste Fall: Die Flächen sind halbdurch- sichtig, der Grund wandert. Deshalb hier die kräftigsten Werte. */ --fe-warn: #ffb4ab; --fe-warn-flaeche: rgba(255, 180, 171, .16); --fe-hinweis: #ffdca8; --fe-hinweis-flaeche: rgba(255, 220, 168, .16); --fe-on-brand: #0b1230; --fe-shadow-pop: 0 26px 64px -20px rgba(0, 0, 0, .7); } /* Lebendiger, langsam wandernder Farb-Hintergrund hinter dem Glas */ body.atrium-theme-glass .atrium-section { background-color: #0b1230; background-image: radial-gradient(42% 52% at 18% 18%, rgba(91, 108, 255, .55), transparent 60%), radial-gradient(40% 46% at 82% 12%, rgba(40, 211, 238, .5), transparent 55%), radial-gradient(48% 56% at 74% 84%, rgba(168, 85, 247, .5), transparent 58%), radial-gradient(42% 52% at 8% 88%, rgba(47, 107, 255, .5), transparent 58%); background-size: 160% 160%; animation: atrium-mesh 22s ease-in-out infinite alternate; } body.atrium-theme-glass .atrium-hero { background-color: #0b1230; background-image: radial-gradient(50% 60% at 12% 0%, rgba(91, 108, 255, .7), transparent 60%), radial-gradient(52% 60% at 88% 8%, rgba(40, 211, 238, .62), transparent 58%), radial-gradient(62% 72% at 72% 104%, rgba(168, 85, 247, .55), transparent 62%), linear-gradient(135deg, #0b1230, #14225c); background-size: 160% 160%; animation: atrium-mesh 22s ease-in-out infinite alternate; } @keyframes atrium-mesh { from { background-position: 0% 0%; } to { background-position: 100% 100%; } } /* Frostige, lichtbrechende Glas-Panels */ body.atrium-theme-glass .atrium-card, body.atrium-theme-glass .atrium-tool, body.atrium-theme-glass .atrium-map__canvas, body.atrium-theme-glass .atrium-tool__icon { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } body.atrium-theme-glass .atrium-card, body.atrium-theme-glass .atrium-tool, body.atrium-theme-glass .atrium-map__canvas { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 22px 56px -20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .05); } body.atrium-theme-glass .atrium-tool__icon { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); } body.atrium-theme-glass .atrium-tool:hover { border-color: rgba(255, 255, 255, .55); box-shadow: 0 28px 66px -20px rgba(60, 211, 238, .45), inset 0 1px 0 rgba(255, 255, 255, .65); } body.atrium-theme-glass .atrium-tool::after, body.atrium-theme-glass .atrium-card::after { background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 56%); mix-blend-mode: screen; } body.atrium-theme-glass .atrium-tool__initial { color: #cfe0ff; } body.atrium-theme-glass .atrium-badge { background: rgba(255, 255, 255, .22); color: #fff; } body.atrium-theme-glass .atrium-section__title { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); } /* Reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { .atrium-js .atrium-hero__greet, .atrium-js .atrium-hero__sub, .atrium-js .atrium-hero__news, .atrium-js .atrium-hero__aside, .atrium-js .atrium-hero__top, .atrium-js .atrium-tools.is-in .atrium-tool { animation: none; } body.atrium-theme-glass .atrium-section, body.atrium-theme-glass .atrium-hero { animation: none; } } /* ── Hero: Spruch, Wetter-Zustand, News-Ticker ───────────────────────── */ .atrium-hero__spruch { margin: 10px 0 0; max-width: 60ch; font-size: clamp(15px, 1.8vw, 19px); font-style: italic; color: rgba(234, 240, 255, .92); /* FESTE Höhe für genau 2 Zeilen: verhindert das Springen des Heros, wenn ein längerer Spruch eingeblendet wird (line-height 1.55 von .atrium-fe). */ height: calc(1.55em * 2); overflow: hidden; display: flex; align-items: center; } /* Längere Sprüche werden auf 2 Zeilen begrenzt (kein Wachstum -> kein Sprung). min-width: 0 lässt das Flex-Kind auf die Breite des Heros schrumpfen, sonst bleibt der Spruch einzeilig und wird (v. a. mobil) rechts abgeschnitten. */ .atrium-hero__spruch-inner { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: break-word; } .atrium-hero__spruch [data-atrium-spruch-text] { transition: opacity .4s ease; } .atrium-hero__weather-cond { font-size: 13px; color: rgba(234, 240, 255, .9); } .atrium-hero__ticker { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; max-width: 100%; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease; } .atrium-hero__ticker:hover { background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .4); } .atrium-hero__ticker-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0b1230; background: #5ee0ff; padding: 3px 9px; border-radius: 999px; } .atrium-hero__ticker-text { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s ease; } /* RSS-Liste im Hero (nutzt den frei gewordenen Platz neben der Begrüßung). */ .atrium-hero__news { margin-top: 20px; max-width: 620px; } .atrium-hero__news-label { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0b1230; background: #5ee0ff; padding: 3px 9px; border-radius: 999px; } .atrium-hero__news-list { list-style: none; margin: 0; padding: 0; } .atrium-hero__news-list a { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: padding-left .15s ease; } .atrium-hero__news-list li:last-child a { border-bottom: 0; } .atrium-hero__news-list a:hover { padding-left: 4px; } .atrium-hero__news-list a:hover .atrium-hero__news-title { color: #fff; text-decoration: underline; } .atrium-hero__news-src { flex: 0 0 auto; max-width: 130px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #bfe0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atrium-hero__news-title { flex: 1 1 auto; min-width: 0; color: rgba(255, 255, 255, .94); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 8px rgba(8, 18, 48, .5); } /* ── News-Sektion (echte Feed-Einträge) ──────────────────────────────── */ .atrium-news__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .atrium-news__item { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--fe-text); } .atrium-news__item:hover { border-color: var(--fe-brand); } .atrium-news__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fe-faint); } .atrium-news__source { font-weight: 700; color: var(--fe-brand); } .atrium-news__title { font-weight: 600; font-size: 15px; line-height: 1.35; } .atrium-news__block + .atrium-news__block { margin-top: 26px; } .atrium-news__block-title { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--fe-muted); } /* ── Wetterwarnungen (DWD) – unter den News ──────────────────────────── */ .atrium-alerts__list { display: flex; flex-direction: column; gap: 12px; } .atrium-alert { position: relative; padding: 12px 14px 12px 16px; border-radius: 12px; background: var(--fe-surface); border: 1px solid var(--fe-line); border-left: 4px solid var(--alert-c, #f59e0b); } .atrium-alert__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .atrium-alert__badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: var(--alert-c, #f59e0b); } .atrium-alert__event { font-weight: 700; font-size: 14px; color: var(--fe-text); } .atrium-alert__headline { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--fe-muted); } .atrium-alert__time { margin: 6px 0 0; font-size: 12px; color: var(--fe-faint); } .atrium-alert--minor { --alert-c: #eab308; } .atrium-alert--moderate { --alert-c: #f59e0b; } .atrium-alert--severe { --alert-c: #dc2626; } .atrium-alert--extreme { --alert-c: #7c3aed; } .atrium-news__alerts:not(:empty) { margin-bottom: 26px; } /* ── Meldungen / Warnmeldungen (manuell, ganz oben) ──────────────────── */ /* Schweregrade der manuellen Meldungen (eigene Skala). */ .atrium-alert--info { --alert-c: #2563eb; } .atrium-alert--warnung { --alert-c: #f59e0b; } .atrium-alert--kritisch { --alert-c: #dc2626; } .atrium-notices { margin-bottom: 26px; } .atrium-notice__body { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--fe-muted); } .atrium-notice__body p { margin: 0 0 6px; } .atrium-notice__body p:last-child { margin-bottom: 0; } .atrium-notice__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .atrium-notices__toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .atrium-notices__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); } .atrium-notices__btn:hover { filter: brightness(1.05); } .atrium-notices__btn:disabled { opacity: .6; cursor: default; } .atrium-notices__btn--ghost { background: transparent; color: var(--fe-text); border-color: var(--fe-line); } .atrium-notices__btn--ghost:hover { border-color: var(--fe-brand); color: var(--fe-brand); filter: none; } .atrium-notices__btn--danger { background: transparent; color: #b32d2e; border-color: rgba(179, 45, 46, .4); } .atrium-notices__btn--danger:hover { background: #b32d2e; color: #fff; border-color: #b32d2e; filter: none; } .atrium-notices__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; background: #dc2626; color: #fff; } .atrium-notices__link { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--fe-brand); } .atrium-notices__link:hover { text-decoration: underline; } .atrium-notices__link--danger { color: #b32d2e; } .atrium-notices__empty { color: var(--fe-muted); margin: 0; } /* Formular (anlegen/bearbeiten) */ .atrium-notices__form { display: grid; gap: 16px; } .atrium-notices__field { display: flex; flex-direction: column; gap: 6px; } .atrium-notices__row { display: flex; gap: 16px; flex-wrap: wrap; } .atrium-notices__row .atrium-notices__field { flex: 1 1 180px; } .atrium-notices__opt { color: var(--fe-faint); font-weight: 400; } .atrium-notices__form input[type="text"], .atrium-notices__form input[type="datetime-local"], .atrium-notices__form select, .atrium-notices__form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font: inherit; } .atrium-notices__form input:focus, .atrium-notices__form select:focus, .atrium-notices__form textarea:focus { outline: none; border-color: var(--fe-brand); } .atrium-notices__checks { display: flex; flex-wrap: wrap; gap: 6px 16px; } .atrium-notices__hinweis { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--fe-muted); } /* Einzelne Shops: nach Gebiet gruppiert und zugeklappt. Flach und ungruppiert waren die 38 Namen eine Suchaufgabe statt einer Auswahl. */ .atrium-notices__zeitpaar { display: flex; gap: 8px; flex-wrap: wrap; } .atrium-notices__zeitpaar input[type="time"] { max-width: 120px; } .atrium-notices__shops { margin: 6px 0 0; } .atrium-notices__shops > summary { cursor: pointer; font-size: 14px; color: var(--fe-text); padding: 4px 0; } .atrium-notices__zahl { margin-left: 6px; font-size: 12px; color: var(--fe-accent); } .atrium-notices__shopliste { max-height: 240px; overflow-y: auto; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--fe-line); border-radius: 10px; background: var(--fe-surface); } .atrium-notices__shopgruppe + .atrium-notices__shopgruppe { margin-top: 12px; } .atrium-notices__gebiet { display: block; margin-bottom: 4px; font-size: 13px; color: var(--fe-muted); } .atrium-notices__check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fe-text); } .atrium-notices__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atrium-notices__msg { font-size: 14px; } .atrium-notices__msg.is-ok { color: var(--fe-accent); } .atrium-notices__msg.is-err { color: #d33; } /* Verwaltungs-Modal (Freigaben + eigene Meldungen) */ .atrium-notices__manage-section + .atrium-notices__manage-section { margin-top: 24px; } .atrium-notices__row-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--fe-line); background: var(--fe-surface); margin-bottom: 10px; } .atrium-notices__row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .atrium-notices__row-title { font-weight: 700; font-size: 14px; color: var(--fe-text); } .atrium-notices__sev { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #fff; } .atrium-notices__sev--info { background: #2563eb; } .atrium-notices__sev--warnung { background: #f59e0b; } .atrium-notices__sev--kritisch { background: #dc2626; } .atrium-notices__status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--fe-line); color: var(--fe-muted); } .atrium-notices__status--published { color: #1a7f37; border-color: rgba(26, 127, 55, .4); } .atrium-notices__status--pending { color: #b7791f; border-color: rgba(183, 121, 31, .4); } .atrium-notices__status--rejected { color: #b32d2e; border-color: rgba(179, 45, 46, .4); } .atrium-notices__row-meta { margin: 6px 0 0; font-size: 12px; color: var(--fe-faint); } .atrium-notices__row-body { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--fe-muted); } .atrium-notices__reject { margin: 8px 0 0; font-size: 13px; color: #b32d2e; } .atrium-notices__row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } /* ── Lade-Skeleton (News) – Glas-Kasten mit sanfter Animation ────────── */ .atrium-news__item.atrium-skel { pointer-events: none; min-height: 70px; justify-content: center; } .atrium-skel__line { display: block; height: 12px; border-radius: 6px; position: relative; overflow: hidden; background: rgba(120, 135, 160, .16); } .atrium-skel__line + .atrium-skel__line { margin-top: 9px; } .atrium-skel__line--sm { width: 42%; height: 9px; } .atrium-skel__line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .55), transparent ); animation: atrium-shimmer 1.3s infinite; } @keyframes atrium-shimmer { 100% { transform: translateX(100%); } } /* Hero (auf farbigem Grund): Skeleton in zartem Weiß */ .atrium-hero__news[data-pending] .atrium-hero__news-list { list-style: none; margin: 0; padding: 0; } .atrium-hero__news-list .atrium-skel-row { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } .atrium-hero__news-list .atrium-skel-row:last-child { border-bottom: 0; } .atrium-hero__news-list .atrium-skel-row .atrium-skel__line { width: 78%; background: rgba(255, 255, 255, .22); } .atrium-hero__news-list .atrium-skel-row .atrium-skel__line::after { background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .45), transparent ); } @media (prefers-reduced-motion: reduce) { .atrium-skel__line::after { animation: none; } } @media (max-width: 680px) { .atrium-hero__ticker { width: 100%; } .atrium-news__grid { grid-template-columns: 1fr; } } /* ── Profil-Menü ─────────────────────────────────────────────────────── */ .atrium-profile__form { display: grid; gap: 16px; max-width: 960px; align-items: start; } .atrium-profile__h { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--fe-text); } .atrium-profile__info { display: flex; flex-direction: column; gap: 3px; color: var(--fe-muted); } .atrium-profile__info strong { color: var(--fe-text); } .atrium-profile__label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 600; color: var(--fe-muted); } .atrium-profile__label:first-of-type { margin-top: 0; } .atrium-profile input[type="text"], .atrium-profile input[type="password"], .atrium-profile input[type="date"], .atrium-profile select, .atrium-profile textarea { width: 100%; max-width: 440px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font-size: 14px; font-family: inherit; } .atrium-profile textarea { max-width: 100%; } .atrium-profile input:focus, .atrium-profile select:focus, .atrium-profile textarea:focus { outline: none; border-color: var(--fe-brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, .18); } .atrium-profile__hint { margin: 6px 0 0; font-size: 12px; color: var(--fe-faint); } /* Speichern links, Abmelden rechts – die beiden gehoeren nicht nebeneinander. Das eine schliesst die Arbeit ab, das andere beendet die Sitzung. */ .atrium-profile__actions { margin-top: 2px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atrium-profile__save { border: 0; cursor: pointer; padding: 12px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); box-shadow: 0 14px 30px -12px rgba(47, 107, 255, .6); transition: transform .15s ease; } .atrium-profile__save:hover { transform: translateY(-2px); } /* * Abmelden: sichtbar anders als „Speichern", aber **nicht** wie eine * Löschaktion. * * Es ist nichts Destruktives – niemand verliert Daten, man kommt jederzeit * zurück. Ein roter Knopf würde eine Warnung aussprechen, die es nicht braucht; * der erste Entwurf hatte einen und widersprach damit dieser Begründung. * * Deshalb ein Umriss statt einer Füllung: zurückhaltend, aber unverwechselbar * neben der farbigen Pille. Beim Zeigen wird er deutlicher, nicht warnender. * * `margin-left: auto` schiebt ihn ans rechte Ende der Zeile. */ .atrium-profile__logout { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--fe-muted); border: 1px solid var(--fe-line); background: transparent; transition: color var(--fe-dauer) var(--fe-kurve), border-color var(--fe-dauer) var(--fe-kurve), background var(--fe-dauer) var(--fe-kurve); } .atrium-profile__logout::before { /* Pfeil hinaus – sagt in einem Zeichen, was passiert. */ content: "\2192"; font-size: 16px; line-height: 1; } .atrium-profile__logout:hover, .atrium-profile__logout:focus-visible { color: var(--fe-text); border-color: var(--fe-muted); background: var(--fe-surface); } @media (max-width: 560px) { /* Auf dem Handy untereinander – nebeneinander wären beide zu schmal. */ .atrium-profile__logout { margin-left: 0; width: 100%; justify-content: center; } .atrium-profile__save { width: 100%; } } .atrium-profile__notice { padding: 12px 16px; border-radius: 12px; margin-bottom: 8px; font-size: 14px; border: 1px solid transparent; } .atrium-profile__notice--success { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .4); color: #157f3b; } .atrium-profile__notice--error { background: rgba(220, 53, 46, .1); border-color: rgba(220, 53, 46, .4); color: #b32d2e; } .atrium-theme-dark .atrium-profile__notice--success, .atrium-theme-glass .atrium-profile__notice--success { color: #5ef0c0; } .atrium-theme-dark .atrium-profile__notice--error, .atrium-theme-glass .atrium-profile__notice--error { color: #fca5a5; } /* ── Wetter-Animation im Hero (hinter dem Inhalt, stört Inhalt nicht) ─── */ .atrium-hero__weatherfx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .atrium-hero__weatherfx::before, .atrium-hero__weatherfx::after { content: ""; position: absolute; inset: -14%; pointer-events: none; } /* Klar – Tag: Sonnen-Glow + langsame Strahlen */ .atrium-hero__weatherfx.is-clear.is-day::before { background: radial-gradient(closest-side at 86% 14%, rgba(255, 224, 150, .5), transparent 72%); } .atrium-hero__weatherfx.is-clear.is-day::after { background: conic-gradient(from 0deg at 86% 14%, rgba(255, 236, 184, .12) 0 5deg, transparent 5deg 32deg); transform-origin: 86% 14%; animation: atrium-rays 100s linear infinite; } @keyframes atrium-rays { to { transform: rotate(360deg); } } /* Klar – Nacht: funkelnde Sterne */ .atrium-hero__weatherfx.is-clear.is-night::before { background-image: radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, .85), transparent), radial-gradient(1.2px 1.2px at 50% 18%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.6px 1.6px at 74% 38%, rgba(255, 255, 255, .75), transparent), radial-gradient(1.2px 1.2px at 88% 16%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.3px 1.3px at 34% 52%, rgba(255, 255, 255, .5), transparent); animation: atrium-twinkle 5s ease-in-out infinite alternate; } @keyframes atrium-twinkle { from { opacity: .55; } to { opacity: 1; } } /* Wolken / Nebel: driftende Schwaden */ .atrium-hero__weatherfx.is-clouds::before, .atrium-hero__weatherfx.is-fog::before, .atrium-hero__weatherfx.is-rain::before, .atrium-hero__weatherfx.is-thunder::before { background: radial-gradient(160px 74px at 22% 26%, rgba(255, 255, 255, .13), transparent 70%), radial-gradient(200px 84px at 58% 40%, rgba(255, 255, 255, .1), transparent 70%), radial-gradient(170px 74px at 86% 30%, rgba(255, 255, 255, .12), transparent 70%); background-repeat: no-repeat; animation: atrium-clouds 55s linear infinite; } @keyframes atrium-clouds { 0% { transform: translateX(-5%); } 100% { transform: translateX(5%); } } .atrium-hero__weatherfx.is-fog::after { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .07) 55%, transparent); animation: atrium-clouds 80s linear infinite reverse; } /* Regen – fallende Tropfen, vier Ebenen mit teilerfremden Rastern (unterschiedliche Größe/Dichte/Tempo) -> wirkt zufällig verteilt, dezent. */ .atrium-hero__weatherfx.is-rain::after, .atrium-hero__weatherfx.is-thunder::after { inset: 0; background-image: radial-gradient(1.5px 12px at 50% 0%, rgba(255, 255, 255, .55), transparent 72%), radial-gradient(1.2px 9px at 50% 0%, rgba(255, 255, 255, .42), transparent 72%), radial-gradient(1px 7px at 50% 0%, rgba(255, 255, 255, .30), transparent 72%), radial-gradient(.9px 6px at 50% 0%, rgba(255, 255, 255, .22), transparent 72%); background-size: 37px 130px, 53px 110px, 67px 90px, 83px 70px; background-position: 0 0, 21px 0, 11px 0, 44px 0; background-repeat: repeat; opacity: .55; animation: atrium-rain .9s linear infinite; } @keyframes atrium-rain { from { background-position: 0 0, 21px 0, 11px 0, 44px 0; } to { background-position: 0 130px, 21px 110px, 11px 90px, 44px 70px; } } /* Gewitter: gelegentlicher Blitz */ .atrium-hero__weatherfx.is-thunder { animation: atrium-flash 8s steps(1) infinite; } @keyframes atrium-flash { 0%, 90%, 100% { background: transparent; } 91% { background: rgba(255, 255, 255, .14); } 92% { background: transparent; } 94% { background: rgba(255, 255, 255, .1); } 95% { background: transparent; } } /* Schnee */ .atrium-hero__weatherfx.is-snow::before { background-image: radial-gradient(2px 2px at 20% 10%, rgba(255, 255, 255, .9), transparent), radial-gradient(2px 2px at 60% 0%, rgba(255, 255, 255, .8), transparent), radial-gradient(1.6px 1.6px at 80% 20%, rgba(255, 255, 255, .85), transparent), radial-gradient(2px 2px at 40% 30%, rgba(255, 255, 255, .8), transparent); background-size: 200px 200px; animation: atrium-snow 7s linear infinite; } @keyframes atrium-snow { from { background-position: 0 -10%; } to { background-position: 30px 110%; } } @media (prefers-reduced-motion: reduce) { .atrium-hero__weatherfx::before, .atrium-hero__weatherfx::after, .atrium-hero__weatherfx { animation: none !important; } } @media (max-width: 860px) { .atrium-hero__body { flex-direction: column; gap: 18px; } .atrium-hero__aside { width: 100%; margin-top: 0; } } @media (max-width: 680px) { .atrium-hero__weather { width: 100%; grid-template-columns: 1fr; } .atrium-hero__weather-main { grid-column: 1; } .atrium-hero__weather-stats { grid-column: 1; grid-template-columns: 1fr 1fr; padding-left: 0; border-left: 0; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .16); } } /* ── Aktionen ────────────────────────────────────────────────────────── */ .atrium-actions__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .atrium-action { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--fe-text); border-left: 3px solid var(--fe-brand); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.atrium-action:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(47, 107, 255, .5); } .atrium-action__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .atrium-action__period { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); padding: 3px 10px; border-radius: 999px; } .atrium-action__gebiet { font-size: 12px; color: var(--fe-faint); } .atrium-action__title { margin: 2px 0 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--fe-text); } .atrium-action__desc { margin: 0; color: var(--fe-muted); font-size: 14px; } .atrium-action__more { margin-top: 2px; color: var(--fe-brand); font-weight: 700; font-size: 13px; } /* Reiche Aktions-Karten (mit Anbieter-Logos, Bild, Zeitraum) */ .atrium-actions__toolbar { margin-bottom: 16px; } /* Filter-Leiste (Anbieter/Gebiet) */ .atrium-actions__filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } /* Suchbares Filter-Dropdown */ .atrium-dd { position: relative; } .atrium-dd__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); transition: border-color .15s ease; } .atrium-dd__toggle:hover { border-color: var(--fe-brand); } .atrium-dd.is-open .atrium-dd__toggle { border-color: var(--fe-brand); } .atrium-dd.is-filtered .atrium-dd__toggle { background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); border-color: transparent; color: #fff; } .atrium-dd__caret { font-size: 11px; opacity: .7; } .atrium-dd__panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px; max-width: 320px; background: var(--fe-surface); border: 1px solid var(--fe-line); border-radius: 12px; box-shadow: 0 18px 44px -18px rgba(20, 40, 90, .45); padding: 10px; } .atrium-dd__search { width: 100%; box-sizing: border-box; padding: 8px 11px; margin-bottom: 8px; border: 1px solid var(--fe-line); border-radius: 9px; background: var(--fe-bg); color: var(--fe-text); font: inherit; font-size: 13px; } .atrium-dd__search:focus { outline: none; border-color: var(--fe-brand); } .atrium-dd__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; } .atrium-dd__opt { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fe-text); } .atrium-dd__opt:hover { background: var(--fe-surface-2); } .atrium-dd__opt.is-active { color: var(--fe-brand); font-weight: 700; } .atrium-actions__chips { display: flex; flex-wrap: wrap; gap: 8px; } .atrium-actions__chip { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-muted); transition: background .15s ease, color .15s ease, border-color .15s ease; } .atrium-actions__chip:hover { border-color: var(--fe-brand); color: var(--fe-brand); } .atrium-actions__chip.is-active { background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); border-color: transparent; color: #fff; } .atrium-action--rich { padding: 0; overflow: hidden; cursor: pointer; position: relative; gap: 0; } .atrium-action--rich:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(47, 107, 255, .5); } .atrium-action--rich:focus-visible { outline: 2px solid var(--fe-brand); outline-offset: 2px; } .atrium-action__cover { margin: 0; line-height: 0; } .atrium-action__cover-img { width: 100%; height: 160px; object-fit: cover; display: block; } .atrium-action__inner { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; } .atrium-action__providers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .atrium-action__providers--detail { margin: 4px 0 16px; } .atrium-action__provider { display: inline-flex; align-items: center; justify-content: center; padding: 5px; background: #fff; border: 1px solid var(--fe-line); border-radius: 9px; box-shadow: 0 2px 8px -4px rgba(20, 40, 90, .25); } /* Quadratische Anbieter-Logos (300×300): einheitliche Box, nichts verzerrt. */ .atrium-action__provider-logo { width: 30px; height: 30px; object-fit: contain; display: block; } .atrium-action__provider--text { padding: 6px 12px; font-size: 12px; font-weight: 800; color: #1b2435; letter-spacing: .01em; } /* Im Detail-Modal dürfen die Logos etwas größer sein. */ .atrium-action__providers--detail .atrium-action__provider-logo { width: 40px; height: 40px; } .atrium-action__state { font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .atrium-action__state--soon { color: #92500a; background: #fde7c4; } .atrium-action__state--ended { color: #fff; background: #6b7280; } .atrium-action__clip { margin-left: auto; font-size: 14px; } .atrium-action__chevron { position: absolute; right: 16px; bottom: 12px; color: var(--fe-faint); font-size: 22px; line-height: 1; } /* Formular-Zeile (zwei Felder nebeneinander, z. B. Datum von/bis) */ .atrium-infodocs__row { display: flex; gap: 14px; flex-wrap: wrap; } .atrium-infodocs__row .atrium-infodocs__field { flex: 1 1 160px; } .atrium-infodocs__form select, .atrium-infodocs__form input[type="url"], .atrium-infodocs__form input[type="date"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font: inherit; } @media (max-width: 680px) { .atrium-actions__grid { grid-template-columns: 1fr; } } /* ── Profil: Statistik / KPIs / Rang ─────────────────────────────────── */ .atrium-profile__stats { max-width: 960px; } /* ── Profil: Desktop-Layout (zweispaltig, Bildschirmbreite nutzen) ───── */ .atrium-profile__field { display: flex; flex-direction: column; } .atrium-profile__field .atrium-profile__label { margin-top: 0; } .atrium-profile__field input { max-width: 100%; } .atrium-profile__grid3 { display: grid; gap: 12px 16px; grid-template-columns: 1fr; } @media (min-width: 720px) { .atrium-profile__form { grid-template-columns: 1fr 1fr; } .atrium-profile__account, .atrium-profile__block--wide, .atrium-profile__actions { grid-column: 1 / -1; } .atrium-profile__grid3 { grid-template-columns: repeat(3, 1fr); } } .atrium-profile__rank { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--fe-line); } .atrium-profile__rank-icon { font-size: 34px; width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(34, 211, 238, .16)); border: 1px solid var(--fe-line); } .atrium-profile__rank-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .atrium-profile__rank-name { font-size: 20px; font-weight: 800; color: var(--fe-text); } .atrium-profile__rank-next { font-size: 13px; color: var(--fe-muted); } .atrium-profile__rank-bar { height: 8px; border-radius: 999px; background: var(--fe-surface-2); overflow: hidden; margin-top: 2px; max-width: 340px; } .atrium-profile__rank-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fe-brand), var(--fe-brand-2)); } .atrium-profile__kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); } .atrium-profile__kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--fe-surface-2); border: 1px solid var(--fe-line); } .atrium-profile__kpi b { font-size: 21px; font-weight: 800; color: var(--fe-text); line-height: 1.05; } .atrium-profile__kpi span { font-size: 12px; color: var(--fe-muted); } .atrium-profile__kpi.is-soon { opacity: .55; } .atrium-profile__kpi.is-soon b { color: var(--fe-faint); } .atrium-profile__kpi.is-text b { font-size: 15px; font-weight: 700; line-height: 1.25; word-break: normal; overflow-wrap: anywhere; } /* ── Hero: Steuer-Cluster (Theme-Schalter + Profil-Button) ───────────── */ .atrium-hero__controls { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .atrium-hero__profile { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 14px 4px 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .01em; transition: background .2s ease, border-color .2s ease, transform .15s ease; } .atrium-hero__profile:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); transform: translateY(-1px); } .atrium-hero__profile-av { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px; overflow: hidden; display: block; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .atrium-hero__profile-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; } .atrium-hero__profile-label { line-height: 1; } @media (max-width: 520px) { .atrium-hero__profile-label { display: none; } .atrium-hero__profile { padding: 4px; } } /* ── Profil-Modal (Glas) ─────────────────────────────────────────────── */ body.atrium-modal-open { overflow: hidden; } .atrium-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; background: transparent; } .atrium-modal[hidden] { display: none; } /* * **Die WordPress-Adminleiste liegt darüber – also fängt das Fenster darunter * an.** * * `#wpadminbar` trägt `z-index: 100000`, genau wie das Modal, und steht später * im Dokument: Bei Gleichstand gewinnt sie. Am Schreibtisch fällt das kaum auf * (32 Pixel, und die Kopfzeile hat Luft); auf dem Handy sind es 46 Pixel, und * dort verdeckte sie die halbe Knopfleiste – „+ Neue Nachricht" und das * Zahnrad waren nur zur Hälfte da. * * Sie höher zu stapeln wäre der falsche Weg: Die Adminleiste ist der Weg zurück * ins Backend, und wer sie verdeckt, nimmt ihn. */ body.admin-bar .atrium-modal { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .atrium-modal { top: 46px; } } .atrium-modal__backdrop { position: absolute; inset: 0; cursor: pointer; background: rgba(10, 18, 38, .5); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); animation: atrium-modal-fade .25s ease both; } .atrium-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 1000px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; /* Leichte Glas-Optik: durchscheinendes Panel ueber dem geblurrten Backdrop. Bewusst KEIN backdrop-filter am Panel (es scrollt innen) – iPad-Scroll-Fix laut BLAUPAUSE: Blur nur am Backdrop. */ background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(246, 250, 255, .76)); border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 40px 100px -30px rgba(10, 20, 50, .7), inset 0 1px 0 rgba(255, 255, 255, .7); animation: atrium-modal-rise .3s cubic-bezier(.2, .7, .25, 1) both; } .atrium-theme-dark .atrium-modal__panel, .atrium-theme-glass .atrium-modal__panel { background: linear-gradient(180deg, rgba(24, 34, 58, .97), rgba(16, 24, 44, .97)); border-color: rgba(148, 163, 184, .28); } /* Das × wird über das Raster zentriert, nicht über `line-height`. Vorher hing seine Lage an den Metriken der Browser-Schrift – es saß dadurch sichtbar schief im Kreis, und der Hover-Effekt (Drehung um 90°) machte den Versatz zum Taumeln. `font: inherit` holt zusätzlich die Schrift des Intranets herein; ohne sie rendert der Knopf in der Voreinstellung des Browsers. */ .atrium-modal__close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px; padding: 0; border: 1px solid var(--fe-line); border-radius: 999px; cursor: pointer; display: grid; place-items: center; background: var(--fe-surface); color: var(--fe-muted); font: inherit; font-size: 22px; line-height: 1; transition: color .2s ease, border-color .2s ease, transform .15s ease; } .atrium-modal__close:hover { color: var(--fe-text); border-color: var(--fe-brand); transform: rotate(90deg); } .atrium-modal__body { overflow-y: auto; overscroll-behavior: contain; padding: 30px 32px 34px; -webkit-overflow-scrolling: touch; transform: translateZ(0); } .atrium-modal__body .atrium-section__head { margin-bottom: 20px; } .atrium-modal__body .atrium-profile__form, .atrium-modal__body .atrium-profile__stats { max-width: 100%; } @keyframes atrium-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes atrium-modal-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } /* * Schließen: Bis v0.58.0 verschwand das Panel schlagartig, weil `hidden` * sofort gesetzt wurde – auf ein sanftes Öffnen folgte ein harter Schnitt. * Die Klasse setzt das JS, wartet die Animation ab und blendet dann aus. */ .atrium-modal.is-closing .atrium-modal__backdrop { animation: atrium-modal-fade .2s ease both reverse; } .atrium-modal.is-closing .atrium-modal__panel { animation: atrium-modal-sink .2s cubic-bezier(.4, 0, .9, .5) both; } @keyframes atrium-modal-sink { to { opacity: 0; transform: translateY(12px) scale(.99); } } @media (prefers-reduced-motion: reduce) { .atrium-modal__backdrop, .atrium-modal__panel, .atrium-modal.is-closing .atrium-modal__backdrop, .atrium-modal.is-closing .atrium-modal__panel { animation: none; } } @media (max-width: 680px) { .atrium-modal { padding: 0; } /* `100%` statt `100dvh`: Das Overlay ist bei gesetzter Adminleiste bereits um deren Höhe kürzer – eine feste Schirmhöhe ragte unten wieder heraus. */ .atrium-modal__panel { max-width: 100%; max-height: 100%; border-radius: 0; } .atrium-modal__body { padding: 26px 18px 30px; } } /* ── Profil: Avatar-Block ────────────────────────────────────────────── */ .atrium-profile__account { display: flex; align-items: center; gap: 16px; } .atrium-profile__avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 999px; overflow: hidden; box-shadow: var(--fe-shadow); } .atrium-profile__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; } .atrium-profile__check { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--fe-muted); cursor: pointer; } .atrium-profile input[type="file"] { font-size: 13px; color: var(--fe-muted); max-width: 100%; } /* Profilbild-Block: Vorschau + Upload/Entfernen (AJAX) */ .atrium-profile__avatarrow { display: flex; align-items: flex-start; gap: 16px; } .atrium-profile__avatarctl { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; } .atrium-profile__avatarbtns { display: flex; flex-wrap: wrap; gap: 8px; } .atrium-profile__btn { cursor: pointer; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; font-family: inherit; border: 0; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); box-shadow: 0 10px 22px -12px rgba(47, 107, 255, .6); transition: transform .15s ease, opacity .15s ease; } .atrium-profile__btn:hover:not(:disabled) { transform: translateY(-1px); } .atrium-profile__btn:disabled { opacity: .5; cursor: default; box-shadow: none; } .atrium-profile__btn--ghost { background: transparent; color: var(--fe-muted); border: 1px solid var(--fe-line); box-shadow: none; } .atrium-profile__btn--ghost:hover:not(:disabled) { color: #b32d2e; border-color: #b32d2e; } .atrium-profile__avatarmsg { font-size: 13px; color: var(--fe-muted); min-height: 1em; } .atrium-profile__avatarmsg.is-ok { color: var(--fe-accent); } .atrium-profile__avatarmsg.is-err { color: #b32d2e; } .atrium-theme-dark .atrium-profile__avatarmsg.is-err, .atrium-theme-glass .atrium-profile__avatarmsg.is-err { color: #fca5a5; } /* ── Tool-Launcher: Favoriten anpinnen ───────────────────────────────── */ .atrium-tool-wrap { position: relative; display: flex; } .atrium-tool-wrap > .atrium-tool { flex: 1; } .atrium-tool__fav { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; cursor: pointer; line-height: 1; font-size: 15px; border: 1px solid var(--fe-line); border-radius: 999px; background: var(--fe-surface); color: var(--fe-faint); opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease, color .18s ease, border-color .18s ease; } .atrium-tool-wrap:hover .atrium-tool__fav, .atrium-tool__fav:focus-visible { opacity: 1; transform: none; } .atrium-tool__fav:hover { color: #f5b50a; border-color: #f5b50a; } .atrium-tool__fav.is-on { opacity: 1; transform: none; color: #f5b50a; border-color: #f5b50a; box-shadow: 0 4px 14px -6px rgba(245, 181, 10, .8); } .atrium-tool-wrap.is-pinned > .atrium-tool { border-color: rgba(245, 181, 10, .5); } body.atrium-theme-glass .atrium-tool__fav { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); color: #fff; } /* ── Defektmeldungen ─────────────────────────────────────────────────── */ .atrium-defekt__form { padding: 22px; } .atrium-defekt__grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .atrium-defekt__field { display: flex; flex-direction: column; min-width: 0; } @media (min-width: 720px) { .atrium-defekt__grid { grid-template-columns: 1fr 1fr; } .atrium-defekt__field--wide { grid-column: 1 / -1; } } .atrium-defekt select, .atrium-defekt input[type="text"], .atrium-defekt input[type="file"], .atrium-defekt textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font-size: 14px; font-family: inherit; } .atrium-defekt input[type="file"] { padding: 8px 12px; } .atrium-defekt select:focus, .atrium-defekt input:focus, .atrium-defekt textarea:focus { outline: none; border-color: var(--fe-brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, .18); } .atrium-defekt__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; } .atrium-defekt__msg { font-size: 14px; color: var(--fe-muted); } .atrium-defekt__msg.is-ok { color: var(--fe-accent); font-weight: 600; } .atrium-defekt__msg.is-err { color: #b32d2e; } .atrium-theme-dark .atrium-defekt__msg.is-err, .atrium-theme-glass .atrium-defekt__msg.is-err { color: #fca5a5; } .atrium-defekt__mine { margin-top: 30px; } .atrium-defekt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .atrium-defekt__item { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .atrium-defekt__item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .atrium-defekt__item-meta { font-size: 13px; color: var(--fe-faint); } .atrium-defekt__item-desc { margin: 0; color: var(--fe-muted); font-size: 14px; } .atrium-defekt__item-resolved { margin: 0; font-size: 13px; color: var(--fe-text); background: var(--fe-surface-2); border-radius: 10px; padding: 8px 12px; } .atrium-defekt__item-resolved strong { color: var(--fe-accent); } .atrium-defekt__badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--fe-faint); } .atrium-defekt__badge--offen { background: #d97706; } .atrium-defekt__badge--in_bearbeitung { background: #2f6bff; } .atrium-defekt__badge--ersatz_beschafft { background: #7c3aed; } .atrium-defekt__badge--erledigt { background: #16a34a; } .atrium-defekt__badge--abgelehnt { background: #6b7280; } /* Defekt im Modal: Formular füllt das Panel (Abstand kommt vom Modal-Body). */ #atrium-defekt-modal .atrium-modal__panel { max-width: 720px; } .atrium-modal .atrium-defekt__form { padding: 0; background: transparent; border: 0; box-shadow: none; } /* „Defekt melden"-Button im Hero (gleiche Höhe wie Theme-Switch & Profil). */ .atrium-hero__report { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; transition: background .2s ease, border-color .2s ease, transform .15s ease; } .atrium-hero__report:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); transform: translateY(-1px); } .atrium-hero__report-icon { font-size: 16px; line-height: 1; } /* Profil-Button auf dieselbe Höhe bringen. */ .atrium-hero__profile { min-height: 40px; } @media (max-width: 600px) { .atrium-hero__report-label { display: none; } .atrium-hero__report { padding: 0 12px; } } /* Auslöse-Button auf der Ticket-Seite. */ .atrium-defekt__open { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 22px; border: 0; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; font-family: inherit; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); box-shadow: 0 14px 30px -12px rgba(47, 107, 255, .6); transition: transform .15s ease; } .atrium-defekt__open:hover { transform: translateY(-2px); } /* ── Defekt v2: Modal-Formular sauber, Ticket-Liste, Detail ──────────── */ .atrium-defekt__wrap { max-width: 1080px; } .atrium-defekt__opt { font-weight: 400; color: var(--fe-faint); font-size: 12px; } /* Melde-Formular im Modal: ein Feld = ein Block, ruhige Abstände. */ .atrium-modal .atrium-defekt__grid { gap: 14px 18px; } .atrium-defekt__field label { margin-bottom: 6px; } .atrium-defekt textarea { min-height: 110px; resize: vertical; } /* Toolbar (Melden-Button + Status-Filter) */ .atrium-defekt__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 24px; } .atrium-defekt__open { margin-bottom: 0; } .atrium-defekt__filter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fe-muted); } .atrium-defekt__filter select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font-size: 14px; font-family: inherit; } /* Ticket-Liste */ .atrium-defekt__list-wrap { margin-top: 4px; } .atrium-defekt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 760px) { .atrium-defekt__list { grid-template-columns: 1fr 1fr; } } .atrium-defekt__item { padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .atrium-defekt__item:hover, .atrium-defekt__item:focus-visible { transform: translateY(-2px); border-color: var(--fe-brand); box-shadow: 0 18px 40px -24px rgba(47, 107, 255, .55); outline: none; } .atrium-defekt__item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .atrium-defekt__item-meta { font-size: 13px; color: var(--fe-faint); flex: 1; min-width: 0; } .atrium-defekt__item-chevron { color: var(--fe-faint); font-size: 22px; line-height: 1; flex: 0 0 auto; } .atrium-defekt__item-sub { margin: 0; font-size: 12.5px; color: var(--fe-muted); } .atrium-defekt__item-desc { margin: 0; color: var(--fe-muted); font-size: 14px; } .atrium-defekt__item-foot { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--fe-line); } .atrium-defekt__quick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fe-muted); } .atrium-defekt__quick select { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font-size: 13px; font-family: inherit; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .atrium-defekt__quick select.is-saved { border-color: var(--fe-accent); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); } /* Status-Badges (Standard-Slugs farbig; unbekannte/eigene neutral) */ .atrium-defekt__badge--abgeschlossen, .atrium-defekt__badge--erledigt { background: #16a34a; } .atrium-defekt__badge--ersatz_beschafft { background: #7c3aed; } /* Detail-Modal: Definitionslisten, Beschreibung, Foto, Verwalten */ .atrium-defekt__detail-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 6px; } @media (min-width: 640px) { .atrium-defekt__detail-grid { grid-template-columns: 1fr 1fr; } } .atrium-defekt__dl { display: grid; gap: 8px; align-content: start; } .atrium-defekt__dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 14px; } .atrium-defekt__dl dt { margin: 0; color: var(--fe-faint); } .atrium-defekt__dl dd { margin: 0; color: var(--fe-text); } .atrium-defekt__dl--shop { background: var(--fe-surface-2); border: 1px solid var(--fe-line); border-radius: 12px; padding: 14px 16px; } .atrium-defekt__dl-title { margin: 4px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--fe-muted); } .atrium-defekt__desc-box { margin: 16px 0; padding: 14px 16px; border-radius: 12px; background: var(--fe-surface-2); border: 1px solid var(--fe-line); } .atrium-defekt__desc-box p { margin: 0; color: var(--fe-text); font-size: 14px; line-height: 1.6; } .atrium-defekt__photo-wrap { margin: 14px 0; } .atrium-defekt__photo { max-width: 100%; height: auto; border-radius: 12px; display: block; } .atrium-defekt__manage { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fe-line); } .atrium-defekt__manage select, .atrium-defekt__manage input[type="date"], .atrium-defekt__manage textarea { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font-size: 14px; font-family: inherit; } .atrium-defekt__manage textarea { min-height: 56px; resize: vertical; } @media (max-width: 639px) { .atrium-defekt__dl > div { grid-template-columns: 110px 1fr; } } /* ── Defekt v2.1: Filter-Chips, kompakte Zeilen, Status-Buttons ──────── */ .atrium-defekt__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .atrium-defekt__chip { cursor: pointer; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-muted); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; font-family: inherit; transition: background .15s ease, color .15s ease, border-color .15s ease; } .atrium-defekt__chip:hover { border-color: var(--fe-brand); color: var(--fe-text); } .atrium-defekt__chip.is-active { background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); border-color: transparent; color: #fff; } .atrium-defekt__count { font-size: 13px; font-weight: 600; color: var(--fe-faint); background: var(--fe-surface-2); border-radius: 999px; padding: 2px 9px; margin-left: 6px; } .atrium-defekt__list.atrium-defekt__rows { grid-template-columns: 1fr; gap: 10px; } .atrium-defekt__row { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .atrium-defekt__row:hover, .atrium-defekt__row:focus-visible { transform: translateY(-1px); border-color: var(--fe-brand); box-shadow: 0 14px 32px -22px rgba(47, 107, 255, .5); outline: none; } .atrium-defekt__row-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atrium-defekt__row-title { font-weight: 700; font-size: 14.5px; color: var(--fe-text); } .atrium-defekt__row-meta { font-size: 13px; color: var(--fe-faint); flex: 1; min-width: 0; } .atrium-defekt__row-chevron { color: var(--fe-faint); font-size: 22px; line-height: 1; flex: 0 0 auto; } .atrium-defekt__statusbtns { display: flex; flex-wrap: wrap; gap: 6px; } .atrium-defekt__statusbtns.is-busy { opacity: .5; pointer-events: none; } .atrium-defekt__sbtn { cursor: pointer; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-muted); border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; font-family: inherit; transition: background .15s ease, color .15s ease, border-color .15s ease; } .atrium-defekt__sbtn:hover { border-color: var(--fe-brand); color: var(--fe-text); } .atrium-defekt__sbtn.is-active { color: #fff; border-color: transparent; background: var(--fe-faint); } .atrium-defekt__sbtn--offen.is-active { background: #d97706; } .atrium-defekt__sbtn--in_bearbeitung.is-active { background: #2f6bff; } .atrium-defekt__sbtn--abgeschlossen.is-active { background: #16a34a; } .atrium-defekt__sbtn--abgelehnt.is-active { background: #6b7280; } @media (max-width: 600px) { .atrium-defekt__row-meta { flex-basis: 100%; } } /* Archiv / Schnecke */ .atrium-defekt__snail { font-size: 16px; line-height: 1; flex: 0 0 auto; } .atrium-defekt__row.is-snail { border-color: #d97706; box-shadow: 0 0 0 1px rgba(217, 119, 6, .25); } .atrium-defekt__chip--snail.is-active { background: #d97706; } .atrium-defekt__chip--archive.is-active { background: #6b7280; } /* ── Infodocs / Updates ──────────────────────────────────────────────── */ .atrium-infodocs__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .atrium-infodocs__item { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; cursor: pointer; transition: border-color .18s ease, transform .18s ease; } .atrium-infodocs__item:hover { border-color: var(--fe-brand); transform: translateY(-2px); } .atrium-infodocs__item:focus-visible { outline: 2px solid var(--fe-brand); outline-offset: 2px; } .atrium-infodocs__item.is-pinned { border-color: var(--fe-brand); } .atrium-infodocs__thumb { margin: 0; line-height: 0; } .atrium-infodocs__thumb-img { width: 100%; height: 150px; object-fit: cover; display: block; } .atrium-infodocs__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; } .atrium-infodocs__item:not(:has(.atrium-infodocs__thumb)) .atrium-infodocs__body { padding-top: 20px; } .atrium-infodocs__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fe-faint); flex-wrap: wrap; } .atrium-infodocs__tag { font-weight: 700; color: var(--fe-brand); } .atrium-infodocs__pin { font-size: 13px; } .atrium-infodocs__clip { margin-left: auto; } .atrium-infodocs__title { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--fe-text); } .atrium-infodocs__excerpt { margin: 0; font-size: 14px; color: var(--fe-muted); } .atrium-infodocs__chevron { position: absolute; right: 16px; bottom: 14px; color: var(--fe-faint); font-size: 22px; line-height: 1; } /* Detail-Modal */ .atrium-infodocs__detail-image { margin: 0 0 16px; line-height: 0; } .atrium-infodocs__detail-img { width: 100%; height: auto; border-radius: 12px; } .atrium-infodocs__content { color: var(--fe-text); font-size: 15px; line-height: 1.65; } .atrium-infodocs__content p { margin: 0 0 12px; } .atrium-infodocs__content a { color: var(--fe-brand); } .atrium-infodocs__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fe-line); } .atrium-infodocs__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); } .atrium-infodocs__btn:hover { filter: brightness(1.05); } .atrium-infodocs__btn--ghost { background: transparent; color: var(--fe-text); border-color: var(--fe-line); } .atrium-infodocs__btn--ghost:hover { border-color: var(--fe-brand); color: var(--fe-brand); filter: none; } .atrium-infodocs__btn--danger { background: transparent; color: #b32d2e; border-color: rgba(179, 45, 46, .4); } .atrium-infodocs__btn--danger:hover { background: #b32d2e; color: #fff; border-color: #b32d2e; filter: none; } .atrium-infodocs__btn:disabled { opacity: .6; cursor: default; } /* Toolbar (Anlegen) + leerer Hinweis */ .atrium-infodocs__toolbar { margin-bottom: 16px; } .atrium-infodocs__empty { color: var(--fe-muted); margin: 0; } /* Frontend-Formular (anlegen/bearbeiten) */ .atrium-infodocs__form { display: grid; gap: 16px; } .atrium-infodocs__field { display: flex; flex-direction: column; gap: 6px; } .atrium-infodocs__opt { color: var(--fe-faint); font-weight: 400; } .atrium-infodocs__form input[type="text"], .atrium-infodocs__form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); font: inherit; } .atrium-infodocs__form input[type="file"] { color: var(--fe-text); font-size: 14px; } .atrium-infodocs__form input:focus, .atrium-infodocs__form textarea:focus { outline: none; border-color: var(--fe-brand); } .atrium-infodocs__checks { display: flex; flex-wrap: wrap; gap: 6px 16px; } .atrium-infodocs__check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fe-text); } .atrium-infodocs__current { font-size: 13px; color: var(--fe-muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atrium-infodocs__current a { color: var(--fe-brand); } .atrium-infodocs__form-img { max-width: 200px; height: auto; border-radius: 8px; display: block; } .atrium-infodocs__msg { font-size: 14px; } .atrium-infodocs__msg.is-ok { color: var(--fe-accent); } .atrium-infodocs__msg.is-err { color: #d33; } /* Kenntnisnahme (Quittung) */ .atrium-infodocs__ack { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--fe-line); border-radius: 12px; background: var(--fe-surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .atrium-infodocs__ack.is-done { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .4); } .atrium-infodocs__ack-hint { margin: 0; flex: 1 1 220px; color: var(--fe-muted); font-size: 14px; } .atrium-infodocs__ack-done { color: var(--fe-accent); font-weight: 700; } .atrium-infodocs__needack { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #92500a; background: #fde7c4; padding: 2px 8px; border-radius: 999px; } .atrium-infodocs__item.needs-ack { border-color: #e0a23b; box-shadow: 0 0 0 1px rgba(224, 162, 59, .25); } @media (max-width: 680px) { .atrium-infodocs__grid { grid-template-columns: 1fr; } } /* ── Aktionen: Schnell-Filter, Reset, Scroll-Gebiet, Kalender ───────── */ .atrium-actions__pills { display: flex; flex-wrap: wrap; gap: 8px; } .atrium-pill--toggle { font-family: inherit; } .atrium-pill--toggle.is-active { background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); border-color: transparent; color: #fff; } .atrium-actions__reset { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--fe-line); background: transparent; color: var(--fe-muted); } .atrium-actions__reset:hover { border-color: #d33; color: #d33; } /* (Aktionen-Scrollbox entfernt – stattdessen Journal-Liste, siehe v0.36.2) */ /* Aktionskalender (Modal) */ /* **Die Pfeile stehen beim Monatsnamen, nicht am Rand** (v0.186.1). Befund des Projektleiters mit Screenshot: „Oben rechts der Pfeil haengt im X." Mit `space-between` wurden sie an die Aussenkanten gedrueckt – 367 Pixel vom Titel entfernt –, und der rechte landete unter dem Schliessen-Kreuz, das absolut in der Ecke sitzt. Zentriert gruppiert stehen sie dort, wo man sie sucht, und die Ecke bleibt dem Kreuz. */ .atrium-cal__head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; } .atrium-cal__title { margin: 0; font-size: 19px; font-weight: 800; } .atrium-cal__nav { cursor: pointer; font: inherit; font-size: 20px; line-height: 1; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); } .atrium-cal__nav:hover { border-color: var(--fe-brand); color: var(--fe-brand); } .atrium-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .atrium-cal__wd { text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--fe-faint); padding: 4px 0; } .atrium-cal__cell { min-height: 92px; border: 1px solid var(--fe-line); border-radius: 9px; background: var(--fe-surface); padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .atrium-cal__cell.is-out { opacity: .45; } .atrium-cal__cell.is-today { border-color: var(--fe-brand); box-shadow: 0 0 0 1px var(--fe-brand) inset; } .atrium-cal__day { font-size: 12px; font-weight: 700; color: var(--fe-muted); } .atrium-cal__ev { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; padding: 3px 6px; border: 0; border-radius: 6px; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atrium-cal__ev:hover { filter: brightness(1.08); } .atrium-cal__more { font-size: 10px; color: var(--fe-faint); } @media (max-width: 640px) { .atrium-cal__cell { min-height: 60px; } .atrium-cal__ev { font-size: 10px; padding: 2px 4px; } } /* Kalender im Hero + Typ-Filter */ .atrium-hero__actions { margin-top: 10px; } .atrium-hero__cal-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .15s ease; } .atrium-hero__cal-btn:hover { background: rgba(255, 255, 255, .28); } .atrium-cal__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .atrium-cal__chip { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-muted); } .atrium-cal__chip:hover { border-color: var(--fe-brand); color: var(--fe-brand); } .atrium-cal__chip.is-active { background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); border-color: transparent; color: #fff; } .atrium-cal__empty { text-align: center; color: var(--fe-muted); padding: 18px 0 6px; } /* Event-Farben je Typ */ .atrium-cal__ev--event { background: linear-gradient(135deg, #16a34a, #0e7c3a); } .atrium-cal__ev--termin { background: linear-gradient(135deg, #d97706, #b45309); } /* ── v0.35.0: Hero-Animation, Standort-Karte, Dark-Lesbarkeit, Gültigkeit ─ */ /* Item 3: dezent animierter Hero-Hintergrund (hell/dunkel; Glas hat eigene Mesh-Animation) */ .atrium-hero { background-size: 160% 160%; animation: atrium-hero-drift 26s ease-in-out infinite alternate; } .atrium-theme-dark .atrium-hero { background-size: 160% 160%; } @keyframes atrium-hero-drift { from { background-position: 0% 0%; } to { background-position: 100% 55%; } } /* Item 4: schemenhafte Standort-Karte links im Hero (reine Grafik) */ .atrium-hero__map { position: absolute; left: 0; top: 0; bottom: 0; width: min(48%, 600px); z-index: 0; display: flex; align-items: center; justify-content: center; padding: 30px clamp(18px, 5vw, 70px); pointer-events: none; opacity: .22; } /* `overflow: hidden` ist hier kein Detail, sondern die Bedingung dafuer, dass der Zuschnitt ueberhaupt wirkt. Die viewBox endet bewusst bei ~50,2° N („Rest faellt unten weg", siehe `Frontend::hero_map()`) – der Umriss und die Shop-Punkte darunter werden aber weiter erzeugt. Mit `visible` malte die SVG sie ausserhalb ihrer Box, quer ueber den Hero: einzelne helle Punkte rechts neben dem Wetter und unter dem Begruessungstext. Weil die Karte ueber `min(48%, 600px)` und `height: 78%` skaliert, wanderten sie beim Zoomen mit – daran war der Fehler zu erkennen. Die Staedtenamen brauchen den Ueberstand nicht: `hero_map()` dreht sie ueber `$right` nach innen, sobald ein Punkt in der rechten Haelfte liegt. */ .atrium-hero__map-svg { width: 100%; height: 78%; overflow: hidden; } .atrium-hero__map-svg circle { fill: #ffffff; opacity: .85; animation: atrium-hero-mapglow 5.5s ease-in-out infinite alternate; } @keyframes atrium-hero-mapglow { from { opacity: .5; } to { opacity: .95; } } @media (max-width: 820px) { .atrium-hero__map { display: none; } } /* Auf Touch-Geräten (v. a. iPad/iOS-WebKit) löst die per-Circle-Opacity- Animation der Kartenpunkte hinter dem RSS-Block ein lokales Flackern aus. Dort die Punkte statisch zeigen (Form bleibt); Desktop behält den dezenten Puls. Greift erst >820px, da die Karte darunter ohnehin ausgeblendet ist. */ @media (hover: none) and (pointer: coarse) { .atrium-hero__map-svg circle { animation: none; opacity: .7; } } /* Item 2: Dark/Glass-Lesbarkeit (Divi färbt Headings sonst dunkel) */ .atrium-cal__title { color: var(--fe-text); } body.atrium-theme-glass .atrium-action__title, body.atrium-theme-glass .atrium-infodocs__title { text-shadow: 0 1px 10px rgba(0, 0, 0, .3); } /* Kalender „Meine"-Filter */ .atrium-cal__filter-sep { width: 1px; align-self: stretch; background: var(--fe-line); margin: 2px 4px; } .atrium-cal__chip--mine.is-active { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: transparent; color: #fff; } /* Infodocs: Gültigkeits-Datum */ .atrium-infodocs__valid { font-size: 11px; font-weight: 700; color: var(--fe-accent); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .atrium-hero { animation: none; } .atrium-hero__map-svg circle { animation: none; } } /* v0.35.1: Deutschland-Umriss in der Hero-Karte */ .atrium-hero__map { opacity: .28; } .atrium-hero__map-de { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .55); stroke-width: 1; } .atrium-hero__map-dots circle { fill: #ffffff; } /* Desktop: Platz etwas besser nutzen */ @media (min-width: 1280px) { .atrium-fe { --fe-maxw: 1380px; } .atrium-fe__cols { grid-template-columns: minmax(300px, 360px) 1fr; gap: 40px; } } .atrium-workspace .atrium-fe__col--actions .atrium-actions__grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* v0.36.5: Hero-Karte deutlich größer, links im Hintergrund, nach unten. */ .atrium-hero__map { position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: min(54%, 720px); z-index: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 clamp(10px, 3vw, 48px) 8px; pointer-events: none; opacity: .4; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); } /* **Das ist die wirksame Regel** – sie steht nach der aelteren oben und gewinnt. `overflow: hidden` (v0.110.0) laesst den Zuschnitt aus `hero_map_svg()` erst wirken: Die viewBox endet bei ~50,2° N, Umriss und Shop-Punkte darunter werden aber weiter erzeugt. Mit `visible` malte die SVG sie ausserhalb ihrer Box, quer ueber den Hero – einzelne helle Punkte rechts neben dem Wetter und unter dem Begruessungstext, die beim Zoomen wanderten, weil `width: min(54%, 720px)` und `height: 100%` die Skalierung aendern. */ .atrium-hero__map-svg { width: auto; height: 100%; max-width: 100%; overflow: hidden; } .atrium-hero__map-de { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .42); stroke-width: 1; } .atrium-hero__map-river { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; } .atrium-hero__map-dots circle { fill: #ffffff; opacity: .8; } .atrium-hero__map-city circle { fill: #cfe0ff; } .atrium-hero__map-city.is-hq circle { fill: #5ee0ff; } .atrium-hero__map-city text { fill: rgba(255, 255, 255, .9); font-weight: 700; letter-spacing: .01em; paint-order: stroke; } .atrium-hero__map-city.is-hq text { fill: #ffffff; } @media (max-width: 820px) { .atrium-hero__map { display: none; } } /* Wetter-Tagestrend im Hero */ .atrium-hero__weather-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); } .atrium-hero__weather-day { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; } .atrium-hero__weather-dname { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; opacity: .85; } .atrium-hero__weather-dicon { font-size: 18px; line-height: 1; } .atrium-hero__weather-dtemp { font-size: 11.5px; white-space: nowrap; } .atrium-hero__weather-dtemp b { font-weight: 700; } .atrium-hero__weather-dtemp i { font-style: normal; opacity: .65; margin-left: 3px; } /* v0.36.0: Landing als 3 Spalten – Werkzeuge · Aktionen · Neuigkeiten */ .atrium-workspace .atrium-fe__cols--3 { grid-template-columns: minmax(200px, 250px) minmax(0, 1.7fr) minmax(0, 1.15fr); gap: 30px; } .atrium-workspace .atrium-fe__col--news .atrium-news__block + .atrium-news__block { margin-top: 22px; } .atrium-workspace .atrium-fe__col--news .atrium-news__grid { grid-template-columns: 1fr; } .atrium-workspace .atrium-fe__col--news .atrium-infodocs__grid { grid-template-columns: 1fr; } @media (max-width: 1180px) { .atrium-workspace .atrium-fe__cols--3 { grid-template-columns: 1fr; gap: 34px; } .atrium-workspace .atrium-fe__col--tools { position: static; } .atrium-workspace .atrium-fe__col--actions .atrium-actions__grid { max-height: none; } } /* v0.36.1: Desktop breiter nutzen + Aktionen mobil als Wisch-Karussell */ /* Sehr große Screens: mehr Inhaltsbreite statt breiter Ränder. */ @media (min-width: 1600px) { .atrium-fe { --fe-maxw: 1520px; } } /* Mobil: Aktionen horizontal wischen statt endlos scrollen (Scroll-Snap). */ @media (max-width: 820px) { .atrium-actions__grid { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 4px; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 2px 4px 10px; } .atrium-actions__grid > .atrium-action { flex: 0 0 86%; scroll-snap-align: start; } .atrium-actions__grid::-webkit-scrollbar { height: 6px; } .atrium-actions__grid::-webkit-scrollbar-thumb { background: var(--fe-line); border-radius: 8px; } } /* v0.36.2: Aktionen als Journal-Liste in der mittleren Spalte (Desktop) */ @media (min-width: 1181px) { .atrium-workspace .atrium-fe__col--actions .atrium-actions__grid { grid-template-columns: 1fr; gap: 12px; } .atrium-workspace .atrium-fe__col--actions .atrium-action--rich { flex-direction: row; align-items: stretch; min-height: 108px; } .atrium-workspace .atrium-fe__col--actions .atrium-action__cover { flex: 0 0 132px; line-height: 0; } .atrium-workspace .atrium-fe__col--actions .atrium-action__cover-img { width: 132px; height: 100%; object-fit: cover; } .atrium-workspace .atrium-fe__col--actions .atrium-action__inner { padding: 12px 16px; gap: 6px; } .atrium-workspace .atrium-fe__col--actions .atrium-action__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .atrium-workspace .atrium-fe__col--actions .atrium-action__chevron { display: none; } } /* ── Umfragen (im Infodoc-Detail-Modal) ───────────────────────────────── */ .atrium-survey { margin: 18px 0 4px; padding: 16px; border-radius: 14px; border: 1px solid var(--fe-line); background: var(--fe-surface); } .atrium-survey__q { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--fe-text); } .atrium-survey__hint { margin: 0 0 12px; font-size: 13px; color: var(--fe-muted); } .atrium-survey__note { margin: 8px 0 0; font-size: 13px; color: var(--fe-muted); } .atrium-survey__form { display: flex; flex-direction: column; gap: 8px; } .atrium-survey__opt { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--fe-line); border-radius: 11px; cursor: pointer; background: var(--fe-bg); color: var(--fe-text); transition: border-color .15s, background .15s; } .atrium-survey__opt:hover { border-color: var(--fe-brand); } .atrium-survey__opt input { width: 18px; height: 18px; accent-color: var(--fe-brand); margin: 0; } .atrium-survey__actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; } .atrium-survey__done { margin: 0 0 12px; font-weight: 700; color: var(--fe-brand); } .atrium-survey__results { display: flex; flex-direction: column; gap: 11px; } .atrium-survey__result-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 14px; } .atrium-survey__result-label { color: var(--fe-text); font-weight: 600; } .atrium-survey__result-num { color: var(--fe-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .atrium-survey__bar { height: 10px; border-radius: 6px; background: var(--fe-surface-2); overflow: hidden; } .atrium-survey__bar-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--fe-brand), var(--fe-brand-2)); transition: width .4s ease; } .atrium-survey__result.is-mine .atrium-survey__result-label { color: var(--fe-brand); } .atrium-survey__total { margin: 4px 0 0; font-size: 13px; color: var(--fe-muted); } /* ── Umfrage-Builder (Anlege-/Bearbeiten-Formular) ────────────────────── */ .atrium-survey-builder__enable { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fe-text); } .atrium-survey-builder__enable input { width: 17px; height: 17px; accent-color: var(--fe-brand); } .atrium-survey-builder__panel { margin-top: 12px; padding: 14px; border: 1px solid var(--fe-line); border-radius: 12px; background: var(--fe-surface); display: flex; flex-direction: column; gap: 14px; } .atrium-survey-builder__panel.is-collapsed { display: none; } .atrium-survey-builder__row { display: flex; flex-direction: column; gap: 6px; } .atrium-survey-builder__opts { display: flex; flex-direction: column; gap: 8px; } .atrium-survey-builder__opt { display: flex; align-items: center; gap: 8px; } .atrium-survey-builder__opt input[type="text"] { flex: 1 1 auto; } .atrium-survey-builder__rm { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; border: 1px solid var(--fe-line); background: var(--fe-bg); color: var(--fe-muted); font-size: 18px; line-height: 1; } .atrium-survey-builder__rm:hover { border-color: #b32d2e; color: #b32d2e; } .atrium-survey-builder__add { align-self: flex-start; cursor: pointer; border: 1px dashed var(--fe-line); background: transparent; color: var(--fe-brand); border-radius: 9px; padding: 7px 12px; font-weight: 600; } .atrium-survey-builder__add:hover { border-color: var(--fe-brand); } .atrium-survey-builder__note { margin: 2px 0 0; font-size: 12.5px; color: var(--fe-muted); } .atrium-survey-builder__switches { display: flex; flex-direction: column; gap: 9px; } .atrium-survey-builder__switches label { display: inline-flex; align-items: center; gap: 8px; color: var(--fe-text); } .atrium-survey-builder__scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } /* ── Reaktionen („Gefällt mir") ───────────────────────────────────────── */ .atrium-react { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; } .atrium-react__btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 15px; border-radius: 999px; font: inherit; font-weight: 600; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); transition: border-color .15s, color .15s, background .15s, transform .1s; } .atrium-react__btn:hover:not([disabled]) { border-color: var(--fe-brand); color: var(--fe-brand); } .atrium-react__btn:active:not([disabled]) { transform: scale(.96); } .atrium-react__btn[disabled] { cursor: default; opacity: .75; } .atrium-react__btn.is-liked { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--fe-brand), var(--fe-brand-2)); } .atrium-react__icon { font-size: 17px; line-height: 1; } .atrium-react__count { min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px; font-size: 13px; background: var(--fe-surface-2); color: inherit; } .atrium-react__btn.is-liked .atrium-react__count { background: rgba(255, 255, 255, .25); } .atrium-react__names { font-size: 13px; color: var(--fe-muted); } /* ── Kommentare (flach, im Detail-Modal) ──────────────────────────────── */ .atrium-comments { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fe-line); } .atrium-comments__title { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--fe-text); } .atrium-comments__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .atrium-comments__empty { margin: 0; color: var(--fe-muted); font-size: 14px; } .atrium-comments__item { padding: 12px 14px; border: 1px solid var(--fe-line); border-radius: 12px; background: var(--fe-surface); } .atrium-comments__head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .atrium-comments__author { font-weight: 700; color: var(--fe-text); font-size: 14px; } .atrium-comments__date { font-size: 12.5px; color: var(--fe-muted); } .atrium-comments__del { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; line-height: 1; border: 1px solid var(--fe-line); background: var(--fe-bg); color: var(--fe-muted); font-size: 16px; } .atrium-comments__del:hover { border-color: #b32d2e; color: #b32d2e; } .atrium-comments__body { color: var(--fe-text); font-size: 14.5px; line-height: 1.55; word-break: break-word; } .atrium-comments__form { display: flex; flex-direction: column; gap: 9px; } .atrium-comments__form textarea { width: 100%; resize: vertical; min-height: 64px; padding: 11px 13px; box-sizing: border-box; border: 1px solid var(--fe-line); border-radius: 11px; background: var(--fe-bg); color: var(--fe-text); font: inherit; font-size: 14.5px; } .atrium-comments__form textarea:focus { outline: 2px solid var(--fe-brand); outline-offset: 1px; border-color: var(--fe-brand); } .atrium-comments__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atrium-comments__note { margin: 0; color: var(--fe-muted); font-size: 14px; } /* ── Kommentare v0.40.0: Antworten, Werkzeuge, Bearbeiten ─────────────── */ .atrium-comments__edited { font-size: 12px; color: var(--fe-faint); } .atrium-comments__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .atrium-comments__tool { background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--fe-muted); } .atrium-comments__tool:hover { color: var(--fe-brand); } .atrium-comments__edit, .atrium-comments__reply-form { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; } /* Wichtig: die display:flex-Regel oben darf das [hidden]-Attribut nicht aushebeln. */ .atrium-comments__edit[hidden], .atrium-comments__reply-form[hidden] { display: none; } .atrium-comments__tool--icon { font-size: 16px; line-height: 1; padding: 2px 4px; } .atrium-comments__edit textarea, .atrium-comments__reply-form textarea { width: 100%; resize: vertical; min-height: 56px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--fe-line); border-radius: 11px; background: var(--fe-bg); color: var(--fe-text); font: inherit; font-size: 14.5px; } .atrium-comments__edit textarea:focus, .atrium-comments__reply-form textarea:focus { outline: 2px solid var(--fe-brand); outline-offset: 1px; border-color: var(--fe-brand); } .atrium-comments__replies { margin: 12px 0 0 18px; padding-left: 14px; border-left: 2px solid var(--fe-line); display: flex; flex-direction: column; gap: 10px; } .atrium-comments__replies:empty { display: none; } .atrium-comments__item.is-reply { padding: 10px 12px; background: var(--fe-bg); } /* kompakter Like (an Kommentaren) */ .atrium-react--compact { margin: 0; } .atrium-react--compact .atrium-react__btn { padding: 4px 11px; font-size: 13px; gap: 6px; } .atrium-react--compact .atrium-react__icon { font-size: 15px; } .atrium-react--compact .atrium-react__count { min-width: 16px; padding: 0 6px; font-size: 12px; } /* Like-/Kommentar-Zähler auf den Aktionskarten (außen) */ .atrium-action__count { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--fe-muted); padding: 2px 8px; border-radius: 999px; background: var(--fe-surface-2); } /* ── Aktionen: „Alle anzeigen"-Button + Übersicht-Modal ───────────────── */ .atrium-actions__more { margin-top: 14px; text-align: center; } .atrium-actions__more .atrium-infodocs__btn { width: 100%; justify-content: center; } /* Im Übersicht-Modal die Karten in ein responsives Raster statt einer schmalen Spalte. */ #atrium-actions-all .atrium-modal__panel { max-width: 1100px; } #atrium-actions-all .atrium-actions__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } @media (max-width: 600px) { #atrium-actions-all .atrium-actions__grid { grid-template-columns: 1fr; } } /* ── Aktionen: Stern zum Oben-Fixieren (Führungskräfte) ───────────────── */ .atrium-action__pin { margin-left: auto; flex: 0 0 auto; cursor: pointer; line-height: 1; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-faint); width: 28px; height: 28px; border-radius: 999px; font-size: 15px; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s, transform .1s; } .atrium-action__pin:hover:not([disabled]) { color: #f5a623; border-color: #f5a623; } .atrium-action__pin:active:not([disabled]) { transform: scale(.92); } .atrium-action__pin.is-pinned { color: #f5a623; border-color: #f5a623; background: rgba(245, 166, 35, .12); } .atrium-action__pin.is-static { cursor: default; border: 0; background: transparent; width: auto; } /* ── Anhänge-Liste (Mehrfach-Upload, Detail-Ansicht) ──────────────────── */ .atrium-infodocs__attachments { margin: 16px 0 4px; } .atrium-infodocs__attachments-h { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--fe-text); } .atrium-attach { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .atrium-attach__link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); text-decoration: none; font-size: 14px; word-break: break-word; } .atrium-attach__link:hover { border-color: var(--fe-brand); color: var(--fe-brand); } /* ── v0.43.1: Kein horizontaler Overflow auf Mobil ──────────────────────── Die Frontend-Sektionen dürfen nie über die Viewport-Breite hinausragen (sonst „verrutscht" die ganze Seite seitlich). `overflow-x: clip` clippt nur die Breite, OHNE einen Scroll-Container zu erzeugen – die sticky Werkzeug-Spalte und der interne Aktionen-Wisch-Streifen (overflow-x:auto) bleiben dadurch funktionsfähig. */ .atrium-fe.atrium-section { overflow-x: clip; } /* ── Standort-Verzeichnis (Modal) ─────────────────────────────────────── */ /* * Liste + Regionskarte. Die Karte ist eine SVG aus dem Plugin; ihre Flächen * tragen die Klasse .wbz-karte__land (aus der Quelldatei) und werden hier * eingefärbt – Hell und Dunkel über dieselben Tokens wie der Rest. */ .atrium-modal__panel--wide { max-width: 1180px; width: min(96vw, 1180px); } .atrium-orte__head { margin-bottom: 14px; } .atrium-orte__title { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.015em; } .atrium-orte__sub { margin: 2px 0 0; color: var(--fe-muted); font-size: .92rem; } .atrium-orte__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--fe-line); } .atrium-orte__search { flex: 1 1 240px; min-width: 0; } .atrium-orte__search input { width: 100%; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--fe-line); background: var(--fe-surface-2); color: var(--fe-text); font-size: .95rem; } .atrium-orte__search input:focus-visible { outline: 2px solid var(--fe-brand); outline-offset: 1px; } .atrium-orte__chips { display: flex; flex-wrap: wrap; gap: 6px; } .atrium-orte__chip { padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: .85rem; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-muted); transition: background .15s, color .15s, border-color .15s; } .atrium-orte__chip:hover { color: var(--fe-text); border-color: var(--fe-brand); } .atrium-orte__chip.is-on { background: var(--fe-brand); border-color: var(--fe-brand); color: #fff; } /* Umschalter nur auf schmalen Bildschirmen – am Desktop steht beides nebeneinander. */ .atrium-orte__switch { display: none; gap: 4px; padding: 3px; border-radius: 10px; background: var(--fe-surface-2); } .atrium-orte__tab { padding: 6px 14px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--fe-muted); font-size: .88rem; } .atrium-orte__tab.is-on { background: var(--fe-surface); color: var(--fe-text); box-shadow: var(--fe-shadow); } .atrium-orte__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; } .atrium-orte__listwrap { max-height: min(62vh, 620px); overflow: auto; padding-right: 4px; } .atrium-orte__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .atrium-orte__item { border: 1px solid var(--fe-line); border-radius: 12px; background: var(--fe-card-grad); overflow: hidden; transition: border-color .15s; } .atrium-orte__item:hover { border-color: var(--fe-brand); } .atrium-orte__item.is-on { border-color: var(--fe-brand); box-shadow: 0 0 0 1px var(--fe-brand) inset; } /* Zwei Spalten: alles Geschriebene links, das Aufklapp-Zeichen rechts. */ .atrium-orte__itemhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; padding: 11px 14px; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; } .atrium-orte__itemhead > span:not(.atrium-orte__auf) { grid-column: 1; } /* * Das Aufklapp-Zeichen. * * Ohne einen sichtbaren Hinweis muss man ausprobieren, dass eine Zeile * ueberhaupt mehr hergibt – gemeldet vom Projektleiter. Ein gedrehtes Winkelchen * statt eines Pfeilzeichens: Es dreht sich mit, und der Zustand ist damit * abzulesen, nicht nur die Moeglichkeit. * * `aria-expanded` am Knopf sagt dasselbe fuer den Screenreader – der Pfeil ist * nur dessen sichtbare Fassung, deshalb `aria-hidden`. */ .atrium-orte__auf { grid-column: 2; grid-row: 1 / -1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--fe-line); background: var(--fe-surface); transition: transform var(--fe-dauer) var(--fe-kurve), border-color var(--fe-dauer) var(--fe-kurve); } .atrium-orte__auf::before { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--fe-muted); border-bottom: 2px solid var(--fe-muted); transform: rotate(45deg); } .atrium-orte__item:hover .atrium-orte__auf { border-color: var(--fe-brand); } .atrium-orte__item.is-on .atrium-orte__auf { transform: rotate(180deg); border-color: var(--fe-brand); } .atrium-orte__name { font-weight: 650; font-size: .98rem; } .atrium-orte__tag { font-size: .74rem; color: var(--fe-faint); text-transform: uppercase; letter-spacing: .06em; } .atrium-orte__addr { font-size: .88rem; color: var(--fe-muted); } /* Details nur beim aktiven Eintrag – die Liste bleibt sonst scanbar. */ .atrium-orte__detail { display: none; padding: 0 14px 12px; } /* Sanft aufklappen statt hart erscheinen. */ .atrium-orte__item.is-on .atrium-orte__detail { display: block; animation: atrium-orte-auf .26s cubic-bezier(.22, .9, .3, 1); } .atrium-orte__item.is-on { transform: scale(1.012); } /* Die Obergrenze muss über die höchste mögliche Karte reichen. Seit dem Standortbild (16:9 auf ~530 Pixeln Breite = rund 300) sind 420 zu wenig – die Karte wurde während der 0,26 Sekunden abgeschnitten und sprang am Ende auf ihre volle Höhe. Der Wert wirkt nur im Verlauf, danach gilt wieder die natürliche Höhe; großzügig ist hier also gratis. */ @keyframes atrium-orte-auf { from { opacity: 0; transform: translateY(-5px); max-height: 0; } to { opacity: 1; transform: none; max-height: 760px; } } /* Standortbild: randlos an den Kanten der Karte – sie hat schon eine Umrandung, eine zweite darin sieht nach Fehler aus. Fester Zuschnitt, weil der Shop-Hub Hoch- und Querformate mischt: Ohne ihn klappt die Liste bei jedem Klick unterschiedlich weit auf und die Karte rutscht aus dem Blick. */ /* Hauptbild: ein Knopf, kein Bildrahmen – es oeffnet die Lightbox. */ .atrium-orte__bild { margin: 0 -14px 0; aspect-ratio: 16 / 9; overflow: hidden; position: relative; background: var(--fe-surface); border: 0; padding: 0; width: calc(100% + 28px); display: block; cursor: zoom-in; } .atrium-orte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Die Lupe sagt, dass mehr dahintersteckt. Ohne Hinweis klickt niemand. */ .atrium-orte__bild::after { content: "\2921"; position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(12, 18, 32, .55); color: #fff; font-size: 14px; opacity: 0; transition: opacity var(--fe-dauer) var(--fe-kurve); } .atrium-orte__bild:hover::after, .atrium-orte__bild:focus-visible::after { opacity: 1; } /* Streifen: hoechstens vier, die vierte traegt bei Bedarf ein „+N". */ .atrium-orte__streifen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 3px -14px 2px; } .atrium-orte__mini { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 0; padding: 0; background: var(--fe-surface); display: block; cursor: zoom-in; } .atrium-orte__mini img { width: 100%; height: 100%; object-fit: cover; display: block; } .atrium-orte__mini:hover img { filter: brightness(1.08); } .atrium-orte__mini.is-mehr::after { content: attr(data-mehr); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 18, 32, .62); color: #fff; font-weight: 650; font-size: 1.05rem; } /* --- Lightbox ------------------------------------------------------------ Sie liegt IM Standort-Fenster und deckt dessen Flaeche ab. Ein eigenes Overlay waere ein Fenster ueber einem Fenster ueber einer Seite – und muesste sich erneut mit der WordPress-Adminleiste um den Platz streiten. */ /* Ueber dem GANZEN Intranet, nicht nur ueber dem Standort-Fenster. Das JS haengt sie dafuer ans – im Modal deckte sie nur dessen Flaeche ab, und ein Klick daneben schloss beides. */ .atrium-orte__lb { position: fixed; inset: 0; z-index: 100001; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(8, 12, 22, .96); animation: atrium-lb-auf .2s ease; } .atrium-orte__lb[hidden] { display: none; } /* Dieselbe Ruecksicht wie bei den Modalen (v0.156.2): Die WordPress-Adminleiste ist der Weg zurueck ins Backend – wer sie verdeckt, nimmt ihn. */ body.admin-bar .atrium-orte__lb { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .atrium-orte__lb { top: 46px; } } @keyframes atrium-lb-auf { from { opacity: 0; } to { opacity: 1; } } .atrium-orte__lbkopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #e9eefb; } .atrium-orte__lbtitel { font-weight: 600; } .atrium-orte__lbzaehler { font-size: .9rem; color: #93a2bf; font-variant-numeric: tabular-nums; } .atrium-orte__lbzu { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; line-height: 1; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font-size: 20px; cursor: pointer; } .atrium-orte__lbbuehne { position: relative; display: grid; place-items: center; padding: 0 16px; min-height: 0; } .atrium-orte__lbbild { max-width: 100%; max-height: 100%; display: block; } .atrium-orte__lbbild img { max-width: 100%; max-height: 100%; border-radius: 10px; display: block; object-fit: contain; } /* Sanfter Wechsel von Bild zu Bild. Kurz und ohne Bewegung von der Seite: Ein wanderndes Bild lenkt vom Bild ab. */ .atrium-orte__lbbild img.is-neu { animation: atrium-lb-bild var(--fe-dauer) var(--fe-kurve); } @keyframes atrium-lb-bild { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } .atrium-orte__lbpfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); background: rgba(12, 18, 32, .6); color: #fff; font-size: 22px; cursor: pointer; } .atrium-orte__lbpfeil.is-zurueck { left: 10px; } .atrium-orte__lbpfeil.is-vor { right: 10px; } /* Am Ende blass statt umbrechen – siehe JS. */ .atrium-orte__lbpfeil[disabled] { opacity: .3; cursor: default; } .atrium-orte__lbfuss { display: flex; gap: 6px; justify-content: center; padding: 12px; overflow: auto; } .atrium-orte__lbpunkt { width: 52px; height: 38px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; border: 2px solid transparent; padding: 0; background: none; cursor: pointer; } .atrium-orte__lbpunkt.is-on { border-color: #fff; } .atrium-orte__lbpunkt img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 640px) { /* Auf dem Handy wird gewischt – zwei 46er-Knoepfe ueber dem Bild sind im Weg. */ .atrium-orte__lbpfeil { display: none; } } .atrium-orte__row { display: grid; gap: 1px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--fe-line); } .atrium-orte__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fe-faint); } .atrium-orte__hours { font-size: .89rem; color: var(--fe-text); } .atrium-orte__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .atrium-orte__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-size: .87rem; text-decoration: none; border: 1px solid var(--fe-line); background: var(--fe-surface); color: var(--fe-text); transition: border-color .15s, transform .12s; } .atrium-orte__btn:hover { border-color: var(--fe-brand); transform: translateY(-1px); } .atrium-orte__btn.is-primary { background: var(--fe-brand); border-color: var(--fe-brand); color: #fff; font-weight: 600; } /* Im Dunkelmodus ist --fe-brand deutlich heller – weißer Text darauf liest sich schlecht, dunkler ist der ruhigere Kontrast. */ .atrium-theme-dark .atrium-orte__btn.is-primary { color: #0c1424; } .atrium-orte__btn.is-route { border-color: var(--fe-brand); color: var(--fe-brand); font-weight: 600; } .atrium-orte__empty { margin: 18px 2px; color: var(--fe-muted); } /* Karte */ .atrium-orte__mapwrap { position: sticky; top: 0; /* Bezugsrahmen für das Tooltip. */ isolation: isolate; border: 1px solid var(--fe-line); border-radius: 14px; background: var(--fe-surface-2); padding: 10px; overflow: hidden; } .atrium-orte__map { display: block; min-height: 260px; position: relative; } .atrium-orte__svg { display: block; width: 100%; height: auto; max-height: min(58vh, 580px); } .atrium-orte__maperr { margin: 20px 8px; color: var(--fe-muted); font-size: .9rem; } /* * Kontrast: Das Land steht getönt auf heller Fläche, die Grenzen sind hell – * so lesen sich die Länder wie Puzzleteile. Vorher lag fast Weiß auf Weiß. */ .atrium-orte__svg .wbz-karte__land { fill: #c9d8f0; stroke: #f6f9ff; stroke-width: 2; transition: fill .2s; } .atrium-theme-dark .atrium-orte__svg .wbz-karte__land { fill: rgba(120, 155, 220, .30); stroke: rgba(10, 18, 35, .85); } .atrium-orte__grp { cursor: pointer; } .atrium-orte__grp:focus { outline: none; } .atrium-orte__grp:focus-visible .atrium-orte__pin { stroke: var(--fe-brand-2); stroke-width: 5; } .atrium-orte__pin { fill: var(--fe-brand); stroke: #fff; stroke-width: 3; transition: r .16s ease-out, fill .16s, opacity .2s; } .atrium-theme-dark .atrium-orte__pin { stroke: #0e1525; } .atrium-orte__pinnum { fill: #fff; font-size: 15px; font-weight: 700; pointer-events: none; user-select: none; } .atrium-orte__grp:hover .atrium-orte__pin { fill: var(--fe-brand-2); } .atrium-orte__grp.is-off { opacity: .16; pointer-events: none; } .atrium-orte__grp.is-on .atrium-orte__pin, .atrium-orte__grp.is-fest .atrium-orte__pin { fill: var(--fe-accent); } /* Tooltip – eigenes Element, erscheint ohne Verzögerung. */ /* * position: fixed, nicht absolute: Der Kartenbereich hat overflow:hidden für * die runden Ecken – darin wurde das Tooltip abgeschnitten, sobald es über den * Rand ragte. Fixed löst es aus jedem overflow-Kontext, der z-index hebt es * über das Modal-Panel (das liegt bei 100000+). */ .atrium-orte__tip { position: fixed; z-index: 100010; left: 0; top: 0; transform: translate(-50%, calc(-100% - 14px)); min-width: 210px; max-width: min(300px, calc(100vw - 24px)); border-radius: 12px; border: 1px solid var(--fe-line); background: var(--fe-surface); box-shadow: 0 18px 44px -16px rgba(15, 30, 65, .45); font-size: .86rem; overflow: hidden; animation: atrium-tip-auf .14s ease-out; pointer-events: none; } .atrium-orte__tip.is-below { transform: translate(-50%, 22px); } /* Festgehalten: bedienbar, damit man scrollen und auswählen kann. */ .atrium-orte__tip.is-fest { pointer-events: auto; box-shadow: 0 22px 54px -14px rgba(15, 30, 65, .55); } @keyframes atrium-tip-auf { from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.97); } } .atrium-orte__tiphead { padding: 9px 13px; font-weight: 700; background: var(--fe-surface-2); border-bottom: 1px solid var(--fe-line); } .atrium-orte__tipcount { float: right; font-weight: 500; font-size: .78rem; color: var(--fe-muted); } .atrium-orte__tipbody { max-height: 260px; overflow-y: auto; } .atrium-orte__tip.is-fest .atrium-orte__tipbody::after { content: ''; display: block; height: 2px; } .atrium-orte__tipitem { padding: 9px 13px; border-bottom: 1px solid var(--fe-line); } .atrium-orte__tipitem:last-child { border-bottom: 0; } .atrium-orte__tip.is-fest .atrium-orte__tipitem { cursor: pointer; } .atrium-orte__tip.is-fest .atrium-orte__tipitem:hover { background: var(--fe-surface-2); } .atrium-orte__tipname { font-weight: 650; } .atrium-orte__tipline { color: var(--fe-muted); font-size: .82rem; margin-top: 1px; } .atrium-orte__tipline.is-hours { color: var(--fe-text); margin-top: 4px; } .atrium-orte__tiptel { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--fe-brand); text-decoration: none; } .atrium-orte__tiptel:hover { text-decoration: underline; } @media (max-width: 900px) { .atrium-orte__switch { display: flex; } .atrium-orte__split { grid-template-columns: minmax(0, 1fr); } .atrium-orte__listwrap { max-height: none; } /* Auf dem Handy immer nur eine der beiden Ansichten. */ [data-view="liste"] .atrium-orte__mapwrap, [data-view="karte"] .atrium-orte__listwrap { display: none; } .atrium-orte__mapwrap { position: static; } } @media (prefers-reduced-motion: reduce) { .atrium-orte__btn, .atrium-orte__pin, .atrium-orte__chip, .atrium-orte__item { transition: none; } .atrium-orte__item.is-on .atrium-orte__detail, .atrium-orte__tip { animation: none; } .atrium-orte__auf { transition: none; } .atrium-orte__lb, .atrium-orte__lbbild img.is-neu { animation: none; } .atrium-orte__item.is-on { transform: none; } } /* ── Pflichtmeldungen: das Fenster, das man nicht wegklicken kann ───── */ /* Kein Kreuz, kein Hintergrund-Klick - der einzige Weg hinaus ist der Bestaetigen-Knopf. Deshalb liegt es ueber allen anderen Modalen. */ .atrium-pflicht { display: flex; z-index: 100050; } .atrium-pflicht .atrium-modal__backdrop { cursor: default; } .atrium-pflicht .atrium-modal__panel { max-width: 560px; } body.atrium-pflicht-offen { overflow: hidden; } .atrium-pflicht__zaehler { margin: 0 0 10px; font-size: 12px; color: var(--fe-muted); letter-spacing: .04em; } .atrium-pflicht__stufe { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--fe-surface-2); color: var(--fe-text); } .atrium-pflicht__stufe.is-kritisch { background: #b32d2e; color: #fff; } .atrium-pflicht__stufe.is-warnung { background: #a16207; color: #fff; } .atrium-pflicht__titel { margin: 0 0 10px; font-size: 22px; line-height: 1.25; color: var(--fe-text); } .atrium-pflicht__text { font-size: 15px; line-height: 1.6; color: var(--fe-text); } .atrium-pflicht__text p { margin: 0 0 10px; } .atrium-pflicht__msg { margin: 10px 0 0; font-size: 14px; color: #d33; } .atrium-pflicht__akt { margin-top: 18px; } .atrium-pflicht__fuss { margin: 12px 0 0; font-size: 12px; color: var(--fe-muted); } /* ── Kenntnisnahmen: eigenes Modal, eigene Klassen ───────────────────── */ /* Bewusst nicht die atrium-ud__* der Nutzerverwaltung: deren CSS liegt in einer privaten Methode und wird nur bei eigener Berechtigung ausgegeben - genau der Fall „Gebietsleiter darf Kenntnisnahmen, aber nicht Nutzer" wäre dann ungestylt. */ .atrium-acks .atrium-modal__panel { max-width: 760px; } .atrium-acks__titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; } .atrium-acks__h { margin: 0; font-size: 22px; line-height: 1.2; color: var(--fe-text); } .atrium-acks__tag { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fe-surface-2); color: var(--fe-muted); } .atrium-acks__lead { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--fe-muted); } .atrium-acks__sub { font-size: 12px; color: var(--fe-muted); } .atrium-acks__fuss { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--fe-muted); } .atrium-acks__karte > details > summary { cursor: pointer; font-size: 13px; color: var(--fe-text); margin-top: 6px; } /* ── Kenntnisnahmen: Fortschritt je Pflichtmeldung ───────────────────── */ .atrium-acks__karte { padding: 14px 16px; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--fe-line); background: var(--fe-surface); } .atrium-acks__kopf { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; } .atrium-acks__balken { height: 8px; border-radius: 999px; background: var(--fe-surface-2); overflow: hidden; } .atrium-acks__balken i { display: block; height: 100%; background: var(--fe-accent); } .atrium-acks__zahl { margin: 6px 0 0; font-size: 13px; color: var(--fe-muted); } .atrium-acks__fertig { margin: 6px 0 0; font-size: 13px; color: var(--fe-accent); } .atrium-acks__liste { margin: 8px 0 0 18px; list-style: disc; font-size: 14px; } .atrium-acks__liste li { margin-bottom: 2px; } /* ── Fehler melden (v0.183.0) ───────────────────────────────────────────── Unten rechts, über allem, aber zurückhaltend: Der Knopf soll auffindbar sein, wenn man ihn sucht – und nicht ablenken, wenn nicht. */ .atrium-bug__knopf { position: fixed; right: 18px; bottom: 18px; z-index: 9998; width: 46px; height: 46px; display: grid; place-items: center; font-size: 20px; color: #fff; background: rgba(31, 59, 196, .92); border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; cursor: pointer; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55); opacity: .55; transition: opacity .15s, transform .15s; } .atrium-bug__knopf:hover, .atrium-bug__knopf:focus-visible { opacity: 1; transform: translateY(-2px); } @media print { .atrium-bug__knopf { display: none; } } .atrium-bug textarea, .atrium-bug input[type="file"] { width: 100%; } .atrium-bug textarea { padding: 10px 12px; border-radius: 10px; } .atrium-bug label { display: block; margin: 14px 0 5px; font-weight: 600; } .atrium-bug__hinweis { color: var(--fe-muted); } .atrium-bug__klein { margin-top: 6px; font-size: 12.5px; color: var(--fe-muted); } .atrium-bug__aktionen { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .atrium-bug__senden { padding: 10px 18px; font-weight: 600; color: #fff; background: var(--fe-brand, #1f3bc4); border: 0; border-radius: 10px; cursor: pointer; }