/* ============================================================
TEXTILPFLEGE GMBH AUERBACH – Haupt-Stylesheet
Farbkonzept: Blau + Weiß + Magenta-Akzente
============================================================ */
/* Google Fonts werden per im jeder Seite geladen (nicht
mehr per @import hier) – @import blockiert das Rendern zusätzlich,
weil der Browser erst diese CSS-Datei laden und auswerten muss,
bevor er die Schriftart-Anfrage überhaupt entdeckt. Per wird
sie parallel zum übrigen HTML entdeckt und geladen. */
/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
/* Erzwingt Hell-Darstellung – verhindert, dass mobile Browser im
Dunkelmodus die weiße Seite schwarz einfärben (Text blieb sonst
als „blaue Links auf schwarz" stehen). */
color-scheme: light only;
/* Gemeinsamer linker Seitenabstand von Logo/Begrüßungstext im Hero –
wird von Menüs weiter unten (z.B. .au-menu auf "Über uns")
referenziert, damit sie unabhängig vom Breakpoint immer linksbündig
mit Logo/Text bleiben, statt eine eigene, abweichende Formel zu
pflegen. */
--hero-pad-left: 3rem;
/* Linker Innenabstand des Logos (.home-logo-wrap) – der Begrüßungstext
(.home-welcome) referenziert dieselbe Variable für padding-left, damit
beide auf jeder Bildschirmgröße exakt bündig beginnen, statt zwei
separat gepflegte Formeln zu riskieren, die auseinanderlaufen. Wird bei
jedem Breakpoint, an dem das Logo seinen linken Abstand ändert,
hier mitgeführt. */
--logo-pad-left: 3rem;
--blue-900: #0F2B6B;
--blue-800: #1A3D87;
--blue-700: #2550A0;
--blue-600: #3364B5;
--blue-400: #6692C8;
--blue-100: #C5D5EC;
--blue-50: #EAF0F8;
--magenta-900: #8B0040;
--magenta-700: #C0005A;
--magenta-500: #D4006A;
--magenta-100: #E8B3CC;
--magenta-50: #F8E8F0;
--white: #FFFFFF;
--gray-50: #FAFAFA;
--gray-100: #F5F7FA;
--gray-200: #ECEFF1;
--gray-300: #CFD8DC;
--gray-400: #B0BEC5;
--gray-600: #6B7280;
--gray-800: #374151;
--gray-900: #111827;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-heading: 'Jost', 'Inter', sans-serif;
--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
--shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
--shadow-mag: 0 4px 20px rgba(168, 61, 111, 0.15);
--radius-sm: 6px;
--radius: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--radius-full: 9999px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: all 0.15s ease;
--container: 1240px;
--header-h: 100px;
/* Höhe des Fade-Overlays oben auf Unterseiten – skaliert mit Viewport
(240px bei 1920px Breite, min. 130px auf Smartphones) */
--fade-h: clamp(130px, 12.5vw, 240px);
}
/* ── Homepage – kein Standard-Header ───────────────────────── */
.home { padding-top: 0; }
.home .header { display: none; }
/* ── Alle anderen Seiten: Magenta-Hintergrund, kein Header ──── */
body:not(.home) {
background-image: url('../Assets/Magenta-Hintergrund.png');
background-color: var(--white);
background-size: cover;
background-position: top right;
background-repeat: no-repeat;
background-attachment: fixed;
padding-top: 0;
}
/* Header: fixiert oben, transparent, kein Schatten */
body:not(.home) .header {
position: fixed;
background: transparent;
box-shadow: none;
}
/* Anker-Ziele auf Nicht-Startseiten: unterhalb des fixen Fades positionieren.
Elemente (h2, div, …) direkt auf 260px; Sections haben .section-padding (5rem=80px)
oben, daher genügen 180px damit die Überschrift bei ~260px sichtbar wird. */
body:not(.home) [id] { scroll-margin-top: calc(var(--fade-h) + 20px); }
body:not(.home) section[id] { scroll-margin-top: calc(var(--fade-h) - 60px); }
/* Verlauf-Overlay: fixiert oben, blendet Inhalt aus bevor er die Nav erreicht */
body:not(.home)::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--fade-h);
background-color: var(--white);
background-image: url('../Assets/Magenta-Hintergrund.png');
background-size: cover;
background-position: top right;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 63%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 63%, transparent 100%);
pointer-events: none;
z-index: 50;
}
/* Über uns: page-hero bekommt eigenen Bild-Hintergrund wie .home-hero auf der Startseite — Firma-Bild hinten, Magenta-Hintergrund davor */
/* Seiten mit eigenem Foto-Hintergrund */
body.ueber-uns, body.kitas, body.krankenhaus,
body.pflegeheim, body.gewerbe, body.lebensmittel,
body.hotels, body.privatwaesche, body.kontakt,
body.leistungen, body.impressum, body.datenschutz {
background-image: none;
background-attachment: scroll;
}
/* Fixierte Hintergrundbilder (generisch für alle Seiten mit Foto-BG).
Höhe = max(100vh, 80vw) exakt wie die .home-hero auf der Startseite,
damit Foto und Rahmen dasselbe Format/denselben Bildausschnitt zeigen.
Fixiert oben → der untere Teil des Rahmens wird am Viewport-Rand
abgeschnitten und scrollt nicht mit. */
.page-bg-photo {
position: fixed;
top: 0; left: 0;
width: 100%; height: max(100vh, 80vw);
object-fit: cover;
object-position: center top;
z-index: -2;
pointer-events: none;
display: block;
}
.page-bg-magenta {
position: fixed;
top: 0; left: 0;
width: 100%; height: max(100vh, 80vw);
/* object-fit: fill → der Rahmen füllt exakt dieselbe Box wie auf der
Startseite (kein Zusammenstauchen auf die reine Viewport-Höhe). */
object-fit: fill;
z-index: -1;
pointer-events: none;
display: block;
}
/* ═══════════════════════════════════════════════════════════
UNTERSEITEN-HERO – gleiches Grunddesign wie die Startseite:
großes Logo oben links, Navigation oben rechts, großer
Magentarahmen als fixierter Seitenrahmen. Individuell bleiben
nur das Hintergrundfoto (.page-bg-photo) und der Seiteninhalt.
═══════════════════════════════════════════════════════════ */
/* Der obere Fade-Overlay wird nicht mehr benötigt (keine fixierte
Kopfzeile mehr) und würde sonst das Logo überdecken. */
body:not(.home)::before { display: none !important; }
/* Hero: Grid wie die Startseite, aber ohne die feste 100vh/80vw-Höhe,
damit der Seiteninhalt direkt darunter beginnt. Höhere Spezifität
(body:not(.home)) setzt sich gegen alle .home-hero-Regeln durch. */
body:not(.home) .sub-hero {
height: auto;
min-height: min(82vh, 780px);
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"logo nav"
"text text";
padding-bottom: clamp(2rem, 5vw, 5rem);
}
/* Grid-Kinder der Hero-Bereiche dürfen unter ihre Inhaltsbreite schrumpfen.
Ohne min-width:0 zieht ein einzelnes langes Wort (z. B. eine Akkordeon-
Überschrift) die 1fr-Spalte über die Bildschirmbreite hinaus, statt dass
der Text umbricht. Die Navigation ist bewusst ausgenommen – sie soll ihre
Reiter nie beschneiden. */
.home-hero > .home-logo-wrap,
.home-hero > .home-welcome,
.sub-hero > .au-section,
.sub-hero > .datenschutz-cert-section { min-width: 0; }
/* Logo als Startseiten-Link */
.home-logo-wrap .home-logo-link { display: block; line-height: 0; }
/* Titelblock (ersetzt den Willkommenstext) */
body:not(.home) .sub-hero .home-welcome { max-width: min(50vw, 100%); }
body:not(.home) .sub-hero .breadcrumb { margin-bottom: 0.85rem; }
body:not(.home) .sub-hero .home-welcome h1 {
font-size: clamp(1.6rem, 4vw, 3.4rem);
margin-bottom: 0.7rem;
}
body:not(.home) .sub-hero .home-welcome p {
font-size: clamp(1.05rem, 1.5vw, 1.6rem);
line-height: 1.5;
opacity: 1;
}
/* Über uns: Das Menü liegt jetzt im Hero-Grid (dritte Zeile), die den
restlichen Platz einnimmt (1fr) und ihren Inhalt vertikal zentriert –
dadurch steht das Menü mittig zwischen Firmenbild und unterem Hero-Rand. */
body.ueber-uns .sub-hero {
grid-template-rows: auto auto 1fr;
grid-template-areas:
"logo nav"
"text text"
"menu menu";
align-content: stretch;
}
body.ueber-uns .sub-hero .au-section {
grid-area: menu;
align-self: center;
width: 100%;
padding-top: 0;
}
/* Datenschutz: PDF-Vorschau nach dem gleichen Muster mittig zwischen
Einleitungstext und unterem Hero-Rand zentriert. */
body.datenschutz .sub-hero {
grid-template-rows: auto auto 1fr;
grid-template-areas:
"logo nav"
"text text"
"cert cert";
align-content: stretch;
/* höher als die generische Hero-Mindesthöhe: die große PDF-Vorschau
braucht deutlich mehr Raum, damit über/unter ihr wirklich sichtbarer
Zentrierungs-Spielraum bleibt statt direkt am Text zu kleben. Auf
normal hohen Bildschirmen (~1080px) ist der Inhalt selbst schon
höher als der Viewport – dort wird ohnehin gescrollt, echte
Zentrierung zeigt sich vor allem auf höheren/vertikaleren Bildschirmen. */
min-height: min(100vh, 1450px);
}
body.datenschutz .sub-hero .datenschutz-cert-section {
grid-area: cert;
align-self: center;
width: 100%;
padding-top: 0;
}
/* Über uns: Foto liegt unter dem Einleitungstext (nicht mehr daneben). */
body.ueber-uns .sub-hero .about-welcome {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* flex-basis wirkt hier (Spalten-Layout) auf die Höhe, nicht die Breite –
daher zusätzlich max-width, damit der Begrüßungstext wie auf den anderen
Seiten spätestens in der Bildschirmmitte endet statt auf volle Breite
zu laufen. */
.about-intro-text {
flex: 0 1 min(50vw, 100%);
max-width: min(50vw, 100%);
min-width: 0;
}
.about-hero-photo {
position: relative;
z-index: 1;
width: clamp(260px, 32vw, 520px);
height: auto;
margin: 0;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(8, 20, 50, 0.28);
display: block;
}
/* Mobil: einspaltig wie die Startseite (Logo oben, Titel darunter,
Navigation als Hamburger-Panel) */
@media (max-width: 768px) {
body:not(.home) .sub-hero {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"logo"
"text";
min-height: auto;
}
.about-intro-text { flex-basis: 100%; }
.about-hero-photo {
width: 100%;
max-width: 460px;
}
/* Menü auf Mobil einfach im normalen Fluss unter dem Foto, keine
Zentrierung in einer Restplatz-Zeile nötig */
body.ueber-uns .sub-hero {
grid-template-rows: auto auto auto;
grid-template-areas:
"logo"
"text"
"menu";
min-height: auto;
}
body.ueber-uns .sub-hero .au-section {
align-self: start;
padding-top: clamp(1.5rem, 4vw, 3.5rem);
}
/* Datenschutz: PDF-Vorschau auf Mobil ebenfalls einfach im normalen
Fluss unter dem Einleitungstext, keine Zentrierung in einer
Restplatz-Zeile nötig */
body.datenschutz .sub-hero {
grid-template-rows: auto auto auto;
grid-template-areas:
"logo"
"text"
"cert";
min-height: auto;
}
body.datenschutz .sub-hero .datenschutz-cert-section {
align-self: start;
padding-top: clamp(1.5rem, 4vw, 3.5rem);
}
}
/* ::before-Fade pro Seite: Magenta-PNG + Seiten-Foto statt weiß */
body.ueber-uns::before,
body.kontakt::before,
body.impressum::before,
body.datenschutz::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Firma-Bild.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.kitas::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Kitas%C2%A7%C3%B6ffentliche%20Einrichtungen-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.krankenhaus::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Krankenh%C3%A4user-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.pflegeheim::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Pflegeheim-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.gewerbe::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Gewerbe%C2%A7Industrie-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.lebensmittel::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Lebensmittelbetriebe-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.hotels::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Hotels-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.privatwaesche::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Privatw%C3%A4sche-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
body.feuerwehr::before {
background-color: transparent;
background-image: url('../Assets/Magenta-Hintergrund.png'), url('../Assets/Feuerwehren%20%26%20Rettungsdienste-wei%C3%9F.jpg');
background-size: cover, cover;
background-position: top right, center top;
background-repeat: no-repeat, no-repeat;
}
/* Seiten mit eigenem Foto-Hintergrund */
body.feuerwehr {
background-image: none;
background-attachment: scroll;
}
/* Seiten mit wenig Inhalt: mindestens Viewport-hoch */
body.kitas .section, body.krankenhaus .section, body.pflegeheim .section,
body.gewerbe .section, body.lebensmittel .section,
body.hotels .section, body.privatwaesche .section,
body.feuerwehr .section { min-height: 60vh; }
body:not(.home) .header-main {
padding: clamp(0.75rem, 1.4vw, 1.5rem) clamp(1rem, 3vw, 3.5rem);
height: auto;
max-width: 100%;
align-items: flex-start;
}
body:not(.home) .logo-img { height: clamp(60px, 6.25vw, 120px); }
body:not(.home) .menu-toggle { display: none; }
/* Nav: weiße Schrift auf Magenta, oben bündig */
body:not(.home) .nav > ul > li > a {
color: var(--white);
font-size: 1.45rem;
font-weight: 700;
}
body:not(.home) .nav > ul > li > a:hover {
color: var(--white);
background: rgba(255,255,255,0.2);
}
body:not(.home) .nav > ul > li > a.active {
color: var(--white);
background: rgba(255,255,255,0.15);
}
body:not(.home) .has-dropdown > a::after { color: var(--white); }
/* Page-Hero: unterhalb der Nav */
body:not(.home) .page-hero-bg { background: none !important; }
body:not(.home) .page-hero::after { display: none; }
body:not(.home) .page-hero {
background: transparent;
height: auto;
min-height: auto;
padding: calc(var(--fade-h) + 1rem) 0 clamp(1.5rem, 3vw, 4rem);
}
body:not(.home) .page-hero h1 { color: var(--blue-900); text-shadow: none; }
body:not(.home) .page-hero p { color: var(--blue-900); opacity: 0.85; }
body:not(.home) .breadcrumb { color: var(--blue-900); }
body:not(.home) .breadcrumb a { color: var(--blue-900); opacity: 0.65; }
body:not(.home) .breadcrumb span { color: var(--blue-900); opacity: 0.65; }
/* Alle Hintergründe: transparent → nur Magenta sichtbar */
body:not(.home) .section,
body:not(.home) .section-sm { background: transparent; padding-top: 1.5rem; padding-bottom: 1.5rem; }
body:not(.home) .bg-gray { background: transparent; }
body:not(.home) .bg-blue-light { background: transparent; }
body:not(.home) .bg-white { background: transparent; }
body:not(.home) .features-strip { background: transparent; }
body:not(.home) .footer h1,
body:not(.home) .footer h2,
body:not(.home) .footer h3,
body:not(.home) .footer h4,
body:not(.home) .footer h5 { color: var(--white); opacity: 1; }
body:not(.home) .footer p { color: rgba(255,255,255,0.75); opacity: 1; }
/* Cards & Kacheln: semi-transparent statt weiß */
body:not(.home) .service-card,
body:not(.home) .value-card,
body:not(.home) .contact-info-card,
body:not(.home) .team-card {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.25);
}
body.ueber-uns .team-card {
background: transparent;
border-color: transparent;
box-shadow: none;
}
body:not(.home) .service-card:hover,
body:not(.home) .contact-info-card:hover {
background: rgba(255,255,255,0.28);
}
/* Textfarben auf Magenta-Hintergrund: blau/dunkel */
body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) h5 { color: var(--blue-900); }
body:not(.home) p,
body:not(.home) .service-card-body p,
body:not(.home) .value-card p,
body:not(.home) .timeline-item p { color: var(--blue-900); opacity: 0.8; }
body:not(.home) .text-magenta { color: var(--magenta-900); }
body:not(.home) .section-subtitle { color: var(--blue-900); opacity: 0.75; }
/* ── Unterseiten: gesamte Schrift größer ─────────────────────── */
body:not(.home) .page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); }
body:not(.home) .page-hero p { font-size: clamp(1.25rem, 1.75vw, 1.55rem); }
body:not(.home) .breadcrumb { font-size: 1.1rem; }
body:not(.home) .section-title { font-size: clamp(1.8rem, 3.7vw, 2.75rem); }
body:not(.home) .section-subtitle { font-size: clamp(1.25rem, 1.75vw, 1.55rem); }
body:not(.home) .section p,
body:not(.home) .section li,
body:not(.home) .contact-info-body p { font-size: 1.22rem; }
body:not(.home) .section h3 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
body:not(.home) .section h4,
body:not(.home) .contact-info-body h4 { font-size: 1.3rem; }
body:not(.home) .sidebar-card p,
body:not(.home) .cert-item { font-size: 1.14rem; }
/* Inline-Style Boxen: alle weißen/grauen Hintergründe transparent */
body:not(.home) [style*="background:var(--white)"],
body:not(.home) [style*="background: var(--white)"],
body:not(.home) [style*="background:var(--blue-50)"],
body:not(.home) [style*="background: var(--blue-50)"],
body:not(.home) [style*="background:var(--gray-100)"],
body:not(.home) [style*="background: var(--gray-100)"] {
background: transparent !important;
border-color: rgba(255,255,255,0.2) !important;
}
/* Features-Strip: Trennlinien auf Magenta anpassen */
body:not(.home) .feature-item {
border-top-color: rgba(255,255,255,0.3);
}
/* Map-Container bleibt sichtbar */
body:not(.home) .map-container { background: transparent; }
/* Linksbündige Ausrichtung aller Textinhalte auf Unterseiten */
body:not(.home) .container,
body:not(.home) .page-hero-content {
margin: 0;
padding-left: clamp(1.25rem, 4vw, 4rem);
}
/* Fußzeile: zentriert wie auf der Startseite */
body:not(.home) .footer .container {
margin: 0 auto;
padding-left: 1.5rem;
}
body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) h5,
body:not(.home) p,
body:not(.home) .section-title,
body:not(.home) .section-subtitle { text-align: left !important; }
body:not(.home) .team-card span { text-align: left; display: block; }
body:not(.home) .section-subtitle {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
body:not(.home) .divider { margin-left: 0; margin-right: auto; }
/* ── Home Hero ──────────────────────────────────────────────── */
.arc-wrapper {
position: relative;
z-index: 1;
/* Fallback-Hintergrund in Markenfarben hinter den Bildern – falls die
Hintergrundbilder (noch) nicht geladen sind, steht der Text nie auf
schwarz. Die Bilder (z-index 0/1) legen sich beim Laden darüber. */
background: linear-gradient(160deg, #ffffff 0%, #f3d6e6 52%, #E6298E 100%);
/* Gleiche Formel wie .home-hero (nicht mehr nur 4/5 davon): bei hohen,
schmaleren Fenstern (vh-Anteil dominiert) war dieser Wrapper vorher
niedriger als der tatsächliche Hero-Inhalt und hat dadurch echten
Inhalt (die Kundenkacheln, die unten im Hero verankert sind) statt
nur überschüssigen leeren Hintergrund abgeschnitten. */
height: max(100vh, 80vw);
overflow: hidden;
}
/* Hintergrundbilder: Handtücher hinter Magenta-Bogen.
Eigene, unveränderte Höhe (wie .home-hero ursprünglich) statt 100%
des geschrumpften Wrappers – sonst würde object-fit sie beim Zuschneiden
auf die kürzere Boxhöhe stauchen/verzerren, statt sie einfach am
Wrapper-Rand abzuschneiden. */
.home-bg-tucher {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max(100vh, 80vw);
object-fit: cover;
object-position: left top;
transform: translateX(-6%);
z-index: 0;
pointer-events: none;
display: block;
}
.home-bg-magenta {
display: block;
width: 100%;
height: max(100vh, 80vw);
position: absolute;
top: 0;
left: 0;
object-fit: fill;
z-index: 1;
pointer-events: none;
}
.home-hero {
position: relative;
z-index: 2;
height: max(100vh, 80vw);
overflow: visible;
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 1fr auto;
grid-template-areas:
"logo nav"
"text text"
"kb kb";
align-content: start;
background: none;
}
/* Logo – sehr groß, wie auf dem LKW: obere linke Hälfte, fast randlos */
.home-logo-wrap {
grid-area: logo;
display: flex;
align-items: flex-start;
padding: 3.25rem 2rem 0rem var(--logo-pad-left);
z-index: 1;
/* Ohne min-width:0 kann die 1fr-Spalte nicht unter die Eigenbreite des
Logos schrumpfen – die Navigation daneben (auto-Spalte) wurde dadurch
auf schmaleren Bildschirmen aus dem Bild gedrängt ("Kontakt" abge-
schnitten). Mit min-width:0 + max-width am Bild skaliert das Logo
stattdessen mit. */
min-width: 0;
}
.home-logo {
width: min(1650px, 99vw);
max-width: 100%;
height: auto;
}
/* Nav – Startseite: identische Struktur wie andere Seiten, im Grid positioniert */
.home-hero .nav {
grid-area: nav;
align-self: start;
padding: 1.5rem 3.5rem 0 2rem;
z-index: 2;
}
.home-hero .nav > ul > li > a {
color: var(--white);
}
.home-hero .nav > ul > li > a:hover {
color: var(--white);
background: rgba(255,255,255,0.2);
}
.home-hero .nav > ul > li > a.active {
color: var(--white);
background: rgba(255,255,255,0.15);
}
/* Willkommenstext – unter Logo, gleicher Seitenabstand wie Logo */
.home-welcome {
grid-area: text;
padding: 2.25rem 2rem 2rem var(--logo-pad-left);
z-index: 1;
max-width: min(50vw, 100%);
text-align: left;
}
/* Schriftgröße mit demselben vw-Faktor wie das Logo (min(1500px, 93vw)), damit
das Verhältnis Text↔Logo auf jedem Format gleich bleibt und der Text nie
viel kleiner als das Logo wirkt. Obergrenze wie bisher. */
.home-welcome h1 {
font-size: clamp(1.5rem, 3.1vw, 3.1rem);
color: #1B4A8A;
line-height: 1.3;
margin-bottom: 0.8rem;
white-space: normal;
}
.home-welcome p {
font-size: clamp(1.2rem, 2vw, 2rem);
color: #1B4A8A;
line-height: 1.6;
}
/* Magenta Arc (alter Ansatz – nicht mehr genutzt) */
.magenta-arc { display: none; }
/* ── Kunden-Kacheln (Homepage Hero) ─────────────────────────── */
.kunden-tiles {
grid-area: tiles;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 1.2rem;
padding: 0 2rem 14rem 2.5rem;
margin-top: 0;
z-index: 1;
align-self: end;
}
.kunden-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
flex: 0 0 clamp(130px, calc((100vw - 14rem) / 7), 305px);
padding: 0.15rem 0.1rem;
background: transparent;
border: none;
border-radius: var(--radius);
text-decoration: none;
color: #1B4A8A;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(1.1rem, 1.35vw, 1.65rem);
text-align: center;
transition: background 0.2s, transform 0.2s;
}
.kunden-tile:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-3px);
}
.kunden-tile .kunden-blasen {
width: 100%;
height: clamp(130px, calc((100vw - 14rem) / 7), 305px);
opacity: 1;
transition: transform 0.3s ease;
margin-bottom: -3rem;
}
.kunden-tile span {
position: relative;
z-index: 1;
width: 100%;
}
.kunden-tile:hover .kunden-blasen {
animation: blasen-float 1.6s ease-in-out infinite;
}
/* ── Zertifikate (Homepage rechts) ─────────────────────────── */
.home-siegel {
position: absolute;
right: 0.5rem;
top: 46vh;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.75rem;
z-index: 3;
}
.home-siegel a {
display: flex;
align-items: center;
justify-content: center;
width: clamp(90px, 7.4vw, 158px);
height: clamp(106px, 8.7vw, 186px);
background: transparent;
box-shadow: none;
border: none;
border-radius: 0;
overflow: visible;
transition: transform 0.2s;
flex-shrink: 0;
padding: 0;
}
.home-siegel a:hover {
transform: scale(1.07);
box-shadow: none;
}
.home-siegel img {
height: clamp(74px, 6.4vw, 133px);
width: auto;
}
/* ── Kundenbereiche Kacheln (Homepage) ──────────────────────────
Bild-Kacheln im Stil der Kunden-Seite (leistungen.html), aber
ohne Verdunklung, mit blauer Schrift und nebeneinander. Beim
Hovern öffnet sich darunter das stark verschwommene Bild mit den
Unterpunkten der jeweiligen Kundenseite. */
.kb-sektion {
/* Keine explizite Grid-Platzierung: dann ist der Bezugsrahmen der
absoluten Positionierung die volle Padding-Box des Hero-Grids
(nicht die zusammenfallende Zelle "kb"). */
grid-area: auto;
width: 100%;
background: transparent;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0;
padding-top: clamp(1rem, 2.2vw, 2.75rem);
padding-bottom: clamp(2rem, 3.4vw, 4.5rem);
padding-left: clamp(1.25rem, 5vw, 5rem);
padding-right: clamp(1.25rem, 5vw, 5rem);
/* Am sichtbaren unteren Bildschirmrand (100vh) verankert, egal wie hoch
der Hero (max(100vh,80vw)) tatsächlich ist. So sitzen die Kacheln auf
JEDER Bildschirmgröße/-höhe zuverlässig knapp über der unteren Kante –
Desktop wie Laptop gleich. Ein Overlap mit Logo/Begrüßungstext bei sehr
kurzen Viewports verhindert zusätzlich JS (siehe positionKbSektion in
script.js), das bei Bedarf per inline "top" auf Normalfluss unter dem
Text umschaltet. */
position: absolute;
left: 0;
right: 0;
bottom: calc(max(100vh, 80vw) - 100vh + clamp(1.5rem, 4vh, 3.5rem));
z-index: 3;
}
/* Kachel = Kunden-Karte ohne Verdunklung, nebeneinander */
.kb-row {
flex: 1 1 0;
min-width: 0;
position: relative;
text-decoration: none;
/* JS setzt hier bei Bedarf ein translateY(-Npx), falls unterhalb der
Kachel nicht genug Platz für das (nach unten öffnende) Dropdown ist. */
transition: transform 0.3s ease;
}
/* Unsichtbare Brücke über den Abstand zur Kachel und dem Ausklappbereich:
ohne sie verlässt der Cursor beim Herunterfahren kurz die Hover-Fläche
(weder Kachel noch Ausklappbereich decken diese Lücke ab), wodurch
sich das Feld vorzeitig wieder schließt. */
.kb-row::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 10px;
}
/* Sichtbare Kartenfläche: Bild wie auf der Kunden-Seite, blaue Schrift */
.kb-label {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
text-align: center;
/* aspect-ratio statt fester (vw- oder vh-basierter) Höhe: die Breite
ergibt sich aus 1/8 der Zeile (flex:1 1 0 auf .kb-row), eine von der
Breite unabhängige Höhenformel führte je nach Bildschirmbreite/-höhe
zu unproportional hohen ("hochkant") statt querformatigen Kacheln. */
aspect-ratio: 4 / 3;
min-height: 70px;
max-height: 205px;
width: 100%;
padding: 0.7rem 0.6rem;
border-radius: 0;
overflow: hidden;
isolation: isolate;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 6px 18px rgba(8, 20, 50, 0.18);
font-family: var(--font-heading);
font-size: clamp(0.8rem, 1.0vw, 1.35rem);
font-weight: 700;
line-height: 1.2;
color: #1B4A8A;
letter-spacing: 0.01em;
/* Lange Einzelwörter ("Lebensmittelbetriebe") passen auf schmaleren
Bildschirmen nicht in eine Kachelzeile und wurden vorher hart
abgeschnitten. Silbentrennung (die Seite ist lang="de") bricht sie
jetzt sauber um; break-word greift als Rückfall, wenn der Browser
kein Trennmuster hat. */
overflow-wrap: break-word;
hyphens: auto;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.7);
user-select: none;
text-decoration: none;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* Weißer Schleier von unten bis zur Bildmitte (wie bei den
Kunden-Kacheln auf leistungen.html) – obere Bildhälfte bleibt
unverdeckt scharf sichtbar, Text bleibt unten lesbar. */
.kb-label::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 30%, rgba(255,255,255,0.6) 52%, transparent 68%);
z-index: -1;
}
.kb-label > * { position: relative; z-index: 1; }
.kb-row:hover .kb-label {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(8, 20, 50, 0.28);
}
/* Weicher, leicht verschwommener Übergang zwischen den einzelnen
Kundenbereichen: ein schmaler, weichgezeichneter Streifen genau auf
der Nahtstelle zweier benachbarter Kacheln lässt die Bilder ineinander
verlaufen statt hart aneinanderzustoßen. */
.kb-row:not(:last-child)::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -9px;
width: 18px;
z-index: 4;
pointer-events: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Aufklappbereich: öffnet sich unter der Kachel, ohne Layout-Shift.
Direkt anschließend (kein Abstand zur Kachel) – jede Lücke wäre eine
Zone, in der :hover verloren geht und das Feld sich schließt. */
.kb-expand {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
width: 100%;
/* Höhe richtet sich nach dem Inhalt (Anzahl der Unterpunkte) –
max-height dient nur als großzügige Obergrenze fürs Auf-/Zuklappen.
Kein min-height: das würde max-height:0 im geschlossenen Zustand
überstimmen und die Unterpunkte dauerhaft (unsichtbar) blockieren. */
max-height: 0;
overflow: hidden;
border-radius: 0;
opacity: 0;
pointer-events: none;
box-shadow: 0 14px 34px rgba(8, 20, 50, 0.3);
transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
z-index: 50;
/* kein Bild mehr – nur ein leicht verschwommenes Glasfeld, damit sich
die blaue Schrift abhebt, ohne komplett blickdicht zu wirken */
-webkit-backdrop-filter: blur(10px) saturate(1.15);
backdrop-filter: blur(10px) saturate(1.15);
}
/* Bild-Hintergrund entfernt – das Feld selbst ist über backdrop-filter
verschwommen, kein Kachelbild mehr sichtbar */
.kb-expand-img { display: none; }
/* dezenter, aufhellender Schleier statt blickdichtem Weiß */
.kb-expand::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.38);
z-index: 1;
}
.kb-row:hover .kb-expand {
max-height: 440px;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* ── Gespiegelter Magentabogen (Homepage unten) ─────────────── */
.home-mirror-arc {
position: relative;
z-index: 0;
width: 100%;
height: 80vh;
margin-top: -40vh;
background-image: url('../Assets/Magenta-Hintergrund.png');
background-size: cover;
background-position: top right;
background-repeat: no-repeat;
transform: scaleY(-1);
pointer-events: none;
}
/* ── Firmengeschichte (Homepage unten) ──────────────────────── */
.home-history-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Fluide Basis-Schriftgröße: 16px bei 1920px Breite, skaliert sanft
nach unten – dadurch skalieren alle rem-basierten Größen (Schrift,
Abstände, Buttons) proportional mit dem Bildschirm. */
html { scroll-behavior: smooth; font-size: clamp(13.5px, 11px + 0.26vw, 16px); }
body {
font-family: var(--font);
color: var(--gray-800);
background: var(--white);
line-height: 1.7;
position: relative;
-webkit-font-smoothing: antialiased;
/* Lange deutsche Komposita ("Thromboseprophylaxestrümpfe",
"Brandbekämpfungshandschuhen") sind auf sehr schmalen Handys breiter
als die Textspalte und ragten dort über den Bildschirmrand hinaus.
Greift ausschließlich, wenn ein Wort sonst überliefe – normale Zeilen
werden unverändert umbrochen. */
overflow-wrap: break-word;
}
/* Sicherheitsnetz gegen horizontales Scrollen auf jedem Endgerät –
rein defensiv, schneidet nichts vom eigentlichen Layout ab, da kein
Element absichtlich über die Viewport-Breite hinausragt. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { line-height: 1.25; font-weight: 700; color: var(--blue-900); font-family: var(--font-heading); }
h1 { font-size: clamp(1.875rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.375rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.375rem); }
h4 { font-size: 1rem; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
/* ── Layout Utilities ───────────────────────────────────────── */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
}
.section {
padding: 5rem 0;
}
.section-sm {
padding: 3rem 0;
}
.section-title {
text-align: center;
margin-bottom: 0.75rem;
}
.section-subtitle {
text-align: center;
color: var(--gray-600);
font-size: 1.05rem;
margin-bottom: 2rem;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.text-magenta { color: var(--magenta-700); }
.text-blue { color: var(--blue-800); }
.text-muted { color: var(--gray-600); }
.bg-blue-light { background: var(--blue-50); }
.bg-gray { background: var(--gray-100); }
.bg-white { background: var(--white); }
.bg-blue-dark { background: var(--blue-900); }
/* Divider line beneath headings */
.divider {
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--blue-700), var(--magenta-700));
border-radius: var(--radius-full);
margin: 0.75rem auto 0;
}
.divider-left { margin-left: 0; }
/* ── Header ─────────────────────────────────────────────────── */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--white);
box-shadow: var(--shadow);
transition: var(--transition);
}
.header-top {
background: var(--blue-900);
color: rgba(255,255,255,0.85);
font-size: 0.8rem;
padding: 0.35rem 0;
}
.header-top .container {
display: flex;
align-items: center;
gap: 1.5rem;
justify-content: flex-end;
}
.header-top a {
color: rgba(255,255,255,0.85);
display: flex;
align-items: center;
gap: 0.35rem;
transition: color 0.2s;
}
.header-top a:hover { color: var(--white); }
.header-main {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
padding: 0 1.5rem;
max-width: var(--container);
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.logo-img {
height: var(--header-h);
width: auto;
display: block;
flex-shrink: 0;
}
.logo-text { line-height: 1.2; }
.logo-text strong {
display: block;
font-size: 0.875rem;
font-weight: 700;
color: var(--blue-900);
letter-spacing: 0.12em;
text-transform: uppercase;
font-family: var(--font-heading);
}
.logo-text span {
font-size: 0.6rem;
color: var(--magenta-700);
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
}
/* Main Navigation */
.nav { display: flex; align-items: center; }
.nav > ul {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav > ul > li { position: relative; }
.nav > ul > li > a {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.9rem;
font-size: 1.45rem;
font-weight: 700;
color: var(--blue-900);
border-radius: var(--radius-sm);
transition: var(--transition-fast);
white-space: nowrap;
}
.nav > ul > li > a:hover { color: var(--blue-700); background: rgba(255,255,255,0.35); }
.nav > ul > li > a.active { color: var(--blue-900); background: none; }
/* Dropdown Icon – Symbole überall ausblenden */
.dd-icon { display: none !important; }
/* Dropdown Arrow */
.has-dropdown > a::after {
content: '▾';
font-size: 0.75rem;
opacity: 0.6;
transition: transform 0.2s;
}
.has-dropdown:hover > a::after { transform: rotate(180deg); }
/* Dropdown Menu */
.dropdown {
position: absolute;
top: calc(100% + 0.5rem);
/* Rechtsbündig zum Reiter statt linksbündig: Die Navigation sitzt auf
allen Seiten oben rechts, dadurch ragte das 260px breite Klappmenü
unter "Kunden" je nach Fensterbreite über den rechten Bildschirmrand
hinaus und wurde dort abgeschnitten. */
left: auto;
right: 0;
min-width: 260px;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
border: 1px solid var(--blue-100);
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: var(--transition);
z-index: 100;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown li a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--gray-800);
border-radius: var(--radius-sm);
transition: var(--transition-fast);
}
.dropdown li a:hover {
background: var(--blue-50);
color: var(--blue-800);
}
.dropdown li a .dd-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--blue-50);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
/* CTA Button in Nav – gleich wie andere Nav-Links */
.nav-cta {
/* kein spezielles Styling – identisch mit anderen Navigationspunkten */
}
/* Mobile Menu Toggle */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
padding: 8px;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--blue-900);
border-radius: 2px;
transition: var(--transition);
}
.menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Page body offset for fixed header */
body { padding-top: var(--header-h); }
/* ── Hero / Slider ──────────────────────────────────────────── */
.home .hero { display: none; }
.hero {
position: relative;
height: 620px;
overflow: hidden;
z-index: 3;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease;
display: flex;
align-items: center;
}
.slide.active { opacity: 1; z-index: 1; }
.slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.04);
transition: transform 7s ease;
}
.slide.active .slide-bg { transform: scale(1); }
.slide::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.slide-1 .slide-bg { background: linear-gradient(135deg, #0F2B6B 0%, #1A3D87 60%, #2550A0 100%); }
.slide-1::before { background: linear-gradient(to right, rgba(15,43,107,0.72) 35%, rgba(15,43,107,0.18)); }
.slide-2 .slide-bg { background: linear-gradient(135deg, #1A3D87 0%, #2550A0 55%, #192B55 100%); }
.slide-2::before { background: linear-gradient(to right, rgba(26,61,135,0.72) 35%, rgba(26,61,135,0.18)); }
.slide-3 .slide-bg { background: linear-gradient(135deg, #0F2B6B 0%, #1A3D87 55%, #253555 100%); }
.slide-3::before { background: linear-gradient(to right, rgba(15,43,107,0.72) 35%, rgba(15,43,107,0.18)); }
.slide-4 .slide-bg { background: linear-gradient(135deg, #1A3D87 0%, #0F2B6B 50%, #1A3D87 100%); }
.slide-4::before { background: linear-gradient(to right, rgba(26,61,135,0.72) 35%, rgba(15,43,107,0.18)); }
/* Decorative bubble pattern overlay */
.slide::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
}
.slide-content {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
width: 100%;
}
.slide-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.3);
color: var(--white);
padding: 0.3rem 1rem;
border-radius: 3px;
font-size: 0.75rem;
font-weight: 500;
margin-bottom: 1.25rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.slide-title {
color: var(--white);
font-size: clamp(1.75rem, 4.5vw, 3rem);
font-weight: 700;
line-height: 1.2;
max-width: 700px;
margin-bottom: 1.25rem;
text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.slide-text {
color: rgba(255,255,255,0.88);
font-size: 1.05rem;
max-width: 540px;
margin-bottom: 2rem;
line-height: 1.7;
}
.slide-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Slider Controls */
.slider-nav {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 10;
}
.slider-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.45);
cursor: pointer;
transition: var(--transition);
border: none;
}
.slider-dot.active {
background: var(--white);
width: 28px;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.3);
color: var(--white);
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
}
.slider-arrow:hover { background: rgba(255,255,255,0.3); }
.slider-arrow.prev { left: 1.5rem; }
.slider-arrow.next { right: 1.5rem; }
/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
border-radius: var(--radius-full);
font-size: 0.925rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--magenta-700), var(--magenta-500));
color: var(--white);
box-shadow: var(--shadow-mag);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(168,61,111,0.25);
}
.btn-secondary {
background: transparent;
color: var(--white);
border-color: rgba(255,255,255,0.7);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.15);
border-color: var(--white);
}
.btn-blue {
background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
color: var(--white);
box-shadow: var(--shadow);
}
.btn-blue:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: linear-gradient(135deg, var(--blue-900), var(--blue-800));
}
.btn-outline {
background: transparent;
color: var(--blue-800);
border-color: var(--blue-200, var(--blue-100));
}
.btn-outline:hover {
background: var(--blue-50);
}
.btn-sm {
padding: 0.5rem 1.25rem;
font-size: 0.85rem;
}
/* ── Stats Bar ──────────────────────────────────────────────── */
.stats-bar {
background: var(--blue-800);
padding: 1.5rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
text-align: center;
}
.stat-item {}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--white);
line-height: 1;
margin-bottom: 0.25rem;
}
.stat-number span { color: var(--magenta-500); }
.stat-label {
font-size: 0.8rem;
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── Welcome Section ────────────────────────────────────────── */
.welcome-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.welcome-visual {
position: relative;
}
.welcome-img-placeholder {
width: 100%;
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.welcome-img-placeholder::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
}
.welcome-badge {
position: absolute;
bottom: -1.25rem;
right: -1.25rem;
background: linear-gradient(135deg, var(--magenta-700), var(--magenta-500));
color: var(--white);
border-radius: var(--radius-lg);
padding: 1rem 1.5rem;
text-align: center;
box-shadow: var(--shadow-mag);
}
.welcome-badge strong {
display: block;
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.welcome-badge span { font-size: 0.75rem; opacity: 0.9; }
.welcome-content {}
.welcome-content .divider { margin-bottom: 1.25rem; }
.welcome-content h2 { margin-bottom: 0.5rem; }
.welcome-content p { color: var(--gray-600); margin-bottom: 1.25rem; }
.welcome-highlights {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1.5rem 0;
}
.highlight-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--gray-800);
}
.highlight-item .icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--blue-50);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
color: var(--blue-800);
}
/* ── Service Bubbles ────────────────────────────────────────── */
.bubbles-section {
background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
position: relative;
overflow: hidden;
}
.bubbles-section::before {
content: '';
position: absolute;
top: -80px;
left: -80px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(21, 101, 192, 0.04);
}
.bubbles-section::after {
content: '';
position: absolute;
bottom: -60px;
right: -60px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(194, 24, 91, 0.04);
}
.bubbles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
position: relative;
z-index: 1;
}
/* Volle Seitenbreite mit 4 Spalten (Kunden-Übersichtsseite) –
Spaltenzahl wird in den Media Queries reduziert */
.bubbles-grid-4 {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.bubble-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: 3.5rem 2.5rem;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
display: block;
position: relative;
overflow: hidden;
}
.bubble-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--bubble-gradient, linear-gradient(90deg, var(--blue-700), var(--blue-500)));
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.bubble-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--blue-100);
}
.bubble-icon {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 1.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
background: var(--bubble-bg, var(--blue-50));
border: 2px solid var(--blue-100);
transition: var(--transition);
position: relative;
}
/* Dekorativer innerer Kreis */
.bubble-icon::before {
content: '';
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bubble-gradient, linear-gradient(135deg, var(--blue-700), var(--blue-500)));
opacity: 0.3;
}
.bubble-card:hover .bubble-icon {
transform: scale(1.06);
border-color: var(--blue-400);
}
.bubble-card h3 {
font-size: 1.2rem;
margin-bottom: 0;
color: var(--blue-900);
}
.bubble-card p {
font-size: 0.85rem;
color: var(--gray-600);
line-height: 1.5;
margin: 0;
}
/* ── Bubble cards with image background ─────────────────────── */
.bubble-card.bubble-img {
background-size: cover;
background-position: center;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: none;
}
.bubble-card.bubble-img::before {
height: 100%;
border-radius: var(--radius-xl);
background: linear-gradient(to bottom, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.55) 55%, transparent 100%);
}
.bubble-card.bubble-img h3 {
color: var(--blue-900);
position: relative;
z-index: 1;
margin-bottom: 0.5rem;
}
.bubble-card.bubble-img p {
color: var(--blue-700);
position: relative;
z-index: 1;
}
.bubble-card .bubble-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--blue-700);
margin-top: 1rem;
transition: gap 0.2s;
}
.bubble-card:hover .bubble-link { gap: 0.6rem; }
/* Bubble color variants */
.bubble-blue { --bubble-bg: #EBF4FB; --bubble-gradient: linear-gradient(90deg, #2055A4, #4080C5); }
.bubble-magenta{ --bubble-bg: #F8F0F4; --bubble-gradient: linear-gradient(90deg, #A83D6F, #C06A95); }
.bubble-teal { --bubble-bg: #E8F4F2; --bubble-gradient: linear-gradient(90deg, #2E7D6E, #4DB6A4); }
.bubble-orange { --bubble-bg: #FFF5EC; --bubble-gradient: linear-gradient(90deg, #B85B10, #D98040); }
.bubble-purple { --bubble-bg: #F0EDF8; --bubble-gradient: linear-gradient(90deg, #5E35B1, #8E6AC4); }
.bubble-green { --bubble-bg: #EDF6EE; --bubble-gradient: linear-gradient(90deg, #2E7D32, #5BAD5E); }
/* ── Kunden Rows ─────────────────────────────────────────────── */
.kunden-section {
background: transparent;
position: relative;
z-index: 3;
}
.kunden-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--gray-200);
}
.kunden-row {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 1rem;
border-bottom: 1px solid var(--gray-200);
text-decoration: none;
color: var(--blue-900);
transition: background 0.3s ease, padding 0.3s ease;
cursor: pointer;
}
.kunden-blasen {
width: 120px;
height: 120px;
object-fit: contain;
flex-shrink: 0;
opacity: 1;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kunden-body {
flex: 1;
min-width: 0;
}
.kunden-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: var(--blue-900);
transition: font-size 0.3s ease, color 0.25s ease;
line-height: 1.3;
}
.kunden-desc {
max-height: 0;
overflow: hidden;
opacity: 0;
margin: 0;
font-size: 0;
color: var(--gray-600);
transition: max-height 0.4s ease, opacity 0.3s ease 0.08s, font-size 0.3s ease, margin 0.3s ease;
}
.kunden-arrow {
font-size: 1.6rem;
color: var(--gray-300);
flex-shrink: 0;
line-height: 1;
transition: color 0.25s ease, transform 0.25s ease;
}
.kunden-row:hover {
background: var(--blue-50);
padding-left: 1.5rem;
}
.kunden-row:hover .kunden-blasen {
animation: blasen-float 2s ease-in-out infinite;
}
.kunden-row:hover .kunden-title {
font-size: 1.35rem;
color: var(--blue-700);
}
.kunden-row:hover .kunden-desc {
max-height: 80px;
opacity: 1;
font-size: 0.9rem;
margin-top: 0.35rem;
}
.kunden-row:hover .kunden-arrow {
color: var(--magenta-700);
transform: translateX(5px);
}
@keyframes blasen-float {
0%, 100% { transform: scale(1) translateY(0px); }
50% { transform: scale(1.08) translateY(-5px); }
}
/* ═══════════════════════════════════════════════════════════
KUNDEN-ÜBERSICHT (leistungen.html) – linksbündige Zweierreihen,
die Bilder schweifen nach rechts in einem Fade aus.
═══════════════════════════════════════════════════════════ */
.kundenfade-wrap {
max-width: 1560px;
margin: 0; /* linksbündig, nicht zentriert */
/* Gleiche Variable wie Logo und Einleitungstext (siehe --logo-pad-left),
damit die Kachelreihe exakt mit ihnen abschließt, statt einer eigenen
Formel zu folgen, die je nach Bildschirmbreite abweicht. */
padding-left: var(--logo-pad-left);
padding-right: 1.5rem;
}
.kundenfade-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* Zweierreihen */
gap: 1.75rem;
}
.kundenfade-card {
position: relative;
display: flex;
align-items: flex-end;
min-height: 250px;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
}
/* Bild schweift nach rechts in einem Fade aus (Maske → transparent) */
.kundenfade-card__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
-webkit-mask-image: linear-gradient(to right, #000 42%, rgba(0,0,0,0.35) 72%, transparent 100%);
mask-image: linear-gradient(to right, #000 42%, rgba(0,0,0,0.35) 72%, transparent 100%);
transition: transform 0.6s cubic-bezier(0.2,0,0.2,1);
}
.kundenfade-card:hover .kundenfade-card__img { transform: scale(1.05); }
/* Weißer Schleier von unten bis zur Bildmitte – nur dort, wo die
Beschriftung sitzt. Obere Bildhälfte bleibt unverdeckt sichtbar. */
.kundenfade-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 28%, rgba(255,255,255,0.55) 48%, transparent 62%);
pointer-events: none;
}
.kundenfade-card__body {
position: relative;
z-index: 1;
padding: 1rem 1.6rem 1.1rem; /* Beschriftung sitzt ganz unten im Feld */
max-width: 62%; /* Text bleibt links, wo das Bild deckt */
}
/* ohne Verdunklung: blaue Schrift, heller Text-Schatten für Lesbarkeit
über dem Foto (wie bei den Kundenbereichen-Kacheln der Startseite) */
.kundenfade-card__body h3 {
color: #1B4A8A !important;
font-size: 1.4rem !important;
margin: 0 0 0.4rem !important;
text-align: left !important;
text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 10px rgba(255,255,255,0.7);
}
.kundenfade-card__body p {
color: #1B4A8A !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
margin: 0 !important;
opacity: 1 !important;
text-align: left !important;
text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 10px rgba(255,255,255,0.7);
}
@media (max-width: 760px) {
.kundenfade-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.kundenfade-card { min-height: 200px; }
.kundenfade-card__body { max-width: 80%; }
}
/* ── Feature Strip ──────────────────────────────────────────── */
.features-strip {
background: #1B4A8A;
padding: 3.5rem 0;
position: relative;
z-index: 3;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.feature-item {
text-align: center;
color: var(--white);
padding-top: 0.5rem;
border-top: 2px solid rgba(255,255,255,0.2);
}
.feature-icon {
display: none;
}
.feature-item h4 {
color: var(--white);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.4rem;
letter-spacing: 0.04em;
}
.feature-item p {
font-size: 0.8rem;
color: rgba(255,255,255,0.65);
margin: 0;
}
/* ── Page Hero (sub-pages) ───────────────────────────────────── */
.page-hero {
height: 340px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.page-hero-bg {
position: absolute;
inset: 0;
}
.page-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(13,71,161,0.78) 35%, rgba(13,71,161,0.25));
}
.page-hero-content {
position: relative;
z-index: 1;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
width: 100%;
}
.page-hero h1 { color: var(--white); margin-bottom: 0.5rem; }
.page-hero p {
color: rgba(255,255,255,0.85);
font-size: 1.05rem;
max-width: 600px;
margin: 0 0 1.25rem;
}
.breadcrumb {
display: flex;
align-items: center;
/* Auf sehr schmalen Handys passt der Pfad (z. B. "Startseite › Kunden ›
Lebensmittelbetriebe") nicht in eine Zeile und ragte über den Rand –
er bricht jetzt einfach um. */
flex-wrap: wrap;
gap: 0.5rem;
color: rgba(255,255,255,0.7);
font-size: 0.825rem;
margin-bottom: 1rem;
}
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { opacity: 0.5; }
/* Page hero color variants */
.hero-blue .page-hero-bg { background: linear-gradient(135deg, #0F2B6B, #1A3D87); }
.hero-magenta .page-hero-bg { background: linear-gradient(135deg, #1A3D87, #8B0040 70%, #C0005A); }
.hero-teal .page-hero-bg { background: linear-gradient(135deg, #0F2B6B, #1A3D87 60%, #16546E); }
.hero-orange .page-hero-bg { background: linear-gradient(135deg, #1A3D87, #0F2B6B 60%, #4A3000); }
.hero-purple .page-hero-bg { background: linear-gradient(135deg, #1A3D87, #0F2B6B 55%, #2E1A6E); }
.hero-green .page-hero-bg { background: linear-gradient(135deg, #0F2B6B, #1A3D87 55%, #1A4A1E); }
.hero-steel .page-hero-bg { background: linear-gradient(135deg, #0F2B6B, #1A3D87); }
.hero-red .page-hero-bg { background: linear-gradient(135deg, #0F2B6B, #1A3D87 50%, #7A1010); }
/* ── Service Page Layout ─────────────────────────────────────── */
.page-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2.5rem;
align-items: start;
}
/* Ohne min-width:0 zieht ein einzelnes langes Wort ("Thrombose-
prophylaxestrümpfen") die 1fr-Spalte über die Bildschirmbreite hinaus,
statt dass es umbricht (siehe overflow-wrap am body). */
.page-layout > * { min-width: 0; }
.page-content {}
/* Service List */
.service-intro {
font-size: 1.05rem;
color: var(--gray-600);
border-left: 4px solid var(--blue-700);
padding-left: 1.25rem;
margin-bottom: 2.5rem;
}
body:not(.home) .service-intro { font-size: 1.42rem; }
.page-hero + .section {
padding-top: 0.75rem;
}
.services-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 2.5rem;
}
.service-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 1.5rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: var(--transition);
}
.service-card:hover {
border-color: var(--blue-100);
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.service-card-icon {
width: 8px;
height: 48px;
border-radius: 3px;
background: var(--blue-700);
flex-shrink: 0;
font-size: 0;
}
.service-card-body {}
.service-card-body h4 {
margin-bottom: 0.25rem;
font-size: 0.95rem;
}
.service-card-body p {
font-size: 0.825rem;
color: var(--gray-600);
margin: 0;
line-height: 1.5;
}
/* Sidebar */
.sidebar { display: none; }
.sidebar-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow-sm);
}
.sidebar-card h4 {
font-size: 0.95rem;
color: var(--blue-900);
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--blue-50);
}
.sidebar-nav-list li {
border-bottom: 1px solid var(--gray-100);
}
.sidebar-nav-list li:last-child { border-bottom: none; }
.sidebar-nav-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0;
font-size: 0.875rem;
color: var(--gray-700, var(--gray-800));
transition: color 0.2s;
}
.sidebar-nav-list li a:hover { color: var(--blue-800); }
.sidebar-nav-list li a.active {
color: var(--blue-800);
font-weight: 600;
}
.sidebar-nav-list .arrow { opacity: 0.4; font-size: 0.7rem; }
.contact-sidebar {
background: linear-gradient(135deg, var(--blue-900), var(--blue-800));
color: var(--white);
border: none;
}
.contact-sidebar h4 { color: var(--white); border-color: rgba(255,255,255,0.15); }
.contact-sidebar p { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-bottom: 1rem; }
.contact-sidebar .btn { width: 100%; justify-content: center; }
.cert-sidebar {}
.cert-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
font-size: 0.825rem;
color: var(--gray-800);
border-bottom: 1px solid var(--gray-100);
}
.cert-item:last-child { border-bottom: none; }
.cert-badge {
width: 8px;
height: 36px;
border-radius: 3px;
background: var(--blue-700);
flex-shrink: 0;
font-size: 0;
}
/* ── Info Boxes ─────────────────────────────────────────────── */
.info-box {
border-radius: var(--radius);
padding: 1.5rem;
margin: 1.5rem 0;
display: flex;
gap: 1rem;
}
.info-box-blue {
background: var(--blue-50);
border-left: 4px solid var(--blue-700);
}
.info-box-magenta {
background: var(--magenta-50);
border-left: 4px solid var(--magenta-700);
}
.info-box-icon { display: none; }
.info-box-text h5 { margin-bottom: 0.35rem; font-size: 0.9rem; }
.info-box-text p { font-size: 0.85rem; color: var(--gray-600); margin: 0; }
/* ── Service Sections (direkte Gliederung) ─────────────────── */
.service-section {
padding: 0.75rem 1rem;
border-radius: var(--radius);
margin-bottom: 0.4rem;
background: var(--white);
border: 1px solid var(--gray-200);
}
body:not(.home) .service-section {
background: rgba(255,255,255,0.18);
border-color: transparent;
}
.service-section h4 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.4rem;
padding-left: 0.75rem;
border-left: 3px solid var(--magenta-500);
}
body:not(.home) .service-section h4 {
font-size: 1.52rem;
border-left-color: var(--blue-700);
}
.service-section > p { font-size: 0.875rem; margin: 0; }
body:not(.home) .service-section p { font-size: 1.22rem; }
.service-section-list {
margin: 0.35rem 0 0;
padding: 0;
list-style: none;
}
.service-section-list li {
padding: 0.12rem 0 0.12rem 1rem;
font-size: 0.875rem;
color: var(--gray-600);
position: relative;
}
body:not(.home) .service-section-list li {
font-size: 1.22rem;
color: var(--blue-900);
opacity: 0.85;
}
.service-section-list li::before {
content: '›';
color: var(--magenta-500);
position: absolute;
left: 0;
opacity: 1;
}
body:not(.home) .service-section-list li::before { color: var(--blue-700); }
/* ── KB-Expand Inhalt (Startseite Hover) ───────────────────── */
.kb-expand-list {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
padding: 0.85rem 0.75rem;
text-align: left;
}
/* linksbündige blaue Stichpunkte statt zentriertem Fließtext; lange
Wörter/Wortgruppen dürfen umbrechen bzw. sich trennen, damit auch
Begriffe wie „Thromboseprophylaxestrümpfe“ vollständig lesbar bleiben */
.kb-expand-list a {
position: relative;
color: #1B4A8A;
font-size: clamp(0.95rem, 1.05vw, 1.15rem);
font-weight: 700;
text-decoration: none;
line-height: 1.4;
text-align: left;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
transition: color 0.15s;
padding-left: 1.15em;
white-space: normal;
/* Der Browser bricht ohnehin immer zuerst zwischen Wörtern um (neues
Wort = neue Zeile) – Silbentrennung greift nur als Rückfallebene,
wenn ein einzelnes Wort allein schon nicht auf die Zeile passt
(z. B. "Thromboseprophylaxestrümpfe"). */
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
.kb-expand-list a::before {
content: '•';
position: absolute;
left: 0;
color: #1B4A8A;
}
.kb-expand-list a:hover { color: var(--blue-600); }
.kb-expand-list a:hover::before { color: var(--blue-600); }
/* Randkacheln: Aufklappbereich nach innen ausrichten, damit er nicht aus
dem sichtbaren Bereich läuft. */
.kb-row:first-child .kb-expand {
left: 0;
transform: translateX(0) translateY(-6px);
}
.kb-row:first-child:hover .kb-expand {
transform: translateX(0) translateY(0);
}
.kb-row:last-child .kb-expand {
left: auto;
right: 0;
transform: translateX(0) translateY(-6px);
}
.kb-row:last-child:hover .kb-expand {
transform: translateX(0) translateY(0);
}
/* ── Expandierbare Abschnitte ───────────────────────────────── */
.service-detail {
border: 1px solid var(--gray-200);
border-radius: var(--radius);
margin-bottom: 0.4rem;
overflow: hidden;
background: var(--white);
}
body:not(.home) .service-detail {
background: rgba(255,255,255,0.18);
border-color: transparent;
}
body:not(.home) .service-detail summary { color: var(--blue-900); }
.service-detail summary {
padding: 0.85rem 1.1rem;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.service-detail summary::-webkit-details-marker { display: none; }
.service-detail summary::after {
content: '+';
color: var(--magenta-500);
font-size: 1.2rem;
font-weight: 300;
line-height: 1;
flex-shrink: 0;
margin-left: 0.75rem;
}
.service-detail[open] summary::after { content: '−'; }
.service-detail-body {
padding: 0.6rem 1.1rem 1rem;
border-top: 1px solid rgba(0,0,0,0.06);
}
body:not(.home) .service-detail-body { border-top-color: rgba(255,255,255,0.1); }
.service-detail-body p {
font-size: 0.875rem;
color: var(--gray-600);
margin-bottom: 0.5rem;
}
body:not(.home) .service-detail-body p { color: var(--blue-900); opacity: 0.8; }
.service-detail-body ul {
margin: 0.25rem 0 0;
padding: 0;
list-style: none;
}
.service-detail-body ul li {
padding: 0.18rem 0 0.18rem 1rem;
font-size: 0.875rem;
position: relative;
color: var(--gray-600);
}
body:not(.home) .service-detail-body ul li { color: var(--blue-900); opacity: 0.8; }
.service-detail-body ul li::before {
content: '›';
color: var(--magenta-500);
position: absolute;
left: 0;
opacity: 1;
}
/* ── CTA Section ────────────────────────────────────────────── */
.cta-section {
background: linear-gradient(135deg, var(--blue-800), var(--blue-900));
padding: 4.5rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
left: -10%;
width: 60%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
}
.cta-section h2 { color: var(--white); margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.85); margin-bottom: 2rem; font-size: 1.05rem; }
.cta-section .btn-secondary { border-color: rgba(255,255,255,0.6); }
/* ── About Page ─────────────────────────────────────────────── */
.timeline {
position: relative;
padding-left: 3rem;
margin: 2rem 0;
}
.timeline-item {
position: relative;
padding: 0 0 1.5rem 1.5rem;
}
/* Punkt (größer, modern: Blau→Magenta-Gradient + weicher Schatten) */
.timeline-item::before {
content: '';
position: absolute;
left: -2.95rem;
top: 0.2rem;
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-700), var(--magenta-500));
box-shadow: 0 2px 10px rgba(192, 0, 90, 0.30);
z-index: 1;
}
/* Verbindungslinie: je Punkt ein Segment bis zum nächsten Punkt → die Linie
beginnt am ersten und endet am letzten Punkt (läuft nicht darüber hinaus). */
.timeline-item::after {
content: '';
position: absolute;
left: calc(-2.95rem + 11px);
top: calc(0.2rem + 12px);
width: 2px;
height: 100%;
background: linear-gradient(to bottom, var(--blue-700), var(--magenta-500));
}
.timeline-item:last-child::after { display: none; }
.timeline-year {
font-size: 0.8rem;
font-weight: 700;
color: var(--magenta-700);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.timeline-item h4 { margin-bottom: 0.25rem; }
.timeline-item p { font-size: 0.875rem; color: var(--gray-600); margin: 0; }
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 2rem;
}
.value-card {
background: var(--gray-100);
border-radius: var(--radius);
padding: 1.75rem;
text-align: center;
}
.value-card .icon { font-size: 2rem; margin-bottom: 0.75rem; }
.value-card h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.85rem; color: var(--gray-600); margin: 0; }
/* ── Über-uns Seite: Spezifische Stile ─────────────────────── */
/* Philosophie- UND Geschichte-/Zeitstrahl-Text laufen bis zum selben Punkt
(etwa zur Seitenmitte) – weniger, längere Zeilen, gleiche Breite. */
.ueber-uns #unternehmensphilosophie .container,
.ueber-uns #geschichte .container { max-width: max(50vw, 720px); }
/* Unternehmensphilosophie: schlichter Textfluss, Punkte untereinander */
.ueber-uns .philo-list { margin-top: 1.5rem; }
.ueber-uns .philo-item { margin-bottom: 1.75rem; }
.ueber-uns .philo-item:last-child { margin-bottom: 0; }
.ueber-uns .philo-item h4 { margin-bottom: 0.35rem; }
.ueber-uns .section-subtitle { font-size: 1.05rem; }
.ueber-uns .timeline-year { color: var(--magenta-500); font-size: 1.05rem; }
.ueber-uns .timeline-item p {
font-size: 1.3rem;
color: var(--blue-900);
opacity: 0.8;
margin: 0.35rem 0 0;
}
.ueber-uns .timeline-item h4 { font-size: 1.45rem; }
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
/* 5er-Team-Grid (Über uns) – Spaltenzahl sinkt mit der Bildschirmbreite */
.team-grid-5 {
grid-template-columns: repeat(5, 1fr);
margin: 2rem auto 0;
}
.team-card {
text-align: center;
}
.team-avatar {
width: 100%;
aspect-ratio: 3 / 4;
border-radius: 0;
object-fit: cover;
display: block;
box-shadow: var(--shadow);
margin-bottom: 1rem;
}
.team-card h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.team-card span { font-size: 0.8rem; color: var(--blue-700); font-weight: 500; }
/* ── Certificate PDF Thumbnails ─────────────────────────────── */
.cert-pdf-grid {
display: grid;
/* Alle sechs Zertifikate in einer Reihe: dadurch sind die Kacheln nur
etwa halb so groß wie bei drei Spalten. Zusätzlich pro Kachel
gedeckelt, damit sie auf sehr breiten Bildschirmen nicht doch wieder
groß werden – die Reihe bleibt dann linksbündig stehen. */
grid-template-columns: repeat(6, minmax(0, 190px));
justify-content: start;
gap: 1.25rem;
margin-top: 1.5rem;
}
.cert-pdf-card {
text-align: center;
cursor: pointer;
}
.cert-thumb-wrap {
position: relative;
width: 100%;
padding-bottom: 141.4%;
overflow: hidden;
border: 1px solid var(--blue-100);
border-radius: var(--radius);
box-shadow: var(--shadow);
background: #fff;
transition: box-shadow 0.2s, transform 0.2s;
}
.cert-thumb-wrap:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.cert-thumb-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.cert-pdf-label {
margin-top: 0.7rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--blue-700);
}
/* ── Contact Page ───────────────────────────────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
/* Kontakt-Info-Karten (Kontaktseite) */
.contact-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.contact-form {
background: var(--white);
border-radius: var(--radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--gray-200);
}
.contact-form h3 { margin-bottom: 1.75rem; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--gray-800);
margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1.5px solid var(--gray-300);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 0.9rem;
color: var(--gray-800);
background: var(--white);
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--blue-700);
box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.contact-info-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 1.75rem;
margin-bottom: 1.5rem;
display: flex;
gap: 1.25rem;
box-shadow: var(--shadow-sm);
}
.contact-info-icon {
width: 6px;
height: auto;
min-height: 40px;
border-radius: 3px;
background: var(--magenta-700);
flex-shrink: 0;
font-size: 0;
align-self: stretch;
}
.contact-info-body h4 { margin-bottom: 0.25rem; font-size: 0.95rem; }
.contact-info-body p { font-size: 0.875rem; color: var(--gray-600); margin: 0; }
.contact-info-body a { color: var(--blue-700); }
.map-container {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
margin-top: 2.5rem;
border: 1px solid var(--gray-200);
}
/* Google-Maps 2-Klick-Lösung: Karte lädt erst nach Klick, damit Google
nicht schon beim Seitenaufruf ungefragt Cookies setzen kann. */
.map-consent {
width: 100%;
min-height: 380px;
background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
text-align: center;
padding: 2rem;
}
.map-consent-text {
max-width: 520px;
font-size: 0.9rem;
color: var(--gray-600);
margin: 0;
}
.map-consent-text a { color: var(--blue-700); text-decoration: underline; }
/* .map-container statt .map-consent: Der iframe ersetzt das
.map-consent-Element per JS komplett (replaceWith), ist also kein
Nachfahre von .map-consent mehr, sobald er im DOM steht. */
.map-container iframe {
width: 100%;
height: 380px;
border: 0;
display: block;
}
.map-placeholder {
width: 100%;
height: 380px;
background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: var(--blue-800);
}
.map-placeholder .map-icon { font-size: 3.5rem; }
.map-placeholder p { font-size: 0.9rem; color: var(--gray-600); }
/* ── Sub-banner / Divider Strip ─────────────────────────────── */
.sub-banner {
background: var(--blue-50);
border-top: 1px solid var(--blue-100);
border-bottom: 1px solid var(--blue-100);
padding: 2.5rem 0;
}
.sub-banner-flex {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.sub-banner p {
font-size: 1.05rem;
font-weight: 500;
color: var(--blue-900);
margin: 0;
}
.sub-banner span { color: var(--gray-600); font-weight: 400; font-size: 0.9rem; }
/* ── Footer ─────────────────────────────────────────────────── */
.footer {
background: rgba(10,25,60,0.92);
color: rgba(255,255,255,0.75);
padding-top: 4rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo-img {
height: auto;
width: auto;
max-height: 70px;
max-width: 100%;
object-fit: contain;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: 0.875rem;
line-height: 1.7;
margin-bottom: 1.25rem;
color: rgba(255,255,255,0.6);
}
.footer-col h5 {
color: var(--white);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 1.25rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.footer-col ul li {
margin-bottom: 0.5rem;
}
.footer-col ul li a {
font-size: 0.875rem;
color: rgba(255,255,255,0.6);
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0;
}
.footer-col ul li a:hover { color: var(--white); }
.footer-col ul li a::before {
content: '›';
color: var(--magenta-500);
margin-right: 0.3em;
flex-shrink: 0;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.85rem;
color: rgba(255,255,255,0.65);
}
.footer-contact-item .icon { display: none; }
.footer-bottom {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem 0;
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
flex-wrap: wrap;
gap: 0.75rem;
}
.footer-bottom-links {
display: flex;
gap: 1.5rem;
}
.footer-bottom-links a {
color: rgba(255,255,255,0.5);
transition: color 0.2s;
}
.footer-bottom-links a:hover { color: var(--white); }
/* Social links */
.social-links {
display: flex;
gap: 0.5rem;
}
.social-link {
display: none;
}
/* Responsive Zeilenumbruch: nur auf schmalen Bildschirmen sichtbar */
.break-sm { display: none; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1980px) {
/* Logo und Willkommenstext weiter nach links, Überlauf verhindern */
:root { --hero-pad-left: 2rem; --logo-pad-left: 2rem; }
.home-logo-wrap { padding-left: var(--logo-pad-left); }
.home-welcome { padding: 1.75rem 2rem 2rem var(--logo-pad-left); }
.home-welcome h1 { white-space: normal; }
.break-sm { display: inline; }
}
@media (max-width: 1280px) {
/* Kunden-Übersicht: 4 → 3 Spalten */
.bubbles-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.bubbles-grid { grid-template-columns: repeat(2, 1fr); }
.bubbles-grid-4 { grid-template-columns: repeat(2, 1fr); }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.welcome-grid { grid-template-columns: 1fr; }
.welcome-visual { max-width: 560px; margin: 0 auto; }
.page-layout { grid-template-columns: 1fr; }
.sidebar { display: none; }
.values-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.team-grid-5 { grid-template-columns: repeat(3, 1fr); }
.cert-pdf-grid { grid-template-columns: repeat(3, minmax(0, 190px)); }
/* ── Home Hero Tablet ───────────────────────────────────────── */
:root { --hero-pad-left: 3rem; }
.home-siegel { right: 1rem; }
.home-welcome { padding: 0.5rem 2rem 2rem var(--logo-pad-left); }
/* Beim Aufklappen der Kundenfelder brauchen die Unterpunkte mehr Höhe */
.kb-row:hover .kb-expand { max-height: 460px; }
}
@media (max-width: 768px) {
body { padding-top: calc(var(--header-h) + 32px); }
.nav { display: none; position: fixed; inset: auto 0 0 0; top: calc(var(--header-h) + 32px);
background: var(--white); box-shadow: var(--shadow-md); z-index: 999;
padding: 1rem; border-top: 1px solid var(--gray-200); }
.nav.mobile-open { display: flex; flex-direction: column; }
.nav > ul { flex-direction: column; gap: 0; width: 100%; }
.nav > ul > li > a { padding: 0.75rem 1rem; font-size: 1rem; }
/* Unterseiten: Nav-Schrift ist für den magentafarbenen Desktop-Header
auf Weiß gesetzt – im weißen Klapp-Panel auf Mobil war sie dadurch
unsichtbar (weiß auf weiß). Hier wieder auf dunkel gestellt. */
body:not(.home) .nav > ul > li > a { color: var(--blue-900); }
body:not(.home) .nav > ul > li.has-dropdown > a { color: var(--blue-900); }
/* Kein Untermenü im Hamburger-Menü: "Kunden" bleibt ein normaler
Reiter wie Startseite/Über uns/Kontakt, die Unterpunkte würden die
anderen Reiter nur verdrängen. */
.dropdown { display: none; }
.has-dropdown > a::after { display: none; }
.menu-toggle { display: flex; }
.nav-cta { display: none; }
.hero { height: 500px; }
.page-hero { height: 260px; }
.bubbles-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
.bubbles-grid-4 { grid-template-columns: 1fr 1fr; }
.bubble-card { padding: 1.75rem 1.25rem; }
.features-grid { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.services-list { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.contact-cards-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.team-grid-5 { grid-template-columns: repeat(2, 1fr); }
.cert-pdf-grid { grid-template-columns: repeat(2, minmax(0, 190px)); }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
.sub-banner-flex { flex-direction: column; text-align: center; }
.welcome-highlights { grid-template-columns: 1fr; }
/* ── Home Hero Mobile ───────────────────────────────────────── */
/* Auf Mobil richtet sich alles nach dem Inhalt (gestapeltes Layout) –
kein Zuschneiden nötig, sonst würde echter Inhalt abgeschnitten. */
.arc-wrapper { height: auto; overflow: visible; }
.home-hero {
height: auto;
min-height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"logo"
"text"
"kb";
}
/* Mobil: gestapeltes Layout – Kacheln wieder in den normalen Fluss
(die absolute Verankerung am unteren Rand gilt nur für Desktop).
grid-area zurück auf "kb", sonst überspannt es alle Zeilen. */
.kb-sektion {
position: static;
bottom: auto;
grid-area: kb;
}
/* Hamburger oben rechts einblenden – ohne eigenen Hintergrund,
schwebt direkt über dem Hero-Bild/-Rahmen */
.home-menu-toggle {
display: flex;
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1000;
background: none;
box-shadow: none;
}
/* Nav als ausklappbares Panel (Overlay von oben) statt fester Zeile */
.home .nav {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
grid-area: auto;
background: var(--white);
box-shadow: var(--shadow-md);
border-bottom: 3px solid var(--magenta-500);
padding: 4rem 1.25rem 1.25rem;
z-index: 999;
max-height: 100vh;
overflow-y: auto;
}
.home .nav.mobile-open { display: block; }
.home .nav > ul {
flex-direction: column;
gap: 0;
width: 100%;
}
.home .nav > ul > li > a {
display: block;
color: var(--blue-900);
padding: 0.85rem 1rem;
font-size: 1.05rem;
border-bottom: 1px solid var(--gray-200);
}
.home .nav > ul > li > a.active { background: var(--blue-50); }
/* Kein Untermenü im Hamburger-Menü: "Kunden" bleibt ein normaler
Reiter, die Unterpunkte würden die anderen Reiter nur verdrängen. */
.home .nav .dropdown { display: none; }
.home .has-dropdown > a::after { display: none; }
/* etwas mehr Luft nach oben, inkl. Rücksicht auf Notch/Statusleiste */
:root { --logo-pad-left: 1.5rem; }
.home-logo-wrap { padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.5rem 0.5rem var(--logo-pad-left); }
/* schmaler als vorher: ohne den jetzt entfernten weißen Kreis dahinter
würde der Hamburger sonst sichtbar über dem Logo/Schriftzug schweben */
.home-logo { width: min(280px, 72vw); }
/* max-width bleibt bei min(50vw, 100%) (Basisregel) statt hier auf 100% zu
springen, damit der Begrüßungstext auf jeder Bildschirmgröße spätestens
in der Bildschirmmitte endet. */
.home-welcome { padding: 0.5rem 1.5rem 1.5rem var(--logo-pad-left); }
.home-welcome h1 { font-size: clamp(1.1rem, 4.5vw, 1.5rem); white-space: normal; }
.home-welcome p { font-size: 1rem; }
.home-siegel { display: none; }
/* Kundenbereiche: Kacheln brechen auf zwei Spalten um.
margin-top wird hier überschrieben: die Formel oben ist auf die
Desktop-Kachelhöhe (115–205px) ausgelegt und stand auf Mobil bisher
unverändert im Spiel – dadurch saßen die Kacheln unnötig weit unten. */
.kb-sektion { flex-wrap: wrap; gap: 0.8rem; padding: 1.5rem 1.25rem 3rem; margin-top: 1rem; }
.kb-row { flex: 1 1 calc(50% - 0.8rem); }
/* Band-Optik gilt nur für Desktop/Laptop – auf Mobil (zweispaltiges
Raster mit Abständen) bleibt jede Kachel einzeln abgerundet. */
.kb-label,
.kb-row:first-child .kb-label,
.kb-row:last-child .kb-label { height: clamp(96px, 26vw, 150px); font-size: 1rem; border-radius: 14px; }
/* Verschwimm-Nahtstelle nur für das Desktop/Laptop-Band, auf Mobil
gibt es Abstände zwischen den Kacheln – hier nicht nötig */
.kb-row::before { display: none; }
/* Aufklappbereich kachelbreit + linksbündig, damit nichts seitlich überläuft */
.kb-expand,
.kb-row:first-child .kb-expand,
.kb-row:last-child .kb-expand {
left: 0;
right: auto;
width: 100%;
max-width: 100%;
border-radius: 14px;
transform: translateY(-6px);
}
.kb-row:hover .kb-expand,
.kb-row:first-child:hover .kb-expand,
.kb-row:last-child:hover .kb-expand { transform: translateY(0); }
.kb-expand-list { padding: 0.6rem 0.85rem 0.85rem; }
.home-mirror-arc { height: 40vh; margin-top: -20vh; }
.home-history-grid { grid-template-columns: 1fr; gap: 2rem; }
/* ── Andere Seiten Mobile ───────────────────────────────────── */
body:not(.home) .menu-toggle { display: flex !important; }
body:not(.home) .header-main { padding: 0.75rem 1rem; align-items: center; }
/* Impressum/Datenschutz: die großzügige Innenpolsterung (inline
padding:3rem) ist auf schmalen Screens unnötig viel Platzverlust –
hier verkleinert, Desktop-Ansicht bleibt unangetastet. */
body.impressum .section .container > div,
body.datenschutz .section .container > div {
padding: 1.5rem !important;
}
}
@media (max-width: 480px) {
.bubbles-grid { grid-template-columns: 1fr; }
.bubbles-grid-4 { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.slide-title { font-size: 1.5rem; }
.slide-actions { flex-direction: column; }
.slide-actions .btn { width: 100%; justify-content: center; }
.team-grid { grid-template-columns: 1fr; }
.team-grid-5 { grid-template-columns: 1fr 1fr; }
.footer-bottom-links { gap: 0.75rem; }
/* ── Home Hero Klein-Mobil ──────────────────────────────────── */
.home-logo { width: min(240px, 68vw); }
.home .nav > ul > li > a { font-size: 0.85rem; padding: 0.3rem 0.45rem; }
.home-welcome h1 { font-size: clamp(1rem, 4vw, 1.2rem); }
.kb-sektion { gap: 0.6rem; padding: 1.25rem 0.75rem 2.5rem; }
.kb-row { flex: 1 1 calc(50% - 0.6rem); }
.kb-label { height: clamp(88px, 28vw, 130px); font-size: 0.92rem; }
}
/* ═══════════════════════════════════════════════════════════
LANDSCAPE RESPONSIVE (Querformat)
═══════════════════════════════════════════════════════════ */
/* ── Querformat allgemein: reduzierte Höhe ─────────────────
Gilt für Tablets und Laptops im Querformat (≤ 900px hoch) */
@media (orientation: landscape) and (max-height: 900px) {
.features-strip { padding: 2rem 0; }
.section { padding: 3.5rem 0; }
.section-sm { padding: 2rem 0; }
.cta-section { padding: 3rem 0; }
}
/* ── Querformat Tablet: 768px–1023px breit, ≤ 768px hoch ───
z. B. iPad im Querformat. max-width ergänzt: fehlte bisher, wodurch
diese eigentlich tablet-spezifischen (sehr kompakten) Werte auch auf
breiteren Laptop-Bildschirmen mit ähnlicher Höhe griffen – u. a.
sichtbar an zu klein geratenen Zertifikats-Siegeln. */
@media (orientation: landscape) and (max-height: 768px) and (min-width: 768px) and (max-width: 1024px) {
/* Home Hero */
.arc-wrapper { height: auto; overflow: visible; }
.home-hero { min-height: 100vh; }
.kb-sektion { padding: clamp(0.75rem, 2vw, 1.75rem) 6vw 1.5rem; }
.home-siegel a { width: 75px; height: 88px; }
.home-siegel img { height: 62px; }
.home-welcome { padding: 0.15rem 1rem 0.4rem var(--logo-pad-left); }
/* proportional zum (hier großen) Logo halten */
.home-welcome h1 { white-space: normal; font-size: clamp(1.4rem, 3vw, 2.9rem); }
.home-welcome p { font-size: clamp(1rem, 1.9vw, 1.85rem); }
/* Non-Home Header & Hero */
body:not(.home) .logo-img { height: 90px; }
body:not(.home) .header-main { padding: 1rem 2.5rem; }
/* Features & Footer */
.features-grid { grid-template-columns: repeat(4, 1fr); }
.footer { padding-top: 2.5rem; }
.footer-grid { gap: 2rem; padding-bottom: 2rem; }
}
/* ── Bildschirme mit wenig Höhe (Tablet- UND Laptop-Breite) ───
Die Abstands-Formeln von Hero/Kacheln sind auf Breite (vw) berechnet
und berücksichtigen keine begrenzte Höhe. Auf breiten, aber flachen
Bildschirmen (viele Laptops: 1366×768 u. ä.) entsteht dadurch zu viel
Platz zwischen Einleitungstext und Inhalt – die Kundenfelder rutschen
beim Aufklappen unter den unteren Bildschirmrand. Gilt bewusst ohne
obere Breitengrenze (auch für breite Laptops), nur an die Höhe
gekoppelt. */
/* ── Schmalere Laptop-Breiten ──────────────────────────────
Die Basis-Formel (5vw, gedeckelt bei 5rem) lässt auf schmaleren
Bildschirmen unnötig viel Luft links/rechts neben der Kachelreihe –
die Kacheln werden dadurch kleiner als nötig. Da die Kacheln unten
sitzen und die Zertifikate deutlich höher (46vh), gibt es hier keine
Kollisionsgefahr, auch wenn die Reihe näher an den rechten Rand rückt. */
@media (min-width: 769px) and (max-width: 1680px) {
.kb-sektion {
padding-left: clamp(0.5rem, 1vw, 1rem);
padding-right: clamp(0.5rem, 1vw, 1rem);
}
/* Weniger Platz vor den Stichpunkten im Dropdown */
.kb-expand-list { padding: 0.6rem 0.5rem; }
.kb-expand-list a { padding-left: 1em; }
/* Etwas schmaler als die Kachel: nimmt den überflüssigen Leerraum
hinter den Stichpunkten weg, ohne die Breite der Kachel selbst
zu verändern. */
.kb-expand { width: 94%; }
}
/* ── Hochformat (z. B. Tablets im Portrait-Modus) ───────────
Bei schmalem Hochformat wirkt das durchgehende Band gequetscht (8
Kacheln nebeneinander auf wenig Breite). Wie auf dem Handy: Kacheln
trennen und wieder in zwei Spalten anordnen. Reines Breiten-Mobil
(≤768px) hat sein eigenes, umfassenderes Layout weiter unten. */
@media (orientation: portrait) and (min-width: 769px) and (max-width: 1024px) {
/* Wie auf Mobil ausblenden: durch das zweispaltige Kachelraster liegen die
Siegel sonst hinter den Kacheln und blitzen nur noch als abgeschnittene
Fragmente in den Lücken zwischen ihnen hervor. */
.home-siegel { display: none; }
.kb-sektion { flex-wrap: wrap; gap: 0.8rem; }
.kb-row { flex: 1 1 calc(50% - 0.8rem); }
.kb-label,
.kb-row:first-child .kb-label,
.kb-row:last-child .kb-label { border-radius: 14px; }
.kb-row::before { display: none; }
.kb-expand,
.kb-row:first-child .kb-expand,
.kb-row:last-child .kb-expand {
left: 0;
right: auto;
width: 100%;
max-width: 100%;
border-radius: 14px;
transform: translateY(-6px);
}
.kb-row:hover .kb-expand,
.kb-row:first-child:hover .kb-expand,
.kb-row:last-child:hover .kb-expand { transform: translateY(0); }
}
@media (max-height: 800px) and (min-width: 769px) {
/* Kurze Bildschirme (Laptops): Kacheln bleiben – wie auf dem Desktop –
unten am Bildrand verankert (Basis-Regel). Das Logo verwendet
bewusst dieselbe Formel wie auf dem Desktop (kein Verkleinern mehr) –
dadurch bleibt das Größenverhältnis zu den Nav-Reitern erhalten und
der Begrüßungstext rutscht automatisch weiter nach unten, wodurch
kein Loch mehr im Hero-Hintergrund entsteht. Begrüßungstext und
Kachelhöhe bleiben dagegen kompakt wie zuvor – nur das Logo sollte
größer werden, nicht auch Text und Kacheln. */
/* kein flex-shrink:0 – sonst drängt das Logo die Navigation daneben
auf schmaleren Bildschirmen aus dem Bild */
.home-logo { width: min(820px, 60vw); }
/* Etwas schlankere Nav, damit für das größere Logo genug Platz bleibt,
ohne dass die Reiter (v.a. "Kontakt") aus dem Bildschirm rutschen. */
.home-hero .nav { padding: 1.5rem 1.5rem 0 1rem; }
.home-hero .nav > ul > li > a { padding: 0.5rem 0.6rem; font-size: 1.3rem; }
.home-welcome { padding: clamp(1.1rem, 5vh, 2.75rem) 2rem 0.5rem var(--logo-pad-left); }
.home-welcome h1 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 0.4rem; }
.home-welcome p { font-size: clamp(1rem, 1.4vw, 1.3rem); }
/* Unterseiten: Hero muss nicht mehr fast die ganze Bildschirmhöhe
füllen, wenn der Einleitungstext dafür viel zu kurz ist */
body:not(.home) .sub-hero { min-height: min(55vh, 480px); }
/* Über uns: garantierter Mindestabstand des Menüs zum Foto darüber,
auch wenn wegen der geringen Höhe kaum "Restplatz" zum Zentrieren
übrig bleibt */
body.ueber-uns .sub-hero .au-section { margin-top: clamp(0.75rem, 2vh, 1.5rem); }
/* Datenschutz: gleicher garantierter Mindestabstand zum Einleitungstext */
body.datenschutz .sub-hero .datenschutz-cert-section { margin-top: clamp(0.75rem, 2vh, 1.5rem); }
}
/* ── Querformat Smartphone: < 768px breit, ≤ 500px hoch ────
Smartphones im Querformat (z. B. iPhone SE: 667×375) */
@media (orientation: landscape) and (max-height: 500px) {
/* ── CSS Variable: Header kompakter ──────────────────────── */
:root { --header-h: 70px; }
body { padding-top: 70px; }
/* ── Non-Home: Header ─────────────────────────────────────── */
body:not(.home) .logo-img { height: 52px; }
body:not(.home) .header-main { padding: 0.35rem 1.25rem; height: 70px; }
body:not(.home) .menu-toggle { display: flex !important; }
/* ── Non-Home: Page Hero ──────────────────────────────────── */
body:not(.home) .page-hero { padding-bottom: 1.25rem; min-height: auto; }
.page-hero { height: auto; min-height: 150px; }
.page-hero h1 { font-size: clamp(1.1rem, 2.8vw, 1.5rem); }
.page-hero p { font-size: 0.85rem; margin-bottom: 0.5rem; }
.breadcrumb { margin-bottom: 0.5rem; }
/* ── Sektionen ────────────────────────────────────────────── */
.section { padding: 1.75rem 0; }
.section-sm { padding: 1.25rem 0; }
.cta-section { padding: 2rem 0; }
/* ── Home Hero: 2-Spalten-Grid wiederherstellen ───────────── */
.arc-wrapper { height: auto; overflow: visible; }
.home-hero {
height: auto;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"logo nav"
"text text"
"kb kb";
min-height: 100vh;
}
/* ── Home: Logo ───────────────────────────────────────────── */
:root { --logo-pad-left: 1.25rem; }
.home-logo-wrap { padding: 0.6rem 0.75rem 0.2rem var(--logo-pad-left); }
.home-logo { width: min(200px, 36vw); }
/* ── Home: Navigation oben rechts, einzeilig ──────────────── */
/* Im Querformat kein Hamburger – kompakte Nav-Zeile reicht */
.home-menu-toggle { display: none; }
.home .nav {
display: flex;
position: static;
inset: auto;
grid-area: nav;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
border-bottom: none;
max-height: none;
overflow: visible;
padding: 0.35rem 1.25rem 0 0.5rem;
align-self: start;
}
.home .nav > ul { flex-direction: row; flex-wrap: nowrap; gap: 0.1rem; width: auto; }
.home .nav > ul > li > a { font-size: 0.78rem; padding: 0.25rem 0.4rem; border-bottom: none; }
.home .dropdown { display: none; }
/* ── Home: Willkommenstext ────────────────────────────────── */
.home-welcome {
padding: 0.15rem 1rem 0.4rem var(--logo-pad-left);
}
.home-welcome h1 {
font-size: clamp(0.82rem, 1.9vw, 1.1rem);
white-space: normal;
margin-bottom: 0.25rem;
}
.home-welcome p { font-size: 0.78rem; line-height: 1.4; }
/* ── Home: Zertifikate ausblenden ─────────────────────────── */
.home-siegel { display: none; }
/* ── Home: Kundenbereiche kompakt ─────────────────────────── */
.kb-sektion { gap: 0.5rem; padding: 0.75rem 5vw 1rem; }
/* Handy im Querformat: hier zählt die knappe Bildschirmhöhe, nicht das
4:3-Verhältnis der Basisregel – sonst füllt eine einzige Kachelreihe
den halben Bildschirm. Feste Höhe schlägt aspect-ratio. Erste/letzte
Kachel brauchen dieselbe Spezifität wie im Mobil-Block, sonst behalten
nur sie ihre große Höhe und die Reihe wird ungleich hoch. */
.kb-label,
.kb-row:first-child .kb-label,
.kb-row:last-child .kb-label {
aspect-ratio: auto;
height: clamp(58px, 12vh, 92px);
min-height: 0;
max-height: none;
font-size: 0.78rem;
}
/* ── Features Strip ───────────────────────────────────────── */
.features-strip { padding: 1.25rem 0; }
.features-grid { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.feature-item h4 { font-size: 0.78rem; }
.feature-item p { font-size: 0.68rem; }
/* ── Home: Firmengeschichte ───────────────────────────────── */
.home-history-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.timeline { margin: 1rem 0; }
.timeline-item { padding-bottom: 1.25rem; }
/* ── Service Cards ────────────────────────────────────────── */
.services-list { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.service-card { padding: 1rem 0.85rem; }
.service-card-body h4 { font-size: 0.88rem; }
.service-card-body p { font-size: 0.75rem; }
/* ── Bubble Cards ─────────────────────────────────────────── */
.bubble-card.bubble-img { min-height: 180px; }
.bubbles-grid { gap: 0.75rem; }
.bubble-card { padding: 1.5rem 1rem; }
/* ── Info Boxes ───────────────────────────────────────────── */
.info-box { padding: 1rem; margin: 1rem 0; }
/* ── Values & Team ────────────────────────────────────────── */
.values-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.value-card { padding: 1.25rem; }
.team-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* ── Kontaktseite ─────────────────────────────────────────── */
.contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.contact-form { padding: 1.5rem; }
.form-row { grid-template-columns: 1fr 1fr; }
.map-placeholder { height: 220px; }
/* ── Zertifikate Grid ─────────────────────────────────────── */
.cert-pdf-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* ── Footer ───────────────────────────────────────────────── */
.footer { padding-top: 1.75rem; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-bottom: 1.25rem; }
.footer-bottom { padding: 0.6rem 0; }
.footer-bottom-links { gap: 1rem; }
}
/* ═══════════════════════════════════════════════════════════
ÜBER-UNS MENÜ – ausklappbare Hauptpunkte im Stil der früheren
Startseite: zentrierte, magentagerahmte Streifen mit blauer,
zentrierter Beschriftung. Beim Hover / Fokus / :target klappen
die Unterpunkte und Inhalte darunter aus (weiches Auf-/Zuklappen
über grid-template-rows 0fr→1fr).
═══════════════════════════════════════════════════════════ */
.au-section {
position: relative;
z-index: 1;
padding-top: clamp(1.5rem, 4vw, 3.5rem);
}
.au-menu {
max-width: none;
margin: 0; /* linksbündig statt zentriert */
/* Gleicher linker Abstand wie Logo/Begrüßungstext (siehe --hero-pad-left),
damit das Menü mit dem Firmenbild/Text linksbündig bleibt statt einer
eigenen, abweichenden Formel zu folgen. */
padding: 0 0 0 var(--hero-pad-left, 3rem);
}
.au-row {
position: relative;
border: none;
overflow: hidden;
scroll-margin-top: calc(var(--fade-h) + 20px);
/* Box endet exakt dort, wo der Fade optisch ausläuft, damit rechts
daneben (im leeren Bereich) kein Hover mehr auslöst. */
width: 83%;
}
.au-label {
min-height: clamp(58px, 5vw, 96px);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
text-align: left;
padding: 0.6rem 1.5rem;
font-family: var(--font-heading);
font-size: clamp(1.1rem, 1.9vw, 2.1rem);
font-weight: 700;
color: #1B4A8A;
letter-spacing: 0.05em;
background: rgba(255, 255, 255, 0.16);
cursor: pointer;
user-select: none;
/* Lange Komposita ("Unternehmensphilosophie") sind auf schmalen Handys
breiter als die Zeile und haben den Hero sonst über die Bildschirm-
breite hinaus aufgezogen. */
min-width: 0;
overflow-wrap: break-word;
hyphens: auto;
transition: background 0.35s ease, letter-spacing 0.35s ease;
/* Linie und Weichzeichner liegen auf dem Label selbst (statt auf .au-row),
damit sie von der Maske mitgefadet werden. */
border-top: 1.5px solid #1B4A8A;
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
/* Bar ist bis zur Hälfte der Seite voll sichtbar, faded danach über das
letzte Drittel komplett aus – relativ zur eigenen (bereits auf 83%
der Seite begrenzten) Box, daher hier 60%/100%. */
-webkit-mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
}
.au-row:last-child .au-label { border-bottom: 1.5px solid #1B4A8A; }
.au-label:focus-visible { outline: 2px solid #1B4A8A; outline-offset: -5px; }
.au-row.is-open > .au-label {
background: rgba(255, 255, 255, 0.34);
letter-spacing: 0.09em;
}
/* Kleiner Dreieckspfeil links der Überschrift, dreht sich beim Öffnen. */
.au-label::before {
content: "";
flex-shrink: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #1B4A8A;
transition: transform 0.3s ease;
}
.au-row.is-open > .au-label::before {
transform: rotate(90deg);
}
/* Auf-/Zuklappen über max-height, OHNE Größen-Animation: Eine animierte
Größenänderung des clippenden Containers verhindert in Chromium das
Rendern verschachtelter Bilder (betrifft sowohl grid-0fr/1fr als auch
ein animiertes max-height). Daher klappt der Bereich sofort auf/zu.
Ein sanftes Einblenden übernimmt die Deckkraft des Inhalts (Opacity
bricht das Bild-Rendern nicht). Der max-height-Wert ist bewusst groß,
damit auch die lange Zeitleiste nie abgeschnitten wird. */
.au-expand {
max-height: 0;
overflow: hidden;
}
.au-row.is-open > .au-expand {
max-height: 8000px;
}
.au-panel { min-height: 0; }
/* Inhalt fährt beim Öffnen sanft und etwas langsamer ein (kein plötzliches
Erscheinen). Bewusst nur Opacity/Transform – eine animierte Größen-
änderung des Containers blendet in Chromium die Fotos aus. */
.au-panel-inner {
opacity: 0;
transform: translateY(-24px);
transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.au-row.is-open > .au-expand .au-panel-inner {
opacity: 1;
transform: translateY(0);
}
.au-panel-inner {
padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.75rem);
/* nicht weiß, sondern nur leicht getönt – der über das backdrop-filter
des Streifens verschwommene Foto-Hintergrund scheint hindurch */
background: rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(27, 74, 138, 0.3);
}
.au-panel-inner > *:first-child { margin-top: 0; }
.au-panel-inner .section-subtitle { margin-bottom: 1.5rem; }
.au-panel-inner h2,
.au-panel-inner h3 { text-align: center; color: var(--blue-900); }
.au-panel-inner .team-grid { margin-top: 1.5rem; }
@media (max-width: 768px) {
.au-menu { padding: 0 1rem; }
.au-row { width: 100%; }
.au-label {
min-height: 54px; padding: 0.85rem 1rem; font-size: 1.05rem; letter-spacing: 0.03em;
/* Fade auf Mobil deaktivieren, damit der Text nicht angeschnitten wirkt */
-webkit-mask-image: none; mask-image: none;
}
.au-panel-inner { padding: 1.25rem 1rem 1.5rem; }
}