/* ============================================================================= orecast — zentrales Design-System (Single Source of Truth) ----------------------------------------------------------------------------- WARUM diese Datei existiert: Früher lag dieselbe erdige Farbpalette + Serif-Schrift dupliziert in jeder HTML-Seite und zusätzlich als Python-String in src/api/regions.py. Jede Stiländerung musste 5–8× nachgezogen werden. Diese Datei bündelt alles an einer Stelle. Sie wird von ALLEN Seiten per eingebunden: - statische Seiten (landing_de/en, impressum, datenschutz, agb) - dynamische Python-Seiten (regions/news/methodik) über regions._CSS - die Karten-App (index.html) – siehe Hinweis unten. AUFBAU: 1) Tokens (:root) – global, die einzige Definition der Palette. 2) Reset + Basis-Body – global, bewusst minimal gehalten. 3) Dokument-Layer (.doc) – Marketing-/Textseiten. ALLE Layout-Regeln sind unter .doc gescoped, damit sie die Vollbild- Flex-App (index.html, KEIN .doc am ) nicht überschreiben. Die App erbt so nur die Tokens und behält ihr eigenes, spezialisiertes Layout. ============================================================================= */ /* 1) ---------- Design-Tokens: die erdige Palette (unverändert übernommen) --- */ :root{ --bg:#15191c; /* Grundfläche, fast schwarz mit Erdton */ --panel:#1d2329; /* Karten/Nav/Footer-Flächen */ --panel2:#232b32; /* leicht hellere Panel-Variante */ --ink:#e8e3d6; /* Haupttext, warmes Off-White */ --muted:#9aa6ad; /* Sekundärtext */ --line:#2f3a42; /* Rahmen/Trennlinien */ --gold:#c9a24a; /* Akzent: Erze/Gold, CTAs, Links */ --teal:#4b937e; /* Akzent: Historie/dünne Abdeckung */ --rust:#b5613a; /* Akzent: Warnhinweise/Erde */ --danger:#d24b3e; /* Gefahr (Kampfmittel etc.) */ --gold-ink:#1a1206; /* Textfarbe auf goldenen Flächen */ --serif:"Iowan Old Style",Georgia,"Times New Roman",serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* Hero-Hintergrundbild (gemeinfreies NASA/DSCOVR-EPIC-Bild, selbst gehostet). Als Variable, damit Marcus es an EINER Stelle gegen ein eigenes Bild tauschen kann. Bewusst plain url(.jpg) für maximale Browser-Kompatibilität: bei image-set() würde ein älterer Browser die GESAMTE background-Deklaration (inkl. Dunkel-Overlay) verwerfen. Die kleinere .webp liegt daneben bereit und kann später per @supports/Picture als Progressive Enhancement genutzt werden. */ --hero-img:url("/assets/img/hero-europe.jpg"); } /* 2) ---------- Reset + Basis (global, bewusst minimal) ---------------------- */ *{box-sizing:border-box} body{ margin:0; font-family:var(--serif); background:var(--bg); color:var(--ink); line-height:1.6; } a{color:var(--gold)} img{max-width:100%} /* ============================================================================= 3) DOKUMENT-LAYER — alles unter .doc, damit die App (index.html) unberührt bleibt. Marketing-/Text-/Rechtsseiten setzen . ============================================================================= */ /* ---- Navigation (Sticky, transluzent über dem Hero – gum-tech-Anmutung) ---- */ .doc .nav{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px; padding:13px 22px; border-bottom:1px solid var(--line); /* halbtransparent + Blur: schwebt sauber über dem Full-Bleed-Hero */ background:color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); position:sticky;top:0;z-index:50; } .doc .brand{font-size:22px;font-weight:600;letter-spacing:.4px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center} .doc .brand .pin{color:var(--gold)} .doc .brand .logo{height:34px} /* Bildmarke im Logo (ersetzt das frühere ◆-Zeichen). Global definiert – NICHT unter .doc – damit auch die Karten-App (index.html, kein body.doc) sie nutzt. .tld färbt die Endung „.app" golden (Logo-Lockup, Variante B). */ .logo{height:2.0em;width:auto;vertical-align:-0.42em;margin-right:.38em} .tld{color:var(--gold)} .doc .nav .sp{margin-left:auto} .doc .lang{display:flex;gap:6px} .doc .lang a{font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:5px 9px;border-radius:7px} .doc .lang a.on{color:var(--gold);border-color:var(--gold);font-weight:700} /* ---- Call-to-Action-Button ------------------------------------------------- */ .doc .cta{ background:var(--gold);color:var(--gold-ink);border:0; padding:9px 16px;border-radius:9px;font-weight:700; font-family:var(--serif);text-decoration:none;font-size:14px;display:inline-block; transition:filter .12s, transform .12s; } .doc .cta:hover{filter:brightness(1.08);transform:translateY(-1px)} /* ---- Inhaltsbreite + Standard-Abschnitte ----------------------------------- */ .doc .wrap{max-width:1060px;margin:0 auto;padding:0 22px} .doc section{padding:48px 0;border-top:1px solid var(--line)} .doc h1{font-size:clamp(26px,4.5vw,42px);margin:0 0 12px;letter-spacing:.3px} .doc h2{font-size:clamp(21px,3.2vw,28px);margin:0 0 8px} .doc h3{margin:0 0 6px;font-size:17px} .doc .lead{color:var(--muted);margin:0 0 22px;max-width:720px} .doc .kw,.doc .kw b{color:var(--gold)} /* ---- FULL-BLEED-HERO (Kern der gum-tech-Umgestaltung) --------------------- Randloser Vollbild-Hero: Satellitenbild als Hintergrund, darüber ein erdiger Dunkel-Gradient für Textkontrast + ein dezenter Goldschimmer von oben. Mehrere Hintergründe in einer Eigenschaft (oberste Lage = zuerst genannt). */ .doc .hero--full{ position:relative; min-height:clamp(440px,78vh,760px); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:96px 22px 72px; /* margin-top negativ zieht den Hero unter die transluzente Sticky-Nav. */ margin-top:-59px; background: radial-gradient(900px 420px at 50% -8%, rgba(201,162,74,.18), transparent), linear-gradient(180deg, rgba(21,25,28,.55) 0%, rgba(21,25,28,.78) 55%, var(--bg) 100%), var(--hero-img); background-size:auto, auto, cover; /* Europa liegt im oberen Drittel der Erdscheibe – Bildausschnitt dorthin. */ background-position:center, center, center 34%; background-repeat:no-repeat; } .doc .hero--full h1{font-size:clamp(34px,6vw,64px);line-height:1.1;max-width:14ch;margin:0 0 18px} .doc .hero--full p{font-size:clamp(16px,2.3vw,20px);color:#d8d2c4;max-width:680px;margin:0 auto 30px} .doc .hero--full .cta{font-size:17px;padding:14px 30px} /* sanfter Übergang vom Hero in den ersten Abschnitt (keine harte Kante) */ .doc .hero--full + .wrap > section:first-child, .doc .hero--full + section{border-top:0} /* ---- Schlichter Text-Hero (Rechts-/Regionenseiten ohne Vollbild) ----------- */ .doc .hero{padding:40px 22px 20px;text-align:center;background:radial-gradient(700px 280px at 50% -10%,rgba(201,162,74,.12),transparent)} .doc .hero p{color:var(--muted);max-width:680px;margin:0 auto 22px;font-size:17px} /* ---- Karten (Feature-Grid) ------------------------------------------------- */ .doc .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .doc .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px} .doc .card h3{margin:0 0 6px;font-size:17px} .doc .card p{margin:0;font-size:14px;color:var(--muted)} /* ---- Kennzahlen ------------------------------------------------------------ */ .doc .grid,.doc .cov-totals{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0} .doc .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;flex:1 1 160px} .doc .stat b{display:block;font-family:var(--mono);font-size:24px;color:var(--gold)} .doc .stat span{font-size:13px;color:var(--muted)} /* ---- Abdeckungskarte (Landing) + Legende ----------------------------------- */ .doc #cov-map{height:440px;border:1px solid var(--line);border-radius:14px;background:#0e1216;overflow:hidden} .doc .cov-legend{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 0;font-size:13px;color:var(--muted)} .doc .cov-legend i{width:13px;height:13px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:6px;border:1px solid #11161a} /* ---- Fließtext + Hinweis-/Warnboxen ---------------------------------------- */ .doc .prose p{max-width:760px;color:var(--ink)} .doc .prose .muted,.doc .muted{color:var(--muted)} .doc .prose .muted{font-size:14px} .doc .note{background:rgba(181,97,58,.12);border:1px solid var(--rust);border-radius:12px;padding:14px 16px;font-size:14px;color:#f0cbb9;max-width:760px;margin:18px 0} /* ---- FAQ-Akkordeon --------------------------------------------------------- */ .doc details,.doc .faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:10px 14px;margin:8px 0} .doc summary,.doc .faq summary{cursor:pointer;font-weight:700} .doc .faq p{color:var(--muted);margin:8px 0 2px;font-size:14.5px} /* ---- Regionenseiten: Fundlisten, Chips, Breadcrumb ------------------------- */ .doc .crumb{max-width:860px;margin:0 auto;padding:10px 22px 0;font-size:12px;color:var(--muted)} .doc .crumb a{color:var(--muted)} .doc ul.finds{list-style:none;padding:0;margin:8px 0;border-top:1px solid var(--line)} .doc ul.finds li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .doc .li-main{font-weight:600} .doc .li-sub{color:var(--muted);font-size:13px;font-family:var(--mono)} .doc .li-km{margin-left:auto;color:var(--muted);font-size:12px;font-family:var(--mono)} .doc .chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0} .doc .chip{border:1px solid var(--gold);color:var(--gold);border-radius:20px;padding:4px 11px;font-size:13px} .doc .more{font-size:13px;color:var(--muted);margin:26px 0;line-height:2} /* ---- Rechtsseiten: schmale Box a la Impressum ----------------------------- */ .doc .box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:14px 0} .doc .wrap--narrow{max-width:820px} /* ---- Footer ---------------------------------------------------------------- */ .doc footer{border-top:1px solid var(--line);background:var(--panel);padding:24px;text-align:center;font-size:13px;color:var(--muted)} .doc footer a{color:var(--muted);text-decoration:none;margin:0 9px} .doc footer a:hover{color:var(--gold)} /* ---- Leaflet-Popups in Serifenschrift -------------------------------------- */ .leaflet-popup-content{font-family:var(--serif)} /* ---- SEO-Hero-Foto (Regionen & Guides), lizenzrein selbst gehostet --------- */ .doc figure.hero-img{margin:0 0 26px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel)} .doc figure.hero-img img{display:block;width:100%;height:clamp(220px,38vw,420px);object-fit:cover} .doc figure.hero-img figcaption{font-size:12px;color:var(--muted);padding:7px 12px;line-height:1.45} .doc figure.hero-img figcaption a{color:var(--muted);text-decoration:underline} /* ---- Mobile ---------------------------------------------------------------- */ @media (max-width:600px){ .doc .hero--full{min-height:62vh;padding:72px 18px 48px;background-position:center,center,center 30%} .doc .hero{padding:30px 18px 14px} .doc #cov-map{height:340px} .doc .nav .cta{display:none} .doc section{padding:36px 0} .doc figure.hero-img img{height:200px} } /* --- Hero-Deko: freigestellte Dinos + Goldnuggets (rein dekorativ) ---------- Liegt als absolute Ebene im .hero--full, hinter dem Text (z-index). Bilder sind aria-hidden + pointer-events:none, damit sie Bedienung/Screenreader nicht stoeren. Sanftes Schweben; bei prefers-reduced-motion aus. Auf kleinen Screens dezenter bzw. teils ausgeblendet, damit die Headline lesbar bleibt. */ .doc .hero--full > h1, .doc .hero--full > p, .doc .hero--full > .cta{position:relative;z-index:1} .doc .hero-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .doc .hero-decor img{position:absolute;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))} .doc .hero-decor .d-plateo{left:clamp(-48px,-2vw,0px);bottom:0;width:clamp(190px,26vw,380px);opacity:.9;animation:heroFloat 7s ease-in-out infinite} .doc .hero-decor .d-rex{right:clamp(-48px,-2vw,0px);bottom:4px;width:clamp(180px,25vw,360px);opacity:.9;animation:heroFloat 8s ease-in-out infinite reverse} .doc .hero-decor .n1{left:9%;top:22%;width:clamp(58px,7vw,104px);opacity:.96;filter:drop-shadow(0 0 16px rgba(201,162,74,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.4));animation:heroFloat 5.5s ease-in-out infinite} .doc .hero-decor .n2{right:11%;top:32%;width:clamp(44px,5.5vw,82px);opacity:.96;filter:drop-shadow(0 0 14px rgba(201,162,74,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.4));animation:heroFloat 6.5s ease-in-out infinite reverse} @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media (max-width:720px){ .doc .hero-decor .d-plateo,.doc .hero-decor .d-rex{opacity:.5;width:150px} .doc .hero-decor .n1{top:13%} } @media (max-width:520px){ .doc .hero-decor .d-rex,.doc .hero-decor .n2{display:none} .doc .hero-decor .d-plateo{opacity:.38} } @media (prefers-reduced-motion:reduce){ .doc .hero-decor img{animation:none} }