Update as-styleguide/index.html

Update as-styleguide/styles.css
Update koru.ai

as-styleguide/assets/img/icon.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.52 130.27">
+  <path d="M121.79,2.75h8.73v124.78h-8.73v-33.44c-4.99,10.98-12.56,19.76-22.71,26.33-10.15,6.57-21.55,9.86-34.19,9.86-17.97,0-33.28-6.28-45.92-18.84C6.32,98.87,0,83.44,0,65.14S6.32,31.41,18.97,18.84C31.61,6.28,46.92,0,64.89,0c12.64,0,24.04,3.29,34.19,9.86,10.15,6.57,17.72,15.35,22.71,26.33V2.75ZM25.08,105.44c10.9,10.9,24.25,16.35,40.06,16.35s29.2-5.45,40.18-16.35c10.98-10.89,16.47-24.33,16.47-40.3s-5.49-29.41-16.47-40.31c-10.98-10.9-24.38-16.35-40.18-16.35s-29.16,5.45-40.06,16.35-16.35,24.33-16.35,40.31,5.45,29.41,16.35,40.3Z"/>
+  <path d="M45.78,47.25c0,3.92,1.61,6.99,4.84,9.2,3.22,2.21,7.08,3.87,11.58,4.97,4.49,1.11,9.04,2.23,13.63,3.36,4.59,1.13,8.48,3.17,11.68,6.11,3.2,2.94,4.8,6.9,4.8,11.88,0,6.03-2.44,11.04-7.33,15.04-4.89,4-11.19,6-18.89,6-14.62,0-23.9-5.38-27.85-16.15l4.3-2.52c3.06,9.09,10.91,13.63,23.56,13.63,6.02,0,11.01-1.45,14.96-4.36,3.95-2.91,5.93-6.78,5.93-11.61,0-4.04-1.61-7.2-4.82-9.47-3.21-2.27-7.07-3.96-11.56-5.06-4.49-1.11-9.04-2.23-13.62-3.36-4.59-1.13-8.49-3.13-11.7-5.99-3.21-2.86-4.82-6.72-4.82-11.56,0-5.93,2.3-10.89,6.89-14.89,4.59-4,10.64-6,18.15-6,5.83,0,10.89,1.31,15.19,3.93,4.3,2.62,7.38,6.15,9.26,10.59l-4.3,2.52c-1.58-3.85-4.15-6.82-7.7-8.89-3.56-2.07-7.7-3.11-12.44-3.11-5.73,0-10.45,1.45-14.15,4.34-3.7,2.89-5.56,6.7-5.56,11.41Z"/>
+</svg>

as-styleguide/assets/img/koru.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.06 383.93">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #eb825e;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M40.62,148.72c20.55,8.16,46.32,3.12,61.89-12.55,18.38-18.51,19.15-54.19-7.08-66.1-4.69-2.13-9.5-3.15-14.14-3.16.92-.77,1.77-1.64,2.52-2.61,4.87-6.34,3.61-14.91-1.4-20.7-5.81-6.71-16.38-4.29-21.23,2.04-.77,1.01-1.34,2.08-1.76,3.18-2.16-8.28,2.39-16.88,9.71-21.15,16.95-6.05,36.05-6.31,53.53-1.82,5.38,1.38,10.51,3.27,15.39,5.57-3.85-.45-7.91-.2-12.18.95-16.27,4.37-24.69,24.78-13.26,38.12,5.26,6.14,14.35,9.77,21.14,4.16,7.07-5.84,5.58-16.35.49-22.65-1.72-2.13-4.19-3.63-6.81-4.36,1.11-.79,2.3-1.43,3.51-1.88,12.56-4.76,27.04,4.03,37.67,9.85.17.09.33.15.5.19,11.06,13.45,18.34,29.92,20.62,47.2-9.42-17.81-31.01-25.1-49.2-16.53-9.82,4.63-16.56,15.85-14.94,26.64,1.57,10.46,13.04,18.76,23.42,14.87,10.41-3.91,15.13-18.48,6.87-26.92-.1-.1-.2-.19-.3-.29,3.06-.31,6.13.2,9.14,1.16,9.06,2.86,15.05,12.85,17.73,21.35,2.76,8.75,2.37,18.24.83,27.4-5.53,14.23-13.78,27.37-23.44,39.66,1.38-4.35,2.23-8.83,2.4-13.36.7-19.34-14-37.2-33.66-37.97-10.8-.42-19.4,6.07-23.43,15.66-4.32,10.28,2.58,21.18,12.24,24.57,9.99,3.51,20.48-3.82,21.74-13.83.08-.66.11-1.32.09-1.98.83.75,1.52,1.49,2.02,2.15,6.24,8.28,5.95,18.59,4.23,28.31-1.64,9.23-7.02,17.23-11.72,25.3-7.44,7.4-15.01,14.49-22.33,21.35-2.01,1.88-4,3.8-5.97,5.73,2.42-7.29,3.58-15.02,3.64-22.68.13-16.87-9.65-39.01-30.07-36.36-8.83,1.14-15.68,6.59-18.57,15.04-2.86,8.36,1.99,17.8,9.04,22.22,8.39,5.27,19.18.64,23.7-7.36,2.48,7.2,2.16,16.18,1.62,23.36-.35,4.57-1.45,9.15-2.65,13.56-.72,2.65-1.46,5.67-2.37,8.49-8.11,8.91-15.82,18.18-23.09,27.78,1.04-6.6,1.19-13.42.26-19.85-2.92-20.2-17.32-37.2-39.11-34.09-9.41,1.35-16.81,10.09-18.99,18.89-2.41,9.72,1.67,19.98,11.02,23.89,8.39,3.51,19.43-1.45,20.78-10.88.72-5.04-.69-9.84-3.59-13.39,2.89.73,5.77,2.45,7.81,4.38,7.22,6.84,9.3,19.19,9.8,28.64.3,5.79-.47,11.56-1.74,17.19-.79,3.49-2.61,7.7-3.26,11.58-7.26,14.03-12.48,29.28-14.59,44.61-.94,6.86-1.15,13.76-.74,20.67.16,2.71,4.14,2.74,4.23,0,1.59-50.5,41.17-88.03,76.84-118.95,36.33-31.49,75.09-65,91.46-111.73,16.97-48.47-1.84-103.27-43.97-132.13C121.33-9.37,61.27-5.98,24.76,29.1,7.48,45.71-2.25,69.69.45,93.66c2.77,24.62,16.85,45.79,40.17,55.05ZM22.86,79.22c.83-9.05,5.57-18.99,11.68-27.27,4.14-5.62,9.77-10.53,15.91-14.68-1.51,3.65-2.27,7.73-2.07,12.03.4,8.51,5.32,16.58,13.13,20.17,1.53.7,3.13,1.18,4.76,1.44-5.68,3.36-10.28,8.76-12.85,16.01-5.67,15.97,5.1,34.65,22.57,34.87,4.3.05,8.73-1.27,12.61-3.48-4.32,5.7-10.4,8.81-17.25,10.63-4.49,1.19-7.09,1.28-12.49,1.02-2.59-.12-2.29-.12-5.37-.78-1.18-.25-2.34-.59-3.5-.92-.41-.12-3.56-1.26-3.14-1.04-9.23-4.01-14.9-10.24-19.53-19.31-4.33-8.47-5.41-18.41-4.47-28.69Z"/>
+</svg>

as-styleguide/assets/img/koru_Zeichenfläche 1.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.06 383.93">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #eb825e;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M40.62,148.72c20.55,8.16,46.32,3.12,61.89-12.55,18.38-18.51,19.15-54.19-7.08-66.1-4.69-2.13-9.5-3.15-14.14-3.16.92-.77,1.77-1.64,2.52-2.61,4.87-6.34,3.61-14.91-1.4-20.7-5.81-6.71-16.38-4.29-21.23,2.04-.77,1.01-1.34,2.08-1.76,3.18-2.16-8.28,2.39-16.88,9.71-21.15,16.95-6.05,36.05-6.31,53.53-1.82,5.38,1.38,10.51,3.27,15.39,5.57-3.85-.45-7.91-.2-12.18.95-16.27,4.37-24.69,24.78-13.26,38.12,5.26,6.14,14.35,9.77,21.14,4.16,7.07-5.84,5.58-16.35.49-22.65-1.72-2.13-4.19-3.63-6.81-4.36,1.11-.79,2.3-1.43,3.51-1.88,12.56-4.76,27.04,4.03,37.67,9.85.17.09.33.15.5.19,11.06,13.45,18.34,29.92,20.62,47.2-9.42-17.81-31.01-25.1-49.2-16.53-9.82,4.63-16.56,15.85-14.94,26.64,1.57,10.46,13.04,18.76,23.42,14.87,10.41-3.91,15.13-18.48,6.87-26.92-.1-.1-.2-.19-.3-.29,3.06-.31,6.13.2,9.14,1.16,9.06,2.86,15.05,12.85,17.73,21.35,2.76,8.75,2.37,18.24.83,27.4-5.53,14.23-13.78,27.37-23.44,39.66,1.38-4.35,2.23-8.83,2.4-13.36.7-19.34-14-37.2-33.66-37.97-10.8-.42-19.4,6.07-23.43,15.66-4.32,10.28,2.58,21.18,12.24,24.57,9.99,3.51,20.48-3.82,21.74-13.83.08-.66.11-1.32.09-1.98.83.75,1.52,1.49,2.02,2.15,6.24,8.28,5.95,18.59,4.23,28.31-1.64,9.23-7.02,17.23-11.72,25.3-7.44,7.4-15.01,14.49-22.33,21.35-2.01,1.88-4,3.8-5.97,5.73,2.42-7.29,3.58-15.02,3.64-22.68.13-16.87-9.65-39.01-30.07-36.36-8.83,1.14-15.68,6.59-18.57,15.04-2.86,8.36,1.99,17.8,9.04,22.22,8.39,5.27,19.18.64,23.7-7.36,2.48,7.2,2.16,16.18,1.62,23.36-.35,4.57-1.45,9.15-2.65,13.56-.72,2.65-1.46,5.67-2.37,8.49-8.11,8.91-15.82,18.18-23.09,27.78,1.04-6.6,1.19-13.42.26-19.85-2.92-20.2-17.32-37.2-39.11-34.09-9.41,1.35-16.81,10.09-18.99,18.89-2.41,9.72,1.67,19.98,11.02,23.89,8.39,3.51,19.43-1.45,20.78-10.88.72-5.04-.69-9.84-3.59-13.39,2.89.73,5.77,2.45,7.81,4.38,7.22,6.84,9.3,19.19,9.8,28.64.3,5.79-.47,11.56-1.74,17.19-.79,3.49-2.61,7.7-3.26,11.58-7.26,14.03-12.48,29.28-14.59,44.61-.94,6.86-1.15,13.76-.74,20.67.16,2.71,4.14,2.74,4.23,0,1.59-50.5,41.17-88.03,76.84-118.95,36.33-31.49,75.09-65,91.46-111.73,16.97-48.47-1.84-103.27-43.97-132.13C121.33-9.37,61.27-5.98,24.76,29.1,7.48,45.71-2.25,69.69.45,93.66c2.77,24.62,16.85,45.79,40.17,55.05ZM22.86,79.22c.83-9.05,5.57-18.99,11.68-27.27,4.14-5.62,9.77-10.53,15.91-14.68-1.51,3.65-2.27,7.73-2.07,12.03.4,8.51,5.32,16.58,13.13,20.17,1.53.7,3.13,1.18,4.76,1.44-5.68,3.36-10.28,8.76-12.85,16.01-5.67,15.97,5.1,34.65,22.57,34.87,4.3.05,8.73-1.27,12.61-3.48-4.32,5.7-10.4,8.81-17.25,10.63-4.49,1.19-7.09,1.28-12.49,1.02-2.59-.12-2.29-.12-5.37-.78-1.18-.25-2.34-.59-3.5-.92-.41-.12-3.56-1.26-3.14-1.04-9.23-4.01-14.9-10.24-19.53-19.31-4.33-8.47-5.41-18.41-4.47-28.69Z"/>
+</svg>

as-styleguide/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>AS Styleguide – Coaching & Beratung</title>
   <meta name="description" content="Styleguide (HTML/CSS/JS) für Coaching & Beratung – Typografie, Komponenten, Layout-Grids." />
-  <link rel="preload" href="assets/fonts/have-heart-one.otf" as="font" type="font/otf" crossorigin>
+  <link rel="preload" href="assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf" as="font" type="font/ttf" crossorigin>
   <link rel="preload" href="assets/fonts/gilroy/Gilroy-Regular.ttf" as="font" type="font/ttf" crossorigin>
   <link rel="stylesheet" href="styles.css" />
 </head>
@@ -16,7 +16,7 @@
   <header class="site-header" data-header>
     <div class="container header-inner">
       <a class="brand" href="#top" aria-label="Start">
-        <img class="brand-logo" src="assets/img/logo.png" alt="AS – Coaching und Beratung" />
+        <img class="brand-logo" src="assets/img/logo.svg" alt="AS – Coaching und Beratung" />
       </a>
 
       <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
@@ -66,21 +66,26 @@
             <a class="btn btn--secondary btn--lg" href="#produkte">Workbook & Minikurse</a>
           </div>
 
-          <ul class="hero-proof" role="list">
-            <li><span class="icon-dot" aria-hidden="true"></span> CV-Check & Profil-Optimierung</li>
-            <li><span class="icon-dot" aria-hidden="true"></span> Interview-Training (realistische Simulation)</li>
-            <li><span class="icon-dot" aria-hidden="true"></span> Storytelling & Argumentationslinien</li>
-          </ul>
         </div>
 
-        <div class="hero-card">
+        <div class="hero-side">
+          <figure class="hero-visual" aria-label="Atmosphärisches Hero-Bild">
+            <img src="assets/img/person-an-tafel.webp" alt="Coach vor einer Tafel im Workshop-Kontext" />
+          </figure>
+        </div>
+      </div>
+    </section>
+
+    <section class="quickstart-segment" aria-labelledby="quickstart-title">
+      <div class="container">
+        <div class="hero-card quickstart-card-wrap">
           <div class="hero-card-top">
             <div class="pill">Styleguide</div>
             <div class="badge">WP-ready</div>
           </div>
 
-          <div class="card card--elevated">
+          <div class="card card--elevated quickstart-card">
-            <h2 class="h3">Schnellstart-Komponenten</h2>
+            <h2 class="h3" id="quickstart-title">Schnellstart-Komponenten</h2>
             <p class="muted">Buttons, Cards, Formulare, Grids, Sektionen – bereits so aufgebaut, dass du daraus ein WP-Template werden kann.</p>
 
             <div class="stack-sm">
@@ -93,14 +98,13 @@
             <dl class="kv">
               <div><dt>Primärfarbe</dt><dd><code>#EB825E</code></dd></div>
               <div><dt>Text</dt><dd><code>#353535</code></dd></div>
-              <div><dt>Background</dt><dd><code>#FAF7F2</code></dd></div>
+              <div><dt>Background</dt><dd><code>#FFFFFF</code></dd></div>
-              <div><dt>Fonts</dt><dd><code>HaveHeartOne</code> + <code>Gilroy</code></dd></div>
+              <div><dt>Fonts</dt><dd><code>Gilroy</code> (<code>SemiBold Italic</code> f&uuml;r Headlines)</dd></div>
             </dl>
           </div>
         </div>
       </div>
     </section>
-
     <section class="section" id="farben">
       <div class="container">
         <div class="section-head">
@@ -119,9 +123,19 @@
             <div class="swatch-meta"><div class="swatch-title">Ink</div><code>#353535</code></div>
           </div>
 
+          <div class="swatch">
+            <div class="swatch-color" style="background:#FFFFFF"></div>
+            <div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FFFFFF</code></div>
+          </div>
+
           <div class="swatch">
             <div class="swatch-color" style="background:#FAF7F2"></div>
-            <div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FAF7F2</code></div>
+            <div class="swatch-meta"><div class="swatch-title">Surface / Card</div><code>#FAF7F2</code></div>
+          </div>
+
+          <div class="swatch">
+            <div class="swatch-color swatch-color--verlauf"></div>
+            <div class="swatch-meta"><div class="swatch-title">Verlauf / Hero Tile</div><code>#25201E (82% - 72%)</code></div>
           </div>
         </div>
 
@@ -135,14 +149,14 @@
       <div class="container">
         <div class="section-head">
           <h2 class="h2">Typografie</h2>
-          <p class="muted">HaveHeartOne nur für große, prägnante Statements. Gilroy für Struktur, UI und Fließtext.</p>
+          <p class="muted">Nur Gilroy: SemiBold Italic für Hero-/Display-Statements, reguläre Schnitte für Struktur, UI und Fließtext.</p>
         </div>
 
         <div class="grid grid-2">
           <div class="card">
-            <p class="label">Display / Hero (HaveHeartOne)</p>
+            <p class="label">Display / Hero (Gilroy SemiBold Italic)</p>
             <p class="type-sample display-sample">Souverän auftreten. Wirkung erzielen.</p>
-            <p class="muted small">Regel: HaveHeartOne nur H1 + evtl. emotionales H2. Keine Navigation, keine Forms, keine Tabellen.</p>
+            <p class="muted small">Regel: Gilroy SemiBold Italic nur für Hero/Display-Statements. UI, Navigation, Forms und Tabellen in regulären Gilroy-Schnitten.</p>
           </div>
 
           <div class="card">

as-styleguide/styles.css

@@ -1,22 +1,34 @@
-/* (same CSS as earlier, trimmed? keep full enough) */
+/* ==========================================================================
-@font-face{font-family:"HaveHeartOne";src:url("assets/fonts/have-heart-one.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
+   Fonts
+   ========================================================================== */
 @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
 @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
 @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
 @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
+@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf") format("truetype");font-weight:600;font-style:italic;font-display:swap;}
 @font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
 
+/* ==========================================================================
+   Global Tokens (Farben, Spacing, Containerbreite, Shadows)
+   ========================================================================== */
 :root{
-  --accent:#EB825E;--ink:#353535;--canvas:#FAF7F2;
+  --accent:#EB825E;--ink:#353535;--canvas:#FFFFFF;
-  --line-soft:rgba(53,53,53,.12);
+  --surface:#FAF7F2;
-  --line:rgba(53,53,53,.16);
+  --verlauf-start:rgba(37,32,30,.82);
+  --verlauf-end:rgba(37,32,30,.72);
+  --verlauf:linear-gradient(180deg,var(--verlauf-start),var(--verlauf-end));
+  --line-soft:rgba(53,53,53,.09);
+  --line:rgba(53,53,53,.12);
   --ink-80:color-mix(in srgb,var(--ink) 80%,transparent);
   --ink-60:color-mix(in srgb,var(--ink) 60%,transparent);
+  --display-white:#fff;
+  --display-plate:var(--verlauf-start);
+  --display-plate-soft:var(--verlauf-end);
   --radius-md:18px;--radius-lg:26px;
   --shadow-1:0 10px 30px rgba(0,0,0,.06);
   --shadow-2:0 18px 60px rgba(0,0,0,.10);
-  --container:1160px;
+  --container:1380px;
-  --font-display:"HaveHeartOne",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+  --font-display:"Gilroy",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
   --font-sans:"Gilroy",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
 
   --step--1:clamp(.92rem,.85rem + .3vw,1.02rem);
@@ -30,6 +42,9 @@
   --space-1:8px;--space-2:12px;--space-3:16px;--space-4:22px;--space-5:30px;--space-6:44px;--space-7:64px;--space-8:92px;
   --focus:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent);
 }
+/* ==========================================================================
+   Base / Resets
+   ========================================================================== */
 *{box-sizing:border-box;}html{scroll-behavior:smooth;}
 body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;letter-spacing:.01em;}
 h1,h2,h3,h4,p,ul,ol,dl{margin-top:0;}
@@ -38,14 +53,19 @@ p:last-child{margin-bottom:0;}
 a,a:visited{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.16em;text-decoration-thickness:.08em;}
 a:hover{text-decoration-color:var(--accent);}
 img{max-width:100%;height:auto;display:block;}
-.container{width:min(var(--container),calc(100% - 2*var(--space-5)));margin-inline:auto;}
+.container{width:min(var(--container),calc(100% - 2*clamp(14px,2.6vw,36px)));margin-inline:auto;}
 .skip-link{position:absolute;left:-999px;top:10px;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-1);z-index:9999;}
 .skip-link:focus{left:10px;outline:none;box-shadow:var(--focus),var(--shadow-1);}
 .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
 /* Prevent rounded borders from visually disappearing at corners on light surfaces */
 :where(.hero-grid,.hero-copy .eyebrow,.hero-proof,.hero-card .card,.hero-card .kv,.card,.feature,.note,.accordion,.swatch,.btn--secondary,.btn--ghost,.badge--soft,.pill,.tag,.nav-toggle,.site-nav.is-open){background-clip:padding-box;}
 
-.display{font-family:var(--font-display);font-size:var(--step-5);line-height:.95;margin:0 0 var(--space-4);font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;}
+/* ==========================================================================
+   Type Utilities / Display Styles
+   - `--font-display`, `--step-*`, und die Marker/Plate-Werte sind die
+     wichtigsten Stellschrauben für den Hero-Look.
+   ========================================================================== */
+.display{font-family:var(--font-display);font-size:var(--step-5);line-height:.95;margin:0 0 var(--space-4);font-weight:600;font-style:italic;font-synthesis:none;letter-spacing:-.02em;color:var(--display-white);text-shadow:0 3px 14px rgba(0,0,0,.14);}
 .display-accent{position:relative;display:inline-block;}
 .display-accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.22em;background:color-mix(in srgb,var(--accent) 75%,transparent);border-radius:999px;z-index:-1;transform:rotate(-1.3deg);}
 .h2{font-size:var(--step-3);line-height:1.12;margin:0 0 10px;font-weight:600;letter-spacing:-.01em;}
@@ -56,19 +76,41 @@ img{max-width:100%;height:auto;display:block;}
 .label{font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin:0 0 var(--space-2);font-weight:600;}
 .eyebrow{margin:0 0 var(--space-3);font-weight:600;color:var(--ink-80);}
 .type-sample{margin:0 0 var(--space-3);}
-.display-sample{font-family:var(--font-display);font-size:clamp(2.15rem,1.45rem + 2.2vw,3.2rem);line-height:.95;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;padding-bottom:.12em;}
+.display-sample{
+  font-family:var(--font-display);
+  font-size:clamp(2.15rem,1.45rem + 2.2vw,3.2rem);
+  line-height:.95;
+  font-weight:600;
+  font-style:italic;
+  font-synthesis:none;
+  letter-spacing:-.02em;
+  color:var(--display-white);
+  text-shadow:0 3px 14px rgba(0,0,0,.16);
+  padding:.18em .24em .24em;
+  border-radius:18px;
+  border:1px solid rgba(255,255,255,.16);
+  background:
+    radial-gradient(circle at 82% 18%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 48%),
+    linear-gradient(180deg,var(--display-plate),var(--display-plate-soft));
+  box-shadow:0 12px 26px rgba(0,0,0,.10);
+}
 .body-sample{font-size:var(--step-1);line-height:1.55;color:var(--ink-80);}
 
 /* Normalize internal rhythm for major content containers */
 :where(.section-head,.block-head,.card,.feature,.note,.hero-card .card,.accordion-panel,.cta > div:first-child) > :last-child{margin-bottom:0;}
 
-.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--canvas) 85%,transparent);border-bottom:1px solid rgba(53,53,53,.10);}
+/* ==========================================================================
+   Header / Navigation
+   - Logo-Größe: `.brand-logo`
+   - Abstand Navigation: `.header-inner`, `.site-nav`
+   ========================================================================== */
+.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--canvas) 92%,transparent);border-bottom:1px solid rgba(53,53,53,.07);}
 .header-inner{display:flex;align-items:center;gap:var(--space-3);padding:10px 0;min-height:78px;}
-.brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none;color:var(--ink);}
+.brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none;color:var(--ink);flex:0 0 auto;}
 .brand-logo{
-  width:auto;
+  width:clamp(156px,19vw,232px);
-  height:54px;
+  height:auto;
-  max-width:clamp(72px,14vw,120px);
+  max-height:none;
   object-fit:contain;
   object-position:left center;
   display:block;
@@ -85,112 +127,287 @@ img{max-width:100%;height:auto;display:block;}
 @media (max-width:920px){
   .site-nav,.header-cta{display:none;}
   .nav-toggle{display:inline-flex;}
-  .brand-logo{height:46px;max-width:96px;}
+  .brand-logo{width:clamp(132px,34vw,176px);height:auto;max-height:none;}
   .site-nav.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;position:absolute;right:var(--space-5);top:66px;width:min(320px,calc(100vw - 2*var(--space-5)));background:#fff;border:1px solid rgba(53,53,53,.12);border-radius:16px;box-shadow:var(--shadow-2);}
 }
 
-.hero{position:relative;padding:clamp(28px,4vw,56px) 0 clamp(26px,4vw,44px);overflow:clip;}
+/* ==========================================================================
-.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;}
+   Hero Band (Full Width)
+   - Gesamthöhe/Weißraum: `padding`
+   - Farbstimmung: `background` Gradients
+   ========================================================================== */
+.hero{
+  position:relative;
+  padding:clamp(42px,6vw,94px) 0 clamp(46px,7vw,96px);
+  overflow:clip;
+  background:
+    radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--accent) 10%,var(--surface)), transparent 42%),
+    radial-gradient(circle at 88% 14%, color-mix(in srgb,var(--accent) 7%,#fff), transparent 50%),
+    linear-gradient(180deg,
+      color-mix(in srgb,var(--surface) 82%,#fff) 0%,
+      color-mix(in srgb,var(--surface) 64%,#fff) 56%,
+      #fff 100%);
+  border-top:1px solid rgba(53,53,53,.05);
+  border-bottom:1px solid rgba(53,53,53,.06);
+}
+.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
 .hero-orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.80;}
 .hero-orb--1{width:520px;height:520px;left:-180px;top:-140px;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 42%,#fff),transparent 62%);opacity:.6;}
 .hero-orb--2{width:620px;height:620px;right:-230px;top:-190px;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 18%,#fff),transparent 68%);opacity:.5;}
 .hero-wave{display:none;position:absolute;left:0;right:0;bottom:-1px;height:180px;}
 .hero-wave path{fill:color-mix(in srgb,var(--accent) 10%,var(--canvas));}
+
+/* Hero layout:
+   - `grid-template-columns` verschiebt Verhältnis Text/Bild
+   - `gap` steuert den Leerraum zwischen linker und rechter Hero-Spalte */
 .hero-grid{
   position:relative;
+  z-index:1;
   display:grid;
-  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
+  grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);
-  gap:clamp(20px,3.2vw,34px);
+  gap:clamp(28px,4vw,48px);
   align-items:start;
-  padding:clamp(20px,3vw,34px);
+  padding:clamp(8px,1vw,14px) 0;
-  border-radius:30px;
+  border:0;
-  border:1px solid var(--line-soft);
+  border-radius:0;
-  background:
+  background:transparent;
-    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--accent) 10%,#fff), transparent 42%),
+  box-shadow:none;
-    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
-  box-shadow:0 22px 70px rgba(0,0,0,.06);
 }
-.hero-copy{max-width:680px;padding:4px clamp(4px,1vw,12px) 4px 2px;display:grid;align-content:start;}
+.hero-copy{max-width:680px;padding:6px clamp(6px,1.2vw,14px) 6px 2px;display:grid;align-content:start;}
-.hero-copy .eyebrow{display:inline-flex;justify-self:start;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid var(--line-soft);box-shadow:0 8px 24px rgba(0,0,0,.04);margin:0 0 18px;}
+.hero-copy .eyebrow{display:inline-flex;justify-self:start;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,#f3f3f3 42%,#fff);border:1px solid var(--line-soft);box-shadow:0 8px 24px rgba(0,0,0,.03);margin:0 0 22px;}
 .hero-copy .eyebrow::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);}
+
+/* Hero headline:
+   - Größe: `.hero-copy .display` font-size
+   - Braune Flächenform: `.display-line::before` (inset, radius)
+   - Textmarker: `.display-accent::after` (left/right/bottom/height) */
 .hero-copy .display{
   max-width:none;
   display:grid;
   justify-items:start;
   gap:.02em;
-  font-size:clamp(3.05rem,2.1rem + 4vw,4.85rem);
+  font-size:clamp(2.2rem,1.65rem + 2.35vw,3.35rem);
   line-height:1.02;
-  margin:0 0 14px;
+  margin:0 0 18px;
   padding:0 0 .12em;
 }
-.hero-copy .display .display-line{display:inline-block;justify-self:start;width:fit-content;position:relative;z-index:1;}
+.hero-copy .display .display-line{
+  display:inline-block;
+  justify-self:start;
+  width:fit-content;
+  position:relative;
+  z-index:1;
+  isolation:isolate;
+  padding:.12em .26em .14em;
+  margin-left:-.08em;
+  border-radius:.42em;
+}
+.hero-copy .display .display-line::before{
+  content:"";
+  position:absolute;
+  inset:.06em -.02em -.03em -.01em;
+  z-index:-2;
+  border-radius:.48em;
+  border:1px solid rgba(255,255,255,.14);
+  background:
+    radial-gradient(circle at 12% 14%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 54%),
+    linear-gradient(180deg,var(--display-plate),var(--display-plate-soft));
+  box-shadow:0 10px 30px rgba(0,0,0,.14);
+  transform:rotate(-.45deg);
+}
+.hero-copy .display .display-line:nth-child(2){
+  padding-top:.14em;
+  padding-bottom:.18em;
+}
+.hero-copy .display .display-line:nth-child(2)::before{
+  inset:.07em -.02em -.04em -.01em;
+  transform:rotate(.32deg);
+}
+.hero-copy .display .display-line + .display-line{margin-top:.04em;}
+.hero-copy .display .display-accent::after{
+  left:.12em;
+  right:.14em;
+  bottom:.45em;
+  height:.35em;
+  border-radius:.82em .60em .94em .56em / .44em .38em .52em .46em;
+  background:
+    radial-gradient(circle at 10% 48%, rgba(255,255,255,.20), transparent 38%),
+    radial-gradient(circle at 88% 58%, rgba(255,255,255,.10), transparent 46%),
+    radial-gradient(circle at 94% 54%, rgba(0,0,0,.10), transparent 56%),
+    linear-gradient(180deg,
+      color-mix(in srgb,var(--accent) 78%,#fff) 0%,
+      color-mix(in srgb,var(--accent) 88%,transparent) 35%,
+      color-mix(in srgb,var(--accent) 94%,transparent) 68%,
+      color-mix(in srgb,var(--accent) 80%,transparent) 100%);
+  box-shadow:
+    0 .03em 0 color-mix(in srgb,var(--accent) 42%,transparent),
+    0 .01em .18em color-mix(in srgb,var(--accent) 18%,transparent);
+  opacity:.92;
+  transform:rotate(-.9deg) skewX(-1.5deg);
+}
+/* Hero Text + CTA */
 .hero-copy .lead{
   max-width:35ch;
   font-size:clamp(1.02rem,.96rem + .34vw,1.2rem);
-  line-height:1.55;
+  line-height:1.62;
-  margin:0 0 22px;
+  margin:0 0 34px;
 }
-.hero-actions{display:flex;gap:12px;row-gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
+.hero-actions{display:flex;gap:14px;row-gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:0;}
-.hero-proof{
+/* Hero rechte Spalte (Bild steht bewusst für sich, ohne Overlays) */
-  padding:14px 16px;
+.hero-side{
-  margin:2px 0 0;
-  display:grid;
-  gap:10px;
-  list-style:none;
-  color:var(--ink-80);
-  font-weight:500;
-  max-width:46ch;
-  border-radius:18px;
-  border:1px solid var(--line-soft);
-  background:rgba(255,255,255,.55);
-}
-.hero-proof li{display:flex;align-items:flex-start;gap:10px;padding:0;border:0;background:transparent;line-height:1.4;}
-.icon-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);display:inline-block;flex:0 0 auto;translate:0 .38em;}
-.hero-card{
   position:relative;
   display:grid;
-  gap:12px;
+  gap:16px;
+  align-content:start;
   justify-self:stretch;
   align-self:stretch;
   margin:0;
-  padding-left:clamp(6px,1vw,12px);
+  padding-left:0;
+}
+.hero-side::before{display:none;content:"";}
+.hero-card{
+  position:relative;
+  display:grid;
+  gap:22px;
+  align-content:start;
+  justify-self:start;
+  width:min(100%,780px);
+  margin:0;
+  padding-left:0;
 }
 .hero-card::before{display:none;content:"";}
-.hero-card-top{display:flex;justify-content:flex-start;gap:8px;padding-left:2px;}
+.hero-card-top{display:flex;justify-content:flex-start;gap:8px;padding-left:0;}
 .hero-card .pill,.hero-card .badge{box-shadow:var(--shadow-1);}
+.hero-card-top .pill,
+.hero-card-top .badge{
+  flex:0 0 auto;
+  width:auto;
+  height:42px;
+  min-height:0;
+  padding:0 16px;
+  border-radius:999px;
+  line-height:1;
+  font-size:.86rem;
+  white-space:nowrap;
+}
+/* Hero Bild:
+   - `min-height` und `object-position` sind die wichtigsten Bild-Stellschrauben */
+.hero-visual{
+  position:relative;
+  margin:0;
+  border-radius:30px;
+  overflow:hidden;
+  border:1px solid var(--line-soft);
+  background:color-mix(in srgb,var(--surface) 94%,#fff);
+  box-shadow:0 18px 42px rgba(0,0,0,.06);
+  aspect-ratio:auto;
+  min-height:420px;
+  height:100%;
+}
+.hero-visual > img{
+  width:100%;
+  height:100%;
+  object-fit:cover;
+  object-position:center 42%;
+  display:block;
+  filter:saturate(.95) contrast(.98);
+  transform:scale(1.01);
+}
+.hero-visual::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  background:
+    radial-gradient(circle at 82% 18%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 48%),
+    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.18));
+  pointer-events:none;
+}
+/* Quickstart card (separat unter dem Hero, nutzt dieselben Card-Bausteine) */
 .hero-card .card{
   height:100%;
-  padding:26px;
+  padding:30px;
-  background:rgba(255,255,255,.92);
+  background:#fff;
   backdrop-filter:blur(8px);
   border-color:var(--line-soft);
-  box-shadow:0 18px 52px rgba(0,0,0,.08);
+  box-shadow:0 18px 44px rgba(0,0,0,.06);
 }
 .hero-card .h3{margin-bottom:8px;}
 .hero-card .muted{margin-top:0;}
 .hero-card .stack-sm{margin-top:14px;}
-.hero-card .kv{padding:12px 14px;border-radius:16px;background:rgba(250,247,242,.85);border:1px solid var(--line-soft);}
+.hero-card .kv{padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--surface) 82%,#fff);border:1px solid var(--line-soft);}
 .hero-card .kv div{padding:4px 0;}
+/* ==========================================================================
+   Segment direkt unter dem Hero (Schnellstart)
+   ========================================================================== */
+.quickstart-segment{
+  position:relative;
+  padding:clamp(24px,4vw,42px) 0 clamp(34px,5vw,58px);
+  background:var(--canvas);
+  border-bottom:1px solid rgba(53,53,53,.05);
+}
+.quickstart-card-wrap{
+  width:100%;
+  max-width:none;
+  justify-self:stretch;
+  gap:16px;
+}
+.quickstart-card{
+  width:100%;
+  max-width:none;
+}
 @media (max-width:920px){
+  /* Mobile Hero: hier zuerst Hero-Spacing und Bildradius anpassen */
   .hero{padding-top:var(--space-6);}
-  .hero-grid{grid-template-columns:1fr;align-items:start;padding:18px;border-radius:24px;}
+  .hero-grid{grid-template-columns:1fr;align-items:start;padding:0;gap:18px;}
   .hero-copy{max-width:none;padding-block:0;}
-  .hero-copy .display{max-width:100%;font-size:clamp(2.45rem,9vw,4rem);line-height:1.02;}
+  .hero-copy .display{max-width:100%;font-size:clamp(1.95rem,7.2vw,2.95rem);line-height:1.02;}
-  .hero-copy .lead,.hero-proof{max-width:none;}
+  .hero-copy .lead{max-width:none;}
-  .hero-card{max-width:none;justify-self:stretch;margin-top:8px;padding-left:0;border-top:1px solid rgba(53,53,53,.08);padding-top:14px;}
+  .hero-side{margin-top:10px;padding-top:0;gap:12px;}
+  .hero-side{align-self:start;}
+  .hero-card{max-width:none;justify-self:stretch;margin-top:10px;padding-left:0;border-top:1px solid rgba(53,53,53,.08);padding-top:18px;gap:16px;}
+  .quickstart-segment{padding:20px 0 38px;}
+  .quickstart-segment .hero-card{width:100%;max-width:none;margin-top:0;border-top:0;padding-top:0;gap:14px;}
   .hero-card-top{justify-content:flex-start;padding-left:0;}
+  .hero-visual{border-radius:22px;aspect-ratio:16 / 11;min-height:0;}
 }
 
-.section{padding:clamp(52px,7vw,76px) 0;}
+/* ==========================================================================
-.section-head{margin-bottom:clamp(20px,3vw,32px);max-width:78ch;}
+   Sections / Rhythmus (weiß-beige-weiß ...)
+   - Alternation läuft über `main > section:nth-of-type(...)`
+   ========================================================================== */
+.section{padding:clamp(68px,8vw,112px) 0;}
+main > section:not(.hero){
+  background:var(--canvas);
+}
+main > section:nth-of-type(2n+1):not(.hero){
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb,var(--surface) 58%,#fff) 0%,
+      color-mix(in srgb,var(--surface) 46%,#fff) 100%);
+}
+main > section:nth-of-type(2n+1):not(.hero) .card{
+  background:#fff;
+}
+main > section:nth-of-type(2n+1):not(.hero) .card--elevated{
+  background:#fff;
+  box-shadow:0 16px 36px rgba(0,0,0,.05);
+}
+main > section:nth-of-type(2n+1):not(.hero) .card--bordered{
+  background:color-mix(in srgb,#fff 94%,var(--surface));
+  border-color:rgba(53,53,53,.10);
+}
+main > section:nth-of-type(2n+1):not(.hero) :is(.feature,.accordion,.swatch,.note){
+  background:#fff;
+}
+.section-head{margin-bottom:clamp(28px,4vw,44px);max-width:80ch;}
 .section-head .h2,.section-head .h3{margin-bottom:10px;}
 .section-head .muted{max-width:66ch;}
-.section-block{margin-top:var(--space-6);}
+.section-block{margin-top:clamp(42px,5vw,58px);}
-.section-block + .section-block{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid rgba(53,53,53,.08);}
+.section-block + .section-block{margin-top:clamp(56px,7vw,84px);padding-top:clamp(28px,4vw,40px);border-top:1px solid rgba(53,53,53,.07);}
 .block-head{margin-bottom:var(--space-4);max-width:72ch;}
 .block-head .h2,.block-head .h3{margin-bottom:8px;}
 .block-head .muted{margin-bottom:0;}
-.grid{display:grid;gap:var(--space-4);}
+.grid{display:grid;gap:clamp(20px,2.6vw,30px);}
 .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
 .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
 @media (max-width:920px){.grid-2,.grid-3{grid-template-columns:1fr;}}
@@ -199,15 +416,26 @@ img{max-width:100%;height:auto;display:block;}
 .inline{display:flex;gap:10px;align-items:center;}
 .wrap{flex-wrap:wrap;}
 .stack-sm{display:grid;gap:10px;}
-.note{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);border:1px dashed rgba(53,53,53,.22);background:rgba(255,255,255,.55);}
+.note{margin-top:var(--space-6);padding:clamp(18px,2.2vw,24px);border-radius:20px;border:1px dashed rgba(53,53,53,.16);background:color-mix(in srgb,#f2f2f2 36%,#fff);}
 
-.card{background:rgba(255,255,255,.70);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:var(--space-5);}
+/* ==========================================================================
-.card--elevated{background:#fff;box-shadow:var(--shadow-1);border-color:var(--line-soft);}
+   Cards / Panels (globale UI-Flächen)
-.card--bordered{background:rgba(255,255,255,.55);border-color:var(--line);}
+   - Form: `border-radius`
+   - Luft innen: `padding`
+   - Hell/Dunkelwirkung: `background` + `border-color`
+   ========================================================================== */
+.card{background:color-mix(in srgb,var(--surface) 78%,#fff);border:1px solid var(--line-soft);border-radius:28px;padding:clamp(22px,3vw,34px);}
+.card--elevated{background:color-mix(in srgb,var(--surface) 92%,#fff);box-shadow:0 14px 34px rgba(0,0,0,.05);border-color:var(--line-soft);}
+.card--bordered{background:color-mix(in srgb,#f3f3f3 34%,#fff);border-color:rgba(53,53,53,.10);}
 .card > .label + *{margin-top:0;}
 .card > * + .inline{margin-top:12px;}
 .card > * + .stack-sm{margin-top:12px;}
 
+/* ==========================================================================
+   Buttons / Pills / Badges
+   - Button-Höhe vor allem über `padding`
+   - Pill-Höhe vor allem über `padding` + `font-size`
+   ========================================================================== */
 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
 .btn:focus-visible{outline:none;box-shadow:var(--focus);}
 .btn:active{transform:translateY(1px);}
@@ -232,7 +460,10 @@ img{max-width:100%;height:auto;display:block;}
 .kv div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
 .kv dt{font-weight:700;color:var(--ink-80);} .kv dd{margin:0;text-align:right;}
 
-.feature{padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--line-soft);background:rgba(255,255,255,.60);}
+/* ==========================================================================
+   Components (Feature, Product, Accordion)
+   ========================================================================== */
+.feature{padding:clamp(20px,2.7vw,30px);border-radius:28px;border:1px solid var(--line-soft);background:color-mix(in srgb,#f4f4f4 28%,#fff);}
 .feature .h3{margin-bottom:8px;}
 .feature p{margin-bottom:0;line-height:1.45;}
 .feature-icon{width:42px;height:42px;border-radius:16px;background:color-mix(in srgb,var(--accent) 18%,#fff);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:12px;}
@@ -244,14 +475,14 @@ img{max-width:100%;height:auto;display:block;}
 .product-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-4);gap:14px;padding-top:2px;}
 .price{font-size:var(--step-2);font-weight:800;}
 
-.accordion{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);background:rgba(255,255,255,.55);}
+.accordion{border-radius:28px;overflow:hidden;border:1px solid var(--line-soft);background:color-mix(in srgb,#f4f4f4 24%,#fff);}
-.accordion-item{width:100%;text-align:left;background:transparent;border:0;padding:18px;font:inherit;font-weight:700;line-height:1.35;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
+.accordion-item{width:100%;text-align:left;background:transparent;border:0;padding:20px 22px;font:inherit;font-weight:700;line-height:1.35;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
 .accordion-item:first-child{border-top-left-radius:calc(var(--radius-lg) - 1px);border-top-right-radius:calc(var(--radius-lg) - 1px);}
 .accordion-item:focus{outline:none;}
 .accordion-item:focus:not(:focus-visible){box-shadow:none;}
 .accordion-item:focus-visible{outline:none;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);}
 .accordion-item + .accordion-panel{border-top:1px solid rgba(53,53,53,.10);}
-.accordion-panel{padding:0 18px 18px;}
+.accordion-panel{padding:0 22px 22px;}
 .accordion-panel .muted{line-height:1.5;}
 .accordion-icon{width:16px;height:16px;position:relative;}
 .accordion-icon::before,.accordion-icon::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink);}
@@ -260,27 +491,60 @@ img{max-width:100%;height:auto;display:block;}
 
 .cta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);}
 .cta > div:first-child{max-width:38ch;}
-.cta-title{font-family:var(--font-display);font-size:var(--step-4);line-height:1;margin:0 0 10px;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0;}
+.cta-title{
+  font-family:var(--font-display);
+  font-size:var(--step-4);
+  line-height:1;
+  margin:0 0 10px;
+  font-weight:600;
+  font-style:italic;
+  font-synthesis:none;
+  letter-spacing:-.02em;
+  color:var(--display-white);
+  text-shadow:0 3px 14px rgba(0,0,0,.14);
+  display:inline-block;
+  padding:.04em .18em .14em;
+  border-radius:.40em;
+  border:1px solid rgba(255,255,255,.14);
+  background:
+    radial-gradient(circle at 85% 15%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 45%),
+    linear-gradient(180deg,var(--display-plate),var(--display-plate-soft));
+  box-shadow:0 10px 24px rgba(0,0,0,.10);
+}
 .cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
 @media (max-width:920px){.cta{flex-direction:column;align-items:flex-start;} .cta-actions{justify-content:flex-start;}}
 
+/* ==========================================================================
+   Footer
+   ========================================================================== */
 .site-footer{padding:var(--space-6) 0;border-top:1px solid rgba(53,53,53,.10);}
 .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
 .footer-links{display:flex;gap:14px;align-items:center;}
 .footer-links a{text-decoration:none;color:var(--ink);font-weight:700;}
 .footer-links a:hover{text-decoration:underline;text-decoration-color:var(--accent);}
 
-/* Swatches (only for styleguide) */
+/* ==========================================================================
-.swatch{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);background:rgba(255,255,255,.60);}
+   Swatches (nur Styleguide-Demo)
+   ========================================================================== */
+.swatch{border-radius:24px;overflow:hidden;border:1px solid var(--line-soft);background:color-mix(in srgb,#f4f4f4 24%,#fff);}
 .swatch-color{height:90px;}
-.swatch-meta{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.3;}
+.swatch-color--verlauf{
+  background:
+    var(--verlauf),
+    var(--surface);
+}
+.swatch-meta{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.3;}
 .swatch-title{font-weight:800;}
 
+/* ==========================================================================
+   Responsive (global)
+   - Haupt-Breakpoint: 920px
+   ========================================================================== */
 @media (max-width:920px){
-  .section{padding:48px 0;}
+  .section{padding:56px 0;}
-  .section-head{margin-bottom:22px;}
+  .section-head{margin-bottom:26px;}
-  .section-block{margin-top:34px;}
+  .section-block{margin-top:38px;}
-  .section-block + .section-block{margin-top:42px;padding-top:26px;}
+  .section-block + .section-block{margin-top:50px;padding-top:30px;}
   .kv{grid-template-columns:1fr;gap:8px;}
   .kv div{justify-content:flex-start;gap:10px;flex-wrap:wrap;}
   .kv dd{text-align:left;}