/* Geovera - shared styling for the legal pages (/imprint, /privacy) Author: Markus Reichl Organization: produmatico License: proprietary Created: 2026-08-01 Version: 0.1.180 Last modified: 2026-08-01 Same design system as the landing page (brand variables, dark/light toggle, sticky glass header, navy footer) plus a document layout: sticky table of contents on the left, prose column on the right, scroll-spy highlighting. Both pages carry EVERY text twice - English and German - as sibling blocks marked .l-en / .l-de; the language switch flips data-lang on and the CSS hides the other one. Default is English (the site is English); an explicit choice is persisted per browser in localStorage['geovera-legal-lang']. */ :root{ --gold:#f4a62a; --gold-dark:#e0921a; --gold-soft:#fbe7c4; --navy:#344458; --red:#a52421; --blue:#8a9ca3; --radius:16px; --maxw:1180px; --bg:#ffffff; --bg-2:#f6f8fa; --panel:#ffffff; --card:#ffffff; --txt:#26333f; --muted:#66788a; --stroke:#e4e9ee; --heading:#344458; --header-bg:rgba(255,255,255,.82); --img-filter:none; } html[data-theme="dark"]{ --bg:#131b26; --bg-2:#0e151f; --panel:#1c2735; --card:#1c2735; --txt:#dde6ef; --muted:#93a4b6; --stroke:rgba(255,255,255,.10); --heading:#eaf1f8; --header-bg:rgba(19,27,38,.85); --gold-soft:rgba(244,166,42,.16); --img-filter:brightness(0) invert(.82); } /* Language switch: show one, hide the other. Specificity matters here and is easy to get wrong: a blanket `span.l-de{display:inline}` (0,1,1) OUTRANKS `.l-de{display:none}` (0,1,0) and shows both languages at once. So every "show" rule is qualified with the html[data-lang=...] prefix, which lifts it above the hiding rule. */ .l-de{display:none} span.l-en{display:inline} html[data-lang="de"] .l-en{display:none} html[data-lang="de"] .l-de{display:block} html[data-lang="de"] span.l-de{display:inline} /* a must not become display:block - that collapses the column widths */ html[data-lang="de"] tbody.l-de{display:table-row-group} *{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg);color:var(--txt);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} h1,h2,h3,h4{color:var(--heading);letter-spacing:-.01em;margin:0} .grad-bg{position:fixed;inset:0;z-index:-1;background: radial-gradient(1100px 620px at 82% -8%, rgba(244,166,42,.10), transparent 60%), radial-gradient(900px 620px at 6% 4%, rgba(52,68,88,.06), transparent 55%), linear-gradient(180deg,var(--panel), var(--bg-2))} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:20;background:var(--header-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke)} nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px} .brand{display:flex;align-items:center;gap:2px;color:#163a58;font-weight:700;font-size:26px;letter-spacing:-.02em} html[data-theme="dark"] .brand{color:#fff} .brand img{height:30px;width:auto;display:block} .brand .logo-white{display:none} html[data-theme="dark"] .brand .logo-navy{display:none} html[data-theme="dark"] .brand .logo-white{display:block} .nav-links{display:flex;align-items:center;gap:16px;font-size:14.5px;font-weight:500;color:var(--muted)} .nav-links .nav-link:hover{color:var(--gold-dark)} @media(max-width:680px){.nav-links .nav-link{display:none}} .icon-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;min-width:38px;padding:0 10px; border-radius:10px;border:1px solid var(--stroke);background:var(--card);color:var(--heading);cursor:pointer; transition:.16s;flex:0 0 auto;font:inherit;font-size:13px;font-weight:600} .icon-btn:hover{border-color:var(--blue);color:var(--gold-dark)} .icon-btn svg{width:18px;height:18px;display:block} .theme-toggle .ico-sun{display:none} html[data-theme="dark"] .theme-toggle .ico-moon{display:none} html[data-theme="dark"] .theme-toggle .ico-sun{display:block} .lang-switch{display:inline-flex;border:1px solid var(--stroke);border-radius:10px;overflow:hidden;background:var(--card);height:38px} .lang-switch button{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:0 11px;border:0;background:transparent; color:var(--muted);cursor:pointer;transition:.16s} .lang-switch button:hover{color:var(--gold-dark)} .lang-switch button[aria-pressed="true"]{background:var(--gold);color:#3a2a06} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:11px 20px; border-radius:11px;cursor:pointer;border:1px solid transparent;transition:.16s;white-space:nowrap} .btn-primary{background:var(--gold);color:#3a2a06;box-shadow:0 10px 26px -10px rgba(244,166,42,.7)} .btn-primary:hover{background:var(--gold-dark);transform:translateY(-1px)} @media(max-width:560px){.nav-cta{display:none}} /* ---------- title band ---------- */ .doc-head{padding:64px 24px 30px;max-width:var(--maxw);margin:0 auto;position:relative} .doc-head .africa{position:absolute;right:12px;top:8px;width:210px;opacity:.07;filter:var(--img-filter);pointer-events:none} .eyebrow{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:var(--gold-dark);background:var(--gold-soft);padding:7px 13px;border-radius:999px;margin-bottom:18px} .doc-head h1{font-size:clamp(32px,4.2vw,46px);font-weight:700;line-height:1.1} .doc-head .sub{color:var(--muted);font-size:16.5px;margin:16px 0 0;max-width:620px} .doc-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13px;color:var(--muted)} /* DIRECT children only - a bare `.doc-meta span` (0,1,1) would also hit the nested .l-en/.l-de spans and outrank `.l-de{display:none}`, printing both languages next to each other. Same trap as the language block above. */ .doc-meta > span{display:inline-flex;align-items:center;gap:7px} .doc-meta svg{width:15px;height:15px;color:var(--gold-dark)} .rule{height:3px;width:64px;background:var(--gold);border-radius:2px;margin:26px 0 0} /* ---------- document layout ---------- */ .doc{display:grid;grid-template-columns:250px 1fr;gap:56px;max-width:var(--maxw);margin:0 auto;padding:26px 24px 80px;align-items:start} .toc{position:sticky;top:96px;font-size:13.5px} .toc .toc-title{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .toc a{display:block;padding:6px 0 6px 13px;border-left:2px solid var(--stroke);color:var(--muted);transition:.15s;line-height:1.4} .toc a:hover{color:var(--gold-dark);border-left-color:var(--blue)} .toc a.active{color:var(--heading);border-left-color:var(--gold);font-weight:600} @media(max-width:900px){.doc{grid-template-columns:1fr;gap:0}.toc{position:static;margin-bottom:34px; background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:18px 20px}} section{scroll-margin-top:92px;margin-bottom:44px} section > h2{font-size:22px;font-weight:700;margin-bottom:14px;display:flex;align-items:baseline;gap:11px} section > h2 .num{font-size:13px;font-weight:700;color:var(--gold-dark);letter-spacing:.06em;flex:0 0 auto} h3{font-size:16.5px;font-weight:600;margin:22px 0 8px} p{margin:0 0 13px} ul,ol{margin:0 0 13px;padding-left:20px} li{margin-bottom:7px} .doc a[href^="http"],.doc a[href^="mailto"],.doc a.inline{color:var(--gold-dark);font-weight:500; border-bottom:1px solid rgba(244,166,42,.45)} .doc a[href^="http"]:hover,.doc a[href^="mailto"]:hover,.doc a.inline:hover{border-bottom-color:var(--gold-dark)} strong{color:var(--heading);font-weight:600} .small{font-size:13.5px;color:var(--muted)} /* ---------- cards ---------- */ .party-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 20px} @media(max-width:760px){.party-grid{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:22px 24px; box-shadow:0 18px 50px -30px rgba(52,68,88,.4)} .card .role{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:9px} .card .name{font-size:17px;font-weight:700;color:var(--heading);margin-bottom:3px} .card address{font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.65} .card address a{color:var(--gold-dark)} .note{border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 12px 12px 0;padding:15px 18px;margin:16px 0;font-size:14.5px} .note strong{color:var(--heading)} /* an unresolved item Markus still has to fill in - deliberately loud */ .todo{background:rgba(165,36,33,.12);border:1px dashed var(--red);color:var(--red); border-radius:7px;padding:1px 7px;font-weight:600;font-size:13.5px;display:inline-block} /* ---------- tables ---------- */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 18px; border:1px solid var(--stroke);border-radius:12px;background:var(--card)} table{border-collapse:collapse;width:100%;font-size:13.8px;min-width:640px} th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--stroke);vertical-align:top} thead th{background:var(--navy);color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.03em;border-bottom:0;white-space:nowrap} thead th:first-child{border-top-left-radius:11px} thead th:last-child{border-top-right-radius:11px} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:rgba(244,166,42,.06)} td strong{color:var(--heading)} /* ---------- footer ---------- */ footer{background:var(--navy);color:#c7d0da;margin-top:20px;padding:30px 0 20px} footer .btm{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#8fa0af} footer a{color:#c7d0da} footer a:hover{color:var(--gold)} .foot-links{display:flex;gap:16px;flex-wrap:wrap} /* ---------- print ---------- */ @media print{ header,.toc,.nav-links,footer .foot-links,.grad-bg,.doc-head .africa{display:none!important} body{background:#fff;color:#000} .doc{grid-template-columns:1fr;padding:0} section{page-break-inside:avoid} a{color:#000!important;border:0!important} }