/* ===== RaumGuru Theme – hell, warm, SVG-optimiert ===== */

:root{
  --brand:   #FFD166;   /* Hauptfarbe */
  --brand-600:#FFC54A;
  --accent:  #FF8C42;   /* Akzent (Buttons) */
  --ink:     #1f2937;
  --muted:   #6b7280;
  --bg:      #fffefc;
  --card:    #ffffff;
  --line:    #f1f2f4;
  --ring:    rgba(255,173,66,.28);

  --radius:  16px;
  --shadow:  0 10px 28px rgba(17,17,17,.06), 0 4px 12px rgba(17,17,17,.05);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 800px at 100% -10%, rgba(255,209,102,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 0%, rgba(255,140,66,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
}
img{ max-width:100%; display:block; }
a{ color:#c05a00; text-decoration:none; }
a:hover{ color:#a94f00; text-decoration:underline; }
.wrap{ width:min(1120px,92%); margin:0 auto; }

/* ===== HEADER ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:16px;padding:10px 0;}
.logo{height:50px;width:auto;}
.mainnav{margin-left:auto;display:flex;gap:18px;align-items:center;}
.mainnav a{padding:10px 12px;border-radius:12px;font-weight:600;color:#374151;}
.mainnav a:hover{background:var(--line);}
.menu-toggle{display:none;margin-left:8px;background:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:12px;}
.menu-toggle span{display:block;height:2px;background:#424e5a;margin:8px 10px;border-radius:2px;transition:.25s;}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(10px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-10px) rotate(-45deg);}
.mobilenav{display:none;border-bottom:1px solid var(--line);background:var(--card);}
.mobilenav a{display:block;padding:12px 4%;border-top:1px solid var(--line);}
.mobilenav .btn{margin:10px 4%;display:inline-block;}

/* ===== FOOTER ===== */
.sitefooter{margin-top:28px;border-top:1px solid var(--line);background:var(--card);}
.sitefooter .wrap{padding:26px 0;}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;}
.copy{margin-top:12px;text-align:center;}

/* ===== UI ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.alert{background:color-mix(in srgb,var(--brand) 18%,var(--card));border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);border-radius:var(--radius);padding:12px 14px;margin:10px 0;}
.btn{display:inline-block;border:0;cursor:pointer;color:#1b2735;background:linear-gradient(180deg,var(--brand),var(--brand-600));padding:11px 16px;border-radius:14px;font-weight:800;box-shadow:0 8px 22px rgba(255,209,102,.35);}
.btn:hover{filter:brightness(1.03);}
.btn-ghost{background:transparent;color:#a04a00;border:1px solid #ffbf47;padding:10px 14px;border-radius:12px;font-weight:700;}
.btn-ghost:hover{background:color-mix(in srgb,var(--brand) 18%,transparent);}
label{display:block;font-weight:700;margin-bottom:8px;color:#2d3748;}
label input,label select,label textarea{margin-top:6px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 5px var(--ring);border-color:var(--accent);}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;}
.tbl tr:hover td{background:color-mix(in srgb,var(--brand) 8%,transparent);}
.muted{color:var(--muted);}
@media(max-width:900px){.mainnav{display:none}.menu-toggle{display:block}.mobilenav[hidden]{display:none}.mobilenav{display:block}.footgrid{grid-template-columns:1fr;}}

/* ====== Illustrations / Hero / Frames – SVG ====== */
.hero{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;margin-bottom:16px;}
.hero-media{position:relative;height:clamp(240px,38vw,420px);background:center/cover no-repeat url('/assets/illust/map.png');}
@media(max-width:640px){.hero-media{background-image:url('/assets/illust/map_320.png');}}
@supports (background: url('/assets/illust/map.svg')) {
  .hero-media{background-image:url('/assets/illust/map.svg');}
  @media(max-width:640px){.hero-media{background-image:url('/assets/illust/map_320.svg');}}
}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,209,102,.25) 0%,rgba(255,140,66,.20) 55%,rgba(255,209,102,.10) 100%);pointer-events:none;}
.hero-content{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(14px,4vw,28px);}
.hero-title{background:color-mix(in srgb,#fff 92%,transparent);border:1px solid var(--line);backdrop-filter:blur(6px);padding:10px 14px;border-radius:12px;font-size:clamp(18px,3vw,28px);font-weight:800;color:#3a3a3a;box-shadow:0 8px 24px rgba(0,0,0,.06);}
.page-illustration::before{content:"";position:absolute;inset:-40px 0 auto 0;height:clamp(140px,22vw,260px);background:url('/assets/illust/city_illustration.svg') center top/cover no-repeat;opacity:.28;pointer-events:none;}
.page-illustration::after{content:"";position:absolute;inset:auto 0 -60px 0;height:clamp(120px,18vw,220px);background:url('/assets/illust/thanks.svg') center bottom/cover no-repeat;opacity:.20;pointer-events:none;}
.section-framed{position:relative;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);}
.section-framed::after{content:"";position:absolute;inset:0;background:url('/assets/illust/frame.svg') center/cover no-repeat;opacity:.25;pointer-events:none;border-radius:inherit;}
#map{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;}
.decor-bottom::before,.decor-bottom::after{content:"";position:absolute;bottom:-24px;width:40%;height:110px;background-size:cover;background-repeat:no-repeat;opacity:.22;pointer-events:none;}
.decor-bottom::before{left:-10px;background-image:url('/assets/illust/third_left.svg');background-position:left bottom;}
.decor-bottom::after{right:-10px;background-image:url('/assets/illust/third_right.svg');background-position:right bottom;}
/* Such-Liste (Karten + Liste) */
.rg-result + .rg-result{ margin-top:10px; }
.rg-result-grid{ display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:start; }
.rg-thumb{ width:140px; height:100px; border-radius:12px; overflow:hidden; background:#f2f2f2; }
.rg-thumb img{ width:100%; height:100%; object-fit:cover; }
.rg-thumb.ph{ background:linear-gradient(135deg,#f6f6f6,#efefef); }
.rg-title{ font-weight:800; margin-bottom:2px; }
.rg-meta{ margin-top:4px; font-size:.95em; color:#414b57; }
.rg-badges{ margin-top:6px; }

/* Leaflet – RaumGuru Stil */
.rg-map .leaflet-control-zoom a{
  background:#fff; border:1px solid var(--line); color:#333; box-shadow:var(--shadow);
}
.rg-map .leaflet-control-zoom a:hover{ background:color-mix(in srgb,var(--brand) 14%, #fff); }
.rg-map .leaflet-pane .leaflet-marker-icon{ transition: transform .08s ease; }
.rg-map .leaflet-pane .leaflet-marker-icon:hover{ transform: translateY(-1px) scale(1.02); }

/* gradient overlay für Karte */
.rg-map-overlay{
  width:180px; height:120px;
  background: radial-gradient(120px 80px at 0% 0%, rgba(255,209,102,.22), transparent 65%);
  border-radius: 0 0 14px 0;
  pointer-events:none;
}

/* Responsive: Liste über Karte */
@media (max-width: 900px){
  .rg-result-grid{ grid-template-columns:100px 1fr; }
}
/* Hero: farbige Fläche + Bild-Kasten */
.hero.hero--solid{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 70%, #fff) 0%,
    color-mix(in srgb, var(--brand) 35%, #fff) 100%);
  border-bottom:1px solid var(--line);
}
.hero-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
  padding: clamp(18px, 5vw, 36px) 0;
}
.hero-title{
  font-size: clamp(20px, 3.2vw, 30px);
  font-weight: 900; letter-spacing:.2px; color:#3a3a3a;
}
.hero-sub{ margin:.25rem 0 0; color:#5b6470; }
.hero-right{ display:flex; justify-content:flex-end; align-items:center; }
.hero-figure{
  margin:0; padding:0;
  width:min(520px, 92%); aspect-ratio: 16/10;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow: var(--shadow); overflow:hidden;
}
.hero-figure img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Karte eingerahmt (wie zuvor) */
.map-wrap{
  margin: 16px 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Responsive */
@media (max-width: 900px){
  .hero-wrap{ grid-template-columns: 1fr; }
  .hero-right{ justify-content:flex-start; }
  .hero-figure{ width:100%; }
}