/* ki.css — Ergänzungen für die KI-Agentur-Seite.
   Baut auf homepage.css auf (gleiche Variablen, Fonts, Glas-Optik).
   Enthält nur die zusätzlichen Bausteine: Leistungssäulen (4er-Raster),
   Prozess-Schritte, Use-Case-Liste und das Trust-/Argumente-Band. */

/* ── 4er-Raster für die Leistungssäulen ── */
.cards.cards-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards.cards-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cards.cards-4 { grid-template-columns: repeat(4, 1fr); } }

.cards-4 .card-media { aspect-ratio: 16 / 9; }

/* ── Animierte KI-Motive in den Bausteinen ── */
.cm-motif {
  position: absolute; inset: 0;
  z-index: 1;
  color: var(--ca, var(--accent));
  pointer-events: none;
}
.cm-motif .motif { width: 100%; height: 100%; display: block; }
.motif .ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.2; }
.motif .axis { stroke: currentColor; stroke-width: 1; opacity: 0.14; }
.motif .track { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: 0.35; stroke-linecap: round; stroke-linejoin: round; }
.motif .sweep { fill: currentColor; opacity: 0.16; }
.motif .dot { fill: currentColor; opacity: 0.5; }
.motif .node { fill: none; stroke: currentColor; stroke-width: 1.6; }
.motif .nodefill { fill: color-mix(in oklch, currentColor 16%, transparent); stroke: currentColor; stroke-width: 1.4; }
.motif .gear { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; opacity: 0.8; }
.motif .bubble { fill: color-mix(in oklch, currentColor 10%, transparent); stroke: currentColor; stroke-width: 1.4; stroke-opacity: 0.55; }
.motif .bubbleAcc { fill: color-mix(in oklch, currentColor 78%, transparent); }
.motif .aline { fill: color-mix(in oklch, #0a1119 70%, currentColor); }
.motif .tdot { fill: currentColor; }
.motif .target { fill: none; stroke: currentColor; stroke-width: 1.6; }
.motif .sig { fill: #eaf7ff; filter: drop-shadow(0 0 5px currentColor); }
@media (prefers-reduced-motion: reduce) {
  .motif animate, .motif animateTransform, .motif animateMotion { display: none; }
}
.cards-4 .pillar-no {
  position: absolute;
  bottom: 14px; right: 18px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.cards-4 .card-body h3 { font-size: 20px; }
.cards-4 .card-body .desc { font-size: 14px; }
.pillar-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.pillar-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-soft);
}
.pillar-list li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: color-mix(in oklch, var(--ca, var(--accent)) 80%, transparent);
}

/* ── Prozess (4 Schritte) ── */
.proc {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 620px) { .proc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .proc { grid-template-columns: repeat(4, 1fr); } }
.proc-step {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 2.6vw, 30px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--card-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.proc-step:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.proc-step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px -10px var(--accent);
}
.proc-step:nth-child(4) .num { background: linear-gradient(135deg, var(--orange), #ffb066); box-shadow: 0 10px 26px -10px var(--orange); color: #2a1303; }
.proc-step h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.proc-step p { font-size: 14px; line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }
.proc-step .when {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-mute);
  padding-top: 6px;
}
/* Verbindungspfeil zwischen Schritten (nur Desktop) */
@media (min-width: 1020px) {
  .proc-step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px; top: 48px;
    width: 12px; height: 12px;
    border-top: 1.6px solid var(--line-strong);
    border-right: 1.6px solid var(--line-strong);
    transform: rotate(45deg);
    z-index: 2;
  }
}

/* ── Trust-/Argumente-Band ── */
.args {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .args { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .args { grid-template-columns: repeat(4, 1fr); } }
.arg {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: 20px;
  background:
    radial-gradient(320px 180px at 0% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 60%),
    var(--bg-2);
  border: 1px solid var(--line);
}
.arg .ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
  color: var(--accent);
}
.arg.warm .ico { background: var(--orange-soft); border-color: color-mix(in oklch, var(--orange) 42%, transparent); color: var(--orange); }
.arg h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.arg p { font-size: 13.5px; line-height: 1.55; color: var(--fg-soft); text-wrap: pretty; }

/* ── Use-Cases ── */
.uc-grid {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .uc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .uc-grid { grid-template-columns: repeat(3, 1fr); } }
.uc {
  display: flex; gap: 16px;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--card-line);
  transition: transform .25s, border-color .25s;
}
.uc:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.uc .ico {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  color: var(--accent);
}
.uc:nth-child(3n+2) .ico { background: var(--orange-soft); border-color: color-mix(in oklch, var(--orange) 40%, transparent); color: var(--orange); }
.uc .uc-txt { display: flex; flex-direction: column; gap: 6px; }
.uc h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.uc p { font-size: 13.5px; line-height: 1.5; color: var(--fg-soft); text-wrap: pretty; }
.uc .tag {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-mute);
}

/* ── Intro-Lead unter section-head (zentriert, etwas breiter) ── */
.section-head.wide { max-width: 760px; }

/* ── „Aus einer Hand" Verknüpfung zur Startseite ── */
.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--fg-soft);
  transition: color .2s, gap .2s, border-color .2s, background .2s;
}
.backlink:hover { color: var(--accent); gap: 11px; border-color: var(--line-strong); }
.backlink svg { transform: rotate(180deg); color: var(--accent); }

/* ── Hero-USP (Alleinstellungsmerkmal) ── */
.hero-usp {
  margin-top: 20px;
  max-width: 60ch;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: color-mix(in oklch, var(--accent) 9%, transparent);
  border-radius: 0 14px 14px 0;
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}
.hero-usp b { color: var(--accent); }

/* ── Ansprechpartner im Kontakt-Block ── */
.person {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--card-line);
}
.person-photo {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
}
.person-photo image-slot { width: 100%; height: 100%; display: block; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-txt { display: flex; flex-direction: column; gap: 3px; }
.person-txt b { font-size: 16px; font-weight: 700; color: var(--fg); }
.person-txt span { font-size: 13px; color: var(--fg-mute); }


.section-head.wide { max-width: 760px; }
.entry-grid {
  display: grid; gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1fr;
  max-width: 900px; margin: 0 auto;
}
@media (min-width: 760px) { .entry-grid { grid-template-columns: 1fr 1fr; } }
.entry {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 22px;
  background: var(--card); border: 1px solid var(--card-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.entry.featured {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--card-line));
  box-shadow: 0 18px 50px -24px color-mix(in oklch, var(--accent) 90%, transparent);
  background:
    radial-gradient(320px 200px at 0% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 62%),
    var(--card);
}
.entry-badge {
  align-self: flex-start;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-mute);
  background: var(--bg-2); border: 1px solid var(--line);
}
.entry-badge.accent {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
}
.entry h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.entry-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute); }
.entry p { font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); text-wrap: pretty; flex: 1; }
.entry-price { font-size: 14px; color: var(--fg); padding: 8px 0; }
.entry-price b { color: var(--accent); }
.entry .btn { align-self: flex-start; margin-top: 4px; }

/* ── Aus der Praxis ── */
.praxis-grid {
  display: grid; gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .praxis-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .praxis-grid { grid-template-columns: repeat(3, 1fr); } }
.praxis {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 22px;
  background: var(--card); border: 1px solid var(--card-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s;
}
.praxis:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.praxis-ico {
  width: 52px; height: 52px;
  border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
  color: var(--accent);
}
.praxis-ico.warm { background: var(--orange-soft); border-color: color-mix(in oklch, var(--orange) 42%, transparent); color: var(--orange); }
.praxis-ico.green { background: color-mix(in oklch, #1f8a5b 16%, transparent); border-color: color-mix(in oklch, #1f8a5b 46%, transparent); color: #35c88a; }
.praxis-ico.logo { background: #fff; border-color: rgba(0,0,0,.1); padding: 6px; }
.praxis-ico.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.praxis-tag {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-mute);
}
.praxis h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.praxis > p { font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); text-wrap: pretty; }
.praxis-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.praxis-list li {
  position: relative; padding-left: 22px;
  font-size: 13.5px; line-height: 1.45; color: var(--fg-soft);
}
.praxis-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 9px; height: 9px; border-radius: 3px;
  background: color-mix(in oklch, var(--accent) 80%, transparent);
}
.praxis:nth-child(2) .praxis-list li::before { background: color-mix(in oklch, var(--orange) 80%, transparent); }
.praxis:nth-child(3) .praxis-list li::before { background: #35c88a; }

/* ── Pakete & Preise ── */
.price-grid {
  display: grid; gap: clamp(16px, 2vw, 22px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .price-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 22px;
  background: var(--card); border: 1px solid var(--card-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s;
}
.price:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.price.featured {
  border-color: color-mix(in oklch, var(--accent) 55%, var(--card-line));
  box-shadow: 0 20px 54px -26px color-mix(in oklch, var(--accent) 90%, transparent);
  background:
    radial-gradient(340px 220px at 50% 0%, color-mix(in oklch, var(--accent) 13%, transparent), transparent 62%),
    var(--card);
}
.price-flag {
  position: absolute; top: 18px; right: 18px;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.price-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.price-sub { font-size: 13.5px; color: var(--fg-mute); }
.price-tag { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; margin-top: 4px; border-bottom: 1px solid var(--card-line); }
.price-tag b { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.01em; color: var(--fg); }
.price-pre { font-family: var(--font-display); font-size: 0.52em; font-weight: 600; color: var(--fg-mute); margin-right: 8px; letter-spacing: 0; vertical-align: 0.12em; }
.price.featured .price-tag b { color: var(--accent); }
.price-tag span { font-size: 12.5px; color: var(--fg-mute); }
.price-list { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.price-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--fg-soft); }
.price-list li svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.price .btn { margin-top: 6px; justify-content: center; }
.price-note { margin-top: clamp(22px, 2.6vw, 30px); text-align: center; font-size: 14.5px; color: var(--fg-soft); }

/* ── Förderung ── */
.foerder {
  display: flex; align-items: center; gap: clamp(18px, 2.5vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vw, 28px);
  padding: clamp(24px, 3vw, 32px);
  border-radius: 22px;
  border: 1px solid color-mix(in oklch, var(--orange) 40%, var(--line));
  background:
    radial-gradient(420px 220px at 0% 0%, var(--orange-soft), transparent 60%),
    var(--bg-2);
}
.foerder-ico {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 15px; display: grid; place-items: center;
  background: var(--orange-soft);
  border: 1px solid color-mix(in oklch, var(--orange) 42%, transparent);
  color: var(--orange);
}
.foerder-txt { flex: 1; min-width: 260px; }
.foerder-txt h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.foerder-txt p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--fg-soft); text-wrap: pretty; }
.foerder-txt b { color: var(--fg); }
.foerder .btn { flex-shrink: 0; }



/* Neuronales Netz im Hero zurückgenommen — Hintergrundmotiv, kein Blickfang */
.cine .hs { opacity: .3; }
.cine .hs-sig { opacity: .55; }