/* Theme Name: A1 Elektro-Notdienst – Signalrot (Layout J) Theme URI: http://localhost/a1-elektriker.de Description: 24h-Elektro-Notdienst-Pure-Play (A1-Marke). Eigenständiges Design zur Footprint-Trennung von der Schwester-Domain: Farbwelt Signalrot + Graphit/Anthrazit + Weiß, Schrift IBM Plex Sans / IBM Plex Mono (self-hosted, DSGVO-konform), Layout-Variante J mit Notfall-Triage-Band. Micro-Animationen (Scroll-Reveal, Count-up), JSON-LD (Electrician/Breadcrumb/FAQ). Inhalte werden separat eingepflegt. Author: Beratung & Service Thomas Version: 1.1 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Text Domain: elektriker */ /* ========================================================================== 0 · Fonts (self-hosted, DSGVO-konform) ========================================================================== */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibmplexsans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibmplexsans-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibmplexsans-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibmplexsans-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibmplexmono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibmplexmono-600.woff2") format("woff2"); } /* ========================================================================== 1 · Design-Tokens (Layout J – Signalrot + Graphit/Anthrazit + Weiß) Variablennamen bleiben aus Kompatibilität erhalten; --blue trägt jetzt das Signalrot (Primär), --blue-700 das Graphit (dunkle Bänder), --amber den helleren Rot-Akzent für dunkle Flächen. ========================================================================== */ :root { --bg: #ffffff; --bg-2: #f4f5f7; /* helle Wechselflächen (graphit-getönt) */ --surface: #ffffff; /* Karten */ --surface-2: #eceef1; --line: #e3e6ea; --line-strong: #ccd1d8; --ink: #16191d; /* Überschriften / Graphit-Anthrazit */ --text: #393f47; /* Fließtext */ --muted: #6a727d; --blue: #e10915; /* Primär = Signalrot */ --blue-deep: #b50710; --blue-700: #16191d; /* dunkle Bänder = Graphit/Anthrazit */ --blue-soft: #fdeaeb; /* zarter Rot-Ton (Icon-Chips, Hover) */ --amber: #ff5a5f; /* Akzent auf dunklen Flächen (helleres Rot) */ --amber-deep: #c20912; --amber-soft: rgba(225,9,21,.12); --ondark: var(--amber); /* Icon-/Hover-Farbe auf dunklen Flächen (Skins überschreiben) */ --warn: #c20912; /* Notfall */ --warn-soft: rgba(225,9,21,.09); --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; --container: 1200px; --shadow: 0 1px 2px rgba(18,20,24,.05), 0 12px 30px rgba(18,20,24,.08); --shadow-lg: 0 26px 60px rgba(18,20,24,.16); --glow: 0 0 0 4px var(--amber-soft); --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --display: "IBM Plex Sans", var(--sans); --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --ease: cubic-bezier(.2,.7,.2,1); --dotgrid: radial-gradient(rgba(18,20,24,.05) 1px, transparent 1px); } /* Display-Schrift ist hier dieselbe Familie wie der Body (IBM Plex Sans), wird aber kräftiger gesetzt – klare, technische Notdienst-Anmutung. */ h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; } /* ========================================================================== 2 · Reset / Base (gut lesbar – größere Basis-Schrift) ========================================================================== */ *, *::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.72; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.14; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.015em; } p { margin: 0 0 1em; } a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--blue-deep); text-decoration: underline; } img { max-width: 100%; height: auto; } ul { margin: 0 0 1em; padding-left: 1.2em; } strong { font-weight: 700; color: var(--ink); } .hl { color: var(--blue); } :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--blue-soft); } /* ========================================================================== 3 · Micro-Animationen (Progressive Enhancement) ========================================================================== */ .reveal { will-change: opacity, transform; } /* Zurückhaltende Mikro-Animation (Research-Brief): kurz, ease-out, kleiner Versatz. Reduced-Motion zeigt immer den Endzustand – nichts bleibt unsichtbar. */ html.anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity .26s ease, transform .26s cubic-bezier(.4,0,.2,1); } html.anim .reveal.is-in { opacity: 1; transform: none; } html.anim .hero-in { opacity: 0; transform: translateY(10px); } html.anim .hero-in.hero-in--show { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1); } @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,"); } /* --- Elektriker-spezifisch --- */ .ico--bolt { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--plug { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--bulb { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--panel { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--ev { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--solar { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--smarthome { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--tools { -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--network { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .ico--building{ -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ========================================================================== 5 · Topbar (Tiefblau-Band) ========================================================================== */ .topbar { background: var(--ink); color: #c5d2e4; font-family: var(--mono); font-size: .76rem; } .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(--ondark); margin-right: 5px; } .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: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease); } .site-header.is-scrolled { box-shadow: 0 8px 26px rgba(20,35,60,.1); } .header__inner { max-width: var(--container); margin: 0 auto; padding: 13px 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; transition: transform .4s var(--ease); } /* Logo folgt der Design-Variante (Skin überschreibt --ink/--blue). */ .brand__logo .logo-box { fill: var(--ink); } .brand__logo .logo-bolt { fill: var(--blue); } .brand:hover .brand__logo { transform: translateY(-1px); } .brand__text { display: flex; flex-direction: column; line-height: 1.12; } .brand__name { font-family: var(--display); font-weight: 700; font-size: 1.16rem; color: var(--ink); letter-spacing: -.02em; } .brand__claim { font-family: var(--mono); font-size: .68rem; color: var(--muted); 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; position: relative; } .nav__list a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); } .nav__list a:hover { background: var(--blue-soft); color: var(--blue-deep); text-decoration: none; } .nav__list .current-menu-item > a, .nav__list .current-page-ancestor > a { color: var(--blue-deep); } .nav__list .sub-menu { list-style: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; 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(8px); transition: .22s var(--ease); } .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; font-weight: 600; border-radius: 7px; color: var(--ink); } .nav__list .sub-menu .ico { color: var(--blue); } .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: 46px; height: 42px; border: 1px solid var(--line-strong); 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 var(--ease); } 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 .32s var(--ease); z-index: 70; box-shadow: var(--shadow-lg); overflow-y: auto; padding: 86px 18px 24px; border-left: 1px solid var(--line); } 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; } .nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--line); border-radius: 0; margin: 2px 0 6px 12px; max-height: none; padding: 0 0 0 6px; } } @media (min-width: 1081px) { .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; } } /* ========================================================================== 7 · Breadcrumbs ========================================================================== */ .breadcrumbs { background: var(--bg-2); border-bottom: 1px solid var(--line); } .breadcrumbs__inner { max-width: var(--container); margin: 0 auto; padding: 11px 24px; font-family: var(--mono); font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .breadcrumbs a { color: var(--blue); } .breadcrumbs__sep { color: var(--line-strong); } .breadcrumbs__current { color: var(--ink); } /* ========================================================================== 8 · Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 23px; border-radius: 10px; font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn .ico { width: 1.05em; height: 1.05em; } .btn--accent { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(225,9,21,.26); } .btn--accent:hover { background: var(--blue-deep); color: #fff; box-shadow: 0 12px 28px rgba(225,9,21,.34); } .btn--amber { background: var(--amber); color: #fff; box-shadow: 0 8px 20px rgba(225,9,21,.28); } .btn--amber:hover { background: var(--amber-deep); color: #fff; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-soft); } .btn--lg { padding: 16px 30px; font-size: 1.08rem; border-radius: 12px; } .section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); } .section--dark .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } /* ========================================================================== 9 · Sektionen ========================================================================== */ .section { padding: 86px 0; } .section--flush { padding-top: 0; } .section--alt { background: var(--bg-2); } .section--surface { background: var(--surface-2); } .section--dark { background: var(--blue-700); color: #cfe0ff; position: relative; overflow: hidden; } .section--dark::after { content: ""; position: absolute; inset: 0; background: var(--dotgrid); background-size: 24px 24px; opacity: .5; pointer-events: 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: 800px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .section__kicker { font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin: 0 0 .8em; display: inline-flex; align-items: center; gap: 8px; } .section--dark .section__kicker { color: var(--amber); } .section__title { font-size: clamp(1.85rem, 3.6vw, 2.6rem); font-weight: 600; margin: 0 0 .45em; } .section__lead { font-size: 1.14rem; color: var(--muted); max-width: 62ch; margin: 0 0 1.7em; } .section--dark .section__lead { color: #b9cdf0; } .section__head { text-align: center; max-width: 680px; margin: 0 auto 2.6em; } .section__head .section__kicker { display: inline-flex; } .section__head .section__lead { margin-left: auto; margin-right: auto; } /* ========================================================================== 10 · Hero (vollbreit – kein Splithero mehr) ========================================================================== */ .hero { position: relative; background: var(--bg); padding: 88px 0 76px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 440px at 90% -12%, var(--blue-soft), transparent 62%), radial-gradient(540px 360px at 4% 110%, var(--amber-soft), transparent 60%), var(--dotgrid); background-size: auto, auto, 26px 26px; pointer-events: none; } .hero__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .hero__kicker { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-strong); color: var(--blue-deep); font-family: var(--mono); font-weight: 700; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin: 0 0 22px; box-shadow: var(--shadow); } .hero__kicker .ico { color: var(--blue); } .hero__title { font-family: var(--display); font-size: clamp(2.5rem, 5.6vw, 4rem); font-weight: 600; max-width: 18ch; margin: 0 0 .4em; line-height: 1.05; letter-spacing: -.02em; } .hero__lead { font-size: clamp(1.12rem, 1.7vw, 1.32rem); color: var(--text); max-width: 58ch; margin: 0 0 1.9em; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__badges { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 30px 0 0; padding: 0; list-style: none; } .hero__badges li { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .98rem; color: var(--ink); } /* Solides Glyph in Akzentfarbe – die Maske färbt sich über background, daher hier direkt var(--blue) (nicht über color); kein blasser Chip mehr. */ .hero__badges .ico { background: var(--blue); width: 1.3em; height: 1.3em; } /* Split-Hero bleibt für andere Vorlagen verfügbar */ .hero--split .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; } @media (max-width: 940px) { .hero--split .hero__inner { grid-template-columns: 1fr; gap: 38px; } } /* Faktenleiste direkt unter dem Hero */ .factbar { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin-top: -42px; position: relative; z-index: 3; } @media (max-width: 760px) { .factbar { grid-template-columns: 1fr 1fr; margin-top: 0; } } @media (max-width: 440px) { .factbar { grid-template-columns: 1fr; } } .factbar__item { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid var(--line); } .factbar__item:last-child { border-right: none; } @media (max-width: 760px) { .factbar__item:nth-child(2n) { border-right: none; } .factbar__item:not(:last-child) { border-bottom: 1px solid var(--line); } } .factbar__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: none; } .factbar__icon .ico { width: 1.5em; height: 1.5em; } .factbar__val { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.04rem; line-height: 1.15; } .factbar__label { font-family: var(--mono); font-size: .72rem; color: var(--muted); } /* ========================================================================== 11 · Grid + Cards + Tiles ========================================================================== */ .grid { display: grid; gap: 22px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 920px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 13px; background: var(--blue-soft); color: var(--blue); margin-bottom: 18px; transition: background .25s var(--ease), color .25s var(--ease); } .card:hover .card__icon { background: var(--blue); color: #fff; } .card__icon .ico { width: 1.55em; height: 1.55em; } .card__title { font-size: 1.22rem; margin: 0 0 .4em; } .card__text { color: var(--muted); margin: 0 0 1em; font-size: 1rem; } .card__link { font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; } .card__link:hover { text-decoration: none; gap: 10px; } /* Link-Karten als Flex-Spalte, damit „Mehr erfahren" über alle Karten einer Reihe bündig unten sitzt (gleiche optische Linie, auch bei unterschiedlich langem Text). */ .card--link { display: flex; flex-direction: column; color: inherit; } .card--link:hover { text-decoration: none; } .pests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @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: 12px; padding: 26px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .pest:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: var(--shadow-lg); text-decoration: none; } .pest .ico { width: 30px; height: 30px; color: var(--blue); transition: transform .3s var(--ease); } .pest:hover .ico { transform: scale(1.12); } /* ========================================================================== 12 · Steps ========================================================================== */ /* Auto-fit: Karten füllen die verfügbare Breite und passen sich der Schrittzahl an (3 Schritte = 3 gleich breite Spalten statt 3 schmale in einem 4er-Raster). */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } @media (max-width: 600px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .step__num { counter-increment: step; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-deep); font-family: var(--mono); font-weight: 700; font-size: 1.1rem; margin-bottom: 16px; } .step__num::before { content: "0" counter(step); } .step__title { font-size: 1.12rem; margin: 0 0 .35em; } .step p { color: var(--muted); font-size: 1rem; margin: 0; } /* ========================================================================== 13 · Checklist / Signs ========================================================================== */ .checklist { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 13px; } .checklist li { position: relative; padding-left: 34px; color: var(--text); } .checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 23px; height: 23px; border-radius: 50%; background: var(--blue-soft); } .checklist li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 15px; height: 15px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .signs { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; } .signs li { position: relative; padding-left: 30px; color: var(--text); } .signs li::before { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); } /* ========================================================================== 14 · Badges / Stats ========================================================================== */ .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: 600; font-size: .92rem; color: var(--ink); box-shadow: var(--shadow); } .badge .ico { color: var(--blue); } .badge--amber .ico { color: var(--amber-deep); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat__num { font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--amber); line-height: 1; letter-spacing: -.02em; } .section:not(.section--dark) .stat__num { color: var(--blue); } .stat__label { color: #b9cdf0; font-size: .96rem; font-weight: 600; margin-top: .5em; } .section:not(.section--dark) .stat__label { color: var(--muted); } /* ========================================================================== 15 · Split / Quote / Notice ========================================================================== */ .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } } .split__media { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 300px; padding: 34px; display: flex; flex-direction: column; justify-content: center; } .quote { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow); } .quote__text { font-size: 1.22rem; font-family: var(--display); font-weight: 500; color: var(--ink); margin: 0 0 .7em; line-height: 1.5; } .quote__cite { color: var(--muted); font-weight: 600; font-style: normal; font-size: .94rem; } .quote__stars { color: var(--amber); display: inline-flex; gap: 3px; margin-bottom: .6em; } .notice { border-radius: var(--radius); padding: 24px 28px; margin: 1.6em 0; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); } .notice h3 { margin: 0 0 .35em; display: flex; align-items: center; gap: 9px; } .notice p:last-child { margin-bottom: 0; } .notice--info { background: var(--blue-soft); border-color: #f6cdd0; } .notice--info h3 { color: var(--blue-deep); } /* 112-Gefahren-Band (Layout J): kräftiges Graphit mit Signalrot-Kante – maximale Aufmerksamkeit. */ .notice--warn { background: var(--ink); border: 1px solid #2b2f36; border-left: 4px solid var(--blue); color: #e7e9ec; box-shadow: var(--shadow); } .notice--warn h3 { color: #fff; } .notice--warn p { color: #c9cdd3; } .notice--warn a:not(.btn) { color: #ff9a9e; } /* ========================================================================== 16 · FAQ ========================================================================== */ .faq { display: grid; gap: 12px; } .faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: border-color .2s var(--ease); } .faq__item[open] { border-color: var(--line-strong); } .faq__item summary { list-style: none; cursor: pointer; padding: 20px 54px 20px 24px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--blue); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; transition: transform .3s var(--ease); } .faq__item[open] summary::after { transform: translateY(-50%) rotate(180deg); } .faq__body { overflow: hidden; transition: height .3s var(--ease); } .faq__body p { padding: 0; margin: 0 0 1em; color: var(--text); } .faq__body { padding: 0 24px 4px; } .faq__body :first-child { margin-top: 0; } .faq__item[open] .faq__body { padding-bottom: 8px; } /* ========================================================================== 17 · CTA / Pre-Footer ========================================================================== */ .prefooter { background: var(--blue-700); color: #cfe0ff; position: relative; overflow: hidden; } .prefooter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 220px at 82% -40%, rgba(242,164,23,.18), transparent 60%), var(--dotgrid); background-size: auto, 24px 24px; pointer-events: none; } .prefooter__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 56px 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-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--amber); margin: 0 0 .5em; } .prefooter__title { font-size: clamp(1.6rem, 2.7vw, 2.2rem); margin: 0 0 .3em; color: #fff; } .prefooter__text { color: #b9cdf0; margin: 0; max-width: 54ch; } .prefooter__actions { display: flex; flex-wrap: wrap; gap: 12px; } .prefooter .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } .prefooter .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } /* ========================================================================== 18 · Formular ========================================================================== */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); } @media (max-width: 640px) { .form { grid-template-columns: 1fr; padding: 24px; } } .form__field { display: flex; flex-direction: column; gap: 6px; } .form__field--full { grid-column: 1 / -1; } .form label { font-weight: 600; font-size: .94rem; color: var(--ink); } .form input, .form select, .form textarea { font-family: var(--sans); font-size: 1.02rem; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .form textarea { min-height: 140px; resize: vertical; } .form__consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .92rem; color: var(--muted); } .form__consent input { margin-top: 3px; accent-color: var(--blue); } .form__submit { grid-column: 1 / -1; } .form__hp { position: absolute; left: -9999px; } .req { color: var(--warn); } .form-result { grid-column: 1 / -1; padding: 14px 18px; border-radius: 9px; font-weight: 600; margin-bottom: 4px; } .form-result--ok { background: var(--blue-soft); color: var(--blue-deep); border: 1px solid #cfe0fb; } .form-result--error { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(217,72,42,.35); } /* ========================================================================== 19 · Verzeichnis + Live-Suche ========================================================================== */ .areasearch__field { position: relative; max-width: 460px; margin: 0 0 26px; } .areasearch__field input { width: 100%; font-size: 1.04rem; padding: 14px 16px 14px 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); } .areasearch__field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .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: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .verzeichnis a:hover { border-color: var(--blue); color: var(--blue-deep); text-decoration: none; transform: translateX(3px); } .verzeichnis a::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--blue); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; } .areasearch__none { color: var(--muted); } /* ========================================================================== 20 · Detailseiten-Bausteine ========================================================================== */ .infolist { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .infolist li { display: flex; gap: 14px; align-items: flex-start; } .infolist .ico { color: var(--blue); width: 1.55em; height: 1.55em; flex: none; margin-top: 2px; } .infolist strong { display: block; color: var(--ink); } .infolist span, .infolist a { color: var(--muted); } .ph-box { background: var(--bg-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); min-height: 240px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-family: var(--mono); font-size: .82rem; text-align: center; padding: 24px; } .ph-box .ico { width: 2em; height: 2em; color: var(--line-strong); } .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 760px) { .team { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .team { grid-template-columns: 1fr; } } .team .card { text-align: center; } .avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--blue-soft); border: 1px solid var(--line); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--blue); } .avatar .ico { width: 2.1em; height: 2.1em; } .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); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: .92rem; color: var(--ink); box-shadow: var(--shadow); transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .tags a:hover { border-color: var(--blue); color: var(--blue-deep); text-decoration: none; transform: translateY(-2px); } .tags .ico { color: var(--blue); } .legal h2 { font-size: 1.3rem; margin: 1.6em 0 .4em; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--text); } /* ========================================================================== 21 · UX: Routen, Feature, Gallery, In-Page-Nav, Detail (+ legacy quickhelp) ========================================================================== */ .routes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 720px) { .routes { grid-template-columns: 1fr; } } .route { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; color: inherit; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--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: 15px; background: var(--blue-soft); color: var(--blue); margin-bottom: 18px; transition: transform .3s var(--ease); } .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-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 7px; transition: gap .2s ease; } .route:hover .route__cta { gap: 12px; } .route--urgent { border-color: rgba(217,72,42,.35); background: linear-gradient(to bottom right, var(--warn-soft), var(--surface) 72%); } .route--urgent .route__icon { background: var(--warn-soft); color: var(--warn); } .route--urgent .route__cta { color: var(--warn); } .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(--blue-700); color: #fff; border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .feature__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(360px 180px at 85% 0%, rgba(242,164,23,.22), transparent 60%), var(--dotgrid); background-size: auto, 22px 22px; pointer-events: none; } .feature__hero > * { position: relative; } .feature__badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: rgba(255,255,255,.12); color: var(--amber); font-family: var(--mono); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; } .feature__hero .ico--big { width: 46px; height: 46px; color: var(--amber); margin-bottom: 14px; } .feature__hero h3 { color: #fff; font-size: 1.7rem; margin: 0 0 .3em; } .feature__hero p { color: #cfe0ff; 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; } } .trustband { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 36px; padding: 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .trustband__item { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: .98rem; } .trustband__item .ico { color: var(--blue); width: 1.5em; height: 1.5em; } .trustband__divider { width: 1px; height: 26px; background: var(--line-strong); } @media (max-width: 600px) { .trustband__divider { display: none; } } .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 920px) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } } .gallery__item { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-family: var(--mono); font-size: .78rem; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); } .gallery__item::before { content: ""; position: absolute; inset: 0; background: var(--dotgrid); background-size: 18px 18px; opacity: .6; } .gallery__item .ico { width: 1.8em; height: 1.8em; color: var(--line-strong); position: relative; } .gallery__item span { position: relative; } .gallery__item:hover { border-color: var(--blue); transform: translateY(-3px); } .gallery__item:hover .ico { color: var(--blue); } .inpage-nav { position: sticky; top: 62px; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); 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-family: var(--mono); font-weight: 700; font-size: .82rem; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); } .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 { 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: 126px; } @media (max-width: 980px) { .detail__aside { position: static; } } .aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; } .aside-card--accent { background: var(--blue-700); border-color: var(--blue-700); color: #fff; } .aside-card--accent h3 { color: #fff; } .aside-card--accent p { color: #cfe0ff; } .aside-card--accent .aside-facts strong { color: #fff; } .aside-card--accent .aside-facts span { color: #b9cdf0; } .aside-card--accent .aside-facts .ico { color: var(--ondark); } .aside-card--accent .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } .aside-card--accent .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } .aside-card h3 { font-size: 1.18rem; margin: 0 0 .7em; } .aside-card .btn { width: 100%; justify-content: center; } .aside-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .aside-facts li { display: flex; align-items: flex-start; gap: 12px; } .aside-facts .ico { color: var(--blue); flex: none; margin-top: 2px; } .aside-facts strong { display: block; color: var(--ink); font-size: .98rem; } .aside-facts span { color: var(--muted); font-size: .9rem; } /* ========================================================================== 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: var(--ink); color: #fff; border-top: 1px solid rgba(255,255,255,.1); } .actionbar__txt { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 7px; flex: 1; } .actionbar__txt .ico { color: var(--amber); } .actionbar__call { background: var(--amber); color: #fff; padding: 11px 16px; } .actionbar__ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 11px 14px; } @media (max-width: 860px) { .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: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; color: var(--blue); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s var(--ease); 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 { border-color: var(--blue); color: var(--blue-deep); } @media (max-width: 860px) { .to-top { bottom: 74px; } } /* ========================================================================== 23 · Footer ========================================================================== */ .site-footer { background: var(--ink); color: #a9b8cd; padding: 64px 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: 42px; } @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: .82rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 1.2em; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .site-footer a { color: #a9b8cd; font-weight: 500; } .site-footer a:hover { color: var(--ondark); } .footer__name { font-family: var(--display); font-weight: 700; color: #fff; font-size: 1.2rem; display: block; margin-bottom: .6em; } .footer__pitch { font-size: .96rem; color: #93a4ba; 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(--ondark); } .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-family: var(--mono); font-size: .76rem; color: #8295ab; } .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; } .muted { color: var(--muted); } .placeholder { outline: 1px dashed var(--line-strong); outline-offset: 3px; border-radius: 6px; color: var(--muted); } .card:focus-visible, .route:focus-visible, .pest:focus-visible, .verzeichnis a:focus-visible, .tags a:focus-visible, .gallery__item:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } /* ========================================================================== 25 · Notfall-Triage-Band (Layout J – Symptom-Schnellwahl ganz oben) ========================================================================== */ .triage { position: relative; overflow: hidden; background: var(--ink); border-radius: var(--radius-lg); padding: 34px; color: #fff; box-shadow: var(--shadow-lg); } .triage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 240px at 92% -30%, rgba(225,9,21,.28), transparent 60%), var(--dotgrid); background-size: auto, 24px 24px; pointer-events: none; } .triage > * { position: relative; } .triage__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-bottom: 24px; } .triage__kicker { font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 100%; } .triage__title { color: #fff; font-size: clamp(1.32rem, 2.3vw, 1.8rem); line-height: 1.18; margin: 0; flex: 1 1 360px; } .triage__head .btn { flex: none; } .triage__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 940px) { .triage__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .triage__grid { grid-template-columns: 1fr 1fr; } } .triage__tile { display: flex; flex-direction: column; gap: 9px; padding: 18px; background: #21252b; border: 1px solid #2d323a; border-radius: var(--radius); color: #fff; transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .triage__tile:hover { transform: translateY(-3px); border-color: var(--blue); background: #262b32; text-decoration: none; } .triage__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(225,9,21,.16); color: var(--amber); display: inline-flex; align-items: center; justify-content: center; flex: none; } .triage__icon .ico { width: 1.45em; height: 1.45em; } .triage__sym { font-weight: 700; font-size: 1.05rem; color: #fff; } .triage__desc { font-size: .86rem; color: #aab0b8; line-height: 1.45; }