/* Schriften: zwei variable Latin-Subsets, selbst gehostet.
   Google liefert je Familie EINE variable Datei fuer alle Gewichte - deshalb
   zwei Dateien (70 KB) statt sechs (212 KB) und statt 113 @font-face-Regeln.
   Das Original holt sie von fonts.gstatic.com und app.framerstatic.com. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/schriften/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/schriften/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Designsystem enno.dev - jeder Wert am Original gemessen (getComputedStyle),
   nicht hergeleitet. Messgrundlage: archiv/design.json, drei Breakpoints,
   je eigener Ladevorgang. Framers Breakpoints: >=1280 / 810-1279 / <=809. */

:root {
  /* --- Farben (Zinc-Skala des Originals) --- */
  --f-schwarz:      #09090b;  /* Hero, dunkle Sektionen */
  --f-schwarz-weich:#141418;  /* dunkle Karten */
  --f-zinc-900:     #18181b;
  --f-zinc-800:     #27272a;
  --f-zinc-700:     #3f3f46;
  --f-zinc-600:     #52525b;
  --f-zinc-500:     #71717a;  /* Fliesstext gedaempft */
  --f-zinc-400:     #a1a1aa;
  --f-zinc-300:     #d4d4d8;
  --f-zinc-200:     #e4e4e7;  /* Linien, Rahmen */
  --f-zinc-100:     #f4f4f5;
  --f-zinc-50:      #fafafa;
  --f-weiss:        #fff;
  --f-salbei:       #f2f5f1;  /* helle Sektionen (Projekte, Zusammenarbeit, FAQ) */
  --f-signal:       #dbf227;  /* Hauptknopf "Projekt anfragen" */
  --f-signal-text:  #0d0d0f;  /* Text auf Signalfarbe */

  /* --- Schrift --- */
  --s-ueberschrift: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s-text:         'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Groessen: Desktop (>=1280). Die Sperrung ist im Original durchgaengig
     -0.04em auf h2/h3, h1 laeuft ohne. */
  --t-h1:   60px;  --t-h1-zeile:   72px;
  --t-h2:   44px;  --t-h2-zeile: 61.6px;
  --t-h3:   36px;  --t-h3-zeile: 50.4px;
  --t-h4:   30px;  --t-h4-zeile:   36px;
  --t-h5:   24px;  --t-h5-zeile: 33.6px;
  --t-h6:   20px;  --t-h6-zeile:   30px;
  --t-text: 16px;  --t-text-zeile: 28.8px;
  --t-klein:14px;  --t-klein-zeile: 21px;
  --t-sperrung: -0.04em;
  --t-gewicht-ueberschrift: 600;

  /* --- Mass und Raster --- */
  --breite-inhalt: 1200px;
  --breite-text:    800px;
  --breite-schmal:  650px;
  --polster-seite:   24px;

  /* --- Radien (nach Haeufigkeit im Original) --- */
  --r-klein:  8px;
  --r-basis: 10px;   /* Knoepfe, die haeufigste Form */
  --r-karte: 20px;
  --r-gross: 50px;
  --r-pille: 999px;

  /* --- Schatten --- */
  --schatten-karte:  rgba(0, 0, 0, .45) 0 14px 34px -12px, rgba(0, 0, 0, .04) 0 1px 2px 0;
  --schatten-dunkel: rgba(0, 0, 0, .7) 0 20px 50px -24px;
  --schatten-weich:  rgba(0, 0, 0, .25) 0 4px 14px 0;
}

/* Tablet: 810-1279px */
@media (max-width: 1279.98px) {
  :root {
    --t-h1: 48px;  --t-h1-zeile: 57.6px;
    --t-h2: 38px;  --t-h2-zeile: 53.2px;
    --t-h3: 29px;  --t-h3-zeile: 40.6px;
    --t-h5: 20px;  --t-h5-zeile:   28px;
    --t-h6: 18px;  --t-h6-zeile:   27px;
  }
}

/* Mobil: bis 809px */
@media (max-width: 809.98px) {
  :root {
    --t-h1: 38px;  --t-h1-zeile: 45.6px;
    --t-h2: 28px;  --t-h2-zeile: 39.2px;
    --t-h3: 23px;  --t-h3-zeile: 32.2px;
    --t-h5: 18px;  --t-h5-zeile: 25.2px;
    --t-h6: 16px;  --t-h6-zeile:   24px;
    --t-text: 15px; --t-text-zeile: 27px;
    --polster-seite: 16px;
  }
}

/* ============================================================
   Grundlagen
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--s-text);
  font-size: var(--t-text);
  line-height: var(--t-text-zeile);
  color: var(--f-schwarz);
  background: var(--f-weiss);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--f-signal);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--f-schwarz); color: var(--f-weiss);
  border-radius: 0 0 var(--r-basis) 0;
}
.sprungmarke:focus { left: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--s-ueberschrift);
  font-weight: var(--t-gewicht-ueberschrift);
  letter-spacing: var(--t-sperrung);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--t-h1-zeile); letter-spacing: normal; }
h2 { font-size: var(--t-h2); line-height: var(--t-h2-zeile); }
h3 { font-size: var(--t-h3); line-height: var(--t-h3-zeile); }
h4 { font-size: var(--t-h4); line-height: var(--t-h4-zeile); }
h5 { font-size: var(--t-h5); line-height: var(--t-h5-zeile); }
h6 { font-size: var(--t-h6); line-height: var(--t-h6-zeile); }

.innen {
  /* Das Original misst 1200 px INHALT plus Polster aussen. Mit
     max-width:1200 + padding blieben nur 1152 uebrig - auf allen Seiten. */
  width: 100%;
  max-width: calc(var(--breite-inhalt) + 2 * var(--polster-seite));
  margin-inline: auto;
  padding-inline: var(--polster-seite);
}

/* ============================================================
   Knoepfe - Werte am Original gemessen
   ============================================================ */
.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-basis);
  font-family: var(--s-ueberschrift);
  text-align: center;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.knopf:hover { transform: translateY(-1px); }

.knopf--signal {            /* "Projekt anfragen": #dbf227, 14/24, 15px/700 */
  background: var(--f-signal); color: var(--f-signal-text);
  padding: 14px 24px; font-size: 15px; font-weight: 700;
}
.knopf--signal:hover { background: #cbe419; }

.knopf--hell {              /* "Anfragen" in der Kopfzeile */
  background: var(--f-zinc-100); color: var(--f-schwarz);
  padding: 9px 16px; font-size: 14px; font-weight: 600;
}
.knopf--hell:hover { background: var(--f-zinc-200); }

.knopf--linie {
  border: 1px solid var(--f-zinc-200); color: var(--f-schwarz);
  padding: 13px 23px; font-size: 15px; font-weight: 600;
}
.knopf--linie:hover { background: var(--f-zinc-100); }

/* Etikett-Pille. Kein echter Rahmen im Box-Modell - das Original haelt die
   Hoehe ueber Polster, ein 1-px-Rahmen wuerde sie um 2px wachsen lassen. */
.pille {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--f-zinc-100); border-radius: var(--r-pille);
  padding: 7px 14px 7px 12px; width: fit-content;
  font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  color: #47739e; white-space: nowrap;
}
.pille__punkt { width: 7px; height: 7px; border-radius: var(--r-pille); background: currentColor; flex-shrink: 0; }

/* ============================================================
   Kopfzeile - am Original gemessen: dunkel auf JEDER Seite, 72 px hoch,
   position: relative (das Original klebt NICHT beim Scrollen), innen 1200 px.
   Das Logo ist weiss - ein heller Kopf macht es unsichtbar.
   Navigationslinks: Inter Tight 16/400 weiss, nicht Plus Jakarta Sans.
   ============================================================ */
.kopf { background: var(--f-schwarz); color: var(--f-weiss); }

.kopf__innen {
  display: flex; align-items: center; gap: 32px;
  max-width: var(--breite-inhalt); margin-inline: auto;
  min-height: 72px; padding-inline: var(--polster-seite);
}
.kopf__logo img { width: 130px; height: auto; }
.kopf__nav { margin-right: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__punkt { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--r-basis);
  font-family: var(--s-text); font-size: 16px; font-weight: 400;
  color: var(--f-weiss); opacity: .86;
  transition: opacity .15s ease, background-color .15s ease;
}
.nav__link:hover, .nav__punkt--klapp:hover .nav__ausloeser { opacity: 1; background: rgba(255,255,255,.08); }
.nav__link--aktiv { opacity: 1; font-weight: 600; }
.nav__pfeil { transition: transform .2s ease; }
.nav__ausloeser[aria-expanded="true"] .nav__pfeil { transform: rotate(180deg); }

/* Abstand zum Ausloeser: im Original 14 px */
.untermenue {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 110;
  min-width: 250px; padding: 8px;
  background: var(--f-weiss); border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte);
}
.untermenue__link {
  display: block; padding: 10px 14px; border-radius: var(--r-klein);
  font-family: var(--s-text); font-size: 15px; font-weight: 500; color: var(--f-zinc-700);
}
.untermenue__link:hover { background: var(--f-zinc-100); color: var(--f-schwarz); }

.kopf__knopf {
  background: rgba(255,255,255,.12); color: var(--f-weiss);
  padding: 9px 16px; font-family: var(--s-text); font-size: 14px; font-weight: 600;
}
.kopf__knopf:hover { background: rgba(255,255,255,.2); }

.kopf__menueknopf { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.kopf__menueknopf span { display: block; width: 22px; height: 2px; background: var(--f-weiss); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.kopf__menueknopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf__menueknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__menueknopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilmenue { padding: 8px var(--polster-seite) 28px; background: var(--f-schwarz); border-top: 1px solid rgba(255,255,255,.12); }
.mobilmenue__liste a { display: block; padding: 13px 0; font-size: 17px; font-weight: 600; color: var(--f-weiss); border-bottom: 1px solid rgba(255,255,255,.08); }
.mobilmenue__unter a { padding-left: 16px; font-size: 15px; font-weight: 400; color: var(--f-zinc-400); }
.mobilmenue__knopf { margin-top: 20px; width: 100%; justify-content: center; }

@media (max-width: 1023.98px) {
  .kopf__nav, .kopf__knopf { display: none; }
  .kopf__menueknopf { display: flex; }
  .kopf__innen { gap: 16px; justify-content: space-between; }
}
@media (min-width: 1024px) { .mobilmenue { display: none !important; } }

/* ============================================================
   Blogkarten
   ============================================================ */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1023.98px) { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639.98px)  { .karten { grid-template-columns: 1fr; } }

.karte {
  background: var(--f-weiss); border: 1px solid var(--f-zinc-200);
  border-radius: var(--r-karte); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-karte); }
.karte__link { display: flex; flex-direction: column; height: 100%; }
.karte__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--f-zinc-100); }
.karte__text { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.karte__kategorie { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--f-zinc-500); }
.karte__titel { font-size: 18px; line-height: 25.2px; font-weight: 600; }
.karte__mehr { margin-top: auto; font-size: 12px; line-height: 14.4px; font-weight: 500; }
.karte__datum { font-size: 14px; line-height: 25.2px; color: var(--f-zinc-500); }

/* ============================================================
   Blogliste und Blaettern
   ============================================================ */
.blogkopf { padding: 72px 0 40px; }
.blogkopf .innen { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.blogkopf__titel { max-width: 18ch; }
.blogliste { padding-bottom: 90px; }

.blaettern { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 56px; flex-wrap: wrap; }
.blaettern__liste { display: flex; gap: 6px; flex-wrap: wrap; }
.blaettern__seite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--r-basis); font-size: 15px; font-weight: 600;
  color: var(--f-zinc-600); background: var(--f-zinc-100);
}
.blaettern__seite:hover { background: var(--f-zinc-200); color: var(--f-schwarz); }
.blaettern__seite--aktiv { background: var(--f-schwarz); color: var(--f-weiss); }
.blaettern__pfeil { padding: 0 16px; height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-basis); border: 1px solid var(--f-zinc-200); font-size: 15px; font-weight: 600; }
.blaettern__pfeil:hover { background: var(--f-zinc-100); }

/* ============================================================
   Artikel
   ============================================================ */
.artikel { max-width: var(--breite-text); margin-inline: auto; padding: 64px var(--polster-seite) 0; }
.artikel__kopf { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; margin-bottom: 48px; }
.artikel__titel { max-width: 22ch; }
.artikel__daten { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 14px; line-height: 25.2px; color: var(--f-zinc-500); }
.artikel__autor { display: inline-flex; align-items: center; gap: 9px; }
.artikel__kuerzel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pille);
  background: var(--f-zinc-800); color: var(--f-weiss);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

.rtf { font-size: var(--t-text); line-height: var(--t-text-zeile); color: var(--f-zinc-700); }
.rtf > * + * { margin-top: 20px; }
.rtf h2 { margin-top: 52px; font-size: var(--t-h3); line-height: var(--t-h3-zeile); color: var(--f-schwarz); }
.rtf h3 { margin-top: 40px; font-size: 26px; line-height: 31.2px; font-weight: 700; color: var(--f-schwarz); }
.rtf h4, .rtf h5 { margin-top: 32px; font-size: var(--t-h6); line-height: var(--t-h6-zeile); color: var(--f-schwarz); }
.rtf p { color: var(--f-zinc-700); }
.rtf strong { color: var(--f-schwarz); font-weight: 600; }
.rtf a { color: var(--f-schwarz); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rtf a:hover { text-decoration-color: var(--f-signal); text-decoration-thickness: 2px; }
.rtf ul, .rtf ol { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; }
.rtf ul { list-style: disc; }
.rtf ol { list-style: decimal; }
.rtf li::marker { color: var(--f-zinc-400); }
.rtf blockquote {
  border-left: 3px solid var(--f-signal); padding: 4px 0 4px 22px;
  font-size: 18px; line-height: 28.8px; color: var(--f-schwarz);
}
.rtf code { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: .9em; background: var(--f-zinc-100); padding: 2px 6px; border-radius: 5px; }
.rtf img { border-radius: var(--r-karte); margin-block: 32px; }
.rtf table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rtf th, .rtf td { border: 1px solid var(--f-zinc-200); padding: 10px 14px; text-align: left; }
.rtf th { background: var(--f-zinc-100); font-weight: 600; }
/* Breite Inhalte scrollen in sich, der Seitenkoerper nie waagerecht */
.rtf > table, .rtf > pre { display: block; overflow-x: auto; }

.weitere { padding: 90px 0; background: var(--f-salbei); }
.weitere__titel { margin-bottom: 32px; font-size: var(--t-h3); line-height: var(--t-h3-zeile); }

/* ============================================================
   CTA
   ============================================================ */
.cta { padding: 90px 0; background: var(--f-schwarz); color: var(--f-weiss); }
.cta__innen { display: flex; justify-content: center; }
.cta__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: var(--breite-schmal); }
.cta__titel { font-size: var(--t-h5); line-height: var(--t-h5-zeile); }
.cta__liste { display: flex; flex-direction: column; gap: 10px; color: var(--f-zinc-300); }
.cta__liste li { position: relative; padding-left: 26px; }
.cta__liste li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: var(--r-pille); background: var(--f-signal);
}

/* ============================================================
   Fusszeile - am Original gemessen: WEISS, nicht dunkel.
   Polster 43px oben / 20px unten, Logo 127 px, Inhalt 1200 px.
   Der erste Entwurf war dunkel; dort verschwand das dunkle Logo.
   ============================================================ */
.fuss { background: var(--f-weiss); color: var(--f-zinc-500); padding: 43px 0 20px; }
.fuss__innen {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px;
  max-width: calc(var(--breite-inhalt) + 2 * var(--polster-seite));
  margin-inline: auto; padding-inline: var(--polster-seite);
}
.fuss__marke img { width: 127px; }
.fuss__einleitung { margin-top: 16px; font-size: 15px; line-height: 23.25px; color: var(--f-zinc-500); max-width: 30ch; }
.fuss__titel {
  font-family: var(--s-text); font-size: 14px; line-height: 21px; font-weight: 600;
  color: var(--f-schwarz); letter-spacing: normal; margin-bottom: 14px;
}
.fuss__spalte li + li { margin-top: 10px; }
.fuss__spalte a { font-size: 14px; line-height: 21px; color: var(--f-zinc-500); transition: color .15s ease; }
.fuss__spalte a:hover { color: var(--f-schwarz); }
.fuss__unten {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: calc(var(--breite-inhalt) + 2 * var(--polster-seite));
  margin: 40px auto 0; padding: 20px var(--polster-seite) 0;
  border-top: 1px solid var(--f-zinc-200);
  font-size: 14px; line-height: 21px; color: var(--f-zinc-500);
}
.fuss__unten a:hover { color: var(--f-schwarz); }
@media (max-width: 809.98px) {
  .fuss__innen { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fuss__marke { grid-column: 1 / -1; }
}

/* ============================================================
   Schwebender WhatsApp-Knopf - am Original gemessen
   ============================================================ */
.whatsapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 10;
  display: inline-flex; align-items: center; gap: 8px;
  background: #25d366; color: #fff;
  border-radius: 8px; padding: 12px 20px;
  font-family: var(--s-text); font-size: 16px; font-weight: 600; line-height: 1;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 8px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, .18) 0 6px 16px; }
.whatsapp__symbol { flex-shrink: 0; }
@media (max-width: 809.98px) {
  .whatsapp { right: 16px; bottom: 16px; padding: 12px 16px; }
}

/* ============================================================
   Ansprechpartner - am Original gemessen (610 px, dunkel, Bild 436x460)
   ============================================================ */
.ansprechpartner { background: var(--f-schwarz); color: var(--f-weiss); padding: 75px 0; }
.ansprechpartner__innen {
  display: grid; grid-template-columns: 436px 1fr; gap: 56px; align-items: center;
}
.ansprechpartner__bild img {
  width: 100%; aspect-ratio: 436 / 460; object-fit: cover;
  border-radius: var(--r-karte); background: var(--f-zinc-800);
}
.ansprechpartner__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.ansprechpartner__pille {
  display: inline-block; background: var(--f-weiss); color: var(--f-signal-text);
  border-radius: var(--r-pille); padding: 6px 13px;
  font-family: var(--s-ueberschrift); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.ansprechpartner__zeile {
  margin-top: 24px;
  font-family: var(--s-ueberschrift); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--f-signal);
}
.ansprechpartner__titel {
  margin-top: 12px;
  font-size: 36px; line-height: 43px; font-weight: 700; color: var(--f-weiss);
}
.ansprechpartner__satz {
  margin-top: 18px; max-width: 46ch;
  font-family: var(--s-text); font-size: 16px; line-height: 26px; color: rgba(255,255,255,.65);
}
.ansprechpartner__name {
  margin-top: 28px;
  font-family: var(--s-ueberschrift); font-size: 15px; font-weight: 600; color: var(--f-weiss);
}
.ansprechpartner__rolle {
  margin-top: 4px;
  font-family: var(--s-text); font-size: 13px; color: rgba(255,255,255,.55);
}
.ansprechpartner__knopf { margin-top: 28px; }

@media (max-width: 1023.98px) {
  .ansprechpartner__innen { grid-template-columns: 1fr; gap: 32px; }
  .ansprechpartner__bild { max-width: 380px; }
}
@media (max-width: 809.98px) {
  .ansprechpartner { padding: 56px 0; }
  .ansprechpartner__titel { font-size: 28px; line-height: 34px; }
}

/* ============================================================
   Blogkopf, Kategorieleiste und Schlusstext
   ============================================================ */
.blogkopf { padding: 72px 0 40px; }
.blogkopf__innen { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.blogkopf__etikett {
  font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--f-zinc-500);
}
.blogkopf__titel { max-width: 18ch; }
.blogkopf__vorspann { max-width: 60ch; font-size: 18px; line-height: 28.8px; color: var(--f-zinc-500); }

.kategorien { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 32px; }
.kategorien__titel {
  font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--f-zinc-500);
}
.kategorien__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.kategorien__punkt {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: var(--r-pille); background: var(--f-zinc-100);
  font-size: 14px; font-weight: 500; color: var(--f-zinc-600);
  transition: background-color .15s ease, color .15s ease;
}
.kategorien__punkt:hover { background: var(--f-zinc-200); color: var(--f-schwarz); }
.kategorien__punkt--aktiv { background: var(--f-schwarz); color: var(--f-weiss); }
.kategorien__anzahl { margin-bottom: 20px; font-size: 14px; color: var(--f-zinc-500); }

.blogtext { padding: 80px 0 90px; background: var(--f-salbei); }
.blogtext__innen { max-width: calc(var(--breite-text) + 2 * var(--polster-seite)); }
.blogtext__titel { margin-bottom: 18px; font-size: var(--t-h3); line-height: var(--t-h3-zeile); }
.blogtext__untertitel { margin: 34px 0 12px; font-size: var(--t-h6); line-height: var(--t-h6-zeile); }
.blogtext__absatz { margin-bottom: 14px; color: var(--f-zinc-700); }
.blogtext__liste { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; color: var(--f-zinc-700); }
.blogtext__liste li::marker { color: var(--f-zinc-400); }

/* ============================================================
   Danke-Seite nach dem Kontaktformular
   ============================================================ */
.danke { padding: 110px 0 120px; }
.danke__innen { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.danke__titel { max-width: 18ch; }
.danke__satz { max-width: 52ch; font-size: 18px; line-height: 28.8px; color: var(--f-zinc-500); }
.danke__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }
@media (max-width: 809.98px) { .danke { padding: 72px 0 80px; } }

/* ============================================================
   Blogkarten - Masse am Original gemessen (1440 px)
   Startseite/Leistungsseiten: Karte 430 hoch, 387 breit, Bild 339x150
   (also seitlich 24 px eingerueckt und deutlich flacher als randlos).
   /blog: vier Spalten a 285 px, erste Karte ueber die volle Breite.
   ============================================================ */
.karten { gap: 20px; }

.karte__bild {
  width: calc(100% - 48px);
  margin: 24px 24px 0;
  aspect-ratio: 339 / 150;          /* Original: 339 x 150 */
  border-radius: var(--r-basis);
}
.karte__text { padding: 18px 24px 24px; gap: 8px; }

/* Vier Spalten auf der Blogliste */
.blogliste .karten { grid-template-columns: repeat(4, 1fr); }

/* Die hervorgehobene erste Karte laeuft ueber die volle Breite */
.karte--gross { grid-column: 1 / -1; }
.karte--gross .karte__link { display: grid; grid-template-columns: 551px 1fr; align-items: center; }
.karte--gross .karte__bild { aspect-ratio: 551 / 367; margin: 24px 0 24px 24px; width: calc(100% - 24px); }
.karte--gross .karte__text { padding: 24px 32px; }
.karte--gross .karte__titel { font-size: var(--t-h5); line-height: var(--t-h5-zeile); }

@media (max-width: 1279.98px) {
  .blogliste .karten { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023.98px) {
  .blogliste .karten { grid-template-columns: repeat(2, 1fr); }
  .karte--gross .karte__link { grid-template-columns: 1fr; }
  .karte--gross .karte__bild { aspect-ratio: 339 / 150; margin: 24px 24px 0; width: calc(100% - 48px); }
}
@media (max-width: 639.98px) {
  .blogliste .karten { grid-template-columns: 1fr; }
}

/* Karten einer Reihe auf gleiche Hoehe: das Original misst 430 px (klein)
   und 369 px (grosse Karte). min-height statt fester Hoehe, damit auf
   schmalen Schirmen kein Text aus der Karte laeuft. */
.karten { grid-auto-rows: 1fr; }
.karte { min-height: 430px; }
.karte--gross { min-height: 369px; }
@media (max-width: 1023.98px) { .karte, .karte--gross { min-height: 0; } }

/* ============================================================
   Blogkarten auf dem Handy: zwei Spalten wie im Original.
   Das Original stellt sie bei 390 px in zwei Spalten a 200 px - zusammen
   400 px bei 342 px sichtbarer Breite. Die zweite Karte ragt dort heraus und
   ist nicht erreichbar (overflow-x: visible, kein Scroll-Snap).
   Hier dieselbe Zweispaltigkeit, aber mit Spalten, die in die Breite passen.
   ============================================================ */
@media (max-width: 639.98px) {
  /* Teaser (Startseite, Leistungsseiten): zwei Spalten wie im Original */
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .karte__bild { width: calc(100% - 20px); margin: 10px 10px 0; }
  .karte__text { padding: 12px 10px 14px; gap: 6px; }
  .karte__titel { font-size: 15px; line-height: 20px; }
  .karte__kategorie { font-size: 10px; letter-spacing: .06em; }
  .karte__datum, .karte__mehr { font-size: 12px; }

  /* Die Blogliste dagegen EINSPALTIG - dort misst das Original 358 px breite
     Karten mit hohem Bild (356 x 237), nicht das schmale Teaser-Raster. */
  .blogliste .karten { grid-template-columns: 1fr; gap: 16px; }
  .blogliste .karte__bild { width: calc(100% - 24px); margin: 12px 12px 0; aspect-ratio: 356 / 237; }
  .blogliste .karte__text { padding: 16px 14px 18px; gap: 8px; }
  .blogliste .karte__titel { font-size: 17px; line-height: 23px; }
  .blogliste .karte__kategorie { font-size: 11px; }
  .blogliste .karte__datum, .blogliste .karte__mehr { font-size: 13px; }

  .karte--gross { grid-column: 1 / -1; }
}


/* ---- teile/10-start.css ---- */
/* ============================================================
   STARTSEITE (/)
   Jeder Wert ist am Original gemessen (getComputedStyle, headless
   Chrome, drei eigene Ladevorgaenge bei 1440/1024/390 px) - nicht
   aus dem Screenshot geschaetzt.

   Zehn Abschnitte, der Wechsel hell/dunkel/salbei traegt die Seite:
   Hero (dunkel) - Leistungen (weiss) - Vergleich (dunkel) -
   Auszeichnungen (weiss) - Projekte (salbei) - Referenz (weiss) -
   Zusammenarbeit (salbei) - Ansprechpartner (dunkel) - Blog (weiss) -
   FAQ (salbei).
   ============================================================ */

/* ------------------------------------------------------------
   Abschnittsgeruest
   Gemessen: Innenbreite 1200 px bei 1440 (Seitenpolster 0),
   976 px bei 1024 (Polster 24) und 358 px bei 390 (Polster 16).
   Die Rechnung "1200 + 2x Polster" trifft alle drei Breiten exakt.
   Polster oben/unten sind auf allen Breiten 100 px.
   ------------------------------------------------------------ */
.abschnitt {
  --polster-abschnitt: 100px;
  --t-vorspann: 18px;
  --t-vorspann-zeile: 28.8px;
  position: relative;
}
@media (max-width: 1279.98px) {
  .abschnitt { --t-vorspann: 16px; --t-vorspann-zeile: 25.6px; }
}

.abschnitt__innen {
  width: 100%;
  max-width: calc(var(--breite-inhalt) + 2 * var(--polster-seite));
  margin-inline: auto;
  padding: var(--polster-abschnitt) var(--polster-seite);
}

.abschnitt--weiss  { background: var(--f-weiss); }
.abschnitt--dunkel { background: var(--f-schwarz); color: var(--f-weiss); }
.abschnitt--salbei { background: var(--f-salbei); }

/* Kopfblock eines Abschnitts: Etikett, Ueberschrift, Vorspann */
.abschnitt__kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.abschnitt__kopf--mitte { align-items: center; text-align: center; }

.abschnitt__vorspann {
  font-size: var(--t-vorspann);
  line-height: var(--t-vorspann-zeile);
  letter-spacing: .02em;
  color: var(--f-zinc-500);
}
.abschnitt--dunkel .abschnitt__vorspann { color: var(--f-zinc-200); }

/* Textbreiten je Abschnitt - im Original steckt jede Ueberschrift in
   einem eigenen Rahmen. Die Werte stammen aus dem Framer-CSS
   (width/max-width der Textcontainer), nicht aus der Messung allein. */
.leistungen      .abschnitt__titel,
.leistungen      .abschnitt__vorspann,
.vergleich       .abschnitt__titel,
.startblog       .abschnitt__titel { max-width: 100%; }
.vergleich       .abschnitt__vorspann { max-width: 650px; }
.auszeichnungen  .abschnitt__titel { max-width: 700px; }
.auszeichnungen  .abschnitt__vorspann { max-width: 850px; }
.projekte        .abschnitt__titel,
.projekte        .abschnitt__vorspann { max-width: 70%; }
.referenz        .abschnitt__titel,
.referenz        .abschnitt__vorspann { max-width: 800px; }
.ablauf          .abschnitt__titel { max-width: 800px; }
.ablauf          .abschnitt__vorspann { max-width: 650px; }
.startblog       .abschnitt__vorspann { max-width: 650px; }
.startfaq        .abschnitt__titel { max-width: 600px; }
@media (min-width: 810px) and (max-width: 1279.98px) {
  .vergleich .abschnitt__titel { max-width: 80%; }
}

/* Etikett ("Leistungen", "Im direkten Vergleich" ...).
   38 px hoch: 22 px Text + 2x8 px Polster. Ein echter 1-px-Rahmen
   wuerde die Pille auf 40 px wachsen lassen - das Original zeichnet
   ihn als Overlay, hier uebernimmt das ein Innenschatten. */
.abzeichen {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: 7px;
  background: var(--f-weiss);
  box-shadow: inset 0 0 0 1px var(--f-zinc-200);
  font-family: var(--s-text); font-size: 14px; line-height: 22.4px;
  letter-spacing: .02em; font-weight: 400; color: var(--f-schwarz);
  white-space: nowrap;
}
/* Zwei Sonderfaelle im Original: im Vergleichsabschnitt ist die Pille
   signalgelb, bei den Leistungen hat sie eine olivfarbene Linie. */
.abzeichen--signal { background: var(--f-signal); box-shadow: inset 0 0 0 1px var(--f-zinc-200); }
.abzeichen--oliv   { box-shadow: inset 0 0 0 1px #d6d58e; }

/* ------------------------------------------------------------
   1. Hero (dunkel, 762 px hoch bei 1440)
   ------------------------------------------------------------ */
.hero {
  background: var(--f-schwarz); color: var(--f-weiss);
  padding: 15px; overflow: hidden;
}
@media (max-width: 809.98px) { .hero { padding: 0; } }

/* Punktraster mit Verlaufsmaske - im Original zwei uebereinander
   liegende Ebenen, absolut positioniert und ohne Mausereignisse. */
.hero__muster { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__muster::before,
.hero__muster::after { content: ""; position: absolute; top: 0; height: 100%; max-height: 1000px; }
.hero__muster::before {
  left: 50%; width: 300%; transform: translateX(-50%);
  background-image: radial-gradient(rgba(255,255,255,.1) 1.5px, transparent 2.2px);
  background-size: 24px 24px;
}
.hero__muster::after {
  left: 0; right: 0;
  background:
    linear-gradient(to right, rgba(9,9,11,0) 0%, rgba(9,9,11,0) 30%, rgba(9,9,11,1) 92%),
    linear-gradient(to bottom, rgba(9,9,11,1) 0%, rgba(9,9,11,0) 16%, rgba(9,9,11,0) 72%, rgba(9,9,11,1) 100%);
}

.hero__innen {
  position: relative; z-index: 4;
  width: 100%; max-width: calc(var(--breite-inhalt) + 2 * var(--polster-seite));
  margin-inline: auto;
  padding: 100px var(--polster-seite) 50px;
  display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 1280px) { .hero__innen { padding-inline: var(--polster-seite); } }

.hero__spalten { display: flex; align-items: center; gap: 10px; }
.hero__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero__titel { max-width: 1000px; color: var(--f-weiss); }
.hero__einleitung {
  max-width: 800px;
  font-size: var(--t-vorspann); line-height: var(--t-vorspann-zeile);
  letter-spacing: .02em; color: var(--f-zinc-300);
}
.hero__knopfzeile { display: flex; align-items: center; gap: 15px; padding-block: 10px; }
.hero__trenner { width: 100%; height: 1px; background: var(--f-zinc-400); opacity: .35; }

/* Hauptknopf: gemessen 193x50, Polster 14/20/14/25, Text 16/600 */
.knopf--hero {
  background: var(--f-signal); color: var(--f-signal-text);
  padding: 14px 20px 14px 25px; gap: 5px;
  font-family: var(--s-text); font-size: 16px; font-weight: 600; line-height: 22px;
  letter-spacing: .03em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.knopf--hero:hover { background: #cbe419; }

/* --- Diagramm (ERP/PIM/WMS/CRM/Marktplatz um Shopware) --- */
.hero__diagramm { flex: none; width: 35%; height: 485px; }
.diagramm { position: relative; width: 100%; height: 100%; font-family: var(--s-ueberschrift); }
.diagramm__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.diagramm__knoten {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 8px 12px 8px 9px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.04);
  white-space: nowrap;
  animation: schweben 4s ease-in-out infinite;
}
.diagramm__symbol {
  width: 26px; height: 26px; border-radius: 8px; background: #f2f5d4;
  display: grid; place-items: center; flex-shrink: 0;
}
.diagramm__name { font-size: 13px; font-weight: 700; line-height: normal; color: #161616; letter-spacing: -.01em; }
.diagramm__schein {
  position: absolute; left: 50%; top: 50%; width: 210px; height: 210px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(219,242,39,.22) 0%, rgba(219,242,39,0) 65%);
}
.diagramm__puls {
  position: absolute; left: 50%; top: 50%; width: 110px; height: 110px;
  border-radius: 26px; border: 1.5px solid var(--f-signal); pointer-events: none;
  animation: pulsieren 3s ease-out infinite;
}
.diagramm__kern {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 110px; height: 110px; border-radius: 26px; background: #161616;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.diagramm__kernsymbol { width: 34px; height: 34px; border-radius: 10px; background: var(--f-signal); display: grid; place-items: center; }
.diagramm__kernname { font-size: 13px; font-weight: 700; line-height: normal; color: #fff; letter-spacing: -.01em; }

@keyframes schweben {
  0%, 100% { transform: translate(-50%, calc(-50% - 4px)); }
  50%      { transform: translate(-50%, calc(-50% + 4px)); }
}
@keyframes pulsieren {
  0%   { transform: translate(-50%, -50%) scale(.8); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

@media (max-width: 809.98px) {
  .hero__spalten { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero__diagramm { width: 100%; }
}

/* --- Kundenlaufband ("Vertrauen u.A von:") --- */
.laufband { display: flex; align-items: center; gap: 30px; padding: 10px 0 20px; }
.laufband__text {
  flex: none; font-size: var(--t-vorspann); line-height: var(--t-vorspann-zeile);
  letter-spacing: .01em; color: var(--f-zinc-500);
}
.laufband__fenster {
  flex: 1 1 0; min-width: 0; height: 50px; overflow: hidden;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.laufband__liste { display: flex; align-items: center; gap: 80px; flex: none; padding-right: 80px; animation: laufen 45s linear infinite; }
.laufband__fenster:hover .laufband__liste { animation-play-state: paused; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .laufband__liste { animation: none; } }

.laufband__logo { flex: none; height: 45px; }
.laufband__logo img { width: 100%; height: 100%; object-fit: cover; }
/* Die Aufhellung stammt aus dem Original: die Logos liegen als
   farbige PNG vor und werden erst im Browser auf Weiss gezogen. */
.laufband__logo--voll  img { filter: brightness(.05) invert(.9); }
.laufband__logo--grau  img { filter: brightness(.05) grayscale(1) invert(.9); }
.laufband__logo--satt  img { filter: brightness(.05) invert(.9) saturate(0); }

@media (max-width: 809.98px) {
  .laufband { flex-direction: column; align-items: flex-start; gap: 16px; }
  .laufband__fenster { width: 100%; }
}

/* ------------------------------------------------------------
   2. Leistungen (weiss) - drei Spalten, Luecke 16 px
   ------------------------------------------------------------ */
.leistungen__innen { display: flex; flex-direction: column; gap: 30px; }
.leistungen__raster { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); justify-content: center; gap: 16px; }
@media (max-width: 1279.98px) { .leistungen__raster { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
@media (max-width:  809.98px) { .leistungen__raster { grid-template-columns: minmax(240px, 1fr); } }

.leistung {
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px; border-radius: var(--r-karte);
  background: var(--f-weiss);
  box-shadow: inset 0 0 0 1px var(--f-zinc-200);
}
.leistung__symbol { width: 40px; height: 40px; flex: none; }
.leistung__inhalt { display: flex; flex-direction: column; gap: 10px; }
.leistung__titel { font-size: var(--t-h6); line-height: var(--t-h6-zeile); letter-spacing: -.01em; }
.leistung__text { letter-spacing: .03em; color: var(--f-zinc-500); }

/* ------------------------------------------------------------
   3. Vergleich Agenturen (dunkel, zwei Karten)
   ------------------------------------------------------------ */
.vergleich__innen { display: flex; flex-direction: column; gap: 30px; }
.vergleich__raster { display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-content: start; gap: 30px; }
@media (max-width: 809.98px) {
  .vergleich__raster { grid-template-columns: minmax(320px, 1fr); }
  .vergleich__kopf { min-height: 0; }
}

.vergleich__spalte { display: flex; flex-direction: column; gap: 30px; padding: 40px; border-radius: 15px; }
.vergleich__spalte--andere { background: var(--f-schwarz-weich); }
.vergleich__spalte--enno   { background: var(--f-zinc-100); color: var(--f-signal-text); box-shadow: inset 0 0 0 5px var(--f-signal); }

.vergleich__kopf { display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.vergleich__titel { font-size: 30px; line-height: 36px; letter-spacing: -.03em; color: var(--f-weiss); }
.vergleich__spalte--enno .vergleich__titel { font-size: 26px; line-height: 31.2px; font-weight: 700; letter-spacing: -.02em; color: #0d0d0d; }
.vergleich__unterzeile { font-size: 15px; line-height: 23.25px; letter-spacing: .01em; color: #96969e; }
.vergleich__spalte--enno .vergleich__unterzeile { font-size: 16px; line-height: 24px; color: #0d0d0d; }

.vergleich__liste { display: flex; flex-direction: column; gap: 15px; }
.vergleich__punkt { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 150px; }
.vergleich__zeile { display: flex; align-items: center; gap: 15px; min-height: 56px; }
.vergleich__symbol {
  flex: none; width: 17px; height: 16px; border-radius: var(--r-pille);
  display: grid; place-items: center; overflow: visible;
}
.vergleich__symbol--nein { background: #9dafbd; }
.vergleich__symbol--ja   { background: #3f701e; }
.vergleich__punkttitel { font-family: var(--s-ueberschrift); font-size: 16px; line-height: 22.4px; font-weight: 600; letter-spacing: -.01em; color: var(--f-weiss); }
.vergleich__spalte--enno .vergleich__punkttitel { font-family: var(--s-text); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: normal; color: #0d0d0d; }
.vergleich__punkttext { font-size: 15px; line-height: 23.25px; letter-spacing: .01em; color: #96969e; }
.vergleich__spalte--enno .vergleich__punkttext { color: var(--f-zinc-800); }
.vergleich__spalte--enno .vergleich__punkttext a { color: #0099ff; text-decoration: underline; text-underline-offset: 2px; }
.vergleich__linie { height: 1px; background: rgba(255,255,255,.1); }
.vergleich__spalte--enno .vergleich__linie { background: rgba(0,0,0,.1); }

/* ------------------------------------------------------------
   4. Auszeichnungen / Partner (weiss, eine dunkle Karte)
   ------------------------------------------------------------ */
.auszeichnungen__innen { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1280px) {
  .auszeichnungen .abschnitt__innen { padding-inline: calc(var(--polster-seite) + 15px); }
}
.auszeichnungen__kopf { display: flex; flex-direction: column; gap: 15px; }
.auszeichnungen__karte {
  background: var(--f-schwarz-weich); border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px; padding: 40px; overflow: hidden; color: var(--f-weiss);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.5);
}
.auszeichnungen__oben { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.auszeichnungen__einleitung { flex: 1 1 280px; min-width: 260px; }
.auszeichnungen__marke {
  font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; color: var(--f-signal); margin-bottom: 12px;
}
.auszeichnungen__titel { font-family: var(--s-ueberschrift); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: #fff; margin-bottom: 10px; }
.auszeichnungen__text { font-family: var(--s-text); font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.6); max-width: 440px; }
.auszeichnungen__badges { display: grid; grid-template-columns: auto auto; gap: 20px; flex-shrink: 0; justify-content: end; }
.auszeichnungen__badges div { height: 120px; display: flex; align-items: center; justify-content: center; }
.auszeichnungen__badges img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.auszeichnungen__zertifikate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.auszeichnungen__zertifikate div { border-radius: var(--r-klein); overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; aspect-ratio: 250 / 110; }
.auszeichnungen__zertifikate img { width: 100%; height: 100%; object-fit: contain; }
.auszeichnungen__zahlen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1);
}
.zahl { text-align: center; }
.zahl__wert { font-family: var(--s-ueberschrift); font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; color: var(--f-signal); margin-bottom: 6px; }
.zahl__text { font-family: var(--s-text); font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.6); }

@media (max-width: 1279.98px) {
  .auszeichnungen__karte { padding: 32px; }
  .auszeichnungen__oben { gap: 24px; }
  .auszeichnungen__oben { flex-direction: column; align-items: stretch; }
  /* flex-basis wirkt in der Spaltenrichtung auf die HOEHE - deshalb hier aus. */
  .auszeichnungen__einleitung { flex: none; min-width: 0; }
  .auszeichnungen__badges { grid-template-columns: auto auto; justify-content: start; }
  .auszeichnungen__badges div { height: 110px; }
  .auszeichnungen__zertifikate { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809.98px) {
  .auszeichnungen__karte { padding: 24px; border-radius: 18px; }
  /* Der Codebaustein schaltet mobil eine Stufe kleiner (gemessen) */
  .auszeichnungen__titel { font-size: 20px; }
  .auszeichnungen__text { font-size: 14px; }
  .zahl__wert { font-size: 24px; }
  .zahl__text { line-height: 1.2; }
  .auszeichnungen__badges { gap: 14px; }
  .auszeichnungen__badges div { height: 96px; }
  .auszeichnungen__zertifikate { gap: 10px; }
  .auszeichnungen__zahlen { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; padding-top: 22px; }
}

/* ------------------------------------------------------------
   5. Projekte (salbei) - drei dunkle Karten
   ------------------------------------------------------------ */
.projekte__innen { display: flex; flex-direction: column; gap: 30px; }
.projekte__raster { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-content: center; gap: 30px; }
@media (max-width: 1279.98px) { .projekte__raster { grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
@media (max-width:  809.98px) { .projekte__raster { grid-template-columns: minmax(200px, 1fr); } }

.projektkarte {
  position: relative; display: flex; flex-direction: column;
  min-height: 440px; border-radius: var(--r-karte); overflow: hidden;
  background: var(--f-schwarz-weich); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.7);
  color: var(--f-weiss);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.projektkarte:hover { transform: translateY(-6px); border-color: rgba(219,242,39,.4); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
.projektkarte__kopf { position: relative; width: 100%; height: 240px; overflow: hidden; flex-shrink: 0; background: #1c1c22; }
.projektkarte__bild { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.projektkarte:hover .projektkarte__bild { transform: scale(1.05); }
.projektkarte__logo {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 16px; border-radius: var(--r-basis);
  background: var(--f-weiss); box-shadow: 0 4px 14px rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.06);
}
.projektkarte__logo img { max-height: 24px; max-width: 130px; width: auto; object-fit: contain; }
.projektkarte__marke {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  font-family: var(--s-ueberschrift); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--f-schwarz); background: var(--f-signal);
  padding: 7px 14px; border-radius: var(--r-gross);
}
.projektkarte__inhalt { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.projektkarte__schlagworte { display: flex; flex-wrap: wrap; gap: 8px; }
.schlagwort {
  font-family: var(--s-text); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 11px; border-radius: var(--r-gross); line-height: 1.3;
  color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.schlagwort--signal { color: var(--f-signal); background: rgba(219,242,39,.12); border-color: rgba(219,242,39,.27); }
/* Wie im Original auf drei Zeilen begrenzt - der volle Text bleibt im
   Quelltext stehen, nur die Anzeige wird gekappt. */
.projektkarte__titel {
  font-family: var(--s-ueberschrift); font-size: 20px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.3; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.projektkarte__text {
  font-family: var(--s-text); font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.6);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.projektkarte__mehr {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px;
  font-family: var(--s-text); font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff;
}
.projektkarte__pfeil { color: var(--f-signal); display: inline-block; transition: transform .3s; }
.projektkarte:hover .projektkarte__pfeil { transform: translateX(4px); }

/* ------------------------------------------------------------
   6. Referenz / Testimonial (weiss, salbeifarbene Karte)
   ------------------------------------------------------------ */
.referenz__innen { display: flex; flex-direction: column; gap: 30px; }
.referenz__innen .abschnitt__vorspann { color: var(--f-zinc-600); }
.referenz__karte {
  border-radius: 24px; background: var(--f-salbei);
  border: 1px solid rgba(9,9,11,.06); box-shadow: 0 30px 60px -30px rgba(0,0,0,.18);
  padding: 56px; display: flex; flex-direction: column; gap: 28px;
}
.referenz__kopf { display: flex; align-items: center; gap: 10px; }
.referenz__zeichen {
  font-family: Georgia, 'Times New Roman', serif; font-size: 120px; line-height: .8; height: 56px;
  color: var(--f-signal); opacity: .45; user-select: none; margin-top: 24px;
}
.referenz__sterne { display: inline-flex; gap: 4px; margin-left: 4px; color: var(--f-signal); font-size: 22px; line-height: 1; }
.referenz__raster { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.referenz__zitat { font-family: var(--s-ueberschrift); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: #0d0d0f; }
.referenz__person { display: flex; flex-direction: column; gap: 20px; }
.referenz__quelle { display: flex; gap: 16px; }
.referenz__balken { width: 3px; align-self: stretch; background: var(--f-signal); border-radius: 2px; flex-shrink: 0; }
.referenz__namen { display: flex; flex-direction: column; gap: 4px; }
.referenz__name { font-family: var(--s-ueberschrift); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #0d0d0f; }
.referenz__rolle { font-family: var(--s-text); font-size: 16px; line-height: 1.4; color: rgba(13,13,15,.55); }
.referenz__detail { font-family: var(--s-text); font-size: 15px; line-height: 1.6; color: rgba(13,13,15,.45); }

@media (max-width: 1279.98px) {
  .referenz__karte { padding: 40px; }
  .referenz__zeichen { font-size: 100px; height: 46px; }
  .referenz__raster { grid-template-columns: 1.4fr 1fr; gap: 32px; }
  .referenz__zitat { font-size: 24px; }
}
@media (max-width: 809.98px) {
  .referenz__karte { padding: 28px; gap: 18px; border-radius: 18px; }
  .referenz__zeichen { font-size: 80px; height: 38px; }
  .referenz__sterne { font-size: 18px; }
  .referenz__raster { grid-template-columns: 1fr; gap: 24px; }
  .referenz__zitat { font-size: 18px; }
  .referenz__person { gap: 14px; }
  .referenz__name { font-size: 16px; }
  .referenz__rolle { font-size: 14px; }
  .referenz__detail { font-size: 13px; }
}

/* ------------------------------------------------------------
   7. Zusammenarbeit / Ablauf (salbei) - drei Schritte auf einer Linie
   ------------------------------------------------------------ */
.ablauf__innen { display: flex; flex-direction: column; gap: 46px; }
.ablauf__schritte {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; padding-top: 8px;
}
/* Waagerechte Linie mit Pfeilspitze und Beschriftung am rechten Rand */
.ablauf__linie { position: absolute; top: 24px; left: 0; right: 150px; height: 2px; background: var(--f-signal); opacity: .55; z-index: 0; }
.ablauf__spitze {
  position: absolute; top: 25px; right: 142px; transform: translateY(-50%);
  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid var(--f-signal); opacity: .85; z-index: 1;
}
.ablauf__hinweis {
  position: absolute; top: 25px; right: 0; transform: translateY(-50%); z-index: 3;
  font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.2; color: #0d0d0f; white-space: nowrap; background: var(--f-salbei); padding-left: 6px;
}

.schritt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.schritt__nummer {
  position: relative; z-index: 2; width: 50px; height: 50px; border-radius: 50%;
  background: #0d0d0f; color: var(--f-signal);
  font-family: var(--s-ueberschrift); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px; flex-shrink: 0;
}
.schritt__strang { display: none; }
.schritt__titel { font-family: var(--s-ueberschrift); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: #0d0d0f; margin-bottom: 10px; }
.schritt__text { font-family: var(--s-text); font-size: 14.5px; line-height: 1.6; color: #6b6b73; margin-bottom: 18px; }
.schritt__fuss { margin-top: auto; border-top: 1px solid #e3e3e0; padding-top: 14px; }
.schritt__label {
  display: block; font-family: var(--s-ueberschrift); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; color: #8a9a17; margin-bottom: 5px;
}
.schritt__wert { display: block; font-family: var(--s-text); font-size: 13.5px; line-height: 1.55; color: #6b6b73; }

/* Mobil wird aus der Zeitleiste eine senkrechte Spur:
   50-px-Spalte mit Nummer und Strang, daneben der Text. */
@media (max-width: 809.98px) {
  .ablauf__schritte { grid-template-columns: 1fr; gap: 0; }
  .ablauf__linie, .ablauf__spitze { display: none; }
  .schritt { display: grid; grid-template-columns: 50px 1fr; column-gap: 20px; padding-bottom: 32px; align-items: start; }
  .schritt__spur { display: flex; flex-direction: column; align-items: center; height: 100%; }
  .schritt__nummer { margin-bottom: 0; }
  .schritt__strang { display: block; width: 2px; flex: 1; background: var(--f-signal); opacity: .45; }
  .schritt:last-of-type .schritt__strang { opacity: .45; }
  .schritt__inhalt { padding-top: 10px; }
  .ablauf__hinweis {
    position: static; transform: none; display: grid; grid-template-columns: 50px 1fr;
    column-gap: 20px; align-items: center; padding-left: 0; background: none;
  }
  .ablauf__hinweis::before {
    content: ""; justify-self: center;
    width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 10px solid var(--f-signal); opacity: .85;
  }
}

/* ------------------------------------------------------------
   8. Ansprechpartner (dunkel) - Bild links, Text rechts
   ------------------------------------------------------------ */
.ansprech { background: var(--f-schwarz); }
.ansprech__innen {
  width: 100%; max-width: calc(var(--breite-inhalt) + 2 * var(--polster-seite));
  margin-inline: auto; padding: 50px var(--polster-seite) 100px;
}
.ansprech__karte {
  background: var(--f-schwarz-weich); border-radius: 24px; overflow: hidden;
  display: grid; grid-template-columns: 0.8fr 1.4fr; align-items: stretch; min-height: 460px;
}
.ansprech__bildseite {
  position: relative; min-height: 460px; overflow: hidden;
  background: linear-gradient(135deg, #1a1a20 0%, #2a2a32 100%);
}
.ansprech__bildseite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ansprech__etikett {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  background: var(--f-signal); color: #0d0d0f;
  font-family: var(--s-ueberschrift); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; line-height: normal; text-transform: uppercase; padding: 6px 12px; border-radius: 7px;
}
.ansprech__text { padding: 56px; display: flex; flex-direction: column; justify-content: center; color: var(--f-weiss); }
.ansprech__marke {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  color: var(--f-signal); font-family: var(--s-ueberschrift); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; line-height: 1.25; text-transform: uppercase; margin-bottom: 14px;
}
.ansprech__punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--f-signal); }
.ansprech__titel { font-family: var(--s-ueberschrift); font-weight: 700; font-size: 36px; letter-spacing: -.02em; line-height: 1.15; color: #fff; margin-bottom: 16px; }
.ansprech__absatz { font-family: var(--s-text); font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.65); margin-bottom: 26px; max-width: 560px; }
.ansprech__person { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.ansprech__name { font-family: var(--s-ueberschrift); font-weight: 600; color: #fff; font-size: 15px; line-height: 1.3; }
.ansprech__rolle { font-family: var(--s-text); font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.3; }
.ansprech__knopfzeile { display: flex; gap: 12px; flex-wrap: wrap; }
.knopf--blitz { gap: 10px; font-family: var(--s-ueberschrift); line-height: normal; }

@media (max-width: 1279.98px) {
  .ansprech__karte { grid-template-columns: 0.55fr 1fr; min-height: 420px; }
  .ansprech__bildseite { min-height: 420px; }
  .ansprech__text { padding: 36px 32px; }
  .ansprech__titel { font-size: 28px; }
  .ansprech__etikett { font-size: 10px; padding: 5px 10px; }
}
@media (max-width: 809.98px) {
  .ansprech__karte { grid-template-columns: 1fr; min-height: 0; border-radius: 18px; }
  .ansprech__bildseite { min-height: 0; height: 280px; }
  .ansprech__text { padding: 32px 24px; }
  .ansprech__titel { font-size: 26px; }
  .ansprech__absatz { font-size: 15px; line-height: 1.55; }
}

/* ------------------------------------------------------------
   9. Blog (weiss) - die sechs neuesten Artikel
   ------------------------------------------------------------ */
.startblog__innen { display: flex; flex-direction: column; gap: 30px; }
.startblog__kopf { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
.startblog .karten { gap: 20px; }
.startblog__mehr { display: flex; justify-content: center; padding-top: 60px; }
/* "Mehr laden" war im Original ein Knopf, der per Javascript nachlud.
   Hier fuehrt derselbe Text auf die Blogliste - kein Skript noetig. */
.knopf--laden {
  background: #444; color: var(--f-weiss);
  padding: 11px 12px; border-radius: var(--r-basis);
  font-family: var(--s-text); font-size: 14px; font-weight: 600; line-height: 18px;
}
.knopf--laden:hover { background: #555; }

/* ------------------------------------------------------------
   10. FAQ (salbei) - Titelspalte links, Aufklapper rechts

   Namensraum: eigene Klassen heissen .startfaq*, weil die
   Leistungsseiten (teile/11-leistung.css) den kurzen .faq-Namen
   schon belegen - inklusive eines nackten .faq mit Rahmen.
   Nur .faq__frage, .faq__antwort und .faq--offen muessen so
   heissen, die erwartet src/assets/js/seite.js; sie stehen
   deshalb hier unter .startfaq und gewinnen so die Spezifitaet.
   ------------------------------------------------------------ */
.startfaq__innen { display: flex; align-items: flex-start; gap: 40px; }
.startfaq__kopf { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
.startfaq__liste { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.startfaq__punkt {
  display: flex; flex-direction: column; gap: 15px; padding: 20px 0;
  box-shadow: inset 0 -1px 0 var(--f-zinc-200);
}
.startfaq__punkt.faq--offen { gap: 43px; }

/* Die Ueberschrift traegt nur den Rang, die Groesse steht an .startfaq__titel -
   sonst funken h3 und h6 aus basis.css dazwischen. */
.startfaq__ueberschrift { font: inherit; letter-spacing: normal; }

.startfaq .faq__frage {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0; text-align: left; cursor: pointer;
}
.startfaq__titel {
  font-family: var(--s-ueberschrift); font-weight: 600; letter-spacing: -.04em;
  font-size: 18px; line-height: 25.2px; color: var(--f-schwarz);
}
/* Der offene Eintrag traegt im Original eine groessere Ueberschrift (h6/20 px),
   die geschlossenen eine kleinere (h3/18 px). Rang und Groesse bleiben,
   auch wenn sich der Zustand aendert. */
.startfaq__titel--gross { font-size: var(--t-h6); line-height: var(--t-h6-zeile); letter-spacing: -.01em; }

/* Zwei Groessen wie im Original: geschlossen 34 px mit 18-px-Zeichen,
   offen 48 px mit 25-px-Zeichen. Der groessere Kreis ragt oben und unten
   je 7 px aus der 34-px-Zeile heraus - darum negative Aussenabstaende,
   sonst waechst der offene Eintrag um 14 px. */
.startfaq__zeichen {
  flex: none; width: 34px; height: 34px;
  border-radius: var(--r-gross);
  background: var(--f-zinc-50); display: grid; place-items: center;
  box-shadow: rgba(9,9,11,.11) 0 .6px .6px -1.25px, rgba(9,9,11,.1) 0 2.3px 2.3px -2.5px, rgba(9,9,11,.04) 0 10px 10px -3.75px;
  transition: transform .25s ease;
}
.startfaq__zeichen svg { width: 18px; height: 18px; flex: none; }
.startfaq__punkt.faq--offen .startfaq__zeichen { width: 48px; height: 48px; margin-block: -7px; }
.startfaq__punkt.faq--offen .startfaq__zeichen svg { width: 25px; height: 25px; }
.startfaq .faq__frage[aria-expanded="true"] .startfaq__zeichen { transform: rotate(45deg); }
.startfaq .faq__antwort { padding-bottom: 5px; }
.startfaq .faq__antwort p { font-size: 16px; line-height: 28.8px; letter-spacing: .03em; color: var(--f-schwarz); max-width: none; }

@media (max-width: 809.98px) {
  /* Das Original laesst die Aufklapper hier ueber den Bildschirmrand
     laufen (716 px in einem 358-px-Container). Hier stapeln sie sauber. */
  .startfaq__innen { flex-direction: column; gap: 24px; }
  .startfaq__kopf { flex: none; width: 100%; }
  .startfaq__liste { flex: none; width: 100%; }
  .startfaq__punkt.faq--offen { gap: 24px; }
}

/* ------------------------------------------------------------
   Nachtrag: mobile Sperrung
   Unter 810 px sperrt das Original den Fliesstext weiter
   (0.48 px bei 16 px = 0.03em statt 0.02em). Der Block steht am
   Ende der Datei, weil er die Regeln weiter oben ueberschreiben
   muss - gleiche Spezifitaet, spaeter gewinnt.
   ------------------------------------------------------------ */
@media (max-width: 809.98px) {
  .abschnitt__vorspann, .hero__einleitung { letter-spacing: .03em; }
}


/* ---- teile/11-leistung.css ---- */
/* ============================================================
   Shopware-Leistungsseiten (7 Stueck)
   Alle Werte am Original gemessen (getComputedStyle bei 1440/390 px),
   nicht hergeleitet. Eigene Klassen mit Praefix .leistung-, damit sich
   parallele Arbeit an der Startseite nicht ins Gehege kommt.
   ============================================================ */

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

/* --- Sektionsschale: 1200 px innen, 100 px Polster oben/unten --- */
.leistung-abschnitt { padding: 100px 0; background: var(--f-weiss); color: var(--f-schwarz); }
.leistung-abschnitt--dunkel { background: var(--f-schwarz); color: var(--f-weiss); }
.leistung-abschnitt--salbei { background: var(--f-salbei); }
.leistung-abschnitt--grau   { background: var(--f-zinc-100); }
.leistung-abschnitt--seo_faelle { background: var(--f-zinc-50); }
/* Der Hero traegt oben 100, unten 50 px (gemessen), der Ansprechpartner 50/100. */
.leistung-abschnitt--hero { padding: 100px 0 50px; }
.leistung-abschnitt__innen { display: flex; flex-direction: column; gap: 30px; }

/* --- Kopfblock: Pille, Ueberschrift, Vorspann --- */
.leistung-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.leistung-kopf--mitte { align-items: center; text-align: center; }

.leistung-pille {
  display: inline-flex; align-items: center;
  background: var(--f-weiss); color: var(--f-schwarz);
  border-radius: 7px; padding: 8px 12px;
  font-family: var(--s-text); font-size: 14px; line-height: 22.4px;
  letter-spacing: .28px; font-weight: 400;
}
.leistung-pille--signal { background: var(--f-signal); color: var(--f-signal-text); }

.leistung-titel { font-family: var(--s-ueberschrift); font-weight: 600; }
.leistung-titel--gross  { font-size: 44px; line-height: 61.6px; letter-spacing: -1.76px; }
.leistung-titel--mittel { font-size: 36px; line-height: 50.4px; letter-spacing: -1.44px; }
.leistung-titel--klein  { font-size: 30px; line-height: 42px;   letter-spacing: -1.2px; }
.leistung-titel--spalte { font-size: 30px; line-height: 36px;   letter-spacing: -0.9px; }

.leistung-vorspann {
  font-size: 16px; line-height: 28.8px; letter-spacing: .48px;
  color: var(--f-zinc-500); max-width: 840px;
}
.leistung-abschnitt--dunkel .leistung-vorspann { color: var(--f-zinc-400); }
.leistung-vorspann a { text-decoration: underline; text-underline-offset: 3px; }

/* Knoepfe der Leistungsseiten: 50 px hoch, Polster 14/20/14/25 (gemessen) */
.leistung-knopf { padding: 14px 20px 14px 25px; font-family: var(--s-text); font-size: 16px; font-weight: 600; line-height: 22px; }
.leistung-knopf--dunkel { background: var(--f-zinc-800); color: var(--f-weiss); border-radius: var(--r-basis); }
.leistung-knopf--dunkel:hover { background: var(--f-zinc-700); }

/* ============================================================
   Hero
   ============================================================ */
.leistung-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: center; }
.leistung-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.leistung-hero__titel { font-family: var(--s-ueberschrift); font-weight: 600; }
.leistung-hero__titel--gross { font-size: 44px; line-height: 61.6px; letter-spacing: -1.76px; }
.leistung-hero__titel--weit  { font-size: 45px; line-height: 54px;   letter-spacing: normal; }
.leistung-hero__titel--hero  { font-size: 54px; line-height: 60.48px; letter-spacing: -1.08px; }
.leistung-hero__titel--gedaempft { color: var(--f-zinc-300); }
.leistung-hero__titel--weiss     { color: var(--f-weiss); }
.leistung-hero__vorspann { font-size: 18px; line-height: 28.8px; letter-spacing: .36px; color: var(--f-zinc-300); max-width: 710px; }
.leistung-hero__vorspann a { color: var(--f-signal); text-decoration: underline; text-underline-offset: 3px; }
.leistung-hero__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kundenlogos unter dem Hero */
.leistung-logos { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.leistung-logos__titel { font-size: 18px; line-height: 28.8px; letter-spacing: .36px; color: var(--f-zinc-500); }
/* Im Original laeuft die Logoreihe als Endlosband; hier eine feste Reihe,
   die bei Platzmangel in sich scrollt (der Seitenkoerper nie waagerecht). */
.leistung-logos__liste { display: flex; align-items: center; gap: 30px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.leistung-logos__liste::-webkit-scrollbar { display: none; }
.leistung-logos__liste li { flex: 0 0 auto; }
.leistung-logos__liste img {
  width: auto; max-width: 120px; max-height: 40px; object-fit: contain;
  /* Die Kundenlogos sind dunkel gezeichnet; auf dem schwarzen Hero werden sie
     wie im Original in Weiss ausgegeben. */
  filter: brightness(0) invert(1); opacity: .72;
}

/* ============================================================
   Schaubilder im Hero
   ============================================================ */
.leistung-hero__bild > * { width: 100%; }

/* Shop-Attrappe (Agentur, Performance) - Werte aus dem Original uebernommen */
.leistung-shop { position: relative; max-width: 460px; margin-inline: auto; padding: 0 14px; }
.leistung-shop__fenster {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 90px -25px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  font-family: var(--s-ueberschrift);
}
.leistung-shop__leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ececec; }
.leistung-shop__punkt { width: 9px; height: 9px; border-radius: 50%; background: #cfcfcf; }
.leistung-shop__adresse { margin-left: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #9a9a9a; background: #fff; padding: 3px 12px; border-radius: 6px; }
.leistung-shop__seite { background: #fafaf7; }
.leistung-shop__kopfzeile { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; background: #fff; }
.leistung-shop__marke { font-weight: 800; font-size: 13px; letter-spacing: .12em; color: #161616; }
.leistung-shop__menue { display: flex; gap: 10px; }
.leistung-shop__menue i { display: block; width: 26px; height: 6px; border-radius: 3px; background: #dcdcd6; }
.leistung-shop__korb { width: 20px; height: 20px; border-radius: 6px; background: var(--f-signal); }
.leistung-shop__buehne { display: grid; grid-template-columns: 1fr .9fr; gap: 14px; padding: 20px 18px; }
.leistung-shop__text { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.leistung-shop__etikett { width: fit-content; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #7c8a0c; background: #f2f5d4; padding: 4px 9px; border-radius: 999px; }
.leistung-shop__zeile { display: block; height: 13px; width: 60%; border-radius: 5px; background: #cececa; }
.leistung-shop__zeile--dunkel { width: 90%; background: #2a2a2a; }
.leistung-shop__knopf { width: fit-content; margin-top: 5px; font-size: 10px; font-weight: 700; color: #161616; background: var(--f-signal); padding: 8px 14px; border-radius: 8px; }
.leistung-shop__bild { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: linear-gradient(135deg, #eceadb, #d6d58e); }
.leistung-shop__bild span { display: block; width: 62px; height: 80px; border-radius: 8px; background: #fff; box-shadow: 0 12px 24px -8px rgba(0,0,0,.25); }
.leistung-shop__waren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; padding: 0 18px 22px; }
.leistung-shop__ware { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #eee; border-radius: 11px; padding: 9px; }
.leistung-shop__vorschau { display: block; height: 48px; border-radius: 7px; background: linear-gradient(135deg, #e9e8df, #cfcfca); }
.leistung-shop__vorschau--gruen { background: linear-gradient(135deg, #e7ecc6, #d6d58e); }
.leistung-shop__ware span { display: block; height: 6px; width: 100%; border-radius: 5px; background: #dcdcd6; }
.leistung-shop__kurz { width: 55% !important; background: #e8e8e2 !important; }
.leistung-shop__wert {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; white-space: nowrap;
  background: #fff; border: 1px solid rgba(0,0,0,.04); border-radius: 14px; padding: 12px 15px;
  box-shadow: 0 20px 50px -14px rgba(0,0,0,.4);
}
.leistung-shop__wert--oben  { top: 8px; left: -4px; }
.leistung-shop__wert--unten { bottom: 16px; right: -4px; }
.leistung-shop__wert b { display: block; font-family: var(--s-ueberschrift); font-weight: 700; font-size: 18px; line-height: 1; color: #161616; }
.leistung-shop__wert em { display: block; font-style: normal; font-size: 11px; color: #8a8a8a; margin-top: 3px; }
.leistung-shop__zeichen { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.leistung-shop__zeichen--hell { background: #f2f5d4; color: #161616; }
.leistung-shop__zeichen--dunkel { background: #161616; color: var(--f-signal); }

/* Code-Attrappe (Entwicklung) */
.leistung-code { background: #111114; border: 1px solid var(--f-zinc-800); border-radius: 18px; padding: 20px 22px; box-shadow: rgba(0,0,0,.6) 0 40px 90px -40px; }
.leistung-code__datei { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 12px; color: var(--f-zinc-400); margin-bottom: 14px; }
.leistung-code__block { margin: 0; overflow-x: auto; }
.leistung-code__block code { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 13px; line-height: 22px; color: #d7dbe2; white-space: pre; }

/* Schulungsplan (Schulungen) */
.leistung-plan { background: var(--f-weiss); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 18px; color: var(--f-schwarz); box-shadow: rgba(0,0,0,.5) 0 30px 70px -40px; }
.leistung-plan__titel { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.leistung-plan__unter { font-size: 14px; line-height: 22.4px; color: #8b94a0; margin-top: -14px; }
.leistung-plan__liste { display: flex; flex-direction: column; gap: 12px; }
.leistung-plan__liste li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 28.8px; }
.leistung-plan__liste .leistung-symbol { color: var(--f-zinc-500); flex-shrink: 0; }
.leistung-plan__marke { background: var(--f-signal); color: var(--f-signal-text); border-radius: var(--r-pille); padding: 2px 10px; font-family: var(--s-ueberschrift); font-size: 11px; font-weight: 700; }
.leistung-plan__fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--f-zinc-200); padding-top: 16px; font-size: 14px; color: var(--f-zinc-500); }
.leistung-plan__fuss b { font-family: var(--s-ueberschrift); font-size: 28px; font-weight: 800; color: var(--f-schwarz); }

/* Sichtbarkeitskarten (SEO) */
.leistung-sichtbar { display: flex; flex-direction: column; gap: 20px; }
.leistung-sichtbar__karte { background: var(--f-weiss); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 6px; color: var(--f-schwarz); box-shadow: rgba(0,0,0,.5) 0 30px 70px -40px; }
.leistung-sichtbar__titel { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.leistung-sichtbar__unter { font-size: 14px; line-height: 22.4px; color: #8b94a0; }
.leistung-sichtbar__wert { display: inline-flex; align-items: center; gap: 8px; font-family: var(--s-ueberschrift); font-size: 28px; font-weight: 800; color: #4d7c0f; }
.leistung-sichtbar__notiz { font-size: 13.5px; line-height: 20px; color: var(--f-zinc-500); }

/* Wireframe/Design (Design) */
.leistung-skizze { display: grid; grid-template-columns: 1fr 1fr; background: #111114; border: 1px solid var(--f-zinc-800); border-radius: 18px; overflow: hidden; box-shadow: rgba(0,0,0,.6) 0 40px 90px -40px; }
.leistung-skizze__platte { position: relative; padding: 22px 18px 46px; min-height: 250px; }
.leistung-skizze__platte--farbe { background: linear-gradient(150deg, #17171b, #23232a); }
.leistung-skizze__schild { position: absolute; bottom: 14px; left: 16px; background: #000; border: 1px solid var(--f-zinc-800); border-radius: 6px; padding: 4px 8px; font-family: var(--s-ueberschrift); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--f-zinc-400); }
.leistung-skizze__platte--farbe .leistung-skizze__schild { left: auto; right: 16px; }
.leistung-skizze__zeilen { display: flex; flex-direction: column; gap: 10px; }
.leistung-skizze__zeilen i { display: block; height: 14px; border-radius: 5px; background: rgba(255,255,255,.08); }
.leistung-skizze__platte--farbe .leistung-skizze__zeilen i:nth-child(2) { background: var(--f-signal); opacity: .8; width: 60%; }
.leistung-skizze__zeilen i:nth-child(3) { width: 80%; }
.leistung-skizze__zeilen i:nth-child(5) { width: 70%; }

/* Migrations-Checkliste (Migration) */
.leistung-umzug { background: var(--f-weiss); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 18px; color: var(--f-schwarz); box-shadow: rgba(0,0,0,.5) 0 30px 70px -40px; }
.leistung-umzug__titel { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.leistung-umzug__liste { display: flex; flex-direction: column; gap: 12px; }
.leistung-umzug__liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--f-zinc-800); }
.leistung-umzug__liste .leistung-symbol { color: #8a9a17; flex-shrink: 0; margin-top: 4px; }

/* ============================================================
   Leistungskarten
   ============================================================ */
.leistung-karten { display: grid; gap: 16px; }
.leistung-karten--3 { grid-template-columns: repeat(3, 1fr); }
.leistung-karten--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.leistung-karte { background: var(--f-weiss); border: 1px solid var(--f-zinc-200); border-radius: var(--r-karte); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.leistung-karten--2 .leistung-karte { padding: 30px; gap: 12px; }

/* Zwei Textspalten mit kurzem Signalstrich statt Karte (Entwicklung: Plugins) */
.leistung-karten--strich { gap: 40px; }
.leistung-karten--strich .leistung-karte,
.leistung-abschnitt--salbei .leistung-karten--strich .leistung-karte,
.leistung-abschnitt--grau .leistung-karten--strich .leistung-karte { background: none; border: 0; padding: 0; gap: 10px; }
.leistung-karten--strich .leistung-karte::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--f-signal); margin-bottom: 10px; }

/* Begriffsliste in einer hellen Kachel (Entwicklung: API-First) */
.leistung-karten--liste { display: block; background: var(--f-zinc-100); border-radius: var(--r-karte); padding: 10px 30px; }
.leistung-karten--liste .leistung-karte {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 24px; align-items: start;
  background: none; border: 0; border-radius: 0; padding: 22px 0;
}
.leistung-karten--liste .leistung-karte + .leistung-karte { border-top: 1px solid var(--f-zinc-200); }
.leistung-karten--liste .leistung-karte__text { font-size: 15px; line-height: 24px; }
.leistung-abschnitt--salbei .leistung-karte,
.leistung-abschnitt--grau .leistung-karte { border: 1px solid rgba(9,9,11,.06); }
.leistung-ikone { width: 26px; height: 26px; flex-shrink: 0; }
.leistung-karte > .leistung-ikone { color: var(--f-schwarz); margin-bottom: 4px; }
.leistung-abschnitt--dunkel .leistung-ikone { color: var(--f-weiss); }
.leistung-vergleich__zeichen .leistung-ikone { width: 22px; height: 22px; }
.leistung-vergleich__spalte--dunkel .leistung-vergleich__zeichen { color: var(--f-signal); }
.leistung-karte__titel { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.leistung-karte__text { font-size: 16px; line-height: 28.8px; letter-spacing: .48px; color: var(--f-zinc-500); }

/* Nummerierte Bloecke (Entwicklung: Ueberblick) - untereinander wie im Original */
.leistung-nummern { display: flex; flex-direction: column; }
.leistung-nummer { display: flex; flex-direction: column; gap: 10px; padding: 26px 0; }
.leistung-nummer + .leistung-nummer { border-top: 1px solid var(--f-zinc-200); }
.leistung-nummer__zeile { display: flex; align-items: center; gap: 18px; }
.leistung-nummer__nr {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--f-signal); color: var(--f-signal-text);
  font-family: var(--s-ueberschrift); font-size: 12px; font-weight: 700;
}
.leistung-nummer__titel { font-size: 24px; line-height: 33.6px; letter-spacing: -.72px; }
.leistung-nummer__text { padding-left: 46px; font-size: 16px; line-height: 28.8px; letter-spacing: .48px; color: var(--f-zinc-500); }

/* ============================================================
   Vergleich (zwei Spalten, dunkle Sektion)
   ============================================================ */
.leistung-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.leistung-vergleich__spalte { border-radius: 15px; padding: 40px; display: flex; flex-direction: column; gap: 30px; }
.leistung-vergleich__spalte--dunkel { background: var(--f-schwarz-weich); color: var(--f-weiss); }
.leistung-vergleich__spalte--hell   { background: var(--f-zinc-100); color: var(--f-schwarz); border: 1px solid var(--f-signal); }
.leistung-vergleich__titel { font-size: 30px; line-height: 36px; letter-spacing: -.9px; }
.leistung-vergleich__spalte--hell .leistung-vergleich__titel { font-size: 26px; line-height: 31.2px; font-weight: 700; letter-spacing: -.52px; color: #0d0d0d; }
.leistung-vergleich__unter { margin-top: -22px; margin-bottom: 6px; }
.leistung-vergleich__spalte--dunkel .leistung-vergleich__unter { font-size: 15px; line-height: 23.25px; letter-spacing: .15px; color: #96969e; }
.leistung-vergleich__spalte--hell .leistung-vergleich__unter { font-size: 16px; line-height: 24px; letter-spacing: .16px; color: #0d0d0d; }
.leistung-vergleich__liste { display: flex; flex-direction: column; }
.leistung-vergleich__punkt { display: flex; flex-direction: column; gap: 15px; padding: 22px 0; }
.leistung-vergleich__punkt + .leistung-vergleich__punkt { border-top: 1px solid; }
.leistung-vergleich__spalte--dunkel .leistung-vergleich__punkt + .leistung-vergleich__punkt { border-color: rgba(255,255,255,.1); }
.leistung-vergleich__spalte--hell .leistung-vergleich__punkt + .leistung-vergleich__punkt { border-color: rgba(9,9,11,.08); }
.leistung-vergleich__punkt:first-child { padding-top: 6px; }
.leistung-vergleich__punkt:last-child { padding-bottom: 0; }
.leistung-vergleich__zeile { display: flex; align-items: center; gap: 12px; }
.leistung-vergleich__zeichen { flex-shrink: 0; display: inline-flex; }
.leistung-vergleich__spalte--dunkel .leistung-vergleich__zeichen { color: #96969e; }
.leistung-vergleich__spalte--hell .leistung-vergleich__zeichen { color: #8a9a17; }
.leistung-vergleich__punkttitel { font-family: var(--s-ueberschrift); font-size: 16px; line-height: 22.4px; font-weight: 600; letter-spacing: -.16px; }
.leistung-vergleich__spalte--hell .leistung-vergleich__punkttitel { font-family: var(--s-text); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: .16px; color: #0d0d0d; }
.leistung-vergleich__punkttext { font-size: 15px; line-height: 23.25px; letter-spacing: .15px; }
.leistung-vergleich__spalte--dunkel .leistung-vergleich__punkttext { color: #96969e; }
.leistung-vergleich__spalte--hell .leistung-vergleich__punkttext { color: var(--f-zinc-800); }

/* ============================================================
   Partnerkarte
   ============================================================ */
.leistung-abschnitt--partner .leistung-kopf { max-width: 1000px; }
.leistung-partner {
  background: var(--f-schwarz-weich); color: var(--f-weiss);
  border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 40px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); overflow: hidden;
}
.leistung-partner__kopf { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.leistung-partner__wort { flex: 1 1 280px; min-width: 260px; }
.leistung-partner__augenbraue { font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-signal); margin-bottom: 12px; }
.leistung-partner__titel { font-family: var(--s-ueberschrift); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.leistung-partner__text { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.6); max-width: 440px; }
.leistung-partner__orden { display: grid; grid-template-columns: auto auto; gap: 20px; justify-content: end; flex-shrink: 0; }
.leistung-partner__orden img { height: 120px; width: auto; max-width: 100%; object-fit: contain; }
.leistung-partner__abzeichen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.leistung-partner__abzeichen li { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; overflow: hidden; aspect-ratio: 250 / 110; }
.leistung-partner__abzeichen img { width: 100%; height: 100%; object-fit: contain; }
.leistung-partner__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); }
.leistung-partner__zahlen li { text-align: center; }
.leistung-partner__zahlen b { display: block; font-family: var(--s-ueberschrift); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--f-signal); margin-bottom: 6px; }
.leistung-partner__zahlen span { display: block; font-size: 14px; color: rgba(255,255,255,.6); }

/* ============================================================
   Projektkarten
   ============================================================ */
.leistung-projekte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.leistung-projekt { display: flex; }
.leistung-projekt__link {
  position: relative; display: flex; flex-direction: column; width: 100%; min-height: 440px;
  background: var(--f-schwarz-weich); color: var(--f-weiss);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-karte); overflow: hidden;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.7);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.leistung-projekt__link:hover { transform: translateY(-4px); }
.leistung-projekt__medien { position: relative; display: block; height: 240px; flex-shrink: 0; overflow: hidden; background: #1c1c22; }
.leistung-projekt__foto { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.leistung-projekt__plakette {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
  border-radius: 10px; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.leistung-projekt__plakette img { max-height: 24px; max-width: 130px; width: auto; object-fit: contain; }
.leistung-projekt__marke--signal {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  font-family: var(--s-ueberschrift); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--f-signal-text); background: var(--f-signal); padding: 7px 14px; border-radius: 50px;
}
.leistung-projekt__text { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; flex: 1; }
.leistung-projekt__marken { display: flex; flex-wrap: wrap; gap: 8px; }
.leistung-projekt__etikett {
  font-family: var(--s-text); font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.3;
  padding: 4px 11px; border-radius: 50px;
  color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.leistung-projekt__etikett--signal { color: var(--f-signal); background: rgba(219,242,39,.12); border-color: rgba(219,242,39,.27); }
.leistung-projekt__titel { font-family: var(--s-ueberschrift); font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.leistung-projekt__beschreibung { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.6); }
.leistung-projekt__mehr { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px; font-family: var(--s-text); font-size: 14px; font-weight: 600; color: #fff; }
.leistung-projekt__mehr .leistung-symbol { color: var(--f-signal); }

/* ============================================================
   Referenz
   ============================================================ */
.leistung-referenz {
  display: flex; flex-direction: column; gap: 28px; margin: 0;
  background: var(--f-salbei); border: 1px solid rgba(9,9,11,.06);
  border-radius: 24px; padding: 40px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.18);
}
.leistung-referenz__kopf { display: flex; align-items: center; gap: 10px; }
.leistung-referenz__zeichen { font-family: Georgia, "Times New Roman", serif; font-size: 100px; line-height: .8; height: 46px; color: var(--f-signal); opacity: .45; margin-top: 24px; }
.leistung-referenz__sterne { display: inline-flex; gap: 4px; margin-left: 4px; color: var(--f-signal); }
.leistung-referenz__sterne .leistung-symbol { width: 22px; height: 22px; }
.leistung-referenz__koerper { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.leistung-referenz__zitat { margin: 0; font-family: var(--s-ueberschrift); font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: #0d0d0f; }
.leistung-referenz__person { display: flex; flex-direction: column; gap: 20px; }
.leistung-referenz__wer { display: flex; flex-direction: column; gap: 4px; border-left: 3px solid var(--f-signal); border-radius: 2px; padding-left: 16px; }
.leistung-referenz__name { font-family: var(--s-ueberschrift); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #0d0d0f; }
.leistung-referenz__rolle { font-size: 16px; line-height: 1.4; color: rgba(13,13,15,.55); }
.leistung-referenz__fakten { font-size: 15px; line-height: 1.6; color: rgba(13,13,15,.45); }

/* ============================================================
   Ablauf (Zusammenarbeit): drei Schritte
   ============================================================ */
.leistung-ablauf { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 8px; }
.leistung-ablauf__linie { position: absolute; top: 24px; left: 0; right: 150px; height: 2px; background: var(--f-signal); opacity: .55; z-index: 0; }
.leistung-ablauf__pfeil { position: absolute; top: 25px; right: 142px; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--f-signal); opacity: .85; z-index: 1; }
.leistung-ablauf__notiz { position: absolute; top: 25px; right: 0; transform: translateY(-50%); z-index: 3; font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #0d0d0f; white-space: nowrap; background: var(--f-salbei); padding-left: 6px; }
.leistung-schritt { position: relative; z-index: 1; }
.leistung-schritt { display: flex; flex-direction: column; }
.leistung-schritt__nr {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: #0d0d0f; color: var(--f-signal);
  font-family: var(--s-ueberschrift); font-size: 18px; font-weight: 800;
  margin-bottom: 22px; flex-shrink: 0;
}
.leistung-schritt__titel { font-family: var(--s-ueberschrift); font-size: 19px; line-height: 24.7px; font-weight: 700; letter-spacing: -.38px; color: #0d0d0f; margin-bottom: 10px; }
.leistung-schritt__text { font-size: 14.5px; line-height: 1.6; color: #6b6b73; margin-bottom: 18px; }
.leistung-schritt__fuss { margin-top: auto; border-top: 1px solid #e3e3e0; padding-top: 14px; }
.leistung-schritt__marke { display: block; font-family: var(--s-ueberschrift); font-size: 11px; font-weight: 700; letter-spacing: .66px; text-transform: uppercase; color: #8a9a17; margin-bottom: 5px; }
.leistung-schritt__fuss span + span { font-size: 13.5px; line-height: 1.55; color: #6b6b73; }

/* ============================================================
   Preise (Schulungen)
   ============================================================ */
.leistung-tarife { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.leistung-tarif { display: flex; flex-direction: column; gap: 6px; background: var(--f-weiss); border: 1px solid var(--f-zinc-200); border-radius: var(--r-karte); padding: 32px; }
.leistung-tarif--marke { border-color: var(--f-signal); }
.leistung-tarif__zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.leistung-tarif__name { font-size: 24px; line-height: 33.6px; letter-spacing: -.72px; }
.leistung-tarif__marke { background: var(--f-schwarz); color: var(--f-signal); border-radius: 6px; padding: 4px 10px; font-family: var(--s-ueberschrift); font-size: 12px; font-weight: 700; }
.leistung-tarif__hinweis { font-size: 15px; line-height: 23.25px; color: var(--f-zinc-500); }
.leistung-tarif__preis { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--f-zinc-200); }
.leistung-tarif__wert { font-family: var(--s-ueberschrift); font-size: 36px; line-height: 50.4px; font-weight: 600; letter-spacing: -1.44px; }
.leistung-tarif__ab, .leistung-tarif__einheit { font-size: 16px; line-height: 25.6px; color: var(--f-zinc-500); }
.leistung-tarif__text { font-size: 16px; line-height: 28.8px; color: var(--f-zinc-500); margin-top: 18px; }
.leistung-tarif__knopf { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; padding-top: 0; background: var(--f-schwarz); color: var(--f-weiss); border-radius: var(--r-basis); padding: 12px 20px; font-family: var(--s-text); font-size: 15px; font-weight: 600; margin-top: 24px; transition: background-color .18s ease; }
.leistung-tarif__knopf:hover { background: var(--f-zinc-800); }
.leistung-tarif__knopf--signal { background: var(--f-signal); color: var(--f-signal-text); }
.leistung-tarif__knopf--signal:hover { background: #cbe419; }

/* ============================================================
   Kennzahlenband (Design, Migration)
   ============================================================ */
/* Kopf links, vier Kacheln als 2x2 rechts (am Original gemessen: 585 | 585) */
.leistung-zahlenband { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.leistung-kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.leistung-kennzahl { background: var(--f-weiss); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.leistung-kennzahl b { font-family: var(--s-ueberschrift); font-size: 34px; line-height: 34px; font-weight: 700; letter-spacing: -.68px; }
.leistung-kennzahl span { font-size: 13.5px; line-height: 18.9px; font-weight: 500; letter-spacing: .135px; }

/* ============================================================
   Merkmale (Design, Migration): grosse Karte + Wertkarte + drei Punkte
   ============================================================ */
.leistung-merkmale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.leistung-merkmale__haupt { grid-column: span 2; background: var(--f-schwarz); color: var(--f-weiss); border-radius: var(--r-karte); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.leistung-merkmale__titel { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }
.leistung-merkmale__text { font-size: 15px; line-height: 24px; letter-spacing: .15px; color: var(--f-zinc-400); }
.leistung-merkmale__wert { background: var(--f-signal); color: var(--f-signal-text); border-radius: var(--r-karte); padding: 30px; display: flex; flex-direction: column; gap: 8px; }
.leistung-merkmale__zahl { font-family: var(--s-ueberschrift); font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.68px; }
.leistung-merkmale__zahltitel { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }
.leistung-merkmale__zahltext { font-size: 15px; line-height: 24px; }
.leistung-merkmale__punkt { background: var(--f-weiss); border: 1px solid var(--f-zinc-200); border-radius: var(--r-karte); padding: 30px; display: flex; flex-direction: column; gap: 8px; }
.leistung-merkmale__punkttitel { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }
.leistung-merkmale__punkttext { font-size: 15px; line-height: 24px; color: var(--f-zinc-500); }

/* ============================================================
   Conversion-Bild mit Punkten (Design)
   ============================================================ */
.leistung-haken { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: center; }
.leistung-haken__text { display: flex; flex-direction: column; gap: 20px; }
.leistung-haken__liste { display: flex; flex-direction: column; gap: 8px; }
.leistung-haken__liste li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 24px; color: var(--f-zinc-300); }
.leistung-haken__liste .leistung-symbol { color: var(--f-signal); flex-shrink: 0; }
.leistung-haken__tipp { font-size: 15px; line-height: 23.25px; color: var(--f-zinc-500); }
.leistung-haken__bild img { border-radius: 10px; box-shadow: rgba(0,0,0,.6) 0 30px 70px -30px; }
/* Im Original liegen die fuenf Punkte als Klickmarken auf dem Bild und zeigen
   ihren Text erst beim Zeigen. Hier stehen sie dauerhaft unter dem Bild -
   bewusste Abweichung: derselbe Text, ohne Zeigegeraet erreichbar. */
.leistung-haken__punkte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 10px; }
.leistung-haken__punkt { display: flex; flex-direction: column; gap: 8px; }
.leistung-haken__nr {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--f-signal); color: var(--f-signal-text);
  font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700;
}
.leistung-haken__inhalt { display: flex; flex-direction: column; gap: 4px; }
.leistung-haken__titel { font-family: var(--s-ueberschrift); font-size: 15px; font-weight: 700; letter-spacing: -.15px; }
.leistung-haken__beschreibung { font-size: 14px; line-height: 21px; color: var(--f-zinc-400); }

/* ============================================================
   Designsystem-Kacheln (Design): Text links, dunkle Karte rechts
   ============================================================ */
.leistung-systemblock { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.leistung-system {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: #111114; border: 1px solid var(--f-zinc-800); border-radius: 18px; padding: 26px;
  box-shadow: rgba(0,0,0,.6) 0 40px 90px -40px;
}
.leistung-system__kachel { background: #161619; border: 1px solid var(--f-zinc-800); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.leistung-system__kachel--typo { grid-row: span 2; }
.leistung-system__marke { font-family: var(--s-ueberschrift); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--f-zinc-400); }
.leistung-system__farben { display: flex; gap: 10px; }
.leistung-system__farben i { width: 26px; height: 26px; border-radius: 8px; }
.leistung-system__farben i:nth-child(1) { background: var(--f-signal); }
.leistung-system__farben i:nth-child(2) { background: var(--f-zinc-600); }
.leistung-system__farben i:nth-child(3) { background: var(--f-weiss); }
.leistung-system__abstand { display: flex; flex-direction: column; gap: 8px; }
.leistung-system__abstand i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.leistung-system__abstand i:nth-child(2) { width: 70%; }
.leistung-system__abstand i:nth-child(3) { width: 45%; }
.leistung-system__balken { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.leistung-system__balken i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); }
.leistung-system__balken i:nth-child(2) { width: 55%; }
.leistung-system__kachel--theme .leistung-system__balken i:first-child { background: var(--f-signal); width: 70%; }
.leistung-system__proben { display: flex; align-items: baseline; gap: 10px; color: var(--f-weiss); font-family: var(--s-ueberschrift); font-weight: 700; }
.leistung-system__probe--1 { font-size: 34px; line-height: 34px; }
.leistung-system__probe--2 { font-size: 22px; }
.leistung-system__probe--3 { font-size: 15px; color: var(--f-zinc-400); }
.leistung-system__knopf { width: fit-content; background: var(--f-signal); color: var(--f-signal-text); border-radius: 8px; padding: 7px 14px; font-family: var(--s-ueberschrift); font-size: 12px; font-weight: 700; }

/* ============================================================
   Prozess (Design: vier Phasen mit Vorschau, Migration: breite Zeilen)
   ============================================================ */
.leistung-prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.leistung-prozess--breit { grid-template-columns: 1fr; gap: 18px; }
.leistung-phase { display: flex; flex-direction: column; gap: 10px; }
.leistung-prozess--breit .leistung-phase { background: var(--f-weiss); border-radius: 18px; padding: 26px 28px; gap: 12px; }
.leistung-phase__schau { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; height: 130px; background: #17171b; border: 1px solid var(--f-zinc-800); border-radius: 12px; padding: 16px; margin-bottom: 8px; }
.leistung-phase__schau i { display: block; height: 9px; border-radius: 4px; background: rgba(255,255,255,.14); }
.leistung-phase__schau i:nth-child(2) { width: 75%; }
.leistung-phase__schau i:nth-child(3) { width: 55%; }
.leistung-phase__schau i:nth-child(4) { width: 35%; background: var(--f-signal); }
.leistung-phase__nr { font-family: var(--s-ueberschrift); font-size: 14px; font-weight: 800; letter-spacing: .1em; color: var(--f-zinc-400); }
.leistung-prozess:not(.leistung-prozess--breit) .leistung-phase__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--f-schwarz); color: var(--f-signal);
  font-size: 12px; font-weight: 700; letter-spacing: normal;
}
.leistung-phase__titel { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.leistung-phase__text { font-size: 15px; line-height: 24px; color: var(--f-zinc-500); }
.leistung-phase__marken { display: flex; flex-wrap: wrap; gap: 8px; }
.leistung-phase__marken span { background: rgba(219,242,39,.18); color: #6b7d09; border-radius: 99px; padding: 6px 12px; font-family: var(--s-ueberschrift); font-size: 12.5px; line-height: 15px; font-weight: 600; letter-spacing: .25px; }

/* ============================================================
   Theme-Vergleich (Design): Vorher/Nachher-Attrappe
   ============================================================ */
.leistung-theme { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.leistung-theme__halb { position: relative; border: 1px solid var(--f-zinc-200); border-radius: var(--r-karte); overflow: hidden; box-shadow: rgba(0,0,0,.4) 0 30px 70px -50px; }
.leistung-theme__halb--vorher { background: #0b1020; }
.leistung-theme__halb--nachher { background: #0b1020; }
.leistung-theme__schild { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.06); border-radius: 999px; padding: 6px 12px; font-family: var(--s-ueberschrift); font-size: 11px; font-weight: 700; letter-spacing: .88px; text-transform: uppercase; color: #0d0d0f; }
.leistung-theme__shop { background: #dfe3e8; color: #1a1a1a; margin: 16px; border-radius: 8px; padding: 14px; min-height: 300px; font-family: "Times New Roman", Times, serif; }
.leistung-theme__shop--neu { background: var(--f-weiss); font-family: var(--s-text); border-radius: 14px; }
.leistung-theme__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: 10px; margin-bottom: 12px; font-size: 12px; }
.leistung-theme__shop--neu .leistung-theme__kopf { border-color: var(--f-zinc-200); }
.leistung-theme__kopf b { font-family: var(--s-ueberschrift); font-size: 14px; letter-spacing: .18em; }
.leistung-theme__banner { background: #d32f2f; color: #fff; text-align: center; padding: 6px; font-weight: 700; margin-bottom: 12px; }
.leistung-theme__titel { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.leistung-theme__text { font-size: 13px; margin-bottom: 12px; }
.leistung-theme__knopf { display: inline-block; background: #9aa0a6; color: #fff; padding: 6px 12px; font-size: 12px; }
.leistung-theme__waren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.leistung-theme__ware { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--f-zinc-200); border-radius: 10px; padding: 10px; }
.leistung-theme__ware i { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 8px; background: var(--f-zinc-100); font-size: 11px; font-style: normal; color: var(--f-zinc-500); }
.leistung-theme__ware b { font-family: var(--s-ueberschrift); font-size: 12px; }
.leistung-theme__ware em { font-style: normal; font-size: 12px; color: var(--f-zinc-500); }
.leistung-theme__ware u { text-decoration: none; background: var(--f-signal); color: var(--f-signal-text); border-radius: 6px; padding: 5px 8px; font-size: 11px; font-weight: 700; text-align: center; }

/* ============================================================
   Vorher/Nachher (Migration)
   ============================================================ */
.leistung-wechsel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.leistung-wechsel__karte { border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.leistung-wechsel__karte--alt { background: var(--f-zinc-100); }
.leistung-wechsel__karte--neu { background: var(--f-schwarz); color: var(--f-weiss); }
.leistung-wechsel__schild { font-family: var(--s-ueberschrift); font-size: 11px; font-weight: 700; letter-spacing: .88px; text-transform: uppercase; color: var(--f-zinc-500); }
.leistung-wechsel__karte--neu .leistung-wechsel__schild { color: var(--f-signal); }
.leistung-wechsel__titel { font-size: 24px; line-height: 33.6px; letter-spacing: -.72px; }
.leistung-wechsel__karte--neu .leistung-wechsel__titel { font-size: 22px; line-height: 26.4px; letter-spacing: -.44px; }
.leistung-wechsel__liste { display: flex; flex-direction: column; gap: 10px; }
.leistung-wechsel__liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 24px; }
.leistung-wechsel__karte--alt .leistung-symbol { color: var(--f-zinc-400); }
.leistung-wechsel__karte--neu .leistung-symbol { color: var(--f-signal); }
.leistung-wechsel__pfeil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--f-signal); color: var(--f-signal-text); }

/* ============================================================
   Migrationswege
   ============================================================ */
.leistung-wege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.leistung-weg { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--f-weiss); border: 1px solid var(--f-zinc-200); border-radius: var(--r-karte); padding: 24px; transition: border-color .18s ease, transform .18s ease; }
.leistung-weg:hover { border-color: var(--f-signal); transform: translateY(-2px); }
.leistung-weg__name { font-family: var(--s-ueberschrift); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.2px; }
.leistung-weg__text { font-size: 15px; line-height: 23.25px; color: var(--f-zinc-500); }
.leistung-weg__ziel { margin-top: auto; padding-top: 10px; font-family: var(--s-ueberschrift); font-size: 13px; font-weight: 700; color: #6b7d09; }
.leistung-wege__hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--f-zinc-100); border-radius: var(--r-karte); padding: 30px; }
.leistung-wege__titel { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }
.leistung-wege__text { font-size: 15px; line-height: 23.25px; color: var(--f-zinc-500); margin-top: 6px; }

/* ============================================================
   Pflege nach dem Go-Live (Design, Migration)
   ============================================================ */
.leistung-pflege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.leistung-pflege__punkt { background: var(--f-weiss); border: 1px solid var(--f-zinc-200); border-radius: var(--r-karte); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.leistung-pflege__zeichen { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--f-signal); color: var(--f-signal-text); }
.leistung-pflege__titel { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }
.leistung-pflege__text { font-size: 15px; line-height: 24px; color: var(--f-zinc-500); }

/* ============================================================
   SEO-Referenzfaelle
   ============================================================ */
.leistung-faelle { display: flex; flex-direction: column; gap: 24px; }
.leistung-fall { display: flex; flex-direction: column; gap: 10px; background: var(--f-weiss); border-radius: var(--r-karte); padding: 40px; }
.leistung-fall__titel { font-size: 36px; line-height: 50.4px; letter-spacing: -1.44px; max-width: 1000px; }
.leistung-fall__domain { font-size: 16px; line-height: 28.8px; font-weight: 500; color: var(--f-zinc-500); }
.leistung-fall__domain a { text-decoration: underline; text-underline-offset: 3px; }
.leistung-fall__gitter { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 32px 40px; margin-top: 22px; }
.leistung-fall__bildfeld { display: flex; align-items: flex-start; }
.leistung-fall__bild { width: 100%; border-radius: 10px; border: 1px solid var(--f-zinc-200); }
.leistung-fall__block { display: flex; flex-direction: column; gap: 10px; }
.leistung-fall__zwischentitel { font-family: var(--s-ueberschrift); font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: -.2px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.leistung-fall__text { font-size: 16px; line-height: 28.8px; color: var(--f-zinc-500); }
.leistung-fall__ergebnisse { display: flex; flex-direction: column; gap: 10px; }
.leistung-fall__ergebnisse li { display: flex; gap: 12px; font-size: 16px; line-height: 24px; color: var(--f-zinc-800); }
.leistung-fall__ergebnisse .leistung-symbol { color: var(--f-signal-text); flex-shrink: 0; margin-top: 4px; }
.leistung-fall__ergebnisse strong { font-weight: 600; }
.leistung-faelle__abschluss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--f-weiss); border-radius: var(--r-karte); padding: 32px 40px; }
.leistung-faelle__titel { font-size: 24px; line-height: 33.6px; letter-spacing: -.72px; }

/* ============================================================
   Textabschnitt mit verwandten Leistungen (Entwicklung)
   ============================================================ */
.leistung-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 60px; }
.leistung-text__spalte { display: flex; flex-direction: column; gap: 20px; }
.leistung-text__absatz { font-size: 16px; line-height: 28.8px; letter-spacing: .48px; color: var(--f-zinc-500); }
.leistung-verwandte { padding-top: 24px; }
.leistung-verwandte__titel { font-family: var(--s-ueberschrift); font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 12px; }
.leistung-verwandte ul { display: flex; flex-direction: column; gap: 12px; }
.leistung-verwandte a { font-size: 18px; line-height: 28.8px; color: var(--f-zinc-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--f-zinc-300); }
.leistung-verwandte a:hover { color: var(--f-schwarz); text-decoration-color: var(--f-signal); }

/* ============================================================
   FAQ: links der Kopf, rechts das Akkordeon (wie im Original)
   ============================================================ */
.leistung-faq { display: grid; grid-template-columns: minmax(0, 387px) minmax(0, 1fr); gap: 40px; align-items: start; }
.leistung-faq__kopf { display: flex; flex-direction: column; gap: 32px; }
.leistung-faq__liste { display: flex; flex-direction: column; }

.faq { border-bottom: 1px solid var(--f-zinc-200); }
.faq__ueberschrift { font-size: inherit; line-height: inherit; letter-spacing: normal; margin: 0; }
.faq__frage {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 20px 0; text-align: left;
  font-family: var(--s-ueberschrift); font-size: 18px; line-height: 25.2px;
  font-weight: 600; letter-spacing: -.72px; color: var(--f-schwarz);
}
.faq--offen > .faq__ueberschrift > .faq__frage { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.faq__zeichen {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50px; background: var(--f-zinc-50);
  box-shadow: rgba(9,9,11,.11) 0 .6px .6px -1.25px, rgba(9,9,11,.1) 0 2.3px 2.3px -2.5px, rgba(9,9,11,.04) 0 10px 10px -3.75px;
  transition: transform .2s ease;
}
.faq--offen .faq__zeichen { transform: rotate(45deg); }
.faq__antwort { padding-bottom: 22px; }
.faq__antwort p { font-size: 16px; line-height: 28.8px; color: var(--f-zinc-500); max-width: 700px; }

/* ============================================================
   Blogband
   ============================================================ */
.leistung-blog { margin-top: 6px; }
.leistung-blog__mehr { display: flex; justify-content: center; margin-top: 10px; }

/* ============================================================
   Ansprechpartner
   ============================================================ */
/* Die Ansprechpartner-Sektion kommt seit dem 10.09. aus basis.njk und gilt
   fuer alle Seiten - hier steht deshalb nichts mehr dazu. */

/* "Mehr laden" ist im Original ein Knopf in #444 - hier fuehrt er auf /blog */
.leistung-mehr { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 22px; border-radius: 10px; background: #444; color: var(--f-weiss); font-size: 14px; font-weight: 600; }
.leistung-mehr:hover { background: #333; }

/* ============================================================
   Tablet: 810-1279 px
   ============================================================ */
@media (max-width: 1279.98px) {
  .leistung-abschnitt { padding: 80px 0; }
  .leistung-abschnitt--hero { padding: 72px 0 40px; }
  .leistung-titel--gross  { font-size: 38px; line-height: 53.2px; letter-spacing: -1.52px; }
  .leistung-titel--mittel { font-size: 29px; line-height: 40.6px; letter-spacing: -1.16px; }
  .leistung-titel--klein, .leistung-titel--spalte { font-size: 26px; line-height: 34px; letter-spacing: -.78px; }
  .leistung-hero { grid-template-columns: 1fr; gap: 36px; }
  .leistung-hero__titel--gross { font-size: 38px; line-height: 45.6px; }
  .leistung-hero__titel--weit  { font-size: 38px; line-height: 46px; }
  .leistung-hero__titel--hero  { font-size: 42px; line-height: 48px; }
  .leistung-hero__bild { max-width: 560px; }
  .leistung-karten--3, .leistung-projekte, .leistung-tarife,
  .leistung-prozess, .leistung-wege, .leistung-pflege, .leistung-system { grid-template-columns: repeat(2, 1fr); }
  .leistung-zahlenband { grid-template-columns: 1fr; gap: 24px; }
  .leistung-haken, .leistung-systemblock { grid-template-columns: 1fr; }
  .leistung-haken__punkte { grid-template-columns: repeat(3, 1fr); }
  .leistung-faq { grid-template-columns: 1fr; gap: 28px; }
  .leistung-text { grid-template-columns: 1fr; gap: 32px; }
  .leistung-referenz__koerper { grid-template-columns: 1fr; gap: 24px; }
  .leistung-partner__orden { grid-template-columns: auto auto; }
  .leistung-partner__abzeichen { grid-template-columns: repeat(2, 1fr); }
  .leistung-ablauf__linie, .leistung-ablauf__pfeil, .leistung-ablauf__notiz { display: none; }
  .leistung-merkmale { grid-template-columns: repeat(2, 1fr); }
  .leistung-merkmale__haupt { grid-column: span 2; }
}

/* ============================================================
   Mobil: bis 809 px
   ============================================================ */
@media (max-width: 809.98px) {
  .leistung-abschnitt { padding: 64px 0; }
  .leistung-abschnitt--hero { padding: 48px 0 32px; }
  .leistung-abschnitt__innen { gap: 24px; }
  .leistung-titel--gross  { font-size: 28px; line-height: 39.2px; letter-spacing: -1.12px; }
  .leistung-titel--mittel { font-size: 24px; line-height: 33.6px; letter-spacing: -.96px; }
  .leistung-titel--klein, .leistung-titel--spalte { font-size: 22px; line-height: 30px; letter-spacing: -.66px; }
  .leistung-hero__titel--gross,
  .leistung-hero__titel--weit,
  .leistung-hero__titel--hero { font-size: 32px; line-height: 38.4px; letter-spacing: -.64px; }
  .leistung-hero__vorspann { font-size: 16px; line-height: 25.6px; }
  .leistung-hero__knoepfe { width: 100%; }
  .leistung-hero__knoepfe .knopf { flex: 1 1 100%; justify-content: center; padding-inline: 20px; }
  .leistung-logos__liste { gap: 20px; }
  .leistung-logos__liste img { max-width: 90px; max-height: 30px; }
  .leistung-karten--3, .leistung-karten--2, .leistung-projekte,
  .leistung-tarife, .leistung-prozess, .leistung-wege, .leistung-pflege,
  .leistung-kennzahlen, .leistung-system, .leistung-vergleich, .leistung-ablauf,
  .leistung-merkmale, .leistung-theme, .leistung-skizze { grid-template-columns: 1fr; }
  .leistung-fall__gitter { grid-template-columns: 1fr; }
  .leistung-fall { padding: 24px; }
  .leistung-fall { padding: 24px; }
  .leistung-merkmale__haupt { grid-column: auto; }
  .leistung-haken__punkte { grid-template-columns: 1fr; }
  .leistung-wechsel { grid-template-columns: 1fr; }
  .leistung-wechsel__pfeil { justify-self: center; transform: rotate(90deg); }
  .leistung-vergleich__spalte { padding: 28px; }
  .leistung-referenz { padding: 28px; }
  .leistung-referenz__zitat { font-size: 20px; }
  .leistung-projekte { gap: 20px; }
  .leistung-partner { padding: 28px; }
  .leistung-partner__zahlen { grid-template-columns: 1fr; }
  .leistung-fall__titel { font-size: 24px; line-height: 33.6px; letter-spacing: -.96px; }
  .faq__frage { font-size: 17px; line-height: 24px; }
  .faq--offen > .faq__ueberschrift > .faq__frage { font-size: 18px; line-height: 26px; }
}

/* ============================================================
   Luftigere Abstaende in den Aufzaehlungen der Leistungsseiten.
   Das Original hat diese Punkte als EINZELABSAETZE gesetzt (Framer kennt im
   Editor keine Listen) und gibt ihnen dadurch den Absatzabstand von 20 px.
   Der Nachbau zeichnet sie sauber als <ul> aus - dann stehen sie aber enger,
   und die Seiten wurden bis zu 10 % kuerzer als das Original.
   Hier der Ausgleich: gleiche Optik wie vorher, korrekte Auszeichnung.
   ============================================================ */
.leistung-fall__ergebnisse { gap: 20px; }
.leistung-fall__block { gap: 18px; }
.leistung-vergleich__liste { display: flex; flex-direction: column; gap: 18px; }
.leistung-fall__ergebnisse li { line-height: 26px; }

/* FAQ-Eintraege luftiger: das Original setzt hier mehr Abstand zwischen den
   zugeklappten Fragen. Betrifft alle sieben Leistungsseiten gleichzeitig. */
.faq__frage { padding: 26px 0; }
.faq__antwort { padding-bottom: 28px; }


/* ---- teile/12-projekte.css ---- */
/* ============================================================
   Projekte (Uebersicht + drei Fallstudien) und Ueber Uns
   ------------------------------------------------------------
   Jeder Wert hier ist am Original gemessen (getComputedStyle in
   headless Chrome, archiv/gerendert*, drei Breiten 1440/1024/390).
   Alle Klassen tragen das Praefix .projekt-, damit parallel
   arbeitende Agenten sich nicht ins Gehege kommen.
   ============================================================ */

/* --- Abschnitte: Flaechenfarbe + Rhythmus ------------------- */
/* Gemessen: 100 px Polster oben wie unten, auf allen drei Breiten. */
.projekt-abschnitt { padding-block: 100px; }
.projekt-abschnitt--hell   { background: var(--f-zinc-50); }   /* rgb(250,250,250) */
.projekt-abschnitt--weiss  { background: var(--f-weiss); }

/* --- Etiketten --------------------------------------------- */
/* "seit 1999 · Shopware Agentur" / "Unser ganzer Stolz":
   Radius 7 px, Polster 8/12, Inter Tight 14/22.4, Sperrung 0.02em. */
.projekt-etikett {
  display: inline-flex; align-items: center;
  border-radius: 7px; padding: 8px 12px;
  font-family: var(--s-text); font-size: 14px; line-height: 22.4px;
  font-weight: 400; letter-spacing: .02em;
  background: var(--f-weiss); color: var(--f-schwarz);
  width: fit-content;
}
.projekt-etikett--signal { background: var(--f-signal); }

/* Augenbraue: "PROJEKTE / REFERENZ", "KUNDE", "AUSGANGSLAGE"
   Plus Jakarta Sans 16.5/19.8, 600, Sperrung 0.13em, Grossbuchstaben. */
.projekt-augenbraue {
  font-family: var(--s-ueberschrift);
  font-size: 16.5px; line-height: 19.8px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--f-signal);
}
.projekt-augenbraue--linie { color: var(--f-zinc-200); }
.projekt-augenbraue--hell  { color: var(--f-zinc-50); }

/* --- Knoepfe des Hero-Paares ------------------------------- */
/* Gemessen: Hoehe 50, Radius 10, Polster 14/20/14/25, Abstand 5 px
   zum Pfeil, Inter Tight 16/28.8/600. Bewusste Abweichung: das
   Original schrumpft die Beschriftung auf 13 px (Tablet) bzw. 10 px
   (Mobil) - das ist unter jeder Lesbarkeitsgrenze, wir bleiben bei 16. */
.projekt-knopf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 13px 20px 13px 25px; border-radius: var(--r-basis);
  font-family: var(--s-text); font-size: 16px; line-height: 22px;
  font-weight: 600; letter-spacing: .03em;
  border: 1px solid transparent;
  transition: background-color .18s ease, transform .18s ease;
}
.projekt-knopf:hover { transform: translateY(-1px); }
.projekt-knopf svg { flex-shrink: 0; }
.projekt-knopf--signal { background: var(--f-signal); color: var(--f-schwarz); border-color: var(--f-zinc-200); }
.projekt-knopf--signal:hover { background: #cbe419; }
.projekt-knopf--dunkel { background: var(--f-zinc-800); color: var(--f-weiss); }
.projekt-knopf--dunkel:hover { background: var(--f-zinc-700); }
.projekt-knopf--rahmen { background: var(--f-schwarz); color: var(--f-zinc-50); border-color: var(--f-zinc-700); }
.projekt-knopf--rahmen:hover { background: var(--f-zinc-900); }
.projekt-knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   /projekte - Hero
   ============================================================ */
/* Gemessen: 120 px Polster oben (Desktop), 80 px unten. */
.projekt-hero { background: var(--f-schwarz); color: var(--f-weiss); padding-block: 120px 80px; }
.projekt-hero__titel {
  max-width: 580px; margin-top: 24px;
  font-size: 54px; line-height: 60.48px; letter-spacing: -.02em;
  color: var(--f-weiss); hyphens: auto;
}
.projekt-hero__text {
  max-width: 520px; margin-top: 24px;
  font-size: 18px; line-height: 28.8px; letter-spacing: .02em;
  color: var(--f-zinc-300);
}
.projekt-hero .projekt-knopfreihe { margin-top: 33px; }

/* Logoband: Trennlinie 1 px #3f3f46, 110 px darueber, 35 px darunter. */
.projekt-band { display: flex; align-items: center; gap: 30px; margin-top: 35px; }
.projekt-band__linie { height: 1px; background: var(--f-zinc-700); margin-top: 110px; }
.projekt-band__titel {
  flex-shrink: 0;
  font-size: 18px; line-height: 28.8px; letter-spacing: .02em;
  color: var(--f-zinc-500);
}
.projekt-band__fenster {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.projekt-band__spur { display: flex; width: max-content; animation: projekt-band-lauf 46s linear infinite; }
.projekt-band__liste { display: flex; align-items: center; gap: 80px; padding-right: 80px; }
.projekt-band__logo {
  height: 45px; width: auto; object-fit: cover; flex-shrink: 0;
  /* Der Filter macht aus jedem bunten Kundenlogo ein helles - genau wie
     im Original (brightness(.05) grayscale(1) invert(.9)). */
  filter: brightness(.05) grayscale(1) invert(.9);
}
@keyframes projekt-band-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .projekt-band__spur { animation: none; }
  .projekt-band__fenster { overflow-x: auto; }
}

/* ============================================================
   /projekte - Kartengitter
   ============================================================ */
.projekt-kopfblock { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.projekt-kopfblock__text { font-size: 18px; line-height: 28.8px; letter-spacing: .01em; }

.projekt-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 29px; }
.projekt-nachsatz { margin-top: 30px; font-size: 18px; line-height: 28.8px; letter-spacing: .01em; }

/* Karte: 600 px hoch, #141418, Radius 20 */
.projekt-karte {
  display: flex; flex-direction: column; min-height: 600px;
  background: var(--f-schwarz-weich); border-radius: var(--r-karte); overflow: hidden;
  color: var(--f-weiss);
  transition: transform .2s ease, box-shadow .2s ease;
}
.projekt-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-dunkel); }
.projekt-karte__buehne { position: relative; height: 240px; background: #1c1c22; flex-shrink: 0; }
.projekt-karte__buehne picture { display: block; width: 100%; height: 100%; }
.projekt-karte__bild { width: 100%; height: 100%; object-fit: cover; }
.projekt-karte__logo {
  position: absolute; top: 16px; left: 16px;
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 5px 10px;
  background: var(--f-weiss); border-radius: var(--r-basis);
}
.projekt-karte__logo img { max-height: 34px; width: auto; object-fit: contain; }
.projekt-karte__pille {
  position: absolute; right: 17px; bottom: 16px;
  background: var(--f-signal); color: var(--f-schwarz);
  border-radius: 99px; padding: 5px 10px;
}
.projekt-karte__koerper { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.projekt-karte__marken { display: flex; flex-wrap: wrap; gap: 6px; }
.projekt-karte__titel {
  margin-top: 10px;
  font-size: 26px; line-height: 32.5px; letter-spacing: -.03em; color: var(--f-weiss);
}
.projekt-karte__text {
  margin-top: 10px;
  font-size: 15px; line-height: 24px; letter-spacing: .01em; color: var(--f-zinc-400);
}
.projekt-karte__mehr {
  margin-top: auto; padding-top: 24px;
  font-family: var(--s-ueberschrift); font-size: 16px; line-height: 19.2px; font-weight: 700;
  color: rgb(214, 213, 142);
}

/* Marken-Pillen der Karte (12,5 px - so gemessen, kein Tippfehler) */
.projekt-marke {
  font-family: var(--s-ueberschrift); font-size: 12.5px; line-height: 15px;
  font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.projekt-marke--branche { background: rgba(219, 242, 39, .33); color: var(--f-signal); border-radius: var(--r-basis); padding: 5px 10px; }
.projekt-marke--thema   { background: rgba(255, 255, 255, .06); color: var(--f-zinc-300); border-radius: 99px; padding: 5px 10px; }

/* ============================================================
   Ansprechpartner-Block: NICHT hier.
   ------------------------------------------------------------
   Er kommt seit dem 10.09. aus basis.njk / _vorlagen/ansprechpartner.njk
   und gehoert damit einem anderen Agenten. Die eigene Fassung ist entfernt,
   damit er nicht zweimal auf der Seite steht.

   Damit die Messungen nicht verloren gehen - der Framer-Code-Baustein
   (mcp001) richtet sich nach seiner EIGENEN Breite, nicht nach dem Fenster,
   und kennt drei Stufen (Schwellen nachgemessen bei 540/568 und 1012/1032 px
   Elementbreite):

     unter 560 px   1 Spalte, Radius 18, Bildfeld 280 hoch,
                    Plakette 16/16 bei 11 px, Textspalte 32/24, Titel 26 px,
                    Fliesstext 15 px
     ab 560 px      minmax(200px, .55fr) 1fr, Radius 24, Bildfeld 420 hoch,
                    Plakette 24/24 bei 10 px und Polster 5/10,
                    Textspalte 36/32, Titel 28 px, Fliesstext 16 px
     ab 1024 px     minmax(300px, .8fr) 1.4fr, Bildfeld 460 hoch,
                    Plakette wieder 11 px / 6-12, Textspalte 56, Titel 36 px

   Konstant: Bildflaeche linear-gradient(135deg,#1a1a20,#2a2a32), Bild
   object-position: center top; Augenbraue Plus Jakarta Sans 12/700/0.1em
   in Grossbuchstaben mit 6-px-Punkt, 14 px Abstand nach unten; Titel 700,
   -0.02em, Zeile 1.15, 16 px nach unten; Fliesstext Inter Tight, Zeile 1.55,
   rgba(255,255,255,.65), hoechstens 560 px breit, 26 px nach unten;
   Name Plus Jakarta Sans 15/600/1.3; Rolle Inter Tight 13/1.3 in
   rgba(255,255,255,.55), Block 28 px nach unten; Knopf #dbf227,
   Plus Jakarta Sans 15/700, Polster 14/24, Radius 10, 10 px Abstand zum Blitz.
   Der Abschnitt selbst hat 50 px Polster oben und 100 px unten.
   ============================================================ */

/* ============================================================
   Fallstudie (Detailseite) - durchgehend dunkel
   ============================================================ */
.projekt-fall { background: var(--f-schwarz); color: var(--f-zinc-300); }
.projekt-fall__hero { padding-block: 100px 30px; }
.projekt-fall__titel { margin-top: 30px; color: var(--f-zinc-50); letter-spacing: normal; }
.projekt-fall__lead {
  margin-top: 30px; max-width: 640px;
  font-size: 19px; line-height: 30.4px; font-weight: 500; letter-spacing: .01em;
  color: var(--f-zinc-50);
}
.projekt-fall__bild { margin-top: 30px; border-radius: var(--r-karte); overflow: hidden; }
.projekt-fall__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Faktenkasten: 1 px Fugen, Zellen #09090b auf rgba(255,255,255,.15) */
.projekt-fakten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  max-width: 1000px; margin: 30px auto 0;
  background: rgba(255, 255, 255, .15); border-radius: 16px; overflow: hidden;
}
.projekt-fakten__zelle {
  display: flex; flex-direction: column; gap: 9px;
  width: 100%; max-width: 400px; margin-inline: auto;
  padding: 30px; background: var(--f-schwarz);
}
.projekt-fakten__wert {
  font-family: var(--s-ueberschrift); font-size: 18px; line-height: 25.2px;
  font-weight: 600; letter-spacing: -.01em; color: var(--f-zinc-50);
}

/* Zwei Spalten: links der Kurzindex, rechts die Fallstudie */
.projekt-fall__raster { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.projekt-schritte { display: flex; flex-direction: column; gap: 6px; }
.projekt-schritte li { display: flex; align-items: center; gap: 13px; padding-block: 9px; }
.projekt-schritte__titel {
  font-family: var(--s-ueberschrift); font-size: 18px; line-height: 25.2px;
  font-weight: 600; letter-spacing: -.01em; color: var(--f-weiss);
}
.projekt-nummer {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: var(--r-klein);
  background: var(--f-signal); color: var(--f-schwarz);
  font-family: var(--s-ueberschrift); font-size: 15px; line-height: 15px;
  font-weight: 700; letter-spacing: -.02em;
}
.projekt-nummer--gross { width: 34px; height: 34px; border-radius: 9px; }

.projekt-kapitel { display: flex; flex-direction: column; gap: 60px; }
.projekt-kapitel__block { display: flex; flex-direction: column; gap: 18px; max-width: 1080px; }
.projekt-kapitel__kopf { display: flex; align-items: center; gap: 14px; }

/* Fliesstext der Fallstudie: im Original INTER (nicht Inter Tight),
   16/25.6, Sperrung -0.02em, Farbe #d4d4d8. */
.projekt-text p { font-size: 16px; line-height: 25.6px; letter-spacing: -.02em; color: var(--f-zinc-300); }
.projekt-text strong { font-weight: 700; color: var(--f-zinc-300); }
.projekt-text ul { list-style: disc; padding-left: 20px; }
.projekt-text li::marker { color: var(--f-zinc-500); }
/* Gemessen: 20 px zwischen zwei Absaetzen, 32 px vor und nach einer Liste,
   0 px zwischen Listenpunkten. */
.projekt-text > p + p { margin-top: 20px; }
.projekt-text > ul { margin-top: 32px; }
.projekt-text > ul + p { margin-top: 32px; }
.projekt-text li > ul { margin-top: 0; }

/* Galerie */
.projekt-galerie__titel { color: var(--f-signal); }
.projekt-galerie__liste { display: flex; flex-direction: column; gap: 60px; margin-top: 33px; }
.projekt-galerie__bild { border-radius: var(--r-karte); overflow: hidden; }
.projekt-galerie__bild img { width: 100%; height: auto; }

.projekt-zurueck { background: var(--f-schwarz); padding-block: 0 50px; }

/* ============================================================
   /ueber-uns
   ============================================================ */
.projekt-ueber-hero { background: var(--f-schwarz); color: var(--f-weiss); padding-block: 100px; }
.projekt-ueber-hero__innen { display: grid; grid-template-columns: 560px 610px; gap: 30px; align-items: center; }
.projekt-ueber-hero__titel {
  margin-top: 24px;
  font-size: 54px; line-height: 60.48px; letter-spacing: -.02em; color: var(--f-weiss);
}
.projekt-ueber-hero__text {
  margin-top: 25px;
  font-family: var(--s-ueberschrift); font-size: 18px; line-height: 28.8px;
  font-weight: 400; letter-spacing: normal; color: rgba(255, 255, 255, .72);
}
.projekt-ueber-hero .projekt-knopfreihe { margin-top: 32px; }
.projekt-ueber-hero__bild {
  /* Gemessen: der Kasten ist auf ALLEN Breiten 460 px hoch, die Zeichnung
     sitzt darin zentriert (preserveAspectRatio). Ohne feste Hoehe waere die
     Grafik auf dem Handy deutlich flacher als im Original. */
  width: 100%; height: 460px;
}

/* Bewegung der Schmuckgrafik - Werte aus dem <style>-Block des Originals. */
@keyframes projekt-illu-schweben-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes projekt-illu-schweben-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes projekt-illu-blinken    { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes projekt-illu-treiben    { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, -9px); } }
.projekt-illu-fa      { animation: projekt-illu-schweben-a 5s ease-in-out infinite; }
.projekt-illu-fb      { animation: projekt-illu-schweben-b 6.5s ease-in-out infinite; }
.projekt-illu-schirm  { animation: projekt-illu-schweben-b 7s ease-in-out infinite; }
.projekt-illu-blinken { animation: projekt-illu-blinken 2.6s ease-in-out infinite; }
.projekt-illu-d1      { animation: projekt-illu-treiben 7s ease-in-out infinite; }
.projekt-illu-d2      { animation: projekt-illu-treiben 9.5s ease-in-out infinite; }

/* Zahlenband auf Signalfarbe */
.projekt-zahlen { padding-block: 50px; background: var(--f-signal); color: var(--f-schwarz); }
.projekt-zahlen__gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.projekt-zahl__wert {
  font-family: var(--s-ueberschrift); font-size: 40px; line-height: 40px;
  font-weight: 700; letter-spacing: -.03em;
}
.projekt-zahl__label { margin-top: 6px; font-size: 13.5px; line-height: 18.9px; font-weight: 500; letter-spacing: .01em; }

/* Geschichte: links Etikett + Ueberschrift, rechts drei Absaetze */
.projekt-geschichte { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 30px; }
.projekt-geschichte__titel { margin-top: 16px; }
.projekt-geschichte__text { display: flex; flex-direction: column; gap: 22px; }
.projekt-geschichte__text p { font-size: 18px; line-height: 28.8px; letter-spacing: .02em; color: var(--f-zinc-800); }

/* Werte-Karten */
.projekt-werte__kopf { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 640px; }
.projekt-werte__text { font-size: 18px; line-height: 28.8px; letter-spacing: .01em; color: var(--f-zinc-700); }
.projekt-werte__gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; margin-top: 29px; }
.projekt-wert {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px; background: var(--f-weiss); border-radius: 18px;
}
.projekt-wert__strich { width: 32px; height: 4px; border-radius: 2px; background: var(--f-signal); }
.projekt-wert__titel { letter-spacing: -.03em; }
.projekt-wert__text { font-size: 16px; line-height: 25.6px; letter-spacing: .02em; color: var(--f-zinc-800); }

/* Team */
.projekt-team__gitter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 32px; margin-top: 32px; }
.projekt-person { display: flex; align-items: center; gap: 14px; }
.projekt-person__kreis { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.projekt-person__name { letter-spacing: -.01em; }
.projekt-person__rolle { font-size: 14px; line-height: 22.4px; letter-spacing: .02em; color: rgb(139, 148, 160); }

/* ============================================================
   Tablet (810-1279 px) - Framers Breakpoint
   ============================================================ */
@media (max-width: 1279.98px) {
  .projekt-hero { padding-block: 100px 80px; }
  .projekt-gitter { grid-template-columns: repeat(2, 1fr); }
  .projekt-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projekt-fall__raster { gap: 56px; }
  .projekt-ueber-hero__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .projekt-geschichte { grid-template-columns: 320px minmax(0, 1fr); }
  .projekt-team__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 49px 32px; }
}

/* ============================================================
   Mobil (bis 809 px)
   ============================================================ */
@media (max-width: 809.98px) {
  .projekt-gitter { grid-template-columns: 1fr; }
  .projekt-hero__titel, .projekt-ueber-hero__titel { max-width: none; }
  .projekt-band { flex-wrap: wrap; gap: 16px; }
  .projekt-band__titel { font-size: 16px; line-height: 25.6px; }

  .projekt-fakten { grid-template-columns: minmax(0, 1fr); }
  /* Der Kurzindex ist im Original auf Mobil ausgeblendet - die drei
     Kapitel stehen ohnehin unmittelbar darunter. */
  .projekt-fall__raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .projekt-schritte { display: none; }
  .projekt-galerie__liste { gap: 40px; margin-top: 28px; }

  .projekt-ueber-hero__innen { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .projekt-zahlen__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projekt-geschichte { grid-template-columns: minmax(0, 1fr); gap: 31px; }
  .projekt-werte__gitter { grid-template-columns: minmax(0, 1fr); }
  .projekt-team__gitter { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}


/* ---- teile/13-kontakt.css ---- */
/* ============================================================
   Kontakt (/kontakt) und Rechtstexte (/impressum, /datenschutz, /agb)

   Alle Werte am Original gemessen, Quellen:
     - archiv/design.json, Schluessel "1440/kontakt", "1024/kontakt", "390/kontakt"
     - die Framer-Regeln in archiv/gerendert/kontakt.html und impressum.html
       (dazu gerendert1024/ und gerendert390/ fuer die Umbrueche)
       (Klassen .framer-17suixw, .framer-1ktcrax, .framer-1xlre37, .framer-1635aq,
        .framer-103z737, .framer-156bvoh, .framer-9hzq0s, .framer-1fm2bp7)
     - die Textvorgaben ("styles preset") hrc8be, stngzc, fi66dc, ch62d5,
       11zorzc, fvy4c6, ntfn9g, 1nqpcik, oqxj12

   Bewusste Abweichungen (siehe Meldung):
     - Formularbeschriftung, Eingabefelder und Absendeknopf laufen im Original in
       "Inter". Diese Familie wird laut DESIGN.md nicht mehr geladen, hier steht
       stattdessen Inter Tight (--s-text).
     - Eingegebener Text steht auf #27272a statt #999 (Kontrast).
     - Die weisse Formularkarte hat im Original unter 1280 px eine feste Hoehe
       von 911 px (Framer-Artefakt) - hier waechst sie mit dem Inhalt.
     - Der CTA-Block der Rechtstexte ist im Original 1200 px BREIT fixiert und
       wird auf dem Handy abgeschnitten - hier max-width.
   ============================================================ */

/* ------------------------------------------------------------
   1. Kontakt - dunkler Kopfbereich
   ------------------------------------------------------------ */
.kontakt-kopf { background: var(--f-schwarz); }

.kontakt-kopf__innen {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding: 96px 40px;          /* gemessen, auf allen drei Breiten gleich */
  display: flex; flex-direction: column; gap: 48px;
}

.kontakt-einstieg { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* Etikett "Kontakt": Signalfarbe, Radius 7 px (nicht 999 px wie die .pille) */
.kontakt-marke {
  background: var(--f-signal); color: var(--f-schwarz);
  border-radius: 7px; padding: 8px 12px; width: fit-content;
  font-family: var(--s-text); font-size: 14px; line-height: 1.6;
  font-weight: 400; letter-spacing: .02em;
}

/* h1 hier 54 px auf ALLEN Breiten - das Original wechselt nicht mit. */
.kontakt-titel {
  width: 100%;                 /* wie im Original - sonst waechst der Titel als
                                  Flexkind auf max-content und laeuft raus */
  font-family: var(--s-ueberschrift);
  font-size: 54px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em;
  color: var(--f-weiss); overflow-wrap: break-word;
}

.kontakt-vorspann {
  width: 100%;
  font-family: var(--s-ueberschrift);
  font-size: 18px; line-height: 1.6; font-weight: 400; letter-spacing: 0;
  color: rgba(255, 255, 255, .72);
  max-width: 640px;
}

/* ------------------------------------------------------------
   2. Kontakt - Formularkarte neben der Nutzenspalte
   ------------------------------------------------------------ */
.kontakt-spalten { display: flex; align-items: flex-start; gap: 40px; }

.kontakt-karte {
  flex: 1 1 0; min-width: 0; align-self: stretch;
  background: var(--f-weiss); border-radius: var(--r-karte); padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
}

.kontakt-karte__titel {          /* im Original ein h5 - Rang bleibt */
  font-family: var(--s-ueberschrift);
  font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: -.03em;
  color: var(--f-schwarz);
}

.kontakt-karte__text,
.kontakt-hinweis {
  font-family: var(--s-text);
  font-size: 16px; line-height: 1.8; font-weight: 400; letter-spacing: .03em;
  color: var(--f-schwarz);
}
.kontakt-hinweis a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   3. Das Formular selbst (auch von /formular.php benutzt)
   ------------------------------------------------------------ */
.kontakt-formular { width: 100%; display: flex; flex-direction: column; gap: 20px; }

.kontakt-feld { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.kontakt-feld__name {
  font-family: var(--s-text);
  font-size: 12px; line-height: 1.2; font-weight: 500; color: #888;
}
.kontakt-feld__pflicht { color: #8a6d00; }

.kontakt-feld__eingabe {
  width: 100%; height: 40px; padding: 12px;
  background: rgba(187, 187, 187, .15);
  border: 1px solid rgba(136, 136, 136, .1);
  border-radius: var(--r-basis);
  font-family: var(--s-text);
  font-size: 14px; line-height: 1.2; font-weight: 400;
  color: var(--f-zinc-800);
}
.kontakt-feld__eingabe::placeholder { color: #999; }
.kontakt-feld__eingabe:focus-visible {
  outline: 2px solid #09f; outline-offset: 1px; border-color: #09f;
}

textarea.kontakt-feld__eingabe {
  height: auto; min-height: 100px; resize: vertical;
  line-height: 1.5;                    /* mehrzeilig lesbar, 1.2 klebt */
}

/* Honigtopf: fuer Menschen und Vorleseprogramme weg, fuer Robots sichtbar. */
.kontakt-koeder {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}

.kontakt-absenden {
  width: 100%; height: 40px;
  background: #333; color: var(--f-weiss);
  border-radius: var(--r-basis);
  font-family: var(--s-text);
  font-size: 14px; line-height: 1.2; font-weight: 600;
  transition: background-color .18s ease;
}
.kontakt-absenden:hover { background: #444; }

/* Rueckmeldung des Servers */
.kontakt-melde {
  border-radius: var(--r-basis); padding: 14px 16px;
  font-family: var(--s-text); font-size: 15px; line-height: 1.6;
}
.kontakt-melde--fehler { background: #fdecec; color: #7f1d1d; border: 1px solid #f3c2c2; }
.kontakt-melde--gut    { background: #eef7e6; color: #1f4d13; border: 1px solid #c9e3b4; }
.kontakt-melde ul { margin-top: 6px; padding-left: 18px; list-style: disc; }

.kontakt-feld__fehler {
  font-family: var(--s-text); font-size: 13px; line-height: 1.5; color: #b3261e;
}
.kontakt-feld--fehler .kontakt-feld__eingabe { border-color: #b3261e; }

/* ------------------------------------------------------------
   4. Kontakt - Nutzenspalte rechts
   ------------------------------------------------------------ */
.kontakt-nutzen {
  flex: none; width: 380px;
  display: flex; flex-direction: column; gap: 30px;
  font-family: var(--s-ueberschrift);
  /* Der Framer-Codebaustein erbt KEINE Zeilenhoehe (Framer setzt am body
     keine). basis.css setzt 28.8px - das muss hier zurueckgenommen werden,
     sonst wachsen alle Zeilen ohne eigene Angabe um 14 px. */
  line-height: normal;
}

.kontakt-nutzen__block { display: flex; flex-direction: column; gap: 18px; }

.kontakt-nutzen__marke {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--f-signal);
}

.kontakt-nutzen__liste { display: flex; flex-direction: column; gap: 16px; }
.kontakt-nutzen__punkt { display: flex; align-items: flex-start; gap: 13px; }

.kontakt-nutzen__haken {
  flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
  border-radius: var(--r-pille); background: var(--f-signal);
  display: grid; place-items: center;
}

.kontakt-nutzen__text  { display: flex; flex-direction: column; gap: 3px; }
.kontakt-nutzen__titel { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--f-weiss); }
.kontakt-nutzen__unter { font-size: 14px; line-height: 1.5; color: var(--f-zinc-400); }

.kontakt-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.kontakt-zahl {
  flex: 1 1 0; min-width: 96px;
  background: var(--f-schwarz-weich);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.kontakt-zahl__wert { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--f-weiss); }
.kontakt-zahl__text { font-size: 12.5px; line-height: 1.3; color: var(--f-zinc-400); }

.kontakt-ablauf {
  background: var(--f-schwarz-weich);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.kontakt-ablauf__titel  { font-size: 16px; font-weight: 700; color: var(--f-weiss); }
.kontakt-ablauf__liste  { display: flex; flex-direction: column; gap: 0; }
.kontakt-ablauf__schritt{ display: flex; gap: 14px; }
.kontakt-ablauf__spur   { display: flex; flex-direction: column; align-items: center; }
.kontakt-ablauf__nummer {
  flex-shrink: 0; width: 28px; height: 28px;
  border-radius: var(--r-pille); background: var(--f-signal); color: var(--f-signal-text);
  font-size: 14px; font-weight: 700; display: grid; place-items: center;
}
.kontakt-ablauf__linie {
  width: 2px; flex: 1; min-height: 22px;
  background: rgba(255, 255, 255, .08); margin: 4px 0;
}
.kontakt-ablauf__text {
  display: flex; flex-direction: column; gap: 3px; padding-bottom: 18px;
}
.kontakt-ablauf__schritt:last-child .kontakt-ablauf__text { padding-bottom: 0; }
.kontakt-ablauf__name  { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--f-weiss); }
.kontakt-ablauf__unter { font-size: 14px; line-height: 1.5; color: var(--f-zinc-400); }

/* ------------------------------------------------------------
   5. Kontakt - Telefon/E-Mail-Streifen (helle Sektion, dunkle Karte)
   ------------------------------------------------------------ */
.kontakt-wege {
  background: var(--f-weiss);
  border-bottom: 1px solid var(--f-schwarz);
  padding: 80px 40px 96px;
  display: flex; justify-content: center;
}
.kontakt-wege__innen { width: 100%; max-width: 1100px; }

.kontakt-wege__karte {
  background: var(--f-schwarz-weich);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px; padding: 14px;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px;
  font-family: var(--s-ueberschrift);
  line-height: normal;          /* wie im Original, siehe .kontakt-nutzen */
}

.kontakt-weg { flex: 1 1 240px; display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; }
.kontakt-weg__symbol {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 11px; background: rgba(219, 242, 39, .1);
  display: grid; place-items: center;
}
.kontakt-weg__text { display: flex; flex-direction: column; gap: 5px; }
.kontakt-weg__art  {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--f-signal);
}
.kontakt-weg__wert { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--f-weiss); }
.kontakt-weg__zeit { font-size: 14px; line-height: 1.5; color: var(--f-zinc-400); }

.kontakt-wege__trenner { width: 1px; align-self: stretch; margin: 10px 0; background: rgba(255, 255, 255, .1); }

/* ------------------------------------------------------------
   6. Kontakt - Umbrueche (Framer: 1279.98 / 809.98)
   ------------------------------------------------------------ */
@media (max-width: 1279.98px) {
  .kontakt-spalten { flex-direction: column; }
  .kontakt-karte   { align-self: auto; flex: none; width: 100%; }
  .kontakt-nutzen  { width: 100%; }
  .kontakt-karte__titel { font-size: 20px; }
}

@media (max-width: 809.98px) {
  .kontakt-karte__titel { font-size: 18px; letter-spacing: -.01em; }
  .kontakt-karte__text,
  .kontakt-hinweis { font-size: 15px; }
  /* Seitenpolster, Trenner und Innenpolster bleiben wie im Original -
     das Original aendert sie unter 810 px NICHT. */
}

/* ------------------------------------------------------------
   7. Rueckmeldeseite /formular.php (steht ausserhalb von Eleventy)
   ------------------------------------------------------------ */
.kontakt-seite { background: var(--f-schwarz); min-height: 100vh; }
.kontakt-seite__innen {
  max-width: 720px; margin-inline: auto;
  padding: 64px 40px 96px;
  display: flex; flex-direction: column; gap: 32px;
}
.kontakt-seite__marke img { width: 130px; height: auto; }
.kontakt-seite__zurueck {
  font-family: var(--s-text); font-size: 15px; color: var(--f-zinc-400);
}
.kontakt-seite__zurueck:hover { color: var(--f-weiss); }

/* ------------------------------------------------------------
   8. Rechtstexte - Kopfbereich (weiss, gepunktetes Muster)
   ------------------------------------------------------------ */
.rechtstext-kopf {
  background: var(--f-weiss);
  position: relative; overflow: hidden;
  display: flex; justify-content: center;
}

/* Das Original legt eine 96x96-Kachel mit vier Punkten bei 41 px Breite auf,
   Deckkraft 0.1, nach unten ausgeblendet. Als data-URI: kein Extra-Abruf. */
.rechtstext-kopf__muster {
  position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22%3E%3Cpath fill=%22%23FFF%22 d=%22M0 0h96v96H0z%22/%3E%3Cpath d=%22M24 20a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 48a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm48 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0-48a4 4 0 1 1 0 8 4 4 0 0 1 0-8z%22/%3E%3C/svg%3E");
  background-repeat: repeat; background-position: center; background-size: 41px auto;
  -webkit-mask-image: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
          mask-image: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.rechtstext-kopf__innen {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--breite-inhalt);
  padding: 165px 15px 80px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.rechtstext-kopf__titel {
  width: 100%; max-width: 100%;   /* wie im Original: sonst sprengt
                                     "Geschaeftsbedingungen" auf dem Handy die
                                     Spalte und wird abgeschnitten */
  font-family: var(--s-ueberschrift);
  font-size: 70px; line-height: 1.2; font-weight: 600; letter-spacing: 0;
  text-align: center; color: var(--f-schwarz);
  overflow-wrap: break-word; word-break: break-word;
}

/* ------------------------------------------------------------
   9. Rechtstexte - Textkoerper
   ------------------------------------------------------------ */
.rechtstext {
  background: var(--f-weiss);
  padding: 15px 15px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}

.rechtstext__block {
  width: 100%; max-width: 1000px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
}

.rechtstext__marke {
  background: var(--f-signal); color: var(--f-schwarz);
  border-radius: 7px; padding: 8px 12px; width: fit-content;
  font-family: var(--s-text); font-size: 14px; line-height: 1.6;
  font-weight: 400; letter-spacing: .02em;
}

.rechtstext__titel {
  font-family: var(--s-ueberschrift);
  font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em;
  color: var(--f-schwarz);
}

.rechtstext__block p {
  font-family: var(--s-text);
  font-size: 16px; line-height: 1.8; font-weight: 400; letter-spacing: .03em;
  color: var(--f-schwarz);
  overflow-wrap: break-word;         /* die langen Google-Adressen sprengen sonst */
}
/* Framer setzt --framer-paragraph-spacing: 20px zwischen Absaetzen. */
.rechtstext__block p + p { margin-top: 20px; }
.rechtstext__block a { color: #09f; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   10. Rechtstexte - Abschlussblock "Rueckruf ... anfordern"
   ------------------------------------------------------------ */
.rechtstext-cta { background: var(--f-weiss); display: flex; justify-content: center; padding: 31px 40px; }

.rechtstext-cta__karte {
  position: relative; overflow: hidden;
  width: 100%; max-width: 1000px; min-height: 440px; padding: 40px;
  background: var(--f-zinc-50);
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, .05) 0 10px 20px -10px,
              rgba(0, 0, 0, .06) 0 2px 8px 0,
              rgba(255, 255, 255, .6) 0 1px 0 0 inset;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}

.rechtstext-cta__schleier {
  position: absolute; left: 0; right: 0; bottom: 0; height: 285px;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .02) 100%);
}
.rechtstext-cta__muster {
  position: absolute; inset: -2px 78px -12px 73px; opacity: .075;
  transform: perspective(1200px) translateZ(80px) rotateX(39deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22%3E%3Cpath fill=%22%23FFF%22 d=%22M0 0h96v96H0z%22/%3E%3Cpath d=%22M24 20a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0 48a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm48 0a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0-48a4 4 0 1 1 0 8 4 4 0 0 1 0-8z%22/%3E%3C/svg%3E");
  background-repeat: repeat; background-position: center; background-size: 41px auto;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.rechtstext-cta__titel {
  position: relative; z-index: 1;
  font-family: var(--s-ueberschrift);
  font-size: 44px; line-height: 1.4; font-weight: 600; letter-spacing: -.04em;
  text-align: center; color: var(--f-schwarz);
}
.rechtstext-cta__text {
  position: relative; z-index: 1; max-width: 600px;
  font-family: var(--s-text);
  font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: .02em;
  text-align: center; color: var(--f-zinc-500);
}
/* Der Knopf ist im Original 50 px hoch. Die 14 px Polster oben/unten stehen
   dort zwar im Stil, werden von der festen Hoehe aber aufgezehrt - deshalb
   hier ohne senkrechtes Polster, sonst wird er 57 px hoch. */
.rechtstext-cta__knopf {
  position: relative; z-index: 1;
  margin-top: 10px;
  height: 50px; padding: 0 20px 0 25px; gap: 5px;
  font-family: var(--s-text); font-size: 16px; font-weight: 600; letter-spacing: .03em;
}
.rechtstext-cta__pfeil { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   11. Rechtstexte - Umbrueche
   ------------------------------------------------------------ */
@media (max-width: 1279.98px) {
  .rechtstext-kopf__innen { padding: 120px 15px; }
  .rechtstext-kopf__titel { font-size: 60px; }
  .rechtstext        { padding: 60px 15px; }
  .rechtstext__block { max-width: 650px; }
  .rechtstext__titel { font-size: 18px; }
  .rechtstext-cta__titel { font-size: 38px; }
}

@media (max-width: 809.98px) {
  .rechtstext-kopf__titel { font-size: 36px; }
  .rechtstext        { padding: 60px 20px; gap: 10px; }
  .rechtstext__block { max-width: 320px; }
  .rechtstext__titel { font-size: 16px; }
  .rechtstext__block p { font-size: 15px; }
  .rechtstext-cta        { padding: 31px 20px; }
  .rechtstext-cta__karte { padding: 32px 20px; }
  .rechtstext-cta__titel { font-size: 28px; }
  .kontakt-seite__innen  { padding: 48px 20px 72px; }
}


/* ---- teile/14-koeln.css ---- */
/* ============================================================
   Standortblock der lokalen Landingpage (/shopware-agentur-koeln).
   Eigene Datei, damit paralleles Arbeiten an den anderen Seiten
   nicht kollidiert. Werte aus den Tokens in basis.css, Kartenmass
   wie .leistung-karte (Rahmen zinc-200, Radius --r-karte).
   ============================================================ */

.koeln-standort {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* --- Visitenkarte mit Anschrift, Telefon, E-Mail --- */
.koeln-visitenkarte {
  background: var(--f-weiss);
  border: 1px solid var(--f-zinc-200);
  border-radius: var(--r-karte);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.leistung-abschnitt--dunkel .koeln-visitenkarte {
  background: var(--f-schwarz-weich);
  border-color: var(--f-zinc-800);
}

.koeln-visitenkarte__marke {
  display: inline-flex;
  align-self: flex-start;
  background: var(--f-signal);
  color: var(--f-signal-text);
  border-radius: 7px;
  padding: 8px 12px;
  font-family: var(--s-text);
  font-size: 14px;
  line-height: 22.4px;
  letter-spacing: .28px;
}

.koeln-visitenkarte__anschrift {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: -.18px;
}
.koeln-visitenkarte__firma {
  font-family: var(--s-ueberschrift);
  font-weight: var(--t-gewicht-ueberschrift);
}

.koeln-visitenkarte__wege { display: flex; flex-direction: column; gap: 12px; }
.koeln-visitenkarte__weg { display: flex; align-items: center; gap: 12px; }
.koeln-visitenkarte__weg svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--f-zinc-500); }
.leistung-abschnitt--dunkel .koeln-visitenkarte__weg svg { color: var(--f-zinc-400); }
.koeln-visitenkarte__weg a,
.koeln-visitenkarte__weg span {
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: .48px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--f-zinc-300);
}
.koeln-visitenkarte__weg a:hover { text-decoration-color: currentColor; }
/* Die Öffnungszeiten sind kein Link - Unterstreichung nur fuer die anklickbaren Zeilen. */
.koeln-visitenkarte__weg span { text-decoration: none; color: var(--f-zinc-500); }
.leistung-abschnitt--dunkel .koeln-visitenkarte__weg span { color: var(--f-zinc-400); }

/* --- Fakten daneben: Anfahrt, Einzugsgebiet, Termine --- */
.koeln-fakten { display: flex; flex-direction: column; }
.koeln-fakt { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; }
.koeln-fakt:first-child { padding-top: 0; }
.koeln-fakt + .koeln-fakt { border-top: 1px solid var(--f-zinc-200); }
.leistung-abschnitt--dunkel .koeln-fakt + .koeln-fakt { border-top-color: var(--f-zinc-800); }
.koeln-fakt__titel { font-size: 20px; line-height: 30px; letter-spacing: -.2px; }
.koeln-fakt__text {
  font-size: 16px;
  line-height: 28.8px;
  letter-spacing: .48px;
  color: var(--f-zinc-500);
}
.leistung-abschnitt--dunkel .koeln-fakt__text { color: var(--f-zinc-400); }
.koeln-fakt__text a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 809.98px) {
  .koeln-standort { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .koeln-visitenkarte { padding: 22px; }
}