/* ==========================================================================
   Hermann Köhl – Ozeanflieger · gemeinsame Gestaltung
   Drei Designs über html[data-design]: atlas (Standard), cockpit, extrablatt
   ========================================================================== */

:root, html[data-design="atlas"] {
  --bg: #efe6d2; --bg2: #e6dbc2; --paper: #f7f1e3; --card: #fbf7ee;
  --ink: #2a2418; --ink2: #5e5443; --line: rgba(60,45,20,.22);
  --accent: #a8322a; --accent-ink: #fff8ec; --accent2: #2f5d73;
  --hero-ink: #fff8ec; --hero-shade: linear-gradient(90deg, rgba(28,22,12,.86) 0%, rgba(28,22,12,.55) 45%, rgba(28,22,12,.1) 100%);
  --ocean: #cfdcdc; --ocean2: #b9cdd0; --land: #e9dcbc; --land-stroke: #8c7a55; --grat: rgba(70,90,100,.18);
  --route: #a8322a; --route-plan: rgba(168,50,42,.35); --night: rgba(16,24,40,.38); --label: #2a2418;
  --font-head: 'Playfair Display', Georgia, serif; --font-body: 'Source Serif 4', Georgia, serif;
  --font-label: 'Special Elite', 'Courier New', monospace; --font-ui: 'Source Serif 4', Georgia, serif;
  --radius: 4px; --shadow: 0 10px 30px rgba(60,40,10,.18);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-design="cockpit"] {
  --bg: #0c1622; --bg2: #101d2c; --paper: #13212f; --card: #172838;
  --ink: #e6e1d4; --ink2: #9aa6b2; --line: rgba(201,164,92,.22);
  --accent: #d9a441; --accent-ink: #0c1622; --accent2: #5fb3a5;
  --hero-ink: #f3ecdc; --hero-shade: linear-gradient(90deg, rgba(8,14,22,.92) 0%, rgba(8,14,22,.6) 50%, rgba(8,14,22,.2) 100%);
  --ocean: #0f2233; --ocean2: #0b1a28; --land: #22384a; --land-stroke: #4d6a80; --grat: rgba(120,160,190,.12);
  --route: #e9b44c; --route-plan: rgba(233,180,76,.3); --night: rgba(0,0,0,.45); --label: #e6e1d4;
  --font-head: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'IBM Plex Sans', Arial, sans-serif;
  --font-label: 'IBM Plex Mono', monospace; --font-ui: 'IBM Plex Sans', Arial, sans-serif;
  --radius: 10px; --shadow: 0 14px 40px rgba(0,0,0,.45); --paper-grain: none;
}
html[data-design="extrablatt"] {
  --bg: #f1eee6; --bg2: #e7e3d8; --paper: #f7f5ef; --card: #fbfaf6;
  --ink: #141414; --ink2: #4f4b44; --line: rgba(20,20,20,.3);
  --accent: #b3121f; --accent-ink: #fff; --accent2: #141414;
  --hero-ink: #fff; --hero-shade: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 50%, rgba(10,10,10,.12) 100%);
  --ocean: #e3e1da; --ocean2: #d8d5cc; --land: #bdb8ab; --land-stroke: #3b3934; --grat: rgba(0,0,0,.1);
  --route: #b3121f; --route-plan: rgba(179,18,31,.3); --night: rgba(0,0,0,.28); --label: #141414;
  --font-head: 'Playfair Display', Georgia, serif; --font-body: 'Old Standard TT', Georgia, serif;
  --font-label: 'Oswald', 'Arial Narrow', sans-serif; --font-ui: 'Oswald', 'Arial Narrow', sans-serif;
  --radius: 0; --shadow: 3px 4px 0 rgba(0,0,0,.18);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg) var(--paper-grain); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
html[data-design="cockpit"] :is(h1, h2, h3) { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
html[data-design="extrablatt"] :is(h1, h2) { font-weight: 900; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.label { font-family: var(--font-label); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--ink2); }
.btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-ui); font-size: .95rem; letter-spacing: .06em; text-decoration: none; padding: .75em 1.3em; border-radius: var(--radius); border: 1.5px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- Kopfzeile ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand svg { width: 34px; height: 34px; color: var(--accent); flex: none; }
.brand b { font-family: var(--font-head); font-size: 1.15rem; display: block; line-height: 1.1; }
.brand small { font-family: var(--font-label); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.nav { display: flex; gap: 4px; }
.nav a { font-family: var(--font-ui); font-size: .95rem; text-decoration: none; color: var(--ink); padding: .45em .8em; border-radius: var(--radius); }
.nav a:hover { background: var(--bg2); }
.nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.design-pick { font: .82rem var(--font-ui); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .35em .5em; }
.lang { font: .8rem var(--font-label); letter-spacing: .1em; color: var(--ink2); border: 1px solid var(--line); border-radius: var(--radius); padding: .3em .55em; background: none; cursor: help; }
.menu-btn { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; }
.menu-btn svg { width: 28px; height: 28px; }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 14px; }
  .nav.open { display: flex; }
  .nav a { padding: .7em .4em; font-size: 1.05rem; }
  .lang { display: none; }
  .brand small { display: none; }
  .brand b { white-space: nowrap; }
  .design-pick { max-width: 110px; }
}

/* ---------- Fußzeile ---------- */
.site-foot { margin-top: 80px; background: var(--bg2); border-top: 1px solid var(--line); padding: 40px 0 30px; font-size: .92rem; color: var(--ink2); }
.site-foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.site-foot h4 { color: var(--ink); font-size: 1rem; }
.site-foot a { color: var(--ink2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
@media (max-width: 700px) { .site-foot .cols { grid-template-columns: 1fr; } }

/* ---------- Einblenden beim Scrollen ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Karte (gemeinsam) ---------- */
.hk-map { width: 100%; height: 100%; display: block; }
.hk-map .sphere { fill: var(--ocean); stroke: var(--land-stroke); stroke-width: .6; }
.hk-map .grat { fill: none; stroke: var(--grat); stroke-width: .6; }
.hk-map .land { fill: var(--land); stroke: var(--land-stroke); stroke-width: .5; }
.hk-map .night { fill: var(--night); pointer-events: none; }
.hk-map .plan { fill: none; stroke: var(--route-plan); stroke-width: 2; stroke-dasharray: 3 5; }
.hk-map .flown { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; }
.hk-map .stop { fill: var(--paper); stroke: var(--route); stroke-width: 2; cursor: pointer; }
.hk-map .stop.done { fill: var(--route); }
.hk-map .stop.cur { stroke-width: 3; }
.hk-map .place { font: 12px var(--font-label); fill: var(--label); paint-order: stroke; stroke: var(--ocean); stroke-width: 3px; letter-spacing: .04em; pointer-events: none; }
.hk-map .plane { fill: var(--ink); stroke: var(--paper); stroke-width: 1; }
html[data-design="cockpit"] .hk-map .plane { fill: var(--accent); stroke: #000; }