/*
* Cassandras — Drop-Layout.
* Struktur steckt in den Vorlagen und Mustern. Hier steht nur, wie sie aussieht.
*/
/* ============================================================
Schriften — lokal im Theme, kein Aufruf an Google.
Sie stehen hier und nicht nur in der theme.json, weil in der
Schriftbibliothek von WordPress noch Einträge mit denselben
Namen liegen. Die hätten sonst Vorrang.
============================================================ */
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/anton-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Anton";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/anton-400-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Die vier Schrift-Steckplätze des Themes neu belegen. Dadurch greifen
auch alle Blöcke, die im Editor "Display", "Lesetext", "Signal" oder
"Protokoll" zugewiesen bekommen haben, ohne Änderung an den Vorlagen. */
:root,
body,
.editor-styles-wrapper {
--wp--preset--font-family--display: Anton, "Arial Narrow", ui-sans-serif, system-ui, sans-serif !important;
--wp--preset--font-family--lesetext: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
--wp--preset--font-family--signal: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
--wp--preset--font-family--protokoll: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
body,
.welt-warenhaus,
.welt-glitch {
font-family: var(--wp--preset--font-family--lesetext);
}
:root {
--cs-signal: #FF4D0F;
--cs-signal-hell: #FF8A3D;
--cs-grund: #0B0B0C;
--cs-karte: #141416;
--cs-linie: #2A2A30;
--cs-linie-stark: #3A3A40;
--cs-hell: #F2F0EB;
--cs-gedaempft: #8E8E97;
--cs-gedaempft-hell: #B9B9C1;
}
/* ============================================================
Welt 1 — Warenhaus (Drop)
============================================================ */
.welt-warenhaus {
background: var(--cs-grund);
color: var(--cs-hell);
font-family: var(--wp--preset--font-family--lesetext);
}
.welt-warenhaus h1,
.welt-warenhaus h2,
.welt-warenhaus h3,
.welt-warenhaus h4,
.welt-warenhaus .wp-block-post-title,
.welt-warenhaus .wp-block-query-title {
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.welt-warenhaus .wp-block-post-title a { text-decoration: none; }
.welt-warenhaus .wp-block-post-title a:hover { color: var(--cs-signal); }
/* Fließtext behält seine Unterstreichung, Navigation nicht. */
.welt-warenhaus .wp-block-post-content a,
.welt-warenhaus .entry-content a { text-decoration: underline; text-underline-offset: 0.18em; }
/* ------------------------------------------------------------------
Laufband über dem Kopf
------------------------------------------------------------------ */
.cs-band p { margin: 0; }
.welt-warenhaus .cs-band {
height: auto;
overflow: visible;
border: 0;
background: var(--cs-signal) !important;
color: var(--cs-grund) !important;
padding-block: 0.7rem !important;
}
.welt-warenhaus .cs-band::before,
.welt-warenhaus .cs-band::after { content: none; }
.welt-warenhaus .cs-band p {
max-width: none !important;
text-align: left !important;
font-weight: 700;
font-size: 0.6875rem !important;
letter-spacing: 0.16em !important;
display: flex;
align-items: center;
gap: 0.7em;
}
.welt-warenhaus .cs-band p::before {
content: "";
flex: 0 0 auto;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--cs-grund);
animation: cs-blip 2.4s infinite;
}
/* ------------------------------------------------------------------
Kopfbereich
------------------------------------------------------------------ */
.cs-kopf {
position: sticky;
top: 0;
z-index: 30;
background: var(--cs-grund);
}
.welt-warenhaus .cs-kopf { border-bottom-color: var(--cs-linie) !important; }
.cs-kopf-oben {
align-items: center;
gap: 1.4rem;
justify-content: flex-start !important;
padding-top: 1.05rem !important;
padding-bottom: 1.05rem !important;
}
.cs-kopf-oben .wp-block-site-title {
order: -1;
text-align: left;
margin: 0 0.4rem 0 0;
}
.cs-kopf-oben .wp-block-site-title a {
font-family: var(--wp--preset--font-family--display);
font-weight: 400 !important;
font-size: 1.32rem;
letter-spacing: 0.02em !important;
text-transform: uppercase;
text-decoration: none;
color: var(--cs-hell);
}
.cs-kopf-oben .wp-block-site-title a:hover { color: var(--cs-signal); }
.cs-kopf-oben .cs-region {
order: 1;
margin: 0 auto 0 0;
color: var(--cs-gedaempft) !important;
}
.cs-kopf-oben .cs-suche { order: 2; }
/* Metanavigation */
.welt-warenhaus .cs-meta { border-top-color: var(--cs-linie) !important; }
.cs-meta,
.cs-meta > .wp-block-navigation,
.cs-meta .wp-block-navigation,
.cs-meta .wp-block-navigation__container {
justify-content: flex-start !important;
}
.cs-meta .wp-block-navigation__container { gap: 0; }
.cs-meta .wp-block-navigation-item__content {
display: block;
padding: 0.85rem 0;
margin-right: 1.9rem;
font-weight: 700;
text-decoration: none;
color: var(--cs-hell);
border-bottom: 2px solid transparent;
}
.cs-meta .wp-block-navigation-item__content:hover,
.cs-meta .current-menu-item .wp-block-navigation-item__content {
color: var(--cs-signal);
border-bottom-color: var(--cs-signal);
}
/* Kategorien als Pillen */
.welt-warenhaus .cs-kats {
background: var(--cs-grund) !important;
border-top-color: var(--cs-linie) !important;
}
.cs-kats .wp-block-navigation__container {
gap: 0.5rem;
overflow-x: auto;
flex-wrap: nowrap;
padding-block: 0.95rem;
scrollbar-width: none;
}
.cs-kats .wp-block-navigation__container::-webkit-scrollbar { display: none; }
.cs-kats .wp-block-navigation-item__content {
display: block;
white-space: nowrap;
padding: 0.55rem 1.15rem;
border: 1px solid var(--cs-linie-stark);
border-radius: 999px;
color: var(--cs-gedaempft);
font-weight: 700;
letter-spacing: 0.09em !important;
text-decoration: none;
transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.cs-kats .wp-block-navigation-item__content:hover,
.cs-kats .current-menu-item .wp-block-navigation-item__content {
background: var(--cs-signal);
border-color: var(--cs-signal);
color: var(--cs-grund);
}
/* Suchfeld */
.cs-suche .wp-block-search__input {
border: 1px solid var(--cs-linie-stark);
border-radius: 999px;
background: transparent;
padding: 0.6rem 1rem;
color: var(--cs-hell);
letter-spacing: 0.06em;
}
.cs-suche .wp-block-search__input::placeholder {
color: var(--cs-gedaempft);
text-transform: uppercase;
letter-spacing: 0.13em;
font-size: 0.7rem;
}
.cs-suche .wp-block-search__input:focus {
outline: 2px solid var(--cs-signal);
outline-offset: 1px;
}
.welt-glitch .cs-suche .wp-block-search__input {
background: var(--wp--preset--color--flaeche);
border-color: var(--wp--preset--color--linie-nacht);
color: var(--wp--preset--color--licht);
}
/* ------------------------------------------------------------------
Bühne
------------------------------------------------------------------ */
.cs-buehne { min-height: 76vh !important; position: relative; }
.cs-buehne .wp-block-cover__background {
background-color: var(--cs-grund) !important;
opacity: 0.5 !important;
}
.cs-buehne::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(11, 11, 12, 0.92) 0%, rgba(11, 11, 12, 0.45) 42%, transparent 70%);
}
.cs-buehne .wp-block-cover__inner-container {
max-width: 1040px;
margin-inline: 0;
position: relative;
z-index: 2;
}
.cs-buehne .cs-oberzeile {
margin-bottom: 1.1rem;
color: var(--cs-signal) !important;
font-weight: 700;
}
.cs-buehne h1 { line-height: 0.84; margin-bottom: 1rem; }
.cs-buehne p { max-width: 46ch; }
.cs-buehne .wp-block-button__link {
font-family: var(--wp--preset--font-family--display) !important;
font-size: 1.0625rem !important;
letter-spacing: 0.05em !important;
text-transform: uppercase;
border-radius: 0;
padding: 1.05rem 2rem;
}
.cs-buehne .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background-color: var(--cs-signal) !important;
color: var(--cs-grund) !important;
}
.cs-buehne .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: var(--cs-hell) !important;
}
.cs-buehne .is-style-outline .wp-block-button__link {
border: 2px solid var(--cs-linie-stark);
color: var(--cs-hell);
background: transparent;
}
.cs-buehne .is-style-outline .wp-block-button__link:hover {
border-color: var(--cs-signal);
color: var(--cs-signal);
}
/* ------------------------------------------------------------------
Kategoriekacheln
------------------------------------------------------------------ */
.cs-kacheln .cs-kachel { border: 1px solid var(--cs-linie); }
.cs-kacheln .cs-kachel .wp-block-cover__background {
background-color: var(--cs-grund) !important;
opacity: 0.4 !important;
}
.cs-kacheln .cs-kachel h3 { margin: 0; }
.cs-kacheln .cs-kachel h3,
.cs-kacheln .cs-kachel h3 a {
color: var(--cs-hell) !important;
text-decoration: none;
}
.cs-kacheln .cs-kachel h3 a:hover { color: var(--cs-signal) !important; }
.cs-kacheln .cs-kachel::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(11, 11, 12, 0.85), transparent 58%);
}
.cs-kacheln .wp-block-cover__inner-container { position: relative; z-index: 2; }
/* ------------------------------------------------------------------
Produktraster
------------------------------------------------------------------ */
.cs-raster .wp-block-post {
background: var(--cs-karte);
border: 1px solid var(--cs-linie);
padding: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.cs-raster .wp-block-post > *:not(.wp-block-post-featured-image):not(.wp-block-read-more) {
padding-inline: 1rem;
margin-block: 0;
}
.cs-raster .wp-block-post > .wp-block-post-terms { padding-top: 1rem; }
.cs-raster .wp-block-post-featured-image { margin: 0; }
.cs-raster .wp-block-post-featured-image img {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
display: block;
filter: contrast(1.04) saturate(0.94);
}
.cs-raster .wp-block-post-title { margin: 0; line-height: 1.02; }
.cs-raster .wp-block-post-excerpt { color: var(--cs-gedaempft); flex: 1; font-size: 0.875rem; }
.cs-raster .wp-block-post-excerpt p { margin: 0; }
/* Weiterlesen ist im Drop ein echter Knopf. */
.cs-raster .wp-block-read-more {
display: block;
width: 100%;
box-sizing: border-box;
align-self: stretch;
margin-top: auto;
text-align: center;
background: var(--cs-signal);
color: var(--cs-grund);
font-family: var(--wp--preset--font-family--display);
font-size: 1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border: 0;
padding: 0.95rem 1rem;
transition: background-color 0.14s ease;
}
.cs-raster .wp-block-read-more:hover,
.cs-raster .wp-block-read-more:focus-visible {
background: var(--cs-hell);
color: var(--cs-grund);
}
/* ------------------------------------------------------------------
Handlungs-Button auf der Produktseite
------------------------------------------------------------------ */
.cs-cta { margin-top: var(--wp--preset--spacing--40); }
.cs-cta__link {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
background: var(--cs-signal);
color: var(--cs-grund);
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.25rem, 2.2vw, 1.7rem);
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
border: 0;
padding: 1.3rem 1.5rem;
transition: background-color 0.14s ease;
}
.cs-cta__link:hover,
.cs-cta__link:focus-visible { background: var(--cs-hell); color: var(--cs-grund); }
.cs-cta__link--enable {
background: var(--wp--preset--color--moeglich);
color: var(--cs-hell);
}
.cs-cta__link--enable:hover,
.cs-cta__link--enable:focus-visible {
background: var(--cs-hell);
color: var(--cs-grund);
}
/* ------------------------------------------------------------------
Aufklappbare Abschnitte statt Reiter
------------------------------------------------------------------ */
.welt-warenhaus .wp-block-details {
border-top: 1px solid var(--cs-linie);
padding-block: 1.1rem;
}
.welt-warenhaus .wp-block-details:last-of-type { border-bottom: 1px solid var(--cs-linie); }
.welt-warenhaus .wp-block-details summary {
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.01em;
cursor: pointer;
}
.welt-warenhaus .wp-block-details summary:hover { color: var(--cs-signal); }
/* ------------------------------------------------------------------
Vertrauensband
------------------------------------------------------------------ */
.welt-warenhaus .cs-vertrauen {
border-color: var(--cs-linie) !important;
}
.cs-vertrauen h3 {
font-family: var(--wp--preset--font-family--protokoll) !important;
font-size: 0.6875rem !important;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--cs-signal);
}
.cs-vertrauen p { color: var(--cs-gedaempft) !important; }
/* ------------------------------------------------------------------
Glitch-Teaser auf der Startseite
------------------------------------------------------------------ */
.cs-glitchteaser .wp-block-post {
background: var(--wp--preset--color--flaeche);
color: var(--wp--preset--color--licht);
border: 1px solid var(--wp--preset--color--linie-nacht);
padding: 0 0 var(--wp--preset--spacing--30);
}
.cs-glitchteaser .wp-block-post-featured-image img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
filter: saturate(0.55) contrast(1.1) brightness(0.72);
}
.cs-glitchteaser .wp-block-post-terms,
.cs-glitchteaser .wp-block-post-title,
.cs-glitchteaser .wp-block-post-excerpt { padding-inline: var(--wp--preset--spacing--30); }
.cs-glitchteaser .wp-block-post-title {
font-family: var(--wp--preset--font-family--display);
text-transform: uppercase;
text-shadow:
-0.028em 0.014em 0 rgba(255, 107, 44, 0.55),
0.028em -0.014em 0 rgba(63, 208, 224, 0.45);
}
.cs-glitchteaser .wp-block-post-title a { text-decoration: none; }
.cs-glitchteaser .wp-block-post-excerpt { color: var(--wp--preset--color--schatten); }
/* ------------------------------------------------------------------
Fußbereich
------------------------------------------------------------------ */
.welt-warenhaus .cs-fuss,
.cs-fuss {
background-color: var(--cs-grund) !important;
border-top: 1px solid var(--cs-linie);
}
.cs-fuss.has-papier-color { color: var(--cs-hell) !important; }
.cs-fuss .cs-fuss-titel {
color: var(--cs-signal) !important;
font-family: var(--wp--preset--font-family--protokoll) !important;
font-weight: 700 !important;
margin-bottom: 0.95rem;
}
.cs-fuss .cs-fuss-liste { list-style: none; padding: 0; margin: 0; }
.cs-fuss .cs-fuss-liste li { padding: 0.24rem 0; }
.cs-fuss .cs-fuss-liste a {
text-decoration: none;
color: var(--cs-gedaempft-hell);
}
.cs-fuss .cs-fuss-liste a:hover { color: var(--cs-signal); }
@media (max-width: 781px) {
.cs-kopf { position: static; }
.cs-kopf-oben .cs-region { display: none; }
.cs-kopf-oben { flex-wrap: wrap; }
.cs-kopf-oben .cs-suche { order: 3; flex: 1 1 100%; }
}
/* ============================================================
Welt 2 — Glitch (unverändert)
============================================================ */
.welt-glitch {
background: var(--wp--preset--color--nacht);
color: var(--wp--preset--color--licht);
font-family: var(--wp--preset--font-family--signal);
--cs-raster: 0.05;
--cs-korn: 0.2;
}
.welt-glitch h1,
.welt-glitch h2,
.welt-glitch h3,
.welt-glitch .wp-block-post-title {
font-family: var(--wp--preset--font-family--display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.012em;
line-height: 0.94;
}
.welt-glitch a { color: var(--wp--preset--color--kalt); }
.welt-glitch .wp-block-post-excerpt,
.welt-glitch .wp-block-post-date { color: var(--wp--preset--color--schatten); }
.welt-glitch .wp-block-post-featured-image img { filter: contrast(1.1) saturate(0.85); }
.welt-glitch .wp-block-separator,
.welt-glitch hr { border-color: var(--wp--preset--color--linie-nacht); }
.welt-glitch::before {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(233, 228, 219, var(--cs-raster)) 0 1px,
transparent 1px 5px
);
}
.welt-glitch::after {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: var(--cs-korn);
background-image: url("data:image/svg+xml;utf8,");
}
.welt-glitch > * { position: relative; z-index: 2; }
.welt-glitch hr.wp-block-separator {
border: 0;
border-top: 1px solid var(--wp--preset--color--linie-nacht);
opacity: 1;
}
.welt-glitch h1,
.welt-glitch h2,
.welt-glitch h3,
.welt-glitch .wp-block-post-title,
.welt-glitch .cs-titel-glitch,
.welt-glitch .wp-block-query-title {
text-shadow:
-0.028em 0.014em 0 rgba(255, 107, 44, 0.55),
0.028em -0.014em 0 rgba(63, 208, 224, 0.45);
}
.welt-glitch .wp-block-post-title a { text-decoration: none; }
.welt-glitch .wp-block-post-title a:hover,
.welt-glitch .wp-block-post-title a:focus-visible {
text-shadow:
-0.05em 0.024em 0 rgba(255, 107, 44, 0.8),
0.05em -0.024em 0 rgba(63, 208, 224, 0.7);
}
/* Signalanzeige im Glitch-Kopf */
.cs-signal {
display: flex;
align-items: center;
gap: 0.5em;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0;
}
.cs-signal::before {
content: "";
width: 0.45em;
height: 0.45em;
border-radius: 50%;
background: currentColor;
animation: cs-blip 2.4s infinite;
}
@keyframes cs-blip {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
/* Rauschband — gehört nur in den Glitch, nicht in den Shopkopf. */
.welt-glitch .cs-band {
height: 74px;
position: relative;
overflow: hidden;
background: var(--wp--preset--color--flaeche);
border-bottom: 1px solid var(--wp--preset--color--linie-nacht);
}
.welt-glitch .cs-band::before {
content: "";
position: absolute;
inset: -10%;
opacity: 0.55;
background-image: url("data:image/svg+xml;utf8,");
animation: cs-drift 9s steps(6) infinite;
}
.welt-glitch .cs-band::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, transparent 34%, rgba(255, 107, 44, 0.5) 34.4%, transparent 35%),
linear-gradient(to bottom, transparent 61%, rgba(63, 208, 224, 0.55) 61.4%, transparent 62%);
}
@keyframes cs-drift {
from { transform: translateX(0); }
to { transform: translateX(-6%); }
}
/* ============================================================
Übertragungskopf (Block cassandras/transmission-header)
============================================================ */
.cs-tx {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--wp--preset--color--linie-nacht);
border-bottom: 1px solid var(--wp--preset--color--linie-nacht);
margin-block: var(--wp--preset--spacing--30);
}
.cs-tx__col { padding: var(--wp--preset--spacing--30); }
.cs-tx__col--future {
border-left: 1px solid var(--wp--preset--color--linie-nacht);
background: rgba(255, 107, 44, 0.045);
}
.cs-tx__label {
font-family: var(--wp--preset--font-family--protokoll);
font-size: 0.59rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0 0 0.8rem;
}
.cs-tx__col--now .cs-tx__label { color: var(--wp--preset--color--kalt); }
.cs-tx__col--future .cs-tx__label { color: var(--wp--preset--color--heiss); }
.cs-tx__lines {
font-family: var(--wp--preset--font-family--protokoll);
font-size: 0.72rem;
line-height: 1.9;
}
.cs-tx__row { display: block; }
.cs-tx__row em { font-style: normal; color: var(--wp--preset--color--schatten); }
.cs-tx__link {
display: inline-block;
margin-top: 0.4rem;
font-family: var(--wp--preset--font-family--protokoll);
font-size: 0.72rem;
color: var(--wp--preset--color--kalt);
text-decoration: none;
border-bottom: 1px solid rgba(63, 208, 224, 0.35);
}
.cs-tx__voice {
margin: 0.7rem 0 0;
font-family: var(--wp--preset--font-family--signal);
font-size: 0.94rem;
line-height: 1.35;
}
.cs-tx__voice span {
display: block;
font-family: var(--wp--preset--font-family--protokoll);
font-size: 0.59rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--schatten);
margin-bottom: 0.3rem;
}
.cs-tx__voice a { text-decoration: none; border-bottom: 1px solid currentColor; }
.welt-warenhaus .cs-tx { border-color: var(--cs-linie); }
.welt-warenhaus .cs-tx__col--future { border-left-color: var(--cs-linie); }
@media (max-width: 781px) {
.cs-tx { grid-template-columns: 1fr; }
.cs-tx__col--future { border-left: 0; border-top: 1px solid var(--wp--preset--color--linie-nacht); }
}
/* ============================================================
Cookie-Dialog (Complianz) im Drop-Gewand
Complianz setzt seine Farben inline, deshalb hier !important.
============================================================ */
.cmplz-cookiebanner {
background-color: var(--cs-grund) !important;
color: var(--cs-hell) !important;
border: 2px solid var(--cs-signal) !important;
border-radius: 0 !important;
box-shadow: 12px 12px 0 rgba(255, 77, 15, 0.22) !important;
font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif !important;
max-width: 560px !important;
padding: 1.6rem !important;
}
.cmplz-cookiebanner .cmplz-header {
border: 0 !important;
padding-bottom: 0.2rem !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
/* Complianz baut den Kopf als Raster: Logo | Titel | Schließen.
Ohne Logo bleibt links sonst eine 100px breite Lücke stehen. */
grid-template-columns: 0 1fr 40px !important;
column-gap: 0 !important;
}
.cmplz-cookiebanner .cmplz-logo { display: none !important; }
.cmplz-cookiebanner .cmplz-title {
font-family: Anton, "Arial Narrow", sans-serif !important;
font-weight: 400 !important;
font-size: 1.75rem !important;
line-height: 0.95 !important;
letter-spacing: 0.005em !important;
text-transform: uppercase !important;
text-align: left !important;
color: var(--cs-hell) !important;
margin: 0 auto 0 0 !important;
max-width: none !important;
flex: 1 1 auto !important;
}
.cmplz-cookiebanner .cmplz-divider {
background-color: var(--cs-linie) !important;
border-color: var(--cs-linie) !important;
height: 1px !important;
}
.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-message {
color: var(--cs-gedaempft-hell) !important;
font-size: 0.875rem !important;
line-height: 1.55 !important;
text-align: left !important;
}
.cmplz-cookiebanner .cmplz-close {
color: var(--cs-gedaempft) !important;
opacity: 1 !important;
}
.cmplz-cookiebanner .cmplz-close:hover,
.cmplz-cookiebanner .cmplz-close:focus-visible { color: var(--cs-signal) !important; }
.cmplz-cookiebanner .cmplz-buttons {
gap: 0.6rem !important;
margin-top: 0.4rem !important;
}
.cmplz-cookiebanner .cmplz-btn {
border-radius: 0 !important;
border: 2px solid transparent !important;
font-family: Anton, "Arial Narrow", sans-serif !important;
font-weight: 400 !important;
font-size: 1rem !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
padding: 0.8rem 1.4rem !important;
min-height: 48px !important;
box-shadow: none !important;
transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
background-color: var(--cs-signal) !important;
border-color: var(--cs-signal) !important;
color: var(--cs-grund) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:focus-visible {
background-color: var(--cs-hell) !important;
border-color: var(--cs-hell) !important;
color: var(--cs-grund) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
background-color: transparent !important;
border-color: var(--cs-linie-stark) !important;
color: var(--cs-hell) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:focus-visible,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:focus-visible,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:focus-visible {
border-color: var(--cs-signal) !important;
color: var(--cs-signal) !important;
}
.cmplz-cookiebanner .cmplz-links,
.cmplz-cookiebanner .cmplz-documents { justify-content: flex-start !important; }
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner .cmplz-documents a {
font-family: "Space Mono", ui-monospace, monospace !important;
font-size: 0.6875rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--cs-gedaempft) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--cs-linie-stark) !important;
}
.cmplz-cookiebanner .cmplz-links a:hover,
.cmplz-cookiebanner .cmplz-link:hover,
.cmplz-cookiebanner .cmplz-documents a:hover {
color: var(--cs-signal) !important;
border-bottom-color: var(--cs-signal) !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
background-color: var(--cs-karte) !important;
border: 1px solid var(--cs-linie) !important;
border-radius: 0 !important;
}
.cmplz-cookiebanner .cmplz-category-title,
.cmplz-cookiebanner .cmplz-always-active {
font-family: "Space Mono", ui-monospace, monospace !important;
font-size: 0.75rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--cs-hell) !important;
}
.cmplz-cookiebanner .cmplz-description,
.cmplz-cookiebanner .cmplz-description span { color: var(--cs-gedaempft) !important; }
.cmplz-cookiebanner .cmplz-category-toggle { color: var(--cs-gedaempft) !important; }
/* Schalter „Zustimmung verwalten" am Seitenrand */
#cmplz-manage-consent .cmplz-manage-consent,
.cmplz-manage-consent {
background-color: var(--cs-grund) !important;
color: var(--cs-signal) !important;
border: 1px solid var(--cs-signal) !important;
border-radius: 0 !important;
font-family: "Space Mono", ui-monospace, monospace !important;
font-size: 0.6875rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}