/* ═══════════════════════════════════════════════════════════════ zquady.com, Basis fuer ALLE Seiten (Edel, 17.09.2026) Schriften, Farben (hell/dunkel folgt dem Geraet), Grundtypo, Knoepfe, Kopfleiste, Social-Zeichen, Fuss, "Bald verfuegbar", Einblenden. Startseite: basis.css + home.css. Unterseiten: basis.css + seiten.css. Schriften liegen als Dateien daneben (kein Google-Fonts-Request). ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(sora-latin.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(sora-latin-ext.woff2?v=57) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(inter-400.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(inter-600.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(inter-700.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(inter-800.woff2?v=57) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0178, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Token: hell/dunkel aus EINER Liste (Build) ───────────────────────── Ohne Wahl gilt das Geraet; der Knopf im Kopf setzt data-theme am . */ :root { --grund: #FBFBF9; --grund-0: #FBFBF900; --grund-40: #FBFBF966; --grund-85: #FBFBF9D9; --flaeche: #F1F2EC; --flaeche-2: #E6E7E0; --karte: #FFFFFF; --tinte: #0D0E0C; --tinte-2: #5F625A; --tinte-3: #8B8E86; --linie: rgba(13,14,12,.09); --oliv: #A7B77A; --oliv-tief: #55672C; --oliv-glanz: rgba(167,183,122,.20); --oliv-0: rgba(167,183,122,0); --nacht: #0B0C0A; --nacht-flaeche: #151613; --nacht-tiefe: #0F100D; --nacht-linie: rgba(255,255,255,.08); --nacht-tinte: #F2F2EE; --nacht-tinte-2: #9C9E97; --karte-schatten: 0 1px 2px rgba(13,14,12,.04), 0 30px 70px rgba(13,14,12,.10); --knopf-schatten: 0 1px 2px rgba(13,14,12,.06), 0 4px 14px rgba(13,14,12,.06); --nav-glas: rgba(251,251,249,.74); --knopf: #0D0E0C; --knopf-text: #FBFBF9; --foto-filter: none; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grund: #0B0C0A; --grund-0: #0B0C0A00; --grund-40: #0B0C0A80; --grund-85: #0B0C0AD9; --flaeche: #161714; --flaeche-2: #20211D; --karte: #1C1D1A; --tinte: #F2F2EE; --tinte-2: #A4A69F; --tinte-3: #72756D; --linie: rgba(255,255,255,.09); --oliv: #A7B77A; --oliv-tief: #BCC896; --oliv-glanz: rgba(167,183,122,.16); --oliv-0: rgba(167,183,122,0); --nacht: #000000; --nacht-flaeche: #11120F; --nacht-tiefe: #0A0B09; --nacht-linie: rgba(255,255,255,.08); --nacht-tinte: #F2F2EE; --nacht-tinte-2: #9C9E97; --karte-schatten: 0 1px 2px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.45); --knopf-schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); --nav-glas: rgba(11,12,10,.72); --knopf: #F2F2EE; --knopf-text: #0B0C0A; --foto-filter: brightness(.82) saturate(.9) contrast(1.04); color-scheme: dark; } } :root[data-theme="dark"] { --grund: #0B0C0A; --grund-0: #0B0C0A00; --grund-40: #0B0C0A80; --grund-85: #0B0C0AD9; --flaeche: #161714; --flaeche-2: #20211D; --karte: #1C1D1A; --tinte: #F2F2EE; --tinte-2: #A4A69F; --tinte-3: #72756D; --linie: rgba(255,255,255,.09); --oliv: #A7B77A; --oliv-tief: #BCC896; --oliv-glanz: rgba(167,183,122,.16); --oliv-0: rgba(167,183,122,0); --nacht: #000000; --nacht-flaeche: #11120F; --nacht-tiefe: #0A0B09; --nacht-linie: rgba(255,255,255,.08); --nacht-tinte: #F2F2EE; --nacht-tinte-2: #9C9E97; --karte-schatten: 0 1px 2px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.45); --knopf-schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); --nav-glas: rgba(11,12,10,.72); --knopf: #F2F2EE; --knopf-text: #0B0C0A; --foto-filter: brightness(.82) saturate(.9) contrast(1.04); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 17px/1.6 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } img, video { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--oliv); outline-offset: 3px; } ::selection { background: var(--oliv); color: #10160A; } .bahn { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; } h1, h2, h3 { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-weight: 600; margin: 0; text-wrap: balance; overflow-wrap: break-word; } h1, h2 { letter-spacing: -.045em; } h1 { font-size: clamp(44px, 6vw, 84px); line-height: .96; } h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1; } h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; } .unter { font-size: 19px; line-height: 1.55; color: var(--tinte-2); max-width: 44ch; margin: 24px 0 0; text-wrap: pretty; } .unter b { color: var(--tinte); font-weight: 600; } .unter a { color: var(--tinte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 4px; } .unter a:hover { text-decoration-color: currentColor; } .abschnitt-name { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 15px; font-weight: 600; color: var(--tinte-2); } .abschnitt-name b { font-weight: 600; color: var(--oliv-tief); font-variant-numeric: tabular-nums; } /* ── Knoepfe ─────────────────────────────────────────────────────────── */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: opacity .2s, transform .2s, background-color .2s; } .knopf:active { transform: scale(.98); } .knopf-voll { background: var(--knopf); color: var(--knopf-text); } .knopf-voll:hover { opacity: .86; } .knopf-klein { height: 40px; padding: 0 18px; font-size: 14.5px; } .knopf-mini { height: 32px; padding: 0 14px; font-size: 13px; } .textlink { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; } /* ── Kopfleiste: frei ueber dem Foto, Glas ab dem ersten Scroll ────────── */ .kopf { position: fixed; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 50; padding-inline: 12px; pointer-events: none; color: var(--tinte); } .leiste { pointer-events: auto; max-width: 1176px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 20px; border-radius: 999px; border: 1px solid rgba(0,0,0,0); transition: background-color .35s, border-color .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s; } .kopf.gescrollt .leiste { background: var(--nav-glas); border-color: var(--linie); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); } .marke { display: flex; align-items: center; gap: 9px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--tinte); } .marke svg { width: 26px; height: 26px; flex: none; } .marke .bm-1, .marke .bm-3 { fill: currentColor; } .links { display: flex; gap: 2px; margin-inline: auto; } .links a { font-size: 15px; color: var(--tinte-2); padding: 8px 13px; border-radius: 999px; transition: color .2s; } .links a:hover { color: var(--tinte); } .rechts { display: flex; align-items: center; gap: 4px; } .symbolknopf { height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; border: 0; background: rgba(0,0,0,0); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color .2s; } .symbolknopf:hover { background: var(--flaeche); } .theme-btn svg { width: 18px; height: 18px; } .theme-btn .ic-sun { display: none; } body.dark .theme-btn .ic-moon { display: none; } body.dark .theme-btn .ic-sun { display: block; } .lang-wrap { position: relative; } .lang-btn .lang-caret { width: 10px; height: 10px; opacity: .55; transition: transform .2s; } .lang-wrap.open .lang-caret { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 184px; z-index: 70; background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; box-shadow: var(--karte-schatten); padding: 6px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .18s, transform .18s, visibility .18s; } .lang-wrap.open .lang-menu { opacity: 1; visibility: visible; transform: none; } .lang-menu button { display: flex; width: 100%; text-align: left; font-size: 15px; font-weight: 500; color: var(--tinte); background: none; border: 0; padding: 10px 12px; border-radius: 14px; cursor: pointer; } .lang-menu button:hover { background: var(--flaeche); } .lang-menu button.on { background: var(--flaeche); font-weight: 600; } @media (max-width: 1140px) { .links { display: none; } .rechts { margin-left: auto; } } @media (max-width: 720px) { .kopf { top: calc(10px + env(safe-area-inset-top, 0px)); padding-inline: 10px; } .leiste { height: 56px; padding: 0 6px 0 14px; gap: 4px; } .knopf-klein { height: 38px; padding: 0 14px; font-size: 14px; } } @media (max-width: 400px) { .leiste .marke span { display: none; } } /* ── Social: schlichte Links, nichts eingebettet ─────────────────────── */ .sozial { display: flex; gap: 8px; margin-top: 26px; } .sozial a { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--flaeche); color: var(--tinte); transition: background-color .2s; } .sozial a:hover { background: var(--flaeche-2); } .sozial svg, .soz-kachel svg { width: 20px; height: 20px; } .strich { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .voll { fill: currentColor; } /* ── Fuss mit Riesen-Wortmarke ───────────────────────────────────────── */ footer { padding-top: 120px; overflow: hidden; } .fuss { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .fuss-marke .marke { font-size: 18px; } .fuss-marke p { margin: 16px 0 0; font-size: 15px; color: var(--tinte-2); max-width: 28ch; } .fuss-spalte { display: flex; flex-direction: column; align-items: flex-start; } .f-kopf { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--tinte); } .fuss-spalte a { padding: 5px 0; font-size: 15px; color: var(--tinte-2); transition: color .2s; } .fuss-spalte a:hover { color: var(--tinte); } .fuss-unten { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 80px; padding-block: 22px; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--tinte-3); } .sprachen { display: flex; flex-wrap: wrap; gap: 4px; } .sprachen button { border: 0; background: none; padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 13.5px; color: var(--tinte-3); transition: color .2s, background-color .2s; } .sprachen button:hover { color: var(--tinte); } .sprachen button.an { color: var(--tinte); background: var(--flaeche); } .riesen-marke { margin: 12px 0 0; text-align: center; white-space: nowrap; font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(96px, 23vw, 330px); line-height: .74; letter-spacing: -.065em; color: var(--flaeche-2); user-select: none; transform: translateY(8%); } /* ── "Bald verfuegbar" (STORES_LIVE aus, site.js baut die Karte) ────── */ .bald-schleier { position: fixed; inset: 0; z-index: 400; background: rgba(11,12,10,.55); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .bald-schleier.offen { opacity: 1; pointer-events: auto; } .bald-karte { background: var(--karte); color: var(--tinte); border-radius: 32px; padding: 36px 32px 30px; max-width: 390px; text-align: center; box-shadow: var(--karte-schatten); transform: translateY(14px) scale(.97); transition: transform .25s cubic-bezier(.22,1,.36,1); } .bald-schleier.offen .bald-karte { transform: none; } .bald-mark { display: block; width: 46px; height: 46px; margin: 0 auto 16px; } .bald-mark path[fill="#1c1c1c"], .bald-mark circle { fill: var(--tinte); } .bald-karte h3 { font-size: 24px; letter-spacing: -.03em; } .bald-karte p { font-size: 15.5px; line-height: 1.55; color: var(--tinte-2); margin: 10px 0 24px; } .bald-ok { border: 0; cursor: pointer; background: var(--knopf); color: var(--knopf-text); font-weight: 600; font-size: 15px; border-radius: 999px; height: 50px; padding: 0 30px; } /* ── Einblenden beim Scrollen (site.js: .reveal -> .in) ─────────────── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.8,.3,1); } .reveal.in { opacity: 1; transform: none; } .scroll-progress { display: none; } /* ── Schmaler ──────────────────────────────────────────────────────── */ @media (max-width: 980px) { .fuss { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } } @media (max-width: 720px) { .bahn { padding-inline: 20px; } .fuss { gap: 32px 20px; } .fuss-spalte.kontakt { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .lang-menu, .bald-schleier, .bald-karte { transition: none; } }