/* Schrift Inter, selbst ausgeliefert (2026-09-27, korrigierte Fassung).
Drei Dateien, weil Google die Schrift nach Zeichenbereichen zerlegt —
der Browser laedt ueber unicode-range nur, was die Seite braucht:
latin 47,1 KB Grundalphabet, Umlaute, Ziffern — immer
latinext 36,8 KB polnisch, tschechisch u. a. — nur bei Bedarf
cyrillic 18,3 KB russisch — nur bei Bedarf
ACHTUNG, aus einem echten Fehler: Die erste Fassung hatte NUR die
latin-ext-Datei zugeschnitten und angenommen, sie enthalte alles
Lateinische. Sie enthaelt das Grundalphabet NICHT — die Seite lief
sechs Stunden in einer Ersatzschrift. Erzeugt und GEPRUEFT wird das
jetzt von werkzeug-schrift-zuschneiden.py; das Skript verweigert die
Ausgabe, wenn ein Pruefwort nicht darstellbar ist.
font-weight: 400 700 ist Absicht: variable Schrift.
SIL OFL 1.1, Lizenz in /assets/schrift/. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/schrift/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/schrift/inter-latinext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/schrift/inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* --------------------------------------------------------------------
BILDER: height auto ist PFLICHT (2026-09-27)
Die Bildverarbeitung schreibt width und height als Attribute in jedes
![]()
. Wer im CSS nur die BREITE setzt, bekommt die Hoehe starr aus
dem Attribut -- das Bild wird gezerrt.
Diese Regel stand heute schon einmal hier und wurde von meinem
eigenen Skript geloescht, als es den Schriftblock ersetzte. Deshalb
steht sie jetzt NACH dem Schriftblock und traegt diesen Hinweis:
Wer hier oben etwas ersetzt, ersetzt nicht diese Zeile mit.
-------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }
/* Aus der alten Startseite uebernommen, 2026-09-26.
UNVERAENDERT uebernommen. Aufraeumen ist ein eigener Schritt:
die alte dunkle Palette steht hier noch im Quelltext und wird
nur vom Nachtrag-Block am Ende ueberschrieben. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--clr-bg: #E9EBED;
--clr-surface: #FFFFFF;
--clr-card: #FFFFFF;
--clr-border: #7E8891;
--clr-accent: #C8A84B;
--clr-accent2: #7E6520;
--clr-text: #23272B;
--clr-muted: #5A6068;
--radius: 12px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--clr-bg); color: var(--clr-text); line-height: 1.6; }
/* ── NAV ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: .6rem 2rem;
transition: background .3s, box-shadow .3s;
}
nav.scrolled { background: rgba(28,28,28,.95); backdrop-filter: blur(12px); box-shadow: 0 1px 20px rgba(0,0,0,.5); }
.nav-logo img { height: 52px; display: block; }
.nav-links { display: flex; gap: 1.25rem; list-style: none; }
.nav-links a { color: var(--clr-muted); text-decoration: none; font-size: .9rem; transition: color .2s; }
.nav-links a:hover { color: var(--clr-text); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--clr-text); font-size: 1.4rem; }
@media (max-width: 768px) {
.nav-toggle { display: block; }
.nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--clr-surface); padding: 1rem 2rem; gap: 1rem; }
.nav-links.open { display: flex; }
}
/* ── HERO ── */
.hero {
min-height: 100vh;
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 6rem 1.5rem 4rem;
background: radial-gradient(ellipse at 50% 55%, rgba(200,168,75,.08) 0%, transparent 65%);
}
.hero-inner { max-width: 820px; }
.hero-logo { margin: 0 auto 2.5rem; }
.hero-logo img { width: 340px; max-width: 85vw; filter: drop-shadow(0 4px 24px rgba(200,168,75,.25)); }
.hero-badge {
display: inline-block; margin-bottom: 1.5rem;
padding: .35rem .9rem; border-radius: 999px;
background: rgba(200,168,75,.12); border: 1px solid rgba(200,168,75,.3);
font-size: .78rem; color: var(--clr-accent2); letter-spacing: .08em; text-transform: uppercase;
}
.hero h1 { font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 700; line-height: 1.2; margin-bottom: 1.2rem; }
.hero h1 span { color: var(--clr-accent2); }
.hero p { font-size: 1.05rem; color: var(--clr-muted); max-width: 560px; margin: 0 auto 2.2rem; }
.btn {
display: inline-block; padding: .75rem 2rem; border-radius: 8px;
background: var(--clr-accent); color: #1c1c1c; text-decoration: none;
font-weight: 700; font-size: .95rem; transition: background .2s, transform .1s;
}
.btn:hover { background: var(--clr-accent2); transform: translateY(-1px); }
/* ── SECTIONS ── */
section { padding: 5rem 1.5rem; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clr-accent2); margin-bottom: .5rem; }
.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; margin-bottom: 1rem; }
.section-sub { color: var(--clr-muted); max-width: 600px; margin-bottom: 3rem; }
/* ── ÜBER UNS ── */
#ueber { background: var(--clr-surface); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } }
.about-text p { color: var(--clr-muted); margin-bottom: 1rem; }
.about-text p:last-child { margin-bottom: 0; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-card {
background: var(--clr-card); border: 1px solid var(--clr-border);
border-radius: var(--radius); padding: 1.2rem 1.4rem;
}
.stat-card .val { font-size: 1.6rem; font-weight: 700; color: var(--clr-accent2); }
.stat-card .lbl { font-size: .78rem; color: var(--clr-muted); margin-top: .2rem; }
/* ── MARKEN ── */
#marken { background: var(--clr-bg); }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.brand-card {
background: var(--clr-card); border: 1px solid var(--clr-border);
border-radius: var(--radius); padding: 1.8rem 1.5rem; text-align: center;
transition: border-color .25s, transform .2s;
}
.brand-card:hover { border-color: var(--clr-accent); transform: translateY(-3px); }
.brand-logo {
width: 100%; height: 120px; margin-bottom: 1rem;
display: flex; align-items: center; justify-content: center;
background: #f5f5f5; border-radius: 8px; padding: 16px;
}
.brand-logo img { max-width: 100%; max-height: 88px; object-fit: contain; }
.brand-logo-text { font-size: 1.1rem; font-weight: 700; color: var(--clr-accent2); }
.brand-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.brand-card p { font-size: .82rem; color: var(--clr-muted); }
/* ── STANDORT ── */
#standort { background: var(--clr-surface); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 720px) { .location-grid { grid-template-columns: 1fr; } }
.location-text p { color: var(--clr-muted); margin-bottom: 1rem; }
.location-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.badge {
padding: .35rem .8rem; border-radius: 999px;
background: rgba(200,168,75,.1); border: 1px solid rgba(200,168,75,.25);
font-size: .78rem; color: var(--clr-accent2);
}
.location-map {
background: var(--clr-card); border: 1px solid var(--clr-border);
border-radius: var(--radius); padding: 2rem; text-align: center;
color: var(--clr-muted); font-size: .9rem;
}
.location-map .pin { font-size: 2.5rem; margin-bottom: .8rem; }
/* ── KONTAKT ── */
#kontakt { background: var(--clr-bg); }
.contact-box {
max-width: 560px; margin: 0 auto;
background: var(--clr-card); border: 1px solid var(--clr-border);
border-radius: var(--radius); padding: 2.5rem;
}
.contact-box h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.2rem; }
.contact-box p { color: var(--clr-muted); margin-bottom: .6rem; }
.contact-box a { color: var(--clr-accent2); text-decoration: none; }
.contact-box a:hover { text-decoration: underline; }
.contact-divider { border: none; border-top: 1px solid var(--clr-border); margin: 1.2rem 0; }
/* ── FOOTER ── */
footer {
background: var(--clr-surface); border-top: 1px solid var(--clr-border);
padding: 2rem 1.5rem; text-align: center;
}
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: .8rem; }
.footer-links a { color: var(--clr-muted); text-decoration: none; font-size: .85rem; }
.footer-links a:hover { color: var(--clr-text); }
footer p { color: var(--clr-muted); font-size: .8rem; }
/* ── REVEAL ── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
display: flex; gap: .4rem; align-items: center;
}
.lang-btn {
background: none; border: 2px solid transparent;
border-radius: 6px; padding: 3px;
cursor: pointer; transition: transform .15s, border-color .2s, background .2s;
display: flex; align-items: center;
}
.lang-btn svg { display: block; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.lang-btn:hover { transform: scale(1.15); border-color: rgba(200,168,75,.4); background: rgba(200,168,75,.08); }
.lang-btn.active { border-color: rgba(200,168,75,.7); background: rgba(200,168,75,.12); }
/* ===== Farbvorschau Sebastian 2026-09-26, Fassung 2 ===== */
/* Regel 1: Gold ist FLAECHE, nicht Schrift. Als Schrift nur #7E6520. */
.hero-badge, .section-label, .brand-logo-text, .badge,
.hero h1 span, .stat-card .val, .contact-box a { color: #7E6520 !important; }
.btn { background: #C8A84B !important; color: #23272B !important; }
.btn:hover { background: #B08F35 !important; color: #23272B !important; }
/* Regel 2: Trennlinien brauchen 3:1. #7E8891 erreicht 3,02 gegen die Seite. */
nav {
background: #E9EBED !important;
border-bottom: 1px solid #7E8891 !important;
}
nav.scrolled {
background: rgba(233,235,237,.97) !important;
border-bottom: 1px solid #7E8891 !important;
box-shadow: 0 1px 10px rgba(35,39,43,.08) !important;
}
.nav-links { background: transparent !important; }
.nav-links a { color: #23272B !important; }
.nav-links a:hover { color: #7E6520 !important; }
/* Karten heben sich mit einer sichtbaren Kante ab, nicht mit Farbe */
.brand-card, .stat-card, .contact-box {
background: #FFFFFF !important;
border: 1px solid #7E8891 !important;
box-shadow: none !important;
}
/* Nur im Mobilmenue darf die Liste eine eigene Flaeche haben */
@media (max-width: 768px) {
.nav-links { background: #FFFFFF !important; border: 1px solid #7E8891 !important; }
}
/* Ergaenzt 2026-09-26, Sebastian.
Die Einblend-Animation gilt nur, wenn JavaScript laeuft (Klasse .js am
). Ohne JavaScript ist der Inhalt sichtbar statt unsichtbar.
Grund: 16 Elemente der Startseite standen auf opacity:0 und wurden erst
von einem Skript eingeblendet — faellt das Skript aus, ist die Seite leer.
Gemessen am 26.09. beim Umzug auf den Generator. */
.reveal { opacity: 1; transform: none; }
/* Ergaenzt 2026-09-26, nachdem es LIVE aufgefallen ist.
Die Fusszeile der Vorlage benutzt schlichte in