/* PMG Publishing App - modernes Design, Lila nur als Akzent, Light & Dark, Sheet-Tabellen */ :root{ color-scheme:light; --bg:#f6f6f7; --panel:#ffffff; --sidebar:#fbfbfc; --ink:#1c1c1e; --muted:#6b6b72; --faint:#75757e; --border:#e7e7ea; --line:#efeff1; --head:#f4f4f6; --row-alt:#fafafb; --row-hover:#f4f2fb; --chip:#f0f0f2; --chip-border:#e4e4e8; --accent:#6b3fd4; --accent-2:#5a30bd; --accent-soft:#ece5fb; --accent-ink:#4a279f; --ok:#3f7a4e; --ok-soft:#e6f0e6; --warn:#8a5a12; --warn-soft:#f5edd8; --err:#a12727; /* Schrift, die AUF einer gefuellten Warnfarbe steht. Im hellen Theme ist die Flaeche dunkelrot, also weiss darauf. Siehe --on-err im dunklen Theme. */ --on-err:#ffffff; --info:#1e4fd6; --info-soft:#e7f0ff; --info-border:#bcd3ff; --err-soft:#fbe9e9; /* --brand-spotify und --brand-apple sind am 11.08.2026 entfallen (Paket 13/1.8): die beiden Logo-Knoepfe tragen jetzt --accent, und danach las die Tokens niemand mehr. Ein Farbwert, den nichts benutzt, sieht beim naechsten Lesen aus wie eine Farbe, die man verwenden darf. */ --radius:12px; --shadow:0 1px 2px rgba(40,25,70,.06); --serif:Georgia,"Iowan Old Style","Times New Roman",serif; --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* ---- Masse (Paket D2, 09.08.2026) ------------------------------------- Vorher standen im Stylesheet neunzehn verschiedene Abstandswerte, sechzehn Schriftgroessen (darunter vier mit halbem Pixel, die je Browser anders runden) und zwoelf Radien - alle als nackte Zahl. Zwei Karten nebeneinander hatten dadurch verschiedene Innenabstaende, ohne dass es jemand wollte. Ab hier gilt: kein nackter Pixelwert mehr fuer Abstand, Groesse, Radius, Ebene oder Dauer. Wer eine Stufe dazwischen braucht, braucht sie nicht. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px; --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-base:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:30px; --r-sm:6px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-pill:999px; /* Ebenen als Leiter statt als Zufall: vorher lagen .fd2modal und .pmgmodal beide auf 70 und ueberdeckten sich je nach Reihenfolge im Quelltext. */ --z-menu:20; --z-selbar:45; --z-backdrop:50; --z-drawer:60; --z-modal:70; --z-cmdk:80; --z-toast:90; --dur-fast:.15s; --dur-base:.24s; --ease-out:cubic-bezier(.2,.9,.3,1); /* Schalter und Haekchen: eigene Werte, weil --chip fuer eine 25 px hohe Bahn zu blass ist - ausgeschaltet muss man sie als Flaeche erkennen. */ --sw-off:#d6d6dc; --sw-off-b:#c4c4cd; --sw-off-h:#c9c9d2; --cb-bg:#ffffff; --cb-border:#c2c2cc; /* Rollbalken. Bewusst NICHT --chip-border: der ist als Trennlinie gedacht und im dunklen Theme so leise, dass ein Balken daraus schlicht unsichtbar ist. Ein Rollbalken muss man SEHEN - er ist die einzige Auskunft darueber, dass rechts oder unten noch etwas kommt. */ --sb-thumb:#c4c4ce; --sb-thumb-h:#a2a2ae; --sb-thumb-a:#8a8a97; --sb-track:rgba(20,10,40,.05); /* ---- Eingabefelder (07.09.2026) -------------------------------------- Felder hatten `background:var(--panel)` - dieselbe Farbe wie die Karte, in der sie stehen. Im hellen Theme traegt der Rahmen die Erkennbarkeit noch; im dunklen ist --panel #1c1c1f und --border #2b2b30, und damit war nicht zu sehen, WO man etwas eingibt. Gemeldet von Johannes. Ein Feld braucht eine eigene Flaeche, nicht nur eine Linie. Hell bleibt es weiss (die Karte ist ebenfalls weiss, hier traegt der Rahmen), dunkel wird es TIEFER als die Karte - ein Feld ist eine Mulde, in die man schreibt, und dunkler heisst in einem dunklen Theme "tiefer". */ --field:#ffffff; --field-border:#d9d9e0; } [data-theme="dark"]{ /* Sagt dem Browser, dass hier ein dunkles Theme laeuft. Ohne diese eine Zeile zeichnet er Haekchen, Auswahlfelder, Rollbalken und Kalenderblaetter weiterhin hell - weisse Kaestchen auf dunklem Grund. */ color-scheme:dark; --bg:#141416; --panel:#1c1c1f; --sidebar:#171719; --ink:#ececee; --muted:#a2a2aa; --faint:#8b8b95; --border:#2b2b30; --line:#242428; --head:#212125; --row-alt:#1f1f22; --row-hover:#272430; --chip:#26262b; --chip-border:#34343b; --accent:#9575f2; --accent-2:#a488f5; --accent-soft:#2a2340; --accent-ink:#c9b6ff; --ok:#82c07d; --ok-soft:#20301f; --warn:#d3a24c; --warn-soft:#332913; --err:#e88886; /* FIX 09.08.2026: --err ist im dunklen Theme absichtlich HELL - als Schriftfarbe auf dunklem Grund ist das richtig (rund 7:1). Als FLAECHE mit weisser Schrift war es dagegen unlesbar (rund 2:1), und genau das machte .btn.danger:hover. Deshalb steht die Schriftfarbe jetzt in einer eigenen Variablen: auf der hellen Flaeche des dunklen Themes gehoert dunkle Schrift. */ --on-err:#1a1012; --info:#8fb4ff; --info-soft:#16294d; --info-border:#2c4a86; --err-soft:#33191a; /* Die Markenfarben bleiben, was sie sind - sie gehoeren Spotify und Apple und duerfen sich nicht mit dem Theme aendern. Sie stehen trotzdem als Variable da, damit sie nicht mitten in einer Regel als Hex-Wert auftauchen. */ --shadow:0 1px 2px rgba(0,0,0,.3); /* Dunkel: die AUS-Bahn ist ein tiefes Grau, deutlich dunkler als die Karte, damit sie als Vertiefung liest. Das leere Haekchen ebenso - vorher war es das weisse Systemkaestchen. */ --sw-off:#3a3a44; --sw-off-b:#4a4a56; --sw-off-h:#454552; --cb-bg:#212127; --cb-border:#4a4a56; /* Dunkel deutlich heller als die Flaeche darunter (#1c1c1f), sonst verschwindet der Balken im Panel. */ --sb-thumb:#55555f; --sb-thumb-h:#71717e; --sb-thumb-a:#8d8d9a; --sb-track:rgba(255,255,255,.045); /* Das Feld liegt TIEFER als die Karte (#1c1c1f) und hat einen Rahmen, der deutlich heller ist als eine normale Trennlinie (--border #2b2b30). Beides zusammen macht aus einer Linie eine Mulde - man sieht auf einen Blick, wo etwas eingegeben wird. Siehe die Begruendung bei --field im hellen Theme. */ --field:#101013; --field-border:#3e3e48; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5} a{color:var(--accent-ink);text-decoration:none} h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink);margin:0} .layout{display:flex;min-height:100vh} /* ---- Breite der Seitenleiste als Variable (26.08.2026) ------------------- Eine Zahl an einer Stelle: die Leiste, ihr Flex-Anteil und der Griff daneben rechnen alle damit. Eingeklappt geht sie auf 0 - nicht auf eine schmale Icon-Leiste. Gewuenscht war "die Seite wird mehr oder weniger fullscreen", und eine halb da stehende Leiste ist von beidem das Schlechtere. */ :root{--side-w:236px; --side-ms:280ms; --side-ease:cubic-bezier(.4,0,.2,1)} .sidebar{width:var(--side-w);flex:0 0 var(--side-w);background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh; transition:width var(--side-ms) var(--side-ease),flex-basis var(--side-ms) var(--side-ease)} /* Der Inhalt darf beim Schrumpfen nicht umbrechen - sonst zappelt die Schrift waehrend der Bewegung. Er wird abgeschnitten, die Leiste ist ja im Gehen. */ .sidebar > *{min-width:0} .side-off .sidebar{width:0;flex-basis:0;border-right-color:transparent} .side-off .sidebar .logo, .side-off .sidebar .navwrap, .side-off .sidebar .sideuser{opacity:0;pointer-events:none; transition:opacity 140ms linear} .sidebar .logo,.sidebar .navwrap,.sidebar .sideuser{opacity:1;transition:opacity 200ms linear 80ms} /* ---- Der Griff ----------------------------------------------------------- Mittig am rechten Rand der Leiste, halb darueber hinaus. Er gehoert zur Leiste und wandert deshalb mit ihr - eingeklappt steht er am linken Bildschirmrand und ist der einzige Weg zurueck. Deshalb bleibt er sichtbar und wird nicht mit ausgeblendet. */ /* Schmaler und hoeher (26.08.2026, zweiter Anlauf): 18 x 76 statt 26 x 52 - ein Griff, kein Knopf. Und die linke Kante ist jetzt DA, statt zu fehlen: vorher lief `border-left:none` gegen den Rand der Leiste, und beim Zeigen faerbte sich die Umrandung ein - nur eben dreiseitig. Ein Rahmen, der an einer Seite aufhoert, sieht abgeschnitten aus, weil er es ist. Jetzt umschliesst der Rahmen den Griff vollstaendig, und die Kante zur Leiste hin uebernimmt deren Farbe. Eingeklappt steht er frei am Bildschirmrand und ist dann ohnehin rundum sichtbar. */ .sidegrip{position:absolute;top:50%;right:-10px;transform:translateY(-50%);z-index:40; width:18px;height:76px;border-radius:var(--r-pill); background:var(--panel);border:1px solid var(--border); color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center; padding:0;box-shadow:var(--shadow)} .sidegrip:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)} .sidegrip:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sidegrip .chev{display:flex;transition:transform var(--side-ms) var(--side-ease)} .side-off .sidegrip .chev{transform:rotate(180deg)} /* Eingeklappt ist die Leiste 0 breit - der Griff haenge sonst zur Haelfte ausserhalb des Bildschirms und waere genau dann schlecht zu treffen, wenn er der einzige Weg zurueck ist. Er rueckt deshalb um seine ganze Breite nach rechts und steht vollstaendig am Rand. */ .side-off .sidegrip{right:-24px} .sidegrip{transition:right var(--side-ms) var(--side-ease),background 140ms ease, color 140ms ease,border-color 140ms ease} /* Der Pfeil ist bei 18 px Breite das groesste Element im Griff - er darf nicht ueberstehen. */ .sidegrip .chev svg{width:13px;height:13px} /* ---- Das Logo in der Kopfleiste ----------------------------------------- Es steht immer im Markup, damit die Animation seine Zielposition messen kann, bevor es jemand sieht. Ausgeklappt belegt es keinen Platz. */ .topbrand{display:none;align-items:center;flex:none} .topbrand img{height:24px;width:auto;display:block} [data-theme="dark"] .topbrand img{filter:invert(1) brightness(1.7)} .side-off .topbrand{display:flex} @media (prefers-reduced-motion:reduce){ .sidebar,.sidegrip .chev,.sidebar .logo,.sidebar .navwrap,.sidebar .sideuser{transition:none} } /* Kopf und Fuss der Seitenleiste bewusst knapp gehalten: jeder Pixel hier ist ein Pixel, den die Navigation nicht zum Scrollen braucht. Mit 14 Menuepunkten plus fuenf Gruppen lief die Master-Navigation sonst schon bei 900 px Fensterhoehe ueber. */ .logo{padding:var(--sp-4) var(--sp-5) var(--sp-3)} .logo img{height:27px;width:auto;display:block} [data-theme="dark"] .logo img{filter:invert(1) brightness(1.7)} /* navwrap ist der Rahmen, .nav der scrollende Teil. Getrennt, damit die weiche Kante unten stehen bleibt, statt mit dem Inhalt wegzuscrollen. min-height:0 ist noetig, sonst weigert sich ein Flex-Kind, kleiner als sein Inhalt zu werden, und die Leiste waechst aus dem Fenster heraus statt zu scrollen. */ .navwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column} .navwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none; background:linear-gradient(to bottom,transparent,var(--sidebar));opacity:0;transition:opacity .18s ease} .navwrap.has-more::after{opacity:1} .nav{padding:var(--sp-1) var(--sp-3) var(--sp-2);flex:1;overflow-y:auto;overflow-x:hidden;min-height:0} /* line-height ausdruecklich gesetzt: die geerbten 1.5 aus body machten jede Zeile 4 px hoeher, ueber 14 Punkte summiert sich das. 30 px Zeilenhoehe bleiben mit der Maus bequem treffbar. */ /* Kein Abstand zwischen den Punkten (07.09.2026, Wunsch Johannes). Vorher standen 4 px (--sp-1) zwischen den Zeilen; damit schwebten die Hover-Flaechen einzeln in der Leiste, statt eine zusammenhaengende Liste zu bilden - und ueber vierzehn Punkte summierten sich 56 px, die in einer Leiste fehlen, die auf kleinen Bildschirmen ohnehin scrollt. Die Flaechen schliessen jetzt aneinander an; die Trennung leistet der Wechsel der Hintergrundfarbe beim Zeigen, nicht der Zwischenraum. Die Handy-Ansicht (Paket 7) machte das schon so - der Unterschied war ein Versehen, kein Entwurf. */ .nav a{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--muted);font-size:14px;line-height:1.3;margin-bottom:0} .nav a:hover{background:var(--row-hover);color:var(--ink)} .nav a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .nav a .ic{width:17px;text-align:center;opacity:.85;flex:0 0 auto} .nav .badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;font-weight:600;flex:0 0 auto} /* Bleibt die Leiste doch einmal zu lang - kleiner Bildschirm, weitere Menuepunkte -, soll der Balken nicht der graue Systembalken sein, sondern schmal, rund und in den Farben der App. Er erscheint erst beim Zeigen auf die Leiste, damit er im Ruhezustand nicht stoert, und ist mit 8 px breit genug, um ihn auch mit der Maus zu greifen. */ /* Die Seitenleiste hatte hier einen EIGENEN Rollbalken-Block mit anderen Farben und anderer Breite. Er ist entfallen - die globalen Regeln im Abschnitt "Rollbalken" weiter unten gelten jetzt auch hier, mit einer einzigen Ausnahme (schmaler, ohne Rinne), die dort direkt danebensteht. ACHTUNG, gilt weiterhin: sobald scrollbar-color gesetzt ist, ignoriert Chromium saemtliche ::-webkit-scrollbar-Regeln und zeichnet einen Ueberlagerungsbalken, der keine Breite belegt und nur waehrend des Scrollens aufblitzt. Die Standard-Eigenschaft steht deshalb NUR im @supports-Zweig fuer Firefox, wo es die Pseudo-Elemente nicht gibt. */ .sideuser{border-top:1px solid var(--border);padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)} .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px} .sideuser .nm{font-size:13px;font-weight:600} .sideuser .rl{font-size:11px;color:var(--faint)} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{background:var(--panel);border-bottom:1px solid var(--border);padding:var(--sp-4) var(--sp-7);display:flex;align-items:center;gap:var(--sp-4)} .topbar h1{font-size:22px} .topbar .sub{color:var(--muted);font-size:14px;font-family:var(--sans)} .topbar .spacer{flex:1} .chip{display:flex;align-items:center;gap:var(--sp-2);font-size:14px} .themebtn{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:9px;width:36px;height:36px;cursor:pointer;font-size:16px} .themebtn:hover{color:var(--ink);border-color:var(--accent)} .content{padding:var(--sp-7) var(--sp-7) var(--sp-8)} .flash{background:var(--accent-soft);border:1px solid var(--chip-border);color:var(--accent-ink);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);margin-bottom:var(--sp-4);font-size:14px} .grid{display:grid;gap:var(--sp-4)} .cols-4{grid-template-columns:repeat(4,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:2fr 1fr} .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5) var(--sp-6);box-shadow:var(--shadow)} .card h2{font-size:var(--fs-lg);margin-bottom:var(--sp-1)} /* ---- Karte an Karte: EIN Abstand (26.08.2026) --------------------------- Vorher trug jede Vorlage ihn selbst - mal mb-5, mal mb-4, mal mt-5, mal gar nichts. Vier Werte fuer dieselbe Fuge, und die Seiten sahen dadurch unterschiedlich luftig aus, ohne dass es jemand entschieden hatte. Die Regel greift nur zwischen Geschwistern und nur im normalen Fluss - im .grid zaehlt dessen gap. Wo eine Vorlage zusaetzlich mb-4 setzt, fallen beide Werte zusammen (Margin-Collapsing), es entsteht also kein doppelter Abstand. */ .card + .card,.card + .foldcard,.foldcard + .card,.foldcard + .foldcard, .card + .sheetwrap,.sheetwrap + .card{margin-top:var(--sp-4)} /* ---- ... aber nicht im Raster (07.09.2026) ------------------------------ Gefunden beim dritten Anlauf an "die Works-Kachel ist hoeher als die anderen". Es war nie die Kachel, es war diese Regel eine Zeile darueber: die vier Kacheln der Portal-Uebersicht sind aufeinanderfolgende .card, also bekamen die Kacheln 2, 3 und 4 je 16 px margin-top. In einem Raster wandert ein Element damit in seiner Zelle nach unten, waehrend die Zeilenhoehe gleich bleibt - die erste Kachel fuellt die ganze Hoehe, die drei anderen sitzen tiefer und sehen 16 px kuerzer aus. Genau das war zu sehen. Die Regel gehoert dem gestapelten Fluss: dort steht eine Karte UNTER der anderen und braucht Abstand. Im Raster macht das der `gap` - eine zweite Quelle fuer denselben Abstand ist immer eine zu viel. Gilt fuer jedes .grid der App, nicht nur fuer diese vier. */ .grid > .card + .card,.grid > .card + .foldcard, .grid > .foldcard + .card,.grid > .foldcard + .foldcard{margin-top:0} /* ---- .hint: der eine Erklaertext ---------------------------------------- Erklaerungen unter einer Ueberschrift standen bisher in vier verschiedenen Groessen nebeneinander: 11.5, 12, 12.5 und 13 px, dazu Absaetze ganz ohne Angabe, die die 15 px des Fliesstexts erbten und dadurch fast so gross waren wie die Ueberschrift darueber. Ab jetzt gibt es genau eine Groesse. Die Regel ist bewusst NICHT mehr auf .card beschraenkt - sie galt sonst nur in Karten, und ausserhalb fiel derselbe Absatz auf Fliesstextgroesse zurueck. Wer hier eine Ausnahme braucht, braucht in Wahrheit keinen Hinweis. */ .hint{color:var(--muted);font-size:var(--fs-sm);line-height:1.45;margin:var(--sp-1) 0 0} p.hint{margin:var(--sp-1) 0 0} .hint a{color:var(--accent-ink)} .stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5)} .stat .lab{color:var(--muted);font-size:13px} .stat .num{font-family:var(--serif);font-size:var(--fs-2xl);font-weight:600;margin-top:var(--sp-2)} .stat .dl{font-size:var(--fs-sm);margin-top:var(--sp-1);color:var(--ok)} .stat.warn{background:var(--warn-soft);border-color:var(--warn)} .stat.warn .num,.stat.warn .dl{color:var(--warn)} /* ---- .foldcard: eine Karte, die sich zuklappen laesst (26.08.2026) ------- Gebaut auf
/ und nicht auf JavaScript: das Aufklappen ist dann eine Browserfunktion - sie funktioniert ohne Skript, der Browser findet Text auch in zugeklappten Abschnitten (Strg+F), und die Tastaturbedienung ist geschenkt. Der Kopf traegt rechts einen Platz fuer den Zustand (.foldstate). Genau das ist der Sinn des Ganzen: zugeklappt muss man sehen, ob etwas fehlt, ohne aufzuklappen. Eine Klappe, die ihren Inhalt vollstaendig verbirgt, macht aus drei Blicken vier Klicks. */ .foldcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow);margin-bottom:var(--sp-4);overflow:hidden} .foldcard > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-3); padding:var(--sp-5) var(--sp-6);min-height:38px;user-select:none} .foldcard > summary::-webkit-details-marker{display:none} .foldcard > summary:hover{background:var(--row-hover)} .foldcard > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .foldcard > summary h2{font-size:17px;margin:0;display:flex;align-items:center;gap:var(--sp-2)} .foldcard .foldsub{color:var(--muted);font-size:var(--fs-sm)} .foldcard .foldstate{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)} /* Der Pfeil dreht sich, statt zu springen - dieselbe Kurve wie der Griff an der Seitenleiste, damit sich die App an allen Klappen gleich anfuehlt. */ .foldcard .foldx{display:flex;color:var(--muted);transition:transform 220ms var(--side-ease,ease)} .foldcard[open] > summary .foldx{transform:rotate(180deg)} .foldbody{padding:0 var(--sp-6) var(--sp-5)} .foldcard[open] > summary{border-bottom:1px solid var(--border);margin-bottom:var(--sp-5)} @media (prefers-reduced-motion:reduce){.foldcard .foldx{transition:none}} @media (max-width:860px){.foldcard > summary{padding:var(--sp-4)}.foldbody{padding:0 var(--sp-4) var(--sp-4)}} /* ---- Symbole in Knoepfen: eine Zeile, keine Schraeglage ------------------ `.icon` traegt global ein `vertical-align:-.125em` - richtig im Fliesstext, wo das Symbol auf der Schriftlinie sitzt. In einem Flex-Knopf ist vertical-align wirkungslos, aber `align-self` gilt: ohne diese Zeile entscheidet der Browser anhand der Zeilenhoehe, und bei ungeraden Groessen landet das Symbol einen halben Pixel zu tief. Genau daran sieht ein Plus in einem Knopf "verrutscht" aus. */ .btn > .icon,.btn > svg{align-self:center;vertical-align:0;flex:0 0 auto} .btn{line-height:1.25} /* ---- .pick: eine Entscheidung je Zeile (Import-Vorschau, 26.08.2026) ----- Kaestchen und Beschriftung sind EIN Klickziel, und die Zeilenhoehe haelt die 38 px der uebrigen Klickflaechen ein - in einer Tabelle mit dreissig Zeilen ist ein 13-px-Kaestchen sonst ein Treffspiel. */ .pick{display:flex;align-items:center;gap:var(--sp-2);min-height:38px; font-size:var(--fs-md);cursor:pointer;white-space:nowrap} .pick input{flex:none;margin:0} .pick.accent{color:var(--accent)} /* ---- .warnline: eine Zeile, die nur bei einem Problem erscheint ---------- BAK-01 (26.08.2026). Bewusst KEINE Kachel: eine Anzeige, die immer gruen danebensteht, wird nach der zweiten Woche nicht mehr gelesen - und dann auch nicht, wenn sie rot ist. Dieselben Tokens wie .stat.warn, damit "Achtung" in der ganzen App eine Farbe hat und nicht drei. */ .warnline{display:flex;align-items:center;gap:8px;flex-wrap:wrap; background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn); border-radius:var(--radius);padding:10px 14px;margin-bottom:var(--sp-4)} .warnline a{color:var(--warn);text-decoration:underline} .warnline svg{flex:none} .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--panel);color:var(--ink);padding:8px 15px;border-radius:9px;font-size:14px;cursor:pointer;font-family:var(--sans)} .btn:hover{border-color:var(--accent);background:var(--row-hover)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-2)} /* Ein gesperrter Knopf muss auch gesperrt AUSSEHEN. Ohne diese Regel sah der Absendeknopf bei erreichter Schreibgrenze normal aus und liess sich nur nicht druecken - das wirkt wie ein Fehler statt wie eine Absicht. */ .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed} .btn:disabled:hover,.btn[disabled]:hover{border-color:var(--border);background:var(--panel)} .btn.primary:disabled:hover,.btn.primary[disabled]:hover{background:var(--accent)} .btn.ghost{background:transparent} .btn.sm{padding:5px 11px;font-size:13px} .toolbar{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap} .search{position:relative;flex:1;min-width:240px;max-width:420px} /* 07.09.2026: Die Suche trug die Feldgroesse von 14 px. In einer Filterzeile neben Auswahlfeldern und Datumsangaben ist sie damit das lauteste Element - und sie ist das Feld, in dem am wenigsten steht. --fs-md ist die Groesse, in der auch die Tabellen darunter schreiben. */ .search input{width:100%;font-size:var(--fs-md)} /* Datumsfelder gehoeren hier ausdruecklich dazu. Fehlten sie, fiel input[type=date] auf den nackten Browser-Stil zurueck: andere Hoehe als die Nachbarfelder, grauer Systemrahmen, und im dunklen Theme dunkle Schrift auf dunklem Grund. Genau das sah in der Filterzeile des Audit Logs falsch aus. */ input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=datetime-local],input[type=number],select{width:100%;padding:9px 12px;border:1px solid var(--field-border);border-radius:9px;background:var(--field);font-size:14px;font-family:var(--sans);color:var(--ink)} /* Der Fokus traegt jetzt beides: den farbigen Rahmen UND einen Ring. Vorher war der Ring im dunklen Theme (--accent-soft #2a2340) gegen eine Karte in #1c1c1f kaum zu sehen - der einzige Hinweis auf das aktive Feld war ein Rahmen in Lila, und der verschwand bei schmalen Feldern. */ input:focus,select:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)} input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--muted)} input::placeholder,textarea::placeholder{color:var(--faint)} /* Paket 13, 2.5: Auswahlfelder sahen als einzige Bedienelemente noch aus, wie der Browser sie gerade zeichnet - je nach System unterschiedlich hoch, mit fremdem Pfeil und in Chrome mit einem grauen Hintergrund, der neben den weissen Textfeldern daneben auffiel. appearance:none nimmt die Systemzeichnung weg, der Pfeil kommt als Inline-SVG im Hintergrund. `currentColor` geht in einer data-URL nicht - deshalb steht die Farbe zweimal da, hell und dunkel; sie ist bewusst --muted, damit der Pfeil den Wert nicht ueberstimmt. Gilt global fuer jedes select, nicht nur fuer das eine im Portal: ein Feld, das anders aussieht als die zwoelf daneben, ist genau der Bruch, den 2.5 beheben soll. */ select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; min-height:38px; /* wie .btn und die Textfelder */ padding-right:34px; /* Platz fuer den Pfeil */ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; cursor:pointer; } [data-theme="dark"] select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Kein eigenes color-scheme noetig: es steht in :root und in [data-theme=dark] und wird vererbt. Die aufklappende Liste zeichnet damit das Betriebssystem im richtigen Theme. */ select:focus-visible{outline:2px solid var(--accent);outline-offset:2px} select:disabled{opacity:.6;cursor:default;background-image:none} /* select ist eine Ausnahme von der Breitenregel oben: in Werkzeugleisten steht es neben Knoepfen und soll dort nicht die ganze Zeile nehmen. */ .toolbar select,.hstack select{width:auto} /* Gleiche Hoehe wie die Textfelder daneben. color-scheme sorgt dafuer, dass das aufklappende Kalenderblatt im dunklen Theme ebenfalls dunkel ist - sonst springt ein grellweisser Kasten auf. */ input[type=date],input[type=datetime-local]{min-height:38px;line-height:1.2;color-scheme:light} [data-theme="dark"] input[type=date],[data-theme="dark"] input[type=datetime-local]{color-scheme:dark} input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5;padding:2px;border-radius:5px;transition:opacity .15s ease,background .15s ease} input[type=date]:hover::-webkit-calendar-picker-indicator, input[type=datetime-local]:hover::-webkit-calendar-picker-indicator{opacity:.9} input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--accent-soft)} /* Kein filter:invert im dunklen Theme - color-scheme:dark laesst den Browser das Kalendersymbol bereits hell zeichnen. Eine zusaetzliche Umkehrung drehte es wieder auf dunkel und machte es auf dunklem Grund praktisch unsichtbar. */ /* Ein leeres Datumsfeld zeigt sonst ein blasses tt.mm.jjjj, das wie ein Fehler wirkt. */ input[type=date]::-webkit-datetime-edit{color:var(--ink)} input[type=date]:invalid::-webkit-datetime-edit{color:var(--faint)} /* ---- Popup-Muster ---- Gemeinsam fuer Foundry und Inbox, damit es das nicht zweimal als seitenlokales CSS gibt. Wichtig ist die Reihenfolge: OHNE die Klasse "js" am bleibt ein .pmgmodal eine ganz normale Karte im Seitenfluss. Das Formular steht immer im Quelltext und wird nur per JavaScript versteckt - faellt das Skript aus, erscheint es als Karte statt gar nicht. Bei einem Meldeweg fuer Probleme darf ein Skriptfehler nicht den einzigen Kanal zusperren. */ .pmgmodal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.38);align-items:center;justify-content:center;padding:20px} .pmgbox{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;width:440px;max-width:92vw;max-height:88vh;overflow:auto;box-shadow:0 18px 50px rgba(20,10,40,.28)} .pmgbox h3{margin:0 0 12px;font-size:16px} .pmgbox .field{margin-bottom:10px} .pmgbox label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px} .pmgbox input,.pmgbox select,.pmgbox textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink);font-size:14px;font-family:var(--sans)} .pmgbox input:disabled{opacity:.55} .pmgbox.wide{width:620px} .pmghead{display:flex;align-items:center;gap:10px;margin-bottom:12px} .pmghead h3{flex:1;margin:0} .pmgx{background:none;border:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;border-radius:6px} .pmgx:hover{color:var(--ink);background:var(--row-hover)} html.js .pmgmodal{display:none} html.js .pmgmodal.open{display:flex} /* Ohne JavaScript: normale Karte, kein Overlay, kein Schliessknopf. */ html:not(.js) .pmgmodal{position:static;background:none;padding:0;display:block} html:not(.js) .pmgbox{width:auto;max-width:none;max-height:none;box-shadow:var(--shadow);margin-bottom:16px} html:not(.js) .pmgx,html:not(.js) [data-modal-open],html:not(.js) [data-modal-close]{display:none} .menu{position:relative;display:inline-block} .menu-body{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(20,10,40,.18);padding:8px;min-width:230px;z-index:20} .menu.open .menu-body{display:block} .menu-body .row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:14px} .menu-body .row:hover{background:var(--row-hover)} .menu-body button.link{background:none;border:none;color:var(--ink);font-size:14px;cursor:pointer;width:100%;text-align:left;padding:8px;border-radius:7px;font-family:var(--sans)} .menu-body button.link:hover{background:var(--row-hover)} .menu-body input[type=text]{margin:4px 0} .sheetwrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow)} table.sheet{width:100%;border-collapse:collapse;font-size:13.5px} table.sheet thead th{position:sticky;top:0;background:var(--head);text-align:left;font-family:var(--sans);font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.03em;padding:11px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--line);white-space:nowrap} table.sheet thead th:last-child{border-right:none} table.sheet thead th.drag{cursor:grab} table.sheet thead th.dragover{background:var(--accent-soft);color:var(--accent-ink)} table.sheet tbody td{padding:10px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;color:var(--ink)} table.sheet tbody td:last-child{border-right:none} table.sheet tbody tr:nth-child(even){background:var(--row-alt)} table.sheet tbody tr:hover{background:var(--row-hover)} /* ---- Prozentfelder (07.09.2026) ---------------------------------------- Der Split und der PMG-Satz im Split Manager standen mit einem `style="width:56px"` im Formular. Ein Textfeld traegt links und rechts je 12 px Innenabstand und 1 px Rahmen - von den 56 px bleiben also 30 px fuer den Inhalt. "100,00" braucht bei 14 px Schrift rund 45. Die letzte Stelle war damit abgeschnitten, und zwar genau bei den zwei Werten, die am haeufigsten vorkommen: 100,00 und 33,33. Die Breite steht deshalb in ch (Zeichenbreiten) plus dem Rahmenwerk, nicht als nackte Pixelzahl: sie waechst mit der Schriftgroesse mit, statt beim naechsten Schrifttausch wieder zu klemmen. Rechts ausgerichtet und mit tabellarischen Ziffern, damit in einer Spalte die Kommas untereinander stehen. */ /* ---- Pflicht-Stern und Fragezeichen am Feldlabel (07.09.2026) ---------- Der Stern ist der Akzent des Hauses, nicht Rot: ein Pflichtfeld ist keine Fehlermeldung. --accent-ink liest sich in beiden Themes als "Lila", ohne im Dunkelmodus zu leuchten. Das Fragezeichen ist absichtlich leise (--faint) und wird beim Zeigen deutlich. Es traegt einen `title` - der Browser-Tooltip erscheint nach einer knappen Sekunde und ist damit die richtige Geschwindigkeit fuer einen Hinweis, den man nur beim ersten Mal braucht. */ .req{color:var(--accent-ink);font-weight:600} /* Das Feldraster der Nachmeldung. Stand als drei Angaben in einem style-Attribut; der Abstand kommt jetzt aus der Skala (--sp-4) statt aus einer nackten 16. */ /* "Track hinzufuegen" unter der Tabelle (07.09.2026). Ueber die ganze Breite und gestrichelt: der Knopf sieht damit aus wie die Leerzeile, die er anlegt, und nicht wie ein zweiter Absendeknopf neben dem echten. */ /* Die vier Kacheln der Portal-Uebersicht. Gleiche Hoehe, gleicher Aufbau - vorher standen Groesse, Schrift und Farbe als Inline-Stile an drei Stellen, und eine Kachel sah dadurch schnell anders aus als ihre Nachbarn. */ /* Eine Ueberschrift in Fliesstextgroesse - stand als style="font-size:..." an der Vorschau-Ueberschrift der Nachmeldung. */ .fs-md{font-size:var(--fs-md)} /* Gefunden am 07.09.2026, nachdem "der Kasten mit Works ist groesser" ein zweites Mal kam: `repeat(4,1fr)` ist `repeat(4,minmax(auto,1fr))`, und `auto` heisst "mindestens so breit wie der Inhalt". Die Zahl steht in --fs-2xl (30 px) Serif; bei einem Writer mit 377 oder 1697 Werken ist sie breiter als das Label "Open" daneben, und genau diese Spalte waechst. Die Kachel war also nicht falsch gebaut - das Raster gab ihr recht. `minmax(0,1fr)` nimmt der Spalte das Recht, wegen ihres Inhalts zu wachsen. Bewusst nur hier und nicht an .cols-4 allgemein: andere Seiten benutzen die Klasse fuer Karten, die sehr wohl mitwachsen sollen. */ .kpis{margin-bottom:var(--sp-5);grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:860px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Und die Zahl darf nicht ausbrechen, wenn die Kachel schmal wird. */ .kpi-num{overflow:hidden;text-overflow:ellipsis} .kpi{display:flex;flex-direction:column;justify-content:space-between; min-height:96px;color:inherit} .kpi-lab{color:var(--muted);font-size:var(--fs-sm)} .kpi-num{font-size:var(--fs-2xl);font-family:var(--serif);line-height:1.1; margin-top:var(--sp-1)} .pmadd{width:100%;justify-content:center;margin-top:var(--sp-2); border-style:dashed;color:var(--muted)} .pmadd:hover{border-style:solid;color:var(--accent-ink);border-color:var(--accent); background:var(--accent-soft)} /* Die Seitengroesse als eigenes Menue statt als `select` (07.09.2026, zweiter Anlauf). Ein aufgeklapptes `select` zeichnet das Betriebssystem - weisse Liste, Systemschrift, im Dunkelmodus ein heller Kasten in einer dunklen Seite. Mit CSS nicht erreichbar, deshalb das Menue des Hauses. Schmaler als die Spaltenwahl (230 px waeren fuer vier Zahlen absurd) und die Zahlen rechtsbuendig, damit 25 und 200 untereinander stehen. */ .perpage .menu-body{min-width:0;width:6.5rem} .perpage .menu-body .row{justify-content:flex-end;font-variant-numeric:tabular-nums; color:var(--ink);cursor:pointer} .perpage .menu-body .row.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} .msgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)} /* Die Anteilsspalte braucht Platz fuer "100,00" plus Stern und Fragezeichen. */ .pmshare{width:150px} .qmark{display:inline-flex;vertical-align:-2px;color:var(--faint);cursor:help} .qmark:hover,.qmark:focus-visible{color:var(--accent-ink)} .qmark:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} .pctfield{width:calc(7ch + 26px);text-align:right;font-variant-numeric:tabular-nums} /* Ein NUR-LESE-Wert, der in einer Spalte neben Eingabefeldern steht (PMG netto im Split Manager). Dieselbe Breite und derselbe Innenabstand wie ein Feld, nur ohne Rahmen und Flaeche - dadurch stehen die Ziffern auf derselben Linie. Ein rechtsbuendiger Text allein reicht dafuer nicht: die Eingabe traegt zusaetzlich 1 px Rahmen und 7 px Innenabstand, ihre letzte Ziffer sitzt also 8 px weiter innen. */ .pctval{display:inline-block;width:calc(7ch + 26px);padding:3px 7px; border:1px solid transparent;text-align:right; font-family:var(--mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums} /* Zahlenspalten: Kopf und Zelle rechtsbuendig. */ table.sheet th.num,table.sheet td.num{text-align:right} /* Eingaben in den Album-Tabellen des Split Managers auf Zeilenhoehe - dieselbe Regel, die `table.sheet.tight` mitbringt. Diese Tabellen tragen `tight` nicht, weil sie ihre Spaltenbreiten nicht fest vergeben. */ table.sheet.smsheet tbody td input[type=text], table.sheet.smsheet tbody td select{padding:3px 7px; min-height:0;height:28px;font-size:var(--fs-sm)} table.sheet.smsheet tbody tr{height:38px} /* Und der Grund, warum Titel und Version "nicht in line" standen: die Grundregel setzt `vertical-align:top` an jede Zellen (richtig fuer Zellen mit mehreren Zeilen). In einer Zeile mit 28 px hohen Eingaben klebt der Text damit oben, waehrend die Felder mittig sitzen - zwei Grundlinien in einer Zeile. `middle` gilt hier fuer ALLE Zellen dieser Tabelle, sonst verschiebt man das Problem nur von einer Spalte in die naechste. */ table.sheet.smsheet tbody td{vertical-align:middle} .mono{font-family:"SF Mono",ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12.5px;color:var(--muted)} .title-cell{font-weight:600;color:var(--ink)} /* Der Name in der ersten Spalte ist seit dem 11.08.2026 der Weg ins Profil (Songwriter-Liste, Paket 13/1.1). Er erbt die Farbe der Zelle statt der Linkfarbe: eine ganze Spalte in Lila zoege den Blick von den Statusmarken weg, die daneben etwas bedeuten. .title-cell.owner behaelt so auch als Link sein --accent-ink. Erkennbar wird der Link beim Zeigen - unterstrichen, und der Zeiger wechselt ohnehin. Bewusst auf .swtab und die Kartenliste EINGEGRENZT und nicht auf .title-cell a allgemein: im Posteingang ist der Betreff derselbe Bau, aber dort ist der Link die Hauptsache der Zeile und traegt zu Recht die Linkfarbe. */ .swtab .title-cell a{color:inherit;text-decoration:none} .swtab .title-cell a:hover{text-decoration:underline} .cardlist .cardrow .ct a{color:inherit;text-decoration:none} .cardlist .cardrow .ct a:hover{text-decoration:underline} .owner{font-weight:600;color:var(--accent-ink)} .muted{color:var(--muted)} .tagcell input{border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;font-size:13px} .tagcell input:hover{border-color:var(--border)} .tagcell input:focus{background:var(--field)} .splits{display:flex;flex-wrap:wrap;gap:6px} .split{background:var(--chip);border:1px solid var(--chip-border);border-radius:20px;padding:2px 9px;font-size:12px;color:var(--muted)} .split.client{background:var(--accent-soft);border-color:var(--chip-border);color:var(--accent-ink);font-weight:600} .split .pc{font-weight:600} .split.open{background:transparent;border-style:dashed;color:var(--faint)} .tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:20px;white-space:nowrap} .tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.open{background:var(--warn-soft);color:var(--warn)} .bars{display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:14px} .bars .bar{flex:1;background:var(--accent-soft);border-radius:5px 5px 0 0;min-width:8px} .bars .bar.hl{background:var(--accent)} .barlab{display:flex;gap:8px;margin-top:6px} .barlab span{flex:1;text-align:center;font-size:10.5px;color:var(--faint)} .hbar{height:9px;border-radius:5px;background:var(--line);overflow:hidden} .hbar>i{display:block;height:100%;background:var(--accent)} /* 08.09.2026: `flex-direction:column` dazu. `.login` war eine Flex-ZEILE mit einem einzigen Kind, der Karte - solange nichts daneben stand, sah man den Unterschied nicht. Seit die Sprachwahl als Geschwister der Karte darunter steht, machte die Zeile sie zur Nachbarin: die Flaggen landeten NEBEN dem Anmeldefeld. Gemeldet von Johannes. `align-items:center` zentriert in einer Spalte waagerecht, `justify-content` senkrecht - beide behalten damit ihre Wirkung, nur um 90 Grad gedreht. */ .login{min-height:100vh;display:flex;flex-direction:column; align-items:center;justify-content:center;background:var(--bg)} .login .box{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:38px 34px;width:360px;box-shadow:0 10px 40px rgba(30,15,60,.12)} .login img{height:34px;margin-bottom:22px} [data-theme="dark"] .login img{filter:invert(1) brightness(1.7)} .login label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px} .login .btn{width:100%;justify-content:center;margin-top:20px} .empty{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--muted)} .empty .big{font-family:var(--serif);font-size:var(--fs-xl);color:var(--ink);margin-bottom:var(--sp-2)} /* Auch im Leerzustand steht der Erklaertext in der Hinweisgroesse - vorher erbte er die 15 px des Fliesstexts und stand fast so gross da wie die Zeile darueber. */ .empty p{font-size:12.5px;line-height:1.45;margin:0} .check{width:56px;height:56px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px} .sec-title{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-3)} .sec-title h2{font-size:18px} /* UI-12: hier stand display:inline - und ausgerechnet ui.postbtn, die Fassung, die auf ueber vierzig Seiten gerendert wird, ueberschrieb das im style-Attribut mit inline-block. Zwei Regeln fuer denselben Zweck, die zweite unsichtbar im Markup. Es gilt inline-block fuer alle acht Stellen: ein Knopf hat eine Hoehe, und display:inline ignoriert sie. */ form.inline{display:inline-block} .fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)} .field label{display:block;font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--sp-2)} .hide{display:none !important} .flag{width:26px;height:18px;border-radius:3px;overflow:hidden;border:1px solid var(--border);opacity:.5;display:inline-block;line-height:0} .flag svg{width:100%;height:100%;display:block} .flag.on{opacity:1;box-shadow:0 0 0 2px var(--accent)} .flag:hover{opacity:.85} .impbar{background:var(--accent-soft);border-bottom:1px solid var(--chip-border);color:var(--accent-ink);padding:8px 32px;display:flex;align-items:center;gap:12px;font-size:13px} .impbar .btn{padding:4px 12px;font-size:13px} th.sortable{cursor:pointer;user-select:none} th .caret{opacity:.4;font-size:10px;margin-left:3px} th.sorted .caret{opacity:1;color:var(--accent-ink)} /* 08.09.2026: Das Klappmenue sitzt oben rechts IM Kasten. Absolut, damit es das Logo nicht nach unten schiebt; der Kasten hat dafuer position:relative. Vorher stand es als erstes Element im Fluss und war damit das Erste, was man auf der Seite sah - vor dem Logo. Zwischenzeitlich stand hier eine Reihe Flaggen unter der Karte. Sie ist wieder weg, Johannes wollte den Umschalter zurueck. Warum er auf diesen Seiten einen eigenen Zuhoerer braucht, steht in _langbar.html. */ .login .box{position:relative} .login .langmenu{position:absolute;top:12px;right:12px;margin:0} /* Das Menue klappt in einem 360 px breiten Kasten auf - rechts ausgerichtet, damit es nicht ueber den Rand haengt. */ .login .langmenu .menu-body{right:0;min-width:160px;text-align:left} /* ---- Passwort zeigen: Symbol IM Feld ----------------------------------- Dieselbe Bauform wie der Kalenderknopf im Datumsfeld (.datef): der Knopf sitzt absolut im Feld, und das Feld haelt rechts Platz frei. Vorher stand der Umschalter als Textlink UNTER dem Feld und schob den Anmeldeknopf eine Zeile tiefer. */ .pwfield{position:relative;display:block} .pwfield input{padding-right:38px} .pwbtn{position:absolute;right:4px;top:50%;transform:translateY(-50%); display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border:0;background:none;color:var(--muted); cursor:pointer;border-radius:var(--r-sm)} .pwbtn:hover{color:var(--ink);background:var(--row-hover)} .pwbtn[aria-pressed="true"]{color:var(--accent-ink)} .pwbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .login img{margin-top:4px} .login .box{text-align:center} .login .box form,.login label{text-align:left} .flagbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:5px 8px;cursor:pointer;color:var(--muted)} .flagbtn:hover{border-color:var(--accent)} .flagbtn .flag{opacity:1;border:none;width:24px;height:16px} .langmenu .menu-body{min-width:150px} .langmenu .menu-body .row{color:var(--ink)} .langmenu .menu-body .row.active{background:var(--accent-soft);color:var(--accent-ink)} .langmenu .menu-body .flag{opacity:1;width:24px;height:16px} /* CSV-Import Hilfe */ .qmark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%; border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;vertical-align:middle;margin-left:6px} .qmark:hover{border-color:var(--accent);color:var(--accent-ink)} .helpbox{display:none;margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel)} .helpbox.show{display:block} /* Hier standen bis zum 11.08.2026 sieben Klassen der Spotify-Top-Songs-Ansicht (.toplist .toprow .toprank .topmain .topname .popbar .toppop). Die Karte "Spotify Insights" im Songwriter-Profil war ihre einzige Stelle und ist mit Paket 13/1.7 entfallen - die Regeln sind mitgegangen. Falls wieder ein Fortschrittsbalken gebraucht wird: `.hbar` weiter unten tut dasselbe und wird benutzt. Ein zweiter Balken daneben waere genau die Art Doppelung, die dieses Aufraeumen beseitigt hat. */ /* Mini-Chips (Aliasse, IDs) */ .chips{display:flex;flex-wrap:wrap;gap:4px;max-width:220px} .mchip{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px;line-height:1.6;white-space:nowrap} .mchip.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px} /* Streaming-Profil-Buttons */ .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);color:var(--ink);transition:.15s} /* Auch beim Zeigen die Akzentfarbe statt Spotify-Gruen und Apple-Rot (11.08.2026, Paket 13/1.8). Die Ruhefarbe steht weiter unten bei .iconbtn.sp - dort steht auch die Begruendung. */ .iconbtn.sp:hover,.iconbtn.ap:hover{background:var(--accent);color:#fff;border-color:var(--accent)} /* Unlink-x in Chips */ .linkx{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px} .linkx:hover{color:var(--err)} /* ---------- Toasts ---------- */ .toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 40px))} .toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:14px; /* FIX 09.08.2026: hier stand var(--card,#fff) - die Variable --card gibt es in KEINER der beiden Paletten, der Rueckfallwert griff also immer. Im dunklen Theme war damit jede Meldung ein weisser Kasten, auf dem der geerbte helle Text (--ink:#ececee) praktisch unsichtbar war. --panel ist die Variable, die ueberall sonst fuer erhabene Flaechen steht. */ background:var(--panel);border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,.13); animation:toast-in .28s cubic-bezier(.2,.9,.3,1) both} .toast-ic{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;margin-top:1px} .toast-tx{flex:1;line-height:1.45;overflow-wrap:anywhere} .toast-x{flex:0 0 auto;background:none;border:none;cursor:pointer;font-size:17px;line-height:1;color:var(--muted,#8a8a95);padding:0 2px;font-family:inherit} .toast-x:hover{color:var(--ink)} .toast-ok .toast-ic{background:var(--ok)} .toast-warn .toast-ic{background:var(--warn)} .toast-err .toast-ic{background:var(--err)} .toast-ok{border-left:3px solid var(--ok)} .toast-warn{border-left:3px solid var(--warn)} .toast-err{border-left:3px solid var(--err)} .toast-out{animation:toast-out .38s ease forwards} @keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} @keyframes toast-out{to{opacity:0;transform:translateX(24px)}} @media (max-width:640px){.toasts{left:12px;right:12px;bottom:12px;max-width:none}} @media (prefers-reduced-motion:reduce){.toast,.toast-out{animation:none}} /* ===== Handy-Tauglichkeit (Paket 7) ====================================== Die App wurde bis dahin nur in Desktop-Breiten geprueft. Songwriter tragen Splits aber am Telefon ein - unter 861 px wird die Seitenleiste deshalb zur einblendbaren Schublade (Knopf oben links), und Abstaende, Tabellen und Popups ruecken enger zusammen. Tabellen scrollen seitlich im .sheetwrap, statt die Seite zu sprengen. */ .navbtn{display:none} .navbackdrop{display:none} @media (max-width:860px){ .navbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--ink); font-size:18px;cursor:pointer;flex:0 0 auto;padding:0} .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;height:100vh;height:100dvh; transform:translateX(-104%);transition:transform .22s ease;box-shadow:0 0 44px rgba(0,0,0,.28)} body.nav-open .sidebar{transform:none} /* Der Griff hat hier nichts zu suchen: die Leiste ist eine Schublade, und die Schublade hat schon einen Knopf (das Burger-Zeichen). Zwei Wege fuer dieselbe Sache waeren einer zu viel - und ein Griff, der am Bildrand einer unsichtbaren Leiste klebt, ist auf dem Telefon ein Fehlklick. Auch die Breitenregeln muessen hier weg, sonst bliebe die Schublade eingeklappt. */ .sidegrip{display:none} .side-off .sidebar{width:var(--side-w);flex-basis:var(--side-w);border-right-color:var(--border)} .side-off .sidebar .logo,.side-off .sidebar .navwrap,.side-off .sidebar .sideuser{opacity:1;pointer-events:auto} .side-off .topbrand{display:none} body.nav-open .navbackdrop{display:block;position:fixed;inset:0;background:rgba(15,10,25,.45);z-index:50} body.nav-open{overflow:hidden} .topbar{padding:var(--sp-3) var(--sp-3);gap:var(--sp-2)} .topbar h1{font-size:18px} .content{padding:var(--sp-4) var(--sp-3) var(--sp-8)} .impbar{padding:var(--sp-2) var(--sp-3)} /* 16px in Eingabefeldern ist Absicht: darunter zoomt iOS beim Fokussieren die ganze Seite heran, und man findet sich nach dem Tippen woanders wieder. */ input,select,textarea{font-size:16px} .pmgbox input,.pmgbox select,.pmgbox textarea{font-size:16px} .pmgbox.wide{width:440px} /* Kachel-Raster stapeln statt quetschen: 4 Spalten auf 360 px hiessen abgeschnittene Karten und Seitwaertsscrollen der ganzen Seite. */ .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:1fr} .cols-2{grid-template-columns:1fr} table.sheet{font-size:12.5px} table.sheet thead th{padding:9px 10px} table.sheet td{padding:8px 10px} } @media (max-width:560px){ /* Name im Kopf ausblenden - er steht ohnehin in der Seitenleiste. Das Avatar-Kuerzel bleibt als Anker. */ .topbar .chip{font-size:0;gap:0} .topbar .sub{display:none} .search{min-width:150px} } @media (prefers-reduced-motion:reduce){.sidebar{transition:none}} /* Aktionsleiste der Mehrfachauswahl im Split Manager (Paket U1). Schwebt unten mittig, erscheint erst, wenn etwas angehakt ist. */ .smbar{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:45; background:var(--panel);border:1px solid var(--border);border-radius:14px; box-shadow:0 14px 40px rgba(20,10,40,.22);padding:10px 14px;gap:10px;align-items:center; max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center} .smbar.show{display:flex} /* Split Manager: kompakte Listen-Ansicht (Nachtrag Paket U1). Jedes Album ist ein
; die summary-Zeile ist die Kompaktdarstellung, der Inhalt die bisherige Karte. Checkboxen app-weit in der Akzentfarbe statt Browser-Blau. */ /* accent-color stand hier - es faerbt nur den ANGEHAKTEN Zustand. Der leere Kasten blieb weiss. Die vollstaendige Zeichnung steht weiter unten im Abschnitt Paket D2. */ input[type=checkbox]{accent-color:var(--accent)} .smitem{padding:0} .smitem summary{list-style:none} .smitem summary::-webkit-details-marker{display:none} .smrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;cursor:pointer; padding:11px 16px;user-select:none;-webkit-user-select:none;border-radius:var(--radius)} .smrow:hover{background:var(--row-hover)} .smitem[open] .smrow{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0} .smrow-x{font-size:11px;color:var(--muted);transition:transform .15s ease;flex:0 0 auto} .smitem[open] .smrow-x{transform:rotate(90deg)} .smrow-title{font-family:var(--serif);font-size:15.5px} .smbody{padding:14px 16px 16px} .smpick{width:17px;height:17px;flex:0 0 auto;cursor:pointer} /* --------------------------------------------------------------------------- Kompakt vs. Karten (Nachtrag nach Paket 8) Vorher waren beide Ansichten dieselbe Karte, nur auf- oder zugeklappt - der Unterschied war praktisch nicht sichtbar. Jetzt ist "kompakt" eine echte Liste: eine Zeile je Release, nicht umbrechend, und aufgeklappt zeigt sie NUR die ISRC-Tabelle. Die Karten bleiben wie gehabt. --------------------------------------------------------------------------- */ .mode-compact .smitem{margin-bottom:0 !important;border-radius:0;border-top:0} .mode-compact .smitem:first-of-type{border-radius:var(--radius) var(--radius) 0 0;border-top:1px solid var(--border)} .mode-compact .smitem:last-of-type{border-radius:0 0 var(--radius) var(--radius)} .mode-compact .smrow{flex-wrap:nowrap;padding:6px 12px;gap:8px;font-size:13px;min-height:34px} /* 07.09.2026: `max-width:38vw` schnitt den Titel ab, obwohl rechts daneben Platz war - der Deckel sass fest an der Fensterbreite und nicht an dem, was die Zeile tatsaechlich noch frei hat. Jetzt nimmt der Titel den freien Raum (flex:1) und kuerzt erst, wenn er wirklich nicht mehr passt. `min-width:0` ist dabei die Bedingung, ohne die ein Flex-Kind gar nicht schrumpfen kann - sonst schiebt es die Chips rechts aus der Zeile. */ /* 07.09.2026, Nachtrag: `flex:1 1 auto` liess den Titel ALLEN freien Platz nehmen - der Chip "5 Fassungen" wurde damit vom Titel weggeschoben und stand mitten in der Zeile. Gemeint war nur, den harten Deckel von 38vw loszuwerden. `flex:0 1 auto` ist der Unterschied: der Titel nimmt, was er braucht, und schrumpft erst, wenn es eng wird. Der Chip steht damit wieder direkt neben ihm, und den Rest der Zeile schiebt der .spacer nach rechts. */ .mode-compact .smrow-title{font-family:var(--sans);font-size:13.5px;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex:0 1 auto;min-width:0;max-width:none} .mode-compact .smrow .tag,.mode-compact .smrow .mchip{font-size:10.5px;padding:1px 7px} .mode-compact .smrow .smmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mode-compact .smbody{padding:6px 12px 12px} /* Kompakt zeigt ausschliesslich die ISRC-Ebene. */ .mode-compact .smb-fields,.mode-compact .smb-actions,.mode-compact .smb-meta{display:none} .mode-compact .smb-isrc>summary{display:none} .mode-compact .sheet th,.mode-compact .sheet td{padding:5px 8px;font-size:12.5px} /* Die album-weiten Felder stehen breiter als ein Prozentwert braucht, aber nicht ueber die ganze Karte - der Wert stand vorher zweimal als style="max-width:440px" an denselben zwei Feldern (UI-12). */ .smb-fields .field{max-width:440px} .mode-cards .smb-isrc>summary{display:list-item} /* In den Karten gibt es keine Ziehen-Auswahl - dort wird gearbeitet, nicht selektiert. Die Checkbox bleibt trotzdem klickbar. */ .mode-cards .smrow{cursor:default} /* --------------------------------------------------------------------------- Auswahl-Zustand, app-weit (Paket D, 10.08.2026) Vorher bekam im Split Manager das GANZE
den getoenten Hintergrund. Weil .smitem gerundete Ecken hat, sah eine ausgewaehlte Zeile aus wie ein eigener, herausgehobener Block - ein zweiter Rahmen mitten in der Liste. Bei zwoelf ausgewaehlten Zeilen zerfaellt die Liste dadurch optisch. Jetzt traegt nur die ZEILE den Zustand: Haekchen vorne plus Akzentbalken. Das reicht - das Haekchen ist ohnehin die verlaessliche Auskunft, und wer mit der Tastatur arbeitet, braucht den Fokusring davon unterscheidbar. .is-selected ist der app-weite Name. Tabellenzeilen in Works, Foundry und Suggestions benutzen ihn direkt; der Split Manager setzt weiter .sel auf das
, deshalb steht sein Selektor hier daneben. --------------------------------------------------------------------------- */ .is-selected,.smitem.sel>.smrow{ background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)} tr.is-selected>td{background:var(--accent-soft)} tr.is-selected>td:first-child{box-shadow:inset 3px 0 0 var(--accent)} .smitem.sel .smrow-title,.is-selected .smrow-title{color:var(--accent-ink)} .smrow.dragover{outline:2px solid var(--accent);outline-offset:-2px} .mode-compact .smpick{width:15px;height:15px} /* Beim Ziehen soll der Text nicht blau markiert werden. */ body.smdragging{user-select:none;-webkit-user-select:none;cursor:cell} /* Ansicht-Umschalter als Segment statt zwei loser Knoepfe. */ .viewseg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden} .viewseg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px; padding:7px 12px;cursor:pointer} .viewseg button+button{border-left:1px solid var(--border)} .viewseg button.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600} /* Datei-Auswahl. Das nackte war der haesslichste Knopf der App - jetzt ein Label im Stil der uebrigen Knoepfe, der Dateiname steht daneben. Das Eingabefeld selbst bleibt im DOM (Formular unveraendert). */ .filepick{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap} .filepick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .filepick label{display:inline-flex;align-items:center;gap:7px;cursor:pointer; border:1px dashed var(--border);background:var(--panel);color:var(--ink); padding:9px 14px;border-radius:10px;font-size:13.5px;transition:.15s} .filepick label:hover{border-color:var(--accent);background:var(--row-hover);color:var(--accent-ink)} .filepick label:focus-within{outline:2px solid var(--accent);outline-offset:2px} .filepick .fname{font-size:12.5px;color:var(--muted);max-width:220px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .filepick.has label{border-style:solid;border-color:var(--accent);color:var(--accent-ink)} .filepick.has .fname{color:var(--ink)} /* Zuordnungs-Feld in den Vorschlaegen: der Vorschlag steht vorbelegt drin und ist als solcher markiert. */ .assignwrap{display:inline-flex;align-items:center;gap:6px} .assignwrap select{min-width:150px;font-size:12.5px;padding:5px 8px} .assignwrap .sugg{font-size:10.5px;color:var(--accent-ink);background:var(--accent-soft); border-radius:6px;padding:1px 6px;white-space:nowrap} /* =========================================================================== Hilfe-Seite (09.08.2026) Reiter und die Ablauf-Grafik "Weg eines Werks". Die Grafik ist bewusst reines HTML und CSS - kein Bild, keine Bibliothek: sie muss in beiden Themes stimmen, in sechs Sprachen unterschiedlich lange Beschriftungen vertragen und sich am Telefon von der Reihe zur Spalte umlegen lassen. Ein PNG koennte das nicht. =========================================================================== */ .helptabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:18px; border-bottom:1px solid var(--border);scrollbar-width:none} .helptabs::-webkit-scrollbar{display:none} .helptabs a{flex:0 0 auto;padding:8px 14px;border-radius:9px;font-size:13.5px; color:var(--muted);border:1px solid transparent;white-space:nowrap} .helptabs a:hover{background:var(--row-hover);color:var(--ink)} .helptabs a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600; border-color:var(--chip-border)} /* ---- Ablauf-Grafik ---- */ .wf{margin:18px 0 6px} .wf-lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint); font-weight:600;margin:0 0 8px} .wf-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .wf-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius); padding:14px 16px;box-shadow:var(--shadow)} .wf-card .wf-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);font-size:15px;margin-bottom:8px} .wf-card b{display:block;font-size:14px;margin-bottom:2px} /* Der Pfeil ist eine Linie mit Spitze, keine Schriftzeichen-Pyramide: so bleibt er in jeder Sprache und bei jedem Zoom gleich dick. */ .wf-flow{display:flex;flex-direction:column;align-items:center;gap:0;margin:10px 0} .wf-down{width:2px;height:26px;background:var(--accent);opacity:.35} .wf-tip{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent; border-top:9px solid var(--accent);opacity:.35;margin-bottom:2px} .wf-gate{background:var(--accent-soft);border:1px solid var(--chip-border);border-radius:var(--radius); padding:14px 18px;color:var(--accent-ink)} .wf-gate b{display:block;font-size:14px;margin-bottom:2px} .wf-gate .hint{color:var(--accent-ink);opacity:.85} /* Die drei Stufen. Der farbige Streifen oben nimmt genau die Farben der Status-Marken aus der App auf - wer die Grafik gelesen hat, erkennt die Marke in der Werkliste wieder. */ .wf-rail{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0} .wf-stage{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius); padding:0 0 14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column} .wf-stage .wf-bar{height:4px} /* UI-14: hier standen drei Hex-Werte, als einzige Farbangaben der Datei ausserhalb des Token-Satzes. Der Kommentar darueber behauptete schon, sie naehmen "genau die Farben der Status-Marken" auf - taten sie aber nur im hellen Theme, und im dunklen leuchteten sie als drei fremde Flecken. Offen/eingereicht/registriert heissen --info/--warn/--ok. */ .wf-stage.s1 .wf-bar{background:var(--info)} .wf-stage.s2 .wf-bar{background:var(--warn)} .wf-stage.s3 .wf-bar{background:var(--ok)} .wf-stage .wf-head{display:flex;align-items:center;gap:9px;padding:13px 16px 0} .wf-num{font-family:var(--serif);font-size:24px;line-height:1;color:var(--faint)} .wf-stage h3{font-size:15px;padding:8px 16px 0} .wf-stage .hint{padding:0 16px} /* margin-top:auto schiebt die Zeile an den unteren Rand. Ohne das saessen die drei Fusszeilen auf verschiedenen Hoehen, weil die Beschreibungen ueber ihnen unterschiedlich lang sind - und in sechs Sprachen sind sie das immer. */ .wf-who{margin:12px 16px 0;padding-top:9px;border-top:1px dashed var(--border); font-size:11.5px;color:var(--muted);margin-top:auto} .wf-who b{color:var(--ink);font-weight:600} .wf-chev{display:flex;align-items:center;justify-content:center;width:46px; color:var(--accent);opacity:.45;font-size:22px;line-height:1} .wf-return{display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px 14px; border:1px dashed var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--muted)} .wf-always{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px 16px; border-radius:var(--radius);background:var(--head);border:1px solid var(--border);font-size:12.5px} .wf-always .mchip{font-size:12px} @media (max-width:860px){ /* Am Telefon wird aus der Reihe eine Spalte, und die Pfeile drehen sich mit. */ .wf-sources{grid-template-columns:1fr} .wf-rail{grid-template-columns:1fr} .wf-chev{width:auto;height:34px;transform:rotate(90deg)} /* Nebeneinander bricht die Zeile unschoen um: die Erklaerung landete rechts NEBEN den Marken statt darunter. Untereinander liest sie sich richtig. */ .wf-always{flex-direction:column;align-items:flex-start;gap:8px} .wf-always .hint{min-width:0} } @media (prefers-reduced-motion:reduce){.helptabs{scroll-behavior:auto}} /* --------------------------------------------------------------------------- Schalter (.switch) - 09.08.2026 Ein Haekchen und ein Schalter sind nicht dasselbe. Ein Haekchen heisst "dieses Element ist ausgewaehlt" und gehoert in Listen, aus denen man mehreres herausgreift. Ein Schalter heisst "diese Faehigkeit ist an oder aus" und gehoert dorthin, wo genau ein Zustand geschaltet wird - Rechtevergabe zum Beispiel. Vorher sahen beide Faelle gleich aus. Die echte Checkbox bleibt im Markup und traegt weiterhin name und value; sie liegt nur unsichtbar ueber der Bahn. Damit aendert sich am Formular und an der Tastaturbedienung nichts, und ohne CSS bleibt eine ganz normale Checkbox uebrig. Reihenfolge im Markup: input, dann .track, dann .knob - die Geschwister-Selektoren unten setzen das voraus. --------------------------------------------------------------------------- */ .switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto; width:44px;height:25px;vertical-align:middle} .switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0; cursor:pointer;z-index:2} /* AUS ist ein sattes Grau, nicht ein helles: ein Schalter, der ausgeschaltet fast so hell ist wie die Karte darunter, sieht aus wie ein Ladefehler. AN sind ZWEI Lila uebereinander - der Verlauf gibt der Bahn Tiefe und macht den Unterschied auch dann sichtbar, wenn jemand Farben schlecht trennt. */ .switch .track{position:absolute;inset:0;border-radius:var(--r-pill); background:var(--sw-off);border:1px solid var(--sw-off-b); transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); box-shadow:inset 0 1px 2px rgba(0,0,0,.12)} .switch .knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%; background:#fff;box-shadow:0 1px 2px rgba(20,10,40,.35),0 0 0 .5px rgba(20,10,40,.08); transition:transform var(--dur-fast) var(--ease-out);pointer-events:none} .switch input:checked ~ .track{ background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 100%); border-color:var(--accent);box-shadow:inset 0 1px 2px rgba(255,255,255,.18)} .switch input:checked ~ .knob{transform:translateX(19px)} .switch input:disabled{cursor:not-allowed} .switch input:disabled ~ .track{opacity:.45} .switch input:disabled ~ .knob{opacity:.65} .switch input:focus-visible ~ .track{outline:2px solid var(--accent);outline-offset:2px} .switch:hover .track{border-color:var(--accent)} .switch:hover input:not(:checked) ~ .track{background:var(--sw-off-h)} @media (prefers-reduced-motion:reduce){.switch .track,.switch .knob{transition:none}} @media (max-width:900px){ .switch{width:50px;height:29px} .switch .knob{width:23px;height:23px} .switch input:checked ~ .knob{transform:translateX(21px)} } /* ---- Haekchen ------------------------------------------------------------ Das Systemhaekchen sah im dunklen Theme aus wie ein weisser Klebezettel: heller Kasten, heller Rahmen, mitten in einer dunklen Zeile. accent-color faerbt nur den ANGEHAKTEN Zustand - der leere Kasten blieb weiss. Deshalb zeichnen wir ihn selbst; Groesse, Rahmen und Haken folgen dem Rest der App. */ input[type=checkbox]{appearance:none;-webkit-appearance:none; width:18px;height:18px;flex:0 0 auto;margin:0;border-radius:5px;cursor:pointer; border:1.5px solid var(--cb-border);background:var(--cb-bg); display:inline-grid;place-content:center;vertical-align:-3px; transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} input[type=checkbox]:hover{border-color:var(--accent)} input[type=checkbox]::before{content:"";width:11px;height:11px;transform:scale(0); transition:transform var(--dur-fast) var(--ease-out);background:#fff; clip-path:polygon(14% 47%,0 62%,40% 100%,100% 20%,85% 6%,38% 70%)} input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)} input[type=checkbox]:checked::before{transform:scale(1)} /* Zwischenzustand der Kopf-Checkbox: ein Strich, kein Haken. */ input[type=checkbox]:indeterminate{background:var(--accent);border-color:var(--accent)} input[type=checkbox]:indeterminate::before{transform:scale(1);height:2.5px;width:10px; border-radius:2px;clip-path:none} input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed} /* Groessere Trefferflaeche am Telefon, ohne den Kasten aufzublasen. */ @media (max-width:900px){input[type=checkbox]{width:22px;height:22px} input[type=checkbox]::before{width:13px;height:13px}} /* Waehrend des Ziehens soll nichts blau markiert werden. */ body.pmgdrag{user-select:none;-webkit-user-select:none;cursor:cell} body.pmgdrag *{cursor:cell !important} /* --------------------------------------------------------------------------- Aufraeumen 08.08.2026 --------------------------------------------------------------------------- */ /* Loesch-Knoepfe: acht Stellen trugen dieselbe hartkodierte Farbe #e5484d, die in KEINER Palette steht - im Dunkelmodus stach sie heraus. Jetzt eine Klasse auf Basis der Variablen. */ .btn.danger{border-color:var(--err);color:var(--err)} .btn.danger:hover{border-color:var(--err);background:var(--err);color:var(--on-err)} /* Mehrzeilige Eingabefelder sahen an vier Stellen nur deshalb richtig aus, weil dort dasselbe lange style-Attribut stand - und an einer fuenften eben nicht. */ textarea{width:100%;padding:9px 12px;border:1px solid var(--field-border);border-radius:9px; background:var(--field);color:var(--ink);font-family:var(--sans);font-size:14px} textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)} /* Leerzeile in Tabellen - stand neunmal als Inline-Stil da. */ .cell-empty{text-align:center;padding:26px;color:var(--muted)} @media (max-width:900px){ /* Klickflaechen: .btn.sm war 31 px hoch, die Auswahl-Checkbox 15 px. */ .btn.sm{padding:8px 13px} .smpick{width:22px;height:22px} .mode-compact .smpick{width:20px;height:20px} } /* =========================================================================== PAKET D2 · 09.08.2026 Fokus, Bewegung, und die Bausteine, die es vorher nur seitenlokal oder gar nicht gab. Alles hier ist global - wer eine dieser Klassen braucht, schreibt kein eigenes