/* Postfach-Radar — Oberfläche. Aufbau eines Mail-Programms (drei Spalten: Filter, Liste, Lesebereich), gestaltet nach vier Vorbildern: * Listenzeilen sind abgesetzte Kacheln mit Abstand, keine Zeilen an einer Trennlinie — das trägt die Übersicht auch bei langen Listen. * Kennzahlen groß und farbig, damit die eine Zahl, auf die es ankommt, ohne Suchen ins Auge fällt. * Zustände als gefüllte, runde Marken statt dünner Umrandungen. * Werkzeugleiste mit Sinnbild und Wort über dem Lesebereich. Auf schmalen Geräten wird aus den drei Spalten ein Weg in zwei Schritten — Liste, dann Nachricht mit Rückweg. Gesteuert über die Klasse `auswahl` am , ganz ohne JavaScript. */ /* Open Sans, lokal ausgeliefert. Eine Einbindung über das Google-CDN würde bei jedem Aufruf die IP-Adresse des Besuchers an Google übertragen — das ist der klassische Abmahnfall. Zwei Dateien, zusammen 84 KB. */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/statisch/schriften/open-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/statisch/schriften/open-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: dark; /* Grundton exakt aus dem Logo (#02040c), damit dessen Fläche nahtlos in die Seite übergeht. Farbe kommt allein aus dem Zustand der Daten, nie aus dem Hintergrund. */ --grund: #02040c; --leiste: #000000; /* Kopf- und Fußleiste schwarz */ --flaeche: #10151f; --flaeche-hoch: #19202b; --gewaehlt: #222a38; --schweben: #161d28; --rand: #1e2532; --rand-stark: #333d4d; --text: #ffffff; --text-leise: #dde2ea; --text-schwach: #a0a9b8; /* Orange direkt aus dem Logo gemessen. */ --akzent: #f87000; --akzent-hell: #ff8a26; --akzent-flaeche: #f8700022; --gut: #4ec98a; --gut-flaeche: #4ec98a1c; --schlecht: #ef6b6b; --schlecht-flaeche: #ef6b6b1c; --warn: #e8c34a; --warn-flaeche: #e8c34a1c; --info: #6f9bf5; --info-flaeche: #6f9bf51c; --radius: 14px; --radius-klein: 9px; --radius-marke: 999px; --schrift: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --kopf-hoehe: 78px; --werkzeug-hoehe: 60px; --spalte-links: 276px; --spalte-liste: 478px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift); font-size: 15px; line-height: 1.55; overflow: hidden; -webkit-text-size-adjust: 100%; } .zahl, time { font-variant-numeric: tabular-nums; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.3; } code { font-family: var(--schrift); background: var(--flaeche); padding: .08em .4em; border-radius: var(--radius-klein); border: 1px solid var(--rand); font-size: .95em; } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px; } svg.sinnbild { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ============ Programmrahmen ============ */ .rahmen { display: flex; flex-direction: column; height: 100vh; } .titelleiste { height: var(--kopf-hoehe); flex: none; display: flex; align-items: center; gap: 1.6rem; padding: 0 1.4rem; background: var(--leiste); border-bottom: 1px solid var(--rand); } .programmname { display: flex; align-items: center; flex: none; } .programmname:hover { text-decoration: none; } .programmname img { height: 42px; width: auto; display: block; } .reiter { display: flex; gap: .3rem; margin-left: .3rem; } .reiter a { display: flex; align-items: center; padding: .6rem 1.25rem; color: #ffffff; font-size: 1.02rem; border-radius: var(--radius-klein); min-height: 46px; font-weight: 600; } .reiter a:hover { background: var(--flaeche); color: var(--text); text-decoration: none; } .reiter a.aktiv { color: var(--akzent); background: var(--akzent-flaeche); font-weight: 600; } .titel-rechts { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: #ffffff; font-size: .96rem; } .fuss-logo { height: 22px; } /* ============ Arbeitsfläche ============ */ .arbeitsflaeche { flex: 1; display: flex; min-height: 0; gap: 0; } .spalte-links { width: var(--spalte-links); flex: none; background: var(--leiste); border-right: 1px solid var(--rand); overflow-y: auto; padding: .8rem .6rem; } .spalte-mitte { width: var(--spalte-liste); flex: none; background: var(--grund); border-right: 1px solid var(--rand); display: flex; flex-direction: column; min-height: 0; } .spalte-rechts { flex: 1; background: var(--grund); overflow-y: auto; min-width: 0; } /* ---- Navigation links ---- */ .baum-titel { padding: .7rem .7rem .4rem; color: var(--text-schwach); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .baum-eintrag { display: flex; align-items: center; gap: .65rem; position: relative; padding: .6rem .8rem; margin-bottom: .15rem; color: var(--text-leise); font-size: .95rem; border-radius: var(--radius-klein); min-height: 44px; } .baum-eintrag:hover { background: var(--flaeche); color: var(--text); text-decoration: none; } .baum-eintrag.aktiv { background: var(--akzent-flaeche); color: var(--text); font-weight: 600; } /* Der Balken links markiert den aktiven Eintrag deutlicher als Farbe allein. */ .baum-eintrag.aktiv::before { content: ""; position: absolute; left: -.6rem; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 3px 3px 0; background: var(--akzent); } .baum-eintrag.aktiv .sinnbild { color: var(--akzent); } .baum-zahl { margin-left: auto; color: var(--text-schwach); font-size: .85rem; font-variant-numeric: tabular-nums; background: var(--flaeche); padding: .05rem .5rem; border-radius: var(--radius-marke); min-width: 1.9rem; text-align: center; } .baum-eintrag.aktiv .baum-zahl { color: var(--akzent); background: var(--akzent-flaeche); } .baum-trenner { height: 1px; background: var(--rand); margin: .7rem .7rem; } /* ---- Nachrichtenliste ---- */ .listen-kopf { flex: none; min-height: var(--werkzeug-hoehe); display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; border-bottom: 1px solid var(--rand); } .suchfeld { position: relative; flex: 1; display: flex; align-items: center; } .suchfeld .sinnbild { position: absolute; left: .7rem; color: var(--text-schwach); pointer-events: none; } .listen-kopf input[type=search] { flex: 1; height: 40px; padding: 0 .8rem 0 2.35rem; font-size: .93rem; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius-klein); } .listen-kopf input[type=search]:focus { border-color: var(--rand-stark); } .listen-zahl { color: var(--text-schwach); font-size: .86rem; white-space: nowrap; } .liste { flex: 1; overflow-y: auto; min-height: 0; padding: .55rem .6rem 1rem; } /* Jede Nachricht eine eigene Kachel — das ist der prägende Zug der Vorbilder und hält lange Listen lesbar. */ .eintrag { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .9rem .8rem; margin-bottom: .45rem; background: var(--flaeche); border: 1px solid transparent; border-radius: var(--radius); color: inherit; transition: background .12s ease, border-color .12s ease; } .eintrag:hover { background: var(--flaeche-hoch); } .eintrag-inhalt { flex: 1; min-width: 0; color: inherit; cursor: pointer; display: block; } .eintrag-inhalt:hover { text-decoration: none; } /* Die Tickbox: hier wird von Hand entschieden, was wirklich Geld wert ist. */ .eintrag-haken { width: 20px; height: 20px; min-height: 20px; margin: .15rem 0 0; padding: 0; flex: none; accent-color: var(--akzent); cursor: pointer; } .markierleiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; border-bottom: 1px solid var(--rand); background: var(--akzent-flaeche); } .markierleiste .anzahl { font-weight: 700; color: var(--akzent); } /* MONEY-Reiter darf auffallen — das ist der Punkt, an dem Arbeit zu Geld wird. */ .reiter a.geld.aktiv { color: var(--gut); background: var(--gut-flaeche); } .geldsumme { font-size: 2.9rem; font-weight: 800; color: var(--gut); font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.05; } .eintrag.gewaehlt { background: var(--gewaehlt); border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent-flaeche); } .eintrag.entschieden { opacity: .5; } .eintrag-zeile1 { display: flex; align-items: baseline; gap: .6rem; } .eintrag-absender { font-weight: 700; font-size: .95rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .eintrag-datum { color: var(--text-schwach); font-size: .84rem; flex: none; font-variant-numeric: tabular-nums; } .eintrag-betreff { font-size: .93rem; color: var(--text-leise); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eintrag-fuss { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; } /* Gruppentrenner in der Liste: verwertbar oben, der Rest darunter. */ .gruppe-titel { display: flex; align-items: center; gap: .5rem; padding: .5rem .3rem .55rem; margin-top: .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-schwach); } .gruppe-titel:first-child { margin-top: 0; } .gruppe-titel.gut { color: var(--gut); } .gruppe-titel .marke { margin-left: auto; } .gruppe-hinweis { margin: -.2rem .3rem .6rem; font-size: .84rem; color: var(--text-schwach); line-height: 1.45; } /* ---- Lesebereich ---- */ .werkzeugleiste { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .6rem 1.4rem; border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 5; min-height: var(--werkzeug-hoehe); background: var(--grund); } .werkzeugleiste .zurueck-mobil { display: none; } .lese-kopf { padding: 1.2rem 1.4rem 1rem; } .lese-betreff { font-size: 1.38rem; font-weight: 700; margin-bottom: .45rem; letter-spacing: -.01em; } .lese-von { color: var(--text-leise); font-size: .92rem; } .lese-koerper { padding: 0 1.4rem 3rem; display: flex; gap: 1.5rem; align-items: flex-start; } .lese-haupt { flex: 1; min-width: 0; } .lese-seite { width: 356px; flex: none; } .tafel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; } .tafel-titel { display: flex; align-items: center; gap: .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-schwach); font-weight: 700; margin-bottom: .8rem; } .tafel-titel .rechts { margin-left: auto; text-transform: none; letter-spacing: 0; } .mailtext { white-space: pre-wrap; word-break: break-word; font-size: .96rem; line-height: 1.68; color: var(--text-leise); } .paar { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .6rem; padding: .3rem 0; font-size: .92rem; } .paar + .paar { border-top: 1px solid var(--rand); } .paar .name { color: var(--text-schwach); } .paar .wert { word-break: break-word; } .paar.lang { grid-template-columns: 10.5rem minmax(0, 1fr); } .paar.lang .wert { font-size: .85rem; color: var(--text-leise); } /* ---- Einspaltige Ansichten ---- */ .einzelspalte { flex: 1; overflow-y: auto; min-height: 0; } /* Auf breiten Bildschirmen mitwachsen, aber nicht ins Uferlose: ab etwa 1720 px wird eine Textzeile unlesbar lang. Darüber wird zentriert. */ .einzelspalte-inhalt { max-width: 1720px; margin: 0 auto; padding: 1.8rem 2rem 3.5rem; } .einzelspalte h1 { font-size: 1.55rem; margin-bottom: .3rem; letter-spacing: -.015em; } .einzelspalte .unterzeile { color: var(--text-schwach); font-size: .94rem; margin-bottom: 1.6rem; } /* ---- Kennzahlen: groß und farbig ---- */ .kennzahlen { display: grid; gap: .8rem; margin-bottom: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .kennzahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .kennzahl .marke { margin-bottom: .6rem; } .kennzahl .wert { font-size: 2.5rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .kennzahl .text { color: var(--text-schwach); font-size: .86rem; margin-top: .3rem; } .kennzahl.betont .wert { color: var(--akzent); } .kennzahl.gut .wert { color: var(--gut); } .kennzahl.schlecht .wert { color: var(--schlecht); } /* ---- Tabellen: Zeilen als Kacheln ---- */ .tabelle-huelle { overflow-x: auto; } table { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; font-size: .92rem; } th { text-align: left; padding: .3rem .9rem; white-space: nowrap; color: var(--text-schwach); font-weight: 700; font-size: .77rem; text-transform: uppercase; letter-spacing: .06em; } td { padding: .8rem .9rem; background: var(--flaeche); vertical-align: top; } td:first-child { border-radius: var(--radius) 0 0 var(--radius); } td:last-child { border-radius: 0 var(--radius) var(--radius) 0; } tbody tr:hover td { background: var(--flaeche-hoch); } .leise { color: var(--text-leise); } .schwach { color: var(--text-schwach); font-size: .86rem; } /* ============ Bedienelemente ============ */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: 0 .95rem; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius-klein); font-family: inherit; font-size: .93rem; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease; } .knopf:hover { background: var(--flaeche-hoch); text-decoration: none; } .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #1d1206; font-weight: 700; } .knopf.haupt:hover { background: var(--akzent-hell); } .knopf.gut { color: var(--gut); border-color: #4ec98a44; background: var(--gut-flaeche); } .knopf.gut:hover { background: #4ec98a2e; } .knopf.schlecht { color: var(--schlecht); border-color: #ef6b6b44; background: var(--schlecht-flaeche); } .knopf.schlecht:hover { background: #ef6b6b2e; } .knopf .taste { font-size: .74rem; color: var(--text-schwach); border: 1px solid var(--rand-stark); border-radius: 4px; padding: 0 .3rem; margin-left: .2rem; } input[type=text], input[type=password], input[type=search], textarea, select { width: 100%; padding: .6rem .8rem; min-height: 42px; background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius-klein); font-family: inherit; font-size: .94rem; } textarea { min-height: 78px; resize: vertical; } label { display: block; margin-bottom: .3rem; font-size: .85rem; color: var(--text-schwach); } /* ============ Marken: gefüllt und rund ============ */ .marke { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: var(--radius-marke); font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--flaeche-hoch); color: var(--text-schwach); } .marke.gut { color: var(--gut); background: var(--gut-flaeche); } .marke.schlecht { color: var(--schlecht); background: var(--schlecht-flaeche); } .marke.warn { color: var(--warn); background: var(--warn-flaeche); } .marke.akzent { color: var(--akzent); background: var(--akzent-flaeche); } .marke.info { color: var(--info); background: var(--info-flaeche); } .punkte { display: inline-block; min-width: 2.2rem; text-align: center; padding: .12rem .45rem; border-radius: var(--radius-marke); font-size: .79rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-schwach); background: var(--flaeche-hoch); } .punkte.hoch { color: var(--akzent); background: var(--akzent-flaeche); } .hinweis { padding: .7rem .9rem; border-radius: var(--radius-klein); font-size: .9rem; background: var(--schlecht-flaeche); color: #f5b0ae; } .hinweis.gut { background: var(--gut-flaeche); color: #9fdcb9; } .gruende { margin: 0; padding-left: 1.15rem; font-size: .9rem; color: var(--text-leise); } .gruende li { margin: .22rem 0; } .leer { padding: 4rem 2rem; text-align: center; color: var(--text-schwach); } .leer-gross { font-size: 1.12rem; color: var(--text-leise); margin-bottom: .4rem; } .statusleiste { flex: none; min-height: 34px; display: flex; align-items: center; gap: 1.3rem; padding: 0 1.1rem; background: var(--leiste); border-top: 1px solid var(--rand); color: var(--text-schwach); font-size: .85rem; flex-wrap: wrap; } .statusleiste a { color: var(--text-schwach); } /* ============ Anmeldung ============ */ /* Der Login trägt die Wortmarke MONEYHUNTERZZ, alles dahinter SPAMCHECK.DE. Deshalb hier ein grüner Schein statt des orangen. */ .anmelde-flaeche { height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(760px 420px at 50% 4%, #b8d81816, transparent 70%), #000; } .anmeldung { width: 100%; max-width: 430px; } .anmelde-marke { display: flex; justify-content: center; margin-bottom: 1.8rem; } .anmelde-marke img { width: 100%; max-width: 400px; height: auto; display: block; } .anmelde-kasten .knopf.haupt { background: #b8d818; border-color: #b8d818; color: #101401; } .anmelde-kasten .knopf.haupt:hover { background: #c8e830; } .anmelde-flaeche :focus-visible { outline-color: #b8d818; } .fuss-logo { height: 19px; width: auto; display: block; opacity: .65; } .fuss-logo:hover { opacity: 1; } .anmelde-kasten { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.6rem; box-shadow: 0 12px 40px #0006; } .anmelde-kasten .feld { margin-bottom: 1rem; } .anmelde-kasten .knopf { width: 100%; min-height: 46px; margin-top: .5rem; } .anmelde-fuss { margin-top: 1.3rem; display: flex; gap: 1.1rem; justify-content: center; font-size: .88rem; } .anmelde-fuss a { color: var(--text-schwach); } /* ============ Rechtstexte ============ */ .textseite { height: 100vh; overflow-y: auto; } .textseite-inhalt { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.6rem 4rem; } .textseite h1 { font-size: 1.6rem; margin-bottom: .5rem; } .textseite h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; } .textseite p, .textseite li { color: var(--text-leise); font-size: .96rem; } /* ============ Bildlaufleisten ============ */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rand-stark); border-radius: 6px; border: 3px solid var(--grund); } ::-webkit-scrollbar-thumb:hover { background: #4a535e; } /* ============ Diagramme ============ */ .diagramm-tafel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.3rem 1.4rem 1rem; margin-bottom: 1.2rem; } .diagramm-kopf { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .diagramm-kopf h2 { font-size: 1.05rem; } .diagramm-kopf .zeitraum { margin-left: auto; color: var(--text-schwach); font-size: .86rem; } .diagramm { width: 100%; height: auto; display: block; overflow: visible; } .diagramm .gitter { stroke: var(--rand); stroke-width: 1; } .diagramm .achse { fill: var(--text-schwach); font-size: 10px; } .diagramm .flaeche-verlauf { fill: url(#verlauf-akzent); } .diagramm .linie { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .diagramm .linie.gut { stroke: var(--gut); } .diagramm .punkt { fill: var(--grund); stroke: var(--akzent); stroke-width: 2; } .diagramm .punkt.gut { stroke: var(--gut); } .legende { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .8rem; font-size: .85rem; color: var(--text-schwach); } .legende span { display: inline-flex; align-items: center; gap: .4rem; } .legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } /* Balken für die Verteilung */ .balkenzeile { display: grid; grid-template-columns: 17rem 1fr 9rem; gap: 1rem; align-items: center; padding: .45rem 0; font-size: .9rem; } .balken { height: 10px; border-radius: 999px; background: var(--flaeche-hoch); overflow: hidden; } .balken > i { display: block; height: 100%; border-radius: 999px; background: var(--akzent); } .balken > i.gut { background: var(--gut); } .balken > i.warn { background: var(--warn); } .balken > i.schwach { background: var(--rand-stark); } .balkenzeile .zahl { text-align: right; color: var(--text-leise); } * { scrollbar-width: thin; scrollbar-color: var(--rand-stark) transparent; } /* ============ Mittlere Fenster ============ */ @media (max-width: 1500px) { :root { --spalte-liste: 400px; --spalte-links: 240px; } .lese-koerper { flex-direction: column; } .lese-seite { width: 100%; } } /* ============ Schmale Geräte ============ */ @media (max-width: 900px) { html, body { overflow: auto; height: auto; } .rahmen { height: auto; min-height: 100vh; } .titelleiste { height: auto; flex-wrap: wrap; padding: .6rem .8rem; gap: .5rem; } .reiter { order: 3; width: 100%; overflow-x: auto; margin-left: 0; padding-bottom: .2rem; } .reiter a { min-height: 44px; white-space: nowrap; } .titel-rechts { margin-left: auto; } .arbeitsflaeche { flex-direction: column; } .spalte-links { width: 100%; display: flex; overflow-x: auto; padding: .5rem .6rem; gap: .35rem; border-right: none; border-bottom: 1px solid var(--rand); } .baum-titel, .baum-trenner { display: none; } .baum-eintrag { white-space: nowrap; margin-bottom: 0; } .baum-eintrag.aktiv::before { display: none; } .spalte-mitte, .spalte-rechts { width: 100%; } .spalte-mitte { border-right: none; } /* Ohne gewählte Nachricht: nur die Liste. Mit Auswahl: nur die Nachricht. */ body:not(.auswahl) .spalte-rechts { display: none; } body.auswahl .spalte-mitte { display: none; } body.auswahl .spalte-links { display: none; } .werkzeugleiste .zurueck-mobil { display: inline-flex; } /* Touch-Ziele mindestens 44 px — am Finger ist alles darunter Glückssache. */ .knopf { min-height: 44px; } input[type=text], input[type=password], input[type=search], select { min-height: 44px; } .listen-kopf input[type=search] { height: 44px; } .eintrag { padding: .9rem 1rem; } .lese-kopf, .lese-koerper, .werkzeugleiste { padding-left: 1rem; padding-right: 1rem; } .lese-betreff { font-size: 1.2rem; } .werkzeugleiste { position: static; } .paar, .paar.lang { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .paar .name { font-size: .82rem; } .einzelspalte-inhalt { padding: 1.3rem 1rem 3rem; } .kennzahl .wert { font-size: 2.1rem; } .statusleiste { padding: .5rem 1rem; gap: .8rem; } } @media (max-width: 460px) { .lese-betreff { font-size: 1.1rem; } .werkzeugleiste .knopf { flex: 1; min-width: 7.5rem; } .kennzahlen { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }