:root {
  --accent: #c8102e;
  --accent-dark: #9e0c24;
  --ink: #13283d;
  --text: #2a3540;
  --muted: #5f6b76;
  --line: #e4e8eb;
  --bg: #ffffff;
  --tint: #f3f6f8;
  --snow: #fbfcfd;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(19, 40, 61, .06), 0 8px 24px rgba(19, 40, 61, .08);
  --shadow-lg: 0 18px 50px rgba(19, 40, 61, .18);
  /* Text in Systemschriften (Entscheidung des Nutzers 28.10.2026). Überschriften seit 30.10.2026 wieder Fraunces, lokal von der Site:
     build.py (site_fonts) setzt die Schrift vor diesen Stack; bis sie geladen ist, gelten die Systemschriften */
  --serif: "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font: 17px/1.7 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; }
h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 4rem); letter-spacing: -.01em; margin: .2em 0 .35em; }
h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .5em; }
h3 { font-size: 1.15rem; font-weight: 600; margin: 1.2em 0 .35em; }
h4, .foot__h { font-family: var(--sans); font-weight: 600; line-height: 1.4; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .8rem; color: #fff; opacity: .7; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; border-radius: 999px;
  padding: .7rem 1.35rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn--ghost { color: #fff; border: 2px solid rgba(255,255,255,.75); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--lg { padding: .95rem 1.7rem; font-size: 1.05rem; }
.btn--sm { padding: .5rem 1.05rem; font-size: .92rem; }

/* Header */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top--overlay { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; }
.top--overlay .brand, .top--overlay .nav a:not(.btn) { color: #fff; }
.top--overlay.top--solid { background: rgba(255,255,255,.97); border-color: var(--line); box-shadow: var(--shadow); }
.top--overlay.top--solid .brand, .top--overlay.top--solid .nav a:not(.btn) { color: var(--ink); }
/* Über dem Heldenbild: Kopf-Button und Haupt-Button weiß mit Akzentschrift, damit sie sich vom dunklen Bild abheben (1.34.0, Messung tools/cta_contrast.py) */
.top--overlay:not(.top--solid) .top__cta, .hero__ctas .btn--primary { background: #fff; color: var(--accent-dark); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.top--overlay:not(.top--solid) .top__cta:hover, .hero__ctas .btn--primary:hover { background: #f3f4f6; }
/* Menülinks über dem Heldenbild: Hover weiß mit Unterstrich statt Akzentfarbe (Akzent verschwand im dunklen Bild, 1.34.1) */
.top--overlay:not(.top--solid) .nav:not(.nav--open) a:not(.btn):hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.top__inner { max-width: var(--max); margin: 0 auto; padding: .75rem 20px; display: flex; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  color: var(--ink); text-decoration: none; }
.logo { width: 36px; height: 36px; flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.nav ul { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .97rem; }
.nav a:not(.btn):hover { color: var(--accent); }
.lang { border: 1.5px solid currentColor; border-radius: 999px; padding: .15rem .65rem; font-size: .82rem !important; font-weight: 600 !important; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; width: 42px; height: 42px; cursor: pointer; padding: 9px; }
.top__cta { flex: none; white-space: nowrap; }
#tours { scroll-margin-top: 84px; }
.tcard__incl { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; color: var(--ink); }
.tcard__incl li { position: relative; padding-left: 1.35rem; }
.tcard__incl li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
/* Einzelne Tour-Karte (Infoseiten): breit statt allein in einer Spalte */
.picks__grid:has(> .tcard:only-child) { grid-template-columns: 1fr; }
@media (min-width: 700px) { .picks__grid > .tcard:only-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .picks__grid > .tcard:only-child .card__img { height: 100%; aspect-ratio: auto; object-fit: cover; } }
.foot__more li + li { margin-top: .1rem; }
.nav-toggle span { display: block; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; }
.top--overlay:not(.top--solid) .nav-toggle { color: #fff; }

/* Hero */
/* Geometrie hängt nur vom Fenster ab, nicht von der Textlänge: Bildfläche fest (oben verankert, unten Verlauf ins Dunkelblau),
   Text beginnt auf fester Höhe. Längere Übersetzungen verlängern nur den Hero nach unten, Bildausschnitt und H1 bleiben stehen. */
.hero { --hero-min: 78vh; --hero-text: 34rem; position: relative; min-height: var(--hero-min); display: flex; align-items: flex-start;
  color: #fff; background: #0a1826; isolation: isolate; overflow: hidden; }
.hero__img { position: absolute; top: 0; left: 0; width: 100%; height: calc(max(var(--hero-min), 44rem) + 4rem); object-fit: cover; z-index: -2;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 4rem), transparent); mask-image: linear-gradient(#000 calc(100% - 4rem), transparent); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,24,38,.55) 0%, rgba(10,24,38,.25) 35%, rgba(10,24,38,.75) 100%); }
.hero--home { --hero-min: 92vh; --hero-text: 38rem; }
.hero__inner { max-width: var(--max); width: 100%; margin: 0 auto; padding: max(8rem, calc(var(--hero-min) - var(--hero-text))) 20px 4.5rem; }
.hero h1 { color: #fff; max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.sr-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h1-sub { display: block; font-size: .45em; font-weight: 600; letter-spacing: 0; margin-top: .35em; opacity: .95; }
.kicker { display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: rgba(10,24,38,.45); border-left: 3px solid var(--accent); padding: .35rem .7rem; border-radius: 4px; margin: 0 0 .4rem; }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 54ch; color: rgba(255,255,255,.92); margin: 0 0 1.8rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; list-style: none; padding: 0; margin: 1.8rem 0 0; font-size: .95rem; color: rgba(255,255,255,.9); }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
.crumbs a { color: inherit; }
.crumbs--light { color: rgba(255,255,255,.8); }

.pagehead { background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--ink) 70%, var(--accent))); color: #fff; }
.pagehead__inner { max-width: var(--max); margin: 0 auto; padding: 3.5rem 20px 3rem; }
.pagehead h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.pagehead .crumbs, .pagehead .crumbs a { color: rgba(255,255,255,.75); }
.pagehead__lead { font-size: 1.15rem; max-width: 60ch; color: rgba(255,255,255,.9); margin: 0; }

/* Bands and content */
.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band--tint { background: var(--tint); }
.band__inner { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section-head { max-width: 60ch; margin-bottom: 2rem; }
.section-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--text); }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.facts div { background: var(--tint); border-radius: 12px; padding: .9rem 1rem; }
.facts strong { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.facts span { font-size: .88rem; color: var(--muted); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  text-decoration: none; color: var(--text); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.card__img--empty { aspect-ratio: 3/2; background: linear-gradient(135deg, #cfdbe4, #eef3f6); }
.card__body { padding: 1.1rem 1.25rem 1.4rem; }
.card__body h3 { margin: .2rem 0 .35rem; font-size: 1.2rem; }
.card__body p { margin: 0; font-size: .96rem; color: var(--muted); line-height: 1.55; }
.card__tag { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.more { margin-top: 2rem; }
.more a { font-weight: 600; text-decoration: none; }

/* Tours */
.tours__intro { color: var(--muted); max-width: 60ch; }
.ad-note { font-size: .86rem; color: var(--muted); margin: 0 0 1.2rem; }
/* Platz für das GYG-Widget reservieren, damit die Seite beim Laden nicht springt (gemessen 10/2026:
   ab ~600 px Breite 3 Spalten, 2 Reihen = 958 px; darunter 1 Spalte, Höhe wächst mit der Breite) */
.tours__widget { --gyg-items: 6; --gyg-rows: 2; min-height: calc(var(--gyg-rows) * 470px + 18px); border-radius: var(--radius); }
.tours__widget:empty { background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,.015)); }
@media (max-width: 600px) {
  .tours__widget { min-height: calc(var(--gyg-items) * (172px + .55 * (100vw - 32px))); }
}
/* Platzhalter für das GYG-Widget: Solange das Widget leer ist, liegen Platzhalter-Karten hinter ihm. Ab data-gyg-widget-rendered
   (meldet nur die Höhe, die Karten können Sekunden später kommen) lösen sie sich in einen gleichmäßigen Schimmer-Schleier auf,
   weil GYG seine Karten anders anlegt. Das iframe ist durchsichtig, bis GYG malt, und deckt den Schleier ab. Er blendet aus,
   sobald das iframe fertig geladen ist (Klasse tours__frame--ready aus dem GYG-Lader), spätestens 30 s nach rendered.
   data-gyg-widget-lcp taugt nicht als Signal (fester Wert nach ~5 s). Ohne :has() nichts davon. */
.tours__frame { position: relative; }
.tours__skel { display: none; }
@supports selector(:has(*)) {
  .tours__widget { position: relative; z-index: 1; }
  .tours__widget:empty { background: none; }
  .tours__skel { display: grid; position: absolute; inset: 0; z-index: 0; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; pointer-events: none; transition: opacity .6s ease, visibility 0s linear .6s; }
  .tours__frame:has(iframe[data-gyg-widget-rendered]) .tours__skel, .tours__frame--ready .tours__skel { opacity: 0; visibility: hidden; }
  .tours__frame::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; pointer-events: none; opacity: 0; visibility: hidden;
    background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) 0 0 / 250% 100% no-repeat, color-mix(in srgb, var(--accent) 4%, rgba(19,40,61,.045));
    transition: opacity .6s ease, visibility 0s linear .6s; }
  .tours__frame:has(iframe[data-gyg-widget-rendered])::before { opacity: 1; visibility: visible; transition: opacity .6s ease; animation: tours-wash 2.4s ease-in-out infinite, tours-skel-out .6s ease 30s forwards; }
  .tours__frame.tours__frame--ready:has(iframe)::before { opacity: 0; visibility: hidden; transition: opacity .6s ease .25s, visibility 0s linear .85s; animation: none; }
}
@keyframes tours-skel-out { to { opacity: 0; visibility: hidden; } }
@keyframes tours-wash { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .tours__frame:has(iframe[data-gyg-widget-rendered])::before { animation: tours-skel-out .6s ease 30s forwards; } }
.tours__skel span { position: relative; display: flex; flex-direction: column; gap: .7rem; padding-bottom: 1.3rem; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(19,40,61,.05), 0 6px 18px rgba(19,40,61,.05); }
.tours__skel i { display: block; height: .75rem; margin: 0 1.2rem; border-radius: 6px; background: #edf0f2; }
.tours__skel i:first-child { flex: 1; height: auto; margin: 0 0 .5rem; border-radius: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, #eceff1), #f4f6f7); }
.tours__skel i:nth-child(2) { height: 1rem; width: 74%; }
.tours__skel i:nth-child(3) { width: 52%; }
.tours__skel i:nth-child(4) { width: 30%; }
.tours__skel span::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.65) 50%, transparent 75%); animation: tours-skel 2.2s cubic-bezier(.4,0,.2,1) 20; }
.tours__skel span:nth-child(3n+2)::after { animation-delay: .18s; }
.tours__skel span:nth-child(3n)::after { animation-delay: .36s; }
@keyframes tours-skel { 0% { transform: translateX(-100%); } 65%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .tours__skel span::after { animation: none; } }
@media (max-width: 600px) {
  .tours__skel { grid-template-columns: 1fr; }
  .tours__skel .x { display: none; }
}
.tours__more { margin: 1.6rem 0 0; }

/* Planning grid */
.plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.plan__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.plan__item h3 { margin-top: 0; font-family: var(--serif); font-size: 1.35rem; }
.plan__item p { margin: 0 0 .8rem; }
.plan__item a { font-weight: 600; text-decoration: none; }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .7rem 0 0; color: var(--muted); }

/* CTA band */
.ctaband { background: linear-gradient(120deg, var(--accent-dark), var(--accent)); color: #fff; text-align: center; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.ctaband h2 { color: #fff; }
.ctaband p { max-width: 52ch; margin: 0 auto 1.6rem; opacity: .92; font-size: 1.1rem; }
.ctaband .btn--primary { background: #fff; color: var(--accent-dark); box-shadow: none; }
.ctaband .btn--primary:hover { background: #fff; }

.draft-note { background: #fff6d6; border: 1px solid #f0d67a; padding: .7rem 1rem; border-radius: 10px; font-size: .95rem; }

/* Footer */
.foot { background: var(--ink); color: rgba(255,255,255,.78); font-size: .94rem; padding: 3.5rem 0 1.5rem; }
.foot__grid { max-width: var(--max); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: .35rem 0; }
.foot a { color: rgba(255,255,255,.85); text-decoration: none; }
.foot a:hover { color: #fff; }
.brand--light { color: #fff; }
.foot__indep { font-size: .85rem; opacity: .7; }
.foot__small { max-width: var(--max); margin: 2.5rem auto 0; padding: 1.2rem 20px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; opacity: .65; }

/* Responsive */
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
/* nav-collapse: build.py setzt diesen Block mit eigenem Breakpoint in die Seite, wenn Kopfzeile (Logo, Menü, Sprachen, Button) breiter ist */
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .brand { min-width: 0; font-size: 1.02rem; gap: .45rem; }
  .logo { width: 30px; height: 30px; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top__cta { margin-left: auto; padding: .42rem .8rem; font-size: .82rem; }
  .nav-toggle { margin-left: .2rem; flex: none; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch;
    padding: 1rem 20px 1.4rem; gap: .9rem; box-shadow: var(--shadow-lg); }
  .nav.nav--open { display: flex; }
  .nav ul { flex-direction: column; gap: .2rem; }
  .nav ul a { display: block; padding: .5rem 0; }
  .top--overlay .nav a:not(.btn) { color: var(--ink); }
  .lang { align-self: flex-start; }
}
/* /nav-collapse */
@media (max-width: 820px) {
  .hero__inner { padding-bottom: 3rem; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cards, .plan, .facts { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .brand span { font-size: 1.05rem; }
  .hero--home { --hero-min: 88vh; }
}

/* Vergleichstabelle */
.compare { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--serif); color: var(--ink); background: var(--tint); font-weight: 600; }
.compare tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.compare td { color: var(--muted); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare--narrow table { min-width: 0; }
/* Handy: Tabellenzeilen als Karten, Spaltenname aus data-th über jedem Wert */
@media (max-width: 600px) {
  .compare:not(.compare--scroll) { border: 0; background: none; overflow: visible; }
  .compare:not(.compare--scroll) table { min-width: 0; font-size: .95rem; }
  .compare:not(.compare--scroll) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare:not(.compare--scroll) tbody, .compare:not(.compare--scroll) tr, .compare:not(.compare--scroll) td, .compare:not(.compare--scroll) tbody th { display: block; }
  .compare:not(.compare--scroll) tr { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .75rem .95rem; margin-bottom: .75rem; }
  .compare:not(.compare--scroll) td, .compare:not(.compare--scroll) tbody th { border: 0; padding: .3rem 0; white-space: normal; }
  .compare:not(.compare--scroll) tr > :first-child { color: var(--ink); font-weight: 600; font-size: 1.02rem; padding-top: 0; }
  .compare:not(.compare--scroll) td[data-th]:not(:first-child), .compare:not(.compare--scroll) th[data-th]:not(:first-child) {
    display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: .75rem; }
  .compare:not(.compare--scroll) td[data-th]:not(:first-child)::before, .compare:not(.compare--scroll) th[data-th]:not(:first-child)::before {
    content: attr(data-th); font-size: .82rem; font-weight: 600; color: var(--muted); padding-top: .08rem; }
}
.split--top { align-items: start; }

/* Handverlesene Tour-Karten ([[picks]] / [[tour]]) */
.picks .picks__grid { margin-top: .4rem; }
.tcard .card__body { display: flex; flex-direction: column; flex: 1; }
.tcard__top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.tcard__price { font-size: .82rem; font-weight: 700; color: #fff; background: var(--accent-dark); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; }
.tcard__meta { list-style: none; margin: .1rem 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .86rem; color: var(--muted); }
.tcard__cta { margin-top: auto; padding-top: .9rem; font-weight: 600; font-size: .95rem; color: var(--accent); }
.tcard p { margin-bottom: 0; }

/* Selbst gezeichnete Seekarten (SVG inline, Daten OpenStreetMap) */
.lakemap { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; font-family: var(--sans); }
.lakemap__water path { fill: #cfe3ee; stroke: #5b8fa8; stroke-width: 1.2; stroke-linejoin: round; }
.lakemap circle { fill: var(--accent, #1f6f8b); stroke: #fff; stroke-width: 2; }
.lakemap text { font-size: 17px; fill: var(--ink, #13283d); font-weight: 500; }
.lakemap .lakemap__link { fill: var(--accent, #1f6f8b); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lakemap .lakemap__region { font-size: 15px; fill: #7a8a96; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.lakemap .lakemap__muted { font-size: 14px; fill: #6b7a86; }
.lakemap__peak { fill: #8a7a62; }
.lakemap__poi { fill: #c2562a; }
.lakemap__scale, .lakemap__north { stroke: #6b7a86; stroke-width: 2; fill: none; }
.lakemap-figure { margin: 0; }
.lakemap-figure figcaption { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .6rem; }
@media (max-width: 640px) {
  .lakemap text { font-size: 27px; }
  .lakemap .lakemap__muted, .lakemap .lakemap__region { font-size: 22px; }
  .lakemap circle { r: 7px; }
}
@media (max-width: 600px) {
  /* Nur das Logo; der Name bleibt für Screenreader lesbar (kein abgeschnittener Markenname neben dem Button) */
  .top .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top .logo { width: 34px; height: 34px; }
}
@media (max-width: 520px) {
  /* Lange Button-Texte (z. B. „Führung durch die Hagia Sophia finden →“) dürfen umbrechen; sonst ist die Seite auf 360-px-Handys breiter als der Bildschirm */
  .btn { white-space: normal; max-width: 100%; text-align: center; justify-content: center; }
  .top__cta { white-space: nowrap; }
}
@font-face{font-family:"Headline";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/type/serif-latin.woff2?v=5d283517) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Headline";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/type/serif-latin-ext.woff2?v=35921194) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Headline";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/type/serif-vietnamese.woff2?v=98c1e90b) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
:root{--serif:"Headline", "Iowan Old Style", Charter, "Bitstream Charter", Georgia, serif;--accent:#4f6b3a;--accent-dark:#3d542c;--ink:#203019}