/* Quelle: Live-Stand JUPAS 145344e (31.10.2026) · sha256 3d8eaad22a4abf14bc9a9c32b1bc25cadc7624c81e8da747833afe3b5f0850ee */
/* Automatisch erzeugt aus der alten App (tools/oberflaeche/design-css.mjs) – nicht von Hand ändern. */
/* ===== Block 1 ===== */

  /* ==========================================================================
     JUPAS° Design-System v3 (07.09.2026) – „Fable-Update"
     Ein Satz Tokens für Farbe, Fläche, Radius, Schatten, Bewegung. Alle
     Bereiche der App lesen nur noch diese Variablen; Dark Mode tauscht die
     Tokens, nicht die Regeln. Klassennamen bleiben, damit die App-Logik
     (renderInbox, renderConv, renderKalender …) unverändert weiterläuft.
     ========================================================================== */
  :root{
    /* Fläche */
    --bg:#f3f4f6; --bg2:#eaecef; --card:#ffffff; --card2:#f4f5f7; --card3:#e9ebee;
    --barbg:rgba(243,244,246,.58); --tabbg:rgba(250,251,252,.26); --glas-kante:rgba(255,255,255,.8); --glas-licht:rgba(255,255,255,.7); --glas-blatt:rgba(243,244,246,.78); --glas-knopf:rgba(255,255,255,.62);
    --line:#e3e6ea; --line2:#d5d9df;
    /* Text */
    --text:#171a1f; --text2:#3d434c; --muted:#646b76; --muted2:#959ca7;
    /* Marke */
    --accent:#4f97ac; --accent2:#5FA0B4; --brand:#5FA0B4; --brand-dark:#3f7f92;
    --accent-soft:rgba(95,160,180,.13); --accent-soft2:rgba(95,160,180,.22);
    --accent-ink:#2f6d80;
    --host-a:#4f97ac; --host-b:#5fa9bd;
    /* Semantik */
    --green:#1a9d57; --green-soft:rgba(26,157,87,.13);
    --amber:#d98506; --amber-soft:rgba(217,133,6,.15);
    --red:#dc3d3d; --red-soft:rgba(220,61,61,.12);
    --purple:#7c5cd6; --purple-soft:rgba(124,92,214,.13); --teal:#0d9488;
    --gruen:#2e8b57;
    /* Kanäle */
    --wa:#25d366; --booking:#0a3d91; --airbnb:#ff385c; --fewo:#f0a11f;
    --hometogo:#e11d48; --website:#12a89a; --email:#64748b; --google:#d99a1e;
    /* Geometrie */
    --radius:16px; --radius-lg:22px; --radius-sm:11px; --radius-xs:8px;
    --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
    --tab-h:76px;
    /* Schatten: weich, nie hart */
    --sh-1:0 1px 2px rgba(23,26,31,.04),0 2px 8px rgba(23,26,31,.04);
    --sh-2:0 2px 6px rgba(23,26,31,.06),0 10px 28px rgba(23,26,31,.08);
    --sh-3:0 8px 20px rgba(23,26,31,.12),0 24px 60px rgba(23,26,31,.18);
    --ring:0 0 0 3px var(--accent-soft2);
    /* Bewegung */
    --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.4,0,.2,1);
    --t-fast:.14s; --t:.22s; --t-slow:.36s;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0f1114; --bg2:#15181c; --card:#1a1d22; --card2:#22262c; --card3:#2a2f36;
      --barbg:rgba(15,17,20,.55); --tabbg:rgba(30,34,40,.28); --glas-kante:rgba(255,255,255,.16); --glas-licht:rgba(255,255,255,.1); --glas-blatt:rgba(20,23,27,.8); --glas-knopf:rgba(40,44,50,.6);
      --line:#262b32; --line2:#333a43;
      --text:#eef0f3; --text2:#c9ced6; --muted:#9aa2ad; --muted2:#6f7782;
      --accent:#6fb3c6; --accent-soft:rgba(111,179,198,.16); --accent-soft2:rgba(111,179,198,.28);
      --accent-ink:#9fd0de;
      --host-a:#3f8296; --host-b:#4f9ab0;
      --green:#31b56e; --green-soft:rgba(49,181,110,.16);
      --amber:#f0a030; --amber-soft:rgba(240,160,48,.16);
      --red:#f05c5c; --red-soft:rgba(240,92,92,.16);
      --purple:#a58cf0; --purple-soft:rgba(165,140,240,.16);
      --sh-1:0 1px 2px rgba(0,0,0,.3);
      --sh-2:0 2px 8px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.35);
      --sh-3:0 8px 24px rgba(0,0,0,.5),0 28px 70px rgba(0,0,0,.55);
      color-scheme:dark;
    }
    .kalzelle{border-right-color:var(--line)!important}.kalzelle.we{background:#14171b!important}
    .kalzelle.heute{background:var(--accent-soft)!important}
    .kalhead .kaltag,.kalfuss .kaltag{border-right-color:var(--line)!important}
    img{opacity:.94}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  }

  /* ---- Basis ---- */
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--text); overscroll-behavior:none;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    font-size:15px;line-height:1.4;text-rendering:optimizeLegibility;
  }
  #app{max-width:640px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
  button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring)}
  .hidden{display:none !important}
  ::selection{background:var(--accent-soft2)}
  b,strong{font-weight:700}
  h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-track{background:transparent}

  /* ---- Kopfleiste: Marke klein, Bereich groß ---- */
  .topbar{
    position:sticky;top:0;z-index:20;background:var(--barbg);
    backdrop-filter:blur(34px) saturate(2.1);-webkit-backdrop-filter:blur(34px) saturate(2.1);
    padding:calc(var(--safe-t) + 10px) 18px 10px;display:flex;align-items:center;gap:12px;min-height:58px;
  }
  .topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:.8}
  /* Weicher Einstieg von der Statusleiste (10.09.2026): iOS zeichnet die Statusleiste in der
     Seitenfarbe - der Glas-Ton der Kopfleiste faedelt sich darunter ohne harte Kante ein. */
  .topbar::before{content:'';position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;background:linear-gradient(to bottom,var(--bg),transparent);z-index:0}
  .topbar>*{position:relative;z-index:1}
  .such-kopf{position:relative}
  .such-kopf::before{content:'';position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none;background:linear-gradient(to bottom,var(--bg),transparent)}
  #titleBlock{min-width:0;display:flex;flex-direction:column;gap:0}
  .topbar .logo{font-weight:800;letter-spacing:.14em;font-size:10.5px;color:var(--muted);text-transform:uppercase;line-height:1;order:0}
  .topbar .logo span{color:var(--accent)}
  .logo .grad{width:7px;height:7px;margin-left:2px;transform:translateY(-6px);display:inline-block}
  #login .brand .grad{width:17px;height:17px;margin-left:3px;transform:translateY(-17px);display:inline-block}
  .topbar .sub{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-top:3px;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .grow{flex:1}
  #syncInfo{font-size:10.5px;color:var(--muted2);text-align:right;line-height:1.25;white-space:nowrap}
  #syncInfo.off{color:var(--amber);font-weight:700}
  @media (max-width:999px){ #app:not([data-view="inbox"]):not([data-view="heute"]) #syncInfo{display:none} }
  .iconbtn{width:40px;height:40px;border-radius:13px;background:var(--glas-knopf);backdrop-filter:blur(18px) saturate(1.8);-webkit-backdrop-filter:blur(18px) saturate(1.8);display:flex;align-items:center;justify-content:center;
    font-size:18px;box-shadow:var(--sh-1),inset 0 1px 0 var(--glas-licht);border:1px solid var(--glas-kante);color:var(--text2);flex:none;
    transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
  .iconbtn:active{transform:scale(.92);background:var(--card2)}
  .backbtn{font-size:15px;color:var(--accent);display:flex;align-items:center;gap:2px;font-weight:700;padding:8px 10px 8px 0;margin-left:-4px}
  .backbtn:active{opacity:.6}

  /* ---- Bereiche ---- */
  main{flex:1;padding-bottom:calc(var(--tab-h) + 26px + var(--safe-b))}
  .screen{display:none;animation:screenIn var(--t-slow) var(--ease)}
  .screen.active{display:block}
  @keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .section-title{padding:20px 18px 8px;font-size:12px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
  .section-title .btn{text-transform:none;letter-spacing:0}
  .section-title.tools{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;padding-bottom:4px}
  .section-title.tools .btn{padding:9px 14px!important;font-size:13px!important}
  #teamChatInhalt{padding:0 14px}
  /* Umschalter Gäste/Team (12.10.2026) */
  .cu-platz:empty{display:none}
  .chat-umschalter{display:flex;gap:3px;margin:8px 16px 0;padding:3px;border-radius:12px;background:var(--line);position:relative}
  .chat-umschalter button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:7px 10px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--t-fast,.15s),color var(--t-fast,.15s)}
  .chat-umschalter button.an{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .chat-umschalter .cu-zahl{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;line-height:18px;font-weight:700}
  .chat-umschalter .cu-punkt,.chip .cu-punkt{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
  #screen-teamchat .chat-umschalter{margin:8px 14px 10px}
  /* Claude-Chat (23.10.2026) */
  #screen-claude .chat-umschalter{margin:8px 14px 10px}
  #claudeChatInhalt{padding:0 14px}
  .cc-panel{flex:none;max-height:46%;overflow-y:auto;margin:0 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
  .cc-kopf{width:100%;display:flex;gap:6px;align-items:center;border:0;background:transparent;color:var(--text);font:inherit;font-size:13.5px;padding:10px 12px;cursor:pointer;text-align:left}
  .cc-kopf .cc-pfeil{margin-left:auto;color:var(--muted2)}
  .cc-punkt{border-top:1px solid var(--line);padding:10px 12px}
  .cc-pt{font-weight:600;font-size:14px;line-height:1.3}
  .cc-pb{font-size:13px;color:var(--muted);margin-top:3px;white-space:pre-wrap;line-height:1.4}
  .cc-pm{font-size:11.5px;color:var(--muted2);margin-top:5px}
  .cc-pk{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}
  .cc-pk .btn{padding:6px 12px;font-size:13px}
  .cc-abgelehnt .cc-pt,.cc-erledigt .cc-pt{color:var(--muted)}
  .cc-freigegeben .cc-st{color:var(--accent);font-weight:600}
  .msg.cc-claude{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .cc-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
  .cc-chip{font-size:11.5px;padding:2px 8px;border-radius:9px;background:var(--line);color:var(--text)}
  .cc-tippt{color:var(--muted2);font-size:13px;font-style:italic}
  #ccInput{flex:1;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:15px;resize:none;max-height:130px;line-height:1.35}
  #teamChatInhalt #tcInput{min-width:0;border-radius:22px!important;padding:12px 16px!important}
  #screen-kalender{padding-top:12px}
  #mailkiInhalt{padding:0 12px}
  #mailkiInhalt .section-title{padding-left:4px;padding-right:4px}
  .empty{padding:36px 18px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}

  /* ---- Suche & Chips ---- */
  .searchbar{padding:10px 16px 2px;position:relative}
  .searchbar::before{content:'';position:absolute;left:30px;top:50%;width:15px;height:15px;margin-top:-6px;pointer-events:none;opacity:.55;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b76' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
  .searchbar input{width:100%;padding:11px 14px 11px 40px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--text);
    font-size:15px;box-shadow:var(--sh-1);transition:box-shadow var(--t),border-color var(--t)}
  .searchbar input::placeholder{color:var(--muted2)}
  .chips{display:flex;gap:7px;overflow-x:auto;padding:10px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;color:var(--muted);
    font-weight:650;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease);min-height:36px}
  .chip:active{transform:scale(.96)}
  .chip.active,.chip.on{background:var(--text);border-color:var(--text);color:var(--bg)}
  @media (prefers-color-scheme: dark){ .chip.active,.chip.on{background:var(--accent);border-color:var(--accent);color:#0f1114} }

  /* ---- Heute-Überblick (Inbox) ---- */
  .inbox-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 2px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 8px 11px;text-align:center;box-shadow:var(--sh-1);
    transition:transform var(--t-fast) var(--ease),border-color var(--t),background var(--t);position:relative;overflow:hidden}
  .stat:active{transform:scale(.97)}
  .stat .num{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .stat .lbl{font-size:11px;color:var(--muted);margin-top:5px;font-weight:600}
  .stat.alert .num{color:var(--red)}
  .stat.alert::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--red)}
  .stat.aktiv{border-color:var(--accent);background:var(--accent-soft)}
  .stat.aktiv .lbl{color:var(--accent-ink);font-weight:800}
  .stat.aktiv .num{color:var(--accent-ink)}

  /* ---- Chat-Liste ---- */
  .list{padding:6px 12px}
  .swipe{position:relative;margin-bottom:8px;border-radius:var(--radius);overflow:hidden;background:var(--card2);content-visibility:auto;contain-intrinsic-size:auto 118px}
  .swipe .sw-akt{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:13px;font-weight:700;color:#fff}
  .swipe .sw-links{background:var(--gruen);flex:1;display:flex;align-items:center;height:100%;padding-left:18px}
  .swipe .sw-rechts{background:var(--accent);flex:1;display:flex;align-items:center;justify-content:flex-end;height:100%;padding-right:18px}
  .swipe .conv{margin-bottom:0;position:relative;will-change:transform;transition:transform .24s var(--ease)}
  .swipe.zieht .conv{transition:none}
  .sk{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 12px;margin-bottom:8px;display:flex;gap:12px}
  .sk-b{background:linear-gradient(90deg,var(--card2) 25%,var(--line) 37%,var(--card2) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:7px;height:11px}
  @keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
  .conv{display:flex;gap:12px;padding:13px 14px;border-radius:var(--radius);margin-bottom:8px;background:var(--card);border:1px solid var(--line);
    align-items:flex-start;box-shadow:var(--sh-1);transition:background var(--t-fast),transform var(--t-fast) var(--ease);cursor:pointer}
  .conv:active{background:var(--card2);transform:scale(.99)}
  .avatar{width:44px;height:44px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;
    letter-spacing:.02em;box-shadow:inset 0 -12px 20px rgba(0,0,0,.08)}
  .conv .mid{flex:1;min-width:0}
  .conv .row1{display:flex;align-items:center;gap:8px}
  .conv .name{font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
  .conv .time{margin-left:auto;font-size:11.5px;color:var(--muted2);flex:none;font-variant-numeric:tabular-nums}
  .conv .apt{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .conv .snippet{font-size:13.5px;color:var(--muted);margin-top:5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
  .conv .row3{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;align-items:center}
  .conv.unreadconv{border-color:var(--accent-soft2)}
  .conv.unreadconv .name{font-weight:800}
  .conv.unreadconv .snippet{color:var(--text);font-weight:600}
  .conv.unreadconv .time{color:var(--accent);font-weight:700}
  .conv .flag{font-size:15px;line-height:1;margin-right:1px}
  .unread{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px;box-shadow:0 0 0 3px var(--accent-soft)}
  .warnzeichen{margin-right:5px}

  .badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px;display:inline-flex;align-items:center;gap:4px;letter-spacing:.01em;line-height:1.3}
  .b-channel{color:#fff}
  .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  .b-prio-dringend{background:var(--red-soft);color:var(--red)}
  .b-nichtzu{background:var(--red);color:#fff}
  .b-travel{background:var(--accent-soft);color:var(--accent-ink)}
  .b-travel.today{background:var(--amber-soft);color:var(--amber)}
  .b-travel.gone{background:var(--card3);color:var(--muted)}
  .ch-booking{background:var(--booking)} .ch-airbnb{background:var(--airbnb)}
  .ch-fewo{background:var(--fewo)} .ch-hometogo{background:var(--hometogo)} .ch-google{background:var(--google)}
  .ch-website{background:var(--website)}
  .ch-whatsapp{background:var(--wa)} .ch-sms{background:var(--accent)} .ch-email{background:var(--email)}

  /* ---- Chat ---- */
  .info-card{margin:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 15px;box-shadow:var(--sh-1)}
  .info-top{display:flex;gap:12px;align-items:center}
  .info-top .name{font-size:18px;font-weight:800;letter-spacing:-.02em}
  .info-top .avatar{width:48px;height:48px;border-radius:16px;font-size:16px}
  .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:16px}
  .info-grid .k,.k{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;font-weight:800}
  .info-grid .v{font-size:14px;font-weight:600;margin-top:3px}
  .chatpin-anker{position:sticky;top:0;z-index:15;height:0;overflow:visible}
  .chatpin{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:9px;
    background:var(--card);
    border:1px solid var(--line);border-top:none;border-radius:0 0 16px 16px;box-shadow:var(--sh-2);
    padding:8px 13px;margin:0 6px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(-8px);
    transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
  .chatpin.an{opacity:1;pointer-events:auto;transform:none}
  .chatpin::before{content:'';position:absolute;left:-7px;right:-7px;bottom:100%;height:28px;background:var(--bg)}
  .chatpin .avatar{width:28px;height:28px;border-radius:9px;font-size:11px}
  .chatpin b{font-size:13.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chatpin .cp-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .thread{padding:6px 14px 4px;display:flex;flex-direction:column}
  .day-sep{align-self:center;margin:12px 0 8px;font-size:11px;font-weight:700;color:var(--muted2);background:var(--card3);border-radius:999px;padding:4px 11px;letter-spacing:.02em}
  .msg{max-width:84%;padding:9px 13px;border-radius:18px;margin:2px 0;font-size:15px;line-height:1.38;position:relative;
    animation:msgIn var(--t) var(--ease);word-wrap:break-word;overflow-wrap:anywhere}
  @keyframes msgIn{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
  .msg .txt{white-space:pre-wrap}
  .msg .meta{font-size:10.5px;color:var(--muted2);margin-top:3px;text-align:right}
  .msg.guest{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;margin-right:auto;box-shadow:var(--sh-1)}
  .msg.guest .meta{text-align:left}
  .msg.host{background:linear-gradient(135deg,var(--host-a),var(--host-b));border-bottom-right-radius:6px;margin-left:auto;color:#fff;box-shadow:0 2px 8px rgba(79,151,172,.25)}
  .msg.host .meta{color:rgba(255,255,255,.78)}
  .msg.host+.msg.host,.msg.guest+.msg.guest{margin-top:1px}
  .msg.pending{opacity:.72}
  .msg.pending .meta::after{content:' · ⏳ wartet auf Verbindung'}
  .msg .txt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .orig{font-size:12.5px;color:var(--muted2);margin-top:7px;font-style:italic;border-top:1px dashed var(--line);padding-top:6px;
    cursor:pointer;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .orig::before{content:'▸ ';font-style:normal}
  .orig.open{display:block;-webkit-line-clamp:unset;overflow:visible}
  .orig.open::before{content:'▾ '}
  .msg.host .orig{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.3)}
  .tags-row{display:flex;gap:6px;flex-wrap:wrap;padding:6px 14px}
  .tag{font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;background:var(--purple-soft);color:var(--purple)}
  .msgimg{display:block;max-width:100%;max-height:320px;border-radius:12px;margin-bottom:6px;object-fit:cover}
  .msgimgs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:6px;min-width:220px}
  .msgimgs .msgimg{width:100%;height:auto;aspect-ratio:1/1;max-height:none;margin:0;border-radius:8px}
  .msgfile{display:inline-block;margin-bottom:6px;font-weight:700;text-decoration:none;color:inherit}
  .msgaudio{display:block;width:100%;min-width:200px;margin-bottom:6px;height:34px}
  .msg.hat-reakt{margin-bottom:15px}
  .reakt{position:absolute;bottom:-11px;left:8px;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:0 6px;font-size:12px;line-height:19px;box-shadow:var(--sh-1)}
  .msg.guest .reakt{left:auto;right:8px}

  /* ---- KI-Vorschläge ---- */
  .ki{margin:12px 14px;padding:14px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);position:relative;overflow:hidden}
  .ki::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,var(--accent-soft),transparent 55%);pointer-events:none}
  .ki>*{position:relative}
  .ki-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin-bottom:4px;letter-spacing:-.01em}
  .ki-head .ai-badge{font-size:10px;background:var(--purple);color:#fff;padding:3px 8px;border-radius:7px;font-weight:800;letter-spacing:.03em}
  .ki-sub{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.45}
  .ki-sub.ki-auto{margin-bottom:6px;font-weight:600}
  .sugg{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px;margin-bottom:10px;box-shadow:var(--sh-1)}
  .sugg .stop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
  .prob{font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;font-variant-numeric:tabular-nums}
  .prob.hi{background:var(--green-soft);color:var(--green)}
  .prob.mid{background:var(--amber-soft);color:var(--amber)}
  .prob.lo{background:var(--card3);color:var(--muted)}
  .sugg .stitle{font-size:12px;color:var(--muted);font-weight:600}
  .sugg .stext{font-size:14.5px;line-height:1.45;white-space:pre-wrap}
  .sugg .sactions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
  .sugg .sactions .btn.vote{padding:9px 11px}
  .sugg-chips{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 8px}
  .sugg-chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
  .send-note{font-size:11px;color:var(--muted2);margin-top:6px;text-align:center}

  /* ---- Knöpfe ---- */
  .btn{padding:10px 15px;border-radius:12px;font-size:13.5px;font-weight:700;background:var(--card2);border:1px solid var(--line);color:var(--text);
    display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;
    transition:transform var(--t-fast) var(--ease),background var(--t-fast),opacity var(--t-fast);white-space:nowrap}
  .btn:active{transform:scale(.96)}
  .btn[disabled]{opacity:.5;pointer-events:none}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(79,151,172,.28)}
  .btn.notfall{background:var(--red);border-color:var(--red);color:#fff}
  .btn.wa{background:var(--wa);border-color:var(--wa);color:#04361a}
  .linkbtn{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer;padding:6px 8px;margin:-6px -8px;min-height:36px;border-radius:8px}
  .linkbtn.danger{color:var(--red)}
  .task-meta .linkbtn,.dismiss-row .linkbtn{margin:0}
  .btn-row{display:flex;gap:10px}

  /* ---- Schlüsselbox / Early-Check-in Zeile ---- */
  .sz-zeile{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sz-zeile .sz-lbl{font-size:12px;color:var(--muted);font-weight:600;margin:0}
  .sz-zeile .sz-knoepfe{display:flex;gap:6px}
  .sz-zeile .btn.sos{flex:none;padding:6px 12px;font-size:12px}
  .sz-zelle{display:flex;flex-direction:column;gap:6px;min-width:0}
  .sz-zelle .sz-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sz-zelle .btn.sos{width:100%;padding:8px 6px;font-size:12px}
  .sz-zelle .btn.sos.an{background:var(--accent);color:#fff;border-color:var(--accent)}
  .schluessel-block{margin-top:12px}
  .schluessel-block .sz-lbl{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
  .sz-knoepfe{display:flex;gap:8px}
  .btn.sos{flex:1;border:1px solid var(--line);color:var(--text);background:var(--card2);font-weight:600;padding:7px 10px;font-size:12.5px;border-radius:10px}
  .btn.sos:active{background:var(--accent);color:#fff}
  .seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card2);padding:3px;gap:3px}
  .seg button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:650;padding:8px 6px;cursor:pointer;min-height:36px;border-radius:9px;transition:background var(--t-fast),color var(--t-fast)}
  .seg button+button{border-left:none}
  .seg button.on{background:var(--card);color:var(--text);box-shadow:var(--sh-1);font-weight:800}
  .aktionen-mehr summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:6px 0;list-style:none}
  .aktionen-mehr summary::-webkit-details-marker{display:none}

  /* ---- Composer ---- */
  .composer{position:sticky;bottom:0;background:var(--barbg);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
    border-top:1px solid var(--line);padding:9px 12px calc(9px + var(--safe-b));display:flex;gap:8px;align-items:flex-end;z-index:5}
  .composer textarea{flex:1;resize:none;max-height:140px;min-height:44px;padding:11px 15px;border-radius:22px;background:var(--card);border:1px solid var(--line);
    color:var(--text);font-size:15px;font-family:inherit;line-height:1.35;box-shadow:var(--sh-1)}
  .composer .sendbtn{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;flex:none;display:flex;align-items:center;justify-content:center;
    font-weight:800;box-shadow:0 3px 10px rgba(79,151,172,.35);transition:transform var(--t-fast) var(--ease),opacity var(--t-fast)}
  .composer .sendbtn:active{transform:scale(.9)}
  .composer .sendbtn[disabled]{opacity:.5}
  .expandbtn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}
  .tplpick{flex:1;padding:11px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;box-shadow:var(--sh-1);min-height:42px}
  .tplpick.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .tmpl-drop{display:none;flex-wrap:wrap;gap:7px;margin:0 12px 8px}
  .tmpl-drop.open{display:flex}
  .tmpl-btn{white-space:nowrap;font-size:12px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text2);font-weight:600}
  .ki-direct{display:flex;gap:8px;margin:4px 12px 8px;align-items:center;flex-wrap:wrap}
  .ki-direct input{flex:1;padding:11px 13px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:14px}
  .ki-direct input::placeholder{color:var(--muted2)}
  .ki-direct button{flex:1;white-space:nowrap;padding:11px 6px;font-size:13px}
  .micbar{flex:1;padding:11px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;box-shadow:var(--sh-1);min-height:42px}
  .micbar.rec{background:var(--red);border-color:var(--red);color:#fff}
  .micbar.busy{background:var(--brand);border-color:var(--brand);color:#fff}
  .recdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#fff;position:relative;margin-right:10px;vertical-align:-1px}
  .recdot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:ripple 1.3s ease-out infinite}
  @keyframes ripple{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.5);opacity:0}}
  .spinring{display:inline-block;width:14px;height:14px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px;margin-right:10px}
  @keyframes spin{to{transform:rotate(360deg)}}
  .dismiss-row{margin:2px 14px 8px;text-align:right}
  .dismiss-row .linkbtn{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:7px 11px;background:var(--card)}
  .smart{margin:0 14px 6px;display:flex;flex-direction:column;gap:8px}
  .smart .sbtn{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);text-align:left;font-size:14px;font-weight:700;color:var(--text);box-shadow:var(--sh-1)}
  .smart .sbtn .ico{font-size:22px;flex:none}
  .smart .sbtn small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
  .smart .sbtn.brand{background:linear-gradient(135deg,var(--host-a),var(--host-b));border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(79,151,172,.3)}
  .smart .sbtn.brand small{color:rgba(255,255,255,.85)}
  .editor-ov{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;background:var(--bg);z-index:80;display:none;flex-direction:column;padding:calc(var(--safe-t) + 14px) 14px 14px}
  .editor-ov.open{display:flex}
  .editor-ov .ed-head{font-weight:800;font-size:16px;margin-bottom:10px;color:var(--text);letter-spacing:-.01em}
  .editor-ov textarea{flex:1;min-height:0;font-size:16px;line-height:1.55;border:1px solid var(--line);border-radius:16px;padding:14px;resize:none;background:var(--card);color:var(--text);font-family:inherit;outline:none;box-shadow:var(--sh-1)}
  .editor-ov .ed-row{display:flex;gap:10px;margin-top:12px}
  .editor-ov .ed-row .btn{padding:13px 16px;font-size:15px;flex:1}
  .u-in{padding:11px 13px;border-radius:12px;border:1px solid var(--line);font-size:15px;background:var(--card);color:var(--text);font-family:inherit;width:100%}
  .actmenu{position:fixed;top:calc(var(--safe-t) + 56px);right:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);z-index:70;min-width:240px;overflow:hidden;animation:popIn var(--t) var(--ease);transform-origin:top right}
  @keyframes popIn{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
  .actmenu button{display:block;width:100%;text-align:left;padding:14px 16px;font-size:14px;font-weight:600;background:none;border:none;color:var(--text);font-family:inherit;border-bottom:1px solid var(--line)}
  .actmenu button:last-child{border-bottom:none}
  .actmenu button:active{background:var(--card2)}
  .actmenu .danger{color:var(--red)}

  /* ---- Tab-Leiste (schwebend, SVG-Icons) ---- */
  .tabbar{position:fixed;bottom:calc(10px + var(--safe-b));left:12px;right:12px;max-width:600px;margin:0 auto;z-index:30;
    background:var(--tabbg);backdrop-filter:blur(46px) saturate(2.4) brightness(1.05);-webkit-backdrop-filter:blur(46px) saturate(2.4) brightness(1.05);
    border:1px solid var(--glas-kante);border-radius:30px;display:flex;padding:7px;height:var(--tab-h);transform:translateZ(0);will-change:transform;
    /* Apple-Glas (08.09.2026): durchlaessiger, staerker verwischt, innere Lichtkante oben + weicher Aussenschatten */
    /* Liquid-Glass-Kante (10.09.2026): innerer Lichtring, Linsen-Schimmer oben, dunkler Saum unten, weicher Fallschatten */
    box-shadow:inset 0 1.5px 0 var(--glas-licht),inset 0 -1px 0 rgba(0,0,0,.07),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(255,255,255,.2),
      inset 0 0 0 1px rgba(255,255,255,.2),inset 0 12px 24px -14px rgba(255,255,255,.35),inset 0 -10px 20px -14px rgba(0,0,0,.07),
      0 1px 2px rgba(23,26,31,.06),0 10px 30px rgba(23,26,31,.16)}
  @media (prefers-color-scheme: dark){.tabbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 14px 28px -14px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.45)}}
  /* Wandernder Glanzpunkt (folgt der Neigung des Handys) */
  .tabbar::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120px 60px at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.45),rgba(255,255,255,0) 70%);opacity:.7;mix-blend-mode:soft-light}
  @media (prefers-color-scheme: dark){.tabbar::before{background:radial-gradient(120px 60px at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.22),rgba(255,255,255,0) 70%);mix-blend-mode:normal}}
  /* Gleitende Glas-Blase unter dem aktiven Reiter */
  .tab-blase{position:absolute;top:7px;height:calc(var(--tab-h) - 14px);left:7px;width:60px;border-radius:23px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15)),var(--accent-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.04),0 4px 12px rgba(79,151,172,.18);
    transition:left .5s cubic-bezier(.3,1.35,.5,1),width .5s cubic-bezier(.3,1.35,.5,1);will-change:left,width;z-index:0}
  .tab-blase.hüpft{animation:blaseHuepf .5s cubic-bezier(.3,1.35,.5,1)}
  @keyframes blaseHuepf{0%{transform:scaleX(1)}35%{transform:scaleX(1.18) scaleY(.9)}100%{transform:none}}
  @media (prefers-color-scheme: dark){.tab-blase{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03)),rgba(95,160,180,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.3)}}
  .tab{position:relative;z-index:1}
  @media (min-width:1000px){.tab-blase{display:none}}
  .tabbar::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12) 100%);mix-blend-mode:soft-light}
  @media (prefers-color-scheme: dark){.tabbar::after{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);mix-blend-mode:normal}}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 0;color:var(--muted);font-size:11px;font-weight:700;
    white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;position:relative;border-radius:23px;transition:color var(--t-fast),background var(--t) var(--ease),transform var(--t-fast) var(--ease);letter-spacing:-.01em;padding-left:2px;padding-right:2px}
  .tab[data-tab=aufgaben],.tab[data-tab=kalender]{flex:1.1}
  @media (min-width:1000px){.tab[data-tab]{flex:none}}
  .tab:active{transform:scale(.93)}
  .tab .ico{font-size:20px;line-height:1;display:flex}
  .tab .ico svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
  .tab.active{color:var(--accent-ink);background:transparent;box-shadow:none}
  @media (prefers-color-scheme: dark){.tab.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}}
  .tab.active .ico svg{stroke-width:2.3;transform:translateY(-1px)}
  @media (prefers-color-scheme: dark){ .tab.active{color:var(--accent)} }
  @media (max-width:440px){.tab{font-size:10.4px;letter-spacing:-.02em}.tabbar{left:10px;right:10px;padding:6px 4px}}
  @media (max-width:380px){.tab{font-size:10px}.tab .ico svg{width:24px;height:24px}}
  .tbadge{position:absolute;top:5px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;display:none;box-shadow:0 0 0 2px var(--card)}
  .tbadge.tbereit{left:auto;right:calc(50% + 8px);background:#16a34a}   /* Bereit zum Senden (08.10.2026) */

  /* ---- Mehr: Bottom-Sheet mit Kacheln ---- */
  #mehrBackdrop{position:fixed;inset:0;background:rgba(10,12,16,.38);z-index:39;opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease);backdrop-filter:blur(2px)}
  #mehrBackdrop.open{opacity:1;pointer-events:auto}
  #mehrMenu{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;z-index:40;
    background:var(--glas-blatt);backdrop-filter:blur(34px) saturate(2);-webkit-backdrop-filter:blur(34px) saturate(2);border:1px solid var(--glas-kante);border-bottom:none;border-radius:26px 26px 0 0;padding:8px 12px calc(16px + var(--safe-b));
    box-shadow:var(--sh-3),inset 0 1.5px 0 var(--glas-licht);transform:translateY(105%);transition:transform var(--t-slow) var(--ease);
    display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:82vh;overflow-y:auto}
  #mehrMenu.open{transform:none}
  #mehrMenu::before{content:'';grid-column:1 / -1;width:38px;height:5px;border-radius:99px;background:var(--line2);margin:4px auto 6px}
  #mehrMenu .mrow{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:1px;
    width:100%;padding:13px 13px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:var(--radius);
    font-size:14.5px;font-weight:700;text-align:left;cursor:pointer;line-height:1.25;overflow:hidden;box-shadow:var(--sh-1);position:relative;
    transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
  #mehrMenu .mrow+.mrow{box-shadow:var(--sh-1)}
  #mehrMenu .mrow:active{transform:scale(.97);background:var(--card2)}
  #mehrMenu .mrow .mi{grid-row:1 / span 2;width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
  #mehrMenu .mrow .mi svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #mehrMenu .mrow .mt{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mehrMenu .mrow .msub{grid-column:2;font-size:11.5px;font-weight:500;color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mehrMenu .mrow .tbadge{top:8px;left:auto;right:8px}

  /* ---- Aufgaben ---- */
  .task-edit{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
  .task-edit input,.task-edit select{padding:10px;border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:13.5px}
  /* Notiz mehrzeilig (31.10.2026): Ein Eingabefeld verlor beim Speichern die Zeilenumbrüche (z. B. Rückrufbitten vom Telefon).
     Jetzt ein Textfeld, das einzeilig genauso aussieht wie vorher und beim Tippen mitwächst (notizHoehe). */
  .task-edit textarea.notiz-feld{display:block;padding:10px;border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:13.5px;resize:none;overflow:hidden;box-sizing:border-box}
  .fld textarea.notiz-feld{min-height:0;resize:none;overflow:hidden;line-height:normal}
  .task-edit .zeile{display:flex;gap:8px;margin-top:7px}
  .task-edit .zeile>*{flex:1;min-width:0}
  .wartung-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;box-shadow:var(--sh-1)}
  .wartung-kopf{padding:12px 13px 10px;border-bottom:1px solid var(--line)}
  .wartung-kopf .wt{font-weight:800;font-size:14.5px}
  .wartung-kopf .wm{font-size:11.5px;color:var(--muted);margin-top:3px}
  .wartung-kopf .wd{font-size:12.5px;color:var(--muted);margin-top:4px}
  .wartung-zeile{display:flex;align-items:center;gap:10px;padding:10px 13px;font-size:13.5px;border-top:1px solid var(--line)}
  .wartung-zeile:first-of-type{border-top:none}
  .wartung-zeile .hak{width:26px;height:26px;flex:none;border:1.5px solid var(--muted2);background:none;border-radius:50%;color:transparent;font-size:14px;line-height:1;cursor:pointer;padding:0}
  .wartung-zeile .hak:active{background:var(--gruen);border-color:var(--gruen)}
  .wartung-zeile .wohn{font-weight:600}
  .wartung-zeile .wer{font-size:12px;color:var(--muted)}
  .massnahme{font-size:13px;font-weight:600;color:var(--text);background:var(--card2);border-radius:10px;padding:8px 10px;margin-top:7px;line-height:1.45}
  .task-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;margin-bottom:8px;box-shadow:var(--sh-1)}
  .task-card.done{opacity:.55}
  /* „In Arbeit“ auch in der Liste (25.10.2026, Pascal per Klick: „„In Arbeit“ auch in der Liste“) – Feld inArbeit wie die Tafel, Status bleibt offen */
  .task-card.in-arbeit{border-left:3px solid var(--accent)}
  .task-arbeit{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:999px;white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
  .task-top{display:flex;align-items:center;gap:8px}
  /* Kopfzeile nie breiter als die Karte (31.10.2026, Pascal „Ja“): Priorität, „In Arbeit“, Ampel und „✓ Erledigt“ schrumpfen nicht –
     bei langem Titel am Handy ragte die Zeile über 390 pt hinaus, die Seite wurde breiter, die Tab-Leiste verschwand.
     Nur wo etwas über die Karte hinausragt, setzt kopfzeilenPruefen() die Klasse „eng“: dann bricht sie um, ein überlanges Wort
     im Titel wird getrennt. Alle Karten, die heute passen, bleiben unverändert (auch „✓ Erledigt“ zweizeilig neben „In Arbeit“). */
  .task-top.eng{flex-wrap:wrap;row-gap:6px}
  .task-top.eng>.task-titel{max-width:100%;overflow-wrap:break-word}
  .task-prio{flex:none;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;cursor:pointer;white-space:nowrap}
  .task-prio.p1{background:var(--red-soft);color:var(--red)}.task-prio.p2{background:rgba(234,88,12,.14);color:#ea580c}
  .task-prio.p3{background:var(--amber-soft);color:var(--amber)}.task-prio.p4{background:var(--card3);color:var(--muted)}
  .task-titel{font-weight:650;font-size:14.5px;flex:1;line-height:1.35}
  .task-card.done .task-titel{text-decoration:line-through}
  .task-detail{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45;white-space:pre-line}   /* Zeilenumbrüche der Notiz zeigen (31.10.2026) */
  .task-meta{font-size:11.5px;color:var(--muted2);margin-top:7px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .termin-zeile{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted2)}
  .termin-chip{border:1.5px solid var(--line);background:var(--card2);color:var(--text);border-radius:99px;padding:6px 12px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
  .termin-chip.tk-leer{border-style:dashed;color:var(--muted);font-weight:600}
  .termin-chip.tk-ok{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
  .termin-chip.tk-orange{border-color:#ea580c;color:#ea580c;background:rgba(234,88,12,.09)}
  .termin-chip.tk-rot{border-color:var(--red);color:var(--red);background:var(--red-soft)}
  .termin-menu{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card2)}
  .termin-menu .tm-titel{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
  .termin-menu .tm-zeile{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
  .termin-opt{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:99px;padding:7px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer}
  .termin-opt:active{background:var(--accent);color:#fff}
  .termin-opt.tm-weg{color:var(--red);border-color:rgba(220,61,61,.4)}
  .task-meta .linkbtn{font-size:12px}
  .apt-head{display:flex;align-items:center;justify-content:space-between;margin:16px 4px 8px;font-size:13px;font-weight:800;color:var(--muted)}
  .apt-head .cnt{font-weight:600;color:var(--muted2)}

  /* ---- Kennzahlen / Ausblick ---- */
  .kz-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);margin:0 14px 12px;padding:13px 15px;box-shadow:var(--sh-1)}
  .kz-kopf{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
  .kz-monat{font-weight:800;font-size:15px;letter-spacing:-.01em}
  .kz-pfeil{border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:10px;min-width:44px;min-height:40px;font-size:16px;line-height:1;cursor:pointer;font-family:inherit}
  .kz-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  @media (max-width:560px){.kz-zahlen{grid-template-columns:repeat(2,1fr)}}
  .kz-kachel{background:var(--card2);border-radius:12px;padding:10px 6px;text-align:center}
  .kz-wert{font-size:18px;font-weight:800;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .kz-lbl{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:600}
  .kz-mehr{margin-top:9px;border:0;background:none;color:var(--accent);font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;padding:2px 0}
  .kz-direkt{margin:10px 2px 2px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
  .kz-warn,.pg-warn{margin-top:9px;background:var(--red-soft);border:1px solid rgba(220,61,61,.3);border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--red);line-height:1.45}
  .pg-box{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
  .pg-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
  .pg-titel{font-weight:800;font-size:13px}
  .pg-stand{font-size:11px;color:var(--muted2)}
  .pg-zeile{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 0}
  .pg-mon{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.25}
  .pg-mon.jetzt{color:var(--accent)}
  .pg-vor{display:block;font-size:10.5px;font-weight:600;color:var(--muted2)}
  .pg-bahn{display:flex;align-items:center;height:30px;border-radius:99px;background:var(--card2);overflow:hidden}
  .pg-bal{flex:none;align-self:stretch;display:flex;align-items:center;border-radius:99px;background:var(--accent2);transition:width .5s var(--ease);min-width:0}
  .pg-bal.gut{background:var(--gruen)}
  .pg-txt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pg-txt.innen{padding:0 12px;color:#fff}
  .pg-txt.aussen{flex:1;min-width:0;padding:0 12px;text-align:right;color:var(--accent2)}
  .pg-ziel{text-align:right;font-size:12px;line-height:1.35;white-space:nowrap}
  .pg-ziel b{font-weight:800;font-variant-numeric:tabular-nums}
  .pg-vj{color:var(--muted2);font-variant-numeric:tabular-nums}
  .pg-fuss{margin-top:8px;font-size:11.5px;color:var(--muted2);line-height:1.5}
  .kz-liste{margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
  .kz-zeile{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:4px 0}
  .kz-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kz-bal{width:64px;height:7px;border-radius:99px;background:var(--line);overflow:hidden;flex:none}
  .kz-bal i{display:block;height:100%;background:var(--accent);border-radius:99px}
  .kz-proz{width:38px;text-align:right;color:var(--muted2);font-variant-numeric:tabular-nums}
  .kz-eur{width:74px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}   /* 05.10.2026: alle Beträge gleich breit */
  .kz-fremd-kopf{font-size:11px;font-weight:700;color:var(--muted);margin:10px 0 2px;padding-top:8px;border-top:1px dashed var(--line)}   /* 24.10.2026: Juris Wohnungen unten, nicht eingerechnet */
  .kz-zeile.kz-fremd{opacity:.55}

  /* ---- Bewertungen ---- */
  .karte-weiss{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);margin:0 14px;padding:14px 12px 8px;box-shadow:var(--sh-1)}
  .bewkurve{display:flex;align-items:flex-end;gap:4px;height:110px}
  .bewkurve .bs{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
  .bewkurve .bsw{width:100%;background:linear-gradient(180deg,var(--host-b),var(--host-a));border-radius:6px 6px 0 0;min-height:2px}
  .bewkurve .bs span{font-size:9.5px;color:var(--muted2);margin-top:4px}
  .bewachse{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted2);margin:6px 16px 0}
  .bewkarte-k{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:0 14px 8px;padding:12px 13px;box-shadow:var(--sh-1)}
  .bewkarte-k .kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .bewkarte-k .zit{font-size:13.5px;line-height:1.5;margin-top:6px;white-space:pre-line}
  /* V13: Antwort-Entwürfe für Bewertungen */
  .bewantwort .ba-text{font-size:14px;line-height:1.45;margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 10px;border-radius:11px;background:var(--bg);border:1px solid var(--line)}
  .bewantwort .zit{overflow-wrap:anywhere}
  .bewantwort .ba-knoepfe{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .bewantwort .ba-knoepfe .btn{flex:1 1 calc(50% - 3px);min-width:0;padding:9px 6px;font-size:12.5px;min-height:38px}
  .bewantwort.krit{border-color:rgba(220,38,38,.45)}
  .bewdetail{background:var(--bg2);border-radius:0 0 14px 14px;margin:-6px 14px 10px;padding:12px}
  .bewkacheln{display:grid;grid-template-columns:1fr;gap:10px;padding:0 14px}
  @media (min-width:700px){ .bewkacheln{grid-template-columns:1fr 1fr} }
  .tr{font-size:11px;line-height:1;font-weight:700;margin-left:5px;vertical-align:1px}
  .bewkachel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t);box-shadow:var(--sh-1)}
  .bewkachel.auf{border-color:var(--accent)}
  .bewkachel .kk{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:12px;padding:14px 15px 8px;cursor:pointer}
  .bewkachel .kk:active{background:var(--card2)}
  .bewkachel .kt{grid-column:1;grid-row:1;font-weight:800;font-size:16.5px;letter-spacing:-.015em;display:flex;align-items:center;gap:6px;min-width:0}
  .bewkachel .kt .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bewkachel .kt .tr{flex:none}
  .bewkachel .kort{grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bewkachel .kn2{grid-column:2;grid-row:1 / span 2;font-weight:800;font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
  .bewkachel .kk .chev{grid-column:3;grid-row:1 / span 2;color:var(--muted2);font-size:19px;transition:transform var(--t)}
  .bewkachel .kmeta{padding:5px 15px 10px;font-size:12.5px;color:var(--muted2);line-height:1.45}
  .bewkachel .kmeta b{color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums}
  .bewkachel .kp{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 15px 13px}
  .bewkachel .kp .sd{grid-column:1 / -1}
  .bewkachel .pz{display:flex;align-items:baseline;gap:6px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:12.5px;min-width:0}
  .bewkachel .pn{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bewkachel .pw{font-weight:800;font-variant-numeric:tabular-nums;flex:none}
  .bewkachel .pa{color:var(--muted2);font-size:11px;font-variant-numeric:tabular-nums;flex:none}
  .bewkachel .bewdetail{border-top:1px solid var(--line);padding:12px 13px 13px;background:var(--bg2);margin:0;border-radius:0}
  @media (max-width:340px){ .bewkachel .kp{grid-template-columns:1fr} }
  .bewstandort{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:0 14px 8px;overflow:hidden;box-shadow:var(--sh-1)}
  .katbox{padding:2px 14px 12px}
  .katzeile{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:12.5px}
  .katzeile .kn{width:96px;flex:none;color:var(--muted)}
  .katzeile .kb{flex:1;height:7px;background:var(--bg2);border-radius:4px;overflow:hidden}
  .katzeile .kf{display:block;height:100%;background:var(--accent);border-radius:4px}
  .katzeile .kw{width:30px;text-align:right;font-weight:700;font-size:12px}

  /* ---- Belegungskalender ---- */
  .kalscroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);-webkit-overflow-scrolling:touch;box-shadow:var(--sh-1);overscroll-behavior-x:contain}
  .kalrow{display:flex;border-bottom:1px solid var(--line)}
  .kalrow:last-child{border-bottom:none}
  .kalname{flex:none;width:108px;padding:10px 10px;font-weight:700;font-size:11.5px;line-height:1.25;position:sticky;left:0;background:var(--card);z-index:3;border-right:1px solid var(--line);display:flex;align-items:center;word-break:break-word;box-shadow:4px 0 8px -6px rgba(0,0,0,.12)}
  .kaltage{position:relative;display:flex;flex:none}
  .kalzelle{width:44px;flex:none;height:44px;border-right:1px solid var(--line)}
  .kalzelle.we{background:var(--card2)}
  .kalzelle.heute{background:var(--accent-soft)}
  .kalhead .kaltag{width:44px;flex:none;text-align:center;padding:7px 0;font-size:10px;color:var(--muted);border-right:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
  .kalhead .kaltag b{display:block;font-size:14px;color:var(--text);letter-spacing:0}
  .kalhead .kaltag i{font-style:normal}
  .kalhead .kaltag.heute b{color:var(--brand)}
  .kalhead .kaltag.heute{background:var(--accent-soft);border-radius:8px 8px 0 0}
  /* Datumsleiste unten (29.10.2026): wie oben, Linie oben statt unten, „heute“ unten gerundet */
  .kalfuss{border-top:1px solid var(--line)}
  .kalfuss .kaltag{width:44px;flex:none;text-align:center;padding:7px 0;font-size:10px;color:var(--muted);border-right:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
  .kalfuss .kaltag b{display:block;font-size:14px;color:var(--text);letter-spacing:0}
  .kalfuss .kaltag i{font-style:normal}
  .kalfuss .kaltag.heute b{color:var(--brand)}
  .kalfuss .kaltag.heute{background:var(--accent-soft);border-radius:0 0 8px 8px}
  .kalbal{position:absolute;top:7px;height:30px;background:linear-gradient(135deg,#4A8296,#5FA0B4);border-radius:999px;color:#fff;font-size:11.5px;font-weight:700;line-height:30px;padding:0 11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;box-shadow:0 2px 6px rgba(29,29,31,.18);z-index:2}
  .kalbal .kb-sum{font-weight:600;opacity:.85}
  .kalbal.kb-links-offen{border-top-left-radius:0;border-bottom-left-radius:0}
  .kalbal.kb-rechts-offen{border-top-right-radius:0;border-bottom-right-radius:0}
  /* Admin-Kalender (13.10.2026): Name schrumpft mit „…“, Personenzahl (kb-p) nie */
  .kalbal.kb-flex{display:flex;align-items:center;text-overflow:clip}
  .kalbal.kb-flex .kb-n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .kalbal.kb-flex .kb-p,.kalbal.kb-flex .kb-sum{flex:none}
  .kalbal.kb-flex.kb-eng>:first-child{margin-left:auto}
  .kalbal.kb-flex.kb-eng>:last-child{margin-right:auto}
  .kb-booking{background:linear-gradient(135deg,#4c78c9,#6a93dd)}
  .kb-airbnb{background:linear-gradient(135deg,#ee8490,#f5a3ab)}
  .kb-fewo{background:linear-gradient(135deg,#77a8e8,#95bdf1)}
  .kb-website,.kb-direct{background:linear-gradient(135deg,#6bbd92,#8ad0ab)}
  .kb-hometogo{background:linear-gradient(135deg,#a389dd,#b9a3e8)}
  .kb-google{background:linear-gradient(135deg,#e2a53a,#efc066)}
  .kb-other{background:linear-gradient(135deg,#9aa3b0,#b3bbc6)}
  .kb-block{background:repeating-linear-gradient(135deg,#9aa3b0 0 8px,#aab2bd 8px 16px);color:#fff}
  .kal-plus-zeile{display:flex;justify-content:flex-end;margin:8px 2px 2px}
  .kal-plus{padding:9px 14px;border-radius:999px;border:1px solid var(--glas-kante);background:var(--glas-knopf);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-1),inset 0 1px 0 var(--glas-licht);font-size:13px;font-weight:700;color:var(--accent-ink);cursor:pointer;font-family:inherit}
  .kal-plus:active{transform:scale(.96)}
  .pc-vorschlaege{position:absolute;left:0;right:0;top:54px;z-index:20;background:var(--glas-blatt);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border:1px solid var(--glas-kante);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;max-height:300px;overflow-y:auto}
  .pc-vorschlaege.hidden{display:none}
  .pc-v{padding:10px 13px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:1px}
  .pc-v:last-child{border-bottom:0} .pc-v:active{background:var(--accent-soft)}
  .pc-v b{font-size:14px} .pc-v span{font-size:12px;color:var(--muted)} .pc-v i{font-size:11px;color:var(--muted2);font-style:normal}
  .kal-form{display:flex;flex-direction:column;gap:10px;padding:4px 2px 10px}
  .kal-form label{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:4px}
  .kal-form .zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .kal-art{display:flex;background:var(--bg2);border-radius:12px;padding:3px;gap:3px}
  .kal-art button{flex:1;border:0;background:transparent;padding:9px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);font-family:inherit;cursor:pointer}
  .kal-art button.on{background:var(--card);color:var(--text);box-shadow:var(--sh-1)}
  .kallegende{display:flex;gap:6px;flex-wrap:wrap;margin:10px 2px 2px}
  .kallegende span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
  .kallegende i{width:10px;height:10px;border-radius:50%;display:inline-block}

  /* ---- Pull-to-Refresh ---- */
  #ptr{position:fixed;top:-46px;left:0;right:0;display:flex;justify-content:center;z-index:70;transition:transform .25s var(--ease);pointer-events:none}
  .ptr-dot{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;color:var(--brand);transition:transform .1s}
  .ptr-dot.ready{background:var(--brand);color:#fff}
  .ptr-dot.spin{animation:ptrspin .8s linear infinite}
  @keyframes ptrspin{to{transform:rotate(360deg)}}

  /* ---- Wissen / Einstellungen ---- */
  .kb-apt{margin:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-1)}
  .kb-apt .kb-h{padding:14px 15px;display:flex;align-items:center;gap:10px;cursor:pointer}
  .kb-apt .kb-h .aname{font-weight:700;font-size:15px}
  .kb-apt .kb-h .aaddr{font-size:12px;color:var(--muted)}
  .kb-apt .kb-h .chev{margin-left:12px;color:var(--muted2);transition:transform var(--t)}
  .kb-apt.open .chev{transform:rotate(90deg)}
  .kb-body{display:none;padding:0 15px 12px}
  .kb-apt.open .kb-body{display:block}
  .kb-item{padding:10px 0;border-top:1px solid var(--line)}
  .kb-item .kb-k{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;font-weight:800}
  .kb-item .kb-v{font-size:14px;margin-top:3px;line-height:1.45}
  .kb-edit .fld{margin-bottom:10px}
  .kb-edit textarea{min-height:52px}
  .kb-ai{white-space:pre-wrap}
  .kb-editbtn{margin-left:auto;flex:none}
  .set-row{margin:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-1)}
  .set-row[onclick]{cursor:pointer}
  .set-row[onclick]:active{background:var(--card2)}
  .set-row .si{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
  .set-row .st{font-weight:700;font-size:14.5px}
  .set-row .sd{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
  .set-row .status-pill{margin-left:auto;font-size:11px;font-weight:800;padding:5px 10px;border-radius:9px;background:var(--card2);color:var(--muted);flex:none}
  .status-pill.on{background:var(--green-soft);color:var(--green)}
  .status-pill.demo{background:var(--amber-soft);color:var(--amber)}
  .set-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);flex:none}


  /* ---- Willkommen (Start-Bildschirm, 08.09.2026) ----
     Kurzer Vorhang beim Start und nach dem Anmelden (5 s, 22.09.2026): Marke baut sich
     Buchstabe fuer Buchstabe auf, der Ring zeichnet sich, weiche Lichtkreise
     wandern, dann die persoenliche Begruessung. Dahinter laedt die App schon. */
  #willkommen{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:1;transition:opacity .8s var(--ease),transform .8s var(--ease)}
  #willkommen.weg{opacity:0;transform:scale(1.03);pointer-events:none}
  #willkommen.hidden{display:none}
  .wk-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
  .wk-orb.a{width:62vmax;height:62vmax;left:-18vmax;top:-24vmax;background:radial-gradient(circle,rgba(95,160,180,.55),transparent 65%);animation:wkOrbA 8s ease-in-out infinite alternate}
  .wk-orb.b{width:52vmax;height:52vmax;right:-20vmax;bottom:-18vmax;background:radial-gradient(circle,rgba(29,29,31,.22),transparent 65%);animation:wkOrbB 9s ease-in-out infinite alternate}
  /* Weicher Auslauf nach oben zur Statusleiste (10.09.2026): iOS zeichnet die Statusleiste
     in der Seitenfarbe, darunter faedelt sich das Licht jetzt ohne harte Kante ein. */
  .wk-oben{position:absolute;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 140px);pointer-events:none;background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 8%,color-mix(in srgb,var(--bg) 70%,transparent) 45%,transparent 100%)}
  .wk-gitter{position:absolute;inset:0;background-image:linear-gradient(rgba(95,160,180,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(95,160,180,.09) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(60% 55% at 50% 45%,#000,transparent);-webkit-mask-image:radial-gradient(60% 55% at 50% 45%,#000,transparent);opacity:0;animation:wkGitter 4s var(--ease) both}
  .wk-mitte{position:relative;text-align:center;padding:0 28px}
  .wk-marke{font-size:52px;font-weight:800;letter-spacing:.03em;color:var(--text);display:inline-flex;align-items:flex-start;line-height:1}
  .wk-marke .b{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(14px);animation:wkBuchstabe 1s var(--ease) both}
  .wk-marke .b.ak{color:var(--accent)}
  .wk-marke .b:nth-child(1){animation-delay:.15s}.wk-marke .b:nth-child(2){animation-delay:.27s}.wk-marke .b:nth-child(3){animation-delay:.39s}.wk-marke .b:nth-child(4){animation-delay:.51s}.wk-marke .b:nth-child(5){animation-delay:.63s}
  .wk-ring{width:22px;height:22px;margin:-2px 0 0 5px;opacity:0;animation:wkEin .4s var(--ease) .8s both}
  .wk-ring path{stroke-dasharray:60;stroke-dashoffset:60;animation:wkRing 1.1s var(--ease) .85s both}
  .wk-ring circle{transform-origin:12px 12px;animation:wkPunkt 2s ease-in-out 1.8s infinite}
  .wk-strich{width:64px;height:2px;margin:26px auto 0;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;animation:wkStrich 2.4s var(--ease) 1.2s both}
  .wk-gruss{margin-top:22px;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--text);opacity:0;filter:blur(6px);transform:translateY(8px);animation:wkText .8s var(--ease) 1.2s both}
  .wk-sub{margin-top:10px;font-size:15px;color:var(--muted);min-height:20px}
  .wk-punkte{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:6px}
  .wk-punkte i{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.25;animation:wkPuls 1.2s ease-in-out infinite}
  .wk-punkte i:nth-child(2){animation-delay:.2s}.wk-punkte i:nth-child(3){animation-delay:.4s}
  /* Leuchtender Rand wie bei den grossen KI-Oberflaechen: Verlauf laeuft
     einmal um den Bildschirm, weich verglueht. Zwei Lagen: unscharf (Glow) + scharf. */
  /* Rand-Glow (09.09.2026): Rahmen liegt bewusst AUSSERHALB des Bildschirms (-36 px, oben
     zusaetzlich um die Statusleiste), damit keine Linie und keine falsche Eckrundung sichtbar
     ist - nur das Licht, das von den Kanten hereinfaellt. */
  .wk-rand{position:absolute;left:0;right:0;bottom:0;top:calc(-1 * env(safe-area-inset-top,0px));pointer-events:none;opacity:0;
    box-shadow:inset 0 0 70px 4px rgba(95,160,180,.55),inset 0 0 22px 0 rgba(159,216,234,.55);animation:wkRand 3.8s var(--ease) .2s both}
  .wk-rand.scharf{box-shadow:inset 0 0 90px 10px rgba(233,246,250,.35);animation:wkRandScharf 3.1s var(--ease) .8s both}
  .wk-halo{position:absolute;left:50%;top:42%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;
    background:conic-gradient(from 0deg,rgba(95,160,180,0) 0deg,rgba(95,160,180,.6) 90deg,rgba(159,216,234,.45) 160deg,rgba(95,160,180,0) 250deg,rgba(95,160,180,.35) 320deg,rgba(95,160,180,0) 360deg);
    filter:blur(30px);opacity:0;animation:wkHaloEin 1.6s var(--ease) .3s both,wkHalo 6s linear infinite}
  .wk-orb.c{width:40vmax;height:40vmax;left:30%;top:30%;background:radial-gradient(circle,rgba(159,216,234,.5),transparent 65%);animation:wkOrbC 5s ease-in-out infinite alternate}
  .wk-gruss{background:linear-gradient(100deg,var(--text) 0%,var(--text) 42%,var(--accent) 50%,#9fd8ea 54%,var(--text) 62%,var(--text) 100%);background-size:280% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wkText 1s var(--ease) 1.5s both,wkSchimmer 1.6s ease-in-out 2.0s both}
  .wk-sub .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(5px);animation:wkWort .55s var(--ease) both;margin-right:.28em}
  @keyframes wkRand{0%{opacity:0}25%{opacity:.95}70%{opacity:.7}100%{opacity:0}}
  @keyframes wkRandScharf{0%{opacity:0}25%{opacity:.8}70%{opacity:.5}100%{opacity:0}}
  @keyframes wkRandLauf{from{background-position:0% 50%}to{background-position:100% 50%}}
  @keyframes wkHaloEin{to{opacity:1}}
  @keyframes wkHalo{to{transform:rotate(360deg)}}
  @keyframes wkOrbC{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vmax,8vmax) scale(1.15)}}
  @keyframes wkSchimmer{from{background-position:100% 0}to{background-position:0% 0}}
  @keyframes wkWort{to{opacity:1;filter:blur(0);transform:none}}
  @keyframes wkBuchstabe{to{opacity:1;filter:blur(0);transform:none}}
  @keyframes wkEin{to{opacity:1}}
  @keyframes wkRing{to{stroke-dashoffset:0}}
  @keyframes wkPunkt{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
  @keyframes wkStrich{0%{opacity:0;transform:scaleX(.2)}40%{opacity:1;transform:scaleX(1)}100%{opacity:.6;transform:scaleX(1.6)}}
  @keyframes wkText{to{opacity:1;filter:blur(0);transform:none}}
  @keyframes wkOrbA{from{transform:translate(0,0)}to{transform:translate(9vmax,7vmax)}}
  @keyframes wkOrbB{from{transform:translate(0,0)}to{transform:translate(-8vmax,-6vmax)}}
  @keyframes wkGitter{0%{opacity:0}30%{opacity:1}100%{opacity:.35}}
  @keyframes wkPuls{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.9;transform:scale(1.3)}}
  @media (prefers-color-scheme:dark){.wk-orb.b{background:radial-gradient(circle,rgba(95,160,180,.35),transparent 65%)}}
  @media (prefers-reduced-motion:reduce){#willkommen *{animation-duration:.01s!important;animation-delay:0s!important}.wk-orb,.wk-halo,.wk-rand{animation:none!important;opacity:0!important}}

  /* ================= Polish-Paket (08.09.2026) =================
     1 Kopfleiste faehrt beim Scrollen zusammen  2 progressive Unschaerfe ueber der
     Tab-Leiste  3 Live-Punkt  4 Zahlen-Ticker/Balken  5 gestaffeltes Erscheinen
     6 leere Zustaende  7 Pull-to-Refresh  8 Hero-Uebergang  9 Langdruck-Menue
     10 Erfolgs-Momente  11 Parallaxe Tuercode */
  /* Kompakt-Kopfleiste ohne Reflow (09.09.2026): nur transform/opacity, die Hoehe bleibt -
     sonst springt beim Umschalten die ganze Seite (Ruckeln beim Scroll-Stopp). */
  .topbar .logo,.topbar .sub{transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);will-change:transform,opacity}
  .topbar .sub{transform-origin:left center}
  @media (max-width:999px){
    .topbar.kompakt .logo{opacity:0;transform:translateY(-6px)}
    .topbar.kompakt .sub{transform:translateY(-11px) scale(.8)}
  }
  /* Weicher Auslauf ueber der Tab-Leiste - bewusst OHNE backdrop-filter (09.09.2026): die
     zusaetzliche Blur-Ebene ruckelte beim Scroll-Stopp und schmierte beim Rubber-Band. */
  /* Kein deckender Verlauf mehr hinter der Leiste (10.09.2026: er machte das Glas blind) */
  #unten-blur{display:none}
  #app[data-view="detail"] #unten-blur,body.composing #unten-blur{display:none}
  @media (min-width:1000px){#unten-blur{display:none}}
  /* Live-Punkt statt Sync-Zeit */
  #syncInfo{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:0}
  #syncInfo{position:relative}
  #syncInfo::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green)}
  #syncInfo::after{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:rgba(26,157,87,.4);animation:livePuls 2.4s ease-out infinite;will-change:transform,opacity}
  #syncInfo.off::before{background:var(--amber)} #syncInfo.off::after,#syncInfo.fehler::after{display:none}
  #syncInfo.fehler::before{background:var(--red)}
  #syncInfo.lade::before{background:var(--accent)} #syncInfo.lade::after{background:rgba(79,151,172,.4);animation-duration:.9s}
  @keyframes livePuls{0%{transform:scale(1);opacity:.8}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
  /* Balken wachsen */
  .kz-bal i{width:0;transition:width .9s var(--ease)}
  .pg-bal{transition:width .9s var(--ease)}
  /* Gestaffeltes Erscheinen */
  .stagger>*{animation:staggerIn .5s var(--ease) both}
  .stagger>*:nth-child(1){animation-delay:0s}.stagger>*:nth-child(2){animation-delay:.04s}.stagger>*:nth-child(3){animation-delay:.08s}.stagger>*:nth-child(4){animation-delay:.12s}.stagger>*:nth-child(5){animation-delay:.16s}.stagger>*:nth-child(6){animation-delay:.2s}.stagger>*:nth-child(7){animation-delay:.24s}.stagger>*:nth-child(8){animation-delay:.28s}.stagger>*:nth-child(9){animation-delay:.32s}.stagger>*:nth-child(10){animation-delay:.36s}.stagger>*:nth-child(n+11){animation-delay:.4s}
  @keyframes staggerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  /* Leere Zustaende mit Charakter */
  .leer{padding:34px 18px 30px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
  .leer svg{width:64px;height:64px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px;opacity:.9}
  .leer b{display:block;color:var(--text);font-size:15.5px;margin-bottom:3px}
  .leer svg.leer-logo{width:58px;height:58px;stroke:var(--accent);stroke-width:4;stroke-linecap:round;fill:none;filter:drop-shadow(0 6px 14px rgba(95,160,180,.35))}
  .leer svg.leer-logo circle{fill:var(--text);stroke:none}
  /* Pull-to-Refresh */
  /* Pull-to-Refresh mit dem Logo-Ring: Ring zeichnet sich beim Ziehen, dreht beim Laden */
  .ptr-dot svg{width:22px;height:22px;display:block}
  .ptr-dot svg path{stroke:var(--accent);stroke-width:4;stroke-linecap:round;fill:none;stroke-dasharray:60;stroke-dashoffset:var(--ptr-off,60);transition:stroke-dashoffset .08s linear}
  .ptr-dot svg circle{fill:var(--text)}
  .ptr-dot.ready{background:var(--card);color:inherit}
  .ptr-dot.ready svg circle{fill:var(--accent)}
  .ptr-dot.spin{animation:none}
  .ptr-dot.spin svg{animation:ptrDreh .9s linear infinite}
  .ptr-dot.spin svg path{stroke-dashoffset:14}
  @keyframes ptrDreh{to{transform:rotate(360deg)}}
  /* Hero-Uebergang in den Chat */
  #hero-geist{position:fixed;z-index:120;pointer-events:none;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3);opacity:0;transition:all .38s var(--ease)}
  /* Langdruck-Menue */
  #peek{position:fixed;inset:0;z-index:150;background:rgba(23,26,31,.18);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .22s var(--ease)}
  #peek.an{opacity:1}
  #peek.hidden{display:none}
  #peek .peek-karte{width:100%;max-width:420px;transform:scale(.96);transition:transform .3s var(--ease);box-shadow:var(--sh-3)}
  #peek.an .peek-karte{transform:scale(1)}
  #peek .peek-menu{width:100%;max-width:280px;margin-top:12px;background:var(--card);border-radius:16px;box-shadow:var(--sh-3);overflow:hidden;transform:translateY(8px) scale(.97);opacity:0;transition:all .3s var(--ease) .05s}
  #peek.an .peek-menu{transform:none;opacity:1}
  #peek .peek-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 16px;background:none;border:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit}
  #peek .peek-menu button:last-child{border-bottom:0}
  #peek .peek-menu button.rot{color:var(--red)}
  #peek .peek-menu button:active{background:var(--bg2)}
  .conv{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  /* Erfolgs-Momente */
  .task-card.fertig-anim{animation:taskFertig .7s var(--ease) both}
  @keyframes taskFertig{0%{background:var(--card)}30%{background:var(--green-soft);transform:scale(1.01)}100%{background:var(--card);transform:none}}
  .haken-anim{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none;z-index:5}
  .haken-anim circle{fill:var(--green);transform-origin:center;animation:hakenKreis .5s var(--ease) both}
  .haken-anim path{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:hakenZug .35s var(--ease) .18s both}
  @keyframes hakenKreis{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
  @keyframes hakenZug{to{stroke-dashoffset:0}}
  .haken-anim.weg{animation:hakenWeg .3s var(--ease) both}
  @keyframes hakenWeg{to{opacity:0;transform:scale(.8)}}
  #sende-blase{position:fixed;z-index:110;pointer-events:none;background:linear-gradient(135deg,var(--host-a),var(--host-b));color:#fff;border-radius:18px;border-bottom-right-radius:6px;padding:9px 13px;font-size:15px;max-width:78%;box-shadow:var(--sh-2);white-space:pre-wrap;word-break:break-word;transition:all .42s var(--ease)}
  /* Parallaxe Tuercode */
  .tuercode{position:relative;overflow:hidden;will-change:transform}
  .tuercode::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.26),rgba(255,255,255,0) 70%)}
  @media (prefers-reduced-motion:reduce){.stagger>*{animation:none}.kz-bal i,.pg-bal{transition:none}#syncInfo::before{animation:none}}

  /* ---- Leinwand „Heute ist nichts offen" (09.09.2026): fuenf Logo-Varianten, zufaellig ---- */
  .leinwand{width:150px;height:150px;margin:0 auto 10px;display:block}
  .leinwand svg{width:100%;height:100%;overflow:visible}
  .leinwand .ring{fill:none;stroke:var(--accent);stroke-width:27.5;stroke-linecap:round}
  .leinwand .punkt{fill:var(--text)}
  .leinwand.fertig svg{animation:lwAtmen 5s ease-in-out infinite}
  @keyframes lwAtmen{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
  /* 1 Gezeichnet */
  .lw1 .ring{stroke-dasharray:296;stroke-dashoffset:296;animation:lwZug 1.6s cubic-bezier(.5,0,.3,1) .2s both;filter:url(#lwBleistift)}
  .lw1 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .45s var(--ease) 1.75s both}
  @keyframes lwZug{to{stroke-dashoffset:0}}
  @keyframes lwTupfer{60%{transform:scale(1.18)}100%{transform:scale(1)}}
  /* 2 Pinsel */
  .lw2 .ring{stroke-dasharray:296;stroke-dashoffset:296;stroke-width:30;animation:lwZug 1.3s cubic-bezier(.6,0,.2,1) .15s both;filter:url(#lwPinsel);opacity:.95}
  .lw2 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .5s var(--ease) 1.4s both;filter:url(#lwPinsel)}
  /* 3 Sonar */
  .lw3 .ring{opacity:0;animation:lwEin 1.2s var(--ease) 2.6s both}
  .lw3 .punkt{transform-origin:120px 112px;animation:lwPuls 1.3s ease-in-out infinite}
  .lw3 .welle{fill:none;stroke:var(--accent);stroke-width:2;transform-origin:120px 112px;opacity:0;animation:lwWelle 2.6s ease-out both}
  .lw3 .welle:nth-child(2){animation-delay:.6s} .lw3 .welle:nth-child(3){animation-delay:1.2s}
  @keyframes lwWelle{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.9);opacity:0}}
  @keyframes lwPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  @keyframes lwEin{to{opacity:1}}
  /* 4 Orbit */
  .lw4 .ring{stroke-dasharray:296;stroke-dashoffset:296;animation:lwZug 1.5s linear .2s both;opacity:.85}
  .lw4 .laeufer{fill:var(--text);offset-path:path('M77.7 157.3A62 62 0 1 1 162.3 157.3');offset-distance:0%;animation:lwOrbit 1.5s linear .2s both,lwLaeuferWeg .3s var(--ease) 1.75s both}
  .lw4 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .45s var(--ease) 1.85s both}
  @keyframes lwOrbit{to{offset-distance:100%}}
  @keyframes lwLaeuferWeg{to{opacity:0;transform:scale(.4)}}
  /* 5 Konstellation */
  .lw5 .stern{fill:var(--accent);animation:lwStern 1.6s var(--ease) both}
  .lw5 .faden{stroke:var(--accent);stroke-width:1.2;opacity:0;animation:lwFaden 1.2s var(--ease) 1.3s both}
  .lw5 .ring{opacity:0;animation:lwEin .9s var(--ease) 2.5s both}
  .lw5 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .5s var(--ease) 2.6s both}
  .lw5 .sterne{animation:lwSterneWeg .6s var(--ease) 2.7s both}
  @keyframes lwStern{from{transform:translate(var(--dx),var(--dy));opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
  @keyframes lwFaden{0%{opacity:0}50%{opacity:.7}100%{opacity:.35}}
  @keyframes lwSterneWeg{to{opacity:0}}
  @media (prefers-reduced-motion:reduce){.leinwand *{animation-duration:.01s!important;animation-delay:0s!important}.leinwand.fertig svg{animation:none}}

  /* Leinwand kleiner (09.09.2026) + Varianten 6-12 */
  .leinwand{width:104px;height:104px;margin:0 auto 4px}
  .leer.klein{padding:16px 18px 18px}
  .leinwand .punkt{stroke:none}
  /* 6 Neon */
  .lw6 .ring{animation:lwNeon 2.2s steps(1,end) both;filter:drop-shadow(0 0 6px rgba(95,160,180,.8)) drop-shadow(0 0 16px rgba(95,160,180,.45))}
  .lw6 .punkt{opacity:0;animation:lwEin .3s ease 2.2s both}
  @keyframes lwNeon{0%{opacity:0}8%{opacity:.6}12%{opacity:.05}20%{opacity:.7}24%{opacity:.1}30%{opacity:.9}34%{opacity:.2}45%{opacity:1}50%{opacity:.3}55%{opacity:1}100%{opacity:1}}
  /* 7 Tinte */
  .lw7 .punkt{transform-origin:120px 112px;animation:lwTropfen .8s var(--ease) both}
  .lw7 .ring{transform-origin:120px 112px;animation:lwTinte 1.8s cubic-bezier(.2,.8,.2,1) .5s both}
  @keyframes lwTropfen{0%{transform:scale(0) translateY(-60px);opacity:0}60%{transform:scale(1.25) translateY(0);opacity:1}100%{transform:scale(1)}}
  @keyframes lwTinte{0%{transform:scale(.3);opacity:0;filter:blur(14px)}50%{opacity:1}100%{transform:scale(1);opacity:1;filter:blur(0)}}
  /* 8 Morse: Striche fuellen sich nacheinander, dann verschmelzen sie */
  .lw8 .ring{stroke-dasharray:22 12;stroke-dashoffset:296;animation:lwMorse 1.6s linear .1s both,lwSchmelz .8s var(--ease) 1.9s forwards}
  .lw8 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .5s var(--ease) 2.4s both}
  @keyframes lwMorse{to{stroke-dashoffset:0}}
  @keyframes lwSchmelz{to{stroke-dasharray:296 0}}
  /* 9 Wasser: Ring fuellt sich von unten wie Fluessigkeit */
  .lw9 .ring{clip-path:inset(100% 0 0 0);animation:lwWasser 2s cubic-bezier(.3,.7,.2,1) .2s both}
  .lw9 .punkt{clip-path:inset(100% 0 0 0);animation:lwWasser 1.2s cubic-bezier(.3,.7,.2,1) 1.4s both}
  @keyframes lwWasser{to{clip-path:inset(-10% 0 0 0)}}
  /* 10 Spirale: Punkt kreist von aussen in die Mitte */
  .lw10 .punkt{offset-path:path('M120.0 -3.0 L130.0 -1.9 L139.7 0.0 L149.3 2.8 L158.5 6.3 L167.3 10.7 L175.6 15.7 L183.4 21.5 L190.6 27.8 L197.3 34.7 L203.2 42.2 L208.4 50.1 L213.0 58.3 L216.7 66.9 L219.7 75.7 L221.8 84.7 L223.2 93.8 L223.7 102.9 L223.5 112.0 L222.5 121.0 L220.7 129.8 L218.1 138.3 L214.9 146.5 L210.9 154.4 L206.3 161.8 L201.1 168.8 L195.4 175.2 L189.1 181.1 L182.4 186.4 L175.3 191.0 L167.9 195.0 L160.2 198.3 L152.3 200.9 L144.3 202.7 L136.2 203.9 L128.1 204.3 L120.0 204.0 L112.0 203.0 L104.2 201.3 L96.7 199.0 L89.4 196.1 L82.5 192.5 L75.9 188.4 L69.8 183.7 L64.1 178.6 L59.0 173.0 L54.4 167.0 L50.4 160.7 L47.0 154.2 L44.1 147.4 L42.0 140.4 L40.4 133.3 L39.5 126.2 L39.2 119.1 L39.5 112.0 L40.4 105.0 L42.0 98.2 L44.1 91.7 L46.8 85.3 L49.9 79.3 L53.6 73.7 L57.7 68.4 L62.2 63.5 L67.1 59.1 L72.4 55.2 L77.9 51.8 L83.6 48.9 L89.5 46.6 L95.5 44.8 L101.6 43.5 L107.8 42.8 L113.9 42.6 L120.0 43.0 L126.0 43.9 L131.8 45.3 L137.4 47.2 L142.7 49.6 L147.8 52.4 L152.6 55.6 L157.0 59.1 L161.1 63.1 L164.7 67.3 L168.0 71.8 L170.8 76.5 L173.1 81.3 L175.0 86.3 L176.4 91.5 L177.4 96.6 L177.9 101.8 L177.9 106.9 L177.5 112.0 L176.6 117.0 L175.4 121.8 L173.7 126.4 L171.6 130.8 L169.2 135.0 L166.5 138.8 L163.4 142.4 L160.1 145.7 L156.6 148.6 L152.9 151.2 L148.9 153.3 L144.9 155.2 L140.8 156.6 L136.6 157.6 L132.4 158.3 L128.2 158.6 L124.1 158.5 L120.0 158.0 L116.0 157.2 L112.2 156.0 L108.6 154.6 L105.1 152.8 L101.9 150.8 L98.9 148.5 L96.2 146.0 L93.7 143.3 L91.5 140.5 L89.7 137.5 L88.1 134.4 L86.8 131.2 L85.8 127.9 L85.2 124.7 L84.8 121.4 L84.8 118.2 L85.0 115.1 L85.5 112.0 L86.3 109.0 L87.3 106.2 L88.5 103.6 L90.0 101.1 L91.6 98.8 L93.4 96.7 L95.4 94.8 L97.5 93.1 L99.7 91.7 L101.9 90.5 L104.2 89.5 L106.6 88.8 L108.9 88.3 L111.3 88.0 L113.6 87.9 L115.8 88.1 L117.9 88.5 L120.0 89.0 L121.9 89.7 L123.8 90.6 L125.5 91.6 L127.0 92.8 L128.4 94.1 L129.6 95.4 L130.6 96.8 L131.5 98.3 L132.2 99.8 L132.7 101.3 L133.1 102.8 L133.3 104.3 L133.3 105.8 L133.2 107.2 L133.0 108.5 L132.6 109.8 L132.1 110.9 L131.5 112.0 L130.8 112.9 L130.1 113.8 L129.3 114.5 L128.4 115.1 L127.5 115.5 L126.6 115.8 L125.8 116.0 L124.9 116.1 L124.1 116.1 L123.3 115.9 L122.6 115.7 L121.9 115.3 L121.4 114.9 L120.9 114.4 L120.5 113.9 L120.2 113.3 L120.1 112.6 L120.0 112.0');offset-distance:0%;offset-rotate:0deg;transform-origin:center;animation:lwSpirale 2.2s cubic-bezier(.5,0,.3,1) both}
  .lw10 .ring{opacity:0;transform-origin:120px 112px;animation:lwRingAuf 1.2s var(--ease) 1.7s both}
  @keyframes lwSpirale{from{offset-distance:0%;transform:scale(.4)}to{offset-distance:100%;transform:scale(1)}}
  @keyframes lwRingAuf{from{opacity:0;transform:scale(.7) rotate(-40deg)}to{opacity:1;transform:none}}
  /* 11 Zwei Haelften von oben, Punkt faellt mit Bounce */
  .lw11 .halb{stroke-dasharray:148;stroke-dashoffset:148;animation:lwZug 1.3s cubic-bezier(.4,0,.2,1) .2s both}
  .lw11 .punkt{transform-origin:120px 112px;animation:lwFall .9s cubic-bezier(.3,1.6,.5,1) 1.3s both}
  @keyframes lwFall{from{transform:translateY(-90px) scale(.6);opacity:0}to{transform:none;opacity:1}}
  /* 12 Puzzle: vier Bogenstuecke fliegen zusammen und rasten ein */
  .lw12 .seg{transform-origin:120px 112px;animation:lwPuzzle 1.1s cubic-bezier(.2,.9,.3,1.15) both}
  .lw12 .seg:nth-child(2){animation-delay:.12s} .lw12 .seg:nth-child(3){animation-delay:.24s} .lw12 .seg:nth-child(4){animation-delay:.36s}
  .lw12 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .5s var(--ease) 1.5s both}
  @keyframes lwPuzzle{from{transform:translate(var(--fx),var(--fy)) rotate(25deg);opacity:0}to{transform:none;opacity:1}}
  /* 13 Kompass: Ring dreht sich suchend, findet Norden, Punkt rastet ein */
  .lw13 .ring{transform-origin:120px 112px;animation:lwKompass 2.2s cubic-bezier(.3,.1,.2,1) both}
  .lw13 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .45s var(--ease) 2.2s both}
  @keyframes lwKompass{0%{transform:rotate(-200deg);opacity:0}20%{opacity:1}60%{transform:rotate(25deg)}80%{transform:rotate(-8deg)}100%{transform:rotate(0)}}
  /* 14 Echo: drei Ringe aus der Tiefe, der letzte bleibt */
  .lw14 .echo{fill:none;stroke:var(--accent);stroke-width:27.5;stroke-linecap:round;transform-origin:120px 112px;opacity:0;animation:lwEcho 1.4s var(--ease) both}
  .lw14 .echo:nth-child(2){animation-delay:.35s} .lw14 .echo:nth-child(3){animation-delay:.7s}
  .lw14 .ring{opacity:0;transform-origin:120px 112px;animation:lwEchoEnde 1s var(--ease) 1.05s both}
  .lw14 .punkt{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .5s var(--ease) 1.9s both}
  @keyframes lwEcho{0%{transform:scale(2.4);opacity:0}40%{opacity:.35}100%{transform:scale(1);opacity:0}}
  @keyframes lwEchoEnde{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}

  /* ===== Leinwand-Szenen 15-26: nicht immer das Logo (09.09.2026) ===== */
  .leinwand .li{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
  .leinwand .li.dunkel{stroke:var(--text)}
  .leinwand .zieh{stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);animation:lwZieh var(--d,1.6s) cubic-bezier(.4,0,.2,1) var(--v,0s) both}
  @keyframes lwZieh{to{stroke-dashoffset:0}}
  .leinwand .fade{opacity:0;animation:lwEin .6s var(--ease) var(--v,1.6s) both}
  /* 15 Porta Nigra */
  .lw15 .haken{transform-origin:120px 100px;transform:scale(0);animation:lwTupfer .5s var(--ease) 2.3s both}
  /* 16 Schluessel dreht */
  .lw16 .schluessel{transform-origin:150px 120px;animation:lwDreh 1.2s cubic-bezier(.4,0,.2,1.2) 1.4s both}
  @keyframes lwDreh{to{transform:rotate(90deg)}}
  .lw16 .klick{transform-origin:150px 120px;transform:scale(0);animation:lwTupfer .4s var(--ease) 2.5s both}
  /* 17 Mosel */
  .lw17 .welle{animation:lwWelleLauf 3.5s linear infinite}
  .lw17 .welle:nth-child(2){animation-duration:4.6s;opacity:.7} .lw17 .welle:nth-child(3){animation-duration:5.8s;opacity:.45}
  @keyframes lwWelleLauf{from{transform:translateX(0)}to{transform:translateX(-114px)}}
  .lw17 .sonne{transform-origin:120px 150px;animation:lwSonneAuf 2.2s var(--ease) both}
  @keyframes lwSonneAuf{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
  /* 18 Sonne / Mond */
  .lw18 .strahlen{transform-origin:120px 112px;animation:lwStrahlen 14s linear infinite,lwEin 1s var(--ease) .6s both}
  @keyframes lwStrahlen{to{transform:rotate(360deg)}}
  .lw18 .kern{transform-origin:120px 112px;animation:lwTupfer .7s var(--ease) both}
  .lw18 .stern{fill:var(--accent);animation:lwFunkeln 2.4s ease-in-out infinite}
  .lw18 .stern:nth-child(2){animation-delay:.8s} .lw18 .stern:nth-child(3){animation-delay:1.5s}
  @keyframes lwFunkeln{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
  .lw18 .mond{transform-origin:120px 112px;animation:lwMondAuf 1.6s var(--ease) both}
  @keyframes lwMondAuf{from{transform:translateY(40px) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
  /* 19 Kaffee */
  .lw19 .dampf{stroke-width:6;opacity:0;animation:lwDampf 2.6s ease-in-out infinite}
  .lw19 .dampf:nth-child(2){animation-delay:.6s} .lw19 .dampf:nth-child(3){animation-delay:1.2s}
  @keyframes lwDampf{0%{opacity:0;transform:translateY(8px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-22px)}}
  /* 20 Papierflieger */
  .lw20 .flieger{offset-path:path('M-20 170 C 40 60, 120 200, 260 60');offset-rotate:auto;animation:lwFlug 2.4s cubic-bezier(.4,0,.3,1) .2s both}
  @keyframes lwFlug{from{offset-distance:0%}to{offset-distance:100%}}
  .lw20 .spur{stroke-dasharray:6 10;stroke-width:3;opacity:.5;--l:520;animation:lwZieh 2.4s cubic-bezier(.4,0,.3,1) .2s both}
  /* 21 Kalenderblatt */
  .lw21 .blatt{transform-origin:120px 70px;animation:lwBlatt 1.4s cubic-bezier(.5,0,.2,1) 1s both}
  @keyframes lwBlatt{0%{transform:rotateX(0)}100%{transform:rotateX(-180deg);opacity:0}}
  .lw21 .neu{opacity:0;animation:lwEin .4s ease 1.7s both}
  /* 22 Sternschnuppe */
  .lw22 .schnuppe{--l:260;animation:lwZieh .9s cubic-bezier(.3,0,.2,1) .8s both,lwSchnuppeWeg .8s ease 1.9s both}
  @keyframes lwSchnuppeWeg{to{opacity:0}}
  .lw22 .stern{fill:var(--accent);animation:lwFunkeln 3s ease-in-out infinite}
  .lw22 .stern:nth-child(odd){animation-delay:1.1s}
  /* 23 EKG */
  .lw23 .ekg{--l:700;--d:2.4s;stroke-width:7}
  .lw23 .ekgPunkt{offset-path:path('M0 120 L60 120 L80 120 L92 70 L104 165 L116 120 L240 120');offset-rotate:0deg;animation:lwFlug 2.4s linear both;transform-origin:center}
  /* 24 Konfetti */
  .lw24 .konf{animation:lwKonf 2.2s cubic-bezier(.3,0,.6,1) both;transform-origin:center}
  @keyframes lwKonf{0%{transform:translateY(-40px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(230px) rotate(540deg);opacity:0}}
  .lw24 .haken{transform-origin:120px 112px;transform:scale(0);animation:lwTupfer .5s var(--ease) 1.2s both}
  /* 25 Bett mit Zzz */
  .lw25 .z{fill:var(--accent);font-weight:800;font-family:inherit;opacity:0;animation:lwZzz 3s ease-in-out infinite}
  .lw25 .z:nth-child(2){animation-delay:.9s;font-size:22px} .lw25 .z:nth-child(3){animation-delay:1.8s;font-size:28px}
  @keyframes lwZzz{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(22px,-40px)}}
  /* 26 Koffer rollt */
  .lw26 .koffer{animation:lwRollt 2s cubic-bezier(.2,.8,.2,1) both}
  @keyframes lwRollt{from{transform:translateX(-200px)}to{transform:none}}
  .lw26 .rad{transform-box:fill-box;transform-origin:center;animation:lwRad 2s cubic-bezier(.2,.8,.2,1) both}
  @keyframes lwRad{from{transform:rotate(-900deg)}to{transform:none}}
  /* ---- Login ---- */
  #login{position:fixed;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(95,160,180,.28),transparent 60%),var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;z-index:100}
  #login .brand{font-size:42px;font-weight:800;letter-spacing:.02em;color:var(--text)}
  #login .brand span{color:var(--accent)}
  #login .tag-klein{color:var(--accent);margin-top:4px;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
  #login .tag{color:var(--muted);margin-top:10px;margin-bottom:30px;font-size:13.5px;background:none;padding:0;border-radius:0;font-weight:500;text-align:center;line-height:1.45;max-width:340px}
  #login .login-fuss{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));text-align:center;font-size:11.5px;color:var(--muted2);padding:0 24px}
  #login .brand,#login .tag-klein,#login .tag,#login .card{animation:loginEin .55s var(--ease) both}
  #login .tag-klein{animation-delay:.06s}#login .tag{animation-delay:.12s}#login .card{animation-delay:.18s}
  @keyframes loginEin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){#login .brand,#login .tag-klein,#login .tag,#login .card{animation:none}}
  #login .card{width:100%;max-width:340px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--sh-2);margin:0}
  #login input{width:100%;padding:13px 15px;border-radius:13px;background:var(--card2);border:1px solid var(--line);color:var(--text);font-size:15px;margin-bottom:11px}
  #login .btn.primary{width:100%;justify-content:center;padding:14px;font-size:15px;display:flex;border-radius:13px}
  #login .hint{font-size:12px;color:var(--muted2);margin-top:14px;text-align:center;line-height:1.5}

  .toast{position:fixed;bottom:calc(var(--tab-h) + 24px + var(--safe-b));left:50%;transform:translateX(-50%) translateY(6px);background:var(--text);color:var(--bg);padding:11px 18px;border-radius:14px;font-size:13.5px;font-weight:650;z-index:200;box-shadow:var(--sh-3);opacity:0;transition:opacity var(--t),transform var(--t) var(--ease);pointer-events:none;max-width:calc(100% - 32px);text-align:center}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  details.hint{margin:8px 12px 10px}
  details.hint summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted2);padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);-webkit-user-select:none;user-select:none}
  details.hint summary::-webkit-details-marker{display:none}
  details.hint[open] summary{color:var(--muted)}
  details.hint .hb{margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--muted);line-height:1.5}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;margin:12px;box-shadow:var(--sh-1)}
  .tpl-card .tpl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .tpl-card .tpl-head b{font-size:15px}
  .tpl-actions{display:flex;gap:12px;flex:none}
  .tpl-preview{font-size:13px;color:var(--muted);line-height:1.45;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tpl-card.open .tpl-preview{display:block;-webkit-line-clamp:unset;overflow:visible}
  .tpl-more{font-size:12px;color:var(--muted2);margin-top:4px}
  .fld{display:block;font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
  .fld input,.fld textarea{display:block;width:100%;margin-top:6px;font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-family:inherit}
  .fld textarea{min-height:120px;resize:vertical;line-height:1.45}
  .chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
  .tpl-meta{font-size:12px;color:var(--accent);font-weight:600;margin:2px 0 6px}
  .apt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
  .aptchip{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;padding:7px 12px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--text)}
  .aptchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);margin-bottom:10px}
  .chk input{width:auto;margin:0;accent-color:var(--accent)}
  .auto-box{margin-bottom:6px}
  input,textarea,select{font-size:16px !important;color:var(--text);background:var(--card);border-color:var(--line)}
  input::placeholder,textarea::placeholder{color:var(--muted2)}
  .composer textarea:focus,.searchbar input:focus,#login input:focus,.fld input:focus,.fld textarea:focus,.u-in:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
  @media(min-width:900px){ #pcText{min-height:340px!important} }

  /* Im Chat (Handy) weicht die Tab-Leiste: „Zurück" führt raus, der Composer
     bekommt den ganzen unteren Rand (vorher lag die Leiste über dem Feld). */
  @media (max-width:999px){
    #app[data-view="detail"] .tabbar{display:none}
    #app[data-view="detail"] main{padding-bottom:0}
    #app[data-view="detail"] #updateHinweis,#app[data-view="detail"]~.toast{bottom:calc(90px + var(--safe-b))}
  }
  /* ---- Fokus-Modus beim Antworten ---- */
  body.composing .tabbar{display:none}
  body.composing main{padding-bottom:0}
  body.composing .composer{padding-bottom:10px}
  body.composing #heuteKarte, body.composing .searchbar, body.composing .chips{display:none}

  /* ---- Heute-Bildschirm ---- */
  .tuercode{background:linear-gradient(135deg,var(--host-a),#3A7285);border-radius:var(--radius-lg);padding:13px 15px 13px;margin-bottom:12px;color:#fff;box-shadow:0 4px 14px rgba(76,140,168,.3)}
  .tc-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tc-name{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15;display:flex;align-items:baseline;gap:8px;min-width:0}
  .tc-pos{font-size:19px;font-weight:800;letter-spacing:-.01em;opacity:.8;white-space:nowrap}
  .tc-pos::before{content:'·';margin-right:8px;opacity:.7}
  .tc-titel{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-top:10px}
  .tc-kopieren{background:rgba(255,255,255,.2);border:0;color:#fff;font-weight:700;font-size:12.5px;padding:6px 13px;border-radius:999px;cursor:pointer;min-height:30px}
  .tc-kopieren:active{background:rgba(255,255,255,.35)}
  .tc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:800;letter-spacing:7px;line-height:1.15;margin-top:1px}
  .tc-sub{font-size:11.5px;opacity:.8;margin-top:1px}
  #heuteInhalt{padding:12px 14px 0}
  .heute-datum-zeile{display:flex;align-items:center;gap:6px;padding:0 0 10px}
  .heute-datum{flex:1;text-align:center;font-size:13px;color:var(--muted2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .heute-pfeil{width:34px;height:34px;border-radius:11px;background:var(--glas-knopf);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glas-kante);box-shadow:var(--sh-1),inset 0 1px 0 var(--glas-licht);color:var(--text2);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;flex:none}
  .heute-pfeil:active{background:var(--card2);transform:scale(.94)}
  .heute-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-1);margin-bottom:12px;overflow:hidden}
  .heute-block .hb-kopf{display:flex;align-items:center;gap:8px;padding:12px 15px 6px;font-weight:800;font-size:14.5px;letter-spacing:-.01em}
  .heute-block .hb-kopf .cnt{margin-left:auto;font-size:12px;color:var(--muted2);font-weight:700}
  .heute-block .hb-body{padding:0 8px 8px}
  /* Warten-Kachel: nicht hoeher als 4 Zeilen, innen scrollbar, unten weich auslaufend */
  .heute-block .hb-body.scrollt{max-height:236px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);padding-bottom:22px}
  /* Klapp-Kacheln + Letzte Buchungen (23.10.2026) */
  .heute-block.klapp>.hb-kopf{cursor:pointer;-webkit-user-select:none;user-select:none}
  .heute-block.klapp.zu>.hb-kopf{padding-bottom:12px}
  .heute-block.klapp>.hb-kopf .btn~.cnt{margin-left:0}
  .heute-block .hb-chev{flex:none;color:var(--muted2);font-size:17px;line-height:1;transition:transform var(--t);transform:rotate(90deg)}
  .heute-block.klapp.zu .hb-chev{transform:rotate(0deg)}
  .lb-eintrag{border-radius:12px}
  .lb-eintrag.offen{background:var(--card2)}
  .lb-eintrag .hz-stand{font-size:11.5px;color:var(--muted2);font-weight:700;align-items:center;white-space:nowrap}
  .lb-eintrag .lb-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25}
  .lb-eintrag .lb-preis{font-size:13.5px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
  .lb-eintrag .lb-chev{display:inline-block;margin-left:4px;font-size:15px;transition:transform var(--t)}
  .lb-eintrag.offen .lb-chev{transform:rotate(90deg)}
  .lb-details{padding:0 12px 12px 52px}
  .lb-details .info-grid{margin-top:2px;gap:10px 14px}
  .lb-details .info-grid .v{font-size:13px}
  .lb-zum-chat{margin-top:12px;width:100%;justify-content:center}
  .hz-tag{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;margin-right:6px;vertical-align:1px;background:var(--bg2);color:var(--muted)}
  .hz-tag.heute{background:var(--amber-soft);color:var(--amber)} .hz-tag.gast{background:var(--accent-soft);color:var(--accent-ink)} .hz-tag.bald{background:var(--bg2);color:var(--text2)}
  .heute-leer{text-align:center;padding:36px 16px;color:var(--muted);font-size:14px}
  .heute-leer b{display:block;font-size:22px;margin-bottom:6px;color:var(--text)}
  .heute-zeile{flex-wrap:wrap}
  .hz-extra{width:100%;padding-left:44px}
  .hz-stat{margin-top:4px;background:var(--card2);border-radius:12px;padding:6px 10px;display:flex;flex-direction:column;gap:3px}
  .hz-st{display:flex;align-items:baseline;gap:7px;font-size:12.5px;line-height:1.4;min-width:0}
  .hz-sti{flex:none;font-size:13px}
  .hz-stl{flex:none;color:var(--muted2);font-weight:700;width:66px}
  .hz-stv{font-weight:650;color:var(--text2);min-width:0}
  .hz-stv.ok{color:var(--green)} .hz-stv.warn{color:var(--amber)} .hz-stv.rot{color:var(--red)}
  /* „fertig"-Knopf in der Reinigungszeile (Pascal, 21.09.2026) */
  .ns-karte{margin-top:12px;padding:11px 12px;border-radius:var(--radius);background:var(--amber-soft);border:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--text)}
  .ns-karte .btn{margin-top:9px;padding:8px 13px;font-size:13px}
  .ns-karte.ok{background:var(--green-soft)}
  .hz-fertig{margin-left:8px;flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--text2);
    font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;cursor:pointer;line-height:1.3}
  .hz-fertig:active{background:var(--accent);color:#fff;border-color:var(--accent)}
  .hz-chip{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--card3);color:var(--muted);white-space:nowrap}
  .hz-chip.ok{background:var(--green-soft);color:var(--green)} .hz-chip.warn{background:var(--amber-soft);color:var(--amber)} .hz-chip.rot{background:var(--red-soft);color:var(--red)}
  .hz-leer{padding:8px 8px 10px;font-size:13px;color:var(--muted2)}
  /* Auto-Nachrichten (01.10.2026): wartende Juna-Antworten mit Countdown und drei Knöpfen */
  .auto-block{border-color:var(--accent)}
  .auto-karte{margin:4px 2px 10px;padding:11px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
  .auto-karte .ak-kopf{display:flex;align-items:baseline;gap:8px;min-width:0}
  .auto-karte .ak-name{font-weight:800;font-size:14.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .auto-karte .ak-apt{font-size:12px;color:var(--muted2);white-space:nowrap}
  .auto-karte .ak-zeit{font-size:12px;font-weight:700;color:var(--accent-ink);margin-top:2px}
  .auto-karte .ak-frage{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4}
  .auto-karte .ak-antwort{font-size:14px;line-height:1.45;margin-top:6px;white-space:pre-wrap;padding:8px 10px;border-radius:11px;background:var(--card);border:1px solid var(--line)}
  .auto-karte .ak-knoepfe{display:flex;gap:6px;margin-top:9px}
  .auto-karte .ak-knoepfe .btn{flex:1;padding:9px 6px;font-size:12.5px;min-height:38px}
  .auto-karte.entwurf{border-color:var(--amber);background:var(--amber-soft)}
  .r-conv-banner{margin:10px 12px;padding:10px 12px;border-radius:14px;border:1px solid var(--accent);background:var(--accent-soft);font-size:13px;line-height:1.45}
  .r-conv-banner.s-ja{border-color:var(--green);background:var(--green-soft)} .r-conv-banner.s-nein{border-color:var(--line);background:var(--card)}
  .r-conv-banner.s-abgelaufen{border-color:var(--amber);background:var(--amber-soft)}
  /* ---- Reinigungs-App (01.10.2026): eigene Oberfläche der Reinigungsfirmen ---- */
  #rApp{min-height:100vh;min-height:100dvh;background:var(--bg)}
  .r-inhalt{padding:12px 14px calc(var(--tab-h,64px) + 34px + var(--safe-b))}
  .r-inhalt.r-v-chat{padding:0}
  .r-inhalt.r-v-material,.r-inhalt.r-v-mehr,.r-inhalt.r-v-anleitung{padding-left:0;padding-right:0}
  .r-laden{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .r-logo{font-size:30px;font-weight:800;letter-spacing:.06em}.r-logo span{color:var(--accent)}
  .r-vorschau{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:calc(var(--safe-t) + 6px) 14px 6px;background:var(--amber);color:#1b1305;font-size:12.5px;font-weight:700}
  .r-vorschau button{border:0;background:rgba(0,0,0,.18);color:inherit;font-weight:800;border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
  .r-sprache-knopf{font-size:24px;line-height:1;background:var(--card);border:1px solid var(--line);border-radius:12px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
  .r-uebersetzt{margin:8px 14px 0;padding:8px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;font-weight:700;text-align:center}
  .r-gruss{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:2px 2px 12px}
  .r-gruss span{display:block;font-size:13px;font-weight:600;color:var(--muted2);margin-top:2px}
  .r-dringend{border:2px solid var(--red);box-shadow:0 6px 22px rgba(220,38,38,.18)}
  .r-dringend .hb-kopf{color:var(--red)}
  .r-anfrage{margin:4px 2px 10px;padding:11px 12px;border-radius:14px;background:var(--red-soft);border:1px solid rgba(220,38,38,.25)}
  .r-anf-titel{font-weight:800;font-size:15px;margin-bottom:4px}
  .r-frage{font-size:12.5px;font-weight:700;color:var(--text2);margin:8px 0 6px}
  .r-optionen{display:flex;flex-wrap:wrap;gap:6px}
  .r-opt{border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:800;font-size:13.5px;border-radius:12px;padding:10px 12px;min-height:44px;cursor:pointer}
  .r-opt.wunsch{border-color:var(--green);background:var(--green-soft);color:var(--green)}
  .r-opt.nein{display:block;width:100%;margin-top:8px;color:var(--red);border-color:rgba(220,38,38,.35)}
  .r-opt:active{transform:scale(.97)}
  .r-klein{font-size:11.5px;color:var(--muted2);margin-top:6px;line-height:1.4}
  .r-warnkarte{margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-lg);background:var(--amber-soft);border:1px solid var(--amber);font-size:13.5px;line-height:1.45;cursor:pointer}
  .r-warnkarte .btn{display:block;width:100%;margin-top:8px}
  .r-hinweiskarte{position:relative;margin:4px 0 12px;padding:12px 34px 12px 14px;border-radius:var(--radius-lg);background:var(--accent-soft);font-size:13.5px;line-height:1.45}
  .r-x{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--muted2);font-size:16px;cursor:pointer;padding:4px}
  .r-job,.r-wohnung{margin:4px 2px 10px;padding:11px 12px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
  .r-job.s-wechsel{border-left:4px solid var(--red)}
  .r-job.s-knapp{border-left:4px solid var(--amber)}
  .r-job.s-erledigt,.r-job.s-entfaellt{opacity:.78}
  .r-job.kompakt{padding:9px 11px}
  .r-job-kopf{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:4px}
  .r-job-name{font-weight:800;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .r-chip{flex:none;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--card3);color:var(--muted);white-space:nowrap}
  .r-chip.rot{background:var(--red-soft);color:var(--red)} .r-chip.gelb{background:var(--amber-soft);color:var(--amber)} .r-chip.gruen{background:var(--green-soft);color:var(--green)} .r-chip.blau{background:var(--accent-soft);color:var(--accent-ink)} .r-chip.grau{background:var(--card3);color:var(--muted2)}
  .r-zeile{font-size:13.5px;line-height:1.45;margin-top:3px;color:var(--text2)}
  .r-hinweis{color:var(--muted);font-size:12.5px}
  .r-flagzeile{font-weight:700;color:var(--amber)}
  .r-flagzeile.rot{color:var(--red)}
  .r-flag.spaet{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(124,58,237,.12);color:#7c3aed;white-space:nowrap}
  .r-frist{margin-top:7px;padding:7px 10px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13.5px}
  .r-frist.frueh{background:var(--amber-soft);border-color:var(--amber)}
  .r-kinderbett{margin-top:7px;padding:7px 10px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent);font-size:13.5px;font-weight:700;color:var(--text)}   /* Kinderreisebett (08.10.2026) */
  .r-fertig{display:block;width:100%;margin-top:9px;min-height:46px;border-radius:12px;border:0;background:var(--green);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
  /* Reinigung „Nur Liste je Tag“ (16.10.2026) */
  .r-liste{margin:4px 0 14px}
  .r-tag{font-size:12px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em;padding:14px 4px 6px}
  .r-leer{font-size:14px;color:var(--muted);padding:6px 4px}
  .r-tagesliste{margin:4px 0 14px;padding:0}
  .r-tuercode{margin-bottom:12px}
  .r-tagblock .hb-body{padding:0 8px 6px}
  .r-z{border-top:1px solid var(--line)}
  .r-tagblock .r-z:first-child{border-top:0}
  .r-z>summary{list-style:none;display:block;padding:10px 6px 10px;cursor:pointer}
  div.r-z{padding:10px 6px 10px}
  .r-z .hz-stand{display:flex;gap:4px;flex:none}
  .r-z-akt button{white-space:nowrap;font-size:13px;padding:0 6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  div.r-z .r-z-akt{gap:6px;margin-left:0}
  div.r-z .r-z-akt button{font-size:13px}
  div.r-z .r-z-akt button:nth-last-child(2){flex:1.25}
  .r-plan-zeile{display:flex;align-items:center;gap:10px;padding:7px 4px;border-top:1px solid var(--line)}
  .r-plan-zeile.heute{background:var(--card2);border-radius:10px}
  .r-plan-d{flex:none;width:78px;font-size:13px}
  .r-plan-chips{display:flex;flex-wrap:wrap;gap:6px}
  .r-plan-chip{display:inline-flex;align-items:center;gap:3px}
  .r-plan-chip .r-badge{width:30px;height:30px;border-radius:9px;font-size:11px}
  .r-plan-z{font-size:11px;font-weight:700;color:var(--text2)}
  .r-plan-leg{border-top:1px solid var(--line);padding:10px 4px 4px;gap:8px 12px}
  .r-plan-leg .r-badge{width:24px;height:24px;font-size:10px;border-radius:7px}
  .r-wt.wahl{outline:2px solid var(--accent,#2b7)}
  .r-z-akt .r-z-fertig{flex:.8;min-height:40px;padding:0 12px;font-size:14px;background:var(--green);color:#fff;border:0;font-weight:800}
  .r-z-akt .r-z-fertig:disabled{opacity:.4}
  .r-neu .r-zeit{flex:none;font-size:12px;color:var(--muted2);font-weight:700}
  .r-tagblock .hz-legende{margin:4px 0 2px}
  .r-z>summary::-webkit-details-marker{display:none}
  .r-z-k1{display:flex;align-items:center;gap:10px}
  .r-badge{width:38px;height:38px;border-radius:12px;font-size:13px}
  .r-z-mitte{flex:1;min-width:0}
  .r-z-name{font-weight:800;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
  .r-z-sub{font-size:12.5px;color:var(--muted);margin-top:1px}
  .r-z .hz-stat{margin:8px 0 0 48px}
  .r-z .hz-stl{width:72px}
  .r-z-fertig{flex:none;min-height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--green);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
  .r-z-fertig:disabled{opacity:.4}
  .r-z-ok{flex:none;color:var(--green);font-weight:900;font-size:15px;padding:0 4px}
  .r-z-weg{flex:none;font-size:13px;color:var(--muted)}
  .r-z.s-erledigt,.r-z.s-entfaellt{opacity:.55}
  .r-14t{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:4px 0 6px}
  .r-wt{min-width:0;padding-left:0;padding-right:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;cursor:pointer}
  .r-wt span{font-size:11px;color:var(--muted2);font-weight:700}
  .r-wt i{font-style:normal;font-size:12px;color:var(--muted2)}
  .r-wt b{font-size:17px;font-weight:900}
  .r-wt.ohne{opacity:.45;cursor:default}
  .r-wt.heute{border-color:var(--accent-ink,#5eead4)}
  .r-z>.r-job{border:0;margin:0;border-top:1px solid var(--line);border-radius:0 0 14px 14px}
  .r-mehr-info{margin-top:10px}
  .r-mehr-info>summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--muted);padding:10px 4px}
  .r-fertig:disabled{background:var(--card3);color:var(--muted2)}
  .r-zeit{font-size:11px;color:var(--muted2);margin-left:4px;white-space:nowrap}
  .r-meldung,.r-frei{padding:2px 0}
  .r-adresse{display:block;font-size:12px;color:var(--accent-ink);margin-top:5px;text-decoration:none}
  .r-modal{position:fixed;inset:0;z-index:200;background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + var(--safe-b))}
  .r-modal.offen{display:flex}
  .r-modal-karte{width:100%;max-width:520px;max-height:86vh;overflow-y:auto;background:#fff;color:var(--text);border-radius:22px;padding:18px 16px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:popIn var(--t) var(--ease)}
  @media (prefers-color-scheme: dark){ .r-modal-karte{background:#14181e} }
  .r-m-titel{font-size:18px;font-weight:800;margin-bottom:10px}
  .r-m-text{font-size:14.5px;line-height:1.5;color:var(--text2)}
  .r-m-knoepfe{display:flex;gap:8px;margin-top:16px}.r-m-knoepfe .btn{flex:1;min-height:46px}
  .r-m-dringend{font-size:12px;font-weight:900;color:var(--red);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
  .r-liste{margin:10px 0 0 18px;padding:0;line-height:1.55}
  .r-sprachen{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 2px}
  .r-sprachwahl{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:11px 12px;font-size:14px;font-weight:700;cursor:pointer;text-align:left}
  .r-sprachwahl span{font-size:20px}
  .r-sprachwahl.an{border-color:var(--accent);background:var(--accent-soft)}
  .r-kal-legende{font-size:11.5px;color:var(--muted);margin:0 2px 8px;line-height:1.5}
  .r-grau-punkt{display:inline-block;width:10px;height:10px;border-radius:3px;background:#9aa3ad;vertical-align:-1px}
  .kalbal.r-gesperrt{background:repeating-linear-gradient(135deg,#9aa3ad,#9aa3ad 6px,#aeb6bf 6px,#aeb6bf 12px)}
  .kalbal.r-zeiten{background:linear-gradient(135deg,#b7791f,#5FA0B4)}
  .r-chat{display:flex;flex-direction:column;height:calc(100vh - 70px - var(--safe-t) - var(--tab-h,64px) - 30px - var(--safe-b));height:calc(100dvh - 70px - var(--safe-t) - var(--tab-h,64px) - 30px - var(--safe-b))}
  .r-chat-liste{flex:1;overflow-y:auto;padding:10px 14px;-webkit-overflow-scrolling:touch}
  .r-chat-eingabe{display:flex;gap:8px;padding:8px 14px}
  .r-chat-eingabe input{flex:1;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:16px}
  /* Chat (Pascal 01.10.2026: „Eingabefenster leicht unter der Bar"): Kopf, Liste und Eingabe als Spalte ueber die
     volle Hoehe – die Eingabe endet immer ueber der schwebenden Leiste, egal wie hoch der Kopf ist
     (Vorschau-Hinweis, Uebersetzungs-Zeile, lange Titel). */
  #rApp.r-ist-chat{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden}
  #rApp.r-ist-chat>.r-inhalt{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 0 calc(var(--tab-h) + 18px + var(--safe-b))}
  #rApp.r-ist-chat .r-chat{flex:1;min-height:0;height:auto}
  /* Kalender: Monate blaettern + Monatsuebersicht (01.10.2026) */
  .r-kal-nav{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
  .r-kal-titel{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
  .r-kal-titel b{font-size:17px;text-transform:capitalize}
  .r-kal-heute{border:0;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer}
  .r-kal-pfeil{width:44px;height:44px;flex:none;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:24px;line-height:1;cursor:pointer;box-shadow:var(--sh-1)}
  .r-kal-pfeil:disabled{opacity:.3}
  .r-kz{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
  .r-kz-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--sh-1);min-width:0}
  .r-kz-box b{font-size:20px;line-height:1.15}
  .r-kz-box span{font-size:12.5px;color:var(--text2);font-weight:650}
  .r-kz-box em{font-size:11px;color:var(--muted);font-style:normal}
  .r-kz-vgl{font-size:12px;color:var(--muted);margin:2px 2px 12px}
  .r-mk{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px;box-shadow:var(--sh-1)}
  .r-mk-kopf,.r-mk-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .r-mk-kopf div{text-align:center;font-size:11px;color:var(--muted);font-weight:700;padding-bottom:2px;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #rApp .kalhead .kaltag span,#rApp .kalhead .kaltag i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* PC (Pascal, 01.10.2026: „auch am PC gucken"): mittige Spalte, Kalender breit, unten zwei Spalten, Fenster mittig */
  @media (min-width:900px){
    #rApp>.r-top,#rApp>.r-inhalt,#rApp>.r-vorschau{width:100%;max-width:880px;margin-left:auto;margin-right:auto}
    #rApp.r-ist-kal>.r-top,#rApp.r-ist-kal>.r-inhalt{max-width:1480px}
    #rApp .r-kz{grid-template-columns:repeat(4,minmax(0,1fr))}
    #rApp .r-kal-unten{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:0 28px;align-items:start}
    .r-modal{align-items:center}
  }
  body.r-modus #sheet:not(.open),body.r-modus #sheetBackdrop:not(.open){visibility:hidden}
  /* Pascals PC-Ansicht sperrt das Scrollen der Seite (html,body overflow:hidden) – die Reinigungs-App scrollt die Seite (Gegenprüfung 5.0.48, B1) */
  @media (min-width:1000px){ html.r-modus,html.r-modus body{height:auto;overflow:visible} }
  .r-mk-tag{position:relative;aspect-ratio:1/1;border:1.5px solid transparent;border-radius:12px;background:var(--bg);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;padding:0;cursor:pointer;min-width:0}
  .r-mk-tag span{font-size:11px;color:var(--muted);line-height:1}
  .r-mk-tag b{font-size:16px;line-height:1.15;font-weight:800}
  .r-mk-tag i{position:absolute;top:1px;right:2px;font-size:9px;font-style:normal}
  .r-mk-tag.n1{background:color-mix(in srgb,var(--accent) 16%,var(--card))}
  .r-mk-tag.n2{background:color-mix(in srgb,var(--accent) 36%,var(--card))}
  .r-mk-tag.n3{background:color-mix(in srgb,var(--accent) 62%,var(--card));color:#fff}
  .r-mk-tag.n3 span{color:rgba(255,255,255,.85)}
  .r-mk-tag.vorbei{opacity:.5}
  .r-mk-tag.heute{border-color:var(--accent)}
  .r-mk-tag.wahl{box-shadow:0 0 0 2px var(--text)}
  .r-mk-details{padding:12px 14px;margin-top:10px}
  .r-mk-dkopf{font-weight:800;margin-bottom:4px;text-transform:capitalize}
  .r-liste{padding:4px 14px}
  .r-mk-zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
  .r-mk-zeile:first-child{border-top:none}
  .r-mk-zeile .r-klein{text-align:right}
  .r-woche{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
  .r-woche span{width:56px;color:var(--muted);font-weight:700;flex:none}
  .r-woche-balken{flex:1;height:10px;border-radius:5px;background:var(--bg);overflow:hidden}
  .r-woche-balken i{display:block;height:100%;border-radius:5px;background:var(--accent)}
  .r-woche b{width:24px;text-align:right;flex:none}
  /* Kalender (07.10.2026): schmale Balken (eine Nacht) mit wenig Rand, Monatsplan als Liste */
  .kalbal.kb-eng{padding:0 4px;text-align:center;text-overflow:clip}
  .r-plan{padding:10px 14px}
  .r-plan-nav{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .r-plan-nav b{flex:1;text-align:center;font-size:15px;text-transform:capitalize}
  .r-plan-nav .r-kal-pfeil{width:38px;height:38px;font-size:20px;border-radius:12px}
  .r-plan-tag{padding:8px 0;border-top:1px solid var(--line)}
  .r-plan-tag.vorbei{opacity:.5}
  .r-plan-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .r-plan-kopf b{font-size:14px;text-transform:capitalize}
  .r-plan-kopf .r-klein{margin-top:0;white-space:nowrap}
  .r-plan-tag.heute .r-plan-kopf b{color:var(--accent-ink)}
  /* Material: Liste sammeln, EINE Mitteilung (01.10.2026) */
  .r-mat-liste{padding:14px;margin-top:14px;border:1.5px solid var(--accent)}
  .r-mat-kopf{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
  .r-mat-zahl{background:var(--accent);color:#fff;border-radius:999px;font-size:12px;padding:1px 8px}
  .r-mat-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
  .r-mat-weg{border:0;background:var(--bg);color:var(--muted);width:34px;height:34px;border-radius:10px;font-size:15px;cursor:pointer;flex:none}
  .msg.r-auto .txt{font-size:12.5px;opacity:.92}
  .r-orig{font-size:11px;padding:0}
  #rApp .r-v-material .card,#rApp .r-v-mehr .set-row{margin-left:0;margin-right:0}
  .r-z-akt{display:flex;gap:8px;margin:8px 0 0 48px}
  .r-z-akt button{flex:1;min-height:40px;border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
  .r-version{text-align:center;margin-top:18px;font-size:12px;color:var(--muted)}
  /* EIGENES TEAM + EINTEILUNG (25.10.2026) – Handy und PC */
  .r-nur-web{display:none!important}
  #rApp .kalbal{cursor:pointer}#rApp .kalbal:hover{filter:brightness(1.08)}#rApp .kalbal:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .r-kalinfo{display:flex;flex-direction:column;gap:10px;margin-top:12px}
  .r-kalinfo-z{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
  .r-kalinfo-i{flex:none;width:24px;text-align:center}
  #rApp .kalname{background:linear-gradient(var(--card),var(--card)),var(--bg)}   /* deckend: Balken scheinen sonst durch den Wohnungsnamen (Glas-Thema) */
  #rApp .r-v-kalender .card,#rApp .r-v-team .card,#rApp .r-v-einteilung .card{margin-left:0;margin-right:0}   /* gleiche Kante wie die übrigen Kästen */
  .r-hw-liste{padding:4px 0 2px}
  .r-ein-st{cursor:pointer}.r-ein-st u{text-decoration:none;color:var(--accent);font-weight:700}
  .r-kal-ein{width:100%;min-height:44px;margin:0 0 12px}
  .r-ma-wahl{display:flex;flex-direction:column;gap:6px;margin-top:12px}
  .r-ma-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:650}
  .r-ma-opt input{width:20px;height:20px;accent-color:var(--accent);flex:none}
  .r-ma-opt .avatar,.r-team-ma .avatar,.r-ein-zahl .avatar{width:28px;height:28px;font-size:12px;flex:none}
  .r-team .card{padding:14px}
  .r-team-titel{font-weight:800;font-size:16px;margin-bottom:6px}
  .r-team-los{width:100%;min-height:44px;margin-top:12px}
  .r-team-liste{display:flex;flex-direction:column;gap:8px}
  .r-team-ma{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--sh-1);flex-wrap:wrap}
  .r-team-ma.aus{opacity:.65}
  .r-team-info{flex:1;min-width:150px;display:flex;flex-direction:column;gap:2px}
  .r-team-info span{font-size:12.5px;color:var(--muted)}
  .r-team-knoepfe{display:flex;gap:6px;flex-wrap:wrap;width:100%;padding-left:40px}
  .r-team-knoepfe .btn{padding:7px 10px;font-size:12.5px;min-height:34px}
  .r-team-weg{color:var(--red)}
  .r-team-neu{display:flex;gap:8px;flex-wrap:wrap}
  .r-team-neu input,.r-team-neu select{flex:1;min-width:140px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:16px}
  .r-team-neu .btn{min-height:44px;flex:none}
  .r-zugang{margin-top:12px;background:var(--card2);border:1px dashed var(--line2,var(--line));border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
  .r-zugang-link{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;user-select:all}
  .r-zugang-knoepfe{flex-wrap:wrap}.r-zugang-knoepfe .btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
  .r-ein-kopf{padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  .r-ein-summe{font-size:14px}.r-ein-summe b{font-size:17px}.r-rot{color:var(--red)}
  .r-ein-zahlen{display:flex;flex-wrap:wrap;gap:6px}
  .r-ein-zahl{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--card2);font-size:13px;font-weight:600}
  .r-ein-filter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);cursor:pointer}
  .r-ein-filter input{width:18px;height:18px;accent-color:var(--accent)}
  .r-ein-liste{padding:4px 12px 8px}
  .r-ein-tag{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 2px 6px}
  .r-ein-tag:first-child{padding-top:8px}.r-ein-tag.heute{color:var(--accent)}
  .r-ein-zeile{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line);flex-wrap:wrap}
  .r-ein-zeile.offen{box-shadow:inset 3px 0 0 var(--amber,#d97706);padding-left:8px}
  .r-ein-info{flex:1;min-width:140px;display:flex;flex-direction:column;gap:1px}
  .r-ein-info span{font-size:12px;color:var(--muted)}
  .r-ein-chips{display:flex;flex-wrap:wrap;gap:6px}
  .r-ein-chip{border:1px solid var(--line);background:var(--bg);color:var(--text2);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;min-height:36px}
  .r-ein-chip.an{background:var(--accent);border-color:var(--accent);color:#fff}
  @media (max-width:640px){ .r-ein-chips{width:100%;padding-left:48px} }
  @media (min-width:900px){ #rApp.r-ist-breit>.r-top,#rApp.r-ist-breit>.r-inhalt{max-width:1180px} }
  .r-vorschlaege{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 10px}
  .r-vorschlag{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .r-gesendet>summary{list-style:none;cursor:pointer;font-weight:700;font-size:14px;color:var(--muted);padding:14px 0 6px}
  .r-gesendet>summary::-webkit-details-marker{display:none}
  .r-anl{margin:8px 0;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
  .r-anl-titel{font-weight:800;font-size:15px;margin-bottom:4px}
  .r-anl-text{font-size:13.5px;line-height:1.5;color:var(--text2)}
  .auto-blink{animation:autoBlink 1.2s ease-in-out 2}
  @keyframes autoBlink{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px var(--accent)}}
  .heute-block .hb-kopf .cnt:empty{display:none}
  .hz-legende{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:6px 4px 4px;padding:8px 2px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted2)}
  .hz-legende>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  .hz-legende .hz-pkt{width:18px;height:18px;font-size:10px;border-radius:5px}
  /* ---- Heute-Karte (Inbox) ---- */
  .heute-karte{margin:10px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-1);overflow:hidden}
  .heute-kopf{display:flex;align-items:center;gap:8px;padding:11px 15px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);cursor:pointer}
  .heute-kopf .chev{margin-left:auto;transition:transform var(--t);font-size:16px}
  .heute-karte.zu .chev{transform:rotate(-90deg)}
  .heute-karte.zu .heute-body{display:none}
  .heute-body{padding:0 8px 8px}
  .heute-gruppe{font-size:11px;font-weight:800;color:var(--muted2);padding:6px 8px 4px;letter-spacing:.04em}
  .heute-zeile{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:12px;cursor:pointer;min-height:44px}
  .heute-zeile:active{background:var(--card2)}
  .heute-zeile .avatar{width:34px;height:34px;border-radius:11px;font-size:12px}
  .heute-zeile .hz-mid{flex:1;min-width:0}
  .heute-zeile .hz-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .heute-zeile .hz-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .heute-zeile .hz-stand{display:flex;gap:4px;flex:none}
  .hz-pkt{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;background:var(--card3);color:var(--muted2);opacity:.7}
  /* Erledigt = satt gruen mit weissem Zeichen (Pascal, 11.09.2026: das blasse Gruen war im Dunkelmodus kaum zu erkennen) */
  /* Juna-Optik (15.09.2026, Pascal: hell + dunkel, Entity-Look, Apple-Glas). Eigene Tokens,
     damit die Seite in beiden Modi eigenstaendig wirkt; der Kern (Orb) liest --ju-ink per JS. */
  :root{--ju-bg:#eef1f5; --ju-text:#14181d; --ju-muted:#66717d; --ju-glas:rgba(255,255,255,.62); --ju-glas2:rgba(255,255,255,.45);
    --ju-rand:rgba(23,26,31,.07); --ju-licht:rgba(255,255,255,.9); --ju-ink:35,150,180; --ju-ink2:20,110,140;
    --ju-leucht:rgba(60,180,215,.30); --ju-leucht2:rgba(130,110,230,.14); --ju-sh:0 10px 30px rgba(23,26,31,.08)}
  @media (prefers-color-scheme: dark){ :root{--ju-bg:#03060a; --ju-text:#e6eef4; --ju-muted:#7f93a3; --ju-glas:rgba(255,255,255,.05); --ju-glas2:rgba(255,255,255,.035);
    --ju-rand:rgba(255,255,255,.09); --ju-licht:rgba(255,255,255,.14); --ju-ink:127,214,238; --ju-ink2:210,240,250;
    --ju-leucht:rgba(70,190,230,.22); --ju-leucht2:rgba(120,90,220,.14); --ju-sh:0 12px 34px rgba(0,0,0,.45)} }
  html.juna-start,html.juna-start body,body.as-voll{background:var(--ju-bg)!important}
  body.as-voll::before{background:radial-gradient(45% 32% at 50% 22%,var(--ju-leucht),transparent 70%),radial-gradient(40% 30% at 85% 90%,var(--ju-leucht2),transparent 70%),radial-gradient(40% 30% at 10% 95%,var(--ju-leucht),transparent 70%)}
  body.as-voll #screen-assistent{background:transparent;color:var(--ju-text)}
  body.as-voll #screen-assistent .msg .txt{padding:9px 13px;border-radius:18px;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
  body.as-voll #screen-assistent .msg.host .txt{background:linear-gradient(180deg,rgba(var(--ju-ink),.22),rgba(var(--ju-ink),.12));color:var(--ju-text);border:1px solid rgba(var(--ju-ink),.28);box-shadow:inset 0 1px 0 var(--ju-licht),0 6px 18px rgba(var(--ju-ink),.12)}
  body.as-voll #screen-assistent .msg.guest .txt{background:var(--ju-glas);color:var(--ju-text);border:1px solid var(--ju-rand);box-shadow:inset 0 1px 0 var(--ju-licht),var(--ju-sh)}
  body.as-voll #screen-assistent .msg.guest,body.as-voll #screen-assistent .msg.host{background:transparent;border:none;box-shadow:none;padding:0}
  body.as-voll #screen-assistent .meta,body.as-voll #screen-assistent .as-status{color:var(--ju-muted)}
  body.as-voll #screen-assistent input{background:var(--ju-glas);color:var(--ju-text);border:1px solid var(--ju-rand);box-shadow:inset 0 1px 0 var(--ju-licht);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:14px}
  body.as-voll #screen-assistent input::placeholder{color:var(--ju-muted)}
  body.as-voll #screen-assistent .btn.primary{background:linear-gradient(180deg,rgba(var(--ju-ink),.95),rgba(var(--ju-ink2),.95));border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(var(--ju-ink),.3)}
  @media (prefers-color-scheme: dark){ body.as-voll #screen-assistent .btn.primary{color:#04161c;background:linear-gradient(180deg,rgba(var(--ju-ink2),1),rgba(var(--ju-ink),1))} }
  body.as-voll #screen-assistent .set-row{background:var(--ju-glas2);border:1px solid var(--ju-rand);box-shadow:inset 0 1px 0 var(--ju-licht);margin:6px 12px;padding:10px 13px}
  body.as-voll #screen-assistent .set-row .st{color:var(--ju-text)} body.as-voll #screen-assistent .set-row .sd{color:var(--ju-muted)}
  body.as-voll .as-mic{background:var(--ju-glas);color:rgb(var(--ju-ink));box-shadow:inset 0 1px 0 var(--ju-licht),0 0 0 1px var(--ju-rand),0 8px 24px rgba(var(--ju-ink),.18);border:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  body.as-voll .as-mic.an{background:rgba(var(--ju-ink),.22);color:rgb(var(--ju-ink));box-shadow:inset 0 1px 0 var(--ju-licht),0 0 0 1px rgba(var(--ju-ink),.4),0 0 28px rgba(var(--ju-ink),.45);animation:asPuls2 2.2s ease-in-out infinite}
  @keyframes asPuls2{0%,100%{box-shadow:inset 0 1px 0 var(--ju-licht),0 0 0 1px rgba(var(--ju-ink),.4),0 0 22px rgba(var(--ju-ink),.35)}50%{box-shadow:inset 0 1px 0 var(--ju-licht),0 0 0 1px rgba(var(--ju-ink),.6),0 0 44px rgba(var(--ju-ink),.6)}}
  body.as-voll .as-status{letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}
  body.as-voll .as-status.an{color:rgb(var(--ju-ink))}
  body.as-voll .ju-stimme{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:0 14px;font-size:11px;color:var(--ju-muted);letter-spacing:.04em}
  body.as-voll .ju-stimme select{font-size:12px!important;padding:5px 24px 5px 10px;border-radius:999px;background:var(--ju-glas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;color:var(--ju-text);border:1px solid var(--ju-rand);box-shadow:inset 0 1px 0 var(--ju-licht);-webkit-appearance:none;appearance:none;width:auto}
  /* Versionsnummer oben rechts (Pascal, 16.09.2026) – zählt mit jedem Ausrollen hoch */
  .ver-tag{position:absolute;top:calc(var(--safe-t) + 4px);right:18px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);opacity:1;pointer-events:none;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;transform:none}
  .topbar.kompakt .ver-tag{opacity:0}
  .ju-ver{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:16px;color:var(--ju-muted);z-index:50;font-size:11px;opacity:1}
  /* Juna in der App: Zurück (Pascal, 02.10.2026: „da komme ich gar nicht mehr raus, ohne neu zu starten") – nicht in der eigenen Juna-App */
  .ju-zurueck{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:12px;z-index:51;display:inline-flex;align-items:center;gap:5px;padding:7px 14px 7px 11px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;color:var(--ju-text);background:var(--ju-glas);border:1px solid var(--ju-rand);box-shadow:inset 0 1px 0 var(--ju-licht),var(--ju-sh);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .ju-zurueck b{font-size:19px;line-height:1;margin-top:-2px}
  .ju-zurueck[hidden]{display:none}
  html.juna-start .ju-zurueck{display:none}
  /* Tageszusammenfassung (02.10.2026): Karte auf Heute + Blatt zum Lesen */
  .brief-karte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-1);margin-bottom:12px;padding:12px 14px;cursor:pointer}
  .brief-karte .bk-kopf{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:14px;min-width:0}
  .brief-karte .bk-zeit{font-size:11.5px;font-weight:600;color:var(--muted)}
  .brief-karte .bk-mehr{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
  .brief-karte .bk-text{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .brief-blatt .bb-nav{display:flex;align-items:center;gap:10px;margin:0 0 12px}
  .brief-blatt .bb-nav button{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
  .brief-blatt .bb-nav button:disabled{opacity:.3;cursor:default}
  .brief-blatt .bb-datum{flex:1;text-align:center;font-weight:700;font-size:14px}
  .brief-blatt .bb-datum span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
  .brief-blatt .bb-zahlen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
  .brief-blatt .bb-zahl{font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--card2);border:1px solid var(--line);font-weight:600;color:var(--text)}
  .brief-blatt .bb-text{font-size:16px;line-height:1.62;color:var(--text)}
  .brief-blatt .bb-text p{margin:0 0 12px;white-space:pre-line}
  .brief-blatt .bb-hinweis{font-size:12.5px;color:var(--muted);margin:8px 0 0}
  .brief-blatt .ab-gruppe{margin:0 0 16px}
  .brief-blatt .ab-kopf{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--muted);margin:0 0 2px}
  .brief-blatt .ab-kopf b{margin-left:auto;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--text)}
  .brief-blatt .ab-zeile{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
  .brief-blatt .ab-zeile .ab-t{font-size:14.5px;font-weight:700;line-height:1.35;min-width:0}
  .brief-blatt .ab-zeile .ab-z{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
  .brief-blatt .ab-zeile .ab-s{grid-column:1/-1;font-size:13px;line-height:1.45;color:var(--muted)}
  @media (min-width:1000px){ #app>.topbar .ver-tag{top:6px;right:24px} }
  body.as-voll .ju-marke{font-size:11px;letter-spacing:.32em;font-weight:800;color:var(--ju-muted);text-transform:uppercase;margin-top:4px}
  body.as-voll .ju-marke b{color:rgb(var(--ju-ink));text-shadow:0 0 14px rgba(var(--ju-ink),.7)}
  body.as-voll .tabbar,body.as-voll #unten-blur{display:none!important}
  body.as-voll .topbar{display:none!important}
  .as-stimme{position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:14px;z-index:50;background:rgba(255,255,255,.06);color:#9fb3c0;border:1px solid rgba(95,160,180,.25);border-radius:12px;padding:6px 10px;font-size:12px;-webkit-appearance:none;appearance:none}
  .as-zurueck{position:fixed;top:calc(env(safe-area-inset-top) + 10px);right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:16px;z-index:50}
  #screen-assistent{padding-top:calc(env(safe-area-inset-top) + 8px)}
  /* 15.09.2026: kein Leer-Scrollen - Bildschirm ist genau so hoch wie das Fenster, nur der Verlauf scrollt */
  body.as-voll{overflow:hidden;height:100%}
  body.as-voll main{padding-bottom:0!important;overflow:hidden}
  body.as-voll #screen-assistent{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;box-sizing:border-box;padding-bottom:calc(env(safe-area-inset-bottom) + 6px)}
  body.as-voll #screen-assistent .as-verlauf{flex:1;min-height:0;max-height:none}
  body.as-voll #asProtokoll{max-height:22vh;overflow-y:auto}
  .as-orb{width:290px;height:290px;cursor:pointer}
  .as-mic{width:56px;height:56px;margin-top:-8px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(95,160,180,.35);transition:transform .15s}
  .as-mic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .as-mic.an{background:#dc2626;box-shadow:0 0 0 10px rgba(220,38,38,.18);animation:asPuls 1.6s ease-in-out infinite}
  @keyframes asPuls{0%,100%{box-shadow:0 0 0 8px rgba(220,38,38,.16)}50%{box-shadow:0 0 0 18px rgba(220,38,38,.06)}}
  .as-status{font-size:13px;color:var(--muted);min-height:18px}.as-status.an{color:var(--green)}.as-status.warten{color:var(--amber)}.as-status.fehler{color:var(--red)}
  .as-verlauf{padding:6px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:46vh;overflow-y:auto}
  .hz-pkt svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .hz-legende .hz-pkt svg{width:11px;height:11px}
  /* Linien-Icons statt Emojis (11.09.2026): lassen sich einfaerben - gruen = erledigt, grau = offen, rot = Problem */
  .hz-pkt.ok{background:var(--green-soft);color:var(--green);filter:none;opacity:1;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent)}
  .hz-pkt.rot{filter:none;opacity:1}
  .hz-pkt.warn{background:var(--amber-soft);color:var(--amber)}
  .hz-pkt.rot{background:var(--red-soft);color:var(--red)}
  /* ---- Schnell-Zeile im Chat-Kopf ---- */
  .schnell{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
  .schnell button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--text2);min-height:54px}
  .schnell button .si{font-size:18px;line-height:1}
  .schnell button:active{background:var(--accent-soft)}
  .schnell button[disabled]{opacity:.4}
  /* ---- Allgemeines Blatt (Buchung, Details) ---- */
  #sheetBackdrop{position:fixed;inset:0;background:rgba(10,12,16,.38);z-index:59;opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease)}
  #sheetBackdrop.open{opacity:1;pointer-events:auto}
  #sheet{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;z-index:60;background:var(--glas-blatt);backdrop-filter:blur(34px) saturate(2);-webkit-backdrop-filter:blur(34px) saturate(2);border:1px solid var(--glas-kante);border-bottom:none;
    border-radius:26px 26px 0 0;padding:8px 14px calc(18px + var(--safe-b));box-shadow:var(--sh-3);transform:translateY(105%);transition:transform var(--t-slow) var(--ease);max-height:88vh;max-height:88dvh;overflow-y:auto}
  #sheet.open{transform:none}
  .sheet-griff{width:38px;height:5px;border-radius:99px;background:var(--line2);margin:4px auto 10px}
  .sheet-titel{font-weight:800;font-size:17px;letter-spacing:-.01em;margin:2px 2px 10px;display:flex;align-items:center;justify-content:space-between}
  .sheet-titel .btn{padding:6px 12px;font-size:12.5px;min-height:32px}
  #sheetInhalt .info-grid{margin-top:4px}
  @media (min-width:1000px){ #sheet{left:auto;right:24px;bottom:24px;width:460px;border-radius:22px;border-bottom:1px solid var(--line);max-height:80vh} #sheetBackdrop{background:rgba(10,12,16,.18)} }
  /* ---- Suche als eigene Ebene ---- */
  #suche{position:fixed;inset:0;z-index:85;background:var(--bg);display:none;flex-direction:column}
  #suche.open{display:flex;animation:screenIn var(--t) var(--ease)}
  .such-kopf{display:flex;gap:10px;align-items:center;padding:calc(var(--safe-t) + 10px) 14px 10px;border-bottom:1px solid var(--line);background:var(--barbg);backdrop-filter:blur(18px)}
  .such-kopf .searchbar{flex:1;padding:0}
  .such-kopf .searchbar::before{left:14px}
  .such-kopf .abbr{color:var(--accent);font-weight:700;padding:8px 2px;flex:none}
  .such-inhalt{flex:1;overflow-y:auto;padding:6px 12px calc(20px + var(--safe-b))}
  .such-verlauf{display:flex;flex-wrap:wrap;gap:7px;padding:10px 4px}
  .such-verlauf .chip{font-weight:600}
  .such-tipp{padding:24px 14px;text-align:center;color:var(--muted2);font-size:13px;line-height:1.6}
  kbd{font:inherit;font-size:11px;padding:1px 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;background:var(--card);color:var(--muted)}
  @media (min-width:1000px){ #suche{left:50%;top:60px;bottom:auto;transform:translateX(-50%);width:640px;max-height:min(70vh,720px);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-3);overflow:hidden}
    .such-kopf{padding:12px 14px}
    #sucheBackdrop{position:fixed;inset:0;z-index:84;background:rgba(10,12,16,.28)} }
  #sucheBackdrop{display:none} #sucheBackdrop.open{display:block}
  .conv.tast{outline:2px solid var(--accent);outline-offset:-2px}
  /* ---- Ladestrich unter der Kopfleiste ---- */
  #ladebalken{position:fixed;left:0;right:0;top:0;height:3px;z-index:25;pointer-events:none;opacity:0;transition:opacity var(--t)}
  #ladebalken.an{opacity:1}
  #ladebalken::before{content:'';position:absolute;top:0;bottom:0;width:38%;border-radius:99px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:lauf 1.1s var(--ease-io) infinite}
  @keyframes lauf{from{left:-40%}to{left:100%}}
  #syncInfo.fehler{color:var(--red);font-weight:700}
  /* ---- Kalender & Preise (Channex, 16.10.2026) ---- */
  #screen-preise .pr-kopf{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 14px}
  #screen-preise select,#screen-preise input{font:inherit;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--text)}
  #screen-preise .pr-stand{margin:0 14px 8px;font-size:12.5px;color:var(--muted)}
  #screen-preise .pr-stand b{color:var(--text2)}
  .pr-monat{display:flex;align-items:center;justify-content:space-between;margin:6px 14px}
  .pr-monat strong{font-size:15px}
  .pr-raster{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 14px;user-select:none;-webkit-user-select:none}
  .pr-wt{font-size:11px;color:var(--muted2);text-align:center;padding:2px 0}
  .pr-tag{min-height:58px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:4px 5px;display:flex;flex-direction:column;gap:1px;cursor:pointer;position:relative;font-size:11px;line-height:1.25}
  .pr-tag .n{font-weight:700;font-size:12px;color:var(--text2)}
  .pr-tag .p{font-weight:800;font-size:12.5px;color:var(--text)}
  .pr-tag .m{color:var(--muted)}
  .pr-tag.leer{visibility:hidden}
  .pr-tag.alt{opacity:.38;cursor:default}
  .pr-tag.belegt{background:var(--accent-soft2);border-color:var(--accent)}
  .pr-tag.zu{background:var(--red-soft);border-color:var(--red)}
  .pr-tag.wahl{outline:2.5px solid var(--accent-ink);outline-offset:-1px}
  .pr-tag .offen{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
  .pr-tag .hand{position:absolute;top:2px;left:4px;font-size:10px;line-height:1}
  .pr-legende{display:flex;gap:12px;flex-wrap:wrap;margin:8px 14px;font-size:11.5px;color:var(--muted)}
  .pr-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
  .pr-form{margin:10px 14px;padding:14px}
  .pr-form .zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
  .pr-form label{font-size:12.5px;color:var(--text2);display:flex;flex-direction:column;gap:3px}
  .pr-form input{width:110px}
  .pr-hinweis{font-size:12px;color:var(--muted);margin-top:6px}
  #screen-preise input[type=date]{width:150px}
  #screen-preise input#prBGast{width:170px}
  .pr-tag.app{background:var(--accent-soft2);border-color:var(--accent-ink);border-style:dashed}
  /* ---- Kalender: kurze Lücken ---- */
  .kalluecke{position:absolute;top:12px;height:20px;border:1.5px dashed var(--amber);border-radius:8px;color:var(--amber);font-size:10px;font-weight:800;line-height:17px;text-align:center;z-index:1;background:var(--amber-soft);overflow:hidden;white-space:nowrap}
  /* ---- Einstellungen in Gruppen ---- */
  details.set-gruppe{margin:10px 12px 0}
  details.set-gruppe>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 4px 6px;font-size:16px;font-weight:800;letter-spacing:-.01em;-webkit-user-select:none;user-select:none}
  details.set-gruppe>summary::-webkit-details-marker{display:none}
  details.set-gruppe>summary .chev{margin-left:auto;color:var(--muted2);transition:transform var(--t)}
  details.set-gruppe[open]>summary .chev{transform:rotate(90deg)}
  details.set-gruppe>summary small{font-weight:500;color:var(--muted2);font-size:12px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  details.set-gruppe .section-title{padding-left:6px;padding-right:6px}
  details.set-gruppe .set-row,details.set-gruppe details.hint,details.set-gruppe .kb-apt{margin-left:0;margin-right:0}
  /* ---- Übergänge ---- */
  @media (max-width:999px){ #screen-detail.active{animation:slideIn .3s var(--ease)} }
  @keyframes slideIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  .msg.mitte{border-radius:18px}
  .msg.guest.mitte,.msg.guest.oben{border-bottom-left-radius:6px} .msg.guest.mitte,.msg.guest.unten{border-top-left-radius:6px}
  .msg.host.mitte,.msg.host.oben{border-bottom-right-radius:6px} .msg.host.mitte,.msg.host.unten{border-top-right-radius:6px}
  /* ---- Offline-Leiste & Update-Hinweis ---- */
  #offlineHinweis{position:fixed;top:calc(var(--safe-t) + 66px);left:50%;transform:translateX(-50%) translateY(-6px);z-index:60;background:var(--amber);color:#fff;font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:999px;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t) var(--ease);white-space:nowrap}
  #offlineHinweis.an{opacity:1;transform:translateX(-50%)}
  #updateHinweis{position:fixed;left:12px;right:12px;bottom:calc(var(--tab-h) + 22px + var(--safe-b));z-index:90;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:12px 16px;border-radius:14px;box-shadow:var(--sh-3);text-align:center;cursor:pointer;max-width:600px;margin:0 auto}

  /* ================= Mac / großer Bildschirm =================
     Ab 1000 px: Seitenleiste links, Liste und Chat nebeneinander. */
  @media (min-width:1000px){
    html,body{height:100%;overflow:hidden}
    #app{max-width:none;height:100vh;display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"seite kopf" "seite inhalt"}
    #app>.topbar{grid-area:kopf;padding:14px 24px;min-height:66px}
    #app>main{grid-area:inhalt;padding-bottom:0;min-height:0;overflow:hidden;display:grid}
    #app>.tabbar{grid-area:seite;position:static;max-width:none;margin:0;flex-direction:column;align-items:stretch;gap:3px;padding:18px 12px;height:auto;
      border:none;border-right:1px solid var(--line);border-radius:0;background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
    #app>.tabbar::before{content:'JUPAS°';display:block;font-weight:800;letter-spacing:.14em;font-size:11px;color:var(--muted);padding:2px 14px 14px}
    #app>.tabbar .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 14px;border-radius:13px;font-size:14.5px;position:relative;font-weight:650}
    #app>.tabbar .tab .ico svg{width:21px;height:21px}
    #app>.tabbar .tab.active{background:var(--card);color:var(--accent-ink);box-shadow:var(--sh-1);font-weight:800}
    #app>.tabbar .tbadge{position:static;margin-left:auto;box-shadow:none}
    #app>.tabbar .tbadge.tbereit{margin-left:6px}
    #app>main>.screen{overflow-y:auto;min-height:0;height:100%;animation:none}
    #app[data-view="inbox"]>main,#app[data-view="detail"]>main{grid-template-columns:400px 1fr}
    #app[data-view="inbox"] #screen-inbox,#app[data-view="detail"] #screen-inbox{display:block;grid-column:1;grid-row:1;border-right:1px solid var(--line)}
    #app[data-view="detail"] #screen-detail{display:block;grid-column:2;grid-row:1;background:var(--bg)}
    #app[data-view="inbox"] #screen-detail{display:none}
    #app[data-view="inbox"]>main::after{content:"Chat links auswählen";grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:14px}
    #app>main>.screen.active:not(#screen-inbox):not(#screen-detail):not(#screen-kalender){grid-column:1 / -1;grid-row:1;max-width:1100px;width:100%;margin:0 auto;padding:0 8px}
    #app>main>#screen-kalender.active{grid-column:1 / -1;grid-row:1;width:100%;max-width:none;padding:0 18px}
    #app>main>#screen-kalender.active .kalscroll{max-height:calc(100vh - 190px)}
    @media (min-width:1500px){ #app .kalzelle,#app .kalhead .kaltag,#app .kalfuss .kaltag{width:52px} }
    #app[data-view="detail"] .backbtn{display:none}
    #app[data-view="detail"] #titleBlock{display:flex!important}
    .conv.aktiv{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),var(--sh-1)}
    .msg{max-width:min(72%,640px)}
    #mehrMenu{left:262px;right:auto;bottom:18px;width:420px;border-radius:22px;border-bottom:1px solid var(--line);transform:translateY(12px) scale(.98);opacity:0;pointer-events:none;transition:transform var(--t) var(--ease),opacity var(--t)}
    #mehrMenu.open{transform:none;opacity:1;pointer-events:auto}
    #mehrBackdrop{background:transparent;backdrop-filter:none}
    .swipe .sw-akt{display:none}
    .toast{bottom:28px}
    #updateHinweis{left:auto;right:24px;bottom:24px;max-width:420px}
    #offlineHinweis{top:auto;bottom:24px;left:auto;right:24px;transform:none}
    #offlineHinweis.an{transform:none}
  }

  /* ==========================================================================
     Optik-Schicht „Entity + Apple-Glas" (15.09.2026)
     Liegt ueber allen Regeln: tauscht Tokens (hell + dunkel), legt ein leises,
     langsam atmendes Licht hinter die App (kalt-blaues Leuchten wie die Entitaet
     in Mission Impossible), macht Flaechen zu Glas (durchscheinend, Lichtkante
     oben, weicher Schatten). Klassennamen und Logik bleiben unveraendert.
     ========================================================================== */
  :root{
    --bg:#eef1f5; --bg2:#e7ebf0;
    --card:rgba(255,255,255,.74); --card2:rgba(255,255,255,.52); --card3:rgba(23,26,31,.06);
    --barbg:rgba(238,241,245,.55); --tabbg:rgba(255,255,255,.34);
    --glas-kante:rgba(255,255,255,.85); --glas-licht:rgba(255,255,255,.9); --glas-blatt:rgba(240,243,247,.78); --glas-knopf:rgba(255,255,255,.62);
    --glas-rand:rgba(255,255,255,.7); --glas-rand2:rgba(23,26,31,.07);
    --line:rgba(23,26,31,.085); --line2:rgba(23,26,31,.15);
    --text:#14181d; --text2:#3b424b; --muted:#5f6772; --muted2:#8f97a3;
    --accent:#2f8ea9; --accent2:#3fa3bf; --accent-ink:#1f6d84;
    --accent-soft:rgba(47,142,169,.12); --accent-soft2:rgba(47,142,169,.22);
    --host-a:#3391ab; --host-b:#49a9c2;
    --leucht:rgba(76,190,222,.28); --leucht2:rgba(140,120,230,.14);
    --sh-1:0 1px 1px rgba(23,26,31,.03),0 4px 14px rgba(23,26,31,.05);
    --sh-2:0 2px 6px rgba(23,26,31,.05),0 14px 34px rgba(23,26,31,.09);
    --sh-3:0 8px 22px rgba(23,26,31,.12),0 30px 70px rgba(23,26,31,.18);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#05080c; --bg2:#090d13;
      --card:rgba(20,27,36,.66); --card2:rgba(255,255,255,.055); --card3:rgba(255,255,255,.09);
      --barbg:rgba(5,8,12,.5); --tabbg:rgba(18,26,36,.36);
      --glas-kante:rgba(255,255,255,.14); --glas-licht:rgba(255,255,255,.13); --glas-blatt:rgba(10,14,20,.8); --glas-knopf:rgba(30,40,52,.6);
      --glas-rand:rgba(255,255,255,.09); --glas-rand2:rgba(255,255,255,.05);
      --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.14);
      --text:#e9eff4; --text2:#c3ccd6; --muted:#8e9aa8; --muted2:#63707e;
      --accent:#7fd6ee; --accent2:#9be3f4; --accent-ink:#aee9f8;
      --accent-soft:rgba(127,214,238,.14); --accent-soft2:rgba(127,214,238,.26);
      --host-a:#1f6f88; --host-b:#2f8faa;
      --leucht:rgba(70,190,230,.27); --leucht2:rgba(120,90,220,.15);
      --green:#3fc47c; --amber:#f5ac3a; --red:#f56b6b;
      --sh-1:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);
      --sh-2:0 2px 8px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.45);
      --sh-3:0 8px 24px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.6);
    }
    .kalzelle.we{background:rgba(255,255,255,.03)!important}
  }
  /* Licht hinter der App: zwei weiche Leuchtflecken, atmen ganz langsam */
  body::before{content:'';position:fixed;inset:-25% -20%;z-index:-1;pointer-events:none;
    background:
      radial-gradient(42% 34% at 18% 12%,var(--leucht),transparent 70%),
      radial-gradient(38% 30% at 86% 78%,var(--leucht2),transparent 70%),
      radial-gradient(60% 40% at 55% 105%,var(--accent-soft),transparent 70%);
    animation:atmen 26s ease-in-out infinite alternate;will-change:transform;transform:translateZ(0)}
  @keyframes atmen{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.08)}}
  @media (min-width:1000px){ body::before{inset:-10%} }
  /* Flaechen = Glas: durchscheinend, Lichtkante oben, feiner Rand, weicher Schatten */
  .card,.set-row,.conv,.heute-block,.heute-karte,.kb-apt,.task-card,.info-card,.ki,.sugg,.kz-box,.karte-weiss,
  .bewkarte-k,.bewkachel,.bewstandort,.wartung-block,.kalscroll,.sk,.msg.guest{
    border-color:var(--glas-rand2);
    box-shadow:inset 0 1px 0 var(--glas-rand),var(--sh-1)}
  /* Wisch-Aktionen (Anrufen/Erledigt) liegen hinter der Glas-Karte: erst sichtbar, wenn gezogen wird */
  .swipe{background:transparent}
  .swipe .sw-akt{opacity:0;transition:opacity .25s ease .22s}
  .swipe.zieht .sw-akt{opacity:1;transition:none}
  .conv.unread,.conv.aktiv{box-shadow:inset 0 1px 0 var(--glas-rand),inset 0 0 0 1px var(--accent-soft),var(--sh-1)}
  /* Knoepfe: Glas; Haupt-Knopf leuchtet leicht */
  .btn{background:var(--card2);border-color:var(--glas-rand2);box-shadow:inset 0 1px 0 var(--glas-rand);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
  .btn.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:transparent;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 14px var(--accent-soft2),0 0 0 .5px rgba(0,0,0,.06)}
  @media (prefers-color-scheme: dark){ .btn.primary{color:#04161c;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 22px rgba(127,214,238,.28)} }
  .chip,.sugg-chip,.tmpl-btn,.seg,.kal-art{backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-color:var(--glas-rand2)}
  .chip{box-shadow:inset 0 1px 0 var(--glas-rand)}
  .chip.active,.chip.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px var(--accent-soft2)}
  input,textarea,select,.u-in,.ki-direct input{border-color:var(--glas-rand2);box-shadow:inset 0 1px 0 var(--glas-rand)}
  /* Kopf + Fussleiste: Glas mit Lichtkante */
  .topbar{border-bottom:none}
  .topbar::after{background:linear-gradient(90deg,transparent,var(--line2) 30%,var(--line2) 70%,transparent);opacity:1}
  .composer{border-top-color:var(--glas-rand2)}
  .tab.active .ico{filter:drop-shadow(0 0 6px var(--accent-soft2))}
  @media (prefers-color-scheme: dark){ .tab.active .ico{filter:drop-shadow(0 0 8px rgba(127,214,238,.55))} .topbar .logo span{text-shadow:0 0 12px rgba(127,214,238,.6)} }
  /* Gast-Nachrichten als Glas, eigene Nachrichten mit leichtem Schimmer */
  .msg.host{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px var(--accent-soft)}
  .day-sep{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  /* Abschnitts-Titel: ruhiger, mit Leuchtpunkt */
  .section-title{letter-spacing:.11em;font-weight:700}
  /* Blaetter/Menues (Sheet, Aktionsmenue, Modal): Glas */
  .actmenu{background:var(--glas-blatt);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border-color:var(--glas-rand2);box-shadow:inset 0 1px 0 var(--glas-rand),var(--sh-3)}
  @media (prefers-reduced-motion: reduce){ body::before{animation:none} }

  /* ==========================================================================
     iOS-27-Schicht (15.09.2026) – Liquid Glass wie im iPhone-Update:
     1) dunkle Aussenkante + hellere Glanzkante an jedem Glas-Element (Tiefe),
     2) Inhalt unter den Leisten wird staerker zerstreut (mehr Blur, mehr Ton),
     3) einheitliche Eckradien, 4) beim Scrollen „gefrostete" einheitliche Kopfleiste,
     5) Glas-Intensitaet einstellbar: klar · normal · getoent (Einstellungen).
     ========================================================================== */
  :root{--radius:18px; --radius-lg:24px; --radius-sm:12px; --radius-xs:9px;
    --g-kante-dunkel:rgba(23,26,31,.10); --g-glanz:rgba(255,255,255,1); --g-ton:1}
  @media (prefers-color-scheme: dark){ :root{--g-kante-dunkel:rgba(0,0,0,.55); --g-glanz:rgba(255,255,255,.22)} }
  /* Glas-Intensitaet */
  html[data-glas="klar"]{--tabbg:rgba(255,255,255,.18); --barbg:rgba(238,241,245,.35); --glas-knopf:rgba(255,255,255,.4)}
  html[data-glas="getoent"]{--tabbg:rgba(255,255,255,.72); --barbg:rgba(238,241,245,.86); --glas-knopf:rgba(255,255,255,.85); --card:rgba(255,255,255,.92)}
  @media (prefers-color-scheme: dark){
    html[data-glas="klar"]{--tabbg:rgba(18,26,36,.2); --barbg:rgba(5,8,12,.3); --glas-knopf:rgba(30,40,52,.4)}
    html[data-glas="getoent"]{--tabbg:rgba(18,26,36,.8); --barbg:rgba(5,8,12,.86); --glas-knopf:rgba(30,40,52,.9); --card:rgba(20,27,36,.92)}
  }
  @media (prefers-reduced-transparency: reduce){ :root{--tabbg:rgba(255,255,255,.9); --barbg:rgba(238,241,245,.94)} }
  /* 1) Tiefe: dunkle Aussenkante + hellere Glanzkante */
  .iconbtn,.btn,.chip,.sugg-chip,.tmpl-btn,.expandbtn,.actmenu,#sheet{
    box-shadow:0 0 0 .5px var(--g-kante-dunkel),inset 0 1px 0 var(--g-glanz),var(--sh-1)}
  .btn.primary{box-shadow:0 0 0 .5px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.6),0 4px 14px var(--accent-soft2)}
  .card,.set-row,.conv,.heute-block,.heute-karte,.kb-apt,.task-card,.info-card,.ki,.sugg,.kz-box,.karte-weiss,.bewkarte-k,.bewkachel,.bewstandort,.wartung-block,.kalscroll,.msg.guest{
    box-shadow:0 0 0 .5px var(--g-kante-dunkel),inset 0 1px 0 var(--g-glanz),var(--sh-1)}
  .tabbar{box-shadow:0 0 0 .5px var(--g-kante-dunkel),inset 0 1.5px 0 var(--g-glanz),inset 0 -1px 0 rgba(0,0,0,.08),inset 1px 0 0 rgba(255,255,255,.3),inset -1px 0 0 rgba(255,255,255,.18),
      inset 0 12px 24px -14px rgba(255,255,255,.35),0 2px 4px rgba(23,26,31,.06),0 14px 36px rgba(23,26,31,.18)}
  @media (prefers-color-scheme: dark){ .tabbar{box-shadow:0 0 0 .5px rgba(0,0,0,.7),inset 0 1.5px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 14px 28px -14px rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.55)} }
  /* 2) Inhalt unter den Leisten staerker zerstreut */
  .tabbar{backdrop-filter:blur(60px) saturate(2.2) brightness(1.04);-webkit-backdrop-filter:blur(60px) saturate(2.2) brightness(1.04)}
  .topbar,.composer{backdrop-filter:blur(44px) saturate(2);-webkit-backdrop-filter:blur(44px) saturate(2)}
  /* 4) Gefrostete einheitliche Kopfleiste, sobald Inhalt darunter scrollt */
  .topbar{transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  .topbar.kompakt{background:color-mix(in srgb,var(--bg) 78%,transparent);box-shadow:0 1px 0 var(--line),0 8px 24px -12px rgba(23,26,31,.18)}
  @media (prefers-color-scheme: dark){ .topbar.kompakt{box-shadow:0 1px 0 var(--line),0 8px 24px -12px rgba(0,0,0,.6)} }
  .topbar.kompakt::before{opacity:0}
  /* 3) Eckradien vereinheitlichen */
  .iconbtn{border-radius:14px} .btn{border-radius:14px} input,textarea,select,.u-in,.ki-direct input{border-radius:14px}
  .msg{border-radius:20px}
  /* Seitenleiste (Mac): farbiges Icon nur beim aktiven Bereich */
  @media (min-width:1000px){ #app>.tabbar .tab .ico{color:var(--muted)} #app>.tabbar .tab.active .ico{color:var(--accent)} #app>.tabbar{padding-top:calc(18px + var(--safe-t))} }
  /* Glas-Wahl in den Einstellungen */
  .glas-wahl{display:flex;gap:4px;background:var(--card3);border-radius:12px;padding:3px}
  .glas-wahl button{flex:1;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:700;color:var(--muted)}
  .glas-wahl button.on{background:var(--card);color:var(--text);box-shadow:0 0 0 .5px var(--g-kante-dunkel),var(--sh-1)}

/* ===== Block 2 (id="jm-motion") ===== */

/* ==========================================================================
   JUPAS° Motion 1.0 – gemeinsame Bewegungssprache (30.09.2026)
   Gleich in Website, App, Finanz-Dashboard und Buchhaltung. Tokens zuerst,
   dann wenige Bausteine, die alle vier Oberflächen nutzen.
   Regeln: nur transform/opacity/clip bewegen · nichts wartet auf eine
   Animation · Hintergrund-Aktualisierungen spielen keine Eintritte ab ·
   prefers-reduced-motion = keine Bewegung, nur Zustandswechsel.
   ========================================================================== */
:root{
  /* Dauer */
  --jm-t1:.12s; --jm-t2:.2s; --jm-t3:.32s; --jm-t4:.56s; --jm-t5:.9s;
  /* Kurven: Eintritt (expo-out), Austritt, Ortswechsel */
  --jm-out:cubic-bezier(.16,1,.3,1);
  --jm-in:cubic-bezier(.64,0,.78,0);
  --jm-io:cubic-bezier(.65,0,.35,1);
  /* Federn (Fallback als Bézier, echte Feder per linear() weiter unten).
     spring = Pop mit ~9 % Überschwingen (Toasts, Badges, Knöpfe),
     soft = weich ohne sichtbares Überschwingen (Blätter, Ansichten),
     snappy = knackig mit ~2,5 % (Reiter-Pillen, Indikatoren). */
  --jm-spring:cubic-bezier(.34,1.56,.64,1); --jm-spring-d:.63s;
  --jm-soft:cubic-bezier(.2,.9,.25,1);      --jm-soft-d:.42s;
  --jm-snappy:cubic-bezier(.3,1.25,.5,1);   --jm-snappy-d:.4s;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --jm-spring:linear(0,0.028,0.099,0.2,0.317,0.44,0.561,0.674,0.775,0.862,0.934,0.991,1.034,1.064,1.083,1.092,1.095,1.091,1.084,1.074,1.063,1.052,1.04,1.03,1.02,1.012,1.005,1,0.996,0.994,0.992,0.991,0.991,0.991,0.992,0.993,0.994,0.995,0.996,0.997,1);
    --jm-soft:linear(0,0.01,0.036,0.074,0.121,0.174,0.23,0.287,0.345,0.402,0.456,0.509,0.558,0.604,0.647,0.687,0.723,0.757,0.787,0.814,0.838,0.86,0.879,0.896,0.911,0.925,0.936,0.946,0.955,0.963,0.969,0.975,0.98,0.984,0.987,0.99,0.992,0.994,0.996,0.997,1);
    --jm-snappy:linear(0,0.017,0.063,0.128,0.205,0.289,0.375,0.459,0.539,0.615,0.683,0.744,0.798,0.845,0.885,0.918,0.946,0.968,0.986,0.999,1.009,1.016,1.021,1.024,1.025,1.025,1.025,1.023,1.021,1.019,1.017,1.015,1.013,1.011,1.009,1.007,1.006,1.005,1.004,1.003,1);
  }
}

/* Bausteine */
@keyframes jm-shake{0%,100%{translate:0 0}15%{translate:-7px 0}30%{translate:6px 0}45%{translate:-4px 0}60%{translate:3px 0}75%{translate:-1px 0}}
@keyframes jm-shimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
/* Marken-Ring (das ° im Logo) als Ladeanzeige: der Bogen zeichnet sich, der Punkt atmet */
@keyframes jm-ring-draw{0%{stroke-dashoffset:48}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-48}}
@keyframes jm-ring-dot{0%,100%{scale:.72}50%{scale:1}}
@keyframes jm-ring-spin{to{rotate:360deg}}
.jm-ring{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em}
.jm-ring svg{width:100%;height:100%;overflow:visible;animation:jm-ring-spin 1.6s linear infinite}
.jm-ring path{stroke-dasharray:48 48;animation:jm-ring-draw 1.6s var(--jm-io) infinite}
.jm-ring circle{transform-box:fill-box;transform-origin:center;animation:jm-ring-dot 1.6s var(--jm-io) infinite}
.jm-shake{animation:jm-shake .46s var(--jm-out)}
.jm-ghost{position:fixed!important;margin:0!important;pointer-events:none!important;z-index:9990;contain:layout paint}
.jm-ghost *{animation:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){
  .jm-ring svg,.jm-ring path,.jm-ring circle{animation-duration:3.2s}
  .jm-shake{animation:none}
}
/* ==========================================================================
   JUPAS° Motion 1.0 – App-Schicht (01.10.2026)
   Ergänzt nur: keine vorhandene Regel wird entfernt, Klassen und IDs bleiben.
   Neue Klassen: jm-geht (alter Bildschirm als fester Überzug während des
   Wechsels), jm-ohne-ein (kein screenIn), jm-alt (Nachricht ohne Eintritt),
   jm-frisch (kurzes Aufleuchten eines Chats), jm-dimmer (Abdunklung).
   ========================================================================== */

/* ---- Navigation (nur Handy; der Mac zeigt zwei Spalten ohne Wechsel) ---- */
@media (max-width:999px){
  #app>main>.screen.jm-geht{display:block!important;position:fixed!important;margin:0!important;z-index:9;
    pointer-events:none!important;overflow:hidden!important;animation:none!important;
    background-color:var(--bg);background-repeat:no-repeat;box-sizing:border-box}
  #app>main>.screen.jm-geht.jm-schatten{box-shadow:-14px 0 34px -10px rgba(10,14,20,.28),-1px 0 0 rgba(10,14,20,.05)}
  #app>main>.screen.jm-geht.jm-unten{z-index:-1}
  /* Während ein Bereich von rechts hereingleitet: kein waagrechter Überlauf (sonst zoomt
     der Handy-Browser die Seite kurz heraus). clip erzeugt keinen Scroll-Container,
     sticky bleibt intakt; feste Elemente (Leisten, Überzüge) sind nicht betroffen. */
  #app>main.jm-klemme{overflow-x:clip}
  #app>main>.screen.jm-ohne-ein{animation:none!important}
  #app>main>.screen.jm-zieht{animation:none!important}
  #app>main>.screen.jm-vorschau{display:block!important;position:fixed!important;margin:0!important;z-index:-1;
    pointer-events:none!important;overflow:hidden!important;animation:none!important}
  #app>.tabbar.jm-vorschau-tab{display:flex!important}
}
.jm-karte-geist{position:absolute;left:0;right:0;z-index:60;pointer-events:none;opacity:0;
  background-color:var(--bg);background-image:linear-gradient(var(--card),var(--card))}
.jm-dimmer{position:fixed;inset:0;z-index:8;pointer-events:none;background:rgba(10,14,20,.16)}
@media (prefers-color-scheme:dark){.jm-dimmer{background:rgba(0,0,0,.42)}}
/* Rand-Streifen fürs Wischen: waagrecht gehört er der Geste, senkrecht scrollt die Seite weiter (Gegenprüfung S1) */
.jm-rand{position:fixed;left:0;width:16px;z-index:12;display:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:transparent}
body.composing .jm-rand{display:none!important}

/* ---- Nachrichten: alte Blasen stehen still, nur neue bewegen sich (per JS) ---- */
.msg.jm-alt{animation:none!important}

/* ---- Inbox: kurzes Aufleuchten eines Chats mit neuer Nachricht ---- */
.swipe.jm-oben{z-index:2}
.swipe.jm-frisch::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft);opacity:0;animation:jm-frisch 1.7s var(--jm-out) .12s both}
@keyframes jm-frisch{0%{opacity:0}14%{opacity:1}100%{opacity:0}}

/* ---- Blätter: weich federnd auf, schneller und beschleunigend zu ----
   Getrennte Übergänge für offen/zu; das Ziehen zum Schließen setzt weiterhin
   eigene Inline-Werte und fällt beim Loslassen auf diese Kurven zurück. */
#sheet{transition:transform .26s var(--jm-in)}
#sheet.open{transition:transform .5s var(--jm-soft)}
#sheetBackdrop{transition:opacity .26s var(--jm-in)}
#sheetBackdrop.open{transition:opacity .36s var(--jm-out)}
@media (max-width:999px){
  #mehrMenu{transition:transform .26s var(--jm-in)}
  #mehrMenu.open{transition:transform .5s var(--jm-soft)}
  #mehrBackdrop{transition:opacity .26s var(--jm-in)}
  #mehrBackdrop.open{transition:opacity .36s var(--jm-out)}
}
@media (min-width:1000px){
  #mehrMenu{transition:transform .2s var(--jm-in),opacity .16s linear}
  #mehrMenu.open{transition:transform .42s var(--jm-snappy),opacity .16s linear}
}

/* ---- Toast: federt herein (Zentrierung per translateX bleibt), geht zügig ---- */
.toast{transform:translateX(-50%) translateY(14px) scale(.94);transition:opacity .2s var(--jm-in),transform .24s var(--jm-in)}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);transition:opacity .14s var(--jm-out),transform .56s var(--jm-spring)}

/* ---- Aktionsmenü (⋯): Feder statt linearem Aufploppen ---- */
@keyframes jm-menuAuf{from{opacity:0;scale:.86;translate:0 -8px}to{opacity:1;scale:1;translate:0 0}}
.actmenu{animation:jm-menuAuf .5s var(--jm-spring) both}

/* ---- Druck-Rückmeldung für Bedienelemente, die bisher keine hatten ----
   Schnell hinein (80 ms), federnd zurück. Nur scale/opacity/Hintergrund. */
.linkbtn,.sugg-chip,.tmpl-btn,.tplpick,.micbar,.expandbtn,.kal-art button,.kz-pfeil,.kz-mehr,.aptchip,.termin-chip,.task-prio,.smart .sbtn,.glas-wahl button{
  transition:scale .5s var(--jm-spring),opacity .2s ease,background-color .2s ease}
.seg button{transition:scale .5s var(--jm-spring),background var(--t-fast),color var(--t-fast)}
.as-mic{transition:scale .5s var(--jm-spring),transform .15s}
.linkbtn:active,.sugg-chip:active,.tmpl-btn:active,.tplpick:active,.micbar:active,.expandbtn:active,.kal-art button:active,.kz-pfeil:active,
.kz-mehr:active,.aptchip:active,.termin-chip:active,.task-prio:active,.glas-wahl button:active,.seg button:active,.as-mic:active{
  scale:.96;transition:scale .08s var(--jm-out),opacity .08s ease,background-color .08s ease,background .08s ease,color .08s ease}
.smart .sbtn:active{scale:.98;transition:scale .08s var(--jm-out),opacity .08s ease,background-color .08s ease}

/* ---- Behobene Kleinigkeiten ----
   1) Mac: Die Suche nutzte screenIn (transform) und verlor dabei ihr translateX(-50%) –
      das Feld sprang beim Öffnen. Jetzt über die Einzel-Eigenschaften translate/scale. */
@keyframes jm-sucheAuf{from{opacity:0;translate:0 -8px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@media (min-width:1000px){ #suche.open{animation:jm-sucheAuf .34s var(--jm-soft)} }
/* 2) Bewegung reduzieren: Die Regel traf #syncInfo::before statt des pulsierenden ::after.
      Endlos-Animationen mit 0,001 s flackerten dadurch zufällig (Live-Punkt, Ladestrich,
      Platzhalter-Schimmer, Aufnahme-Welle). Jetzt ruhig; Lade-Kreisel drehen langsam. */
@media (prefers-reduced-motion:reduce){
  /* Eintritte ohne Bewegung: sonst steht der neue Bereich (.001s-Animation ab Deckkraft 0) ein bis zwei Bilder lang leer da */
  #app>main>.screen,#app>main>#screen-detail.active,.msg,#suche.open{animation:none!important}
  #syncInfo::after{animation:none!important;opacity:0!important}
  #ladebalken::before{animation:none!important;left:0!important;width:100%!important;opacity:.55}
  .sk-b{animation:none!important}
  .recdot::after{animation:none!important;opacity:.7}
  .as-mic.an{animation:none!important}
  .spinring,.ptr-dot.spin svg{animation-duration:1.6s!important}
  .swipe.jm-frisch::after{animation:none!important;opacity:0}
  .actmenu{animation:none!important}
  .linkbtn:active,.sugg-chip:active,.tmpl-btn:active,.tplpick:active,.micbar:active,.expandbtn:active,.kal-art button:active,.kz-pfeil:active,
  .kz-mehr:active,.aptchip:active,.termin-chip:active,.task-prio:active,.glas-wahl button:active,.seg button:active,.as-mic:active,.smart .sbtn:active{scale:1}
}
/* Gegenpruefung S2 (01.10.2026): die ausblendende Reiterleiste nimmt beim Chat-Oeffnen keine Tipper mehr an */
#app>.tabbar.jm-vorschau-tab{pointer-events:none}
/* Mac: Auswahl-Pille gleitet in der Seitenleiste (der Zieleintrag zeigt seinen eigenen Hintergrund erst danach) */
.jm-mac-pille{position:absolute;margin:0;pointer-events:none;z-index:0;box-sizing:border-box}
@media (min-width:1000px){ #app>.tabbar .tab.jm-pille-ziel{background:transparent!important;box-shadow:none!important} }

/* ===== Block 3 (id="juna2") ===== */

/* ==========================================================================
   Juna 2.0 – die lebendige Concierge (02.10.2026)
   Darstellungsschicht für den Juna-Bildschirm (#screen-assistent). Alle Funktionen,
   IDs und Abläufe des Originals bleiben; aktiv nur mit der Klasse .ju2 (setzt
   juna2.js). Fehlt sie, gilt der alte Look.
   ========================================================================== */

#screen-assistent.ju2{
  --j2-bg:#edf2f5; --j2-bg2:#f7f8f9;
  --j2-text:#172026; --j2-text2:rgba(23,32,38,.80); --j2-muted:rgba(23,32,38,.56); --j2-dim:rgba(23,32,38,.38);
  --j2-p:47,112,136; --j2-p2:79,151,172; --j2-gold:232,181,74; --j2-warm:255,236,206;
  --j2-glas:rgba(255,255,255,.64); --j2-glas2:rgba(255,255,255,.82); --j2-rand:rgba(20,40,52,.08); --j2-glanz:rgba(255,255,255,.95);
  --j2-karte:rgba(255,255,255,.80);
  --j2-sh:0 18px 44px -20px rgba(16,44,60,.32); --j2-sh2:0 8px 22px -12px rgba(16,44,60,.26);
  --j2-feder:var(--jm-spring,cubic-bezier(.34,1.56,.64,1));
  --j2-weich:var(--jm-soft,cubic-bezier(.2,.9,.25,1));
  --j2-raus:var(--jm-out,cubic-bezier(.16,1,.3,1));
  --j2-rund:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  #screen-assistent.ju2{
    --j2-bg:#0b1317; --j2-bg2:#111b21;
    --j2-text:#edf2f4; --j2-text2:rgba(237,242,244,.84); --j2-muted:rgba(222,232,238,.56); --j2-dim:rgba(222,232,238,.36);
    --j2-p:127,190,208; --j2-p2:95,160,180; --j2-gold:240,196,96; --j2-warm:255,214,160;
    --j2-glas:rgba(255,255,255,.06); --j2-glas2:rgba(255,255,255,.10); --j2-rand:rgba(255,255,255,.09); --j2-glanz:rgba(255,255,255,.14);
    --j2-karte:rgba(255,255,255,.07);
    --j2-sh:0 22px 56px -22px rgba(0,0,0,.85); --j2-sh2:0 10px 28px -14px rgba(0,0,0,.7);
  }
}
html.juna-start,html.juna-start body{background:#edf2f5!important}
@media (prefers-color-scheme:dark){ html.juna-start,html.juna-start body{background:#0b1317!important} }
body.as-voll:has(#screen-assistent.ju2){background:#edf2f5!important}
@media (prefers-color-scheme:dark){ body.as-voll:has(#screen-assistent.ju2){background:#0b1317!important} }
body.as-voll:has(#screen-assistent.ju2)::before{opacity:0}

/* Bis die Schicht steht, nichts vom alten Aufbau zeigen (Sicherheitsnetz: nach 1,5 s doch) */
@keyframes ju2-spaet{from{visibility:hidden}to{visibility:visible}}
#screen-assistent:not(.ju2)>*{animation:ju2-spaet 0s linear 1.5s both}

/* ---- Grundgerüst ---- */
body.as-voll #screen-assistent.ju2{position:relative;padding:0!important;color:var(--j2-text);background:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate;overflow:hidden}
body.as-voll #screen-assistent.ju2>*{position:relative;z-index:1}
body.as-voll #screen-assistent.ju2>.ju2-kopf{z-index:4}
body.as-voll #screen-assistent.ju2>.ju2-buehne{z-index:2}
#screen-assistent.ju2 .ju2-alt{display:none!important}
#screen-assistent.ju2 button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
#screen-assistent.ju2 svg{display:block}

/* ---- Hintergrund: kühles Licht, warmer Scheinwerfer auf Juna ---- */
#screen-assistent.ju2 .ju2-licht{position:fixed!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,var(--j2-bg) 0%,var(--j2-bg2) 70%)}
#screen-assistent.ju2 .ju2-licht i{position:absolute;display:block;border-radius:50%;pointer-events:none}
#screen-assistent.ju2 .ju2-licht .l1{width:150vmax;height:120vmax;left:50%;top:-78vmax;margin-left:-75vmax;
  background:radial-gradient(closest-side,rgba(var(--j2-p2),.20),transparent 72%);animation:ju2-treiben 28s ease-in-out infinite alternate}
#screen-assistent.ju2 .ju2-licht .l2{width:90vmax;height:90vmax;right:-45vmax;bottom:-50vmax;
  background:radial-gradient(closest-side,rgba(var(--j2-gold),.12),transparent 72%)}
@keyframes ju2-treiben{from{transform:translate3d(-3vmax,0,0)}to{transform:translate3d(4vmax,2vmax,0)}}

/* ---- Kopf ---- */
#screen-assistent.ju2 .ju2-kopf{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;touch-action:none;
  padding:calc(env(safe-area-inset-top) + 6px) 14px 0;min-height:46px;z-index:4}
#screen-assistent.ju2 .ju2-links{justify-self:start;display:flex;align-items:center;min-width:0}
#screen-assistent.ju2 .ju2-rechts{justify-self:end;display:flex;align-items:center;gap:10px}
#screen-assistent.ju2 .ju-zurueck{position:static!important;display:inline-flex;align-items:center;gap:3px;height:36px;padding:0 14px 0 8px;
  border-radius:999px;background:var(--j2-glas);color:var(--j2-text);border:1px solid var(--j2-rand);
  box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh2);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  font-size:14px;font-weight:650;letter-spacing:0;transition:scale .5s var(--j2-feder)}
#screen-assistent.ju2 .ju-zurueck b{display:none}
#screen-assistent.ju2 .ju-zurueck svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
#screen-assistent.ju2 .ju-zurueck:active{scale:.94;transition:scale .08s var(--j2-raus)}
#screen-assistent.ju2 .ju-zurueck[hidden]{display:none!important}
html.juna-start #screen-assistent.ju2 .ju-zurueck{display:none!important}
#screen-assistent.ju2 .ju2-marke{font-family:var(--j2-rund);font-size:15px;font-weight:800;letter-spacing:.26em;padding-left:.26em;color:var(--j2-text);
  user-select:none;-webkit-user-select:none;display:flex;align-items:baseline}
#screen-assistent.ju2 .ju2-marke sup{font-size:13px;letter-spacing:0;margin-left:-.18em;color:rgb(var(--j2-gold));font-weight:800;top:-.1em}
#screen-assistent.ju2 .ju-ver{position:static!important;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--j2-dim);font-variant-numeric:tabular-nums}
#screen-assistent.ju2 .ju2-knopf{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--j2-text);
  background:var(--j2-glas);border:1px solid var(--j2-rand);box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh2);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);transition:scale .5s var(--j2-feder)}
#screen-assistent.ju2 .ju2-knopf svg{width:20px;height:20px;fill:currentColor}
#screen-assistent.ju2 .ju2-knopf:active{scale:.9;transition:scale .08s var(--j2-raus)}

/* ---- Bühne: Juna lebt hier ---- */
#screen-assistent.ju2 .ju2-buehne{flex:none;display:flex;flex-direction:column;align-items:center;z-index:2}
#screen-assistent.ju2 .ju2-platz{position:relative;width:100%;flex:none;transition:height .7s var(--j2-weich);touch-action:manipulation;
  height:clamp(170px,calc(100vh - 380px),470px);height:clamp(170px,calc(100dvh - 380px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),470px)}
#screen-assistent.ju2[data-modus="gespraech"] .ju2-platz{height:clamp(150px,25vh,270px);height:clamp(150px,25dvh,270px)}
#screen-assistent.ju2[data-modus="live"] .ju2-platz{height:clamp(210px,44vh,450px);height:clamp(210px,44dvh,450px)}
#screen-assistent.ju2:has(#asEingabe:focus)[data-modus] .ju2-platz{height:clamp(130px,20vh,210px);height:clamp(130px,20dvh,210px)}
#screen-assistent.ju2 .ju2-platz::before{content:"";position:absolute;left:50%;bottom:6%;width:min(560px,96%);height:78%;translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--j2-warm),.75),rgba(var(--j2-warm),0) 72%);opacity:.9;transition:opacity .8s ease}
@media (prefers-color-scheme:dark){ #screen-assistent.ju2 .ju2-platz::before{opacity:.22} }
#screen-assistent.ju2[data-z="hoert"] .ju2-platz::before,#screen-assistent.ju2[data-z="spricht"] .ju2-platz::before{opacity:1}
#screen-assistent.ju2 #ju2Figur{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;touch-action:none}
#screen-assistent.ju2 #ju2Figur:focus-visible{outline:2px solid rgba(var(--j2-p2),.6);outline-offset:-6px;border-radius:24px}
#screen-assistent.ju2 .ju2-ersatz{position:absolute;left:50%;bottom:4%;height:86%;translate:-50% 0;pointer-events:none;animation:ju2-atmen 3.8s ease-in-out infinite;transform-origin:50% 100%}
@keyframes ju2-atmen{0%,100%{scale:1 1}50%{scale:1.012 .99}}
/* Status */
#screen-assistent.ju2 #asStatus{display:inline-flex;align-items:center;gap:8px;margin:2px auto 0;min-height:30px;padding:0 13px 0 11px;border-radius:999px;
  font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--j2-text2);background:var(--j2-glas);border:1px solid var(--j2-rand);
  box-shadow:inset 0 1px 0 var(--j2-glanz);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);max-width:calc(100% - 32px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s ease,background-color .4s ease}
#screen-assistent.ju2 #asStatus::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:rgb(var(--j2-p2));box-shadow:0 0 0 3px rgba(var(--j2-p2),.18)}
#screen-assistent.ju2 #asStatus:empty{display:none}
#screen-assistent.ju2 #asStatus.an::before{background:#2fae74;box-shadow:0 0 0 3px rgba(47,174,116,.2);animation:ju2-puls 1.4s ease-in-out infinite}
#screen-assistent.ju2 #asStatus.warten::before{background:rgb(var(--j2-gold));box-shadow:0 0 0 3px rgba(var(--j2-gold),.22);animation:ju2-puls 1s ease-in-out infinite}
#screen-assistent.ju2 #asStatus.fehler{color:#d8433d}
#screen-assistent.ju2 #asStatus.fehler::before{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.2)}
@keyframes ju2-puls{0%,100%{scale:.75;opacity:.6}50%{scale:1.1;opacity:1}}
/* Gruß (leer) */
#screen-assistent.ju2 .ju2-gruss{text-align:center;margin:10px 18px 0;transition:opacity .45s var(--j2-raus),translate .55s var(--j2-weich)}
#screen-assistent.ju2 .ju2-gruss h2{margin:0;font-family:var(--j2-rund);font-size:26px;line-height:1.15;font-weight:750;letter-spacing:-.01em;color:var(--j2-text)}
#screen-assistent.ju2 .ju2-gruss p{margin:5px 0 0;font-size:15px;color:var(--j2-muted);font-weight:500}
#screen-assistent.ju2:not([data-modus="leer"]) .ju2-gruss{display:none}
/* Untertitel im Gespräch */
#screen-assistent.ju2 .ju2-untertitel{min-height:0;max-width:640px;margin:8px 22px 0;text-align:center;font-family:var(--j2-rund);font-size:19px;line-height:1.35;font-weight:650;
  color:var(--j2-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;opacity:0;translate:0 6px;transition:opacity .3s ease,translate .4s var(--j2-weich)}
#screen-assistent.ju2 .ju2-untertitel.an{opacity:1;translate:0 0}
#screen-assistent.ju2 .ju2-untertitel.du{color:var(--j2-muted);font-weight:600}
#screen-assistent.ju2:not([data-modus="live"]) .ju2-untertitel{display:none}

/* ---- Verlauf ---- */
body.as-voll #screen-assistent.ju2 #asVerlauf{flex:1;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:14px;padding:14px 16px 16px;scroll-padding-bottom:16px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 8px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 8px),transparent 100%)}
#screen-assistent.ju2 #asVerlauf::-webkit-scrollbar{width:0;height:0}
body.as-voll #screen-assistent.ju2[data-modus="leer"] #asVerlauf{flex:1 1 0;padding:0}
#screen-assistent.ju2 .ju2-m{display:flex;flex-direction:column;min-width:0}
#screen-assistent.ju2 .ju2-m.neu{animation:ju2-rein .55s var(--j2-weich) both}
@keyframes ju2-rein{from{opacity:0;translate:0 14px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
#screen-assistent.ju2 .ju2-m.du{align-self:flex-end;align-items:flex-end;max-width:84%}
#screen-assistent.ju2 .ju2-m.du .ju2-blase{padding:10px 15px;border-radius:22px 22px 7px 22px;font-size:16px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere;
  color:#fff;background:linear-gradient(160deg,rgb(79,151,172),rgb(55,126,150));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -14px rgba(40,110,135,.9)}
#screen-assistent.ju2 .ju2-zeit{font-size:11px;font-weight:600;color:var(--j2-dim);margin-top:5px;padding:0 6px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#screen-assistent.ju2 .ju2-m.ju{align-self:flex-start;max-width:94%}
#screen-assistent.ju2 .ju2-m.ju .ju2-wer{display:flex;align-items:center;gap:7px;margin:0 0 5px 2px;font-size:12px;font-weight:750;color:var(--j2-muted)}
#screen-assistent.ju2 .ju2-m.ju .ju2-wer img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:rgba(var(--j2-warm),.55);box-shadow:0 0 0 1px var(--j2-rand)}
#screen-assistent.ju2 .ju2-m.ju .ju2-wer .ju2-zeit{margin:0 0 0 2px;padding:0;font-weight:600}
#screen-assistent.ju2 .ju2-m.ju .ju2-karte{padding:11px 15px;border-radius:7px 22px 22px 22px;font-size:16px;line-height:1.5;color:var(--j2-text);overflow-wrap:anywhere;
  background:var(--j2-karte);border:1px solid var(--j2-rand);box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh2);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
#screen-assistent.ju2 .ju2-karte a{color:rgb(var(--j2-p));font-weight:650;text-decoration:none;border-bottom:1px solid rgba(var(--j2-p),.35)}
#screen-assistent.ju2 .ju2-w{display:inline}
#screen-assistent.ju2 .ju2-w.neu{animation:ju2-wort .5s var(--j2-raus) both}
@keyframes ju2-wort{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}

/* ---- Vorschläge (leer) ---- */
#screen-assistent.ju2 .ju2-vorschlaege{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 14px 10px}
#screen-assistent.ju2:not([data-modus="leer"]) .ju2-vorschlaege{display:none}
#screen-assistent.ju2 .ju2-vs{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 12px;border-radius:18px;cursor:pointer;min-width:0;min-height:56px;
  background:var(--j2-glas);border:1px solid var(--j2-rand);box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh2);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);transition:scale .5s var(--j2-feder);
  animation:ju2-rein .6s var(--j2-weich) both}
#screen-assistent.ju2 .ju2-vs:nth-child(2){animation-delay:.05s}#screen-assistent.ju2 .ju2-vs:nth-child(3){animation-delay:.1s}#screen-assistent.ju2 .ju2-vs:nth-child(4){animation-delay:.15s}
#screen-assistent.ju2 .ju2-vs:active{scale:.95;transition:scale .08s var(--j2-raus)}
#screen-assistent.ju2 .ju2-vs i{width:32px;height:32px;flex:none;border-radius:11px;display:grid;place-items:center;font-style:normal;background:rgba(var(--j2-p2),.14);color:rgb(var(--j2-p))}
#screen-assistent.ju2 .ju2-vs i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#screen-assistent.ju2 .ju2-vs span{display:block;font-size:13.5px;font-weight:650;line-height:1.25;color:var(--j2-text);min-width:0}

/* ---- Freigabe ---- */
#screen-assistent.ju2 .ju2-freigabe{flex:none;display:none;gap:9px;padding:0 14px 10px}
#screen-assistent.ju2 .ju2-freigabe.an{display:flex;animation:ju2-rein .5s var(--j2-weich) both}
#screen-assistent.ju2 .ju2-freigabe button{flex:1;height:48px;border-radius:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:700;border:1px solid var(--j2-rand);background:var(--j2-glas);color:var(--j2-text);
  box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:scale .5s var(--j2-feder)}
#screen-assistent.ju2 .ju2-freigabe button.ja{border-color:transparent;color:#fff;background:linear-gradient(160deg,rgb(79,151,172),rgb(47,112,136));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 26px -12px rgba(40,110,135,.95)}
#screen-assistent.ju2 .ju2-freigabe button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#screen-assistent.ju2 .ju2-freigabe button:active{scale:.95;transition:scale .08s var(--j2-raus)}

/* ---- Schreibleiste ---- */
#screen-assistent.ju2 .ju2-schreiben{flex:none;display:flex;align-items:flex-end;gap:6px;margin:0 12px calc(env(safe-area-inset-bottom) + 10px);padding:6px;
  border-radius:28px;background:var(--j2-glas2);border:1px solid var(--j2-rand);
  box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);transition:box-shadow .3s ease,border-color .3s ease}
/* Unten: Schreibleiste und rechts daneben „Einklappen“ – in Reichweite des Daumens (Pascal, 03.10.2026) */
#screen-assistent.ju2 .ju2-unten{flex:none;display:flex;align-items:flex-end;gap:8px;margin:0 12px calc(env(safe-area-inset-bottom) + 10px)}
#screen-assistent.ju2 .ju2-unten>.ju2-schreiben{flex:1;min-width:0;margin:0}
#screen-assistent.ju2 .ju2-unten>.ju-zurueck{width:56px;height:56px;flex:none;padding:0;gap:0;justify-content:center;border-radius:50%;
  background:var(--j2-glas2);box-shadow:inset 0 1px 0 var(--j2-glanz),var(--j2-sh);-webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7)}
#screen-assistent.ju2 .ju2-unten>.ju-zurueck svg{width:26px;height:26px;stroke-width:2.2}
#screen-assistent.ju2 .ju2-zu-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#screen-assistent.ju2 .ju2-schreiben:focus-within{border-color:rgba(var(--j2-p2),.5);box-shadow:inset 0 1px 0 var(--j2-glanz),0 0 0 4px rgba(var(--j2-p2),.14),var(--j2-sh)}
#screen-assistent.ju2 .ju2-anh{width:42px;height:42px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  background:transparent;color:var(--j2-muted);transition:scale .5s var(--j2-feder),color .2s ease,background-color .2s ease}
#screen-assistent.ju2 .ju2-anh:active{scale:.88;background:rgba(var(--j2-p2),.12);color:rgb(var(--j2-p));transition:scale .08s var(--j2-raus)}
#screen-assistent.ju2 .ju2-anh svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.as-voll #screen-assistent.ju2 #asEingabe{flex:1;min-width:0;height:42px;border:0!important;outline:none;background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;padding:0 4px;font-size:16.5px;color:var(--j2-text);caret-color:rgb(var(--j2-p2))}
body.as-voll #screen-assistent.ju2 #asEingabe::placeholder{color:var(--j2-dim)}
#screen-assistent.ju2 .ju2-tun{position:relative;width:42px;height:42px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer;
  transition:scale .5s var(--j2-feder),background .35s ease,box-shadow .35s ease,color .35s ease;background:rgba(var(--j2-p2),.14);color:rgb(var(--j2-p))}
#screen-assistent.ju2 .ju2-tun:active{scale:.88;transition:scale .08s var(--j2-raus)}
#screen-assistent.ju2 .ju2-tun svg{position:absolute;left:50%;top:50%;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;scale:.5;rotate:-30deg;transition:opacity .22s var(--j2-raus),scale .45s var(--j2-feder),rotate .45s var(--j2-feder)}
#screen-assistent.ju2 .ju2-tun[data-art="mic"] .i-mic,#screen-assistent.ju2 .ju2-tun[data-art="senden"] .i-senden,
#screen-assistent.ju2 .ju2-tun[data-art="stopp"] .i-stopp,#screen-assistent.ju2 .ju2-tun[data-art="warten"] .i-warten{opacity:1;scale:1;rotate:0deg}
#screen-assistent.ju2 .ju2-tun[data-art="senden"],#screen-assistent.ju2 .ju2-tun[data-art="stopp"]{color:#fff;background:linear-gradient(160deg,rgb(79,151,172),rgb(47,112,136));box-shadow:0 8px 22px -8px rgba(40,110,135,.9)}
#screen-assistent.ju2 .ju2-tun[data-art="stopp"]{background:#e0574f;box-shadow:0 0 0 calc(3px + var(--j2-pegel,0) * 8px) rgba(224,87,79,.2)}
#screen-assistent.ju2 .ju2-tun .i-stopp{fill:currentColor;stroke:none}
#screen-assistent.ju2 .ju2-tun .i-warten{animation:ju2-dreh 1s linear infinite}
#screen-assistent.ju2 .ju2-tun[data-art="warten"] .i-warten{rotate:none}
@keyframes ju2-dreh{to{rotate:360deg}}

/* ---- Blatt: Einstellungen ---- */
.ju2-blatt-hg{position:fixed;inset:0;z-index:120;background:rgba(6,16,22,.40);opacity:0;pointer-events:none;transition:opacity .32s var(--jm-out,ease)}
.ju2-blatt-hg.an{opacity:1;pointer-events:auto}
.ju2-blatt{position:fixed;left:0;right:0;bottom:0;z-index:121;max-width:560px;margin:0 auto;border-radius:30px 30px 0 0;
  padding:8px 18px calc(env(safe-area-inset-bottom) + 18px);max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
  translate:0 105%;transition:translate .38s var(--jm-in,cubic-bezier(.64,0,.78,0));
  color:var(--j2b-text,#172026);background:var(--j2b-bg,rgba(246,249,251,.94));border:1px solid rgba(255,255,255,.6);
  box-shadow:0 -20px 60px -20px rgba(10,30,45,.4);-webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.ju2-blatt.an{translate:0 0;transition:translate .56s var(--jm-soft,cubic-bezier(.2,.9,.25,1))}
@media (prefers-color-scheme:dark){ .ju2-blatt{--j2b-text:#edf2f4;--j2b-bg:rgba(15,24,30,.9);border-color:rgba(255,255,255,.08);box-shadow:0 -20px 60px -20px rgba(0,0,0,.8)} }
.ju2-blatt .ju2-griff{width:40px;height:5px;border-radius:5px;margin:2px auto 12px;background:currentColor;opacity:.22}
.ju2-blatt .ju2-blatt-kopf{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.ju2-blatt .ju2-blatt-kopf img{width:52px;height:52px;border-radius:50%;background:rgba(255,236,206,.6);flex:none}
.ju2-blatt h3{margin:0;font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.01em}
.ju2-blatt .ju2-unter{font-size:13px;opacity:.6;margin:2px 0 0}
.ju2-blatt h4{margin:18px 0 8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.ju2-blatt .ju2-stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ju2-blatt .ju2-stimme{height:44px;border-radius:14px;border:1px solid rgba(127,140,150,.22);background:rgba(127,140,150,.08);color:inherit;font:inherit;font-size:14.5px;font-weight:650;cursor:pointer;
  transition:scale .5s var(--jm-spring,cubic-bezier(.34,1.56,.64,1)),background-color .2s ease}
.ju2-blatt .ju2-stimme:active{scale:.93;transition:scale .08s ease}
.ju2-blatt .ju2-stimme.an{background:linear-gradient(160deg,rgb(79,151,172),rgb(47,112,136));border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px rgba(40,110,135,.9)}
.ju2-blatt .ju2-tipps{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ju2-blatt .ju2-tipps li{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.4}
.ju2-blatt .ju2-tipps b{flex:none;min-width:132px;font-weight:700}
.ju2-blatt .ju2-tipps span{opacity:.72}
.ju2-blatt .ju2-fertig{display:block;width:100%;height:50px;margin-top:18px;border-radius:16px;border:0;font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  background:rgba(127,140,150,.14);color:inherit;transition:scale .5s var(--jm-spring,cubic-bezier(.34,1.56,.64,1))}
.ju2-blatt .ju2-fertig:active{scale:.97}

/* ---- Toasts in Juna über der Schreibleiste ---- */
body.as-voll:has(#screen-assistent.ju2) .toast{bottom:calc(env(safe-area-inset-bottom) + 96px)}

/* ---- Sehr kleine Bildschirme (iPhone SE 1. Gen. u. ä.) ---- */
@media (max-height:600px){
  #screen-assistent.ju2 .ju2-gruss{margin-top:6px}
  #screen-assistent.ju2 .ju2-gruss h2{font-size:21px}
  #screen-assistent.ju2 .ju2-gruss p{display:none}
  #screen-assistent.ju2 .ju2-vs{min-height:46px;padding:8px 10px;border-radius:15px}
  #screen-assistent.ju2 .ju2-vs i{width:26px;height:26px;border-radius:9px}
  #screen-assistent.ju2 .ju2-vs span{font-size:12.5px}
}
@media (max-width:340px){ #screen-assistent.ju2 .ju2-vs i{display:none} }

/* ---- Mac / großer Bildschirm ---- */
@media (min-width:1000px){
  body.as-voll #screen-assistent.ju2>.ju2-buehne,body.as-voll #screen-assistent.ju2>#asVerlauf,body.as-voll #screen-assistent.ju2>.ju2-vorschlaege,
  body.as-voll #screen-assistent.ju2>.ju2-freigabe,body.as-voll #screen-assistent.ju2>.ju2-schreiben,body.as-voll #screen-assistent.ju2>.ju2-unten{width:100%;max-width:780px;margin-left:auto;margin-right:auto;box-sizing:border-box}
  body.as-voll #screen-assistent.ju2>.ju2-schreiben,body.as-voll #screen-assistent.ju2>.ju2-unten{width:calc(100% - 24px)}
  #screen-assistent.ju2 .ju2-vorschlaege{grid-template-columns:repeat(4,1fr)}
}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion:reduce){
  #screen-assistent.ju2 .ju2-licht i,#screen-assistent.ju2 .ju2-ersatz{animation:none!important}
  #screen-assistent.ju2 .ju2-platz,#screen-assistent.ju2 .ju2-gruss{transition:none!important}
  #screen-assistent.ju2 .ju2-w.neu,#screen-assistent.ju2 .ju2-m.neu,#screen-assistent.ju2 .ju2-vs,#screen-assistent.ju2 .ju2-freigabe.an{animation:none}
  #screen-assistent.ju2 .ju2-untertitel{transition:opacity .2s ease;translate:none}
  #screen-assistent.ju2 .ju2-tun svg{transition:opacity .15s ease;rotate:none;scale:1}
  #screen-assistent.ju2 .ju2-vs,#screen-assistent.ju2 .ju2-tun,#screen-assistent.ju2 .ju2-anh,#screen-assistent.ju2 .ju2-knopf,#screen-assistent.ju2 .ju-zurueck,#screen-assistent.ju2 .ju2-freigabe button{transition:none}
  #screen-assistent.ju2 #asStatus::before,#screen-assistent.ju2 .ju2-tun .i-warten{animation:none!important}
  .ju2-blatt,.ju2-blatt.an{transition:none}
}


/* ==========================================================================
   Juna-Bullauge (03.10.2026): Junas Kopf unten rechts, überall in der App.
   Antippen = Juna groß (Kreis wächst aus dem Bullauge), Einklappen = zurück.
   ========================================================================== */
#verTag,#verTagJuna{display:none!important}
#mehrMenu .ju-version{grid-column:1/-1;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted2,#959ca7);padding:12px 0 calc(var(--safe-b,0px) + 6px);font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text}
.ju-ba{position:fixed;right:16px;bottom:100px;z-index:46;width:66px;height:66px;border-radius:50%;cursor:pointer;touch-action:none;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;
  transition:opacity .35s ease,visibility .35s,scale .55s var(--jm-spring,cubic-bezier(.34,1.56,.64,1)),translate .5s var(--jm-soft,cubic-bezier(.2,.9,.25,1)),bottom .45s var(--jm-soft,cubic-bezier(.2,.9,.25,1))}
.ju-ba.links{right:auto;left:16px}
.ju-ba .ju-ba-fenster{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 28%,#ffffff 0%,#eaf3f6 45%,#cfe3ea 100%);
  box-shadow:0 0 0 3px #fff,0 0 0 4.5px rgba(79,151,172,.38),0 14px 30px -10px rgba(16,52,70,.55),0 4px 10px -4px rgba(16,52,70,.3)}
.ju-ba canvas,.ju-ba .ju-ba-ersatz{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ju-ba .ju-ba-ersatz{object-fit:cover}
@media (prefers-color-scheme:dark){
  .ju-ba .ju-ba-fenster{background:radial-gradient(circle at 50% 28%,#33444e 0%,#1d2a32 60%,#121b21 100%);
    box-shadow:0 0 0 2.5px rgba(255,255,255,.16),0 0 0 4px rgba(111,179,198,.35),0 14px 30px -10px rgba(0,0,0,.8)}
}
.ju-ba:active .ju-ba-fenster{transform:scale(.94);transition:transform .1s ease}
.ju-ba .ju-ba-fenster{transition:transform .5s var(--jm-spring,cubic-bezier(.34,1.56,.64,1))}
.ju-ba:focus-visible .ju-ba-fenster{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(79,151,172,.7),0 14px 30px -10px rgba(16,52,70,.55)}
.ju-ba.weg{opacity:0;visibility:hidden;pointer-events:none;scale:.6}
.ju-ba.hebt{scale:1.12}
.ju-ba.zieht{transition:opacity .3s ease,scale .3s ease}
.ju-ba.lugt{translate:30px 0;scale:.82}
.ju-ba.links.lugt{translate:-30px 0}
.ju-ba.duckt{translate:44px 0;opacity:.55}
.ju-ba.links.duckt{translate:-44px 0}
/* Ring: Gespräch (grün, atmet mit der Stimme), Arbeit (goldener Bogen), Frage (petrol) */
.ju-ba .ju-ba-ring{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s ease}
.ju-ba.live .ju-ba-ring{opacity:1;border:3px solid #2fae74;box-shadow:0 0 0 calc(2px + var(--ba-pegel,0) * 9px) rgba(47,174,116,.22);transition:opacity .4s ease,box-shadow .08s linear}
.ju-ba.denkt:not(.live) .ju-ba-ring{opacity:1;background:conic-gradient(from 0deg,rgba(232,181,74,0) 0deg,rgba(232,181,74,.95) 110deg,rgba(232,181,74,0) 200deg);
  -webkit-mask:radial-gradient(circle,transparent 36px,#000 37px);mask:radial-gradient(circle,transparent 36px,#000 37px);animation:ju-ba-dreh 1.1s linear infinite}
.ju-ba.fragt:not(.live) .ju-ba-ring{opacity:1;border:3px solid rgb(79,151,172);animation:ju-ba-puls 1.6s ease-in-out infinite}
@keyframes ju-ba-dreh{to{rotate:360deg}}
@keyframes ju-ba-puls{0%,100%{scale:1;opacity:.9}50%{scale:1.06;opacity:.5}}
/* Neue Antwort, solange Juna eingeklappt ist */
.ju-ba .ju-ba-punkt{position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;background:#e0574f;box-shadow:0 0 0 2.5px #fff;scale:0;transition:scale .4s var(--jm-spring,cubic-bezier(.34,1.56,.64,1))}
.ju-ba.links .ju-ba-punkt{right:auto;left:1px}
.ju-ba.neu .ju-ba-punkt{scale:1}
/* Auflegen-Knopf während eines Gesprächs */
.ju-ba-auflegen{position:fixed;right:92px;bottom:116px;z-index:47;width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  color:#fff;background:#e0574f;box-shadow:0 0 0 2.5px #fff,0 8px 18px -8px rgba(160,40,30,.8);transition:opacity .3s ease,visibility .3s,scale .45s var(--jm-spring,cubic-bezier(.34,1.56,.64,1));-webkit-tap-highlight-color:transparent}
.ju-ba-auflegen.links{right:auto;left:92px}
.ju-ba-auflegen svg{width:20px;height:20px;fill:currentColor}
.ju-ba-auflegen.weg{opacity:0;visibility:hidden;pointer-events:none;scale:.5}
.ju-ba-auflegen:active{scale:.9}
/* Sprechblase: was Juna gerade gesagt hat */
.ju-ba-blase{position:fixed;right:18px;bottom:176px;z-index:46;max-width:min(270px,calc(100vw - 40px));padding:10px 13px;border-radius:18px 18px 6px 18px;cursor:pointer;
  font:500 14px/1.38 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;color:#172026;background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(20,40,52,.07),0 14px 32px -14px rgba(16,52,70,.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  transform-origin:100% 100%;transition:opacity .3s ease,visibility .3s,scale .45s var(--jm-spring,cubic-bezier(.34,1.56,.64,1)),translate .45s var(--jm-soft,cubic-bezier(.2,.9,.25,1))}
.ju-ba-blase span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ju-ba-blase b{color:rgb(47,112,136);font-weight:800;margin-right:2px}
.ju-ba-blase.links{right:auto;left:18px;border-radius:18px 18px 18px 6px;transform-origin:0 100%}
.ju-ba-blase.weg{opacity:0;visibility:hidden;pointer-events:none;scale:.7;translate:0 8px}
@media (prefers-color-scheme:dark){ .ju-ba-blase{color:#edf2f4;background:rgba(28,38,45,.92);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 32px -14px rgba(0,0,0,.8)} .ju-ba-blase b{color:#7fbed0} }
/* Juna groß: Einklappen-Knopf (Pfeil nach unten) */
#screen-assistent.ju2 .ju-zurueck{padding:0 14px 0 9px}
/* Übergang (03.10.2026, Pascal: „Motion Design könnte besser sein“): Bullauge und Juna-Seite sind EIN Ding.
   Beide tragen beim Übergang denselben Namen; das Fenster wächst aus dem Bullauge zur ganzen Seite, die
   Ecken werden von rund zu gerade, Junas Kopf geht in die große Bühne über, die App tritt dahinter zurück
   (kleiner, dunkler). Zuklappen genau umgekehrt. Ohne View Transitions oder mit „Bewegung reduzieren“: sofort. */
html.ju-vt-auf .ju-ba:not(.weg),html.ju-vt-zu .ju-ba:not(.weg),
html.ju-vt-auf body.as-voll #screen-assistent,html.ju-vt-zu body.as-voll #screen-assistent{view-transition-name:ju-raum}
html.ju-vt-auf .ju-ba,html.ju-vt-zu .ju-ba,html.ju-vt-auf .ju-ba .ju-ba-fenster,html.ju-vt-zu .ju-ba .ju-ba-fenster{transition:none!important}
html.ju-vt-auf::view-transition-group(ju-raum){animation-duration:.55s;animation-timing-function:cubic-bezier(.35,.15,.15,1)}
html.ju-vt-zu::view-transition-group(ju-raum){animation-duration:.46s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
/* Das wachsende Fenster ist von Anfang an deckend (Junas Hintergrund) – darin geht der Kopf in die Seite über */
html.ju-vt-auf::view-transition-image-pair(ju-raum),html.ju-vt-zu::view-transition-image-pair(ju-raum){overflow:hidden;background:var(--ju-raum-bg,#edf2f5)}
html.ju-vt-auf::view-transition-image-pair(ju-raum){animation:ju-ecken-auf .55s cubic-bezier(.35,.15,.15,1) both}
html.ju-vt-zu::view-transition-image-pair(ju-raum){animation:ju-ecken-zu .46s cubic-bezier(.4,0,.2,1) both}
html.ju-vt-auf::view-transition-old(ju-raum),html.ju-vt-auf::view-transition-new(ju-raum),
html.ju-vt-zu::view-transition-old(ju-raum),html.ju-vt-zu::view-transition-new(ju-raum){height:100%;object-fit:cover;object-position:50% 28%;mix-blend-mode:normal}
html.ju-vt-auf::view-transition-old(ju-raum){animation:ju-aus .2s linear both}
html.ju-vt-auf::view-transition-new(ju-raum){animation:ju-ein .25s linear .08s both}
html.ju-vt-zu::view-transition-old(ju-raum){animation:ju-aus .2s linear .12s both}
html.ju-vt-zu::view-transition-new(ju-raum){animation:ju-ein .18s linear .24s both}
html.ju-vt-auf::view-transition-old(root),html.ju-vt-auf::view-transition-new(root),
html.ju-vt-zu::view-transition-old(root),html.ju-vt-zu::view-transition-new(root){mix-blend-mode:normal}
html.ju-vt-auf::view-transition-old(root){animation:ju-app-zurueck .55s cubic-bezier(.35,.15,.15,1) both}
html.ju-vt-auf::view-transition-new(root){animation:ju-ein .16s linear .4s both}
html.ju-vt-zu::view-transition-old(root){animation:ju-aus .12s linear both}
html.ju-vt-zu::view-transition-new(root){animation:ju-app-vor .46s cubic-bezier(.4,0,.2,1) both}
:root{--ju-raum-bg:#edf2f5}
@media (prefers-color-scheme:dark){ :root{--ju-raum-bg:#0b1317} }
@keyframes ju-ecken-auf{from{border-radius:33px}to{border-radius:0}}
@keyframes ju-ecken-zu{from{border-radius:0}to{border-radius:33px}}
@keyframes ju-aus{to{opacity:0}}
@keyframes ju-ein{from{opacity:0}}
@keyframes ju-app-zurueck{to{transform:scale(.93);filter:brightness(.78)}}
@keyframes ju-app-vor{from{transform:scale(.93);filter:brightness(.78)}}
@media (prefers-reduced-motion:reduce){
  .ju-ba,.ju-ba-blase,.ju-ba-auflegen,.ju-ba .ju-ba-fenster{transition:opacity .2s ease,visibility .2s}
  .ju-ba.duckt,.ju-ba.links.duckt{translate:none}
  .ju-ba.weg,.ju-ba-blase.weg,.ju-ba-auflegen.weg{scale:1;translate:none}
  .ju-ba.denkt .ju-ba-ring,.ju-ba.fragt .ju-ba-ring{animation:none}
}
/* größere Trefferflächen, sichtbar unverändert (Barrierefreiheit J-06: Auflegen, Einstellungen) */
.ju-ba-auflegen::after{content:'';position:absolute;inset:-6px;border-radius:50%}
#screen-assistent.ju2 .ju2-knopf{position:relative}
#screen-assistent.ju2 .ju2-knopf::after{content:'';position:absolute;inset:-4px;border-radius:50%}
@media print{ .ju-ba,.ju-ba-blase,.ju-ba-auflegen{display:none!important} }
/* ---- Warten + Bestätigen (Welle 3 „Gespräch“, 05.10.2026) ---- */
#screen-assistent.ju2 .ju2-warte{animation:ju2-rein .4s var(--j2-weich) both}
#screen-assistent.ju2 .ju2-warte .ju2-karte{display:flex;align-items:center;gap:11px;min-height:46px;font-size:15px;line-height:1.35;color:var(--j2-muted)}
#screen-assistent.ju2 .ju2-punkte{display:inline-flex;gap:4px;flex:none;padding:2px 0}
#screen-assistent.ju2 .ju2-punkte i{width:7px;height:7px;border-radius:50%;background:rgb(var(--j2-p2));opacity:.3;animation:ju2-tippt 1.2s ease-in-out infinite}
#screen-assistent.ju2 .ju2-punkte i:nth-child(2){animation-delay:.15s}
#screen-assistent.ju2 .ju2-punkte i:nth-child(3){animation-delay:.3s}
@keyframes ju2-tippt{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -3px}}
#screen-assistent.ju2 .ju2-warte-text:empty{display:none}
#screen-assistent.ju2 .ju2-warte.mit-text .ju2-warte-text{animation:ju2-wort .45s var(--j2-raus) both}
#screen-assistent.ju2 .ju2-taten{display:flex;flex-direction:column;gap:7px;margin:0 0 9px;padding:0 0 9px;border-bottom:1px solid var(--j2-rand)}
#screen-assistent.ju2 .ju2-tat{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.4;font-weight:650;color:var(--j2-text)}
#screen-assistent.ju2 .ju2-tat b{flex:none;width:20px;height:20px;margin-top:0;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:var(--j2-bg);background:rgb(var(--j2-p2))}
#screen-assistent.ju2 .ju2-tat.fehl b{background:rgb(var(--j2-gold))}
#screen-assistent.ju2 .ju2-tat span{flex:1;min-width:0}
#screen-assistent.ju2 .ju2-tat-zurueck{flex:none;margin:-4px -6px -4px 0;padding:4px 10px;min-height:28px;border-radius:999px;border:1px solid var(--j2-rand);background:var(--j2-glas);color:rgb(var(--j2-p));font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#screen-assistent.ju2 .ju2-tat-zurueck:active{scale:.95}
#screen-assistent.ju2 .ju2-tat-zurueck.laeuft{opacity:.55}
#screen-assistent.ju2 .ju2-tat-weg{flex:none;font-size:13px;font-weight:650;color:var(--j2-muted)}
.ju2-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  #screen-assistent.ju2 .ju2-warte,#screen-assistent.ju2 .ju2-warte.mit-text .ju2-warte-text{animation:none}
  #screen-assistent.ju2 .ju2-punkte i{animation:none;opacity:.6}
  #screen-assistent.ju2 .ju2-tat-zurueck:active{scale:1}
}

/* ===== Block 4 (id="sinne") ===== */

/* ==========================================================================
   JUPAS° Sinne – Klang, Haptik, Momente (03.10.2026): Darstellung
   Konfetti aus dem Bullauge, Juna in leeren Listen, Einstellungen.
   „Bewegung reduzieren“: kein Konfetti, Juna steht still.
   ========================================================================== */
.si-konfetti{position:fixed;inset:0;z-index:260;pointer-events:none;overflow:hidden}
.si-konfetti i{position:absolute;display:block;will-change:transform,opacity}

/* Juna in leeren Listen (statt des Symbols) */
.leer.si-leer{padding-top:18px}
.si-leer-juna{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 10px;
  filter:drop-shadow(0 10px 14px rgba(16,52,70,.18));animation:si-schweben 3.6s ease-in-out infinite;pointer-events:none;user-select:none;-webkit-user-select:none}
.si-leer-juna.klein{width:56px;height:56px;margin:0 auto 6px;animation-duration:4.2s}
@keyframes si-schweben{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -5px;rotate:2deg}}
.si-leer-zeile{text-align:center}
@media (prefers-color-scheme:dark){ .si-leer-juna{filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))} }
@media (prefers-reduced-motion:reduce){ .si-leer-juna{animation:none} .si-konfetti{display:none} }

/* Einstellungen: „Anhören“ neben dem Schalter */
#siEinstellungen .set-row{align-items:center}
#siEinstellungen #siProbe{flex:none;white-space:nowrap}
@media print{ .si-konfetti{display:none!important} }

/* ===== Block 5 (id="gesten") ===== */

/* ==========================================================================
   JUPAS° Gesten & Ordnung (03.10.2026): Darstellung
   Aufgaben wischen: die Aktion erscheint als eigene Fläche in der Lücke neben der
   Glas-Karte (wie die Mitteilungen auf dem iPhone) – durch die Karte scheint nichts.
   Mehr-Menü: leise Abschnittstitel über die ganze Breite, Gruppen im selben Raster.
   Hell + dunkel, „Bewegung reduzieren“: kein Hinausfliegen, kein Federn, nur Zustand.
   ========================================================================== */
/* Flächenfarben mit weißer (hell) bzw. dunkler (dunkel) Schrift ≥ 4,5 : 1; Titel ≥ 4,5 : 1 auf dem Glasblatt */
:root{--ge-fertig:#147a44;--ge-fertig-text:#fff;--ge-morgen:#1f6d84;--ge-morgen-text:#fff;--ge-titel:#555c67}
@media (prefers-color-scheme:dark){:root{--ge-fertig:#3fc47c;--ge-fertig-text:#04161c;--ge-morgen:#7fd6ee;--ge-morgen-text:#04161c;--ge-titel:#8592a0}}

/* ---- Aufgaben wischen ---- */
.ge-wisch{position:relative;margin-bottom:8px}
.ge-wisch>.task-card{margin-bottom:0;transition:transform .24s var(--ease,cubic-bezier(.22,1,.36,1))}
.ge-wisch>.ge-akt{display:none}
/* nur während der Geste: waagrecht beschneiden (kein Überlauf, der die Seite verschiebt), Schatten oben/unten bleiben */
.ge-wisch.ge-aktiv{overflow:hidden}
@supports (overflow:clip){.ge-wisch.ge-aktiv{overflow:visible;overflow-x:clip}}
.ge-wisch.ge-aktiv>.task-card{will-change:transform;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ge-wisch.ge-aktiv>.ge-akt{display:flex;position:absolute;top:0;bottom:0;width:0;align-items:center;justify-content:center;overflow:hidden;
  border-radius:var(--radius,18px);pointer-events:none;transition:width .24s var(--ease,cubic-bezier(.22,1,.36,1))}
.ge-wisch>.ge-links{left:0;background:var(--ge-morgen);color:var(--ge-morgen-text)}
.ge-wisch>.ge-rechts{right:0;background:var(--ge-fertig);color:var(--ge-fertig-text)}
.ge-wisch.ge-aktiv>.ge-links{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(31,109,132,.22)}
.ge-wisch.ge-aktiv>.ge-rechts{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(20,122,68,.22)}
.ge-wisch.zieht>.task-card,.ge-wisch.zieht>.ge-akt{transition:none}
.ge-inhalt{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;font-size:12.5px;line-height:1;letter-spacing:.01em;white-space:nowrap}
/* Deckkraft folgt dem Finger (JS: --ge-i Zeichen, --ge-t Schrift); beim Zurückfedern kurz ausblenden */
.ge-inhalt b{font-weight:700;opacity:var(--ge-t,0);transition:opacity .14s linear}
.ge-inhalt svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:var(--ge-i,0);scale:.84;transition:scale .45s var(--jm-spring,cubic-bezier(.34,1.56,.64,1)),opacity .14s linear}
.ge-wisch.zieht .ge-inhalt b{transition:none}
.ge-wisch.zieht .ge-inhalt svg{transition:scale .45s var(--jm-spring,cubic-bezier(.34,1.56,.64,1))}
/* an der Schwelle: das Zeichen springt leicht an (zeitgleich mit dem Tack) */
.ge-wisch.ge-scharf .ge-inhalt svg,.ge-wisch.ge-geht .ge-inhalt svg{scale:1.08}
/* während der Geste wirkt ein gedrückter Knopf in der Karte nicht gedrückt */
.ge-wisch.zieht :is(.linkbtn,.termin-chip,.task-prio,button):active{scale:1}
/* Auslösen nach links: Karte fliegt hinaus, die Fläche füllt die Zeile (dann schließt sich die Zeile per JS) */
.ge-wisch.ge-geht{overflow:hidden}
.ge-wisch.ge-geht>.task-card{transition:transform .22s cubic-bezier(.3,.7,.4,1);animation:none!important}
.ge-wisch.ge-geht>.ge-akt{transition:width .22s cubic-bezier(.3,.7,.4,1)}
.ge-wisch.ge-geht .haken-anim{display:none}
.ge-weg{display:none!important}
/* nach „Morgen“: die Karte leuchtet kurz auf, wenn der neue Termin steht (wie frische Chats in der Inbox) */
.ge-wisch.ge-frisch::after{content:'';position:absolute;inset:0;border-radius:var(--radius,18px);pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft);opacity:0;animation:ge-frisch 1.7s var(--jm-out,cubic-bezier(.16,1,.3,1)) .1s both}
@keyframes ge-frisch{0%{opacity:0}14%{opacity:1}100%{opacity:0}}
@media (prefers-color-scheme:dark){
  .ge-wisch.ge-aktiv>.ge-links{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(127,214,238,.22)}
  .ge-wisch.ge-aktiv>.ge-rechts{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(63,196,124,.22)}
}
@media (prefers-reduced-motion:reduce){
  .ge-wisch>.task-card,.ge-wisch.ge-aktiv>.ge-akt,.ge-inhalt svg{transition:none!important}
  .ge-inhalt svg,.ge-wisch.ge-scharf .ge-inhalt svg{scale:1}
  .ge-wisch.ge-frisch::after{animation:none}
}

/* ---- Mehr-Menü: Häufig + Gruppen (Gäste · Betrieb · JUPAS) ---- */
#mehrMenu .ge-gruppe{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
#mehrMenu .ge-gruppe[hidden]{display:none}
#mehrMenu .ge-mtitel{grid-column:1/-1;margin:10px 14px -1px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.25;
  color:var(--ge-titel);pointer-events:none;-webkit-user-select:none;user-select:none}
#mehrMenu .ge-gruppe:first-child .ge-mtitel{margin-top:0}
/* niedrige Bildschirme (iPhone SE, installierte App mit Home-Leiste): kompakter, damit das Menü möglichst ohne Scrollen passt */
@media (max-height:760px){
  #mehrMenu .ge-gruppe{gap:6px}
  #mehrMenu .ge-mtitel{margin:6px 14px -2px;font-size:11px}
  #mehrMenu .ge-gruppe .mrow{padding:10px 12px}
}
@media print{ .ge-wisch>.ge-akt{display:none!important} }

/* ===== Block 6 (id="a11y") ===== */

/* ==========================================================================
   JUPAS° Barrierefreiheit (03.10.2026, Welle 2): Fokus, Kontrast, Trefferflächen
   Steht als letzter Style am Ende von head, damit die Regeln die älteren Schichten schlagen.
   Prüfgrundlage: WCAG 2.2 AA (axe hell/dunkel + Tastatur- und VoiceOver-Gänge).
   ========================================================================== */

/* H-05/J-01 Fokusring: deutlich (3 px), unabhängig von box-shadow-Regeln der Glas-Schichten.
   Nur bei Tastatur/Schaltersteuerung (html.a11y-tastatur, gesetzt von a11y.js): beim Tippen auf dem
   iPhone erscheint kein Ring in Eingabefeldern (Gegenprüfung 03.10.2026). */
:root{--a11y-ring:#1f6d84}
@media (prefers-color-scheme:dark){:root{--a11y-ring:#7fd6ee}}
html.a11y-tastatur :is(button,a[href],summary,select,input,textarea,[tabindex]:not([tabindex="-1"]),[role=button]):focus-visible{outline:3px solid var(--a11y-ring)!important;outline-offset:2px!important}
html.a11y-tastatur :is(#filterChips,.chips,#convList,#mehrMenu,.hb-body,#aufgabenTabs) :is(button,[role=button]):focus-visible{outline-offset:-3px!important}
#juBullauge:focus-visible{outline:none!important}   /* das Bullauge hat seinen eigenen Doppelring */

/* H-06 Sekundärtext lesbar (vorher 2,3–2,9 : 1) */
:root{--muted2:#636b77}
@media (prefers-color-scheme:dark){:root{--muted2:#7d8b99}}
.day-sep,#mehrMenu .ju-version{color:var(--text2)}

/* H-07 Marken- und Ampelfarben als Schrift (hell): je knapp über 4,5 : 1 auf dem Hintergrund */
:root{--green:#147a44;--amber:#965c04;--red:#c62828}
.linkbtn:not(.danger):not([style*="color"]),.conv.unreadconv .time,.pg-txt.aussen,.kz-mehr,.pg-mon.jetzt{color:var(--accent-ink)}
.task-prio.p2,.termin-chip.tk-orange{color:#b04209}
@media (prefers-color-scheme:light){ .r-vorschau{background:#d98506} }   /* dunkle Schrift auf Bernstein: hier bleibt das helle Bernstein (6,4 : 1) */
@media (prefers-color-scheme:dark){
  :root{--green:#3fc47c;--amber:#f5ac3a;--red:#f56b6b}
  .task-prio.p2,.termin-chip.tk-orange{color:#f08a4b}   /* dunkel: das helle Orange (das dunkle für Hell wäre hier unlesbar) */
  [style^="color:#dc2626"],[style*=";color:#dc2626"],[style*="; color:#dc2626"]{color:#f87171!important}   /* nur Schrift, nicht border-color */
  .badge[style*="background:var(--muted2)"]{background:#56616d!important}   /* weiße Schrift auf Grau-Abzeichen bleibt lesbar */
}

/* H-08 weiße Schrift auf Flächen: Flächen so weit abgedunkelt, dass 4,5 : 1 erreicht wird */
.btn.primary{background:linear-gradient(180deg,#2a7f97,#1f6d84)}
.smart .sbtn.brand{background:linear-gradient(135deg,#2d8097,#1f6d84)}
.ch-sms{background:#1f6d84} .ch-website{background:#0e7d72} .ch-airbnb{background:#d70f3c} .ch-whatsapp{background:#157a3f}
.ch-fewo{background:#f0a11f;color:#14181d}
.pg-bal{background:#2a7f97}
#offlineHinweis{background:#8a5300}
@media (prefers-color-scheme:dark){
  .btn.primary{background:linear-gradient(180deg,var(--accent2),var(--accent))}
  .ch-sms{background:#1f6f88} .pg-bal{background:#1f6f88}
  .tbadge{background:#c62828}
  #offlineHinweis{background:#f5ac3a;color:#14181d}
}

/* H-11 nur für Screenreader sichtbare Ansage-Regionen */
.a11y-vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* H-16 Fokus nicht unter Kopf- und Tab-Leiste verstecken (WCAG-Technik C43) */
html{scroll-padding-top:calc(env(safe-area-inset-top) + 76px);scroll-padding-bottom:calc(var(--tab-h,76px) + env(safe-area-inset-bottom) + 24px)}

/* H-20/H-21 Trefferflächen größer, sichtbar unverändert */
.hz-fertig,.task-prio,.tc-kopieren,.hb-kopf .btn,#glasWahl button,.heute-pfeil,#sucheBtn,#headerAction{position:relative}
.hz-fertig::after,#glasWahl button::after{content:'';position:absolute;inset:-10px -4px}
.task-prio::after{content:'';position:absolute;inset:-6px -4px}   /* nicht über den Termin-Chip darunter */
.tc-kopieren::after,.hb-kopf .btn::after{content:'';position:absolute;inset:-7px -2px}
.heute-pfeil::after{content:'';position:absolute;inset:-5px}
#sucheBtn::after,#headerAction::after{content:'';position:absolute;inset:-2px}

/* H-23 Umbruch bei 320 px (Einstellungen) */
#pushBtn{white-space:normal}

/* ===== Block 7 (id="tempo") ===== */

/* JUPAS° Tempo (Welle 3 „Gespräch“, 05.10.2026) – Wartestellen + gefühlte Geschwindigkeit. Quelle: tools/tempo/tempo.css */
/* Lange KI-Knöpfe: sofort gedrückt, nach 300 ms Fortschrittstext über der (unsichtbaren) Beschriftung – Breite bleibt */
.tp-laeuft{position:relative;background:var(--card2)!important;box-shadow:none!important;cursor:progress}
.tp-laeuft::before{content:"";position:absolute;left:10%;right:10%;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent2),transparent);background-size:200% 100%;animation:shimmer 1.1s linear infinite;opacity:.8}
.tp-laeuft.tp-text{color:transparent!important}
.tp-laeuft.tp-text::after{content:attr(data-tp-text);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 6px;
  color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:tp-ein .2s ease both}
@keyframes tp-ein{from{opacity:0}to{opacity:1}}
/* KI-Antwortvorschläge: Platzhalter so groß wie ein fertiger Vorschlag */
.tp-ki-sub::after{content:"";display:inline-block;width:14px;height:14px;margin-left:7px;vertical-align:-2px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent2);animation:spin .9s linear infinite}
.tp-gerippe{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px;margin-bottom:10px;box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:8px}
.tp-gerippe i,.tp-gerippe u{display:block;height:11px;border-radius:7px;background:linear-gradient(90deg,var(--card2) 25%,var(--line) 37%,var(--card2) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}
.tp-gerippe span{display:flex;gap:8px;margin-top:6px}
.tp-gerippe u{height:38px;border-radius:12px;flex:1}
/* Ansicht „Wartestellen“ (Einstellungen → System) */
#tempoWarte .tp-zeile{padding:8px 14px 10px;border-bottom:1px solid var(--line)}
#tempoWarte .tp-kopf{display:flex;align-items:baseline;gap:8px;font-size:13px}
#tempoWarte .tp-kopf b{flex:1;min-width:0;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700}
#tempoWarte .tp-wert{font-weight:800;font-variant-numeric:tabular-nums}
#tempoWarte .tp-wert.gelb{color:var(--amber)} #tempoWarte .tp-wert.rot{color:var(--red)}
#tempoWarte .tp-balken{height:6px;border-radius:4px;background:var(--line);margin:5px 0 4px;overflow:hidden}
#tempoWarte .tp-balken i{display:block;height:100%;border-radius:4px;background:var(--accent2)}
#tempoWarte .tp-balken i.gelb{background:var(--amber)} #tempoWarte .tp-balken i.rot{background:var(--red)}
#tempoWarte .tp-sub,#tempoWarte .tp-fuss{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
#tempoWarte .tp-fuss{padding:8px 14px 12px}
#tempoWarte .tp-leer{padding:14px;color:var(--muted);font-size:13px;line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .tp-laeuft::before,.tp-ki-sub::after,.tp-gerippe i,.tp-gerippe u{animation:none}
  .tp-laeuft.tp-text::after{animation:none}
}

/* ===== Block 8 (id="zahllink") ===== */

/* ==========================================================================
   ZAHLLINK (Stripe) – Blatt „Zahllink“, Liste der Links, Status-Chip im Chat
   (Z1u, Nacht 05./06.10.2026). Nur vorhandene Variablen (hell/dunkel).
   ========================================================================== */
#zlBlatt{padding:0 2px 6px}
#zlBlatt [hidden]{display:none!important}
#zlBlatt .zl-kopf{font-size:12.5px;color:var(--muted);margin:-4px 2px 12px;line-height:1.4}
#zlBlatt .zl-feld{margin-top:14px}
#zlBlatt .zl-lbl{display:block;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin:0 2px 6px}
#zlBlatt .zl-stepper{display:flex;align-items:center;gap:10px}
#zlBlatt .zl-stepper button{width:48px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:21px;font-weight:700;line-height:1;box-shadow:var(--sh-1);cursor:pointer}
#zlBlatt .zl-stepper button[aria-disabled=true]{opacity:.38;cursor:default;box-shadow:none}
#zlBlatt .zl-wert{flex:1;text-align:center;font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
#zlBlatt .zl-zwei{display:flex;gap:10px}
#zlBlatt .zl-zwei label{display:block;min-width:0}
#zlBlatt .zl-zwei .zl-b{flex:0 0 34%}
#zlBlatt .zl-zwei .zl-z{flex:1}
#zlBlatt input[type=text],#zlBlatt textarea{width:100%;padding:11px 13px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--text);font-family:inherit;line-height:1.45}
#zlBlatt textarea{min-height:104px;resize:vertical;display:block}
#zlBlatt input[type=text]:focus,#zlBlatt textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
#zlBlatt .zl-vorschau{margin-top:14px;padding:12px 13px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-height:50px;transition:opacity var(--t-fast)}
#zlBlatt .zl-vorschau[aria-busy=true]{opacity:.55}
#zlBlatt .zl-vorschau.warn{background:var(--amber-soft);border-color:transparent}
#zlBlatt .zl-vorschau.fehl{background:var(--red-soft);border-color:transparent}
#zlBlatt .zl-haupt{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.3}
#zlBlatt .zl-haupt.zl-k{font-size:14.5px}
#zlBlatt .zl-klein{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}
#zlBlatt .zl-vorschau .btn{margin-top:9px;padding:8px 12px;font-size:12.5px;min-height:36px}
#zlBlatt .zl-weg{display:flex;gap:8px;align-items:flex-start;margin:10px 2px 0;font-size:13px;color:var(--text2);line-height:1.4;overflow-wrap:anywhere}
#zlBlatt .zl-weg.gesperrt{color:var(--red);font-weight:650}
#zlBlatt .zl-hinweis{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-size:12.5px;color:var(--text2);line-height:1.45}
#zlBlatt .zl-hinweis.warn{background:var(--amber-soft);border-color:transparent;color:var(--text)}
#zlBlatt .zl-senden{display:block;width:100%;margin-top:14px;padding:14px;font-size:15px}
#zlBlatt .zl-senden[aria-disabled=true]{opacity:.45;box-shadow:none;cursor:default}
#zlBlatt .zl-senden.zl-ok{opacity:1;background:var(--green-soft);border-color:transparent;color:var(--green);box-shadow:none;text-shadow:none}
#zlBlatt .zl-fehler{margin-top:8px;font-size:13px;color:var(--red);font-weight:650;line-height:1.4}
#zlBlatt .zl-fehler:empty{display:none}
#zlBlatt .zl-listekopf{margin:22px 2px 0;font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.4px;font-weight:700;outline:none}
#zlBlatt .zl-leer{font-size:13px;color:var(--muted);margin:8px 2px 0}
#zlBlatt .zl-liste{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
#zlBlatt .zl-item{padding:11px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);outline:none}
#zlBlatt .zl-item:focus-visible{box-shadow:var(--ring)}
#zlBlatt .zl-item.neu{border-color:var(--accent)}
#zlBlatt .zl-z1{display:flex;gap:10px;align-items:baseline;justify-content:space-between;font-size:14px;font-weight:700;color:var(--text);line-height:1.35}
#zlBlatt .zl-z1 b{flex:none;font-variant-numeric:tabular-nums}
#zlBlatt .zl-z2{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
#zlBlatt .zl-st{display:inline-flex;align-items:center;gap:5px;font-weight:750;color:var(--text2)}
#zlBlatt .zl-st::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted2);flex:none}
#zlBlatt .zl-st.s-offen::before{background:var(--amber)}
#zlBlatt .zl-st.s-bezahlt::before{background:var(--accent)}
#zlBlatt .zl-st.s-gebucht::before{background:var(--green)}
#zlBlatt .zl-st.s-fehler::before,#zlBlatt .zl-st.s-vergeben::before{background:var(--red)}
#zlBlatt .zl-fehltext{margin-top:6px;font-size:12.5px;color:var(--red);line-height:1.4}
#zlBlatt .zl-akt{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
#zlBlatt .zl-akt .btn{padding:8px 12px;font-size:12.5px;min-height:38px}
#zlBlatt .zl-akt .btn.zl-rot{color:var(--red)}
#zlBlatt .zl-akt .btn[aria-disabled=true]{opacity:.45;cursor:default}
#zlBlatt .zl-frage{margin-top:9px;padding:10px 11px;border-radius:12px;background:var(--red-soft)}
#zlBlatt .zl-frage-t{font-size:14px;font-weight:800;color:var(--text)}
#zlBlatt .zl-frage .zl-akt{margin-top:8px}
#zlBlatt .zl-frage .btn.zl-ja{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none;text-shadow:none}
#zlBlatt .zl-meldung{margin-top:8px;font-size:12.5px;font-weight:650;color:var(--red);line-height:1.4;overflow-wrap:anywhere}
#zlBlatt .zl-meldung.leise{color:var(--text2);font-weight:500}
/* Status-Chip im Chatverlauf (an der gesendeten Link-Nachricht) */
.zl-chip{display:inline-flex;align-items:center;margin-top:6px;padding:2px 9px;border-radius:999px;border:none;background:var(--card);color:var(--text);font:inherit;font-size:11.5px;font-weight:750;line-height:1.6;box-shadow:var(--sh-1);white-space:nowrap}
button.zl-chip{cursor:pointer}
.zl-chip.s-offen{background:linear-gradient(var(--amber-soft),var(--amber-soft)),var(--card)}
.zl-chip.s-bezahlt{background:linear-gradient(var(--accent-soft2),var(--accent-soft2)),var(--card)}
.zl-chip.s-gebucht{background:linear-gradient(var(--green-soft),var(--green-soft)),var(--card)}
.zl-chip.s-fehler,.zl-chip.s-vergeben{background:linear-gradient(var(--red-soft),var(--red-soft)),var(--card)}
.zl-chip.s-abgelaufen,.zl-chip.s-storniert,.zl-chip.s-erstattet{color:var(--muted)}
#zlBlatt .zl-todo{margin-top:9px;padding:10px 12px;border-radius:12px;background:var(--amber-soft);border:1px solid var(--amber);font-size:13px;font-weight:600;color:var(--text);line-height:1.45}
#zlBlatt .zl-todo b{font-weight:800}

/* ===== Block 9 (id="web") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche (24.10.2026) – Look wie jubook / jubook-Controlling.
   Quelle: tools/web/web.css – eingebettet als Style „web“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac, ≥ 1000 px, Maus). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
html.web{
  --bg:#F5F4EF; --bg2:#EEECE5; --card:#FFFFFF; --card2:#FAF9F6; --card3:#EEECE5;
  --barbg:rgba(245,244,239,.78); --tabbg:rgba(245,244,239,.78);
  --glas-kante:rgba(29,29,31,.08); --glas-licht:transparent; --glas-blatt:rgba(250,249,246,.96); --glas-knopf:#FFFFFF;
  --glas-rand:transparent; --glas-rand2:rgba(29,29,31,.08);
  --line:rgba(29,29,31,.08); --line2:rgba(29,29,31,.14);
  --text:#1D1D1F; --text2:#55555A; --muted:#6E6E73; --muted2:#8A8A8F;
  --accent:#3A7A8F; --accent2:#5FA0B4; --brand:#5FA0B4; --brand-dark:#2F6F84; --accent-ink:#2F6F84;
  --accent-soft:#E6F0F3; --accent-soft2:rgba(95,160,180,.22);
  --host-a:#5FA0B4; --host-b:#3A7A8F;
  --leucht:rgba(95,160,180,.20); --leucht2:transparent;
  --green:#1B7D35; --green-soft:#E3F5E8; --amber:#A85A00; --amber-soft:#FFF1DC; --red:#C0271F; --red-soft:#FDE8E6;
  --sh-1:0 1px 2px rgba(29,29,31,.04),0 4px 16px -4px rgba(29,29,31,.06);
  --sh-2:0 2px 6px rgba(29,29,31,.06),0 18px 40px -12px rgba(29,29,31,.18);
  --sh-3:0 4px 12px rgba(29,29,31,.08),0 28px 60px -16px rgba(29,29,31,.26);
  --ring:0 0 0 4px rgba(95,160,180,.22);
  --web-schrift:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --web-titel:'Poppins','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --web-sanft:cubic-bezier(.22,1,.36,1); --web-feder:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark){
  html.web{
    --bg:#0E1113; --bg2:#13171A; --card:#171B1E; --card2:#1D2226; --card3:#22282C;
    --barbg:rgba(14,17,19,.78); --tabbg:rgba(14,17,19,.78);
    --glas-kante:rgba(255,255,255,.07); --glas-blatt:rgba(23,27,30,.96); --glas-knopf:#171B1E;
    --glas-rand:transparent; --glas-rand2:rgba(255,255,255,.07);
    --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
    --text:#F2F2F0; --text2:#B0B4B7; --muted:#8E9397; --muted2:#71767A;
    --accent:#6FB3C6; --accent2:#8CC8D8; --brand:#6FB3C6; --accent-ink:#8CC8D8;
    --accent-soft:#16303A; --accent-soft2:rgba(111,179,198,.18);
    --host-a:#2F6F84; --host-b:#3B7E93;
    --leucht:rgba(111,179,198,.14);
    --green:#30D158; --green-soft:#123D20; --amber:#FF9F0A; --amber-soft:#3A2A10; --red:#FF6961; --red-soft:#4A1C19;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.5);
    --sh-2:0 2px 8px rgba(0,0,0,.5),0 24px 48px -12px rgba(0,0,0,.7);
    --sh-3:0 4px 14px rgba(0,0,0,.55),0 30px 70px -16px rgba(0,0,0,.75);
  }
}

/* ---- Grund: Schrift, Fläche, ein weiches Petrol-Licht oben rechts (wie jubook) ---- */
html.web body{font-family:var(--web-schrift);font-size:14.5px;line-height:1.5;font-feature-settings:'cv11','ss01'}
html.web body::before{inset:-20vh -10vw auto auto;width:70vw;height:70vh;background:radial-gradient(closest-side,var(--leucht),transparent 70%);animation:web-schweben 22s ease-in-out infinite alternate}
@keyframes web-schweben{from{transform:none}to{transform:translate(-8vw,6vh) scale(1.08)}}
html.web h1,html.web h2,html.web h3{font-family:var(--web-titel);font-weight:600;letter-spacing:-.015em}
html.web ::selection{background:var(--accent-soft2)}

/* ---- Rahmen: Seitenleiste 252 px + Inhalt ---- */
#webNav,#webSuche,#webVorzeile{display:none}
html.web #app{grid-template-columns:252px minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr)}
html.web #app>.tabbar{display:none!important}
html.web #mehrMenu,html.web #mehrBackdrop{display:none!important}
html.web #webNav{grid-area:seite;display:flex;flex-direction:column;min-height:0;height:100vh;overflow-y:auto;padding:22px 14px 16px;
  background:var(--barbg);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-right:1px solid var(--line);scrollbar-width:thin}
html.web .wn-marke{display:flex;align-items:center;gap:10px;padding:2px 10px 18px}
html.web .wn-zeichen{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,#5FA0B4,#3A7A8F);color:#fff;font:600 16px/1 var(--web-titel);box-shadow:0 6px 16px -6px #5FA0B4}
html.web .wn-marke b{display:block;font:600 19px/1 var(--web-titel);letter-spacing:-.02em;color:var(--text)}
html.web .wn-marke small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
html.web .wn-titel{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:12px 12px 4px}
html.web .wn-liste{display:flex;flex-direction:column;gap:2px}
html.web .wn-p{position:relative;display:flex;align-items:center;gap:11px;height:36px;flex:none;padding:0 10px 0 12px;border-radius:10px;width:100%;text-align:left;
  color:var(--text2);font-size:14px;font-weight:500;white-space:nowrap;transition:color .2s,background .25s var(--web-sanft),box-shadow .25s}
html.web .wn-p:hover{color:var(--text);background:rgba(127,127,127,.06)}
html.web .wn-p.an{background:var(--card);color:var(--accent-ink);font-weight:600;box-shadow:var(--sh-1)}
html.web .wn-p:focus-visible{box-shadow:var(--ring)}
html.web .wn-ic{width:18px;height:18px;flex:none;display:grid;place-items:center}
html.web .wn-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.web .wn-ic img{width:20px;height:20px;border-radius:6px;object-fit:cover}
html.web .wn-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.web .wn-badge{display:none;margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;font-variant-numeric:tabular-nums}
html.web .wn-badge.an{display:inline-block}
html.web .wn-p kbd{margin-left:auto;opacity:0;transition:opacity .2s}
html.web .wn-p:hover kbd,html.web .wn-p:focus-visible kbd{opacity:1}
html.web .wn-badge.an~kbd{display:none}
html.web .wn-badge.an+.wn-badge{margin-left:4px}
html.web .wn-bereit{background:#16a34a}
html.web kbd{font:600 10.5px/1 var(--web-schrift);color:var(--muted);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:3px 5px;background:var(--card)}
html.web .wn-fuss{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:16px 4px 0}
html.web .wn-status{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:12.5px}
html.web .wn-status b{display:block;font-weight:600;font-size:13px}
html.web .wn-status small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35}
html.web .wn-punkt{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;position:relative}
html.web .wn-punkt.gruen{background:var(--green)}
html.web .wn-punkt.gruen::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:web-puls 2.6s var(--web-sanft) infinite}
html.web .wn-punkt.orange{background:var(--amber)}
html.web .wn-punkt.rot{background:var(--red)}
@keyframes web-puls{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}
html.web .wn-klein{font-size:11.5px;color:var(--muted);padding:0 8px;line-height:1.45}
html.web .wn-link{color:var(--text2);text-decoration:underline;font-size:11.5px;padding:0}
/* Niedrige Fenster (MacBook-Browser): Leiste kompakter, damit Status und Umschalter sichtbar bleiben (Gegenprüfung S2) */
@media (max-height:920px){ html.web #webNav{padding:14px 12px 10px} html.web .wn-marke{padding-bottom:8px} html.web .wn-titel{padding:8px 12px 2px} html.web .wn-p{height:31px} html.web .wn-liste{gap:1px} html.web .wn-fuss{padding-top:10px;gap:6px} html.web .wn-status{padding:7px 10px} }
@media (max-height:760px){ html.web .wn-titel{display:none} html.web .wn-p{height:29px;font-size:13.5px} }

/* Rückweg in der klassischen Mac-Ansicht */
#webZurueck{display:none}
html.web-moeglich:not(.web) #webZurueck{display:block;margin-top:auto;padding:9px 14px;border-radius:12px;font-size:12.5px;font-weight:650;color:var(--accent-ink);text-align:left}
html.web-moeglich:not(.web) #webZurueck:hover{background:var(--card)}

/* ---- Kopfleiste: Suchfeld oben, darunter Vorzeile + großer Titel ---- */
html.web #app>.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"suche sync akt" "titel titel titel";
  column-gap:10px;row-gap:14px;align-items:center;padding:14px 40px 16px;min-height:0;background:var(--barbg)}
html.web #app>.topbar::before{display:none}
html.web #app>.topbar::after{background:var(--line);opacity:1}
html.web #app>.topbar .grow,html.web #sucheBtn,html.web #app>.topbar .ver-tag,html.web #app>.topbar .logo{display:none!important}
html.web #webSuche{grid-area:suche;display:flex;align-items:center;gap:10px;max-width:460px;height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--line2);
  background:var(--card);color:var(--muted);font-size:13.5px;transition:border-color .2s,box-shadow .2s;white-space:nowrap;overflow:hidden}
html.web #webSuche:hover{border-color:var(--accent2);box-shadow:var(--ring)}
html.web #webSuche svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
html.web #webSuche span{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.web #webSuche kbd{margin-left:auto}
html.web #syncInfo{grid-area:sync;margin:0!important}
html.web #headerAction{grid-area:akt;width:38px;height:38px;border-radius:11px;background:var(--card);border:1px solid var(--line2);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html.web #backBtn{grid-area:titel}
html.web #titleBlock{grid-area:titel;display:flex!important;flex-direction:column}
html.web #webVorzeile{display:block;margin:0 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--accent-ink)}
html.web #app>.topbar .sub{font:600 30px/1.15 var(--web-titel);letter-spacing:-.025em;margin:0;color:var(--text)}
html.web #app[data-view="heute"] #webVorzeile,html.web #app:not([data-view]) #webVorzeile{display:none}
/* Chats und offener Chat: eine Zeile (Titel links, Suche daneben) – mehr Platz für Liste und Verlauf (Gegenprüfung K6) */
html.web #app[data-view="inbox"]>.topbar,html.web #app[data-view="detail"]>.topbar{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"titel suche sync akt";column-gap:24px;padding:12px 40px 12px}
html.web #app[data-view="inbox"] #webVorzeile,html.web #app[data-view="detail"] #webVorzeile{display:none}
html.web #app[data-view="inbox"]>.topbar .sub,html.web #app[data-view="detail"]>.topbar .sub{font-size:22px;max-width:360px}

/* ---- Inhalt: links bündig wie jubook, großzügige Ränder ---- */
html.web #app>main>.screen.active:not(#screen-inbox):not(#screen-detail):not(#screen-kalender){max-width:1280px;margin:0;padding:22px 40px 80px}
html.web #app>main>#screen-kalender.active{padding:16px 40px 24px}
html.web #app[data-view="inbox"]>main,html.web #app[data-view="detail"]>main{grid-template-columns:400px minmax(0,1fr)}
html.web #app[data-view="inbox"] #screen-inbox,html.web #app[data-view="detail"] #screen-inbox{padding:14px 14px 40px 28px;background:transparent}
html.web #app[data-view="detail"] #screen-detail{background:var(--card2)}
html.web #app[data-view="inbox"]>main::after{content:"Chat links auswählen – ↑ ↓ blättern";font-size:13.5px;color:var(--muted)}

/* Heute als Übersicht in zwei Spalten; Datum, Türcode und Tageszusammenfassung über die volle Breite */
html.web #heuteInhalt{columns:2 440px;column-gap:18px}
html.web #heuteInhalt>*{break-inside:avoid}
html.web #heuteInhalt>.heute-datum-zeile,html.web #heuteInhalt>.tuercode,html.web #heuteInhalt>.brief-karte,html.web #heuteInhalt>#leinwand{column-span:all}
html.web #heuteInhalt>.heute-block{margin-bottom:18px}

/* ---- Bausteine: Karten statt Glas (Farben kommen aus den Token oben – Varianten wie Notfall/SOS bleiben) ---- */
html.web .card,html.web .set-row,html.web .conv,html.web .heute-block,html.web .heute-karte,html.web .kb-apt,html.web .task-card,html.web .info-card,html.web .ki,html.web .sugg,
html.web .kz-box,html.web .karte-weiss,html.web .bewkarte-k,html.web .bewkachel,html.web .bewstandort,html.web .wartung-block,html.web .kalscroll,html.web .sk,html.web .brief-karte{
  backdrop-filter:none;-webkit-backdrop-filter:none}
html.web .heute-block,html.web .brief-karte{border-radius:16px}
html.web .conv{transition:box-shadow .3s,border-color .3s}
html.web .conv:not(.aktiv):hover{box-shadow:var(--sh-2)}
html.web .tuercode{background:linear-gradient(120deg,#5FA0B4,#2F6F84);border-radius:16px;box-shadow:0 10px 30px -12px rgba(47,111,132,.55)}
html.web .section-title{font-size:10.5px;font-weight:650;letter-spacing:.09em;color:var(--muted);padding:18px 2px 8px}
html.web .btn{border-radius:10px;font-weight:600;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .2s var(--web-sanft),box-shadow .2s,border-color .2s}
html.web .btn:not(.primary):not(.sos):not(.notfall):not(.wa):not(.zl-rot):not(.zl-ja){background:var(--card);border-color:var(--line2);box-shadow:none}
html.web .btn:not(.primary):not(.sos):not(.notfall):not(.wa):not(.zl-rot):not(.zl-ja):hover{border-color:var(--accent2);box-shadow:var(--ring)}
html.web .btn.primary{background:#3A7A8F;border-color:transparent;color:#fff;text-shadow:none;box-shadow:none}
html.web .btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px #3A7A8F}
@media (prefers-color-scheme: dark){ html.web .btn.primary{background:#3B7E93;color:#fff} }
html.web .chip,html.web .sugg-chip,html.web .tmpl-btn,html.web .seg,html.web .kal-art{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html.web input,html.web textarea,html.web select{box-shadow:none}
html.web input:focus,html.web textarea:focus,html.web select:focus{border-color:var(--accent2);box-shadow:var(--ring)}
html.web .composer{background:var(--barbg)}

/* Blätter, Suche und Menüs: Karten mit weichem Schatten */
html.web #sheet,html.web #suche{background:var(--glas-blatt);border:1px solid var(--line);box-shadow:var(--sh-3)}
/* Geschlossenes Blatt ganz weg (24.10.2026): am Mac sitzt es 24 px über dem Rand – translateY(105 %) ließ unten rechts einen weißen Rest stehen */
html.web #sheet:not(.open){transform:translateY(calc(100% + 60px));visibility:hidden;transition:transform .26s var(--jm-in,ease),visibility 0s linear .26s}
html.web .toast{font-family:var(--web-schrift)}

@media (prefers-reduced-motion:reduce){ html.web body::before,html.web .wn-punkt.gruen::after{animation:none} html.web .conv,html.web .btn{transition:none} }

/* Heute am PC (Pascal, 24.10.2026): Türcode weg („der türcode kann in der reinen ansicht am pc weg“, am Handy bleibt er);
   Tageszusammenfassung voll ausgeklappt mit ganzem Text, Zahlen und Hinweisen (briefingKarteHtml → .brief-voll) */
html.web #heuteInhalt>.tuercode{display:none}
html.web .brief-karte.brief-voll{cursor:default}
html.web .brief-voll .brief-blatt{margin-top:10px}
html.web .brief-voll .bb-zahlen{margin-bottom:12px}
html.web .brief-voll .bb-text{font-size:15px;line-height:1.6}
html.web .brief-voll .bb-text p:last-child{margin-bottom:0}

/* ===== Block 10 (id="web-seiten") ===== */

/* JUPAS° Web-Oberfläche – eigene Seiten (24.10.2026): Portale & Preise, Rabattcodes. Look wie jubook-Controlling.
   Quelle: tools/web/seiten.css – eingebettet als Style „web-seiten“. Alles an html.web. */
html.web .web-seite .card{margin:0 0 18px;padding:18px 20px;border-radius:16px}
html.web .web-seite h2{font:600 15.5px/1.3 var(--web-titel);margin:0;letter-spacing:-.01em}
html.web .wp-leiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
html.web .segment{display:inline-flex;padding:3px;border-radius:11px;background:var(--bg2);border:1px solid var(--line)}
html.web .segment button{height:28px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text2);transition:color .2s,background .25s var(--web-sanft),box-shadow .25s}
html.web .segment button:hover{color:var(--text)}
html.web .segment button.an{background:var(--card);color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 1px var(--line)}
html.web .wp-datum{height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--text);padding:0 10px;font:inherit;font-size:13px}
html.web .wp-leiste .btn{height:34px;padding:0 14px;font-size:13px}
html.web .btn.klein{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
html.web .chip.gruen{background:var(--green-soft);color:var(--green);border-color:transparent}
html.web .chip.orange{background:var(--amber-soft);color:var(--amber);border-color:transparent}
html.web .chip.petrol{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
html.web .chip.leise{background:transparent;border:1px solid var(--line2);color:var(--muted)}
html.web .web-seite .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}

/* Portal-Karten oben (wie die KPI-Kacheln im Controlling) */
html.web .wp-karten{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}
html.web .wp-karte{margin:0!important;display:flex;flex-direction:column;gap:6px;min-height:128px;position:relative;overflow:hidden}
html.web .wp-karte::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pf)}
html.web .wp-kname{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text2)}
html.web .wp-kname i{width:9px;height:9px;border-radius:3px;background:var(--pf);flex:none}
html.web .wp-kwert{font:600 28px/1.1 var(--web-titel);letter-spacing:-.025em;color:var(--text);font-variant-numeric:tabular-nums}
html.web .wp-kwert small{font:500 12px var(--web-schrift);color:var(--amber);letter-spacing:0}
html.web .wp-kfuss{margin-top:auto;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html.web .wp-skelett{min-height:128px;margin:0!important;background:linear-gradient(90deg,var(--bg2) 0%,var(--card2) 40%,var(--bg2) 80%);background-size:300% 100%;animation:web-schimmer 1.4s linear infinite}
html.web .wp-skelett.gross{min-height:360px;margin-top:18px!important}
@keyframes web-schimmer{from{background-position:100% 0}to{background-position:-200% 0}}

/* Bestpreisgarantie */
html.web .wp-best{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--accent-soft),var(--card) 70%)}
html.web .wp-best.gut{background:linear-gradient(120deg,var(--green-soft),var(--card) 70%)}
html.web .wp-best.schlecht{background:linear-gradient(120deg,var(--red-soft),var(--card) 70%)}
html.web .wp-bzeichen{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--card);box-shadow:var(--sh-1);font:700 18px/1 var(--web-titel);color:var(--accent-ink)}
html.web .wp-best.gut .wp-bzeichen{color:var(--green)} html.web .wp-best.schlecht .wp-bzeichen{color:var(--red)}
html.web .wp-best b{font:600 15.5px/1.3 var(--web-titel)}
html.web .wp-btext{color:var(--text2);font-size:13.5px;margin-top:2px}

/* Tabelle je Wohnung */
html.web .wp-tab{padding:18px 0 6px!important}
html.web .wp-tkopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 20px 12px}
html.web .wp-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
html.web .wp-scroll{overflow-x:auto}
html.web .wp-tab table{width:100%;border-collapse:collapse;font-size:13px}
html.web .wp-tab th,html.web .wp-tab td{padding:10px 14px;text-align:left;border-top:1px solid var(--line);vertical-align:middle;white-space:nowrap}
html.web .wp-tab thead th{border-top:0;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:4px}
html.web .wp-tab thead th i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:7px;vertical-align:0}
html.web .wp-tab tbody th{font-weight:600;color:var(--text);padding-left:20px}
html.web .wp-tab tbody th small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
html.web .wp-tab tbody tr:hover td,html.web .wp-tab tbody tr:hover th{background:var(--card2)}
html.web .wp-z{cursor:default}
html.web .wp-st{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;font-size:11.5px;font-weight:800;margin-right:8px;vertical-align:middle}
html.web .wp-w{display:inline-flex;flex-direction:column;vertical-align:middle;line-height:1.25}
html.web .wp-w b{font-weight:600;font-variant-numeric:tabular-nums}
html.web .wp-w small{font-size:11px;color:var(--muted)}
html.web .wp-ok .wp-st,html.web .wp-legende .wp-ok{color:var(--green)} html.web .wp-ok .wp-st{background:var(--green-soft)}
html.web .wp-warnung .wp-st,html.web .wp-legende .wp-warnung{color:var(--amber)} html.web .wp-warnung .wp-st{background:var(--amber-soft)}
html.web .wp-fehler .wp-st,html.web .wp-legende .wp-fehler{color:var(--red)} html.web .wp-fehler .wp-st{background:var(--red-soft)}
html.web .wp-aus .wp-st{color:var(--muted);background:var(--bg2)} html.web .wp-aus .wp-w b{color:var(--muted)}
html.web .wp-verletzt th,html.web .wp-verletzt td{background:var(--red-soft)!important}
html.web .wp-fusszeile{font-size:12px;color:var(--muted);margin:4px 2px 18px;line-height:1.5}
html.web .wp-fehlerzeile{color:var(--amber);margin-top:4px}
html.web .card.wp-fehler{color:var(--red);background:var(--red-soft)}

/* Rabattcodes */
html.web .wc-info{font-size:13.5px;color:var(--text2);background:linear-gradient(120deg,var(--accent-soft),var(--card) 70%)}
html.web .wc-info b{color:var(--text)}
html.web .wc-meldung{font-weight:600;font-size:13.5px}
html.web .wc-meldung.gut{color:var(--green);background:var(--green-soft)} html.web .wc-meldung.schlecht{color:var(--red);background:var(--red-soft)}
html.web .wc-raster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:18px;align-items:start}
html.web .wc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;letter-spacing:.02em;background:var(--bg2);border-radius:7px;padding:3px 8px}
html.web .wc-prozent{font:600 15px var(--web-titel);font-variant-numeric:tabular-nums}
html.web .wc-notiztext{white-space:normal!important;color:var(--text2);max-width:260px}
html.web .wc-akt{text-align:right!important}
html.web .wc-akt .btn+.btn{margin-left:6px}
html.web .wc-aus td,html.web .wc-aus th,html.web .wc-abgelaufen td{color:var(--muted)}
html.web .wc-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:12px}
html.web .wc-edit td{background:var(--accent-soft)!important;white-space:normal}
html.web .wc-edit .wc-form{grid-template-columns:auto 110px 150px 150px minmax(160px,1fr) auto;align-items:end;margin:0}
html.web .wc-form label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
html.web .wc-form label{min-width:0}
html.web .web-seite .wc-form input{width:100%;margin:0;box-sizing:border-box;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--card);color:var(--text);padding:0 10px;font:inherit;font-size:13.5px;min-width:0;box-shadow:none}
html.web .wc-form input[name="code"]{text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
html.web .wc-form input[name="code"]::placeholder{text-transform:none;font-family:var(--web-schrift)}
html.web .wc-neu .wc-notiz,html.web .wc-neu .wc-fknoepfe{grid-column:1 / -1}
html.web .wc-fcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;align-self:center}
html.web .wc-fknoepfe{display:flex;gap:8px}
html.web .wc-stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
html.web .wc-stufen>div{background:var(--bg2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column}
html.web .wc-stufen b{font:600 20px/1.1 var(--web-titel)} html.web .wc-stufen span{font-size:11.5px;color:var(--muted)}
html.web .wc-stufen .wc-sonder{grid-column:1 / -1;background:var(--accent-soft)}
html.web .wc-lang .wp-fusszeile{margin:10px 0 0}
@media (max-width:1280px){ html.web .wp-karten{grid-template-columns:repeat(3,minmax(0,1fr))} html.web .wc-raster{grid-template-columns:1fr} }
/* E15: Soll aus StayLabs (Regeln → Portale) gegen Channex */
html.web .wp-ksoll{font-size:12px;color:var(--muted);margin-top:2px}html.web .wp-ksoll.abw{color:var(--red);font-weight:600}
html.web .wp-z.wp-abw{box-shadow:inset 3px 0 0 var(--red)}html.web .wp-z .wp-abwt{color:var(--red);font-weight:600}
/* Channex an StayLabs angleichen (Bau-Stand Nr. 15) */
html.web .wa{display:flex;flex-direction:column;gap:8px}html.web .wa-kopf{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}html.web .wa-kopf span{color:var(--muted);font-size:13px}
html.web .wa-text{font-size:13px;color:var(--muted)}html.web .wa-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}html.web .wa-zeile select{max-width:100%;min-height:34px}
html.web .wa-meldung{font-size:13px;font-weight:600}html.web .wa-meldung.gut{color:var(--green)}html.web .wa-meldung.schlecht{color:var(--red)}
html.web .wa-liste{margin:0;padding-left:18px;font-size:12px;color:var(--muted)}html.web .wa-liste li{overflow-wrap:anywhere}

/* Preismodell (25.10.2026) */
html.web .wm-felder{display:flex;flex-wrap:wrap;gap:12px 22px;margin:10px 0 4px}
html.web .wm-felder label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
html.web .wm-felder input{width:72px;text-align:right;font:inherit;font-size:15px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--card2);color:var(--text)}
html.web .wp-w small.wp-zahlt{color:var(--text);opacity:.8}

/* ===== Portale & Preise – aufgeräumt (25.10.2026, Pascal: „richtig schönes Frontend ohne den ganzen Text … wie eine finale richtige App“) ===== */
html.web .wp-luft{flex:1}
html.web .wp-stand{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
html.web .wp-leiste .btn.wp-neu{width:34px;padding:0;font-size:16px;border-radius:10px;display:inline-grid;place-items:center}
html.web .wp-dreh{display:inline-block;animation:wp-dreh .9s linear infinite}@keyframes wp-dreh{to{transform:rotate(360deg)}}
html.web .wp-karten{gap:12px;margin-bottom:14px}
html.web .wp-karte{min-height:0;gap:4px;padding:16px 18px!important;border:1px solid var(--line);box-shadow:none;transition:border-color .2s,box-shadow .2s}
html.web .wp-karte:hover{box-shadow:var(--sh-1)}
html.web .wp-karte::before{width:100%;height:3px;bottom:auto;opacity:.9}
html.web .wp-kname{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.01em}
html.web .wp-kname i{width:8px;height:8px;border-radius:50%}
html.web .wp-punkt{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
html.web .wp-karte.gelb .wp-punkt{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
html.web .wp-karte.rot .wp-punkt{background:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
html.web .wp-karte.rot{border-color:var(--red)}
html.web .wp-kwert{font:600 30px/1.1 var(--web-titel);letter-spacing:-.03em;margin-top:6px}
html.web .wp-kunter{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:16px}
html.web .wp-khin{color:var(--amber);font-weight:600}html.web .wp-karte.rot .wp-khin{color:var(--red)}
/* Statuszeile */
html.web .card.ws{display:flex;align-items:center;gap:0;padding:0!important;overflow:hidden;margin-bottom:14px!important}
html.web .ws-teil{display:flex;align-items:center;gap:10px;padding:14px 20px;min-height:52px;font-size:13px;color:var(--text2);flex-wrap:wrap}
html.web .ws-teil+.ws-teil{border-left:1px solid var(--line)}
html.web .ws-teil:first-child{flex:0 0 auto}html.web .ws-teil:nth-child(2){flex:1 1 auto}
html.web .ws-teil b{color:var(--text);font-weight:600}
html.web .ws-ic{width:24px;height:24px;border-radius:8px;display:inline-grid;place-items:center;font-weight:800;font-size:13px;background:var(--bg2);color:var(--muted)}
html.web .ws-gut .ws-ic{background:var(--green-soft);color:var(--green)}html.web .ws-schlecht .ws-ic{background:var(--red-soft);color:var(--red)}
html.web .ws-lab{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html.web .ws-wert{background:var(--bg2);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--text2);white-space:nowrap}
html.web .ws-wert b{font-variant-numeric:tabular-nums}
html.web .ws-modell{flex-wrap:nowrap}html.web .ws-pillen{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
html.web .ws-schlecht>b{color:var(--red)}html.web .ws-gut>b{color:var(--green)}
html.web .ws-schalter{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer}
html.web .ws-schalter i{width:28px;height:18px;border-radius:999px;background:var(--line2);position:relative;transition:background .2s}
html.web .ws-schalter i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--web-sanft)}
html.web .ws-schalter.an i{background:var(--green)}html.web .ws-schalter.an i::after{transform:translateX(10px)}
html.web .ws-schalter:disabled{opacity:.5;cursor:default}
html.web .web-seite>.wa-meldung,html.web .web-seite .wa-meldung{margin:-6px 4px 12px}
/* Bearbeiten / Angleichen kompakt */
html.web .card.wm,html.web .card.wa{padding:14px 20px!important;margin-bottom:14px!important}
html.web .wm-felder{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 20px;margin:0}
html.web .wm-felder label{font-size:11.5px;font-weight:600}
html.web .wm-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
html.web .btn.wm-aus{color:var(--red)}
html.web .wa-zeile{gap:10px}html.web .wa-zeile b{font-weight:600}
/* Tabelle: nur der Preis, den der Gast zahlt */
html.web .wp-tab{padding:16px 0 4px!important}
html.web .wp-tkopf{padding:0 20px 10px;justify-content:flex-start;gap:10px}
html.web .wp-tdatum{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
html.web .wp-tab th,html.web .wp-tab td{padding:11px 16px}
html.web .wp-tab tbody th{font-size:13.5px}
html.web .wp-tab td.wp-z b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
html.web .wp-tab td.wp-z{cursor:default}
html.web .wp-tab td .wp-zh{display:block;font-style:normal;font-size:11px;font-weight:600;margin-top:2px}
html.web .wp-tab td.wp-rot{box-shadow:inset 3px 0 0 var(--red)}html.web .wp-tab td.wp-rot .wp-zh{color:var(--red)}
html.web .wp-tab td.wp-gelb .wp-zh{color:var(--amber)}
html.web .wp-tab .wp-leer{color:var(--muted)}
html.web .wp-fehlerzeile{font-size:12.5px;margin:0 4px 10px}
@media (max-width:1280px){ html.web .card.ws{flex-wrap:wrap} html.web .ws-teil{flex:1 1 100%} html.web .ws-teil+.ws-teil{border-left:0;border-top:1px solid var(--line)} }
html.web .wp-tfuss{font-size:12px;color:var(--muted);padding:10px 20px 6px;border-top:1px solid var(--line)}
html.web .wp-tab tbody td:nth-child(2){background:color-mix(in srgb,var(--website) 7%,transparent)}
/* Statuszeile bei schmaleren Fenstern: Bestpreis und Channex bleiben einzeilig, nur die Modell-Werte dürfen umbrechen */
html.web .ws-teil:first-child,html.web .ws-teil:last-child{flex-wrap:nowrap;white-space:nowrap}
html.web .ws-teil:nth-child(2){min-width:0;row-gap:6px}
html.web .ws-teil:nth-child(2) .btn{margin-left:auto}
@media (max-width:1500px){ html.web .ws-wert{padding:2px 8px;font-size:11.5px} html.web .ws-teil{padding:12px 16px} }
/* Rabatt-Aufschlag (31.10.2026 abends): Portal-Pillen als Schalter */
html.web .ws-rabatt{flex-wrap:nowrap}html.web .ws-rabatt .ws-pillen{flex:0 1 auto}
html.web button.ws-pille{border:1px solid transparent;cursor:pointer;font:inherit;font-size:12px}
html.web .ws-pille.an,html.web .ws-rabatt span.ws-wert.an{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
html.web button.ws-pille:disabled{opacity:.6;cursor:default}

/* ===== Block 11 (id="web-cockpit") ===== */

/* JUPAS° Web-Oberfläche – Cockpit (Heute) und breiter Kalender (24.10.2026). Look wie jubook-Controlling (KPI-Kacheln).
   Quelle: tools/web/cockpit.css – eingebettet als Style „web-cockpit“. Alles an html.web. */
html.web #webCockpit{column-span:all;margin:0 0 18px}
html.web .wk-kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:16px;margin-bottom:16px}
html.web .wk-kpis.n3{grid-template-columns:1.5fr 1fr 1fr}
html.web .wk-kpis.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
html.web .wk-kpis.n1{grid-template-columns:minmax(0,1fr)}
html.web .wk-kpi{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-height:132px;padding:18px 20px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);color:var(--text);font:inherit;cursor:pointer;
  transition:transform .25s var(--web-sanft),box-shadow .25s var(--web-sanft),border-color .2s}
html.web .wk-kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line2)}
html.web .wk-kpi:focus-visible{outline:none;box-shadow:var(--ring)}
html.web .wk-titel{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text2)}
html.web .wk-titel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent-ink);flex:none}
html.web .wk-titel em{font-style:normal;font-weight:500;color:var(--muted)}
html.web .wk-wert{font:600 30px/1.1 var(--web-titel);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap;position:relative;z-index:1}
html.web .wk-wert small{font:500 15px var(--web-schrift);color:var(--muted);letter-spacing:0}
html.web .wk-fuss{margin-top:auto;font-size:12.5px;color:var(--muted);position:relative;z-index:1;line-height:1.45}
html.web .wk-delta{display:inline-flex;align-items:center;font-size:11.5px;font-weight:650;border-radius:999px;padding:2px 8px;background:var(--bg2);color:var(--text2);margin-right:4px;font-variant-numeric:tabular-nums}
html.web .wk-delta.hoch{background:var(--green-soft);color:var(--green)}
html.web .wk-delta.runter{background:var(--red-soft);color:var(--red)}
html.web .wk-meter{display:block;height:6px;border-radius:999px;background:var(--bg2);overflow:hidden;margin-top:2px}
html.web .wk-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .6s var(--web-sanft)}
html.web .wk-kpi.breit{padding-bottom:50px}
html.web .wk-funke{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;pointer-events:none}
html.web .wk-funke .fl{fill:var(--accent-soft);opacity:.9}
html.web .wk-funke .ln{fill:none;stroke:var(--accent2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}

html.web .wk-reihe{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:16px}
html.web .wk-reihe.allein{grid-template-columns:1fr}
html.web .wk-karte{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);padding:18px 20px}
html.web .wk-kkopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
html.web .wk-kkopf h2{font:600 15.5px/1.3 var(--web-titel);margin:0;letter-spacing:-.01em}
html.web .wk-leise{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Säulen: Belegung je Nacht (eine Reihe, eine Farbe, Raster leise) */
html.web .wk-belegung{display:flex;flex-direction:column}
html.web .wk-saeulen{position:relative;display:flex;align-items:stretch;gap:2px;flex:1;min-height:150px;padding-left:34px}
html.web .wk-raster{position:absolute;left:34px;right:0;top:0;bottom:20px;pointer-events:none}
html.web .wk-raster i{position:absolute;left:0;right:0;border-top:1px dashed var(--line2)}
html.web .wk-raster i:last-child{border-top:1px solid var(--line2)}
html.web .wk-raster b{position:absolute;left:-34px;top:-7px;font-size:10px;font-weight:500;color:var(--muted)}
html.web .wk-sp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;cursor:default}
html.web .wk-sb{flex:1;display:flex;align-items:flex-end;border-radius:4px 4px 0 0}
html.web .wk-sb i{display:block;width:100%;background:var(--accent2);border-radius:4px 4px 0 0;transition:height .5s var(--web-sanft),background .15s}
html.web .wk-sp:hover .wk-sb{background:var(--bg2)}
html.web .wk-sp:hover .wk-sb i{background:var(--accent-ink)}
html.web .wk-sp span{height:20px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:visible;padding-top:5px;font-variant-numeric:tabular-nums}
html.web .wk-sp.erst span{color:var(--accent-ink);font-weight:650}

/* Buchungsquellen: ein gestapelter Balken + Liste (Farben wie die Kalender-Legende) */
html.web .wk-stapel{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;background:var(--card)}
html.web .wk-stapel i{display:block;min-width:4px}
html.web .wk-qliste{display:grid;grid-template-columns:1fr;gap:7px;margin-top:14px}
html.web .wk-qliste div{display:grid;grid-template-columns:10px 1fr auto 34px;align-items:center;gap:9px;font-size:13px}
html.web .wk-qliste i{width:10px;height:10px;border-radius:3px}
html.web .wk-qliste b{font-weight:650;font-variant-numeric:tabular-nums}
html.web .wk-qliste small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
html.web .wk-direkt{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
html.web .wk-direkt b{color:var(--text)}

html.web .wk-tip{position:fixed;z-index:9000;pointer-events:none;background:var(--text);color:var(--card);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;box-shadow:var(--sh-2);white-space:nowrap;display:none}

@media (max-width:1280px){
  html.web .wk-kpis,html.web .wk-kpis.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.web .wk-reihe{grid-template-columns:1fr}
}

/* ---- Kalender breit: Leiste, Tagesbreite, Zeile „Frei“ ---- */
html.web #webKalLeiste{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
html.web #webKalLeiste .segment{display:inline-flex;padding:3px;border-radius:11px;background:var(--bg2);border:1px solid var(--line)}
html.web #webKalLeiste .segment button{height:28px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text2)}
html.web #webKalLeiste .segment button.an{background:var(--card);color:var(--accent-ink);box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 1px var(--line)}
html.web .wk-kalnav{display:flex;gap:6px}
html.web .wk-kalnav .btn{height:32px;min-height:32px;padding:0 12px;font-size:13px}
html.web #kalWrap[data-zb] .kalzelle,html.web #kalWrap[data-zb] .kalhead .kaltag,html.web #kalWrap[data-zb] .kalfuss .kaltag{width:var(--kal-zb)!important}
html.web #kalWrap[data-zb="kompakt"] .kalhead .kaltag,html.web #kalWrap[data-zb="kompakt"] .kalfuss .kaltag{font-size:9px;letter-spacing:0}
html.web #kalWrap[data-zb="kompakt"] .kalhead .kaltag b,html.web #kalWrap[data-zb="kompakt"] .kalfuss .kaltag b{font-size:12.5px}
html.web #kalWrap .wk-freirow{border-top:1px solid var(--line2);background:var(--card2)}
html.web #kalWrap .wk-freirow .kalname{background:var(--card2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
html.web #kalWrap .wk-frei{height:30px;display:grid;place-items:center;font-size:11.5px;font-weight:650;color:var(--green);font-variant-numeric:tabular-nums}
html.web #kalWrap .wk-frei.voll{color:var(--muted2);font-weight:500}

/* ===== Block 12 (id="web-chats") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Chats dreispaltig (24.10.2026): Liste · Verlauf · Gast-Infos.
   Quelle: tools/web/chats.css – eingebettet als Style „web-chats“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Die dritte Spalte nur bei html.web-drei (Fenster ≥ 1400 px).
============================================================ */
html.web #webGast{display:none}

/* Spalten: Liste und Gast-Spalte wachsen mit dem Fenster, der Verlauf bekommt den Rest */
html.web.web-drei #app[data-view="inbox"]>main,html.web.web-drei #app[data-view="detail"]>main{grid-template-columns:clamp(320px,24vw,400px) minmax(0,1fr) clamp(300px,22vw,380px)}
html.web.web-drei #app[data-view="inbox"]>main::after{grid-column:2 / 4}
html.web.web-drei #app[data-view="inbox"] #screen-inbox,html.web.web-drei #app[data-view="detail"] #screen-inbox{padding:14px 12px 40px 20px}
html.web.web-drei #app[data-view="detail"] #webGast{display:block;grid-column:3;grid-row:1;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 16px 40px;background:var(--bg);border-left:1px solid var(--line);scrollbar-width:thin}

/* Mitte: nur noch Verlauf + Antwortfeld – der Mini-Kopf ist überflüssig (Name steht oben und rechts) */
html.web.web-drei #app[data-view="detail"] #screen-detail .chatpin-anker{display:none}
html.web.web-drei #app[data-view="detail"] #screen-detail{padding-top:6px}
html.web.web-drei #app[data-view="detail"] #screen-detail .msg{max-width:min(78%,640px)}

/* Rechts: Kopf, Buchungskarte ganz aufgeklappt */
html.web #webGast .wg-kopf,html.web #webGast .wg-titel{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding:4px 4px 8px}
html.web #webGast .wg-titel{padding:18px 4px 8px}
html.web #webGast .info-card{margin:0;padding:16px;border-radius:16px}
html.web #webGast .info-top{cursor:default!important;align-items:flex-start}
html.web #webGast .info-top .avatar{width:44px;height:44px;border-radius:14px}
html.web #webGast .info-top .name{font:600 18px/1.25 var(--web-titel);letter-spacing:-.015em}
html.web #webGast #infoChev{display:none}
html.web #webGast .schnell{grid-template-columns:repeat(3,1fr)}
html.web #webGast .schnell button[onclick="buchungBlatt()"]{display:none}
html.web #webGast .schnell button{min-height:50px;border-radius:11px;background:var(--card2)}
html.web #webGast .schnell button:not(:disabled):hover{border-color:var(--accent2);color:var(--accent-ink)}
html.web #webGast .wg-karte{margin-top:12px;padding:14px 16px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
html.web #webGast .wg-karte::before{content:'Buchung';display:block;font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
html.web #webGast #infoRest{display:block!important}
html.web #webGast .info-grid{gap:12px 12px;margin-top:10px}
html.web #webGast .info-grid .v{font-size:13.5px;overflow-wrap:anywhere}
html.web #webGast .sz-zeile{grid-template-columns:1fr}
html.web #webGast .seg{display:flex}
html.web #webGast .seg button{flex:1}

/* Schlagworte und Schnellaktionen unter der Karte */
html.web #webGast .tags-row{margin:12px 0 0;padding:0}
html.web #webGast .smart{margin:12px 0 0}
html.web #webGast .smart .sbtn{padding:11px 13px;font-size:13px;border-radius:12px}
html.web #webGast .smart .sbtn small{font-size:11.5px}

/* Weitere Aufenthalte desselben Gastes */
html.web #webGast .wg-auf{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "z p";align-items:center;column-gap:8px;width:100%;
  text-align:left;padding:9px 12px;margin:0 0 6px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--text);transition:border-color .2s,box-shadow .2s}
html.web #webGast .wg-auf:hover{border-color:var(--accent2);box-shadow:var(--ring)}
html.web #webGast .wg-auf b{grid-area:n;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.web #webGast .wg-auf span{grid-area:z;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
html.web #webGast .wg-auf i{grid-area:p;font-style:normal;color:var(--muted2);font-size:16px}
html.web #webGast .wg-auf.storno b{color:var(--muted);text-decoration:line-through}

/* Mitte wie eine Chat-App: kurzer Verlauf steht unten am Antwortfeld, nicht oben mit Leerraum darunter */
html.web.web-drei #app[data-view="detail"] #screen-detail{display:flex;flex-direction:column}
html.web.web-drei #app[data-view="detail"] #screen-detail>*{flex-shrink:0}
html.web.web-drei #app[data-view="detail"] #screen-detail>.thread{margin-top:auto}

/* ===== Block 13 (id="web-tafel") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Aufgaben als Tafel (24.10.2026): Offen · In Arbeit · Erledigt.
   Quelle: tools/web/tafel.css – eingebettet als Style „web-tafel“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
html.web #screen-aufgaben.wt-tafel-an #aufgabenList{display:none}
html.web #screen-aufgaben.wt-tafel-an{max-width:none!important}
html.web #webTafelWahl{display:inline-flex;flex:none;gap:2px;padding:3px;margin:0 0 0 auto;border-radius:11px;background:var(--card3);border:1px solid var(--line)}
html.web #webTafelWahl button{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text2)}
html.web #webTafelWahl button.an{background:var(--card);color:var(--accent-ink);box-shadow:var(--sh-1)}
html.web #webTafelWahl button:focus-visible{box-shadow:var(--ring)}

html.web #webTafel .wt-leiste{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:2px 0 14px}
html.web #webTafel .wt-filter{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
html.web #webTafel .wt-filter select{width:auto;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--card);color:var(--text);font-size:13px!important}
html.web #webTafel .wt-tipp{font-size:12px;color:var(--muted)}

/* Drei Spalten nebeneinander, jede scrollt für sich */
html.web #webTafel .wt-raster{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:16px;align-items:start}
html.web #webTafel .wt-spalte{display:flex;flex-direction:column;min-height:180px;max-height:calc(100vh - 250px);border-radius:16px;background:var(--bg2);border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s,background .2s}
html.web #webTafel .wt-spalte.wt-drueber{border-color:var(--accent2);box-shadow:var(--ring);background:var(--accent-soft)}
html.web #webTafel .wt-spalte header{display:flex;align-items:center;gap:8px;padding:12px 14px 8px}
html.web #webTafel .wt-spalte h3{margin:0;font:600 14px/1.2 var(--web-titel);letter-spacing:-.01em;color:var(--text)}
html.web #webTafel .wt-spalte header::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--muted2)}
html.web #webTafel .wt-arbeit header::before{background:var(--accent)}
html.web #webTafel .wt-erledigt header::before{background:var(--green)}
html.web #webTafel .wt-n{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
html.web #webTafel .wt-liste{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
html.web #webTafel .wt-leer{padding:22px 10px;text-align:center;font-size:12.5px;color:var(--muted);border:1.5px dashed var(--line2);border-radius:12px}

/* Karten */
html.web #webTafel .wt-karte{position:relative;padding:11px 12px 10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);cursor:grab;
  transition:box-shadow .2s,border-color .2s,opacity .2s,transform .2s var(--web-sanft)}
html.web #webTafel .wt-karte::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--line2)}
html.web #webTafel .wt-karte.p1::before{background:var(--red)}
html.web #webTafel .wt-karte.p2::before{background:#ea580c}
html.web #webTafel .wt-karte.p3::before{background:#ca8a04}
html.web #webTafel .wt-karte:hover{border-color:var(--line2);box-shadow:var(--sh-2)}
html.web #webTafel .wt-karte:focus-visible{outline:none;box-shadow:var(--ring)}
html.web #webTafel .wt-karte.wt-zieht{opacity:.45;transform:scale(.98)}
html.web #webTafel .wt-erledigt .wt-karte{opacity:.78}
html.web #webTafel .wt-erledigt .wt-titel{text-decoration:line-through;text-decoration-color:var(--muted2)}
html.web #webTafel .wt-oben{display:flex;align-items:center;gap:6px;margin-bottom:6px}
html.web #webTafel .wt-oben .task-prio{cursor:default;font-size:10.5px;padding:3px 8px}
html.web #webTafel .wt-mini{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;color:var(--muted);flex:none}
html.web #webTafel .wt-mini:first-of-type{margin-left:auto}
html.web #webTafel .wt-mini:hover{background:var(--card2);color:var(--text)}
html.web #webTafel .wt-titel{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
html.web #webTafel .wt-detail{margin-top:3px;font-size:12px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.web #webTafel .wt-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;font-size:11.5px;color:var(--text2)}
html.web #webTafel .wt-wohn{font-weight:600}
html.web #webTafel .wt-f.rot{color:var(--red);font-weight:700}
html.web #webTafel .wt-f.orange{color:var(--amber);font-weight:700}
html.web #webTafel .wt-alt{color:var(--amber);font-weight:600}
html.web #webTafel .wt-alt.rot{color:var(--red)}
html.web #webTafel .wt-unten{display:flex;align-items:center;gap:8px;margin-top:9px;min-height:26px}
html.web #webTafel .wt-wer{font-size:11.5px;color:var(--muted)}
html.web #webTafel .wt-knoepfe{margin-left:auto;display:flex;gap:6px}
html.web #webTafel .wt-k{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text2);background:var(--card2);border:1px solid var(--line);white-space:nowrap}
html.web #webTafel .wt-k:hover{border-color:var(--accent2);color:var(--accent-ink)}
html.web #webTafel .wt-k.wt-fertig:hover{border-color:var(--green);color:var(--green)}
html.web #webTafel .wt-k:focus-visible,html.web #webTafel .wt-mini:focus-visible{box-shadow:var(--ring)}
@media (prefers-reduced-motion:reduce){ html.web #webTafel .wt-karte,html.web #webTafel .wt-spalte{transition:none} }

/* ===== Block 14 (id="web-mail") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – E-Mail zweispaltig (25.10.2026): links Postfach, rechts Mail / Antworten.
   Quelle: tools/web/mail.css – eingebettet als Style „web-mail“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web-post2 (Mac, Web-Ansicht, ≥ 1100 px). Sonst bleibt die Seite wie bisher.
============================================================ */
#webPostListe{display:none}
html.web.web-post2 #app>main>#screen-post.active{max-width:none!important;display:grid;grid-template-columns:clamp(340px,30vw,440px) minmax(0,1fr);column-gap:24px;align-items:start;align-content:start}
html.web.web-post2 #screen-post>*{grid-column:1 / -1}
html.web.web-post2 #screen-post>details.hint{grid-column:1;grid-row:1;align-self:center;justify-self:start}
html.web.web-post2 #screen-post>.section-title.tools{grid-column:2;grid-row:1}
html.web.web-post2 #screen-post>#webPostListe{display:block;grid-column:1;grid-row:2;position:sticky;top:0;max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  padding:10px 0 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);scrollbar-width:thin}
html.web.web-post2 #screen-post>#postInhalt{grid-column:2;grid-row:2;min-width:0;max-width:980px}
/* Liste links: Chips umbrechen, Zeilen kompakt, offene Mail hervorgehoben */
html.web.web-post2 #webPostListe .chips{flex-wrap:wrap;row-gap:6px;padding:0 12px 10px!important}
html.web.web-post2 #webPostListe .chips>span{flex-basis:100%!important;height:0}
html.web.web-post2 #webPostListe .set-row{margin:0 8px;border-radius:10px;padding:10px 12px;border:1px solid transparent;transition:background .15s,border-color .15s}
html.web.web-post2 #webPostListe .set-row:hover{background:var(--card2)}
html.web.web-post2 #webPostListe .set-row.wp-offen{background:var(--accent-soft);border-color:var(--accent-soft2)}
html.web.web-post2 #webPostListe .wp-hinweis{padding:14px 16px}
/* Rechts: Chips und „Zurück zum Eingang“ sind links schon da */
html.web.web-post2 #postInhalt>.chips{display:none}
html.web.web-post2 #postInhalt button.linkbtn[onclick^="postModus='liste'"]{display:none}
html.web.web-post2 #postInhalt>div{margin-left:0!important;margin-right:0!important}
html.web.web-post2 #postInhalt .wp-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:46vh;border-radius:16px;border:1.5px dashed var(--line2);color:var(--muted);text-align:center;padding:30px}
html.web.web-post2 #postInhalt .wp-leer-ic{font-size:30px;opacity:.6}
html.web.web-post2 #postInhalt .wp-leer-t{font:600 16px/1.3 var(--web-titel);color:var(--text)}
html.web.web-post2 #postInhalt .wp-leer-s{font-size:13px;margin-bottom:8px}
html.web.web-post2 #webPostListe #postSuchFeld{min-width:0;width:0}

/* ===== Block 15 (id="web-preise") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Kalender & Preise breit (25.10.2026): alle Wohnungen × viele Tage.
   Quelle: tools/web/preise.css – eingebettet als Style „web-preise“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
#webPrWahl,#webPrAlle{display:none}
html.web #webPrWahl{display:inline-flex;flex:none;gap:2px;padding:3px;margin-right:6px;border-radius:11px;background:var(--card3);border:1px solid var(--line)}
html.web #webPrWahl button{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text2)}
html.web #webPrWahl button.an{background:var(--card);color:var(--accent-ink);box-shadow:var(--sh-1)}
html.web #webPrWahl button:focus-visible,html.web #webPrAlle button:focus-visible{box-shadow:var(--ring)}

/* „Alle Wohnungen“: Einzel-Teile ausblenden, Seite darf breit werden */
html.web #screen-preise.wpr-alle-an{max-width:none!important}
html.web #screen-preise.wpr-alle-an #prApt,html.web #screen-preise.wpr-alle-an #prInhalt{display:none}
html.web #screen-preise.wpr-alle-an #webPrAlle{display:block}

html.web #webPrAlle .wpr-laden{padding:30px;text-align:center;color:var(--muted);font-size:13.5px}
html.web #webPrAlle .wpr-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
html.web #webPrAlle .wpr-nav{display:flex;align-items:center;gap:6px}
html.web #webPrAlle .wpr-nav .btn,html.web #webPrAlle .wpr-leiste>.btn{padding:6px 12px;font-size:13px}
html.web #webPrAlle .wpr-zeit{font:600 14px/1.2 var(--web-titel);color:var(--text);margin-left:6px}
html.web #webPrAlle .wpr-spanne{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--card3);border:1px solid var(--line);margin-left:auto}
html.web #webPrAlle .wpr-spanne button{padding:5px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text2)}
html.web #webPrAlle .wpr-spanne button.an{background:var(--card);color:var(--accent-ink);box-shadow:var(--sh-1)}

/* Tabelle: fester Kopf (2 Zeilen) + feste Wohnungsspalte; scrollt in beide Richtungen */
html.web #webPrAlle .wpr-scroll{overflow:auto;max-height:calc(100vh - 270px);border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1);scrollbar-width:thin}
html.web #webPrAlle .wpr-scroll:focus-visible{outline:none;box-shadow:var(--ring)}
html.web #webPrAlle .wpr-tab{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:12px}
html.web #webPrAlle .wpr-tab th,html.web #webPrAlle .wpr-tab td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;text-align:center;white-space:nowrap}
html.web #webPrAlle .wpr-tab thead th{position:sticky;background:var(--card2);z-index:2;color:var(--muted);font-weight:600}
html.web #webPrAlle .wpr-mon th{top:0;height:26px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:0 10px}
html.web #webPrAlle .wpr-tage th{top:26px;height:38px;min-width:52px;width:52px}
html.web #webPrAlle .wpr-tage th span{display:block;font-size:10px;font-weight:500}
html.web #webPrAlle .wpr-tage th b{display:block;font-size:13px;color:var(--text)}
html.web #webPrAlle .wpr-tage th.heute{background:var(--accent-soft);color:var(--accent-ink)}
html.web #webPrAlle .wpr-tage th.heute b{color:var(--accent-ink)}
html.web #webPrAlle .wpr-tab th.we,html.web #webPrAlle .wpr-tab td.we{background-image:linear-gradient(rgba(29,29,31,.025),rgba(29,29,31,.025))}
html.web #webPrAlle .wpr-tab .m1{border-left:2px solid var(--line2)}
html.web #webPrAlle .wpr-ecke,html.web #webPrAlle .wpr-wohn{position:sticky;left:0;z-index:3;background:var(--card2);text-align:left!important;padding:0 12px!important;min-width:170px;max-width:220px;overflow:hidden;text-overflow:ellipsis;
  font-size:12.5px;font-weight:600;color:var(--text);box-shadow:1px 0 0 var(--line2)}
html.web #webPrAlle thead .wpr-ecke{z-index:4;top:0;vertical-align:bottom;padding-bottom:8px!important;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
html.web #webPrAlle tbody .wpr-wohn{height:44px;background:var(--card)}
html.web #webPrAlle .wpr-f{color:var(--red);font-weight:800}

/* Zellen */
html.web #webPrAlle td.wpr-z{height:44px;min-width:52px;cursor:pointer;position:relative;transition:background .12s}
html.web #webPrAlle td.wpr-z b{display:block;font-size:12.5px;font-weight:650;color:var(--text);line-height:1.1}
html.web #webPrAlle td.wpr-z i{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:2px}
html.web #webPrAlle td.wpr-z:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)!important;background:var(--accent-soft)}
html.web #webPrAlle td.wpr-z:hover{background:var(--accent-soft)!important;box-shadow:inset 0 0 0 1.5px var(--accent2)}
html.web #webPrAlle td.wpr-z.heute{box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
html.web #webPrAlle td.wpr-z.b{background:var(--accent-soft2)}
html.web #webPrAlle td.wpr-z.b b{font-size:10.5px;font-weight:600;color:var(--accent-ink);overflow:hidden;text-overflow:ellipsis;padding:0 3px}
html.web #webPrAlle td.wpr-z.b.app{background:repeating-linear-gradient(135deg,var(--accent-soft2) 0 6px,transparent 6px 10px)}
html.web #webPrAlle td.wpr-z.zu{background:var(--red-soft)}
html.web #webPrAlle td.wpr-z.zu b{color:var(--red);font-size:11px}
html.web #webPrAlle td.wpr-z.cta b::after{content:'⇥';font-size:9px;color:var(--amber);margin-left:2px}
html.web #webPrAlle td.wpr-z.hand::after{content:'✋';position:absolute;top:2px;left:3px;font-size:9px}
html.web #webPrAlle td.wpr-z.offen::before{content:'';position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
html.web #webPrAlle .wpr-frei td,html.web #webPrAlle .wpr-frei th{position:sticky;bottom:0;background:var(--card2);height:30px;font-size:11.5px;font-weight:650;color:var(--text2);z-index:2}
html.web #webPrAlle .wpr-frei th{z-index:3}
html.web #webPrAlle .wpr-frei td.voll{color:var(--muted2)}

html.web #webPrAlle .wpr-legende{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:12px 2px 0;font-size:12px;color:var(--muted)}
html.web #webPrAlle .wpr-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px;border:1px solid var(--line2)}
html.web #webPrAlle .lg-p{background:var(--card)}
html.web #webPrAlle .lg-b{background:var(--accent-soft2)}
html.web #webPrAlle .lg-zu{background:var(--red-soft)}
html.web #webPrAlle .lg-h{background:var(--card)}
html.web #webPrAlle .lg-o{background:var(--amber);border-radius:50%!important}
html.web #webPrAlle .wpr-tipp{margin-left:auto}
@media (prefers-color-scheme: dark){ html.web #webPrAlle .wpr-tab th.we,html.web #webPrAlle .wpr-tab td.we{background-image:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03))} }

/* ===== Block 16 (id="web-bew") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Bewertungen als Übersicht (25.10.2026).
   Quelle: tools/web/bewertungen.css – eingebettet als Style „web-bew“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
html.web #bewInhalt .wb-weg{display:none}
html.web #bewInhalt .wb-portale{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 6px}
html.web #bewInhalt .wb-portal{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);border-top:3px solid var(--line2)}
html.web #bewInhalt .wb-portal.wb-top{border-top-color:var(--green)}
html.web #bewInhalt .wb-portal.wb-gut{border-top-color:var(--accent2)}
html.web #bewInhalt .wb-portal.wb-mittel{border-top-color:var(--amber)}
html.web #bewInhalt .wb-portal.wb-schwach{border-top-color:var(--red)}
html.web #bewInhalt .wb-pn{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
html.web #bewInhalt .wb-pw{font:600 26px/1.15 var(--web-titel);color:var(--text);margin-top:4px;font-variant-numeric:tabular-nums}
html.web #bewInhalt .wb-pw span{font-size:15px;color:#f5a623;margin-left:4px;vertical-align:3px}
html.web #bewInhalt .wb-pa{font-size:12px;color:var(--muted);margin-top:2px}
html.web #bewInhalt details.wb-erkl{margin:4px 0 0!important}

/* Tabelle Wohnungen × Portale */
html.web #bewInhalt .wb-tabwrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1)}
html.web #bewInhalt .wb-tab{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
html.web #bewInhalt .wb-tab th,html.web #bewInhalt .wb-tab td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
html.web #bewInhalt .wb-tab thead th{font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--card2)}
html.web #bewInhalt .wb-tab th[scope="row"],html.web #bewInhalt .wb-tab thead th:first-child{text-align:left;font-weight:600;color:var(--text)}
html.web #bewInhalt .wb-tab thead th:first-child{color:var(--muted)}
html.web #bewInhalt .wb-tab tbody tr{cursor:pointer;transition:background .12s}
html.web #bewInhalt .wb-tab tbody tr:hover{background:var(--card2)}
html.web #bewInhalt .wb-tab tbody tr:focus-visible{outline:none;box-shadow:inset var(--ring)}
html.web #bewInhalt .wb-tab tbody tr:last-child>*{border-bottom:none}
html.web #bewInhalt .wb-tab td b{font-weight:650}
html.web #bewInhalt .wb-tab td i{font-style:normal;font-size:11px;color:var(--muted);margin-left:5px}
html.web #bewInhalt .wb-tab td.wb-ges{border-right:1px solid var(--line)}
html.web #bewInhalt .wb-tab td.wb-top b{color:var(--green)}
html.web #bewInhalt .wb-tab td.wb-mittel{background:var(--amber-soft)}
html.web #bewInhalt .wb-tab td.wb-mittel b{color:var(--amber)}
html.web #bewInhalt .wb-tab td.wb-schwach{background:var(--red-soft)}
html.web #bewInhalt .wb-tab td.wb-schwach b{color:var(--red)}
html.web #bewInhalt .wb-tab td.wb-leer{color:var(--muted2)}
html.web #bewInhalt .wb-krit{font-size:11px;font-weight:600;color:var(--red);margin-left:6px}

/* Wohnungs-Kacheln und Standorte breiter verteilen */
html.web #bewInhalt .bewkacheln{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding:0}

/* Antwort-Entwürfe: links Bewertung, rechts Antwort */
@media (min-width:1100px){
  html.web #bewInhalt .bewantwort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:24px;align-items:start}
  html.web #bewInhalt .bewantwort>.kopf{grid-column:1;grid-row:1}
  html.web #bewInhalt .bewantwort>.zit{grid-column:1;grid-row:2 / span 3}
  html.web #bewInhalt .bewantwort>div.sd{grid-column:2;grid-row:1;margin-top:0!important}
  html.web #bewInhalt .bewantwort>.ba-text{grid-column:2;grid-row:2}
  html.web #bewInhalt .bewantwort>details,html.web #bewInhalt .bewantwort>details.sd{grid-column:2;grid-row:3}
  html.web #bewInhalt .bewantwort>.ba-knoepfe{grid-column:2;grid-row:4}
  html.web #bewInhalt .bewantwort .ba-knoepfe .btn{flex:0 1 auto;padding:8px 14px}
}

/* ===== Block 17 (id="web-ablage") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Wissen & Vorlagen breit (25.10.2026): links Liste, rechts Eintrag.
   Quelle: tools/web/ablage.css – eingebettet als Style „web-ablage“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web-ablage (Mac, Web-Ansicht, ≥ 1100 px). Sonst bleibt alles wie bisher.
============================================================ */
#webTplNav{display:none}
/* Seiten dürfen breiter werden */
html.web.web-ablage #app>main>#screen-wissen.active,html.web.web-ablage #app>main>#screen-vorlagen.active{max-width:1440px!important}

/* ---- Wissen je Wohnung ---- */
html.web.web-ablage #kbList{display:grid;grid-template-columns:clamp(220px,20vw,280px) minmax(0,1fr);column-gap:22px;align-items:start}
html.web.web-ablage #kbList>.wk-nav{grid-column:1;grid-row:1 / span 50;position:sticky;top:0;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin}
html.web.web-ablage #kbList>.kb-apt{grid-column:2;margin:0 0 12px}
html.web.web-ablage #kbList>.kb-apt:not(.wk-an){display:none}
html.web.web-ablage #kbList>.kb-apt.wk-an .kb-h{cursor:default}
html.web.web-ablage #kbList>.kb-apt.wk-an .chev{display:none}
html.web.web-ablage #kbList>.kb-apt.wk-an .kb-body{display:block;padding:4px 20px 18px}
html.web.web-ablage #kbList>.kb-apt.wk-an .kb-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;padding:10px 0;border-top:1px solid var(--line)}
html.web.web-ablage #kbList>.kb-apt.wk-an .kb-k{margin:0}
html.web.web-ablage .wk-nav button,html.web.web-ablage #webTplNav button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:1px solid transparent;color:var(--text);transition:background .15s,border-color .15s}
html.web.web-ablage .wk-nav button:hover,html.web.web-ablage #webTplNav button:hover{background:var(--card2)}
html.web.web-ablage .wk-nav button.an,html.web.web-ablage #webTplNav button.an{background:var(--accent-soft);border-color:var(--accent-soft2)}
html.web.web-ablage .wk-nav button:focus-visible,html.web.web-ablage #webTplNav button:focus-visible{outline:none;box-shadow:var(--ring)}
html.web.web-ablage .wk-nav b,html.web.web-ablage #webTplNav b{font-size:13.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.web.web-ablage .wk-nav span,html.web.web-ablage #webTplNav span{font-size:11.5px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Vorlagen ---- */
html.web.web-ablage #app>main>#screen-vorlagen.active{display:grid;grid-template-columns:clamp(240px,24vw,320px) minmax(0,1fr);column-gap:22px;align-items:start;align-content:start}
html.web.web-ablage #screen-vorlagen>*{grid-column:1 / -1}
html.web.web-ablage #screen-vorlagen>details.hint{grid-column:1;grid-row:1;align-self:center;justify-self:start}
html.web.web-ablage #screen-vorlagen>.section-title.tools{grid-column:2;grid-row:1}
html.web.web-ablage #screen-vorlagen>#webTplNav{display:flex;flex-direction:column;gap:4px;grid-column:1;grid-row:2;position:sticky;top:0;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin}
html.web.web-ablage #screen-vorlagen>#vorlagenList{grid-column:2;grid-row:2;min-width:0}
html.web.web-ablage #webTplNav .wt-neu{flex-direction:row;font-weight:600;color:var(--accent-ink)!important;border:1.5px dashed var(--line2)!important;margin-bottom:4px}
html.web.web-ablage #webTplNav .wt-neu.an{border-style:solid!important}
html.web.web-ablage #vorlagenList>.tpl-card{margin:0 0 12px}
html.web.web-ablage #vorlagenList>.tpl-card:not(.wt-an){display:none}
html.web.web-ablage #vorlagenList>.tpl-card.wt-an{cursor:default;padding:18px 20px}
html.web.web-ablage #vorlagenList>.tpl-card.wt-an .tpl-preview{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:14px;color:var(--text);line-height:1.6;margin-top:12px}
html.web.web-ablage #vorlagenList>.tpl-card.wt-an .tpl-more{display:none}
html.web.web-ablage #vorlagenList>.card textarea#tplText{min-height:260px}

/* ===== Block 18 (id="web-inventar") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Inventar & Wartung als Tabelle (25.10.2026).
   Quelle: tools/web/inventar.css – eingebettet als Style „web-inventar“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
html.web #invInhalt .list[data-wi]{background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 14px}
html.web #invInhalt .wi-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);overflow:hidden}
html.web #invInhalt .wi-tab th{position:sticky;top:0;z-index:1;text-align:left;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--card2);padding:10px 14px;border-bottom:1px solid var(--line)}
html.web #invInhalt .wi-tab td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
html.web #invInhalt .wi-tab tbody tr:last-child>td{border-bottom:0}
html.web #invInhalt .wi-tab tbody tr:hover>td{background:var(--card2)}
html.web #invInhalt .wi-tab .name{font-weight:600;white-space:normal}
html.web #invInhalt .wi-tab .apt,html.web #invInhalt .wi-tab .snippet,html.web #invInhalt .wi-tab .time{margin:0;white-space:normal;color:var(--text2);font-size:13px;-webkit-line-clamp:unset;display:block;overflow:visible}
html.web #invInhalt .wi-tab .time{white-space:nowrap;font-variant-numeric:tabular-nums}
html.web #invInhalt .wi-tab td.wi-status{white-space:nowrap}
html.web #invInhalt .wi-tab td.wi-status .badge{margin:2px 4px 2px 0}
html.web #invInhalt .wi-tab td.wi-akt{white-space:nowrap;text-align:right;width:1%}
html.web #invInhalt .wi-tab td.wi-akt .linkbtn{margin-left:10px}
html.web #invInhalt .wi-tab td.wi-menge{white-space:nowrap}
html.web #invInhalt .wi-tab td.wi-menge>*{vertical-align:middle;margin-right:6px}
html.web #invInhalt .wi-tab td.wi-menge b{display:inline-block;min-width:40px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
html.web #invInhalt .wi-tab tr.wi-dringend>td:first-child,html.web #invInhalt .wi-tab tr.wi-knapp>td:first-child,html.web #invInhalt .wi-tab tr.wi-faellig>td:first-child{box-shadow:inset 3px 0 0 var(--red)}
html.web #invInhalt .wi-tab tr.wi-knapp>td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
html.web #invInhalt .wi-tab tr.wi-voll>td{padding:0}
html.web #invInhalt .wi-tab tr.wi-voll>td>div{margin:0!important}
html.web #invInhalt .wi-bestand td.wi-name{width:40%}
html.web #invInhalt .wi-tab .wi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Block 19 (id="web-az") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche – Arbeitszeit als Monatsübersicht (25.10.2026).
   Quelle: tools/web/arbeitszeit.css – eingebettet als Style „web-az“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
html.web #app>main>#screen-arbeitszeit.active{max-width:1440px!important}
html.web #azInhalt>.waz{margin:18px 14px 30px}
html.web #azInhalt .waz-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
html.web #azInhalt .waz-titel{font:600 16px/1.2 var(--web-titel);color:var(--text)}
html.web #azInhalt .waz-t2{margin:22px 0 10px}
html.web #azInhalt .waz-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
html.web #azInhalt .waz-nav b{min-width:140px;text-align:center;font-weight:600}
html.web #azInhalt .waz-nav .btn{padding:6px 12px;font-size:13px}
html.web #azInhalt .waz-scroll{overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1);scrollbar-width:thin}
html.web #azInhalt .waz-tab{border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums;min-width:100%}
html.web #azInhalt .waz-tab th,html.web #azInhalt .waz-tab td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;white-space:nowrap;padding:0}
html.web #azInhalt .waz-tab thead th{background:var(--card2);color:var(--muted);font-weight:600;height:40px;min-width:40px}
html.web #azInhalt .waz-tab thead th span{display:block;font-size:10px;font-weight:500}
html.web #azInhalt .waz-tab thead th b{display:block;font-size:13px;color:var(--text)}
html.web #azInhalt .waz-tab .waz-f{position:sticky;left:0;z-index:2;background:var(--card2);text-align:left;padding:0 14px;min-width:110px;font-weight:650;color:var(--text);box-shadow:1px 0 0 var(--line2)}
html.web #azInhalt .waz-tab tbody .waz-f{background:var(--card)}
html.web #azInhalt .waz-tab .waz-jupas{color:var(--accent-ink)}
html.web #azInhalt .waz-tab .waz-trimosa{color:#8A6F23}
html.web #azInhalt .waz-tab td{height:40px;min-width:40px}
html.web #azInhalt .waz-tab td button{width:100%;height:100%;min-height:40px;font:inherit;color:var(--text);border-radius:0;transition:background .12s}
html.web #azInhalt .waz-tab td button:hover{background:var(--accent-soft)}
html.web #azInhalt .waz-tab td button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
html.web #azInhalt .waz-tab td.std button{font-weight:650}
html.web #azInhalt .waz-tab td.frei button{color:var(--muted);font-size:11px}
html.web #azInhalt .waz-tab td.zukunft{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 6px)}
html.web #azInhalt .waz-tab .we{background-color:var(--bg2)}
html.web #azInhalt .waz-tab thead th.heute{background:var(--accent-soft);color:var(--accent-ink)}
html.web #azInhalt .waz-tab td.heute{box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
html.web #azInhalt .waz-tab .waz-s{padding:0 14px;min-width:70px;background:var(--card2)}
html.web #azInhalt .waz-tab .waz-s i{font-style:normal;color:var(--muted);font-size:11px}
html.web #azInhalt .waz-tab tr.waz-g td,html.web #azInhalt .waz-tab tr.waz-g th{background:var(--card2);font-weight:650;border-bottom:0}
html.web #azInhalt .waz-jahr thead th{min-width:64px}
html.web #azInhalt .waz-jahr thead th button{width:100%;height:100%;min-height:40px;font:inherit;font-size:12px;color:var(--text2)}
html.web #azInhalt .waz-jahr thead th button.an,html.web #azInhalt .waz-jahr td.an{background:var(--accent-soft);color:var(--accent-ink)}
html.web #azInhalt .waz-jahr td{padding:0 10px}

/* ===== Block 20 (id="web-betrieb") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche Stufe 6 – Türschlösser & Team-Chat breit (25.10.2026).
   Quelle: tools/web/betrieb.css – eingebettet als Style „web-betrieb“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
/* ---- Türschlösser: Zahlen oben, Wohnungen als Raster ---- */
html.web #slInhalt.wsl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;align-items:start;align-content:start}
html.web #slInhalt.wsl-raster>.card{margin:0!important;padding:18px 18px 16px!important;border-radius:16px}
html.web #slInhalt.wsl-raster>.card>div:first-child{font:600 15.5px/1.3 var(--web-titel)!important;letter-spacing:-.01em}
html.web #slInhalt.wsl-raster>.card>div[style*="border:1px solid"]{border-radius:12px!important;background:var(--card2)}
html.web #slInhalt.wsl-raster>.card>div.wsl-offline{box-shadow:inset 3px 0 0 var(--red)}
html.web #slInhalt.wsl-raster>.card>div.wsl-schwach:not(.wsl-offline){box-shadow:inset 3px 0 0 var(--amber)}
html.web #slInhalt.wsl-raster>.card .btn{height:34px;padding:0 14px!important;font-size:13px}
html.web #slInhalt .wsl-kopf{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 2px}
html.web #slInhalt .wsl-z{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--text2)}
html.web #slInhalt .wsl-z.gruen{background:var(--green-soft);border-color:transparent;color:var(--green)}
html.web #slInhalt .wsl-z.orange{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
html.web #slInhalt .wsl-z.rot{background:var(--red-soft);border-color:transparent;color:var(--red)}

/* ---- Team-Chat: links Firmen, rechts Verlauf ---- */
html.web #teamChatInhalt.wtc-an{display:grid;grid-template-columns:clamp(240px,22vw,300px) minmax(0,1fr);column-gap:22px;align-items:start}
html.web #teamChatInhalt.wtc-an>.chips{display:none!important}
html.web #teamChatInhalt.wtc-an>.wtc-nav{grid-column:1;grid-row:1 / span 3;position:sticky;top:0;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);max-height:calc(100vh - 318px);overflow-y:auto;scrollbar-width:thin}
html.web #teamChatInhalt.wtc-an>#tcBox,html.web #teamChatInhalt.wtc-an>.tca-tray{grid-column:2;min-width:0}
html.web #teamChatInhalt.wtc-an>#tcBox{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);padding:6px 16px 0;box-sizing:border-box}
html.web #teamChatInhalt.wtc-an #tcScroll{padding:12px 4px!important;scrollbar-width:thin}
html.web #teamChatInhalt.wtc-an .msg{max-width:min(85%,640px)!important}
html.web #teamChatInhalt.wtc-an .tc-eingabe{border-top:1px solid var(--line);padding:12px 0!important}
html.web .wtc-titel{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 8px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html.web .wtc-titel span{font-variant-numeric:tabular-nums}
html.web .wtc-k{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:12px;border:1px solid transparent;color:var(--text);transition:background .15s,border-color .15s}
html.web .wtc-k:hover{background:var(--card2)}
html.web .wtc-k.an{background:var(--accent-soft);border-color:var(--accent-soft2)}
html.web .wtc-k:focus-visible{outline:none;box-shadow:var(--ring)}
html.web .wtc-k>i{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font:600 12.5px/1 var(--web-titel);font-style:normal;color:#fff;background:linear-gradient(140deg,var(--host-a),var(--host-b))}
html.web .wtc-m{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
html.web .wtc-m b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.web .wtc-m small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.web .wtc-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
html.web .wtc-r time{font-size:11px;color:var(--muted2);font-variant-numeric:tabular-nums}
html.web .wtc-r .cu-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Dunkel: „Tür öffnen“ (Petrol hell) mit dunkler Schrift, sonst zu wenig Kontrast */
@media (prefers-color-scheme: dark){ html.web #slInhalt.wsl-raster .btn[style*="--accent"]{color:#04161c!important} }

/* ===== Block 21 (id="web-system") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche Stufe 6 – Einstellungen, Vorschläge & Juna breit (25.10.2026).
   Quelle: tools/web/system.css – eingebettet als Style „web-system“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
/* ---- Einstellungen: links Verzeichnis, rechts Inhalt ---- */
html.web #app>main>#screen-settings.wset-an.active{display:grid;grid-template-columns:clamp(200px,18vw,240px) minmax(0,880px);column-gap:28px;align-items:start;align-content:start;max-width:1200px}
html.web #screen-settings.wset-an>*{grid-column:2;min-width:0}
html.web #screen-settings.wset-an>.wset-nav{grid-column:1;grid-row:1 / span 20;position:sticky;top:0;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);max-height:calc(100vh - 180px);overflow-y:auto;scrollbar-width:thin}
html.web .wset-g{padding:10px 10px 4px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html.web .wset-g:not(:first-child){margin-top:6px;border-top:1px solid var(--line);padding-top:12px}
html.web .wset-a{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:9px;border:1px solid transparent;font-size:13.5px;color:var(--text2);transition:background .15s,color .15s}
html.web .wset-a:hover{background:var(--card2);color:var(--text)}
html.web .wset-a.an{background:var(--accent-soft);border-color:var(--accent-soft2);color:var(--accent-ink);font-weight:600}
html.web .wset-a:focus-visible{outline:none;box-shadow:var(--ring)}
html.web #screen-settings.wset-an>details.set-gruppe{margin:0 0 8px}
html.web #screen-settings.wset-an>details.set-gruppe>summary{cursor:default;padding:4px 4px 2px;font:600 20px/1.3 var(--web-titel);letter-spacing:-.015em}
html.web #screen-settings.wset-an>details.set-gruppe>summary .chev{display:none}
html.web #screen-settings.wset-an>details.set-gruppe>summary small{font:500 12.5px var(--web-schrift)}
html.web #screen-settings.wset-an>details.set-gruppe+details.set-gruppe{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
html.web #screen-settings.wset-an .section-title[data-wset]{scroll-margin-top:12px}
html.web #screen-settings.wset-an>#sichtBox .set-row{margin-left:0;margin-right:0}
html.web #screen-settings.wset-an>#sichtBox:not(:empty){margin-bottom:14px}

/* ---- Vorschläge: links zu tun, rechts Überblick ---- */
/* Grid erst, wenn die Spalten da sind: beim stillen Neuzeichnen setzt die App den Scrollstand zurück, solange noch alles einspaltig ist (sonst gekappt, Gegenprüfung S1) */
html.web #vsInhalt.wvs-an:has(>.wvs-haupt){display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,28vw,380px);column-gap:24px;align-items:start}
html.web #vsInhalt.wvs-an>.wvs-haupt{min-width:0}
html.web #vsInhalt.wvs-an>.wvs-seite{position:sticky;top:0;min-width:0;max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin;padding:4px 2px 12px;border-radius:16px}
html.web #vsInhalt.wvs-an>.wvs-seite>.hint{margin:0 0 10px!important;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);padding:12px 14px}
html.web #vsInhalt.wvs-an>.wvs-seite>.hint.wvs-lang:not(.offen) .hb{max-height:200px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
html.web #vsInhalt.wvs-an .wvs-mehr{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--accent-ink)}
html.web #vsInhalt.wvs-an>.wvs-seite>.sd{padding:0 4px 10px!important}
html.web #vsInhalt.wvs-an>.wvs-seite>details{margin:0 0 6px!important}
html.web #vsInhalt.wvs-an>.wvs-seite>.section-title{padding-left:4px;padding-right:4px}
html.web #vsInhalt.wvs-an>.wvs-seite>div[style*="grid-template-columns"]{padding:0 0 8px!important}
html.web #vsInhalt.wvs-an>.wvs-seite>.set-row{margin-left:0;margin-right:0;padding:10px 12px}
html.web #vsInhalt.wvs-an>.wvs-seite>.set-row .sd{font-size:12px}
html.web #vsInhalt.wvs-an>.wvs-haupt>.section-title:first-child{margin-top:0}
html.web #vsInhalt.wvs-an>.wvs-haupt>.set-row{margin-left:0;margin-right:0}

/* ---- Juna: Seitenleiste bleibt sichtbar ---- */
html.web body.as-voll #webNav{position:relative;z-index:5}
html.web body.as-voll #screen-assistent.ju2 .ju2-licht{left:252px}   /* mit #id, sonst gewinnt die Juna-2-Regel (live 25.10.: left blieb 0) */

/* ===== Block 22 (id="web-nachr") ===== */

/* ============================================================
   JUPAS° Web-Oberfläche Stufe 7 – Claude-Chat, Mitteilungen & Anrufe breit (25.10.2026).
   Quelle: tools/web/nachrichten.css – eingebettet als Style „web-nachr“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web (Mac). Handy, iPad und Reinigung bleiben unverändert.
============================================================ */
/* ---- Claude-Chat: links Verlauf, rechts Punkte ---- */
html.web #ccBox{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(300px,30vw,400px);grid-template-rows:minmax(0,1fr) auto;column-gap:22px}
html.web #ccBox>#ccPanel{grid-column:2;grid-row:1 / span 2;max-height:none;margin:0;align-self:stretch;box-shadow:var(--sh-1);border-radius:16px;scrollbar-width:thin}
html.web #ccBox>#ccScroll{grid-column:1;grid-row:1;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:16px 16px 0 0;border-bottom:0;box-shadow:var(--sh-1);padding:12px 16px!important;scrollbar-width:thin}
html.web #ccBox>.tc-eingabe{grid-column:1;grid-row:2;background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:0 0 16px 16px;padding:12px 16px!important;box-shadow:var(--sh-1)}
html.web #ccBox .msg{max-width:min(85%,680px)!important}
html.web #ccBox .cc-kopf{position:sticky;top:0;z-index:1;background:var(--card);border-bottom:1px solid var(--line);padding:12px 14px;font-weight:600}
html.web #ccBox .cc-punkt{padding:12px 14px}

/* ---- Mitteilungen: je Tag eine Karte mit Zeilen ---- */
html.web #mitInhalt.wmt-an{max-width:980px}
html.web #mitInhalt.wmt-an>div:not(.wmt-gruppe){margin-left:2px!important;margin-right:0!important}
html.web #mitInhalt .wmt-gruppe{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);overflow:hidden;margin:0 0 6px}
html.web #mitInhalt .wmt-gruppe.wmt-stoerung{border-color:var(--red-soft);box-shadow:inset 3px 0 0 var(--red),var(--sh-1)}
html.web #mitInhalt .wmt-gruppe>.card.wmt-z{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:12px 18px!important;border-top:1px solid var(--line)!important}
html.web #mitInhalt .wmt-gruppe>.card.wmt-z:first-child{border-top:0!important}
html.web #mitInhalt .wmt-gruppe>.card.wmt-klick{transition:background .15s}
html.web #mitInhalt .wmt-gruppe>.card.wmt-klick:hover{background:var(--card2)!important}
html.web #mitInhalt .wmt-gruppe>.card.wmt-z>div:first-child>div:first-child{font-size:14px!important;font-weight:600!important}
/* „Antippen zum Öffnen ›“ heißt am Mac: die Zeile ist klickbar → nur noch der Pfeil */
html.web #mitInhalt .wmt-gruppe>.card.wmt-klick>div[style*="color:var(--accent)"]{display:none}
html.web #mitInhalt .wmt-gruppe>.card.wmt-klick{position:relative;padding-right:40px!important}
html.web #mitInhalt .wmt-gruppe>.card.wmt-klick::after{content:'›';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--muted2)}
html.web #mitInhalt .wmt-gruppe>.card.wmt-klick>div:first-child{padding-right:6px}

/* ---- Anrufe: breites Blatt, Anrufe zweispaltig ---- */
html.web #sheet:has(#anrufeBlatt){width:min(940px,calc(100vw - 320px));max-width:none;max-height:86vh}
html.web #anrufeBlatt{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
html.web #anrufeBlatt>*{grid-column:1 / -1;margin:0!important}
html.web #anrufeBlatt>div.card:not(:has(textarea)){grid-column:auto}

/* ===== Block 23 (id="web-r") ===== */

/* ============================================================
   JUPAS° Web-Ansicht der REINIGUNGS-APP (25.10.2026) – Look wie Pascals Web-Oberfläche (jubook-Stil).
   Quelle: tools/web/reinigung.css – eingebettet als Style „web-r“ (tools/web/einbauen.mjs).
   ALLES hängt an html.web-r (PC mit Maus + Reinigungs-App). Handy und iPad bleiben unverändert.
============================================================ */
html.web-r{
  --bg:#F5F4EF; --bg2:#EEECE5; --card:#FFFFFF; --card2:#FAF9F6; --card3:#EEECE5;
  --barbg:rgba(245,244,239,.82); --tabbg:rgba(245,244,239,.82);
  --line:rgba(29,29,31,.08); --line2:rgba(29,29,31,.14);
  --text:#1D1D1F; --text2:#55555A; --muted:#6E6E73;
  --accent:#3A7A8F; --accent2:#5FA0B4; --accent-ink:#2F6F84; --accent-soft:#E6F0F3;
  --host-a:#5FA0B4;
  --green:#1B7D35; --amber:#A85A00; --red:#C0271F;
  --sh-1:0 1px 2px rgba(29,29,31,.04),0 4px 16px -4px rgba(29,29,31,.06);
  --sh-2:0 2px 6px rgba(29,29,31,.06),0 18px 40px -12px rgba(29,29,31,.18);
  --web-schrift:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --web-titel:'Poppins','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --wr-seite:248px;
}
@media (prefers-color-scheme: dark){
  html.web-r{
    --bg:#0E1113; --bg2:#13171A; --card:#171B1E; --card2:#1D2226; --card3:#22282C;
    --barbg:rgba(14,17,19,.82); --tabbg:rgba(14,17,19,.82);
    --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
    --text:#F2F2F0; --text2:#B0B4B7; --muted:#8E9397;
    --accent:#6FB3C6; --accent2:#8CC8D8; --accent-ink:#8CC8D8; --accent-soft:#16303A;
    --host-a:#2F6F84;
    --green:#30D158; --amber:#FF9F0A; --red:#FF6961;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.5);
    --sh-2:0 2px 8px rgba(0,0,0,.5),0 24px 48px -12px rgba(0,0,0,.7);
  }
}
html.web-r body{font-family:var(--web-schrift);font-size:14.5px;line-height:1.5;background:var(--bg)}
html.web-r #rApp{padding-left:var(--wr-seite);background:var(--bg)}

/* ---- Seitenleiste statt schwebender Handy-Leiste ---- */
html.web-r #rApp>.r-tabbar{position:fixed;top:0;bottom:0;left:0;right:auto;width:var(--wr-seite);max-width:none;height:auto;margin:0;z-index:30;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:86px 14px 18px;
  border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;transform:none;
  background:var(--barbg);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
html.web-r #rApp>.r-tabbar::after{display:none}
html.web-r #rApp>.r-tabbar::before{content:'JUPAS°';position:absolute;inset:24px 24px auto 24px;height:auto;border-radius:0;opacity:1;mix-blend-mode:normal;background:none;
  font:600 21px/1 var(--web-titel);letter-spacing:-.02em;color:var(--text)}
html.web-r #rApp>.r-tabbar .tab-blase{display:none}
html.web-r #rApp>.r-tabbar .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:11px;height:38px;padding:0 12px;border-radius:10px;
  font-size:14px;font-weight:500;letter-spacing:0;color:var(--text2);text-align:left;cursor:pointer}
html.web-r #rApp>.r-tabbar .tab:hover{color:var(--text);background:rgba(127,127,127,.07)}
html.web-r #rApp>.r-tabbar .tab:active{transform:none}
html.web-r #rApp>.r-tabbar .tab.active{background:var(--card);color:var(--accent-ink);font-weight:600;box-shadow:var(--sh-1)}
html.web-r #rApp>.r-tabbar .tab .ico svg{width:19px;height:19px;stroke-width:1.8;transform:none}
html.web-r #rApp>.r-tabbar .tbadge{position:static;margin-left:auto;box-shadow:none}
html.web-r #rApp>.r-tabbar .tab[data-r="mehr"]{margin-top:auto}
html.web-r .r-nur-web{display:flex!important}

/* ---- Kopf + Inhalt: breit, mittig ---- */
html.web-r #rApp>.r-top,html.web-r #rApp>.r-inhalt,html.web-r #rApp>.r-vorschau{width:100%;max-width:1320px;margin-left:auto;margin-right:auto;box-sizing:border-box}
html.web-r #rApp.r-ist-kal>.r-top,html.web-r #rApp.r-ist-kal>.r-inhalt{max-width:1560px}
html.web-r #rApp>.r-top{padding:26px 36px 12px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:0}
html.web-r #rApp>.r-top::before,html.web-r #rApp>.r-top::after{display:none}
html.web-r #rApp>.r-top .sub{font:600 30px/1.15 var(--web-titel);letter-spacing:-.02em}
html.web-r #rApp>.r-inhalt{padding:8px 36px 48px}
html.web-r #rApp>.r-inhalt.r-v-material,html.web-r #rApp>.r-inhalt.r-v-mehr,html.web-r #rApp>.r-inhalt.r-v-anleitung,html.web-r #rApp>.r-inhalt.r-v-sprache{max-width:820px}
html.web-r #rApp.r-ist-chat{height:100vh}
html.web-r #rApp.r-ist-chat>.r-inhalt{padding:0 36px 24px;max-width:980px}
html.web-r .card,html.web-r .heute-block{border-radius:16px;box-shadow:var(--sh-1)}
html.web-r .r-gruss{font:600 22px/1.25 var(--web-titel);letter-spacing:-.015em;margin:0 2px 16px}

/* ---- Heute: links die Reinigungen, rechts Türcode & Infos ---- */
html.web-r .r-h-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0 28px;align-items:start}
html.web-r .r-h-seite{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
html.web-r .r-h-seite>*{margin:0}
html.web-r .r-h-seite .r-mehr-info{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:var(--sh-1)}
html.web-r .r-tuercode{background:linear-gradient(120deg,#5FA0B4,#2F6F84);border-radius:16px;box-shadow:0 10px 30px -12px rgba(47,111,132,.55)}
html.web-r .r-z-akt button{cursor:pointer}
html.web-r .r-z-akt button:hover{border-color:var(--accent)}

/* ---- Kalender: Raster über volle Breite ---- */
html.web-r #rApp .r-kal-unten{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:0 36px}
html.web-r .r-kal-ein{width:auto;padding:0 18px}

/* ---- Einteilung: Planungs-Tabelle für den Monat ---- */
html.web-r .r-v-einteilung .r-ein-kopf{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 22px}
html.web-r .r-v-einteilung .r-ein-filter{margin-left:auto}
html.web-r .r-ein-zeile{flex-wrap:nowrap;padding:10px 6px}
html.web-r .r-ein-zeile:hover{background:var(--card2)}
html.web-r .r-ein-info{flex:0 0 340px}
html.web-r .r-ein-chips{flex:1;justify-content:flex-start;padding-left:0;width:auto}
html.web-r .r-ein-chip:hover{border-color:var(--accent);color:var(--text)}
html.web-r .r-ein-chip.an:hover{color:#fff}
html.web-r .r-ein-tag{position:sticky;top:0;background:var(--card);z-index:1}

/* ---- Mein Team: Karten im Raster ---- */
html.web-r .r-team-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
html.web-r .r-team-knoepfe .btn{cursor:pointer}
html.web-r .r-team-neu{max-width:760px}
html.web-r .r-team-intro{max-width:760px}

/* ---- Fenster (Fertig, Defekt, Einteilen) mittig ---- */
html.web-r .r-modal{align-items:center;padding-left:var(--wr-seite)}