/* ==========================================================================
   Base-Template · IT Hosting / MSP / Datacenter
   Aufbau:  1 Fonts · 2 Tokens · 3 Reset/Base · 4 Layout & Farbschemata
            5 Komponenten · 6 Header · 7 Mega-Menü · 8 Mobile-Nav · 9 Footer
            10 Sections · 11 Utilities
   ========================================================================== */

/* 1 · Fonts (Inter, SIL Open Font License) ------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-700.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* 2 · Design-Tokens ------------------------------------------------------- */
:root {
  /* Marke */
  --brand: #2d23e8; --logo-icon: #2d23e8;
  --brand-2: #5b4dff;
  --brand-3: #a66cff;
  /* Markenverlauf – identisch mit dem Logo-Icon */
  --brand-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  /* für Text auf dunklem Grund: mittlerer bis heller Teil desselben Verlaufs */
  --brand-gradient-text: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-3) 100%);
  --brand-hover: #5b4dff; /* = --brand-2 aus dem Markenverlauf */
  /* Button-Farbe (Test: neutrales Grau) */
  --btn-primary: #44484f;
  --btn-primary-hover: #5a5f67;
  --accent-green: #01df97;
  --accent-violet: var(--brand-3);

  /* Pastell-Flächen für Karten & Kacheln */
  --tint-violet: var(--brand-2);
  --tint-lilac: #d8c3fb;
  --tint-lavender: #bbc5ec;
  --tint-pink: #e08dff;
  --tint-peach: #e6c8bf;
  --tint-sage: #c6cfce;
  --tint-moss: #a7b2ac;
  --tint-teal: #00a1b5;
  --tint-mint: #afd9d8;
  --brand-soft: #ecebfb; /* sehr helles Lavendel aus der Markenfarbe */
  /* Logo-Verlauf, Lichtschein, Hervorhebungen – werden von den Farbvorschlägen überschrieben */
  --logo-1: #2d23e8; --logo-2: #5b4dff; --logo-3: #a66cff;
  --glow-1: rgba(166,108,255,.55); --glow-2: rgba(91,77,255,.8); --glow-3: var(--glow-3);
  --teaser-2: #a3b9a8;

  /* Neutrale */
  --black: #141516;
  --ink: #1d1e1f;
  --ink-2: #26282a;
  --grey-50: #ebeff3;
  --grey-100: #e3e8ef;
  --white: #ffffff;

  /* Typografie */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* z. B. "Figtree" eintragen */
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: clamp(1rem, 0.96rem + 0.12vw, 1.0625rem);
  --fs-l: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  --h-xs: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --h-s: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  --h-m: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  --h-l: clamp(2.25rem, 1.7rem + 2vw, 3.375rem);
  --h-xl: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);

  /* Form & Raum */
  --radius-s: 16px;
  --radius-m: 24px;
  --radius-l: 32px;
  --radius-pill: 999px;
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(3rem, 2.25rem + 3vw, 5.25rem);
  --header-h: 80px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 3 · Reset & Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-m);
  line-height: 1.6;
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-head); color: var(--fg-strong); font-weight: 600; line-height: 1.08; letter-spacing: -0.016em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p strong, p b { color: var(--fg-strong); font-weight: 600; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-s);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* 4 · Layout & Farbschemata ---------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }

/* Farbschemata: jede Section bekommt genau eines */
.cs-dark  { --bg: var(--black); --fg: rgba(255,255,255,.64); --fg-strong: #fff; --line: rgba(255,255,255,.12); --surface: var(--btn-primary); --surface-2: rgba(255,255,255,.08); background: var(--bg); color: var(--fg); }
.cs-light { --bg: var(--grey-50); --fg: rgba(0,0,0,.64); --fg-strong: var(--ink); --line: rgba(0,0,0,.12); --surface: #fff; --surface-2: rgba(0,0,0,.08); background: var(--bg); color: var(--fg); }
.cs-white { --bg: #fff; --fg: rgba(0,0,0,.64); --fg-strong: var(--ink); --line: rgba(0,0,0,.12); --surface: var(--grey-50); --surface-2: rgba(0,0,0,.06); background: var(--bg); color: var(--fg); }
/* Kartentöne (Text dunkel bzw. hell) */
.tone-dark-text  { --fg: rgba(0,0,0,.64); --fg-strong: var(--ink); color: var(--fg); }
.tone-light-text { --fg: rgba(255,255,255,.72); --fg-strong: #fff; color: var(--fg); }

.section-head { max-width: 780px; margin-bottom: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1.4fr 1fr; } }
.section-head h2 { font-size: var(--h-l); }
.section-head p { margin-top: 1.25rem; font-size: var(--fs-l); }
.section-head--split p { margin-top: 0; font-weight: 600; }

.kicker { display: block; font-size: var(--fs-s); font-weight: 700; color: var(--fg-strong); margin-bottom: 0.875rem; letter-spacing: 0; }
.lead { font-size: var(--fs-l); line-height: 1.45; }

.grid { display: grid; gap: clamp(16px, 1.6vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 560px) and (max-width: 899px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
.split { display: grid; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse > :first-child { order: 2; } }

/* 5 · Komponenten --------------------------------------------------------- */
/* Buttons – Pill, fett, 2px-Outline */
.btn {
  --btn-bg: var(--btn-primary); --btn-fg: #fff; --btn-bd: transparent; --btn-bg-hover: var(--btn-primary-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1.125rem; border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd);
  font-weight: 700; font-size: var(--fs-s); line-height: 1; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--l { height: 3.25rem; padding: 0 1.5rem; font-size: var(--fs-m); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--fg-strong); --btn-bd: currentColor; --btn-bg-hover: var(--surface-2); }
.btn--outline-filled { --btn-bg: var(--surface-2); --btn-fg: var(--fg-strong); --btn-bd: currentColor; --btn-bg-hover: var(--surface-2); }
.tone-dark-text .btn--outline-filled { --btn-bg: rgba(255,255,255,.24); --btn-bg-hover: rgba(255,255,255,.4); }
.tone-light-text .btn--outline-filled { --btn-bg: rgba(0,0,0,.16); --btn-bg-hover: rgba(0,0,0,.3); }
.btn--icon { width: 2.5rem; padding: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

.badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px;
  font-size: 0.625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-2); color: #fff; vertical-align: middle;
}
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-green); flex: none; box-shadow: 0 0 0 0 rgba(1,223,151,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(1,223,151,0); } 100% { box-shadow: 0 0 0 0 rgba(1,223,151,0); } }

/* Karte – großer Radius, flach */
.card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--surface); border-radius: var(--radius-l); color: var(--fg);
  transition: transform .3s var(--ease);
}
a.card:hover { transform: translateY(-4px); }
.card--muted { background: var(--surface-2); }
.card h3 { font-size: var(--h-s); }
.card__corner-icon { position: absolute; top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); right: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); width: 28px; height: 28px; color: var(--fg-strong); }
.card .btn-row, .card > .btn { margin-top: auto; padding-top: 1.25rem; }

.icon-list { display: grid; gap: .875rem; }
.icon-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--fg-strong); font-weight: 500; line-height: 1.4; }
.icon-list svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--fg); }

/* 6 · Header -------------------------------------------------------------- */
/* Standard: hell (über hellen Sections). .header--dark wird per JS gesetzt. */
.header {
  --h-fg: var(--ink); --h-bg: rgba(235,239,243,.8); --h-hover: rgba(0,0,0,.06);
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  color: var(--h-fg);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.header--dark { --h-fg: #fff; --h-bg: rgba(20,21,22,.72); --h-hover: rgba(255,255,255,.1); }
.header.is-scrolled { background: var(--h-bg); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: 0 4px 8px rgba(0,0,0,.1); }
.header__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.header ~ main > :first-child { padding-top: calc(var(--header-h) + clamp(2rem, 1.5rem + 2.5vw, 4rem)); }

.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1; flex: none; color: inherit; }
.logo__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent-green); align-self: flex-end; margin: 0 0 5px -5px; }

.nav { display: none; flex: 1; justify-content: center; }
.nav__list { display: flex; gap: clamp(.25rem, 1vw, .9rem); }
.nav__trigger, .nav__link { display: inline-flex; align-items: center; height: 40px; padding: 0 .75rem; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-s); transition: background-color .15s var(--ease); }
.nav__trigger:hover, .nav__link:hover, .nav__item.is-open .nav__trigger { background: var(--h-hover); }

.header__tools, .header__cta { display: none; align-items: center; gap: 6px; margin-left: auto; }
.header__tools a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background-color .15s var(--ease); }
.header__tools a:hover { background: var(--h-hover); }
.header__tools svg { width: 20px; height: 20px; }
.header__cta { gap: 10px; }
.header__cta .btn--outline { --btn-fg: var(--h-fg); --btn-bg-hover: var(--h-hover); }

.nav-toggle { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.nav-toggle:hover { background: var(--h-hover); }
.nav-toggle svg { width: 24px; height: 24px; }

@media (min-width: 1080px) {
  .nav { display: flex; }
  .header__tools { display: flex; margin-left: 0; }
  .nav-toggle { display: none; }
  /* Nach dem Scrollen: Navigation weicht den CTA-Buttons (wie im Original) */
  .header.is-scrolled.is-compact .nav, .header.is-scrolled.is-compact .header__tools { display: none; }
  .header.is-scrolled.is-compact .header__cta { display: flex; }
}

/* 7 · Mega-Menü – schwebendes dunkles Panel ------------------------------ */
@media (min-width: 1080px) {
  .mega {
    position: absolute; left: 50%; top: calc(var(--header-h) - 8px); width: min(calc(100% - 2 * var(--gutter)), var(--container));
    translate: -50% 0;
    background: var(--ink); color: rgba(255,255,255,.64); border-radius: var(--radius-l);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mega__inner { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2rem 0; }
  .mega__col { padding: 0 2.25rem; }
  .mega__col + .mega__col { border-left: 1px solid rgba(255,255,255,.12); }
  .mega__col h4 { font-size: var(--fs-xs); font-weight: 700; color: #fff; margin: 0 0 1.25rem; letter-spacing: 0; }
  .mega__link { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; padding: 8px 10px; margin: 0 -10px 6px; border-radius: 12px; transition: background-color .15s var(--ease); }
  .mega__link:hover { background: rgba(255,255,255,.07); }
  .mega__link svg { width: 18px; height: 18px; color: #fff; margin-top: 1px; }
  .mega__link strong { color: #fff; font-weight: 700; font-size: var(--fs-s); display: flex; gap: 6px; align-items: center; }
  .mega__link span { grid-column: 2; font-size: var(--fs-xs); line-height: 1.5; }
}
@media (max-width: 1079px) { .mega { display: none; } }

/* 8 · Mobile Navigation --------------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200; background: var(--black); color: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.mobile-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--gutter); flex: none; }
.mobile-nav__head .nav-toggle:hover { background: rgba(255,255,255,.1); }
.mobile-nav__body { overflow-y: auto; padding: .5rem var(--gutter) 2rem; flex: 1; }
.mobile-nav__group { border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-nav__group > button, .mobile-nav__group > a { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1.125rem 0; font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em; text-align: left; }
.mobile-nav__group > button svg { width: 22px; height: 22px; transition: transform .2s var(--ease); }
.mobile-nav__group.is-open > button svg { transform: rotate(45deg); }
.mobile-nav__panel { display: none; padding-bottom: 1rem; }
.mobile-nav__group.is-open .mobile-nav__panel { display: grid; gap: 2px; }
.mobile-nav__panel a { padding: 10px 0; color: rgba(255,255,255,.64); font-weight: 500; }
.mobile-nav__panel a:hover { color: #fff; }
.mobile-nav__foot { display: grid; gap: 10px; padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); flex: none; }
.mobile-nav__foot .btn { height: 3rem; }
.mobile-nav__foot .btn--outline { --btn-fg: #fff; --btn-bg-hover: rgba(255,255,255,.1); }
@media (min-width: 1080px) { .mobile-nav { display: none; } }

/* 9 · Footer (dunkel) ----------------------------------------------------- */
.footer { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem; font-size: var(--fs-s); line-height: 1.9; }
.footer__grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer h4 { font-family: var(--font-sans); font-size: var(--fs-s); font-weight: 700; color: #fff; letter-spacing: 0; margin-bottom: .5rem; }
.footer__col h4:not(:first-child) { margin-top: 2rem; }
.footer__col a { transition: color .15s var(--ease); }
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__col .footer__strong { display: inline-block; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-top: 1.25rem; }
.footer__contact { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__contact { grid-column: auto; } }
.footer__status { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.footer__contact p { margin-top: 1.5rem; }
.footer__contact p a { color: #fff; font-weight: 700; }
.footer__contact p a.u { text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.footer__bottom .logo { font-size: 1.375rem; color: #fff; }
.footer__social { display: flex; gap: 8px; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: background-color .15s var(--ease); }
.footer__social a:hover { background: var(--brand); }
.footer__social svg { width: 18px; height: 18px; }

/* 10 · Sections ----------------------------------------------------------- */
/* Hero mit Lichtkegel */
.hero { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-bottom: var(--section-y); }
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -30%; width: min(1400px, 160%); aspect-ratio: 1.3; translate: -50% 0;
  background:
    radial-gradient(closest-side at 50% 12%, var(--glow-1), transparent 45%),
    radial-gradient(closest-side at 50% 30%, var(--glow-2), transparent 80%);
  filter: blur(20px); opacity: .9;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 85%); mask-image: linear-gradient(#000 40%, transparent 85%);
}
.hero h1 { font-size: var(--h-xl); line-height: 1.04; max-width: 16ch; margin-inline: auto; }
.hero .lead { max-width: 44ch; margin: 1.5rem auto 0; }
.hero .btn-row { margin-top: 2.25rem; justify-content: center; }
.hero__teasers { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); text-align: left; }

/* Teaser-Karte (Hero) */
.teaser { min-height: 190px; display: grid; grid-template-columns: 1fr; justify-items: start; align-items: end; gap: 1rem; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--radius-l); overflow: hidden; position: relative; isolation: isolate; }
.teaser h2 { font-size: var(--h-s); line-height: 1.12; padding-right: 2.5rem; }
@media (min-width: 1200px) { .teaser { grid-template-columns: 1fr auto; } }
.teaser .kicker { margin-bottom: .5rem; }
.teaser__icon { position: absolute; top: 1.5rem; right: 1.75rem; width: 30px; height: 30px; color: var(--fg-strong); }
/* Private-AI-Kachel: gedeckter Ton aus dem jeweiligen Farbvorschlag – gleiche Helligkeit/Sättigung wie das Salbeigrün daneben */
.teaser--violet { background: var(--brand-gradient); } /* Private AI: Markenverlauf (D: Nachtblau → Petrol → Safran), wie beim ersten Stand von Palette D */
.teaser--peach { background: #eaa488; }
.teaser--sage { background: var(--teaser-2, #a3b9a8); } /* myfactory: D = Safran #E9C46A, wie beim ersten Stand von Palette D */

/* Terminal */
.terminal { background: #0c0d19; border-radius: var(--radius-m); overflow: hidden; font-family: var(--font-mono); font-size: .875rem; color: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(255,255,255,.06); min-width: 0; }
.terminal__bar { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.terminal__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.terminal__body { padding: 20px; min-height: 180px; line-height: 1.8; overflow-x: auto; white-space: nowrap; }
.terminal__body .ok { color: var(--accent-green); }
.terminal__body .dim { color: rgba(255,255,255,.45); }
.terminal__cursor { display: inline-block; width: 8px; height: 1.1em; vertical-align: text-bottom; background: #fff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Feature-Spalten (Digital souverän) */
.features { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .features { grid-template-columns: 1fr 1fr 1fr; } }
.features h2 { font-size: var(--h-m); }
.feature svg { width: 28px; height: 28px; color: var(--fg-strong); margin-bottom: 1rem; }
.feature h3 { font-size: var(--fs-m); font-family: var(--font-sans); font-weight: 700; margin-bottom: .5rem; letter-spacing: 0; }

/* Tab-Slider */
.tabs__list { display: flex; gap: 4px; padding: 4px; margin: 0 auto clamp(1rem, .75rem + .75vw, 1.5rem); width: max-content; max-width: 100%; overflow-x: auto; background: rgba(0,0,0,.08); border-radius: var(--radius-pill); scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { height: 44px; padding: 0 1rem; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-s); color: var(--ink); white-space: nowrap; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.tabs__tab[aria-selected="true"] { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.tabs__panel { display: grid; gap: clamp(16px, 2vw, 32px); align-items: center; padding: clamp(1.75rem, 1rem + 3vw, 4rem); border-radius: var(--radius-l); min-height: 440px; }
.tabs__panel[hidden] { display: none; }
@media (min-width: 900px) { .tabs__panel { grid-template-columns: 1.1fr 1fr; } }
.tabs__panel h2 { font-size: var(--h-m); }
.tabs__panel p { margin-top: 1.25rem; font-size: var(--fs-l); max-width: 38ch; }
.tabs__panel .btn-row { margin-top: 2rem; }
.tabs__visual { aspect-ratio: 4 / 3; border-radius: var(--radius-m); background: rgba(255,255,255,.35); display: grid; place-items: center; overflow: hidden; }
.tabs__visual svg { width: 55%; color: var(--ink); opacity: .75; }

/* Preiskarte */
.price-card { gap: 0; min-height: 100%; }
.price-card__from { font-size: var(--h-xs); font-weight: 700; color: var(--fg-strong); }
.price-card__note { font-size: var(--fs-xs); }
.price-card h3 { font-size: var(--h-m); margin: 2.5rem 0 1.5rem; }
.price-card__sub { font-weight: 700; color: var(--fg-strong); font-size: var(--fs-s); margin-bottom: 1.5rem; }
.price-card .icon-list li { font-size: var(--fs-s); }

/* Kennzahl-Kacheln */
.tile { position: relative; overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 1 / 1.05; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.tile__icon { position: absolute; top: 1.5rem; left: 1.5rem; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); }
.tile__icon svg { width: 28px; height: 28px; }
.tile strong { font-family: var(--font-head); font-size: var(--h-m); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg-strong); }
.tile span { font-size: var(--fs-s); }
.tile::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.35), transparent 55%); }

/* Kontakt-Spotlight */
.spotlight { background: var(--brand-soft); }
.spotlight__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .spotlight__inner { grid-template-columns: 1.2fr 1fr; } }
.spotlight h2 { font-size: var(--h-l); }
.spotlight p { margin-top: 1rem; font-size: var(--fs-l); max-width: 44ch; }
.spotlight .btn-row { margin-top: 2rem; }
.spotlight__person { justify-self: center; width: min(100%, 380px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.spotlight__person svg { width: 45%; color: var(--brand-2); opacity: .6; }
/* Hauptbutton im Kontaktbereich im Markenverlauf */


/* Page-Hero für Unterseiten */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: -20%; top: -40%; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, var(--glow-3), transparent); filter: blur(30px); }
.page-hero h1 { font-size: var(--h-l); max-width: 18ch; }
.page-hero .lead { margin-top: 1.25rem; max-width: 56ch; }
.page-hero .btn-row { margin-top: 2rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-s); margin-bottom: 1.5rem; }
.breadcrumb a:hover { color: var(--fg-strong); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .5; }

/* Prose für Textseiten */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: var(--h-s); margin-top: 2.25em; }
.prose h3 { font-size: var(--h-xs); margin-top: 1.75em; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }

/* 11 · Utilities ---------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }
.mt-l { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.bg-violet { background: var(--tint-violet); } .bg-lilac { background: var(--tint-lilac); } .bg-lavender { background: var(--tint-lavender); }
.bg-pink { background: var(--tint-pink); } .bg-peach { background: var(--tint-peach); } .bg-sage { background: var(--tint-sage); }
.bg-moss { background: var(--tint-moss); } .bg-teal { background: var(--tint-teal); } .bg-mint { background: var(--tint-mint); } .bg-black { background: var(--black); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

/* 12 · Leistungen ---------------------------------------------------------- */
/* Übersicht aller Leistungsbereiche */
.service-group { gap: 0; }
.service-group .kicker { margin-bottom: 1rem; }
.service-list li + li { border-top: 1px solid var(--line); }
.service-list a { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 14px 0; }
.service-list svg { width: 20px; height: 20px; color: var(--fg-strong); margin-top: 2px; }
.service-list strong { color: var(--fg-strong); font-weight: 700; font-size: var(--fs-m); line-height: 1.3; transition: color .15s var(--ease); }
.service-list span { grid-column: 2; font-size: var(--fs-s); line-height: 1.45; margin-top: 2px; }
.service-list a:hover strong { color: var(--brand); }

/* Hinweis-Box im Mega-Menü */
@media (min-width: 1080px) {
  .mega__promo { margin: 0 1.5rem 0 1.25rem; padding: 1.75rem; border-radius: var(--radius-m); background: rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
  .mega__promo h5 { font-size: var(--h-xs); color: #fff; line-height: 1.2; }
  .mega__promo p { font-size: var(--fs-s); line-height: 1.5; }
  .mega__promo .btn { margin-top: auto; }
}

/* Navigation einzeilig halten; bei mittlerer Breite Icons ausblenden */
.nav__trigger, .nav__link { white-space: nowrap; }
@media (min-width: 1080px) and (max-width: 1339px) {
  .header__tools { display: none; }
  .nav__trigger, .nav__link { padding: 0 .625rem; }
}

/* 13 · Kontakt & Formulare ------------------------------------------------- */
.contact { display: grid; gap: clamp(16px, 2vw, 24px); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: 1fr 1.5fr; } }
.contact__info { display: grid; gap: clamp(16px, 2vw, 24px); }
.contact-card { gap: .25rem; }
.contact-card .kicker { margin-bottom: .75rem; }
.contact-card strong { color: var(--fg-strong); font-size: var(--h-xs); font-weight: 700; overflow-wrap: anywhere; }
.form { gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; font-size: var(--fs-s); font-weight: 700; color: var(--fg-strong); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-weight: 400; font-size: var(--fs-m); color: var(--ink);
  background: var(--grey-50); border: 2px solid transparent; border-radius: var(--radius-s);
  padding: .75rem 1rem; transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--grey-100); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-s); line-height: 1.5; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.check a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.form__privacy { font-size: var(--fs-s); line-height: 1.5; }
.form__privacy a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.form .btn-row { padding-top: 0; }
.form__note { font-size: var(--fs-s); padding: .75rem 1rem; border-radius: var(--radius-s); background: var(--grey-50); color: var(--fg-strong); }

/* 14 · Logo --------------------------------------------------------------- */
.logo svg { display: block; height: var(--logo-h, 22px); width: auto; overflow: visible; } /* runde Buchstaben/Icon nicht an der Kante beschneiden */
.header .logo, .mobile-nav .logo { --logo-h: clamp(18px, 1.2vw + 8px, 24px); }
@supports (height: round(1px, 2px)) { .header .logo, .mobile-nav .logo { --logo-h: round(clamp(18px, 1.2vw + 8px, 24px), 2px); } } /* gerade Pixelhöhe → Logo sitzt auf ganzen Pixeln, keine halb angeschnittene Unterkante */
.logo--claim { --logo-h: 36px; }
/* Schriftzug auf dunklem Grund in gebrochenem Weiß (Icon behält den Verlauf) */
.logo { --logo-cut: #eef1f4; } /* Schnitt im Icon auf hellem Grund grau */
.header--dark .logo, .mobile-nav .logo, .footer .logo, .cs-dark .logo { color: #e4e5ec; --logo-cut: transparent; }
/* Header unter Systemleisten (z. B. iPhone-Notch) */
.header { top: env(safe-area-inset-top, 0px); }
/* Tablet: bei genau drei Karten die dritte über die volle Breite, statt allein in der Reihe */
@media (min-width: 680px) and (max-width: 1023px) {
  .grid--3:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; }
}


/* Hero: gedrehte Headline mit Marker-Hervorhebung (im Logo-Verlauf) */
.hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }
.hero__accent {
  font-style: normal; display: inline-block; color: #fff;
  line-height: 1; padding: .06em .2em .17em; margin: .2em 0 .05em; border-radius: 12px; /* unten mehr Luft für die Unterlänge des „g“ in „gelöst!“ */
  background: var(--brand-gradient);
}
/* Slogan: schräg im Verlauf */
.hero__slogan { margin-top: 1.75rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem); letter-spacing: -0.01em; line-height: 1.2; } /* hervorgehoben, in Anführungszeichen */
.hero__slogan span { display: inline-block; color: var(--teaser-2, #a3b9a8); } /* Schrift in der Farbe der myfactory-Kachel */

/* Kennzahl-Kacheln: Schrift passt sich der Kachelbreite an */
.tile { container-type: inline-size; }
.tile strong { font-size: clamp(1.5rem, 14cqi, 2.5rem); overflow-wrap: anywhere; hyphens: auto; }
.tile span { margin-top: .35rem; }

/* Footer unten: Logo links, Slogan rechts · darunter Copyright und Social */
.footer__bottom { align-items: flex-start; }
.footer__slogan { font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; line-height: 1; }
.footer__slogan span { display: inline-block; color: var(--brand); } /* einfarbig */
/* Mobil/Tablet: untereinander, linksbündig */
.footer__bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer__claim { display: grid; gap: .5rem; }
.footer__copy { font-size: var(--fs-xs); line-height: 1.5; }
/* Desktop: Logo links, rechts Slogan (oben bündig) und Copyright (unten bündig) */
@media (min-width: 1024px) {
  .footer__bottom { flex-direction: row; align-items: stretch; justify-content: space-between; }
  .logo--claim { --logo-h: 44px; }
  .footer__claim { display: flex; flex-direction: column; justify-content: flex-end; text-align: right; gap: .35rem; } /* Slogan + Copyright als Block, unten bündig mit dem Logo */
  .footer__copy { line-height: 1; margin-bottom: var(--copy-shift, -0.18em); } /* Grundlinie auf „Services GmbH“ */
}

/* Unternehmensseite */
.page-hero .hero__slogan { margin-top: 1.25rem; }
.dc-card__name { font-family: var(--font-head); font-size: var(--h-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; padding-bottom: .08em; color: var(--btn-primary, #264653); width: max-content; }
.dc-card .icon-list { margin-top: .75rem; }
.dc-card b { color: var(--fg-strong); font-weight: 700; margin-left: .25em; }

/* Statusseite (z. B. Kundenportal im Aufbau) */
.status-card { max-width: 720px; gap: 1rem; }
.status-card h2 { font-size: var(--h-m); }
.status-card .icon-list a { color: var(--fg-strong); font-weight: 600; }
.status-card .icon-list a:hover { color: var(--brand); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill); background: #fff4e6; color: #9a5b00; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; animation: pulse-amber 2s infinite; }
@keyframes pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); } 70% { box-shadow: 0 0 0 7px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

/* Schritt-Karten (Fernwartung) */
.steps { list-style: none; padding: 0; margin: 0; }
.steps__no { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #a3b9a8; color: var(--ink); font-weight: 800; margin-bottom: .75rem; } /* flach in Salbei */
.page-hero .btn svg { width: 18px; height: 18px; }

.os-links { margin-top: 1rem; font-size: var(--fs-s); }
.os-links a { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 3px; }
.os-links a[aria-current] { font-weight: 700; }
.os-note { margin-top: .75rem; font-size: var(--fs-s); color: #fbbf24; }

/* Hervorgehobene Kennzahl-Karte (z. B. 25 Jahre Erfahrung) */
.card--highlight { background: var(--brand-gradient); color: rgba(255,255,255,.85); --fg-strong: #fff; }
.card__big { font-family: var(--font-head); font-size: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .9; color: #fff; }
.card--highlight h3 { margin-top: -.25rem; }

/* ==========================================================================
   Farbvorschläge (Palette D9ED92 … 184E77) – aktiv über <html data-palette="a|b|c">
   ========================================================================== */
/* B · Verlauf: das volle Spektrum von Hellgrün bis Nachtblau */
:root[data-palette="b"] {
  --logo-icon: #34a0a4;
  --brand: #184e77; --brand-2: #34a0a4; --brand-3: #99d98c;
  --brand-hover: #1e6091; --btn-primary: #184e77; --btn-primary-hover: #1e6091;
  --brand-gradient: linear-gradient(135deg, #1e6091 0%, #34a0a4 50%, #99d98c 100%);
  --brand-gradient-text: linear-gradient(135deg, #76c893 0%, #d9ed92 100%);
  --logo-1: #1e6091; --logo-2: #34a0a4; --logo-3: #99d98c;
  --glow-1: rgba(153,217,140,.45); --glow-2: rgba(52,160,164,.7); --glow-3: rgba(52,160,164,.45);
  --accent-green: #99d98c; --brand-soft: #eef6e4; --teaser-2: #b5e48c;
  --tint-sage: #d9ed92; --tint-lavender: #b5e48c; --tint-lilac: #99d98c; --tint-peach: #76c893;
  --tint-moss: #52b69a; --tint-teal: #1e6091;
}
:root[data-palette] .hero h1 .hero__accent { color: #fff; }

/* Umschalter für die Farbvorschläge (nur zur Abstimmung) */
/* Marker um „läuft“: dunkler Teil des Verlaufs, damit Weiß gut lesbar bleibt */
:root[data-palette="b"] .hero__accent { background: linear-gradient(135deg, #1e6091, #34a0a4); }

/* ==========================================================================
   Farbvorschläge (Palette 264653 · 2A9D8F · E9C46A · F4A261 · E76F51)
   ========================================================================== */
/* D · Küste: Petrol und Nachtblau, Safran als Akzent */
:root[data-palette="d"] {
  --logo-icon: #3ba88a;
  --brand: #3ba88a; --brand-2: #3ba88a; --brand-3: #e9c46a;
  --brand-hover: #3ba88a; --btn-primary: #264653; --btn-primary-hover: #2f5a6a;
  --brand-gradient: linear-gradient(135deg, #264653 0%, #3ba88a 55%, #e9c46a 100%);
  --brand-gradient-text: linear-gradient(135deg, #3ba88a 0%, #e9c46a 100%);
  --logo-1: #264653; --logo-2: #3ba88a; --logo-3: #e9c46a;
  --glow-1: rgba(233,196,106,.4); --glow-2: rgba(59,168,138,.7); --glow-3: rgba(59,168,138,.45);
  --accent-green: #3ba88a; --brand-soft: #e8f3f1; --teaser-2: #e9c46a;
  --tint-sage: #e9c46a; --tint-lavender: #cfe8e4; --tint-lilac: #f4a261; --tint-peach: #f6d5b8;
  --tint-moss: #3ba88a; --tint-teal: #264653;
}
:root[data-palette="d"] .hero__accent { background: linear-gradient(135deg, #264653, #3ba88a); }

/* ==========================================================================
   Farbvorschläge (Palette E63946 · F1FAEE · A8DADC · 457B9D · 1D3557)
   ========================================================================== */
/* G · Marine: Stahlblau und Navy, Eisblau als Licht */
:root[data-palette="g"] {
  --logo-icon: #457b9d;
  --brand: #457b9d; --brand-2: #457b9d; --brand-3: #a8dadc;
  --brand-hover: #5a8fb0; --btn-primary: #457b9d; --btn-primary-hover: #5a8fb0;
  --brand-gradient: linear-gradient(135deg, #1d3557 0%, #457b9d 55%, #a8dadc 100%);
  --brand-gradient-text: linear-gradient(135deg, #a8dadc 0%, #f1faee 100%);
  --logo-1: #1d3557; --logo-2: #457b9d; --logo-3: #a8dadc;
  --glow-1: rgba(168,218,220,.4); --glow-2: rgba(69,123,157,.7); --glow-3: rgba(69,123,157,.45);
  --accent-green: #a8dadc; --brand-soft: #f1faee; --teaser-2: #a8dadc;
  --tint-sage: #a8dadc; --tint-lavender: #d9eef0; --tint-lilac: #c6dbe8; --tint-peach: #f1faee;
  --tint-moss: #457b9d; --tint-teal: #1d3557;
}
:root[data-palette="g"] .hero__accent { background: linear-gradient(135deg, #1d3557, #457b9d); }
/* I · Klassik: rotes Logo als Signet, Oberfläche in Navy und Eisblau */
:root[data-palette="i"] {
  --logo-icon: #e63946;
  --brand: #457b9d; --brand-2: #e63946; --brand-3: #a8dadc;
  --brand-hover: #457b9d; --btn-primary: #1d3557; --btn-primary-hover: #457b9d;
  --brand-gradient: linear-gradient(135deg, #1d3557 0%, #457b9d 100%);
  --brand-gradient-text: linear-gradient(135deg, #a8dadc 0%, #f1faee 100%);
  --logo-1: #e63946; --logo-2: #ec5a64; --logo-3: #f07f86;
  --glow-1: rgba(168,218,220,.35); --glow-2: rgba(69,123,157,.65); --glow-3: rgba(69,123,157,.45);
  --accent-green: #a8dadc; --brand-soft: #f1faee; --teaser-2: #a8dadc;
  --tint-sage: #d9eef0; --tint-lavender: #a8dadc; --tint-lilac: #f6c9cc; --tint-peach: #f1faee;
  --tint-moss: #457b9d; --tint-teal: #1d3557;
}
:root[data-palette="i"] .hero__accent { background: linear-gradient(135deg, #c92d3a, #e63946); }
:root[data-palette="i"] .header .btn:not(.btn--outline):not(.btn--outline-filled), :root[data-palette="i"] .hero .btn:not(.btn--outline):not(.btn--outline-filled), :root[data-palette="i"] .cs-dark .btn:not(.btn--outline):not(.btn--outline-filled) { --btn-bg: #457b9d; --btn-bg-hover: #5a8fb0; }

/* Fester Salbeiton (unabhängig vom Farbvorschlag) */
.bg-salbei { background: #a3b9a8; } .bg-safran { background: var(--brand-3); }

/* D: Buttons auf dunklem Grund in Petrol, damit sie sich abheben */
:root[data-palette="d"] .header .btn:not(.btn--outline):not(.btn--outline-filled),
:root[data-palette="d"] .hero .btn:not(.btn--outline):not(.btn--outline-filled),
:root[data-palette="d"] .cs-dark .btn:not(.btn--outline):not(.btn--outline-filled) { --btn-bg: #3ba88a; --btn-bg-hover: #4dba9c; --btn-fg: var(--ink); } /* grüne Buttons mit dunkler Schrift */

/* Partner-Logo in einer Kachel (einfarbig in Schriftfarbe) */
.teaser__brand { position: absolute; top: 1.5rem; right: 1.75rem; height: 30px; width: auto; color: var(--fg-strong); }

/* Startbare Anwendungen (Managed Kubernetes) */
.app-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 560px) { .app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .app-grid { grid-template-columns: repeat(4, 1fr); } }
.app-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-content: start; padding: 1.25rem; border-radius: var(--radius-m); background: var(--surface); }
.app-card__mark { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: var(--ink); background: #a3b9a8; } /* flach in Salbei, Logo dunkel */
.app-card h3 { font-size: var(--fs-m); font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; align-self: center; }
.app-card p { font-size: var(--fs-s); line-height: 1.45; }
.app-card dl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.app-card dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.app-card dd { margin: 0; font-weight: 700; color: var(--fg-strong); }
.app-card__mark svg { width: 22px; height: 22px; }

/* Referenzen */
.ref-card { gap: .6rem; }
.ref-card h3 { font-size: var(--h-s); }
.ref-card p { font-size: var(--fs-s); }
.badge--placeholder { align-self: flex-start; background: #fff4e6; color: #9a5b00; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: .75rem; }
.tag { font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--grey-50); color: var(--ink); }
.logo-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
.logo-tile { aspect-ratio: 5 / 2; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--surface); color: var(--fg); font-weight: 600; font-size: var(--fs-s); border: 1px dashed var(--line); }

/* Einheitliche Abstände: Kontaktbereich beginnt oben bündig (nicht mittig zum großen Kreis) */
@media (min-width: 900px) { .spotlight__inner { align-items: start; } .spotlight__person { width: min(100%, 320px); } }

/* Ökosystem-Karten: Akzentfarbe je Karte (ohne Farbstreifen), Punktraster, Wasserzeichen-Icon */
.eco { --eco-1: var(--brand); --eco-2: var(--brand-3); --eco-3: var(--tint-lilac); --eco-4: var(--brand-2); }
:root[data-palette="d"] .eco { --eco-1: #3ba88a; --eco-2: #e9c46a; --eco-3: #f4a261; --eco-4: #e76f51; }
.eco > :nth-child(1) { --accent: var(--eco-1); }
.eco > :nth-child(2) { --accent: var(--eco-2); }
.eco > :nth-child(3) { --accent: var(--eco-3); }
.eco > :nth-child(4) { --accent: var(--eco-4); }
.card--eco { overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
/* Flach im Salbei der Tab-Karte „Deine eigene Cloud“ */
.eco > .card--eco { background: #a3b9a8; }
.card--eco { box-shadow: none; }
.card--eco::after { background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.2px); }
a.card--eco:hover { transform: none; }
.card--eco::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 60%); mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 60%);
}
.eco__mark { position: absolute; right: -18px; bottom: -18px; z-index: -1; width: 132px; height: 132px; color: var(--fg-strong); opacity: .08; }

/* Leistungsseiten: großes Wasserzeichen-Icon der Leistung rechts im Kopfbereich */
.page-hero__inner { position: relative; isolation: isolate; }
/* leicht schräg, bleibt aber innerhalb des Inhaltsbereichs – nie unter dem Header oder über dem Rand */
.page-hero__mark { position: absolute; z-index: -1; pointer-events: none; right: calc(var(--gutter) + 1.5rem); top: 50%; transform: translateY(-50%) rotate(-4deg); height: min(86%, 320px); width: auto; max-width: 36%; color: #fff; opacity: .07; }
@media (max-width: 759px) { .page-hero__mark { height: min(70%, 220px); max-width: 55%; top: 40%; opacity: .05; } }

/* Unternehmen › Rechenzentren: Foto als breites Band, darunter Greven | Oldenburg in zwei gleichen Spalten */
.dc-layout { display: grid; gap: var(--grid-gap, 1.5rem); }
.dc-photo { margin: 0; border-radius: var(--radius-l); overflow: hidden; background: #1c2a33; aspect-ratio: 4 / 3; }
.dc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 700px) { .dc-photo { aspect-ratio: 21 / 8; } }
.dc-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: stretch; }
.dc-facts { display: grid; grid-template-columns: minmax(8.5rem, auto) 1fr; gap: .6rem 1.25rem; margin: .75rem 0 0; }
.dc-facts dt { font-size: var(--fs-s); color: var(--fg); }
.dc-facts dd { margin: 0; font-weight: 700; color: var(--fg-strong); line-height: 1.4; }
@media (max-width: 480px) { .dc-facts { grid-template-columns: 1fr; gap: .15rem; } .dc-facts dd { margin-bottom: .6rem; } }

/* AGB: Inhaltsverzeichnis und Ziffern */
.agb__toc { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--radius-m); background: var(--surface); }
.agb__toc h2 { margin-top: 0; font-size: var(--h-xs); }
.agb__toc > ol { margin-top: .75rem; display: grid; gap: .6rem; list-style: none; padding: 0; }
.agb__toc > ol > li > a { font-weight: 700; }
.agb__toc ol ol { margin-top: .35rem; padding-left: 1rem; display: grid; gap: .15rem; list-style: none; font-size: var(--fs-s); }
.agb__toc a { color: var(--fg-strong); text-decoration: none; }
.agb__toc a:hover { text-decoration: underline; }
.agb h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.agb h3 { scroll-margin-top: calc(var(--header-h) + 16px); }
.agb__no { font-weight: 700; color: var(--fg-strong); margin-right: .35em; }
.agb__foot { margin-top: 3em; font-size: var(--fs-s); }

/* Startseite: IT-Betreuung vor Ort – Regionskarte (flach, Grün) */
.region-card { position: relative; display: grid; gap: .75rem; padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-radius: var(--radius-l); background: var(--brand); } /* Grün wie der Button „Mehr erfahren“, flach */
.region-card__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); margin-bottom: .5rem; }
.region-card__icon svg { width: 28px; height: 28px; }
.region-card .kicker { margin-bottom: 0; }
.region-card__name { font-family: var(--font-head); font-size: var(--h-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.region-card__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.region-card__list li { padding: .45rem .9rem; border-radius: var(--radius-pill); background: #fff; color: var(--ink); font-size: var(--fs-s); font-weight: 700; }
.region-card__note { font-size: var(--fs-s); margin-top: .5rem; }
.region-card__label { display: block; margin-top: .75rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-strong); }
.region-card__label + .region-card__list { margin-top: 0; }

/* Barrierefreiheit: Link im Footer, Panel als kleiner Dialog unten rechts */
.footer__a11y { font: inherit; color: inherit; padding: 0; text-align: left; cursor: pointer; }
.footer__a11y:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.a11y { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 310; }
.a11y__panel { width: min(320px, calc(100vw - 32px)); padding: 1rem; border-radius: var(--radius-m); background: #fff; color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.3); display: grid; gap: .25rem; }
.a11y__panel[hidden] { display: none; }
.a11y__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.a11y__title { font-size: var(--fs-m); }
.a11y__close { width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
.a11y__close:hover { background: rgba(0,0,0,.06); }
.a11y__read { justify-self: start; height: 40px; padding: 0 1rem; border-radius: var(--radius-pill); background: var(--btn-primary); color: #fff; font-weight: 700; font-size: var(--fs-s); }
.a11y__read[aria-pressed="true"] { background: var(--brand); color: var(--ink); }
.a11y__hint { font-size: var(--fs-xs); color: rgba(0,0,0,.6); margin: .1rem 0 .4rem; }
.a11y__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: var(--fs-s); font-weight: 600; cursor: pointer; }
.a11y__opt input { width: 20px; height: 20px; accent-color: var(--btn-primary); flex: none; }
.a11y__reset { justify-self: start; margin-top: .25rem; font-size: var(--fs-s); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.a11y :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Wirkung der Optionen */
html.a11y-large { font-size: 118.75%; }
html.a11y-contrast .cs-dark, html.a11y-contrast .header--dark, html.a11y-contrast .tone-light-text { --fg: #fff; }
html.a11y-contrast .cs-light, html.a11y-contrast .cs-white, html.a11y-contrast .tone-dark-text { --fg: #000; --fg-strong: #000; }
html.a11y-contrast .cs-dark { --bg: #000; }
html.a11y-contrast .card, html.a11y-contrast .teaser, html.a11y-contrast .tabs__panel, html.a11y-contrast .region-card, html.a11y-contrast .app-card { box-shadow: inset 0 0 0 2px currentColor; }
html.a11y-contrast :focus-visible { outline-width: 3px; }
html.a11y-links a:not(.btn):not(.logo):not(.card) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
html.a11y-links a.btn { outline: 2px dashed currentColor; outline-offset: 2px; }
html.a11y-spacing body { line-height: 1.85; letter-spacing: .03em; word-spacing: .12em; }
html.a11y-spacing p, html.a11y-spacing li { line-height: 1.85; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-motion .reveal { opacity: 1; transform: none; }

/* Hero-Slider (wie im Portal): eine breite Karte im Markenverlauf, Wechsel alle 5 s, Punkte unten */
.hslider { position: relative; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); text-align: left; border-radius: var(--radius-l); background: var(--brand-gradient); overflow: hidden; isolation: isolate; }
.hslider__track { display: grid; }
.hslide { grid-area: 1 / 1; display: grid; align-content: center; justify-items: start; gap: .35rem; min-height: clamp(240px, 22vw, 280px); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(3.25rem, 3rem + 1vw, 3.75rem); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.hslide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.hslide .kicker { margin-bottom: .25rem; }
.hslide h2 { font-size: var(--h-m); font-weight: 700; padding-right: 3rem; }
.hslide p { max-width: 56ch; font-size: var(--fs-m); }
.hslide .btn { margin-top: 1rem; }
.hslide__icon { position: absolute; top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); right: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); width: 34px; height: 34px; color: #fff; }
.hslider__nav { position: absolute; left: 0; right: 0; bottom: 1.1rem; display: flex; justify-content: center; align-items: center; gap: .75rem; z-index: 2; }
.hslider__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.hslider__dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.4); transition: width .3s var(--ease), background-color .3s var(--ease); }
.hslider__dot:hover { background: rgba(255,255,255,.7); }
.hslider__dot.is-active { width: 22px; background: #fff; }
.hslider__pause { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.8); }
.hslider__pause:hover { color: #fff; background: rgba(255,255,255,.15); }
.hslider__pause svg { width: 12px; height: 12px; }
.hslider:focus-within .hslide.is-active .btn { outline-offset: 3px; }
@media (max-width: 599px) { .hslider__dot { width: 7px; height: 7px; } .hslider__dot.is-active { width: 16px; } .hslide h2 { font-size: var(--h-s); } }
html.a11y-motion .hslide { transition: none; }
/* Slider links neben der myfactory-Kachel */
.hero__teasers .hslider { margin-top: 0; }
.hero__teasers .hslide { min-height: 100%; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem) 3.25rem; }
.hero__teasers .hslide h2 { font-size: var(--h-s); line-height: 1.12; }
.hero__teasers .hslide p { font-size: var(--fs-s); }
.hero__teasers .hslide .btn { margin-top: .75rem; }
.hero__teasers .hslide__icon { top: 1.5rem; right: 1.75rem; width: 30px; height: 30px; }
/* Hero: Kicker/Überschrift in Slider und myfactory-Kachel auf gleicher Höhe (fester Abstand von oben) */
.hero__teasers { --teaser-top: clamp(4.25rem, 2.75rem + 3.5vw, 6rem); }
.hero__teasers .teaser { align-items: start; align-content: start; padding-top: var(--teaser-top); }
.hero__teasers .teaser .btn { align-self: end; }
.hero__teasers .hslide { align-content: start; padding-top: var(--teaser-top); }
/* Buttons beider Hero-Karten rechts unten (wie zuvor), Text oben links */
@media (min-width: 1200px) {
  .hero__teasers .teaser { align-content: stretch; padding-bottom: 3.25rem; }
  .hero__teasers .teaser > div { align-self: start; }
  .hero__teasers .teaser .btn { align-self: end; justify-self: end; }
  .hero__teasers .hslide { grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; align-content: stretch; column-gap: 1.5rem; }
  .hero__teasers .hslide > .kicker, .hero__teasers .hslide > h2, .hero__teasers .hslide > p { grid-column: 1; }
  .hero__teasers .hslide > .btn { grid-column: 2; grid-row: 1 / -1; align-self: end; justify-self: end; margin-top: 0; }
}
/* Buttons auch auf kleineren Bildschirmen rechtsbündig */
.hero__teasers .teaser .btn, .hero__teasers .hslide > .btn { justify-self: end; }
.hero__teasers .teaser { align-content: stretch; }
.hero__teasers .teaser > div { align-self: start; }
.hero__teasers .teaser .btn { align-self: end; }
/* Hero-Karten wieder niedriger */
.hero__teasers { --teaser-top: clamp(2.25rem, 1.6rem + 1.4vw, 3rem); }
.hero__teasers .hslide { padding-bottom: 2.9rem; gap: .25rem; }
@media (min-width: 1200px) { .hero__teasers .teaser { padding-bottom: 2.9rem; } }

/* ---------- 24/7-Hotline ---------- */
.footer__hotline-badge { display: inline-block; padding: 1px 8px; margin-right: .25rem; border-radius: var(--radius-pill); background: var(--brand); color: var(--ink); font-size: 12px; font-weight: 800; }
.contact-card--hotline { background: var(--brand-salbei, #a3b9a8); }

/* ---------- Referenzen-Laufband (einzeilig, monochrom) ---------- */
.refband { padding-block: 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.refband__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; font-size: var(--fs-s); font-weight: 700; color: var(--fg); }
.refband__head a { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 3px; }
.refband__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.refband__track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: refband 180s linear infinite; }
.refband__viewport:hover .refband__track, .refband__viewport:focus-within .refband__track { animation-play-state: paused; }
.refband__item { flex: none; display: grid; place-items: center; height: 56px; padding-inline: clamp(1.5rem, 1rem + 2vw, 3rem); }
.refband__item img { height: 34px; width: auto; max-width: 180px; object-fit: contain; filter: brightness(0) invert(1); opacity: .7; }
.refband__item img.refband__logo--tall { height: 52px; }
.refband__item img.refband__logo--slim { height: 22px; }
.refband__ph { display: grid; place-items: center; height: 40px; padding: 0 1.25rem; border: 1px dashed var(--line); border-radius: var(--radius-pill); font-size: var(--fs-s); font-weight: 700; color: var(--fg); white-space: nowrap; }
@keyframes refband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .refband__track { animation: none; } }
html.a11y-motion .refband__track { animation: none; }

/* ---------- Team ---------- */
.team { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.team-card { gap: .25rem; padding: clamp(1.25rem, 1rem + .6vw, 1.5rem); }
.team-card .badge { position: absolute; top: 1.25rem; right: 1.25rem; }
.team-card__avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #a3b9a8; color: var(--ink); font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.team-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.card.team-card .team-card__name { font-size: var(--h-xs); line-height: 1.25; }
.team-card__role { margin-top: 0; font-size: var(--fs-s); }
.team-card__contact { list-style: none; padding: 0; margin: auto 0 0; padding-top: 1rem; display: grid; gap: .4rem; font-size: var(--fs-s); }
.team-card__contact a { display: inline-flex; align-items: flex-start; gap: .5rem; color: var(--fg-strong); font-weight: 600; font-size: 12.5px; line-height: 1.35; min-width: 0; }
.team-card__contact svg { margin-top: 1px; }
.team-card__contact svg { width: 16px; height: 16px; flex: none; }
.nowrap { white-space: nowrap; }
.cs-light .refband__item img { filter: grayscale(1) brightness(0); opacity: .5; }
.refband__more { display: block; width: max-content; margin: .5rem 0 0 auto; font-size: 12px; font-weight: 600; color: var(--fg); opacity: .7; }
.refband__more:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.team-card__mail { align-self: flex-start; margin-top: auto; height: 36px; padding: 0 14px; gap: .5rem; font-size: 13px; }
.team-card__mail svg { width: 16px; height: 16px; }
.team-card__role { margin-bottom: 1rem; }
.card.team-card .team-card__mail { padding: 0 14px; line-height: 1; }
.card.team-card .team-card__name { margin-bottom: 1rem; }
.team-card__actions { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.team-card__actions .team-card__mail { margin-top: 0; }
.team-note { margin-top: clamp(1.5rem, 1rem + 1vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; color: var(--fg); }
.team-note .team-card__mail { margin: 0; padding: 0 14px; line-height: 1; }

/* Wasserzeichen Leistungsseiten: Original, etwas aufgefrischt – Grün statt Weiß, weich ausgeblendet */
.page-hero__mark { color: var(--brand); opacity: .2; transform: translateY(-50%) rotate(-6deg); -webkit-mask-image: linear-gradient(215deg, #000 25%, transparent 95%); mask-image: linear-gradient(215deg, #000 25%, transparent 95%); }
@media (max-width: 759px) { .page-hero__mark { opacity: .12; } }

/* AGB: SLA-Tabelle und Einleitung */
.agb__intro { color: var(--fg); }
.agb__table-wrap { overflow-x: auto; margin: 1rem 0 1.25rem; border-radius: var(--radius-s); border: 1px solid var(--line); }
.agb__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-s); }
.agb__table th, .agb__table td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.agb__table th { background: #a3b9a8; color: var(--ink); font-weight: 700; }
.agb__table tr:last-child td { border-bottom: 0; }
.agb__table td:first-child { font-weight: 700; color: var(--fg-strong); }
.refband__name { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 700; letter-spacing: .02em; color: var(--fg); opacity: .8; white-space: nowrap; }
.logo-tile--name { border-style: solid; font-size: var(--fs-m, 1rem); font-weight: 700; color: var(--fg-strong); }
.logo-tile--img { border-style: solid; }
.kunden-logo { height: 40px; width: auto; max-width: 75%; object-fit: contain; filter: brightness(0); opacity: .75; }
.kunden-logo--tall { height: 60px; }
.kunden-logo--slim { height: 22px; }
.ref-card__logo { height: 72px; display: flex; align-items: center; margin-bottom: .75rem; }
.ref-card__logo .kunden-logo { max-width: 60%; }

/* Erzählblock auf Leistungsseiten und Unternehmen */
.card.story { display: grid; gap: 1rem 4rem; padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.card.story h2 { font-size: var(--h-m); }
.card.story .lead { margin: 0; color: var(--fg); }
@media (min-width: 900px) { .card.story { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
@media (min-width: 900px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }