/* Gemeinsame Optik ALLER Koeder-Werkzeuge — seit 04.08.2026 (Eric: "weiss geht gar nicht, mega flashig mit den Tool-Farben aus NSD"). Vorher hatte jede Seite ihren eigenen hellen Stilblock; jetzt erben alle DIESE Datei. Die Farbwerte sind bewusst KOPIEN aus styles.css (Grund #06080d, Karten #12151e, Akzente #3b82f6/#8b5cf6/#06b6d4/#22c55e/#f59e0b/#ef4444) — styles.css selbst wird NICHT eingebunden, weil es das ganze SPA-Layout mitbraechte. Jede Seite setzt ihr eigenes Akzent-Paar (--akA/--akB) in einem Mini-Stilblock im . */ :root { --bg-deepest: #06080d; --bg-card: #12151e; --bg-elevated: #181c28; --bg-hover: #1e2333; --bg-inset: #0d1117; --text: #a8b4cc; --text-bright: #e2e8f4; --text-muted: #6b7694; --text-dim: #4a5370; --linie: rgba(168,180,204,0.14); --linie-hell: rgba(168,180,204,0.28); --ok: #22c55e; --warn: #f59e0b; --gold: #eab308; --cyan: #06b6d4; --blau-hell: #3b82f6; --lila: #8b5cf6; /* Standard-Akzent (Seiten ueberschreiben das im eigenen ) */ --akA: #3b82f6; --akB: #8b5cf6; /* Alte Farbnamen der Seiten — zeigen jetzt auf die Tool-Werte, damit Inline-Styles (style="color:var(--grau)" u. ae.) ohne HTML-Aenderung weiterleben. */ --blau: var(--akA); --gruen: #22c55e; --rot: #ef4444; --orange: #f59e0b; --rand: var(--linie); --bg: var(--bg-deepest); --grau: #7d8598; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg-deepest); color: var(--text); line-height: 1.55; min-height: 100vh; } /* Das "Flashige": feste Leucht-Nebel im Hintergrund, je Seite in ihrer Akzentfarbe. color-mix koennen alle aktuellen Browser; ohne bleibt schlicht der dunkle Grund. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px 420px at 12% -6%, color-mix(in srgb, var(--akA) 16%, transparent), transparent 65%), radial-gradient(720px 480px at 92% 6%, color-mix(in srgb, var(--akB) 13%, transparent), transparent 65%), radial-gradient(760px 520px at 50% 112%, rgba(6,182,212,0.08), transparent 60%); } ::selection { background: color-mix(in srgb, var(--akA) 45%, transparent); color: #fff; } .wrap { max-width: 680px; margin: 0 auto; padding: 26px 16px 60px; } /* Kopfzeile ueber der Ueberschrift: links Ruecksprung, rechts der Homepage-Link (04.08.2026, Eric: "Homepage-Link oben drueber") */ .kopf-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .kopf-zeile .zurueck, .kopf-zeile .marken-zeile { margin: 0; } a.homepage { display: inline-block; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--akA) 45%, transparent); border-radius: 999px; font-size: .85rem; font-weight: 800; text-decoration: none; background: linear-gradient(135deg, var(--akA), var(--akB)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: box-shadow .15s, border-color .15s; } a.homepage:hover { border-color: var(--akA); box-shadow: 0 0 18px color-mix(in srgb, var(--akA) 25%, transparent); } .zurueck { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--text-muted); margin: 0 0 14px; transition: color .15s; } .zurueck:hover { color: var(--akA); } .marken-zeile { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; background: linear-gradient(135deg, var(--akA), var(--akB)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 10px; } h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 8px; font-weight: 800; letter-spacing: -.01em; background: linear-gradient(135deg, var(--text-bright) 20%, var(--akA) 65%, var(--akB)); -webkit-background-clip: text; background-clip: text; color: transparent; } .unter { color: var(--grau); margin: 0 0 24px; font-size: .98rem; } b, strong { color: var(--text-bright); } a { color: var(--akA); } /* --- Karten: dunkel, mit Akzent-Leuchtlinie oben --- */ .karte, .sinn, .ki { background: var(--bg-card); border: 1px solid var(--linie); border-radius: 16px; padding: 20px; margin: 0 0 18px; position: relative; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.4); } .karte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--akA), var(--akB), transparent); opacity: .85; } /* "Warum gratis"-Kasten: Gold-Akzent statt Gelbstich von frueher */ .sinn { border-color: rgba(245,158,11,0.28); } .sinn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--warn), var(--gold), transparent); } .sinn b { color: var(--warn); } .sinn b:first-child { display: inline-block; margin-bottom: 2px; } /* Hinweis-/Warn-Kaesten (gelblich hell -> dunkel mit Bernstein-Rand) */ .warnung, .rb, .melden { background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.3); border-radius: 12px; padding: 14px; font-size: .92rem; margin-top: 14px; } .warnung b, .rb b, .melden b { color: var(--warn); } /* KI-Kasten (titel-check) */ .ki { background: rgba(59,130,246,0.07); border-color: rgba(59,130,246,0.3); padding: 14px 16px; } .ki b { color: var(--blau-hell); } .kopf { color: var(--text-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 14px 0 8px; } .karte > .kopf:first-child { margin-top: 0; } label { display: block; font-weight: 600; color: var(--text-bright); margin: 12px 0 6px; font-size: .92rem; } label:first-child { margin-top: 0; } input, select, textarea { width: 100%; padding: 12px; font-size: 1.05rem; font-family: inherit; border: 1px solid var(--linie-hell); border-radius: 10px; background: var(--bg-inset); color: var(--text-bright); transition: border-color .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color: var(--text-dim); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akA); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akA) 22%, transparent); } select option { background: var(--bg-inset); color: var(--text-bright); } textarea { resize: vertical; min-height: 64px; } .reihe { display: flex; gap: 10px; } .reihe > div { flex: 1; } .mit-einheit { position: relative; } .mit-einheit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .9rem; } /* --- Knoepfe: Akzent-Verlauf mit Glow --- */ button, .aus { margin-top: 16px; width: 100%; padding: 13px; font-size: 1rem; font-weight: 800; font-family: inherit; letter-spacing: .01em; color: #fff; /* 04.08.2026: Schattenkante, damit Weiss auch auf den hellen Gold-/Bernstein-Verlaeufen lesbar bleibt */ text-shadow: 0 1px 2px rgba(0,0,0,0.35); background: linear-gradient(135deg, var(--akA), var(--akB)); border: 0; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 20px color-mix(in srgb, var(--akA) 35%, transparent); transition: transform .15s, box-shadow .15s, filter .15s; } button:hover, .aus:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 28px color-mix(in srgb, var(--akA) 50%, transparent); } button:disabled, .aus:disabled { background: var(--bg-hover); color: var(--text-dim); cursor: not-allowed; box-shadow: none; transform: none; filter: none; } /* Gruener Zweit-Knopf (kopieren / download) */ .kopf-btn, a.dlbtn { background: linear-gradient(135deg, #22c55e, #06b6d4); box-shadow: 0 4px 20px rgba(34,197,94,0.3); } .kopf-btn:hover, a.dlbtn:hover { box-shadow: 0 6px 28px rgba(34,197,94,0.45); filter: brightness(1.08); } a.dlbtn { display: inline-block; width: auto; margin: 6px 6px 0 0; padding: 11px 18px; font-size: .95rem; font-weight: 800; color: #fff; border-radius: 10px; text-decoration: none; transition: transform .15s, box-shadow .15s, filter .15s; } a.dlbtn:hover { transform: translateY(-1px); } /* Kleiner Sekundaer-Knopf (anreicherung: "kopieren") */ .kopieren button { background: var(--bg-elevated); color: var(--akA); border: 1px solid var(--linie-hell); width: auto; padding: 8px 14px; font-size: .9rem; font-weight: 700; margin-top: 0; box-shadow: none; } .kopieren button:hover { background: var(--bg-hover); transform: none; filter: none; box-shadow: none; border-color: var(--akA); } .ergebnis { display: none; margin-top: 16px; } .ergebnis.an { display: block; } .fehler { color: var(--rot); font-weight: 600; margin-top: 10px; } .hinweis { font-size: .88rem; color: var(--grau); margin-top: 10px; } /* --- Ergebnis-Banner (ok / bad / warten / hoch / mittel / niedrig) --- */ .banner { border-radius: 12px; padding: 15px; font-weight: 700; font-size: 1.05rem; text-align: center; margin-bottom: 12px; } .banner.ok, .banner.niedrig { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.4); color: var(--ok); box-shadow: 0 0 24px rgba(34,197,94,0.12); } .banner.bad, .banner.hoch { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.4); color: var(--rot); box-shadow: 0 0 24px rgba(239,68,68,0.12); } .banner.warten, .banner.mittel { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.4); color: var(--warn); box-shadow: 0 0 24px rgba(245,158,11,0.1); } .banner.hoch, .banner.mittel, .banner.niedrig { text-align: left; font-weight: 600; font-size: 1rem; } /* Treffer-Anzeige (ean-asin) */ .treffer { text-align: center; margin-top: 10px; } .treffer .zahl { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 1.7rem; font-weight: 700; word-break: break-all; background: linear-gradient(135deg, var(--akA), var(--akB)); -webkit-background-clip: text; background-clip: text; color: transparent; } .treffer .art { display: block; color: var(--text-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; } /* Kopierbare Grundpreis-Zeile */ .kopierbar { background: var(--bg-inset); border: 1px solid color-mix(in srgb, var(--akA) 45%, transparent); border-radius: 10px; padding: 15px; font-size: 1.15rem; font-weight: 700; color: var(--text-bright); text-align: center; margin: 8px 0; word-break: break-word; box-shadow: 0 0 20px color-mix(in srgb, var(--akA) 12%, transparent); } .kopierbar.zweit { border-color: rgba(34,197,94,0.45); box-shadow: 0 0 20px rgba(34,197,94,0.1); font-size: 1.02rem; } /* Grosse Gewinn-Anzeige (marge-rechner) */ .gross { text-align: center; padding: 18px; border-radius: 12px; margin: 8px 0; } .gross .zahl { font-size: 2.2rem; font-weight: 800; } .gross .pz { font-size: 1.1rem; font-weight: 700; } .pos { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.4); box-shadow: 0 0 28px rgba(34,197,94,0.12); } .pos .zahl, .pos .pz { color: var(--ok); } .neg { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.4); box-shadow: 0 0 28px rgba(239,68,68,0.12); } .neg .zahl, .neg .pz { color: var(--rot); } table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .92rem; } td { padding: 8px 4px; border-bottom: 1px solid var(--linie); } td.z { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } tr.summe td { font-weight: 700; color: var(--text-bright); border-top: 2px solid var(--linie-hell); border-bottom: 0; } .abzug td.z { color: var(--rot); } /* Marktplatz-Karten (gebuehren-vergleich) */ .karten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 8px; } @media (max-width: 560px) { .karten { grid-template-columns: 1fr; } } .plat { border: 1px solid var(--linie); border-radius: 12px; padding: 14px; text-align: center; background: var(--bg-elevated); transition: border-color .15s, box-shadow .15s, transform .15s; } .plat:hover { border-color: var(--akA); box-shadow: 0 0 22px color-mix(in srgb, var(--akA) 20%, transparent); transform: translateY(-2px); } .plat h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--text-bright); } .plat .auszahlung { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, #22c55e, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; } .plat .detail { font-size: .82rem; color: var(--text-muted); margin-top: 6px; } .satz-reihe { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .satz-reihe label { margin: 0; flex: 1; text-align: left; font-weight: 500; font-size: .85rem; color: var(--text); } .satz-reihe .mit-einheit { width: 92px; } .satz-reihe input { padding: 7px 9px; font-size: .9rem; } .warenwert input { font-size: 1.15rem; font-weight: 700; } /* Pruefziffern-Rechnung (ean-pruefer) */ .rechnung { font-size: .9rem; color: var(--grau); } .rechnung .ziffern { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 1rem; word-break: break-all; color: var(--text); } .rechnung .ziffern b { color: var(--akA); } /* Titel-Check: Zaehler, Ampel-Balken, Hinweise */ .zaehler { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; } .zaehler .zahl { font-size: 1.7rem; font-weight: 800; color: var(--text-bright); } .zaehler .von { color: var(--text-muted); font-size: .9rem; } .balken { height: 9px; border-radius: 6px; background: var(--bg-hover); overflow: hidden; margin-top: 8px; } .balken > div { height: 100%; width: 0; transition: width .12s, background .12s; border-radius: 6px; } .ampel-gut { color: var(--ok); } .balken .gut { background: linear-gradient(90deg, #22c55e, #06b6d4); box-shadow: 0 0 10px rgba(34,197,94,0.5); } .ampel-fast { color: var(--warn); } .balken .fast { background: linear-gradient(90deg, #f59e0b, #eab308); box-shadow: 0 0 10px rgba(245,158,11,0.5); } .ampel-drueber { color: var(--rot); } .balken .drueber { background: linear-gradient(90deg, #ef4444, #f59e0b); box-shadow: 0 0 10px rgba(239,68,68,0.5); } .status { font-weight: 700; margin-top: 8px; } ul.hinweise { margin: 0; padding-left: 20px; } ul.hinweise li { margin: 7px 0; } ul.hinweise li.warn { color: var(--warn); } ul.hinweise li.gut { color: var(--ok); } ul.hinweise li b { color: var(--text-bright); } ul.tipps { margin: 0; padding-left: 20px; font-size: .92rem; color: var(--grau); } ul.tipps li { margin: 6px 0; } /* GPSR-Check: Fragen + Ja/Nein-Wahl */ .frage { border-bottom: 1px solid var(--linie); padding: 14px 0; } .frage:first-child { padding-top: 0; } .frage:last-child { border-bottom: 0; } .frage p { margin: 0 0 10px; font-weight: 600; color: var(--text-bright); } .frage .hilf { font-weight: 400; color: var(--text-muted); font-size: .88rem; display: block; margin-top: 3px; } .wahl { display: flex; gap: 10px; } .wahl button { flex: 1; padding: 10px; font-size: 1rem; font-weight: 700; margin: 0; border: 1px solid var(--linie-hell); border-radius: 10px; background: var(--bg-elevated); color: var(--text); box-shadow: none; } .wahl button:hover { transform: none; filter: none; border-color: var(--akA); box-shadow: none; } .wahl button.ja.aktiv { background: linear-gradient(135deg, var(--akA), var(--akB)); color: #fff; border-color: transparent; box-shadow: 0 0 18px color-mix(in srgb, var(--akA) 40%, transparent); } .wahl button.nein.aktiv { background: var(--bg-hover); color: var(--text-bright); border-color: var(--linie-hell); } ul.pflichten { margin: 0; padding-left: 20px; } ul.pflichten li { margin: 8px 0; } ul.pflichten li b { color: var(--text-bright); } /* Pflichtangaben-Finder: Haken-Liste */ .art-titel { font-size: 1.15rem; font-weight: 700; color: var(--text-bright); margin: 0 0 4px; } .art-info { color: var(--grau); font-size: .92rem; margin: 0 0 14px; } ul.liste { list-style: none; margin: 0; padding: 0; } ul.liste li { border-top: 1px solid var(--linie); padding: 12px 0 12px 30px; position: relative; } ul.liste li:first-child { border-top: 0; } ul.liste li::before { content: "✓"; position: absolute; left: 2px; top: 12px; color: var(--ok); font-weight: 800; } ul.liste li.immer::before { content: "★"; color: var(--akA); } ul.liste li b { color: var(--text-bright); } ul.liste li .det { display: block; color: var(--text-muted); font-size: .9rem; margin-top: 2px; } /* Freisteller: Ablagefeld, Bildpaar, Status */ .ablage { border: 2px dashed var(--linie-hell); border-radius: 14px; padding: 36px 18px; text-align: center; cursor: pointer; background: var(--bg-inset); transition: border-color .15s, background .15s, box-shadow .15s; } .ablage:hover { border-color: var(--akA); box-shadow: 0 0 24px color-mix(in srgb, var(--akA) 15%, transparent); } .ablage.drueber { border-color: var(--akA); background: color-mix(in srgb, var(--akA) 10%, var(--bg-inset)); box-shadow: 0 0 30px color-mix(in srgb, var(--akA) 25%, transparent); } .ablage .gross { font-size: 1.05rem; font-weight: 600; color: var(--text-bright); margin: 0 0 4px; padding: 0; background: none; border: none; box-shadow: none; } .ablage .klein { color: var(--text-muted); font-size: .9rem; margin: 0; } .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .paar figure { margin: 0; } .paar figcaption { color: var(--text-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; } .bild { width: 100%; aspect-ratio: 1/1; object-fit: contain; border: 1px solid var(--linie); border-radius: 10px; background: var(--bg-inset); } .bild.karo { background-image: linear-gradient(45deg, var(--bg-elevated) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-elevated) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-elevated) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-elevated) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; } .status { margin-top: 14px; font-size: .95rem; } .status.laeuft { color: var(--grau); font-weight: 400; } .status.fehler { color: var(--rot); font-weight: 600; } .spinner { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--linie-hell); border-top-color: var(--akA); border-radius: 50%; animation: dreh .7s linear infinite; } @keyframes dreh { to { transform: rotate(360deg); } } /* Achtung: .status hier NICHT global verstecken — titel-check zeigt seine Status-Zeile immer. Das Ein-/Ausblenden per .an regelt freisteller.html in seinem eigenen Mini-Stilblock. */ /* Anreicherung: Vorschlags-Anzeige */ .titel { font-size: 1.15rem; font-weight: 700; color: var(--text-bright); } .beschr { white-space: pre-wrap; font-size: .96rem; } .beschr ul { margin: 6px 0; padding-left: 20px; } .marke { font-size: .95rem; } .pflicht { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.35); font-size: .92rem; color: var(--text); } .pflicht b { color: var(--ok); } /* Allgemeine Info-Listen */ .info { font-size: .92rem; } .info li { margin: 6px 0; } .annahmen { font-size: .88rem; color: var(--grau); } .annahmen li { margin: 4px 0; } .regel { font-size: .9rem; color: var(--grau); } .regel li { margin: 4px 0; } /* --- Uebersichtsseite: leuchtende Werkzeug-Kacheln, Akzent rotiert durch die NSD-Verlaeufe --- */ .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; } @media (max-width: 620px) { .tools { grid-template-columns: 1fr; } } a.tool { display: block; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--linie); border-radius: 16px; padding: 18px; margin: 0; position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; } /* ohne .tools-Gitter (falls eine Seite die Kacheln einzeln untereinander zeigt) */ .wrap > a.tool { margin: 0 0 14px; } a.tool::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--kA), var(--kB), transparent); opacity: .9; } a.tool:hover { border-color: var(--kA); transform: translateY(-2px); box-shadow: 0 8px 32px color-mix(in srgb, var(--kA) 22%, transparent); } a.tool h2 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 700; background: linear-gradient(135deg, var(--kA), var(--kB)); -webkit-background-clip: text; background-clip: text; color: transparent; } a.tool p { margin: 0; color: var(--text-muted); font-size: .9rem; } /* Akzent-Rotation durch die echten NSD-Verlaeufe (styles.css: main/warm/success/gold) */ a.tool { --kA: #3b82f6; --kB: #8b5cf6; } a.tool:nth-of-type(4n+2) { --kA: #22c55e; --kB: #06b6d4; } a.tool:nth-of-type(4n+3) { --kA: #f59e0b; --kB: #eab308; } a.tool:nth-of-type(4n+4) { --kA: #06b6d4; --kB: #3b82f6; } a.tool:nth-of-type(4n+5) { --kA: #f59e0b; --kB: #ef4444; } .cta { text-align: center; margin: 24px 0; font-size: 1rem; } .cta b, .cta a, .cta b a { background: linear-gradient(135deg, var(--akA), var(--akB)); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 800; } /* --- Werbe-Leiste (04.08.2026, Eric): Homepage + E-Mail sichtbar auf jedem Werkzeug — die Seiten sind Werbung. Links bewusst RELATIV (/) bzw. mailto:, weil die Koeder-Tests absolute https-Links verbieten (Zusage "keine externen Inhalte"). --- */ .werbung { background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--akA) 35%, transparent); border-radius: 16px; padding: 22px 20px; margin: 24px 0 0; text-align: center; position: relative; overflow: hidden; box-shadow: 0 0 32px color-mix(in srgb, var(--akA) 12%, transparent); } .werbung::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--akA), var(--akB), transparent); } .werbung-name { font-size: 1.3rem; font-weight: 800; letter-spacing: .16em; background: linear-gradient(135deg, var(--akA), var(--akB)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 6px; } .werbung p { margin: 0 0 14px; color: var(--text-muted); font-size: .92rem; } .werbung-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .werbung-links a { display: inline-block; padding: 10px 18px; border-radius: 10px; font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35); background: linear-gradient(135deg, var(--akA), var(--akB)); box-shadow: 0 4px 18px color-mix(in srgb, var(--akA) 30%, transparent); transition: transform .15s, box-shadow .15s, filter .15s; } .werbung-links a:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 26px color-mix(in srgb, var(--akA) 45%, transparent); } .werbung-links a.zweitweg { background: var(--bg-elevated); color: var(--text-bright); text-shadow: none; border: 1px solid var(--linie-hell); box-shadow: none; } .werbung-links a.zweitweg:hover { border-color: var(--akA); color: var(--akA); filter: none; box-shadow: none; } footer { text-align: center; color: var(--text-dim); font-size: .82rem; margin-top: 34px; border-top: 1px solid var(--linie); padding-top: 16px; } footer a { color: var(--text-muted); } footer a:hover { color: var(--text); }