/* Gestaltung nach dem Klickdummy (Demo-Fassung) — Farben, Ampel, Karten. */
:root{
  --ink:#22313A; --muted:#68737D; --paper:#F6F6F1; --card:#FFFFFF; --line:#E2E3DB;
  --petrol:#0E6E5C; --petrol-deep:#0A4F43; --petrol-soft:#E1EFEA;
  --amber:#A8690F; --amber-soft:#F6EBD6; --red:#AC3A31; --red-soft:#F5E2E0;
  --blue:#2B5D8C; --blue-soft:#E3EDF5;
  --r:10px;
}
*{box-sizing:border-box; margin:0;}
body{font-family:'Inter',system-ui,sans-serif; background:var(--paper); color:var(--ink); font-size:14px; line-height:1.55;}
h1,h2,h3,.brand{font-family:'Bricolage Grotesque','Inter',sans-serif;}
.app{display:flex; min-height:100vh;}
.nav{width:224px; flex-shrink:0; background:var(--ink); color:#E9ECEB; padding:22px 0; display:flex; flex-direction:column;}
.brand{padding:0 22px 6px; font-size:19px; font-weight:600; letter-spacing:.2px; color:#fff;}
.brand span{color:#7FC7B4;}
.brand-sub{padding:0 22px 24px; font-size:12px; color:#9AA7A3;}
.nav a{display:flex; align-items:center; gap:10px; padding:11px 22px; color:#C6CFCC; text-decoration:none; font-size:13.5px; border-left:3px solid transparent;}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav a.active{background:rgba(127,199,180,.12); color:#fff; border-left-color:#7FC7B4; font-weight:500;}
.nav a.aus{color:#5E6B67; cursor:default;}
.nav a.aus:hover{background:none; color:#5E6B67;}
.nav .foot{margin-top:auto; padding:18px 22px 0; font-size:11.5px; color:#8B9894; border-top:1px solid rgba(255,255,255,.1);}
.navgrp{padding:16px 22px 6px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#7E8C88;}
.main{flex:1; min-width:0; padding:28px 34px 60px; display:flex; flex-direction:column;}
.inhalt{flex:1;}
.crumb{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
h1{font-size:26px; font-weight:600;}
.sub{color:var(--muted); font-size:13.5px; margin-top:3px; max-width:640px;}
.btn{font:inherit; font-size:13.5px; font-weight:500; padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block;}
.btn:hover{border-color:#C7C9BF;}
.btn.primary{background:var(--petrol); border-color:var(--petrol); color:#fff;}
.btn.primary:hover{background:var(--petrol-deep);}
.btn.ghost{background:transparent;}
.btn.klein{font-size:12px; padding:5px 10px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px;}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:4px 10px; border-radius:99px;}
.pill.g{background:var(--petrol-soft); color:var(--petrol-deep);}
.pill.a{background:var(--amber-soft); color:var(--amber);}
.pill.r{background:var(--red-soft); color:var(--red);}
.pill.b{background:var(--blue-soft); color:var(--blue);}
.pill.n{background:#EFEFE9; color:var(--muted);}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line);}
td{padding:9px 10px; border-bottom:1px solid #EDEEE7; vertical-align:top;}
tr:last-child td{border-bottom:none;}
.cell{border-radius:7px; padding:6px 8px; font-size:12.5px; line-height:1.35; margin-bottom:4px;}
.cell.g{background:var(--petrol-soft);} .cell.a{background:var(--amber-soft);} .cell.r{background:var(--red-soft);}
.cell.d{background:var(--blue-soft);} .cell.n{background:#EFEFE9;}
.cell b{font-weight:600;}
.cell small{display:block; color:var(--muted); font-size:11px;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block; margin-right:4px;}
.dot.g{background:#2F8F6E;} .dot.a{background:#D89A3D;} .dot.r{background:#C4544A;}
.legend{display:flex; gap:16px; font-size:12.5px; color:var(--muted); align-items:center; flex-wrap:wrap;}
.chatcard{background:var(--card); border:2px solid var(--petrol); border-radius:12px; padding:14px 18px; box-shadow:0 2px 10px rgba(14,110,92,.08);}
.mikro.an{background:var(--red); border-color:var(--red); color:#fff; animation:pulsieren 1.2s infinite;}
@keyframes pulsieren{0%,100%{opacity:1;}50%{opacity:.6;}}
.balken{display:inline-block; height:10px; border-radius:5px; background:var(--petrol);}
.balken.rot{background:var(--red);}
@media print{.nav,.fuss,.tabs,.head form,.head .btn,.chatbar,.meldung,details{display:none !important;} .main{padding:0;} body{background:#fff;}}
.rowlabel{font-weight:600; font-size:12.5px; white-space:nowrap;}
.rowlabel small{display:block; font-weight:400; color:var(--muted); font-size:11px;}
.mini{font-size:12px; color:var(--muted);}
textarea{width:100%; font:inherit; font-size:13.5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#FBFBF8; resize:vertical; color:var(--ink);}
.chip{display:inline-block; font-size:12px; padding:3px 10px; border-radius:99px; background:var(--petrol-soft); color:var(--petrol-deep); margin:3px 4px 0 0; text-decoration:none;}
.chip.off{background:#F0EFE9; color:var(--muted); text-decoration:line-through;}
.field-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; margin:14px 0 5px;}
.room{border-radius:8px; padding:9px 11px; font-size:12.5px; background:var(--petrol-soft); color:var(--petrol-deep);}
.room b{display:block; font-weight:600;}
.room.fn{background:var(--blue-soft); color:var(--blue);}
.roomgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px; margin:8px 0 14px;}
.note{background:var(--amber-soft); border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--amber);}
.split{display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start;}
.plist{padding:0;}
.plist a{display:block; padding:11px 16px; border-bottom:1px solid #EDEEE7; text-decoration:none; color:var(--ink); font-size:13.5px;}
.plist a small{display:block; color:var(--muted); font-size:11.5px;}
.plist a.sel{background:var(--petrol-soft);}
.plist a:last-child{border-bottom:none;}
.inp{width:100%; font:inherit; font-size:13.5px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#FBFBF8; color:var(--ink);}
.inp.sm{padding:6px 9px; font-size:12.5px;}
.meldung{border-radius:8px; padding:11px 15px; margin-bottom:16px; font-size:13.5px; background:var(--petrol-soft); color:var(--petrol-deep);}
.meldung.fehler{background:var(--red-soft); color:var(--red);}
.fuss{margin-top:40px; padding-top:14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;}
.fuss a{color:var(--muted);}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.anmeldung{max-width:400px; margin:9vh auto 0;}
.anmeldung .brand{color:var(--ink); padding:0 0 4px;}
.anmeldung .brand span{color:var(--petrol);}
@media(max-width:900px){.app{flex-direction:column;} .nav{width:100%; flex-direction:row; overflow-x:auto; padding:10px 0;} .nav .foot,.brand-sub{display:none;} .split,.grid2,.grid3{grid-template-columns:1fr;}}