Design-Politur R2: sichere Aufräumarbeiten (kein Look-Wechsel)

src/pages/faktenchecks/[...slug].astro

@@ -92,7 +92,7 @@ const claimReview = {
       <p class="lead" style="color:var(--c-text);margin:.25rem 0 0;">{data.kurzantwort}</p>
       <div class="teilen">
         <button type="button" class="btn btn--ghost btn--klein" data-teilen={teilenText}>
-          📋 Kurzantwort kopieren
+          Kurzantwort kopieren
         </button>
         <span class="teilen__hint muted">Fakt + Quelle + Link – griffbereit für Gespräche und Social Media.</span>
       </div>
@@ -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; }
 </style>

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; }

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; }

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 {