/* Schriften werden vollständig eingebettet in extra/custom-head.blade.php geladen — kein externer Aufruf an fonts.googleapis.com mehr. */ /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Grid - Base Styles - Typography - Links - Code - Spacing - Utilities - Misc - Credit footer */ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; width: 100%; max-width: 600px; text-align: center; margin: 0 auto; box-sizing: border-box; } .column { position: center; width: 100%; float: center; box-sizing: border-box; } /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 85%; padding: 0; } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { width: 80%; } .column, .columns { margin-left: 0; } .column:first-child, .columns:first-child { margin-left: 0; } } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { font-size: 100%; } /* Dark/light mode detection (comment this section out and use the one below for a fixed background color) */ @media (prefers-color-scheme: dark) { body { font-size: 18px; line-height: 24px; font-weight: 400; background: #292929; background: radial-gradient(circle, #292929 28%, #1b1b1b 100%); font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #FFFFFF; } } @media (prefers-color-scheme: light) { body { font-size: 18px; line-height: 24px; font-weight: 400; background: #F1F1F1; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; } } /* Use this for a fixed background color instead of dark and light mode body { font-size: 18px; line-height: 24px; font-weight: 400; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } */ /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1 { margin-top: 0; margin-bottom: 16px; font-weight: 800; } h1 { font-size:24px; line-height: 64px; letter-spacing: 0;} /* Larger than phablet */ @media (min-width: 550px) { h1 { font-size: 48px; line-height: 96px;} } p { margin-top: 0; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { color: #0085FF; text-decoration: none; } a:hover { color: #0085FF; } .spacing { padding: 0 10px; } @media (prefers-color-scheme: dark) { .social-icon{color:#fff;} } @media (prefers-color-scheme: light) { .social-icon{color:#222;} } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { margin-bottom: 1rem; } input, textarea, select, fieldset { margin-bottom: 1.5rem; } pre, blockquote, dl, figure, p, ol { margin-bottom: 2.5rem; } /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; box-sizing: border-box; } .u-max-full-width { max-width: 100%; box-sizing: border-box; } .u-pull-right { float: right; } .u-pull-left { float: left; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } @media (prefers-color-scheme: dark) { /* ===== Scrollbar CSS ===== */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: #171a1d #31363b; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 8px; } *::-webkit-scrollbar-track { background: #31363b; } *::-webkit-scrollbar-thumb { background-color: #171a1d; border-radius: 30px; border: 3px none #ffffff; } } @media (prefers-color-scheme: light) { /* ===== Scrollbar CSS ===== */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: #323232 #dbdbdb; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 8px; } *::-webkit-scrollbar-track { background: #dbdbdb; } *::-webkit-scrollbar-thumb { background-color: #323232; border-radius: 30px; border: 3px none #ffffff; } } /* Credit footer –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Styling for credit footer text */ .credit-txt { font-weight: 700; font-size: 15px; text-decoration: none; } /* Some fonts shift the credit footer icon around  /* You can uncomment this to hide the icon and only display the text .credit-icon { display: none; } .credit-footer { position: relative; right: 15px; } */ /* Switches text color for credit footer for dark/light mode */ @media (prefers-color-scheme: dark) { .credit-txt-clr{ color: #FFF !important; } } @media (prefers-color-scheme: light) { .credit-txt-clr{ color: #100a26 !important; } } /* ========================================================================== DreadDriver — Liquid Glass v4 Transparenter, weiße Konturlinie, korrigierte Größen. ========================================================================== */ :root { --dd-cyan: #4DC4FF; --dd-blue: #4da6ff; --dd-deep: #1FA9E8; --dd-navy: #0C1B33; --dd-ink: #05070C; } /* ---- Typografie --------------------------------------------------------- */ body, p, a, span, div { font-family: 'Inter', -apple-system, system-ui, sans-serif; } h1, h2, h3, .name { font-family: 'Anton', Impact, sans-serif !important; font-weight: 400 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: #fff !important; text-shadow: 0 2px 14px rgba(0,0,0,.45) !important; } p, .description { color: rgba(255,255,255,.82) !important; } /* ---- Profilbild --------------------------------------------------------- */ .rounded-avatar, img.rounded-avatar { border: none !important; outline: none !important; padding: 0 !important; background: none !important; box-shadow: 0 12px 40px rgba(0,0,0,.55) !important; } /* ========================================================================== Glasrezept — deutlich transparenter als zuvor ========================================================================== */ .button, button, a.button, .social-hover { position: relative !important; isolation: isolate !important; overflow: hidden !important; /* Nur noch ein Hauch Grundfläche, damit der Hintergrund durchkommt */ background-color: rgba(255,255,255,.055) !important; background-image: linear-gradient(145deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.02) 58%, rgba(255,255,255,.10) 100%) !important; -webkit-backdrop-filter: blur(10px) saturate(135%) brightness(1.05) !important; backdrop-filter: blur(10px) saturate(135%) brightness(1.05) !important; /* Feine weiße Kontur außen herum — hebt die Taste vom Hintergrund ab */ border: 1px solid rgba(255,255,255,.55) !important; border-top-color: rgba(255,255,255,.78) !important; border-bottom-color: rgba(255,255,255,.32) !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.65) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 18px 28px -20px rgba(255,255,255,.4), 0 0 0 .5px rgba(255,255,255,.22), 0 10px 30px -8px rgba(0,0,0,.45) !important; transform: translateZ(0) !important; transition: transform .4s cubic-bezier(.22,1.25,.32,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .3s ease, background-color .3s ease !important; will-change: transform !important; } /* ---- Kachelmaße: flacher, Inhalt größer -------------------------------- */ .button, button, a.button { border-radius: 999px !important; width: 100% !important; max-width: 420px !important; min-height: 0 !important; height: auto !important; padding: 15px 26px !important; margin-bottom: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: .005em !important; } /* Markenlogos in den Kacheln größer */ .button i, .button svg, .button img, button i, button svg, button img { font-size: 22px !important; width: auto !important; height: 22px !important; max-height: 22px !important; transform: none !important; transition: none !important; animation: none !important; opacity: 1 !important; flex: 0 0 auto !important; } /* Glanzstreifen */ .button::before, button::before, a.button::before, .social-hover::before { content: "" !important; position: absolute !important; top: -20% !important; left: -70% !important; width: 55% !important; height: 140% !important; z-index: -1 !important; pointer-events: none !important; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 58%, transparent 100%) !important; transform: skewX(-18deg) !important; transition: left .7s cubic-bezier(.22,1,.36,1) !important; } /* Lichtkuppel */ .button::after, button::after, a.button::after, .social-hover::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; border-radius: inherit !important; background: radial-gradient(130% 78% at 50% -25%, rgba(255,255,255,.30) 0%, transparent 58%), radial-gradient(100% 55% at 50% 125%, rgba(140,200,255,.12) 0%, transparent 60%) !important; opacity: .9 !important; transition: opacity .4s ease !important; } /* ---- Berührung ---------------------------------------------------------- */ .button:hover, button:hover, a.button:hover, .button:focus-visible, .social-hover:hover { transform: translateY(-2px) scale(1.018) !important; background-color: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.85) !important; border-top-color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.18), inset 0 22px 32px -20px rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.4), 0 0 34px rgba(120,190,255,.35), 0 18px 42px -10px rgba(0,0,0,.5) !important; outline: none !important; } .button:hover::before, button:hover::before, a.button:hover::before, .social-hover:hover::before { left: 120% !important; } .button:hover::after, button:hover::after, a.button:hover::after, .social-hover:hover::after { opacity: 1 !important; } /* ---- Antippen ----------------------------------------------------------- */ .button:active, button:active, a.button:active, .social-hover:active { transform: translateY(0) scale(.98) !important; transition: transform .13s cubic-bezier(.3,.7,.4,1), box-shadow .13s ease !important; box-shadow: inset 0 3px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.35) !important; } /* ========================================================================== Symbolscheiben ========================================================================== */ .social-icon-div, .social-icon-div.fadein { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; padding-bottom: 34px !important; animation: none !important; opacity: 1 !important; } .social-hover { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 54px !important; height: 54px !important; border-radius: 50% !important; text-decoration: none !important; flex: 0 0 auto !important; animation: none !important; } .social-hover:hover { transform: translateY(-2px) scale(1.05) !important; } .social-hover .social-icon, i.social-icon, .social-icon, .social-icon::before { opacity: 1 !important; color: #ffffff !important; filter: none !important; mix-blend-mode: normal !important; font-size: 23px !important; padding: 0 !important; line-height: 1 !important; text-shadow: 0 1px 4px rgba(0,0,0,.6) !important; transition: color .25s ease !important; } .social-hover:hover .social-icon, .social-hover:hover .social-icon::before { color: var(--dd-cyan) !important; opacity: 1 !important; } /* ========================================================================== Fußbereich — die vier Seitenlinks als dezente Glasleiste ========================================================================== */ .footer { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 6px !important; margin: 40px auto 24px !important; padding: 8px 14px !important; width: max-content !important; max-width: 92% !important; border-radius: 999px !important; background: rgba(255,255,255,.07) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; backdrop-filter: blur(12px) saturate(140%) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 18px -6px rgba(0,0,0,.4) !important; animation: none !important; opacity: 1 !important; } .footer a, .footer-hover { color: rgba(255,255,255,.88) !important; font-family: 'Inter', sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-decoration: none !important; text-transform: uppercase !important; padding: 6px 12px !important; border-radius: 999px !important; text-shadow: 0 1px 3px rgba(0,0,0,.55) !important; transition: background .22s ease, color .22s ease !important; } .footer a:hover, .footer-hover:hover { color: #fff !important; background: rgba(255,255,255,.16) !important; transform: none !important; } /* Hersteller-Hinweis. Sauberer ist der Schalter DISPLAY_CREDIT im Panel unter Config — diese Regel ist nur die Rückfallebene. */ .credit-hover, a[href*="linkstack.org"] { display: none !important; } /* ---- Auswahl und Tastatur ----------------------------------------------- */ ::selection { background: rgba(77,166,255,.35); color: #fff; } a:focus-visible, .button:focus-visible, .social-hover:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; } /* ---- Bewegung reduzieren ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .button, button, .social-hover, .button::before, .button::after, .social-hover::before, .social-hover::after { transition: none !important; transform: none !important; } } /* ========================================================================== Firefox und andere ohne Brechung: kräftigere Kanten, damit die Kacheln nicht flach wirken. Greift nur dort, wo das Skript nichts ausrichten kann. ========================================================================== */ [data-liquid-glass="off"] { background-image: linear-gradient(145deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.03) 56%, rgba(255,255,255,.16) 100%) !important; -webkit-backdrop-filter: blur(16px) saturate(155%) brightness(1.08) !important; backdrop-filter: blur(16px) saturate(155%) brightness(1.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -2px 3px rgba(0,0,0,.22), inset 0 20px 30px -20px rgba(255,255,255,.5), inset 6px 0 12px -10px rgba(255,255,255,.4), inset -6px 0 12px -10px rgba(255,255,255,.4), 0 0 0 .5px rgba(255,255,255,.3), 0 10px 30px -8px rgba(0,0,0,.45) !important; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .button, button, a.button, .social-hover, .footer { background-color: rgba(30,45,70,.85) !important; } } /* ========================================================================== v5 — Höhe erzwingen, Symbole bemaßen, mehr Durchsicht ========================================================================== */ /* Der Rahmen um jede Kachel darf die Breite nicht vorgeben */ .button-entrance { display: block !important; width: 100% !important; max-width: 420px !important; margin: 0 auto 14px !important; } /* Höhe konsequent aus dem Inhalt ableiten */ .button, button, a.button, a.button-default, a.button-custom, a.button-custom_website { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: 100% !important; max-width: 420px !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 14px 24px !important; margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: normal !important; box-sizing: border-box !important; } /* Symbole der Vorlage heißen "icon hvr-icon" */ .button .icon, .button img.icon, .button i.icon, .icon.hvr-icon { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; font-size: 21px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; vertical-align: middle !important; opacity: 1 !important; animation: none !important; transform: none !important; } /* ---- Noch mehr Durchsicht ---------------------------------------------- */ .button, button, a.button, .social-hover { background-color: rgba(255,255,255,.028) !important; background-image: linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.015) 60%, rgba(255,255,255,.08) 100%) !important; -webkit-backdrop-filter: blur(5px) saturate(118%) brightness(1.03) !important; backdrop-filter: blur(5px) saturate(118%) brightness(1.03) !important; } .button:hover, button:hover, a.button:hover, .social-hover:hover { background-color: rgba(255,255,255,.065) !important; } /* Firefox braucht mehr Substanz, weil dort keine Brechung stattfindet */ [data-liquid-glass="off"] { background-color: rgba(255,255,255,.07) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(1.07) !important; backdrop-filter: blur(14px) saturate(150%) brightness(1.07) !important; } /* ========================================================================== v6 — Ausrichtung korrigieren ========================================================================== */ /* Die Symbolreihe trägt Bootstraps "row"-Klasse mit negativen Außenabständen. Die verschieben die Reihe aus der Mitte. */ .social-icon-div, .row.social-icon-div { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Alles auf eine gemeinsame Mittelachse */ .container, .container .column, .container .columns { margin-left: auto !important; margin-right: auto !important; float: none !important; } /* Leere Fußleiste erzeugt sonst einen kleinen Pillenrest */ .footer:empty { display: none !important; } .footer { min-height: 0 !important; } /* Sicherheitshalber auch die Hüllen der Kacheln mittig */ .button-entrance, .button-entrance > a { margin-left: auto !important; margin-right: auto !important; float: none !important; } /* ========================================================================== Elektrik überall + schwarze Textkontur in den Kacheln ========================================================================== */ /* Schrift für die ganze Seite. Inter bleibt Rückfallebene, falls ein Zeichen in Elektrik fehlt (die Schrift enthält nur 75 Glyphen). */ body, p, a, span, div, li, td, .button, button, a.button, .footer, .footer a, .footer-hover, .description { font-family: 'Elektrik', 'Inter', -apple-system, system-ui, sans-serif !important; } h1, h2, h3, .name { font-family: 'Elektrik', Impact, sans-serif !important; font-weight: 400 !important; letter-spacing: .03em !important; } /* ---- Schwarze Kontur um den Kacheltext ---------------------------------- Echte Umrandung über text-stroke, dazu ein enger Vierfach-Schatten als Verstärkung — die Kombination bleibt auch bei hellem Hintergrund lesbar und funktioniert in allen Browsern. */ .button, button, a.button { -webkit-text-stroke: .45px rgba(0,0,0,.85) !important; paint-order: stroke fill !important; text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45) !important; } /* Die Markensymbole in den Kacheln bekommen stattdessen einen weichen Schatten — eine Kontur würde die Logos verfälschen. */ .button .icon, .button img, .button svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) !important; } /* ========================================================================== v11 — Einheitliche schwarze Kontur: Text UND Icon-Glyphen Die Mini-Symbole unter dem Profilbild und alle Markenlogos in den Kacheln sind Font-Icons (echte Schriftzeichen aus Font Awesome, keine Bilddateien) — deshalb wirkt -webkit-text-stroke auf ihnen genauso sauber wie auf normalem Text. Dieselbe Regel gilt jetzt überall: Name, Bio, Fußzeile, Kacheltext und alle Icon-Glyphen. ========================================================================== */ h1, h2, h3, .name, p, .description, .footer, .footer a, .footer-hover, .button, button, a.button, .social-icon, i.social-icon, .button i, .icon.hvr-icon, i[class*="fa-"] { -webkit-text-stroke: .45px rgba(0,0,0,.85) !important; paint-order: stroke fill !important; text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45) !important; } /* Nur echte Bilddateien (hochgeladene eigene Icons als PNG/JPG) können keine Kontur über text-stroke bekommen — Bilder sind kein Text. Dafür bleibt ein passender Schatten als bestmögliche Annäherung. */ .button img, .social-hover img, img.icon-btn { -webkit-text-stroke: initial !important; filter: drop-shadow(0 0 1px rgba(0,0,0,.85)) drop-shadow(0 1px 3px rgba(0,0,0,.5)) !important; } /* ========================================================================== v12 — Korrektur: Kontur skaliert mit der Schriftgröße + echte Zielauswahl der Icon-Glyphen Font Awesome zeichnet das sichtbare Symbol nicht auf dem Element selbst, sondern auf dessen ::before-Pseudoelement (content: var(--fa)). Eine Kontur auf dem Element trifft daher ins Leere. Zusätzlich wird die Konturstärke jetzt in "em" statt in festen Pixeln gesetzt, damit sie bei der großen Überschrift genauso kräftig wirkt wie beim kleineren Kacheltext — bislang war sie ein fester Wert und wirkte bei großer Schrift automatisch dünner. ========================================================================== */ h1, h2, h3, .name, p, .description, .footer, .footer a, .footer-hover, .button, button, a.button, .social-icon, i.social-icon, .button i, .icon.hvr-icon, i[class*="fa-"] { -webkit-text-stroke-width: .028em !important; -webkit-text-stroke-color: rgba(0,0,0,.85) !important; paint-order: stroke fill !important; } /* Das eigentliche Symbol sitzt auf ::before — die Kontur muss dort sitzen */ .social-icon::before, i.social-icon::before, .button i::before, .icon.hvr-icon::before, i[class*="fa-"]::before { -webkit-text-stroke-width: .028em !important; -webkit-text-stroke-color: rgba(0,0,0,.85) !important; paint-order: stroke fill !important; text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45) !important; } /* ========================================================================== v13 — Zwei getrennte Korrekturen 1) Kachel-Symbole (Twitch, YouTube, Kick, PeerTube...) sind echte Bilddateien (SVG), keine Schriftzeichen — eine Textkontur wirkt darauf nicht. Ersatz: acht überlagerte, unscharfe Schlagschatten ohne Weichzeichnung ergeben eine krisp wirkende Silhouetten-Kontur, die optisch dieselbe Wirkung wie die echte Textkontur erzielt. 2) Seitliches Überlaufen auf Firefox Android beheben — vermutlich der Glanzstreifen (::before, per "left:-70%") oder die Lichtbrechung, die auf Android sichtbar seitliches Scrollen erzwingt. ========================================================================== */ html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } .button, a.button, .social-hover { max-width: 100% !important; } .button .icon, .button img, .button svg, a.button img { filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0.7px 0.7px 0 #000) drop-shadow(-0.7px 0.7px 0 #000) drop-shadow(0.7px -0.7px 0 #000) drop-shadow(-0.7px -0.7px 0 #000) !important; } /* ========================================================================== v14 — Zwei Korrekturen 1) Die harte "100vw"-Grenze aus der letzten Fassung war selbst die Ursache für die weiße Linie: 100vw zählt die Breite der Scrollleiste MIT, ist also in Wirklichkeit oft breiter als der tatsächlich sichtbare Bereich. Genau diese Differenz erschien als schmaler Streifen. "100%" bezieht sich dagegen korrekt auf den wirklich sichtbaren Bereich. 2) Die krisse Kontur auf den Kachel-Logos wird zurückgenommen — zurück zu einem neutralen, dezenten Zustand ohne Umriss. ========================================================================== */ html, body { max-width: 100% !important; } .button .icon, .button img, .button svg, a.button img { filter: none !important; } /* ========================================================================== v15 — Weiße Linie am rechten Rand (Firefox Android) + Teilen-Taste im Glas-Look Die weiße Linie kommt vermutlich von "background-attachment: fixed". Mobile Firefox behandelt einen fest stehenden Hintergrund beim Ein-/ Ausblenden der Adressleiste anders als andere Browser — dabei kann es zu einem Rundungsfehler von einem Pixel am Rand kommen, der die weiße Grundfarbe darunter durchscheinen lässt. Der feste Hintergrund ist für eine Bio-Link-Seite kein notwendiger Effekt, daher wird er entfernt. Zusätzlich bekommt denselben dunklen Grundton wie , damit selbst ein Rundungsfehler nicht mehr weiß, sondern dunkel durchscheint. ========================================================================== */ html { background-color: #05070C !important; } body { background-attachment: scroll !important; } /* ---- Teilen-Taste im Glas-Look ------------------------------------------ */ .sharebutton { background: rgba(255,255,255,.10) !important; background-image: linear-gradient(145deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.12) 100%) !important; -webkit-backdrop-filter: blur(14px) saturate(150%) !important; backdrop-filter: blur(14px) saturate(150%) !important; border: 1px solid rgba(255,255,255,.35) !important; border-top-color: rgba(255,255,255,.55) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 20px rgba(0,0,0,.4) !important; transition: transform .3s cubic-bezier(.22,1.2,.32,1), background .25s ease !important; } .sharebutton:hover { transform: translateY(-2px) scale(1.05) !important; background-color: rgba(255,255,255,.16) !important; } .sharebutton:active { transform: translateY(0) scale(.96) !important; } /* Diese alte Regel ist durch die neue Kontur-Technik ersetzt worden. Der Filter hätte die Kontur wieder plattgewalzt, deshalb entfernt. */ /* ========================================================================== v16 — Teilen-Taste: Pfeil-Icon mit Kontur, Desktop-Text weiß mit Kontur Der Pfeil ist ein echtes Font-Awesome-Glyphen (fa-share), das Symbol sitzt wie bei den anderen Icons auf ::before. Der Text "Share" existiert nur ab 600px Breite (per Bootstrap-Regel des Grundgerüsts) — das ist exakt die Desktop-Ansicht. ========================================================================== */ .share-icon, .share-icon::before { color: #ffffff !important; -webkit-text-stroke-width: .028em !important; -webkit-text-stroke-color: rgba(0,0,0,.85) !important; paint-order: stroke fill !important; text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45) !important; } .sharebutton-mb { color: #ffffff !important; -webkit-text-stroke-width: .028em !important; -webkit-text-stroke-color: rgba(0,0,0,.85) !important; paint-order: stroke fill !important; text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45) !important; } /* ========================================================================== v17 — Profilbild vergrößern Die Größe steckt im Code als feste HTML-Angabe (128px), hier überschrieben. Zum Feintunen einfach den Wert ändern. ========================================================================== */ #avatar.rounded-avatar { width: 156px !important; height: 156px !important; } /* ========================================================================== v18 — Name-Größe unabhängig vom Grundgerüst + größeres Profilbild Das LinkStack-Grundgerüst setzt h1 (den Namen) auf mobilen Geräten fest auf 24px und springt erst ab 550px Breite auf 48px. Die Kategorie-Überschriften (h2, z.B. "VIDEOS & LIVESTREAMS") haben dagegen keine solche Bremse und wirken auf dem Handy dadurch größer als der Name. Jetzt bekommt h1 eine eigene, durchgehend große Größe, die sich weich mit der Bildschirmbreite skaliert — unabhängig von der 550px-Grenze des Grundgerüsts. h2 bekommt eine bewusst kleinere Stufe, damit die Rangfolge (Name größer als Kategorie) auf jeder Bildschirmgröße stimmt. ========================================================================== */ h1, .name { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.15 !important; } h2 { font-size: clamp(19px, 5vw, 24px) !important; line-height: 1.25 !important; } #avatar.rounded-avatar { width: 180px !important; height: 180px !important; } /* ========================================================================== Footer-Glas an die finale Kachel-Rezeptur angeglichen ========================================================================== */ .footer { background: rgba(255,255,255,.028) !important; background-color: rgba(255,255,255,.028) !important; background-image: linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.015) 60%, rgba(255,255,255,.08) 100%) !important; -webkit-backdrop-filter: blur(5px) saturate(118%) brightness(1.03) !important; backdrop-filter: blur(5px) saturate(118%) brightness(1.03) !important; } /* ========================================================================== Teilen-Taste: Zentrierung ueber Flexbox statt Zeilenhoehe ========================================================================== */ .sharebutton { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: normal !important; gap: 8px !important; } .share-icon { position: static !important; left: auto !important; top: auto !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } .sharebutton-mb { flex: 0 0 auto !important; } /* ========================================================================== Fussleisten-Links: haengender Schwebe-Zustand nach dem Antippen behoben Die Theme-Vorlage hebt Fusszeilen-Links per translateY(-8px) an, und zwar auch bei :active und :focus. Auf Touchgeraeten bleibt :focus nach dem Antippen bestehen — der Text blieb deshalb dauerhaft oben haengen. Die Anhebung gilt jetzt nur noch auf Geraeten mit echtem Mauszeiger. ========================================================================== */ .footer-hover:active, .footer-hover:focus, .footer-hover:hover, .footer a:active, .footer a:focus, .footer a:hover { transform: none !important; -webkit-transform: none !important; } @media (hover: hover) and (pointer: fine) { .footer-hover:hover, .footer a:hover { transform: translateY(-2px) !important; -webkit-transform: translateY(-2px) !important; } } /* ========================================================================== Weicher Schatten fuer Name und Bio-Text ueber den Links Ergaenzt die bestehende harte Kontur um einen weichen, breiten Schlagschatten. Die Kontur haelt die Buchstabenkanten sauber, der weiche Schatten hebt den ganzen Textblock vom blauen Hintergrund ab. ========================================================================== */ h1, .name { text-shadow: -1px -1px 0 rgba(0,0,0,.55), 1px -1px 0 rgba(0,0,0,.55), -1px 1px 0 rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.55), 0 6px 22px rgba(0,0,0,.45) !important; } .description-parent p, .description, .description-parent { text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 3px 12px rgba(0,0,0,.55), 0 6px 20px rgba(0,0,0,.35) !important; } /* ========================================================================== Bio-Text in vollem Weiss Die Vorlage hatte ihn auf 82% Deckkraft gesetzt, was vor dem blauen Hintergrund grau wirkte. Jetzt volle Deckkraft wie der Name. ========================================================================== */ .description-parent p, .description-parent, .description, p.fadein { color: #ffffff !important; opacity: 1 !important; } /* ========================================================================== Bild-Kacheln Aktiv, sobald an einem Link die Eigenschaft --dd-img gesetzt ist. Das Bild wird als eigenes Element im Inneren gezeichnet (::before), dadurch kann es einen weissen Rand und eigene runde Ecken bekommen — als Hintergrundbild waere beides nicht moeglich. Eintrag im Custom-CSS des Links: --dd-img: url("https://.../bild.png"); --dd-ar: 820 / 312; --dd-ar ist das Seitenverhaeltnis des Bildes (Breite / Hoehe). ========================================================================== */ .button[style*="--dd-img"], a.button[style*="--dd-img"] { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; height: auto !important; min-height: 0 !important; padding: 12px 12px 16px !important; /* Weniger rund als die ovalen Standard-Kacheln, damit es sich mit dem eckigen Bild nicht beisst — aber deutlich abgerundet. */ border-radius: 26px !important; text-align: center !important; } .button[style*="--dd-img"]::before, a.button[style*="--dd-img"]::before { content: "" !important; position: static !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: var(--dd-ar, 820 / 312) !important; background-image: var(--dd-img) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border: 1px solid rgba(255,255,255,.75) !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; box-sizing: border-box !important; transform: none !important; transition: none !important; z-index: auto !important; left: auto !important; top: auto !important; opacity: 1 !important; } /* Der Glanzstreifen entfaellt bei Bild-Kacheln, da ::before nun das Bild traegt. Die Lichtkuppel (::after) bleibt erhalten. */ /* Kleines Markensymbol ausblenden — das grosse Bild uebernimmt die Rolle */ .button[style*="--dd-img"] .icon, .button[style*="--dd-img"] i, .button[style*="--dd-img"] img, a.button[style*="--dd-img"] .icon, a.button[style*="--dd-img"] i, a.button[style*="--dd-img"] img { display: none !important; } /* ========================================================================== Bild-Kacheln: Rahmen entfernt + Hover korrigiert Der Glanzstreifen der normalen Kacheln laeuft ueber ::before. Bei Bild-Kacheln traegt ::before das Bild — die alte Hover-Regel hat es deshalb zur Seite geschoben. Hier wird das Bild fixiert und der Glanzstreifen stattdessen ueber ::after gefuehrt, zusammen mit der Lichtkuppel. ========================================================================== */ /* Weisser Rahmen weg */ .button[style*="--dd-img"]::before, a.button[style*="--dd-img"]::before { border: none !important; } /* Bild bleibt beim Ueberfahren an Ort und Stelle */ .button[style*="--dd-img"]:hover::before, a.button[style*="--dd-img"]:hover::before, .button[style*="--dd-img"]:focus::before, a.button[style*="--dd-img"]:focus::before { left: auto !important; transform: none !important; } /* Glanzstreifen + Lichtkuppel gemeinsam ueber ::after */ .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 53%, transparent 58%), radial-gradient(130% 78% at 50% -25%, rgba(255,255,255,.30) 0%, transparent 58%), radial-gradient(100% 55% at 50% 125%, rgba(140,200,255,.12) 0%, transparent 60%) !important; background-size: 260% 100%, auto, auto !important; background-position: -80% 0, center, center !important; background-repeat: no-repeat !important; transition: background-position .7s cubic-bezier(.22,1,.36,1), opacity .4s ease !important; } .button[style*="--dd-img"]:hover::after, a.button[style*="--dd-img"]:hover::after { background-position: 180% 0, center, center !important; opacity: 1 !important; } /* ========================================================================== Bild-Kacheln: Rollentausch der beiden Zeichenebenen Bisher trug ::before das Bild — dadurch war der originale Glanzstreifen blockiert und musste nachgebaut werden, was nie exakt gleich aussah. Jetzt traegt ::after das Bild, und ::before bleibt unveraendert der echte Glanzstreifen wie bei allen anderen Kacheln. Ueber "order: -1" rutscht das Bild trotzdem an die erste Stelle, oberhalb des Textes. Damit ist der Hover-Effekt zu 100% identisch mit den normalen Kacheln. ========================================================================== */ /* ::before wieder exakt der originale Glanzstreifen */ .button[style*="--dd-img"]::before, a.button[style*="--dd-img"]::before { content: "" !important; position: absolute !important; top: -20% !important; left: -70% !important; right: auto !important; width: 55% !important; height: 140% !important; aspect-ratio: auto !important; z-index: -1 !important; pointer-events: none !important; background-image: none !important; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 58%, transparent 100%) !important; transform: skewX(-18deg) !important; transition: left .7s cubic-bezier(.22,1,.36,1) !important; border-radius: 0 !important; box-shadow: none !important; display: block !important; order: 0 !important; } .button[style*="--dd-img"]:hover::before, a.button[style*="--dd-img"]:hover::before { left: 120% !important; transform: skewX(-18deg) !important; } /* ::after traegt jetzt das Bild und steht per order ganz oben */ .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { content: "" !important; position: static !important; inset: auto !important; order: -1 !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: var(--dd-ar, 820 / 312) !important; background: none !important; background-image: var(--dd-img) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border: none !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; box-sizing: border-box !important; opacity: 1 !important; z-index: auto !important; transform: none !important; transition: none !important; pointer-events: none !important; } .button[style*="--dd-img"]:hover::after, a.button[style*="--dd-img"]:hover::after { background-position: center !important; opacity: 1 !important; transform: none !important; } /* ========================================================================== Live-Zustand Aktiv, sobald an einem Link die Eigenschaft --dd-live gesetzt ist: --dd-live: 1; Die Kachel bekommt einen roten Glasstich und pulsiert wie eine Aufnahmetaste. Glasrezept, Hover, Glanzstreifen und Text bleiben unveraendert — es aendert sich nur die Farbstimmung und der Puls. Funktioniert auch zusammen mit --dd-img an derselben Kachel. ========================================================================== */ .button[style*="--dd-live"], a.button[style*="--dd-live"] { background-color: rgba(255, 60, 60, .085) !important; border-color: rgba(255, 110, 110, .55) !important; border-top-color: rgba(255, 160, 160, .8) !important; animation: dd-live-pulse 2.1s ease-in-out infinite !important; } @keyframes dd-live-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 18px 28px -20px rgba(255,255,255,.4), 0 0 0 1px rgba(255, 80, 80, .22), 0 0 18px rgba(255, 60, 60, .30), 0 10px 30px -8px rgba(0,0,0,.45); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 18px 28px -20px rgba(255,255,255,.5), 0 0 0 2px rgba(255, 80, 80, .45), 0 0 42px rgba(255, 50, 50, .62), 0 10px 30px -8px rgba(0,0,0,.45); } } /* Beim Ueberfahren pausiert der Puls, damit sich Hover-Schein und Pulsieren nicht ueberlagern */ .button[style*="--dd-live"]:hover, a.button[style*="--dd-live"]:hover { animation-play-state: paused !important; } /* Roter Aufnahmepunkt vor dem Text */ .button[style*="--dd-live"] .label::before, a.button[style*="--dd-live"]::marker { content: none; } @media (prefers-reduced-motion: reduce) { .button[style*="--dd-live"], a.button[style*="--dd-live"] { animation: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 2px rgba(255, 80, 80, .45), 0 0 30px rgba(255, 60, 60, .45), 0 10px 30px -8px rgba(0,0,0,.45) !important; } } /* ========================================================================== Live-Zustand v2 — Atmen zwischen Normal-Glas und Rot-Glas Ersetzt die vorherige Fassung (dauerhaft rot + pulsierender Schein), die zu dezent war. Jetzt wechselt die gesamte Kachel im festen Takt zwischen dem normalen Milchglas und einem roten Milchglas, mit weichem Ein- und Ausblenden und kurzem Halten in beiden Zustaenden. Animiert werden nur Farbwerte (background-color, border-color, box-shadow) — diese sind zuverlaessig animierbar. Der Verlauf im background-image bleibt unangetastet, damit die Glasstruktur in beiden Zustaenden erhalten bleibt. ========================================================================== */ .button[style*="--dd-live"], a.button[style*="--dd-live"] { background-color: rgba(255,255,255,.028) !important; animation: dd-live-breathe 3s ease-in-out infinite !important; } @keyframes dd-live-breathe { /* Normalzustand, kurz gehalten */ 0%, 10% { background-color: rgba(255,255,255,.028); border-color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 18px 28px -20px rgba(255,255,255,.4), 0 0 0 .5px rgba(255,255,255,.22), 0 10px 30px -8px rgba(0,0,0,.45); } /* Rotes Milchglas, kurz gehalten */ 42%, 58% { background-color: rgba(255, 40, 40, .30); border-color: rgba(255, 120, 120, .75); border-top-color: rgba(255, 180, 180, .9); box-shadow: inset 0 1px 0 rgba(255,220,220,.6), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 22px 40px -20px rgba(255, 90, 90, .55), 0 0 0 1.5px rgba(255, 70, 70, .5), 0 0 34px rgba(255, 45, 45, .45), 0 10px 30px -8px rgba(0,0,0,.45); } /* zurueck zum Normalzustand */ 90%, 100% { background-color: rgba(255,255,255,.028); border-color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 18px 28px -20px rgba(255,255,255,.4), 0 0 0 .5px rgba(255,255,255,.22), 0 10px 30px -8px rgba(0,0,0,.45); } } @media (prefers-reduced-motion: reduce) { .button[style*="--dd-live"], a.button[style*="--dd-live"] { animation: none !important; background-color: rgba(255, 40, 40, .26) !important; border-color: rgba(255, 120, 120, .7) !important; } } /* ========================================================================== Live-Zustand v3 — ueber registrierte Custom Properties WARUM DIESER UMWEG: Eine Deklaration mit !important schlaegt auch Keyframe-Animationen. Da die Kacheln background-color, border-color und box-shadow mit !important gesetzt bekommen, kamen die bisherigen Live-Keyframes gar nicht zum Zug — daher kein Pulsieren in Firefox und Safari. Loesung: Die animierbaren Farbwerte laufen jetzt ueber Custom Properties. Das !important bleibt auf der Eigenschaft, animiert wird aber die Variable dahinter — und die ist davon nicht betroffen. Die @property-Registrierung sorgt dafuer, dass Farben weich interpoliert werden statt hart umzuspringen. Die Standardwerte entsprechen exakt den bisherigen Werten, normale Kacheln sehen also unveraendert aus. ========================================================================== */ @property --dd-bg { syntax: ''; inherits: false; initial-value: rgba(255, 255, 255, 0.028); } @property --dd-bd { syntax: ''; inherits: false; initial-value: rgba(255, 255, 255, 0.55); } @property --dd-bdt { syntax: ''; inherits: false; initial-value: rgba(255, 255, 255, 0.78); } @property --dd-ring { syntax: ''; inherits: false; initial-value: rgba(255, 255, 255, 0.3); } @property --dd-glow { syntax: ''; inherits: false; initial-value: rgba(255, 45, 45, 0); } .button, button, a.button { background-color: var(--dd-bg) !important; border-color: var(--dd-bd) !important; border-top-color: var(--dd-bdt) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -2px 3px rgba(0,0,0,.22), inset 0 20px 30px -20px rgba(255,255,255,.5), inset 6px 0 12px -10px rgba(255,255,255,.4), inset -6px 0 12px -10px rgba(255,255,255,.4), 0 0 0 .5px var(--dd-ring), 0 0 34px var(--dd-glow), 0 10px 30px -8px rgba(0,0,0,.45) !important; } /* Live: Atmen zwischen Normal-Glas und Rot-Glas */ .button[style*="--dd-live"], a.button[style*="--dd-live"] { animation: dd-live-breathe 3s ease-in-out infinite !important; } @keyframes dd-live-breathe { 0%, 8% { --dd-bg: rgba(255, 255, 255, 0.028); --dd-bd: rgba(255, 255, 255, 0.55); --dd-bdt: rgba(255, 255, 255, 0.78); --dd-ring: rgba(255, 255, 255, 0.3); --dd-glow: rgba(255, 45, 45, 0); } 42%, 58% { --dd-bg: rgba(255, 40, 40, 0.32); --dd-bd: rgba(255, 120, 120, 0.8); --dd-bdt: rgba(255, 185, 185, 0.95); --dd-ring: rgba(255, 80, 80, 0.6); --dd-glow: rgba(255, 45, 45, 0.5); } 92%, 100% { --dd-bg: rgba(255, 255, 255, 0.028); --dd-bd: rgba(255, 255, 255, 0.55); --dd-bdt: rgba(255, 255, 255, 0.78); --dd-ring: rgba(255, 255, 255, 0.3); --dd-glow: rgba(255, 45, 45, 0); } } /* Hover soll den Puls nicht unterbrechen */ .button[style*="--dd-live"]:hover, a.button[style*="--dd-live"]:hover { animation-play-state: running !important; background-color: var(--dd-bg) !important; border-color: var(--dd-bd) !important; } @media (prefers-reduced-motion: reduce) { .button[style*="--dd-live"], a.button[style*="--dd-live"] { animation: none !important; --dd-bg: rgba(255, 40, 40, 0.28); --dd-bd: rgba(255, 120, 120, 0.75); --dd-glow: rgba(255, 45, 45, 0.4); } } /* ========================================================================== Live-Zustand v4 + Mobil-Korrekturen ========================================================================== */ /* --- 1. Flaechige Rot-Einfaerbung ----------------------------------------- Bisher wurde nur background-color eingefaerbt. Darueber liegt aber der weisse Glasverlauf (background-image), der das Rot ueberdeckt hat. Jetzt liegt eine zusaetzliche Farbebene ueber dem Verlauf, gesteuert ueber --dd-tint. Standard ist transparent, normale Kacheln bleiben dadurch unveraendert. */ @property --dd-tint { syntax: ''; inherits: false; initial-value: rgba(255, 45, 45, 0); } .button, button, a.button { background-image: linear-gradient(var(--dd-tint), var(--dd-tint)), linear-gradient(145deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.03) 56%, rgba(255,255,255,.16) 100%) !important; } /* --- 2. Firefox-Sonderfall aushebeln -------------------------------------- [data-liquid-glass="off"] setzt die Hintergrundfarbe fest und hat damit in Firefox das Rot blockiert. Fuer Live-Kacheln gewinnt jetzt wieder die Variable (hoehere Spezifitaet). Nicht-Live-Kacheln bleiben unberuehrt. */ .button[data-liquid-glass][style*="--dd-live"], a.button[data-liquid-glass][style*="--dd-live"], .button[style*="--dd-live"], a.button[style*="--dd-live"] { background-color: var(--dd-bg) !important; } /* --- 3. Keyframes um die Farbebene ergaenzt ------------------------------- */ @keyframes dd-live-breathe { 0%, 8% { --dd-bg: rgba(255, 255, 255, 0.028); --dd-tint: rgba(255, 45, 45, 0); --dd-bd: rgba(255, 255, 255, 0.55); --dd-bdt: rgba(255, 255, 255, 0.78); --dd-ring: rgba(255, 255, 255, 0.3); --dd-glow: rgba(255, 45, 45, 0); } 42%, 58% { --dd-bg: rgba(255, 40, 40, 0.34); --dd-tint: rgba(255, 40, 40, 0.40); --dd-bd: rgba(255, 120, 120, 0.8); --dd-bdt: rgba(255, 185, 185, 0.95); --dd-ring: rgba(255, 80, 80, 0.6); --dd-glow: rgba(255, 45, 45, 0.5); } 92%, 100% { --dd-bg: rgba(255, 255, 255, 0.028); --dd-tint: rgba(255, 45, 45, 0); --dd-bd: rgba(255, 255, 255, 0.55); --dd-bdt: rgba(255, 255, 255, 0.78); --dd-ring: rgba(255, 255, 255, 0.3); --dd-glow: rgba(255, 45, 45, 0); } } /* --- 4. Mobil: kein "erst ohne Glas, dann neu aufbauen" ------------------- Auf schmalen Bildschirmen kollidieren die Eingangsanimationen mit dem Aufbau der Milchglas-Ebenen — die Kacheln erscheinen erst flach, verschwinden und kommen dann mit Glas zurueck. Auf Mobil laufen sie deshalb ohne Eingangsanimation direkt im Endzustand auf. */ @media (max-width: 900px) { .button-entrance, .fadein, .social-icon-div, .footer { animation: none !important; opacity: 1 !important; } } /* --- 5. Chrome Android: springende Hintergrund-Skalierung ----------------- Beim Scrollen blendet die Adressleiste ein und aus, wodurch sich die Fensterhoehe aendert und der Hintergrund neu skaliert wird. Der Hintergrund liegt jetzt auf einer festen Ebene mit konstanter Hoehe (100lvh = groesste Viewport-Hoehe), die davon unberuehrt bleibt. */ body::before { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 100lvh !important; z-index: -10 !important; pointer-events: none !important; background-image: inherit !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Der Body selbst zeichnet sein Bild nicht mehr, sondern reicht es nur noch an die feste Ebene weiter. */ body { background-size: 0 0 !important; } /* ========================================================================== Hintergrund-Ebene gehaertet Die Adressleiste blendet beim Scrollen aus, dadurch waechst die Fensterhoehe und ein am Fenster ausgerichteter Hintergrund wird neu skaliert. Die feste Ebene bekommt deshalb eine Hoehe, die von diesem Wechsel unabhaengig ist: 100vh = Fallback fuer aeltere Browser 100lvh = "large viewport height", also immer die Hoehe MIT ausgeblendeter Adressleiste — aendert sich beim Scrollen nie Da die Ebene ohnehin formatfuellend zugeschnitten wird, entsteht auf Desktop und Tablets kein Unterschied: dort sind beide Werte identisch. ========================================================================== */ body::before { height: 100vh !important; height: 100lvh !important; /* Eigene Zeichenebene erzwingen, damit der Browser sie beim Scrollen nicht neu berechnet, sondern nur verschiebt. */ transform: translateZ(0) !important; backface-visibility: hidden !important; will-change: transform !important; } /* ========================================================================== Aufbaueffekt auf Mobil wieder aktiviert URSACHE DES FRUEHEREN FLACKERNS: Die Eingangsanimation blendet ueber opacity ein. Ein Element mit opacity < 1 bildet eine eigene Zeichengruppe — und darin kann backdrop-filter den Hintergrund nicht abtasten. Die Kacheln erschienen deshalb erst ohne Glas und bekamen es erst am Ende der Animation. LOESUNG: Auf Mobil wird ausschliesslich die Position animiert (translateY), nicht die Deckkraft. Das Glas ist damit von der ersten Sekunde an da, die Kacheln laufen trotzdem nacheinander ins Bild. Der zeitliche Versatz kommt weiterhin aus der --delay-Variable, die LinkStack pro Kachel setzt. Auf Desktop bleibt die urspruengliche Animation unveraendert. ========================================================================== */ @media (max-width: 900px) { .button-entrance { animation: dd-rise-mobile .55s cubic-bezier(.22, 1, .3, 1) both !important; animation-delay: calc(var(--delay, 0s) / 10 + .1s) !important; opacity: 1 !important; } /* Name und Bio duerfen weiterhin einblenden — dort gibt es kein Milchglas, das gestoert werden koennte. */ h1.fadein, .description-parent.fadein, .description-parent p.fadein { animation: dd-fade-mobile .7s ease both !important; opacity: 1 !important; } /* Symbolreihe und Fussbereich laufen ebenfalls sanft ein, wieder ausschliesslich ueber die Position. */ .social-icon-div { animation: dd-rise-mobile .5s cubic-bezier(.22, 1, .3, 1) both !important; opacity: 1 !important; } .footer { animation: dd-rise-mobile .5s cubic-bezier(.22, 1, .3, 1) both !important; animation-delay: .35s !important; opacity: 1 !important; } } @keyframes dd-rise-mobile { from { transform: translateY(18px); } to { transform: translateY(0); } } @keyframes dd-fade-mobile { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .button-entrance, .social-icon-div, .footer, h1.fadein, .description-parent.fadein { animation: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================================== Profilbild: Glasscheibe hinter transparenten Bereichen backdrop-filter wirkt auf das, was hinter dem Element liegt. Bei einem PNG mit Alphakanal wird es deshalb genau dort sichtbar, wo das Logo durchsichtig ist — die deckenden Bereiche des Logos bleiben unberuehrt. Gleiche Rezeptur wie die Kacheln, nur kreisrund zugeschnitten. ========================================================================== */ #avatar.rounded-avatar, img.rounded-avatar { border-radius: 50% !important; background-color: rgba(255,255,255,.028) !important; background-image: linear-gradient(145deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.03) 56%, rgba(255,255,255,.16) 100%) !important; -webkit-backdrop-filter: blur(5px) saturate(118%) brightness(1.03) !important; backdrop-filter: blur(5px) saturate(118%) brightness(1.03) !important; border: 1px solid rgba(255,255,255,.55) !important; border-top-color: rgba(255,255,255,.78) !important; border-bottom-color: rgba(255,255,255,.32) !important; box-sizing: border-box !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 18px 28px -20px rgba(255,255,255,.4), 0 0 0 .5px rgba(255,255,255,.22), 0 10px 30px -8px rgba(0,0,0,.45) !important; } /* ========================================================================== Profilbild: Glasscheibe ohne eigenen Rand Das Logo bringt bereits einen kreisrunden Rand mit. Ein zusaetzlicher Rahmen der Glasscheibe ergaebe einen Rand um den Rand. Die Scheibe behaelt daher nur die Unschaerfe und einen weichen Schatten nach aussen, verzichtet aber auf Rahmen und helle Innenkanten. Bei einem deckenden Bild (JPG) ist davon nichts zu sehen — dort wirkt das Profilbild wie vor der Glas-Erweiterung. ========================================================================== */ #avatar.rounded-avatar, img.rounded-avatar { border: none !important; border-top-color: transparent !important; border-bottom-color: transparent !important; background-color: rgba(255,255,255,.02) !important; background-image: none !important; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45) !important; } /* ========================================================================== Firefox: Zeichenfehler bei benachbarten Glasflaechen Wenn sich ein Element mit backdrop-filter aendert (z.B. eine Symbolpille beim Ueberfahren), zeichnet Firefox teilweise benachbarte Glasflaechen fehlerhaft neu — sie tasten alle dieselbe Hintergrundebene ab. Gegenmassnahme: Jedes Glaselement bekommt eine eigene, isolierte Zeichenebene. Damit betrifft ein Neuzeichnen nur das jeweilige Element. Der @supports-Block greift ausschliesslich in Firefox, andere Browser bleiben unberuehrt. ========================================================================== */ @supports (-moz-appearance: none) { .button, button, a.button, .social-hover, .footer, #avatar.rounded-avatar { transform: translateZ(0) !important; backface-visibility: hidden !important; isolation: isolate !important; will-change: transform !important; } /* Beim Ueberfahren muss die eigene Ebene erhalten bleiben, sonst faellt das Element zurueck und der Fehler tritt erneut auf. */ .button:hover, a.button:hover, .social-hover:hover { will-change: transform !important; backface-visibility: hidden !important; } } /* ========================================================================== Puls-Vorlagen in vier Farben Verwendung im Custom-CSS eines einzelnen Links, jeweils eine Zeile: --dd-pulse-red: 1; Live / Aufnahme --dd-pulse-yellow: 1; Ankuendigung / gleich geht's los --dd-pulse-green: 1; Neu / verfuegbar --dd-pulse-blue: 1; Hinweis / Aktion --dd-live: 1; bleibt als Kurzform fuer Rot erhalten. Kombinierbar mit --dd-img (XL-Kachel). ========================================================================== */ .button[style*="--dd-pulse-red"], a.button[style*="--dd-pulse-red"], .button[style*="--dd-live"], a.button[style*="--dd-live"] { animation: dd-pulse-red 3s ease-in-out infinite !important; background-color: var(--dd-bg) !important; } .button[style*="--dd-pulse-yellow"], a.button[style*="--dd-pulse-yellow"] { animation: dd-pulse-yellow 3s ease-in-out infinite !important; background-color: var(--dd-bg) !important; } .button[style*="--dd-pulse-green"], a.button[style*="--dd-pulse-green"] { animation: dd-pulse-green 3s ease-in-out infinite !important; background-color: var(--dd-bg) !important; } .button[style*="--dd-pulse-blue"], a.button[style*="--dd-pulse-blue"] { animation: dd-pulse-blue 3s ease-in-out infinite !important; background-color: var(--dd-bg) !important; } /* Neutraler Ausgangszustand, identisch fuer alle Farben */ @keyframes dd-pulse-red { 0%, 8%, 92%, 100% { --dd-bg: rgba(255,255,255,.028); --dd-tint: rgba(255,45,45,0); --dd-bd: rgba(255,255,255,.55); --dd-bdt: rgba(255,255,255,.78); --dd-ring: rgba(255,255,255,.3); --dd-glow: rgba(255,45,45,0); } 42%, 58% { --dd-bg: rgba(255,40,40,.34); --dd-tint: rgba(255,40,40,.40); --dd-bd: rgba(255,120,120,.8); --dd-bdt: rgba(255,185,185,.95); --dd-ring: rgba(255,80,80,.6); --dd-glow: rgba(255,45,45,.5); } } @keyframes dd-pulse-yellow { 0%, 8%, 92%, 100% { --dd-bg: rgba(255,255,255,.028); --dd-tint: rgba(255,185,45,0); --dd-bd: rgba(255,255,255,.55); --dd-bdt: rgba(255,255,255,.78); --dd-ring: rgba(255,255,255,.3); --dd-glow: rgba(255,185,45,0); } 42%, 58% { --dd-bg: rgba(255,180,40,.34); --dd-tint: rgba(255,180,40,.40); --dd-bd: rgba(255,215,120,.8); --dd-bdt: rgba(255,235,185,.95); --dd-ring: rgba(255,200,80,.6); --dd-glow: rgba(255,185,45,.5); } } @keyframes dd-pulse-green { 0%, 8%, 92%, 100% { --dd-bg: rgba(255,255,255,.028); --dd-tint: rgba(60,215,120,0); --dd-bd: rgba(255,255,255,.55); --dd-bdt: rgba(255,255,255,.78); --dd-ring: rgba(255,255,255,.3); --dd-glow: rgba(60,215,120,0); } 42%, 58% { --dd-bg: rgba(55,210,115,.32); --dd-tint: rgba(55,210,115,.38); --dd-bd: rgba(130,235,175,.8); --dd-bdt: rgba(195,250,215,.95); --dd-ring: rgba(80,225,140,.6); --dd-glow: rgba(60,215,120,.5); } } @keyframes dd-pulse-blue { 0%, 8%, 92%, 100% { --dd-bg: rgba(255,255,255,.028); --dd-tint: rgba(60,150,255,0); --dd-bd: rgba(255,255,255,.55); --dd-bdt: rgba(255,255,255,.78); --dd-ring: rgba(255,255,255,.3); --dd-glow: rgba(60,150,255,0); } 42%, 58% { --dd-bg: rgba(55,145,255,.34); --dd-tint: rgba(55,145,255,.40); --dd-bd: rgba(140,195,255,.8); --dd-bdt: rgba(200,225,255,.95); --dd-ring: rgba(80,165,255,.6); --dd-glow: rgba(60,150,255,.5); } } @media (prefers-reduced-motion: reduce) { .button[style*="--dd-pulse-"], a.button[style*="--dd-pulse-"] { animation: none !important; } } /* ========================================================================== Hintergrund: feste Ebene wieder entfernt Die fest positionierte Ebene (body::before) sollte das Neuskalieren bei ein- und ausblendender Adressleiste in Chrome Android verhindern. In Safari fuehrte sie jedoch zu starkem Ruckeln beim Scrollen: eine fixe Ebene muss bei jedem Scrollschritt neu unter den Inhalt gelegt werden, und zusammen mit den vielen Milchglas-Flaechen darueber wird das zu rechenintensiv. Der Hintergrund wird deshalb wieder direkt vom Body gezeichnet, mit "scroll" statt "fixed": Damit richtet er sich nach der Dokumenthoehe und nicht nach der Fensterhoehe — die Adressleiste beeinflusst ihn dadurch ebenfalls nicht mehr. ========================================================================== */ body::before { display: none !important; content: none !important; } body { background-size: cover !important; background-position: center center !important; background-attachment: scroll !important; background-repeat: no-repeat !important; } /* ========================================================================== Hintergrund: starr auf Desktop, mitlaufend auf Touchgeraeten Mit "scroll" richtet sich der Hintergrund nach der Dokumenthoehe und wandert beim Scrollen mit — in Safari fuehrt das zu stockendem Nachziehen. Mit "fixed" bleibt er starr am Fenster stehen, so wie gewuenscht. Auf Touchgeraeten wird "fixed" bewusst NICHT gesetzt: Mobile Browser behandeln feste Hintergruende unterschiedlich und es entstehen dort Sprunge beim Ein- und Ausblenden der Adressleiste. Dort bleibt es deshalb bei "scroll". ========================================================================== */ body { background-attachment: scroll !important; background-size: cover !important; background-position: center center !important; } @media (hover: hover) and (pointer: fine) { body { background-attachment: fixed !important; background-size: cover !important; background-position: center center !important; } } /* ========================================================================== Hintergrund endgueltig fest verankert Bisherige Versuche und warum sie scheiterten: - "scroll": Hintergrund richtet sich nach der Dokumenthoehe und wandert beim Scrollen mit → sichtbares Nachziehen. - "fixed" direkt am Body: Safari muss den festen Hintergrund fuer jede der vielen Milchglas-Flaechen darueber neu abtasten → Ruckeln. - Feste Ebene mit will-change/translateZ: erzwungene Grafikbeschleunigung hat das Ruckeln in Safari eher verstaerkt. Jetzt: eine schlichte, fest positionierte Ebene ganz hinten, ohne erzwungene Beschleunigung. Sie wird einmal gezeichnet und beim Scrollen nur an Ort und Stelle gehalten. Der Body selbst zeichnet sein Bild nicht mehr, reicht es aber per "inherit" an diese Ebene weiter. ========================================================================== */ body::before { content: "" !important; display: block !important; position: fixed !important; inset: 0 !important; z-index: -10 !important; pointer-events: none !important; background-image: inherit !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* Bewusst KEINE Beschleunigung erzwingen — das war die Ursache des Ruckelns in Safari. */ transform: none !important; will-change: auto !important; backface-visibility: visible !important; filter: none !important; } body { background-attachment: scroll !important; background-size: 0 0 !important; } /* ========================================================================== Parallax-Ebene stilllegen LinkStack fuegt bei jedem eigenen Theme einen Container mit zwoelf Objekten ein, der beim Scrollen bewegt wird. Unser Theme gestaltet diese Objekte nicht — sie sind unsichtbar, das Bewegen kostet aber trotzdem Rechenzeit bei jedem Scrollschritt und kann in Safari zu stockendem Verhalten fuehren. ========================================================================== */ .background-container, .parallax-background, .parallax-background .object1, .parallax-background .object2, .parallax-background .object3, .parallax-background .object4, .parallax-background .object5, .parallax-background .object6, .parallax-background .object7, .parallax-background .object8, .parallax-background .object9, .parallax-background .object10, .parallax-background .object11, .parallax-background .object12 { display: none !important; animation: none !important; transform: none !important; will-change: auto !important; } /* ========================================================================== Puls-Vorlagen — vollstaendiger Satz, einheitlich benannt Im Custom-CSS eines Links, jeweils eine Zeile: --dd-pulse-red: 1; On Air / Live --dd-pulse-yellow: 1; Ankuendigung --dd-pulse-green: 1; Neu / verfuegbar --dd-pulse-blue: 1; Hinweis --dd-pulse-purple: 1; Besonderes / Event --dd-live: 1; funktioniert weiterhin als Altbestand, ist aber durch --dd-pulse-red ersetzt und sollte nicht mehr neu verwendet werden. Alle Vorlagen sind mit --dd-img (XL-Kachel) kombinierbar. ========================================================================== */ .button[style*="--dd-pulse-purple"], a.button[style*="--dd-pulse-purple"] { animation: dd-pulse-purple 3s ease-in-out infinite !important; background-color: var(--dd-bg) !important; } @keyframes dd-pulse-purple { 0%, 8%, 92%, 100% { --dd-bg: rgba(255,255,255,.028); --dd-tint: rgba(165,85,255,0); --dd-bd: rgba(255,255,255,.55); --dd-bdt: rgba(255,255,255,.78); --dd-ring: rgba(255,255,255,.3); --dd-glow: rgba(165,85,255,0); } 42%, 58% { --dd-bg: rgba(160,80,255,.34); --dd-tint: rgba(160,80,255,.40); --dd-bd: rgba(205,160,255,.8); --dd-bdt: rgba(230,205,255,.95); --dd-ring: rgba(180,110,255,.6); --dd-glow: rgba(165,85,255,.5); } } /* ========================================================================== XL-Kachel: kleines Markensymbol wieder einblenden Bisher war die Kachel als Spalte aufgebaut — dort waere das Symbol auf einer eigenen Zeile unter dem Bild gelandet. Jetzt ist es wieder ein Zeilenlayout mit Umbruch: Das Bild nimmt eine volle Zeile ein (flex-basis 100%), Symbol und Text stehen gemeinsam in der Zeile darunter — genau wie bei allen normalen Kacheln. ========================================================================== */ .button[style*="--dd-img"], a.button[style*="--dd-img"] { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } /* Das Bild belegt eine eigene, volle Zeile und steht ganz oben */ .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { flex: 0 0 100% !important; order: -1 !important; margin-bottom: 2px !important; } /* Symbol wieder sichtbar, in derselben Groesse wie bei den anderen Kacheln */ .button[style*="--dd-img"] .icon, .button[style*="--dd-img"] i, .button[style*="--dd-img"] img, a.button[style*="--dd-img"] .icon, a.button[style*="--dd-img"] i, a.button[style*="--dd-img"] img { display: inline-block !important; width: 22px !important; height: 22px !important; max-height: 22px !important; font-size: 21px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; vertical-align: middle !important; opacity: 1 !important; } /* ========================================================================== XL-Kachel ohne Markensymbol Standardmaessig zeigt eine XL-Kachel das kleine Symbol neben dem Text. Soll es bei einer einzelnen Kachel entfallen, im Custom-CSS dieses Links zusaetzlich eintragen: --dd-noicon: 1; ========================================================================== */ .button[style*="--dd-noicon"] .icon, .button[style*="--dd-noicon"] i, .button[style*="--dd-noicon"] img, a.button[style*="--dd-noicon"] .icon, a.button[style*="--dd-noicon"] i, a.button[style*="--dd-noicon"] img { display: none !important; } /* ========================================================================== Link aus- und einblenden --dd-hidden: 1; Link verschwindet von der oeffentlichen Seite --dd-hidden: 0; Link ist sichtbar (wie ohne die Zeile) Der Link bleibt im Panel samt aller Einstellungen erhalten. LinkStack selbst kennt keine Sichtbarkeitsschaltung — in der Datenbank gibt es kein entsprechendes Feld, nur Loeschen oder Anzeigen. ========================================================================== */ .button-entrance:has(> [style*="--dd-hidden: 1"]), .button-entrance:has(> [style*="--dd-hidden:1"]), [style*="--dd-hidden: 1"], [style*="--dd-hidden:1"] { display: none !important; } /* ========================================================================== Zweite Textzeile in derselben Kachel --dd-sub: "Spare 10% mit dem Code ABC123"; Die Zeile erscheint kleiner und etwas zurueckgenommen unter dem Haupttext, innerhalb derselben Glaspille. Der Text MUSS in Anfuehrungszeichen stehen. Nicht kombinierbar mit --dd-img: Bei XL-Kacheln traegt dieselbe Zeichenebene bereits das Bild. ========================================================================== */ .button[style*="--dd-sub"], a.button[style*="--dd-sub"] { flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; row-gap: 2px !important; column-gap: 10px !important; padding-top: 12px !important; padding-bottom: 12px !important; height: auto !important; min-height: 0 !important; line-height: 1.25 !important; } .button[style*="--dd-sub"]::after, a.button[style*="--dd-sub"]::after { content: var(--dd-sub) !important; position: static !important; inset: auto !important; order: 2 !important; flex: 0 0 100% !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: none !important; font-size: 12.5px !important; font-weight: 400 !important; letter-spacing: .01em !important; text-align: center !important; color: rgba(255,255,255,.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45) !important; } /* ========================================================================== Kachel mit Untertitel: gleicher Eckenradius wie die XL-Kachel Sobald eine Kachel zwei Textzeilen traegt, wird sie hoeher. Die ovale Form wirkt dann unruhig — deshalb dieselbe abgerundete Rechteckform wie bei der XL-Kachel (26px). ========================================================================== */ .button[style*="--dd-sub"], a.button[style*="--dd-sub"] { border-radius: 26px !important; } /* ========================================================================== Nicht anklickbare Info-Kachel --dd-static: 1; LinkStack verlangt bei jedem Link eine Zieladresse — eine leere Kachel laesst sich im Panel nicht anlegen. Loesung: normalen Link anlegen (Adresse beliebig, z.B. die eigene Seite) und hiermit stilllegen. Die Kachel sieht aus wie jede andere, reagiert aber nicht auf Klicks und zeigt keinen Zeigefinger. Gedacht fuer Infoflaechen wie Streamplan, Hinweise oder Rabattcodes, die kein Ziel haben. Gut kombinierbar mit --dd-sub. ========================================================================== */ .button[style*="--dd-static"], a.button[style*="--dd-static"] { pointer-events: none !important; cursor: default !important; user-select: text !important; } /* ========================================================================== Streamplan-Kachel --dd-nextstream: 1; --dd-static: 1; Die Kachel ist standardmaessig UNSICHTBAR. Erst wenn streamplan.js einen kommenden Termin gefunden hat, setzt es data-dd-stream="found" und die Kachel erscheint — samt Termin in der zweiten Textzeile. Findet es keinen Termin oder ist kein Kalender eingerichtet, bleibt die Kachel unsichtbar. Es steht also nie ein leerer Platzhalter da. ========================================================================== */ .button[style*="--dd-nextstream"], a.button[style*="--dd-nextstream"], .button-entrance:has(> [style*="--dd-nextstream"]) { display: none !important; } .button[style*="--dd-nextstream"][data-dd-stream="found"], a.button[style*="--dd-nextstream"][data-dd-stream="found"] { display: flex !important; } .button-entrance:has(> [data-dd-stream="found"]) { display: block !important; } /* ========================================================================== Automatischer Live-Puls aus dem Kalender --dd-liveauto: 1; Pro Kachel einzutragen, z.B. bei Twitch, YouTube und Kick. Waehrend ein Kalendertermin laeuft, setzt streamplan.js data-dd-live="on" und die Kachel pulsiert rot — dieselbe Optik wie --dd-pulse-red. Danach wieder normal. Kacheln ohne diese Zeile bleiben unberuehrt. Es findet KEINE Abfrage bei Twitch, YouTube oder Kick statt. Grundlage ist ausschliesslich der eigene Kalender, der ueber die eigene Domain ausgeliefert wird. ========================================================================== */ .button[data-dd-live="on"], a.button[data-dd-live="on"] { animation: dd-pulse-red 3s ease-in-out infinite !important; background-color: var(--dd-bg) !important; } /* Ohne laufenden Termin ausdruecklich kein Puls */ .button[data-dd-live="off"], a.button[data-dd-live="off"] { animation: none !important; } /* ========================================================================== XL-Kachel: Bildausschnitt steuern --dd-imgpos: top; Das Bild fuellt den Rahmen immer formatfuellend aus und wird mittig beschnitten. Passt der mittige Ausschnitt nicht — etwa bei einem Hochkant-Foto, bei dem das Wichtige oben liegt — laesst sich der sichtbare Bereich hiermit verschieben. Moegliche Werte: top, bottom, left, right, center (Standard) Auch Kombinationen: "top left", "50% 20%" ========================================================================== */ .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { background-position: var(--dd-imgpos, center) !important; } /* ========================================================================== XL-Kachel MIT Untertitel Bisher schlossen sich --dd-img und --dd-sub aus, weil beide dieselbe Zeichenebene (::after) belegten. Sind beide gesetzt, uebernimmt jetzt ::before den Untertitel — der Glanzstreifen entfaellt bei diesen Kacheln, was optisch kaum auffaellt, da das Bild ohnehin dominiert. Reihenfolge: Bild (order -1), dann Symbol und Titel, dann Untertitel. ========================================================================== */ .button[style*="--dd-img"][style*="--dd-sub"]::before, a.button[style*="--dd-img"][style*="--dd-sub"]::before { content: var(--dd-sub) !important; position: static !important; inset: auto !important; top: auto !important; left: auto !important; order: 3 !important; flex: 0 0 100% !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; background: none !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; transition: none !important; pointer-events: none !important; opacity: 1 !important; z-index: auto !important; font-size: 12.5px !important; font-weight: 400 !important; letter-spacing: .01em !important; text-align: center !important; color: rgba(255,255,255,.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45) !important; } /* Der Glanzstreifen darf hier beim Ueberfahren nicht wandern */ .button[style*="--dd-img"][style*="--dd-sub"]:hover::before, a.button[style*="--dd-img"][style*="--dd-sub"]:hover::before { left: auto !important; transform: none !important; } /* ========================================================================== Korrektur: Bild + Untertitel gemeinsam Bei einer Kachel mit BEIDEN Angaben trafen zwei Regeln auf ::after zu — die Bild-Regel und die Untertitel-Regel. Da beide gleich stark sind, gewann die spaeter notierte, und das Bild verschwand. Diese Regel ist praeziser (zwei Merkmale statt einem) und stellt das Bild auf ::after wieder her. Der Untertitel sitzt auf ::before. ========================================================================== */ .button[style*="--dd-img"][style*="--dd-sub"]::after, a.button[style*="--dd-img"][style*="--dd-sub"]::after { content: "" !important; position: static !important; inset: auto !important; order: -1 !important; flex: 0 0 100% !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: var(--dd-ar, 820 / 312) !important; background: none !important; background-image: var(--dd-img) !important; background-size: cover !important; background-position: var(--dd-imgpos, center) !important; background-repeat: no-repeat !important; border: none !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; box-sizing: border-box !important; font-size: 0 !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: none !important; z-index: auto !important; } /* ========================================================================== FINALE XL-REGELN Alle Bild-Kachel-Regeln gebuendelt an einer Stelle. Ueber den Tag sind an fuenf verschiedenen Stellen Regeln dazugekommen, die sich gegenseitig ueberlagert haben. Dieser Block steht am Ende und setzt sich gegen alles Vorherige durch — hier und nur hier wird das Verhalten der XL-Kachel festgelegt. Aufteilung der Zeichenebenen: ohne Untertitel: ::before = Glanzstreifen, ::after = Bild mit Untertitel: ::before = Untertitel, ::after = Bild ========================================================================== */ /* --- Die Kachel selbst --- */ .button[style*="--dd-img"], a.button[style*="--dd-img"] { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; row-gap: 6px !important; column-gap: 10px !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 12px 12px 16px !important; border-radius: 26px !important; overflow: hidden !important; position: relative !important; } /* --- Das Bild --- */ .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { content: "" !important; position: static !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; order: -1 !important; flex: 0 0 100% !important; display: block !important; width: 100% !important; height: auto !important; min-height: 40px !important; aspect-ratio: var(--dd-ar, 820 / 312) !important; background-color: transparent !important; background-image: var(--dd-img) !important; background-size: cover !important; background-position: var(--dd-imgpos, center) !important; background-repeat: no-repeat !important; border: none !important; border-radius: 18px !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; box-sizing: border-box !important; font-size: 0 !important; opacity: 1 !important; visibility: visible !important; z-index: auto !important; transform: none !important; transition: none !important; pointer-events: none !important; margin: 0 0 2px 0 !important; } /* Beim Ueberfahren bleibt das Bild unveraendert stehen */ .button[style*="--dd-img"]:hover::after, a.button[style*="--dd-img"]:hover::after { background-image: var(--dd-img) !important; background-position: var(--dd-imgpos, center) !important; opacity: 1 !important; transform: none !important; left: auto !important; } /* --- Untertitel, nur wenn zusaetzlich gesetzt --- */ .button[style*="--dd-img"][style*="--dd-sub"]::before, a.button[style*="--dd-img"][style*="--dd-sub"]::before { content: var(--dd-sub) !important; position: static !important; inset: auto !important; top: auto !important; left: auto !important; order: 3 !important; flex: 0 0 100% !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; background: none !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 400 !important; text-align: center !important; color: rgba(255,255,255,.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.45) !important; opacity: 1 !important; z-index: auto !important; transform: none !important; transition: none !important; pointer-events: none !important; } .button[style*="--dd-img"][style*="--dd-sub"]:hover::before, a.button[style*="--dd-img"][style*="--dd-sub"]:hover::before { left: auto !important; transform: none !important; } /* --- Symbol und Text --- */ .button[style*="--dd-img"] .icon, .button[style*="--dd-img"] i, .button[style*="--dd-img"] img, a.button[style*="--dd-img"] .icon, a.button[style*="--dd-img"] i, a.button[style*="--dd-img"] img { display: inline-block !important; /* Bewusst 0: Der Titeltext ist ein reiner Textknoten und zaehlt automatisch als 0. Bei gleichem Wert entscheidet die Reihenfolge im Quelltext — und dort steht das Symbol vor dem Text, also links. Mit "1" landete es dahinter, was auf dem Handy sichtbar wurde. */ order: 0 !important; width: 22px !important; height: 22px !important; max-height: 22px !important; font-size: 21px !important; flex: 0 0 auto !important; margin: 0 !important; opacity: 1 !important; } /* Symbol ausblenden, wenn --dd-noicon gesetzt ist */ .button[style*="--dd-noicon"] .icon, .button[style*="--dd-noicon"] i, .button[style*="--dd-noicon"] img, a.button[style*="--dd-noicon"] .icon, a.button[style*="--dd-noicon"] i, a.button[style*="--dd-noicon"] img { display: none !important; } /* ========================================================================== XL-Kachel: Feinabstimmung 1) Symbol und Titel auf eine gemeinsame Achse. Das Symbol brachte eine eigene Zeilenhoehe mit, die nicht zur Textzeile passte — dadurch sassen beide leicht versetzt. line-height: 1 legt das Symbol exakt auf seine Glyphenhoehe. 2) Mehr Luft rundum. Der Rahmen um das Bild ist jetzt auf allen Seiten gleich breit (14 px), zwischen Bild und Textzeile liegen 12 px. ========================================================================== */ .button[style*="--dd-img"], a.button[style*="--dd-img"] { padding: 14px !important; row-gap: 12px !important; column-gap: 10px !important; align-items: center !important; } .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { margin: 0 !important; } .button[style*="--dd-img"] .icon, .button[style*="--dd-img"] i, .button[style*="--dd-img"] img, a.button[style*="--dd-img"] .icon, a.button[style*="--dd-img"] i, a.button[style*="--dd-img"] img { line-height: 1 !important; align-self: center !important; vertical-align: middle !important; position: relative !important; top: 0 !important; } /* ========================================================================== Eigenes Symbol pro Link --dd-icon: url("/assets/img/mein-symbol.png"); Ersetzt das kleine Symbol neben dem Titel durch eine eigene Datei. LinkStack bietet dafuer keine Oberflaeche — das Feld im Button-Editor erwartet nur Namen aus der eingebauten Symbolbibliothek. Funktioniert bei allen Kacheltypen. Das urspruengliche Symbol wird ausgeblendet, die eigene Datei tritt an seine Stelle. Empfehlung: Datei auf der eigenen NAS ablegen und einen kurzen Pfad verwenden. Das Feld fuer eigenes CSS ist auf 255 Zeichen begrenzt — lange Adressen fremder Server sprengen das schnell. ========================================================================== */ /* Fall 1: Das Symbol ist eine Bilddatei () */ .button[style*="--dd-icon"] img, a.button[style*="--dd-icon"] img, .button[style*="--dd-icon"] img.icon, a.button[style*="--dd-icon"] img.icon { content: var(--dd-icon) !important; display: inline-block !important; width: 22px !important; height: 22px !important; max-height: 22px !important; object-fit: contain !important; flex: 0 0 auto !important; opacity: 1 !important; } /* Fall 2: Das Symbol ist ein Schriftzeichen () */ .button[style*="--dd-icon"] i, a.button[style*="--dd-icon"] i { font-size: 0 !important; line-height: 1 !important; width: 22px !important; height: 22px !important; display: inline-block !important; flex: 0 0 auto !important; } .button[style*="--dd-icon"] i::before, a.button[style*="--dd-icon"] i::before { content: "" !important; display: block !important; width: 22px !important; height: 22px !important; background-image: var(--dd-icon) !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)) !important; } /* ========================================================================== Hintergrund: feste Ebene auch auf Touchgeraeten Aus einer frueheren Phase stammt eine Regel, die den Hintergrund auf Geraeten ohne Mauszeiger bewusst mitlaufen liess — damals als Ausweg gegen Spruenge beim Ein- und Ausblenden der Adressleiste. Inzwischen liegt der Hintergrund auf einer eigenen fest positionierten Ebene (body::before), die unabhaengig davon funktioniert. Die alte Ausnahme wird hier abschliessend aufgehoben, damit der Hintergrund auf jedem Geraet stehen bleibt und nur die Glaskacheln darueber scrollen. ========================================================================== */ body { background-size: 0 0 !important; background-attachment: scroll !important; } body::before { content: "" !important; display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: -10 !important; pointer-events: none !important; background-image: inherit !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; /* Bewusst ohne erzwungene Beschleunigung — das hatte in Safari am Rechner zu Ruckeln beim Scrollen gefuehrt. */ transform: none !important; will-change: auto !important; } /* ========================================================================== iPad: fest verankerter Hintergrund URSACHE: Weiter oben wird seitliches Ueberlaufen auf der obersten Ebene unterbunden (html + body, overflow-x: hidden). Das stammt aus der Korrektur gegen die weisse Linie auf Firefox Android. Auf iPadOS ist das ein bekannter Stolperstein: Sobald das Wurzelelement eine solche Sperre traegt, verlieren fest positionierte Elemente ihre Verankerung und scrollen mit dem Inhalt mit. Da Firefox auf dem iPad intern dieselbe Technik nutzt wie Safari, tritt es dort in beiden Browsern auf — auf allen anderen Geraeten dagegen nicht. LOESUNG: Die Sperre wird auf der obersten Ebene aufgehoben und bleibt nur am Seitenkoerper bestehen. Das reicht, um seitliches Scrollen zu verhindern, ohne die feste Verankerung zu zerstoeren. ========================================================================== */ html { overflow-x: visible !important; max-width: none !important; width: auto !important; } body { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* ========================================================================== ZURUECKGENOMMEN: Aenderung an der Ueberlaufsperre Der vorherige Versuch (overflow-x auf der obersten Ebene freigeben) sollte den mitscrollenden Hintergrund auf dem iPad beheben. Er hat dort nichts bewirkt, dafuer aber auf Android starkes Ruckeln verursacht. Deshalb wird der bewaehrte Zustand hier wiederhergestellt: Sperre auf beiden Ebenen, so wie sie vor dem Versuch war. Das Verhalten auf dem iPad bleibt damit bestehen — dort scrollt der Hintergrund mit. Siehe technischer Teil der Dokumentation. ========================================================================== */ html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } /* ========================================================================== iOS/iPadOS: fest verankerter Hintergrund — zweiter Anlauf HINTERGRUND: Safari auf iPhone und iPad unterstuetzt "background-attachment: fixed" nicht. Deshalb liegt der Hintergrund bei uns bereits auf einer fest positionierten Ebene (body::before) — das ist der empfohlene Weg. WARUM ES TROTZDEM NICHT GRIFF: Auf html und body liegt eine Sperre gegen seitliches Scrollen (overflow-x: hidden). Auf iOS macht diese Sperre aus fest positionierten Elementen wieder mitscrollende. Beim letzten Versuch hatten wir die Sperre ganz entfernt — das brachte auf dem iPad nichts und liess Android ruckeln. LOESUNG: "overflow-x: clip" statt "hidden". Beide verhindern seitliches Scrollen, aber "clip" erzeugt keinen eigenen Scrollbereich — und genau der war die Ursache. Browser ohne Unterstuetzung nutzen weiterhin "hidden" (Zeile davor), es geht also nichts verloren. Zusaetzlich bekommt die Ebene eine feste Hoehe statt einer Bodenverankerung: Auf iOS aendert sich die Fensterhoehe beim Ein- und Ausblenden der Adressleiste, was eine Verankerung am unteren Rand unruhig macht. ========================================================================== */ html, body { overflow-x: hidden !important; /* Rueckfallebene */ overflow-x: clip !important; /* bevorzugt, kein Scrollbereich */ width: 100% !important; max-width: 100% !important; } body::before { content: "" !important; display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100vh !important; z-index: -10 !important; pointer-events: none !important; background-image: inherit !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; transform: none !important; will-change: auto !important; } /* ========================================================================== iOS: Sperre gegen seitliches Scrollen entfernt BEFUND (durch Test bestaetigt): Eine minimale Testseite mit derselben Technik funktioniert auf dem iPhone einwandfrei. Der einzige Unterschied zum Theme war die Sperre gegen seitliches Scrollen auf html und body. Auf iOS macht diese Sperre aus fest positionierten Elementen wieder mitscrollende — deshalb wanderte der Hintergrund mit. Die Sperre stammte aus der Korrektur gegen die weisse Linie auf Firefox Android. Deren tatsaechliche Ursache war jedoch "max-width: 100vw" (die Scrollleiste mitgerechnet), was laengst auf 100% geaendert wurde. Die Sperre ist damit ueberfluessig. Falls doch wieder seitliches Scrollen auftritt: nicht die Sperre zurueckholen, sondern das ueberlaufende Element suchen. ========================================================================== */ html, body { overflow-x: visible !important; width: auto !important; max-width: 100% !important; } body { width: 100% !important; } /* ========================================================================== Hintergrund: alte Ebene abschalten Die Ebene wird jetzt per Skript direkt ins Dokument gelegt (siehe tiles.js), ausserhalb des Seitenkoerpers. Die bisherige Ebene ueber body::before wird deshalb stillgelegt, damit das Bild nicht doppelt gezeichnet wird. ========================================================================== */ body::before { display: none !important; content: none !important; } body { background-size: 0 0 !important; } /* ========================================================================== Seitenkoerper zeichnet den Hintergrund nicht mehr selbst BEFUND: Ein Test mit unserem Stylesheet auf einer minimalen Seite zeigte einen korrekt stehenden Hintergrund. Unsere Regeln sind also nicht die Ursache. Was auf dem iPhone mitscrollt, ist der Hintergrund, den LinkStack direkt am Seitenkoerper setzt — mit "background-attachment: fixed", das iOS nicht unterstuetzt. Unsere bisherigen Gegenanweisungen zielten auf "body" und waren damit gleich stark wie die von LinkStack. Bei Gleichstand entscheidet die Ladereihenfolge, und die ist hier nicht verlaesslich. LOESUNG: "html body" ist praeziser als "body" und gewinnt dadurch unabhaengig von der Reihenfolge. Der Seitenkoerper zeichnet damit gar nichts mehr, sichtbar ist nur noch unsere eigene Ebene (siehe tiles.js), die ausserhalb des Seitenkoerpers liegt und deshalb auf allen Geraeten stehen bleibt. ========================================================================== */ html body { background-image: none !important; background-size: 0 0 !important; background-attachment: scroll !important; background-color: transparent !important; } html { background-color: #05070C !important; } /* ========================================================================== Waagerechten Ueberlauf verhindern + Scrollbalken gestalten Die Sperre gegen seitliches Scrollen kommt zurueck, aber NUR am Seitenkoerper. Am Dokument (html) darf sie nicht stehen — dort liegt jetzt die feste Hintergrundebene, und eine Sperre dort wuerde sie auf iOS wieder mitscrollen lassen. ========================================================================== */ html { overflow-x: visible !important; } body { overflow-x: hidden !important; max-width: 100% !important; width: 100% !important; } /* --- Scrollbalken im Glasdesign ---------------------------------------- */ /* Firefox */ html { scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.45) transparent !important; } /* Chrome, Safari, Edge */ ::-webkit-scrollbar { width: 10px !important; height: 10px !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { border-radius: 999px !important; background: rgba(255,255,255,.28) !important; border: 2px solid transparent !important; background-clip: padding-box !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; backdrop-filter: blur(8px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45) !important; } ::-webkit-scrollbar-corner { background: transparent !important; } /* ========================================================================== Scrollverhalten auf Touchgeraeten korrigiert ZWEI PROBLEME AUS DER LETZTEN AENDERUNG: 1) Hakeliges Scrollen auf Android "overflow-x: hidden" erzeugt am Seitenkoerper einen eigenen Scrollbereich. Auf Mobilgeraeten kostet das Leistung. "overflow-x: clip" verhindert seitliches Scrollen genauso, erzeugt aber KEINEN Scrollbereich — dadurch bleibt das Scrollen fluessig. Die Zeile davor bleibt als Rueckfallebene fuer aeltere Browser. 2) Dauerhaft sichtbarer Scrollbalken Sobald der Balken gestaltet wird, verliert er auf manchen Systemen sein automatisches Ausblenden. Die Gestaltung gilt deshalb nur noch auf Geraeten mit echtem Mauszeiger. Auf Handys und Tablets uebernimmt wieder das Betriebssystem — dort blendet der Balken von selbst aus, sobald nicht gescrollt wird. ========================================================================== */ body { overflow-x: hidden !important; /* Rueckfallebene */ overflow-x: clip !important; /* bevorzugt, kein Scrollbereich */ } /* Gestaltung der Scrollbalken zuruecknehmen */ ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner { all: unset; } html { scrollbar-width: auto !important; scrollbar-color: auto !important; } /* ... und nur auf Geraeten mit Mauszeiger wieder anwenden */ @media (hover: hover) and (pointer: fine) { html { scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.45) transparent !important; } ::-webkit-scrollbar { width: 10px !important; height: 10px !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { border-radius: 999px !important; background: rgba(255,255,255,.28) !important; border: 2px solid transparent !important; background-clip: padding-box !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45) !important; } ::-webkit-scrollbar-corner { background: transparent !important; } } /* ========================================================================== Seitenkoerper darf keinen eigenen Zeichenbereich aufspannen VERMUTUNG (erklaert zwei Symptome mit einer Ursache): Etwas setzt am Seitenkoerper eine Eigenschaft wie transform, filter oder isolation. Solche Eigenschaften spannen dort einen eigenen Zeichenbereich auf. Folgen: 1) Fest positionierte Elemente darin verlieren ihre Verankerung — das war das iPhone/iPad-Problem. 2) Der Milchglas-Effekt kann nur noch abtasten, was INNERHALB dieses Bereichs liegt. Unsere Hintergrundebene liegt aber ausserhalb (direkt am Dokument). Die Kacheln finden also nichts zum Verwischen und wirken wie klares Glas — genau das Chrome- und Edge-Verhalten auf dem Rechner. Die Fusszeile war nie betroffen, weil sie nicht vom Lichtbrechungs-Skript angefasst wurde. Falls diese Aenderung Nebenwirkungen hat: Block ersatzlos loeschen, dann ist der vorherige Zustand wiederhergestellt. ========================================================================== */ html body { transform: none !important; -webkit-transform: none !important; filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; perspective: none !important; isolation: auto !important; contain: none !important; will-change: auto !important; mix-blend-mode: normal !important; opacity: 1 !important; } /* ========================================================================== Milchglas in Chrome und Edge: isolation entfernt BEFUND (durch Vergleich gefunden): Das Profilbild zeigt in Chrome korrektes Milchglas, die Kacheln nicht. Der Unterschied: Die Kacheln tragen "isolation: isolate". Diese Anweisung spannt einen eigenen Zeichenbereich auf. Der Milchglas-Effekt kann dann nur noch abtasten, was innerhalb dieses Bereichs liegt — und dort liegt nichts. Ergebnis: klares Glas. Firefox und Safari gehen damit grosszuegiger um, deshalb fiel es dort nie auf. "isolation" war urspruenglich noetig, damit der Glanzstreifen (::before, z-index: -1) hinter dem Text bleibt, aber sichtbar. Ohne die Anweisung wuerde der Streifen hinter die Kachelflaeche rutschen und verschwinden. Er wandert deshalb auf dieselbe Ebene wie der Inhalt — sichtbar bleibt er, er liegt nur minimal anders. RUECKGAENGIG MACHEN: Diesen Block loeschen. ========================================================================== */ .button, button, a.button, .social-hover { isolation: auto !important; } /* Glanzstreifen auf die Inhaltsebene heben, damit er ohne "isolation" sichtbar bleibt. Er ist durchscheinend und stoert den Text nicht. */ .button::before, button::before, a.button::before, .social-hover::before { z-index: 0 !important; } /* Lichtkuppel ebenso */ .button::after, button::after, a.button::after, .social-hover::after { z-index: 0 !important; } /* Bei Bild-Kacheln traegt ::after das Bild — dort bleibt es unveraendert im Fluss, damit Bild, Symbol und Text in der richtigen Reihenfolge stehen. */ .button[style*="--dd-img"]::after, a.button[style*="--dd-img"]::after { z-index: auto !important; } /* ========================================================================== Letzter Versuch fuer Chrome/Edge: erzwungene Beschleunigung entfernen Die Kacheln tragen aus der Anfangszeit "transform: translateZ(0)" und "will-change: transform". Beides sollte das Scrollen beschleunigen. In Chrome kann das aber dazu fuehren, dass die Kachel auf eine eigene Zeichenschicht wandert — und dann findet der Milchglas-Effekt dort nichts mehr zum Verwischen. Der Hover-Effekt bleibt erhalten: Die Hover-Regeln setzen ihre eigenen Bewegungswerte und sind davon nicht betroffen. RUECKGAENGIG MACHEN: Diesen Block loeschen. ========================================================================== */ .button, button, a.button, .social-hover { transform: none !important; -webkit-transform: none !important; will-change: auto !important; backface-visibility: visible !important; } /* Firefox behaelt seine eigene Behandlung — dort war nie etwas kaputt und die isolierten Ebenen verhindern dort Zeichenfehler. */ @supports (-moz-appearance: none) { .button, button, a.button, .social-hover, .footer { transform: translateZ(0) !important; will-change: transform !important; backface-visibility: hidden !important; } }