/* 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#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); }
/* Haus-Symbol (2026-10-07): wie in stil.css, am Desktop nur das Symbol, im Handy-Menü mit Wort */
.nav-home { display: inline-flex; align-items: center; gap: .4rem; }
.nav-home-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 768px) { .nav-home-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.nav-links a[aria-current="page"] { font-weight: 600; }
.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; }
/* Ergaenzt 2026-10-04, Sebastian: auf dem Handy brach die Seite aus (539 statt 430 px). */
@media (max-width: 720px) { .brand-grid { grid-template-columns: 1fr; } }
.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); }
/* ── RATGEBER-BLOCK unter den Marken (2026-10-06, interne Verlinkung) ── */
.ratgeber-block { margin-top: 3rem; }
.ratgeber-block-titel { font-size: 1.25rem; font-weight: 600; margin-bottom: .4rem; }
.ratgeber-block-text { color: var(--clr-muted); margin-bottom: 1.2rem; }
.ratgeber-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.ratgeber-liste li {
background: var(--clr-card); border: 1px solid var(--clr-border);
border-radius: var(--radius); padding: 1rem 1.2rem;
}
.ratgeber-liste a { display: block; font-weight: 600; font-size: .95rem; color: var(--clr-text); text-decoration: none; }
.ratgeber-liste a:hover { text-decoration: underline; }
.ratgeber-teaser { display: block; margin-top: .3rem; font-size: .82rem; color: var(--clr-muted); }
.ratgeber-liste .karte-beitrag { margin: .4rem 0 0; font-size: .75rem; color: var(--clr-muted); }
@media (max-width: 720px) { .ratgeber-liste { grid-template-columns: 1fr; } }
/* ── KOMPAKTE FASSUNG (2026-10-06): niedrigere Marken-Karten, Ratgeber als 4er-Kacheln ── */
.brand-grid-kompakt { gap: 1rem; }
.brand-grid-kompakt .brand-card { padding: 1.1rem 1rem; }
.brand-grid-kompakt .brand-logo { height: 84px; padding: 10px; margin-bottom: .7rem; }
.brand-grid-kompakt .brand-logo img { max-height: 56px; }
.brand-grid-kompakt .brand-card h3 { font-size: .95rem; margin-bottom: .25rem; }
.brand-grid-kompakt .brand-card p { font-size: .78rem; }
/* Logos groesser, Satz ohne Umbruch (2026-10-06, Holger: Logos zu klein, Satz bricht um) */
#marken.marken-neu .section-sub { max-width: none; margin-bottom: 2rem; }
.brand-grid-logos .brand-logo { height: 112px; padding: 6px 10px; margin-bottom: .7rem; }
.brand-grid-logos .brand-logo img { max-height: 100px; }
/* Markenvideo-Badge und Dialog (2026-10-07, Holger: kleines Badge in der Kerafactum-Karte, Klick startet das Video) */
.brand-logo { position: relative; }
.marken-video-badge {
position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: .35rem;
font: inherit; font-size: .68rem; font-weight: 600; line-height: 1; color: #fff; background: var(--clr-accent2, #b45f06);
border: 0; border-radius: 999px; padding: .32rem .6rem; cursor: pointer;
}
.marken-video-badge:hover, .marken-video-badge:focus-visible { filter: brightness(1.12); outline: 2px solid var(--clr-accent, #e8700a); outline-offset: 2px; }
@media (max-width: 640px) {
.marken-video-badge { top: 5px; right: 5px; gap: .25rem; font-size: .58rem; padding: .22rem .45rem; }
.marken-video-badge svg { width: 10px; height: 8px; }
}
/* In der engen Spaltenbreite (Tablet) nur das Symbol: BBQter-Logo reicht dort bis an die Ecke (gemessen 07.10.) */
@media (min-width: 721px) and (max-width: 1000px) { .marken-video-badge .badge-text { display: none; } .marken-video-badge { padding: .32rem .5rem; } }
.video-dialog { position: fixed; inset: 0; margin: auto; border: 0; padding: 0; background: #000; border-radius: 10px; max-height: 92vh; max-width: 92vw; overflow: hidden; }
.video-dialog::backdrop { background: rgba(0,0,0,.72); }
.video-dialog video { display: block; height: min(86vh, 960px); width: auto; max-width: 92vw; aspect-ratio: 9 / 16; background: #000; }
.video-dialog-zu { position: absolute; top: 6px; right: 8px; z-index: 2; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ratgeber-block-kompakt { margin-top: 2.2rem; }
.ratgeber-block-kompakt .ratgeber-block-titel { font-size: 1.1rem; margin-bottom: .8rem; }
/* grid-auto-rows: 1fr = ALLE Reihen gleich hoch (Holger 06.10.: die Kacheln sind nicht gleich gross) */
.ratgeber-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .8rem; }
.ratgeber-kacheln li {
position: relative; background: var(--clr-card); border: 1px solid var(--clr-border);
border-radius: var(--radius); padding: .8rem .9rem; transition: border-color .25s, transform .2s;
}
.ratgeber-kacheln li:hover { border-color: var(--clr-accent); transform: translateY(-3px); }
.kachel-label { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-accent2); margin-bottom: .3rem; }
.ratgeber-kacheln a { display: block; font-weight: 600; font-size: .88rem; line-height: 1.3; color: var(--clr-text); text-decoration: none; }
.ratgeber-kacheln a::after { content: ""; position: absolute; inset: 0; } /* ganze Kachel klickbar */
.ratgeber-kacheln .karte-beitrag { position: relative; margin: .35rem 0 0; font-size: .7rem; color: var(--clr-muted); }
.ratgeber-kacheln .kachel-alle { background: var(--clr-accent); border-color: var(--clr-accent); display: flex; align-items: center; justify-content: center; text-align: center; }
.ratgeber-kacheln .kachel-alle a { color: #23272B; }
@media (max-width: 720px) { .ratgeber-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ratgeber-kacheln { grid-template-columns: 1fr; } }
/* ── STANDORT ── */
#standort { background: var(--clr-surface); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.location-grid-neu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
/* Ausrichtung (06.10.): Bild oben buendig mit dem Text, Abzeichen darunter ueber die ganze Breite. */
.location-grid-oben { align-items: start; }
/* Ab 1180 px (Inhaltsbreite 1100) ist der Text 385 px hoch: mit 1,6 fr endet das Bild bis auf rund 20 px bei der letzten Textzeile. */
@media (min-width: 1180px) { .location-grid-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.location-badges-unten { margin-top: 2rem; }
@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; }
/* Luftbild mit Lage-Schaubild (2026-10-06): festes Seitenverhaeltnis, nichts wird beschnitten. */
.standort-bild { position: relative; aspect-ratio: 1050 / 590; border-radius: 12px; overflow: hidden; background: #23272B; }
.standort-bild img, .standort-bild svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.standort-bild img { object-fit: cover; }
/* ── 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#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