/* ===============================
PhoneSite — UI Refresh (v1)
Paste into the END of custom.css
or replace the file with this.
=============================== */
/* ---------- 0) Theme Tokens ---------- */
:root,
:root[data-theme="ocean"]{
--bg:#0b1020; --card:#fff; --text:#0f172a; --muted:#475569; --line:rgba(2,6,23,.08);
/* >>> DEINE MARKENFARBEN HIER <<< */
--brand: #F4A21E; /* Primär (Orange) */
--brand-600: #C78614; /* dunkler für Hover */
--brand-50: #FFF3E0; /* sehr hell für Flächen */
--accent: #FFD36A; /* Akzent */
--accent-50: #FFF2C6;
--surface:#f7fafc; --footer-bg:#0B0B0B; --footer-fg:#EDEDED;
--radius:16px; --radius-sm:10px; --shadow:0 8px 24px rgba(2,6,23,.08);
--shadow-hover:0 16px 40px rgba(2,6,23,.16);
--space-xs:8px; --space-s:12px; --space-m:16px; --space-l:24px; --space-xl:32px;
--space-2xl:48px; --space-3xl:64px; --space-4xl:clamp(72px, 8vw, 120px);
}
/* Optional alternative themes (switch by setting data-theme on ) */
:root[data-theme="sunset"]{
--brand:#f43f5e; --brand-600:#e11d48; --brand-50:#fff1f2;
--accent:#fb923c; --accent-50:#fff7ed;
--footer-bg:#111827; --footer-fg:#e5e7eb;
}
:root[data-theme="mint"]{
--brand:#10b981; --brand-600:#059669; --brand-50:#ecfdf5;
--accent:#22d3ee; --accent-50:#ecfeff;
--footer-bg:#071a17; --footer-fg:#c6f6d5;
}
/* ---------- 1) Base & Typography ---------- */
body{
color: var(--text);
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4{ margin: 0 0 var(--space-l) }
p{ color: var(--muted); }
/* ---------- 2) Buttons (used by hero) ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:10px; height:48px; padding:0 18px;
border-radius: 999px; border: 1px solid transparent;
font-weight:700; text-decoration:none; transition: .2s ease;
box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.btn--primary{
color:#fff; background: linear-gradient(180deg, var(--brand), var(--brand-600));
}
.btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2,6,23,.16); }
.btn--ghost{
background:#fff; color: var(--brand); border-color: var(--brand-600);
}
.btn--ghost:hover{ background: var(--brand-50); }
/* ---------- 3) Navbar polish ---------- */
.waves-navbar-1.w-nav{
position: sticky; top:0; z-index:2000;
background: rgba(255,255,255,.9);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--line);
}
.waves---nav-link{
position: relative; color: var(--text) !important;
padding: 12px 14px;
}
.waves---nav-link::after{
content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
background: var(--brand); transform: scaleX(0); transform-origin: left;
transition: transform .2s ease;
}
.waves---nav-link:hover::after,
.waves---nav-link.w--current::after{ transform: scaleX(1); }
.waves---nav-cta{
background: linear-gradient(180deg, var(--brand), var(--brand-600)) !important;
color:#fff !important; border-radius: 999px; height:46px !important;
padding: 0 16px !important; box-shadow: 0 8px 20px rgba(14,165,233,.35);
}
.waves---nav-cta:hover{ transform: translateY(-1px); }
/* Mega menu: center on viewport & prevent overflow */
.nav-item.has-mega{ position: relative; }
.nav-link.mega-toggle{ background: transparent; border:0; cursor:pointer; font:inherit; }
.mega{
position:absolute; left:50%; transform:translateX(-50%);
top:100%; margin-top:12px; width:min(1200px,96vw);
background:#fff; border:1px solid var(--line); border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(2,6,23,.18); padding:18px 20px; display:none; z-index:9999;
}
.mega.show{ display:block; }
@media (max-width: 767px){
.mega{ position:fixed; top:64px; left:50%; transform:translateX(-50%); height:calc(100vh - 80px); overflow:auto; }
}
/* ---------- 4) Hero refresh (index.html uses .hero-v2*) ---------- */
/* ---------- 5) Cards & lists ---------- */
.leistung-card,
[class^="collection-item"], .collection-item, .link-block-10{
border-radius: var(--radius) !important; box-shadow: var(--shadow) !important;
}
/* ---------- 6) Section spacing ---------- */
section{ padding-block: var(--space-3xl); }
.section-11{ padding-top: 0 !important; } /* first section sits flush */
@media (max-width: 767px){
section{ padding-block: var(--space-2xl); }
}
/* ---------- 7) Footer (convert to elegant dark) ---------- */
.footer-dark, .footer-dark-2{
background: radial-gradient(80% 120% at 100% 0, rgba(99,102,241,.18), transparent 50%),
linear-gradient(180deg, var(--footer-bg), #060913);
color: var(--footer-fg);
border: 0;
}
.footer-link{ color: #cbd5e1 !important; }
.footer-link:hover{ color: #fff !important; }
.footer-divider{ background-color: rgba(148,163,184,.35) !important; }
.footer-copyright-center{ color: #94a3b8; }
/* ---------- 8) Small quality-of-life tweaks ---------- */
html, body{ overflow-x: clip; } /* stop any horizontal leaks */
img{ display:block; }
#marken .brand-grid{ gap: 24px; }
.price-card__row > div:first-child { text-transform: capitalize; } /* keep your earlier rule */
/* ---------- 9) Active state for anchors ---------- */
a.w--current{ color: var(--brand) !important; }
/* ===============================
PhoneSite — UI Refresh (Compat Pack v2)
HINZUFÜGEN ANS ENDE VON custom_refreshed.css
=============================== */
/* 1) Buttons: Webflow-/Projektklassen auf neuen Stil mappen */
.w-button,
.button, .button-2, .button-3, .button-5, .button-7,
.waves---nav-cta {
display:inline-flex; align-items:center; justify-content:center;
gap:10px; height:48px; padding:0 18px;
border-radius: 999px; border: 1px solid transparent;
font-weight:700; text-decoration:none; transition:.2s ease;
box-shadow: 0 2px 10px rgba(2,6,23,.06);
background: linear-gradient(180deg, var(--brand), var(--brand-600));
color:#fff !important;
}
.w-button:hover,
.button:hover, .button-2:hover, .button-3:hover, .button-5:hover, .button-7:hover,
.waves---nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
/* Ghost-Variante (deine “Outline”-Buttons) */
.button-4, .button-6, .btn--ghost {
background:#fff; color: var(--brand) !important; border:1px solid var(--brand-600);
border-radius:999px; height:48px; padding:0 18px; font-weight:700;
display:inline-flex; align-items:center; justify-content:center;
box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.button-4:hover, .button-6:hover, .btn--ghost:hover { background: var(--brand-50); }
/* 2) Cards/Boxen konsistent (Kontakt/Map u.a.) */
.div, .div-2, .map-card,
.leistung-card,
[class^="collection-item"], .collection-item, .collection-item-2, .collection-item-3,
.link-block-10 {
background:#fff; border:1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease;
}
.div-2:hover
[class^="collection-item"]:hover, .collection-item:hover, .collection-item-2:hover, .collection-item-3:hover,
.link-block-10:hover {
transform: translateY(-2px); box-shadow: var(--shadow-hover);
}
/* 3) Abstände & Typo überall “ruhig” halten */
section { padding-block: var(--space-3xl); }
@media (max-width: 767px){ section{ padding-block: var(--space-2xl); } }
h1,h2,h3,h4{ margin: 0 0 var(--space-l); }
p{ color: var(--muted); }
/* 4) Navbar: dezente Glass-Optik + aktive Links */
.waves-navbar-1.w-nav{
position: sticky; top:0; z-index:2000;
background: rgba(255,255,255,.9);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--line);
}
.waves---nav-link{ color: var(--text) !important; }
.waves---nav-link::after{
content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
background: var(--brand); transform: scaleX(0); transform-origin: left;
transition: transform .2s ease;
}
.waves---nav-link:hover::after,
.waves---nav-link.w--current::after{ transform: scaleX(1); }
/* 5) Footer: helle Webflow-Variante -> elegante dunkle Variante */
.waves-footer-1{
background: radial-gradient(80% 120% at 100% 0, rgba(99,102,241,.18), transparent 50%),
linear-gradient(180deg, var(--footer-bg), #060913);
color: var(--footer-fg);
padding-top: var(--space-3xl) !important; padding-bottom: var(--space-2xl) !important;
}
.waves-divider-footer-1{ background-color: rgba(148,163,184,.35) !important; margin-top: 32px; }
.waves-link-footer-1, .footer-link{ color:#cbd5e1 !important; }
.waves-link-footer-1:hover, .footer-link:hover{ color:#fff !important; }
.waves-bottom-footer-1, .footer-copyright-center{ color:#94a3b8; }
/* 6) Marken-/Modelle-Listen: etwas mehr Luft */
#marken .brand-grid{ gap: 24px !important; }
[class^="collection-list"], .collection-list { gap: 24px !important; }
/* 7) Kleinere Qualitäts-Fixes */
html, body{ overflow-x: clip; } /* keine horizontalen Leaks */
a.w--current{ color: var(--brand) !important; } /* aktuelle Seite einfärben */
/* 8) Klassen-Mapping für Buttons in Kontakt-Karten */
.contact-link:hover{ color: var(--brand) !important; }
/* ============================================
PhoneSite — Section Headings + Global Gradients
Append to END of custom_refreshed.css
============================================ */
/* 1) Section Headings (robust defaults + optional utility classes) */
/* Default style for the first H2 in any section */
section h2:first-of-type{
font-size: clamp(28px, 4.4vw, 44px);
line-height: 1.08;
letter-spacing: -0.015em;
color: #0b1220;
margin-bottom: 10px;
font-weight: 800;
}
/* Optional small eyebrow over the title (add ...) in HTML if desired) */
.section-eyebrow{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background: var(--brand-50);
color: var(--brand);
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
font-size:.8rem;
margin-bottom: 12px;
}
/* Optional decorative underline for titles (add class "section-title--underline" to an h2) */
.section-title--underline{
position: relative;
padding-bottom: 8px;
}
.section-title--underline::after{
content:"";
position:absolute;
left:0; bottom:0;
width: 56px; height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--brand), var(--accent));
}
/* Subtitle text directly under the title (opt-in class) */
.section-sub{
font-size: clamp(16px, 2.2vw, 20px);
color: var(--muted);
margin: 0 0 18px;
max-width: 72ch;
}
/* 2) Soft gradient backgrounds for ALL sections (except hero) */
/* ===========================
Clean Air Theme — Sections
=========================== */
/* 0) Nie in die Hero-Section eingreifen */
.section-11, .section-11 * { isolation: isolate; } /* Hero bleibt oben */
/* 1) Standard: glatte, weiße Section-Hintergründe */
section { background:#fff !important; }
/* 2) Sanfte Halos NUR innerhalb des Containers,
ohne die ganze Section zu färben
(keine HTML-Änderungen nötig) */
/* Leistungen (section-2) */
.section-2 .w-container {
position: relative;
}
.section-2 .w-container::before{
content:""; position:absolute; inset:-20px 0 -30px 0; z-index:0;
background:
radial-gradient(600px 200px at 12% 0%, rgba(14,165,233,.10), transparent 60%),
radial-gradient(520px 180px at 88% 100%, rgba(99,102,241,.08), transparent 60%);
pointer-events:none;
}
.section-2 .w-container > * { position: relative; z-index:1; }
/* Vorteile (benefits) – vorher harter Verlauf -> jetzt soft */
.benefits{
background:#fff !important;
}
.benefits__container{ position:relative; }
.benefits__container::before{
content:""; position:absolute; inset:-20px 0 -30px 0; z-index:0;
background:
radial-gradient(580px 200px at 8% 0%, rgba(14,165,233,.08), transparent 60%),
radial-gradient(520px 180px at 92% 100%, rgba(99,102,241,.06), transparent 60%);
pointer-events:none;
}
.benefits__container > *{ position:relative; z-index:1; }
/* Kontakt */
.kontakt .w-container{
position:relative;
}
.kontakt .w-container::before{
content:""; position:absolute; inset:-10px 0 -10px 0; z-index:0;
background:
radial-gradient(560px 180px at 8% 0%, rgba(14,165,233,.07), transparent 60%),
radial-gradient(520px 170px at 92% 100%, rgba(99,102,241,.05), transparent 60%);
pointer-events:none;
}
.kontakt .w-container > *{ position:relative; z-index:1; }
/* 3) Feine Abschnittstrenner statt Farbflächen */
section + section{
box-shadow: inset 0 1px 0 rgba(2,6,23,.06);
}
/* 4) Überschriften fein & konsistent */
section h2:first-of-type{
font-size: clamp(28px, 4.2vw, 42px);
line-height: 1.08;
letter-spacing: -0.015em;
margin-bottom: 12px;
font-weight: 800;
color: #0b1220;
}
.section-sub{
font-size: clamp(16px, 2vw, 20px);
color: #475569;
margin: 0 0 18px;
max-width: 72ch;
}
.section-2{
margin-top: 0px;
padding-top: 0px;
}
/* 5) Sicherheit: keine Verläufe in der Hero überdecken
.section-11 .hero-v2,
.section-11 .hero-v2 *{
background-image: none; /* nur falls ein globaler Verlauf durchrutscht
}
*/
/* ================================
Patch: Left-align all section titles
Append to END of custom_refreshed.css
================================ */
/* Core: our heading wrapper + first h2 in sections */
.section-head,
.section-head > h2,
.section-sub,
section h2:first-of-type{
text-align: left !important;
font-family: Arial, Helvetica, sans-serif;
}
/* Common project headings that may appear without .section-head */
.benefits__title,
.heading-8,
.heading-2,
.heading-3,
.heading-4{
text-align: left !important;
}
/* Safety: if a parent container centers text, don't inherit for headings */
section .w-container .section-head,
section .w-container h2,
section .w-container .section-sub{
margin-left: 0 !important;
margin-right: auto !important;
}
/* Keep hero untouched */
.section-11 .section-head,
.section-11 h2,
.section-11 .section-sub{
text-align: inherit !important;
}
/* ==================================================
BENEFITS — strict layout so paragraph starts right
under the card heading (no collapsed margins)
================================================== */
/* 1) Force consistent card layout */
section.benefits .benefits__card{
display: grid !important;
grid-template-columns: 56px 1fr;
grid-auto-rows: min-content;
align-items: start !important;
column-gap: 16px;
row-gap: 6px;
}
/* 2) Icon column fixed */
section.benefits .benefits__card > .benefits__icon{
grid-column: 1; grid-row: 1 / span 2;
width: 56px; height: 56px;
border-radius: 14px;
background: var(--brand-50);
display: grid; place-items: center;
}
/* 3) Heading + paragraph stack in the second column */
section.benefits .benefits__card > .benefits__card-title{
grid-column: 2; grid-row: 1;
margin: 0 !important;
line-height: 1.2;
}
section.benefits .benefits__card > .benefits__text{
grid-column: 2; grid-row: 2;
/* kill any margins to avoid collapsed space */
margin: 0 !important;
}
/* 4) Make grid rows stretch equally within each row of the overall grid */
section.benefits .benefits__grid{ align-items: stretch !important; }
section.benefits .benefits__grid > *{ height: 100% !important; }
/* ============================================
Mobile polish: navbar CTA + duo buttons gap
Append to END of custom_refreshed.css
============================================ */
/* 1) Hide "Jetzt Anrufen" CTA in navbar on mobile */
@media (max-width: 767px){
.waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* 2) Bring two action buttons closer together on mobile */
/* Fallback: when two .w-button are siblings, add a small gap */
@media (max-width: 767px){
.w-button + .w-button{ margin-left: 12px !important; }
}
/* Prefer: center and gap any wrapper that directly contains two+ .w-button */
@media (max-width: 767px){
/* Browsers that support :has() */
*:has(> .w-button + .w-button){
display: flex !important;
justify-content: center !important;
align-items: center;
gap: 2px;
flex-wrap: nowrap;
}
/* Make both buttons behave nicely in a row */
.w-button{
white-space: nowrap;
min-width: 0;
}
.section-2 .w-container{
padding-left: 10px ;
padding-right: 10px;
}
.hero-v2__copy{
padding-left: 10px ;
padding-right: 10px;
}
}
/* ==================================================
Mobile Nav — remove ALL underlines and separators
Append to END of custom_refreshed.css
================================================== */
@media (max-width: 767px){
/* Remove text decoration on all links inside the nav */
.waves-navbar-1 .w-nav-menu a,
.waves-navbar-1 .w-dropdown-link,
.waves-navbar-1 .w-dropdown-toggle,
.waves-navbar-1 .w--nav-link,
.w-nav-overlay a{
text-decoration: none !important;
-webkit-text-decoration: none !important;
}
/* Kill the decorative underline we added for desktop nav */
.waves-navbar-1 .waves---nav-link::after{ display: none !important; }
/* If menu items have separators as border-bottom, remove them */
.waves-navbar-1 .w-nav-menu a,
.w-nav-overlay a,
.w-dropdown-list a{
border-bottom: none !important;
box-shadow: none !important;
}
/* Also, when items are current/active/focus/hover — still no underline */
.waves-navbar-1 .w-nav-menu a:hover,
.waves-navbar-1 .w-nav-menu a:focus,
.waves-navbar-1 .w-nav-menu a:active,
.waves-navbar-1 .w-nav-menu a.w--current{
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
}
/* ==================================================
Mobile Nav — ONLY the dropdown title ("Reparatur")
Append to END of custom_refreshed.css
================================================== */
@media (max-width: 767px){
/* Target just the dropdown toggle text in the navbar menu */
.waves-navbar-1 .w-nav-menu .w-dropdown .w-dropdown-toggle{
font-size: clamp(18px, 5vw, 20px) !important;
line-height: 1.25 !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
padding-block: 14px !important; /* same vertical rhythm as other items */
}
/* Keep caret nicely aligned with the text */
.waves-navbar-1 .w-nav-menu .w-dropdown .w-dropdown-toggle .w-icon-dropdown{
margin-left: 8px;
transform: translateY(1px);
font-size: 1em;
}
.nav-link.mega-toggle{ background: transparent; border:0; cursor:pointer; font:inherit; font-size: 20px;}
}
/* === HERO v2 ============================================================= */
.modell-hero-v2{
position: relative;
overflow: clip;
background: radial-gradient(120% 120% at 85% 10%, rgba(14,165,233,.14), transparent 60%),
radial-gradient(90% 90% at 0% 100%, rgba(99,102,241,.10), transparent 60%),
#0b1220;
color: #fff;
padding: clamp(64px, 10vw, 120px) 0 clamp(36px, 6vw, 64px);
display: flex;
align-items: center;
justify-content: space-evenly;
text-align: center;
}
/* sanfter Foto/Noise-Layer (optional Bild austauschen) */
.modell-hero-v2__bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.1) 50%, rgba(11,18,32,.65) 100%),
url('../images/hero-image-repair-page.webp') center/cover no-repeat;
filter: saturate(1.1) contrast(1.02);
opacity: .35;
pointer-events:none;
}
.modell-hero-v2__inner{
position: relative; z-index: 1;
max-width: 1200px;
grid-template-columns: 1.1fr .9fr;
gap: clamp(24px, 4vw, 48px);
}
.modell-hero-v2__eyebrow{
display:inline-block; margin:0 0 10px;
padding:6px 10px; border-radius:999px;
font: 700 .8rem/1 var(--font, 'Open Sans', system-ui);
letter-spacing:.06em; text-transform:uppercase;
background: rgba(255,255,255,.08);
color:#9bd2ff;
}
.modell-hero-v2__title{
margin: 0 0 8px;
font: 800 clamp(32px, 5vw, 56px)/1.04 'Open Sans', system-ui;
letter-spacing: -.05em;
}
.modell-hero-v2__sub{
color: #dbeafe;
max-width: 54ch;
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.5;
margin: 0 0 18px;
}
/* Apple-Seite – 3-Schritte-Karten: gleiche Höhe */
.section-7 .container-14{
align-items: stretch !important; /* Grid-Items füllen die Zeile */
}
body.apple #Kontakt .w-layout-blockcontainer.container-3.w-container {
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (min-width: 992px){
.section-7 .div-block-22{
height: 100% !important; /* Item streckt bis zur Zeilenhöhe */
display: flex;
align-items: center;
}
}
/* Apple > Kontakt: rechte Spalte (Map) wirklich bis zum Rand füllen */
body.apple #Kontakt .div-2{
/* Spalten-Wrapper muss selbst Höhe haben */
min-height: 360px; /* wie linke Card (.div) */
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden; /* runde Ecken sauber */
}
body.apple #Kontakt .div-2 > .w-embed,
body.apple #Kontakt .div-2 > .w-embed.w-iframe{
/* der Webflow-Embed-Wrapper */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
padding: 0; /* falls Webflow Padding setzt */
}
body.apple #Kontakt .div-2 .map-card{
/* deine innere Card-Hülle */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
border-radius: inherit;
overflow: hidden;
}
body.apple #Kontakt .div-2 .map-card iframe{
/* endlich das iFrame selbst */
flex: 1 1 auto;
width: 100% !important;
height: 100% !important;
min-height: 360px; /* Sicherheitsnetz */
border: 0;
display: block;
border-radius: inherit;
}
/* ==============================
Apple – Mobile Polish (nur Apple-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.apple .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.apple .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.apple .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.apple .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.apple .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
max-width: var(--page-max) !important;
margin-inline: auto !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
body.apple .section-7 .div-block-22{ min-height: 110px; }
body.apple .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8)
– Links/Rechts-Rand + schöne Heading-Typo sind bereits global drin.
Hier nur kleine Mobile-Korrekturen. */
@media (max-width: 767px){
body.apple .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.apple .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.apple .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.apple .kontakt .div,
body.apple .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.apple .kontakt .div,
body.apple .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.apple .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.apple .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline (ist global aktiv),
hier nur leichte Mobile-Abstände. */
@media (max-width: 767px){
body.apple section h2:first-of-type{ margin-bottom: 10px; }
body.apple .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar: CTA „Jetzt Anrufen“ auf Phone ausblenden (bereits global),
hier nochmal nur für Apple sicherstellen. */
@media (max-width: 767px){
body.apple .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Apple Hero: gleiches Text-Layout & Seitenabstände wie Index-Hero */
body.apple .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop wie Index zentriert */
text-align: center;
max-width: 760px; /* wie .hero-v2__inner--center auf der Startseite */
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände wie Index-Hero */
@media (max-width: 767px){
body.apple .modell-hero-v2{ text-align: left; } /* überschreibt center aus dem Hero */
body.apple .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.apple .modell-hero-v2__sub{
margin-left: 0; /* Subtext bündig zur Überschrift */
margin-right: 0;
}
}
/* Samsung-Seite – 3-Schritte-Karten: gleiche Höhe */
body.samsung .section-7 .container-14{
align-items: stretch !important; /* Grid-Items füllen die Zeile */
}
body.samsung #Kontakt .w-layout-blockcontainer.container-3.w-container {
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (min-width: 992px){
body.samsung .section-7 .div-block-22{
height: 100% !important; /* Item streckt bis zur Zeilenhöhe */
display: flex;
align-items: center;
}
}
/* Samsung > Kontakt: rechte Spalte (Map) wirklich bis zum Rand füllen */
body.samsung #Kontakt .div-2{
/* Spalten-Wrapper muss selbst Höhe haben */
min-height: 360px; /* wie linke Card (.div) */
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden; /* runde Ecken sauber */
}
body.samsung #Kontakt .div-2 > .w-embed,
body.samsung #Kontakt .div-2 > .w-embed.w-iframe{
/* der Webflow-Embed-Wrapper */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
padding: 0; /* falls Webflow Padding setzt */
}
body.samsung #Kontakt .div-2 .map-card{
/* innere Card-Hülle */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
border-radius: inherit;
overflow: hidden;
}
body.samsung #Kontakt .div-2 .map-card iframe{
/* das iFrame selbst */
flex: 1 1 auto;
width: 100% !important;
height: 100% !important;
min-height: 360px; /* Sicherheitsnetz */
border: 0;
display: block;
border-radius: inherit;
}
/* ==============================
Samsung – Mobile Polish (nur Samsung-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.samsung .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.samsung .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.samsung .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.samsung .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.samsung .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
}
body.samsung .section-7 .div-block-22{ min-height: 110px; }
body.samsung .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8) – kleine Mobile-Korrekturen */
@media (max-width: 767px){
body.samsung .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.samsung .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.samsung .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.samsung .kontakt .div,
body.samsung .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.samsung .kontakt .div,
body.samsung .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.samsung .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.samsung .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline – leichte Mobile-Abstände */
@media (max-width: 767px){
body.samsung section h2:first-of-type{ margin-bottom: 10px; }
body.samsung .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar-CTA auf Phone ausblenden (nur Samsung) */
@media (max-width: 767px){
body.samsung .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Samsung Hero: gleiches Text-Layout & Seitenabstände wie Index/Apple */
body.samsung .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop zentriert */
text-align: center;
max-width: 760px;
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände */
@media (max-width: 767px){
body.samsung .modell-hero-v2{ text-align: left; }
body.samsung .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.samsung .modell-hero-v2__sub{
margin-left: 0;
margin-right: 0;
}
}
/* ==============================
Huawei – Mobile Polish (nur Huawei-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.huawei .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.huawei .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.huawei .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.huawei .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.huawei .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
}
body.huawei .section-7 .div-block-22{ min-height: 110px; }
body.huawei .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8) – kleine Mobile-Korrekturen */
@media (max-width: 767px){
body.huawei .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.huawei .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.huawei .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.huawei .kontakt .div,
body.huawei .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.huawei .kontakt .div,
body.huawei .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.huawei .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.huawei .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline – leichte Mobile-Abstände */
@media (max-width: 767px){
body.huawei section h2:first-of-type{ margin-bottom: 10px; }
body.huawei .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar-CTA auf Phone ausblenden (nur Huawei) */
@media (max-width: 767px){
body.huawei .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Huawei Hero: gleiches Text-Layout & Seitenabstände wie Index/Apple */
body.huawei .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop zentriert */
text-align: center;
max-width: 760px;
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände */
@media (max-width: 767px){
body.huawei .modell-hero-v2{ text-align: left; }
body.huawei .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.huawei .modell-hero-v2__sub{
margin-left: 0;
margin-right: 0;
}
}
/* ==============================
Xiaomi – Mobile Polish (nur Xiaomi-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.xiaomi .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.xiaomi .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.xiaomi .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.xiaomi .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.xiaomi .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
}
body.xiaomi .section-7 .div-block-22{ min-height: 110px; }
body.xiaomi .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8) – kleine Mobile-Korrekturen */
@media (max-width: 767px){
body.xiaomi .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.xiaomi .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.xiaomi .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.xiaomi .kontakt .div,
body.xiaomi .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.xiaomi .kontakt .div,
body.xiaomi .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.xiaomi .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.xiaomi .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline – leichte Mobile-Abstände */
@media (max-width: 767px){
body.xiaomi section h2:first-of-type{ margin-bottom: 10px; }
body.xiaomi .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar-CTA auf Phone ausblenden (nur Xiaomi) */
@media (max-width: 767px){
body.xiaomi .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Xiaomi Hero: gleiches Text-Layout & Seitenabstände wie Index/Apple */
body.xiaomi .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop zentriert */
text-align: center;
max-width: 760px;
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände */
@media (max-width: 767px){
body.xiaomi .modell-hero-v2{ text-align: left; }
body.xiaomi .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.xiaomi .modell-hero-v2__sub{
margin-left: 0;
margin-right: 0;
}
}
/* ==============================
Sony – Mobile Polish (nur Sony-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.sony .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.sony .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.sony .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.sony .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.sony .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
}
body.sony .section-7 .div-block-22{ min-height: 110px; }
body.sony .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8) – kleine Mobile-Korrekturen */
@media (max-width: 767px){
body.sony .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.sony .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.sony .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.sony .kontakt .div,
body.sony .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.sony .kontakt .div,
body.sony .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.sony .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.sony .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline – leichte Mobile-Abstände */
@media (max-width: 767px){
body.sony section h2:first-of-type{ margin-bottom: 10px; }
body.sony .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar-CTA auf Phone ausblenden (nur Sony) */
@media (max-width: 767px){
body.sony .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Sony Hero: gleiches Text-Layout & Seitenabstände wie Index/Apple */
body.sony .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop zentriert */
text-align: center;
max-width: 760px;
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände */
@media (max-width: 767px){
body.sony .modell-hero-v2{ text-align: left; }
body.sony .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.sony .modell-hero-v2__sub{
margin-left: 0;
margin-right: 0;
}
}
/* ==============================
Sony – Mobile Polish (nur Sony-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.google .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.google .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.google .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.google .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.google .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
}
body.google .section-7 .div-block-22{ min-height: 110px; }
body.google .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8) – kleine Mobile-Korrekturen */
@media (max-width: 767px){
body.google .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.google .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.google .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.google .kontakt .div,
body.google .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.google .kontakt .div,
body.google .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.google .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.google .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline – leichte Mobile-Abstände */
@media (max-width: 767px){
body.google section h2:first-of-type{ margin-bottom: 10px; }
body.google .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar-CTA auf Phone ausblenden (nur Sony) */
@media (max-width: 767px){
body.google .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Sony Hero: gleiches Text-Layout & Seitenabstände wie Index/Apple */
body.google .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop zentriert */
text-align: center;
max-width: 760px;
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände */
@media (max-width: 767px){
body.google .modell-hero-v2{ text-align: left; }
body.google .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.google .modell-hero-v2__sub{
margin-left: 0;
margin-right: 0;
}
}
/* ==============================
Sony – Mobile Polish (nur Sony-Seite)
============================== */
/* 1) 3-Schritte-Karten (Section .section-7) */
body.htc .section-7 .container-14{
align-items: stretch; /* gleiche Höhe in der Reihe */
}
body.htc .section-7 .div-block-22{ /* Karte selbst */
display: flex; align-items: center; gap: 14px;
min-height: 120px; /* Design bleibt, aber tappbar */
}
body.htc .section-7 .div-block-23{ /* runder Nummern-Badge */
flex: 0 0 auto; width: 40px; height: 40px;
}
@media (max-width: 991px){
body.htc .section-7 .container-14{
grid-template-columns: 1fr 1fr; /* Tablet: 2 Spalten */
}
}
@media (max-width: 767px){
body.htc .section-7 .container-14{
grid-template-columns: 1fr; /* Phone: 1 Spalte */
gap: 14px;
}
body.htc .section-7 .div-block-22{ min-height: 110px; }
body.htc .section-7 .div-block-23{ width: 36px; height: 36px; }
}
/* 2) Modelle-Section (.section-8) – kleine Mobile-Korrekturen */
@media (max-width: 767px){
body.htc .section-8 .container-15{
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* 3) Kontakt-Section (.kontakt) – Grid aufspalten, gleiche Paddings */
body.htc .kontakt .w-layout-blockcontainer.container-3{
/* gleiche Innenränder wie andere Abschnitte */
max-width: 1440px !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
@media (max-width: 991px){
body.htc .kontakt .div-block-4{ /* 2-Spalten-Grid → 1 Spalte */
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
row-gap: 18px;
}
}
/* Karten-Optik beibehalten, aber responsiv */
body.htc .kontakt .div,
body.htc .kontakt .div-2{
background: #fff;
border: 1px solid rgba(2,6,23,.08);
border-radius: 16px;
box-shadow: var(--shadow, 0 8px 24px rgba(2,6,23,.08));
overflow: hidden;
}
@media (max-width: 767px){
body.htc .kontakt .div,
body.htc .kontakt .div-2{
border-radius: 14px;
}
}
/* Map soll die ganze Karte füllen (Fallback, falls Inline-Style fehlt) */
body.htc .kontakt .div-2 .map-card{
display: flex; flex-direction: column; height: 100%;
}
body.htc .kontakt .div-2 .map-card iframe{
width: 100%; height: 100%; min-height: 320px; border: 0;
}
/* 4) Überschriften: linksbündig + Underline – leichte Mobile-Abstände */
@media (max-width: 767px){
body.htc section h2:first-of-type{ margin-bottom: 10px; }
body.htc .section-sub{ margin-bottom: 14px; }
}
/* 5) Navbar-CTA auf Phone ausblenden (nur Sony) */
@media (max-width: 767px){
body.htc .waves-navbar-1 .waves---nav-cta{ display: none !important; }
}
/* Sony Hero: gleiches Text-Layout & Seitenabstände wie Index/Apple */
body.htc .modell-hero-v2__inner--center{
display: flex;
flex-direction: column;
align-items: center; /* Desktop zentriert */
text-align: center;
max-width: 760px;
margin: 0 auto;
padding-left: clamp(16px, var(--page-gutter, 5vw), 28px);
padding-right: clamp(16px, var(--page-gutter, 5vw), 28px);
}
/* Mobile: linksbündig + gleiche Innenabstände */
@media (max-width: 767px){
body.htc .modell-hero-v2{ text-align: left; }
body.htc .modell-hero-v2__inner--center{
align-items: flex-start;
}
body.htc .modell-hero-v2__sub{
margin-left: 0;
margin-right: 0;
}
}
/* Kontakt – Map soll die ganze Karte füllen (alle Marken) */
.kontakt .div-2{
/* rechte Spalte (= Map-Card) selbst höhenfähig machen */
min-height: 360px; /* matcht die linke Card */
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden; /* saubere runde Ecken */
}
.kontakt .div-2 > .w-embed,
.kontakt .div-2 > .w-embed.w-iframe{
/* Webflow-Embed-Wrapper */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
}
.kontakt .div-2 .map-card{
/* innere Map-Hülle */
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
border-radius: inherit;
overflow: hidden;
}
.kontakt .div-2 .map-card iframe{
/* das iFrame selbst füllt die Card */
flex: 1 1 auto;
width: 100% !important;
height: 100% !important;
min-height: 360px; /* Sicherheitsnetz */
display: block;
border: 0;
border-radius: inherit;
}
/* Optional: gleiche Höhe der zwei Kontakt-Spalten erzwingen */
.kontakt .div-block-4{ align-items: stretch; }
/* HERO: Detailseite hart zentrieren */
.modell-section-11 .modell-hero-v2,
.modell-hero-v2 {
text-align: center !important;
}
.modell-section-11 .modell-hero-v2__inner,
.modell-hero-v2__inner--center {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
max-width: 760px !important;
}
.modell-section-11 .modell-hero-v2__copy {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100%;
}
@media (max-width: 767px) {
.modell-section-11 .modell-hero-v2__copy {
padding-top: 20px !important;
}
}
.modell-hero-v2__title,
.modell-hero-v2__sub {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* ---------- DETAILSEITE: HERO / HANDYBILD GRÖSSER ---------- */
.detail-hero .phone-image img,
.modell-hero-card .phone-image img,
.modell-price-hero .phone-image img,
.modell-device-card img {
width: min(240px, 32vw);
height: auto;
border-radius: 16px;
box-shadow: 0 10px 28px rgba(17, 24, 39, .16);
}
/* ---------- DETAILSEITE: PREISTABELLE ALS CARDS ---------- */
/* Der Wrapper wird per JS als .modell-price-table markiert */
.modell-price-table table {
width: 100%;
border-collapse: separate;
border-spacing: 0 12px; /* „Karten“-Abstand */
}
.modell-price-table thead { display: none; } /* Header ausblenden */
.modell-price-table tbody tr {
display: grid;
grid-template-columns: 1fr auto; /* Service | Preis */
align-items: center;
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
overflow: hidden;
}
.modell-price-table tbody td {
padding: 16px 20px;
border: 0;
}
.modell-price-table tbody td.cell-service {
font-weight: 600;
color: #0f172a; /* dunkles Blau/Schwarz wie auf Brand-Seiten */
}
.modell-price-table tbody td.cell-price {
font-weight: 800;
font-size: 1.125rem; /* deutlicher */
text-align: right;
white-space: nowrap;
color: #0f6cf5; /* Primärfarbe – bei Bedarf anpassen */
}
/* Alle anderen (z.B. ehemalige Dauer-/Aktion-Zellen) ausblenden */
.modell-price-table tbody td:not(.cell-service):not(.cell-price) {
display: none;
}
/* Responsive Feinschliff */
@media (max-width: 768px) {
.modell-price-table tbody tr { grid-template-columns: 1fr auto; }
.modell-price-table tbody td { padding: 14px 16px; }
}
/* --- Intro über der Preisliste --- */
.price-card__intro{margin:0 0 14px}
.price-title{
margin:0 0 10px;
font-size:1.375rem; /* etwas größer als Standard h3 */
line-height:1.2;
letter-spacing:.2px;
color:#0f172a;
}
.benefit-chips{
display:flex; flex-wrap:wrap;
gap:10px; list-style:none; padding:0; margin:0;
}
.benefit-chips li{
display:flex; align-items:center; gap:8px;
padding:6px 12px; border-radius:999px;
background:#f1f5f9; /* helles Slate */
font-weight:600; color:#0f172a;
}
.benefit-chips li::before{
content:"✓"; font-weight:900; opacity:.7;
}
.benefit-chips .muted{ color:#64748b; font-weight:500 }
/* max Breite für den rechten Content, damit Zeilen ruhig laufen */
.detail-two-col > div:last-child{ max-width:560px }
/* Mobile Feinschliff */
@media (max-width:900px){
.price-title{ font-size:1.25rem; margin-bottom:8px }
.benefit-chips{ gap:8px }
.benefit-chips li{ padding:6px 10px }
}
/* Intro über Bild & Preise */
.detail-intro{
margin: 0 0 18px;
}
/* Unterüberschrift-Style: groß + kräftig */
.price-title{
margin: 0 8px 10px 0;
font-weight: 800;
line-height: 1.2;
letter-spacing: .2px;
/* schön responsiv: min 1.6rem, max 2.2rem */
font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
color: #0f172a;
}
/* Chips bleiben, nur leicht enger */
.benefit-chips{
display:flex; flex-wrap:wrap; gap:10px;
list-style:none; padding:0; margin:0;
}
.benefit-chips li{
display:flex; align-items:center; gap:8px;
padding:6px 12px; border-radius:999px;
background:#f1f5f9; font-weight:600; color:#0f172a;
}
.benefit-chips li::before{ content:"✓"; font-weight:900; opacity:.7 }
.benefit-chips .muted{ color:#64748b; font-weight:500 }
/* Max-Breite für sauberere Zeilen */
.detail-intro, .detail-two-col > div:last-child{ max-width: 720px }
/* Mobile Feinschliff */
@media (max-width: 900px){
.price-title{ font-size: clamp(1.4rem, 1.1rem + 2vw, 1.9rem); }
.benefit-chips{ gap:8px }
.benefit-chips li{ padding:6px 10px }
}
/* Max-Width für alle Standard-Container auf 1440px anheben */
.w-layout-blockcontainer,
.w-container,
.leistungen-section,
.div-block-21{
max-width: 1440px !important;
}
/* Brand-Text statt Bildlogo */
.waves---nav-brand-link{ height:auto !important; display:flex; align-items:center; }
.waves---brand{ display:none !important; } /* altes Bildlogo ausblenden */
.brand-text{
font-weight: 900;
letter-spacing: .2px;
font-size: clamp(20px, 2.2vw, 28px);
color: #0f172a;
text-decoration: none;
line-height: 1;
display: inline-flex;
align-items: center;
}
/* Optional: leichte Markenfarbe als Akzent */
.brand-text:hover{ color: var(--brand-600, #0ea5e9); }
/* Footer-Brand als Text */
.footer-brand{
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
}
.footer-brand .brand-text--footer{
font-weight:900;
letter-spacing:.2px;
font-size:clamp(18px,1.6vw,24px);
line-height:1;
color:#ffffff;
}
.footer-brand:hover .brand-text--footer{
color:var(--brand-600, #0ea5e9);
}
/* falls das alte Bild noch irgendwo im Footer steckt */
footer .waves---brand{ display:none !important; }
/* ============================
Mobile-Optimierung (<= 767px)
============================ */
@media (max-width: 767px){
/* 0) Container-Padding auf Handy */
.w-layout-blockcontainer,
.w-container{
padding-left: 16px !important;
padding-right: 16px !important;
}
/* 1) Intro-Titel & Chips kompakter */
.detail-intro{ margin-bottom: 12px; }
.price-title{
font-size: clamp(1.35rem, 4.6vw, 1.7rem); /* Unterüberschrift gut lesbar */
margin-bottom: 8px;
letter-spacing: .2px;
}
.benefit-chips{ gap: 8px; }
.benefit-chips li{ padding: 6px 10px; font-weight: 600; }
.benefit-chips .muted{ font-weight: 500; }
/* 2) Zwei Spalten stacken, Luft reduzieren */
.detail-two-col{
grid-template-columns: 1fr;
gap: 16px;
}
.detail-device{ justify-content: center; }
#model-image{ max-width: 280px; }
/* 3) Preisliste: dichter & klar */
.price-card{ border-radius: 12px; box-shadow: 0 8px 22px rgba(2,6,23,.08); }
.price-card__head{
padding: 12px 16px;
grid-template-columns: 1fr auto;
font-size: 0.95rem;
}
.price-card__row{
padding: 12px 16px;
gap: 8px;
grid-template-columns: auto 1fr auto; /* Service | Dots | Preis */
}
.cell-service{ font-size: 0.98rem; line-height: 1.2; }
.cell-leader{ border-bottom-width: 2px; transform: translateY(1px); }
.cell-price{ font-size: 1rem; padding: 6px 10px; }
/* 4) Navbar/Buttons nicht überdominant */
.waves-navbar-1{ height: 64px; }
.waves---nav-cta{ height: 44px !important; padding: 0 14px !important; }
/* 5) Allgemein: horizontales Scrollen verhindern */
html, body{ overflow-x: clip; }
}
/* === Brand-Overrides für Webflow-Klassen === */
/* Vollflächen-Buttons auf Markenfarbe mappen */
.button, .button-3, .button-5, .button-7 {
background: var(--brand) !important;
color: #fff !important;
border-color: transparent !important;
}
.button:hover, .button-3:hover, .button-5:hover, .button-7:hover {
background: var(--brand-600) !important;
}
/* Outline-/Ghost-Buttons */
.button-2, .button-4, .button-6 {
background:#fff !important;
color: var(--brand) !important;
border: 2px solid var(--brand) !important;
}
.button-2:hover, .button-4:hover, .button-6:hover {
background: var(--brand-50) !important;
}
/* Kontaktlink-Hover */
.contact-link:hover{ color: var(--brand) !important; }
/* Runder Schrittzähler (1–2–3) */
.div-block-23{ background-color: var(--brand) !important; }
/* Kacheln/Listen-Hover, die vorher blau gerahmt wurden */
.display:hover{
background-color:#fff !important;
border: 1px solid var(--brand) !important;
}
.modell-hero-v2{
background:
radial-gradient(120% 120% at 85% 10%, rgba(244,162,30,.14), transparent 60%),
radial-gradient(90% 90% at 0% 100%, rgba(255,211,106,.10), transparent 60%),
#0b1020;
color:#fff;
}
.section-2 .w-container::before{
background:
radial-gradient(600px 200px at 12% 0%, rgba(244,162,30,.10), transparent 60%),
radial-gradient(520px 180px at 88% 100%, rgba(255,211,106,.08), transparent 60%);
}
.benefits__container::before{
background:
radial-gradient(580px 200px at 8% 0%, rgba(244,162,30,.08), transparent 60%),
radial-gradient(520px 180px at 92% 100%, rgba(255,211,106,.06), transparent 60%);
}
/* === Mega Menu: auf Markenfarben umstellen === */
.mega-all,
.mega-more{
color: var(--brand) !important;
}
.mega-list a:hover{
background: var(--brand-50) !important; /* statt #f7fbff */
color: var(--brand) !important; /* statt #0ea5e9 */
}
/* === Vorteile-Icons: Markenfarbe === */
.benefits__icon{
color: var(--brand) !important; /* Iconfarbe */
background: color-mix(in oklab, var(--brand) 14%, #fff) !important;
/* Fallback ohne color-mix(): */
/* background: var(--brand-50) !important; */
}
/* Brand-Kacheln/Service-Karten: blaues Hover -> Markenfarbe */
.display:hover{
background-color: #fff !important;
border: 1px solid var(--brand) !important;
/* sanfter Schatten in Markenfarbe */
box-shadow: 0 8px 20px color-mix(in oklab, var(--brand) 18%, transparent) !important;
}
/* Fallback ohne color-mix(): */
/* .display:hover{ box-shadow: 0 8px 20px rgba(0,0,0,.08) !important; } */
/* Buttons: kein blauer Outline-Rand mehr auf Hover */
.button:hover{
border: 1px solid var(--brand) !important;
background-color: var(--brand-50) !important;
color: #000 !important;
}
/* ==== Brand Cards: einheitliches Gold beim Hover/Focus ==== */
/* Globale Site-Brand (falls noch nicht vorhanden) */
:root{
--site-brand: #F4A21E; /* Gold (Primär) */
--site-brand-50: #FFF3E0; /* sehr helles Gold für Flächen */
--site-brand-700: #8A5600; /* deutlich dunkler für Ränder/Focus */
}
/* Hover: NICHT die lokale --brand der Karte benutzen! */
.brand-grid .brand-card{
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.brand-grid .brand-card:hover{
background: var(--site-brand-50) !important;
border-color: var(--site-brand-700) !important;
box-shadow: 0 10px 24px color-mix(in oklab, var(--site-brand) 18%, transparent) !important;
transform: translateY(-2px);
}
/* Tastatur-Fokus sichtbar & markenkonform */
.brand-grid .brand-card:focus-visible{
outline: 3px solid var(--site-brand-700) !important;
outline-offset: 2px;
}
/* Active (Maus gedrückt) minimal dunkler */
.brand-grid .brand-card:active{
background: color-mix(in oklab, var(--site-brand-50) 88%, var(--site-brand-700)) !important;
box-shadow: 0 6px 18px color-mix(in oklab, var(--site-brand) 14%, transparent) !important;
}
/* Hero-Eyebrow in Markenfarben (übersteuert Blau) */
.hero-v2__eyebrow{
background: var(--brand-50) !important; /* helles Gold */
color: var(--brand) !important; /* Primärgold */
border: 1px solid
color-mix(in oklab, var(--brand) 36%, transparent) !important; /* dunklere Kante */
box-shadow: 0 2px 8px
color-mix(in oklab, var(--brand) 16%, transparent) !important;
}
/* Fallback falls color-mix() fehlt:
.hero-v2__eyebrow{ border:1px solid var(--brand-600) !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; } */
/* ==== KONTRAST-BOOST FÜR LIGHT THEME ==== */
/* dunklere, neutralere Grundtexte */
html, body{ color:#0f172a !important; }
h1,h2,h3{ color:#0b1325 !important; }
/* markenfarbige Tokens mit dunkler Abstufung */
:root{
--site-brand: #F4A21E; /* Gold (Primär) */
--site-brand-600: #C97E10; /* dunkler für Hover/Borders */
--site-brand-700: #8A5600; /* stark dunkler für Konturen */
--site-brand-50: #FFF1D6; /* helles Gold für Chips/Hintergründe */
}
/* 1) Hero-Eyebrow: heller Chip, dunkle Kontur + bessere Lesbarkeit */
.hero-v2__eyebrow{
background: var(--site-brand-50) !important;
color:#1b1f2a !important; /* sehr dunkler Text */
border:1px solid var(--site-brand-700) !important; /* satte Kante */
box-shadow:0 2px 10px rgba(0,0,0,.10) !important;
letter-spacing:.2px; font-weight:700;
}
/* 2) Primärbuttons: satter Hintergrund, dunkler Text für 7:1 Kontrast */
.btn.btn--primary,
.w-button.button,
.button-3,.button-5,.button-7{
background: var(--site-brand) !important;
color:#1b1f2a !important; /* statt Weiß -> besser lesbar auf Gold */
border:2px solid var(--site-brand-700) !important; /* klare Kante */
}
.btn.btn--primary:hover,
.button-3:hover,.button-5:hover,.button-7:hover{
background:#FFC44A !important; /* etwas dunkler/kräftiger als vorher */
}
/* 3) Ghost/Outline-Buttons: stärkere Linie + klarer Hover */
.btn.btn--ghost,
.button-2,.button-4,.button-6{
background:#fff !important;
color:var(--site-brand-700) !important;
border:0.18em solid var(--site-brand-700) !important;
}
.btn.btn--ghost:hover,
.button-2:hover,.button-4:hover,.button-6:hover{
background: var(--site-brand-50) !important;
}
/* 4) Service-Karten: dunklere Icons & Titel, hellerer Textkörper */
.leistung-card{
background:#fff !important;
border:1px solid rgba(15,23,42,.10) !important;
box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
}
.leistung-card h3{ color:#0b1325 !important; }
.leistung-card p{ color:#374151 !important; } /* dunkleres Grau statt #555 */
/* 5) Vorteile-Icons: Chip hellgold, Icon kräftig */
.benefits__icon{
color: var(--site-brand-700) !important; /* Symbol dunkelgold */
background: var(--site-brand-50) !important; /* Chip hellgold */
border:1px solid var(--site-brand-600) !important; /* definierte Kante */
}
/* 6) Brand-Karten Hover: deutlicher Rahmen + neutraler Text */
.brand-card:hover{
background:#fff !important;
border-color: var(--site-brand-700) !important;
box-shadow:0 10px 24px rgba(0,0,0,.12) !important;
}
/* 7) Mini-Akzente (Eyebrow-Badges/Tiny Labels) */
.section-eyebrow, .modell-hero-v2__eyebrow{
background: var(--site-brand-50);
color:#1b1f2a;
border:1px solid var(--site-brand-600);
}
/* A) Titel sicher lesbar halten – weiß + weicher dunkler Glow */
.hero-v2__title, .modell-hero-v2__title{
color:#fff !important;
text-shadow:
0 2px 8px rgba(0,0,0,.45),
0 0 1px rgba(0,0,0,.35); /* feiner Kontur-Effekt */
}
/* Unterzeile etwas heller & mit Mini-Glow */
.hero-v2__sub, .modell-hero-v2__sub{
color:#EDEFF3 !important;
text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* B) dunkles Overlay hinter dem Text (stört das Bild kaum, Kontrast +) */
.hero-v2, .modell-hero-v2{ position: relative; overflow: hidden; }
.hero-v2::before, .modell-hero-v2::before{
content:"";
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(6,12,22,.55) 0%, rgba(6,12,22,.50) 40%, rgba(6,12,22,.35) 100%);
pointer-events:none; z-index:0;
}
/* Text über das Overlay heben */
.hero-v2__inner, .modell-hero-v2__inner{ position:relative; z-index:1; }
/* Optional: oben im Bild noch ein Spot abdunkeln (rechts/oben), falls Tools etc. stören */
.hero-v2::after, .modell-hero-v2::after{
content:"";
position:absolute; inset:0;
background: radial-gradient(70% 60% at 80% 10%, rgba(0,0,0,.35), transparent 60%);
pointer-events:none; z-index:0;
}
/* ===== Theme Toggle Button ===== */
.theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:999px;
border:1.5px solid rgba(0,0,0,.14);
background:#fff; color:#111; font-size:18px; line-height:1;
cursor:pointer; margin-right:10px;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:.2s ease;
}
.theme-toggle:hover{ transform: translateY(-1px); }
html[data-theme="dark"] .theme-toggle{
background:#0f1422; color:#ffe08a; border-color:rgba(255,255,255,.18);
}
/* Optionale weiche Übergänge beim Theme-Wechsel */
html, body, .leistung-card, .benefits__card, .brand-card, .map-card, .mega {
transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Grundfarben */
:root{
--site-brand: #F4A21E;
--site-brand-700: #8A5600; /* dunkleres Gold/Braun */
}
/* aktiver Link deutlich dunkler + fetter */
.waves---nav-link.w--current,
.w-nav-link.w--current{
color:#0b1325 !important; /* sehr dunkles Grau (starker Kontrast) */
font-weight:800 !important;
}
/* Unterstrich: breiter, dunkler, näher am Text */
.waves---nav-link,
.w-nav-link{ position:relative; }
.waves---nav-link.w--current::after,
.w-nav-link.w--current::after{
content:"";
position:absolute; left:0; right:0; bottom:1px;
height:3px; background:var(--site-brand-700);
border-radius:2px;
}
/* Hover auch etwas dunkler, aber ohne Verwechslung mit aktiv */
.waves---nav-link:hover,
.w-nav-link:hover{ color:#1b2435 !important; }
/* ==== Navbar: Active vs. Hover (nur Farben/Underline) ==== */
:root{
--nav-text: #8A5600; /* Textfarbe aktiv */
--nav-idle: #5a6474; /* Textfarbe normal */
--nav-hover: #8A5600; /* Hover-Farbe Text */
--nav-underline-hover: #F4A21E; /* Hover-Unterstrich (heller) */
--nav-underline-active:#8A5600; /* Aktiver Unterstrich (dunkler) */
}
/* Basistöne */
.w-nav-link,
.waves---nav-link{
position: relative; /* für ::after */
color: var(--nav-idle) !important;
}
/* Unterstrich-Element (Position näher am Text) */
.w-nav-link::after,
.waves---nav-link::after{
content:"";
position:absolute; left:0; right:0;
height:2px;
bottom:1px; /* << näher am Text (bei Bedarf -5/-4 testen) */
background: transparent;
transition: background .2s ease;
}
/* Hover NUR für nicht-aktive Links */
.w-nav-link:not(.w--current):hover,
.waves---nav-link:not(.w--current):hover{
color: var(--nav-hover) !important;
}
.w-nav-link:not(.w--current):hover::after,
.waves---nav-link:not(.w--current):hover::after{
background: var(--nav-underline-hover) !important;
}
/* Aktiver Link: kein Hover-Effekt, nur klare Farben */
.w-nav-link.w--current,
.waves---nav-link.w--current{
color: var(--nav-text) !important;
font-weight: 800; /* bleibt an Ort & Stelle */
}
.w-nav-link.w--current::after,
.waves---nav-link.w--current::after{
background: var(--nav-underline-active) !important;
}
/* Aktiv-Link reagiert nicht auf :hover (optisch identisch) */
.w-nav-link.w--current:hover,
.waves---nav-link.w--current:hover{
color: var(--nav-text) !important;
}
.w-nav-link.w--current:hover::after,
.waves---nav-link.w--current:hover::after{
background: var(--nav-underline-active) !important;
}
.div-block-7{
display: flex !important;
flex-direction: column !important;
}
.leistungen-section{max-width:1440px;margin:0 auto;padding:40px 20px;}
.leistungen-section h2{font-size:2rem;font-weight:800;margin:0 0 32px;text-align:center;}
.leistungen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.leistung-card{background:#fff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:24px;display:flex;align-items:center;gap:20px;transition:.25s ease;height:100%;}
.leistung-card img{height:88px;width:auto;flex-shrink:0;}
.lc-text{display:flex;flex-direction:column;gap:6px;text-align:left;}
.lc-text h3{font-size:1.1rem;font-weight:700;margin:0;}
.lc-text p{font-size:.95rem;line-height:1.45;color:#555;margin:0;}
@media (max-width: 991px){.leistungen-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width: 767px){.leistungen-grid{grid-template-columns:1fr;}.leistung-card{flex-direction:column;text-align:center;}.lc-text{text-align:center;}}
/* Mega-Menü Accessibility (optional) */
.mega { display:none; }
.mega[aria-hidden="false"] { display:block; }
/* Navbar-Logo sichtbar machen */
.waves---nav-brand-link{
height: 100% !important; /* statt 24px */
display: flex !important;
align-items: center !important;
}
.waves---brand{
height: 100% !important; /* füllt die 40px */
width: auto !important;
display: block !important;
}
.waves---brand img{
height: 32px !important; /* max Höhe */
width: auto !important;
max-width: 200px !important; /* max Breite */
object-fit: contain !important;
}
/* ===== Leistungen – sauberes, ruhiges Layout ===== */
.leistungen{
max-width: var(--page-max, 1100px);
margin-inline: auto;
}
.leistungen__head{
text-align: center;
margin-bottom: 24px;
}
.leistungen__head .eyebrow{
display:inline-block;
font-weight:700; letter-spacing:.06em; text-transform:uppercase;
font-size:.8rem; padding:6px 10px; border-radius:999px;
background:#eef6ff; color:#0ea5e9;
margin-bottom:8px;
}
.leistungen__head .title{ margin:0 0 8px; line-height:1.2; }
.leistungen__head .sub{ margin:0; color:#475569; }
.leistungen__grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
margin-top: 18px;
}
.lc{
display:flex; align-items:center; gap:16px;
background:#fff; border-radius:16px;
box-shadow: 0 8px 24px rgba(2,6,23,.06);
padding: 18px;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.lc__icon{ width:auto; height:84px; flex-shrink:0; }
.lc__txt{ display:flex; flex-direction:column; gap:4px; }
.lc__title{ margin:0; font-size:1.05rem; line-height:1.2; }
.lc__desc{ margin:0; color:#555; font-size:.98rem; line-height:1.45; }
/* CTA-Duo unter den Leistungen */
.cta-duo{
display:flex; align-items:center; justify-content:space-between;
gap: 18px;
max-width: var(--page-max, 1100px);
margin-inline: auto;
padding-inline: var(--page-gutter, clamp(20px,5vw,48px));
}
.cta-duo__text{ text-align:center; }
.cta-duo__title{ margin:0 0 4px; font-size:1.4rem; }
.cta-duo__sub{ margin:0; color:#475569; }
.cta-duo__buttons{ display:flex; gap: 14px; justify-content:center; }
/* Responsive Anpassungen */
@media (max-width: 991px){
.leistungen__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
.leistungen__grid{ grid-template-columns: 1fr; gap:12px; }
.lc{ padding:14px; border-radius:12px; }
.lc__icon{ height:72px; }
.cta-duo{ flex-direction:column; text-align:center; }
}
/* ===== Markenfarben/Vars (falls nicht vorhanden) ===== */
:root{
--brand-gold: #f4b000;
--ink-700: #0f172a; /* dunkler Text */
--ink-500: #475569; /* Sekundärtext */
--card-bg: #ffffff;
--card-shadow: 0 8px 24px rgba(2,6,23,.06);
--radius-lg: 16px;
}
/* ===== Section Head (einheitlich für alle Sektionen) ===== */
.section-head{ text-align:left; margin:0 0 18px; }
.section-eyebrow{
display:inline-block; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
font-size:.78rem; padding:6px 12px; border-radius:999px;
background:#fff7e6; color:var(--brand-gold);
}
.section-title{ margin:8px 0 8px; line-height:1.2; color:var(--ink-700); }
.section-title--underline{
position:relative; padding-bottom:10px;
}
.section-title--underline::after{
content:""; position:absolute; left:0; bottom:0;
width:72px; height:4px; border-radius:4px; background:var(--brand-gold);
box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.section-sub{
margin:0; color:var(--ink-500);
font-size:1rem; line-height:1.5;
}
/* ===== Leistungen (nur Feinabstimmung – deine Grid-Styles bleiben) ===== */
.leistungen .section-head{ margin-bottom:14px; }
.leistungen__grid{ margin-top:18px; }
/* ===== FAQ ===== */
.section-faq{ padding-top:12px; }
.faq{
display:grid; gap:12px;
max-width: 900px; margin: 10px 0 0;
}
.faq__item{
background:var(--card-bg); border-radius:var(--radius-lg);
box-shadow: var(--card-shadow);
padding:0 18px;
}
.faq__q{
list-style:none; display:flex; align-items:center; justify-content:space-between;
gap:16px; cursor:pointer; padding:18px 0; margin:0; font-weight:700; color:var(--ink-700);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__chev{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; opacity:.7; transition:transform .2s ease; }
.faq__item[open] .faq__chev{ transform:rotate(180deg); }
.faq__a{ padding:0 0 16px 0; color:var(--ink-500); line-height:1.6; }
.container-13{
max-width: var(--page-max) !important;
margin-inline: auto !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
/* ===== Mobile Nav: Start unsichtbar, wird bei Eyebrow "glasig" ===== */
@media (max-width: 991px){
.waves-navbar-1{
transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease,
-webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
}
/* --- START: kein Balken (nur Logo + Burger sichtbar) --- */
.waves-navbar-1.start-overlay{
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Logo mittig im Overlay-/Glass-Zustand */
.waves-navbar-1 .waves---nav-container{ position: relative; }
.waves-navbar-1.start-overlay .waves---nav-brand-link,
.waves-navbar-1.glass-on .waves---nav-brand-link{
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
height: 32px; z-index: 3;
}
/* Falls du später Desktop/Layout änderst */
.waves-navbar-1:not(.start-overlay):not(.glass-on) .waves---nav-brand-link{
position: relative; left: auto; top: auto; transform: none;
}
/* Hamburger rechts als runder Chip */
.waves-navbar-1.start-overlay .w-nav-button,
.waves-navbar-1.glass-on .w-nav-button{
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 999px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(2,6,23,.08);
display: grid; place-items: center;
box-shadow: 0 6px 18px rgba(2,6,23,.18);
}
.waves-navbar-1 .w-nav-button .w-icon-nav-menu{ font-size: 18px; line-height: 1; }
/* --- TRIGGER: glasige Navbar, etwas transparenter --- */
.waves-navbar-1.glass-on{
background: rgba(255,255,255,.72) !important; /* << transparenter machen: .60–.80 */
border-bottom: 1px solid rgba(2,6,23,.08) !important;
-webkit-backdrop-filter: saturate(160%) blur(10px) !important;
backdrop-filter: saturate(160%) blur(10px) !important;
box-shadow: 0 6px 20px rgba(2,6,23,.08) !important;
}
/* Menü offen → solider Weiß-Balken für Lesbarkeit */
.waves-navbar-1.nav-open{
background: #fff !important;
border-bottom: 1px solid rgba(2,6,23,.12) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
box-shadow: 0 6px 20px rgba(2,6,23,.10) !important;
}
}
/* === Mobil: Navbar überlagert den Inhalt, Hero beginnt bei 0 === */
@media (max-width: 991px){
/* Navbar fixieren, damit sie keinen Platz belegt */
.waves-navbar-1{
position: fixed !important;
top: 0; left: 0; right: 0;
width: 100%;
z-index: 9999;
}
/* Start-Overlay- und Glas-Zustände weiter wie gehabt */
.waves-navbar-1.start-overlay{
background: transparent !important;
border-bottom: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.waves-navbar-1.glass-on{
background: rgba(255,255,255,.68) !important; /* gern .60–.75 anpassen */
border-bottom: 1px solid rgba(2,6,23,.08) !important;
-webkit-backdrop-filter: saturate(160%) blur(10px) !important;
backdrop-filter: saturate(160%) blur(10px) !important;
box-shadow: 0 6px 20px rgba(2,6,23,.08) !important;
}
/* Hero wirklich ganz nach oben */
header.hero-v2,
.hero-v2,
header.hero,
.hero,
.section-hero{
margin-top: 0 !important;
padding-top: 0 !important; /* Hintergrundbild startet bei 0 */
}
/* Nur der INHALT im Hero bekommt Abstand, damit Logo/Burger ihn nicht überdecken.
Passe die 72px bei Bedarf an. */
.hero-v2 .w-container,
.hero .w-container,
.section-hero .w-container{
padding-top: 72px !important; /* Inhalt runter, Bild bleibt oben */
}
}
/* === Hero nimmt auf Mobil 100% der Bildschirmhöhe ein === */
@media (max-width: 991px){
/* deine Hero-Section – nimm alle Varianten mit */
header.hero-v2,
.hero-v2,
header.hero,
.hero,
.section-hero{
min-height: 100vh; /* Fallback */
}
/* falls svh verfügbar (kleiner/initialer Viewport) */
@supports (height: 1svh){
header.hero.hero-v2,
header.hero-v2,
.hero-v2,
.hero,
.section-hero{ min-height: 100svh; }
}
/* noch besser: dynamischer Viewport (passt sich beim Scrollen an) */
@supports (height: 1dvh){
header.hero.hero-v2,
header.hero-v2,
.hero-v2,
.hero,
.section-hero{ min-height: 100dvh; }
}
/* Sicherstellen, dass kein externer Abstand den Hero kürzt */
header.hero-v2,
.hero-v2,
.hero,
.section-hero{
margin-top: 0 !important;
padding-top: 0 !important; /* Bild beginnt bei 0 (Nav ist fixed/overlay) */
}
/* Nur der INHALT bekommt oben etwas Luft, damit Logo/Burger nichts verdecken */
.hero-v2 .w-container,
.hero .w-container,
.section-hero .w-container{
padding-top: 72px !important; /* bei Bedarf anpassen */
}
}
/* Footer – Logo-Größe & Responsive Layout */
.waves-brand-footer-1 { height: 40px; width: auto; display:block; }
/* Mobile: Logo oben, Links darunter, mittig */
@media (max-width: 767px){
.waves-top-footer-1{ flex-direction: column; gap: 12px; align-items: center; }
.waves-top-right-footer-1{ flex-wrap: wrap; justify-content: center; gap: 12px; }
.waves-bottom-footer-1{ flex-direction: column; gap: 10px; text-align: center; }
.waves-bottom-right-footer-1{ justify-content: center; }
}
/* Footer: Logo & Blöcke responsiv */
.waves-brand-footer-1 { height:40px; width:auto; display:block; }
.footer-nap { max-width: 720px; }
@media (max-width: 767px){
.waves-top-footer-1 { flex-direction: column; gap: 12px; align-items: center; }
.waves-top-right-footer-1 { flex-wrap: wrap; justify-content: center; gap: 12px; }
.waves-bottom-footer-1 { flex-direction: column; gap: 10px; text-align: center; }
.waves-bottom-right-footer-1 { justify-content: center; }
.footer-hours { margin-top:8px; }
}
/* === Footer Reset/Grundstil === */
.site-footer{
background: radial-gradient(1200px 600px at 70% 0%, rgba(255,255,255,0.04), transparent) ,
linear-gradient(180deg, #0b1220 0%, #0b1220 100%); /* dunkel, clean */
color:#eef2f7;
border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer a{ color:#dbe7ff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-wrap{
max-width: 1200px; margin: 0 auto; padding: 32px 16px;
display: grid; gap: 28px;
grid-template-columns: 1.1fr 1fr 1fr;
}
.footer-col{ min-width: 0; }
.footer-title{
margin: 0 0 10px; font-size: 14px; letter-spacing:.02em; text-transform: uppercase;
color:#b9c7e6; font-weight:600;
}
.footer-logo img{ height: 44px; width:auto; display:block; }
.footer-nav, .footer-contact, .footer-links, .hours{
list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px;
}
.footer-nav{ grid-auto-rows: min-content; }
.footer-contact li, .footer-links li, .hours li{ color:#d4dbea; font-size:14px; }
address{ font-style: normal; line-height: 1.6; color:#d4dbea; margin: 0; }
/* Trenner unten */
.footer-bottom{
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 8px; padding: 14px 16px; text-align: center; color:#b9c7e6; font-size: 14px;
}
/* === Responsive === */
@media (max-width: 991px){
.footer-wrap{ grid-template-columns: 1fr 1fr; }
.footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
.footer-wrap{ grid-template-columns: 1fr; gap: 20px; }
.footer-bottom{ font-size: 13px; }
.footer-logo img{ height: 40px; }
}
/* kleine optische Korrekturen */
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li{ display: flex; align-items: center; gap: 8px; }
/* ===== Footer Polishing ===== */
/* Grundlayout + gleiche Ränder links/rechts */
.site-footer{
--footer-xpad: clamp(16px, 4vw, 32px);
--footer-gap: 28px;
--footer-col-title: #f4f7ff; /* bessere Lesbarkeit für Titel */
--footer-text: #d7def0;
--footer-link: #e6eeff;
}
.site-footer .footer-wrap{
max-width: 1200px;
margin: 0 auto;
padding: 36px var(--footer-xpad);
display: grid;
gap: var(--footer-gap);
grid-template-columns: 1.1fr 1fr 1fr; /* 3 saubere Spalten */
align-items: start;
}
/* Logo größer & sauber links */
.site-footer .footer-brand{ display: grid; gap: 14px; align-content: start; }
.site-footer .footer-logo img{ height: 56px; width: auto; display:block; }
/* Typo */
.site-footer .footer-title{
margin: 0 0 12px;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--footer-col-title);
font-weight: 700;
}
.site-footer address,
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li,
.site-footer .hours li{
color: var(--footer-text);
font-size: 14px;
line-height: 1.65;
}
.site-footer a{ color: var(--footer-link); text-decoration: none; }
.site-footer a:hover{ text-decoration: underline; }
/* Listen-Abstände */
.site-footer .footer-nav,
.site-footer .footer-contact,
.site-footer .footer-links,
.site-footer .hours{
margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px;
}
/* Unterer Balken */
.site-footer .footer-bottom{
border-top: 1px solid rgba(255,255,255,.08);
padding: 14px var(--footer-xpad);
text-align: center;
color: #b6c3df;
font-size: 14px;
}
/* ===== Tablet kompakter ===== */
@media (max-width: 991px){
.site-footer .footer-wrap{
gap: 22px;
grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten behalten */
padding-top: 28px;
}
.site-footer .footer-logo img{ height: 52px; }
}
/* ===== Phone: 3 Spalten, kompakt ===== */
@media (max-width: 767px){
.site-footer{ --footer-xpad: 14px; --footer-gap: 16px; }
.site-footer .footer-wrap{
grid-template-columns: repeat(3, 1fr); /* gewünscht: 3 Spalten auch mobil */
gap: 14px 10px;
padding: 22px var(--footer-xpad);
}
.site-footer .footer-title{ font-size: 12px; margin-bottom: 8px; }
.site-footer address,
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li,
.site-footer .hours li{
font-size: 12px;
line-height: 1.5;
}
.site-footer .footer-logo img{ height: 44px; }
.site-footer .footer-bottom{ font-size: 12px; padding: 10px var(--footer-xpad); }
}
/* sehr kleine Phones: noch enger */
@media (max-width: 380px){
.site-footer .footer-wrap{ gap: 12px 8px; }
.site-footer .footer-title{ font-size: 11.5px; }
.site-footer address,
.site-footer li{ font-size: 11.5px; }
}
/* ===== Footer Theme ===== */
.site-footer{
--footer-xpad: clamp(14px, 4vw, 32px);
--footer-gap: 28px;
--footer-col-title: #f6f8ff; /* Spaltentitel gut lesbar */
--footer-text: #d7def0; /* Basistext */
--footer-link: #e8efff; /* Links */
--footer-bg: #0b1220;
--footer-grad: radial-gradient(1100px 520px at 70% 0%, rgba(255,255,255,.05), transparent);
background: var(--footer-grad), var(--footer-bg);
color: var(--footer-text);
border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer .footer-wrap{
max-width: 1200px; margin:0 auto; padding: 32px var(--footer-xpad);
display:grid; gap: var(--footer-gap);
grid-template-columns: 1.1fr 1fr 1fr; /* 3 Spalten */
align-items:start;
}
.site-footer .footer-title{
margin:0 0 12px; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
color: #f5b40f !important; font-weight:700;
}
.site-footer a{ color: var(--footer-link); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer address,
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li,
.site-footer .hours li{
font-size:14px; line-height:1.65; color: var(--footer-text);
}
.site-footer .footer-nav,
.site-footer .footer-contact,
.site-footer .footer-links,
.site-footer .hours{
list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;
}
/* Unterer Balken mit kleinem Logo rechts */
.site-footer .footer-bottom{
border-top: 1px solid rgba(255,255,255,.08);
margin-top: 8px; padding: 12px var(--footer-xpad);
}
.footer-bottom-inner{
max-width:1200px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between; gap:12px;
color:#b9c7e6; font-size:14px;
}
.footer-mini-logo{ height:24px; width:auto; opacity:.95; }
/* Tablet */
@media (max-width: 991px){
.site-footer .footer-wrap{
grid-template-columns: repeat(3, 1fr); gap:22px;
padding-top: 26px;
}
.footer-mini-logo{ height:22px; }
}
/* Phone – kompakter, 3 Spalten beibehalten */
@media (max-width: 767px){
.site-footer .footer-wrap{
grid-template-columns: repeat(3, 1fr);
gap: 14px 10px; padding: 20px var(--footer-xpad);
}
.site-footer .footer-title{ font-size:12px; margin-bottom:8px; }
.site-footer address,
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li,
.site-footer .hours li{ font-size:12px; line-height:1.5; }
.footer-bottom-inner{ font-size:12px; }
.footer-mini-logo{ height:20px; }
}
/* sehr schmale Geräte */
@media (max-width: 380px){
.site-footer .footer-wrap{ gap: 12px 8px; }
}
/* --- Footer: Spalten-Header exakt bündig ausrichten --- */
.site-footer .footer-wrap{ align-items: start; } /* sicherheitshalber */
.site-footer .footer-col{ margin-top: 0 !important; padding-top: 0 !important; }
/* der leichte Versatz kommt i.d.R. von der ersten Spalte (.footer-brand) */
.site-footer .footer-brand{
margin-top: 0 !important;
padding-top: 0 !important;
gap: 0 !important; /* falls noch aus alten Styles ein Gap übrig war */
}
/* Titel haben überall exakt den gleichen Abstand */
.site-footer .footer-title{
margin-top: 0 !important;
margin-bottom: 10px !important; /* identisch in allen Spalten */
line-height: 1.2; /* gleiche optische Höhe */
}
/* Listen starten ohne Extra-Abstand */
.site-footer .footer-nav,
.site-footer .footer-contact,
.site-footer .footer-links,
.site-footer .hours{
margin-top: 8px !important;
}
/* --- Handy noch kompakter (3 Spalten behalten) --- */
@media (max-width: 767px){
.site-footer .footer-wrap{
grid-template-columns: repeat(3, 1fr);
gap: 12px 10px; /* etwas enger */
padding-top: 16px;
padding-bottom: 8px;
}
.site-footer .footer-title{ font-size: 11.5px; margin-bottom: 6px !important; }
.site-footer address,
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li,
.site-footer .hours li{
font-size: 12px; line-height: 1.45;
}
.site-footer .footer-bottom{ padding: 8px var(--xpad); }
}
/* ===== Footer: 3 Spalten wirklich in EINER Zeile (Mobile) ===== */
@media (max-width: 767px){
/* 1) Container: eine Zeile, kein Wrap */
.site-footer .footer-wrap{
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
padding-top: 25px !important;
padding-bottom: 8px !important;
overflow: hidden; /* verhindert zweite Zeile durch Grid-Zeilen */
}
/* 2) Jede Spalte nimmt exakt 1/3 Breite */
.site-footer .footer-col{
flex: 0 0 calc(100%/3) !important; /* 33.333% */
min-width: 0 !important; /* erlaubt Ellipsis */
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* 3) Überschriften bündig und kompakt */
.site-footer .footer-title{
margin: 0 0 6px !important;
font-size: 11.5px !important;
line-height: 1.2 !important;
}
/* 4) Listen einzeilig mit Ellipsis */
.site-footer .footer-nav,
.site-footer .footer-contact,
.site-footer .footer-links,
.site-footer .hours{
margin-top: 6px !important;
gap: 4px !important;
width: 100%;
}
.site-footer .footer-nav li,
.site-footer .footer-contact li,
.site-footer .footer-links li,
.site-footer .hours li,
.site-footer address{
white-space: nowrap; /* EINZEILIG */
overflow: hidden; /* zu lange Texte abschneiden */
text-overflow: ellipsis; /* … anhängen */
width: 100%;
font-size: 12px !important;
line-height: 1.45 !important;
}
/* 5) Unterer Balken etwas schlanker */
.site-footer .footer-bottom{ padding: 8px var(--xpad) !important; }
.footer-bottom-inner{ font-size: 12px !important; }
.footer-mini-logo{ height: 16px !important; }
}
/* Footer: Copyright mittig, kein Logo */
.footer-bottom-inner{
display:flex;
align-items:center;
justify-content:center; /* zentriert */
gap:0;
}
.footer-bottom-inner p{
margin:0;
text-align:center;
}
/* falls irgendwo noch .footer-mini-logo Styles existieren, sicherheitshalber ausblenden */
.footer-mini-logo{ display:none !important; }
.text-block-2{
margin-bottom: 0 !important;
}
/* === Reparatur-Modelle – Look wie vorher === */
.section-8 .models-grid{
display:grid;
grid-template-columns: repeat(4, minmax(200px,1fr));
gap: 28px 24px; /* mehr Luft zwischen Karten */
align-items: stretch;
}
/* größere Screens: ggf. 5 pro Reihe */
@media (min-width: 1400px){
.section-8 .models-grid{ grid-template-columns: repeat(5, minmax(200px,1fr)); }
}
/* Tablet / Mobile */
@media (max-width: 991px){
.section-8 .models-grid{ grid-template-columns: repeat(3, minmax(180px,1fr)); gap:22px 18px; }
}
@media (max-width: 767px){
.section-8 .models-grid{ grid-template-columns: repeat(2, minmax(160px,1fr)); gap:18px 14px; }
}
.section-8 .model-card{
text-decoration: none;
color: inherit;
padding: 14px;
background: #fff;
border: 1px solid var(--line);
transition: transform .18s ease, box-shadow .18s ease;
border-radius: var(--radius) !important;
box-shadow: var(--shadow) !important;
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
width: 100%;
height: 100%;
max-width: 100%;
flex-flow: column;
cursor: pointer;
}
.section-8 .model-card:hover{
transform: translateY(-2px);
border-radius: var(--radius) !important;
box-shadow: var(--shadow) !important;
}
/* Bilder optisch einheitlich wie vorher */
.section-8 .model-card img{
width: 100%;
height: 220px;
object-fit: contain;
background: #fff;
border-radius: 12px;
display: block;
margin: 0 auto;
max-width: 180px;
aspect-ratio: 1 / 1.05;
overflow: clip;
}
/* Titel kompakt wie vorher */
.section-8 .model-card h3{
font-size:14px;
font-weight:700;
line-height:1.3;
margin:0;
max-width:95%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Untertitel ausblenden (sah “nachher” zu voll aus) */
.section-8 .model-card p{ display:none; }
/* Button unten etwas Abstand */
#load-more{ margin-top: 24px; }
/* ===== Local Intro: optisch an dein Theme angelehnt ===== */
.section-local { padding: 56px 0 28px; }
.section-local .section-head { margin-bottom: 12px; } /* wie bei anderen Sektionen */
.section-local__lead {
max-width: 980px;
margin: 0 auto 22px;
line-height: 1.65;
}
.local-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten wie deine Karten-Layouts */
gap: 20px;
}
.local-card {
background: #ffffff;
border: 1px solid rgba(16,24,40,.06);
border-radius: 18px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
padding: 24px;
}
.local-card__title {
margin: 0 0 8px;
font-size: 1.1rem; /* matcht deine Card-Titel-Größe */
font-weight: 700;
}
.local-list { margin: 0 0 10px 18px; }
.local-list li { margin: 4px 0; }
.local-cta { margin-top: 8px; }
/* Buttons: nutzt bereits deine .btn & Varianten aus dem Hero */
/* Responsive wie bei deinen Grids (Tablet/Mobile) */
@media (max-width: 991px){
.local-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
.section-local { padding: 40px 0 16px; }
.local-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* --- Links in der Local-Section: Gold-Akzent, klar als Link erkennbar --- */
.section-local a {
color: var(--brand-gold, #F5A524);
font-weight: 600;
}
.section-local a:hover {
color: #D98C00; /* dunkleres Gold on hover */
text-decoration-thickness: .12em;
}
.section-local a:visited { color: #C07A00; }
.section-local a:focus-visible {
outline: 2px solid #F5A524; /* sichtbarer Fokus */
outline-offset: 2px;
}
/* --- Cards: gleiche Höhe + Buttons alle in einer Linie (unten bündig) --- */
.local-card {
display: flex;
flex-direction: column;
min-height: 220px; /* ggf. anpassen */
}
.local-card__body { flex: 1 1 auto; }
.local-card__footer {
margin-top: auto; /* schiebt Button an den Card-Boden */
display: flex;
align-items: center;
}
/* Kleine kosmetische Kürzungen für „weniger Text“-Look */
.local-list {
margin: 0 0 6px 18px;
padding: 0;
}
.local-list li {
margin: 4px 0;
line-height: 1.45;
}
/* Grid-Abstände bleiben, aber etwas mehr Luft zwischen Cards und Überschrift */
.section-local__lead { margin-bottom: 18px; }
.local-grid { gap: 22px; }
/* Responsives Verhalten bleibt wie gehabt */
@media (max-width: 991px){
.local-card { min-height: 200px; }
}
@media (max-width: 767px){
.local-card { min-height: 0; } /* auf Mobile frei fließen lassen */
}
.section-local a{
color: var(--brand-gold, #F5A524);
font-weight: 600;
}
.section-local a:hover{ color:#D98C00; text-decoration-thickness:.12em; }
.section-local a:visited{ color:#C07A00; }
.section-local a:focus-visible{ outline:2px solid #F5A524; outline-offset:2px; }
.section-local {
margin-top: 0px;
}
.section-2{
margin-top: var(--space-2xl);
padding-top: var(--space-2xl);
padding-bottom: 0px;
box-shadow: inset 0 1px 0 rgba(2, 6, 23, .06);
}
.leistungen--berlin{
padding-top: 0px !important;
}
.benefits{
padding-top: var(--space-2xl);
}
.section-faq{
padding-top: var(--space-2xl);
}
.div-block-9{
padding-bottom: 15px !important;
}
/* Default (Desktop) */
.hero-v2__bg{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.1) 50%, rgba(11,18,32,.65) 100%),
url('../images/hero-image-main_1920_desktop.webp') center/cover no-repeat;
filter: saturate(1.1) contrast(1.02);
opacity: .35;
pointer-events:none;
}
/* Tablet */
@media (max-width: 1199px){
.hero-v2__bg{ --hero-img: url('../images/hero-image-main_1280_tablet.webp'); }
}
/* Mobile */
@media (max-width: 767px){
.hero-v2__bg{ --hero-img: url('../images/hero-image-main_640_mobile.webp'); }
}
/* ===== HERO für Reparatur- & Detailseiten ===== */
/* Default (Desktop) */
.modell-hero-v2__bg{
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.1) 50%, rgba(11,18,32,.65) 100%),
url('../images/hero-image-repair-page_1920.webp') center/cover no-repeat;
filter: saturate(1.1) contrast(1.02);
opacity: .35;
pointer-events: none;
}
/* Tablet */
@media (max-width: 1199px){
.modell-hero-v2__bg{
background:
linear-gradient(180deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.1) 50%, rgba(11,18,32,.65) 100%),
url('../images/hero-image-repair-page_1280.webp') center/cover no-repeat;
}
}
/* Mobile */
@media (max-width: 767px){
.modell-hero-v2__bg{
background:
linear-gradient(180deg, rgba(11,18,32,.65) 0%, rgba(11,18,32,.1) 50%, rgba(11,18,32,.65) 100%),
url('../images/hero-image-repair-page_640.webp') center/cover no-repeat;
}
}
.w-container{
max-width: var(--page-max) !important;
margin-inline: auto !important;
padding-left: var(--page-gutter) !important;
padding-right: var(--page-gutter) !important;
}
/* =========================
Right card polish (SEO-Section)
========================= */
/* grid: beide Karten oben bündig, etwas mehr Luft zwischen den Spalten */
.section-local .local-grid{
align-items: start;
gap: 22px;
}
/* rechte Karte gezielt ansprechen */
.section-local .local-grid > .local-card:last-child{
padding: 18px 18px 16px;
}
/* Überschrift in der rechten Karte: etwas kompakter unterhalb */
.section-local .local-grid > .local-card:last-child .local-card__title{
margin: 2px 0 10px;
}
/* Vorteils-liste: Icon links, Text rechts – sauber ausgerichtet */
.local-list.local-list--icons{
list-style: none;
margin: 0;
padding: 0;
}
.local-list.local-list--icons li{
display: flex;
align-items: center; /* Icon & Text auf einer Linie */
gap: 12px; /* Abstand Icon ↔ Text */
padding: 8px 0; /* gleichmäßiger vertikaler Rhythmus */
line-height: 1.55;
}
/* Icon-Badge: runde „Pille“ im Markenstil, zentriert */
.local-list.local-list--icons .benefits__icon{
flex: 0 0 34px;
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(244,162,30,.12); /* sanfter Orange-Hintergrund */
border: 1.5px solid rgba(244,162,30,.35); /* zarter Rand */
color: #f4a21e; /* Icon in Markenfarbe */
}
/* Footer-Buttons: mehr Luft, wirklich zentriert, gleiche Breite */
.section-local .local-grid > .local-card:last-child .local-card__footer{
display: flex;
flex-wrap: wrap;
gap: 12px 14px; /* Abstand zwischen Buttons */
margin-top: 12px; /* mehr Abstand zur Liste */
}
.section-local .local-grid > .local-card:last-child .local-card__footer .btn{
min-width: 170px; /* optisch ruhiger */
padding: .65rem 1rem;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center; /* Text zentriert */
}
/* Icon links | Text rechts – mit Flex in jedem */
.local-list.local-list--icons{
list-style:none; margin:0; padding:0;
}
.local-list.local-list--icons li{
display:flex; /* <- wie gewünscht: Flex im li */
align-items:center;
gap:12px; /* Abstand Icon ↔ Textblock */
padding:8px 0;
line-height:1.55;
}
.local-list.local-list--icons .benefits__icon{
flex:0 0 34px; /* feste Icon-Spalte */
width:34px; height:34px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px;
background:rgba(244,162,30,.12);
border:1.5px solid rgba(244,162,30,.35);
color:#f4a21e;
margin-top:2px; /* optische Vertikaljustage */
}
.local-list.local-list--icons .benefit-text{
flex:1 1 auto; /* Text nimmt restliche Breite */
min-width:0; /* verhindert komische Umbrüche */
white-space:normal; /* falls global was anderes setzt */
}
.local-list.local-list--icons svg{ width:20px; height:20px; }
/* Gleich hohe Karten in der SEO-Zweispalte */
.section-local .local-grid{
display:grid;
grid-template-columns: 1fr 1fr; /* Breite unverändert, 2 Spalten */
align-items: stretch; /* Items auf Zeilenhöhe strecken */
gap: 22px;
}
.section-local .local-grid .local-card{
display:flex;
flex-direction: column;
height: 100%; /* Karte füllt die Zeile */
box-sizing: border-box;
}
.section-local .local-grid .local-card__body{
flex: 1 1 auto; /* Inhalt dehnt sich */
}
.section-local .local-grid .local-card__footer{
margin-top: auto; /* Footer immer ganz unten */
}
/* ========= Responsive: SEO-Section (Apple etc.) ========= */
/* Tablet (<= 991px): etwas luftiger + ausgewogene Spalten */
@media (max-width: 991px){
.section-local .section-title{ font-size: clamp(22px, 4.2vw, 30px); }
.section-local .local-grid{
grid-template-columns: 1.2fr 1fr; /* links noch etwas breiter */
gap: 18px;
}
.section-local .local-card{ border-radius: 14px; }
.section-local .local-card__body{ padding-bottom: 6px; }
.local-list.local-list--icons .benefits__icon{ width:32px; height:32px; }
.local-list.local-list--icons svg{ width:18px; height:18px; }
.section-local .local-grid .local-card__footer .btn{ min-width: 160px; }
}
/* Mobile (<= 767px): Spalten stacken, Buttons 100%, Typo kompakter */
@media (max-width: 767px){
/* Überschrift und Einleitung */
.section-local .section-head{ text-align: left; }
.section-local .section-title{ font-size: clamp(20px, 5.6vw, 26px); }
/* Grid -> 1 Spalte */
.section-local .local-grid{
grid-template-columns: 1fr !important; /* stapeln */
gap: 14px;
}
/* Karten: gleichmäßig padding, Schatten subtil */
.section-local .local-card{
border-radius: 12px;
}
.section-local .local-card__body p{ margin-bottom: 10px; }
/* Listen (links und rechts) */
.local-list{ padding-left: 18px; } /* Bullets */
.local-list.local-list--icons{ padding-left: 0; } /* Icon-Liste ohne Bullets */
.local-list.local-list--icons li{
gap: 10px;
padding: 6px 0;
}
.local-list.local-list--icons .benefits__icon{
width: 30px; height: 30px; margin-top: 1px;
}
.local-list.local-list--icons svg{ width:16px; height:16px; }
/* Buttons: volle Breite, untereinander */
.section-local .local-grid .local-card__footer{
gap: 10px;
}
.section-local .local-grid .local-card__footer .btn{
min-width: 0;
width: 100%;
justify-content: center;
padding: .65rem .9rem;
}
}
/* Kleine Phones (<= 380px): noch kompaktere Typo */
@media (max-width: 380px){
.section-local .section-title{ font-size: 20px; }
.local-list.local-list--icons li{ padding: 5px 0; }
.local-list.local-list--icons .benefits__icon{ width:28px; height:28px; }
.local-list.local-list--icons svg{ width:15px; height:15px; }
}
/* ========= Schritte / Teaser-Zeile wie vorher (3 Spalten) ========= */
.section-7 .container-14{
display:grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap:30px; /* wie vorher */
align-items:stretch !important;
}
/* Jede Karte (ganze Kachel klickbar) */
.section-7 .div-block-22{
grid-column:auto !important; /* NICHT 1 / -1 */
display:flex; align-items:center;
background:#fff; border:1px solid rgba(16,24,40,.06);
border-radius:16px;
padding:20px 24px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
text-decoration:none; color:inherit; /* ohne Unterstreichung */
}
.section-7 .div-block-22:hover{
box-shadow:0 10px 26px rgba(0,0,0,.10);
transform:translateY(-1px);
border-color:rgba(16,24,40,.12);
}
/* Nummern-Badge links */
.section-7 .div-block-23{
width:56px; height:56px; flex:0 0 56px;
display:grid; place-items:center;
border-radius:999px;
background:#fff7ea; /* gelbliches Badge wie vorher */
color:#ffffff; /* Marken-Gelb (Text) */
font-weight:700; font-size:18px;
border:1.5px solid #f4a21e;
box-shadow:0 2px 6px rgba(244,162,30,.25);
margin-right:16px;
}
/* Text rechts */
.section-7 .div-block-24{ flex:1 1 auto; line-height:1.25; }
.section-7 .div-block-24 .bold-text-8{ font-weight:700; }
.section-7 .div-block-24 > div:first-child{ font-size:18px; margin-bottom:4px; }
.section-7 .div-block-24 > div:last-child{ font-size:14px; color:#475467; }
/* Abstände zur Umgebung wie vorher */
.section-7{ padding-top:18px; padding-bottom:6px; }
/* —— Responsive: Tablet 2 Spalten, Mobile 1 Spalte —— */
@media (max-width: 991px){
.section-7 .container-14{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:20px; }
}
@media (max-width: 600px){
.section-7 .container-14{ grid-template-columns: 1fr !important; }
}
/* === Schritte-Leiste: 3 Karten nebeneinander (Desktop) === */
.section-7{padding-bottom:30px !important; }
.section-7 .container-14 {
display: flex !important; /* Grid überstimmen */
gap: 30px; /* Abstand wie zuvor */
align-items: stretch;
justify-content: center; /* schön zentriert */
flex-wrap: nowrap; /* 3 in einer Zeile auf Desktop */
}
body.home .local-grid{
grid-template-columns: 1fr 1fr 1fr !important;
}
/* Die klickbare Karte */
.section-7 .div-block-22 {
flex: 1 1 0; /* gleich breit, wachsen dürfen */
min-width: 0; /* Überlauf verhindern */
display: flex;
align-items: center;
background: #fff;
border: 1px solid rgba(16,24,40,.06);
border-radius: 16px;
padding: 20px 24px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transition: box-shadow .2s, transform .2s, border-color .2s;
text-decoration: none;
color: inherit;
}
/* Nummern-Badge links */
.section-7 .div-block-23{
width: 56px; height: 56px; flex: 0 0 56px;
display: grid; place-items: center;
border-radius: 999px;
background: #fff7ea;
color: #ffffff;
font-weight: 700; font-size: 18px;
border: 1.5px solid #f4a21e;
box-shadow: 0 2px 6px rgba(244,162,30,.25);
margin-right: 16px;
}
/* Text rechts */
.section-7 .div-block-24{ flex: 1 1 auto; line-height: 1.25; }
.section-7 .div-block-24 .bold-text-8{ font-weight: 700; }
.section-7 .div-block-24 > div:first-child{ font-size: 18px; margin-bottom: 4px; }
.section-7 .div-block-24 > div:last-child{ font-size: 14px; color:#475467; }
/* Hover */
.section-7 .div-block-22:hover{
box-shadow: 0 10px 26px rgba(0,0,0,.10);
transform: translateY(-1px);
border-color: rgba(16,24,40,.12);
}
/* --- Responsiv: Tablet 2 in einer Reihe, Handy 1 --- */
@media (max-width: 991px){
.section-7 .container-14{ flex-wrap: wrap; }
.section-7 .div-block-22{ flex: 1 1 calc(50% - 20px); }
}
@media (max-width: 600px){
.section-7 .div-block-22{ flex: 1 1 100%; }
}
.container-14{
padding-left: 0px !important;
padding-right: 0px !important;
}
.hero-v2__inner--center {
max-width: 1440px !important;
}
.modell-hero-v2__inner--center{
max-width: 1440px !important;
}
body.apple .modell-hero-v2__inner--center{
padding-left: 10px;
padding-right:10px;
}
/* versteckt standardmäßig den br */
.br--desktop { display: none; }
/* ab z.B. 992px einblenden (Break greift) */
@media (min-width: 992px) {
.br--desktop { display: initial; } /* br wird zum Zeilenumbruch */
}
/* versteckt standardmäßig den br */
.br-sub--desktop { display: none; }
/* ab z.B. 992px einblenden (Break greift) */
@media (max-width: 992px) {
.br-sub--desktop { display: initial; } /* br wird zum Zeilenumbruch */
}
/* =========================================
Startseite: Local-Grid (3 Karten) mobil
========================================= */
@media (max-width: 767px){
/* nur auf der Startseite */
body.home .local-grid{
display: grid; /* bleibt Grid */
grid-template-columns: 1fr !important; /* 1 Spalte */
gap: 14px; /* etwas Abstand zwischen den Karten */
}
body.home .local-card{
width: 100%;
min-width: 0; /* verhindert horizontales Scrollen */
}
}
/* Tablet: optional 2 Spalten */
@media (min-width: 768px) and (max-width: 991px){
body.home .local-grid{
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 600px){
.section-7 .container-14{ flex-wrap: wrap; }
.section-7 .div-block-22{ flex: 1 1 100%; }
}
/* ============================
B2B HERO (nur auf /b2b.html)
============================ */
body.b2b .b2b-hero{
position: relative;
overflow: clip;
/* Grundhöhe: schön groß auf Desktop, kompakter auf Mobile */
min-height: clamp(340px, 48vw, 560px);
display: grid;
align-items: center;
}
/* Hintergrundbild + Fallback-Verlauf */
body.b2b .hero-b2b--image{
background:
radial-gradient(1200px 520px at 50% -180px, rgba(0,0,0,.18), transparent 60%),
url("images/hero-b2b.jpg") center/cover no-repeat fixed;
}
/* Optional: eigenes Dark-Image bei System-Dark-Mode */
@media (prefers-color-scheme: dark){
body.b2b .hero-b2b--image{
background:
radial-gradient(1200px 520px at 50% -180px, rgba(0,0,0,.28), transparent 60%),
url("images/hero-b2b-dark.jpg") center/cover no-repeat fixed;
}
}
/* Semi-Transparentes Overlay für bessere Lesbarkeit */
body.b2b .b2b-hero__overlay{
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(10,15,30,.35), rgba(10,15,30,.20) 40%, rgba(10,15,30,.10) 100%);
pointer-events:none;
}
/* Innenlayout */
body.b2b .b2b-hero__inner{
position: relative; /* über dem Overlay */
padding-top: 40px;
padding-bottom: 34px;
}
body.b2b .b2b-hero__head{
max-width: 940px;
margin: 0 auto;
text-align: center;
color: #fff;
}
/* Typo */
body.b2b .b2b-hero__title{
margin: 8px 0 8px;
line-height: 1.05;
letter-spacing: -0.01em;
font-weight: 800;
/* fluid font-size */
font-size: clamp(28px, 4.5vw, 54px);
text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
body.b2b .b2b-hero__sub{
margin: 8px auto 14px;
max-width: 820px;
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.45;
color: rgba(255,255,255,.92);
text-shadow: 0 1px 10px rgba(0,0,0,.25);
}
/* CTA-Reihe */
body.b2b .b2b-hero__cta{
display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
/* br-Steuerung: Zeilenumbruch nur auf Desktop zeigen */
.br--desktop { display: none; }
@media (min-width: 992px){ .br--desktop { display: initial; } }
/* Kleine Geräte: etwas mehr Raum oben/unten */
@media (max-width: 600px){
body.b2b .b2b-hero__inner{ padding-top: 26px; padding-bottom: 22px; }
}
/* ===== B2B Intro – nur auf b2b Seite ===== */
body.b2b .b2b-intro{ padding: 28px 0 8px; }
body.b2b .b2b-intro__lead{ max-width: 860px; margin: 8px auto 0; }
/* 2 Spalten */
body.b2b .b2b-intro__grid{
display:grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
margin-top: 18px;
}
@media (max-width: 992px){
body.b2b .b2b-intro__grid{ grid-template-columns: 1fr; }
}
/* Bullet-Liste mit kleinen Icon-Bullets */
body.b2b .b2b-list{
display:grid; gap:10px; margin: 8px 0 14px; padding:0; list-style:none;
}
body.b2b .b2b-list li{
position:relative; padding-left:28px; line-height:1.35;
}
body.b2b .b2b-list li::before{
content:""; position:absolute; left:0; top:.2em; width:18px; height:18px;
border-radius:50%;
box-shadow: inset 0 0 0 2px #f4a21e;
background: radial-gradient(circle at 50% 50%, #f4a21e 0 45%, transparent 46%);
opacity:.95;
}
body.b2b .b2b-list--compact li{ padding-left:24px; }
/* CTAs */
body.b2b .b2b-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
/* Rechte Infokarte */
body.b2b .b2b-aside-card{
background:#fff; border:1px solid rgba(16,24,40,.06);
border-radius:16px; padding:16px 16px 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
body.b2b .b2b-aside-title{
margin:0 0 8px; font-size:18px; font-weight:800; letter-spacing:-.01em;
}
/* === B2B Intro: Container auf Seitenbreite + sauberes Padding === */
body.b2b .b2b-intro .container-13.w-container{
width: 100%;
max-width: 1200px; /* gleiche Breite wie deine anderen Sections */
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
}
/* etwas mehr Luft ab >=1200px */
@media (min-width: 1200px){
body.b2b .b2b-intro .container-13.w-container{
padding-left: 24px;
padding-right: 24px;
}
}
/* Section-Abstände an dein System angleichen */
body.b2b .b2b-intro.section{
margin-top: 0px;
padding-top: 56px;
padding-bottom: 8px;
}
body.b2b .b2b-intro .section-head{ margin-bottom: 12px; }
/* Grid robust machen (spalten füllen, keine “schmale” Mitte) */
body.b2b .b2b-intro__grid{
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 24px;
align-items: start;
margin-top: 18px;
}
body.b2b .b2b-intro__col{ min-width: 0; } /* verhindert erzwungene Mindestbreiten */
/* Mobile: 1 Spalte */
@media (max-width: 992px){
body.b2b .b2b-intro__grid{
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Rechte Infokarte nicht künstlich einschränken */
body.b2b .b2b-aside-card{ width: 100%; max-width: none; }
/* gleiche Seitenbreite & Innenabstände wie die vorherigen Local-Sections */
#b2b-faq .w-container,
#b2b-kontakt .w-container{
max-width: 1100px; /* identisch zu deinen anderen Local-Blocks */
margin-left: auto;
margin-right: auto;
padding-left: 16px; /* identisch zu den anderen Sections */
padding-right: 16px;
}
/* Grid wie bisher: 2 Spalten auf Desktop, 1 Spalte auf Mobile */
#b2b-faq .b2b-grid-2,
#b2b-kontakt .b2b-grid-2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 980px){
#b2b-faq .b2b-grid-2,
#b2b-kontakt .b2b-grid-2{ grid-template-columns: 1fr; }
}
/* Karten-Look an übrige Seite angleichen (falls minimal anders) */
#b2b-faq .local-card,
#b2b-kontakt .local-card{
background: #fff;
border: 1px solid rgba(16,24,40,.06);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
padding: 16px;
}
/* Headings-Abstände wie in den anderen Sections */
#b2b-faq .section-head,
#b2b-kontakt .section-head{
margin-bottom: 10px;
}
/* Formular Inputs auf volle Breite, konsistente Spalten-Abstände */
#b2b-kontakt .b2b-form-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 680px){
#b2b-kontakt .b2b-form-grid{ grid-template-columns: 1fr; }
}
#b2b-kontakt .w-input{ width: 100%; }
#b2b-kontakt .btn{ white-space: nowrap; }
/* === gleiche Container-Breite wie oben === */
#b2b-faq .w-container,
#b2b-kontakt .w-container{
max-width: 1100px;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
/* Grid: 2 Spalten (Desktop) / 1 Spalte (Mobile) */
#b2b-kontakt .b2b-grid-2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 980px){
#b2b-kontakt .b2b-grid-2{ grid-template-columns: 1fr; }
}
/* ---------- Map Card ---------- */
.map-card{
position: relative;
overflow: hidden;
padding: 0; /* Map füllt die Karte */
}
.map-card .map-wrap{
width: 100%;
height: 100%;
min-height: 360px;
background: #f8fafc;
}
.map-card iframe{
width: 100%;
height: 100%;
border: 0;
display: block;
}
.map-card .map-placeholder{
height: 100%;
min-height: 360px;
display: grid;
place-items: center;
color: #0f172a;
}
/* Overlay-Kontaktdaten */
.map-card .map-overlay{
position: absolute;
left: 12px;
bottom: 12px;
right: auto;
max-width: 320px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(16,24,40,.06);
border-radius: 14px;
box-shadow: 0 8px 22px rgba(0,0,0,.15);
padding: 12px 14px;
}
.map-card .map-contacts a{ text-decoration: none; }
.map-card .map-actions{
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
@media (max-width: 680px){
.map-card .map-overlay{
position: static; /* unter der Karte */
max-width: none;
margin: 10px;
}
}
/* ---------- FAQ Akkordeon ---------- */
.faq-item{
background: #fff;
border: 1px solid rgba(16,24,40,.06);
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
overflow: hidden;
margin-bottom: 10px;
}
.faq-q{
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
font-weight: 700;
position: relative;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-caret{
margin-left: auto;
width: 14px; height: 14px;
display: inline-block;
transform: rotate(0deg);
transition: transform .2s ease;
/* kleiner Pfeil via CSS */
border-right: 2px solid #1f2937;
border-bottom: 2px solid #1f2937;
transform-origin: 50% 50%;
rotate: -45deg;
}
.faq-item[open] .faq-caret{
rotate: 45deg; /* zeigt nach oben */
}
.faq-a{
padding: 0 16px 14px 16px;
color: #475467;
line-height: 1.55;
}
/* Buttons im Formular auf kleinen Screens schön breit */
#b2b-kontakt .btn{ min-width: 160px; }
@media (max-width: 480px){
#b2b-kontakt .btn{ width: 100%; }
}
/* =========================================================
B2B: Mobile-Fixes für Navbar + Hero (nur /b2b.html)
========================================================= */
/* 1) Eine konsistente Navbar-Höhe und Puffer darunter */
:root { --nav-h: 80px; } /* Default (Desktop) */
@media (max-width: 767px){
:root { --nav-h: 64px; } /* kompakter auf Mobile */
.waves-navbar-1.w-nav{ height: var(--nav-h); } /* Höhe der Nav setzen */
.waves---nav-brand-link { height: 20px; } /* Logo kleiner */
}
/* Platz UNTER der klebenden Navbar, damit der Hero nicht „drunter“ klebt */
body.b2b .b2b-hero{ padding-top: calc(var(--nav-h) + 8px); }
/* 2) iOS/Android: kein background-attachment: fixed im Hero */
@media (max-width: 991px){
body.b2b .hero-b2b--image{
background-attachment: scroll !important; /* statt fixed */
background-position: center top !important;
}
}
/* 3) Typografie im Hero auf kleinen Screens entschärfen */
@media (max-width: 767px){
body.b2b .b2b-hero__inner{ padding-top: 12px; padding-bottom: 18px; }
body.b2b .b2b-hero__head{ padding: 0 12px; }
body.b2b .b2b-hero__title{
font-size: clamp(22px, 7vw, 28px) !important;
line-height: 1.15 !important;
margin: 4px 0 6px !important;
word-break: break-word;
}
.br--desktop{ display:none !important; } /* keine erzwungenen Desktop-Umbrüche */
body.b2b .section-eyebrow{ font-size: 12px; letter-spacing:.06em; }
body.b2b .b2b-hero__sub{
font-size: 14px !important;
line-height: 1.45 !important;
margin: 6px auto 12px !important;
max-width: 560px;
}
}
/* 4) CTA-Buttons: Zeile umbrechbar & gut tappbar */
@media (max-width: 767px){
body.b2b .b2b-hero__cta{
gap: 8px !important;
}
body.b2b .b2b-hero__cta .btn{
min-height: 44px; /* Tap-Ziel */
padding: 10px 14px;
flex: 1 1 auto; /* dürfen umbrechen */
text-align: center;
}
}
/* 5) Sicherheitsnetz: Overlay und Inhalt liegen zuverlässig oben */
body.b2b .b2b-hero{ position: relative; }
body.b2b .b2b-hero__overlay{ z-index: 0; }
body.b2b .b2b-hero__inner{ position: relative; z-index: 1; }
/* ===========================
B2B-Intro – Mobile Fixes
=========================== */
/* Grundabstände sauber, nichts überlappt */
body.b2b .b2b-intro{
padding: 20px 0 20px !important; /* vorher unten zu knapp */
position: relative; /* neue Stacking-Context */
z-index: 1;
}
/* Container auf volle Breite mit Innenabstand wie andere Sections */
body.b2b .b2b-intro .w-container{
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
}
/* Grid: auf Handy 1 Spalte, Reihenfolge: Text -> Karte */
body.b2b .b2b-intro__grid{
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
margin-top: 16px;
}
@media (max-width: 991px){
body.b2b .b2b-intro__grid{
grid-template-columns: 1fr;
gap: 12px;
}
body.b2b .b2b-intro__col{ order: 1; min-width: 0; }
body.b2b .b2b-intro__aside{ order: 2; }
}
/* Headline + Lead kompakter auf Mobile */
@media (max-width: 767px){
body.b2b .section-head{ margin-bottom: 8px; text-align: left; }
body.b2b .b2b-intro .section-title{
font-size: clamp(20px, 6.6vw, 26px) !important;
line-height: 1.15 !important;
margin: 2px 0 6px !important;
word-break: break-word;
}
body.b2b .b2b-intro__lead{
font-size: 14px;
line-height: 1.5;
margin: 6px 0 8px !important;
}
}
/* Listen & CTAs: gut lesbar und tappbar */
body.b2b .b2b-list{ display:grid; gap:10px; margin: 6px 0 12px; padding:0; list-style:none; }
body.b2b .b2b-list li{ position:relative; padding-left:26px; line-height:1.35; }
body.b2b .b2b-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
body.b2b .b2b-actions .btn{ min-height:44px; padding:10px 14px; flex:1 1 auto; }
/* Rechte Karte füllt die Breite auf Mobile */
body.b2b .b2b-aside-card{
width: 100%;
background:#fff;
border:1px solid rgba(16,24,40,.08);
border-radius:16px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
padding:16px;
}
/* Sicherheitsnetz: nichts ragt in die nächste Section */
body.b2b .b2b-intro::after{
content:"";
display:block;
height: 1px; /* trennt visuell und verhindert Collapsing-Margins */
margin-top: 16px;
background: transparent;
}
/* ===========================
B2B-Intro: harte Trennung
=========================== */
/* 0) Falls das Hero drüberragt: Intro liegt oben und hat eigenen Hintergrund */
body.b2b #b2b-intro{
position: relative;
z-index: 5; /* über dem Hero-Inhalt */
background: #fff; /* deckt evtl. durchscheinende Teile ab */
}
/* 1) Spacer OBEN und UNTEN zwischen den Sections (kein Overlap mehr) */
body.b2b #b2b-intro::before,
body.b2b #b2b-intro::after{
content:"";
display:block;
height: 16px; /* Abstand – bei Bedarf anpassen */
}
@media (max-width: 767px){
body.b2b #b2b-intro::before,
body.b2b #b2b-intro::after{ height: 20px; }
}
/* 2) Container im Intro NICHT als Flex (Webflow .container-13 setzt display:flex) */
body.b2b #b2b-intro .container-13.w-container{
display: block !important; /* verhindert, dass der Container „zusammenklappt“ */
}
/* 3) Grid im Intro: auf Mobile 1 Spalte, keine schmalen Spalten */
@media (max-width: 991px){
body.b2b .b2b-intro__grid{
display: grid;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
/* 4) Sicherheit: Hero liegt unter Intro & hat keinen „fixed“-Bleedeffekt mobil */
body.b2b .b2b-hero{ position: relative; z-index: 0; }
@media (max-width: 991px){
body.b2b .hero-b2b--image{
background-attachment: scroll !important;
background-position: center top !important;
}
}
/* 5) Anker/Scroll: Intro kollidiert nicht mit fixer Navbar */
:root{ --nav-h: 64px; } /* falls noch nicht gesetzt */
body.b2b #b2b-intro{ scroll-margin-top: calc(var(--nav-h) + 8px); }