/* nattkemper Termine – Verwaltung */
:root { --olive: #2D3D25; --cream: #F6F4EC; --sand: #F1EDE3; --app: #FBFAF6; --btn: #A0612F; --ochre: #955829; --on-dark: #E8B286; --ink: #1F211B; --soft: #3A3C33; --line: rgba(45,61,37,.2); --red: #A23B2A; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--app); color: var(--ink); font-family: 'Work Sans', system-ui, sans-serif; font-weight: 430; font-size: 16.5px; line-height: 1.5; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--olive); line-height: 1.2; margin: 0; }
h1 { font-size: 29px; } h2 { font-size: 20px; margin-bottom: 10px; } h3 { font-size: 17px; margin: 6px 0 8px; }
a { color: var(--olive); }
:focus-visible { outline: 3px solid var(--btn); outline-offset: 2px; }
input, select, textarea, button { font: inherit; color: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--btn); color: #fff; border: 1.5px solid var(--btn); border-radius: 99px; padding: 9px 18px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #8A5226; } .btn.sm { padding: 6px 14px; font-size: 16px; } .btn.big { padding: 12px 24px; font-size: 17.5px; } .btn.full { width: 100%; }
.btn.ghost { background: #fff; color: var(--olive); border-color: rgba(45,61,37,.3); } .btn.ghost:hover { background: var(--cream); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.lnk { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; } .lnk.red { color: var(--red); }
label { display: block; font-weight: 600; font-size: 16px; color: var(--olive); margin-bottom: 10px; }
label small, .hint { font-weight: 430; color: var(--soft); font-size: 15px; }
input:not([type=checkbox]):not([type=color]):not([type=file]), select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 11px; border: 1.5px solid rgba(45,61,37,.22); border-radius: 9px; background: #fff; font-weight: 430; color: var(--ink); }
input[type=color] { display: block; width: 60px; height: 38px; margin-top: 4px; border: 1.5px solid var(--line); border-radius: 9px; padding: 2px; background: #fff; }
input[type=file] { display: block; margin-top: 6px; font-weight: 430; font-size: 15px; }
fieldset { border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 14px 4px; margin: 0 0 12px; } legend { font-weight: 600; color: var(--olive); padding: 0 4px; font-size: 16px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-weight: 430; color: var(--ink); font-size: 16px; } .chk input { margin-top: 4px; }
.err { background: #F6DDD7; color: #6A2418; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.ok-msg { background: #DCE8D2; color: #24401B; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
/* Anmeldung / Einrichtung */
body.auth { background: var(--sand); }
.auth-box { max-width: 420px; margin: 7vh auto 40px; background: #fff; border-radius: 20px; padding: 28px 26px; box-shadow: 0 20px 60px rgba(45,61,37,.15); }
.auth-box.wide { max-width: 680px; }
.auth-logo { height: 28px; margin-bottom: 16px; }
.auth-box .sub { color: var(--soft); margin: 4px 0 16px; }
/* Rahmen */
body.app { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--olive); color: var(--cream); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid rgba(246,244,236,.15); margin-bottom: 8px; }
.brand img { max-width: 44px; max-height: 36px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.brand .dot { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: 'Fraunces', serif; font-weight: 700; flex-shrink: 0; }
.brand b { font-size: 16px; line-height: 1.25; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; gap: 10px; align-items: center; color: rgba(246,244,236,.9); text-decoration: none; padding: 9px 10px; border-radius: 9px; font-weight: 500; }
.side nav a span { width: 20px; text-align: center; opacity: .85; }
.side nav a:hover { background: rgba(246,244,236,.08); }
.side nav a.on { background: var(--cream); color: var(--olive); font-weight: 600; }
.me { margin-top: auto; padding: 12px 10px 4px; border-top: 1px solid rgba(246,244,236,.15); font-size: 16px; display: flex; flex-direction: column; gap: 4px; }
.me a, .me .lnk { color: var(--cream); }
.main { padding: 22px 26px 50px; min-width: 0; }
.tsw { margin: -8px 0 12px; text-align: right; } .tsw label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; } .tsw select { width: auto; margin: 0; }
.flash { padding: 10px 14px; border-radius: 10px; background: #DCE8D2; color: #24401B; font-weight: 600; margin-bottom: 14px; } .flash.err { background: #F6DDD7; color: #6A2418; }
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ph .sub { margin: 2px 0 0; color: var(--soft); }
.ph-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ph-act .inl input { margin: 0; width: auto; }
.note { background: #FFF5D6; color: #4A3A10; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.note.sup { background: #E3EDDC; color: #24401B; font-size: 16px; } .note.sup.lock { background: var(--sand); color: var(--soft); }
ul.check { list-style: none; padding: 0; margin: 0; } ul.check li { padding: 6px 0 6px 28px; position: relative; border-top: 1px solid var(--line); } ul.check li:first-child { border-top: 0; }
ul.check li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C9C3B3; } ul.check li.ok::before { background: #5E7F4B; border-color: #5E7F4B; }
ul.check li.ok::after { content: '✓'; position: absolute; left: 4px; top: 6px; color: #fff; font-size: 13.5px; font-weight: 700; }
.table.tenants .tr { grid-template-columns: 1.8fr .9fr .7fr .9fr .9fr 1fr; } form.inl { display: inline; }
.card.danger-zone { border-color: #E9C4BB; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .kpi b { display: block; font-family: 'Fraunces', serif; font-size: 30px; color: var(--olive); line-height: 1.1; } .kpi span { font-size: 15px; color: var(--soft); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } .cols.two { grid-template-columns: 1fr 1fr; }
.box, .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.card { margin-bottom: 16px; } .narrow { max-width: 820px; }
.alist { display: flex; flex-direction: column; gap: 6px; }
.arow { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: var(--app); border: 1px solid transparent; border-radius: 10px; padding: 7px 10px; }
.arow:hover { border-color: var(--olive); background: #fff; } .arow.canc { opacity: .6; } .arow.canc b { text-decoration: line-through; }
.ar-t { font-weight: 700; color: var(--olive); min-width: 52px; display: flex; flex-direction: column; line-height: 1.2; } .ar-t small { font-weight: 600; font-size: 13.5px; color: var(--soft); }
.ar-c { width: 4px; align-self: stretch; border-radius: 2px; } .ar-m { flex: 1; min-width: 0; } .ar-m b { display: block; } .ar-m small { color: var(--soft); font-size: 15px; }
.tag { font-size: 14px; font-weight: 600; border-radius: 6px; padding: 2px 8px; background: var(--sand); color: var(--soft); white-space: nowrap; }
.tag.on, .tag.ok { background: #DCE8D2; color: #24401B; } .tag.red { background: #F6DDD7; color: #7E2A1C; }
.feed { list-style: none; margin: 0; padding: 0; } .feed li a { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--line); text-decoration: none; } .feed li:first-child a { border-top: 0; } .feed b { font-size: 16px; font-weight: 600; color: var(--ink); } .feed small { color: var(--soft); font-size: 14px; }
.empty { color: var(--soft); font-size: 16px; }
/* Kalender */
.cal { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cal-hd, .cal-bd { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); }
.cal-hd { border-bottom: 1px solid var(--line); background: var(--app); } .cal-hd span { padding: 8px 10px; font-weight: 600; color: var(--olive); display: flex; gap: 6px; align-items: center; min-width: 0; } .cal-hd i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cal-bd { position: relative; background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 32px); }
.cal-time { position: relative; } .cal-time span { position: absolute; left: 6px; font-size: 14px; color: var(--soft); transform: translateY(2px); }
.cal-col { position: relative; border-left: 1px solid var(--line); cursor: copy; } .cal-col:hover { background: rgba(160,97,47,.04); }
.off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #f2efe6 0 6px, #faf8f3 6px 12px); pointer-events: none; }
.ev { position: absolute; left: 4px; right: 4px; border-radius: 7px; padding: 3px 7px; overflow: hidden; font-size: 14px; line-height: 1.3; text-decoration: none; z-index: 1; }
.ev b, .ev small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.on { background: var(--olive); color: #fff; } .ev.ph { background: #E4E9D9; color: #24401B; border: 1px solid #A9B59A; }
.ev.bl { background: repeating-linear-gradient(45deg, #ddd8ca 0 6px, #efebe0 6px 12px); color: var(--soft); pointer-events: none; }
.lane { position: absolute; top: 0; bottom: 0; } .lane + .lane { border-left: 1px dashed #ece8dc; }
.cal.week .ev { left: 2px; right: 2px; padding: 2px 5px; font-size: 13.5px; border-left: 4px solid var(--sc, transparent); }
.cal.week .ev.on { background: color-mix(in srgb, var(--olive) 88%, #fff); }
.cal-hd span.today { background: #fff; } .cal-hd span.today a { color: var(--btn); } .cal-hd a { color: inherit; text-decoration: none; } .cal-hd a:hover { text-decoration: underline; }
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cal.week { min-width: 720px; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; } .seg a { padding: 6px 12px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--olive); } .seg a.on { background: var(--olive); color: #fff; }
.ev.st-done { opacity: .7; } .ev.st-noshow { opacity: .5; text-decoration: line-through; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; color: var(--soft); margin-top: 10px; } .legend span { display: inline-flex; gap: 6px; align-items: center; }
.lg.off { position: static; } .lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .lg.on { background: var(--olive); } .lg.ph { background: #E4E9D9; border: 1px solid #A9B59A; } .lg.bl { background: repeating-linear-gradient(45deg, #ddd8ca 0 4px, #efebe0 4px 8px); } .lg.off { background: repeating-linear-gradient(45deg, #f2efe6 0 4px, #faf8f3 4px 8px); border: 1px solid var(--line); }
/* Tabellen & Formulare */
.search input { max-width: 360px; border-radius: 99px !important; margin-bottom: 12px !important; }
.table { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.tr { display: grid; grid-template-columns: 2fr 1.4fr .7fr .8fr; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tr.th { border-top: 0; background: var(--app); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--soft); }
a.tr:hover { background: var(--app); } .tr small { display: block; color: var(--soft); font-size: 15px; } .tr form { margin: 0; }
.table.svc .tr { grid-template-columns: 2fr .7fr .7fr .5fr .7fr; }
.table.users .tr { grid-template-columns: 1.6fr 1.4fr .4fr .9fr .9fr; } .tr.off-row { opacity: .55; }
.umenu summary { cursor: pointer; color: var(--olive); font-weight: 600; font-size: 16px; } .umenu[open] { background: var(--app); border-radius: 8px; padding: 6px 8px; } .umenu .lnk { display: block; margin: 6px 0; } .umenu label { font-size: 15px; }
.steps { padding-left: 20px; margin: 0 0 8px; } .steps li { margin: 4px 0; } code.key { display: inline-block; margin-top: 4px; font-size: 16.5px; letter-spacing: .06em; background: var(--sand); padding: 4px 8px; border-radius: 6px; user-select: all; }
.g2, .g3, .g4 { display: grid; gap: 0 12px; } .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr 1fr; } .g4 { grid-template-columns: repeat(4, 1fr); } .span2 { grid-column: span 2; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.form .btn { margin-top: 4px; }
.lbl { font-weight: 600; color: var(--olive); font-size: 16px; margin: 8px 0 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .chip { display: inline-flex; gap: 6px; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; padding: 5px 12px; font-weight: 500; margin: 0; }
.hours { display: grid; gap: 6px; margin-bottom: 8px; } .hr { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 10px; align-items: center; } .hr .chk { margin: 0; } .hr span { display: flex; gap: 6px; align-items: center; } .hr select { margin: 0; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tcard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; } .tcard:hover { border-color: var(--olive); }
.tcard b { display: flex; gap: 8px; align-items: center; color: var(--olive); } .tcard b i { width: 12px; height: 12px; border-radius: 50%; } .tcard small { color: var(--soft); } .tcard span { font-size: 15px; color: var(--soft); margin-top: 4px; }
.dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0 0 12px; } .dl dt { color: var(--soft); font-size: 16px; } .dl dd { margin: 0; }
.danger-zone { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 14px; } .danger-row { text-align: right; margin: 6px 0 20px; }
.log { list-style: none; margin: 0; padding: 0; } .log li { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 16px; } .log li:first-child { border-top: 0; } .log time { color: var(--soft); font-size: 15px; }
.unit { display: flex; align-items: center; gap: 8px; font-weight: 430; color: var(--soft); } .unit input { width: 90px !important; }
.savebar { position: sticky; bottom: 0; background: rgba(251,250,246,.95); padding: 12px 0; border-top: 1px solid var(--line); text-align: right; }
.copy { display: flex; gap: 8px; } .copy input { margin: 0 !important; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: #23301D !important; color: #E6EFD9 !important; border: 0 !important; }
.prev { background: var(--app); border: 1px dashed rgba(45,61,37,.3); border-radius: 10px; padding: 18px; text-align: center; margin-bottom: 8px; }
#qr { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; } #qr canvas { display: block; }
.logo-prev { display: flex; gap: 10px; align-items: center; margin-top: 6px; } .logo-prev img { max-height: 40px; max-width: 140px; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: #fff; }
.mt { margin-top: 18px; }

/* ---- Demo-Look: Schalter, Einstellungszeilen, Kacheln ---- */
.sw { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px; flex-shrink: 0; cursor: pointer; margin: 0; font-weight: 430; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw i { width: 44px; height: 24px; border-radius: 12px; background: #A8A291; position: relative; transition: background .2s; flex-shrink: 0; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sw input:checked + i, .sw.is-on i { background: var(--olive); } .sw input:checked + i::after, .sw.is-on i::after { transform: translateX(20px); }
.sw input:focus-visible + i { outline: 3px solid var(--btn); outline-offset: 2px; }
.sw span { font-size: 15px; color: var(--soft); }
.srow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; font-weight: 430; color: var(--ink); }
.box > h2 + .srow, .srow.first { border-top: 0; }
.srow > span:first-child { min-width: 0; } .srow b { display: block; font-weight: 600; font-size: 16.5px; color: var(--ink); } .srow small { color: var(--soft); font-size: 15px; }
.srow select, .srow input:not([type=checkbox]) { width: auto !important; margin: 0 !important; min-width: 120px; }
.box > h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .box > h2 small { font-family: 'Work Sans', sans-serif; font-weight: 430; font-size: 15px; color: var(--soft); }
.fitem { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; background: var(--app); border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; color: var(--ink); }
.fitem:hover { border-color: var(--olive); background: #fff; } .fitem b { display: block; font-size: 16px; font-weight: 600; } .fitem small { color: var(--soft); font-size: 15px; }
.fi { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #DCE8D2; color: #24401B; font-weight: 700; flex-shrink: 0; font-size: 16px; }
.fitem.cancel .fi { background: #F6DDD7; color: #7E2A1C; } .fitem.move .fi { background: #F3E3CF; color: #6E4219; } .fitem.mail .fi { background: var(--sand); color: var(--soft); }
.flist { display: flex; flex-direction: column; gap: 6px; }
.wl-r { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); } .wl-r:first-of-type { border-top: 0; } .wl-r b { display: block; font-size: 16.5px; } .wl-r small { font-size: 15px; color: var(--soft); }
.fine { color: var(--soft); font-size: 15px; margin: 10px 0 0; }
.cal-days { display: flex; gap: 8px; margin-bottom: 10px; overflow-x: auto; }
.cday { flex: 1 0 92px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.cday small { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--soft); } .cday b { font-family: 'Fraunces', serif; font-size: 21px; color: var(--olive); line-height: 1.1; } .cday em { font-style: normal; font-size: 14px; color: var(--soft); }
.cday.is-on { background: var(--olive); border-color: var(--olive); } .cday.is-on * { color: var(--cream); } .cday:hover { border-color: var(--olive); }
.buf { position: absolute; left: 4px; right: 4px; background: rgba(181,113,61,.18); border-radius: 0 0 6px 6px; pointer-events: none; }
.cal.week .buf { left: 2px; right: 2px; }
.lg.buf { position: static; background: rgba(181,113,61,.25); }
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mo { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.mo b { color: var(--olive); font-size: 16.5px; } .mo > span.d { font-size: 16px; color: var(--soft); }
.mo .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--sand); display: grid; place-items: center; font-size: 16.5px; font-weight: 700; margin-bottom: 4px; color: var(--olive); }
.mo .st { position: absolute; top: 12px; right: 12px; } .mo.dim { background: var(--app); } .mo.dim .ic { opacity: .6; }
.mo form { margin-top: 8px; }
.br-r { display: grid; grid-template-columns: 1fr 1.2fr 56px; gap: 10px; align-items: center; padding: 6px 0; font-size: 16px; }
.br { height: 10px; background: var(--sand); border-radius: 5px; overflow: hidden; } .br i { display: block; height: 100%; background: var(--olive); } .br-r b { text-align: right; color: var(--olive); }
.lrow { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 16px; text-decoration: none; color: var(--ink); }
.lrow:first-child { border-top: 0; } .lrow b { display: block; } .lrow small { color: var(--soft); } .lrow em { font-style: normal; font-size: 15px; color: var(--soft); white-space: nowrap; } .lrow .tag { text-align: center; }
.mprev { background: var(--app); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; }
.mprev .mb { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .mprev .mb span { border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: 15px; background: var(--olive); color: #fff; } .mprev .mb span.g { background: #fff; color: var(--olive); border: 1.5px solid var(--olive); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tl li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; position: relative; } .tl li b { display: block; color: var(--olive); } .tl li small { color: var(--soft); font-size: 15px; } .tl li .tag { margin-bottom: 6px; display: inline-block; }
.table.gs .tr { grid-template-columns: 1fr .8fr .8fr 1.4fr .8fr; } .table.wl .tr { grid-template-columns: 1.4fr 1.6fr 1fr .9fr; } .table.mail .tr { grid-template-columns: 1fr .8fr 2fr 1fr; }
.inline-sw { display: inline-flex; }
@media (max-width: 1100px) { .more { grid-template-columns: repeat(2, 1fr); } .tl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .more, .tl { grid-template-columns: 1fr; } .srow { flex-wrap: wrap; } .lrow { grid-template-columns: 62px 1fr; } .lrow em { display: none; } .br-r { grid-template-columns: 1fr 1fr 44px; } }
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr 1fr; } .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  body.app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; }
  .brand { border: 0; margin: 0; padding: 4px 8px; } .side nav { flex-direction: row; overflow-x: auto; width: 100%; } .side nav a { white-space: nowrap; padding: 7px 10px; } .side nav a span { display: none; }
  .me { flex-direction: row; gap: 12px; border: 0; padding: 4px 8px; margin: 0 0 0 auto; }
  .main { padding: 16px 12px 40px; } .cols, .cols.two, .g2, .g3, .g4 { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .tr, .table.svc .tr, .table.users .tr { grid-template-columns: 1.5fr 1fr; } .tr > span:nth-child(n+3) { display: none; }
  .table.users .tr > span:nth-child(5), .table.tenants .tr > span:nth-child(6) { display: block; grid-column: 1 / -1; }
  .table.tenants .tr { grid-template-columns: 1.5fr 1fr; }
  .hr { grid-template-columns: 1fr 1fr; } .hr .chk { grid-column: 1 / -1; }
  .cal-hd, .cal-bd { grid-template-columns: 40px repeat(var(--cols), minmax(0, 1fr)); } .ev { left: 2px; right: 2px; padding: 2px 4px; font-size: 13.5px; } .ev small { display: none; }
  .log li { grid-template-columns: 1fr; gap: 0; }
}

/* ---- Startseite mit Kacheln (wie Demo) ---- */
.hm-head { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--line); border-left: 6px solid var(--hc); flex-wrap: wrap; }
.hm-logo { max-height: 56px; max-width: 150px; object-fit: contain; } .hm-logo.hm-ph { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-family: 'Fraunces', serif; font-size: 27px; font-weight: 600; }
.hm-head > div { flex: 1; min-width: 200px; } .hm-head h1 { font-size: clamp(24px, 3vw, 30px); margin: 2px 0; } .hm-head p { margin: 0; color: var(--soft); } .hm-head p a { color: var(--soft); }
.hm-k { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }
.hm-act { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hm-card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); transition: transform .15s, border-color .15s; }
.hm-card:hover { transform: translateY(-2px); border-color: var(--olive); }
.hm-ic { width: 36px; height: 36px; border-radius: 10px; background: #E4E9D9; display: grid; place-items: center; font-size: 18px; color: var(--olive); margin-bottom: 4px; font-weight: 700; }
.hm-card b { color: var(--olive); font-size: 17px; } .hm-card > span:not(.hm-ic):not(.hm-shot) { font-size: 16px; color: var(--soft); }
.hm-new { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 13.5px; font-weight: 700; background: var(--on-dark); color: #2a1a0c; border-radius: 6px; padding: 2px 8px; }
.hm-card.wide { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
.hm-shot { position: relative; display: block; flex: 1; min-height: 190px; background: linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 60%, #000)); border-bottom: 1px solid var(--line); padding: 18px; }
.hm-mock { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 12px; padding: 12px 14px; max-width: 300px; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.hm-mock b { font-family: 'Fraunces', serif; color: var(--ink); font-size: 17px; } .hm-mock small { color: var(--soft); font-size: 14px; margin-top: -4px; }
.hm-mock i { font-style: normal; display: flex; justify-content: space-between; gap: 8px; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--ink); } .hm-mock i em { font-style: normal; color: var(--soft); white-space: nowrap; }
.hm-btn { position: absolute; right: 14px; bottom: 14px; border-radius: 99px; padding: 9px 16px; font-weight: 700; font-size: 16px; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); border: 2px solid #fff; }
.hm-tx { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 14px; } .hm-tx span { font-size: 16px; color: var(--soft); }
@media (max-width: 1100px) { .hm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .hm-grid { grid-template-columns: 1fr; } .hm-card.wide { grid-column: auto; grid-row: auto; } .hm-act { width: 100%; } }
/* Kalender-Ergänzungen */
.cal-off { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 15px; color: var(--soft); font-weight: 600; pointer-events: none; z-index: 1; }
.cday.today:not(.is-on) { border-color: var(--btn); } .cday em { font-style: normal; font-size: 14px; color: var(--soft); }
/* Nachrichten */
.tl li .tag { position: absolute; top: 12px; right: 12px; } .tl li b { padding-right: 52px; }
.mprev .ms { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 0 0 10px; } .mprev .ms small { color: var(--soft); }
.mprev .mtext { white-space: pre-line; } .mprev .mbox { background: #fff; border-radius: 8px; padding: 10px 12px; border: 1px solid var(--line); }
.mprev .mb span.ghost { background: transparent; color: var(--olive); border: 1.5px solid var(--olive); }
.log2 { display: flex; flex-direction: column; } .log2 .lrow { grid-template-columns: 110px 1fr auto; } .log2 .lrow .tag { justify-self: start; } a.lrow:hover { background: var(--app); }
/* Team-Karten mit Schalter */
.tcard b .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; } .tcard form.inl { margin: 4px 0; } .tcard .lnk { margin-top: 6px; align-self: flex-start; font-size: 16px; }
/* Gutscheine */
.gs-d h2 { display: flex; gap: 10px; align-items: center; } .row-f { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .row-f label { flex: 1; min-width: 180px; margin: 0; }
.kpi small { display: block; font-size: 14px; color: var(--soft); }

/* Buchungsseite gestalten */
.dz { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 16px; align-items: start; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; } .pre { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.pre:hover { box-shadow: 0 0 0 2px var(--olive); }
.seg2 { display: flex; gap: 18px; margin-bottom: 10px; } .form .seg2 label, .seg2 label { display: inline-flex; width: auto; white-space: nowrap; gap: 6px; align-items: center; font-weight: 500; margin: 0; }
.pv-wrap { position: sticky; top: 12px; } .pv-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .pv-bar small { color: var(--soft); }
.pv-frame { background: #e9e6dd; border-radius: 14px; padding: 10px; } .pv-frame iframe { width: 100%; height: 760px; border: 0; border-radius: 10px; background: #fff; display: block; margin: 0 auto; transition: width .2s; }
.pv-frame.m iframe { width: 390px; max-width: 100%; height: 760px; }
@media (max-width: 1100px) { .dz { grid-template-columns: 1fr; } .pv-wrap { position: static; } .pv-frame iframe { height: 620px; } }

.faq-ed .g2 { margin-bottom: 8px; align-items: start; } .faq-ed input, .faq-ed textarea { margin: 0 !important; }
.gal-ed { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .gal-ed label { width: 120px; margin: 0; } .gal-ed img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; } .gal-ed .chk { font-size: 15px; }
.tcard img.av { object-fit: cover; }

.bx-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .bx-h h2 { margin: 0; }
.phone { background: var(--sand); border-radius: 14px; padding: 14px; } .bubble { background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 16px; max-width: 420px; }
.row-l { margin-top: 10px; }

/* Ansicht-Umschalter, Legende oben, Ansprechpartnerin-Kachel, Nutzen-Rechner */
.ansicht { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; } .ansicht > span:first-child { font-weight: 600; color: var(--soft); font-size: 16px; }
.seg.big { background: var(--sand); border: 0; padding: 4px; border-radius: 12px; gap: 2px; flex-wrap: wrap; } .seg.big a { border-radius: 9px; padding: 7px 14px; font-size: 16px; display: inline-flex; gap: 6px; align-items: center; } .seg.big a.on { background: #fff; color: var(--olive); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.seg.big a i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend.top { margin: 0 0 10px; }
.hm-card.contact { background: var(--olive); border-color: var(--olive); color: var(--cream); align-items: flex-start; } .hm-card.contact:hover { transform: none; }
.hm-card.contact img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; border: 2px solid rgba(255,255,255,.6); }
.hm-card.contact b { color: #fff; } .hm-card.contact > span { color: rgba(246,244,236,.85) !important; }
.hm-card.contact .row-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .hm-card.contact .btn.ghost { background: transparent; color: var(--cream); border-color: rgba(246,244,236,.7); }
.calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.ci { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 16.5px; margin: 0; font-weight: 430; } .ci:first-of-type { border-top: 0; }
.ci small { display: block; color: var(--soft); font-size: 14px; } .ci-in { display: flex; align-items: center; gap: 6px; color: var(--soft); white-space: nowrap; }
.ci input { width: 84px !important; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; text-align: right; background: #fff; margin: 0 !important; }
.calc .res { background: var(--olive); color: var(--cream); border: 0; } .calc .res h2 { color: var(--cream); }
.cr { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(246,244,236,.15); } .cr:first-of-type { border-top: 0; }
.cr b { font-family: 'Fraunces', serif; font-size: 22px; } .cr.hi b, .cr.tot b { color: var(--on-dark); } .cr.tot { border-top: 2px solid rgba(246,244,236,.4); margin-top: 4px; }
.calc .res .fine { color: rgba(246,244,236,.85); }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } }

.dd { position: relative; display: inline-block; margin: 0 0 12px; }
.dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 16px; }
.dd summary::-webkit-details-marker { display: none; } .dd summary:hover, .dd[open] summary { border-color: var(--olive); }
.dd-l { color: var(--soft); font-weight: 600; } .dd summary b { color: var(--olive); } .dd-c { color: var(--soft); font-size: 14px; }
.dd i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dd-m { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; display: flex; flex-direction: column; }
.dd-m a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 16px; } .dd-m a:hover { background: var(--app); } .dd-m a.on { background: #E4E9D9; font-weight: 600; color: var(--olive); }

/* Kalender: Team-Ansicht */
.cal-tools { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .cal-tools .dd { margin: 0 0 12px; } .cal-tools .seg.big { margin-bottom: 12px; }
.cal .ev.tmv { background: color-mix(in srgb, var(--sc) 16%, #fff); border: 1px solid color-mix(in srgb, var(--sc) 45%, #fff); border-left: 5px solid var(--sc); color: var(--ink); z-index: 2; }
.cal .ev.tmv small { color: var(--soft); } .cal .ev.tmv:hover { background: color-mix(in srgb, var(--sc) 26%, #fff); }
.legend.tmleg { margin: -4px 0 10px; } .legend.tmleg .lg { border-radius: 50%; }

.back-l { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 16px; color: var(--olive); text-decoration: none; margin: 0 0 6px; padding: 4px 10px 4px 6px; border-radius: 8px; } .back-l:hover { background: var(--sand); }

/* Gemeinsamer Team-Zugang */
.me.shared label { color: var(--cream); font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.me.shared select, .me.shared input { width: 100%; font-size: 16px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(246,244,236,.3); background: #fff; color: var(--ink); }
.me.shared details.elev summary { cursor: pointer; color: var(--cream); padding: 4px 0; }
.me.shared details.elev .form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#lockov { position: fixed; inset: 0; z-index: 9999; background: var(--olive); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#lockov div { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #f6f4ec; text-align: center; }
#lockov img { width: 160px; filter: brightness(0) invert(1); opacity: .9; }
#lockov b { font-size: 24px; } #lockov span { opacity: .8; }
@media (max-width: 860px) { .me.shared { flex-wrap: wrap; } .me.shared details.elev .form { position: absolute; right: 8px; background: var(--olive); padding: 10px; border-radius: 10px; z-index: 50; width: 240px; } }
/* Monatsansicht */
form.mpick { display: inline-flex; gap: 6px; } .mpick select { width: auto; padding: 6px 8px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; }
.mcal { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.mhead, .mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mhead span { padding: 8px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--soft); background: var(--sand); text-align: center; }
.mday { min-height: 104px; padding: 6px 7px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.mday:nth-child(7n+1) { border-left: 0; } .mday:hover { background: var(--app); }
.mday.out { background: #faf9f5; } .mday.out .mtop b { color: #b5b2a6; } .mday.past { opacity: .55; }
.mday.today { box-shadow: inset 0 0 0 2px var(--btn); }
.mtop { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.mtop b { font-family: 'Fraunces', serif; font-size: 20px; color: var(--olive); }
.mn { font-style: normal; font-size: 13.5px; font-weight: 600; background: var(--olive); color: #fff; border-radius: 99px; padding: 1px 7px; white-space: nowrap; } .mn.none { background: transparent; color: var(--soft); font-weight: 500; }
.mday .ms { display: flex; align-items: center; gap: 5px; font-size: 13.5px; line-height: 1.25; border-radius: 6px; padding: 2px 5px; }
.mday .ms i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .mday .ms em { font-style: normal; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mday .ms b { font-weight: 600; white-space: nowrap; }
.mday .ms.fr-g { background: #e3eedc; } .mday .ms.fr-m { background: #f6e6cf; } .mday .ms.fr-n { background: #f3dcdc; color: #8a3a3a; } .mday .ms.ms-no { color: #a3a091; } .lg.ms-no { background: #fff; border: 1px solid var(--line); }
.lg.fr-g { background: #cfe2c3; } .lg.fr-m { background: #efd2aa; } .lg.fr-n { background: #e9c0c0; }
@media (max-width: 760px) { .mday { min-height: 66px; padding: 4px; gap: 2px; } .mtop { flex-direction: column; align-items: flex-start; } .mtop b { font-size: 17px; } .mn { font-size: 13.5px; padding: 0 6px; } .mn.none, .mnl { display: none; } .mday .ms { padding: 0; height: 5px; border-radius: 3px; } .mday .ms i, .mday .ms em, .mday .ms b { display: none; } .mday .ms.fr-g { background: #9cc58a; } .mday .ms.fr-m { background: #e3b26d; } .mday .ms.fr-n { background: #d48a8a; } .mday .ms.ms-no { background: #eceae2; } .mday .ms.ms-bl { background: repeating-linear-gradient(135deg, #e2dfd4 0 3px, #c9c5b6 3px 6px); } }
.mday .ms.ms-bl { background: repeating-linear-gradient(135deg, #eeece4 0 5px, #e2dfd4 5px 10px); color: var(--soft); } .lg.ms-bl { background: repeating-linear-gradient(135deg, #eeece4 0 3px, #d8d4c6 3px 6px); }
/* Fenster „Neuer Termin“ */
#ntmodal { position: fixed; inset: 0; z-index: 900; background: rgba(33,40,28,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
#ntmodal .mbox { background: var(--app); border-radius: 16px; width: min(760px, 100%); height: min(780px, 92vh); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
#ntmodal .mbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 20px; background: var(--olive); color: var(--cream); }
#ntmodal .mbar b { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; }
#ntmodal .mx { background: none; border: 0; color: var(--cream); font-size: 32px; line-height: 1; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; } #ntmodal .mx:hover { background: rgba(255,255,255,.12); }
#ntmodal iframe { border: 0; flex: 1; width: 100%; background: var(--app); }
body.modal-open { overflow: hidden; }
.modal-page { padding: 16px; } .modal-page .card.narrow { max-width: none; margin: 0; } body.auth:has(.modal-page) { display: block; min-height: 0; background: var(--app); }
@media (max-width: 640px) { #ntmodal { padding: 0; } #ntmodal .mbox { border-radius: 0; height: 100%; } }
@media (min-width: 560px) { .modal-page .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

/* ===== Vorschlag: klarer & besser lesbar ===== */
body { font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
b, strong, label, .btn, th, .tr.th span { font-weight: 600; }
h1 { font-size: 32px; letter-spacing: -.01em; } h2 { font-size: 21px; } h3 { font-size: 18px; }
.side nav a { font-size: 16.5px; padding: 11px 12px; font-weight: 500; color: #fff; }
.box, .card { border-color: rgba(45,61,37,.16); box-shadow: 0 1px 2px rgba(31,33,27,.05); }
small, .fine, .sub { color: var(--soft); }
input, select, textarea { font-size: 16.5px; }
/* Übersicht: Terminzeilen klarer */
@media (min-width: 1101px) { .cols:not(.two) { grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; } }
.arow { display: grid; grid-template-columns: 64px 4px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; padding: 10px 12px; }
.ar-t { font-size: 18px; font-weight: 700; color: var(--olive); line-height: 1.2; } .ar-t small { display: block; font-size: 13.5px; font-weight: 500; color: var(--soft); }
.ar-c { grid-row: 1 / span 2; align-self: stretch; width: 4px; border-radius: 2px; }
.ar-m b { display: block; font-size: 17px; line-height: 1.3; } .ar-m small { display: block; font-size: 14.5px; line-height: 1.4; color: var(--soft); }
.arow .tag { grid-column: 3; justify-self: start; margin-right: 6px; }
/* Kalender: Termine lesbar */
.ev { padding: 4px 8px; font-size: 14.5px; line-height: 1.3; }
.ev .et { font-size: 13px; font-weight: 600; opacity: .85; margin-right: 2px; }
.ev b { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev small { font-size: 13px; }
.arow .ar-t { grid-column: 1; grid-row: 1 / span 2; } .arow .ar-c { grid-column: 2; } .arow .ar-m { grid-column: 3; grid-row: 1; }
.ev.on small, .ev.on .et { color: rgba(255,255,255,.88); } .ev.ph small, .ev.ph .et { color: #2f4a26; }
/* E-Mail-Versand */
.note.err { background: #F6E1DC; color: #7A2A1C; border-color: #E2B5AA; }
#versand .chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 6px 0; } #versand .chk input { margin-top: 5px; width: 18px !important; height: 18px; flex: none; padding: 0; }
#versand fieldset[hidden] { display: none; }
#versand fieldset { margin-top: 12px; }