:root{
  --bg:#0b1020; --bg2:#121933; --panel:#161f3d; --panel2:#1d2748;
  --ink:#eef2ff; --muted:#9aa6c8; --line:#283154; --accent:#7ca9ff;
  --radius:16px; --maxw:1080px;
  font-synthesis:none; -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #1b2550 0%, var(--bg) 55%) fixed, var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
main{max-width:var(--maxw);margin:0 auto;padding:0 20px 64px}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
.muted{color:var(--muted);font-size:.92em}

/* Header / Footer */
header.site{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:14px 20px;max-width:var(--maxw);margin:0 auto;
  background:rgba(11,16,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.brand{font-weight:700;font-size:1.05rem;letter-spacing:.2px}
.brand em{font-style:normal;color:var(--accent)}
.brand .logo{color:var(--accent);margin-right:4px}
header.site nav{display:flex;gap:18px;flex-wrap:wrap}
header.site nav a{color:var(--muted);font-size:.92rem}
header.site nav a:hover{color:var(--ink)}

footer.site{border-top:1px solid var(--line);margin-top:48px;background:var(--bg2)}
.foot-grid{max-width:var(--maxw);margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.foot-grid strong{display:block;margin-bottom:6px}
.foot-grid p{margin:.3em 0;font-size:.88rem;color:var(--muted)}

/* Hero */
.hero{padding:56px 0 32px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;letter-spacing:-.5px}
.hero .lead{font-size:1.15rem;color:#cdd6f4;max-width:62ch}
.hero .datum{margin-top:14px;color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--accent);margin-bottom:10px}
.place-hero{padding:44px 0 20px}
.coords{margin-top:8px}

.phen-hero{padding:48px 0 28px;border-bottom:1px solid var(--line);margin-bottom:8px}
.phen-hero .big-emoji{font-size:3rem}
.phen-hero h1{color:var(--c,var(--ink))}

/* Blocks */
.block{margin:38px 0}
.block h2{font-size:1.35rem;margin-bottom:18px}

/* Card grids */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:.15s;display:block}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card.live{border-left:4px solid var(--c,var(--accent))}
.card-emoji{font-size:1.7rem}
.card-t{font-weight:700;font-size:1.05rem;margin-top:4px}
.card-loc{color:var(--muted);font-size:.9rem}
.card-when{margin-top:8px;font-size:.85rem;color:var(--c,var(--accent));font-weight:600}
.card-phenos{margin-top:10px;font-size:1.15rem;letter-spacing:2px}

/* Phänomen-Grid */
.pheno-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.pheno{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:6px;transition:.15s;
  border-top:3px solid var(--c,var(--accent))}
.pheno:hover{transform:translateY(-3px)}
.pheno-emoji{font-size:1.9rem}
.pheno-l{font-weight:700;font-size:1.1rem}
.pheno-tag{color:var(--muted);font-size:.9rem}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:2px}
.tl-item{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.tl-date{color:var(--accent);font-weight:600;font-size:.92rem}
.tl-body{color:#dbe2f7}
.tl-link{text-decoration:underline;text-underline-offset:3px}
.timeline.big .tl-item.big{grid-template-columns:140px 1fr;padding:20px 0}
.tl-item.big h3{font-size:1.15rem;margin-bottom:6px}
.pill{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:2px 12px;font-size:.82rem;margin-bottom:8px}

/* Badges */
.badge{display:inline-block;background:color-mix(in srgb,var(--c,#888) 18%,transparent);
  color:var(--c,#fff);border:1px solid color-mix(in srgb,var(--c,#888) 45%,transparent);
  border-radius:99px;padding:2px 10px;font-size:.82rem;font-weight:600;white-space:nowrap}

/* Phänomen-Block (Ort-Seite) */
.phen-block{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c,var(--accent));
  border-radius:var(--radius);padding:20px;margin-bottom:16px}
.phen-block header{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.pb-emoji{font-size:1.9rem}
.phen-block h3{margin:0}
.pb-when{color:var(--c,var(--accent));font-weight:600;font-size:.95rem}

/* Affiliate */
.aff{margin-top:14px;background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:14px}
.aff-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.aff-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.aff-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;
  flex-direction:column;gap:3px;transition:.15s}
.aff-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.ac-ico{font-size:1.4rem}
.ac-t{font-weight:600;font-size:.92rem;line-height:1.3}
.ac-s{color:var(--muted);font-size:.78rem}
.aff-card.ferry{background:linear-gradient(160deg,#16324a,#15223f);border-color:#2b6cb0}
.aff-card.hotel:hover{border-color:#4f9}
.aff-card.tour:hover{border-color:#fc8}

/* Ferry banner */
.ferry-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(110deg,#143a52,#15223f);
  border:1px solid #2b6cb0;border-radius:var(--radius);padding:18px 20px}
.ferry-banner:hover{border-color:#4d9fe0}
.fb-ico{font-size:2rem}
.fb-arrow{margin-left:auto;font-size:1.6rem;color:var(--accent)}
.fb-season{display:inline-block;color:var(--accent);font-weight:600;font-size:.95rem;margin:2px 0 4px;line-height:1.3}
.fb-season.live{color:#3ad29f}

/* Ranking-Tabelle */
.rank{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rank th,.rank td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.rank th{background:var(--panel2);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.rank tr:last-child td{border-bottom:none}
.mini-cta,.tl-link{white-space:nowrap}
.mini-cta{background:var(--accent);color:#0b1020;font-weight:700;border-radius:8px;padding:5px 12px;font-size:.82rem}
.mini-cta:hover{filter:brightness(1.1)}

.back{margin-top:28px}
.back a{color:var(--accent)}

@media(max-width:680px){
  .tl-item{grid-template-columns:110px 1fr;gap:10px}
  .foot-grid{grid-template-columns:1fr}
  header.site nav{gap:12px;font-size:.85rem}
  .al-body{grid-template-columns:1fr}
}

/* Aurora Live-Widget */
.aurora-live{background:linear-gradient(135deg,#0d2a2a,#10204a);border:1px solid #1f6f5c;border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden}
.aurora-live::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 120px at 20% 0%,rgba(58,210,159,.22),transparent 70%);pointer-events:none}
.al-head{display:flex;align-items:center;gap:8px;font-size:.95rem;margin-bottom:12px;position:relative}
.al-head .al-upd{margin-left:auto;color:var(--muted);font-size:.74rem;font-weight:400}
.al-dot{width:9px;height:9px;border-radius:50%;background:#3ad29f;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,210,159,.6)}70%{box-shadow:0 0 0 10px rgba(58,210,159,0)}100%{box-shadow:0 0 0 0 rgba(58,210,159,0)}}
.al-body{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;align-items:center;position:relative}
.al-kp{text-align:center;background:rgba(0,0,0,.28);border-radius:12px;padding:10px 18px}
.al-kp-num{font-size:1.5rem;font-weight:800;color:#3ad29f;line-height:1}
.al-kp-lbl{font-size:.74rem;color:var(--muted);margin-top:3px}
.al-outlook{font-size:1.02rem;font-weight:600}
.al-fc{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;margin-top:2px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.al-fc-day{display:grid;grid-template-columns:96px 1fr 56px;align-items:center;gap:10px;font-size:.84rem}
.al-bar{height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.al-bar span{display:block;height:100%;background:linear-gradient(90deg,#3ad29f,#ffd166);border-radius:99px}
.al-fc-k{text-align:right;color:var(--muted)}
.aurora-live.lvl-none{border-color:#5a6b8c;filter:saturate(.55)}
.aurora-live.lvl-high{border-color:#3ad29f}

/* Outlook-Badges in der Ranking-Tabelle */
.ao-badge{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.78rem;font-weight:600;border:1px solid}
.ao-badge.lvl-high{background:rgba(58,210,159,.18);color:#5ee0b0;border-color:#3ad29f}
.ao-badge.lvl-good{background:rgba(58,210,159,.1);color:#8fe0c4;border-color:#2f8f6f}
.ao-badge.lvl-low{background:rgba(154,166,200,.12);color:var(--muted);border-color:#3a4566}
.ao-badge.lvl-none{background:rgba(108,122,224,.12);color:#9aa6e0;border-color:#5a6b8c}

/* Querverweis-Listen (Detailseite) */
.links-2col{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.linklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.linklist a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.linklist a:hover{border-color:var(--accent)}
@media(max-width:680px){.links-2col{grid-template-columns:1fr}}

/* Schnee-Schicht */
.snow-live{display:inline-flex;align-items:center;gap:8px;background:rgba(143,212,255,.12);border:1px solid rgba(143,212,255,.4);
  color:#bfe6ff;border-radius:99px;padding:5px 14px;font-size:.85rem;font-weight:600;margin-bottom:14px}
.snow-cm{color:#8fd4ff;font-size:1.05rem}
.tide-badge{background:rgba(86,197,192,.12);border-color:rgba(86,197,192,.4);color:#a9eae6}
.tide-ebbe{color:#56c5c0;font-weight:600}
.tide-flut{color:#7ca9ff;font-weight:600}
.tide-still{color:var(--muted)}
.bathing-badge{background:rgba(255,207,92,.12);border-color:rgba(255,207,92,.4);color:#ffe2a0}
.bw-dist{display:flex;flex-direction:column;gap:8px;margin:16px 0 10px;max-width:560px}
.bw-row{display:grid;grid-template-columns:120px 1fr 54px;gap:12px;align-items:center;font-size:.9rem}
.bw-bar{height:14px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.bw-bar span{display:block;height:100%;border-radius:99px}
.qbar1{background:#3ad29f}.qbar2{background:#9ad24a}.qbar3{background:#ffd166}.qbar4{background:#ff6b6b}.qbar5{background:#6c7a8c}
.q-badge{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.78rem;font-weight:600}
.q-badge.q1{background:rgba(58,210,159,.18);color:#5ee0b0;border:1px solid #3ad29f}

/* Hero mit KI-Bild-Hintergrund + Overlay (Textlesbarkeit) */
.hero.hero-img,.phen-hero.hero-img,.place-hero.hero-img{
  position:relative;background-size:cover;background-position:center;
  border-radius:var(--radius);padding:56px 36px;margin-top:14px;overflow:hidden;border:1px solid var(--line)}
.hero-img::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,16,32,.46),rgba(11,16,32,.84));z-index:0}
.hero-img>*{position:relative;z-index:1}
.hero-img .lead{color:#e8edff}

/* Zeit-Achse: Monats-Navigation, Kalender-Chips, Länder-Gruppen */
.month-nav{display:flex;justify-content:space-between;gap:12px;margin:0 0 18px;flex-wrap:wrap}
.month-nav a{color:var(--accent,#8fd4ff);font-weight:600;text-decoration:none}
.month-nav a:hover{text-decoration:underline}
.cal-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cal-row a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:99px;
  font-size:.85rem;font-weight:600;text-decoration:none;color:inherit}
.cal-row a:hover{border-color:var(--accent,#8fd4ff)}
.cal-row .cal-all{border:0;color:var(--accent,#8fd4ff)}
.country-h{margin:22px 0 8px;font-size:1.05rem;border-bottom:1px solid var(--line);padding-bottom:4px}

/* FAQ (Häufige Fragen, FAQPage-Schema) */
.faq-item{border:1px solid var(--line);border-radius:10px;margin:8px 0;overflow:hidden}
.faq-item summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+ ";color:var(--accent,#8fd4ff);font-weight:700}
.faq-item[open] summary::before{content:"– "}
.faq-a{padding:2px 16px 14px}
.faq-a a{color:var(--accent,#8fd4ff)}

/* Klare-Sicht-Vorhersage (Bewölkung der nächsten Nächte) */
.sky-nights{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.sky-night{flex:1 1 0;min-width:90px;border:1px solid var(--line);border-top-width:3px;border-radius:12px;padding:12px 8px;text-align:center;background:rgba(255,255,255,.03)}
.sky-night.clear{border-top-color:#3ad29f}
.sky-night.part{border-top-color:#ffd166}
.sky-night.cloud{border-top-color:#ff6b6b}
.sn-date{font-size:.82rem;opacity:.7}
.sn-pct{font-size:1.55rem;font-weight:700;line-height:1.15}
.sn-pct span{font-size:.8rem;opacity:.6;font-weight:400}
.sn-v{font-size:.85rem;font-weight:600;margin-bottom:7px}
.sky-night.clear .sn-v{color:#3ad29f}
.sky-night.part .sn-v{color:#ffd166}
.sky-night.cloud .sn-v{color:#ff6b6b}
.sn-bars{display:flex;gap:2px;justify-content:center;height:14px}
.sn-bars i{width:7px;height:14px;border-radius:2px}
.sn-bars .c-clear{background:#3ad29f}
.sn-bars .c-part{background:#ffd166}
.sn-bars .c-cloud{background:#ff6b6b}
.sky-badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:600;white-space:nowrap}
.sky-badge.sb-clear{background:rgba(58,210,159,.18);color:#5ee0b0;border:1px solid rgba(58,210,159,.5)}
.sky-badge.sb-part{background:rgba(255,209,102,.16);color:#ffd166;border:1px solid rgba(255,209,102,.45)}
.sky-badge.sb-cloud{background:rgba(255,107,107,.15);color:#ff9a9a;border:1px solid rgba(255,107,107,.4)}

/* --- Native Unterkunfts-Kacheln (server-gerendert, Stay22 Direct API) ------ */
.htl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media(max-width:860px){.htl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.htl-grid{grid-template-columns:1fr}}
.htl{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.15s}
.htl:hover{transform:translateY(-2px);border-color:var(--hc,var(--accent))}
.htl-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:var(--panel2)}
.htl-noimg{display:flex;align-items:center;justify-content:center;font-size:1.8rem;opacity:.6}
.htl-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.htl-name{font-weight:650;line-height:1.3}
.htl-stars{color:#ffd166;font-size:.78rem;margin-left:6px;letter-spacing:1px;white-space:nowrap}
.htl-meta{color:var(--muted);font-size:.82rem}
.htl-rate{display:inline-block;background:var(--hc,var(--accent));color:#0b1020;border-radius:6px;
  padding:0 6px;font-size:.8rem;font-weight:700}
.htl-meta span{color:var(--muted)}
.htl-badges{display:flex;flex-wrap:wrap;gap:6px}
.htl-badge{font-size:.72rem;border:1px solid var(--line);background:var(--panel2);
  border-radius:99px;padding:1px 9px;color:var(--muted)}
.htl-badge.ok{color:#3ad29f;border-color:rgba(58,210,159,.35)}
.htl-price{margin-top:auto;padding-top:4px;font-size:1.02rem}
.htl-price b{font-size:1.18rem;color:var(--hc,var(--accent))}
.htl-price em{font-style:normal;color:var(--muted);font-size:.78rem}
.htl-note{font-size:.82rem;margin-top:12px}
.htl-more{color:var(--accent);white-space:nowrap}
.htl-more:hover{text-decoration:underline}

/* --- Riesenwellen-Schicht -------------------------------------------------- */
.wave-badge{background:rgba(46,134,222,.13);border-color:rgba(46,134,222,.45)}
.wv-badge{display:inline-block;border-radius:99px;padding:2px 10px;font-weight:700;font-size:.85rem}
.wv-badge.wv-s{background:rgba(86,197,192,.16);color:#7fe0db;border:1px solid rgba(86,197,192,.45)}
.wv-badge.wv-l{background:rgba(255,209,102,.16);color:#ffd166;border:1px solid rgba(255,209,102,.45)}
.wv-badge.wv-xl{background:rgba(255,107,107,.18);color:#ff9a9a;border:1px solid rgba(255,107,107,.55)}

/* --- Vulkan-Schicht -------------------------------------------------------- */
.volcano-badge{background:rgba(232,85,45,.13);border-color:rgba(232,85,45,.45)}
.vc-badge{display:inline-block;border-radius:99px;padding:2px 9px;font-size:.8rem;font-weight:600;white-space:nowrap}
.vc-badge.vc-hot{background:rgba(255,77,77,.18);color:#ff8a8a;border:1px solid rgba(255,77,77,.55)}
.vc-badge.vc-act{background:rgba(232,120,45,.16);color:#ffae6b;border:1px solid rgba(232,120,45,.5)}
.vc-badge.vc-low{background:rgba(255,209,102,.14);color:#ffd166;border:1px solid rgba(255,209,102,.4)}
.vc-badge.vc-calm{background:rgba(58,210,159,.14);color:#5ee0b0;border:1px solid rgba(58,210,159,.4)}
.volcano-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:16px 0}
.vc-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c,var(--accent));border-radius:12px;padding:14px 16px}
.vc-card h3{margin:0 0 6px;font-size:1.05rem}
.vc-card p{margin:0 0 10px}
.cta-ghost{background:var(--panel2)!important;color:var(--ink)!important;border:1px solid var(--line)}

/* --- Badetemperatur-Schicht ------------------------------------------------ */
.seatemp-badge{background:rgba(31,182,201,.13);border-color:rgba(31,182,201,.45)}
.st-badge{display:inline-block;border-radius:99px;padding:2px 10px;font-weight:700;font-size:.85rem;white-space:nowrap}
.st-badge.st-warm{background:rgba(255,107,107,.18);color:#ff9a9a;border:1px solid rgba(255,107,107,.5)}
.st-badge.st-good{background:rgba(255,166,90,.16);color:#ffb98a;border:1px solid rgba(255,166,90,.5)}
.st-badge.st-mild{background:rgba(255,209,102,.15);color:#ffd166;border:1px solid rgba(255,209,102,.45)}
.st-badge.st-cool{background:rgba(86,197,192,.16);color:#7fe0db;border:1px solid rgba(86,197,192,.45)}
.st-badge.st-cold{background:rgba(124,169,255,.16);color:#9db8ff;border:1px solid rgba(124,169,255,.45)}

/* --- Stations-Detailseiten (Ort × Wellen / Vulkan / Badetemperatur) -------- */
.wave-days{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
@media(max-width:560px){.wave-days{grid-template-columns:1fr}}
.wave-day{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.wd-label{font-weight:700;margin-bottom:8px}
.wd-meta{font-size:.84rem;margin-top:8px}
.seatemp-big{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0}
.st-xl,.vc-xl{font-size:1.15rem;padding:6px 16px}
.vc-status{margin:14px 0}
.vc-detail{max-width:560px;margin:14px 0}
.vc-detail td:first-child{color:var(--muted);width:48%}
.other-places{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.op-chip{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:.9rem;white-space:nowrap}
.op-chip:hover{border-color:var(--accent)}

/* --- Vogelzug-Schicht ------------------------------------------------------ */
.bird-badge{background:rgba(201,138,60,.14);border-color:rgba(201,138,60,.45)}
.bz-badge{display:inline-block;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:600;white-space:nowrap}
.bz-badge.bz-on{background:rgba(58,210,159,.18);color:#5ee0b0;border:1px solid rgba(58,210,159,.5)}
.bz-badge.bz-soon{background:rgba(255,209,102,.15);color:#ffd166;border:1px solid rgba(255,209,102,.45)}
.bz-badge.bz-off{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line)}