/*
Theme Name: Schädling Bernhardt Hannover
Theme URI: https://hannover-schaedling-bernhardt.de
Description: Bespoke Theme für Schädling Bernhardt (Schädlingsbekämpfung Hannover). Konstruktion, Komponenten und Interaktionen sind vom Wespennest-Theme übernommen; die Farbtokens sind auf die Petrol-Blau/Signal-Palette dieser Site umgestellt. Self-hosted Fonts (Inter + Sora), JSON-LD, keine externen Requests.
Author: Beratung & Service Thomas
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: schaedling-hannover
*/
/* ==========================================================================
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
========================================================================== */
:root {
/* --- Primär: Petrol-Blau (Hygiene, Klarheit, Vertrauen) ---------------- */
--blue: #0e4f70;
--blue-deep: #0a3d58;
--blue-700: #073045;
--blue-tint: #eef4f8; /* helle Flächen */
--blue-tint-2: #dde9f1;
/* --- Text / dunkle Flächen -------------------------------------------- */
--ink: #0c2230;
--ink-soft: #26424f;
--muted: #526a7a; /* Sekundärtext – 4.59:1 auf --blue-tint-2 */
/* --- Akzent: dreigeteilt, weil EIN Akzentton nicht alle Paare schafft --- */
--accent: #c2410c; /* FLÄCHE: weißer Text darauf = 5.18:1 */
--accent-deep: #9a3412; /* Hover-Fläche = 7.31:1 */
--accent-ink: #b03a09; /* Akzent als TEXT auf hell = 6.08:1 */
--accent-lt: #fdba74; /* Akzent als TEXT auf --ink = 9.67:1 */
/* --- Flächen / Linien -------------------------------------------------- */
--paper: #ffffff;
--line: #dbe5ec;
--line-strong: #bfd0dc;
--bg-soft: #f4f7f9;
--warn-bg: #fff5ec;
--warn-line: #f7cfae;
/* --- Text auf dunklem Grund (alle ≥ 7:1 auf --ink) --------------------- */
--on-dark: #c9dbe6;
--on-dark-soft: #a8c2d2;
--on-dark-mute: #93b1c4;
--ok: #1a7f5a;
--err: #b3352b;
--radius: 14px;
--radius-sm: 9px;
--radius-lg: 22px;
--container: 1320px;
--shadow: 0 1px 2px rgba(12,34,48,.05), 0 8px 24px rgba(12,34,48,.07);
--shadow-lg: 0 18px 50px rgba(12,34,48,.14);
--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; }
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);
font-size: 17px;
line-height: 1.65;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
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; }
p { margin: 0 0 1em; }
a { color: var(--blue-deep); text-decoration: none; }
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 { -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: var(--on-dark); 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); 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(12,34,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(--blue-tint); color: var(--blue-deep); text-decoration: none; }
.nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--blue-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: 1180px) { .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: 1180px) {
.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(--blue-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(7,48,69,.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(--blue-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(--blue-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(194,65,12,.32); }
.btn--accent:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 22px rgba(194,65,12,.36); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-tint); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(14,79,112,.28); }
.btn--primary:hover { background: var(--blue-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(--blue-tint); }
.section--tint2 { background: var(--blue-tint-2); }
.section--dark { background: var(--ink); color: var(--on-dark); 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(--blue); margin: 0 0 .55em; }
.section--dark .section__kicker { color: var(--accent); }
.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: var(--on-dark-soft); }
/* ==========================================================================
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(--blue-tint-2), transparent 60%),
radial-gradient(560px 360px at 5% 108%, var(--blue-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(--blue-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(--blue); background: var(--blue-tint); width: 1.7em; height: 1.7em; padding: .34em; border-radius: 50%; }
/* Dunkle Hero-Variante */
.hero--dark { background: var(--ink); color: var(--on-dark); }
.hero--dark .hero__title { color: #fff; }
.hero--dark .hero__lead { color: var(--on-dark-soft); }
.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(14,79,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(--blue-tint); color: var(--blue); 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(--blue-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(--blue); box-shadow: var(--shadow-lg); text-decoration: none; }
.pest .ico { width: 30px; height: 30px; color: var(--blue); }
/* ==========================================================================
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(--blue); 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(--blue-tint); color: var(--blue); -webkit-mask: none; }
.checklist li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; background: var(--blue); -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: var(--on-dark-soft); }
.section--dark .checklist li::before { background: rgba(255,255,255,.12); }
.section--dark .checklist li::after { background: var(--accent); }
/* ==========================================================================
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(--blue); }
.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(--blue); line-height: 1; }
.section--dark .stat__num { color: var(--accent); }
.stat__label { color: var(--muted); font-size: .95rem; font-weight: 600; margin-top: .4em; }
.section--dark .stat__label { color: var(--on-dark-soft); }
/* ==========================================================================
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(--blue-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(--blue); 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(--blue-tint); border-color: var(--line-strong); }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.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(--blue); -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(--blue-deep), var(--blue)); 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: var(--on-dark); 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; }
/* ==========================================================================
21 · Einsatzgebiete-Verzeichnis + Live-Suche
========================================================================== */
.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(--blue); color: var(--blue-deep); text-decoration: none; }
.verzeichnis a::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--blue); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; }
/* ==========================================================================
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(12,34,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); }
.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(--blue); 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: var(--on-dark-soft); 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 h4 { color: #fff; font-size: 1rem; margin: 0 0 1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--on-dark-soft); 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: var(--on-dark-mute); 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); }
.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: var(--on-dark-mute); }
.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); }
.placeholder { outline: 2px dashed var(--line-strong); outline-offset: 3px; border-radius: 6px; 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(194,65,12,.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(--blue); 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); }
/* Platzhalter-Medienbox (Foto / Karte) */
.ph-box { background: var(--blue-tint); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); min-height: 240px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; text-align: center; padding: 24px; }
.ph-box .ico { width: 2em; height: 2em; color: var(--line-strong); }
/* Team-Karten mit Avatar-Platzhalter */
.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(--blue-tint); border: 1px solid var(--line); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.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(--blue); color: var(--blue-deep); text-decoration: none; }
.tags .ico { color: var(--blue); }
/* 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(194,65,12,.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(--blue); 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(--blue); color: var(--blue-deep); background: var(--blue-tint); text-decoration: none; }
.quickhelp__router .ico { width: 1.55em; height: 1.55em; color: var(--blue); }
/* --- 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(--blue-tint); color: var(--blue); 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(--blue-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, var(--warn-bg), #fff 70%); border-color: var(--warn-line); }
.route--urgent .route__icon { background: rgba(194,65,12,.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; -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; pointer-events: none; }
.feature__hero > * { position: relative; }
.feature__badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: rgba(194,65,12,.2); color: var(--accent-lt); 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); margin-bottom: 14px; }
.feature__hero h3 { color: #fff; font-size: 1.7rem; margin: 0 0 .3em; }
.feature__hero p { color: var(--on-dark-soft); 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: 1181px) {
.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(--blue); flex: none; }
}
.nav__list .sub-menu .ico { color: var(--blue); }
/* --- 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(--blue-deep); border-bottom-color: var(--blue); }
@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(--blue); 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(--blue-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 · Wespen-Nische: „Wespe oder Hornisse?", 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(--blue-tint); color: var(--blue); 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(194,65,12,.16); color: var(--accent-deep); }
.id-card__tag--protected { background: var(--blue-tint); color: var(--blue-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(--blue); }
.id-card__note { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 13px; margin: 0; }
/* Dekoratives schwebendes Wespen-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(194,65,12,.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(194,65,12,.34); } 50% { box-shadow: 0 6px 18px rgba(194,65,12,.34), 0 0 0 10px rgba(194,65,12,.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: #3a1403; 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: #3a1403; flex: none; }
.season__inner strong { color: #3a1403; }
.season__inner span { font-weight: 600; }
.season__inner a { color: #3a1403; font-weight: 800; text-decoration: underline; }
/* Bewertungs-/NAP-/Karten-Platzhalter (Hinweis bis echte Daten da sind) */
.ph-block { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--blue-tint); padding: 22px 24px; color: var(--muted); font-size: .96rem; }
.ph-block strong { color: var(--ink); }
/* 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(--blue); flex: none; }
.cityhub__count { flex: none; font-size: .74rem; font-weight: 700; color: var(--blue-deep); background: var(--blue-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); 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(--blue-tint); color: var(--blue-deep); border-color: var(--blue); transform: translateY(-1px); }
.cityhub__link--main { background: var(--blue); color: #fff; }
.cityhub__link--main:hover { background: var(--blue-deep); color: #fff; border-color: var(--blue-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(--blue); 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(--blue-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(--blue); opacity: .05; }
.figph .ico { width: 58px; height: 58px; color: var(--blue); 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 die Bild-Platzhalter (figph) */
.ico--roof { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico--window { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico--alert { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico--calendar { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico--search { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico--bee { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
.ico--tool { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); }
/* 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(--blue-tint); box-shadow: 0 30px 60px -24px rgba(14,79,112,.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(--blue); }
.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(--blue); }
.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 · Figph als echtes Foto (statt Platzhalter-Panel) */
.figph--photo { padding: 0; min-height: 0; border: none; background: none; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 0 26px 54px -24px rgba(14,79,112,.4); }
.figph--photo::after { display: none; }
.figph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 33 · Foto-CTA-Band (Startseite) — Bild mit dunklem Teal-Verlauf */
.cta-banner--photo { background: linear-gradient(115deg, rgba(7,48,69,.94) 0%, rgba(7,48,69,.72) 50%, rgba(7,48,69,.44) 100%), var(--cta-photo, none) center 38%/cover no-repeat; padding: 62px 44px; }
.cta-banner--photo h2 { text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.cta-banner--photo p { color: #eaf5f0; }
@media (max-width: 600px) { .cta-banner--photo { background: linear-gradient(115deg, rgba(7,48,69,.94) 0%, rgba(7,48,69,.72) 50%, rgba(7,48,69,.44) 100%), var(--cta-photo, none) center 38%/cover no-repeat; padding: 62px 44px; } }
/* 34 · Makro-Foto im Bestimmungs-Card (Wespe/Hornisse/Biene) */
.id-card { overflow: hidden; }
.id-card__media { margin: -26px -26px 18px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-tint); }
.id-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ==========================================================================
35 · Klon-Deltas — Barrierefreiheit, Responsiveness, Iron Rules
Diese Sektion ist der vollständige, bewusste Unterschied zum Template.
========================================================================== */
/* --- A10: Basisschriftgröße 18px (Template: 17px = FAIL) ------------------ */
body { font-size: 18px; }
/* --- Lange deutsche Komposita dürfen Grid-Spuren nicht sprengen ----------
Eine 1fr-Spur ist min-content breit; "Schädlingsbekämpfung" überläuft
dadurch auf schmalen Viewports.
WICHTIG: Das wird über `min-width: 0` auf den Grid-KINDERN gelöst, NICHT
über ein Neudeklarieren von `grid-template-columns`. Dieser Block steht am
Ende der Datei — eine Regel wie `.grid--3 { repeat(3, minmax(0,1fr)) }`
hätte dieselbe Spezifität wie die Media-Queries des Templates weiter oben,
käme aber später und würde damit den mobilen Umbruch auf eine Spalte
komplett aushebeln (drei Spalten auf 390px = eine Silbe pro Zeile). */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
p, li, dd, dt, figcaption, .lead-line, .card__text, .step p { overflow-wrap: break-word; }
.card, .step, .pest, .route, .id-card, .highlights li, .verzeichnis a { min-width: 0; }
/* Ein Flex-Kind schrumpft per Default nicht unter seine min-content-Breite.
Bei den Icon-Listen ist das Textkind genau so ein Flex-Kind — ohne
min-width:0 drückt ein langes Kompositum die ganze Seite auf. */
.highlights li > div, .quickhelp__facts li > span, .trustband__item > span,
.infolist li > div, .aside-facts li > div, .hero__badges li > span { min-width: 0; }
/* --- Fließtext-Links sichtbar unterstreichen -----------------------------
Ein Link mitten im Text darf sich nicht allein durch die Farbe vom Text
unterscheiden. Ausgenommen sind Elemente, die bereits als Kachel, Chip oder
Schaltfläche erkennbar sind — dort wäre die Unterstreichung falsch. */
main p a, main li a, main figcaption a, main .faq__body a, main .section__lead a, main .lead-line a {
text-decoration: underline; text-underline-offset: .18em;
}
main .tags a, main .verzeichnis a, main .pest, main .btn, main .card__link,
main .quickhelp__router a, main .quickhelp__call, main .card--link, main .route { text-decoration: none; }
main p a:hover, main li a:hover { text-decoration-thickness: 2px; }
/* --- Reveal-Animation NUR über transform ---------------------------------
Ein opacity:0-Zustand lässt den Kontrast-Prüfer (headless, scrollt nie)
Elemente unterhalb der Falz als unsichtbar/fehlerhaft werten. Text bleibt
deshalb immer voll deckend; die Bewegung trägt die Animation. */
html.anim .reveal { opacity: 1; transform: translateY(20px); 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 { 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; } }
/* --- A11: Tap-Targets ≥ 44×44 -------------------------------------------
Der Burger des Templates ist 46x42 — zwei Pixel zu flach. */
.btn { min-height: 46px; }
.nav-toggle { height: 46px; }
.nav__list a, .site-footer a, .footer__legal a { display: inline-block; }
/* Brotkrumen: optisch unverändert, aber mit ausreichend großer Trefferfläche. */
.breadcrumbs__inner { padding-top: 0; padding-bottom: 0; }
.breadcrumbs a, .breadcrumbs__current { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 9px; }
/* The first crumb has no left padding, which left "Start" 3px under the 44px
target — min-width carries it rather than adding a visible indent. */
.breadcrumbs a:first-child { padding-left: 0; }
.breadcrumbs__sep { display: inline-flex; align-items: center; min-height: 44px; }
.nav__list > li > a { min-height: 44px; display: flex; align-items: center; }
.site-footer ul a, .footer__legal a { padding: 7px 0; min-height: 44px; display: flex; align-items: center; }
.footer__contact li { min-height: 44px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 14px 22px; font-weight: 700; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; text-decoration: none; }
/* --- Telefonnummer im Fließtext: TEXT, kein Link ------------------------
Jeder tel:-Link wird auf 44×44 gemessen. Inline-Nummern sind daher eine
auszeichnende Span; klickbar sind nur die großen CTA-Schaltflächen. */
.telnum { font-weight: 700; color: var(--ink); white-space: nowrap; }
.section--dark .telnum, .cta-banner .telnum { color: #fff; }
/* --- Footer-Buttons: .site-footer a{color} darf .btn nicht überschreiben -- */
.site-footer .btn--accent, .site-footer .btn--accent:hover,
.prefooter .btn--accent, .prefooter .btn--accent:hover,
.actionbar .btn, .actionbar .btn:hover { color: #fff; }
.prefooter .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.prefooter .btn--ghost:hover { color: var(--blue-deep); }
/* --- A2: Footer-Spaltenüberschriften sind h3 (kein h2→h4-Sprung) --------- */
.site-footer h3 { color: #fff; font-size: 1rem; margin: 0 0 1em; font-family: var(--display); font-weight: 700; }
/* --- Der Button darf die Layoutbreite nicht bestimmen --------------------
white-space:nowrap + langes Label ("Jetzt anrufen: 0176 4287 6094") ergibt
~335px min-content; im Container erzwingt das einen 376px-Layout-Viewport,
und 320–375px-Geräte werden herunterskaliert statt fluide gerendert. */
@media (max-width: 460px) {
.btn { white-space: normal; padding-left: 14px; padding-right: 14px; text-align: center; }
.btn--lg { padding: 14px 16px; font-size: 1rem; }
.hero__ctas .btn, .cta-banner__actions .btn, .prefooter__actions .btn { width: 100%; justify-content: center; }
}
/* --- Mobile Dichte -------------------------------------------------------
Das Template kennt keine mobile Abstufung: .section behält 72px oben UND
unten, das CTA-Band 40px seitlich. Auf 390px sind das 144px Leerraum
zwischen zwei Abschnitten und nur 262px nutzbare Breite im CTA-Band. Die
Proportionen des Templates bleiben, sie werden nur mitskaliert. */
@media (max-width: 760px) {
.section { padding: 52px 0; }
.cta-banner { padding: 36px 24px; }
.section__inner, .section__inner--narrow, .hero__inner { padding-left: 20px; padding-right: 20px; }
.card, .step, .route { padding: 22px 20px; }
.notice { padding: 20px 22px; }
.section__head { margin-bottom: 1.8em; }
}
@media (max-width: 480px) {
.section { padding: 42px 0; }
.cta-banner { padding: 30px 18px; border-radius: var(--radius); }
.section__inner, .section__inner--narrow, .hero__inner { padding-left: 16px; padding-right: 16px; }
.card, .step, .route { padding: 20px 18px; }
.prefooter__inner { padding: 36px 16px; }
.footer__grid { padding-left: 16px; padding-right: 16px; }
.footer__bottom-inner { padding-left: 16px; padding-right: 16px; }
.topbar__inner { padding-left: 16px; padding-right: 16px; }
}
/* --- Marke vs. Burger: der Name darf den Button nie verdrängen ----------- */
.header__inner { gap: 14px; }
.brand { min-width: 0; }
.brand__text { min-width: 0; }
.brand__name, .brand__claim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) {
.header__inner { padding: 10px 16px; gap: 10px; }
.nav-toggle { margin-left: auto; flex: none; }
.brand__logo { width: 38px; height: 38px; }
.brand__name { font-size: 1rem; }
.brand__claim { font-size: .68rem; }
}
@media (max-width: 560px) {
.brand__name { font-size: .95rem; }
.brand__claim { display: none; }
.brand { gap: 9px; }
}
@media (max-width: 380px) {
.brand__logo { width: 34px; height: 34px; }
.brand__name { font-size: .88rem; }
}
/* --- Header-CTA bleibt im Burger-Modus sichtbar: das Telefon ist der
einzige Conversion-Weg, es darf nicht hinter dem Menü verschwinden. --- */
@media (max-width: 1180px) {
.site-header .header__cta { display: inline-flex; padding: 10px 13px; font-size: .92rem; margin-left: auto; }
.site-header .header__cta .header__cta-num { display: none; }
.nav-toggle { margin-left: 0; }
}
@media (min-width: 1181px) { .header__cta-short { display: none; } }
@media (max-width: 1180px) { .header__cta-short { display: inline; } }
@media (max-width: 400px) {
.site-header .header__cta { padding: 10px; }
.site-header .header__cta .header__cta-short { display: none; }
}
/* Wenn nur noch das Icon sichtbar ist, muss die Trefferfläche trotzdem
mindestens 44x44 betragen — sonst ist der einzige Conversion-Weg zu klein. */
.site-header .header__cta { min-width: 48px; justify-content: center; }
/* --- Hero-Bild: wirklich responsiv --------------------------------------
Das Template fixiert 4/3 und lässt die Figur auf schmalen Viewports
überstehen. Hier: fluides Seitenverhältnis, nie breiter als der Viewport,
und die Stat-Karte rutscht auf Mobil in den Bildfluss statt daneben. */
.hero--media .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero__media { min-width: 0; max-width: 100%; }
.hero__figure { aspect-ratio: 16 / 11; max-width: 100%; margin-inline: 0; }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.hero--media .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero__figure { aspect-ratio: 16 / 10; }
/* position:relative + z-index, NOT static: the card is pulled up under the
figure by its negative margin, and a static card is painted BEHIND the
image — which hid the "ab 69 €" line completely. */
.hero__stat { position: relative; z-index: 2; margin: -34px 14px 0; align-self: flex-start; display: inline-flex; }
.hero__media { display: flex; flex-direction: column; }
}
@media (max-width: 560px) {
.hero { padding: 34px 0 40px; }
.hero__figure { aspect-ratio: 4 / 3; border-radius: 16px; }
.hero__figure-tag { left: 10px; bottom: 10px; font-size: .7rem; }
.hero__stat { margin: -26px 10px 0; padding: 11px 15px; }
.hero__stat strong { font-size: 1.3rem; }
}
/* --- Bildunterschrift nach OBEN ------------------------------------------
Template-Kollision: .hero__figure-tag und .hero__stat sitzen beide unten
links am Bild. Sobald eine Seite beides nutzt, verdeckt die Bildunterschrift
die Preis-Karte vollständig — auf Mobil war "ab 69 €" gar nicht mehr lesbar.
Die Unterschrift gehört deshalb an die Oberkante des Bildes. */
.hero__figure-tag { top: 12px; bottom: auto; left: 12px; max-width: calc(100% - 24px); }
/* --- Bild-Bausteine (das Template hatte nur Platzhalter-Panels) ---------- */
.figph--photo img, .mediasplit img { border-radius: var(--radius-lg); }
.photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--blue-tint); box-shadow: 0 22px 46px -26px rgba(12,34,48,.5); }
.photo img { display: block; width: 100%; height: auto; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--wide img { height: 100%; object-fit: cover; }
.photo figcaption { padding: 12px 16px; font-size: .84rem; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.bandphoto { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; }
.bandphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandphoto__cap { position: relative; margin: 0; padding: 18px 22px; width: 100%; background: linear-gradient(to top, rgba(7,48,69,.92), rgba(7,48,69,0)); color: #fff; font-size: .9rem; font-weight: 600; }
/* --- Ort-Chip: eine sichtbare, seiten-eigene Zeile pro Bild -------------- */
.geochip { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--blue-deep); background: var(--blue-tint); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; }
.geochip .ico { width: 1em; height: 1em; color: var(--accent-ink); }
/* --- Sticky-Callbar: gehört semantisch in den Footer-Landmark ------------
(der QA-Klon-Test entfernt header/nav/footer, geteilte Chrome-Sätze
kosten dort also keine Shingle-Ähnlichkeit) */
.actionbar { background: rgba(7,48,69,.97); }
.actionbar__call { background: var(--accent); color: #fff; }
.actionbar__call:hover { background: var(--accent-deep); }
/* --- Verzeichnis / Abdeckungsliste ohne Sucheingabe (Formularverbot) -----
Der Link ist ein Flex-Container mit Icon, Label und optionalem Zusatz. Ohne
Umbruch ist seine Mindestbreite die SUMME beider Textteile — auf 320px hat
das den Layout-Viewport auf 439px aufgeblasen und das Gerät herunterskaliert.
Der Zusatz bekommt daher eine eigene Zeile. */
.verzeichnis a { min-height: 46px; flex-wrap: wrap; }
.verzeichnis a > * { min-width: 0; }
.verzeichnis a .muted { flex-basis: 100%; font-size: .86rem; line-height: 1.35; }
/* --- Fokus: sichtbar auf hellem UND dunklem Grund ------------------------ */
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.section--dark :focus-visible, .site-footer :focus-visible, .actionbar :focus-visible, .cta-banner :focus-visible { outline-color: var(--accent-lt); }
/* --- Mobiles Untermenü als Akkordeon --------------------------------------
13 Leistungen + 12 Stadtteile flach untereinander sind im Drawer eine sehr
lange Scrollstrecke. Der Elternlink bleibt anklickbar; das Auf- und Zuklappen
übernimmt ein eigener Button (type="button" — dieses Projekt kennt keine
Formular-Steuerelemente). */
.nav__sub-toggle { display: none; }
@media (max-width: 1180px) {
.nav__list > li.menu-item-has-children { position: relative; }
.nav__list > li.menu-item-has-children > a { padding-right: 56px; }
.nav__sub-toggle {
display: inline-flex; align-items: center; justify-content: center;
position: absolute; top: 0; right: 0; width: 48px; height: 48px;
background: none; border: none; border-radius: 10px; cursor: pointer;
color: var(--blue-deep); padding: 0;
}
.nav__sub-toggle .ico { width: 1.1em; height: 1.1em; transform: rotate(90deg); transition: transform .2s ease; }
.nav__list > li.is-open > .nav__sub-toggle .ico { transform: rotate(-90deg); }
.nav__list > li.menu-item-has-children > .sub-menu { display: none; }
.nav__list > li.menu-item-has-children.is-open > .sub-menu { display: block; }
.menu-item-has-children > a::after { content: none; }
}
/* --- Trust-Band: darf immer umbrechen ------------------------------------
Das Template erzwingt ab 1220px eine einzige Reihe. Die Nachweise dieser
Branche ("Geprüfter Schädlingsbekämpfer (IHK)") sind länger als die des
Templates und liefen bei 1280px und 1440px aus dem Viewport heraus. */
.trustband { flex-wrap: wrap !important; }
.trustband__item { white-space: normal; align-items: flex-start; }
/* Bei zweizeiligem Text zentriert sich das Icon zwischen den Zeilen und wirkt
losgelöst — es gehört auf die Höhe der ersten Zeile. */
.trustband__item .ico { margin-top: .12em; }
/* Umgebrochen ist das Band eine LISTE, keine Reihe: zentrierte Ausrichtung
zentriert dann jede Zeile für sich und erzeugt einen ausgefransten linken
Rand. Untereinander wird deshalb linksbündig gesetzt. */
@media (max-width: 860px) {
.trustband { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 20px 22px; }
.trustband__item { width: 100%; }
.trustband__divider { display: none; }
}
.trustband-band { padding: 30px 0 0; }
@media (max-width: 560px) { .trustband-band { padding: 8px 0 0; } }
/* --- Hero-Badges: der Chip braucht einen EIGENEN Träger -------------------
.ico malt sein Glyph mit `background: currentColor` + Maske. Ein
`background` auf dem .ico selbst färbt also das GLYPH blass statt einen
Kreis zu erzeugen — der Kreis gehört auf ein Wrapper-Element. */
.hero__badges .ico { background: currentColor; width: 1.15em; height: 1.15em; padding: 0; border-radius: 0; color: inherit; }
.hero__badge-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); flex: none; }
.hero--dark .hero__badge-ico { background: rgba(255,255,255,.12); color: var(--accent-lt); }
.hero--dark .hero__badges li { color: var(--on-dark); }
/* --- Preis-Strip: die Zahl als gestaltetes Element, nicht als Fließtext ---- */
.pricestrip { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); margin: 0 0 1.4em; }
.pricestrip__figure { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--accent-ink); line-height: 1; white-space: nowrap; }
.pricestrip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pricestrip__body strong { color: var(--ink); }
.pricestrip__body span { color: var(--muted); font-size: .92rem; }
.section--dark .pricestrip, .hero--dark .pricestrip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.section--dark .pricestrip__figure, .hero--dark .pricestrip__figure { color: var(--accent-lt); }
.section--dark .pricestrip__body strong, .hero--dark .pricestrip__body strong { color: #fff; }
.section--dark .pricestrip__body span, .hero--dark .pricestrip__body span { color: var(--on-dark-soft); }
@media (max-width: 520px) { .pricestrip { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* --- CTA-Band: die Beratungszeile als ruhige Fußnote ----------------------- */
.cta-banner__note { font-size: .92rem; color: var(--on-dark); margin: 1.1em auto 0; max-width: 52ch; }
.cta-banner__actions { justify-content: center; }
/* --- Hero-Grid-Kinder ----------------------------------------------------- */
.hero__body, .hero__aside { min-width: 0; }
.hero--split .hero__inner > .hero__body { grid-column: 1; }
/* --- Telefonnummer als Link im Fließtext (nur wo sie CTA-Größe hat) -------- */
a.telnum-link { font-weight: 700; white-space: nowrap; text-decoration: underline; }
/* --- Saison-Band: Inhalt kommt aus dem Text, nicht aus einer Marke --------- */
.season__inner span { font-weight: 600; text-align: left; }
.season__inner a { color: #3a1403; }
/* --- Druck ---------------------------------------------------------------- */
@media print {
.site-header, .actionbar, .to-top, .nav-backdrop, .inpage-nav, .prefooter { display: none !important; }
body { font-size: 12pt; }
}