/* SonnenuntergangHeute.de – eigenes Design (Dämmerungsblau & Bernstein) */
:root{
  --navy:#0f1b33;--navy2:#1d2c4f;--amber:#f2a541;--amber-d:#b86b0c;--rose:#e05d6f;--sand:#f5f2ec;--paper:#fffdf9;
  --ink:#18202e;--muted:#5a6475;--line:#e4ddd0;--r:18px;--shadow:0 10px 30px rgba(15,27,51,.08);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sky-top:#3b4f8f;--sky-bot:#f0a26b;--stars:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-size:17px;line-height:1.65}
a{color:var(--amber-d);text-underline-offset:3px}
a:hover{color:var(--rose)}
.wrap{max-width:1160px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;padding:8px;z-index:9}

/* Kopfzeile */
.top{background:var(--navy);position:sticky;top:0;z-index:30;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:18px;white-space:nowrap}
.logo svg{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(242,165,65,.6))}
.logo svg rect[fill="#fff"]{fill:var(--navy)}
.logo svg rect[fill="#1e2a44"]{fill:#ffd9a0}
.logo b{font-family:var(--serif);font-weight:700;letter-spacing:.2px}
.logo span{color:var(--amber)}
.logo:hover{color:#fff}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{color:#c9d3e8;text-decoration:none;padding:7px 11px;border-radius:999px;font-size:14.5px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current=page]{color:var(--navy);background:var(--amber)}
@media (max-width:860px){.top{position:static}.nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px;scrollbar-width:none}.nav a{white-space:nowrap}}

/* Raster */
.grid{display:grid;grid-template-columns:1fr;gap:28px;margin:26px auto 44px}
@media (min-width:1020px){.grid.has-side{grid-template-columns:minmax(0,1fr) 290px}}
main{min-width:0}
.side .sticky{position:sticky;top:86px}
.crumbs{font-size:13.5px;color:var(--muted);margin:18px 0 0}
.crumbs a{color:var(--muted)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li:before{content:"/";margin-right:6px;color:#b9b0a1}

h1,h2,h3{font-family:var(--serif);color:var(--navy);letter-spacing:-.005em}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin:0 0 10px}
h2{font-size:clamp(22px,2.8vw,29px);line-height:1.2;margin:40px 0 12px}
h2:after{content:"";display:block;width:46px;height:3px;border-radius:2px;margin-top:8px;background:linear-gradient(90deg,var(--amber),var(--rose))}
.hero h2:after,.card h2:after,.kort h2:after,.side h2:after,.faq h3:after,.foot h2:after{display:none}
h3{font-size:20px;margin:26px 0 8px}
.lead{font-size:19px;color:var(--muted);margin:0 0 22px;max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:14px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.card+.card{margin-top:18px}

/* Das Wichtigste in Kürze */
.kort{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px 14px 70px;margin:0 0 26px;box-shadow:var(--shadow)}
.kort:before{content:"";position:absolute;left:20px;top:20px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe7b0,var(--amber) 60%,var(--rose));box-shadow:0 0 18px rgba(242,165,65,.55)}
.kort h2{font-family:system-ui,sans-serif;font-size:13px;margin:4px 0 8px;text-transform:uppercase;letter-spacing:.12em;color:var(--amber-d)}
.kort ul{margin:0;padding:0;list-style:none}
.kort li{margin:0;padding:7px 0;border-top:1px dashed var(--line)}
.kort li:first-child{border-top:0}
.kort .upd{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:560px){.kort{padding:18px 18px 12px}.kort:before{position:static;display:block;margin-bottom:6px}}

/* Himmels-Block */
.hero{position:relative;overflow:hidden;color:#fff;border-radius:24px;padding:22px 22px 18px;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 100%);box-shadow:0 18px 40px rgba(15,27,51,.25);transition:background 1s ease}
.hero .stars{position:absolute;left:0;top:0;width:1px;height:1px;opacity:var(--stars);transition:opacity 1s;pointer-events:none}
.hero > *{position:relative}
.hero-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.place{font-family:var(--serif);font-size:24px;margin:0;color:#fff}
.date-label{margin:2px 0 0;color:rgba(255,255,255,.82);font-size:14.5px}
.ring{position:relative;width:96px;height:96px;flex:0 0 96px}
.ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring-bg{fill:rgba(10,18,40,.25);stroke:rgba(255,255,255,.22);stroke-width:8}
.ring-fg{fill:none;stroke:#ffd166;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1}
.ring-txt b{font-size:17px;font-variant-numeric:tabular-nums}
.ring-txt span{font-size:10.5px;opacity:.85;max-width:70px}
.times{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.times > div{background:rgba(10,18,40,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 16px}
.times .lbl{display:block;font-size:13px;letter-spacing:.04em;opacity:.9}
.times .val{display:block;font-family:var(--serif);font-size:clamp(36px,7vw,52px);line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums}
.times .sub{display:block;font-size:12.5px;opacity:.8}
.countdown{margin:12px 0 0;font-weight:600;min-height:1.6em;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.dome{margin:4px auto 0;max-width:560px}
.dome svg{display:block;width:100%;height:auto;overflow:visible}
.dome-day{fill:none;stroke:rgba(255,255,255,.7);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.dome-night{fill:rgba(10,18,40,.18);stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-dasharray:3 6}
.horizon{stroke:rgba(255,255,255,.75);stroke-width:2}
.dl{fill:#fff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.dl.noon{font-size:12px;opacity:.9;font-weight:500}
[data-sundot]{fill:#ffd166;stroke:#fff;stroke-width:3;transition:cx .4s,cy .4s}
[data-sundot].night{fill:#c9d3e8;stroke:rgba(255,255,255,.5)}
[data-glow]{transition:cx .4s,cy .4s,opacity .4s}
.scrub{display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;align-items:center;background:rgba(10,18,40,.25);border-radius:14px;padding:10px 14px;margin-top:6px}
.scrub label{font-size:13px;opacity:.9}
.scrub output{grid-column:1/-1;font-size:14px;font-variant-numeric:tabular-nums;order:3}
.scrub input[type=range]{width:100%;accent-color:#ffd166;height:28px}
.chip-btn{border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip-btn:hover{background:rgba(255,255,255,.15)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
@media (min-width:720px){.facts{grid-template-columns:repeat(5,1fr)}}
.facts > div{background:rgba(10,18,40,.24);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:10px 12px}
.facts b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.facts span{font-size:12.5px;opacity:.88}
.cmp{display:flex;align-items:center;gap:8px}
.cmp svg{width:52px;height:52px;flex:0 0 52px}
.cmp-ring{fill:rgba(10,18,40,.25);stroke:rgba(255,255,255,.5);stroke-width:1.5}
.cmp text{fill:#fff;font-size:9px;font-weight:700}
.cmp line{stroke-width:3;stroke-linecap:round}
.cmp line[data-cmp=rise]{stroke:#ffe08a}.cmp line[data-cmp=set]{stroke:#ff8a7a}
.cmp-c{fill:#fff}
.tools{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
@media (min-width:640px){.tools{grid-template-columns:2fr 1fr auto}}
.field{position:relative}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:4px;opacity:.92}
.field input{width:100%;padding:11px 14px;border:1px solid rgba(255,255,255,.5);border-radius:12px;font-size:16px;background:rgba(255,255,255,.95);color:var(--ink);font-family:inherit}
.field input:focus{outline:3px solid rgba(255,209,102,.6)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:12px;border:0;background:var(--amber);color:var(--navy);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;align-self:end;min-height:45px}
.btn:hover{background:#ffc067}
.sugg{position:absolute;top:100%;left:0;right:0;z-index:40;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;margin:4px 0 0;padding:4px;list-style:none;box-shadow:var(--shadow);max-height:300px;overflow:auto}
.sugg:empty{display:none}
.sugg li{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:15px}
.sugg li[aria-selected=true],.sugg li:hover{background:#fff3df}
.sugg small{color:var(--muted)}

/* Jahresgrafik */
.ychart{margin:22px 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 10px;box-shadow:var(--shadow)}
.ychart-box{position:relative}
.ychart svg{display:block;width:100%;height:auto;touch-action:pan-y}
.ychart .night{fill:#16233f}
.ychart .twi{fill:#4b5c8c}
.ychart .gl{stroke:rgba(255,255,255,.12);stroke-width:1}
.ychart .gl.v{stroke:rgba(255,255,255,.08)}
.ychart .ax{fill:var(--muted);font-size:11px}
.ychart .lr{fill:none;stroke:#e88a1a;stroke-width:2}
.ychart .ls{fill:none;stroke:#d9485f;stroke-width:2}
.ychart .today{stroke:#fff;stroke-width:2;stroke-dasharray:3 3}
.ychart .cur{stroke:var(--navy);stroke-width:1.5}
.ychart .cr{fill:#e88a1a;stroke:#fff;stroke-width:2}.ychart .cs{fill:#d9485f;stroke:#fff;stroke-width:2}
.ychart .tip{position:absolute;top:8px;width:200px;background:var(--navy);color:#fff;font-size:13px;line-height:1.45;padding:8px 10px;border-radius:10px;box-shadow:var(--shadow);pointer-events:none}
.ychart .legend{font-size:12.5px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.ychart .k{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:3px;vertical-align:-1px}
.k.day{background:#ffd27a}.k.twi{background:#4b5c8c}.k.night{background:#16233f}.k.today{background:#fff;border:2px dashed #16233f}
.ychart figcaption{font-size:13px;color:var(--muted);margin-top:4px}

/* Tabellen */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid #efe9de;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
th{background:#f7f1e6;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#6b5a43}
tbody tr:nth-child(even){background:#fcf9f3}
tbody tr:hover{background:#fff1da}
tr.today{background:linear-gradient(90deg,#ffe2ad,#fff4de)!important;font-weight:700}
tr.we td:first-child{color:var(--rose)}
td.num,th.num{text-align:right}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}

/* Monate: Akkordeon (ohne JS) bzw. Tabs (mit JS) */
details{border:1px solid var(--line);border-radius:14px;background:var(--paper);margin:8px 0}
details summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";color:var(--amber-d);font-size:20px;line-height:1}
details[open] summary:after{content:"–"}
details summary .muted{font-weight:400;font-size:14px}
details .tbl-wrap{margin:0 8px 8px;border:0}
.tabbed details{border:0;background:transparent;margin:0}
.tabbed details.tab-hidden{display:none}
.tabbed details summary{padding:10px 4px;cursor:default}
.tabbed details summary:after{content:""}
.tabbed details .tbl-wrap{margin:0;border:1px solid var(--line)}
.tabbar{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:thin}
.tabbar button{flex:0 0 auto;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 13px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.tabbar button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.tabbar button:hover{border-color:var(--amber)}

.kv{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
@media (min-width:640px){.kv{grid-template-columns:1fr 1fr 1fr}}
.kv div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;position:relative;overflow:hidden}
.kv div:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--amber),var(--rose))}
.kv dt{font-size:13px;color:var(--muted)}
.kv dd{margin:2px 0 0;font-weight:700;font-size:16px}

.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0}
.chips a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--navy);font-size:15px;transition:all .15s}
.chips a:hover{border-color:var(--amber);background:#fff4e2;color:var(--amber-d);transform:translateY(-1px)}
.note{background:#fff4e2;border-left:4px solid var(--amber);padding:12px 16px;border-radius:10px;margin:16px 0}
.faq h3{margin-bottom:4px}
.faq p{margin-top:0}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:4px 22px 10px;margin-top:34px}
.faq > h2{margin-top:18px}

/* Finsternis-Karte */
.eclipse{background:radial-gradient(circle at 85% 20%,#2b3b6b 0,#0f1b33 55%);color:#eef1f8;border:0;margin:28px 0}
.eclipse h2{color:#fff;margin-top:0}
.eclipse a{color:#ffd59e}
.eclipse .facts div{background:rgba(255,255,255,.08)}
.eclipse .facts span{color:#cfd6e6}
@media (min-width:720px){.eclipse .facts{grid-template-columns:repeat(4,1fr)}}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:#ffe0b0;color:#8a4b00}

/* Anzeigen */
.ad{margin:26px 0;text-align:center;min-height:280px}
.ad-side{min-height:600px}
.ad-label{display:block;font-size:11px;color:#9a8f80;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}

/* Seitenleiste */
.side .card h2{font-size:18px;margin:0 0 8px}
.side ul{padding-left:0;margin:0;list-style:none}
.side li{padding:4px 0;border-bottom:1px solid #f0eadf}
.side li:last-child{border-bottom:0}
.side li a{text-decoration:none}

/* Fußzeile */
.foot{background:var(--paper);border-top:4px solid transparent;border-image:linear-gradient(90deg,var(--amber),var(--rose),var(--navy)) 1;margin-top:40px;padding:36px 0 22px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.foot h2{font-size:16px;margin:0 0 8px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:4px 0}
.foot a{color:var(--navy);text-decoration:none}
.foot a:hover{color:var(--amber-d);text-decoration:underline}
.foot .legal{border-top:1px solid var(--line);margin-top:24px;padding-top:14px;font-size:12.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}