/* ========================================================================== MOSER Signature – Designsystem "Kante" -------------------------------------------------------------------------- Basis bleibt moser.css (Struktur, Komponenten, Mobile-Navigation). Diese Datei gibt der Seite ihre Gestalt. Klare rechteckige Flächen ohne abgeschrägte Ecken auf Sektionen, Bildern, Buttons, Karten und Kacheln. Dekorative Akzent- und Leitbalken behalten ihre schrägen Enden. 1. Der Strich – der aufsteigende Strich des M als kleiner Marker vor jeder Zwischenzeile (Kicker), im Menü, im Footer. 2. Der Punkt – der Schlusspunkt übernimmt die Farbe der Headline. 3. Bereichsfarbe – Orange für Bau und Unternehmen, Grün für Agrar: Marker, Zahlen, Konturbuttons, eine CTA-Fläche pro Seite. ========================================================================== */ @font-face{font-family:'Sofia Sans';src:url('../fonts/sofia-sans-variable.ttf') format('truetype');font-weight:100 1000;font-style:normal;font-display:swap} :root{background:#2a2a2a;color-scheme:dark} .design-relaunch .section,.design-relaunch .detail-dialog{color-scheme:light} .design-relaunch .section.bg-dark,.design-relaunch .section.bg-neutral-dark,.design-relaunch .section.bg-accent,.design-relaunch .section.section-stats,.design-relaunch .section.section-values,.design-relaunch .section.section-area,.design-relaunch .section.section-lead:not(.bg-light):not(.bg-warm),.design-relaunch .section.section-locations,.design-relaunch .kt-section{color-scheme:dark} /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ .design-relaunch{ /* Flächen */ --ink-950:#222222; --ink-900:#2a2a2a; --ink-800:#343434; --ink-700:#414141; --ink-600:#4f4f4f; --paper:#e7e6e3; --paper-2:#dddcd8; --paper-3:#f6f6f4; /* Marke */ --brand:#f36b00; --brand-bright:#ff8226; --brand-deep:#c85800; --agrar:#a4b768; --agrar-bright:#b8ca80; --agrar-deep:#6f7f3f; /* Bereichsfarbe (Bau = Orange, Agrar = Grün) */ --area:var(--brand); --area-bright:var(--brand-bright); --area-deep:var(--brand-deep); --area-soft:rgba(243,107,0,.14); --area-glow:rgba(243,107,0,.5); /* Text auf dunkel / auf Papier */ --fg:#f4f4f2; --fg-2:#d3d3d0; --fg-muted:#a3a3a0; --pfg:#262626; --pfg-2:#3d3d3d; --pfg-muted:#636363; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.24); --pline:rgba(38,38,38,.14); /* Kontext-Tokens (werden je Fläche gesetzt) */ --sfg:var(--fg); --sfg-2:var(--fg-2); --sfg-muted:var(--fg-muted); --sline:var(--line); --raised:var(--ink-700); --raised-hover:var(--ink-600); --button-fg:var(--area); --button-bg:transparent; --button-line:var(--area); --button-hover-bg:var(--area); --button-hover-fg:var(--ink-950); --button-glow:0 0 24px var(--area-glow),0 4px 16px rgba(0,0,0,.3); /* Legacy-Tokens für moser.css und Plugins (helle Kontexte) */ --accent:var(--area); --accent-hover:var(--area-deep); --accent-light:var(--area-soft); --accent-glow:rgba(243,107,0,.22); --bg:var(--paper); --bg-light:var(--paper); --bg-warm:var(--paper); --bg-dark:var(--ink-800); --bg-dark-2:var(--ink-700); --white:#fff; --text:var(--pfg); --text-secondary:var(--pfg-2); --text-muted:var(--pfg-muted); --border:var(--pline); --border-light:rgba(38,38,38,.09); --radius-sm:0;--radius-md:0;--radius-lg:0;--radius-xl:0;--radius-full:0;--radius:0; --shadow-md:none;--shadow-lg:none;--shadow-xl:0 30px 80px rgba(0,0,0,.5);--shadow-card-hover:none; /* Typografie */ --display:'Sofia Sans','Poppins',system-ui,sans-serif; --body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; --font:var(--body); --type-body:17px; --type-lead:clamp(17px,1.4vw,20px); --type-small:15px; --type-label:13px; --type-button:14px; --type-h1:clamp(44px,5.4vw,80px); --type-h2:clamp(34px,4.2vw,58px); --type-card-title:24px; --type-compact-title:22px; /* Raster */ --content-max:1280px; --page-gutter:clamp(22px,5vw,72px); --content-inset:max(var(--page-gutter),calc((100% - var(--content-max)) / 2)); --header-h:80px; --header-height:80px; --ease-out:cubic-bezier(.2,.7,.2,1); width:100%;max-width:none;margin:0;position:relative;box-shadow:none; background:var(--ink-900); color:var(--fg); font-family:var(--body); font-size:var(--type-body); line-height:1.6; letter-spacing:0; } .theme-agrar{ --area:var(--agrar); --area-bright:var(--agrar-bright); --area-deep:var(--agrar-deep); --area-soft:rgba(164,183,104,.16); --area-glow:rgba(164,183,104,.5); --accent-glow:rgba(164,183,104,.22); --area-on-paper:var(--agrar-deep); } /* Dunkle Flächen */ .design-relaunch .bg-dark, .design-relaunch .bg-neutral-dark, .design-relaunch .bg-accent, .design-relaunch .section-stats, .design-relaunch .section-values, .design-relaunch .section-services, .design-relaunch .section-area, .design-relaunch .section-lead:not(.bg-light):not(.bg-warm), .design-relaunch .hero, .design-relaunch .site-footer, .design-relaunch .news-variant-editorial .news-card:nth-child(even){ --sfg:var(--fg);--sfg-2:var(--fg-2);--sfg-muted:var(--fg-muted);--sline:var(--line); --raised:var(--ink-700);--raised-hover:var(--ink-600); --button-fg:var(--area); color:var(--fg); } /* Papier-Flächen */ .design-relaunch .section, .design-relaunch .news-variant-editorial .news-card:nth-child(odd), .design-relaunch .detail-dialog{ --sfg:var(--pfg);--sfg-2:var(--pfg-2);--sfg-muted:var(--pfg-muted);--sline:var(--pline); --raised:var(--paper-3);--raised-hover:#fff; --button-fg:var(--area-on-paper,var(--area)); color:var(--pfg); } .design-relaunch .section.bg-dark, .design-relaunch .section.bg-neutral-dark, .design-relaunch .section.bg-accent, .design-relaunch .section.section-stats, .design-relaunch .section.section-values, .design-relaunch .section.section-area, .design-relaunch .section.section-lead:not(.bg-light):not(.bg-warm){ --sfg:var(--fg);--sfg-2:var(--fg-2);--sfg-muted:var(--fg-muted);--sline:var(--line); --raised:var(--ink-700);--raised-hover:var(--ink-600); --button-fg:var(--area); color:var(--fg); } /* -------------------------------------------------------------------------- Typografie -------------------------------------------------------------------------- */ .design-relaunch :is(h1,h2,h3,h4,h5,h6){font-family:var(--display);font-weight:900;letter-spacing:-.025em;color:inherit;text-wrap:balance} .design-relaunch h1{font-size:var(--type-h1);line-height:.98;letter-spacing:-.035em} .design-relaunch h2{font-size:var(--type-h2);line-height:1.02;letter-spacing:-.03em} .design-relaunch h3{font-size:clamp(22px,2vw,28px);line-height:1.12;font-weight:800} .design-relaunch h4{font-size:15px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .design-relaunch p{color:var(--sfg-2)} .design-relaunch :is(input,select,textarea){font-family:var(--body)} .design-relaunch li{color:inherit} .design-relaunch a{color:var(--area)} .design-relaunch a:hover{color:var(--area-bright)} .design-relaunch strong,.design-relaunch b{font-weight:600;color:var(--sfg)} .design-relaunch ::selection{background:var(--area);color:var(--ink-950)} .dot{color:inherit} .design-relaunch :focus-visible{outline:3px solid var(--area);outline-offset:4px;border-radius:0} .skip-link{position:fixed;left:16px;top:-100px;z-index:5000;padding:12px 16px;background:var(--brand);color:var(--ink-950);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em} .skip-link:focus{top:16px} /* Kicker – Zwischenzeile mit Moser-Strich */ .kicker, .design-relaunch .section-pretitle, .design-relaunch .hero-pretitle, .design-relaunch .news-card-pretitle, .design-relaunch .partner-badge, .design-relaunch .location-card-badge, .design-relaunch .job-type, .design-relaunch .site-footer h4{ display:inline-flex;align-items:center;gap:11px; font-family:var(--display);font-weight:700;font-size:13px;line-height:1.2; letter-spacing:.16em;text-transform:uppercase;color:var(--area); margin:0 0 18px;padding:0;background:none;border-radius:0; } .kicker::before, .design-relaunch .section-pretitle::before, .design-relaunch .hero-pretitle::before, .design-relaunch .news-card-pretitle::before, .design-relaunch .partner-badge::before, .design-relaunch .location-card-badge::before, .design-relaunch .site-footer h4::before{ content:'';display:inline-block;flex:none;width:8px;height:14px;margin-left:5px; background:var(--area);transform:skewX(-45deg);position:static;opacity:1; } .design-relaunch .site-footer h4::after{display:none} /* -------------------------------------------------------------------------- Raster & Sektionen -------------------------------------------------------------------------- */ .design-relaunch .container{width:100%;max-width:calc(var(--content-max) + 2 * var(--page-gutter));padding-inline:var(--page-gutter);margin-inline:auto} .design-relaunch main#content{padding-top:0} .design-relaunch .section{--section-pad:clamp(64px,8vw,112px);padding:var(--section-pad) 0;background:var(--paper);position:relative;border:0} /* moser.css setzt per ID-Selektor (#content > div + div > .section) einen eigenen oberen Abstand; hier neutralisiert */ .design-relaunch #content > div > .section{padding-top:var(--section-pad)} .design-relaunch .section::before,.design-relaunch .section::after{display:none} .design-relaunch .bg-light,.design-relaunch .bg-warm{background:var(--paper)} .design-relaunch .bg-dark{background:var(--ink-800)} .design-relaunch .bg-neutral-dark{background:var(--ink-700)} .design-relaunch .bg-accent{background:var(--ink-800)} .design-relaunch .section-lead:not(.bg-light):not(.bg-warm){background:var(--ink-800)} .design-relaunch .section-cards,.design-relaunch .section-text{border:0} .design-relaunch .section-intro{padding-bottom:0} /* Sektionskopf: Haarlinie, Kicker, Titel links, Untertitel rechts */ .design-relaunch .section-header{ text-align:left;max-width:none;margin:0 0 clamp(36px,5vw,56px); padding-top:26px;border-top:1px solid var(--sline); display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px clamp(32px,5vw,72px);align-items:end; } .design-relaunch .section-header::after{display:none} .design-relaunch .section-header .section-pretitle{grid-column:1 / -1;margin:0} .design-relaunch .section-header h2{grid-column:1;margin:0;white-space:pre-line} .design-relaunch .section-subtitle{grid-column:2;margin:0 0 6px;font-size:var(--type-body);line-height:1.6;color:var(--sfg-2);max-width:48ch} .design-relaunch .section-header:has(> .section-subtitle) h2{grid-row:2} /* Lesetext zentriert */ .design-relaunch .content-center{max-width:none;margin-inline:0;text-align:left;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:18px clamp(32px,5vw,88px);padding-top:26px;border-top:1px solid var(--sline)} .design-relaunch .content-center .content-head{grid-column:1;min-width:0} .design-relaunch .content-center .content-head .section-pretitle{margin-bottom:12px} .design-relaunch .content-center .content-body{grid-column:2;max-width:72ch;min-width:0;position:relative;padding-left:38px} .design-relaunch .content-center:not(.has-head){grid-template-columns:1fr} .design-relaunch .content-center:not(.has-head) .content-head{display:none} .design-relaunch .content-center:not(.has-head) .content-body{grid-column:1;max-width:84ch} .design-relaunch .content-center .content-body::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:12px;background:var(--area);clip-path:polygon(0 12px,100% 0,100% calc(100% - 12px),0 100%)} .design-relaunch .section-lead .content-body h2,.design-relaunch .section-lead .content-body h3{font-size:clamp(22px,2vw,28px);line-height:1.38;font-weight:700;letter-spacing:-.015em;color:var(--sfg)} .design-relaunch .section-lead .content-body p{font-size:var(--type-lead);line-height:1.6;color:var(--sfg-2)} .design-relaunch .section-lead .content-body > :first-child{margin-top:-.15em} .design-relaunch .content-center .feature-links{grid-column:1 / -1} .design-relaunch .content-center h2{margin:0;font-size:clamp(30px,3.2vw,44px);max-width:16ch} .design-relaunch .content-center h2.content-claim{max-width:14ch;text-wrap:balance} .design-relaunch .content-center p{font-size:var(--type-lead);line-height:1.6;max-width:60ch;margin-inline:0} .design-relaunch .content-center .section-pretitle{display:inline-flex} .design-relaunch .content-body h2,.design-relaunch .content-body h3{font-size:clamp(21px,2vw,27px);line-height:1.3;font-weight:700;letter-spacing:-.015em;max-width:62ch;margin:0 0 20px;text-wrap:pretty} .design-relaunch .content-body h2 strong,.design-relaunch .content-body h3 strong{font-weight:900;color:var(--area)} .design-relaunch .content-body > :last-child{margin-bottom:0} .design-relaunch .content-body ul,.design-relaunch .split-body ul,.design-relaunch .cta-content ul,.design-relaunch .news-card-body ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:7px;max-width:58ch} .design-relaunch .content-body li,.design-relaunch .split-body li,.design-relaunch .cta-content li,.design-relaunch .news-card-body li{position:relative;padding-left:22px;color:var(--sfg-2);line-height:1.5} .design-relaunch .content-body li::before,.design-relaunch .split-body li::before,.design-relaunch .cta-content li::before,.design-relaunch .news-card-body li::before{content:'';position:absolute;left:3px;top:.5em;width:6px;height:11px;background:var(--area);transform:skewX(-45deg)} .design-relaunch .cta-content li{color:rgba(52,52,52,.9)} .design-relaunch .cta-content li::before{background:var(--ink-800)} .design-relaunch .content-center ul{max-width:none;columns:2;column-gap:48px;margin-top:24px} .design-relaunch .content-center ul li{border-color:var(--sline);padding-left:1.4em} .design-relaunch .content-center ul li::before{color:var(--area)} .design-relaunch .content-center .btn{margin-top:22px} .design-relaunch .content-wrap{color:var(--sfg)} .design-relaunch .content-wrap h2{margin-top:0;font-size:clamp(28px,3vw,40px)} .design-relaunch .content-wrap h3{font-size:var(--type-card-title)} .design-relaunch .content-wrap li{color:var(--sfg-2)} .design-relaunch .content-wrap th{background:var(--paper-2);color:var(--pfg)} .design-relaunch .content-wrap th,.design-relaunch .content-wrap td{border-color:var(--sline)} .design-relaunch .content-legal{max-width:820px} .design-relaunch .content-legal h3{font-size:var(--type-compact-title)} /* -------------------------------------------------------------------------- Buttons – eine Kontur in Bereichsfarbe, gefüllt bei Hover und Tastaturfokus. Die alten Varianten bleiben als Aliase für bestehende CMS-Inhalte erhalten. Auf Akzentflächen setzen CTA-Kontext-Tokens die dunkle Variante. -------------------------------------------------------------------------- */ .design-relaunch .btn, .design-relaunch .jobs-filter-btn, .design-relaunch .location-card-contact .btn-outline-accent{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 32px;min-height:46px;max-width:100%; font-family:var(--display);font-weight:700;font-size:var(--type-button);line-height:1.2;letter-spacing:.1em;text-transform:uppercase;text-align:center; background:var(--button-bg);color:var(--button-fg);border:2px solid var(--button-line); border-radius:0;box-shadow:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer;text-decoration:none; clip-path:none; transition:background .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out); } .design-relaunch .btn::before,.design-relaunch .btn::after, .design-relaunch .location-card-contact .btn-outline-accent::after{content:none;display:none} .design-relaunch .btn .bi{display:inline-block;font-size:1.1em;line-height:1} .design-relaunch .btn:is(:hover,:focus-visible), .design-relaunch .jobs-filter-btn:is(:hover,:focus-visible,.active), .design-relaunch .location-card-contact .btn-outline-accent:is(:hover,:focus-visible){ background:var(--button-hover-bg);border-color:var(--button-hover-bg);color:var(--button-hover-fg);box-shadow:var(--button-glow);transform:translateY(-1px); } .design-relaunch .btn:active{transform:none} .design-relaunch .btn:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none} .design-relaunch .btn-lg{padding:17px 44px;font-size:var(--type-button)} .design-relaunch .card-link, .design-relaunch .cert-download, .design-relaunch .partner-info .card-link{ display:inline-flex;align-items:center;gap:10px; font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--area); } .design-relaunch .card-link:hover{gap:14px;color:var(--area-bright)} /* -------------------------------------------------------------------------- Ankündigungsleiste & Header -------------------------------------------------------------------------- */ .announcement-bar{ background:var(--brand);color:var(--ink-800); font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase; text-align:center;padding:9px 20px;line-height:1.3; } .announcement-bar a{color:inherit;text-decoration:underline;text-underline-offset:3px} .design-relaunch .site-header{ position:sticky;top:0;left:0;right:0;z-index:1000;height:auto; background:var(--ink-950);border:0;border-top:3px solid var(--brand); box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; } .design-relaunch .site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)} .design-relaunch .header-inner{height:var(--header-h);gap:28px} .design-relaunch .logo-img{height:auto;width:190px;max-height:52px;object-fit:contain} /* Social-Media-Profile zwischen Navigation und Telefon sowie im mobilen Menü */ .social-links{display:flex;align-items:center;gap:4px} .design-relaunch .social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;color:var(--fg-2);font-size:20px;line-height:1;transition:color .2s,background .2s} .design-relaunch .social-link:hover{color:var(--brand)} .mobile-social{gap:12px;margin-bottom:20px} .design-relaunch .mobile-social .social-link{width:44px;height:44px;background:var(--ink-700);font-size:24px} /* Hauptnavigation */ .design-relaunch .nav-list{gap:2px} .design-relaunch .main-nav .nav-link{ display:flex;align-items:center;gap:10px;padding:10px 13px; font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.07em;text-transform:uppercase; color:var(--fg-2);border-radius:0; } .design-relaunch .main-nav .nav-link:hover, .design-relaunch .main-nav .nav-item.active > .nav-link{color:#fff} .design-relaunch .nav-item.active > .nav-link::after{display:none} /* Unterstrich fährt beim Überfahren von links auf; die aktive Seite trägt ihn dauerhaft */ .design-relaunch .main-nav > .nav-list > .nav-item > .nav-link::after{ content:'';display:block;position:absolute;left:13px;right:auto;bottom:1px;width:0;height:2px;background:var(--brand);border-radius:0; transition:width .3s var(--ease-out); } .design-relaunch .main-nav > .nav-list > .nav-item > .nav-link:hover::after, .design-relaunch .main-nav > .nav-list > .nav-item.active > .nav-link::after{width:calc(100% - 26px)} .design-relaunch .main-nav > .nav-list > .nav-area-agrar > .nav-link::after{background:var(--agrar)} .nav-icon{display:inline-block;flex:none;width:19px;height:19px;color:var(--brand);margin-top:-2px} .nav-icon svg{display:block;width:100%;height:100%} .nav-area-agrar .nav-icon{color:var(--agrar)} .design-relaunch .nav-chevron{display:none} .design-relaunch .main-nav .nav-dropdown{ left:0;top:100%;min-width:264px;padding:8px;border-radius:0; background:var(--ink-800);border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.55); } .design-relaunch .main-nav .nav-dropdown .nav-link{ font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;color:var(--fg-2);padding:10px 12px; } .design-relaunch .main-nav .nav-dropdown .nav-link:hover{background:var(--ink-700);color:#fff} .design-relaunch .main-nav .nav-dropdown .nav-item.active > .nav-link{color:var(--brand)} .design-relaunch .main-nav .nav-area-agrar .nav-dropdown .nav-item.active > .nav-link{color:var(--agrar)} .design-relaunch .main-nav .nav-dropdown .nav-dropdown{left:100%;top:0} .design-relaunch .main-nav .nav-item:focus-within > .nav-dropdown{display:block} /* Header-Aktionen */ .design-relaunch .header-actions{gap:8px;margin-left:auto} .design-relaunch .header-action-btn{ width:auto;min-width:44px;height:44px;padding:0 14px;gap:10px;border-radius:0; background:transparent;border:2px solid var(--area);color:var(--area); font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase; transition:background .3s var(--ease-out),color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .3s var(--ease-out); } .design-relaunch .header-action-btn .bi{font-size:16px;color:inherit} .design-relaunch .header-action-btn:is(:hover,:focus-visible){background:var(--area);color:var(--ink-950);transform:translateY(-1px);box-shadow:0 0 20px var(--area-glow)} .header-action-label{display:none;white-space:nowrap} .design-relaunch .nav-toggle{margin-left:0;z-index:1004} .design-relaunch .nav-toggle span{background:#fff} /* Mobile Navigation (dunkel) */ .design-relaunch .mobile-nav{z-index:1002;top:var(--header-h);height:calc(100dvh - var(--header-h));padding:18px 22px 28px;background:var(--ink-950);color:var(--fg);box-shadow:none} .design-relaunch .mobile-overlay{z-index:999} .design-relaunch .mobile-nav .nav-list{gap:0} .design-relaunch .mobile-nav .nav-link{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px} .design-relaunch .mobile-nav .nav-dropdown{padding-left:22px;background:none;border:0} .design-relaunch .mobile-nav .nav-dropdown .nav-link{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:0;text-transform:none;color:var(--fg-2);border-bottom:1px solid var(--line)} .design-relaunch .mobile-nav .nav-item.active > .nav-link{color:var(--brand)} .design-relaunch .mobile-nav .nav-area-agrar.active > .nav-link{color:var(--agrar)} .design-relaunch .mobile-submenu-toggle::after{border-color:var(--fg-muted)} .design-relaunch .mobile-nav-footer{border-top-color:var(--line)} .design-relaunch .mobile-nav .nav-item-standorte > .nav-link{justify-content:center;border:0;background:var(--brand);color:var(--ink-950);font-size:15px;letter-spacing:.09em} .design-relaunch .mobile-nav .nav-item-standorte > .nav-link:hover{background:var(--brand-bright);color:var(--ink-950)} .design-relaunch .mobile-phone-btn{background:transparent;border:2px solid var(--area);color:var(--area);font-family:var(--display)} .design-relaunch .mobile-phone-btn .bi{color:inherit} .design-relaunch .mobile-phone-btn:is(:hover,:focus-visible){background:var(--area);color:var(--ink-950)} /* -------------------------------------------------------------------------- Hero – Bild rechts -------------------------------------------------------------------------- */ .design-relaunch .hero, .design-relaunch .hero-half{ position:relative;min-height:clamp(460px,46vw,600px);margin:0; display:flex;align-items:center;padding:clamp(56px,7vw,96px) 0; background:var(--ink-900);background-image:none;box-shadow:none;overflow:hidden;isolation:isolate; } .design-relaunch .hero::before, .design-relaunch .hero-relaunch::before, .design-relaunch .hero-overlay::before{display:none} .design-relaunch .hero::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-media{position:absolute;inset:0 0 0 auto;width:min(60%,960px);z-index:-1} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center center)} .hero-media::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,var(--ink-900) 0%,rgba(42,42,42,.62) 18%,rgba(42,42,42,0) 52%), linear-gradient(0deg,rgba(42,42,42,.42) 0%,rgba(42,42,42,0) 42%); } .design-relaunch .hero .container{position:relative;z-index:2} .design-relaunch .hero-content, .design-relaunch .hero-content.hero-magazine{max-width:720px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none} .design-relaunch .hero-pretitle{margin-bottom:22px} .design-relaunch .hero h1{color:var(--fg);margin:0 0 22px;text-shadow:none;white-space:pre-line} .design-relaunch .hero-subtitle{font-size:var(--type-lead);line-height:1.6;color:var(--fg-2);max-width:46ch;margin:0} .design-relaunch .hero-actions{margin-top:34px;gap:12px;justify-content:flex-start;flex-direction:row} .design-relaunch .hero-actions .btn{width:auto} .design-relaunch .hero.has-subnav{padding-bottom:calc(clamp(56px,7vw,96px) + 56px)} .hero-subnav{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(20,20,20,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line)} .hero-subnav .container{display:flex;align-items:stretch;gap:0;min-height:56px} .hero-subnav-label{flex:none;display:flex;align-items:center;gap:10px;padding-right:22px;margin-right:10px;border-right:1px solid var(--line);font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--area)} .hero-subnav-label::before{content:'';display:inline-block;width:7px;height:13px;background:var(--area);transform:skewX(-45deg)} .hero-subnav-label:hover{color:#fff} .hero-subnav ul{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none} .hero-subnav ul::-webkit-scrollbar{display:none} .hero-subnav li a{position:relative;display:flex;align-items:center;height:100%;min-height:52px;padding:0 11px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap} .hero-subnav li a:hover{color:#fff} .hero-subnav .is-current a{color:#fff} .hero-subnav li a::after{content:'';position:absolute;left:12px;bottom:0;width:0;height:3px;background:var(--area);transition:width .3s var(--ease-out)} .hero-subnav li a:hover::after,.hero-subnav .is-current a::after{width:calc(100% - 24px)} /* Schausonntag-Hinweis im Hero */ .design-relaunch .schausonntag-banner{ margin-top:26px;padding:13px 20px;border-radius:0; background:var(--brand);color:var(--ink-950); font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase; box-shadow:none;animation:none; } .design-relaunch .schausonntag-banner:hover{transform:translateY(-1px);box-shadow:0 0 24px var(--area-glow);background:var(--brand-bright);color:var(--ink-950)} /* Hero-Zweiteiler (Startseite): zwei Welten, ein Partner */ .design-relaunch .hero-dual{padding:0;min-height:0;display:block} .hero-dual .hero-head{position:relative;min-height:clamp(440px,42vw,560px);display:flex;align-items:center;padding:clamp(56px,6vw,88px) 0} .hero-dual .hero-head > .hero-media{height:auto} .design-relaunch .hero-dual .hero-content{max-width:720px} /* Zwei Karten im Seitenraster: Bild gleichmäßig abgedunkelt, Titel und Button zentriert, Bereichsfarbe (Orange/Grün) nur als Akzent – Linie oben, Kicker, Button-Rahmen */ .hero-panels{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:clamp(32px,4vw,56px) var(--content-inset);position:relative;z-index:2;background:var(--ink-950)} .hero-panel{ position:relative;min-height:clamp(320px,27vw,400px);display:flex;align-items:center;justify-content:center; padding:48px 40px;color:var(--fg);text-align:center; overflow:hidden;isolation:isolate; transition:transform .3s var(--ease-out),filter .3s var(--ease-out); } .hero-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease-out)} .hero-panel::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(42,42,42,.6);transition:background .4s} .hero-panel::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--area);z-index:1} .hero-panel:hover img{transform:scale(1.045)} .hero-panel:hover{color:var(--fg);transform:translateY(-4px);filter:drop-shadow(0 0 18px var(--area-glow)) drop-shadow(0 16px 32px rgba(0,0,0,.35))} .hero-panel:hover::before{background:rgba(42,42,42,.5)} .hero-panel[data-tone="agrar"]{ --area:var(--agrar);--area-bright:var(--agrar-bright);--area-glow:rgba(164,183,104,.5); --button-fg:var(--area);--button-line:var(--area);--button-hover-bg:var(--area); --button-glow:0 0 24px var(--area-glow),0 4px 16px rgba(0,0,0,.3); } .hero-panel-body{display:flex;flex-direction:column;align-items:center;max-width:560px;margin:0 auto} .hero-panel .kicker{margin-bottom:16px} .design-relaunch .hero-panel h2{font-size:clamp(36px,3.8vw,56px);line-height:1;margin:0 0 28px;color:var(--fg);white-space:pre-line;text-shadow:0 2px 12px rgba(0,0,0,.35)} .hero-panel .btn{pointer-events:none;gap:10px} .hero-panel .btn svg{width:22px;height:22px;flex:none;color:var(--area);transition:color .3s var(--ease-out)} .hero-panel:is(:hover,:focus-visible) .btn{background:var(--area);border-color:var(--area);color:var(--ink-950);box-shadow:var(--button-glow)} .hero-panel:is(:hover,:focus-visible) .btn svg{color:var(--ink-950)} /* -------------------------------------------------------------------------- Faktenleiste (Statistiken) -------------------------------------------------------------------------- */ /* Faktenleiste: Titel zentriert, je Kennzahl Symbol → Zahl → Text */ .design-relaunch .section-stats{--section-pad:clamp(56px,7vw,88px);padding:var(--section-pad) 0;background:var(--ink-950);border:0;overflow:visible} .design-relaunch .section-stats::before{display:none} .design-relaunch .section-stats .container{display:block} .design-relaunch .section-stats .section-header{display:block;text-align:center;max-width:none;margin:0 0 clamp(36px,4vw,52px);padding:0;border:0} .design-relaunch .section-stats .section-pretitle{margin-bottom:12px} .design-relaunch .section-stats h2{font-size:clamp(30px,3.2vw,44px);line-height:1.05;margin:0;color:var(--fg);text-transform:none;letter-spacing:-.03em;max-width:none} .design-relaunch .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(16px,2.5vw,40px);text-align:center;border:0} .design-relaunch .stat-item{display:flex;flex-direction:column;align-items:center;padding:0;border:0;transition:transform .3s var(--ease-out)} .design-relaunch .stat-item:hover{transform:translateY(-4px)} .stat-icon{display:block;margin:0 0 18px;color:var(--area);font-size:56px;line-height:1;transition:transform .3s var(--ease-out),filter .3s var(--ease-out)} .stat-icon .bi{display:block;line-height:1} .design-relaunch .stat-item:hover .stat-icon{transform:scale(1.08);filter:drop-shadow(0 0 12px var(--area-glow))} .design-relaunch .stat-number{font-family:var(--display);font-weight:900;font-size:clamp(44px,4.2vw,64px);line-height:1;letter-spacing:-.03em;color:var(--area);margin:0 0 8px;transition:text-shadow .3s} .design-relaunch .stat-item:hover .stat-number{text-shadow:0 0 24px var(--area-glow)} .design-relaunch .stat-label{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)} .design-relaunch .stat-sublabel{font-size:14px;line-height:1.45;color:var(--fg-2);margin-top:6px;white-space:pre-line} /* -------------------------------------------------------------------------- Bild/Text-Module -------------------------------------------------------------------------- */ .design-relaunch .split-layout{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto; grid-template-areas:"heading image" "body image";gap:22px clamp(40px,6vw,96px);align-items:center; } .design-relaunch .split-reverse{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"image heading" "image body"} .design-relaunch .split-heading{grid-area:heading;align-self:end;padding-top:26px;border-top:1px solid var(--sline);order:unset} .design-relaunch .split-heading h2{margin:0;white-space:pre-line} .design-relaunch .split-body{grid-area:body;align-self:start;order:unset} .design-relaunch .split-body p{font-size:var(--type-body);line-height:1.6;color:var(--sfg-2);max-width:58ch} .design-relaunch .split-body .btn{margin-top:26px} .design-relaunch .split-image{grid-area:image;order:unset;border-radius:0;box-shadow:none;overflow:hidden;clip-path:none} .design-relaunch .split-image img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:0;box-shadow:none;transition:none;transform:none} .design-relaunch .split-image:hover img{transform:none} /* Bereichsübersicht (Baufachzentrum / Agrar): nummerierte Kapitel */ .design-relaunch .section-area{--section-pad:clamp(56px,7vw,96px);background:var(--ink-800);padding:var(--section-pad) 0} .design-relaunch .section-area.area-alt{background:var(--ink-900)} .design-relaunch .section-area .container{position:relative} .area-index{ display:block;margin:0 0 12px; font-family:var(--display);font-weight:900;font-size:clamp(64px,6.5vw,96px);line-height:.85;letter-spacing:-.04em; color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3); } .design-relaunch .section-area .split-heading{padding-top:22px} /* Service-Badges (Aufmaß, Montage …) */ .service-badges{display:inline-flex;flex-wrap:wrap;gap:0;margin-top:30px;background:var(--raised);color:var(--sfg);padding:0;border-radius:0} .service-badges span{display:inline-flex;align-items:center;padding:14px 20px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase} .service-badges span + span{border-left:1px solid var(--sline);padding-left:20px} .service-badges .bi{margin-right:10px;font-size:20px;color:var(--area)} /* Feature-Kacheln (Icon-Links): rechteckige Fläche, Symbol groß und zentriert, Rahmen und Glow beim Überfahren. */ .feature-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:44px} .feature-links a{ position:relative;isolation:isolate; display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;text-align:center; padding:30px 18px 26px;min-height:150px;background:none;color:var(--sfg);border:0;border-radius:0; font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.15; transition:transform .3s var(--ease-out),filter .3s var(--ease-out); } .feature-links a::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--raised);transition:background .25s} .feature-links a::after{ content:'';position:absolute;inset:0;z-index:-1;border:2px solid var(--area);opacity:0;transition:opacity .25s; } .feature-links .bi{display:block;width:auto;height:auto;font-size:46px;line-height:1;color:var(--area);background:none;border-radius:0;transition:transform .3s var(--ease-out),filter .3s var(--ease-out),color .25s} .feature-index{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px var(--area);transition:transform .3s var(--ease-out),filter .3s var(--ease-out)} .feature-links a:hover{color:var(--sfg);transform:translateY(-4px);filter:drop-shadow(0 0 14px var(--area-glow)) drop-shadow(0 12px 24px rgba(0,0,0,.25))} .feature-links a:hover::before{background:var(--raised-hover)} .feature-links a:hover::after{opacity:1} .feature-links a:hover .bi,.feature-links a:hover .feature-index{transform:scale(1.1);filter:drop-shadow(0 0 10px var(--area-glow))} .feature-links a:hover .bi{color:var(--area-bright)} .feature-links a:hover .feature-index{-webkit-text-stroke-color:var(--area-bright)} /* -------------------------------------------------------------------------- Neuigkeiten – Editorial (volle Breite, dunkel / Papier im Wechsel) -------------------------------------------------------------------------- */ .design-relaunch .section-news{padding:clamp(64px,8vw,112px) 0} .design-relaunch .section-news.news-variant-editorial{--section-pad:0px;padding:0;background:none} .news-variant-editorial > .container{max-width:none !important;padding:0 !important} .news-variant-editorial > .container > .section-header{margin:0;padding:64px var(--content-inset) 0} .news-variant-editorial .news-grid{display:block;gap:0} .design-relaunch .news-variant-editorial .news-card{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto;gap:20px clamp(40px,6vw,96px); align-items:center;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;transform:none; padding:clamp(64px,8vw,104px) var(--content-inset);background:var(--paper); } .design-relaunch .news-variant-editorial .news-card:nth-child(even){background:var(--ink-800)} .design-relaunch .news-variant-editorial .news-card-header{grid-column:1;grid-row:1;align-self:end;padding-top:26px;border-top:1px solid var(--sline)} .design-relaunch .news-variant-editorial .news-card-body{grid-column:1;grid-row:2;align-self:start;padding:0} .design-relaunch .news-variant-editorial .news-card-image{grid-column:2;grid-row:1 / 3;margin:0;align-self:center;border-radius:0;overflow:hidden} .design-relaunch .news-variant-editorial .news-card:nth-child(even) .news-card-header, .design-relaunch .news-variant-editorial .news-card:nth-child(even) .news-card-body{grid-column:2} .design-relaunch .news-variant-editorial .news-card:nth-child(even) .news-card-image{grid-column:1} .design-relaunch .news-variant-editorial .news-card-title{font-size:clamp(32px,3.6vw,50px);line-height:1.02;color:var(--sfg);margin:0} .design-relaunch .news-variant-editorial .news-card-body p{color:var(--sfg-2);font-size:var(--type-body);line-height:1.6;margin:0 0 26px;max-width:58ch} .design-relaunch .news-variant-editorial .news-card-image img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:0;box-shadow:none;transform:none} .design-relaunch .news-variant-editorial .news-card-meta{color:var(--sfg-muted);margin-top:10px} .design-relaunch .news-variant-editorial .news-card-meta .bi{color:var(--area)} .news-variant-editorial .news-card-caption{font-size:12px;padding-top:8px;color:var(--sfg-muted)} .design-relaunch .news-card-body .btn{margin-top:0} /* Standard-News (Karten) */ .design-relaunch .news-card{background:var(--raised);border:0;border-radius:0;box-shadow:none;padding:32px} .design-relaunch .news-card-title{color:var(--sfg);font-size:var(--type-card-title)} .design-relaunch .news-card-image{border-radius:0} .design-relaunch .news-card-meta{color:var(--sfg-muted)} .design-relaunch .news-card-body p{color:var(--sfg-2)} .design-relaunch .news-variant-c .news-card{border-left:0} /* -------------------------------------------------------------------------- Karten -------------------------------------------------------------------------- */ .design-relaunch .cards-grid{gap:10px} .design-relaunch .card{ position:relative;background:var(--raised);border:0;border-radius:0;padding:32px 28px 30px;box-shadow:none; transition:background .25s; } .design-relaunch .card::before{display:none} .design-relaunch .card:hover{transform:none;box-shadow:none;border:0;background:var(--raised-hover)} .design-relaunch .card-icon{width:auto;height:auto;background:none;border-radius:0;color:var(--area);margin-bottom:22px} .design-relaunch .card:hover .card-icon{background:none;color:var(--area)} .design-relaunch .card-icon .bi{font-size:34px;line-height:1} .design-relaunch .card h3{font-size:var(--type-card-title);margin:0 0 10px;color:var(--sfg)} .design-relaunch .card strong{display:block;margin-bottom:8px;color:var(--area);font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase} .design-relaunch .card p{font-size:var(--type-small);line-height:1.6;color:var(--sfg-2)} .design-relaunch .card .btn{margin-top:22px} .design-relaunch .card-department .department-contact{border-top-color:var(--sline)} .design-relaunch .department-phone,.design-relaunch .department-email{color:var(--sfg-2)} .design-relaunch .department-phone .bi,.design-relaunch .department-email .bi{color:var(--area)} /* Portal-Karten (fotografische Einstiege) */ .design-relaunch .section-cards.cards-portal{--section-pad:6px;padding:6px 0 0;background:var(--ink-900)} .design-relaunch .cards-portal .cards-grid{grid-template-columns:1fr 1fr;gap:6px} .design-relaunch .cards-portal .card{ clip-path:none; min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left; padding:40px;background:var(--ink-800);color:var(--fg);overflow:hidden; } .cards-portal .card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)} .design-relaunch .cards-portal .card:hover > img{transform:scale(1.045)} .design-relaunch .cards-portal .card::before{content:'';display:block;position:absolute;inset:0;height:100%;z-index:1;opacity:1;border-radius:0;background:linear-gradient(0deg,rgba(42,42,42,.86) 0%,rgba(42,42,42,.35) 55%,rgba(42,42,42,.06) 100%)} .cards-portal .card > :not(img){position:relative;z-index:2} .design-relaunch .cards-portal .card h3{font-size:clamp(30px,3vw,44px);line-height:1;color:var(--fg);max-width:460px;white-space:pre-line;margin-bottom:24px} .design-relaunch .cards-portal .card{--button-fg:var(--area)} /* Produkt-Karten */ .design-relaunch .cards-products{--section-pad:0px;padding-top:0} .design-relaunch .cards-products .cards-grid{gap:32px} .design-relaunch .cards-products .card{padding:0;background:none;clip-path:none;text-align:left} .design-relaunch .cards-products .card:hover{background:none} .cards-products .card > img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:0;box-shadow:none;margin-bottom:22px} .design-relaunch .cards-products .card h3{color:var(--sfg);font-size:var(--type-card-title)} .design-relaunch .cards-products .card p{font-size:var(--type-small);margin-top:10px} /* -------------------------------------------------------------------------- CTA-Fläche – Bereichsfarbe oder helle Fläche mit Akzenten -------------------------------------------------------------------------- */ .design-relaunch .section-cta{padding:clamp(64px,8vw,112px) 0} /* Auf Orange steht der Text in Anthrazit (#343434), nicht im Header-Ton – wirkt weicher */ .design-relaunch .section-cta.cta-band{--section-pad:0px;padding:0;background:var(--area);color:var(--ink-800)} .design-relaunch .section-cta.cta-band > .container{max-width:none;padding:0 0 0 var(--content-inset)} .design-relaunch .cta-band .cta-box{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:0 clamp(40px,6vw,96px);align-items:stretch; padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;position:relative; } .design-relaunch .cta-band .cta-box::after{display:none} .design-relaunch .cta-band .cta-content{padding:clamp(56px,7vw,96px) 0;align-self:center;max-width:none;position:relative;z-index:1} .design-relaunch .cta-band h2{color:var(--ink-800);margin:0 0 16px;max-width:16ch} .design-relaunch .cta-band p{color:rgba(52,52,52,.85);font-size:var(--type-body);line-height:1.6;max-width:56ch} .design-relaunch .cta-band strong{color:var(--ink-800)} .design-relaunch .cta-band .cta-actions{margin-top:32px;gap:12px;flex-wrap:wrap;justify-content:flex-start} .design-relaunch .cta-band:not(.bg-light){ --button-bg:var(--ink-800);--button-fg:var(--fg);--button-line:var(--ink-800); --button-hover-bg:var(--ink-700);--button-hover-fg:var(--fg);--button-glow:0 4px 16px rgba(0,0,0,.25); } /* Helle Variante: vorhandenes Papier und Markenorange, Akzente nur auf Strich und Buttons. */ .design-relaunch .section-cta.cta-band.bg-light{background:var(--paper);color:var(--pfg)} .design-relaunch .cta-band.bg-light .cta-content::before{content:'';display:block;width:64px;height:4px;margin-bottom:24px;background:var(--area);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)} .design-relaunch .cta-band.bg-light h2,.design-relaunch .cta-band.bg-light strong{color:var(--pfg)} .design-relaunch .cta-band.bg-light p,.design-relaunch .cta-band.bg-light li{color:var(--pfg-2)} .design-relaunch .cta-band.bg-light li::before{background:var(--area)} .design-relaunch .cta-band .cta-image{ display:block;position:relative;inset:auto;width:100%;height:auto;min-height:360px;align-self:stretch; border-radius:0;overflow:hidden;opacity:1;transform:none;mask-image:none;-webkit-mask-image:none;clip-path:none; } .cta-band .cta-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .design-relaunch .schausonntag-cta-warning{background:var(--ink-950);color:var(--fg);border-radius:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em} .design-relaunch .schausonntag-exclusion-alert{background:var(--ink-900);color:var(--fg);border-radius:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em} /* -------------------------------------------------------------------------- Sortiment & Detail-Dialoge -------------------------------------------------------------------------- */ .assortment-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(32px,5vw,88px);align-items:start} .assortment-intro{padding-top:26px;border-top:1px solid var(--sline)} .design-relaunch .assortment-intro h2{color:var(--sfg);margin:0 0 20px;white-space:pre-line} .assortment-intro p{color:var(--sfg-2)} .assortment-intro .btn{margin-top:28px} .assortment-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start} .assortment-item{ position:relative;display:block;width:100%;padding:16px 18px 16px 40px;border:0;border-radius:0; background:var(--raised);color:inherit;text-align:left;font:inherit; transition:background .2s,color .2s; } button.assortment-item{cursor:pointer} .assortment-item::before{ content:'';position:absolute;left:20px;top:22px;width:7px;height:13px; background:var(--area);transform:skewX(-45deg);border-radius:0;font-size:0;line-height:0;color:transparent; } .design-relaunch .assortment-item h3{font-size:20px;line-height:1.15;margin:0;color:inherit} .assortment-item p{font-size:14px;line-height:1.4;margin:4px 0 0;color:var(--sfg-muted)} button.assortment-item:hover,a.assortment-item:hover{background:var(--area);color:var(--ink-950)} button.assortment-item:hover p,a.assortment-item:hover p{color:rgba(34,34,34,.75)} button.assortment-item:hover::before,a.assortment-item:hover::before{background:var(--ink-950)} .detail-dialog{ width:min(1120px,calc(100% - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0; border:0;border-top:6px solid var(--area);border-radius:0; background:var(--paper-3);color:var(--pfg);box-shadow:0 40px 100px rgba(0,0,0,.6);overscroll-behavior:contain; } .detail-dialog::backdrop{background:rgba(34,34,34,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .detail-content{padding:52px} .detail-content h2{margin:0 0 26px;color:var(--pfg);font-size:clamp(30px,3vw,44px)} .detail-content p,.detail-content li{color:var(--pfg-2)} .detail-content .content-wrap{max-width:none} .detail-close{ position:sticky;float:right;top:12px;margin:12px 12px -56px 0;width:44px;height:44px;z-index:2; border:0;border-radius:0;background:var(--ink-900);color:var(--fg);font-size:28px;line-height:1;cursor:pointer; } .detail-close:hover{background:var(--area);color:var(--ink-950)} .detail-image{max-height:500px;object-fit:contain;margin:28px auto} .detail-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-top:36px;text-align:left} .detail-products img{height:240px;width:100%;object-fit:contain;margin-bottom:18px} .detail-products h3{font-size:22px;margin-bottom:6px} .detail-products .btn{margin-top:14px} .detail-table-wrap{overflow:auto;margin:30px 0} .detail-table{border-collapse:collapse;width:100%;min-width:600px;table-layout:fixed} .detail-table th,.detail-table td{padding:14px 14px;border-bottom:1px solid var(--pline);text-align:left;font-size:15px;line-height:1.45;vertical-align:top;hyphens:auto;overflow-wrap:break-word} .detail-table th[scope="row"]{width:17%;font-weight:700;color:var(--pfg)} .detail-table thead{background:var(--paper)} .detail-comparisons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:30px} .detail-comparisons article{min-width:0} .detail-comparisons article + article{border-left:1px solid var(--pline);padding-left:24px} .detail-comparisons img{width:100%;height:210px;object-fit:contain} .detail-comparisons h3{text-align:left;margin:12px 0 22px;font-size:24px} .detail-comparisons dl > div{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:12px} .rating{display:flex;gap:3px} .rating span{width:16px;height:16px;border:0;border-radius:0;background:var(--paper-2);transform:skewX(-45deg)} .rating .filled{background:var(--area)} /* -------------------------------------------------------------------------- Galerie, Partner, Werte, Zeitleiste -------------------------------------------------------------------------- */ .design-relaunch .galerie-item{border-radius:0} .design-relaunch .galerie-item img{transition:transform 1s var(--ease-out)} .design-relaunch .section-galerie.gallery-strip{--section-pad:0px;padding:0} .design-relaunch .gallery-strip > .container{max-width:none;padding:0} .gallery-strip .galerie-grid{display:flex;gap:6px;overflow:auto;scroll-snap-type:x mandatory} .gallery-strip .galerie-item{flex:1 0 calc(33.333% - 4px);scroll-snap-align:start;aspect-ratio:4 / 3;clip-path:none} .gallery-strip .galerie-item img{width:100%;height:100%;object-fit:cover} .design-relaunch .section-partners{background:var(--paper-2)} .design-relaunch .partner-item{background:var(--paper-3);border:0;border-radius:0;box-shadow:none} .design-relaunch .partner-info h3{font-size:var(--type-card-title)} .design-relaunch .partner-info p{color:var(--sfg-2)} .design-relaunch .section-values{background:var(--ink-800)} .design-relaunch .section-values .section-pretitle{color:var(--area)} .design-relaunch .values-grid{gap:10px} .design-relaunch .value-card{padding:32px 28px;background:var(--ink-700);gap:14px} .design-relaunch .value-icon{font-size:34px;color:var(--area);margin-bottom:6px} .design-relaunch .value-card h3{font-size:var(--type-card-title);color:var(--fg)} .design-relaunch .value-card p{color:var(--fg-2);font-size:var(--type-small)} .design-relaunch .timeline::before{background:var(--sline)} .design-relaunch .timeline-year{background:var(--ink-900);color:var(--fg);font-family:var(--display);font-weight:800;border-radius:0} .design-relaunch .timeline-content{background:var(--paper-3);border:0;border-radius:0;box-shadow:none} .design-relaunch .timeline-text h3{font-size:var(--type-compact-title)} .design-relaunch .timeline-text p{color:var(--sfg-2)} /* -------------------------------------------------------------------------- Karriere: Jobs, Ausbildung, Zertifikate -------------------------------------------------------------------------- */ .design-relaunch .jobs-contact{color:var(--sfg-2);text-align:left;margin:0 0 32px;max-width:62ch} .design-relaunch .jobs-filter{justify-content:flex-start;margin-left:0;max-width:none} .design-relaunch .jobs-list{margin:0;max-width:960px} .design-relaunch .intro-text{text-align:left;margin:0;max-width:62ch;font-size:var(--type-lead);line-height:1.6;color:var(--sfg-2)} .design-relaunch .jobs-filter-btn{padding:13px 20px} .design-relaunch .jobs-filter-btn.active{box-shadow:none;transform:none} .design-relaunch .job-item{background:var(--paper-3);border:0;border-radius:0} .design-relaunch .job-item:hover,.design-relaunch .job-item.open{box-shadow:none;border:0;background:#fff} .design-relaunch .job-title{font-size:var(--type-compact-title);color:var(--pfg)} .design-relaunch .job-type{margin:0;font-size:12px;padding:0} .design-relaunch .job-type::before{content:none} .design-relaunch .job-intro,.design-relaunch .job-actions{border-color:var(--pline)} .design-relaunch .job-section h5{color:var(--area);font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase} .design-relaunch .job-section li::before{background:var(--area);border-radius:0;width:5px;height:9px;transform:skewX(-45deg);top:.5em} .design-relaunch .ausbildung-card{background:var(--paper-3);border:0;border-radius:0} .design-relaunch .ausbildung-card:hover{box-shadow:none;border:0;background:#fff} .design-relaunch .ausbildung-card-header .bi{color:var(--area);font-size:30px} .design-relaunch .ausbildung-card-header h3{font-size:var(--type-compact-title);text-transform:none;letter-spacing:-.025em} .design-relaunch .ausbildung-fach{color:var(--area);font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase} .design-relaunch .ausbildung-card li::before{background:var(--area);border-radius:0;width:5px;height:9px;transform:skewX(-45deg);top:.5em} .design-relaunch .cert-card{background:var(--paper-3);border:0;border-radius:0} .design-relaunch .cert-card:hover{transform:none;box-shadow:none;border:0} .design-relaunch .cert-image{background:var(--paper-2);border:0} .design-relaunch .cert-body h3{font-size:18px} /* -------------------------------------------------------------------------- Standorte & Kontakt – dunkle Fläche. Je Standort eine Karte: Lageplan links, rechts der Kopf (Bereich, Name, Live-Status) und darunter Kontakt | Öffnungszeiten als eine Einheit, nur durch eine Haarlinie getrennt. -------------------------------------------------------------------------- */ .design-relaunch .section-locations, .design-relaunch .kt-section{ --sfg:var(--fg);--sfg-2:var(--fg-2);--sfg-muted:var(--fg-muted);--sline:var(--line); --raised:var(--ink-800);--raised-hover:var(--ink-700); --button-fg:var(--area); color:var(--fg); } .design-relaunch .section-locations{background:var(--ink-900);padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,112px)} .design-relaunch .section-locations .container{padding:0 var(--page-gutter)} .location-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .location-jump a{ flex:1 1 200px;display:flex;flex-direction:column;gap:2px;padding:16px 18px; background:var(--ink-800);color:var(--fg);border-top:3px solid transparent; transition:background .2s,border-color .2s,transform .3s var(--ease-out); } .location-jump-name{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.1;letter-spacing:-.01em} .location-jump-type{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)} .location-jump a:hover{background:var(--ink-700);color:var(--fg);border-top-color:var(--area);transform:translateY(-2px)} .location-jump a:hover .location-jump-type{color:var(--area)} .location-jump a.is-active{background:var(--ink-700);border-top-color:var(--area);transform:none} .location-jump a.is-active .location-jump-type{color:var(--area)} /* Mit JS zeigt die Liste nur den gewählten Standort */ .location-list.has-tabs .location:not(.is-active){display:none} .location-list{display:grid;gap:24px} .location{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:0; background:var(--ink-800);scroll-margin-top:110px; } .location-map{position:relative;min-height:360px;overflow:hidden;background:var(--ink-700)} .location-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8) brightness(.94)} .location-body{display:flex;flex-direction:column;padding:clamp(28px,3vw,40px) clamp(24px,3vw,44px)} .location-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)} .location-head .kicker{margin-bottom:10px} .design-relaunch .location-head h3{font-size:clamp(28px,2.6vw,40px);line-height:1;margin:0;color:var(--fg)} .location-status{ display:inline-flex;align-items:center;gap:10px;margin:0;padding:9px 14px 9px 12px; font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2; background:var(--ink-700);color:var(--fg-2); } .location-status::before{content:'';flex:none;width:10px;height:10px;background:#8d8d8a} .location-status.is-open{color:#8fd8a5} .location-status.is-open::before{background:#4fc978;box-shadow:0 0 10px rgba(79,201,120,.6)} .location-status.is-closed::before{background:#e06a5c} .location-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,3vw,44px)} .location-features{font-size:14px;line-height:1.5;color:var(--fg-muted);margin:0 0 18px} .location-details{display:grid;gap:10px;margin:0 0 26px;padding:0;list-style:none} .location-details li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--fg)} .location-details .bi{flex:none;color:var(--area);font-size:16px;margin-top:2px} .location-details a{color:var(--fg)} .location-details a:hover{color:var(--area)} .location-contact .btn .bi{color:var(--area)} .location-contact .btn:is(:hover,:focus-visible) .bi{color:inherit} .design-relaunch .location-hours{background:none;border-radius:0;padding:0 0 0 clamp(24px,3vw,44px);border-left:1px solid var(--line)} .design-relaunch .location-hours h4{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;margin:0 0 16px;color:var(--fg)} .location-hours h4 .bi{color:var(--area);font-size:16px} .hours-block + .hours-block{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)} .design-relaunch .hours-label{display:block;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--area);margin:0 0 8px} .design-relaunch .hours-list{list-style:none;margin:0;padding:0} .design-relaunch .hours-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:7px 0;font-size:14px;border-bottom:1px solid rgba(255,255,255,.08)} .design-relaunch .hours-list li:last-child{border-bottom:0} .design-relaunch .hours-day{font-weight:600;color:var(--fg);min-width:88px} .design-relaunch .hours-time{color:var(--fg-2);font-variant-numeric:tabular-nums;text-align:right} .design-relaunch .hours-note{flex-basis:100%;font-size:12px;color:var(--fg-muted);font-style:italic;text-align:left} /* Kontaktformular nach Flosbach-Vorbild: dunkle Felder, Symbol vor der Beschriftung, Fokusring in Orange */ .design-relaunch .kt-section{background:var(--ink-950);border-top:1px solid var(--line);padding:clamp(64px,8vw,112px) 0} .design-relaunch .kt-section .section-header{margin-bottom:clamp(32px,4vw,48px)} .design-relaunch .kt-section h2{font-size:var(--type-h2);color:var(--fg);margin:0} .design-relaunch .kt-wrap{max-width:760px} .design-relaunch .kt-form-group{margin-bottom:24px} .design-relaunch .kt-form-row{gap:24px} .design-relaunch .kt-form-group label{display:flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--fg-2);margin-bottom:8px} .design-relaunch .kt-form-group label .bi{font-size:14px;color:var(--area);opacity:.75} .design-relaunch .kt-required{color:var(--area)} .design-relaunch .kt-form-group input, .design-relaunch .kt-form-group textarea, .design-relaunch .kt-select-trigger{ padding:12px 16px;font-family:var(--body);font-size:16px;line-height:1.4;color:var(--fg); background:var(--ink-800);border:1px solid var(--ink-700);border-radius:0;box-shadow:none; transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out); } .design-relaunch .kt-form-group input::placeholder, .design-relaunch .kt-form-group textarea::placeholder{color:var(--fg-muted)} .design-relaunch .kt-form-group textarea{min-height:130px} .design-relaunch .kt-form-group input:focus, .design-relaunch .kt-form-group textarea:focus, .design-relaunch .kt-select-trigger:focus, .design-relaunch .kt-select.open .kt-select-trigger{outline:none;border-color:var(--area);box-shadow:0 0 0 3px var(--area-soft)} .design-relaunch .kt-form-group input:user-invalid, .design-relaunch .kt-select-invalid .kt-select-trigger{border-color:#e06a5c} .design-relaunch .kt-select-value.is-placeholder{color:var(--fg-muted)} .design-relaunch .kt-select-arrow{color:var(--fg-muted)} .design-relaunch .kt-select-dropdown{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:0;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:6px 0} .design-relaunch .kt-select-option{padding:10px 16px;font-size:15px;color:var(--fg-2)} .design-relaunch .kt-select-option:hover, .design-relaunch .kt-select-option.is-focused{background:var(--ink-700);color:var(--fg)} .design-relaunch .kt-select-option.is-selected{color:var(--area)} .design-relaunch .kt-checkbox-label{gap:10px;font-size:13px !important;line-height:1.5;color:var(--fg-muted) !important} .design-relaunch .kt-checkbox-label input[type="checkbox"]{width:18px;height:18px;margin-top:2px;accent-color:var(--area)} .design-relaunch .kt-checkbox-label a{color:var(--area)} .design-relaunch #kt-submit{padding:13px 32px} .design-relaunch .kt-success{color:var(--fg)} .design-relaunch .kt-success-icon{color:var(--area)} .design-relaunch .kt-success h3{color:var(--fg)} .design-relaunch .kt-success p{color:var(--fg-2)} /* Gemeinsame Formular-Typografie für Bewerbung, Agrarauftrag, Konto und Anfrage. Kontakt nutzt denselben Maßstab auf seiner dunklen Fläche. */ .design-relaunch .form-page-title{font-size:var(--type-h2);line-height:1.02;letter-spacing:-.03em;margin:0 0 24px} .design-relaunch :is(.bw-form-intro,.mz-form-intro,.fm-form-intro){font-size:var(--type-body);line-height:1.6;color:var(--sfg-2);margin-bottom:24px} .design-relaunch :is(#bw-form,#mz-form,#fm-form) h2{font-size:var(--type-compact-title);font-weight:800;line-height:1.3;letter-spacing:-.025em;text-transform:none;color:var(--sfg);margin-block:32px 20px;padding-top:24px} .design-relaunch :is(.bw-form-row,.mz-form-row,.fm-form-row,.anfrage-wrap .form-row){gap:24px} .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group){min-width:0;margin-bottom:24px} .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group) > label{font-family:var(--body);font-size:var(--type-label);font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--sfg-2);margin-bottom:8px} .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){ width:100%;min-width:0;padding:12px 16px;font-family:var(--body);font-size:16px;line-height:1.4; background:var(--paper-3);color:var(--pfg);border:1px solid var(--pline);border-radius:0; transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out); } .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group) :is(input,select,textarea):focus-visible{outline:none;border-color:var(--area);box-shadow:0 0 0 3px var(--area-soft)} .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group) :is(input,select,textarea):user-invalid{border-color:#e06a5c} .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group) :is(input,textarea)::placeholder{color:var(--pfg-muted)} .design-relaunch :is(.bw-form-group,.mz-form-group,.fm-form-group,.anfrage-wrap .form-group) :is(input[type="checkbox"],input[type="radio"]){accent-color:var(--area)} .design-relaunch .anfrage-wrap h2{font-size:var(--type-compact-title);line-height:1.3;letter-spacing:-.025em} .design-relaunch :is(#bw-submit,#mz-submit,#fm-submit,#anfrage-submit){padding:13px 32px;font-size:var(--type-button)} /* Die externe Energieberatung erhält dieselben Schriftrollen. !important ist hier wegen der mitgelieferten Anbieter-Styles erforderlich. */ .design-relaunch #eub-embed :is(h1,h2,h3,h4,h5,h6){font-family:var(--display) !important;font-weight:800 !important;line-height:1.2 !important} .design-relaunch #eub-embed h1{font-size:var(--type-h2) !important} .design-relaunch #eub-embed h2{font-size:var(--type-card-title) !important} .design-relaunch #eub-embed h3{font-size:var(--type-compact-title) !important} .design-relaunch #eub-embed :is(h4,h5,h6){font-size:var(--type-small) !important} .design-relaunch #eub-embed :is(p,li,td,th){font-family:var(--body) !important;font-size:var(--type-body) !important;line-height:1.6 !important} .design-relaunch #eub-embed :is(a,span,label){font-family:inherit !important} .design-relaunch #eub-embed :is(input,select,textarea){font-family:var(--body) !important;font-size:16px !important} .design-relaunch #eub-embed img{max-width:100%;height:auto} /* -------------------------------------------------------------------------- Footer – Standorte, Navigation, Marke, Rechtliches -------------------------------------------------------------------------- */ .design-relaunch .site-footer{position:relative;background:var(--ink-950);color:var(--fg-2);padding:0;border:0;overflow:hidden;isolation:isolate} .footer-deco{position:absolute;left:58%;bottom:0;width:min(16vw,220px);height:100%;background:rgba(255,255,255,.028);transform:skewX(-45deg);transform-origin:left bottom;pointer-events:none;z-index:-1} .design-relaunch .footer-grid{grid-template-columns:minmax(250px,1.5fr) repeat(4,minmax(0,1fr));gap:32px;padding-block:64px 60px} .footer-brand{min-width:0} .footer-brand-details{display:grid;gap:20px} .design-relaunch .footer-company{margin:0;color:var(--fg)} .footer-company-name{display:block;max-width:28ch;font-family:var(--display);font-size:16px;font-weight:700;line-height:1.4;text-wrap:balance} .footer-company-legal{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:var(--fg-muted);white-space:nowrap} .footer-contact{font-style:normal;font-size:14px;line-height:1.6} .design-relaunch .footer-address{margin:0;color:var(--fg-muted);font-size:14px;line-height:1.6} .footer-address span{display:block} .footer-contact-links{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} .design-relaunch .footer-brand .footer-contact-link{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;color:var(--fg-2);font-size:14px;line-height:1.5} .footer-contact-link .bi{color:var(--brand);flex-shrink:0} .footer-contact-link span{overflow-wrap:anywhere} .design-relaunch .footer-brand .footer-contact-link:hover{color:var(--fg)} .design-relaunch .site-footer h4{color:var(--fg);font-size:13px;letter-spacing:.16em;margin-bottom:16px;padding:0} .design-relaunch .site-footer h4::before{background:var(--brand)} .design-relaunch .footer-nav li{margin:0 0 6px} .design-relaunch .footer-nav a{position:relative;display:inline-block;font-size:14px;line-height:1.5;padding:0 0 2px;color:var(--fg-muted);gap:0} .design-relaunch .footer-nav a::before{display:none} .design-relaunch .footer-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--brand);transition:width .3s var(--ease-out)} .design-relaunch .footer-nav a:hover{color:#fff} .design-relaunch .footer-nav a:hover::after{width:100%} .footer-legal{background:var(--brand);color:var(--ink-800);padding:14px 0} .footer-legal .container{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase} .footer-legal p,.footer-legal a{color:var(--ink-800);margin:0} .footer-legal a:hover{text-decoration:underline;text-underline-offset:3px} .footer-legal nav{display:flex;gap:18px;flex-wrap:wrap} /* -------------------------------------------------------------------------- Bewegung -------------------------------------------------------------------------- */ [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(var(--i,0) * 45ms)} [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto !important} *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} [data-reveal]{opacity:1;transform:none} } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (min-width:1440px){ .header-action-label{display:inline} } @media (max-width:1180px){ .design-relaunch .header-inner{gap:16px} .design-relaunch .header-social .social-link{width:32px} .design-relaunch .logo-img{width:170px} .design-relaunch .nav-list{gap:0} .design-relaunch .main-nav .nav-link{padding-inline:10px;font-size:14px} .design-relaunch .footer-grid{gap:22px} } @media (max-width:1023px){ .design-relaunch{--header-h:72px;--header-height:72px} .header-social{display:none} .design-relaunch .header-actions{margin-left:auto} .design-relaunch .header-phone,.design-relaunch .header-location{display:flex} .design-relaunch .header-action-btn{padding:0 12px} /* Mobil/Tablet: Bild als abgedunkelte Fläche, Text darüber */ .design-relaunch .hero,.design-relaunch .hero-half{min-height:min(78vh,640px);flex-direction:column;justify-content:flex-end;align-items:stretch;padding:120px 0 48px} .hero-media{position:absolute;inset:0;width:100%;height:100%;margin:0} .hero-media::after{background:rgba(18,18,18,.6)} .hero-panel::before{background:rgba(18,18,18,.55)} .hero-panels{gap:16px;padding:24px var(--page-gutter)} .design-relaunch .hero-content{max-width:680px} .design-relaunch .hero.has-subnav{padding-bottom:0} .hero-subnav{position:relative;margin-top:40px;background:rgba(20,20,20,.55)} .hero-subnav .container{flex-wrap:wrap} .hero-subnav-label{min-height:48px;border-right:0;padding-right:0;margin-right:16px} .design-relaunch .hero-dual{padding:0;min-height:0;justify-content:flex-start} .hero-dual .hero-head{position:relative;min-height:min(70vh,560px);display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:100px 0 40px} .hero-dual .hero-head > .hero-media{height:100%} .hero-panel{min-height:300px;padding:40px 28px} .design-relaunch .stats-grid{grid-template-columns:repeat(3,1fr);gap:32px 20px} .design-relaunch .footer-grid{grid-template-columns:repeat(4,1fr)} .footer-brand{grid-column:1 / -1} .footer-brand-details{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:start} .location{grid-template-columns:1fr} .location-map{min-height:240px} .assortment-layout{grid-template-columns:1fr;gap:32px} .feature-links{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:767px){ .design-relaunch{--page-gutter:22px} .design-relaunch .section{--section-pad:52px;padding:52px 0} .design-relaunch .section-header{grid-template-columns:1fr;margin-bottom:32px} .design-relaunch .section-header h2,.design-relaunch .section-subtitle{grid-column:1} .design-relaunch .section-header:has(> .section-subtitle) h2{grid-row:auto} .design-relaunch{--type-h1:clamp(40px,11vw,52px);--type-h2:clamp(30px,8vw,38px)} .design-relaunch .hero,.design-relaunch .hero-half{min-height:min(72vh,560px);padding:96px 0 40px} .design-relaunch .hero-dual{padding:0;min-height:0} .hero-dual .hero-head{min-height:min(64vh,500px);padding:88px 0 32px} .design-relaunch .hero-actions{flex-direction:column} .design-relaunch .hero-actions .btn,.design-relaunch .schausonntag-banner{width:100%} .hero-panels{grid-template-columns:1fr;gap:12px;padding:16px var(--page-gutter)} .hero-panel{min-height:260px;padding:36px 24px} .design-relaunch .hero-panel h2{font-size:34px;margin-bottom:22px} .design-relaunch .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px 12px} .design-relaunch .stat-item:last-child:nth-child(odd){grid-column:1 / -1} .stat-icon{font-size:42px;margin-bottom:12px} .design-relaunch .stat-number{font-size:40px} .design-relaunch .split-layout,.design-relaunch .split-reverse{display:flex;flex-direction:column;gap:22px;align-items:stretch} .design-relaunch .split-heading{order:0} .design-relaunch .split-image{order:1} .design-relaunch .split-body{order:2} .design-relaunch .split-body .btn{margin-top:14px} .design-relaunch .news-variant-editorial .news-card{display:flex;flex-direction:column;gap:22px;padding:52px var(--page-gutter)} .design-relaunch .news-variant-editorial .news-card-header{order:0;align-self:auto} .design-relaunch .news-variant-editorial .news-card-image{order:1;align-self:stretch} .design-relaunch .news-variant-editorial .news-card-body{order:2} .design-relaunch .cards-grid,.design-relaunch .cards-portal .cards-grid{grid-template-columns:1fr} .design-relaunch .cards-portal .card{min-height:260px;padding:28px} .design-relaunch .section-cta.cta-band > .container{padding:0} .design-relaunch .cta-band .cta-box{grid-template-columns:1fr} .design-relaunch .cta-band .cta-image{order:-1;min-height:220px} .design-relaunch .cta-band .cta-content{padding:40px var(--page-gutter) 48px} .design-relaunch .cta-band .cta-actions{gap:10px;margin-top:26px} .assortment-list{grid-template-columns:1fr} .assortment-intro h2{white-space:normal} .detail-content{padding:44px 22px 26px} .detail-products{grid-template-columns:1fr 1fr;gap:20px} .detail-products img{height:150px} .detail-comparisons{grid-template-columns:1fr 1fr;gap:24px 14px} .detail-comparisons article + article{border:0;padding:0} .detail-comparisons img{height:150px} .detail-comparisons dl > div{flex-direction:column;align-items:flex-start;gap:4px} .detail-comparisons h3{font-size:20px} .feature-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:32px} .feature-links a{min-height:120px;padding:20px 14px 18px;gap:12px} .feature-links .bi{font-size:36px} .feature-index{font-size:32px} .service-badges{display:flex;flex-direction:column} .service-badges span + span{border-left:0;border-top:1px solid var(--sline);padding-left:20px} .gallery-strip .galerie-item{flex-basis:82%} .design-relaunch .content-center ul{columns:1} .design-relaunch .content-center{grid-template-columns:1fr;gap:12px} .design-relaunch .content-center .content-body{grid-column:1;padding-left:26px} .design-relaunch .content-center .content-body::before{width:9px} .hero-subnav{display:none} .design-relaunch .hero.has-subnav{padding-bottom:40px} .design-relaunch .content-center p{font-size:17px} .design-relaunch .section-area .split-heading{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start} .design-relaunch .section-area .split-heading .area-index{grid-row:1 / 3;font-size:48px;line-height:.9;margin:2px 0 0} .design-relaunch .section-area .split-heading .section-pretitle,.design-relaunch .section-area .split-heading h2{grid-column:2} .design-relaunch .footer-grid{grid-template-columns:1fr 1fr;gap:28px;padding-block:48px 44px} .footer-brand-details{grid-template-columns:1fr;gap:20px} .footer-legal .container{flex-direction:column;align-items:flex-start;gap:10px} .location-map{min-height:200px} .location-head{flex-direction:column;align-items:flex-start;gap:14px} .location-cols{grid-template-columns:1fr;gap:24px} .design-relaunch .location-hours{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)} .location-jump a{flex-basis:calc(50% - 4px)} } @media (max-width:380px){ .design-relaunch .header-inner{gap:12px} .design-relaunch .logo-img{width:140px} .design-relaunch{--type-h1:40px} } /* -------------------------------------------------------------------------- Ratgeber-Unterseiten (Thema › Kategorie): Artikel + Infospalte, FAQ -------------------------------------------------------------------------- */ .design-relaunch .breadcrumb{margin:0 0 clamp(28px,4vw,44px)} .design-relaunch .breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sfg-muted)} .design-relaunch .breadcrumb li{position:relative;padding-left:0} .design-relaunch .breadcrumb li+li::before{content:'';display:inline-block;width:5px;height:10px;margin:0 12px 0 0;background:var(--area);transform:skewX(-45deg);vertical-align:middle} .design-relaunch .breadcrumb a{color:var(--sfg-2);text-decoration:none} .design-relaunch .breadcrumb a:hover{color:var(--area)} .design-relaunch .breadcrumb li[aria-current]{color:var(--sfg)} .design-relaunch .ratgeber-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(40px,6vw,96px);align-items:start} .design-relaunch .ratgeber-article{max-width:none;min-width:0} .design-relaunch .ratgeber-article > p:first-child{font-size:clamp(19px,1.6vw,23px);line-height:1.5;font-weight:500;color:var(--sfg);max-width:62ch;margin:0 0 clamp(28px,4vw,40px)} .design-relaunch .ratgeber-article p,.design-relaunch .ratgeber-article ul,.design-relaunch .ratgeber-article ol{max-width:68ch} .design-relaunch .ratgeber-article h2{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:clamp(36px,5vw,56px) 0 16px;max-width:30ch} .design-relaunch .ratgeber-article h3{font-size:clamp(19px,1.6vw,22px);margin:28px 0 10px} .design-relaunch .ratgeber-article ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px} .design-relaunch .ratgeber-article li{position:relative;padding-left:22px;color:var(--sfg-2);line-height:1.55} .design-relaunch .ratgeber-article li::before{content:'';position:absolute;left:3px;top:.55em;width:6px;height:11px;background:var(--area);transform:skewX(-45deg)} .design-relaunch .ratgeber-article a{color:var(--area);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .design-relaunch .ratgeber-article a:hover{color:var(--sfg)} .design-relaunch .ratgeber-article strong{color:var(--sfg)} .design-relaunch .ratgeber-aside{position:sticky;top:calc(var(--header-h,96px) + 24px);display:grid;gap:14px} .design-relaunch .ratgeber-box{background:var(--paper-3);border:1px solid var(--sline);padding:clamp(22px,2.4vw,30px)} .design-relaunch .ratgeber-box .section-pretitle{margin-bottom:14px} .design-relaunch .ratgeber-box ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .design-relaunch .ratgeber-box li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--sfg-2)} .design-relaunch .ratgeber-box li::before{content:'';position:absolute;left:2px;top:.5em;width:6px;height:11px;background:var(--area);transform:skewX(-45deg)} .design-relaunch .ratgeber-box p{font-size:15px;line-height:1.55;margin:0 0 12px;color:var(--sfg-2)} .design-relaunch .ratgeber-box p strong{color:var(--sfg)} .design-relaunch .ratgeber-contact p a{color:var(--sfg);font-weight:600;text-decoration:none} .design-relaunch .ratgeber-contact p a .bi{color:var(--area);margin-right:4px} .design-relaunch .ratgeber-actions{display:grid;gap:10px;margin-top:18px} .design-relaunch .ratgeber-actions .btn{width:100%;justify-content:center} .design-relaunch .ratgeber-related li{padding-left:0} .design-relaunch .ratgeber-related li::before{display:none} .design-relaunch .ratgeber-related a{display:block;padding:9px 0;border-bottom:1px solid var(--sline);font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--sfg);text-decoration:none;transition:color .2s,padding-left .2s} .design-relaunch .ratgeber-related li:last-child a{border-bottom:0} .design-relaunch .ratgeber-related a:hover{color:var(--area);padding-left:6px} .design-relaunch .section-faq .section-header{margin-bottom:clamp(28px,4vw,40px)} .design-relaunch .faq-list{display:grid;gap:8px;max-width:960px} .design-relaunch .faq-item{background:var(--raised);border:1px solid var(--sline)} .design-relaunch .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.3;color:var(--sfg)} .design-relaunch .faq-item summary::-webkit-details-marker{display:none} .design-relaunch .faq-item summary .bi{flex:none;color:var(--area);transition:transform .25s} .design-relaunch .faq-item[open] summary .bi{transform:rotate(45deg)} .design-relaunch .faq-item summary:hover{color:var(--area-bright)} .design-relaunch .faq-answer{padding:0 22px 22px;max-width:72ch} .design-relaunch .faq-answer p{margin:0 0 12px;color:var(--sfg-2);line-height:1.6} .design-relaunch .faq-answer p:last-child{margin-bottom:0} .design-relaunch .faq-answer a{color:var(--area-bright)} @media (max-width:1023px){ .design-relaunch .ratgeber-layout{grid-template-columns:1fr;gap:40px} .design-relaunch .ratgeber-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} } @media (max-width:767px){ .design-relaunch .ratgeber-aside{grid-template-columns:1fr} .design-relaunch .faq-item summary{padding:16px 18px} .design-relaunch .faq-answer{padding:0 18px 18px} }