/* ══════════════════════════════════════════════════════════════
   RheinAgent Systems · Bildmarke, Wortmarke und Akzentfarbe
   ══════════════════════════════════════════════════════════════ */
/* Die Farbwerte stehen jetzt in 00-farben.css. */

/* Wortmarke: Rhein + Agent (Akzentfarbe) + Systems */
.ra-wortmarke{display:inline-flex;align-items:baseline;white-space:nowrap;font-weight:800;letter-spacing:-.005em}
.ra-wortmarke .w1{color:inherit}
.ra-wortmarke .w2{color:var(--ra-akzent)}
.ra-wortmarke .w3{font-weight:400;opacity:.72;margin-left:.36em}
.ra-mark{display:block;color:inherit;flex:0 0 auto}

/* Bildmarke in der Icon-Leiste */
.ra-rail-logo{
  background:none!important;box-shadow:none!important;border:none!important;
  border-radius:0!important;padding:0;cursor:pointer;
  width:44px!important;height:33px!important;color:#f3f4f6;margin-bottom:18px;
  transition:transform .15s,opacity .15s;
}
.ra-rail-logo:hover{transform:translateY(-1px);opacity:.85}
.ra-rail-logo .ra-mark{width:44px;height:33px}

/* Wortmarke in der Admin-Kopfzeile */
.ra-crumb-root.ra-wortmarke{font-size:.95rem;color:#0d1526}
html.gs-dark .ra-crumb-root.ra-wortmarke{color:#e8edf6}

/* Anmeldeseite */
.login-brand .logo{
  background:none!important;box-shadow:none!important;border-radius:0!important;
  width:104px!important;height:78px!important;color:#f3f4f6;margin:0 auto .6rem;
}
.login-brand .logo .ra-mark{width:104px;height:78px}
.login-brand h1.ra-wortmarke{display:flex;justify-content:center;font-size:1.55rem}
.login-brand p{color:rgba(255,255,255,.55)!important}

/* Kundenbereich */
.topbar-logo{background:none!important;border-radius:0!important;width:40px!important;height:30px!important;color:#0d1526}
html.gs-dark .topbar-logo{background:none!important;color:#e8edf6}
.topbar-logo .ra-mark{width:40px;height:30px}
#website .topbar h1.ra-wortmarke{font-size:1.05rem}

/* ── Akzentfarbe im ganzen Programm ────────────────────────── */
.ra-rail-btn.on{background:var(--ra-akzent-hell);color:#fff}
.ra-rail-btn.on::before{background:var(--ra-akzent);box-shadow:0 0 12px var(--ra-akzent)}
.ra-fly-item.on{background:var(--ra-akzent-hell);color:var(--ra-akzent-dunkel)}
.ra-fly-item.on svg{color:var(--ra-akzent-dunkel)}
.ra-fly-item.on .ra-fly-count{color:var(--ra-akzent-dunkel)}
html.gs-dark .ra-fly-item.on{background:var(--ra-akzent-hell);color:var(--ra-akzent)}
html.gs-dark .ra-fly-item.on svg{color:var(--ra-akzent)}

.btn-primary{
  background:var(--ra-akzent)!important;border-color:var(--ra-akzent)!important;
  color:var(--ra-akzent-text)!important;box-shadow:none!important;
}
.btn-primary:hover{background:var(--ra-akzent-dunkel)!important}
.rp-btn-p{background:var(--ra-akzent)!important;color:var(--ra-akzent-text)!important}
.rp-btn-p:hover{background:var(--ra-akzent-dunkel)!important}
.login-btn{background:var(--ra-akzent)!important;color:var(--ra-akzent-text)!important}
.login-btn:hover{background:var(--ra-akzent-dunkel)!important}
.login-btn:disabled{opacity:.5}
#chat-fab{background:var(--ra-akzent)!important;color:var(--ra-akzent-text)!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important}
.cst-new-btn{background:var(--ra-akzent)!important;color:var(--ra-akzent-text)!important;box-shadow:none!important}
.cst-new-btn:hover{background:var(--ra-akzent-dunkel)!important}
.btn-open{background:var(--ra-akzent)!important;border-color:var(--ra-akzent)!important;color:var(--ra-akzent-text)!important}
.btn-open:hover{background:var(--ra-akzent-dunkel)!important}
#chat-fab svg{color:var(--ra-akzent-text)!important;stroke:var(--ra-akzent-text)!important}

/* Farbwahl in den Einstellungen */
.ra-farbwahl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:280px}
.ra-farbknopf{width:24px;height:24px;border-radius:50%;cursor:pointer;padding:0;border:2px solid transparent;outline:none}
.ra-farbknopf.on{border-color:#0d1526;box-shadow:0 0 0 2px #fff inset}
html.gs-dark .ra-farbknopf.on{border-color:#e8edf6;box-shadow:0 0 0 2px #1b2330 inset}
.ra-farbfrei{width:32px;height:26px;padding:0;border:1px solid #e3e8f0;border-radius:6px;cursor:pointer;background:none}

/* ══════════════════════════════════════════════════════════════
   Kundenbereich · gleiche Struktur wie der Admin-Bereich
   ══════════════════════════════════════════════════════════════ */
#website .ra-shell{
  display:flex; height:100vh; width:100%; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#website .ra-work{flex:1;display:flex;flex-direction:column;min-width:0;background:#f4f6fa}
#website .ra-work > .topbar{
  flex:0 0 auto;position:static;padding:.6rem 1.25rem;border-bottom:1px solid #e5e7eb;
}
#website .ra-work > .kunde-main{
  flex:1;overflow-y:auto;max-width:none;margin:0;padding:1.5rem 1.5rem 4rem;
}
#website .ra-canvas{max-width:1360px;margin:0 auto}
#website .ra-crumb-root.ra-wortmarke{font-size:.95rem}
#website .kunde-main h2{margin-bottom:.25rem}
#website .sw-impersonate-bar{flex:0 0 auto}
html.gs-dark #website .ra-work{background:#151b26}
html.gs-dark #website .ra-work > .topbar{border-bottom-color:#232c3d}

/* Kachel- und Kartenabstaende im Kundenbereich angleichen */
#website .ra-panel .card{padding:1.5rem 1.6rem;border-radius:1.1rem;margin-top:0}
#website .ra-panel .card + .card{margin-top:14px}
#website .ra-panel .cst-head{margin-bottom:1rem}
#website .ra-attn-row b{font-weight:650}

@media (max-width:1100px){
  #website .ra-work > .kunde-main{padding:1.2rem 1rem 4rem}
}
@media (max-width:900px){
  #website .ra-flyout{position:absolute;left:68px;top:0;bottom:0;z-index:35}
  #website .ra-work > .topbar .role-badge{display:none}
}

/* ══════════════════════════════════════════════════════════════
   Ticket-Archiv
   ══════════════════════════════════════════════════════════════ */
.tk-col-fuss{
  margin-top:.55rem;padding-top:.6rem;border-top:1px dashed #d8e0ec;
  display:flex;flex-direction:column;gap:.4rem;
}
.tk-fuss-txt{font-size:.7rem;color:#94a3b8;line-height:1.45}
.tk-fuss-btn{
  align-self:flex-start;border:1px solid #e3e8f0;background:#fff;color:#475569;
  font:inherit;font-size:.72rem;font-weight:600;padding:.3rem .6rem;border-radius:.5rem;cursor:pointer;
}
.tk-fuss-btn:hover{border-color:var(--ra-akzent);color:var(--ra-akzent-dunkel)}
.tk-fuss-btn.stark{border-color:var(--ra-akzent);color:var(--ra-akzent-dunkel);font-weight:700}
.tk-card-archiv{
  border:1px solid #e3e8f0;background:#f8fafc;color:#64748b;
  font:inherit;font-size:.66rem;font-weight:600;padding:.12rem .42rem;
  border-radius:999px;cursor:pointer;margin-left:.35rem;
}
.tk-card-archiv:hover{border-color:var(--ra-akzent);color:var(--ra-akzent-dunkel);background:#fff}
.tk-arch-suche{
  height:38px;padding:0 .8rem;border:1px solid #e3e8f0;border-radius:.6rem;
  font:inherit;font-size:.845rem;background:#fff;color:#0d1526;min-width:240px;
}
.tk-arch-suche:focus{outline:none;border-color:var(--ra-akzent)}
.tk-arch-leer{font-size:.83rem;color:#94a3b8;padding:1.4rem .2rem;line-height:1.6}
.cst-mehr{
  width:100%;border:1px dashed #d8e0ec;background:none;color:#6b7890;
  font:inherit;font-size:.78rem;font-weight:600;padding:.55rem;border-radius:.6rem;cursor:pointer;
}
.cst-mehr:hover{border-color:var(--ra-akzent);color:var(--ra-akzent-dunkel)}
html.gs-dark .cst-mehr{border-color:#33405a;color:#aab4c6}
.tk-arch-marke{
  display:inline-block;margin-left:.45rem;padding:.06rem .42rem;border-radius:999px;
  font-size:.64rem;font-weight:700;background:#fff4e5;color:#a55b0b;vertical-align:middle;
}
html.gs-dark .tk-col-fuss{border-top-color:#2a3549}
html.gs-dark .tk-fuss-btn{background:#232d3f;border-color:#33405a;color:#c6cfdf}
html.gs-dark .tk-card-archiv{background:#232d3f;border-color:#33405a;color:#aab4c6}
html.gs-dark .tk-arch-suche{background:#232d3f;border-color:#33405a;color:#dfe5ef}
html.gs-dark .tk-arch-leer{color:#8b95a9}

/* ══════════════════════════════════════════════════════════════
   Einstellungen · Darstellung
   ══════════════════════════════════════════════════════════════ */
.ra-set-zeile{
  display:flex;align-items:center;gap:18px;padding:15px 4px;
  border-bottom:1px solid #f2f5fa;cursor:pointer;user-select:none;border-radius:8px;
  transition:background .14s;
}
.ra-set-zeile:hover{background:#f7f9fd}
.ra-set-zeile:last-child{border-bottom:none}
.ra-set-txt{flex:1;min-width:0}
.ra-set-txt b{display:block;font-size:.875rem;font-weight:650;color:#0d1526;margin-bottom:.15rem}
.ra-set-txt span{display:block;font-size:.79rem;color:#6b7890;line-height:1.5}
.ra-schalter{
  flex:0 0 auto;width:46px;height:26px;border-radius:999px;background:#d7dee9;
  position:relative;transition:background .18s;display:inline-block;
}
.ra-schalter::after{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(13,21,38,.3);transition:transform .18s;
}
.ra-schalter.an{background:var(--ra-akzent)}
.ra-schalter.an::after{transform:translateX(20px)}

/* Farbwahl */
.ra-farbraster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:.8rem}
@media (max-width:900px){ .ra-farbraster{grid-template-columns:repeat(2,1fr)} }
.ra-farbfeld{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;
  border:2px solid #e3e8f0;background:#fff;cursor:pointer;font:inherit;text-align:left;transition:.15s;
}
.ra-farbfeld:hover{border-color:#b9c4d6}
.ra-farbfeld.on{border-color:var(--f);background:color-mix(in srgb, var(--f) 8%, #fff)}
.ra-farbpunkt{
  width:20px;height:20px;border-radius:50%;background:var(--f);flex:0 0 auto;
  box-shadow:0 1px 4px rgba(13,21,38,.2);
}
.ra-farbfeld.on .ra-farbpunkt{box-shadow:0 0 0 3px #fff inset,0 1px 4px rgba(13,21,38,.25)}
.ra-farbname{font-size:.82rem;font-weight:600;color:#0d1526}
.ra-farbeigen{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid #f2f5fa;
}
.ra-farbeigen label{font-size:.82rem;font-weight:600;color:#3d4a60}
.ra-farbeigen input[type=color]{
  width:44px;height:32px;padding:0;border:1px solid #e3e8f0;border-radius:8px;background:none;cursor:pointer;
}
.ra-farbeigen code{
  font-size:.78rem;color:#6b7890;background:#f4f6fa;padding:.25rem .5rem;border-radius:6px;
}

/* Hell/Dunkel als Vorschaukarten */
.ra-modus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:.8rem}
@media (max-width:700px){ .ra-modus{grid-template-columns:1fr} }
.ra-modus-karte{
  border:2px solid #e3e8f0;border-radius:14px;padding:12px;background:#fff;
  cursor:pointer;font:inherit;text-align:left;transition:.16s;
}
.ra-modus-karte:hover{border-color:#b9c4d6}
.ra-modus-karte.on{border-color:var(--ra-akzent);box-shadow:0 0 0 3px var(--ra-akzent-hell)}
.ra-modus-karte b{display:block;font-size:.86rem;font-weight:650;color:#0d1526;margin:.65rem 0 .15rem}
.ra-modus-karte > span:last-child{display:block;font-size:.76rem;color:#6b7890;line-height:1.45}
.ra-modus-bild{
  display:flex;height:74px;border-radius:9px;overflow:hidden;border:1px solid #e3e8f0;
}
.ra-modus-bild .mb-leiste{width:18px;flex:0 0 18px}
.ra-modus-bild .mb-flaeche{flex:1;padding:9px 10px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.ra-modus-bild .mb-zeile{height:6px;border-radius:3px;width:60%}
.ra-modus-bild .mb-zeile.lang{width:85%}
.ra-modus-bild .mb-zeile.kurz{width:40%}
.ra-modus-bild.hell{background:#f4f6fa}
.ra-modus-bild.hell .mb-leiste{background:#0b1424}
.ra-modus-bild.hell .mb-zeile{background:#cdd6e4}
.ra-modus-bild.hell .mb-zeile.lang{background:var(--ra-akzent)}
.ra-modus-bild.dunkel{background:#151b26;border-color:#2a3549}
.ra-modus-bild.dunkel .mb-leiste{background:#0b1018}
.ra-modus-bild.dunkel .mb-zeile{background:#33405a}
.ra-modus-bild.dunkel .mb-zeile.lang{background:var(--ra-akzent)}

html.gs-dark .ra-set-zeile{border-bottom-color:#232c3d}
html.gs-dark .ra-set-zeile:hover{background:#1d2532}
html.gs-dark .ra-set-txt b{color:#e8edf6}
html.gs-dark .ra-set-txt span{color:#96a4bd}
html.gs-dark .ra-schalter{background:#3a465e}
html.gs-dark .ra-farbfeld{background:#232d3f;border-color:#33405a}
html.gs-dark .ra-farbname{color:#dfe5ef}
html.gs-dark .ra-farbeigen{border-top-color:#232c3d}
html.gs-dark .ra-farbeigen label{color:#c6cfdf}
html.gs-dark .ra-farbeigen code{background:#232d3f;color:#aab4c6}
html.gs-dark .ra-modus-karte{background:#232d3f;border-color:#33405a}
html.gs-dark .ra-modus-karte b{color:#e8edf6}
html.gs-dark .ra-modus-karte > span:last-child{color:#96a4bd}

/* ══════════════════════════════════════════════════════════════
   Anmeldeseite · zweigeteilt, ohne Farbverlauf
   ══════════════════════════════════════════════════════════════ */
#login-screen{
  min-height:100vh;display:grid;grid-template-columns:1.02fr .98fr;
  background:#fff;color:#1f2937;
}

/* Linke Markenseite */
.login-marke{
  position:relative;overflow:hidden;background:#0d1420;color:#e8edf6;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:3rem 3.4rem;
}
/* Feines Linienraster statt Farbverlauf */
.login-marke::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px);
}
/* Ein ruhiger Akzentstrich am rechten Rand */
.login-marke::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--ra-akzent);
}
.login-marke > *{position:relative;z-index:1}

.lm-lockup{display:flex;align-items:center;gap:14px}
.lm-mark{width:46px;height:35px;color:#f3f4f6;flex:0 0 auto}
.lm-strich{width:1px;height:30px;background:rgba(255,255,255,.22);flex:0 0 auto}
.lm-wort{font-size:1.22rem;color:#f3f4f6}

.lm-mitte{max-width:460px;padding:2.5rem 0}
.lm-mitte h2{
  font-size:2.15rem;font-weight:800;line-height:1.18;letter-spacing:-.025em;color:#fff;margin:0 0 1rem;
}
.lm-mitte > p{font-size:.95rem;line-height:1.65;color:#93a1b8;margin:0 0 2.2rem}
.lm-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.lm-liste li{display:flex;align-items:flex-start;gap:14px}
.lm-liste svg{
  width:19px;height:19px;flex:0 0 19px;color:var(--ra-akzent);margin-top:2px;
}
.lm-liste b{display:block;font-size:.875rem;font-weight:650;color:#e8edf6;margin-bottom:.15rem}
.lm-liste span{font-size:.8rem;color:#8b98ae;line-height:1.5}
.lm-fuss{font-size:.74rem;color:#6b7890}

/* Rechte Seite mit dem Formular */
.login-flaeche{
  display:flex;align-items:center;justify-content:center;padding:2.5rem 2rem;background:#fff;
}
#login-screen .login-box{
  background:none;box-shadow:none;border-radius:0;padding:0;
  width:100%;max-width:400px;margin:0;
}
#login-screen .login-box h2{font-size:1.6rem;font-weight:750;letter-spacing:-.02em;color:#0d1526}
#login-screen .login-box .sub{color:#6b7890;font-size:.875rem;margin:.35rem 0 1.9rem}
#login-screen .field label{font-size:.8rem;font-weight:600;color:#3d4a60}
#login-screen .field input{
  border:1.5px solid #e3e8f0;border-radius:.6rem;padding:.7rem .9rem;font-size:.9rem;background:#fff;
}
#login-screen .field input:focus{border-color:var(--ra-akzent);box-shadow:0 0 0 3px var(--ra-akzent-hell)}
#login-screen .login-btn{padding:.8rem;border-radius:.65rem;font-size:.9rem}
#login-screen .dev-bar{border-radius:.7rem;margin:1.6rem 0 0}

@media (max-width:960px){
  #login-screen{grid-template-columns:1fr}
  .login-marke{padding:1.6rem 1.5rem;flex-direction:row;align-items:center;justify-content:space-between}
  .login-marke::after{top:auto;left:0;right:0;bottom:0;width:auto;height:3px}
  .lm-mitte{display:none}
  .lm-fuss{display:none}
  .login-flaeche{padding:2rem 1.25rem}
}

/* Dunkelmodus */
html.gs-dark #login-screen{background:#151b26}
html.gs-dark .login-flaeche{background:#151b26}
html.gs-dark #login-screen .login-box h2{color:#e8edf6}
html.gs-dark #login-screen .login-box .sub{color:#96a4bd}
html.gs-dark #login-screen .field label{color:#c6cfdf}
html.gs-dark #login-screen .field input{background:#232d3f;border-color:#33405a;color:#dfe5ef}

/* ══════════════════════════════════════════════════════════════
   Chat · Bildunterschrift und Bild-Angaben lesbar machen
   Bildblasen haben keinen Hintergrund. Weisse Schrift war dort
   auf hellem Grund unsichtbar – deshalb bekommt der Begleittext
   jetzt eine eigene, farbige Blase.
   ══════════════════════════════════════════════════════════════ */
.chat-img-caption{
  margin-top:.3rem;padding:.42rem .6rem .48rem;border-radius:.55rem;
  font-size:.85rem;line-height:1.45;word-break:break-word;
}
.chat-row.own .chat-img-caption{background:var(--ra-akzent);color:var(--ra-akzent-text)}
.chat-row.them .chat-img-caption{background:#f1f5f9;color:#1e293b}
html.gs-dark .chat-row.own .chat-img-caption{background:var(--ra-akzent);color:var(--ra-akzent-text)}
html.gs-dark .chat-row.them .chat-img-caption{background:#101b25;color:#dde0e3}

/* Dateiname und Größe: neutral statt weiß auf hell */
.chat-row.own .chat-img-meta,
.chat-row.them .chat-img-meta{color:#8b95a9}
html.gs-dark .chat-row.own .chat-img-meta,
html.gs-dark .chat-row.them .chat-img-meta{color:#8b95a9}