/* Theme Name: Schädling Düsseldorf Theme URI: https://schaedling-duesseldorf.de Description: Klassisches WordPress-Theme für schaedling-duesseldorf.de – Schädlingsbekämpfung in Düsseldorf. Design-System und Engineering sind vom Vorlagen-Projekt übernommen; neu sind die Farbwelt (Petrol + Signalorange), die Inhalte, die Bilder und die Düsseldorfer Geodaten. Self-hosted Fonts (Inter + Sora), JSON-LD (LocalBusiness/Breadcrumb/FAQ), keine externen Requests, keine Formulare – Telefon ist der einzige Auftragskanal. Author: Beratung & Service Thomas Version: 1.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: schaedling-duesseldorf */ /* ========================================================================== 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"); } /* Maßgleiche Ersatzschriften. Bis Inter und Sora geladen sind, zeigt der Browser die Systemschrift. Ohne Anpassung ist die schmaler und höher — der Text bricht anders um, und beim Umschalten springt das Layout (gemessen: 0,159 CLS allein durch die zweizeilig werdende Brotkrumen-Zeile). Die Werte hier sind gemessen (Zeichenbreite und Ober-/Unterlänge gegen Arial), nicht geschätzt. */ @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 105.51%; ascent-override: 91.94%; descent-override: 22.75%; line-gap-override: 0%; } @font-face { font-family: "Sora Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 108.53%; ascent-override: 89.38%; descent-override: 26.72%; line-gap-override: 0%; } /* ========================================================================== 1 · Design-Tokens ========================================================================== */ :root { /* Farbwelt „Petrol & Signal" – gegenüber der Vorlage nur im Farbton gedreht: Primär von Teal-Grün nach Petrolblau (klinische Hygiene, Vertrauen), Akzent von Amber nach Signal-Orange. Jedes Textpaar ist auf >= 4,5:1 geprüft. */ --brand: #0b5566; /* Primär – Petrolblau */ --brand-deep: #08424f; --brand-700: #063440; --brand-tint: #eef5f7; /* helle Flächen */ --brand-tint-2: #dcecf0; --ink: #0a2530; /* Text + dunkle Sektionen */ --ink-soft: #26454f; --muted: #516d76; /* Sekundärtext */ --accent: #bf3d10; /* CTA-Akzent – trägt weiße Schrift (5,4:1) */ --accent-deep: #96300c; /* Heller Akzent AUSSCHLIESSLICH für Text/Icons auf --ink: der dunkle Akzent hätte auf dunklem Grund nur 2,6:1, dieser hat 8,0:1. */ --accent-bright: #f6a663; --paper: #ffffff; --line: #d9e5e9; --line-strong: #bbd0d7; --ok: #1a8f7d; --err: #b8352c; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --container: 1520px; /* breitere Bühne; Lesebreiten unten separat begrenzt */ --shadow: 0 1px 2px rgba(10,37,48,.04), 0 8px 24px rgba(10,37,48,.06); --shadow-lg: 0 18px 50px rgba(10,37,48,.12); --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --display: "Sora", "Sora Fallback", var(--sans); } /* ========================================================================== 2 · Reset / Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -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 Basis: Pflichtwert der Barrierefreiheits-Vorgabe (A10) und angenehm für ältere Leser – die Vorlage lag bei 17px. */ font-size: 18px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Lange deutsche Komposita ("Schädlingsbekämpfung", "Holzschädlingsgutachten") dürfen in schmalen Rasterspalten nicht überlaufen. */ 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; overflow-wrap: break-word; hyphens: auto; } p { margin: 0 0 1em; } /* Fließtext-Links sind unterstrichen: Farbe allein unterscheidet sie zu wenig vom Text (WCAG 1.4.1 / axe „link-in-text-block"). Komponenten-Links (Buttons, Karten, Navigation, Pills) heben das unten gezielt auf. */ a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: from-font; } a:hover { text-decoration: underline; } 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(--accent); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== 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 { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--mail { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--clock { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--map { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--home { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--up { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--check { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--shield { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--leaf { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--bug { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--star { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--arrow { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--award { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } /* --- Schädling-spezifische Icons (gleicher Strich-Stil) ------------------- */ .ico--wasp { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--rat { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--mouse { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--bedbug { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--roach { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--ant { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--marten { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--pigeon { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--flea { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--wood { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--moth { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--monitor{ --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } /* ========================================================================== 4 · Topbar ========================================================================== */ .topbar { background: var(--ink); color: #cfe3ea; 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(--accent-bright); 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; } } /* ========================================================================== 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(10,37,48,.09); } .header__inner { max-width: var(--container); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 22px; } .brand { display: flex; align-items: center; gap: 12px; flex: none; } .brand:hover { text-decoration: none; } .brand__logo { display: block; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-family: var(--display); font-weight: 800; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; } .brand__claim { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .01em; } .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(--brand-tint); color: var(--brand-deep); text-decoration: none; } .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--brand-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: 1080px) { .site-header .header__cta { display: none; } } /* Burger */ .nav-toggle { display: none; position: relative; z-index: 80; margin-left: auto; width: 46px; height: 42px; border: 1px solid var(--line); 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: 1080px) { .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(--brand-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(6,52,64,.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(--brand-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(--brand-deep); font-weight: 600; } .breadcrumbs__sep { color: var(--line-strong); } .breadcrumbs__current { color: var(--ink); font-weight: 600; } /* ========================================================================== 7 · Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 11px; font-family: var(--sans); font-weight: 700; font-size: .98rem; line-height: 1; 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(--accent); color: #fff; box-shadow: 0 6px 16px rgba(191,61,16,.32); } .btn--accent:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 22px rgba(191,61,16,.36); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); } .btn--brand { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(11,85,102,.28); } .btn--brand:hover { background: var(--brand-deep); color: #fff; } .btn--lg { padding: 15px 26px; font-size: 1.06rem; border-radius: 13px; } /* 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(--brand-tint); } .section--tint2 { background: var(--brand-tint-2); } .section--dark { background: var(--ink); color: #d2e4ea; 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; --ico-mask: url("data:image/svg+xml,") center/contain no-repeat; -webkit-mask: var(--ico-mask); mask: var(--ico-mask); 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(--brand); margin: 0 0 .55em; } .section--dark .section__kicker { color: var(--accent-bright); } .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: #b6d2da; } /* ========================================================================== 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(--brand-tint-2), transparent 60%), radial-gradient(560px 360px at 5% 108%, var(--brand-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(--brand-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(--brand); background: var(--brand-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: #b6d2da; } .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(11,85,102,.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(--brand-tint); color: var(--brand); 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(--brand-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(--brand); box-shadow: var(--shadow-lg); text-decoration: none; } .pest .ico { width: 30px; height: 30px; color: var(--brand); } /* ========================================================================== 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(--brand); 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(--brand-tint); color: var(--brand); -webkit-mask: none; } .checklist li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; background: var(--brand); --ico-mask: url("data:image/svg+xml,") center/contain no-repeat; -webkit-mask: var(--ico-mask); mask: var(--ico-mask); } .section--dark .checklist li { color: #c6dde5; } .section--dark .checklist li::before { background: rgba(255,255,255,.12); } .section--dark .checklist li::after { background: var(--accent-bright); } /* ========================================================================== 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(--brand); } .badge--accent .ico { color: var(--accent); } /* ========================================================================== 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(--brand); line-height: 1; } .section--dark .stat__num { color: var(--accent-bright); } .stat__label { color: var(--muted); font-size: .95rem; font-weight: 600; margin-top: .4em; } .section--dark .stat__label { color: #b6d2da; } /* ========================================================================== 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(--brand-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(--brand); 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(--accent); 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(--brand-tint); border-color: var(--line-strong); } .notice--warn { background: #fff4e9; border-color: #f5d3ab; } .notice--warn h3 { color: var(--accent-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(--brand); --ico-mask: url("data:image/svg+xml,") center/contain no-repeat; -webkit-mask: var(--ico-mask); mask: var(--ico-mask); 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(--brand-deep), var(--brand)); 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: #d4e9ef; 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 · Formulare – ENTFERNT Telefon ist der einzige Auftragskanal. Dieses Theme enthält bewusst keine Formular-Styles, kein
, kein – siehe iron-rules.md Regel 3. ========================================================================== */ /* ========================================================================== 21 · Einsatzgebiete-Verzeichnis + Live-Suche ========================================================================== */ /* Das Einsatzgebiete-Verzeichnis ist eine reine Linkliste (kein Suchfeld – ein wäre ein Formularelement). */ .verzeichnis { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 920px) { .verzeichnis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .verzeichnis { grid-template-columns: 1fr; } } .verzeichnis a { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); } .verzeichnis a:hover { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; } .verzeichnis a::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--brand); --ico-mask: url("data:image/svg+xml,") center/contain no-repeat; -webkit-mask: var(--ico-mask); mask: var(--ico-mask); } .areasearch__none { color: var(--muted); } /* ========================================================================== 22 · Mobile Action-Bar + To-Top ========================================================================== */ .actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(10,37,48,.97); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 -6px 20px rgba(0,0,0,.18); } .actionbar__txt { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 7px; flex: 1; } .actionbar__txt .ico { color: var(--accent-bright); } .actionbar__call { background: var(--accent); color: #fff; padding: 10px 16px; } .actionbar__ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 10px 14px; } @media (max-width: 820px) { .actionbar { display: flex; } .actionbar__txt { display: none; } body { padding-bottom: 64px; } .actionbar__call, .actionbar__ghost { flex: 1; justify-content: center; } } .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--brand); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .22s; box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; justify-content: center; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 820px) { .to-top { bottom: 74px; } } /* ========================================================================== 23 · Footer ========================================================================== */ .site-footer { background: var(--ink); color: #a9c6cf; padding: 60px 0 0; } .footer__grid { max-width: var(--container); margin: 0 auto; padding: 0 24px 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } } .site-footer h2, .site-footer h4 { font-family: var(--display); font-weight: 700; color: #fff; font-size: 1rem; line-height: 1.25; margin: 0 0 1em; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .site-footer a { color: #a9c6cf; font-weight: 500; } .site-footer a:hover { color: #fff; } .footer__name { font-family: var(--display); font-weight: 800; color: #fff; font-size: 1.15rem; display: block; margin-bottom: .6em; } .footer__pitch { font-size: .94rem; color: #9bb9c3; margin-bottom: 1.2em; } .footer__contact { display: grid; gap: 10px; } .footer__contact li { display: flex; align-items: center; gap: 9px; } .footer__contact .ico { color: var(--accent-bright); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.1); } .footer__bottom-inner { max-width: var(--container); margin: 0 auto; padding: 20px 24px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: #8aa9b3; } .footer__legal { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; } /* ========================================================================== 24 · Utilities ========================================================================== */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .lead { font-size: 1.14rem; color: var(--ink-soft); } .muted { color: var(--muted); } /* ========================================================================== 25 · Bausteine für Detail-/Unterseiten ========================================================================== */ /* Zentrierter Sektionskopf */ .section__head { text-align: center; max-width: 660px; margin: 0 auto 2.4em; } .section__head .section__lead { margin-left: auto; margin-right: auto; } /* Anzeichen-Liste (amber Punkt) */ .signs { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; } .signs li { position: relative; padding-left: 30px; color: var(--ink-soft); } .signs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(191,61,16,.16); } /* Kontakt-/Info-Liste */ .infolist { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .infolist li { display: flex; gap: 14px; align-items: flex-start; } .infolist .ico { color: var(--brand); width: 1.55em; height: 1.55em; flex: none; margin-top: 2px; } .infolist strong { display: block; color: var(--ink); } .infolist span, .infolist a { color: var(--muted); } /* Team-Karten mit Avatar-Symbol */ .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 760px) { .team { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .team { grid-template-columns: 1fr; } } .team .card { text-align: center; } .avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--brand-tint); border: 1px solid var(--line); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--brand); } .avatar .ico { width: 2.1em; height: 2.1em; } /* Verwandte Links / Nachbar-Gebiete als Pills */ .tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .tags a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink); box-shadow: var(--shadow); } .tags a:hover { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; } .tags .ico { color: var(--brand); } /* Legal-Text (Impressum/Datenschutz) */ .legal h2 { font-size: 1.25rem; margin: 1.6em 0 .4em; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--ink-soft); } /* ========================================================================== 26 · UX-Ausbau (gleiches Theme): Micro-Animationen, Split-Hero, Quick-Help, Routen, Feature, Mega-Menü, Trust-Band, Detail-Layout, Pre-Footer ========================================================================== */ /* --- Micro-Animationen (Progressive Enhancement) --- */ .reveal { will-change: opacity, transform; } html.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } html.anim .reveal.is-in { opacity: 1; transform: none; } html.anim .hero-in { opacity: 0; transform: translateY(16px); } html.anim .hero-in.hero-in--show { opacity: 1; transform: none; transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { html.anim .reveal, html.anim .hero-in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --- Asymmetrischer Hero mit Quick-Help-Panel --- */ .hero--split .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; } @media (max-width: 940px) { .hero--split .hero__inner { grid-template-columns: 1fr; gap: 38px; } } .quickhelp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px; } .quickhelp__title { font-family: var(--display); font-weight: 800; font-size: 1.18rem; margin: 0 0 2px; } .quickhelp__sub { color: var(--muted); font-size: .9rem; margin: 0; } .quickhelp__call { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.18rem; padding: 14px; border-radius: 11px; margin: 16px 0; box-shadow: 0 8px 18px rgba(191,61,16,.3); transition: background .2s ease; } .quickhelp__call:hover { background: var(--accent-deep); color: #fff; text-decoration: none; } .quickhelp__facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 11px; } .quickhelp__facts li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .93rem; color: var(--ink-soft); } .quickhelp__facts .ico { color: var(--brand); flex: none; } .quickhelp__router-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin: 0 0 9px; } .quickhelp__router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .quickhelp__router a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; font-weight: 600; color: var(--ink); text-align: center; transition: border-color .2s ease, background .2s ease, color .2s ease; } .quickhelp__router a:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-tint); text-decoration: none; } .quickhelp__router .ico { width: 1.55em; height: 1.55em; color: var(--brand); } /* --- Routen „nach Bedarf" --- */ .routes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 720px) { .routes { grid-template-columns: 1fr; } } .route { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; color: inherit; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; } .route:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; border-color: var(--line-strong); } .route__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: var(--brand-tint); color: var(--brand); margin-bottom: 18px; transition: transform .3s cubic-bezier(.2,.7,.2,1); } .route:hover .route__icon { transform: scale(1.06); } .route__icon .ico { width: 1.75em; height: 1.75em; } .route h3 { font-size: 1.5rem; margin: 0 0 .3em; } .route p { color: var(--muted); margin: 0 0 1.1em; } .route__cta { font-weight: 700; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 7px; transition: gap .2s ease; } .route:hover .route__cta { gap: 12px; } .route--urgent { background: linear-gradient(to bottom right, #fff4e9, #fff 70%); border-color: #f5d3ab; } .route--urgent .route__icon { background: rgba(191,61,16,.16); color: var(--accent-deep); } .route--urgent .route__cta { color: var(--accent-deep); } /* --- Feature-Layout (1 groß + Kachelraster) --- */ .feature { display: grid; grid-template-columns: .92fr 1.08fr; gap: 28px; align-items: stretch; } @media (max-width: 880px) { .feature { grid-template-columns: 1fr; } } .feature__hero { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .feature__hero::after { content: ""; position: absolute; right: -34px; bottom: -44px; width: 220px; height: 220px; background: #fff; opacity: .06; --ico-mask: url("data:image/svg+xml,") center/contain no-repeat; -webkit-mask: var(--ico-mask); mask: var(--ico-mask); pointer-events: none; } .feature__hero > * { position: relative; } .feature__badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: rgba(191,61,16,.2); color: #f8d9b6; font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; } .feature__hero .ico--big { width: 44px; height: 44px; color: var(--accent-bright); margin-bottom: 14px; } .feature__hero h3 { color: #fff; font-size: 1.7rem; margin: 0 0 .3em; } .feature__hero p { color: #c9dde4; margin: 0 0 1.5em; } .feature__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 480px) { .feature__grid { grid-template-columns: 1fr; } } /* --- Mega-Menü (Leistungen) – nur Desktop --- */ @media (min-width: 1081px) { .nav__list .menu-item.mega { position: relative; } .nav__list .menu-item.mega > .sub-menu { width: 600px; max-height: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 14px; } .nav__list .menu-item.mega > .sub-menu a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; } .nav__list .menu-item.mega > .sub-menu .ico { width: 1.3em; height: 1.3em; color: var(--brand); flex: none; } } .nav__list .sub-menu .ico { color: var(--brand); } /* --- Trust-Band --- */ .trustband { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; padding: 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .trustband__item { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink-soft); font-size: .95rem; white-space: nowrap; } .trustband__item .ico { flex: none; } /* volle Desktop-Breite: garantiert eine Reihe (Inhalt passt hier sicher) */ @media (min-width: 1220px) { .trustband { flex-wrap: nowrap; } } .trustband__item .ico { color: var(--accent); width: 1.5em; height: 1.5em; } .trustband__divider { width: 1px; height: 26px; background: var(--line); } @media (max-width: 600px) { .trustband__divider { display: none; } } /* --- In-Page-Navigation (Detailseiten) --- */ .inpage-nav { position: sticky; top: 63px; z-index: 30; background: rgba(255,255,255,.93); backdrop-filter: saturate(150%) blur(9px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .inpage-nav__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .inpage-nav__inner::-webkit-scrollbar { display: none; } .inpage-nav a { padding: 15px 14px; font-weight: 600; font-size: .92rem; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .inpage-nav a:hover { color: var(--ink); text-decoration: none; } .inpage-nav a.is-active { color: var(--brand-deep); border-bottom-color: var(--brand); } @media (max-width: 720px) { .inpage-nav { display: none; } } /* --- Detail-Layout: Inhalt + Sticky-Aside --- */ .detail { display: grid; grid-template-columns: 1fr 340px; gap: 50px; align-items: start; } @media (max-width: 980px) { .detail { grid-template-columns: 1fr; gap: 30px; } } .detail__main > .detail-sec { padding: 44px 0; border-bottom: 1px solid var(--line); } .detail__main > .detail-sec:first-child { padding-top: 6px; } .detail__main > .detail-sec:last-child { border-bottom: none; } .detail__main .section__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); } .detail .detail-sec > .section__kicker { margin-top: 0; } .detail .steps { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .detail .steps { grid-template-columns: 1fr; } } .detail__aside { display: grid; gap: 18px; position: sticky; top: 128px; } @media (max-width: 980px) { .detail__aside { position: static; } } .aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; } .aside-card--accent { background: var(--ink); color: #fff; } .aside-card--accent h3, .aside-card--accent p { color: #fff; } .aside-card h3 { font-size: 1.15rem; margin: 0 0 .7em; } .aside-card .btn { width: 100%; justify-content: center; } .aside-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .aside-facts li { display: flex; align-items: flex-start; gap: 12px; } .aside-facts .ico { color: var(--brand); flex: none; margin-top: 2px; } .aside-facts strong { display: block; color: var(--ink); font-size: .96rem; } .aside-facts span { color: var(--muted); font-size: .88rem; } /* --- Pre-Footer-CTA-Band --- */ .prefooter { background: var(--brand-tint); border-top: 1px solid var(--line); } .prefooter__inner { max-width: var(--container); margin: 0 auto; padding: 52px 24px; display: grid; grid-template-columns: 1.5fr auto; gap: 30px; align-items: center; } @media (max-width: 760px) { .prefooter__inner { grid-template-columns: 1fr; } } .prefooter__kicker { font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 .5em; } .prefooter__title { font-size: clamp(1.5rem, 2.7vw, 2.1rem); margin: 0 0 .3em; } .prefooter__text { color: var(--muted); margin: 0; max-width: 54ch; } .prefooter__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* --- Fokus-Politur --- */ .card:focus-visible, .route:focus-visible, .pest:focus-visible, .verzeichnis a:focus-visible, .quickhelp__router a:focus-visible, .tags a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } /* ========================================================================== 27 · Bestimmungshilfe ("Welches Tier ist das?"), Hero-Deko, Micro-Animationen ========================================================================== */ .identify { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 820px) { .identify { grid-template-columns: 1fr; } } .id-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; } .id-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .id-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .id-card__icon { width: 50px; height: 50px; border-radius: 13px; background: var(--brand-tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; } .id-card__icon .ico { width: 1.55em; height: 1.55em; } .id-card h3 { margin: 0; font-size: 1.22rem; } .id-card__tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; } .id-card__tag--remove { background: rgba(191,61,16,.16); color: var(--accent-deep); } .id-card__tag--protected { background: var(--brand-tint); color: var(--brand-deep); } .id-card ul { list-style: none; padding: 0; margin: 0 0 1.1em; display: grid; gap: 9px; } .id-card li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: .97rem; } .id-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .id-card--protected li::before { background: var(--brand); } .id-card__note { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 13px; margin: 0; } /* Dekoratives schwebendes Insekten-Symbol im Hero */ .hero__deco { position: absolute; top: 16%; right: 7%; width: 60px; height: 60px; color: var(--accent); pointer-events: none; z-index: 1; filter: drop-shadow(0 8px 18px rgba(191,61,16,.3)); } .hero__deco .ico { width: 100%; height: 100%; } @media (max-width: 940px) { .hero__deco { display: none; } } /* Micro-Animationen (nur wenn der Nutzer Bewegung erlaubt) */ @media (prefers-reduced-motion: no-preference) { @keyframes sd-float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(5deg); } } @keyframes sd-pulse { 0%, 100% { box-shadow: 0 6px 18px rgba(191,61,16,.34); } 50% { box-shadow: 0 6px 18px rgba(191,61,16,.34), 0 0 0 10px rgba(191,61,16,.10); } } .float-anim { animation: sd-float 4.5s ease-in-out infinite; } .pulse-cta { animation: sd-pulse 2.2s ease-in-out infinite; } } /* Hinweis neben dem Anruf-Button (statt zweitem Button) */ .hero__cta-note { font-size: .9rem; color: var(--muted); align-self: center; max-width: 24ch; line-height: 1.35; } /* Saison-Banner (Layout-Variante D) */ .season { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); color: #2b1405; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.12); } .season__inner { max-width: var(--container); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; } .season__inner .ico { width: 1.3em; height: 1.3em; color: #2b1405; flex: none; } .season__inner strong { color: #2b1405; } .season__inner span { font-weight: 600; } .season__inner a { color: #2b1405; font-weight: 800; text-decoration: underline; } /* 28 · Städte-Verzeichnis (alle Orte nach Region gruppiert) */ .cityhub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .cityhub__region { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px 22px 24px; } .cityhub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); } .cityhub__h { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.16rem; line-height: 1.2; } .cityhub__h .ico { width: 1.15em; height: 1.15em; color: var(--brand); flex: none; } .cityhub__count { flex: none; font-size: .74rem; font-weight: 700; color: var(--brand-deep); background: var(--brand-tint); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .cityhub__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .cityhub__link { display: block; padding: 9px 12px; border-radius: 10px; background: var(--bg-soft, #f5f8f9); border: 1px solid transparent; color: var(--ink-soft); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s; } .cityhub__link:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); transform: translateY(-1px); } .cityhub__link--main { background: var(--brand); color: #fff; } .cityhub__link--main:hover { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); } @media (max-width: 900px) { .cityhub { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cityhub__grid { grid-template-columns: 1fr; } } /* 29 · Fließtext-Aufwertung: Lead-Satz, Highlight-Karten, Bild-Text-Split */ .lead-line { font-size: 1.2rem; line-height: 1.55; color: var(--ink); font-weight: 500; margin: 0 0 .9em; } .section--dark .lead-line { color: #fff; } .detail__main .lead-line { font-size: 1.1rem; } .highlights { list-style: none; padding: 0; margin: 1.3em 0; display: grid; gap: 12px; } .highlights li { display: flex; gap: 13px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow); } .highlights li .ico { width: 1.35em; height: 1.35em; color: var(--brand); flex: none; margin-top: 2px; } .highlights li > div { color: var(--ink-soft); } .highlights strong { color: var(--ink); } .mediasplit { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } .mediasplit__body > .section__title { margin-top: 0; } .mediasplit--rev .mediasplit__body { order: 2; } @media (max-width: 820px) { .mediasplit { grid-template-columns: 1fr; gap: 26px; } .mediasplit--rev .mediasplit__body { order: 0; } } .figph { margin: 0; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: linear-gradient(140deg, var(--brand-tint), #ffffff 70%); position: relative; overflow: hidden; } .figph::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 200px; height: 200px; border-radius: 50%; background: var(--brand); opacity: .05; } .figph .ico { width: 58px; height: 58px; color: var(--brand); opacity: .55; position: relative; } .figph figcaption { font-size: .82rem; color: var(--muted); letter-spacing: .02em; max-width: 32ch; position: relative; } @media (max-width: 820px) { .figph { min-height: 200px; } } /* 30 · Zusätzliche Themen-Icons für Karten und Bildrahmen */ .ico--roof { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--window { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--alert { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--calendar { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--search { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--bee { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } .ico--tool { --ico-mask: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask); mask-image: var(--ico-mask); } /* 31 · Startseiten-Hero mit Bild (Split, Variante A) */ .hero--media .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; } .hero--media .hero__ctas { margin-bottom: 0; } .hero--media .hero__badges { margin-bottom: 0; } .hero__media { position: relative; } .hero__figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--brand-tint); box-shadow: 0 30px 60px -24px rgba(11,85,102,.45); } .hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__figure::after { content: ""; position: absolute; inset: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); pointer-events: none; } .hero__figure-tag { position: absolute; left: 14px; bottom: 14px; margin: 0; background: rgba(255,255,255,.92); color: var(--ink); font-size: .74rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; } .hero__figure-tag .ico { width: 1em; height: 1em; color: var(--brand); } .hero__stat { position: absolute; left: -16px; bottom: 26px; background: #fff; border-radius: 16px; padding: 13px 18px; box-shadow: 0 22px 44px -16px rgba(0,0,0,.3); display: flex; flex-direction: column; line-height: 1.15; } .hero__stat strong { font-family: var(--display); font-size: 1.5rem; color: var(--brand); } .hero__stat span { font-size: .78rem; color: var(--muted); font-weight: 600; } @media (max-width: 900px) { .hero--media .hero__inner { grid-template-columns: 1fr; gap: 30px; } .hero__stat { left: 12px; } } /* 32 · Bildrahmen als echtes Foto */ .figph--photo { padding: 0; min-height: 0; border: none; background: none; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 26px 54px -24px rgba(11,85,102,.4); } .figph--photo::after { display: none; } .figph img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 34 · Foto im Bestimmungs-Card */ .id-card { overflow: hidden; } .id-card__media { margin: -26px -26px 18px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-tint); } .id-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 35 · Anpassungen für schaedling-duesseldorf.de Das Design-System der Vorlage bleibt unverändert. Hier stehen nur: (a) Korrekturen an Barrierefreiheit/Responsivität, die in der Vorlage offen waren, (b) die Foto-Varianten der Bausteine, (c) neue Komponenten, die dieser Inhalt braucht. ========================================================================== */ /* --- 35.1 Komponenten-Links ohne Unterstreichung ------------------------- */ /* Fließtext-Links sind global unterstrichen (siehe §2). Buttons, Karten, Navigation und Pills tragen ihre Bedeutung über Form und Fläche und werden deshalb hier wieder glattgestellt. */ .btn, .brand, .nav__list a, .breadcrumbs a, .card__link, .card--link, .pest, .route, .tags a, .verzeichnis a, .quickhelp__call, .quickhelp__router a, .site-footer a, .footer__legal a, .inpage-nav a, .cityhub__link, .actionbar a, .skip-link, .to-top, .id-card a, .localfacts a, .gallery a, .aside-card a, .trustband a, .stepnav a { text-decoration: none; } .site-footer a:hover, .nav__list a:hover, .breadcrumbs a:hover, .cityhub__link:hover, .inpage-nav a:hover { text-decoration: underline; } /* --- 35.2 Sprunglink "Zum Inhalt springen" ------------------------------- */ .skip-link { position: absolute; left: 12px; top: -64px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 0 0 10px 10px; background: var(--brand-deep); color: #fff; font-weight: 700; transition: top .18s ease; } .skip-link:focus { top: 0; } /* --- 35.3 Touch-Ziele mindestens 44x44 px -------------------------------- */ /* Jeder Klick-zum-Anrufen-Link ist mindestens 44 px hoch – das ist die Konversionsfläche der ganzen Seite. */ a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; } .topbar a[href^="tel:"] { display: inline; min-height: 0; } .btn { padding: 14px 20px; } .btn--lg { padding: 16px 26px; } .nav-toggle { width: 46px; height: 46px; } .actionbar__call, .actionbar__ghost { padding: 14px 16px; } .breadcrumbs__inner { padding: 2px 24px; } .breadcrumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } .footer__contact li a, .infolist a { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 1080px) { .nav__list .sub-menu a { padding: 13px 12px; } } /* Weiße Button-Schrift im dunklen Footer nicht von `.site-footer a` überschreiben */ .site-footer .btn--accent, .site-footer .btn--accent:hover, .prefooter .btn--accent, .prefooter .btn--accent:hover { color: #fff; } .site-footer .btn--accent .ico { color: #fff; } /* --- 35.4 Telefonnummer als reiner Text --------------------------------- */ /* Im Fließtext erscheint die Nummer als auswählbarer Text, nicht als winziger Link – anrufbar ist sie über die großen CTA-Flächen. */ .telnum { font-weight: 700; color: var(--ink); white-space: nowrap; } .section--dark .telnum, .aside-card--accent .telnum, .cta-banner .telnum { color: #fff; } /* --- 35.5 Micro-Animationen ohne unsichtbaren Text ---------------------- */ /* Die Vorlage blendete Reveal-Elemente mit opacity:0 ein. Inhalt, der noch nicht im Viewport war, blieb damit unsichtbar – schlecht für Vorlesetools und für jede Prüfung, die nicht scrollt. Wir animieren nur die Verschiebung. */ html.anim .reveal { opacity: 1; transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.2,1); } html.anim .reveal.is-in { transform: none; } html.anim .hero-in { opacity: 1; transform: translateY(14px); } html.anim .hero-in.hero-in--show { opacity: 1; transform: none; transition: transform .9s cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce) { html.anim .reveal, html.anim .hero-in { transform: none !important; transition: none !important; } } /* --- 35.6 Topbar auf Mobil aus dem Weg --------------------------------- */ @media (max-width: 760px) { .topbar { display: none; } } /* --- 35.7 Kopfzeile: der Firmenname darf den Burger nicht verdrängen ---- */ /* "Schädling Düsseldorf" ist lang. Ohne min-width:0 schiebt der Flex-Text den Menü-Button aus dem Viewport – das war der auffälligste Mobil-Fehler der Vorlage. Ab 520 px darf der Name umbrechen, der Claim entfällt. */ .header__inner { min-width: 0; } .brand { min-width: 0; flex: 0 1 auto; } .brand__text { min-width: 0; } .nav-toggle { flex: none; } @media (max-width: 720px) { .header__inner { padding: 10px 16px; gap: 12px; } .brand { gap: 10px; } .brand__logo { width: 40px; height: 40px; } .brand__name { font-size: 1.02rem; } .brand__claim { font-size: .68rem; } } @media (max-width: 520px) { .brand__logo { width: 36px; height: 36px; } .brand__name { font-size: .96rem; line-height: 1.12; white-space: normal; overflow-wrap: break-word; } .brand__claim { display: none; } } @media (max-width: 360px) { .header__inner { padding: 10px 12px; gap: 10px; } .brand__name { font-size: .9rem; } } /* --- 35.8 Raster: Spalten reißen nicht durch lange Wörter auf ---------- */ .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 920px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 920px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); } } .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .mediasplit { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .detail { grid-template-columns: minmax(0, 1fr) 340px; } .feature { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pests { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 920px) { .pests { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .pests { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .verzeichnis { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 920px) { .verzeichnis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .verzeichnis { grid-template-columns: minmax(0, 1fr); } } .identify { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 820px) { .identify { grid-template-columns: minmax(0, 1fr); } } .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cityhub { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .cityhub { grid-template-columns: minmax(0, 1fr); } } .cityhub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 480px) { .cityhub__grid { grid-template-columns: minmax(0, 1fr); } } /* --- 35.9 Bild-Hero: wirklich responsiv -------------------------------- */ /* In der Vorlage lief das Hero-Bild auf schmalen Viewports aus dem Raster (1.05fr = min-content) und die Kennzahl-Karte stand halb außerhalb. */ .hero--media .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .hero__media { min-width: 0; } .hero__figure { aspect-ratio: 4 / 3; max-width: 100%; } .hero__figure img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .hero--media .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } .hero__figure { aspect-ratio: 16 / 10; border-radius: 18px; } .hero__stat { left: 14px; bottom: 14px; padding: 11px 15px; } .hero__stat strong { font-size: 1.3rem; } } @media (max-width: 560px) { .hero { padding: 34px 0 40px; } .hero__figure { aspect-ratio: 3 / 2; border-radius: 14px; } /* Auf sehr schmalen Displays sitzt die Kennzahl unter dem Bild statt darauf */ .hero__media { display: flex; flex-direction: column; gap: 12px; } .hero__stat { position: static; align-self: flex-start; box-shadow: var(--shadow); } .hero__ctas .btn { width: 100%; justify-content: center; } .hero__cta-note { max-width: none; } .hero__title { max-width: none; } } .hero--split .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } @media (max-width: 940px) { .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .quickhelp__router { grid-template-columns: minmax(0, 1fr); } } /* --- 35.10 Sticky-Anrufleiste ------------------------------------------ */ /* Zusatzklasse `sticky-call` macht die Leiste für Prüfwerkzeuge erkennbar. */ .actionbar.sticky-call { position: fixed; } /* --- 35.11 Fotos in den Bausteinen ------------------------------------- */ /* `figph` war in der Vorlage ein gestricheltes Platzhalter-Panel. Hier ist es durchgehend ein echter Bildrahmen. */ .figph { margin: 0; padding: 0; min-height: 0; display: block; overflow: hidden; border: none; background: var(--brand-tint); border-radius: var(--radius-lg); position: relative; box-shadow: 0 26px 54px -24px rgba(11,85,102,.4); } .figph::after { display: none; } .figph img { display: block; width: 100%; height: auto; } .figph figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 20px 14px; font-size: .84rem; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(6,52,64,.9), rgba(6,52,64,0)); max-width: none; text-align: left; } .mediasplit__media { min-width: 0; } /* Bild-Kopf in einer Karte (Leistungs- und Stadtteil-Karten) */ .card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .card__media { display: block; margin: 0; background: var(--brand-tint); } .card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .card--photo .card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .card--photo .card__title { margin-top: 0; } .card--photo .card__link { margin-top: auto; } /* Foto-Streifen abgeschlossener Einsätze */ .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--brand-tint); } .gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gallery__item figcaption { padding: 11px 14px; font-size: .86rem; color: var(--ink-soft); background: #fff; } /* Foto-CTA-Band: Bild plus dunkler Petrol-Verlauf */ .cta-banner--photo { background: linear-gradient(115deg, rgba(6,52,64,.94) 0%, rgba(6,52,64,.72) 54%, rgba(6,52,64,.46) 100%), url("../../uploads/schaedling-duesseldorf/schaedlingsnotdienst-duesseldorf-einsatzfahrzeug-1280.webp") center 38%/cover no-repeat; padding: 62px 44px; } .cta-banner--photo h2, .cta-banner--photo p { text-shadow: 0 2px 14px rgba(0,0,0,.45); } @media (max-width: 600px) { .cta-banner--photo { padding: 44px 24px; } } /* --- 35.12 Neue Bausteine für diese Inhalte ---------------------------- */ /* Stadtteil-Steckbrief: Bezirk, Bausubstanz, typische Druckpunkte */ .localfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0 0 1.4em; padding: 0; } @media (max-width: 820px) { .localfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .localfacts { grid-template-columns: minmax(0, 1fr); } } .localfacts > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .localfacts dt { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); margin: 0 0 .45em; } .localfacts dd { margin: 0; color: var(--ink-soft); font-size: .97rem; } /* Gegenüberstellung "selbst versucht" gegen "fachgerecht" */ .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } @media (max-width: 700px) { .compare { grid-template-columns: minmax(0, 1fr); } } .compare__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; background: #fff; box-shadow: var(--shadow); } .compare__col--no { background: #fdf6f2; border-color: #f2c8bd; } .compare__col--yes { background: var(--brand-tint); border-color: var(--line-strong); } .compare__col h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; font-size: 1.14rem; } .compare__col--no h3 .ico { color: var(--accent-deep); } .compare__col--yes h3 .ico { color: var(--brand); } .compare__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .compare__col li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: .97rem; } .compare__col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; } .compare__col--no li::before { background: var(--accent-deep); } .compare__col--yes li::before { background: var(--brand); } /* Saison-/Zeitleiste: wann welcher Schädling auftritt */ .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .timeline li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .timeline li:last-child { border-bottom: none; padding-bottom: 0; } @media (max-width: 560px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; } } .timeline__when { font-family: var(--display); font-weight: 800; color: var(--brand); font-size: .96rem; } .timeline__what strong { display: block; color: var(--ink); } .timeline__what span { color: var(--muted); font-size: .96rem; } /* Abschnittsnavigation am Seitenfuß (weiter im Themen-Cluster) */ .stepnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; } @media (max-width: 620px) { .stepnav { grid-template-columns: minmax(0, 1fr); } } .stepnav a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; background: #fff; box-shadow: var(--shadow); transition: border-color .2s, transform .2s; } .stepnav a:hover { border-color: var(--brand); transform: translateY(-2px); } .stepnav__label { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .3em; } .stepnav__title { display: block; font-family: var(--display); font-weight: 700; color: var(--ink); } /* Kleine Layout-Hilfen für die Seitenkomposition */ .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--tight { padding: 46px 0; } .mt-24 { margin-top: 24px; } .mt-18 { margin-top: 18px; } .mb-0 { margin-bottom: 0; } .center-cta { text-align: center; margin-top: 26px; } /* --- 35.13 Untermenü-Umschalter (Mobil-Akkordeon) ----------------------- */ /* Der Elternpunkt bleibt ein Link auf die Hub-Seite; das Auf- und Zuklappen übernimmt ein eigener Knopf, den js/main.js einfügt. Ohne JavaScript sind alle Untermenüs offen — es geht kein Link verloren. */ .submenu-toggle { display: none; } @media (min-width: 1081px) { .submenu-toggle { display: none !important; } } @media (max-width: 1080px) { .nav__list li.has-toggle { position: relative; } .nav__list li.has-toggle > a { padding-right: 62px; } .submenu-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: 4px; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; } .submenu-toggle span { width: 13px; height: 13px; background: var(--brand); --ico-mask: url("data:image/svg+xml,") center/contain no-repeat; -webkit-mask: var(--ico-mask); mask: var(--ico-mask); transition: transform .22s ease; } .submenu-toggle[aria-expanded="true"] span { transform: rotate(180deg); } html.js-nav .nav__list .sub-menu { display: none; } html.js-nav .nav__list li.is-open > .sub-menu { display: block; } /* Der CSS-Pfeil am Elternpunkt wäre neben dem Knopf doppelt. */ .menu-item-has-children > a::after { content: none; } } /* --- 35.14 Ausgewählte Menüpunkte deutlicher markieren ----------------- */ .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--brand-deep); background: var(--brand-tint); } .nav__list .sub-menu .current-menu-item > a { background: var(--brand-tint-2); } /* --- 35.15 Überschriften-Ebenen der Bausteine --------------------------- */ /* Die Gliederung muss lückenlos sein (H1 -> H2 -> H3). Bausteine, die in der Vorlage ein H3 trugen, stehen hier teils als eigene Sektion und damit als H2. */ .notice h2, .notice h3 { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 0 0 .35em; display: flex; align-items: center; gap: 10px; } .notice--warn h2, .notice--warn h3 { color: var(--accent-deep); } .notice h2 .ico, .notice h3 .ico { flex: none; } .aside-card h2, .aside-card h3 { font-size: 1.15rem; margin: 0 0 .7em; } .aside-card--accent h2, .aside-card--accent h3, .aside-card--accent p { color: #fff; } .aside-card--accent p { opacity: .9; margin-bottom: 1.1em; } .aside-card .btn + .btn { margin-top: 10px; } .pest span { display: block; } .card--photo .card__body .card__text:last-of-type { margin-bottom: 1em; } /* --- 35.16 Hero-Titel: lange deutsche Komposita ------------------------- */ /* Die Vorlage begrenzte den Hero-Titel auf 18ch und startete bei 2,1rem. Mit Wörtern wie "Schädlingsbekämpfung" ergibt das auf 390 px vier Zeilen mit Trennstrich. Kleinere Untergrenze, etwas mehr Zeilenbreite. */ .hero__title { font-size: clamp(1.85rem, 4.4vw, 3.2rem); max-width: 24ch; } .hero--media .hero__title { max-width: 20ch; } @media (max-width: 560px) { .hero__title { font-size: 1.85rem; letter-spacing: -.015em; } } @media (max-width: 360px) { .hero__title { font-size: 1.68rem; } } .section__title { overflow-wrap: break-word; hyphens: auto; } /* --- 35.17 Brotkrumen: eine Zeile, feste Höhe --------------------------- */ /* Die aktuelle Seite ist der längste Eintrag. Bricht sie auf schmalen Geräten in die zweite Zeile, wächst das Band und schiebt die ganze Seite nach unten — gemessen 0,159 CLS. Deshalb bleibt die Leiste einzeilig; abgeschnitten wird höchstens der Titel, der direkt darunter als H1 noch einmal vollständig steht. */ .breadcrumbs { min-height: 48px; } .breadcrumbs__inner { flex-wrap: nowrap; min-width: 0; } .breadcrumbs a { flex: none; } .breadcrumbs__sep { flex: none; } .breadcrumbs__current { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- 35.18 Breitere Bühne, gehaltene Lesebreite -------------------------- */ /* Der Container ist auf 1520 px gewachsen. Fließtext darf nicht mitwachsen: über etwa 75 Zeichen je Zeile verliert das Auge den Zeilenanfang. Raster, Karten und Bilder nutzen die volle Breite, Absätze und Listen nicht. */ .detail-sec > p, .detail-sec > .checklist, .detail-sec > .signs, .detail-sec > .highlights, .section__inner > p, .section__inner > .checklist, .section__inner > .signs, .section__inner > .highlights { max-width: 74ch; } .section__head { max-width: 720px; } .section__inner--narrow { max-width: 880px; } .detail { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; } @media (max-width: 980px) { .detail { grid-template-columns: minmax(0, 1fr); gap: 30px; } } .hero__lead { max-width: 62ch; } .hero--media .hero__title { max-width: 22ch; } /* Auf sehr breiten Schirmen etwas mehr Luft an den Rändern */ @media (min-width: 1600px) { .section__inner, .hero__inner, .footer__grid, .prefooter__inner, .topbar__inner, .header__inner, .breadcrumbs__inner, .footer__bottom-inner, .inpage-nav__inner { padding-left: 40px; padding-right: 40px; } } /* --- 35.19 Schriftschnitte im ersten Bildschirm reduzieren ---------------- */ /* Messung: mit inline eingebettetem kritischem CSS fordert der Browser sofort ALLE Schriftschnitte an, die oberhalb der Falz vorkommen — hier waren das Inter 400, Sora 700 UND Sora 800, zusammen rund 80 KB. Das war nach dem Wegfall der blockierenden Stilvorlage der neue Engpass. Hero-Titel und Markenname laufen deshalb auf Sora 700 statt 800: bei diesen Größen kaum unterscheidbar, spart aber eine komplette Schriftdatei im kritischen Pfad. Sora 800 bleibt für Kennzahlen und Schrittziffern weiter unten erhalten und lädt mit der nachgeladenen Stilvorlage. */ .hero__title { font-weight: 700; } .brand__name { font-weight: 700; } .quickhelp__title { font-weight: 700; } /* --- 35.20 Hero-Kicker: höhenstabil beim Schriftwechsel ------------------- */ /* Gemessen: der Kicker über der H1 nutzt Inter 600/700, die erst mit der nachgeladenen Stilvorlage kommen. Auf schmalen Geräten bricht er in der Ersatzschrift einzeilig und in Inter zweizeilig um (oder umgekehrt) — die Pille wächst dann um 22 px und schiebt H1, Lead, Buttons und die folgende Sektion nach unten (0,018 CLS auf /schaedlingsbekaempfung-gerresheim/). Lösung ist nicht "noch eine Schriftdatei einbetten", sondern Platz reservieren: bei zwei möglichen Zeilen steht die Höhe fest, egal welche Schrift gerade greift. */ .hero__kicker { line-height: 1.25; align-items: center; } @media (max-width: 640px) { .hero__kicker { min-height: 51px; } /* Raum für zwei Zeilen, immer belegt */ } /* --- 35.21 Vertrauensband darf umbrechen --------------------------------- */ /* Die Vorlage erzwang ab 1220 px eine einzige Reihe ("Inhalt passt hier sicher") — das galt für den 1320-px-Container und vier kürzere Einträge. Mit 1520 px Container und fünf Einträgen lief das Band 307 px aus dem Fenster. Umbruch erlaubt, Zentrierung bleibt. */ @media (min-width: 1220px) { .trustband { flex-wrap: wrap; } } /* --- 35.22 Symbole ohne Maske sind unsichtbar, nicht klotzig ------------- */ /* Die Symbole entstehen aus einer eingefärbten Fläche plus Maske. Die 32 Maskenregeln stecken in der nachgeladenen Stilvorlage — ohne sie zeigte die Basisregel eine volle Farbfläche, also einen Klotz an jeder Symbolstelle. Mit einer leeren Standardmaske ist ein Symbol, dessen Maske noch fehlt, für den Moment einfach unsichtbar. Sobald die Stilvorlage da ist, setzt --ico-mask die echte Maske und der Vorgabewert greift nicht mehr. */ .ico { --ico-empty: url("data:image/svg+xml,"); -webkit-mask-image: var(--ico-mask, var(--ico-empty)); mask-image: var(--ico-mask, var(--ico-empty)); } /* --- 35.23 KORREKTUR: Umbruchpunkte wieder herstellen -------------------- */ /* In Abschnitt 35.8 wurden .split, .mediasplit, .feature und .routes auf minmax(0, …) umgestellt — aber OHNE ihre Umbruch-Abfragen zu wiederholen. Da diese Regeln weiter unten in der Datei stehen als die Abfragen der Vorlage und dieselbe Spezifität haben, gewannen sie: die vier Raster blieben auf Mobil zweispaltig. Sichtbar war das als Textspalte von rund 180 px mit Trennstrichen mitten in den Wörtern ("Stadt-teil", "Be-trieb"). Hier stehen die Umbruchpunkte der Vorlage wieder — jetzt an der richtigen Stelle, nämlich nach den Neudeklarationen. */ @media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); gap: 30px; } .feature { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 820px) { .mediasplit { grid-template-columns: minmax(0, 1fr); gap: 26px; } .mediasplit--rev .mediasplit__body { order: 0; } } @media (max-width: 720px) { .routes { grid-template-columns: minmax(0, 1fr); } } /* --- 35.24 KORREKTUR: helle Bausteine in dunklen Sektionen --------------- */ /* `.section--dark` setzt Textfarben für dunklen Grund: Überschriften weiß, Fließtext hellblau. Bausteine, die ihre EIGENE helle Fläche mitbringen — Hinweisband, Vergleichsspalten, Karten, Steckbriefe — erben diese hellen Farben und stehen dann hell auf hell. Gemessen auf allen 35 Seiten: 12 Textstellen zwischen 1,07 : 1 und 1,21 : 1. axe hatte das nicht als Verstoß gemeldet, sondern als „unklar" eingeordnet, weil die dunkle Sektion ein maskiertes Deko-Element überlagert — deshalb diese eigene Messung. Regel: Wer eine eigene helle Fläche mitbringt, bringt auch seine eigenen Textfarben mit. */ .section--dark .notice, .section--dark .compare__col, .section--dark .card, .section--dark .id-card, .section--dark .pest, .section--dark .route, .section--dark .step, .section--dark .faq__item, .section--dark .highlights li, .section--dark .localfacts > div, .section--dark .stepnav a, .section--dark .cityhub__region, .section--dark .verzeichnis a, .section--dark .trustband, .section--dark .badge, .section--dark .quickhelp, .section--dark .gallery__item figcaption { color: var(--ink-soft); } .section--dark .notice h2, .section--dark .notice h3, .section--dark .compare__col h3, .section--dark .card__title, .section--dark .id-card h3, .section--dark .route h3, .section--dark .step__title, .section--dark .faq__item summary, .section--dark .cityhub__h, .section--dark .stepnav__title, .section--dark .highlights strong, .section--dark .localfacts dd { color: var(--ink); } .section--dark .notice--warn h2, .section--dark .notice--warn h3 { color: var(--accent-deep); } .section--dark .notice p, .section--dark .compare__col li, .section--dark .card__text, .section--dark .id-card li, .section--dark .route p, .section--dark .step p, .section--dark .faq__body p, .section--dark .localfacts dd, .section--dark .trustband__item { color: var(--ink-soft); } .section--dark .notice strong, .section--dark .compare__col strong, .section--dark .card strong { color: var(--ink); } /* Kicker und Etiketten auf eigener heller Fläche wieder in Markenfarbe */ .section--dark .localfacts dt, .section--dark .cityhub__count, .section--dark .stepnav__label { color: var(--brand); } .section--dark .stepnav__label { color: var(--muted); } /* Links in einem hellen Baustein innerhalb der dunklen Sektion */ .section--dark .notice a, .section--dark .compare__col a, .section--dark .card a { color: var(--brand-deep); } /* --- 35.25 KORREKTUR: Hinweistext neben dem CTA im dunklen Hero ---------- */ /* `.hero__cta-note` nutzt --muted (für weißen Grund gedacht). Im dunklen Hero der Notdienst-Seite ergab das 2,88 : 1. */ .hero--dark .hero__cta-note { color: #b6d2da; } .hero--dark .hero__lead strong { color: #fff; } /* --- 35.26 Innenabstände auf sehr schmalen Geräten ----------------------- */ /* Bei 320 px blieben im CTA-Band nur 192 px für den Text: 24 px Sektionsrand plus 40 px Bandinnenabstand je Seite. Das ergab Zeilen aus zwei Wörtern. Die Vorlage hatte diesen Abstand nur für die Foto-Variante gestaffelt. */ @media (max-width: 600px) { .cta-banner { padding: 36px 22px; } .compare__col { padding: 22px 20px; } .card { padding: 22px 20px; } .quickhelp { padding: 22px 20px; } .aside-card { padding: 20px 18px; } .trustband { padding: 18px 18px; } } @media (max-width: 380px) { .section__inner, .hero__inner { padding-left: 18px; padding-right: 18px; } .cta-banner { padding: 30px 16px; } .card, .compare__col, .quickhelp { padding: 18px 16px; } .step { padding: 20px 16px; } .notice { padding: 18px 16px; } } /* --- 35.27 Datenblock vor Rechtstext ------------------------------------- */ /* Impressum und Datenschutz beginnen jetzt mit einer Angabenliste (.infolist) und setzen den Rechtstext (.legal) direkt darunter fort. Beide Bausteine bringen bewusst keinen eigenen Außenabstand mit — im Fließtext einer Sektion sorgt sonst der Nachbar dafür (.notice, .cards …). Hier standen sie deshalb ohne Luft aneinander: die Steuernummer klebte an der Überschrift „Kontakt". Der Abstand gehört an die Fuge, nicht in einen der beiden Bausteine. */ .infolist + .legal { margin-top: clamp(2rem, 4.5vw, 3rem); }