/* ==========================================================================
   Dare Solutions IT – Gestaltung (Designentwurf 03b, „Boxen“; WordPress-Ergänzungen: wordpress.css)
   Gestaltungsprinzip nach Vorbild WeFix: große, abgerundete Rahmen-Boxen mit
   20 px Abstand zum Fensterrand, schwebende Navigation, Karten mit eingesetzten
   Bildern, Pfeil-Buttons – umgesetzt in den Dare-Farben (Dunkelblau + Cyan).

   Inhalt
    1  Tokens            8  Leistungen (dunkle Box, Schritte, Karussell)
    2  Basis             9  Cloud-Karten, Link-Boxen
    3  Layout           10  Banner, Hotspots
    4  Bausteine        11  Warum wir, Kundenstimmen
    5  Header, Menü     12  CTA-Box, Footer
    6  Hero-Slider      13  Unterseiten (Seitenkopf, Sidebar, Inhalte, Blog, Formulare)
    7  Band, Über uns   14  Hilfsklassen, Bewegung, Breakpoints

   WordPress: Die Navigation nutzt die Ausgabe von wp_nav_menu()
   (.menu, .menu-item, .menu-item-has-children, .sub-menu, .current-menu-item),
   Inhalte die Block-Klassen (.wp-block-*), Paginierung .page-numbers.
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --c-dark: #111b22;
  --c-dark-2: #172530;
  --c-dark-3: #22323d;
  --c-brand: #0088b8;          /* Logo-Cyan: Flächen, Linien, Symbole */
  --c-accent: #00779f;         /* Buttons und Links (5,1 : 1 mit Weiß) */
  --c-accent-hover: #00658a;
  --c-accent-light: #4cc3ee;   /* Akzent auf dunklem Grund */
  --c-accent-soft: #e6f4f9;
  --c-heading: #111b22;
  --c-text: #55616a;
  --c-muted: #66717a;
  --c-line: #dfe4e8;
  --c-line-dark: rgba(255, 255, 255, .14);
  --c-surface: #f3f5f7;
  --c-surface-2: #e9edf0;
  --c-white: #fff;
  --c-star: #f5b301;

  --font-head: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --frame: 20px;                       /* Abstand der Rahmen-Boxen zum Rand */
  --container: 1300px;
  --gutter: clamp(20px, 5vw, 70px);
  --section: clamp(80px, 9vw, 130px);

  --r-frame: 30px;
  --r-card: 30px;
  --r-img: 22px;
  --r-box: 16px;
  --r-btn: 10px;
  --r-sm: 6px;

  --topbar-h: 48px;
  --hdr-gap: 20px;
  --header-h: 90px;
  --hdr-inset-home: calc(var(--frame) + 20px);

  --shadow-sm: 0 2px 8px rgba(17, 27, 34, .06);
  --shadow-md: 0 18px 40px -14px rgba(17, 27, 34, .22);
  --shadow-lg: 0 30px 70px -22px rgba(17, 27, 34, .34);

  --ease: cubic-bezier(.22, .7, .2, 1);
  --dur: .35s;

  --circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%23fff' stroke-opacity='.06' stroke-width='1.5'%3E%3Cpath d='M24 40h56l18 18h54M60 110v40l16 16h70M190 20v50l-20 20v34M236 150h-28v44l-18 18h-60M20 200h40l20 20v24M112 96h44'/%3E%3Ccircle cx='24' cy='40' r='3.5'/%3E%3Ccircle cx='152' cy='58' r='3.5'/%3E%3Ccircle cx='60' cy='110' r='3.5'/%3E%3Ccircle cx='146' cy='166' r='3.5'/%3E%3Ccircle cx='190' cy='20' r='3.5'/%3E%3Ccircle cx='170' cy='124' r='3.5'/%3E%3Ccircle cx='236' cy='150' r='3.5'/%3E%3Ccircle cx='130' cy='212' r='3.5'/%3E%3Ccircle cx='20' cy='200' r='3.5'/%3E%3Ccircle cx='80' cy='244' r='3.5'/%3E%3Ccircle cx='112' cy='96' r='3.5'/%3E%3Ccircle cx='156' cy='96' r='3.5'/%3E%3C/svg%3E");
  --circuit-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='1.5'%3E%3Cpath d='M24 40h56l18 18h54M60 110v40l16 16h70M190 20v50l-20 20v34M236 150h-28v44l-18 18h-60M20 200h40l20 20v24M112 96h44'/%3E%3Ccircle cx='24' cy='40' r='3.5'/%3E%3Ccircle cx='152' cy='58' r='3.5'/%3E%3Ccircle cx='60' cy='110' r='3.5'/%3E%3Ccircle cx='146' cy='166' r='3.5'/%3E%3Ccircle cx='190' cy='20' r='3.5'/%3E%3Ccircle cx='170' cy='124' r='3.5'/%3E%3Ccircle cx='236' cy='150' r='3.5'/%3E%3Ccircle cx='130' cy='212' r='3.5'/%3E%3Ccircle cx='20' cy='200' r='3.5'/%3E%3Ccircle cx='80' cy='244' r='3.5'/%3E%3Ccircle cx='112' cy='96' r='3.5'/%3E%3Ccircle cx='156' cy='96' r='3.5'/%3E%3C/svg%3E");
}

/* 2 · Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font: 500 1rem/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--c-heading);
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.5rem, 1.5rem + 3.7vw, 4.6rem); line-height: 1.06; }
h2, .h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.1; }
h3, .h3 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em; }
h4, .h4 { font-size: 1.25rem; letter-spacing: -.01em; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-hover); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

strong, b { font-weight: 700; }

::selection { background: rgba(0, 136, 184, .22); color: var(--c-heading); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.hero :focus-visible,
.services :focus-visible,
.banner :focus-visible,
.site-footer :focus-visible,
.cta-box :focus-visible {
  outline-color: var(--c-accent-light);
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  background: var(--c-dark);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; color: #fff; }

/* WordPress-Standard für versteckte, vorlesbare Texte */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  word-wrap: normal !important;
}

/* 3 · Layout ------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Breite eines Containers innerhalb einer Rahmen-Box (Box sitzt schon um --frame eingerückt) */
.container-in-frame {
  width: min(100% - 2 * (var(--gutter) - var(--frame)), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--tight-top { padding-top: calc(var(--section) * .55); }
.section--tight-bottom { padding-bottom: calc(var(--section) * .55); }

.frame {
  margin-inline: var(--frame);
  border-radius: var(--r-frame);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 60px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.section-head h2 { max-width: 720px; margin: 0; }
.section-head__intro { max-width: 560px; margin: 18px 0 0; }
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-head--center h2 { max-width: 820px; margin-inline: auto; }

/* 4 · Bausteine ---------------------------------------------------------- */

/* Rubrik-Label mit eckigen Klammern: [ Label ] */
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 3px 12px;
  color: var(--c-heading);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  border: 1.5px solid var(--c-brand);
}
.eyebrow::before { left: 0; border-right: 0; border-radius: 4px 0 0 4px; }
.eyebrow::after { right: 0; border-left: 0; border-radius: 0 4px 4px 0; }
.eyebrow--light { color: #fff; }
.eyebrow--light::before,
.eyebrow--light::after { border-color: var(--c-accent-light); }

/* Button: Text + quadratischer Pfeil-Block */
.btn {
  --btn-c: var(--c-dark);
  --btn-fg: var(--c-heading);
  --btn-fill-fg: #fff;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  min-height: 52px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--btn-c);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--btn-fg);
  font: 600 .9375rem/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-c);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.btn__label { display: flex; align-items: center; padding: 0 22px 0 24px; }
.btn__icon {
  display: grid;
  place-items: center;
  width: 52px;
  margin: -1px -1px -1px 0;
  border-radius: var(--r-btn);
  background: var(--btn-c);
  color: var(--btn-fill-fg);
}
.btn__icon .icon { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.btn:hover,
.btn:focus-visible { color: var(--btn-fill-fg); }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover .btn__icon .icon,
.btn:focus-visible .btn__icon .icon { transform: rotate(45deg); }

.btn[href^="tel:"]:hover .btn__icon .icon,
.btn[href^="tel:"]:focus-visible .btn__icon .icon { transform: none; }
.btn--accent { --btn-c: var(--c-accent); --btn-fg: #fff; }
.btn--accent-outline { --btn-c: var(--c-accent); --btn-fg: var(--c-accent); }
.btn--light { --btn-c: #fff; --btn-fg: #fff; --btn-fill-fg: var(--c-dark); }
.btn--solid { background: var(--btn-c); color: var(--btn-fill-fg); }
.btn--block { width: 100%; justify-content: space-between; }
.btn--sm { min-height: 46px; }
.btn--sm .btn__icon { width: 46px; }

/* Quadratischer Symbol-Button (Pfeile, Suche) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--c-dark);
  text-decoration: none;
  transition: background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur);
}
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.icon-btn--dark { background: var(--c-dark); color: #fff; }
.icon-btn--outline { background: transparent; border-color: currentColor; }
.icon-btn--line { background: #fff; border-color: var(--c-line); }
.icon-btn--round { border-radius: 50%; }
.icon-btn--sm { width: 42px; height: 42px; }
.icon-btn--sm .icon { width: 18px; height: 18px; }
.icon-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* Unterstrichener Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-heading);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover,
a:hover > .link-arrow { color: var(--c-accent); }
.link-arrow:hover .icon,
a:hover > .link-arrow .icon { transform: translate(2px, -2px); }

/* Symbol-Box */
.icon-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: var(--r-box);
  background: var(--c-surface);
  color: var(--c-heading);
}
.icon-box .icon { width: 32px; height: 32px; stroke-width: 1.4; }
.icon-box--sm { width: 56px; height: 56px; border-radius: 14px; }
.icon-box--sm .icon { width: 24px; height: 24px; stroke-width: 1.6; }
.icon-box--white { background: #fff; }
.icon-box--accent { background: var(--c-accent-soft); color: var(--c-accent); }
.icon-box--on-dark { background: transparent; border: 1px solid var(--c-line-dark); color: var(--c-accent-light); }

.tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
}

.stars { display: inline-flex; gap: 2px; color: var(--c-star); }
.stars .icon { width: 16px; height: 16px; }

.check-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.check-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
.check-list--dark li::before { background-color: var(--c-dark); }

/* 5 · Header & Navigation ---------------------------------------------- */
.site-header {
  --hdr-inset: var(--frame);
  position: sticky;
  top: calc(12px - var(--hdr-inset) - var(--topbar-h) - var(--hdr-gap));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--hdr-gap);
  padding: var(--hdr-inset) var(--hdr-inset) 0;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.home .site-header {
  --hdr-inset: var(--hdr-inset-home);
  margin-bottom: calc(-1 * (var(--hdr-inset) + var(--topbar-h) + var(--hdr-gap) + var(--header-h)));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--topbar-h);
  padding: 0 14px 0 28px;
  border-radius: 12px;
  background: var(--c-dark);
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
  line-height: 1.3;
}
.home .topbar {
  background: rgba(17, 27, 34, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.topbar__info { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; list-style: none; }
.topbar__info a,
.topbar__info span { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.topbar__info a:hover { color: #fff; text-decoration: underline; }
.topbar__info .icon { width: 18px; height: 18px; }
.topbar__social { display: flex; align-items: center; gap: 2px; }
.topbar__social-label { margin-right: 10px; }
.topbar__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  transition: background var(--dur);
}
.topbar__social a:hover { background: rgba(255, 255, 255, .14); }
.topbar__social .icon { width: 17px; height: 17px; }

.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding: 0 16px 0 22px;
  border-radius: 20px;
  background: #fff;
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck .navbar { box-shadow: var(--shadow-md), 0 0 0 1px rgba(17, 27, 34, .04); }

.site-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  color: var(--c-heading);
  text-decoration: none;
}
.site-logo:hover { color: var(--c-heading); }
.site-logo img { width: 44px; height: auto; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
/* Schriftzug wie im Original-Logo: Raleway Bold */
.site-logo__name { font-family: "Raleway", var(--font-body); font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }
.site-logo__claim { margin-top: 3px; color: var(--c-accent); font-family: "Raleway", var(--font-body); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.main-nav { margin-inline: auto; }
.main-nav .menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.main-nav .menu > .menu-item { position: relative; }
.main-nav .menu > .menu-item > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur), border-color var(--dur);
}
.main-nav .menu > .menu-item > a:hover,
.main-nav .menu > .menu-item:focus-within > a { color: var(--c-accent); }
.main-nav .menu > .current-menu-item > a,
.main-nav .menu > .current-menu-ancestor > a { border-color: var(--c-line); }

/* kleines Dreieck als Untermenü-Hinweis (auch bei Mega-Menüs ohne Unterpunkte, Abschnitt 20) */
.menu-item-has-children > a::after,
.main-nav .menu-item--mega > a::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 5px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -10px;
  z-index: 10;
  min-width: 270px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: var(--r-box);
  background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(17, 27, 34, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, transform .3s var(--ease), visibility .25s;
}
.main-nav .sub-menu::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 16px; }
.main-nav .menu-item:hover > .sub-menu,
.main-nav .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--c-heading);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.main-nav .sub-menu a::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
  -webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu .current-menu-item > a { background: var(--c-surface); color: var(--c-accent); }
.main-nav .sub-menu a:hover::after { opacity: 1; transform: none; }

.header-actions { display: flex; flex: none; align-items: center; gap: 14px; }
.header-call { display: flex; align-items: center; gap: 12px; color: var(--c-heading); text-decoration: none; }
.header-call:hover { color: var(--c-accent); }
.header-call__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  transition: border-color var(--dur), background var(--dur);
}
.header-call:hover .header-call__icon { border-color: var(--c-accent); }
.header-call__icon .icon { width: 21px; height: 21px; }
.header-call__text { display: flex; flex-direction: column; line-height: 1.35; white-space: nowrap; }
.header-call__text small { color: var(--c-muted); font-size: .875rem; font-weight: 500; }
.header-call__text strong { font-size: 1rem; font-weight: 700; }
.header-phone,
.menu-toggle { display: none; }

/* Mobiles Menü (Off-Canvas) */
.offcanvas { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s .4s; }
.offcanvas.is-open { visibility: visible; transition: none; }
.offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 27, 34, .55);
  opacity: 0;
  transition: opacity .35s;
}
.offcanvas.is-open .offcanvas__backdrop { opacity: 1; }
.offcanvas__panel {
  position: absolute;
  top: var(--frame);
  right: var(--frame);
  bottom: var(--frame);
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100% - 2 * var(--frame)));
  padding: 22px 24px 28px;
  overflow-y: auto;
  border-radius: var(--r-frame);
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + 40px));
  transition: transform .45s var(--ease);
}
.offcanvas.is-open .offcanvas__panel { transform: none; }
.offcanvas__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mobile-nav .menu { margin: 0; padding: 0; list-style: none; }
.mobile-nav .menu > .menu-item { border-bottom: 1px solid var(--c-line); }
.mobile-nav .menu-item { position: relative; }
.mobile-nav .menu a {
  display: block;
  padding: 15px 52px 15px 4px;
  color: var(--c-heading);
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav .menu a:hover,
.mobile-nav .current-menu-item > a { color: var(--c-accent); }
.mobile-nav .menu-item-has-children > a::after { display: none; }
.mobile-nav .sub-menu { display: none; margin: 0 0 12px; padding: 6px; list-style: none; border-radius: 14px; background: var(--c-surface); }
.mobile-nav .menu-item.is-open > .sub-menu { display: block; }
.mobile-nav .sub-menu a { padding: 11px 12px; font-family: var(--font-body); font-size: 1rem; }
.submenu-toggle {
  position: absolute;
  top: 8px;
  right: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--c-heading);
}
.submenu-toggle .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.menu-item.is-open > .submenu-toggle .icon { transform: rotate(180deg); }
.offcanvas__search { margin-top: 22px; }
.offcanvas__contact { display: grid; gap: 14px; margin: 26px 0; }
.offcanvas__contact a { display: flex; align-items: center; gap: 12px; color: var(--c-heading); font-weight: 600; text-decoration: none; }
.offcanvas__contact .icon-box { width: 46px; height: 46px; border-radius: 12px; }
.offcanvas__contact .icon-box .icon { width: 20px; height: 20px; }
.offcanvas__panel .btn { margin-top: auto; }
/* Schubladen (mobiles Menü, Mini-Warenkorb): schmaler, runder Scrollbalken ohne Pfeile, mit Abstand zu den runden Ecken */
.offcanvas__panel::-webkit-scrollbar { width: 14px; }
.offcanvas__panel::-webkit-scrollbar-track { margin: 26px 0; background: transparent; }
.offcanvas__panel::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 999px; background: rgba(17, 27, 34, .18) padding-box; }
.offcanvas__panel::-webkit-scrollbar-thumb:hover { background-color: rgba(17, 27, 34, .34); }
.offcanvas__panel::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  .offcanvas__panel { scrollbar-width: thin; scrollbar-color: rgba(17, 27, 34, .25) transparent; }
}

/* Such-Overlay */
.search-overlay { position: fixed; inset: 0; z-index: 150; visibility: hidden; transition: visibility 0s .35s; }
.search-overlay.is-open { visibility: visible; transition: none; }
.search-overlay__backdrop { position: absolute; inset: 0; background: rgba(17, 27, 34, .5); opacity: 0; transition: opacity .3s; }
.search-overlay.is-open .search-overlay__backdrop { opacity: 1; }
.search-overlay__panel {
  position: relative;
  margin: var(--frame);
  padding: clamp(28px, 5vw, 60px) 0;
  border-radius: var(--r-frame);
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateY(-30px);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .3s;
}
.search-overlay.is-open .search-overlay__panel { transform: none; opacity: 1; }
.search-overlay__row { display: flex; align-items: center; gap: 16px; }
.search-overlay__label { display: block; margin-bottom: 14px; color: var(--c-heading); font-family: var(--font-head); font-size: 1.5rem; }

.search-form { position: relative; display: flex; flex: 1; align-items: center; }
.search-form input[type="search"] { padding-right: 64px; }
.search-form button { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); }
.search-overlay .search-form input[type="search"] { min-height: 64px; font-size: 1.125rem; }

/* 6 · Hero-Slider -------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(640px, calc(100svh - 2 * var(--frame)), 940px);
  margin: var(--frame) var(--frame) 0;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--c-dark);
  color: #fff;
}
.hero__slides { display: grid; grid-area: 1 / 1; }
.hero__slide {
  position: relative;
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  padding: calc(var(--hdr-inset-home) - var(--frame) + var(--topbar-h) + var(--hdr-gap) + var(--header-h) + 50px) 0 140px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease), visibility .9s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s cubic-bezier(.2, .6, .2, 1); }
.hero__slide.is-active .hero__media img { transform: scale(1); }
/* Abdunkeln von rechts: Motiv links bleibt hell, hinter dem Text (ab ca. 47 %) ruhig und dunkel */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 27, 34, .12) 0%, rgba(17, 27, 34, .32) 28%, rgba(17, 27, 34, .8) 47%, rgba(17, 27, 34, .9) 100%);
}
.hero__inner { max-width: 640px; margin-left: 45%; }
.hero__title { margin-bottom: 26px; color: #fff; }
.hero__title,
.hero__text { text-shadow: 0 2px 22px rgba(8, 14, 18, .5); } /* hebt die Schrift von hellen Bildstellen ab */
.hero__text { max-width: 560px; margin-bottom: 42px; color: rgba(255, 255, 255, .9); font-size: 1.125rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }

.hero__pager {
  position: absolute;
  right: 0;
  bottom: 44px;
  left: 0;
  z-index: 3;
  pointer-events: none;
}
.hero__pager .container { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.hero__pager button { pointer-events: auto; }
.hero__count { font-family: var(--font-head); font-size: 1rem; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.hero__count span { opacity: .6; }

.pager-dots { display: flex; gap: 12px; pointer-events: auto; }
.pager-dot {
  position: relative;
  width: 44px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
}
.pager-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .55);
  transition: background .3s;
}
.pager-dot:hover::before { background: #fff; }
.pager-dot[aria-current="true"]::before,
.pager-dot[aria-selected="true"]::before { background: var(--c-accent-light); }
.hero__pager .hero__arrows { display: none; gap: 10px; }

/* 7 · Leistungsband & Über uns ------------------------------------------ */
.marquee {
  padding-block: clamp(44px, 6vw, 80px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list {
  display: flex;
  align-items: center;
  gap: clamp(44px, 6vw, 96px);
  margin: 0;
  padding: 0 clamp(44px, 6vw, 96px) 0 0;
  list-style: none;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7d8a93;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marquee__item .icon { width: 1.35em; height: 1.35em; stroke-width: 1.5; }
@keyframes marquee { to { transform: translateX(-50%); } }

.about { position: relative; }
.about::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: min(520px, 50vw);
  height: 520px;
  background: radial-gradient(closest-side, rgba(0, 136, 184, .12), transparent);
  pointer-events: none;
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.about__lead { max-width: 540px; margin-bottom: 36px; }
/* Buttons und die vier Kacheln darunter: Abschnitt 17 */

/* Bild mit ausgeschnittener Ecke + Kennzahl */
.notched { --notch-w: 46%; --notch-h: 100px; --notch-r: var(--r-frame); --page-bg: #fff; position: relative; padding-top: 72px; }
.notched__stat { position: absolute; top: 0; left: 0; z-index: 2; }
.notched__num {
  display: block;
  color: var(--c-heading);
  font-family: var(--font-head);
  font-size: clamp(4.4rem, 3rem + 4.8vw, 7.6rem);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.05em;
}
.notched__num span { color: var(--c-brand); }
.notched__label { display: block; margin-top: 16px; color: var(--c-heading); font-size: 1.125rem; font-weight: 700; }
/* Ecke oben links liegt unter der Aussparung: nicht runden, sonst schimmert dunkles Bild als Bogen durch */
.notched__media { position: relative; overflow: hidden; border-radius: 0 var(--notch-r) var(--notch-r); aspect-ratio: 620 / 560; background: var(--c-surface); }
.notched__media img { width: 100%; height: 100%; object-fit: cover; }
.notched__tab {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--notch-w);
  height: var(--notch-h);
  border-bottom-right-radius: var(--notch-r);
  background: var(--page-bg);
}
.notched__tab::before,
.notched__tab::after {
  content: "";
  position: absolute;
  width: var(--notch-r);
  height: var(--notch-r);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--notch-r) - .5px), var(--page-bg) var(--notch-r));
}
.notched__tab::before { top: 0; left: 100%; }
.notched__tab::after { top: 100%; left: 0; }
.notched__badge {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .28);
  transition: transform .4s var(--ease), background .3s;
}
.notched__badge:hover { color: #fff; background: var(--c-accent-hover); transform: scale(1.06); }
.notched__badge .icon { width: 30px; height: 30px; }

/* 8 · Leistungen (dunkle Box) ------------------------------------------- */
.services {
  --overlap: 190px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto var(--overlap) auto;
  margin-inline: var(--frame);
}
.services::before {
  content: "";
  grid-row: 1 / 4;
  grid-column: 1;
  border-radius: var(--r-frame);
  background: var(--circuit) 0 0 / 260px, var(--c-dark);
}
.services > * { grid-column: 1; min-width: 0; }
.services > .steps { grid-row: 1; }
.services > .services__head { grid-row: 2; }
.services > .services__carousel { grid-row: 3 / 5; }

.steps { position: relative; }
.steps__media { position: relative; height: clamp(380px, 42vw, 600px); overflow: hidden; border-radius: var(--r-frame); }
.steps__media img { width: 100%; height: 100%; object-fit: cover; }
.steps__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 27, 34, .45), rgba(17, 27, 34, 0) 55%); }
.steps__card {
  position: absolute;
  bottom: -76px;
  left: clamp(20px, 3.6vw, 50px);
  z-index: 2;
  width: 370px;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--c-dark);
  box-shadow: var(--shadow-lg);
}
.steps__panels { display: grid; padding: 44px 40px 40px; }
.steps__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .4s, transform .45s var(--ease), visibility .4s;
}
.steps__panel.is-active { opacity: 1; visibility: visible; transform: none; }
.steps__num { display: block; margin-bottom: 24px; color: #fff; font-family: var(--font-head); font-size: 2.75rem; font-weight: 500; line-height: 1; }
.steps__title { margin-bottom: 14px; color: #fff; font-size: 1.75rem; }
.steps__panel p { color: rgba(255, 255, 255, .8); }
.steps__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 76px;
  background: var(--c-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  transition: background var(--dur);
}
.steps__cta:hover { background: var(--c-accent-hover); color: #fff; }
.steps__cta .icon { width: 18px; height: 18px; }
.steps__pager {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px 12px;
  border-radius: 14px;
  background: rgba(17, 27, 34, .6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
.steps__count { font-family: var(--font-head); font-weight: 500; letter-spacing: .04em; }

.services__head { padding: 150px 20px 54px; }
.services__head h2 { color: #fff; }

.carousel { position: relative; }
.carousel__track {
  --per-view: 3;
  --gap: 30px;
  display: grid;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  grid-auto-flow: column;
  gap: var(--gap);
  margin: -14px 0 -40px;
  padding: 14px 0 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; min-width: 0; }
.carousel__controls { position: absolute; inset: 0; pointer-events: none; }
.carousel__controls .icon-btn { position: absolute; top: 60%; pointer-events: auto; transform: translateY(-50%); }
.carousel__controls [data-prev] { left: 0; }
.carousel__controls [data-next] { right: 0; }

.services__carousel { width: min(100% - 2 * (var(--gutter) - var(--frame)), var(--container)); margin-inline: auto; }
/* Leistungskarten über die volle Breite (ab 1101 px vier nebeneinander), Pfeile mittig darunter */
.services__carousel .carousel__controls { position: static; display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.services__carousel .carousel__controls .icon-btn { position: static; transform: none; }
@media (min-width: 1101px) {
  .services__carousel .carousel__track { --per-view: 4; --gap: 24px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .services__carousel .carousel__track { --per-view: 3; --gap: 24px; }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.service-card__media { overflow: hidden; border-radius: calc(var(--r-card) - 8px); aspect-ratio: 324 / 258; background: var(--c-surface-2); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.service-card__body { display: flex; flex: 1; flex-direction: column; padding: 28px 20px 22px; }
.service-card__title { margin: 0; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); font-size: 1.625rem; }
.service-card__title a { color: inherit; text-decoration: none; }
.service-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.service-card__text { margin: 20px 0 24px; }
.service-card .link-arrow { align-self: flex-start; margin-top: auto; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card:hover .link-arrow { color: var(--c-accent); }
.service-card:hover .link-arrow .icon { transform: translate(2px, -2px); }
.service-card:has(a:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.service-card a:focus-visible { outline: none; }

/* 9 · Cloud-Karten & Link-Boxen ---------------------------------------- */
.overlay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.overlay-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(470px, 40vw, 580px);
  padding: 34px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-dark);
  color: #fff;
}
.overlay-card__media { position: absolute; inset: 0; z-index: -2; }
.overlay-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.overlay-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17, 27, 34, .1) 0%, rgba(17, 27, 34, .25) 38%, rgba(17, 27, 34, .92) 100%);
}
.overlay-card__tag { align-self: flex-start; }
.overlay-card__kicker { display: block; margin-bottom: 10px; color: rgba(255, 255, 255, .9); font-size: .9375rem; font-weight: 600; }
.overlay-card__title { margin: 0; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .24); color: #fff; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); }
.overlay-card__title a { color: inherit; text-decoration: none; }
.overlay-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.overlay-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 22px; }
.overlay-card__row p { margin: 0; color: rgba(255, 255, 255, .9); }
.overlay-card .icon-btn { border-color: rgba(255, 255, 255, .9); background: transparent; color: #fff; }
.overlay-card:hover .icon-btn { border-color: #fff; background: #fff; color: var(--c-dark); }
.overlay-card:hover .overlay-card__media img { transform: scale(1.06); }
.overlay-card:has(a:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.overlay-card a:focus-visible { outline: none; }

.link-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.link-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 24px 24px 22px;
  border-radius: 24px;
  background: var(--c-surface);
  transition: background var(--dur), transform var(--dur) var(--ease);
}
.link-box__title { margin: 0 0 4px; font-size: 1.25rem; }
.link-box__title a { color: inherit; text-decoration: none; }
.link-box__title a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.link-box p { margin: 0; font-size: .9375rem; line-height: 1.55; }
.link-box > .icon-btn { margin-left: auto; }
.link-box:hover { background: var(--c-accent-soft); transform: translateY(-3px); }
.link-box:hover > .icon-btn { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.link-box:has(a:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.link-box a:focus-visible { outline: none; }

/* 10 · Banner mit Hotspots --------------------------------------------- */
.banner {
  position: relative;
  isolation: isolate;
  margin-inline: var(--frame);
  overflow: hidden;
  border-radius: var(--r-frame);
  background:
    radial-gradient(55% 80% at 82% 45%, rgba(0, 136, 184, .38), rgba(0, 136, 184, 0) 70%),
    var(--circuit) 0 0 / 260px,
    var(--c-dark);
  color: #fff;
}
.banner__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 70px);
  align-items: center;
  padding-block: clamp(70px, 8vw, 110px);
}
.banner h2 { color: #fff; }
.banner__text { max-width: 540px; color: rgba(255, 255, 255, .82); }
.banner .check-list { margin: 30px 0 42px; color: rgba(255, 255, 255, .92); }
.banner__art { position: relative; }
.banner__art > svg { width: 100%; height: auto; overflow: visible; }

.hotspot {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transform: translate(-50%, -50%);
}
.hotspot::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .32);
}
.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { opacity: .9; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.9); }
}
.hotspot__tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  width: 230px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  color: var(--c-text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .25s, transform .3s var(--ease), visibility .25s;
  pointer-events: none;
}
.hotspot__tip strong { display: block; margin-bottom: 4px; color: var(--c-heading); font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.hotspot:hover .hotspot__tip,
.hotspot:focus-visible .hotspot__tip,
.hotspot[aria-expanded="true"] .hotspot__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.hotspot--tip-left .hotspot__tip { left: auto; right: -10px; transform: translate(0, 6px); }
.hotspot--tip-left:hover .hotspot__tip,
.hotspot--tip-left:focus-visible .hotspot__tip,
.hotspot--tip-left[aria-expanded="true"] .hotspot__tip { transform: none; }

/* 11 · Warum wir & Kundenstimmen --------------------------------------- */
/* Porträt schmal im Hochformat (etwa ein Drittel), Merkmalszeilen breit */
.why__grid { display: grid; grid-template-columns: minmax(0, .44fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 60px); align-items: start; }
.why__media { position: relative; overflow: hidden; border-radius: var(--r-frame); aspect-ratio: 3 / 4; background: var(--c-surface); }
.why__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.person-card {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  padding: 14px 22px 16px;
  border-radius: var(--r-box);
  background: #fff;
  box-shadow: var(--shadow-sm);
  line-height: 1.35;
}
.person-card strong { color: var(--c-heading); font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; }
.person-card span { color: var(--c-muted); font-size: .875rem; }
.why__note { max-width: 460px; margin: 32px 0 26px; color: var(--c-heading); font-weight: 700; line-height: 1.55; }

.help-contact { display: inline-flex; align-items: center; gap: 16px; color: var(--c-heading); text-decoration: none; }
.help-contact:hover { color: var(--c-accent); }
.help-contact__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--c-accent-soft);
}
.help-contact__icon .icon { width: 22px; height: 22px; }
.help-contact small { display: block; color: var(--c-muted); font-size: .9375rem; font-weight: 500; }
.help-contact strong { font-size: 1.0625rem; }

.feature-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line); }
.feature-row {
  display: grid;
  grid-template-columns: 74px minmax(0, .85fr) minmax(0, 1.25fr);
  gap: 26px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--c-line);
}
.feature-row h3 { margin: 0; font-size: 1.375rem; }
.feature-row p { margin: 0; }
.feature-row .icon-box { transition: background var(--dur), color var(--dur); }
.feature-row:hover .icon-box { background: var(--c-accent); color: #fff; }

.testimonials {
  margin-inline: var(--frame);
  padding-block: var(--section);
  overflow: hidden;
  border-radius: var(--r-frame);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0) 0 32%, rgba(255, 255, 255, .6) 32% 47%, rgba(255, 255, 255, 0) 47%),
    linear-gradient(225deg, rgba(255, 255, 255, 0) 0 62%, rgba(255, 255, 255, .5) 62% 74%, rgba(255, 255, 255, 0) 74%),
    var(--c-surface);
}
.testimonials__side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rating-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--c-heading);
  text-decoration: none;
}
.rating-chip:hover { color: var(--c-heading); box-shadow: var(--shadow-sm); }
.rating-chip__score { font-family: var(--font-head); font-size: 2.1rem; font-weight: 600; line-height: 1; }
.rating-chip small { display: block; color: var(--c-muted); font-size: .8125rem; font-weight: 600; }

.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 38px 36px 30px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: #fff;
}
.testimonial-card__title { margin-bottom: 16px; font-size: 1.375rem; }
.testimonial-card blockquote { margin: 0 0 30px; }
.testimonial-card__foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--c-line); }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
}
.testimonial-card__name { display: block; color: var(--c-heading); font-family: var(--font-head); font-size: 1.125rem; font-weight: 500; font-style: normal; line-height: 1.3; }
.testimonial-card__src { color: var(--c-muted); font-size: .875rem; }
.testimonial-card__quote { width: 34px; height: 34px; margin-left: auto; color: var(--c-brand); }

/* 12 · CTA-Box & Footer ------------------------------------------------- */
.site-footer {
  --cta-overlap: 110px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--cta-overlap) auto;
  margin: var(--section) var(--frame) var(--frame);
  color: rgba(255, 255, 255, .8);
}
/* Der Footer bringt den Abstand nach oben selbst mit */
main > .section:last-child { padding-bottom: 0; }
.site-footer::before {
  content: "";
  grid-row: 2 / 4;
  grid-column: 1;
  border-radius: var(--r-frame);
  background: var(--c-dark);
}
.site-footer > * { grid-column: 1; min-width: 0; }
.site-footer--plain { grid-template-rows: auto; margin-top: var(--frame); }
.site-footer--plain::before { grid-row: 1; }
.site-footer--plain .footer-inner { grid-row: 1; }

.cta-box {
  position: relative;
  z-index: 1;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px 50px;
  align-items: center;
  width: min(100% - 2 * (var(--gutter) - var(--frame)), var(--container));
  justify-self: center;
  padding: clamp(36px, 4.5vw, 60px) clamp(28px, 4.5vw, 64px);
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--circuit-strong) 0 0 / 260px, var(--c-accent);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.cta-box h2 { margin-bottom: 12px; color: #fff; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.cta-box p { max-width: 640px; margin: 0; color: rgba(255, 255, 255, .92); }
.cta-box__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.cta-box__phone { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-head); font-size: 1.375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cta-box__phone:hover { color: #fff; text-decoration: underline; }
.cta-box__phone .icon-box { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.cta-box__phone .icon-box .icon { width: 22px; height: 22px; }

.footer-inner {
  grid-row: 3;
  width: min(100% - 2 * (var(--gutter) - var(--frame)), var(--container));
  justify-self: center;
  padding-top: clamp(60px, 7vw, 90px);
}
.footer-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0 0 60px;
  list-style: none;
  border-bottom: 1px solid var(--c-line-dark);
}
.stat { display: flex; align-items: center; gap: 16px; }
.stat strong { display: block; color: #fff; font-family: var(--font-head); font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.stat div > span { display: block; color: rgba(255, 255, 255, .76); font-size: .9375rem; line-height: 1.4; }
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 40px;
  padding: 80px 0 70px;
}
.footer-brand img { width: 210px; margin-bottom: 22px; }
.footer-brand p { max-width: 330px; margin-bottom: 30px; }
.footer-title { margin-bottom: 22px; color: #fff; font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; letter-spacing: 0; }
.footer-menu { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.footer-menu a { color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .2s; }
.footer-menu a:hover { color: var(--c-accent-light); }
.footer-contact { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.footer-contact li { display: flex; gap: 12px; }
.footer-contact .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--c-accent-light); }
.footer-contact a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.footer-contact a:hover { color: var(--c-accent-light); }
.social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-btn);
  color: #fff;
  transition: background .25s, border-color .25s;
}
.social a:hover { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.social .icon { width: 18px; height: 18px; }
.footer-social-label { display: block; margin-bottom: 14px; color: #fff; font-weight: 700; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding: 28px 0 34px;
  border-top: 1px solid var(--c-line-dark);
  color: rgba(255, 255, 255, .76);
  font-size: .9375rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.footer-legal li + li { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--c-line-dark); }
.footer-legal a { color: #fff; text-decoration: none; }
.footer-legal a:hover { color: var(--c-accent-light); text-decoration: underline; }
.draft-note { flex-basis: 100%; color: rgba(255, 255, 255, .6); font-size: .8125rem; }

/* 13 · Unterseiten ------------------------------------------------------ */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(270px, 28vw, 400px);
  margin: 16px var(--frame) 0;
  padding: 60px 20px;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--c-dark);
  color: #fff;
  text-align: center;
}
.page-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(17, 27, 34, .64); }
.page-hero h1 { max-width: 20ch; margin: 0 auto 16px; color: #fff; font-size: clamp(2.3rem, 1.4rem + 3.3vw, 4.4rem); }
.page-hero--post h1 { max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .7; }
.breadcrumbs a { color: #fff; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.breadcrumbs [aria-current] { color: rgba(255, 255, 255, .86); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(40px, 5vw, 60px);
  align-items: start;
}
.sidebar { display: grid; gap: 30px; }
.widget-box { padding: 36px 30px; border-radius: var(--r-card); background: var(--c-surface); }
.widget + .widget { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.widget-title { margin-bottom: 22px; font-size: 1.5rem; }

.service-nav { margin: 0; padding: 0; list-style: none; }
.service-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  border-radius: 10px;
  color: var(--c-heading);
  font-weight: 600;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.service-nav a .icon { width: 18px; height: 18px; }
.service-nav a:hover { color: var(--c-accent); }
.service-nav .current-menu-item > a { border-color: transparent; background: var(--c-accent); color: #fff; }

.quick-contact { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.quick-contact li { display: flex; align-items: flex-start; gap: 16px; }
.quick-contact strong { display: block; margin-bottom: 2px; color: var(--c-heading); font-family: var(--font-head); font-size: 1.125rem; font-weight: 500; }
.quick-contact a,
.quick-contact span { color: var(--c-text); font-size: .9375rem; text-decoration: none; }
.quick-contact a:hover { color: var(--c-accent); }

.promo-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  padding: 34px 30px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-dark);
  color: #fff;
}
.promo-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.promo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 27, 34, .15), rgba(17, 27, 34, .94) 70%); }
.promo-card__kicker { display: block; margin-bottom: 6px; color: var(--c-accent-light); font-size: .9375rem; font-weight: 700; }
.promo-card h3 { color: #fff; font-size: 1.875rem; }
.promo-card p { margin-bottom: 24px; color: rgba(255, 255, 255, .86); }

.widget .search-form input[type="search"] { background: #fff; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a,
.entry-tags a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
  color: var(--c-heading);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.tag-cloud a:hover,
.entry-tags a:hover { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.recent-posts { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.recent-posts li { position: relative; display: flex; align-items: center; gap: 16px; }
.recent-posts img { flex: none; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; }
.recent-posts a { color: var(--c-heading); font-family: var(--font-head); font-size: 1rem; font-weight: 500; line-height: 1.35; text-decoration: none; }
.recent-posts a::after { content: ""; position: absolute; inset: 0; }
.recent-posts a:hover { color: var(--c-accent); }
.recent-posts time { display: block; margin-top: 4px; color: var(--c-muted); font-size: .8125rem; }

/* Inhaltsbereich (Gutenberg) */
.entry-media { margin: 0 0 42px; overflow: hidden; border-radius: var(--r-frame); }
.entry-media img { width: 100%; }
.entry-content { color: var(--c-text); }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { margin: 1.5em 0 .55em; font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.4rem); }
.entry-content h3 { margin: 1.5em 0 .5em; font-size: 1.5rem; }
.entry-content p { margin: 0 0 1.3em; }
.entry-content .lead { color: var(--c-heading); font-size: 1.1875rem; font-weight: 600; line-height: 1.6; }
.entry-content ul,
.entry-content ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.entry-content li { margin: .45em 0; }
.entry-content li::marker { color: var(--c-brand); font-weight: 700; }
.entry-content ul.is-style-checks,
.entry-content .check-list,
.entry-content .mini-features { padding-left: 0; list-style: none; }
.entry-content .check-list li,
.entry-content .mini-features li { margin: 0; }
.entry-content ul.is-style-checks li { position: relative; padding-left: 34px; }
.entry-content ul.is-style-checks li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.entry-content ol.is-style-steps { padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.entry-content ol.is-style-steps li {
  position: relative;
  margin: 0;
  padding: 18px 22px 18px 76px;
  border-radius: var(--r-box);
  background: var(--c-surface);
  counter-increment: step;
}
.entry-content ol.is-style-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 20px;
  color: var(--c-accent);
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
}
.entry-content ol.is-style-steps strong { color: var(--c-heading); }
.entry-content a:not(.btn):not(.wp-block-button__link) { color: var(--c-accent); text-decoration: underline; }
.entry-content img { border-radius: var(--r-img); }
.entry-content figure { margin: 2em 0; }
.entry-content figcaption { margin-top: 10px; color: var(--c-muted); font-size: .875rem; }

.wp-block-quote,
.entry-content blockquote {
  position: relative;
  margin: 2.2em 0;
  padding: 40px 44px 40px 116px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-surface);
}
.wp-block-quote::before,
.entry-content blockquote::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 40px;
  width: 50px;
  height: 42px;
  background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 42'%3E%3Cpath d='M20 0C8 4 0 13 0 26v16h20V22H10c0-8 5-13 12-15zM48 0C36 4 28 13 28 26v16h20V22H38c0-8 5-13 12-15z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 42'%3E%3Cpath d='M20 0C8 4 0 13 0 26v16h20V22H10c0-8 5-13 12-15zM48 0C36 4 28 13 28 26v16h20V22H38c0-8 5-13 12-15z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-quote p,
.entry-content blockquote p { margin: 0 0 14px; color: var(--c-heading); font-family: var(--font-head); font-size: 1.3125rem; font-weight: 500; line-height: 1.5; }
.wp-block-quote cite,
.entry-content blockquote cite { color: var(--c-muted); font-size: .9375rem; font-style: normal; font-weight: 600; }

.wp-block-table { overflow-x: auto; }
.wp-block-table table,
.entry-content table {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-box);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: .9375rem;
}
.entry-content th,
.entry-content td { padding: 14px 18px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.entry-content thead th { background: var(--c-dark); color: #fff; font-family: var(--font-head); font-weight: 500; }
.entry-content tbody th { color: var(--c-heading); font-weight: 700; }
.entry-content tbody tr:nth-child(even) > * { background: var(--c-surface); }
.entry-content tbody tr:last-child > * { border-bottom: 0; }

.wp-block-media-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin: 2.2em 0;
}
.wp-block-media-text__media { margin: 0; }
.wp-block-media-text__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.wp-block-details,
.faq details { border-bottom: 1px solid var(--c-line); }
.faq { margin-top: 1em; border-top: 1px solid var(--c-line); }
.wp-block-details summary,
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 50px 22px 0;
  color: var(--c-heading);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "?";
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-dark);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  transition: background .25s;
}
.wp-block-details summary::after,
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: currentColor;
  transition: transform .3s var(--ease);
  -webkit-mask: 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.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-details[open] summary::after,
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary::before { background: var(--c-accent); }
.wp-block-details summary:hover,
.faq summary:hover { color: var(--c-accent); }
.wp-block-details > :not(summary),
.faq details > :not(summary) { margin: 0 0 24px; padding-left: 46px; }

.mini-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 30px; margin: 1.6em 0 2em; padding: 0; list-style: none; }
.mini-feature { display: flex; gap: 18px; }
.mini-feature h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.mini-feature p { margin: 0; font-size: .9375rem; line-height: 1.6; }

.divider { height: 1px; margin: 2.4em 0; border: 0; background: var(--c-line); }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: .9375rem;
  font-weight: 600;
}
.entry-meta span,
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.entry-meta .icon,
.post-meta .icon { width: 17px; height: 17px; color: var(--c-brand); }
.entry-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.share-links { display: flex; align-items: center; gap: 8px; color: var(--c-heading); font-weight: 700; }
.share-links a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-line); border-radius: var(--r-btn); color: var(--c-heading); transition: background .2s, color .2s, border-color .2s; }
.share-links a:hover { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.share-links .icon { width: 17px; height: 17px; }

/* Beitragsnavigation (the_post_navigation) */
.post-navigation { margin-top: 40px; }
.post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-box); }
.post-navigation .nav-next { border-left: 1px solid var(--c-line); text-align: right; }
.post-navigation a { display: block; height: 100%; padding: 22px 26px; color: var(--c-heading); text-decoration: none; transition: background .25s; }
.post-navigation a:hover { background: var(--c-surface); }
.post-navigation .meta-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--c-accent); font-size: .875rem; font-weight: 700; }
.post-navigation .nav-next .meta-nav { justify-content: flex-end; }
.post-navigation .meta-nav .icon { width: 16px; height: 16px; }
.post-navigation .post-title { font-family: var(--font-head); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }

/* Beitragskarten & Paginierung */
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 30px; }
.post-card { position: relative; display: flex; flex-direction: column; }
.post-card__media { position: relative; margin-bottom: 20px; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 418 / 298; background: var(--c-surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post-card__date { position: absolute; top: 20px; left: 20px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); color: var(--c-muted); font-size: .875rem; font-weight: 600; }
.post-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.post-card__title { margin: 0; font-size: 1.375rem; line-height: 1.3; }
.post-card__title a { color: var(--c-heading); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card .icon-btn { border-color: var(--c-heading); background: transparent; }
.post-card:hover .icon-btn { border-color: var(--c-dark); background: var(--c-dark); color: #fff; }
.post-card:hover .post-card__media img { transform: scale(1.06); }
.post-card:hover .post-card__title a { color: var(--c-accent); }
.post-card:has(a:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 6px; border-radius: var(--r-img); }
.post-card a:focus-visible { outline: none; }

.pagination { margin-top: 64px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.page-numbers {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  color: var(--c-heading);
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
a.page-numbers:hover { border-color: var(--c-dark); background: var(--c-dark); color: #fff; }
.page-numbers.current { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.page-numbers .icon { width: 18px; height: 18px; }

/* Formulare */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  color: var(--c-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder,
textarea::placeholder { color: #7f8a92; opacity: 1; }
input:focus,
select:focus,
textarea:focus { border-color: var(--c-accent); outline: none; box-shadow: 0 0 0 4px rgba(0, 119, 159, .15); }
textarea { min-height: 160px; resize: vertical; }
select {
  padding-right: 48px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111b22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
  -webkit-appearance: none;
  appearance: none;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--c-heading); font-size: .875rem; font-weight: 700; }
.field .req { color: var(--c-accent); }
.checkbox { display: flex; align-items: flex-start; gap: 12px; color: var(--c-text); font-size: .875rem; line-height: 1.55; }
.checkbox input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--c-accent); }
.field .checkbox { color: var(--c-text); font-size: .875rem; font-weight: 500; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.form-note { margin: 0; color: var(--c-muted); font-size: .8125rem; }
.form-status { display: none; margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: var(--c-accent-soft); color: var(--c-accent-hover); font-weight: 600; }
.form-status.is-visible { display: block; }

/* Kontaktseite */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 30px; margin: 44px 0 0; padding: 0; list-style: none; }
.contact-item { display: flex; gap: 18px; }
.contact-item strong { display: block; margin: 2px 0 6px; color: var(--c-heading); font-family: var(--font-head); font-size: 1.1875rem; font-weight: 500; }
.contact-item div > a,
.contact-item div > span { display: block; color: var(--c-text); text-decoration: none; }
.contact-item div > a:hover { color: var(--c-accent); }
.contact-person { display: flex; align-items: center; gap: 18px; margin-top: 44px; padding: 18px 22px; border-radius: 20px; background: var(--c-surface); }
.contact-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.contact-person strong { display: block; color: var(--c-heading); font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; }
.contact-person span { color: var(--c-muted); font-size: .9375rem; }
.form-card { padding: clamp(28px, 4vw, 50px); border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-sm); }
.form-card h2 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); }
.form-card > p { margin-bottom: 28px; }

.map-box { position: relative; isolation: isolate; min-height: clamp(360px, 36vw, 460px); margin-inline: var(--frame); overflow: hidden; border-radius: var(--r-frame); background: #e8edf0; }
.map-box > svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.map-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(360px, calc(100% - 40px));
  padding: 28px 30px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: translate(-50%, -50%);
}
.map-card .icon-box { margin: -62px auto 16px; border: 6px solid #fff; background: var(--c-accent); color: #fff; }
.map-card strong { display: block; color: var(--c-heading); font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; }
.map-card p { margin: 6px 0 20px; }
.map-card small { display: block; margin-top: 14px; color: var(--c-muted); font-size: .8125rem; line-height: 1.5; }

/* 14 · Hilfsklassen, Bewegung ------------------------------------------ */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s !important; }
[data-reveal-delay="2"] { transition-delay: .16s !important; }
[data-reveal-delay="3"] { transition-delay: .24s !important; }

/* Breakpoints ------------------------------------------------------------ */
/* Navigation: Telefontext ab 1600 px, darunter kompakter, ab 1320 px Burger-Menü
   (fünf Menüpunkte mit Mega-Menü und Dreieck, Abschnitt 20) */
@media (max-width: 1599px) {
  .header-call__text { display: none; }
}

@media (max-width: 1439px) {
  .main-nav .menu > .menu-item > a { padding-inline: 11px; }
}

@media (max-width: 1360px) {
  .main-nav .menu > .menu-item > a { padding-inline: 8px; }
}

@media (max-width: 1280px) {
  .main-nav,
  .header-call,
  .header-cta { display: none; }
  .header-phone,
  .menu-toggle { display: inline-grid; }
  .navbar { justify-content: space-between; }
  .header-actions { gap: 10px; }
}

@media (max-width: 1200px) {
  .hero__arrow { display: none; }
  .hero__pager .hero__arrows { display: flex; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 40px; align-items: end; }
  .footer-brand p { margin-bottom: 0; }
  .footer-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .link-box { padding: 22px 20px; }
}

@media (max-width: 1100px) {
  :root { --topbar-h: 0px; --hdr-gap: 0px; --hdr-inset-home: calc(var(--frame) + 14px); }
  .topbar { display: none; }
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .notched { max-width: 640px; }
  .carousel__track { --per-view: 2; }
  .layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .overlay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overlay-grid > :last-child { grid-column: 1 / -1; min-height: 380px; }
  .link-boxes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .feature-row { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 22px; }
  .feature-row .icon-box { grid-row: span 2; width: 64px; height: 64px; }
  .feature-row p { grid-column: 2; }
}

@media (max-width: 960px) {
  .why__grid,
  .banner__grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__inner { margin-left: 0; }
  .hero__media::after { background: linear-gradient(90deg, rgba(17, 27, 34, .88) 0%, rgba(17, 27, 34, .7) 70%, rgba(17, 27, 34, .45) 100%); }
  .services { --overlap: 160px; }
  .carousel__controls { position: static; display: flex; justify-content: center; gap: 12px; margin-top: 28px; pointer-events: auto; }
  .carousel__controls .icon-btn { position: static; transform: none; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .cta-box { grid-template-columns: minmax(0, 1fr); }
  .banner__art { max-width: 620px; }
  .why__media { max-width: 640px; aspect-ratio: 620 / 500; }
}

@media (max-width: 767px) {
  :root {
    --frame: 10px;
    --r-frame: 22px;
    --r-card: 24px;
    --topbar-h: 0px;
    --hdr-gap: 0px;
    --header-h: 70px;
    --hdr-inset-home: calc(var(--frame) + 10px);
  }
  body { font-size: .9688rem; }
  .topbar { display: none; }
  .navbar { padding: 0 10px 0 14px; border-radius: 16px; }
  .site-logo img { width: 38px; }
  .site-logo__name { font-size: 1.1875rem; }
  .site-logo__claim { font-size: .625rem; }
  .icon-btn:not(.icon-btn--sm) { width: 44px; height: 44px; }
  .header-actions { gap: 8px; }
  .pager-dot { width: 30px; }
  .hero__pager .container { gap: 12px; }
  .rating-chip { gap: 10px; padding: 8px 14px 8px 12px; }
  .rating-chip__score { font-size: 1.75rem; }
  .footer-legal { gap: 6px 18px; }
  .footer-legal li + li { margin-left: 0; padding-left: 0; border-left: 0; }
  .hero { min-height: max(620px, calc(100svh - 2 * var(--frame))); }
  .hero__slide { align-items: flex-end; padding-bottom: 120px; }
  .hero__media::after { background: linear-gradient(180deg, rgba(17, 27, 34, .45) 0%, rgba(17, 27, 34, .72) 34%, rgba(17, 27, 34, .9) 62%, rgba(17, 27, 34, .94) 100%); }
  .hero__text { font-size: 1.0625rem; margin-bottom: 32px; }
  .hero__pager { bottom: 30px; }
  .hero__pager .container { justify-content: space-between; }
  .notched { --notch-h: 84px; --notch-w: 52%; padding-top: 54px; }
  .notched__badge { width: 76px; height: 76px; right: 18px; bottom: 18px; }
  .steps__media { height: 340px; }
  .steps__card { position: relative; bottom: auto; left: auto; width: auto; margin: -110px 14px 0; }
  .steps__panels { padding: 34px 28px 30px; }
  .steps__pager { top: 24px; right: 22px; bottom: auto; }
  .services { --overlap: 150px; }
  .services__head { padding: 64px 12px 40px; }
  .carousel__track { --per-view: 1.12; --gap: 16px; }
  .overlay-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .overlay-grid > :last-child { grid-column: auto; min-height: clamp(420px, 110vw, 520px); }
  .overlay-card { min-height: clamp(420px, 110vw, 520px); padding: 26px; }
  .link-box { gap: 16px; }
  .link-box .icon-box { display: none; }
  .feature-row { padding: 26px 0; }
  .testimonial-card { padding: 30px 26px 24px; }
  .check-list--2col,
  .mini-features,
  .contact-info,
  .form-grid,
  .post-grid,
  .wp-block-media-text { grid-template-columns: minmax(0, 1fr); }
  .footer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; padding-bottom: 44px; }
  .stat { flex-direction: column; align-items: flex-start; gap: 12px; }
  .stat .icon-box { width: 56px; height: 56px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 56px 0 48px; }
  .footer-brand { display: block; }
  .footer-brand p { margin-bottom: 26px; }
  .footer-cols > .footer-contact-col { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer { --cta-overlap: 80px; }
  .cta-box__phone { font-size: 1.1875rem; }
  .wp-block-quote,
  .entry-content blockquote { padding: 86px 26px 30px; }
  .wp-block-quote::before,
  .entry-content blockquote::before { top: 28px; left: 26px; width: 40px; height: 34px; }
  .post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
  .post-navigation .nav-next { border-top: 1px solid var(--c-line); border-left: 0; }
  .page-hero { min-height: 250px; }
  .widget-box { padding: 30px 22px; }
  .hotspot__tip { width: 200px; }
}

@media (max-width: 480px) {
  .header-search { display: none; }
}

@media (max-width: 420px) {
  .site-logo__claim { display: none; }
  .navbar { gap: 10px; padding-right: 8px; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .cta-box__actions .btn { width: 100%; justify-content: space-between; }
}

@media (max-width: 360px) {
  .header-phone { display: none; }
  .site-logo { gap: 8px; }
  .site-logo img { width: 32px; }
  .site-logo__name { font-size: 1.0625rem; }
}

@media (hover: none) {
  .service-card:hover,
  .link-box:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .carousel__track { scroll-behavior: auto; }
  .marquee__track { flex-wrap: wrap; width: auto; animation: none; }
  .marquee__list[aria-hidden="true"] { display: none; }
  .marquee__list { flex-wrap: wrap; justify-content: center; padding: 0; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .hero__media img { transform: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .hero__arrow, .hero__pager, .carousel__controls, .offcanvas, .search-overlay, .marquee, .skip-link { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .services::before, .site-footer::before, .banner, .cta-box { background: none !important; color: #000 !important; }
}

/* ==========================================================================
   15 · Ergänzungen Variante 03b: Notfall, Pakete, Fristen, Branchen,
        Vertrauen, FAQ – gleiche Tokens und Kartenformen wie oben
   ========================================================================== */
:root { --c-alert: #f0583a; }

.topbar__emergency { color: #fff !important; font-weight: 700; }
.pulse-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c-alert); }
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--c-alert);
  border-radius: 50%;
  opacity: .6;
  animation: pulse 2s var(--ease) infinite;
}
.icon-box--alert { background: rgba(240, 88, 58, .12); color: var(--c-alert); }

/* Pakete */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 36px 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: #fff;
}
.price-card__badge { position: absolute; top: 26px; right: 26px; }
.price-card__name { margin: 0 0 10px; font-size: 1.75rem; }
.price-card__lead { margin: 0 0 26px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--c-line); }
.price__amount { color: var(--c-heading); font-family: var(--font-head); font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.price__unit { color: var(--c-muted); font-size: .9375rem; }
.price-card .check-list { margin-bottom: 28px; }
.price-card__sla {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--c-surface);
  color: var(--c-heading);
  font-size: .9375rem;
}
.price-card__sla .icon { width: 20px; height: 20px; color: var(--c-brand); }
.price-card--featured { border-color: var(--c-dark); background: var(--circuit) 0 0 / 260px, var(--c-dark); box-shadow: var(--shadow-lg); color: rgba(255, 255, 255, .82); }
.price-card--featured .price-card__name,
.price-card--featured .price__amount { color: #fff; }
.price-card--featured .price { border-color: var(--c-line-dark); }
.price-card--featured .price__unit { color: rgba(255, 255, 255, .72); }
.price-card--featured .check-list li::before { background-color: var(--c-accent); }
.price-card--featured .price-card__sla { background: rgba(255, 255, 255, .08); color: #fff; }
.price-card--featured .price-card__sla .icon { color: var(--c-accent-light); }
.price-card--featured :focus-visible { outline-color: var(--c-accent-light); }

.emergency { display: flex; align-items: center; gap: 22px; margin-top: 30px; padding: 24px 26px; border-radius: 24px; background: var(--c-surface); }
.emergency__text { flex: 1; }
.emergency__title { margin: 0 0 4px; font-size: 1.375rem; }
.emergency__text p { margin: 0; }
.pricing-note { margin: 18px 0 0; color: var(--c-muted); font-size: .875rem; text-align: center; }

/* Fristen im Banner */
.banner .check-list strong { color: #fff; }
.deadline-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: rgba(76, 195, 238, .16);
  color: var(--c-accent-light);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.deadline-count:empty { display: none; }

/* Branchen */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 28px;
  border-radius: var(--r-card);
  background: var(--c-surface);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.industry-card .icon-box { margin-bottom: 26px; transition: background var(--dur), color var(--dur); }
.industry-card__media { flex: none; aspect-ratio: 3 / 2; margin: -26px -22px 26px; overflow: hidden; border-radius: calc(var(--r-card) - 10px); background: var(--c-surface-2); }
.industry-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.industry-card__title { margin: 0 0 12px; font-size: 1.625rem; }
.industry-card__title a { color: inherit; text-decoration: none; }
.industry-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.industry-card > p { margin: 0; }
.industry-card .check-list { margin: 22px 0 26px; }
.industry-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--c-line); }
.industry-card__ref { padding: 6px 12px; border-radius: 8px; background: #fff; color: var(--c-heading); font-size: .8125rem; font-weight: 700; }
.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.industry-card:hover .icon-box { background: var(--c-accent); color: #fff; }
.industry-card:hover .link-arrow { color: var(--c-accent); }
.industry-card:hover .link-arrow .icon { transform: translate(2px, -2px); }
.industry-card:has(a:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.industry-card a:focus-visible { outline: none; }

/* Vertrauen: Partner und Kundenlogos in der Kundenstimmen-Box */
.trust-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; margin-top: 40px; }
.trust-row__box { display: flex; align-items: center; gap: 22px; padding: 18px 26px; border-radius: 20px; background: #fff; }
.trust-row__label { flex: none; color: var(--c-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trust-row__partners img { width: auto; height: 38px; }
.client-logos { display: grid; flex: 1; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 16px 24px; align-items: center; justify-items: center; margin: 0; padding: 0; list-style: none; }
.client-logos img { width: auto; max-width: 100%; height: auto; max-height: 46px; object-fit: contain; filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: filter .3s, opacity .3s; }
.client-logos li:hover img { filter: none; opacity: 1; }

/* Zwei weiße Sektionen direkt nacheinander: nur ein Abstand */
.section + .section { padding-top: 0; }

/* Fragen & Antworten */
.faq-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.faq-section__intro .help-contact { margin-top: 26px; }
.faq-section .faq { margin-top: 0; }

/* Etwas mehr Platz in der Navigation (Menüpunkt „Pakete“, längerer Button) */
@media (max-width: 1320px) {
  .main-nav,
  .header-call,
  .header-cta { display: none; }
  .header-phone,
  .menu-toggle { display: inline-grid; }
  .navbar { justify-content: space-between; }
  .header-actions { gap: 10px; }
}

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 580px; margin-inline: auto; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .faq-section { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .industry-grid { grid-template-columns: minmax(0, 1fr); }
  .price-card { padding: 32px 24px 26px; }
  .emergency { flex-direction: column; align-items: flex-start; }
  .emergency .btn { width: 100%; justify-content: space-between; }
  .trust-row__box { flex-direction: column; align-items: flex-start; }
  .client-logos { width: 100%; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
  .client-logos img { max-height: 38px; }
}

/* ==========================================================================
   16 · Bewegung (Variante 03b)
   Hero-Auftritt, Einblenden, Bild-Vorhang, Zählen, Linien zeichnen, lebendige
   Illustration, Maus-Schein, Menüs und Akkordeon. Jede Animation endet in der
   unveränderten Gestaltung. Ohne JavaScript und bei „Bewegung reduzieren“
   stehen alle Inhalte sofort da. Neue Endlos-Schleifen gibt es keine.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --circuit-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%234cc3ee' stroke-opacity='.55' stroke-width='1.5'%3E%3Cpath d='M24 40h56l18 18h54M60 110v40l16 16h70M190 20v50l-20 20v34M236 150h-28v44l-18 18h-60M20 200h40l20 20v24M112 96h44'/%3E%3Ccircle cx='24' cy='40' r='3.5'/%3E%3Ccircle cx='152' cy='58' r='3.5'/%3E%3Ccircle cx='60' cy='110' r='3.5'/%3E%3Ccircle cx='146' cy='166' r='3.5'/%3E%3Ccircle cx='190' cy='20' r='3.5'/%3E%3Ccircle cx='170' cy='124' r='3.5'/%3E%3Ccircle cx='236' cy='150' r='3.5'/%3E%3Ccircle cx='130' cy='212' r='3.5'/%3E%3Ccircle cx='20' cy='200' r='3.5'/%3E%3Ccircle cx='80' cy='244' r='3.5'/%3E%3Ccircle cx='112' cy='96' r='3.5'/%3E%3Ccircle cx='156' cy='96' r='3.5'/%3E%3C/svg%3E");
  --circuit-glow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%23fff' stroke-opacity='.4' stroke-width='1.5'%3E%3Cpath d='M24 40h56l18 18h54M60 110v40l16 16h70M190 20v50l-20 20v34M236 150h-28v44l-18 18h-60M20 200h40l20 20v24M112 96h44'/%3E%3Ccircle cx='24' cy='40' r='3.5'/%3E%3Ccircle cx='152' cy='58' r='3.5'/%3E%3Ccircle cx='60' cy='110' r='3.5'/%3E%3Ccircle cx='146' cy='166' r='3.5'/%3E%3Ccircle cx='190' cy='20' r='3.5'/%3E%3Ccircle cx='170' cy='124' r='3.5'/%3E%3Ccircle cx='236' cy='150' r='3.5'/%3E%3Ccircle cx='130' cy='212' r='3.5'/%3E%3Ccircle cx='20' cy='200' r='3.5'/%3E%3Ccircle cx='80' cy='244' r='3.5'/%3E%3Ccircle cx='112' cy='96' r='3.5'/%3E%3Ccircle cx='156' cy='96' r='3.5'/%3E%3C/svg%3E");
}

@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes lift { from { translate: 0 28px; } }
@keyframes focus-in { from { opacity: 0; filter: blur(12px); } }
@keyframes pop { from { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.06; } }
@keyframes zoom-out { from { scale: 1.12; } }
@keyframes slide-in { from { opacity: 0; translate: -24px 0; } }
@keyframes grow-x { from { scale: 0 1; } }
@keyframes draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.2; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes ring { 12% { rotate: -16deg; } 26% { rotate: 14deg; } 40% { rotate: -10deg; } 54% { rotate: 7deg; } 68% { rotate: -3deg; } 82% { rotate: 0deg; } }
@keyframes ring-hover { 12% { rotate: -16deg; } 26% { rotate: 14deg; } 40% { rotate: -10deg; } 54% { rotate: 7deg; } 68% { rotate: -3deg; } 82% { rotate: 0deg; } }

/* Hero: Inhalte der aktiven Folie treten nacheinander auf – beim Laden und bei
   jedem Folienwechsel; die Überschrift wird Wort für Wort scharf (theme.js) */
.hero__slide.is-active .hero__inner > .eyebrow { animation: rise .8s var(--ease-out) .15s backwards; }
.hero__slide.is-active .hero__title { animation: rise 1s var(--ease-out) .25s backwards; }
.hero__slide.is-active .hero__title.is-split { animation-name: lift; }
.hero__slide.is-active .hero__title .word { animation: focus-in 1s var(--ease-out) calc(.3s + var(--w, 0) * 90ms) backwards; }
.hero__slide.is-active .hero__text { animation: rise .9s var(--ease-out) .55s backwards; }
.hero__slide.is-active .hero__actions { animation: rise .9s var(--ease-out) .7s backwards; }

/* Punkte-Navigation (Hero, Schritte): der aktive Balken füllt sich */
.pager-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: var(--c-accent-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
.pager-dot[aria-current="true"]::before,
.pager-dot[aria-selected="true"]::before { background: rgba(255, 255, 255, .55); }
.pager-dot[aria-current="true"]::after,
.pager-dot[aria-selected="true"]::after { transform: none; }

/* Hero: das Bild rückt beim Scrollen langsam näher (scroll-gesteuert). Aktiv erst ab
   dem ersten Scrollen (.is-scrolled setzt theme.js) – die ruhende Seite wird so exakt
   wie gestaltet gezeichnet, ohne eigene Grafikebene für das Bild. */
@keyframes hero-depth { to { scale: 1.12; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero.is-scrolled .hero__media {
      transform-origin: 50% 0;
      animation: hero-depth linear both;
      animation-duration: auto;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

/* Einblenden: Varianten zu [data-reveal]
   stagger = Kinder nacheinander (Index --i setzt theme.js), clip = Bild-Vorhang */
.js [data-reveal="stagger"],
.js [data-reveal="clip"] { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > * {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .7s var(--ease-out), translate .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="stagger"].is-visible > * { opacity: 1; translate: none; }
.js [data-reveal="clip"] {
  clip-path: inset(100% 0 0 round var(--r-frame));
  transition: clip-path 1.25s var(--ease-inout);
}
.js [data-reveal="clip"].is-visible { clip-path: inset(0 round var(--r-frame)); }
.js [data-reveal="clip"].is-revealed { clip-path: none; } /* danach wieder exakt die Originalkanten */
.js [data-reveal="clip"] > img { scale: 1.14; transition: scale 1.8s var(--ease-out); }
.js [data-reveal="clip"].is-visible > img { scale: none; }

/* Linien-Symbole zeichnen sich beim Einblenden selbst (Pfade mit pathLength="1") */
.js .feature-rows.is-visible .icon-box .icon,
.js .industry-card.is-visible .icon-box .icon { animation: draw 1.6s var(--ease-inout) calc(.3s + var(--i, 0) * 90ms) backwards; }

/* Häkchen in Paketen und Branchen erscheinen nacheinander */
.check-list > li:nth-child(2) { --li: 1; }
.check-list > li:nth-child(3) { --li: 2; }
.check-list > li:nth-child(4) { --li: 3; }
.check-list > li:nth-child(5) { --li: 4; }
.check-list > li:nth-child(6) { --li: 5; }
.js .price-card.is-visible .check-list > li::before,
.js .industry-card.is-visible .check-list > li::before { animation: pop .5s var(--ease-back) calc(.4s + var(--li, 0) * 90ms) backwards; }

/* Kleine Auftritte nach dem Bild-Vorhang, Sterne der Bewertung */
.js .notched__media.is-visible .notched__badge { animation: pop .8s var(--ease-back) .9s backwards; }
.js .why__media.is-visible .person-card { animation: slide-in .8s var(--ease-out) .8s backwards; }
.js .is-visible .rating-chip .stars .icon { animation: pop .5s var(--ease-back) .4s backwards; }
.js .is-visible .rating-chip .stars .icon:nth-child(2) { animation-delay: .48s; }
.js .is-visible .rating-chip .stars .icon:nth-child(3) { animation-delay: .56s; }
.js .is-visible .rating-chip .stars .icon:nth-child(4) { animation-delay: .64s; }
.js .is-visible .rating-chip .stars .icon:nth-child(5) { animation-delay: .72s; }
.notched__num .countup { color: inherit; }

/* Fristen-Illustration: Ring füllt sich, Balken wachsen, Plakette und Hinweis erscheinen */
.banner__art .art-badge,
.banner__art .art-line,
.banner__art .art-bar,
.banner__art .art-toast { transform-box: fill-box; }
.banner__art .art-badge { transform-origin: 50% 50%; }
.banner__art .art-line,
.banner__art .art-bar { transform-origin: 0 50%; }
@keyframes ring-fill { from { stroke-dashoffset: 264; } }
@keyframes draw-check { from { stroke-dasharray: 50; stroke-dashoffset: 50; } to { stroke-dasharray: 50; stroke-dashoffset: 0; } }
@keyframes hotspot-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.js .banner__art.is-visible .art-ring { animation: ring-fill 1.7s var(--ease-inout) .35s backwards; }
.js .banner__art.is-visible .art-check { animation: draw-check .6s var(--ease-out) 1.55s backwards; }
.js .banner__art.is-visible .art-line { animation: grow-x .9s var(--ease-out) var(--d, .8s) backwards; }
.js .banner__art.is-visible .art-bar { animation: grow-x 1.4s var(--ease-inout) 1s backwards; }
.js .banner__art.is-visible .art-badge { animation: pop .9s var(--ease-back) 1.2s backwards; }
.js .banner__art.is-visible .art-toast { animation: slide-in .9s var(--ease-out) 1.45s backwards; }
.js .banner__art.is-visible .hotspot { animation: hotspot-in .6s var(--ease-back) 1.8s backwards; }
.js .banner__art.is-visible .hotspot:nth-of-type(2) { animation-delay: 1.95s; }
.js .banner__art.is-visible .hotspot:nth-of-type(3) { animation-delay: 2.1s; }
/* Tiefe: Plakette und Hinweis folgen leicht der Maus (--px/--py setzt theme.js) */
.banner .art-badge { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -8px); transition: translate .8s var(--ease-out); }
.banner .art-toast { translate: calc(var(--px, 0) * 8px) calc(var(--py, 0) * 6px); transition: translate .8s var(--ease-out); }

/* Kontaktseite: Markierung fällt auf die Karte, die Route läuft zum Ziel */
@keyframes pin-drop { 0% { opacity: 0; translate: 0 -36px; } 55% { opacity: 1; translate: 0 5px; } 78% { translate: 0 -3px; } }
@keyframes route { from { stroke-dashoffset: 150; } }
.js .map-box.is-visible .map-card .icon-box { animation: pin-drop .9s var(--ease-out) .35s backwards; }
.js .map-box.is-visible .map-route { animation: route 3.2s var(--ease-out) .2s backwards; }

/* Maus-Schein: ein Licht folgt dem Zeiger; auf dunklen Flächen leuchten die
   Leiterbahnen auf (nur mit Maus, Position --mx/--my setzt theme.js) */
.price-card,
.industry-card { isolation: isolate; }
.price-card::after,
.industry-card::after,
.cta-box::after,
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 136, 184, .09), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.industry-card::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .95), transparent 70%); }
.price-card--featured::after,
.banner::after,
.cta-box::after {
  background: var(--circuit-glow) 0 0 / 260px, radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(76, 195, 238, .22), transparent 70%);
  -webkit-mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #000 25%, transparent 75%);
  mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), #000 25%, transparent 75%);
}
.cta-box::after { background: var(--circuit-glow-light) 0 0 / 260px, radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 70%); }
.is-spotlit::after { opacity: 1; }

/* Telefon-Symbole klingeln kurz: einmal beim Einblenden der Kontaktbox, sonst beim Überfahren */
.js .cta-box.is-visible .cta-box__phone .icon { animation: ring 1s var(--ease-out) .9s; }
.js .cta-box.is-visible .cta-box__phone:hover .icon,
.cta-box__phone:hover .icon,
.help-contact:hover .help-contact__icon .icon,
.header-call:hover .header-call__icon .icon,
.offcanvas__contact a[href^="tel:"]:hover .icon,
.btn[href^="tel:"]:hover .btn__icon .icon { animation: ring-hover 1s var(--ease-out); }

/* Untermenü: Einträge gleiten nacheinander herein */
.main-nav .sub-menu > li { opacity: 0; translate: 0 6px; transition: opacity .2s, translate .3s var(--ease-out); }
.main-nav .menu-item:hover > .sub-menu > li,
.main-nav .menu-item:focus-within > .sub-menu > li { opacity: 1; translate: none; transition-delay: calc(.05s + var(--n, 0) * 30ms); }

/* Mobiles Menü: Einträge folgen dem Panel */
.mobile-nav .menu > li,
.offcanvas__search,
.offcanvas__contact,
.offcanvas__panel > .btn { opacity: 0; translate: 18px 0; transition: opacity .25s, translate .5s var(--ease-out); }
.offcanvas.is-open .mobile-nav .menu > li,
.offcanvas.is-open .offcanvas__search,
.offcanvas.is-open .offcanvas__contact,
.offcanvas.is-open .offcanvas__panel > .btn { opacity: 1; translate: none; transition-delay: calc(.12s + var(--n, 0) * 45ms); }
.menu > li:nth-child(2), .sub-menu > li:nth-child(2) { --n: 1; }
.menu > li:nth-child(3), .sub-menu > li:nth-child(3) { --n: 2; }
.menu > li:nth-child(4), .sub-menu > li:nth-child(4) { --n: 3; }
.menu > li:nth-child(5), .sub-menu > li:nth-child(5) { --n: 4; }
.menu > li:nth-child(6), .sub-menu > li:nth-child(6) { --n: 5; }
.menu > li:nth-child(7), .sub-menu > li:nth-child(7) { --n: 6; }
.offcanvas__search { --n: 6; }
.offcanvas__contact { --n: 7; }
.offcanvas__panel > .btn { --n: 8; }

/* Fragen & Antworten: Antworten klappen weich auf (wo der Browser es kann) */
@supports selector(::details-content) {
  .faq details,
  .wp-block-details { interpolate-size: allow-keywords; }
  .faq details::details-content,
  .wp-block-details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
  }
  .faq details[open]::details-content,
  .wp-block-details[open]::details-content { block-size: auto; }
  /* Drucken: theme.js klappt alle Antworten auf – ohne Übergang, sonst fehlen sie im Ausdruck */
  @media print {
    .faq details::details-content,
    .wp-block-details::details-content { block-size: auto !important; transition: none !important; }
  }
}

/* Unterseiten: Seitenkopf zoomt sanft heraus, Titel und Pfad steigen auf */
.page-hero > img { animation: zoom-out 2.4s var(--ease-out) backwards; }
.page-hero h1 { animation: rise 1s var(--ease-out) .15s backwards; }
.page-hero .breadcrumbs { animation: rise 1s var(--ease-out) .35s backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
  .hero__inner > *,
  .hero__title .word,
  .page-hero > img,
  .page-hero h1,
  .page-hero .breadcrumbs { animation: none !important; }
  .js [data-reveal="stagger"] > * { opacity: 1; translate: none; }
  .js [data-reveal="clip"],
  .js [data-reveal="clip"].is-visible { clip-path: none; }
  .js [data-reveal="clip"] > img { scale: none; }
}

@media print {
  .js [data-reveal="stagger"] > * { opacity: 1 !important; translate: none !important; }
  .js [data-reveal="clip"] { clip-path: none !important; }
  .js [data-reveal="clip"] > img { scale: none !important; }
}

/* ==========================================================================
   17 · Über uns: Kacheln mit Mini-Grafiken (gewählt am 29.09.2026)
   Oben Text und Bild mit „15+“, darunter vier Kacheln: Chat (persönlicher
   Ansprechpartner), Karte (vor Ort & Fernwartung), Themen (individuelle
   Lösungen) und Systemstatus (proaktive Betreuung). Die Grafiken sind
   HTML/CSS, für Screenreader ausgeblendet (aria-hidden) und bauen sich nach
   dem Einblenden der Kachel auf – der Endzustand ist die ruhende Gestaltung.
   ========================================================================== */
:root {
  --check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
}

.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(50px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-surface);
}
.bento-tile--wide {
  display: grid;
  grid-column: span 2;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 34px;
  align-items: stretch;   /* Chat bzw. Status rechts so hoch wie Grafik und Text links */
  padding: 34px;
}
.bento-tile--dark { background: var(--circuit) 0 0 / 260px, var(--c-dark); color: rgba(255, 255, 255, .78); }
.bento-tile--dark .bento-tile__title { color: #fff; }
.bento-tile__body .icon-box { margin-bottom: 24px; }
.bento-tile__title { margin: 0 0 10px; font-size: 1.5rem; }
.bento-tile p { margin: 0; }

/* Fläche für die kleinen Grafiken in den schmalen Kacheln */
.mini-map,
.mini-chips { position: relative; height: 158px; margin-bottom: 28px; border-radius: 20px; background: #fff; }

/* Chat: Nachricht der Kundschaft, persönliche Antwort des Ansprechpartners */
.mini-chat { display: grid; align-content: center; gap: 10px; padding: 22px; border: 1px solid var(--c-line-dark); border-radius: 22px; background: rgba(255, 255, 255, .05); }
.mini-chat__msg { max-width: 88%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.mini-chat__msg--out { justify-self: end; border-bottom-right-radius: 5px; background: var(--c-accent); color: #fff; transform-origin: 100% 100%; }
.mini-chat__msg--in { justify-self: start; border-top-left-radius: 5px; background: #fff; color: var(--c-heading); transform-origin: 0 0; }
.mini-chat__who { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: rgba(255, 255, 255, .75); font-size: .8125rem; font-weight: 700; }
.mini-chat__who img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c-accent-light); }

/* Karte: Hauptort mit Umkreis, Orte im Einzugsgebiet, Fernwartung als Plakette.
   Die Orte stehen ungefähr in ihrer Himmelsrichtung (--x/--y im Markup). */
.mini-map { height: 196px; overflow: hidden; background: radial-gradient(circle, #d3dce2 1.1px, transparent 1.6px) 0 0 / 14px 14px, #fff; }
.mini-map__ring {
  position: absolute;
  top: 50%;
  left: 44%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 1.5px solid rgba(0, 136, 184, .45);
  border-radius: 50%;
  background: rgba(0, 136, 184, .06);
}
.mini-map__ring:nth-child(2) { scale: 2; border-color: rgba(0, 136, 184, .28); background: rgba(0, 136, 184, .04); }
.mini-map__ring:nth-child(3) { scale: 3.1; border-color: rgba(0, 136, 184, .16); background: none; }
.mini-map__pin {
  position: absolute;
  top: 50%;
  left: 44%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 0 0 5px #fff, var(--shadow-md);
}
.mini-map__pin .icon { width: 19px; height: 19px; }
.mini-map__label {
  position: absolute;
  z-index: 1;
  top: calc(50% + 27px);
  left: 44%;
  translate: -50% 0;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--c-dark);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  color: var(--c-muted);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.mini-chip .icon { width: 16px; height: 16px; color: var(--c-accent); }
.mini-map__remote { position: absolute; top: 12px; right: 12px; padding: 5px 10px; color: var(--c-heading); font-size: .75rem; box-shadow: var(--shadow-sm); }
.mini-map__radius {
  position: absolute;
  top: 13px;
  left: 14px;
  color: var(--c-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mini-map__town {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  translate: -50% -4px;
  color: var(--c-heading);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff;
}
.mini-map__town::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 2px #fff; }
.mini-map__remote::after { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c-brand) var(--check-white) center / 9px no-repeat; }

/* Themen: ausgewählte Bausteine sind gefüllt */
.mini-chips { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; padding: 18px; }
.mini-chip.is-on { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }
.mini-chip.is-on::before { content: ""; flex: none; width: 11px; height: 11px; margin-left: -2px; background: var(--check-white) center / contain no-repeat; }

/* Systemstatus: Kurve und Statuszeilen */
.mini-status { display: flex; flex-direction: column; justify-content: center; padding: 20px 22px 12px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.mini-status__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mini-status__head strong { color: var(--c-heading); font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; }
.mini-status__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.mini-status__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); }
.mini-status__graph { width: 100%; height: 64px; margin: 12px 0 8px; overflow: visible; }
.mini-status__area { fill: rgba(0, 136, 184, .1); }
.mini-status__line { fill: none; stroke: var(--c-brand); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini-status__rows { margin: 0; padding: 0; list-style: none; }
.mini-status__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--c-line); font-size: .875rem; }
.mini-status__rows span { color: var(--c-heading); font-weight: 700; }
.mini-status__rows em { display: inline-flex; align-items: center; gap: 7px; color: var(--c-accent); font-size: .8125rem; font-style: normal; font-weight: 700; }
.mini-status__rows em::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c-accent) var(--check-white) center / 10px no-repeat; }

/* Bewegung: Die Grafiken bauen sich nach dem Einblenden der Kachel auf */
@keyframes bubble { from { opacity: 0; scale: .6; } }
@keyframes ripple-in { from { opacity: 0; scale: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes chip-on { from { border-color: var(--c-line); background: #fff; color: var(--c-muted); } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } }
.js .bento-tile.is-visible .icon-box .icon { animation: draw 1.6s var(--ease-inout) .3s backwards; }
.js .bento-tile.is-visible .mini-chat__msg--out { animation: bubble .6s var(--ease-back) .45s backwards; }
.js .bento-tile.is-visible .mini-chat__who { animation: fade-in .6s var(--ease-out) 1.05s backwards; }
.js .bento-tile.is-visible .mini-chat__msg--in { animation: bubble .6s var(--ease-back) 1.2s backwards; }
.js .bento-tile.is-visible .mini-map__ring { animation: ripple-in 1.1s var(--ease-out) .35s backwards; }
.js .bento-tile.is-visible .mini-map__ring:nth-child(2) { animation-delay: .5s; }
.js .bento-tile.is-visible .mini-map__ring:nth-child(3) { animation-delay: .65s; }
.js .bento-tile.is-visible .mini-map__pin { animation: pin-drop .8s var(--ease-out) .3s backwards; }
.js .bento-tile.is-visible .mini-map__label { animation: fade-in .5s var(--ease-out) .8s backwards; }
.js .bento-tile.is-visible .mini-map__remote { animation: slide-in .7s var(--ease-out) 1s backwards; }
.js .bento-tile.is-visible .mini-map__radius { animation: fade-in .6s var(--ease-out) .6s backwards; }
.js .bento-tile.is-visible .mini-map__town { animation: fade-in .5s var(--ease-out) calc(.75s + var(--t, 0) * 70ms) backwards; }
.mini-chip:nth-child(2) { --c: 1; }
.mini-chip:nth-child(3) { --c: 2; }
.mini-chip:nth-child(4) { --c: 3; }
.mini-chip:nth-child(5) { --c: 4; }
.mini-chip:nth-child(6) { --c: 5; }
.mini-chip:nth-child(7) { --c: 6; }
.mini-chip:nth-child(n+8) { --c: 7; }
.js .bento-tile.is-visible .mini-chips .mini-chip { animation: fade-in .5s var(--ease-out) calc(.25s + var(--c, 0) * 60ms) backwards; }
.js .bento-tile.is-visible .mini-chips .mini-chip.is-on {
  animation:
    fade-in .5s var(--ease-out) calc(.25s + var(--c, 0) * 60ms) backwards,
    chip-on .4s var(--ease-out) calc(.9s + var(--c, 0) * 110ms) backwards;
}
.js .bento-tile.is-visible .mini-status__graph { animation: wipe-in 1.8s var(--ease-inout) .4s backwards; }
.js .bento-tile.is-visible .mini-status__rows em::before { animation: pop .5s var(--ease-back) 1.1s backwards; }
.js .bento-tile.is-visible .mini-status__rows li:nth-child(2) em::before { animation-delay: 1.2s; }
.js .bento-tile.is-visible .mini-status__rows li:nth-child(n+3) em::before { animation-delay: 1.3s; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-tile--wide { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bento-tile,
  .bento-tile--wide { padding: 24px; }
  .bento-tile--wide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bento-tile__title { font-size: 1.375rem; }
  .mini-chat { padding: 16px; }
}

/* Sehr schmale Handys: Plakette „Fernwartung“ nur als Symbol mit Häkchen (steht auch im Titel) */
@media (max-width: 360px) {
  .mini-map__remote { padding: 6px 8px; font-size: 0; }
}

/* ==========================================================================
   18 · Hero: lange Überschrift mit Unterzeile (29.09.2026)
   Steht in der Überschrift „ – “, zeigt das Theme den Teil danach als
   Unterzeile in Cyan (hero.php); für Suchmaschinen und Screenreader bleibt die
   ganze Überschrift samt Gedankenstrich eine H1. Kurze Wörter sind an das
   folgende Wort gebunden („in Koblenz“, „und Umgebung“).
   ========================================================================== */
.hero__title--sub { font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); }
.hero__title-sub {
  display: block;
  margin-top: .4em;
  color: var(--c-accent-light);
  font-size: max(.5em, 1.125rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* ==========================================================================
   19 · Hero: Bildausschnitt je Folie (29.09.2026)
   Auf breiten Bildschirmen steht der Text rechts. Bilder im Breitformat werden
   dort seitlich beschnitten; --left/--right zeigen den linken bzw. rechten
   Bildteil, damit das Motiv neben dem Text bleibt. Auf dem Handy bleibt die Mitte.
   ========================================================================== */
@media (min-width: 961px) {
  .hero__media--left img { object-position: 0 50%; }
  .hero__media--right img { object-position: 100% 50%; }
}

/* ==========================================================================
   20 · Mega-Menü (29.09.2026)
   Leistungen, Pakete, Cloud, Ratgeber und Kontakt öffnen beim Überfahren und
   bei Tastaturfokus eine Fläche in voller Breite der Navigationsleiste: links
   eine kurze Einleitung mit Link, rechts Karten mit Vorschaubild oder Symbol
   (gewählt aus drei Vorschlägen: Variante A „Karten“). Unter Paketen und
   Beiträgen steht eine Leiste (IT-Notfall bzw. Themen). Escape schließt die
   Fläche (theme.js). Das mobile Menü bleibt die einfache Liste.
   ========================================================================== */
.navbar { position: relative; }
.main-nav .menu > .menu-item--mega { position: static; }

.mega {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: 0;
  z-index: 10;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(17, 27, 34, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .35s var(--ease), visibility .25s;
}
/* Brücke über den Spalt zwischen Menüpunkt und Fläche */
.mega::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 36px; }
.main-nav .menu-item--mega:hover > .mega,
.main-nav .menu-item--mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
/* Nach Escape geschlossen, bis Maus oder Fokus den Menüpunkt verlassen */
.main-nav .menu-item--mega.is-closed > .mega { opacity: 0; visibility: hidden; transform: translateY(10px); }

.mega__inner {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 28px;
  max-height: calc(100vh - 230px);
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega__intro { display: flex; flex-direction: column; align-items: flex-start; padding-right: 28px; border-right: 1px solid var(--c-line); }
.mega__intro .eyebrow { margin-bottom: 16px; }
.mega__title { margin: 0 0 10px; color: var(--c-heading); font-family: var(--font-head); font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.mega__text { margin: 0 0 20px; font-size: .9375rem; line-height: 1.6; }
.mega__intro .link-arrow { font-size: .9375rem; }

.mega__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mega__list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-item {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: var(--c-surface);
  color: var(--c-heading);
  text-decoration: none;
  transition: background .3s;
}
.mega-item:hover { background: var(--c-accent-soft); color: var(--c-heading); }
.mega-item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.mega-item__media,
.mega-item__icon {
  position: relative;
  flex: none;
  width: clamp(92px, 7.8vw, 128px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}
.mega-item__media { background: var(--c-surface-2); }
.mega-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mega-item:hover .mega-item__media img { transform: scale(1.08); }
.mega-item__icon { display: grid; place-items: center; background: #fff; color: var(--c-accent); }
.mega-item__icon .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.mega-item__icon--alert { background: rgba(240, 88, 58, .12); color: var(--c-alert); }
/* Anfahrt: Kartenausschnitt mit Markierung */
.mega-item__media--map::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c-line); border-radius: inherit; }
.mega-item__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(0, 119, 159, .18);
  transform: translate(-50%, -50%);
}
.mega-item__pin .icon { width: 17px; height: 17px; }
.mega-item__body { display: grid; gap: 4px; min-width: 0; }
.mega-item__title { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 500; line-height: 1.25; transition: color .25s; }
.mega-item:hover .mega-item__title { color: var(--c-accent); }
.mega-item__text { color: var(--c-text); font-size: .875rem; line-height: 1.45; }
.mega-item__meta { color: var(--c-muted); font-size: .8125rem; line-height: 1.4; }
.mega-item__meta strong { color: var(--c-heading); font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.mega-item__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 2px;
}
/* Beiträge: Datum über dem Titel, Titel höchstens drei Zeilen */
.mega-item--post .mega-item__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: .9375rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Leiste unter den Karten: IT-Notfall (Pakete), Themen (Ratgeber) */
.mega__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 12px 10px 14px;
  border-radius: 18px;
  background: var(--c-surface);
  color: var(--c-heading);
  text-decoration: none;
  transition: background .3s;
}
.mega__bar--alert:hover { background: rgba(240, 88, 58, .1); color: var(--c-heading); }
.mega__bar--alert:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.mega__bar-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(240, 88, 58, .12);
  color: var(--c-alert);
}
.mega__bar-icon .icon { width: 22px; height: 22px; }
.mega__bar-text { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.45; }
.mega__bar-text strong { margin-right: 4px; font-family: var(--font-head); font-size: 1rem; font-weight: 600; }
.mega__bar-cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-btn);
  background: var(--c-dark);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .3s;
}
.mega__bar-cta .icon { width: 18px; height: 18px; }
.mega__bar--alert:hover .mega__bar-cta { background: var(--c-alert); }
.mega__bar-label { flex: none; color: var(--c-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mega__topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mega__topics a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
  color: var(--c-heading);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .25s, background .25s, color .25s;
}
.mega__topics a:hover { border-color: var(--c-accent); background: var(--c-accent); color: #fff; }

/* Einträge gleiten nacheinander herein (wie die Untermenüs) */
.mega__list > li,
.mega__bar { opacity: 0; translate: 0 6px; transition: opacity .2s, translate .3s var(--ease-out); }
.menu-item--mega:hover .mega__list > li,
.menu-item--mega:focus-within .mega__list > li,
.menu-item--mega:hover .mega__bar,
.menu-item--mega:focus-within .mega__bar { opacity: 1; translate: none; transition-delay: calc(.06s + var(--n) * 35ms); }
.mega__list > li { --n: 0; }
.mega__list > li:nth-child(2) { --n: 1; }
.mega__list > li:nth-child(3) { --n: 2; }
.mega__list > li:nth-child(4) { --n: 3; }
.mega__list > li:nth-child(5) { --n: 4; }
.mega__list > li:nth-child(6) { --n: 5; }
.mega__bar { --n: 3; }