/* ==========================================================
   Leerstandsmanagement Ottweiler - Steckbrief-Design
   ========================================================== */

:root {
  --blue:       #154a72;
  --blue-dark:  #0d3354;
  --blue-mid:   #1a5f90;
  --blue-light: #e8f1f8;
  --accent:     #c9a13b;
  --bg:         #f2f4f7;
  --surface:    #ffffff;
  --text:       #1f2428;
  --muted:      #67727a;
  --border:     #d8dfe6;
  --radius:     8px;
  --shadow:     0 2px 8px rgba(15,30,50,.09);
  --shadow-lg:  0 6px 24px rgba(15,30,50,.13);
}

* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }

/* ---------- Wrap ---------- */
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.site-header { background:var(--blue-dark); color:#fff; padding:16px 0; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; }
.site-header .brand { display:flex; align-items:center; gap:12px; color:#fff; font-size:1.1rem; font-weight:600; }
.site-header .brand small { display:block; font-weight:400; font-size:.7rem; opacity:.8; }
.brand-logo-chip { background:#fff; border-radius:6px; padding:4px 7px; line-height:0; display:inline-flex; align-items:center; }
.brand-logo-chip img { height:28px; width:auto; }
.site-header nav a { color:rgba(255,255,255,.85); margin-left:20px; font-size:.9rem; }
.site-header nav a:hover { color:#fff; text-decoration:none; }

/* ---------- Hero ---------- */
.hero-ottweiler {
  position:relative;
  background: linear-gradient(180deg,rgba(8,22,38,.80) 0%,rgba(13,33,52,.58) 40%,rgba(11,30,48,.88) 100%),
              var(--hero-bg, #0d3354) center 35%/cover;
  color:#fff; padding:46px 0 56px; overflow:hidden;
}
.hero-ottweiler .wrap { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.hero-ottweiler .hero-text { max-width:640px; }
.hero-ottweiler .hero-logo { flex-shrink:0; background:rgba(255,255,255,.96); border-radius:10px; padding:14px 18px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.hero-ottweiler .hero-logo img { height:56px; width:auto; }
.hero-ottweiler .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:30px; padding:5px 13px; margin-bottom:16px; }
.hero-ottweiler h1 { margin:0 0 10px; font-size:2rem; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.hero-ottweiler p.lead { margin:0; color:rgba(255,255,255,.92); font-size:1rem; text-shadow:0 1px 6px rgba(0,0,0,.3); }
main.page.with-hero { padding-top:28px; }
main.page { padding:28px 0 60px; }

/* ---------- Filter Bar ---------- */
.filter-bar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; margin-bottom:24px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; box-shadow:var(--shadow); }
.filter-bar .field { display:flex; flex-direction:column; gap:4px; }
.filter-bar label { font-size:.75rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.filter-bar select, .filter-bar input { padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:.88rem; min-width:150px; }

/* ---------- Karten-Grid (Uebersicht) ---------- */
.property-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }

.steckbrief-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s,transform .2s;
  color:var(--text);
}
.steckbrief-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); text-decoration:none; }

/* Karten-Kopf: Blauer Balken mit Adresse */
.card-head {
  background:var(--blue);
  color:#fff;
  padding:10px 14px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
}
.card-head .addr { font-weight:700; font-size:.95rem; line-height:1.3; }
.card-head .addr small { display:block; font-weight:400; font-size:.75rem; opacity:.85; }
.card-head .nr { font-size:.72rem; background:rgba(255,255,255,.18); border-radius:4px; padding:2px 7px; white-space:nowrap; margin-top:2px; }

/* Foto */
.card-photo {
  position:relative;
  aspect-ratio:4/3;
  background:#dde3ea url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a0aab4"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>') center/36% no-repeat;
  overflow:hidden;
}
.card-photo img { width:100%; height:100%; object-fit:cover; }
.card-photo .status-badge { position:absolute; top:8px; left:8px; }

/* Karten-Body */
.card-body { padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:8px; }

/* Groessenklassen-Leiste */
.size-bar { display:flex; gap:2px; }
.size-seg {
  flex:1; text-align:center; font-size:.68rem; padding:4px 2px;
  background:#eef1f5; border:1px solid var(--border); color:var(--muted);
  border-radius:3px;
}
.size-seg.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }

/* Folgenutzungs-Badges */
.follow-badges { display:flex; flex-wrap:wrap; gap:4px; }
.follow-badge {
  font-size:.68rem; padding:3px 8px; border-radius:20px;
  background:#eef1f5; color:var(--muted); border:1px solid var(--border);
}
.follow-badge.active { background:var(--blue-light); color:var(--blue); border-color:var(--blue-mid); font-weight:600; }

/* Prioritaet */
.prio-chip { display:inline-block; font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:600; }
.prio-high { background:#fde8e8; color:#b71c1c; }
.prio-med  { background:#fff3e0; color:#e65100; }
.prio-low  { background:#e8f5e9; color:#2e7d32; }

/* Umsetzungsoption */
.impl-chip { display:inline-block; font-size:.72rem; padding:3px 10px; border-radius:20px; font-weight:600; }
.impl-green  { background:#e8f5e9; color:#2e7d32; }
.impl-yellow { background:#fff8e1; color:#f57f17; }
.impl-orange { background:#fff3e0; color:#e65100; }

/* ---------- Status-Badges ---------- */
.badge { display:inline-block; font-size:.7rem; font-weight:700; color:#fff; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em; }
.badge-vacant   { background:#c0392b; }
.badge-reserved { background:#d68910; }
.badge-rented   { background:#1e8449; }
.badge-sold     { background:#555; }
.badge-progress { background:#2471a3; }

/* ---------- Detailseite Steckbrief ---------- */
.steckbrief-detail {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

/* Blauer Kopf-Balken */
.sb-head {
  background:var(--blue);
  color:#fff;
  padding:16px 22px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
}
.sb-head h1 { margin:0 0 4px; font-size:1.4rem; }
.sb-head .sb-meta { font-size:.85rem; opacity:.88; }
.sb-head .sb-nr { font-size:.8rem; background:rgba(255,255,255,.18); border-radius:4px; padding:4px 10px; white-space:nowrap; }

/* Inhalt zweispaltig */
.sb-body { display:grid; grid-template-columns:1.4fr 1fr; gap:0; }
@media(max-width:860px) { .sb-body { grid-template-columns:1fr; } }

.sb-left { padding:20px 22px; border-right:1px solid var(--border); }
.sb-right { padding:20px 22px; }

/* Galerie */
.gallery-main { border-radius:6px; overflow:hidden; aspect-ratio:4/3; background:#dde3ea; margin-bottom:8px; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; gap:6px; flex-wrap:wrap; }
.gallery-thumbs img { width:70px; height:52px; object-fit:cover; border-radius:5px; cursor:pointer; border:2px solid transparent; }
.gallery-thumbs img.active { border-color:var(--accent); }

/* Abschnitte im Steckbrief */
.sb-section { margin-bottom:18px; }
.sb-section-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--blue); border-bottom:2px solid var(--blue-light);
  padding-bottom:4px; margin:0 0 8px;
}

/* Daten-Grid */
.sb-data-grid { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:.88rem; }
.sb-data-grid dt { color:var(--muted); }
.sb-data-grid dd { margin:0; font-weight:500; }

/* Bullet-Liste */
.bullet-list { margin:0; padding-left:16px; }
.bullet-list li { font-size:.88rem; margin-bottom:3px; }

/* Vermarktungschancen-Pfeil */
.market-arrow-wrap { margin:6px 0; }
.market-arrow-track {
  position:relative; height:14px;
  background:linear-gradient(to right,#e74c3c,#f39c12,#2ecc71);
  border-radius:7px; overflow:visible; margin-bottom:4px;
}
.market-arrow-fill { height:100%; border-radius:7px 0 0 7px; opacity:.35; }
.market-arrow-head {
  position:absolute; top:-3px;
  width:0; height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid #154a72;
  filter:drop-shadow(1px 0 2px rgba(0,0,0,.3));
}
.market-arrow-labels { display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted); }
.market-arrow-val { font-size:.8rem; font-weight:600; margin-top:2px; }

/* Infobox (Kontakt, Preise) */
.info-box { background:var(--blue-light); border-radius:6px; padding:12px 14px; font-size:.88rem; }
.info-box h4 { margin:0 0 6px; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); }

/* ---------- Allgemeine UI-Elemente ---------- */
.btn { display:inline-block; border:none; border-radius:6px; padding:9px 18px; font-size:.88rem; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dark); }
.btn-secondary { background:#fff; color:var(--blue); border:1px solid var(--blue); }
.btn-danger { background:#fff; color:#c0392b; border:1px solid #c0392b; }
.btn-danger:hover { background:#c0392b; color:#fff; }
.btn-sm { padding:5px 11px; font-size:.78rem; }
.btn-block { display:block; width:100%; text-align:center; }

.alert { padding:11px 15px; border-radius:6px; margin-bottom:16px; font-size:.88rem; }
.alert-success { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }
.alert-error   { background:#fde8e8; color:#b71c1c; border:1px solid #ffcdd2; }
.alert-info    { background:#e3f2fd; color:#1565c0; border:1px solid #bbdefb; }

/* ---------- Admin Layout ---------- */
.admin-shell { display:flex; min-height:100vh; }
.admin-sidebar { width:220px; background:var(--blue-dark); color:#fff; flex-shrink:0; padding:20px 0; }
.admin-sidebar .brand { padding:0 18px 18px; font-weight:700; font-size:1rem; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:12px; }
.admin-sidebar .brand small { display:block; font-weight:400; opacity:.7; font-size:.7rem; }
.admin-sidebar a { display:block; padding:10px 18px; color:rgba(255,255,255,.82); font-size:.88rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { background:rgba(255,255,255,.09); color:#fff; text-decoration:none; }
.admin-main { flex:1; padding:26px 32px; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.page-title { margin:0 0 4px; font-size:1.5rem; color:var(--blue-dark); }
.user-pill { font-size:.82rem; color:var(--muted); }

table.data-table { width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.data-table th, table.data-table td { padding:10px 13px; border-bottom:1px solid var(--border); text-align:left; font-size:.87rem; }
table.data-table th { background:#f0f4f8; font-weight:600; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
table.data-table tr:last-child td { border-bottom:none; }
table.data-table td.actions { display:flex; gap:6px; white-space:nowrap; }
table.data-table img.thumb-sm { width:54px; height:40px; object-fit:cover; border-radius:4px; }

.kpi-row { display:flex; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.kpi-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 20px; min-width:140px; }
.kpi-card .num { font-size:1.6rem; font-weight:700; color:var(--blue-dark); }
.kpi-card .lbl { font-size:.77rem; color:var(--muted); }

/* ---------- Formulare ---------- */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px; }
.form-grid .full { grid-column:1/-1; }
@media(max-width:700px) { .form-grid { grid-template-columns:1fr; } }
.field-group { display:flex; flex-direction:column; gap:5px; }
.field-group label { font-size:.8rem; font-weight:600; }
.field-group .hint { font-size:.73rem; color:var(--muted); }
.field-group input, .field-group select, .field-group textarea { padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:.88rem; font-family:inherit; background:#fff; }
.field-group textarea { resize:vertical; min-height:80px; }
fieldset { border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin:0 0 20px; }
fieldset legend { font-weight:700; color:var(--blue-dark); padding:0 6px; font-size:.9rem; }

.checkbox-group { display:flex; flex-wrap:wrap; gap:10px; }
.checkbox-group label { display:flex; align-items:center; gap:5px; font-size:.86rem; cursor:pointer; }
.checkbox-group input[type=checkbox] { width:15px; height:15px; }

/* ---------- Bilder-Verwaltung ---------- */
.image-manager { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:10px; }
.img-item { position:relative; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:#fff; }
.img-item img { aspect-ratio:4/3; object-fit:cover; }
.img-item .img-actions { display:flex; justify-content:space-between; align-items:center; padding:5px 7px; font-size:.7rem; background:#f8f9fa; }
.img-item .cover-tag { position:absolute; top:5px; left:5px; background:var(--accent); color:#fff; font-size:.62rem; padding:2px 6px; border-radius:8px; font-weight:600; }
.dropzone { border:2px dashed var(--border); border-radius:var(--radius); padding:22px; text-align:center; color:var(--muted); font-size:.85rem; }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue-dark),var(--blue)); }
.login-box { background:#fff; border-radius:var(--radius); padding:34px 32px; width:100%; max-width:370px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.login-box h1 { margin:0 0 4px; font-size:1.25rem; color:var(--blue-dark); }
.login-box p.sub { margin:0 0 22px; color:var(--muted); font-size:.82rem; }

/* ---------- Footer ---------- */
.site-footer { background:var(--blue-dark); color:rgba(255,255,255,.75); font-size:.83rem; padding:22px 0; margin-top:40px; }
.site-footer .footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.site-footer a { color:rgba(255,255,255,.8); }
.site-footer a:hover { color:#fff; }
.site-footer .footer-links a { margin-left:16px; }

/* ---------- Foerderhinweis-Banner ---------- */
.foerder-banner {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.foerder-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.foerder-inner img {
  height: 80px;
  width: auto;
  flex-shrink: 0;
}
.foerder-inner p {
  margin: 0;
  font-size: .78rem;
  color: var(--muted);
  max-width: 600px;
  border-left: 2px solid var(--border);
  padding-left: 16px;
}

/* ---------- Diverses ---------- */
.empty-state { text-align:center; padding:60px 20px; color:var(--muted); }
.filter-bar button { padding:9px 18px; }