{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "blueprint-raster-sichtbar",
 "name": "Sichtbares Raster (Swiss/Blueprint-Linien)",
 "name_en": "Visible grid / blueprint grid layout",
 "kurz": "Hero eines Leipziger Markenbüros auf einem sichtbaren 12-Spalten-Achsraster: Linien zeichnen sich, ein Fadenkreuz meldet Achse und Zeile, drei Varianten von Blueprint bis Punktmatrix.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "technisch",
  "präzise",
  "swiss",
  "kühl",
  "minimal"
 ],
 "technik": [
  "css",
  "css-grid",
  "subgrid",
  "svg"
 ],
 "technik_gruppen": [
  "css",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das Spaltenraster der Seite wird sichtbar: feine 1px-Linien für Spalten und Sektionen, oft mit kleinen Plus-Markern an den Schnittpunkten. Inhalte rasten exakt auf diese Linien ein. Zellen werden durch Linien abgegrenzt, nicht durch Karten mit Schatten. Dazu kommen technische Beschriftungen in Mono-Schrift: Indexnummern, Achsen, Koordinaten, Abschnittscodes. Beim Hover füllt sich eine Rasterzelle oder ihre Linien leuchten auf.",
  "warum_es_wirkt": "Die Seite zeigt offen, wie sie konstruiert ist, wie eine technische Zeichnung oder ein Schweizer Plakat. Das wirkt präzise, ehrlich und hochwertig, ganz ohne Dekoration.",
  "wann_einsetzen": "Tech- und Entwicklerprodukte, Architektur und Ingenieurwesen, Studios mit systematischer Haltung, Dokumentationen, typolastige Portfolios.",
  "wann_nicht": "Bei warmen, emotionalen Marken (Kinder, Wellness, Food). Und immer dann, wenn das Raster nicht konsequent eingehalten wird: Sichtbare Linien entlarven jede Ungenauigkeit.",
  "varianten": [
   "Blueprint-Linien mit Plus-Markern an den Kreuzungen (Vercel-Stil)",
   "Punktmatrix als Hintergrund",
   "Swiss-Raster mit sichtbaren Spaltenlinien und großer Grotesk",
   "Nur Zeilenlinien für Listen und Tabellen",
   "Extrem breites Mehrspalten-Raster als Experimentier-Vorlage"
  ],
  "umsetzung": "Linien nicht als Hintergrundbild über alles legen, sondern als Kanten der Rasterzellen (border-inline-start auf Spalten, border-block auf Sektionen). Dann bleiben sie bei jedem Umbruch richtig. Feine Spalten-Hilfslinien kommen als Overlay mit repeating-linear-gradient im selben Spaltenmaß dazu (CSS-Variablen --cols, --gutter). Plus-Marker als ::before und ::after oder als kleine SVGs an den Schnittpunkten. subgrid hält verschachtelte Inhalte auf den Hauptlinien. Ein Akzent, sonst Schwarz und Weiß, Mono-Schrift für Labels. Tailwind nutzt 1px-Linien mit 5 % Schwarz und schraffierte Stege (315°, 10 × 10 px). Soll sich das Raster zeichnen, die Kanten als linear-gradient-Hintergrund anlegen und deren Größe über @property animieren.",
  "mobil": "Raster auf 2 bis 4 Spalten reduzieren, die Linien bleiben. Plus-Marker nur an den Sektionskanten. Hover-Effekte werden zu Tippen.",
  "reduzierte_bewegung": "Unkritisch, das Raster ist statisch. Linien-Aufbau und weiche Folgebewegungen weglassen.",
  "barrierefreiheit": "Linien sind dekorativ und gehören ins CSS, nicht in den DOM. Text braucht ausreichend Kontrast zum Linienmuster. Linien nie als einzigen Trenner für Bedeutung nutzen, Tabellenspalten etwa zusätzlich mit Überschriften."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Schraffur 10 × 10 px, Linie 1px",
  "sonstiges": "Linienfarbe Schwarz 5 % (Tailwind)",
  "herkunft": "beobachtet",
  "quelle": "https://tailwindcss.com/"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Vercel / Geist Design System",
   "url": "https://vercel.com/design/grid",
   "auszeichnung": "",
   "beobachtung": "Eigene Grid-Komponente im Geist Design System; laut setproduct-Artikel prägt Vercel den „Blueprint Grid“-Stil (neben Stripe, Linear, Tailwind, Supabase, Railway).",
   "art": "artikel",
   "browser_gemessen": true
  },
  {
   "seite": "Rauno Freiberg – Craft: Vercel",
   "url": "https://rauno.me/craft/vercel",
   "auszeichnung": "",
   "beobachtung": "Laut setproduct die maßgebliche Aufschlüsselung des Vercel-Ansatzes.",
   "art": "artikel"
  },
  {
   "seite": "Wide (BL/S®) – Open-Source-Grid-Experiment",
   "url": "https://tympanus.net/codrops/2026/09/28/wide-template/",
   "auszeichnung": "Codrops-Artikel 09/2026",
   "beobachtung": "Nur Titel in Suchergebnissen gesehen („Take It, Break It, Make It Yours: Inside Wide, an Open Source Grid Experiment by BL/S®“); Inhalt nicht abrufbar – unsicher.",
   "art": "artikel"
  },
  {
   "seite": "Vercel",
   "url": "https://vercel.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 3pcfy0ddft9qj.js, 11_w9gzy6t920.css): Geist-Grid-Komponente mit data-grid-guides (sichtbare Hilfslinien) und data-grid-cell, Zeilen/Spalten über CSS-Variablen.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Tailwind CSS",
   "url": "https://tailwindcss.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Rasterspalten mit border-x in --pattern-fg und schraffierten Stegen bg-[repeating-linear-gradient(315deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)], bg-size 10px, bg-fixed, --pattern-fg Schwarz mit 5 %.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Complete Guide to Blueprint Grid Design (Setproduct)",
   "url": "https://www.setproduct.com/blog/complete-guide-to-blueprint-grid-design"
  },
  {
   "titel": "Geist Grid (Vercel)",
   "url": "https://vercel.com/design/grid"
  }
 ],
 "kombinierbar_mit": [
  "meta-labels-hud-typografie",
  "schrift-hero-viewportbreit",
  "projektindex-hover-vorschau",
  "broken-grid-asymmetrisch"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege; Awwwards-Inspirationen entfernt."
  ],
  "kategorie_alt": "Section-Layout"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Hero eines Leipziger Markenbüros auf einem sichtbaren 12-Spalten-Achsraster: Linien zeichnen sich, ein Fadenkreuz meldet Achse und Zeile, drei Varianten von Blueprint bis Punktmatrix.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "raster": "grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); --cols 12 ab 821px, 8 von 641 bis 820px, 4 bis 640px; kein gap (Steg 0), Zeilen auto 1fr auto",
   "subgrid": "Kopfzeile grid-column 1 / -1 mit grid-template-columns: subgrid; Navigation auf den Spalten 5 bis 8",
   "linie": "1px",
   "zellkanten": "jede Zelle zeichnet ihre obere und linke Kante als linear-gradient-Hintergrund (Größe var(--kx) 1px bzw. 1px var(--ky)); rechte und untere Außenkante am Raster (::after)",
   "hilfslinien": "repeating-linear-gradient(to right, var(--hilfe) 0 1px, transparent 1px calc(100% / var(--cols))) auf .raster::before",
   "stege": "Breite clamp(16px, 4vw, 56px); repeating-linear-gradient(315deg, var(--muster) 0 1px, transparent 0 50%) 0 0 / 10px 10px fixed (Tailwind gemessen)",
   "blueprint": "Papier #f6f5f1, Tinte #111214, Zellkante rgba(17, 18, 20, .13), Hilfslinie rgba(17, 18, 20, .05) (Tailwind gemessen: 5 %), Steg-Schraffur 5 %, Plus-Marker 11px rgba(17, 18, 20, .6), Akzent #2a4fe8",
   "swiss": "Papier #f2f0ea, Tinte #121212, Spaltenlinien rgba(18, 18, 18, .12), Zeilenlinien rgba(18, 18, 18, .85), senkrechte Zellkanten und Marker aus, Titel clamp(46px, 7.7vw, 132px) / 650 / letter-spacing -.06em / line-height .88, Akzent #e1301a",
   "matrix": "Grund #0f2a4d, Text #edf1f7, Punkte radial-gradient(circle at 1px 1px, rgba(237, 241, 247, .3) 1px, transparent 1.4px) 0 0 / calc(100% / var(--cols) / 2) 24px, Zellkante rgba(237, 241, 247, .22), Marker Kreis 7px, Akzent #8fd8ff, Bilder grayscale(1) mit mix-blend-mode luminosity",
   "plus_marker": "::before (oben links) und ::after (oben rechts) der Zellen, je 11 × 11 px aus zwei 1px-Verläufen, um 5px nach außen versetzt",
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out) für Aufbau und Variantenwechsel",
   "aufbau": "Zellkanten --kx/--ky 0 % → 100 % in 1200 ms, Versatz 60 ms je Zelle; Außenkante 1200 ms ab 300 ms; Hilfslinien per Maske linear-gradient(172deg), --zieh 0 % → 130 % in 1400 ms; Marker scale 0 → 1 und rotate -90° → 0 in 700 ms ab 500 ms plus Versatz; Inhalte opacity 0 → 1 und translateY 12px → 0 in 900 ms ab 300 ms plus Versatz",
   "animierbar": "@property --kx, --ky, --zieh (<percentage>) und --schraffur (<color>)",
   "hover_ms": 150,
   "hover": "Zelle schraffiert: repeating-linear-gradient(315deg, Akzent 24 % (Swiss 30 %, Matrix 32 %) 0 1px, transparent 0 50%) 10 × 10 px, Fläche Akzent 3,5 bis 5 %, outline 1px Akzent mit outline-offset -1px, alles 150 ms linear; Projektbild scale 1.035 in 900 ms expo.out",
   "fadenkreuz": "1px Linien im Akzent über das ganze Raster, folgen dem Zeiger mit Lerp 0.22 je Frame (auf 60 fps normiert); Etikett Spalte / Zeile · x, y in Geist Mono 10px; Lineal-Nummer und Zeilenbuchstabe leuchten mit",
   "variantenwechsel": "Farben 600 ms expo.out, Linien zeichnen sich neu",
   "typo": "Titel Instrument Sans clamp(42px, 6.6vw, 112px) / 500 / letter-spacing -.045em / line-height .94, Akzentwort Instrument Serif Italic; Labels Geist Mono 11px versal, Laufweite .14em; Lineal 10px",
   "innenabstand": "clamp(12px, 1.35vw, 20px)",
   "vorfuehrung_runde_ms": "7600 je Variante, 22800 für alle drei"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover-Fadenkreuz. Tippen ins Raster setzt Fadenkreuz und Zellfüllung an die Tippstelle, Tippen außerhalb nimmt beides weg. Raster mit 4 Spalten: Titel und Text über die volle Breite, Arbeiten paarweise; Plus-Marker an allen Zellkanten, Stege 16 px.",
  "reduziert": "Kein Linien-Aufbau, keine Übergänge: Raster, Linien und Marker stehen sofort. Fadenkreuz springt ohne Lerp an die Zeigerposition, Bild zoomt nicht, Variantenwechsel springt. Die Werte-Leiste meldet „Aufbau aus“.",
  "korrekturen": {
   "beschreibung": "Das Spaltenraster der Seite wird sichtbar: feine 1px-Linien für Spalten und Sektionen, oft mit kleinen Plus-Markern an den Schnittpunkten. Inhalte rasten exakt auf diese Linien ein. Zellen werden durch Linien abgegrenzt, nicht durch Karten mit Schatten. Dazu kommen technische Beschriftungen in Mono-Schrift: Indexnummern, Achsen, Koordinaten, Abschnittscodes. Beim Hover füllt sich eine Rasterzelle oder ihre Linien leuchten auf.",
   "warum_es_wirkt": "Die Seite zeigt offen, wie sie konstruiert ist, wie eine technische Zeichnung oder ein Schweizer Plakat. Das wirkt präzise, ehrlich und hochwertig, ganz ohne Dekoration.",
   "wann_einsetzen": "Tech- und Entwicklerprodukte, Architektur und Ingenieurwesen, Studios mit systematischer Haltung, Dokumentationen, typolastige Portfolios.",
   "wann_nicht": "Bei warmen, emotionalen Marken (Kinder, Wellness, Food). Und immer dann, wenn das Raster nicht konsequent eingehalten wird: Sichtbare Linien entlarven jede Ungenauigkeit.",
   "varianten": [
    "Blueprint-Linien mit Plus-Markern an den Kreuzungen (Vercel-Stil)",
    "Punktmatrix als Hintergrund",
    "Swiss-Raster mit sichtbaren Spaltenlinien und großer Grotesk",
    "Nur Zeilenlinien für Listen und Tabellen",
    "Extrem breites Mehrspalten-Raster als Experimentier-Vorlage"
   ],
   "umsetzung": "Linien nicht als Hintergrundbild über alles legen, sondern als Kanten der Rasterzellen (border-inline-start auf Spalten, border-block auf Sektionen). Dann bleiben sie bei jedem Umbruch richtig. Feine Spalten-Hilfslinien kommen als Overlay mit repeating-linear-gradient im selben Spaltenmaß dazu (CSS-Variablen --cols, --gutter). Plus-Marker als ::before und ::after oder als kleine SVGs an den Schnittpunkten. subgrid hält verschachtelte Inhalte auf den Hauptlinien. Ein Akzent, sonst Schwarz und Weiß, Mono-Schrift für Labels. Tailwind nutzt 1px-Linien mit 5 % Schwarz und schraffierte Stege (315°, 10 × 10 px). Soll sich das Raster zeichnen, die Kanten als linear-gradient-Hintergrund anlegen und deren Größe über @property animieren.",
   "mobil": "Raster auf 2 bis 4 Spalten reduzieren, die Linien bleiben. Plus-Marker nur an den Sektionskanten. Hover-Effekte werden zu Tippen.",
   "reduzierte_bewegung": "Unkritisch, das Raster ist statisch. Linien-Aufbau und weiche Folgebewegungen weglassen.",
   "barrierefreiheit": "Linien sind dekorativ und gehören ins CSS, nicht in den DOM. Text braucht ausreichend Kontrast zum Linienmuster. Linien nie als einzigen Trenner für Bedeutung nutzen, Tabellenspalten etwa zusätzlich mit Überschriften."
  },
  "geprueft": "31.10.2026",
  "notiz": "Hero eines erfundenen Leipziger Markenbüros (Achsmaß) mit Projektzeile aus medien/. Achsen-Lineal 01 bis 12 und Zeilenbuchstaben im Steg, Maßkette misst die Titelzelle live. Kopfzeile per subgrid auf den Spalten. Umschalter Blueprint (Plus-Marker, 5-%-Hilfslinien, schraffierte Stege nach Tailwind), Swiss (Spaltenlinien, kräftige Zeilenlinien, große Grotesk in Rot) und Punktmatrix (Lichtpause-Blau, Kreis-Marker). Zellkanten sind Hintergrund-Verläufe statt border, damit sie sich zeichnen lassen; ohne Aufbau-Animation genügen normale Borders. Vorführung 22,8 s: je Variante Aufbau, dann fährt ein gedachter Zeiger mit Fadenkreuz über Titel, Arbeiten und Text. Bilder 01.11.2026: eigene Bilder statt Portfolio."
 }
}