/* ===== TO Vermietung – Design ===== */
:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --ink: #1c1c1e;
  --ink-soft: #55554f;
  --line: #e6e3dc;
  --accent: #1a6cf5;
  --accent-dark: #0e4fc7;
  --accent-soft: #e7f0fe;
  --dark: #0a0e14;
  --dark-2: #131a24;
  --ok: #2e8b57;
  --warn: #b7791f;
  --err: #c0392b;
  --radius: 14px;
  --shadow: 0 4px 24px rgba(20, 24, 29, .08);
  font-size: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
header.site {
  background: var(--dark);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
header.site .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: .3px;
  display: flex; align-items: center; gap: 10px; }
.logo span { color: var(--accent); }
.logo-img { height: 42px; width: auto; display: block; }
nav.main a {
  color: #d7dbe0; margin-left: 22px; font-weight: 600; font-size: .95rem;
}
nav.main a:hover { color: #fff; text-decoration: none; }
nav.main a.cta {
  background: var(--accent); color: #fff; padding: 9px 18px; border-radius: 999px;
}
nav.main a.cta:hover { background: var(--accent-dark); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(145deg, var(--dark) 0%, var(--dark-2) 60%, #2a333d 100%);
  color: #fff;
  padding: 72px 0 84px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26,108,245,.45), transparent 70%);
}
.hero-flex { display: flex; align-items: center; gap: 40px; position: relative; z-index: 1; }
.hero-flex > div:first-child { flex: 1; }
.hero-emblem { flex: 0 0 320px; }
.hero-emblem img { width: 100%; filter: drop-shadow(0 10px 40px rgba(26,108,245,.35)); }
@media (max-width: 860px) { .hero-emblem { display: none; } }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); margin: 0 0 14px; line-height: 1.15; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p.lead { color: #b9c0c8; max-width: 560px; font-size: 1.1rem; margin: 0 0 28px; }
.hero .badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero .badge {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  padding: 8px 16px; border-radius: 999px; font-size: .88rem; color: #dfe3e8;
}
.btn {
  display: inline-block; background: var(--accent); color: #fff !important;
  font-weight: 700; padding: 13px 28px; border-radius: 999px; border: 0;
  font-size: 1rem; cursor: pointer; transition: background .15s;
}
.btn:hover { background: var(--accent-dark); text-decoration: none !important; }
.btn.secondary {
  background: transparent; border: 2px solid rgba(255,255,255,.35);
  margin-left: 12px;
}
.btn.secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn.small { padding: 8px 18px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Sections ---------- */
section.block { padding: 64px 0; }
section.block.alt { background: var(--surface); }
h2.section {
  font-size: 1.7rem; margin: 0 0 8px; text-align: center;
}
p.section-sub { text-align: center; color: var(--ink-soft); margin: 0 auto 40px; max-width: 620px; }

/* ---------- Item Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line);
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(20,24,29,.14); }
.card .thumb {
  background: linear-gradient(135deg, var(--dark-2), #39424d);
  height: 150px; display: flex; align-items: center; justify-content: center;
  font-size: 4rem; overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.detail .thumb { overflow: hidden; }
.detail .thumb img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: var(--radius); }
.pick .ic .pick-img {
  width: 52px; height: 40px; object-fit: cover; border-radius: 8px; display: block;
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.gallery-thumbs img {
  width: 82px; height: 58px; object-fit: cover; border-radius: 8px;
  border: 2px solid var(--line); cursor: pointer; transition: border-color .12s;
}
.gallery-thumbs img:hover { border-color: #c9c4b8; }
.gallery-thumbs img.active { border-color: var(--accent); }
.card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.card .sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 16px; flex: 1; }
.card .price { font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.card .price small { font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.step { text-align: center; padding: 10px; }
.step .num {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem;
}
.step h4 { margin: 0 0 6px; }
.step p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* ---------- Forms ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;
  margin-bottom: 22px;
}
.panel h3 { margin: 0 0 16px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.panel h3 .stepnum {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; flex: none;
}
label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 5px; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 10px; font-size: 1rem; background: #fff; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,108,245,.15);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* Auswahl-Kacheln (Artikel, Optionen) */
.pick-list { display: flex; flex-direction: column; gap: 10px; }
.pick {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 16px;
  cursor: pointer; background: #fff; transition: border-color .12s, background .12s;
}
.pick:hover { border-color: #c9c4b8; }
.pick.selected { border-color: var(--accent); background: var(--accent-soft); }
.pick .ic { font-size: 1.7rem; }
.pick .info { flex: 1; }
.pick .info b { display: block; }
.pick .info small { color: var(--ink-soft); }
.pick .qty { display: flex; align-items: center; gap: 8px; }
.pick .qty button {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line);
  background: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.pick .qty span { min-width: 22px; text-align: center; font-weight: 700; }

/* ---------- Kalender ---------- */
.cal { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-head b { font-size: .98rem; }
.cal-head button {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: 1rem;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow { text-align: center; font-size: .72rem; color: var(--ink-soft); font-weight: 700; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: .85rem; background: #f1efe9; color: var(--ink);
}
.cal-day.free { background: #e4f3e9; color: #1e6b3a; font-weight: 600; }
.cal-day.partial { background: #fdf3d7; color: #8a6a12; font-weight: 600; }
.cal-day.busy { background: #fbe3e0; color: #a33025; text-decoration: line-through; }
.cal-day.past { background: #f1efe9; color: #b6b3aa; }
.cal-day.selectable { cursor: pointer; }
.cal-day.selectable:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-day.sel { background: var(--accent) !important; color: #fff !important; font-weight: 800; }
.cal-day.in-range { background: var(--accent-soft) !important; color: var(--accent-dark) !important; }
.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap; }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }

/* ---------- Unterschrift ---------- */
.sig-wrap { border: 1.5px dashed #b9b4a7; border-radius: 12px; background: #fff; position: relative; }
canvas#sigpad { width: 100%; height: 170px; display: block; border-radius: 12px; touch-action: none; }
.sig-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #c2beb2; font-size: .95rem; pointer-events: none;
}
.sig-tools { margin-top: 8px; text-align: right; }
.sig-tools button {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 14px; cursor: pointer; font-size: .85rem;
}

/* ---------- Zusammenfassung ---------- */
.summary { position: sticky; top: 84px; }
.summary table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.summary td { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.summary td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.summary tr.total td { border-bottom: 0; padding-top: 12px; font-size: 1.15rem; font-weight: 800; }
.summary tr.deposit td { color: var(--ink-soft); font-weight: 500; border-bottom: 0; font-size: .85rem; }
.booking-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 860px) { .booking-layout { grid-template-columns: 1fr; } .summary { position: static; } }

.msg { padding: 12px 16px; border-radius: 10px; margin: 12px 0; font-size: .93rem; }
.msg.error { background: #fbe3e0; color: #8d2b21; }
.msg.ok { background: #e4f3e9; color: #1e6b3a; }
.msg.info { background: #e8f0fb; color: #274f87; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--dark); color: #9aa3ad; padding: 40px 0; margin-top: 60px; font-size: .9rem;
}
footer.site a { color: #cfd5db; margin-right: 18px; }
footer.site .cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }

/* ---------- Detailseite ---------- */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 800px) { .detail { grid-template-columns: 1fr; } }
.detail .thumb {
  background: linear-gradient(135deg, var(--dark-2), #39424d); border-radius: var(--radius);
  min-height: 260px; display: flex; align-items: center; justify-content: center; font-size: 6rem;
}
.pricebox {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-top: 18px; box-shadow: var(--shadow);
}
.pricebox .row { display: flex; justify-content: space-between; padding: 5px 0; font-size: .95rem; }
.pricebox .row b.big { font-size: 1.4rem; }

/* ---------- Admin ---------- */
.admin-nav { background: var(--dark-2); }
.admin-nav .container { display: flex; gap: 4px; height: 46px; align-items: stretch; overflow-x: auto; }
.admin-nav a {
  color: #c3cad2; display: flex; align-items: center; padding: 0 16px;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.admin-nav a.active, .admin-nav a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: .92rem; }
table.list th { background: var(--dark-2); color: #fff; text-align: left; padding: 11px 14px; font-size: .82rem; }
table.list td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
table.list tr:hover td { background: #faf9f6; }
.tag { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.tag.angefragt { background: #fdf3d7; color: #8a6a12; }
.tag.bestaetigt { background: #e4f3e9; color: #1e6b3a; }
.tag.uebergeben { background: #e8f0fb; color: #274f87; }
.tag.abgeschlossen { background: #eeeeea; color: #55554f; }
.tag.storniert { background: #fbe3e0; color: #a33025; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stat b { font-size: 1.6rem; display: block; }
.stat span { color: var(--ink-soft); font-size: .85rem; }
.admin-cal { overflow-x: auto; }
.admin-cal table { border-collapse: separate; border-spacing: 2px; font-size: .75rem; }
.admin-cal th { padding: 4px 2px; text-align: center; min-width: 28px; font-weight: 600; }
.admin-cal th .daynum { display: block; font-size: .85rem; font-weight: 800; color: var(--ink); }
.admin-cal th .dow { display: block; font-size: .62rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; }
.admin-cal th.weekend .daynum, .admin-cal th.weekend .dow { color: var(--accent-dark); }
.admin-cal th.today { background: var(--accent); border-radius: 8px; }
.admin-cal th.today .daynum, .admin-cal th.today .dow { color: #fff; }
.admin-cal td { padding: 0; text-align: center; min-width: 28px; height: 34px;
  border-radius: 6px; font-weight: 700; color: rgba(20,30,50,.55); }
.admin-cal td.free { background: #e2f3e9; }
.admin-cal td.partial { background: #fff0cc; color: #8a6a12; }
.admin-cal td.busy { background: #fbdcd8; }
.admin-cal td.weekend { box-shadow: inset 0 0 0 999px rgba(20, 40, 80, .05); }
.admin-cal td.today { box-shadow: inset 0 0 0 2px var(--accent); }
.admin-cal td.today.weekend { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 999px rgba(20,40,80,.05); }
.admin-cal .item-col { text-align: left; min-width: 170px; padding: 6px 10px;
  background: #fff; border-radius: 8px; }
.admin-cal td.item-col { display: flex; align-items: center; gap: 8px; height: auto;
  font-weight: 400; color: var(--ink); border: 1px solid var(--line); }
.admin-cal .item-ic { font-size: 1.3rem; }
.admin-cal td.item-col small { color: var(--ink-soft); }
h1.page { font-size: 1.5rem; margin: 28px 0 20px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.toolbar a.filter {
  padding: 7px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: .85rem; font-weight: 600; color: var(--ink);
}
.toolbar a.filter.active { background: var(--dark); color: #fff; border-color: var(--dark); }