/* ===================================================== 1. VARIABLEN (FARBEN, GRÖSSEN, ABSTÄNDE, FONTS ETC.) ===================================================== */ :root { --JUHMA-beige: rgb(203,166,117); /* Markenakzent · Beige */ --JUHMA-gruen: rgb(0,107,45); /* Markenakzent · Grün */ --WHATSAPP-gruen: rgb(37,211,102); /* Social/CTA · WhatsApp-Grün */ --FACEBOOK-blau: rgb(24,119,242); /* Social/CTA · Facebook-Blau */ --ink-strong: #111827; /* Texte sehr dunkel */ --ink: #000000; /* Standard-Textfarbe */ --ink-muted: #7b7b7b; /* Gedämpfte Textfarbe */ --bg: #ffffff; /* Seitenhintergrund */ --white: #ffffff; /* Weiß (Utility) */ --black: #000000; /* Schwarz (Utility) */ --focus-outline: #94a3b8; /* Fokus-Ringfarbe (A11y) */ --border: transparent; /* Standard-Randfarbe (Fallback) */ --footer-text: #000000; /* Textfarbe im Footer */ --h3-card: #000000; /* H3-Farbe in Karten */ --radius: 18px; /* Globale Rundung */ --footer-offset: 45px; /* Fixe Footerhöhe/Abstand */ --font-brand: 42px; /* Logotypo/Brandgröße */ --font-h2: 32px; /* Basisgröße H2 */ --font-subtitle: clamp(16px, 2.2vw, 20px); /* Untertitel responsiv */ --font-nav-button: 12px; /* Nav-Button-Typo */ --font-section-h2-title: 32px; /* Sektionstitelgröße */ /* Schatten-System (neu) */ --schatten-kraeftig: 0 4px 20px rgba(0, 0, 0, 0.5); /* Starker, weicher Tiefenschatten */ --schatten-leicht: 0 15px 18px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px 2px rgba(0,0,0,.10), 10px 0 10px 2px rgba(0,0,0,.075), -10px 0 10px 2px rgba(0,0,0,.075); /* Vielseitiger Mehrfachschatten */ --schatten-leicht-negativ: 0 -15px 15px rgba(0, 0, 0, 0.15); /* Umgekehrter (Top-)Schatten */ } /* ===================================================== Ende Sektor 1 ===================================================== */ /* ===================================================== 2. GLOBAL RESET / GRUNDLAYOUT ===================================================== */ * { box-sizing: border-box; /* Boxmodell: Border inkl. Breite */ } html, body { margin: 0; /* Standardränder entfernen */ padding: 0; /* Standardabstände entfernen */ font-family: 'Inter', Helvetica, Arial, sans-serif; /* Systemnahe, gut lesbare Schrift */ color: var(--ink); /* Grundtextfarbe */ background: var(--bg); /* Seitenhintergrund */ scroll-behavior: smooth; /* Weiches Scrollen */ -webkit-font-smoothing: antialiased; /* Fontglättung WebKit */ -moz-osx-font-smoothing: grayscale; /* Fontglättung macOS */ text-rendering: optimizeLegibility; /* Bessere Lesbarkeit/Hinting */ } body { padding-bottom: var(--footer-offset); /* Platz für fixen Footer lassen */ } img { max-width:100%; height:auto; display:block; /* Bilder responsiv/ohne Lücken */ } a { text-decoration:none; color:inherit; /* Links ohne Unterstreichung/Farbe */ } .container { width:min(1180px,92%); margin:0 auto; /* Maxbreite + zentrieren */ } /* ===================================================== Ende Sektor 2 ===================================================== */ /* ===================================================== 3. HEADER & NAVIGATION ===================================================== */ .header { position: fixed; /* vorher: sticky */ /* Header fix am Viewport */ top: 0; /* An Oberkante ausrichten */ left: 0; /* An linke Kante ausrichten */ width: 100%; /* Über volle Breite */ z-index: 50; /* Über Inhalt schichten */ background: transparent; /* Transparenter Header-Hintergrund */ box-shadow: none; /* Kein Header-Schatten */ /* visuelle Mindesthöhe des Kopfbereichs (Panels liegen darin) */ min-height: clamp(120px, 16vw, 200px); /* Headerhöhe responsiv begrenzen */ } /* Container nur für Positionierungszwecke vorhanden */ .header-inner { position: relative; /* Bezug für absolute Kinder */ padding: 12px 0; /* Vertikaler Innenabstand */ } /* Linkes Logo-Panel */ .brand-card { position: absolute; /* Panel im Header platzieren */ top: 0; /* Oben anlegen */ left: 0; /* Links anlegen */ display: inline-flex; /* Flex für vertikale Inhalte */ flex-direction: column; /* Logo/Text untereinander */ align-items: flex-start; /* Links ausrichten */ background: var(--white); /* Panel-Hintergrund hell */ border-radius: 0 0 30px 0; /* Nur unten rechts abrunden */ padding: 20px 30px 30px 30px; /* Innenabstände Panel */ box-shadow: var(--schatten-kraeftig); /* Tiefer Panel-Schatten */ } .brand-logo { width: clamp(140px, 18vw, 220px); /* Logo skaliert responsiv */ height: auto; /* Proportionen erhalten */ display: block; /* Keine Inlinelücke */ } /* Rechtes Icon-Panel */ .nav-card { position: absolute; /* Panel im Header platzieren */ top: 0; /* Oben anlegen */ right: 0; /* Rechts anlegen */ background: var(--white); /* Heller Kachel-Hintergrund */ border-radius: 0 0 0 30px; /* Nur unten links abrunden */ padding: 20px 20px 25px 25px; /* Innenabstände Panel */ box-shadow: var(--schatten-kraeftig); /* Tiefer Panel-Schatten */ } .nav { display: flex; /* Row-Layout für Icons */ gap: 16px; /* Abstand zwischen Buttons */ justify-content: flex-end; /* Nach rechts schieben */ } .nav a, .nav .cta { width: 64px; /* Buttonbreite */ height: 64px; /* Buttonhöhe */ padding: 6px; /* Innenabstand (Icon-Luft) */ border-radius: 12px; /* Runde Ecken */ display: inline-flex; /* Flex für Icon-Zentrierung */ align-items: center; /* Vertikal zentrieren */ justify-content: center; /* Horizontal zentrieren */ box-shadow: var(--schatten-kraeftig); /* Knopf-Schatten präsent */ background: var(--JUHMA-beige); /* Standard-Buttonfarbe */ border: none; /* Kein Rand */ color: var(--ink-strong); /* Dunkles Icon/Text */ transition: transform .15s ease, background .3s ease, color .3s ease; /* Interaktionen weich */ } .nav a:hover, .nav .cta:hover { background: var(--JUHMA-gruen); /* Hoverfarbe grün */ color: var(--white); /* Icon/Text invertieren */ transform: translateY(-1px); /* Kleines Anheben */ } .nav-icon { max-width: 80%; max-height: 80%; object-fit: contain; display: block; /* Icon-Grenzen/Zentrierung */ } @media (max-width: 520px) { .nav { gap: 12px; } /* Engerer Icon-Abstand mobil */ .nav a, .nav .cta { width: 54px; height: 54px; border-radius: 10px; } /* Kompaktere Buttons */ /* Smartphone: Menü komplett ausblenden (reines Scrollen) */ .nav-card { display: none; } /* Rechte Icon-Kachel verstecken */ /* Smartphone: Logo +10% größer, ohne Panel-Vergrößerung */ .brand-logo { transform: scale(1.1); /* Logo leicht vergrößern */ transform-origin: top left; /* Skalierpunkt oben/links */ } } /* ===================================================== Ende Sektor 3 ===================================================== */ /* ===================================================== 4. BUTTONS GLOBAL ===================================================== */ .btn, button { display: inline-flex; /* Flex-Buttons (Icon/Text) */ align-items: center; /* Vertikal zentriert */ gap: 10px; /* Abstand Icon/Text */ padding: 13px 18px; /* Klickfläche */ border-radius: 14px; /* Runde Ecken */ font-weight: 800; /* Fette Typo */ border: none; /* Kein Rand */ background: var(--white); /* Heller Hintergrund */ color: inherit; /* Textfarbe vom Kontext */ box-shadow: var(--schatten-leicht); /* Leichter Tiefenschatten */ transition: .3s; /* Weiche Zustandswechsel */ } .btn:hover, button:hover { transform: translateY(-1px); /* Leichtes Anheben Hover */ } .btn.primary { background: var(--JUHMA-gruen); /* Primärfarbe Grün */ color: var(--white); /* Weiße Schrift */ } .btn.primary:hover { background: var(--JUHMA-beige); /* Hover zu Beige */ color: var(--ink-strong); /* Dunklere Schrift */ } .btn.alt { background: var(--JUHMA-beige); /* Alternative Beige */ color: var(--ink-strong); /* Dunkle Schrift */ } .btn.alt:hover { background: var(--JUHMA-gruen); /* Hover zu Grün */ color: var(--white); /* Weiße Schrift */ } .btn-whatsapp { background: var(--WHATSAPP-gruen); /* WhatsApp-Grün */ color: var(--black); /* Schwarzer Text/Icon */ } .btn-whatsapp:hover { background: var(--JUHMA-beige); /* Hover zu Beige */ color: var(--ink-strong); /* Dunkle Schrift */ } /* ===================================================== Ende Sektor 4 ===================================================== */ /* ===================================================== 5. EINSENDEN-KARTE ===================================================== */ .einsenden-header { position: relative; /* Bezug für Kindelemente */ display: block; /* Block-Level-Box */ background: var(--white); /* Heller Kachelhintergrund */ border-radius: var(--radius); /* Globale Rundung */ box-shadow: var(--schatten-leicht); /* Weicher Tiefenschatten */ height: auto; /* Höhe nach Inhalt */ min-height: unset; /* Keine Mindesthöhe erzwingen */ padding: 20px 20px; /* Innenabstand Kachel */ margin: 0 0 30px 0; /* Abstand nach unten */ } .einsenden-header h2 { margin: 0; /* Überschrift bündig */ text-transform: uppercase; /* Versalien */ } .einsenden-card { position: relative; /* Bezug für Bild/Overlay/Text */ background: var(--white); /* Weißer Grund */ border-radius: var(--radius); /* Abgerundete Ecken */ box-shadow: var(--schatten-leicht); /* Leichter Schatten */ overflow: hidden; /* Bildbeschnitt */ height: 250px; /* Einheitliche Kachelhöhe */ display: block; /* Block-Level */ padding: 0; /* Kein Innenabstand */ } .einsenden-card picture { position: absolute; /* Über gesamte Kachel */ inset: 0; /* Vollflächig (top/right/bottom/left 0) */ z-index: 0; /* Hinter Text/Overlay */ display: block; /* Block-Layout */ } .einsenden-card img { position: absolute; /* Vollflächig positioniert */ inset: 0; /* Kanten bündig */ width: 100%; /* Auf Breite strecken */ height: 100%; /* Auf Höhe strecken */ object-fit: cover; /* Zuschneiden statt verzerren */ object-position: center; /* Bildmittelpunkt zentriert */ display: block; /* Block-Rendering */ } .einsenden-card::after { content: ""; /* Overlay erzeugen */ position: absolute; /* Über Bild legen */ inset: 0; /* Vollflächig */ z-index: 1; /* Zwischen Bild und Text */ pointer-events: none; /* Klicks durchlassen */ background: linear-gradient( /* Weiß→transparent-Verlauf */ to right, /* Verlaufsrichtung */ rgba(255,255,255,1) 0%, /* Deckend links */ rgba(255,255,255,1) 25%, /* Textfenster */ rgba(255,255,255,0) 80%, /* Ausfaden */ rgba(255,255,255,0) 100% /* Transparent rechts */ ); } .einsenden-right { position: absolute; /* Text innerhalb der Kachel platzieren */ left: 20px; /* Abstand von links */ bottom: 20px; /* Abstand von unten */ z-index: 2; /* Über Overlay */ } .einsenden-btn { display: inline-flex; /* Button mit Flexlayout */ align-items: center; /* Vertikal zentrieren */ justify-content: center; /* Horizontal zentrieren */ padding-block: clamp(10px, 2vw, 20px); /* Vertikale Innenabstände responsiv */ padding-inline: clamp(10px, 2vw, 20px); /* Horizontale Innenabstände responsiv */ text-transform: uppercase; /* Versalien */ font-weight: 700; /* Fette Schrift */ font-size: clamp(calc(var(--font-h2) * 0.5), 4.5vw, var(--font-h2)); /* Responsive XXL-Text */ line-height: 1.15; /* Kompakte Zeilenhöhe */ border-radius: 10px; /* Ecken runden */ box-shadow: var(--schatten-leicht); /* Leichter Schatten */ background: var(--JUHMA-beige); /* Markenbeige */ border: none; /* Kein Rahmen */ color: var(--ink-strong); /* Dunkler Text */ text-decoration: none; /* Unterstreichung ausschalten */ transition: transform .15s ease, background .3s ease, color .3s ease; /* Weiche Interaktionseffekte */ } .einsenden-btn:hover { transform: translateY(-1px); } /* Leichtes Anheben beim Hover */ .einsenden-btn:active { transform: translateY(0); } /* Rückfederung beim Klicken */ @media (max-width: 680px) { .einsenden-card { height: 250px; } /* Kachelhöhe mobil fixieren */ .einsenden-right { left: 16px; bottom: 16px; } /* Textblock näher an Rand */ .einsenden-btn { min-height: 56px; } /* Große Touch-Zone */ } /* ===================================================== Ende Sektor 5 ===================================================== */ /* ===================================================== 6. HERO ===================================================== */ :root{ --page-bg: var(--white); /* Seitenhintergrund für Fallback-Fade */ --footer-fade-bleed: 28px; /* Zusatzpuffer vor Footer-Maske */ } .hero { position: relative; /* Kontext für Pseudo-Elemente */ background: none; /* Kein eigener BG (nur Bild-Pseudos) */ min-height: 100vh; /* Viewporthöhe füllen */ min-height: 100svh; /* iOS/Chrome dynamische Höhe */ min-height: 100dvh; /* Dynamische Viewporthöhe */ padding: 0; /* Kein Innenabstand */ } .hero.section { padding: 0 !important; } /* Section-Padding hart überschreiben */ .hero::before { content: ""; /* Bild-Layer erzeugen */ position: absolute; /* Über gesamte Hero-Fläche */ inset: 0; /* Vollflächig */ background-image: url("assets/galerie/l/hero_l.png"); /* Fallback-Bild large */ background-image: image-set( /* Moderne Quellen mit WebP */ "assets/galerie/l/hero_l.webp" type("image/webp") 1x, "assets/galerie/l/hero_l.png" type("image/png") 1x ); background-size: cover; /* Cover-Fit */ background-position: center; /* Zentriert */ background-repeat: no-repeat; /* Nicht kacheln */ opacity: 0.15; /* Bild stark abblenden */ z-index: 0; /* Hinter Inhalt */ pointer-events: none; /* Nicht anklickbar */ -webkit-mask-image: linear-gradient( /* Fade zum Footer (WebKit) */ to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - var(--footer-offset) - var(--footer-fade-bleed)), rgba(0,0,0,0) 100% ); mask-image: linear-gradient( /* Fade zum Footer (Standard) */ to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - var(--footer-offset) - var(--footer-fade-bleed)), rgba(0,0,0,0) 100% ); } .hero::after{ content:""; /* Fallback-Verlauf erzeugen */ position:absolute; /* Überlagert Bild nach unten */ inset:0; /* Vollflächig */ background: linear-gradient( /* Weiß→Seitenfarbe */ to bottom, rgba(255,255,255,0) calc(100% - var(--footer-offset) - var(--footer-fade-bleed)), var(--page-bg) 100% ); z-index: 0; /* Hinter Inhalt */ pointer-events:none; /* Nicht anklickbar */ } @media (max-width: 600px) { .hero::before { background-image: url("assets/galerie/s/hero_s.png"); /* Mobile PNG */ background-image: image-set( /* Mobile WebP/PNG */ "assets/galerie/s/hero_s.webp" type("image/webp") 1x, "assets/galerie/s/hero_s.png" type("image/png") 1x ); } } @media (min-width: 601px) and (max-width: 1200px) { .hero::before { background-image: url("assets/galerie/m/hero_m.png"); /* Medium PNG */ background-image: image-set( /* Medium WebP/PNG */ "assets/galerie/m/hero_m.webp" type("image/webp") 1x, "assets/galerie/m/hero_m.png" type("image/png") 1x ); } } #hero { scroll-margin-top: 0; } /* Kein Anker-Offset */ .hero-inner { position: relative; /* Kontext für Inhalt */ z-index: 1; /* Über Pseudos */ padding-top: calc(clamp(120px, 16vw, 200px) + 10px); /* Abstand nach oben (über Header) */ padding-left: clamp(24px, 10vw, 160px); /* Seitenabstand links responsiv */ padding-bottom: 40px; /* Abstand nach unten */ } .hero-content { position: relative; } /* Wrapper für Typo */ .hero-title, .hero-body { position: relative; /* Für Z-Index */ z-index: 1; /* Über Background */ transform: translateY(-10px); /* Leichter Lift */ opacity: 1; /* Voll sichtbar */ } .hero h2 { text-transform: uppercase; /* Versalien */ font-size: clamp(var(--font-h2), 5.57vw, 64px); /* Responsive Headline */ line-height: 1.15; /* Enger Zeilenabstand */ margin: 0 0 80px 0; /* Luft nach unten */ text-shadow: var(--schatten-kraeftig); /* Tiefer Textschatten */ } .hero h2 .line1, .hero h2 .line2 { display: inline-block; /* Für Einzelflug/Animation */ opacity: 0; /* Startzustand */ text-shadow: var(--schatten-kraeftig); /* Schatten je Zeile */ will-change: transform, opacity; /* Rendering-Hinweis */ } .hero h2 .line1 { animation: slideInLeftOff 0.35s cubic-bezier(.2,.8,.2,1) 0.5s forwards, /* Einflug von links */ floatSlowA 18.2s ease-in-out 1.1s infinite alternate; /* Langsames Schweben A */ } .hero h2 .line2 { animation: slideInRightOff 0.35s cubic-bezier(.2,.8,.2,1) 0.6s forwards,/* Einflug von rechts */ floatSlowB 20.8s ease-in-out 1.2s infinite alternate; /* Langsames Schweben B */ } @keyframes slideInLeftOff { from { transform: translateX(-120vw); opacity: 0; } /* Start weit links + unsichtbar */ to { transform: translateX(0); opacity: 1; } /* Endposition sichtbar */ } @keyframes slideInRightOff { from { transform: translateX(120vw); opacity: 0; } /* Start weit rechts + unsichtbar */ to { transform: translateX(0); opacity: 1; } /* Endposition sichtbar */ } @keyframes floatSlowA { 0% { transform: translate(0, 0); } /* Ausgangsposition */ 22% { transform: translate(6px, 2px); } /* leichte Drift */ 50% { transform: translate(0, 10px); } /* nach unten */ 78% { transform: translate(-7px, 1px); } /* nach links */ 100% { transform: translate(4px, -6px); } /* nach oben rechts */ } @keyframes floatSlowB { 0% { transform: translate(0, 0); } /* Ausgangsposition */ 20% { transform: translate(-5px, 3px); } /* nach links/unten */ 48% { transform: translate(3px, -7px); } /* nach rechts/oben */ 80% { transform: translate(10px, 0); } /* nach rechts */ 100% { transform: translate(-4px, 5px); } /* nach links/unten */ } @media (prefers-reduced-motion: reduce) { .hero h2 .line1, .hero h2 .line2 { animation: none; opacity: 1; } /* Animationen deaktivieren (A11y) */ } /* Fließtext im Hero */ .lead { font-size: clamp(var(--font-subtitle), 3.5vw, 30px); /* Groß & responsiv */ color: var(--ink-muted); /* Gedämpfte Textfarbe */ margin: 0; /* Ohne Außenabstand */ } .device-list { list-style-type: disc; /* Aufzählungspunkte */ margin: 16px 0 20px 15px; /* Abstände um Liste */ padding: 0; /* Kein Innenabstand */ font-size: clamp(var(--font-subtitle), 3.5vw, 30px); /* Responsiv lesen */ color: var(--ink-muted); /* Gedämpfter Ton */ } .device-list li { margin-bottom: 4px; } /* Zeilenabstand zwischen Items */ .hero-cta { display: none; } /* Desktop: CTA aus */ @media (max-width: 520px) { .hero h2 { line-height: 1.05; /* Zeilen enger auf Mobil */ margin-top: 16px; /* Headline leicht nach unten */ margin-bottom: 48px; /* Abstand zum Text */ } .hero h2 .line1, .hero h2 .line2 { display: block; } /* Zeilen umbrechen */ .hero h2 .line1 { text-align: left; } /* Zeile 1 links */ .hero h2 .line2 { text-align: right; margin-top: 6px; } /* Zeile 2 rechts + kleine Lücke */ .hero-inner { padding-inline: clamp(24px, 10vw, 160px); /* Seitlicher Rand */ padding-top: calc(clamp(120px, 16vw, 200px) + 10px); /* Gesamtblock etwas tiefer */ } .hero-cta { display: flex; justify-content: center; margin-top: 16px; } /* CTA sichtbar + mittig */ } /* ===================================================== Ende Sektor 6 ===================================================== */ /* ===================================================== 7. SECTIONS ===================================================== */ .section { padding: 55px 0; /* Vertikale Sektionen-Abstände */ scroll-margin-top: 100px; /* Standard-Offset für Anchor-Links */ } #leistungen { scroll-margin-top: -15px; } /* Feintuning Ankerposition */ #galerie { scroll-margin-top: -15px; } /* Feintuning Ankerposition */ #einsenden { scroll-margin-top: -15px; } /* Feintuning Ankerposition */ #kontakt { scroll-margin-top: -15px; } /* Feintuning Ankerposition */ @media (max-width: 520px) { #leistungen, #galerie, #einsenden, #kontakt { scroll-margin-top: 0; } /* Mobile: Offsets neutral */ #kontakt.section { padding-bottom: 0; } /* Unten keinen Extra-Puffer */ } /* ===================================================== Ende Sektor 7 ===================================================== */ /* ===================================================== 8. CARDS & LEISTUNGEN ===================================================== */ .leistungen-header { display: flex; /* Kopfbereich als Flex */ align-items: baseline; /* Typo-Baseline ausrichten */ gap: 40px; /* Spacing zwischen Blöcken */ flex-wrap: wrap; /* Umbruch bei wenig Platz */ margin-bottom: 0.83em; /* Abstand zum Grid */ } .leistungen-header h2 { text-transform: uppercase; /* Versalien */ margin: 0; /* Bündig */ } .leistungen-header .sub { margin: 0; /* Bündig */ align-self: baseline; /* An Baseline ziehen */ flex: 1; /* Restbreite einnehmen */ } /* Kartenliste (untereinander) */ .leistungen-list { display: flex; /* Flex-Container */ flex-direction: column; /* Vertikal stapeln */ gap: 30px; /* Abstand zwischen Karten */ margin: 0; /* Kein Außenabstand */ padding: 0; /* Kein Innenabstand */ } /* Grundkarte */ .leistung { position: relative; /* Bezug für Overlays */ background: var(--white); /* Heller Kartenhintergrund */ border-radius: var(--radius); /* Abgerundete Ecken */ box-shadow: var(--schatten-leicht); /* Weicher Schatten */ overflow: hidden; /* Bild beschneiden */ height: 250px; /* Einheits-Höhe */ display: block; /* Block-Level */ } /* Bild flächig */ .leistung picture { position: absolute; /* Über die ganze Karte */ inset: 0; /* Vollflächig */ z-index: 0; /* Hinter Text */ display: block; /* Block */ } .leistung img { position: absolute; /* Vollflächig im Picture */ inset: 0; /* Ränder bündig */ width: 100%; /* volle Breite */ height: 100%; /* volle Höhe */ object-fit: cover; /* Zuschneiden */ object-position: center; /* Zentrieren */ display: block; /* Block */ } /* Verlauf links → Bild */ .leistung::after { content: ""; /* Overlay erzeugen */ position: absolute; /* Über Bild legen */ inset: 0; /* Vollflächig */ z-index: 1; /* Über Bild */ pointer-events: none; /* Klicks durchreichen */ background: linear-gradient( /* Lesbarkeit links erhöhen */ to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100% ); } /* Textblock */ .leistung .leistung-text { position: relative; /* Kontext */ z-index: 2; /* Über Overlay */ height: 100%; /* volle Höhe */ max-width: 40%; /* Textspalte begrenzen */ display: flex; /* Flex-Layout */ flex-direction: column; /* Vertikal */ justify-content: flex-start; /* Oben beginnen */ align-items: flex-start; /* linksbündig */ padding: 20px 0 20px 20px; /* Innenabstände */ text-align: left; /* Text links */ word-break: break-word; /* Lange Wörter umbrechen */ overflow-wrap: anywhere; /* Umbrechen erlauben */ } .leistung .leistung-text h3 { margin: 0 0 6px 0; /* Knapp unter Titel */ line-height: 1.2; /* Kompakter Titel */ color: var(--h3-card); /* Titel-Farbe */ } .leistung .leistung-text p { margin: 0; /* Keine Zusatzabstände */ color: var(--ink-muted); /* Gedämpfte Fließtextfarbe */ } /* Überschrift-Kachel */ .leistung.header-card { position: relative; /* Positionierung */ display: block; /* Block */ background: var(--white); /* Heller Background */ border-radius: var(--radius); /* Rundung */ box-shadow: var(--schatten-leicht); /* Weicher Schatten */ height: auto; /* dynamische Höhe */ min-height: unset; /* Min-Höhe neutral */ padding: 20px 20px; /* Innenabstand */ } .leistung.header-card::after { content: none; } /* Verlauf für Header-Karte deaktivieren */ .leistung.header-card .leistungen-header { margin: 0; } /* Überschrift bündig zur Karte */ @media (max-width: 520px) { .leistung { height: 280px; } /* Kartenhöhe mobil anheben */ .leistung .leistung-text { max-width: 60%; } /* Mehr Platz für Text */ .leistung.header-card h2 { font-size: 1.17em; } /* Mobile H2 ≈ H3 */ .leistungen-header .sub { display: none; } /* Subline mobil ausblenden */ } /* ===================================================== Ende Sektor 8 ===================================================== */ /* ===================================================== 9. GALERIE ===================================================== */ .gallery-header { position: relative; /* Bezug für Inhalt */ display: block; /* Block */ background: var(--white); /* Heller Header */ border-radius: var(--radius); /* Runde Ecken */ box-shadow: var(--schatten-leicht); /* Weicher Schatten */ height: auto; /* Dynamische Höhe */ min-height: unset; /* Keine Mindesthöhe */ padding: 20px 20px; /* Innenabstand */ margin: 0 0 var(--gallery-gap, 30px) 0; /* Abstand unterhalb (Variabel) */ } .gallery-header h2 { margin: 0; /* bündig */ text-transform: uppercase; /* Versalien */ } /* Grid mit drei Spalten */ .gallery { --gallery-gap: 30px; /* Kachelabstand */ width: 100%; /* volle Breite */ display: grid; /* CSS Grid */ grid-auto-flow: row; /* Reihenweise füllen */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 gleich breite Spalten */ gap: var(--gallery-gap); /* Abstand anwenden */ align-items: start; /* Items an Oberkante */ justify-items: stretch; /* Kacheln strecken */ } /* Kachel-Rahmen */ .gallery .figure { margin: 0; /* bündig */ background: var(--white); /* Kachelhintergrund */ border: none; /* Kein sichtbarer Rahmen */ border-radius: var(--radius); /* Runde Ecken */ overflow: hidden; /* Bildbeschnitt */ box-shadow: var(--schatten-leicht); /* Weicher Schatten */ } /* Bildkachel (quadratisch) */ .gallery .thumb { width: 100%; /* volle Breite */ aspect-ratio: 1 / 1; /* Quadrat */ position: relative; /* Bezug für Layers */ overflow: hidden; /* Sauberer Beschnitt */ background: transparent; /* Kein schwarzer BG beim Wechsel */ } /* Crossfade-Layer */ .gallery .thumb .layer { position: absolute; /* Überlagerung */ inset: 0; /* Vollflächig */ display: block; /* Block */ opacity: 0; /* Start transparent */ transition: opacity 2.5s ease; /* Sanfter Crossfade */ will-change: opacity; /* Performance-Hinweis */ pointer-events: none; /* Keine Events abfangen */ } .gallery .thumb .layer.is-visible { opacity: 1; } /* Sichtbaren Layer zeigen */ /* Bilder vollflächig einsetzen */ .gallery .thumb picture, .gallery .thumb img { position: absolute; /* Vollflächig */ inset: 0; /* Kanten bündig */ width: 100%; /* strecken */ height: 100%; /* strecken */ object-fit: cover; /* Zuschneiden */ object-position: center; /* Zentrieren */ display: block; /* Block */ } /* Captions ausblenden */ .gallery .figure figcaption { display: none; } /* Keine Bildunterschrift */ /* Nur zwei Reihen (6 Elemente) auf Desktop */ .gallery .figure:nth-child(n+7) { display: none; } /* Ab 7. Kachel verstecken */ /* Lightbox (optional) */ .lightbox { display: none; /* Unsichtbar bis geöffnet */ position: fixed; /* Über gesamter Viewport */ z-index: 999; /* Über Seite */ inset: 0; /* Vollflächig */ background: rgba(0,0,0,0.5); /* Abdunkeln */ backdrop-filter: blur(6px); /* Hintergrund weichzeichnen */ -webkit-backdrop-filter: blur(6px); /* WebKit Weichzeichner */ } .lightbox.is-open { display: block; } /* Sichtbar wenn aktiv */ .lightbox-content { position: absolute; /* In Overlay positionieren */ top: 50%; left: 50%; /* Mitte */ transform: translate(-50%, -50%); /* Exakt zentrieren */ max-width: 95vw; max-height: 95vh; /* Bildschirmgrenzen respektieren */ display: block; /* Block */ box-shadow: var(--schatten-leicht); /* Leichter Schatten */ } .lightbox .close { position: absolute; /* Button oben rechts */ top: 18px; right: 24px; /* Abstand zu Rändern */ color: #fff; /* Weißes Icon */ font-size: 36px; font-weight: 700; /* Groß & fett */ line-height: 1; /* Kompakt */ cursor: pointer; /* Maushand */ opacity: .9; /* Leicht transparent */ transition: opacity .2s; /* Sanfter Hover */ } .lightbox .close:hover { opacity: 1; } /* Voll sichtbar bei Hover */ .lightbox .prev, .lightbox .next { position: absolute; top: 50%; /* Mittig vertikal */ transform: translateY(-50%); /* Exakt zentrieren */ color: #fff; /* Weiß */ font-size: 32px; font-weight: 700; /* Groß & fett */ cursor: pointer; padding: 8px; /* Klickfläche */ user-select: none; /* Nicht markierbar */ line-height: 1; /* Kompakt */ transition: color .2s, opacity .2s; /* Interaktion */ opacity: .9; /* Leicht transparent */ } .lightbox .prev { left: 20px; } /* Links positionieren */ .lightbox .next { right: 20px; } /* Rechts positionieren */ .lightbox .prev:hover, .lightbox .next:hover { color: var(--JUHMA-beige); } /* Markenfarb-Hover */ @media (max-width: 520px) { .gallery-header h2 { font-size: 1.17em; } /* Überschrift verkleinern */ .gallery .figure:nth-child(n+2) { display: none; } /* Mobil: nur eine Kachel zeigen */ } /* ===================================================== Ende Sektor 9 ===================================================== */ /* ===================================================== 10. KONTAKT ===================================================== */ /* Überschrifts-Kachel (identisch zu anderen Header-Kacheln) */ .kontakt-header { position: relative; /* Kontext für absolut positionierte Kinder */ display: block; /* Blockelement */ background: var(--white); /* Kachelhintergrund */ border-radius: var(--radius); /* Eckenrundung global */ box-shadow: var(--schatten-leicht); /* Weicher Schatten */ height: auto; /* Höhe durch Inhalt */ min-height: unset; /* Mindesthöhe aufheben */ padding: 20px 20px; /* Innenabstand (oben/unten & links/rechts) */ margin: 0 0 30px 0; /* Abstand unterhalb */ } .kontakt-header h2 { margin: 0; /* Überschrift bündig */ text-transform: uppercase; /* Versalien */ } /* Unterzeile unter der Überschrift */ .kontakt-sub { margin: 6px 0 0; /* Abstand nach oben */ line-height: 1.3; /* Zeilenhöhe */ color: var(--ink-muted); /* Gedämpfte Textfarbe */ font-weight: 500; /* Halbfett */ font-size: clamp(12px, 1.4vw, 16px); /* Responsive Schriftgröße */ } .contact-card { background: var(--white); /* Kartenhintergrund */ border: none; /* Kein Rahmen */ border-radius: var(--radius); /* Eckenrundung */ box-shadow: var(--schatten-leicht); /* Leichter Schatten */ padding: 20px; /* Innenabstand */ display: flex; /* Flex-Layout */ flex-direction: row; /* Horizontal anordnen */ align-items: center; /* Vertikal zentrieren */ justify-content: space-between; /* Platz zwischen Elementen */ } .contact-buttons { display: flex; /* Flex-Container */ justify-content: space-between; /* Buttons verteilen */ align-items: center; /* Vertikal zentrieren */ flex: 1; /* Restbreite einnehmen */ flex-wrap: wrap; /* Umbruch zulassen */ gap: 20px 0; /* Zeilenabstand (20px), Spalten 0 */ } .contact-buttons .btn { width: 80px; /* Buttonbreite */ height: 80px; /* Buttonhöhe */ flex: 0 0 auto; /* Nicht wachsen/schrumpfen */ display: flex; /* Flex für Icon-Zentrierung */ align-items: center; /* Vertikal zentrieren */ justify-content: center; /* Horizontal zentrieren */ border-radius: 10px; /* Eckenrundung */ box-shadow: var(--schatten-leicht); /* Leichter Schatten */ background: var(--JUHMA-beige); /* Button-Hintergrund */ border: none; /* Kein Rahmen */ color: var(--ink-strong); /* Icon/Text-Farbe */ transition: transform .15s ease, /* Hover/Active Transition */ background .3s ease, color .3s ease; padding: 6px; /* Innenabstand (Icon-Luft) */ } .contact-buttons .btn:hover { background: var(--JUHMA-gruen); /* Hover-Farbe */ color: var(--white); /* Hover-Text/Icons */ transform: translateY(-1px); /* Leicht anheben */ } .contact-buttons .btn img { max-width: 80%; /* Iconbreite begrenzen */ max-height: 80%; /* Iconhöhe begrenzen */ object-fit: contain; /* Proportionen wahren */ display: block; /* Blockdarstellung */ } /* Dummy-Button standardmäßig ausblenden (nur Mobile sichtbar) */ .btn--dummy { display: none; } /* Platzhalter nur mobil zeigen */ @media (max-width: 920px) { /* Breakpoint ≤920px: Tablet-Layout */ .contact-buttons { justify-content: center; /* Buttons mittig */ gap: 20px; /* Einheitlicher Abstand */ } .contact-buttons .btn { flex: 0 0 calc(25% - 20px); /* 4 Spalten im Flex-Wrap */ } } /* MOBILE */ @media (max-width: 520px) { /* Breakpoint ≤520px: Smartphone */ /* H2 verkleinern auf H3-Niveau und Sub ausblenden */ .kontakt-header h2 { font-size: 1.17em; letter-spacing: normal; } /* Kleinere Headline */ .kontakt-sub { display: none; } /* Unterzeile aus */ /* NEU: 5 Spalten pro Reihe (statt 6), Gap 20px. Außenabstand bleibt durch .contact-card padding:20px */ .contact-buttons { display: grid; /* Grid statt Flex */ grid-template-columns: repeat(5, 1fr); /* 5 gleiche Spalten */ gap: 20px; /* Spalten-/Zeilenabstand */ justify-items: stretch; /* Buttons strecken */ align-items: stretch; /* Volle Zellenhöhe */ } /* Quadratische, flexible Buttons im Grid */ .contact-buttons .btn { width: 100%; /* Spaltenbreite füllen */ height: auto; /* Höhe über Aspect Ratio */ aspect-ratio: 1 / 1; /* Quadratisch */ flex: 0 0 auto; /* Flex-Eigenschaft neutral */ max-width: none; /* Keine Max-Breite */ } /* Dummy-Button mobil einblenden */ .btn--dummy { display: inline-flex; } /* Platzhalter sichtbar */ } /* ===================================================== Ende Sektor 10 ===================================================== */ /* ===================================================== 11. FOOTER ===================================================== */ .footer { position: fixed; /* Fixiert am Viewport */ bottom: 0; left: 0; /* An untere/links Kante */ width: 100%; /* Vollbreite */ background: var(--JUHMA-beige); /* Footerfarbe */ color: var(--footer-text); /* Textfarbe im Footer */ z-index: 45; /* Über Inhalt, unter Header */ height: var(--footer-offset); /* Höhe über Variable */ box-shadow: var(--schatten-leicht-negativ); /* Oberer Schatten nach innen */ } .footer-inner { display: flex; /* Layout für Inhalte */ align-items: center; /* Vertikal zentrieren */ justify-content: space-between; /* Links/Rechts verteilen */ height: 100%; /* Volle Footerhöhe */ } .footer a { color: var(--footer-text); } /* Linkfarbe angleichen */ .legal-links { display: flex; gap: 14px; } /* Rechtelinks nebeneinander mit Abstand */ .copyright { font-size: 12px; color: var(--footer-text); } /* Copyright-Typo */ /* ===================================================== Ende Sektor 11 ===================================================== */ /* ===================================================== 12. MISC & RESPONSIVE ===================================================== */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav .cta:focus-visible, .float-whatsapp:focus-visible { outline:3px solid var(--focus-outline); /* Deutlicher Tastaturfokus */ outline-offset:2px; /* Abstand vom Element */ border-radius:10px; /* Fokus-Ring abrunden */ } /* Seitenend-Puffer: sorgt dafür, dass #einsenden trotz fixem Footer exakt am Zielpunkt stehen kann. */ main::after{ content:""; /* Leeres Pseudo-Element */ display:block; /* Sichtbarer Block */ height: 700px; /* Zusätzlicher Seitenboden (anpassen) */ } /* <=920px: Galerie 2 Spalten, nur 2 Reihen -> 4 Elemente sichtbar */ @media (max-width:920px){ /* Breakpoint ≤920px */ .hero-inner{grid-template-columns:1fr;} /* Hero-Grid einkolumnig */ .card-grid{grid-template-columns:1fr;} /* Cards einkolumnig */ .gallery{grid-template-columns:1fr 1fr; gap:30px;} /* Galerie auf 2 Spalten */ .gallery .figure{display:block;} /* Alle sichtbaren zeigen */ .gallery .figure:nth-child(n+5){display:none;} /* Ab 5. Bild ausblenden */ .contact-links{grid-template-columns:1fr;} /* Kontaktliste einkolumnig */ } @media (max-width:780px){ /* Breakpoint ≤780px */ .header-inner{flex-direction:column; align-items:flex-start; gap:8px; padding:12px 0;} /* Header umbrechen */ .brand{width:100%; gap:12px;} /* Brandzeile über volle Breite */ .brand h1{font-size:var(--font-brand); line-height:1.3;} /* Brand-Headline skalieren */ .nav{width:100%; flex-wrap:wrap; gap:20px; justify-content:flex-end;} /* Nav umbrechen/rechtsbündig */ } /* <=520px: Galerie 1 Spalte, nur 2 Reihen -> 2 Elemente sichtbar */ @media (max-width:520px){ /* Breakpoint ≤520px */ .gallery{grid-template-columns:1fr; gap:30px;} /* Galerie 1 Spalte */ .gallery .figure{display:block;} /* Sichtbare anzeigen */ .gallery .figure:nth-child(n+3){display:none;} /* Ab 3. Bild ausblenden */ .brand h1{font-size:17px;} /* Brand-Headline verkleinern */ .footer-inner{flex-direction:column; gap:6px; justify-content:center; text-align:center;} /* Footer stapeln */ /* Smartphone: Abstand am Seitenende -> Footer-Höhe + 20px sichtbarer Abstand zur letzten Kachel */ main::after { height: calc(var(--footer-offset) + 20px); } /* Dynamischer Endpuffer */ } /* ===================================================== Ende Sektor 12 ===================================================== */