:root{--app-accent:#0b7189;--app-dark:#172a31;--app-paper:#fffdf8;--app-line:#dbe4e5;--app-shadow:0 16px 42px rgba(19,43,51,.13);--safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{padding-bottom:calc(78px + var(--safe-bottom))!important}
img{max-width:100%;height:auto} .hero,header.hero{border-radius:0 0 28px 28px;overflow:hidden}
.app-progress{position:fixed;left:0;top:0;height:3px;background:var(--app-accent);z-index:10050;width:0;transition:width .08s linear}
.app-top-tools{position:fixed;right:12px;top:calc(10px + env(safe-area-inset-top,0px));z-index:10020;display:flex;gap:8px}
.app-icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,37,44,.78);color:white;backdrop-filter:blur(12px);font-size:20px;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.app-bottom{position:fixed;z-index:10030;left:0;right:0;bottom:0;padding:8px 10px calc(8px + var(--safe-bottom));background:rgba(255,253,248,.94);backdrop-filter:blur(18px);border-top:1px solid var(--app-line);display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.app-bottom button{border:0;background:transparent;color:var(--app-dark);font:700 11px/1.1 system-ui;padding:5px 2px}.app-bottom b{display:block;font-size:21px;margin-bottom:3px}
.app-sheet{position:fixed;inset:auto 0 0;z-index:10040;background:var(--app-paper);border-radius:24px 24px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.25);max-height:82vh;overflow:auto;padding:18px 18px calc(28px + var(--safe-bottom));transform:translateY(110%);transition:transform .26s ease}.app-sheet.open{transform:translateY(0)}
.app-sheet-handle{width:54px;height:5px;background:#ccd4d6;border-radius:99px;margin:0 auto 14px}.app-close{float:right;border:0;background:#eaf0f1;border-radius:50%;width:38px;height:38px;font-size:20px}.app-sheet h2{margin-top:0!important;font-family:system-ui!important;font-size:1.55rem!important}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.app-card{border:1px solid var(--app-line);border-radius:16px;padding:13px;background:white}.app-card strong{display:block;margin-bottom:5px}.app-select{width:100%;padding:12px;border:1px solid var(--app-line);border-radius:12px;background:white;font-size:16px;margin:5px 0 10px}.app-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;background:var(--app-accent);color:white!important;text-decoration:none!important;padding:11px 14px;font:700 15px system-ui;margin:4px 4px 4px 0}.app-action.secondary{background:#e8f0f2;color:var(--app-dark)!important}
.app-audio-box{border:1px solid var(--app-line);background:linear-gradient(135deg,#f4fafb,#fff);border-radius:16px;padding:14px;margin:16px 0}.app-audio-box audio{width:100%;margin-top:8px}.app-tts{border:0;border-radius:10px;background:var(--app-dark);color:white;padding:9px 12px;font-weight:700}.app-tts.stop{background:#9b3f32}
.app-route-status{padding:10px 12px;background:#fff6db;border-left:4px solid #d59a25;border-radius:9px;margin:12px 0;font-size:.93rem}
.app-offline{display:none;background:#fff2e8;border-left:4px solid #c76535;padding:10px 12px;border-radius:9px;margin:12px auto;max-width:1180px}.app-offline.show{display:block}
.app-station-nav{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.app-station-nav button,.app-station-nav a{border:0;border-radius:10px;padding:9px 12px;background:#eaf0f1;color:var(--app-dark);text-decoration:none;font-weight:700}
@media(min-width:900px){.app-bottom{left:50%;right:auto;transform:translateX(-50%);width:520px;border:1px solid var(--app-line);border-bottom:0;border-radius:18px 18px 0 0}.app-sheet{left:50%;right:auto;width:min(680px,96vw);transform:translate(-50%,110%)}.app-sheet.open{transform:translate(-50%,0)}}
@media print{.app-bottom,.app-sheet,.app-top-tools,.app-progress,.app-offline,.app-audio-box,.app-station-nav{display:none!important}body{padding-bottom:0!important}}

/* Einheitliches Layoutsystem fuer alle Reisefuehrer */
:root{
  --app-accent:#0b7189;--app-accent-2:#b77a35;--app-dark:#172a31;
  --app-bg:#eef3f2;--app-paper:#fffdf8;--app-muted:#647176;
  --app-line:#d9e2e2;--app-radius:22px;--app-shadow:0 14px 38px rgba(19,43,51,.10)
}
body.app-guide{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;background:var(--app-bg)!important;color:var(--app-dark)!important;line-height:1.68!important}
body.app-guide h1,body.app-guide h2,body.app-guide h3{font-family:Georgia,"Times New Roman",serif;line-height:1.12}
body.app-guide main,body.app-guide .wrap,body.app-guide .main{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
body.app-guide .hero,body.app-guide header.hero,body.app-guide>header:first-of-type{min-height:64vh;border-radius:0 0 30px 30px;overflow:hidden}
body.app-guide nav.toc,body.app-guide nav.nav,body.app-guide .sticky{position:sticky;top:0;z-index:900;background:rgba(255,253,248,.94)!important;backdrop-filter:blur(14px);border-bottom:1px solid var(--app-line);box-shadow:0 5px 18px rgba(19,43,51,.07);overflow-x:auto;white-space:nowrap}
body.app-guide nav.toc a,body.app-guide nav.nav a,body.app-guide .sticky a{display:inline-block;padding:.55rem .75rem;margin:.1rem .15rem;border-radius:999px;text-decoration:none!important;font:700 .93rem system-ui;color:var(--app-dark)!important;background:#edf3f3}
body.app-guide section:not(.station),body.app-guide .panel,body.app-guide .card,body.app-guide .tile,body.app-guide .fact,body.app-guide .notice,body.app-guide .timeline{border-radius:var(--app-radius);}
body.app-guide .station,body.app-guide article.station{background:var(--app-paper)!important;border:1px solid var(--app-line)!important;border-top:6px solid var(--app-accent)!important;border-radius:var(--app-radius)!important;box-shadow:var(--app-shadow)!important;margin:1.8rem 0!important;overflow:hidden}
body.app-guide .station-head{background:linear-gradient(135deg,#eff6f6,#fffdf8)!important;color:var(--app-dark)!important}
body.app-guide .station h2,body.app-guide .station h3{color:var(--app-dark)!important}
body.app-guide .card,body.app-guide .panel,body.app-guide .tile,body.app-guide .fact{background:var(--app-paper)!important;border:1px solid var(--app-line)!important;box-shadow:var(--app-shadow)!important}
body.app-guide .btn,body.app-guide .app-action,body.app-guide .station-actions a,body.app-guide .buttons a{border-radius:12px!important;background:var(--app-accent)!important;color:#fff!important;text-decoration:none!important}
body.app-guide table{width:100%;border-collapse:separate!important;border-spacing:0;background:var(--app-paper)!important;border:1px solid var(--app-line);border-radius:16px;overflow:hidden}
body.app-guide th{background:#eaf1f1!important;color:var(--app-dark)!important}body.app-guide th,body.app-guide td{padding:.78rem;border-bottom:1px solid var(--app-line)!important;text-align:left;vertical-align:top}
body.app-guide #map,body.app-guide .map{position:relative!important;top:auto!important;height:500px!important;border-radius:18px!important;box-shadow:var(--app-shadow)!important;border:1px solid var(--app-line)!important}
body.app-guide .mapbox{position:static!important;top:auto!important;z-index:auto!important;background:transparent!important;padding:0!important}
body.app-guide .app-map-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr);gap:1.2rem;align-items:start}
body.app-guide .app-map-info{background:var(--app-paper);border:1px solid var(--app-line);border-radius:18px;padding:1.2rem;box-shadow:var(--app-shadow)}
body.app-guide .app-map-info h3{margin-top:0}.app-map-info ol{padding-left:1.25rem}.app-map-info li{margin:.42rem 0}
body.app-guide .gallery img,body.app-guide .station-img,body.app-guide figure img{border-radius:16px}
body.app-guide .route-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px}
@media(max-width:820px){
 body.app-guide .app-map-layout{grid-template-columns:1fr}
 body.app-guide #map,body.app-guide .map{height:390px!important}
 body.app-guide .hero,body.app-guide header.hero,body.app-guide>header:first-of-type{min-height:54vh}
 body.app-guide main,body.app-guide .wrap,body.app-guide .main{padding-left:14px!important;padding-right:14px!important}
 body.app-guide table{font-size:.9rem}
}
@media(max-width:560px){body.app-guide #map,body.app-guide .map{height:340px!important}.app-map-info{order:2}}

/* 2026-07-17: Einheitliches Alberobello-Design fuer alle Reisefuehrer */
body.app-guide{
  --ink:#25303b;--muted:#64717d;--paper:#fffdf8;--cream:#f4efe5;
  --gold:#b9853b;--blue:#315d77;--line:#ded6c8;
  --shadow:0 12px 32px rgba(37,48,59,.13);
  background:var(--paper)!important;color:var(--ink)!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
body.app-guide a{color:#174f72}
body.app-guide .hero,body.app-guide header.hero,body.app-guide>header:first-of-type{
  min-height:72vh!important;display:grid!important;place-items:end start!important;
  padding:clamp(2rem,7vw,6rem)!important;color:white!important;
  border-radius:0!important;box-shadow:none!important;
}
body.app-guide .hero h1,body.app-guide header h1{
  font-family:Georgia,serif!important;font-size:clamp(2.7rem,7vw,6.5rem)!important;
  line-height:.98!important;margin:.4rem 0!important;color:#fff!important;
}
body.app-guide .hero p,body.app-guide header p{font-size:clamp(1.05rem,2vw,1.4rem);max-width:780px}
body.app-guide main,body.app-guide .wrap,body.app-guide .main{width:min(1180px,92vw)!important;max-width:none!important;margin:auto!important;padding-left:0!important;padding-right:0!important}
body.app-guide nav.toc,body.app-guide nav.nav,body.app-guide .sticky{
  position:sticky!important;top:0!important;z-index:999!important;background:rgba(255,253,248,.94)!important;
  backdrop-filter:blur(10px)!important;border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;overflow:auto!important;white-space:nowrap!important;padding:.75rem max(4vw,12px)!important;
}
body.app-guide nav.toc a,body.app-guide nav.nav a,body.app-guide .sticky a{
  display:inline-block!important;margin-right:1rem!important;padding:0!important;background:none!important;
  border-radius:0!important;text-decoration:none!important;font-weight:700!important;color:#174f72!important;
}
body.app-guide section{scroll-margin-top:82px}
body.app-guide section:not(.station),body.app-guide .panel,body.app-guide .card,body.app-guide .tile,body.app-guide .fact{
  background:white!important;border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:var(--shadow)!important;
}
body.app-guide section:not(.station){padding:clamp(1.1rem,3vw,2.2rem);margin:1.5rem 0}
body.app-guide .station,body.app-guide article.station{
  background:white!important;border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:var(--shadow)!important;margin:2rem 0!important;overflow:hidden!important;border-top:1px solid var(--line)!important;
}
body.app-guide .station-head{
  display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr)!important;
  gap:0!important;background:white!important;color:var(--ink)!important;padding:0!important;
}
body.app-guide .station-head>.station-copy,body.app-guide .station-head>div:not(.station-photo):not(.num):not(.station-no){padding:clamp(1.4rem,4vw,3rem)!important}
body.app-guide .station-body{padding:clamp(1.4rem,4vw,3rem)!important}
body.app-guide .station h2,body.app-guide .station h3{font-family:Georgia,serif!important;color:var(--ink)!important}
body.app-guide .station h2{font-size:clamp(1.9rem,3.4vw,3rem)!important;line-height:1.08!important}
body.app-guide .num,body.app-guide .station-no{
  width:46px!important;height:46px!important;border-radius:50%!important;background:var(--blue)!important;
  color:white!important;display:grid!important;place-items:center!important;font:800 1.25rem system-ui!important;
  margin:1.4rem 0 0 1.4rem!important;
}
body.app-guide .meta,body.app-guide .pill,body.app-guide .tag,body.app-guide .badge{
  font-family:system-ui!important
}
body.app-guide .pill,body.app-guide .tag,body.app-guide .badge,body.app-guide .meta span{
  background:var(--cream)!important;color:var(--ink)!important;border-radius:999px!important;padding:.35rem .75rem!important;
}
body.app-guide .btn,body.app-guide .buttons a,body.app-guide .station-actions a,body.app-guide .station-nav a,body.app-guide .station-nav button{
  display:inline-block!important;padding:.65rem .85rem!important;border-radius:10px!important;background:var(--blue)!important;
  color:white!important;text-decoration:none!important;font-weight:750!important;border:0!important;
}
body.app-guide .btn.alt,body.app-guide .btn.secondary,body.app-guide .station-nav .secondary{background:#e9edf0!important;color:var(--ink)!important}
body.app-guide .look,body.app-guide .note,body.app-guide .legend,body.app-guide .fact,body.app-guide .warning,body.app-guide .practical,body.app-guide .good,body.app-guide .warn{
  border-radius:12px!important;padding:1rem 1.1rem!important
}
body.app-guide .look{background:#fff2d9!important;border-left:4px solid var(--gold)!important}
body.app-guide .note,body.app-guide .practical,body.app-guide .good{background:#eef4f6!important;border-left:4px solid var(--blue)!important}
body.app-guide .legend{background:#f6eef2!important;border-left:4px solid #8b4b68!important}
body.app-guide .warning,body.app-guide .warn{background:#fff4df!important;border-left:4px solid #c56b3c!important}
body.app-guide #map,body.app-guide .map{height:520px!important;border-radius:20px!important;box-shadow:var(--shadow)!important;border:1px solid var(--line)!important;position:relative!important;top:auto!important}
body.app-guide .mapbox{position:static!important;top:auto!important;z-index:auto!important;background:transparent!important;padding:0!important}
body.app-guide .app-map-layout{display:grid!important;grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr)!important;gap:1.2rem!important;align-items:start!important}
body.app-guide .app-map-info{background:white!important;border:1px solid var(--line)!important;border-radius:18px!important;padding:1.2rem!important;box-shadow:var(--shadow)!important}
body.app-guide table{width:100%!important;border-collapse:collapse!important;background:white!important;border-radius:16px!important;overflow:hidden!important;border:1px solid var(--line)!important}
body.app-guide th,body.app-guide td{padding:.85rem!important;border-bottom:1px solid var(--line)!important;text-align:left!important;vertical-align:top!important}
body.app-guide th{background:#eef3f5!important;color:var(--ink)!important}
body.app-guide .gallery{gap:.75rem!important}
body.app-guide .gallery img,body.app-guide figure img,body.app-guide .station-img{border-radius:16px!important;object-fit:cover!important}
body.app-guide footer{background:#20313c!important;color:#eef5f7!important;margin-top:4rem!important;padding:3rem max(4vw,20px)!important}
@media(max-width:850px){
  body.app-guide .station-head,body.app-guide .app-map-layout{grid-template-columns:1fr!important}
  body.app-guide #map,body.app-guide .map{height:430px!important}
  body.app-guide .hero,body.app-guide header.hero,body.app-guide>header:first-of-type{min-height:58vh!important}
  body.app-guide .station-photo{min-height:300px!important;order:-1!important}
}
@media(max-width:560px){
  body.app-guide main,body.app-guide .wrap,body.app-guide .main{width:min(100% - 24px,1180px)!important}
  body.app-guide section:not(.station){padding:1.05rem!important}
  body.app-guide #map,body.app-guide .map{height:360px!important}
  body.app-guide .station-head>.station-copy,body.app-guide .station-head>div:not(.station-photo):not(.num):not(.station-no),body.app-guide .station-body{padding:1.15rem!important}
}