:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFF3D6; --surface-3:#271305;
  --text:#271305; --text-2:#7C6653; --text-invert:#FFF8EC;
  --border:#F3E3C2;
  --accent:#E63A22; --accent-strong:#B92C18; --accent-soft:#FCE0D8;
  --yellow:#FFC530; --yellow-strong:#E4A300; --yellow-soft:#FFF2C6;
  --danger:#B3261E;
  --shadow:0 10px 26px rgba(39,19,5,.14);
  --shadow-lg:0 20px 48px rgba(39,19,5,.20);
  --map-ground:#FBF3E1; --map-road:#FFFFFF; --map-edge:#EAD9B7; --map-block:#D9EAC7; --map-water:#CFE6EF; --origin:#20303F;
  --overlay-bg:rgba(255,255,255,.86);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1C0F07; --surface:#27160A; --surface-2:#331A09;
    --text:#FFF3E1; --text-2:#D8B79A;
    --border:#3D2410;
    --accent:#FF6A48; --accent-strong:#FF8D6E; --accent-soft:#3B1C10;
    --yellow:#FFD65C; --yellow-strong:#FFE28A; --yellow-soft:#3B2C0A;
    --danger:#FF8A80;
    --shadow:0 12px 30px rgba(0,0,0,.5); --shadow-lg:0 20px 55px rgba(0,0,0,.6);
    --map-ground:#20140A; --map-road:#2D1C0E; --map-edge:#170D05; --map-block:#233B22; --map-water:#1C3440; --origin:#FFD65C;
    --overlay-bg:rgba(28,15,7,.86);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1C0F07; --surface:#27160A; --surface-2:#331A09;
  --text:#FFF3E1; --text-2:#D8B79A;
  --border:#3D2410;
  --accent:#FF6A48; --accent-strong:#FF8D6E; --accent-soft:#3B1C10;
  --yellow:#FFD65C; --yellow-strong:#FFE28A; --yellow-soft:#3B2C0A;
  --danger:#FF8A80;
  --shadow:0 12px 30px rgba(0,0,0,.5); --shadow-lg:0 20px 55px rgba(0,0,0,.6);
  --map-ground:#20140A; --map-road:#2D1C0E; --map-edge:#170D05; --map-block:#233B22; --map-water:#1C3440; --origin:#FFD65C;
  --overlay-bg:rgba(28,15,7,.86);
  color-scheme:dark;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'DM Sans',system-ui,sans-serif;}
h1,h2,h3{font-family:'Baloo 2',Georgia,serif; margin:0; font-weight:700; letter-spacing:-0.01em;}
.h2{font-size:clamp(24px,3.6vw,34px);}
.bunting{width:100%; height:30px; overflow:hidden; line-height:0;}
.bunting svg{display:block; width:100%; height:100%;}
@media (prefers-reduced-motion:no-preference){
  .btn, .step, .reg-card, .privacy-card{transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-2px);}
  .step:hover, .reg-card:hover, .privacy-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
}
a{color:var(--accent);}
button{font-family:inherit;}
img{max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px;}
section{padding-block:72px;}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:10px;}
.lede{font-size:16px; color:var(--text-2); line-height:1.6; max-width:640px;}
.btn{border:0; border-radius:999px; height:52px; padding:0 26px; font-weight:700; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-strong);}
.btn-outline{background:transparent; border:2px solid var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn:focus-visible{outline:3px solid var(--origin); outline-offset:2px;}
.btn:disabled{opacity:.6; cursor:not-allowed;}

/* header */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; padding-block:0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);}
.brand-mark{width:36px; height:36px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-size:15.5px; font-weight:800;}
.brand-text span{font-size:11.5px; color:var(--text-2);}
.nav-links{display:none; align-items:center; gap:28px; font-size:14.5px; font-weight:600;}
.nav-links a{color:var(--text); text-decoration:none; position:relative; padding:6px 14px; margin:-6px -14px; border-radius:999px; display:inline-block;}
.nav-links a::after{content:''; position:absolute; inset:0; border-radius:999px; border:2px solid var(--accent); opacity:0; transform:scale(.82); transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); pointer-events:none;}
.nav-links a:hover{color:var(--accent);}
.nav-links a:hover::after, .nav-links a:focus-visible::after{opacity:1; transform:scale(1);}
@media (min-width:860px){ .nav-links{display:flex;} }
@media (prefers-reduced-motion:no-preference){
  .nav-links a{animation:navIn .5s ease both;}
  .nav-links a:nth-child(1){animation-delay:.04s;}
  .nav-links a:nth-child(2){animation-delay:.11s;}
  .nav-links a:nth-child(3){animation-delay:.18s;}
  .nav-links a:nth-child(4){animation-delay:.25s;}
}
@keyframes navIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.nav-links a.nav-admin, .footer-links a:last-child, .nav-mobile a.nav-admin{color:var(--text-2); font-size:13px;}
.nav-links a.nav-admin{margin-left:6px; padding-left:16px; border-left:1px solid var(--border);}
.nav-links a.nav-admin:hover{color:var(--accent);}

/* mobiles Hamburger-Menü */
.nav-right{display:flex; align-items:center; gap:10px;}

.theme-toggle{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; cursor:pointer; padding:0; flex:0 0 auto;}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent);}
.theme-toggle:focus-visible{outline:3px solid var(--origin); outline-offset:2px;}

.nav-toggle{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:42px; height:42px; border:0; background:transparent; border-radius:10px; cursor:pointer; padding:0; flex:0 0 auto;}
.nav-toggle:hover{background:var(--surface-2);}
.nav-toggle:focus-visible{outline:3px solid var(--origin); outline-offset:2px;}
.nav-toggle-bar{width:22px; height:2.5px; border-radius:2px; background:var(--text); transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
@media (min-width:860px){ .nav-toggle{display:none;} }

.nav-mobile{display:flex; flex-direction:column; padding:4px 24px 18px; border-top:1px solid var(--border); background:var(--bg);}
.nav-mobile a{padding:13px 2px; color:var(--text); text-decoration:none; font-weight:600; font-size:15.5px; border-bottom:1px solid var(--border);}
.nav-mobile a:last-child{border-bottom:0;}
.nav-mobile a:hover{color:var(--accent);}
@media (min-width:860px){ .nav-mobile{display:none !important;} }
@media (max-width:859px){ .nav-mobile[hidden]{display:none;} }

/* hero */
.hero{padding-block:64px 56px;}
.hero .wrap{display:grid; grid-template-columns:1fr; gap:40px; align-items:center;}
.hero h1{font-size:clamp(34px,6vw,58px); line-height:1.04;}
.hero h1 em{font-style:normal; display:inline-block; background:var(--yellow); color:var(--accent-strong); padding:2px 12px; border-radius:10px; transform:rotate(-1deg);}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.stat-row{display:flex; gap:28px; margin-top:36px; flex-wrap:wrap;}
.stat b{display:block; font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; font-family:'Baloo 2',serif;}
.stat span{font-size:12.5px; color:var(--text-2); font-weight:600;}
.hero-art{position:relative;}
.hero-card{background:var(--surface); border-radius:26px; box-shadow:var(--shadow-lg); padding:18px; border:1px solid var(--border);}
.hero-card svg{display:block; width:100%; height:auto; border-radius:16px;}
@media (min-width:960px){ .hero .wrap{grid-template-columns:1.05fr .95fr; gap:56px;} }

/* how it works */
.how{background:var(--surface-2);}
.how-head{max-width:640px; margin-bottom:40px;}
.steps{display:grid; grid-template-columns:1fr; gap:20px;}
.step{background:var(--surface); border-radius:20px; padding:26px; border:1px solid var(--border);}
.step .num{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:16px;}
.step h3{font-size:19px; font-weight:700; margin-bottom:8px;}
.step p{font-size:14px; color:var(--text-2); line-height:1.55; margin:0;}
@media (min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);} }

/* map section */
.toolbar{display:flex; flex-direction:column; gap:14px; margin-bottom:22px;}
.searchbar-wrap{position:relative; max-width:420px;}
.searchbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0 16px; height:50px; box-shadow:var(--shadow);}
.searchbar svg{flex:0 0 auto; color:var(--text-2);}
.searchbar input{flex:1; border:0; outline:0; background:transparent; color:var(--text); font-size:15px; height:100%; font-family:inherit;}
.search-suggest{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20; margin:0; padding:6px; list-style:none; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); max-height:280px; overflow-y:auto;}
.search-suggest li{margin:0;}
.search-suggest button{display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; border:0; background:transparent; color:var(--text); font-family:inherit; font-size:13.5px; padding:9px 10px; border-radius:9px; cursor:pointer;}
.search-suggest button:hover, .search-suggest button.active{background:var(--surface-2);}
.search-suggest .sugg-main b{font-weight:800;}
.search-suggest .sugg-type{color:var(--text-2); font-size:11.5px; margin-left:auto; flex:0 0 auto;}
.cat-toggle-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); height:42px; padding:0 16px; border-radius:14px; font-size:13.5px; font-weight:700; cursor:pointer; align-self:flex-start;}
.cat-toggle-btn:hover{border-color:var(--accent); color:var(--accent);}
.cat-toggle-btn svg{transition:transform .2s ease; flex:0 0 auto;}
.cat-toggle-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{border:1px solid var(--border); background:var(--surface); color:var(--text); height:38px; padding:0 15px; border-radius:19px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
.chip .dot{width:9px; height:9px; border-radius:50%;}
.chip[aria-pressed="true"]{background:var(--dc,var(--accent)); border-color:transparent; color:#fff;}
.chip[aria-pressed="true"] .dot{background:#fff;}
.chip-all[aria-pressed="true"]{background:var(--accent-strong); color:#fff;}

.map-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media (min-width:980px){ .map-grid{grid-template-columns:1.35fr .9fr; align-items:start;} }
/* Hinweis: die Höhenangleichung von Liste an Karte passiert per JS (syncSidepanelHeight() in
   app.js), NICHT per CSS align-items:stretch – sonst würde eine lange Standliste (viele Einträge)
   umgekehrt die Zeilenhöhe des Grids und damit auch die Karte selbst nach oben aufblähen. */
.mapcanvas{position:relative; width:100%; aspect-ratio:4/3.1; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--map-ground); border:1px solid var(--border);}
#leafletMap{position:absolute; inset:0; width:100%; height:100%;}

.fullscreen-btn{position:absolute; top:12px; right:12px; z-index:410; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface); color:var(--text); height:38px; padding:0 13px; border-radius:12px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:var(--shadow);}
.fullscreen-btn:hover{border-color:var(--accent); color:var(--accent);}

body.map-fullscreen-active{overflow:hidden;}
.map-grid.is-fullscreen{position:fixed; inset:0; z-index:1000; margin:0; max-width:none; width:100vw; height:100vh; padding:0; background:var(--bg); display:block; overflow:hidden;}
.map-grid.is-fullscreen .mapcanvas{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; border:0; box-shadow:none;}
.map-grid.is-fullscreen .fullscreen-btn{top:86px; right:auto; left:16px;}

/* Im Vollbild schwebt das Panel schmal und halbtransparent über der Karte, statt eine feste Spalte einzunehmen. */
.map-grid.is-fullscreen .sidepanel{
  position:absolute; top:16px; right:16px;
  width:300px; max-width:calc(100vw - 32px); height:auto; max-height:calc(100vh - 32px);
  background:var(--overlay-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:18px; box-shadow:var(--shadow-lg); z-index:500; padding:16px;
  gap:10px; overflow-y:auto; overflow-x:hidden;
}
.map-grid.is-fullscreen .sidepanel #panelList,
.map-grid.is-fullscreen .sidepanel #panelDetail{overflow-y:auto; min-height:0;}
.map-grid.is-fullscreen .sidepanel .panel-title{font-size:13px;}
.map-grid.is-fullscreen .sidepanel .list button.item{padding:7px 6px;}
.map-grid.is-fullscreen .sidepanel .route-plan{padding:11px 12px;}
.map-grid.is-fullscreen .sidepanel .stand-preview{padding:11px 12px;}
.map-grid.is-fullscreen .sidepanel .route-plan-hint{display:none;}

/* Suche & Kategorie-Filter: werden bei Vollbild per JS aus der Toolbar oberhalb
   der Karte in das schwebende Panel verschoben (sonst wären sie hinter der
   vollflächigen Karte nicht mehr erreichbar) und hier entsprechend kompakter
   dargestellt. */
.map-grid.is-fullscreen .sidepanel .toolbar{margin-bottom:0; gap:8px;}
.map-grid.is-fullscreen .sidepanel .searchbar-wrap{max-width:none;}
.map-grid.is-fullscreen .sidepanel .searchbar{height:40px; padding:0 12px;}
.map-grid.is-fullscreen .sidepanel .cat-toggle-btn{height:34px; padding:0 12px; font-size:12.5px;}
.map-grid.is-fullscreen .sidepanel .chips{gap:6px;}
.map-grid.is-fullscreen .sidepanel .chip{height:30px; padding:0 11px; font-size:12px;}
@media (max-width:640px){
  .map-grid.is-fullscreen .sidepanel{left:12px; right:12px; width:auto; top:auto; bottom:12px; max-height:46vh;}
}

.sidepanel{background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; gap:14px; max-height:560px; overflow-y:auto;}

.route-plan{background:var(--surface-2); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:8px;}
.route-plan-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.route-plan-title{font-weight:800; font-size:13.5px;}
.route-plan-clear{border:0; background:transparent; color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; padding:2px 0;}
.route-stop-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.route-stop-list .stop-row{display:flex; align-items:center; gap:6px; background:var(--surface); border-radius:10px; padding:7px 10px; font-size:12.5px; cursor:grab; touch-action:none; transition:opacity .15s ease, box-shadow .15s ease;}
.route-stop-list .stop-row.is-dragging{opacity:.35; box-shadow:none;}
/* Zeigt beim Ziehen (Karten-Pin oder Listen-Zeile), VOR welchem Stand eingefügt würde – man muss
   dafür nicht mehr exakt einen kleinen Zielpunkt treffen, sondern kann irgendwo über/zwischen den
   Boxen loslassen; die passierende Zeile bekommt einfach diesen Strich oben angezeigt. */
.route-stop-list .stop-row.is-drop-before{box-shadow:inset 0 3px 0 0 var(--accent);}
.route-stop-list .stop-drag-handle{flex:0 0 auto; width:12px; color:var(--text-2); font-size:11px; line-height:.5; letter-spacing:-1px; opacity:.5; user-select:none;}
.route-stop-list .stop-num{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.route-stop-list .stop-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; user-select:none;}
.route-stop-list .stop-remove{flex:0 0 auto; border:0; background:transparent; color:var(--text-2); cursor:pointer; font-size:15px; line-height:1; padding:2px 4px;}
.route-stop-list .stop-remove:hover{color:var(--accent);}

/* Hinweisfeld am Ende der Liste: zeigt beim Ziehen an, wo man ablegen kann, um ans Ende der
   Route anzuhängen (wird aktiv, sobald über/unter der letzten Zeile gehovert wird). */
.stop-dropzone-hint{margin-top:2px; border:2px dashed var(--border); border-radius:12px; padding:12px 10px; text-align:center; font-size:11.5px; color:var(--text-2); opacity:.65; transition:opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;}
.route-plan.is-drop-active .stop-dropzone-hint{opacity:1; border-color:var(--accent); color:var(--accent-strong);}
.stop-dropzone-hint.is-target{background:var(--accent-soft); border-color:var(--accent); border-style:solid; color:var(--accent-strong); transform:scale(1.03); animation:stopInsertPulse 1s ease-out infinite;}

/* Der nächste Routen-Abschnitt bekommt eine "fließende" Strichanimation (wandernde weiße
   Striche über der farbigen Basislinie), die die Gehrichtung eindeutig zeigt – auch wenn
   die Route zweimal durch dieselbe Straße führt (dank seitlichem Versatz in offsetGeometry). */
.route-leg-flow{animation:routeLegFlow 0.9s linear infinite;}
@keyframes routeLegFlow{ to{ stroke-dashoffset:-34; } }

@keyframes stopInsertPulse{
  0%{box-shadow:0 0 0 0 var(--accent-soft);}
  70%{box-shadow:0 0 0 9px rgba(0,0,0,0);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

.route-optimize-btn{align-self:stretch; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent-strong); font-size:12.5px; font-weight:700; cursor:pointer; padding:8px 10px; border-radius:12px; margin-top:2px;}
.route-optimize-btn:hover{background:var(--accent); color:#fff;}
.route-optimize-btn.is-done{border-style:dashed; background:transparent; color:var(--text-2); cursor:default;}
.route-optimize-btn.is-done:hover{background:transparent; color:var(--text-2);}
.route-plan #routePlanModes{background:var(--surface);}
.route-plan-summary{margin:0; font-size:12px; font-weight:700; color:var(--text);}
.route-plan-hint{margin:0; font-size:11px; color:var(--text-2); line-height:1.4;}

.route-cat-btn{display:flex; align-items:center; justify-content:center; gap:8px; border:1px dashed var(--accent); background:var(--accent-soft); color:var(--accent-strong); height:42px; border-radius:14px; font-size:13px; font-weight:700; cursor:pointer;}
.route-cat-btn:hover{background:var(--accent); color:#fff;}

/* Vorschau eines einzelnen Standes (Angebot) vor dem Hinzufügen zur Route per Klick. */
.preview-back{border:0; background:transparent; color:var(--text-2); font-size:12px; font-weight:700; cursor:pointer; padding:2px 0 8px; display:inline-flex; align-items:center; gap:4px;}
.preview-back:hover{color:var(--accent);}
.stand-preview{background:var(--surface-2); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:6px;}
.preview-name{margin:0; font-size:15px; font-weight:800;}
.preview-cats{margin:0; font-size:12px; font-weight:700; color:var(--accent-strong);}
.preview-addr{margin:0; font-size:12.5px; color:var(--text-2);}
.preview-desc{margin:4px 0 2px; font-size:13px; color:var(--text); line-height:1.45; white-space:pre-line;}
.preview-add-btn{align-self:stretch; border:0; background:var(--accent); color:#fff; font-size:13px; font-weight:700; cursor:pointer; padding:10px 12px; border-radius:12px; margin-top:6px;}
.preview-add-btn:hover{background:var(--accent-strong);}
.preview-add-btn:disabled{background:transparent; border:1px dashed var(--border); color:var(--text-2); cursor:default;}
.preview-add-btn.is-secondary{background:transparent; border:1px solid var(--border); color:var(--text); margin-top:8px;}
.preview-add-btn.is-secondary:hover{border-color:var(--accent); color:var(--accent); background:transparent;}
.panel-title{font-weight:800; font-size:15px; margin:0;}
.panel-sub{font-size:12.5px; color:var(--text-2); margin:4px 0 0;}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.list button.item{width:100%; text-align:left; display:flex; align-items:center; gap:9px; padding:7px 6px; border:0; border-radius:12px; background:transparent; cursor:pointer;}
.list button.item:hover{background:var(--surface-2);}
.list .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.item-text{flex:1; min-width:0;}
.item-title{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.item-sub{font-size:11px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.item-dist{flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums;}

.detail-head{display:flex; align-items:flex-start; gap:10px;}
.detail-title{font-size:18px; font-weight:800; line-height:1.25; font-family:'Baloo 2',serif;}
.detail-addr{font-size:13px; color:var(--text-2); margin-top:2px;}
.detail-cat{display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:4px 10px; border-radius:12px; background:var(--surface-2); font-size:11.5px; font-weight:700;}
.close-btn{flex:0 0 auto; border:0; background:var(--surface-2); width:30px; height:30px; border-radius:50%; cursor:pointer; color:var(--text); font-size:15px;}
.detail-desc{font-size:13px; color:var(--text-2); line-height:1.5; margin:10px 0 4px;}
.modes{display:flex; background:var(--surface-2); border-radius:14px; padding:4px; gap:4px;}
.mode-btn{flex:1; border:0; height:54px; border-radius:11px; background:transparent; color:var(--text-2); font-weight:600; font-size:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer;}
.mode-btn strong{font-size:13.5px; color:var(--text); font-weight:800; font-variant-numeric:tabular-nums;}
.mode-btn[aria-pressed="true"]{background:var(--surface); box-shadow:0 1px 5px rgba(16,35,38,.18); color:var(--accent);}
.mode-btn[aria-pressed="true"] strong{color:var(--accent);}
.route-note{font-size:11px; color:var(--text-2); line-height:1.4; margin:0;}
.locate-note{font-size:12px; color:var(--text-2); line-height:1.4; background:var(--surface-2); padding:10px 12px; border-radius:10px;}

/* registration */
.reg-section{background:var(--accent-soft);}
.reg-grid{display:grid; grid-template-columns:1fr; gap:28px;}
@media (min-width:960px){ .reg-grid{grid-template-columns:1.15fr .85fr;} }
.reg-card{background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:28px;}
form{display:flex; flex-direction:column; gap:16px;}
.row2{display:flex; gap:10px; flex-wrap:wrap;}
.field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:150px;}
.field.small{flex:0 0 110px; min-width:90px;}
.field label{font-size:12px; font-weight:700; color:var(--text-2);}
.field input,.field textarea{border:1.5px solid var(--border); border-radius:12px; padding:12px 14px; font-size:15px; color:var(--text); background:var(--surface); outline:0; font-family:inherit;}
.field input:focus,.field textarea:focus{border-color:var(--accent);}
.field input[readonly]{background:var(--surface-2); color:var(--text-2);}
.err{font-size:11.5px; color:var(--danger); min-height:14px;}
.cat-grid{display:flex; flex-wrap:wrap; gap:8px;}
.cat-toggle{border:1.5px solid var(--border); background:var(--surface); height:38px; padding:0 14px; border-radius:19px; font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--text);}
.cat-toggle .dot{width:9px; height:9px; border-radius:50%;}
.cat-toggle[aria-pressed="true"]{border-color:transparent; color:#fff; background:var(--dc,var(--accent));}
.consent{display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--text);}
.consent input{margin-top:3px; width:18px; height:18px; flex:0 0 auto;}
.privacy-card{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:24px; display:flex; flex-direction:column; gap:12px; align-self:start;}
.privacy-card h3{font-size:17px;}
.privacy-body{font-size:12.5px; line-height:1.65; color:var(--text-2); display:flex; flex-direction:column; gap:8px;}
.privacy-body b{color:var(--text);}
.success{display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:20px 4px;}
.success .icon{width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}
.success h3{font-size:20px;}
.success p{font-size:13.5px; color:var(--text-2); line-height:1.5; margin:0; max-width:420px;}

/* faq */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:760px;}
details.faq{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 20px;}
details.faq summary{cursor:pointer; font-weight:700; font-size:15px; list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+'; float:right; font-size:20px; color:var(--accent); font-weight:400;}
details.faq[open] summary::after{content:'\2212';}
details.faq p{font-size:13.5px; color:var(--text-2); line-height:1.6; margin:12px 0 2px;}

/* footer */
footer{background:var(--surface-3); color:var(--text-invert); padding-block:48px 28px;}
.footer-grid{display:flex; flex-direction:column; gap:28px;}
@media (min-width:760px){ .footer-grid{flex-direction:row; justify-content:space-between; align-items:flex-start;} }
footer .brand-text span{color:color-mix(in srgb, var(--text-invert) 65%, transparent);}
.footer-links{display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px;}
.footer-links a{color:var(--text-invert); text-decoration:none; opacity:.85;}
.footer-links a:hover{opacity:1;}
.footer-note{font-size:12px; opacity:.6; margin-top:24px;}
hr.fline{border:0; border-top:1px solid color-mix(in srgb, var(--text-invert) 18%, transparent); margin:28px 0 0;}

/* legal pages */
.legal{max-width:760px; margin:0 auto; padding:48px 24px 80px;}
.legal h1{font-size:30px; margin-bottom:24px;}
.legal h2{font-size:19px; margin:32px 0 10px;}
.legal p, .legal li{font-size:14.5px; line-height:1.7; color:var(--text-2);}
.legal a{color:var(--accent);}

[hidden]{display:none!important;}