/* Rögl Metall und Maschinenbau — self-hosted stylesheet.
No external fonts/CDNs: the CSP is 'self' only, so everything below is local
and the type stack falls back to the OS UI font. */
:root {
/* Rot/Anthrazit: das Rot ist aus dem RÖGL-Logo gemessen (#e00000) und für
Text- bzw. Flächenkontrast angepasst. */
--accent: #f0565c; /* Akzent auf dunklem Grund */
--accent-soft: #ff8b8f; /* Headlines/Zahlen, dunkler Grund */
--accent-deep: #c1121f; /* Flächen mit weißer Schrift (Kontrast 5,4:1) */
--radius: 14px;
--radius-sm: 9px;
--maxw: 1180px;
--shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 28px -12px rgba(0, 0, 0, .35);
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-draw: cubic-bezier(.38, .06, .26, 1);
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Dark is the default look; the toggle writes data-theme on . */
:root,
:root[data-theme="dark"] {
--bg: #14161a;
--bg-2: #191c21;
--surface: #1d2026;
--surface-2: #24282f;
--line: #2c313a;
--line-strong: #3d434e;
--text: #edeff2;
--text-dim: #aeb4bd;
--text-faint: #838a94;
--hero-shade: linear-gradient(180deg, rgba(8, 9, 11, .5) 0%, rgba(8, 9, 11, .68) 45%, rgba(20, 22, 26, .96) 100%);
--img-bg: #16191d;
}
:root[data-theme="light"] {
/* Auf Weiß braucht der Akzent mehr Tiefe (Kontrast >= 4.5:1). */
--accent: #b90d17;
--accent-soft: #a20c14;
--accent-deep: #9d0b13;
--bg: #f5f6f7;
--bg-2: #ffffff;
--surface: #ffffff;
--surface-2: #eff1f3;
--line: #e0e3e6;
--line-strong: #c6cacf;
--text: #16181c;
--text-dim: #4e535b;
--text-faint: #6d737c;
--hero-shade: linear-gradient(180deg, rgba(8, 9, 11, .5) 0%, rgba(8, 9, 11, .62) 48%, rgba(245, 246, 247, .97) 100%);
--img-bg: #e9ebee;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 88px;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* height:auto ist Pflicht, sobald ![]()
width/height traegt: die Attribute
setzen eine echte CSS-Hoehe, und mit max-width:100% schrumpft dann nur
die Breite — das Bild wird auf schmalen Displays gestaucht. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
line-height: 1.15;
margin: 0 0 .5em;
letter-spacing: -.02em;
font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.16rem; }
p { margin: 0 0 1em; }
.wrap {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: 22px;
}
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--accent-deep);
color: #ffffff;
padding: 12px 18px;
z-index: 999;
border-radius: 0 0 var(--radius-sm) 0;
font-weight: 700;
}
.skip:focus { left: 0; }
/* Die Startseite zeigt seit 2026-09-21 nur noch die drei Bereichskarten — kein
Hero, keine Ueberschrift, kein Erklaersatz. Das `h1` bleibt aber im Dokument:
ohne `h1` hat die Seite fuer Screenreader keinen Titel und fuer
Suchmaschinen keine Ueberschrift, und genau diese Seite traegt die Domain.
Aus dem Bild schieben statt `display: none` — letzteres nimmt sie auch aus
dem Accessibility-Baum, dann waere sie so gut wie gar nicht da. */
.h1-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 6px;
}
/* ------------------------------------------------------------------ header */
.top {
position: sticky;
top: 0;
z-index: 60;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.top-inner {
position: relative; /* containing block for the mobile nav panel */
display: flex;
align-items: center;
gap: 18px;
min-height: 72px;
}
.brand {
display: flex;
align-items: center;
gap: 11px;
text-decoration: none;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.05;
margin-right: auto;
}
/* Zwei Logo-Dateien statt CSS-Filter: die Wortmarke ist schwarz und muss auf
dunklem Grund hell werden, ein invert() wuerde auch das Rot kippen. */
.brand img { flex: none; height: 40px; width: auto; }
:root[data-theme="light"] .logo-light { display: none; }
:root:not([data-theme="light"]) .logo-dark { display: none; }
.brand span { display: block; font-size: 1.06rem; }
.brand small {
display: block;
font-size: .68rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-faint);
}
.nav {
display: flex;
align-items: center;
gap: 4px;
}
.nav a {
text-decoration: none;
color: var(--text-dim);
padding: 9px 12px;
border-radius: 8px;
font-size: .95rem;
font-weight: 600;
white-space: nowrap;
transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.top-actions {
display: flex;
align-items: center;
gap: 10px;
}
.icon-btn {
appearance: none;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-dim);
width: 40px;
height: 40px;
border-radius: 10px;
display: grid;
place-items: center;
cursor: pointer;
transition: color .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn svg { width: 19px; height: 19px; }
/* One icon per theme; JS only flips data-theme. */
:root[data-theme="light"] .i-moon { display: none; }
:root:not([data-theme="light"]) .i-sun { display: none; }
.nav-toggle { display: none; }
/* ------------------------------------------------------------------ buttons */
.btn {
--btn-bg: var(--accent-deep);
--btn-fg: #ffffff;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 11px;
background: var(--btn-bg);
color: var(--btn-fg);
font: inherit;
font-weight: 700;
font-size: .98rem;
text-decoration: none;
cursor: pointer;
transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(193, 18, 31, .75); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--text);
border-color: var(--line-strong);
backdrop-filter: blur(6px);
}
.btn-ghost:hover { box-shadow: none; background: var(--surface-2); }
.btn-sm { padding: 9px 15px; font-size: .9rem; border-radius: 9px; }
/* ------------------------------------------------------------------ hero */
.hero {
position: relative;
isolation: isolate;
padding: clamp(70px, 12vw, 140px) 0 clamp(40px, 6vw, 74px);
overflow: hidden;
}
.hero::before,
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
}
.hero::before {
background-image: url("img/hero.webp");
background-size: cover;
background-position: center 62%;
transform: scale(1.04);
}
.hero::after { background: var(--hero-shade); }
/* Hintergrundvideo (nur vorhanden, wenn media/video/hero.* existiert).
Malreihenfolge im negativen Stapel von .hero: ::before (Foto) -> video
(Kind) -> ::after (Verlauf). Das Video deckt das Foto also ab und liegt
trotzdem unter dem Scrim, ohne dass jemand z-index nachjustieren muss.
poster = dasselbe Foto: solange app.js die Quelle nicht eingehaengt hat,
ist optisch kein Unterschied zum heutigen Stand. */
.hero-video {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
/* Unsichtbar, bis das `playing`-Ereignis kommt — sonst blitzt beim Laden
kurz ein schwarzes Videofenster ueber dem Poster auf. Bleibt JS aus oder
verweigert der Browser das Autoplay, bleibt es bei 0 und das Foto steht:
derselbe Zustand wie ohne Videodatei.
BEWUSST OHNE `transition`. Eine weiche Blende waere schoener, liesse sich
hier aber nicht nachweisen: unter der virtuellen Uhr des Headless-Browsers
laufen CSS-Uebergaenge nicht ab, die Deckkraft blieb im Test auf 0. Eine
unsichtbare Videoflaeche ist ein schlimmerer Fehler als ein harter
Bildwechsel, deshalb hier der belegbare Weg. */
opacity: 0;
}
.hero-video.is-playing { opacity: 1; }
/* Hero-Varianten (seit 2026-09-21).
`.hero-slim` ist die Startseite: die trägt nur noch die Bereichswahl, und
das Hero-Foto (Laderschaufel vor Landmaschinen) ist Agrartechnik — auf einer
neutralen Einstiegsseite wäre es eine Aussage über den Betrieb, die so nicht
stimmt. Also kein Foto, nur Anthrazit mit einem Hauch Logorot.
`.hero-bau` und `.hero-industrie` trugen bis 2026-09-22 statt eines Fotos
die Konstruktionszeichnung als Wasserzeichen, weil es aus diesen Bereichen
kein eigenes Bildmaterial gab und ein fremdes Foto sich auf der Seite eines
Metallbauers als „das haben wir gebaut" liest. Seit der Kunde eigene Fotos
geliefert hat, steht dort das, was der Hero überall sonst zeigt: eine eigene
Arbeit. Beide erben Größe, Zuschnitt und Scrim von `.hero`; gesetzt werden
nur Datei und Bildausschnitt. `background-position` ist je Motiv gewählt,
nicht global: Bau ist 16:9 und hat das Tragwerk oben, Industrie ist flacher
und lebt vom Horizont. */
.hero-slim { padding: clamp(62px, 10vw, 118px) 0 clamp(50px, 7vw, 84px); }
.hero-slim::before {
background-image: radial-gradient(1100px 460px at 16% -25%, rgba(224, 0, 0, .32), transparent 62%);
background-color: #14161a;
transform: none;
}
.hero-bau::before {
background-image: url("img/hero-bau.webp");
background-position: center 38%;
}
.hero-industrie::before {
background-image: url("img/hero-industrie.webp");
background-position: center 52%;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .17em;
text-transform: uppercase;
/* Die Pille liegt in BEIDEN Themes auf dem dunklen Hero-Verlauf, darf also
nicht die Theme-Akzentfarbe nehmen — im Hellmodus ist die ein dunkles Rot
und auf dem Scrim praktisch unlesbar. */
color: #ff9ea1;
background: rgba(8, 9, 11, .62);
border: 1px solid rgba(255, 158, 161, .45);
padding: 7px 14px;
border-radius: 999px;
margin-bottom: 22px;
}
.eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(255, 139, 143, .22);
}
.hero h1 { max-width: 17ch; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.hero .lead {
font-size: clamp(1.06rem, 1.9vw, 1.32rem);
font-weight: 600;
color: #eaf0f7;
max-width: 46ch;
text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
.hero .lead-sub {
color: #cfdae6;
max-width: 52ch;
font-size: 1.02rem;
font-weight: 400;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Gleiche Falle wie bei .eyebrow: der Ghost-Button liegt in BEIDEN Themes auf
dem dunklen Hero-Verlauf. Mit var(--text) ist er im Hellmodus fast schwarz
auf dunklem Foto — auf dem Handy, wo der Verlauf am dichtesten ist, war er
praktisch unlesbar. */
.hero .btn-ghost {
--btn-fg: #ffffff;
border-color: rgba(255, 255, 255, .55);
background: rgba(8, 9, 11, .35);
}
.hero .btn-ghost:hover { background: rgba(8, 9, 11, .6); }
/* stat strip */
.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
margin-top: clamp(44px, 7vw, 76px);
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.stat {
background: color-mix(in srgb, var(--surface) 92%, transparent);
padding: 22px 20px;
}
.stat b {
display: block;
font-size: clamp(1.35rem, 2.6vw, 1.9rem);
letter-spacing: -.03em;
color: var(--accent-soft);
}
.stat span { font-size: .87rem; color: var(--text-dim); font-weight: 600; }
/* ------------------------------------------------------------------ sections */
section { padding: clamp(56px, 8vw, 104px) 0; }
section + section { border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-2); }
.head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 48px); }
.head .kicker {
font-size: .78rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.head p { color: var(--text-dim); margin-bottom: 0; }
/* ------------------------------------------------------------------ services */
/* Feste Spaltenzahl (3 / 2 / 1, Stufen im Responsive-Block unten). auto-fit
war richtig, solange jede Kachelreihe sechs Elemente hatte; seit dem Umbau
sind es 5, 6 und 7 — und dann haengt die Zahl der Waisen in der letzten
Zeile an der Fensterbreite statt an der Liste. */
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
/* Eine einzelne Karte in der letzten Zeile sieht wie ein Fehler aus. Sie
bekommt deshalb die volle Breite und legt sich quer — Zeichnung links,
Text rechts. Die Regel prueft die Position in der Liste (3n+1 als letztes
Element = allein in der Zeile), nicht die Fensterbreite. */
.cards > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (min-width: 761px) {
.cards > :last-child:nth-child(3n + 1) {
flex-direction: row;
align-items: stretch;
}
/* Die Breitkarte bekommt ihre Hoehe sonst aus 16:10 auf 38 % Breite und
wird ueber 300 px hoch — neben drei Zeilen Text sieht das leer aus.
aspect-ratio abschalten und die Hoehe vom Textblock nehmen lassen. */
.cards > :last-child:nth-child(3n + 1) .card-media {
flex: 0 0 34%;
aspect-ratio: auto;
min-height: 100%;
}
.cards > :last-child:nth-child(3n + 1) .card-cad { aspect-ratio: auto; padding: 14px; }
.cards > :last-child:nth-child(3n + 1) .card-body { justify-content: center; }
}
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
box-shadow: var(--shadow);
transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card-media {
aspect-ratio: 16 / 10;
background: var(--img-bg);
overflow: hidden;
}
.card-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--text-dim); font-size: .95rem; margin-bottom: 16px; }
.card-more {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 700;
font-size: .92rem;
color: var(--accent);
}
.card-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.card:hover .card-more svg { transform: translateX(4px); }
/* -------------------------------------------------------------- Leistungen */
/* Feste Spaltenzahl statt auto-fit: die sechs Leistungen ergaben sonst je nach
Fensterbreite 4+2 oder 5+1 — eine angebrochene Zeile, die wie ein Fehler
aussieht. 3 / 2 / 1 teilt sechs immer glatt auf. */
.tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.tile {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px 22px;
}
.tile h3 { font-size: 1.04rem; margin-bottom: 6px; }
.tile p { color: var(--text-dim); font-size: .93rem; margin-bottom: 0; }
/* ------------------------------------------------------------------ gallery */
/* Ebenfalls feste Spalten — und deutlich groessere Kacheln als vorher (200px
minmax ergab bei 1180er Wrap fuenf briefmarkengrosse Bilder pro Zeile). */
.gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.gallery button {
appearance: none;
border: 1px solid var(--line);
padding: 0;
background: var(--img-bg);
border-radius: var(--radius-sm);
overflow: hidden;
cursor: zoom-in;
aspect-ratio: 4 / 3;
transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.gallery button:hover { transform: translateY(-3px); border-color: var(--accent); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
/* lightbox */
.lb[hidden] { display: none; }
.lb {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(5, 8, 12, .93);
display: grid;
grid-template-rows: 1fr auto;
padding: 18px;
backdrop-filter: blur(4px);
}
/* Das Bild wird ABSOLUT in der Buehne zentriert, nicht per place-items.
Grund: `max-height: 100%` an einem Grid-Item loest der Browser nicht auf —
ein hochkant-Foto (554x1200) stand dann in natuerlicher Groesse da, 318 px
ueber den Viewport hinaus und mit der Leiste quer darueber. Gegen den
Innenbereich eines absolut positionierten Elements ist die Hoehe dagegen
definit, und `margin: auto` zentriert in beiden Achsen.
`minmax(0, 1fr)` an der Zeile allein genuegt NICHT (nachgemessen). */
.lb-stage { display: grid; place-items: center; min-height: 0; position: relative; }
.lb-stage img {
position: absolute;
inset: 0;
margin: auto;
max-width: min(1100px, 100%);
max-height: 100%;
width: auto;
height: auto;
border-radius: var(--radius-sm);
box-shadow: 0 30px 80px -30px #000;
}
.lb-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding-top: 14px;
color: #cbd5e1;
font-size: .9rem;
font-family: var(--mono);
}
.lb-btn {
appearance: none;
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .06);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
}
.lb-btn:hover { background: rgba(255, 255, 255, .14); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-close { position: absolute; top: 16px; right: 16px; }
/* ------------------------------------------------------------------ faq */
.faq {
display: grid;
gap: 10px;
max-width: 900px;
}
.faq details {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: border-color .18s var(--ease);
}
.faq details[open] { border-color: var(--line-strong); }
.faq details:hover { border-color: var(--accent); }
.faq summary {
display: flex;
align-items: center;
gap: 12px;
padding: 17px 22px;
cursor: pointer;
font-weight: 700;
font-size: 1.02rem;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron drawn in CSS so no icon markup is needed per question. */
.faq summary::after {
content: "";
margin-left: auto;
flex: none;
width: 9px;
height: 9px;
border-right: 2.2px solid var(--accent);
border-bottom: 2.2px solid var(--accent);
transform: rotate(45deg) translateY(-2px);
transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-body { padding: 0 22px 20px; }
.faq-body p { color: var(--text-dim); margin: 0; font-size: .97rem; }
.faq-body a { color: var(--accent); }
/* ------------------------------------------------------------------ contact */
.contact-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(28px, 4vw, 48px);
align-items: start;
}
.people { display: grid; gap: 14px; margin-bottom: 18px; }
.person {
display: grid;
grid-template-columns: 44px 1fr;
gap: 15px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 20px;
}
.person .avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
color: #ffffff;
display: grid;
place-items: center;
font-weight: 800;
font-size: .95rem;
letter-spacing: .02em;
}
.person h3 { font-size: 1.02rem; margin-bottom: 2px; }
.person .role { font-size: .84rem; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.person li { font-size: .92rem; color: var(--text-dim); }
.person a { color: var(--text); text-decoration: none; font-weight: 600; }
.person a:hover { color: var(--accent); text-decoration: underline; }
.info-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 24px;
margin-bottom: 18px;
}
.info-card h3 { font-size: 1.02rem; }
.addr { font-style: normal; color: var(--text-dim); font-size: .95rem; }
.addr strong { color: var(--text); }
.geo-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 16px 0 0;
}
.geo-line .coords {
font-family: var(--mono);
font-size: .8rem;
color: var(--text-faint);
}
/* form */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 700; color: var(--text-dim); }
.field input,
.field textarea {
font: inherit;
font-size: .97rem;
color: var(--text);
background: var(--bg);
border: 1px solid var(--line-strong);
border-radius: 10px;
padding: 12px 14px;
width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(240, 86, 92, .22); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--text-faint); margin: 0; }
.form-msg { font-size: .93rem; font-weight: 600; margin: 0; min-height: 1.4em; }
.form-msg[data-state="ok"] { color: #45c07f; }
.form-msg[data-state="err"] { color: #ef6a5a; }
/* ------------------------------------------------------------------ footer */
.foot {
background: var(--bg-2);
border-top: 1px solid var(--line);
padding: 52px 0 30px;
font-size: .93rem;
}
.foot-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 32px;
}
.foot h4 {
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }
/* Design- und Hosting-Credit: bricht auf eine eigene Zeile, damit die
Copyright-Zeile daneben nicht zusammengedrueckt wird. */
.foot .legal .credit { flex-basis: 100%; }
.foot .legal .credit a { display: inline; padding: 0; }
.foot .legal {
margin-top: 38px;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
justify-content: space-between;
color: var(--text-faint);
font-size: .85rem;
}
/* Routenlink in der Fussleiste — steht damit auf JEDER Seite, nicht nur auf
Kontakt. Kein eingebetteter Kartenrahmen: ein iframe wuerde Google-Code
laden und sowohl die CSP ('self') als auch die Zusage der
Datenschutzerklaerung brechen. Muster von clients/fws/website. */
.foot-route { margin: 12px 0 0; }
.foot-route a {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 700;
color: var(--text-dim);
text-decoration: none;
}
.foot-route a:hover { color: var(--accent); }
.foot-route svg { width: 15px; height: 15px; }
/* ------------------------------------------------------------------ legal pages */
.page { padding: clamp(48px, 7vw, 84px) 0; }
/* Die Zeilenlaenge begrenzt die Absaetze, nicht den .wrap: liegt max-width auf
dem Wrap selbst, zentriert dessen margin-inline:auto die ganze Spalte und der
Text ruecht gegenueber H1, Brotkrumen und allen anderen Abschnitten ein. */
.prose > * { max-width: 74ch; }
.prose h2 { margin-top: 1.8em; font-size: 1.35rem; }
.prose h1 + p { color: var(--text-dim); }
/* max-content richtet sich nach dem laengsten dt ("Unternehmensgegenstand");
auf schmalen Displays bleibt fuer die dd-Spalte dann zu wenig uebrig und die
Werte werden abgeschnitten. Deshalb unter 620px untereinander. */
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 1.6em; }
@media (max-width: 620px) {
.prose dl { grid-template-columns: 1fr; gap: 2px 0; }
.prose dd { margin-bottom: 10px; }
}
.prose dt { font-weight: 700; color: var(--text-dim); }
.prose dd { margin: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; color: var(--text-dim); }
.prose a { color: var(--accent); }
/* ================================================================ pages
Everything below serves the generated inner pages: breadcrumbs, page hero,
prose column, technical tables and the links to sibling products. */
/* --------------------------------------------------------- breadcrumbs */
.crumbs {
border-bottom: 1px solid var(--line);
background: var(--bg-2);
font-size: .85rem;
}
.crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
list-style: none;
margin: 0;
padding: 11px 0;
color: var(--text-faint);
}
.crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--text); font-weight: 600; }
/* ----------------------------------------------------------- page hero */
.page-hero {
padding: clamp(34px, 5vw, 62px) 0 clamp(20px, 3vw, 34px);
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
var(--bg);
border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); max-width: 28ch; }
.page-hero .lead { color: var(--text-dim); max-width: 62ch; font-size: 1.06rem; margin: 0; }
.page-hero .kicker {
font-size: .78rem; font-weight: 800; letter-spacing: .18em;
text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
/* -------------------------------------------------------------- prose */
.prose-narrow > * { max-width: 74ch; }
.prose-narrow h3 { margin-top: 1.7em; font-size: 1.12rem; }
.prose-narrow p { color: var(--text-dim); }
.prose-narrow a { color: var(--accent); }
ul.ticks { list-style: none; padding: 0; margin: 0 0 1.3em; display: grid; gap: 7px; }
ul.ticks li {
position: relative;
padding-left: 26px;
color: var(--text-dim);
}
ul.ticks li::before {
content: "";
position: absolute;
left: 4px; top: .55em;
width: 7px; height: 7px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
}
/* Masse im Fliesstext ("Ausladung bis 1500 mm") — linkify() setzt das. */
.pn {
font-family: var(--mono);
font-size: .93em;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 5px;
padding: 1px 5px;
white-space: nowrap;
}
/* ------------------------------------------------------------- tables */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
table.data {
width: 100%;
border-collapse: collapse;
font-size: .93rem;
}
table.data th, table.data td {
text-align: left;
padding: 11px 16px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
table.data th {
position: sticky;
top: 0;
background: var(--surface-2);
font-size: .78rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-dim);
white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data td:first-child { white-space: nowrap; font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }
/* ---------------------------------------------------------- CTA band */
.cta-band {
border-top: 1px solid var(--line);
background:
linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
var(--bg-2);
}
.cta-inner {
display: grid;
grid-template-columns: 1.3fr .7fr;
gap: clamp(22px, 4vw, 44px);
align-items: center;
padding: clamp(34px, 5vw, 58px) 22px;
}
.cta-inner h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cta-inner p { color: var(--text-dim); margin-bottom: .6em; }
.cta-note { font-size: .89rem; color: var(--text-faint); }
.cta-note strong { color: var(--text-dim); }
.cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.cta-actions .btn { justify-content: center; }
/* Beschriftung der Nummer im CTA-Band. Gegenstueck zu .cta-alt darunter:
welche der zwei Nummern der grosse Knopf ist. Die Grundregel
`.cta-inner p { margin-bottom: .6em }` wuerde sonst eine Luecke reissen. */
.cta-who {
font-size: .86rem;
font-weight: 600;
color: var(--text-faint);
margin: 0 0 2px;
text-align: center;
}
/* --------------------------------------------------------- sib links */
.sib-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
gap: 10px;
}
.sib-list a {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 17px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
text-decoration: none;
font-weight: 600;
font-size: .95rem;
color: var(--text-dim);
transition: border-color .18s var(--ease), color .18s var(--ease);
}
.sib-list a::before { content: "›"; color: var(--accent); font-weight: 800; }
.sib-list a:hover { border-color: var(--accent); color: var(--text); }
/* zweite Telefonnummer unter den CTA-Buttons */
.cta-alt {
font-size: .86rem;
color: var(--text-faint);
margin: 4px 0 0;
text-align: center;
}
.cta-alt a { color: var(--accent); font-weight: 600; }
/* ================================================================ Bereiche
Alles ab hier kam mit dem Umbau auf drei Bereiche (2026-09-18) dazu.
======================================================================== */
/* -------------------------------------------------------- Scroll-Reveal */
/* Grundzustand nur setzen, wenn JS die Klasse `js` gesetzt hat. Ohne das
bliebe bei abgeschaltetem JavaScript die halbe Seite unsichtbar — ein
Fehler, den man erst bemerkt, wenn ein Crawler ohne JS vorbeikommt. */
.js .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; transition: none; }
}
/* --------------------------------------------------- CAD-Zeichnungen */
/* Die Zeichnungen kommen aus illustrations.py und tragen nur Klassen —
die Farben stehen ausschliesslich hier, damit sie den Themewechsel
mitmachen. */
:root,
:root[data-theme="dark"] {
--cad-line: #d7dbe1;
--cad-thin: #98a0ab;
--cad-dim: #7f8792;
--cad-grid: #2c313a;
}
:root[data-theme="light"] {
--cad-line: #2a2f37;
--cad-thin: #656d78;
--cad-dim: #7b838d;
--cad-grid: #dfe3e7;
}
svg.cad { display: block; width: 100%; height: auto; overflow: visible; }
.cad .cg { stroke: var(--cad-grid); stroke-width: 1; }
.cad .cgb { opacity: .6; }
/* fill:none gehoert auf JEDE Konturklasse. Ein Pfad ohne fill wird vom
Browser gefuellt — bei einer geraden Linie faellt das nicht auf, bei einer
abgewinkelten Hinweislinie steht ploetzlich ein schwarzes Dreieck im Bild. */
.cad .cl, .cad .ct, .cad .ca, .cad .cd, .cad .ce, .cad .cc, .cad .cf { fill: none; }
.cad .cl { stroke: var(--cad-line); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cad .ct { stroke: var(--cad-thin); stroke-width: 1.3; }
.cad .ca { stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.cad .cd { stroke: var(--cad-dim); stroke-width: 1; }
.cad .cdf { fill: var(--cad-dim); stroke: none; }
.cad .ce { stroke: var(--cad-dim); stroke-width: 1; stroke-dasharray: 5 4; }
.cad .cc { stroke: var(--cad-dim); stroke-width: 1; stroke-dasharray: 14 4 3 4; }
.cad .cf { stroke: var(--line-strong); stroke-width: 1.2; }
.cad .ctx {
fill: var(--text-dim);
font: 600 12px var(--mono);
letter-spacing: .01em;
}
/* Linien zeichnen sich beim Einscrollen. pathLength="1" im Markup macht
dasarray/offset unabhaengig von der echten Pfadlaenge — eine Regel
genuegt damit fuer jeden Pfad, egal wie lang. */
.js .cad .dw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cad .cfade { opacity: 0; }
/* Dauer und Staffelung bewusst lang: die Zeichnungen sind der Punkt der
Seite, und beim Scrollen soll man das Entstehen sehen und nicht nur das
Ergebnis. Letzte Linie faengt bei 1,25 s an und ist bei 2,75 s fertig —
dazu startet app.js frueher (siehe rootMargin dort), sonst ist das Bild
schon halb aus dem Fenster, bevor die Zeichnung steht. */
.js .reveal.is-in .cad .dw,
.js .is-in > .cad .dw { animation: cad-draw 1.5s var(--ease-draw) forwards; }
.js .reveal.is-in .cad .cfade,
.js .is-in > .cad .cfade { animation: cad-fade .8s var(--ease) forwards; }
.cad .d1 { animation-delay: .1s; }
.cad .d2 { animation-delay: .38s; }
.cad .d3 { animation-delay: .66s; }
.cad .d4 { animation-delay: .95s; }
.cad .d5 { animation-delay: 1.25s; }
@keyframes cad-draw { to { stroke-dashoffset: 0; } }
@keyframes cad-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.js .cad .dw { stroke-dasharray: none; stroke-dashoffset: 0; }
.js .cad .cfade { opacity: 1; }
.js .cad .dw, .js .cad .cfade { animation: none; }
}
.cadwrap {
margin: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 18px 14px;
}
.cadwrap figcaption {
margin-top: 10px;
font-size: .84rem;
color: var(--text-faint);
line-height: 1.5;
}
/* ------------------------------------------------- Bereichskarten (Start) */
.bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bereich {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bereich:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: var(--shadow);
}
.bereich-art {
background: var(--surface-2);
border-bottom: 1px solid var(--line);
padding: 16px 16px 10px;
}
.bereich-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.bereich-kicker {
font-size: .74rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.bereich-body h3 { font-size: 1.5rem; margin-bottom: 4px; }
.bereich-claim { color: var(--text-dim); font-size: .96rem; margin-bottom: 14px; }
.bereich-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.bereich-points li {
position: relative;
padding-left: 20px;
font-size: .92rem;
color: var(--text-dim);
}
.bereich-points li::before {
content: "";
position: absolute;
left: 2px; top: .52em;
width: 8px; height: 2px;
background: var(--accent);
}
.bereich .card-more { margin-top: auto; }
/* Zeichnung statt Foto auf einer Produktkachel. Das feste Verhaeltnis haelt
die Kachelhoehen gleich — ohne das springt die Kartenreihe, weil ein SVG
ohne width/height seine Hoehe erst aus dem viewBox ableitet. */
.card-cad {
background: var(--surface-2);
display: grid;
place-items: center;
padding: 10px 12px 4px;
aspect-ratio: 620 / 440;
}
.card-cad svg.cad { max-height: 100%; }
/* ----------------------------------------------- Bereichsseite: Einstieg */
.bereich-intro {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(24px, 4vw, 52px);
align-items: start;
}
.bereich-text > * { max-width: 62ch; }
.bereich-text h2 { margin-bottom: .6em; }
.bereich-text p { color: var(--text-dim); }
.bereich-text .ticks { margin-top: 1em; }
/* ------------------------------------------- Leistungsseite (Bau/Industrie) */
.leistung {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: clamp(24px, 4vw, 52px);
align-items: start;
}
.leistung-text h3:first-child { margin-top: 0; }
/* ---------------------------------------------------------------- Ablauf */
.steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
counter-reset: step;
}
.step {
position: relative;
padding-top: 26px;
border-top: 2px solid var(--line);
}
/* Der Fortschrittsbalken laeuft beim Einscrollen durch. Er sitzt auf dem
Element, nicht auf dem Container: so zeichnet sich jeder Schritt einzeln. */
.step::after {
content: "";
position: absolute;
inset-block-start: -2px;
inset-inline-start: 0;
height: 2px;
width: 0;
background: var(--accent);
transition: width 1.1s var(--ease-draw) .2s;
}
.js .step.is-in::after { width: 100%; }
.step-n {
display: block;
font: 800 .78rem/1 var(--mono);
letter-spacing: .12em;
color: var(--accent);
margin-bottom: 10px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { color: var(--text-dim); font-size: .92rem; margin: 0; }
/* ------------------------------------------------------------- Bildband */
.band { position: relative; padding: 0; border-top: 1px solid var(--line); isolation: isolate; }
/* Kein background-attachment: fixed. Auf iOS wird `cover` gegen die
DOKUMENThoehe gerechnet, nicht gegen den Viewport — das Bild wird dann
ueber die ganze Seite geschmiert. Ein normales ![]()
hat das Problem nicht. */
.band-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(8, 9, 11, .92) 0%, rgba(8, 9, 11, .78) 46%, rgba(8, 9, 11, .42) 100%);
}
.band-inner {
padding-block: clamp(56px, 8vw, 96px);
max-width: min(var(--maxw), 100%);
}
/* Der Verlauf ist in BEIDEN Themes dunkel — hier also feste helle Farben,
sonst steht im Hellmodus schwarze Schrift auf dunklem Foto. */
.band-inner h2 { color: #fff; max-width: 20ch; }
.band-inner p { color: rgba(255, 255, 255, .84); max-width: 54ch; margin-bottom: 0; }
.band-credit {
margin-top: 14px !important;
font-size: .78rem;
color: rgba(255, 255, 255, .55) !important;
}
/* =================================================================== Shop
Anfragekorb statt Warenkorb — dieselben Bausteine wie clients/ack/website,
Farben hier ueber die Variablen der Seite.
======================================================================== */
/* ------------------------------------------------------- Serienvorstellung */
.serien { display: grid; gap: 22px; }
.serie {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
gap: clamp(20px, 3vw, 38px);
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
}
.serie-media {
background: var(--img-bg);
border-radius: var(--radius-sm);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.serie-media img { width: 100%; height: 100%; object-fit: cover; }
.serie h3 { font-size: 1.24rem; margin-bottom: 8px; }
.serie > div > p { color: var(--text-dim); }
.serie .ticks { margin-bottom: .8em; }
.serie-range {
font-family: var(--mono);
font-size: .86rem;
color: var(--text-faint);
margin: 0 !important;
}
/* Die Serienbloecke sind Sprungziele der Startseite (shop.html#serie-lgs) —
sonst verschwindet die Ueberschrift unter dem klebenden Kopf. */
.serie { scroll-margin-top: 96px; }
/* ------------------------------------------------ Shop-Streifen der Startseite
Drei Kacheln, je Serie eine, mit „ab"-Preis. Feste Spaltenzahl wie bei
.cards und aus demselben Grund: bei genau drei Elementen soll die Zeile
drei Elemente haben und nicht an der Fensterbreite haengen. */
.shoptiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.shoptile {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
box-shadow: var(--shadow);
transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.shoptile:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.shoptile-media { background: var(--img-bg); aspect-ratio: 4 / 3; overflow: hidden; }
.shoptile-media img { width: 100%; height: 100%; object-fit: cover; }
.shoptile-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
flex: 1 1 auto;
}
.shoptile-body h3 { font-size: 1.12rem; margin: 0; }
/* Preiszeile unten ausrichten, damit die drei Kacheln trotz unterschiedlich
langer Namen auf einer Linie enden. `margin-top: auto` im Flex-Body. */
.shoptile-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 6px;
}
.shoptile .card-more { margin: 0; }
.shopmore {
display: flex;
align-items: center;
gap: clamp(14px, 2vw, 26px);
flex-wrap: wrap;
margin-top: clamp(22px, 3vw, 32px);
}
.shopmore p {
margin: 0;
font-size: .86rem;
color: var(--text-faint);
max-width: 52ch;
}
/* ------------------------------------------------------------ Filterleiste */
.pfilter {
display: flex;
flex-wrap: wrap;
gap: 18px 28px;
align-items: flex-end;
justify-content: space-between;
margin: 30px 0 24px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip-btn {
font: inherit;
cursor: pointer;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-dim);
border-radius: 999px;
padding: 8px 16px;
font-size: .88rem;
font-weight: 600;
transition: border-color .18s var(--ease), color .18s var(--ease);
}
.chip-btn span { opacity: .6; font-family: var(--mono); font-size: .85em; }
.chip-btn:hover { border-color: var(--line-strong); color: var(--text); }
.chip-btn.is-on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.chip-btn.is-on span { opacity: .8; }
.psearch { display: grid; gap: 7px; min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.psearch label { font-size: .86rem; font-weight: 700; color: var(--text-dim); }
.psearch input {
font: inherit;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: 10px;
padding: 11px 14px;
width: 100%;
min-width: 0;
}
.psearch input:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 3px rgba(240, 86, 92, .22);
}
.tcount { font-size: .82rem; color: var(--text-faint); font-family: var(--mono); margin: 0; }
/* ----------------------------------------------------------- Artikelkacheln */
.pgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
gap: 18px;
}
.pcard {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
scroll-margin-top: 96px;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* display:none statt nur [hidden]: sonst gewinnt die Grundregel display:flex
gegen die UA-Regel und gefilterte Kacheln bleiben stehen. */
.pcard[hidden] { display: none; }
.pcard-media {
appearance: none;
border: 0;
padding: 0;
background: var(--img-bg);
cursor: zoom-in;
aspect-ratio: 4 / 3;
}
.pcard-media img { width: 100%; height: 100%; object-fit: cover; }
.pcard-body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat {
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 6px;
}
.pcard h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 6px; }
.pcard-desc { font-size: .86rem; color: var(--text-faint); margin: 0 0 14px; font-family: var(--mono); }
.pcard-foot {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
}
.price-pill {
display: grid;
font-family: var(--mono);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 5px 10px;
white-space: nowrap;
}
.price-pill b { font-weight: 700; font-size: 1rem; color: var(--text); }
.price-pill small { font-size: .74rem; color: var(--text-faint); }
.add-item.is-added {
background: transparent;
color: var(--accent);
border-color: var(--accent);
box-shadow: none;
}
.pempty { margin-top: 26px; color: var(--text-dim); }
.shop-note {
max-width: 78ch;
font-size: .92rem;
color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 14px 18px;
margin: 26px 0 0;
}
.shop-note strong { color: var(--text); }
/* --------------------------------------------------------- Anfragekorb */
.cart-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 44px);
align-items: start;
}
.cart-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cart-list li {
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 13px 15px;
}
.cart-list strong { display: block; font-size: .93rem; font-weight: 600; }
.cart-price { font-family: var(--mono); font-size: .85rem; color: var(--accent); }
.cart-del {
appearance: none;
border: 1px solid var(--line-strong);
background: transparent;
color: var(--text-dim);
width: 30px;
height: 30px;
border-radius: 8px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
flex: none;
}
.cart-del:hover { color: #ef6a5a; border-color: #ef6a5a; }
.cart-empty { color: var(--text-faint); font-size: .93rem; }
.cart-sum {
font-family: var(--mono);
font-size: .88rem;
color: var(--text-dim);
margin: 0 0 4px;
}
.cart-sum b { color: var(--text); }
/* Korb-Knopf im Kopf. Taucht erst auf, wenn etwas drin liegt — app.js nimmt
das hidden weg. */
.cart-btn { position: relative; }
.cart-btn[hidden] { display: none; }
.cart-count {
position: absolute;
top: -5px;
right: -5px;
min-width: 19px;
height: 19px;
border-radius: 999px;
background: var(--accent-deep);
color: #fff;
font-size: .7rem;
font-weight: 800;
display: grid;
place-items: center;
padding: 0 4px;
}
/* Dieser Block MUSS als letzter stehen. Media Queries haben keine hoehere
Spezifitaet — .cta-inner und .sib-list definieren ihre Grundregel weiter
unten im Abschnitt "pages", und die wuerde ein weiter oben stehendes
grid-template-columns aus einer Media Query wieder ueberschreiben. */
/* ------------------------------------------------------------------ responsive */
/* Die Rasterstufen liegen alle hier beisammen, damit man in einem Blick sieht,
was bei welcher Breite umbricht. .cards darf auto-fit bleiben: sechs Karten
gehen in 3 / 2 / 1 Spalten immer glatt auf. */
@media (max-width: 1080px) {
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
.cart-grid { grid-template-columns: 1fr; }
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards > :last-child:nth-child(3n + 1) { grid-column: auto; }
/* Drei Serien auf zwei Spalten lassen eine Waise. Die legt sich quer —
dieselbe Regel wie bei .cards, und aus demselben Grund braucht ihr Bild
`aspect-ratio: auto`: 4:3 auf voller Breite ergab eine 640 px hohe
Kachel neben zwei Zeilen Text. */
.shoptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shoptiles > :last-child:nth-child(2n + 1) {
grid-column: 1 / -1;
flex-direction: row;
align-items: stretch;
}
.shoptiles > :last-child:nth-child(2n + 1) .shoptile-media {
flex: 0 0 38%;
aspect-ratio: auto;
min-height: 100%;
}
.shoptiles > :last-child:nth-child(2n + 1) .shoptile-body {
justify-content: center;
}
.cards > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
.bereiche { grid-template-columns: 1fr; }
.bereich-intro,
.leistung { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
/* Tap-to-call matters most on a phone: keep the button, drop the label. */
.call-label { display: none; }
.call-btn { padding: 11px; border-radius: 10px; }
.call-btn svg { width: 18px; height: 18px; }
.cta-inner { grid-template-columns: 1fr; }
.nav-toggle { display: grid; }
.nav {
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 12px 18px 18px;
background: var(--bg);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow);
}
.nav[hidden] { display: none; }
.nav a { padding: 12px 10px; font-size: 1rem; }
}
@media (max-width: 700px) {
.serie { grid-template-columns: 1fr; }
.psearch { min-width: 0; flex: 1 1 auto; max-width: none; }
/* nowrap in der ersten Spalte schiebt auf 390 px die WERTESPALTE aus dem
Bild: „Geländerhöhe ab 12 m Absturzhöhe" ist dort breiter als das halbe
Display. Die Tabelle bleibt zwar scrollbar, sieht aber leer aus. */
table.data td:first-child,
table.data th { white-space: normal; }
table.data th,
table.data td { padding: 10px 12px; }
/* Ab hier ist ohnehin alles einspaltig — die Waisen-Regeln oben laufen leer. */
.cards { grid-template-columns: 1fr; }
.shoptiles { grid-template-columns: 1fr; }
.shoptiles > :last-child:nth-child(2n + 1) { grid-column: auto; }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sib-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
body { font-size: 16px; }
.foot-grid,
.form-row,
.steps,
.tiles { grid-template-columns: 1fr; }
.brand small { display: none; }
/* Vier Zahlen nebeneinander brechen auf 360px in drei Zeilen um. */
.stats { grid-template-columns: 1fr; }
.wrap { padding-inline: 18px; }
}
@media print {
.top, .foot, .lb, .hero::before, .hero::after, .gallery, .form,
.band-img, .band::before { display: none !important; }
.js .reveal { opacity: 1 !important; transform: none !important; }
.band-inner h2, .band-inner p { color: #000 !important; }
body { background: #fff; color: #000; font-size: 11pt; }
}