/* === Lokale Fonts (DSGVO-konform, self-hosted) === */ @font-face{font-family:'Saira';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/saira-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Saira';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/saira-latin-500-normal.woff2') format('woff2')} @font-face{font-family:'Saira';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/saira-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Saira';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/saira-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Saira';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/saira-latin-800-normal.woff2') format('woff2')} @font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/titillium-web-latin-300-normal.woff2') format('woff2')} @font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/titillium-web-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/titillium-web-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/titillium-web-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Saira Variable';font-style:normal;font-weight:100 900;font-stretch:50% 125%;font-display:swap;src:url('fonts/saira-variable.woff2') format('woff2-variations')} /* ===================================================================== Fendt-Caravan Haendlerseite 2027 (V04-Design) Zentrale CSS fuer die per PHP aus 2027_mapsearch erzeugten Haendlerseiten. In TYPO3/stage ablegen (z.B. fileadmin/site/2027_css/) und im PHP-Template per einbinden. Fonts/Icons: Figtree (Google Fonts) + Bootstrap-Icons -- im laden. ===================================================================== */ :root{ --blue:#005279;--blue-dark:#00405f; --over:#6b8ea0; /* Overline steel-blue */ --ink:#2a2f33;--muted:#5b6b74;--line:#e2e8ec; --soft:#f2f6f8;--footer:#222;--radius:22px; } *{box-sizing:border-box} body{margin:0;font-family:'Titillium Web',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);line-height:1.6;background:#fff} /* Überschriften & Caps: Saira (Eurostile Demi/Bold-nah) */ h1,h2,h3,h4,.h-sec,.over,.gr-name,.nlinks a,.pill,.stabs a,.quicknav a,.gr-card__tags span,.spec-card .r{font-family:'Saira','Titillium Web',sans-serif} /* Große Display-Headlines: breite Saira (Eurostile-Extended-nah) */ h1,h2,.h-sec,.wmark .ghost,.bhero h1,.hero h1{font-family:'Saira Variable','Saira',sans-serif;font-stretch:112%} .wrap{max-width:1240px;margin:0 auto;padding:0 26px} h1,h2,h3,h4{margin:0 0 .35em;font-weight:600;line-height:1.15} a{text-decoration:none;color:var(--blue)} svg{width:1.05em;height:1.05em;fill:currentColor;flex:none} .over{text-transform:uppercase;letter-spacing:3px;font-weight:500;color:var(--over);font-size:.95rem;margin-bottom:6px} .h-sec{color:var(--blue);font-size:2rem;font-weight:600} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 26px;border-radius:8px;font-weight:600;font-size:.98rem;border:1.5px solid transparent;cursor:pointer;transition:.15s} .btn svg{width:18px;height:18px} .btn-p{background:var(--blue);color:#fff}.btn-p:hover{background:var(--blue-dark)} .btn-o{background:#fff;color:var(--blue);border-color:var(--blue)}.btn-o:hover{background:var(--soft)} .btn-g{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.75);backdrop-filter:blur(4px)}.btn-g:hover{background:rgba(255,255,255,.28)} /* NAV */ .topnav{position:fixed;top:0;left:0;right:0;z-index:30;transition:background-color .25s ease,box-shadow .25s ease,padding .2s ease} .topnav.scrolled{background:rgba(0,42,64,.92);backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.20)} .topnav.scrolled .wrap{padding-top:8px;padding-bottom:8px} .topnav.scrolled .logo-top{height:46px} .topnav .wrap{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 40px} .igrp{display:flex;gap:10px} .pgrp{display:flex;gap:10px} .nic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#333} .nlinks{display:flex;gap:10px;margin-left:6px} .nlinks a{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:14px;background:#fff;color:#222;font-weight:600;letter-spacing:1.5px;font-size:.86rem} .nlinks a:hover{background:#eef3f6} .nsp{flex:1} .pill{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 20px;border-radius:14px;background:rgba(255,255,255,.48);backdrop-filter:blur(6px);color:#333;font-weight:500;font-size:.88rem} .nic i{font-size:20px;line-height:0}.pill i{font-size:15px;line-height:0} /* Sprach-Dropdown */ .langwrap{position:relative;display:inline-flex} .langwrap>.nic{cursor:pointer} .langmenu{position:absolute;top:calc(100% + 10px);left:0;min-width:214px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 20px 48px rgba(0,40,65,.24);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:40;max-height:74vh;overflow:auto} .langwrap:hover .langmenu,.langwrap:focus-within .langmenu{opacity:1;visibility:visible;transform:none} .langmenu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink);font-size:.92rem;font-weight:500;letter-spacing:0} .langmenu a:hover{background:var(--soft)} .langmenu a.active{background:var(--blue);color:#fff} .langmenu .fl{font-size:1.15rem;line-height:1;filter:saturate(1.05)} .logo-top{height:91px;margin-left:22px} .stabs{position:fixed;right:0;top:260px;z-index:30;display:flex;flex-direction:column;gap:8px} .stabs a{writing-mode:vertical-rl;transform:rotate(180deg);padding:20px 13px;font-size:.78rem;letter-spacing:2.5px;border-radius:0 8px 8px 0;font-weight:600;box-shadow:-2px 0 10px rgba(0,0,0,.12)} .stabs .t1{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}.stabs .t2{background:var(--blue);color:#fff} .chat{position:fixed;left:26px;bottom:26px;z-index:30;width:56px;height:56px;border-radius:999px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,50,80,.35)} /* ── Overlay-Menü ─────────────────────────────────────── */ .megamenu{position:fixed;inset:0;z-index:20;display:none;background:rgba(6,26,38,.62);backdrop-filter:blur(9px)} .megamenu.open{display:block} body.menu-open{overflow:hidden} body.menu-open #burger{background:var(--blue);color:#fff} #burger{cursor:pointer} /* Close-X font-unabhaengig per CSS (haengt nicht am Icon-Font) */ body.menu-open #burger i{display:none} body.menu-open #burger{position:relative} body.menu-open #burger::before,body.menu-open #burger::after{content:"";position:absolute;top:50%;left:50%;width:19px;height:2.4px;background:#fff;border-radius:2px} body.menu-open #burger::before{transform:translate(-50%,-50%) rotate(45deg)} body.menu-open #burger::after{transform:translate(-50%,-50%) rotate(-45deg)} .mm-inner{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;padding:138px 80px 56px;height:100%;box-sizing:border-box;align-content:start;overflow:auto} .mm-cats{display:flex;flex-direction:column} .mm-cat{border-bottom:0} .mm-cat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:6px;color:#fff;font-family:'Saira Variable','Saira',sans-serif;font-stretch:112%;font-size:clamp(1.35rem,2.3vw,2rem);font-weight:600;padding:20px 4px} .mm-cat>summary::-webkit-details-marker{display:none} .mm-cat-link{display:flex;align-items:center;justify-content:flex-start;gap:6px;color:#fff;font-family:'Saira Variable','Saira',sans-serif;font-stretch:112%;font-size:clamp(1.35rem,2.3vw,2rem);font-weight:600;padding:20px 4px;text-decoration:none;transition:color .15s} .mm-cat-link:hover{color:#005279 !important} .mm-cat-link .chv{order:-1;font-size:.82em;transition:transform .2s} .mm-cat-link:hover .chv{transform:translateX(3px)} .mm-cat>summary svg{width:22px;height:22px;opacity:1;flex:none;stroke-width:2.2;margin-left:-4px;transition:transform .2s} .mm-cat[open]>summary svg{transform:translateX(3px)} .mm-sub{display:flex;flex-wrap:wrap;gap:2px 28px;padding:0 4px 18px} .mm-sub a{color:rgba(255,255,255,.82);font-size:1rem;padding:6px 0} .mm-sub a:hover{color:#fff;text-decoration:underline} .mm-news{display:flex;flex-direction:column;gap:11px;width:300px;margin-left:auto} .mm-teaser{display:block;transition:transform .2s} .mm-teaser:hover{transform:translateY(-3px)} .mm-teaser-img{display:block;height:78px;border-radius:12px;overflow:hidden} .mm-teaser-img img{width:100%;height:100%;object-fit:cover;display:block} .mm-teaser-txt{display:block;padding:6px 2px 0;color:#fff} .mm-teaser-txt strong{display:block;font-weight:600;font-size:.82rem;line-height:1.3} .mm-teaser-txt .k{display:block;font-size:.76rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:1px} /* Awards (bündig mit Teasern, am rechten Rand) */ .mm-awards-head{color:#fff;font-weight:700;letter-spacing:1px;display:flex;align-items:center;gap:7px;font-size:.9rem;margin-top:14px} .mm-awards-head svg{width:15px;height:15px} .mm-awards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px} .mm-badge{display:block} .mm-badge img{width:100%;height:auto;display:block;border-radius:3px} @media(max-width:960px){.mm-inner{grid-template-columns:1fr;gap:28px;padding:120px 28px 40px}} /* HERO */ .hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0) 32%,rgba(0,0,0,.62)),url('img/hero.jpg') center/cover no-repeat,#2a3b45} .hero .wrap{margin:0;width:100%;max-width:none;position:relative;z-index:2;padding:0 40px 64px 80px} .hero .over{color:#fff;opacity:.92} .hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:600;margin:0 0 8px;text-shadow:0 2px 16px rgba(0,0,0,.45)} .hero .addr{font-size:1.2rem;font-weight:300;opacity:.95;margin-bottom:28px} .brow{display:flex;flex-wrap:wrap;gap:14px} /* INFO */ .section{padding:84px 0} .info{display:grid;grid-template-columns:minmax(330px,1fr) 1.35fr;gap:48px;align-items:start} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 40px rgba(0,50,80,.09)} .card iframe{display:block;width:100%;height:360px;border:0} .card #map{display:block;width:100%;height:360px;z-index:0} .card #map .leaflet-control-attribution{font-size:10px} /* Karten-Marker (CARTO Voyager) – wie Händlersuche, im Fendt-Blau */ .fc-pin{position:relative;width:28px;height:37px} .fc-pin::before{content:"";position:absolute;top:0;left:0;width:28px;height:28px;box-sizing:border-box;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,50,80,.35)} .fc-pin::after{content:"";position:absolute;left:50%;top:23px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:12px solid var(--blue)} .contact{display:flex;flex-direction:column;gap:10px;padding:20px} .contact a{display:flex;align-items:center;gap:13px;height:52px;padding:0 20px;border-radius:12px;background:var(--soft);color:var(--blue);font-weight:600} .contact a:hover{background:#e6eef2} .info-text .h-sec{font-size:1.85rem} .info-text p{color:var(--muted);margin:0 0 1.1em} .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px} .thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px} /* SERVICES */ .services{background:var(--soft)} .services .head{text-align:center;margin-bottom:46px} .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px} .svc{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 40px rgba(0,50,80,.09);text-align:center} .svc img{width:100%;aspect-ratio:16/10;object-fit:cover} .svc .b{padding:24px 18px 28px} .svc h4{font-size:1.05rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink);margin:0 0 14px} .badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;padding:7px 16px;border-radius:999px} .badge.y{background:#e4f2ea;color:#1a7a44}.badge.n{background:#f3e6e6;color:#a23b3b} /* FINDER */ .finder .card{padding:34px;display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center} .finder img{width:100%;height:230px;object-fit:cover;border-radius:16px} .finder h3{font-size:1.35rem;text-transform:uppercase;letter-spacing:1px;color:var(--ink)} .finder .sub{color:var(--blue);margin-bottom:22px;font-weight:500} .fform{display:flex;gap:12px} .fform input{flex:1;height:56px;border:0;border-radius:12px;padding:0 22px 0 46px;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b8ea0'%3E%3Cpath d='M11.7 10.3a6.5 6.5 0 10-1.4 1.4l3.9 3.85a1 1 0 001.4-1.42l-3.85-3.85zM12 6.5a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0'/%3E%3C/svg%3E") no-repeat 18px center/18px;font:inherit} .fform button{width:64px;height:56px;border:0;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} /* VORTEILE */ .vorteile .head{text-align:center;margin-bottom:46px} .vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .vcard{background:var(--soft);border-radius:var(--radius);padding:32px 28px;transition:transform .2s,box-shadow .2s} .vcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,50,80,.1)} .vcard .vi{width:54px;height:54px;border-radius:14px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px} .vcard h4{font-size:1.15rem;color:var(--ink);margin:0 0 10px;font-weight:600} .vcard p{color:var(--muted);margin:0;font-size:.96rem;line-height:1.55} /* VORTEILE – Foto-Mosaik (alter Packery-Stil, modernisiert V04) */ .vmosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:215px;gap:16px} .vtile{position:relative;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(0,50,80,.12)} .vtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s} .vtile:hover img{transform:scale(1.06)} .vtile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.68));z-index:1;transition:background .3s} .vtile:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.8))} .vtile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#fff} .vtile figcaption h4{font-family:'Saira','Titillium Web',sans-serif;font-size:1.15rem;font-weight:600;margin:0;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.35)} .vtile figcaption p{margin:8px 0 0;font-size:.92rem;line-height:1.5;opacity:0;max-height:0;overflow:hidden;transform:translateY(6px);transition:opacity .3s,max-height .3s,transform .3s} .vtile:hover figcaption p{opacity:.95;max-height:180px;transform:none} .vtile.t1{grid-column:1;grid-row:span 2} .vtile.t2{grid-column:2 / 4;grid-row:1} .vtile.t3{grid-column:4;grid-row:span 2} .vtile.t4{grid-column:2 / 4;grid-row:2} .vtile.t5{grid-column:1;grid-row:3} .vtile.t6{grid-column:2 / 5;grid-row:3} @media(max-width:820px){ .vmosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px} .vtile.t1,.vtile.t2,.vtile.t3,.vtile.t4,.vtile.t5,.vtile.t6{grid-column:auto;grid-row:auto} .vtile figcaption p{opacity:.95;max-height:180px;transform:none} } /* IMPRESSIONEN */ .imp{background:var(--soft)} .imp .head{text-align:center;margin-bottom:46px} .igal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px} .igal figure{margin:0;border-radius:16px;overflow:hidden} .igal img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .igal figure:hover img{transform:scale(1.05)} .igal .big{grid-column:span 2;grid-row:span 2} @media(max-width:760px){.igal{grid-template-columns:repeat(2,1fr)}.igal .big{grid-column:span 2}} /* FOOTER */ footer{background:var(--footer);color:#cfd3d6;padding:64px 0 42px} footer .top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;padding-bottom:26px} footer .top img{height:40px;opacity:.95} footer .top .cp{color:#9aa0a4;font-size:.9rem} footer hr{border:0;border-top:1px solid #3a3a3a;margin:0 0 26px} footer .bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center} footer .links{display:flex;gap:26px;flex-wrap:wrap}footer .links a{color:#cfd3d6;font-size:.92rem}footer .links a:hover{color:#fff} footer .soc{display:flex;gap:18px;align-items:center}footer .soc a{color:#cfd3d6;font-size:22px;line-height:1}footer .soc a:hover{color:#fff}footer .soc svg{width:22px;height:22px} @media(max-width:960px){.nlinks,.stabs{display:none}.info{grid-template-columns:1fr}.finder .card{grid-template-columns:1fr}} /* =================================================================== BAUREIHENSEITE (V04) – zusammengeführt aus baureihe-2027.css =================================================================== */ /* ---------- HERO ---------- */ .bhero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 32%,rgba(0,0,0,.55)), url('img-baureihe/b_hero.jpg?v=4') center top/cover no-repeat,#2a3b45} .bhero .wrap{margin:0;width:100%;max-width:none;position:relative;z-index:2;padding:0 40px 60px 80px} .bhero h1{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:600;max-width:660px; text-shadow:0 2px 16px rgba(0,0,0,.45);margin:0} /* Rechter Stapel: Badge -> Spec-Card -> Sprungnavi (unten am Rand ausgerichtet) */ .hfloat{position:absolute;right:90px;top:auto;bottom:60px;z-index:3;width:290px;display:flex;flex-direction:column;gap:20px;align-items:flex-end} /* Spec-Card weiter nach links, damit das Badge rechts Platz hat */ .hfloat .spec-card{margin-right:135px} /* Award-Siegel frei positioniert: rechts, unten überlappend auf der Navi-Box */ .bhero .award{position:absolute;right:78px;top:auto;bottom:60px;width:118px;height:auto;z-index:4; border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.28)} .spec-card,.quicknav{width:100%;background:rgba(255,255,255,.96);border-radius:18px;box-shadow:0 16px 40px rgba(0,40,70,.18); backdrop-filter:blur(6px);color:var(--ink)} .spec-card{padding:20px 22px;display:flex;flex-direction:column;gap:14px} .spec-card .r{display:flex;align-items:center;gap:14px;font-size:.98rem} .spec-card .r i{color:var(--blue);font-size:20px} .bedico{width:20px;height:20px;color:var(--blue);flex:none;display:inline-block;vertical-align:middle} .gr-specs .r .bedico{width:20px;height:20px} .spec-card .r b{color:var(--blue)} .quicknav{padding:6px 4px} .quicknav a{display:flex;align-items:center;justify-content:space-between;padding:12px 20px; color:var(--ink);font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:.9rem; border-bottom:1px solid #eef2f5} .quicknav a:last-child{border-bottom:0} .quicknav a i{color:var(--over)} .quicknav a:hover{color:var(--blue)} /* ---------- SECTION-TITLE mit Wasserzeichen ---------- */ .wmark{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; margin-top:130px;padding:44px 0} .wmark .ghost{font-size:clamp(3rem,9vw,7rem);font-weight:700;letter-spacing:.06em;color:#d7e1e9; text-transform:uppercase;pointer-events:none;white-space:nowrap;line-height:1;margin:0} .wmark h2{margin:5px 0 0;color:var(--blue);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15} /* Mobile: Section-Ueberschriften kleiner, damit sie passen (5px-Abstand bleibt) */ @media(max-width:820px){ .wmark{margin-top:56px;padding:30px 0} .wmark .ghost{font-size:clamp(1.4rem,8vw,3.2rem);letter-spacing:.03em} .wmark h2{font-size:clamp(1.3rem,5vw,1.9rem)} } /* ---------- BILD/TEXT-SEKTION ---------- */ .bsec{padding:40px 0} .bsec .row2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .bsec.rev .row2{direction:rtl}.bsec.rev .row2>*{direction:ltr} .txtcard{background:#fff;border-radius:var(--radius);padding:8px 10px 8px 0} .txtcard .over{margin-bottom:8px} .txtcard h3{color:var(--blue);font-size:1.6rem;font-weight:600;margin:0 0 14px} .txtcard p{color:var(--muted);margin:0} /* Collage: 2–3 Bilder gestaffelt */ .collage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:16px} .collage img{width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:0 12px 30px rgba(0,50,80,.1)} .collage .tall{grid-row:span 2} .collage .wide{grid-column:span 2} /* Gestaffelte 4-Bild-Collage (großes Bild oben rechts, drei versetzt darunter) */ .cstag{grid-template-columns:1.15fr 1fr .62fr;grid-auto-rows:auto;align-items:start;gap:18px} .cstag img{height:auto} .cstag .c-big{grid-column:2 / 4;grid-row:1;aspect-ratio:16/11} .cstag .c-a{grid-column:1;grid-row:1 / 3;align-self:end;aspect-ratio:3/2} .cstag .c-b{grid-column:2;grid-row:2;aspect-ratio:3/2} .cstag .c-c{grid-column:3;grid-row:2;aspect-ratio:3/4;margin-top:26px} /* WOHNEN-Collage: absolute Bühne, Positionen aus Mockup-Bild 1 gemessen */ .wstage{position:relative;width:100%;aspect-ratio:1808/1330;margin-top:10px;margin-bottom:-13%} .wstage>img{position:absolute;object-fit:cover;border-radius:40px;box-shadow:0 16px 40px rgba(0,50,80,.12);z-index:2} .wstage .txtcard{position:absolute;left:2%;top:calc(6% + 30px);width:calc(43.2% + 100px);background:#fff;border-radius:44px; padding:38px 50px 157px;box-shadow:0 30px 70px rgba(0,50,80,.18);z-index:1} .wstage .txtcard .over,.wstage .txtcard h3,.wstage .txtcard p{max-width:340px} .wstage .p1{left:calc(45.5% - 10px);top:6%;width:36.8%;aspect-ratio:1.514} /* großes Bild oben rechts – Proportion aus Entwurf */ .wstage .p2{left:calc(14% - 30px);top:calc(32% + 20px);width:31.5%;aspect-ratio:1.401} /* Dinette links – Proportion aus Entwurf */ .wstage .p3{left:calc(45.5% - 10px);top:calc(39% + 20px);width:20%;aspect-ratio:0.644} /* Dinette Mitte (Hochformat) – Proportion aus Entwurf */ .wstage .p4{left:calc(65.5% + 10px);top:calc(39% + 20px);width:19%;aspect-ratio:1.136} /* kleines Bild rechts – Proportion aus Entwurf */ /* SCHLAFEN-Collage: Textkarte rechts, Bilder links – Positionen/Proportionen aus Entwurf (Inhaltsbereich) */ .sstage{position:relative;width:100%;aspect-ratio:5/3;margin-top:10px;margin-bottom:2%} .sstage>img{position:absolute;object-fit:cover;border-radius:40px;box-shadow:0 16px 40px rgba(0,50,80,.12);z-index:2} .sstage .txtcard{position:absolute;right:calc(7.5% - 10px);top:9%;width:calc(39% + 100px);background:#fff;border-radius:44px; padding:44px 48px 148px 148px;box-shadow:0 30px 70px rgba(0,50,80,.18);z-index:1} .sstage .s1{left:8.375%;top:4%;width:46%;aspect-ratio:1.63} /* rechte Kante bündig mit s3 (54.375%) */ .sstage .s2{left:calc(16.625% - 20px);top:55%;width:19%;aspect-ratio:1.136} /* kleines Bild links unten; Dreier-Reihe zentriert */ .sstage .s3{left:35.625%;top:55%;width:18.75%;aspect-ratio:0.644} /* Hochformat Mitte, 20px zu s2, gleiche Oberkante */ .sstage .s4{left:calc(54.375% + 20px);top:55%;width:29%;aspect-ratio:1.401} /* Bett rechts, 20px zu s3, gleiche Oberkante */ /* Küche – gestaffelte Collage (wie Entwurf): Text oben links, großes Bild oben rechts, Bild unten links, Hochformat mittig */ .kstage{position:relative;width:100%;aspect-ratio:1155/818;margin-top:10px;margin-bottom:-11%} .kstage>img{position:absolute;object-fit:cover;border-radius:40px;box-shadow:0 16px 40px rgba(0,50,80,.12);z-index:2} .kstage .txtcard{position:absolute;left:calc(4% + 20px);top:9%;width:calc(40% + 140px);background:#fff;border-radius:44px;padding:44px 48px 188px;box-shadow:0 30px 70px rgba(0,50,80,.18);z-index:1} .kstage .k1{left:calc(49.9% + 50px);top:calc(5% - 50px);width:44.4%;aspect-ratio:1.63} /* großes Bild oben rechts (10% kleiner) +50px rechts/hoch */ .kstage .k2{left:calc(23.7% + 30px);top:calc(46.9% - 50px);width:26.2%;aspect-ratio:1.40} /* rechte Kante 20px links von k3 */ .kstage .k3{left:calc(49.9% + 50px);top:calc(46.9% - 50px);width:17.6%;aspect-ratio:0.644} /* linke Kante bündig mit k1 (Ausrichtung wiederhergestellt) */ /* Bad – gestaffelte Collage (Spiegel der Küche): großes Bild oben links, Textkachel oben rechts, breites Bild rechts unten, Hochformat mittig */ .badstage{position:relative;width:100%;aspect-ratio:1155/818;margin-top:10px;margin-bottom:-10%} .badstage>img{position:absolute;object-fit:cover;border-radius:40px;box-shadow:0 16px 40px rgba(0,50,80,.12);z-index:2} .badstage .txtcard{position:absolute;right:4%;top:9%;width:60%;background:#fff;border-radius:44px;padding:56px 60px 250px 20%;box-shadow:0 30px 70px rgba(0,50,80,.18);z-index:1} .badstage .ba1{left:calc(16.6% - 20px);top:10%;width:39.4%;aspect-ratio:1.63} /* großes Bild oben, 20px links neben der Kachel */ .badstage .ba3{left:56%;top:calc(44.1% + 20px);width:23.2%;aspect-ratio:1.40} /* 20px rechts neben ba2 */ .badstage .ba2{left:calc(40.4% - 20px);top:calc(44.1% + 20px);width:15.6%;aspect-ratio:0.644}/* rechte Kante bündig mit ba1 (56% - 20px) */ @media(max-width:820px){ .wstage,.sstage,.kstage,.badstage{aspect-ratio:auto;display:flex;flex-direction:column;gap:16px} .wstage>img,.wstage .txtcard,.sstage>img,.sstage .txtcard,.kstage>img,.kstage .txtcard,.badstage>img,.badstage .txtcard{position:static;width:100%;height:auto} } /* ---------- TOWING-BANNER ---------- */ .btow{position:relative;min-height:72vh;margin:40px 40px 0;color:var(--ink); overflow:visible;border-radius:34px; background:url('img-baureihe/b_tow.jpg?v=3') center/cover no-repeat} /* schräger blauer Diagonal-Streifen links (klar abgegrenzt, halbtransparent) */ .btow::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:34px; background:linear-gradient(112deg,rgba(0,48,74,.60) 0%,rgba(0,48,74,.46) 8%,rgba(0,48,74,.14) 13%,transparent 17%)} .btow .card{position:absolute;left:80px;top:48%;z-index:2;max-width:440px; background:rgba(255,255,255,.90);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-radius:26px;padding:42px 46px;box-shadow:0 24px 60px rgba(0,40,65,.30)} .btow p{font-size:1.02rem;line-height:1.7;margin:0 0 1.1em;color:var(--ink)} .btow p:last-child{margin-bottom:0} /* ---------- GRUNDRISSE ---------- */ .grundrisse{background:#fff} .gr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:34px;grid-auto-rows:1fr} .gr-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px; box-shadow:0 12px 34px rgba(0,50,80,.08);display:flex;flex-direction:column;gap:12px;height:100%} .gr-card>.plan{width:100%;aspect-ratio:1000/527;object-fit:contain;background:#f7fafb;border-radius:12px} .imgtag{position:absolute;right:14px;bottom:12px;z-index:2;color:#fff;font-family:'Saira','Titillium Web',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.5px;text-shadow:0 1px 6px rgba(0,0,0,.6)} .gr-name{font-size:1.35rem;color:var(--ink);font-weight:600} .gr-card__tags{display:flex;flex-wrap:wrap;gap:5px} .gr-card__tags:empty{display:none} .gr-card__tags span{background:var(--blue);color:#fff;border-radius:999px;padding:3px 10px;font-size:.65rem;font-weight:600} .gr-specs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:8px} .gr-specs .r{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--muted)} .gr-specs .r i{color:var(--blue);width:20px;text-align:center} .gr-specs .r b{color:var(--ink);min-width:64px} .gr-btns{display:flex;flex-direction:column;gap:8px;margin-top:auto} .gr-btns a{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:10px;font-weight:600;font-size:.9rem} .gr-btns .g-o{background:#fff;border:1.5px solid var(--line);color:var(--ink)} .gr-btns .g-o:hover{border-color:var(--blue);color:var(--blue)} .gr-btns .g-p{background:var(--blue);color:#fff}.gr-btns .g-p:hover{background:var(--blue-dark)} /* ---------- CTA-KACHELN (4) ---------- */ .ctatiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .ctile{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:flex-end; box-shadow:0 12px 34px rgba(0,50,80,.12)} .ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ctile a{position:relative;z-index:2;margin:0 auto 20px;flex:0 1 auto;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--blue);color:#fff;height:34px;padding:0 16px;border-radius:8px;font-weight:600;font-size:.85rem} .ctile a:hover{background:var(--blue-dark)} .ctile a .ctaico{width:20px;height:20px;flex:none} /* ---------- LANGTEXT-BLÖCKE ---------- */ .longtext{padding:64px 0} .longtext .over{margin-bottom:10px} .longtext h2{color:var(--blue);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:600;margin:0 0 26px;line-height:1.2} .longtext .cols{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:stretch} .longtext .cols.evencols{grid-template-columns:1fr 1fr;align-items:start} .longtext p{color:var(--muted);margin:0 0 1.1em} .longtext img{width:100%;border-radius:18px;box-shadow:0 16px 40px rgba(0,50,80,.1)} .longtext .imgfill{position:relative;overflow:hidden;border-radius:18px;box-shadow:0 16px 40px rgba(0,50,80,.1);min-height:280px} .longtext .imgfill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;margin:0} .longtext h4{text-transform:uppercase;letter-spacing:1px;color:var(--over);font-size:1rem;margin:26px 0 12px} .longtext .stack{display:flex;flex-direction:column;gap:20px} .longtext .stack img{margin:0} /* Doppelbild nebeneinander, füllt die Texthöhe */ .longtext .cols.duocols{grid-template-columns:1fr 1.6fr;align-items:stretch} .longtext .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:100%} /* Konfigurator/Händlersuche-Buttons neben Text */ .cfgrow{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:center;margin-top:8px} .cfgbtns{display:flex;flex-direction:column;gap:14px} .cfgbtns .btn{justify-content:center} /* Modelle im Überblick (dunkel) */ .moddark{background:#dbe8f0;color:var(--ink);padding:80px 0;margin:10px 0} .moddark .h4up{text-transform:uppercase;letter-spacing:1px;color:var(--blue);font-size:1.15rem;margin:0 0 16px;font-weight:600} .moddark .intro{color:var(--muted);max-width:1040px;margin:0 0 40px;line-height:1.7} .moddark .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .moddark .card{background:#fff;color:var(--ink);border-radius:18px;padding:30px 30px 24px;box-shadow:0 14px 36px rgba(0,50,80,.12)} .moddark .card h3{text-transform:uppercase;letter-spacing:.5px;color:var(--over);font-size:1rem;line-height:1.45;margin:0 0 16px} .moddark .card p{color:var(--muted);margin:0 0 1em;font-size:.95rem;line-height:1.65} .moddark .card p:last-child{margin-bottom:0} @media(max-width:960px){.moddark .cards{grid-template-columns:1fr}.cfgrow{grid-template-columns:1fr}.longtext .duo{height:auto;grid-template-columns:1fr}.longtext .imgfill{min-height:220px}} /* ---------- BOTTOM-CTA-KARTEN ---------- */ .botcta{background:var(--soft);padding:70px 0} .botcta .row2{display:grid;grid-template-columns:1fr 1fr;gap:34px} .botcta .c{background:#fff;border-radius:20px;padding:26px;box-shadow:0 12px 34px rgba(0,50,80,.08)} .botcta .c img{width:100%;height:210px;object-fit:cover;border-radius:14px;margin-bottom:20px} .botcta .c h3{text-transform:uppercase;letter-spacing:1px;color:var(--ink);font-size:1.15rem;margin:0 0 8px} .botcta .c .sub{color:var(--blue);font-weight:500;margin-bottom:20px} .botcta .frow{display:flex;gap:12px} .botcta .frow input{flex:1;height:56px;border:0;border-radius:12px;padding:0 20px;background:var(--soft);font:inherit} .botcta .frow button,.botcta .c .btn{border:0;cursor:pointer} @media(max-width:1100px){ .gr-grid,.ctatiles{grid-template-columns:repeat(2,1fr)} .hfloat,.award{display:none} } @media(max-width:820px){ .bsec .row2,.longtext .cols,.botcta .row2{grid-template-columns:1fr} .bsec.rev .row2{direction:ltr} .btow{min-height:auto} /* Baureihe: Intro-Textbanner mobil komplett ausblenden (Home-Banner haben .no-wedge, bleiben) */ .btow:not(.no-wedge){display:none} .btow .card{position:static;left:auto;right:auto;top:auto;bottom:auto;margin:36px;padding:32px;max-width:none} /* Hero ~30% niedriger -> Video wirkt breiter (weniger Crop) */ .bhero{min-height:64vh} /* Grundrisse mobil: nur einer pro Zeile */ .gr-grid{grid-template-columns:1fr} /* Wohnen/Schlafen/Kueche/Bad: nur EIN Bild, seitenbreit, unter dem Textblock */ .wstage,.sstage,.kstage,.badstage{position:static;aspect-ratio:auto;margin:0;display:flex;flex-direction:column;gap:18px} .wstage .txtcard,.sstage .txtcard,.kstage .txtcard,.badstage .txtcard{position:static;left:auto;top:auto;width:auto;max-width:none;border-radius:20px;padding:22px 20px} .txtcard .over,.txtcard h3,.txtcard p{max-width:none} .wstage>img,.sstage>img,.kstage>img,.badstage>img{display:none} .wstage>img:first-of-type,.sstage>img:first-of-type,.kstage>img:first-of-type,.badstage>img:first-of-type{display:block;position:static;left:auto;top:auto;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:20px} } /* Reveal-Effekt beim Scrollen – Element wächst sanft ein (einmalig) */ .reveal{transform:scale(.9)} /* scroll-gekoppelt per JS: 90% -> 100% beim Reinscrollen */ @media(prefers-reduced-motion:reduce){.reveal{transform:none}} /* Doppel-Chevron als Schrift-Zeichen (statt SVG) */ .chv{display:inline-block;font-size:1.02em;line-height:1} /* ===== MOBILE-NAVIGATION ===== */ .mm-mobilenav{display:none} @media(max-width:960px){ .pgrp{display:none} .logo-top{height:52px !important;margin-left:0 !important} .topnav .wrap{padding:16px 20px !important} .mm-mobilenav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px} .mm-mobilenav a{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:14px;background:#fff;color:#222;font-family:'Saira','Titillium Web',sans-serif;font-weight:700;letter-spacing:1.5px;font-size:.9rem} .mm-mobilenav a.mm-pill{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;letter-spacing:.5px;font-weight:600} .mm-mobilenav a.mm-pill i{font-size:1.05rem} }