/* ============================================================ RufKi — Aktion „Dashboard geschenkt" + Kategorien-Navigation Angelegt 19.08.2026. Eigene Datei = jederzeit rückrollbar (die zwei Zeilen aus dem nehmen und der alte Zustand ist zurück). Erbt alle Tokens aus app.css — kein eigener Farbwert erfunden. ============================================================ */ /* Zwei eigene Verlaeufe statt --grad (Kontrast gemessen 19.08.): --grad hat ein Magenta-Ende #d946ef; weisse Schrift darauf kommt nur auf 3,46:1 und faellt damit unter AA. Fuer Flaechen mit weisser Schrift endet der Verlauf deshalb bei #a21caf (6,32:1). Fuer Verlaufs-TEXT auf dunklem Grund gilt umgekehrt: heller anfangen, sonst startet er bei 3,03:1. */ :root { --grad-flaeche: linear-gradient(135deg, #4f46e5 0%, #8a29e2 55%, #a21caf 100%); --grad-text: linear-gradient(120deg, #a855f7 0%, #d946ef 100%); } /* ---------------------------------------------------------- 1 · BANNER */ .aktionsleiste { position: fixed; inset: 0 0 auto 0; z-index: 140; background: var(--grad-flaeche); color: #fff; font-size: clamp(0.78rem, 0.74rem + 0.18vw, 0.9rem); line-height: 1.3; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset; } .aktionsleiste__inner { max-width: var(--maxw); margin-inline: auto; padding: 0.5rem var(--gutter); display: flex; align-items: center; justify-content: center; gap: clamp(0.5rem, 1.5vw, 1.1rem); flex-wrap: wrap; text-align: center; } .aktionsleiste__puls { width: 7px; height: 7px; border-radius: var(--r-pill); background: #fff; flex: none; } @media (prefers-reduced-motion: no-preference) { .aktionsleiste__puls { animation: aktionPuls 2.4s var(--ease-entrance) infinite; } } @keyframes aktionPuls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } } .aktionsleiste__text strong { font-weight: 700; } .aktionsleiste__uhr { font-family: "Geist Mono", monospace; font-size: 0.82em; letter-spacing: 0.04em; padding: 0.16rem 0.55rem; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.28); white-space: nowrap; font-variant-numeric: tabular-nums; } .aktionsleiste__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; white-space: nowrap; } .aktionsleiste__link:hover { text-decoration-thickness: 2.5px; } @media (max-width: 760px) { .aktionsleiste__nurgross { display: none; } } /* Die fixierte Nav rutscht unter die Leiste, Ankersprünge ebenso. */ body.hat-aktionsleiste { --leiste-h: 40px; scroll-padding-top: calc(var(--leiste-h) + 92px); } body.hat-aktionsleiste .nav { padding-top: calc(var(--leiste-h) + clamp(0.5rem, 1.2vw, 0.85rem)); } @media (max-width: 760px) { body.hat-aktionsleiste { --leiste-h: 38px; } } /* ---------------------------------------------------------- 2 · KATEGORIEN-NAV */ .nav__gruppe { position: relative; } .nav__knopf { display: inline-flex; align-items: center; gap: 0.34rem; background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--muted); padding: 0.45rem 0.2rem; min-height: 40px; transition: color var(--d-hover) var(--ease-entrance); } .nav__knopf:hover, .nav__gruppe.ist-offen .nav__knopf, .nav__knopf.is-active { color: var(--text); } .nav__pfeil { width: 9px; height: 9px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-ui) var(--ease-entrance); } .nav__knopf[aria-expanded="true"] .nav__pfeil { transform: rotate(180deg); } .nav__klappe { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translate(-50%, -8px); min-width: 330px; padding: 0.5rem; border-radius: var(--r-frame); border: 1px solid var(--line-strong); background: rgba(10, 13, 26, 0.95); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(138, 41, 226, 0.08); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--d-ui) var(--ease-entrance), transform var(--d-ui) var(--ease-entrance), visibility 0s linear var(--d-ui); } .nav__gruppe.ist-offen .nav__klappe { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } /* unsichtbare Brücke, damit der Mauszeiger die Lücke überqueren darf */ .nav__klappe::before { content: ""; position: absolute; inset: -0.85rem 0 100% 0; } .nav__eintrag { display: grid; grid-template-columns: 26px 1fr; gap: 0.1rem 0.7rem; align-items: start; padding: 0.62rem 0.7rem; border-radius: var(--r-inner); color: var(--text); text-decoration: none; transition: background-color var(--d-hover) var(--ease-entrance); } .nav__eintrag:hover, .nav__eintrag:focus-visible { background: rgba(138, 41, 226, 0.16); } .nav__eintrag-icon { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--violet-soft); } .nav__eintrag-icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } .nav__eintrag-titel { font-size: 0.93rem; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .nav__eintrag-text { font-size: 0.79rem; color: var(--faint); line-height: 1.42; } .nav__marke { font-family: "Geist Mono", monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.14rem 0.42rem; border-radius: var(--r-pill); background: var(--grad-flaeche); color: #fff; white-space: nowrap; } .nav__klappe-fuss { margin-top: 0.35rem; padding: 0.6rem 0.7rem 0.35rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--faint); } .nav__klappe-fuss a { color: var(--violet-soft); font-weight: 600; } /* ---------------------------------------------------------- 3 · MOBILES MENÜ */ .menu__kategorie { margin-top: var(--space-s); margin-bottom: 0.2rem; padding-inline: 0.1rem; font-family: "Geist Mono", monospace; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .menu__kategorie:first-of-type { margin-top: 0; } .menu__link .nav__marke { margin-left: 0.5rem; vertical-align: middle; } /* ---------------------------------------------------------- 4 · AKTIONS-SEKTION */ .aktion { position: relative; padding-block: var(--space-2xl); overflow: hidden; } .aktion::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%; background: radial-gradient( ellipse at 50% 0%, rgba(138, 41, 226, 0.16), transparent 68% ); pointer-events: none; } .aktion__inner { position: relative; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .aktion__kopf { max-width: 64ch; } .aktion__stempel { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.34rem 0.85rem; border-radius: var(--r-pill); border: 1px solid var(--violet-deep); background: rgba(138, 41, 226, 0.12); font-family: "Geist Mono", monospace; font-size: var(--fs-spec); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-soft); } .aktion__titel { margin-top: var(--space-s); font-family: "Bricolage Grotesque", sans-serif; font-size: var(--fs-h2); font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; } .aktion__titel em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .aktion__lead { margin-top: var(--space-s); font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 56ch; } /* Preis-Gegenüberstellung */ .aktion__deal { margin-top: var(--space-l); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-frame); overflow: hidden; } .deal { background: var(--surface); padding: var(--space-m); display: flex; flex-direction: column; gap: 0.3rem; } .deal--gewinn { background: linear-gradient( 160deg, rgba(138, 41, 226, 0.18), rgba(20, 19, 41, 0.9) ); } .deal__label { font-family: "Geist Mono", monospace; font-size: var(--fs-spec); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .deal__wert { font-family: "Bricolage Grotesque", sans-serif; font-size: var(--fs-price); font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; } .deal__wert--durch { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; } .deal__wert--frei { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .deal__hinweis { font-size: 0.85rem; color: var(--muted); line-height: 1.45; } /* Die drei Versprechen */ .aktion__versprechen { margin-top: var(--space-m); display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; } .aktion__versprechen li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--raised); font-size: 0.88rem; font-weight: 600; color: var(--text); } .aktion__versprechen svg { width: 14px; height: 14px; flex: none; stroke: var(--violet-bright); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Funktions-Gruppen */ .aktion__was { margin-top: var(--space-xl); } .aktion__was-titel { font-family: "Bricolage Grotesque", sans-serif; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--text); } .aktion__was-lead { margin-top: 0.5rem; color: var(--muted); max-width: 60ch; font-size: var(--fs-body); } .kann { margin-top: var(--space-l); display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-s); } .kann__block { border: 1px solid var(--line); border-radius: var(--r-frame); /* deckend: die Leiterbahn-Grafik lief sonst durch die Aufzaehlungen */ background: linear-gradient(180deg, #141329, #0c0f1d); padding: var(--space-m); display: flex; flex-direction: column; } .kann__nr { font-family: "Geist Mono", monospace; font-size: var(--fs-spec); letter-spacing: 0.12em; color: var(--violet-soft); } .kann__titel { margin-top: 0.5rem; font-family: "Bricolage Grotesque", sans-serif; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; color: var(--text); } .kann__liste { margin-top: var(--space-s); list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.62rem; } .kann__liste li { display: grid; grid-template-columns: 15px 1fr; gap: 0.6rem; align-items: start; font-size: 0.93rem; line-height: 1.5; color: var(--muted); } .kann__liste li b { color: var(--text); font-weight: 600; } .kann__liste svg { width: 15px; height: 15px; margin-top: 0.34em; stroke: var(--violet-bright); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Kleingedrucktes + Abschluss */ .aktion__fuss { margin-top: var(--space-l); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); align-items: center; padding: var(--space-m); border-radius: var(--r-frame); border: 1px solid var(--violet-deep); /* deckend, gleicher Grund wie bei .aktionstreifen__karte */ background: linear-gradient(120deg, rgba(79, 70, 229, 0.2), rgba(217, 70, 239, 0.12)), linear-gradient(180deg, #141329, #0c0f1d); } .aktion__fuss-titel { font-family: "Bricolage Grotesque", sans-serif; font-size: var(--fs-h4); font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .aktion__fuss-text { margin-top: 0.4rem; font-size: 0.93rem; line-height: 1.55; color: var(--muted); } .aktion__fuss-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; } @media (max-width: 760px) { .aktion__fuss-cta { justify-content: flex-start; } } .aktion__klein { margin-top: var(--space-s); font-size: 0.84rem; line-height: 1.65; /* --faint waere hier zu schwach: der Absatz liegt auf dem gemusterten Schaltkreis-Grund der Nachbarsektion (Sehen-Loop 19.08.). */ color: var(--muted); max-width: 80ch; } .aktion__klein b { color: var(--muted); font-weight: 600; } /* ---------------------------------------------------------- 5 · MOBILES MENUE, KORREKTUR Aus dem Sehen-Loop 19.08.: mit neun Eintraegen plus Kategorie-Zeilen lief das zentrierte Menue oben und unten aus dem Bild. Es startet jetzt oben, scrollt bei Bedarf und die Zeilen sind kleiner. */ .menu { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; padding-top: calc(var(--leiste-h, 40px) + 4.6rem); padding-bottom: var(--space-l); } .menu__link { font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.12; padding: 0.1rem 0; gap: 0.65rem; align-items: center; flex-wrap: wrap; } .menu__list { gap: 0.16rem; } .menu__foot { margin-top: var(--space-m); } @media (max-height: 720px) { .menu__link { font-size: clamp(1.28rem, 5.4vw, 1.7rem); } } /* ---------------------------------------------------------- 6 · ANKER + STREIFEN */ /* Die fixierte Nav darf den Kopf der Aktion nicht verdecken (Sehen-Loop 19.08.). */ #aktion, #aktion-streifen, #offer { scroll-margin-top: calc(var(--leiste-h, 40px) + 96px); } /* Kompakter Aktions-Streifen (Preisseite) — dieselbe Botschaft, ein Block. */ .aktionstreifen { position: relative; padding-block: var(--space-l); } .aktionstreifen__karte { position: relative; max-width: var(--maxw); margin-inline: auto; padding: var(--space-m); border-radius: var(--r-frame); border: 1px solid var(--violet-deep); /* DECKEND, nicht nur getoent (Fremd-Blick 19.08.): ueber der ganzen Seite liegt ein Deko-SVG mit Leiterbahnen und dem RufKi-Chip bei 0,7 Deckkraft. Alle anderen Sektionen bringen einen eigenen Grund mit (0,7-0,95) - diese Karte war die einzige mit blossem 10-18%-Verlauf, und die Linien liefen ungebremst durch die Ueberschrift. Erst die volle Grundfarbe, darueber der Verlauf. */ background: linear-gradient(120deg, rgba(79, 70, 229, 0.22), rgba(217, 70, 239, 0.12)), linear-gradient(180deg, #141329, #0c0f1d); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-m); align-items: center; } @media (max-width: 820px) { .aktionstreifen__karte { grid-template-columns: 1fr; } } .aktionstreifen__stempel { display: inline-flex; align-items: center; gap: 0.45rem; font-family: "Geist Mono", monospace; font-size: var(--fs-spec); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-soft); } .aktionstreifen__titel { margin-top: 0.5rem; font-family: "Bricolage Grotesque", sans-serif; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); } .aktionstreifen__text { margin-top: 0.55rem; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); max-width: 62ch; } .aktionstreifen__text b { color: var(--text); font-weight: 600; }