/* 4digEt basic — abgemagertes Design.
Akzentfarbe kommt als --accent aus settings.json (inline im ). */
:root {
--accent: #2563eb;
--fg: #1a1a1a;
--muted: #666;
--bg: #ffffff;
--line: #e5e7eb;
--maxw: 820px;
--radius: 8px;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 17px;
line-height: 1.6;
color: var(--fg);
background: var(--bg);
}
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 20px;
}
/* ---------------- Header / einstufiges Menü ---------------- */
.site-header {
border-bottom: 1px solid var(--line);
background: #fff;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 64px;
flex-wrap: wrap;
}
.brand {
font-weight: 700;
font-size: 1.2rem;
color: var(--fg);
text-decoration: none;
}
/*
* Menue-Markup kommt jetzt vom Engine-NodeHandler und ist damit identisch
* zur Vollversion: .
* Vorher erzeugte basic flache -Elemente. Die Liste wird hier
* zurueckgesetzt, damit die Navigation weiter als Zeile erscheint.
*/
.site-nav {
display: flex;
gap: 20px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav li { margin: 0; }
.site-nav a {
color: var(--fg);
text-decoration: none;
font-size: 0.98rem;
}
.site-nav a:hover { color: var(--accent); }
/* ---------------- Inhalt / Blöcke ---------------- */
.page { padding: 32px 20px 64px; }
.block { margin: 0 0 20px; }
.block-heading { line-height: 1.25; margin: 28px 0 12px; }
h1.block-heading { font-size: 2rem; }
h2.block-heading { font-size: 1.5rem; }
h3.block-heading { font-size: 1.2rem; }
h4.block-heading { font-size: 1.05rem; }
/*
* Textbloecke werden als roher HTML-Knoten gerendert, also ohne
* .block-text-Huelle — genau wie in der Vollversion. Deshalb greifen die
* Regeln direkt an den Absaetzen und Links im Inhaltsbereich.
*/
.page p { margin: 0 0 20px; }
.page ul, .page ol { margin: 0 0 20px 1.25rem; }
/*
* Nur echte Textlinks einfaerben. Ohne :not() waere diese Regel (0-1-1)
* spezifischer als .btn-primary (0-1-0) und wuerde die weisse Buttonschrift
* ueberschreiben — der Button haette dann Schriftfarbe auf Schriftfarbe.
*/
.page a:not(.btn) { color: var(--accent); }
.page a:not(.btn):hover { text-decoration: none; }
/* Verlinktes Bild soll nicht wie ein Textlink aussehen. */
.block-image a { display: block; text-decoration: none; }
.block-image img {
max-width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
}
.block-image figcaption {
color: var(--muted);
font-size: 0.9rem;
margin-top: 6px;
}
.block-divider {
border: 0;
border-top: 1px solid var(--line);
margin: 28px 0;
}
.spacer-sm { height: 8px; }
.spacer-md { height: 20px; }
.spacer-lg { height: 40px; }
.spacer-xl { height: 72px; }
/* ---------------- Buttons ---------------- */
.btn {
display: inline-block;
padding: 12px 22px;
border-radius: var(--radius);
text-decoration: none;
font-weight: 600;
line-height: 1;
border: 1px solid var(--accent);
transition: opacity .15s ease;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: transparent; color: var(--accent); }
/* ---------------- Footer ---------------- */
.site-footer {
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.9rem;
padding: 24px 0;
margin-top: 40px;
}
.site-footer a { color: var(--muted); }
@media (max-width: 600px) {
body { font-size: 16px; }
h1.block-heading { font-size: 1.6rem; }
}
/* ==========================================================================
Übernommene Rechtstexte (Impressum, Datenschutz)
--------------------------------------------------------------------------
Diese beiden Seiten kommen als fertiges HTML aus 4buz.de und bringen deren
Klassen mit. Hier stehen nur die wenigen Regeln, ohne die sie falsch
aussähen — bewusst flach, ohne die Kästen und Flächen des Originals.
========================================================================== */
/*
* Adress- und Namensfelder sind gegen Sammler rückwärts gespeichert und
* werden erst per CSS richtig herum dargestellt. Ohne diese Regel stünde
* im Impressum die Anschrift verkehrt herum — bei einer Pflichtangabe
* nicht hinnehmbar.
*/
.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}
/* Abschnitte der Rechtstexte: nur Abstand, keine Kästen. */
.page .info-box { margin: 0 0 28px; }
.page .box-header { margin: 0 0 8px; }
.page .box-header h2 { margin: 0; font-size: 1.3rem; }
/* ==========================================================================
Produktbilder der Übersicht
--------------------------------------------------------------------------
Die Quelldateien waren 181, 213 und 286 px breit — dadurch stand die Liste
ungleichmäßig. Jetzt liegen alle drei mit 400 px vor und werden mit 200 px
angezeigt.
Die doppelte Dateibreite ist kein Zufall: Bildschirme mit hoher Pixeldichte
zeichnen einen CSS-Pixel mit zwei echten Pixeln. Wer ein 200-px-Bild mit
200 px anzeigt, bekommt dort ein weichgezeichnetes Bild. Faustregel:
Dateibreite mindestens doppelt so groß wie die Anzeigebreite.
Die Höhen bleiben leicht verschieden (481, 509, 542 px bei 400 px Breite),
weil die Seitenverhältnisse der Originale abweichen. In einer
untereinanderstehenden Liste fällt das nicht auf; erst in einem Raster
nebeneinander müsste man auf ein gemeinsames Verhältnis auffüllen.
========================================================================== */
.page .block-image img {
width: 200px;
height: auto;
}