/* ============================================================ Room Boom Design — nach DESIGN-GUIDE_ROOMBOOM_19.08.md Maße und Farben sind aus dem Guide übernommen, nicht geschätzt. Die Abschnittsnummern in den Kommentaren verweisen dorthin; wer hier etwas ändert, schlägt dort nach. Bewusste Abweichung (Abschnitt 5.1): Der Kopf trägt kein Suchfeld, keine Benachrichtigungs- und keine Nachrichten-Schaltfläche. Es gibt in diesem Werkzeug nichts zu suchen und nichts zu benachrichtigen, und ein Bedienelement, das nur so aussieht, ist schlimmer als keines. ============================================================ */ /* -- 2.1 Farb-Tokens ------------------------------------------------- */ :root { color-scheme: light; --bg-primary: #EDEDEF; /* App-Fläche */ --bg-secondary: #FFFFFF; /* Karten, Sidebar */ --bg-tertiary: #21212D; /* Elemente auf dunklem Grund */ --bg-quaternary: #15141A; /* Kopf, Fuß, dunkle Knöpfe */ --chart-primary: #C7FC3D; /* Akzent (Grün-Schema) */ --on-accent: #15141A; /* Text AUF der Akzentfarbe */ --chart-line: #D9D9D9; --btn-black: #15141A; --btn-black-hover: #2B283A; --btn-grey: #F0F1F5; --btn-grey-hover: #E3E6EE; --btn-white: #FFFFFF; --btn-white-hover: #F7F8F9; --success: #65C800; --error: #FE3332; --info: #FFDC5F; --font-black: #15141A; /* Primärtext */ --font-grey: #7B85A5; /* Sekundärtext — es gibt keinen dritten Grauwert */ --font-white: #FFFFFF; --font-disabled: #C6CAD6; --footer-link: #C8C8CE; --r-card: 24px; --r-pill: 999px; --r-panel: 20px; --r-eintrag: 12px; --gap-grid: 24px; --pad-card: 24px; --shadow-panel: 0 8px 24px rgba(21, 20, 26, .08); /* Flächen, die im Guide nur im Dark-Mode-Abschnitt (11) benannt sind -- hier als Marke, damit unten keine festen Zahlen stehen. */ --kreis-flaeche: #EDEDEF; /* Icon-Kreise auf Karten */ --zeilen-hover: #F7F7F8; --schraffur: #D9D9D9; } /* -- 11. Dark Mode --------------------------------------------------- */ /* Zwei Wege hinein: die Einstellung des Betriebssystems, oder der Schalter oben rechts. Der Schalter gewinnt, sobald er einmal benutzt wurde (data-thema am ). Der Wertesatz steht zweimal da. Das ist unschön und trotzdem richtig: Ein Selektor innerhalb einer Media Query lässt sich nicht mit einem außerhalb zu einer Regel zusammenfassen, und die Alternative -- eine zweite Ebene aus Variablen, die auf Variablen zeigen -- macht aus einem lesbaren Farbsatz ein Rätsel. Wer hier etwas ändert, ändert es an BEIDEN Stellen; deshalb stehen sie direkt untereinander. Akzent, Badges und Systemfarben bleiben unverändert (Guide 11). */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { color-scheme: dark; --bg-primary: #21212D; --bg-secondary: #15141A; --bg-tertiary: #2B283A; --font-black: #FFFFFF; --font-grey: #C8C8CE; --font-disabled: #7B85A5; --kreis-flaeche: #2B283A; --zeilen-hover: #21212D; --schraffur: #3A3944; --chart-line: #3A3944; --btn-grey: #2B283A; --btn-grey-hover: #3A3944; --btn-white: #21212D; --btn-white-hover: #2B283A; } } :root[data-thema="dunkel"] { color-scheme: dark; --bg-primary: #21212D; --bg-secondary: #15141A; --bg-tertiary: #2B283A; --font-black: #FFFFFF; --font-grey: #C8C8CE; --font-disabled: #7B85A5; --kreis-flaeche: #2B283A; --zeilen-hover: #21212D; --schraffur: #3A3944; --chart-line: #3A3944; --btn-grey: #2B283A; --btn-grey-hover: #3A3944; --btn-white: #21212D; --btn-white-hover: #2B283A; } * { box-sizing: border-box; } /* -- 3. Typografie --------------------------------------------------- */ /* Title H4 ist der Standard-UI-Text: Light 300, 16/24, +1 % Laufweite. */ body { margin: 0; background: var(--bg-primary); color: var(--font-black); font: 300 16px/24px 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: .16px; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; } h1 { font: 500 44px/44px 'Outfit', sans-serif; letter-spacing: -1px; } /* Header H1 */ h2 { font: 400 24px/32px 'Outfit', sans-serif; letter-spacing: 0; } /* Header H6, Kartentitel */ h3 { font: 500 16px/24px 'Outfit', sans-serif; } /* Title H3 */ p { margin: 0; } a { color: var(--font-black); } .leise { color: var(--font-grey); font: 300 16px/24px 'Outfit', sans-serif; } .still { color: var(--font-grey); font: 400 14px/18px 'Outfit', sans-serif; } .stapel { display: flex; flex-direction: column; gap: 12px; } .reihe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } [hidden] { display: none !important; } /* -- 6. Karten ------------------------------------------------------- */ /* Karten haben KEINEN Schatten — die Trennung macht die Flächenfarbe. */ .karte { background: var(--bg-secondary); border-radius: var(--r-card); padding: var(--pad-card); } .karte + .karte { margin-top: var(--gap-grid); } .karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } /* -- 7.3 Inputs ------------------------------------------------------ */ label { display: block; font: 300 12px/16px 'Outfit', sans-serif; color: var(--font-grey); margin-bottom: 6px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; height: 48px; padding: 12px 16px; border: none; border-radius: var(--r-pill); background: var(--btn-grey); color: var(--font-black); font: 300 16px/24px 'Outfit', sans-serif; transition: box-shadow 150ms ease-out; } input:hover:not(:disabled), select:hover:not(:disabled) { box-shadow: 0 0 0 1.5px var(--chart-line); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1.5px var(--font-black); } input::placeholder { color: var(--font-grey); } input:disabled, select:disabled { color: var(--font-disabled); } select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* 7.5 Checkbox: 24×24, kreisrund, gewählt schwarz mit weißem Haken */ input[type="checkbox"] { appearance: none; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--bg-secondary); box-shadow: 0 0 0 1.5px var(--chart-line); cursor: pointer; position: relative; transition: background 150ms ease-out, box-shadow 150ms ease-out; } input[type="checkbox"]:hover { box-shadow: 0 0 0 2px var(--font-black); } input[type="checkbox"]:checked { background: var(--font-black); box-shadow: none; } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--bg-secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="checkbox"]:indeterminate { background: var(--font-black); box-shadow: none; } input[type="checkbox"]:indeterminate::after { content: ""; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; background: var(--bg-secondary); } input[type="checkbox"]:disabled { background: var(--btn-grey-hover); cursor: default; } /* -- 7.1 Buttons ----------------------------------------------------- */ button { font: 300 16px/24px 'Outfit', sans-serif; letter-spacing: .16px; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 12px 20px; border: none; border-radius: var(--r-pill); cursor: pointer; transition: background 150ms ease-out, box-shadow 150ms ease-out; } button:disabled { cursor: default; } .knopf-haupt { background: var(--btn-black); color: var(--font-white); } .knopf-haupt:hover:not(:disabled) { background: var(--btn-black-hover); } .knopf-haupt:active:not(:disabled) { box-shadow: 0 0 0 1.5px var(--font-disabled); } .knopf-haupt:disabled { opacity: .25; } .knopf-still { background: var(--btn-grey); color: var(--font-black); } .knopf-still:hover:not(:disabled) { background: var(--btn-grey-hover); } .knopf-still:active:not(:disabled) { box-shadow: 0 0 0 1.5px var(--font-black); } .knopf-still:disabled { color: #B9BFCE; } /* Auf grauer Fläche steht Weiß statt Grau (Guide 7.1, Hierarchie). */ .knopf-weiss { background: var(--btn-white); color: var(--font-black); } .knopf-weiss:hover:not(:disabled) { background: var(--btn-white-hover); } .knopf-flach { background: none; color: var(--font-black); height: auto; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; } .knopf-flach:hover:not(:disabled) { color: var(--font-grey); } .breit { width: 100%; justify-content: center; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--font-black); } /* -- 7.7 Badges ------------------------------------------------------ */ .pille { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 3px 11px; font: 600 12px/18px 'Outfit', sans-serif; letter-spacing: 0; background: var(--bg-secondary); color: var(--font-grey); box-shadow: 0 0 0 1px var(--chart-line); /* Neutral: weiß mit Ring */ } .pille.gut { background: var(--success); color: #FFFFFF; box-shadow: none; } .pille.warnung { background: var(--info); color: #15141A; box-shadow: none; } .pille.fehler { background: var(--error); color: #FFFFFF; box-shadow: none; } .pille.akzent { background: var(--chart-primary); color: var(--on-accent); box-shadow: none; } /* -- Meldungen ------------------------------------------------------- */ /* Kein eigenes Farbsystem: dieselben drei Systemfarben wie die Badges, als Ring statt als Fläche, damit Fließtext lesbar bleibt (Guide 2.4). */ .meldung { border-radius: var(--r-panel); padding: 14px 18px; font: 300 16px/24px 'Outfit', sans-serif; background: var(--bg-secondary); box-shadow: 0 0 0 1.5px var(--chart-line); } .meldung.fehler { box-shadow: 0 0 0 1.5px var(--error); } .meldung.gut { box-shadow: 0 0 0 1.5px var(--success); } .meldung.warnung { box-shadow: 0 0 0 1.5px var(--info); } /* -- 7.6 Segmented Control ------------------------------------------- */ .segmente { display: inline-flex; height: 48px; padding: 4px; gap: 6px; background: var(--bg-secondary); border-radius: var(--r-card); } .segmente button { height: 40px; padding: 8px 16px; background: none; color: var(--font-black); font-weight: 300; font-size: 15px; border-radius: var(--r-pill); } .segmente button:hover:not([aria-pressed="true"]) { background: var(--btn-grey-hover); } .segmente button[aria-pressed="true"] { background: var(--btn-grey); font-weight: 400; } /* -- 5. Layout-Shell ------------------------------------------------- */ .hülle { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 248px 1fr; grid-template-areas: "kopf kopf" "seite inhalt" "fuss fuss"; } /* 5.1 Kopf — dunkel, Padding 20 24 */ .kopf { grid-area: kopf; background: var(--bg-quaternary); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .marke { display: flex; align-items: center; gap: 12px; } .marke-zeichen { width: 44px; height: 44px; border-radius: 50%; background: var(--chart-primary); color: var(--on-accent); display: grid; place-items: center; font: 500 16px/1 'Outfit', sans-serif; } .marke-text { display: flex; flex-direction: column; } .marke-name { font: 400 16px/20px 'Outfit', sans-serif; color: var(--font-white); } .marke-unter { font: 300 12px/16px 'Outfit', sans-serif; color: var(--font-grey); } /* Avatar-Pille: Höhe 56, r999, bg #21212D */ .konto-pille { display: flex; align-items: center; gap: 12px; height: 56px; padding: 6px 18px 6px 6px; background: var(--bg-tertiary); border-radius: var(--r-pill); } .konto-zeichen { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-quaternary); color: var(--font-white); display: grid; place-items: center; font: 400 16px/1 'Outfit', sans-serif; } .konto-text { display: flex; flex-direction: column; } .konto-name { font: 400 14px/18px 'Outfit', sans-serif; color: var(--font-white); } .konto-rolle { font: 300 12px/16px 'Outfit', sans-serif; color: var(--font-grey); } .konto-pille button { height: 32px; padding: 4px 16px; background: none; color: var(--footer-link); font-size: 14px; } .konto-pille button:hover { background: var(--btn-black-hover); color: var(--font-white); } /* 5.2 Sidebar — 248px, weiß, dockt ohne Abstand an */ .seitenleiste { grid-area: seite; background: var(--bg-secondary); padding: 24px 12px; display: flex; flex-direction: column; gap: 4px; } .nav-eintrag { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; width: 100%; text-align: left; background: none; border-radius: var(--r-card); color: var(--font-black); font: 300 16px/24px 'Outfit', sans-serif; } .nav-eintrag:hover { background: var(--zeilen-hover); } .nav-eintrag[aria-current="page"] { background: var(--bg-primary); font-weight: 400; } .nav-fuss { margin-top: auto; padding: 0 16px; } /* 5.3 Main — grauer Bereich, Padding 24 */ .inhalt { grid-area: inhalt; padding: var(--gap-grid); max-width: 1184px; } .seiten-kopf { margin-bottom: var(--gap-grid); } .seiten-kopf .leise { margin-top: 8px; } /* 5.4 Fuß */ .fuss { grid-area: fuss; background: var(--bg-quaternary); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; font: 300 14px/20px 'Outfit', sans-serif; color: var(--font-grey); } .fuss a { color: var(--footer-link); text-decoration: none; margin-right: 28px; } .fuss a:hover { color: var(--font-white); } @media (max-width: 1119px) { .hülle { grid-template-columns: 1fr; grid-template-areas: "kopf" "seite" "inhalt" "fuss"; } .seitenleiste { flex-direction: row; overflow-x: auto; padding: 12px; gap: 6px; } .nav-eintrag { width: auto; white-space: nowrap; } .nav-fuss { display: none; } } @media (max-width: 767px) { .kopf { flex-direction: column; align-items: flex-start; gap: 16px; } .inhalt { padding: 16px; } h1 { font-size: 32px; line-height: 36px; } } /* -- 9. Tabellen ----------------------------------------------------- */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font: 300 12px/16px 'Outfit', sans-serif; color: var(--font-grey); padding: 12px 16px; } td { padding: 14px 16px; border-top: 1px solid var(--bg-primary); font: 300 14px/20px 'Outfit', sans-serif; } tbody tr:hover td { background: var(--zeilen-hover); } tbody tr:hover td:first-child { border-top-left-radius: 16px; border-bottom-left-radius: 16px; } tbody tr:hover td:last-child { border-top-right-radius: 16px; border-bottom-right-radius: 16px; } .betrag { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .leerstelle { padding: 32px 16px; color: var(--font-grey); text-align: center; } /* -- Anmeldeseite ---------------------------------------------------- */ .anmelde-mitte { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .anmelde-karte { width: 100%; max-width: 420px; } .anmelde-karte .marke { margin-bottom: 24px; } .anmelde-karte .marke-name { color: var(--font-black); font-size: 18px; } .anmelde-karte .marke-unter { color: var(--font-grey); } /* -- Schritte der Einrichtung ---------------------------------------- */ .schritt { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--bg-primary); } .schritt:first-of-type { border-top: none; } .schritt-nr { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--kreis-flaeche); color: var(--font-black); display: grid; place-items: center; font: 400 16px/1 'Outfit', sans-serif; } .schritt.fertig .schritt-nr { background: var(--chart-primary); color: var(--on-accent); } /* -- Regelformulare -------------------------------------------------- */ /* Viele kleine Felder in einer Zeile. Ein Feld pro Zeile wäre ruhiger, aber eine Last-Minute-Staffel mit sechs Stufen füllte zwei Bildschirme, und was zusammen gilt, stünde nicht mehr beieinander. */ .feld-gitter { display: flex; flex-wrap: wrap; gap: 16px; } .feld { flex: 1 1 180px; min-width: 150px; } .feld.eng { flex: 0 1 130px; } .feld.kurz { flex: 0 1 108px; } .feld.weit { flex: 2 1 260px; } .feld.haken { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; align-self: flex-end; height: 48px; } .feld.haken label { margin: 0; color: var(--font-black); font-size: 16px; white-space: nowrap; } .abschnitt { margin: 28px 0 8px; font: 400 21px/28px 'Outfit', sans-serif; /* Header H7, Kartentitel klein */ color: var(--font-black); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .abschnitt-hinweis { color: var(--font-grey); font: 300 16px/24px 'Outfit', sans-serif; margin-bottom: 14px; } /* Wiederholbare Zeilen (Events, Stufen, Sperren) */ .zeilen { display: flex; flex-direction: column; gap: 12px; } .zeile { position: relative; display: flex; flex-wrap: wrap; gap: 16px; background: var(--bg-primary); border-radius: var(--r-panel); padding: 18px 56px 18px 18px; } /* 7.2 IconButton: Kreis 32, ⊗ = löschen/leeren (Guide 10) */ .zeile-weg { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--bg-secondary); color: var(--font-grey); display: grid; place-items: center; font-size: 16px; } .zeile-weg:hover { background: var(--error); color: var(--font-white); } .zeile-neu { align-self: flex-start; background: var(--btn-grey); color: var(--font-black); height: 40px; padding: 8px 16px; } .zeile-neu:hover { background: var(--btn-grey-hover); } .nichts-da { color: var(--font-grey); font-size: 14px; padding: 8px 0; } /* Monatsfaktoren */ .monats-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; } .monats-blick { font: 400 12px/16px 'Outfit', sans-serif; color: var(--font-grey); margin-top: 6px; min-height: 16px; } .monats-blick.zu-hoch { color: var(--error); } input.zu-hoch { box-shadow: 0 0 0 1.5px var(--error); } .feiertag-blick { font: 400 12px/16px 'Outfit', sans-serif; color: var(--font-grey); margin-top: 6px; } /* Tagesstaffel eines mehrtägigen Feiertags */ .tage-staffel { flex: 1 1 100%; border-top: 1px solid var(--chart-line); padding-top: 16px; } .tage-kopf { font: 400 14px/20px 'Outfit', sans-serif; color: var(--font-black); margin-bottom: 10px; } .tage-kopf span { color: var(--font-grey); font-weight: 300; } .tag-zeile { display: flex; align-items: flex-end; gap: 16px; padding: 6px 0; flex-wrap: wrap; } .tag-datum { font: 400 14px/20px 'Outfit', sans-serif; color: var(--font-grey); min-width: 130px; padding-bottom: 12px; } .tage-hinweis { font: 300 14px/20px 'Outfit', sans-serif; color: var(--font-grey); margin-top: 8px; } /* Aufklappbare Gruppenkarte */ .klapp-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: auto; padding: 0; background: none; text-align: left; } .klapp-pfeil { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--kreis-flaeche); display: grid; place-items: center; font-size: 11px; color: var(--font-black); transition: transform 250ms cubic-bezier(.2, 0, 0, 1); } .karte.offen .klapp-pfeil { transform: rotate(180deg); } .klapp-inhalt { display: none; margin-top: 16px; } .karte.offen .klapp-inhalt { display: block; } .karten-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bg-primary); } .knopf-gefahr { background: var(--btn-grey); color: var(--error); } .knopf-gefahr:hover:not(:disabled) { background: var(--error); color: var(--font-white); } /* Abweichung je Unterkunft: sichtbar, aber nur bei gesetztem Schalter bedienbar. Ausblenden wäre kürzer — dann sieht man aber nicht, wovon man gerade nicht abweicht. */ .abweich-schalter { display: flex; align-items: center; gap: 8px; font: 300 16px/24px 'Outfit', sans-serif; color: var(--font-grey); } .geerbt { opacity: .4; pointer-events: none; } /* -- Fenster (schwebendes Panel: einziger Schatten im System) --------- */ .fenster-grund { position: fixed; inset: 0; background: rgba(21, 20, 26, .5); display: grid; place-items: center; padding: 24px; z-index: 40; } .fenster { background: var(--bg-secondary); border-radius: var(--r-card); box-shadow: var(--shadow-panel); width: 100%; max-width: 900px; max-height: 88dvh; display: flex; flex-direction: column; } .fenster-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: var(--pad-card) var(--pad-card) 16px; } .fenster-koerper { padding: 0 var(--pad-card) var(--pad-card); overflow-y: auto; } .fenster-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px var(--pad-card); border-top: 1px solid var(--bg-primary); } .fenster-zu { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--kreis-flaeche); color: var(--font-black); display: grid; place-items: center; } .fenster-zu:hover { background: var(--btn-grey-hover); } /* -- Vorschläge ------------------------------------------------------ */ /* Der Zähler in der Seitenleiste ist der einzige Grund, diese Anwendung täglich zu öffnen — deshalb in der Akzentfarbe (Guide 2: Akzent markiert, was zählt). */ .zaehler { margin-left: auto; background: var(--chart-primary); color: var(--on-accent); border-radius: var(--r-pill); padding: 3px 11px; font: 600 12px/18px 'Outfit', sans-serif; } .delta { font-variant-numeric: tabular-nums; white-space: nowrap; } .delta.hoch { color: var(--success); } .delta.runter { color: var(--error); } .preis-alt { color: var(--font-grey); } .preis-neu { font-weight: 600; } /* -- Anleitung ------------------------------------------------------- */ /* Eigene Textmaße: der Rest der Anwendung ist Formular, das hier ist zum Lesen. Zeilen über etwa 75 Zeichen verliert das Auge beim Umbruch. */ .anleitung { max-width: 70ch; } .anleitung h2 { margin-top: 40px; scroll-margin-top: 24px; } .anleitung h3 { margin-top: 24px; font: 500 18px/24px 'Outfit', sans-serif; } .anleitung p, .anleitung ul, .anleitung ol { margin-top: 12px; } .anleitung ul, .anleitung ol { padding-left: 24px; } .anleitung li { margin-top: 8px; } .anleitung li > ul { margin-top: 8px; } .anleitung code { background: var(--bg-primary); border-radius: 8px; padding: 2px 8px; font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .anleitung td:first-child { white-space: nowrap; } .inhalt-verzeichnis { display: flex; flex-direction: column; gap: 6px; } .inhalt-verzeichnis a { text-decoration: none; } .inhalt-verzeichnis a:hover { text-decoration: underline; } .merk { border-radius: var(--r-panel); background: var(--bg-primary); padding: 16px 20px; margin-top: 16px; box-shadow: 0 0 0 1.5px var(--chart-primary); } .merk.warnung { box-shadow: 0 0 0 1.5px var(--info); } .rechenbeispiel td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } @media print { .seitenleiste, .kopf, .fuss, .drucken-weg { display: none !important; } .hülle { grid-template-columns: 1fr; grid-template-areas: "inhalt"; } .inhalt { padding: 0; max-width: none; } .anleitung { max-width: none; } .karte { padding: 0; } } /* -- Kalender -------------------------------------------------------- */ /* Sieben Spalten, Montag zuerst. Die Zelle trägt drei Angaben: Tag, Preis, Mindestnächte — mehr passt nicht hinein, ohne unlesbar zu werden, und mehr braucht der Überblick auch nicht. */ .kal-kopf, .kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .kal-kopf { margin-bottom: 8px; font: 300 12px/16px 'Outfit', sans-serif; color: var(--font-grey); } .kal-kopf span { padding-left: 4px; } .kal-leer { min-height: 78px; } .kal-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; min-height: 78px; padding: 10px 12px; border-radius: var(--r-eintrag); background: var(--bg-primary); color: var(--font-black); text-align: left; } .kal-tag:disabled { opacity: .4; } .kal-tag:not(:disabled):hover { box-shadow: 0 0 0 1.5px var(--font-black); } .kal-nr { font: 300 12px/16px 'Outfit', sans-serif; color: var(--font-grey); } .kal-preis { font: 500 16px/22px 'Outfit', sans-serif; font-variant-numeric: tabular-nums; } .kal-naechte { font: 300 12px/14px 'Outfit', sans-serif; color: var(--font-grey); } .kal-tag.we .kal-nr { color: var(--font-black); } .kal-tag.heute { box-shadow: 0 0 0 1.5px var(--font-black); } /* Zustand als linke Kante statt als Flächenfarbe: Die Fläche gehört dem Preis, und fünf Vollflächen nebeneinander ergäben ein Muster, in dem man den Preis nicht mehr liest. */ .kal-tag.regel { box-shadow: inset 3px 0 0 var(--chart-line); } .kal-tag.vorschlag { box-shadow: inset 3px 0 0 var(--chart-primary); background: var(--bg-secondary); } .kal-tag.gebucht { background: repeating-linear-gradient(45deg, var(--schraffur) 0 1.5px, var(--bg-primary) 1.5px 6px); } .kal-tag.vonhand { box-shadow: inset 3px 0 0 var(--info); background: var(--bg-secondary); } .kal-tag.manuell { box-shadow: inset 3px 0 0 var(--font-black); background: var(--bg-secondary); } .kal-tag.abgelehnt { box-shadow: inset 3px 0 0 var(--error); } .kal-tag.heute.regel, .kal-tag.heute.vorschlag, .kal-tag.heute.vonhand, .kal-tag.heute.manuell, .kal-tag.heute.abgelehnt { outline: 1.5px solid var(--font-black); } .kal-punkt { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--chart-line); } .kal-punkt.vorschlag { background: var(--chart-primary); } .kal-punkt.gebucht { background: repeating-linear-gradient(45deg, var(--schraffur) 0 1.5px, var(--bg-primary) 1.5px 6px); } .kal-punkt.vonhand { background: var(--info); } .kal-punkt.manuell { background: var(--font-black); } .kal-legende { font: 300 14px/20px 'Outfit', sans-serif; color: var(--font-grey); } @media (max-width: 700px) { .kal-tag { min-height: 64px; padding: 8px; } .kal-preis { font-size: 14px; } } /* -- 7.5 Switcher: Hell/Dunkel --------------------------------------- */ /* Track 44×24, Knopf innen — Maße aus dem Guide. Sitzt im dunklen Kopf, deshalb ist der Track dort hell genug, um als Schalter erkennbar zu sein, ohne die Aufmerksamkeit zu ziehen. */ .thema-schalter { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; background: var(--bg-tertiary); border-radius: var(--r-pill); cursor: pointer; } .thema-schalter > span { font: 300 14px/18px 'Outfit', sans-serif; color: var(--font-grey); margin: 0; white-space: nowrap; } .thema-gleis { position: relative; width: 44px; height: 24px; flex: none; border-radius: var(--r-pill); background: transparent; box-shadow: inset 0 0 0 1.5px #7B85A5; transition: background 150ms ease-out, box-shadow 150ms ease-out; } .thema-knopf { position: absolute; top: 6px; left: 6px; width: 12px; height: 12px; border-radius: 4px; background: #FFFFFF; transition: all 150ms ease-out; } .thema-schalter input { position: absolute; opacity: 0; pointer-events: none; } .thema-schalter input:checked + .thema-gleis { background: var(--chart-primary); box-shadow: none; } .thema-schalter input:checked + .thema-gleis .thema-knopf { left: 24px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-quaternary); } .thema-schalter:hover .thema-gleis { box-shadow: inset 0 0 0 2px #FFFFFF; } .thema-schalter:hover input:checked + .thema-gleis { box-shadow: none; } .thema-schalter input:focus-visible + .thema-gleis { box-shadow: 0 0 0 2px #FFFFFF; } /* -- Übersicht: drei Karten nebeneinander ---------------------------- */ /* Guide 6: 12 Spalten, Gutter 24. Drei gleich hohe Karten in einer Zeile, darunter der Kalender über die volle Breite. */ .karten-zeile { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); align-items: stretch; } .karten-zeile > .karte { margin-top: 0; display: flex; flex-direction: column; } .karten-zeile > .karte > .karten-schluss { margin-top: auto; padding-top: 16px; } @media (max-width: 1280px) { .karten-zeile { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .karten-zeile { grid-template-columns: 1fr; } } /* -- Anleitung als aufklappbare Karten ------------------------------- */ .anleitung-karte { margin-top: 12px; padding: 0; overflow: hidden; } .anleitung-karte:first-of-type { margin-top: 0; } .anleitung-kopf { display: flex; align-items: center; gap: 16px; width: 100%; height: auto; padding: 20px 24px; background: none; text-align: left; border-radius: var(--r-card); } .anleitung-kopf:hover { background: var(--zeilen-hover); } .anleitung-nr { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--kreis-flaeche); color: var(--font-black); display: grid; place-items: center; font: 500 16px/1 'Outfit', sans-serif; } .anleitung-karte.offen .anleitung-nr { background: var(--chart-primary); color: var(--on-accent); } .anleitung-titel { font: 400 21px/28px 'Outfit', sans-serif; flex: 1; } .anleitung-unter { font: 300 14px/20px 'Outfit', sans-serif; color: var(--font-grey); } .anleitung-karte .klapp-pfeil { flex: none; } .anleitung-karte.offen .klapp-pfeil { transform: rotate(180deg); } .anleitung-koerper { display: none; padding: 0 24px 24px 80px; } .anleitung-karte.offen .anleitung-koerper { display: block; } .anleitung-koerper > :first-child { margin-top: 0; } @media (max-width: 700px) { .anleitung-koerper { padding-left: 24px; } .anleitung-titel { font-size: 18px; line-height: 24px; } } /* -- Anleitungsvideo -------------------------------------------------- */ .video-karte { padding: 0; overflow: hidden; } .video-karte video { display: block; width: 100%; height: auto; background: var(--bg-quaternary); } .video-text { padding: 20px 24px; }