/* ===== flaechenpilot.eu — Plattform-Ergänzungen (zu styles.css) ===== */

/* ---- header extras: search-link state + merkliste + login ---- */
.header-actions .icon-btn{position:relative; display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font:inherit; color:var(--ink-soft); font-weight:500; font-size:.9rem}
.header-actions .icon-btn:hover{color:var(--green-d)}
.merk-count{position:absolute; top:-8px; right:-10px; background:var(--green); color:#1c1c1c; font-size:.66rem; font-weight:700; min-width:17px; height:17px; border-radius:9px; display:none; align-items:center; justify-content:center; padding:0 4px}
.merk-count.show{display:inline-flex}

/* ---- platform hero + search widget ---- */
.phero{position:relative; color:var(--ink); overflow:hidden; min-height:72vh; display:flex; align-items:center}
.phero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phero-scrim{position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.80) 42%, rgba(244,245,240,.35) 100%)}
.phero-inner{position:relative; padding:64px 0; max-width:820px}
.phero h1{font-size:clamp(2.3rem,5.4vw,4rem); margin:.4rem 0 1rem}
.phero p.lede{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink-soft); max-width:560px; margin-bottom:2rem}

.searchbar{background:#fff; border-radius:16px; padding:14px; display:flex; flex-wrap:wrap; gap:12px; align-items:end; box-shadow:var(--shadow-h); max-width:880px}
.searchbar .sb-field{display:flex; flex-direction:column; gap:6px; flex:1 1 180px}
.searchbar label{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.searchbar select, .searchbar input{font:inherit; font-size:.95rem; border:1px solid var(--line); border-radius:10px; padding:12px 13px; color:var(--ink); background:#fff}
.searchbar select:focus, .searchbar input:focus{outline:none; border-color:var(--green)}
.searchbar .btn{flex:0 0 auto; height:46px}

/* ---- value props (home) ---- */
.pvalues{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px}
.pvalue{padding:8px 4px}
.pvalue .lever-mark{width:42px;height:5px;border-radius:3px;background:var(--green);margin-bottom:16px}
.pvalue h3{font-size:1.2rem; margin-bottom:8px}
.pvalue p{color:var(--ink-soft); font-size:.96rem}

/* ============ DATENBANK (flaechen.html) ============ */
.db-topbar{background:var(--tint); padding:22px 0}
.db-search{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.db-search input, .db-search select{font:inherit; font-size:.92rem; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:11px 13px}
.db-search input::placeholder{color:var(--muted)}
.db-search input[type=text]{flex:1 1 260px}
.db-search .btn{flex:0 0 auto}

.db-layout{display:grid; grid-template-columns:288px 1fr; gap:30px; padding:34px 0 80px; align-items:start}
.filters{position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--radius); padding:6px 20px 20px; background:#fff; max-height:calc(100vh - 120px); overflow:auto}
.filter-group{padding:18px 0; border-bottom:1px solid var(--line)}
.filter-group:last-child{border-bottom:none}
.filter-group h4{font-family:var(--body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:12px}
.check{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:.92rem; color:var(--ink-soft); cursor:pointer}
.check input{accent-color:var(--green); width:16px; height:16px}
.filter-row{display:flex; gap:10px}
.filter-row input, .filter-group select{font:inherit; font-size:.9rem; border:1px solid var(--line); border-radius:8px; padding:9px 10px; width:100%; color:var(--ink)}
.filters-reset{margin-top:14px; width:100%; background:none; border:1px solid var(--line); border-radius:999px; padding:10px; font:inherit; font-weight:600; font-size:.85rem; color:var(--muted); cursor:pointer}
.filters-reset:hover{border-color:var(--green); color:var(--green-d)}

.results-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.results-count{font-weight:600; color:var(--ink)}
.results-tools{display:flex; gap:10px; align-items:center}
.results-tools select{font:inherit; font-size:.9rem; border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:#fff; color:var(--ink)}
.view-toggle{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.view-toggle button{border:none; background:#fff; padding:9px 14px; font:inherit; font-size:.85rem; font-weight:600; color:var(--muted); cursor:pointer}
.view-toggle button.active{background:var(--green-deep); color:#fff}

.db-map{height:560px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-bottom:24px; display:none}
.db-map.show{display:block}
.db-results.with-map{display:grid}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:22px}
.fl-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column}
.fl-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-h)}
.fl-card .fc-media{position:relative; aspect-ratio:16/11; overflow:hidden}
.fl-card .fc-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.fl-card:hover .fc-media img{transform:scale(1.05)}
.fc-badges{position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:6px}
.badge{background:rgba(28,28,28,.82); color:#fff; font-size:.68rem; font-weight:600; padding:4px 9px; border-radius:999px; letter-spacing:.02em}
.badge.green{background:var(--green); color:#1c1c1c}
.fc-merk{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.9); cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.fc-merk.on{background:var(--green); color:#1c1c1c}
.fl-card .fc-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.fl-card h3{font-size:1.08rem}
.fc-loc{font-size:.86rem; color:var(--muted)}
.fc-facts{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.82rem; color:var(--ink-soft); margin-top:2px}
.fc-facts span{display:inline-flex; align-items:center; gap:5px}
.fc-foot{margin-top:auto; padding-top:12px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.fc-price{font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink)}
.fc-price small{font-family:var(--body); font-weight:500; color:var(--muted); font-size:.72rem}
.fc-cta{font-weight:600; font-size:.86rem; color:var(--green-d)}
.no-results{padding:60px 20px; text-align:center; color:var(--muted)}

/* ============ DETAIL (flaeche.html) ============ */
.detail-head{display:grid; grid-template-columns:1.4fr 1fr; gap:8px; margin-top:18px}
.detail-hero{aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden}
.detail-hero img{width:100%; height:100%; object-fit:cover}
.detail-side{display:flex; flex-direction:column; gap:8px}
.detail-side img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius); flex:1; min-height:0}
.detail-wrap{display:grid; grid-template-columns:1.7fr 1fr; gap:40px; padding-top:30px; align-items:start}
.detail-main .badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.detail-main h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.detail-loc{color:var(--muted); margin:6px 0 22px; font-size:1rem}
.facts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:28px}
.fact{background:#fff; padding:16px 18px}
.fact dt{font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.fact dd{margin:0; font-weight:600; font-size:1.02rem}
.detail-main h2{font-size:1.3rem; margin:26px 0 10px}
.detail-main p{color:var(--ink-soft)}
.equip{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:10px}
.equip li{background:var(--tint); color:var(--green-deep); font-weight:600; font-size:.85rem; padding:8px 14px; border-radius:999px}
.detail-mini-map{height:300px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-top:14px}

.book-card{position:sticky; top:96px; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow-h); background:#fff}
.book-price{font-family:var(--display); font-weight:800; font-size:2rem; color:var(--ink)}
.book-price small{font-family:var(--body); font-weight:500; font-size:.85rem; color:var(--muted)}
.book-rows{margin:18px 0; font-size:.9rem}
.book-rows div{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.book-modell{display:inline-block; margin-top:4px; background:var(--tint); color:var(--green-deep); font-weight:600; font-size:.8rem; padding:5px 12px; border-radius:999px}
.book-form{display:flex; flex-direction:column; gap:12px; margin-top:18px}
.book-form input, .book-form textarea{font:inherit; font-size:.92rem; border:1px solid var(--line); border-radius:10px; padding:11px 13px; color:var(--ink); background:#fff}
.book-form input:focus, .book-form textarea:focus{outline:none; border-color:var(--green)}
.book-actions{display:flex; gap:10px; margin-top:4px}
.book-actions .btn{flex:1}
.btn-outline{background:none; border:2px solid var(--ink); color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:#fff}
.btn-outline.on{background:var(--green); border-color:var(--green); color:#1c1c1c}
.similar{padding-top:10px}
.back-link{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-weight:600; font-size:.9rem; margin-top:8px}
.back-link:hover{color:var(--green-d)}

/* ---- how-it-works mini (home) ---- */
.hiw{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.hiw-col h3{font-size:1.25rem; margin-bottom:14px}
.hiw-steps{list-style:none; padding:0; margin:0; counter-reset:h}
.hiw-steps li{counter-increment:h; position:relative; padding:10px 0 10px 42px; color:var(--ink-soft)}
.hiw-steps li::before{content:counter(h); position:absolute; left:0; top:8px; width:28px; height:28px; border-radius:50%; background:var(--green); color:#1c1c1c; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center; font-family:var(--display)}

/* ---- responsive ---- */
@media (max-width:900px){
  .db-layout{grid-template-columns:1fr}
  .filters{position:static; max-height:none}
  .pvalues, .hiw{grid-template-columns:1fr}
  .detail-head{grid-template-columns:1fr}
  .detail-side{flex-direction:row}
  .detail-wrap{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .book-card{position:static}
}
@media (max-width:560px){
  .facts-grid{grid-template-columns:1fr}
  .searchbar .sb-field{flex-basis:100%}
}

/* --- Sicherheitsfrage und Datenschutzhinweis im Buchungsformular --- */
.book-captcha{margin-top:4px}
.book-captcha label{display:block; font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:4px}
.book-captcha .captcha-question{display:inline-block; font-weight:700; color:var(--green-deep); margin-bottom:6px; font-size:.9rem}
.book-privacy{margin:10px 0 2px; font-size:.76rem; line-height:1.5; color:var(--muted)}
.book-privacy a{color:inherit; text-decoration:underline}