/* Theme Name: A1 Rohrreinigung – Technisches Raster Theme URI: http://localhost/a1-rohrreinigung.de Description: Branchen-Theme für Rohr- & Kanalreinigung. Eigenständiges „Technisches Raster"-Design (Graublau + Schiefer-Petrol, Hairline-Raster, Mono-Labels), self-hosted Fonts (Space Grotesk + Inter + JetBrains Mono), dezente Micro-Animationen (Scroll-Reveal, Count-up, weiche Hovers), JSON-LD (Plumber/Breadcrumb/FAQ). Telefon als einziges Konversions-Element, kein Kontaktformular. Inhalte werden separat eingepflegt. Author: Beratung & Service Thomas Version: 2.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: a1-rohrreinigung */ /* ========================================================================== 0 · Fonts (self-hosted, DSGVO-konform) — variable woff2 ========================================================================== */ @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap; src:url("fonts/space-grotesk-var.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/inter-var.woff2") format("woff2"); } @font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/jetbrains-mono-var.woff2") format("woff2"); } /* ========================================================================== 1 · Design-Tokens — „Technisches Raster" (Graublau + Schiefer-Petrol) ========================================================================== */ :root { --blue: #15487A; /* Primär (Graublau) */ --blue-deep: #0E3358; --blue-700: #0B2A49; --blue-tint: #E8F0F5; /* Primär-soft */ --sand: #F4F6F8; /* Sektionswechsel (kühl) */ --sand-2: #ECF0F4; --ink: #1A2230; /* Text / Dunkelflächen */ --ink-soft: #4A5568; --muted: #5C6773; --brass: #2C6B6B; /* Schiefer-Petrol = Mono-/Linien-Akzent */ --brass-deep: #225454; --paper: #ffffff; --line: #E3E8EE; --line-strong: #D9E0E5; /* Hairline */ --placeholder-line: #9AA5B1; --radius: 8px; --radius-sm: 6px; --radius-lg: 10px; --container: 1200px; --shadow: 0 1px 2px rgba(16,24,40,.06); --shadow-lg: 0 6px 24px rgba(16,24,40,.10); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: "Space Grotesk", "Inter", system-ui, sans-serif; /* Headlines */ --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Consolas", monospace; --ease: cubic-bezier(.16,1,.3,1); --ease-ui: cubic-bezier(.4,0,.2,1); } /* ========================================================================== 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; font-family: var(--sans); font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.18; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; } p { margin: 0 0 1em; } a { color: var(--blue); text-decoration: none; transition: color .15s var(--ease-ui); } a:hover { color: var(--blue-deep); } img { max-width: 100%; height: auto; } ul { margin: 0 0 1em; padding-left: 1.2em; } strong { font-weight: 600; color: var(--ink); } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--blue-tint); } /* Mono-Label-Helfer */ .mono { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); } /* ========================================================================== 3 · Micro-Animationen (Hooks für js/main.js) ========================================================================== */ .reveal { will-change: opacity, transform; } html.anim .reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .55s var(--ease); } html.anim .reveal.is-in { opacity: 1; transform: none; } html.anim .hero-in { opacity: 0; transform: translateY(12px); } html.anim .hero-in.hero-in--show { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s var(--ease); } @media (prefers-reduced-motion: reduce) { html.anim .reveal, html.anim .hero-in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== 4 · Icons (CSS-Masken) ========================================================================== */ .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--award { -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--star { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* --- Sanitär-spezifische Icons --- */ .ico--droplet { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--leak { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--pipe { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--plunger { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--bath { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--shower { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--toilet { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--radiator{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--gauge { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--boiler { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--faucet { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--wrench { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--gear { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--flame { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* --- Rohrreinigung-spezifische Icons --- */ .ico--camera { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--root { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--pump { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ========================================================================== 5 · Topbar ========================================================================== */ .topbar { background: var(--blue); color: #cfe0ee; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; } .topbar__inner { max-width: var(--container); margin: 0 auto; padding: 8px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; text-transform: uppercase; } .topbar a { color: #fff; } .topbar .ico { color: #9fc3e0; margin-right: 6px; } .topbar__right { display: flex; gap: 22px; align-items: center; } @media (max-width: 820px) { .topbar__more, .topbar__right span:first-child { display: none; } } /* ========================================================================== 6 · Header / Navigation ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line-strong); transition: box-shadow .25s var(--ease-ui); } .site-header.is-scrolled { box-shadow: 0 4px 18px rgba(16,24,40,.07); } .header__inner { max-width: var(--container); margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 24px; min-height: 72px; } .brand { display: flex; align-items: center; gap: 12px; flex: none; } .brand:hover { text-decoration: none; } .brand__logo { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--blue); border-radius: 6px; color: var(--blue); flex: none; transition: background .2s var(--ease-ui), color .2s var(--ease-ui); } .brand:hover .brand__logo { background: var(--blue); color: #fff; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.32rem; color: var(--ink); letter-spacing: -.01em; } .brand__claim { font-family: var(--mono); font-weight: 500; font-size: .62rem; color: var(--brass); letter-spacing: .12em; text-transform: uppercase; } .nav { margin-left: auto; } .nav__list { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center; } .nav__list > li { flex: none; position: relative; } .nav__list a { display: block; color: var(--ink-soft); font-weight: 500; font-size: .95rem; white-space: nowrap; padding: 6px 0; transition: color .15s var(--ease-ui); } .nav__list a:hover { color: var(--blue); text-decoration: none; } .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--blue); } .nav__list .sub-menu { list-style: none; position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px; max-height: 76vh; overflow-y: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s var(--ease-ui); } .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: 9px 11px; font-size: .9rem; border-radius: 6px; } .nav__list .sub-menu a:hover { background: var(--blue-tint); } .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: 5px; color: var(--muted); } .header__cta { flex: none; } @media (max-width: 1080px) { .header__cta { display: none; } } .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 6px; 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 var(--ease-ui); } 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); } @media (max-width: 1080px) { .nav-toggle { display: flex; } .nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); margin: 0; background: #fff; transform: translateX(100%); transition: transform .3s var(--ease-ui); z-index: 70; box-shadow: var(--shadow-lg); overflow-y: auto; padding: 86px 18px 24px; } body.nav-open .nav { transform: translateX(0); } .nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .nav__list a { padding: 12px 14px; font-size: 1.02rem; border-bottom: 1px solid var(--line); } .nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--line-strong); border-radius: 0; margin: 2px 0 6px 12px; max-height: none; padding: 0 0 0 6px; } } /* ========================================================================== 7 · Breadcrumbs ========================================================================== */ .breadcrumbs { background: var(--sand); border-bottom: 1px solid var(--line); } .breadcrumbs__inner { max-width: var(--container); margin: 0 auto; padding: 11px 24px; font-family: var(--mono); font-size: .76rem; letter-spacing: .03em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .breadcrumbs a { color: var(--brass); } .breadcrumbs__sep { color: var(--line-strong); } .breadcrumbs__current { color: var(--ink); } /* ========================================================================== 8 · Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--radius); font-family: var(--serif); font-weight: 500; font-size: 1rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background .15s var(--ease-ui), border-color .15s var(--ease-ui), color .15s var(--ease-ui); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .btn .ico { width: 1.05em; height: 1.05em; } .btn--accent, .btn--brass { background: var(--blue); color: #fff; } .btn--accent:hover, .btn--brass:hover { background: var(--blue-deep); color: #fff; text-decoration: none; } .btn--ghost { background: transparent; color: var(--blue); border-color: var(--line-strong); } .btn--ghost:hover { background: var(--blue-tint); color: var(--blue-deep); border-color: var(--blue); text-decoration: none; } .btn--lg { padding: 16px 28px; font-size: 1.08rem; } .section--dark .btn--ghost, .aside-card--accent .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); } .section--dark .btn--ghost:hover, .aside-card--accent .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; } /* ========================================================================== 9 · Sektionen ========================================================================== */ .section { padding: 80px 0; border-bottom: 1px solid var(--line); } .section--alt { background: var(--sand); } .section--tint { background: var(--blue-tint); } .section--dark { background: var(--blue); color: #cfe0ee; border-bottom: none; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark a { color: #fff; } .section__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; } .section__inner--narrow { max-width: 940px; } .section__kicker { font-family: var(--mono); font-weight: 500; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); margin: 0 0 .8em; display: inline-flex; align-items: center; gap: 9px; } .section--dark .section__kicker { color: #8fd0d0; } .section__title { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 .45em; } .section__lead { font-size: 1.06rem; color: var(--muted); max-width: 64ch; margin: 0 0 1.6em; } .section--dark .section__lead { color: #bcd3e8; } .section__head { max-width: 720px; margin: 0 0 2.4em; } /* ========================================================================== 10 · Hero ========================================================================== */ .hero { position: relative; background: var(--paper); padding: 76px 0 70px; border-bottom: 1px solid var(--line-strong); overflow: hidden; } .hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .hero__kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin: 0 0 18px; } .hero__kicker .ico { color: var(--brass); } .hero__title { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; max-width: 18ch; margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.02em; } .hero__lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 58ch; margin: 0 0 1.7em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* hero badges → Hairline-Datenzeile */ .hero__badges { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); max-width: 560px; } .hero__badges li { display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: .92rem; color: var(--ink-soft); padding: 11px 0; border-bottom: 1px solid var(--line); } .hero__badges .ico { color: var(--brass); width: 1.15em; height: 1.15em; flex: none; } @media (min-width: 560px) { .hero__badges { grid-template-columns: 1fr 1fr; column-gap: 28px; } } /* asymmetrischer Split-Hero */ .hero--split .hero__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 940px) { .hero--split .hero__inner { grid-template-columns: 1.05fr .95fr; gap: 48px; } } /* Hero-Figur / Schema-Rahmen */ .hero__figure, .hero__area, .quickhelp { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand); box-shadow: var(--shadow); padding: 30px; } .hero__figure { min-height: 320px; display: flex; flex-direction: column; } .hero__figure-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1.5px solid var(--blue); border-radius: 8px; background: #fff; color: var(--blue); margin-bottom: 18px; } .hero__figure-icon .ico { width: 32px; height: 32px; } .hero__figure-label { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; margin: 0 0 16px; } .hero__figure-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .hero__figure-facts li { display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: .9rem; color: var(--ink-soft); } .hero__figure-facts .ico { color: var(--brass); flex: none; width: 1.1em; height: 1.1em; } /* Schema-Eck-Marker (Home-Hero) */ .hero__figure .corner { position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--brass); } .hero__figure .corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; } .hero__figure .corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; } .hero__figure .corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; } .hero__figure .corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; } .hero__figure .hero__schema-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px; } .hero__schema { width: 100%; height: auto; display: block; flex: 1; } /* City-Hero Einsatzgebiet */ .hero__area-title { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); font-weight: 500; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; } .hero__area-title .ico { color: var(--brass); } .hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 16px; } .hero__chips a { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 13px; font-weight: 500; font-size: .85rem; color: var(--ink); background: #fff; transition: border-color .15s var(--ease-ui), background .15s var(--ease-ui), color .15s var(--ease-ui); } .hero__chips a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); text-decoration: none; } .hero__area-note { font-size: .86rem; color: var(--muted); margin: 0; } /* Quickhelp (Telefon-Panel, falls genutzt) */ .quickhelp__title { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; 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(--blue); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; padding: 14px; border-radius: 8px; margin: 16px 0; font-variant-numeric: tabular-nums; } .quickhelp__call:hover { background: var(--blue-deep); color: #fff; text-decoration: none; } .quickhelp__router-label { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); font-weight: 500; margin: 0 0 9px; } .quickhelp__router { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; } .quickhelp__router a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: .85rem; font-weight: 500; color: var(--ink); text-align: center; transition: border-color .15s var(--ease-ui), background .15s var(--ease-ui), color .15s var(--ease-ui); } .quickhelp__router a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); text-decoration: none; } .quickhelp__router .ico { width: 1.5em; height: 1.5em; color: var(--blue); } /* ========================================================================== 11 · Grid + Cards (Hairline-Raster) ========================================================================== */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: border-color .15s var(--ease-ui), background .15s var(--ease-ui); } .card:hover { border-color: var(--blue); background: var(--blue-tint); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--blue); border-radius: 8px; background: #fff; color: var(--blue); margin-bottom: 16px; } .card__icon .ico { width: 1.45em; height: 1.45em; } .card__title { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; margin: 0 0 .4em; } .card__text { color: var(--muted); margin: 0 0 1em; font-size: .96rem; } .card__link { font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 7px; } .card__link:hover { text-decoration: none; gap: 10px; color: var(--blue-deep); } .card--link { display: block; color: inherit; } .card--link:hover { text-decoration: none; } /* Leistungs-Kachelwahl */ .pests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (max-width: 920px) { .pests { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .pests { grid-template-columns: 1fr; } } .pest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 14px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; transition: background .15s var(--ease-ui); } .pest:hover { background: var(--blue-tint); text-decoration: none; } .pest .ico { width: 30px; height: 30px; color: var(--blue); } /* City-Hub (Einsatzgebiet: Regionen = Stadt + Stadtteile) */ .cityhub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 900px) { .cityhub { grid-template-columns: 1fr; } } .cityhub__region { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px; transition: border-color .15s var(--ease-ui); } .cityhub__region:hover { border-color: var(--line-strong); } .cityhub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .cityhub__h { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--serif); font-size: 1.12rem; font-weight: 700; line-height: 1.2; } .cityhub__h .ico { width: 1.1em; height: 1.1em; color: var(--brass); flex: none; } .cityhub__num { font-family: var(--mono); font-weight: 500; font-size: .82rem; letter-spacing: .05em; color: var(--brass); } .cityhub__count { flex: none; font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--line-strong); padding: 3px 9px; border-radius: 5px; white-space: nowrap; } .cityhub__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @media (max-width: 480px) { .cityhub__grid { grid-template-columns: 1fr; } } .cityhub__main-li { grid-column: 1 / -1; } .cityhub__link { display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 6px; background: var(--sand); border: 1px solid transparent; color: var(--ink-soft); font-size: .92rem; font-weight: 500; text-decoration: none; transition: background .15s var(--ease-ui), color .15s var(--ease-ui), border-color .15s var(--ease-ui); } .cityhub__link:hover { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); text-decoration: none; } .cityhub__link .ico { width: 1em; height: 1em; flex: none; } .cityhub__link--main { background: var(--blue); color: #fff; font-weight: 700; } .cityhub__link--main:hover { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); } /* ========================================================================== 12 · Steps (nummerierte Zeilen) ========================================================================== */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); } .step { counter-increment: step; position: relative; display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; } .step__num { font-family: var(--mono); font-weight: 500; font-size: 1rem; color: var(--brass); letter-spacing: .05em; padding-top: 3px; } .step__num::before { content: counter(step, decimal-leading-zero); } .step__title { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; margin: 0 0 .35em; } .step p { color: var(--muted); font-size: .98rem; margin: 0; } .detail .steps, .detail .step { grid-template-columns: auto 1fr; } /* ========================================================================== 13 · Checklist / Signs (neutraler Marker) ========================================================================== */ .checklist { list-style: none; padding: 0; margin: 0 0 1em; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; } .checklist li { position: relative; padding: 14px 18px 14px 46px; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .checklist li:last-child { border-bottom: none; } .checklist li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 12px; height: 12px; border: 1.5px solid var(--brass); border-radius: 2px; } .section--dark .checklist { background: transparent; border-color: rgba(255,255,255,.18); } .section--dark .checklist li { color: #cfe0ee; border-color: rgba(255,255,255,.14); } .signs { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; } .signs li { position: relative; padding-left: 26px; color: var(--ink-soft); } .signs li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--brass); border-radius: 2px; } /* ========================================================================== 14 · Badges / Stats ========================================================================== */ .badges { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 15px; font-weight: 500; font-size: .88rem; color: var(--ink); } .badge .ico { color: var(--brass); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { background: var(--blue); padding: 30px 22px; display: flex; flex-direction: column; gap: 6px; } .stat__num { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.4rem); color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .section:not(.section--dark) .stat__num { color: var(--blue); } .stat__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #bcd3e8; } .section:not(.section--dark) .stat__label { color: var(--muted); } /* ========================================================================== 15 · Split / Quote / Notice ========================================================================== */ .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 30px; } } .split__media { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand); min-height: 280px; padding: 32px; display: flex; flex-direction: column; justify-content: center; } .split__media .btn { align-self: flex-start; } /* Bewertungen = Platzhalter-Stil */ .quote { border: 1px dashed var(--placeholder-line); border-radius: var(--radius); background: var(--sand); padding: 30px 32px; } .quote__text { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 .7em; line-height: 1.55; } .quote__cite { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--muted); } .quote__stars { color: var(--placeholder-line); display: inline-flex; gap: 4px; margin-bottom: .6em; } .notice { border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 24px; margin: 1.5em 0; border-left: 3px solid var(--brass); background: var(--sand); } .notice h3 { font-family: var(--serif); margin: 0 0 .35em; display: flex; align-items: center; gap: 9px; font-size: 1.08rem; } .notice p:last-child { margin-bottom: 0; } .notice--info { border-left-color: var(--blue); background: var(--blue-tint); } .notice--warn { border-left-color: #C2740F; background: #FBF3EA; } .notice--warn h3 { color: #9C5B08; } /* ========================================================================== 16 · FAQ ========================================================================== */ .faq { display: grid; gap: 12px; } .faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .faq__item[open] { border-color: var(--line-strong); } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::before, .faq__item summary::after { content: ""; position: absolute; right: 24px; top: 50%; background: var(--blue); border-radius: 2px; transition: opacity .2s var(--ease-ui), transform .2s var(--ease-ui); } .faq__item summary::before { width: 14px; height: 2px; transform: translateY(-50%); } .faq__item summary::after { width: 2px; height: 14px; right: 30px; transform: translateY(-50%); } .faq__item[open] summary::after { opacity: 0; } .faq__body { overflow: hidden; transition: height .3s var(--ease-ui); } .faq__body p { padding: 0; margin: 0 0 1em; color: var(--ink-soft); } .faq__body { padding: 0 22px 4px; } .faq__body :first-child { margin-top: 0; } .faq__item[open] .faq__body { padding-bottom: 10px; } /* ========================================================================== 17 · CTA-Banner ========================================================================== */ .cta-banner { background: var(--blue); color: #fff; border-radius: var(--radius); padding: 48px 44px; text-align: center; } .cta-banner h2 { color: #fff; margin: 0 0 .4em; } .cta-banner p { color: #cfe0ee; max-width: 56ch; margin: 0 auto 1.4em; } .cta-banner__actions, .cta-banner .hero__ctas { justify-content: center; display: flex; flex-wrap: wrap; gap: 14px; } /* ========================================================================== 18 · Formular (selten genutzt; Telefon ist Konversion) ========================================================================== */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; } @media (max-width: 640px) { .form { grid-template-columns: 1fr; padding: 22px; } } .form__field { display: flex; flex-direction: column; gap: 6px; } .form__field--full { grid-column: 1 / -1; } .form label { font-weight: 500; font-size: .92rem; color: var(--ink); } .form input, .form select, .form textarea { font-family: var(--sans); font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,72,122,.14); } .form textarea { min-height: 140px; resize: vertical; } .form__consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); } .form__submit { grid-column: 1 / -1; } .form__hp { position: absolute; left: -9999px; } .req { color: var(--brass); } .form-result { grid-column: 1 / -1; padding: 14px 18px; border-radius: 6px; font-weight: 500; margin-bottom: 4px; } .form-result--ok { background: #E9F3EE; color: #1d6042; border: 1px solid #bce0cd; } .form-result--error { background: #FBECEC; color: #98342c; border: 1px solid #f1c6c1; } /* ========================================================================== 19 · Verzeichnis + Live-Suche ========================================================================== */ .areasearch__field { position: relative; max-width: 460px; margin: 0 0 26px; } .areasearch__field input { width: 100%; font-size: 1.02rem; padding: 13px 16px 13px 44px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; } .areasearch__field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,72,122,.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, 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: 9px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-weight: 500; color: var(--ink); transition: border-color .15s var(--ease-ui), color .15s var(--ease-ui); } .verzeichnis a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; background: var(--blue-tint); } .verzeichnis a::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--brass); -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); } /* ========================================================================== 20 · Detailseiten-Bausteine ========================================================================== */ .infolist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .infolist li { display: flex; gap: 14px; align-items: flex-start; } .infolist .ico { color: var(--brass); width: 1.4em; height: 1.4em; flex: none; margin-top: 2px; } .infolist strong { display: block; color: var(--ink); } .infolist span, .infolist a { color: var(--muted); } .ph-box { background: var(--sand); border: 1px dashed var(--placeholder-line); border-radius: var(--radius); min-height: 200px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-weight: 500; text-align: center; padding: 24px; } .ph-box .ico { width: 2em; height: 2em; color: var(--placeholder-line); } .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @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: 80px; height: 80px; border-radius: 8px; background: var(--blue-tint); border: 1px solid var(--line); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--blue); } .avatar .ico { width: 2em; height: 2em; } .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: 9px 15px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-weight: 500; font-size: .88rem; color: var(--ink); transition: border-color .15s var(--ease-ui), color .15s var(--ease-ui); } .tags a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; background: var(--blue-tint); } .tags .ico { color: var(--brass); } .legal h2 { font-family: var(--serif); font-size: 1.25rem; margin: 1.6em 0 .4em; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--ink-soft); } .placeholder { outline: 1px dashed var(--placeholder-line); outline-offset: 3px; border-radius: 4px; color: var(--muted); } /* ========================================================================== 21 · In-Page-Navigation (Detailseiten) ========================================================================== */ .inpage-nav { position: sticky; top: 72px; z-index: 30; background: rgba(255,255,255,.95); backdrop-filter: saturate(150%) blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); } .inpage-nav__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .inpage-nav__inner::-webkit-scrollbar { display: none; } .inpage-nav a { padding: 14px 12px; font-family: var(--mono); font-weight: 500; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s var(--ease-ui), border-color .15s var(--ease-ui); } .inpage-nav a:hover { color: var(--ink); text-decoration: none; } .inpage-nav a.is-active { color: var(--blue); border-bottom-color: var(--blue); } @media (max-width: 720px) { .inpage-nav { display: none; } } /* Detail-Layout: Inhalt + Sticky-Aside */ .detail { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; } @media (max-width: 980px) { .detail { grid-template-columns: 1fr; gap: 28px; } } .detail__main > .detail-sec { padding: 40px 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.4rem, 2.4vw, 1.7rem); } .detail__aside { display: grid; gap: 18px; position: sticky; top: 100px; } @media (max-width: 980px) { .detail__aside { position: static; } } .aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .aside-card--accent { background: var(--blue); color: #fff; border-color: var(--blue); } .aside-card--accent h3, .aside-card--accent p { color: #fff; } .aside-card h3 { font-family: var(--serif); font-size: 1.1rem; 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(--brass); flex: none; margin-top: 2px; } .aside-facts strong { display: block; color: var(--ink); font-size: .95rem; } .aside-facts span { color: var(--muted); font-size: .86rem; } /* ========================================================================== 22 · Routen / Feature (Startseite-Optionen) ========================================================================== */ .routes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 720px) { .routes { grid-template-columns: 1fr; } } .route { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; color: inherit; transition: border-color .15s var(--ease-ui), background .15s var(--ease-ui); } .route:hover { border-color: var(--blue); background: var(--blue-tint); text-decoration: none; } .route__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1.5px solid var(--blue); border-radius: 8px; background: #fff; color: var(--blue); margin-bottom: 16px; } .route__icon .ico { width: 1.6em; height: 1.6em; } .route h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .3em; } .route p { color: var(--muted); margin: 0 0 1em; } .route__cta { font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 7px; } /* ========================================================================== 23 · Mega-Menü (Leistungen / Städte) ========================================================================== */ @media (min-width: 1081px) { .nav__list .menu-item.mega > .sub-menu { width: 580px; max-height: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 12px; } .nav__list .menu-item.mega > .sub-menu a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; } .nav__list .menu-item.mega > .sub-menu .ico { width: 1.25em; height: 1.25em; color: var(--brass); flex: none; } .nav__list .menu-item.mega > .sub-menu .mega-title { grid-column: 1 / -1; } } .nav__list .sub-menu .ico { color: var(--brass); } /* Titel-/Übersicht-Link oben im Mega-Menü */ .nav__list .sub-menu .mega-title { margin-bottom: 4px; border-bottom: 1px solid var(--line); } .nav__list .sub-menu .mega-title > a { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); border-radius: 0; } .nav__list .sub-menu .mega-title > a:hover { background: transparent; color: var(--blue); } /* ========================================================================== 24 · Pre-Footer-CTA-Band ========================================================================== */ .prefooter { background: var(--sand); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .prefooter__inner { max-width: var(--container); margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 1.4fr auto; gap: 36px; align-items: center; } @media (max-width: 760px) { .prefooter__inner { grid-template-columns: 1fr; } } .prefooter__kicker { font-family: var(--mono); font-weight: 500; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin: 0 0 .7em; } .prefooter__title { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 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; } /* ========================================================================== 25 · Footer ========================================================================== */ .site-footer { background: #fff; color: var(--ink-soft); padding: 72px 0 0; border-top: 1px solid var(--line-strong); } .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 { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin: 0 0 1.2em; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .site-footer a { color: var(--ink-soft); font-weight: 400; } .site-footer a:hover { color: var(--blue); } .footer__name { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 1.2rem; display: block; margin-bottom: .6em; } .footer__pitch { font-size: .94rem; color: var(--muted); 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(--brass); } .footer__contact a { font-variant-numeric: tabular-nums; } .footer__bottom { border-top: 1px solid var(--line); } .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-family: var(--mono); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .footer__legal { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; } .footer__legal a { color: var(--blue); } /* ========================================================================== 26 · Mobile Action-Bar (Sticky Call-Bar) + To-Top ========================================================================== */ .actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: none; align-items: center; gap: 12px; padding: 10px 16px; background: var(--blue); color: #fff; box-shadow: 0 -2px 12px rgba(16,24,40,.18); } .actionbar__txt { font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; flex: 1; color: #cfe0ee; } .actionbar__txt .ico { color: #9fc3e0; } .actionbar__call { background: #fff; color: var(--blue); padding: 12px 18px; font-family: var(--serif); font-weight: 700; } .actionbar__call:hover { background: #fff; color: var(--blue-deep); } .actionbar__ghost { border: 1px solid rgba(255,255,255,.42); color: #fff; padding: 12px 14px; } @media (max-width: 1080px) { .actionbar { display: flex; } .actionbar__ghost { display: none; } body { padding-bottom: 66px; } .actionbar__call { flex: 1; justify-content: center; } } .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 46px; height: 46px; border-radius: 8px; border: none; background: var(--blue); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s var(--ease-ui); 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); } .to-top:hover { background: var(--blue-deep); } @media (max-width: 1080px) { .to-top { bottom: 78px; } } /* ========================================================================== 27 · Utilities ========================================================================== */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .lead { font-size: 1.1rem; color: var(--ink-soft); } .muted { color: var(--muted); }