:root {
  --navy: #0d2c54;
  --navy-2: #16407a;
  --navy-deep: #071a33;
  --red: #bf1e2e;
  --red-dark: #9c1623;
  --bg: #f5f8fc;
  --surface: #ffffff;
  --ink: #0f2138;
  --muted: #5a6b80;
  --line: #dde6f1;
  --maxw: 1480px;
  --shadow: 0 14px 36px rgba(13, 44, 84, .12);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .brand, .stat-num { font-family: 'Libre Franklin', system-ui, sans-serif; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* Flaggenleiste */
.flagbar { height: 4px; background: linear-gradient(90deg, var(--red) 0 33.3%, #fff 33.3% 66.6%, var(--navy) 66.6% 100%); }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 6vw;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 30px; }
.brand { font-weight: 800; font-size: 1.35rem; color: var(--navy); white-space: nowrap; }
.brand span { color: var(--red); }
.topsearch { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px;
  background: #eef2f8; border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; color: var(--muted); }
.topsearch svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; flex: none; }
.topsearch input { border: 0; background: transparent; outline: none; width: 100%; font-size: .95rem; color: var(--ink); }
.topsearch button { border: 0; background: transparent; padding: 0; margin: 0; display: flex; align-items: center; cursor: pointer; flex: none; }
.suche-grid { margin-top: 18px; }
.suche-vorschlaege { margin-top: 24px; }
.vorschlag-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vorschlag-chips a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); font-weight: 600; font-size: .9rem; background: var(--surface); }
.vorschlag-chips a:hover { border-color: var(--red); color: var(--red); }
mark { background: #ffe9a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.mainnav { margin-left: auto; display: flex; gap: 26px; }
.mainnav a { color: var(--navy); font-weight: 600; font-size: .95rem; opacity: .85; }
.langswitch { display: flex; gap: 2px; align-items: center; }
.langswitch a { font-weight: 800; font-size: .8rem; color: var(--navy); opacity: .45; padding: 4px 7px; border-radius: 5px; letter-spacing: .03em; }
.langswitch a.aktiv { opacity: 1; background: var(--navy); color: #fff; }
.langswitch a:hover { opacity: 1; }
.mainnav a:hover { color: var(--red); opacity: 1; }

/* Hamburger und Mobilmenü */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.hamburger span { width: 26px; height: 3px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .2s; }
.hamburger.aktiv span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.aktiv span:nth-child(2) { opacity: 0; }
.hamburger.aktiv span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobilmenu { display: none; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); }
.mobilmenu.offen { display: flex; }
.mobilmenu a { padding: 15px 6vw; border-top: 1px solid var(--line); color: var(--navy); font-weight: 600; }
.mobilmenu a:hover { background: #f4f8fd; color: var(--red); }

/* Navy Regionen-Leiste */
.regionbar { background: var(--navy); padding: 0 6vw; }
.regionbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 34px; height: 68px; }
.regionbar-label { color: #8fa4c2; font-size: .86rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.regionbar a { color: #e1e9f5; font-weight: 700; font-size: 1.02rem; }
.regionbar a:hover { color: #fff; }
.regionbar-all { margin-left: auto; color: #fff !important; display: inline-flex; align-items: center; gap: 5px; }

/* Kategorie-Kreise */
.stories { max-width: var(--maxw); margin: 0 auto; padding: 36px 6vw 8px;
  display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; }
.story { display: block; text-align: center; width: 100px; }
.story-ring { width: 84px; height: 84px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--red), #e8643f 40%, var(--navy-2)); margin: 0 auto;
  transition: transform .2s; }
.story:hover .story-ring { transform: translateY(-3px); }
.story-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--navy); display: grid; place-items: center; }
.story-inner svg { width: 36px; height: 36px; stroke: #fff; fill: none; stroke-width: 1.8; }
.story-label { margin-top: 11px; font-size: .76rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }

/* Hero */
.hero { min-height: 74vh; display: flex; align-items: center;
  background-size: cover; background-position: center; padding: 6vw; color: #fff; }
.hero-inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.hero-text { max-width: 720px; }
.kicker { display: inline-block; text-transform: uppercase; letter-spacing: .2em; font-size: .78rem;
  font-weight: 700; color: #fff; padding: 7px 0; margin-bottom: 20px; border-top: 3px solid var(--red); }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 900; line-height: 1.04; }
.hero .lead { margin-top: 22px; font-size: clamp(1.08rem, 2vw, 1.35rem); max-width: 620px; opacity: .94; }
.btn { display: inline-block; margin-top: 32px; background: var(--red); color: #fff; padding: 15px 34px;
  border-radius: 8px; font-weight: 700; font-size: 1rem; box-shadow: 0 10px 24px rgba(191, 30, 46, .35);
  transition: transform .15s, background .2s; }
.btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.region-gruppe { max-width: var(--maxw); margin: 6px auto 24px; font-size: 1.55rem; font-weight: 800;
  color: var(--navy); display: flex; align-items: center; gap: 13px; scroll-margin-top: 90px; }
.region-gruppe::before { content: ''; width: 30px; height: 4px; background: var(--red); border-radius: 2px; }
.region-gruppe + .grid { margin-bottom: 44px; }
.section-mehr { max-width: var(--maxw); margin: 38px auto 0; text-align: center; }
.btn-ghost { display: inline-block; border: 2px solid var(--navy); color: var(--navy); padding: 12px 30px;
  border-radius: 8px; font-weight: 700; transition: background .2s, color .2s; }
.btn-ghost:hover { background: var(--navy); color: #fff; }

/* Vertrauensleiste */
.trust { background: var(--navy); color: #fff; padding: 30px 6vw; }
.trust-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.stat { flex: 1; min-width: 160px; text-align: center; }
.stat-num { display: block; font-size: 2.1rem; font-weight: 800; color: #fff; }
.stat-num span { color: #ff6b78; }
.stat-label { font-size: .9rem; color: #aebfd6; margin-top: 2px; }

/* Intro */
.intro { padding: 8vh 6vw; }
.intro-inner { max-width: 900px; margin: 0 auto; text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 500; line-height: 1.45; color: var(--ink); }
.intro-inner strong { color: var(--navy); font-weight: 700; }

/* Sections */
.section { padding: 6vh 6vw 8vh; }
.section.alt { background: #eef3fa; }
.section.narrow { max-width: var(--maxw); margin: 0 auto; }
.section-head { max-width: var(--maxw); margin: 0 auto 42px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; color: var(--navy); }
.section-head h2::after { content: ''; display: block; width: 54px; height: 4px; background: var(--red); margin-top: 14px; border-radius: 2px; }
.section-sub { color: var(--muted); margin-top: 14px; font-size: 1.12rem; }

/* Grid + Cards */
.grid { max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(13, 44, 84, .20); }
.card-thumb { position: relative; }
.card-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tag { position: absolute; top: 14px; left: 14px; background: var(--navy); color: #fff; font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 6px 13px; border-radius: 6px; }
.card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.region { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; color: var(--red); font-weight: 700; margin-bottom: 9px; }
.card-body h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.card-teaser { color: var(--muted); margin-top: 11px; flex: 1; }
.more { margin-top: 18px; font-weight: 700; color: var(--red); font-size: .92rem; }
.more::after { content: ' \2192'; }
.berichte-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.card.wide .card-img { aspect-ratio: 3 / 2; }

/* Breadcrumb */
.breadcrumb { padding: 18px 6vw 20px; }
.breadcrumb-inner { max-width: var(--maxw); margin: 0 auto; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.breadcrumb-inner a { color: var(--red); font-weight: 600; }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-inner span { color: #b3c0d2; }
.breadcrumb-inner strong { color: var(--ink); font-weight: 600; }

/* Detail */
.detail-hero { min-height: 56vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; padding: 6vw; color: #fff; }
.detail-hero-inner { max-width: var(--maxw); width: 100%; margin: 0 auto; }
.detail-hero .region { color: #ff8a94; }
.detail-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 900; margin-top: 6px; }
.detail-hero .lead { margin-top: 16px; font-size: 1.25rem; opacity: .95; max-width: 720px; }

/* Seitenkopf fuer Uebersichtsseiten (Reisewissen, spaeter Routen) */
.seite-kopf { background: linear-gradient(135deg, var(--navy-deep), var(--navy) 58%, var(--navy-2)); color: #fff; padding: clamp(46px, 6.5vw, 88px) 6vw; }
.seite-kopf-inner { max-width: var(--maxw); margin: 0 auto; }
.seite-kopf h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 900; margin-top: 4px; }
.seite-kopf .lead { margin-top: 16px; font-size: 1.2rem; opacity: .92; max-width: 760px; }

/* Hinweis-/Disclaimer-Kasten fuer heikle, sich oft aendernde Themen (Einreise, Preise) */
.hinweis-box { padding: 28px 6vw 0; }
.hinweis-inner { max-width: var(--maxw); margin: 0 auto; background: #fff7ed; border: 1px solid #f3cf9b;
  border-left: 5px solid #d98324; border-radius: 10px; padding: 22px 26px; }
.hinweis-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hinweis-kopf svg { width: 22px; height: 22px; stroke: #b45309; fill: #b45309; }
.hinweis-titel { font-weight: 800; color: #92400e; font-size: 1.02rem; }
.hinweis-inner p { color: #5b3d1e; line-height: 1.6; }
.hinweis-amtlich { margin-top: 12px; font-weight: 700; color: #92400e; }
.hinweis-links { margin-top: 6px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hinweis-links a { color: var(--red); font-weight: 600; }
.hinweis-links a:hover { text-decoration: underline; }

/* Querverweis-Box "Das passt dazu" in der Seitenleiste */
.verwandt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.verwandt-titel { display: block; font-weight: 800; color: var(--navy); margin-bottom: 11px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.verwandt ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.verwandt a { color: var(--red); font-weight: 600; }
.verwandt a:hover { text-decoration: underline; }

/* Checkliste (zum Abhaken, druckbar) */
.checkliste { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; }
.check-gruppe h3 { font-size: 1.18rem; font-weight: 800; color: var(--navy); margin-bottom: 13px; }
.check-gruppe ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.check-gruppe li { position: relative; padding-left: 30px; line-height: 1.5; }
.check-gruppe li::before { content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px;
  border: 2px solid var(--navy); border-radius: 4px; background: #fff; }

/* Routen: nummerierte Karten-Pins, Etappen-Timeline, Ideen-Karten */
.route-pin { background: var(--red) !important; color: #fff; border: 2px solid #fff !important; border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center; line-height: 1;
  font-weight: 800; font-size: .92rem; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.route-pin span { display: block; }
.route-fuss { max-width: var(--maxw); margin: 16px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.route-fahrzeit { color: var(--muted); }
.route-fahrzeit strong { color: var(--navy); }
.etappe-fahrt { font-size: .85rem; color: var(--muted); margin-top: 4px; font-weight: 600; }
.hoehepunkte { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hoehepunkte li { position: relative; padding-left: 22px; line-height: 1.5; }
.hoehepunkte li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
.etappen { max-width: var(--maxw); margin: 0 auto; list-style: none; }
.etappe { display: flex; gap: 22px; padding-bottom: 30px; position: relative; }
.etappe::before { content: ''; position: absolute; left: 18px; top: 40px; bottom: -4px; width: 2px; background: var(--line); }
.etappe:last-child::before { display: none; }
.etappe-nr { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 800; z-index: 1; }
.etappe-text h3 { font-size: 1.3rem; color: var(--navy); font-weight: 700; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.etappe-naechte { font-size: .78rem; font-weight: 700; color: var(--red); background: #fbe9eb; padding: 3px 11px; border-radius: 20px; }
.etappe-text p { margin-top: 6px; }
.etappe-link { display: inline-block; margin-top: 9px; color: var(--red); font-weight: 600; }
.etappe-link:hover { text-decoration: underline; }
.etappe-text { flex: 1; min-width: 0; }
.etappe-bild { flex: 0 0 240px; width: 240px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 10px; align-self: flex-start; }
.route-tipps { max-width: var(--maxw); margin: 0 auto; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px 34px; }
.route-tipps li { position: relative; padding-left: 30px; line-height: 1.55; }
.route-tipps li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }
.downloads { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px; }
.dl-btn { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 22px; color: var(--navy); font-weight: 700; transition: border-color .2s, transform .15s; }
.dl-btn:hover { border-color: var(--navy); transform: translateY(-2px); }
.dl-ic { background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800; padding: 7px 9px; border-radius: 6px; letter-spacing: .03em; }
.dl-btn small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
button.dl-btn { cursor: pointer; font-family: inherit; }
.etappe-hotel { margin-top: 9px; font-size: .92rem; }
.etappe-hotel-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--red); margin-right: 4px; }
.budget-hinweis { max-width: var(--maxw); margin: 16px auto 0; font-size: .85rem; color: var(--muted); }
.ideen-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.idee-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; border-top: 4px solid var(--navy); }
.idee-dauer { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.idee-card h3 { font-size: 1.25rem; color: var(--navy); font-weight: 700; margin: 6px 0 8px; }
.detail { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.detail-body p { font-size: 1.12rem; line-height: 1.72; margin-bottom: 22px; color: #2c3c52; }
.detail-body.solo { max-width: 1000px; margin: 0 auto; }
.abschnitt { font-family: 'Libre Franklin', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--navy); margin: 38px 0 16px; }
.abschnitt:first-child { margin-top: 0; }
.herkunft { margin-top: 34px; padding: 20px 24px; background: #eef3fa; border-left: 4px solid var(--red);
  border-radius: 8px; font-size: 1rem !important; color: var(--muted) !important; font-style: italic; }
.facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); position: sticky; top: 92px; }
.facts h3 { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--line); }
.facts dl dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red); font-weight: 700; margin-top: 16px; }
.facts dl dd { font-size: 1.02rem; margin-top: 4px; color: var(--ink); }
.tipp { margin-top: 24px; padding: 18px; background: var(--navy); border-radius: 10px; color: #fff; }
.tipp-label { font-weight: 700; color: #ff8a94; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.tipp p { margin-top: 8px; color: #e7eefb; }
.back { display: inline-block; margin-top: 34px; color: var(--red); font-weight: 700; }
.back::before { content: '\2190  '; }
.seiten-nav { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 30px; }
.nav-zurueck, .nav-weiter { color: var(--red); font-weight: 700; font-size: 1.02rem; }
.nav-zurueck::before { content: '\2190  '; }
.nav-weiter::after { content: '  \2192'; }
.nav-zurueck:hover, .nav-weiter:hover { text-decoration: underline; }

/* Stand-Datum */
.stand { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.stand-fuss { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 6vw 6vh; }
.stand-fuss time { font-weight: 600; }

/* Sprungnavigation */
.sprungnav { position: sticky; top: 55px; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 6vw; }
.sprungnav-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 22px; height: 50px; overflow-x: auto; }
.sprungnav-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; white-space: nowrap; }
.sprungnav a { color: var(--navy); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.sprungnav a:hover { color: var(--red); }
section[id] { scroll-margin-top: 116px; }

/* Route-Link an Aussichtspunkten */
.hl-route { display: inline-block; margin-top: 12px; color: var(--red); font-weight: 700; font-size: .9rem; }
.hl-route::after { content: ' \2197'; }
.hl-route:hover { text-decoration: underline; }

/* Nach-oben-Button */
.nach-oben { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--navy); cursor: pointer; box-shadow: 0 8px 24px rgba(13, 44, 84, .35); display: grid; place-items: center; }
.nach-oben[hidden] { display: none; }
.nach-oben:hover { background: var(--red); }
.nach-oben svg { width: 22px; height: 22px; }

/* Auf einen Blick */
.ueberblick-wrap { padding: 28px 6vw 0; }
.ueberblick { max-width: var(--maxw); margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-wrap: wrap; overflow: hidden; }
.ub-item { flex: 1; min-width: 150px; padding: 20px 26px; border-right: 1px solid var(--line); }
.ub-item:last-child { border-right: 0; }
.ub-item span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red); font-weight: 700; }
.ub-item strong { display: block; margin-top: 5px; font-size: 1.05rem; color: var(--navy); font-weight: 700; }

/* Karte */
.karte { max-width: var(--maxw); margin: 0 auto; height: 440px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; z-index: 0; }
#npsmap { background: #eef3fa; }
.nps-fuss { max-width: var(--maxw); margin: 12px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.nps-credit { font-size: .85rem; color: var(--muted); margin: 0; }
.btn-pdf { display: inline-block; background: var(--surface); border: 1px solid var(--line); color: var(--navy); font-weight: 700; font-size: .92rem; padding: 10px 20px; border-radius: 8px; box-shadow: 0 4px 14px rgba(13, 44, 84, .06); white-space: nowrap; }
.btn-pdf:hover { border-color: var(--red); color: var(--red); }

/* Karten-Pins: dauerhafte Beschriftung und Navi-Link */
.leaflet-tooltip.pin-label { background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 700; font-size: .78rem; padding: 3px 9px; border-radius: 6px; box-shadow: 0 2px 8px rgba(13, 44, 84, .18); }
.leaflet-tooltip.pin-label::before { border-top-color: var(--line); }
.leaflet-popup-content { font-family: 'Inter', sans-serif; font-size: .95rem; line-height: 1.5; }
.leaflet-popup-content strong { color: var(--navy); }
.gm-link { color: var(--red); font-weight: 700; }
.gm-link:hover { text-decoration: underline; }

/* Inline-Bild im Fließtext */
.inline-bild { margin: 28px 0; }
.inline-bild img { width: 100%; border-radius: 12px; display: block; }
.inline-bild figcaption { margin-top: 10px; font-size: .92rem; color: var(--muted); font-style: italic; }

/* Highlights mit Bild */
.hl-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.hl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.hl-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.hl-text { padding: 22px 24px 26px; }
.hl-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--navy); color: #fff; font-family: 'Libre Franklin', sans-serif; font-weight: 800; margin-bottom: 12px; }
.hl-card h3 { color: var(--navy); font-size: 1.28rem; }
.hl-card p { color: var(--muted); margin-top: 9px; }

/* Klima-Grafik */
.klima { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 10px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 50px 24px 18px; }
.klima-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.klima-track { width: 100%; height: 200px; position: relative; }
.klima-bar { position: absolute; left: 50%; transform: translateX(-50%); width: 56%; min-width: 14px; border-radius: 8px;
  background: linear-gradient(180deg, #e8643f, #16407a); }
.klima-bar .kh, .klima-bar .kl { position: absolute; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.klima-bar .kh { bottom: 100%; margin-bottom: 3px; color: var(--red-dark); text-align: center; }
.klima-bar .kl { top: 100%; margin-top: 3px; color: var(--navy-2); text-align: center; }
.klima-bar .kh small, .klima-bar .kl small { display: block; font-size: .8em; font-weight: 600; opacity: .58; line-height: 1.05; }
.klima-m { margin-top: 26px; font-size: .82rem; font-weight: 600; color: var(--muted); }

/* Videos */
.video-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
@media (min-width: 1200px) { .video-grid { grid-template-columns: repeat(4, 1fr); } }
.video-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s; cursor: pointer; }
.video-card:hover { transform: translateY(-5px); }
.video-card:hover .play { background: var(--red-dark); }
.video-thumb { aspect-ratio: 16 / 9; background-size: cover; background-position: center; position: relative; }
.video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card.geladen { cursor: default; transform: none; }
.video-card.geladen .video-thumb::after { display: none; }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(7,26,51,.28); }
.play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%;
  background: var(--red); z-index: 1; }
.play::before { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid;
  border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.video-body { padding: 18px 20px 20px; }
.video-body h3 { color: var(--navy); font-size: 1.15rem; }
.video-kanal { color: var(--muted); font-size: .9rem; }

/* Galerie klickbar + Lightbox */
.galerie .zoombar { cursor: zoom-in; transition: opacity .15s; }
.galerie .zoombar:hover { opacity: .9; }
.lightbox { position: fixed; inset: 0; background: rgba(7,18,33,.92); display: none; align-items: center; justify-content: center; z-index: 200; padding: 4vw; cursor: zoom-out; }
.lightbox.offen { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* Community-Tipps */
.comm-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.comm-card { background: #eef3fa; border-left: 4px solid var(--red); border-radius: 0 10px 10px 0; padding: 24px 26px; margin: 0; }
.comm-card p { color: #2c3c52; font-size: 1.05rem; }
.comm-card cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--navy); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

/* Galerie */
.galerie { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 720px) { .galerie { grid-template-columns: 1fr; } }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; }

/* FAQ */
.faq { max-width: 940px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; padding: 0 22px; box-shadow: 0 4px 14px rgba(13, 44, 84, .05); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; color: var(--navy); font-family: 'Libre Franklin', sans-serif; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--red); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { padding: 0 0 20px; color: var(--muted); margin: 0; }

/* Tabellen */
.tabelle-wrap { max-width: var(--maxw); margin: 0 auto; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.tabelle thead th { background: var(--navy); color: #fff; font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: #f4f8fd; }
.tabelle td strong { color: var(--navy); }
.level { display: inline-block; background: #eef3fa; color: var(--navy-2); font-size: .82rem; font-weight: 600; padding: 3px 11px; border-radius: 100px; white-space: nowrap; }
.vergleich .merkmal { font-weight: 700; color: var(--navy); background: #f4f8fd; }
.vergleich td:not(.merkmal) { width: 38%; }

/* Info-Karten (Übernachten) */
.info-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.info-card h3 { color: var(--navy); font-size: 1.25rem; }
.info-lage { display: inline-block; color: var(--red); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 10px; }
.info-card p { color: var(--muted); }

/* Forum-Debatten */
.debatten { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.debatte { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 10px; padding: 24px 28px; box-shadow: var(--shadow); }
.debatte h3 { color: var(--navy); font-size: 1.22rem; }
.debatte p { color: #2c3c52; margin-top: 8px; }

/* Geheimtipps und Fehler */
.tf-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.tf-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); }
.tf-box h3 { font-size: 1.3rem; margin-bottom: 16px; }
.tf-box.gut h3 { color: #1f7a43; }
.tf-box.schlecht h3 { color: var(--red-dark); }
.tf-box ul { list-style: none; }
.tf-box li { position: relative; padding-left: 28px; margin-bottom: 13px; color: #2c3c52; }
.tf-box li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.tf-box.gut li::before { content: '\2713'; color: #1f7a43; }
.tf-box.schlecht li::before { content: '\2715'; color: var(--red); }

/* Forum-Suche */
.forum-suche-wrap { padding: 6vh 6vw; }
.forum-suche { max-width: 920px; margin: 0 auto; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 46px 40px; text-align: center; box-shadow: var(--shadow); }
.forum-suche h2 { color: #fff; font-size: 1.9rem; }
.forum-suche p { color: #c3d2e8; margin: 12px auto 26px; max-width: 580px; }
.forum-suche strong { color: #fff; }
.fs-form { display: flex; gap: 10px; max-width: 540px; margin: 0 auto; }
.fs-form input { flex: 1; min-width: 0; border: 0; border-radius: 9px; padding: 14px 16px; font-size: 1rem; outline: none; }
.fs-form button { background: var(--red); color: #fff; border: 0; border-radius: 9px; padding: 0 26px; font-weight: 700; cursor: pointer; }
.fs-form button:hover { background: var(--red-dark); }
.fs-hinweis { display: block; margin-top: 14px; color: #8aa0bf; font-size: .85rem; }

/* YouTube-Button */
.video-yt { display: inline-block; margin-top: 10px; color: var(--red); font-weight: 700; font-size: .9rem; }
.video-yt:hover { text-decoration: underline; }

/* Forum-Suchergebnisse */
mark { background: #ffe69b; color: inherit; padding: 0 2px; border-radius: 2px; }
.suche-info { margin-top: 28px; font-weight: 600; color: var(--navy); }
.treffer { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.treffer-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; box-shadow: 0 4px 14px rgba(13, 44, 84, .05); }
.treffer-item h3 { color: var(--navy); font-size: 1.15rem; }
.treffer-item p { color: #2c3c52; margin-top: 8px; }
.treffer-quelle { display: inline-block; margin-top: 10px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.suche-hinweis { margin-top: 28px; font-size: .9rem; color: var(--muted); font-style: italic; }

/* Footer, mehrspaltig */
.site-foot { background: var(--navy-deep); color: #cdd9ec; padding: 6vh 6vw 2.5vh; margin-top: 2vh; }
.foot-top { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 1.1fr 0.9fr; gap: 30px; }
.foot-brand { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 1.4rem; color: #fff; }
.foot-brand span { color: var(--red); }
.foot-text { color: #9fb2cd; margin-top: 12px; font-size: .95rem; max-width: 320px; }
.foot-col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.foot-col a { display: block; color: #b9c8de; font-size: .95rem; padding: 3px 0; }
.foot-col a:hover { color: #ff8a94; }
.foot-col a.foot-hl { color: #fff; font-weight: 600; }
.foot-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #e8643f; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .03em; vertical-align: middle; }
.news-text { color: #9fb2cd; font-size: .95rem; margin-bottom: 14px; }
.news-form { display: flex; gap: 8px; }
.news-form input { flex: 1; min-width: 0; border: 1px solid #294062; background: #102a47; color: #fff; border-radius: 8px; padding: 11px 13px; font-size: .92rem; outline: none; }
.news-form button { background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 0 18px; font-weight: 700; cursor: pointer; }
.news-form button:hover { background: var(--red-dark); }
.foot-mid { max-width: var(--maxw); margin: 40px auto 0; padding: 26px 0; border-top: 1px solid #1a3357; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-sub { color: #7e93b3; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-right: 14px; }
.socials { display: inline-flex; gap: 12px; vertical-align: middle; }
.socials a { width: 38px; height: 38px; border-radius: 9px; background: #14304f; display: grid; place-items: center; }
.socials a:hover { background: var(--red); }
.socials svg { width: 19px; height: 19px; fill: #fff; }
.foot-badges { color: #8aa0bf; font-size: .9rem; }
.foot-bottom { max-width: var(--maxw); margin: 0 auto; padding-top: 22px; border-top: 1px solid #1a3357; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot-bottom nav { display: flex; gap: 22px; }
.foot-bottom a { color: #b9c8de; font-size: .88rem; }
.foot-bottom a:hover { color: #fff; }
.foot-copy { color: #6c809d; font-size: .85rem; }

@media (max-width: 1100px) {
  .foot-top { grid-template-columns: repeat(3, 1fr); gap: 26px 30px; }
  .foot-about { grid-column: 1 / -1; }
  .foot-text { max-width: 520px; }
}
@media (max-width: 680px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}
@media (max-width: 820px) {
  .detail { grid-template-columns: 1fr; gap: 34px; }
  .facts { position: static; }
  .topsearch { display: none; }
  .mainnav { display: none; }
  .regionbar { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 720px) {
  .ueberblick { flex-direction: column; }
  .ub-item { border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; width: 100%; }
  .ub-item:last-child { border-bottom: 0; }

  /* Klima passt sich ein, kein Scrollen */
  .klima { overflow: visible; gap: 3px; padding: 44px 10px 14px; }
  .klima-col { min-width: 0; }
  .klima-bar { width: 74%; min-width: 7px; }
  .klima-bar .kh, .klima-bar .kl { font-size: .58rem; }
  .klima-m { font-size: .64rem; }

  /* Tabellen werden zu gestapelten Karten */
  .tabelle-wrap { overflow: visible; border: 0; box-shadow: none; background: none; border-radius: 0; }
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle tr { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 14px; padding: 4px 0; }
  .tabelle td { display: block; white-space: normal; border: 0; border-bottom: 1px solid var(--line); padding: 10px 18px; text-align: left; }
  .tabelle tr td:last-child { border-bottom: 0; }
  .tabelle td::before { content: attr(data-label); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--red); font-weight: 700; margin-bottom: 2px; }
  .tabelle td:first-child { display: block; text-align: left; font-family: 'Libre Franklin', sans-serif; font-size: 1.12rem; font-weight: 800; color: var(--navy); padding: 14px 18px 6px; }
  .tabelle td:first-child::before { display: none; }
  .tabelle tbody tr:hover { background: var(--surface); }

  /* Vergleich: South und North nebeneinander statt untereinander */
  .vergleich td.merkmal { background: none; flex: 0 0 100%; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
  .vergleich tr { display: flex; flex-wrap: wrap; padding: 0; }
  .vergleich td:not(.merkmal) { flex: 1 1 0; min-width: 0; padding: 12px 18px 14px; border-bottom: 0; }
  .vergleich td:not(.merkmal):not(:last-child) { border-right: 1px solid var(--line); }

  /* Routen-Etappen: Bild voll unter den Text statt gequetscht daneben */
  .etappe { flex-wrap: wrap; }
  .etappe::before { display: none; }
  .etappe-bild { order: 3; flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 12px; }

  .hero h1 { font-size: 2.4rem; }
  .forum-suche { padding: 32px 22px; }
  .fs-form { flex-direction: column; }
}

/* Druckansicht der Route: saubere Reiseplanung auf Papier/PDF */
@media print {
  .flagbar, .topbar, .regionbar, .mobilmenu, .langswitch, footer, .nach-oben,
  .sprungnav, .breadcrumb, #karte, .etappe-bild, .downloads, .seiten-nav,
  .comm-grid, .hinweis-box { display: none !important; }
  body { color: #000; background: #fff; }
  .detail-hero { min-height: auto; background: #fff !important; color: #000; padding: 0 0 8px; }
  .detail-hero .region { color: #555; }
  .detail-hero h1 { color: #000; font-size: 24pt; }
  .detail-hero .lead { color: #000; font-size: 12pt; }
  .section { padding: 8px 0; }
  .section.alt { background: #fff; }
  .section-head { margin: 0 0 10px; }
  .section-head h2 { font-size: 15pt; }
  .ueberblick { box-shadow: none; border: 1px solid #bbb; }
  .etappe { break-inside: avoid; }
  .etappe-nr { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabelle { box-shadow: none; border: 1px solid #bbb; }
  a { color: #000; text-decoration: none; }
}

/* Forum-light: Frageuebersicht und Detail */
.fragen-layout { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.fragen-liste { display: flex; flex-direction: column; gap: 14px; }
.frage-karte { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; box-shadow: 0 4px 14px rgba(13,44,84,.05); transition: border-color .15s, transform .15s; }
.frage-karte:hover { border-color: var(--red); transform: translateY(-2px); }
.frage-karte h2 { font-size: 1.12rem; color: var(--navy); margin: 0 0 6px; font-weight: 800; }
.frage-karte .frage-aus { color: #4a5b70; font-size: .92rem; margin: 0 0 10px; line-height: 1.5; }
.frage-meta { font-size: .82rem; color: #6b7a90; margin: 0; }
.frage-meta .frage-antw { color: var(--red); font-weight: 700; }
.fragen-neu { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: 0 4px 14px rgba(13,44,84,.05); position: sticky; top: 90px; }
.fragen-neu h2 { font-size: 1.15rem; color: var(--navy); font-weight: 800; margin: 0 0 14px; }
.fragen-neu .eindruck-form { background: none; border: 0; padding: 0; box-shadow: none; max-width: none; }
.antwort-liste { display: flex; flex-direction: column; gap: 14px; }
.antwort-karte { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 10px; padding: 16px 18px; }
.antwort-karte p { margin: 0 0 8px; line-height: 1.65; color: #26384d; }
@media (max-width: 820px) { .fragen-layout { grid-template-columns: 1fr; } .fragen-neu { position: static; } }

/* Besucher-Eindruecke: Formular und Meldungen */
.eindruck-card cite { color: var(--navy); font-weight: 700; }
.eindruck-meldung { max-width: 760px; margin: 0 auto 18px; padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.eindruck-meldung.em-ok { background: #e7f6ec; border: 1px solid #b6e3c6; color: #1b6b3a; }
.eindruck-meldung.em-err { background: #fdecec; border: 1px solid #f6c2c2; color: #a12525; }
.eindruck-form { max-width: 760px; margin: 22px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 4px 14px rgba(13, 44, 84, .05); }
.eindruck-form .ef-zeile { display: flex; flex-wrap: wrap; gap: 14px; }
.eindruck-form .ef-feld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; margin-bottom: 14px; }
.eindruck-form .ef-feld span { font-weight: 700; color: var(--navy); font-size: .85rem; }
.eindruck-form input[type=text], .eindruck-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); font-size: .95rem; font-family: inherit; }
.eindruck-form input[type=text]:focus, .eindruck-form textarea:focus { outline: none; border-color: var(--red); }
.eindruck-form textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.eindruck-form .ef-hinweis { margin-top: 12px; }
/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
.ef-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Route auf meine Reise uebernehmen */
.route-uebernehmen.aktiv { background: #1f9d55; border-color: #1f9d55; color: #fff; cursor: default; opacity: 1; }
.route-zur-reise { align-self: center; color: var(--red); font-weight: 700; text-decoration: none; font-size: .92rem; }
.route-zur-reise:hover { text-decoration: underline; }
.route-zur-reise[hidden] { display: none; }

/* Wann-wohin: Monatsauswahl */
.ww-monate { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ww-monat { display: inline-block; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; font-size: .9rem; text-decoration: none; transition: all .15s; }
.ww-monat:hover { border-color: var(--red); color: var(--red); }
.ww-monat.aktiv { background: var(--navy); color: #fff; border-color: var(--navy); }
.ww-temp { background: var(--navy) !important; color: #fff !important; font-variant-numeric: tabular-nums; }
.ww-temp .ww-lo { color: #aac0e0; font-weight: 600; }
.ww-hinweis { margin-top: 18px; text-align: center; }

/* Entfernungs- und Fahrzeit-Rechner auf der Kartenseite */
.dist-rechner { margin: 22px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; box-shadow: 0 4px 14px rgba(13, 44, 84, .05); }
.dist-rechner .dr-titel { font-size: 1.3rem; color: var(--navy); font-weight: 800; margin: 0 0 4px; }
.dist-rechner .dr-sub { color: #5a6b80; margin: 0 0 16px; font-size: .95rem; }
.dr-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.dr-form label { display: flex; flex-direction: column; gap: 5px; flex: 1 1 240px; }
.dr-form label span { font-weight: 700; color: var(--navy); font-size: .85rem; }
.dr-form select { padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); font-size: .95rem; font-weight: 600; cursor: pointer; }
.dr-form select:focus { outline: none; border-color: var(--red); }
.dr-pfeil { font-size: 1.3rem; color: #9aa8bd; padding-bottom: 10px; }
.dr-ergebnis { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
.dr-ergebnis[hidden] { display: none; }
.dr-stat { flex: 1 1 150px; background: var(--navy); color: #fff; border-radius: 10px; padding: 14px 16px; text-align: center; }
.dr-stat strong { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.dr-stat span { font-size: .82rem; color: #aac0e0; }
.dr-hinweis { margin: 14px 0 0; }
@media (max-width: 600px) { .dr-pfeil { display: none; } }

/* Reiseplaner: Etappen-Strecke zwischen zwei Zielen */
.plan-leg { display: flex; align-items: center; padding: 2px 0 2px 46px; }
.plan-leg span { font-size: .82rem; color: #6b7a90; font-weight: 600; letter-spacing: .01em; }

/* Reiseplaner: Kopfzeile nur fuer den PDF-/Druck-Export, am Bildschirm versteckt */
.plan-druck-kopf { display: none; }

/* Druckansicht des Reiseplaners: sauberer Reiseplan auf Papier/PDF */
@media print {
  .plan-karte-wrap, .plan-ctrl, .meldung-box, .section-sub, .plan-hinweis { display: none !important; }
  .plan-grid { display: block; }
  .plan-druck-kopf { display: block; margin: 0 0 14px; }
  .plan-druck-kopf h2 { font-size: 20pt; color: #000; margin: 0 0 4px; }
  .plan-druck-kopf .dk-zeile { font-size: 11pt; color: #000; margin: 0; font-weight: 700; }
  .plan-druck-kopf .dk-datum { font-size: 9pt; color: #555; margin: 2px 0 0; }
  .plan-statbar { display: none !important; }
  .plan-card { break-inside: avoid; border: 1px solid #bbb; box-shadow: none; background: #fff; }
  .plan-thumb { display: none !important; }
  .plan-num { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan-card h3, .plan-card a { color: #000; text-decoration: none; }
  .plan-leg { padding-left: 40px; }
  .plan-leg span { color: #333; }
}

/* Über-mich-Link im Footer */
.foot-ueber { display: inline-block; margin-top: 10px; color: #aac0e0; font-weight: 600; text-decoration: none; }
.foot-ueber:hover { color: #fff; }

/* Consent-Banner */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--navy); color: #fff; box-shadow: 0 -6px 24px rgba(13,44,84,.25); }
.consent[hidden] { display: none; }
.consent-inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consent-text { font-size: .92rem; margin: 0; max-width: 760px; line-height: 1.5; }
.consent-text a { color: #fff; text-decoration: underline; }
.consent-btns { display: flex; gap: 10px; flex: none; }
.consent button { border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: .9rem; cursor: pointer; }
.consent .c-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.consent .c-accept { background: var(--red); color: #fff; }
.consent .c-accept:hover { background: var(--red-dark); }
@media (max-width: 600px) { .consent-inner { flex-direction: column; align-items: stretch; } .consent-btns { justify-content: flex-end; } }

/* Hero-Slider (wechselnder Header) */
/* Auf dem Handy bleibt der Header hoch genug für die Überschrift. */
.hero-slider { position: relative; min-height: 74vh; overflow: hidden; }
/* Ab Tablet-Breite ein festes Banner-Format 21:9. */
@media (min-width: 800px) {
  .hero-slider { min-height: 0; aspect-ratio: 21 / 9; max-height: 90vh; }
}
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 6vw;
  background-size: cover; background-position: center; color: #fff; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.hero-slide.aktiv { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-slide h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 900; line-height: 1.04; }
.hero-slide .lead { margin-top: 22px; font-size: clamp(1.08rem, 2vw, 1.35rem); max-width: 620px; opacity: .94; }
.hero-dots { position: absolute; z-index: 3; bottom: 22px; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; }
.hero-dot { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.hero-dot.aktiv { background: #fff; transform: scale(1.25); }

/* Persönlicher Vorstellungs-Block */
.intro-personal { padding: 7vh 6vw; }
.ip-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 270px 1fr; gap: 44px; align-items: center; }
.ip-foto img { width: 100%; border-radius: 14px; box-shadow: var(--shadow); display: block; aspect-ratio: 4/5; object-fit: cover; }
.ip-text .region { margin-bottom: 10px; }
.ip-text .ip-lead { font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 500; line-height: 1.5; color: var(--ink); }
.ip-text .btn-ghost { margin-top: 24px; }
@media (max-width: 760px) { .ip-inner { grid-template-columns: 1fr; gap: 24px; justify-items: start; } .ip-foto { max-width: 230px; } }

/* News-Block */
.news-section { padding-top: 2vh; }
.news-list { max-width: var(--maxw); margin: 8px auto 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.news-item { border-bottom: 1px solid var(--line); }
.news-item a { display: block; padding: 16px 4px; transition: background .15s; }
.news-item a:hover { background: #f4f8fd; }
.news-title { display: block; color: var(--navy); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.news-item a:hover .news-title { color: var(--red); }
.news-meta { display: block; margin-top: 4px; font-size: .82rem; color: var(--muted); }
.news-hinweis { max-width: var(--maxw); margin: 18px auto 0; font-size: .82rem; color: var(--muted); font-style: italic; }
@media (max-width: 760px) { .news-list { grid-template-columns: 1fr; gap: 0; } }

/* Event-/Veranstaltungs-Karten */
.event-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius); padding: 20px 22px 18px; box-shadow: 0 6px 18px rgba(13,44,84,.05); display: flex; flex-direction: column; }
.event-card.kat-natur { border-top-color: #2e9b57; }
.event-card.kat-sport { border-top-color: #e8643f; }
.event-card.kat-saison { border-top-color: var(--navy-2); }
.event-kat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.event-card.kat-natur .event-kat { color: #2e9b57; }
.event-card.kat-sport .event-kat { color: #e8643f; }
.event-card.kat-saison .event-kat { color: var(--navy-2); }
.event-card h3 { margin: 8px 0 4px; color: var(--navy); font-size: 1.18rem; }
.event-ort { font-size: .85rem; color: var(--muted); font-weight: 600; }
.event-text { margin: 10px 0 14px; color: #2c3c52; font-size: .95rem; flex: 1; }
.event-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; }
.event-links a { font-weight: 700; font-size: .88rem; color: var(--red); }
.event-links a.event-ziel { color: var(--navy); }
.event-links a:hover { text-decoration: underline; }

/* === Merkliste "Meine Reise" === */
.nav-merk { display: inline-flex; align-items: center; gap: 6px; }
.merk-zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
.merk-zaehler[hidden] { display: none; }
.merk-btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 16px; padding: 12px 16px; border: 2px solid var(--red); background: #fff; color: var(--red); border-radius: 10px; font-weight: 800; font-size: .95rem; cursor: pointer; transition: background .15s, color .15s; }
.merk-btn:hover { background: #fff2f3; }
.merk-btn.aktiv { background: var(--red); color: #fff; }
.merk-btn .merk-ic { font-size: 1.15rem; line-height: 1; font-weight: 700; }
.merk-btn.aktiv .merk-ic { transform: rotate(45deg); }

/* Reiseplaner */
.meldung-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff7e6; border: 1px solid #ffe0a0; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }
.meldung-box[hidden] { display: none; }
.plan-leer { text-align: center; padding: 40px 20px; background: var(--sand, #f5f1e8); border-radius: 14px; }
.plan-leer .btn { margin-top: 12px; }
.btn.klein { padding: 9px 16px; font-size: .9rem; margin-top: 0; }
.plan-statbar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.plan-stat { flex: 1; min-width: 120px; background: var(--navy, #0d2c54); color: #fff; border-radius: 12px; padding: 14px 18px; text-align: center; }
.plan-stat strong { display: block; font-size: 1.5rem; font-weight: 800; }
.plan-stat span { font-size: .82rem; opacity: .85; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 800px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #dde6f1; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(13,44,84,.05); }
.plan-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.plan-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.plan-info { flex: 1; min-width: 0; }
.plan-info h3 { margin: 0; font-size: 1rem; }
.plan-info h3 a { color: var(--navy, #0d2c54); text-decoration: none; }
.plan-meta { font-size: .8rem; color: #5a6b80; }
.plan-ctrl { display: flex; gap: 4px; }
.plan-ctrl button { width: 30px; height: 30px; border: 1px solid #cdd8e6; background: #f3f7fc; border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; color: #0d2c54; }
.plan-ctrl button:hover { background: #e6eef7; }
.plan-ctrl .pc-del { color: var(--red); }
.plan-karte-wrap { position: sticky; top: 90px; }
#planmap { height: 420px; border-radius: 12px; }
.plan-aktionen { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.plan-hinweis { margin-top: 10px; }
.plan-pin span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--red); color: #fff; font-weight: 800; font-size: .82rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.plan-pin span b { display: block; transform: rotate(45deg); line-height: 1; }

/* Interaktive USA-Karte */
.karte-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.kf-btn { padding: 8px 14px; border: 1px solid #cdd8e6; background: #fff; border-radius: 999px; font-weight: 700; font-size: .85rem; color: var(--navy, #0d2c54); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.kf-btn:hover { background: #f3f7fc; }
.kf-btn.aktiv { background: var(--navy, #0d2c54); color: #fff; border-color: var(--navy, #0d2c54); }
.karte-gross { height: 560px; border-radius: 14px; }
@media (max-width: 600px) { .karte-gross { height: 440px; } }
.karte-pin span { display: block; width: 16px; height: 16px; background: var(--red); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.merk-btn.merk-mini { width: auto; margin-top: 8px; padding: 6px 10px; font-size: .8rem; border-width: 1px; }

/* Forum der Woche (Startseite) */
.fw-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .fw-grid { grid-template-columns: 1fr; } }
.fw-card { background: #fff; border: 1px solid #dde6f1; border-radius: 14px; padding: 22px 24px; box-shadow: 0 6px 18px rgba(13,44,84,.06); }
.fw-label { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; color: var(--red); margin-bottom: 10px; }
.fw-frage h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--navy, #0d2c54); }
.fw-frage p { margin: 0 0 12px; color: #36475c; }
.fw-link { font-weight: 700; text-decoration: none; color: var(--red); }
.fw-stimme blockquote { margin: 0 0 12px; font-size: 1.08rem; line-height: 1.5; color: #1c2a3a; font-style: italic; }
.fw-stimme cite { font-style: normal; font-size: .85rem; color: #5a6b80; }
.fw-stimme cite a { color: var(--navy, #0d2c54); font-weight: 700; }

/* Forum-Seite: Abstimmung */
.umfrage-form { display: grid; gap: 12px; }
.umfrage-opt { width: 100%; text-align: left; padding: 16px 20px; border: 2px solid #dde6f1; background: #fff; border-radius: 12px; font-size: 1.02rem; font-weight: 700; color: var(--navy, #0d2c54); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.umfrage-opt:hover { border-color: var(--red); background: #fff5f6; transform: translateY(-1px); }
.umfrage-ergebnis { display: grid; gap: 16px; }
.ue-zeile.ue-meine .ue-kopf span { color: var(--red); font-weight: 800; }
.ue-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 1rem; color: var(--navy, #0d2c54); }
.ue-kopf strong { font-size: 1.05rem; }
.ue-bar { height: 14px; background: #e6edf5; border-radius: 999px; overflow: hidden; }
.ue-bar span { display: block; height: 100%; background: var(--red); border-radius: 999px; transition: width .5s ease; }
.ue-zeile.ue-meine .ue-bar span { background: var(--navy, #0d2c54); }

/* Forum-Suche: längere Beiträge mit Aufklappen */
.treffer-text { line-height: 1.7; color: #2a3a4d; }
.treffer-text.gekuerzt { max-height: 12em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.treffer-text.gekuerzt.offen { max-height: none; -webkit-mask-image: none; mask-image: none; }
.treffer-mehr { display: inline-block; background: none; border: 0; color: var(--red); font-weight: 700; cursor: pointer; padding: 8px 0 0; font-size: .92rem; }
.treffer-mehr:hover { text-decoration: underline; }

.treffer-text p { margin: 0 0 0.85em; }
.treffer-text p:last-child { margin-bottom: 0; }

/* Fließtext-Listen und Überschriften in .detail-body (Auswandern, Forum-Seite, Reiseziele) */
.detail-body h2:not(.abschnitt) { font-size: 1.5rem; color: var(--navy); font-weight: 800; margin: 40px 0 14px; }
.detail-body h2:not(.abschnitt):first-child { margin-top: 0; }
.detail-body ul { margin: 4px 0 28px; padding-left: 1.5em; }
.detail-body li { font-size: 1.1rem; line-height: 1.7; color: #2c3c52; margin-bottom: 14px; padding-left: 4px; }
.detail-body p { margin-bottom: 28px; }

/* Daten-Balkengrafik (Nationalpark-Besucher) */
.np-chart { display: grid; gap: 15px; }
.np-row { display: flex; align-items: center; gap: 14px; }
.np-rang { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #e6edf5; color: var(--navy, #0d2c54); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.np-top .np-rang { background: var(--red); color: #fff; }
.np-body { flex: 1; min-width: 0; }
.np-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.np-name { font-weight: 700; }
.np-name a { color: var(--navy, #0d2c54); text-decoration: none; }
.np-name a:hover { text-decoration: underline; color: var(--red); }
.np-zahl { font-weight: 800; color: #36475c; font-size: .95rem; white-space: nowrap; }
.np-bar { height: 16px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.np-bar span { display: block; height: 100%; background: linear-gradient(90deg, #d8455a, var(--red)); border-radius: 999px; }
.np-top .np-bar span { background: linear-gradient(90deg, #e8643f, var(--red)); }

/* Daten-Rubrik: Übersicht (Hub) */
.daten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; max-width: var(--maxw); margin: 0 auto; }
.daten-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid #dde6f1; border-radius: 14px; padding: 22px 24px; text-decoration: none; color: inherit; box-shadow: 0 6px 18px rgba(13,44,84,.06); transition: transform .15s, box-shadow .2s; }
.daten-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13,44,84,.12); }
.daten-karte h3 { margin: 0 0 8px; font-size: 1.18rem; color: var(--navy, #0d2c54); }
.daten-karte p { margin: 0 0 14px; color: #5a6b80; font-size: .94rem; flex: 1; }
.daten-top { background: var(--sand, #f5f1e8); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.dt-label { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 800; color: var(--red); margin-bottom: 2px; }
.daten-top strong { color: var(--navy, #0d2c54); font-size: .98rem; }
.daten-link { font-weight: 800; color: var(--red); }
.daten-mehr { display: flex; flex-direction: column; gap: 9px; }
.daten-mehr a { color: var(--navy, #0d2c54); text-decoration: none; font-weight: 700; }
.daten-mehr a:hover { color: var(--red); }

/* Forum-Inhaltsseiten: Fehler, Reisepläne, FAQ */
.fehler-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
@media (max-width: 720px) { .fehler-grid { grid-template-columns: 1fr; } }
.fehler-card { position: relative; background: #fff; border: 1px solid #dde6f1; border-radius: 12px; padding: 22px 22px 20px; box-shadow: 0 4px 12px rgba(13,44,84,.05); }
.fehler-num { position: absolute; top: -12px; left: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(216,69,90,.35); }
.fehler-card h3 { margin: 8px 0 8px; font-size: 1.12rem; color: var(--navy, #0d2c54); }
.fehler-card p { margin: 0; color: #36475c; line-height: 1.65; }

.plan-block { background: #fff; border: 1px solid #dde6f1; border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 4px 12px rgba(13,44,84,.05); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.plan-head h3 { margin: 0; font-size: 1.25rem; color: var(--navy, #0d2c54); }
.plan-dauer { background: var(--navy, #0d2c54); color: #fff; font-weight: 700; font-size: .8rem; padding: 4px 13px; border-radius: 999px; white-space: nowrap; }
.plan-stationen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-bottom: 14px; }
.plan-chip { background: var(--sand, #f5f1e8); border: 1px solid #e6ddc9; color: var(--navy, #0d2c54); font-weight: 600; font-size: .92rem; padding: 6px 12px; border-radius: 8px; }
.plan-pfeil { color: var(--red); font-weight: 800; }
.plan-notiz { margin: 0; color: #46586c; font-style: italic; line-height: 1.65; }

.faq-liste { display: grid; gap: 14px; }
.faq-item { background: #fff; border: 1px solid #dde6f1; border-radius: 12px; padding: 18px 22px; box-shadow: 0 4px 12px rgba(13,44,84,.04); }
.faq-item h3 { margin: 0 0 8px; font-size: 1.12rem; color: var(--navy, #0d2c54); }
.faq-item p { margin: 0; color: #36475c; line-height: 1.65; }

/* Vergleichsseiten */
.vgl-koepfe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 26px; }
.vgl-karte { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; border-radius: 14px; padding: 16px 18px; text-decoration: none; background-size: cover; background-position: center; box-shadow: 0 8px 22px rgba(13,44,84,.16); overflow: hidden; }
.vgl-karte-region { align-self: flex-start; color: #fff; font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.vgl-karte-name { color: #fff; font-weight: 800; font-size: 1.3rem; line-height: 1.15; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.vgl-vs { font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
@media (max-width: 640px) { .vgl-koepfe { grid-template-columns: 1fr; } .vgl-vs { padding: 2px 0; } }

.vgl-tabelle { border: 1px solid #dde6f1; border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 26px; }
.vgl-zeile { display: grid; grid-template-columns: 150px 1fr 1fr; border-top: 1px solid #eef2f7; }
.vgl-zeile:first-child { border-top: 0; }
.vgl-head { background: var(--navy, #0d2c54); }
.vgl-head .vgl-seite { color: #fff; font-weight: 800; font-size: .98rem; }
.vgl-thema { padding: 14px 16px; font-weight: 800; color: var(--navy, #0d2c54); background: #f6f9fc; font-size: .92rem; }
.vgl-head .vgl-thema { background: transparent; }
.vgl-seite { padding: 14px 16px; color: #36475c; line-height: 1.55; font-size: .95rem; border-left: 1px solid #eef2f7; }
@media (max-width: 640px) {
  .vgl-zeile { grid-template-columns: 1fr; }
  .vgl-head { display: none; }
  .vgl-thema { background: var(--navy, #0d2c54); color: #fff; }
  .vgl-seite { border-left: 0; }
  .vgl-seite::before { content: attr(data-label) ": "; font-weight: 800; color: var(--navy, #0d2c54); }
}

.vgl-stimme { margin: 0 0 26px; background: var(--sand, #f5f1e8); border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; padding: 18px 22px; }
.vgl-stimme p { margin: 0 0 8px; color: #2c3a4d; line-height: 1.65; font-style: italic; }
.vgl-stimme cite { color: #7a8aa0; font-style: normal; font-weight: 700; font-size: .85rem; }

.vgl-fazit { background: #fff; border: 1px solid #dde6f1; border-radius: 14px; padding: 20px 24px; margin-bottom: 22px; box-shadow: 0 4px 12px rgba(13,44,84,.05); }
.vgl-fazit h2 { margin: 0 0 8px; font-size: 1.2rem; color: var(--navy, #0d2c54); }
.vgl-fazit p { margin: 0 0 10px; color: #36475c; line-height: 1.65; }
.vgl-fazit .vgl-beide { margin: 0; color: #46586c; font-weight: 600; }

.vgl-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.btn-sek { background: #fff; color: var(--navy, #0d2c54); border: 1px solid #c9d6e5; }
.vgl-weitere-liste { display: flex; flex-wrap: wrap; gap: 10px 20px; max-width: var(--maxw); margin: 0 auto; }
.vgl-weitere-liste a { color: var(--navy, #0d2c54); text-decoration: none; font-weight: 700; }
.vgl-weitere-liste a:hover { color: var(--red); }

/* Empfehlungen (Hotels und Restaurants) */
.emp-region { margin-bottom: 34px; }
.emp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .emp-grid { grid-template-columns: 1fr; } }
.emp-karte { position: relative; background: #fff; border: 1px solid #dde6f1; border-radius: 12px; padding: 20px 22px; box-shadow: 0 4px 12px rgba(13,44,84,.05); }
.emp-art { display: inline-block; background: var(--navy, #0d2c54); color: #fff; font-weight: 800; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.emp-art.emp-essen { background: var(--red); }
.emp-karte h3 { margin: 0 0 2px; font-size: 1.1rem; color: var(--navy, #0d2c54); }
.emp-ort { margin: 0 0 8px; color: #7a8aa0; font-weight: 600; font-size: .85rem; }
.emp-text { margin: 0; color: #36475c; line-height: 1.6; font-size: .95rem; }

/* Glossar */
.glossar-gruppe { margin-bottom: 30px; }
.glossar-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; }
@media (max-width: 720px) { .glossar-liste { grid-template-columns: 1fr; } }
.glossar-item { background: #fff; border: 1px solid #dde6f1; border-radius: 12px; padding: 16px 20px; box-shadow: 0 3px 10px rgba(13,44,84,.04); }
.glossar-item dt { font-weight: 800; color: var(--navy, #0d2c54); margin-bottom: 6px; font-size: 1.02rem; }
.glossar-item dd { margin: 0; color: #36475c; line-height: 1.6; font-size: .94rem; }

/* Instagram-Folgen-Button auf den Zielseiten */
.ig-btn { display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center; margin-top: 10px; padding: 11px 16px; border-radius: 10px; text-decoration: none; font-weight: 800; font-size: .95rem; color: #fff; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); transition: filter .15s, transform .15s; }
.ig-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ig-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.ig-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ig-txt small { font-weight: 600; opacity: .92; font-size: .78rem; }

/* Kleine Foto-Galerie fuer Personenbilder: klein zeigen, nie hochskalieren */
.foto-galerie { display: flex; flex-wrap: wrap; gap: 20px 18px; justify-content: flex-start; align-items: flex-start; margin: 1.75rem 0; }
.foto-galerie figure { margin: 0; max-width: 240px; }
.foto-galerie img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(7,26,51,.14); }
.foto-galerie figcaption { font-size: .8rem; line-height: 1.35; color: #5a6a7a; margin-top: .5rem; text-align: left; }

/* Instagram-Verweis auf der Startseite (kein Fremd-Skript, datenschutzfreundlich) */
.insta-cta { display: flex; align-items: center; gap: 22px; background: linear-gradient(120deg, #0d2c54, #123a6b); color: #f4f8fd; border-radius: 16px; padding: 26px 30px; text-decoration: none; box-shadow: 0 10px 30px rgba(13,44,84,.14); transition: transform .15s ease, box-shadow .15s ease; }
.insta-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(13,44,84,.22); }
.insta-cta .insta-ic { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; }
.insta-cta .insta-txt { display: flex; flex-direction: column; gap: 4px; }
.insta-cta .insta-txt strong { font-size: 1.15rem; font-weight: 700; }
.insta-cta .insta-txt span { color: #c7d6ea; font-size: .95rem; line-height: 1.5; }
.insta-cta .insta-handle { margin-left: auto; flex: none; font-weight: 700; font-size: .95rem; color: #fff; background: #e8643f; padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) { .insta-cta { flex-wrap: wrap; gap: 16px; } .insta-cta .insta-handle { margin-left: 0; } }

/* Lesezeit im Detail-Hero und Inhaltsverzeichnis auf langen Beitraegen */
.meta-lesezeit { margin-top: 10px; font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.82); }
.beitrag-toc { background: #f4f8fd; border: 1px solid #dde6f1; border-radius: 12px; padding: 16px 20px 14px; margin: 0 0 28px; }
.beitrag-toc .toc-titel { margin: 0 0 8px; font-weight: 700; color: #0d2c54; font-size: .95rem; }
.beitrag-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 5px; }
.beitrag-toc a { color: #123a6b; text-decoration: none; }
.beitrag-toc a:hover { text-decoration: underline; color: #e8643f; }
html { scroll-behavior: smooth; }

/* Teilen: Social-Buttons (WhatsApp, Facebook, X, E-Mail) plus Link kopieren, ohne Fremd-Skript */
.teilen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 24px 0 4px; }
.teilen-label { font-size: .9rem; font-weight: 600; color: #5a6b80; margin-right: 2px; }
.teilen .t-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #cdd8e6; color: #0d2c54; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.teilen .t-ico:hover { transform: translateY(-1px); }
.teilen .t-wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.teilen .t-fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.teilen .t-x:hover { background: #000; border-color: #000; color: #fff; }
.teilen .t-ml:hover { background: #0d2c54; border-color: #0d2c54; color: #fff; }
.teilen .t-cp:hover { background: #e8643f; border-color: #e8643f; color: #fff; }
.teilen .t-cp.kopiert { background: #1f9d55; border-color: #1f9d55; color: #fff; position: relative; }
.teilen .t-cp.kopiert::after { content: attr(data-copied); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: #1f9d55; color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }