/* ============================================================
   ITPROFMASTER – Corporate Design System
   Helles IT-Systemhaus-Layout · Royalblau / Weiß / Orange
   Aufbau nach der Referenzvorlage des Auftraggebers
   ============================================================ */

/* ---------- Fonts (lokal gehostet, DSGVO-konform) ----------
   Inter – dieselbe Schriftfamilie wie in der Referenzvorlage
   (aufbau.ifp-plugin.de lädt "Inter" über Google Fonts; wir hosten
   die beiden Latin-Subsets selbst, damit kein externer Request
   entsteht). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Text – Farbwerte 1:1 aus der Referenzvorlage
     (--e-global-color-secondary #092545 / --e-global-color-text #1B2A3A) */
  --ink: #092545;
  --ink-2: #1b2a3a;
  --muted: #55677d;
  --muted-2: #76869a;

  /* Flächen – helles, leicht bläuliches Weiß (Flyer-Panels) */
  --bg: #ffffff;
  --bg-alt: #f2f6fb;
  --bg-strip: #eaf1f8;
  --surface: #ffffff;
  --line: #dde5f0;
  --line-2: #c7d3e4;

  /* Blau-Familie – direkt aus dem Flyer abgeleitet
     (Marine-Header, Stahlblau, Kornblume, helle Panels) */
  --sand-050: #eef3fa;
  --sand-100: #eaf1f8;
  --sand-200: #d5e0f0;
  --sand-300: #a9bedd;
  --sand-500: #5b7ba6;
  --sand-700: #345277;
  --sand-800: #24395c;

  /* Markenton: Royalblau der Referenzvorlage (--e-global-color-primary) */
  --blue: #0352d0;
  --blue-700: #0343ac;
  --blue-800: #06326f;
  --blue-100: #cddffa;
  --blue-050: #eef4fe;
  --navy: #092545;   /* dunkle Flächen – --e-global-color-secondary */

  /* Konversionsfarbe – Akzent der Referenzvorlage (--e-global-color-accent) */
  --orange: #f96c0f;
  --orange-700: #dc5a05;

  --green: #17864a;
  --green-050: #e9f6ef;
  --gold: #e8963c;   /* Gold-Orange wie „100+ Kunden seit 2002“ */

  /* Schatten – sachlich, keine Effektlast */
  --shadow-xs: 0 1px 2px rgba(15, 28, 51, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 28, 51, 0.04), 0 4px 12px -4px rgba(15, 28, 51, 0.07);
  --shadow-md: 0 2px 6px rgba(15, 28, 51, 0.05), 0 14px 30px -14px rgba(15, 28, 51, 0.18);
  --shadow-lg: 0 4px 12px rgba(15, 28, 51, 0.06), 0 28px 54px -22px rgba(15, 28, 51, 0.26);

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --header-h: 86px;
  --wrap: 1240px;
  --wrap-header: 1400px;
  --wrap-pad: clamp(18px, 4vw, 34px);
  --sec-pad: clamp(54px, 6.5vw, 88px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
strong, b { color: var(--ink); font-weight: 700; }
ul { padding-left: 1.2em; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

::selection { background: var(--blue-100); color: var(--ink); }

:focus-visible {
  outline: 3px solid rgba(52, 82, 119, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

.section { padding-block: var(--sec-pad); }
.section--tight { padding-block: clamp(34px, 4vw, 52px); }
.section--alt { background: var(--bg-alt); }
.anchor-alias { display: block; position: relative; top: calc(var(--header-h) * -1); }

/* ---------- Typografie-Helfer ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.h2 { font-size: clamp(28px, 3.3vw, 40px); }
.lead {
  font-size: clamp(17px, 1.45vw, 19px);
  color: var(--muted);
  max-width: 660px;
  margin: 0;
}

.sec-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 48px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--center .kicker::before { display: none; }
.sec-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sec-head .h2 { margin-bottom: 10px; }

.check-ico {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}

.stars { display: inline-flex; gap: 2px; color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue);
  --btn-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-color);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s var(--ease);
}
.btn:hover { color: var(--btn-color); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .btn-ico { display: inline-flex; transition: transform 0.2s var(--ease); }
.btn:hover .btn-ico { transform: translateX(3px); }

.btn--primary { box-shadow: 0 6px 18px -8px rgba(52, 82, 119, 0.6); }
.btn--primary:hover { background: var(--blue-700); }

.btn--accent { --btn-bg: var(--orange); box-shadow: 0 6px 18px -8px rgba(242, 105, 10, 0.6); }
.btn--accent:hover { background: var(--orange-700); }

.btn--outline {
  --btn-bg: #fff;
  --btn-color: var(--blue);
  border-color: var(--line-2);
}
.btn--outline:hover { border-color: var(--blue); background: var(--blue-050); }

.btn--white { --btn-bg: #fff; --btn-color: var(--blue); }
.btn--white:hover { --btn-color: var(--blue-700); }

.btn--sm { padding: 11px 18px; font-size: 14px; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 15px;
  color: var(--blue);
}
.link-more svg { transition: transform 0.2s var(--ease); }
.link-more:hover svg { transform: translateX(3px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(15, 28, 51, 0.09);
  transition: background-color 0.25s, box-shadow 0.25s;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 30px -20px rgba(15, 28, 51, 0.55);
}
/* Ohne Glas-Unterstützung deckend, damit die Navigation lesbar bleibt */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: #fff; }
}
.site-header .wrap { max-width: var(--wrap-header); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
}

/* Marke – das Originallogo der Firma, Bild- und Wortmarke in einem */
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark { height: 40px; width: auto; display: block; flex-shrink: 0; }
.brand-text { line-height: 1.08; }
.brand-name {
  font-size: 19.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: block;
  color: var(--ink);
}
.brand-name em { font-style: normal; color: var(--blue); }
.brand-claim {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 4px;
}
.site-footer .brand-claim { color: var(--sand-300); }

/* Navigation */
.main-nav { margin-inline: auto; }
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Menüpunkt = Flex-Zeile aus Link + Pfeil: beide sitzen dadurch exakt
   auf derselben Mittelachse, unabhängig von der Textgrundlinie. */
.main-nav > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
}
/* Unterstrich-Balken je Menüpunkt – Muster der Referenzvorlage
   (Elementor „e--pointer-underline“, 3 px hoher Balken, der aus der Mitte
   herauswächst). Bewusst KEINE angeschrägte Fläche und kein blauer
   Hover-Ton mehr: der Balken ist die einzige Zustandsanzeige. */
.main-nav > ul > li::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
  opacity: 0;
  transition: left 0.26s var(--ease), right 0.26s var(--ease), opacity 0.18s;
}
.main-nav > ul > li:hover::before,
.main-nav > ul > li:focus-within::before {
  left: 10px;
  right: 10px;
  opacity: 1;
}
.main-nav > ul > li > a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s;
}
.main-nav > ul > li:hover > a { color: var(--ink); }
.main-nav > ul > li.has-drop > a { padding-right: 4px; }
/* Der aktive Menüpunkt wird nur über das Schriftgewicht markiert.
   Der orangene Balken ist ausschließlich ein Hover-/Klick-Zustand –
   er steht bewusst NICHT dauerhaft unter der aktuellen Seite. */
.main-nav > ul > li > a.is-current,
.main-nav > ul > li > a.is-active { color: var(--ink); font-weight: 600; }
/* Aufgeklapptes Untermenü zählt als „geklickt“ und zeigt den Balken. */
.main-nav > ul > li.is-sub-open::before {
  left: 10px;
  right: 10px;
  opacity: 1;
}
.sub-toggle { position: relative; z-index: 1; }


.sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  transition: transform 0.25s var(--ease), color 0.2s;
}
.sub-toggle .caret { display: block; }
.main-nav > ul > li:hover > .sub-toggle { color: var(--ink); }
.main-nav li.is-sub-open > .sub-toggle { transform: rotate(180deg); color: var(--orange); }

/* Dropdown */
.main-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0.2s;
  z-index: 20;
}
.main-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.main-nav .sub-menu a:hover { background: var(--blue-050); color: var(--blue); }
.main-nav li.is-sub-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Aufklappen per Hover nur an Geräten mit echtem Mauszeiger –
   auf Touch (iPad) öffnet ausschließlich der Pfeil-Button. */
@media (hover: hover) and (pointer: fine) {
  .main-nav li.has-drop:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Mega-Menü */
.mega-panel {
  position: fixed;
  top: var(--header-h);
  left: 50%;
  translate: -50% 0;
  width: min(1120px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.22s var(--ease), visibility 0.2s;
  z-index: 20;
}
.main-nav li.is-sub-open > .mega-panel,
.main-nav li.has-mega:hover > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.mega-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mega-title .ico { display: inline-grid; place-items: center; color: var(--blue); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.mega-col a:hover { background: var(--blue-050); color: var(--blue); }
.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mega-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.mega-note svg { color: var(--blue); }
.mega-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-050);
  padding: 10px 16px;
  border-radius: var(--r-xs);
}
.mega-cta:hover { background: var(--blue-100); }

/* Header-Aktionen
   CTA „Kostenlose Erstberatung“ exakt nach der Referenzvorlage:
   gerader Kasten mit 6 px Radius (kein Parallelogramm), Orange #F96C0F,
   Hover in Navy #092545. */
.header-actions .btn--accent {
  border-radius: 6px;
  box-shadow: none;
  clip-path: none;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 600;
  border-color: var(--orange);
}
.header-actions .btn--accent:hover,
.header-actions .btn--accent:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}
/* Anruf-Button im Header – Aufbau wie in der Referenzvorlage:
   hellblaue Icon-Kachel (abgerundetes Quadrat), daneben Rufnummer
   mit der Zeile „Jetzt anrufen“. Ohne Trennlinie zum CTA. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  padding: 5px 12px 5px 5px;
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.header-phone:hover { color: var(--blue); background: var(--blue-050); }
/* Wie in der Referenz: massiv blau gefüllter Hörer, ohne Kachel */
.header-phone .ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--blue);
  flex-shrink: 0;
}
.header-phone .ico svg { width: 38px; height: 38px; }
.header-phone .txt {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.header-phone .txt small {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-2);
  margin-top: 1px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  background: #fff;
  border-radius: var(--r-xs);
  cursor: pointer;
  place-items: center;
}
.nav-toggle .bars { display: grid; gap: 5px; }
.nav-toggle .bars span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  --hero-bg: #f7faff;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(34px, 5vw, 58px));
  padding-bottom: clamp(40px, 4.5vw, 62px);
  background: var(--hero-bg);
  overflow: hidden;
}

/* Unterseiten-Hero mit Bild: das Foto deckt die komplette Fläche randlos
   ab (kein weißer Streifen, keine Maske). Darüber liegt ein blaues Overlay
   im Flyer-Stil, damit der weiße Text sicher lesbar bleibt. */
.page-hero--media .hero-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
.page-hero--media .hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
}
/* Blaues Overlay: nur so kräftig, wie der weiße Text es braucht.
   Vorher lag über dem ganzen Bild ein Schleier (0,92 links bis 0,18 rechts
   plus ein zweiter Verlauf von unten) – das Foto wirkte dadurch dunkel und
   milchig. Jetzt trägt der Verlauf die Textspalte und läuft schon bei 62 %
   aus; die rechte Bildhälfte bleibt unangetastet.
   Kontrast weiß auf der dunkelsten Stelle: 9,8:1. */
.page-hero--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(16, 31, 54, 0.74) 0%,
    rgba(18, 34, 58, 0.62) 30%,
    rgba(22, 40, 66, 0.28) 52%,
    rgba(22, 40, 66, 0.06) 68%,
    rgba(22, 40, 66, 0) 82%);
}
/* Der Text bekommt seinen Kontrast zusätzlich aus einem engen Schatten –
   dadurch darf der Verlauf schwächer bleiben. */
.page-hero--media h1,
.page-hero--media .lead,
.page-hero--media .breadcrumbs { text-shadow: 0 1px 14px rgba(9, 22, 40, 0.55); }
.hero-copy, .page-hero-copy { position: relative; }
/* Auf Bild-Heros steht der Text weiß auf dem Overlay */
.page-hero--media .wrap { position: relative; z-index: 2; }
.page-hero--media .breadcrumbs,
.page-hero--media .breadcrumbs a,
.page-hero--media .breadcrumbs .sep { color: rgba(255, 255, 255, 0.8); }
.page-hero--media .breadcrumbs a:hover { color: #fff; }
.page-hero--media h1 { color: #fff; }
.page-hero--media .lead { color: rgba(255, 255, 255, 0.92); }
.page-hero--media .hero-trust li { color: rgba(255, 255, 255, 0.92); }
.page-hero--media .hero-trust .check-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }
.page-hero--media .btn--outline {
  --btn-bg: transparent;
  --btn-color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.page-hero--media .btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.hero .wrap,
.page-hero .wrap { position: relative; z-index: 1; }
/* Startseite: Text links, Bild als eigene Spalte rechts daneben */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.hero-copy { max-width: 560px; }

/* ---------- Start-Hero nach Referenzvorlage ----------
   Das Foto steht rechts und wird VOLLSTÄNDIG gezeigt: es läuft über die
   ganze Hero-Höhe, behält sein Seitenverhältnis (`width:auto`) und wird
   nirgends beschnitten. Seine linke Kante blendet per Maske in die weiße
   Fläche über, auf der der Artikel steht – der Text „verschwimmt“ also
   in das Bild, ohne dass eine Kante oder ein weißer Balken entsteht.
   Der Verlauf liegt bewusst in der Maske und nicht im Bild, damit das
   Foto austauschbar bleibt. */
.hero--photo {
  --hero-bg: #ffffff;
  position: relative;
  background: var(--hero-bg);
  padding-bottom: clamp(38px, 4vw, 58px);
  /* Die Hero-Höhe steuert die Bildbreite (Bild = Höhe × Seitenverhältnis).
     Sie wächst deshalb mit der Fensterbreite mit, damit auf breiten
     Monitoren zwischen Artikel und Foto keine leere Fläche stehen bleibt. */
  min-height: min(clamp(600px, 42vw, 800px), calc(100vh - var(--header-h)));
}
/* Das Motiv ist seit v9 ein Gruppenfoto mit Blick zum Besucher. Ein Foto
   in voller Hero-Höhe („height:100%, width:auto") wurde dadurch so breit,
   dass die Gesichter mitten im Artikel standen. Das Bildfeld hat jetzt
   eine feste Breite auf der rechten Seite; der Ausschnitt sitzt über
   object-position auf den Personen. */
.hv-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(47%, 790px);
  height: 100%;
  z-index: 0;
  margin: 0;
  display: block;
  pointer-events: none;
}
.hv-photo > img {
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 26%;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 8%, rgba(0, 0, 0, 0.78) 18%, #000 29%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.34) 8%, rgba(0, 0, 0, 0.78) 18%, #000 29%);
}
/* Ohne Maskenunterstützung übernimmt ein weißer Verlauf über dem Bild */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .hv-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.72) 30%, rgba(255, 255, 255, 0) 58%);
  }
}

.hero--photo .hero-grid {
  grid-template-columns: minmax(0, 56%) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 40px);
}
.hero--photo .hero-copy {
  /* Die Kennzahlenkarte sitzt jetzt unten im Bildfeld und reicht bis an
     dessen linke Kante (53 % der Fensterbreite). Zwischen 1025 und 1400 px
     lief die Textspalte mit ihren festen 640 px genau dort hinein – die
     Karte hätte den Knopf angeschnitten. Deshalb wächst die Spalte hier
     mit der Fensterbreite mit. */
  max-width: min(640px, 46vw);
  /* weicher Lichtschein hinter dem Text – sichert den Kontrast, ohne eine
     sichtbare weiße Fläche zu erzeugen */
  filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.95));
}
.hero--photo .lead { max-width: 540px; }
.hero--photo .hero-checks { grid-template-columns: minmax(0, 1fr); }

/* ---------- Kennzahlen-Kacheln ----------
   Kachelaufbau wie bei aufbau.ifp-plugin.de (Elemente 497f21c / 233cf850):
   drei gleich breite Kacheln, Symbol links neben Zahl und Beschriftung.
   Position wie in der Referenz: Der Rahmen 56c1fd33 ist ein Flexfeld mit
   `justify-content: flex-end`, das Kästchen 497f21c hat KEINE Breite –
   es ist also so breit wie sein Inhalt und sitzt rechtsbündig unter den
   Knöpfen, dort wo im Hintergrund die Personen stehen. Genau so hier. */
/* Der Kasten liegt IM Bild, mittig zwischen den beiden Personen und auf
   Höhe der Knöpfe. Deshalb absolut im Raster (dessen Unterkante = Unterkante
   des Textblocks = Knopfreihe) statt im Fluss – im Fluss wuchs der Hero.
   Der negative rechte Abstand schiebt ihn über die Wrap-Kante hinaus bis
   30 px an den Fensterrand, damit seine Mitte auf den Personen liegt. */
.hero--photo .hero-grid { position: relative; }
.hero--photo .hero-stats-row {
  /* Rechte Kante der Karte liegt jetzt auf der Inhaltskante (.wrap), damit
     sie bündig mit Kopfzeile, Artikel und allen Abschnitten darunter steht,
     statt wie zuvor bis 30 px an den Fensterrand herauszuragen.
     --hstats-shift verschiebt sie bei Bedarf weiter nach links. */
  --hstats-shift: 0px;
  position: absolute;
  bottom: 0;
  right: var(--hstats-shift);
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.hero--photo .hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 20px;
  align-items: stretch;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 25px 0 rgba(9, 37, 69, 0.14);
  padding: 18px 20px;
}
.hero--photo .hstat {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 2px 1px;
}
.hero--photo .hstat + .hstat { border-left: 0; }
.hero--photo .hstat .ico { width: 48px; height: 48px; }
.hero--photo .hstat .ico svg { width: 24px; height: 24px; }
.hero--photo .hstat b { font-size: 22px; font-weight: 700; color: #092545; letter-spacing: 0; }
.hero--photo .hstat small { font-size: 11px; font-weight: 500; color: #6A798B; margin-top: 2px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--blue-100);
  box-shadow: var(--shadow-xs);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}
.hero-badge svg { color: var(--orange); }

/* Größer als bisher (Kundenwunsch) und in den Farben der Referenz:
   Navy #092545 für die erste Zeile, Royalblau #0352D0 für die zweite. */
.hero h1 {
  font-size: clamp(34px, 3.9vw, 50px);
  line-height: 1.14;
  margin-bottom: 20px;
  color: var(--ink);
  text-wrap: initial;
}
.h1-blue { color: var(--blue); display: block; }

.hero .lead {
  margin-bottom: 26px;
  max-width: 540px;
  font-size: clamp(18px, 1.55vw, 20.5px);
  line-height: 1.62;
  color: var(--ink-2);
}

.hero-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  max-width: 560px;
}
.hero-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-2);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Bildspalte des Start-Heros: großes, randscharfes Foto – volle Deckung,
   kein Verlauf, keine Abrundung. Darauf sitzt die Kennzahlen-Karte. */
.hero-media { position: relative; padding-bottom: 74px; }
.hero-photo {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-alt);
  aspect-ratio: 3 / 2;
  min-height: clamp(430px, 40vw, 600px);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 28%;
}
/* Kennzahlen-Karte (Maße siehe .hero--photo weiter oben) */
.hstat {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 8px;
}
.hstat .ico {
  width: 44px;
  height: 44px;
}
.hstat .ico {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  flex-shrink: 0;
}
.hstat .txt { display: flex; flex-direction: column; line-height: 1.1; }
.hstat b { font-size: 23px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.hstat small { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 3px; }

/* ============================================================
   PARTNERLEISTE
   ============================================================ */
.partner-strip {
  background: var(--bg-strip);
  border-block: 1px solid var(--line);
  padding-block: 22px;
}
.partner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
}
.partner-logo {
  flex: 1 1 150px;
  display: flex;
  justify-content: center;
  max-width: 210px;
}
/* Partnerlogos sind seit v9 die Originaldateien der Referenzvorlage
   (PNG mit Transparenz) statt nachgezeichneter Inline-SVG. Höhe steuert
   die Größe, die Breite folgt dem Seitenverhältnis. */
.plogo { width: auto; height: 42px; max-width: 100%; object-fit: contain; }
.plogo--microsoft { height: 38px; }
.plogo--vmware { height: 40px; }
.plogo--veeam { height: 44px; }
.pl-dell-t { font-weight: 300; fill: #3b4658; }

/* ============================================================
   ZIELGRUPPEN (Firmen / Privat)
   ============================================================ */
.aud-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
/* Aufbau wie in der Referenz: weiße Karte, mindestens 290 px hoch, feiner
   Rahmen, Foto rechts (center right), Textspalte auf ~63 % Breite. */
.aud-card {
  --aud: var(--blue);
  --aud-soft: var(--blue-050);
  position: relative;
  display: flex;
  min-height: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s var(--ease), border-color 0.2s;
}
.aud-card::after {
  /* farbige Kante links – ordnet die Karte ihrer Zielgruppe zu */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--aud);
  z-index: 2;
}
.aud-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--blue-100);
}
.aud-card--green { --aud: var(--green); --aud-soft: var(--green-050); }
/* Grundton der Kachel und Schleier über dem Foto – als RGB-Tripel, damit
   der Verlauf denselben Ton mit unterschiedlicher Deckung nutzen kann. */
.aud-card--blue  { --aud-tone: #eef1f4; --aud-veil: 238, 241, 244; }
.aud-card--green { --aud-tone: #f3f1ee; --aud-veil: 243, 241, 238; }

.aud-body {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  padding: 26px 24px 26px 28px;
  padding-right: 40%;
}
.aud-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--aud-soft);
  color: var(--aud);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.aud-text h2 { font-size: clamp(21px, 2.2vw, 26px); color: var(--ink); margin-bottom: 8px; }
.aud-text > p { color: var(--muted); font-size: 15px; margin: 0 0 16px; max-width: 30ch; }
.aud-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.aud-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.aud-card .check-ico { background: var(--aud); width: 18px; height: 18px; }
/* CTA als erkennbare Schaltfläche statt nackter Textlink */
.aud-card .link-more {
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--aud-soft);
  border: 1px solid var(--line);
  color: var(--aud);
  font-size: 14.5px;
}
.aud-card:hover .link-more { background: var(--aud); border-color: var(--aud); color: #fff; }

/* Foto läuft von rechts fließend in die Kartenfläche aus – keine harte Kante */
.aud-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  z-index: 0;
  pointer-events: none;
}
.aud-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, 0.14) 14%, rgba(0, 0, 0, 0.4) 28%,
    rgba(0, 0, 0, 0.68) 42%, rgba(0, 0, 0, 0.9) 56%, #000 68%);
  mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, 0.14) 14%, rgba(0, 0, 0, 0.4) 28%,
    rgba(0, 0, 0, 0.68) 42%, rgba(0, 0, 0, 0.9) 56%, #000 68%);
}

/* ============================================================
   LEISTUNGS-KACHELN
   ============================================================ */
/* Kacheln 1:1 nach aufbau.ifp-plugin.de (Elemente 2ce6ea5d Raster /
   4df2fb3d Kachel / 46efc363 Symbol / 7789aeb8 Titel): sechs Spalten,
   Kachel weiß mit 1px-Rahmen und Radius 14 px, Mindesthöhe 150 px,
   Symbol 62 px, Titel 15 px/700 zentriert. */
.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 150px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid #E7EBF0;
  border-radius: 14px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.tile:hover {
  color: var(--ink);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* Icongröße nach Referenzprojekt: 62 px (Tablet 54 px, Mobil 30 px) */
.tile-ico { color: var(--blue); display: grid; place-items: center; }
.tile-ico svg { width: 62px; height: 62px; }
.tile-img { width: 62px; height: 62px; display: block; }
.tile-label { font-size: 15px; font-weight: 700; line-height: 1.3; color: #092545; }

.tiles-more { text-align: center; margin: 28px 0 0; }

/* ============================================================
   „ALLE LEISTUNGEN“ – KARTENRASTER
   ============================================================
   Aufbau wie die Leistungsseite der Referenz: je Leistung eine
   Karte mit Foto oben, Titel, einem Satz und „Mehr erfahren“.
   Die Referenz zeigt alle 29 auf einmal – das war dem Kunden zu
   viel. Hier stehen sechs, dazu Sofortsuche und Kategoriereiter;
   der Rest kommt auf Klick dazu.
   ============================================================ */
.svc-all { margin-top: clamp(34px, 4.4vw, 52px); }
/* Das aufklappbare Verzeichnis ist entfallen – ohne es endete der
   Abschnitt zu dicht am nächsten. */
.svc-all .svc-grid { margin-bottom: clamp(6px, 1.4vw, 16px); }

.svc-all-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.svc-all-title h3 {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 4px 0 0;
  max-width: 30ch;
}
.svc-search { position: relative; flex: 0 1 340px; min-width: 220px; }
.svc-search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.svc-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.svc-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-050); }

.svc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.svc-chip .ico { display: grid; place-items: center; color: var(--muted); }
.svc-chip > span:last-child {
  font-size: 12.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--blue-050);
  color: var(--blue);
}
.svc-chip:hover { border-color: var(--blue-100); background: var(--blue-050); }
.svc-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.svc-chip.is-active .ico { color: #fff; }
.svc-chip.is-active > span:last-child { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---------- Die Karten ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dfe5ea;
  color: var(--ink);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.svc-card:hover {
  color: var(--ink);
  border-color: #c3d3e4;
  box-shadow: 0 14px 34px -20px rgba(9, 37, 69, 0.5);
  transform: translateY(-3px);
}
.svc-card[hidden] { display: none; }

.svc-card-media { position: relative; display: block; overflow: hidden; background: var(--blue-050); }
.svc-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover .svc-card-media img { transform: scale(1.05); }
.svc-card-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--blue);
}

.svc-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
.svc-card-body b { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.svc-card-body small { font-size: 14.5px; line-height: 1.55; color: #6a798b; flex: 1 1 auto; }
.svc-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}
.svc-card-cta svg { transition: transform 0.2s var(--ease); }
.svc-card:hover .svc-card-cta svg { transform: translateX(4px); }

.svc-more { text-align: center; margin-top: 26px; }
.svc-empty { text-align: center; color: var(--muted); margin: 24px 0 0; }

.svc-index-foot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}
.svc-index-foot svg { color: var(--blue); flex-shrink: 0; margin-top: 3px; }

@media (max-width: 620px) {
  .svc-all-head { flex-direction: column; align-items: stretch; }
  .svc-search { flex: 1 1 auto; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PROZESS & PREISE
   ============================================================ */
.pp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.pp-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-xs);
  height: 100%;
}
.pp-head { margin-bottom: 26px; }
.pp-head h2 { font-size: clamp(21px, 2.4vw, 26px); margin-bottom: 5px; }
.pp-head p { margin: 0; color: var(--muted); font-size: 14.5px; }
.pp-head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Prozess als durchgehende Schrittfolge: eine Leitlinie verbindet die
   nummerierten Marken, der Text steht ruhig linksbündig daneben. */
.process-flow {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 22px;
}
.step--last { padding-bottom: 0; }
/* Leitlinie von Marke zu Marke */
.step:not(.step--last)::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue-100), var(--line));
}
.step-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  color: var(--blue);
}
.step-num {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid #fff;
}
.step-ico { display: grid; place-items: center; }
.step-body { padding-top: 4px; }
.step b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.step small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.step-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-050);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pmini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pmini {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 18px 20px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.pmini:hover { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.pmini--hot { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-050); }
.pmini-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  translate: -50% 0;
  background: var(--blue);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pmini-name { font-size: 15.5px; margin-bottom: 12px; }
.pmini-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pmini-price .cur { font-size: 14px; font-weight: 700; color: var(--muted); }
.pmini-price .val { font-size: 27px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.pmini-unit { display: block; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.pmini-desc { margin: 10px 0 16px; font-size: 13px; color: var(--muted); }
.pmini .link-more { font-size: 14px; }

.pp-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.pp-note svg { color: var(--blue); flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   WISSEN / BLOG
   ============================================================ */
.posts-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.post-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.post-row:hover { border-color: var(--blue-100); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-cover {
  position: relative;
  display: grid;
  place-items: center;
  background: #101c33;
  color: #7ea6ee;
  min-height: 150px;
  overflow: hidden;
}
.post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-ico {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120px 90px at 50% 40%, rgba(52, 82, 119, 0.55), transparent 70%),
    linear-gradient(150deg, #101c33, #16294a);
}
.post-body { padding: 18px 20px; display: flex; flex-direction: column; }
.post-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.post-row h3 { font-size: 16.5px; line-height: 1.35; margin-bottom: 14px; }
.post-row h3 a { color: var(--ink); }
.post-row h3 a:hover { color: var(--blue); }
.post-body .link-more { margin-top: auto; font-size: 14px; }

/* ============================================================
   VERTRAUENSLEISTE
   ============================================================ */
/* Maße nach dem Referenzprojekt: 26 px Innenabstand oben/unten,
   je Logo-Zelle mindestens 72 px Höhe, Logobreite bis 155 px.
   Inhalt bleibt unverändert – nur größer. */
.trust-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px clamp(24px, 3vw, 36px);
}
/* Partnerlogos: groß und über die volle Spaltenbreite verteilt –
   jede Zelle bekommt denselben Anteil (flex: 1 1 0), dadurch bleibt
   kein Platz ungenutzt und die Wortmarken skalieren mit. */
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.8vw, 26px);
  flex-wrap: wrap;
}
.trust-logos .partner-logo {
  flex: 1 1 0;
  min-width: 150px;
  max-width: none;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-logos .plogo { height: 52px; }
.trust-logos .plogo--microsoft { height: 46px; }
.trust-logos .plogo--vmware { height: 48px; }
.trust-logos .plogo--veeam { height: 54px; }

/* ---------- Google-Bewertung: sichtbar anklickbare Kachel ---------- */
.trust-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.22s, transform 0.2s var(--ease);
}
.trust-rating:hover,
.trust-rating:focus-visible {
  color: var(--ink);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.trust-rating:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gr-logo { display: grid; place-items: center; flex-shrink: 0; }
.gr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-top { display: flex; align-items: center; gap: 8px; }
.gr-top .stars { color: #fbbc05; display: inline-flex; gap: 1px; }
.gr-top .stars svg { width: 17px; height: 17px; }
.gr-top b { font-size: 18px; font-weight: 800; color: var(--ink); }
.gr-sub { font-size: 13.5px; font-weight: 500; color: var(--muted); }
/* Diese Zeile macht die Kachel als Schaltfläche erkennbar */
.gr-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.gr-cta svg { transition: transform 0.2s var(--ease); }
.trust-rating:hover .gr-cta svg { transform: translateX(3px); }

/* ---------- Dialog mit den Rezensionen ---------- */
.gr-modal { position: fixed; inset: 0; z-index: 120; }
.gr-modal[hidden] { display: none; }
.gr-backdrop { position: absolute; inset: 0; background: rgba(9, 37, 69, 0.55); }
.gr-panel {
  position: relative;
  width: min(680px, calc(100% - 32px));
  max-height: min(76vh, 720px);
  margin: max(6vh, 60px) auto 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.gr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.gr-head h2 { font-size: 21px; margin: 0 0 3px; }
.gr-head p { margin: 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.gr-head p .stars { color: #fbbc05; }
.gr-head p .stars svg { width: 15px; height: 15px; }
.gr-close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.gr-close:hover { background: var(--bg-alt); color: var(--ink); }
.gr-list { overflow-y: auto; padding: 6px 22px; }
.gr-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.gr-item:last-child { border-bottom: 0; }
.gr-item header { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.gr-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gr-avatar--ph {
  display: grid;
  place-items: center;
  background: var(--blue-050);
  color: var(--blue);
  font-weight: 800;
}
.gr-meta { display: flex; flex-direction: column; }
.gr-meta small { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.gr-meta small .stars { color: #fbbc05; }
.gr-meta small .stars svg { width: 13px; height: 13px; }
.gr-item p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.gr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
.gr-note { font-size: 12.5px; color: var(--muted-2); }

/* ============================================================
   KONTAKT & FORMULARE
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: stretch;
}
/* Bild links neben dem Formular */
.contact-visual {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--bg-alt);
  min-height: 100%;
}
.contact-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: 52% 34%;
}
.contact-info {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
}
.contact-info h3 { font-size: 20px; margin-bottom: 6px; }
.contact-info > p { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ci-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s;
}
a.ci-item:hover { border-color: var(--blue-100); background: var(--blue-050); color: var(--ink); }
.ci-item .ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.ci-item small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ci-item b { display: block; font-size: 15px; }
.ci-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
}

.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}
.contact-form-card h3 { font-size: 20px; margin-bottom: 6px; }
.contact-form-card > p { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.req { color: var(--orange); }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--muted-2); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-050);
}
.form-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
.form-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--blue); flex-shrink: 0; }
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.form-hint { font-size: 13px; color: var(--muted); }
.form-hint.is-error { color: #c0392b; font-weight: 700; }

.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-success { display: none; text-align: center; padding: 24px 0; }
.form-success.is-visible { display: block; }
.form-success .ico {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green-050);
  color: var(--green);
}
.form-success h3 { font-size: 19px; margin-bottom: 8px; }
.form-success p { color: var(--muted); margin: 0; font-size: 14.5px; }

/* ============================================================
   CTA-BALKEN (blau)
   ============================================================ */
/* Durchgehende blaue Leiste von Fensterkante zu Fensterkante – in der
   Referenzvorlage sitzt sie randlos über dem Footer, nicht als
   abgerundete Karte auf weißem Grund. */
.cta-band { padding-block: 0; background: var(--blue); }
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
  background: transparent;
  border-radius: 0;
  padding: clamp(20px, 2.2vw, 26px) 0;
}
.cta-claim, .cta-item { display: flex; align-items: center; gap: 14px; color: #fff; }
.cta-item:hover { color: #fff; }
.cta-claim .ico, .cta-item .ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  flex-shrink: 0;
}
.cta-claim b, .cta-item b { display: block; color: #fff; font-size: 16px; line-height: 1.25; }
.cta-claim small, .cta-item small {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  margin-top: 3px;
}
.cta-claim .ico, .cta-item .ico { width: 40px; height: 40px; }
.cta-btn { padding: 14px 22px; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.5); }
.cta-btn-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.cta-btn-txt small { font-size: 12px; font-weight: 600; opacity: 0.9; margin-top: 2px; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Maße nach aufbau.ifp-plugin.de: dort trägt der Footer deutlich mehr Luft
   und eine größere Schrift (Menüpunkte 17–18 px, Fließtext 13–14 px). */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 6.4vw, 86px) 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.55fr repeat(4, 0.85fr) 1.05fr;
  gap: clamp(28px, 3.2vw, 46px);
}
.footer-about .brand { margin-bottom: 14px; }
.footer-about p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; max-width: 270px; }
/* Berufliche Profile – als beschriftete Schaltflächen, damit sie als
   seriöse Referenz und nicht als Icon-Sammlung wirken. */
/* Profile als kompakte Symbolreihe – in der Referenz steht dort nur eine
   Zeile kleiner Marken, keine beschrifteten Schaltflächen. */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--r-xs);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.footer-social a span { display: none; }
.footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.footer-social svg { flex-shrink: 0; }

.footer-col h2 { font-size: 16.5px; margin-bottom: 18px; letter-spacing: -0.01em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col li a { font-size: 15px; line-height: 1.5; color: var(--muted); }
.footer-col li a:hover { color: var(--blue); }

.footer-adr {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 16px;
}
.footer-contact { display: grid; gap: 12px; }
.footer-contact li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted); }
.footer-contact .ico { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--blue); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(38px, 4.2vw, 54px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: var(--blue); font-weight: 600; font-size: 14px; }
.footer-legal a:hover { color: var(--blue); }

/* ============================================================
   KONTAKT-LEISTE, TO-TOP, COOKIES
   ============================================================ */
.quick-rail {
  position: fixed;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.quick-rail.is-shown { opacity: 1; visibility: visible; }
/* Die Leiste steht dauerhaft offen – kein Headset-Schalter mehr. */
.qr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.qr-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px 9px 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.qr-link:hover { color: var(--ink); border-color: var(--blue-100); }
.qr-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  flex-shrink: 0;
}
.qr-link--offer .qr-ico { background: #fdeee2; color: var(--orange); }
.qr-link--wa .qr-ico { background: #e6f7ec; color: #1faa53; }
.qr-label { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.2; }
.qr-label small { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top .ring { position: absolute; inset: -1px; width: 50px; height: 50px; transform: rotate(-90deg); }
.to-top .ring circle {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  opacity: 0.55;
}

.privacy-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.privacy-fab:hover { color: var(--blue); border-color: var(--blue-100); }

.cookie-box {
  position: fixed;
  left: 16px;
  bottom: 70px;
  z-index: 95;
  width: min(390px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.24s, transform 0.24s var(--ease);
}
.cookie-box.is-open { opacity: 1; transform: translateY(0); }
.cookie-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.cookie-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
}
.cookie-head h2 { font-size: 17px; margin: 0; }
.cookie-text { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.cookie-options { display: grid; gap: 8px; margin-bottom: 16px; }
.cookie-box.is-compact .cookie-options { display: none; }
.cookie-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  cursor: pointer;
}
.cookie-opt.is-locked { opacity: 0.75; cursor: default; }
.co-txt b { display: block; font-size: 14px; }
.co-txt small { display: block; font-size: 12px; color: var(--muted); }
.co-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.co-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.co-switch i {
  position: absolute;
  inset: 0;
  background: var(--line-2);
  border-radius: 999px;
  transition: background-color 0.2s;
  pointer-events: none;
}
.co-switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s var(--ease);
}
.co-switch input:checked + i { background: var(--blue); }
.co-switch input:checked + i::after { transform: translateX(18px); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cookie-more {
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px;
}
.cookie-more:hover { color: var(--blue); }
.cookie-legal { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* ============================================================
   INNERE SEITEN
   ============================================================ */
/* Unterseiten-Hero = exakt dasselbe Muster wie auf der Startseite */
.page-hero {
  --hero-bg: #f7faff;
  position: relative;
  display: flex;
  flex-direction: column;
  /* schlanker als vorher (34–58 / 40–62 px) – Kundenwunsch */
  padding-top: calc(var(--header-h) + clamp(24px, 3.4vw, 40px));
  padding-bottom: clamp(28px, 3.2vw, 42px);
  background: var(--hero-bg);
  overflow: hidden;
}
/* Trennlinie nur, wenn kein Foto da ist – sonst würde sie das Bild abschneiden */
.page-hero:not(.page-hero--media) {
  --hero-bg: #eef3fa;
  border-bottom: 1px solid var(--line);
}
/* Der Seitenton färbt auch die Wechselflächen im Inhalt, damit sich die
   Unterseiten über die volle Länge unterscheiden – nicht nur im Hero. */
body.tone-clay  { --bg-alt: #eef3fb; --bg-strip: #e2ecf7; }
body.tone-stone { --bg-alt: #f1f4f6; --bg-strip: #e7edf0; }
body.tone-ember { --bg-alt: #fbf4ec; --bg-strip: #fbe9d6; }
body.tone-linen { --bg-alt: #f4f8fc; --bg-strip: #eaf1f8; }
body.tone-olive { --bg-alt: #eff5f2; --bg-strip: #e4efe9; }

/* ---------- Farbklänge der Unterseiten ----------
   Jede Seitengruppe bekommt einen eigenen Ton aus derselben Sand-Familie
   plus eine eigene Kantenzeichnung. Statisch, kein Bewegungseffekt – die
   Seiten unterscheiden sich beim Blättern, bleiben aber ein System. */
.page-hero--clay   { --hero-bg: #e6eef8; --tone-accent: #345277; --tone-soft: #cdddf0; }
.page-hero--stone  { --hero-bg: #eaeef1; --tone-accent: #46586b; --tone-soft: #d3dbe2; }
.page-hero--ember  { --hero-bg: #fbeedd; --tone-accent: #c06a1a; --tone-soft: #f5dcbf; }
.page-hero--linen  { --hero-bg: #f5f9fd; --tone-accent: #3d5a80; --tone-soft: #dbe6f3; }
.page-hero--olive  { --hero-bg: #eaf3ee; --tone-accent: #2f6a4c; --tone-soft: #d3e6db; }
.page-hero--sand   { --hero-bg: #eef3fa; --tone-accent: #345277; --tone-soft: #d5e0f0; }

/* Ruhige Grundlinie in der Tonfarbe – ersetzt die uniforme graue Kante */
.page-hero:not(.page-hero--media) { border-bottom-color: var(--tone-soft, var(--line)); }
.page-hero .breadcrumbs a:hover,
.page-hero .kicker { color: var(--tone-accent, var(--blue)); }
/* Die Check-Häkchen im Hero übernehmen den Seitenton */
.page-hero .check-ico { background: var(--tone-soft, var(--blue-100)); color: var(--tone-accent, var(--blue)); }

/* Dezente Kantenzeichnung, je Ton unterschiedlich positioniert */
.page-hero:not(.page-hero--media)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tone-accent, var(--blue)) 0%, var(--tone-soft, var(--line)) 46%, transparent 100%);
  opacity: 0.55;
}
.page-hero--stone:not(.page-hero--media)::after { background: linear-gradient(90deg, transparent 0%, var(--tone-soft) 40%, var(--tone-accent) 100%); }
.page-hero--olive:not(.page-hero--media)::after { background: linear-gradient(90deg, var(--tone-soft) 0%, var(--tone-accent) 50%, var(--tone-soft) 100%); }

.page-hero--media {
  /* Kundenwunsch: die Kopfleisten sind zu dick. Vorher 400–540 px. */
  min-height: clamp(280px, 24vw, 360px);
  justify-content: center;
  padding-top: calc(var(--header-h) + clamp(20px, 2.4vw, 32px));
  padding-bottom: clamp(24px, 2.6vw, 34px);
}
.page-hero--media h1 { font-size: clamp(27px, 2.9vw, 36px); }
.page-hero--tight { padding-bottom: clamp(26px, 3.4vw, 40px); }
.page-hero h1 { font-size: clamp(30px, 3.4vw, 42px); max-width: 680px; }
.page-hero .lead { max-width: 560px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-hero-copy { max-width: 640px; }
.page-hero--media .page-hero-copy { max-width: 620px; }
.page-hero .breadcrumbs { position: relative; z-index: 1; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs .sep { opacity: 0.5; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.content-area { padding-block: clamp(38px, 5vw, 64px); }
.prose { max-width: 820px; }
.prose--wide { max-width: 1000px; }
.prose h2 { font-size: clamp(22px, 2.5vw, 29px); margin-top: 1.7em; }
.prose h3 { font-size: clamp(18px, 2vw, 21px); margin-top: 1.4em; }
.prose p { margin: 0 0 1.1em; }
.prose ul { margin: 0 0 1.2em; display: grid; gap: 7px; }
.prose li::marker { color: var(--blue); }
.prose a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--blue-100); text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.5em 0;
  padding: 18px 24px;
  border-left: 4px solid var(--blue);
  background: var(--blue-050);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 600;
  color: var(--ink);
}
.prose img { border-radius: var(--r-md); }

/* Preistabellen */
.pt-section { margin-bottom: 40px; }
.pt-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  background: #fff;
}
table.pt-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
.pt-table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: 14px 20px;
}
.pt-table td { padding: 15px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.pt-table tr:nth-child(even) td { background: var(--bg-alt); }
.pt-table td:last-child { font-weight: 800; color: var(--ink); white-space: nowrap; text-align: right; }
.pt-table td small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 2px; white-space: normal; }
.pt-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-050);
  color: var(--green);
  margin-left: 8px;
}

/* Skills / Über mich */
.skill-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 8px; padding: 0; list-style: none; }
.skill-chips li {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line-2);
  padding: 8px 15px;
  border-radius: 999px;
  transition: border-color 0.2s, color 0.2s;
}
.skill-chips li:hover { border-color: var(--blue); color: var(--blue); }

.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-xs);
}
.info-card h3 { margin: 0 0 6px; font-size: 16.5px; }
.info-card p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* FAQ auf Unterseiten */
.prose details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.prose details[open] { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.prose summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
  padding: 18px 22px;
  list-style: none;
  position: relative;
  padding-right: 46px;
}
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  translate: 0 -50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-050);
  color: var(--blue);
  font-weight: 800;
  transition: transform 0.3s var(--ease), background-color 0.2s, color 0.2s;
}
.prose details[open] summary::after { transform: rotate(45deg); background: var(--blue); color: #fff; }
.prose details p { padding: 0 22px 18px; margin: 0; color: var(--muted); }

/* Über mich: Porträt */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.about-grid .about-intro p:first-child { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--ink-2); }
.about-portrait {
  position: relative;
  margin: 0 0 30px;
  justify-self: center;
  width: min(360px, 100%);
}
.about-portrait .blob {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 15%;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--blue-050), var(--blue-100));
  border: 1px solid var(--blue-100);
}
.about-portrait img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.about-portrait figcaption {
  position: absolute;
  left: 50%;
  bottom: -24px;
  translate: -50% 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 10px 22px;
  text-align: center;
  white-space: nowrap;
}
.about-portrait figcaption b { display: block; font-size: 15.5px; color: var(--ink); }
.about-portrait figcaption span { display: block; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.about-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Blog-Archiv & Einzelbeitrag */
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.post-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card .post-cover { min-height: 180px; }
.post-card .post-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.post-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.post-chip {
  background: var(--blue-050);
  color: var(--blue);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.post-card h2 { font-size: 17.5px; line-height: 1.35; margin-bottom: 10px; }
.post-card h2 a { color: var(--ink); }
.post-card h2 a:hover { color: var(--blue); }
.post-card p { font-size: 14.5px; color: var(--muted); margin: 0 0 16px; }
.post-card .link-more { margin-top: auto; font-size: 14px; }

.single-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.single-content { font-size: 17px; }
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.post-nav a { font-weight: 700; display: inline-flex; gap: 8px; align-items: center; max-width: 46%; }

.pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
  color: var(--ink-2);
}
.page-numbers.current, .page-numbers:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Verwandte Leistungen */
.related-sec { background: var(--bg-alt); border-top: 1px solid var(--line); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.related-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.related-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-sm); color: var(--blue); transform: translateX(2px); }
.related-card .ico { color: var(--blue); display: inline-grid; place-items: center; }

/* 404 */
.error-hero { text-align: center; padding-block: clamp(90px, 13vw, 150px) clamp(56px, 8vw, 100px); }
.error-hero .code {
  font-size: clamp(84px, 15vw, 160px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--blue);
}

/* ============================================================
   REVEAL (dezent)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal="zoom"] { transform: scale(0.985); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   Ziel: auf iPad und Handy dieselbe Bildsprache wie am Monitor –
   das Hero-Foto bleibt überall hinter dem Text, nur der Verlauf
   dreht sich mit der Bildschirmform mit.
   ============================================================ */
@media (max-width: 1240px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-col--contact { grid-column: span 1; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-ico svg, .tile-img { width: 54px; height: 54px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ab hier Burger-Menü – deckt auch iPad Pro 11" im Querformat (1194 px) ab */
@media (max-width: 1280px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(15, 28, 51, 0.5);
    padding: 22px var(--wrap-pad) 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s, transform 0.22s var(--ease), visibility 0.22s;
    margin: 0;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav > ul > li {
    display: block;
    height: auto;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .main-nav > ul > li:hover { background: none; }
  .main-nav > ul > li > a,
  .main-nav > ul > li.has-drop > a { padding: 15px 4px; font-size: 16.5px; height: auto; }
  .main-nav > ul > li > a.is-current::after,
  .main-nav > ul > li > a.is-active::after { display: none; }
  .sub-toggle { position: absolute; right: 0; top: 11px; width: 40px; height: 40px; margin: 0; }
  .main-nav .sub-menu,
  .mega-panel {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 12px 10px;
    display: none;
    background: none;
    translate: none;
  }
  .main-nav li.is-sub-open > .sub-menu,
  .main-nav li.is-sub-open > .mega-panel { display: block; }
  .main-nav li.has-drop:hover > .sub-menu,
  .main-nav li.has-mega:hover > .mega-panel { display: none; }
  .main-nav li.has-drop.is-sub-open:hover > .sub-menu,
  .main-nav li.has-mega.is-sub-open:hover > .mega-panel { display: block; }
  .mega-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mega-foot { display: none; }
  .nav-toggle { display: grid; }
  /* Telefon bleibt erreichbar, nur als Symbol (wie im Referenzprojekt) */
  .header-phone { padding: 0; }
  .header-phone .txt { display: none; }
  .header-phone .ico,
  .header-phone .ico svg { width: 34px; height: 34px; }
}

@media (max-width: 1080px) {
  /* Start-Hero: Bild rutscht unter den Text, Unterseiten behalten das
     Hintergrundfoto. */
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy { max-width: none; }

  /* Referenzverhalten: Das Foto bleibt rechts und vollständig sichtbar,
     die Maske greift nur früher, damit die schmalere Textspalte trägt. */
  .hero--photo .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  /* Gleicher Grund wie oben: Die Kennzahlenkarte reicht bis an die linke
     Kante des Bildfelds (53 vw). Die Textspalte muss davor enden, sonst
     schneidet die Karte unten die Knöpfe an. */
  .hero--photo .hero-copy { max-width: min(620px, 48vw); }
  .hero--photo .hero-checks { grid-template-columns: minmax(0, 1fr); }
  .hv-photo > img {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 16%, rgba(0, 0, 0, 0.34) 34%,
      rgba(0, 0, 0, 0.72) 50%, #000 66%);
    mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 16%, rgba(0, 0, 0, 0.34) 34%,
      rgba(0, 0, 0, 0.72) 50%, #000 66%);
  }

  /* Ab 1080 px zurück in den Fluss: Kästchen 100 % breit und mittig,
     Symbol über der Zahl. Über dem Bild wäre hier kein Platz mehr. */
  .hero--photo .hero-grid { position: static; }
  .hero--photo .hero-stats-row {
    position: static;
    right: auto;
    justify-content: center;
    margin-top: clamp(20px, 2.6vw, 30px);
  }
  .hero--photo .hero-stats {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
  }
  .hero--photo .hstat { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .hero--photo .hstat .txt { align-items: center; }
  .hero--photo .hstat .ico { width: 40px; height: 40px; }
  .hero--photo .hstat .ico svg { width: 21px; height: 21px; }
  .hero--photo .hstat b { font-size: 20px; }
  .hero--photo .hstat small { font-size: 10px; }
  .hero-media { max-width: 620px; }
  .hero-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud-split { grid-template-columns: 1fr; }
  .pp-split { grid-template-columns: 1fr; }
  .branch-grid, .proj-grid, .posts-row, .dir-grid, .archive-grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr 1fr; }
  .cta-btn { grid-column: span 2; }
  .trust-bar { grid-template-columns: 1fr; }
  .maint-banner { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { grid-row: 1; width: min(290px, 86%); margin-bottom: 40px; }
  .page-hero-grid { grid-template-columns: 1fr; }
}

/* iPad Hochformat (768/834 px): gleiches Muster wie am Monitor,
   nur die Textspalte wird schmaler – das Foto bleibt dahinter.
   Geprüft: Kontrast im Textbereich 7,7:1. */
@media (max-width: 900px) {
  .page-hero--media { min-height: clamp(240px, 34vw, 320px); }
}

@media (max-width: 820px) {
  :root { --header-h: 76px; }
  .brand-mark { height: 31px; }
  .brand-name { font-size: 17.5px; }
  .brand-claim { font-size: 9.5px; letter-spacing: 0.14em; }
  .header-actions { gap: 10px; }
  .header-actions .btn { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-ico svg, .tile-img { width: 44px; height: 44px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-index-body { padding: 4px 16px 18px; }
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; }
  .step-marker { width: 46px; height: 46px; }
  .step:not(.step--last)::before { left: 22px; top: 46px; }
  .pmini-grid { grid-template-columns: 1fr; }
  .pmini--hot { margin-top: 12px; }
  /* Karten: Bild rückt unter den Text, Übergang bleibt fließend */
  .aud-body { padding-right: 26px; }
  .aud-media {
    position: static;
    width: 100%;
    height: clamp(190px, 44vw, 270px);
  }
  .aud-media img {
    object-position: center 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 24%, #000 52%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 24%, #000 52%);
  }
  .form-grid { grid-template-columns: 1fr; }
  /* iOS zoomt bei Eingabefeldern unter 16 px hinein */
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 16px; }
  .info-cards { grid-template-columns: 1fr; }
  .maint-feats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--contact { grid-column: span 2; }
  .quick-rail { display: none; }
}

/* Handy: hochkant lässt sich die Waagerechte nicht nachbauen – Text auf dem
   Foto wäre unlesbar (gemessen 2,0:1). Die Komposition kippt deshalb um 90°:
   Foto randlos oben, das nach unten in Weiß zerfließt, der Text wächst direkt
   daraus hervor. Gleiche Bildsprache, keine harte Kante, kein separater Block. */
@media (max-width: 700px) {
  .hero, .page-hero {
    padding-top: var(--header-h);
    padding-bottom: clamp(28px, 6vw, 42px);
  }
  .hero-copy, .page-hero-copy { max-width: none; }
  .hero-media { max-width: none; }

  /* Bild-Hero bleibt auch mobil ein Vollbild mit Overlay – der Text liegt
     lesbar darüber, kein weißer Streifen. */
  .page-hero--media { min-height: clamp(320px, 62vw, 420px); }
  .page-hero--media .page-hero-copy { max-width: none; }
  .hero-badge { margin-bottom: 16px; }
  .page-hero .breadcrumbs { margin-top: 4px; }
  /* Unter 700 px kippt die Komposition um 90°: Foto randlos oben über die
     volle Breite (weiterhin komplett sichtbar, nur eben quer), nach unten
     in Weiß auslaufend, der Text wächst daraus hervor. Das seitliche
     Ausbleichen trägt hier nicht mehr – rechts blieb es bei 1,0:1. */
  .hero--photo {
    min-height: 0;
    padding-top: 0;
    display: block;
  }
  /* Das Hero-Motiv ist seit v9 ein Hochformat. Mit `height:auto` wurde es
     mobil so hoch, dass die Kennzahlenleiste in die Überschrift lief –
     deshalb feste Bildhöhe mit Ausschnitt auf die Gesichter. */
  .hv-photo {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }
  .hv-photo > img {
    width: 100%;
    height: clamp(280px, 74vw, 430px);
    object-fit: cover;
    object-position: center 18%;
    margin-top: var(--header-h);
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 84%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 84%, rgba(0, 0, 0, 0) 100%);
  }
  .hero--photo .hero-copy { max-width: none; filter: none; }
  /* Die Karte bleibt auch mobil dreispaltig (wie in der Referenz),
     nur enger gesetzt. */
  .hero--photo .hero-stats-row { margin-top: clamp(18px, 4vw, 26px); }
  .hero--photo .hero-stats { gap: 6px; padding: 8px 10px; }
  .hero--photo .hstat { gap: 6px; padding: 2px 1px; }
  .hero--photo .hstat .ico { width: 28px; height: 28px; }
  .hero--photo .hstat .ico svg { width: 15px; height: 15px; }
  .hero--photo .hstat b { font-size: 17px; }
  .hero--photo .hstat small { font-size: 9.5px; line-height: 1.15; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .hero-checks { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .hero-media { padding-bottom: 0; }
  .hstat { justify-content: flex-start; }
  .hstat + .hstat { border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .hero--photo .hstat { justify-content: center; }
  .hero--photo .hstat + .hstat { border-top: 0; padding-top: 2px; }
  .branch-grid, .proj-grid, .posts-row, .dir-grid, .archive-grid, .related-grid,
  .cert-grid { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; }
  .post-cover { min-height: 170px; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-btn { grid-column: auto; }
  .partner-row { gap: 16px 10px; }
  .partner-logo { flex: 1 1 42%; }
  .trust-logos .partner-logo { flex: 1 1 42%; }
  .testi-slider { padding: 24px 20px 56px; }
  .testi-slide { inset: 24px 20px 56px; }
  .testi-nav { left: 20px; }
  .aud-body { flex-direction: column; gap: 14px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .quick-rail, .to-top, .privacy-fab, .cookie-box, .cta-band { display: none !important; }
  body { color: #000; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   v7 – UNTERSEITEN: KOPF-VARIANTEN & TEXTBAUSTEINE
   ============================================================
   Ziel: Beim Durchklicken soll keine Unterseite wie die vorige
   aussehen. Der Kopf hat fünf Varianten, der Text kennt Bilder,
   die links oder rechts umflossen werden, Zahlenbänder, Merk-
   kästen und Ablaufschritte. Alles statisch – keine Animation,
   die vom Lesen ablenkt.
   ============================================================ */

/* ---------- Kopf: split / side – Bild immer links, Text rechts ---------- */
.page-hero--l-split .page-hero-grid,
.page-hero--l-side .page-hero-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 54px);
}
.page-hero--l-split .page-hero-copy,
.page-hero--l-side .page-hero-copy { max-width: 600px; }

.page-hero-media {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(9, 37, 69, 0.16);
}
.page-hero-media img {
  display: block;
  width: 100%;
  height: clamp(240px, 26vw, 360px);
  object-fit: cover;
}
/* Der farbige Streifen unter dem Bildfeld ist entfallen – der Kunde
   wollte die Balken an den Bildern durchgängig weg. */
.page-hero-media::after { content: none; }

/* ---------- Kopf: plain (ohne Bild, dafür Kennzahlen) ---------- */
.hero-facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--tone-soft, var(--line));
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  max-width: 640px;
}
.hero-facts li {
  flex: 1 1 150px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hero-facts li + li { border-left: 1px solid var(--tone-soft, var(--line)); }
.hero-facts b { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.hero-facts span { font-size: 13.5px; color: var(--muted); }

/* ---------- Kopf: band (Bildband unter dem Kopf) ---------- */
.page-band {
  margin: 0;
  position: relative;
  overflow: hidden;
}
.page-band img {
  display: block;
  width: 100%;
  height: clamp(190px, 24vw, 330px);
  object-fit: cover;
  object-position: center 45%;
}
.page-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 37, 69, 0.22) 0%, rgba(9, 37, 69, 0) 45%);
}
.content-area--band .wrap { padding-top: clamp(30px, 4vw, 50px); }

/* ============================================================
   TEXTBAUSTEINE IM INHALT
   ============================================================ */

/* Umflossenes Bild – links oder rechts im Fließtext */
.ipm-fig {
  margin: 6px 0 20px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.ipm-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
/* Die Bildunterschrift trug bis v8 links einen 3 px breiten blauen
   Balken. Der Kunde hat ihn auf mehreren Seiten ausdrücklich bemängelt
   („unten am Bild ist eine Leiste und links ein blauer Balken") –
   deshalb ersatzlos entfernt. */
.ipm-fig figcaption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  padding: 9px 2px 11px;
  border-left: 0;
}
.ipm-fig--right {
  float: right;
  width: min(44%, 400px);
  margin-left: clamp(22px, 3vw, 34px);
}
.ipm-fig--left {
  float: left;
  width: min(44%, 400px);
  margin-right: clamp(22px, 3vw, 34px);
}
.ipm-fig--wide { width: 100%; margin: 26px 0; }
.ipm-fig--wide img { aspect-ratio: 21 / 8; object-fit: cover; }

/* Durchlaufendes Bildband mitten im Text – bricht bewusst aus der
   Textspalte aus, damit der Lesefluss einen Absatz bekommt. */
.ipm-fig--band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(30px, 4vw, 46px);
  border-radius: 0;
}
.ipm-fig--band img { height: clamp(200px, 26vw, 380px); object-fit: cover; border-radius: 0; }
.ipm-fig--band figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
  border-left: 0;
  padding-top: 10px;
}

/* Nach umflossenen Bildern sauber weiterschreiben */
.prose h2, .prose h3 { clear: both; }
.prose::after { content: ""; display: block; clear: both; }

/* Zahlenband */
.ipm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 26px 0 30px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  clear: both;
}
.ipm-facts > div {
  background: #fff;
  padding: 18px 20px;
}
.ipm-facts b {
  display: block;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--blue);
  line-height: 1.15;
}
.ipm-facts span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }

/* Steht das Zahlenband neben einem Bild, ist die Spalte nur halb so breit.
   Drei Zellen nebeneinander brachen dort unsauber um, und die Werte sind
   auf dieser Seite Wörter („ein Ansprechpartner") statt Zahlen – in
   28 px sah das falsch aus. Deshalb untereinander und kleiner. */
.ipm-side .ipm-facts {
  grid-template-columns: minmax(0, 1fr);
  margin: 18px 0 0;
}
.ipm-side .ipm-facts > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px;
}
.ipm-side .ipm-facts b { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.ipm-side .ipm-facts span { font-size: 13.5px; margin-top: 0; }

/* Merkkasten */
.ipm-note {
  margin: 26px 0;
  padding: 18px 22px;
  border: 1px solid var(--tone-soft, var(--blue-100));
  border-left: 4px solid var(--tone-accent, var(--blue));
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--bg-alt, #f4f8fd);
  clear: both;
}
.ipm-note > :last-child { margin-bottom: 0; }
.ipm-note strong { color: var(--ink); }
.ipm-note--warn { border-left-color: var(--orange); background: #fdf3ea; border-color: #f8dcc3; }

/* Ablauf in Schritten */
.ipm-steps { counter-reset: ipmstep; margin: 24px 0 28px; display: grid; gap: 12px; clear: both; }
.ipm-steps > div {
  position: relative;
  padding: 14px 18px 14px 60px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}
.ipm-steps > div::before {
  counter-increment: ipmstep;
  content: counter(ipmstep);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.ipm-steps b { display: block; color: var(--ink); font-size: 16.5px; }
.ipm-steps p { margin: 2px 0 0; font-size: 15.5px; }

/* Zweispaltiger Textblock */
.ipm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 40px; clear: both; }

/* Häkchenliste (ersetzt Aufzählungspunkte) */
.prose ul.ipm-checks { list-style: none; padding: 0; display: grid; gap: 9px; margin: 18px 0 24px; }
.prose ul.ipm-checks li { position: relative; padding-left: 30px; }
.prose ul.ipm-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--tone-soft, var(--blue-100));
  box-shadow: inset 0 0 0 1px var(--tone-accent, var(--blue));
}
.prose ul.ipm-checks li::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 0.72em;
  width: 5px;
  height: 8px;
  border: solid var(--tone-accent, var(--blue));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.prose ul.ipm-checks--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 30px; }

/* Kurzes Zitat / Kernaussage */
.ipm-quote {
  margin: 30px 0;
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: var(--navy);
  color: #fff;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 600;
  line-height: 1.55;
  clear: both;
}
.ipm-quote small { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }

@media (max-width: 860px) {
  .page-hero--l-split .page-hero-grid,
  .page-hero--l-side .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero--l-split .page-hero-media,
  .page-hero--l-side .page-hero-media,
  .page-hero--l-flat .page-hero-media { order: 2; }
  .page-hero-media img { height: clamp(200px, 46vw, 300px); }
}
@media (max-width: 760px) {
  .ipm-fig--left, .ipm-fig--right {
    float: none;
    width: 100%;
    margin-inline: 0;
    margin-block: 20px;
  }
  .ipm-fig--wide img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   v7 – PARTNERLEISTE AUF REFERENZMASS
   ============================================================
   aufbau.ifp-plugin.de setzt die Logos auf 155 px Breite in
   Zellen mit 72 px Mindesthöhe. Bei nur drei Partnern hatte
   „flex: 1 1 0“ die Wortmarken auf fast das Doppelte gedehnt –
   deshalb steht die Logobreite jetzt fest, die Zellen verteilen
   nur noch den Platz.
   ============================================================ */
.trust-logos { justify-content: space-around; gap: clamp(12px, 2vw, 30px); }
.trust-logos .partner-logo {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 72px;
  padding-inline: clamp(4px, 1.4vw, 24px);
}


@media (max-width: 720px) {
  .trust-logos .partner-logo { min-height: 60px; padding-inline: 4px; }
  .trust-logos .plogo,
  .trust-logos .plogo--microsoft,
  .trust-logos .plogo--vmware,
  .trust-logos .plogo--veeam { height: 38px; }
}

/* ============================================================
   v7 – GOOGLE-BEWERTUNGEN: AUFKLAPPENDES PANEL
   ============================================================
   Kein Overlay mehr. Das Panel liegt im Seitenfluss direkt unter
   der Bewertungskachel; beim Öffnen wächst seine Höhe und alles
   darunter rutscht nach unten. Animiert wird grid-template-rows,
   weil sich damit auch unbekannte Inhaltshöhen sauber ausfahren
   lassen (height:auto ist nicht animierbar).
   ============================================================ */
.gr-reveal {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--navy);
  color: #fff;
  transition: grid-template-rows 0.42s var(--ease);
}
.gr-reveal.is-open { grid-template-rows: 1fr; }
.gr-reveal-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.3s 0.08s;
}
.gr-reveal.is-open .gr-reveal-inner { opacity: 1; }
.gr-reveal .wrap { padding-block: clamp(28px, 3.6vw, 46px); }

.gr-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 22px;
}
.gr-head-txt { flex: 1 1 auto; min-width: 0; }
.gr-head h2 { font-size: clamp(20px, 2.4vw, 27px); color: #fff; margin: 0 0 4px; }
.gr-head p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.78); display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.gr-head p b { color: #fff; font-size: 17px; }
.gr-head .stars { color: #fbbc05; display: inline-flex; gap: 1px; }
.gr-logo--lg { background: #fff; border-radius: 10px; width: 48px; height: 48px; flex-shrink: 0; }
.gr-live { display: inline-flex; align-items: center; gap: 7px; }
.gr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
  animation: grpulse 2.4s infinite;
}
@keyframes grpulse {
  70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
.gr-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.gr-close:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.gr-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.gr-item {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.gr-item header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gr-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gr-avatar--ph {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 800;
}
.gr-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-meta b { color: #fff; font-size: 15.5px; }
.gr-meta small { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }
.gr-meta .stars { color: #fbbc05; display: inline-flex; gap: 1px; }
.gr-meta .stars svg { width: 13px; height: 13px; }
.gr-item p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }

.gr-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.gr-foot .btn--outline { --btn-color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.gr-foot .btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.gr-note { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }

/* Offener Zustand an der Kachel sichtbar machen */
.trust-rating[aria-expanded="true"] { border-color: var(--blue); box-shadow: var(--shadow-md); }
.trust-rating[aria-expanded="true"] .gr-cta svg { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .gr-reveal, .gr-reveal-inner { transition: none; }
}

/* ============================================================
   ZIELGRUPPEN-KACHELN – 1:1 NACH aufbau.ifp-plugin.de
   ============================================================
   Ausgelesen aus post-11.css (Elemente 61b5924e / 174ffb57):

     Karte      display:flex; flex-direction:row; min-height:290px;
                border 1px #DFE5EA; kein Radius;
                Foto als Flächenbild, background-position:center right,
                background-size:cover
     Innenblock flex-direction:column; padding 24px (innen nochmal 14px)
     Kopfzeile  flex-direction:row  →  Icon UND Überschrift nebeneinander
     Icon       54px  (1024px: 46px · 767px: 34px)
     H3         Inter 23px / 700 / #0352D0  (21px · 17px)
     Fließtext  Breite 62,81 % · 13px / 400 / 1.55 / #6A798B
     Liste      13px / 500 / 1.6 / #1B2A3A, blauer Punkt statt Häkchen
     Link       13px / 700 / #0352D0
     Abschnitt  Raster 2 Spalten, Innenabstand 28px/10px/24px, Weiß

   Einziger Unterschied: Bei der Referenz ist die linke Bildhälfte
   bereits im Foto weiß ausgeblendet. Unsere Motive werden beim
   Aufbereiten genauso behandelt – deshalb liegt hier kein
   Verlauf mehr im CSS (nur unter 600 px als Reserve).
   ============================================================ */
.aud-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.aud-card {
  /* Die Kachelfläche trägt den Grundton des jeweiligen Fotos. Dadurch
     wirkt das Bild nicht wie etwas, das hinter der Kachel liegt, sondern
     die Kachel selbst ist auf das Motiv abgestimmt – so wie bei der
     Referenz. Der Ton stammt aus der oberen linken Bildecke und ist
     stark aufgehellt, damit der Fließtext lesbar bleibt (gemessen:
     Überschrift 6,1:1, Fließtext 4,9:1). */
  --aud-tone: #f3f4f4;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 400px;
  border: 1px solid #dfe5ea;
  border-radius: 0;
  background: var(--aud-tone);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.aud-card:hover {
  transform: none;
  border-color: #c3d3e4;
  box-shadow: 0 10px 30px -18px rgba(9, 37, 69, 0.4);
}
.aud-card::after { content: none; }

/* Foto = Flächenbild der Karte, rechts ausgerichtet */
.aud-media {
  position: absolute;
  inset: 0;
  width: auto;
  order: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aud-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
}
/* Heller Schleier über der Textseite. Ohne ihn hängt die Lesbarkeit davon
   ab, ob das Motiv zufällig links hell ist – beim Motivtausch stand der
   Text plötzlich auf einem dunklen Fensterrahmen. Rechts bleibt das Foto
   unangetastet: die Kachel wirkt weiter bildgeführt wie in der Referenz. */
.aud-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--aud-veil, 238, 241, 244), 0.99) 0%,
    rgba(var(--aud-veil, 238, 241, 244), 0.985) 46%,
    rgba(var(--aud-veil, 238, 241, 244), 0.9) 56%,
    rgba(var(--aud-veil, 238, 241, 244), 0.45) 68%,
    rgba(var(--aud-veil, 238, 241, 244), 0) 82%);
}

/* Innenblock: Spalte, 24 px außen + 14 px innen wie in der Referenz */
.aud-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 28px;
  width: 100%;
}

/* Kopfzeile: Icon und Überschrift NEBENEINANDER */
.aud-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 0;
  margin-bottom: 10px;
}
.aud-ico {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 0;
  background: none;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aud-ico svg { width: 46px; height: 46px; stroke-width: 1.5; }
.aud-text h2,
.aud-head h2 {
  font-family: "Inter", sans-serif;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0352d0;
  margin: 0;
}

/* Schriftgrößen der Kachel: in der Referenzvorlage deutlich größer als
   in v8 gemessen (Fließtext 15 px statt 13 px, Liste 15 px, Zeilenabstand
   ~34 px). Der Kunde wollte genau das – „die Schrift ist zu klein, bei
   der Referenz ist das größer und das fällt direkt ins Auge". */
.aud-text { padding: 0 14px 16px; }
.aud-text > p {
  width: 100%;
  max-width: 30ch;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #45566b;
  margin: 0 0 22px;
}

.aud-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: block;
  max-width: 30ch;
}
.aud-list li {
  display: block;
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #16233a;
}
.aud-list li:last-child { margin-bottom: 0; }
.aud-list li .check-ico { display: none; }
.aud-list li::before {
  content: "\25CF";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  line-height: 2.05;
  color: #0352d0;
}

.aud-card .link-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15.5px;
  font-weight: 700;
  color: #0352d0;
}
.aud-card:hover .link-more { background: none; border: 0; color: #0352d0; }
.aud-card:hover .link-more svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .aud-card { min-height: 280px; }
  .aud-body { padding: 24px; }
  .aud-ico { width: 46px; height: 46px; }
  .aud-ico svg { width: 38px; height: 38px; }
  .aud-head h2 { font-size: 24px; }
}
@media (max-width: 1024px) {
  .aud-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
  .aud-card { min-height: 250px; }
  .aud-body { padding: 18px; }
  .aud-head { padding: 8px 8px 0; }
  .aud-text { padding: 0 8px 8px; }
  .aud-ico { width: 34px; height: 34px; }
  .aud-ico svg { width: 28px; height: 28px; }
  .aud-head h2 { font-size: 19px; line-height: 1.18; }
  .aud-text > p { font-size: 13px; line-height: 1.45; }
  .aud-list li { font-size: 13px; line-height: 1.4; margin-bottom: 7px; padding-left: 19px; }
  .aud-card .link-more { font-size: 13px; }
  .aud-media img { object-position: 74% center; }
}
@media (max-width: 600px) {
  .aud-text > p, .aud-list { width: 100%; max-width: 100%; }
  /* Auf schmalen Geräten deckt ein Verlauf nach, weil der weiße
     Bereich des Motivs beim Beschnitt sonst zu knapp wird. */
  .aud-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.92) 52%, rgba(255, 255, 255, 0.55) 78%, rgba(255, 255, 255, 0.2) 100%);
  }
}

/* ============================================================
   v7.1 – PARTNERLEISTE: KASTEN RAUS, RASTER WIE IN DER REFERENZ
   ============================================================
   Die Referenz stellt die Logos ohne Rahmen und ohne Füllfläche
   in ein Raster: gleich breite Zellen, Zeilenhöhe 72 px,
   Logobreite 155 px, 26 px Innenabstand oben/unten. Genau das
   hier – nur mit drei statt fünf Partnern, plus der Google-
   Kachel rechts, die es in der Referenz nicht gibt.
   ============================================================ */
.partner-strip { background: #fff; border-block: 1px solid #dfe5ea; padding-block: 0; }
.trust-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 26px 0;
}
.trust-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 16px;
}
.trust-logos .partner-logo {
  min-height: 72px;
  min-width: 0;
  max-width: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-logos .plogo { width: 155px; max-width: 100%; height: auto; max-height: none; }

@media (max-width: 900px) {
  .trust-bar { grid-template-columns: minmax(0, 1fr); }
  .trust-logos .partner-logo { min-height: 60px; }
  .trust-logos .plogo { width: 130px; }
}
@media (max-width: 520px) {
  .trust-logos { gap: 10px 16px; }
  .trust-logos .partner-logo { min-height: 52px; }
  .trust-logos .plogo { width: 108px; }
}

/* Zustand ohne hinterlegten API-Zugang */
.gr-empty {
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.gr-empty p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.gr-empty strong { color: #fff; }
.gr-empty em { color: #9dc0ff; font-style: normal; font-weight: 600; }

/* ============================================================
   v7.2 – BILD UND TEXT BÜNDIG NEBENEINANDER
   ============================================================
   Der umflossene Float trägt nur neben Absätzen. Neben Listen,
   Schrittfolgen oder Kästen entstand daneben eine leere weiße
   Fläche. Dieser Baustein stellt beides in ein Raster: gleiche
   Ober- und Unterkante, das Bild füllt seine Spalte vollständig.
   ============================================================ */
.ipm-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: stretch;
  margin: 26px 0 30px;
  clear: both;
}
.ipm-side--left { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
.ipm-side--left .ipm-side-media { order: -1; }

.ipm-side-txt { min-width: 0; }
.ipm-side-txt > :first-child { margin-top: 0; }
.ipm-side-txt > :last-child { margin-bottom: 0; }

.ipm-side-media {
  margin: 0;
  min-width: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.ipm-side-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: var(--r-md);
  flex: 1 1 auto;
}
.ipm-side-media figcaption {
  flex: 0 0 auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  padding: 9px 2px 11px;
  border-left: 0;
}

@media (max-width: 860px) {
  .ipm-side, .ipm-side--left { grid-template-columns: minmax(0, 1fr); }
  .ipm-side--left .ipm-side-media { order: 0; }
  .ipm-side-media img { min-height: 0; height: clamp(190px, 44vw, 300px); }
}

/* ------------------------------------------------------------
   Durchlaufendes Bildband: exakt von Fensterkante zu Fensterkante
   ------------------------------------------------------------
   Bisher rechnete `margin-inline: calc(50% - 50vw)` mit der halben
   TEXTSPALTE. Die Textspalte steht aber linksbündig im Wrap, nicht
   mittig im Fenster – dadurch stand das Band schief und wurde rechts
   angeschnitten. Jetzt wird der tatsächliche Abstand der Textspalte
   zur Fensterkante herausgerechnet: halber Rand des Wraps plus dessen
   Innenabstand.
   ------------------------------------------------------------ */
.ipm-fig--band {
  --bleed: calc(max((100vw - var(--wrap)) / 2, 0px) + var(--wrap-pad));
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--bleed));
  margin-right: 0;
}

/* ---------- Kopf-Variante „flat": keine eigene Fläche ----------
   Der Kopf steht auf demselben Weiß wie der Rest der Seite; nur
   das Foto rechts hebt ihn ab. Kein Farbfeld, keine Trennlinie,
   keine Tonkante. */
.page-hero.page-hero--l-flat {
  --hero-bg: #fff;
  border-bottom: 0;
  padding-bottom: clamp(24px, 3vw, 38px);
}
.page-hero--l-flat::after { content: none; }
.page-hero--l-flat .page-hero-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 54px);
}
.page-hero--l-flat .page-hero-copy { max-width: 600px; }

/* ---------- Kopf-Variante „bare": nur Brotkrümel und Titel ---------- */
.page-lede {
  background: #fff;
  padding-top: calc(var(--header-h) + clamp(26px, 4vw, 44px));
  padding-bottom: clamp(14px, 2vw, 22px);
}
.page-lede h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  max-width: 760px;
  margin: 6px 0 0;
}
/* „bare": Der Beitrag beginnt direkt unter der Überschrift – ohne den
   sonst üblichen Abstand des Inhaltsbereichs. Der Kunde: „über mich, und
   dann direkt drunter fängt der Beitrag an." */
.page-lede { padding-bottom: 0; }
.page-lede h1 { margin-bottom: 0; }
.content-area--bare { padding-top: 14px; }
.content-area--bare .wrap { padding-top: 0; }
.content-area--bare .prose > :first-child { margin-top: 0; }

@media (max-width: 860px) {
  .page-hero--l-flat .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pfeil am Schalter zeigt die Richtung an: runter = aufklappen,
   hoch = wieder zuklappen. */
.svc-more .btn-ico svg { transition: transform 0.25s var(--ease); transform: rotate(90deg); }
.svc-more .btn[aria-expanded="true"] .btn-ico svg { transform: rotate(-90deg); }

/* ---------- Ebene 1: Balken, der die ganze Liste auf-/zuklappt ---------- */
.svc-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 22px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: 1px solid #dfe5ea;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.svc-toggle:hover { background: var(--blue-050); border-color: var(--blue-100); }
.svc-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.svc-toggle-txt { flex: 1 1 auto; }
.svc-toggle-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--blue-050);
  color: var(--blue);
}
.svc-toggle-chev {
  display: grid;
  place-items: center;
  color: var(--blue);
  transition: transform 0.25s var(--ease);
  transform: rotate(90deg);
}
.svc-toggle[aria-expanded="true"] { background: var(--blue-050); border-color: var(--blue-100); }
.svc-toggle[aria-expanded="true"] .svc-toggle-chev { transform: rotate(-90deg); }

.svc-panel { padding-top: 26px; }
.svc-panel[hidden] { display: none; }

/* Schalterzeile unten: „mehr/weniger" und „Liste schließen" */
.svc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.svc-close {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.svc-close:hover { color: var(--blue); }

/* ============================================================
   v7.4 – MEHR LUFT ZWISCHEN TEXT UND SCHALTFLÄCHEN
   ============================================================
   Rückmeldung des Kunden: „Abstand zwischen dem Text und
   Knöpfen ist zu gering." Betrifft alle Stellen, an denen ein
   Absatz oder eine Liste direkt an einem Knopf klebt.
   ============================================================ */
.hero .lead { margin-bottom: clamp(26px, 3vw, 34px); }
.hero-checks { margin-bottom: clamp(32px, 4vw, 42px); }
.hero-cta { margin-top: clamp(8px, 1.4vw, 16px); row-gap: 16px; }

/* Unterseiten-Kopf: Lead → Knöpfe → Vertrauenszeile */
.page-hero .lead { margin-bottom: clamp(26px, 3.2vw, 36px); }
.page-hero .hero-cta { margin-top: 0; }
.hero-trust { margin-top: clamp(24px, 3vw, 32px); }
.hero-facts { margin-top: clamp(26px, 3.2vw, 34px); }

/* Zielgruppen-Kacheln: Liste → „Mehr erfahren" */
.aud-list { margin-bottom: clamp(20px, 2.6vw, 28px); }

/* Leistungskarten: Beschreibung → „Mehr erfahren" */
.svc-card-body { gap: 9px; }
.svc-card-cta { margin-top: 10px; }

/* Fließtext: ein Knopf direkt hinter einem Absatz */
.prose .btn { margin-top: 14px; }
.prose p + p .btn,
.prose p > .btn { margin-top: 0; }


/* ---------- Vollständiges Leistungsverzeichnis (aufklappbar) ---------- */
.svc-dir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px 34px;
}
.svc-dir-col h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.svc-dir-col h4 .ico { display: grid; place-items: center; color: var(--blue); }
.svc-dir-col h4 .n {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--blue-050);
  color: var(--blue);
}
.svc-dir-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.svc-dir-col a {
  display: block;
  padding: 6px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.svc-dir-col a:hover { color: var(--blue); border-bottom-color: var(--blue-100); }

/* Der Karten-Kopf trägt jetzt nur noch Kicker und Überschrift */
.svc-all-head { margin-bottom: 22px; }
.svc-toggle { margin-top: 28px; }

/* Abschnitt der beiden Kacheln: weiß, Innenabstand wie in der Referenz
   (28 px oben, 10 px unten, 24 px seitlich, Inhaltsbreite 1200 px). */
#zielgruppen { background: #fff; padding-top: 28px; padding-bottom: 10px; }
#zielgruppen > .wrap { max-width: 1248px; }

/* ---------- Fließender Abschnitt neben einem umflossenen Bild ----------
   Normalerweise setzt `.prose h3 { clear: both }` jede Zwischen-
   überschrift unter das Bild. In diesem Block ist genau das nicht
   gewollt: Die Gliederung soll links neben dem Bild beginnen und
   unter ihm einfach weiterlaufen. */
.ipm-flow h2,
.ipm-flow h3 { clear: none; }
.ipm-flow > :first-child { margin-top: 0; }

/* ============================================================
   ZERTIFIZIERUNGEN – KLAPPFELD AUF „ÜBER MICH“
   ============================================================ */
.ipm-certs {
  margin: 26px 0 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  clear: both;
}
.ipm-certs[open] { border-color: var(--blue-100); box-shadow: var(--shadow-sm); }
.ipm-certs > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.ipm-certs > summary::-webkit-details-marker { display: none; }
.ipm-certs > summary::after {
  content: "";
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 2.4px solid var(--blue);
  border-bottom: 2.4px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.ipm-certs[open] > summary::after { transform: rotate(-135deg); }
.ipm-certs > summary:hover { background: var(--blue-050); }
.ipm-certs-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--blue-050);
  color: var(--blue);
}
.ipm-certs-body { padding: 4px 22px 22px; border-top: 1px solid var(--line); }
.ipm-certs-lead { margin: 16px 0 18px; font-size: 15px; color: var(--muted); }
.ipm-certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.ipm-cert {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fbfcfe;
}
.ipm-cert img { display: block; width: 100%; height: auto; border-radius: 0; }
.ipm-cert figcaption { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.ipm-cert-short {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  margin-bottom: 3px;
}
.ipm-cert figcaption b { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.ipm-cert figcaption small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.ipm-cert figcaption em { font-size: 12.5px; font-style: normal; color: var(--blue); }

/* ============================================================
   FERNWARTUNG – Knöpfe zu TeamViewer und AnyDesk
   ============================================================
   Übernommen von itprofmaster.de/fernwartungsservice-berlin/. Die
   Herstellerfarbe steckt in --rc und färbt nur Symbol und Rahmen –
   die Fläche bleibt weiß, damit die Knöpfe nicht wie Werbung wirken.
   ============================================================ */
.ipm-remote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
  margin: 26px 0 30px;
  clear: both;
}
.ipm-remote-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.22s, transform 0.22s var(--ease);
}
.ipm-remote-btn:hover {
  border-color: var(--rc, var(--blue));
  box-shadow: 0 14px 30px -18px rgba(9, 37, 69, 0.45);
  transform: translateY(-2px);
  color: var(--ink);
}
.rb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rc, #0352d0) 12%, #fff);
  color: var(--rc, var(--blue));
}
.rb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rb-txt b { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.rb-txt small { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.rb-go { margin-left: auto; color: var(--rc, var(--blue)); display: flex; }
.ipm-remote-btn:hover .rb-go { transform: translateX(3px); }

/* ============================================================
   ÜBER UNS – Aufbau nach der Referenzvorlage
   ============================================================ */
.au-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(26px, 3.6vw, 44px));
  padding-bottom: 0;
  background: linear-gradient(180deg, #eef4fe 0%, #f6f9fd 62%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.au-hero .breadcrumbs { margin-bottom: 10px; }
.au-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: end;
  min-height: 300px;
}
.au-hero-copy { padding-bottom: clamp(30px, 4vw, 54px); }
.au-hero-copy h1 { font-size: clamp(34px, 4.2vw, 52px); margin: 0 0 10px; }
.au-sub {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 14px;
}
.au-claim { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.au-lead { font-size: 16px; color: var(--muted); max-width: 60ch; margin: 0; }

.au-hero-photo { margin: 0; align-self: end; position: relative; overflow: hidden; }
.au-hero-photo img {
  display: block;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}

/* Kennzahlkarten – sitzen wie in der Referenz auf der Kante des Kopfes */
.au-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  transform: translateY(38px);
}
.au-stats li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.au-stats .ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--blue-050);
  color: var(--blue);
}
.au-stats .ico--txt { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.au-stats b { display: block; font-size: 19px; line-height: 1.2; color: var(--ink); }
.au-stats small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

.au-story { padding-top: calc(clamp(64px, 7vw, 96px) + 38px); }
.au-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.au-story-txt h2 { font-size: clamp(25px, 2.9vw, 34px); margin: 8px 0 18px; }
.au-story-txt p { color: var(--muted); font-size: 16px; margin: 0 0 16px; }
.au-story-txt p:last-child { margin-bottom: 0; }

/* Porträt + dunkles Kurzprofil, wie in der Referenz nebeneinander */
.au-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy);
}
.au-card-photo { margin: 0; background: var(--bg-alt); }
.au-card-photo img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center top; }
.au-card-panel {
  padding: clamp(20px, 2.4vw, 30px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.au-card-panel b { font-size: clamp(19px, 2vw, 23px); color: #fff; line-height: 1.24; }
.au-card-panel small { font-size: 12.5px; color: rgba(255, 255, 255, 0.75); margin-bottom: 14px; white-space: nowrap; }
.au-card-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.au-card-panel li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255, 255, 255, 0.92); }
.au-card-panel .check-ico { background: rgba(255, 255, 255, 0.2); width: 17px; height: 17px; }

.au-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.au-why-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
}
.au-why-card .ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--blue-050);
  color: var(--blue);
  margin-bottom: 14px;
}
.au-why-card b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 7px; }
.au-why-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

.au-cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.au-cert {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.au-cert img { display: block; width: 100%; height: auto; }
.au-cert figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.au-cert figcaption b { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.au-cert figcaption small { font-size: 13px; color: var(--muted); line-height: 1.45; }

.au-profile { max-width: 74ch; margin: 0 auto clamp(28px, 3.4vw, 42px); }
.au-profile p { font-size: 16px; color: var(--muted); margin: 0 0 14px; }
/* ---------- Fachliche Schwerpunkte: Merkmalsliste statt Kartenraster ----------

   Neun Themen mit einem bis fünf Einträgen ergaben im Dreierraster
   unterschiedlich hohe Karten und viel Leerraum in den kurzen. Jetzt eine
   Liste: links das Gebiet, rechts die Techniken als einzelne Marken. Die
   Zeilenhöhe darf schwanken, ohne dass daneben ein Loch entsteht.
   ------------------------------------------------------------------------- */
.au-skills-list {
  max-width: 940px;
  margin: 0 auto;
  padding: 4px clamp(4px, 1.6vw, 20px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.au-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  /* start statt baseline: das Gebiet steht in einer Flexbox mit 32-px-Symbol,
     deren Grundlinie nicht die der Marken daneben ist. */
  align-items: start;
  gap: 10px clamp(16px, 2.4vw, 32px);
  padding: 15px 4px;
  border-top: 1px solid var(--line-soft, #eef2f6);
}
.au-skill-row:first-child { border-top: 0; }
.au-skill-key {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.au-skill-key .ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--blue-050);
  color: var(--blue);
}
.au-skill-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  /* rückt die erste Markenzeile auf die Mitte des Symbols nebenan */
  padding-top: 3px;
}
.au-chip {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfcfe;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
}

.au-contact-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.au-contact-box h2 { font-size: clamp(21px, 2.3vw, 27px); margin: 0 0 8px; }
.au-contact-box p { margin: 0; color: var(--muted); font-size: 15.5px; }
.au-contact-cta { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1024px) {
  .au-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-story-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .au-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .au-hero-photo { display: none; }
  .au-stats { grid-template-columns: minmax(0, 1fr); transform: translateY(28px); }
  .au-why-grid, .au-cert-grid { grid-template-columns: minmax(0, 1fr); }
  /* Schmal: Gebiet über die volle Breite, die Marken darunter. */
  .au-skill-row { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .au-chip { white-space: normal; }
  .au-card { grid-template-columns: minmax(0, 1fr); }
  .au-contact-box { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   v10 – RÜCKMELDUNG DES KUNDEN VOM 18.08.
   ============================================================
   1. Zielgruppen-Kacheln: Foto zurück in den VORDERGRUND
   2. Schrift in den Kacheln und auf den Leistungskacheln größer
   3. Bildbänder: flacherer Beschnitt (keine halben Gesichter mehr)
   4. Kennzahlenzeile im Kopf: gleich breite Spalten
   ============================================================ */

/* ---------- 1 + 2: Zielgruppen-Kacheln ----------
   Vorher lag das Foto als Flächenbild (position:absolute) HINTER der
   ganzen Kachel und ein fast deckender weißer Schleier (0,99) machte es
   auf der Textseite unsichtbar. Genau das hat der Kunde bemängelt:
   „die Kacheln sind wieder im Hintergrund … wieder weiß hinter der
   Schrift". Die Referenz aufbau.ifp-plugin.de löst es anders: Text links
   auf ruhigem Grund, Foto rechts als eigene, scharfe Bildhälfte.
   Deshalb hier zwei echte Spalten statt Bild + Schleier. */
.aud-card {
  display: grid;
  /* Textspalte klar breiter: bei 0.88fr lief die Überschrift in das Foto. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
  /* 430 px zwangen das Foto in ein hohes Hochformat – vom Paarmotiv blieb
     nur eine Person übrig. Flacher heißt näher am Seitenverhältnis der
     Datei, also ein deutlich ruhigerer Ausschnitt. */
  min-height: 360px;
  background: #fff;
}
.aud-body {
  order: 0;
  min-width: 0;
  width: auto;
  padding: 28px 24px;
  justify-content: center;
}
/* Ohne min-width:0 darf die Überschrift im Raster über ihre Spalte
   hinauswachsen – genau das ist passiert. */
.aud-head { min-width: 0; }
.aud-head h2, .aud-text h2 { min-width: 0; overflow-wrap: normal; hyphens: none; }
/* Die zusätzlichen 14 px Innenabstand stammen aus dem alten Flächenbild-
   Aufbau. Zusammen mit dem Kachelrand blieb für die Überschrift zu wenig
   Platz – sie brach mitten im Wort um. */
.aud-head { padding: 0 0 2px; gap: 12px; }
.aud-text { padding: 0; }
/* Das Foto ist ab hier ein normales Rasterfeld – kein Hintergrund mehr. */
.aud-media {
  position: relative;
  inset: auto;
  order: 1;
  z-index: 1;
  width: auto;
  height: 100%;
  overflow: hidden;
}
.aud-media img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Kein Schleier mehr über dem Foto. Die schmale weiße Kante, die hier
   zuletzt noch lag, deckte genau die linke Bildhälfte ab – auf der Kachel
   „Für Privatkunden" verschwand dadurch die zweite Person. In der Referenz
   grenzt das Foto ebenfalls hart an die Textfläche. */
.aud-media::after { content: none; }

/* Schriftgrößen der Kacheln – „die Schrift muss komplett größer" */
.aud-head h2, .aud-text h2 { font-size: 29px; }
.aud-text > p { font-size: 17.5px; line-height: 1.58; max-width: 32ch; }
.aud-list { max-width: 34ch; }
.aud-list li { font-size: 17.5px; line-height: 1.45; margin-bottom: 12px; padding-left: 27px; }
.aud-list li::before { font-size: 13px; line-height: 2.1; }
.aud-card .link-more { font-size: 17px; }

@media (max-width: 1024px) {
  .aud-card { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); min-height: 340px; }
  .aud-head h2, .aud-text h2 { font-size: 26px; }
  .aud-text > p, .aud-list li { font-size: 16px; }
  .aud-card .link-more { font-size: 15.5px; }
}
@media (max-width: 767px) {
  /* Schmal: Foto oben, Text darunter – nebeneinander bleibt hier nichts lesbar. */
  .aud-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* 215 px zeigten bei einer 1:2-Datei nur rund ein Zehntel der Bildhöhe –
     dabei blieb vom Gesicht nichts übrig. 300 px sind flach genug für die
     Kachel und hoch genug, dass die Personen ganz im Bild stehen. */
  .aud-media { order: -1; height: 300px; }
  /* Die Kacheldateien sind hochkant (1:2). Im querformatigen Streifen oben
     muss der Ausschnitt je Motiv anders sitzen: Beim Unternehmer steht der
     Kopf weit oben, beim Paar deutlich tiefer. */
  .aud-card--blue  .aud-media img { object-position: center 30%; }
  .aud-card--green .aud-media img { object-position: center 42%; }
  .aud-media::after { content: none; }
  .aud-body { padding: 20px 18px 24px; }
  .aud-head h2, .aud-text h2 { font-size: 22px; }
  .aud-text > p, .aud-list li { font-size: 15.5px; }
  .aud-list li { margin-bottom: 10px; }
  .aud-card .link-more { font-size: 15px; }
}

/* ---------- 2b: Leistungskacheln („Unsere Leistungen") ---------- */
.tile { min-height: 150px; gap: 12px; }
.tile-label { font-size: 15px; line-height: 1.3; }
@media (max-width: 1024px) { .tile-label { font-size: 14px; } }
@media (max-width: 767px)  { .tile-label { font-size: 15px; } }

/* ---------- 3: Bildbänder flacher beschneiden ----------
   Bei 380 px Höhe über die volle Fensterbreite entstand ein Ausschnitt von
   fast 4:1 – aus jedem Motiv blieb ein Streifen übrig, bei Personen genau
   auf Augenhöhe. Daher stammen die „halben Gesichter". Die Bandbilder
   liegen jetzt als 3:1-Dateien vor; diese Höhe trifft das fast genau. */
.ipm-fig--band img { height: clamp(250px, 32vw, 470px); }
.page-band img { height: clamp(250px, 32vw, 470px); object-fit: cover; }

/* ---------- 4: Kennzahlen im Kopf gleich breit ----------
   `flex: 1 1 150px` verteilte den Rest nach Textlänge – „1 Ansprechpartner
   von Anfang bis Abnahme" wurde dadurch deutlich breiter als die Nachbarn
   und die Zeile stand schief. Feste Spalten lösen das. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
}
.hero-facts li { flex: none; padding: 16px 20px; }
.hero-facts li + li { border-left: 1px solid var(--tone-soft, var(--line)); }
@media (max-width: 620px) {
  .hero-facts { grid-template-columns: minmax(0, 1fr); }
  .hero-facts li + li { border-left: 0; border-top: 1px solid var(--tone-soft, var(--line)); }
}

/* ============================================================
   „Über uns" – Kopf nach der Referenzvorlage
   ============================================================
   Referenz: randloses Bürofoto, die Person rechts darin, links ein heller
   Schleier für den Text, darunter die Kennzahlkarten halb auf der Bildkante.
   Vorher lag hier nur ein Farbverlauf und das Porträt stand als Freisteller
   im Raster – und ein zweites Mal im Abschnitt darunter. */
.au-hero--photo {
  background: #eef2f7;
  overflow: hidden;
}
.au-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.au-hero-room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Die Person sitzt rechts und steht auf der Unterkante auf. */
.au-hero-person {
  position: absolute;
  right: max(calc((100vw - var(--wrap)) / 2), var(--wrap-pad));
  bottom: 0;
  width: auto;
  height: 88%;
  max-height: 430px;
  object-fit: contain;
  object-position: bottom;
}
/* Heller Schleier über der Textseite – wie in der Referenz nach rechts offen. */
.au-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(244, 247, 251, 0.97) 0%,
    rgba(244, 247, 251, 0.93) 34%,
    rgba(244, 247, 251, 0.62) 52%,
    rgba(244, 247, 251, 0.12) 68%,
    rgba(244, 247, 251, 0) 80%);
}
.au-hero--photo > .wrap { position: relative; z-index: 2; }
/* Ohne zweite Rasterspalte darf die Textspalte die volle Breite nutzen. */
.au-hero--photo .au-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 340px; }
.au-hero--photo .au-hero-copy { max-width: 58%; }
.au-hero--photo .au-lead { max-width: 46ch; }

/* Kurzprofil ohne Porträt: der dunkle Kasten steht jetzt allein. */
.au-card--solo { grid-template-columns: minmax(0, 1fr); }
.au-card--solo .au-card-panel { padding: clamp(26px, 3vw, 38px); }
.au-card--solo .au-card-panel ul { gap: 11px; }
.au-card--solo .au-card-panel li { font-size: 15px; }
.au-card--solo .au-card-panel b { font-size: clamp(22px, 2.3vw, 27px); }
.au-card--solo .au-card-panel small { font-size: 13.5px; }

@media (max-width: 1024px) {
  .au-hero--photo .au-hero-copy { max-width: 70%; }
  .au-hero-person { max-height: 340px; }
}
@media (max-width: 767px) {
  .au-hero--photo .au-hero-copy { max-width: 100%; }
  .au-hero-person { display: none; }
  .au-hero--photo::before {
    background: linear-gradient(90deg, rgba(244, 247, 251, 0.96) 0%, rgba(244, 247, 251, 0.9) 100%);
  }
}

/* =====================================================================
   Über uns – Blöcke nach aufbau.ifp-plugin.de/ueber-uns/  (v21)
   ===================================================================== */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- „Warum ITPROFMASTER?" an der Stelle des zweiten Porträts ----
   In der Referenz steht rechts neben dem Fließtext ein Foto. Das ist hier
   gestrichen; stattdessen sitzt dort dieser Block – als heller Kasten mit
   den vier Punkten im 2×2-Raster, damit er die Höhe des Textes ausfüllt. */
.au-why-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(20px, 2.4vw, 30px);
}
.au-why-panel > h2 {
  font-size: clamp(19px, 2vw, 23px);
  margin: 0 0 clamp(16px, 1.8vw, 22px);
}
.au-why-panel .au-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.au-why-panel .au-why-card {
  padding: clamp(14px, 1.6vw, 18px);
  background: var(--bg-alt);
  border-color: transparent;
  box-shadow: none;
}
.au-why-panel .au-why-card b { font-size: 15.5px; margin-bottom: 5px; }
.au-why-panel .au-why-card p { font-size: 13px; line-height: 1.5; }
.au-why-panel .au-why-card .ico { width: 38px; height: 38px; margin-bottom: 11px; }

/* ---------- Zertifikate: anklickbar („Zum Vergrößern … klicken") ---------- */
.au-cert-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.au-cert-zoom img { transition: transform 0.4s var(--ease); }
.au-cert-zoom:hover img,
.au-cert-zoom:focus-visible img { transform: scale(1.028); }
.au-cert { overflow: hidden; }
.au-cert-mag {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(9, 37, 69, 0.78);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.au-cert-zoom:hover .au-cert-mag,
.au-cert-zoom:focus-visible .au-cert-mag { opacity: 1; transform: none; }

/* Vollbild-Ansicht einer Urkunde */
.ipm-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(9, 37, 69, 0.86);
  backdrop-filter: blur(3px);
}
.ipm-lb.is-open { display: grid; }
.ipm-lb-inner { max-width: min(1100px, 100%); text-align: center; }
.ipm-lb img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}
.ipm-lb-cap { color: #fff; font-size: 14.5px; margin-top: 14px; }
.ipm-lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}
.ipm-lb-close:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 1080px) {
  .au-why-panel { padding: clamp(18px, 3vw, 24px); }
}

@media (max-width: 640px) {
  .au-why-panel .au-why-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Zielgruppen-Kacheln – Bauweise wie aufbau.ifp-plugin.de  (v21)

   Nachgemessen an den Elementor-Containern 61b5924e (Firmenkunden) und
   174ffb57 (Privatkunden):

     Kachel   min-height 290px · Rahmen 1px #DFE5EA · Radius 10px ·
              Innenabstand 28px
     Foto     background-image · background-size: cover ·
              background-position: center right · KEIN Overlay im CSS
     Text     liegt darüber, Breite 62,81 %
     Akzent   Firmenkunden #0352D0 · Privatkunden #08785C

   Worauf es ankommt: Bei der Referenz gehört das Foto zur Kachel und
   liegt nicht dahinter. Der helle Verlauf auf der linken Bildhälfte ist
   bereits IM Motiv eingebrannt, und die Kachelfüllung hat genau den Ton
   dieser Bildkante – Fläche und Foto gehen deshalb nahtlos ineinander
   über, das Motiv steht ungetrübt und vollflächig im Vordergrund. Kein
   deckender Schleier mehr über der Textseite.

   Die beiden Motive der Referenz liegen jetzt 1:1 als card-firmen.webp /
   card-privat.webp im Theme (1600 × 900, Verlauf eingebrannt).

   Zusätzlich blendet eine Maske die linke Bildkante in die Kachelfüllung
   über. Sie ist keine Abdeckung, sondern die Naht: unsere Kachel ist
   höher als die 290px der Referenz (sechs statt fünf Listenpunkte und
   größere Schrift, wie vom Kunden gefordert), dadurch beschneidet
   „cover" das 16:9-Motiv seitlich stärker. Ohne die Maske stünde je nach
   Fensterbreite eine harte Bildkante im Text.

   Die vorherige Fassung („zwei echte Spalten, Text links, Foto rechts")
   ist damit hinfällig und wird hier vollständig überschrieben.
   ===================================================================== */

.aud-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.aud-card {
  --aud-accent: #0352d0;
  /* Ton der linken Bildkante – Kachelfüllung und Foto sind derselbe Ton. */
  --aud-fill: #fbfcfd;
  --aud-text-w: 58%;

  position: relative;
  display: block;
  min-height: 340px;
  padding: 28px;
  border: 1px solid #dfe5ea;
  border-radius: 10px;
  background: var(--aud-fill);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s var(--ease);
}
.aud-card--blue  { --aud-accent: #0352d0; --aud-fill: #fbfcfd; }
.aud-card--green { --aud-accent: #08785c; --aud-fill: #fbfcfb; }
.aud-card:hover {
  transform: none;
  border-color: #c3d3e4;
  box-shadow: 0 10px 30px -18px rgba(9, 37, 69, 0.4);
}
.aud-card::after { content: none; }

/* Das Foto füllt die ganze Kachel und sitzt rechts – wie das
   background-image der Referenz. Es bleibt ein echtes <img>, damit der
   Browser es verzögert laden kann und es im Quelltext auffindbar ist. */
.aud-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  order: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.aud-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: none;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 18%, rgba(0, 0, 0, 0.9) 34%, #000 46%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 18%, rgba(0, 0, 0, 0.9) 34%, #000 46%);
}
/* Kein Schleier über dem Motiv – der helle Verlauf steckt im Bild. */
.aud-media::after { content: none; }

/* Text liegt vor dem Bild */
.aud-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  order: 0;
  width: 100%;
  padding: 0;
}
.aud-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 0;
  margin-bottom: 12px;
}
.aud-ico {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 0;
  background: none;
  color: var(--aud-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aud-ico svg { width: 46px; height: 46px; stroke-width: 1.5; }

.aud-text { padding: 0; }
.aud-head h2,
.aud-text h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--aud-accent);
  margin: 0;
}
.aud-text > p {
  width: 100%;
  max-width: var(--aud-text-w);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: #6a798b;
  margin: 0 0 16px;
}
.aud-list { max-width: var(--aud-text-w); margin: 0 0 18px; }
.aud-list li {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #1b2a3a;
  padding-left: 23px;
  margin-bottom: 8px;
}
.aud-list li::before { color: var(--aud-accent); font-size: 12px; line-height: 1.9; }
.aud-card .link-more,
.aud-card:hover .link-more {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--aud-accent);
  background: none;
  border: 0;
  padding: 0;
}
.aud-card:hover .link-more svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  /* Einspaltig: die Kachel wird sehr breit, das Motiv darf mehr Platz
     bekommen, der Text bleibt auf der hellen Hälfte. */
  .aud-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .aud-card { min-height: 300px; padding: 24px; --aud-text-w: 52%; }
  .aud-ico { width: 46px; height: 46px; }
  .aud-ico svg { width: 38px; height: 38px; }
  .aud-head h2, .aud-text h2 { font-size: 23px; }
}
@media (max-width: 767px) {
  /* Referenz verschiebt hier nur den Bildausschnitt nach rechts, damit
     die Personen nicht unter den Text rutschen – kein Schleier. */
  .aud-card { min-height: 260px; padding: 18px; --aud-text-w: 66%; }
  .aud-media img { object-position: 74% center; }
  .aud-ico { width: 34px; height: 34px; }
  .aud-ico svg { width: 28px; height: 28px; }
  .aud-head h2, .aud-text h2 { font-size: 19px; line-height: 1.18; }
  .aud-text > p { font-size: 13.5px; line-height: 1.45; }
  .aud-list li { font-size: 13.5px; line-height: 1.4; margin-bottom: 6px; padding-left: 19px; }
  .aud-card .link-more { font-size: 13.5px; }
}
@media (max-width: 600px) {
  .aud-card { --aud-text-w: 78%; }
  .aud-media img {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 28%, rgba(0, 0, 0, 0.9) 52%, #000 66%);
    mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 28%, rgba(0, 0, 0, 0.9) 52%, #000 66%);
  }
}

/* =====================================================================
   Zielgruppen-Kacheln – zurück auf die eigenen Motive  (v22)

   Der Aufbau von v21 bleibt: EIN Feld, Foto ohne deckenden Schleier,
   linke Bildkante blendet in die Kachelfüllung über, Text darüber.
   Nur die Motive sind wieder die eigenen (card-firmen / card-privat).

   Ein Unterschied zu den Referenzdateien muss dabei ausgeglichen werden:
   Die Referenzmotive sind Querformat 1600 × 900 mit eingebranntem
   Weißverlauf, unsere sind Hochformat 640 × 1280 ohne Verlauf. Läge so
   ein Hochformat vollflächig hinter der Kachel, zeigte „cover" nur noch
   rund ein Drittel der Bildhöhe – ein Querstreifen quer durchs Gesicht,
   und die Person stünde außerdem mitten im Text.

   Deshalb hat das Foto hier ein eigenes Feld auf der rechten Seite,
   dessen Breite ungefähr zum Seitenverhältnis der Datei passt. Optisch
   bleibt es dieselbe Kachel wie in v21: keine Kante, keine zweite
   Spalte – das Bild löst sich nach links in die Kachelfüllung auf, und
   die Füllung trägt genau den Ton der jeweiligen Bildkante
   (Firmenkunden kühlgrau, Privatkunden warmbeige).
   ===================================================================== */

.aud-card {
  --aud-photo-w: 48%;
  --aud-text-w: 60%;
}
/* Grundton je Motiv – gemessen in der oberen linken Bildecke und
   aufgehellt, damit der Fließtext darauf lesbar bleibt. */
.aud-card--blue  { --aud-accent: #0352d0; --aud-fill: #eef1f4; }
.aud-card--green { --aud-accent: #08785c; --aud-fill: #f3f1ee; }

.aud-media {
  inset: 0 0 0 auto;
  width: var(--aud-photo-w);
}
.aud-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ausschnitt je Motiv: beim Unternehmer sitzt der Kopf weit oben,
     beim Paar liegen beide Gesichter in der Bildmitte. */
  object-position: center 8%;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0.95) 32%, #000 44%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 16%, rgba(0, 0, 0, 0.95) 32%, #000 44%);
}
.aud-card--green .aud-media img { object-position: center 55%; }

@media (max-width: 1024px) {
  /* Einspaltig ist die Kachel sehr breit; ein Hochformat braucht dann ein
     schmaleres Feld, sonst bleibt wieder nur ein flacher Streifen übrig. */
  .aud-card { min-height: 360px; --aud-photo-w: 32%; --aud-text-w: 62%; }
}
@media (max-width: 767px) {
  .aud-card { min-height: 280px; --aud-photo-w: 46%; --aud-text-w: 58%; }
  .aud-media img { object-position: center 8%; }
  .aud-card--green .aud-media img { object-position: center 55%; }
}
@media (max-width: 600px) {
  .aud-card { --aud-photo-w: 42%; --aud-text-w: 62%; }
  .aud-media img {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 18%, rgba(0, 0, 0, 0.95) 36%, #000 48%);
    mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 18%, rgba(0, 0, 0, 0.95) 36%, #000 48%);
  }
}

/* =====================================================================
   Über uns – Kopf nach aufbau.ifp-plugin.de/ueber-uns/  (v23)

   Nachgemessen an der Elementor-Vorlage 2354:

     7200169a  Bildband  background-image, cover, center 34%
               ::before  linear-gradient(90deg,
                           rgba(255,255,255,.97)   0%,
                           rgba(255,255,255,.92)  42%,
                           rgba(255,255,255,.62)  64%,
                           rgba(255,255,255,.10) 100%)
     5083a2bf  Inhalt    max 1200px, mittig, min-height 382px, 46px/24px
     35d37b68  Textspalte 50%, max 610px
               H1 46/700/1.16 #081A55 · H2 25/700 #0352D0 ·
               H3 16/700 #092545 · Text 15/400/1.6 #223A59
     4ccd76fd  Kennzahlband, weiß, eigener Abschnitt unter dem Bild
     3931d983  max 1200px, margin-top -42px, padding-bottom 38px,
               space-between, gap 14px
     3d2350c0  Kachel 23%, min-height 116px, 1px #DCE4EE, Radius 14px,
               Schatten 0 8px 24px rgba(14,34,74,.04), 14px/16px
     6479546e  Symbolkreis 54px, #EEF4FF, Glyphe 24px/700 #0352D0
     7ab8757c  Titel 23/700/1.16 #092545 (nicht umbrechend)
     35b35f17  Zeile  12/500/1.35 #536477

   Ab 1024px kippt die Referenz das Band ins Dunkle: Bildausschnitt
   72% 36%, navyblauer Schleier, Schrift weiß – ab 767px noch dunkler
   und Bildausschnitt 66% 40%. Genau das steht unten.

   Die Kopfleiste des Themes liegt fix über der Seite, deshalb kommt
   überall var(--header-h) auf die Höhen und den oberen Abstand.
   ===================================================================== */

.au-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--header-h) + 46px) 0 46px;
  min-height: calc(382px + var(--header-h));
  background: #eef2f7;
  border-bottom: 0;
}
.au-hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 34%;
  pointer-events: none;
}
.au-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.92) 42%,
    rgba(255, 255, 255, 0.62) 64%,
    rgba(255, 255, 255, 0.10) 100%);
}
.au-hero > .wrap { position: relative; z-index: 2; width: 100%; }

.au-hero-copy {
  width: 50%;
  max-width: 610px;
  padding-bottom: 0;
}
.au-hero .breadcrumbs {
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 14px;
}
.au-hero-copy h1 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #081a55;
  margin: 0 0 10px;
}
.au-sub {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.16;
  color: #0352d0;
  margin: 0 0 10px;
}
.au-claim {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.16;
  color: #092545;
  margin: 0 0 12px;
}
.au-lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #223a59;
  max-width: none;
  margin: 0;
}

/* ---------- Kennzahlband ---------- */
.au-statband {
  position: relative;
  z-index: 3;
  background: #fff;
}
.au-statband > .wrap { padding-top: 0; padding-bottom: 38px; }

.au-stats {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
  margin: -42px 0 0;
  padding: 0;
  transform: none;
}
.au-stats li {
  flex: 0 0 23%;
  width: 23%;
  max-width: 23%;
  min-width: 0;
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(14, 34, 74, 0.06);
  overflow: hidden;
}
.au-stats .ico {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef4ff;
  color: #0352d0;
}
.au-stats .ico svg { width: 24px; height: 24px; }
.au-stats .ico--txt { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; }
.au-stats .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.au-stats b {
  display: block;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.16;
  color: #092545;
  white-space: nowrap;
}
.au-stats small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #536477;
  margin-top: 0;
}

/* Der alte Aufbau schob die Kacheln per transform auf die Bildkante und
   fing das mit 38px Extra-Abstand am nächsten Abschnitt wieder ab. Das
   Band ist jetzt ein eigener Abschnitt – der Zuschlag entfällt. */
.au-story { padding-top: clamp(64px, 7vw, 96px); }

@media (max-width: 1024px) {
  /* Referenz kippt hier ins Dunkle: anderer Bildausschnitt, navyblauer
     Schleier, Schrift weiß. */
  .au-hero {
    padding: calc(var(--header-h) + 32px) 0 32px;
    min-height: calc(342px + var(--header-h));
    background: #0b2340;
  }
  .au-hero-img { object-position: 72% 36%; }
  .au-hero::before {
    background: linear-gradient(90deg,
      rgba(6, 27, 57, 0.91) 0%,
      rgba(6, 27, 57, 0.82) 48%,
      rgba(6, 27, 57, 0.42) 72%,
      rgba(6, 27, 57, 0.08) 100%);
  }
  .au-hero-copy { width: 58%; max-width: 540px; }
  .au-hero-copy h1 { font-size: 40px; color: #fff; text-shadow: 0 2px 12px rgba(3, 17, 39, 0.24); }
  .au-sub { font-size: 23px; color: #86c7ff; text-shadow: 0 2px 10px rgba(3, 17, 39, 0.2); }
  .au-claim { color: #fff; }
  .au-lead { font-size: 14px; color: rgba(255, 255, 255, 0.92); }
  .au-hero .breadcrumbs,
  .au-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.82); }
  .au-hero .breadcrumbs a:hover { color: #fff; }
  .au-hero .breadcrumbs [aria-current] { color: #fff; }
  .au-hero .breadcrumbs .sep { color: rgba(255, 255, 255, 0.56); opacity: 1; }

  .au-statband > .wrap { padding-bottom: 32px; }
  .au-stats { gap: 12px; margin-top: -32px; }
  .au-stats li { flex: 0 0 47%; width: 47%; max-width: 47%; }
  .au-stats .ico { flex-basis: 42px; width: 42px; height: 42px; background: #eaf2ff; }
  .au-stats .ico svg { width: 20px; height: 20px; }
}

@media (max-width: 767px) {
  .au-hero {
    padding: calc(var(--header-h) + 20px) 0 22px;
    min-height: calc(360px + var(--header-h));
  }
  .au-hero-img { object-position: 66% 40%; }
  .au-hero::before {
    background: linear-gradient(90deg,
      rgba(6, 27, 57, 0.95) 0%,
      rgba(6, 27, 57, 0.88) 58%,
      rgba(6, 27, 57, 0.48) 80%,
      rgba(6, 27, 57, 0.08) 100%);
  }
  .au-hero-copy { width: 78%; max-width: 300px; }
  .au-hero-copy h1 { font-size: 32px; }
  .au-sub { font-size: 20px; }
  .au-lead { font-size: 14px; }

  .au-statband > .wrap { padding-bottom: 22px; }
  .au-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    margin-top: -16px;
  }
  .au-stats li {
    flex: none;
    width: 100%;
    max-width: none;
    min-height: 92px;
    padding: 9px 8px;
    gap: 6px;
  }
  .au-stats .ico { flex-basis: 32px; width: 32px; height: 32px; }
  .au-stats .ico svg { width: 17px; height: 17px; }
  .au-stats .ico--txt { font-size: 12px; }
  .au-stats b { font-size: 15px; line-height: 1.15; white-space: normal; }
  .au-stats small { font-size: 9px; line-height: 1.2; }
}

/* =====================================================================
   Über uns – Kopf: stabiler Bildausschnitt  (v24)

   Fehler in v23: Ankerpunkt `center 34%` wörtlich von der Referenz
   übernommen, ohne zu prüfen, was er bei UNSERER Bandhöhe tut.

   Das Motiv ist 2048 × 750 (2,73:1), das Band aber nur rund 468px hoch.
   `cover` skaliert deshalb ab etwa 1280px Fensterbreite nach der Breite
   und beschneidet die Höhe – und zwar umso stärker, je breiter das
   Fenster ist. Die Oberkante des sichtbaren Ausschnitts liegt bei
   34 % Ankerpunkt:

       1280px →  0,1 %   Kopf vollständig
       1440px →  3,8 %   Krone angeschnitten
       1920px → 11,4 %   halber Kopf weg
       2560px → 17,0 %

   Die Krone sitzt im Motiv bei 2,7 % der Bildhöhe. Zwei Änderungen:

   1. Ankerpunkt auf 3 % – die Oberkante bleibt damit auf jeder Breite
      über der Krone (gerechnet bis 5120px), der Beschnitt passiert
      unten am Oberkörper statt oben am Kopf.
   2. Bandhöhe wächst mit der Fensterbreite mit (28vw, gedeckelt bei
      640px). Dadurch bleibt der sichtbare Bildanteil auf großen
      Monitoren nahezu konstant, statt von 100 % auf 50 % zu fallen –
      der Kopf springt beim Zoomen nicht mehr in der Größe.

   Unter 1024px greift beides nicht: dort ist das Band im Verhältnis so
   hoch, dass `cover` nach der Höhe skaliert und die Bildhöhe ohnehin
   vollständig steht. Nur der waagerechte Ausschnitt zählt – der bleibt
   wie in der Referenz rechts auf der Person.
   ===================================================================== */

.au-hero {
  min-height: clamp(calc(var(--header-h) + 382px), 28vw, 640px);
}
.au-hero-img { object-position: center 3%; }

@media (max-width: 1024px) {
  .au-hero { min-height: calc(var(--header-h) + 342px); }
  /* Waagerecht auf der Person, senkrecht ohne Wirkung (kein Beschnitt). */
  .au-hero-img { object-position: 72% 36%; }
}
@media (max-width: 767px) {
  .au-hero { min-height: calc(var(--header-h) + 360px); }
  /* 66 % der Referenz traf die rechte Kopfkante genau auf den Rand –
     72 % lässt den Kopf vollständig im Ausschnitt stehen. */
  .au-hero-img { object-position: 72% 34%; }
}

/* =====================================================================
   Kachel „Für Privatkunden" – neues Motiv  (v25)

   Neues Bild: Paar zu Hause am Laptop (hilfe-zuhause.webp, 1200 × 800).
   Anders als das alte Motiv ist es Querformat, das Bildfeld der Kachel
   aber hochkant – „cover" zeigt davon nur rund die halbe Bildbreite.
   Deshalb hier eigene Werte für Ausschnitt, Maske und Grundton:

     Ausschnitt  42 % waagerecht. Sichtbares Fenster damit x 0,21–0,71
                 des Motivs: beide Köpfe (Mann 0,32–0,47, Frau
                 0,49–0,63) stehen vollständig darin.
     Maske       deutlich kürzer als bei der blauen Kachel (17 % statt
                 44 %). Die lange Blende dort funktioniert, weil das
                 Hochformat links unscharfes Fenster zeigt. Hier läge
                 sie über dem Kopf des Mannes. 17 % deckt genau die
                 helle Wand links neben ihm ab – der Übergang in die
                 Kachelfüllung bleibt trotzdem nahtlos, weil die
                 Füllung den Ton dieser Wand hat.
     Grundton    #F5F4F2, gemessen an der Wand links im Motiv.
   ===================================================================== */

.aud-card--green { --aud-accent: #08785c; --aud-fill: #f5f4f2; }

.aud-card--green .aud-media img {
  object-position: 42% center;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 6%, rgba(0, 0, 0, 0.94) 12%, #000 17%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 6%, rgba(0, 0, 0, 0.94) 12%, #000 17%);
}

@media (max-width: 767px) {
  /* Schmales Bildfeld: hier ist nur noch 39 % der Bildbreite sichtbar,
     die Maske muss entsprechend früher enden, sonst greift sie in den
     Kopf des Mannes. */
  .aud-card--green .aud-media img {
    object-position: 42% center;
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 4%, rgba(0, 0, 0, 0.94) 8%, #000 12%);
    mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 4%, rgba(0, 0, 0, 0.94) 8%, #000 12%);
  }
}

/* =====================================================================
   Zielgruppen-Kacheln: der weiße Balken verschwindet  (v26)

   Problem: Die Kachelfüllung war EINE flache Farbe (#EEF1F4 bzw.
   #F3F1EE), in die das Foto nach links überblendet. Der linke Bildrand
   ist aber nicht überall gleich hell – oben das helle Fenster, unten
   der dunklere Schreibtisch. Gegen eine flache Fläche entsteht dadurch
   genau der senkrechte helle Streifen zwischen Text und Foto.

   Lösung: Der Untergrund der Kachel ist ab jetzt DASSELBE FOTO, stark
   weichgezeichnet und auf seinen linken Ausschnitt gesetzt. Das scharfe
   Foto rechts blendet also nicht mehr in eine Fremdfarbe über, sondern
   in seine eigenen, verwaschenen Farben – es kann per Konstruktion
   keine Kante und keinen Streifen mehr geben.

   Die Bild-URL kommt als --aud-img aus dem Template, damit derselbe
   Aufbau bei jedem Motivtausch weiter stimmt. --aud-fill bleibt als
   Rückfall, falls der Browser die Variable nicht kennt.
   ===================================================================== */

.aud-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--aud-fill);
  background-image: var(--aud-img);
  background-size: cover;
  /* Linker Bildausschnitt – dort, wo im Motiv die helle Fläche liegt. */
  background-position: left center;
  /* Über den Rand hinaus skaliert, damit die Weichzeichnung an den
     Kanten nicht ausfranst. */
  transform: scale(1.25);
  filter: blur(34px) saturate(0.72) brightness(1.16);
  pointer-events: none;
}
/* Ein Hauch Aufhellung darüber sichert den Textkontrast, ohne das Foto
   rechts anzufassen – sie endet vor dem Bildfeld. */
.aud-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.18) 62%,
    rgba(255, 255, 255, 0) 78%);
}
.aud-card--green::after {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.66) 0%,
    rgba(255, 255, 255, 0.54) 40%,
    rgba(255, 255, 255, 0.2) 62%,
    rgba(255, 255, 255, 0) 78%);
}

/* Das scharfe Foto liegt über dem Unschärfe-Untergrund. Weil beide aus
   derselben Datei stammen, darf die Blende jetzt wieder länger und
   weicher sein – sie fällt nicht mehr auf. */
.aud-media { z-index: 1; }
.aud-media img {
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 12%, rgba(0, 0, 0, 0.86) 26%, #000 38%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 12%, rgba(0, 0, 0, 0.86) 26%, #000 38%);
}
.aud-card--green .aud-media img {
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 18%, #000 26%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 18%, #000 26%);
}
.aud-body { z-index: 2; }

@media (max-width: 767px) {
  .aud-card::before { filter: blur(26px) saturate(0.72) brightness(1.16); }
  .aud-card--green .aud-media img {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.9) 11%, #000 16%);
    mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0.9) 11%, #000 16%);
  }
}

/* =====================================================================
   Leistungskacheln: Zuschnitt der drei neuen Motive  (v26)
   Das Bildfeld ist 16:10, die neuen Dateien haben andere Formate.
   ===================================================================== */

/* mann-reif und arbeitsplatz-mann sind Hochformat 1200 × 1800; bei 16:10
   bleiben davon rund 42 % der Bildhöhe stehen. Mittig läge der Schnitt
   auf Höhe der Schultern – etwas höher sitzt das Gesicht im Bild. */
.svc-card--pc-notdienst-berlin .svc-card-media img { object-position: center 34%; }
.svc-card--it-systemwartung-berlin .svc-card-media img { object-position: center 38%; }
/* viren-schutz ist 1920 × 920 und damit breiter als 16:10; mittig fiele
   der Schutzschild auf dem Bildschirm links heraus. */
.svc-card--virenbeseitigung-berlin-privat .svc-card-media img { object-position: 38% center; }

/* =====================================================================
   Über uns – Abschnitte unterhalb des Kopfes  (v27)

   Bisher trugen diese Abschnitte die Maße des Themes (Abschnittspolster
   clamp(54px,6.5vw,88px), abwechselnd weiß/grau, zentrierte Köpfe in
   Theme-Größen). Die Referenz ist deutlich kompakter und anders
   getaktet. Alles hier ist an der Elementor-Vorlage 2354 nachgemessen:

     Abschnitt      Grund     Polster oben/unten   Container
     Kennzahlband   #FFFFFF   -42 / 38             1200
     Story          #FFFFFF    42 / 42             1200
     Zertifikate    #F8FBFF    38 / 44             1200

   Überschriften durchweg #081A55, Inter 700:
 * Story 30px · Zertifikate 28px
   ===================================================================== */

.au-story,
.au-certs,
.au-skills,
.au-contact {
  padding: 0;
  background: #fff;
}
.au-story  > .wrap { padding-top: 42px; padding-bottom: 42px; }
.au-certs  > .wrap { padding-top: 38px; padding-bottom: 44px; }
.au-skills > .wrap { padding-top: 38px; padding-bottom: 44px; }
.au-contact > .wrap { padding-top: 34px; padding-bottom: 46px; }

/* Der helle Blauton der Referenz statt des Theme-Graus */
.au-skills { background: #f8fbff; }
.au-certs { background: #fff; }

/* Container 1200 statt 1240 – wie in der Vorlage */
.au-story > .wrap,
.au-certs > .wrap,
.au-skills > .wrap,
.au-contact > .wrap,
.au-statband > .wrap { max-width: 1200px; }

/* Abschnittsköpfe: kompakter und in den Referenzgrößen */
.au-certs .sec-head,
.au-skills .sec-head { margin-bottom: 20px; max-width: 760px; }
.au-certs .sec-head .h2,
.au-skills .sec-head .h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #081a55;
  margin-bottom: 8px;
}
.au-certs .sec-head .lead {
  font-size: 14px;
  line-height: 1.6;
  color: #52657a;
  margin: 0;
}
.au-certs .sec-head .kicker,
.au-skills .sec-head .kicker { margin-bottom: 8px; }

/* ---------- Story: Text 49 % links, Kasten rechts ---------- */
.au-story-grid {
  grid-template-columns: minmax(0, 49%) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.au-story-txt { align-self: center; }
.au-story-txt h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.005em;
  color: #081a55;
  margin: 6px 0 14px;
}
.au-story-txt p { font-size: 14.5px; line-height: 1.62; color: #52657a; margin: 0 0 12px; }

/* An dieser Stelle steht in der Referenz eine dunkle Karte mit Verlauf
   (linear-gradient(130deg,#061B39,#0A3567), Radius 12px). Das Porträt
   darin ist gestrichen – an seiner Stelle steht „Warum ITPROFMASTER?".
   Die Karte behält aber Form und Gewicht der Referenz, sonst klafft an
   der Stelle ein heller Kasten, wo im Vorbild ein dunkler Anker sitzt. */
.au-why-panel {
  background: linear-gradient(130deg, #061b39 0%, #0a3567 100%);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 44px -26px rgba(6, 27, 57, 0.75);
  padding: 26px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.au-why-panel > h2 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.16;
  color: #fff;
  margin: 0 0 16px;
}
.au-why-panel .au-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.au-why-panel .au-why-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  box-shadow: none;
  padding: 14px;
  min-height: 0;
}
.au-why-panel .au-why-card .ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(134, 199, 255, 0.16);
  color: #86c7ff;
  margin-bottom: 10px;
}
.au-why-panel .au-why-card .ico svg { width: 18px; height: 18px; }
.au-why-panel .au-why-card b { font-size: 15px; font-weight: 700; line-height: 1.16; color: #fff; margin-bottom: 5px; }
.au-why-panel .au-why-card p { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 0; }

/* ---------- Zertifikate: drei zu 31 %, space-between ---------- */
.au-cert-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 18px;
}
.au-cert {
  flex: 0 1 31%;
  width: 31%;
  max-width: 31%;
  min-width: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 12px;
  box-shadow: 0 8px 24px 0 rgba(14, 34, 74, 0.05);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.au-cert:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(14, 34, 74, 0.22); }
.au-cert figcaption { padding: 12px 14px 14px; gap: 3px; }
.au-cert figcaption b { font-size: 14px; font-weight: 700; line-height: 1.2; color: #092545; }
.au-cert figcaption small { font-size: 12px; line-height: 1.4; color: #52657a; }

/* ---------- Die beiden Zusatzabschnitte in denselben Takt ---------- */
.au-profile { max-width: 74ch; margin: 0 auto 22px; }
.au-profile p { font-size: 14.5px; line-height: 1.62; color: #52657a; margin: 0 0 12px; }
.au-skills-list { border-color: #dce4ee; border-radius: 12px; box-shadow: 0 8px 24px 0 rgba(14, 34, 74, 0.05); }
.au-skill-row { border-top-color: #eaf0f7; padding: 13px 4px; }
.au-skill-key { font-size: 14px; color: #092545; }
.au-chip { font-size: 12.5px; color: #52657a; border-color: #dce4ee; }
.au-contact-box {
  border: 1px solid #dce4ee;
  border-radius: 12px;
  box-shadow: 0 8px 24px 0 rgba(14, 34, 74, 0.05);
}
.au-contact-box h2 { font-size: 23px; line-height: 1.16; color: #081a55; }
.au-contact-box p { font-size: 14px; color: #52657a; }

@media (max-width: 1024px) {
  .au-story  > .wrap { padding-top: 36px; padding-bottom: 36px; }
  .au-certs  > .wrap,
  .au-skills > .wrap { padding-top: 32px; padding-bottom: 36px; }
  .au-story-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .au-story-txt h2 { font-size: 28px; }
  .au-certs .sec-head .h2 { font-size: 26px; }
  .au-cert { flex-basis: 48%; width: 48%; max-width: 48%; }
}
@media (max-width: 767px) {
  .au-certs > .wrap { padding-top: 20px; padding-bottom: 24px; }
  .au-cert { flex-basis: 100%; width: 100%; max-width: 100%; }
  .au-why-panel .au-why-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   FAQ-Kopf: das Motiv ganz zeigen

   Das Standardband ist 280-360 px hoch. Bei 1600 px Breite ergibt das ein
   Verhaeltnis von rund 4,4:1 - vom 3:1-Motiv blieb darin nur ein Streifen
   mit den Koepfen stehen. 33,33vw ist exakt ein Drittel der Breite, also
   genau die Hoehe, die das Bild braucht: bis 1440 px Fensterbreite steht
   es vollstaendig im Kopf. Darueber greift die Deckelung bei 480 px, damit
   die Kopfleiste nicht wieder so dick wird wie in der Fassung, die der
   Kunde schon einmal abgelehnt hat - dann sitzt der Ausschnitt etwas
   tiefer, so dass Tisch und Laptop im Bild bleiben.
   ===================================================================== */
.page-hero--s-faq.page-hero--media {
  min-height: clamp(300px, 33.33vw, 480px);
}
.page-hero--s-faq .hero-photo img { object-position: 50% 58%; }

@media (max-width: 767px) {
  /* Schmal ist das Band ohnehin hoch genug fuer das ganze Motiv. */
  .page-hero--s-faq.page-hero--media { min-height: clamp(300px, 56vw, 400px); }
}

/* =====================================================================
   Zielgruppen-Kacheln: zurück auf hell  (v28)

   v26 war ein Fehlgriff. Um den weißen Balken loszuwerden, lag als
   Untergrund das eigene Foto weichgezeichnet in der Kachel, dazu ein
   Aufhellungsverlauf darüber. Ergebnis: grau und dunkel – das genaue
   Gegenteil der Referenz.

   aufbau.ifp-plugin.de macht es viel einfacher: Die Kachel ist WEISS.
   Das Foto liegt vollflächig darin und ist auf seiner linken Hälfte
   bereits im Motiv nach Weiß ausgeblendet. Es gibt dort weder Untergrund
   noch Overlay noch Grauton – nur Weiß, in das ein Foto hineinläuft.

   Genau das hier: Füllung #FFFFFF, kein Untergrund, kein Overlay, und
   die Blende des Fotos läuft nach Weiß aus. Damit ist die Kachel so
   hell wie im Vorbild – und einen Balken kann es nicht geben, weil
   Blende und Füllung dieselbe Farbe treffen.
   ===================================================================== */

.aud-card {
  --aud-fill: #ffffff;
  background: var(--aud-fill);
}
.aud-card--blue  { --aud-accent: #0352d0; --aud-fill: #ffffff; }
.aud-card--green { --aud-accent: #08785c; --aud-fill: #ffffff; }

/* Untergrund und Aufhellung aus v26 wieder entfernen */
.aud-card::before { content: none; }
.aud-card::after  { content: none; }

/* Foto: eine weiche, mittellange Blende nach Weiß. Kürzer als in v22,
   damit sie das Motiv nicht auffrisst – lang genug, dass keine Kante
   entsteht. */
.aud-media { z-index: 0; }
.aud-media img {
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 9%, rgba(0, 0, 0, 0.92) 16%, #000 22%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 9%, rgba(0, 0, 0, 0.92) 16%, #000 22%);
}
.aud-body { z-index: 1; }

/* „Für Firmenkunden" – Motiv orig-pc-hilfe.webp (1320 × 958, Querformat).
   Im hochkanten Bildfeld bleiben rund 54 % der Bildbreite stehen. Bei
   35 % liegt das Fenster auf x 0,16–0,70: die Hand auf dem Trackpad
   steht vollständig darin, das Handgelenk links läuft in die Blende. */
.aud-card--blue .aud-media img { object-position: 35% center; }

/* „Für Privatkunden" – hilfe-zuhause.webp, Ausschnitt wie gehabt. */
.aud-card--green .aud-media img { object-position: 42% center; }

@media (max-width: 1024px) {
  .aud-card--blue .aud-media img { object-position: 32% center; }
}
@media (max-width: 767px) {
  .aud-media img {
    -webkit-mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 6%, rgba(0, 0, 0, 0.92) 11%, #000 15%);
    mask-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 6%, rgba(0, 0, 0, 0.92) 11%, #000 15%);
  }
  .aud-card--blue .aud-media img { object-position: 38% center; }
  .aud-card--green .aud-media img { object-position: 42% center; }
}

/* =====================================================================
   Zielgruppen-Kacheln: Motive getauscht  (v29)

   Für Firmenkunden  card-firmen.webp  640 × 1280  (Hochformat)
   Für Privatkunden  card-privat.webp  1320 × 958  (Querformat,
                     vormals orig-pc-hilfe.webp)

   Der helle Aufbau aus v28 bleibt unverändert: weiße Kachel, kein
   Untergrund, kein Overlay, Foto läuft nach Weiß aus. Nur die
   Ausschnitte wandern mit den Motiven mit.
   ===================================================================== */

/* Hochformat 1:2 im hochkanten Bildfeld: rund 60 % der Bildhöhe stehen.
   Der Kopf des Mannes sitzt weit oben, deshalb 8 % statt mittig. */
.aud-card--blue .aud-media img { object-position: center 8%; }

/* Querformat 1,38:1 im hochkanten Bildfeld: rund 54 % der Bildbreite
   stehen. Bei 35 % liegt das Fenster auf x 0,16–0,70 – die Hand auf dem
   Trackpad steht vollständig darin, das Handgelenk läuft in die Blende. */
.aud-card--green .aud-media img { object-position: 35% center; }

@media (max-width: 1024px) {
  .aud-card--blue .aud-media img { object-position: center 8%; }
  .aud-card--green .aud-media img { object-position: 32% center; }
}
@media (max-width: 767px) {
  .aud-card--blue .aud-media img { object-position: center 8%; }
  .aud-card--green .aud-media img { object-position: 38% center; }
}

/* =====================================================================
   Zielgruppen-Kacheln: Übergang 1:1 wie aufbau.ifp-plugin.de  (v30)

   Nachgesehen an Container 61b5924e / 174ffb57 der Referenz. Dort steht
   NUR das hier:

       background-image : url(itprofimaster-firmenkunden-1-1-1.webp)
       background-size  : cover
       background-position : center right
       background-repeat: no-repeat

   Kein Overlay, kein Verlauf, kein Bildfeld. Das Foto liegt über die
   GANZE Kachel, und der Weißverlauf ist im Motiv eingebrannt: links
   weiß bis etwa 42 % der Bildbreite, dann läuft das Foto auf, ab rund
   60 % steht es voll. Deshalb sieht man dort nie eine Kante.

   Unsere Motive haben diesen Verlauf nicht. Also erzeugen wir ihn:

   1. Das Foto füllt jetzt die ganze Kachel (inset:0) statt in einem
      Feld rechts zu sitzen. Damit fällt der Feldrand weg, der bisher
      überhaupt erst einen Übergang nötig gemacht hat.
   2. Ein Weißverlauf über dem Foto bildet die eingebrannte Blende der
      Referenzdateien nach – gleiche Staffelung wie dort.
   3. Beide Motive sind waagerecht gespiegelt. In den Referenzdateien
      steht die Person RECHTS und links ist Platz für den Text; in
      unseren beiden liegt das Motiv links (Gesicht des Unternehmers
      bei x 0,15–0,55, die Hand bei x 0,05–0,50). Ungespiegelt läge
      genau das Motiv unter dem Weiß. Gespiegelt sitzt es rechts – wie
      im Vorbild. Beide Bilder enthalten keine Schrift, die Spiegelung
      fällt nicht auf.
   ===================================================================== */

.aud-card {
  --aud-fill: #ffffff;
  --aud-text-w: 56%;
  background: var(--aud-fill);
}

/* Foto über die ganze Kachel – kein Feld mehr */
.aud-media {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.aud-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Spiegelung: Motiv nach rechts, so wie in den Referenzdateien */
  transform: scaleX(-1);
  /* Die Blende steckt jetzt im Verlauf darüber, nicht mehr in einer Maske */
  -webkit-mask-image: none;
  mask-image: none;
}

/* Der eingebrannte Weißverlauf der Referenzdateien, als Auflage
   nachgebaut: deckend bis 34 %, aufgelöst bis 72 %. */
.aud-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #ffffff 0%,
    #ffffff 34%,
    rgba(255, 255, 255, 0.86) 44%,
    rgba(255, 255, 255, 0.50) 53%,
    rgba(255, 255, 255, 0.14) 62%,
    rgba(255, 255, 255, 0) 72%);
}

.aud-body { position: relative; z-index: 1; }

/* Senkrechter Ausschnitt je Motiv.
   Firmenkunden: Hochformat 640 × 1280, im Kachelformat bleiben rund
   32 % der Bildhöhe stehen – bei 8 % liegt das Fenster auf y 0,05–0,37
   und damit auf dem Gesicht.
   Privatkunden: 1320 × 958, davon stehen rund 89 % der Höhe, mittig. */
.aud-card--blue  .aud-media img { object-position: center 8%; }
.aud-card--green .aud-media img { object-position: center center; }

@media (max-width: 1024px) {
  .aud-card { --aud-text-w: 52%; }
}
@media (max-width: 767px) {
  /* Schmal bleibt vom Motiv rechts zu wenig übrig, deshalb rückt der
     Verlauf zusammen – wie in der Referenz, die hier ebenfalls nur den
     Bildausschnitt verschiebt statt zusätzlich abzudecken. */
  .aud-card { --aud-text-w: 66%; }
  .aud-media::after {
    background: linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 26%,
      rgba(255, 255, 255, 0.86) 38%,
      rgba(255, 255, 255, 0.50) 50%,
      rgba(255, 255, 255, 0.14) 62%,
      rgba(255, 255, 255, 0) 74%);
  }
}

/* =====================================================================
   Zielgruppen-Kacheln  (v31)

   Vier Vorgaben, die v30 alle verletzt hat:

     1. Das ganze Bild zeigen, nicht gezoomt – beim Unternehmer war
        vorher die ganze Person zu sehen.
     2. Keine weißen Streifen.
     3. Kein weißer Farbverlauf.
     4. Die Fläche hinter dem Text soll im FARBTON DES BILDES gefüllt
        sein, nicht weiß.

   Umsetzung:

   Untergrund  Dasselbe Foto, stark weichgezeichnet, mit 30 % Deckkraft
               über Weiß. Das ergibt eine helle Wäsche in genau den
               Farben des Motivs – Punkt 4, ohne dass es dunkel oder
               grau wird (das war der Fehler in v26: dort lag das
               Weichbild voll deckend darin).
   Bild        object-fit: contain statt cover. Das Motiv wird nie
               beschnitten, es steht vollständig in der Kachel –
               Punkt 1. Freie Fläche daneben füllt die Wäsche, deshalb
               entstehen keine weißen Streifen – Punkt 2.
   Übergang    Kein Weißverlauf mehr – Punkt 3. Stattdessen laufen die
               Bildkanten weich in die Wäsche aus. Weil Wäsche und Foto
               dieselbe Datei sind, ist der Übergang farblich identisch
               und fällt nicht als Verlauf auf.
   Spiegelung  Wieder entfernt.
   ===================================================================== */

.aud-card {
  --aud-fill: #ffffff;
  --aud-text-w: 50%;
  --aud-wash: 0.3;
  position: relative;
  background: var(--aud-fill);
  overflow: hidden;
}

/* Farbwäsche aus dem Motiv – füllt die ganze Kachel, auch hinter dem Text */
.aud-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--aud-img);
  background-size: cover;
  background-position: center;
  filter: blur(48px) saturate(1.05);
  transform: scale(1.35);
  opacity: var(--aud-wash);
  pointer-events: none;
}
.aud-card::after { content: none; }

/* Bildfeld rechts – das Motiv steht darin vollständig */
.aud-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 50%;
  height: auto;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.aud-media::after { content: none; }
.aud-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right center;
  transform: none;
  /* Weiche Kanten in die Farbwäsche – links stärker, oben und unten
     nur angedeutet. Kein Weiß im Spiel, nur Transparenz. */
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 9%, #000 18%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 7%, #000 93%, rgba(0, 0, 0, 0) 100%);
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 9%, #000 18%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 7%, #000 93%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.aud-body { position: relative; z-index: 2; }

@media (max-width: 1024px) {
  .aud-card { --aud-text-w: 48%; }
  .aud-media { width: 48%; }
}
@media (max-width: 767px) {
  .aud-card { --aud-text-w: 58%; --aud-wash: 0.24; }
  .aud-media { width: 44%; }
  .aud-card::before { filter: blur(34px) saturate(1.05); }
}

/* =====================================================================
   Zielgruppen-Kacheln  (v32) – Bild randlos über die ganze Kachel

   Das Foto füllt die Kachel vollständig und bündig, von Kante zu Kante.
   Kein Bildfeld, keine Maske, keine Blende, keine Farbwäsche, kein
   Overlay. Genau wie bei aufbau.ifp-plugin.de:

       background-size: cover · background-position: center right

   Alles, was die Versionen v26 bis v31 darüber gelegt haben, ist hier
   ausgeschaltet.

   Damit der Text auf dem Foto lesbar bleibt, ohne das Bild anzufassen,
   trägt er einen weichen Lichtschein – dieselbe Technik, die im Start-
   Hero schon steht (.hero--photo .hero-copy). Das Foto selbst bleibt
   dabei unberührt.
   ===================================================================== */

.aud-card {
  --aud-text-w: 54%;
  position: relative;
  background: #fff;
  overflow: hidden;
}
/* Farbwäsche und Weißauflage der Vorversionen abschalten */
.aud-card::before { content: none; }
.aud-card::after  { content: none; }

/* Das Foto IST die Kachelfläche */
.aud-media {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.aud-media::after { content: none; }
.aud-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center right;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Text darüber, mit eigenem Lichtschein statt einer Auflage auf dem Bild */
.aud-body {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.98))
          drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

/* Senkrechter Ausschnitt je Motiv – waagerecht wird nichts beschnitten,
   beide Dateien sind schmaler als die Kachel.
   Firmenkunden 640 × 1280: sichtbar bleiben rund 32 % der Bildhöhe,
   bei 8 % liegt das Fenster auf Kopf und Schultern.
   Privatkunden 1320 × 958: sichtbar bleiben rund 89 %, mittig. */
.aud-card--blue  .aud-media img { object-position: center 8%; }
.aud-card--green .aud-media img { object-position: center center; }

@media (max-width: 1024px) {
  .aud-card { --aud-text-w: 52%; }
}
@media (max-width: 767px) {
  .aud-card { --aud-text-w: 62%; }
}

/* =====================================================================
   Über uns – Kopf heller und schärfer  (v33)

   Zwei Ursachen, zwei Mittel:

   HELLER  Der linke Teil war mit 97 % Weiß schon sehr hell, dunkel war
           die rechte Bildhälfte: dunkler Anzug vor blaugrauem Büro.
           Deshalb wird jetzt das Motiv selbst angehoben, statt noch
           mehr Weiß darüberzulegen – das würde nur ausbleichen.
           Zusätzlich endet der Schleier rechts nicht mehr bei 10 %,
           sondern bei 20 %; das nimmt der dunklen Ecke die Schwere.

   SCHÄRFER Die Datei ist 2048px breit. Bis dahin rechnet der Browser
           herunter, das Bild ist scharf. Auf breiteren Monitoren muss
           er hochrechnen (bei 2560px um Faktor 1,25, bei 4K um 1,87)
           und das Motiv wird weich. Dagegen läuft die Unschärfemaske
           #ipm-sharpen aus dem Template, dazu etwas mehr Mikrokontrast.
           Unterhalb 1024px greift der Filter nicht: dort wird ohnehin
           heruntergerechnet, und die Rechenlast wäre auf Mobilgeräten
           unnötig.
   ===================================================================== */

.au-hero-img {
  filter: url(#ipm-sharpen) brightness(1.07) contrast(1.06) saturate(1.06);
}
.ipm-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Schleier rechts etwas offener, damit die dunkle Bildhälfte aufklart */
.au-hero::before {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.90) 42%,
    rgba(255, 255, 255, 0.58) 64%,
    rgba(255, 255, 255, 0.20) 100%);
}

@media (max-width: 1024px) {
  /* Dunkle Fassung: hier trägt der navyblaue Schleier, das Motiv wird
     nur leicht angehoben und nicht nachgeschärft. */
  .au-hero-img { filter: brightness(1.06) contrast(1.04) saturate(1.04); }
  .au-hero::before {
    background: linear-gradient(90deg,
      rgba(6, 27, 57, 0.90) 0%,
      rgba(6, 27, 57, 0.80) 48%,
      rgba(6, 27, 57, 0.40) 72%,
      rgba(6, 27, 57, 0.06) 100%);
  }
}
@media (max-width: 767px) {
  .au-hero::before {
    background: linear-gradient(90deg,
      rgba(6, 27, 57, 0.94) 0%,
      rgba(6, 27, 57, 0.86) 58%,
      rgba(6, 27, 57, 0.46) 80%,
      rgba(6, 27, 57, 0.06) 100%);
  }
}

/* =====================================================================
   Zielgruppen-Kacheln  (v34) – Aufbau wörtlich von aufbau.ifp-plugin.de

   Abgeschrieben aus post-11.css, Container 61b5924e (Firmenkunden) und
   174ffb57 (Privatkunden). Dort steht für die Kachel exakt das hier und
   sonst nichts:

       --display        : flex
       --flex-direction : row
       --min-height     : 290px      (1024px: 280px · 767px: 250px)
       --padding        : 28px       (1024px:  24px · 767px:  18px)
       border           : 1px solid #DFE5EA
       --border-radius  : 10px
       background-image : url(<motiv>)
       background-position : center right   (767px: 74% center)
       background-repeat: no-repeat
       background-size  : cover

   Kein <img>, kein Bildfeld, keine Maske, keine Blende, kein Overlay,
   kein Filter. Das Foto ist der Hintergrund der Kachel.

   Genauso hier. Die Motiv-URL steht als --aud-img im Template, die
   beiden Dateien bleiben unverändert:
       Firmenkunden  card-firmen.webp   (Unternehmer am Notebook)
       Privatkunden  card-privat.webp   (Hände am Notebook)

   Textspalte 62,81 % wie in der Referenz (Elemente 1f1c6233 / 40d2426c).
   ===================================================================== */

.aud-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.aud-card {
  --aud-text-w: 62.81%;
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 290px;
  padding: 28px;
  border: 1px solid #dfe5ea;
  border-radius: 10px;
  background-color: #fff;
  background-image: var(--aud-img);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s var(--ease);
}
.aud-card:hover {
  transform: none;
  border-color: #c3d3e4;
  box-shadow: 0 10px 30px -18px rgba(9, 37, 69, 0.4);
}

/* Alles, was die Versionen v22 bis v33 zusätzlich eingebaut hatten */
.aud-card::before { content: none; }
.aud-card::after  { content: none; }
.aud-media        { display: none; }

.aud-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  filter: none;
}

@media (max-width: 1024px) {
  .aud-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .aud-card { min-height: 280px; padding: 24px; background-position: center right; }
}
@media (max-width: 767px) {
  .aud-card { min-height: 250px; padding: 18px; background-position: 74% center; }
}

/* =====================================================================
   Start-Hero: mehr Farbe  (v35)

   hero-vertrauen.webp ist von Haus aus flau: Sättigung im Mittel 19,6 %,
   RGB-Mittel 123/117/118 – also praktisch neutralgrau. Die Hauttöne der
   beiden Männer wirken dadurch blass und der Hintergrund ausgewaschen.

   Angehoben wird über einen Filter statt über eine neue Bilddatei,
   damit die Stärke jederzeit nachjustierbar ist: --hero-sat hoch- oder
   runterdrehen, sonst ändert sich nichts.

   Das ist bewusst KEIN Abgleich mit der Referenz – deren Motive liegen
   mit 12–14 % noch unter unserem. Das hier ist eine Geschmacksvorgabe.
   ===================================================================== */

.hero--photo {
  --hero-sat: 1.38;
  --hero-con: 1.06;
  --hero-bri: 1.02;
}
.hv-photo > img {
  filter: saturate(var(--hero-sat)) contrast(var(--hero-con)) brightness(var(--hero-bri));
}

/* =====================================================================
   Über uns – Kopf: weniger Weiß in der breiten Ansicht  (v36)

   Unter 1024px liegt ein navyblauer Schleier über dem Motiv, der nach
   rechts auf 6 % ausläuft – dort kommt das Foto in voller Farbe durch.
   Genau die Fassung gefällt.

   Darüber lag ein WEISSER Schleier, der rechts bei 20 % endete. Und
   genau das war mein Fehler aus v33: Ich hatte den letzten Wert von
   den 10 % der Referenz auf 20 % angehoben, um die dunkle Bildecke
   aufzuhellen. Das hat aber nicht die Ecke aufgehellt, sondern die
   ganze rechte Bildhälfte mit Weiß zugedeckt.

   Jetzt läuft der Schleier rechts auf 0 aus – die Person steht dort in
   voller Farbe, so wie in der schmalen Ansicht. Links bleibt er hoch,
   weil dort die dunkle Schrift steht und einen hellen Grund braucht.

   Zusätzlich dieselbe Farbanhebung wie im Start-Hero, damit das Motiv
   nicht mehr ausgegraut wirkt.
   ===================================================================== */

.au-hero-img {
  filter: url(#ipm-sharpen) brightness(1.05) contrast(1.06) saturate(1.22);
}

.au-hero::before {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.88) 38%,
    rgba(255, 255, 255, 0.42) 58%,
    rgba(255, 255, 255, 0.10) 78%,
    rgba(255, 255, 255, 0) 100%);
}

@media (max-width: 1024px) {
  /* Die schmale Fassung bleibt unangetastet – die passt. */
  .au-hero-img { filter: brightness(1.06) contrast(1.04) saturate(1.18); }
  .au-hero::before {
    background: linear-gradient(90deg,
      rgba(6, 27, 57, 0.90) 0%,
      rgba(6, 27, 57, 0.80) 48%,
      rgba(6, 27, 57, 0.40) 72%,
      rgba(6, 27, 57, 0.06) 100%);
  }
}
@media (max-width: 767px) {
  .au-hero::before {
    background: linear-gradient(90deg,
      rgba(6, 27, 57, 0.94) 0%,
      rgba(6, 27, 57, 0.86) 58%,
      rgba(6, 27, 57, 0.46) 80%,
      rgba(6, 27, 57, 0.06) 100%);
  }
}

/* =====================================================================
   „Über mich“ – Tabelle Fachliche Schwerpunkte  (v40)

   Kunde: „die Tabelle bei Über mich könnte optisch besser werden, der
   Aufbau der Tabelle an sich finde ich nicht so schön.“

   Vorher: 260-px-Spalte links, dünne Trennlinie über jeder Zeile. Die
   längeren Gebietsnamen brachen dadurch zweizeilig um, während rechts
   neben den Marken viel Leerfläche stand – das las sich wie eine
   Tabellenkalkulation, nicht wie ein Datenblatt.

   Jetzt: keine Trennlinien mehr, sondern abwechselnd hinterlegte Zeilen.
   Die Gebietsspalte ist breiter (320 px), Gebiet und Marken stehen
   mittig zueinander statt oben bündig, und die Zeilen reichen bis an den
   Rand der Fläche – dadurch sitzt der Wechsel der Hintergrundfarbe sauber
   und die Marken stehen nicht mehr im Nichts.
   ===================================================================== */

.au-skills-list {
  max-width: 900px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}
.au-skill-row {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 10px clamp(18px, 2.4vw, 30px);
  padding: 15px clamp(16px, 2.2vw, 26px);
  border-top: 0;
  background: #fff;
}
.au-skill-row:nth-child(even) { background: #f6f9fd; }
.au-skill-key { font-size: 14.5px; color: #092545; }
.au-skill-key .ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e5eefb;
  color: #0352d0;
}
.au-skill-vals { padding-top: 0; }
.au-chip {
  background: #fff;
  border-color: #d7e1ee;
  color: #4a5c70;
}
.au-skill-row:nth-child(even) .au-chip { background: #fff; }

@media (max-width: 720px) {
  .au-skill-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
}

/* =====================================================================
   Mega-Menü „Leistungen“ – fünfte Spalte  (v40)

   Kunde: „im Menü zum Aufklappen ist die Info-Sektion zu weit unten,
   das muss man höher und bündig machen.“

   Ursache: Das Raster stand auf vier Spalten, das Menü hat aber fünf
   Gruppen (IT-Management, IT-Service & Support, Für Privatkunden,
   IT-Notdienste, Info). „Info“ rutschte deshalb in eine zweite Zeile und
   stand allein unter der ersten Spalte.

   Jetzt fünf Spalten: alle Gruppen stehen nebeneinander und oben bündig.
   Der Abstand ist etwas enger, damit „Datenwiederherstellung“ als
   längster Eintrag noch in eine Zeile passt.
   ===================================================================== */

/* Nur in der Desktop-Ansicht: ab 1280px abwaerts uebernimmt die
   ausklappbare Mobil-Navigation mit ihrem zweispaltigen Raster. */
@media (min-width: 1281px) {
  .mega-panel { width: min(1180px, calc(100vw - 32px)); }
  .mega-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  .mega-col a { padding: 6px 8px; font-size: 14px; }
  .mega-title { font-size: 12.5px; gap: 7px; }
}

/* =====================================================================
   Google-Rezensionen im Fließtext – [ipmreviews]  (v40)

   Dieselben Karten wie im Aufklappfeld der Startseite, aber als ruhiger
   Block innerhalb einer Unterseite: heller Kasten, zweispaltiges Raster,
   kein eigener Scrollbereich. Auf der Referenzen-Seite steht er direkt
   unter „Projekte im Überblick“.
   ===================================================================== */

.ipm-reviews {
  margin: 30px 0 34px;
  padding: 22px clamp(16px, 2.2vw, 26px) 18px;
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 14px;
  box-shadow: 0 8px 24px 0 rgba(14, 34, 74, 0.05);
}
.ipm-reviews-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaf0f7;
}
.ipm-reviews-head h2 {
  margin: 0 0 3px;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.25;
  color: var(--ink);
}
.ipm-reviews-head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
/* Kein Flex: „5,0 von 5 · Stand …“ soll als ein Satz umbrechen, nicht als
   einzelne Flex-Kinder untereinander rutschen. */
.ipm-reviews-head p .stars {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 5px;
}
.ipm-reviews-head .stars { color: #fbbc05; }
.ipm-reviews-head .gr-logo--lg {
  background: #fff;
  border: 1px solid #e4ebf4;
  border-radius: 12px;
  width: 50px;
  height: 50px;
  flex: none;
}

.ipm-reviews .gr-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(18px, 2.4vw, 32px);
  overflow: visible;
  padding: 0;
}
.ipm-reviews .gr-item { padding: 17px 0; border-bottom: 1px solid #eef3f8; }
/* In zwei Spalten ist „letztes Kind“ nicht gleich „unterste Zeile“. */
.ipm-reviews .gr-item:last-child,
.ipm-reviews .gr-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.ipm-reviews .gr-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
/* Name, Avatar und Zeitangabe sind weiter oben fuer das dunkle Aufklappfeld
   der Startseite eingefaerbt (weiss auf dunkel). Hier steht der Block auf
   Weiss – ohne diese Rueckfaerbung waeren Name und Avatar unsichtbar. */
.ipm-reviews .gr-meta b { color: var(--ink); font-size: 15px; }
.ipm-reviews .gr-meta small { color: var(--muted); }
.ipm-reviews .gr-avatar--ph {
  background: #e5eefb;
  color: #0352d0;
}
.ipm-reviews .gr-empty {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: #fff8e6;
  border: 1px solid #f0e0b6;
  border-radius: 10px;
  font-size: 14px;
}
.ipm-reviews .gr-empty p { margin: 0; }
/* Der Block steht auf Weiss. Die Regeln fuer .gr-foot weiter oben sind
   fuer das dunkle Aufklappfeld der Startseite gemacht – dort ist die
   Schaltflaeche weiss auf dunkel und waere hier weiss auf weiss. */
.ipm-reviews .gr-foot {
  display: flex;
  padding-top: 16px;
  margin-top: 2px;
  background: none;
  border-top: 1px solid #eaf0f7;
}
.ipm-reviews .gr-foot .btn--outline {
  --btn-color: #0352d0;
  color: #0352d0;
  border-color: #cfdcec;
}
.ipm-reviews .gr-foot .btn--outline:hover {
  background: #f2f7fe;
  border-color: #0352d0;
}

@media (max-width: 700px) {
  .ipm-reviews .gr-list { grid-template-columns: minmax(0, 1fr); }
  .ipm-reviews .gr-item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid #eef3f8; }
}
.ipm-reviews-stand { margin: 2px 0 0; font-size: 12.5px; color: var(--muted-2); }

/* =====================================================================
   Zielgruppen-Kacheln: Weissbereich an der Kachel verankern  (v41)

   Fehlerbild: Zwischen rund 1025 und 1280 px wird die Kachel schmal und
   hoch. `background-size: cover` skaliert dann ueber die HOEHE, das Bild
   wird breiter als die Kachel – und weil es mit `center right` rechts
   ausgerichtet ist, faellt genau der linke, weisse Teil des Motivs aus dem
   Ausschnitt. Der Text stand danach direkt auf dem Foto und war nicht mehr
   lesbar.

   Der eingebrannte Verlauf im Motiv kann das nicht loesen: Er liegt bei
   einem festen Prozentsatz der BILDbreite, der Text braucht ihn aber bei
   einem festen Prozentsatz der KACHELbreite. Beides faellt nur zusammen,
   solange Kachel- und Bildseitenverhaeltnis uebereinstimmen.

   Deshalb liegt der Weissverlauf jetzt als eigene Hintergrundebene auf der
   Kachel – unabhaengig vom Bildausschnitt. Optisch identisch zur bisherigen
   Fassung (weiss links, offen rechts, kein Schleier ueber der Person), aber
   er verrutscht nicht mehr. Die Stopps haengen an --aud-veil-*, damit sie je
   Breite nachgezogen werden koennen.
   ===================================================================== */

.aud-card {
  --aud-veil-solid: 38%;
  --aud-veil-end: 62%;
  background-image:
    linear-gradient(90deg,
      #fff 0%,
      #fff var(--aud-veil-solid),
      rgba(255, 255, 255, 0) var(--aud-veil-end)),
    var(--aud-img);
  background-position: 0 0, center right;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}


/* ---------------------------------------------------------------------
   Nachtrag zu v41: der schmale Zweispalter entfaellt

   Mit verankertem Verlauf ist der Text zwar ueberall lesbar, aber zwischen
   1025 und 1200 px bleibt neben dem Weissbereich schlicht zu wenig Kachel
   uebrig – bei „Fuer Privatkunden" verschwand der Mann, der der Kundin
   etwas erklaert, komplett unter dem Verlauf. Genau das Motiv soll die
   Kachel aber zeigen.

   Deshalb laufen die Kacheln ab 1200 px abwaerts untereinander. Sie sind
   dann wieder breit, das Motiv steht vollstaendig rechts und der Text
   braucht nur noch rund ein Drittel der Flaeche. Der senkrechte Ausschnitt
   wird je Kachel gesetzt, weil die Personen in den beiden Dateien auf
   unterschiedlicher Hoehe sitzen.
   --------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .aud-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .aud-card {
    --aud-veil-solid: 32%;
    --aud-veil-end: 58%;
    min-height: 300px;
  }
  .aud-card--blue  { background-position: 0 0, right 18%; }
  .aud-card--green { background-position: 0 0, right 66%; }
}
@media (max-width: 767px) {
  .aud-card {
    --aud-veil-solid: 44%;
    --aud-veil-end: 76%;
  }
  .aud-card--blue  { background-position: 0 0, 74% 18%; }
  .aud-card--green { background-position: 0 0, 74% 66%; }
}

/* =====================================================================
   v43 – Kachel „Für Privatkunden / graue Schrift

/* =====================================================================
   v43 - Kachel "Fuer Privatkunden" / graue Schrift

   1) card-privat.webp lag als verkleinertes Foto in einer 1600x960er
      Flaeche; oben blieben rund 300 px reines Weiss stehen. Weil die
      Kachel das Motiv mit background-size: cover ueber die volle Hoehe
      zieht, stand dieser Weissstreifen quer ueber dem oberen Kachelrand -
      das Bild wirkte abgeschnitten. Die Datei ist jetzt randlos aufgebaut
      wie card-firmen.webp: das Motiv fuellt die komplette Flaeche und
      steht rechts. An der CSS-Seite war dafuer nichts zu aendern.

   2) Der Einleitungssatz stand als einziges Element der Kachel in Grau
      (#6a798b) neben den dunklen Listenpunkten. Er bekommt jetzt dieselbe
      Textfarbe wie die Liste.
   ===================================================================== */

.aud-text > p { color: #1b2a3a; }

/* =====================================================================
   „Fachliche Schwerpunkte“ auf /uber-mich/ – Auflistung statt Marken

   Kunde zum Screenshot genau dieses Blocks: „auflistung bitte“.

   Bis hierher lag das Gebiet in der linken Spalte und die Techniken
   standen rechts daneben als Pillen (.au-chip). Jetzt steht je Zeile das
   Gebiet oben und darunter, eingerückt auf die Textkante neben dem
   Symbol, die Techniken als echte Aufzählung – eine je Zeile, mit dem
   blauen Punkt der übrigen Listen der Seite (siehe .aud-list).

   Die abwechselnd hinterlegten Zeilen bleiben: sie halten die neun
   Gebiete auch in der höheren Auflistung noch auseinander.
   ===================================================================== */

.au-skill-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 16px clamp(16px, 2.2vw, 26px);
}
/* 34 px Symbol + 11 px Abstand: die Punkte stehen damit unter dem
   Anfang der Überschrift, nicht unter dem Symbol. */
.au-skill-vals { padding-top: 0; padding-left: 45px; }
.au-skill-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.au-skill-items li {
  position: relative;
  padding-left: 19px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #4a5c70;
}
.au-skill-items li::before {
  content: "\25CF";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  line-height: 2.35;
  color: #0352d0;
}

@media (max-width: 720px) {
  .au-skill-row { padding: 14px 16px; }
  .au-skill-vals { padding-left: 45px; }
}

/* =====================================================================
   Kopfbild-Ausschnitt auf FAQ und „IT-Preise für Unternehmen“

   Kunde: FAQ „sieht unpassend aus“, Preisseite „nicht zieltreffend“.
   Neben den Motiven selbst steckte hier ein Ausschnittsfehler:

   `.page-hero--media .hero-photo` liegt zwar mit `position:absolute;
   inset:0` über dem Kopfband, erbt aber von der allgemeinen Regel
   `.hero-photo` (Startseite) noch `aspect-ratio: 3/2` und
   `min-height: clamp(430px, 40vw, 600px)`. Der Bildkasten ist dadurch
   bei 1400 px Fensterbreite 933 px hoch, das Band aber nur 467 px:
   `object-fit: cover` rechnet das 3:1-Motiv auf die 933 px hoch und vom
   Bild bleibt nur ein doppelt vergrößerter Streifen aus der Mitte
   stehen – genau die abgeschnittenen Köpfe im FAQ-Kopf.

   Beide Maße gehören nicht zum Flächenbild. Zurückgesetzt füllt das
   Motiv das Band so, wie es der Kommentar zum FAQ-Kopf ohnehin schon
   beschreibt: bis 1440 px Breite steht das 3:1-Bild vollständig darin.

   Bewusst nur für diese beiden Seiten: die übrigen Kopfbilder hat der
   Kunde in ihrem jetzigen Ausschnitt abgenommen.
   ===================================================================== */
.page-hero--s-faq .hero-photo,
.page-hero--s-allgemeine-preisliste .hero-photo,
/* Server-Notdienst: der Kopf hat sein Flaechenbild erst bekommen, als der
   Kunde das Band nach oben gezogen haben wollte – hier gab es also nie
   einen abgenommenen Ausschnitt, der zu erhalten waere. */
.page-hero--s-server-notdienst-berlin .hero-photo,
/* PC-Notdienst: neues Motiv (notdienst-bildschirm) – der alte Ausschnitt
   gehoert zum abgelehnten Telefonbild und ist nicht zu erhalten. */
.page-hero--s-pc-notdienst-berlin .hero-photo {
  aspect-ratio: auto;
  min-height: 0;
}
/* Motiv mittig – ohne den doppelten Zoom passt der Standard 50% 58%
   nicht mehr, die Köpfe säßen sonst zu weit oben. */
.page-hero--s-faq .hero-photo img,
.page-hero--s-allgemeine-preisliste .hero-photo img,
.page-hero--s-pc-notdienst-berlin .hero-photo img { object-position: 50% 50%; }

/* =====================================================================
   v44 – Kachel „Für Privatkunden": Mann UND Frau sichtbar

   Kunde 25.08.2026: „das Bild richtig verschieben … sodass man den Mann
   und die Frau sieht. Momentan sieht man nur die Frau."

   Ursache war reine Geometrie: Die Kachel zeigt bei 580x425 px nur einen
   1310 px breiten Ausschnitt der 1600er Datei, und davon liegen die linken
   38 % deckend unter dem Weißverlauf, der den Text trägt. Das Paar im Foto
   ist zusammen rund 850 px breit – es passt nicht in die verbleibenden
   knapp 500 px. Zwei Dinge greifen deshalb ineinander:

     1) card-privat.webp ist neu aufgebaut (Motiv nach rechts geschoben,
        links weiße Fläche mit eingebranntem Verlauf – wie card-firmen.webp).
     2) Der Verlauf dieser einen Kachel öffnet früher: deckend bis 36 %,
        offen ab 50 %. Damit steht das Gesicht des Mannes frei.

   Damit der Text nicht in die offene Bildhälfte hineinläuft, bricht der
   Einleitungssatz jetzt auf der Breite der Liste um (die endet bei 41 %).
   Gemessener Kontrast am Zeilenende: 7:1 – deutlich über AA.

   Nur die grüne Kachel: „Für Firmenkunden" zeigt eine einzelne Person und
   ist in ihrem jetzigen Ausschnitt vom Kunden abgenommen.
   ===================================================================== */
/* Symbol über der Überschrift statt daneben.

   Grund ist die Breite: Neben dem 54-px-Symbol beginnt die Überschrift
   erst bei 110 px und endet bei 306 px – also bei 53 % der Kachelbreite.
   Der Weißverlauf müsste dann bis 53 % deckend sein, und darunter läge
   das Gesicht des Mannes im Motiv. Übereinander gestellt beginnt die
   Überschrift bei 42 px und endet bei rund 41 %; der Verlauf kann davor
   auslaufen und beide Personen bleiben frei.

   Gilt für beide Kacheln, damit sie im Kopf gleich aufgebaut bleiben. */
.aud-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Weicher Übergang zwischen weißer Textfläche und Foto.

   Der Verlauf der übrigen Kacheln hat nur zwei Stopps – bei den schmalen
   4 %, die hier zwischen Textende (41 %) und dem Gesicht des Mannes
   (46 %) liegen, zeichnete sich diese gerade Rampe als Kante ab. Statt
   sie zu verbreitern (dafür ist kein Platz) läuft sie jetzt als
   S-Kurve aus: bis 41 % deckend, dann schnell fallend und mit einem
   langen, sehr schwachen Ausläufer bis 63 %. Gleicher Platzbedarf,
   aber keine sichtbare Naht. Das Motiv selbst blendet zusätzlich im
   Bild nach links aus (eingebrannter Verlauf bis Bildpunkt 950). */
.aud-card--green {
  background-image:
    linear-gradient(90deg,
      #fff 0%,
      #fff 41%,
      rgba(255, 255, 255, 0.88) 43%,
      rgba(255, 255, 255, 0.62) 45.5%,
      rgba(255, 255, 255, 0.38) 48%,
      rgba(255, 255, 255, 0.20) 51%,
      rgba(255, 255, 255, 0.09) 54.5%,
      rgba(255, 255, 255, 0.03) 58.5%,
      rgba(255, 255, 255, 0) 63%),
    var(--aud-img);
}
.aud-card--green .aud-text > p { max-width: 24ch; }

@media (max-width: 1200px) {
  /* Einspaltig ist die Kachel breit genug – hier reicht der schmalere
     Verlauf der Breakpoint-Regel, das Motiv steht ohnehin frei.

     Der senkrechte Ausschnitt muss dagegen nachgezogen werden: Die
     bisherigen 66 % waren auf die alte Datei gemünzt, in der das Paar
     tiefer saß. Im neuen Aufbau stehen die Köpfe oben – bei 66 % wurden
     sie am oberen Kachelrand abgeschnitten. */
  .aud-card--green {
    background-image:
      linear-gradient(90deg,
        #fff 0%,
        #fff 34%,
        rgba(255, 255, 255, 0.88) 36.5%,
        rgba(255, 255, 255, 0.62) 39%,
        rgba(255, 255, 255, 0.38) 42%,
        rgba(255, 255, 255, 0.20) 45%,
        rgba(255, 255, 255, 0.09) 48.5%,
        rgba(255, 255, 255, 0.03) 52.5%,
        rgba(255, 255, 255, 0) 57%),
      var(--aud-img);
    background-position: 0 0, right top;
  }
  .aud-card--green .aud-text > p { max-width: 30ch; }
}

@media (max-width: 767px) {
  /* Hochkant ist die Kachel schmal und die Überschrift steht dicht am
     Motiv – deshalb hier ein breiterer Verlauf und der Ausschnitt weiter
     rechts, damit beide Personen im Bild bleiben. */
  .aud-card--green {
    background-image:
      linear-gradient(90deg,
        #fff 0%,
        #fff 44%,
        rgba(255, 255, 255, 0.85) 47%,
        rgba(255, 255, 255, 0.58) 50%,
        rgba(255, 255, 255, 0.34) 53%,
        rgba(255, 255, 255, 0.17) 56.5%,
        rgba(255, 255, 255, 0.06) 60.5%,
        rgba(255, 255, 255, 0) 66%),
      var(--aud-img);
    background-position: 0 0, 74% top;
  }
  /* Hochkant ist die Kachel schmal – ohne Begrenzung liefe der
     Einleitungssatz über das Motiv. */
  .aud-card--green .aud-text > p { max-width: 22ch; }
}

/* =====================================================================
   v44 – Kopfbilder ohne den doppelten Zoom

   Dieselbe Ursache wie bei FAQ und Preisliste weiter oben: `.hero-photo`
   bringt aus dem Startseiten-Hero `aspect-ratio: 3/2` und eine
   Mindesthöhe mit. Im Kopfband einer Unterseite ist der Bildkasten damit
   960 px hoch, das Band aber nur 447 px – vom Motiv bleibt ein doppelt
   vergrößerter Streifen aus der Mitte stehen.

   Die drei Seiten unten haben ihr Motiv am 25.08.2026 neu bekommen; ein
   „abgenommener Ausschnitt", der zu erhalten wäre, existiert dort also
   nicht. Die Motive liegen als 3:1 vor und stehen damit vollständig im
   Band.
   ===================================================================== */
.page-hero--s-serverwartung-berlin .hero-photo,
.page-hero--s-datenrettung-berlin-privat .hero-photo,
.page-hero--s-referenzen .hero-photo,
.page-hero--s-automatisierung-berlin .hero-photo,
.page-hero--s-webseiten-redesign-berlin .hero-photo {
  aspect-ratio: auto;
  min-height: 0;
}
.page-hero--s-serverwartung-berlin .hero-photo img,
.page-hero--s-datenrettung-berlin-privat .hero-photo img,
.page-hero--s-referenzen .hero-photo img,
.page-hero--s-automatisierung-berlin .hero-photo img,
.page-hero--s-webseiten-redesign-berlin .hero-photo img { object-position: 50% 50%; }

/* Der Kopf-Knopf mit der Telefonnummer ist entfallen (Kundenwunsch
   „Telefonnummer im Hero, überall raus"). Ein einzelner Knopf soll
   deshalb nicht mittig in einer Zeile für zwei stehen. */
.hero-cta--single { justify-content: flex-start; }

/* =====================================================================
   Preistabellen auf dem Handy  (27.08.2026)

   Kundenmeldung: „bei der Unterseite mit den Preisen sieht das auf dem
   Handy nicht so gut aus, dort werden die Preise irgendwie abgeschnitten
   angezeigt."

   Ursache: table.pt-table hatte min-width: 480px. Der Rahmen darum
   (.pt-table-wrap) fängt das mit overflow-x: auto ab – die Tabelle wird
   also seitlich scrollbar. Auf einem Telefon sind innerhalb des
   Inhaltsbereichs aber nur rund 330–350 px Platz. Die Preisspalte steht
   ganz rechts und liegt damit ausserhalb des Sichtfelds; ohne sichtbare
   Bildlaufleiste sieht das schlicht nach einem abgeschnittenen Preis aus.

   Statt die Tabelle zu quetschen (dann bricht „1.490,00 € einmalig" um
   und die Zeilen werden unterschiedlich hoch), wird sie unterhalb von
   640 px zu einer Liste aus Karten: je Zeile eine Karte, oben die
   Leistung samt Erläuterung, darunter – durch eine feine Linie getrennt
   – der Preis in Blau. Damit gibt es auf dem Telefon gar keinen
   waagerechten Bildlauf mehr und kein Preis kann abgeschnitten werden.

   Die Kopfzeile („Leistung / Preis") wird dabei nur optisch ausgeblendet
   und bleibt für Screenreader erhalten; die Überschrift über jeder
   Tabelle benennt den Abschnitt ohnehin.
   ===================================================================== */
@media (max-width: 640px) {
  /* Der Rahmen sass um die scrollbare Tabelle. Die Karten bringen ihren
     eigenen mit, sonst läge Rahmen um Rahmen. */
  .pt-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  table.pt-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .pt-table tbody { display: block; }

  /* Optisch weg, für Screenreader da. */
  .pt-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .pt-table tr {
    display: block;
    padding: 13px 15px 12px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
  }
  .pt-table tr:last-child { margin-bottom: 0; }

  .pt-table td,
  .pt-table tr:nth-child(even) td {
    display: block;
    padding: 0;
    border-top: 0;
    background: transparent;
  }

  .pt-table td:first-child {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ink);
  }
  .pt-table td small { font-size: 13px; line-height: 1.45; margin-top: 5px; }

  /* Der Preis darf hier nicht mehr nowrap sein – genau das hätte die
     Karte wieder über den Bildschirmrand geschoben. */
  .pt-table td:last-child {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--line-2);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 17px;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
  }

  .pt-section { margin-bottom: 28px; }
  .pt-badge { margin-left: 0; margin-top: 6px; }
}

/* =====================================================================
   Sicherheitsnetz für die Reveal-Animationen  (27.08.2026)

   `[data-reveal]` startet mit `opacity: 0`; sichtbar wird ein Element
   erst, wenn `assets/js/main.js` ihm `.is-visible` gibt. Läuft dieses
   Skript nicht, bleibt die Seite leer – und zwar vollständig, weil die
   Auszeichnung auf fast jedem Abschnitt liegt.

   Auf itprofmaster.de ist genau das ein reales Risiko: WP Rocket hat
   „JavaScript verzögern" (`delay_js`) aktiv und hält Skripte bis zur
   ersten Maus- oder Tastatureingabe zurück. Ein Besucher, der nur liest
   und scrollt, hätte eine weisse Seite gesehen.

   Das Skript wird deshalb von der Verzögerung ausgenommen. Diese Regel
   ist die zweite Absicherung: Kommt das Skript aus irgendeinem Grund
   nicht durch – Optimierungs-Plugin, JS-Fehler, abgebrochener Download –
   blendet die Animation den Inhalt nach 2,5 Sekunden von sich aus ein.

   Im Normalfall greift sie nie: `.is-visible` schaltet sie ab, und die
   gewohnte Transition übernimmt wie bisher.
   ===================================================================== */
@keyframes ipm-reveal-notfall {
  to { opacity: 1; transform: none; }
}
[data-reveal] {
  animation: ipm-reveal-notfall 0.5s var(--ease) 2.5s forwards;
}
[data-reveal].is-visible {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none; }
}

/* =====================================================================
   Mega-Menü auf dem Telefon  (27.08.2026)

   Kundenmeldung: „das Menü auf dem Handy sieht kacke aus – wenn man auf
   Dienstleistungen klickt, ist da quasi eine richtig breite Auflistung,
   das passt nicht so."

   Ursache: Ab 1280 px klappt das Menü in die Seitenleiste, das Mega-Feld
   behielt dabei aber ein Raster aus zwei Spalten. Auf einem Tablet geht
   das auf – auf einem Telefon stehen darin fünf Gruppen mit zusammen
   rund dreissig Einträgen in zwei schmalen Spalten. Die Bezeichnungen
   brechen um, die Gruppen sind nicht mehr auseinanderzuhalten, und die
   Tippflächen liegen zu dicht beieinander.

   Unterhalb von 700 px wird daraus deshalb eine schlichte Liste: eine
   Spalte, jede Gruppe mit einer ruhigen Überschrift abgesetzt, darunter
   die Einträge als volle Zeilen mit mindestens 44 px Höhe – die Grösse,
   die sich zuverlässig mit dem Daumen treffen lässt.

   Auf dem Tablet bleibt alles wie es war.
   ===================================================================== */
@media (max-width: 700px) {
  .main-nav .sub-menu,
  .mega-panel {
    padding: 0 0 10px;
  }

  /* Aus zwei Spalten wird eine. */
  .mega-grid {
    display: block;
    gap: 0;
  }

  /* Gruppenüberschrift: leiser als auf dem Monitor, denn hier trägt sie
     nur noch die Gliederung – der Rahmen des Mega-Felds fehlt ja. */
  .mega-title {
    font-size: 11.5px;
    letter-spacing: 0.09em;
    color: var(--muted);
    padding: 15px 2px 6px;
    margin: 0;
    border-bottom: 0;
  }
  .mega-col + .mega-col .mega-title {
    border-top: 1px solid var(--line);
    margin-top: 4px;
  }
  .mega-title .ico svg {
    width: 14px;
    height: 14px;
  }

  /* Volle Zeilen statt enger Kacheln. 44 px ist die kleinste Fläche, die
     sich mit dem Daumen sicher treffen lässt. */
  .mega-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 10px;
    font-size: 15.5px;
    border-radius: var(--r-xs);
  }
  .mega-col li + li a {
    border-top: 1px solid var(--bg-alt);
  }
  /* Auf dem Telefon gibt es kein Hover – die Rückmeldung kommt beim Tippen. */
  .mega-col a:hover {
    background: none;
    color: var(--ink-2);
  }
  .mega-col a:active {
    background: var(--blue-050);
    color: var(--blue);
  }
}