/* ========================================================================== ORDiVO - single stylesheet. Served by the application itself (never a CDN), so the Content-Security-Policy can stay at style-src 'self' and the page can never render unstyled because a third-party host was unreachable. Two skins share one set of tokens: body.oeffentlich - the dark marketing site body.anwendung - the application shell, in one of three Darstellungen Die Anwendung kennt drei Darstellungen, gesetzt als data-theme auf : dunkel ORDiVO-Standard: fast schwarz mit gruenlichem Unterton, gruener Akzent, Berge im Nachtlicht hell weiss und hellgrau, blauer Akzent statt gruen, dieselben Berge bei Tag system folgt dem Betriebssystem Die Informationsarchitektur ist in allen dreien dieselbe. Umgeschaltet werden ausschliesslich die Werte unten - keine Regel weiter unten in dieser Datei darf deshalb eine Farbe fest einschreiben, sonst bleibt sie im dunklen Thema ein heller Fleck. Ausnahmen sind bewusst: Logos, Etiketten und QR-Codes stehen immer auf Weiss, weil sie gedruckt oder gescannt werden. :root traegt die helle Belegung. Die oeffentliche Website setzt kein data-theme und sieht damit genau so aus wie bisher. ========================================================================== */ :root { --akzent: #1f7aff; --akzent-tief: #0f5ad1; --akzent-hell: #6aa8ff; --akzent-text: #ffffff; --akzent-flaeche: #e7f0ff; --akzent-rand: #b9d3fb; --akzent-ring: rgba(31, 122, 255, .16); --ok: #17936a; --ok-flaeche: #dff5ec; --ok-rand: #bde5d5; --warn: #b26a00; --warn-flaeche: #fdf0d8; --warn-rand: #f0dcb4; --bad: #c8362f; --bad-flaeche: #fbe4e2; --bad-rand: #f2c4c0; --bad-tief: #8a1e19; --info: #1f6fd0; --info-flaeche: #e2edfd; --info-rand: #c9dcf7; --text: #101828; --text-leise: #5a6478; --text-schwach: #8b95a7; --grund: #f4f6fa; --flaeche: #ffffff; --flaeche-2: #f7f9fc; --flaeche-3: #eef2f8; --rand: #e3e8f0; --rand-stark: #c9d3e2; --glas: rgba(255, 255, 255, .94); --eingabe: #ffffff; --favorit: #d99a00; --favorit-flaeche: #fff4d6; --tooltip-grund: #0c1220; --tooltip-text: #e8edf6; --diagramm-ein: var(--akzent); --diagramm-aus: #b9c3d3; --gitterlinie: #edf1f6; /* Seitenleiste der Anwendung */ --leiste-grund: #ffffff; --leiste-rand: #e3e8f0; --leiste-text: #344054; --leiste-leise: #7a8499; --leiste-aktiv: #e7f0ff; --leiste-aktiv-text: #0f5ad1; --berg-rechts: image-set(url("/img/berge/berg-rechts-hell-640.webp") 1x, url("/img/berge/berg-rechts-hell-1280.webp") 2x); --berg-links: url("/img/berge/berg-links-hell-720.webp"); --berg-schleier: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .92) 38%, rgba(255, 255, 255, .15) 72%, rgba(255, 255, 255, 0) 100%); --dunkel: #0c1220; --dunkel-2: #121b2c; --dunkel-rand: #1e2a40; --dunkel-text: #e8edf6; --dunkel-leise: #97a3ba; --radius: 12px; --radius-gross: 18px; --schatten: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06); --schatten-hoch: 0 12px 40px rgba(16, 24, 40, .14); --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-zahl: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* --- ORDiVO Dunkel --------------------------------------------------------- Nicht reines Schwarz: ein Grund mit gruenem Unterton wirkt tiefer und ruhiger, und die Karten heben sich in Stufen davon ab statt durch harte Kanten. Gruen traegt die Interaktion; Rot, Bernstein und Blau bleiben den Zustaenden vorbehalten. Die Farbstufen der Zustaende sind transparent, damit eine rote Markierung auf jeder Kartenstufe gleich stark wirkt. */ html[data-theme="dunkel"] { color-scheme: dark; --akzent: #3ddc84; --akzent-tief: #2bc46f; --akzent-hell: #7cebab; --akzent-text: #03140a; --akzent-flaeche: rgba(61, 220, 132, .12); --akzent-rand: rgba(61, 220, 132, .38); --akzent-ring: rgba(61, 220, 132, .26); --ok: #3ddc84; --ok-flaeche: rgba(61, 220, 132, .12); --ok-rand: rgba(61, 220, 132, .38); --warn: #f5b841; --warn-flaeche: rgba(245, 184, 65, .12); --warn-rand: rgba(245, 184, 65, .42); --bad: #f2605f; --bad-flaeche: rgba(242, 96, 95, .13); --bad-rand: rgba(242, 96, 95, .45); --bad-tief: #b8322f; --info: #62a8ff; --info-flaeche: rgba(98, 168, 255, .13); --info-rand: rgba(98, 168, 255, .42); --text: #edf3ef; --text-leise: #98a79f; --text-schwach: #68776f; --grund: #060a08; --flaeche: #0d1310; --flaeche-2: #111915; --flaeche-3: #17211c; --rand: #1d2822; --rand-stark: #2c3b33; --glas: rgba(11, 16, 13, .92); --eingabe: #0a100d; --favorit: #f5b841; --favorit-flaeche: rgba(245, 184, 65, .15); --tooltip-grund: #1c2621; --tooltip-text: #edf3ef; --diagramm-ein: #3ddc84; --diagramm-aus: #75827b; --gitterlinie: rgba(255, 255, 255, .06); --leiste-grund: #080c0a; --leiste-rand: #161f1a; --leiste-text: #cfd9d3; --leiste-leise: #7b8a82; --leiste-aktiv: rgba(61, 220, 132, .13); --leiste-aktiv-text: #ffffff; --berg-rechts: image-set(url("/img/berge/berg-rechts-dunkel-640.webp") 1x, url("/img/berge/berg-rechts-dunkel-1280.webp") 2x); --berg-links: url("/img/berge/berg-links-dunkel-720.webp"); --berg-schleier: linear-gradient(90deg, #0d1310 0%, rgba(13, 19, 16, .9) 36%, rgba(13, 19, 16, .2) 70%, rgba(13, 19, 16, 0) 100%); --schatten: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 10px 30px rgba(0, 0, 0, .35); --schatten-hoch: 0 18px 50px rgba(0, 0, 0, .6); } /* Dieselbe Belegung fuer "system", wenn das Betriebssystem dunkel ist. Die Wiederholung ist gewollt: reines CSS kennt keine Mixins, und eine Laufzeitloesung per Skript liesse die Seite beim Laden kurz hell blitzen. */ @media (prefers-color-scheme: dark) { html[data-theme="system"] { color-scheme: dark; --akzent: #3ddc84; --akzent-tief: #2bc46f; --akzent-hell: #7cebab; --akzent-text: #03140a; --akzent-flaeche: rgba(61, 220, 132, .12); --akzent-rand: rgba(61, 220, 132, .38); --akzent-ring: rgba(61, 220, 132, .26); --ok: #3ddc84; --ok-flaeche: rgba(61, 220, 132, .12); --ok-rand: rgba(61, 220, 132, .38); --warn: #f5b841; --warn-flaeche: rgba(245, 184, 65, .12); --warn-rand: rgba(245, 184, 65, .42); --bad: #f2605f; --bad-flaeche: rgba(242, 96, 95, .13); --bad-rand: rgba(242, 96, 95, .45); --bad-tief: #b8322f; --info: #62a8ff; --info-flaeche: rgba(98, 168, 255, .13); --info-rand: rgba(98, 168, 255, .42); --text: #edf3ef; --text-leise: #98a79f; --text-schwach: #68776f; --grund: #060a08; --flaeche: #0d1310; --flaeche-2: #111915; --flaeche-3: #17211c; --rand: #1d2822; --rand-stark: #2c3b33; --glas: rgba(11, 16, 13, .92); --eingabe: #0a100d; --favorit: #f5b841; --favorit-flaeche: rgba(245, 184, 65, .15); --tooltip-grund: #1c2621; --tooltip-text: #edf3ef; --diagramm-ein: #3ddc84; --diagramm-aus: #75827b; --gitterlinie: rgba(255, 255, 255, .06); --leiste-grund: #080c0a; --leiste-rand: #161f1a; --leiste-text: #cfd9d3; --leiste-leise: #7b8a82; --leiste-aktiv: rgba(61, 220, 132, .13); --leiste-aktiv-text: #ffffff; --berg-rechts: image-set(url("/img/berge/berg-rechts-dunkel-640.webp") 1x, url("/img/berge/berg-rechts-dunkel-1280.webp") 2x); --berg-links: url("/img/berge/berg-links-dunkel-720.webp"); --berg-schleier: linear-gradient(90deg, #0d1310 0%, rgba(13, 19, 16, .9) 36%, rgba(13, 19, 16, .2) 70%, rgba(13, 19, 16, 0) 100%); --schatten: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 10px 30px rgba(0, 0, 0, .35); --schatten-hoch: 0 18px 50px rgba(0, 0, 0, .6); } } html[data-theme="hell"] { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 16px/1.6 var(--schrift); color: var(--text); background: var(--grund); } h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5rem; letter-spacing: -.015em; } h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); } h2 { font-size: 1.18rem; } h3 { font-size: 1rem; } p { margin: 0 0 1rem; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; } .muted { color: var(--text-leise); } .num { font-variant-numeric: tabular-nums; font-family: var(--schrift-zahl); font-size: .93em; } .wrap { width: min(1240px, 100% - 3rem); margin-inline: auto; } .is-right { text-align: right; } .visuell-versteckt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--akzent); color: var(--akzent-text); padding: .7rem 1.1rem; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 2px; border-radius: 6px; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1.1rem; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .94rem; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .05s; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--akzent); color: var(--akzent-text); } .btn--primary:hover { background: var(--akzent-tief); } .btn--sekundaer { background: var(--flaeche); color: var(--text); border-color: var(--rand-stark); } .btn--sekundaer:hover { border-color: var(--akzent-rand); } .btn--geist { background: transparent; color: inherit; border-color: currentColor; opacity: .85; } .btn--geist:hover { opacity: 1; } .btn--gefahr { background: var(--bad-flaeche); color: var(--bad); border-color: var(--bad-rand); } .btn--klein { padding: .38rem .7rem; font-size: .85rem; border-radius: 8px; } /* -------------------------------------------------------------------------- Public site - header, hero, footer -------------------------------------------------------------------------- */ body.oeffentlich { background: var(--dunkel); color: var(--dunkel-text); } .kopf { position: sticky; top: 0; z-index: 40; background: rgba(12, 18, 32, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dunkel-rand); } .kopf__innen { display: flex; align-items: center; gap: 1.6rem; min-height: 74px; } .marke { display: inline-flex; align-items: center; gap: .65rem; color: inherit; } .marke:hover { text-decoration: none; } .marke__text { display: grid; } .marke strong { font-size: 1.3rem; letter-spacing: -.03em; font-weight: 800; } .marke em { font-style: normal; color: var(--akzent-hell); } .marke small { font-size: .64rem; letter-spacing: .06em; color: var(--dunkel-leise); text-transform: none; } .kopf__nav { display: flex; gap: 1.5rem; margin-left: 1rem; flex: 1; } .kopf__nav a { color: var(--dunkel-text); font-weight: 500; font-size: .95rem; opacity: .85; } .kopf__nav a:hover, .kopf__nav a.is-aktiv { opacity: 1; text-decoration: none; color: #fff; } .kopf__nav a.is-aktiv { box-shadow: inset 0 -2px 0 var(--akzent); } .kopf__aktionen { display: flex; align-items: center; gap: .7rem; } .land { display: inline-flex; align-items: center; gap: .35rem; color: var(--dunkel-leise); font-size: .85rem; } .held { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0 0; overflow: hidden; } .held::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%; background: radial-gradient(60% 60% at 30% 40%, rgba(31, 122, 255, .22), transparent 70%); pointer-events: none; } .held__innen { position: relative; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 980px) { .held__innen { grid-template-columns: 1.05fr .95fr; align-items: center; } } .held__auge { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--akzent-hell); margin-bottom: 1rem; } .held h1 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4rem); font-weight: 800; letter-spacing: -.035em; } .held h1 .blau { color: var(--akzent-hell); display: block; } .held__lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: var(--dunkel-leise); max-width: 34rem; } .held__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.6rem; } .haken { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; padding: 0; margin: 0; list-style: none; } .haken li { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--dunkel-text); } .haken svg { color: var(--akzent-hell); flex: none; } /* The product screenshot mock in the hero */ .mock { border-radius: 14px; border: 1px solid var(--dunkel-rand); overflow: hidden; background: #fff; color: var(--text); box-shadow: var(--schatten-hoch); } .mock__leiste { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: #f1f4f9; border-bottom: 1px solid var(--rand); } .mock__punkt { width: 10px; height: 10px; border-radius: 50%; background: #d3dae6; } .mock__koerper { display: grid; grid-template-columns: 132px 1fr; min-height: 300px; } .mock__nav { background: #0f1724; padding: .9rem .7rem; display: grid; gap: .28rem; align-content: start; } .mock__nav span { color: #93a2ba; font-size: .72rem; padding: .32rem .5rem; border-radius: 6px; } .mock__nav span.an { background: rgba(31, 122, 255, .18); color: #cfe0ff; } .mock__seite { padding: 1rem; display: grid; gap: .8rem; align-content: start; } .mock__kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } .mock__kachel { border: 1px solid var(--rand); border-radius: 9px; padding: .5rem .55rem; } .mock__kachel b { display: block; font-size: 1.05rem; } .mock__kachel small { color: var(--text-leise); font-size: .62rem; } .mock__kachel.blau b { color: var(--akzent); } .mock__kachel.rot b { color: var(--bad); } .mock__kachel.gruen b { color: var(--ok); } .streifen { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); background: var(--flaeche); color: var(--text); border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .streifen > div { padding: 1.3rem 1rem; text-align: center; border-right: 1px solid var(--rand); } .streifen > div:last-child { border-right: 0; } .streifen svg { color: var(--akzent); } .streifen b { display: block; margin-top: .4rem; font-size: .92rem; } .streifen small { color: var(--text-leise); font-size: .76rem; } .abschnitt { padding: clamp(3rem, 6vw, 5rem) 0; } .abschnitt--hell { background: var(--flaeche); color: var(--text); } .abschnitt--grund { background: var(--grund); color: var(--text); } .raster { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .merkmal { display: flex; gap: .9rem; align-items: flex-start; } .merkmal__kreis { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--info-flaeche); color: var(--akzent); } .merkmal b { display: block; } .merkmal p { margin: .15rem 0 0; color: var(--text-leise); font-size: .93rem; } .preis-raster { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: start; } .preis { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross); padding: 1.6rem; box-shadow: var(--schatten); color: var(--text); } .preis--empfohlen { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(31, 122, 255, .14), var(--schatten); } .preis__marke { display: inline-block; background: var(--info-flaeche); color: var(--akzent-tief); font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .6rem; } .preis__betrag { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; } .preis__betrag small { font-size: .85rem; font-weight: 500; color: var(--text-leise); } .preis ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: .5rem; } .preis li { display: flex; gap: .5rem; align-items: flex-start; font-size: .93rem; } .preis li svg { color: var(--ok); flex: none; margin-top: .15rem; } .fuss { background: var(--dunkel-2); border-top: 1px solid var(--dunkel-rand); padding: 3rem 0 1.5rem; color: var(--dunkel-leise); } .fuss__innen { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 860px) { .fuss__innen { grid-template-columns: 1.4fr 2fr; } } .fuss__marke p { max-width: 30rem; font-size: .92rem; } .fuss__ch { display: flex; align-items: center; gap: .5rem; } .fuss__spalten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .fuss__spalten h3 { color: var(--dunkel-text); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; } .fuss__spalten a { display: block; color: var(--dunkel-leise); font-size: .92rem; padding: .18rem 0; } .fuss__spalten a:hover { color: #fff; } .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--dunkel-rand); font-size: .85rem; } /* -------------------------------------------------------------------------- Auth pages -------------------------------------------------------------------------- */ .tor { min-height: 100vh; display: grid; place-items: center; padding: 2.5rem 1.25rem; } .tor__karte { width: min(460px, 100%); background: var(--flaeche); color: var(--text); border-radius: var(--radius-gross); padding: 2.2rem; box-shadow: var(--schatten-hoch); } .tor__karte h1 { font-size: 1.55rem; } .tor__marke { display: flex; justify-content: center; margin-bottom: 1.2rem; } .tor__wechsel { margin-top: 1.4rem; text-align: center; font-size: .92rem; color: var(--text-leise); } /* -------------------------------------------------------------------------- Application shell -------------------------------------------------------------------------- */ /* Die Huelle der Anwendung folgt dem Referenzbild der Uebersicht: links eine ruhige Leiste mit den Geschaeftsbereichen, oben nur Suche und das Persoen- liche, dazwischen die Seite. Die Leiste ist nach Bereichen gegliedert und jede Gruppe laesst sich zuklappen - wer nie ins Lager schaut, muss es auch nicht jeden Tag vor Augen haben. Was das Abonnement nicht enthaelt, steht gar nicht erst darin (layout.js), statt als lange graue Liste. */ body.anwendung { background: var(--grund-bild, none) no-repeat, var(--grund); background-attachment: fixed; color: var(--text); } html[data-theme="dunkel"] { --grund-bild: radial-gradient(1100px 620px at 12% -8%, rgba(61, 220, 132, .055), transparent 62%); } @media (prefers-color-scheme: dark) { html[data-theme="system"] { --grund-bild: radial-gradient(1100px 620px at 12% -8%, rgba(61, 220, 132, .055), transparent 62%); } } .huelle { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; } body.leiste-kompakt .huelle { grid-template-columns: 76px minmax(0, 1fr); } @media (max-width: 980px) { .huelle, body.leiste-kompakt .huelle { grid-template-columns: minmax(0, 1fr); } } .seitenleiste { background: var(--leiste-grund); color: var(--leiste-text); border-right: 1px solid var(--leiste-rand); padding: 1.15rem .8rem .9rem; display: flex; flex-direction: column; gap: .9rem; position: sticky; top: 0; height: 100vh; overflow: hidden; } .marke--app { display: flex; align-items: center; gap: .65rem; padding: .1rem .35rem .5rem; color: var(--text); } .marke--app:hover { text-decoration: none; } .marke--app .marke__zeichen { color: var(--akzent); flex: none; display: grid; } .marke--app strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; } .marke--app em { font-style: normal; color: var(--akzent); } .marke--app small { display: block; margin-top: .3rem; font-size: .74rem; line-height: 1.35; letter-spacing: 0; color: var(--leiste-leise); } .seitenleiste nav { display: grid; gap: .05rem; align-content: start; /* Nur die Navigation scrollt. Marke oben und Fuss unten (Bergkarte, Hilfe, Einklappen) bleiben stehen - wie im Referenzbild, auch wenn ein Plan mit vielen Bereichen mehr Eintraege hat, als in die Hoehe passen. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-inline: -.3rem; padding-inline: .3rem; } .navgruppe { display: grid; gap: .05rem; margin-top: .35rem; } .navgruppe > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; padding: .28rem .65rem .22rem; border-radius: 7px; font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leiste-leise); } .navgruppe > summary::-webkit-details-marker { display: none; } .navgruppe > summary::after { content: ""; width: .38rem; height: .38rem; margin-right: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0; transition: opacity .15s, transform .15s; } .navgruppe > summary:hover { color: var(--leiste-text); } .navgruppe > summary:hover::after, .navgruppe > summary:focus-visible::after { opacity: .8; } .navgruppe:not([open]) > summary::after { transform: rotate(-45deg); opacity: .8; } .seitenleiste nav a { position: relative; display: flex; align-items: center; gap: .75rem; padding: .4rem .65rem; border-radius: 9px; color: var(--leiste-text); font-size: .93rem; font-weight: 500; line-height: 1.45; } .seitenleiste nav a svg { flex: none; color: var(--leiste-leise); transition: color .15s; } .seitenleiste nav a:hover { background: color-mix(in srgb, var(--leiste-text) 7%, transparent); text-decoration: none; } .seitenleiste nav a:hover svg { color: var(--leiste-text); } .seitenleiste nav a.is-aktiv { background: var(--leiste-aktiv); color: var(--leiste-aktiv-text); font-weight: 650; box-shadow: inset 0 0 0 1px var(--akzent-rand); } .seitenleiste nav a.is-aktiv svg { color: var(--akzent); } .seitenleiste .zahl { margin-left: auto; background: var(--akzent); color: var(--akzent-text); font-style: normal; font-size: .7rem; font-weight: 700; padding: .05rem .42rem; border-radius: 999px; } .seitenleiste__fuss { flex: none; display: grid; gap: .6rem; padding-top: .6rem; font-size: .82rem; border-top: 1px solid var(--leiste-rand); } .seitenleiste__zeile { display: flex; align-items: center; justify-content: space-between; gap: .4rem; } .seitenleiste__hilfe { display: flex; align-items: center; gap: .5rem; color: var(--leiste-leise); font-size: .86rem; padding: .3rem .4rem; border-radius: 8px; } .seitenleiste__hilfe:hover { color: var(--leiste-text); text-decoration: none; } .leiste-schalter { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--leiste-rand); background: none; color: var(--leiste-leise); cursor: pointer; } .leiste-schalter:hover { color: var(--leiste-text); border-color: var(--rand-stark); } @media (max-width: 980px) { .leiste-schalter { display: none; } } /* "Mehr schaffen. Mit ORDiVO." - die kleine Bergkarte unten in der Leiste. */ .bergkarte { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 64px; padding: .7rem .7rem .7rem .85rem; overflow: hidden; border-radius: 12px; border: 1px solid var(--leiste-rand); color: var(--text); background: var(--berg-schleier), var(--berg-links) 30% 40% / cover no-repeat, var(--flaeche); } .bergkarte:hover { text-decoration: none; border-color: var(--akzent-rand); } .bergkarte:hover .pfeilknopf { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); } .bergkarte b { font-size: .9rem; line-height: 1.25; font-weight: 700; } .pfeilknopf { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rand-stark); color: var(--text); background: var(--flaeche-2); transition: background-color .15s, border-color .15s, color .15s; } /* Kompakte Leiste: nur Symbole. Die Beschriftung bleibt als title und fuer Screenreader erhalten; die Gruppen werden zu feinen Trennlinien. */ @media (min-width: 981px) { body.leiste-kompakt .seitenleiste { padding-inline: .6rem; align-items: stretch; } body.leiste-kompakt .marke--app { justify-content: center; padding-inline: 0; } body.leiste-kompakt .marke--app .marke__text, body.leiste-kompakt .seitenleiste nav a span, body.leiste-kompakt .seitenleiste__hilfe span, body.leiste-kompakt .bergkarte { display: none; } body.leiste-kompakt .seitenleiste nav a { justify-content: center; padding: .6rem; } body.leiste-kompakt .seitenleiste .zahl { position: absolute; top: 2px; right: 2px; padding: 0 .3rem; } body.leiste-kompakt .navgruppe > summary { font-size: 0; padding: 0; height: 1px; margin: .45rem .5rem; background: var(--leiste-rand); pointer-events: none; } body.leiste-kompakt .navgruppe > summary::after { display: none; } body.leiste-kompakt .seitenleiste__zeile { flex-direction: column; } } @media (max-width: 980px) { .seitenleiste { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 60; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--schatten-hoch); } body.menue-offen .seitenleiste { transform: none; } body.menue-offen::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); } } .haupt { display: flex; flex-direction: column; min-width: 0; } .leiste { display: flex; align-items: center; gap: .9rem; min-height: 68px; padding: .75rem clamp(1rem, 2.2vw, 1.8rem); background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 30; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .leiste { background: var(--grund); } } .leiste__menue { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: .5rem; margin-left: -.4rem; } .leiste__menue span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; } @media (max-width: 980px) { .leiste__menue { display: flex; } } .suche { flex: 1; max-width: 620px; display: flex; align-items: center; gap: .6rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 11px; padding: .45rem .55rem .45rem .8rem; color: var(--text-leise); } /* width: 0 plus flex: 1 - sonst behaelt das Feld seine eingebaute Breite von rund zwanzig Zeichen, und auf dem Telefon schiebt es die Symbole rechts aus dem Bild. */ .suche { min-width: 0; } .suche input { flex: 1; width: 0; min-width: 0; border: 0; background: none; font: inherit; font-size: .93rem; color: var(--text); padding: .2rem 0; } .suche input::placeholder { color: var(--text-leise); opacity: .85; } .suche input:focus { outline: none; } .suche:focus-within { border-color: var(--akzent-rand); box-shadow: 0 0 0 3px var(--akzent-ring); } .suche kbd { font: 600 .72rem/1 var(--schrift); color: var(--text-leise); white-space: nowrap; border: 1px solid var(--rand-stark); background: var(--flaeche-2); border-radius: 6px; padding: .3rem .45rem; } @media (max-width: 760px) { .suche kbd { display: none; } } .leiste__rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; } .leiste__aktion { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text-leise); background: none; border: 0; cursor: pointer; list-style: none; } .leiste__aktion::-webkit-details-marker { display: none; } .leiste__aktion:hover { background: var(--flaeche); color: var(--text); text-decoration: none; } .punkt { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 2px var(--grund); } .punkt--dringend { background: var(--bad); } @media (max-width: 620px) { .leiste__hilfe { display: none; } } .avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: .82rem; font-weight: 750; flex: none; } /* Aufklappmenues in der Kopfleiste: Konto, Darstellung, Erstellen. Alle bauen auf
auf und funktionieren damit ohne Skript; app.js schliesst sie bei einem Klick daneben und mit Escape. */ .klappmenue { position: relative; } .klappmenue > summary { list-style: none; cursor: pointer; } .klappmenue > summary::-webkit-details-marker { display: none; } .klappmenue__liste { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 220px; z-index: 50; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-shadow: var(--schatten-hoch); padding: .35rem; display: grid; gap: .1rem; } .klappmenue__liste a, .klappmenue__liste button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .52rem .65rem; border-radius: 8px; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--text); text-align: left; cursor: pointer; } .klappmenue__liste a:hover, .klappmenue__liste button:hover, .klappmenue__liste a:focus-visible, .klappmenue__liste button:focus-visible { background: var(--flaeche-2); text-decoration: none; outline: none; } .klappmenue__liste svg { color: var(--text-leise); flex: none; } .klappmenue__liste form { margin: 0; } .klappmenue__titel { margin: .25rem .65rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); } .klappmenue__liste button[aria-pressed="true"] { color: var(--akzent); font-weight: 650; } .klappmenue__liste button[aria-pressed="true"] svg { color: var(--akzent); } .klappmenue__liste .haken-rechts { margin-left: auto; } .konto { position: relative; } .konto summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none; padding: .25rem .4rem .25rem .25rem; border-radius: 11px; } .konto summary::-webkit-details-marker { display: none; } .konto summary:hover { background: var(--flaeche); } .konto__text { display: none; line-height: 1.2; } @media (min-width: 900px) { .konto__text { display: grid; } } .konto__text strong { font-size: .92rem; } .konto__text small { font-size: .76rem; color: var(--text-leise); } .konto__pfeil { display: none; color: var(--text-leise); } @media (min-width: 900px) { .konto__pfeil { display: grid; } } .konto__menue { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 230px; z-index: 50; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-shadow: var(--schatten-hoch); padding: .35rem; display: grid; gap: .1rem; } .konto__menue a, .konto__menue button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .52rem .65rem; border-radius: 8px; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--text); text-align: left; cursor: pointer; } .konto__menue a:hover, .konto__menue button:hover { background: var(--flaeche-2); text-decoration: none; } /* Befehlspalette (Ctrl/Cmd + K). Ein natives : Fokusfalle, Escape und Hintergrundsperre bringt der Browser mit. */ dialog.befehle { width: min(40rem, calc(100vw - 2rem)); margin-top: 12vh; padding: 0; border: 1px solid var(--rand); border-radius: 16px; background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-hoch); } dialog.befehle::backdrop { background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); } .befehle__feld { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--rand); color: var(--text-leise); } .befehle__feld input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.02rem; color: var(--text); } .befehle__feld input:focus { outline: none; } .befehle__liste { list-style: none; margin: 0; padding: .4rem; max-height: min(26rem, 60vh); overflow-y: auto; } .befehle__gruppe { padding: .5rem .7rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); } .befehle__eintrag a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 9px; color: var(--text); } .befehle__eintrag a small { margin-left: auto; color: var(--text-leise); font-size: .78rem; } .befehle__eintrag a svg { color: var(--text-leise); flex: none; } .befehle__eintrag.ist-aktiv a, .befehle__eintrag a:hover { background: var(--flaeche-2); text-decoration: none; } .befehle__eintrag.ist-aktiv a svg { color: var(--akzent); } .befehle__fuss { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--rand); font-size: .76rem; color: var(--text-leise); } .befehle__fuss kbd { font: 600 .7rem var(--schrift); border: 1px solid var(--rand-stark); border-radius: 5px; padding: .05rem .35rem; } /* Eine feste Spalte statt der impliziten `auto`-Spalte: die waechst sonst auf die Mindestbreite des breitesten Inhalts - etwa einer Tabelle, auch wenn diese in einem eigenen Rollbereich steckt - und die ganze Seite wird auf dem Handy breiter als der Bildschirm. */ .inhalt { padding: clamp(1rem, 2.2vw, 1.7rem) clamp(1rem, 2.2vw, 1.8rem) 2.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-content: start; } /* -------------------------------------------------------------------------- Page furniture -------------------------------------------------------------------------- */ .page-head { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; justify-content: space-between; } .page-head h1 { margin: 0; } .page-head__sub { margin: .2rem 0 0; color: var(--text-leise); font-size: .95rem; } .page-head__actions { display: flex; flex-wrap: wrap; gap: .55rem; } .card { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rand); } .card__head h2 { margin: 0; font-size: 1rem; } .card__body { padding: 1.1rem; } .card__body > :last-child { margin-bottom: 0; } .card--flach { box-shadow: none; } .gitter { display: grid; gap: 1.2rem; } .gitter--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .gitter--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .gitter--kacheln { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .gitter--breit-schmal { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } @media (max-width: 1080px) { .gitter--breit-schmal { grid-template-columns: minmax(0, 1fr); } } .stat { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--schatten); } .stat__value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat__label { color: var(--text-leise); font-size: .84rem; margin-top: .2rem; } .stat__hint { color: var(--text-leise); font-size: .76rem; margin-top: .35rem; } .stat--blau .stat__value { color: var(--akzent); } .stat--rot .stat__value { color: var(--bad); } .stat--gruen .stat__value { color: var(--ok); } .stat--dunkel .stat__value { color: var(--text); } .badge { display: inline-block; padding: .16rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; } .badge--ok { background: var(--ok-flaeche); color: var(--ok); } .badge--warn { background: var(--warn-flaeche); color: var(--warn); } .badge--bad { background: var(--bad-flaeche); color: var(--bad); } .badge--info { background: var(--info-flaeche); color: var(--info); } .badge--neutral { background: var(--flaeche-3); color: var(--text-leise); } /* Tables scroll inside their own container: the page body never scrolls sideways. */ .table-wrap { overflow-x: auto; margin: 0 -1.1rem -1.1rem; padding: 0 0 .1rem; } .table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; } .table th, .table td { padding: .62rem 1.1rem; text-align: left; border-bottom: 1px solid var(--rand); } .table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); font-weight: 600; background: var(--flaeche-2); position: sticky; top: 0; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--flaeche-2); } .table__link { font-weight: 600; color: var(--text); } .table__link:hover { color: var(--akzent); } .empty { text-align: center; padding: 2.2rem 1rem; color: var(--text-leise); } .empty__title { font-weight: 600; color: var(--text); margin: 0 0 .3rem; } .empty__text { margin: 0 0 1rem; font-size: .93rem; } .flash { padding: .75rem 1rem; border-radius: 10px; font-size: .93rem; border: 1px solid transparent; } .flash--ok { background: var(--ok-flaeche); color: var(--ok); border-color: var(--ok-rand); } .flash--warn { background: var(--warn-flaeche); color: var(--warn); border-color: var(--warn-rand); } .flash--bad { background: var(--bad-flaeche); color: var(--bad); border-color: var(--bad-rand); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form { display: grid; gap: 1rem; } .form__reihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .form__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding-top: .3rem; } .field { display: grid; gap: .3rem; } .field__label { font-size: .85rem; font-weight: 600; color: var(--text); } .field__label i { color: var(--bad); font-style: normal; } .field__hint { font-size: .78rem; color: var(--text-leise); } .field__error { font-size: .8rem; color: var(--bad); font-weight: 500; } .input { width: 100%; padding: .58rem .7rem; font: inherit; font-size: .94rem; border: 1px solid var(--rand-stark); border-radius: 9px; background: var(--eingabe); color: var(--text); } .input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-ring); } .field--error .input { border-color: var(--bad); } textarea.input { resize: vertical; min-height: 90px; line-height: 1.55; } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6478' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; background-size: 16px; padding-right: 2rem; } /* Line-item editor on quotes and invoices */ .posten { width: 100%; border-collapse: collapse; font-size: .92rem; } .posten th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise); text-align: left; padding: 0 .4rem .4rem; font-weight: 600; } .posten td { padding: .25rem .4rem; vertical-align: top; } .posten .input { padding: .45rem .55rem; font-size: .9rem; } .summe { display: grid; gap: .3rem; justify-items: end; margin-top: 1rem; font-size: .95rem; } .summe div { display: flex; gap: 2rem; justify-content: space-between; min-width: 240px; } .summe .gesamt { font-weight: 700; font-size: 1.12rem; border-top: 1px solid var(--rand); padding-top: .45rem; } /* -------------------------------------------------------------------------- Chart -------------------------------------------------------------------------- */ .chart svg { width: 100%; height: 180px; display: block; } .chart__axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-leise); margin: .2rem .2rem 0; } .chart__peak { font-size: .78rem; margin: .6rem 0 0; } /* Task list on the dashboard */ .liste { list-style: none; margin: 0; padding: 0; display: grid; } .liste li { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--rand); } .liste li:last-child { border-bottom: 0; } .liste__text { flex: 1; min-width: 0; } .liste__text b { display: block; font-size: .93rem; font-weight: 600; } .liste__text small { color: var(--text-leise); font-size: .8rem; } .liste form { display: flex; } .liste .btn--klein { white-space: nowrap; } .detail-gitter { display: grid; gap: .1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .detail-gitter > div { padding: .45rem 0; border-bottom: 1px solid var(--rand); } .detail-gitter dt { font-size: .78rem; color: var(--text-leise); } .detail-gitter dd { margin: .1rem 0 0; font-size: .94rem; font-weight: 500; } .verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .verlauf li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .6rem; } .verlauf__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); margin: .45rem auto 0; box-shadow: 0 0 0 4px var(--info-flaeche); } .verlauf p { margin: 0; font-size: .92rem; } .verlauf small { color: var(--text-leise); font-size: .78rem; } .filter { display: flex; flex-wrap: wrap; gap: .4rem; } .filter a { padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche); font-size: .85rem; color: var(--text-leise); } .filter a:hover { text-decoration: none; border-color: var(--rand-stark); } .filter a.is-aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; } @media print { .seitenleiste, .leiste, .page-head__actions, .btn { display: none !important; } .huelle { grid-template-columns: 1fr; } body { background: #fff; } .card { box-shadow: none; border-color: var(--rand-stark); } } /* -------------------------------------------------------------------------- ORDiVO - oeffentliche Website Ergaenzungen zum bestehenden System. Es wird nichts ueberschrieben, nur ergaenzt, damit die Anwendungsseiten unveraendert bleiben. -------------------------------------------------------------------------- */ .wrap--schmal { max-width: 52rem; } .abschnitt h1, .abschnitt h2 { letter-spacing: -.025em; } .abschnitt h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin-bottom: .5rem; } .abschnitt__lead { max-width: 46rem; margin-bottom: 2rem; font-size: 1.02rem; } /* Hero-Bild */ .held__bild { display: grid; place-items: center; } .held__bild img { width: 100%; max-width: 34rem; height: auto; display: block; border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); } .haken--liste { flex-direction: column; gap: .55rem; margin-top: 1.1rem; } /* Zwei Spalten mit Text und Bild */ .zwei-spalten { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 900px) { .zwei-spalten { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .zwei-spalten--kehr > *:first-child { order: 2; } } /* Schrittfolge */ .schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; } @media (min-width: 780px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.2rem; } } .schritt { display: flex; gap: .9rem; align-items: flex-start; } .schritt__nr { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .92rem; background: var(--akzent); color: var(--akzent-text); } .schritt b { display: block; } .schritt p { margin: .2rem 0 0; color: var(--text-leise); font-size: .93rem; } .schritte--gross .schritt__nr { width: 38px; height: 38px; font-size: 1rem; } /* Feine Karte fuer Funktionsbloecke */ .karte-fein { background: var(--grund); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.3rem; } .karte-fein .merkmal__kreis { margin-bottom: .7rem; } .karte-fein b { display: block; margin-bottom: .3rem; font-size: 1.02rem; } .karte-fein p { margin: 0; font-size: .93rem; } /* Haeufige Fragen: natives details/summary, kein Skript noetig */ .faq { display: grid; gap: .6rem; } .faq__eintrag { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: .1rem .2rem; } .faq__eintrag summary { cursor: pointer; list-style: none; padding: .95rem 1.1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq__eintrag summary::-webkit-details-marker { display: none; } .faq__eintrag summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; color: var(--akzent); line-height: 1; flex: none; } .faq__eintrag[open] summary::after { content: "\2013"; } .faq__eintrag p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--text-leise); font-size: .95rem; } .faq__eintrag summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: var(--radius); } /* Abschlussbanner */ .banner { background: var(--dunkel-2); color: var(--dunkel-text); border-radius: var(--radius-gross); padding: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: 1.4rem; align-items: center; } @media (min-width: 860px) { .banner { grid-template-columns: 1.6fr auto; } } .banner h2 { margin: 0 0 .4rem; color: #fff; } .banner .muted { color: var(--dunkel-leise); margin: 0; max-width: 40rem; } .banner__aktion { display: flex; flex-wrap: wrap; gap: .7rem; } /* Preisvergleichstabelle auf "Warum ORDiVO" */ .abschnitt .table td { vertical-align: top; } /* Belege: Ablagefeld und Vorschau */ .ablage { display: block; position: relative; border: 2px dashed var(--rand); border-radius: var(--radius); background: var(--grund); padding: 1.6rem 1.2rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .ablage:hover, .ablage.ist-ueber { border-color: var(--akzent); background: var(--info-flaeche); } .ablage input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .ablage__text b { display: block; font-size: .98rem; } .ablage__text small { color: var(--text-leise); font-size: .84rem; } .beleg-bild { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--rand); background: var(--grund); } /* Lager: QR, Etiketten, Scanner */ .qr-block { display: grid; place-items: center; padding: .6rem 0 1rem; } .qr-block svg { width: 150px; height: 150px; border-radius: 8px; background: #fff; padding: 6px; } .ist-knapp { color: var(--bad); font-weight: 700; } .scan-stand { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; } .scan-stand__wert { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; } .scan-stand__einheit { font-size: 1.05rem; color: var(--text-leise); } .scanner__video { width: 100%; max-width: 420px; border-radius: var(--radius); background: #000; display: block; } .etiketten { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 1rem; } .etikett { display: flex; gap: .8rem; align-items: center; padding: .7rem; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; color: #0d1626; break-inside: avoid; } .etikett__qr svg { width: 78px; height: 78px; display: block; } .etikett__text { min-width: 0; } .etikett__text b { display: block; font-size: .88rem; line-height: 1.25; } .etikett__text span { display: block; font-size: .78rem; color: #5a6a80; } .etikett__text small { display: block; font-size: .72rem; color: #7c8ba3; } @media print { .etiketten { grid-template-columns: repeat(3, 1fr); } .page-head, .filter, .flash { display: none !important; } } /* ========================================================================== ORDiVO - Ausbaustufe: Dokumente, Listen, Abonnement Der Leitgedanke dieses Abschnitts ist Ruhe. Eine Buchhaltungsoberflaeche wird taeglich stundenlang benutzt; alles, was blinkt, kraeftig faerbt oder sich bewegt, wird nach dem dritten Tag als Stoerung empfunden. Farbe hat deshalb hier nur noch eine Aufgabe: einen Betrag als offen, ueberfaellig oder bezahlt zu kennzeichnen. Alles andere ist Grau, Weiss und Abstand. Zahlen stehen durchgehend in Tabellenziffern (font-variant-numeric: tabular-nums). Ohne das rutschen Betraege in einer Spalte gegeneinander, und eine Betragsspalte, die man nicht senkrecht vergleichen kann, ist der haeufigste Grund, warum eine Rechnungsliste unruhig wirkt. ========================================================================== */ .num { font-variant-numeric: tabular-nums; } .is-right { text-align: right; } .ist-warnung { color: var(--bad); font-weight: 600; } .is-inaktiv { opacity: .45; pointer-events: none; } /* --- Testphase im Kopf --------------------------------------------------- Bewusst klein und ohne Farbe, solange noch Zeit ist. Erst in den letzten drei Tagen wird sie warm - eine Erinnerung, die von Tag eins an rot ist, liest nach einer Woche niemand mehr. */ .testpille { display: inline-flex; align-items: baseline; gap: .3rem; padding: .48rem .9rem; border-radius: 11px; border: 1px solid var(--akzent-rand); background: var(--akzent-flaeche); font-size: .86rem; font-weight: 600; color: var(--akzent); white-space: nowrap; } .testpille b { font-size: .95rem; color: var(--akzent); font-variant-numeric: tabular-nums; } .testpille:hover { text-decoration: none; border-color: var(--akzent); } .testpille--knapp { background: var(--warn-flaeche); border-color: var(--warn-rand); color: var(--warn); } .testpille--knapp b { color: var(--warn); } .testpille--gesperrt { background: var(--bad-flaeche); border-color: var(--bad-rand); color: var(--bad); font-weight: 600; } /* --- Gruppierte Navigation ---------------------------------------------- */ .seitenleiste__gruppe { margin: 1.1rem 0 .25rem; padding: 0 .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dunkel-leise); opacity: .75; } .seitenleiste__gruppe:first-child { margin-top: 0; } /* --- Hinweiskasten ------------------------------------------------------- */ .hinweis { border-left: 3px solid var(--rand); padding: .1rem 0 .1rem .9rem; } .hinweis b { display: block; font-size: 1.02rem; } .hinweis--info { border-color: var(--akzent); } .hinweis--ok { border-color: var(--ok); } .hinweis--warn { border-color: var(--warn); } .hinweis--bad { border-color: var(--bad); } .schritte { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; } .schritte li { padding-left: .2rem; } .notiz { margin-top: 1rem; padding: .75rem .9rem; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--rand); } .notiz--intern { border-style: dashed; } .notiz b { font-size: .85rem; } .notiz small { display: block; margin-top: .4rem; font-size: .76rem; } /* --- Positionseditor ----------------------------------------------------- Die Tabelle wird breit; sie bekommt deshalb ihren eigenen Scrollbereich und eine Mindestbreite, unterhalb derer die Spalten nicht mehr lesbar waeren. Die Alternative - Spalten auf schmalen Geraeten wegzulassen - waere hier falsch: eine Position ohne Menge oder ohne Steuersatz laesst sich nicht pruefen, und geprueft wird eine Rechnung immer. */ .posten { min-width: 860px; } .posten th { white-space: nowrap; } .posten tbody tr + tr td { border-top: 1px solid var(--rand); } .posten td { padding: .45rem .35rem; } .posten__griff { width: 2.6rem; text-align: center; padding-top: .85rem !important; } .posten__nummer { font-size: .82rem; color: var(--text-leise); font-variant-numeric: tabular-nums; } .posten__text td { background: var(--flaeche-2); } .posten__text .posten__nummer { display: none; } .input--klein { margin-top: .3rem; padding: .3rem .5rem !important; font-size: .82rem !important; min-height: 2rem; resize: vertical; } .posten__werkzeuge { white-space: nowrap; text-align: right; padding-top: .6rem !important; } .posten__knopf { border: 1px solid var(--rand); background: var(--flaeche); color: var(--text-leise); width: 1.7rem; height: 1.7rem; border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; } .posten__knopf:hover { border-color: var(--rand-stark); color: var(--text); } .posten__knopf--weg:hover { background: var(--bad-flaeche); border-color: var(--bad-rand); color: var(--bad); } .posten__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; } .posten__summe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto); gap: 1.5rem; align-items: start; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rand); } .posten__rabatt { max-width: 22rem; } .feldpaar { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: .4rem; } /* Die Summenliste ist eine Definitionsliste: Bezeichnung und Betrag gehoeren inhaltlich zusammen, und ein Screenreader liest das Paar dann auch als Paar. [data-steuerzeilen] ist der Behaelter, den das Skript fuellt - seine Kinder sehen aus wie die uebrigen Zeilen. */ .summe { display: grid; gap: .3rem; justify-items: end; margin: 0; font-size: .95rem; } .summe > div, .summe [data-steuerzeilen] > div { display: flex; gap: 2rem; justify-content: space-between; min-width: 260px; width: 100%; } .summe [data-steuerzeilen] { display: grid; gap: .3rem; width: 100%; } .summe dt { color: var(--text-leise); margin: 0; } .summe dd { margin: 0; font-variant-numeric: tabular-nums; } .summe .gesamt { font-weight: 700; font-size: 1.12rem; border-top: 1px solid var(--rand); padding-top: .45rem; margin-top: .2rem; } .summe .gesamt dt { color: var(--text); } .summe--ansicht { margin-top: 1.3rem; justify-items: end; } .table--positionen { min-width: 640px; } .table--positionen .posten__text td { background: var(--flaeche-2); font-weight: 600; } /* --- Aktionsleiste auf Detailseiten -------------------------------------- Alles, was man mit diesem Dokument tun kann, an einer Stelle - statt verstreut ueber die Seite. Wer eine Rechnung oeffnet, sucht als Erstes genau das. */ .aktionsleiste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; } .aktionsleiste form { margin: 0; } .aktionsleiste--folge { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rand); } .aktion-mit-hinweis { display: grid; gap: .25rem; max-width: 22rem; } .aktion-mit-hinweis small { font-size: .76rem; line-height: 1.4; } .zahlungsform, .mahnform { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rand); } .zahlungsform .field { min-width: 9rem; } .mahnform { display: block; } /* --- Listenwerkzeuge ----------------------------------------------------- */ .werkzeugleiste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .9rem 0 1.1rem; } .werkzeugleiste__suche { min-width: min(22rem, 100%); flex: 1 1 14rem; } .werkzeugleiste__mehr { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-top: .8rem; padding: .9rem; background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--radius); } .ausklapp { border-top: 1px solid var(--rand); margin-top: 1.1rem; padding-top: .9rem; } .ausklapp > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--text-leise); list-style: none; display: inline-flex; align-items: center; gap: .4rem; } .ausklapp > summary::-webkit-details-marker { display: none; } .ausklapp > summary::before { content: '▸'; font-size: .8rem; transition: transform .12s; } .ausklapp[open] > summary::before { transform: rotate(90deg); } .ausklapp > summary:hover { color: var(--text); } .ausklapp[open] > summary { margin-bottom: .9rem; } .ausklapp--werkzeug { border-top: 0; margin: 0; padding: 0; flex-basis: 100%; } .blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--rand); font-size: .86rem; } .blaettern__knoepfe { display: flex; align-items: center; gap: .7rem; } /* --- Bilder in Dokumenten ------------------------------------------------ Feste Rahmenhoehe, object-fit: contain. Damit steht ein hohes Foto neben einem breiten, ohne dass eines von beiden gestreckt wird - dieselbe Regel wie im PDF, damit die Vorschau haelt, was der Druck zeigt. */ .bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .bildraster__eintrag { margin: 0; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche-2); } .bildraster__eintrag img { display: block; width: 100%; height: 140px; object-fit: contain; background: #fff; } .bildraster__eintrag figcaption { display: grid; gap: .35rem; padding: .6rem .7rem; font-size: .84rem; border-top: 1px solid var(--rand); } .bildraster__eintrag form { margin: 0; } /* --- Formularfuss, der stehen bleibt ------------------------------------- Ein Dokumentformular ist lang. Ohne diesen Streifen muss man zum Speichern ans Ende scrollen, und genau dort verliert man die Uebersicht ueber die Positionen, die man gerade geprueft hat. */ .form__aktionen--klebrig { position: sticky; bottom: 0; z-index: 5; margin: 1.2rem -1.1rem -1.1rem; padding: .9rem 1.1rem; background: var(--glas); backdrop-filter: blur(6px); border-top: 1px solid var(--rand); } @supports not (backdrop-filter: blur(6px)) { .form__aktionen--klebrig { background: var(--flaeche); } } .detail-gitter--eng { grid-template-columns: 1fr; } /* --- Schmale Bildschirme ------------------------------------------------- Buchhaltung passiert am Schreibtisch; die Informationsdichte auf dem Desktop wird deshalb NICHT reduziert. Was hier passiert, ist ausschliesslich, dass mehrspaltige Anordnungen untereinander rutschen, damit die gleichen Angaben auf einem Telefon lesbar bleiben. Es wird nichts ausgeblendet. */ @media (max-width: 900px) { .gitter--breit-schmal { grid-template-columns: minmax(0, 1fr); } .posten__summe { grid-template-columns: minmax(0, 1fr); } .posten__rabatt { max-width: none; } .summe { justify-items: stretch; } .form__aktionen--klebrig { position: static; margin: 1.2rem 0 0; padding: .9rem 0 0; } } @media (max-width: 640px) { .werkzeugleiste { gap: .5rem; } .werkzeugleiste__suche { flex-basis: 100%; } .aktionsleiste { flex-direction: column; align-items: stretch; } .aktionsleiste .btn { width: 100%; justify-content: center; } .aktion-mit-hinweis { max-width: none; } .zahlungsform { flex-direction: column; align-items: stretch; } .blaettern { flex-direction: column; align-items: stretch; } .blaettern__knoepfe { justify-content: space-between; } } /* --- Drucken ------------------------------------------------------------- Die Bildschirmansicht ist nicht das Dokument - dafuer gibt es das PDF. Was hier gedruckt wird, ist ein Arbeitsausdruck, und der soll ohne Navigation und ohne Knoepfe auskommen. */ @media print { .seitenleiste, .leiste, .page-head__actions, .aktionsleiste, .form__aktionen, .blaettern, .werkzeugleiste, .filter { display: none !important; } .huelle, .haupt, .inhalt { display: block; margin: 0; padding: 0; } .card { border: 0; box-shadow: none; break-inside: avoid; } body { background: #fff; } } /* --- Geldfluss und Faelligkeitsstaffel ----------------------------------- */ .chart--geldfluss svg { width: 100%; height: auto; display: block; } .chart__legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0 0; font-size: .8rem; color: var(--text-leise); } .chart__marke { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; } .chart__marke--ein { background: var(--ok); } .chart__marke--aus { background: var(--text-leise); opacity: .55; } .chart__marke + span { margin-right: .5rem; } .staffel { display: grid; gap: .9rem; } .staffel__balken { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--flaeche-3); } .staffel__teil { display: block; min-width: 3px; } .staffel__teil--ok { background: var(--ok); } .staffel__teil--warn { background: var(--warn); } .staffel__teil--bad { background: var(--bad); } .staffel__teil--tief { background: var(--bad-tief); } .staffel__liste { display: grid; gap: .35rem; margin: 0; font-size: .88rem; } .staffel__liste > div { display: flex; justify-content: space-between; gap: 1rem; } .staffel__liste dt { display: flex; align-items: center; gap: .45rem; color: var(--text-leise); margin: 0; } .staffel__liste dd { margin: 0; font-variant-numeric: tabular-nums; } .staffel__punkt { width: .55rem; height: .55rem; border-radius: 2px; display: inline-block; } .staffel__punkt--ok { background: var(--ok); } .staffel__punkt--warn { background: var(--warn); } .staffel__punkt--bad { background: var(--bad); } .staffel__punkt--tief { background: var(--bad-tief); } /* --- "Braucht deine Aufmerksamkeit" -------------------------------------- Eine Liste, keine Kacheln. Kacheln zeigen Zustaende, eine Liste zeigt eine Reihenfolge - und genau die ist hier die Aussage: was zuerst. */ .bedarf { list-style: none; margin: 0; padding: 0; display: grid; } .bedarf li { display: grid; grid-template-columns: .6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--rand); } .bedarf li:last-child { border-bottom: 0; padding-bottom: 0; } .bedarf li:first-child { padding-top: 0; } .bedarf__punkt { width: .5rem; height: .5rem; border-radius: 999px; background: var(--text-leise); } .bedarf__punkt--bad { background: var(--bad); } .bedarf__punkt--warn { background: var(--warn); } .bedarf__punkt--neutral { background: var(--rand); border: 1px solid var(--text-leise); } .bedarf__text { color: var(--text); font-size: .93rem; } .bedarf__text:hover { color: var(--akzent); } .bedarf__betrag { font-size: .92rem; font-weight: 600; white-space: nowrap; } .ist-eingang { color: var(--ok); font-weight: 600; } .liste--schlicht li { border-bottom: 1px solid var(--rand); } .liste--schlicht li:last-child { border-bottom: 0; } @media (max-width: 560px) { .bedarf li { grid-template-columns: .6rem minmax(0, 1fr); } .bedarf__betrag { grid-column: 2; font-size: .86rem; } } /* --- Logo-Vorschau in den Einstellungen ---------------------------------- */ .logo-vorschau { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 1rem; margin-bottom: 1.1rem; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; } .logo-vorschau img { max-width: 220px; max-height: 90px; object-fit: contain; } .logo-vorschau form { margin: 0; } /* --- Firmenwechsel im Kontomenue ----------------------------------------- */ .konto__gruppe { margin: .2rem .8rem .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); } .konto__menue hr { border: 0; border-top: 1px solid var(--rand); margin: .4rem 0; } .konto__menue button.is-aktiv { font-weight: 700; color: var(--akzent); } .konto__menue button small { display: block; font-size: .72rem; font-weight: 400; color: var(--text-leise); } .ist-storniert { text-decoration: line-through; opacity: .6; } /* --- Bereichsauswahl und Einladungslink ---------------------------------- */ .bereiche { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem; margin: 0 0 1.1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem 1.2rem; } .bereiche legend { padding: 0 .4rem; font-size: .85rem; font-weight: 600; } .bereiche__eintrag { display: flex; align-items: center; gap: .5rem; font-size: .92rem; } .bereiche__eintrag input { width: 1rem; height: 1rem; } .einladungslink { display: block; padding: .6rem .8rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; font-family: var(--schrift-zahl); font-size: .82rem; word-break: break-all; } /* ========================================================================== ORDiVO - Automatisierung: Erstellen-Menue, Hilfe, Versand, Verlauf Die Content-Security-Policy erlaubt keine style-Attribute (style-src 'self'). Alles, was frueher als Inline-Stil in einer Vorlage stand, braucht deshalb eine Klasse - sonst greift es schlicht nicht. ========================================================================== */ /* --- Kleine Hilfsklassen -------------------------------------------------- */ .klein-text { font-size: .84rem; } .vorformatiert { white-space: pre-wrap; margin: .3rem 0 0; } .inline-form { display: inline-flex; margin: 0 0 0 .4rem; vertical-align: middle; } .abstand-oben-0 { margin-top: 0; } .abstand-unten { margin-bottom: 1rem; } .abstand-oben { margin-top: 1rem; } .ohne-abstand { margin: 0; } .schmal-suche { max-width: 260px; } /* --- "+ Erstellen" ---------------------------------------------------------- Dieselbe Mechanik wie das Kontomenue:
oeffnet ohne Skript, app.js schliesst bei einem Klick daneben. */ .erstellen { position: relative; } .erstellen > summary { list-style: none; cursor: pointer; } .erstellen > summary::-webkit-details-marker { display: none; } .erstellen__menue { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 210px; z-index: 50; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 11px; box-shadow: var(--schatten-hoch); padding: .3rem; display: grid; gap: .1rem; } .erstellen__menue a { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 8px; color: var(--text); font-size: .92rem; } .erstellen__menue a:hover, .erstellen__menue a:focus-visible { background: var(--grund); text-decoration: none; outline: none; } .erstellen__menue svg { color: var(--text-leise); } @media (max-width: 620px) { .erstellen > summary span { display: none; } .erstellen__menue { right: -3rem; } } .seitenleiste__hilfe { display: flex; align-items: center; gap: .5rem; color: var(--dunkel-leise); margin-bottom: .5rem; font-size: .86rem; } .seitenleiste__hilfe:hover { color: var(--dunkel-text); text-decoration: none; } .bestaetigungsleiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem 1.4rem; background: var(--info-flaeche); color: var(--info); font-size: .9rem; border-bottom: 1px solid var(--info-rand); } .bestaetigungsleiste form { margin: 0; } /* --- Kurze Erklaerungen ---------------------------------------------------- Ein Fragezeichen, das per Maus UND Tastatur seinen Satz zeigt. Der Text steht im Attribut, damit ihn auch ein Screenreader liest (aria-label). */ .hilfe { position: relative; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .25rem; border-radius: 50%; background: var(--flaeche-3); color: var(--text-leise); font-size: .7rem; font-weight: 700; cursor: help; vertical-align: middle; line-height: 1; } .hilfe:focus { outline: 2px solid var(--akzent-hell); outline-offset: 1px; } .hilfe::after { content: attr(data-hilfe); position: absolute; left: 50%; bottom: calc(100% + .45rem); transform: translateX(-50%); width: max-content; max-width: 16rem; padding: .5rem .65rem; border-radius: 8px; background: var(--tooltip-grund); color: var(--tooltip-text); font-size: .78rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: var(--schatten-hoch); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 70; } .hilfe:hover::after, .hilfe:focus::after { opacity: 1; } /* --- Anklickbare Kacheln und Statusleiste -------------------------------- */ a.stat--link { display: block; color: inherit; transition: border-color .12s, box-shadow .12s; } a.stat--link:hover { text-decoration: none; border-color: var(--rand-stark); box-shadow: var(--schatten-hoch); } a.stat--link.is-aktiv { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-ring); } .statusleiste { display: flex; flex-wrap: wrap; gap: .45rem; padding: .35rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; } .statusleiste a { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .75rem; border-radius: 9px; font-size: .88rem; color: var(--text-leise); } .statusleiste a b { font-size: .8rem; font-weight: 700; color: var(--text); background: var(--flaeche-3); border-radius: 999px; padding: .02rem .45rem; } .statusleiste a:hover { background: var(--grund); text-decoration: none; } .statusleiste a.is-aktiv { background: var(--akzent); color: var(--akzent-text); font-weight: 600; } .statusleiste a.is-aktiv b { background: color-mix(in srgb, var(--akzent-text) 18%, transparent); color: var(--akzent-text); } /* --- Versanddialog ----------------------------------------------------------- */ dialog.versand { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); background: var(--flaeche); color: var(--text); } dialog.versand::backdrop { background: rgba(0, 0, 0, .5); } .versand__form { padding: 1.2rem 1.3rem 1.3rem; } .versand__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .versand__kopf h2 { margin: 0; font-size: 1.1rem; } .versand__zu { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-leise); cursor: pointer; padding: .2rem .4rem; border-radius: 8px; } .versand__zu:hover { background: var(--grund); color: var(--text); } .versand__anhang { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche-2); } .versand__anhang span:last-child { display: grid; } .versand__anhang small { font-size: .76rem; } .versand__datei { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 8px; background: var(--bad-flaeche); color: var(--bad); font-size: .7rem; font-weight: 800; letter-spacing: .04em; } /* --- Verlauf eines Belegs und eines Kunden -------------------------------- */ .verlauf--beleg p { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .verlauf__punkt--auto { background: var(--info); box-shadow: 0 0 0 4px var(--info-flaeche); } .verlauf__punkt--mail { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-flaeche); } .verlauf__punkt--notiz { background: var(--text-leise); box-shadow: 0 0 0 4px var(--flaeche-3); } .verlauf__punkt--termin { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-flaeche); } .verlauf__fehler { display: block; color: var(--bad); margin-top: .15rem; } .verlauf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .3rem; font-size: .84rem; } .verlauf__aktionen form { margin: 0; } .mahnform__titel { display: grid; gap: .1rem; margin: 0 0 .6rem; } .mahnform .aktionsleiste + p { margin-top: .6rem; } /* --- Schnellaktionen auf der Kundenseite ----------------------------------- */ .schnellaktionen { display: flex; flex-wrap: wrap; gap: .5rem; } /* --- Automatisierung --------------------------------------------------------- */ .schalter { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche-2); } .schalter input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none; } .schalter b { display: block; font-size: .95rem; } .schalter small { color: var(--text-leise); font-size: .82rem; } .vorschau-liste { list-style: none; margin: 0; padding: 0; display: grid; } .vorschau-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rand); font-size: .9rem; } .vorschau-liste li:last-child { border-bottom: 0; } .vorschau-liste .muted { font-size: .82rem; } .platzhalter-liste { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 0; padding: 0; list-style: none; } .platzhalter-liste code { display: inline-block; padding: .12rem .4rem; border-radius: 6px; background: var(--flaeche-3); font-size: .8rem; } .mailvorschau { border: 1px solid var(--rand); border-radius: 10px; padding: .9rem 1rem; background: var(--flaeche-2); } .mailvorschau b { display: block; margin-bottom: .5rem; } .mailvorschau p { white-space: pre-wrap; margin: 0; font-size: .92rem; } /* --- Kalender im alten Monatsraster (bis kalender.css greift) ------------- */ .ohne-js-hinweis { display: none; } /* ========================================================================== Darstellung: Ergaenzungen fuer beide Themen ========================================================================== */ /* Nur ohne Skript sichtbar (etwa "Zeigen" neben einer Auswahl, die sich mit Skript beim Aendern selbst sendet). frueh.js setzt .js auf . */ .js .nur-ohne-js { display: none !important; } .suche kbd { cursor: pointer; } /* Die Bildmarke nimmt den Akzent. Auf der dunklen oeffentlichen Seite ist das Blau der hellen Belegung zu dunkel, dort gilt das helle Blau. */ .kopf .bildmarke, .fuss .bildmarke { color: var(--akzent-hell); } .tor .bildmarke { color: var(--akzent); } /* Formularelemente im dunklen Thema: der Pfeil der Auswahl und die Datums-Symbole folgen dem Text, nicht dem Betriebssystem. */ select.input { background-color: var(--eingabe); } html[data-theme="dunkel"] select.input, html[data-theme="dunkel"] .zeitraum select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a79f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; background-size: 16px; } .zeitraum select { appearance: none; } .input::placeholder { color: var(--text-schwach); } /* Karten und Kopfzeilen der bestehenden Seiten im neuen Raster. */ .card { border-radius: 14px; } .card__head { border-bottom-color: var(--rand); } .page-head h1 { font-weight: 750; letter-spacing: -.025em; } .stat { border-radius: 14px; } .empty__title { color: var(--text); } .table-wrap { scrollbar-width: thin; } hr { border: 0; border-top: 1px solid var(--rand); } /* --- Oeffentliche Seiten, Anmeldung und Fehlerseiten ---------------------- Diese Seiten laden nur app.css (nicht die Modul-Stylesheets der Anwendung). Was dort frueher als style-Attribut stand - und von der CSP stillschweigend verworfen wurde - steht deshalb hier. */ .abstand-oben-gross { margin-top: 1.4rem; } .btn--breit { width: 100%; justify-content: center; } .aufzaehlung { padding-left: 1.1rem; } .tor__karte--mittig { text-align: center; } .tor__karte--mittig .held__auge { color: var(--akzent); } .tor__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; } /* Kopf der oeffentlichen Seite auf dem Telefon: die Navigation rutscht in eine eigene Zeile und laesst sich seitlich wischen, statt "Preise" am rechten Rand abzuschneiden. */ @media (max-width: 760px) { .kopf__innen { flex-wrap: wrap; gap: .6rem 1rem; padding-block: .6rem; } .kopf__aktionen { margin-left: auto; } .kopf__nav { order: 3; flex: 1 1 100%; margin-left: 0; gap: 1.2rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; } .kopf__nav a { white-space: nowrap; } .land { display: none; } } /* Auf einem gewoehnlichen Telefon (390 px) sollen alle vier Punkte ohne Wischen sichtbar sein - ein halb abgeschnittenes "Über u" am Rand liest sich wie ein Fehler, nicht wie eine wischbare Zeile. Etwas kleinere Schrift und engere Abstaende reichen dafuer; erst auf noch schmaleren Geraeten bleibt das Wischen als Rueckfallebene. */ @media (max-width: 420px) { .kopf__nav { gap: .85rem; justify-content: space-between; } .kopf__nav a { font-size: .88rem; } } /* Kleine Android-Geraete und das iPhone SE (360-375 px). */ @media (max-width: 380px) { .kopf__nav { gap: .7rem; } .kopf__nav a { font-size: .82rem; } } /* Suchfelder innerhalb einer Seite (etwa im Kopf der Kundenliste) teilen die Klasse der Kopfleiste. Dort fuellt das Feld den freien Platz; in einem Kartenkopf gibt es keinen, also braucht das Formular eine eigene Breite - sonst schrumpft das Feld auf nichts. */ .inhalt .suche { flex: 0 1 auto; width: min(18rem, 100%); max-width: 100%; } /* Im Kopf einer Karte richtet sich der Aktionsbereich nach seinem Inhalt. Eine Prozentbreite hat dort keinen Bezug und faellt auf die Mindestbreite des Feldes zurueck - null. Deshalb hier eine feste Breite, die auf dem Telefon nicht ueber den Rand ragt. */ .card__action .suche { width: 18rem; max-width: 58vw; }