/* ===== Scale rebrand: Entfernungen (rein CSS, kein JS) =====
   display:none bzw. :has() statt DOM-Manipulation -> bricht NICHT die
   React-Hydration und damit auch nicht die Interaktivitaet (Dropdowns,
   Tabs, Karten-Slider, Zaehler-Animationen). */

/* Hero-Bild + Video-Overlay (Bild liegt im Button) und YouTube "Video abspielen" */
[aria-label^="Video ansehen"],
[aria-label^="Video abspielen"] { display: none !important; }

/* platzreservierende Aspect-Ratio-Video-Boxen komplett kollabieren */
[style*="aspect-ratio"]:has([aria-label^="Video ansehen"]),
[style*="aspect-ratio"]:has([aria-label^="Video abspielen"]),
[style*="aspect-ratio"]:has(img[src*="youtube"]) { display: none !important; }

/* Pill-CTA "Video ansehen" (Button mit Play-Icon) */
button:has(> svg.lucide-play) { display: none !important; }

/* YouTube-Vorschaubilder ausblenden (der "YouTube-Videos"-Tab wird per
   custom.js entfernt und auf "Neueste Artikel" umgeschaltet) */
img[src*="youtube"],
img[srcset*="youtube"] { display: none !important; }

/* "Kostenlos auf YouTube" / "Jede Woche neue KI-Praxis" Sektion (/ueber-uns) */
#youtube { display: none !important; }

/* ===== Footer: nur LinkedIn behalten, restliche Social-Links entfernen ===== */
footer a[href*="youtube.com"],
footer a[href*="instagram.com"],
footer a[href*="//x.com"],
footer a[href*="substack.com"],
footer a[href*="spotify"] { display: none !important; }

/* ===== Realitätscheck: kompakte Problem-Übersicht (per custom.js eingefügt) ===== */
.scale-rc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  max-width: 1120px;
  margin: 0 auto 3.25rem;
  padding: 0 1rem;
}
@media (max-width: 900px) { .scale-rc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .scale-rc-grid { grid-template-columns: 1fr; margin-bottom: 2.25rem; } }
.scale-rc-card {
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 1rem;
  padding: 1.05rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.scale-rc-card p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--foreground, #18181b);
}
.scale-rc-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.scale-rc-tag::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* ===== Logo: "scale" + gruener Punkt =====
   Die ".ai"-Endung wird als drei Dots (".", "a", "i") gerendert -> "a" und "i"
   ausblenden, sodass nur "scale" + gruener Punkt ("scale.") bleibt. */
.logo-dot-2, .logo-dot-3 { display: none !important; }

/* Logo etwas groesser */
a[aria-label$="Startseite"] { font-size: 1.7rem !important; }
/* grue-ner Punkt als deutlich groesserer Kreis (statt kleinem ".") */
a[aria-label$="Startseite"] .logo-dot-1 {
  display: inline-block !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  margin-left: 0.08em !important;
  border-radius: 50% !important;
  background: currentColor !important;
  color: var(--primary) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: baseline !important;
  /* Punkt minimal nach rechts und nach oben */
  transform: translate(0.05rem, -0.3rem) !important;
}

/* ==========================================================================
   Schritt 1: IT-Fundament — neue Leistungssektion (per custom.js eingefügt)
   Übernimmt die Bildsprache der KI-Karten (#moeglichkeiten): 4/5-Kachel,
   dunkler Verlauf, Glas-Panel, Icon-Chip. Statt Fotos ein Grün-Verlauf,
   damit keine zusätzlichen Assets nötig sind.
   ========================================================================== */
.scale-fd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1024px) { .scale-fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .scale-fd-grid { grid-template-columns: 1fr; } }

.scale-fd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}
.scale-fd-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px oklch(0.55 0.15 158 / 0.2); }
.scale-fd-card:nth-child(2) { margin-top: 0; }
@media (min-width: 1024px) { .scale-fd-card:nth-child(2) { margin-top: 4rem; } }

/* Verlaufs-Hintergrund statt Foto */
.scale-fd-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, oklch(0.62 0.13 158 / 0.55), transparent 60%),
    linear-gradient(160deg, oklch(0.34 0.07 158) 0%, oklch(0.24 0.05 158) 55%, oklch(0.17 0.03 158) 100%);
}
.scale-fd-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0 0 0 / 0.10) 0%, oklch(0 0 0 / 0.25) 40%, oklch(0 0 0 / 0.62) 100%);
}
/* feines Raster, damit die Kachel nicht flach wirkt */
.scale-fd-card .scale-fd-mesh {
  position: absolute; inset: 0; opacity: .10; pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000, transparent 78%);
}

.scale-fd-num {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  height: 2.5rem; min-width: 2.5rem; padding: 0 .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
}

.scale-fd-panel {
  position: relative; z-index: 10;
  margin: 1rem;
  display: flex; flex-direction: column;
  min-height: 220px;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 1.25rem 1.25rem .75rem;
  backdrop-filter: blur(16px);
}
@media (min-width: 768px) { .scale-fd-panel { margin: 1.25rem; padding: 1.5rem 1.5rem .75rem; } }

.scale-fd-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.scale-fd-icon {
  display: flex; align-items: center; justify-content: center;
  height: 2rem; width: 2rem; flex-shrink: 0;
  border-radius: .375rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 14px oklch(0.55 0.15 158 / .5), inset 0 0 10px oklch(0.55 0.15 158 / .15);
  color: oklch(0.82 0.115 158);
}
.scale-fd-icon svg { height: 1rem; width: 1rem; filter: drop-shadow(0 0 5px oklch(0.65 0.15 158 / .8)); }
.scale-fd-card h3 {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #fff; margin: 0;
}
@media (min-width: 768px) { .scale-fd-card h3 { font-size: 1.5rem; } }
.scale-fd-sub { margin: .25rem 0 1rem; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.8); }
@media (min-width: 768px) { .scale-fd-sub { font-size: 1rem; } }
.scale-fd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.scale-fd-list li {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .875rem; line-height: 1.4; color: rgba(255,255,255,.9);
}
.scale-fd-list li::before {
  content: ""; margin-top: .4rem; height: .25rem; width: .25rem; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,.7);
}

/* Schritt-Chip über den Sektions-Überschriften */
.scale-step-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .9rem;
  border-radius: 999px;
  border: 1px solid oklch(0.55 0.15 158 / .25);
  background: oklch(0.55 0.15 158 / .10);
  padding: .35rem .85rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary);
}
.scale-step-chip .scale-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.15rem; width: 1.15rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground, #fff);
  font-size: .62rem; letter-spacing: 0;
}

/* Verbindungslinie Schritt 1 -> Schritt 2 */
.scale-step-flow {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin: 3.5rem auto 0; color: var(--muted-foreground, #71717a);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.scale-step-flow::before {
  content: ""; width: 1px; height: 3rem;
  background: linear-gradient(to bottom, transparent, oklch(0.55 0.15 158 / .5));
}

/* ==========================================================================
   Windows-10-Check: Modal (per custom.js eingefügt)
   ========================================================================== */
.scale-wc-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: oklch(0.15 0.02 158 / .55);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.scale-wc-overlay.is-open { opacity: 1; pointer-events: auto; }

.scale-wc-modal {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: min(88vh, 900px); overflow-y: auto;
  border-radius: 1.25rem;
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 30px 70px -20px oklch(0 0 0 / .35);
  padding: 1.75rem;
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}
.scale-wc-overlay.is-open .scale-wc-modal { transform: none; }
@media (max-width: 560px) { .scale-wc-modal { padding: 1.25rem; } }

.scale-wc-close {
  position: absolute; top: .85rem; right: .85rem;
  height: 2rem; width: 2rem; border: 0; cursor: pointer;
  border-radius: 50%;
  background: var(--muted, rgba(0,0,0,.05));
  color: var(--foreground, #18181b);
  font-size: 1.1rem; line-height: 1;
}
.scale-wc-close:hover { background: var(--border, rgba(0,0,0,.1)); }

.scale-wc-modal h3 {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  color: var(--foreground, #18181b); margin: 0 0 .5rem;
  padding-right: 2.5rem;
}
.scale-wc-intro { margin: 0 0 1.25rem; font-size: .92rem; line-height: 1.5; color: var(--muted-foreground, #52525b); }

.scale-wc-label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .4rem; color: var(--foreground, #18181b); }
.scale-wc-input {
  width: 100%; box-sizing: border-box;
  border-radius: .7rem;
  border: 1px solid var(--border, rgba(0,0,0,.14));
  background: var(--background, #fff);
  color: var(--foreground, #18181b);
  padding: .8rem .95rem; font-size: .95rem; font-family: inherit;
}
.scale-wc-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.scale-wc-hint { margin: .5rem 0 0; font-size: .76rem; color: var(--muted-foreground, #71717a); line-height: 1.45; }

.scale-wc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; cursor: pointer; font-family: inherit;
  border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground, #fff);
  padding: .8rem 1.5rem; font-size: .88rem; font-weight: 700;
  box-shadow: 0 10px 22px -8px oklch(0.55 0.15 158 / .6);
  transition: transform .15s ease;
}
.scale-wc-btn:hover { transform: translateY(-1px); }
.scale-wc-btn--wide { width: 100%; margin-top: 1rem; }

/* Ergebnis-Box */
.scale-wc-result { margin-top: 1.25rem; border-radius: .9rem; padding: 1rem 1.1rem; border: 1px solid; }
.scale-wc-result h4 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; }
.scale-wc-result p  { margin: 0; font-size: .875rem; line-height: 1.5; }
.scale-wc-result ul { list-style: disc; margin: .6rem 0 0; padding-left: 1.15rem; font-size: .84rem; line-height: 1.5; }
.scale-wc-result--ok   { border-color: oklch(0.55 0.15 158 / .35); background: oklch(0.55 0.15 158 / .08); color: oklch(0.35 0.09 158); }
.scale-wc-result--bad  { border-color: oklch(0.58 0.17 27 / .35);  background: oklch(0.58 0.17 27 / .07);  color: oklch(0.42 0.14 27); }
.scale-wc-result--warn { border-color: oklch(0.72 0.15 75 / .40);  background: oklch(0.72 0.15 75 / .10);  color: oklch(0.42 0.10 75); }
:root[class~="dark"] .scale-wc-result--ok   { color: oklch(0.85 0.10 158); }
:root[class~="dark"] .scale-wc-result--bad  { color: oklch(0.80 0.12 27); }
:root[class~="dark"] .scale-wc-result--warn { color: oklch(0.85 0.12 75); }

/* Erkanntes aktuelles Gerät */
.scale-wc-device {
  margin-top: 1rem; border-radius: .8rem;
  border: 1px dashed var(--border, rgba(0,0,0,.16));
  padding: .8rem .95rem;
  font-size: .8rem; line-height: 1.5; color: var(--muted-foreground, #52525b);
}
.scale-wc-device b { color: var(--foreground, #18181b); }

/* Kontakt-CTAs — immer sichtbar */
.scale-wc-cta { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border, rgba(0,0,0,.1)); }
.scale-wc-cta > p { margin: 0 0 .8rem; font-size: .85rem; font-weight: 600; color: var(--foreground, #18181b); }
.scale-wc-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 520px) { .scale-wc-actions { grid-template-columns: 1fr; } }
.scale-wc-action {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: .75rem; padding: .75rem .6rem;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  font-size: .82rem; font-weight: 700; text-decoration: none;
  color: var(--foreground, #18181b);
  background: var(--background, #fff);
  transition: border-color .15s ease, transform .15s ease;
}
.scale-wc-action:hover { border-color: var(--primary); transform: translateY(-1px); }
.scale-wc-action svg { height: 1rem; width: 1rem; flex-shrink: 0; }
.scale-wc-action--primary { background: var(--primary); color: var(--primary-foreground, #fff); border-color: transparent; }

/* "Was ist möglich?"-Badge in #moeglichkeiten entfernt (der Schritt-2-Chip
   ersetzt es). Der Text steckt auch in einem JS-Chunk -> falls React die
   Komponente nachrendert, bleibt das Badge per CSS trotzdem verborgen. */
#moeglichkeiten div:has(> svg.lucide-sparkles) { display: none !important; }

/* ==========================================================================
   Landingpage /tools/windows-11-check
   ========================================================================== */
.scale-wc-inline-card {
  max-width: 640px;
  margin: 2.5rem auto 0;
  border-radius: 1.25rem;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: var(--card, #fff);
  box-shadow: 0 20px 45px -25px oklch(0 0 0 / .3);
  padding: 1.75rem;
}
@media (max-width: 560px) { .scale-wc-inline-card { padding: 1.25rem; } }

/* Voraussetzungen */
.scale-req-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 1024px) { .scale-req-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .scale-req-grid { grid-template-columns: 1fr; } }
.scale-req-card {
  border-radius: 1rem;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--card, #fff);
  padding: 1.25rem 1.35rem;
}
.scale-req-card h3 {
  font-family: var(--font-display, inherit);
  font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem;
  color: var(--foreground, #18181b);
}
.scale-req-card h3::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--primary); margin-right: .55rem;
}
.scale-req-card p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--muted-foreground, #52525b); }

/* FAQ */
.scale-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .9rem; }
.scale-faq-item {
  border-radius: 1rem;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  background: var(--card, #fff);
  padding: 1.25rem 1.5rem;
}
.scale-faq-item h3 {
  font-family: var(--font-display, inherit);
  font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem;
  color: var(--foreground, #18181b);
}
.scale-faq-item p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted-foreground, #52525b); }

/* Abschluss-CTA */
.scale-cta-band {
  max-width: 900px; margin: 0 auto; text-align: center;
  border-radius: 1.5rem;
  padding: 2.75rem 2rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 80% 0%, oklch(0.62 0.13 158 / .5), transparent 60%),
    linear-gradient(160deg, oklch(0.34 0.07 158) 0%, oklch(0.22 0.05 158) 100%);
}
@media (max-width: 560px) { .scale-cta-band { padding: 2rem 1.25rem; } }
.scale-cta-band h2 { margin: 0 0 .75rem; }
.scale-cta-band p { margin: 0 auto 1.75rem; max-width: 620px; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.85); }
.scale-cta-band .scale-wc-actions { max-width: 620px; margin: 0 auto; }
.scale-cta-band .scale-wc-action { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.scale-cta-band .scale-wc-action:hover { border-color: #fff; }
.scale-cta-band .scale-wc-action--primary { background: var(--primary); border-color: transparent; }

/* Das Label umschliesst auf der Landingpage das Input-Feld */
.scale-wc-label .scale-wc-input { margin-top: .4rem; font-weight: 400; }

/* ===== Nav-Dropdown "Ressourcen" unter dem Trigger zentrieren =====
   Das Panel hängt am <header> und wird per hartcodiertem ml-[416px] zu weit
   nach rechts geschoben (bestaetigt bei 1280px und 1440px Breite: der Fehler
   ist viewport-unabhaengig, da die Pill-Navigation selbst nicht mitwaechst).
   max-w-md kennzeichnet eindeutig das Ressourcen-Panel (Loesungen nutzt
   max-w-3xl und ist nicht betroffen). */
.nav-dropdown-in.max-w-md { margin-left: 116px !important; }

/* ==========================================================================
   ueber-uns: "Wer wir sind" - neu gestaltete Team-Sektion (ersetzt die
   vorherige "Der Mensch hinter der Technik"-Bildergalerie). Die Fotos werden
   als leicht verschränkter Stapel gezeigt, gedimmt und dezent unscharf, damit
   Personen nur angedeutet erkennbar sind, ohne die Sektion textlastig oder
   zu individuell wirken zu lassen (bewusst kein Team-Grid mit Namen).
   ========================================================================== */
.scale-team-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
}
.scale-team-photo {
  position: absolute;
  width: 62%;
  aspect-ratio: 4 / 5;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -18px oklch(0 0 0 / 0.4);
  border: 1px solid oklch(1 0 0 / 0.08);
}
.scale-team-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.55) contrast(0.94) brightness(0.85) blur(1px);
  transform: scale(1.06);
}
.scale-team-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, oklch(0.55 0.15 158 / 0.32) 0%, oklch(0.1 0.02 158 / 0.55) 100%);
}
.scale-team-photo:nth-child(1) { top: 2%;   left: 0%;  transform: rotate(-10deg); z-index: 1; }
.scale-team-photo:nth-child(2) { top: 0;    left: 34%; transform: rotate(6deg);   z-index: 3; }
.scale-team-photo:nth-child(3) { top: 26%;  left: 20%; transform: rotate(-4deg);  z-index: 4; }
.scale-team-photo:nth-child(4) { top: 30%;  left: 4%;  transform: rotate(11deg);  z-index: 2; }
@media (max-width: 640px) {
  .scale-team-wrap { max-width: 280px; }
}

/* ===== "Hi, wir sind Paul."-Sektion (Persönlich + YouTube-Video) entfernen =====
   Wird auf der Startseite lazy nachgeladen (PersonalIntroSectionLazy). Ein Löschen
   im kompilierten JS-Chunk lässt Turbopacks Modul-Loader abstürzen, deshalb hier
   per CSS ausblenden – gleiche Vorgehensweise wie bei den übrigen Entfernungen. */
#lerne-uns-kennen { display: none !important; }

/* ==========================================================================
   /ki-beratung: Hero ohne Bild
   Die HeroWithImage-Komponente wird von mehreren Seiten geteilt und reserviert
   immer eine rechte Bildspalte (Text bleibt in schmaler linker Spalte).
   Auf dieser Seite wurde das Bild entfernt -> leere Bildcontainer ausblenden
   und die Textspalte über die volle Breite zentrieren.
   ========================================================================== */
/* leere Bild-Container (Desktop-Absolute-Layer + Mobile-Block) entfernen */
#kb-hero > .absolute.inset-0.z-0,
#kb-hero .lg\:hidden.self-stretch { display: none !important; }

/* Textspalte zentrieren statt links in halber Breite */
@media (min-width: 1024px) {
  #kb-hero .pointer-events-auto {
    max-width: 48rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* CTA-Gruppe mittig statt linksbündig */
  #kb-hero .pointer-events-auto > div:last-of-type { align-items: center !important; }
}

/* ===== /ki-beratung: Lösungs-Karten kompakter =====
   Die Karten hatten einen 16:10-Bildbereich und wirkten dadurch sehr hoch.
   Bildbereich flacher + Innenabstand etwas reduziert -> kompaktere Boxen.
   Bewusst per CSS statt via Tailwind-Klasse: beliebige Werte wie aspect-[16/7]
   existieren im bereits kompilierten CSS-Bundle nicht. */
a[href^="/loesungen/"] > .aspect-\[16\/10\] { aspect-ratio: 16 / 7 !important; }