/* ============================================================
   Neocasa – Design-System
   Ruhige, seriöse Grünwelt · klare Kanten · dezente Bewegung
   ============================================================ */

:root {
  --brand: #0e8a52;
  --brand-2: #35b57c;
  --brand-dark: #0a5c38;
  --brand-deep: #0b1f16;
  --ink: #14211b;
  --ink-soft: #4c5f57;
  --ink-faint: #7e8f88;
  --bg: #f7f9f8;
  --bg-2: #eef3f0;
  --card: #ffffff;
  --line: #dfe6e2;
  --gold: #c99a2c;
  --danger: #c44a46;
  --grad: linear-gradient(135deg, #12945a 0%, #0a6b41 100%);
  --grad-soft: linear-gradient(160deg, #f0f6f2 0%, #e4efe8 100%);
  --shadow-sm: 0 2px 8px rgba(11, 31, 22, 0.06);
  --shadow-md: 0 8px 28px rgba(11, 31, 22, 0.10);
  --shadow-lg: 0 20px 56px rgba(11, 31, 22, 0.16);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Arial, sans-serif;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.022em; }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 750; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
.section { padding: clamp(52px, 7vw, 96px) 0; }
.container { width: min(1200px, 92vw); margin: 0 auto; }
.center { text-align: center; }
.lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 640px; }
.lead.center-block { margin: 0 auto 1em; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 14px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }
.header-inner {
  width: min(1280px, 94vw); margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 36px; height: 36px; }
.brand-name {
  font-size: 1.34rem; font-weight: 750; letter-spacing: -0.03em; color: var(--ink);
}
.brand-name b { color: var(--brand); font-weight: 750; }
.brand-name .tld { color: var(--ink-faint); font-weight: 600; font-size: 0.88em; }
.main-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.main-nav a {
  padding: 9px 14px; border-radius: var(--r-sm); color: var(--ink-soft);
  font-weight: 600; font-size: 0.95rem; transition: 0.2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--brand-dark); background: var(--bg-2); }
.nav-cta {
  background: var(--brand); color: #fff !important; margin-left: 8px;
}
.nav-cta:hover { background: var(--brand-dark) !important; }
.fav-count {
  display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px;
  align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; margin-left: 4px;
}
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: var(--r-md); border: none; cursor: pointer;
  font-weight: 700; font-size: 0.98rem; transition: 0.2s; text-decoration: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: #fff; color: var(--ink); border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-dark { background: var(--brand-deep); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 7px 14px; font-size: 0.87rem; border-radius: var(--r-sm); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* ---------- Hero mit Karte ---------- */
.hero-map {
  position: relative; height: max(620px, calc(100vh - 0px));
  overflow: hidden; background: var(--brand-deep);
}
#heroMap, #searchMap, #detailMap, #wizardMap { position: absolute; inset: 0; z-index: 1; background: #e6ece8; }
.hero-shade {
  position: absolute; inset: 0; z-index: 400; pointer-events: none;
  background: linear-gradient(100deg, rgba(11, 31, 22, 0.55) 0%, rgba(11, 31, 22, 0.28) 34%, rgba(11, 31, 22, 0) 60%);
}
.hero-side {
  position: absolute; z-index: 500; top: var(--header-h); bottom: 0; left: 0;
  display: flex; align-items: center;
  padding: 24px clamp(16px, 4vw, 56px);
  pointer-events: none;
}
.hero-card {
  pointer-events: auto;
  width: min(560px, 92vw);
  background: rgba(11, 31, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 38px);
  color: #f2f7f4;
}
.hero-card .eyebrow { color: var(--brand-2); }
.hero-card h1 { color: #fff; margin-bottom: 10px; }
.hero-card .hero-sub { color: rgba(242, 247, 244, 0.78); font-size: 1.02rem; margin-bottom: 22px; }
.hero-card .segments { background: rgba(255, 255, 255, 0.08); }
.hero-card .segments button { color: rgba(242, 247, 244, 0.75); }
.hero-card .segments button.active { background: #fff; color: var(--brand-dark); }
.hero-metrics {
  display: flex; gap: 28px; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-metrics div b { display: block; font-size: 1.3rem; color: #fff; letter-spacing: -0.02em; }
.hero-metrics div span { font-size: 0.78rem; color: rgba(242, 247, 244, 0.6); font-weight: 600; }

/* Segment-Umschalter */
.segments {
  display: inline-flex; background: var(--bg-2); border-radius: var(--r-md); padding: 4px; gap: 2px;
}
.segments button {
  border: none; background: transparent; padding: 9px 20px; border-radius: var(--r-sm);
  font-weight: 700; font-size: 0.93rem; color: var(--ink-soft); cursor: pointer; transition: 0.2s;
}
.segments button.active { background: #fff; color: var(--brand-dark); box-shadow: var(--shadow-sm); }
.search-row { display: flex; gap: 10px; margin-top: 16px; }
.search-input {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 3px 8px 3px 16px;
  transition: border-color 0.2s;
}
.search-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 138, 82, 0.14); }
.search-input svg { flex: none; color: var(--ink-faint); }
.search-input input {
  flex: 1; border: none; outline: none; font-size: 1rem; font-family: inherit;
  background: transparent; padding: 10px 0; color: var(--ink); min-width: 0;
}
.hero-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  border-radius: var(--r-sm); padding: 6px 13px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: 0.2s;
}
.chip:hover, .chip.active { border-color: var(--brand); color: var(--brand-dark); background: rgba(14, 138, 82, 0.06); }
.hero-card .chip {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18);
  color: rgba(242, 247, 244, 0.85);
}
.hero-card .chip:hover { border-color: var(--brand-2); color: #fff; }

/* ---------- Karten-Pins (Neocasa-Logo) ---------- */
.nc-logo-pin { position: relative; transition: transform 0.15s; transform-origin: 50% 100%; cursor: pointer; }
.nc-logo-pin:hover { transform: scale(1.18); z-index: 999; }
.nc-logo-pin svg { display: block; filter: drop-shadow(0 3px 6px rgba(11, 31, 22, 0.35)); }
.leaflet-container { font-family: var(--font); }
.nc-popup .leaflet-popup-content-wrapper { border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; }
.nc-popup .leaflet-popup-content { margin: 0; width: 250px !important; }
.pin-card { display: block; color: inherit; }
.pin-card img { height: 120px; width: 100%; object-fit: cover; }
.pin-card .pc-body { padding: 10px 14px 12px; }
.pin-card .pc-price { font-weight: 800; color: var(--brand-dark); }
.pin-card .pc-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin: 2px 0; }
.pin-card .pc-meta { font-size: 0.8rem; color: var(--ink-faint); }

/* ---------- Inserat-Karten ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.listing-card {
  background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform 0.25s, box-shadow 0.25s;
  display: flex; flex-direction: column; position: relative; color: inherit;
}
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lc-media { position: relative; overflow: hidden; aspect-ratio: 4 / 2.7; }
.lc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.listing-card:hover .lc-media img { transform: scale(1.05); }
.lc-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 11px; border-radius: var(--r-sm); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.lc-badge.premium { background: var(--brand-deep); color: #cdeddd; }
.lc-badge.top { background: var(--brand); color: #fff; }
.lc-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: var(--r-sm); border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: var(--ink-soft); transition: 0.2s;
}
.lc-fav:hover { color: var(--danger); }
.lc-fav.active { color: var(--danger); }
.lc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.lc-price { font-size: 1.18rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.lc-price small { font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }
.lc-title { font-weight: 650; font-size: 1rem; color: var(--ink); }
.lc-loc { font-size: 0.87rem; color: var(--ink-faint); }
.lc-meta { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lc-meta span { font-size: 0.83rem; color: var(--ink-soft); font-weight: 600; }
.lc-meta span:not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--ink-faint); }

/* ---------- Feature-Sektion ---------- */
.feature-card {
  background: var(--card); border-radius: var(--r-lg); padding: 28px 26px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: 0.25s; height: 100%;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(14, 138, 82, 0.35); }
.feature-icon {
  width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--grad-soft); color: var(--brand-dark); margin-bottom: 16px;
}
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }

/* ---------- Kategorien ---------- */
.cat-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-sm);
  transition: 0.25s;
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 31, 22, 0.78), rgba(11, 31, 22, 0.02) 55%);
}
.cat-tile .ct-label { position: relative; z-index: 2; padding: 16px 18px; font-weight: 750; font-size: 1.04rem; }
.cat-tile .ct-label small { display: block; font-weight: 600; font-size: 0.78rem; opacity: 0.8; }

/* ---------- Dunkle Sektion ---------- */
.dark-section {
  background:
    radial-gradient(1100px 460px at 88% -10%, rgba(18, 148, 90, 0.25), transparent 60%),
    var(--brand-deep);
  color: #e8f1ec; border-radius: var(--r-xl);
  padding: clamp(38px, 5vw, 72px); position: relative; overflow: hidden;
}
.dark-section h2 { color: #fff; }
.dark-section .lead { color: rgba(232, 241, 236, 0.8); }

/* ---------- Suche (Splitscreen) ---------- */
.search-page { display: grid; grid-template-columns: minmax(430px, 46%) 1fr; height: calc(100vh - var(--header-h)); margin-top: var(--header-h); }
.search-list { overflow-y: auto; padding: 20px 26px 40px; background: var(--bg); }
.search-map-wrap { position: relative; }
.filter-bar {
  position: sticky; top: 0; z-index: 20; background: rgba(247, 249, 248, 0.94);
  backdrop-filter: blur(10px); padding: 4px 0 12px; margin-bottom: 12px;
}
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-row select, .filter-row input[type="number"], .filter-row input[type="text"] {
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px;
  font-family: inherit; font-size: 0.9rem; background: #fff; color: var(--ink); outline: none;
}
.filter-row select:focus, .filter-row input:focus { border-color: var(--brand); }
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.result-count { font-weight: 700; color: var(--ink-soft); font-size: 0.92rem; margin: 6px 0 12px; }
.radius-hint {
  position: absolute; z-index: 600; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(11, 31, 22, 0.85); color: #fff; font-size: 0.82rem; font-weight: 600;
  padding: 7px 16px; border-radius: var(--r-sm); pointer-events: none; white-space: nowrap;
}

/* ---------- Detailseite ---------- */
.detail-hero { margin-top: var(--header-h); }
/* Die Zeilenhoehe muss ausdruecklich gesetzt werden. Ohne sie richtet sich
   die einzige Grid-Zeile nach dem Inhalt: das Bild bekommt fuer height:100%
   keine feste Bezugsgroesse, rendert in Originalhoehe und laeuft ueber die
   Galerie hinaus in den darunterliegenden Text. min-height:0 erlaubt den
   Rasterfeldern, kleiner als ihr Inhalt zu werden, damit object-fit greift. */
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 100%; gap: 8px; height: clamp(320px, 44vw, 500px); }
.gallery > * { min-height: 0; }
.gallery .g-main { border-radius: var(--r-lg) 0 0 var(--r-lg); overflow: hidden; }
.gallery .g-side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.gallery .g-side > div:first-child { border-radius: 0 var(--r-lg) 0 0; overflow: hidden; }
.gallery .g-side > div:last-child { border-radius: 0 0 var(--r-lg) 0; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; cursor: pointer; }
.gallery img:hover { transform: scale(1.03); }
.detail-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 34px; align-items: start; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fact {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px;
}
.fact b { display: block; font-size: 1.02rem; color: var(--ink); }
.fact span { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-tags span {
  background: rgba(14, 138, 82, 0.08); color: var(--brand-dark); font-weight: 650;
  font-size: 0.84rem; border-radius: var(--r-sm); padding: 6px 12px;
}
.sidebar-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-md);
  position: sticky; top: calc(var(--header-h) + 20px);
}
.map-box { position: relative; height: 340px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

/* ---------- Formulare ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.87rem; color: var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px;
  font-family: inherit; font-size: 0.96rem; background: #fff; color: var(--ink);
  outline: none; transition: 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 138, 82, 0.12);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.form-msg { border-radius: var(--r-sm); padding: 12px 16px; font-weight: 600; font-size: 0.92rem; display: none; }
.form-msg.ok { display: block; background: rgba(14, 138, 82, 0.10); color: var(--brand-dark); }
.form-msg.err { display: block; background: rgba(196, 74, 70, 0.10); color: var(--danger); }

/* ---------- Portal & Admin ---------- */
.portal-wrap { margin-top: var(--header-h); min-height: calc(100vh - var(--header-h)); }
.portal-shell { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.portal-nav {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 10px;
  position: sticky; top: calc(var(--header-h) + 24px);
}
.portal-nav button {
  display: flex; width: 100%; align-items: center; gap: 10px; text-align: left;
  background: none; border: none; padding: 11px 13px; border-radius: var(--r-sm);
  font: 700 0.93rem var(--font); color: var(--ink-soft); cursor: pointer; transition: 0.2s;
}
.portal-nav button:hover, .portal-nav button.active { background: rgba(14, 138, 82, 0.08); color: var(--brand-dark); }
/* Link statt Button in der Portal-Navigation (NeoCasa Connect liegt in der React-App) */
.portal-nav .pnav-link {
  display: flex; width: 100%; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-sm); text-decoration: none;
  font: 700 0.93rem var(--font); color: var(--ink-soft); transition: 0.2s;
}
.portal-nav .pnav-link:hover { background: rgba(14, 138, 82, 0.08); color: var(--brand-dark); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.stat-tile b { display: block; font-size: 1.6rem; color: var(--brand-dark); letter-spacing: -0.02em; }
.stat-tile span { font-size: 0.82rem; color: var(--ink-faint); font-weight: 600; }
.mylist-row {
  display: flex; gap: 16px; align-items: center; background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 16px;
}
.mylist-row img { width: 88px; height: 62px; object-fit: cover; border-radius: var(--r-sm); }
.mylist-row .mr-body { flex: 1; min-width: 0; }
.mylist-row .mr-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mylist-row .mr-meta { font-size: 0.82rem; color: var(--ink-faint); }
.status-pill { font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.status-pill.active { background: rgba(14, 138, 82, 0.12); color: var(--brand-dark); }
.status-pill.draft { background: #edf0ee; color: var(--ink-faint); }
.status-pill.paused, .status-pill.pending_payment, .status-pill.open { background: rgba(201, 154, 44, 0.14); color: #8a6a1d; }
.status-pill.expired { background: rgba(196, 74, 70, 0.12); color: var(--danger); }
.status-pill.paid { background: rgba(14, 138, 82, 0.12); color: var(--brand-dark); }

/* Admin-Tabellen & CRM */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.admin { width: 100%; border-collapse: collapse; min-width: 720px; }
table.admin th, table.admin td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: middle; }
table.admin thead th { background: var(--bg-2); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
table.admin tbody tr:last-child td { border-bottom: none; }
table.admin tbody tr:hover { background: #fafcfb; }
.crm-status { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; font-family: inherit; font-size: 0.85rem; background: #fff; }
.crm-status.neu { border-color: #7aa7d9; color: #2d5e96; }
.crm-status.kontaktiert { border-color: var(--gold); color: #8a6a1d; }
.crm-status.interessiert { border-color: var(--brand-2); color: var(--brand-dark); }
.crm-status.gewonnen { border-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.crm-status.abgelehnt { border-color: var(--line); color: var(--ink-faint); }

/* Wizard */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 26px; }
.wizard-steps .ws {
  flex: 1; text-align: center; font-weight: 700; font-size: 0.84rem; color: var(--ink-faint);
  padding: 10px 6px; border-radius: var(--r-sm); background: var(--bg-2); transition: 0.25s;
}
.wizard-steps .ws.active { background: var(--brand); color: #fff; }
.wizard-steps .ws.done { background: rgba(14, 138, 82, 0.12); color: var(--brand-dark); }
.quality-meter { background: var(--bg-2); border-radius: 999px; height: 8px; overflow: hidden; }
.quality-meter i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width 0.4s; }
.pkg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pkg-card {
  border: 2px solid var(--line); border-radius: var(--r-lg); padding: 22px; cursor: pointer;
  background: #fff; transition: 0.2s; position: relative;
}
.pkg-card:hover { border-color: rgba(14, 138, 82, 0.5); }
.pkg-card.selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 138, 82, 0.12); }
.pkg-card.static { cursor: default; }
.pkg-card .pk-price { font-size: 1.45rem; font-weight: 800; color: var(--brand-dark); }
.pkg-card .pk-price small { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }
.pkg-card ul { margin: 12px 0 0; padding: 0 0 0 18px; color: var(--ink-soft); font-size: 0.88rem; }
.pkg-card li { margin-bottom: 5px; }
.pkg-flag {
  position: absolute; top: -12px; right: 14px; background: var(--brand-deep); color: #cdeddd;
  font-size: 0.68rem; font-weight: 800; padding: 4px 12px; border-radius: var(--r-sm);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.upload-zone {
  border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 28px; text-align: center;
  color: var(--ink-faint); cursor: pointer; transition: 0.2s; background: #fff;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--brand); color: var(--brand-dark); }
.upload-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.upload-thumbs .ut { position: relative; }
.upload-thumbs img { width: 96px; height: 68px; object-fit: cover; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.upload-thumbs button {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 999px;
  border: none; background: var(--danger); color: #fff; font-weight: 800; cursor: pointer; line-height: 1;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--brand-deep); color: #e8f1ec; padding: 13px 24px; border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: 0.93rem; z-index: 4000;
  opacity: 0; pointer-events: none; transition: 0.3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-deep); color: rgba(232, 241, 236, 0.75); margin-top: 60px; }
.footer-inner { width: min(1200px, 92vw); margin: 0 auto; padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 38px; }
.site-footer h4 { color: #fff; font-size: 0.93rem; margin-bottom: 13px; }
.site-footer a { color: rgba(232, 241, 236, 0.7); display: block; padding: 4px 0; font-size: 0.91rem; }
.site-footer a:hover { color: var(--brand-2); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.84rem;
}

/* ---------- Animationen ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.07s; } .reveal-d2 { transition-delay: 0.14s; } .reveal-d3 { transition-delay: 0.21s; }
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, #f2f6f3 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-md);
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .search-page { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
  .search-map-wrap { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .portal-shell { grid-template-columns: 1fr; }
  .portal-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .portal-nav button { white-space: nowrap; width: auto; }
  .portal-nav .pnav-link { white-space: nowrap; width: auto; }
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }
  .main-nav {
    position: fixed; top: var(--header-h); right: 0; left: 0;
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px);
    flex-direction: column; align-items: stretch; padding: 14px 5vw 22px; gap: 6px;
    box-shadow: var(--shadow-md); display: none;
  }
  .main-nav.open { display: flex; }
  .burger { display: block; margin-left: auto; }
  .result-grid { grid-template-columns: 1fr; }
  .pkg-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .gallery .g-main { border-radius: var(--r-lg); aspect-ratio: 4/2.6; }
  .gallery .g-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .gallery .g-side > div { border-radius: var(--r-md) !important; aspect-ratio: 4/2.6; }
  .hero-side { align-items: flex-end; padding-bottom: 18px; }
  .hero-card { width: 100%; }
  .hero-metrics { gap: 18px; }
  .search-row { flex-direction: column; }
  .segments { width: 100%; justify-content: stretch; }
  .segments button { flex: 1; padding: 9px 8px; }
}

/* =====================================================================
   Layout-Fix 2026-09-06 – kein horizontales Scrollen im Admin/Portal.
   Nur auf .portal-wrap beschraenkt (Admin + Anbieter-Portal); die
   oeffentliche Startseite (React-SPA) und inserat.php sind nicht betroffen.
   Tabellen behalten ihr eigenes Innen-Scrollen (.admin-table-wrap).
   ===================================================================== */
.portal-wrap { overflow-x: clip; }
.portal-wrap .container { max-width: 100%; }
/* Inline-Flex-Reihen (Button- und Feldgruppen) auf schmalen Breiten umbrechen,
   damit sie nicht abgeschnitten werden statt zu scrollen. */
.portal-wrap div[style*="display:flex"] { flex-wrap: wrap; }
/* Lange Woerter/URLs in Zellen und Karten nicht die Breite sprengen lassen. */
.portal-wrap td, .portal-wrap .feature-card { overflow-wrap: anywhere; }

/* =====================================================================
   Partnerhinweis im Inserat (Umzug / Endreinigung).
   Bewusst zurueckhaltend: kein Farbfeld, kein Schatten, keine Grafik -
   nur eine feine Linie. Der Hinweis soll als Dienst wirken, nicht als
   Banner, und darf das Inserat nicht ueberlagern.
   ===================================================================== */
.partner-box {
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
}
.partner-box b { display: block; margin-top: 6px; font-size: 1rem; }
.partner-box p { margin: 6px 0 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.partner-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px !important; }
.partner-links a { font-weight: 650; font-size: 0.9rem; color: var(--brand-dark); }
.partner-links a:hover { text-decoration: underline; }
.partner-tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.partner-mini {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 0.84rem; color: var(--ink-soft); line-height: 1.6;
}
.partner-mini .partner-tag { margin-right: 6px; }
.partner-mini a { font-weight: 650; color: var(--brand-dark); white-space: nowrap; }

/* Logo-Zeile im Partnerhinweis. Das Zeichen bleibt klein, die Wortmarke
   traegt die Hausfarbe von Offrendo - so ist erkennbar, wer dahintersteht,
   ohne dass der Kasten zur Werbeflaeche wird. */
.partner-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.partner-brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 0.98rem; letter-spacing: -0.02em;
  color: #16143f; text-decoration: none; white-space: nowrap;
}
.partner-brand img { width: 26px; height: 26px; display: block; }
.partner-brand:hover span { text-decoration: underline; }
.partner-mini-mark {
  width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px;
}

/* =====================================================================
   Galerie auf der Detailseite. Die Grossansicht selbst bringt ihre
   Gestaltung in lightbox.js mit, weil die Suchseite dieses Stylesheet
   gar nicht laedt.
   ===================================================================== */
.gallery { position: relative; }
.gallery-more {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(12, 20, 16, 0.78); color: #fff;
  font: inherit; font-size: 0.85rem; font-weight: 650;
  padding: 9px 16px; backdrop-filter: blur(4px);
}
.gallery-more:hover { background: rgba(12, 20, 16, 0.92); }
.gallery img { cursor: zoom-in; }
@media (max-width: 640px) {
  .gallery-more { right: 10px; bottom: 10px; font-size: 0.8rem; padding: 8px 13px; }
}

/* =====================================================================
   Feste Aktionsleiste am unteren Rand (nur Telefon).
   Sie sitzt ueber der Bedienleiste des Geraets und bleibt beim Scrollen
   stehen, damit Anfragen, Merken und Teilen immer einen Daumen entfernt
   sind. Am Rechner ist sie ueberfluessig: dort steht die Seitenspalte.
   ===================================================================== */
.nc-actionbar { display: none; }
@media (max-width: 860px) {
  .nc-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(12, 30, 22, 0.08);
  }
  .nc-ab-price { font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
  .nc-ab-price small { font-weight: 650; color: var(--ink-faint); }
  .nc-ab-btns { display: flex; align-items: center; gap: 8px; }
  .nc-ab-icon {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-soft); display: grid; place-items: center;
    cursor: pointer; padding: 0;
  }
  .nc-ab-icon.on { color: var(--danger); border-color: currentColor; }
  .nc-ab-main {
    border: 0; border-radius: 12px; background: var(--brand); color: #fff;
    font: inherit; font-weight: 700; padding: 0 20px; height: 44px; cursor: pointer;
  }
  .nc-ab-main:active { transform: scale(0.97); }
  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Admin und Anbieter-Portal (13.09.2026): volle Breite am Rechner,
   saubere Darstellung auf Tablet und Telefon.
   ===================================================================== */
.portal-wrap .container { width: min(1800px, 96vw); max-width: 100%; }
.portal-wrap .section { padding: clamp(24px, 3vw, 44px) 0; }
@media (min-width: 1081px) {
  /* Zwei Spalten nur am Rechner. Ohne diese Abfrage ueberschreibt die Regel
     die einspaltige Mobile-Regel weiter oben (gleiche Spezifitaet, spaeter
     im Quelltext) - die Navigationsspalte blieb dann auf dem Telefon stehen. */
  .portal-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
}
.portal-shell > * { min-width: 0; }
.portal-wrap .feature-card { min-width: 0; }
.admin-table-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }
.portal-wrap iframe { max-width: 100%; }
.portal-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .portal-wrap select, .portal-wrap textarea { max-width: 100%; }
@media (max-width: 1080px) {
  .portal-nav { margin: 0 0 14px; padding: 6px; border-radius: 12px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; }
  .portal-nav::-webkit-scrollbar { display: none; }
  .portal-nav button, .portal-nav .pnav-link { padding: 9px 12px; font-size: .88rem; scroll-snap-align: start; }
}
@media (max-width: 860px) {
  .portal-wrap .container { width: 100%; padding: 0 12px; }
  .portal-wrap h1 { font-size: 1.3rem !important; }
  .portal-wrap h2 { font-size: 1.1rem; }
  .portal-wrap .feature-card { padding: 14px 12px; border-radius: 12px; }
  .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; }
  .stat-tile { padding: 12px 12px; min-width: 0; }
  .stat-tile b { font-size: 1.25rem; overflow-wrap: anywhere; }
  .stat-tile span { font-size: .76rem; display: block; overflow-wrap: anywhere; hyphens: auto; }
  table.admin { min-width: 640px; }
  table.admin th, table.admin td { padding: 8px 10px; font-size: .84rem; }
  .portal-wrap .filter-row, .portal-wrap .crm-status { max-width: 100%; }
  .portal-wrap .btn { padding: 9px 12px; font-size: .88rem; }
  .portal-wrap .btn-sm { padding: 7px 10px; font-size: .82rem; }
  .portal-wrap .form-grid { grid-template-columns: 1fr !important; }
  .portal-wrap iframe { height: 420px !important; }
  .mylist-row { flex-wrap: wrap; }
  .mylist-row img { width: 100%; height: 150px; }
  .portal-wrap details summary { padding: 6px 0; }
}
@media (max-width: 480px) {
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .portal-wrap .container { padding: 0 8px; }
  .portal-wrap .feature-card { padding: 12px 10px; }
}

/* =====================================================================
   Kein seitliches Scrollen (13.09.2026). Tabellen passen sich der Breite
   an: Kopfzeilen und Zellen brechen an Wortgrenzen, lange Einzelwoerter
   (URLs, Kennungen) am Wortende. Auf dem Telefon werden Tabellen zu
   gestapelten Karten (Klasse .stack per admin.js, data-label je Zelle).
   ===================================================================== */
html, body { overflow-x: clip; max-width: 100vw; }
.portal-wrap .admin-table-wrap { overflow-x: clip; }
table.admin { min-width: 0 !important; width: 100%; table-layout: auto; }
.portal-wrap table.admin th, .portal-wrap table.admin td { overflow-wrap: break-word; word-break: normal; white-space: normal !important; hyphens: manual; }
.portal-wrap table.admin th { line-height: 1.25; }
.portal-wrap table.admin td { vertical-align: top; }
.portal-wrap table.admin code, .portal-wrap table.admin small { overflow-wrap: anywhere; }
.portal-wrap .feature-card, .portal-wrap td { overflow-wrap: break-word; }
@media (max-width: 860px) {
  table.admin.stack thead { display: none; }
  table.admin.stack, table.admin.stack tbody, table.admin.stack tr, table.admin.stack td { display: block; width: 100%; box-sizing: border-box; }
  table.admin.stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; background: #fff; }
  table.admin.stack td { border: 0; padding: 4px 0; }
  table.admin.stack td:empty { display: none; }
  table.admin.stack td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1px; }
  table.admin.stack td input.crm-status, table.admin.stack td select.crm-status { width: 100%; }
}

/* =====================================================================
   Admin und Anbieter-Portal auf dem Telefon (14.09.2026).
   Die Ansicht war zweispaltig geblieben; hier stehen die Regeln, die
   zuletzt gelten sollen - nach allen frueheren Bloecken.
   ===================================================================== */
@media (max-width: 1080px) {
  .portal-shell { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
  .portal-nav { position: sticky; top: var(--header-h); z-index: 20; background: var(--card);
    display: flex; overflow-x: auto; gap: 4px; width: 100%; }
}
@media (max-width: 860px) {
  /* Kopfzeile der Ansicht: Titel und Abmelden-Knopf nebeneinander, ohne
     dass der Knopf aus dem Bild laeuft. */
  .portal-wrap .container > div[style*="justify-content: space-between"],
  .portal-wrap .container > div[style*="justify-content:space-between"] { flex-wrap: wrap; gap: 10px; }
  .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .portal-wrap .feature-card > div[style*="display:flex"],
  .portal-wrap .feature-card > div[style*="display: flex"] { flex-wrap: wrap; }
  .portal-wrap pre { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 480px) {
  .stat-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-tile b { font-size: 1.15rem; }
}