/* Theme Name: Schädling Bernhardt Nürnberg Theme URI: https://schaedling-nuernberg-bernhardt.de Description: Bespoke-Theme für Schädling Bernhardt in Nürnberg. Übernimmt das Design-System der Vorlage (Clean-Hygiene-Boilerplate) und führt es in einer eigenen Petrol-Palette mit warmem Signal-Akzent. Self-hosted Fonts (Inter + Sora), JSON-LD, keine externen Requests, keine Formulare — das Telefon ist der einzige Auftragsweg. Author: Beratung & Service Thomas Version: 1.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: schaedling-nuernberg */ /* ========================================================================== 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 { --accent-ink: #a8380a; /* Akzent als TEXT auf Hell */ --accent-light: #f0a26a; /* Akzent als TEXT auf Dunkel */ --brand: #0f6274; /* Primär – Petrol (Hygiene/Vertrauen) */ --brand-deep: #0a4b59; --brand-700: #083a45; --tint: #eaf4f7; /* helle Flächen */ --tint-2: #d7e9ee; --ink: #0e252b; /* Text + dunkle Sektionen */ --ink-soft: #284249; --muted: #4c6a72; /* Sekundärtext */ --accent: #c2410c; /* CTA-Akzent als FÜLLUNG (weißer Text ≥ 4,5:1) */ --accent-dark: #9a3308; --paper: #ffffff; --line: #dbe7ea; --line-strong: #bcd2d8; --ok: #157a55; --err: #b03a30; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --container: 1440px; --shadow: 0 1px 2px rgba(14,37,43,.04), 0 8px 24px rgba(14,37,43,.06); --shadow-lg: 0 18px 50px rgba(14,37,43,.12); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --display: "Sora", var(--sans); } /* ========================================================================== 2 · Reset / Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } 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; } p { margin: 0 0 1em; } a { color: var(--brand-deep); text-decoration: none; } /* Fließtext-Links tragen eine sichtbare Unterstreichung — Farbe allein reicht nicht. */ main p a, main li a, .faq__body a, .prose a, .detail__main p a, .detail__main li a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .06em; } 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: #cfe2e7; 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(14,37,43,.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(--tint); color: var(--brand-deep); text-decoration: none; } .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--brand-deep); } .nav__list li { position: relative; } /* Dropdowns */ .nav__list .sub-menu { list-style: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; max-height: 76vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; } .nav__list li:hover > .sub-menu, .nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__list .sub-menu a { padding: 8px 11px; font-size: .9rem; font-weight: 600; border-radius: 7px; } .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: 5px; color: var(--muted); } .header__cta { flex: none; } @media (max-width: 1080px) { .site-header .header__cta { display: none; } } /* Burger */ .nav-toggle { display: none; position: relative; z-index: 80; margin-left: auto; width: 46px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Abdunkelnder Hintergrund hinter dem Off-Canvas-Menü (nur mobil) */ .nav-backdrop { display: none; } @media (max-width: 1080px) { .nav-toggle { display: flex; } /* WICHTIG: backdrop-filter macht den Header zum Containing-Block für position:fixed – das Off-Canvas-Menü (liegt IM Header) wäre sonst nur so hoch wie der Header (kurze Box oben). Auf Mobil daher entfernen, damit das Menü volle Viewport-Höhe bekommt. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } .nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: 100dvh; width: min(86vw, 340px); margin: 0; background: #fff; transform: translateX(100%); transition: transform .28s ease; z-index: 70; box-shadow: var(--shadow-lg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 88px 16px 28px; } body.nav-open { overflow: hidden; } body.nav-open .nav { transform: translateX(0); } .nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .nav__list > li > a { padding: 13px 14px; font-size: 1.05rem; } .nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--tint); border-radius: 0; margin: 2px 0 8px 12px; max-height: none; padding: 2px 0 2px 8px; } .nav__list .sub-menu a { padding: 11px 12px; font-size: .97rem; } .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(8,34,40,.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(--tint); border-bottom: 1px solid var(--line); } .breadcrumbs__inner { max-width: var(--container); margin: 0 auto; padding: 11px 24px; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .breadcrumbs a { color: var(--brand-deep); font-weight: 600; } .breadcrumbs__sep { color: var(--line-strong); } .breadcrumbs__current { color: var(--ink); font-weight: 600; } /* ========================================================================== 7 · Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; 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-dark); 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(--brand); color: var(--brand-deep); background: var(--tint); } .btn--brand { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(15,98,116,.28); } .btn--brand:hover { background: var(--brand-deep); color: #fff; } .btn--lg { padding: 15px 26px; font-size: 1.06rem; border-radius: 13px; } /* Auf dunklem Grund */ .section--dark .btn--ghost, .hero--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); } .section--dark .btn--ghost:hover, .hero--dark .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; } /* ========================================================================== 8 · Sektionen ========================================================================== */ .section { padding: 72px 0; } .section--alt { background: var(--tint); } .section--tint2 { background: var(--tint-2); } .section--dark { background: var(--ink); color: #cfe3e8; 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(--brand); 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: #b2cdd4; } /* ========================================================================== 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(--tint-2), transparent 60%), radial-gradient(560px 360px at 5% 108%, var(--tint), transparent 55%); pointer-events: none; } /* Startseite: Hero ohne Farbverlauf (flacher, einfarbiger Hintergrund) */ body.home .hero { background: #fff; } body.home .hero::before { display: none; } .hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .hero__kicker { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line-strong); color: var(--brand-deep); font-weight: 700; font-size: .82rem; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px; margin: 0 0 18px; box-shadow: var(--shadow); } .hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; max-width: 18ch; margin: 0 0 .4em; } .hero__lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--ink-soft); max-width: 56ch; margin: 0 0 1.8em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; } .hero__badges li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--ink-soft); } .hero__badges .ico { color: var(--brand); background: var(--tint); width: 1.7em; height: 1.7em; padding: .34em; border-radius: 50%; } /* Dunkle Hero-Variante */ .hero--dark { background: var(--ink); color: #cfe3e8; } .hero--dark .hero__title { color: #fff; } .hero--dark .hero__lead { color: #b2cdd4; } .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(15,98,116,.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, 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(--tint); color: var(--brand); margin-bottom: 16px; } .card__icon .ico { width: 1.5em; height: 1.5em; } .card__title { font-size: 1.2rem; margin: 0 0 .4em; } .card__text { color: var(--muted); margin: 0 0 1em; font-size: .98rem; } .card__link { font-weight: 700; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 6px; } .card__link:hover { text-decoration: none; gap: 9px; } .card--link { display: block; color: inherit; } .card--link:hover { text-decoration: none; } /* Pest-Kachel-Auswahl (Schädling wählen) */ .pests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 920px) { .pests { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .pests { grid-template-columns: repeat(2, 1fr); } } .pest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); transition: transform .16s, box-shadow .2s, border-color .2s; } .pest:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-lg); text-decoration: none; } .pest .ico { width: 30px; height: 30px; color: var(--brand); } /* ========================================================================== 11 · Steps (Ablauf) ========================================================================== */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .step__num, .step::before { counter-increment: step; } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--display); font-weight: 800; margin-bottom: 14px; } .step__num::before { content: counter(step); } .step__title { font-size: 1.1rem; margin: 0 0 .35em; } .step p { color: var(--muted); font-size: .96rem; margin: 0; } /* ========================================================================== 12 · Checklist / Listen ========================================================================== */ .checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; } .checklist li { position: relative; padding-left: 34px; color: var(--ink-soft); } .checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--brand); -webkit-mask: none; } .checklist li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; background: var(--brand); -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: #c6dbe1; } .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(--brand); } .badge--accent .ico { color: var(--accent); } /* ========================================================================== 14 · Stats ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--brand); line-height: 1; } .section--dark .stat__num { color: var(--accent-light); } .stat__label { color: var(--muted); font-size: .95rem; font-weight: 600; margin-top: .4em; } .section--dark .stat__label { color: #b2cdd4; } /* ========================================================================== 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(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 280px; padding: 32px; display: flex; flex-direction: column; justify-content: center; } /* ========================================================================== 16 · Quote / Testimonial ========================================================================== */ .quote { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); } .quote__text { font-size: 1.18rem; font-family: var(--display); font-weight: 600; color: var(--ink); margin: 0 0 .7em; line-height: 1.45; } .quote__cite { color: var(--muted); font-weight: 600; font-style: normal; font-size: .92rem; } .quote__stars { color: var(--accent-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(--tint); border-color: var(--line-strong); } .notice--warn { background: #fff4ec; border-color: #f2ceae; } .notice--warn h3 { color: var(--accent-dark); } /* ========================================================================== 18 · FAQ (details/summary) ========================================================================== */ .faq { display: grid; gap: 12px; } .faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--brand); -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(--brand-deep), var(--brand)); color: #fff; border-radius: var(--radius-lg); padding: 44px 40px; text-align: center; position: relative; overflow: hidden; } .cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .4em; } .cta-banner p { color: #d5e9ee; 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(--brand); color: var(--brand-deep); text-decoration: none; } .verzeichnis a::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--brand); -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(14,37,43,.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(--brand); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .22s; box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; justify-content: center; } .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 820px) { .to-top { bottom: 74px; } } /* ========================================================================== 23 · Footer ========================================================================== */ .site-footer { background: var(--ink); color: #a9c6ce; 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: #a9c6ce; font-weight: 500; } /* Buttons in der Fußzeile behalten ihre eigene Textfarbe. */ .site-footer .btn--accent, .site-footer .btn--accent:hover, .prefooter .btn--accent, .prefooter .btn--accent:hover { color: #fff; } .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: #8fb0b9; margin-bottom: 1.2em; } .footer__contact { display: grid; gap: 10px; } .footer__contact li { display: flex; align-items: center; gap: 9px; } /* Die Rufnummer in der Fußzeile ist ein echtes Anrufziel und braucht die volle Trefferfläche — als reiner Textlink wäre sie 30px hoch. */ .footer__contact a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; font-weight: 700; } .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: #8fb0b9; } .footer__legal { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; } /* ========================================================================== 24 · Utilities ========================================================================== */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .lead { font-size: 1.14rem; color: var(--ink-soft); } .muted { color: var(--muted); } /* ========================================================================== 25 · Bausteine für Detail-/Unterseiten ========================================================================== */ /* Zentrierter Sektionskopf */ .section__head { text-align: center; max-width: 660px; margin: 0 auto 2.4em; } .section__head .section__lead { margin-left: auto; margin-right: auto; } /* Anzeichen-Liste (amber Punkt) */ .signs { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; } .signs li { position: relative; padding-left: 30px; color: var(--ink-soft); } .signs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(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(--brand); width: 1.55em; height: 1.55em; flex: none; margin-top: 2px; } .infolist strong { display: block; color: var(--ink); } .infolist span, .infolist a { color: var(--muted); } /* Team-Karten mit Avatar-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(--tint); border: 1px solid var(--line); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--brand); } .avatar .ico { width: 2.1em; height: 2.1em; } /* Verwandte Links / Nachbar-Gebiete als Pills */ .tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .tags a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink); box-shadow: var(--shadow); } .tags a:hover { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; } .tags .ico { color: var(--brand); } /* Legal-Text (Impressum/Datenschutz) */ .legal h2 { font-size: 1.25rem; margin: 1.6em 0 .4em; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--ink-soft); } /* ========================================================================== 26 · UX-Ausbau (gleiches Theme): Micro-Animationen, Split-Hero, Quick-Help, Routen, Feature, Mega-Menü, Trust-Band, Detail-Layout, Pre-Footer ========================================================================== */ /* --- Micro-Animationen (Progressive Enhancement) --- */ .reveal { will-change: opacity, transform; } html.anim .reveal { transform: translateY(20px); 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 { 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(194,65,12,.3); transition: background .2s ease; } .quickhelp__call:hover { background: var(--accent-dark); color: #fff; text-decoration: none; } .quickhelp__facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 11px; } .quickhelp__facts li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .93rem; color: var(--ink-soft); } .quickhelp__facts .ico { color: var(--brand); flex: none; } .quickhelp__router-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin: 0 0 9px; } .quickhelp__router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .quickhelp__router a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; font-weight: 600; color: var(--ink); text-align: center; transition: border-color .2s ease, background .2s ease, color .2s ease; } .quickhelp__router a:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--tint); text-decoration: none; } .quickhelp__router .ico { width: 1.55em; height: 1.55em; color: var(--brand); } /* --- Routen „nach Bedarf" --- */ .routes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 720px) { .routes { grid-template-columns: 1fr; } } .route { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; color: inherit; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; } .route:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; border-color: var(--line-strong); } .route__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: var(--tint); color: var(--brand); margin-bottom: 18px; transition: transform .3s cubic-bezier(.2,.7,.2,1); } .route:hover .route__icon { transform: scale(1.06); } .route__icon .ico { width: 1.75em; height: 1.75em; } .route h3 { font-size: 1.5rem; margin: 0 0 .3em; } .route p { color: var(--muted); margin: 0 0 1.1em; } .route__cta { font-weight: 700; color: var(--brand-deep); display: inline-flex; align-items: center; gap: 7px; transition: gap .2s ease; } .route:hover .route__cta { gap: 12px; } .route--urgent { background: linear-gradient(to bottom right, #fff4ec, #fff 70%); border-color: #f2ceae; } .route--urgent .route__icon { background: rgba(194,65,12,.16); color: var(--accent-dark); } .route--urgent .route__cta { color: var(--accent-dark); } /* --- 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: #f5c9a4; 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: #c6dbe1; margin: 0 0 1.5em; } .feature__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 480px) { .feature__grid { grid-template-columns: 1fr; } } /* --- Mega-Menü (Leistungen) – nur Desktop --- */ @media (min-width: 1081px) { .nav__list .menu-item.mega { position: relative; } .nav__list .menu-item.mega > .sub-menu { width: 600px; max-height: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 14px; } .nav__list .menu-item.mega > .sub-menu a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; } .nav__list .menu-item.mega > .sub-menu .ico { width: 1.3em; height: 1.3em; color: var(--brand); flex: none; } } .nav__list .sub-menu .ico { color: var(--brand); } /* --- Trust-Band --- */ .trustband { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; padding: 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .trustband__item { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink-soft); font-size: .95rem; white-space: nowrap; } .trustband__item .ico { flex: none; } /* volle Desktop-Breite: garantiert eine Reihe (Inhalt passt hier sicher) */ @media (min-width: 1220px) { .trustband { flex-wrap: nowrap; } } .trustband__item .ico { color: var(--accent); width: 1.5em; height: 1.5em; } .trustband__divider { width: 1px; height: 26px; background: var(--line); } @media (max-width: 600px) { .trustband__divider { display: none; } } /* --- In-Page-Navigation (Detailseiten) --- */ .inpage-nav { position: sticky; top: 63px; z-index: 30; background: rgba(255,255,255,.93); backdrop-filter: saturate(150%) blur(9px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .inpage-nav__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .inpage-nav__inner::-webkit-scrollbar { display: none; } .inpage-nav a { padding: 15px 14px; font-weight: 600; font-size: .92rem; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .inpage-nav a:hover { color: var(--ink); text-decoration: none; } .inpage-nav a.is-active { color: var(--brand-deep); border-bottom-color: var(--brand); } @media (max-width: 720px) { .inpage-nav { display: none; } } /* --- Detail-Layout: Inhalt + Sticky-Aside --- */ .detail { display: grid; grid-template-columns: 1fr 340px; gap: 50px; align-items: start; } @media (max-width: 980px) { .detail { grid-template-columns: 1fr; gap: 30px; } } .detail__main > .detail-sec { padding: 44px 0; border-bottom: 1px solid var(--line); } .detail__main > .detail-sec:first-child { padding-top: 6px; } .detail__main > .detail-sec:last-child { border-bottom: none; } .detail__main .section__title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); } .detail .detail-sec > .section__kicker { margin-top: 0; } .detail .steps { grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { .detail .steps { grid-template-columns: 1fr; } } .detail__aside { display: grid; gap: 18px; position: sticky; top: 128px; } @media (max-width: 980px) { .detail__aside { position: static; } } .aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; } .aside-card--accent { background: var(--ink); color: #fff; } .aside-card--accent h3, .aside-card--accent p { color: #fff; } .aside-card h3 { font-size: 1.15rem; margin: 0 0 .7em; } .aside-card .btn { width: 100%; justify-content: center; } .aside-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .aside-facts li { display: flex; align-items: flex-start; gap: 12px; } .aside-facts .ico { color: var(--brand); flex: none; margin-top: 2px; } .aside-facts strong { display: block; color: var(--ink); font-size: .96rem; } .aside-facts span { color: var(--muted); font-size: .88rem; } /* --- Pre-Footer-CTA-Band --- */ .prefooter { background: var(--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-dark); 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(--tint); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; } .id-card__icon .ico { width: 1.55em; height: 1.55em; } .id-card h3 { margin: 0; font-size: 1.22rem; } .id-card__tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; } .id-card__tag--remove { background: rgba(194,65,12,.16); color: var(--accent-dark); } .id-card__tag--protected { background: var(--tint); color: var(--brand-deep); } .id-card ul { list-style: none; padding: 0; margin: 0 0 1.1em; display: grid; gap: 9px; } .id-card li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: .97rem; } .id-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .id-card--protected li::before { background: var(--brand); } .id-card__note { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 13px; margin: 0; } @media (max-width: 940px) { } /* 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-dark)); color: #3a1a00; 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: #3a1a00; flex: none; } .season__inner strong { color: #3a1a00; } .season__inner span { font-weight: 600; } .season__inner a { color: #3a1a00; font-weight: 800; text-decoration: underline; } /* 28 · Städte-Verzeichnis (alle Orte nach Region gruppiert) */ .cityhub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .cityhub__region { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px 22px 24px; } .cityhub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); } .cityhub__h { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.16rem; line-height: 1.2; } .cityhub__h .ico { width: 1.15em; height: 1.15em; color: var(--brand); flex: none; } .cityhub__count { flex: none; font-size: .74rem; font-weight: 700; color: var(--brand-deep); background: var(--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, #f2f7f8); 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(--tint); color: var(--brand-deep); border-color: var(--brand); transform: translateY(-1px); } .cityhub__link--main { background: var(--brand); color: #fff; } .cityhub__link--main:hover { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); } @media (max-width: 900px) { .cityhub { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cityhub__grid { grid-template-columns: 1fr; } } /* 29 · Fließtext-Aufwertung: Lead-Satz, Highlight-Karten, Bild-Text-Split */ .lead-line { font-size: 1.2rem; line-height: 1.55; color: var(--ink); font-weight: 500; margin: 0 0 .9em; } .section--dark .lead-line { color: #fff; } .detail__main .lead-line { font-size: 1.1rem; } .highlights { list-style: none; padding: 0; margin: 1.3em 0; display: grid; gap: 12px; } .highlights li { display: flex; gap: 13px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow); } .highlights li .ico { width: 1.35em; height: 1.35em; color: var(--brand); flex: none; margin-top: 2px; } .highlights li > div { color: var(--ink-soft); } .highlights strong { color: var(--ink); } .mediasplit { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } .mediasplit__body > .section__title { margin-top: 0; } .mediasplit--rev .mediasplit__body { order: 2; } @media (max-width: 820px) { .mediasplit { grid-template-columns: 1fr; gap: 26px; } .mediasplit--rev .mediasplit__body { order: 0; } } .figph { margin: 0; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: linear-gradient(140deg, var(--tint), #ffffff 70%); position: relative; overflow: hidden; } .figph::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 200px; height: 200px; border-radius: 50%; background: var(--brand); opacity: .05; } .figph .ico { width: 58px; height: 58px; color: var(--brand); opacity: .55; position: relative; } .figph figcaption { font-size: .82rem; color: var(--muted); letter-spacing: .02em; max-width: 32ch; position: relative; } @media (max-width: 820px) { .figph { min-height: 200px; } } /* 30 · Zusätzliche Themen-Icons für 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: 3 / 2; border-radius: 22px; overflow: hidden; background: var(--tint); box-shadow: 0 30px 60px -24px rgba(15,98,116,.45); } .hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__figure::after { content: ""; position: absolute; inset: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); pointer-events: none; } .hero__figure-tag { position: absolute; left: 14px; bottom: 14px; margin: 0; background: rgba(255,255,255,.92); color: var(--ink); font-size: .74rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; } .hero__figure-tag .ico { width: 1em; height: 1em; color: var(--brand); } .hero__stat { position: absolute; left: -16px; bottom: 26px; background: #fff; border-radius: 16px; padding: 13px 18px; box-shadow: 0 22px 44px -16px rgba(0,0,0,.3); display: flex; flex-direction: column; line-height: 1.15; } .hero__stat strong { font-family: var(--display); font-size: 1.5rem; color: var(--brand); } .hero__stat span { font-size: .78rem; color: var(--muted); font-weight: 600; } @media (max-width: 900px) { .hero--media .hero__inner { grid-template-columns: 1fr; gap: 30px; } .hero__stat { left: 12px; } } /* 32 · 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(15,98,116,.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 { position: relative; background: var(--ink); 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: #eaf5f0; } @media (max-width: 600px) { .cta-banner--photo { position: relative; background: var(--ink); padding: 62px 44px; text-shadow: 0 1px 14px rgba(0,0,0,.35); } } /* 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(--tint); } .id-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== 35 · Ergänzungen für schaedling-nuernberg-bernhardt.de Alles darüber ist das Design-System der Vorlage, nur umgefärbt. ========================================================================== */ /* --- 35.1 Kopfzeile: Marke darf den Burger nicht verdrängen --------------- In der Vorlage ist .brand flex:none und der Burger holt sich margin-left:auto. Mit einem längeren Markennamen wächst die Marke über die verfügbare Breite, schiebt den Burger aus dem Bild und die Kopfzeile wirkt „kaputt". Die Marke bekommt daher eine schrumpfbare Textspalte, der Burger bleibt unantastbar. */ .brand { min-width: 0; flex: 0 1 auto; } .brand__text { min-width: 0; } .brand__name { overflow-wrap: anywhere; } .nav-toggle { flex: none; } @media (max-width: 1080px) { .brand__name { font-size: 1.05rem; } } @media (max-width: 420px) { .brand__logo { width: 38px; height: 38px; } .brand__name { font-size: .97rem; letter-spacing: -.01em; } .brand__claim { display: none; } /* Zusatzzeile weicht, der Burger bleibt */ .header__inner { padding: 10px 16px; gap: 12px; } } /* --- 35.2 Buttons dürfen auf kleinen Geräten umbrechen -------------------- `white-space: nowrap` + eine lange Rufnummer setzt sonst die minimale Layout-Breite der Seite und zwingt Geräte unter ~376px in die Skalierung. */ @media (max-width: 420px) { .btn { white-space: normal; padding-left: 14px; padding-right: 14px; } .btn--lg { padding: 14px 16px; font-size: 1rem; } .hero__ctas .btn { width: 100%; justify-content: center; } } /* --- 35.2b Nichts erzwingt eine breitere Seite als das Gerät ------------- `white-space: nowrap` an einem langen Label setzt die minimale Layout-Breite der GANZEN Seite. Auf einem 320px-Gerät rendert Chrome dann skaliert bei 334px — `overflow-x: clip` versteckt das, es bleibt trotzdem falsch. Messbar an `innerWidth !== Viewport-Breite`, nicht an scrollWidth. */ @media (max-width: 560px) { .trustband { flex-wrap: wrap; } .trustband__item { white-space: normal; } .trustband__divider { display: none; } } @media (max-width: 360px) { /* Auf den schmalsten Geräten bekommt der Anruf die ganze Leiste. */ .actionbar__ghost { display: none; } .actionbar__call { flex: 1; } } /* Lange Komposita brechen auch im Fließtext und in Karten. `min-width: 0` ist dabei der eigentliche Hebel: ein Flex-Kind hat per Vorgabe `min-width: auto` = min-content, und dann setzt ein Wort wie „Jagdausübungsberechtigten" die Breite der ganzen Zeile — unabhängig davon, was overflow-wrap sagt. Auf Deutsch trennt der Browser zusätzlich sauber, weil das Dokument `lang="de-DE"` trägt. */ p, li, strong, .card__text, .step p, .quickhelp__facts li { overflow-wrap: break-word; } .highlights li, .highlights li > div, .infolist li, .infolist li > div, .aside-facts li, .quickhelp__facts li, .trustband__item { min-width: 0; } @media (max-width: 480px) { p, li, .card__text, .highlights li > div { hyphens: auto; } } /* --- 35.2c Hero-Vertrauenszeile ------------------------------------------ Zwei Fehler der Vorlage, die man nur SIEHT: 1. `.hero__badges .ico { background: }` zerstört das Icon. Ein `.ico` malt sein Glyph mit `background: currentColor` durch eine Maske — eine andere Hintergrundfarbe färbt also das ZEICHEN blass, statt einen Chip darunter zu legen. Es gibt keinen Chip; es gibt nur ein fahles Häkchen. 2. `.hero__badges li` und `.hero__cta-note` setzen eine dunkle Textfarbe. Im dunklen Hero steht damit Dunkelgrau auf Dunkelgrün — lesbar ist das nicht, und der Kontrastprüfer meldet es nicht zuverlässig. */ .hero__badges .ico { background: currentColor; color: var(--brand); width: 1.35em; height: 1.35em; padding: 0; border-radius: 0; } .hero--dark .hero__badges li { color: #cfe3e8; } .hero--dark .hero__badges .ico { color: var(--accent-light); } .hero--dark .hero__cta-note { color: #b2cdd4; } .hero--dark .hero__kicker .ico { color: var(--accent-light); } /* --- 35.3 Rufnummer im Fließtext ohne Link ------------------------------- Jeder tel:-Link wird auf 44×44px gemessen. Nummern mitten im Satz können das nicht erfüllen, also stehen sie als Text da; anrufbar sind die echten CTAs. */ .telnum { font-weight: 700; color: var(--brand-deep); white-space: nowrap; } .section--dark .telnum, .cta-banner .telnum, .feature__hero .telnum { color: #fff; } /* --- 35.4 Lange Komposita brechen statt zu überlaufen --------------------- */ h1, h2, h3, h4, .card__title, .step__title, .route h3 { overflow-wrap: break-word; hyphens: auto; } .card, .step, .route, .pest, .id-card, .highlights li { min-width: 0; } /* --- 35.5 Hero mit Bild: sauber auf jeder Breite -------------------------- */ .hero__figure { max-width: 100%; } .hero__figure img { max-width: 100%; } /* Die Kennzahl-Karte ragt in der Vorlage absichtlich links heraus und wird erst ab 900px zurückgeholt — dazwischen steht sie über dem Viewport-Rand. */ .hero__stat { left: 14px; } @media (min-width: 1180px) { .hero__stat { left: -16px; } } @media (max-width: 560px) { .hero__stat { position: static; margin: 14px 0 0; box-shadow: var(--shadow); } .hero--media .hero__inner { gap: 24px; } } /* --- 35.6 Bildbausteine --------------------------------------------------- */ .figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--tint); box-shadow: 0 22px 44px -26px rgba(14,37,43,.55); } .figure img { display: block; width: 100%; height: auto; } .figure figcaption { padding: 12px 16px; font-size: .86rem; color: var(--muted); background: #fff; border-top: 1px solid var(--line); } .figure--flat { box-shadow: none; border: 1px solid var(--line); } /* Foto-Band: das Bild liegt als darunter, der Verlauf darüber. */ .cta-banner--photo { isolation: isolate; } .cta-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } /* Der Verlauf ist kein Deko-Element, sondern trägt die Lesbarkeit: Text über einem Foto kann ein Kontrastprüfer nicht bewerten (er kennt den Bildinhalt nicht), also muss die Abdunklung auch über der hellsten Stelle reichen — hier ein weißer Schutzanzug im rechten Bilddrittel. */ .cta-banner--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(8,34,40,.93) 0%, rgba(8,34,40,.84) 48%, rgba(8,34,40,.76) 100%); } /* --- 35.6b Text und Bild: zwei Anordnungen, je nach Textmenge ------------- Ein Nebeneinander trägt nur, solange der Text ungefähr so hoch wird wie das Bild. Bei einem langen Abschnitt bleibt sonst eine schmale Textspalte neben einer großen leeren Fläche stehen. Deshalb: • kurzer Abschnitt -> .mediasplit (nebeneinander), Bild oben ausgerichtet • langer Abschnitt -> .figure--band (Motiv breit ÜBER dem Text) */ .mediasplit { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; gap: 40px; } .mediasplit .figure { position: sticky; top: 108px; } @media (max-width: 980px) { .mediasplit { grid-template-columns: 1fr; } .mediasplit .figure { position: static; } } /* Das Motiv über dem Text zeigt das GANZE Bild — kein `object-fit: cover`, das bei Personenaufnahmen zuverlässig den Kopf abschneidet. Stattdessen begrenzt die BREITE die Höhe: über die volle Spaltenbreite gezogen wäre ein Hochkant-nahes Foto (1408×1024) rund 950px hoch und schöbe den Text aus dem Bild. Linksbündig auf Textkante, damit es als Auftakt des Abschnitts liest und nicht frei schwebt. */ .figure--band { max-width: 660px; margin: 0 0 32px; } .figure--band img { width: 100%; height: auto; } @media (max-width: 700px) { .figure--band { max-width: 100%; } } /* Der Text darunter nutzt die volle Breite des Abschnitts. */ .prose { max-width: none; } /* --- 35.6c Links auf dem Abschluss-Band ---------------------------------- Das Band steht auf einem dunklen Foto. Fließtext-Links erben dort die Standardfarbe (dunkles Petrol) und verschwinden praktisch im Hintergrund — 1,5:1 auf dem Verlauf. Auf dunklem Grund sind Links weiß und unterstrichen. */ .cta-banner a { color: #fff; text-decoration: underline; text-underline-offset: .18em; } .cta-banner a:hover { color: #fff; text-decoration-thickness: .12em; } .cta-banner .btn, .cta-banner .btn:hover { text-decoration: none; } .cta-banner .btn--accent { color: #fff; } .cta-banner p strong, .cta-banner p { color: #eef6f8; } /* --- 35.6d Prozess-Schritte: Karten so hoch wie ihr Inhalt ---------------- Im Raster werden Zellen standardmäßig auf die Höhe der höchsten gestreckt. Ein Schritt mit Unterliste bläht damit drei fast leere Karten mit auf. `align-items: start` beendet das; trägt ein Schritt eine Unterliste, wird zusätzlich zweispaltig gesetzt, damit die Textmenge Platz hat. */ .steps { align-items: start; } .steps--rich { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .steps--rich { grid-template-columns: 1fr; } } .step__sub { margin: .8em 0 0; } .step__sub li { font-size: .96rem; } /* --- 35.7 Preis-Karte (Profil „transparent") ------------------------------ */ .pricecard { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); } .pricecard__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .35em; } .pricecard__value { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink); margin: 0 0 .3em; line-height: 1.15; } .pricecard p:last-child { margin-bottom: 0; color: var(--muted); font-size: .96rem; } /* --- 35.8 Rechtstexte / Barrierefreiheitserklärung ------------------------ */ .legal h3 { font-size: 1.06rem; margin: 1.3em 0 .35em; } .legal ul { margin-bottom: 1.2em; } /* --- 35.9 Sprungmarke zum Inhalt ----------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; } .skip-link:focus { left: 0; text-decoration: none; } /* --- 35.10 Sticky-Anrufleiste: Text bleibt lesbar ------------------------- */ @media (max-width: 420px) { .actionbar { padding: 8px 10px; gap: 8px; } .actionbar__call { padding: 11px 10px; font-size: .95rem; } } /* --- 35.11 Dropdown-Auslöser als echter Button ---------------------------- Die Vorlage öffnet ihre Untermenüs über einen Link mit href="#". Das ist für die Tastatur eine Sackgasse. Hier ist der Auslöser ein