/* Theme Name: Schädling Bernhardt Dresden Theme URI: https://bernhardt-schaedling-dresden.de Description: Bespoke Theme für bernhardt-schaedling-dresden.de — Schädlingsbekämpfung in Dresden. Telefon-only (keine Formulare), self-hosted Fonts (Inter + Sora), JSON-LD (LocalBusiness/BreadcrumbList/FAQPage), WCAG 2.1 AA / BFSG. Palette „Elbe Petrol". Inhalte werden beim Aktivieren provisioniert. Author: Schädling Bernhardt Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: bernhardt-schaedling-dresden */ /* ========================================================================== 0 · Fonts (self-hosted, DSGVO-konform – keine externen Requests) ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-800.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sora-600.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/sora-700.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/sora-800.woff2") format("woff2"); } /* ========================================================================== 1 · Design-Tokens ========================================================================== */ /* PALETTE „Elbe Petrol" — Dresden liegt im Elbtalkessel; Petrol steht für Hygiene und Ruhe, das Signalrot ausschließlich für die EINE Handlung: den Anruf. Alle Textpaare sind gegen WCAG 2.1 AA gerechnet (Werte als Kommentar). Die Struktur-Token (Radius, Container, Schatten, Schrift) sind unverändert aus der Vorlage übernommen — es ändern sich ausschließlich die Farbtöne. */ :root { /* --- semantische Namen (neu) --- */ --brand: #0d5b70; /* Primär – Petrol. 7,64:1 auf Weiß */ --brand-deep: #0a4757; /* Links, Hover. 10,23:1 auf Weiß */ --brand-700: #083945; --brand-tint: #eaf3f6; /* helle Flächen */ --brand-tint-2: #d8e9ee; --cta: #c62f12; /* Signalrot – NUR für den Anruf. Weiß darauf 5,50:1 */ --cta-deep: #a32409; /* Hover. Weiß darauf 7,46:1 */ --cta-light: #ff9b7a; /* Akzent auf dunklen Bändern. 7,81:1 auf --ink */ /* --- Kompatibilitäts-Aliase: die Vorlage referenziert diese Namen an ~700 Stellen. Nur die Farbwerte wechseln, kein Selektor wird angefasst. --- */ --green: var(--brand); --green-deep: var(--brand-deep); --green-700: var(--brand-700); --green-tint: var(--brand-tint); --green-tint-2: var(--brand-tint-2); --amber: var(--cta); --amber-deep: var(--cta-deep); --amber-light: var(--cta-light); --ink: #10242b; /* Text + dunkle Sektionen. 16,04:1 auf Weiß */ --ink-soft: #23444e; /* Fließtext-Lead. 10,46:1 auf Weiß */ --muted: #4d6771; /* Sekundärtext. 6,01:1 auf Weiß, 5,34:1 auf --brand-tint */ --paper: #ffffff; --line: #d5e3e8; /* dekorative Trenner */ --line-strong: #b6ccd4; --line-btn: #6f8f9a; /* Rahmen von Bedien-Elementen. 3,46:1 auf Weiß (WCAG 1.4.11) */ --ok: #12795a; --err: #b3261e; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --container: 1320px; --shadow: 0 1px 2px rgba(16,36,43,.04), 0 8px 24px rgba(16,36,43,.06); --shadow-lg: 0 18px 50px rgba(16,36,43,.12); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --display: "Sora", var(--sans); } /* ========================================================================== 2 · Reset / Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Die Vorlage setzte body:17px, ließ html aber auf dem Browser-Default (16px) — jedes rem im Stylesheet rechnete deshalb gegen 16px, und Buttons (.98rem) landeten bei 15,7px. Wir heben stattdessen die Wurzel auf 18px: body erbt 1rem = 18px (A10) UND die gesamte Bedienoberfläche skaliert mit. Zielgruppe ist älter. */ html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; overflow-x: clip; font-family: var(--sans); /* = 18px über die 112,5%-Wurzel. Untergrenze der Site-Standard-Vorgabe (A10). */ font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Deutsche Komposita („Schädlingsbekämpfung", „Holzschutzmittelprüfung") sprengen sonst schmale Grid-Spalten. hyphens+overflow-wrap statt Überlauf. hyphenate-limit-chars hält die Trennung dort, wo sie gebraucht wird: nur Wörter ab 12 Zeichen, und nie weniger als 4 Zeichen je Teil. Ohne diese Grenze trennt Chrome auch „sau-ber" und „Be-trieb", was eine Überschrift zerhackt. */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 4 4; overflow-wrap: break-word; } /* Trennung NUR in Überschriften reicht nicht. Ein Kompositum im Fließtext („Barrierefreiheitsstärkungsgesetz", 32 Zeichen) ist breiter als ein 320-px-Gerät und setzt damit den LAYOUT-Viewport der ganzen Seite — gemessen 358px statt 320. Auf der Barrierefreiheitserklärung ist das prompt passiert. */ p, li, dd, dt, figcaption, summary, .card__text, .step p, .highlights li, .faq__body { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 5 4; overflow-wrap: break-word; } p { margin: 0 0 1em; } a { color: var(--brand-deep); text-decoration: none; } a:hover { text-decoration: underline; } /* Links im Fließtext brauchen eine nicht-farbliche Auszeichnung (WCAG 1.4.1 / axe „link-in-text-block"). Navigation, Buttons und Karten sind davon ausgenommen. */ main p a, main li a, .faq__body a, .legal a, .lead-line a { text-decoration: underline; text-underline-offset: .18em; } img { max-width: 100%; height: auto; } ul { margin: 0 0 1em; padding-left: 1.2em; } strong { font-weight: 700; } :focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; border-radius: 4px; } /* Auf dunklem Grund erreicht --cta keine 3:1 — dort der helle Akzent. */ .section--dark :focus-visible, .hero--dark :focus-visible, .site-footer :focus-visible, .aside-card--accent :focus-visible, .cta-banner :focus-visible, .actionbar :focus-visible { outline-color: var(--cta-light); } /* Telefonnummer als Text im Fließtext: KEIN tel:-Link. Jeder tel:-Anchor wird bei 390px vermessen und muss ≥44×44px sein (A11) — das ist in einem Satz nicht erreichbar. tel: bleibt den Buttons vorbehalten. */ .telnum { font-weight: 700; color: var(--brand-deep); white-space: nowrap; } /* Auf dunklem Grund wäre --brand-deep nur 1,57:1 — dort schreibt die Nummer weiß. */ .site-footer .telnum, .section--dark .telnum, .aside-card--accent .telnum, .cta-banner .telnum, .hero--dark .telnum, .actionbar .telnum { color: #fff; } /* ========================================================================== 3 · Icons (CSS-Masken, einfärbbar über currentColor) ========================================================================== */ .ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.18em; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex: none; } .ico--phone { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--mail { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--clock { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--map { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--home { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--up { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--check { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--shield { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--leaf { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--bug { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--star { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--arrow { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--award { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* --- Schädling-spezifische Icons (gleicher Strich-Stil) ------------------- */ .ico--wasp { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--rat { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--mouse { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--bedbug { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--roach { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--ant { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--marten { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--pigeon { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--flea { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--wood { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--moth { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--monitor{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ========================================================================== 4 · Topbar ========================================================================== */ .topbar { background: var(--ink); color: #cfdde3; font-size: .82rem; } .topbar__inner { max-width: var(--container); margin: 0 auto; padding: 8px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .topbar a { color: #fff; } .topbar .ico { color: var(--cta-light); margin-right: 5px; } .topbar__right { display: flex; gap: 22px; align-items: center; } @media (max-width: 760px) { .topbar__more, .topbar__right span:first-child { display: none; } } /* Die kleine Topbar-Nummer ist bei 390px nur ~20px hoch und würde als tel:-Ziel unter 44px vermessen (A11 = FAIL). Sie wird deshalb mobil KOMPLETT ausgeblendet — nur display:none liefert das 0×0-Rechteck, das der Prüfer überspringt. Der Anruf läuft mobil über die Sticky-Call-Bar. */ @media (max-width: 820px) { .topbar { display: none; } } /* ========================================================================== 5 · Header / Navigation ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow .25s; } .site-header.is-scrolled { box-shadow: 0 6px 22px rgba(16,36,43,.09); } .header__inner { max-width: var(--container); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; } /* RESPONSIVE-FIX (Kopfzeile). In der Vorlage stand .brand auf `flex: none` und .nav-toggle hatte KEIN flex — ein langer Markenname („Schädling Bernhardt" + Claim) konnte deshalb nicht schrumpfen und hat stattdessen den Burger-Button zusammengedrückt bzw. aus dem Viewport geschoben. Jetzt umgekehrt: der Burger ist unantastbar, der Markenname schrumpft und kürzt notfalls mit Ellipse. */ /* Am Desktop darf die Marke NICHT schrumpfen — dort ist Platz, und ein gekürzter Firmenname („Schä…") wäre schlimmer als eine engere Navigation. Erst unterhalb der Burger-Schwelle wird sie flexibel. */ .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand__logo { display: block; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand__name { font-family: var(--display); font-weight: 800; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__claim { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1279px) { .brand { flex: 0 1 auto; min-width: 0; } } /* Zwischen 1081 und 1300px wird es in der Kopfzeile eng: dort rückt die Navigation zusammen, statt die Marke zu kürzen. */ /* Zwischen der Burger-Schwelle und ~1460px wird es in der Kopfzeile eng: dort rückt die Navigation zusammen, statt die Marke zu kürzen oder die Anruf-Schaltfläche abzuschneiden. */ @media (min-width: 1280px) and (max-width: 1460px) { .header__inner { gap: 12px; } .nav__list > li > a, .nav__parent { padding-left: 9px; padding-right: 9px; font-size: .9rem; } .brand__claim { display: none; } } @media (max-width: 560px) { .header__inner { gap: 12px; padding: 10px 16px; } .brand { gap: 9px; } .brand__logo { width: 38px; height: 38px; } .brand__name { font-size: 1rem; } } /* Unter ~380px trägt der Claim nichts mehr bei und kostet nur Breite. */ @media (max-width: 380px) { .brand__claim { display: none; } } .nav { margin-left: auto; } .nav__list { list-style: none; display: flex; gap: 3px; margin: 0; padding: 0; align-items: center; } .nav__list > li { flex: none; } .nav__list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; } .nav__list a:hover { background: var(--green-tint); color: var(--green-deep); text-decoration: none; } .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--green-deep); } .nav__list li { position: relative; } /* Dropdowns */ .nav__list .sub-menu { list-style: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; max-height: 76vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; } .nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__list .sub-menu a { padding: 8px 11px; font-size: .9rem; font-weight: 600; border-radius: 7px; } .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: 5px; color: var(--muted); } .header__cta { flex: none; } @media (max-width: 1279px) { .site-header .header__cta { display: none; } } /* Burger — `flex: none` ist die zweite Hälfte des Kopfzeilen-Fixes: der Button darf niemals schrumpfen, und 48×48 hält die 44px-Mindestgröße (A11) ein. */ .nav-toggle { display: none; position: relative; z-index: 80; margin-left: auto; flex: none; width: 48px; height: 48px; border: 1px solid var(--line-btn); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Abdunkelnder Hintergrund hinter dem Off-Canvas-Menü (nur mobil) */ .nav-backdrop { display: none; } @media (max-width: 1279px) { .nav-toggle { display: flex; } /* WICHTIG: backdrop-filter macht den Header zum Containing-Block für position:fixed – das Off-Canvas-Menü (liegt IM Header) wäre sonst nur so hoch wie der Header (kurze Box oben). Auf Mobil daher entfernen, damit das Menü volle Viewport-Höhe bekommt. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } .nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: 100dvh; width: min(86vw, 340px); margin: 0; background: #fff; transform: translateX(100%); transition: transform .28s ease; z-index: 70; box-shadow: var(--shadow-lg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 88px 16px 28px; } body.nav-open { overflow: hidden; } body.nav-open .nav { transform: translateX(0); } .nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .nav__list > li > a { padding: 13px 14px; font-size: 1.05rem; } .nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--green-tint); border-radius: 0; margin: 2px 0 8px 12px; max-height: none; padding: 2px 0 2px 8px; } .nav__list .sub-menu a { padding: 11px 12px; font-size: .97rem; } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(8,40,50,.5); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .28s ease; } body.nav-open .nav-backdrop { opacity: 1; visibility: visible; } } /* ========================================================================== 6 · Breadcrumbs ========================================================================== */ .breadcrumbs { background: var(--green-tint); border-bottom: 1px solid var(--line); } .breadcrumbs__inner { max-width: var(--container); margin: 0 auto; padding: 11px 24px; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .breadcrumbs a { color: var(--green-deep); font-weight: 600; } .breadcrumbs__sep { color: var(--line-strong); } .breadcrumbs__current { color: var(--ink); font-weight: 600; } /* ========================================================================== 7 · Buttons ========================================================================== */ /* min-height 48px hält jedes tel:-Ziel über der 44px-Grenze (A11). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 20px; border-radius: 11px; font-family: var(--sans); font-weight: 700; font-size: .98rem; line-height: 1.15; border: 2px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s, border-color .2s; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn .ico { width: 1.05em; height: 1.05em; } .btn--accent { background: var(--cta); color: #fff; box-shadow: 0 6px 16px rgba(198,47,18,.30); } .btn--accent:hover { background: var(--cta-deep); color: #fff; box-shadow: 0 10px 22px rgba(198,47,18,.34); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-btn); } .btn--ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); } .btn--green { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(13,91,112,.26); } .btn--green:hover { background: var(--brand-deep); color: #fff; } .btn--lg { padding: 15px 26px; font-size: 1.06rem; border-radius: 13px; } /* RESPONSIVE-FIX (Layout-Viewport). `white-space: nowrap` + ein langes Label („Jetzt anrufen: 0176 4287 6094") ergibt eine min-content-Breite von ~335px. Zusammen mit 2×24px Container-Padding zwingt das den LAYOUT-Viewport auf ~376px: Chrome rendert 320–375px-Geräte dann herunterskaliert statt fluid. `body{overflow-x:clip}` verdeckt das Symptom, deshalb fällt es im Screenshot nicht auf — messbar ist es nur an `window.innerWidth !== Gerätebreite`. Unterhalb von 420px darf das Label deshalb umbrechen. */ @media (max-width: 420px) { .btn { white-space: normal; padding-left: 14px; padding-right: 14px; text-align: center; } .btn--lg { padding: 14px 16px; font-size: 1rem; } } /* Auf dunklem Grund */ .section--dark .btn--ghost, .hero--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); } .section--dark .btn--ghost:hover, .hero--dark .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } /* ========================================================================== 8 · Sektionen ========================================================================== */ .section { padding: 72px 0; } .section--alt { background: var(--green-tint); } .section--tint2 { background: var(--green-tint-2); } .section--dark { background: var(--ink); color: #cfe0e6; position: relative; overflow: hidden; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark a { color: #fff; } .section--dark::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px; background: currentColor; opacity: .04; -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; pointer-events: none; } .section__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; } .section__inner--narrow { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .section__kicker { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--green); margin: 0 0 .55em; } .section--dark .section__kicker { color: var(--amber); } .section__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 .45em; } .section__lead { font-size: 1.12rem; color: var(--muted); max-width: 60ch; margin: 0 0 1.6em; } .section--dark .section__lead { color: #b2ccd4; } /* ========================================================================== 9 · Hero ========================================================================== */ .hero { position: relative; background: var(--paper); padding: 72px 0 64px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 420px at 88% -8%, var(--green-tint-2), transparent 60%), radial-gradient(560px 360px at 5% 108%, var(--green-tint), transparent 55%); pointer-events: none; } /* Startseite: Hero ohne Farbverlauf (flacher, einfarbiger Hintergrund) */ body.home .hero { background: #fff; } body.home .hero::before { display: none; } .hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .hero__kicker { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line-strong); color: var(--green-deep); font-weight: 700; font-size: .82rem; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px; margin: 0 0 18px; box-shadow: var(--shadow); } .hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; max-width: 18ch; margin: 0 0 .4em; } .hero__lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--ink-soft); max-width: 56ch; margin: 0 0 1.8em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; } .hero__badges li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--ink-soft); } .hero__badges .ico { color: var(--green); background: var(--green-tint); width: 1.7em; height: 1.7em; padding: .34em; border-radius: 50%; } /* Dunkle Hero-Variante */ .hero--dark { background: var(--ink); color: #d2e4ea; } .hero--dark .hero__title { color: #fff; } .hero--dark .hero__lead { color: #b2ccd4; } .hero--dark .hero__kicker { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; } .hero--dark::before { background: radial-gradient(700px 420px at 88% -10%, rgba(13,91,112,.5), transparent 60%); } /* ========================================================================== 10 · Grid + Cards ========================================================================== */ .grid { display: grid; gap: 22px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .16s, box-shadow .2s, border-color .2s; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--green-tint); color: var(--green); margin-bottom: 16px; } .card__icon .ico { width: 1.5em; height: 1.5em; } .card__title { font-size: 1.2rem; margin: 0 0 .4em; } .card__text { color: var(--muted); margin: 0 0 1em; font-size: .98rem; } .card__link { font-weight: 700; color: var(--green-deep); display: inline-flex; align-items: center; gap: 6px; } .card__link:hover { text-decoration: none; gap: 9px; } .card--link { display: block; color: inherit; } .card--link:hover { text-decoration: none; } /* Pest-Kachel-Auswahl (Schädling wählen) */ .pests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 920px) { .pests { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .pests { grid-template-columns: repeat(2, 1fr); } } .pest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); transition: transform .16s, box-shadow .2s, border-color .2s; } .pest:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-lg); text-decoration: none; } .pest .ico { width: 30px; height: 30px; color: var(--green); } /* ========================================================================== 11 · Steps (Ablauf) ========================================================================== */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .step__num, .step::before { counter-increment: step; } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--display); font-weight: 800; margin-bottom: 14px; } .step__num::before { content: counter(step); } .step__title { font-size: 1.1rem; margin: 0 0 .35em; } .step p { color: var(--muted); font-size: .96rem; margin: 0; } /* ========================================================================== 12 · Checklist / Listen ========================================================================== */ .checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; } .checklist li { position: relative; padding-left: 34px; color: var(--ink-soft); } .checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); color: var(--green); -webkit-mask: none; } .checklist li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; background: var(--green); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .section--dark .checklist li { color: #c3d9e0; } .section--dark .checklist li::before { background: rgba(255,255,255,.12); } .section--dark .checklist li::after { background: var(--amber); } /* ========================================================================== 13 · Badges / Pills (Vertrauen) ========================================================================== */ .badges { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; } .badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: .9rem; color: var(--ink); box-shadow: var(--shadow); } .badge .ico { color: var(--green); } .badge--amber .ico { color: var(--amber); } /* ========================================================================== 14 · Stats ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--green); line-height: 1; } .section--dark .stat__num { color: var(--amber); } .stat__label { color: var(--muted); font-size: .95rem; font-weight: 600; margin-top: .4em; } .section--dark .stat__label { color: #b2ccd4; } /* ========================================================================== 15 · Split (Text + Medien/Box) ========================================================================== */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 30px; } } .split__media { background: var(--green-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 280px; padding: 32px; display: flex; flex-direction: column; justify-content: center; } /* ========================================================================== 16 · Quote / Testimonial ========================================================================== */ .quote { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); } .quote__text { font-size: 1.18rem; font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0 0 .7em; line-height: 1.45; } .quote__cite { color: var(--muted); font-weight: 600; font-style: normal; font-size: .92rem; } .quote__stars { color: var(--amber); display: inline-flex; gap: 2px; margin-bottom: .6em; } /* ========================================================================== 17 · Notice / Hinweis ========================================================================== */ .notice { border-radius: var(--radius); padding: 22px 26px; margin: 1.6em 0; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); } .notice h3 { margin: 0 0 .35em; } .notice p:last-child { margin-bottom: 0; } .notice--info { background: var(--green-tint); border-color: var(--line-strong); } .notice--warn { background: #fff1ec; border-color: #f2c8ba; } .notice--warn h3 { color: var(--amber-deep); } /* ========================================================================== 18 · FAQ (details/summary) ========================================================================== */ .faq { display: grid; gap: 12px; } .faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--green); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; transition: transform .25s; } .faq__item[open] summary::after { transform: translateY(-50%) rotate(180deg); } .faq__body { overflow: hidden; transition: height .28s ease; } .faq__body > div, .faq__item .faq__body { padding: 0 22px; } .faq__body p { padding: 0; margin: 0 0 1em; color: var(--ink-soft); } .faq__item[open] .faq__body { padding-bottom: 6px; } .faq__body :first-child { margin-top: 0; } .faq__body { padding: 0 22px 4px; } /* ========================================================================== 19 · CTA-Banner ========================================================================== */ .cta-banner { background: linear-gradient(120deg, var(--green-deep), var(--green)); color: #fff; border-radius: var(--radius-lg); padding: 44px 40px; text-align: center; position: relative; overflow: hidden; } .cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .4em; } .cta-banner p { color: #d6e9f0; max-width: 56ch; margin: 0 auto 1.4em; } .cta-banner .hero__ctas, .cta-banner__actions { justify-content: center; display: flex; flex-wrap: wrap; gap: 14px; } .cta-banner .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } .cta-banner .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } /* ========================================================================== 20 · (Formular-Baustein ENTFERNT) Das Telefon ist der einzige Auftragskanal. Es gibt auf dieser Website kein
, kein , kein