/* Theme Name: Bernhardt Bremen Theme URI: https://bernhardt-bremen.de Description: Bespoke-Theme für bernhardt-bremen.de (Schädlingsbekämpfung Bremen). Designsystem, Komponenten und Interaktionen aus dem Vorlagen-Projekt übernommen; Farbrollen auf die Bremer Palette umgestellt und auf WCAG 2.1 AA nachgerechnet. Telefon ist der einzige Bestellkanal — kein Formular. Author: Beratung & Service Thomas Version: 1.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: schaedling-bremen */ /* ========================================================================== 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 { --green: #2E6B3A; /* Primär – botanisches Grün (Hygiene/Artenschutz) */ --green-deep: #245730; --green-700: #1B4225; --green-tint: #EFF5EE; /* helle Flächen */ --green-tint-2: #DFEBDD; --ink: #16241A; /* Text + dunkle Sektionen */ --ink-soft: #2E4434; --muted: #586B5B; /* Sekundärtext */ --accent: #C0470A; /* CTA-Fläche — weiße Schrift 5,06:1 */ --accent-deep: #9C3A08; /* CTA-Hover — weiße Schrift 6,95:1 */ --accent-ink: #A83E08; /* Akzent ALS SCHRIFT auf Hell — 6,25:1 */ --accent-light: #F0A468; /* Akzent als Schrift auf --ink — 7,85:1 */ --green-light: #86C094; /* Grün als Schrift auf --ink — 7,67:1 */ --paper: #ffffff; --line: #DCE6DA; --line-strong: #BFD2BC; --ok: #1E7A45; --err: #B23A2E; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --container: 1320px; --shadow: 0 1px 2px rgba(22,36,26,.04), 0 8px 24px rgba(22,36,26,.06); --shadow-lg: 0 18px 50px rgba(22,36,26,.12); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --display: "Sora", var(--sans); } /* ========================================================================== 2 · Reset / Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } 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: 18px; 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; overflow-wrap: break-word; } @media (max-width: 760px) { h1, h2, h3, h4 { hyphens: auto; } } p { margin: 0 0 1em; } a { color: var(--green-deep); text-decoration: none; } /* Fließtext-Links brauchen mehr als Farbe (axe link-in-text-block). Bewusst umgekehrt formuliert — erst alles im Inhalt unterstreichen, dann die Elemente ausnehmen, die als Fläche erkennbar sind. Eine Positivliste hätte sonst jedes neue Textumfeld nachzupflegen (die Karten-Highlights setzen ihren Text z. B. in ein
, nicht in ein

). */ main a { text-decoration: underline; text-underline-offset: .18em; } main .btn, main .card--link, main .card__link, main .pest, main .route, main .route__cta, main .linkcards a, main .tags a, main .quickhelp__router a, main .quickhelp__call, main .verzeichnis a, main .steps a.btn, main .cta-banner a { 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-ink); outline-offset: 2px; border-radius: 4px; } .section--dark :focus-visible, .site-footer :focus-visible, .actionbar :focus-visible, .topbar :focus-visible, .hero--dark :focus-visible { outline-color: var(--accent-light); } /* ========================================================================== 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: #C3D8C7; 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-light); margin-right: 5px; } .topbar__right { display: flex; gap: 22px; align-items: center; } @media (max-width: 760px) { .topbar__more, .topbar__right span:first-child { display: none; } } /* ========================================================================== 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(22,36,26,.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; min-width: 0; flex: 0 1 auto; } .brand:hover { text-decoration: none; } .brand__logo { display: block; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .brand__name { font-family: var(--display); font-weight: 800; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; } .brand__claim { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Der Markenblock darf den Burger nie verdrängen. */ @media (max-width: 560px) { .brand__logo { width: 38px; height: 38px; } .brand__name { font-size: 1rem; } .brand__claim { display: none; } .header__inner { gap: 12px; padding-left: 16px; padding-right: 16px; } } @media (max-width: 380px) { .brand__name { font-size: .94rem; } } .nav { margin-left: auto; } .nav__list { list-style: none; display: flex; gap: 3px; margin: 0; padding: 0; align-items: center; } .nav__list > li { flex: none; } .nav__list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; } .nav__list a:hover { background: var(--green-tint); color: var(--green-deep); text-decoration: none; } .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--green-deep); } .nav__list li { position: relative; } /* Dropdowns */ .nav__list .sub-menu { list-style: none; clip-path: inset(0 0 0 0); 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; } /* Der Telefon-Button ist der einzige Conversion-Weg – er bleibt auch im Burger-Modus sichtbar und schrumpft nur auf das Icon. */ @media (max-width: 1180px) { .site-header .header__cta { padding: 11px 14px; font-size: .92rem; } } @media (max-width: 700px) { .site-header .header__cta .header__cta-num { display: none; } .site-header .header__cta { padding: 12px 13px; min-width: 46px; min-height: 46px; justify-content: center; } } /* Burger */ .nav-toggle { display: none; position: relative; z-index: 80; margin-left: auto; flex: none; width: 46px; height: 46px; 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(--green-tint); border-radius: 0; margin: 2px 0 8px 12px; max-height: none; padding: 2px 0 2px 8px; } .nav__list .sub-menu a { padding: 11px 12px; font-size: .97rem; } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(18,44,24,.5); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .28s ease; } body.nav-open .nav-backdrop { opacity: 1; visibility: visible; } } /* ========================================================================== 6 · Breadcrumbs ========================================================================== */ .breadcrumbs { background: var(--green-tint); border-bottom: 1px solid var(--line); } .breadcrumbs__inner { max-width: var(--container); margin: 0 auto; padding: 11px 24px; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .breadcrumbs a { color: var(--green-deep); font-weight: 600; } .breadcrumbs__sep { color: var(--line-strong); } .breadcrumbs__current { color: var(--ink); font-weight: 600; } /* ========================================================================== 7 · Buttons ========================================================================== */ .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(192,71,10,.32); } .btn--accent:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 22px rgba(192,71,10,.36); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--green); color: var(--green-deep); background: var(--green-tint); } .btn--green { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(46,107,58,.28); } .btn--green:hover { background: var(--green-deep); color: #fff; } .btn--lg { padding: 15px 26px; font-size: 1.06rem; border-radius: 13px; } /* Auf schmalen Geräten darf der Button umbrechen – sonst diktiert seine min-content-Breite den Layout-Viewport (320px-Geräte würden skaliert). */ @media (max-width: 460px) { .btn { white-space: normal; padding-left: 15px; padding-right: 15px; text-align: left; } .btn--lg { padding: 14px 17px; font-size: 1rem; } .hero__ctas .btn, .cta-banner .btn, .prefooter .btn { width: 100%; justify-content: center; text-align: center; } } /* Auf dunklem Grund */ .section--dark .btn--ghost, .hero--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); } .section--dark .btn--ghost:hover, .hero--dark .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } /* ========================================================================== 8 · Sektionen ========================================================================== */ .section { padding: 72px 0; } .section--alt { background: var(--green-tint); } .section--tint2 { background: var(--green-tint-2); } .section--dark { background: var(--ink); color: #D3E3D5; position: relative; overflow: hidden; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark a { color: #fff; } .section--dark::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px; background: currentColor; opacity: .04; -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; pointer-events: none; } .section__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; } .section__inner--narrow { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .section__kicker { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--green); margin: 0 0 .55em; } .section--dark .section__kicker { color: var(--accent-light); } .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: #B7CCBA; } /* ========================================================================== 9 · Hero ========================================================================== */ .hero { position: relative; background: var(--paper); padding: 72px 0 64px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 420px at 88% -8%, var(--green-tint-2), transparent 60%), radial-gradient(560px 360px at 5% 108%, var(--green-tint), transparent 55%); pointer-events: none; } /* Startseite: Hero ohne Farbverlauf (flacher, einfarbiger Hintergrund) */ body.home .hero { background: #fff; } body.home .hero::before { display: none; } .hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .hero__kicker { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line-strong); color: var(--green-deep); font-weight: 700; font-size: .82rem; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px; margin: 0 0 18px; box-shadow: var(--shadow); } .hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; max-width: 18ch; margin: 0 0 .4em; } .hero__lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--ink-soft); max-width: 56ch; margin: 0 0 1.8em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; } .hero__badges li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--ink-soft); } .hero__badges .ico { color: var(--green); background: var(--green-tint); width: 1.7em; height: 1.7em; padding: .34em; border-radius: 50%; } /* Dunkle Hero-Variante */ .hero--dark { background: var(--ink); color: #D3E3D5; } .hero--dark .hero__title { color: #fff; } .hero--dark .hero__lead { color: #B7CCBA; } .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(46,107,58,.5), transparent 60%); } /* ========================================================================== 10 · Grid + Cards ========================================================================== */ .grid { display: grid; gap: 22px; } .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: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .16s, box-shadow .2s, border-color .2s; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--green-tint); color: var(--green); margin-bottom: 16px; } .card__icon .ico { width: 1.5em; height: 1.5em; } .card__title { font-size: 1.2rem; margin: 0 0 .4em; } .card__text { color: var(--muted); margin: 0 0 1em; font-size: .98rem; } .card__link { font-weight: 700; color: var(--green-deep); display: inline-flex; align-items: center; gap: 6px; } .card__link:hover { text-decoration: none; gap: 9px; } .card--link { display: block; color: inherit; } .card--link:hover { text-decoration: none; } /* Pest-Kachel-Auswahl (Schädling wählen) */ .pests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @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)); } } .pest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); transition: transform .16s, box-shadow .2s, border-color .2s; } .pest:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow-lg); text-decoration: none; } .pest .ico { width: 30px; height: 30px; color: var(--green); } /* ========================================================================== 11 · Steps (Ablauf) ========================================================================== */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 920px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .step__num, .step::before { counter-increment: step; } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--display); font-weight: 800; margin-bottom: 14px; } .step__num::before { content: counter(step); } .step__title { font-size: 1.1rem; margin: 0 0 .35em; } .step p { color: var(--muted); font-size: .96rem; margin: 0; } /* ========================================================================== 12 · Checklist / Listen ========================================================================== */ .checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; } .checklist li { position: relative; padding-left: 34px; color: var(--ink-soft); } .checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); color: var(--green); -webkit-mask: none; } .checklist li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; background: var(--green); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .section--dark .checklist li { color: #C6DBC9; } .section--dark .checklist li::before { background: rgba(255,255,255,.12); } .section--dark .checklist li::after { background: var(--accent-light); } /* ========================================================================== 13 · Badges / Pills (Vertrauen) ========================================================================== */ .badges { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; } .badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: .9rem; color: var(--ink); box-shadow: var(--shadow); } .badge .ico { color: var(--green); } .badge--accent .ico { color: var(--accent-ink); } /* ========================================================================== 14 · Stats ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; text-align: center; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--green); line-height: 1; } .section--dark .stat__num { color: var(--accent-light); } .stat__label { color: var(--muted); font-size: .95rem; font-weight: 600; margin-top: .4em; } .section--dark .stat__label { color: #B7CCBA; } /* ========================================================================== 15 · Split (Text + Medien/Box) ========================================================================== */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 30px; } } .split__media { background: var(--green-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 280px; padding: 32px; display: flex; flex-direction: column; justify-content: center; } /* ========================================================================== 16 · Quote / Testimonial ========================================================================== */ .quote { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); } .quote__text { font-size: 1.18rem; font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0 0 .7em; line-height: 1.45; } .quote__cite { color: var(--muted); font-weight: 600; font-style: normal; font-size: .92rem; } .quote__stars { color: var(--accent-ink); display: inline-flex; gap: 2px; margin-bottom: .6em; } /* ========================================================================== 17 · Notice / Hinweis ========================================================================== */ .notice { border-radius: var(--radius); padding: 22px 26px; margin: 1.6em 0; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); } .notice h3 { margin: 0 0 .35em; } .notice p:last-child { margin-bottom: 0; } .notice--info { background: var(--green-tint); border-color: var(--line-strong); } .notice--warn { background: #FFF6EE; border-color: #F0C9A6; } .notice--warn h3 { color: var(--accent-ink); } /* ========================================================================== 18 · FAQ (details/summary) ========================================================================== */ .faq { display: grid; gap: 12px; } .faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--green); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; transition: transform .25s; } .faq__item[open] summary::after { transform: translateY(-50%) rotate(180deg); } .faq__body { overflow: hidden; transition: height .28s ease; } .faq__body > div, .faq__item .faq__body { padding: 0 22px; } .faq__body p { padding: 0; margin: 0 0 1em; color: var(--ink-soft); } .faq__item[open] .faq__body { padding-bottom: 6px; } .faq__body :first-child { margin-top: 0; } .faq__body { padding: 0 22px 4px; } /* ========================================================================== 19 · CTA-Banner ========================================================================== */ .cta-banner { background: linear-gradient(120deg, var(--green-deep), var(--green)); color: #fff; border-radius: var(--radius-lg); padding: 44px 40px; text-align: center; position: relative; overflow: hidden; } .cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .4em; } .cta-banner p { color: #E4F1E6; 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 ========================================================================== */ .areasearch__field { position: relative; max-width: 460px; margin: 0 0 24px; } .areasearch__field input { width: 100%; font-size: 1.02rem; padding: 13px 16px 13px 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; } .areasearch__field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,107,58,.14); } .areasearch__field .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); } .verzeichnis { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 920px) { .verzeichnis { grid-template-columns: repeat(2, minmax(0, 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(--green); color: var(--green-deep); text-decoration: none; } .verzeichnis a::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--green); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .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(22,36,26,.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-light); } .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(--green); 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: #B3C8B6; 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: #B3C8B6; 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: #9FB8A3; 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-light); } .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: #93AD97; } .footer__legal { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } /* .site-footer a{color} würde sonst die Buttonschrift überschreiben. */ .site-footer .btn--accent, .site-footer .btn--accent:hover, .prefooter .btn--accent, .prefooter .btn--accent:hover { color: #fff; } .prefooter .btn--ghost { color: var(--ink); } /* ========================================================================== 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 (Akzentpunkt) */ .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-ink); box-shadow: 0 0 0 4px rgba(192,71,10,.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(--green); 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(--green-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, minmax(0, 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(--green-tint); border: 1px solid var(--line); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--green); } .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(--green); color: var(--green-deep); text-decoration: none; } .tags .ico { color: var(--green); } /* 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 { transform: translateY(22px); transition: transform .8s cubic-bezier(.2,.7,.2,1); } html.anim .reveal.is-in { transform: none; } html.anim .hero-in { transform: translateY(16px); } html.anim .hero-in.hero-in--show { transform: none; transition: 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: minmax(0, 1.15fr) minmax(0, .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(192,71,10,.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(--green); 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, minmax(0, 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(--green); color: var(--green-deep); background: var(--green-tint); text-decoration: none; } .quickhelp__router .ico { width: 1.55em; height: 1.55em; color: var(--green); } /* --- 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(--green-tint); color: var(--green); 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(--green-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, #FFF6EE, #fff 70%); border-color: #F0C9A6; } .route--urgent .route__icon { background: rgba(192,71,10,.14); color: var(--accent-ink); } .route--urgent .route__cta { color: var(--accent-ink); } /* --- 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(240,164,104,.16); color: #F0A468; 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-light); margin-bottom: 14px; } .feature__hero h3 { color: #fff; font-size: 1.7rem; margin: 0 0 .3em; } .feature__hero p { color: #D3E3D5; margin: 0 0 1.5em; } .feature__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 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(--green); flex: none; } } .nav__list .sub-menu .ico { color: var(--green); } /* --- Trust-Band --- */ .trustband { display: flex; flex-wrap: wrap; max-width: 100%; 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-ink); 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(--green-deep); border-bottom-color: var(--green); } @media (max-width: 720px) { .inpage-nav { display: none; } } /* --- Detail-Layout: Inhalt + Sticky-Aside --- */ .detail { display: grid; grid-template-columns: minmax(0, 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, minmax(0, 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(--green); 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(--green-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-ink); 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-ink); outline-offset: 3px; } /* ========================================================================== 27 · Wespen-Nische: „Wespe oder Hornisse?", Hero-Deko, Micro-Animationen ========================================================================== */ .identify { display: grid; grid-template-columns: repeat(3, minmax(0, 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(--green-tint); color: var(--green); 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: #F7E7DC; color: var(--accent-ink); } .id-card__tag--protected { background: var(--green-tint); color: var(--green-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-ink); } .id-card--protected li::before { background: var(--green); } .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 */ /* 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(192,71,10,.34); } 50% { box-shadow: 0 6px 18px rgba(192,71,10,.34), 0 0 0 10px rgba(192,71,10,.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: #fff; 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: #fff; flex: none; } .season__inner strong { color: #fff; } .season__inner span { font-weight: 600; } .season__inner a { color: #fff; 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(--green-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, minmax(0, 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(--green); flex: none; } .cityhub__count { flex: none; font-size: .74rem; font-weight: 700; color: var(--green-deep); background: var(--green-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, minmax(0, 1fr)); gap: 8px; } .cityhub__link { display: block; padding: 9px 12px; border-radius: 10px; background: var(--bg-soft, #F5F8F4); 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(--green-tint); color: var(--green-deep); border-color: var(--green); transform: translateY(-1px); } .cityhub__link--main { background: var(--green); color: #fff; } .cityhub__link--main:hover { background: var(--green-deep); color: #fff; border-color: var(--green-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(--green); 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(--green-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(--green); opacity: .05; } .figph .ico { width: 58px; height: 58px; color: var(--green); 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: minmax(0, 1.05fr) minmax(0, .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(--green-tint); box-shadow: 0 30px 60px -24px rgba(46,107,58,.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--placeholder { background: url("data:image/svg+xml,") center/cover no-repeat; } .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(--green); } .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(--green); } .hero__stat span { font-size: .78rem; color: var(--muted); font-weight: 600; } @media (max-width: 900px) { .hero--media .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } .hero__media { max-width: 560px; } .hero__figure { aspect-ratio: 16 / 11; } .hero__stat { left: 12px; bottom: 12px; padding: 10px 14px; } .hero__stat strong { font-size: 1.25rem; } } @media (max-width: 520px) { .hero__figure { aspect-ratio: 3 / 2; border-radius: 16px; } .hero__stat { position: static; margin-top: 14px; box-shadow: var(--shadow); flex-direction: row; align-items: baseline; gap: 8px; } } /* 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(46,107,58,.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(120deg, rgba(18,44,24,.93) 0%, rgba(18,44,24,.66) 52%, rgba(18,44,24,.4) 100%), var(--cta-photo, url("/wp-content/uploads/schaedling-bremen/kammerjaeger-hero-einsatzort-1200.webp")) center 32%/cover no-repeat; padding: 62px 44px; text-shadow: 0 1px 14px rgba(0,0,0,.35); } .cta-banner--photo h2 { text-shadow: 0 2px 18px rgba(0,0,0,.4); } .cta-banner--photo p { color: #E9F3EA; } @media (max-width: 600px) { .cta-banner--photo { padding: 46px 26px; } } /* 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(--green-tint); } .id-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 35 · Ergänzungen für diese Site (gleiche Tokens, gleiche Formensprache) ========================================================================== */ /* Telefonnummer im Fließtext: sichtbarer, kopierbarer Text — KEIN Link. Jeder tel:-Link wird auf 44x44px gemessen; eine Inline-Nummer kann das nicht erfüllen, also bleibt tel: den echten CTA-Buttons vorbehalten. */ .telnum { font-family: var(--display); font-weight: 800; font-size: 1.05em; color: var(--ink); white-space: nowrap; letter-spacing: .01em; } .section--dark .telnum, .site-footer .telnum, .cta-banner .telnum { color: #fff; } /* Preis-/Faktenband unter dem Hero */ .factband { display: flex; flex-wrap: wrap; gap: 10px 14px; list-style: none; padding: 0; margin: 22px 0 0; } .factband li { display: inline-flex; align-items: center; gap: 8px; background: var(--green-tint); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-weight: 600; font-size: .93rem; color: var(--ink-soft); } .factband .ico { color: var(--green); flex: none; } .section--dark .factband li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #D3E3D5; } .section--dark .factband .ico { color: var(--green-light); } /* Icon-Chip für die Hero-Badges. Das Template setzte background auf .ico selbst — .ico malt die Glyphe aber MIT background + Maske, das bleicht also das Symbol statt einen Chip zu erzeugen. Eigener Wrapper. */ .hero__badges .chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-tint); flex: none; } .hero__badges .chip .ico { width: 1.05em; height: 1.05em; color: var(--green); background: currentColor; } /* Bild-Figur im Fließtext */ .shot { margin: 0 0 1.6em; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--green-tint); box-shadow: var(--shadow); } .shot img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; } .shot figcaption { padding: 12px 18px; font-size: .88rem; color: var(--muted); background: #fff; border-top: 1px solid var(--line); } .shot--wide { margin-bottom: 2em; } /* Breites Auftaktbild über einer Rasterstrecke. Flacheres Format als die Fließtext-Figur — 3:2 über die volle Breite wäre über 700px hoch. */ .shot--wide { margin-bottom: 2.2em; } .shot--wide img { aspect-ratio: 21 / 8; } @media (max-width: 700px) { .shot--wide img { aspect-ratio: 3 / 2; } } /* Sicherung: in der halben Spalte hat ein mehrspaltiges Raster nichts zu suchen. Der Renderer setzt es dort nicht mehr hin — falls doch einmal, fällt es hier auf eine Spalte zurück statt Karten auf 150px zu quetschen. */ .textshot__body .grid--2, .textshot__body .grid--3, .textshot__body .grid--4, .textshot__body .linkcards, .textshot__body .pests, .textshot__body .steps { grid-template-columns: minmax(0, 1fr); } /* In schmalen Karten und Kacheln IMMER trennen dürfen — sonst bricht ein Kompositum ohne Trennstrich mitten im Wort. Gilt auf jeder Breite, weil diese Elemente per Definition in schmalen Spalten stehen. */ .card__title, .step__title, .linkcards a, .pest, .highlights strong, .quickhelp__router a, .verzeichnis a, .tags a { hyphens: auto; } /* Zwei-Spalten-Fließtext mit Bild */ .textshot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; } .textshot--rev > .textshot__body { order: 2; } .textshot__body > :first-child { margin-top: 0; } @media (max-width: 860px) { .textshot { grid-template-columns: minmax(0, 1fr); gap: 26px; } .textshot--rev > .textshot__body { order: 0; } } /* Stadtteil-/Leistungsraster mit Beschreibung */ .linkcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .linkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .linkcards { grid-template-columns: minmax(0, 1fr); } } .linkcards a { display: flex; align-items: center; gap: 11px; height: 100%; padding: 15px 17px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 600; color: var(--ink); box-shadow: var(--shadow); transition: transform .16s, border-color .2s, box-shadow .2s; } .linkcards a:hover { transform: translateY(-2px); border-color: var(--green); color: var(--green-deep); text-decoration: none; box-shadow: var(--shadow-lg); } .linkcards .ico { color: var(--green); flex: none; } /* Weiterführende Links am Seitenende */ .onward { border-top: 1px solid var(--line); margin-top: 2.4em; padding-top: 1.6em; } .onward__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9em; } /* Sprungmarke zum Inhalt (A5) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; } .skip-link:focus { left: 0; } /* Bildunterschrift im Hero */ .hero__figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; background: linear-gradient(to top, rgba(22,36,26,.82), transparent); color: #fff; font-size: .85rem; font-weight: 600; } @media (max-width: 520px) { .hero__figure figcaption { font-size: .8rem; padding: 20px 12px 10px; } } /* --- Chrome-Ergänzungen --------------------------------------------------- Das Menü dieser Site ist deutlich größer als das der Vorlage (13 Leistungen + 14 Stadtteile + 10 Ratgeber). Es braucht deshalb eine kompakte Stufe zwischen Burger-Umbruch und voller Breite, echte Akkordeons in der mobilen Schublade und einen Telefon-Button, der auch im Burger-Modus sichtbar bleibt. */ /* Aufklapp-Schalter am Untermenü */ .nav__sub-toggle { display: none; } .nav__chev { display: block; width: 11px; height: 11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; transition: transform .22s ease; } .sub-menu__lead a { font-weight: 700 !important; } .sub-menu__lead { border-bottom: 1px solid var(--line); margin-bottom: 5px; padding-bottom: 5px; } /* Kompakte Desktop-Stufe: zwischen 1181px und 1380px wird das Menü enger gesetzt, statt umzubrechen oder den Telefon-Button zu verdrängen. */ @media (min-width: 1181px) and (max-width: 1380px) { .nav__list a { padding: 9px 8px; font-size: .9rem; } .header__inner { gap: 14px; } .site-header .header__cta { padding: 11px 15px; font-size: .93rem; } .brand__claim { display: none; } } @media (min-width: 1181px) { /* Auf dem Desktop öffnet das Untermenü über :hover/:focus-within — der Schalter wäre dort ein 20px-Steuerelement ohne Funktion. Also weg, und das Auf-/Zu-Zeichen kommt wie in der Vorlage aus dem ::after. */ .nav__sub-toggle { display: none; } .nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { clip-path: inset(-40px -40px -40px -40px); } } /* Deutsche Komposita sprengen schmale Spalten. Zwei Ursachen, beide hier: 1. Ein Flex-Kind hat per Voreinstellung min-width:auto — es schrumpft also nie unter seine längste Vokabel und drückt die Zeile auf. 2. Ein einzelnes langes Wort im Fließtext läuft über den Kasten hinaus, ohne dass der Kasten selbst breiter wird (im Element-Rechteck unsichtbar, messbar nur an scrollWidth). */ p, li, dd, dt, figcaption, td, th, .card__text, .quote__text, .hero__lead, .section__lead, .step p, .footer__pitch { overflow-wrap: break-word; } @media (max-width: 760px) { p, li, dd, dt, figcaption, .card__text, .hero__lead, .section__lead, .step p { hyphens: auto; } } /* Die H1 der Vorlage skaliert mit 5vw. „Schädlingsbekämpfung" ist bei 54px aber 668px breit, während die Textspalte des zweispaltigen Heros nur 486–642px hergibt — das Wort wurde also mitten durchgebrochen. Gemessen, nicht geschätzt (tools/audit-responsive.js). 3,6vw mit Deckel bei 3rem hält das längste Kompositum auf jeder Breite in einer Zeile. */ .hero__title { font-size: clamp(2.1rem, 3.6vw, 3rem); max-width: 22ch; } .hero__cta-note { max-width: 32ch; hyphens: manual; } .highlights li, .highlights li > div, .infolist li, .infolist li > div, .aside-facts li, .aside-facts li > div, .factband li, .factband li > span, .trustband__item, .quickhelp__facts li, .checklist li, .signs li { min-width: 0; } .telnum { overflow-wrap: normal; } /* Tippziele: jedes echte Steuerelement erreicht 44px Höhe. Der Anruf-Button kam mit der Polsterung der Vorlage nur auf ~41px — und genau der ist der einzige Conversion-Weg. Gemessen wird er nur im Mobil-Viewport, der Mangel bestand also ab Tablet-Breite unbemerkt. */ .btn { min-height: 44px; } .nav__list > li > a { min-height: 44px; display: flex; align-items: center; } .breadcrumbs a { padding-inline: 9px; margin-inline: -9px; } /* Mobile Schublade: dieselben Ziele, aber als Akkordeon. 27 Menüpunkte dürfen nicht alle gleichzeitig aufgeklappt sein. */ @media (max-width: 1180px) { .nav__list li { display: flex; flex-wrap: wrap; align-items: center; } .nav__list > li > a { flex: 1 1 auto; } .nav__list .menu-item-has-children > a::after { content: none; } .nav__sub-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; } .nav__sub-toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); } .nav__list .sub-menu { flex: 1 0 100%; display: none; } .nav__list .menu-item-has-children.is-open > .sub-menu { display: block; } .nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { visibility: visible; } .nav__list .sub-menu li { display: block; } } /* Der Telefon-Button ist der einzige Conversion-Weg — er verschwindet nie. */ .header__cta { flex: none; } .header__cta-num { white-space: nowrap; } /* Info-Leiste: die Telefonnummer ist hier reiner Text. Ein tel:-Link in 0,82rem-Schrift wäre ein Tippziel unter 44px. */ .topbar .telnum { color: #fff; font-size: .95em; } @media (max-width: 860px) { .topbar__hours { display: none; } } /* Brotkrumen sind eine