/* My Kanutours & more — Unterseiten-Stylesheet */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark:#0C0806; --mid:#1C1108; --accent:#E8821A; --gold:#F5C218;
  --light:#F5E8D4; --text:#C09870; --line:rgba(232,130,26,0.18);
}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--light);font-family:'Open Sans',system-ui,-apple-system,sans-serif;font-weight:300;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:2px}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}

/* NAV */
.nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 40px;background:rgba(12,8,6,0.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-logo img{height:64px;width:auto;object-fit:contain}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:flex-end}
.nav ul a{color:var(--light);text-decoration:none;font-size:0.74rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;opacity:0.82;transition:color .25s,opacity .25s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--accent);opacity:1}
.nav-call{border:1px solid var(--accent);padding:9px 18px;border-radius:3px;color:var(--accent)!important;opacity:1!important}
.nav-call:hover{background:var(--accent);color:var(--dark)!important}

/* LAYOUT */
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.hero{padding:90px 0 54px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(232,130,26,0.07),transparent)}
.label{font-size:0.7rem;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h1{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(2.6rem,6.5vw,5rem);line-height:0.95;letter-spacing:0.01em;color:var(--light);margin-bottom:20px}
h1 .accent{color:var(--accent)}
h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.05;color:var(--light);margin:0 0 18px}
h3{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:1.45rem;line-height:1.15;color:var(--accent);margin:0 0 10px;letter-spacing:0.02em}
h4{font-size:0.95rem;font-weight:600;color:var(--light);margin:0 0 6px}
.lead{font-size:1.08rem;color:var(--text);max-width:66ch}
p{margin:0 0 16px;color:var(--text)}
p strong,li strong{color:var(--light);font-weight:600}
section.blk{padding:62px 0;border-bottom:1px solid rgba(232,130,26,0.08)}
section.blk:last-of-type{border-bottom:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--mid);border:1px solid var(--line);border-radius:10px;padding:26px}
.card p:last-child{margin-bottom:0}
ul.ticks{list-style:none;margin:0 0 16px}
ul.ticks li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--text)}
ul.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
ul.plain{margin:0 0 16px 20px}
ul.plain li{margin-bottom:8px;color:var(--text)}

/* BREADCRUMB */
.bc{padding:16px 0 0;font-size:0.78rem;color:var(--text)}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.bc a{color:var(--text);text-decoration:none}
.bc a:hover{color:var(--accent)}
.bc li+li::before{content:"›";margin-right:8px;color:rgba(192,152,112,0.5)}

/* TABLE */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--mid)}
table{width:100%;border-collapse:collapse;min-width:640px}
caption{text-align:left;padding:16px 18px 0;color:var(--text);font-size:0.85rem}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid rgba(232,130,26,0.1);font-size:0.9rem}
th{font-size:0.68rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
td{color:var(--text)}
td.rt{color:var(--light);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(232,130,26,0.05)}

/* NOTE / CTA */
.note{border-left:3px solid var(--gold);background:rgba(245,194,24,0.07);padding:18px 22px;border-radius:0 8px 8px 0;margin:22px 0}
.note p:last-child{margin-bottom:0}
.cta{background:var(--mid);border:1px solid var(--line);border-radius:12px;padding:38px;text-align:center}
.btn{display:inline-block;background:var(--accent);color:var(--dark);text-decoration:none;padding:14px 30px;border-radius:3px;font-size:0.78rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,130,26,0.28)}
.btn-o{display:inline-block;border:1px solid var(--accent);color:var(--accent);text-decoration:none;padding:13px 29px;border-radius:3px;font-size:0.78rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;transition:background .2s,color .2s}
.btn-o:hover{background:var(--accent);color:var(--dark)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:22px}

/* FAQ */
details{background:var(--mid);border:1px solid var(--line);border-radius:10px;padding:0;margin-bottom:12px}
details summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--light);font-size:0.98rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;flex-shrink:0}
details[open] summary::after{content:"–"}
details .ans{padding:0 22px 20px;color:var(--text)}
details .ans p:last-child{margin-bottom:0}

/* MAP */
#kanutours-map{width:100%;height:480px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--mid)}
.map-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:0.83rem;color:var(--text)}
.map-legend span{display:flex;align-items:center;gap:8px}
.dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.leaflet-popup-content{margin:14px 16px}

/* FOOTER */
footer{background:#080503;border-top:1px solid var(--line);padding:58px 0 26px;margin-top:10px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer h4{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:1.1rem;letter-spacing:0.1em;color:var(--accent);margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:var(--text);text-decoration:none;font-size:0.87rem}
footer a:hover{color:var(--accent)}
footer p{font-size:0.87rem}
.f-bot{border-top:1px solid rgba(232,130,26,0.12);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:0.78rem;color:rgba(192,152,112,0.7)}

@media (max-width:980px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav{padding:12px 20px;flex-wrap:wrap;gap:12px}
  .nav-logo img{height:50px}
  .nav ul{gap:16px;justify-content:flex-start}
  .nav ul a{font-size:0.68rem}
  .wrap{padding:0 20px}
  .hero{padding:54px 0 36px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  section.blk{padding:44px 0}
  #kanutours-map{height:400px}
}

/* Kartenkacheln dezent entsaettigen, damit die OSM-Karte zum Farbkonzept passt */
.leaflet-tile-pane { filter: grayscale(0.6) saturate(0.75) brightness(1.02) contrast(0.93); }
