/* ============================================================
   TREND4IT GmbH — Webauftritt · helle Variante
   Gleiche Struktur und gleicher Scroll-Motor wie die dunkle Fassung.
   Die Token-Namen sind beibehalten, ihre Rollen gelten hier umgekehrt:
   --navy-* sind die hellen Flaechen, --white ist die Schriftfarbe.
   Die Markenfarben sind abgedunkelt, damit Gruen auf Hell lesbar bleibt.
   Markensystem der Grossflaechenplakate: tiefes Naviblau,
   schwere weisse Versalien mit leichter Zweitzeile, Original-
   logos, Verlauf Gruen #97C93F -> Blau #2E4E9E (aus dem Logo
   gemessen).

   Das Scrollen ist hier das Leitmedium: ein Scroll-Motor
   rechnet fuer jedes markierte Element seinen Fortschritt aus
   und scrubbt Transformationen darauf. Alles laeuft ueber
   transform / opacity / clip-path, damit nichts das Layout
   neu berechnen muss. Bei prefers-reduced-motion faellt alles
   in den Ruhezustand zurueck.
   ============================================================ */

:root {
  color-scheme: light;

  --navy-900: #f4f7fb;
  --navy-850: #edf2f8;
  --navy-800: #ffffff;
  --navy-700: #e3eaf3;
  --line:      #d3dce8;
  --line-soft: #e2e8f1;

  --white:    #0a1630;
  --mist:     #4a5b76;
  --mist-dim: #66768f;

  --t4-green:      #4f8c1c;
  --t4-green-lift: #5c9c24;
  --t4-teal:       #2f7472;
  --t4-blue:       #2e4e9e;
  --t4-blue-lift:  #2c62c8;

  --ok:   #3f8a1f;
  --warn: #a8680f;

  --mood-a: #4f8c1c;
  --mood-b: #2e4e9e;
  --mood-c: #2c62c8;

  --grad: linear-gradient(100deg, var(--mood-a), var(--mood-b));

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --r-sm: 4px;
  --r-md: 6px;
  --top: 62px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--white);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--t4-green-lift); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typografie ---------- */

.heavy {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .9;
  text-wrap: balance;
  margin: 0;
}

.light {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 96, "wght" 300;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .94;
  text-wrap: balance;
  margin: 0;
}

.label {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lede { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--mist); max-width: 56ch; margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

section.band { padding-block: clamp(60px, 8vw, 108px); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--mood-a); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad); flex: none; }

/* ---------- Scroll-Motor ----------
   .rise wird beim Scrollen gescrubbt: Position und Skalierung
   wandern, die Deckkraft bleibt bei 1 - der Ruhezustand ist
   immer lesbar. */

.rise { will-change: transform; }

/* ---------- Verlaufsfeld ---------- */

.field { position: fixed; inset: 0; z-index: -3; background: var(--navy-900); overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(96px); will-change: transform; }
.blob-1 { width: 68vmax; height: 68vmax; left: -24vmax; top: -24vmax; background: radial-gradient(circle at 50% 50%, var(--mood-a) 0%, transparent 62%); opacity: .20; }
.blob-2 { width: 58vmax; height: 58vmax; right: -20vmax; top: -6vmax; background: radial-gradient(circle at 50% 50%, var(--mood-b) 0%, transparent 62%); opacity: .22; }
.blob-3 { width: 52vmax; height: 52vmax; left: 20vmax; bottom: -30vmax; background: radial-gradient(circle at 50% 50%, var(--mood-c) 0%, transparent 62%); opacity: .15; }

.field-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,22,48,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,48,.055) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 76%);
}

.field-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 70% at 50% 0%, transparent 0%, rgba(244,247,251,.45) 52%, rgba(244,247,251,.88) 100%);
}

.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad); z-index: 60; box-shadow: none; }

/* ---------- Kopfzeile ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,247,251,.74);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.topbar.stuck { border-bottom-color: var(--line-soft); background: rgba(244,247,251,.88); }

.topbar-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; gap: 20px;
  transition: padding .3s ease;
}
.topbar.stuck .topbar-inner { padding-block: 10px; }

.brand { flex: none; display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 158px; height: auto; transition: width .3s ease; }
.topbar.stuck .brand img { width: 134px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.nav a {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mist); text-decoration: none;
  padding: 10px 11px; position: relative; border-radius: var(--r-sm);
  transition: color .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--white); background: rgba(10,22,48,.05); }
.nav a.active { color: var(--white); }
.nav a.active::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--grad); }

/* ---------- Nav-Dropdown "Leistungen" ---------- */

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mist); background: transparent; border: 0; margin: 0; cursor: pointer;
  padding: 10px 11px; position: relative; border-radius: var(--r-sm);
  transition: color .18s ease, background-color .18s ease;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-dropdown-trigger:hover { color: var(--white); background: rgba(10,22,48,.05); }
.nav-dropdown.active .nav-dropdown-trigger { color: var(--white); }
.nav-dropdown.active .nav-dropdown-trigger::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--grad); }
.nav-caret { width: 9px; height: 9px; flex: none; color: currentColor; transition: transform .18s ease; }
.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

/* Kompaktes, helles Panel statt eines klassischen Dropdown-Menues —
   dieselbe Kartensprache (Rahmen, Radius, weicher Schatten) wie .tile/
   .quote, nur schmaler. display:none statt nur opacity/visibility,
   damit das geschlossene Panel nicht in die Nav-Breitenmessung von
   measureNav() (main.js, nav.scrollWidth) einfliesst. */
.nav-dropdown-panel {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 200px;
  flex-direction: column; gap: 2px;
  background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(10,22,48,.28);
  padding: 8px;
  z-index: 70;
}
.topbar:not(.collapsed) .nav-dropdown:hover .nav-dropdown-panel,
.topbar:not(.collapsed) .nav-dropdown.open .nav-dropdown-panel { display: flex; }

.nav-dropdown-panel a {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mist); text-decoration: none;
  padding: 11px 14px; border-radius: var(--r-sm);
  transition: color .15s ease, background-color .15s ease;
}
.nav-dropdown-panel a:hover { color: var(--white); background: rgba(10,22,48,.05); }
.nav-dropdown-panel a.active { color: var(--mood-a); }

.nav-toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1px solid var(--line); color: var(--white);
  border-radius: var(--r-sm); padding: 9px 15px;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--grad); color: #ffffff; box-shadow: 0 14px 38px -18px var(--mood-a); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 48px -18px var(--mood-a); }
.btn-ghost { border-color: var(--line); color: var(--white); background: rgba(255,255,255,.7); }
.btn-ghost:hover { border-color: var(--mood-a); transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 12.5px; }
.arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Ansichten ---------- */

.view { display: none; }
.view.active { display: block; }

.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px); align-items: end;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.sec-head h2 { font-size: clamp(32px, 4.6vw, 54px); }
.sec-head p { color: var(--mist); margin: 0; font-size: 15.5px; max-width: 46ch; }

/* ---------- Hero ----------
   Grosse Typo, viel Luft, ein Objekt: die 4. Beim Scrollen
   tritt der Text zurueck, waehrend die 4 waechst. */

.hero { position: relative; overflow: clip; padding-block: clamp(56px, 9vw, 118px) clamp(52px, 7vw, 92px); }

.hero-four {
  position: absolute;
  right: clamp(-110px, -5vw, -20px);
  top: 50%;
  width: clamp(240px, 34vw, 520px);
  z-index: 0;
  opacity: .85;
  filter: drop-shadow(0 24px 48px rgba(46,78,158,.22));
  pointer-events: none; user-select: none;
  will-change: transform;
  transform: translateY(-50%);
}

.hero-inner { position: relative; z-index: 1; max-width: 760px; will-change: transform; }

/* Karriere-Headline "Deine Zukunft" wrappte bei voller Groesse (92px)
   innerhalb der Standard-760px-Spalte auf zwei Zeilen, wodurch die
   Headline insgesamt dreizeilig wurde. Nur hier etwas mehr Breite, damit
   "Deine Zukunft" einzeilig bleibt und "bei TREND4IT" die zweite Zeile
   bildet — Groesse/Gewicht der Schrift bleiben unveraendert. */
#view-career .hero-inner { max-width: 840px; }
/* "Deine Zukunft" (h1) und "bei TREND4IT" (wordmark-line) sind zwei
   separate Elemente, nicht eine einzelne h1 mit <br> wie auf den anderen
   Seiten — der volle h1-Abstand (30px) liess sie wie zwei getrennte
   Bloecke statt einer zusammenhaengenden Headline wirken. */
#view-career .hero h1 { font-size: clamp(40px, 6vw, 78px); margin-bottom: 6px; }

/* "Kurze Wege. / Grosse Verantwortung." muss laut Vorgabe exakt
   zweizeilig sein (per <br> erzwungen). In der schmaleren .split-Spalte
   passt "Grosse Verantwortung." bei der vollen .split-h2-Groesse (48px)
   nicht auf eine Zeile und bricht ungewollt auf drei Zeilen um — nur
   hier verkleinert, damit beide Zeilen sicher einzeilig bleiben. */
#view-career .split h2 { font-size: clamp(24px, 2.6vw, 28px); }

.hero-sub {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 10px; row-gap: 2px;
  font-size: clamp(18px, 2.2vw, 25px);
  margin: 0 0 16px;
}
.hero-sub .light { color: var(--mist); }

.hero h1 { font-size: clamp(44px, 7.2vw, 92px); margin: 0 0 30px; }

.hero .lede { margin-bottom: 32px; }

/* Sekundaerer Hero-Button: weisse Flaeche mit Verlaufskontur statt
   grauem Rahmen, damit er neben dem vollflaechigen Primaerbutton
   praesenter wirkt, ohne dessen Flaechenfuellung zu kopieren.
   Verlauf ueber zwei Hintergrundebenen (padding-box/border-box)
   statt border-image, damit der border-radius erhalten bleibt;
   die innere Ebene muss deckend sein, sonst schimmert der Verlauf
   der Rand-Ebene durch und der Button wirkt wie der Primaerbutton. */
.hero .btn-ghost {
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad) border-box;
  color: var(--white);
}
.hero .btn-ghost:hover {
  background:
    linear-gradient(#f2f6f0, #f2f6f0) padding-box,
    var(--grad) border-box;
  transform: translateY(-2px);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 30px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 9px 22px; color: var(--mist-dim); font-size: 13px; letter-spacing: .04em; margin: 0; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mood-a); flex: none; }

/* ---------- Kennzahlenleiste ---------- */

.facts { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.72); }
.facts-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.fact { padding: 30px clamp(14px, 2.4vw, 26px); border-left: 1px solid var(--line-soft); }
.fact:first-child { border-left: 0; }
.fact b {
  display: block;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.05; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fact span { color: var(--mist-dim); font-size: 13.5px; }

/* Kennzahlenleiste direkt unter dem Hero: einheitliches Zahl-zuerst-
   Prinzip fuer alle fuenf Felder (auch 15+), groessere und praesentere
   Ziffern, konsistentes gruenes "+" als kleiner Akzent. Fuer Startseite
   UND Referenzen gemeinsam skopiert — Referenzen soll exakt dieselbe,
   bereits bestehende Gestaltung wiederverwenden statt eine eigene zu
   entwickeln. */
#view-home .facts .fact, #view-refs .facts .fact { padding-block: 36px; }
#view-home .facts .fact b, #view-refs .facts .fact b { font-size: clamp(32px, 4.4vw, 54px); margin-bottom: 10px; }
/* .fact span (Beschriftungsstil) greift sonst auch auf die verschachtelte
   Zahl durch und macht sie klein/grau statt gross/verlaufsgefuellt. */
#view-home .facts .fact b span, #view-refs .facts .fact b span { font-size: inherit; color: inherit; }
#view-home .facts .fact .plus, #view-refs .facts .fact .plus {
  font-size: .5em;
  color: var(--t4-green);
  vertical-align: text-top;
  margin-left: 1px;
}
#view-home .facts .fact span, #view-refs .facts .fact span { letter-spacing: .01em; }

/* ---------- Gepinnte Sequenz ----------
   Das Panel bleibt stehen, die Schritte laufen daran vorbei
   und schalten seinen Zustand um. */

.seq { position: relative; padding-block: clamp(40px, 6vw, 80px) 0; }

.seq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.seq-sticky { position: sticky; top: calc(var(--top) + 26px); }

.seq-steps { display: flex; flex-direction: column; }

.seq-step {
  /* Scrollweg je Schritt — auf grossen Schirmen gedeckelt,
     damit zwischen den Schritten keine Leere entsteht. Um ca. 30%
     reduziert, damit die drei Schritte beim Scrollen staerker als
     ein zusammenhaengender Prozess wirken, ohne zu eng zu werden. */
  min-height: clamp(180px, 32vh, 280px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 14px;
  transition: opacity .45s ease;
  opacity: .34;
}
.seq-step.on { opacity: 1; }

.seq-step .n {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 13px; letter-spacing: .2em; margin-bottom: 14px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.seq-step h3 { font-size: clamp(30px, 4.2vw, 50px); margin: 0 0 16px; }
.seq-step p { margin: 0; color: var(--mist); font-size: clamp(15px, 1.5vw, 17px); max-width: 44ch; }

/* Button ist Teil von Schritt 03 und scrollt mit dessen Inhalt mit,
   statt separat unter der Sektion zu stehen. align-self verhindert,
   dass der Flex-Spalten-Kontext von .seq-step ihn auf volle Breite
   dehnt — die Breite soll sich weiter am Text orientieren. */
.seq-step .seq-cta { align-self: flex-start; margin-top: 22px; }

/* Sekundaer-Button innerhalb der Sequenz: exakt dieselbe Designsprache
   wie der Hero-Sekundaerbutton (.hero .btn-ghost) — weisse Flaeche,
   Verlaufskontur, gleicher Radius/gleiche Hoehe/gleicher Hover. */
.seq-cta.btn-ghost {
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad) border-box;
  color: var(--white);
}
.seq-cta.btn-ghost:hover {
  background:
    linear-gradient(#f2f6f0, #f2f6f0) padding-box,
    var(--grad) border-box;
  transform: translateY(-2px);
}

/* Monitoring-Panel */
.monitor {
  background: linear-gradient(168deg, rgba(255,255,255,.97), rgba(244,247,251,.98));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 22px 18px;
  box-shadow: 0 50px 100px -50px rgba(10,22,48,.28), inset 0 1px 0 rgba(255,255,255,.9);
  position: relative; overflow: hidden; margin: 0;
}
.monitor::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }

.monitor-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.monitor-head strong {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  text-transform: uppercase; font-size: 15px; letter-spacing: .03em;
}
.monitor-head .label { color: var(--mist-dim); font-size: 10.5px; }

.mrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 68px;
  align-items: center; gap: 12px;
  padding: 12px 8px; margin-inline: -8px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: background-color .45s ease, opacity .45s ease;
}
.mrow:last-of-type { border-bottom: 0; }
.mrow.dim { opacity: .38; }
.mrow.hot { background: rgba(168,104,15,.09); opacity: 1; }
.mrow.fixed { background: rgba(79,140,28,.1); opacity: 1; }

.mrow .name { font-size: 14px; font-weight: 500; }
.mrow .name em { display: block; font-style: normal; font-size: 11.5px; color: var(--mist-dim); letter-spacing: .02em; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.spark i { flex: 1; background: var(--grad); opacity: .5; transition: height .5s ease; }
.spark i:last-child { opacity: 1; }

.chip {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 5px 0; border-radius: 999px; border: 1px solid;
  transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}
.chip-ok   { color: var(--ok);   border-color: rgba(79,140,28,.35);  background: rgba(79,140,28,.1); }
.chip-warn { color: var(--warn); border-color: rgba(168,104,15,.4); background: rgba(168,104,15,.1); }

.monitor-foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  color: var(--mist-dim); font-size: 12px; line-height: 1.55;
  min-height: 3.2em;
}
.monitor-foot b { color: var(--white); font-weight: 600; }

/* ---------- Grosse Aussage mit Wort-fuer-Wort-Aufhellung ---------- */

.statement { padding-block: clamp(55px, 8.5vw, 125px); }
.statement p {
  margin: 0;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 98, "wght" 700;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.14;
  letter-spacing: -.012em;
  max-width: 92%;
}
.statement .dark { color: var(--white); }
.statement .hl { color: var(--mood-a); }

/* Zeilenumbruch "...und sind da, / wenn es darauf ankommt." gilt nur
   auf breiten Schirmen — auf Tablet/Smartphone soll der Text frei
   reflowen statt den Desktop-Umbruch zu erzwingen. */
.statement br.lb-desktop { display: none; }
@media (min-width: 1001px) {
  .statement br.lb-desktop { display: inline; }
}

/* ---------- Bento ---------- */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }

.tile {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 26px 24px; background: rgba(255,255,255,.82);
  position: relative;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; grid-column: span 2;
}
.tile:hover { border-color: rgba(151,201,63,.5); background: rgba(255,255,255,.97); box-shadow: 0 30px 60px -40px var(--mood-b); }

.tile h3 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  text-transform: uppercase; font-size: 18px; margin: 0; letter-spacing: .005em;
}
.tile p { margin: 0; color: var(--mist); font-size: 14.5px; }
.tile .ico { width: 30px; height: 30px; color: var(--mood-a); stroke-width: 1.5; }
.tile .more {
  margin-top: auto; padding-top: 6px;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mood-a); display: inline-flex; align-items: center; gap: 7px;
}

/* Karten ohne weiterfuehrenden Link (kein .more) werden in der
   Grid-Zeile sonst auf die Hoehe ihrer Nachbarn gestreckt und wirken
   dadurch unten leer. Vertikale Zentrierung macht das bewusst statt
   zufaellig und ergaenzt keinen neuen Link/Inhalt. */
.tile-plain { justify-content: center; }

.tile-lead {
  grid-column: span 4;
  background: linear-gradient(150deg, rgba(151,201,63,.13), rgba(46,78,158,.12) 48%, rgba(255,255,255,.85) 80%);
  border-color: rgba(151,201,63,.32);
}
.tile-lead h3 { font-size: 23px; }
.tile-lead ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px 20px; }
.tile-lead li { font-size: 13.8px; color: var(--mist); padding-left: 16px; position: relative; }
.tile-lead li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--grad); }

.tile-wide {
  grid-column: span 6;
  flex-direction: row; align-items: center; gap: 26px;
  background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 24px 2px;
}
.tile-wide:hover { background: transparent; border-color: var(--mood-a); box-shadow: none; }
.tile-wide .ico { flex: none; }
.tile-wide h3 { flex: none; width: 190px; }
.tile-wide p { flex: 1; }
.tile-wide .more { margin: 0; padding: 0; flex: none; }

/* Managed-IT-Leistungsumfang: dezentere Hervorhebung der grossen Karte
   (an die subtile Toenung von .model.featured auf der Startseite
   angeglichen) und minimal groesserer Fliesstext fuer bessere Lesbarkeit.
   Bewusst auf #view-managed skopiert, damit .tile-lead/.tile p auf der
   Startseite unveraendert bleiben. Gleiche Werte fuer #view-support
   uebernommen, damit die Leistungskarten auf beiden Unterseiten optisch
   identisch wirken. */
#view-managed .tile-lead, #view-support .tile-lead {
  background: linear-gradient(170deg, rgba(151,201,63,.05), rgba(46,78,158,.06) 55%, rgba(255,255,255,.94) 100%);
  border-color: rgba(46,78,158,.28);
}
#view-managed .tile p, #view-support .tile p { font-size: 15px; }

/* Secondary-Button in der IT-Beratung-Zeile: exakt dieselbe
   Designsprache wie der Hero-Sekundaerbutton (.hero .btn-ghost) —
   weisse Flaeche, Verlaufskontur, gleicher Radius/Hoehe/Hover. */
.tile-wide .btn-ghost {
  flex: none;
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad) border-box;
  color: var(--white);
}
.tile-wide .btn-ghost:hover {
  background:
    linear-gradient(#f2f6f0, #f2f6f0) padding-box,
    var(--grad) border-box;
  transform: translateY(-2px);
}

/* ---------- Servicemodelle ---------- */

.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Startseite: nach dem Entfernen der mittleren Card ("Servicekontingent")
   bleiben nur noch 2 Modelle. Flex statt Grid haelt die Card-Breite exakt
   auf dem Wert, den eine Spalte im urspruenglichen 3er-Grid hatte (25%/
   33% je Breakpoint werden hier zu 33%/100%), zentriert das Paar aber
   ueber justify-content statt eine leere dritte Position zu zeigen —
   gleiches Prinzip wie bei .crew auf der Ueber-uns-Seite. Cloud-Seite
   nutzt dieselbe .models/.model-Klasse mit 6 Cards und bleibt als Grid
   unangetastet, da dort nicht gescopt. */
#servicemodelle .models { display: flex; flex-wrap: wrap; justify-content: center; }
#servicemodelle .model { flex: 0 0 calc(33.333% - 10.667px); }
.model {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 28px 24px 24px; background: rgba(255,255,255,.78);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.model.featured {
  border-color: rgba(46,78,158,.28);
  background: linear-gradient(170deg, rgba(151,201,63,.05), rgba(46,78,158,.06) 55%, rgba(255,255,255,.94) 100%);
}
.model.featured::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.model .tag {
  display: block; color: var(--mist-dim); font-size: 10.5px;
  letter-spacing: .09em; line-height: 1.45; min-height: 2.9em;
}
.model h3 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase; font-size: 24px; margin: 0;
}
.model .claim-txt { color: var(--mist); font-size: 14.5px; margin: 0; }
.model ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.model li { font-size: 14px; color: var(--mist); padding-left: 24px; position: relative; }
.model li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 6px;
  border-left: 2px solid var(--mood-a); border-bottom: 2px solid var(--mood-a); transform: rotate(-45deg);
}
.model .price {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--mist-dim);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Secondary-Button am Kartenende: exakt dieselbe Designsprache wie
   der Hero-Sekundaerbutton (.hero .btn-ghost) — weisse Flaeche,
   Verlaufskontur, gleicher Radius/Hoehe/Hover, kein Pfeil/Icon. */
.model .price .btn-ghost {
  flex: none;
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad) border-box;
  color: var(--white);
}
.model .price .btn-ghost:hover {
  background:
    linear-gradient(#f2f6f0, #f2f6f0) padding-box,
    var(--grad) border-box;
  transform: translateY(-2px);
}

/* ---------- Zweispalter ---------- */

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,66px); align-items: center; }
.split h2 { font-size: clamp(30px, 4vw, 48px); margin: 0 0 18px; }
.split p { color: var(--mist); margin: 0 0 16px; font-size: 15.5px; }

/* Richtet die rechte Spalte oben an der linken Headline aus statt
   vertikal zu zentrieren (das globale .split zentriert standardmaessig).
   Verwendet u. a. bei "Proaktiv statt reaktiv" (Managed IT) und beim
   Ueber-uns-Steckbrief. */
.split-top { align-items: start; }

/* Startseiten-Ueber-uns-Teaser: nach dem Entfernen der rechten Tabelle
   bleibt nur noch die linke Textspalte — ein Spalte statt zwei, mit
   Textbreite wie bei anderen linksbuendigen Intro-Bloecken der Website,
   damit die Zeilen nicht auf volle Wrap-Breite auseinandergezogen wirken. */
#about-preview .split { grid-template-columns: 1fr; }
#about-preview .split > .rise { max-width: 620px; }

/* Ueber-uns-Steckbrief: linke Spalte bleibt klar der Hauptinhalt, die
   Tabelle rechts wirkt schmaler/kompakter statt gleich breit wie der
   Fliesstext. Nur hier skopiert, .split bleibt fuer alle anderen
   Zweispalter (Startseite, Managed IT, Karriere) unveraendert. */
.split-about { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* "Unternehmen passt." ist mit 18 Zeichen knapp zu lang fuer die
   geteilte 17ch-Breite von .page-head h1 und brach dadurch selbst
   nochmal um (3 Zeilen statt 2). Nur fuer diese Headline etwas breiter. */
#view-about .page-head h1 { max-width: 20ch; }

.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.check-list li { font-size: 14.8px; color: var(--mist); padding-left: 26px; position: relative; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 6px;
  border-left: 2px solid var(--mood-a); border-bottom: 2px solid var(--mood-a); transform: rotate(-45deg);
}

.specs { border-top: 1px solid var(--line); margin: 0; }
.spec { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.spec dt {
  color: var(--mood-a);
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
.spec dd { margin: 0; color: var(--mist); font-size: 14.5px; }

/* Ueber-uns-Steckbrief kompakter: deutlich engere Zeilen und Label-Wert-
   Abstand. Nur hier skopiert, .spec bleibt fuer die Startseite und
   IT-Support (Reaktionszeiten) unveraendert. In eine min-width-Media-
   Query gepackt, damit die #view-about-ID-Spezifitaet nicht die globale
   Ein-Spalten-Stapelung von .spec unter 620px ueberstimmt. */
@media (min-width: 621px) {
  #view-about .spec { gap: 13px; padding: 10px 0; }
  #view-about .spec dd { line-height: 1.45; }
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ----------
   Bewusst reduziert: reiner Fliesstext in Absaetzen statt Cards, mit
   schmalerer Lesebreite (wie #about-preview) statt voller Wrap-Breite,
   damit lange Zeilen nicht die Lesbarkeit erschweren. Typografische
   Struktur (Label fett, kleine Caption, h2/h3 fuer die deutlich
   laengere Datenschutzerklaerung) statt eines neuen Komponentensystems
   — .legal-caption nutzt dieselbe Label-Typografie wie .spec dt, .legal
   h3 ebenso; .legal h2 ist eine kleinere Instanz der bestehenden
   Archivo-700-Headline-Systematik (wie .tile h3/.duo h3), keine neue
   Schriftgroesse "erfunden". */
.legal { max-width: 680px; }
.legal p { margin: 0 0 22px; color: var(--mist); font-size: 15.5px; line-height: 1.65; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--white); font-weight: 600; }
.legal a { color: var(--mood-a); text-decoration: none; overflow-wrap: break-word; word-break: break-word; }
.legal a:hover { text-decoration: underline; }
.legal-caption { color: var(--mood-a); margin-bottom: 26px; }
.legal ul { margin: -8px 0 22px; padding-left: 20px; color: var(--mist); font-size: 15.5px; line-height: 1.65; }
.legal ul li { margin-bottom: 6px; }
.legal h2 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(19px, 2.2vw, 23px); color: var(--white);
  margin: 44px 0 16px; line-height: 1.25;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mood-a); margin: 0 0 8px;
}

/* Sekundaerer Button im Ueber-uns-Teaser: exakt dieselbe
   Designsprache wie die uebrigen Secondary-Buttons der Website
   (.hero .btn-ghost) — weisse Flaeche, Verlaufskontur, gleicher
   Radius/Hoehe/Hover, kein Pfeil/Icon. */
.about-cta.btn-ghost {
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad) border-box;
  color: var(--white);
}
.about-cta.btn-ghost:hover {
  background:
    linear-gradient(#f2f6f0, #f2f6f0) padding-box,
    var(--grad) border-box;
  transform: translateY(-2px);
}

/* ---------- Ablauf ---------- */

/* Eigene sec-head-Spaltenaufteilung: "Migrationsprozess" ist ein langes,
   nicht trennbares Wort und ueberlappt bei der Standard-Spaltenbreite
   (1.1fr/1fr) mit dem Einleitungstext. Breitere linke Spalte, groesserer
   Abstand und ein Sicherheitsnetz gegen Umbruch verhindern das, ohne die
   Schriftgroesse zu verkleinern. Nur fuer diesen Bereich, .sec-head
   bleibt fuer alle anderen Abschnitte unveraendert. */
.sec-head-process {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.sec-head-process h2 { overflow-wrap: break-word; }
.sec-head-process p { max-width: 36ch; }

/* "Wir warten nicht / auf Stoerungen." ist per <br> in zwei Zeilen
   vorgesehen, bricht bei der Standard-Spaltenbreite (1.1fr/1fr) aber ein
   drittes Mal um, weil "nicht" nicht mehr in die erste Zeile passt.
   Breitere linke Spalte wie bei .sec-head-process, damit "auf" wieder in
   die zweite statt eine eigene dritte Zeile rutscht. */
.sec-head-seq { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }

.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  padding: 22px 0; border-top: 1px solid var(--line-soft); align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step .num {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 40px; line-height: .9;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; text-transform: uppercase; font-size: 19px; margin: 0 0 6px; }
.step p { margin: 0 0 10px; color: var(--mist); font-size: 14.5px; max-width: 66ch; }
.step ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 24px; }
.step li { font-size: 13.5px; color: var(--mist-dim); padding-left: 15px; position: relative; }
.step li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--mood-b); }

/* .steps/.step wird auch auf Cloud (Migrationsprozess) und Karriere
   (Bewerbungsprozess) verwendet — nur auf IT-Support (Ablauf) sollen die
   fuenf Schritte kompakter wirken, daher hier gescoped statt an der Basis. */
#view-support .step { padding: 12px 0; }
#view-support .step h3 { margin-bottom: 4px; }
#view-support .step p { margin-bottom: 0; }

/* IT-Sicherheit-Vorgehen: die 4 Schritte sollen deutlich kompakter und
   als zusammenhaengender Ablauf wirken (Kundenwunsch), Trennlinien und
   Innenabstaende (h3/p) bleiben unangetastet — nur das Step-Padding
   sinkt um ca. 32% (22px -> 15px), analog zum IT-Support-Scoping oben. */
#view-security .step { padding: 15px 0; }

/* ---------- Technologien ---------- */

/* Echte Herstellerlogos statt Text-Tags: einheitliche Box je Logo
   (object-fit: contain) gleicht unterschiedliche Formate/Seiten-
   verhaeltnisse optisch aus, ohne einzelne Marken zu verzerren oder
   unverhaeltnismaessig gross/klein wirken zu lassen. Dauerhaft in
   Originalfarbe statt nur bei Hover. */
.tech { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 48px) clamp(32px, 4.5vw, 56px); }
.tech img {
  height: 34px; width: 128px;
  object-fit: contain; object-position: left center;
}

/* Zertifizierungs-Badges (Veeam, STARFACE, Sophos) deutlich groesser als die
   restlichen Hersteller-Logos, mit natuerlichem Seitenverhaeltnis statt fester
   Breite, damit trotz sehr unterschiedlicher Bildformate (fast quadratisch bis
   breites Wortmarken-Badge) alle etwa gleich praesent wirken. */
.tech img.tech-badge-lg {
  height: 60px; width: auto;
  object-position: left center;
}

/* HP: kompakte, quadratische Marke, die im festen 128px-Slot viel
   ungenutzten Freiraum liesse — Breite folgt stattdessen dem Inhalt. */
.tech img.tech-auto { width: auto; }

/* TeamViewer: sehr breites, flaches Logo — der 128px-Slot begrenzt bisher
   die Breite und macht es dadurch unverhaeltnismaessig duenn/klein; minimal
   groesser gerendert (Seitenverhaeltnis bleibt ueber object-fit erhalten). */
.tech img.tech-teamviewer { width: 148px; }

/* Weniger Leerraum zum nachfolgenden Referenzbereich — beide Bands
   haben padding-top:0, daher bestimmt dieser Wert den Abstand. */
section.tech-band { padding-bottom: clamp(32px, 4vw, 56px); }

/* ---------- Kundenstimmen ---------- */

.quote {
  margin: 0;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 24px 22px; background: rgba(255,255,255,.72);
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.quote::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.quote blockquote { margin: 0; font-size: 15px; color: var(--white); line-height: 1.62; text-align: left; overflow-wrap: break-word; }
.quote figcaption { margin-top: auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--mist-dim); }
.quote figcaption b { color: var(--white); font-size: 14.5px; font-weight: 600; }

/* Kundenlogo neben Name/Position/Unternehmen (Kundenwunsch) — eigener
   Textblock statt figcaption direkt, damit figcaption zur Reihe werden
   kann, ohne die bestehende vertikale Name/Rolle/Firma-Stapelung zu
   verlieren. Ein gemeinsamer, fester Logo-Bereich (max-width/-height,
   object-fit:contain) sorgt fuer einheitliche visuelle Gewichtung, egal
   wie breit oder quadratisch das jeweilige Original-Logo ist — ohne zu
   verzerren, zu beschneiden oder zu strecken. Bewusst kleiner als Zitat
   und Name, damit es ein dezentes Zusatzelement bleibt. */
.quote-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quote-logo { flex: none; display: inline-flex; align-items: center; opacity: .8; transition: opacity .18s ease; }
.quote-logo:hover, .quote-logo:focus-visible { opacity: 1; }
.quote-logo img { display: block; width: auto; height: auto; max-width: 132px; max-height: 40px; object-fit: contain; }

/* Sehr breite/flache Wortmarken (z. B. Gemein Küche & Interieur) wuerden im
   132px-Standardrahmen nur noch als duenner Streifen erscheinen, weil die
   Breite zuerst limitiert. Grosszuegigerer max-width erlaubt stattdessen der
   Hoehe, das Limit zu setzen — so bleibt die visuelle Groesse vergleichbar
   mit den uebrigen Referenzlogos, ohne das Bild zu verzerren. */
.quote-logo img.quote-logo-wide { max-width: 270px; }

/* Kompaktere/quadratischere Logos (z. B. AG fuer Steinindustrie, Rehl Energy,
   Hasenbach, ED Baucenter …) stossen im 40px-Standardrahmen an die Hoehe,
   wirken dadurch aber deutlich kleiner/weniger praesent als die breite
   GEMEIN-Wortmarke. Groesserer Rahmen fuer diese gezielt vergroesserten
   Referenzlogos — object-fit:contain verhindert weiterhin Verzerrung. */
.quote-logo img.quote-logo-lg { max-width: 180px; max-height: 60px; }
/* Hasenbach ist zugleich sehr breit (aehnlich GEMEIN) UND soll die groessere
   Hoehe der uebrigen vergroesserten Logos erreichen — kombiniert daher beide
   Grenzwerte statt nur die Breite von .quote-logo-wide zu uebernehmen. */
.quote-logo img.quote-logo-wide.quote-logo-lg { max-width: 270px; max-height: 60px; }

/* "Weiterlesen": nur bei ungewoehnlich langen Zitaten (z. B. Hasenbach)
   ueber blockquote.quote-clamp gesetzt. Hoehe in em relativ zur eigenen
   Zeilenhoehe/Schriftgroesse des jeweiligen Kontexts (Karte vs. Mini-
   Slider), damit die eingeklappte Hoehe automatisch der kuerzeren
   Referenzen (z. B. Sascha Bräuer) entspricht statt eines festen Pixel-
   werts, der bei anderer Kartenbreite nicht mehr passen wuerde. */
.quote-clamp { overflow: hidden; transition: max-height .32s ease; }
.quote blockquote.quote-clamp { max-height: 9.72em; }
.mini-quote blockquote.quote-clamp { max-height: 10.5em; }
.quote blockquote.quote-clamp.open,
.mini-quote blockquote.quote-clamp.open { max-height: 40em; }
.quote-more-toggle {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mood-a);
  display: inline-flex; align-items: center; gap: 7px;
}
.quote-more-icon { position: relative; width: 12px; height: 12px; flex: none; }
.quote-more-icon::before,
.quote-more-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--mood-a);
  transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease;
}
.quote-more-icon::before { width: 10px; height: 2px; }
.quote-more-icon::after { width: 2px; height: 10px; }
.quote-more-toggle[aria-expanded="true"] .quote-more-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

/* ---------- Google-Bewertungen ----------
   Bewusst keine neue Carousel-Gestaltung: wiederverwendet die bestehende
   .testimonial-carousel/.testimonial-viewport/.testimonial-track-Mechanik
   und die .quote-Kartenoptik 1:1. Einzig die Kartenbreite pro Reihe weicht
   ab (3 statt 2 auf Desktop), da die Google-Bewertungen kuerzer sind und
   laut Vorgabe zu dritt nebeneinander stehen sollen. */
.google-reviews-block { margin-top: clamp(40px, 5vw, 64px); }
.google-reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-bottom: clamp(16px, 2.4vw, 24px); }
.google-reviews-head .eyebrow { margin: 0; }
.google-reviews-summary { display: flex; align-items: center; gap: 8px; color: var(--mist); font-size: 14px; margin: 0; }
.google-reviews-summary .google-stars { font-size: 14px; letter-spacing: 2px; }
.google-review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.google-stars { color: var(--mood-a); font-size: 15px; letter-spacing: 3px; line-height: 1; }
.google-badge { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist-dim); }
.google-more { color: var(--mood-a); font-weight: 600; text-decoration: none; white-space: nowrap; }
.google-more:hover { text-decoration: underline; }
.google-reviews-foot { display: flex; justify-content: center; margin-top: clamp(18px, 2.4vw, 26px); }

/* Carousel: Track ist ein einzeiliger Flex-Container im horizontalen
   Scroll-Viewport — align-items:stretch (Flex-Default) sorgt automatisch
   dafuer, dass alle Cards exakt so hoch werden wie die laengste, ohne
   Text zu kuerzen. position:relative macht den Track zum offsetParent
   der Cards, damit deren offsetLeft direkt als scrollLeft-Ziel dient. */
.testimonial-carousel { display: flex; align-items: center; gap: 12px; }
.testimonial-viewport {
  flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.testimonial-viewport::-webkit-scrollbar { display: none; }
.testimonial-track { position: relative; display: flex; align-items: stretch; gap: 16px; }
.testimonial-track .quote { flex: 0 0 calc(50% - 8px); scroll-snap-align: start; }
/* Google-Bewertungen teilen sich Track/Viewport/Arrow-Markup mit dem
   Kundenstimmen-Carousel oben, sollen aber zu dritt statt zu zweit stehen
   — Regel bewusst NACH der generischen .testimonial-track .quote-Regel,
   damit sie bei gleicher Spezifitaet per Quellreihenfolge gewinnt. */
.google-reviews-track .quote { flex: 0 0 calc((100% - 32px) / 3); }

.testi-arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--white);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: border-color .18s ease, color .18s ease;
}
.testi-arrow svg { width: 18px; height: 18px; }
.testi-arrow:hover:not(:disabled) { border-color: var(--mood-a); color: var(--mood-a); }
.testi-arrow:disabled { opacity: .35; cursor: default; }

.testi-dots { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.testi-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 5px;
  background: var(--line); cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.testi-dot.active { width: 22px; background: var(--grad); }

/* ---------- Karriere ---------- */

.wordmark-line { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); flex-wrap: wrap; margin: 0 0 30px; }
.wordmark-line .bei { font-size: clamp(44px, 6.7vw, 88px); }
.wordmark-line img { width: clamp(209px, 30vw, 399px); height: auto; }

/* Rollen wie auf dem Plakat: schwere Versalien, (m/w/d) klein dahinter */
.roles { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.roles li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase; font-size: clamp(19px, 2.7vw, 31px); line-height: 1.05; letter-spacing: -.005em;
}
.roles li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); flex: none; transform: translateY(-4px); }
.roles li em {
  font-style: normal; font-family: "Instrument Sans", sans-serif; font-weight: 500;
  font-size: 13px; text-transform: none; letter-spacing: .02em; color: var(--mist); white-space: nowrap;
}

/* Karriere-Benefits als eigenstaendige Cards statt Tabellenraster —
   1:1 dieselbe Kartensprache wie .tile (Radius, Rahmen, Hover). */
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.benefit {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 22px; background: rgba(255,255,255,.82);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.benefit:hover { border-color: rgba(151,201,63,.5); background: rgba(255,255,255,.97); box-shadow: 0 30px 60px -40px var(--mood-b); }
.benefit .ico { width: 30px; height: 30px; color: var(--mood-a); stroke-width: 1.5; }
.benefit h3 { margin: 0; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; font-size: 18px; text-transform: uppercase; letter-spacing: .005em; }
.benefit p { margin: 0; font-size: 14.5px; color: var(--mist); }

.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.job {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 28px 26px 26px; background: rgba(255,255,255,.82);
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
  transition: border-color .25s ease;
}
.job::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.job:hover { border-color: rgba(151,201,63,.5); }
.job .tag { color: var(--mist-dim); font-size: 10.5px; }
.job h3 { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800; text-transform: uppercase; font-size: 24px; line-height: 1.02; margin: 0; }
.job .type { font-size: 13px; color: var(--mood-a); margin: -8px 0 0; letter-spacing: .06em; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 500; }
.job ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.job li { font-size: 14px; color: var(--mist); padding-left: 18px; position: relative; }
.job li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--grad); }
.job .apply {
  margin-top: auto; padding-top: 6px;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--mood-a);
  display: inline-flex; align-items: center; gap: 7px;
}
.job .apply:hover .arrow { transform: translateX(3px); }
/* Akkordeon-Chrome fuer Mobile: auf Desktop/Tablet unsichtbar (Toggle
   ausgeblendet) bzw. wirkungslos (display:contents laesst ul/.apply
   weiterhin als direkte Flex-Kinder von .job zaehlen, damit sich am
   bestehenden Desktop-Layout nichts aendert). Aktiviert wird die
   eigentliche Einklapp-Optik erst im 620px-Mobile-Breakpoint. */
.job-toggle { display: none; }
.job-collapse, .job-collapse-inner { display: contents; }

/* "Mehr anzeigen" bei IT-Systemadministrator: dezenter Textlink (gleiche
   Optik wie .apply), blendet die restlichen Punkte innerhalb der Karte
   ein/aus. grid-template-rows 0fr->1fr fuer eine ruhige Hoehenanimation,
   analog zum mobilen .job-collapse-Muster. Auf Mobile (620px) wird der
   Button ausgeblendet und .job-more dauerhaft offen gehalten, da dort
   bereits die aeussere Stelle-Akkordeon die Sichtbarkeit steuert. */
.job-more-toggle {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mood-a);
  display: inline-flex; align-items: center; gap: 7px;
}
.job-more-icon { position: relative; width: 12px; height: 12px; flex: none; }
.job-more-icon::before,
.job-more-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--mood-a);
  transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease;
}
.job-more-icon::before { width: 10px; height: 2px; }
.job-more-icon::after { width: 2px; height: 10px; }
.job-more-toggle[aria-expanded="true"] .job-more-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.job-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.job-more.open { grid-template-rows: 1fr; }
.job-more-inner { overflow: hidden; min-height: 0; }

/* ---------- Referenzen ---------- */

/* Teaser auf der Startseite: links Eyebrow/Headline/Text/CTA im
   bestehenden .split-Raster, rechts ein einzelnes Kundenstimmen-Testimonial
   als Gegengewicht zur vormals leeren Flaeche. 1.35fr statt 1fr rechts,
   damit die Aufteilung bei ~42/58% statt 50/50 liegt. */
.split-ref { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.ref-intro { display: flex; flex-direction: column; gap: 18px; }

/* Sekundaerer Button im Referenzen-Teaser: exakt dieselbe
   Designsprache wie die uebrigen Secondary-Buttons der Website. */
.ref-cta.btn-ghost {
  align-self: flex-start;
  border-color: transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--grad) border-box;
  color: var(--white);
}
.ref-cta.btn-ghost:hover {
  background:
    linear-gradient(#f2f6f0, #f2f6f0) padding-box,
    var(--grad) border-box;
  transform: translateY(-2px);
}

/* Testimonial-Panel: gleiche Sprache wie das Monitoring-Panel (.monitor)
   der Startseite — heller Verlauf, dezente Kontur, weicher Schatten,
   3px Verlaufslinie oben — statt einer neu erfundenen Card-Optik. */
.mini-testi {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,.97), rgba(244,247,251,.98));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 40px) clamp(22px, 3vw, 28px);
  box-shadow: 0 50px 100px -60px rgba(10,22,48,.24), inset 0 1px 0 rgba(255,255,255,.9);
}
.mini-testi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.mini-testi-label { margin: 0; color: var(--mist); }
.mini-testi-mark {
  position: absolute; top: 20px; right: 26px;
  font-family: Georgia, "Times New Roman", serif; font-size: 72px; line-height: 1;
  color: rgba(46,78,158,.1); pointer-events: none; user-select: none;
}

.mini-testi-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.mini-testi-viewport { flex: 1; min-width: 0; overflow: hidden; }
.mini-testi-track { display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.mini-quote { flex: 0 0 100%; min-width: 0; margin: 0; padding: 0 4px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.mini-quote blockquote { margin: 0; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; color: var(--white); overflow-wrap: break-word; }
.mini-quote figcaption { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--mist-dim); }
.mini-quote figcaption b { color: var(--white); font-size: 15px; font-weight: 600; }

.mini-testi .testi-arrow { flex: none; width: 38px; height: 38px; }
.mini-testi .testi-dots { margin-top: 20px; }

/* Projektbeispiele: Ausgangslage / Loesung / Ergebnis als feste Abfolge */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case {
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.82);
  padding: 26px 24px 18px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
}
.case::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.case .tag { color: var(--mist-dim); font-size: 10.5px; }
.case h3 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase; font-size: 21px; line-height: 1.05; margin: 0;
  max-width: 26ch; min-height: 2.15em;
}
.case dl { margin: 0; display: flex; flex-direction: column; }
.case dl div { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.case dt {
  color: var(--mood-a);
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.case dd { margin: 5px 0 0; color: var(--mist); font-size: 14px; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 17px; position: relative; transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mood-a); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 27px; width: 9px; height: 9px;
  border-right: 2px solid var(--mood-a); border-bottom: 2px solid var(--mood-a);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.faq .answer { padding: 0 0 19px; color: var(--mist); font-size: 14.5px; max-width: 78ch; }
.faq .answer p { margin: 0 0 9px; }
.faq .answer ul { margin: 0; padding-left: 20px; }
.faq .answer li { margin-bottom: 4px; }
.faq .answer a { color: var(--mood-a); }

/* ---------- Team & Werte ---------- */

/* Die Geschaeftsfuehrung als ein Block: beide machen dasselbe,
   also erfindet die Seite auch keine Aufteilung. */
.duo {
  display: flex; gap: clamp(16px, 2.4vw, 26px); align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(18px, 2.2vw, 24px);
  background: rgba(255,255,255,.78);
}
.duo-marks { display: flex; flex: none; }
.duo-marks .initials {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  font-size: 16px; color: #ffffff; background: var(--grad);
  margin-left: -14px;
  box-shadow: 0 0 0 3px var(--navy-800);
}
.duo-marks .initials:first-child { margin-left: 0; }
.duo h3 { margin: 0 0 3px; font-size: clamp(17px, 2vw, 21px); font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; text-transform: uppercase; }
.duo .role { color: var(--mood-a); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600; margin: 0 0 6px; }
.duo p { margin: 0; color: var(--mist); font-size: 14.5px; max-width: 58ch; }

/* Teamzusammensetzung als eigenstaendige Cards — dieselbe Kartensprache
   wie .tile/.value/.benefit statt zusammenhaengendem Tabellenraster.
   Flex statt Grid: nach dem Entfernen der vierten Card (Teilzeitkraefte)
   behalten die verbleibenden drei Cards ueber flex-basis exakt die
   Breite, die eine Spalte im urspruenglichen 4er-/2er-Grid hatte, statt
   sich auf die freie vierte Position zu strecken. justify-content:center
   zentriert die Dreiergruppe mit gleichmaessigen Raendern/Abstaenden. */
.crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }
.crew-item {
  flex: 0 0 calc(25% - 10.5px);
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.82);
  padding: 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.crew-eyebrow {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mood-a);
}
.crew-item b {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  font-size: clamp(28px, 3.4vw, 38px); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.crew-label { color: var(--white); font-size: 14px; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600; }

/* Werte als eigenstaendige Cards statt zusammenhaengendem Tabellenraster
   — dieselbe Kartensprache wie .tile/.benefit/.job (Radius, Rahmen,
   heller Hintergrund, kein Schatten/Hover). */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 22px; background: rgba(255,255,255,.82);
  display: flex; flex-direction: column; gap: 7px;
}
.value-eyebrow {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mood-a);
  font-variant-numeric: tabular-nums;
}
.value h3 { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; text-transform: uppercase; font-size: 17px; margin: 0; }
.value p { margin: 0; color: var(--mist); font-size: 14px; }

/* ---------- CTA-Band ---------- */

.cta-band {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(112deg, rgba(151,201,63,.14), rgba(46,78,158,.2) 50%, rgba(244,247,251,.2) 84%);
}
.cta-four {
  position: absolute; right: clamp(-90px, -5vw, -20px); top: 50%;
  width: clamp(220px, 26vw, 380px);
  opacity: .5;
  filter: drop-shadow(0 20px 40px rgba(46,78,158,.2));
  pointer-events: none; user-select: none; will-change: transform;
  transform: translateY(-50%);
}
.cta-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto;
  gap: clamp(26px, 5vw, 60px); align-items: center;
  padding-block: clamp(48px, 6vw, 86px);
}
.cta-inner h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; margin: 0 0 30px; }

.cta-contact { display: flex; flex-direction: column; gap: 14px; }
.cta-contact a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 16.5px; font-weight: 600; white-space: nowrap; }
.cta-contact a svg { width: 19px; height: 19px; color: var(--mood-a); flex: none; }
.cta-contact a:hover { color: var(--mood-a); }
.cta-contact em { font-style: normal; color: var(--mist-dim); font-size: 13px; }

/* Cloud-Abschluss folgt direkt auf die Vergleichstabelle statt auf eine
   leere Section wie bei anderen Seiten — eigenes, reduziertes Padding
   nur fuer diese Instanz, .cta-band bleibt fuer alle anderen Seiten
   unveraendert. */
.cta-band-compact .cta-inner { padding-block: clamp(34px, 4.4vw, 64px) clamp(40px, 5.2vw, 72px); }

/* ---------- Kontakt ---------- */

/* Kompakterer Hero nur fuer die Kontaktseite: weniger Abstand zur
   Navigation und zum nachfolgenden Kontaktbereich. .page-head bleibt
   fuer die anderen vier Unterseiten, die ihn nutzen, unveraendert. */
.contact-page-head { padding-block: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 36px); }

.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.contact-block { margin-bottom: 18px; }
.contact-block h3 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mood-a); margin: 0 0 9px;
}
.contact-block p, .contact-block a { margin: 0; color: var(--white); font-size: 15.5px; text-decoration: none; line-height: 1.6; }
.contact-block a:hover { color: var(--mood-a); }
.contact-block small { color: var(--mist-dim); font-size: 13px; display: block; margin-top: 4px; }
/* Servicezeit unter der Telefonnummer ist eine eigentliche Kontakt-
   information (wie Telefon/E-Mail), keine dezente Zusatzbemerkung wie
   "Offene Stellen..." — deshalb hier auf denselben Textfarbton wie
   .contact-block a/p vereinheitlicht statt des helleren small-Grautons. */
.contact-block small.contact-value { color: var(--white); }
/* "Offene Stellen finden Sie auf unserer Karriereseite" zaehlt jetzt
   ebenfalls als reguläre Kontaktinformation (siehe .contact-value oben)
   statt als dezenter Hinweis — der verlinkte Teil soll denselben
   dunklen Ton behalten statt Gruen, auch im Hover (nur Unterstreichung).
   Hoehere Spezifitaet als .contact-block a:hover, um dessen Gruen zu
   ueberschreiben. */
.contact-block a.karriere-link:hover { color: inherit; text-decoration: underline; }

.hours { border-top: 1px solid var(--line-soft); }
.hours div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.hours div span:last-child { font-variant-numeric: tabular-nums; }

form.contact {
  border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(22px, 3vw, 34px); background: rgba(255,255,255,.82);
  display: flex; flex-direction: column; gap: 14px;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.field-group { display: flex; flex-direction: column; gap: 7px; }
.field-group label {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist);
}
.field-group input, .field-group textarea, .field-group select {
  font: inherit; font-size: 15px; color: var(--white);
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field-group textarea { min-height: 108px; resize: vertical; }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus {
  outline: none; border-color: var(--mood-a); box-shadow: 0 0 0 3px rgba(79,140,28,.16);
}
.form-note { font-size: 12.5px; color: var(--mist-dim); margin: 0; }
/* #cf-status ist im Ruhezustand leer (kein sichtbarer Technik-Hinweis
   mehr) und wird nur bei Validierung/Versand per JS befuellt; ohne
   Inhalt soll die leere Zeile keine zusaetzliche Formularhoehe kosten. */
#cf-status:empty { display: none; }

/* ---------- Fusszeile ---------- */

/* Kompakter Fusszeilen-Rhythmus (Kundenwunsch: ca. 15-20% geringere
   Gesamthoehe) — ausschliesslich Abstaende/Padding reduziert, keine
   Schriftgroessen, Farben, Logo-Groesse oder Spaltenaufteilung
   angefasst. Gilt global, da footer.site auf jeder Seite identisch
   eingebunden ist. */
footer.site { border-top: 1px solid var(--line); background: rgba(237,242,248,.92); padding-block: clamp(30px, 3.6vw, 46px) 22px; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 22px; border-bottom: 1px solid var(--line-soft);
}
.foot-grid h4 {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist-dim); margin: 0 0 10px;
}
.foot-grid ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.foot-grid li, .foot-grid li a { font-size: 14px; color: var(--mist); text-decoration: none; }
.foot-grid li a:hover { color: var(--mood-a); }
.foot-brand img { width: 200px; height: auto; }
.foot-brand .fclaim {
  margin: 12px 0 0;
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase; font-size: 17px; letter-spacing: .03em;
}
.foot-bottom { padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 6px; font-size: 12.5px; color: var(--mist-dim); }
.foot-bottom a { color: var(--mist-dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--mood-a); }
/* Button statt Link, weil er den Cookie-Banner per JS wieder oeffnet statt
   zu navigieren — optisch aber 1:1 wie die Impressum/Datenschutz-Links
   daneben, damit er sich nicht als eigenes Element abhebt. */
.footer-link-btn {
  font: inherit; color: var(--mist-dim); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
}
.footer-link-btn:hover { color: var(--mood-a); }

/* Trennstriche zwischen den Footer-Bottom-Links: eigenes, nicht-klickbares
   Element (statt "·" im Fliesstext), damit Link + Trenner beim
   Umbruch als Einheit umbrechen und nie ein Trenner allein am
   Zeilenanfang/-ende steht. */
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.foot-link-group { display: inline-flex; align-items: center; gap: 10px; }
.foot-sep { color: var(--mist-dim); }

/* ---------- Cookie-Banner ----------
   Schwebende Karte am unteren Bildschirmrand, gleiche Optik wie die
   uebrigen "erhobenen" Flaechen der Seite (.nav-dropdown-panel-Schatten,
   .mini-testi-Radius/-Hintergrund) statt einer neu erfundenen Gestaltung.
   Aktuell setzt die Seite keine Statistik-/Marketing-Cookies — die
   Kategorien sind bewusst schon vorbereitet, damit spaetere Tools (z. B.
   Analytics) sich einfach per T4ITConsent.has("statistics") einhaengen
   lassen, ohne den Banner neu bauen zu muessen. */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300;
  max-width: 760px; margin: 0 auto;
  background: linear-gradient(168deg, rgba(255,255,255,.98), rgba(244,247,251,.99));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(10,22,48,.28);
  padding: 22px 24px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.cookie-banner-text { flex: 1 1 320px; min-width: 0; }
.cookie-banner-title { margin: 0 0 6px; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; font-size: 15px; color: var(--white); }
.cookie-banner-text p:not(.cookie-banner-title) { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--mist); }
.cookie-banner-text a { color: var(--mood-a); }
.cookie-banner-actions { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner-actions .btn { padding: 11px 18px; font-size: 13.5px; }

.cookie-settings { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.cookie-settings[hidden] { display: none; }
.cookie-cat + .cookie-cat { margin-top: 14px; }
.cookie-cat-head label { display: flex; align-items: center; gap: 9px; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; font-size: 13.5px; color: var(--white); cursor: pointer; }
.cookie-cat-head input { width: 16px; height: 16px; accent-color: var(--mood-a); }
.cookie-cat-head input:disabled { cursor: default; }
.cookie-cat p { margin: 4px 0 0 25px; font-size: 12.5px; line-height: 1.5; color: var(--mist-dim); }

@media (max-width: 620px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Seitenkopf der Unterseiten ---------- */

.page-head { padding-block: clamp(52px, 7vw, 100px) clamp(30px, 4vw, 48px); }
.page-head h1 { font-size: clamp(40px, 6vw, 78px); margin: 0 0 20px; max-width: 17ch; }

/* Cloud-Hero nutzt .page-head 1:1 wie Managed IT; nur die Headline
   braucht mehr Breite als 17ch, damit der zweizeilige Umbruch
   "Die Cloud, / die zu Ihnen passt." erhalten bleibt. */
.cloud-page-head h1 { max-width: 20ch; }

/* Gleiches Prinzip fuer IT-Sicherheit: "Sicherheit beginnt," (19
   Zeichen) und "bevor etwas passiert." (21 Zeichen) sind beide laenger
   als die geteilten 17ch von .page-head h1 und brechen dadurch selbst
   nochmal um (4 statt 2 Zeilen). */
.security-page-head h1 { max-width: 22ch; }

/* ---------- Cloud-Nutzenraster ----------
   Ersetzt sechs identische Karten durch ein zusammenhaengendes Raster
   mit feinen Trennlinien (gleiches Prinzip wie .benefits/.crew auf der
   Startseite) plus dezente Verlaufs-Nummerierung statt Icons. */
.cloud-benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.cloud-benefit {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.2vw, 24px);
  display: flex; flex-direction: column; gap: 8px;
}
/* Nummer + Kategorie in einer Meta-Zeile, in der Farbe/Grosse der
   Eyebrow-Systematik (.label) statt der bisherigen Verlaufs-Nummer allein —
   dient nur der Orientierung, darf die h3 darunter nicht ueberstrahlen. */
.cloud-benefit .num {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mood-a);
}
.cloud-benefit h3 { margin: 0; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; text-transform: uppercase; font-size: 16px; letter-spacing: .01em; }
.cloud-benefit p { margin: 0; font-size: 14.5px; color: var(--mist); }

/* Etwas engerer Abstand zwischen Einleitung und Card-Raster, nur auf
   der Cloud-Seite — .sec-head margin-bottom bleibt fuer alle anderen
   Abschnitte unveraendert. */
#view-cloud .band .sec-head { margin-bottom: clamp(6px, 1.6vw, 24px); }

/* ---------- IT-Sicherheit ----------
   Eigene, aber bewusst identisch aufgebaute Kopie von .cloud-benefits/
   .cloud-benefit (numeriertes 3-Spalten-Kartenraster), damit beide
   Seiten unabhaengig voneinander angepasst werden koennen. */
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.security-card {
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.2vw, 24px);
  display: flex; flex-direction: column; gap: 8px;
}
.security-card .num {
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mood-a);
}
.security-card h3 { margin: 0; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700; text-transform: uppercase; font-size: 16px; letter-spacing: .01em; }
.security-card p { margin: 0; font-size: 14.5px; color: var(--mist); }

/* Abstand zwischen Hero-Fliesstext (.lede) und "Schutz auf mehreren
   Ebenen." auf ca. die Haelfte reduziert (Kundenwunsch) — nur die
   Top-Padding dieser ersten Band-Section, das Hero-Padding (.page-head,
   sitewide geteilt) bleibt unveraendert. */
#view-security .page-head + section.band { padding-top: clamp(15px, 2vw, 30px); }

/* ---------- Kommunikation & Technik: kompaktere Section-Abstaende ----------
   Die Seite reiht sechs Band-Sections aneinander (statt drei bis vier wie auf
   den uebrigen Leistungsseiten) — mit den sitewide-Standardwerten summierte
   sich das zu sehr grossen Leerflaechen zwischen den Bereichen. Nur die
   Abstaende (Section-Padding, sec-head-Abstand, Step-Padding) werden
   gestaucht; Schrift, Card-Groessen und Inhalte bleiben unveraendert.
   Analog zum #view-security-Hero-Uebergang direkt oben. */
#view-comm .page-head + section.band { padding-top: clamp(20px, 3vw, 40px); }
#view-comm section.band { padding-block: clamp(40px, 5.2vw, 76px); }
#view-comm .sec-head { margin-bottom: clamp(20px, 2.6vw, 36px); }
#view-comm .step { padding: 14px 0; }

/* "Kamera & Videoueberwachung": "Videoueberwachung" ist als einzelnes,
   nicht trennbares Wort bei der regulaeren .sec-head-h2-Groesse
   (clamp(32px,4.6vw,54px)) breiter als die linke sec-head-Spalte und
   ueberlief dadurch sichtbar in die rechte Beschreibungsspalte. Fester
   Umbruch nach "&" per <br> statt dem fragilen automatischen Umbruch,
   plus moderat kleinere, eigene Groesse nur fuer diese Headline, damit
   "Videoueberwachung" auf einer eigenen Zeile innerhalb der Spalte
   bleibt. Gleiche Schriftfamilie/-staerke/Zeilenhoehe (.heavy) wie die
   uebrigen Section-Headlines dieser Seite, nur der Skalierungsfaktor
   ist reduziert. */
#view-comm .comm-cam-headline { font-size: clamp(25px, 3.6vw, 42px); }

/* ---------- Bewegung aus ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .seq-step { opacity: 1 !important; }
  .seq-sticky { position: static; }
  .seq-step { min-height: 0; }
  .expand { clip-path: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  /* Reihenfolge auf schmalen Breiten: Text, dann Slider, dann Button
     (statt Button direkt unter dem Text) — .ref-intro "entpackt" sich
     dafuer per display:contents zu einzeln sortierbaren Grid-Items,
     ohne die Desktop-Struktur aendern zu muessen. */
  .split-ref .ref-intro { display: contents; }
  .split-ref .mini-testi { order: 2; }
  .split-ref .ref-cta { order: 3; }
  .contact-grid { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(odd) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  /* Nur noch 1 Card sichtbar — Paarhoehen-Angleichung entfaellt, jede
     Card darf ihre natuerliche Hoehe behalten statt unnoetigen
     Leerraum unter kuerzeren Aussagen zu erzeugen. */
  .testimonial-track { align-items: flex-start; }
  .testimonial-track .quote { flex-basis: 100%; }
  /* Google-Bewertungen: 2 statt 1 Karte auf Tablet, solange Platz reicht
     (Vorgabe) — ueberschreibt die generische 100%-Regel direkt darueber
     nur fuer diese Karten, per hoeherer Regel-Reihenfolge. */
  .google-reviews-track .quote { flex-basis: calc(50% - 8px); }
  .posters { grid-template-columns: 1fr; }
  /* Sechs Projektbeispiele: auf Laptop/Tablet 2 statt 1 Spalte, solange
     Platz reicht (Vorgabe) — echte 1-Spalten-Stapelung erst auf Mobile
     im 620px-Breakpoint weiter unten. */
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit:nth-child(3) { border-left: 0; }
  .benefit:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .cloud-benefits { grid-template-columns: repeat(2, 1fr); }
  .security-grid { grid-template-columns: repeat(2, 1fr); }
  .models { grid-template-columns: 1fr; }
  #servicemodelle .model { flex-basis: 100%; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .crew-item { flex-basis: calc(50% - 7px); }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-four { opacity: .22; right: -14vw; }
  .hero-four { opacity: .4; right: -16vw; }

  /* Sequenz wird zur normalen Abfolge */
  .seq-grid { grid-template-columns: 1fr; }
  .seq-sticky { position: static; margin-bottom: 30px; }
  .seq-step { min-height: 0; opacity: 1; padding-block: 18px; border-top: 1px solid var(--line-soft); }
  .seq-step:first-child { border-top: 0; }
}

/* Eingeklapptes Menue. Keine feste Breite: das Skript misst, ob alle
   Menuepunkte in die Zeile passen, und setzt .collapsed nur dann. */
.topbar.collapsed .topbar-inner { position: relative; }
.topbar.collapsed .nav {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 2px;
  padding: 10px var(--gutter) 18px;
  background: rgba(244,247,251,.98); border-bottom: 1px solid var(--line);
  display: none;
}
.topbar.collapsed .nav.open { display: flex; }
.topbar.collapsed .nav a { padding: 13px 14px; font-size: 14px; }
.topbar.collapsed .nav a.active::after { left: 14px; right: auto; width: 24px; bottom: 7px; }
.topbar.collapsed .nav-toggle { display: inline-block; }
.topbar.collapsed .btn { margin-left: 4px; }

/* "Leistungen" wird im eingeklappten Menue zum Akkordeon statt zum
   Hover-Panel: Trigger ueber volle Breite, Panel darunter statt
   ueberlagert, Klick oeffnet/schliesst ueber .open (main.js). */
.topbar.collapsed .nav-dropdown { display: flex; flex-direction: column; }
.topbar.collapsed .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: 13px 14px; font-size: 14px; }
.topbar.collapsed .nav-dropdown.active .nav-dropdown-trigger::after { left: 14px; right: auto; width: 24px; bottom: 7px; }
.topbar.collapsed .nav-dropdown-panel {
  display: none;
  position: static; transform: none;
  min-width: 0; border: 0; box-shadow: none; border-radius: 0;
  background: transparent;
  padding: 0 0 6px 14px;
}
.topbar.collapsed .nav-dropdown.open .nav-dropdown-panel { display: flex; }
.topbar.collapsed .nav-dropdown-panel a { padding: 10px 14px; font-size: 13px; }

@media (max-width: 880px) {
  .topbar .btn { display: none; }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile-lead, .tile-wide { grid-column: span 1; }
  .tile-wide { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tile-wide h3 { width: auto; }
  /* #leistungen hat 6 Tiles: die letzte einfache Card (Kommunikation &
     Technik) bekommt hier volle Breite, damit sie zusammen mit
     IT-Beratung (.tile-wide) zwei saubere volle Zeilen bildet, statt
     isoliert neben einer leeren Position zu stehen. */
  #leistungen .bento .tile-wide { grid-column: span 2; }
  #leistungen .bento .tile:nth-child(5) { grid-column: span 2; }
  .duo { flex-direction: column; align-items: flex-start; gap: 20px; }
  .step { grid-template-columns: 56px minmax(0,1fr); }
  .step .num { font-size: 28px; }
  .hero-four { opacity: .26; }
  /* Karriere-Hero ist nach dem Entschlacken (Punkt 2) niedriger als
     frueher, dadurch rueckt die vertikal zentrierte "4" naeher an die
     Rollenliste heran. Nur hier zusaetzlich abgedunkelt, damit die
     Stellenbezeichnungen unter der "4" lesbar bleiben; Position/Groesse
     bleiben unveraendert wie auf den anderen Seiten. !important noetig,
     weil main.js .hero-four.style.opacity scroll-abhaengig per Inline-
     Style setzt (siehe "Hero: der Text tritt zurueck..."), was sonst
     jede normale Stylesheet-Regel ueberschreiben wuerde. */
  #view-career .hero-four { opacity: .1 !important; }
}

@media (max-width: 620px) {
  /* .bento wird hier einspaltig — die span-2-Regel fuer .tile-wide
     (gedacht fuer die 2-spaltige Tablet-Ansicht ab 880px) muss deshalb
     ausdruecklich zurueckgesetzt werden, sonst erzwingt sie trotz nur
     einer expliziten Spalte eine zusaetzliche implizite Spalte. */
  #leistungen .bento .tile-wide { grid-column: span 1; }
  #leistungen .bento .tile:nth-child(5) { grid-column: span 1; }

  /* Vertikaler Rhythmus auf Mobile: die Section-Paddings folgen sonst
     ueberall dem clamp()-Mindestwert (z.B. 60px bei .band), der bei
     15+ Sections pro Seite auf dem Handy schnell zu einer sehr langen
     Seite aufsummiert. Nur hier auf ca. 60-70% reduziert — Desktop und
     Tablet (>620px) bleiben unveraendert bei ihren bisherigen Werten. */
  section.band { padding-block: 40px; }
  .hero { padding-block: 38px 34px; }
  .page-head { padding-block: 36px 20px; }
  #view-security .page-head + section.band { padding-top: 10px; }
  .contact-page-head { padding-block: 28px 16px; }
  .sec-head { margin-bottom: 20px; }
  #view-comm .page-head + section.band { padding-top: 10px; }
  #view-comm section.band { padding-block: 28px; }
  #view-comm .sec-head { margin-bottom: 14px; }
  .cta-inner { padding-block: 32px; }
  .cta-band-compact .cta-inner { padding-block: 24px 28px; }
  footer.site { padding-block: 22px 18px; }
  /* Auf Mobile stapelt .foot-grid (siehe grid-template-columns:1fr
     weiter unten) Marke/Leistungen/Unternehmen/Kontakt untereinander —
     der Abstand dazwischen kommt aus demselben Grid-Gap wie auf
     Desktop und darf hier ebenfalls etwas enger sein, ohne die
     Linkgruppen ineinanderlaufen zu lassen. */
  .foot-grid { gap: 20px; padding-bottom: 18px; }
  .foot-bottom { padding-top: 12px; }
  /* Zahlen & Fakten nehmen im Ein-Spalten-Layout (5 Zeilen) auf dem Handy
     sehr viel Hoehe ein — daher hier wieder 2 Spalten (wie ab 1000px)
     statt 1, dazu Padding und Zahlengroesse zusaetzlich reduziert. */
  #view-home .facts .fact, #view-refs .facts .fact { padding-block: 16px; }
  #view-home .facts .fact b, #view-refs .facts .fact b { font-size: 24px; margin-bottom: 4px; }
  section.tech-band { padding-bottom: 24px; }
  .seq { padding-block: 28px 0; }

  /* Auf Wunsch nur auf Mobile ausgeblendet: das Statement "Ein
     Serverausfall kostet Umsatz...". Auf Desktop/Tablet bleibt es
     unveraendert sichtbar. #leistungen holt sich sein Top-Padding
     zurueck, da es sich sonst auf den Abstand des jetzt versteckten
     Statements davor verlassen haette (!important noetig, um das
     inline gesetzte style="padding-top:0" fuer Desktop/Tablet zu
     ueberschreiben). Der Kampagnen-Bereich, der hier frueher ebenfalls
     ausgeblendet wurde, ist inzwischen komplett aus der Seite entfernt. */
  #view-home .statement { display: none; }
  #leistungen { padding-top: 40px !important; }

  /* Hero-Eyebrow und die Meta-Zeile (Adresse/Servicezeiten/Bereitschaft)
     nur auf Mobile raus — auf Desktop/Tablet unveraendert sichtbar. */
  #view-home .hero .eyebrow,
  #view-home .hero-meta { display: none; }

  /* Sechs Projektbeispiele auf Mobile einspaltig, jede Card mit ihrer
     natuerlichen Hoehe (kein Grid-Stretch mehr, da nur 1 Item pro Reihe). */
  .cases { grid-template-columns: 1fr; }

  /* Karriere-Benefits: 2x2 statt einspaltig gestapelt (Kundenwunsch),
     dazu kompaktere Card-Innenabstaende/-Typografie nur auf Mobile —
     .benefits-grid wird sitewide ausschliesslich hier verwendet, eine
     zusaetzliche #view-career-Klammer ist daher nicht noetig. */
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .benefit { padding: 16px; gap: 6px; min-width: 0; }
  .benefit .ico { width: 22px; height: 22px; }
  /* "Weiterbildungsbudget"/"Herstellerzertifizierungen" sind lange,
     nicht trennbare Woerter und ueberliefen bei 2 Spalten (~133px
     Cardbreite) die Card-Grenze — overflow-wrap erlaubt hier einen
     Wortumbruch statt Ueberlauf, in Headline wie Beschreibungstext. */
  .benefit h3 { font-size: 14.5px; overflow-wrap: break-word; }
  .benefit p { font-size: 12.5px; overflow-wrap: break-word; }
  .cloud-benefits { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }

  /* Kundenlogo auf Mobile unter statt neben den Personenblock, damit
     Name/Rolle/Firma bei sehr langen Firmennamen nicht mit dem Logo um
     die Breite konkurrieren (Kundenwunsch: bei Bedarf umbrechen erlaubt). */
  .quote figcaption, .mini-quote figcaption { flex-direction: column; align-items: flex-start; gap: 10px; }
  .quote-logo { align-self: flex-start; }
  /* Sehr breite Wortmarken (z. B. Gemein Küche & Interieur) wuerden mit dem
     desktop-max-width breiter als die Mobile-Card selbst und einen
     horizontalen Overflow verursachen — hier enger begrenzt. */
  .quote-logo img.quote-logo-wide { max-width: min(150px, 34vw); }
  .quote-logo img.quote-logo-lg { max-width: min(150px, 34vw); }
  .quote-logo img.quote-logo-wide.quote-logo-lg { max-width: min(150px, 34vw); }

  /* Google-Bewertungen: 1 Karte auf Mobile (ueberschreibt die 2er-Regel
     aus dem 1000px-Breakpoint, da dieser Block spaeter in der Kaskade
     steht und bei <=620px beide Bedingungen zutreffen). */
  .google-reviews-track .quote { flex-basis: 100%; }
  .google-reviews-head { flex-direction: column; align-items: flex-start; }
  .roles li { gap: 11px; flex-wrap: wrap; }
  .bento { grid-template-columns: 1fr; }
  .tile-lead ul { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .step ul { grid-template-columns: 1fr; }
  .mrow { grid-template-columns: minmax(0,1fr) 60px 60px; }
  .spec { grid-template-columns: 1fr; gap: 4px; }
  .statement p { max-width: none; }

  /* ---------- Karriere: Mobile-Kompaktierung ----------
     Nur diese Seite, nur bis 620px — Desktop/Tablet bleiben unangetastet. */

  /* Hero: ca. 25-30% weniger vertikale Abstaende als der sitewide
     .hero-Mobile-Wert (38px/34px) direkt oben, plus engere interne
     Abstaende zwischen Eyebrow/Headline/Text/CTA. */
  #view-career .hero { padding-block: 28px 24px; }
  #view-career .hero .eyebrow { margin-bottom: 12px; }
  #view-career .hero h1 { font-size: 32px; margin-bottom: 4px; }
  #view-career .wordmark-line { margin-bottom: 20px; }
  #view-career .hero .lede { margin-bottom: 20px; }
  #view-career .cta-row { margin-bottom: 0; }

  /* Offene Stellen: Cards kompakter, Inhalte per Akkordeon eingeklappt.
     .job-collapse nutzt grid-template-rows 0fr->1fr fuer eine ruhige,
     hoehenbasierte Oeffnen/Schliessen-Animation ohne JS-Hoehenmessung. */
  #view-career .job { padding: 20px 20px 18px; gap: 10px; }
  #view-career .job-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; margin: 2px 0 0; padding: 8px 0; border: 0; background: none;
    font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 700;
    font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mood-a); cursor: pointer; text-align: left;
  }
  #view-career .job-toggle-icon { position: relative; width: 16px; height: 16px; flex: none; }
  #view-career .job-toggle-icon::before,
  #view-career .job-toggle-icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: var(--mood-a);
    transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease;
  }
  #view-career .job-toggle-icon::before { width: 12px; height: 2px; }
  #view-career .job-toggle-icon::after { width: 2px; height: 12px; }
  #view-career .job.open .job-toggle-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
  #view-career .job-collapse {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
  }
  #view-career .job.open .job-collapse { grid-template-rows: 1fr; }
  #view-career .job-collapse-inner {
    display: flex; flex-direction: column; gap: 14px; overflow: hidden; min-height: 0;
  }
  #view-career .job.open .job-collapse-inner { padding-top: 4px; }
  #view-career .job ul { gap: 8px; }

  /* Kein verschachteltes Akkordeon: die aeussere Stelle-Karte steuert
     die Sichtbarkeit bereits vollstaendig, "Mehr anzeigen" entfaellt
     hier und die restlichen Punkte stehen beim Aufklappen direkt mit da. */
  #view-career .job-more-toggle { display: none; }
  #view-career .job-more { grid-template-rows: 1fr; }

  /* Arbeiten bei uns: engerer Fliesstext, kleinerer Abstand zur Liste
     daneben (die auf Mobile darunter steht) und zwischen den Punkten. */
  #arbeiten-bei-uns .split { gap: 20px; }
  #arbeiten-bei-uns h2 { margin-bottom: 10px; }
  #arbeiten-bei-uns .rise > p { margin: 0 0 10px; }
  #arbeiten-bei-uns .rise > p:last-of-type { margin-bottom: 0; }
  #arbeiten-bei-uns .check-list { gap: 8px; margin-top: 4px; }

  /* So laeuft deine Bewerbung: gleiches Kompakt-Muster wie bereits bei
     IT-Support/IT-Sicherheit, hier nur auf Mobile statt sitewide. */
  #view-career .step { padding: 12px 0; gap: 14px; }
  #view-career .step h3 { margin-bottom: 4px; }
  #view-career .step p { margin-bottom: 0; }

  /* Jetzt bewerben: etwas engerer Abstand zwischen Headline/Text/Button. */
  #bewerbung-cta .cta-inner h2 { margin-bottom: 12px; }
  #bewerbung-cta .cta-inner p { margin: 0 0 16px; }
}

/* Karriere-Benefits auf sehr schmalen Displays (z. B. 320px): bei 2 Spalten
   brechen mehrsilbige Headlines („Wahlbenefit", „Arbeitszeiten" …) dort
   mangels Platz mitten im Wort um. Statt Schrift zu verkleinern faellt das
   Grid hier auf 1 Spalte zurueck — restliche Card-Gestaltung unveraendert. */
@media (max-width: 360px) {
  .benefits-grid { grid-template-columns: 1fr; }
}