*{box-sizing:border-box;margin:0;padding:0} /* Farbtafel. Alle Farben stehen hier – im Rest der Datei wird nur noch auf diese Namen verwiesen. Der dunkle Anstrich weiter unten tauscht nur diese Werte aus; kein einziges Gestaltungsregelwerk muss doppelt gepflegt werden. */ :root{ --bg:#f4f6fa; --karte:#fff; --flaeche2:#eef1f7; --feld:#fff; --text:#1c2431; --leise:#66748c; --rand:#e2e7f0; --rand2:#b9c8e6; --dunkel:#16233a; --dunkel2:#1f3050; --blau:#3f6fe0; --gruen:#1f9d55; --gelb:#c98a00; --rot:#d64545; /* weiche Einfärbungen für Marken, Hinweise und Vergleiche */ --blau-weich:#e8edf9; --blau-weich2:#eef3ff; --blau-text:#33508f; --blau-text2:#2b4c99; --gelb-weich:#fff2d6; --gelb-weich2:#fff8e6; --gelb-text:#8a5f00; --gelb-rand:#f0dca8; --rot-weich:#ffe3e0; --rot-weich2:#fdecec; --rot-text:#a33; --rot-rand:#f6cfcc; --gruen-weich:#dff3e6; --gruen-weich2:#e9f7ee; --gruen-text:#166b3a; --gruen-rand:#c5e8d3; --grauknopf:#e6eaf2; --grauknopf-text:#33405a; --balken:#c5cfdf; --balken2:#8298bb; --tipp:#1e2b40; --tippschrift:#fff; --marke-zahl:rgba(0,0,0,.08); --kopfhoehe:52px; --schrift:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* Dunkler Anstrich. Wird über data-thema="dunkel" am geschaltet. */ :root[data-thema="dunkel"]{ --bg:#10161f; --karte:#18202c; --flaeche2:#212b3a; --feld:#1c2532; --text:#e4eaf4; --leise:#93a2b8; --rand:#2c3849; --rand2:#3d4f6b; --dunkel:#0b1119; --dunkel2:#131b26; --blau:#4b7ded; --gruen:#2fa96a; --gelb:#d99b28; --rot:#e05c5c; --blau-weich:#1d2c4b; --blau-weich2:#1a2740; --blau-text:#a9c4ff; --blau-text2:#a9c4ff; --gelb-weich:#3a2e14; --gelb-weich2:#2f2611; --gelb-text:#f0c76b; --gelb-rand:#5a4820; --rot-weich:#3d2022; --rot-weich2:#331c1e; --rot-text:#f0a3a3; --rot-rand:#5d2f31; --gruen-weich:#153224; --gruen-weich2:#12291d; --gruen-text:#7ed6a4; --gruen-rand:#255239; --grauknopf:#2a3546; --grauknopf-text:#ccd6e6; --balken:#3c4a60; --balken2:#6b83a8; --tipp:#2b3850; --tippschrift:#eef3ff; --marke-zahl:rgba(255,255,255,.14); } /* Damit Bildlaufleisten, Auswahlfelder und Kalender mitdunkeln */ :root[data-thema="dunkel"]{color-scheme:dark} :root[data-thema="hell"]{color-scheme:light} body{font-family:var(--schrift);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55} .verborgen{display:none!important} button{font:inherit;cursor:pointer;border:0;border-radius:8px} input,textarea,select{font:inherit;color:inherit;background:var(--feld);border:1px solid var(--rand);border-radius:8px;padding:9px 11px;width:100%} input:focus,textarea:focus,select:focus{outline:2px solid var(--blau);outline-offset:-1px} textarea{resize:vertical;min-height:90px;font-family:var(--schrift)} a{color:var(--blau)} /* Anmeldung */ .anmeldung{min-height:100dvh;display:grid;place-items:center;background:var(--dunkel);padding:20px} .anmeldung .karte{background:var(--karte);padding:32px;border-radius:14px;width:min(360px,100%);display:grid;gap:12px} .anmeldung h1{font-size:26px} .anmeldung .hinweis{color:var(--leise);font-size:14px;margin-bottom:4px} .anmeldung button{background:var(--blau);color:#fff;padding:11px;font-weight:600} .fehler{color:var(--rot);font-size:14px;min-height:20px} /* Rahmen */ .buero{display:grid;grid-template-columns:var(--spaltenbreite,230px) 1fr;grid-template-rows:auto 1fr;height:100dvh;overflow:hidden} /* Die Seitenleiste geht über die volle Fensterhöhe, der Kopf sitzt rechts daneben */ .spalte{grid-column:1;grid-row:1/-1} .kopf{grid-column:2;grid-row:1;display:flex;align-items:center;gap:12px;background:var(--dunkel);color:#fff;padding:10px 16px;min-height:var(--kopfhoehe);position:sticky;top:0;z-index:30} .inhalt{grid-column:2;grid-row:2} .marke{font-weight:700} .kopfmarke{display:none} .wachstum{flex:1} .freigabezaehler{background:var(--gelb);color:#fff;padding:3px 10px;border-radius:20px;font-size:13px;font-weight:600} .kopf .klein{background:rgba(255,255,255,.15);color:#fff;padding:6px 12px;font-size:13px} .menuknopf{display:none;background:rgba(255,255,255,.15);color:#fff;padding:5px 11px;font-size:17px} /* Menüspalte */ .spalte{background:var(--dunkel2);color:#c9d5ea;padding:0 10px 14px;display:flex;flex-direction:column;gap:6px;overflow:hidden} /* Markenblock ganz oben in der Seitenleiste */ .markenblock{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-height:var(--kopfhoehe); margin:0 -10px 8px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.1)} .markenknopf{position:relative;flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center; background:transparent;color:#fff;font-size:19px;line-height:1;padding:0;pointer-events:none} /* eigene Fläche fürs Logo – hier lässt sich das Emoji später gegen ein tauschen */ .markenlogo{display:grid;place-items:center;width:26px;height:26px;font-size:19px;line-height:1} .markenlogo img{width:100%;height:100%;object-fit:contain;display:block} .markenauf{display:none;font-size:17px;line-height:1} .markentext{font-weight:700;color:#fff;flex:1 1 auto;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .zuknopf{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;font-size:15px;line-height:1; background:rgba(255,255,255,.09);color:#c9d5ea;padding:0} .zuknopf:hover{background:rgba(255,255,255,.2);color:#fff} #agentennav{flex:1;min-height:40px;overflow-y:auto;display:flex;flex-direction:column;gap:2px} .navpunkt{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:#c9d5ea;text-decoration:none} .navpunkt:hover{background:rgba(255,255,255,.08)} .navpunkt.aktiv{background:var(--blau);color:#fff;font-weight:600} .navtitel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#7b8db0;margin:14px 0 4px 11px} .navblock{display:flex;flex-direction:column;gap:2px} .navblock.unten{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);flex:0 0 auto} .agentkopf{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;cursor:pointer;font-weight:600;color:#e6edf9} .agentkopf:hover{background:rgba(255,255,255,.08)} .punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .unterpunkte{margin:2px 0 8px 14px;border-left:1px solid rgba(255,255,255,.14);padding-left:6px;display:flex;flex-direction:column;gap:1px} .unterpunkt{padding:6px 10px;border-radius:6px;font-size:13.5px;cursor:pointer;color:#a9b8d2} .unterpunkt:hover{background:rgba(255,255,255,.07)} .unterpunkt.aktiv{background:var(--blau);color:#fff;font-weight:600} .pille{background:var(--gelb);color:#fff;border-radius:20px;padding:0 7px;font-size:11.5px;font-weight:700;margin-left:auto} .notaus{background:#5c2222;color:#ffb4b4;padding:9px;font-size:13.5px;font-weight:600;width:100%} .notaus:hover{background:var(--rot);color:#fff} .schatten{display:none} /* Knopf mit dem Namen des angemeldeten Benutzers – er öffnet das Fenster */ .nutzerknopf{background:rgba(255,255,255,.07);width:100%;text-align:left;color:#c9d5ea;font-weight:600} .nutzerknopf .navtext{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nutzerknopf .nutzerpfeil{font-size:11px;opacity:.6;flex:0 0 auto} .nutzerknopf:hover{background:rgba(255,255,255,.16);color:#fff} .nutzerknopf.aktiv{background:var(--blau);color:#fff} .buero.schmal .nutzerknopf .nutzerpfeil{display:none} /* Eigenes Fenster für Verwaltung, Profil und Einstellungen */ .menuschicht{position:fixed;inset:0;background:rgba(10,16,28,.55);z-index:95; display:grid;place-items:center;padding:18px} /* Das Fenster wächst mit dem Bildschirm und füllt ihn bis auf einen schmalen Rand. Die Grenze bei 2000px ist keine Bescheidenheit, sondern Erfahrung: Darüber steht auf einem sehr großen Schirm mehr Rand als Inhalt. Damit die Fließtexte darin nicht zu langen Zeilen werden, sind sie eigens begrenzt (siehe .menukoerper .karte>p weiter unten). */ .menublatt{background:var(--karte);border-radius:14px; width:min(2000px,100%);height:min(1200px,100%); display:grid;grid-template-columns:238px 1fr;overflow:hidden; box-shadow:0 18px 60px rgba(10,20,40,.4)} .menuspalte{background:var(--dunkel);padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto} .menuspaltekopf{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700; padding:6px 8px 12px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:8px} .menuavatar{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14); display:grid;place-items:center;font-size:15px;flex:0 0 auto} .menuwer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menupunkt{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px; cursor:pointer;font-size:14px;color:#c9d5ea} .menupunkt:hover{background:rgba(255,255,255,.08)} .menupunkt.aktiv{background:var(--blau);color:#fff;font-weight:600} .menutitel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#7b8db0; margin:14px 0 4px 11px;min-height:6px} .menuinhalt{position:relative;overflow-y:auto;background:var(--bg)} .menukoerper{padding:22px 26px} /* Erklärtexte bleiben lesbar, auch wenn das Fenster sehr breit ist: Über etwa 100 Zeichen je Zeile findet das Auge beim Umbruch die nächste Zeile nicht mehr zuverlässig. Tabellen und Formulare nutzen die Breite weiterhin ganz. */ .menukoerper .karte>p,.menukoerper>.unterzeile{max-width:105ch} .menukopfleiste{position:absolute;top:12px;right:14px;z-index:3;display:flex;align-items:center;gap:10px} .menuueberschrift{display:none} .menuzu{width:32px;height:32px;display:grid;place-items:center; background:var(--grauknopf);color:var(--grauknopf-text);font-size:15px;padding:0} .menuzu:hover{background:var(--rand2);color:#fff} .menutabs{display:none} .menuwahl{display:none} /* Tablet hochkant: das Fenster füllt den Schirm, das Menü liegt als Zeile oben */ @media(max-width:820px){ .menuschicht{padding:0} .menublatt{width:100%;height:100%;border-radius:0;grid-template-columns:1fr;grid-template-rows:auto 1fr} .menuspalte{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:10px} .menuspaltekopf{border-bottom:0;margin:0;padding:0 8px 0 0;flex:0 0 auto} .menupunkt{padding:7px 10px;font-size:13.5px} .menukoerper{padding:18px 14px} } /* Handy: feste Leiste am unteren Rand, wie in einer App. Sie bleibt immer stehen – gescrollt wird nur der Inhalt darüber. */ @media(max-width:700px){ .menuschicht{padding:0;height:100dvh} .menublatt{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0;position:relative; --tabhoehe:calc(56px + env(safe-area-inset-bottom,0px))} .menuspalte{display:none} /* die Seitenspalte weicht der Leiste unten */ .menuinhalt{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column} .menukopfleiste{position:sticky;top:0;right:auto;z-index:3;display:flex;align-items:center; justify-content:space-between;gap:10px;padding:11px 12px;background:var(--dunkel);color:#fff; flex:0 0 auto} .menuueberschrift{display:block;font-size:16px;font-weight:700;color:#fff; text-transform:none;letter-spacing:0;margin:0;padding:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menuzu{background:rgba(255,255,255,.14);color:#fff;flex:0 0 auto} .menuzu:hover{background:rgba(255,255,255,.28)} .menukoerper{padding:14px 12px 18px} .menukoerper>h2{display:none} /* die Überschrift steht schon oben in der Leiste */ .menuinhalt{overflow-x:hidden} .menukoerper .karte{overflow-x:auto} /* breite Tabellen scrollen in ihrer Karte */ .menukoerper td .reihe{flex-wrap:wrap;justify-content:flex-start;gap:5px} .menukoerper table{min-width:520px} /* lieber seitwärts schieben als alles quetschen */ .menutabs{display:flex;flex:0 0 auto;background:var(--dunkel);border-top:1px solid rgba(255,255,255,.12); padding-bottom:env(safe-area-inset-bottom,0px)} .menutab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; background:transparent;color:#a9b8d2;padding:9px 4px 8px;border-radius:0;min-height:56px;font-size:11px} .menutab .tabsymbol{font-size:19px;line-height:1} .menutab .tabtext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .menutab.aktiv{color:#fff;font-weight:700;box-shadow:inset 0 2px 0 var(--blau)} .menutab:active{background:rgba(255,255,255,.08)} /* Auswahl der Einstellungsseiten – fährt über der Leiste herein */ /* Das Blatt endet über der Leiste – die bleibt immer sichtbar und bedienbar */ .menuwahl{display:block;position:absolute;left:0;right:0;top:0;bottom:var(--tabhoehe); background:rgba(10,16,28,.5);z-index:6} .menuwahl.verborgen{display:none!important} .menuwahlblatt{position:absolute;left:0;right:0;bottom:0;background:var(--karte); border-radius:14px 14px 0 0;padding:10px 10px 12px; box-shadow:0 -10px 40px rgba(10,20,40,.4)} .menuwahltitel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--leise); padding:6px 10px 8px} .menuwahlpunkt{display:flex;align-items:center;gap:10px;padding:13px 10px;border-radius:9px; font-size:15px;color:var(--text);cursor:pointer} .menuwahlpunkt.aktiv{background:var(--blau-weich);color:var(--blau-text);font-weight:600} .wahlhaken{margin-left:auto;color:var(--blau)} } /* Inhalt */ /* Der Inhalt nutzt immer die volle verfügbare Breite */ .inhalt{padding:22px 26px;overflow-y:auto;width:100%} h2{font-size:21px;margin-bottom:3px} h3{font-size:16px;margin-bottom:8px} .unterzeile{color:var(--leise);font-size:14px;margin-bottom:18px;max-width:110ch} .karte{background:var(--karte);border:1px solid var(--rand);border-radius:12px;padding:16px;margin-bottom:14px} .gitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .leise{color:var(--leise);font-size:13.5px} .kachel{background:var(--karte);border:1px solid var(--rand);border-radius:12px;padding:15px} .kachel .zahl{font-size:27px;font-weight:700;line-height:1.2} .reihe{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .knopf{background:var(--blau);color:#fff;padding:9px 15px;font-weight:600;font-size:14px} .knopf.grau{background:var(--grauknopf);color:var(--grauknopf-text)} .knopf.gruen{background:var(--gruen)} .knopf.rot{background:var(--rot)} .knopf.mini{padding:5px 11px;font-size:13px;font-weight:500} .marke2{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600} .m-offen{background:var(--blau-weich);color:var(--blau-text)} .m-arbeit{background:var(--gelb-weich);color:var(--gelb-text)} .m-freigabe{background:var(--rot-weich);color:var(--rot-text)} .m-fertig{background:var(--gruen-weich);color:var(--gruen-text)} .ampel{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px} .ampel::before{content:"";width:11px;height:11px;border-radius:50%} .a-gruen::before{background:var(--gruen)} .a-gruen{color:var(--gruen)} .a-gelb::before{background:var(--gelb)} .a-gelb{color:var(--gelb)} .a-rot::before{background:var(--rot)} .a-rot{color:var(--rot)} .zeile{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--rand);align-items:flex-start} .zeile:last-child{border-bottom:0} .zeit{color:var(--leise);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums} .vn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0} .vn>div{padding:10px;border-radius:8px;font-size:13.5px} .vorher{background:var(--rot-weich2);border:1px solid var(--rot-rand)} .nachher{background:var(--gruen-weich2);border:1px solid var(--gruen-rand)} .pruefliste{list-style:none;font-size:13.5px} .pruefliste li{padding:3px 0 3px 22px;position:relative} .pruefliste li::before{content:"✓";position:absolute;left:0;color:var(--gruen);font-weight:700} .pruefliste li.warn::before{content:"!";color:var(--gelb)} .pruefliste li.warn{color:var(--gelb-text);font-weight:600} /* Chat */ .chatfenster{display:flex;flex-direction:column;height:100%;min-height:0} .verlauf{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px 46px 18px 2px} .blase{max-width:min(78%,960px);padding:9px 13px;border-radius:13px;font-size:14.5px;white-space:pre-wrap;word-break:break-word} .b-ich{align-self:flex-end;background:var(--blau);color:#fff;border-bottom-right-radius:4px} .b-ich .zeit{color:rgba(255,255,255,.8)} .b-system .zeit{display:none} .b-agent{align-self:flex-start;background:var(--karte);border:1px solid var(--rand);border-bottom-left-radius:4px} .b-system{align-self:center;background:var(--flaeche2);color:var(--leise);font-size:13px;text-align:center} .blase .wer{font-size:11.5px;opacity:.8;display:block;margin-bottom:2px;font-weight:600} .eingabe{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--rand)} .eingabe textarea{min-height:44px;max-height:130px} .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .chip{background:var(--blau-weich);color:var(--blau-text);border-radius:20px;padding:4px 11px;font-size:13px;cursor:pointer;font-weight:600} table{width:100%;border-collapse:collapse;font-size:14px} th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--rand);vertical-align:top} th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--leise)} /* Spalten in Zugangs- und ähnlichen Tabellen: Die Knopfspalte nimmt nur, was sie braucht, die breite Spalte bekommt den Rest. So bleibt auf großen Bildschirmen kein Loch in der Mitte stehen. */ .zknoepfe{width:1%;white-space:nowrap;vertical-align:middle} .zknopfreihe{justify-content:flex-end;gap:6px} /* Das Auswahlfeld für die Rolle darf schmaler werden als sein längster Eintrag – sonst zwingt es die Tabelle auf kleinen Schirmen über den Rand. */ /* Das Auswahlfeld für die Rolle: schmal genug, dass die Tabelle auf kleinen Schirmen nicht über den Rand wächst, aber breit genug, dass „Mitarbeiter" noch lesbar bleibt. */ .zspalte-rolle select{width:100%;min-width:100px;max-width:160px} /* Passt eine Tabelle einmal doch nicht in ihre Karte – etwa in einem schmalen Fenster –, dann schiebt man sie seitwärts, statt dass sie über den Rand ragt. Am Handy war das schon lange so; es gilt jetzt überall. */ .menukoerper .karte{overflow-x:auto} /* Erst ab 1250 Pixeln Bildschirmbreite ist wirklich Platz: Dann stehen die Knöpfe in einer Zeile, und die zwei Textspalten teilen sich den Rest – sonst drängte sich alles links zusammen und in der Mitte klaffte eine Lücke. Darunter bleibt es beim natürlichen Umbruch; nachgemessen ragt die Tabelle sonst über ihre Karte hinaus (auf 13-Zoll-Geräten). */ @media(min-width:1250px){ .zspalte-name{width:26%} .zspalte-breit{width:42%} .zknopfreihe{flex-wrap:nowrap} } /* Felder fließen nebeneinander und dehnen sich, bis die Zeile voll ist – so bleibt auf breiten Bildschirmen kein Platz ungenutzt. */ .formular{display:flex;flex-wrap:wrap;gap:11px 18px;width:100%} .formular>.feld{flex:1 1 300px;min-width:0} .formular>.feld:has(textarea){flex-basis:100%} .formular>.reihe,.formular>button,.formular>.pwfeld{flex:1 1 100%} .feld label{display:block;font-size:13px;font-weight:600;margin-bottom:4px} .feld .tipp{font-weight:400;color:var(--leise);font-size:12.5px} .warnkarte{background:var(--gelb-weich2);border-color:var(--gelb-rand)} .angehalten-hinweis{background:#5c2222;color:#ffd7d7;padding:9px 14px;border-radius:9px;margin-bottom:14px;font-weight:600;font-size:14px} @media(max-width:860px){ .buero{grid-template-columns:1fr;height:100dvh} .kopf{grid-column:1;grid-row:1} .inhalt{grid-column:1;grid-row:2} .menuknopf{display:block} /* auf dem Handy steht die Marke im Kopf, die Schublade braucht sie dann nicht */ .kopfmarke{display:block;white-space:nowrap} .markenblock{display:none} .spalte{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:50;transform:translateX(-100%);transition:transform .2s;padding:14px 10px} .spalte.offen{transform:none} .schatten.an{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40} .inhalt{padding:15px} .vn{grid-template-columns:1fr} } /* --- Chat: Prompt-Verlauf und Scrollknoepfe --- */ .werbinich{font-size:12.5px;opacity:.65;margin-right:4px} .chatlayout{display:grid;grid-template-columns:1fr 30px;gap:12px;align-items:stretch} /* Im Chat scrollt nur der Verlauf – kein zweiter Balken am Fensterrand, und die Eingabe bleibt fest am unteren Rand stehen. */ .inhalt.chatansicht{overflow:hidden;display:flex;flex-direction:column;min-height:0} .inhalt.chatansicht>h2,.inhalt.chatansicht>.unterzeile,.inhalt.chatansicht>.karte, .inhalt.chatansicht>.anwesend,.inhalt.chatansicht>.reihe{flex:0 0 auto} .inhalt.chatansicht .chatlayout{flex:1 1 auto;min-height:0} .inhalt.chatansicht .eingabefeld,.inhalt.chatansicht .chips, .inhalt.chatansicht .bildvorschau{flex:0 0 auto} .verlaufrahmen{position:relative;flex:1;min-height:0;display:flex;overflow:hidden} .verlaufrahmen .verlauf{flex:1} .scrollknoepfe{position:absolute;right:6px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:5} .rundknopf{width:34px;height:34px;border-radius:50%;background:var(--karte);border:1px solid var(--rand); color:var(--text);font-size:16px;line-height:1;box-shadow:0 2px 8px rgba(20,35,60,.14)} .rundknopf:hover{background:var(--blau);color:#fff;border-color:var(--blau)} .blase.hervor{animation:blitz 1.6s ease-out} @keyframes blitz{0%{box-shadow:0 0 0 3px #ffd66b}60%{box-shadow:0 0 0 3px #ffd66b}100%{box-shadow:0 0 0 3px transparent}} /* Schmale Balkenleiste: je eigener Eingabe ein Balken, oben alt, unten neu */ .balkenleiste{background:var(--karte);border:1px solid var(--rand);border-radius:10px; display:flex;flex-direction:column;align-items:center;width:30px;padding:3px 0 5px; max-height:100%;overflow:hidden} .bltitel{font-size:13px;opacity:.55;padding:2px 0 4px;cursor:default;flex:0 0 auto} .blinhalt{width:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column; align-items:center;gap:4px;scrollbar-width:none} .blinhalt::-webkit-scrollbar{display:none} .blleer{color:var(--leise);font-size:13px} .vbalken{flex:0 0 auto;width:13px;height:5px;border-radius:3px;background:var(--balken);cursor:pointer; transition:width .12s ease, background .12s ease} .vbalken:hover{width:22px;background:var(--balken2)} .vbalken.jetzt{width:24px;height:6px;background:var(--blau)} .vblase{position:fixed;display:none;z-index:60;max-width:280px;background:var(--tipp);color:var(--tippschrift); font-size:12.5px;line-height:1.4;padding:7px 10px;border-radius:8px;pointer-events:none; box-shadow:0 6px 20px rgba(15,25,45,.3)} .nurklein{display:none} @media(max-width:900px){ .chatlayout{grid-template-columns:1fr} .nurklein{display:inline-block} .balkenleiste{position:fixed;right:10px;left:auto;bottom:96px;top:auto;max-height:52dvh; z-index:35;box-shadow:0 8px 30px rgba(15,25,45,.28);display:none} .balkenleiste.offen{display:flex} } @media(max-width:560px){ .werbinich{display:none} .freigabezaehler{font-size:12px;padding:2px 8px} } /* Am Handy ist die Kopfzeile knapp. Der Freigabe-Zähler steht ohnehin als Pille in der Menüleiste – hier darf er weichen, damit „Abmelden“ passt. */ @media(max-width:700px){ .kopf{gap:8px;flex-wrap:nowrap;overflow:hidden} .freigabezaehler{display:none} } /* --- Passwortfeld mit Auge --- */ .pwfeld{position:relative;display:flex;align-items:center} .pwfeld input{padding-right:44px} .pwfeld .auge{position:absolute;right:4px;width:auto;background:transparent;color:var(--text); padding:6px 8px;font-size:17px;font-weight:400;line-height:1;opacity:.55;border-radius:6px} .pwfeld .auge:hover{opacity:1;background:var(--flaeche2)} .pwfeld .auge.an{opacity:1} /* --- Geraete-Vorschau --- */ .vorschaubuehne{display:flex;justify-content:center;overflow:hidden} .geraet{position:relative;box-sizing:content-box;transform-origin:top center;background:#000;flex:0 0 auto; border:9px solid #222b3a;box-shadow:0 12px 40px rgba(15,25,45,.3)} .geraet iframe{width:100%;height:100%;border:0;background:var(--karte);display:block;border-radius:inherit} /* --- Bild im Chat --- */ .chatbild{display:block;max-width:100%;max-height:280px;border-radius:9px;margin-bottom:6px;cursor:zoom-in} .bildvorschau{display:flex;align-items:center;gap:11px;background:var(--karte);border:1px solid var(--rand); border-radius:10px;padding:8px 11px;margin-bottom:8px} .bildvorschau img{width:52px;height:52px;object-fit:cover;border-radius:7px;flex:0 0 auto} .bildvorschau>div{flex:1;min-width:0;font-size:13.5px} /* Bild oder Anfangsbuchstaben einer Person */ .benutzerbild{border-radius:50%;object-fit:cover;display:inline-grid;place-items:center; flex:0 0 auto;color:#fff;font-weight:700;vertical-align:middle;line-height:1; border:1px solid var(--rand)} .benutzerbild.initialen{letter-spacing:.02em} .blase .wer .benutzerbild{margin-right:5px;border:0} .blase .wer.wer-ich{margin-bottom:1px} .anwesender{display:inline-flex;align-items:center;gap:4px;margin-right:8px} .anwesender .benutzerbild{border:0} #nutzersymbol .benutzerbild,#menuavatar .benutzerbild{border:0} /* Budgetbalken */ .budgetbalken{height:10px;border-radius:6px;background:var(--flaeche2);overflow:hidden; border:1px solid var(--rand)} .budgetbalken span{display:block;height:100%;transition:width .2s} /* Rollenübersicht */ .rollenkarte.meine{border-color:var(--blau);box-shadow:0 0 0 1px var(--blau) inset} /* Wunschliste: Tickets */ .ticketzeile{cursor:pointer;transition:border-color .12s ease, transform .06s ease} .ticketzeile.gewaehlt{border-color:var(--blau);background:var(--blau-weich2)} .tickethaken{display:flex;align-items:center;cursor:pointer;padding:2px 4px 0 0} .tickethaken input{width:17px;height:17px;cursor:pointer} .auswahlleiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px; padding:9px 12px;background:var(--blau-weich);border-radius:9px;color:var(--blau-text)} .ticketzeile:hover{border-color:var(--rand2)} .ticketzeile:active{transform:scale(.998)} .ticketblatt{width:min(1180px,100%);height:min(820px,100%);display:flex;flex-direction:column} .ticketkopf{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--dunkel); flex:0 0 auto} .tickettitel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff; font-size:17px;font-weight:700;flex:1} .tickettitel:focus{background:rgba(255,255,255,.16)} .ticketkoerper{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr} .ticketlinks{padding:16px;overflow-y:auto;background:var(--bg)} .ticketrechts{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--rand); background:var(--karte)} .ticketchatkopf{padding:12px 14px;border-bottom:1px solid var(--rand);flex:0 0 auto} .ticketverlauf{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px; padding:12px 14px} .ticketrechts .eingabe{padding:10px 14px 14px;margin:0} .anweisung{white-space:pre-wrap;background:var(--flaeche2);border:1px solid var(--rand); border-radius:9px;padding:12px;font-size:14px;max-height:260px;overflow-y:auto} @media(max-width:900px){ .ticketblatt{width:100%;height:100%;border-radius:0} .ticketkoerper{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto} .ticketrechts{border-left:0;border-top:1px solid var(--rand);min-height:60vh} } /* Umschalter zwischen Gesprächszweigen */ .zweigleiste{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px; padding:7px 10px;background:var(--flaeche2);border:1px solid var(--rand);border-radius:9px} .blase.bearbeiten{background:var(--karte);color:var(--text);border:1px solid var(--blau); max-width:min(92%,960px);width:min(92%,960px)} .blase.bearbeiten textarea{width:100%;min-height:70px} /* Knöpfe unter einer Chatnachricht: nur beim Darüberfahren sichtbar */ .blasenhuelle{position:relative;display:flex;flex-direction:column;align-items:flex-start} .blasenhuelle.h-ich{align-items:flex-end} .blasenhuelle.h-system{align-items:center} /* Die Knöpfe hängen unter der Blase, ohne Platz zu verbrauchen – sonst würde der Verlauf für lauter unsichtbare Knopfreihen auseinandergezogen. */ .blasenknoepfe{position:absolute;top:100%;margin-top:1px;z-index:4; display:flex;gap:4px;opacity:0;transform:translateY(-2px); transition:opacity .12s ease, transform .12s ease;pointer-events:none} .blasenknoepfe.k-ich{right:0} .blasenhuelle:hover .blasenknoepfe, .blasenhuelle:focus-within .blasenknoepfe{opacity:1;transform:none;pointer-events:auto} .blasenknopf{display:inline-flex;align-items:center;gap:4px;background:var(--flaeche2); color:var(--leise);border:1px solid var(--rand);border-radius:7px;padding:2px 7px; font-size:12px;line-height:1.5} .blasenknopf:hover{background:var(--grauknopf);color:var(--text)} .blasenknopf span{display:none} .blasenknopf:hover span{display:inline} .kurzhinweis{position:absolute;right:0;bottom:100%;background:var(--tipp);color:var(--tippschrift); font-size:12px;padding:3px 8px;border-radius:7px;margin-bottom:4px;z-index:5} /* Am Handy gibt es kein Darüberfahren – dort stehen die Knöpfe einfach da */ @media(hover:none){ .blasenknoepfe{opacity:1;transform:none;pointer-events:auto} } /* Vorher/Nachher nebeneinander – am Handy untereinander */ .bildvergleich{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .bildvergleich figure{background:var(--flaeche2);border:1px solid var(--rand);border-radius:10px; overflow:hidden;display:flex;flex-direction:column} .bildvergleich figcaption{font-size:12.5px;color:var(--leise);padding:7px 9px; border-bottom:1px solid var(--rand);background:var(--karte)} .bildrahmen{max-height:440px;overflow-y:auto;overflow-x:hidden} .bildvergleich img{width:100%;height:auto;display:block;cursor:zoom-in} @media(max-width:700px){ .bildvergleich{grid-template-columns:1fr} } .bildgross{position:fixed;inset:0;background:rgba(10,16,28,.88);z-index:100;display:grid;place-items:center; padding:22px;cursor:zoom-out} .bildgross img{max-width:100%;max-height:100%;border-radius:9px;box-shadow:0 10px 50px rgba(0,0,0,.5)} .bildgross .zu{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.16);color:#fff; font-size:19px;padding:5px 13px} .bildknopf{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;cursor:pointer; border:1px solid var(--rand);border-radius:8px;background:var(--karte);font-size:18px} .bildknopf:hover{background:var(--blau-weich2);border-color:var(--blau)} /* --- Auswahlliste bei @ --- */ .eingabefeld{position:relative} .nennliste{display:none;position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;z-index:20; background:var(--karte);border:1px solid var(--rand);border-radius:10px;overflow:hidden; box-shadow:0 8px 26px rgba(15,25,45,.18);max-height:230px;overflow-y:auto} .nennliste.offen{display:block} .nenneintrag{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;font-size:14px; border-bottom:1px solid var(--rand)} .nenneintrag:last-child{border-bottom:0} .nenneintrag:hover,.nenneintrag.aktiv{background:var(--blau-weich2)} .nenneintrag.aktiv{box-shadow:inset 3px 0 0 var(--blau)} /* --- Agent denkt nach --- */ .blase.denkt{color:var(--leise);font-style:italic} .denkpunkte{display:inline-flex;gap:4px;vertical-align:middle;margin-right:4px} .denkpunkte i{width:6px;height:6px;border-radius:50%;background:var(--blau);display:block; animation:huepf 1.1s infinite ease-in-out} .denkpunkte i:nth-child(2){animation-delay:.15s} .denkpunkte i:nth-child(3){animation-delay:.3s} @keyframes huepf{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} /* --- Rollen --- */ .rollenmarke{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.16);margin-right:6px} .rollenmarke.admin{background:var(--blau)} .m-admin{background:var(--blau-weich);color:var(--blau-text2)} .m-user{background:var(--flaeche2);color:var(--leise)} @media(max-width:560px){ .rollenmarke{display:none} } .nurlesen{white-space:pre-wrap;word-break:break-word;background:var(--flaeche2);border:1px solid var(--rand); border-radius:9px;padding:12px;font-family:ui-monospace,Menlo,monospace;font-size:13px;max-height:420px;overflow:auto} /* --- Mehrbenutzer: Anwesenheit --- */ .anwesend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px; background:var(--karte);border:1px solid var(--rand);border-radius:9px;padding:7px 12px;margin-bottom:12px} .anwesend .punkt{width:8px;height:8px} .tippt{color:var(--blau);font-style:italic;margin-left:6px;animation:pulsieren 1.4s infinite} @keyframes pulsieren{0%,100%{opacity:1}50%{opacity:.45}} /* --- Auswahlkarten in der Konfiguration --- */ .wahl{display:grid;gap:10px} .wahlkarte{display:flex;gap:11px;align-items:flex-start;border:2px solid var(--rand);border-radius:11px; padding:13px 15px;cursor:pointer;background:var(--karte)} .wahlkarte:hover{border-color:var(--rand2)} .wahlkarte.an{border-color:var(--blau);background:var(--blau-weich2)} .wahlkarte input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--blau)} .wahlkarte b{display:block;margin-bottom:3px} /* --- Menüleiste: schmal machen und Breite ziehen --- */ .navsymbol{flex:0 0 auto;width:19px;text-align:center;font-size:15px} .navtext{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ziehgriff{display:none} /* Kürzel des Agenten – nur in der schmalen Leiste sichtbar */ .agentkuerzel{display:none} @media(min-width:861px){ .spalte{position:relative} /* Ziehgriff an der rechten Kante der Menüleiste */ .ziehgriff{display:block;position:absolute;top:0;right:0;bottom:0;width:5px; cursor:col-resize;z-index:60;background:transparent} .ziehgriff:hover,.ziehgriff.zieht{background:var(--blau)} /* zusammengeklappte Leiste: nur noch Symbole */ .buero.schmal{grid-template-columns:56px 1fr} .buero.schmal .spalte{padding:0 4px 14px;align-items:stretch} .buero.schmal .navtext{display:none} .buero.schmal .navtitel{display:none} .buero.schmal .navpunkt, .buero.schmal .agentkopf, .buero.schmal .notaus{position:relative;justify-content:center;padding-left:0;padding-right:0;gap:0} /* eingeklappt: nur das Logo, es wird beim Darüberfahren zum Öffnen-Knopf */ .buero.schmal .markenblock{margin:0 -4px 8px;padding:0;justify-content:center;gap:0} .buero.schmal .markentext, .buero.schmal .zuknopf{display:none} .buero.schmal .markenknopf{pointer-events:auto;cursor:pointer;border-radius:8px} .buero.schmal .markenknopf:hover, .buero.schmal .markenknopf:focus-visible{background:rgba(255,255,255,.18)} .buero.schmal .markenknopf:hover .markenlogo, .buero.schmal .markenknopf:focus-visible .markenlogo{display:none} .buero.schmal .markenknopf:hover .markenauf, .buero.schmal .markenknopf:focus-visible .markenauf{display:block} .buero.schmal .unterpunkte{display:none} .buero.schmal .pille{position:absolute;top:1px;right:2px;margin-left:0;padding:0 5px;font-size:10px} .buero.schmal .agentkopf .punkt{position:absolute;top:6px;left:6px} .buero.schmal .agentkopf span[data-pfeil]{display:none} .buero.schmal .agentkuerzel{display:block;font-size:11.5px;font-weight:700;color:#e6edf9;width:34px} } /* --- Portraits der Agenten --- */ .portrait{border-radius:8px;display:block;flex:0 0 auto;background:var(--flaeche2);object-fit:cover} .portrait.mini{width:26px;height:26px;border-radius:6px} .portrait.winzig{width:20px;height:20px;border-radius:5px;vertical-align:-4px;margin-right:5px;display:inline-block} .portrait.klein{width:44px;height:44px} /* großes Bild in voller Kartenform 5:7 – hier wird nichts beschnitten */ .portrait.gross{width:200px;height:280px;border-radius:12px;object-fit:contain; box-shadow:0 6px 22px rgba(15,25,45,.18)} .navbild{position:relative;display:inline-flex;flex:0 0 auto} .eckpunkt{position:absolute;right:-2px;bottom:-2px;border:2px solid var(--dunkel2)} .steckbriefreihe{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start} .portraitfeld{flex:0 0 auto;width:200px} .farbtupfer{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid var(--karte); box-shadow:0 0 0 1px var(--rand)} .farbtupfer:hover{transform:scale(1.12)} .buero.schmal .portrait.mini{width:30px;height:30px} /* --- Ältere Nachrichten nachladen --- */ .nachladen{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0 12px; border-bottom:1px dashed var(--rand);margin-bottom:8px;flex:0 0 auto} .nachladen .leise{font-size:12.5px} /* --- Suche im Logbuch --- */ .logsuche{gap:8px;flex-wrap:wrap} .logsuche input{border-radius:20px;padding-left:14px} .fehler.hinweiston{color:var(--gelb-text);background:var(--gelb-weich2);border:1px solid var(--gelb-rand);border-radius:8px; padding:8px 10px;font-size:13.5px;min-height:0} /* --- Änderungsliste --- */ .hinweisknopf{position:relative;background:rgba(255,255,255,.15);color:#fff;font-size:15px; padding:5px 10px;border-radius:8px;line-height:1} .hinweisknopf:hover{background:rgba(255,255,255,.3)} .neuzaehler{position:absolute;top:-5px;right:-5px;background:var(--gelb);color:#fff; border-radius:20px;min-width:17px;height:17px;font-size:11px;font-weight:700; display:grid;place-items:center;padding:0 4px} .hinweisschicht{position:fixed;inset:0;background:rgba(10,16,28,.55);z-index:90; display:flex;justify-content:flex-end;padding:14px} .hinweisblatt{background:var(--karte);border-radius:14px;width:min(460px,100%);max-height:100%; display:flex;flex-direction:column;box-shadow:0 14px 50px rgba(10,20,40,.35);cursor:default} .hinweiskopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:15px 16px;border-bottom:1px solid var(--rand);flex:0 0 auto} .hinweisinhalt{overflow-y:auto;padding:6px 16px 16px} .aenderung{padding:12px 0;border-bottom:1px solid var(--rand)} .aenderung:last-child{border-bottom:0} .aenderung.neu{background:var(--gelb-weich2);margin:0 -10px;padding:12px 10px;border-radius:9px} .aenderung ul{margin:6px 0 0 18px;font-size:14px;line-height:1.5} .aenderung li{margin-bottom:3px} @media(max-width:560px){ .hinweisschicht{padding:0} .hinweisblatt{width:100%;border-radius:0} } /* --- Schalter für das Sprachmodell --- */ .kischalter{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none; background:rgba(255,255,255,.14);padding:4px 10px 4px 6px;border-radius:20px} .kischalter.gesperrt{cursor:default;opacity:.7} .kischalter input{position:absolute;opacity:0;width:0;height:0} .kischalter .schieber{position:relative;width:34px;height:18px;border-radius:20px; background:var(--gruen);transition:background .15s;flex:0 0 auto} .kischalter .schieber::after{content:"";position:absolute;top:2px;left:18px;width:14px;height:14px; border-radius:50%;background:var(--karte);transition:left .15s} .kischalter.aus .schieber{background:rgba(255,255,255,.35)} .kischalter.aus .schieber::after{left:2px} .kitext{font-size:12px;font-weight:700;letter-spacing:.05em;color:#fff} .kischalter.aus .kitext{opacity:.6} @media(max-width:560px){ .kitext{display:none} } tr.freigegeben{background:var(--blau-weich2)} tr.freigegeben td b{color:var(--blau)} /* --- Modelltabelle: Eignung --- */ .modelltabelle td.wofuer{max-width:430px} .faehig{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px} .kannmarke{background:var(--blau-weich);color:var(--blau-text2);border-radius:20px;padding:1px 8px;font-size:11.5px;font-weight:600} .kannmarke.nicht{background:var(--rot-weich2);color:var(--rot-text)} .beschreibung{font-size:12.5px;line-height:1.45} .warnmarke{display:inline-block;background:var(--gelb-weich);color:var(--gelb-text);border-radius:6px; padding:1px 7px;font-size:11.5px;font-weight:600;margin-top:3px} /* ---------- Schnellfilter für Modelle ---------- */ .schnellfilter{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px} .sftitel{margin-right:2px} .sfmarke{background:var(--karte);border:1px solid var(--rand);color:var(--text);border-radius:20px; padding:5px 11px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:6px;align-items:center} .sfmarke:hover{border-color:var(--blau);color:var(--blau)} .sfmarke.an{background:var(--blau);border-color:var(--blau);color:#fff} .sfmarke.leerlauf{opacity:.45} .sfmarke.leeren{border-style:dashed;font-weight:500;color:var(--leise)} .sfzahl{background:var(--marke-zahl);border-radius:20px;padding:0 6px;font-size:11.5px;font-weight:700} .sfmarke.an .sfzahl{background:rgba(255,255,255,.25)} .sfhinweis{margin:0 0 12px;font-size:13px} /* ---------- Verbrauchsdiagramm ---------- */ .vkopf{gap:8px;margin-bottom:12px;flex-wrap:wrap} .vkopf h3{margin:0} .vkacheln{margin-bottom:16px} .vtitel{margin:16px 0 8px;font-size:14px;color:var(--leise);font-weight:700; text-transform:uppercase;letter-spacing:.4px} .vbrliste{display:flex;flex-direction:column;gap:6px} .vbrzeile{display:flex;align-items:center;gap:10px} .vbrname{flex:0 0 190px;font-size:13px;font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .vbrspur{flex:1;background:var(--bg);border-radius:6px;height:20px;overflow:hidden;min-width:60px} .vbrfuellung{height:100%;border-radius:6px;transition:width .3s} .vbrwert{flex:0 0 auto;font-size:12.5px;color:var(--leise);white-space:nowrap} .vsaeulen{display:flex;gap:8px;align-items:flex-end;height:140px;padding-top:6px} .vsaeule{flex:1 1 0;max-width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0} .vsspur{width:100%;height:104px;background:var(--bg);border-radius:6px; display:flex;align-items:flex-end;overflow:hidden} .vsfuellung{width:100%;background:var(--blau);border-radius:6px 6px 0 0;transition:height .3s} .vsfuellung.mitfehler{box-shadow:inset 0 3px 0 var(--rot)} /* an diesem Tag ging etwas schief */ .vsbeschriftung{font-size:11px;color:var(--leise);white-space:nowrap;overflow:hidden} .vfuss{margin-top:14px;font-size:12.5px} @media (max-width:700px){ /* Am Handy ist zu wenig Platz für Name, Balken und Zahl nebeneinander – der Name bekommt eine eigene Zeile darüber. */ .vbrzeile{flex-wrap:wrap;row-gap:2px;margin-bottom:4px} .vbrname{flex:1 1 100%;font-size:12.5px} .vbrwert{font-size:11.5px} .vsbeschriftung{font-size:9.5px} .vtitel{margin-top:14px} } /* ---------- Knopf für hell/dunkel ---------- */ .anstrichknopf{background:rgba(255,255,255,.15);color:#fff;font-size:15px;line-height:1; padding:5px 10px;border-radius:8px;flex:0 0 auto} .anstrichknopf:hover{background:rgba(255,255,255,.3)} .anstrichknopf span{display:block;transition:transform .25s} .anstrichknopf:hover span{transform:rotate(-18deg) scale(1.12)} /* auf der Anmeldeseite gibt es keine Kopfzeile – dort schwebt der Knopf oben rechts */ .anstrichknopf.frei{position:fixed;top:14px;right:16px;z-index:5} @media(max-width:560px){ .anstrichknopf{padding:5px 8px} } /* ---------- Erscheinungsbild des Hauses ---------- */ .markenlogo img,.anmeldelogo img{width:100%;height:100%;object-fit:contain;display:block} .anmeldelogo{display:inline-grid;place-items:center;width:32px;height:32px;vertical-align:-6px} .anmeldung h1{display:flex;align-items:center;gap:9px;font-size:24px} .kopfmarke{display:none;align-items:center;gap:8px} .kopfmarke .markenlogo{width:22px;height:22px;font-size:17px} .rollenmarke.inhaber{background:var(--gelb);color:#fff} .logovorschau{width:88px;height:88px;display:grid;place-items:center;font-size:38px;flex:0 0 auto; background:var(--flaeche2);border:1px solid var(--rand);border-radius:12px;overflow:hidden} .logovorschau img{width:100%;height:100%;object-fit:contain} .farbvorschlaege{display:flex;gap:6px;flex-wrap:wrap} .markenvorschau{border-radius:12px;padding:26px;display:grid;place-items:center} .mvkarte{background:var(--karte);border-radius:12px;padding:18px;width:min(280px,100%);display:grid;gap:9px} .mvkopf{display:flex;align-items:center;gap:8px;font-size:17px} .mvkopf img{width:26px;height:26px;object-fit:contain} .mvfeld{border:1px solid var(--rand);border-radius:8px;padding:8px 10px;color:var(--leise);font-size:13px} .mvknopf{color:#fff;text-align:center;border-radius:8px;padding:9px;font-weight:600;font-size:14px} @media(max-width:860px){ .kopfmarke{display:flex} } /* ---------- Chatfarbe je Person ---------- Die eigenen Nachrichten stehen rechts, die der Kollegen links. Die Farbe kommt vom Server, damit alle dieselbe Person in derselben Farbe sehen. */ .b-andere{align-self:flex-start;color:#fff;border-bottom-left-radius:4px} .b-andere .wer{opacity:.9;font-weight:700} .b-andere .zeit{color:rgba(255,255,255,.8)} .farbprobe{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:13px; color:#fff;font-size:14.5px;font-weight:500} /* ---------- Suche ---------- */ .trefferliste{display:flex;flex-direction:column;gap:2px} .treffer{display:flex;gap:12px;padding:11px 10px;border-radius:9px;cursor:pointer; border-bottom:1px solid var(--rand)} .treffer:hover{background:var(--flaeche2)} .treffer:last-child{border-bottom:0} .trsymbol{flex:0 0 auto;font-size:19px;width:26px;text-align:center;line-height:1.4} .trinhalt{flex:1;min-width:0} .trkopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px} .trtext{font-size:13.5px;color:var(--leise);line-height:1.5;word-break:break-word} mark{background:var(--gelb-weich);color:var(--gelb-text);border-radius:3px;padding:0 2px} /* ---------- Mediathek ---------- */ .medkacheln{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .medkachel{border:1px solid var(--rand);border-radius:11px;padding:10px;display:flex; flex-direction:column;gap:4px;background:var(--karte);cursor:pointer;overflow:hidden} .medkachel:hover{border-color:var(--blau)} .medbild{height:110px;display:grid;place-items:center;background:var(--flaeche2); border-radius:8px;overflow:hidden;margin-bottom:4px} .medbild img{width:100%;height:100%;object-fit:cover;display:block} .medsymbol{font-size:40px;line-height:1} .medsymbol.klein{font-size:19px;flex:0 0 auto} .medname{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .medklein{font-size:11.5px} .medkachel .knopf{margin-top:6px;text-align:center;text-decoration:none;display:block} .medliste{display:flex;flex-direction:column} .medzeile{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--rand); cursor:pointer;border-radius:7px;font-size:14px} .medzeile:hover{background:var(--flaeche2)} .medzeile:last-child{border-bottom:0} .medzeile .medname{flex:0 1 auto;max-width:320px} .medzeile a.knopf{text-decoration:none} @media(max-width:700px){ .medkacheln{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .medzeile .leise{display:none} .medzeile .medname{max-width:none;flex:1} } /* ---------- Suche innerhalb eines Gesprächs ---------- Die Lupe sitzt oben rechts neben der Überschrift. Beim Anklicken wächst das Eingabefeld nach links aus ihr heraus – geschlossen kostet es keinen Platz. */ .chattitel{display:flex;align-items:center;gap:10px;margin-bottom:3px} .chattitel h2{margin-bottom:0} .chatsuche-kopf{display:flex;align-items:center;gap:6px;flex:0 0 auto} .chatsuche-kopf form{display:flex;overflow:hidden} .chatsuchfeld{width:0;padding:0;border-width:0;opacity:0;border-radius:20px; transition:width .22s ease, opacity .18s ease, padding .22s ease;font-size:14px} .chatsuche-kopf.offen .chatsuchfeld{width:min(320px,52vw);opacity:1;padding:7px 14px;border-width:1px} .lupenknopf{width:36px;height:36px;border-radius:50%;flex:0 0 auto; background:var(--flaeche2);color:var(--text);font-size:16px;line-height:1; display:grid;place-items:center;border:1px solid var(--rand)} .lupenknopf:hover{background:var(--blau);color:#fff;border-color:var(--blau)} .lupenknopf.an{background:var(--blau);color:#fff;border-color:var(--blau)} .suchzahl{background:var(--blau);color:#fff;border-radius:20px;padding:1px 9px; font-size:12px;font-weight:700;flex:0 0 auto} .suchzahl.leer{background:var(--grauknopf);color:var(--grauknopf-text)} .chatsuche-treffer{background:var(--karte);border:1px solid var(--rand);border-radius:9px; padding:8px 11px;margin-bottom:10px;flex:0 0 auto} .ctreffer{max-height:180px;overflow-y:auto} .ctreffer-zeile{display:flex;gap:9px;align-items:baseline;padding:6px;border-radius:7px; cursor:pointer;font-size:13.5px} .ctreffer-zeile:hover{background:var(--flaeche2)} .ctext{color:var(--leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} @media(max-width:560px){ .chatsuche-kopf.offen .chatsuchfeld{width:min(200px,46vw)} .chattitel h2{font-size:19px} } /* ---------- Erscheinungsbild des Hauses ---------- */ .markenlogo img,.anmeldelogo img{width:100%;height:100%;object-fit:contain;display:block} .anmeldelogo{display:inline-grid;place-items:center;width:32px;height:32px;vertical-align:-6px} .anmeldung h1{display:flex;align-items:center;gap:9px;font-size:24px} .kopfmarke{display:none;align-items:center;gap:8px} .kopfmarke .markenlogo{width:22px;height:22px;font-size:17px} .rollenmarke.inhaber{background:var(--gelb);color:#fff} .logovorschau{width:88px;height:88px;display:grid;place-items:center;font-size:38px;flex:0 0 auto; background:var(--flaeche2);border:1px solid var(--rand);border-radius:12px;overflow:hidden} .logovorschau img{width:100%;height:100%;object-fit:contain} .farbvorschlaege{display:flex;gap:6px;flex-wrap:wrap} .markenvorschau{border-radius:12px;padding:26px;display:grid;place-items:center} .mvkarte{background:var(--karte);border-radius:12px;padding:18px;width:min(280px,100%);display:grid;gap:9px} .mvkopf{display:flex;align-items:center;gap:8px;font-size:17px} .mvkopf img{width:26px;height:26px;object-fit:contain} .mvfeld{border:1px solid var(--rand);border-radius:8px;padding:8px 10px;color:var(--leise);font-size:13px} .mvknopf{color:#fff;text-align:center;border-radius:8px;padding:9px;font-weight:600;font-size:14px} @media(max-width:860px){ .kopfmarke{display:flex} } /* ---------- Chatfarbe je Person ---------- Die eigenen Nachrichten stehen rechts, die der Kollegen links. Die Farbe kommt vom Server, damit alle dieselbe Person in derselben Farbe sehen. */ .b-andere{align-self:flex-start;color:#fff;border-bottom-left-radius:4px} .b-andere .wer{opacity:.9;font-weight:700} .b-andere .zeit{color:rgba(255,255,255,.8)} .farbprobe{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:13px; color:#fff;font-size:14.5px;font-weight:500} /* ---------- Suche ---------- */ .trefferliste{display:flex;flex-direction:column;gap:2px} .treffer{display:flex;gap:12px;padding:11px 10px;border-radius:9px;cursor:pointer; border-bottom:1px solid var(--rand)} .treffer:hover{background:var(--flaeche2)} .treffer:last-child{border-bottom:0} .trsymbol{flex:0 0 auto;font-size:19px;width:26px;text-align:center;line-height:1.4} .trinhalt{flex:1;min-width:0} .trkopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px} .trtext{font-size:13.5px;color:var(--leise);line-height:1.5;word-break:break-word} mark{background:var(--gelb-weich);color:var(--gelb-text);border-radius:3px;padding:0 2px} /* ---------- Mediathek ---------- */ .medkacheln{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .medkachel{border:1px solid var(--rand);border-radius:11px;padding:10px;display:flex; flex-direction:column;gap:4px;background:var(--karte);cursor:pointer;overflow:hidden} .medkachel:hover{border-color:var(--blau)} .medbild{height:110px;display:grid;place-items:center;background:var(--flaeche2); border-radius:8px;overflow:hidden;margin-bottom:4px} .medbild img{width:100%;height:100%;object-fit:cover;display:block} .medsymbol{font-size:40px;line-height:1} .medsymbol.klein{font-size:19px;flex:0 0 auto} .medname{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .medklein{font-size:11.5px} .medkachel .knopf{margin-top:6px;text-align:center;text-decoration:none;display:block} .medliste{display:flex;flex-direction:column} .medzeile{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--rand); cursor:pointer;border-radius:7px;font-size:14px} .medzeile:hover{background:var(--flaeche2)} .medzeile:last-child{border-bottom:0} .medzeile .medname{flex:0 1 auto;max-width:320px} .medzeile a.knopf{text-decoration:none} @media(max-width:700px){ .medkacheln{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} .medzeile .leise{display:none} .medzeile .medname{max-width:none;flex:1} } /* ---------- Suche innerhalb eines Gesprächs ---------- */ .chatsuche{background:var(--karte);border:1px solid var(--rand);border-radius:9px; padding:8px 11px;margin-bottom:10px;flex:0 0 auto} .chatsuche .csymbol{font-size:15px;opacity:.6} .chatsuche input{border-radius:20px} .ctreffer{max-height:190px;overflow-y:auto;border-top:1px solid var(--rand);margin-top:6px;padding-top:4px} .ctreffer-zeile{display:flex;gap:9px;align-items:baseline;padding:6px 6px;border-radius:7px; cursor:pointer;font-size:13.5px} .ctreffer-zeile:hover{background:var(--flaeche2)} .ctext{color:var(--leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .anstrichknopf.sprachknopf{right:62px} .m-inhaber{background:var(--gelb-weich);color:var(--gelb-text)} /* Sortierbare Spaltenköpfe in der Zugangsliste. Der Pfeil steht im Kopf und nicht daneben, damit die Spalte beim Umschalten nicht springt. */ .sortierbar{cursor:pointer;user-select:none;white-space:nowrap} .sortierbar:hover{color:var(--blau)} .sortpfeil{display:inline-block;min-width:12px;font-size:11px;opacity:.8}