/* Board als App (27.10.2026): Knopf „App“, Fenster mit den Schritten, Band „Keine Verbindung“.
   Farben aus dem Leitstand, mit Ersatzwerten für Seiten ohne Leitstand-Farben. */
[data-app-knopf][hidden],.app-offline[hidden]{display:none !important}

/* Knopf oben in der Kopfleiste, neben Hell/Dunkel */
.app-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:44px;padding:0 12px;
  background:transparent;color:var(--l-haupt,#111418);border:1px solid var(--l-rand-stark,#b4bac3);cursor:pointer;
  font:inherit;font-size:var(--l-fs-s,13px);font-weight:700}
.app-knopf:hover,.app-knopf:focus-visible{border-color:var(--l-haupt,#111418)}
.app-knopf svg{width:18px;height:18px;flex:none}
html.design-v2 .top-lead>.app-knopf{order:12}

/* Band oben, solange keine Verbindung besteht. Feste Höhe, damit Seite und angeheftete Kopfleiste genau darunter rutschen. */
:root{--app-band:40px}
.app-offline{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--app-band);display:flex;align-items:center;justify-content:center;
  padding:0 16px;background:var(--l-ruf,#ffc53d);color:#111418;font-size:var(--l-fs-m,14px);font-weight:700;line-height:1.3;text-align:center}
html.app-offline-an body{padding-top:var(--app-band)}
html.app-offline-an .top,html.app-offline-an .side,html.app-offline-an.design-v3 .v3-kopf{top:var(--app-band)}   /* PR-49d: auch die klebende Kopfleiste von V3/V4 */
/* Helles Thema: Ruf-Farbe ist dort dunkles Gelb, schwarzer Text hätte nur 3,3:1; dort helles Gelb (Text 12:1) */
html[data-thema="hell"] .app-offline{background:#ffd666}
@media (max-width:600px){:root{--app-band:56px}}

/* Fenster mit den Schritten */
.app-dialog{max-width:min(440px,calc(100vw - 32px));margin:auto;padding:24px;border:1px solid var(--l-rand-stark,#b4bac3);
  background:var(--l-kachel-betont,#ffffff);color:var(--l-haupt,#111418);line-height:1.5}
.app-dialog::backdrop{background:rgba(0,0,0,.6)}
.app-dialog h2{margin:0 0 12px;font-size:20px}
.app-dialog ol{margin:0 0 12px;padding-left:22px}
.app-dialog li{margin-bottom:6px}
.app-dialog-hinweis{margin:0 0 16px;color:var(--l-weich,#3d434b);font-size:var(--l-fs-m,14px)}
.app-dialog-zu{display:block;width:100%;min-height:44px;border:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--l-akzent,#4a7300);color:var(--l-auf-akzent,#ffffff)}

/* Tour: „Beenden“ in jedem Schritt oben rechts, „Überspringen“ als sichtbarer Knopf (27.10.2026) */
.ccb-tour-blase{padding-top:52px !important}
.ccb-tour-zu{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:var(--l-fs-s,13px);font-weight:700;cursor:pointer}
.ccb-tour-fuss button.ccb-tour-ende{border:1px solid currentColor !important;padding:8px 14px !important;color:inherit !important}

/* Im Kontomenü des alten Designs: wie die übrigen Einträge */
.ccb-links .ccb-app{background:transparent;border:0;font:inherit;text-align:left;cursor:pointer}

/* Push-Mitteilungen (27.10.2026): Hinweis in der App und Einstellungsseite */
.app-push-hinweis{margin:0 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;background:var(--l-kachel-betont,#ffffff);color:var(--l-haupt,#111418);border:1px solid var(--l-rand-stark,#b4bac3);font-size:var(--l-fs-m,14px);font-weight:600}
.app-push-hinweis span{flex:1 1 180px}
.app-push-ja{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;background:var(--l-akzent,#4a7300);color:var(--l-auf-akzent,#ffffff);font-weight:700;text-decoration:none}
button.app-push-ja{border:0;font:inherit;font-weight:700;cursor:pointer}
.app-push-nein{min-height:40px;padding:0 14px;background:transparent;color:inherit;border:1px solid currentColor;font:inherit;font-weight:700;cursor:pointer}
.ps-themen{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ps-thema{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--l-rand-stark,#b4bac3);cursor:pointer}
.ps-thema input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--l-akzent,#4a7300)}
.ps-thema span{display:flex;flex-direction:column;gap:2px}
.ps-thema small{color:var(--l-gedaempft,#5c626b);font-size:var(--l-fs-s,13px)}
.ps-ruhe{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.ps-ruhe-feld{display:flex;flex-direction:column;gap:4px;font-weight:600}
.ps-ruhe-feld select{min-height:44px;min-width:140px}