:root{
  --coral:#F4552E;
  --coral-light:#FF7A5C;
  --teal:#1C7C74;
  --ink:#1C2B2A;
  --cream:#FFF7F2;
  --gray:#6B7472;
  --line:#E7E1DB;
  --radius:16px;
  --nav-h:64px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);background:var(--cream);}
h1,h2,h3,.brand{font-family:'Poppins',system-ui,sans-serif;}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:#fff;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;font-size:18px;}
.brand b{color:var(--coral);}
.brand-mark{width:30px;height:30px;}
.icon-btn{border:none;background:var(--cream);width:40px;height:40px;border-radius:50%;font-size:18px;}

/* ---------- Karte ---------- */
.map-wrap{position:fixed;top:56px;bottom:var(--nav-h);left:0;right:0;}
#map{width:100%;height:100%;}

.result-chip{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:#fff;padding:8px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.12);
  font-size:13px;font-weight:600;z-index:20;white-space:nowrap;
}

.fab-filter{
  position:absolute;bottom:16px;right:16px;z-index:20;
  background:var(--coral);color:#fff;border:none;padding:12px 18px;border-radius:999px;
  font-weight:600;font-size:14px;box-shadow:0 6px 18px rgba(244,85,46,.4);
}

/* ---------- Bottom Sheet ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.bottom-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-radius:20px 20px 0 0;padding:8px 20px 24px;
  max-height:80vh;overflow-y:auto;
  transform:translateY(100%);transition:transform .25s ease;
  box-shadow:0 -8px 30px rgba(0,0,0,.15);
}
.bottom-sheet.open{transform:translateY(0);}
.sheet-handle{width:40px;height:4px;background:var(--line);border-radius:4px;margin:8px auto 14px;}
.bottom-sheet h2{margin:0 0 12px;font-size:18px;}
.filter-group{margin-bottom:18px;}
.filter-label{display:block;font-size:13px;font-weight:600;color:var(--gray);margin-bottom:8px;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink);}
.chip.active{background:var(--teal);color:#fff;border-color:var(--teal);}
input[type=range]{width:100%;accent-color:var(--coral);}
.toggle-row{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:18px;}
.btn-primary{
  width:100%;background:var(--coral);color:#fff;border:none;padding:14px;border-radius:12px;
  font-weight:700;font-size:15px;
}

/* ---------- Ergebnisliste ---------- */
.result-list{
  position:fixed;left:0;right:0;bottom:var(--nav-h);top:56px;background:var(--cream);
  z-index:30;overflow-y:auto;padding:12px;display:none;
}
.result-list.open{display:block;}
.market-card{
  background:#fff;border-radius:var(--radius);padding:14px;margin-bottom:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--ink);
}
.market-card .badge{
  display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--teal);color:#fff;width:fit-content;
}
.market-card .badge.groesse-klein{background:#C9C2B8;color:var(--ink);}
.market-card .badge.groesse-gross{background:var(--coral);}
.market-card h3{margin:2px 0;font-size:16px;}
.market-card .meta{font-size:13px;color:var(--gray);}

/* ---------- Bottom Nav ---------- */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);z-index:40;
  background:#fff;border-top:1px solid var(--line);
  display:flex;justify-content:space-around;align-items:center;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:var(--gray);font-size:11px;font-weight:600;
}
.nav-item span{font-size:19px;}
.nav-item.active{color:var(--coral);}

/* ---------- Detailseite / Listing / Formular (Desktop + Mobile) ---------- */
.page{max-width:720px;margin:0 auto;padding:80px 18px 100px;}
.page h1{font-size:22px;}
.detail-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.detail-badge{background:var(--teal);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;}
.cta-row{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap;}
.cta-row a, .cta-row button{
  flex:1;min-width:140px;text-align:center;padding:12px;border-radius:12px;font-weight:700;font-size:14px;
  text-decoration:none;border:none;
}
.cta-primary{background:var(--coral);color:#fff;}
.cta-secondary{background:#fff;color:var(--ink);border:1px solid var(--line) !important;}

form.styled label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;}
form.styled input, form.styled textarea, form.styled select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;
}

@media (min-width:860px){
  .bottom-nav{display:none;}
  .result-list{bottom:0;}
  .map-wrap{bottom:0;}
  .fab-filter{bottom:24px;}
}

/* ===== Inhaltsseiten: Pfad, Zeitfilter, Trefferliste, Querverweise, Fußzeile ===== */

/* Der Kopf wird mit Pfadzeile hoeher. Auf Inhaltsseiten darf er mitscrollen,
   damit er nichts verdeckt; auf der Karte bleibt er fest stehen. */
.topbar { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
body:has(.page) .topbar { position: sticky; }
body:has(.page) { padding-top: 0; }
/* Rueckfalloption fuer Browser ohne :has - ausreichend Abstand nach oben */
.page { padding-top: 84px; }
body:has(.topbar:not(:has(.breadcrumb))) .page { padding-top: 16px; }

/* Pfadnavigation: dezent, einzeilig, scrollbar statt umbrechend */
.breadcrumb { flex-basis: 100%; order: 3; margin-top: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0 0 2px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; color: var(--gray);
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--line); font-size: 13px; }
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.page { padding: 16px 16px 40px; max-width: 760px; margin: 0 auto; }
.page h1 { font-family: Poppins, sans-serif; font-size: 26px; line-height: 1.2; margin: 14px 0 8px; color: var(--ink); }
.page .intro { color: var(--gray); font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.page .anzahl { font-size: 14px; color: var(--gray); margin: 0 0 12px; }
.page .anzahl strong { color: var(--ink); }

/* Zeitfilter als Pillen */
.zeitfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.zeitfilter .chip {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 500; text-decoration: none; line-height: 1;
}
.zeitfilter a.chip:hover { border-color: var(--teal); color: var(--teal); }
.zeitfilter .chip-aktiv { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }

/* Trefferliste ohne Aufzählungszeichen, Karten wie auf der Startseite */
.market-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.market-list > li { margin: 0; }
.page .market-card {
  display: block; position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(28,43,42,.04); transition: border-color .15s, box-shadow .15s;
}
.page .market-card:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(28,124,116,.10); }
.page .market-card h2 { font-family: Poppins, sans-serif; font-size: 17px; line-height: 1.3; margin: 8px 0 6px; color: var(--ink); }
.page .market-card .meta { display: block; font-size: 13.5px; color: var(--gray); line-height: 1.45; }
.page .market-card .badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; background: var(--teal); color: #fff;
}
.page .market-card .badge.groesse-gross { background: var(--coral); }
.page .market-card .badge.groesse-klein { background: #8AA6A2; }

/* Querverweise in die Umgebung */
.weiter { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.weiter h2 { font-family: Poppins, sans-serif; font-size: 18px; margin: 0 0 12px; color: var(--ink); }
.weiter p { color: var(--gray); font-size: 14.5px; line-height: 1.55; margin: 0; }
.weiter a { color: var(--teal); }
.linkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.linkliste li { margin: 0; }
.linkliste a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; text-decoration: none;
}
.linkliste a:hover { border-color: var(--teal); color: var(--teal); }
.linkliste .zahl { font-size: 11.5px; color: var(--gray); font-weight: 600; }

/* Fußzeile */
.sitefoot { border-top: 1px solid var(--line); background: #fff; padding: 22px 16px 34px; margin-top: 10px; }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 10px; }
.sitefoot a { color: var(--teal); font-size: 14px; text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; }
.sitefoot .klein { text-align: center; color: var(--gray); font-size: 12.5px; margin: 0; }

/* Auf größeren Bildschirmen etwas luftiger */
@media (min-width: 720px) {
  .page { padding: 22px 24px 56px; }
  .page h1 { font-size: 32px; }
  .market-list { grid-template-columns: 1fr 1fr; }
  .weiter { margin-top: 38px; }
}

/* Links im Fließtext im Markenton statt Browser-Blau */
.page a, .weiter a, .sitefoot a { color: var(--teal); }
.page a:hover { color: var(--coral); }
.page .market-card { color: inherit; }
.page p a { text-decoration: underline; text-underline-offset: 2px; }

/* Startseite: Karte als Kopfbereich mit fester Höhe, darunter lesbarer Inhalt */
body:has(.startseite) .map-wrap { position: relative; top: 0; bottom: auto; height: 62vh; min-height: 320px; }
body:has(.startseite) .bottom-nav { position: sticky; }
.startseite { padding-top: 22px; }
.startseite h1 { margin-top: 0; }
.startseite h3 { font-family: Poppins, sans-serif; font-size: 16px; margin: 8px 0 6px; color: var(--ink); }
.schritte { margin: 0; padding-left: 20px; color: var(--gray); font-size: 14.5px; line-height: 1.65; }
.schritte li { margin-bottom: 8px; }
.schritte b { color: var(--ink); }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 14px; margin-bottom: 8px; }
.faq summary { font-weight: 600; cursor: pointer; color: var(--ink); font-size: 15px; }
.faq details p { margin: 10px 0 0; color: var(--gray); font-size: 14.5px; line-height: 1.6; }

/* Rechtstexte: ruhig und gut lesbar */
.rechtstext h2 { font-family: Poppins, sans-serif; font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.rechtstext p { color: #3A4746; font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.rechtstext .stand { color: var(--gray); font-size: 13.5px; }


/* ===== Neuer Aufbau: Karte oben, darunter Suche, Filter und Treffer ===== */

/* Der Kopf mit Logo liegt immer ueber der Karte. Leaflet nutzt bis 1000, deshalb hoeher. */
.topbar { position: sticky; top: 0; z-index: 1200; height: auto; min-height: 56px;
  padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }

/* Karte als Kopfbereich mit fester Hoehe statt Vollbild */
.karte-kopf { position: relative; height: 46vh; min-height: 280px; max-height: 520px;
  border-bottom: 1px solid var(--line); z-index: 1; }
.karte-kopf #map { position: absolute; inset: 0; }
.leaflet-container { z-index: 1; }
.leaflet-top, .leaflet-bottom { z-index: 400; }

/* Die alte Vollbildkarte, der Filterknopf und die Schublade entfallen */
.map-wrap, .fab-filter, .bottom-sheet, .sheet-backdrop, .bottom-nav, .result-chip { display: none !important; }

.page { padding-top: 20px; }
.startseite h1 { margin-top: 4px; }

/* Suche */
.suche { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.suche input[type="text"] {
  flex: 1 1 220px; min-width: 0; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
.suche input[type="text"]:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.suche .btn-primary { padding: 12px 20px; border-radius: 12px; border: none;
  background: var(--coral); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.suche .btn-primary:hover { background: #e04824; }
.btn-standort { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: #fff; color: var(--teal); font-weight: 600; font-size: 15px; cursor: pointer; }
.btn-standort:hover { border-color: var(--teal); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Filter direkt auf der Seite */
.filterblock { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 14px 0 22px; }
.filter-zeile { margin-bottom: 14px; }
.filter-zeile:last-of-type { margin-bottom: 0; }
.filter-titel { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.filterblock .chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.filterblock .chip { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; line-height: 1; }
.filterblock .chip:hover { border-color: var(--teal); color: var(--teal); }
.filterblock .chip.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.umkreis-zeile input[type="range"] { width: 100%; accent-color: var(--teal); }
.toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: 14.5px; color: var(--ink); cursor: pointer; }
.toggle-row input { accent-color: var(--teal); width: 18px; height: 18px; }

/* Trefferliste */
.treffer-titel { font-family: Poppins, sans-serif; font-size: 18px; margin: 4px 0 12px; color: var(--ink); }
/* Die Ergebnisliste war frueher eine Vollbild-Schublade (position:fixed).
   Hier steht sie normal im Textfluss unter den Filtern. */
.result-list, .result-list.open {
  position: static; inset: auto; top: auto; bottom: auto; left: auto; right: auto;
  z-index: auto; overflow: visible; background: transparent; padding: 0;
  display: grid; gap: 12px; margin-bottom: 8px;
}
.result-list .market-card { display: block; position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  text-decoration: none; color: inherit; }
.result-list .market-card:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(28,124,116,.10); }
.result-list .market-card h3 { font-family: Poppins, sans-serif; font-size: 16px; margin: 8px 0 6px; }
.result-list .market-card .meta { display: block; font-size: 13.5px; color: var(--gray); line-height: 1.45; }

/* Groesse zeigt sich am Punkt auf der Karte, das Schild bleibt dezent und einfarbig */
.badge, .page .market-card .badge, .result-list .badge {
  background: var(--teal); color: #fff; }
.badge.groesse-gross, .page .market-card .badge.groesse-gross { background: var(--coral); }
.badge.groesse-klein, .page .market-card .badge.groesse-klein { background: #6E8F8A; }

@media (min-width: 720px) {
  .karte-kopf { height: 52vh; max-height: 560px; }
  .result-list { grid-template-columns: 1fr 1fr; }
}

/* --- Filterblock: wann / wo / wie weit ------------------------------- */
.filterblock .filter-zeile { margin-bottom: 18px; }
.filterblock .filter-titel {
  display: block; font-weight: 700; font-size: .95rem;
  margin-bottom: 8px; color: #1C2321;
}
.filterblock .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filterblock .suche { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.filterblock .suche input[type="text"] {
  flex: 1 1 240px; min-width: 0; padding: 11px 14px;
  border: 1px solid #D9D4CE; border-radius: 10px; font-size: 1rem; background: #fff;
}
.filterblock .suche input[type="text"]:focus { outline: 2px solid #F4552E; outline-offset: 1px; }
.hinweis-standort { margin: 8px 0 0; font-size: .85rem; color: #6B7472; }
.umkreis-zeile[hidden] { display: none; }
.umkreis-zeile input[type="range"] { width: 100%; max-width: 420px; accent-color: #F4552E; }
.btn-standort {
  padding: 11px 14px; border: 1px solid #D9D4CE; border-radius: 10px;
  background: #fff; cursor: pointer; font-size: .95rem; white-space: nowrap;
}
.btn-standort:hover { border-color: #F4552E; color: #F4552E; }

/* Die Suchzeile steht in einer Reihe, der alte Vollbreit-Knopf gilt hier nicht. */
.filterblock .suche { align-items: center; }
.filterblock .suche .btn-primary { width: auto; flex: 0 0 auto; padding: 12px 22px; }
.filterblock .suche .btn-standort { flex: 0 0 auto; }
.treffer-titel { font-family: Poppins, sans-serif; font-size: 18px; margin: 18px 0 10px; }
.mehr-hinweis { font-size: 14px; color: var(--gray); margin: 10px 0 0; }