/* ===========================================================================
   Rusantech — Startseite (Umbau 22. Oktober 2026)
   ---------------------------------------------------------------------------
   Ergänzt main.css und marken.css um alles, was die neue Startseite und die
   Demo-Seite brauchen. Gleiche Tokens, gleiche Sprache — nichts hier ersetzt
   eine Regel dort, es kommt nur dazu.

   Aufbau:
     1. Hero mit Live-Demo (Anruf bei der Telefon-KI)
     2. Leistungen als Kacheln, Branchen als Reiter
     3. Kunden
     4. Demos (Teaser auf der Startseite, Seite /demos)
     5. Über mich: Text und Profilkarte
     6. Labs: nur Logos
     7. Baukasten: gesperrt bis zum Check
     8. Kontakt: „Jetzt starten“ und Mehrfachauswahl
     9. Blog: Kopf und Raster auf der Startseite
   =========================================================================== */

/* --- 1. Hero mit Live-Demo ------------------------------------------------ */
.hero--live {
  align-items: center;
  padding-block: calc(var(--nav-h) + 40px) 110px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}

.hero--live h1 {
  max-width: none;
  font-size: clamp(34px, 3.85vw, 56px);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.hero__facts.hero__fade {
  transition-delay: 0.52s;
}

.hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__fact svg {
  color: var(--accent);
}

.hero__fact b {
  font-weight: 600;
  color: var(--text);
}

.hero__fact--slot {
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(95, 220, 160, 0.3);
  border-radius: 999px;
  background: rgba(95, 220, 160, 0.07);
}

@media (max-width: 1020px) {
  .hero--live {
    padding-block: calc(var(--nav-h) + 36px) 96px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* untereinander gestapelt endet der Hero direkt unter der Karte — der
     Scroll-Hinweis würde darauf liegen */
  .hero--live .hero__cue {
    display: none;
  }
}

.btn--lg {
  max-width: 100%;
  padding: 18px 34px;
  font-size: 16px;
}

@media (max-width: 560px) {
  /* Der lange Text darf umbrechen, statt aus der Karte zu laufen */
  .btn--lg {
    padding: 16px 22px;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
  }
}

/* iPhone mit Live-Demo. Grün wie die Marke Voice; Zustände über data-state am
   Wurzelelement (idle → live → done). Alles Bildschirm-Innere ist zur Demo
   gedacht: später kann hier ein echter Assistent sprechen (siehe start.js). */
.phone-wrap {
  --accent: #5fdca0;
  --accent-strong: #23a46e;
  --phone-w: clamp(240px, calc((100svh - 250px) * 0.469), 282px);

  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: 100%;
  margin-inline: auto;
}

.phone-wrap__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(95, 220, 160, 0.34);
  border-radius: 999px;
  background: rgba(95, 220, 160, 0.09);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #c4f6dd;
}

.calldemo__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, #3be08f, #1ea866);
  font-size: 15px;
  font-weight: 700;
  color: #04170f;
}

.phone-wrap::before {
  content: '';
  position: absolute;
  inset: 8% -6% 14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(95, 220, 160, 0.26), transparent 72%);
  filter: blur(28px);
}

.phone {
  position: relative;
  width: var(--phone-w);
  max-width: 86vw;
  aspect-ratio: 9 / 19.2;
  transform: rotate(1.4deg);
  transition: transform 0.6s var(--ease);
}

.phone-wrap:hover .phone,
.phone-wrap:focus-within .phone,
.phone-wrap:not([data-state='idle']) .phone {
  transform: none;
}

/* Rahmen aus gebürstetem Titan, innen schwarzer Rand wie beim echten Gerät */
.phone__frame {
  position: absolute;
  inset: 0;
  padding: 11px;
  border-radius: 58px;
  background: linear-gradient(145deg, #7b8089 0%, #3b3f47 18%, #1a1c21 48%, #4a4e57 78%, #8a8f98 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px rgba(0, 0, 0, 0.7) inset,
    0 50px 100px -34px rgba(0, 0, 0, 0.95), 0 0 90px -34px rgba(95, 220, 160, 0.5);
}

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 47px;
  background: #05080b;
  color: #fff;
  isolation: isolate;
}

.phone__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 46% at 50% 0%, rgba(35, 164, 110, 0.55), transparent 70%),
    radial-gradient(80% 50% at 100% 100%, rgba(30, 90, 120, 0.4), transparent 72%),
    linear-gradient(180deg, #0c1a17 0%, #07100f 55%, #050a0c 100%);
}

.phone__btn {
  position: absolute;
  z-index: 0;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2b2e34, #6c7079 55%, #2b2e34);
}

.phone__btn--silent { top: 15%; left: -3px; height: 4.4%; }
.phone__btn--up { top: 22%; left: -3px; height: 8.2%; }
.phone__btn--down { top: 32%; left: -3px; height: 8.2%; }
.phone__btn--power { top: 26%; right: -3px; height: 13%; }

.phone__island {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  width: 31%;
  height: 24px;
  border-radius: 14px;
  background: #000;
  transform: translateX(-50%);
}

.phone__island::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1d2a44, #05070b 70%);
  transform: translateY(-50%);
}

.phone__status {
  position: absolute;
  top: 12px;
  right: 24px;
  left: 28px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.phone__icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.phone__home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  z-index: 6;
  width: 34%;
  height: 4.5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.78);
  transform: translateX(-50%);
  pointer-events: none;
}

/* --- Eingehender Anruf --- */
.phone__idle {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 58px 20px 40px;
  text-align: center;
}

.phone__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(95, 220, 160, 0.32);
  border-radius: 999px;
  background: rgba(95, 220, 160, 0.1);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #b8f5d6;
}

.phone__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-top: 22px;
}

.phone__initial {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2fd08f, #17855a);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: #04170f;
  box-shadow: 0 14px 34px -12px rgba(35, 164, 110, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.phone__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(95, 220, 160, 0.5);
  border-radius: 50%;
  animation: phoneRing 2.8s ease-out infinite;
}

.phone__ring--2 {
  animation-delay: 1.4s;
}

@keyframes phoneRing {
  0% { transform: scale(0.88); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

.phone__name {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.phone__sub {
  margin-top: 6px;
  max-width: 24ch;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.phone__incoming {
  margin-top: 26px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.phone__answer {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: auto;
}

.phone__accept,
.phone__end {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.phone__accept {
  background: linear-gradient(145deg, #3be08f, #1ea866);
  box-shadow: 0 0 0 0 rgba(59, 224, 143, 0.55), 0 14px 30px -10px rgba(35, 164, 110, 0.9);
  animation: phonePulse 2.2s ease-out infinite;
}

@keyframes phonePulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 224, 143, 0.55), 0 14px 30px -10px rgba(35, 164, 110, 0.9); }
  70%, 100% { box-shadow: 0 0 0 20px rgba(59, 224, 143, 0), 0 14px 30px -10px rgba(35, 164, 110, 0.9); }
}

.phone__accept:hover,
.phone__end:hover {
  transform: scale(1.06);
}

.phone__accept:active,
.phone__end:active {
  transform: scale(0.95);
}

.phone__answer-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Im Gespräch --- */
.phone__live {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 50px 14px 28px;
}

.phone__live[hidden],
.phone__idle[hidden] {
  display: none;
}

.phone__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.phone__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phone__who b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.phone__who small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8ff3c4;
}

.phone__mini {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2fd08f, #17855a);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #04170f;
}

.phone__live .calldemo__wave {
  height: 22px;
  gap: 3px;
}

.phone__live .calldemo__log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px 2px 8px;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.phone__live .calldemo__log::-webkit-scrollbar {
  display: none;
}

.phone__live .calldemo__choices {
  padding-bottom: 6px;
}

.phone__live .calldemo__choice {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.35;
}

.phone__live .calldemo__done {
  gap: 10px;
  padding: 12px;
  margin-bottom: 6px;
}

.phone__live .calldemo__done-title {
  font-size: 13.5px;
}

.phone__live .calldemo__msg {
  max-width: 90%;
  padding: 9px 12px;
  font-size: 13.5px;
}

.phone__dock {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.phone__end {
  width: 56px;
  height: 56px;
  background: linear-gradient(145deg, #ff5a52, #d92f2a);
  box-shadow: 0 12px 26px -10px rgba(217, 47, 42, 0.85);
}

/* Schallwelle: ruht, solange niemand spricht; läuft, wenn Mila antwortet */
.calldemo__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
}

.calldemo__wave i {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: rgba(95, 220, 160, 0.45);
  transition: height 0.3s var(--ease), background 0.3s var(--ease);
}

.phone-wrap.is-speaking .calldemo__wave i {
  background: #8ff3c4;
  animation: callWave 0.9s ease-in-out infinite;
}

.phone-wrap.is-speaking .calldemo__wave i:nth-child(2n) { animation-delay: 0.12s; }
.phone-wrap.is-speaking .calldemo__wave i:nth-child(3n) { animation-delay: 0.27s; }
.phone-wrap.is-speaking .calldemo__wave i:nth-child(5n) { animation-delay: 0.41s; }
.phone-wrap.is-speaking .calldemo__wave i:nth-child(7n) { animation-delay: 0.19s; }

@keyframes callWave {
  0%, 100% { height: 5px; }
  50% { height: 20px; }
}

.calldemo__msg {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  line-height: 1.45;
  animation: callMsg 0.36s var(--ease) both;
}

.calldemo__msg--agent {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.calldemo__msg--caller {
  align-self: flex-end;
  border-color: rgba(95, 220, 160, 0.34);
  border-bottom-right-radius: 5px;
  background: rgba(95, 220, 160, 0.2);
  color: #e6fbf1;
}

.calldemo__msg small {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8ff3c4;
}

.calldemo__typing {
  display: inline-flex;
  gap: 4px;
  padding-block: 4px;
}

.calldemo__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8ff3c4;
  animation: callDot 1s ease-in-out infinite;
}

.calldemo__typing i:nth-child(2) { animation-delay: 0.15s; }
.calldemo__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes callDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes callMsg {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.calldemo__choices {
  display: grid;
  gap: 8px;
}

.calldemo__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(95, 220, 160, 0.3);
  background: rgba(95, 220, 160, 0.08);
  font-weight: 500;
  text-align: left;
  color: #fff;
  cursor: pointer;
  animation: callMsg 0.36s var(--ease) both;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.calldemo__choice:hover,
.calldemo__choice:focus-visible {
  border-color: rgba(95, 220, 160, 0.75);
  background: rgba(95, 220, 160, 0.17);
  transform: translateX(2px);
}

.calldemo__choice svg {
  flex-shrink: 0;
  color: #8ff3c4;
}

.calldemo__choice small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.calldemo__done {
  display: grid;
  border: 1px solid rgba(95, 220, 160, 0.4);
  border-radius: 16px;
  background: rgba(95, 220, 160, 0.1);
  animation: callMsg 0.4s var(--ease) both;
}

.calldemo__done[hidden] {
  display: none;
}

.calldemo__done-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.calldemo__done-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(95, 220, 160, 0.22);
  color: #8ff3c4;
}

.calldemo__confirm {
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #3be08f, #1ea866);
  font-size: 13.5px;
  font-weight: 600;
  color: #04170f;
  cursor: pointer;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}

.calldemo__confirm:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.calldemo__own {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.calldemo__own input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-family: inherit;
  font-size: 16px;
  color: #fff;
}

.calldemo__own input::placeholder {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.calldemo__own input:focus {
  outline: none;
  border-color: rgba(95, 220, 160, 0.7);
  box-shadow: 0 0 0 3px rgba(95, 220, 160, 0.16);
}

.calldemo__own button {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #3be08f, #1ea866);
  color: #04170f;
  cursor: pointer;
}

.calldemo__foot {
  max-width: 330px;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 1020px) {
  .phone-wrap {
    margin-top: 8px;
  }

  .phone {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone,
  .phone__ring,
  .phone__accept {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* --- 2. Leistungen als Kacheln ---------------------------------------------- */
/* Vier Marken, jede mit eigener Farbe, eigenem Logo und eigener Zeichnung.
   Studio ist breiter, weil dort die meisten anfangen, aber nicht höher als der
   Rest. Voice und Labs sind schmal, Systems ein Band. Jede Kachel hat ihren Schein
   an einer anderen Ecke, damit die Reihe nicht wie eine Wiederholung wirkt. */
.marken--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    'studio studio voice'
    'labs systems systems';
  gap: 18px;
}

.marken--bento .marken__card--studio { grid-area: studio; }
.marken--bento .marken__card--voice { grid-area: voice; }
.marken--bento .marken__card--systems { grid-area: systems; }
.marken--bento .marken__card--labs { grid-area: labs; }

.marken--bento .marken__card {
  min-height: 262px;
  border-color: var(--accent-line);
  background: radial-gradient(110% 95% at var(--glow-x, 100%) var(--glow-y, 0%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%),
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 9%, #0d1119), #090c13 80%);
}

.marken--bento .marken__card--studio { --glow-x: 100%; --glow-y: 0%; }
.marken--bento .marken__card--voice { --glow-x: 0%; --glow-y: 100%; }
.marken--bento .marken__card--systems { --glow-x: 0%; --glow-y: 0%; }
.marken--bento .marken__card--labs { --glow-x: 100%; --glow-y: 100%; }

.marken--bento .marken__card::before {
  display: none;
}

.marken--bento .marken__card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 34px 70px -44px var(--accent-glow);
}

.marken--bento .marken__card h3 {
  margin-top: 20px;
}

.marken--bento .marken__card--feature {
  padding: clamp(24px, 2.6vw, 32px);
}

.marken--bento .marken__card--feature h3 {
  font-size: clamp(23px, 2.1vw, 28px);
  line-height: 1.15;
}

.marken--bento .marken__card--feature > p {
  max-width: 40ch;
}

.marken__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  padding: 5px 11px 4px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.marken__points {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
}

.marken__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
}

.marken__points li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a7a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* Zeichnungen: je Kachel eine eigene, nur als Zierde */
.marken__nfc,
.marken__art {
  position: absolute;
  height: auto;
  color: var(--accent);
  pointer-events: none;
}

.marken__nfc {
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(52px, 5vw, 66px);
  width: min(230px, 38%);
  filter: drop-shadow(0 18px 30px rgba(226, 96, 63, 0.3));
  transform: rotate(-4deg);
  transition: transform 0.5s var(--ease);
}

.marken__card--feature:hover .marken__nfc {
  transform: rotate(-1deg) translateY(-4px);
}

.marken__art {
  right: 18px;
  bottom: 18px;
  width: 128px;
  opacity: 0.9;
}

.marken__art--wave rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: artWave 1.8s ease-in-out infinite;
}

.marken__art--wave rect:nth-child(3n) { animation-delay: 0.25s; }
.marken__art--wave rect:nth-child(3n + 1) { animation-delay: 0.55s; }
.marken__art--wave rect:nth-child(4n) { animation-delay: 0.9s; }

@keyframes artWave {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.marken--bento .marken__card--feature .m-card__link {
  padding-top: 22px;
}

.marken--bento .marken__card--broad .marken__art {
  width: clamp(150px, 20vw, 220px);
}

.marken__apps {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
}

.marken__apps img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.35s var(--ease);
}

.marken__card--labs:hover .marken__apps img:nth-child(1) { transform: translateY(-3px) rotate(-3deg); }
.marken__card--labs:hover .marken__apps img:nth-child(2) { transform: translateY(-5px); }
.marken__card--labs:hover .marken__apps img:nth-child(3) { transform: translateY(-3px) rotate(3deg); }

.offer__foot {
  margin-top: 34px;
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
}

.offer__foot a {
  color: var(--accent, #8fb0ff);
  font-weight: 500;
}

@media (max-width: 1000px) {
  .marken--bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'studio studio'
      'voice labs'
      'systems systems';
  }

  .marken__nfc {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(240px, 60%);
    margin: 18px 0 0 auto;
  }
}

@media (max-width: 620px) {
  .marken--bento {
    grid-template-columns: 1fr;
    grid-template-areas: 'studio' 'voice' 'labs' 'systems';
  }

  .marken__badge {
    position: static;
    order: -1;
    align-self: flex-start;
    margin-bottom: 16px;
  }

  .marken__art {
    width: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marken__art--wave rect {
    animation: none;
  }
}

/* --- 2b. Branchen: Reiter mit Foto und Einsatzfällen ---------------------- */
.usecases {
  display: grid;
  gap: 22px;
}

.usecases__tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.usecases__tabs::-webkit-scrollbar {
  display: none;
}

.usecases__tab {
  flex: 1 0 auto;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.usecases__tab:hover {
  color: var(--text);
}

.usecases__tab[aria-selected='true'] {
  background: linear-gradient(145deg, rgba(143, 176, 255, 0.28), rgba(86, 194, 240, 0.2));
  box-shadow: inset 0 0 0 1px rgba(143, 176, 255, 0.5);
  color: #fff;
}

.usecases__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  animation: ucIn 0.5s var(--ease) both;
}

.usecases__panel[hidden] {
  display: none;
}

@keyframes ucIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.usecases__photo {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.usecases__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.usecases__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(5, 8, 14, 0.88)),
    linear-gradient(120deg, rgba(86, 194, 240, 0.12), transparent 50%);
  pointer-events: none;
}

.usecases__photo figcaption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}

.usecases__list {
  display: grid;
  align-content: center;
  gap: 12px;
}

.usecase {
  position: relative;
  padding: 18px 20px 18px 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 16px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.usecase::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

.usecase:hover {
  border-color: var(--accent-line);
  transform: translateX(3px);
}

.usecase__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.usecase h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.usecase p:not(.usecase__tag) {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.usecases__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.usecases__more svg {
  transition: transform 0.25s var(--ease);
}

.usecases__more:hover svg {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  /* Vier Reiter in zwei Reihen statt einer Leiste, die man erst suchen muss */
  .usecases__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    border-radius: 22px;
  }

  .usecases__tab {
    padding: 10px 8px;
    font-size: 13.5px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .usecases__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .usecases__photo {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usecases__panel {
    animation: none;
  }
}

/* --- 3. Kunden ------------------------------------------------------------ */
.clients-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px clamp(28px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(34px, 5vw, 52px);
}

.clients-head__num {
  font-family: var(--font-display);
  font-size: clamp(84px, 13vw, 168px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.86;
  background: linear-gradient(170deg, #ffffff 10%, var(--accent) 60%, var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.clients-head h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.4vw, 40px);
}

.clients-head p:not(.eyebrow):not(.clients-head__num) {
  margin-top: 14px;
  max-width: 560px;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .clients-head {
    grid-template-columns: 1fr;
  }
}

.clients {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .clients {
    grid-template-columns: 1fr;
  }
}

.client {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.client:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -34px rgba(0, 0, 0, 0.9);
}

.client__visual {
  display: grid;
  place-items: center;
  height: 140px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.client__visual--paper {
  background: #f4f3ef;
}

.client__visual--brand {
  background: radial-gradient(90% 120% at 50% 0%, var(--brand-soft, var(--accent-soft)), transparent 70%), #0a0c12;
}

.client__visual--mark {
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%), #0a0c12;
}

.client__logo {
  width: auto;
  max-width: 82%;
  max-height: 64px;
  object-fit: contain;
}

.client__visual--paper .client__logo {
  max-height: 76px;
}

.client__visual--aqon {
  background: radial-gradient(90% 120% at 50% 0%, rgba(0, 169, 183, 0.16), transparent 70%), #081521;
}

.client__aqon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.client__aqon svg {
  flex: none;
  width: auto;
  height: 50px;
}

.client__aqon-text {
  display: grid;
  gap: 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.client__aqon-text b {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
}

.client__aqon-text em {
  font-style: normal;
  color: #00a9b7;
}

.client__aqon-text small {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.62);
}

.client__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 22px;
}

.client__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.client__label .dot-live {
  background: var(--status, #3ddc84);
}

.client--n10 .client__label {
  color: var(--text-muted);
}

.client__body h3 {
  margin: 12px 0 8px;
  font-size: 18.5px;
}

.client__body p:not(.client__label) {
  font-size: 14px;
  color: var(--text-secondary);
}

.client__body .tag-row {
  margin-top: auto;
  padding-top: 16px;
}

.client__body .case__site {
  margin-top: 14px;
}

/* --- 4. Demos ------------------------------------------------------------- */
.demos--vier {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .demos--vier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .demos--vier {
    grid-template-columns: 1fr;
  }
}

.demos__all {
  margin-top: 28px;
  text-align: center;
}

/* Seite /demos: Sprungleiste und ein Block je Marke */
.demo-jump {
  position: sticky;
  top: calc(var(--nav-h) + 6px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 28px 0 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(10, 13, 20, 0.78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.demo-jump a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.demo-jump a:hover,
.demo-jump a:focus-visible,
.demo-jump a.is-active {
  background: var(--accent-soft);
  color: var(--text);
}

.demo-jump a img {
  width: 20px;
  height: auto;
}

.demo-jump a span {
  color: var(--accent);
}

.demo-block {
  padding-top: clamp(56px, 8vw, 96px);
  scroll-margin-top: calc(var(--nav-h) + 70px);
}

.demo-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.demo-block__head h2 {
  margin-top: 14px;
  font-size: clamp(28px, 3.6vw, 42px);
}

.demo-block__head p {
  max-width: 600px;
  margin-top: 12px;
  color: var(--text-secondary);
}

.demo-block__brand .brand__word {
  font-size: 17px;
}

.demo-apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 860px) {
  .demo-apps {
    grid-template-columns: 1fr;
  }
}

.demo-app {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.demo-app:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
}

.demo-app img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}

.demo-app h3 {
  font-size: 21px;
}

.demo-app p {
  font-size: 14.5px;
  color: var(--text-secondary);
}

.demo-app a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.demo-app__go {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
}

.demo-block--blog-note {
  padding-top: clamp(40px, 5vw, 64px);
}

.demo-note {
  padding: 20px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 14.5px;
  color: var(--text-secondary);
}

.demo-note a {
  color: var(--accent);
  text-decoration: none;
}

/* --- 5. Über mich --------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(36px, 6vw, 92px);
  align-items: center;
}

@media (max-width: 960px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile {
    max-width: 480px;
  }
}

.about__text h2 {
  margin-top: 16px;
  font-size: clamp(30px, 4vw, 48px);
}

.about__text p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 18px;
  color: var(--text-secondary);
}

.about__text .about__lead {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
}

.about__lead b {
  font-weight: 500;
  color: var(--text);
}

.about__points {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  list-style: none;
  font-size: 15px;
  color: var(--text);
}

.about__points li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.about__points span {
  font-size: 12px;
  color: var(--accent);
}

.profile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)), #0b0e16;
  box-shadow: 0 40px 90px -44px rgba(0, 0, 0, 0.95), 0 0 90px -50px var(--accent-glow);
}

.profile__photo {
  position: relative;
  aspect-ratio: 4 / 4.3;
  overflow: hidden;
  background: #6f7f90;
}

.profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

/* Verlauf unten, damit Name und Rolle auf dem Foto lesbar bleiben */
.profile__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(11, 14, 22, 0.78) 86%, #0b0e16 100%);
  pointer-events: none;
}

.profile__body {
  position: relative;
  z-index: 1;
  margin-top: -74px;
  padding: 0 clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px);
}

.profile__name {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.profile__role {
  margin-top: 4px;
  font-size: 14px;
  color: var(--accent);
}

.profile__contact {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  list-style: none;
  font-size: 14px;
}

.profile__contact a,
.profile__contact span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.profile__contact svg {
  flex-shrink: 0;
  color: var(--accent);
}

.profile__contact a:hover,
.profile__contact a:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.profile__label {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile .tag-row {
  margin-top: 10px;
}

.profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.profile__stats div + div {
  border-left: 1px solid var(--border);
}

.profile__stats dt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.profile__stats dd {
  margin-top: 2px;
  padding-inline: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* Einsatzgebiet: Text links, schematische Karte rechts */
.area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: radial-gradient(110% 90% at 100% 50%, rgba(86, 194, 240, 0.08), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  box-shadow: var(--shadow-lift);
}

.area__body h3 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.area__body > p {
  margin-top: 14px;
  max-width: 48ch;
  color: var(--text-secondary);
}

.area__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  list-style: none;
}

.area__chips li {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: var(--text);
}

.area__chips .area__chip--remote {
  border-color: rgba(95, 220, 160, 0.4);
  background: rgba(95, 220, 160, 0.09);
  color: #b8f5d6;
}

.area__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.area__link svg {
  transition: transform 0.25s var(--ease);
}

.area__link:hover svg {
  transform: translateX(4px);
}

.area__visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #070b12;
}

.area__map {
  display: block;
  width: 100%;
  height: auto;
}

.area__map-main {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.area__map-city {
  fill: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 12.5px;
}

.area__legend {
  position: absolute;
  right: 12px;
  bottom: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .area {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 6. Labs: nur Logos ---------------------------------------------------- */
.teaser--logos {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.labs-logos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  list-style: none;
}

.labs-logos::before {
  content: '';
  position: absolute;
  inset: -12% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 143, 211, 0.2), transparent 72%);
  filter: blur(22px);
}

.labs-logo {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(16px, 2vw, 24px) 10px 16px;
  border: 1px solid rgba(236, 143, 211, 0.18);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  color: var(--text);
  text-decoration: none;
  transition: transform 0.35s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.labs-logo img {
  width: 100%;
  max-width: 112px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 25%;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.labs-logo span {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.labs-logo:hover,
.labs-logo:focus-visible {
  border-color: rgba(236, 143, 211, 0.6);
  box-shadow: 0 30px 60px -34px rgba(236, 143, 211, 0.6);
  transform: translateY(-6px);
}

.labs-logos li:nth-child(2) .labs-logo {
  margin-top: 22px;
}

@media (max-width: 860px) {
  .teaser--logos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .labs-logo span {
    font-size: 13.5px;
  }
}


/* --- 6b. Fidant: Branchensoftware in Planung ---------------------------------- */
.fidant {
  --accent: #8fb0ff;
  --accent-soft: rgba(143, 176, 255, 0.12);
  --accent-line: rgba(143, 176, 255, 0.32);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: radial-gradient(90% 120% at 100% 50%, rgba(143, 176, 255, 0.13), transparent 62%),
    linear-gradient(160deg, rgba(143, 176, 255, 0.07), rgba(255, 255, 255, 0.012));
  box-shadow: 0 30px 80px -50px rgba(143, 176, 255, 0.5);
}

.fidant__body h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
}

.fidant__body > p {
  margin-top: 16px;
  max-width: 54ch;
  color: var(--text-secondary);
}

.fidant__packs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  list-style: none;
}

.fidant__packs li {
  padding: 6px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 13px;
  color: var(--text);
}

.fidant .fidant__state {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.fidant__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: #8fb0ff;
  box-shadow: 0 0 12px #8fb0ff;
}

.fidant__body .btn {
  margin-top: 24px;
}

.fidant__visual {
  color: #8fb0ff;
}

.fidant__core {
  display: block;
  width: 100%;
  height: auto;
}

.fidant__core text {
  fill: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 12.5px;
}

.fidant__core .fidant__core-label {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .fidant {
    grid-template-columns: minmax(0, 1fr);
  }

  .fidant__visual {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* --- 7. Baukasten: gesperrt bis zum Check --------------------------------- */
.builder-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.builder-lock svg {
  flex-shrink: 0;
  color: var(--accent);
}

.check__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.builder.is-collapsed {
  display: none;
}

/* --- 8. Kontakt: Jetzt starten und Mehrfachauswahl ----------------------- */
.start {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  max-width: 880px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 56px);
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 30px;
  background: radial-gradient(90% 120% at 50% 0%, var(--accent-soft), transparent 64%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #0a0d14;
  box-shadow: 0 40px 100px -50px var(--accent-glow);
  text-align: center;
}

.start::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  pointer-events: none;
}

.start__glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 520px;
  height: 260px;
  translate: -50% 0;
  background: radial-gradient(closest-side, var(--accent-glow), transparent);
  opacity: 0.55;
  filter: blur(30px);
  pointer-events: none;
}

.start > *:not(.start__glow) {
  position: relative;
}

.start h2 {
  margin-top: 16px;
  font-size: clamp(30px, 4.6vw, 54px);
}

.start__lead {
  max-width: 600px;
  margin-top: 18px;
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  color: var(--text-secondary);
}

.start__actions {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: 32px;
}

.start__slot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text-secondary);
}

.start__slot b {
  font-weight: 600;
  color: var(--text);
}

.start__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-top: 28px;
  list-style: none;
  font-size: 13.5px;
  color: var(--text-muted);
}

.start__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.start__facts svg {
  color: var(--accent);
}

/* Mehrfachauswahl: ein Feld, das aufklappt, mit Chips statt Liste */
.field--multi {
  position: relative;
}

.multi {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.multi:hover {
  border-color: var(--border-strong);
}

.multi[open] {
  border-color: var(--accent);
  background: rgba(86, 194, 240, 0.045);
  box-shadow: 0 0 0 3px rgba(86, 194, 240, 0.12);
}

.multi__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 14px;
  padding: 11px 16px 12px;
  list-style: none;
  cursor: pointer;
}

.multi__summary::-webkit-details-marker {
  display: none;
}

.multi__summary:focus-visible {
  outline-offset: 2px;
}

.multi__label {
  grid-column: 1;
  font-size: 11.5px;
  color: var(--text-muted);
}

.multi[open] .multi__label {
  color: var(--accent);
}

.multi__value {
  grid-column: 1;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.multi__value.is-empty {
  color: var(--text-secondary);
}

.multi__chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--text-secondary);
  transition: rotate 0.25s var(--ease);
}

.multi[open] .multi__chev {
  rotate: 180deg;
}

.multi__panel {
  max-height: 300px;
  padding: 2px 16px 16px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.multi__group-title {
  margin: 16px 0 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.multi__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* `.field label` (main.css) macht jede Beschriftung zum schwebenden Feldnamen —
   die Chips sind Beschriftungen, aber echte Bedienelemente und bleiben im Fluss. */
.field--multi .multi__opt {
  position: relative;
  top: auto;
  left: auto;
  font-size: inherit;
  color: inherit;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
}

.multi__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.multi__opt span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  color: var(--text-secondary);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.multi__opt:hover span {
  border-color: var(--border-strong);
  color: var(--text);
}

.multi__opt input:checked + span {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.multi__opt input:checked + span::before {
  content: '';
  width: 11px;
  height: 6px;
  margin-top: -2px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  rotate: -45deg;
}

.multi__opt input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- 9. Blog: Kopf und Raster auf der Startseite -------------------------- */
.blog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.blog-head__text {
  margin-bottom: 0;
}

.posts--home {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .posts--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .posts--home {
    grid-template-columns: 1fr;
  }
}

.posts__all {
  margin-top: 32px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .phone-wrap.is-speaking .calldemo__wave i,
  .calldemo__typing i {
    animation: none;
  }
}

/* --- Kontakt: WhatsApp hervorgehoben ------------------------------------------ */
.reach__card--wa {
  grid-column: 1 / -1;
  padding: 15px 17px;
  border-color: rgba(37, 211, 102, 0.5);
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 211, 102, 0.2), transparent 60%),
    linear-gradient(160deg, rgba(37, 211, 102, 0.1), rgba(255, 255, 255, 0.02));
  box-shadow: 0 18px 44px -30px rgba(37, 211, 102, 0.7);
}

.reach__card--wa:hover {
  border-color: #25d366;
  background: radial-gradient(120% 140% at 0% 0%, rgba(37, 211, 102, 0.3), transparent 60%),
    linear-gradient(160deg, rgba(37, 211, 102, 0.14), rgba(255, 255, 255, 0.02));
}

.reach__card--wa .reach__icon {
  width: 40px;
  height: 40px;
  background: #25d366;
  color: #04210f;
}

.reach__card--wa:hover .reach__icon {
  background: #3be67f;
}

.reach__card--wa .reach__label {
  color: #8fe8b3;
}

.reach__card--wa .reach__value {
  font-size: 16px;
}


/* --- WhatsApp unter „Jetzt starten“ (empfohlen, mit Marke über dem Rahmen) ----- */
.start__wa {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: center;
  max-width: 720px;
  margin-top: 36px;
  padding: 22px 24px;
  border: 1px solid rgba(37, 211, 102, 0.6);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.04) 70%), var(--surface);
  box-shadow: 0 24px 60px -36px rgba(37, 211, 102, 0.8);
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.start__wa:hover,
.start__wa:focus-visible {
  transform: translateY(-2px);
  border-color: #25d366;
  box-shadow: 0 28px 64px -32px rgba(37, 211, 102, 1);
}

.start__wa-flag {
  position: absolute;
  top: -14px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.9);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #04210f;
}

.start__wa-flag i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #04210f;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  color: #25d366;
}

.start__wa-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(37, 211, 102, 0.18);
  color: #4fe383;
}

.start__wa-body {
  display: grid;
  gap: 3px;
}

.start__wa-body b {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.start__wa-body span {
  font-size: 14.5px;
  color: var(--text-secondary);
}

.start__wa-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #25d366;
  font-size: 14px;
  font-weight: 600;
  color: #04210f;
}

@media (max-width: 720px) {
  .start__wa {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 24px 18px 18px;
  }

  .start__wa-go {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 10px;
  }
}

/* Hinweis unter „Nachricht senden“ */
.form__prices {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.form__prices b {
  color: var(--text-secondary);
  font-weight: 600;
}


/* --- Kennzahl mit Namen der Kunden, Ablauf neben dem Formular --------------------- */
.stats__sub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.next-steps {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  list-style: none;
}

.next-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.next-steps li > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.next-steps b {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
}

.next-steps p {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}