/* Anton liegt selbst auf dem Server (web/schrift/, OFL-Lizenz), nicht mehr bei Google: kein Abruf fremder Server (Google Fonts von aussen wurde in DE schon abgemahnt, LG Muenchen 20.01.2022), schneller. Nur Latein + Deutsch, 24 KB. */ @font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url("../schrift/anton.woff2") format("woff2")} :root{ color-scheme:light; --bg:#F2F2F7; --raised:#FFFFFF; --sunken:#E9E9EE; --sep:rgba(60,60,67,.13); --sep-2:rgba(60,60,67,.22); --ink:#000; --ink-2:rgba(60,60,67,.74); --ink-3:rgba(60,60,67,.5); --tint:#8A5D00; --tint-bg:rgba(138,93,0,.13); --on-tint:#fff; --action:#111113; --on-action:#D99A00; --hero:#111113; --gruen:#26743A; --gelb:#1D5FD6; --rot:#B01B4E; --gruen-bg:rgba(38,116,58,.14); --gelb-bg:rgba(29,95,214,.13); --rot-bg:rgba(176,27,78,.12); --e1:0 1px 2px rgba(27,31,44,.04),0 8px 24px rgba(27,31,44,.07); --e2:0 2px 6px rgba(27,31,44,.07),0 16px 42px rgba(27,31,44,.12); --e3:0 -12px 48px rgba(0,0,0,.18); --glas:rgba(233,233,238,.72); --glas-leiste:rgba(242,242,247,.93); /* Drei Kurven, drei Aufgaben. Vorher machte --ios alles - auch Knopfdruck und Farbwechsel. Die Schubladenkurve startet extrem langsam; auf einem Knopf liest sich das als Verzoegerung. Werte aus dem animate-Skill, nicht selbst gebastelt. */ --ios:cubic-bezier(.32,.72,0,1); /* Schublade: Blatt, Schleier */ --aus:cubic-bezier(.23,1,.32,1); /* kommt/geht: Knopfdruck, Einblenden */ --durch:cubic-bezier(.77,0,.175,1); /* bewegt sich auf dem Schirm: Drehen */ } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#000; --raised:#1C1C1E; --sunken:#2C2C2E; --sep:rgba(84,84,88,.5); --sep-2:rgba(120,120,128,.55); --ink:#fff; --ink-2:rgba(235,235,245,.64); --ink-3:rgba(235,235,245,.4); --tint:#FFB700; --tint-bg:rgba(255,183,0,.16); --on-tint:#1A1200; --action:#F2F2F7; --on-action:#6A4700; --hero:#1C1C1E; --gruen:#4FD06F; --gelb:#7FB2FF; --rot:#FF7BA3; --gruen-bg:rgba(79,208,111,.17); --gelb-bg:rgba(127,178,255,.17); --rot-bg:rgba(255,123,163,.15); --e1:0 .5px 1px rgba(0,0,0,.5); --e2:0 8px 28px rgba(0,0,0,.6); --e3:0 -12px 48px rgba(0,0,0,.7); --glas:rgba(44,44,46,.7); --glas-leiste:rgba(22,22,24,.93); }} :root[data-theme="dark"]{ color-scheme:dark; --bg:#000; --raised:#1C1C1E; --sunken:#2C2C2E; --sep:rgba(84,84,88,.5); --sep-2:rgba(120,120,128,.55); --ink:#fff; --ink-2:rgba(235,235,245,.64); --ink-3:rgba(235,235,245,.4); --tint:#FFB700; --tint-bg:rgba(255,183,0,.16); --on-tint:#1A1200; --action:#F2F2F7; --on-action:#6A4700; --hero:#1C1C1E; --gruen:#4FD06F; --gelb:#7FB2FF; --rot:#FF7BA3; --gruen-bg:rgba(79,208,111,.17); --gelb-bg:rgba(127,178,255,.17); --rot-bg:rgba(255,123,163,.15); --e1:0 .5px 1px rgba(0,0,0,.5); --e2:0 8px 28px rgba(0,0,0,.6); --e3:0 -12px 48px rgba(0,0,0,.7); --glas:rgba(44,44,46,.7); --glas-leiste:rgba(22,22,24,.93); } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* Kein Gummizug ueber den eigentlichen Inhalt hinaus - weder am oberen noch am unteren Rand der Seite. Ohne das laesst iOS Safari weiter "ziehen", auch wenn nichts mehr da ist, was scrollen koennte. Sowohl html als auch body, weil je nach iOS-Version der eine oder der andere Knoten der tatsaechliche Scroll-Container ist. */ html{overscroll-behavior-y:none} body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior-y:none; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif; font-size:17px;line-height:1.4;letter-spacing:-.01em;-webkit-font-smoothing:antialiased} /* Unten steht jetzt beides uebereinander: der schwebende Aktionsknopf und darunter die Bereichsleiste. Der Inhalt muss an beiden vorbei. */ .app{max-width:44rem;margin:0 auto; padding:0 1rem calc(12.4rem + env(safe-area-inset-bottom))} header{padding:1.7rem 0 1rem;display:flex;align-items:flex-start;gap:.8rem} .konto{flex:0 0 auto;width:2.5rem;height:2.5rem;border-radius:50%;border:0; background:var(--tint-bg);color:var(--tint);font:inherit;font-size:1rem; font-weight:700;cursor:pointer;display:grid;place-items:center; margin-top:.2rem;transition:transform .14s var(--aus)} .konto:active{transform:scale(.92)} .konto[hidden]{display:none} /* Grosze Schrift will ENGER laufen, kleine weiter - eine feste Laufweite ist irgendwo immer falsch (apple-design, Abschnitt Typografie). */ .brand{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase; font-size:1.75rem;line-height:1.05;margin:0;letter-spacing:-.015em} .brand span{color:var(--tint)} /* Klein und mitlaufend: die Groesze haengt an der Schrift, damit es beim Zusammenschrumpfen des Kopfes (body.ab) mitgeht statt stehen zu bleiben. */ /* Kein border-radius mehr, kein eigener Hintergrund - das svg traegt seit 18.09.2026 stroke="currentColor" und ist damit einfach ein Teil der Ueberschrift, kein eigenes Kachelbild. */ .brand .zeichen{width:.92em;height:.92em; vertical-align:-.04em;margin-right:.34em;flex-shrink:0} .sub{margin:.4rem 0 0;color:var(--ink-3);font-size:.78rem;letter-spacing:.06em; text-transform:uppercase;font-weight:600} /* Milchglas: die Leiste liegt ueber dem Inhalt, der darunter durchscheint */ .seg{display:flex;background:var(--sunken);border-radius:10px;padding:2px;gap:2px; box-shadow:var(--e1)} #kopf-ende{height:1px;margin-bottom:-1px} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .seg{background:var(--glas);backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)} } .seg button{flex:1;border:0;background:transparent;color:var(--ink-2);font:inherit; font-size:.9rem;font-weight:600;padding:.5rem .2rem;border-radius:8px;min-height:2.2rem; cursor:pointer;transition:background .2s ease,color .2s ease} .seg button.ikon{flex:0 0 3rem;font-size:1.05rem} .seg button[aria-selected="true"]{background:var(--raised);color:var(--ink);box-shadow:var(--e1)} .seg button:active{transform:scale(.97)} .grp{margin-top:1.5rem} .grp-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:0 .25rem .5rem;font-size:.74rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3)} .grp-h .tint{color:var(--tint)} .card{background:var(--raised);border-radius:22px;box-shadow:var(--e1);overflow:hidden} .item{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:transparent; border:0;padding:.85rem .9rem;min-height:3.6rem;font:inherit;color:var(--ink); cursor:pointer;position:relative;transition:background .15s ease} .item+.item::before{content:"";position:absolute;left:.9rem;right:0;top:0;height:1px;background:var(--sep)} .item:active{background:var(--sunken)} /* Der Balken links heiszt BELEGT. Vorher markierte er den Sonntag - eine Annahme darueber, womit man anfaengt. Belegt oder frei ist dagegen immer dasselbe und das, was man beim Scrollen sucht. */ .item.belegt{box-shadow:inset 3px 0 0 var(--tint)} .item.mehr{color:var(--ink-3)} .item.mehr .chev{font-size:1.1rem} /* Feste Mindesthoehe, weil die zweite Zeile nur manchmal da ist ("heute", "taeglich"). Ohne das haetten belegte und freie Zeilen unterschiedliche Hoehen und die Liste wirkte unruhig. */ .i-date{min-width:5.2rem;flex-shrink:0;min-height:2.2rem} .i-d{display:block;font-weight:650;font-variant-numeric:tabular-nums;font-size:.97rem;letter-spacing:-.02em} .i-k{display:block;font-size:.71rem;color:var(--ink-3);font-weight:520;margin-top:.12rem} /* Der Name ist das Wichtigste in der Zeile und bekommt seinen Platz zuerst. Vorher hatte er flex:1 UND min-width:0, die Markenspalte daneben aber flex-shrink:0 - bei einem Platz mit "auszer der Reihe" und "Dreh steht an" blieben dem Namen gemessene 0 Pixel, und overflow-wrap:anywhere brach "Izzy" in vier Zeilen. Die Zeile war 346 statt 60 Pixel hoch. */ .i-main{flex:1 1 auto;min-width:5.5rem} .i-name{font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere;display:block} .i-sub{font-size:.82rem;color:var(--ink-3);overflow-wrap:anywhere;display:block;margin-top:.22rem} .i-frei{color:var(--ink-3);font-size:.9rem} /* Die Marken duerfen schrumpfen und umbrechen. Zwei Pillen und ein Zeichen passen auf einem Telefon nicht neben einen Namen - dann gehen sie eben in die zweite Reihe, statt den Namen zu zerquetschen. */ .i-right{display:flex;align-items:center;justify-content:flex-end;gap:.35rem; flex:0 1 auto;min-width:0;flex-wrap:wrap} .chev{color:var(--ink-3);font-size:1.15rem;line-height:1;opacity:.55;margin-left:.1rem} .num{width:1.65rem;height:1.65rem;border-radius:7px;display:grid;place-items:center; font-size:.83rem;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0} /* cg/cy/cr tragen die EINSTUFUNG, nicht die Wahrscheinlichkeit. Deshalb kein Gruen-Gelb-Rot mehr, sondern abnehmendes Gewicht: Stark steht voll da, Reserve bleibt ein Umriss. */ .cg{background:var(--tint-bg);color:var(--tint);font-weight:700} .cy{background:var(--sunken);color:var(--ink-2);font-weight:600} .cr{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--sep)} .pill{font-size:.71rem;font-weight:650;padding:.24rem .55rem;border-radius:9px; white-space:nowrap;flex-shrink:0;background:var(--sunken);color:var(--ink-2)} /* Ein Duo ist kein Status und keine Einstufung, sondern eine andere ART Zeile. Deshalb eine eigene Farbe statt gruen/gelb/rot. */ .pill.pd{background:var(--tint-bg);color:var(--tint)} /* Die Einstufungs-Pillen, passend zu cg/cy/cr weiter oben. */ .pill.st1{background:var(--tint-bg);color:var(--tint);font-weight:700} .pill.st2{background:var(--sunken);color:var(--ink-2)} .pill.st3{background:transparent;color:var(--ink-3); box-shadow:inset 0 0 0 1.5px var(--sep)} .pill.pg{background:var(--gruen-bg);color:var(--gruen)} .pill.py{background:var(--gelb-bg);color:var(--gelb)} .pill.pr{background:var(--rot-bg);color:var(--rot)} .pill.pt{background:var(--tint-bg);color:var(--tint)} .g{width:1.65rem;height:1.65rem;border-radius:7px;display:grid;place-items:center; font-size:.83rem;font-weight:700;flex-shrink:0} .gg1{background:var(--tint);color:var(--on-tint)} .gg2{background:var(--tint-bg);color:var(--tint)} .gg3{background:var(--sunken);color:var(--ink-3)} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem} .stat{background:var(--sunken);border-radius:17px;padding:.78rem .4rem;box-shadow:none; text-align:center;border:0;font:inherit;color:inherit;width:100%} button.stat{cursor:pointer} button.stat:active{transform:scale(.96)} .stat .n{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1} .stat .l{font-size:.66rem;color:var(--ink-3);font-weight:600;margin-top:.2rem} /* Der freie Vorrat ist die Zahl, nach der auf dem Plan entschieden wird. Drei leere Stufen brauchen keine vier gleich lauten Kacheln: die vierte traegt deshalb die Markenflaeche, ohne die Ampelfarben anzufassen. */ .plan-balance .stat:last-child{background:var(--tint);color:var(--on-tint)} .plan-balance .stat:last-child .l{color:var(--on-tint);opacity:.82} .balance-card{background:var(--raised);border-radius:22px;padding:.85rem; box-shadow:var(--e1);border:1px solid var(--sep)} .note{display:flex;gap:.65rem;align-items:flex-start;background:var(--raised);border-radius:18px; padding:.85rem 1rem;box-shadow:var(--e1);margin-top:.75rem;font-size:.89rem;color:var(--ink-2)} .note b{color:var(--ink);font-weight:600} .note .dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0;margin-top:.42rem;background:var(--ink-3)} .note.warn .dot{background:var(--rot)} .note.ok .dot{background:var(--gruen)} /* Der Aktionsknopf schwebt ueber der Leiste, nicht darin. */ .fab{position:fixed;left:50%;transform:translateX(-50%);z-index:30; bottom:calc(5.85rem + env(safe-area-inset-bottom)); display:flex;gap:.5rem;width:min(42rem,calc(100% - 2rem))} /* Die Bereichsleiste ganz unten. Sie sitzt fest am Rand und nimmt die Sicherheitszone des Telefons mit, damit sie nicht unter dem Streifen klebt. */ /* Deutlich dichter als das uebrige Milchglas: hier steht Bedienung, kein Schmuck. Mit .72 las sich der Sendeplan durch die Reiter durch. */ /* .55rem stand hier bis 18.09.2026 - kaum sichtbarer Abstand zum Rand, wirkte am Telefon fast angeklebt. Etwas mehr Luft (.85rem), Abstand zum Aktionsknopf oben bleibt exakt gleich (5.0rem). */ /* Rahmen entfernt (Draes Meldung: "diese schwarzen Umrandungen") - ueber dem Milchglas wirkte ein 1px-Rahmen deutlich kraeftiger als die rechnerischen 13% Deckkraft von --sep vermuten liessen. Schatten traegt die Abgrenzung vom Hintergrund allein. */ .tableiste{position:fixed;left:50%;right:auto;bottom:calc(.85rem + env(safe-area-inset-bottom));z-index:31; width:min(42rem,calc(100% - 1.5rem));transform:translateX(-50%); padding:.35rem .45rem;border-radius:24px; background:var(--glas-leiste);box-shadow:var(--e2);overflow:hidden} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .tableiste{backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)} } .tableiste::before{content:none} /* In der Leiste faellt der Kasten der Segmentleiste weg - hier tragen Zeichen und Farbe die Auswahl, nicht eine Kachel. Seit 16.09.2026 dazu eine Pille, die MITGLEITET statt umzuspringen. Vorher wechselte nur die Farbe: man sah, wo man IST, aber nicht, wo man HERKAM. Die Bewegung traegt genau diese eine Auskunft. */ .seg.tabs{background:transparent;box-shadow:none;padding:0;gap:0; max-width:44rem;margin:0 auto;backdrop-filter:none;-webkit-backdrop-filter:none; position:relative} /* Die Pille liegt HINTER den Knoepfen und ist genau ein Viertel breit - deshalb gap:0 oben. Mit Abstand dazwischen waeren vier Tabs nicht mehr je 25 %, und die Pille liefe mit jedem Schritt weiter aus der Spur; beim vierten waere der Versatz schon von blossem Auge zu sehen. Verschoben wird in PROZENT DER EIGENEN BREITE: 100 % ist damit genau ein Tab weiter, unabhaengig von der Bildschirmbreite. */ .seg.tabs::before{content:"";position:absolute;z-index:0; top:.1rem;bottom:.1rem;left:0;width:25%; border-radius:18px;background:var(--tint-bg); transform:translateX(0); /* --aus, nicht --ios. Die Schubladenkurve gehoert der Schublade - darueber wacht eine eigene Pruefung, und sie hat hier zu Recht angeschlagen. Die Pille kommt nicht von auszerhalb des Bildes herein, sie rutscht ein Stueck zur Seite; dafuer ist die kuerzere Kurve richtig. */ transition:transform .26s var(--aus); pointer-events:none} .seg.tabs[data-aktiv="dreh"]::before {transform:translateX(100%)} .seg.tabs[data-aktiv="leute"]::before{transform:translateX(200%)} .seg.tabs[data-aktiv="opt"]::before {transform:translateX(300%)} /* Beim ersten Aufbau steht sie schon da, wo sie hingehoert - sonst flitzt sie beim Laden einmal quer durch das Bild. */ .seg.tabs.stumm::before{transition:none} /* Die Knoepfe muessen ueber die Pille, sonst verschluckt sie das Zeichen. */ .seg.tabs .tb{position:relative;z-index:1} .seg.tabs .tb{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.18rem;min-height:3.3rem;padding:.35rem .1rem; border-radius:18px;color:var(--ink-3);font-weight:600;font-size:.66rem; letter-spacing:.01em;background:transparent;border:0;cursor:pointer; transition:color .18s ease,background .18s ease} .seg.tabs .tb[aria-selected="true"]{background:transparent;box-shadow:none; color:var(--tint)} .seg.tabs .tb:active{transform:scale(.94)} .tb-i{display:block;flex-shrink:0} .tb-fill{fill:currentColor;opacity:0;transition:opacity .18s ease} .seg.tabs .tb[aria-selected="true"] .tb-fill{opacity:.22} /* In Draes Vorlage hebt sich das Zeichen des aktiven Reiters an. Die Pille sagt WO man ist, dieser Hupfer sagt DASS gerade gewechselt wurde - zwei verschiedene Auskuenfte, deshalb zwei Bewegungen. Sie startet von selbst neu, weil aria-selected den Zustand wechselt und die Regel damit frisch greift. */ .seg.tabs .tb[aria-selected="true"] .tb-i{animation:tb-hupf .34s var(--aus)} @keyframes tb-hupf{ 0% {transform:translateY(0) scale(1)} 45% {transform:translateY(-.18rem) scale(1.1)} 100%{transform:translateY(0) scale(1)} } /* Weniger Bewegung: die Pille bleibt und markiert, der Hupfer faellt weg. Er ist Schmuck, sie ist die Auskunft. */ @media (prefers-reduced-motion:reduce){ .seg.tabs .tb[aria-selected="true"] .tb-i{animation:none} } .tb-t{display:block;line-height:1} .fab button{flex:1;border:0;border-radius:19px;min-height:3.35rem;font:inherit;font-size:1rem; font-weight:650;cursor:pointer;box-shadow:var(--e2);transition:transform .12s var(--aus)} .fab button:active{transform:scale(.975)} .primary{background:var(--action);color:var(--on-action)} .secondary{background:var(--raised);color:var(--ink)} /* Trefferfläche 44px, ohne dass der Text optisch wächst */ .txtbtn{background:transparent;border:0;color:var(--tint);font:inherit;font-size:.86rem; font-weight:640;cursor:pointer;display:inline-flex;align-items:center; min-height:44px;padding:0 .5rem;margin:-.5rem -.5rem} /* Glas soll ankommen, nicht auftauchen: Unschaerfe und Deckkraft laufen zusammen hoch, dann liest es sich als Material statt als Blende (apple-design, Materialien und Tiefe). */ /* 24.09.2026: die Unschaerfe selbst wird nicht mehr animiert. Einen Vollbild-Weichzeichner Bild fuer Bild neu zu rechnen war auf dem Telefon spuerbar (Draes "hakig" beim Zurueck). Jetzt steht die Unschaerfe fest, und nur die Deckkraft laeuft - das erledigt die Grafikkarte, und das Blenden liest sich trotzdem als Material. */ .scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:50;opacity:0; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:opacity .35s var(--ios)} .scrim.on{opacity:1} .sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--bg); border-radius:20px 20px 0 0;box-shadow:var(--e3);max-height:92vh;overflow-y:auto; padding:.6rem 1rem calc(1.3rem + env(safe-area-inset-bottom)); transform:translateY(100%);transition:transform .42s var(--ios);-webkit-overflow-scrolling:touch; overscroll-behavior:none} .sheet.on{transform:translateY(0)} /* Waehrend der Finger draufliegt, darf nichts dazwischenfunken: das Blatt folgt 1:1, gesetzt aus dem Skript. Eine CSS-Uebergabe wuerde hinterher- laufen und sich wie Gummi anfuehlen. */ .sheet.zieht{transition:none} .scrim.zieht{transition:none} @media (min-width:34rem){ .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(31rem,92vw);border-radius:18px; transform:translate(-50%,-46%) scale(.96);opacity:0; /* Am Rechner schiebt nichts von unten herein - das Fenster erscheint in der Mitte und wird groeszer. Also die Kurve fuer kommt/geht, nicht die Schubladenkurve. Die startet so langsam, dass das Fenster die erste Zehntelsekunde festzuhaengen scheint. */ transition:transform .28s var(--aus),opacity .2s var(--aus)} .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1} } .grabber{width:2.3rem;height:.3rem;border-radius:2px;background:var(--sep-2);margin:.15rem auto .9rem;display:block} @media (min-width:34rem){.grabber{display:none}} .sh-h{display:flex;align-items:center;justify-content:space-between;gap:1rem} .sh-t{font-size:1.28rem;font-weight:700;letter-spacing:-.03em;margin:0} .sh-w{color:var(--ink-3);font-size:.85rem;margin:.15rem 0 1.1rem;font-variant-numeric:tabular-nums} .fields{display:flex;flex-direction:column;gap:.95rem} label{display:block;font-size:.73rem;font-weight:650;color:var(--ink-3);margin-bottom:.35rem} input,select{width:100%;font:inherit;font-size:17px;background:var(--sunken);color:var(--ink); border:0;border-radius:11px;padding:.72rem .8rem;min-height:3rem;appearance:none} input:focus-visible,select:focus-visible,button:focus-visible,.item:focus-visible{ outline:2.5px solid var(--tint);outline-offset:2px} .picker{display:flex;gap:.3rem;background:var(--sunken);border-radius:11px;padding:3px} .picker button{flex:1;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:.88rem; font-weight:600;padding:.55rem .15rem;border-radius:9px;min-height:2.8rem;cursor:pointer; transition:background .2s ease,color .2s ease} .picker button[aria-pressed="true"]{background:var(--raised);box-shadow:var(--e1);color:var(--ink)} .picker.sk button[aria-pressed="true"][data-c="g"]{color:var(--gruen)} .picker.sk button[aria-pressed="true"][data-c="y"]{color:var(--gelb)} .picker.sk button[aria-pressed="true"][data-c="r"]{color:var(--rot)} .sh-foot{display:flex;gap:.55rem;margin-top:1.3rem} .sh-foot button{flex:1;border:0;border-radius:12px;min-height:3.2rem;font:inherit;font-size:1rem; font-weight:650;cursor:pointer} .sh-foot button:active{transform:scale(.975)} /* Knopfreihe mitten im Blatt (Release-Plaetze, Kuenstlerbereich) statt am Fuss. */ .sh-foot.innen{margin-top:.8rem} /* Zeile als Knopf (Kuenstlerbereich-Uebersicht): sieht aus wie jede Posteingang-Zeile. */ button.inbox-zeile{width:100%;background:none;border:0;border-bottom:1px solid var(--sep);font:inherit;color:inherit;text-align:left;cursor:pointer} button.inbox-zeile:last-child{border-bottom:0} .kb-ig,.kb-tt{color:var(--tint);font-weight:600;text-decoration:none} .kb-leer{color:var(--ink-3)} @media (hover:hover){.kb-ig:hover,.kb-tt:hover{text-decoration:underline}} #kb-url{font-size:16px} .danger{background:var(--rot-bg);color:var(--rot);flex:0 0 auto!important;padding:0 1.1rem} /* Ordner-Link: gesperrt und entsperrt sahen bisher gleich aus, nur das Attribut aenderte sich, nichts im Bild. Der geschuetzte Link (siehe linkSperren() in app.js) bekommt jetzt eine fuehlbare Flaeche fuer beide Zustaende. */ #o-link,#o-linkname{transition:background-color .15s ease,box-shadow .15s ease} #o-link:not(:read-only),#o-linkname:not(:read-only){ background:var(--raised);box-shadow:inset 0 0 0 1.5px var(--sep-2)} .suchbox{position:relative} .suchbox input{padding-right:2.6rem} .suchx{position:absolute;right:.45rem;top:50%;transform:translateY(-50%); width:1.9rem;height:1.9rem;border:0;border-radius:50%;background:var(--sep-2); color:var(--bg);font:inherit;font-size:.85rem;font-weight:700;line-height:1; cursor:pointer;display:grid;place-items:center} .suchx[hidden]{display:none!important} .tagkopf{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left; background:var(--raised);border:0;border-radius:14px;padding:.85rem .9rem;min-height:3.6rem; font:inherit;color:var(--ink);cursor:pointer;box-shadow:var(--e1); transition:background .15s ease} .tagkopf:active{background:var(--sunken)} .tagkopf.heute{box-shadow:var(--e1),inset 0 0 0 2px var(--tint)} .tagkopf .tk-d{font-weight:650;letter-spacing:-.02em} .tagkopf .tk-s{font-size:.79rem;color:var(--ink-3);margin-top:.2rem;display:block} .tagkopf .tk-n{margin-left:auto;display:flex;align-items:center;gap:.4rem;flex-shrink:0} .zaehler{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem} .tagbody{margin-top:.4rem} .tag.auf{background:var(--raised);border-radius:14px;box-shadow:var(--e1);overflow:hidden} .tag.auf.heute{box-shadow:var(--e1),inset 0 0 0 2px var(--tint)} .tag.auf .tagkopf,.tag.auf .tagkopf.heute{box-shadow:none;border-radius:0;background:transparent} .tag.auf .tagkopf:active{background:var(--sunken)} .tag.auf .tagbody{margin-top:0;background:transparent;box-shadow:none;border-radius:0; border-top:1px solid var(--sep)} .trenner{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);padding-top:.3rem;border-top:1px solid var(--sep);margin-bottom:-.3rem} .msg{font-size:.86rem;margin:.85rem 0 0;color:var(--ink-3)} .msg.warn{color:var(--rot)} /* Der Moment, in dem jemand anderes inzwischen abgeschlossen hat und dieser Bildschirm es noch nicht wusste - der Kern des P1-Fixes vom 16.09.2026 (verhindert einen unbemerkt ueberschriebenen Abschluss). EIN Ausschlag, kein Schuetteln: die Flaeche laeuft auf Rot-Grund und zurueck, der Text ruckt einmal zur Seite und zurueck. */ .msg.warn.konflikt-blitz{animation:konflikt-aufmerksam .3s var(--aus);border-radius:8px} @keyframes konflikt-aufmerksam{ 0%{background-color:transparent;transform:translateX(-4px)} 40%{background-color:var(--rot-bg)} 100%{background-color:transparent;transform:translateX(0)} } @keyframes konflikt-aufmerksam-ruhig{ 0%{background-color:transparent} 40%{background-color:var(--rot-bg)} 100%{background-color:transparent} } @media (prefers-reduced-motion:reduce){ /* Weniger Bewegung heiszt sanfter, nicht aus: die Farbuebergabe bleibt, der Ausschlag faellt weg. */ .msg.warn.konflikt-blitz{animation-name:konflikt-aufmerksam-ruhig} } /* Der Erfolgsmoment der Abstimmung: das Ergebnis kommt an, statt einfach dazustehen - aber nur beim GERADE-JETZT-Abschluss (siehe abstimmungSheet() in app.js), nicht bei jedem erneuten Laden eines laengst geschlossenen Eintrags. */ #a-ergebnis{transition:opacity .22s var(--aus),transform .22s var(--aus)} #a-ergebnis.kommt-an{opacity:0;transform:translateY(4px)} @media (prefers-reduced-motion:reduce){ #a-ergebnis{transition:opacity .2s ease;transform:none} #a-ergebnis.kommt-an{transform:none} } .checks{display:flex;flex-direction:column;background:var(--sunken);border-radius:12px;overflow:hidden} /* Die Zeilen duerfen in der scrollenden Liste NIE schrumpfen: ein Flex-Kind schrumpft sonst unter seine Inhaltshoehe, sobald die Liste hoeher ist als max-height - der Text (Name + Song + Release-Rang) laeuft dann ueber die Zeilengrenze (Draes Meldung 04.10.2026). Hoehe grosszuegiger, damit auf dem Telefon mehr als ein paar Namen sichtbar sind. */ .checks.tall{max-height:62vh;overflow-y:auto;overscroll-behavior:none} .checks>.check{flex-shrink:0} .check{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;min-height:3rem; background:transparent;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;width:100%} .check+.check{border-top:1px solid var(--sep)} /* Drei Eigenschaften wechseln beim Antippen - also muessen auch drei uebergeben werden. Vorher lief nur die Flaeche weich, Rand und Haken sprangen im ersten Bild. */ .box{width:1.5rem;height:1.5rem;border-radius:50%;border:1.6px solid var(--sep-2);flex-shrink:0; display:grid;place-items:center;font-size:.85rem;color:transparent; transition:background .18s ease,border-color .18s ease,color .18s ease} .check[aria-pressed="true"] .box{background:var(--tint);border-color:var(--tint);color:var(--on-tint)} .check .txt{flex:1;min-width:0} .opt{font-size:.72rem;color:var(--ink-3);font-weight:600} #status{margin-top:.9rem;font-size:.87rem;padding:.7rem .85rem;border-radius:12px; background:var(--raised);color:var(--ink-2);box-shadow:var(--e1); transition:opacity .12s ease} #status[data-tone="warn"]{background:var(--rot-bg);color:var(--rot)} /* Feuert oft (jedes Speichern) - deshalb bewusst hauchduenn: nur beim Erscheinen aus hidden faedet es ein, kein Slide, keine 300ms. */ #status.kommt{opacity:0} [hidden]{display:none!important} .leer{color:var(--ink-3);font-size:.9rem;padding:1.2rem .9rem;text-align:center} details{background:var(--raised);border-radius:14px;box-shadow:var(--e1);margin-top:.6rem} summary{padding:.9rem;cursor:pointer;font-weight:600;font-size:.93rem;list-style:none; display:flex;align-items:center;min-height:3rem} summary::-webkit-details-marker{display:none} summary::after{content:"›";margin-left:auto;color:var(--ink-3);font-size:1.2rem;transition:transform .26s var(--durch)} details[open] summary::after{transform:rotate(90deg)} .det{padding:0 .9rem .9rem} /* Doppeltipp-Verzoegerung weg, Scrollen bleibt im Sheet */ button,.item,.check,a{touch-action:manipulation} /* Nur fuer echte Zeigergeraete. Auf dem Telefon loest ein Tipp einen falschen Schwebezustand aus, der danach kleben bleibt - deshalb die Sperre, die apple-design und die Web Interface Guidelines beide verlangen. Am Rechner macht es den Unterschied zwischen "Webseite" und "Programm". */ @media (hover:hover) and (pointer:fine){ .item:hover{background:var(--sunken)} .seg button:hover:not([aria-selected="true"]){color:var(--ink)} .bigbtn:hover{box-shadow:var(--e2);transform:translateY(-1px)} .txtbtn:hover{opacity:.7} .konto:hover{background:var(--tint);color:var(--on-tint)} .spiel:hover{background:var(--tint);color:var(--on-tint)} .picker button:hover:not([aria-pressed="true"]){color:var(--ink)} .platzknopf:hover{background:var(--sunken)} .check:hover{background:var(--sep)} .klapp:hover{color:var(--ink)} } .card.pad{padding:.9rem} .card.pad input[type="number"]{max-width:8.5rem} .card.pad .fields{gap:.85rem} /* Knopf zum Videoordner */ .bigbtn{display:flex;align-items:center;gap:.85rem;width:100%;text-decoration:none; background:var(--hero);border:1px solid rgba(255,255,255,.08);border-radius:24px; box-shadow:var(--e2);padding:1rem;color:#fff;min-height:4.4rem; transition:transform .16s var(--aus),box-shadow .16s var(--aus)} .bigbtn:active{transform:scale(.985);box-shadow:var(--e1)} .bigbtn .bb-i{width:2.75rem;height:2.75rem;border-radius:50%;background:#9A6800; color:#fff;display:grid;place-items:center;font-size:1.1rem;flex-shrink:0} .bigbtn .bb-t{font-weight:700;letter-spacing:-.025em;display:block} .bigbtn .bb-s{font-size:.78rem;color:rgba(235,235,245,.68);display:block;margin-top:.12rem} .bigbtn .chev{color:#fff;opacity:.72} /* Filterschalter */ .chips{display:flex;flex-wrap:wrap;gap:.35rem} .chipgrp+.chipgrp{margin-top:.8rem} .chip{border:0;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer; background:var(--sunken);color:var(--ink-2);border-radius:999px;padding:.45rem .7rem; min-height:2.1rem;display:inline-flex;align-items:center;gap:.35rem; transition:background .18s ease,color .18s ease} .chip[aria-pressed="true"]{background:var(--tint);color:var(--on-tint)} .chip .z{font-size:.72rem;opacity:.62;font-variant-numeric:tabular-nums} .chip[aria-pressed="true"] .z{opacity:.8} /* aufklappbarer Abschnittskopf */ .klapp{display:flex;align-items:center;gap:.5rem;width:100%;background:transparent;border:0; font:inherit;color:var(--ink-3);font-size:.74rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;cursor:pointer;padding:.5rem 0;min-height:2.75rem;text-align:left} .klapp .kz{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:0} .klapp .chev{transition:transform .26s var(--durch);display:inline-block} .klapp[aria-expanded="true"] .chev{transform:rotate(90deg)} /* Weniger Bewegung heiszt SANFTER, nicht AUS. Vorher stand hier eine einzige Zeile, die JEDE Uebergabe abschaltete - damit auch die Farb- und Deckkraftwechsel, die beim Verstehen helfen (welcher Knopf ist gedrueckt, wo steht der Fokus). Jetzt faellt nur weg, was sich tatsaechlich bewegt. */ @media (prefers-reduced-motion:reduce){ /* Kein Ausrufezeichen hinter transform. Die Ziehen-Geste setzt ihre Verschiebung am Element selbst; eine erzwungene Regel im Stylesheet wuerde dagegen gewinnen und der Finger bewegte nichts mehr. Weniger Bewegung heiszt: die Oberflaeche bewegt sich nicht von SELBST. Was der Nutzer mit dem Finger schiebt, ist Bedienung, keine Animation. Versteckt wird deshalb ueber Deckkraft statt ueber Verschiebung. */ .sheet{transform:none;opacity:0;visibility:hidden; transition:opacity .2s ease,visibility 0s linear .2s} .sheet.on{transform:none;opacity:1;visibility:visible; transition:opacity .2s ease,visibility 0s linear 0s} .sheet.zieht{transition:none} .scrim{transition:opacity .2s ease} .konto:active,.seg button:active,.fab button:active,.sh-foot button:active, .bigbtn:active,.tor-knopf:active,.spiel:active{transform:none} .klapp .chev,summary::after{transition:none} .balken i.rein{animation:none} } /* Milchglas ist Schmuck, kein Traeger von Bedeutung. Wer es abstellt, bekommt dieselbe Flaeche deckend - lesbar bleibt es so oder so. */ @media (prefers-reduced-transparency:reduce){ .seg{background:var(--raised)!important;backdrop-filter:none!important; -webkit-backdrop-filter:none!important} .scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.55)} } @media (prefers-contrast:more){ .item,.card,.sheet,.seg{border:1px solid var(--ink-3)} .pill,.num{outline:1px solid currentColor} } /* ---------- Anmeldetor ---------- */ /* Liegt ueber allem, bis die Datenbank bestaetigt hat, dass die Person auf der Liste steht. Kein Inhalt dahinter wird vorher geladen. */ .tor{position:fixed;inset:0;z-index:100;background:var(--bg); display:grid;place-items:center;padding:1.5rem; transition:opacity .4s var(--aus),visibility 0s linear .4s} .tor[hidden]{display:none!important} /* Nur das Verschwinden nach erfolgreicher Anmeldung bekommt den Uebergang - der einzige echte Delight-Moment pro Sitzung. Das erste Laden bleibt hart ueber [hidden], sonst blitzt das Tor beim Start einmal auf. */ .tor.raus{opacity:0;visibility:hidden;pointer-events:none} .tor-karte{width:100%;max-width:23rem;background:var(--raised);border-radius:18px; box-shadow:var(--e2);padding:2rem 1.6rem 1.7rem;text-align:center} .tor-marke{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase; font-size:1.7rem;line-height:1;letter-spacing:-.015em;margin:0 0 1.6rem} .tor-marke span{color:var(--tint)} .tor-sub{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin:.45rem 0 1.6rem} .tor-text{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.2rem} .tor-text.tor-warn{color:var(--rot);font-weight:600} .tor-knopf{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%; min-height:3rem;border:0;border-radius:12px;background:var(--tint);color:var(--on-tint); font:inherit;font-size:.95rem;font-weight:650;cursor:pointer; transition:transform .14s var(--aus),opacity .14s var(--aus)} .tor-knopf:active{transform:scale(.985)} .tor-knopf.leise{background:var(--sunken);color:var(--ink-2)} .tor-g{display:grid;place-items:center;width:1.35rem;height:1.35rem;flex-shrink:0} /* Googles Vorgabe: das Zeichen steht auf Weisz, nie auf einer Farbe. Der Knopf ist deshalb hell - auch im dunklen Auftritt. Das ist keine Nachlaessigkeit, sondern der Standard-Knopf, den Google vorgibt. */ .tor-knopf.google{background:#fff;color:#1f1f1f; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)} .tor-knopf.google:active{background:#f4f4f4} .fab-i{display:inline-flex;margin-right:.42rem;vertical-align:-.2em} /* ---------- Ein Zeichensatz statt Emoji ---------- */ /* Zahnrad, Dreieck und Haken waren drei verschiedene Handschriften: ein Emoji, ein Sonderzeichen, ein Haken aus der Schriftart. Emoji sehen auf jedem Geraet anders aus und lassen sich in Groesze und Farbe nicht steuern. Gezeichnete Linien tun beides und passen zum 246-Zeichen. */ .ik{display:inline-block;vertical-align:-.18em;flex:0 0 auto} .ik.klein{width:15px;height:15px} /* Die Ampel. Der gespeicherte Wert bleibt das Emoji - nur die Anzeige wechselt, damit nichts in der Datenbank angefasst werden muss. */ .punkt{display:inline-block;width:.62rem;height:.62rem;border-radius:50%; flex:0 0 auto;box-shadow:0 0 0 2.5px var(--sunken)} .punkt.g{background:var(--gruen)} .punkt.y{background:var(--gelb)} .punkt.r{background:var(--rot)} .punkt.gross{width:.8rem;height:.8rem} /* ---------- Warten: Form statt Wort ---------- */ /* "Verbinde..." sagt nichts ueber das, was kommt. Platzhalter in der Form der spaeteren Zeilen lassen die Seite schneller wirken, weil das Auge schon die richtige Gestalt sieht - und nichts springt beim Eintreffen. */ @keyframes pulsen{0%,100%{opacity:.35}50%{opacity:.7}} .skel{display:block;height:.7rem;border-radius:5px;background:var(--sunken); animation:pulsen 1.5s ease-in-out infinite} .skel.d2{animation-delay:.12s} .skel.d3{animation-delay:.24s} .skel.w1{width:78%} .skel.w2{width:62%} .skel.w3{width:88%} .skel.kurz{height:.55rem} .skel.kurz.w1{width:38%} .skel.kurz.w2{width:48%} .skel.kurz.w3{width:30%} .skel.pille-breit{width:3.4rem;height:1.15rem;flex:0 0 auto} .skel-zeile{display:flex;align-items:center;gap:.75rem;padding:.85rem .9rem; min-height:3.6rem;position:relative} .skel-zeile+.skel-zeile::before{content:"";position:absolute;left:.9rem;right:0; top:0;height:1px;background:var(--sep)} .skel-haupt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.42rem} @media (prefers-reduced-motion:reduce){.skel{animation:none;opacity:.5}} /* Weniger Bewegung heiszt nicht weniger Auskunft: die Pille bleibt und markiert den Bereich, sie GLEITET nur nicht mehr dorthin. */ @media (prefers-reduced-motion:reduce){.seg.tabs::before{transition:none}} /* ---------- Leerzustaende, die weiterhelfen ---------- */ /* "Nichts gefunden." ist eine Sackgasse. Ein Leerzustand nennt den Grund UND den naechsten Schritt - dort, wo der Blick gerade ist. */ .leerz{text-align:center;padding:1.5rem 1rem;display:flex;flex-direction:column; align-items:center;gap:.55rem} .leerz .lz-i{color:var(--ink-3);opacity:.75} .leerz .lz-t{font-size:.92rem;font-weight:600;color:var(--ink-2);margin:0} .leerz .lz-s{font-size:.82rem;color:var(--ink-3);margin:0;max-width:20rem} .leerz button{margin-top:.3rem;background:var(--tint-bg);color:var(--tint);border:0; border-radius:10px;font:inherit;font-size:.86rem;font-weight:650; padding:.55rem 1rem;min-height:2.6rem;cursor:pointer; transition:background .18s ease} /* ---------- Fortschrittsring ---------- */ .ring{display:flex;align-items:center;gap:.7rem;margin-bottom:.35rem} .ring svg{flex:0 0 auto} .ring-bahn{stroke:var(--sunken)} /* 240 ms statt 450: das ist die Rueckmeldung auf ein Haekchen, kein Schauwert. Die Farbe laeuft mit, damit das Gruen beim letzten Pflicht-Haekchen nicht aufpoppt. */ .ring-voll{stroke:var(--tint); transition:stroke-dashoffset .24s var(--aus),stroke .24s ease} .ring-voll.fertig{stroke:var(--gruen)} .ring-zahl{fill:var(--ink);font-size:13px;font-weight:700} .ring-txt{font-size:.73rem;font-weight:650;color:var(--ink-3); letter-spacing:.02em;text-transform:uppercase} .ring-txt b{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2); text-transform:none;letter-spacing:0;margin-top:.1rem} /* Der Notnagel zum Kopieren braucht ein echtes Feld im Bild - ein display:none-Feld laesst sich nicht markieren. Also aus dem Weg schieben statt verstecken. */ .weit-weg{position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none} /* ---------- Schieberegler ---------- */ /* Die allgemeine input-Regel setzt appearance:none - damit waeren Bahn und Griff eines Reglers komplett unsichtbar. Also von Hand aufbauen. */ input[type="range"]{-webkit-appearance:none;appearance:none; background:transparent;padding:0;min-height:2.75rem;width:100%; border-radius:0;cursor:pointer} input[type="range"]::-webkit-slider-runnable-track{ height:.4rem;border-radius:3px;background:var(--sunken)} input[type="range"]::-moz-range-track{ height:.4rem;border-radius:3px;background:var(--sunken)} /* Trefferflaeche 28px, obwohl der Griff kleiner aussieht - der Regler wird mit dem Daumen bedient, nicht mit der Maus. */ input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:1.75rem;height:1.75rem;margin-top:-.68rem;border-radius:50%; background:var(--raised);box-shadow:var(--e2);border:2px solid var(--tint)} input[type="range"]::-moz-range-thumb{width:1.75rem;height:1.75rem;border-radius:50%; background:var(--raised);box-shadow:var(--e2);border:2px solid var(--tint)} input[type="range"]:focus-visible{outline:2.5px solid var(--tint);outline-offset:4px} /* ---------- Vorschlag, wer auf den Platz gehoert ---------- */ /* Hebt sich ab, ohne wie eine Entscheidung auszusehen: getoenter Grund, kein Rahmen, kein Schatten. Es ist ein Vorschlag, kein Befund. */ .tipp{display:block;width:100%;text-align:left;border:0;cursor:pointer; background:var(--tint-bg);border-radius:12px;padding:.75rem .85rem; margin-bottom:.6rem;font:inherit;color:var(--ink); transition:transform .12s var(--aus)} .tipp:active{transform:scale(.985)} .tipp-k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--tint)} .tipp-n{display:block;font-size:1.05rem;font-weight:650;letter-spacing:-.02em; margin-top:.15rem;overflow-wrap:anywhere} /* Die Gruende sind der eigentliche Wert - untereinander, damit man sie liest, statt sie als Fliesztext zu ueberspringen. */ .tipp-g{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem} .tipp-g span{font-size:.82rem;color:var(--ink-2);padding-left:.75rem; position:relative} .tipp-g span::before{content:"·";position:absolute;left:.15rem;color:var(--ink-3)} .tipp-x{display:block;font-size:.8rem;font-weight:650;color:var(--tint); margin-top:.5rem} /* ---------- Ansage fuer die Kuenstler ---------- */ .ansage{display:flex;flex-direction:column;gap:.7rem;margin-bottom:.9rem} .ansage-t{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .ansage-h{font-size:.74rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3)} .ansage-s{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums} /* Der Text wird gezeigt, bevor er kopiert wird. Wer blind kopiert, verschickt irgendwann ein falsches Datum in eine Gruppe. */ .ansage-txt{margin:0;font:inherit;font-size:.86rem;line-height:1.45; color:var(--ink-2);background:var(--sunken);border-radius:11px; padding:.7rem .8rem;white-space:pre-wrap;overflow-wrap:anywhere} /* ---------- Monatsgrenzen im Sendeplan ---------- */ /* Vierzehn Zeilen am Stueck lesen sich als ein Block. Wer wissen will, was im Oktober ansteht, zaehlt sonst Datumsangaben ab. Die Trennung traegt Information (wie viel ist in diesem Monat noch frei) statt nur einen Strich zu ziehen. */ .monat{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:1.15rem .25rem .4rem;font-size:.74rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .monat:first-child{padding-top:.2rem} .monat.jetzt .monat-n{color:var(--tint)} .monat-z{font-weight:600;letter-spacing:0;text-transform:none; font-variant-numeric:tabular-nums;color:var(--ink-2)} /* Ein voller Monat braucht keine Betonung - er ist die gute Nachricht. */ .monat-z.voll{color:var(--ink-3);font-weight:500} /* ---------- Der Rhythmus des Sendeplans ---------- */ /* Anders als die alte Kaestchenreihe bedeutet die Hoehe hier etwas: Stark ist hoch, Reserve ist flach, frei ist ein Stummel. */ .rhythmus{background:var(--raised);border-radius:12px;box-shadow:var(--e1); padding:.8rem .9rem .6rem;margin-top:.5rem} .balance-card .rhythmus{border-radius:17px;background:var(--sunken);box-shadow:none; margin-top:.65rem} .balken{display:flex;gap:3px;align-items:flex-end;height:3rem} /* Vier Hoehen, vier Klassen - kein einziges style-Attribut noetig. */ .balken i{flex:1;border-radius:3px 3px 0 0;background:var(--sunken); display:block;min-height:.4rem} .balken i.frei{height:14%} /* Die Stufe traegt jetzt GEWICHT statt Farbe - Codex' Vorschlag vom 16.09.2026, und er loest zwei Probleme auf einmal. Vorher benutzten Wahrscheinlichkeit und Einstufung dieselben drei Farben fuer voellig verschiedene Aussagen; und das Stufen-Gelb lag so nah an der Markenfarbe, dass ein rot-gruen-schwacher Mensch beides nicht trennen konnte (dE2000 2,2 - siehe werkzeuge/farben-pruefen.py). Die Hoehe sagte ohnehin schon alles. Die Farbe war Doppelung. */ .balken i.s1{background:var(--tint);height:100%} .balken i.s2{background:var(--tint);opacity:.62;height:66%} .balken i.s3{background:var(--tint);opacity:.34;height:38%} /* Belegt, aber ohne echte Einstufung (nicht fertig geschnitten) - z.B. ein importierter alter Sendeplatz. Weder Marken-Ton (das waere eine Stufe, die es nicht gibt) noch der 14%-Stummel von "frei" (der Platz ist ja belegt). Eine eigene, neutrale Mittelhoehe mit gestricheltem Rand statt Fuellung macht den Unterschied auch ohne Tooltip sichtbar. */ .balken i.post{height:50%;background:transparent; border:1.5px dashed var(--sep-2)} .balken i.heute{outline:1.5px solid var(--tint);outline-offset:1px} /* Vorher stand hier eine Uebergabe auf der Hoehe. Die hat nie gefeuert: renderBal() baut die Reihe jedes Mal neu, und ein frisch eingefuegtes Element startet auf seinem Endwert. Der Balken sprang also einfach um. Jetzt waechst er - ueber scaleY, nicht ueber die Hoehe: das laeuft im Verdichter und ruehrt das Layout nicht an. Ursprung unten, weil ein Balken aus dem Boden waechst und nicht aus der Mitte. */ @keyframes balken-rein{from{transform:scaleY(.04);opacity:.3} to{transform:scaleY(1);opacity:1}} .balken i.rein{transform-origin:bottom;animation:balken-rein .26s var(--aus) both} /* Beim ersten Aufbau kommen alle vierzehn nacheinander. 24 ms Versatz liest sich als EINE Welle; ohne Versatz als vierzehn Zuckungen. */ .balken.gestaffelt i:nth-child(2){animation-delay:24ms} .balken.gestaffelt i:nth-child(3){animation-delay:48ms} .balken.gestaffelt i:nth-child(4){animation-delay:72ms} .balken.gestaffelt i:nth-child(5){animation-delay:96ms} .balken.gestaffelt i:nth-child(6){animation-delay:120ms} .balken.gestaffelt i:nth-child(7){animation-delay:144ms} .balken.gestaffelt i:nth-child(8){animation-delay:168ms} .balken.gestaffelt i:nth-child(9){animation-delay:192ms} .balken.gestaffelt i:nth-child(10){animation-delay:216ms} .balken.gestaffelt i:nth-child(11){animation-delay:240ms} .balken.gestaffelt i:nth-child(12){animation-delay:264ms} .balken.gestaffelt i:nth-child(13){animation-delay:288ms} .balken.gestaffelt i:nth-child(14){animation-delay:312ms} .balken-txt{display:flex;justify-content:space-between;font-size:.66rem; color:var(--ink-3);margin-top:.45rem;font-variant-numeric:tabular-nums} /* ---------- Grosze Ueberschrift, die sich zurueckzieht ---------- */ /* Wie in iOS: oben steht der Name gross und ruhig; sobald der Inhalt darunterlaeuft, taucht er klein in der Leiste auf. Der kompakte Titel liegt ABSOLUT ueber der Leiste - so kostet er im Ruhezustand keinen einzigen Bildpunkt Hoehe, und es wird nichts umgebrochen. */ /* Der Abstand nach oben macht PLATZ fuer den kleinen Titel, der darueber liegt. Mit .5rem sasz er ausserhalb des Bildes - sichtbar erst im Bildschirmfoto, nicht im Test: der pruefte die Deckkraft, und die war korrekt 1. Ein Wert kann stimmen und trotzdem nichts zeigen. */ /* Nur noch der kleine Titel haengt hier. Hoehe null, damit er im Ruhezustand nichts kostet - der Titel selbst liegt absolut darin. */ .kopfleiste{position:sticky;top:.5rem;z-index:20;height:0} .kompakt{position:absolute;left:0;right:0;top:0; display:flex;align-items:center;gap:.6rem; padding:.4rem .7rem;border-radius:10px; background:var(--glas);box-shadow:var(--e1); opacity:0;transform:translateY(.4rem);pointer-events:none; transition:opacity .24s var(--aus),transform .24s var(--aus)} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .kompakt{backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)} } /* Gleiche Regel wie beim groszen Kopf: Groesze an der Schrift, damit sie mitgeht statt starr zu bleiben. flex-shrink:0, sonst quetscht ein langer Titel das Zeichen zusammen, bevor der Text selbst kuerzt. */ .kompakt .zeichen{width:1.5em;height:1.5em;flex-shrink:0} .kompakt-t{font-family:Anton,Impact,sans-serif;font-weight:400; text-transform:uppercase;font-size:.95rem;letter-spacing:-.005em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kompakt-t span{color:var(--tint)} .picker.a-wahl{flex-wrap:wrap} .picker.a-wahl button{flex:1 1 40%;min-height:44px} body.ab .kompakt{opacity:1;transform:translateY(0);pointer-events:auto} /* Der grosze Titel tritt zurueck, waehrend der kleine kommt. Skalieren statt Schriftgroesze aendern: das laeuft auf der Grafikkarte und loest kein Neuberechnen des Layouts aus. */ header .wachs{transform-origin:left top; transition:opacity .24s var(--aus),transform .24s var(--aus)} body.ab header .wachs{opacity:0;transform:scale(.92)} @media (prefers-reduced-motion:reduce){ .kompakt{transition:opacity .2s ease;transform:none} body.ab .kompakt{transform:none} header .wachs{transition:opacity .2s ease;transform:none} body.ab header .wachs{transform:none} } /* ---------- Video und Sendeplatz ---------- */ /* Der Abspiel-Knopf sitzt IN einer Zeile, die selbst anklickbar ist. Er braucht daher eine eigene Trefferflaeche von 44 px, ohne die Zeile auseinanderzuziehen - deshalb negative Aussenabstaende statt Hoehe. */ .spiel{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%; background:var(--tint-bg);color:var(--tint);font-size:.72rem;line-height:1; flex-shrink:0;cursor:pointer;position:relative} .spiel::after{content:"";position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%)} .spiel:active{transform:scale(.92)} .platzzeile{display:flex;align-items:stretch;gap:0} .platzzeile+.platzzeile{border-top:1px solid var(--sep)} .platzzeile .check{border-top:0} .platzknopf{flex:0 0 auto;min-width:3.4rem;min-height:44px;border:0; background:transparent;color:var(--tint);font:inherit;font-size:.82rem; font-weight:650;cursor:pointer;padding:0 .7rem} .platzknopf.weg{color:var(--rot)} .platzknopf:active{opacity:.6} .platzknopf[disabled]{opacity:.4} /* 16:9, damit beim Laden nichts springt. max-width haelt es auch dann im Rahmen, wenn das Fenster schmaler ist als 16:9 hoch waere. */ .videobox{position:relative;width:100%;max-width:100%;aspect-ratio:16/9; background:#000;border-radius:12px;overflow:hidden} .videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- Hilfsklassen statt style-Attribute ---------- */ /* Damit die CSP ohne unsafe-inline fuer Styles auskommt. */ .mt0{margin-top:0} .mt-s{margin-top:.4rem} .mt-m{margin-top:.5rem} .mt-l{margin-top:.6rem} .mt-xl{margin-top:.95rem} .mb-m{margin-bottom:.5rem} .mb-xl{margin-bottom:.95rem} .wachs{flex:1;min-width:0} .klein{font-size:.8rem} .f-tint{color:var(--tint)} .f-rot{color:var(--rot)} /* Die drei EINSTUFUNGS-Zahlen in der Balance. Gewicht statt Buntheit, wie bei den Pillen und den Balken: voll, gedaempft, blass. */ .f-st1{color:var(--tint);font-weight:800} .f-st2{color:var(--ink-2)} .f-st3{color:var(--ink-3)} .f-gruen{color:var(--gruen)} .f-gelb{color:var(--gelb)} .tagkarte{margin-top:.7rem} /* ---------- Hinweis: Künstler gibt es schon ---------- */ .dup{margin-top:.5rem;background:var(--gelb-bg);border-radius:11px;padding:.65rem .75rem; display:flex;flex-direction:column;gap:.15rem} .dup[hidden]{display:none!important} .dup .dup-t{font-weight:650;font-size:.88rem;color:var(--gelb)} .dup .dup-s{font-size:.78rem;color:var(--ink-2)} .dup .dup-b{align-self:flex-start;margin-top:.4rem;border:0;background:var(--gelb); color:var(--on-tint);font:inherit;font-size:.82rem;font-weight:650;border-radius:9px; padding:0 .8rem;min-height:2.4rem;cursor:pointer} /* ---------- Abweisung und Kopfknöpfe ---------- */ .tor-stopp{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--rot); margin:0 0 .5rem} .sh-knoepfe{display:flex;align-items:center;gap:.9rem;flex-shrink:0} /* ---------- Vollstaendiger Designpass: Richtung 2 + 4 ---------- Drae hat am 17.09.2026 nicht nur einzelne runde Karten bestellt, sondern die Mischung aus den Entwuerfen 2 (schwebende Flaechen) und 4 (kraeftiger IDL-Auftritt) fuer das GANZE Werkzeug. Dieser Block ist bewusst die letzte Schicht: Die alten Regeln dokumentieren weiterhin die Funktionsgruende, hier steht das gemeinsame visuelle System fuer Plan, Drehtage, Kuenstler, Einstellungen, Anmeldung und Blaetter. */ :root{ --r-card:24px; --r-inner:17px; --r-control:15px; --page-x:1rem; --surface-line:rgba(60,60,67,.10); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0B0B0D; --raised:#1B1B1E; --sunken:#29292D; --hero:#171719; --surface-line:rgba(255,255,255,.09); }} :root[data-theme="dark"]{ --bg:#0B0B0D; --raised:#1B1B1E; --sunken:#29292D; --hero:#171719; --surface-line:rgba(255,255,255,.09); } body{min-height:100vh;background: radial-gradient(circle at 50% -12rem,var(--tint-bg),transparent 32rem), var(--bg)} .app{width:100%;max-width:46rem;padding-left:var(--page-x);padding-right:var(--page-x)} header{align-items:center;padding:1.85rem .1rem 1.2rem;gap:1rem} .brand{font-size:1.88rem;letter-spacing:-.025em} .sub{margin-top:.42rem;font-size:.72rem;letter-spacing:.1em} .konto{width:2.75rem;height:2.75rem;margin-top:0;border:1px solid var(--surface-line); box-shadow:var(--e1)} .grp{margin-top:1.7rem} .grp-h{padding:0 .35rem .62rem;font-size:.72rem;line-height:1.25;letter-spacing:.075em} /* Ein bis zwei .bigbtn nebeneinander gestapelt - dieselbe Basis-Groesze wie ueberall sonst (nicht die #linkbtn-Heldenkarte), damit "zu erledigen" nicht lauter schreit als der Rest von Plan. */ #todo{display:flex;flex-direction:column;gap:.6rem} .grp-h>span{min-width:0} .grp-h .i-frei{display:inline-block;margin-left:.2rem;text-transform:none;letter-spacing:0} .card{border-radius:var(--r-card);border:1px solid var(--surface-line);box-shadow:var(--e1)} #leute{border:none;box-shadow:none} /* Werkstatt-Auftrag 23.09.2026, Punkt 4: Solo-Künstler und Features als zwei eigene, beschriftete Abschnitte innerhalb von #leute - dieselbe Optik wie .grp-h, nur mit eigenem Innenabstand statt der Karte davor. */ .leute-abschnitt-h{display:flex;align-items:baseline;justify-content:space-between; gap:.6rem;padding:1rem 1rem .5rem;font-size:.72rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .leute-abschnitt:first-child .leute-abschnitt-h{padding-top:.3rem} .leute-abschnitt-h .kz{font-variant-numeric:tabular-nums;letter-spacing:0} .leute-abschnitt-leer{margin:0;padding:0 1rem 1rem;font-size:.85rem;color:var(--ink-3)} .card.pad{padding:1.1rem} .card.pad .fields{gap:1rem} .item{padding:.95rem 1rem;min-height:4rem;gap:.8rem} .item+.item::before{left:1rem} .i-name{font-weight:650;letter-spacing:-.02em} .i-sub{line-height:1.35;margin-top:.18rem} .i-right{gap:.42rem} .num,.g{border-radius:9px} .pill{border-radius:999px;padding:.27rem .58rem} .note{border:1px solid var(--surface-line)} /* Die dunkle Markenflaeche gehoert nur zum zentralen Video-Einstieg. Hilfsaktionen in Fenstern bleiben hell und wirken dadurch nicht wie mehrere konkurrierende Hauptaktionen. */ .bigbtn{min-height:3.45rem;padding:.82rem .9rem;border-radius:var(--r-control); background:var(--sunken);color:var(--ink);border:1px solid var(--surface-line); box-shadow:none} .bigbtn .bb-i{width:2.35rem;height:2.35rem;background:var(--tint-bg);color:var(--tint)} .bigbtn .bb-s{color:var(--ink-3)} .bigbtn .chev{color:var(--ink-3)} #linkbtn .bigbtn{min-height:5rem;padding:1.05rem 1.1rem;border-radius:var(--r-card); background:var(--hero);color:#fff;border-color:rgba(255,255,255,.09);box-shadow:var(--e2)} #linkbtn .bigbtn .bb-i{width:2.8rem;height:2.8rem;background:#9A6800;color:#fff} #linkbtn .bigbtn .bb-s{color:rgba(235,235,245,.68)} #linkbtn .bigbtn .chev{color:#fff} .balance-card{border-radius:var(--r-card);padding:1rem;border-color:var(--surface-line)} .stat{border-radius:var(--r-inner);padding:.82rem .38rem} .note{border-radius:20px;padding:.9rem 1rem} .balance-card .rhythmus{border-radius:var(--r-inner);padding:.9rem 1rem .7rem} .plan-plaetze>.card{box-shadow:var(--e2)} .monat{padding:1.3rem .35rem .48rem} .monat:first-child{padding-top:.28rem} /* Der Fehler aus Draes Bildschirmfoto: .card schnitt alles an ihrer Rundung ab, .ansage hatte aber keinerlei Innenabstand. Ueberschrift und Datum klebten deshalb oben im Clip. Der Abstand gehoert an die Karte, nicht an einzelne Textzeilen; so bleiben auch Umbrueche sicher. */ .ansage{padding:1rem;gap:.8rem;margin:1.35rem 0 1rem;overflow:hidden} .ansage-t{align-items:flex-start;gap:.75rem;min-width:0} .ansage-h{min-width:0;line-height:1.35;overflow-wrap:anywhere} .ansage-s{flex:0 0 auto;white-space:nowrap;line-height:1.35} .ansage .bigbtn{background:var(--action);color:var(--on-action);border-color:transparent; justify-content:center;font-weight:700} .ansage-txt{border-radius:var(--r-inner);padding:.82rem .9rem} #tab-dreh>#drehtage{margin-top:.85rem} .tagkarte{margin-top:.8rem} /* Border weggelassen, Schatten bleibt - dieselbe Entscheidung wie bei #leute/.monatskarte/.tagkarte.auf (apple-design: "scroll edge effects, not hard dividers"). Ein 1px-Rahmen um JEDE Zeile der Liste addiert sich optisch zu einer harten Umrandung, wo der Schatten allein schon genug Tiefe traegt. */ .tagkopf{border-radius:var(--r-card);padding:.95rem 1rem;min-height:4.15rem; box-shadow:var(--e1)} .tag.auf{border-radius:var(--r-card);border:1px solid var(--surface-line)} .tag.auf .tagkopf{border:0} .tag.auf .tagbody{border-top-color:var(--surface-line)} .klapp{padding:.62rem .75rem;border-radius:var(--r-control);background:var(--raised); border:1px solid var(--surface-line);box-shadow:var(--e1)} .klapp+ .card{margin-top:.5rem} details{border-radius:var(--r-card);border:1px solid var(--surface-line)} summary{padding:1rem;min-height:3.6rem} /* Kuenstler-Uebersicht ist jetzt ein Modul statt acht lose Kacheln. */ #stats{background:var(--raised);border:1px solid var(--surface-line); border-radius:var(--r-card);box-shadow:var(--e1);padding:1rem} #stats .stats{gap:.55rem} #stats .stat{background:var(--sunken)} .suchbox input{min-height:3.35rem;border-radius:18px;background:var(--raised); border:1px solid var(--surface-line);box-shadow:var(--e1);padding-left:1rem} .suchx{right:.6rem;background:var(--sunken);color:var(--ink-2)} .chips{gap:.45rem} .chip{min-height:2.35rem;padding:.48rem .78rem} /* Einstellungen: gleiche Flaechen, gleiche Eingaben, gleiche Aktionen. */ #tab-opt>.grp:first-child{margin-top:1.35rem} #tab-opt .card.pad{box-shadow:var(--e1)} label{font-size:.74rem;letter-spacing:.01em;margin-bottom:.42rem} input,select{min-height:3.2rem;border-radius:var(--r-control);padding:.78rem .9rem; border:1px solid transparent} input:read-only{color:var(--ink-2)} .picker{border-radius:var(--r-control);padding:4px} .picker button{border-radius:12px} button.primary{border:0;border-radius:var(--r-control);min-height:3.15rem; padding:0 1rem;font:inherit;font-weight:700;cursor:pointer} #o-link-aktionen{display:flex;align-items:center;gap:.55rem;margin-top:.75rem} /* Blaetter und Anmeldung tragen dasselbe Material wie die Hauptseite. */ .sheet{background:var(--bg);border:1px solid var(--surface-line); border-radius:30px 30px 0 0;padding:.7rem 1.1rem calc(1.45rem + env(safe-area-inset-bottom))} .sh-t{font-size:1.35rem} .sh-w{line-height:1.4;margin-top:.22rem} .checks{border-radius:var(--r-inner);border:1px solid var(--surface-line)} .check{padding:.78rem .9rem;min-height:3.25rem} .sh-foot button{border-radius:var(--r-control)} .tor-karte{max-width:24rem;border-radius:30px;border:1px solid var(--surface-line); padding:2.15rem 1.7rem 1.8rem} .tor-knopf{border-radius:var(--r-control);min-height:3.2rem} .leerz{padding:1.8rem 1.1rem} .videobox{border-radius:var(--r-inner)} .fab{width:min(44rem,calc(100% - 2rem));bottom:calc(5.75rem + env(safe-area-inset-bottom))} .fab button{border-radius:21px;min-height:3.5rem} .tableiste{width:min(44rem,calc(100% - 1.4rem));padding:.38rem .48rem; border-radius:26px} .seg.tabs .tb{min-height:3.45rem;border-radius:20px} .seg.tabs::before{border-radius:20px} .kompakt{border-radius:16px;border:1px solid var(--surface-line);padding:.48rem .72rem} @media (min-width:34rem){ :root{--page-x:1.35rem} .sheet{width:min(34rem,92vw);border-radius:26px;padding:1.25rem 1.3rem 1.35rem} .app{padding-bottom:calc(12.6rem + env(safe-area-inset-bottom))} } @media (max-width:23rem){ .stats{grid-template-columns:repeat(2,1fr)} .ansage-t{flex-direction:column;gap:.18rem} .ansage-s{white-space:normal} .brand{font-size:1.65rem} } /* 18.09.2026: Monate sind eigene Karten; die Navigation hat keinen zusaetzlichen Aussenkasten. Dieselbe Kurve fuer alle Aufklappbereiche. */ :root{--aufklapp:cubic-bezier(.22,.61,.36,1)} #slots{display:flex;flex-direction:column;gap:1.15rem} .monatskarte{overflow:hidden;border:none;box-shadow:none} .monatskarte .monat,.monatskarte .monat:first-child{ align-items:center;padding:1.05rem 1rem;margin:0; background:var(--sunken);border-bottom:1px solid var(--surface-line)} .monatskarte .monat-n{font-size:.95rem;font-weight:750;letter-spacing:-.015em; text-transform:none;color:var(--ink)} .monatskarte .monat-z{padding:.3rem .6rem;border-radius:999px; background:var(--raised);font-size:.7rem;white-space:nowrap} .monatskarte .item{min-height:5.7rem;gap:.8rem} .slot-datum{flex:0 0 4.2rem;display:flex;flex-direction:column;align-items:center;gap:.2rem} /* Erst von 15px auf 24px (--r-card) angehoben, Drae fand die Kachel beim Testen immer noch zu kastig. Die Flaeche ist fast quadratisch (~4.2rem Breite) - 24px sind darauf nur ein Fuenftel des Radius, spuerbar weniger rund als bei den groeszeren Karten mit demselben Wert. 30px auf dieser kleinen Flaeche kommt naeher an einen Pillenkoerper heran. */ /* Rahmen entfernt (Draes zweite Meldung: "diese schwarzen Umrandungen") - der Farbunterschied zur Karte dahinter (--sunken vs. --raised) reicht als Abgrenzung, ein zusaetzlicher 1px-Rahmen um jede einzelne Kachel in einer langen Liste wirkt zusammengenommen hart. */ .slot-datum .i-date{display:flex;flex-direction:column;align-items:center; justify-content:center;min-width:0;width:100%;padding:.42rem .3rem; border-radius:30px;background:var(--sunken); font-variant-numeric:tabular-nums;line-height:1.15} .slot-wochentag{font-size:.64rem;font-weight:650;color:var(--ink-2)} .slot-tag{font-size:1.4rem;font-weight:750;letter-spacing:-.04em;margin:.1rem 0} .slot-monat{font-size:.58rem;font-weight:550;color:var(--ink-2)} .slot-datum .i-k{text-align:center;font-size:.6rem;line-height:1.2} #slots>.mehr{border:1px solid var(--surface-line);border-radius:var(--r-control); background:var(--raised);min-height:3.4rem} #slots>.mehr::before{content:none} #stats .kuenstler-stats{grid-template-columns:repeat(5,minmax(0,1fr))} #stats .stat{min-width:0} #stats .l{font-size:.65rem;overflow-wrap:anywhere} @media(max-width:28rem){ #stats .kuenstler-stats{grid-template-columns:repeat(3,minmax(0,1fr))} } .tagkarte{background:var(--raised);border-radius:var(--r-card);overflow:hidden} .tagkarte .tagkopf,.tagkarte.auf .tagkopf{border:0;box-shadow:none; border-radius:0;background:transparent} .tagkarte.auf{box-shadow:none;border:none} .tagkarte.auf.heute{box-shadow:none} .tagkarte .tagkopf.heute{box-shadow:inset 0 0 0 2px var(--tint);border-radius:var(--r-card)} .tagkarte .tagbody{margin:0;background:transparent;box-shadow:none;border-radius:0; border:0;border-top:1px solid var(--surface-line)} .tagkopf .chev{display:inline-flex;transition:transform .32s var(--aufklapp)} .tagkopf[aria-expanded="true"] .chev{transform:rotate(90deg)} .klapp .chev,summary::after{transition:transform .32s var(--aufklapp)} summary[aria-expanded="false"]::after{transform:rotate(0)} summary[aria-expanded="true"]::after{transform:rotate(90deg)} /* Bis 18.09.2026 stand hier eine randlose, kantige Vollbreiten-Leiste (bottom:0, border-radius:0) - sie hat die eigentliche Design-Entscheidung ("eine freistehende untere Leiste", idl-design-hybrid-2-4) fuer JEDE Bildschirmbreite ueberschrieben, ohne Media-Query-Grenze. Drae wollte sie schwebend, wie App-Icons auf dem Home-Bildschirm - dafuer reicht es, die Ueberschreibung wegzulassen: die schwebende Fassung weiter oben gilt dann wieder unveraendert. */ .farbschema button{min-height:2.8rem;border-radius:var(--r-control)} .farbschema button[aria-pressed="true"]{background:var(--raised);color:var(--ink); box-shadow:var(--e1);font-weight:650} @media(prefers-reduced-motion:reduce){ .tagkopf .chev,.klapp .chev,summary::after{transition:none} } /* Neue Kuenstler: ein Abschnitt pro Schritt, mit erhaltener Eingabe. */ .wizard-schritte{display:grid;grid-template-columns:repeat(var(--wizard-anzahl,4),minmax(0,1fr)); gap:.45rem;list-style:none;padding:0;margin:0 0 1.4rem} .wizard-schritte li{position:relative;min-width:0;text-align:center; font-size:.72rem;line-height:1.25;color:var(--ink-3)} .wizard-schritte li:not(:last-child)::after{content:"";position:absolute;top:1.2rem; left:calc(50% + 1.1rem);width:calc(100% + .45rem - 2.2rem);height:2px; background:var(--surface-line);pointer-events:none} .wizard-schritte button{display:flex;flex-direction:column;align-items:center;gap:.35rem; width:100%;min-height:3.7rem;padding:.25rem .05rem;border:0;border-radius:var(--r-control); background:transparent;color:inherit;font:inherit;cursor:pointer} .wizard-schritte button:disabled{cursor:default;opacity:1} .wizard-schritte button:focus-visible{outline:2px solid var(--tint);outline-offset:2px} .wizard-nr{display:grid;place-items:center;width:1.9rem;height:1.9rem; border:1px solid var(--surface-line);border-radius:50%;background:var(--sunken); font-weight:650;font-variant-numeric:tabular-nums} .wizard-schritte [aria-current="step"]{color:var(--ink);font-weight:650;background:var(--tint-bg)} .wizard-schritte [aria-current="step"] .wizard-nr{background:var(--tint);color:var(--on-tint,#fff);border-color:var(--tint)} .wizard-schritte .erledigt{color:var(--gruen)} .wizard-schritte .erledigt .wizard-nr{border-color:var(--gruen);background:var(--gruen-bg);color:var(--gruen)} .wizard-schritte .erledigt::after{background:var(--gruen)} .wizard-schritt h3{margin:0;font-size:1.1rem;letter-spacing:-.02em} .wizard-schritt h3:focus{outline:none} .wizard-schritt>.msg{margin:-.3rem 0 .2rem;line-height:1.45} .wizard-schritt:not([hidden]){animation:wizard-ankommen .18s var(--aufklapp)} @keyframes wizard-ankommen{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} #wizard-pruefen{display:flex;flex-direction:column;gap:.8rem} .wizard-pruefgruppe{border:1px solid var(--surface-line);border-radius:var(--r-card); padding:1rem;background:var(--raised)} .wizard-pruefkopf{display:flex;align-items:center;justify-content:space-between;gap:.7rem} .wizard-pruefkopf h4{margin:0;font-size:.9rem} .wizard-pruefkopf button{font-size:.8rem;flex-shrink:0} .wizard-pruefgruppe dl{margin:.75rem 0 0} .wizard-pruefgruppe dl>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:.65rem;padding:.5rem 0;border-top:1px solid var(--surface-line);font-size:.84rem;line-height:1.45} .wizard-pruefgruppe dt{color:var(--ink-2)} .wizard-pruefgruppe dd{margin:0;overflow-wrap:anywhere} .wizard-foot .secondary{background:var(--sunken);color:var(--ink)} @media(prefers-reduced-motion:reduce){.wizard-schritt:not([hidden]){animation:none}} /* Die Uebersicht oeffnet jeweils die vollstaendige Statusliste. */ .kuenstler-stats button.stat{border:0;font:inherit;color:inherit;cursor:pointer;text-align:center} .kuenstler-stats button.stat .n,.kuenstler-stats button.stat .l{display:block} .kuenstler-stats button.stat:focus-visible{outline:2px solid var(--tint);outline-offset:3px} .tag-loeschen{color:var(--rot);font-weight:550} /* 24.09.2026: die Tages-Aktionen als eine Reihe statt drei Zeilen. */ .tag-aktionen{display:flex;gap:.45rem;padding:.6rem .8rem .8rem;border-top:1px solid var(--surface-line)} .tag-aktion{flex:1 1 0;min-width:0;min-height:44px;border:0;border-radius:var(--r-control); background:var(--sunken);color:var(--ink);font:inherit;font-size:.86rem;font-weight:600; cursor:pointer;padding:0 .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:transform .12s var(--aus)} .tag-aktion:active{transform:scale(.97)} .tag-aktion.f-tint{background:var(--tint-bg);color:var(--tint)} .tag-aktion.tag-loeschen{background:var(--rot-bg);color:var(--rot)} @media (prefers-reduced-motion:reduce){.tag-aktion:active{transform:none}} [hidden] { display: none !important; } .kopf-aktionen { display:flex; align-items:center; gap:12px; } .inbox-knopf { position:relative; } .inbox-badge { position:absolute; right:-5px; top:-5px; min-width:19px; padding:2px 5px; border-radius:20px; background:var(--tint); color:var(--on-tint); font-size:11px; line-height:15px; font-weight:750; } .inbox-gruppe { margin:20px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; } .inbox-zeile { display:flex; align-items:center; gap:12px; padding:15px; border-bottom:1px solid var(--sep); } .inbox-zeile:last-child { border-bottom:0; } .inbox-zeile .txtbtn { flex-shrink:0; } /* Ersetzt ein gemeinsames .card um mehrere .bigbtn: die hatten schon eine eigene Kontur und eigene Ecken, ein zweiter Rahmen darum zeigte an jeder Naht einen Streifen der Karten-Flaeche zwischen zwei Knoepfen. Jeder Knopf bleibt jetzt freistehend, mit echtem Abstand statt einer Naht. */ .inbox-liste { display:flex; flex-direction:column; gap:.6rem; } .inbox-liste .bigbtn { position:relative; } /* Rot = ueberfaellig, wartet schon zu lange. Gelb = braucht Aufmerksamkeit, draengt aber noch nicht. Ein Punkt statt Text, weil die Karte selbst schon sagt, worum es geht. */ .dringlichkeit { position:absolute; top:.6rem; right:.65rem; width:.5rem; height:.5rem; border-radius:50%; flex:0 0 auto; } .dringlichkeit.rot { background:var(--rot); } .dringlichkeit.gelb { background:var(--gelb); } /* Stand zuerst als blasser Fliesztext da (.msg-link) - beim Testen glatt uebersehen. Jetzt ein farbiges Band mit Punkt, das wie eine echte Mitteilung aussieht, nicht wie eine Randnotiz. */ .plan-abstimmung-band { display:flex; align-items:center; gap:.65rem; width:100%; text-align:left; border:0; cursor:pointer; font:inherit; font-size:.87rem; font-weight:650; color:var(--ink); background:var(--rot-bg); border-radius:var(--r-inner); padding:.85rem .95rem; margin:.85rem 0 0; } .plan-abstimmung-band .chev { color:var(--rot); flex-shrink:0; } /* Seit 24.09.2026 zwei Zeilen: oben was auf MICH wartet, darunter die Teamzahl. Alles erledigt: ruhiges Gruen statt Alarmrot. */ .plan-abstimmung-band .band-t { display:block; } .plan-abstimmung-band .band-s { display:block; font-size:.78rem; font-weight:500; color:var(--ink-2); margin-top:.15rem; } .plan-abstimmung-band.erledigt { background:var(--gruen-bg); } .plan-abstimmung-band.erledigt .chev { color:var(--gruen); } .auswahl-leiste { position:sticky; top:75px; z-index:5; padding:12px; margin-bottom:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .auswahl-kreis { width:22px; height:22px; border:1.5px solid currentColor; border-radius:50%; display:grid; place-items:center; flex-shrink:0; color:var(--tint); } .auswahl-kreis.an { background:var(--tint); color:var(--on-tint); } .vorrat { padding:16px 18px; border-top:1px solid var(--sep); } .vorrat strong { display:block; margin-bottom:5px; } .kalender-link { width:100%; } /* Stimmenstand in der Team-Abstimmung, beauftragt 20./21.09.2026: Drae wollte die Zahl groesser und farbig sehen statt im Fliesztext versteckt. statt eines div mit style="width:..%" - inline style ist ohne 'unsafe-inline' in der CSP nicht erlaubt (style-src 'self'), ein Attribut auf einem nativen Element schon. */ .stimmen-uebersicht { margin-top:.85rem; } .stimmen-zahl { font-size:1.05rem; margin:0; color:var(--ink); } .stimmen-zahl strong { color:var(--gruen); font-size:1.3rem; } .stimmen-balken { display:block; width:100%; height:.5rem; margin-top:.4rem; border:0; border-radius:999px; overflow:hidden; appearance:none; } .stimmen-balken::-webkit-progress-bar { background:var(--sunken); border-radius:999px; } .stimmen-balken::-webkit-progress-value { background:var(--gruen); border-radius:999px; } .stimmen-balken::-moz-progress-bar { background:var(--gruen); border-radius:999px; } /* Frist genauso praesent wie der Stimmenstand darueber (dieselbe Klasse .stimmen-zahl), beauftragt 21.09.2026 - vorher war sie ein blasser Fliesztext mit Uhrzeit, die niemand brauchte. */ .frist-tage { margin-top:.5rem; } .frist-tage strong { color:var(--gelb); font-size:1.3rem; } .frist-tage.warn { color:var(--rot); } .frist-tage.warn strong { color:var(--rot); } .frist-datum { margin-top:.1rem; } /* Stimmen- und Fristueberblick direkt in der Warteschlangenzeile, nicht erst nach dem Oeffnen. Dritte Runde, beauftragt 21.09.2026: Drae wollte dieselbe Ring-Optik wie bei der Drehtag-Checkliste (siehe ring() in app.js, Klassen .ring-bahn/.ring-voll/.ring-zahl dort wiederverwendet) - "man sieht es, statt es zu lesen". Ein Ring fuellt sich mit den Stimmen, der andere leert sich mit der Frist. Ersetzt Balken+Chip sowie Songtitel und die fruehere Textzeile komplett. */ /* Vierte/fuenfte Runde, 21.09.2026: "der eigene Kasten", den Drae schon beim ersten Anlauf fuer den Stimmen-Ring wollte - jetzt als echter Block um beide Ringe, Stimmen links, Frist rechts (justify-content sorgt dafuer, auch wenn die Zeile mal breiter ist als die zwei Ringe). Beide Ringe tragen jetzt eine Kopfzeile ("STIMMEN"/"TAGE"). */ .bb-visual { display:flex; align-items:flex-end; justify-content:space-between; gap:1.1rem; margin-top:.6rem; padding:.65rem .9rem; background:var(--sunken); border-radius:var(--r-inner); } .mini-ring-mit-kopf{display:flex;flex-direction:column;align-items:center;gap:.2rem} .ring-kopf{font-size:.68rem;font-weight:750;color:var(--ink-3);letter-spacing:.04em; text-transform:uppercase;min-height:1em} .mini-ring svg{display:block;width:60px;height:60px} .mini-ring .ring-zahl{font-size:15px} .ring-voll.tage-gut { stroke:var(--gruen); } .ring-voll.tage-knapp { stroke:var(--gelb); } .ring-voll.tage-um { stroke:var(--rot); } .ring-voll.tage-neu { stroke:var(--ink-3); } /* "Visuell greifbarer", beauftragt 21.09.2026: Name in der Team-Abstimmungen-Liste noch einmal groeszer als der Rest der Zeile - Eigene Klasse statt .bb-t global zu aendern, die anderswo (Posteingang, Kuenstlerliste) in ihrer normalen Groesze bleiben. */ /* 24.09.2026, Drae: die Karten "bisschen kleiner, nicht so unnormal breit, kompakter". Name und beide Ringe jetzt in EINER Zeile, Ringe rechts ohne eigenen Kasten ueber die ganze Breite, kleiner. Die Ring-Optik selbst (Stimmen fuellt sich, Tage leert sich) bleibt. */ .ta-zeile{min-height:0;padding:.55rem .8rem;gap:.65rem} .ta-zeile .wachs{display:flex;align-items:center;gap:.7rem;min-width:0} .ta-zeile .bb-t{font-size:1.02rem;flex:1 1 auto;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .ta-zeile .bb-visual{flex:0 0 auto;margin:0;padding:0;background:none;gap:.55rem; justify-content:flex-end;align-items:center} .ta-zeile .mini-ring svg{width:40px;height:40px} .ta-zeile .mini-ring .ring-zahl{font-size:13px} .ta-zeile .ring-kopf{font-size:.55rem;letter-spacing:.03em} .ta-zeile .wachs{text-align:left} .ta-zeile .ring-bahn{stroke:var(--sep-2)} /* ------------------------------------------------------------------ Mac-Fenster (ab 64rem Breite) - Draes Wunsch 04.10.2026: als Web-App im Dock soll der Plan nicht wie ein gestrecktes Telefon aussehen. Gleiche Quelle, gleiche Knoepfe - nur anders angeordnet: - die Bereichsleiste wird zur Seitenleiste links (wie Mail, Finder), - der Inhalt nutzt die Breite, Text wird dichter (Mac-Standardgroesse), - die Aktionsknoepfe sitzen unten rechts statt quer ueber dem Inhalt, - Blaetter erscheinen als Fenster in der Mitte (gab es schon ab 34rem). Darunter bleibt alles exakt wie am Telefon. ------------------------------------------------------------------ */ .tb-k{display:none} @media (min-width:64rem){ :root{--seite:15.5rem;--page-x:clamp(1.75rem,3.2vw,3rem)} body{font-size:15px; background:radial-gradient(circle at calc(50% + var(--seite)/2) -14rem,var(--tint-bg),transparent 34rem),var(--bg)} /* Seitenleiste: volle Hoehe, schwereres Material als der Inhalt - sie trennt eine Region, sie lockt nicht zum Antippen. */ .tableiste{left:0;top:0;bottom:0;right:auto;width:var(--seite);transform:none; border-radius:0;padding:1.6rem .75rem 1rem;box-shadow:none;overflow-y:auto; border-right:1px solid var(--surface-line);background:var(--glas-leiste)} .tableiste::before{content:"Bereiche";display:block;margin:0 .6rem .55rem; font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .seg.tabs{flex-direction:column;align-items:stretch;gap:.12rem;max-width:none;margin:0} /* Die gleitende Pille rechnet in Vierteln der Breite - in einer Spalte ergibt das keinen Sinn. Hier traegt die Zeile selbst die Auswahl. */ .seg.tabs::before{display:none} .seg.tabs .tb{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:.62rem; min-height:2.15rem;padding:.38rem .6rem;border-radius:8px; font-size:.9rem;font-weight:500;letter-spacing:-.005em;color:var(--ink-2)} .seg.tabs .tb-i{width:18px;height:18px} .seg.tabs .tb[aria-selected="true"]{background:var(--tint-bg);color:var(--tint);font-weight:600} .seg.tabs .tb:active{transform:none;background:var(--sunken)} .seg.tabs .tb[aria-selected="true"] .tb-i{animation:none} .tb-t{flex:1;text-align:left} .tb-k{display:block;font:inherit;font-size:.72rem;font-weight:500;color:var(--ink-3); font-variant-numeric:tabular-nums;letter-spacing:.02em} .seg.tabs .tb[aria-selected="true"] .tb-k{color:var(--tint);opacity:.75} .seg.tabs .tb:focus-visible{outline:2px solid var(--tint);outline-offset:-2px} /* Inhalt rechts von der Leiste, mittig in seinem eigenen Raum. */ /* width:auto statt der 100 % von oben - sonst addiert sich der Abstand links zur vollen Breite, und der Inhalt laeuft rechts aus dem Fenster. */ .app{width:auto;max-width:none;margin:0 0 0 var(--seite); padding:0 var(--page-x) 7rem} .app>header,.app>.kopfleiste,.app>#status,.app>.tab{max-width:62rem;margin-left:auto;margin-right:auto} .app>.kopfleiste{position:sticky} header{padding:2.1rem .1rem 1.4rem} .brand{font-size:1.7rem} /* Aktionsknoepfe: kompakt unten rechts, keine Leiste quer durchs Bild. */ .fab{left:auto;right:var(--page-x);bottom:1.4rem;transform:none;width:auto;gap:.5rem} .fab button{flex:0 0 auto;min-height:2.6rem;padding:0 1.15rem;border-radius:12px;font-size:.92rem} .fab button:active{transform:scale(.98)} /* Blaetter: etwas breiter, Fenstermaszstab statt Telefon-Ecken. */ .sheet{width:min(38rem,88vw);max-height:86vh;border-radius:16px} /* Schweben ueber der Liste - ohne Schatten verschmolz "Features" mit den Zeilen darunter. */ .fab button{box-shadow:var(--e2)} /* Mac-Listen sind linksbuendig; die mittige Karte bleibt dem Telefon. */ .inbox-liste .bigbtn{text-align:left} /* Zeiger statt Finger: Zeilen reagieren auf das Darueberfahren. */ .item,.check,.bigbtn{transition:background-color .12s ease} } @media (min-width:64rem) and (hover:hover){ .seg.tabs .tb:not([aria-selected="true"]):hover{background:var(--sunken);color:var(--ink)} } @media (min-width:64rem) and (prefers-reduced-transparency:reduce){ .tableiste{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} }