@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --sky-top:#0B0F2E;
  --sky-mid:#241B45;
  --sky-low:#5B3358;
  --horizon:#C1502E;
  --glow:#F2A65A;
  --corona:#F4D58D;
  --paper:#F5EFE0;
  --paper-dim:#C9C2AE;
  --line:rgba(245,239,224,0.14);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sky-top);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  line-height:1.55;
}
.sky{
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 72%,var(--horizon) 92%,var(--glow) 100%);
}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--corona);}
.wrap{max-width:920px;margin:0 auto;padding:0 24px;}

/* ---- header / nav ---- */
.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(11,15,46,0.7);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:20;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;padding:16px 24px;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-size:17px;color:var(--paper);
  text-decoration:none;font-weight:500;letter-spacing:-0.01em;
}
.logo:hover{color:var(--paper);}
.logo svg{width:26px;height:26px;flex-shrink:0;}
.logo .dim{color:var(--paper-dim);font-weight:400;}
.site-nav{display:flex;gap:22px;flex-wrap:wrap;}
.site-nav a{
  font-size:14px;color:var(--paper-dim);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s,border-color .15s;
}
.site-nav a:hover, .site-nav a.active{color:var(--corona);border-color:var(--corona);}

/* ---- HERO (home) ---- */
.hero{padding:64px 0 40px;position:relative;overflow:hidden;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--corona);opacity:0.85;margin-bottom:18px;
}
.hero h1{font-size:clamp(32px,5.4vw,56px);line-height:1.06;max-width:11.5em;}
.hero p.lede{font-size:18px;color:var(--paper-dim);max-width:46em;margin-top:20px;}

/* ---- page-hero (subpages: shorter, no scene/countdown) ---- */
.page-hero{padding:52px 0 8px;}
.page-hero h1{font-size:clamp(28px,4.6vw,44px);line-height:1.1;max-width:14em;}
.page-hero p.lede{font-size:17px;color:var(--paper-dim);max-width:46em;margin-top:16px;}
.breadcrumb{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--paper-dim);
  margin-bottom:16px;
}
.breadcrumb a{color:var(--paper-dim);text-decoration:none;}
.breadcrumb a:hover{color:var(--corona);}

/* eclipse scene */
.scene{
  margin:44px auto 8px;width:100%;max-width:520px;aspect-ratio:1/1;position:relative;
}
.scene svg{width:100%;height:100%;display:block;}
.scene-caption{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--paper-dim);margin-top:14px;}

/* countdown */
.countdown{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:36px 0 8px;
}
.cbox{
  background:rgba(245,239,224,0.06);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;min-width:78px;text-align:center;
}
.cbox .num{font-family:'IBM Plex Mono',monospace;font-size:30px;font-weight:500;color:var(--corona);}
.cbox .lab{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper-dim);margin-top:4px;}

/* city selector */
.city-row{
  display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin:34px 0 6px;
}
.city-row label{font-size:14px;color:var(--paper-dim);}
select{
  background:#241B45;color:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:10px 14px;font-family:'Inter',sans-serif;font-size:15px;
}
select option{
  background:#1B1330;color:var(--paper);
}
.city-stats{
  display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:22px;
  font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--paper-dim);
}
.city-stats b{color:var(--paper);font-weight:500;}

.locate-btn, .share-btn{
  background:transparent;border:1px solid var(--line);color:var(--paper-dim);
  border-radius:8px;padding:10px 16px;font-family:'Inter',sans-serif;font-size:13px;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.locate-btn:hover, .share-btn:hover{border-color:var(--corona);color:var(--corona);}
.locate-btn.active, .share-btn.copied{border-color:var(--corona);color:var(--corona);}
.share-btn{background:rgba(244,213,141,0.1);border-color:rgba(244,213,141,0.35);color:var(--corona);font-weight:500;}

/* sections */
section{padding:56px 0;border-top:1px solid var(--line);}
section h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:18px;}
section p{color:var(--paper-dim);max-width:60em;}
section p + p{margin-top:12px;}

/* table */
table{width:100%;border-collapse:collapse;margin-top:22px;font-size:14px;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
th{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--paper-dim);font-weight:500;}
td.num{font-family:'IBM Plex Mono',monospace;}
tr.current{background:rgba(244,213,141,0.08);}
.region{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--corona);margin:26px 0 4px;}

/* faq */
.faq-list{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.faq-item{
  border:1px solid var(--line);border-radius:10px;padding:16px 18px;
}
.faq-item summary{
  font-family:'Fraunces',serif;font-size:17px;color:var(--paper);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--corona);flex-shrink:0;
}
.faq-item[open] summary::after{content:'–';}
.faq-item p{margin-top:12px;color:var(--paper-dim);font-size:15px;}

/* safety / callout box */
.safety{
  background:rgba(193,80,46,0.14);border:1px solid rgba(193,80,46,0.4);
  border-radius:12px;padding:22px 24px;margin-top:20px;
}
.safety b{color:var(--corona);}
.callout{
  background:rgba(244,213,141,0.08);border:1px solid rgba(244,213,141,0.3);
  border-radius:12px;padding:22px 24px;margin-top:20px;
}
.callout b{color:var(--corona);}

/* links list */
.linklist{list-style:none;margin-top:18px;}
.linklist li{margin-bottom:12px;}
.linklist a{
  display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  text-decoration:none;color:var(--paper);transition:border-color .15s;
}
.linklist a:hover{border-color:var(--corona);}
.linklist .src{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--paper-dim);display:block;margin-top:4px;}

/* ---- timeline (naechste-sonnenfinsternisse) ---- */
.timeline{margin-top:26px;display:flex;flex-direction:column;gap:0;}
.tl-item{
  display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;
  border-top:1px solid var(--line);
}
.tl-item:first-child{border-top:none;}
.tl-date{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--corona);line-height:1.5;}
.tl-date .year{display:block;font-size:22px;color:var(--paper);font-weight:500;}
.tl-body h3{font-size:19px;margin-bottom:8px;}
.tl-body p{color:var(--paper-dim);font-size:15px;max-width:52em;}
.tl-tag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px;
  margin-bottom:10px;
}
.tl-tag.total{background:rgba(244,213,141,0.18);color:var(--corona);border:1px solid rgba(244,213,141,0.4);}
.tl-tag.partial{background:rgba(245,239,224,0.08);color:var(--paper-dim);border:1px solid var(--line);}
.tl-tag.now{background:rgba(193,80,46,0.25);color:#FFD9B8;border:1px solid rgba(193,80,46,0.5);}
@media(max-width:560px){
  .tl-item{grid-template-columns:1fr;gap:6px;}
}

/* ---- content page (fotografieren) ---- */
.tip-list{display:flex;flex-direction:column;gap:18px;margin-top:22px;}
.tip{
  border:1px solid var(--line);border-radius:12px;padding:20px 22px;
}
.tip h3{font-size:17px;margin-bottom:8px;color:var(--paper);}
.tip p{color:var(--paper-dim);font-size:15px;}

footer{padding:40px 0 64px;color:var(--paper-dim);font-size:13px;}
footer a{color:var(--paper-dim);text-decoration:underline;}

@media(max-width:600px){
  .cbox{min-width:64px;padding:12px;}
  .cbox .num{font-size:24px;}
}

/* ---- orbital eclipse animation (wie-entsteht-eine-sonnenfinsternis) ---- */
.orbit-wrap{margin:40px auto 6px;width:100%;max-width:620px;}
.orbit-wrap svg{width:100%;height:auto;display:block;}
#earthShape{transition:filter .25s ease;}
#earthShape.is-eclipsed{filter:drop-shadow(0 0 12px rgba(244,213,141,0.9));}

.orbit-controls{
  display:flex;flex-direction:column;gap:10px;align-items:center;
  max-width:440px;margin:30px auto 0;text-align:center;
}
.orbit-controls label{font-size:13px;color:var(--paper-dim);}
.orbit-controls input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;
  background:var(--line);border-radius:4px;outline:none;
}
.orbit-controls input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--corona);cursor:pointer;border:2px solid var(--sky-top);
}
.orbit-controls input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--corona);
  cursor:pointer;border:2px solid var(--sky-top);
}
.orbit-readout{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--corona);}
.orbit-readout .hint{color:var(--paper-dim);font-size:12px;font-family:'Inter',sans-serif;}
.orbit-toolbar{display:flex;justify-content:center;margin-top:16px;}
.orbit-status{
  text-align:center;font-size:13px;color:var(--paper-dim);
  margin-top:18px;min-height:18px;transition:color .2s;
}
.orbit-status.hit{color:var(--corona);}