Swiss-Editorial Minimalist (SKILLS.md v3.1)

Eine Seite, die von einem Modell erstellt wurde, sieht normalerweise aus wie der Durchschnitt aller Seiten, die es gesehen hat: ein Gradient-Hero, eine Reihe abgerundeter Karten mit Emoji-Symbolen, ein Schatten unter jedem Button und ein Tailwind-CDN, das eine Regenbogen-Palette lädt. Nichts daran ist falsch, und nichts daran wurde entschieden.

Diese Datei ersetzt diese Standardwerte durch Entscheidungen. Sie deckt drei Dinge ab: den Hausstil (was gezeigt und was weggelassen wird), die technischen Regeln, die ihn stützen (Token, Skalen, Breakpoints, Barrierefreiheit), und die Prüfungen, die das Ergebnis vor der Auslieferung kontrollieren.

Befolge die Regeln wie geschrieben. Wenn eine Anfrage mit ihnen in Konflikt steht, sagt Abschnitt 0, was zu tun ist.

0. Meta-Regeln (zuerst lesen)

Was zu tun ist, wenn du diese Datei erhältst

Lies die gesamte Datei, bevor du Code schreibst. Die Regeln hängen voneinander ab.
Frage nicht nach Klärung von etwas, das diese Datei bereits entscheidet. Führe es mit angemessenen Annahmen aus und nenne sie in einer Zeile.
Wenn die Anfrage mit dem Hausstil in Konflikt steht (z. B. "bunt", "verspielt", "Gradient-Hero", "Emoji-Symbole", "20px abgerundete Karten"), bestätige einmal, bevor du fortfährst:

Diese Anfrage verletzt Abschnitt X von SKILLS.md. Ich werde sie im Swiss-Editorial Minimalist-Stil interpretieren, es sei denn, du möchtest den Leitfaden verlassen.

Warte auf die Antwort und baue dann.
Standardausgabe ist eine vollständige HTML-Datei mit inline <style> und <script>. Liefere keine Fragmente aus, es sei denn, der Benutzer fragt danach.
Beginne CSS immer mit dem :root-Block aus Abschnitt 12.

Wie dieser Stil benannt wird

Verwende diese Begriffe, damit das Vokabular konsistent bleibt. Verwende nicht "modern", "sauber" oder "glatt" allein; sie sagen nichts Bestimmtes aus.

"Swiss-Editorial Minimalist": der Standard, beschrieben in dieser Datei.
"Soft Brutalism": dickere Ränder und ein gröberes Raster.
"Neo-Brutalist Editorial": eine Akzentfarbe hinzugefügt und ein harter Offset-Schatten. Schatten sind im Standardstil verboten, daher diesen Namen nur verwenden, wenn der Benutzer explizit danach fragt.
"Monochrome Magazine": typografielastig, ohne illustrierte Karten.

1. Design-Philosophie

Drei Prinzipien, keines verhandelbar:

Inhalt ist König; Typografie ist die Architektur. Es gibt keine dekorativen Illustrationen. Die große Überschrift ist das wichtigste visuelle Element.
Struktur bleibt sichtbar. Ränder, Raster und Abschnittsnummern erscheinen so, wie sie sind. Sie werden nicht versteckt.
Monochrom zuerst, Farbe später. Der Standard ist Schwarz, Weiß und Grau. Farbe erscheint nur im Dunkelmodus oder als minimaler Akzent.

Die Seite soll ruhig, fest, intelligent und redaktionell wirken, wie ein gedrucktes Magazin, das von Ingenieuren erstellt wurde.

2. Palette

Hellmodus (Standard)

:root {
  --bg:     #f5f5f5; /* Haupthintergrund, nicht reinweiß */
  --ink:    #111111; /* Primärtext, nicht reinschwarz */
  --muted:  #666666; /* Sekundärtext */
  --line:   #e0e0e0; /* Ränder und Trennlinien */
  --card:   #eeeeee; /* Kartenhintergrund */
  --accent: #d4d4d4; /* neutraler Akzent */
  --dark:   #0a0a0a; /* kontrastreiche Abschnitte (Aussage, Footer) */
  --white:  #ffffff;
}

Dunkelmodus

body.dark {
  --bg:     #121212;
  --ink:    #f0f0f0;
  --muted:  #999999;
  --line:   #333333;
  --card:   #1e1e1e;
  --accent: #2a2a2a;
  --dark:   #050505;
  --white:  #181818;
}

Farbregeln (obligatorisch)

Der Hintergrund des Body ist niemals #fff. Verwende Off-White #f5f5f5.
Text ist niemals #000. Verwende #111.
Die Markenfarbe erscheint höchstens ein- oder zweimal pro Seite und immer über eine CSS-Variable, niemals hartcodiert.
Helle Farben sind verboten für Status, Symbole und Text. Beispiele für Verbotenes: emerald-500, green-600, red-500, blue-500, yellow-400, #27c93f, #ff5f56, #ffbd2e. Ersetze sie durch monochrome Symbole (●, ▲, ✕, →) in var(--ink) oder var(--muted).
Kontrastabschnitte (Aussage, CTA, Footer) verwenden var(--dark) mit hellem Text.
Dunkelmodus ist erforderlich. Befolge standardmäßig prefers-color-scheme und lasse den Benutzer die Wahl überschreiben, indem du die Wahl in localStorage speicherst. Der Umschalter verwendet das obligatorische Markup in Abschnitt 5 ("Theme-Umschalter").

3. Typografie

Schriftkombination

Überschrift: 'Space Grotesk'  (oder Inter Tight, General Sans, Neue Montreal)
Fließtext:   'DM Sans'        (oder Inter, Satoshi, IBM Plex Sans)
Monospace:   'JetBrains Mono' (oder System-Monospace)

Verwende keine dekorativen, Schreib- oder Serifenschriften für den Fließtext. Eine Serifenschrift ist nur für Zitate oder Unterschriften erlaubt (z. B. Georgia, kursiv).

Schriftskala (clamp ist erforderlich, damit die Schrift ohne Media Queries skaliert)

/* Hero H1 */
font-size: clamp(55px, 5.6vw, 94px);   /* oder clamp(32px, 4.3vw, 62px) für einen schmalen Hero */
line-height: 1.025;
letter-spacing: -0.07em;               /* immer negativ */
font-weight: 500;                      /* nicht 700, nicht 400 */

/* Abschnitts-H2 */
font-size: clamp(42px, 4.2vw, 69px);
line-height: 1.08;
letter-spacing: -0.06em;
font-weight: 500;

/* Karten-H3 */
font-size: clamp(22px, 2.2vw, 27px);
line-height: 1.2;
letter-spacing: -0.04em;
font-weight: 500;

/* Fließtext */
font-size: 16px–18px;
line-height: 1.7–1.8;
color: var(--muted);

/* Micro / Augenbraue / Label */
font-size: 12px;
letter-spacing: 0.15em–0.17em;
font-weight: 700;
text-transform: uppercase;

Harte Typografie-Regeln

Überschriften verwenden immer einen negativen Buchstabenabstand (zwischen -0.04em und -0.07em). Dies ist das Markenzeichen des Stils.
Das Schriftgewicht der Überschrift ist 500. Fett (700) glättet das redaktionelle Gefühl.
Augenbrauen und Micro-Labels sind immer GROSSGESCHRIEBEN mit weitem Tracking (0.15em oder mehr).
Abschnittsnummern (01, 02, 03) erscheinen als Micro-Labels. Verstecke sie nicht.
Ein Punkt am Ende einer Schlagzeile kann optional als Akzent dienen:
```
<h1>Judul.<span style="color:var(--muted)">.</span></h1>
```
Fließtext ist linksbündig. Zentriere keine langen Absätze.

4. Layout und Raster

Container

.wrap {
  max-width: 1440px;
  margin: auto;
  padding: 0 clamp(24px, 5vw, 84px);
}

Vertikaler Abstand

Zwischen Abschnitten: padding: 130px 0 auf dem Desktop, reduziert auf 85px auf Mobilgeräten.
Header-Höhe: 88px auf dem Desktop, 75px auf Mobilgeräten.
Abstand zwischen Karten: 15–16px. Halte es eng, nicht 24px oder mehr.

Häufige Raster-Muster

/* Asymmetrischer Hero */
.hero { grid-template-columns: 1.04fr .96fr; }

/* Zweispaltiger Abschnittskopf */
.section-head { grid-template-columns: 1fr 1fr; align-items: end; }

/* Dreispaltige Funktionen */
.features { grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* Aussage */
.statement-grid { grid-template-columns: 1fr 1fr; gap: 60px; }

/* Testimonial (siehe Abschnitt 8) */
.testimonial-grid { grid-template-columns: 1.2fr .8fr; gap: 60px; }

Layout-Regeln (obligatorisch)

Abschnitte werden durch eine 1px var(--line)-Grenze getrennt, nicht durch einen Schatten oder einen anderen Hintergrund.
Vermeide große Rahmenabrundungen. Buttons und Karten erhalten höchstens 4px. Nur Bilder und Screenshots erhalten 12–22px.
Verwende align-items: end für Abschnittsköpfe, damit die Überschrift und der Absatz auf derselben Grundlinie liegen. Dies ist der redaktionelle Trick.
Asymmetrische Raster (1.04fr / .96fr) sehen besser aus als 1fr / 1fr.
Zentriere niemals Fließtext. Richte immer links aus.
Jeder Abschnitt benötigt einen border-top oder border-bottom von 1px var(--line).

5. Komponenten

Buttons

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 4px;                 /* fast quadratisch */
  padding: 15px 20px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); background: #333333; }
}

/* Varianten */
.btn.outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.light   { background: var(--bg); color: var(--ink); border-color: var(--bg); }

Button-Regeln:

Jeder Button hat ein Pfeilsymbol: ↗ für einen externen Link, ↓ zum Scrollen.
Hover hebt den Button um -2px an, nur innerhalb von @media (hover: hover). Es skaliert nicht und fügt keinen Schatten hinzu.
Verwende niemals #fff für .btn.light. Verwende var(--bg).

Funktionskarten

┌─────────────────────────┐
│  [SVG-Strichzeichnung 8:5]     │  ← abstrakte monochrome Illustration oder leer
├─────────────────────────┤
│  LABEL MICRO            │  ← Großbuchstaben, breites Tracking
│  Kartenüberschrift.           │  ← Space Grotesk 24–27px
│  Beschreibung 1–2 Sätze  │  ← muted, 14px
└─────────────────────────┘

Hintergrund var(--card), kein Rahmenradius (oder höchstens 4px).
Kein Rahmen (die Karte verschmilzt mit dem Hintergrund) oder 1px solid var(--line).

Hover: transform: translateY(-5px), nur innerhalb von @media (hover: hover):

@media (hover: hover) { .card:hover { transform: translateY(-5px); } }

Die Illustration ist eine SVG-Strichzeichnung mit stroke-width: 1.2px, fill: none, in der Schriftfarbe. Kein Foto, kein Gradient, kein Emoji.

Header

Höhe 88px, border-bottom: 1px solid var(--line).
Marke: 34px Logo und der Name in Space Grotesk 22px, letter-spacing: -1.1px.
Navigation: 14px, Gewicht 600, Abstand 36px.
Aktionen: Theme-Umschalter (Sonne/Mond-Symbol, obligatorisches Markup in "Theme-Umschalter" unten), der CTA-Button und der Hamburger auf Mobilgeräten.
Die mobile Navigation öffnet sich als absolutes Panel unterhalb des Headers und schließt bei Escape.
Der Hamburger benötigt aria-label, aria-expanded und aria-controls. Der Theme-Umschalter benötigt aria-label und aria-pressed (siehe unten).

Theme-Umschalter (obligatorisches Markup)

Jede Seite hat einen Dunkelmodus-Umschalter, und dieser verwendet immer dieses Markup. Zeichne die Symbole nicht neu, tausche sie nicht gegen Emojis aus oder füge ein Textlabel hinzu. Die SVG-Pfade, die id-Werte und das aria-label sind festgelegt.

<div class="header-actions">
  <!-- Dunkelmodus-Umschalt-Button -->
  <button id="theme-toggle" type="button" class="theme-toggle" aria-label="Dark/Light-Modus umschalten" aria-pressed="false">
    <!-- Sonnensymbol (im Hellmodus ausgeblendet, im Dunkelmodus sichtbar) -->
    <svg id="sun-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <circle cx="12" cy="12" r="5"></circle>
      <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
    </svg>
    <!-- Mondsymbol (im Hellmodus sichtbar, im Dunkelmodus ausgeblendet) -->
    <svg id="moon-icon" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.8" aria-hidden="true">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </button>
  <!-- CTA-Button und Hamburger gehören hierher, innerhalb desselben Wrappers -->
</div>

.header-actions { display: flex; align-items: center; gap: 16px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;                    /* Zielgröße für Touch */
  min-height: 44px;
  padding: 8px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}
@media (hover: hover) {
  .theme-toggle:hover { background: var(--card); }
}
.theme-icon { width: 20px; height: 20px; }

/* Symbolstatus folgt body.dark, daher kein Klassenwechsel in JavaScript */
#sun-icon  { display: none; }
#moon-icon { display: block; }
body.dark #sun-icon  { display: block; }
body.dark #moon-icon { display: none; }

<!-- Erstes Element innerhalb von <body>, damit das gespeicherte Design vor dem ersten Paint angewendet wird -->
<script>
  (function () {
    var KEY = 'theme';
    var saved = null;
    try { saved = localStorage.getItem(KEY); } catch (e) {}
    var dark = saved ? saved === 'dark'
                     : window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.body.classList.toggle('dark', dark);

    document.addEventListener('DOMContentLoaded', function () {
      var btn = document.getElementById('theme-toggle');
      if (!btn) return;
      btn.setAttribute('aria-pressed', String(document.body.classList.contains('dark')));
      btn.addEventListener('click', function () {
        var isDark = document.body.classList.toggle('dark');
        btn.setAttribute('aria-pressed', String(isDark));
        try { localStorage.setItem(KEY, isDark ? 'dark' : 'light'); } catch (e) {}
      });
    });
  })();
</script>

Theme-Umschalter-Regeln:

Behalte den Wrapper (.header-actions), den Button id="theme-toggle" und die Symbol-IDs sun-icon und moon-icon genau so bei, wie sie geschrieben sind. Skripte und die Checkliste suchen danach.
Mond wird im Hellmodus angezeigt (Klick, um in den Dunkelmodus zu wechseln). Sonne wird im Dunkelmodus angezeigt (Klick, um in den Hellmodus zu wechseln). Der Standardzustand ist hell, es sei denn, prefers-color-scheme: dark oder eine gespeicherte Wahl sagt etwas anderes.
Der Button bezieht seine Farbe nur aus Variablen: var(--ink) für Symbol und Text, var(--line) für den Rand, var(--card) für den Hover-Hintergrund. Hartcodiere niemals eine Farbe.
Der Rahmenradius beträgt höchstens 4px, die Zielgröße für Touch ist mindestens 44×44px, und der Hover-Zustand befindet sich innerhalb von @media (hover: hover).
Die Symbole sind 20px, stroke="currentColor", stroke-width="1.8", fill="none", mit aria-hidden="true". Der Button trägt das aria-label.
Verwende aria-pressed auf diesem Button. aria-expanded ist für den Hamburger, nicht für den Theme-Umschalter.
Speichere die Wahl in localStorage unter dem Schlüssel theme, mit den Werten light oder dark. Umfasse Speicherzugriffe mit try/catch.
Der Umschalter funktioniert ohne Tailwind. Das ursprüngliche Snippet verwendete Tailwind-Utility-Klassen (flex items-center gap-4, p-2, w-5 h-5, hidden/block), und diese sind hier durch das obige Vanilla-CSS ersetzt, da das Tailwind-CDN verboten ist (Abschnitt 10). Wenn ein Projekt bereits Tailwind mit einem Build-Schritt verwendet, können die Utility-Klassen bleiben, aber die Farbe muss als text-[var(--ink)] geschrieben werden. Die Form text.var(--ink) ist ein Tippfehler und tut nichts.

Footer

Hintergrund var(--dark) mit hellem Text.
Enthält: Markenname, Links, Social Icons, Copyright.
Obere Grenze: 1px solid var(--line).
Raster: 2–4 Spalten, je nach Inhalt.

6. Anti-Patterns (niemals verwenden)

Gradient-Hintergründe – außer für einen dezenten Hell-Dunkel-Übergang im Statement-Bereich.
Runde Avatare – verwende stattdessen quadratische oder rechteckige Bilder mit 4px Rahmenradius.
Emojis als Icons – ersetze durch SVG-Strichzeichnungen oder Textsymbole.
Schatten – box-shadow: none überall. Keine Ausnahmen.
Helle Akzentfarben (Rot, Grün, Blau, Gelb) – siehe Palette in Abschnitt 2.
Große Rahmenradien (>4px für UI-Elemente) – nur Bilder ausgenommen.
Zentrierter Fließtext – immer linksbündig.
"Moderne" schwammige Begriffe – verwende stattdessen die spezifischen Namen aus Abschnitt 0.

7. Checkliste vor der Auslieferung

Führe diese Prüfungen aus, bevor du die Seite auslieferst:

8. Testimonials

Verwende ein Zitat in kursiver Schriftart (z. B. Georgia) für das Testimonial.
Füge Name, Titel und Unternehmen in Kleinbuchstaben darunter ein.
Füge ein kleines Porträt im quadratischen Format mit 4px Rahmenradius hinzu.

9. Aussage-Bereich

Große Überschrift, die die Mission zusammenfasst.
Hintergrund var(--dark) mit weißem Text.
Optional ein CTA-Button.

10. Verbotene Abhängigkeiten

Tailwind CDN – nicht erlaubt. Ein Build-Schritt ist erlaubt, aber kein externes Skript.
jQuery – nicht nötig.
Font Awesome – alle Symbole werden als SVG inline gesetzt.
Google Analytics – kann hinzugefügt werden, ist aber nicht standardmäßig enthalten.

11. Responsive Verhalten

Hero wird auf Mobilgeräten vertikal gestapelt.
Header reduziert sich auf 75px Höhe.
Kartenraster werden auf Mobilgeräten einspaltig.
Navigation erscheint als Overlay-Panel.

12. CSS-Variablen (`:root`)

:root {
  /* Farben */
  --bg:     #f5f5f5;
  --ink:    #111111;
  --muted:  #666666;
  --line:   #e0e0e0;
  --card:   #eeeeee;
  --accent: #d4d4d4;
  --dark:   #0a0a0a;
  --white:  #ffffff;

  /* Typografie */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Abstände */
  --gap-sm:  15px;
  --gap-md:  24px;
  --gap-lg:  60px;
  --gap-xl:  130px;

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 22px;
}

Ende von SKILLS.md v3.1

In Ihrer bevorzugten KI fragen

Dokumentation