/* ================================================================
rys.css — RockyourStudium Ghost-Theme
Marken-CSS · Light Mode = Default
----------------------------------------------------------------
Aufbau:
1 Fonts (self-hosted, kein Google-CDN)
2 Brand-Tokens (aus brand-rys-ghost.css) + Code-Stage-Tokens
3 Reset / Base / Typografie
4 Gradient (animiert + statisch, SVG, Icon-Maske)
5 Buttons · Karten · Pills · Layout · Nav · Formulare · Utils
6 Seiten-Komponenten (Logo, Hero, Sektionen, Footer …)
7 Code & Prompt (.gp-code / .gp-prompt)
8 Artikel-Prose + Ghost-Editor-Inhalte (Koenig-Cards)
Quelle der Marken-Tokens: brand-rys-ghost.css (EUIPO-Glühbirne, Spektrum; Rot/Orange als Anker).
================================================================ */
/* ----------------------------------------------------------------
1 — FONTS (self-hosted unter /assets/fonts/)
---------------------------------------------------------------- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/poppins-900.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }
/* ----------------------------------------------------------------
2 — BRAND TOKENS (Light Mode = Default)
---------------------------------------------------------------- */
:root {
/* Fonts — wie Gifted Procrastinator: Poppins + JetBrains Mono, kein Script-Font */
--font-display: 'Poppins', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Spacing */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px;
/* Border Radius */
--radius: 18px;
--radius-sm: 12px;
--radius-xs: 8px;
--radius-full: 999px;
/* Layout */
--maxw: 1180px;
--ease: cubic-bezier(.2, .7, .3, 1);
/* ---- Brand-Farben (modunabhängig) ---- */
/* Warme Anker — Rot & Orange tragen die Marke */
--c-red: #d31f1d; /* Rot — Primärfarbe */
--c-orange: #f07f01; /* Orange — Sekundärfarbe */
--c-amber: #ffc73a; /* Amber/Gold — aufgehelltes Orange für lebendigen Verlauf */
--c-red-d: #A6160F;
--c-orange-d: #C46700;
--c-amber-d: #D98300;
/* Spektrum-Pole — der frische Regenbogen-Bogen über die warmen Anker hinaus */
--c-magenta: #e8266f; /* Pink/Magenta — warmer Übergang, Karten-Akzent #1 */
--c-magenta-d: #b81655;
--c-lime: #7bc24a; /* Grün — lebt nur im Verlauf */
--c-teal: #15a7bb; /* Türkis — kühler Pol, Karten-Akzent „Pop" */
--c-teal-d: #117e8d;
/* Helles Rot für Text auf DUNKLEN Flächen (Accent/Links/Code) — WCAG AA */
--c-red-bright: #FF5A54;
/* Aliase (für Kompatibilität mit den GP-Komponenten-Mustern) */
--c-pink: var(--c-red);
--c-cyan: var(--c-orange);
--c-yellow: var(--c-amber);
--c-pink-d: var(--c-red-d);
--c-cyan-d: var(--c-orange-d);
--c-yellow-d: var(--c-amber-d);
/* Gradient — animiert (Spektrum: Pink → Rot → Orange → Gold → Grün → Türkis, gespiegelt für nahtlosen Loop) */
--grad: linear-gradient(90deg, #ff2e88, var(--c-red), var(--c-orange), var(--c-amber), var(--c-lime), #1fb6c9, var(--c-lime), var(--c-amber), var(--c-orange), var(--c-red), #ff2e88);
/* Gradient — statisch (Rot-Orange als Schwerpunkt in der Mitte) */
--grad-static: linear-gradient(120deg, #ff2e88 0%, var(--c-red) 20%, var(--c-orange) 42%, var(--c-amber) 60%, var(--c-lime) 80%, #1fb6c9 100%);
/* Gradient — Marken-Band (heller Spektrum-Bogen OHNE Tiefrot, gespiegelt für Loop —
dunkler Mono-Text bleibt auf jedem Stop lesbar) */
--grad-band: linear-gradient(90deg, #ff2e88, #f07f01, #ffc73a, #7bc24a, #1fb6c9, #7bc24a, #ffc73a, #f07f01, #ff2e88);
/* ---- Oberfläche & Text (Light Mode — warmes Creme) ---- */
--bg: #FFFCF9;
--surface: #FBF3EC;
--surface-2: #F4E7DC;
--line: #ECDCCE;
--ink: #1A1613;
--ink-soft: #5A4E45;
--ink-mute: #786C60;
--accent: var(--c-red-d);
--glow: .08;
/* ---- Code-Stage (bewusst modunabhängig dunkel — Code „sitzt" immer auf einem kleinen Bildschirm) ---- */
--code-bg: #0C0C10;
--code-bar: #16161C;
--code-ink: #ECECF2;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(26,12,4,.07), 0 1px 2px rgba(26,12,4,.04);
--shadow-md: 0 4px 16px -4px rgba(26,12,4,.10);
--shadow-lg: 0 20px 44px -14px rgba(26,12,4,.12);
--shadow-accent: 0 10px 30px -8px var(--c-red-d);
/* Hover-Schein für Gradient-Buttons — Pink + Türkis statt rotem Glow */
--shadow-grad: 0 12px 32px -10px color-mix(in srgb, var(--c-magenta) 52%, transparent), 0 9px 24px -12px color-mix(in srgb, var(--c-teal) 44%, transparent);
}
/* ---- Dark Mode (neutrales Anthrazit) ---- */
.dark,
[data-mode="dark"] {
--bg: #0E0E10;
--surface: #17171A;
--surface-2: #1F1F23;
--line: #2A2A30;
--ink: #FFFFFF;
--ink-soft: #C9BCB2;
--ink-mute: #8A7D72;
--accent: var(--c-red-bright);
--glow: .16;
--shadow-sm: 0 1px 3px rgba(0,0,0,.25);
--shadow-md: 0 4px 16px -4px rgba(0,0,0,.35);
--shadow-lg: 0 20px 44px -14px rgba(0,0,0,.45);
--shadow-accent: 0 10px 30px -8px var(--c-red);
}
/* ----------------------------------------------------------------
3 — RESET & BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--gh-font-body, var(--font-display));
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img, svg { display: block; max-width: 100%; }
/* height:auto schlägt das height-ATTRIBUT — sonst strecken sich Bilder, sobald
max-width sie verkleinert (Mobile!). CSS-Höhen (.post-card-media img …) gewinnen weiter. */
img { height: auto; }
::selection { background: var(--c-red); color: #fff; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* ----------------------------------------------------------------
4 — TYPOGRAFIE
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--gh-font-heading, var(--font-display));
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--ink);
}
h1 { font-size: clamp(36px, 7vw, 84px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(26px, 4vw, 44px); }
h3 { font-size: clamp(20px, 3vw, 28px); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { color: var(--ink-soft); line-height: 1.7; }
p + p { margin-top: 1em; }
small { font-size: 13px; color: var(--ink-mute); }
strong { font-weight: 700; color: var(--ink); }
code { font-family: var(--font-mono); font-size: .875em; }
.eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
}
.lead { font-size: 18px; color: var(--ink-soft); max-width: 640px; line-height: 1.65; }
/* ----------------------------------------------------------------
5 — GRADIENT — ANIMIERT
---------------------------------------------------------------- */
@keyframes rys-flow { to { background-position: 300% 50%; } }
.grad-text {
background: var(--grad);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rys-flow 6s linear infinite;
}
.grad-bg {
background: var(--grad);
background-size: 300% 100%;
animation: rys-flow 6s linear infinite;
}
.grad-border {
position: relative;
border-radius: var(--radius);
background: var(--surface);
z-index: 0;
}
.grad-border::before {
content: "";
position: absolute; inset: 0; z-index: -1;
border-radius: inherit; padding: 2px;
background: var(--grad);
background-size: 300% 100%;
animation: rys-flow 6s linear infinite;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* ----------------------------------------------------------------
6 — GRADIENT — STATISCH
---------------------------------------------------------------- */
.grad-text-static {
background: var(--grad-static);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.grad-bg-static { background: var(--grad-static); }
.grad-border-static {
position: relative;
border-radius: var(--radius);
background: var(--surface);
z-index: 0;
}
.grad-border-static::before {
content: "";
position: absolute; inset: 0; z-index: -1;
border-radius: inherit; padding: 2px;
background: var(--grad-static);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* ----------------------------------------------------------------
7 — ANIMIERTER SVG-GRADIENT (für inline-SVGs mit 3 Stops)
---------------------------------------------------------------- */
@keyframes rys-svg-s { 0%,100%{stop-color:#ffc73a} 33%{stop-color:#f07f01} 66%{stop-color:#d31f1d} }
.grad-svg-animated stop:nth-child(3) { animation: rys-svg-s 6s linear infinite 0s; }
.grad-svg-animated stop:nth-child(2) { animation: rys-svg-s 6s linear infinite -2s; }
.grad-svg-animated stop:nth-child(1) { animation: rys-svg-s 6s linear infinite -4s; }
.grad-icon-animated {
display: inline-block;
background: var(--grad);
background-size: 300% 100%;
animation: rys-flow 6s linear infinite;
-webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center;
mask-repeat: no-repeat; mask-size: contain; mask-position: center;
}
/* ----------------------------------------------------------------
8 — BUTTONS
---------------------------------------------------------------- */
.btn {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
cursor: pointer;
white-space: nowrap;
padding: 13px 26px;
border-radius: var(--radius-full);
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 9px;
transition: .25s var(--ease);
text-decoration: none;
}
.btn:focus-visible { outline-offset: 4px; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-lg { padding: 16px 34px; font-size: 17px; }
/* Roter Button: Default rot, beim Hover sanfter Crossfade zum Spektrum-Gradient */
.btn-primary { position: relative; z-index: 0; overflow: hidden; background: var(--c-red); color: #fff; }
.btn-primary::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--grad-static); opacity: 0; transition: opacity .28s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); color: #fff; box-shadow: var(--shadow-grad); }
.btn-primary:hover::before { opacity: 1; }
.btn-grad {
color: #fff;
background: var(--grad);
background-size: 300% 100%;
animation: rys-flow 6s linear infinite;
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: var(--shadow-grad); color: #fff; }
.btn-grad-static { color: #fff; background: var(--grad-static); border: none; }
.btn-grad-static:hover { transform: translateY(-2px); box-shadow: var(--shadow-grad); color: #fff; }
.btn-grad-static:focus, .btn-grad-static:focus-visible { outline: none; }
.btn-ghost { position: relative; z-index: 0; background: var(--surface); color: var(--ink); border-color: var(--line); }
/* Hover: Gradient-Rand einblenden + Gradient-Text — statt rotem Rand/Text */
.btn-ghost::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
background: var(--grad-static);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .25s var(--ease);
}
.btn-ghost:hover {
border-color: transparent;
background: var(--grad-static);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.btn-ghost:hover::before { opacity: 1; }
.btn-outline-grad {
position: relative; background: var(--bg); color: var(--ink); border: none;
}
.btn-outline-grad::before {
content: ""; position: absolute; inset: 0;
border-radius: inherit; padding: 2px;
background: var(--grad); background-size: 300% 100%;
animation: rys-flow 6s linear infinite;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.btn-outline-grad-static {
position: relative; background: var(--bg); color: var(--ink); border: none;
}
.btn-outline-grad-static::before {
content: ""; position: absolute; inset: 0;
border-radius: inherit; padding: 2px;
background: var(--grad-static);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* ----------------------------------------------------------------
9 — KARTEN
---------------------------------------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--space-6);
transition: .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--ink-mute); box-shadow: var(--shadow-md); }
.card-accent {
background: linear-gradient(180deg, var(--surface) 35%, color-mix(in srgb, var(--c-red) 10%, var(--surface)));
box-shadow: 0 14px 36px -20px color-mix(in srgb, var(--c-red) 50%, transparent);
}
/* Tool-/Beitrags-Karte — Akzentfarbe via --ca */
.tool-card {
--ca: var(--c-red);
--ca-d: var(--c-red-d);
position: relative;
border-radius: 22px;
padding: 26px;
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 35%, color-mix(in srgb, var(--ca) 16%, var(--surface)));
box-shadow: 0 18px 42px -26px color-mix(in srgb, var(--ca) 65%, transparent);
transition: .32s var(--ease);
display: flex; flex-direction: column; height: 100%;
}
/* Aurora-Schein pro Karte — in der jeweiligen Akzentfarbe, hinter der Karte als weicher Halo */
.tool-card::after {
content: ""; position: absolute; inset: -10% -7% -16% -7%; z-index: -1;
border-radius: inherit; pointer-events: none;
background: radial-gradient(62% 60% at 50% 28%, color-mix(in srgb, var(--ca) 32%, transparent), transparent 74%);
filter: blur(30px); opacity: .5;
transition: opacity .32s var(--ease);
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 28px 56px -22px color-mix(in srgb, var(--ca) 72%, transparent);
border-color: color-mix(in srgb, var(--ca) 45%, var(--line));
}
.tool-card:hover::after { opacity: .72; }
/* Akzent-Varianten (RYS-Namen + GP-kompatible Aliase) */
/* --ca-ink = akzentfarbener Text, der auf HELLER Fläche AA schafft (Dark nutzt das helle --ca) */
.tc-red, .tc-pink { --ca: var(--c-red); --ca-d: var(--c-red-d); --ca-ink: var(--c-red-d); }
.tc-orange, .tc-cyan { --ca: var(--c-orange); --ca-d: var(--c-orange-d); --ca-ink: #8F4C00; }
.tc-amber, .tc-yellow { --ca: var(--c-amber); --ca-d: var(--c-amber-d); --ca-ink: #6E5400; }
.tc-magenta { --ca: var(--c-magenta); --ca-d: var(--c-magenta-d); --ca-ink: var(--c-magenta-d); }
.tc-teal { --ca: var(--c-teal); --ca-d: var(--c-teal-d); --ca-ink: #0C5A66; }
/* Dark: Karten-Akzent-Text nutzt das helle --ca (Rot → red-bright, sonst zu dunkel auf Anthrazit) */
.dark .tool-card { --ca-ink: var(--ca); }
.dark .tc-red, .dark .tc-pink { --ca-ink: var(--c-red-bright); }
.tc-icon {
width: 54px; height: 54px; border-radius: 50%;
background: linear-gradient(140deg, var(--ca), var(--ca-d));
color: #fff; display: flex; align-items: center; justify-content: center;
}
.tc-badge {
display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
background: linear-gradient(135deg, var(--ca), var(--ca-d));
padding: 5px 11px; border-radius: var(--radius-full);
}
.tc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.tool-card h3 { font-size: 19px; margin-bottom: 8px; }
/* Titel nimmt beim Hover (der Karte oder des Titels) die Akzentfarbe der Karte an — statt global rot.
Greift für verlinkte (Beiträge/Themen) wie unverlinkte Titel (Tools). */
.tool-card h3, .tool-card h3 a { transition: color .2s var(--ease); }
/* Fallback --ca-d: die Grid-Rotation setzt nur --ca/--ca-d — ohne Fallback fiele
der Hover im Light Mode stumm aus (Dark setzt --ca-ink via .dark .tool-card). */
.tool-card:hover h3,
.tool-card:hover h3 a,
.tool-card h3 a:hover { color: var(--ca-ink, var(--ca-d)); }
.tool-card .tc-desc { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; flex: 1; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; }
.tc-tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); padding: 4px 9px; border-radius: var(--radius-full); }
.tc-btn {
width: 100%; padding: 13px; border: none; border-radius: var(--radius-full); cursor: pointer;
font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
background: linear-gradient(135deg, var(--ca), var(--ca-d));
transition: .3s var(--ease); text-align: center;
}
.tc-btn:hover { transform: translateY(-1px); color: #fff; }
/* Karten ohne Tags-Zeile (Themen/Tools): garantierter Abstand zwischen Text und Button,
damit sie nicht gedrängt wirken. Greift nicht bei Beitragskarten (dort steht .tc-tags davor). */
.tc-desc + .tc-btn { margin-top: 22px; }
/* ----------------------------------------------------------------
10 — BADGES / PILLS
---------------------------------------------------------------- */
.pill {
font-size: 13px; font-weight: 600;
padding: 5px 13px; border-radius: var(--radius-full);
border: 1px solid var(--line); display: inline-block;
}
.pill-red {
color: var(--c-red-d);
border-color: color-mix(in srgb, var(--c-red) 50%, transparent);
background: color-mix(in srgb, var(--c-red) 12%, transparent);
}
.pill-orange {
color: #8F4C00;
border-color: color-mix(in srgb, var(--c-orange) 50%, transparent);
background: color-mix(in srgb, var(--c-orange) 12%, transparent);
}
.pill-amber {
color: #6E5400;
border-color: color-mix(in srgb, var(--c-amber) 50%, transparent);
background: color-mix(in srgb, var(--c-amber) 12%, transparent);
}
/* Kategorie-/Themen-Pille bewusst neutral (warmes Grau) — ruhiger Gegenpol zur farbigen Karte */
.pill-accent {
color: var(--ink-soft);
border-color: var(--line);
background: color-mix(in srgb, var(--ink) 5%, transparent);
}
/* Dark Mode — die dunklen Akzent-Textfarben sind auf Anthrazit kaum lesbar:
Text aufhellen (mit Weiß mischen), Rand/Fläche etwas kräftiger. */
.dark .pill-red {
color: color-mix(in srgb, var(--c-red) 50%, #fff);
border-color: color-mix(in srgb, var(--c-red) 55%, transparent);
background: color-mix(in srgb, var(--c-red) 22%, transparent);
}
.dark .pill-orange {
color: color-mix(in srgb, var(--c-orange) 62%, #fff);
border-color: color-mix(in srgb, var(--c-orange) 55%, transparent);
background: color-mix(in srgb, var(--c-orange) 20%, transparent);
}
.dark .pill-amber {
color: var(--c-amber);
border-color: color-mix(in srgb, var(--c-amber) 55%, transparent);
background: color-mix(in srgb, var(--c-amber) 18%, transparent);
}
/* ----------------------------------------------------------------
11 — LAYOUT
---------------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--space-9) 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.aurora { position: relative; overflow: hidden; }
.aurora::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
opacity: calc(var(--glow) * 5.5);
background:
radial-gradient(680px 460px at 8% -8%, color-mix(in srgb, var(--c-magenta) 20%, transparent), transparent 72%),
radial-gradient(680px 460px at 92% -2%, color-mix(in srgb, var(--c-teal) 18%, transparent), transparent 72%),
radial-gradient(760px 520px at 50% 114%, color-mix(in srgb, var(--c-magenta) 10%, transparent), transparent 72%);
/* untere Kante weich auslaufen lassen, damit die Beleuchtung in die Seite zerfließt statt als Kasten zu enden */
-webkit-mask: linear-gradient(#000 50%, transparent 100%);
mask: linear-gradient(#000 50%, transparent 100%);
}
.aurora > * { position: relative; z-index: 1; }
.divider-grad { height: 2px; border: none; margin: 0; background: var(--grad); background-size: 300% 100%; animation: rys-flow 6s linear infinite; }
.divider-grad-static { height: 2px; border: none; margin: 0; background: var(--grad-static); }
/* ----------------------------------------------------------------
12 — NAVIGATION (sticky, mit Blur)
---------------------------------------------------------------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 10px; height: 66px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Nichts in der Nav darf zerquetscht werden (sonst kollabieren die Icon-Buttons) —
nur der Spacer ist flexibel. */
.nav-inner > * { flex: none; }
.nav-spacer { flex: 1; }
.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link {
font-size: 13px; font-weight: 500; color: var(--ink-soft);
padding: 7px 8px; border-radius: var(--radius-xs); transition: .2s;
white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link.active { color: var(--ink); font-weight: 700; }
/* Logo — Wortmarke mit Glühbirne; Hover swappt den Verlauf zwischen den Wortteilen */
.nav-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.nav-logo .logo-bulb { width: 28px; height: 28px; flex: none; }
.nav-logo .logo-g, .nav-logo .logo-p {
background: var(--grad-static);
-webkit-background-clip: text; background-clip: text;
transition: -webkit-text-fill-color .28s var(--ease), color .28s var(--ease);
}
.nav-logo .logo-g { -webkit-text-fill-color: var(--ink); color: var(--ink); }
.nav-logo .logo-p { -webkit-text-fill-color: transparent; color: transparent; }
.nav-logo:hover { color: var(--ink); }
.nav-logo:hover .logo-g { -webkit-text-fill-color: transparent; color: transparent; }
.nav-logo:hover .logo-p { -webkit-text-fill-color: var(--ink); color: var(--ink); }
.icon-btn {
width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); border: 1px solid var(--line);
color: var(--ink-soft); cursor: pointer; transition: .2s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-mute); }
.nav-burger { display: none; }
.nav-link-cta { display: none; }
/* ----------------------------------------------------------------
13 — FORMULARE
---------------------------------------------------------------- */
input, textarea, select {
font-family: var(--font-display); font-size: 16px; color: var(--ink);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 11px 16px; width: 100%; outline: none;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
-webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
input:focus, textarea:focus, select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
textarea { resize: vertical; min-height: 120px; }
label { font-size: 14px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; }
.form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.form-hint { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.form-error { font-size: 13px; color: var(--accent); margin-top: 4px; }
/* ----------------------------------------------------------------
14 — UTILITIES
---------------------------------------------------------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-accent { color: var(--accent); }
.text-mute { color: var(--ink-mute); }
.text-soft { color: var(--ink-soft); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.surface { background: var(--surface); }
.surface2 { background: var(--surface-2); }
.note {
background: color-mix(in srgb, var(--c-amber) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--c-amber) 40%, transparent);
border-radius: var(--radius-sm);
padding: 16px 18px; font-size: 14px; color: var(--ink);
}
.note strong { color: var(--c-amber-d); }
/* ================================================================
15 — SEITEN-KOMPONENTEN (Hero, Sektionen, Karten-Raster, Footer)
================================================================ */
/* ---- HERO ---- */
.hero { padding-top: var(--space-9); padding-bottom: var(--space-8); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { margin: 14px 0 0; overflow-wrap: break-word; }
.hero .lead { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--ink-mute); font-size: 14px; }
.hero-art { position: relative; }
.hero-disc {
position: absolute; inset: auto -8% -10% auto;
width: 64%; aspect-ratio: 1; border-radius: 50%;
background: linear-gradient(225deg, var(--c-red) 0%, var(--c-orange) 50%, var(--c-amber) 100%);
z-index: -1; opacity: .9; filter: blur(2px);
}
/* Leucht-Bühne für die Glühbirne */
.bulb-stage {
position: relative; aspect-ratio: 4 / 5;
border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%;
background: radial-gradient(120% 115% at 50% 30%, #ffffff 0%, var(--surface) 62%, var(--surface-2) 100%);
border: 1px solid var(--line); box-shadow: var(--shadow-lg);
display: grid; place-items: center; overflow: hidden;
}
.dark .bulb-stage {
background: radial-gradient(125% 120% at 50% 32%, #2a221c 0%, #1a140f 60%, #120d09 100%);
border-color: rgba(255,255,255,.06);
box-shadow: var(--shadow-lg), inset 0 0 60px rgba(0,0,0,.5);
}
/* Glühbirnen-Glow bewusst entfernt — die Farbe kommt jetzt vom .hero-disc dahinter. */
.hero-bulb {
position: relative; width: 66%; max-width: 300px;
filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--c-orange) 30%, transparent));
}
.sticky-tag {
position: absolute; z-index: 2;
background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-md);
border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 9px;
}
.sticky-tag .badge { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.badge.grad-bg-static { background: var(--grad-static); }
.tag-tl { top: 8%; left: -7%; }
.tag-br { bottom: 12%; right: -6%; }
/* ---- MARKEN-BAND (Marquee) — laufende Gradient-Zeile unterm Hero ----
Rein CSS: Band-Hintergrund fließt (rys-flow), die Zeile läuft (rys-marquee).
Pausiert bei Hover; steht still bei prefers-reduced-motion. */
.marquee {
overflow: hidden;
background: var(--grad-band);
background-size: 300% 100%;
animation: rys-flow 18s linear infinite;
}
.marquee-track { display: flex; width: max-content; animation: rys-marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { flex: none; display: flex; align-items: center; gap: 26px; padding: 12px 13px; }
.mq-item { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #17141A; white-space: nowrap; }
.mq-sep { font-size: 11px; color: rgba(23, 20, 26, .55); }
@keyframes rys-marquee { to { transform: translateX(-50%); } }
/* ---- SEKTIONS-KOPF ---- */
.sec-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--space-6); align-items: end; margin-bottom: var(--space-7); }
.sec-head h2 { margin-top: 12px; }
.sec-head p { margin-top: 0; }
@media (max-width: 820px) { .sec-head { grid-template-columns: 1fr; } }
/* ---- KARTEN-RASTER ---- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .proj-grid { grid-template-columns: 1fr; } }
/* Karten rotieren automatisch durch die Spektrum-Akzente (kein per-Card-Class nötig).
Magenta auf #1 → in jeder Sektion sichtbar; Türkis auf #4 → kühler „Pop" in 4er-Rastern. */
.proj-grid .tool-card:nth-child(4n+1) { --ca: var(--c-magenta); --ca-d: var(--c-magenta-d); }
.proj-grid .tool-card:nth-child(4n+2) { --ca: var(--c-red); --ca-d: var(--c-red-d); }
.proj-grid .tool-card:nth-child(4n+3) { --ca: var(--c-orange); --ca-d: var(--c-orange-d); }
.proj-grid .tool-card:nth-child(4n+4) { --ca: var(--c-teal); --ca-d: var(--c-teal-d); }
/* Beitragskarte (Bild oben + Text) */
.post-card-media { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: var(--surface-2); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter für Beiträge ohne Feature-Image (post-card & Featured-Block) */
.ph {
position: absolute; inset: 0; display: grid; place-items: center;
padding: 20px; text-align: center;
font-family: var(--font-mono); font-size: 13px; letter-spacing: .03em; color: var(--ink-mute);
background: linear-gradient(160deg, var(--surface-2), color-mix(in srgb, var(--c-orange) 12%, var(--surface-2)));
}
/* ---- HIGHLIGHT-BEITRAG (breite Karte) ---- */
.feature {
display: grid; grid-template-columns: .9fr 1.1fr; gap: 0;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
}
.feature-media { position: relative; min-height: 340px; background: var(--surface-2); }
.feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: var(--space-7); display: flex; flex-direction: column; justify-content: center; }
.feature-body h2 { margin: 16px 0 14px; }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } }
/* ---- ÜBER-MICH ---- */
.about { background: var(--surface); border-radius: var(--radius); padding: var(--space-8); position: relative; overflow: hidden; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
/* Name-Display in Poppins (Script-Font bewusst abgeschafft, 07/2026) */
.about-name { font-weight: 900; letter-spacing: -.03em; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin: 6px 0 18px; }
.about-art { position: relative; }
.about-photo {
position: relative;
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
aspect-ratio: 16 / 9;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Dark Mode: laufender Gradient-Ring hebt das Foto von der Karte ab */
.dark .about-photo::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
border-radius: inherit; padding: 2px;
background: var(--grad); background-size: 300% 100%;
animation: rys-flow 6s linear infinite;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }
/* ---- NEWSLETTER ---- */
.news {
position: relative; overflow: hidden; border-radius: var(--radius); padding: var(--space-8);
background:
radial-gradient(600px 300px at 100% 0%, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 70%),
radial-gradient(600px 300px at 0% 100%, color-mix(in srgb, var(--c-red) 16%, transparent), transparent 70%),
var(--surface);
border: 1px solid var(--line);
}
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.news-form { display: flex; gap: 10px; }
.news-form input { flex: 1; }
.news-form .btn { flex: none; }
@media (max-width: 820px) { .news-grid { grid-template-columns: 1fr; } .news-form { flex-direction: column; } }
/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-sm); padding: 4px 22px; margin-bottom: 12px; transition: .25s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.faq summary {
list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); font-size: 18px; transition: .25s var(--ease); }
.faq details[open] summary .pm { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); }
.faq details p { padding: 0 0 20px; font-size: 15px; }
/* ---- FOOTER ----
Aurora-Ausklang: weiche Farbwolken (wie Hero/Newsletter) + Spektrum-Streifen
als Oberkante — der Abschluss trägt die Marke statt einer grauen Linie. */
.footer {
position: relative; overflow: hidden;
padding: var(--space-8) 0 var(--space-6); margin-top: var(--space-9);
background:
radial-gradient(720px 420px at 6% 108%, color-mix(in srgb, var(--c-magenta) 13%, transparent), transparent 72%),
radial-gradient(720px 420px at 94% 112%, color-mix(in srgb, var(--c-teal) 12%, transparent), transparent 72%),
radial-gradient(900px 460px at 50% -30%, color-mix(in srgb, var(--c-amber) 9%, transparent), transparent 70%),
var(--bg);
}
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-static); }
.dark .footer {
background:
radial-gradient(720px 420px at 6% 108%, color-mix(in srgb, var(--c-magenta) 17%, transparent), transparent 72%),
radial-gradient(720px 420px at 94% 112%, color-mix(in srgb, var(--c-teal) 15%, transparent), transparent 72%),
radial-gradient(900px 460px at 50% -30%, color-mix(in srgb, var(--c-orange) 10%, transparent), transparent 70%),
var(--bg);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer h6 { font-size: 13px; letter-spacing: .04em; margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: 14px; color: var(--ink-soft); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-mute); font-size: 13px; }
.footer-social { display: flex; gap: 10px; }
/* Socials in der Spektrum-Rotation (wie die Karten) — Hover füllt in der Akzentfarbe.
Light nutzt die dunklen AA-Töne, Dark die hellen. */
.footer-social .icon-btn { color: var(--fs-c, var(--ink-soft)); border-color: color-mix(in srgb, var(--fs-c, var(--line)) 40%, var(--line)); }
.footer-social .icon-btn:nth-child(5n+1) { --fs-c: var(--c-red); }
.footer-social .icon-btn:nth-child(5n+2) { --fs-c: var(--c-magenta-d); }
.footer-social .icon-btn:nth-child(5n+3) { --fs-c: var(--c-teal-d); }
.footer-social .icon-btn:nth-child(5n+4) { --fs-c: var(--c-orange-d); }
.footer-social .icon-btn:nth-child(5n+5) { --fs-c: var(--c-red-d); }
.footer-social .icon-btn:hover { background: var(--fs-c); border-color: var(--fs-c); color: #fff; }
.dark .footer-social .icon-btn:nth-child(5n+1) { --fs-c: var(--c-red-bright); }
.dark .footer-social .icon-btn:nth-child(5n+2) { --fs-c: var(--c-magenta); }
.dark .footer-social .icon-btn:nth-child(5n+3) { --fs-c: var(--c-teal); }
.dark .footer-social .icon-btn:nth-child(5n+4) { --fs-c: var(--c-orange); }
.dark .footer-social .icon-btn:nth-child(5n+5) { --fs-c: var(--c-amber); }
.dark .footer-social .icon-btn:hover { color: #17171A; }
.footer-desc { max-width: 300px; font-size: 14px; }
.footer-flourish { font-size: 15px; font-weight: 700; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* ---- PAGINATION ---- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: var(--space-8); }
.pagination .btn { min-width: 120px; justify-content: center; }
.pagination .page-number { font-family: var(--font-mono); font-size: 13px; color: var(--ink-mute); }
/* ================================================================
16 — RESPONSIVE (Hero / Nav / kleine Phones)
================================================================ */
@media (max-width: 900px) {
.hero { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.hero-grid { grid-template-columns: 1.45fr .85fr; gap: var(--space-6); }
.hero-disc { display: none; }
.bulb-stage { box-shadow: var(--shadow-md); }
.dark .bulb-stage { box-shadow: var(--shadow-md), inset 0 0 40px rgba(0,0,0,.6); }
.hero-bulb { width: 72%; }
}
/* Unterhalb ~1180px passen 5 Punkte + Icons nicht mehr einzeilig → Burger */
@media (max-width: 1179px) {
.nav-burger { display: inline-flex; }
.nav-cta { display: none; }
.nav-links {
display: none; position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px;
background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.nav.nav-open .nav-links { display: flex; }
.nav-links .nav-link { padding: 12px; font-size: 15px; }
.nav-link-cta { display: block; color: var(--accent); font-weight: 700; }
}
@media (max-width: 620px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--space-5); }
.hero-art { order: 1; max-width: 300px; margin: 6px auto 0; }
.hero h1 { font-size: clamp(30px, 8.5vw, 60px); }
.hero-bulb { width: 64%; }
}
@media (max-width: 520px) {
.about { padding: var(--space-6); }
.feature-body, .news { padding: var(--space-6); }
.about-name { font-size: clamp(28px, 8vw, 44px); overflow-wrap: break-word; }
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.hero-art { display: none; }
}
@media (max-width: 400px) {
.nav-inner { padding: 0 16px; gap: 10px; }
.nav-logo { font-size: 16px; }
}
/* ---- Scroll-Reveal ----
Versteckt nur, wenn JS bestätigt da ist (html.js setzt das Inline-Script im ) —
ohne JS bleibt alles sichtbar statt für immer auf opacity:0 zu warten. */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: .7s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
/* ---- Reduzierte Bewegung: alle Endlos-Animationen und Reveals abschalten ---- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.grad-text, .grad-bg, .btn-grad, .divider-grad, .grad-icon-animated,
.grad-border::before, .btn-outline-grad::before,
.marquee, .marquee-track, .about-photo::after,
.grad-svg-animated stop:nth-child(1),
.grad-svg-animated stop:nth-child(2),
.grad-svg-animated stop:nth-child(3) { animation: none !important; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ================================================================
17 — CODE & PROMPT („Zwei Stimmen, ein System")
Mono (JetBrains) = die maschinen-zugewandte Stimme.
.gp-code → dunkle Bühne, Syntax-Farben, Brand-Ampelpunkte.
.gp-prompt → helle Karte mit Verlaufs-Rand, ✦-Glyph, Mono-Text.
================================================================ */
/* ---- 17.1 CODE ---- */
.gp-code {
position: relative; margin: var(--space-5) 0;
background: var(--code-bg); border: 1px solid rgba(255, 255, 255, .07);
border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md);
}
.gp-code::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: var(--grad-static); }
.gp-code__bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--code-bar); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.gp-code__dots { display: flex; gap: 6px; flex: none; }
.gp-code__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.gp-code__dots i:nth-child(1) { background: var(--c-red); }
.gp-code__dots i:nth-child(2) { background: var(--c-amber); }
.gp-code__dots i:nth-child(3) { background: var(--c-orange); }
.gp-code__lang { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #9A9088; } /* fest — die Code-Bühne ist in beiden Modi dunkel */
.gp-code__body { margin: 0; padding: 18px 20px; overflow-x: auto; }
.gp-code__body code { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--code-ink); background: none; white-space: pre; }
/* Syntax-Tokens — auf die Brand-Palette gemappt */
.tok-com { color: #948A7E; font-style: italic; } /* Kommentar */
.tok-key { color: var(--c-orange); } /* Keyword / Operator */
.tok-str { color: var(--c-amber); } /* String */
.tok-fn { color: var(--c-red-bright); } /* Funktion / Methode */
.tok-num { color: var(--c-amber-d); } /* Zahl / Konstante */
.tok-punct { color: #9A9088; } /* Klammern / Satzzeichen */
/* ---- 17.2 PROMPT ---- */
.gp-prompt { position: relative; margin: var(--space-5) 0; background: var(--surface); border-radius: var(--radius); z-index: 0; }
.gp-prompt::before {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; padding: 1.5px; background: var(--grad-static);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.gp-prompt__bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.gp-prompt__glyph { font-size: 15px; line-height: 1; flex: none; background: var(--grad-static); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-prompt__label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.gp-prompt__model { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.gp-prompt__body { padding: 16px 18px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.gp-prompt__body p { color: var(--ink); }
.gp-prompt__body p + p { margin-top: .9em; }
/* Prompt-„Syntax": Platzhalter / Variablen als Akzent-Pill */
.tok-var {
font-family: var(--font-mono); font-size: .92em; color: var(--c-red-d);
background: color-mix(in srgb, var(--c-red) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--c-red) 35%, transparent);
border-radius: var(--radius-xs); padding: 1px 6px; white-space: nowrap;
}
.dark .tok-var { color: var(--c-red-bright); }
/* Rollen-Varianten — färben nur das Label */
.gp-prompt--system .gp-prompt__label { color: var(--c-orange-d); }
.gp-prompt--user .gp-prompt__label { color: var(--accent); }
.dark .gp-prompt--system .gp-prompt__label { color: var(--c-orange); }
/* ---- 17.3 COPY-BUTTON (Logik in rys.js) ---- */
.gp-copy {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
padding: 5px 11px; border-radius: var(--radius-full); border: 1px solid transparent;
background: transparent; cursor: pointer; transition: .2s var(--ease);
}
.gp-copy svg { width: 13px; height: 13px; }
.gp-code__bar .gp-copy { color: #9A9088; border-color: rgba(255, 255, 255, .14); }
.gp-code__bar .gp-copy:hover { color: #fff; border-color: rgba(255, 255, 255, .32); }
.gp-prompt__model + .gp-copy { margin-left: 12px; }
.gp-prompt__bar .gp-copy { color: var(--ink-mute); border-color: var(--line); }
.gp-prompt__bar .gp-copy:hover { color: var(--accent); border-color: var(--accent); }
.gp-copy.copied { color: var(--c-orange-d) !important; border-color: var(--c-orange-d) !important; }
.dark .gp-copy.copied { color: var(--c-orange) !important; border-color: var(--c-orange) !important; }
/* ---- 17.4 PLUG / EMPFEHLUNG (.gp-plug) ----
Wiederverwendbare Box: Affiliate-Tipp, Support (Kaffee) oder Tool-Empfehlung.
Affiliate → Badge „Anzeige" + rel="sponsored" setzen. --support = wärmere Variante. */
.gp-plug {
position: relative; z-index: 0; margin: var(--space-5) 0; padding: 20px 22px;
background: var(--surface); border-radius: var(--radius);
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.gp-plug::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
padding: 1.5px; background: var(--grad-static);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.gp-plug__ico {
flex: none; width: 52px; height: 52px; border-radius: var(--radius-sm);
display: grid; place-items: center; font-size: 26px; line-height: 1;
background: color-mix(in srgb, var(--c-red) 12%, transparent);
}
.gp-plug__main { flex: 1 1 240px; min-width: 0; }
.gp-plug .gp-plug__kicker {
margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.gp-plug .gp-plug__title {
margin: 3px 0 0; font-size: 17px; font-weight: 700; line-height: 1.25;
letter-spacing: -.01em; color: var(--ink);
}
.gp-plug .gp-plug__text {
margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.gp-plug .gp-plug__btn {
flex: none; align-self: center; display: inline-flex; align-items: center; gap: 7px;
padding: 11px 20px; border-radius: var(--radius-full); font-weight: 600; font-size: 14.5px;
color: #fff !important; text-decoration: none; white-space: nowrap;
background: var(--grad-static); background-size: 150% 100%;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-position .4s var(--ease);
}
.gp-plug .gp-plug__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-grad); background-position: 100% 0; }
.gp-plug__badge {
position: absolute; top: 10px; right: 12px; font-family: var(--font-mono);
font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-mute); background: var(--bg); border: 1px solid var(--line);
border-radius: var(--radius-xs); padding: 2px 7px;
}
.gp-plug--support .gp-plug__ico { background: color-mix(in srgb, var(--c-amber) 22%, transparent); }
.gp-plug--support .gp-plug__kicker { color: var(--c-orange-d); }
.dark .gp-plug--support .gp-plug__kicker { color: var(--c-amber); }
@media (max-width: 520px) {
.gp-plug .gp-plug__btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.gp-plug .gp-plug__btn { transition: none; }
.gp-plug .gp-plug__btn:hover { transform: none; }
}
/* ---- 17.5 VIDEO (.gp-video) — Klick-zum-Laden ----
Lädt YouTube erst beim Klick (youtube-nocookie.com) → kein Google-Kontakt vorab.
Optional Poster: style="background-image:url(...)" aufs figure. Loader in rys.js. */
.gp-video {
position: relative; margin: var(--space-5) 0; aspect-ratio: 16 / 9;
border-radius: var(--radius-sm); overflow: hidden; background: var(--code-bg);
background-size: cover; background-position: center;
}
.gp-video__frame {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
padding: 20px; text-align: center; color: #fff;
background: radial-gradient(120% 90% at 50% 42%, color-mix(in srgb, var(--c-red) 20%, transparent), transparent 70%);
}
.gp-video[style*="background-image"] .gp-video__frame { background: rgba(0, 0, 0, .48); }
.gp-video__frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-static); }
.gp-video__play {
width: 64px; height: 64px; border-radius: 50%; background: var(--grad-static);
display: grid; place-items: center; box-shadow: var(--shadow-grad); transition: transform .2s var(--ease);
}
.gp-video__play::after { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.gp-video__frame:hover .gp-video__play { transform: scale(1.08); }
.gp-video__label { font-weight: 700; font-size: 16px; }
.gp-video__note { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, .72); max-width: 36ch; }
.gp-video__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .gp-video__frame:hover .gp-video__play { transform: none; } }
/* ---- 17.6 VIDEO-BOX (.gp-video-box) — Video + Beschreibung als EIN Kasten ----
Standard-Einbettung (handbuch.html §02): links das Klick-zum-Laden-Video (.gp-video),
rechts Kicker/Titel/Text — man weiß, wohin man klickt. Mobil gestapelt.
Gradient-Rand wie .gp-plug/.gp-prompt → eine Baustein-Familie. */
.gp-video-box {
position: relative; z-index: 0; margin: var(--space-5) 0; padding: 14px;
background: var(--surface); border-radius: var(--radius);
display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
gap: 4px 20px; align-items: center;
}
.gp-video-box::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
padding: 1.5px; background: var(--grad-static);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.gp-video-box .gp-video { margin: 0; border-radius: calc(var(--radius) - 8px); }
.gp-video-box__body { padding: 10px 8px; min-width: 0; text-align: left; font-family: var(--font-display); }
/* Im Artikel gewinnt sonst .gh-content figcaption (mono, zentriert, margin) — Spezifität kontern */
.gh-content .gp-video-box__body { text-align: left; font-family: var(--font-display); margin: 0; }
.gp-video-box__kicker {
margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.gp-video-box__title {
margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3;
letter-spacing: -.01em; color: var(--ink);
}
.gp-video-box__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 720px) {
.gp-video-box { grid-template-columns: 1fr; gap: 2px; }
.gp-video-box__body { padding: 10px 6px 6px; }
}
/* ================================================================
18 — ARTIKEL / EINZELBEITRAG (post.hbs)
================================================================ */
.post-hero { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.post-hero h1 { max-width: 20ch; margin-top: 14px; }
.post-hero .lead { max-width: 720px; margin-top: 18px; }
.breadcrumb { font-size: 13px; color: var(--ink-mute); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent); }
.post-meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--ink-mute); font-size: 14px; margin-top: 28px; }
.post-meta .author { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-weight: 600; }
.post-meta .author .av { height: 34px; width: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
.post-cover { height: clamp(300px, 46vw, 560px); margin: var(--space-7) 0 0; border-radius: var(--radius); overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--space-8); align-items: start; padding: var(--space-8) 0; }
.article-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-6); }
.aside-block h6 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
/* Inhaltsverzeichnis (Aside) — rys.js baut die Links aus den H2s des Beitrags */
.aside-toc .toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.aside-toc .toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; color: var(--ink-soft); line-height: 1.45; transition: color .2s var(--ease), border-color .2s var(--ease); }
.aside-toc .toc a:hover { color: var(--ink); }
.aside-toc .toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 940px) { .aside-toc { display: none; } }
.aside-cta { display: flex; flex-direction: column; gap: 10px; }
.aside-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.share-row { display: flex; gap: 8px; }
.article-main { max-width: 760px; }
.related { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
@media (max-width: 940px){
.article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.article-aside { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }
.article-main { max-width: none; min-width: 0; }
}
@media (max-width: 720px){ .related { grid-template-columns: 1fr; } }
/* Statische Seiten (page.hbs): eine ruhige, lesbare Spalte — wie .article-main, ohne Sidebar */
.page-main { max-width: 760px; margin: 0 auto; padding: var(--space-7) 0 var(--space-8); }
/* Hero-Inhalt der Seite fluchtet mit der Textspalte darunter */
.page-hero-inner { max-width: 760px; margin: 0 auto; }
/* ================================================================
19 — PROSE / GHOST-EDITOR-INHALTE (.gh-content = {{content}})
================================================================ */
/* overflow-wrap: bricht -Ketten (WordPress-Import) und lange URLs statt X-Overflow */
.gh-content { font-size: 18px; line-height: 1.8; color: var(--ink-soft); overflow-wrap: break-word; }
.gh-content > :first-child { margin-top: 0; }
.gh-content h2 { font-size: clamp(24px, 3.4vw, 34px); margin: var(--space-7) 0 var(--space-3); color: var(--ink); }
/* Gradient-Strich vor jeder Abschnitts-Überschrift — übernimmt das Sektions-Trennen
(ersetzt die alten Trenner-Bilder, ganz ohne HTML-Card) */
.gh-content h2::before { content: ""; display: block; width: 56px; height: 4px; border-radius: var(--radius-full); background: var(--grad-static); margin-bottom: 16px; }
.gh-content h3 { font-size: clamp(20px, 2.6vw, 26px); margin: var(--space-6) 0 var(--space-2); color: var(--ink); }
/* Anker-Sprünge (TOC) enden nicht unter der Sticky-Nav */
.gh-content h2, .gh-content h3 { scroll-margin-top: 90px; }
.gh-content h4 { margin: var(--space-5) 0 var(--space-2); color: var(--ink); }
.gh-content p { margin-bottom: 1.1em; }
.gh-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gh-content ul, .gh-content ol { margin: 0 0 1.2em 1.2em; line-height: 1.8; }
.gh-content li { margin-bottom: .4em; }
.gh-content strong { color: var(--ink); }
.gh-content hr { border: none; height: 1px; background: var(--line); margin: var(--space-7) 0; }
/* Tabellen — eigenes RYS-Design. !important mit Absicht: die importierten
WordPress-Tabellen tragen eingebackene Inline-Styles (Verdana, width:1099px,
Schatten, Zentrierung …), die sonst jedes Theme-CSS schlagen. */
.gh-content table {
display: block; width: 100% !important; max-width: 100% !important; overflow-x: auto;
border-collapse: collapse !important; margin: var(--space-6) 0 !important;
font-family: var(--font-display) !important; font-size: 14px !important; line-height: 1.55 !important;
background: var(--surface) !important; color: var(--ink-soft) !important;
border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important;
}
.gh-content th, .gh-content td {
padding: 10px 14px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
background: none !important; box-shadow: none !important;
text-align: left !important; vertical-align: top !important;
font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important;
}
.gh-content th {
font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .04em !important;
text-transform: uppercase !important; color: var(--ink) !important; border-bottom-width: 2px !important;
}
.gh-content tbody tr:last-child td { border-bottom: 0 !important; }
.gh-content td strong { color: var(--ink); }
/* Sektions-Trenner in Marken-Optik (HTML-Card:
) —
Spezifität nötig, sonst gewinnt die neutrale hr-Regel darüber */
.gh-content hr.divider-grad-static { height: 2px; background: var(--grad-static); }
.gh-content hr.divider-grad { height: 2px; background: var(--grad); background-size: 300% 100%; }
.gh-content img { border-radius: var(--radius); }
.gh-content figure { margin: var(--space-6) 0; }
.gh-content figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-align: center; margin-top: 10px; }
/* Zitate als ruhige Karte (Baustein-Familie) — trägt auch lange Prof-Zitate,
ohne zu brüllen: normale Lesegröße, Gradient-Streifen links, Surface-Fläche */
.gh-content blockquote {
position: relative; overflow: hidden;
margin: var(--space-7) 0; padding: 20px 24px 20px 30px;
background: var(--surface);
border: 1px solid var(--line); border-radius: var(--radius-sm);
font-family: var(--font-display); font-weight: 500;
font-size: 16.5px; line-height: 1.7; color: var(--ink);
}
.gh-content blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-static); }
.gh-content blockquote p { color: inherit; }
.gh-content blockquote strong { font-weight: 700; }
/* Inline-Code */
.gh-content :not(pre) > code {
font-family: var(--font-mono); font-size: .88em; color: var(--c-red-d);
background: color-mix(in srgb, var(--c-red) 9%, transparent);
border: 1px solid color-mix(in srgb, var(--c-red) 22%, transparent);
border-radius: var(--radius-xs); padding: 1px 6px;
}
.dark .gh-content :not(pre) > code { color: var(--c-amber); }
/* Native Code-Blöcke des Editors bekommen den .gp-code-Look (dunkle Bühne) */
.gh-content pre {
position: relative; margin: var(--space-5) 0;
background: var(--code-bg); color: var(--code-ink);
border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-sm);
padding: 20px; overflow-x: auto; box-shadow: var(--shadow-md);
font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
}
.gh-content pre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-static); }
.gh-content pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
/* Koenig-Karten (Breakouts, Bookmarks, Callouts) */
.gh-content .kg-card { margin: var(--space-6) 0; }
/* ponytail: full = wide — echtes 100vw-Full-bleed geht im Sidebar-Layout nicht
(Spalte ist nicht viewport-zentriert → X-Overflow). 110% statt fixer 1020px:
mehr Überhang würde links in die Sidebar ragen (Galerien sind default "wide"). */
.gh-content .kg-width-wide,
.gh-content .kg-width-full { width: 110%; margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 940px) { .gh-content .kg-width-wide, .gh-content .kg-width-full { width: 100%; margin-left: 0; transform: none; } }
.gh-content .kg-image { display: block; margin-inline: auto; }
/* margin-block statt Shorthand: überschreibt sonst das margin-left:50% der width-wide-Zentrierung */
.gh-content .kg-embed-card, .gh-content .kg-gallery-card { margin-block: var(--space-6); }
/* Galerien bleiben in der Textspalte — der Wide-Überhang wirkt bei Bildreihen deplatziert */
.gh-content .kg-gallery-card.kg-width-wide { width: 100%; margin-left: 0; transform: none; }
/* Mobil stapeln Galerien untereinander — nebeneinander wären die Bilder briefmarkengroß */
@media (max-width: 620px) {
.gh-content .kg-gallery-row { flex-direction: column; }
.gh-content .kg-gallery-image:not(:first-of-type) { margin: 0.75em 0 0; }
.gh-content .kg-gallery-image { width: 100% !important; }
.gh-content .kg-gallery-image img { width: 100%; height: auto; }
}
/* Lightbox — Content-Bilder auf Klick vergrößern (Loader in rys.js) */
.gh-content img { cursor: zoom-in; }
.gh-content a img { cursor: pointer; } /* verlinkte Bilder: der Link gewinnt (auch in rys.js) */
.lightbox {
position: fixed; inset: 0; z-index: 200; padding: 24px;
background: rgba(12, 9, 7, .93);
display: grid; place-items: center; cursor: zoom-out;
}
.lightbox img { max-width: min(1400px, 94vw); max-height: 92vh; width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); cursor: zoom-out; }
/* Callouts: Layout vom Theme, Farbflächen von Ghosts Card-CSS (transluzent → funktioniert
in Light und Dark). Nur Radius/Abstand werden auf die Marke gezogen. */
.gh-content .kg-callout-card { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-sm); }
.gh-content .kg-callout-emoji { font-size: 20px; line-height: 1.35; }
.gh-content .kg-callout-text { color: var(--ink); }
.gh-content .kg-bookmark-card a {
display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm);
overflow: hidden; text-decoration: none; color: var(--ink); background: var(--surface);
}
.gh-content .kg-bookmark-content { padding: 18px 20px; }
.gh-content .kg-bookmark-title { font-weight: 700; }
.gh-content .kg-bookmark-description { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.gh-content blockquote.kg-blockquote-alt { border: none; padding: 0 8%; font-size: 17px; font-weight: 500; font-style: italic; text-align: center; color: var(--ink-soft); }
.gh-content .kg-toggle-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.gh-content .kg-toggle-heading-text { color: var(--ink); font-weight: 700; }
.gh-content .kg-file-card a { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
/* ================================================================
20 — THEME-BAUSTEINE v2 (Skip-Link, Archiv-Header, Formular-
Zustände, Kommentare, Kleinklassen statt Inline-Styles)
================================================================ */
/* Skip-Link (Tastatur-Nutzer:innen springen direkt zum Inhalt) */
.skip-link {
position: fixed; top: -64px; left: 12px; z-index: 100;
background: var(--ink); color: var(--bg);
padding: 10px 16px; border-radius: var(--radius-xs);
font-weight: 600; font-size: 14px; transition: top .2s var(--ease);
}
.skip-link:focus { top: 10px; }
/* Kleinklassen (ersetzen Inline-Styles in den Templates) */
.faq-head { margin-bottom: var(--space-7); }
/* Archiv-Header (Alle Beiträge / Thema / Autorin) */
.arch-hero { padding: var(--space-8) 0 var(--space-6); }
.arch-hero .eyebrow { display: block; margin-top: 14px; }
.arch-hero h1 { margin-top: 8px; }
.arch-hero .lead { margin-top: 14px; }
.arch-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); margin-top: 18px; }
.section-arch { padding-top: var(--space-7); }
/* Fehlerseiten */
.error-box { padding: var(--space-9) var(--space-5); border-radius: var(--radius); }
.error-box h1 { margin-inline: auto; max-width: 18ch; }
.error-box .lead { margin-inline: auto; }
.error-cta { justify-content: center; }
/* Newsletter-Sektion: sitzt immer unter einer Sektion mit eigenem Abstand */
.section-news { padding-top: 0; }
/* Formular-Zustände (Ghost setzt loading/success/error auf das