/* EGR Neff Hausmeisterservice – Stylesheet Farben, Typografie und Abstände des Re-Designs. */ /* ---------- Schriften (lokal gehostet – kein Google-Fonts-Aufruf) ---------- */ /* Variable Fonts: eine Datei deckt den gesamten Gewichtsbereich ab. */ @font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/familjen-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/familjen-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --paper: #f4f5f6; --white: #ffffff; --ink: #101112; --ink-2: #45494d; --muted: #6b7075; --line: #dfe2e5; --line-2: #e7eaec; --accent: #fa3c00; /* Abgedunkelte Variante der Markenfarbe für KLEINEN Text und Flächen mit weißer Schrift. #fa3c00 erreicht auf Weiß nur 3.68:1 und verfehlt damit WCAG AA (4.5:1) für normal große Schrift. #cd3100 erreicht 5.2:1 und bleibt im selben Farbton. Große Headlines und Icons nutzen weiter --accent (dort genügt 3:1).*/ --accent-text: #cd3100; --dark: #101112; --dark-2: #1b1e20; --dark-line: #26292b; --dark-text: #a8aeb2; --r-lg: 26px; --r-md: 22px; --r-sm: 16px; --pad-x: clamp(20px, 4vw, 32px); --sec: clamp(72px, 9vw, 128px); --font-display: "Familjen Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --header-h: 84px; } * { box-sizing: border-box; } /* Der Seitenhintergrund (Canvas) kommt von und färbt auch den Bereich, den iOS beim Überscrollen unterhalb des Dokuments freigibt. Dunkel gesetzt, damit dort die Footer-Farbe erscheint statt eines hellen Streifens. Der sichtbare Inhaltsbereich bleibt über hell. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--dark); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } svg { flex: 0 0 auto; } a { color: var(--accent-text); text-decoration: none; } a:hover { color: var(--ink); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul { margin: 0; padding: 0; list-style: none; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 200; } .skip:focus { left: 12px; top: 12px; color: #fff; } /* ---------- Layout ---------- */ .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x); } .sec { padding-top: var(--sec); } /* Hero: oben weniger Luft als bei den übrigen Abschnitten, da der Header bereits 85px einnimmt. Vorher ein fester Inline-Wert von 88px. */ .sec--hero { padding-top: clamp(40px, 7vw, 88px); } .sec--last { padding-bottom: var(--sec); } .split { display: grid; gap: 72px; align-items: start; } .split--hero { grid-template-columns: 1.1fr 0.9fr; align-items: end; } .split--wide { grid-template-columns: 1fr 1fr; } .split--text { grid-template-columns: 0.8fr 1.2fr; } .split--flip { grid-template-columns: 0.9fr 1.1fr; align-items: center; } .split--about { grid-template-columns: 1fr 0.85fr; } .split--faq { grid-template-columns: 0.75fr 1.25fr; } .split--contact { grid-template-columns: 0.85fr 1.15fr; } .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .eyebrow--accent { color: var(--accent-text); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); } .eyebrow .num { font-family: var(--font-display); color: var(--accent-text); } .h-xl { font-size: clamp(38px, 6.2vw, 76px); line-height: 0.98; letter-spacing: -0.035em; } .h-lg { font-size: clamp(36px, 5.4vw, 64px); line-height: 1; letter-spacing: -0.035em; } .h-md { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; } .h-sm { font-size: clamp(28px, 3.9vw, 44px); line-height: 1.06; } .h-xs { font-size: clamp(24px, 2.9vw, 32px); letter-spacing: -0.025em; } .accent { color: var(--accent); } .lead { margin-top: 30px; font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.65; color: var(--ink-2); max-width: 600px; } .body-text { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); } .body-muted { font-size: 16.5px; line-height: 1.7; color: #5a5f63; } /* ---------- Buttons ---------- */ .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 38px; } .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; padding: 17px 28px; border-radius: 999px; border: 1px solid transparent; transition: background-color .2s ease, color .2s ease, border-color .2s ease, text-decoration-color .2s ease; } .btn--primary { background: var(--accent-text); color: #fff; } .btn--primary:hover { background: var(--ink); color: #fff; } .btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: var(--accent); color: #fff; } .btn--light { background: var(--paper); color: var(--ink); } .btn--light:hover { background: var(--accent); color: #fff; } .btn--link { color: var(--ink); padding: 17px 22px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(16, 17, 18, .3); } .btn--link:hover { color: var(--accent); background: #e8eaec; text-decoration-color: currentColor; } .btn .pip { width: 7px; height: 7px; border-radius: 999px; background: currentColor; } .arrow { width: 8px; height: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 90; padding-top: env(safe-area-inset-top, 0px); /* Deckend genug, dass die Statusleiste des Geräts nahtlos anschließt, durchlässig genug, dass die Unschärfe sichtbar arbeitet. */ background: rgba(244, 245, 246, .86); backdrop-filter: saturate(1.6) blur(20px); -webkit-backdrop-filter: saturate(1.6) blur(20px); /* Halbtransparente Linie statt fester Farbe: Über der unscharfen Fläche hätte var(--line) nur rund 5 Helligkeitswerte Abstand und wäre kaum zu sehen. Ein Schwarzanteil zeichnet sich auf jedem Untergrund ab. */ border-bottom: 1px solid rgba(16, 17, 18, .10); } .site-header .bar { display: flex; align-items: center; gap: 32px; height: var(--header-h); } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); } .brand:hover { color: var(--ink); } .brand .name { display: flex; flex-direction: column; line-height: 1; } .brand .name b { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .brand .name span { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .nav { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 500; } .nav > a, .nav .drop > button { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; transition: background-color .2s ease; } .nav > a:hover, .nav .drop > button:hover { background: #e8eaec; color: var(--ink); } .nav .drop { position: relative; } .nav .drop .chev { width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); margin-top: -3px; } .nav .panel { position: absolute; top: calc(100% + 10px); left: -8px; width: 380px; background: var(--white); border: 1px solid #e3e6e9; border-radius: 18px; padding: 10px; box-shadow: 0 24px 60px -20px rgba(16, 17, 18, .28); display: none; flex-direction: column; gap: 2px; } .nav .drop[data-open="true"] .panel { display: flex; } .nav .panel a { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 13px 16px; border-radius: 12px; color: var(--ink); } .nav .panel a:hover { background: var(--paper); color: var(--ink); } .nav .panel .ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .nav .panel a:hover .ico { background: var(--accent); border-color: var(--accent); color: #fff; } .nav .panel b { display: block; font-weight: 600; font-size: 14.5px; } .nav .panel small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; } .header-cta { display: flex; align-items: center; gap: 10px; } .header-cta .tel { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 11px 4px; } .header-cta .tel svg { color: var(--accent-text); } .header-cta .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; padding: 13px 22px; border-radius: 999px; transition: background-color .2s ease; } .header-cta .cta:hover { background: var(--accent); color: #fff; } .header-mobile { display: none; margin-left: auto; align-items: center; gap: 8px; } .header-mobile .call { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--accent); color: #fff; } .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); cursor: pointer; } .burger span { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .burger[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); } .mobile-nav { display: none; border-top: 1px solid var(--line-2); background: var(--paper); } .mobile-nav[data-open="true"] { display: block; } .mobile-nav nav { max-width: 1280px; margin: 0 auto; padding: 8px var(--pad-x) 28px; display: flex; flex-direction: column; } .mobile-nav .label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 0 6px; } .mobile-nav a { padding: 15px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 16px; font-weight: 500; } .mobile-nav .row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; } .mobile-nav .row .ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--accent); } .mobile-nav .actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .mobile-nav .actions a { border: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 16px 22px; font-size: 15.5px; font-weight: 600; } /* Farben explizit setzen: ".mobile-nav a" (0,2,0) schlägt sonst ".btn--dark" (0,1,0) und färbt die Schrift schwarz auf schwarzem Grund. */ .mobile-nav .actions .btn--dark { background: var(--ink); color: #fff; } .mobile-nav .actions .btn--ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); } /* ---------- Breadcrumb ---------- */ .crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding-top: 56px; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent-text); } .crumbs span[aria-current] { color: var(--ink); font-weight: 500; } /* ---------- Bildplatzhalter ---------- */ .ph { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #e8eaec repeating-linear-gradient(135deg, rgba(16, 17, 18, .035) 0 12px, transparent 12px 24px); border: 1px dashed #c9ced2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; } .ph span { font-size: 13px; line-height: 1.5; color: #7c8288; max-width: 300px; } .ph img { width: 100%; height: 100%; object-fit: cover; } .ph--hero { height: clamp(260px, 38vw, 520px); } .ph--tall { height: clamp(240px, 34vw, 420px); } .ph--card { height: 240px; border-radius: var(--r-sm); } .ph--dark { background: var(--dark-2); border-color: #33383b; } .ph--img { border: 0; padding: 0; background: #dfe2e4; } .ph--img-top img { object-position: center 28%; } .ph--img-low img { object-position: center 62%; } .ph--dark span { color: #7c8288; } /* ---------- Hero ---------- */ .usp { border-top: 1px solid var(--line); } .usp li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); } .usp .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-text); padding-top: 3px; } .usp b { font-weight: 600; font-size: 15.5px; } .usp small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.55; } /* ---------- Marquee ---------- */ .marquee { margin-top: 96px; background: var(--dark); padding: 26px 0; overflow: hidden; } .marquee .track { display: flex; width: max-content; animation: egr-marquee 34s linear infinite; } .marquee .run { display: flex; align-items: center; gap: 56px; padding-right: 56px; } .marquee .item { display: flex; align-items: center; gap: 20px; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--paper); letter-spacing: -0.02em; white-space: nowrap; } .marquee .item .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } @keyframes egr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } } /* ---------- Leistungs-Karten ---------- */ .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; } .card { background: var(--white); border: 1px solid var(--line-2); border-radius: 24px; padding: 12px; display: flex; flex-direction: column; } .card .meta { display: flex; align-items: center; gap: 14px; } .card .ico { width: 38px; height: 38px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--ink); } .card .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-text); } .card .rule { height: 1px; flex: 1; background: var(--line-2); } .card .inner { padding: 30px 22px 24px; display: flex; flex-direction: column; flex: 1; } .card h3 { margin-top: 16px; font-size: clamp(23px, 2.2vw, 27px); letter-spacing: -0.025em; line-height: 1.15; } .card h3 a { color: var(--ink); } .card h3 a:hover { color: var(--accent-text); } .card p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: #5a5f63; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .tag { font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2); padding: 7px 13px; border-radius: 999px; } .more { margin-top: 28px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .more:hover { color: var(--accent-text); gap: 14px; } /* ---------- Karten-Hover ---------- */ .card, .trio article, .place, .review, .strengths div { transition: background-color .28s ease, border-color .28s ease; } .card .ico, .trio .ico, .place .ico, .strengths .ico { transition: background-color .28s ease, border-color .28s ease, color .28s ease; } .card .ph img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); } .card:hover, .trio article:hover, .place:hover, .review:hover { border-color: var(--accent); background: #fffaf8; } .card:hover .ico, .trio article:hover .ico, .place:hover .ico { background: var(--accent); border-color: var(--accent); color: #fff; } .card:hover .ph img { transform: scale(1.04); } .card:hover .rule { background: rgba(250, 60, 0, .35); } .strengths div:hover { background: var(--white); } .strengths div:hover .ico { background: var(--accent); border-color: var(--accent); color: #fff; } .card .rule { transition: background-color .28s ease; } /* ---------- Timeline ---------- */ .timeline { position: relative; margin-top: 56px; } .timeline .rail { position: absolute; left: 30px; top: 31px; bottom: 87px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .timeline .rail i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--accent) 0%, rgba(250, 60, 0, .8) 42%, rgba(250, 60, 0, .12) 100%); border-radius: 2px; transition: height .2s linear; } .timeline .step { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 28px; padding-bottom: 56px; align-items: start; } .timeline .node { width: 62px; height: 62px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: border-color .35s ease, color .35s ease, background-color .35s ease; } /* Sobald die Fortschrittslinie den Schritt erreicht hat, wird er farbig hervorgehoben. Die Klasse setzt assets/site.js beim Scrollen. */ .timeline .node.is-active { border-color: var(--accent); color: var(--accent); background: #fff5f2; } .timeline .step-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); } .timeline h3 { margin-top: 12px; font-size: clamp(22px, 2.5vw, 28px); letter-spacing: -0.025em; } .timeline p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: #5a5f63; max-width: 640px; } /* ---------- Dunkle Sektion ---------- */ .dark-band { margin-top: var(--sec); background: var(--dark); color: var(--paper); } .dark-band .inner { max-width: 1280px; margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--pad-x); } .panel-dark { background: var(--dark); color: var(--paper); border-radius: var(--r-lg); padding: clamp(40px, 5.4vw, 72px) clamp(24px, 4.6vw, 64px); } .dark-band h2, .panel-dark h2 { color: var(--paper); } .dark-band p, .panel-dark p { color: var(--dark-text); } .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 32px; } .check-list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .check-list .ico { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(250, 60, 0, .1); color: var(--accent); } .check-list--dark li { border-color: var(--dark-line); color: #e4e7e9; } .check-list--dark .ico { background: rgba(250, 60, 0, .18); } /* ---------- Stärken-Raster ---------- */ .strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .strengths div { background: var(--paper); padding: 34px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 148px; } .strengths .ico { width: 40px; height: 40px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent); } .strengths b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } /* ---------- Bewertungen ---------- */ .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .review { margin: 0; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 36px 32px; display: flex; flex-direction: column; gap: 22px; } .review .stars { display: flex; gap: 5px; } .review blockquote { margin: 0; font-size: 16.5px; line-height: 1.7; color: #2a2e31; } .review figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid #f0f2f3; display: flex; align-items: center; gap: 14px; } .avatar { width: 46px; height: 46px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .03em; } .review figcaption b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; } .review figcaption small { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; } /* ---------- Chips / Orte ---------- */ .panel-light { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: clamp(40px, 5.4vw, 72px) clamp(24px, 4.6vw, 64px); } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-size: 14px; font-weight: 500; color: #2a2e31; background: var(--paper); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 999px; } .chip--white { background: var(--white); } .place-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; } .place { background: var(--white); border: 1px solid var(--line-2); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; min-height: 210px; } .place .ico { width: 38px; height: 38px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--accent); } .place h3 { margin-top: 6px; font-size: 22px; letter-spacing: -0.025em; } .place p { font-size: 14.5px; line-height: 1.65; color: #5a5f63; } .place-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; } .place-list li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--dark-line); font-size: 15px; color: #e4e7e9; } .place-list .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq > div { border-bottom: 1px solid var(--line); } .faq button { width: 100%; display: flex; align-items: flex-start; gap: 24px; background: none; border: 0; cursor: pointer; padding: 28px 4px; text-align: left; font-family: var(--font-display); color: var(--ink); } .faq button:hover { color: var(--accent-text); } .faq button .n { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--accent-text); padding-top: 6px; } .faq button .q { flex: 1; font-size: clamp(18px, 1.9vw, 21px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; } .faq .plus { position: relative; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line); margin-top: 2px; transition: background-color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1); } .faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 2px; } .faq .plus::before { width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; } .faq .plus::after { width: 1.6px; height: 11px; margin: -5.5px 0 0 -0.8px; } .faq button[aria-expanded="true"] .plus { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); } .faq button[aria-expanded="true"] .plus::before, .faq button[aria-expanded="true"] .plus::after { background: #fff; } .faq .answer { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .42s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; } .faq .answer p { padding: 0 40px 30px 60px; font-size: 16px; line-height: 1.75; color: #5a5f63; } .faq .answer[data-open="true"] { max-height: 420px; opacity: 1; } /* ---------- CTA ---------- */ .cta-band { background: var(--accent-text); border-radius: var(--r-lg); padding: clamp(48px, 6vw, 88px) clamp(24px, 4.6vw, 64px); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; margin-top: var(--sec); } .cta-band h2 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.02; } .cta-stack { display: flex; flex-direction: column; gap: 12px; } .cta-stack a { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 600; padding: 20px 28px; border-radius: 999px; transition: background-color .2s ease, color .2s ease; } /* Icon und Beschriftung als ein Flex-Item, damit "justify-content: space-between" den Pfeil weiterhin an den rechten Rand schiebt. */ .cta-stack .lbl { display: inline-flex; align-items: center; gap: 12px; } .cta-stack .lbl svg { flex: 0 0 auto; } .cta-stack .dark { background: var(--ink); color: #fff; } .cta-stack .dark:hover { background: #fff; color: var(--ink); } .cta-stack .glass { background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .45); } .cta-stack .glass:hover { background: #fff; color: var(--accent-text); } /* ---------- Kontakt ---------- */ .contact-list { margin-top: 40px; border-top: 1px solid var(--line); } .contact-list > * { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink); } .contact-list a:hover { color: var(--accent-text); } .contact-list .label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 8px; } .contact-list .value { font-family: var(--font-display); font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; letter-spacing: -0.02em; word-break: break-word; } .contact-list address { font-style: normal; } .form-card { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 48px); } .form-card h3 { font-size: 26px; letter-spacing: -0.025em; margin-bottom: 20px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 20px; } input, select, textarea { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 15px; font-family: var(--font-body); font-weight: 400; color: var(--ink); background: #fafbfb; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; } textarea { resize: vertical; min-height: 110px; } button[type="submit"] { width: 100%; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 18px 28px; font-size: 15.5px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: background-color .2s ease; } button[type="submit"]:hover { background: var(--accent); } .form-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } /* ---------- Querverweise ---------- */ .xlinks { margin-top: 28px; border-top: 1px solid var(--line); } .xlinks a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 20px; padding: 26px 4px; border-bottom: 1px solid var(--line); color: var(--ink); } .xlinks a:hover { color: var(--accent-text); } .xlinks .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-text); } .xlinks .t { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.025em; } /* ---------- Zielgruppen ---------- */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .trio article { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 38px 32px; } .trio .meta { display: flex; align-items: center; gap: 12px; } .trio .ico { width: 38px; height: 38px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--ink); } .trio .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-text); } .trio h3 { margin-top: 14px; font-size: 24px; letter-spacing: -0.025em; } .trio p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: #5a5f63; } /* ---------- Footer ---------- */ .site-footer { background: var(--dark); color: var(--paper); margin-top: var(--sec); } .site-footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; padding-top: 96px; } .site-footer h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dark-text); margin-bottom: 20px; } .site-footer h2 .ico { color: var(--accent); display: inline-flex; } .site-footer .brand .name b { color: var(--paper); } .site-footer .about { margin-top: 24px; font-size: 14.5px; line-height: 1.7; color: #9ca3a8; max-width: 330px; } .site-footer ul { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; } .site-footer ul a { display: flex; align-items: center; gap: 10px; } .site-footer ul a::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-left: 1px; border-top: 1.5px solid rgba(255, 255, 255, .38); border-right: 1.5px solid rgba(255, 255, 255, .38); transform: rotate(45deg); transition: border-color .2s ease, transform .2s ease; } .site-footer ul a:hover::before { border-color: var(--accent); transform: rotate(45deg) translate(1.5px, -1.5px); } .site-footer ul a, .site-footer .contact a { color: #e4e7e9; } .site-footer .about + .btn { color: #fff; } .site-footer .about + .btn:hover { background: var(--paper); color: var(--ink); } .site-footer ul a:hover, .site-footer .contact a:hover { color: var(--accent); } .site-footer .contact { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; } .site-footer .contact a { display: flex; align-items: flex-start; gap: 10px; } .site-footer .contact .mail { color: #9ca3a8; word-break: break-word; } .site-footer .contact .adr { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; color: #9ca3a8; line-height: 1.7; } .site-footer .legal { margin-top: 72px; padding: 28px 0 40px; border-top: 1px solid var(--dark-line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--dark-text); } .site-footer .legal a { color: var(--dark-text); } .site-footer .legal a:hover { color: var(--paper); } .site-footer .legal div { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } /* ---------- Rechtsseiten ---------- */ .legal-hero { max-width: 720px; } .legal-hero .lead { margin-top: 22px; } .legal-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; margin-top: 56px; } .legal-toc { position: sticky; top: 104px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 28px 26px; } .legal-toc .label { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .legal-toc .label .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } .legal-toc ul { margin-top: 18px; display: flex; flex-direction: column; } .legal-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); transition: color .2s ease; } .legal-toc li:first-child a { border-top: 0; padding-top: 4px; } .legal-toc a .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-text); } .legal-toc a:hover { color: var(--accent-text); } .legal-body { display: flex; flex-direction: column; gap: 20px; } .legal-card { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: clamp(26px, 3vw, 38px); scroll-margin-top: 108px; transition: border-color .28s ease, background-color .28s ease; } .legal-card:hover { border-color: var(--accent); } .legal-card .meta { display: flex; align-items: center; gap: 14px; } .legal-card .meta .n { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--accent-text); } .legal-card .meta .rule { height: 1px; flex: 1; background: var(--line-2); } .legal-card h2 { margin-top: 16px; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.025em; } .legal-card p { margin-top: 14px; font-size: 16px; line-height: 1.75; color: #5a5f63; } .legal-card p + p { margin-top: 10px; } .legal-card--note { background: #fff7f4; border-color: rgba(250, 60, 0, .28); } .legal-card--note h2 { color: var(--accent-text); } .legal-contact { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; } .legal-contact a { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); padding: 11px 18px; border-radius: 999px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .legal-contact a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* ---------- Breakpoints ---------- */ @media (max-width: 1080px) { .nav, .header-cta { display: none; } .header-mobile { display: flex; } .split--hero, .split--wide, .split--text, .split--flip, .split--about, .split--faq, .split--contact { grid-template-columns: 1fr; gap: 44px; } .cards, .reviews, .trio, .cta-band { grid-template-columns: 1fr; } .place-grid, .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; } .cta-band { gap: 36px; } .split--hero .ph, .split--flip .ph { order: 2; } .legal-layout { grid-template-columns: 1fr; gap: 32px; } .legal-toc { position: static; } } @media (max-width: 720px) { .check-list, .form-grid, .place-grid, .place-list, .site-footer .cols { grid-template-columns: 1fr; } .strengths div { padding: 24px 18px; min-height: 124px; gap: 12px; } .strengths b { font-size: 16.5px; } .site-footer .cols { gap: 40px; padding-top: 64px; } .marquee { margin-top: 64px; } .faq button { gap: 14px; padding: 22px 2px; } .faq .answer p { padding: 0 0 24px 34px; } .timeline .step { grid-template-columns: 48px 1fr; gap: 20px; } .timeline .node { width: 48px; height: 48px; } .timeline .rail { left: 23px; bottom: 80px; top: 24px; } .cta-stack a { padding: 17px 22px; font-size: 15px; } } /* ---------- Korrekturen Audit 2026-08 ---------- */ /* Grid- und Flex-Kinder dürfen unter ihre min-content-Breite schrumpfen. Ohne min-width:0 erzwingen lange deutsche Komposita ("Hausmeisterservice") auf schmalen Displays horizontales Scrollen. */ .split > *, .legal-layout > *, .site-header .bar > *, .cards > *, .reviews > *, .form-grid > *, .faq button > *, .timeline .step > * { min-width: 0; } /* Formularfelder haben eine intrinsische Standardbreite (ca. 204px). In einem zweispaltigen Grid sprengt das den Container, sobald weniger Platz da ist. width:100% koppelt die Feldbreite an die Spalte statt an den Zeichen-Default. */ input, select, textarea { width: 100%; max-width: 100%; } /* Lange Wörter umbrechen statt überlaufen lassen */ h1, h2, h3, h4, p, li, blockquote, address, .brand .name b, .brand .name span { overflow-wrap: break-word; } h1, h2, h3 { hyphens: auto; } /* Sehr schmale Geräte (ab iPhone SE): Headline-Größen zusätzlich begrenzen */ @media (max-width: 400px) { .h-xl { font-size: clamp(28px, 8.6vw, 38px); } .h-lg { font-size: clamp(27px, 8.2vw, 36px); } .h-md { font-size: clamp(24px, 7.4vw, 32px); } .site-header .bar { gap: 12px; } .brand .name span { font-size: 8.5px; letter-spacing: .1em; } /* Nur die seitlichen Innenabstände ändern. Die Kurzform "padding" würde padding-top mitsetzen und damit ".sec { padding-top: var(--sec) }" überschreiben (gleiche Spezifität, spätere Position) – alle Abschnittsabstände wären auf schmalen Geräten 0. */ .wrap { padding-left: 16px; padding-right: 16px; } .strengths div { padding: 20px 14px; min-height: 112px; } .strengths b { font-size: 15px; } .strengths .ico { width: 34px; height: 34px; } } /* Sichtbarer Fokus für Tastaturbedienung (WCAG 2.4.7). :focus-visible zeigt den Ring nur bei Tastatur-/Programmfokus, nicht bei Mausklick. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Auf dunklen Flächen kontrastiert Weiß besser als das Akzent-Orange */ .dark-band a:focus-visible, .site-footer a:focus-visible, .cta-band a:focus-visible, .mobile-nav a:focus-visible { outline-color: #fff; } input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; } /* Mindestgröße für Touch-Ziele im Footer/Kontaktbereich */ .site-footer .contact a, .legal-contact a { min-height: 44px; display: inline-flex; align-items: center; } /* Reveal-Animation via CSS statt Inline-Styles aus dem Skript. Ohne JavaScript bleibt alles sichtbar (kein Inhalt hinter opacity:0 gefangen). */ .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Bewegungsreduzierung respektieren */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } } /* Menü offen: Hintergrund nicht mitscrollen lassen */ body.nav-open { overflow: hidden; } /* Honeypot: visuell und für Screenreader entfernt, aber im DOM vorhanden. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; } /* Beschriftung samt Pflichtfeld-Sternchen als ein Flex-Item; sonst bricht das Sternchen in "form label { flex-direction: column }" auf eine eigene Zeile. */ form label .lbl { display: block; } /* Nur für Screenreader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Zentrierte Statusseiten (404, Danke) */ .status-page { display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(72px, 12vw, 140px) 0; } .status-page .inner { max-width: 620px; } .status-page .code { font-family: var(--font-display); font-size: clamp(64px, 14vw, 128px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: var(--accent); } .status-page h1 { font-size: clamp(28px, 5vw, 44px); margin-top: 18px; } .status-page p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--ink-2); } .status-page .btns { justify-content: center; } .status-links { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .status-links .label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .status-links ul { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .status-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--white); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .status-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* Deutlich markierte Platzhalter in den Rechtstexten. Vor dem Live-Gang müssen alle .todo-Blöcke ausgefüllt oder entfernt werden. */ .todo { margin-top: 16px; padding: 14px 16px; background: #fff6f3; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); } .todo b { color: var(--accent-text); } /* ---------- Schnellkontakt-Leiste (nur mobil) ---------- Fixiert am unteren Rand, erscheint erst nach dem ersten Scrollen, damit sie im Startbereich nicht mit den dortigen Buttons konkurriert. */ .dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 80; display: none; width: calc(100% - 28px); max-width: 460px; padding: 7px; gap: 6px; border-radius: 999px; background: rgba(16, 17, 18, .82); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px); border: 1px solid rgba(255, 255, 255, .12); transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; opacity: 0; } .dock.is-visible { transform: translate(-50%, 0); opacity: 1; } .dock__btn { flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background-color .22s ease, color .22s ease, transform .22s ease; } .dock__btn:hover { color: #fff; background: rgba(255, 255, 255, .10); } .dock__btn:active { transform: scale(.97); } .dock__ico { display: inline-flex; flex: 0 0 auto; } /* Die Haupt-Aktion in der Markenfarbe hervorheben */ .dock__btn--call { background: var(--accent-text); } .dock__btn--call:hover { background: var(--accent); color: #fff; } /* Auf sehr schmalen Geräten die Beschriftungen kürzen, statt sie umbrechen zu lassen – die Icons tragen die Bedeutung mit. */ @media (max-width: 359px) { .dock__txt { display: none; } .dock__btn { gap: 0; } } @media (max-width: 1080px) { .dock { display: flex; } /* Platz für die Leiste schaffen: Der Zuschlag gehört in den Footer, nicht an den body. Ein padding-bottom am body zeigt dessen helle Hintergrundfarbe unter dem dunklen Footer – genau der helle Streifen, der vermieden werden soll. */ .site-footer { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } /* Bei offenem Menü würde die Leiste darüber liegen */ body.nav-open .dock { transform: translate(-50%, 140%); opacity: 0; } } /* Ohne JavaScript bleibt die Leiste dauerhaft sichtbar statt unerreichbar */ html:not(.js) .dock { transform: translate(-50%, 0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .dock { transition: opacity .2s ease; } }