/* Heimat - warmes, architektonisches Design-System.
   Kalkputz/Architektenpapier, Ziegelrot als Aktionsfarbe, Messing als
   Zweitakzent. Hell/Dunkel ueber prefers-color-scheme + [data-theme].
   Siehe docs/Designentwurf.md fuer die Herleitung der Entscheidungen. */

@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
  --ground:#F3ECDC; --surface:#FFFDF7; --surface-2:#EADFC5; --sunken:#F7F1E3;
  --ink:#332616; --ink-soft:#6E5D42; --ink-faint:#9C8C6C;
  --line:#E9DEC2; --line-soft:#F0E8D4;
  --accent:#C1552B; --accent-ink:#A2451F; --accent-wash:#F3DFD2; --accent-on:#FFFDF7;
  --messing:#A67E2D; --messing-wash:#F1E7CD;
  --ok:#5A7C48; --ok-wash:#E7EEDD;
  --warn:#B4790E; --warn-wash:#F3E6C9;
  --crit:#A33B2E; --crit-wash:#F3DED7;
  --shadow:0 1px 2px rgba(44,32,20,.05), 0 10px 24px -16px rgba(44,32,20,.22);
  --shadow-hoch:0 18px 40px -20px rgba(44,32,20,.28);
  --radius:4px;
  --font:"Karla","Segoe UI",system-ui,sans-serif;
  --font-display:"Zilla Slab",Georgia,"Iowan Old Style",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#201709; --surface:#2A2011; --surface-2:#170F05; --sunken:#241B0D;
    --ink:#F1E6CE; --ink-soft:#CBB98F; --ink-faint:#93825E;
    --line:#4A3A1F; --line-soft:#3A2E18;
    --accent:#D96A3C; --accent-ink:#EE8A5C; --accent-wash:#3A2416; --accent-on:#241505;
    --messing:#D9AD5C; --messing-wash:#33280F;
    --ok:#7FA968; --ok-wash:#243019;
    --warn:#D9AD5C; --warn-wash:#332711;
    --crit:#D9776A; --crit-wash:#38201A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.55);
    --shadow-hoch:0 18px 40px -20px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ground:#201709; --surface:#2A2011; --surface-2:#170F05; --sunken:#241B0D;
  --ink:#F1E6CE; --ink-soft:#CBB98F; --ink-faint:#93825E;
  --line:#4A3A1F; --line-soft:#3A2E18;
  --accent:#D96A3C; --accent-ink:#EE8A5C; --accent-wash:#3A2416; --accent-on:#241505;
  --messing:#D9AD5C; --messing-wash:#33280F;
  --ok:#7FA968; --ok-wash:#243019;
  --warn:#D9AD5C; --warn-wash:#332711;
  --crit:#D9776A; --crit-wash:#38201A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -16px rgba(0,0,0,.55);
  --shadow-hoch:0 18px 40px -20px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
a{color:var(--accent-ink);text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--accent);color:var(--accent-on)}
:focus-visible{outline:2px solid var(--messing);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
@media (max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto}}

.sidebar{background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:19px 18px 15px;border-bottom:1px solid var(--line-soft)}
.brand b{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;display:block;color:var(--ink)}
.brand span{font-size:10.5px;color:var(--messing);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.nav{padding:10px 10px 24px;flex:1}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:4px}
.nav-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:7px 10px;border:0;background:none;color:var(--ink-soft);border-radius:3px;
  font-size:13px;line-height:1.3;border-left:2px solid transparent;text-decoration:none}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--accent-wash);color:var(--accent-ink);
  border-left-color:var(--accent);font-weight:600}
.nav-item .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:none}

/* ---------- topbar ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:5;background:var(--surface);
  border-bottom:1px solid var(--line);padding:10px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);min-width:0;flex-wrap:wrap}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{color:var(--ink-faint)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.who{font-size:12px;color:var(--ink-soft);text-align:right;line-height:1.25}
.who b{display:block;color:var(--ink);font-weight:600}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius);color:var(--ink-soft);text-decoration:none}
.iconbtn:hover{color:var(--ink);border-color:var(--ink-faint)}

/* ---------- content ---------- */
.view{padding:24px}
.vhead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.vhead h1{font-size:22px}
.vhead p{margin:4px 0 0;color:var(--ink-soft);font-size:13.5px;max-width:64ch}
.vhead .spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--radius);
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:13px;font-weight:600;
  text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

.grid{display:grid;gap:14px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.cols-3,.cols-2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cols-3,.cols-2{grid-template-columns:1fr}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.panel-h{padding:11px 14px;border-bottom:1px solid var(--line-soft);display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.panel-h h3{font-size:14px}
.panel-h .hint{font-size:11px;color:var(--ink-faint)}
.panel-b{padding:14px}

.tblwrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-faint);padding:9px 12px;background:var(--sunken);
  border-bottom:1px solid var(--line);position:sticky;top:0}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tr:hover td{background:var(--sunken)}

/* feste Spaltenbreiten: Datum/Status/Aktion stehen bei jeder Zeile an
   derselben Stelle, unabhaengig von der Laenge des Dateinamens */
table.doclist{table-layout:fixed;min-width:480px}
table.doclist td,table.doclist th{vertical-align:middle}
.doclist-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12.5px;padding:14px}
.kv dt{color:var(--ink-faint)}
.kv dd{margin:0;font-family:var(--mono);font-size:12px}

.field{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);margin-bottom:10px}
textarea.field{resize:vertical;font-family:inherit}

.view label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint);margin:10px 0 4px}
.view label:first-of-type{margin-top:0}

/* ---------- oeffentliche Startseite: Hero ---------- */
.hero-intro{position:relative;padding:8px 0 30px;overflow:hidden}
.hero-intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:end}
.hero-intro h1{font-size:clamp(28px,4.4vw,42px);line-height:1.06}
.hero-intro h1 em{font-style:normal;color:var(--accent)}
.hero-intro .sub{max-width:50ch;margin-top:13px;font-size:15px;color:var(--ink-soft)}
.hero-intro .stat{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:16px}
.hero-intro .stat b{color:var(--ink);font-size:13.5px}
.grundriss{width:100%;max-width:300px;height:auto;overflow:visible;justify-self:end}
.grundriss path,.grundriss line{fill:none;stroke:var(--messing);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.grundriss .mass{stroke-width:1;opacity:.75}
.grundriss text{font-family:var(--mono);font-size:7.5px;fill:var(--ink-faint)}
.grundriss .zeichnen{stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen 1.4s ease forwards}
.grundriss .zeichnen.v2{animation-delay:.2s} .grundriss .zeichnen.v3{animation-delay:.4s}
.grundriss .zeichnen.v4{animation-delay:.6s}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@media (max-width:860px){.hero-intro-grid{grid-template-columns:1fr}.grundriss{max-width:220px;justify-self:start}}

.filter{display:flex;gap:10px;flex-wrap:wrap;padding-block:6px 26px;border-bottom:1px solid var(--line-soft);margin-bottom:22px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:6px 12px;border-radius:20px;
  border:1px solid var(--line);color:var(--ink-soft);background:var(--surface)}
.chip.aktiv{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
.chip.bald{opacity:.65}
.chip.bald::after{content:" · bald";color:var(--ink-faint)}

/* ---------- Exposee-Vitrine ---------- */
.expcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;color:inherit}
.expcard-foto{position:relative;aspect-ratio:16/10}
.expcard-foto img{display:block;width:100%;height:100%;object-fit:cover}
.expcard-noimg{height:100%;display:grid;place-items:center;background:var(--surface-2);
  color:var(--ink-faint);font-size:12px}
.preis-tag{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:2px;
  background:var(--accent);color:var(--accent-on);font-family:var(--mono);font-weight:600;font-size:13.5px}
.expcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.expcard-body h3{font-size:15.5px}
.expcard-body p{margin:0;font-size:12.5px;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.expcard-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.eek{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:2px;
  background:var(--ok);color:var(--accent-on);font-size:9.5px;font-weight:700;font-family:var(--font)}
.expcard-fuss{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:9px;border-top:1px solid var(--line-soft)}
.lock{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-faint)}
.lock svg{flex:none}
.favchip{font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent-wash);
  padding:2px 8px;border-radius:20px}

.expdetail-master{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);
  margin-bottom:14px;box-shadow:var(--shadow)}
.expdetail-preis{font-family:var(--mono);font-weight:600;font-size:22px;margin-bottom:8px;color:var(--accent-ink)}
.expdetail-gallery-img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}

.note{font-size:12.5px;color:var(--ink-soft);padding:11px 14px;background:var(--sunken);
  border:1px solid var(--line-soft);border-left:3px solid var(--messing);border-radius:var(--radius)}
.note a{color:var(--accent-ink);font-weight:600}

/* ---------- login / bare ---------- */
.bare{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--ground)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-hoch);padding:30px;width:100%;max-width:380px}
.card h1{font-size:20px;margin-bottom:4px}
.card p{color:var(--ink-soft);font-size:12.5px;margin:0 0 18px}
.card label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint);margin-bottom:4px}
.flash{padding:9px 12px;border-radius:var(--radius);margin-bottom:14px;font-size:12.5px;border:1px solid var(--line)}
.flash-error{background:var(--crit-wash);border-color:transparent;color:var(--crit)}
.flash-info{background:var(--accent-wash);border-color:transparent;color:var(--accent-ink)}
.flash-success{background:var(--ok-wash);border-color:transparent;color:var(--ok)}
.forbidden{max-width:520px;margin:80px auto;text-align:center;color:var(--ink-soft)}

/* ---------- oeffentliche Kopfzeile (ohne Sidebar) ---------- */
.wrap-public{max-width:1180px;margin:0 auto;padding:0 22px}
@media (max-width:620px){.wrap-public{padding:0 16px}}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:22px 8px;flex-wrap:wrap}
.site-header .marke{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.site-header .marke b{font-family:var(--font-display);font-weight:700;font-size:21px;
  letter-spacing:-.01em;color:var(--ink)}
.site-header .marke span{font-size:10.5px;color:var(--messing);font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase}
.site-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.view-public{padding-block:8px 40px}

/* ---------- Admin-Dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px}
.kpi .kpi-lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint)}
.kpi .kpi-val{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--ink);
  margin-top:4px;line-height:1.1}
.kpi .kpi-foot{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.kpi.kpi-warn .kpi-val{color:var(--warn)}
.kpi.kpi-crit .kpi-val{color:var(--crit)}
.kpi a{color:inherit;text-decoration:none;display:block}

/* ---------- Dokument-Status ---------- */
.docstatus{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
  font-size:10.5px;font-weight:600;white-space:nowrap}
.docstatus.eingereicht{background:var(--warn-wash);color:var(--warn)}
.docstatus.freigegeben{background:var(--ok-wash);color:var(--ok)}
.docstatus.abgelehnt{background:var(--crit-wash);color:var(--crit)}

/* ---------- Dokument-Miniaturansicht + Lightbox (reines CSS, :target) ---------- */
.doc-review{display:flex;gap:16px;align-items:flex-start}
.doc-review-main{flex:1;min-width:0}
.doc-thumb{flex:none;display:block;width:96px;height:128px;border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);background:var(--sunken)}
.doc-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.doc-thumb-pdf{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--ink-faint)}
.doc-thumb-pdf span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-soft)}
@media (max-width:620px){.doc-review{flex-direction:column-reverse}.doc-thumb{width:100%;height:150px}}

.lightbox{display:none;position:fixed;inset:0;z-index:50;background:rgba(20,14,4,.82);
  padding:28px;align-items:center;justify-content:center}
.lightbox:target{display:flex}
.lightbox-inner{position:relative;width:calc(100vw - 56px);height:calc(100vh - 56px);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lightbox-inner img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius);
  box-shadow:var(--shadow-hoch);background:var(--surface);touch-action:none;
  transform-origin:center center;cursor:zoom-in;user-select:none}
.lightbox-inner iframe{width:100%;height:100%;border:0;border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-hoch)}
.lightbox-close{position:absolute;top:-18px;right:-18px;width:36px;height:36px;border-radius:50%;
  background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;box-shadow:var(--shadow-hoch);text-decoration:none;z-index:2}
.lightbox-close:hover{background:var(--surface-2)}
.lightbox-hint{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap}