XED /Template Fabrik

Bootstrap ist die FALSCHE Basis für Multi-Plattform-Templates. Bootstrap's globale Styles überschreiben Custom CSS durch höhere Spezifität. Bei DREI Zielplattformen (WordPress, Ghost, Jamstack) wird das Problem 3x schlimmer.

Photo by Growtika / Unsplash

Custom CSS für steirischursprung.at

Stand: 2026-04-01 (Ende Session) · Session-Wissen für Nachfolge-Sessions Quelle: dev/bin/XED-Restore/xed_template.py (Phase 1 + 2) Testfall: https://web.steirischursprung.at/ → https://demo.steirischursprung.at/ GitHub: https://github.com/XEDdev/steirischursprung.at (privat)

WICHTIG: Strategiewechsel — Bootstrap raus, Custom CSS rein

Diese Session hat gezeigt: Bootstrap ist die FALSCHE Basis für Multi-Plattform-Templates.

Bootstrap's globale Styles überschreiben Custom CSS durch höhere Spezifität. Wir haben mehrere Iterationen gebraucht um das zu verstehen. Bei DREI Zielplattformen (WordPress, Ghost, Jamstack) wird das Problem 3x schlimmer.

Die Entscheidung (Ende dieser Session):

	Bootstrap (verworfen)	Custom CSS (gewählt)
Ghost Ecosystem	Keins	Nativ (Casper = Custom CSS)
WordPress Ecosystem	Stark, aber Override-Hölle	Volle Kontrolle
Jamstack Ecosystem	Schwach	Dominant
Spezifitäts-Konflikte	Hauptproblem	Keine
Bundle-Größe	160 KB	Minimal
Portabilität	Mittel	Höchste

Der Lernpfad für die nächste Session (BITTE ZUERST LESEN)

Drei Upstream-Forks wurden zum Lernen angelegt. Studiere sie in dieser Reihenfolge:

1. Pico CSS (dev/upstream/pico/) — Die CSS-Bibel

13.2k Stars, ~10KB, MIT Lizenz
Studiere: scss/ — wie man CSS Custom Properties als Design-Token-System aufbaut
130+ Custom Properties (Farben, Spacing, Typo — alles konfigurierbar)
Classless-Version: sauberes <nav>, <article>, <footer> → sieht sofort gut aus
SCSS modular: jedes Feature einzeln ein-/ausschaltbar
Das lernen wir daraus: Die Architektur unserer eigenen custom.css

2. smol-11ty-starter (dev/upstream/smol-11ty-starter/) — Das absolute Minimum

Von Stephanie Eckles (CSS-Expertin), <20 Dateien
Kein Framework, kein Build-Tool, nur Eleventy + eigenes CSS
Studiere: src/ — wie wenig man wirklich braucht
Das lernen wir daraus: Unser Vorbild für die "Option B" Custom CSS Lösung

3. eleventy-base-blog (dev/upstream/eleventy-base-blog/) — Template-Engine

Offizielle 11ty Referenz
Reines HTML + Nunjucks/Liquid Templates + Markdown
Studiere: _includes/ — wie Partials und Templates funktionieren
Das lernen wir daraus: Wie aus Markdown + Templates statische Seiten werden
Passt zu unserer Strategie: 11ty steht als Szenario A für infactory.com

Der konkrete nächste Schritt

Bootstrap CDN Link aus allen generierten Seiten entfernen
custom.css nach Pico-Pattern neu aufbauen (Custom Properties, Classless-Ansatz)
Navbar, Grid, Responsive selbst schreiben (CSS Grid + Flexbox, kein Framework)
Testen auf https://demo.steirischursprung.at/
Wenn die Basis steht → 11ty als Static Site Generator integrieren

Was ist das hier?

Ein Template-Fork der steirischursprung.at Website, generiert aus dem Wayback-Archiv (dev/bin/XED-Restore/archive/www.steirischursprung.at/).

Ziel: Die Demo-Seite soll sich im Design genauso professionell anfühlen wie das Original — aber ohne BeTheme, ohne WordPress, mit eigenem Custom CSS.

Langfristiges Ziel (T010): Drei Templates aus einer Quelle:

Jamstack/HTML mit 11ty (das was hier liegt)
Ghost Publisher Theme
WordPress Theme

Aktuelle Verzeichnisstruktur (bootstrap-base/)

bootstrap-base/ ← = Site-Root = GitHub Repo
├── _includes/ ← Shared Partials
│ ├── head.html ← <head>: Meta, Bootstrap CDN, Google Fonts, custom.css
│ ├── header.html ← Top Bar + Bootstrap Navbar (6 Hauptpunkte + Dropdowns)
│ └── footer.html ← Footer
├── assets/
│ ├── css/
│ │ └── custom.css ← Farben, Fonts, Site-spezifisch (Bootstrap-Variablen)
│ ├── js/ ← (noch leer, für custom.js)
│ └── img/ ← 539 Bilder aus dem Archiv
│ ├── logo.png ← Original-Logo
│ ├── SteirischUrsprung_*.jpg ← Hotel/Brauerei/Zimmer Fotos
│ └── ...
├── index.html ← Homepage (aktuell: Seitenübersicht)
├── sitemap.html ← Seitenübersicht
├── impressum/index.html ← Original-URL-Pfad
├── hotel/index.html
├── brauerei/index.html
├── kontakt/index.html
├── agb/index.html ← Redirect → /allgemeine-geschaeftsbedingungen/
└── ... (58 Seiten total)

Was bereits funktioniert

58 Seiten mit extrahiertem Content in Original-URL-Pfaden
539 Bilder aus dem Archiv kopiert in assets/img/
Navbar mit 6 Hauptpunkten + Bootstrap Dropdowns:
- Hotel (6 Kinder), Gasthaus, Feiern (3), Seminar (2), Brauerei (2), Aktuelles
Top Bar mit 4 Action-Items (Jetzt anfragen, Zimmer & Preise, Kontakt, Gutschein)
Custom CSS mit Original-Farben und -Fonts:
- Primär: #006633 (Waldgrün)
- Sekundär: #7b6852 (Holz)
- Accent: #444444 (Text)
- Fonts: Josefin Sans (Headings), Crimson Text (Body), Playfair Display (Deko)
Kein BeTheme-Restmüll — keine mcb-, mfn-, wp-content/-Verweise
Bild-Pfade umgeschrieben: wp-content/uploads/ → assets/img/
AGB-Redirect: /agb/ → /allgemeine-geschaeftsbedingungen/
Kaputten WKO-Link entfernt aus Impressum

Was NOCH FEHLT — Schritt für Schritt

IST: Standard-Bootstrap-Navbar, Text "Steirischursprung", Items rechts SOLL: Wie Original — Logo-Bild zentriert, Split-Layout (3 links, Logo Mitte, 3 rechts), Uppercase

Konkrete Aufgaben:

Logo-Bild (assets/img/logo.png) statt Text in der Navbar
Split-Layout: HOTEL | GASTHAUS | FEIERN — [LOGO] — SEMINAR | BRAUEREI | AKTUELLES
text-transform: uppercase für Menü-Items
letter-spacing: 2px für Menü-Items
Grüner Hintergrund mit korrektem Farbton #206f40
Dropdown-Menüs stylen (aktuell Standard-Bootstrap-weiß)

Referenz: archive/www.steirischursprung.at/impressum/index.html Zeilen 232-325 (Original BeTheme Header HTML)

Schritt 2: Hero-Bereich auf der Homepage

IST: index.html zeigt eine Seitenübersicht (Liste aller 58 Seiten) SOLL: Fullscreen Hero-Bild mit Overlay-Text wie im Original

Konkrete Aufgaben:

Bootstrap Carousel ODER statisches Hero-Bild
Overlay-Text: "Österreichs schrägstes Hotel" (Playfair Display, weiß, zentriert)
Subtitel: "Von Sonne gebrautes Bier trinken, im Biersud baden..."
CTA-Button: "Jetzt erleben"
Hero-Bilder: im Archiv unter assets/img/ (Slider-Bilder identifizieren)
Seitenübersicht nach sitemap.html verschieben (oder unter dem Hero als Grid)

Schritt 3: Custom CSS vertiefen

IST: Basis-CSS mit Farben und Fonts SOLL: Professionelles Styling das sich wie das Original anfühlt

Konkrete Aufgaben:

Grüne Zierleisten (gezackte Bordüren oben/unten an Sektionen)
- Original: sep-green-top.png, sep-green-bottom.png (6px PNG)
- Bootstrap: CSS border-image oder Hintergrundbild
Sektions-Hintergründe (Holztextur: bg-holz.jpg)
Abstände zwischen Sektionen (BeTheme hatte padding: 100px)
Professionelle Typografie-Feinabstimmung
Buttons im Original-Stil (goldener Rand, Uppercase)

Schritt 4: Content-Sections stylen

IST: Roher HTML-Content in Bootstrap Container SOLL: Sauber gestylte Sektionen mit Hintergründen und Abständen

Konkrete Aufgaben:

Dark Sections (grüner Hintergrund, weißer Text)
Light Sections (beige/grau Hintergrund)
Bild-Text-Kombinationen (Bild links, Text rechts oder umgekehrt)
YouTube-Embeds responsive machen
Preis-Badges (goldener Kreis mit "AB 12€ P.P.")

Technische Details

xed_template.py — Was es tut

Phase 1: analyze — Liest das Archiv, erkennt Layout-Grenzen, Menü, Farben, Fonts

python3 xed_template.py analyze archive/www.steirischursprung.at/
# → archive/www.steirischursprung.at/analysis.json

Phase 2: bootstrap — Generiert die Bootstrap-Site aus der Analyse

python3 xed_template.py bootstrap archive/www.steirischursprung.at/
# → templates/bootstrap-base/ (58 Seiten + 539 Bilder + CSS)

Content-Extraktion

Der Content wird zwischen zwei Markern extrahiert:

Start: itemprop="mainContentOfPage" (auf ALLEN Seiten identisch)
End:  (auf den meisten Seiten; Fallback: <footer)

139 von 197 Seiten haben minifiziertes HTML wo der End-Marker fehlt → diese werden aktuell übersprungen. Verbesserung: robusterer End-Marker oder HTML-Parser.

Menü-Parser

Der BeTheme-Menü-Parser nutzt eine Sub-Menu-Platzhalter-Technik:

Alle <ul class="sub-menu"> werden durch Platzhalter (__SUB_0__) ersetzt
Danach werden nur die Top-Level <li> Items geparst
Platzhalter werden zu Dropdown-Children aufgelöst
wso-main Duplikate (BeTheme-spezifisch) werden gefiltert
Nur menu-main-menu-left und menu-main-menu-right ULs (nicht secondary-menu)

Bild-Pfad-Umschreibung

/wp-content/uploads/2016/09/bild.jpg → /assets/img/bild.jpg
/wp-content/themes/.../img/icon.png → /assets/img/icon.png
/media/wysiwyg/.../header.png → /assets/img/header.png

Achtung: Dateinamen-Kollisionen (zwei Bilder mit gleichem Namen aus verschiedenen Verzeichnissen) werden durch Skip-bei-Duplikat gelöst. Das kann zu fehlenden Bildern führen wenn zwei verschiedene Bilder denselben Dateinamen haben.

BeTheme-Bereinigung

Diese Klassen werden aus dem Content entfernt: mcb-section-inner, mcb-wrap-inner, mcb-column-inner, flv_tabs_wrapper, mfn-*, section-decoration, clearfix, scale-with-grid, wp-image-*, wp-block-*, attachment-*, size-*

Grid-Konversion

BeTheme	Bootstrap 5
`one`	`col-12`
`one-half`	`col-md-6`
`one-third`	`col-md-4`
`two-thirds`	`col-md-8`
`one-fourth`	`col-md-3`
`three-fourths`	`col-md-9`

Original-Analyse (analysis.json)

{
"CMS": "wordpress",
"Theme": "betheme (BeTheme/Mfn by Muffin Group)",
"Plugins": ["revslider", "woocommerce", "essential-grid",
"cookie-notice", "contact-form-7", "js_composer",
"seo-ultimate", "borlabs-cookie"],
"Seiten": 197 (gefiltert), 58 erfolgreich extrahiert,
"Farben": "#006633 (Waldgrün), #7b6852 (Holz), #444444 (Text)",
"Google Fonts": "Josefin Sans, Playfair Display, Crimson Text, Arvo",
"Grid": "BeTheme MCB (one, one-half, one-third, ...)",
"Menü": "6 Hauptpunkte, 4 Dropdowns, Tiefe 2",
"Bilder": 584 im Archiv, 539 kopiert
}

Dateipfade im Monorepo

Was	Pfad
xed_template.py	`dev/bin/XED-Restore/xed_template.py`
Archiv (Quelle)	`dev/bin/XED-Restore/archive/www.steirischursprung.at/`
analysis.json	`dev/bin/XED-Restore/archive/www.steirischursprung.at/analysis.json`
Bootstrap Output	`dev/bin/XED-Restore/templates/bootstrap-base/`
Diese README	`dev/bin/XED-Restore/templates/README.md`
GitHub Repo	`https://github.com/XEDdev/steirischursprung.at`
Live Demo	`https://demo.steirischursprung.at/`
Original (Referenz)	`https://web.steirischursprung.at/`
T010 Briefing	`postbox/attachments/todo/2026-03-16_TODO_T010_xed-static2wordpress.md`
XED /IDE Strategie	`dev/bin/XED-IDE/XED-IDE_Strategie-v2.md`

Deploy-Workflow

# 1. Template generieren (lokal)
cd dev/bin/XED-Restore
python3 xed_template.py analyze archive/www.steirischursprung.at/
python3 xed_template.py bootstrap archive/www.steirischursprung.at/

# 2. In das XEDdev Repo pushen
cd templates/bootstrap-base
git add -A && git commit -m "..." && git push origin main

# 3. Auf cBUZZ.IO Server pullen
ssh [email protected]
cd ~/steirischursprung.at/demo
git pull origin main

NGINX: demo.steirischursprung.at → ~/steirischursprung.at/demo/ Repo: XEDdev/steirischursprung.at (öffentlich, kein Auth nötig für git pull)

Bei Force-Push (nach Struktur-Umbau):

git fetch origin && git reset --hard origin/main

Kontext: Warum Bootstrap statt BeTheme?

	BeTheme (Original)	Bootstrap (unser Fork)
Dateien	220+ (CSS/JS/Fonts)	~72 (2 CDN + custom.css + Bilder)
Wartbar	Nein (proprietär)	Ja (jeder kennt Bootstrap)
Plattform	Nur WordPress	WordPress, Ghost, Jamstack
Lizenz	$60 Premium	Kostenlos (MIT)
Fehlende Datei	Kaputtes Layout	Bootstrap CDN = immer da

Das Ziel ist NICHT eine 1:1 Pixel-Kopie, sondern ein professionelles Design das sich wie das Original anfühlt — mit Bootstrap als robuster, wartbarer Basis.

Session-Chronologie (für Kontext)

Upstream-Repos geklont (openclaw, arcanechat-tui)
28 deutsche Übersetzungen (openclaw.de)
XED /IDE Strategie v2 (Zed+ACP Fork, Content-Modus, Hosting@)
XED /TUI v2 Entscheidung (Rust auf XED /Edit Framework)
T010 Briefing: xed_template.py für 3 Plattformen
xed_template.py Phase 1 (analyze) implementiert und getestet
xed_template.py Phase 2 (bootstrap) v1 → v2 (saubere Struktur)
Navbar-Parser: 6 Hauptpunkte + Dropdowns (Sub-Menu-Platzhalter-Technik)
Deploy auf demo.steirischursprung.at via XEDdev/steirischursprung.at
Navbar aufwerten (Logo Split-Layout, Uppercase-Versuch)
Bootstrap Spezifitäts-Problem erkannt — CSS-Regeln greifen nicht trotz !important
Strategische Recherche: Bootstrap vs. Tailwind vs. Custom CSS für 3 Plattformen
Entscheidung: Bootstrap raus, Custom CSS — Pico als Architektur-Vorlage
Drei Upstream-Forks geklont (pico, eleventy-base-blog, smol-11ty-starter)
→ NÄCHSTER SCHRITT: Pico studieren → custom.css neu aufbauen → Bootstrap CDN raus

Upstream-Forks (dev/upstream/) — Vollständige Übersicht

Repo	Pfad	Stars	Zweck
Pico CSS	`dev/upstream/pico/`	13.2k	CSS Custom Properties, Design-Token-System
11ty Base Blog	`dev/upstream/eleventy-base-blog/`	—	Template-Engine, Partials, Markdown→HTML
smol 11ty	`dev/upstream/smol-11ty-starter/`	96	Minimales Custom CSS Vorbild
OpenClaw	`dev/upstream/openclaw/`	165k	AI-Gateway, Plattform-Referenz
openclaw.de	`dev/upstream/openclaw.de/`	—	Deutsche Übersetzungen (unser Content)
ArcaneChat TUI	`dev/upstream/arcanechat-tui/`	—	Python TUI Referenz (urwid)
Microsoft Edit	`dev/upstream/edit/`	—	Rust Editor (für XED /Edit Upstream)
pywaybackup	`dev/upstream/pywaybackup/`	—	Wayback-Download Referenz
crawl4ai	`dev/upstream/crawl4ai/`	—	URL-Discovery Referenz

Was die nächste Session NICHT tun sollte

NICHT Bootstrap CDN wieder einbauen — das war ein Irrweg, die Recherche ist eindeutig
NICHT Tailwind einführen — zu early, erst Custom CSS meistern
NICHT die Struktur ändern — _includes/, assets/, Original-URL-Pfade sind korrekt
NICHT den Menü-Parser anfassen — der funktioniert (6 Hauptpunkte + 4 Dropdowns)
NICHT xed_template.py Phase 1 (analyze) ändern — die Analyse ist korrekt

Was die nächste Session TUN sollte

dev/upstream/pico/scss/ studieren — insbesondere _index.scss und Custom Properties
Bootstrap CDN Link aus _includes/head.html entfernen
assets/css/custom.css neu aufbauen nach Pico-Pattern:
- CSS Custom Properties für alle Design-Tokens (Farben, Fonts, Spacing)
- Classless-Basis: <nav>, <article>, <footer> stylen
- CSS Grid + Flexbox für Layout (kein Bootstrap Grid)
- Navbar mit Split-Layout (CSS Flexbox, nicht Bootstrap)
- Responsive mit eigenen Media Queries
Auf https://demo.steirischursprung.at/ testen (push → pull)
Wenn Design professionell aussieht → 11ty Integration (Phase 3)

Custom CSS für steirischursprung.at

WICHTIG: Strategiewechsel — Bootstrap raus, Custom CSS rein

Die Entscheidung (Ende dieser Session):

Der Lernpfad für die nächste Session (BITTE ZUERST LESEN)

Der konkrete nächste Schritt

Was ist das hier?

Aktuelle Verzeichnisstruktur (bootstrap-base/)

Was bereits funktioniert

Was NOCH FEHLT — Schritt für Schritt

Schritt 1: Navbar aufwerten (NÄCHSTER SCHRITT)

Schritt 2: Hero-Bereich auf der Homepage

Schritt 3: Custom CSS vertiefen

Schritt 4: Content-Sections stylen

Technische Details

xed_template.py — Was es tut

Content-Extraktion

Menü-Parser

Bild-Pfad-Umschreibung

BeTheme-Bereinigung

Grid-Konversion

Original-Analyse (analysis.json)

Dateipfade im Monorepo

Deploy-Workflow

Kontext: Warum Bootstrap statt BeTheme?

Session-Chronologie (für Kontext)

Upstream-Forks (dev/upstream/) — Vollständige Übersicht

Was die nächste Session NICHT tun sollte

Was die nächste Session TUN sollte