@import url('https://fonts.bunny.net/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&family=Great+Vibes&display=swap');

:root{
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --ink:#000000;
  --ink-soft:#555555;
  --line:#D9D9D9;
  --teal:#000000;
  --teal-dark:#000000;
  --teal-tint:#EDEDED;
  --brass:#000000;
  --brass-tint:#EDEDED;
  --sage:#4F7A56;
  --sage-tint:#E7F0E5;
  --danger:#AC4E38;
  --danger-tint:#F7E8E3;
  --radius:14px;
}
/* Farbige Oberfläche (Umschalter neben dem Logo, zuschaltbar): die
   ursprüngliche Teal-Akzentfarbe mit cremefarbenem Hintergrund statt der
   Schwarz/Weiß-Grundeinstellung. Erfolgs-/Fehlerfarben bleiben in beiden
   Modi bewusst unverändert - die tragen eine eigene Bedeutung (z.B.
   Warnungen), die bei reinem Grau schwerer zu erkennen wäre. Als
   Variablen-Überschreibung gelöst statt jede einzelne Regel anzupassen -
   jede Stelle, die var(--teal) etc. nutzt, zieht automatisch mit. */
body.color-mode{
  --bg:#F7F5F0;
  --card:#FFFFFF;
  --ink:#2B2E33;
  --ink-soft:#6E6A5F;
  --line:#DEDACD;
  --teal:#3C6E71;
  --teal-dark:#2A4F51;
  --teal-tint:#E4EFEE;
  --brass:#B4791F;
  --brass-tint:#F7EBD8;
}
*{box-sizing:border-box;}
/* Absicherung gegen seitenweites horizontales Verschieben (siehe
   Rückfrage-Runde: "man kann die öffentliche Trunked-Seite immer noch
   nach rechts verschieben", per Video bestätigt - dabei wandert die
   GESAMTE Seite inkl. Logo/Kopfzeile mit, nicht nur die Wortwolken-
   Zeile) - unabhängig von der genauen Ursache innerhalb der Seite wird
   hiermit grundsätzlich verhindert, dass das Dokument selbst
   horizontal verschiebbar wird. html UND body beide nötig, da manche
   Browser die Bildlauf-Fläche am html-Element ansetzen, andere am
   body. Rein defensiv - normaler Seiteninhalt braucht nie horizontales
   Scrollen, nur einzelne, bewusst dafür gebaute Elemente wie die
   Wortwolke (die intern weiterhin scrollbar bleibt).
   FEHLERBEHEBUNG (siehe Rückfrage-Runde: "klebende Reiter funktionieren
   nicht mehr") - "overflow-x:hidden" auf html/body hatte den
   unbeabsichtigten Nebeneffekt, dass beide Elemente dadurch zu einem
   eigenen Scroll-Container wurden, was "position:sticky" bei allen
   untergeordneten Elementen (z.B. der Reiter-Leiste) in manchen
   Browsern lahmlegt - ein bekanntes CSS-Wechselwirkungsproblem.
   "overflow-x:clip" erzielt denselben sichtbaren Effekt (kein
   horizontales Verschieben mehr möglich), OHNE dabei einen eigenen
   Scroll-Container zu erzeugen, wodurch position:sticky unberührt
   bleibt. */
html, body{overflow-x:clip;max-width:100vw;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
/* In Eingabefeldern und beim Einladungscode soll Markieren/Kopieren weiter
   möglich sein - nur überall sonst unterdrücken wir es, damit beim
   Antippen von Wörtern nicht die "Nachschlagen"/Websuche-Vorschläge des
   Browsers erscheinen (stört auf einem als App installierten Bildschirm). */
input, textarea, .invite-code{
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
  -webkit-touch-callout:default;
}
.wrap{max-width:640px;margin:0 auto;padding:28px 18px 80px;}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;margin:0;}
.org-name-input{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px;color:var(--ink);border:1px solid transparent;background:none;padding:2px 4px;margin:-2px -4px;border-radius:6px;width:100%;}
.org-name-input:hover{border-color:var(--line);}
.org-name-input:focus{border-color:var(--teal);outline:none;background:var(--card);}
button, input, textarea{font-family:inherit;font-size:15px;}
button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:23px;width:auto;display:block;}
.brand-badge{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:lowercase;background:var(--brass-tint);color:var(--brass);padding:2px 9px;border-radius:20px;margin-left:2px;}
.me{font-size:12px;color:var(--ink-soft);text-align:right;}
.me button:not(.account-menu-close){background:none;border:none;color:var(--teal-dark);text-decoration:underline;cursor:pointer;padding:0;font-size:12px;}
.account-trigger{background:none;border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--ink);cursor:pointer;font-weight:500;text-decoration:none;}
.token-balance-pill{display:inline-block;background:var(--brass-tint);color:var(--brass);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin:0 2px;}
.token-pot-bar-track{width:100%;height:14px;border-radius:7px;background:var(--card);border:1px solid var(--line);overflow:hidden;position:relative;}
.token-pot-bar-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--brass-tint),var(--brass));transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.token-pot-bar-fill.plop{animation:tokenPotPlop .5s ease;}
@keyframes tokenPotPlop{
  0%{transform:scaleY(1);filter:brightness(1);}
  35%{transform:scaleY(1.6);filter:brightness(1.5);}
  100%{transform:scaleY(1);filter:brightness(1);}
}
.token-contribute-plus{width:22px;height:22px;border-radius:50%;border:1px solid var(--brass);background:var(--brass-tint);color:var(--brass);font-weight:700;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;}
.token-tier-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:11px;margin-left:4px;flex-shrink:0;}
.token-tier-badge.bronze{background:#cd7f32;}
.token-tier-badge.silber{background:#b0b8c1;}
.token-tier-badge.gold{background:#e5b93a;}
.token-tier-badge.platin{background:linear-gradient(135deg,#c9d6e3,#8fa3b3);}
.account-trigger:hover{border-color:var(--teal);}
.menu-overlay{position:fixed;inset:0;z-index:40;}
.account-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(43,46,51,.15);min-width:230px;z-index:50;padding:6px;text-align:left;}
/* Glocke/Inform-Funktion (siehe Rückfrage-Runde) - Badge oben rechts
   am Symbol, Panel wiederverwendet die .account-menu-Optik, nur
   breiter und mit scrollbarer Liste statt Menüpunkten.*/
.activity-feed-badge{position:absolute;top:0;right:0;background:var(--danger);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.activity-feed-panel{width:300px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;}
.activity-feed-item{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line);padding:10px 8px;cursor:pointer;}
.activity-feed-item:hover{background:var(--bg);}
/* Live-Aktualisierung (siehe Rückfrage-Runde) - Banner bleibt beim
   Scrollen oben sichtbar, statt unterzugehen; Sperr-Hinweis an der Aufgabe.*/
.sync-banner{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20;display:block;width:100%;margin-bottom:10px;padding:10px 14px;border:none;border-radius:10px;background:var(--teal-dark);color:#fff;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);}
.todo-lock-label{color:var(--brass);font-style:italic;}
.account-menu-header{position:relative;width:100%;padding:8px 40px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.account-menu-email{font-size:11px;color:var(--ink-soft);word-break:break-all;}
.calendar-menu-pill{display:inline-block;background:#000;color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;margin-left:8px;text-decoration:none;vertical-align:middle;}
.calendar-menu-pill:hover{opacity:.85;}
.account-menu-close{position:absolute;top:4px;right:4px;text-align:right;padding:3px 9px 7px;width:24px;height:24px;border-radius:50%;background:none;border:none;font-size:17px;line-height:1;color:var(--ink-soft);cursor:pointer;}
.account-menu-close:hover{background:var(--bg);}
.account-menu button:not(.account-menu-close){display:block;width:100%;text-align:left;background:none;border:none;padding:9px 10px;font-size:13px;color:var(--ink);cursor:pointer;border-radius:8px;text-decoration:none;}
.account-menu button:hover{background:var(--teal-tint);color:var(--teal-dark);}
/* Auf kleinen Bildschirmen (Smartphones) nimmt das Menü statt der
   kleinen Dropdown-Ansicht den ganzen Bildschirm ein - dafür braucht es
   den Schließen-Button oben, da der Hintergrund zum Wegtippen dann nicht
   mehr sichtbar/erreichbar ist. Der Button selbst bleibt an derselben
   Stelle (oben rechts in der Kopfzeile) wie in der kleinen Ansicht -
   auf dem Handy nur größer, damit er sich leichter treffen lässt. */
@media (max-width: 640px){
  .account-menu{position:fixed;inset:0;height:100dvh;border-radius:0;border:none;box-shadow:none;min-width:0;padding:0;display:flex;flex-direction:column;overflow-y:auto;}
  .account-menu-header{padding:20px 60px 14px 18px;border-bottom:none;}
  .account-menu-email{font-size:13px;}
  .calendar-menu-pill{font-size:12px;padding:4px 11px;}
  .account-menu-close{top:10px;right:10px;text-align:right;width:24px;height:24px;border-radius:50%;font-size:2em;margin:-5px 8px 0px 0px;padding:0;}
  .account-menu button:not(.account-menu-close){padding:16px 18px;font-size:15px;border-radius:0;border-bottom:none;text-align:center;}
}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;}
.hint{color:var(--ink-soft);font-size:13px;line-height:1.5;margin:6px 0 0;}

label{display:block;font-size:13px;color:var(--ink-soft);margin:14px 0 5px;}
label:first-of-type{margin-top:0;}
input[type=text], input[type=email], input[type=password], input[type=datetime-local], input[type=date], input[type=time], input[type=number], input[type=tel], input[type=url], textarea, select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#FCFBF8;color:var(--ink);
}
select{cursor:pointer;}
input:focus, textarea:focus, select:focus{border-color:var(--teal);}
input:disabled, textarea:disabled, select:disabled{background:var(--bg);color:var(--ink-soft);cursor:not-allowed;}
textarea{resize:vertical;min-height:56px;}
.growing-textarea{resize:none;min-height:42px;max-height:240px;overflow-y:auto;line-height:1.4;}
.voice-input-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;border:none;background:none;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.voice-input-btn svg{width:17px;height:17px;}
.voice-input-btn:hover{background:var(--bg);color:var(--teal);}
.voice-input-btn.listening{background:var(--danger);color:#fff;animation:voice-pulse 1.2s ease-in-out infinite;}
@keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 rgba(172,78,56,.4);}50%{box-shadow:0 0 0 6px rgba(172,78,56,0);}}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brass);animation:spin .8s linear infinite;flex-shrink:0;}
.undo-toast-btn svg{width:14px;height:14px;display:block;flex-shrink:0;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;border:1px solid var(--line);background:#fff;padding:10px 16px;cursor:pointer;font-weight:500;color:var(--ink);transition:transform .05s ease;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-dark);}
.btn-ghost{border-color:transparent;background:transparent;padding:8px 10px;}
.btn-ghost:hover{background:var(--teal-tint);}
.btn-block{width:100%;}
.btn svg{width:16px;height:16px;display:block;flex-shrink:0;}

.fob{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px;cursor:pointer;position:relative;}
.fob.dragging{box-shadow:0 8px 20px rgba(43,46,51,.18);opacity:.95;}
.fob-placeholder{border:2px dashed var(--line);border-radius:16px;margin-bottom:12px;}
.fob:hover{border-color:var(--teal);}
.fob-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.fob-left{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0;}
.fob-bell{width:30px;height:30px;border-radius:50%;background:var(--bg);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal-dark);padding:0;}
.fob-bell svg{width:15px;height:15px;display:block;}
.fob-bell:hover{border-color:var(--teal);}
.fob-bell.active{background:var(--brass-tint);border-color:var(--brass);color:var(--brass);}
.fob-bell.forced{background:var(--card);border-color:var(--line);color:var(--ink-soft);cursor:default;opacity:.65;}
.fob-bell.forced:hover{border-color:var(--line);}
.fob-body{flex:1;min-width:0;}
.fob-body h3{font-size:16px;}
.fob-body p{margin:2px 0 0;font-size:13px;color:var(--ink-soft);}
.fob-bottom-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.fob-sub-tag{font-size:11px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);padding:2px 9px;border-radius:20px;white-space:nowrap;}
.fob-progress{font-size:12px;color:var(--teal-dark);font-weight:500;white-space:nowrap;margin-right:7px;}
.sub-picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sub-picker-btn{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--ink-soft);cursor:pointer;font-weight:500;}
.sub-picker-btn.active{background:var(--teal);border-color:var(--teal);color:#fff;}
/* Kategorien/Pakete beim Entdecken öffentlicher Listen (siehe
   Rückfrage-Runde: "wirkt etwas erschlagend... stattdessen dynamische
   Kategorien... Pakete") - ersetzt die vorherige Wortwolken-Zeile als
   Startansicht.*/
/* Wortwolken-Ticker (siehe Rückfrage-Runde: "die laufenden Tags
   wollte ich trotzdem behalten") - wiederhergestellt, inklusive der
   damals behobenen Breitenbegrenzung (width:100%/min-width:0), die
   das seitliche Verschieben der ganzen Seite verhinderte.*/
.word-cloud-wrap{margin-bottom:12px;}
.word-cloud-row{width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
.word-cloud-row::-webkit-scrollbar{display:none;}
.word-cloud-row-track{display:inline-flex;gap:8px;}
.word-cloud-pill{display:inline-block;flex:0 0 auto;font-size:15px;padding:4px 14px;border-radius:20px;border:none;cursor:pointer;white-space:nowrap;font-weight:500;}
.public-lists-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.public-lists-category-tile{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;}
.public-lists-package-item{padding:8px 0;border-top:1px solid var(--line);cursor:pointer;}
.public-lists-package-item:first-of-type{border-top:none;}
/* Autovervollständigung bei der Suche (siehe Rückfrage-Runde) - direkt
   unter dem Suchfeld, schließt sich beim Wegklicken/Auswählen.*/
.search-suggestions{display:none;position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:10;overflow:hidden;}
.search-suggestion-item{display:block;width:100%;text-align:left;padding:9px 14px;font-size:14px;background:none;border:none;cursor:pointer;}
.search-suggestion-item:hover{background:var(--bg);}
/* Einzeilig und scrollbar statt umbrechend (siehe Rückfrage-Runde:
   "wie die Reiter im Trunked") - dasselbe Muster wie
   .todo-filters-scroll dort: overflow-x:auto mit versteckter
   Scrollleiste, Kinder bewusst nicht umbrechend (flex-shrink:0). */
.sub-filter{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sub-filter::-webkit-scrollbar{display:none;}
.sub-filter-btn{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--ink-soft);cursor:pointer;font-weight:500;opacity:.5;flex-shrink:0;white-space:nowrap;}
.local-hero-pill{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#f5d67d,#d9a520);color:#5c3d00;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;flex-shrink:0;}
.premium-pill{display:inline-flex;align-items:center;gap:3px;background:#111;color:#fff;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;flex-shrink:0;}
.trending-pill{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(120deg,#ffd6e8,#d6e4ff,#d6fff0,#fff3d6);background-size:300% 300%;animation:trendingShift 6s ease-in-out infinite;color:#5c3d5c;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;letter-spacing:.02em;flex-shrink:0;}
@keyframes trendingShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.sub-filter-discover{opacity:1;border-style:dashed;color:var(--teal-dark);}
.sub-filter-btn.active{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-dark);opacity:1;}
.discover-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:var(--bg);border-radius:10px;}
.rate-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:6px 10px;}
.rate-btn svg{width:15px;height:15px;}
.rate-btn.active-up{background:var(--sage-tint);color:var(--sage);border-color:var(--sage);}
.rate-btn.active-down{background:var(--danger-tint);color:var(--danger);border-color:var(--danger);}
.fob-top-right{position:relative;flex-shrink:0;display:flex;align-items:center;gap:6px;}
.fob-role{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--brass-tint);color:var(--brass);font-weight:500;white-space:nowrap;}
.servings-pill{font-size:12px;font-weight:500;padding:3px 10px;border-radius:20px;background:var(--brass-tint);color:var(--brass);border:none;width:52px;text-align:center;-moz-appearance:textfield;}
.servings-pill::-webkit-outer-spin-button,.servings-pill::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.fob-menu-btn{background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:4px;border-radius:6px;display:flex;}
.fob-menu-btn:hover{background:var(--bg);color:var(--ink);}
.fob-menu-btn svg{width:16px;height:16px;display:block;}
.fob-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(43,46,51,.15);min-width:180px;z-index:50;padding:6px;text-align:left;cursor:default;}
.fob-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:9px 10px;font-size:13px;color:var(--ink);cursor:pointer;border-radius:8px;}
.fob-menu button:hover{background:var(--teal-tint);color:var(--teal-dark);}
.fob-menu button svg{width:15px;height:15px;flex-shrink:0;}
.icon-btn.bell-active{color:var(--brass);}

.empty{text-align:center;padding:36px 16px;color:var(--ink-soft);}
.empty h3{color:var(--ink);margin-bottom:6px;font-size:16px;}

.back{background:none;border:none;color:var(--teal-dark);cursor:pointer;font-size:13px;padding:0;margin-bottom:14px;display:flex;align-items:center;gap:4px;}
.back svg{width:16px;height:16px;display:block;flex-shrink:0;}
.pv-header h2{font-size:22px;}
.pv-header p{margin:3px 0 0;font-size:13px;color:var(--ink-soft);}

.tabs{display:flex;align-items:center;gap:4px;margin:18px 0 16px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:var(--bg);}
.tabs-scroll{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0;}
.tabs-scroll::-webkit-scrollbar{display:none;}
/* Zeile "Prio zeigen & sortieren" + "Nur Mängel"-Filter (siehe
   Rückfrage-Runde) - horizontal scrollbar bei zu schmaler Seitenbreite,
   genau dasselbe Muster wie bei .tabs-scroll oben. */
.todo-filters-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.todo-filters-scroll::-webkit-scrollbar{display:none;}
.tab{background:none;border:none;padding:10px 4px;margin-right:18px;font-size:14px;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;position:relative;top:1px;flex-shrink:0;white-space:nowrap;}
/* Admin-Bereich (siehe Rückfrage-Runde: "die Admin-Leiste ist aktuell
   einfach eine lange Linie nach rechts") - eigene, umbrechende
   Variante statt der einzeiligen, scrollbaren .tabs-scroll oben, da
   inzwischen zu viele Reiter (10) für eine einzelne Zeile sinnvoll
   wären: alle Bereiche bleiben so immer sichtbar und direkt anklickbar,
   ohne dass man erst zur Seite scrollen und dabei ggf. übersehen
   müsste, dass es noch weitere Reiter gibt. Abstand läuft komplett
   über "gap" statt über das margin-right von .tab (siehe unten), damit
   beim Umbruch auch nach unten ein gleichmäßiger Abstand entsteht.*/
.admin-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:18px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:var(--bg);}
.admin-tabs .tab{margin-right:0;}
/* Wie .admin-tabs, aber für eine ZWEITE, verschachtelte Reiter-Leiste
   innerhalb eines Admin-Bereichs (z.B. die Unter-Reiter bei "Support")
   gedacht - bewusst OHNE eigenes position:sticky/Rahmen, da das sonst
   mit der bereits oben klebenden Haupt-Navigation kollidieren bzw.
   sich optisch überlagern würde. Nur der Umbruch-Effekt wird geteilt.*/
.admin-subtabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;}
.admin-subtabs .tab{margin-right:0;}

/* Kleine Zahl-Pille an den Reitern (Aufgaben/Chat) - oben rechts,
   leicht in den Reiter hineinragend, damit klar ist, wozu sie gehört. */
.tab-badge{
    position:absolute;
    top:-2px;
    right:-6px;
    background:var(--danger);
    color:#fff;
    font-size:11px;
    font-weight:600;
    line-height:1;
    padding:2px 6px;
    border-radius:20px;
    min-width:16px;
    text-align:center;
}

/* Geteilte Zähler-Pille auf den Dashboard-Karten - Ecke oben rechts,
   leicht überlappend (spart Platz statt eine eigene Zeile zu
   brauchen). Links = neue Aufgaben, rechts = neue Chat-Nachrichten,
   durch eine dünne Trennlinie getrennt. */
.fob-new-badge{
    position:absolute;
    top:-7px;
    right:10px;
    display:flex;
    background:var(--danger);
    color:#fff;
    font-size:11px;
    font-weight:600;
    line-height:1;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(43,46,51,.25);
}
.fob-new-badge span{
    padding:3px 7px;
}
.fob-new-badge span + span{
    border-left:1px solid rgba(255,255,255,.45);
}
.tab.active{color:var(--teal-dark);border-color:var(--teal);font-weight:500;}
.search-toggle{margin-left:auto;background:none;border:none;padding:8px;color:var(--ink-soft);cursor:pointer;border-radius:8px;flex-shrink:0;}
.search-toggle svg{width:18px;height:18px;display:block;}
.search-toggle:hover, .search-toggle.active{color:var(--teal-dark);background:var(--teal-tint);}
.dup-hint{margin-top:8px;font-size:12px;color:var(--brass);background:var(--brass-tint);padding:6px 10px;border-radius:8px;}
.dup-hint-label{margin-top:8px;font-size:12px;color:var(--brass);}
.dup-hint-result{margin-top:6px;font-size:12px;color:var(--brass);background:var(--brass-tint);padding:6px 10px;border-radius:8px;cursor:pointer;}
.dup-hint-result:hover{opacity:.75;}
.char-counter{font-size:11px;color:var(--ink-soft);}
.char-counter.char-counter-over{color:var(--danger);font-weight:600;}
.draft-pill{display:inline-block;font-size:11px;font-weight:600;color:var(--brass);background:var(--brass-tint);padding:2px 9px;border-radius:20px;margin-bottom:8px;}

.todo{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;scroll-margin-top:60px;position:relative;}
/* Kurzes Hervorheben, wenn man vom Kalender direkt zu einer Aufgabe
   gescrollt wird (siehe Rückfrage-Runde) - macht deutlich sichtbar, wo
   man gerade gelandet ist. */
.todo-highlight{animation:todoHighlightFade 2s ease-out;}
@keyframes todoHighlightFade{0%{box-shadow:0 0 0 3px var(--teal);}100%{box-shadow:0 0 0 0 transparent;}}
.todo.done{background:var(--sage-tint);border-color:#CFE3CE;}
.todo.dragging{box-shadow:0 8px 20px rgba(43,46,51,.18);opacity:.95;}
.todo-placeholder{border:2px dashed var(--line);border-radius:12px;margin-bottom:10px;}
/* Verschieben per Ziehen bei Check-in-Punkten/Zusatzinfos (siehe
   Rückfrage-Runde: "dieselbe Funktion wie bei Aufgaben") - gleiches
   Muster wie .todo.dragging/.todo-placeholder oben, nur mit eigenem
   Klassennamen, da beide Listen gleichzeitig auf derselben Seite
   sichtbar sind. */
.checkin-point.dragging,.checkin-extra-info.dragging{box-shadow:0 8px 20px rgba(43,46,51,.18);opacity:.95;}
.checkin-point-placeholder,.checkin-extra-info-placeholder{border:2px dashed var(--line);border-radius:12px;margin-bottom:10px;}
.todo-grid{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;}
.todo-checkbox-col{grid-column:1;grid-row:1 / 3;}
.todo-text-col{grid-column:2;grid-row:1;min-width:0;}
.todo-below-text{grid-column:2;grid-row:2;min-width:0;}
.todo-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);margin-left:-4px;gap:6px;}
.todo-meta > .icon-btn{flex-shrink:0;}
.todo-meta-left{display:flex;align-items:center;gap:6px;flex:1;min-width:0;position:relative;}
.todo-overflow-btn{flex-shrink:0;}
.todo-overflow-menu{position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(43,46,51,.15);min-width:200px;z-index:50;padding:6px;text-align:left;cursor:default;}
.todo-overflow-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:9px 10px;font-size:13px;color:var(--ink);cursor:pointer;border-radius:8px;white-space:nowrap;}
.todo-overflow-menu button:hover{background:var(--teal-tint);color:var(--teal-dark);}
.todo-overflow-menu button svg{width:15px;height:15px;flex-shrink:0;}
.chat-date-badge{display:block;margin:14px auto;padding:5px 14px;background:var(--card);border:1px solid var(--line);border-radius:20px;font-size:12px;color:var(--ink-soft);cursor:pointer;width:fit-content;}
.chat-date-badge:hover{background:var(--brass-tint);color:var(--brass);}
.chat-typing-indicator{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;color:var(--ink-soft);}
.chat-typing-indicator svg{width:20px;height:14px;color:var(--brass);}
@keyframes wave-pulse{0%,100%{transform:scaleY(0.4);}50%{transform:scaleY(1);}}
.wave-bar{transform-origin:center;animation:wave-pulse 0.9s ease-in-out infinite;}
.wave-bar-2{animation-delay:0.15s;}
.wave-bar-3{animation-delay:0.3s;}
.drag-handle{cursor:grab;padding:4px 2px;touch-action:none;}
.drag-handle:active{cursor:grabbing;}
.prio-badge{font-size:10px;font-weight:600;padding:1px 7px;border-radius:20px;white-space:nowrap;border:none;cursor:pointer;}
/* Priorität jetzt oben rechts in der Kachel statt in der unteren
   Symbolleiste (siehe Rückfrage-Runde, Screenshot) - Aussehen und
   Verhalten des Knopfs selbst bleiben unverändert (.prio-badge oben),
   hier kommt nur die Positionierung dazu. */
.prio-badge-corner{position:absolute;top:14px;right:16px;z-index:1;}
.subtask-pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap;border:none;cursor:pointer;color:var(--ink-soft);background:var(--line);margin:3px 4px 0 0;display:inline-block;}
.subtask-pill.subtask-checked{color:#fff;background:var(--sage);text-decoration:line-through;}
.subtask-pills-wrap{margin-top:2px;}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.calendar-cell{height:84px;padding:5px;border-radius:8px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.calendar-cell-outside{opacity:.4;}
.calendar-cell-today{border-color:var(--teal);border-width:2px;}
.calendar-cell-clickable{cursor:pointer;}
.calendar-cell-clickable:hover{border-color:var(--teal);}
.calendar-cell-date{font-size:12px;font-weight:600;color:var(--ink-soft);}
.calendar-pills-row{display:flex;flex-wrap:wrap;gap:2px;}
.calendar-deadline-pill{font-size:9px;font-weight:600;padding:1px 5px;border-radius:20px;background:var(--teal-tint);color:var(--teal-dark);white-space:nowrap;}
.calendar-deadline-pill.calendar-deadline-done{background:var(--sage-tint);color:var(--sage);}
.calendar-deadline-pill.calendar-deadline-more{background:var(--line);color:var(--ink-soft);}
/* Durchgehende Buchungs-Balken über mehrere Kalendertage hinweg (siehe
   Rückfrage-Runde, nach Vorbild der Airbnb-eigenen App) - jede Woche
   ein eigener position:relative-Container, die Balken selbst
   prozentual positioniert (7 Spalten). Endet am Abreise-Tag bewusst
   auf halber Breite (siehe .calendar-booking-bar-departs), da der
   Check-out meist vormittags ist und derselbe Tag schon den nächsten
   Gast aufnehmen könnte - genau wie im Airbnb-Vorbild.
*/
.calendar-week-row{position:relative;margin-bottom:4px;}
.calendar-booking-bar{position:absolute;height:16px;border-radius:8px;font-size:9px;font-weight:600;color:#fff;display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;cursor:pointer;z-index:2;top:22px;}
.calendar-booking-bar-blocked{opacity:.55;}
.calendar-day-modal-item,.calendar-list-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);cursor:pointer;}
.calendar-day-modal-item.calendar-deadline-done,.calendar-list-item.calendar-deadline-done{opacity:.6;}
.calendar-day-modal-item:hover,.calendar-list-item:hover{border-color:var(--teal);}
.calendar-list{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;}
.floor-plan-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:10px;padding-bottom:2px;}
.floor-plan-expand-btn{width:30px;height:30px;border-radius:50%;background:var(--bg);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);padding:0;}
.floor-plan-expand-btn svg{width:14px;height:14px;}
.floor-plan-expand-btn:hover{border-color:var(--teal);color:var(--teal);}
.floor-plan-map-truescreen-wrap{position:fixed;inset:0;z-index:90;}
.floor-plan-map-truescreen-wrap .floor-plan-map-container{width:100vw;height:100vh;border-radius:0;border:none;}
.floor-plan-map-truescreen-wrap>button{position:absolute;bottom:16px;left:16px;z-index:5;}
.floor-plan-overlay-handle{width:22px;height:22px;background:var(--teal);border:3px solid #fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;}
.floor-plan-overlay-handle:active{cursor:grabbing;}
.floor-plan-map-truescreen-wrap .maplibregl-ctrl-top-right{top:104px;}
.floor-plan-image-truescreen-wrap{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:hidden;}
.floor-plan-image-truescreen-wrap .floor-plan-viewport{width:100vw;height:100vh;border-radius:0;border:none;display:flex;align-items:center;justify-content:center;}
.floor-plan-image-truescreen-wrap .floor-plan-img{width:auto;height:auto;max-width:100vw;max-height:100vh;display:block;}
.floor-plan-floating-nav-wrap{position:fixed;top:0;left:0;right:0;z-index:95;background:transparent;}
.floor-plan-floating-nav-wrap .tab{text-shadow:0 1px 3px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.9);}
.floor-plan-floating-nav-wrap .tabs{margin:0;padding:8px 12px 0;background:var(--bg);border-bottom:none;position:static;}
.floor-plan-floating-pills{padding:8px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.floor-plan-tabs::-webkit-scrollbar{display:none;}
.floor-plan-tab{flex-shrink:0;white-space:nowrap;padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);font-size:13px;font-weight:500;cursor:pointer;}
.floor-plan-floating-pills .floor-plan-tab{background:var(--bg);}
.floor-plan-floating-pills .floor-plan-tab.active{background:#000;border-color:#000;color:#fff;}
.floor-plan-tab.active{background:var(--teal);border-color:var(--teal);color:#fff;}
.floor-plan-tab-add{font-weight:700;color:var(--teal-dark);border-style:dashed;}
.floor-plan-viewport{position:relative;width:100%;overflow:hidden;border-radius:10px;border:1px solid var(--line);touch-action:none;}
.floor-plan-map-container{width:100%;height:min(60vh,480px);border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.floor-plan-map-marker{transform:none;}
.floor-plan-viewport.floor-plan-zoomed{cursor:grab;}
.floor-plan-viewport.floor-plan-grabbing{cursor:grabbing;}
.floor-plan-inner{position:relative;transform-origin:0 0;will-change:transform;}
.floor-plan-img{width:100%;height:auto;display:block;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.floor-plan-drawing-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.floor-plan-marker{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%) scale(calc(1 / var(--floor-plan-zoom, 1)));cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.35);touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.floor-plan-marker-label{position:absolute;left:16px;top:50%;transform:translate(0,-50%);white-space:nowrap;background:rgba(255,255,255,.82);color:#000;font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.floor-plan-marker-open{background:var(--danger);}
.floor-plan-marker-done{background:var(--sage);}
.floor-plan-marker-note{background:var(--purple,#7F77DD);}
.floor-plan-marker-dragging{opacity:.85;box-shadow:0 3px 10px rgba(0,0,0,.5);z-index:5;}
.floor-plan-marker-delete-hint{background:var(--danger) !important;transform:translate(-50%,-50%) scale(1.4);}
/* "Hier bin ich"-Marker für die kartenbasierte Kompass-Navigation -
   fester Punkt an der echten GPS-Position plus ein davor liegender,
   rotierender Kegel für die Blickrichtung (Kompass-Heading). Der
   Drehpunkt des Kegels (transform-origin) liegt exakt auf dem
   Mittelpunkt des Punkts, damit er sauber um die eigene Position
   schwenkt statt um seine eigene Spitze. Die Zielrichtung selbst
   ergibt sich jetzt einfach aus der Position auf der Karte, nicht mehr
   aus einer separat berechneten Pfeil-Rotation. */
.floor-plan-user-marker{position:relative;width:0;height:0;}
.floor-plan-user-dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--teal);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:2;}
.floor-plan-user-cone{position:absolute;left:-13px;top:-34px;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:26px solid rgba(60,110,113,.42);transform-origin:13px 34px;transform:rotate(var(--rotation,0deg));transition:transform .4s ease-out;z-index:1;pointer-events:none;}
.floor-plan-nav-panel{position:absolute;top:10px;left:10px;right:auto;max-width:calc(100% - 20px);display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:13px;z-index:20;}
.floor-plan-nav-panel-fullscreen{top:auto;left:auto;bottom:16px;right:16px;}
.floor-plan-nav-panel strong{display:block;font-size:13px;}
.floor-plan-nav-panel .hint{margin:0;white-space:nowrap;}
.floor-plan-info-btn{position:absolute;bottom:8px;right:8px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.media-tile{position:relative;}
.media-tile-info-btn{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);padding:0;}
.media-tile-info-btn svg{width:13px;height:13px;}
.media-tile-delete-btn{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--danger);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);padding:0;}
.media-tile-delete-btn svg{width:12px;height:12px;}
.media-tile-play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.media-tile-play-badge svg{width:16px;height:16px;margin-left:2px;}
.media-tile-doc-thumb svg{width:28px;height:28px;}
.floor-plan-info-btn svg{width:15px;height:15px;}
.floor-plan-info-box{position:absolute;bottom:40px;right:8px;max-width:260px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--ink-soft);box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:6;}
@media (max-width:520px){
  .calendar-cell{height:48px;padding:3px;font-size:11px;}
  .calendar-deadline-pill{font-size:8px;padding:1px 4px;}
}
.todo-category-header{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;color:var(--teal-dark);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);}
/* Trennt den gesammelten "Erledigt"-Block sichtbar von den Kategorien
   mit offenen Aufgaben darüber (siehe Rückfrage-Runde) - bewusst
   deutlicher abgesetzt (mehr Abstand, dickere Trennlinie, gedämpfte
   Farbe) als eine normale Kategorie-Überschrift, damit auf den ersten
   Blick klar ist: ab hier kommt nur noch Erledigtes.*/
.todo-done-section-header{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:600;color:var(--ink-soft);margin:32px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--line);}
.todo-category-header:first-child{margin-top:0;}
.category-select{font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);width:auto;max-width:95px;}
.assign-picker{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
.assign-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 6px 3px 10px;border-radius:20px;background:var(--teal-tint);color:var(--teal-dark);}
.assign-chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
.assign-suggestion{font-size:12px;padding:3px 10px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;}
.assign-suggestion:hover{background:var(--teal-tint);border-color:var(--teal);}
.category-picker{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:10px 30px 10px 14px;font-size:13px;color:var(--ink);cursor:pointer;font-weight:500;width:auto;height:42px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;}
.category-picker:focus{border-color:var(--teal);outline:none;}
.prio-badge.prio-none{color:var(--ink-soft);background:var(--line);}
.prio-badge.prio-1{color:var(--danger);background:var(--danger-tint);}
.prio-badge.prio-2{color:var(--brass);background:var(--brass-tint);}
.prio-badge.prio-3{color:var(--sage);background:var(--sage-tint);}
.checkbox{width:22px;height:22px;border-radius:5px;border:1.5px solid var(--line);flex-shrink:0;cursor:pointer;background:#fff;margin-top:1px;display:flex;align-items:center;justify-content:center;}
.checkbox svg{width:14px;height:14px;opacity:0;stroke:#fff;}
.todo.done .checkbox{background:var(--sage);border-color:var(--sage);}
.todo.done .checkbox svg{opacity:1;}
.photo-complete-btn{width:22px;height:22px;border-radius:0;border:1.5px solid var(--line);flex-shrink:0;cursor:pointer;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.photo-complete-btn:hover{border-color:var(--teal);color:var(--teal);}
.photo-complete-btn svg{width:13px;height:13px;}
.todo-text{flex:1;font-size:15px;line-height:1.4;overflow-wrap:break-word;word-break:break-word;}
/* Mangel-Kennzeichnung bei einer eigenständigen Mangel-Aufgabe (siehe
   Rückfrage-Runde) - dieselbe Warnfarbe wie bei der bestehenden "als
   Mangel melden"-Anmerkung. */
.defect-task-pill{display:inline-block;margin-top:3px;font-size:11px;font-weight:600;color:var(--danger);background:var(--danger-tint);padding:2px 7px;border-radius:20px;}
.vote-btn{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:3px 10px;cursor:pointer;}
.vote-btn svg{width:13px;height:13px;}
.vote-btn.voted{color:var(--sage);background:var(--sage-tint);border-color:var(--sage);}
.vote-result-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;}
.vote-result-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vote-result-count{flex-shrink:0;font-weight:600;color:var(--sage);background:var(--sage-tint);border-radius:20px;padding:1px 8px;font-size:12px;}
/* Sichtbarer "aktiv"-Zustand für den Mängel-Filter-Schalter (siehe
   Rückfrage-Runde) - .btn-ghost hatte bisher keinen eigenen
   aktiv-Zustand, da er bisher nirgends als echter Ein/Aus-Schalter
   verwendet wurde. */
.btn-ghost.active{background:var(--danger-tint);border-radius:20px;}
.todo.done .todo-text{color:var(--ink-soft);}
.stamp{display:inline-block;margin-top:5px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--sage);background:#fff;border:1px solid #CFE3CE;padding:2px 7px;border-radius:5px;transform:rotate(-2deg);}
.log-entry{font-size:12.5px;color:var(--ink-soft);padding:7px 0;border-top:1px solid var(--line);}
.log-entry:first-of-type{border-top:none;}
.log-time{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}
.icon-btn{background:none;border:none;color:var(--ink-soft);cursor:pointer;padding:4px;flex-shrink:0;}
.icon-btn.pin-active{color:var(--brass);}
.like-btn{display:inline-flex;align-items:center;gap:3px;}
.like-btn.like-btn-active{color:var(--teal-dark);}
.like-count{font-size:11px;font-weight:600;}
.icon-btn svg{width:16px;height:16px;display:block;}
.icon-btn:hover{color:var(--teal-dark);}
.icon-btn-inline{display:inline-flex;vertical-align:middle;padding:2px;margin-left:4px;}

/* Berechtigungs-Tabelle ("Rechte verteilen") - ab mehreren Rollen auf
   dem Smartphone horizontal wischbar, mit stehenbleibender
   Beschriftungsspalte links (siehe renderOrgRolesPage). */
.perm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px;}
/* display:block ergänzt: .perm-label sitzt auf einem <span> (von Haus
   aus inline). Ein Flex-Kind wird zwar laut Spezifikation automatisch
   "blockifiziert", aber in Kombination mit position:sticky hat das in
   der Praxis nicht zuverlässig gegriffen - der weiße Hintergrund
   deckte dadurch nur den schmalen Bereich direkt um den Text ab statt
   die volle deklarierte Spaltenbreite, wodurch durchscrollende
   Schieberegler dahinter sichtbar blieben. Mit display:block ist die
   volle Breite jetzt garantiert, unabhängig vom Textinhalt.
   align-self:stretch löst zusätzlich das Höhenproblem: die Eltern-Zeile
   nutzt align-items:center, wodurch jedes Flex-Kind - auch dieses -
   standardmäßig nur so hoch wird wie sein eigener Inhalt (die
   Textzeile, ~18px), nicht so hoch wie die ganze Zeile (~38px durch
   den danebenliegenden Schieberegler). Der weiße Hintergrund deckte
   dadurch nur die Text-Höhe ab, nicht die komplette Zeilenhöhe, in der
   Regler beim seitlichen Scrollen sonst oben/unten durchschimmern
   konnten. align-self:stretch übersteuert das gezielt NUR für dieses
   eine Element auf die volle Zeilenhöhe; das eigene display:flex plus
   align-items:center zentriert den Text danach wieder sauber
   innerhalb dieser jetzt volleren Höhe. Robuster als eine feste
   Padding-Zahl, da es sich automatisch an die tatsächliche Zeilenhöhe
   anpasst statt sie zu erraten.
   word-break sorgt dafür, dass auch ein einzelnes langes Wort bei der
   schmaleren Spalte sauber umbricht statt herauszuragen. */
.perm-label{position:sticky;left:0;display:flex;align-items:center;align-self:stretch;background:var(--card,#fff);flex:0 0 168px;width:168px;max-width:168px;padding-right:8px;z-index:1;margin:0;word-break:break-word;}

.switch{position:relative;display:block;width:38px;height:22px;flex-shrink:0;margin:0;}
/* Getrennte Datum-/Uhrzeit-"Knöpfe" mit ausgeschriebenem Text (siehe
   Rückfrage-Runde, nach Vorbild von Google Kalender) - öffnen jetzt
   komplett selbst gebaute Dialoge im Trunked-eigenen Design statt der
   nativen Browser-Felder (siehe openCustomDatePicker/
   openCustomTimePicker in app.js). Grund für den Wechsel: die nativen
   Felder ließen sich weder zuverlässig positionieren noch farblich
   anpassen - Chrome nutzt dabei eine komplett eigene Umsetzung, nicht
   Androids echtes, natives Auswahl-Bauteil (das nur echten Apps zur
   Verfügung steht, keinen Webseiten). */
.deadline-picker-btn{font-size:14px;font-weight:600;padding:8px 12px;}

/* Eigener Datums-Auswahl-Dialog (Monatsraster) */
.picker-date-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--ink-soft);margin-bottom:4px;}
.picker-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.picker-date-cell{aspect-ratio:1;border:none;background:none;border-radius:8px;font-size:14px;cursor:pointer;color:var(--ink);}
.picker-date-cell:hover{background:var(--teal-tint);}
.picker-date-cell-outside{color:var(--ink-soft);opacity:.5;}
.picker-date-cell-today{font-weight:700;box-shadow:inset 0 0 0 1px var(--teal);}
.picker-date-cell-selected{background:var(--teal);color:#fff;}

/* Eigener Uhrzeit-Auswahl-Dialog (zwei scrollbare Spalten) */
.picker-time-display{text-align:center;font-size:32px;font-weight:700;margin-bottom:10px;font-variant-numeric:tabular-nums;}
.picker-time-columns{display:flex;gap:8px;height:200px;}
.picker-time-column{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;border:1px solid var(--line);border-radius:10px;padding:4px;scroll-snap-type:y proximity;}
.picker-time-option{border:none;background:none;padding:8px 0;font-size:16px;border-radius:6px;cursor:pointer;color:var(--ink);scroll-snap-align:center;font-variant-numeric:tabular-nums;}
.picker-time-option:hover{background:var(--teal-tint);}
.picker-time-option-selected{background:var(--teal);color:#fff;font-weight:700;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--line);transition:.15s;border-radius:22px;}
.switch .slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:#fff;transition:.15s;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.switch input:checked + .slider{background:var(--teal);}
.switch input:checked + .slider:before{transform:translateX(16px);}
.switch-sm{width:33px;height:17px;}
.switch-sm .slider:before{height:11px;width:11px;}
.switch-sm input:checked + .slider:before{transform:translateX(16px);}
.icon-btn-inline svg{width:13px;height:13px;}

.comments{margin:10px 0 0 0;}
.comment{font-size:13px;color:var(--ink-soft);padding:6px 0;border-top:1px solid var(--line);overflow-wrap:break-word;word-break:break-word;}
.comment-photo{display:block;max-width:220px;max-height:220px;border-radius:8px;margin-top:6px;cursor:pointer;border:1px solid var(--line);}
.comment-doc-tile{display:flex;align-items:center;gap:6px;background:var(--card);padding:8px 10px;}
.inline-link{display:inline-flex;align-items:center;gap:3px;color:var(--teal-dark);text-decoration:underline;word-break:break-all;}
.inline-link svg{width:12px;height:12px;flex-shrink:0;}
.comment-doc-tile svg{width:20px;height:20px;flex-shrink:0;color:var(--ink-soft);}
.comment-doc-tile span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comment-doc-tile-single{border-radius:8px;max-width:220px;}

/* Bild-Stapel (mehrere auf einmal hochgeladene Fotos an einer
   Anmerkung/einem Mangel/einer Chat-Nachricht) - zwei leicht
   versetzte, dezente Karten hinter dem vordersten Bild deuten an,
   dass da noch mehr ist, ohne die tatsächlichen weiteren Bilder schon
   sichtbar zu machen (das passiert erst beim Öffnen der Lightbox). */
.photo-stack{position:relative;display:block;margin-top:6px;margin-bottom:12px;cursor:pointer;width:220px;max-width:100%;}
.photo-stack-ghost{position:absolute;inset:0;border-radius:8px;border:1px solid var(--line);background:var(--card);}
.photo-stack-ghost-1{transform:translate(5px,5px);z-index:1;}
.photo-stack-ghost-2{transform:translate(10px,10px);z-index:0;opacity:.7;}
.photo-stack-front{position:relative;z-index:2;display:block;max-width:220px;max-height:220px;width:100%;border-radius:8px;border:1px solid var(--line);object-fit:cover;}
.photo-stack-count{position:absolute;bottom:6px;right:6px;z-index:3;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:600;padding:2px 7px;border-radius:20px;}
.comment b{color:var(--ink);font-weight:500;}
.comment-form{display:flex;gap:8px;margin:10px 0 0 0;align-items:flex-end;}
.comment-form textarea{flex:1;padding:7px 10px;font-size:13px;}
.comment-form button{padding:7px 12px;font-size:13px;}
.comment-form-wrap{margin-top:10px;}
.comment-form-wrap .comment-form{margin-top:0;}
.attach-preview{margin-bottom:6px;}
.attach-input-wrap{display:flex;}
.attach-input-with-clip{padding-right:38px !important;}
.attach-clip-btn{position:absolute;top:50%;right:4px;transform:translateY(-50%);padding:6px !important;z-index:5;}
.attach-clip-btn svg{width:20px;height:20px;}
.toggle-comments{margin:4px 0 0 0;background:none;border:none;color:var(--teal-dark);font-size:12px;cursor:pointer;padding:0;}
.toggle-defects-active{color:var(--danger);}
.defect-entry{border-left:2px solid var(--danger);padding-left:8px;}

.member{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);}
.member:last-child{border-bottom:none;}
.member-info{display:flex;align-items:center;gap:10px;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--teal-tint);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;}
.member-name{font-size:14px;font-weight:500;}
.member-email{font-size:12px;color:var(--ink-soft);}
.role-badge{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500;}
.role-admin{background:var(--brass-tint);color:var(--brass);}
.role-user{background:var(--teal-tint);color:var(--teal-dark);}
.role-toggle{background:none;border:none;color:var(--teal-dark);font-size:12px;text-decoration:underline;cursor:pointer;margin-left:8px;}

.invite-code{font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:3px;background:var(--brass-tint);color:var(--brass);padding:10px 16px;border-radius:8px;text-align:center;font-weight:500;margin:10px 0;cursor:pointer;transition:background .15s;}
.invite-code:hover{background:var(--brass);color:#fff;}
@keyframes code-autofill-blink{
  0%,100%{background:var(--card);border-color:var(--line);}
  15%,45%,75%{background:var(--teal-tint);border-color:var(--teal-dark);}
}
.code-autofill-blink{animation:code-autofill-blink 1.4s ease-in-out;}
.copy-row{display:flex;gap:8px;}
.copy-row input{flex:1;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);background:#FCFBF8;}

.msg-stack{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:480px;z-index:60;display:flex;flex-direction:column;gap:10px;}
.msg-stack-bottom{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:480px;z-index:55;display:flex;flex-direction:column;gap:10px;}
.msg{position:relative;font-size:13px;padding:12px 40px 12px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(43,46,51,.18);}
.msg-close{position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:6px;color:inherit;opacity:.6;}
.msg-close:hover{opacity:1;}
.msg-error{background:var(--danger-tint);color:var(--danger);}
.msg-ok{background:var(--sage-tint);color:var(--sage);}
.msg-offline{background:var(--brass-tint);color:var(--brass);}

.switcher{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-soft);}
.switcher button{background:none;border:none;color:var(--teal-dark);text-decoration:underline;cursor:pointer;font-size:13px;padding:0;}

.install-btn{font-size:12px;padding:4px 10px;border-color:var(--teal);color:var(--teal-dark);}

/* Höhe orientiert sich an der tatsächlich sichtbaren Fläche statt der
   vollen Bildschirmhöhe (siehe Rückfrage-Runde: "Eingabemaske wird von
   der Tastatur verdeckt") - dadurch zentriert sich der Dialog korrekt
   im noch sichtbaren Bereich oberhalb einer geöffneten Tastatur, statt
   teilweise dahinter zu verschwinden. --app-visible-height wird oben
   in app.js per Visual-Viewport-Schnittstelle gesetzt; ohne
   Unterstützung greift wie bisher 100vh.*/
.modal-bg{position:fixed;top:0;left:0;right:0;height:var(--app-visible-height,100vh);background:rgba(43,46,51,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;overflow-y:auto;}
/* Punktuelles Kurz-Howto (siehe Rückfrage-Runde) - bewusst KEIN
   Modal-Hintergrund, damit es nicht blockierend wirkt und die
   eigentliche Aktion (z.B. Priorität durchschalten) ungestört
   weiterläuft. Unten rechts, über allem anderen, aber klein genug, um
   nicht aufdringlich zu wirken.*/
.howto-hint{position:fixed;bottom:20px;right:16px;left:16px;max-width:320px;margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:90;}
.howto-hint-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:18px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px 6px;}
.modal-card{background:var(--card);border-radius:16px;padding:24px;max-width:360px;width:100%;}
.ios-steps{margin:14px 0 0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--ink);}
.ios-steps li{margin-bottom:8px;}

@media (prefers-reduced-motion: reduce){*{transition:none !important;}}

/* Ladeanimation - Icon hüpft und schlängelt sich leicht (passend zur
   S-Form des Logos), mit einem sanft pulsierenden Schatten am Boden
   für Tiefenwirkung. */
.loading-indicator{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:24px 16px;
}
.loading-indicator-icon{
    width:44px;
    height:44px;
    animation:loading-bounce 1.1s cubic-bezier(.42,0,.58,1) infinite;
}
.loading-indicator-shadow{
    width:26px;
    height:6px;
    border-radius:50%;
    background:var(--ink-soft);
    opacity:.18;
    animation:loading-shadow 1.1s cubic-bezier(.42,0,.58,1) infinite;
}
.loading-indicator-text{
    color:var(--ink-soft);
    font-size:13px;
}
@keyframes loading-bounce{
    0%, 100%{ transform:translateY(0) rotate(-8deg); }
    50%{ transform:translateY(-16px) rotate(8deg); }
}
@keyframes loading-shadow{
    0%, 100%{ transform:scale(1); opacity:.18; }
    50%{ transform:scale(.7); opacity:.1; }
}
@media (prefers-reduced-motion: reduce){
    .loading-indicator-icon, .loading-indicator-shadow{ animation:none; }
}

/* Sichtbarer Lade-Hinweis während eines laufenden Video-Uploads (siehe
   showVideoUploadProgress) - eigenes, zentriertes Overlay statt nur
   eines flüchtigen Toasts, da Video-Uploads deutlich länger dauern
   können als ein normaler Foto-Upload. */
.video-upload-progress-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px;}
.video-upload-progress-box{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:280px;text-align:center;}
.video-upload-progress-box .loading-indicator-text{max-width:220px;}

/* Bild-Vollbildansicht - ersetzt das bloße Öffnen der rohen Bild-URL
   in einem neuen Tab. Dunkler Hintergrund, zentriertes Bild,
   Aktionsleiste unten (Daumen hoch / Anmerkung / an Chat senden - je
   nach Kontext nicht alle verfügbar). */
.lightbox-bg{position:fixed;inset:0;background:rgba(20,21,24,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;z-index:200;}
.lightbox-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.12);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:20px;}
.lightbox-close:hover{background:rgba(255,255,255,.22);}
.lightbox-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%;position:relative;}
.lightbox-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lightbox-nav-btn:hover{background:rgba(255,255,255,.22);}
.lightbox-nav-prev{left:8px;}
.lightbox-nav-next{right:8px;}
.lightbox-counter{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;}
.lightbox-img{max-width:min(92vw,720px);max-height:70vh;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);object-fit:contain;}
.lightbox-doc-card{display:flex;flex-direction:column;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:40px 32px;box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:min(92vw,360px);text-align:center;}
.lightbox-doc-card svg{width:56px;height:56px;color:var(--ink-soft);}
.lightbox-doc-card .lightbox-doc-name{font-weight:600;font-size:15px;word-break:break-word;}
.lightbox-doc-card .lightbox-doc-hint{font-size:13px;color:var(--ink-soft);}
.lightbox-actions{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.lightbox-action-btn{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:none;border-radius:50%;width:44px;height:44px;color:#fff;cursor:pointer;flex-shrink:0;position:relative;}
.lightbox-action-btn:hover{background:rgba(255,255,255,.22);}
.lightbox-action-btn.active{background:var(--teal-dark);}
.lightbox-action-btn svg{width:19px;height:19px;}
.lightbox-action-count{position:absolute;bottom:-3px;right:-3px;background:var(--danger);color:#fff;font-size:10px;font-weight:600;line-height:1;padding:2px 5px;border-radius:20px;min-width:14px;text-align:center;}
.lightbox-comment-form{display:none;gap:8px;margin-top:12px;width:100%;max-width:420px;}
.lightbox-comment-form.open{display:flex;}
.lightbox-comment-form textarea{flex:1;border-radius:10px;border:none;padding:10px 12px;font-size:14px;resize:none;max-height:100px;}
.lightbox-comment-form button{flex-shrink:0;}

/* Update-Banner - erscheint oben, sobald eine neue Version der App im
   Hintergrund geladen wurde. Bewusst NICHT wie der normale Toast
   automatisch verschwindend (position:fixed unten, 2 Sekunden) -
   bleibt stehen, bis tatsächlich neu geladen wird, da eine verpasste
   Aktualisierung sonst leicht unbemerkt bliebe. */
.update-banner{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--teal-dark);color:#fff;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px;font-size:13px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.update-banner button{background:#fff;color:var(--teal-dark);border:none;border-radius:20px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}

/* Kurzes Aufblitzen beim Springen zu einer zitierten Original-
   Nachricht (siehe jumpToChatMessage) - macht sichtbar, welche
   Nachricht gemeint ist, ohne einen harten, sprunghaften Wechsel. */
.chat-message-highlight{animation:chat-message-flash 1.5s ease-out;}
@keyframes chat-message-flash{
  0%{box-shadow:0 0 0 3px var(--teal-dark);}
  100%{box-shadow:0 0 0 0 transparent;}
}
/* Wirklich öffentliche (kontofreie) Vorlagen-Ansicht (siehe
   Rückfrage-Runde: "öffentliche trunkeds wirklich öffentlich machen") */
.public-list-guest-wrap{max-width:480px;margin:24px auto;padding:0 16px;}
.public-list-guest-tasks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.public-list-guest-tasks li{background:var(--teal-tint);border-radius:8px;padding:10px 12px;font-size:14px;}