/* Sonntagsgedanken — Design System Fonts: Cormorant Garamond (serif) + DM Sans (sans) Loaded via Google Fonts in */ *{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#FAFAF6;--sur:#F3F2EC;--sur2:#ECEAE2; --line:#D8D6CC;--ls:#1C1C17; --gold:#8A6E2F;--glt:rgba(138,110,47,0.10);--gln:rgba(138,110,47,0.28); --t:#1C1C17;--t2:#3A3830;--t3:#6A6860; --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',sans-serif; } body{font-family:var(--sans);font-size:17px;line-height:1.6;background:var(--bg);color:var(--t)} /* ── NAV ─────────────────────────────────────────────────────────────────── */ .sg-nav{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:48px;background:var(--bg);border-bottom:1px solid var(--ls);position:sticky;top:0;z-index:10} .sg-logo{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--t);background:none;border:none;padding:0;cursor:pointer;text-decoration:none} .sg-logo em{color:var(--gold);font-style:italic} .sg-navlinks{display:flex;gap:1.25rem} .sg-nl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:400;padding:0;transition:color .15s;text-decoration:none} .sg-nl:hover,.sg-nl.act{color:var(--gold)} /* ── PAGE SCROLL (SPA only) ──────────────────────────────────────────────── */ .sg-page{overflow-y:auto} .sg-page::-webkit-scrollbar{width:4px} .sg-page::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px} /* ── HERO ────────────────────────────────────────────────────────────────── */ .sg-hero{padding:44px 1.5rem 36px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end} .sg-ey{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px} .sg-el{display:block;width:20px;height:1px;background:var(--gln)} .sg-h1{font-family:var(--serif);font-size:48px;font-weight:300;line-height:1.07;color:var(--t)} .sg-h1 em{font-style:italic;color:var(--gold);display:block;font-size:.72em} .sg-hsub{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--t2);line-height:1.65;margin-bottom:16px} .sg-hauth{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px} .sg-hdot{width:3px;height:3px;border-radius:50%;background:var(--t3)} .sg-hcta{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t);border:none;border-bottom:1px solid var(--t);padding-bottom:3px;background:none;cursor:pointer;font-family:var(--sans);font-weight:400;transition:color .15s,border-color .15s;text-decoration:none} .sg-hcta:hover{color:var(--gold);border-bottom-color:var(--gold)} /* ── STATS ───────────────────────────────────────────────────────────────── */ .sg-stats{display:flex;border-bottom:1px solid var(--line);background:var(--sur)} .sg-sb{flex:1;padding:.75rem 1rem;text-align:center;border-right:1px solid var(--line)} .sg-sb:last-child{border-right:none} .sg-sn{font-family:var(--serif);font-size:26px;font-weight:300;color:var(--gold);display:block;line-height:1} .sg-sl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-top:3px;display:block} /* ── SECTION ─────────────────────────────────────────────────────────────── */ .sg-sec{padding:1.75rem 1.5rem} .sg-sec--dk{background:var(--sur)} .sg-sec-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--line)} .sg-sec-t{font-family:var(--serif);font-size:26px;font-weight:300;color:var(--t)} .sg-sec-t em{font-style:italic;color:var(--gold)} .sg-sec-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)} /* ── ARTICLE GRID ────────────────────────────────────────────────────────── */ .sg-lg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden} .sg-lc{background:var(--bg);padding:1.25rem;cursor:pointer;border:none;text-align:left;width:100%;color:var(--t);transition:background .15s} .sg-lc:hover{background:var(--sur)} .sg-lc--ft{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;background:var(--sur)} .sg-lside{display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:5px;overflow:hidden} .sg-lsi{background:var(--bg);padding:.75rem .875rem;flex:1;cursor:pointer;border:none;text-align:left;width:100%;color:var(--t);transition:background .15s} .sg-lsi:hover{background:var(--sur2)} .sg-llbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px} .sg-lt{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--t);line-height:1.25;margin-bottom:.3rem} .sg-lsi-t{font-family:var(--serif);font-size:16px;color:var(--t2);margin:2px 0} .sg-lby{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)} .sg-lby strong{color:var(--t2);font-weight:400} .sg-lrd{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:.6rem;border-bottom:1px solid var(--gln);padding-bottom:2px;transition:gap .15s} .sg-lc:hover .sg-lrd{gap:9px} /* ── JAHRESAUSWAHL ───────────────────────────────────────────────────────── */ .sg-yr-strip{display:flex;width:100%;margin-bottom:1.5rem;gap:6px} .sg-yr-btn{flex:1;padding:11px 14px;font-family:var(--sans);cursor:pointer;background:#C8C5BC;border:1.5px solid #6A6860;border-radius:4px;transition:background .15s,border-color .15s;text-align:center} .sg-yr-btn:hover{background:#5A5750;border-color:#5A5750} .sg-yr-btn.act{background:#1C1C17;border-color:#1C1C17} .sg-yr-label{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#1C1C17;transition:color .15s} .sg-yr-btn:hover .sg-yr-label,.sg-yr-btn.act .sg-yr-label{color:#F0EDE6} .sg-yr-sub{display:block;font-size:11px;font-weight:300;letter-spacing:.05em;margin-top:3px;color:#7A7870;transition:color .15s} .sg-yr-btn:hover .sg-yr-sub{color:#C8C5BC} .sg-yr-btn.act .sg-yr-sub{color:#7A7060} /* ── KOMPASS ─────────────────────────────────────────────────────────────── */ .sg-rad-layout{display:grid;grid-template-columns:450px 1fr;gap:2rem;align-items:start} .sg-stage{position:relative;width:450px;height:450px;flex-shrink:0} .sg-stage svg{width:450px;height:450px;overflow:visible} .sg-chole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none} .sg-cyr{font-family:var(--serif);font-size:51px;font-weight:300;line-height:1;color:var(--gold)} .sg-csub{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:3px} .sg-csea{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold);margin-top:4px;min-height:13px} .sg-rp-hint{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--t3);padding:1rem 0} .sg-rp-hdr{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--t);margin-bottom:.25rem} .sg-rp-sub{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:1rem} .sg-rp-scroll{max-height:390px;overflow-y:auto} .sg-rp-scroll::-webkit-scrollbar{width:3px} .sg-rp-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px} .sg-ra{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;text-align:left;width:100%;color:var(--t);transition:all .15s} .sg-ra:hover .sg-ra-t{color:var(--gold)} .sg-ra:hover .sg-rbar{background:var(--gold)} .sg-ra:hover .sg-rarr{opacity:1} .sg-rbar{width:1px;height:28px;background:var(--line);flex-shrink:0;transition:background .15s} .sg-ra-body{flex:1;min-width:0} .sg-ra-t{font-family:var(--serif);font-size:16px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s} .sg-ra-m{font-size:11px;color:var(--t3);margin-top:1px} .sg-rarr{font-size:14px;color:var(--gold);opacity:0;transition:opacity .15s;flex-shrink:0} /* ── ARCHIV ──────────────────────────────────────────────────────────────── */ .sg-arc-hdr{background:var(--sur);padding:1.75rem 1.5rem 1.5rem;border-bottom:1px solid var(--line)} .sg-arc-title{font-family:var(--serif);font-size:34px;font-weight:300;color:var(--t)} .sg-arc-title em{font-style:italic;color:var(--gold)} .sg-arc-body{display:grid;grid-template-columns:160px 1fr;gap:0} .sg-arc-sb{padding:1.5rem 1.25rem 1.5rem 1.5rem} .sg-flbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;display:block} .sg-fpills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:1.25rem} .sg-pill{padding:3px 10px;font-size:11px;font-family:var(--sans);cursor:pointer;background:transparent;color:var(--t3);border:1px solid var(--line);border-radius:20px;transition:all .15s} .sg-pill:hover,.sg-pill.act{color:var(--gold);border-color:var(--gold);background:var(--glt)} .sg-flist{display:flex;flex-direction:column;gap:1px;margin-bottom:1rem} .sg-fi{text-align:left;padding:5px 8px;font-size:13px;font-family:var(--sans);cursor:pointer;background:transparent;color:var(--t3);border:none;border-radius:5px;transition:all .15s} .sg-fi:hover,.sg-fi.act{color:var(--gold);background:var(--glt)} .sg-arc-main{border-left:1px solid var(--line);padding:1.5rem 1.5rem 1.5rem 1.25rem} .sg-srch{width:100%;padding:7px 12px;margin-bottom:1.25rem;background:var(--sur);border:1px solid var(--line);border-radius:5px;color:var(--t);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .15s} .sg-srch:focus{border-color:var(--gold)} .sg-srch::placeholder{color:var(--t3)} .sg-arc-meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:1rem} .sg-agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-bottom:1rem} .sg-ac{background:var(--bg);padding:1rem;cursor:pointer;border:none;text-align:left;width:100%;color:var(--t);transition:background .15s} .sg-ac:hover{background:var(--sur)} .sg-ac-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem} .sg-ac-sea{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .sg-ac-yr{font-size:12px;font-family:var(--serif);color:var(--t3)} .sg-ac-t{font-family:var(--serif);font-size:16px;font-weight:400;color:var(--t2);line-height:1.3;margin-bottom:.2rem;transition:color .15s} .sg-ac:hover .sg-ac-t{color:var(--gold)} .sg-ac-m{font-size:11px;color:var(--t3)} .sg-pg{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.75rem 0} .sg-pgb{padding:4px 14px;font-size:11px;font-family:var(--sans);letter-spacing:.1em;cursor:pointer;background:transparent;color:var(--t2);border:1px solid var(--line);border-radius:5px;transition:all .15s} .sg-pgb:hover:not([disabled]){color:var(--gold);border-color:var(--gold)} .sg-pgb[disabled]{opacity:.3;cursor:not-allowed} .sg-pgi{font-size:12px;color:var(--t3)} /* ── ARTIKEL-SEITE ───────────────────────────────────────────────────────── */ .sg-art-pg{max-width:640px;margin:0 auto;padding:0 1.5rem 4rem} .sg-bc{padding:1rem 0;font-size:12px;color:var(--t3);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} .sg-bc a{color:var(--t3);text-decoration:none;transition:color .15s} .sg-bc a:hover{color:var(--gold)} .sg-bcs{opacity:.4} .sg-art-hdr{padding:1.25rem 0 1.5rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem} .sg-atags{display:flex;gap:.5rem;margin-bottom:.875rem;flex-wrap:wrap} .sg-atag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border:1px solid;border-radius:20px} .sg-atag--sea{color:var(--gold);border-color:var(--gln);background:var(--glt)} .sg-atag--yr{color:var(--t3);border-color:var(--line)} .sg-ah1{font-family:var(--serif);font-size:clamp(24px,3.6vw,34px);font-weight:300;color:var(--t);line-height:1.15;margin-bottom:.5rem} .sg-aby{display:flex;align-items:center;gap:9px} .sg-aav{width:32px;height:32px;border-radius:50%;background:var(--glt);border:1px solid var(--gln);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--gold);flex-shrink:0} .sg-aan{font-size:14px;font-weight:500;color:var(--t2)} .sg-adt{font-size:12px;color:var(--t3);margin-top:1px} /* ── TABS ────────────────────────────────────────────────────────────────── */ .sg-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:1.75rem} .sg-tab-btn{padding:.625rem 1.25rem;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--t3);font-family:var(--sans);transition:all .15s;margin-bottom:-1px} .sg-tab-btn.act{color:var(--gold);border-bottom-color:var(--gold)} .sg-tab-btn:hover:not(.act){color:var(--t2)} .sg-tab-content{display:none} .sg-tab-content.act{display:block} /* ── ARTIKEL-BODY ────────────────────────────────────────────────────────── */ .sg-abody{font-family:var(--serif);font-size:19px;line-height:1.9;color:var(--t2)} .sg-abody p{margin-bottom:1.25rem} .sg-abody i,.sg-abody em{font-style:italic} .sg-abody b,.sg-abody strong{font-weight:500;color:var(--t)} .sg-abody ul,.sg-abody ol{margin:0 0 1.25rem 1.5rem} .sg-abody li{margin-bottom:.35rem} .sg-reading-text{font-family:var(--serif);font-size:18px;line-height:1.85;color:var(--t2);padding:1.25rem;background:var(--sur);border-radius:5px;border-left:2px solid var(--gln)} .sg-reading-text p{margin-bottom:1rem} /* ── ARTIKEL-NAVIGATION ──────────────────────────────────────────────────── */ .sg-anav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin-top:2.5rem} .sg-ani{background:var(--sur);padding:.875rem 1rem;cursor:pointer;border:none;text-align:left;width:100%;color:var(--t);transition:background .15s;text-decoration:none;display:block} .sg-ani:hover{background:var(--sur2)} .sg-ani--nx{text-align:right} .sg-and{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);display:block;margin-bottom:.2rem} .sg-ant{font-family:var(--serif);font-size:16px;color:var(--t2)} .sg-ani:hover .sg-ant{color:var(--gold)} .sg-aback{margin-top:1.25rem;text-align:center} .sg-bkl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);text-decoration:none;transition:color .15s} .sg-bkl:hover{color:var(--gold)} /* ── NEWSLETTER ──────────────────────────────────────────────────────────── */ .sg-nl-wrap{padding:1.5rem 1.5rem 0} .sg-nl-title{font-family:var(--serif);font-size:24px;font-weight:300;color:var(--t);margin-bottom:5px} .sg-nl-title em{font-style:italic;color:var(--gold)} .sg-nl-sub{font-size:14px;color:var(--t3);margin-bottom:16px} .sg-nl-row{border-top:1px solid var(--ls);display:flex} .sg-nl-in{flex:1;background:transparent;border:none;outline:none;font-family:var(--sans);font-size:16px;font-weight:300;color:var(--t);padding:12px 1.25rem;letter-spacing:.01em} .sg-nl-in::placeholder{color:var(--t3)} .sg-nl-btn{background:transparent;border:none;border-left:1px solid var(--line);cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--t);font-family:var(--sans);font-weight:400;padding:12px 1.25rem;transition:color .15s} .sg-nl-btn:hover{color:var(--gold)} /* ── FOOTER ──────────────────────────────────────────────────────────────── */ .sg-footer{border-top:1px solid var(--ls);padding:2rem 1.5rem 0} .sg-ft-in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;padding-bottom:1.75rem} .sg-ft-br{font-family:var(--serif);font-size:20px;font-weight:300;margin-bottom:.35rem;color:var(--t)} .sg-ft-br em{font-style:italic;color:var(--gold)} .sg-ft-tg{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--t3)} .sg-ft-ct{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem} .sg-ft-lk{display:block;font-size:13px;color:var(--t3);margin-bottom:.35rem;text-decoration:none;transition:color .15s} .sg-ft-lk:hover{color:var(--t2)} .sg-ft-bot{border-top:1px solid var(--line);padding:.875rem 0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap} .sg-ft-cp{font-size:12px;color:var(--t3)} .sg-ft-ini{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--t3)} /* ── STANDALONE ARTICLE PAGE LAYOUT ─────────────────────────────────────── */ .sg-standalone{min-height:100vh}