/* TAK Hub – Theme „Lagebild bei Nacht“ v3.1 (design/DESIGN.md). Aus dem Prototyp übertragen, Selektoren auf Block-Markup angepasst.
   Themes: [data-theme="dark"] (Standard) / [data-theme="light"], verschachtelbar; Block-Style „Dunkle Fläche“ = .is-style-dunkel.
   Schriften kommen aus theme.json (@font-face von WordPress). */

/* ---------- Tokens ---------- */
:root {
  --c-nacht: #0A0A0A; --c-graphit: #222222; --c-gelaende: #021411; --c-wald: #0A2721;
  --c-signal: #C7F750; --c-blau: #315597; --c-stahl: #6281A7; --c-glut: #BD400F;
  --c-nebel: #D0D2C6; --c-papier: #FCFFF6;
  --grad-line: linear-gradient(90deg, var(--c-blau) 0%, var(--c-stahl) 38%, var(--c-signal) 100%);

  --f-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-serif: "Roboto Serif", Georgia, serif;

  --t-12: .75rem; --t-14: .875rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem;
  --t-24: 1.5rem; --t-30: 1.875rem; --t-36: 2.25rem;
  --t-lead: clamp(1.125rem, 1.04rem + .38vw, 1.375rem);
  --t-h1: clamp(2.625rem, 1.55rem + 4.2vw, 5.25rem);
  --t-h2: clamp(2rem, 1.3rem + 2.7vw, 3.75rem);
  --t-h3: clamp(1.25rem, 1.12rem + .55vw, 1.625rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: clamp(4.5rem, 2.8rem + 5.5vw, 8.5rem);
  --wrap: 85rem; --pad: clamp(1.25rem, 4vw, 3rem); --gap: clamp(1rem, .5rem + 1.6vw, 1.5rem);
  --header-h: 4.5rem; --cut: 1.25rem; /* Fase = Hexagon-Winkel des Logos */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root, [data-theme="dark"], .is-style-dunkel {
  color-scheme: dark;
  --bg: var(--c-nacht); --band: rgb(2 20 17 / .84); --raise: var(--c-wald); --field: var(--c-graphit);
  --ink: var(--c-papier); --ink-2: var(--c-nebel); --ink-3: #A4A99B;
  --line: rgb(208 210 198 / .16); --line-2: #7C8177;
  --accent: var(--c-signal); --on-accent: var(--c-nacht); --accent-hover: var(--c-papier);
  --link: var(--c-papier); --link-line: var(--c-signal); --link-hover: var(--c-signal); --focus: var(--c-signal);
  --info: var(--c-stahl); --ok: var(--c-signal); --no: #F07A48; --mark: var(--c-signal); --icon-end: var(--c-signal);
  --topo: url("../img/topo-dark.svg");
  --map-bg: rgb(2 20 17 / .78); --map-grid: rgb(252 255 246 / .075); --map-ink: #A4A99B; --map-tag: var(--c-nacht);
  --map-infra: var(--c-stahl); --map-water: var(--c-blau); --own: var(--c-signal); --own-edge: var(--c-gelaende); --partner: #8FA9CC;
  --glow: rgb(10 39 33 / .85);
}
[data-theme="light"] .testimonial.is-style-dunkel, [data-theme="light"] {
  color-scheme: light;
  --bg: var(--c-papier); --band: rgb(234 238 226 / .86); --raise: #FFFFFF; --field: #FFFFFF;
  --ink: var(--c-gelaende); --ink-2: #3B4A44; --ink-3: #56635D;
  --line: rgb(2 20 17 / .14); --line-2: #7A8076;
  --accent: var(--c-wald); --on-accent: var(--c-signal); --accent-hover: var(--c-gelaende);
  --link: var(--c-blau); --link-line: var(--c-blau); --link-hover: var(--c-gelaende); --focus: var(--c-blau);
  --info: var(--c-blau); --ok: #2E6B18; --no: #A3370D; --mark: var(--c-wald); --icon-end: #3A7A1F;
  --topo: url("../img/topo-light.svg");
  --map-bg: rgb(246 249 239 / .86); --map-grid: rgb(2 20 17 / .085); --map-ink: #56635D; --map-tag: #FFFFFF;
  --map-infra: var(--c-blau); --map-water: var(--c-stahl); --own: var(--c-signal); --own-edge: var(--c-wald); --partner: var(--c-blau);
  --glow: rgb(199 247 80 / .12);
}
[data-theme], .is-style-dunkel { color: var(--ink); }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-5)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg) var(--topo) 0 0 / 1400px repeat; color: var(--ink);
  font: 400 var(--t-18)/1.6 var(--f-sans); font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
iframe { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 760; letter-spacing: -.028em; line-height: 1; }
h2 { font-size: var(--t-h2); letter-spacing: -.022em; line-height: 1.02; }
h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.18; }
h4 { font-size: var(--t-20); }
@media (max-width: 43.99em) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; }
}
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--link); text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--c-signal); color: var(--c-nacht); }
.nowrap { white-space: nowrap; }
.visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: var(--s-4); top: var(--s-4); z-index: 100; transform: translateY(-300%); background: var(--c-signal); color: var(--c-nacht); padding: var(--s-3) var(--s-4); font-weight: 700; }
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); position: relative; }
.is-style-band { background: var(--band); }
.is-style-dunkel { background: var(--c-gelaende) var(--topo) 0 0 / 1400px repeat; }
.flow > * + * { margin-top: var(--flow, var(--s-4)); }

.tag { font: 500 var(--t-12)/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
.muted { color: var(--ink-3); }

.section-head { max-width: 50rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head > * + * { margin-top: var(--s-5); }
.section-head p { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 44rem; }
.section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-7); }
.section-head--split > * + * { margin-top: 0; }
.section-head--split p { font-size: var(--t-18); }

.gline, .sign-off::after { height: 2px; background: var(--grad-line); border: 0; margin: 0; }
/* Schräge Kante wie am Fuß des Flyers: Fläche mit Topo darunter, Verlaufslinie auf der Kante */
.slanted { --slant: clamp(2rem, 4.5vw, 5rem); position: relative; margin-top: calc(-1 * var(--slant)); padding-top: var(--slant);
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.slanted::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--slant); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='100' y2='0'%3E%3Cstop offset='0' stop-color='%23315597'/%3E%3Cstop offset='.38' stop-color='%236281A7'/%3E%3Cstop offset='1' stop-color='%23C7F750'/%3E%3C/linearGradient%3E%3Cline x1='0' y1='10' x2='100' y2='0' stroke='url(%23g)' stroke-width='5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* Fasen-Rahmen für Medien (Hexagon-Winkel des Logos) */
.cut, .cut img, .is-style-fase img { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.wp-block-image.cut { clip-path: none; }
/* Bildnachweis: Bildunterschriften auf Seiten und Block-Stil „Bildnachweis“ (Bild oder Absatz, auch in Artikeln). Lizenzlinks bleiben erkennbar. */
.entry .wp-block-image figcaption, .wp-block-image.is-style-bildnachweis figcaption, p.is-style-bildnachweis {
  margin: var(--s-2) 0 0; font: 400 var(--t-12)/1.5 var(--f-mono); letter-spacing: .01em; color: var(--ink-3); text-align: left; }
:is(.entry .wp-block-image figcaption, .wp-block-image.is-style-bildnachweis figcaption, p.is-style-bildnachweis) a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
:is(.entry .wp-block-image figcaption, .wp-block-image.is-style-bildnachweis figcaption, p.is-style-bildnachweis) a:hover { color: var(--link-hover); }

/* ---------- Buttons (Theme-Templates .btn, Blöcke .wp-block-button) ---------- */
.btn, .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: .7rem 1.35rem; border: 2px solid transparent; border-radius: 2px;
  font: 600 var(--t-18)/1.2 var(--f-sans); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary, .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--accent-hover); color: var(--on-accent); }
:is([data-theme="dark"], .is-style-dunkel) :is(.btn--primary, .wp-block-button:not(.is-style-outline) .wp-block-button__link):hover { color: var(--c-nacht); }
.btn--secondary, .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid var(--ink-2); color: var(--ink); background: transparent; padding: .7rem 1.35rem; }
.btn--secondary:hover, .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--link-hover); color: var(--link-hover); }
.actions, .wp-block-buttons.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* WordPress setzt Block-Abstände auf 0 (theme.json blockGap 0); Komponenten regeln Abstände selbst.
   Für frei im Editor gebaute Gruppen/Spalten (Layout „constrained“) ein ruhiger Grundabstand. */
:where(.is-layout-constrained, .wp-block-column, .wp-block-media-text__content) > * + * { margin-block-start: var(--s-4); }
:where(.is-layout-constrained, .wp-block-column) > :is(h2, h3, h4) { margin-block-start: var(--s-6); }
.wp-block-columns.wp-block-columns { gap: var(--s-6) var(--gap); }
.link-button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.link-button:hover { color: var(--c-signal); text-decoration: underline; }

/* Produktfoto-Platzhalter: Core-Gruppe mit leeren Icon-Gruppen (dekorativ). */
.icon-tile {
  aspect-ratio: 3 / 2; margin-bottom: var(--s-4); display: flex;
  align-items: center; justify-content: center; gap: clamp(1rem, 6%, 2rem);
  background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line);
}
.icon-tile > .wp-block-group {
  display: block; width: clamp(3rem, 18%, 5rem); aspect-ratio: 1; margin: 0;
  background: linear-gradient(135deg, #315597, #6281A7 45%, var(--icon-end));
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.icon-tile > .wp-block-group::before { content: none; }

/* ---------- Icons: CSS-Maske + CI-Verlauf (Klasse i-<name> an der Gruppe). Formen: Tabler Icons 3.49 (MIT, LICENSE-tabler-icons.txt),
   Pfade unverändert, Strichstärke 1,75. Neues Icon: alle Pfade aus tabler-icons/icons/outline/<name>.svg (ohne Rahmen-Pfad) zu einem d verbinden. ---------- */
[class*=" i-"]::before, [class^="i-"]::before {
  content: ""; width: 1.5rem; height: 1.5rem; flex: none;
  background: linear-gradient(135deg, #315597, #6281A7 45%, var(--icon-end));
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.is-style-dunkel [class*=" i-"]::before, [data-theme="dark"] [class*=" i-"]::before { background: linear-gradient(135deg, #315597, #6281A7 45%, #C7F750); }
.i-bulb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3M9.7 17l4.6 0'/%3E%3C/svg%3E"); }
.i-server { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-2M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2M7 8l0 .01M7 16l0 .01'/%3E%3C/svg%3E"); }
.i-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14M11 4h2M12 17v.01'/%3E%3C/svg%3E"); }
.i-cap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9l-10 -4l-10 4l10 4l10 -4v6M6 10.6v5.4a6 3 0 0 0 12 0v-5.4'/%3E%3C/svg%3E"); }
.i-headset { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-3a8 8 0 1 1 16 0v3M18 19c0 1.657 -2.686 3 -6 3M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3'/%3E%3C/svg%3E"); }
.i-wrench { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5'/%3E%3C/svg%3E"); }
.i-chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2'/%3E%3C/svg%3E"); }
.i-package { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5M12 12l8 -4.5M12 12l0 9M12 12l-8 -4.5M16 5.25l-8 4.5'/%3E%3C/svg%3E"); }
.i-mesh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 18a2 2 0 1 0 -4 0a2 2 0 0 0 4 0M8 18a2 2 0 1 0 -4 0a2 2 0 0 0 4 0M8 6a2 2 0 1 0 -4 0a2 2 0 0 0 4 0M20 6a2 2 0 1 0 -4 0a2 2 0 0 0 4 0M6 8v8M18 16v-8M8 6h8M16 18h-8M7.5 7.5l9 9M7.5 16.5l9 -9'/%3E%3C/svg%3E"); }
.i-ruler { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l4 4l-14 14l-4 -4l14 -14M16 7l-1.5 -1.5M13 10l-1.5 -1.5M10 13l-1.5 -1.5M7 16l-1.5 -1.5'/%3E%3C/svg%3E"); }
.i-code { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8l-4 4l4 4M17 8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E"); }
.i-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2M9 9l1 0M9 13l6 0M9 17l6 0'/%3E%3C/svg%3E"); }
.i-puzzle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1'/%3E%3C/svg%3E"); }
.i-unlock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2l0 -6M11 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 11v-5a4 4 0 0 1 8 0'/%3E%3C/svg%3E"); }
.i-devices { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1v-10M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9M16 9h2'/%3E%3C/svg%3E"); }
.i-offline { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18l.01 0M9.172 15.172a4 4 0 0 1 5.656 0M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374M3 3l18 18'/%3E%3C/svg%3E"); }
.i-fed, .i-exchange { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10h14l-4 -4M17 14h-14l4 4'/%3E%3C/svg%3E"); }
.i-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0'/%3E%3C/svg%3E"); }
.i-call { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E"); }
.i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10M3 7l9 6l9 -6'/%3E%3C/svg%3E"); }
.i-cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12M16 3v4M8 3v4M4 11h16M11 15h1M12 15v3'/%3E%3C/svg%3E"); }
.i-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0M13 18l6 -6M13 6l6 6'/%3E%3C/svg%3E"); }
.i-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4'/%3E%3C/svg%3E"); }
.i-plug { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12l5 5l-1.5 1.5a3.536 3.536 0 1 1 -5 -5l1.5 -1.5M17 12l-5 -5l1.5 -1.5a3.536 3.536 0 1 1 5 5l-1.5 1.5M3 21l2.5 -2.5M18.5 5.5l2.5 -2.5M10 11l-2 2M13 14l-2 2'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14M9 12l2 2l4 -4'/%3E%3C/svg%3E"); }
.i-ship { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21l-8 -4.5v-9l8 -4.5l8 4.5v4.5M12 12l8 -4.5M12 12v9M12 12l-8 -4.5M15 18h7M19 15l3 3l-3 3'/%3E%3C/svg%3E"); }
.i-robot { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -4M12 2v2M9 12v9M15 12v9M5 16l4 -2M15 14l4 2M9 18h6M10 8v.01M14 8v.01'/%3E%3C/svg%3E"); }
.i-laser, .i-crosshair { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8v-2a2 2 0 0 1 2 -2h2M4 16v2a2 2 0 0 0 2 2h2M16 4h2a2 2 0 0 1 2 2v2M16 20h2a2 2 0 0 0 2 -2v-2M9 12l6 0M12 9l0 6'/%3E%3C/svg%3E"); }
.i-gauge { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M13.41 10.59l2.59 -2.59M7 12a5 5 0 0 1 5 -5'/%3E%3C/svg%3E"); }
.i-drone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10h4v4h-4l0 -4M10 10l-3.5 -3.5M9.96 6a3.5 3.5 0 1 0 -3.96 3.96M14 10l3.5 -3.5M18 9.96a3.5 3.5 0 1 0 -3.96 -3.96M14 14l3.5 3.5M14.04 18a3.5 3.5 0 1 0 3.96 -3.96M10 14l-3.5 3.5M6 14.04a3.5 3.5 0 1 0 3.96 3.96'/%3E%3C/svg%3E"); }
.i-plane { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2 -4l-2 -4h3l2 2h4l-2 -7h3l4 7'/%3E%3C/svg%3E"); }
.i-radar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12h-8a1 1 0 1 0 -1 1v8a9 9 0 0 0 9 -9M16 9a5 5 0 1 0 -7 7M20.486 9a9 9 0 1 0 -11.482 11.495'/%3E%3C/svg%3E"); }
.i-radio { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M16.616 13.924a5 5 0 1 0 -9.23 0M20.307 15.469a9 9 0 1 0 -16.615 0M9 21l3 -9l3 9M10 19h4'/%3E%3C/svg%3E"); }
.i-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1l0 -2M8 14a4 4 0 1 0 8 0a4 4 0 1 0 -8 0M19 7v7a7 7 0 0 1 -14 0v-7M12 14l.01 0'/%3E%3C/svg%3E"); }
.i-video, .i-bodycam { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4M3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -8'/%3E%3C/svg%3E"); }
.i-satellite { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.707 6.293l2.586 -2.586a1 1 0 0 1 1.414 0l5.586 5.586a1 1 0 0 1 0 1.414l-2.586 2.586a1 1 0 0 1 -1.414 0l-5.586 -5.586a1 1 0 0 1 0 -1.414M6 10l-3 3l3 3l3 -3M10 6l3 -3l3 3l-3 3M12 12l1.5 1.5M14.5 17a2.5 2.5 0 0 0 2.5 -2.5M15 21a6 6 0 0 0 6 -6'/%3E%3C/svg%3E"); }
.i-weather { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1M13 14l-2 4l3 0l-2 4'/%3E%3C/svg%3E"); }
.i-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M7 12a5 5 0 1 0 10 0a5 5 0 1 0 -10 0M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3C/svg%3E"); }
.i-binoculars { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M14 16a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M16.346 9.17l-.729 -1.261c-.16 -.248 -1.056 -.203 -1.117 .091l-.177 1.38M19.761 14.813l-2.84 -5.133c-.189 -.31 -.592 -.68 -1.421 -.68c-.828 0 -1.5 .448 -1.5 1v6M7.654 9.17l.729 -1.261c.16 -.249 1.056 -.203 1.117 .091l.177 1.38M4.239 14.813l2.84 -5.133c.189 -.31 .592 -.68 1.421 -.68c.828 0 1.5 .448 1.5 1v6M10 12h4v2h-4l0 -2'/%3E%3C/svg%3E"); }
.i-truck { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5'/%3E%3C/svg%3E"); }
.i-map { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l6 -3l6 3l6 -3v13l-6 3l-6 -3l-6 3v-13M9 4v13M15 7v13'/%3E%3C/svg%3E"); }
.i-route { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0M19 7a2 2 0 1 0 0 -4a2 2 0 0 0 0 4M11 19h5.5a3.5 3.5 0 0 0 0 -7h-8a3.5 3.5 0 0 1 0 -7h4.5'/%3E%3C/svg%3E"); }
.i-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06M15 19l2 2l4 -4'/%3E%3C/svg%3E"); }
.i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0M8 11v-4a4 4 0 1 1 8 0v4'/%3E%3C/svg%3E"); }
.i-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0M15 9h.01'/%3E%3C/svg%3E"); }
.i-certificate { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 6 0a3 3 0 1 0 -6 0M13 17.5v4.5l2 -1.5l2 1.5v-4.5M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73M6 9l12 0M6 12l3 0M6 15l2 0'/%3E%3C/svg%3E"); }
.i-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0M17 10h2a2 2 0 0 1 2 2v1M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0M3 13v-1a2 2 0 0 1 2 -2h2'/%3E%3C/svg%3E"); }
.i-personal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h2M22 16c0 4 -2.5 6 -3.5 6s-3.5 -2 -3.5 -6c1 0 2.5 -.5 3.5 -1.5c1 1 2.5 1.5 3.5 1.5M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3C/svg%3E"); }
.i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0M21 21l-6 -6'/%3E%3C/svg%3E"); }
.i-medical { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3a1 1 0 0 1 1 1v4.535l3.928 -2.267a1 1 0 0 1 1.366 .366l1 1.732a1 1 0 0 1 -.366 1.366l-3.927 2.268l3.927 2.269a1 1 0 0 1 .366 1.366l-1 1.732a1 1 0 0 1 -1.366 .366l-3.928 -2.269v4.536a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-4.536l-3.928 2.268a1 1 0 0 1 -1.366 -.366l-1 -1.732a1 1 0 0 1 .366 -1.366l3.927 -2.268l-3.927 -2.268a1 1 0 0 1 -.366 -1.366l1 -1.732a1 1 0 0 1 1.366 -.366l3.928 2.267v-4.535a1 1 0 0 1 1 -1h2'/%3E%3C/svg%3E"); }
.i-cbrn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 14.6l3 5.19a9 9 0 0 0 4.5 -7.79h-6a3 3 0 0 1 -1.5 2.6M13.5 9.4l3 -5.19a9 9 0 0 0 -9 0l3 5.19a3 3 0 0 1 3 0M10.5 14.6l-3 5.19a9 9 0 0 1 -4.5 -7.79h6a3 3 0 0 0 1.5 2.6'/%3E%3C/svg%3E"); }
.i-flame { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.941c2.333 -3.308 .167 -7.823 -1 -8.941c0 3.395 -2.235 5.299 -3.667 6.706c-1.43 1.408 -2.333 3.294 -2.333 5.588c0 3.704 3.134 6.706 7 6.706c3.866 0 7 -3.002 7 -6.706c0 -1.712 -1.232 -4.403 -2.333 -5.588c-2.084 3.353 -3.257 3.353 -4.667 2.235'/%3E%3C/svg%3E"); }
.i-water { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7c3 -2 6 -2 9 0s6 2 9 0M3 17c3 -2 6 -2 9 0s6 2 9 0M3 12c3 -2 6 -2 9 0s6 2 9 0'/%3E%3C/svg%3E"); }
.i-case { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2M12 12l0 .01M3 13a20 20 0 0 0 18 0'/%3E%3C/svg%3E"); }
.i-backpack { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18v-6a6 6 0 0 1 6 -6h2a6 6 0 0 1 6 6v6a3 3 0 0 1 -3 3h-8a3 3 0 0 1 -3 -3M10 6v-1a2 2 0 1 1 4 0v1M9 21v-4a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v4M11 10h2'/%3E%3C/svg%3E"); }
.i-battery { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h1a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-2M8 7h-2a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h1M12 8l-2 4h3l-2 4'/%3E%3C/svg%3E"); }
.i-solar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.28 14h15.44a1 1 0 0 0 .97 -1.243l-1.5 -6a1 1 0 0 0 -.97 -.757h-12.44a1 1 0 0 0 -.97 .757l-1.5 6a1 1 0 0 0 .97 1.243M4 10h16M10 6l-1 8M14 6l1 8M12 14v4M7 18h10'/%3E%3C/svg%3E"); }
.i-presentation { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4l18 0M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10M12 16l0 4M9 20l6 0M8 12l3 -3l2 2l3 -3'/%3E%3C/svg%3E"); }
.i-tablet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1v-16M11 17a1 1 0 1 0 2 0a1 1 0 0 0 -2 0'/%3E%3C/svg%3E"); }
.i-ticket { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l0 2M15 11l0 2M15 17l0 2M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2'/%3E%3C/svg%3E"); }
.i-firetruck { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M7 18h8m4 0h2v-6a5 5 0 0 0 -5 -5h-1l1.5 5h4.5M12 18v-11h3M3 17l0 -5l9 0M3 9l18 -6M6 12l0 -4'/%3E%3C/svg%3E"); }
.i-ambulance { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5M6 10h4m-2 -2v4'/%3E%3C/svg%3E"); }

/* ---------- Header (immer CI-dunkel) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-nacht); border-bottom: 1px solid var(--line); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* WP's admin bar scrolls away below 600px */
.header-bar { display: flex; align-items: center; gap: var(--s-3); min-height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { width: 8.75rem; height: 2.1175rem; }
.menu-toggle, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--s-3);
  font: 600 var(--t-16)/1 var(--f-sans); color: var(--ink); background: none; border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer;
}
.menu-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle { padding: 0; }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
.theme-toggle:hover, .menu-toggle:hover { border-color: var(--c-signal); color: var(--c-signal); }
.theme-toggle[hidden] { display: inline-flex; visibility: hidden; }
[data-theme-fixed] .theme-toggle { display: none; }
@media (max-width: 85.99em) {
  .no-popover .site-nav { position: fixed; z-index: 51; }
  .no-popover .site-nav:not(.is-open) { display: none; }
}

.site-nav {
  inset: var(--header-h) 0 auto 0; width: 100%; max-height: calc(100dvh - var(--header-h));
  margin: 0; padding: var(--s-4) var(--pad) var(--s-7); border: 0; border-top: 1px solid var(--line);
  background: var(--c-nacht); color: var(--ink); overflow-y: auto;
}
.site-nav::backdrop { background: rgb(0 0 0 / .6); }
.nav-list, .nav-sub, .lang { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--line); }
.nav-list summary, .nav-list > li > a {
  display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem;
  font-weight: 600; font-size: var(--t-20); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
}
.nav-list summary::-webkit-details-marker { display: none; }
.nav-list summary::after {
  content: ""; width: .5rem; height: .5rem; margin-left: var(--s-2); margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s;
}
.nav-list details[open] > summary::after { transform: rotate(225deg); margin-top: .25rem; }
.nav-list [aria-current="page"] { color: var(--c-signal); }
.nav-sub { padding: 0 0 var(--s-4); }
.nav-sub a { display: block; padding: var(--s-2) 0; color: var(--ink); text-decoration: none; }
.nav-sub a:hover { color: var(--c-signal); }
.nav-sub small { display: block; color: var(--ink-3); font-size: var(--t-14); }
.lang { display: flex; gap: var(--s-1); margin: var(--s-5) 0; }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  font: 500 var(--t-14)/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); text-decoration: none;
}
.lang a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--c-signal); }
.lang a:hover { color: var(--c-signal); }
.nav-cta { width: 100%; }

@media (min-width: 86em) { /* 1376px: below this the nav does not fit in DE/EN */
  .menu-toggle { display: none; }
  .site-nav {
    display: flex; align-items: center; gap: var(--s-4); position: static; inset: auto; width: auto; max-height: none;
    padding: 0; border: 0; overflow: visible; background: none;
  }
  .nav-list { display: flex; }
  .nav-list > li { position: relative; border: 0; }
  .nav-list summary, .nav-list > li > a { min-height: 2.75rem; padding: 0 .7rem; font-size: var(--t-16); font-weight: 500; white-space: nowrap; }
  .nav-list summary:hover, .nav-list > li > a:hover { color: var(--c-signal); }
  .nav-list summary::after { width: .38rem; height: .38rem; border-width: 0 1.5px 1.5px 0; }
  .nav-sub {
    position: absolute; top: calc(100% + 1rem); left: 0; min-width: 19rem; padding: var(--s-3) 0;
    background: var(--c-nacht); border: 1px solid var(--line); border-top: 2px solid var(--c-signal);
    box-shadow: 0 24px 48px rgb(0 0 0 / .5);
  }
  .nav-sub a { padding: var(--s-2) var(--s-5); }
  .nav-sub a:hover { background: var(--c-wald); }
  .lang { margin: 0; padding-left: var(--s-3); border-left: 1px solid var(--line); }
  .lang a { min-width: 2.1rem; }
  .nav-cta { width: auto; min-height: 2.75rem; padding-inline: 1.1rem; font-size: var(--t-16); white-space: nowrap; }
}

/* ---------- Inhalt von Seiten (page.php / Landingpage) ----------
   Abschnitte (.section, .hero) laufen über die volle Breite; lose Blöcke stehen links im Raster mit Lesebreite. */
.entry > :not(.section, .hero, .slanted, .testimonial, .alignfull, .wp-block-group, .wp-block-columns, .wp-block-media-text, .wp-block-table, .wp-block-query, style, script) {
  max-width: calc(46rem + var(--pad)); margin-left: max(var(--pad), (100% - var(--wrap)) / 2); padding-right: var(--pad);
}
.entry > :is(.wp-block-group:not(.section, .hero, .slanted, .testimonial, .alignfull), .wp-block-columns, .wp-block-media-text, .wp-block-table, .wp-block-query) {
  max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad);
}
.entry > * + :not(.section, .hero, .slanted, .testimonial) { margin-top: var(--s-5); }
.entry > :is(h2, h3, h4) { margin-top: var(--s-7); }
.entry > :not(.section, .hero, .slanted, .testimonial):last-child { margin-bottom: var(--section); }
.entry > :is(ul, ol) { padding-left: calc(var(--s-5) + max(var(--pad), (100% - var(--wrap)) / 2)); margin-left: 0; }
/* :not(.alignfull) hebt die Spezifität über die Gruppen-Regel oben, sonst laufen Hinweisboxen (Gruppen) über die volle Breite */
.entry > :is(.is-style-hinweis, .is-style-tipp, .is-style-achtung, .is-style-summary):not(.alignfull) { max-width: 46rem; margin-left: max(var(--pad), (100% - var(--wrap)) / 2); margin-right: var(--pad); padding-inline: var(--s-5); }
.section:has(+ .slanted) { padding-bottom: calc(var(--section) + 3rem); }
.page-head { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2rem, 1rem + 2vw, 3rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: var(--s-5); }
.page-head + .entry > .section:first-child { padding-top: var(--s-6); }
/* Brotkrumen (Landingpage-Unterseiten, Beiträge) */
.breadcrumb { font-size: var(--t-14); color: var(--ink-3); padding-top: var(--s-6); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-2); }
.breadcrumb a { color: var(--ink-3); text-decoration-thickness: 1px; }
.breadcrumb a:hover { color: var(--link-hover); }
.wrap:has(> .breadcrumb) + .entry > .hero:first-child { padding-top: var(--s-6); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); overflow-x: clip; }
/* Glow ragt 15 % über den Hero hinaus (hinter Brotkrumen/Kopf), damit er auch oben weich ausläuft. Gleiche Lage und Stärke wie
   vorher radial-gradient(55% 75% at 78% 42%) auf dem Hero: Höhe 115 % → Mitte (15+42)/115, Radius 75/115. */
.hero::before { content: ""; position: absolute; z-index: -1; inset: -15% 0 0; pointer-events: none;
  background: radial-gradient(55% 65.22% at 78% 49.57%, var(--glow), transparent 70%); }
.breadcrumb { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: var(--s-7); padding-bottom: clamp(4rem, 2.5rem + 4vw, 6rem); }
.hero-text { display: grid; gap: var(--s-5); align-content: center; }
.hero-text h1 { max-width: 13ch; }
.hero-text .lead { max-width: 34rem; }
.hero-text .wp-block-buttons, .hero-text .actions { margin-top: var(--s-2); }
.provider { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3); margin-top: var(--s-3); color: var(--ink-2); }
.provider::before { content: ""; width: 1.5rem; height: 1rem; margin-top: .05rem; background: linear-gradient(#000 33.3%, #DD0000 0 66.6%, #FFCE00 0); box-shadow: 0 0 0 1px var(--line); }
.hero-media { position: relative; }
@media (max-width: 39.99em) { .hero-media--video { display: none; } } /* Startseite mobil: kein Video, kein Poster (lädt nichts) */
.hero-media--video .map-panel { background: url("../video/hero-poster.webp") center / cover; } /* Poster; im ausgeblendeten Element lädt es nicht */
.map-panel {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--map-bg);
  border: 1px solid var(--line); clip-path: polygon(calc(var(--cut) * 1.6) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) * 1.6));
}
.map-panel > svg, .map-panel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 40em) { .map-panel { aspect-ratio: 640 / 560; } }
@media (min-width: 64em) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 5rem); align-items: center; }
  .hero-media { margin-right: calc(-1 * var(--pad) - max(0px, (100vw - var(--wrap) - 2 * var(--pad)) / 2)); }
  .map-panel { border-right: 0; aspect-ratio: auto; height: clamp(30rem, calc(100svh - var(--header-h) - 10.5rem), 46rem); }
}

/* Karten-SVG: Farben aus Tokens, damit Dark/Light ohne zweite Grafik funktionieren */
.map text, .eco text { font-family: var(--f-mono); font-weight: 500; letter-spacing: .06em; fill: var(--map-ink); }
.m-grid { stroke: var(--map-grid); stroke-width: 1; fill: none; }
.m-gridlabel { font-size: 10px; fill: var(--map-ink); opacity: .7; }
.m-water { fill: none; stroke: var(--map-water); stroke-width: 7; stroke-linecap: round; opacity: .55; }
.m-road { fill: none; stroke: var(--map-ink); stroke-width: 2.5; opacity: .35; stroke-dasharray: 10 6; }
.m-sector { fill: rgb(199 247 80 / .08); stroke: var(--own); stroke-width: 2; stroke-dasharray: 8 6; }
[data-theme="light"] .m-sector { stroke: var(--c-wald); fill: rgb(199 247 80 / .22); }
.m-hazard { fill: url(#hatch); stroke: var(--c-glut); stroke-width: 2; }
.m-hatch { stroke: var(--c-glut); stroke-width: 2; opacity: .55; }
.m-label { font-size: 11px; }
.m-label--own { fill: var(--ink); }
.m-label--hazard { fill: var(--no); }
.m-dot { fill: var(--own); stroke: var(--own-edge); stroke-width: 2; }
.m-ping { fill: none; stroke: var(--own); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.m-vehicle { fill: var(--own); stroke: var(--own-edge); stroke-width: 2; }
.m-track { fill: none; stroke: var(--own); stroke-width: 1.5; stroke-dasharray: 2 5; opacity: .45; }
.m-mover { fill: none; stroke: var(--own); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 0 100; }
.m-mover-edge { fill: none; stroke: var(--own-edge); stroke-width: 15; stroke-linecap: round; stroke-dasharray: 0 100; }
.m-cone { fill: url(#cone); }
.m-drone { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.m-q rect { fill: var(--map-tag); stroke: var(--line-2); stroke-width: 1; }
.m-q text { font-family: var(--f-sans); font-weight: 600; letter-spacing: 0; font-size: 14px; fill: var(--ink); }
.m-q .m-qmark { fill: var(--c-signal); stroke: var(--own-edge); stroke-width: 1; }
.m-q line { stroke: var(--line-2); stroke-width: 1; }
.m-chat rect { fill: var(--map-tag); stroke: var(--line-2); }
.m-chat text { font-size: 11px; fill: var(--ink); }
.m-chat .m-chat-from { fill: var(--ink-3); }
.m-scale { stroke: var(--map-ink); stroke-width: 2; fill: none; }
.m-hud { font-size: 10px; }
.m-live { fill: var(--c-signal); }
[data-theme="light"] .m-live { fill: var(--c-wald); }

/* ---------- Wegweiser: zwei klickbare Karten (ganze Karte = Link über den Link im letzten Absatz) ---------- */
.doors-wrap { padding-block: var(--s-6) var(--s-7); }
.doors-q { font-size: var(--t-20); font-weight: 600; margin-bottom: var(--s-4); }
.doors { display: grid; gap: var(--gap); }
.door {
  position: relative; display: grid; gap: var(--s-3); align-content: start; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line-2); border-top: 3px solid var(--mark); transition: background-color .15s, border-color .15s;
}
.door h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.015em; }
.door p { color: var(--ink-2); max-width: 34rem; }
.door .go { margin-top: var(--s-2); }
.door .go a { color: var(--ink); font-weight: 600; text-underline-offset: .25em; }
.door .go a::after { content: ""; position: absolute; inset: 0; }
.door .go a:focus-visible { outline: 0; }
.door:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.door:hover { border-color: var(--mark); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.door:hover .go a, .door:hover h2 { color: var(--link-hover); }
/* Hinweiszeile unter Wegweisern (.doors-more) bzw. unter beliebigen Rastern (.section-note) */
.doors-more, .section-note { margin-top: var(--s-5); color: var(--ink-2); max-width: 52rem; }
:is(.doors-more, .section-note) a { font-weight: 600; }
@media (min-width: 48em) { .doors { grid-template-columns: 1fr 1fr; } }
.slanted + .section.is-style-band, .slanted + .is-style-band .section { padding-top: var(--s-8); }

/* ---------- Was ist ATAK? – die vier Fragen ---------- */
.atak-intro { display: grid; gap: var(--s-7) var(--gap); align-items: end; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.atak-intro .def { margin-top: var(--s-6); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); line-height: 1.45; color: var(--ink); max-width: 42rem; letter-spacing: -.005em; }
.atak-intro .def + p { margin-top: var(--s-5); color: var(--ink-2); max-width: 40rem; }
.atak-intro .wp-block-image img, .atak-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 64em) { .atak-intro { grid-template-columns: 6fr 6fr; column-gap: var(--s-8); } }
.questions-title { margin-bottom: var(--s-5); }
.questions { display: grid; gap: var(--s-7) var(--gap); }
.question img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-gelaende); }
.question h3 { margin-top: var(--s-5); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.875rem); letter-spacing: -.015em; }
.question p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-16); line-height: 1.6; }
.question .tag { display: block; color: var(--ink-3); font-size: var(--t-12); }
@media (max-width: 43.99em) {
  /* Mobil: horizontale Leiste mit Einrasten statt vier Bildschirmhöhen; nächste Karte lugt hervor */
  .questions, .posts { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); padding-bottom: var(--s-3); scrollbar-width: thin; }
  .questions > *, .posts > li { scroll-snap-align: start; }
  .posts--grid { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* Wischhinweis: Fade an der Kante, hinter der noch Inhalt liegt. Ohne JS rechts; app.js setzt data-edge="start|mid|end|none". */
  :is(.questions, .posts:not(.posts--grid)) { --fl: 0px; --fr: 3rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
  :is(.questions, .posts)[data-edge="mid"] { --fl: var(--pad); } /* Karte rastet am Innenabstand ein: nur der Rand blendet */
  :is(.questions, .posts)[data-edge="end"] { --fl: 3rem; --fr: 0px; }
  :is(.questions, .posts)[data-edge="none"] { --fr: 0px; }
}
/* Pfeile und Zähler der Wischleisten (app.js 6a); .questions/.posts nur mobil, .photo-strip überall */
.swipe-nav { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.swipe-count { margin-right: auto; font: 500 var(--t-14)/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.swipe-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--ink); background: transparent;
  border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer; }
.swipe-btn::before { width: 1.25rem; height: 1.25rem; }
.swipe-prev::before { transform: scaleX(-1); }
.swipe-btn:hover:not(:disabled) { border-color: var(--link-hover); }
.swipe-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.swipe-btn:disabled { opacity: .35; cursor: default; }
.swipe-nav[hidden] { display: none; }
@media (min-width: 44em) { :is(.questions, .posts) + .swipe-nav { display: none; } }
/* Bildleiste (Kofferlösungen): dieselbe Wischleiste, auch auf dem Desktop; Fade wie oben über data-edge */
.photo-strip { --fl: 0px; --fr: 3rem; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--gap); overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: var(--s-7) calc(-1 * var(--pad)) 0; padding: 0 var(--pad) var(--s-3);
  scroll-padding-inline: var(--pad); scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.photo-strip[data-edge="mid"] { --fl: var(--pad); }
.photo-strip[data-edge="end"] { --fl: 3rem; --fr: 0px; }
.photo-strip[data-edge="none"] { --fr: 0px; }
.photo-strip > .wp-block-image { margin: 0; scroll-snap-align: start; }
.photo-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-gelaende); }
.photo-strip .wp-block-image figcaption { margin-top: var(--s-3); font: 500 var(--t-14)/1.4 var(--f-sans); letter-spacing: 0; color: var(--ink-2); }
.photo-strip + .swipe-nav { margin-bottom: var(--s-7); }
@media (min-width: 44em) { .photo-strip { grid-auto-columns: calc((100% - var(--gap)) / 2.2); } }
@media (min-width: 44em) { .questions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .questions { grid-template-columns: repeat(4, 1fr); } }

/* Icon-Listen: Gruppen mit Klasse i-<name>, Icon links (Funktionen, Vorteile, Typische Vorhaben, Direktkontakt) */
.more-fn, .adv, .usecases, .direct, .features { display: grid; gap: 0 var(--gap); border-top: 1px solid var(--line); }
.more-fn > *, .adv > *, .usecases > *, .direct > *, .features > * { position: relative; padding: var(--s-5) 0 var(--s-5) 2.75rem; border-bottom: 1px solid var(--line); }
.more-fn > *::before, .adv > *::before, .usecases > *::before, .direct > *::before, .features > *::before { position: absolute; left: 0; top: calc(var(--s-5) + .15rem); }
.more-fn { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.more-fn strong { display: block; font-weight: 600; }
.more-fn p { color: var(--ink-2); font-size: var(--t-16); }
.more-fn strong { color: var(--ink); font-size: var(--t-18); }
@media (min-width: 44em) { .more-fn { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .more-fn { grid-template-columns: repeat(4, 1fr); } .more-fn > * { padding-right: var(--s-4); } }

/* ---------- Ökosystem: Scrollytelling ---------- */
.eco-layout { display: grid; gap: var(--s-6) var(--gap); }
.eco-stage { position: sticky; top: calc(var(--header-h) + .5rem); z-index: 2; align-self: start; }
.eco-panel { position: relative; background: var(--map-bg); border: 1px solid var(--line); aspect-ratio: 960 / 720; overflow: hidden; }
.eco-panel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); }
.eco-panel > video[data-step="0"], .js .eco-panel > video.is-active { opacity: 1; }
.js .eco-panel > video[data-step="0"]:not(.is-active) { opacity: 0; }
.cot-video { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
[data-theme="dark"] .v-light, [data-theme="light"] .v-dark { display: none; }
@media (max-width: 47.99em) { .cot-video { aspect-ratio: 4 / 5; } }
.eco-panel svg { width: 100%; height: 100%; }
.eco { transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(calc(var(--z, 1) * var(--zm, 1))); transition: transform .9s var(--ease); }
.js .eco[data-step="1"] { --ox: 38%; --oy: 30%; --z: 1.15; }
.js .eco[data-step="2"] { --ox: 49%; --oy: 50%; --z: 1.25; }
.js .eco[data-step="3"] { --ox: 6%; --oy: 88%; --z: 1.5; }
.js .eco[data-step="4"] { --ox: 46%; --oy: 14%; --z: 1.45; }
.js .eco[data-step="5"] { --ox: 64%; --oy: 92%; --z: 1.45; }
.js .eco[data-step="6"] { --ox: 86%; --oy: 50%; --z: 1.3; }
@media (max-width: 63.99em) { .js .eco:where([data-step]:not([data-step="0"], [data-step="all"])) { --zm: 1.3; } }
.eco-step { position: relative; padding: var(--s-6) 0 var(--s-6) var(--s-6); border-left: 1px solid var(--line); }
.eco-step::before {
  content: ""; position: absolute; left: -5px; top: calc(var(--s-6) + .35rem); width: 9px; height: 9px; background: var(--bg);
  border: 1px solid var(--line-2); transform: rotate(45deg); transition: background-color .3s, border-color .3s;
}
.eco-step .tag { display: block; margin-bottom: var(--s-3); }
.eco-step h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); letter-spacing: -.02em; }
.eco-step p:not(.tag) { margin-top: var(--s-4); color: var(--ink-2); max-width: 32rem; }
.eco-step p:not(.tag) + p { margin-top: var(--s-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); list-style: none; padding: 0; }
.chips li { font: 500 var(--t-12)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: .45rem .6rem; border: 1px solid var(--line-2); color: var(--ink-2); }
.js .eco-step { transition: opacity .35s; }
.js .eco-steps.has-active .eco-step:not(.is-active) { opacity: .4; }
.eco-step.is-active::before { background: var(--c-signal); border-color: var(--c-signal); }

.e-region { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
.e-nonet { fill: url(#hatch-e); stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 5; }
.e-hatch { stroke: var(--map-ink); stroke-width: 1; opacity: .25; }
.e-link { fill: none; stroke: var(--map-infra); stroke-width: 2; }
.e-mesh { fill: none; stroke: var(--own); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.e-fed { fill: none; stroke: var(--partner); stroke-width: 1.6; }
.e-flow { fill: none; stroke: var(--own); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 49.9; opacity: 0; }
.e-flow--partner { stroke: var(--partner); }
.e-node { fill: var(--map-tag); stroke: var(--line-2); stroke-width: 1; }
.e-hex { fill: var(--c-wald); stroke: url(#ig-e); stroke-width: 2; }
[data-theme="light"] .e-hex { fill: #FFFFFF; }
.e-hex--b { stroke: var(--partner); }
.e-ico { fill: none; stroke: url(#ig-e); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e-ico--partner { stroke: var(--partner); }
.e-dot { fill: var(--own); stroke: var(--own-edge); stroke-width: 2; }
.e-dot--partner { fill: var(--partner); }
.e-cone { fill: url(#cone-e); }
.e-name { font-size: 15px; fill: var(--ink) !important; }
.e-sub { font-size: 12.5px; }
.e-region-label { font-size: 12.5px; letter-spacing: .1em !important; }
.e-cot { font-size: 13px; fill: var(--own) !important; }
[data-theme="light"] .e-cot { fill: var(--c-wald) !important; }
.c { transition: opacity .45s var(--ease); }
:is(.js, .eco-stage--static) .eco:where([data-step]:not([data-step="0"], [data-step="all"])) .c { opacity: .14; }
:is(.js, .eco-stage--static) .eco[data-step="1"] .s1, :is(.js, .eco-stage--static) .eco[data-step="2"] .s2, :is(.js, .eco-stage--static) .eco[data-step="3"] .s3,
:is(.js, .eco-stage--static) .eco[data-step="4"] .s4, :is(.js, .eco-stage--static) .eco[data-step="5"] .s5, :is(.js, .eco-stage--static) .eco[data-step="6"] .s6 { opacity: 1; }
.eco-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.eco-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.eco-legend i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--own); box-shadow: 0 0 0 2px var(--own-edge); }
.eco-legend i.p { background: var(--partner); }
.eco-legend i.l { width: 1.25rem; height: 2px; border-radius: 0; background: var(--map-infra); box-shadow: none; }
@media (min-width: 64em) {
  .eco-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 5rem); }
  .eco-stage { grid-column: 2; grid-row: 1; top: calc(var(--header-h) + 5vh); }
  .eco-steps { grid-column: 1; grid-row: 1; padding-block: 8vh 22vh; }
  .eco-step { min-height: 52vh; padding-top: 0; }
  .eco-step::before { top: .35rem; }
}
@media (max-width: 63.99em) {
  .eco-stage { margin-inline: calc(-1 * var(--pad)); background: var(--bg); padding: var(--s-2) var(--pad) var(--s-3); border-bottom: 1px solid var(--line); }
  .eco-panel { max-height: 46svh; margin-inline: auto; }
  .eco-legend { display: none; }
  .eco-step { min-height: 58svh; }
  .eco-steps { padding-bottom: 20svh; }
}

/* Fester Schritt ([takhub_grafik slot="oekosystem" step="2"]): statisch, Hervorhebung auch ohne JS, ohne Kamerafahrt */
.eco-stage--static { position: static; margin: 0; padding: 0; background: none; border: 0; }
.eco-stage--static .eco { transform: none; }
@media (max-width: 47.99em) { .eco-stage--static .eco { transform: scale(var(--z, 1)); } } /* mobil: Kamera auf den Schritt, sonst sind die Beschriftungen zu klein */
.eco-stage--static .eco-panel { max-height: none; }
.eco-stage--static .eco-panel > video { opacity: 1; }
.eco-stage--static .eco-legend { display: flex; }
/* Ökosystem-Grafik im Seiten-Hero (z. B. Serverlösungen): begrenzt, ausgewogen zur Textspalte, ohne Anschnitt am Fensterrand */
.hero-media:has(> .eco-stage--static) { max-width: 34rem; width: 100%; }
@media (min-width: 64em) { .hero-media:has(> .eco-stage--static) { margin-right: 0; justify-self: end; } }

/* ---------- Vorteile & Vergleich ---------- */
.adv > *::before, .usecases > *::before { width: 1.75rem; height: 1.75rem; }
.adv h3, .usecases h3, .features h3 { font-size: var(--t-20); letter-spacing: -.005em; }
.adv p, .usecases p, .features p { margin-top: var(--s-2); color: var(--ink-2); font-size: var(--t-16); }
@media (min-width: 48em) { .adv { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); } }
@media (min-width: 75em) { .adv { grid-template-columns: repeat(4, 1fr); column-gap: var(--s-6); } }

.compare-wrap { margin-top: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.section-head + .compare-wrap { margin-top: 0; }
.compare-wrap > h3, .compare-wrap > h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); letter-spacing: -.02em; max-width: 30ch; }
.compare-wrap > p { margin-top: var(--s-4); color: var(--ink-2); max-width: 44rem; }
.compare-wrap > .vs-key { margin-top: var(--s-4); font-size: var(--t-14); line-height: 2; color: var(--ink-2); }
.vs-key .mk { margin-right: var(--s-2); }
.vs-key .mk ~ .mk { margin-left: var(--s-5); }
.compare-wrap > .vs-note { margin-top: var(--s-6); max-width: 52rem; font-size: var(--t-16); }
.vs-note strong { color: var(--ink); }

/* Block-Style „Gegenüberstellung“ (core/table): Kriterium | TAK-Ökosystem | Alternative.
   Wertung je Zelle per <span class="mk mk-yes|mk-mid|mk-no" aria-hidden="true">✓|∼|✕</span><span class="visually-hidden">Stärke: </span>.
   Desktop: Raster mit hervorgehobener ATAK-Bahn. Mobil: je Kriterium ein Block, Zellen mit Kurzlabel (::before). */
/* overflow: Core setzt overflow-x:auto; die versteckte Beschriftung (1 px) ergab sonst eine Mini-Scrollleiste. Die Tabelle bricht unter 56em um, scrollt also nie. */
.wp-block-table.is-style-gegenueberstellung { margin-top: var(--s-6); position: relative; overflow: visible; }
.wp-block-table.is-style-gegenueberstellung table { width: 100%; border-collapse: collapse; font-size: var(--t-16); line-height: 1.5; }
.wp-block-table.is-style-gegenueberstellung :is(th, td) { text-align: left; vertical-align: top; border: 0; }
.wp-block-table.is-style-gegenueberstellung thead { border: 0; }
.wp-block-table.is-style-gegenueberstellung thead th { padding: var(--s-4) var(--s-5); font-size: var(--t-18); font-weight: 700; line-height: 1.3; color: var(--ink); }
.wp-block-table.is-style-gegenueberstellung tbody th { font-size: var(--t-18); font-weight: 650; line-height: 1.35; color: var(--ink); }
.wp-block-table.is-style-gegenueberstellung td { position: relative; color: var(--ink-2); }
.wp-block-table.is-style-gegenueberstellung td:has(> .mk-yes) { color: var(--ink); }
.wp-block-table.is-style-gegenueberstellung :is(thead th, td):nth-child(2) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
[data-theme="light"] .wp-block-table.is-style-gegenueberstellung :is(thead th, td):nth-child(2) { background: #FFFFFF; }
.wp-block-table.is-style-gegenueberstellung thead th:nth-child(2) { border-top: 3px solid var(--mark); }
.wp-block-table.is-style-gegenueberstellung td > .mk { position: absolute; left: var(--s-5); }
.wp-block-table.is-style-gegenueberstellung figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 56em) {
  .wp-block-table.is-style-gegenueberstellung thead th:first-child { padding-left: 0; font-size: var(--t-14); font-weight: 500; color: var(--ink-3); vertical-align: bottom; }
  .wp-block-table.is-style-gegenueberstellung tbody th { width: 24%; padding: var(--s-5) var(--s-5) var(--s-5) 0; }
  .wp-block-table.is-style-gegenueberstellung td { width: 38%; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 2.25rem); }
  .wp-block-table.is-style-gegenueberstellung td > .mk { top: calc(var(--s-5) + .05rem); }
  .wp-block-table.is-style-gegenueberstellung tbody tr { border-top: 1px solid var(--line); }
  .wp-block-table.is-style-gegenueberstellung tbody tr:last-child { border-bottom: 1px solid var(--line); }
}
@media (max-width: 55.99em) {
  .wp-block-table.is-style-gegenueberstellung :is(table, tbody, tr, th, td) { display: block; width: auto; }
  .wp-block-table.is-style-gegenueberstellung thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .wp-block-table.is-style-gegenueberstellung tbody tr { padding-block: var(--s-5); border-top: 1px solid var(--line); }
  .wp-block-table.is-style-gegenueberstellung tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .wp-block-table.is-style-gegenueberstellung tbody th { padding: 0 0 var(--s-3); }
  .wp-block-table.is-style-gegenueberstellung td { padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 2.25rem); }
  .wp-block-table.is-style-gegenueberstellung td > .mk { left: var(--s-4); top: var(--s-3); }
  /* Kurzlabel je Zelle; Spaltenköpfe sind mobil ausgeblendet. Zweite Spalte immer „ATAK“, dritte je Sprache. */
  .wp-block-table.is-style-gegenueberstellung td::before { display: block; font-weight: 700; color: var(--ink); line-height: 1.375rem; margin-bottom: var(--s-1); }
  .wp-block-table.is-style-gegenueberstellung td:nth-child(2)::before { content: "ATAK"; }
  .wp-block-table.is-style-gegenueberstellung td:nth-child(3)::before { content: "Proprietär"; }
  :lang(en) .wp-block-table.is-style-gegenueberstellung td:nth-child(3)::before { content: "Proprietary"; }
  :lang(es) .wp-block-table.is-style-gegenueberstellung td:nth-child(3)::before { content: "Propietario"; }
  :lang(uk) .wp-block-table.is-style-gegenueberstellung td:nth-child(3)::before { content: "Пропрієтарне ПЗ"; }
}

/* Wertungsmarker: Form (Haken gefüllt / Welle / Kreuz) + Farbe + versteckter Text, nie nur Farbe */
.mk { display: inline-grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: 0; line-height: 0; vertical-align: -.3em; }
.mk::before { content: ""; width: .9rem; height: .9rem; background: currentColor; -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }
.mk-yes { background: var(--ok); color: var(--bg); --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mk-mid { color: var(--info); box-shadow: inset 0 0 0 1.5px currentColor; --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M4.5 13.5c2.2-3.2 4.6-3.2 7.5-1.5s5.3 1.7 7.5-1.5'/%3E%3C/svg%3E"); }
.mk-no { color: var(--no); box-shadow: inset 0 0 0 1.5px currentColor; --mk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9'/%3E%3C/svg%3E"); }

/* ---------- TAK Hub: Claim, Leistungen, Versprechen ---------- */
.is-style-claim, .claim { font-size: clamp(2.5rem, 1.3rem + 5vw, 6.25rem); font-weight: 780; letter-spacing: -.03em; line-height: .98; max-width: 14ch; }
.is-style-claim mark { display: block; color: var(--c-signal); background: none; }
[data-theme="light"] .is-style-claim mark { display: table; color: var(--c-gelaende); background: linear-gradient(to top, var(--c-signal) .2em, transparent .2em); }
.brand-head { display: grid; gap: var(--s-6) var(--gap); align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.brand-head .lead { color: var(--ink-2); }
@media (min-width: 64em) { .brand-head { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); } }
.badge { display: inline-flex; justify-self: start; align-items: center; gap: var(--s-3); padding: .55rem .8rem; border: 1px solid var(--c-signal); border-radius: 6px; color: var(--ink); width: fit-content; }
.badge::before { width: 1.25rem; height: 1.25rem; }
[data-theme="light"] .badge { border-color: var(--c-wald); }

/* Leistungen: kompakt, jede Zeile führt zur Unterseite (Gruppe .svc + i-<icon>, darin ein Absatz mit Link) */
.svc-list { display: grid; gap: 0 var(--gap); border-top: 1px solid var(--line); }
.svc { position: relative; border-bottom: 1px solid var(--line); padding: var(--s-5) var(--s-3) var(--s-5) 2.75rem; }
.svc::before { position: absolute; left: 0; top: calc(var(--s-5) + .1rem); }
.svc p { color: var(--ink-2); font-size: var(--t-16); }
.svc a { color: var(--ink-2); text-decoration: none; }
.svc a::after { content: ""; position: absolute; inset: 0; }
.svc a:focus-visible { outline: 0; }
.svc:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.svc strong { display: block; margin-bottom: var(--s-1); color: var(--ink); font-size: var(--t-20); font-weight: 650; text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.svc:hover strong { color: var(--link-hover); }
.svc:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (min-width: 48em) { .svc-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .svc-list { grid-template-columns: repeat(3, 1fr); } .svc-list--4 { grid-template-columns: repeat(4, 1fr); } }
.is-style-versprechen, .pillars { list-style: none; padding: 0; display: grid; gap: var(--s-5) var(--gap); margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.is-style-versprechen li { padding-left: 1.6rem; position: relative; color: var(--ink-2); font-size: var(--t-16); }
.is-style-versprechen li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .6rem; height: .6rem; background: var(--mark); }
.is-style-versprechen strong { display: block; margin-bottom: var(--s-2); color: var(--ink); font-size: var(--t-20); font-weight: 650; }
@media (min-width: 48em) { .is-style-versprechen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .is-style-versprechen { grid-template-columns: repeat(4, 1fr); } }
.sign-off { margin-top: clamp(3rem, 2rem + 3vw, 5rem); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); font-weight: 760; letter-spacing: -.025em; line-height: 1.05; }
.sign-off::after { content: ""; display: block; max-width: 40rem; margin-top: var(--s-4); }

/* ---------- Zwei Wege ---------- */
.ways { display: grid; gap: var(--s-8) var(--gap); }
.way .wp-block-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.way > .tag { margin-top: var(--s-5); }
.way h3 { margin-top: var(--s-3); font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem); letter-spacing: -.02em; }
.way > p:not(.tag) { margin-top: var(--s-4); color: var(--ink-2); max-width: 36rem; }
.link-list { list-style: none; padding: 0; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); padding: var(--s-4) var(--s-3); color: var(--ink-2); font-size: var(--t-16); }
.link-list li:has(> a:only-child) { padding: 0; }
.link-list a { display: block; padding: var(--s-4) var(--s-3); text-decoration: none; color: var(--ink-2); }
.link-list strong, .link-list small { display: block; }
.link-list strong { font-weight: 600; font-size: var(--t-18); color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.link-list small { margin-top: var(--s-1); font-size: var(--t-16); color: var(--ink-2); }
/* ganze Zeile klickbar: Hover und Fokus wie die Leistungsliste (.svc) */
.link-list a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.link-list a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.link-list a:is(:hover, :focus-visible) strong { color: var(--link-hover); }
/* Termine ([takhub_events next="3"]): Datum, Titel, Ort; ab 40em Datum als eigene Spalte */
.event-list { margin-top: 0; }
.event-list .tag { display: block; margin-bottom: var(--s-1); }
@media (min-width: 40em) {
  .event-list a { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; }
  .event-list .tag { grid-row: span 2; margin: 0; }
}
.way .wp-block-buttons { margin-top: var(--s-6); }
@media (min-width: 64em) { .ways { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 6rem); } }

/* ---------- Ablauf (Gruppe .steps mit Gruppen .step: h3 + p) ---------- */
.steps { display: grid; counter-reset: step; }
.step { counter-increment: step; position: relative; padding: 0 0 var(--s-6) 4rem; }
.step::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -.15rem; display: grid; place-items: center;
  width: 3rem; height: 2.75rem; background: color-mix(in srgb, var(--ink) 16%, var(--bg)); color: var(--ink);
  font: 500 var(--t-14)/1 var(--f-mono); z-index: 1; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.step:first-child::before { background: var(--c-signal); color: var(--c-nacht); }
.step::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.6rem; bottom: 0; width: 1px; background: var(--line-2); }
.step:last-child::after { display: none; }
/* Mobil (senkrecht): app.js markiert den Schritt im Blick (.is-current) statt fest Schritt 1 */
@media (max-width: 63.99em) {
  .steps.is-tracked .step:first-child::before { background: color-mix(in srgb, var(--ink) 16%, var(--bg)); color: var(--ink); }
  .steps.is-tracked .step.is-current::before { background: var(--c-signal); color: var(--c-nacht); }
}
@media (max-width: 63.99em) and (prefers-reduced-motion: no-preference) { .steps.is-tracked .step::before { transition: background-color .3s, color .3s; } }
.step h3 { font-size: var(--t-20); margin-bottom: var(--s-2); }
.step p { color: var(--ink-2); font-size: var(--t-16); }
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
  .step { padding: 4.25rem var(--s-4) 0 0; }
  .step::after { left: 3rem; right: calc(-1 * var(--gap)); top: calc(1.375rem - .5px); bottom: auto; width: auto; height: 1px; }
}

/* ---------- Pakete & Richtpreise ---------- */
.pricing { display: grid; gap: var(--gap); }
.plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; gap: var(--s-4); padding: var(--s-6) var(--s-5);
  background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); border-top: 3px solid var(--mark); }
[data-theme="light"] .plan { background: #FFFFFF; }
.plan h3 { font-size: var(--t-30); }
.plan-for { color: var(--ink-2); font-size: var(--t-16); }
.price { font-variant-numeric: tabular-nums lining-nums; line-height: 1.25; }
.price b { display: block; font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
.price span { display: block; font: 500 var(--t-12)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.price b small { font-size: .55em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.price b + span { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.price b ~ b { font-size: var(--t-24); }
.facts, .is-style-haken { list-style: none; padding: 0; font-size: var(--t-16); }
.facts li, .is-style-haken li { padding: var(--s-2) 0 var(--s-2) var(--s-6); position: relative; color: var(--ink-2); }
.facts li::before, .is-style-haken li::before {
  content: ""; position: absolute; left: .2rem; top: .8rem; width: .6rem; height: .32rem;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.plan .facts { align-self: start; }
.plan .wp-block-buttons { align-self: end; }
.workshop { margin-top: var(--gap); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: baseline; padding: var(--s-5); border: 1px solid var(--line); color: var(--ink-2); }
.workshop strong { font-size: var(--t-20); color: var(--ink); }
.pricing-note { margin-top: var(--s-5); font-size: var(--t-14); color: var(--ink-3); }
@media (min-width: 64em) {
  .pricing { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, auto); }
  .plan { padding: var(--s-7) var(--s-6); }
}

/* ---------- Team & Zitat ---------- */
.about { display: grid; gap: var(--s-7) var(--gap); align-items: center; }
.about .wp-block-image img, .about figure > img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about figcaption { margin-top: var(--s-3); font: 500 var(--t-12)/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.about .flow { --flow: var(--s-5); max-width: 40rem; }
.about p { color: var(--ink-2); }
@media (min-width: 64em) { .about { grid-template-columns: 5fr 7fr; column-gap: var(--s-8); } }
/* Referenz (Zitat CRT): folgt dem Theme (im hellen Theme hell trotz is-style-dunkel), freigestelltes Foto weich in den Grund ausgeblendet */
.testimonial.is-style-dunkel { background: var(--bg) var(--topo) 0 0 / 1400px repeat; padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.testimonial-grid { display: grid; align-items: center; }
.testimonial-text { position: relative; z-index: 1; margin: 0; padding: 0; border: 0; }
.testimonial-text::before { content: "“"; display: block; font: 700 clamp(4.5rem, 3rem + 5vw, 7rem)/.6 Georgia, serif; color: var(--ink); height: .45em; }
.testimonial-text p { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem); line-height: 1.45; font-weight: 400; letter-spacing: -.01em; max-width: 34ch; }
.testimonial-text strong { font-weight: 700; }
.testimonial-text cite { display: block; margin-top: var(--s-6); font-size: var(--t-20); font-weight: 600; font-style: normal; color: var(--mark); }
.testimonial-photo img { width: 100%; max-width: 40rem; margin-left: auto;
  -webkit-mask-image: radial-gradient(62% 78% at 60% 42%, #000 50%, transparent 100%); mask-image: radial-gradient(62% 78% at 60% 42%, #000 50%, transparent 100%); }
@media (max-width: 63.99em) { .testimonial-photo { grid-row: 1; margin: -2rem auto -2rem; max-width: 30rem; opacity: .85; } }
@media (min-width: 64em) {
  .testimonial-grid { grid-template-columns: 8fr 4fr; }
  /* Foto läuft wie auf der alten Seite ein Stück unter den Text */
  .testimonial-photo { grid-column: 2; grid-row: 1; width: 190%; max-width: none; margin-left: -90%; }
  .testimonial-photo img { max-width: none; }
  .testimonial-text { grid-column: 1; grid-row: 1; }
}

/* ---------- Fachartikel (Query-Block .posts und PHP-Karten) ---------- */
.posts, .posts .wp-block-post-template { display: grid; gap: var(--s-7) var(--gap); list-style: none; padding: 0; margin: 0; }
.posts .wp-block-post-template { display: contents; }
.post, .posts .wp-block-post { position: relative; }
.post img, .posts .wp-block-post-featured-image img, .post-noimg { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-gelaende); }
.posts .wp-block-post-featured-image { margin: 0; }
.post .tag, .posts .wp-block-post .tag { margin-top: var(--s-4); display: block; }
.post h3, .posts .wp-block-post-title { margin-top: var(--s-2); font-size: var(--t-20); line-height: 1.28; letter-spacing: -.005em; }
.post h3 a, .posts .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.post h3 a::after, .posts .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.post:hover h3 a, .posts .wp-block-post:hover .wp-block-post-title a { color: var(--link-hover); text-decoration: underline; text-decoration-color: var(--link-line); }
.post p, .posts .wp-block-post-excerpt { margin-top: var(--s-2); font-size: var(--t-16); line-height: 1.6; color: var(--ink-2); }
.posts .wp-block-post-excerpt__excerpt { margin: 0; }
@media (min-width: 44em) { .posts, .posts--grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ: Rank-Math-FAQ-Block (Schema von Rank Math), app.js macht daraus ein Akkordeon ---------- */
.faq-layout { display: grid; gap: var(--s-6) var(--gap); }
@media (min-width: 64em) { .faq-layout { grid-template-columns: 4fr 8fr; column-gap: var(--s-8); align-items: start; } .faq-layout .section-head { margin: 0; } }
.rank-math-block { border-top: 1px solid var(--line-2); }
.rank-math-list-item { border-bottom: 1px solid var(--line); }
.rank-math-block .rank-math-question { margin: 0; padding: var(--s-5) 0 var(--s-2); font-size: var(--t-20); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.rank-math-block .rank-math-answer { padding: 0 var(--s-7) var(--s-5) 0; color: var(--ink-2); max-width: 46rem; }
.rank-math-answer > * + * { margin-top: var(--s-3); }
.faq-toggle { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; gap: var(--s-5); width: 100%; cursor: pointer; }
.faq-toggle::after { content: "+"; flex: none; width: 1.5rem; text-align: center; font-weight: 400; font-size: var(--t-30); line-height: .8; color: var(--mark); }
.faq-toggle[aria-expanded="true"]::after { content: "–"; }
.faq-toggle:hover { color: var(--link-hover); }
.faq-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.rank-math-block .rank-math-question:has(.faq-toggle) { padding-bottom: var(--s-5); }
.rank-math-block + * { margin-top: var(--s-8); }

/* ---------- Kontakt (immer dunkel, wie der Fuß des Flyers) ---------- */
.contact { padding-top: calc(var(--section) + var(--slant, 0px)); }
.contact h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); letter-spacing: -.03em; }
.contact .lead { margin-top: var(--s-5); }
.contact-grid { display: grid; gap: var(--s-8) var(--gap); }
.direct { margin-top: var(--s-7); }
.direct > * { padding-block: var(--s-4); }
.direct > *::before { top: 50%; transform: translateY(-50%); }
.direct .tag { display: block; }
.direct a { color: var(--ink); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 600; text-decoration-color: var(--c-signal); }
.direct a:hover { color: var(--c-signal); }
@media (min-width: 64em) { .contact-grid { grid-template-columns: 5fr 7fr; column-gap: var(--s-9); } }
.contact-strip .strip-grid { display: grid; gap: var(--s-5) var(--s-8); align-items: end; }
.contact-strip h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); letter-spacing: -.03em; }
@media (min-width: 64em) { .contact-strip .strip-grid { grid-template-columns: 6fr 4fr auto; } }

/* Formularfelder (Theme und WPForms) */
.field label, .wpforms-field-label { display: block; font-size: var(--t-16); font-weight: 600; margin-bottom: var(--s-2); color: var(--ink); }
.field label small, .wpforms-field-sublabel, .wpforms-optional { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea, .field select, .search-form input,
.wpforms-container input:is([type="text"], [type="email"], [type="tel"], [type="number"]), .wpforms-container textarea, .wpforms-container select {
  width: 100%; max-width: none; min-height: 3rem; padding: .7rem .85rem; font: 400 var(--t-18)/1.4 var(--f-sans); color: var(--ink);
  background: var(--field); border: 1px solid var(--line-2); border-radius: 2px;
}
.field select, .wpforms-container select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.field textarea, .wpforms-container textarea { min-height: 8rem; resize: vertical; }
:is(.field, .search-form, .wpforms-container) :is(input, textarea, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.field .help, .wpforms-field-description { font-size: var(--t-14); color: var(--ink-3); margin-top: var(--s-2); }

/* WPForms (Basis-CSS aus, Markup „modern“): Raster wie Prototyp */
.wpforms-container { margin: 0; }
.wpforms-container .wpforms-field-container { display: grid; gap: var(--s-5); }
@media (min-width: 44em) { .wpforms-container .wpforms-field-container { grid-template-columns: 1fr 1fr; } .wpforms-container .wpforms-field:is(.wpforms-field-select, .wpforms-field-textarea, .wpforms-field-checkbox, .wpforms-field-html) { grid-column: 1 / -1; } }
.wpforms-container .wpforms-field, .wpforms-container fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.wpforms-container .wpforms-required-label { color: var(--ink-3); font-weight: 400; }
.wpforms-container .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; }
.wpforms-container .wpforms-field-checkbox legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wpforms-container .wpforms-field-checkbox li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-16); color: var(--ink-2); }
.wpforms-container .wpforms-field-checkbox li label { display: inline; font-weight: 400; color: var(--ink-2); margin: 0; }
.wpforms-container input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--c-signal); flex: none; }
.wpforms-container .wpforms-submit-container { margin-top: var(--s-5); padding: 0; }
.wpforms-container button[type="submit"] {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .7rem 1.35rem; border: 2px solid transparent; border-radius: 2px;
  font: 600 var(--t-18)/1.2 var(--f-sans); background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.wpforms-container button[type="submit"]:hover { background: var(--accent-hover); color: var(--c-nacht); }
.wpforms-container :is(em, label, div).wpforms-error { display: block; margin-top: var(--s-2); font-size: var(--t-14); font-weight: 600; font-style: normal; color: var(--no); }
.wpforms-container :is(input, textarea, select).wpforms-error { border-color: var(--no); }
.wpforms-container .wpforms-field-hp { display: none !important; }
.wpforms-confirmation-container-full, .wpforms-confirmation-container { padding: var(--s-5) var(--s-6); border: 1px solid var(--line-2); border-left: 4px solid var(--c-signal); color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.wpforms-confirmation-container-full p + p { margin-top: var(--s-3); }
.wpforms-submit-spinner { display: none; }

/* ---------- Footer (immer dunkel) ---------- */
.site-footer { background: var(--c-nacht) var(--topo) 0 0 / 1400px repeat; color: var(--ink-2); font-size: var(--t-16); padding-block: var(--s-8) var(--s-6); border-top: 1px solid var(--line); }
.footer-grid { display: grid; gap: var(--s-7) var(--gap); grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand img { width: 8.75rem; height: 2.1175rem; }
.footer-brand address { font-style: normal; margin-top: var(--s-5); line-height: 1.65; }
.site-footer h2 { font: 500 var(--t-12)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--c-signal); text-decoration: underline; }
.footer-bottom { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; font-size: var(--t-14); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.footer-bottom li + li { margin: 0; }
.footer-bottom .link-button { font-size: var(--t-14); }
.social { display: flex; gap: var(--s-2); }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); }
.social a:hover { border-color: var(--c-signal); }
.social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 2fr 2fr; } .footer-brand { grid-column: auto; } }

/* =================== Hersteller & Integratoren =================== */
.cot-panel { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cot-cell { background: var(--map-bg); padding: var(--s-5); position: relative; min-width: 0; }
[data-theme="dark"] .cot-cell { background: rgb(2 20 17 / .92); }
.cot-cell > .tag { display: block; margin-bottom: var(--s-4); }
.cot-device { display: grid; gap: var(--s-3); justify-items: start; }
.cot-device svg { width: 100%; max-width: 15rem; height: auto; aspect-ratio: 2 / 1; }
.cot-device .d-ico { fill: none; stroke: url(#ig-c); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cot-device .cot-beam { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linecap: round; }
.cot-device text { font: 500 9px var(--f-mono); letter-spacing: .06em; fill: var(--ink-2); }
.cot-device p { font-size: var(--t-14); color: var(--ink-2); }
.cot-code { font: 500 .8125rem/1.7 var(--f-mono); color: var(--ink-2); white-space: pre; overflow-x: auto; margin: 0; }
.cot-code b { font-weight: 500; color: var(--c-signal); }
[data-theme="light"] .cot-code b { color: var(--c-wald); background: rgb(199 247 80 / .4); }
.cot-code i { font-style: normal; color: var(--info); }
.cot-map svg { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.cot-cap { margin-top: var(--s-3); }
@media (min-width: 64em) { .cot-panel { grid-template-columns: 1fr 1.6fr 1fr; } }

.pains { display: grid; gap: 0 var(--gap); border-top: 1px solid var(--line); }
.pains > * { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-3); align-content: start; }
.pains .pain-q { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.75rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.pains p { color: var(--ink-2); font-size: var(--t-16); }
@media (min-width: 64em) { .pains { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-7); } .pains > * { padding-right: var(--s-4); } }

.hero--maker { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.hero--maker .wrap > :last-child { margin-bottom: 0; }
/* Seiten-Hero ohne Grafik: keinen Platz für eine Grafik reservieren */
.hero--maker:not(:has(figure)) { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hero--maker:not(:has(figure)) + .section:not(.is-style-band, .is-style-dunkel, .slanted) { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.maker-head { display: grid; gap: var(--s-6) var(--gap); align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.maker-head h1 { max-width: 15ch; }
.maker-head .badge + h1 { margin-top: var(--s-5); }
@media (min-width: 64em) { .maker-head { grid-template-columns: 7fr 5fr; column-gap: var(--s-8); } }

/* Release-Rhythmus: Achse und Marken per CSS, Beschriftung als Blöcke */
.cadence { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 3rem; position: relative; }
.cadence::before { content: ""; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px; background: var(--line-2); }
.cadence > * { position: relative; display: grid; gap: var(--s-1); align-content: start; font-size: var(--t-14); color: var(--ink-2); }
.cadence > *::before { content: ""; position: absolute; left: 0; top: -2.5rem; width: 2px; height: 2rem; background: var(--ink-2); }
.cadence > *::after { content: ""; position: absolute; left: 3rem; top: -1.9rem; width: .75rem; height: .75rem; background: var(--c-signal); outline: 1px solid var(--own-edge); }
.cadence strong { font-size: var(--t-18); color: var(--ink); }
.cadence-cap { margin-top: calc(-1 * clamp(3rem, 2rem + 3vw, 5rem) + var(--s-5)); margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
@media (max-width: 47.99em) {
  .cadence { grid-template-columns: 1fr 1fr; row-gap: var(--s-5); padding-top: 0; }
  .cadence::before, .cadence > *::before, .cadence > *::after { display: none; }
  .cadence > * { border-top: 2px solid var(--c-signal); padding-top: var(--s-3); }
}

.usecases > * { padding-left: 3.25rem; }
.usecases > *::before { width: 2.25rem; height: 2.25rem; }
@media (min-width: 48em) { .usecases, .features { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-7); } }
@media (min-width: 75em) { .usecases, .features { grid-template-columns: repeat(3, 1fr); } }

.terms { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.terms > * { background: var(--bg); padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.terms h3 { font-size: var(--t-24); }
.terms .price-line { margin-top: var(--s-3); font-size: var(--t-20); font-weight: 600; color: var(--ink); }
.terms p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-16); }
@media (min-width: 64em) { .terms { grid-template-columns: repeat(3, 1fr); } .terms > * + * { padding-left: var(--s-6); } }

/* =================== Generische Muster für Unterseiten =================== */
.text-media { display: grid; gap: var(--s-7) var(--gap); align-items: center; }
.text-media .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.text-media .flow p { color: var(--ink-2); }
@media (min-width: 64em) { .text-media { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } .text-media--rechts > .wp-block-image { order: 2; } }
.cards > * { min-width: 0; }
.cards { display: grid; gap: var(--gap); }
.card { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); border-top: 3px solid var(--mark); }
.card h3 { font-size: var(--t-24); }
/* Karte mit genau einem Link als letztem Absatz („Mehr erfahren“): ganze Karte klickbar, Hover/Fokus wie Leistungsliste */
.card:has(> p:last-child > a:only-child):not(:has(:not(.card > p:last-child) > a, .wp-block-buttons, details)) { position: relative; }
.card:has(> p:last-child > a:only-child):not(:has(:not(.card > p:last-child) > a, .wp-block-buttons, details)) > p:last-child > a::after { content: ""; position: absolute; inset: 0; }
.card:has(> p:last-child > a:only-child):not(:has(:not(.card > p:last-child) > a, .wp-block-buttons, details)):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.card:has(> p:last-child > a:only-child):not(:has(:not(.card > p:last-child) > a, .wp-block-buttons, details)):is(:hover, :focus-within) :is(h3, a) { color: var(--link-hover); }
.card:has(> p:last-child > a:only-child):not(:has(:not(.card > p:last-child) > a, .wp-block-buttons, details)):has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.card:has(> p:last-child > a:only-child):not(:has(:not(.card > p:last-child) > a, .wp-block-buttons, details)) a:focus-visible { outline: 0; }
.card .tag + h3 { margin-top: var(--s-2); }
.card p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-16); }
.card .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--s-4); }
.card :is(ul, ol) { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-16); }
.card :is(ul, ol):not([class*="is-style-"], .facts, .chips) { padding-left: 1.25em; }
.card li + li { margin-top: var(--s-1); }
.card :is(.wp-block-details, .wp-block-buttons) { margin-top: var(--s-4); }
/* Katalog (z. B. Hardware): Karten wachsen nicht mit, wenn in der Nachbarkarte „Technische Daten“ aufgeklappt wird */
.cards--start { align-items: start; }
.card:has(.is-style-datenblatt) { container-type: inline-size; }
@media (min-width: 40em) { .cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.facts-row { display: grid; gap: var(--s-5) var(--gap); border-block: 1px solid var(--line); padding-block: var(--s-6); }
.facts-row > * { display: grid; gap: var(--s-1); align-content: start; }
.facts-row strong { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 700; color: var(--ink); line-height: 1.2; }
.facts-row p { color: var(--ink-2); font-size: var(--t-16); }
@media (min-width: 48em) { .facts-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .facts-row { grid-template-columns: repeat(4, 1fr); } }
.cta-band .wrap { display: grid; gap: var(--s-5) var(--s-8); align-items: end; }
.cta-band h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); letter-spacing: -.03em; }
.cta-band p { color: var(--ink-2); font-size: var(--t-lead); max-width: 40rem; }
@media (min-width: 64em) { .cta-band .wrap { grid-template-columns: 7fr 5fr; } }

/* Boxen (core/group-Stile) – auch auf Seiten nutzbar */
.is-style-summary { font-size: var(--t-18); line-height: 1.55; background: #F2FBDA; color: var(--c-gelaende); padding: var(--s-5) var(--s-6); border-top: 3px solid var(--c-wald); }
.is-style-summary > h2 { all: unset; display: block; font: 500 var(--t-12)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #3B4A44; margin-bottom: var(--s-3); }
.is-style-summary ul { padding-left: 1.1em; }
.is-style-summary li::marker { color: var(--c-wald); }
.is-style-hinweis, .is-style-tipp, .is-style-achtung { font-size: var(--t-18); line-height: 1.55; padding: var(--s-4) var(--s-5); border-left: 4px solid; color: var(--c-gelaende); }
.is-style-hinweis > * + *, .is-style-tipp > * + *, .is-style-achtung > * + * { margin-top: var(--s-2); }
.is-style-hinweis a, .is-style-tipp a, .is-style-achtung a, .is-style-summary a { color: var(--c-blau); text-decoration-color: var(--c-blau); }
.box-label { font-weight: 700; display: block; }
.is-style-hinweis { background: #EAF0F8; border-color: var(--c-blau); }
.is-style-hinweis .box-label { color: var(--c-blau); }
.is-style-tipp { background: #F2FBDA; border-color: var(--c-wald); }
.is-style-tipp .box-label { color: #2E6B18; }
.is-style-achtung { background: #FCF0EA; border-color: var(--c-glut); }
.is-style-achtung .box-label { color: #A3370D; }

/* Tabellen auf Seiten (Beiträge: article.css). Gegenüberstellung hat eigene Regeln. */
.entry .wp-block-table:not(.is-style-gegenueberstellung) { overflow: auto hidden; position: relative; } /* nur seitlich scrollen, keine Mini-Scrollleiste */
.entry .wp-block-table:not(.is-style-gegenueberstellung) table { width: 100%; border-collapse: collapse; font-size: var(--t-16); line-height: 1.45; font-variant-numeric: tabular-nums; }
.entry .wp-block-table:not(.is-style-gegenueberstellung) :is(th, td) { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border: 0; border-bottom: 1px solid var(--line); }
.entry .wp-block-table:not(.is-style-gegenueberstellung) thead { border: 0; }
.entry .wp-block-table:not(.is-style-gegenueberstellung) thead th { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line-2); }
.entry .wp-block-table:not(.is-style-gegenueberstellung) figcaption { margin-top: var(--s-3); font-size: var(--t-14); color: var(--ink-3); text-align: left; }
.entry .wp-block-table:not(.is-style-gegenueberstellung) td { color: var(--ink-2); }
/* Datenblatt: Merkmal als Mono-Label, Wert in Textfarbe; in schmalen Karten untereinander */
.entry .is-style-datenblatt td:first-child { width: 38%; padding-top: .95rem; font: 500 var(--t-12)/1.35 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.entry .is-style-datenblatt td + td { color: var(--ink); }
.entry .is-style-datenblatt tr:last-child > * { border-bottom: 0; }
@container (max-width: 24rem) {
  .entry .is-style-datenblatt :is(tbody, tr, td) { display: block; width: auto; }
  .entry .is-style-datenblatt td:first-child { width: auto; padding: var(--s-3) 0 0; border: 0; }
  .entry .is-style-datenblatt td + td { padding: var(--s-1) 0 var(--s-3); }
  .entry .is-style-datenblatt tr:last-child td + td { padding-bottom: 0; }
}

/* Aufklappbereich (core/details): Summary wie die FAQ (+/– in Signal), Fokusrahmen */
.wp-block-details { border-top: 1px solid var(--line); }
.wp-block-details > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 2.75rem; padding-block: var(--s-2);
  list-style: none; cursor: pointer; font-weight: 600; color: var(--ink); }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after { content: "+"; flex: none; width: 1.5rem; text-align: center; font-weight: 400; font-size: var(--t-30); line-height: .8; color: var(--mark); }
.wp-block-details[open] > summary::after { content: "–"; }
.wp-block-details > summary:hover { color: var(--link-hover); }
.wp-block-details > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wp-block-details[open] { padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.wp-block-details > :not(summary) + * { margin-top: var(--s-3); }

/* Linkliste für Artikel (Liste „Fachartikel zum Thema“): ohne Browser-Einzug, Linie je Eintrag */
.is-style-links { list-style: none; padding: 0; margin-top: var(--s-3); border-top: 1px solid var(--line); max-width: 52rem; }
.is-style-links li { padding: var(--s-3) 0 var(--s-3) 1.75rem; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-16); position: relative; }
.is-style-links li::before { content: ""; position: absolute; left: .15rem; top: 1.2rem; width: .55rem; height: .55rem; border-top: 2px solid var(--mark); border-right: 2px solid var(--mark); transform: rotate(45deg); }
.is-style-links a { font-weight: 600; font-size: var(--t-18); }

/* Rechtstexte (Vorlage „Rechtstext“): Lesebreite, klare Überschriften-Stufen */
.entry--legal > h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); letter-spacing: -.015em; line-height: 1.2; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line-2); }
.entry--legal > h3 { font-size: var(--t-20); letter-spacing: -.005em; line-height: 1.3; margin-top: var(--s-6); }
.entry--legal > h4 { font-size: var(--t-18); line-height: 1.35; margin-top: var(--s-5); }
.entry--legal > :is(h2, h3, h4) + * { margin-top: var(--s-3); }
.entry--legal > :is(p, ul, ol) { color: var(--ink-2); }
.entry--legal :is(li) + li { margin-top: var(--s-2); }
.entry--legal strong { color: var(--ink); }
.entry--legal > h2:first-child { margin-top: var(--s-4); }

/* =================== Blog-Übersicht, Archive, Suche, 404 =================== */
.list-head { padding-bottom: 0; }
.list-head .maker-head { margin-bottom: var(--s-6); }
.list-head .lead p + p { margin-top: var(--s-3); }
.topics ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.topics a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-4); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-16); }
.topics a:hover { border-color: var(--link-hover); color: var(--link-hover); }
.topics a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.list-body { padding-top: var(--s-7); }
.lead-post { position: relative; display: grid; gap: var(--s-5) var(--s-8); align-items: center; margin-bottom: var(--s-8); padding-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
.lead-post img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.lead-post .tag { display: block; color: var(--ink-3); }
.lead-post h2 { margin-top: var(--s-3); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); letter-spacing: -.025em; }
.lead-post h2 a { color: var(--ink); text-decoration: none; }
.lead-post h2 a::after { content: ""; position: absolute; inset: 0; }
.lead-post:hover h2 a { color: var(--link-hover); text-decoration: underline; text-decoration-color: var(--link-line); }
.lead-post p { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-lead); }
@media (min-width: 64em) { .lead-post { grid-template-columns: 7fr 5fr; } }
.pagination { margin-top: var(--s-8); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 600; }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagination a.page-numbers:hover { border-color: var(--link-hover); color: var(--link-hover); }
.author-posts-title { margin-top: var(--s-9); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); }
.author-head h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.search-form { display: grid; gap: var(--s-2); max-width: 36rem; }
.search-form label { font-weight: 600; font-size: var(--t-16); }
.search-row { display: flex; gap: var(--s-2); }
.search-row input { flex: 1; min-width: 0; }
.error-404 h1 { margin-top: var(--s-4); max-width: 16ch; }
.error-404 .lead { margin-block: var(--s-5) var(--s-7); }
.error-404 .link-list { max-width: 40rem; margin-top: var(--s-8); }

/* =================== The Events Calendar im Theme-Rahmen =================== */
.tribe-events-pg-template, #tribe-events-pg-template { max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: var(--s-8) var(--pad) var(--section); overflow-x: clip; }
.tribe-common, .tribe-events, .tribe-events-single {
  --tec-font-family-sans-serif: var(--f-sans); --tec-font-family-base: var(--f-sans);
  --tec-color-text-primary: var(--ink); --tec-color-text-secondary: var(--ink-2); --tec-color-text-events-title: var(--ink);
  --tec-color-text-event-title: var(--ink); --tec-color-text-event-date: var(--ink-2); --tec-color-text-event-date-secondary: var(--ink-3);
  --tec-color-text-day-of-week-month: var(--ink-3); --tec-color-text-primary-light: var(--ink-3); --tec-color-icon-primary: var(--ink-2);
  --tec-color-icon-secondary: var(--ink-3); --tec-color-icon-active: var(--c-signal); --tec-color-icon-focus: var(--focus);
  --tec-color-background: transparent; --tec-color-background-events: transparent; --tec-color-background-secondary: color-mix(in srgb, var(--ink) 4%, transparent);
  --tec-color-background-events-bar-submit-button: var(--accent); --tec-color-background-events-bar-submit-button-hover: var(--accent-hover);
  --tec-color-text-events-bar-submit-button: var(--on-accent); --tec-color-border-default: var(--line-2); --tec-color-border-secondary: var(--line);
  --tec-color-border-tertiary: var(--line); --tec-color-border-active: var(--c-signal); --tec-color-accent-primary: var(--accent);
  --tec-color-accent-primary-hover: var(--accent-hover); --tec-color-accent-primary-active: var(--accent); --tec-color-link-primary: var(--link);
  --tec-color-link-accent: var(--link); --tec-color-link-accent-hover: var(--link-hover); --tec-color-day-marker-month: var(--c-signal);
  --tec-color-background-primary-multiday: color-mix(in srgb, var(--c-signal) 25%, transparent); --tec-color-background-transparent: transparent;
  --tec-color-background-tooltip: var(--bg); --tec-color-background-messages: color-mix(in srgb, var(--ink) 6%, transparent);
  --tec-color-text-disabled: var(--ink-3); --tec-color-background-datepicker: var(--bg);
}
.tribe-common.tribe-events { overflow-x: clip; }
.tribe-events .tribe-events-c-messages__message, .tribe-events-c-messages__message { color: var(--ink); }
.tribe-events-single, .tribe-events-pg-template .tribe-events-single { color: var(--ink); }
.tribe-events-single .tribe-events-single-event-title { font-size: var(--t-h2); color: var(--ink); }
.tribe-events-content, .tribe-events-single-section, .tribe-events-meta-group { color: var(--ink-2); }
.tribe-events-pg-template a, .tribe-events-single a { color: var(--link); }
.tribe-events-back a, .tribe-events-meta-group .tribe-events-single-section-title { color: var(--ink); }
/* Vorlage „Event Page Templates“: graue Seitenleiste an die Theme-Flächen anpassen */
.epta-sidebar-area { background: color-mix(in srgb, var(--ink) 6%, var(--bg)) !important; color: var(--ink-2); }
.epta-sidebar-area :is(dt, dd, abbr, span, li, a, address) { color: var(--ink-2); }
.epta-sidebar-area a { color: var(--link); }

/* =================== Bewegung =================== */
/* Alles hier ist Zusatz: ohne JS (.js fehlt) oder mit reduce bleibt jede Grafik vollständig und still. */
@media (prefers-reduced-motion: no-preference) {
  .js .map .m-intro { animation: m-in .7s var(--ease) both; animation-delay: var(--d, 0s); }
  .js .map .m-sector { stroke-dashoffset: 0; animation: m-in .6s var(--ease) .5s both; }
  .js .map .m-q { animation: m-q .6s var(--ease) both; animation-delay: var(--d, 2s); }
  .js .map .m-ping { animation: m-ping 3.2s ease-out infinite; animation-delay: var(--p, 2.2s); }
  .js .map .m-mover, .js .map .m-mover-edge { animation: m-move var(--t, 14s) linear infinite; animation-delay: var(--p, 0s); }
  .js .map .m-chat-msg { opacity: 0; animation: m-chat 12s linear infinite; animation-delay: var(--p, 2.4s); }
  .js .map .m-live { animation: m-blink 2s steps(2, jump-none) infinite; }
  .js .map .m-cone { animation: m-cone 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
  .js .eco .e-flow { opacity: 1; animation: e-flow var(--t, 3.2s) linear infinite; animation-delay: var(--p, 0s); }
  .js .eco.is-paused .e-flow, .js .map.is-paused *, .js .cot-panel.is-paused * { animation-play-state: paused !important; }
  .js .eco .e-ping { animation: m-ping 3s ease-out infinite; animation-delay: var(--p, 0s); transform-box: fill-box; transform-origin: center; }
  .js .cot-panel .cot-line { animation: cot-line 9s linear infinite; animation-delay: var(--d, 0s); }
  .js .cot-panel .cot-target { animation: cot-target 9s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
  .js .cot-panel .cot-beam { animation: cot-beam 9s linear infinite; }
  .js .cot-panel .cot-link { animation: cot-fade 9s linear infinite; }
}
@keyframes m-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-q { from { opacity: 0; transform: translateX(-8px); } }
@keyframes m-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes m-move { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes m-chat { 0%, 2% { opacity: 0; } 4%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes m-blink { 50% { opacity: .25; } }
@keyframes m-cone { to { opacity: .55; } }
@keyframes e-flow { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }
@keyframes cot-line { 0%, 8% { color: var(--ink-3); } 12%, 70% { color: var(--ink); } 85%, 100% { color: var(--ink-3); } }
@keyframes cot-target { 0%, 38% { opacity: 0; transform: scale(.3); } 46%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes cot-fade { 0%, 38% { opacity: 0; } 46%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cot-beam { 0%, 6% { stroke-dashoffset: 100; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 40%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .eco { transform: none !important; }
  .m-chat-msg:not(:first-of-type) { display: none; }
}
@media (max-width: 43.99em) { .hero .wp-block-buttons > *, .hero .wp-block-button__link { flex: 1 1 100%; width: 100%; } .hero .lead { font-size: var(--t-18); } }
/* Niedrige Viewports: volle Schrift- und Zielgrößen statt verschachteltem Plugin-Zoom. */
@media (max-height: 30em) {
  .site-header { position: relative; }
  .cmplz-cookiebanner.cmplz-cookiebanner {
    zoom: 1 !important; max-height: 100dvh; overflow: auto;
  }
  .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    zoom: 1 !important; min-height: 44px !important; height: auto !important;
    font-size: 1rem !important; line-height: 1.3 !important; padding: .6rem 1rem !important;
  }
  .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents,
  .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-information,
  .cmplz-cookiebanner.cmplz-cookiebanner .cmplz-close { zoom: 1 !important; }
  .cmplz-cookiebanner .cmplz-documents a { zoom: 1 !important; display: inline-flex; align-items: center; min-height: 24px; }
  .cmplz-cookiebanner .cmplz-logo, .cmplz-cookiebanner .cmplz-title { display: none !important; }
}
@media print {
  :root, [data-theme], .is-style-dunkel, [data-theme="light"] .testimonial.is-style-dunkel {
    color-scheme: light; --ink: #000; --ink-2: #222; --ink-3: #444; --link: #000;
    --bg: #fff; --band: #fff; --raise: #fff; --field: #fff; --topo: none; --glow: transparent;
    --accent: #fff; --on-accent: #000; --ok: #000; --no: #000; --mark: #000;
  }
  .site-header, .site-footer, .contact, .theme-toggle, .newsletter, .hero-media, video, .wp-block-buttons, .btn { display: none !important; }
  body, section, .is-style-dunkel, .testimonial.is-style-dunkel { background: #fff !important; color: var(--ink); }
  .hero::before, .hero::after { display: none; }
  .rank-math-answer[hidden] { display: block !important; }
}

/* =================== Feinschliff (phase3-theme-polish) =================== */
/* Preiszeile in Karten (Muster „Richtpreise kurz“) und Konditionen */
.card .price-line, .terms .price-line { margin-top: var(--s-3); font-size: var(--t-24); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
:is(.card, .terms) .price-line small { font-size: .62em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }

/* WPForms: Sobald das Formular Fehler zeigt, hat jedes Feld Platz für eine Meldungszeile, die Meldung steht absolut darin.
   Verschwindet eine Meldung beim Verlassen eines Feldes, rutscht nichts nach (vorher verfehlte der Klick die Datenschutz-Checkbox). */
.wpforms-form:has(em.wpforms-error) .wpforms-field:not(.wpforms-field-hp) { position: relative; padding-bottom: 1.75rem; }
.wpforms-form:has(em.wpforms-error) .wpforms-field em.wpforms-error { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; line-height: 1.4; }

/* The Events Calendar: Einzelansicht (Standardvorlage) */
.tribe-events-single .tribe-events-schedule { margin-top: var(--s-4); }
.tribe-events-single .tribe-events-schedule h2, .tribe-events-schedule .tribe-events-schedule__datetime { font: 500 var(--t-14)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tribe-events-single .tribe-events-notices { margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--info); background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2); font-size: var(--t-16); }
.tribe-events-single .tribe-events-notices ul { list-style: none; margin: 0; padding: 0; }
.tribe-events-single .tribe-events-event-image img { width: 100%; max-width: 64rem; height: auto; }
.tribe-events-single .tribe-events-single-event-description { max-width: 46rem; font-size: var(--t-18); color: var(--ink-2); }
.tribe-events-single .tribe-events-event-meta.primary { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-6) var(--gap);
  border: 0; border-top: 1px solid var(--line); margin-top: var(--s-6); padding-top: var(--s-5); color: var(--ink-2); font-size: var(--t-16); }
.tribe-events-single .tribe-events-event-meta.primary::before, .tribe-events-single .tribe-events-event-meta.primary::after { content: none; }
.tribe-events-single .tribe-events-event-meta .tribe-events-meta-group { width: auto; float: none; margin: 0; padding: 0; }
.tribe-events-single .tribe-events-meta-list { list-style: none; margin: 0; padding: 0; }
.tribe-events-single .tribe-events-meta-label { display: block; margin-top: var(--s-3); font-weight: 600; color: var(--ink); }
.tribe-events-single .tribe-events-meta-item:first-child .tribe-events-meta-label { margin-top: 0; }
.tribe-events-single .tribe-events-gmap { display: table; margin-top: var(--s-2); }
.tribe-events-single .tribe-events-single-section-title { font: 500 var(--t-12)/1.35 var(--f-mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) !important; margin-bottom: var(--s-3); }
.tribe-events-single .tribe-events-meta-group :is(dd, abbr) { color: var(--ink-2); text-decoration: none; border: 0; }
.tribe-events-single .tribe-events-address, .tribe-events-single .tribe-address { font-style: normal; line-height: 1.6; }
.tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button { border: 2px solid var(--ink-2) !important; border-radius: 2px !important; background: transparent !important; color: var(--ink) !important; }
.tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover, .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within { border-color: var(--link-hover) !important; color: var(--link-hover) !important; }
.tribe-events-c-subscribe-dropdown__button-text, .tribe-events-c-subscribe-dropdown .tribe-common-c-svgicon { color: inherit !important; }
.tribe-events-c-subscribe-dropdown__content { background: var(--bg) !important; border: 1px solid var(--line-2) !important; }
.tribe-events-c-subscribe-dropdown__list-item-link { color: var(--link) !important; }
.tribe-events-single .tribe-events-nav-pagination a, .tribe-events-back a { color: var(--link); font-weight: 600; }

/* Complianz-Cookie-Banner im Theme-Stil; Farben folgen Dunkel/Hell. „Akzeptieren“ und „Ablehnen“ gleichwertig (kein Nudging),
   „Einstellungen“ als Rahmen-Button. Der schwebende Knopf „Zustimmung verwalten“ entfällt (Fußzeile: „Cookie-Einstellungen“). */
.cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--bg); --cmplz_banner_border_color: var(--line-2); --cmplz_banner_border_width: 1px; --cmplz_banner_border_radius: 0;
  --cmplz_text_color: var(--ink); --cmplz_hyperlink_color: var(--link); --cmplz_title_font_size: var(--t-18);
  --cmplz_text_font_size: var(--t-14); --cmplz_link_font_size: var(--t-14); --cmplz_category_body_font_size: var(--t-14); --cmplz_button_font_size: var(--t-16);
  --cmplz_button_border_radius: 2px; --cmplz_category_header_always_active_color: var(--ok);
  --cmplz_button_accept_background_color: var(--accent); --cmplz_button_accept_border_color: var(--accent); --cmplz_button_accept_text_color: var(--on-accent);
  --cmplz_button_deny_background_color: var(--accent); --cmplz_button_deny_border_color: var(--accent); --cmplz_button_deny_text_color: var(--on-accent);
  --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: var(--ink-2); --cmplz_button_settings_text_color: var(--ink);
  --cmplz_slider_active_color: var(--accent); --cmplz_slider_inactive_color: var(--line-2); --cmplz_slider_bullet_color: var(--bg);
  font-family: var(--f-sans); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35) !important; border-top: 3px solid var(--mark) !important;
}
.cmplz-cookiebanner .cmplz-title { font-weight: 700 !important; }
.cmplz-cookiebanner .cmplz-btn { border-width: 2px !important; font-weight: 600 !important; }
.cmplz-cookiebanner .cmplz-btn:is(.cmplz-accept, .cmplz-deny):hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--on-accent) !important; }
[data-theme="dark"] .cmplz-cookiebanner .cmplz-btn:is(.cmplz-accept, .cmplz-deny):hover, :root:not([data-theme="light"]) .cmplz-cookiebanner .cmplz-btn:is(.cmplz-accept, .cmplz-deny):hover { color: var(--c-nacht) !important; }
.cmplz-cookiebanner .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences):hover { border-color: var(--link-hover) !important; color: var(--link-hover) !important; }
.cmplz-cookiebanner :is(.cmplz-btn, a, .cmplz-close, summary, input):focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px; }
.cmplz-cookiebanner .cmplz-links a { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: .2em; }
.cmplz-cookiebanner .cmplz-close { color: var(--ink-2); }
/* Kategorien in „Einstellungen ansehen“: Complianz-Grau (halbtransparent) ergab im Dunkelmodus zu wenig Kontrast; body erhöht die Spezifität, weil Complianz sein CSS später lädt */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: var(--raise); }
#cmplz-manage-consent .cmplz-manage-consent { display: none !important; }

/* Five cards: 3 + 2 on laptops, one row on wide screens instead of 4 + 1; an odd last door spans both columns.
   minmax(0, 1fr): alle gleich breit, auch wenn ein langes Wort („Katastrophenschutz“) breiter ist als die Spalte → Silbentrennung. */
@media (min-width: 64em) { .cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 90em) {
  .cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards:has(> :nth-child(5):last-child) > .card { padding: var(--s-5); hyphens: auto; }
  .cards:has(> :nth-child(5):last-child) > .card h3 { font-size: var(--t-20); }
}
.doors > .door:last-child:nth-child(odd) { grid-column: 1 / -1; }