/* ============================================================================
   travdo · design system v2
   Mobile-first. One token layer, one component layer. No map.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* brand — unchanged travdo palette */
  --brand:#1ea7e0; --brand-600:#1489bb; --brand-ink:#fff;
  /* Gewählte Fläche: color-mix() kennt iOS erst ab 16.2, deshalb fest. */
  --brand-weich:rgba(30,167,224,.16); --brand-tief:#8fd6f6;
  --green:#84bd20; --orange:#f5871f;

  /* semantic */
  --ok:#3fae5c; --bad:#ef5a4a; --warn:#d6a022; --idle:#7b8a91;
  /* Flächen mit weißer Schrift: derselbe Ton, dunkler. Weiß kam auf --bad nur
     auf 3,4 : 1 („SOFORT", „Nicht übertragen", „Löschen"), auf --orange auf
     2,5 : 1 (die gewählte Dringlichkeit „Hoch" — auf jeder Karte vorgewählt)
     und auf --idle auf 3,6 : 1. So sind es 5,2 / 5,8 / 5,3 : 1. In beiden
     Themen gleich, weil die Schrift auf diesen Flächen immer weiß ist. */
  --bad-flaeche:#c43b2e; --orange-flaeche:#a64b00; --idle-flaeche:#5c6f77;

  /* shape + rhythm */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --bar:56px;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.8,.3,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --tap:44px;

  /* surfaces — DARK is the default theme */
  --bg:#0b1013;
  --surface:#121a1e;
  --surface-2:#18232a;
  --surface-3:#203038;
  --line:#243338;
  --line-2:#30454e;
  --ink:#eaf0f2;
  --ink-2:#a3b5bd;
  --ink-3:#798b93;
  --scrim:rgba(4,8,10,.64);
  --glass:rgba(16,24,28,.78);
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 8px 22px rgba(0,0,0,.45);
  --sh-3:0 20px 52px rgba(0,0,0,.62);
  --photo-bg:#1b262c;
  color-scheme:dark;
  font-synthesis:none;
}
[data-theme="light"]{
  --bg:#f2f6f8;
  --brand-weich:rgba(20,137,187,.12); --brand-tief:#0d6c95;
  --surface:#ffffff;
  --surface-2:#f5f9fa;
  --surface-3:#eaf1f4;
  --line:#e2eaee;
  --line-2:#ccd9df;
  --ink:#0f242c;
  --ink-2:#536a72;
  --ink-3:#7a8d95;
  --scrim:rgba(15,36,44,.34);
  --glass:rgba(255,255,255,.8);
  --sh-1:0 1px 2px rgba(15,40,50,.07);
  --sh-2:0 8px 22px rgba(15,40,50,.1);
  --sh-3:0 20px 52px rgba(15,40,50,.18);
  --photo-bg:#dde6ea;
  /* Signalfarben als SCHRIFT auf hellem Grund. Die Flächenfarben kamen dort
     nur auf 2,4 bis 3,5 : 1 („Abteilung wählen", „Kein Foto", „Aufnahme
     läuft …"). Nur im hellen Thema: Im dunklen greift der Rückfall auf die
     Flächenfarbe, die dort genügt — var(--bad-schrift, var(--bad)).
     --brand-zeichen ist für Symbole (3 : 1 genügt). */
  --bad-schrift:#c43b2e; --warn-schrift:#8a6100; --orange-schrift:#a64b00;
  --ink-3-schrift:#5c6f77; --brand-zeichen:#1489bb;
  color-scheme:light;
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  min-height:100vh;min-height:100svh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.45;
  color:var(--ink);background:var(--bg);
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--brand);text-decoration:none}
img{display:block;max-width:100%}
input,select,textarea{font:inherit}
[hidden]{display:none!important}
svg{flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.m0{margin:0}

:where(button,a,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs);
}
::selection{background:color-mix(in srgb,var(--brand) 35%,transparent)}

/* reset for the many button-as-card elements */
.cardbtn{
  display:block;width:100%;text-align:left;
  background:none;border:0;padding:0;margin:0;color:inherit;
  -webkit-appearance:none;appearance:none;
}

/* ============================================================== LOGIN ==== */
.login-body{
  display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:var(--s6);
  background:
    radial-gradient(90% 60% at 50% -10%, color-mix(in srgb,var(--brand) 20%,transparent), transparent 70%),
    var(--bg);
}
.login-card{
  width:min(400px,100%);padding:var(--s7) var(--s6) var(--s6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);text-align:center;
}
/* brand lockup: the original travdo mark + the product name */
.login-brand{display:grid;justify-items:center;gap:var(--s3);margin:0 0 var(--s5)}
.login-logo{
  width:168px;max-width:70%;height:auto;margin:0;
  background:#fff;border-radius:var(--r-sm);padding:10px;
}
.brand-sub{
  display:flex;align-items:center;gap:var(--s3);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-2);
}
.brand-sub::before,.brand-sub::after{content:"";width:22px;height:1px;background:var(--orange)}
.brand-sub::after{margin-left:-.22em}
.login-card h1{font-size:1.35rem;letter-spacing:-.01em}
.login-sub{color:var(--ink-2);font-size:.92rem;margin-top:var(--s1)}
.login-form{display:grid;gap:var(--s3);margin-top:var(--s6)}
.login-error{
  display:flex;gap:var(--s2);align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bad) 14%,transparent);
  color:var(--bad);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:.88rem;margin-top:var(--s5);
}
.field{
  width:100%;min-height:var(--tap);padding:13px var(--s4);
  background:var(--surface-2);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  outline:none;transition:border-color .15s,background .15s;
}
/* Platzhalter hell eine Stufe dunkler: „Kurz und klar" kam mit --ink-3 nur auf
   3,3 : 1 — und genau dieser Satz sagt, was in das leere Feld gehört. */
.field::placeholder{color:var(--ink-3-schrift,var(--ink-3))}
.field:focus{border-color:var(--brand);background:var(--surface)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:13px var(--s5);
  border:1px solid transparent;border-radius:var(--r-sm);
  font-weight:650;letter-spacing:-.005em;
  transition:transform .08s var(--ease),filter .15s,background .15s;
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--brand);color:var(--brand-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 30%,transparent)}
.btn-primary:active{filter:brightness(.94)}
.btn-primary[disabled]{background:var(--idle);box-shadow:none;cursor:default}
.btn-go{background:var(--green);color:#fff}
.btn-quiet{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 var(--s3);font-size:.82rem;border-radius:var(--r-sm)}

/* a panel is open: freeze the page behind it */
html.locked,html.locked body{overflow:hidden;height:100%}

/* tiny utilities — the CSP forbids style="" attributes, so spacing lives here */
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.strong{color:var(--ink);font-weight:650}
.c-orange{color:var(--orange)}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================= APP BAR === */
.appbar{
  position:sticky;top:0;z-index:60;
  height:calc(var(--bar) + var(--safe-t));padding:var(--safe-t) var(--s3) 0 var(--s4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.appbar-brand{display:flex;align-items:center;gap:var(--s3);min-width:0}
.appbar-logo{flex:none;height:24px;width:auto;background:#fff;border-radius:6px;padding:3px 6px}
.appbar-sub{
  min-width:0;padding-left:var(--s3);border-left:1px solid var(--line-2);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:380px){
  .appbar-brand{gap:var(--s2)}
  .appbar-logo{height:21px}
  .appbar-sub{padding-left:var(--s2);font-size:.66rem;letter-spacing:.06em}
}
.appbar-actions{display:flex;align-items:center;gap:var(--s2)}
.iconbtn{
  width:var(--tap);height:var(--tap);display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--r-sm);color:var(--ink-2);
  transition:background .15s,color .15s;
}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn:active{background:var(--surface-3)}

/* ============================================================ DASHBOARD == */
.dash{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--s5) var(--s4) calc(var(--s8) + var(--safe-b));
}
.page-head h1{font-size:clamp(1.6rem,6vw,2.1rem);font-weight:800;letter-spacing:-.025em}
.page-head .lead{color:var(--ink-2);font-size:.94rem;margin-top:2px}

/* --- search --- */
.search{
  position:relative;display:flex;align-items:center;gap:var(--s2);
  margin:var(--s5) 0 var(--s4);padding:0 var(--s3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s;
}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.search svg{color:var(--ink-3)}
.search input{
  flex:1;min-width:0;min-height:48px;padding:0;
  background:none;border:0;outline:none;color:var(--ink);font-size:1rem;
}
/* Wie bei .field: „Ort oder Zimmernummer" kam hell nur auf 3,5 : 1. */
.search input::placeholder{color:var(--ink-3-schrift,var(--ink-3))}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{
  width:30px;height:30px;display:grid;place-items:center;flex:none;
  background:var(--surface-3);border:0;border-radius:var(--r-full);color:var(--ink-2);
}

/* --- stat tiles double as the status filter --- */
.stats{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:var(--s2);
  overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 calc(-1 * var(--s4)) var(--s4);padding:2px var(--s4);
  scrollbar-width:none;
}
.stats::-webkit-scrollbar{display:none}
.stat{
  scroll-snap-align:start;position:relative;overflow:hidden;
  min-height:76px;padding:var(--s3) var(--s3) var(--s3) var(--s4);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  text-align:left;transition:border-color .15s,background .15s,transform .08s var(--ease);
}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc,var(--line-2))}
.stat:active{transform:scale(.98)}
.stat-n{font-size:1.5rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-l{font-size:.74rem;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.stat.is-on{background:var(--surface-3);border-color:var(--acc,var(--brand))}
.stat.is-on .stat-n{color:var(--acc,var(--brand))}
.stat.is-on .stat-l{color:var(--ink)}
.stat[data-status="all"]{--acc:var(--ink-3)}
.stat[data-status="enabled"]{--acc:var(--green)}
.stat[data-status="operating"]{--acc:var(--brand)}
.stat[data-status="sale"]{--acc:var(--orange)}
.stat[data-status="coming_soon"]{--acc:var(--idle)}

/* --- defect alert bar --- */
.alertbar{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  margin-bottom:var(--s5);padding:var(--s3) var(--s4);
  background:color-mix(in srgb,var(--bad) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--bad) 38%,transparent);
  border-radius:var(--r-md);color:var(--ink);text-align:left;
}
.alertbar>svg:first-child{color:var(--bad)}
.alertbar span{flex:1;font-size:.9rem}
.alertbar b{font-weight:700}
.alertbar>svg:last-child{color:var(--ink-3);transition:transform .15s}
.alertbar[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:#fff}
.alertbar[aria-pressed="true"]>svg{color:#fff}
.alertbar[aria-pressed="true"]>svg:last-child{transform:rotate(90deg)}

/* --- section headers --- */
.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin:0 0 var(--s3);min-height:36px;
}
/* Hell eine Stufe dunkler: „Offener Rundgang" kam mit --ink-3 nur auf 3,2 : 1. */
.sec-head h2{
  font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3-schrift,var(--ink-3));white-space:nowrap;
}
.sec-tools{display:flex;align-items:center;gap:var(--s2)}
.select{position:relative;display:flex;align-items:center}
.select select{
  -webkit-appearance:none;appearance:none;
  min-height:36px;padding:0 30px 0 var(--s3);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.82rem;font-weight:650;outline:none;
}
.select svg{position:absolute;right:8px;color:var(--ink-3);pointer-events:none}
.seg{display:flex;gap:2px;padding:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.seg-b{
  width:34px;height:30px;display:grid;place-items:center;
  background:none;border:0;border-radius:9px;color:var(--ink-3);transition:background .15s,color .15s;
}
.seg-b[aria-pressed="true"]{background:var(--surface-3);color:var(--brand)}

/* --- "Im Fokus" rail --- */
.focus{margin-bottom:var(--s6)}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,290px);gap:var(--s3);
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 calc(-1 * var(--s4));padding:2px var(--s4) var(--s2);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.fcard{
  scroll-snap-align:start;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);transition:transform .1s var(--ease),border-color .15s;
}
.fcard:active{transform:scale(.985)}
.fcard-ph{position:relative;display:block;aspect-ratio:16/9;background:var(--photo-bg)}
.fcard-ph img{width:100%;height:100%;object-fit:cover}
.fcard-body{display:block;padding:var(--s3) var(--s4) var(--s4)}
.fcard-name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:750;font-size:1.02rem;line-height:1.25;letter-spacing:-.015em}
.fcard-sub{display:block;color:var(--ink-2);font-size:.82rem;margin-top:2px}
.fcard-why{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);
  font-size:.78rem;font-weight:650;color:var(--ink-2);
}
.fcard-why.is-bad{color:var(--bad-schrift, var(--bad))}

/* --- photo overlays shared by cards --- */
.ph-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,12,.78),rgba(6,10,12,.1) 55%,transparent)}

/* --- status tag --- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:var(--r-full);
  font-size:.68rem;font-weight:750;letter-spacing:.02em;white-space:nowrap;
  color:#fff;background:var(--idle);
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.95}
.tag-operating{background:var(--brand)}
.tag-sale{background:var(--orange)}
.tag-coming_soon{background:var(--idle)}
.tag-float{
  position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* --- group header --- */
.grp{
  position:sticky;top:calc(var(--bar) + var(--safe-t));z-index:20;
  display:flex;align-items:baseline;gap:var(--s2);
  margin:var(--s5) calc(-1 * var(--s4)) var(--s2);padding:var(--s2) var(--s4);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.grp:first-child{margin-top:0}
.grp-t{font-size:.86rem;font-weight:750;letter-spacing:-.01em}
.grp-n{font-size:.76rem;color:var(--ink-3-schrift,var(--ink-3));font-weight:650;font-variant-numeric:tabular-nums}

/* --- list view row --- */
.hlist{display:flex;flex-direction:column;gap:var(--s2)}
.hrow{
  display:flex;align-items:center;gap:var(--s3);
  min-height:76px;padding:var(--s2) var(--s3) var(--s2) var(--s2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .08s var(--ease),border-color .15s,background .15s;
}
.hrow:hover{border-color:var(--line-2)}
.hrow:active{transform:scale(.99);background:var(--surface-2)}
.hrow-ph{position:relative;flex:none;width:60px;height:60px;border-radius:var(--r-sm);overflow:hidden;background:var(--photo-bg)}
.hrow-ph img{width:100%;height:100%;object-fit:cover}
.hrow-ph.is-soon img{filter:grayscale(.9) brightness(1.05)}
.hrow-dot{
  position:absolute;right:3px;bottom:3px;width:11px;height:11px;border-radius:50%;
  background:var(--idle);border:2px solid var(--surface);
}
.hrow-dot.operating{background:var(--brand)}
.hrow-dot.sale{background:var(--orange)}
.hrow-main{flex:1;min-width:0;display:block}
.hrow-name{
  display:block;font-weight:700;font-size:.97rem;line-height:1.25;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hrow-meta{
  display:block;margin-top:3px;color:var(--ink-2);font-size:.81rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hrow-side{display:flex;align-items:center;gap:var(--s2);flex:none}
.hrow-go{color:var(--ink-3)}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-full);
  font-size:.7rem;font-weight:750;font-variant-numeric:tabular-nums;
  background:var(--surface-3);color:var(--ink-2);
}
.pill-bad{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.pill-sale{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange)}
.pill-soon{background:var(--surface-3);color:var(--ink-2)}
.pill-lock{background:var(--surface-3);color:var(--ink-3)}
.hrow .pill-lock{padding:5px 7px}

/* --- demo gate: visible, but not usable --- */
.is-locked{opacity:.52;filter:saturate(.35)}
.is-locked .hrow-go{visibility:hidden}
.is-locked:active{transform:none}
.hcard.is-locked .hcard-ph .tag-float{opacity:.8}

/* --- photo placeholder for houses without an image --- */
.ph-none{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-3)}
.hero .ph-none{background:linear-gradient(135deg,var(--brand),var(--brand-600));color:rgba(255,255,255,.55)}

/* --- grid view card --- */
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.hcard{
  overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .08s var(--ease),border-color .15s;
}
.hcard:hover{border-color:var(--line-2)}
.hcard:active{transform:scale(.985)}
.hcard-ph{position:relative;display:block;aspect-ratio:4/3;background:var(--photo-bg)}
.hcard-ph img{width:100%;height:100%;object-fit:cover}
.hcard-ph.is-soon img{filter:grayscale(.9) brightness(1.05)}
.hcard-ph .tag-float{top:8px;left:8px}
.hcard-badges{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;gap:4px}
.hcard-body{display:block;padding:var(--s3)}
.hcard-name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:700;font-size:.9rem;line-height:1.3;letter-spacing:-.015em;min-height:2.6em}
.hcard-meta{display:block;margin-top:3px;color:var(--ink-2);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- empty + skeleton --- */
.empty{
  display:grid;place-items:center;gap:var(--s3);text-align:center;
  padding:var(--s8) var(--s5);color:var(--ink-2);
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.empty svg{color:var(--ink-3)}
.empty h3{font-size:1rem;color:var(--ink)}
.empty p{font-size:.88rem;max-width:34ch}
.skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);height:76px;
  display:flex;align-items:center;gap:var(--s3);padding:var(--s2)}
.skel-ph{width:60px;height:60px;border-radius:var(--r-sm);flex:none}
.skel-col{flex:1;display:flex;flex-direction:column;gap:9px}
.skel-ln{height:11px;width:62%;border-radius:var(--r-full)}
.skel-ln.short{width:38%}
.skel-ph,.skel-ln{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ================================================= PANEL (detail/dossier) */
.panel{
  position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column;background:var(--bg);
  transform:translateX(100%);transition:transform .3s var(--ease);
  visibility:hidden;
}
.panel.open{transform:none;visibility:visible}
.panel-bar{
  flex:none;z-index:2;
  min-height:calc(var(--bar) + var(--safe-t));padding:var(--safe-t) var(--s3) 0;
  display:flex;align-items:center;gap:var(--s2);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.panel-back{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  min-height:var(--tap);padding:0 var(--s3) 0 var(--s2);
  background:none;border:0;border-radius:var(--r-sm);color:var(--brand);font-weight:650;font-size:.92rem;
}
.panel-back:active{background:var(--surface-2)}
.panel-title{
  flex:1;min-width:0;font-weight:700;font-size:.95rem;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.panel-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 var(--s4) calc(var(--s8) + var(--safe-b));
}
.panel-body>.inner{max-width:720px;margin:0 auto}

/* --- hero --- */
.hero{
  position:relative;margin:0 calc(-1 * var(--s4));aspect-ratio:16/10;max-height:46vh;max-height:46svh;
  background:linear-gradient(135deg,var(--brand),var(--brand-600));overflow:hidden;
}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.is-soon img{filter:grayscale(.65)}
.hero-text{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:2;color:#fff}
.hero-text h2{font-size:clamp(1.3rem,5.4vw,1.75rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-text p{font-size:.88rem;opacity:.94;margin-top:4px;text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* --- quick actions --- */
.quick{display:flex;gap:var(--s2);margin:var(--s4) 0 var(--s5)}
.quick a{flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:70px;padding:var(--s2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);transition:transform .08s var(--ease),border-color .15s;
}
.quick a:active{transform:scale(.96);border-color:var(--brand)}
.quick svg{color:var(--brand)}
.quick span{font-size:.7rem;font-weight:650;color:var(--ink-2)}

/* --- big call to action (dossier) --- */
.cta{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  margin-bottom:var(--s5);padding:var(--s4);
  background:linear-gradient(135deg,var(--orange),#e0701a);color:#fff;
  border:0;border-radius:var(--r-lg);text-align:left;
  box-shadow:0 10px 26px color-mix(in srgb,var(--orange) 36%,transparent);
}
.cta:active{filter:brightness(.95)}
.cta-ic{flex:none;width:40px;height:40px;display:grid;place-items:center;background:rgba(255,255,255,.2);border-radius:var(--r-sm)}
.cta-t{flex:1;min-width:0}
.cta-t b{display:block;font-size:1.02rem;font-weight:750;letter-spacing:-.015em}
.cta-t span{display:block;font-size:.76rem;opacity:.92;margin-top:1px}

/* --- info blocks --- */
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s4);overflow:hidden}
.block-h{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s2);
}
.block-h h3{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.block-b{padding:0 var(--s4) var(--s4)}
.block-b>p{color:var(--ink-2);font-size:.92rem}
.block-b>p+p{margin-top:var(--s2)}
.drow{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);min-height:58px;
  border-top:1px solid var(--line);color:var(--ink);
}
.drow:first-child{border-top:0}
.drow>svg:first-child{color:var(--ink-3)}
.drow-t{flex:1;min-width:0}
.drow-l{display:block;font-size:.72rem;color:var(--ink-3);font-weight:650;letter-spacing:.02em}
.drow-v{display:block;font-size:.93rem;word-break:break-word}
a.drow .drow-v{color:var(--brand)}
a.drow:active{background:var(--surface-2)}

/* --- KPI strip --- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s4)}
.kpi{padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);text-align:center}
.kpi .n{font-size:1.5rem;font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi .l{font-size:.71rem;color:var(--ink-2);margin-top:3px;font-weight:600}
.kpi.ok .n{color:var(--ok)}
.kpi.bad .n{color:var(--bad)}

/* --- recorder --- */
.rec{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s5) var(--s4)}
.mic{
  width:76px;height:76px;border-radius:50%;border:0;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 42%,transparent);
  transition:transform .1s var(--ease),background .2s;
}
.mic:active{transform:scale(.94)}
.mic.recording{background:var(--bad);animation:recpulse 1.4s ease-out infinite}
.mic.busy{background:var(--idle);animation:none}
@keyframes recpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}
  70%{box-shadow:0 0 0 22px color-mix(in srgb,var(--bad) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 0%,transparent)}
}
.rec-hint{font-size:.86rem;color:var(--ink-2);text-align:center;min-height:1.3em}
.rec-timer{font-variant-numeric:tabular-nums;font-weight:750;color:var(--bad)}

/* --- transcription result + notes --- */
.result{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin:0 var(--s4) var(--s4)}
.result h4{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin-bottom:var(--s2)}
.summary{font-weight:650;margin-bottom:var(--s2)}
.transcript{font-size:.9rem;color:var(--ink-2);font-style:italic;margin-bottom:var(--s3)}
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.item{display:flex;gap:var(--s2);align-items:flex-start;font-size:.91rem;line-height:1.4}
.dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--warn)}
.dot.ok{background:var(--ok)}
.dot.defekt{background:var(--bad)}
.item .where{font-weight:650}
.item .note{color:var(--ink-2)}
.note-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.note-card .when{font-size:.73rem;color:var(--ink-3);margin-bottom:var(--s1);font-variant-numeric:tabular-nums}

/* ================================================================ DOSSIER */
.tabs{
  flex:none;display:flex;gap:var(--s1);
  padding:0 var(--s3);background:var(--glass);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:1 0 auto;background:none;border:0;padding:var(--s3) var(--s4);
  font-size:.86rem;font-weight:650;color:var(--ink-3);white-space:nowrap;
  border-bottom:2.5px solid transparent;transition:color .15s;
}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

.ov-photo{width:calc(100% + 2 * var(--s4));margin:0 calc(-1 * var(--s4)) var(--s4);height:180px;object-fit:cover;background:var(--photo-bg)}

/* floor plans */
.fp-tabs{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s4) 0 var(--s3);scrollbar-width:none}
.fp-tabs::-webkit-scrollbar{display:none}
.fp-tab{
  flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px var(--s3);font-size:.82rem;font-weight:650;color:var(--ink-2);
}
.fp-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.fp-stage{position:relative;max-height:60vh;max-height:60svh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.fp-wrap{position:relative;display:inline-block;min-width:100%}
.fp-img{display:block;width:100%;height:auto;transition:width .2s}
.fp-stage.zoom .fp-img{width:220%}
.fp-pin{
  position:absolute;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;border:2.5px solid #fff;
  display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;
  background:var(--idle);box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.fp-pin.ok{background:var(--ok)}
.fp-pin.mangel{background:var(--bad)}
.fp-bar{display:flex;gap:var(--s2);margin-top:var(--s3)}
.fp-bar .btn{flex:1;white-space:nowrap;font-size:.86rem;padding-inline:var(--s3)}
.fp-bar .btn.armed{background:var(--orange);border-color:var(--orange);color:#fff}
.fp-hint{font-size:.82rem;color:var(--ink-3);text-align:center;margin-top:var(--s3)}

/* room protocol */
.banner{
  background:color-mix(in srgb,var(--bad) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--bad) 38%,transparent);
  border-radius:var(--r-lg);padding:var(--s4);margin:var(--s4) 0;
}
.banner h4{display:flex;align-items:center;gap:var(--s2);color:var(--bad);font-size:.94rem;margin-bottom:var(--s3)}
.banner .mrow{font-size:.9rem;line-height:1.4}
.banner .mrow+.mrow{margin-top:var(--s2)}
.banner .mrow span{color:var(--ink-2)}
.room-card{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--idle);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s2);
}
.room-card.ok{border-left-color:var(--ok)}
.room-card.mangel{border-left-color:var(--bad)}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.rc-no{font-size:1.04rem;font-weight:750;letter-spacing:-.015em}
.rc-badge{padding:3px 10px;border-radius:var(--r-full);font-size:.68rem;font-weight:750;color:#fff;background:var(--idle)}
.rc-badge.ok{background:var(--ok)}
.rc-badge.mangel{background:var(--bad)}
.rc-empty{color:var(--ink-3);font-size:.87rem}
.rc-toggle{margin-top:var(--s2);background:none;border:0;padding:0;color:var(--brand);font-size:.82rem;font-weight:650}
.room-card.flash{animation:flash 1.3s ease}
@keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 55%,transparent)}}
.room-input{
  width:100%;min-height:var(--tap);margin-top:var(--s2);padding:11px var(--s3);
  background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:var(--r-sm);outline:none;
}
.room-input:focus{border-color:var(--brand)}

/* due diligence */
.dd-cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s3)}
.dd-cat h3{font-size:.96rem;font-weight:750;letter-spacing:-.015em}
.dd-cat .sub{color:var(--ink-3);font-size:.81rem;margin:2px 0 var(--s3)}
.dd-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:.91rem}
.dd-check{flex:none;width:21px;height:21px;border-radius:7px;display:grid;place-items:center;color:#fff;background:var(--ok)}
.dd-check.miss{background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line)}
.dd-link{font-weight:650;font-size:.88rem}
.dd-wip{color:var(--ink-3);font-size:.82rem}

/* ================================================================== TOAST */
.toast{
  /* Über jedem Blatt und Dialog: Gleich hoch wie ein Blatt lag die Meldung
     dahinter, weil das Blatt später im DOM steht — „Bitte etwas eintragen
     oder abbrechen." war nie zu sehen. Was ein Tipp auf sie bewirkt und wo
     sie über einem Blatt steht, regelt rundgang.css. */
  position:fixed;left:50%;bottom:calc(var(--s6) + var(--safe-b));z-index:350;
  transform:translateX(-50%);width:max-content;max-width:88vw;
  /* Einzeilig eine Pille, mehrzeilig ein Kärtchen — kein Oval. */
  padding:12px var(--s5);border-radius:22px;
  background:#0a1013;color:#fff;font-size:.9rem;text-align:center;
  box-shadow:var(--sh-3);
  animation:toastin .22s var(--ease);
}
.toast.err{background:var(--bad-flaeche)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================================================ RESPONSIVE */
@media (min-width:560px){
  .hgrid{grid-template-columns:repeat(3,1fr)}
  .hrow{min-height:84px}
  .hrow-ph{width:68px;height:68px}
  .stats{grid-auto-columns:minmax(132px,1fr)}
}
@media (min-width:900px){
  .dash{padding:var(--s7) var(--s6) var(--s8)}
  .hgrid{grid-template-columns:repeat(4,1fr)}
  .rail{grid-auto-columns:320px}
  .stats{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .grp{margin-inline:0;padding-inline:0;border-radius:var(--r-sm)}
  .panel-body{padding-inline:var(--s6)}
  /* inside a centred column the hero becomes a contained card instead of bleeding */
  .hero{margin-inline:0;margin-top:var(--s5);border-radius:var(--r-lg);max-height:38vh;max-height:38svh}
  .ov-photo{width:100%;margin-inline:0;border-radius:var(--r-md)}
  .result{margin-inline:0}
  .rec{padding-inline:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .panel{transition:none}
}
@media print{.appbar,.panel-bar,.tabs,.toast{display:none}}

/* Zwischen Hinweis und Fehler: nichts ist kaputt, aber es sollte jemand
   handeln, solange er noch vor der Sache steht. */
.toast.warn{background:var(--warn);color:#201803}

/* ------------------------------------------------- Bild groß (Lupe)
   Auf der Karte ist ein Foto 56 Pixel groß. Wer entscheiden soll, ob
   die Fliese gerissen ist, muss es größer sehen können.
   Über jedem Blatt (200), unter Rückfrage (300) und Meldung (350): Mit 60 ging
   die Großansicht aus dem Detailblatt unsichtbar HINTER dem Blatt auf — der
   Tipp aufs Foto tat scheinbar nichts, Markieren ging von dort gar nicht, und
   nach „Zurück" sprang das Bild plötzlich über der Erfassung auf. Das
   Netzband (70) liegt darunter; die Großansicht ist eine Vollbildansicht wie
   ein Blatt. Gilt auch für die Großansicht der Übersicht. */
.lupe{
  position:fixed;inset:0;z-index:250;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s4);padding-bottom:max(var(--s4),env(safe-area-inset-bottom));
  background:rgba(4,10,13,.94);
  animation:lupein .16s var(--ease);
}
.lupe img{
  max-width:100%;max-height:calc(100% - 120px);
  border-radius:var(--r-sm);object-fit:contain;
  background:var(--photo-bg);
}
.lupe-t{margin:0;font-size:.9rem;color:#cfdde3;text-align:center}
.lupe-zu{max-width:420px}
@keyframes lupein{from{opacity:0}to{opacity:1}}

/* ============================================================== MARKIEREN ==
   Kreis, Pfeil, Stift auf dem Foto (markieren.js). Die Ebene liegt genau
   über dem Bild; gezeichnet wird in Bildanteilen, Striche in festen Punkten. */
.mk{position:relative;display:inline-block;line-height:0;max-width:100%}
.mk img{display:block}
.mk-ebene{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.mk-ebene *{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mk-rand{stroke:#fff;stroke-opacity:.92}
/* Vorschau: füllt ihr Kästchen, beschnitten wie object-fit: cover. */
.mk-cover{display:block;width:100%;height:100%}
.mk-cover img{width:100%;height:100%;object-fit:cover}

/* Großansicht mit Werkzeugleiste. Die Leiste steht immer ganz unten im
   Griffbereich des Daumens; das Bild nimmt sich den Rest. */
.mk-lupe{justify-content:flex-end}
.mk-buehne{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.mk-lupe .mk-contain img{
  max-width:100%;max-height:calc(100vh - 300px);max-height:calc(100svh - 300px);
  width:auto;height:auto;border-radius:var(--r-sm);
}
/* Beim Markieren gehört der Finger dem Bild: kein Scrollen, kein Zoomen. */
.mk-aktiv .mk-ebene{pointer-events:all;touch-action:none;cursor:crosshair}
.mk-aktiv img{outline:2px solid #e53935;outline-offset:2px}
.mk-leiste{width:100%;max-width:520px;display:grid;gap:var(--s2)}
.mk-hinweis{margin:0;text-align:center;color:#e8f1f4;font-size:.95rem;line-height:1.35}
.mk-werkzeuge{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.mk-wz{
  min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:var(--r-sm);border:2px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;
}
.mk-wz.an{border-color:#e53935;background:rgba(229,57,53,.26)}
.mk-wz svg,.mk-los svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.mk-knoepfe>:only-child{grid-column:1/-1}
.mk-knoepfe .btn{min-height:56px}
/* Auf dem dunklen Grund braucht der ruhige Knopf eigene Farben — die des
   hellen Themas wären hier dunkel auf dunkel. */
.mk-leiste .btn-quiet{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#fff}
.mk-leiste .btn[disabled]{opacity:.45}

/* Fotos im Detailblatt lassen sich antippen und groß zeigen. */
.foto-feld .mk-oeffnen{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}

/* ------------------------------------------------- Braucht Klärung (probleme.js)
   Was der Server nicht angenommen hat, liegt sichtbar auf dem Gerät. Das Band
   ist rot, nicht blau: Hier muss jemand handeln, es wartet nicht von selbst. */
.netzband.klaerung{
  justify-content:space-between;flex-wrap:wrap;
  background:color-mix(in srgb,var(--bad) 16%,var(--surface));
  border-bottom-color:color-mix(in srgb,var(--bad) 45%,transparent);
}
.netzband.klaerung .ic{color:var(--bad)}
.netzband.klaerung .btn{min-height:48px}
.problem{margin-top:var(--s3)}
.problem-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.problem-knoepfe .btn{min-height:48px;flex:1 1 140px}
.passwort-zeigen{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);font-size:.95rem;color:var(--ink-2)}
.passwort-zeigen input{width:22px;height:22px}
.ios-hinweis{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:1.5px solid color-mix(in srgb,var(--orange) 55%,transparent);border-radius:var(--r-md);background:color-mix(in srgb,var(--orange) 12%,var(--surface));font-size:.95rem;line-height:1.45}
.ios-hinweis > b:first-child{display:block;font-size:1.02rem;margin-bottom:4px}
.konto-link{display:block;width:100%;margin:var(--s6) 0 var(--s4);padding:var(--s3);border:0;background:none;color:var(--ink-2);font:inherit;font-size:.95rem;text-decoration:underline;cursor:pointer}