/* ============================================================ OnlineTopoMap – Stylesheet v3 Design: modern, jung, reduziert, Vollbild-Burger-Navigation Neu: Kartenstil-Umschalter, Sprachwechsel, Mobile-Feinschliff (Schriften werden im der Seiten geladen – schnellerer Aufbau) ============================================================ */ :root{ /* Farbe */ --bg: #FFFFFF; --bg-soft: #F6F7F2; --bg-card: #FFFFFF; --line: #E7E8E2; --ink: #14171A; --ink-soft: #62666B; --lime: #D6FA3B; --lime-ink: #1D2A12; --navy: #1D2A3A; --coral: #FF6B4A; --overlay: #14171A; --f-display: 'Space Grotesk', 'Inter', sans-serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --radius: 16px; --radius-sm: 10px; --shadow-soft: 0 4px 20px rgba(20, 23, 26, 0.06); --shadow-hover: 0 12px 28px rgba(20, 23, 26, 0.10); /* Höhe der Kopfzeile – wird von script.js live gemessen */ --header-h: 58px; /* Vertikaler Rhythmus */ --space-section: 76px; --gutter: 24px; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body{ margin:0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } body.menu-open{ overflow:hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } :focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; } /* Nur für Screenreader / Suchmaschinen */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; } .container{ width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); } h1,h2,h3,h4{ font-family: var(--f-display); color: var(--ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } h1{ font-size: clamp(2.1rem, 5.4vw, 4.4rem); font-weight: 700; } h2{ font-size: clamp(1.55rem, 3.2vw, 2.5rem); } h3{ font-size: 1.2rem; } p{ margin: 0 0 1em; color: var(--ink); } p:last-child{ margin-bottom: 0; } .muted{ color: var(--ink-soft); } .eyebrow{ font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--ink-soft); font-weight: 500; display:inline-flex; align-items:center; gap:.6em; margin-bottom: 1.1em; } .eyebrow::before{ content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); display:inline-block; flex-shrink:0; box-shadow: 0 0 0 4px rgba(214,250,59,0.25); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding: .95em 1.7em; min-height: 46px; border-radius: 999px; font-family: var(--f-body); font-weight: 600; font-size: .95rem; cursor:pointer; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--ink); color: #fff; box-shadow: var(--shadow-soft); } .btn-primary:hover{ background:#000; box-shadow: var(--shadow-hover); } .btn-lime{ background: var(--lime); color: var(--lime-ink); box-shadow: var(--shadow-soft); } .btn-lime:hover{ box-shadow: var(--shadow-hover); } .btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover{ border-color: var(--ink); } .btn-amber{ background: var(--coral); color: #fff; box-shadow: var(--shadow-soft); } .btn-amber:hover{ box-shadow: var(--shadow-hover); } /* Buttons auf dunklem Grund (CTA-Band) – alle drei gleich */ .btn-cta{ background: #fff; color: var(--ink); border-color: #fff; box-shadow: var(--shadow-soft); } a.btn-cta:hover{ background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .btn.is-soon{ cursor: not-allowed; color: rgba(20,23,26,0.42); } .btn.is-soon:hover{ transform: none; background: #fff; border-color: #fff; color: rgba(20,23,26,0.42); } /* E-Mail-Adressen nie über zwei Zeilen brechen */ a[href^="mailto:"]{ white-space: nowrap; } /* ============================================================ Kopfzeile ============================================================ */ .site-header{ position: sticky; top:0; z-index: 60; background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav{ display:flex; align-items:center; gap: 14px; /* horizontal wie .container – damit Logo und Seiteninhalt auf einer Linie sitzen */ padding: 7px var(--gutter); min-height: 58px; } .brand{ display:flex; align-items:center; gap:.55em; font-family: var(--f-display); font-weight:700; font-size:1.15rem; color: var(--ink); flex-shrink: 0; z-index: 80; } .brand-icon{ width: 32px; height: 32px; display: block; flex-shrink:0; } .nav-right{ display:flex; align-items:center; gap: .6em; margin-left: auto; flex-shrink: 0; z-index: 80; } /* ---------- Kartenstil-Umschalter (drei eigenständige Buttons) ---------- */ .map-switch{ display:flex; align-items:center; gap: 8px; margin: 0 auto; } .ms-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding: .5em 1.15em; min-height: 38px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--f-body); font-size: .855rem; font-weight: 600; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .ms-btn:hover{ border-color: var(--ink); color: var(--ink); } .ms-btn.is-active{ background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-soft); } .ms-btn.is-soon{ background: var(--bg-soft); border-style: dashed; color: rgba(98,102,107,0.55); cursor: not-allowed; } .ms-btn.is-soon:hover{ border-color: var(--line); color: rgba(98,102,107,0.55); } .ms-soon{ font-family: var(--f-mono); font-size: .58rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; background: var(--lime); color: var(--lime-ink); padding: .3em .55em; border-radius: 999px; line-height: 1; } .ms-short{ display:none; } /* ---------- Teilen ---------- */ .share{ position: relative; } .share-btn{ display:inline-flex; align-items:center; gap:.5em; padding: .32em .95em .32em .8em; min-height: 36px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--f-body); font-size: .855rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: border-color .15s ease, color .15s ease; } .share-btn:hover{ border-color: var(--ink); color: var(--ink); } .share.is-open .share-btn{ border-color: var(--ink); color: var(--ink); } .share-ico{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .share-menu{ position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; min-width: 190px; display: grid; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-hover); } .share-menu[hidden]{ display: none; } .share-item{ display: flex; align-items: center; width: 100%; padding: .6em .8em; min-height: 40px; border: 0; border-radius: 9px; background: none; text-align: left; font-family: var(--f-body); font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer; } .share-item:hover{ background: var(--bg-soft); } .share-item[data-net="copy"]{ border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: .75em; } .share-item.is-done{ color: var(--lime-ink); background: var(--lime); } /* ---------- Offene Teilen-Reihe (Unterstützen-Seite) ---------- */ /* Fließtext-Schrift wie der Absatz darüber, nur mit etwas Luft zu den Buttons */ .share-row-intro{ margin-top: 1.7em; margin-bottom: 0; color: var(--ink); } .share-row{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.6em; margin-top: 1.1em; } .share-chip{ display:inline-flex; align-items:center; justify-content:center; padding:.6em 1.25em; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-family: var(--f-body); font-size:.9rem; font-weight:600; cursor:pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .share-chip:hover{ background: var(--ink); color:#fff; border-color: var(--ink); } .share-chip.is-done{ background: var(--lime); color: var(--lime-ink); border-color: var(--lime); } .share-chip[hidden]{ display:none; } /* dieselbe Reihe auf dunklem Grund */ .cta-band .share-row{ justify-content:center; } .cta-band .share-row-intro{ color: rgba(255,255,255,0.55); } .cta-band .share-chip{ border-color: rgba(255,255,255,0.3); background: transparent; color:#fff; } .cta-band .share-chip:hover{ background:#fff; color: var(--ink); border-color:#fff; } /* kleinerer Knopf für den Fließtext */ .btn-sm{ padding: .6em 1.2em; min-height: 40px; font-size: .88rem; margin-top: 1.1em; } .btn-sm.is-done{ background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } /* ---------- Sprachwechsel ---------- */ .lang-switch{ display:inline-flex; align-items:center; gap: 2px; padding: 2px; border: 1.5px solid var(--line); border-radius: 999px; font-family: var(--f-mono); font-size: .74rem; font-weight: 500; } .lang-opt{ display:inline-flex; align-items:center; justify-content:center; min-width: 34px; min-height: 30px; padding: 0 .55em; border-radius: 999px; color: var(--ink-soft); letter-spacing: .05em; transition: background .15s ease, color .15s ease; } .lang-opt.is-active{ background: var(--ink); color:#fff; } a.lang-opt:hover{ background: var(--bg-soft); color: var(--ink); } /* ---------- Burger ---------- */ .burger{ display:flex; align-items:center; gap:.7em; background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: .32em .32em .32em 1em; cursor:pointer; font-family: var(--f-body); font-weight:600; font-size:.875rem; color: var(--ink); transition: border-color .15s ease, background .15s ease; } .burger:hover{ border-color: var(--ink); } .burger .burger-icon{ width: 32px; height: 32px; border-radius: 50%; background: var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; transition: background .2s ease; } .burger .burger-icon span{ position:absolute; width: 14px; height:1.6px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .burger .burger-icon span:nth-child(1){ transform: translateY(-4px); } .burger .burger-icon span:nth-child(2){ transform: translateY(4px); } body.menu-open .burger .burger-icon span:nth-child(1){ transform: translateY(0) rotate(45deg); } body.menu-open .burger .burger-icon span:nth-child(2){ transform: translateY(0) rotate(-45deg); } body.menu-open .burger .burger-icon{ background: var(--lime); } body.menu-open .burger .burger-icon span{ background: var(--lime-ink); } /* Bei offenem Menü bleibt die Kopfzeile bedienbar – auf dunklem Grund */ body.menu-open .site-header{ z-index: 80; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } body.menu-open .brand{ color: #fff; } /* Im offenen Menü kein Logo */ body.menu-open .brand-icon{ display: none; } body.menu-open .map-switch, body.menu-open .share{ visibility: hidden; } body.menu-open .lang-switch{ border-color: rgba(255,255,255,0.25); } body.menu-open .lang-opt{ color: rgba(255,255,255,0.6); } body.menu-open .lang-opt.is-active{ background: #fff; color: var(--ink); } body.menu-open a.lang-opt:hover{ background: rgba(255,255,255,0.14); color: #fff; } body.menu-open .burger{ color: #fff; border-color: rgba(255,255,255,0.22); } body.menu-open .burger:hover{ border-color: #fff; } /* ============================================================ Vollbild-Menü ============================================================ */ .menu-overlay{ position: fixed; inset: 0; background: var(--overlay); color: #fff; z-index: 70; display:block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--header-h) + 34px) var(--gutter) 48px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } body.menu-open .menu-overlay{ opacity: 1; visibility: visible; transform: translateY(0); } .menu-overlay-inner{ width:100%; max-width: 1160px; min-height: calc(100vh - var(--header-h) - 92px); margin: 0 auto; display:grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items:center; align-content:center; } .menu-links{ list-style:none; margin:0; padding:0; max-width: 520px; } .menu-links li{ border-top: 1px solid rgba(255,255,255,0.14); } .menu-links li:last-child{ border-bottom: 1px solid rgba(255,255,255,0.14); } .menu-links a{ display:flex; align-items:center; justify-content:space-between; gap: 1em; padding: .72em 2px; font-family: var(--f-display); font-size: clamp(0.95rem, 1.7vw, 1.12rem); font-weight: 600; color: #fff; transition: color .15s ease, padding-left .15s ease; } .menu-links a:hover{ color: var(--lime); padding-left: 10px; } .menu-links a[aria-current="page"]{ color: var(--lime); } .menu-links a .arrow{ opacity:0; transition: opacity .15s ease; font-size:0.55em; } .menu-links a:hover .arrow{ opacity:1; } .menu-meta{ display:flex; flex-direction:column; gap: 1.5em; } .menu-meta .eyebrow{ color: rgba(255,255,255,0.55); margin-bottom:0; } .menu-meta .eyebrow::before{ box-shadow: 0 0 0 4px rgba(214,250,59,0.35); } .menu-meta p{ color: rgba(255,255,255,0.7); font-size:.95rem; max-width: 36ch; margin:0; } .menu-meta a.contact-link{ font-family: var(--f-mono); font-size:.85rem; color: var(--lime); border-bottom: 1px solid rgba(214,250,59,0.4); width: fit-content; padding-bottom: 2px; } /* Kartenstile im Menü */ /* Spalte so breit wie der längste Eintrag – alle Buttons gleich breit */ .menu-maps{ display:grid; grid-template-columns: minmax(0, max-content); gap:.5em; } .menu-maps-title{ font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: rgba(255,255,255,0.45); margin-bottom: .2em; } .menu-map-link{ display:flex; align-items:center; justify-content:space-between; gap:.9em; width: 100%; max-width: 100%; padding: .55em 1em; min-height: 40px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); color:#fff; font-family: var(--f-display); font-weight:600; font-size:.9rem; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } a.menu-map-link:hover{ background: var(--lime); border-color: var(--lime); color: var(--lime-ink); transform: translateX(3px); } .menu-map-link .arrow{ opacity:.45; font-size:.8em; } a.menu-map-link:hover .arrow{ opacity:1; } .menu-map-link.is-soon{ opacity:.55; cursor:not-allowed; } /* ============================================================ Inhalte ============================================================ */ .hero{ padding: calc(var(--space-section) + 12px) 0 var(--space-section); border-bottom: 1px solid var(--line); } .hero-inner{ max-width: 780px; } .hero h1 .hl{ background: var(--lime); padding: 0 .12em; border-radius: .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hero-lede{ font-size: 1.12rem; max-width: 56ch; color: var(--ink-soft); margin-top: .7em; } .hero-actions{ display:flex; gap: .9em; margin-top: 2.1em; flex-wrap:wrap; } .hero-tags{ display:flex; gap:.6em; flex-wrap:wrap; margin-top: 2.4em; } .hero-tag{ font-family: var(--f-mono); font-size:.78rem; padding: .5em .9em; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); } /* ---------- Sections ---------- */ section{ padding: var(--space-section) 0; } section.map-full{ padding: 0; } .section-soft{ background: var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section-soft + .section-soft{ border-top: none; } .section-head{ max-width: 660px; margin-bottom: 2.4em; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head p:last-child{ margin-bottom:0; } .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; } .fact-list{ list-style:none; margin:0; padding:0; display:grid; gap: 1em; } .fact-list li{ display:flex; gap:.8em; align-items:baseline; font-size:.98rem; padding-bottom: 1em; border-bottom: 1px solid var(--line); } .fact-list li:last-child{ border-bottom:none; padding-bottom:0; } .fact-list li strong{ color: var(--ink); } /* ---------- Erklärabschnitt: Frage links, Details rechts ---------- */ .explainer{ display:grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr); gap: 56px; align-items: start; } .explainer-head h2{ font-size: clamp(1.45rem, 2.5vw, 2rem); margin-bottom: .8em; } /* Kurzdefinitionen: kompakte Liste statt einzelner Absätze */ .def-list{ list-style:none; margin:0; padding:0; display:grid; gap: .6em; } .def-list li{ position: relative; padding-left: 1.15em; font-size: .98rem; line-height: 1.5; color: var(--ink-soft); } .def-list li strong, .def-list li b{ color: var(--ink); } .def-list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--lime); } .explainer-body h3{ font-size: 1.05rem; margin: .15em 0 .7em; } .explainer-body p{ font-size: .97rem; line-height: 1.6; margin-bottom: .85em; } .explainer-body .fact-list{ margin: .5em 0 1.1em; gap: .5em; } /* längere Einträge fließen als Text, ohne Trennlinien und ohne zweite Spalte */ .explainer-body .fact-list li{ display:block; font-size: .95rem; line-height: 1.55; padding-bottom: 0; border-bottom: none; color: var(--ink-soft); } /* Quellenlinks im Fließtext: dezent unterstrichen, im Markenton beim Überfahren */ .explainer a[href]{ color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(20,23,26,0.35); transition: text-decoration-color .15s ease, background-color .15s ease; } .explainer a[href]:hover, .explainer a[href]:focus-visible{ text-decoration-color: var(--ink); background: var(--lime); border-radius: 3px; } .explainer-note a[href]{ color: inherit; } .explainer-note{ font-size: .88rem; line-height: 1.55; color: var(--ink-soft); margin-top: 1.3em; padding-top: 1.1em; border-top: 1px solid var(--line); } /* ---------- Lesespalte für längere Texte ---------- */ .prose{ max-width: 68ch; } .prose h3{ font-size: 1.15rem; margin-top: 1.9em; margin-bottom: .7em; } .prose > p + p{ margin-top: -.2em; } .prose .fact-list{ margin: 1.1em 0 1.6em; } /* längere Einträge fließen als Text, statt in zwei Spalten zu brechen */ .prose .fact-list li{ display: block; } /* ---------- Cards / Feature grid ---------- */ .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; } .card{ background: var(--bg-card); padding: 32px 28px; transition: background .15s ease; } /* Einzeln stehende Karten brauchen eine Kante – im Raster liefert die das Gitter */ :not(.grid-3) > .card{ border: 1px solid var(--line); border-radius: var(--radius); } .card:hover{ background: var(--bg-soft); } .card-num{ font-family: var(--f-mono); font-size:.75rem; color: var(--ink-soft); display:block; margin-bottom: 1.2em; } .card h3{ margin-bottom:.45em; } .card p{ color: var(--ink-soft); font-size:.94rem; margin:0; } .card .fact-list{ font-size:.94rem; } /* ---------- Weltkarte / Dummy ---------- */ .map-frame{ position:relative; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-soft); overflow:hidden; } .map-frame .map-toolbar{ display:flex; align-items:center; justify-content:space-between; padding: 14px 18px; font-family: var(--f-mono); font-size:.75rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .map-frame .dots{ display:flex; gap:6px; } .map-frame .dots span{ width:8px; height:8px; border-radius:50%; background: var(--line); } .map-canvas{ position:relative; overflow:hidden; background: #EFF1E9; min-height: 380px; display:flex; align-items:center; justify-content:center; } .map-canvas svg{ width: 100%; height:100%; } .map-placeholder-badge{ position:absolute; bottom: 18px; left:18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6em 1em; font-size: .78rem; color: var(--ink-soft); font-family: var(--f-mono); max-width: 260px; } /* ---------- CTA band ---------- */ .cta-band{ background: var(--ink); color: #fff; border-radius: 24px; padding: 64px 44px; text-align:center; } .cta-band h2{ color:#fff; } .cta-band p{ color: rgba(255,255,255,0.65); max-width: 52ch; margin-left:auto; margin-right:auto; } /* Drei gleich breite, gleich aussehende Buttons */ .cta-actions{ display:grid; grid-template-columns: repeat(3, minmax(0, 240px)); justify-content:center; gap: .75em; margin-top: 2.2em; } .cta-actions .btn{ width: 100%; } @media (max-width: 760px){ /* untereinander, statt drei zu schmale Spalten */ .cta-actions{ grid-template-columns: minmax(0, 320px); } } /* dunkler Button auf dunklem Band wäre unsichtbar */ .cta-band .btn-primary{ background:#fff; color: var(--ink); } .cta-band .btn-primary:hover{ background: var(--lime); color: var(--lime-ink); } /* ---------- Footer ---------- */ footer{ background: var(--bg-soft); border-top: 1px solid var(--line); padding: 60px 0 28px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; } .footer-brand p{ color: var(--ink-soft); font-size:.92rem; max-width: 32ch; } .footer-col h4{ font-family: var(--f-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color: var(--ink-soft); margin-bottom: 1em; } .footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7em; } .footer-col a{ font-size:.92rem; color: var(--ink); } .footer-col a:hover{ color: var(--coral); } .foot-soon{ display:inline-flex; align-items:center; gap:.5em; font-size:.92rem; color: var(--ink-soft); } .footer-bottom{ border-top: 1px solid var(--line); padding-top: 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em; font-size:.8rem; color: var(--ink-soft); } /* Lizenzlinks: sichtbar, aber ruhig genug für die Fußzeile */ .footer-bottom a[href]{ text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(98,102,107,0.45); } .footer-bottom a[href]:hover, .footer-bottom a[href]:focus-visible{ color: var(--ink); text-decoration-color: currentColor; } /* ---------- Legal / simple page ---------- */ .page-hero{ padding: calc(var(--space-section) - 8px) 0 40px; border-bottom: 1px solid var(--line); } .legal{ max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 96px; } .legal h2{ margin-top: 1.7em; } .legal h2:first-child{ margin-top:0; } .legal address{ font-style:normal; } .legal .box{ background: var(--bg-soft); border:1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin: 1.6em 0; } .legal .note{ background: #FFF7E0; border: 1px solid #F0E2AE; border-radius: var(--radius); padding: 18px 22px; font-size:.92rem; color: #6B5A18; } .placeholder{ background: #FFEDE7; color: #C1461F; padding: .1em .4em; border-radius: 4px; font-family: var(--f-mono); font-size: .92em; } /* ---------- Support page ---------- */ .support-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; } .support-card{ background: var(--bg-card); padding: 28px; } .support-card .num{ font-family: var(--f-mono); color: var(--coral); font-weight:600; font-size:.85rem; margin-bottom:.6em; display:block; } /* ---------- Utilities ---------- */ .center{ text-align:center; } .mt-0{ margin-top:0; } /* ============================================================ Vollbild-Karte ============================================================ */ .map-full{ position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; width: 100%; background: var(--bg-soft); /* Karte in der Mitte, links und rechts Platz für Werbung. --ad-rail bleibt 0, solange das Fenster zu schmal ist. */ --ad-rail: 0px; display: grid; grid-template-columns: var(--ad-rail) minmax(0, 1fr) var(--ad-rail); } /* Feste Spalten, damit die Karte auch dann mittig sitzt, wenn die Werbespalten ausgeblendet sind */ .ad-rail-start{ grid-column: 1; } .map-stage{ grid-column: 2; position: relative; min-width: 0; height: 100%; } .ad-rail-end{ grid-column: 3; } .map-full iframe{ display: block; width: 100%; height: 100%; border: 0; } /* Werbespalten: solange leer, sind sie nicht da */ .ad-rail{ display: none; height: 100%; overflow: hidden; background: var(--bg-soft); } .ad-rail-start{ border-right: 1px solid var(--line); } .ad-rail-end{ border-left: 1px solid var(--line); } /* Wide Skyscraper (160 × 600) passt ab hier neben die Karte */ @media (min-width: 1280px){ .map-full{ --ad-rail: 160px; } .ad-rail{ display: block; } } /* Ab hier ist Platz für Half Page (300 × 600) */ @media (min-width: 1700px){ .map-full{ --ad-rail: 300px; } } /* Flache Fenster: die Karte braucht die Höhe, Hochkant-Werbung lohnt nicht */ @media (max-height: 560px){ .map-full{ --ad-rail: 0px; } .ad-rail{ display: none; } } body.map-page{ height: 100%; overflow: hidden; } body.map-page main{ display: block; } /* Eingebettete Karte auf den Kartenstil-Seiten */ .map-embed{ position: relative; height: min(68vh, 620px); min-height: 380px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); } .map-embed iframe{ display: block; width: 100%; height: 100%; border: 0; } .map-embed-note{ margin-top: 1em; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .2em .8em; } .map-embed-note a{ color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); } .map-embed-note a:hover{ border-bottom-color: var(--ink); } /* ============================================================ Responsive ============================================================ */ /* Kartenstil-Namen abkürzen, sobald es eng wird */ @media (max-width: 1080px){ .ms-long{ display:none; } .ms-short{ display:inline; } .ms-btn{ padding: .5em .85em; } } @media (max-width: 900px){ :root{ --space-section: 60px; } .two-col{ grid-template-columns: 1fr; gap: 38px; } /* Einspaltig: Lizenzhinweis rutscht ans Ende, statt mitten in den Text */ .explainer{ grid-template-columns: 1fr; gap: 22px; } .explainer-head{ display: contents; } .explainer-head h2{ order: 1; margin-bottom: 0; } .explainer .def-list{ order: 2; } .explainer-body{ order: 3; } .explainer .explainer-note{ order: 4; margin-top: 0; } .grid-3{ grid-template-columns: 1fr 1fr; } /* ungerade Kartenzahl: letzte Karte füllt die Zeile, statt eine Lücke zu lassen */ .grid-3 > .card:last-child:nth-child(odd){ grid-column: 1 / -1; } .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; } .support-grid{ grid-template-columns: 1fr; } /* Mobil: erst die Kartenstile, dann das Menü, dann Beschreibung & Sprache */ .menu-overlay{ padding-top: calc(var(--header-h) + 20px); } .menu-overlay-inner{ display:flex; flex-direction:column; align-items: stretch; justify-content: flex-start; gap: 24px; min-height: 0; } .menu-meta{ display: contents; } .menu-maps{ order: 1; } .menu-overlay-inner nav{ order: 2; } .menu-meta > .eyebrow{ order: 3; } .menu-meta > p{ order: 4; } .menu-meta > .contact-link{ order: 5; } } /* Ab hier: Kartenstile als eigene, volle Zeile in der Kopfzeile */ @media (max-width: 900px){ .share-label{ display: none; } .share-btn{ padding: .32em; width: 36px; justify-content: center; } } @media (max-width: 860px){ .nav{ flex-wrap: wrap; padding-top: 6px; padding-bottom: 7px; row-gap: 7px; min-height: 0; } .ms-btn{ min-height: 34px; } .map-switch{ order: 3; width: 100%; margin: 0; } .ms-btn{ flex: 1 1 0; min-width: 0; padding: .5em .4em; } .map-switch .ms-soon{ display:none; } .map-switch .ms-btn.is-soon::after{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex-shrink: 0; } } @media (max-width: 640px){ :root{ --gutter: 18px; --space-section: 52px; } .brand{ font-size: 1.05rem; } .burger span.burger-label{ display:none; } .burger{ padding: .32em; } .grid-3{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; } .cta-band{ padding: 44px 22px; border-radius: 20px; } .card{ padding: 26px 22px; } .hero-actions .btn{ width: 100%; } .hero-lede{ font-size: 1.05rem; } .legal{ padding: 40px var(--gutter) 72px; } .menu-links a{ padding: .62em 2px; } .footer-bottom{ justify-content:flex-start; } } @media (max-width: 400px){ .share-menu{ right: -60px; min-width: 170px; } .ms-btn{ font-size: .8rem; gap:.35em; } .ms-ico{ width:15px; height:15px; } .lang-opt{ min-width: 30px; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .btn:hover, a.menu-map-link:hover{ transform:none; } } @media print{ .site-header, .menu-overlay, .map-full{ display:none !important; } body{ color:#000; } }