diff --git a/src/pages/faktenchecks/[...slug].astro b/src/pages/faktenchecks/[...slug].astro
index fa6f3b6..96c0d7c 100644
--- a/src/pages/faktenchecks/[...slug].astro
+++ b/src/pages/faktenchecks/[...slug].astro
@@ -92,7 +92,7 @@ const claimReview = {
{data.kurzantwort}
Fakt + Quelle + Link – griffbereit für Gespräche und Social Media.
@@ -173,22 +173,19 @@ const claimReview = {
.urteil-klartext {
margin: .6rem 0 0; font-size: 1.02rem; font-weight: 600; color: var(--c-text-soft);
}
- .behauptung-box, .kurzantwort-box {
+ /* .kurzantwort-box + .btn--klein leben jetzt global (global.css). */
+ .behauptung-box {
margin: 1.5rem 0; padding: 1.1rem 1.3rem; border-radius: var(--radius);
- border: 1px solid var(--c-border); border-left-width: 4px;
+ border: 1px solid var(--c-border); border-left: 4px solid var(--c-falsch);
+ background: var(--c-surface-2);
}
- .behauptung-box { background: var(--c-surface-2); border-left-color: var(--c-falsch); }
- .kurzantwort-box { background: var(--c-accent-soft); border-left-color: var(--c-accent); }
- .behauptung-box__label, .kurzantwort-box__label {
+ .behauptung-box__label {
font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
+ color: var(--c-falsch);
}
- .behauptung-box__label { color: var(--c-falsch); }
- .kurzantwort-box__label { color: var(--c-accent); }
.behauptung-box p { margin: .3rem 0 0; font-size: 1.15rem; font-style: italic; color: var(--c-text); }
- .kurzantwort-box .lead { font-size: 1.18rem; line-height: 1.5; }
.teilen { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .9rem; }
- .btn--klein { padding: .4rem .8rem; font-size: .85rem; }
- .btn--erfolg { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
+ .btn--erfolg { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.teilen__hint { font-size: .82rem; }
.fc-footer { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); font-size: .92rem; }
diff --git a/src/pages/maschen/[...slug].astro b/src/pages/maschen/[...slug].astro
index d2f4718..abd7b69 100644
--- a/src/pages/maschen/[...slug].astro
+++ b/src/pages/maschen/[...slug].astro
@@ -126,7 +126,13 @@ const konter = TECHNIK_KONTER[data.code];
}
.selbsttest summary { cursor: pointer; font-weight: 700; list-style: none; }
.selbsttest summary::-webkit-details-marker { display: none; }
- .selbsttest summary::before { content: "🧠"; }
+ .selbsttest summary::before {
+ content: ""; display: inline-block; width: 1.05rem; height: 1.05rem;
+ vertical-align: -0.16em; margin-right: .45rem;
+ background: var(--c-technik);
+ --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
+ -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
+ }
.selbsttest__q { display: block; }
.selbsttest__hint { display: block; font-weight: 500; font-size: .82rem; margin-top: .2rem; }
.selbsttest[open] summary { margin-bottom: .6rem; }
diff --git a/src/pages/o-ton/[...slug].astro b/src/pages/o-ton/[...slug].astro
index f98bcf2..8125277 100644
--- a/src/pages/o-ton/[...slug].astro
+++ b/src/pages/o-ton/[...slug].astro
@@ -106,12 +106,8 @@ const titel = data.titel || `${data.sprecher}: O-Ton geprüft`;
.oton-transkript[open] > summary { border-bottom: 1px solid var(--c-border); }
.oton-transkript .prose { padding: 1rem 1.1rem; }
- .kurzantwort-box {
- background: var(--c-accent-soft); border: 1px solid var(--c-border);
- border-left: 4px solid var(--c-accent); border-radius: var(--radius);
- padding: 1.1rem 1.3rem; margin: 0 0 1.75rem;
- }
- .kurzantwort-box__label { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: .72rem; color: var(--c-accent); }
+ /* .kurzantwort-box lebt jetzt global (global.css); hier nur der Abstand zum O-Ton-Rhythmus. */
+ .kurzantwort-box { margin: 0 0 1.75rem; }
.oton-einordnung { margin-bottom: 2rem; }
.oton-techniken { margin: 0 0 2rem; align-items: center; }
diff --git a/src/styles/global.css b/src/styles/global.css
index afd25ed..bc5b264 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -43,6 +43,10 @@
--radius: 12px;
--radius-sm: 8px;
+ --radius-lg: 18px;
+ /* Spacing-Skala (8px-Raster) – für konsistente Abstände statt Inline-Magie. */
+ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
+ --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.05);
--shadow-lift: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
@@ -319,6 +323,19 @@ a.badge:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.btn--primary:hover { background: var(--c-accent-strong); color: var(--c-on-accent); }
.btn--ghost { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
+.btn--klein { padding: .4rem .8rem; font-size: .85rem; }
+
+/* ---------- Kurzantwort-Box (geteilt: Faktencheck- & O-Ton-Detailseite) ---------- */
+.kurzantwort-box {
+ margin: 1.5rem 0; padding: 1.1rem 1.3rem; border-radius: var(--radius);
+ border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent);
+ background: var(--c-accent-soft);
+}
+.kurzantwort-box__label {
+ font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
+ color: var(--c-accent);
+}
+.kurzantwort-box .lead { font-size: 1.18rem; line-height: 1.5; }
/* ---------- Cards ---------- */
.card {