From 6ca8ae672084343283f11c0144ee51e06296ed8f Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sun, 12 Jul 2026 11:14:51 +0200
Subject: [PATCH] =?UTF-8?q?fix(css):=20@layer=20base=20revert=20=E2=80=94?=
 =?UTF-8?q?=20Preflight=20schlug=20Heading-Defaults=20(Hero-Titel=20kaputt?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

E rückgängig: Tailwind-Preflight resettet h1–h6 selbst in @layer base → gleiche
Layer, Preflight gewann → Headings kollabierten (Hero-Titel). Heading-Defaults
wieder unlayered; text-*!-Hacks in InfoCard/ContactFormBlock-Titeln zurück.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/app.css                                       | 10 +++-------
 src/lib/components/InfoCard.svelte                |  4 ++--
 src/lib/components/blocks/ContactFormBlock.svelte |  2 +-
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/app.css b/src/app.css
index e9a8594..16cf153 100644
--- a/src/app.css
+++ b/src/app.css
@@ -194,10 +194,9 @@ main {
    Erlaubte Gewichte: 300, 400, 500, 600, 700. Inter primary, Lora nur Zitate.
    ========================================================================== */
 
-/* @layer base: Element-Defaults liegen unter den Utilities → text-*/font-*-
-   Utilities auf h1–h6 gewinnen ohne `!`-Hack (vorher unlayered = schlug alles). */
-@layer base {
-
+/* Heading-Defaults bewusst UNLAYERED: Tailwind-Preflight resettet h1–h6 in
+   @layer base (font-size:inherit). Diese Rules müssen darüber liegen → unlayered.
+   Folge: Utilities auf Headings brauchen `!` (siehe InfoCard/ContactFormBlock). */
 h1,
 h2,
 h3,
@@ -268,9 +267,6 @@ h4 {
     }
 }
 
-}
-/* /@layer base */
-
 /* Page-Titel (wie www.windwiderstand.de) */
 .pageTitle h1 {
     font-size: 1.5rem;
diff --git a/src/lib/components/InfoCard.svelte b/src/lib/components/InfoCard.svelte
index 2c454d0..e26cd74 100644
--- a/src/lib/components/InfoCard.svelte
+++ b/src/lib/components/InfoCard.svelte
@@ -66,7 +66,7 @@
     <div class="flex gap-2.5">
       {#if icon}<div class="pt-px">{@render iconBadge("size-5", "size-3")}</div>{/if}
       <div class="flex min-w-0 flex-1 flex-col gap-2">
-        <h3 class="text-sm font-bold leading-[1.3] tracking-[-0.01em] text-stein-800">{title}</h3>
+        <h3 class="text-sm! font-bold! leading-[1.3]! tracking-[-0.01em] text-stein-800">{title}</h3>
         {#if description}
           <p class="line-clamp-3 text-[13px] font-normal leading-[1.45] text-stein-500">{description}</p>
         {/if}
@@ -80,7 +80,7 @@
   {:else}
     {#if icon}{@render iconBadge("size-11", "size-[23px]")}{/if}
     <div class="flex flex-col gap-1">
-      <h3 class="text-base font-bold leading-[1.3] tracking-[-0.01em] text-stein-800">{title}</h3>
+      <h3 class="text-base! font-bold! leading-[1.3]! tracking-[-0.01em] text-stein-800">{title}</h3>
       {#if description}
         <p class="line-clamp-3 text-sm font-normal leading-[1.45] text-stein-500">{description}</p>
       {/if}
diff --git a/src/lib/components/blocks/ContactFormBlock.svelte b/src/lib/components/blocks/ContactFormBlock.svelte
index 40429d8..011e9f3 100644
--- a/src/lib/components/blocks/ContactFormBlock.svelte
+++ b/src/lib/components/blocks/ContactFormBlock.svelte
@@ -53,7 +53,7 @@
     <!-- rechts: Aside -->
     <aside class="flex flex-col gap-5">
       {#if block.asideTitle}
-        <h3 class="text-xl font-bold leading-tight tracking-[-0.01em] text-stein-800">
+        <h3 class="text-xl! font-bold! leading-tight! tracking-[-0.01em] text-stein-800">
           {block.asideTitle}
         </h3>
       {/if}