/* ============================================================
   RufKi Flagship — pages.css
   Seitenspezifische Ergänzungen für die Unterseiten.
   Lädt NACH app.css. Erbt alle Tokens, Nav, Footer, Buttons.
   "Living Blueprint" · EIN Akzent: Teal · kein Glow, kein Lenis.
   ============================================================ */

:root {
  --fs-phero: clamp(2.6rem, 1.2rem + 6vw, 6.4rem);
  --fs-case: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem);
}

/* ============================================================ PAGE-HERO (gemeinsame Basis) */
.phero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
  background: transparent;
  overflow: hidden;
}
.phero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.phero__eyebrow {
  margin-bottom: var(--space-m);
}
.phero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-phero);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--text);
  max-width: 16ch;
}
.phero--center .phero__title {
  margin-inline: auto;
  max-width: 18ch;
}
.phero__title .accent {
  color: var(--violet-bright);
}
.phero__title em {
  font-style: normal;
  color: var(--violet-bright);
}
.phero__lead {
  margin: var(--space-m) 0 var(--space-l);
}
.phero--center .phero__lead {
  margin-inline: auto;
}
.phero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.phero--center .phero__cta {
  justify-content: center;
}
.phero--center {
  text-align: center;
}

/* Signal-Unterstreichung (zeichnet sich, CSS-only, kein Plugin nötig) */
.uline {
  width: clamp(160px, 24vw, 300px);
  height: 14px;
  margin-top: var(--space-m);
  overflow: visible;
}
.phero--center .uline {
  margin-inline: auto;
}
.uline__path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.uline__node {
  fill: var(--violet);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .uline__path {
    animation: ulineDraw 1.1s 0.45s var(--ease-draw) forwards;
  }
  .uline__node {
    animation: ulineNode 0.3s 1.45s var(--ease-micro) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uline__path {
    stroke-dashoffset: 0;
  }
  .uline__node {
    opacity: 1;
  }
}
@keyframes ulineDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ulineNode {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hero-Reveal (Eyebrow/Lead/CTA) — H1 bleibt statisch (LCP) */
@media (prefers-reduced-motion: no-preference) {
  .phero__eyebrow {
    animation: heroRise 0.7s 0.05s var(--ease-entrance) both;
  }
  .phero__lead {
    animation: heroRise 0.7s 0.22s var(--ease-entrance) both;
  }
  .phero__cta {
    animation: heroRise 0.7s 0.34s var(--ease-entrance) both;
  }
}

@media (max-width: 880px) {

  .phero__title {
    max-width: 18ch;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .phero {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
}

.bld__device {
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  padding: 8px;
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 36px 80px -38px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
}
.bld__bar {
  display: flex;
  gap: 5px;
  padding: 0.2rem 0.5rem 0.55rem;
}
.bld__bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}
.bld__view {
  position: relative;
  border-radius: var(--r-inner);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 11;
  background: var(--surface);
}
.bld__cap {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.bld__phase {
  color: var(--violet-soft);
}
@keyframes bldCycle {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ============================================================ LEISTUNGEN · WAS DRIN IST (webdesign) */
.incl {
  background: transparent;
}
.incl__head {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}
.incl__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.incl__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.incl__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-xl);
  row-gap: 0;
}
.incl__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.incl__i {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.74rem;
  color: var(--violet-soft);
  letter-spacing: 0.06em;
  padding-top: 0.35rem;
}
.incl__t {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}
.incl__d {
  display: block;
  color: var(--muted);
  font-size: 0.96rem;
  margin-top: 0.3rem;
  max-width: 38ch;
}
@media (max-width: 760px) {
  .incl__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ KÖNNEN-GRID (webdesign) */
.caps {
  background: transparent;
}
.caps__head {
  max-width: 60ch;
  margin-bottom: var(--space-l);
}
.caps__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.caps__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}
.cap {
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  background: rgb(var(--rgb-erhoben) / 0.4);
  transition:
    border-color var(--d-ui) var(--ease-entrance),
    transform var(--d-ui) var(--ease-entrance);
}
@media (hover: hover) {
  .cap:hover {
    border-color: rgba(138, 41, 226, 0.5);
    transform: translateY(-3px);
  }
}
.cap__ic {
  width: 42px;
  height: 42px;
  border-radius: var(--r-inner);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  background: rgba(138, 41, 226, 0.14);
  margin-bottom: var(--space-s);
}
.cap__ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cap h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  margin-bottom: 0.35rem;
}
.cap p {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 36ch;
}
.cap__tag {
  display: inline-block;
  margin-top: var(--space-s);
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-soft);
  border: 1px solid rgba(138, 41, 226, 0.4);
  border-radius: var(--r-chip);
  padding: 0.25rem 0.55rem;
}
@media (max-width: 880px) {
  .caps__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .caps__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BASIC/PREMIUM-VERGLEICH (webdesign) */
.cmp {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.cmp__head {
  max-width: 60ch;
  margin-bottom: var(--space-l);
}
.cmp__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.cmp__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.cmp__scroll {
  overflow-x: auto;
}
.cmp table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.cmp th,
.cmp td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cmp thead th {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}
.cmp thead th.cmp__prem {
  color: var(--violet-soft);
}
.cmp td:first-child {
  color: var(--text);
  font-weight: 600;
  width: 34%;
}
.cmp td:first-child small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.cmp td {
  color: var(--muted);
  font-size: 0.95rem;
}
.cmp col.cmp__premcol,
.cmp td.cmp__prem {
  background: rgba(138, 41, 226, 0.07);
}
.cmp td.cmp__prem {
  color: var(--text);
}
.cmp .yes {
  color: var(--violet-soft);
  font-weight: 700;
  margin-right: 0.45rem;
}
.cmp .no {
  color: var(--faint);
  margin-right: 0.45rem;
}
.cmp__note {
  margin-top: var(--space-m);
  color: var(--faint);
}

/* ============================================================ VERBINDUNGS-ICONS (webdesign) */
.conn {
  background: transparent;
}
.conn__head {
  max-width: 62ch;
  margin-bottom: var(--space-l);
}
.conn__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.conn__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.conn__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
}
.conn__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
}
.conn__ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  flex: none;
  background: rgba(138, 41, 226, 0.08);
}
.conn__ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.conn__item b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  display: block;
}
.conn__item span {
  color: var(--muted);
  font-size: 0.88rem;
  display: block;
  margin-top: 0.15rem;
  max-width: 24ch;
}
@media (max-width: 1080px) {
  .conn__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .conn__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BAU-PROZESS · STICKY (webdesign) */
.process {
  background: transparent;
}
.process__sticky {
  padding-block: var(--space-2xl);
}
.process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
}
.process__copy h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-l);
}
.psteps {
  display: flex;
  flex-direction: column;
}
.pstep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
  transition: opacity var(--d-ui) var(--ease-entrance);
}
.pstep:last-child {
  border-bottom: 1px solid var(--line);
}
.pstep__i {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.78rem;
  color: var(--violet-soft);
  letter-spacing: 0.08em;
}
.pstep__t {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
}
.pstep__d {
  display: block;
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: 0.2rem;
  max-width: 42ch;
}
.process__stage {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.pstage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pstage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.pstage--last {
  opacity: 1;
}
@media (max-width: 880px) {
  .process__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* Sticky nur mit JS + ohne reduce. Ohne JS = finaler Render statisch.
   NUR ab 881px (2-spaltiges Grid) - darunter stapelt .process__grid auf 1
   Spalte (siehe @media max-width:880px), dann sprengt Schritte+Mockup
   gestapelt die 100svh-Pin-Box (gleicher Bug wie .method, siehe app.css). */
@media (min-width: 881px) {
  .js:not(.reduce) .process {
    min-height: 480vh;
  }
  .js:not(.reduce) .process__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
}
.js:not(.reduce) .pstage {
  transition: opacity 0.45s var(--ease-entrance);
}
.js:not(.reduce) .pstage--last {
  opacity: 0;
}
.js:not(.reduce) .pstage.is-on {
  opacity: 1;
}
.js:not(.reduce) .pstep {
  opacity: 0.75; /* AA: gedimmt, aber ≥4,5:1 */
}
.js:not(.reduce) .pstep.is-on {
  opacity: 1;
}

/* ============================================================ AUDIENCE · FÜR WEN (webdesign) */
.audience {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.audience__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
  margin-bottom: var(--space-l);
  max-width: 18ch;
}
.audience__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.atag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--night);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}
.atag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  flex: none;
}
.audience__note {
  margin-top: var(--space-l);
  color: var(--muted);
  max-width: 52ch;
}

/* ============================================================ WERK · CASE-MIKROSTORYS */
.werk-intro {
  background: transparent;
}
.cases {
  background: transparent;
  padding-bottom: var(--space-2xl);
}
.case {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}
.case:first-child {
  border-top: 0;
}
.case--rev .case__media {
  order: -1;
}
.case__num {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.case__num b {
  color: var(--violet-soft);
  font-weight: 500;
}
.case__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-case);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: var(--space-s) 0 var(--space-m);
}
.cstory {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-m);
}
.cstory__step {
  padding: 0.85rem 0 0.85rem var(--space-m);
  border-left: 1px solid var(--line);
  position: relative;
}
.cstory__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 1.25rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--night);
  border: 2px solid var(--violet-deep);
}
.cstory__step:last-child::before {
  border-color: var(--violet-soft);
  background: var(--violet);
}
.cstory__k {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.cstory__step p {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 44ch;
}
.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: var(--space-m);
}
.case__tags span {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
}
.case__soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.case__soon .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
}
@media (prefers-reduced-motion: no-preference) {
  .case__soon .dot {
    animation: soonPulse 2.2s var(--ease-entrance) infinite;
  }
}
@keyframes soonPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}
.case__media {
  position: relative;
}
.cframe {
  position: relative;
  padding: 8px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 34px 76px -38px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
}
.cframe__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.5rem 0.6rem;
}
.cframe__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  display: inline-block;
}
.cframe__url {
  margin-left: 0.4rem;
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.7rem;
  color: var(--faint);
}
.cframe__shot {
  position: relative;
  border-radius: var(--r-inner);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.cframe__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.case__corner {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-strong);
  opacity: 0.7;
}
.case__corner--tl {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.case__corner--br {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}
@media (max-width: 880px) {
  .case {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .case--rev .case__media {
    order: 0;
  }
}

/* Case-Media: Masken-Reveal mit JS (clip-path). Ohne JS sichtbar. */
.js:not(.reduce) .case__media {
  clip-path: inset(0 0 100% 0);
}

/* ============================================================ PREISE · PLANS */
.plans {
  background: transparent;
}
.plans__axiswrap {
  margin-bottom: var(--space-l);
}
.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  align-items: stretch;
  max-width: 1180px;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 7px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 26px 60px -34px rgb(var(--rgb-schatten) / calc(0.85 * var(--f-schatten)));
}
.plan__core {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    rgb(var(--rgb-flaeche) / 0.6),
    rgb(var(--rgb-nacht) / 0.4)
  );
}
.plan--featured {
  border-color: var(--violet-deep);
}
.plan--featured .plan__core {
  border-color: rgba(138, 41, 226, 0.45);
  background: linear-gradient(
    180deg,
    rgba(138, 41, 226, 0.09),
    rgb(var(--rgb-nacht) / 0.3)
  );
}
.plan--featured {
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    var(--glow-violet-strong);
}
.plan__flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--violet);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.plan__name {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.plan__price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-price);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0.6rem;
  color: var(--text);
}
.plan__unit {
  color: var(--faint);
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}
.plan__d {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: var(--space-s);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--line);
  max-width: 32ch;
}
.plan__feat {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: var(--space-m);
  flex: 1;
}
.plan__feat li {
  /* Haken absolut statt Flex-Item: sonst wird jeder Inline-Link im
     Leistungstext ("Demo ansehen") zu einer eigenen Flex-Spalte und
     bricht aus der Zeile heraus. 12.09.2026 */
  display: block;
  position: relative;
  padding-left: calc(18px + 0.7rem);
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.4;
}
.plan__feat .ck {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(138, 41, 226, 0.16);
  color: var(--violet-soft);
  display: grid;
  place-items: center;
}
.plan__feat .ck svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan__cta {
  margin-top: var(--space-l);
}
.plan__cta .btn {
  width: 100%;
  justify-content: space-between;
}
.plan--featured .plan__cta .btn--ghost {
  border-color: var(--violet-soft);
  color: var(--text);
}
@media (max-width: 1040px) {
  .plans__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .plan--featured {
    order: -1;
  }
}

/* ========== Preis-Jump + Website head ========== */
/* Nav: Dashboard leicht hervorgehoben */
.nav__link[href="dashboard.html"] {
  color: var(--violet-soft, #c4a0ff);
}
.nav__link[href="dashboard.html"].is-active,
.nav__link[href="dashboard.html"]:hover {
  color: var(--text);
}

/* ========== Dashboard-Landing: stark & verkaufend ========== */
/* Label UNTER dem Logo/Hero-Visual — nie drüber (Hamada 27.07.) */
.dash-hero .phero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dash-hero__under {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, rgb(var(--rgb-kante) / 0.55));
  text-align: center;
}
.dash-hero .phero__lead strong {
  color: var(--violet-soft, #c084fc);
}
.ptier__list li.ptier__extra {
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--violet-soft, #c4a0ff);
}
.ptier__list li.ptier__extra::before {
  content: "✦";
  color: var(--violet-bright, #a855f7);
}

/* Circuit-Chip sitzt unter dem Hero (main.js: hero+~92px, Chip ~136px).
   Erste Content-Sektion MUSS darunter starten — sonst liegt Text auf dem Logo
   (wie auf anderen Unterseiten: Jump-Leiste + space-2xl schafft die Luft). */
.dash-sell {
  padding-top: clamp(11rem, 22vw, 16rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  z-index: 1;
}
.dash-sell .container {
  position: relative;
  z-index: 2;
}
.dash-features,
.dash-erechnung {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  z-index: 1;
}
/* Karten/Head: lesbar über Adern (wie proof/faq auf anderen Seiten) */
.dash-sell__head,
.dash-sell__card,
.dash-features .dash-sell__head,
.dash-matrix__col,
.dash-erechnung .container > div,
.dash-erechnung__panel {
  background: rgb(var(--rgb-nacht) / 0.55);
  box-shadow: 0 0 34px 26px rgb(var(--rgb-nacht) / 0.55);
  border-radius: 1rem;
}
.dash-sell__head,
.dash-features .dash-sell__head {
  padding: 0.85rem 1rem;
}
.dash-sell__head {
  max-width: 40rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}
.dash-sell__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.4rem 0 0.85rem;
}
.dash-sell__head h2 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-sell__head .lead {
  color: var(--muted);
  margin: 0;
  font-size: 1.05rem;
}

.dash-sell__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.dash-sell__card {
  padding: 1.35rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(
    165deg,
    rgb(var(--rgb-linie) / 0.75) 0%,
    rgb(var(--rgb-nacht) / 0.95) 100%
  );
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.dash-sell__card:hover {
  border-color: rgba(138, 41, 226, 0.45);
  transform: translateY(-3px);
}
.dash-sell__card--xl {
  grid-column: 1 / -1;
  padding: 1.75rem 1.6rem;
  border-color: rgba(138, 41, 226, 0.4);
  background: linear-gradient(
    120deg,
    rgba(138, 41, 226, 0.18) 0%,
    rgb(var(--rgb-flaeche) / 0.95) 55%
  );
  box-shadow: var(--glow-violet);
}
.dash-sell__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-soft);
  margin-bottom: 0.65rem;
}
.dash-sell__card h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  font-weight: 640;
  margin: 0 0 0.55rem;
  line-height: 1.25;
}
.dash-sell__card--xl h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}
.dash-sell__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.dash-sell__card p strong {
  color: var(--text);
}

.dash-features {
  background: rgb(var(--rgb-nacht) / 0.7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dash-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.dash-matrix__col {
  padding: 1.5rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgb(var(--rgb-erhoben) / 0.85);
}
.dash-matrix__col--hot {
  border-color: rgba(138, 41, 226, 0.5);
  background: linear-gradient(
    180deg,
    rgba(138, 41, 226, 0.16) 0%,
    rgb(var(--rgb-flaeche) / 0.95) 100%
  );
  box-shadow: 0 0 40px rgba(138, 41, 226, 0.12);
}
.dash-matrix__col h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.dash-matrix__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-matrix__col li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  border-top: 1px solid rgb(var(--rgb-kante) / 0.04);
}
.dash-matrix__col li:first-child {
  border-top: 0;
}
.dash-matrix__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}
.dash-matrix__col li strong {
  color: var(--violet-soft);
}

.dash-erechnung {
  background:
    radial-gradient(
      ellipse 70% 60% at 80% 40%,
      rgba(138, 41, 226, 0.2),
      transparent 60%
    ),
    rgb(var(--rgb-nacht) / 0.95);
}
.dash-erechnung__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.dash-erechnung h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
}
.dash-erechnung h2 em {
  font-style: normal;
  color: var(--violet-soft);
}
.dash-erechnung .lead {
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.dash-erechnung__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.dash-erechnung__list li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--text);
}
.dash-erechnung__list li:first-child {
  border-top: 0;
}
.dash-erechnung__list strong {
  color: var(--violet-soft);
}
.dash-erechnung__panel {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 20px;
  border: 1px solid rgba(138, 41, 226, 0.45);
  background: linear-gradient(
    155deg,
    rgb(var(--rgb-linie) / 0.6) 0%,
    rgb(var(--rgb-nacht) / 0.98) 100%
  );
  box-shadow: var(--glow-violet-strong);
  text-align: center;
}
.dash-erechnung__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(138, 41, 226, 0.35);
  color: #fff;
}
.dash-erechnung__big {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-erechnung__sub {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.dash-erechnung__copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .dash-sell__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-sell__card--xl {
    grid-column: 1 / -1;
  }
  .dash-matrix {
    grid-template-columns: 1fr;
  }
  .dash-erechnung__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .dash-sell__grid {
    grid-template-columns: 1fr;
  }
}

.price-jump {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.65rem 0;
  background: rgb(var(--rgb-nacht) / 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.price-jump__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: center;
  align-items: center;
}
.price-jump__chip {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.price-jump__chip:hover {
  color: var(--text);
  border-color: rgba(138, 41, 226, 0.45);
}
.price-jump__chip--hot {
  color: var(--text);
  border-color: rgba(138, 41, 226, 0.55);
  background: rgba(138, 41, 226, 0.12);
}
.plans__head {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto var(--space-xl);
}
.plans__head .lead {
  margin-top: var(--space-s);
  color: var(--muted);
}
.phero__cta--split {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ========== Portal / Dashboard Preise ========== */
.portal-price {
  position: relative;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      rgba(138, 41, 226, 0.14),
      transparent 55%
    ),
    rgb(var(--rgb-nacht) / 0.92);
  border-top: 1px solid rgba(138, 41, 226, 0.2);
  border-bottom: 1px solid var(--line);
}

/* A · Rechnungskarten (nur Geld-Positionen) */
.dash-bills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .dash-bills {
    grid-template-columns: 1fr;
  }
}
.dash-bill {
  position: relative;
  background: rgb(var(--rgb-flaeche) / 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem 1.25rem 1.3rem;
}
.dash-bill--hot {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12);
}
.dash-bill__badge {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet, #a855f7);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.dash-bill__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--line);
}
.dash-bill__name {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 640;
}
.dash-bill__flag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--violet-soft, #c4a0ff);
}
.dash-bill__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.dash-bill__table td {
  padding: 0.32rem 0;
  vertical-align: top;
  color: var(--muted);
}
.dash-bill__table td:first-child {
  color: var(--text);
  padding-right: 0.75rem;
}
.dash-bill__table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-bill__sum {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.dash-bill__agency {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.dash-bill__agency s {
  color: rgb(var(--rgb-kante) / 0.38);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  text-decoration-thickness: 1.5px;
}
.dash-bill__paket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.4rem;
  font-weight: 640;
  font-size: 1.05rem;
}
.dash-bill__paket strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.55rem;
  color: var(--violet-soft, #c4a0ff);
  font-variant-numeric: tabular-nums;
}
.dash-bill__save {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--gruen);
}
.dash-bill .ptier__cta {
  margin-top: 0.95rem;
  width: 100%;
  text-align: center;
}
.dash-bills__hint {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* C · Feature-Matrix (alle Features + Gadgets) */
.dash-compare {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.dash-compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(var(--rgb-flaeche) / 0.75);
  -webkit-overflow-scrolling: touch;
}
.dash-compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.dash-compare__table th,
.dash-compare__table td {
  padding: 0.55rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.dash-compare__table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgb(var(--rgb-toenung) / calc(0.28 * var(--f-toenung)));
  font-weight: 600;
}
.dash-compare__table th span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 700;
}
.dash-compare__table th.is-hot {
  color: var(--violet-soft, #c4a0ff);
  background: rgba(168, 85, 247, 0.12);
}
.dash-compare__table th.is-hot span {
  color: var(--violet-soft, #c4a0ff);
}
.dash-compare__table td:first-child,
.dash-compare__table th:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  min-width: 11.5rem;
}
.dash-compare__table td {
  color: var(--text);
}
.dash-compare__table td.is-no {
  color: rgb(var(--rgb-kante) / 0.18);
}
.dash-compare__table td.is-soft {
  color: var(--violet-soft, #c4a0ff);
  font-size: 0.8rem;
}
.dash-compare__sec td {
  background: rgba(168, 85, 247, 0.07);
  color: var(--violet-soft, #c4a0ff) !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left !important;
  padding-top: 0.8rem;
  font-weight: 600;
}
.dash-compare__foot td {
  border-bottom: 0;
  background: rgb(var(--rgb-toenung) / calc(0.28 * var(--f-toenung)));
  font-weight: 640;
  vertical-align: middle;
}
.dash-compare__foot s {
  display: block;
  color: rgb(var(--rgb-kante) / 0.3);
  font-size: 0.8rem;
  font-weight: 500;
}
.dash-compare__foot strong {
  color: var(--violet-soft, #c4a0ff);
  font-size: 1.05rem;
}
.dash-compare__note {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}
.portal-price__intro {
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
  text-align: center;
}
.portal-price__intro h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
}
.portal-price__intro h2 em {
  font-style: normal;
  color: var(--violet-soft, #c4a0ff);
}
.portal-price__intro .lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}
.portal-price__intro a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Schmerz / Nutzen */
.portal-pain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: var(--space-l);
}
.portal-pain__col {
  padding: 1.35rem 1.3rem 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.portal-pain__col--bad {
  background: rgb(var(--rgb-warn-flaeche) / 0.55);
  border-color: rgba(255, 90, 100, 0.22);
}
.portal-pain__col--good {
  background: rgb(var(--rgb-gut-flaeche) / 0.55);
  border-color: rgba(52, 231, 197, 0.28);
}
.portal-pain__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  color: var(--muted);
}
.portal-pain__col--good .portal-pain__label {
  color: var(--mint);
}
.portal-pain__col--bad .portal-pain__label {
  color: var(--rot);
}
.portal-pain ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-pain li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  border-top: 1px solid rgb(var(--rgb-kante) / 0.05);
}
.portal-pain li:first-child {
  border-top: 0;
}
.portal-pain__col--bad li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--rot);
  font-weight: 700;
}
.portal-pain__col--good li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--mint);
  font-weight: 700;
}

/* Verkaufs-Hooks */
.portal-hooks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: var(--space-xl);
}
.portal-hook {
  padding: 1.15rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(138, 41, 226, 0.28);
  background: linear-gradient(
    160deg,
    rgba(138, 41, 226, 0.12) 0%,
    rgb(var(--rgb-nacht) / 0.9) 70%
  );
}
.portal-hook strong {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.02rem;
  font-weight: 640;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  color: var(--text);
}
.portal-hook p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.portal-pitch {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--space-xl);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
}
.portal-pitch strong {
  color: var(--text);
}
.portal-pitch a {
  color: var(--violet-soft, #c4a0ff);
}

.portal-feat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: var(--space-xl);
}
.portal-feat__card {
  padding: 1.25rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgb(var(--rgb-erhoben) / 0.65);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.portal-feat__card:hover {
  border-color: rgba(138, 41, 226, 0.4);
  transform: translateY(-2px);
}
.portal-feat__num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet-soft, #c4a0ff);
  margin-bottom: 0.65rem;
}
.portal-feat__card h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 640;
  margin: 0 0 0.5rem;
}
.portal-feat__card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.portal-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  align-items: stretch;
  margin-bottom: var(--space-xl);
}
.portal-tiers--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.ptier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.35rem 1.35rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(
    165deg,
    rgb(var(--rgb-erhoben) / 0.95) 0%,
    rgb(var(--rgb-nacht) / 0.98) 100%
  );
  box-shadow: 0 12px 40px
    rgb(var(--rgb-schatten) / calc(0.25 * var(--f-schatten)));
}
.portal-tiers--4 .ptier {
  padding: 1.35rem 1.1rem 1.2rem;
}
.portal-tiers--4 .ptier__price strong {
  font-size: clamp(2.1rem, 1.5rem + 1.4vw, 2.75rem);
}
.portal-tiers--4 .ptier__d {
  min-height: 4.2em;
  font-size: 0.88rem;
}
.portal-tiers--4 .ptier__list li {
  font-size: 0.84rem;
  padding: 0.38rem 0 0.38rem 1.2rem;
}
.ptier--featured {
  border-color: rgba(138, 41, 226, 0.55);
  background: linear-gradient(
    165deg,
    rgba(40, 28, 70, 0.55) 0%,
    rgb(var(--rgb-flaeche) / 0.98) 55%
  );
  box-shadow:
    0 0 0 1px rgba(138, 41, 226, 0.25),
    0 24px 60px rgba(80, 40, 160, 0.22);
  transform: scale(1.02);
  z-index: 1;
}
.portal-tiers--4 .ptier--featured {
  transform: scale(1.03);
}
.ptier__flag {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--violet, #8a29e2);
  color: #fff;
  white-space: nowrap;
}
.ptier__head {
  margin-bottom: 0.75rem;
}
.ptier__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.ptier__price {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: "Bricolage Grotesque", sans-serif;
  line-height: 1;
}
.ptier__price strong {
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.ptier__price span {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--muted);
}
.ptier__unit {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.ptier__d {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1.1rem;
  min-height: 3.2em;
}
.ptier__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
}
.ptier__list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.35rem;
  font-size: 0.9rem;
  line-height: 1.4;
  border-top: 1px solid rgb(var(--rgb-kante) / 0.05);
  color: var(--text);
}
.ptier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--violet, #8a29e2);
  box-shadow: 0 0 10px rgba(138, 41, 226, 0.5);
}
.ptier__list li strong {
  color: var(--violet-soft, #c4a0ff);
}
.ptier__out {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.85;
  margin: 0 0 1rem;
  font-style: italic;
}
.ptier__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.ptier__cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}
.ptier__cta-row .ptier__cta {
  margin-top: 0;
}
.ptier__cancel {
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.portal-price__note {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.portal-price__note-card {
  padding: 1.15rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgb(var(--rgb-toenung) / calc(0.25 * var(--f-toenung)));
}
.portal-price__note-card b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.portal-price__note-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.portal-price__note-card a {
  color: var(--text);
}

@media (max-width: 1200px) {
  .portal-tiers--4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin-inline: auto;
  }
  .portal-tiers--4 .ptier--featured {
    transform: none;
  }
}
@media (max-width: 1024px) {
  .portal-feat {
    grid-template-columns: repeat(2, 1fr);
  }
  .portal-hooks {
    grid-template-columns: repeat(2, 1fr);
  }
  .portal-tiers:not(.portal-tiers--4) {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .ptier--featured {
    transform: none;
    order: -1;
  }
  .portal-tiers--4 .ptier--featured {
    order: -1;
  }
  .portal-price__note {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .portal-tiers--4 {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}
@media (max-width: 720px) {
  .portal-pain {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .portal-feat,
  .portal-hooks {
    grid-template-columns: 1fr;
  }
  .price-jump__chip {
    font-size: 0.68rem;
    padding: 0.4rem 0.65rem;
  }
}

/* Zahlung + Garantie */
.pay {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.pay__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.pay__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-m);
}
.pay__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.pay__pct {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: 1.5rem;
  color: var(--violet-soft);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pay__step b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  display: block;
}
.pay__step span {
  color: var(--muted);
  font-size: 0.94rem;
}
.pay__copy h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}
@media (max-width: 880px) {
  .pay__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* FAQ (Answer-First, native details) */
.faq {
  background: transparent;
}
.faq__head {
  margin-bottom: var(--space-l);
}
.faq__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.faq__list {
  max-width: 760px;
}
.qa {
  border-top: 1px solid var(--line);
}
.qa:last-child {
  border-bottom: 1px solid var(--line);
}
.qa > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-m) 0;
  min-height: 44px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
  color: var(--text);
}
.qa > summary::-webkit-details-marker {
  display: none;
}
.qa__plus {
  flex: none;
  width: 26px;
  height: 26px;
  position: relative;
}
.qa__plus::before,
.qa__plus::after {
  content: "";
  position: absolute;
  background: var(--violet);
  top: 50%;
  left: 50%;
}
.qa__plus::before {
  width: 13px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.qa__plus::after {
  width: 1.5px;
  height: 13px;
  transform: translate(-50%, -50%);
  transition: transform var(--d-ui) var(--ease-entrance);
}
.qa[open] .qa__plus::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.qa__a {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 64ch;
  padding-bottom: var(--space-m);
}
.qa__a strong {
  color: var(--text);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa__a {
    animation: heroRise 0.45s var(--ease-entrance) both;
  }
}

/* ============================================================ ÜBER */
.about {
  background: transparent;
}
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}
.about__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}
.about__body {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: 1.02rem;
  line-height: 1.7;
}
.about__body p + p {
  margin-top: var(--space-m);
}
.portrait {
  position: relative;
  padding: 8px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 34px 76px -38px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
}
.portrait img {
  width: 100%;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.02);
}
.portrait figcaption {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.6rem 0.3rem 0.15rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.values {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
@media (max-width: 760px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

}

/* ============================================================ TEAM (ueber-uns) */
.team {
  background: transparent;
}

.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: clamp(90px, 16vh, 150px);
  margin-inline: auto;
}
.wave span {
  width: 5px;
  border-radius: var(--r-pill);
  background: var(--violet);
  height: var(--h, 30%);
  transform-origin: center;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .wave span {
    animation: eq 1.15s var(--ease-entrance) var(--d, 0s) infinite alternate;
  }
}
@keyframes eq {
  from {
    transform: scaleY(0.28);
    opacity: 0.55;
  }
  to {
    transform: scaleY(1);
    opacity: 0.9;
  }
}
.voice-note {
  background: transparent;
}
.voice-note__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}
.voice-note__grid h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.voice-note__grid p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: 1.02rem;
  line-height: 1.7;
}
.voice-pts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.voice-pt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.voice-pt:last-child {
  border-bottom: 1px solid var(--line);
}
.voice-pt .spec {
  color: var(--violet-soft);
}
.voice-pt b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  display: block;
}
.voice-pt span.t {
  color: var(--muted);
  font-size: 0.94rem;
  display: block;
  margin-top: 0.2rem;
}
@media (max-width: 880px) {
  .voice-note__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* ============================================================ KI-TEASER (Home) */
.ki-teaser {
  background: transparent;
}
.ki-teaser__card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-l);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-frame);
  background: linear-gradient(
    135deg,
    rgba(138, 41, 226, 0.14),
    rgb(var(--rgb-nacht) / 0.5) 60%
  );
}
.ki-teaser__card::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -55%;
  right: -8%;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(
    circle,
    rgba(138, 41, 226, 0.28),
    transparent 65%
  );
  pointer-events: none;
}
.ki-teaser__h {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-s);
  max-width: 20ch;
}
.ki-teaser__p {
  color: var(--muted);
  margin: var(--space-s) 0 var(--space-m);
  max-width: 52ch;
}
.wave--teaser {
  height: clamp(80px, 12vw, 130px);
}
@media (max-width: 760px) {
  .ki-teaser__card {
    grid-template-columns: 1fr;
  }
  .wave--teaser {
    order: -1;
    height: 64px;
  }
}

/* ============================================================ AUDIO-DEMOS (ki-assistent) */
.ademos {
  background: transparent;
}
.ademos__note {
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: var(--space-l);
}
.ademo {
  display: grid;
  grid-template-columns: auto 1fr minmax(160px, 0.5fr);
  gap: 1.1rem;
  align-items: center;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
}
.ademos__list .ademo:last-child {
  border-bottom: 1px solid var(--line);
}
.ademo--start {
  border: 1px solid rgba(138, 41, 226, 0.45);
  border-radius: var(--r-frame);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  background: linear-gradient(
    135deg,
    rgba(138, 41, 226, 0.12),
    rgb(var(--rgb-nacht) / 0.5) 65%
  );
  box-shadow: var(--glow-violet);
}
.ademo__btn {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--glow-violet);
  transition:
    transform var(--d-hover) var(--ease-entrance),
    background-color var(--d-hover) var(--ease-entrance),
    box-shadow var(--d-hover) var(--ease-entrance);
}
.ademo__btn svg {
  width: 18px;
  height: 18px;
}
.ademo__pause {
  display: none;
}
.ademo.is-playing .ademo__play {
  display: none;
}
.ademo.is-playing .ademo__pause {
  display: block;
}
@media (hover: hover) {
  .ademo__btn:hover {
    background: var(--violet-bright);
    transform: scale(1.06);
    box-shadow: var(--glow-violet-strong);
  }
}
.ademo__btn:active {
  transform: scale(0.96);
}
.ademo__txt b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  display: block;
}
.ademo__txt span {
  color: var(--muted);
  font-size: 0.92rem;
  display: block;
  margin-top: 0.15rem;
}
.ademo__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ademo__time {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.72rem;
  color: var(--faint);
  min-width: 3.2ch;
  font-variant-numeric: tabular-nums;
}
.ademo__bar {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ademo__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
}
.ademo__fill {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--blue-violet),
    var(--violet),
    var(--magenta)
  );
  transform: scaleX(0);
  transform-origin: left center;
}
@media (max-width: 640px) {
  .ademo {
    grid-template-columns: auto 1fr;
  }
  .ademo__meta {
    grid-column: 1 / -1;
  }
}

.cinfo h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cinfo__lead {
  color: var(--muted);
  margin: var(--space-m) 0 var(--space-l);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 42ch;
}
.cways {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-l);
}
.cway {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  min-height: 56px;
  transition: border-color var(--d-ui) var(--ease-entrance);
}
.cway:last-child {
  border-bottom: 1px solid var(--line);
}
.cway__ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  flex: none;
}
.cway__ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cway__k {
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
}
.cway__v {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}
.cway__go {
  color: var(--faint);
  transition:
    color var(--d-hover) var(--ease-entrance),
    transform var(--d-hover) var(--ease-entrance);
}
.cway__go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .cway:hover {
    border-color: var(--line-strong);
  }
  .cway:hover .cway__go {
    color: var(--violet-soft);
    transform: translate(2px, -2px);
  }
}

/* Formular */
.form-wrap {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.form-card {
  max-width: 720px;
}
.form-card h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.form-card__sub {
  color: var(--muted);
  margin: var(--space-s) 0 var(--space-l);
}
.aform {
  display: grid;
  gap: var(--space-m);
}
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.field--full {
  grid-column: 1 / -1;
}
.label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
.label .opt {
  color: var(--faint);
  font-weight: 400;
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-left: 0.4rem;
}
.input,
.textarea,
.select {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-inner);
  transition:
    border-color var(--d-hover) var(--ease-entrance),
    box-shadow var(--d-hover) var(--ease-entrance);
}
.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--placeholder);
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--violet-soft);
  box-shadow: 0 0 0 3px rgba(138, 41, 226, 0.24);
}
.help {
  font-size: 0.8rem;
  color: var(--faint);
}
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: var(--space-s) 0;
}
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--night);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  transition: border-color var(--d-hover) var(--ease-entrance);
}
.consent input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--d-hover) var(--ease-micro);
}
.consent input[type="checkbox"]:checked {
  background: var(--violet);
  border-color: var(--violet-soft);
}
.consent input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}
.consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.consent label {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}
.consent label a {
  color: var(--violet-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-s);
}
.form-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.form-secure svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.7;
}
.form-state {
  display: none;
  border-radius: var(--r-inner);
  padding: var(--space-m);
  margin-top: var(--space-m);
  font-size: 0.96rem;
  line-height: 1.5;
}
.form-state.is-on {
  display: block;
}
.form-state--ok {
  background: rgba(138, 41, 226, 0.1);
  border: 1px solid rgba(138, 41, 226, 0.4);
  color: var(--text);
}
.form-state--ok b {
  color: var(--violet-soft);
}
.form-state--err {
  background: rgba(231, 90, 72, 0.08);
  border: 1px solid rgba(231, 90, 72, 0.35);
  color: var(--text);
}
.is-submitting .aform__submit {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 560px) {
  .frow {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BONE-CTA (Tonwechsel auf jeder Seite) */
.bone-cta {
  background: var(--bone);
  color: var(--ink-on-bone);
  text-align: center;
}
.bone-cta h2 {
  text-wrap: balance;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  /* W4 26.09.: war --fs-statement (5,6rem) — ein Satz bleibt unter ~3,4rem (GESETZ Kap. 3) */
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  max-width: 18ch;
  margin-inline: auto;
}
.bone-cta h2 em {
  font-style: normal;
  color: var(--violet-soft);
}
.bone-cta p {
  margin: var(--space-m) auto var(--space-l);
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.bone-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}
.bone-cta .btn--ghost {
  --btn-fg: var(--ink-on-bone);
  border-color: var(--line-strong);
}
.bone-cta .btn--ghost .btn__icon {
  background: rgb(var(--rgb-kante) / 0.06);
}
@media (hover: hover) {
  .bone-cta .btn--ghost:hover {
    border-color: var(--violet-soft);
    background: rgba(138, 41, 226, 0.1);
  }
}
.bone-micro {
  margin-top: var(--space-m);
  font-family: "Manrope", sans-serif; /* W4 26.09.: keine Monospace (GESETZ Kap. 3) */
  font-size: var(--fs-spec);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============================================================ LEGAL */
.legal {
  background: transparent;
  padding-top: clamp(8rem, 16vh, 11rem);
}
.legal__wrap {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.legal h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  /* W7 27.09.2026: bei 390 px lief „Geschäftsbedingungen" (38 px) über den Rand
     (Augen-Tor rot) — kleinere Stufe am Handy + Silbentrennung statt Überlauf. */
  font-size: clamp(1.85rem, 0.9rem + 3.9vw, 4rem);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: var(--space-s) 0 var(--space-l);
}
.legal h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin: var(--space-l) 0 var(--space-s);
}
.legal h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  margin: var(--space-m) 0 var(--space-2xs);
}
.legal p {
  color: var(--muted);
  margin-bottom: var(--space-s);
  max-width: 70ch;
  line-height: 1.7;
}
.legal a:not(.btn):not(.legal-back) {
  color: var(--violet-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: var(--space-m);
  color: var(--text);
  line-height: 1.8;
  margin: var(--space-s) 0 var(--space-m);
}
.legal-box a {
  color: var(--violet-soft);
}
.legal-note {
  border-radius: var(--r-inner);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.legal-note b {
  color: var(--violet-soft);
}
.legal-note--violet {
  background: rgba(138, 41, 226, 0.09);
  border: 1px solid rgba(138, 41, 226, 0.35);
}
.legal__todo {
  color: var(--faint);
  font-size: 0.86rem;
  font-style: italic;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: var(--space-xl);
  color: var(--violet-soft);
  font-weight: 600;
}

/* ============================================================ SHARED REVEAL HELPERS */
.js:not(.reduce) [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
}
.js:not(.reduce) [data-reveal-child] > * {
  opacity: 0;
  transform: translateY(28px);
}

/* ============================================================
   W4 · Unterseiten-Umbau 26.09.2026 (Bauplan § 2c / § 3c)
   preise · werk · ueber-uns · kontakt · webdesign · ki-assistent · jobs
   Nur Tokens aus app.css, beide Themen. Kein Inline-Style im Markup.
   ============================================================ */

/* ---------- Seiten-Kopf § 2c: Video voll, Text unten links, EIN Knopf ---------- */
:root {
  --fs-kopf-h1: clamp(2.1rem, 1.25rem + 2.5vw, 3.4rem);
  /* Saetze max. ~3,4rem (GESETZ Kap. 3) — Abschnitts-H2 der Unterseiten */
  --fs-h2-satz: clamp(1.85rem, 1.2rem + 2.1vw, 3.1rem);
}
.phero--kopf {
  isolation: isolate;
  text-align: left;
}
.phero--kopf .kopf__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Die Wortmarke im Markenclip wandert aus der Textspalte (Lehre W11/R2 der
   17.09.-Kopie). Masse so, dass nirgends eine Luecke am Rand entsteht:
   quer 1,28 x (0,5 - 0,109) >= 0,5 · hochkant 1,25 x (0,5 - 0,1) >= 0,5. */
@media (min-width: 900px) {
  .phero--kopf .kopf__video {
    transform: scale(1.28) translateX(10.9%);
  }
}
@media (max-width: 899px) {
  .phero--kopf .kopf__video {
    transform: scale(1.25) translateY(-10%);
  }
}
/* Gerichteter Schleier fuer den Kopf-Text unten links: der Markenclip zeigt
   ab Sekunde 4 helle UI-Tafeln mit Schein-Text — unter Lead und H1 braucht
   es Deckung von unten UND von links. Rechts oben bleibt der Clip frei.
   Mobil gilt der kraeftigere Schleier aus app.css (<= 880 px). */
@media (min-width: 881px) {
  .phero--kopf .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgb(var(--rgb-scrim) / 0.92) 0%,
        rgb(var(--rgb-scrim) / 0.74) 26%,
        rgb(var(--rgb-scrim) / 0.3) 52%,
        rgb(var(--rgb-scrim) / 0) 76%
      ),
      linear-gradient(
        100deg,
        rgb(var(--rgb-scrim) / 0.8) 0%,
        rgb(var(--rgb-scrim) / 0.62) 38%,
        rgb(var(--rgb-scrim) / 0.2) 60%,
        rgb(var(--rgb-scrim) / 0) 76%
      );
  }
}
/* Unter dem Kopf sitzt der RK-Chip (main.js, Rueckfall-Position: Kopf-Unterkante
   + 92 px, 136 px hoch; mobil + 60 px, 88 px hoch) — der erste Abschnitt haelt
   ihm den Platz frei, damit Pins nie durch eine Zeile laufen. */
.phero--kopf + section {
  padding-top: max(var(--space-2xl), 12.5rem);
}
@media (max-width: 600px) {
  .phero--kopf + section {
    padding-top: max(var(--space-2xl), 9rem);
  }
}
.phero--kopf .phero__eyebrow {
  margin-bottom: var(--space-s);
}
.phero--kopf .phero__title {
  font-size: var(--fs-kopf-h1);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.028em;
  /* endet vor der Wortmarke des Clips (1440: Textspalte ab 144 px,
     Wortmarke nach der Verschiebung ab ~737 px) */
  max-width: 17ch;
  text-wrap: balance;
}
.phero--kopf .phero__lead {
  max-width: 50ch;
  margin: var(--space-s) 0 var(--space-m);
}
/* Schrift-Halo wie im Start-Kopf: kostet dem Video nichts, traegt die
   Zeile auch ueber hellen Frames (Logo-Licht im Markenclip). */
.phero--kopf .phero__eyebrow,
.phero--kopf .phero__title,
.phero--kopf .phero__lead {
  text-shadow:
    0 0 12px rgb(var(--rgb-scrim) / 0.85),
    0 0 34px rgb(var(--rgb-scrim) / 0.7);
}
:root[data-theme="light"] .phero--kopf .phero__eyebrow,
:root[data-theme="light"] .phero--kopf .phero__title,
:root[data-theme="light"] .phero--kopf .phero__lead {
  text-shadow:
    0 0 10px rgb(var(--rgb-scrim) / 0.98),
    0 0 26px rgb(var(--rgb-scrim) / 0.95),
    0 0 52px rgb(var(--rgb-scrim) / 0.85);
}
@media (max-width: 880px) {
  .phero--kopf {
    justify-content: flex-end;
  }
  .phero--kopf .phero__title {
    max-width: 16ch;
  }
}

/* ---------- Preise ---------- */
/* Dashboard-Zeile wie auf der Startseite (W2 start.css .st-plan-dash):
   abgesetzt, fett; bei Basic blass mit Strich statt Haken. */
.plan__feat li.plan__feat--dashboard {
  margin-top: 0.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.plan__feat li.plan__feat--dashboard .ck {
  top: calc(0.85rem + 2px);
}
.plan__feat li.plan__feat--aus {
  font-weight: 600;
  color: var(--faint);
}
.plan__feat .ck--aus {
  background: rgb(var(--rgb-kante) / 0.07);
}
.plan__feat .ck--aus::after {
  content: "";
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--faint);
}
.plans__fuss {
  max-width: 1180px;
  margin: var(--space-m) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Rechner „Abo gegen Eigentum" — Datenbilder-Regel (GESETZ Kap. 11):
   Werte stehen als Text daneben, Balken wachsen aus der Nulllinie,
   Marken mindestens 3:1 in beiden Themen. */
.rechner {
  max-width: 1180px;
  margin: var(--space-2xl) auto 0;
}
.rechner__kopf {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-s) var(--space-l);
  align-items: end;
}
.rechner__titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}
.rechner__satz {
  color: var(--muted);
  max-width: 58ch;
}
.rechner__karte {
  margin-top: var(--space-m);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-flaeche) / 0.62);
  box-shadow: inset 0 1px 0 rgb(var(--rgb-kante) / 0.06);
}
.rechner__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  justify-content: space-between;
}
.rechner__frage {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.95rem;
}
.rechner__laufzeit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rechner__jahr {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--d-hover) var(--ease-entrance),
    border-color var(--d-hover) var(--ease-entrance),
    background-color var(--d-hover) var(--ease-entrance);
}
.rechner__jahr:hover {
  color: var(--text);
}
.rechner__jahr[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--violet-bright);
  background: color-mix(in srgb, var(--violet) 16%, transparent);
}
.rechner__balken {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.balken__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  margin-bottom: 0.55rem;
}
.balken__name {
  font-weight: 600;
  color: var(--text);
}
.balken__wert {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.balken__spur {
  position: relative;
  height: 16px;
  border-radius: var(--r-pill);
  background: rgb(var(--rgb-kante) / 0.06);
  border: 1px solid var(--line);
  overflow: hidden;
}
.balken__fuell {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--violet), var(--violet-bright));
  transition: width 420ms var(--ease-entrance);
}
/* Abo = Spanne: kraeftiger Teil bis zum guenstigsten Tarif, heller bis zum teuersten */
.balken--abo .balken__fuell--bis {
  width: 100%;
  background: rgb(var(--rgb-kante) / 0.42);
}
.balken--abo .balken__fuell--von {
  width: 13%;
  background: rgb(var(--rgb-kante) / 0.78);
}
.balken--rufki .balken__fuell {
  width: 15.7%;
}
.balken__unter {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.rechner__fazit {
  margin: var(--space-m) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text);
  max-width: none;
}
.rechner__quelle {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--faint);
  max-width: none;
}
.rechner__fazit b {
  color: var(--violet-soft);
}
.rechner__tab {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-s);
}
.rechner__tab caption {
  text-align: left;
  color: var(--muted);
  padding-bottom: 0.5rem;
}
.rechner__tab th,
.rechner__tab td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.rechner__erweiterungen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  justify-content: center;
  margin: var(--space-l) auto 0;
  color: var(--muted);
  max-width: none;
}
.rechner__erweiterungen .tlink {
  color: var(--text);
}
@media (max-width: 880px) {
  .rechner__kopf {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Gemeinsame H2 der neuen Abschnitte ---------- */
.plans__head h2,
.betreuung h2,
.zahlung h2,
.werk-muster__kopf h2,
.ablauf__kopf h2,
.eigen__text h2,
.werkzeug h2,
.anfrage-kopf h2,
.details__kopf h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-h2-satz);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 20ch;
  text-wrap: balance;
}
.betreuung h2 em,
.werk-muster__kopf h2 em,
.eigen__text h2 em,
.anfrage-kopf h2 em {
  font-style: normal;
  color: var(--violet-soft);
}

/* Betreuung (Kunden-Portal) — ruhig, getrennt vom Dashboard */
.betreuung {
  background: rgb(var(--rgb-flaeche) / 0.55);
  border-block: 1px solid var(--line);
}
.betreuung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-xl);
  align-items: center;
}
.betreuung h2 {
  margin-top: var(--space-s);
}
.betreuung .lead {
  margin-top: var(--space-m);
}
.betreuung__liste {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}
.betreuung__liste li,
.punktliste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  color: var(--text);
  line-height: 1.5;
}
.betreuung__punkt,
.punktliste__punkt {
  width: 7px;
  height: 7px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--violet-bright);
}
@media (max-width: 880px) {
  .betreuung__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }
}

/* Zahlung */
.zahlung__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-xl);
  align-items: center;
}
.zahlung__kern {
  margin-top: var(--space-s);
  font-size: var(--fs-lead);
  color: var(--violet-soft);
  font-weight: 600;
}
.zahlung__schritte,
.ablauf__takte {
  display: grid;
  margin-top: var(--space-l);
  counter-reset: schritt;
}
.zahlung__schritte li,
.ablauf__takte li {
  position: relative;
  padding: var(--space-s) 0 var(--space-s) 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
  counter-increment: schritt;
}
.zahlung__schritte li:last-child,
.ablauf__takte li:last-child {
  border-bottom: 1px solid var(--line);
}
.zahlung__schritte li::before,
.ablauf__takte li::before {
  content: "0" counter(schritt);
  position: absolute;
  left: 0;
  top: var(--space-s);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  color: var(--violet-soft);
}
.zahlung__schritte b,
.ablauf__takte b {
  color: var(--text);
  font-weight: 600;
}
.bild-mit-zeile {
  margin: 0;
  min-width: 0;
}
.bild-mit-zeile figcaption {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: var(--muted);
}
@media (max-width: 880px) {
  .zahlung__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }
}

/* ---------- Kontakt: volles Formular + Karte + Kacheln (GESETZ Kap. 10) ---------- */
.anfrage-kopf {
  max-width: 44rem;
  margin-bottom: var(--space-l);
}
.anfrage-kopf .lead {
  margin-top: var(--space-s);
}
.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--space-l) var(--space-xl);
  align-items: start;
}
.anfrage__raster > *,
.anfrage__formular .frow > *,
.anfrage__formular .field {
  min-width: 0;
}
.anfrage__formular {
  max-width: none;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-flaeche) / 0.62);
  box-shadow: inset 0 1px 0 rgb(var(--rgb-kante) / 0.06);
}
.anfrage__zusage {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.form-state__link {
  color: var(--violet-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.anfrage__seite {
  display: grid;
  gap: var(--space-m);
}
.kacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-s);
}
.kachel {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  min-height: 72px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: rgb(var(--rgb-erhoben) / 0.5);
  transition: border-color var(--d-hover) var(--ease-entrance);
}
@media (hover: hover) {
  .kachel:hover {
    border-color: var(--line-strong);
  }
}
.kachel__ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
}
.kachel__ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kachel__text {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}
.kachel__k {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kachel__v {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.karte {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-flaeche) / 0.62);
}
.karte__rahmen {
  display: block;
  width: 100%;
  height: clamp(260px, 30vw, 380px);
  border: 0;
  filter: saturate(0.85);
}
.karte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--line);
}
.karte__adresse {
  font-style: normal;
  color: var(--text);
  line-height: 1.5;
}
.naechste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-xl);
  counter-reset: schritt;
}
.naechste li {
  position: relative;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
  counter-increment: schritt;
}
.naechste li::before {
  content: "0" counter(schritt);
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  color: var(--violet-soft);
}
.naechste b {
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 980px) {
  .anfrage__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .naechste {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
  }
}
@media (max-width: 420px) {
  .kacheln {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Arbeiten (werk.html): drei Muster, gross, ehrlich beschriftet ---------- */
.werk-muster__kopf {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}
.werk-muster__kopf h2 {
  margin-top: var(--space-s);
}
.werk-muster__kopf .lead {
  margin-top: var(--space-m);
}
.werk-muster__liste {
  display: grid;
  gap: var(--space-2xl);
}
.werk-stueck {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--space-l) var(--space-xl);
  align-items: center;
}
.werk-stueck--gedreht {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}
.werk-stueck--gedreht .werk-stueck__schirm {
  order: 2;
}
.werk-stueck__schirm {
  display: block;
  min-width: 0;
  border-radius: var(--r-frame);
  transition: transform var(--d-ui) var(--ease-entrance);
}
@media (hover: hover) {
  .werk-stueck__schirm:hover {
    transform: translateY(-4px);
  }
}
.werk-stueck__schirm:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 6px;
}
/* Standbild traegt (auch mobil und ohne JS), die Scroll-Aufnahme liegt
   darueber und blendet erst ein, wenn sie wirklich laeuft. */
.rahmen > .rahmen__video {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--rahmen-leiste, 2.15rem) + 1px);
  width: 100%;
  height: calc(100% - var(--rahmen-leiste, 2.15rem) - 1px);
  max-width: none;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.5s var(--ease-entrance);
  pointer-events: none;
}
.rahmen > .rahmen__video.laeuft {
  opacity: 1;
}
.werk-stueck__text {
  min-width: 0;
}
.werk-stueck__marke {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.werk-stueck__titel {
  margin-top: 0.6rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}
.werk-stueck .punktliste {
  display: grid;
  gap: 0.75rem;
  margin: var(--space-m) 0;
}
.werk-stueck .punktliste li {
  color: var(--muted);
}
@media (max-width: 880px) {
  .werk-stueck,
  .werk-stueck--gedreht {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
  }
  .werk-stueck--gedreht .werk-stueck__schirm {
    order: 0;
  }
  .werk-muster__liste {
    gap: var(--space-xl);
  }
}

/* ---------- Über uns ---------- */
.werte {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-flaeche) / 0.62);
  box-shadow: inset 0 1px 0 rgb(var(--rgb-kante) / 0.06);
}
.werte__titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.werte__liste {
  display: grid;
  margin-top: var(--space-s);
  counter-reset: wert;
}
.werte__liste li {
  position: relative;
  padding: var(--space-s) 0 var(--space-s) 2.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
  counter-increment: wert;
}
.werte__liste li::before {
  content: "0" counter(wert);
  position: absolute;
  left: 0;
  top: var(--space-s);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  color: var(--violet-soft);
}
.werte__liste b {
  color: var(--text);
  font-weight: 600;
}
.ablauf {
  background: rgb(var(--rgb-flaeche) / 0.55);
  border-block: 1px solid var(--line);
}
.ablauf__raster,
.eigen__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: center;
}
.ablauf__kopf h2,
.eigen__text h2 {
  margin-top: var(--space-s);
}
.ablauf__kopf .lead,
.eigen__text .lead {
  margin-top: var(--space-m);
}
.bild-mit-zeile figcaption .tlink {
  margin-left: 0.4rem;
  color: var(--text);
}
.werkzeug__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l) var(--space-xl);
  margin-top: var(--space-l);
}
.werkzeug__h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-h4);
  color: var(--text);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-m);
}
.punktliste {
  display: grid;
  gap: 0.85rem;
}
.eigen__liste {
  margin: var(--space-m) 0 var(--space-m);
}
.eigen__link {
  color: var(--text);
}
@media (max-width: 880px) {
  .ablauf__raster,
  .eigen__raster,
  .werkzeug__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
  }
}

/* ---------- Takt der Unterseiten (GESETZ Kap. 2: Sektionsabstaende
   max. 8rem, mobil 5rem). Je Abschnitt hoechstens 4rem oben und unten. ---------- */
.section.takt {
  padding-block: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
}
/* Der erste Abschnitt nach dem Kopf haelt dem RK-Chip den Platz frei
   (siehe oben) — gilt auch mit Takt-Klasse. */
.phero--kopf + .section.takt {
  padding-top: max(var(--space-2xl), 12.5rem);
}
@media (max-width: 600px) {
  .phero--kopf + .section.takt {
    padding-top: max(var(--space-2xl), 9rem);
  }
}

/* Kontakt: Kacheln in der schmalen Seitenspalte untereinander */
.anfrage__seite .kacheln {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) and (max-width: 980px) {
  .anfrage__seite .kacheln {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- Kontakt-Fuß: Senden links, Telefon + E-Mail als Knöpfe unten rechts
   (Korrektur Hamada 29.09.2026, 21:38: „die Telefon wie Mail unten rechts
   anhängen... als butto") — Startseite #anfrage und /kontakt ---------- */
.kontakt-fuss {
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-m);
}
.kontakt-fuss__senden {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  justify-content: start;
  gap: 0.5rem var(--space-m);
  min-width: 0;
}
@media (max-width: 599.98px) {
  .kontakt-fuss__senden {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kontakt-fuss__notiz {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.kontakt-fuss__notiz b {
  font-weight: 600;
  color: var(--text);
}
.kontakt-direkt {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-left: auto;
}
.kontakt-direkt__btn.btn--ghost {
  padding: 0.55rem 1.3rem 0.55rem 0.55rem;
}
.kontakt-direkt__btn .btn__icon svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .kontakt-direkt__btn.btn--ghost:hover .btn__icon {
    transform: none;
  }
}
@media (max-width: 599.98px) {
  .kontakt-direkt {
    flex-basis: 100%;
    margin-left: 0;
  }
  .kontakt-direkt__btn.btn--ghost {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* /kontakt: Formular über die volle Breite (Seitenspalte entfällt),
   ab 1000 px stehen die Felder in zwei Spalten nebeneinander. */
.anfrage__raster--breit {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .anfrage__raster--breit .aform {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-m);
    align-items: end;
  }
  .anfrage__raster--breit .aform > .field--full,
  .anfrage__raster--breit .aform > .consent,
  .anfrage__raster--breit .aform > .form-foot,
  .anfrage__raster--breit .aform > .form-state {
    grid-column: 1 / -1;
  }
}

/* ---------- Webdesign ---------- */
.incl__oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l) var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-xl);
}
.incl__oben .incl__head {
  margin-bottom: 0;
}
.details__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  grid-template-areas:
    "bild kopf"
    "bild listen";
  grid-template-rows: auto 1fr;
  gap: var(--space-l) var(--space-xl);
  align-items: start;
}
.details__bild {
  grid-area: bild;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  position: sticky;
  top: 7rem;
}
.details__bild .rahmen--handy {
  --rahmen-handy-breite: 17.5rem;
}
.details__bild figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}
.details__kopf {
  grid-area: kopf;
}
.details__listen {
  grid-area: listen;
  min-width: 0;
}
.details__kopf .lead {
  margin-top: var(--space-s);
}
.details__h3 {
  margin: var(--space-l) 0 var(--space-s);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-h4);
  color: var(--text);
}
.details .details__liste {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-m);
}
.details .conn__item span {
  max-width: 34ch;
}
@media (max-width: 880px) {
  .incl__oben,
  .details__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .details__raster {
    grid-template-areas:
      "kopf"
      "bild"
      "listen";
    grid-template-rows: auto;
  }
  .details__bild {
    position: static;
  }
}
@media (max-width: 560px) {
  .details .details__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Webdesign: Handy-Rahmen im Seitenverhaeltnis der Aufnahme (780 x 1380) — kein Anschnitt am Text */
.details__bild .rahmen--handy {
  --rahmen-ratio: 780 / 1380;
}

/* Mobil (<= 880 px): Deckung von unten bis ueber die Textzone — die Wortmarke
   des Markenclips steht sonst hinter Eyebrow und H1. Oben bleibt der Clip. */
@media (max-width: 880px) {
  .phero--kopf .hero__scrim {
    background: linear-gradient(
      to top,
      rgb(var(--rgb-scrim) / 0.96) 0%,
      rgb(var(--rgb-scrim) / 0.9) 50%,
      rgb(var(--rgb-scrim) / 0.62) 64%,
      rgb(var(--rgb-scrim) / 0.32) 82%,
      rgb(var(--rgb-scrim) / 0.26) 100%
    );
  }
}

/* ============================================================
   W7 · 27.09.2026 — Unterseiten-Köpfe (.phero--kopf)
   1) Das Markenvideo (hero-home) trägt KI-Schein-Schrift („Webdesign-Pakee",
      Augen-Tor 26.09., 20+ rote Befunde). Unscharf + gedimmt ist davon nichts
      mehr lesbar. Die Vergrößerung wächst mit (1,28 → 1,34 quer, 1,25 → 1,31
      hochkant), damit der weiche Unschärfe-Rand (≈ 2 × 7 px) außerhalb liegt —
      vorher endete die linke/obere Videokante genau an der Kopfkante. Mobil
      bleibt die Unterkante bündig (s. u.).
   2) Themenfeste dunkle Bühne wie /dashboard (Fremd-Blick Y2, GESETZ Kap. 11:
      Bühnen behalten helle Schrift). Im Hellen lag der Clip milchig unter
      weißem Schleier (Lead 3,85:1, Knopf 3,9:1). Die Theme-Tokens werden im
      Kopf lokal auf die festen Bühnen-Töne gesetzt — jeder Schleier, Halo und
      Text darin folgt damit von selbst. --rgb-scrim = --dunkel-fest (#0a0716)
      als Kanäle.
   3) Der Kopf liegt in BEIDEN Themen über der festen .vignette (z-index 88):
      im Hellen hellte sie Knopf und Schrift auf, im Dunklen dimmte sie den
      Kopf-Knopf um 30 % (rgb 96,30,160 statt 138,41,226 — W8, Fremd-Blick 2 N1).
      Der Knopf trägt in beiden Themen das feste Bühnen-Violett.
   ============================================================ */
.phero--kopf {
  --rgb-scrim: 10 7 22;
  --text: var(--kalk-fest);
  --muted: var(--meta-fest);
  --faint: var(--meta-fest);
  --kopf-akzent: color-mix(in srgb, var(--kalk-fest) 52%, var(--violet) 48%);
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
}
.phero--kopf {
  z-index: 89;
}
.phero--kopf .btn--primary {
  --btn-bg: var(--violet-fest);
}
.phero--kopf .kopf__video {
  filter: blur(7px) brightness(0.55) saturate(1.1);
}
@media (min-width: 900px) {
  .phero--kopf .kopf__video {
    transform: scale(1.34) translateX(10.9%);
  }
}
@media (max-width: 899px) {
  /* Unterkante bündig mit der Kopfkante: 1,31 × (0,5 − 0,1183) = 0,5. Ragt das
     (transformierte) Video unten heraus, zählt main.js es als Medien-Hindernis
     und schiebt die Anschluss-Spur unter die erste Eyebrow (gemessen 390 px,
     /preise + /werk). Der weiche Unschärfe-Rand unten liegt unter dem fast
     deckenden Schleier (0,96). */
  .phero--kopf .kopf__video {
    transform: scale(1.31) translateY(-11.83%);
  }
}
:root .phero--kopf .phero__title,
:root[data-theme="light"] .phero--kopf .phero__title {
  color: var(--kalk-fest);
}
:root .phero--kopf .phero__title em,
:root .phero--kopf .phero__title .accent,
:root[data-theme="light"] .phero--kopf .phero__title em,
:root[data-theme="light"] .phero--kopf .phero__title .accent {
  color: var(--kopf-akzent);
}
:root .phero--kopf .phero__eyebrow,
:root .phero--kopf .phero__lead,
:root[data-theme="light"] .phero--kopf .phero__eyebrow,
:root[data-theme="light"] .phero--kopf .phero__lead {
  color: var(--meta-fest);
}
:root[data-theme="light"] .phero--kopf .phero__eyebrow,
:root[data-theme="light"] .phero--kopf .phero__title,
:root[data-theme="light"] .phero--kopf .phero__lead {
  text-shadow:
    0 0 12px rgb(var(--rgb-scrim) / 0.85),
    0 0 34px rgb(var(--rgb-scrim) / 0.7);
}
@media (min-width: 881px) {
  :root[data-theme="light"] .phero--kopf .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgb(var(--rgb-scrim) / 0.92) 0%,
        rgb(var(--rgb-scrim) / 0.74) 26%,
        rgb(var(--rgb-scrim) / 0.3) 52%,
        rgb(var(--rgb-scrim) / 0) 76%
      ),
      linear-gradient(
        100deg,
        rgb(var(--rgb-scrim) / 0.8) 0%,
        rgb(var(--rgb-scrim) / 0.62) 38%,
        rgb(var(--rgb-scrim) / 0.2) 60%,
        rgb(var(--rgb-scrim) / 0) 76%
      );
  }
}
@media (max-width: 880px) {
  :root[data-theme="light"] .phero--kopf .hero__scrim {
    background: linear-gradient(
      to top,
      rgb(var(--rgb-scrim) / 0.96) 0%,
      rgb(var(--rgb-scrim) / 0.9) 50%,
      rgb(var(--rgb-scrim) / 0.62) 64%,
      rgb(var(--rgb-scrim) / 0.32) 82%,
      rgb(var(--rgb-scrim) / 0.26) 100%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .phero--kopf .kopf__video {
    filter: blur(7px) brightness(0.55) saturate(1.1);
  }
}

/* W7 · 27.09.2026 — Karte (GESETZ Kap. 10: die Karte ist DA). Der Google-iframe
   lädt (gemessen: Kacheln nach Scroll + 5 s sichtbar, 0 Fehler), ist aber bis
   dahin durchsichtig — und in Vollseiten-Aufnahmen malt Chromium fremde
   iframes außerhalb des Fensters gar nicht (gemessen: Luma 6/9/18 = Seitengrund
   statt Karte). Darum trägt der iframe selbst einen gezeichneten Lageplan mit
   Stecknadel als Grund: Er steht sofort, bis die echte Karte ihn überdeckt. */
iframe.karte__rahmen,
iframe.st-karte__rahmen {
  background-color: color-mix(in srgb, var(--meta-fest) 42%, var(--kalk-fest));
  background-image:
    radial-gradient(circle at 50% 46%, var(--kalk-fest) 0 5px, var(--violet) 6px 13px, transparent 14px),
    radial-gradient(ellipse 5px 16px at 50% calc(46% + 12px), var(--violet) 0 70%, transparent 72%),
    linear-gradient(104deg, transparent 0 47%, var(--kalk-fest) 47% 49.2%, transparent 49.2%),
    linear-gradient(8deg, transparent 0 58%, var(--kalk-fest) 58% 59.6%, transparent 59.6%),
    repeating-linear-gradient(12deg, transparent 0 86px, color-mix(in srgb, var(--kalk-fest) 88%, transparent) 86px 91px),
    repeating-linear-gradient(-78deg, transparent 0 118px, color-mix(in srgb, var(--kalk-fest) 88%, transparent) 118px 123px);
}

/* W7 · 27.09.2026 — Hörproben (Augen-Tor: „--" und flache Linie wirkten wie
   Platzhalter). Die Dauer steht jetzt fest im HTML (aus den MP3s gemessen,
   pages.js überschreibt sie beim Laden), und die Leiste zeigt eine ruhige
   Wellenform: Maske auf dem Balken, Spur grau, Fortschritt im Verlauf. */
.ademo__bar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 22' preserveAspectRatio='none'%3E%3Crect x='0.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='4.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='8.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='12.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='16.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='20.5' y='5.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='24.5' y='5.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='28.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='32.5' y='3.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='36.5' y='2.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='40.5' y='4.5' width='2.4' height='13' rx='1.2'/%3E%3Crect x='44.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='48.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='52.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='56.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='60.5' y='3.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='64.5' y='2.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='68.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='72.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='76.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='80.5' y='4.5' width='2.4' height='13' rx='1.2'/%3E%3Crect x='84.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='88.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='92.5' y='4.5' width='2.4' height='13' rx='1.2'/%3E%3Crect x='96.5' y='6.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='100.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='104.5' y='1.5' width='2.4' height='19' rx='1.2'/%3E%3Crect x='108.5' y='4.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='112.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='116.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='120.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='124.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3Crect x='128.5' y='6.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='132.5' y='2.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='136.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='140.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='144.5' y='4.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='148.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='152.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='156.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3Crect x='160.5' y='2.5' width='2.4' height='17' rx='1.2'/%3E%3Crect x='164.5' y='4.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='168.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='172.5' y='2.5' width='2.4' height='17' rx='1.2'/%3E%3Crect x='176.5' y='3.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='180.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='184.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3Crect x='188.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 22' preserveAspectRatio='none'%3E%3Crect x='0.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='4.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='8.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='12.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='16.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='20.5' y='5.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='24.5' y='5.0' width='2.4' height='12' rx='1.2'/%3E%3Crect x='28.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='32.5' y='3.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='36.5' y='2.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='40.5' y='4.5' width='2.4' height='13' rx='1.2'/%3E%3Crect x='44.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='48.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='52.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='56.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='60.5' y='3.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='64.5' y='2.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='68.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='72.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='76.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='80.5' y='4.5' width='2.4' height='13' rx='1.2'/%3E%3Crect x='84.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='88.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='92.5' y='4.5' width='2.4' height='13' rx='1.2'/%3E%3Crect x='96.5' y='6.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='100.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='104.5' y='1.5' width='2.4' height='19' rx='1.2'/%3E%3Crect x='108.5' y='4.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='112.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='116.5' y='7.0' width='2.4' height='8' rx='1.2'/%3E%3Crect x='120.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='124.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3Crect x='128.5' y='6.0' width='2.4' height='10' rx='1.2'/%3E%3Crect x='132.5' y='2.0' width='2.4' height='18' rx='1.2'/%3E%3Crect x='136.5' y='3.5' width='2.4' height='15' rx='1.2'/%3E%3Crect x='140.5' y='6.5' width='2.4' height='9' rx='1.2'/%3E%3Crect x='144.5' y='4.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='148.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='152.5' y='8.5' width='2.4' height='5' rx='1.2'/%3E%3Crect x='156.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3Crect x='160.5' y='2.5' width='2.4' height='17' rx='1.2'/%3E%3Crect x='164.5' y='4.0' width='2.4' height='14' rx='1.2'/%3E%3Crect x='168.5' y='8.0' width='2.4' height='6' rx='1.2'/%3E%3Crect x='172.5' y='2.5' width='2.4' height='17' rx='1.2'/%3E%3Crect x='176.5' y='3.0' width='2.4' height='16' rx='1.2'/%3E%3Crect x='180.5' y='5.5' width='2.4' height='11' rx='1.2'/%3E%3Crect x='184.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3Crect x='188.5' y='7.5' width='2.4' height='7' rx='1.2'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ademo__bar::before,
.ademo__fill {
  top: 0;
  height: 100%;
  border-radius: 0;
}
.ademo__time {
  color: var(--muted);
}

/* W7 · 27.09.2026 — /zahlung: zwischen „Dann kommt die Rechnung" und
   „Kurz beantwortet" standen 330 px Leere (2 × Sektionsabstand 160 px,
   Augen-Tor gelb). Die Fragen gehören zum Ablauf — Abstand ≤ 4 rem. */
.section.pay {
  padding-bottom: 1rem;
}
.section.pay + .section.faq {
  padding-top: 1.75rem;
}
@media (max-width: 600px) {
  .section.pay {
    padding-bottom: 0.25rem;
  }
  .section.pay + .section.faq {
    padding-top: 0.5rem;
  }
}

/* ============================================================
   Korrektur Hamada 29.09.2026, 03:52 („die anderen Unterseiten — da drauf ist
   eine Schicht, die weg gemacht werden soll"): Unterseiten-Köpfe ohne
   Unschärfe, ohne Abdunkelung, ohne flächigen Schleier. Es bleibt nur ein
   Schatten direkt hinter dem Text unten links; der Rest zeigt den Clip klar.
   Ersetzt den Blur/Dimm-Filter aus W7 (27.09.) in beiden Themen.
   ============================================================ */
:root .phero--kopf .kopf__video,
:root[data-theme="light"] .phero--kopf .kopf__video {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  :root .phero--kopf .kopf__video {
    filter: none;
  }
}
:root .phero--kopf .hero__scrim,
:root[data-theme="light"] .phero--kopf .hero__scrim {
  background: radial-gradient(
    ellipse 60% 62% at 0% 100%,
    rgb(var(--rgb-scrim) / 0.72) 0%,
    rgb(var(--rgb-scrim) / 0.42) 50%,
    rgb(var(--rgb-scrim) / 0) 100%
  );
}
@media (max-width: 880px) {
  :root .phero--kopf .hero__scrim,
  :root[data-theme="light"] .phero--kopf .hero__scrim {
    background: linear-gradient(
      to top,
      rgb(var(--rgb-scrim) / 0.86) 0%,
      rgb(var(--rgb-scrim) / 0.74) 44%,
      rgb(var(--rgb-scrim) / 0.3) 54%,
      rgb(var(--rgb-scrim) / 0) 64%
    );
  }
}
/* Ohne Unschärfe steht der Schriftzug des Clips klar: quer 3 % weiter nach
   rechts (Linie vor „WEBSEITEN“ berührte die H1 auf /werk), hochkant etwas
   höher (Unterzeile stand auf der Eyebrow). Unterkante bleibt bündig:
   1,4 × (0,5 − 0,1429) = 0,5. */
@media (min-width: 900px) {
  .phero--kopf .kopf__video {
    transform: scale(1.34) translateX(14%);
  }
}
@media (max-width: 899px) {
  .phero--kopf .kopf__video {
    transform: scale(1.4) translateY(-14.29%);
  }
}

/* ============================================================
   /partner (Hamada 29.09.2026, 17:18) — Provisions-Staffel + Formular-Zwischentitel
   ============================================================ */
.partner-staffel__liste {
  margin: var(--space-s) 0 var(--space-s);
  display: grid;
  gap: 0.4rem;
}
.partner-staffel__liste > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(138, 41, 226, 0.25);
}
.partner-staffel__liste > div:last-child {
  border-bottom: 0;
}
.partner-staffel__liste dt {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}
.partner-staffel__liste dt small {
  margin-left: 0.4rem;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--muted);
}
.partner-staffel__liste dd {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--violet-soft);
  white-space: nowrap;
}
.partner-form__zwischen {
  margin: var(--space-s) 0 0.2rem;
  font-weight: 600;
  font-size: var(--fs-eyebrow, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.aform .honey + .partner-form__zwischen {
  margin-top: 0;
}