/* =========================================================================
   Pinka Fux – site.css
   Art Direction: "Editorial Signal"
   Warmes Papier, tiefes Ink, Markenpink als Signalfarbe. Hairline-Raster statt
   Schatten, Display-Grotesk gegen ruhige Sans, Mono für Daten.
   ========================================================================= */

/* ------------------------------------------------------------------ Fonts */
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque-vf.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Mono";
  src: url("/fonts/space-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Mono";
  src: url("/fonts/space-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}

/* ------------------------------------------------------------------ Token
   Farbsystem der Marke: der Verlauf Orange - Rot - Pink traegt alle Akzente,
   dazu warmes Papier und tiefes Ink fuer Flaechen.
   ------------------------------------------------------------------------ */
:root {
  --ink:       #0B0B0F;
  --ink-80:    #3F3F46;
  --ink-60:    #6B7280;
  --ink-40:    #9CA3AF;
  --paper:     #FEFEFE;
  --paper-2:   #FDFAF6;
  --paper-3:   #FFF1F5;
  --white:     #FFFFFF;

  --orange:    #F97316;
  --red:       #EF4444;
  --pink:      #EC4899;
  --coral:     #F43F5E;
  --yellow:    #FBBF24;
  --pink-deep: #BE185D;
  --pink-soft: #F9A8D4;

  --grad:      linear-gradient(135deg, #F97316 0%, #EF4444 50%, #EC4899 100%);
  /* Derselbe Verlauf, eine Stufe satter - für Flächen, die weißen Text tragen.
     Der helle Verlauf oben erreicht mit Weiß nur 2,8:1 (orange) bis 3,8:1 (rot);
     nötig sind 4,5:1. Diese Stützfarben liegen bei 5,2 / 4,8 / 4,6:1.
     Der helle bleibt für Linien, Punkte, Rahmen und Verlaufstext. */
  --grad-tx:   linear-gradient(135deg, #C2410C 0%, #DC2626 50%, #DB2777 100%);
  --grad-soft: linear-gradient(135deg, rgba(249,115,22,.10) 0%, rgba(239,68,68,.10) 50%, rgba(236,72,153,.10) 100%);
  --grad-anim: linear-gradient(to right, #F97316, #EF4444, #EC4899, #FBBF24, #F97316);
  /* Fuer Text: jeder Farbstopp erreicht mindestens 4,5:1 auf Papier.
     Der helle Verlauf oben faellt auf 1,66:1 ab (Gelb) und ist nur fuer
     Flaechen wie den Fortschrittsbalken gedacht. Dritte Wiederholung
     desselben Fehlers - siehe --grad und --grad-tx. */
  --grad-anim-tx: linear-gradient(to right, #C2410C, #DC2626, #DB2777, #B45309, #C2410C);

  --line:        rgba(11, 11, 15, .08);
  --line-strong: rgba(11, 11, 15, .14);
  --line-light:  rgba(254, 254, 254, .18);

  --shadow-soft:  0 6px 20px -12px rgba(11, 11, 15, .25);
  --shadow-card:  0 20px 45px -30px rgba(11, 11, 15, .28);
  --shadow-lift:  0 24px 50px -20px rgba(239, 68, 68, .28);

  --display: "Bricolage", "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Mono", "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1220px;
  --narrow: 760px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --sec: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 1.5rem;
  --radius-lg: 2rem;
  --radius-xl: 2.5rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* feine Papierkörnung */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: .18em;
    text-decoration-thickness: 1px; transition: color .2s var(--ease); }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--pink-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ----------------------------------------------------------------- Layout */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.wrap--narrow { width: min(100% - 2.5rem, var(--narrow)); }
@media (min-width: 640px) { .wrap { width: min(100% - 4rem, var(--wrap)); }
  .wrap--narrow { width: min(100% - 4rem, var(--narrow)); } }

.section { padding-block: var(--sec); border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--ink); color: var(--paper); border-top: 0; }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .eyebrow { color: var(--pink-soft); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.h1 { font-size: clamp(2.35rem, 1.5rem + 4.2vw, 4.6rem); }
.h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.9rem); }
.h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
.lead {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-80);
  max-width: 62ch;
}
.section--dark .lead { color: color-mix(in srgb, var(--paper) 78%, transparent); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink);
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent);
}
.mark { color: var(--pink-deep); }
.more { margin-top: 2.25rem; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 1.9rem;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 1.02rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary {
  background: var(--grad-tx); color: var(--white); border-color: transparent;
  box-shadow: 0 12px 26px -14px rgba(239, 68, 68, .55);
}
.btn--primary:hover {
  color: var(--white); transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: var(--shadow-lift);
}
.btn--ghost {
  background: var(--white); color: var(--ink); border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.btn--ghost:hover { color: var(--ink); border-color: var(--pink); transform: translateY(-2px); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: var(--line-light); }
.btn--ghost-light:hover { color: var(--white); border-color: var(--white); transform: translateY(-2px); }
.btn--sm { padding: .68rem 1.25rem; font-size: .92rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn-row--center { justify-content: center; }
@media (max-width: 420px) { .btn { font-size: .92rem; padding: .9rem 1.35rem; } }

.link-arrow {
  font-weight: 700; text-decoration: none; color: var(--pink-deep);
  border-bottom: 2px solid var(--pink); padding-bottom: 2px;
}
.link-arrow::after { content: " →"; transition: margin-left .2s var(--ease); display: inline-block; }
.link-arrow:hover::after { margin-left: .25rem; }

/* Markenverlauf im Text */
.mark {
  background: var(--grad-anim-tx); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradMove 6s linear infinite;
}
@keyframes gradMove { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .mark { animation: none; } }

/* ----------------------------------------------------------------- Header */
.head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.head__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
  padding-top: env(safe-area-inset-top, 0px);
}
.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 124px; height: auto; }
.nav { margin-left: auto; display: none; }
.nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .96rem;
  padding: .35rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--pink); transition: right .25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { right: 0; }
.head__actions { display: none; align-items: center; gap: 1rem; }
.head__phone { font-family: var(--mono); font-size: .86rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.head__phone:hover { color: var(--pink-deep); }

.burger {
  margin-left: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px;
  background: none; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobilenav {
  border-top: 1px solid var(--line);
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
}
.mobilenav ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .25rem; }
.mobilenav a {
  display: block; padding: .8rem 0; font-family: var(--display); font-size: 1.35rem;
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1180px) {
  .nav, .head__actions { display: flex; }
  .burger, .mobilenav { display: none !important; }
}

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; z-index: 0;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  right: -18vw; top: -22vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--pink) 26%, transparent) 0%, transparent 62%);
  filter: blur(18px);
  pointer-events: none;
}
.hero__inner {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__title {
  font-size: clamp(2.7rem, 1.2rem + 7.4vw, 6.2rem);
  letter-spacing: -.04em;
  margin-bottom: .4em;
}
.hero__lead { font-size: clamp(1.06rem, 1rem + .5vw, 1.32rem); color: var(--ink-80); max-width: 54ch; line-height: 1.55; }
.hero__meta {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--ink-60); margin-top: 1.5rem;
}
.hero__panel {
  border: 1px solid var(--line-strong);
  background: var(--white);
  padding: clamp(1.4rem, 3vw, 2rem);
  align-self: start;
  position: relative;
}
.hero__panel::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--pink);
}
.panel__label {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-60); margin-bottom: 1rem;
}
.panel__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.panel__table th {
  text-align: left; font-weight: 500; font-family: var(--body);
  padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-80);
}
.panel__table td {
  text-align: right; font-family: var(--mono); font-weight: 700; font-size: 1.02rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.panel__note { font-size: .82rem; color: var(--ink-60); margin-top: 1rem; line-height: 1.5; }
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .85fr); align-items: center; }
}

/* ---------------------------------------------------------------- Marquee */
.marquee {
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee__row {
  display: flex; gap: 3rem; list-style: none; margin: 0; padding: 0 1.5rem;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--ink-60); letter-spacing: -.02em; white-space: nowrap;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ------------------------------------------------------------------ Facts */
.facts-strip {
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.fact { background: var(--paper); padding: clamp(1.25rem, 3vw, 2rem); }
.fact__value {
  font-family: var(--display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 0 0 .35rem;
}
.fact__label { font-weight: 600; margin: 0 0 .35rem; }
.fact__note { font-size: .86rem; color: var(--ink-60); margin: 0; line-height: 1.45; }
@media (min-width: 620px) { .facts-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts-strip { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------------ Karten */
.grid { display: grid; gap: 1.25rem; }
.grid--cards { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line-strong);
  text-decoration: none; color: inherit;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px;
  background: var(--pink); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--ink); }
.card:hover::before { transform: scaleX(1); }
/* Icon-Kachel oben in der Leistungskarte. Der Sinn ist nicht Schmuck: Ein
   Raster aus zehn reinen Textkarten liest niemand, ein Raster mit Symbolen
   überfliegt man. Beim Überfahren dreht die Kachel auf den Markenverlauf –
   das ist der einzige Bewegungsmoment und er braucht kein JavaScript. */
.card__icon {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; margin-bottom: 1rem;
  border-radius: .95rem;
  background: var(--paper-3); color: var(--pink-deep);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.card__icon:empty { display: none; }
.card__glyph { width: 1.45rem; height: 1.45rem; display: block; }
.card:hover .card__icon { background: var(--grad-tx); color: var(--white); }

.card__eyebrow {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-60); margin-bottom: .9rem;
}
.card__title { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin-bottom: .6rem; }
.card__text { font-size: .95rem; color: var(--ink-80); margin-bottom: 1.25rem; }
.card__meta {
  font-family: var(--mono); font-size: .8rem; color: var(--pink-deep);
  margin-top: auto; font-weight: 700;
}
.card__arrow {
  position: absolute; right: 1.4rem; bottom: 1.3rem; font-size: 1.1rem;
  /* war --ink-40 mit 2,5:1 - als einziges Weiter-Signal der Karte zu blass */
  color: var(--ink-60); transition: transform .22s var(--ease), color .22s var(--ease);
}
.card:hover .card__arrow { transform: translateX(4px); color: var(--pink-deep); }

/* -------------------------------------------------------------- Referenzen */
.grid--refs { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--refs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--refs { grid-template-columns: repeat(3, 1fr); } }
.ref {
  border-top: 2px solid var(--ink);
  padding-top: 1.25rem;
}
.ref__name { font-size: 1.3rem; margin-bottom: .25rem; }
.ref__sub { font-size: .92rem; color: var(--ink-60); margin-bottom: .9rem; }
.ref__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.ref__tags li {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .25rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-60);
}
.ref__result { font-size: .93rem; color: var(--ink-80); margin-bottom: .6rem; }
.ref__link { font-family: var(--mono); font-size: .76rem; color: var(--pink-deep); }

/* ------------------------------------------------------------------ Zitat */
.section--quote { background: var(--pink-wash); }
.quote { margin: 0; text-align: center; }
.quote__stars { color: var(--pink); letter-spacing: .3em; font-size: 1.1rem; margin-bottom: 1.5rem; }
.quote blockquote { margin: 0 0 1.5rem; }
.quote blockquote p {
  font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + 1.4vw, 2.1rem);
  line-height: 1.32; letter-spacing: -.025em; font-weight: 600;
}
.quote figcaption { font-family: var(--mono); font-size: .8rem; color: var(--ink-60); letter-spacing: .06em; }

/* -------------------------------------------------------------- Versprechen */
.grid--promises { grid-template-columns: 1fr; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
@media (min-width: 720px) { .grid--promises { grid-template-columns: repeat(2, 1fr); } }
.promise { background: var(--ink); padding: clamp(1.4rem, 3vw, 2.25rem); }
.promise h3 { font-size: 1.28rem; margin-bottom: .6rem; }
.promise p { color: color-mix(in srgb, var(--paper) 72%, transparent); font-size: .96rem; margin: 0; }
.section:not(.section--dark) .grid--promises { background: var(--line); border-color: var(--line); }
.section:not(.section--dark) .promise { background: var(--white); }
.section:not(.section--dark) .promise p { color: var(--ink-80); }

/* ------------------------------------------------------------------ Steps */
.section--steps { background: var(--paper-2); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  padding: 1.6rem 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--mono); font-size: .82rem; color: var(--pink-deep); font-weight: 700;
  padding-top: .35rem;
}
.step__title { font-size: 1.35rem; margin-bottom: .4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.step__meta {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-60); font-weight: 400; letter-spacing: .1em;
}
.step__body p { color: var(--ink-80); margin: 0; max-width: 68ch; }
@media (min-width: 860px) { .step { grid-template-columns: 4rem 1fr; gap: 2rem; } }

/* ------------------------------------------------------------- Split-Layout */
.wrap--split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .wrap--split { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); } }
.split__side { align-self: start; position: sticky; top: 96px; }
@media (max-width: 899px) { .split__side { position: static; } }
.side-cta { margin-top: 1.25rem; }
.side-cta .btn { width: 100%; }

.box { border: 1px solid var(--line-strong); background: var(--white); padding: clamp(1.25rem, 3vw, 1.75rem); }
.box__title { font-size: 1.2rem; margin-bottom: .8rem; }
.box__note { font-size: .85rem; color: var(--ink-60); margin-top: 1rem; }

.problems { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.problems li {
  padding: .9rem 0 .9rem 2rem; border-bottom: 1px solid var(--line); position: relative;
  color: var(--ink-80);
}
.problems li::before {
  content: "—"; position: absolute; left: 0; top: .9rem; color: var(--pink); font-weight: 700;
}
.after-list { font-size: .95rem; color: var(--ink-60); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.checks li { position: relative; padding-left: 1.75rem; font-size: .96rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 9px; height: 5px; border-left: 1.8px solid var(--pink-deep); border-bottom: 1.8px solid var(--pink-deep);
  transform: rotate(-45deg);
}
.section--dark .checks li::before { border-color: var(--pink); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.chips li {
  font-family: var(--mono); font-size: .76rem; padding: .35rem .75rem;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-60);
}

/* ------------------------------------------------------------ Antwortbox */
.answer {
  border-left: 3px solid var(--pink);
  background: var(--white);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 0;
  max-width: 68ch;
}
.answer__label {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pink-deep); margin: 0 0 .5rem;
}
.answer__text { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }

/* --------------------------------------------------------------- Umfänge */
.grid--inc { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--inc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid--inc:not(.grid--inc-tight) { grid-template-columns: repeat(3, 1fr); } }
.inc { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.inc h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.inc p { font-size: .93rem; color: var(--ink-80); margin: 0; }

.grid--why { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--why { grid-template-columns: repeat(3, 1fr); } }
.why { border-top: 2px solid var(--pink); padding-top: 1.1rem; }
.why__head { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 .4rem; }
.why__text { font-size: .93rem; color: var(--ink-80); margin: 0; }

/* --------------------------------------------------------------- Tabellen */
.table-wrap { overflow-x: auto; margin: 1.75rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption {
  text-align: left; font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-60); padding-bottom: .9rem;
}
.facts th, .facts td { padding: .8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { text-align: left; font-weight: 500; color: var(--ink-60); width: 46%; }
.facts td { font-weight: 600; }
.data th, .data td { padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data thead th {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-60); border-bottom: 1.5px solid var(--ink); font-weight: 400;
}
.data tbody tr:hover { background: color-mix(in srgb, var(--pink) 4%, transparent); }
.data .kw { font-family: var(--mono); font-size: .88rem; }
.data .num { font-family: var(--mono); font-weight: 700; }
.data--market td:first-child { min-width: 15rem; }
.table-note { font-size: .92rem; color: var(--ink-80); max-width: 68ch; }
.table-source { font-size: .8rem; color: var(--ink-60); font-family: var(--mono); line-height: 1.5; }

/* -------------------------------------------------------------- Preise */
.grid--prices { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 680px) { .grid--prices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid--prices { grid-template-columns: repeat(4, 1fr); } }
.price {
  border: 1px solid var(--line-strong); background: var(--white);
  padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; position: relative;
}
.price--featured { border: 2px solid var(--ink); }
.price__badge {
  position: absolute; top: -.75rem; left: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--pink); color: var(--ink); font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .1em; padding: .3rem .7rem; font-weight: 700;
}
.price__name { font-size: 1.3rem; margin-bottom: .5rem; }
.price__value {
  font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -.035em;
  line-height: 1.1; margin: 0 0 .5rem;
}
.price__value span { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 400;
  letter-spacing: .08em; color: var(--ink-60); text-transform: uppercase; margin-top: .3rem; }
.price__for { font-size: .9rem; color: var(--ink-60); margin-bottom: 1.25rem; }
.price .checks { margin-bottom: 1.75rem; }
.price .btn { margin-top: auto; }
.price-note { font-size: .88rem; color: var(--ink-60); margin-top: 2rem; max-width: 70ch; }

/* --------------------------------------------------------------- Personen */
.grid--people { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--people { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--people { grid-template-columns: repeat(3, 1fr); } }
.person { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.person__name { font-size: 1.4rem; margin-bottom: .1rem; }
.person__role {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pink-deep); margin-bottom: .8rem;
}
.person__text { font-size: .93rem; color: var(--ink-80); margin: 0; }

.grid--two { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--two { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------- FAQ */
.section--faq { background: var(--paper-2); }
.faq { border-top: 1px solid var(--line-strong); margin-top: 2rem; }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem);
  font-weight: 600; letter-spacing: -.02em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .25rem; position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--pink-deep); transition: transform .25s var(--ease);
}
.faq__icon::before { left: 0; top: 9px; width: 20px; height: 1.8px; }
.faq__icon::after { left: 9px; top: 0; width: 1.8px; height: 20px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__answer { padding-bottom: 1.5rem; max-width: 72ch; }
.faq__answer p { color: var(--ink-80); margin: 0; }

/* -------------------------------------------------------------- CTA-Band */
.band { background: var(--ink); color: var(--paper); padding-block: clamp(2.5rem, 5vw, 4rem); }
.band__inner { display: grid; gap: 1.5rem; align-items: center; }
.band__text {
  font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.2; margin: 0; max-width: 30ch;
}
.band .btn-row { margin-top: 0; }
@media (min-width: 900px) { .band__inner { grid-template-columns: 1fr auto; } }

/* --------------------------------------------------------------- Kontakt */
.section--contact { border-top: 1px solid var(--line); }
.contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.contact__list { margin: 2rem 0 1.5rem; display: grid; gap: 1rem; }
.contact__list div { display: grid; gap: .15rem; }
.contact__list dt {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-60);
}
.contact__list dd { margin: 0; font-size: 1.05rem; font-weight: 500; }
.contact__list a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--pink); }
.contact__list a:hover { color: var(--pink-deep); }
.hours { width: auto; font-size: .92rem; margin-bottom: 1.5rem; }
.hours th { text-align: left; font-weight: 500; color: var(--ink-60); padding: .3rem 1.5rem .3rem 0; }
.hours td { font-family: var(--mono); font-size: .88rem; padding: .3rem 0; }
.contact__person { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.contact__person-name { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin: 0; }
.contact__person-role { font-size: .88rem; color: var(--ink-60); margin: 0; }
.phone-link { font-family: var(--mono); }

/* -------------------------------------------------------------- Formular */
.form {
  background: var(--white); border: 1px solid var(--line-strong);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}
.form__hp { position: absolute; left: -9999px; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: repeat(2, 1fr); } }
.field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block; font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-60); margin-bottom: .4rem;
}
.field__label em { color: var(--pink-deep); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem; font-family: var(--body); font-size: 1rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--pink-deep); outline-offset: 1px;
  border-color: var(--pink-deep); background: var(--white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-60); }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--ink-60); margin: .5rem 0 1.5rem; }
.consent input { margin-top: .15rem; accent-color: var(--pink-deep); width: 22px; height: 22px; flex: 0 0 auto; }
.consent em { color: var(--pink-deep); font-style: normal; }
.form__note { font-size: .82rem; color: var(--ink-60); margin: 1rem 0 0; text-align: center; }
.form__status { font-size: .92rem; margin: 1rem 0 0; text-align: center; min-height: 1.4em; }
.form__status.is-error { color: #B3261E; }
.form__status.is-ok { color: var(--petrol); }
.form--compact .field { margin-bottom: .75rem; }

/* ---------------------------------------------------------------- Crumbs */
.crumbs { border-bottom: 1px solid var(--line); padding-block: .9rem; font-size: .84rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; color: var(--ink-60); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ink-40); }
.crumbs a { color: var(--ink-60); text-decoration: none; }
.crumbs a:hover { color: var(--pink-deep); }

/* -------------------------------------------------------------- Pagehead */
.pagehead { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.pagehead--center { text-align: center; }
.pagehead--center .lead, .pagehead--center .eyebrow { margin-inline: auto; }
.pagehead--center .eyebrow { justify-content: center; }
.pagehead--article { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.byline { font-family: var(--mono); font-size: .78rem; color: var(--ink-60); margin-top: 1.5rem; }
.thanks-mark {
  width: 64px; height: 64px; margin: 0 auto 1.75rem; display: grid; place-content: center;
  border-radius: 50%; background: var(--pink); color: var(--ink); font-size: 1.9rem; font-weight: 700;
}

/* ------------------------------------------------------------------ Prosa */
.section--prose { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.section--prose h2 { margin-top: 2.75rem; }
.section--prose h3 { margin-top: 2rem; }
.section--prose h2:first-child { margin-top: 0; }
.section--prose p, .section--prose li { color: var(--ink-80); }
.bullets, .numbers { padding-left: 1.3rem; margin: 0 0 1.5rem; display: grid; gap: .55rem; }
.bullets li::marker { color: var(--pink); }
.numbers li::marker { font-family: var(--mono); font-size: .9em; color: var(--pink-deep); font-weight: 700; }
.note {
  border-left: 3px solid var(--pink); background: var(--pink-wash);
  padding: 1.15rem 1.4rem; margin: 2rem 0;
}
.note p { margin: 0; color: var(--ink); }
.pullquote { margin: 2.5rem 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 1.75rem 0; }
.pullquote blockquote { margin: 0 0 .75rem; }
.pullquote p { font-family: var(--display); font-size: 1.45rem; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.pullquote figcaption { font-family: var(--mono); font-size: .78rem; color: var(--ink-60); }
.meta-line { font-family: var(--mono); font-size: .78rem; color: var(--ink-60); margin-top: 2.5rem; }

/* ----------------------------------------------------------------- Footer */
.foot { background: var(--ink); color: color-mix(in srgb, var(--paper) 72%, transparent); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-light); }
@media (min-width: 720px) { .foot__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .foot__top { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; } }
.foot__brand img { width: 128px; }
.foot__claim { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--white);
  letter-spacing: -.025em; margin: 1.25rem 0 1.25rem; }
.foot__addr { font-style: normal; font-size: .92rem; line-height: 1.7; }
.foot__addr a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-light); }
.foot__addr a:hover { color: var(--pink-soft); }
.foot__col h2 {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--pink-soft); font-weight: 400; margin-bottom: 1rem;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.foot__col a {
  color: inherit; text-decoration: none; font-size: .9rem;
  display: inline-block; padding-block: .3rem;   /* Trefferfläche auf 24px+ */
}
.foot__col a:hover { color: var(--white); }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between;
  align-items: center; padding-top: 2rem; font-size: .84rem;
}
.foot__social, .foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.foot__social a, .foot__legal a {
  color: inherit; text-decoration: none;
  display: inline-block; padding-block: .3rem;
}
.foot__social a:hover, .foot__legal a:hover { color: var(--pink-soft); }

/* -------------------------------------------------------------- Animation */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .42s var(--ease), transform .42s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ------------------------------------------------------------------ Print */
@media print {
  .head, .foot, .band, .form, .marquee, .btn-row, .crumbs { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .section { padding-block: 1.5rem; border: 0; }
}

/* ------------------------------------------------------------------- Logo */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { width: 148px; height: auto; transition: opacity .2s var(--ease); }
.logo:hover img { opacity: .78; }
.logo--foot img { width: 156px; }
@media (max-width: 420px) { .logo img { width: 124px; } }

/* ------------------------------------------------------------- Bildbänder */
.band-img { background: var(--ink); }
.band-img figure { margin: 0; position: relative; }
.band-img__img { width: 100%; object-fit: cover; max-height: 62vh; }
.band-img__cap {
  display: flex; align-items: center; gap: .6rem;
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  padding-block: 1rem 1.4rem;
}
.band-img__cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); flex: 0 0 auto; }
@media (min-width: 640px) { .band-img__cap { width: min(100% - 4rem, var(--wrap)); } }

.figure { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.figure img { width: 100%; object-fit: cover; border: 1px solid var(--line); }
.figure figcaption {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-60);
  padding-top: .9rem; line-height: 1.5;
}
.figure--wide { max-width: 900px; }

/* ------------------------------------------------------ Ansprechpartnerin */
.contact__person { display: flex; gap: 1rem; align-items: center; }
.contact__person-img {
  width: 88px; height: auto; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--paper-2);
}
.contact__person-line { font-size: .85rem; color: var(--ink-60); margin: .35rem 0 0; }

/* ------------------------------------------------------ Formular-Hinweis */
.form__hint {
  border-left: 3px solid #B3261E; background: #FEF2F2; color: #7F1D1D;
  padding: .9rem 1.1rem; margin: 0 0 1.25rem; font-size: .92rem;
}

/* ------------------------------------------------------------------ Rollen */
.grid--roles { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--roles { grid-template-columns: repeat(3, 1fr); } }
.role { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.role__name { font-size: 1.25rem; margin-bottom: .25rem; }
.role__type {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--pink-deep); margin-bottom: .9rem;
}
.role__text { font-size: .93rem; color: var(--ink-80); margin-bottom: 1.1rem; }

/* --------------------------------------------- Feinschliff nach Prüfrunde */
/* Die Antwortbox ist das wichtigste Element für Snippets und KI-Antworten –
   sie darf sich deutlicher vom Fließtext abheben. */
.answer {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--pink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
.answer__text { font-size: 1.05rem; }
@media (min-width: 900px) { .answer { padding: 1.6rem 1.9rem; } }

/* Bildbänder etwas ruhiger einbinden */
.band-img__img { max-height: 56vh; }

/* Sticky-Sidebar nicht unter dem Header verschwinden lassen */
.split__side { top: 104px; }

/* Lange Wörter in schmalen Spalten brechen lassen */
.card__title, .ref__name, .price__name, .role__name, .step__title { overflow-wrap: anywhere; }

/* =========================================================================
   Umbau: Verkauf oben, Tiefe eingeklappt, Beweise sichtbar
   ========================================================================= */

/* --------------------------------------------------------- Hero mit Bild */
.hero__media { margin: 0; }
.hero__media img {
  width: 100%; border: 1px solid var(--line-strong);
  object-fit: cover; aspect-ratio: 16 / 10;
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
}

/* ------------------------------------------------------------ Faktenzeile */
.qfacts {
  display: grid; gap: 0; margin: 2.25rem 0 0;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}
.qfacts div { padding: 1rem 1rem 0 0; }
.qfacts dt {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-60); margin-bottom: .3rem;
}
.qfacts dd { margin: 0; font-weight: 600; font-size: .98rem; line-height: 1.3; }
@media (max-width: 560px) { .qfacts { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- Logo-Wand */
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.logo-wall__label {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-60); margin-bottom: 1.5rem;
}
/* Festes Raster: gleich grosse Zellen, Hairline-Linien dazwischen. Die
   Aussenkanten bleiben offen, damit die Wand nicht zur Tabelle wird. */
.logo-wall__list {
  display: grid; grid-template-columns: repeat(2, 1fr);
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
@media (min-width: 560px) { .logo-wall__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .logo-wall__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .logo-wall__list { grid-template-columns: repeat(6, 1fr); } }
.logo-wall__cell {
  display: grid; place-items: center;
  min-height: clamp(78px, 9vw, 104px); padding: 1rem .9rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease);
}
.logo-wall__cell:hover { background: var(--paper-3); }
.logo-wall__list img {
  height: clamp(30px, 3.4vw, 40px); width: auto; max-width: 100%;
  object-fit: contain; opacity: .85;
  transition: opacity .25s var(--ease);
}
.logo-wall__cell:hover img { opacity: 1; }
.logo-wall__word {
  font-family: var(--display); font-weight: 600; font-size: clamp(.92rem, 1.5vw, 1.05rem);
  letter-spacing: -.01em; color: var(--ink-80); text-align: center; line-height: 1.2;
}

/* ---------------------------------------------------------- Fallbeispiele */
.cases { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { border: 1px solid var(--line-strong); background: var(--white); display: flex; flex-direction: column; }
.case__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.case__body { padding: clamp(1.25rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.case__name { font-size: 1.25rem; margin-bottom: .6rem; }
/* Die harte Zahl zuerst: ein Rang ueberzeugt schneller als ein Absatz.
   Der Farbverlauf der Marke traegt sie, damit sie aus der Karte heraussticht,
   ohne eine zusaetzliche Flaeche zu brauchen. */
.case__metric { margin: 0 0 1.1rem; display: grid; gap: .15rem; }
.case__metric strong {
  font-family: var(--display); font-size: clamp(1.9rem, 4.5vw, 2.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.case__metric span {
  font-size: .82rem; line-height: 1.4; color: var(--ink-60);
  text-wrap: balance;
}
@supports not (background-clip: text) { .case__metric strong { color: var(--pink-deep); } }
.case__facts { margin: 0 0 1.25rem; display: grid; gap: .8rem; }
.case__facts div { display: grid; gap: .2rem; }
.case__facts dt {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--pink-deep);
}
.case__facts dd { margin: 0; font-size: .92rem; color: var(--ink-80); line-height: 1.5; }
.case__link {
  margin-top: auto; font-size: .88rem; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--pink); align-self: flex-start; padding-bottom: 2px;
}

/* --------------------------------------------------------------- Beweis */
.proof { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.proof__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line-strong); }
.proof__sub { font-family: var(--mono); font-size: .76rem; color: var(--ink-60); margin-bottom: 1rem; }
.proof__text { font-size: 1.08rem; color: var(--ink-80); max-width: 48ch; }

/* ------------------------------------------------------------- Zeitleiste */
.section--tl { background: var(--ink); color: var(--paper); border-top: 0; }
.section--tl .h2 { color: var(--white); }
.section--tl .eyebrow { color: var(--pink-soft); }
.tl {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 1.5rem;
}
@media (min-width: 820px) { .tl { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.tl__step { position: relative; padding-top: 2.75rem; }
.tl__step::before {
  content: ""; position: absolute; top: 1.1rem; left: 0; right: 0; height: 1px;
  background: var(--line-light);
}
.tl__num {
  position: absolute; top: 0; left: 0;
  width: 2.25rem; height: 2.25rem; display: grid; place-content: center;
  border-radius: 50%; background: var(--pink); color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: .88rem;
}
.tl__title { font-size: 1.2rem; margin-bottom: .3rem; color: var(--white); }
.tl__meta {
  display: block; font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--pink-soft); margin-bottom: .5rem;
}
.tl__text { font-size: .92rem; color: color-mix(in srgb, var(--paper) 72%, transparent); margin: 0; }

/* ------------------------------------------------------------ Kernpunkte */
.grid--core { grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .grid--core { grid-template-columns: repeat(3, 1fr); } }
.core { border-top: 3px solid var(--pink); padding-top: 1.1rem; }
.core h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.core p { font-size: .96rem; color: var(--ink-80); margin: 0; }

/* -------------------------------------------------------- Aufklappbereich */
.deep { border-bottom: 1px solid var(--line-strong); }
.deep:first-of-type { border-top: 1px solid var(--line-strong); }
.deep summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  font-weight: 600; letter-spacing: -.02em;
}
.deep summary::-webkit-details-marker { display: none; }
.deep__icon { flex: 0 0 auto; width: 20px; height: 20px; position: relative; }
.deep__icon::before, .deep__icon::after {
  content: ""; position: absolute; background: var(--pink-deep); transition: transform .25s var(--ease);
}
.deep__icon::before { left: 0; top: 9px; width: 20px; height: 1.8px; }
.deep__icon::after { left: 9px; top: 0; width: 1.8px; height: 20px; }
.deep[open] .deep__icon::after { transform: scaleY(0); }
.deep__body { padding-bottom: 1.75rem; }
.deep__intro { color: var(--ink-80); max-width: 62ch; }
.qa { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.deep__body > .qa:first-child { margin-top: 0; }
.deep__body p { color: var(--ink-80); max-width: 70ch; }

/* ------------------------------------------------------------ Preisstreifen */
.pstrips { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px) { .pstrips { grid-template-columns: repeat(4, 1fr); } }
.pstrip {
  background: var(--white); padding: clamp(1.25rem, 3vw, 1.75rem);
  text-decoration: none; color: inherit; display: grid; gap: .3rem;
  transition: background-color .2s var(--ease);
}
.pstrip:hover { background: var(--pink-wash); color: inherit; }
.pstrip__name { font-weight: 600; font-size: .95rem; }
.pstrip__price {
  font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
}
.pstrip__unit {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-60);
}

/* ------------------------------------------------- Referenzkarten mit Bild */
.refc { border: 1px solid var(--line-strong); background: var(--white); display: flex; flex-direction: column; }
.refc__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.refc__body { padding: clamp(1.2rem, 2.5vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.refc__name { font-size: 1.2rem; margin-bottom: .2rem; }
.refc__sub { font-size: .88rem; color: var(--ink-60); margin-bottom: .9rem; }
.refc__tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 .9rem; padding: 0; }
.refc__tags li {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .22rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-60);
}
.refc__proof { font-size: .9rem; color: var(--ink-80); margin-bottom: .9rem; }
.refc__link { font-family: var(--mono); font-size: .74rem; margin-top: auto; }

/* ----------------------------------------------------- Kopfbereich zweispaltig */
.wrap--head { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .wrap--head { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); } }
.pagehead__side { align-self: start; }
.pagehead__side .answer { margin-top: 0; }

/* Zitat mit Kundenlogo */
.quote figcaption { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.quote__logo { height: 34px; width: auto; opacity: .7; }
.quote figcaption em { font-style: normal; color: var(--ink-60); }

/* =========================================================================
   Markenanpassung: runde Formen, weiche Schatten, Verlauf als Signal
   Überschreibt bewusst die kantigeren Regeln weiter oben.
   ========================================================================= */

body { background: var(--paper); font-family: var(--body); }

/* Eyebrow als Pille im Markenlook */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pink-deep); background: var(--paper-3);
  border: 1px solid rgba(236, 72, 153, .2);
  padding: .45rem .9rem; border-radius: 999px; margin: 0 0 1.25rem;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--grad); box-shadow: none; }
.section--dark .eyebrow, .section--tl .eyebrow {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--pink-soft);
}

/* Flächen */
.section--alt { background: var(--paper-2); }
.section--quote { background: var(--paper-3); }
.section--faq { background: var(--paper-2); }
.section--steps { background: var(--paper-2); }

/* Karten: runde Ecken, weicher Schatten, Verlaufskante beim Hover */
.card, .case, .price, .box, .form, .refc, .hero__panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.card::before { height: 4px; border-radius: 999px 999px 0 0; background: var(--grad); }
.card:hover { border-color: rgba(236, 72, 153, .35); box-shadow: 0 26px 50px -28px rgba(11, 11, 15, .35); }
.card__meta { color: var(--pink-deep); }

.case__media img, .refc__media img { border-radius: 0; }
.case, .refc { overflow: hidden; }
.proof__media img { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.figure img { border-radius: var(--radius-lg); }

/* Kernpunkte und Referenzen: Verlaufslinie statt harter Kante */
.core, .inc, .person, .role, .why {
  border-top: 0; position: relative; padding-top: 1.4rem;
}
.core::before, .inc::before, .person::before, .role::before, .why::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3.5rem; height: 4px;
  border-radius: 999px; background: var(--grad);
}

/* Preistafel */
.price--featured { border: 2px solid transparent; background:
  linear-gradient(var(--white), var(--white)) padding-box,
  var(--grad) border-box; }
.price__badge { background: var(--grad-tx); color: var(--white); border-radius: 999px; }
.pstrips { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.pstrip__price { color: var(--ink); }
.pstrip:hover { background: var(--paper-3); }

/* Zahlenreihe */
.facts-strip { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.fact__value {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Zeitleiste */
.section--tl { background: var(--ink); }
.tl__num { background: var(--grad-tx); color: var(--white); }

/* Antwortbox */
.answer {
  border: 1px solid var(--line); border-left: 4px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad) border-box;
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.answer__label { color: var(--pink-deep); font-weight: 800; }

/* Aufklappbereiche */
.deep__icon::before, .deep__icon::after { background: var(--pink); }
.faq__icon::before, .faq__icon::after { background: var(--pink); }

/* Formularfelder */
.field input, .field select, .field textarea { border-radius: .9rem; background: var(--paper-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink); box-shadow: 0 0 0 3px rgba(236, 72, 153, .16);
}
.consent input { accent-color: var(--pink); }

/* Kopfbereich mit sanftem Verlauf im Rücken */
.hero::after {
  background: radial-gradient(circle, rgba(236, 72, 153, .22) 0%, rgba(249, 115, 22, .12) 45%, transparent 70%);
}
.hero__media img { border-radius: var(--radius-xl); border: 0; box-shadow: var(--shadow-card); }

/* CTA-Band im Verlauf statt in Schwarz */
.band { background: var(--grad-tx); color: var(--white); }
.band__text { color: var(--white); }
.band .btn--primary { background: var(--white); color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .4); }
.band .btn--primary:hover { color: var(--ink); filter: none; background: var(--paper-2); }
.band .btn--ghost-light { border-color: rgba(255, 255, 255, .5); color: var(--white); }

/* Dunkler Block */
.section--dark { background: var(--ink); }
.promise { background: rgba(255, 255, 255, .04); border-radius: var(--radius); }
.section:not(.section--dark) .grid--promises { background: transparent; border: 0; gap: 1.25rem; }
.section:not(.section--dark) .promise {
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.grid--promises { background: transparent; border: 0; gap: 1.25rem; }

/* Logo-Wand */
.logo-wall__label { font-family: var(--body); font-weight: 700; color: var(--ink-60); }

/* Zitatblock */
.quote__stars { color: var(--yellow); }
.quote blockquote p { color: var(--ink); }

/* =========================================================================
   Kundenstimmen: laufendes Band mit echten Zitaten
   ========================================================================= */
.section--voices { background: var(--paper-2); overflow: hidden; }
.voices { overflow: hidden; width: 100%; margin-top: clamp(2rem, 4vw, 3rem); }
/* Den Umlauf steuert site.js: Es setzt transform und hängt die erste Karte ans
   Ende, sobald sie draußen ist. Deshalb hier keine CSS-Animation – eine Bahn
   über die Gesamtbreite aller Karten hat Chrome beim Neuzeichnen überfordert.
   Ohne JavaScript steht der Satz still und lässt sich seitlich scrollen. */
/* Bewusst ohne will-change: Das zwingt die Bahn in eine eigene
   Compositing-Ebene - genau der Mechanismus, an dem die alte Lösung
   gescheitert ist. Der Gewinn wäre minimal, das Risiko nicht. */
.voices__track { display: flex; width: max-content; }
.voices__set { display: flex; gap: 1.25rem; padding-right: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .voices { overflow-x: auto; }
}
.voice {
  flex: 0 0 min(86vw, 380px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.8rem; display: flex; flex-direction: column; gap: 1rem;
  box-shadow: var(--shadow-card);
}
.voice__stars { color: var(--yellow); letter-spacing: .1em; font-size: 1rem; }
.voice p { color: var(--ink-80); font-size: .93rem; flex: 1; margin: 0; line-height: 1.6; }
.voice__foot { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.voice__logo {
  width: 52px; height: 52px; border-radius: 1rem; background: var(--paper-2);
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
}
.voice__logo img { max-width: 40px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.voice__name { font-weight: 700; font-size: .95rem; font-family: var(--display); letter-spacing: -.01em; }
.voice__badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; color: #10B981; font-weight: 600; }

/* =========================================================================
   Team mit Fotos
   ========================================================================= */
.person { border-radius: var(--radius-lg); border: 1px solid var(--line); padding: 1.25rem; background: var(--white); box-shadow: var(--shadow-card); }
.person::before { display: none; }
.person__media {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem;
  background: var(--paper-2);
}
.person__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.person:hover .person__media img { transform: scale(1.04); }
.person__name { font-size: 1.5rem; margin-bottom: .1rem; }
.person__role { color: var(--coral); font-weight: 700; font-family: var(--body); font-size: .74rem; }
.person--nopic .person__media { display: grid; place-items: center; font-size: 3.5rem; }

/* Referenzkarte ohne Projektfoto: Logo auf sanfter Markenflaeche */
.refc__media--logo {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--grad-soft); border-bottom: 1px solid var(--line);
}
.refc__media--logo img { max-width: 58%; max-height: 52%; width: auto; height: auto; object-fit: contain; }

/* =========================================================================
   Effekte: Browserfenster, Galerie mit Farbwechsel, gestapelte Karten,
   Zähler, Fortschrittsbalken. Alles CSS-getrieben, JS nur als Auslöser.
   ========================================================================= */

/* --------------------------------------------------- Fortschrittsbalken */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-anim); background-size: 200% auto;
  z-index: 999; transition: width .1s linear;
}

/* ------------------------------------------------------- Browserfenster */
.bframe {
  border-radius: .9rem; overflow: hidden; background: #E9E6E4;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
}
.bframe__bar {
  display: flex; align-items: center; gap: .32rem;
  padding: .5rem .7rem; background: #E3DFDD; border-bottom: 1px solid rgba(11,11,15,.08);
}
.bframe__bar span { width: 8px; height: 8px; border-radius: 999px; background: rgba(11,11,15,.18); }
.bframe__bar span:first-child { background: #F97316; }
.bframe__bar span:nth-child(2) { background: #FBBF24; }
.bframe__bar span:nth-child(3) { background: #10B981; }
.bframe img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.refc__media--site { padding: 1rem 1rem 0; background: var(--grad-soft); }
.refc__media--site .bframe { box-shadow: 0 14px 30px -18px rgba(11,11,15,.45); }

/* ------------------------------------------------------------- Zähler */
.section--counts { padding-block: clamp(2.5rem, 5vw, 4rem); }
.counts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 620px) { .counts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .counts { grid-template-columns: repeat(4, 1fr); } }
.count { background: var(--white); padding: clamp(1.4rem, 3vw, 2rem); }
.count__value {
  font-family: var(--display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 .45rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.count__label { font-weight: 700; margin: 0 0 .3rem; }
.count__note { font-size: .86rem; color: var(--ink-60); margin: 0; line-height: 1.45; }

/* -------------------------------------------------- Gestapelte Karten */
.stack-sec { background: var(--ink); color: var(--paper); border-top: 0; overflow: visible; }
.stack-sec .h2, .stack-sec h3 { color: var(--white); }
.stack-sec .lead { color: rgba(254, 254, 254, .72); }
.stack { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stack__intro { position: sticky; top: 7rem; align-self: start; }
@media (max-width: 999px) { .stack__intro { position: static; } }
.stack__cards { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) {
  .stack__cards { display: block; }
  .stack__layer { position: sticky; top: 7rem; margin-bottom: 42vh; }
  .stack__layer:last-child { margin-bottom: 0; }
  .stack__layer:nth-child(1) { z-index: 10; }
  .stack__layer:nth-child(2) { z-index: 20; }
  .stack__layer:nth-child(3) { z-index: 30; }
  .stack__layer:nth-child(4) { z-index: 40; }
}
.stack__card {
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-xl); padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .3s var(--ease);
}
@media (min-width: 1000px) { .stack__layer:hover .stack__card { transform: translateY(-4px); } }
.stack__num {
  display: inline-block; font-family: var(--mono); font-size: .8rem; font-weight: 700;
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem;
  background: var(--grad-tx); color: var(--white);
}
.stack__card h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .6rem; color: var(--ink); }
.stack__card p { color: var(--ink-80); margin: 0; }

/* ------------------------------------------------------------- Galerie */
.gallery {
  background: var(--paper); color: var(--ink-80);
  transition: background-color .8s var(--ease), color .8s var(--ease);
  position: relative; overflow: hidden;
}
.gallery::before {
  content: ""; position: absolute; top: 18%; left: 50%; width: 620px; height: 620px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(236, 72, 153, .18) 0%, rgba(11, 11, 15, 0) 70%);
  transition: opacity 1s var(--ease);
}
.gallery__head { text-align: center; max-width: 620px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 2; }
.gallery__head .eyebrow { margin-inline: auto; }
.gallery .h2 { transition: color .8s var(--ease); }
.gallery .lead { margin-inline: auto; transition: color .8s var(--ease); }

.gallery.is-dark { background: var(--ink); color: rgba(255, 255, 255, .6); }
.gallery.is-dark::before { opacity: 1; }
.gallery.is-dark .h2 { color: var(--white); }
.gallery.is-dark .lead { color: rgba(255, 255, 255, .6); }
.gallery.is-dark .eyebrow { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--pink-soft); }

.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.75rem); position: relative; z-index: 2; }
@media (max-width: 760px) { .gal { grid-template-columns: 1fr 1fr; } }
.gal__col { display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.75rem); }
@media (min-width: 768px) { .gal__col--offset { transform: translateY(3.5rem); } }
.gal__item {
  margin: 0; border-radius: var(--radius); overflow: hidden; position: relative;
  background: #1A1A24; box-shadow: 0 18px 38px -24px rgba(0, 0, 0, .55);
}
.gal__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2, 1, .3, 1), filter .8s var(--ease);
  filter: brightness(.94);
}
.gal__item:hover img { transform: scale(1.06); filter: brightness(1.04); }
.gal__item--hoch { aspect-ratio: 4 / 5; }
.gal__item--quer { aspect-ratio: 4 / 3; }

@media (prefers-reduced-motion: reduce) {
  .gal__col--offset { transform: none; }
  .gal__item img { transition: none; }
  .gallery, .gallery .h2, .gallery .lead { transition: none; }
}

/* Themenbild als schmales Band unter dem Seitenkopf */
/* Das Band zeigt nur einen Streifen des 16:9-Motivs. Der Ausschnitt sitzt
   bewusst ueber der Bildmitte, sonst schneidet er den Kopf des Fuchses ab. */
.band-img--slim .band-img__img {
  max-height: 48vh; aspect-ratio: 16 / 9; object-position: 50% 30%;
}
@media (max-width: 700px) { .band-img--slim .band-img__img { max-height: 34vh; } }

/* =========================================================================
   Ihre Marketingabteilung: die drei Betreuungsstufen
   ========================================================================= */
.tiers { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  border: 1px solid var(--line-strong); background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; position: relative;
}
.tier.price--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad) border-box;
}
/* Der Vergleich zur eigenen Stelle steht ueber dem Namen - er ist das Argument */
.tier__instead {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink-deep); margin: 0 0 .5rem;
}
.tier__hours {
  font-family: var(--mono); font-size: .74rem; color: var(--ink-60);
  margin: -.25rem 0 .9rem;
}
.tier__promise {
  font-size: .96rem; line-height: 1.55; padding: .9rem 0 1.1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.tier__items { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .8rem; }
.tier__items li { font-size: .9rem; line-height: 1.55; color: var(--ink-60); }
.tier__items li strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: .1rem; }

.tier__not { margin: 0 0 1.5rem; }
.tier__not summary {
  cursor: pointer; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-60); padding: .5rem 0;
}
.tier__not summary:hover { color: var(--ink); }
.tier__notlist { margin: .4rem 0 0; padding-left: 1.1rem; }
.tier__notlist li { font-size: .86rem; color: var(--ink-60); line-height: 1.5; margin-bottom: .3rem; }
.tier .btn { margin-top: auto; }

/* Liste mit Ausschlusskriterien: dieselbe Form wie .checks, anderes Zeichen */
.checks--neg li::before {
  content: "–"; width: auto; height: auto; border: 0; transform: none;
  top: 0; color: var(--ink-60); font-weight: 600;
}

/* Die Startseiten-Leiste der Betreuungsstufen hat drei statt vier Spalten */
@media (min-width: 620px) { .pstrips--three { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   Umbruch langer deutscher Komposita
   „KI-Suchmaschinenoptimierung“ oder „Streicheleinheiten-Management“ passen
   auf schmalen Bildschirmen sonst nicht in eine Zeile und laufen über den Rand.
   ========================================================================= */
/* Nichts läuft über den Rand hinaus, egal wie lang ein Wort ist. */
body { overflow-wrap: break-word; }

/* Überschriften: Lange Komposita wie „Marketingabteilung“ werden mit
   Trennstrich getrennt. Ohne das bricht der Browser mitten im Wort um und es
   steht „Marketingabteilun-g“ da. */
h1, h2, h3, h4, .h1, .h2, .h3 { hyphens: auto; }

/* Der Hero-Titel ist die Ausnahme: Er ist so groß, dass ein Trennstrich
   auffällt. Er wird stattdessen umbrochen. */
.hero__title { hyphens: none; }

/* Fließtext bleibt ungetrennt - der Satz ist links ausgerichtet, da bringt
   Trennung nichts und macht das Bild unruhig. */

/* Zahlen, Preise und Tabellenwerte werden nie getrennt */
.data td, .price__value, .pstrip__price, .count__value { hyphens: none; }

/* Die FAQ-Frage ist eine echte H3. Sie soll aber aussehen wie vorher der
   einfache Text im Aufklapper - also alle Überschriften-Abstände zurücksetzen. */
.faq__q {
  margin: 0; font: inherit; letter-spacing: inherit; color: inherit;
}

/* Belegquellen am Ende einer Leistungsseite */
.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sources li {
  padding-left: 1.5rem; position: relative; font-size: .95rem; line-height: 1.6;
}
.sources li::before {
  content: "↗"; position: absolute; left: 0; top: .1em;
  color: var(--pink-deep); font-size: .9em;
}
.sources a { font-weight: 600; display: block; }
.sources span { display: block; color: var(--ink-60); font-size: .9rem; margin-top: .15rem; }

/* Im Quelltext steht die Antwortbox jetzt vor den Schaltflächen - sie ist die
   Kernaussage der Seite und soll früh gelesen werden. Angezeigt wird sie
   weiterhin in der rechten Spalte, die Schaltflächen bleiben links darunter. */
@media (min-width: 900px) {
  .wrap--head { grid-template-areas: "text seite" "cta seite"; }
  .wrap--head > div:first-child { grid-area: text; }
  .wrap--head .pagehead__side { grid-area: seite; }
  .wrap--head .pagehead__cta { grid-area: cta; margin-top: -1rem; }
}
.pagehead__cta .btn-row { margin-bottom: 1.5rem; }

/* =========================================================================
   Alles im selben Raster
   Auf breiten Bildschirmen liefen Bildbänder und Laufbänder über die volle
   Fensterbreite, während Text und Karten bei 1220 px endeten. Das wirkte, als
   gehörten sie nicht zur Seite. Sie folgen jetzt derselben Mittelachse.
   ========================================================================= */

/* Bildband: Der dunkle Grund gehört ab jetzt zum Bild, nicht zum Fenster. */
.band-img { background: transparent; }
.band-img figure {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.band-img__cap { width: auto; margin-inline: 0; padding: 1rem clamp(1.2rem, 3vw, 2rem) 1.3rem; }
@media (min-width: 640px) {
  .band-img figure { width: min(100% - 4rem, var(--wrap)); }
  .band-img__cap { width: auto; }
}

/* Laufende Bänder: Die Bahn bleibt in der Mitte, die weiche Kante bleibt. */
.voices, .marquee {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
@media (min-width: 640px) {
  .voices, .marquee { width: min(100% - 4rem, var(--wrap)); }
}
/* Weiche Kanten links und rechts. Bewusst als aufgelegte Blende statt als
   mask-image: Eine Maske zwingt den bewegten Inhalt in eine eigene
   Compositing-Ebene – genau die Ebene, die beim Weiterlaufen nicht mehr
   nachgezeichnet wurde. Die Blende legt sich nur darüber. */
.voices { position: relative; }
.voices::before,
.voices::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(1.5rem, 4vw, 3.5rem);
  pointer-events: none; z-index: 2;
}
.voices::before {
  left: 0; background: linear-gradient(90deg, var(--paper-2), rgba(253, 250, 246, 0));
}
.voices::after {
  right: 0; background: linear-gradient(270deg, var(--paper-2), rgba(253, 250, 246, 0));
}

/* Preisübersicht: drei Spalten statt vier. Bei sechs Paketen liegt damit das
   zweite - die Marketingabteilung - in der Mitte der oberen Reihe. */
@media (min-width: 1080px) { .grid--prices { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) and (max-width: 1079px) { .grid--prices { grid-template-columns: repeat(2, 1fr); } }

/* Die Preisleiste auf der Startseite zeigt sechs Pakete – drei Spalten ergeben
   zwei gleich volle Reihen. */
@media (min-width: 620px) { .pstrips { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   Der wichtigste Knopf gehört in den sichtbaren Bereich
   Bei 1440 × 900 lag die Schaltfläche „Kostenloses Erstgespräch" 103 px unter
   der Fensterkante – man musste scrollen, um sie zu sehen. Titel und Abstände
   sind deshalb auf großen Bildschirmen etwas kompakter.
   ========================================================================= */
@media (min-width: 1000px) {
  .hero { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
  .hero__title { font-size: clamp(2.7rem, 1.2rem + 5.4vw, 4.6rem); margin-bottom: .3em; }
  .hero__lead { margin-bottom: 1.6rem; }
  .hero .btn-row { margin-bottom: 1.6rem; }
}

/* Problemliste auf der Startseite: etwas luftiger als in den Aufklappbereichen */
.problems--home li { font-size: 1.02rem; margin-bottom: .9rem; }

/* Drei Belege über dem Formular – an der Stelle, an der entschieden wird */
.formtrust {
  list-style: none; margin: 0 0 1.5rem; padding: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: .86rem; color: var(--ink-60);
}
.formtrust strong { display: block; font-family: var(--display); font-size: 1.15rem;
  font-weight: 700; color: var(--ink); letter-spacing: -.02em; }

/* Schaltflächenpaar am Ende eines Abschnitts: etwas mehr Abstand nach oben */
.btn-row--wide { margin-top: clamp(2rem, 4vw, 3rem); }

/* =========================================================================
   Bewertung aus dem Google-Unternehmensprofil
   Echte Zahl, verlinkt auf die Quelle. Steht dort, wo entschieden wird.
   ========================================================================= */
.rating {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit;
  margin-top: 1.5rem; padding: .5rem .9rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rating:hover { border-color: var(--pink-deep); box-shadow: var(--shadow-soft); }
.rating__stars { color: #F5A623; letter-spacing: .1em; font-size: .95rem; }
.rating__text { font-size: .86rem; color: var(--ink-60); }
.rating__text strong { color: var(--ink); font-weight: 700; }
.rating--hero { margin-top: 1.75rem; }
.section--voices .rating { margin-bottom: .5rem; }
.section--dark .rating, .section--tl .rating {
  background: rgba(255,255,255,.06); border-color: var(--line-light);
}
.section--dark .rating__text, .section--tl .rating__text { color: rgba(254,254,254,.72); }
.section--dark .rating__text strong, .section--tl .rating__text strong { color: var(--white); }

/* ------------------------------------------------- Einwilligung (Cookie) ---
   Der Dialog blockiert, bis eine Entscheidung gefallen ist. Damit das nicht
   wie eine Sperre wirkt, ist er als Karte im Editorial-Stil gebaut: warmes
   Papier, Hairline-Rand, der Markenverlauf nur als schmale Oberkante. Die
   beiden Hauptknoepfe sind gleich gross - Ablehnen darf nicht schwerer fallen
   als Zustimmen.
   ------------------------------------------------------------------------- */
.cookiebox-offen { overflow: hidden; }
.cookiebox[hidden] { display: none; }
.cookiebox {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: end center;
  padding: clamp(.75rem, 3vw, 2rem);
}
@media (min-width: 720px) { .cookiebox { place-items: center; } }

.cookiebox__veil {
  position: absolute; inset: 0;
  background: rgba(11, 11, 15, .58);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: consentVeil .35s var(--ease) both;
}
@keyframes consentVeil { from { opacity: 0; } to { opacity: 1; } }

.cookiebox__box {
  position: relative; width: min(100%, 40rem);
  max-height: calc(100dvh - clamp(1.5rem, 6vw, 4rem));
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  animation: consentRise .45s var(--ease) both;
}
.cookiebox--weit .cookiebox__box { width: min(100%, 46rem); }
.cookiebox__box::before {
  content: ""; display: block; height: 4px; flex: none; background: var(--grad);
}
@keyframes consentRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookiebox__veil, .cookiebox__box { animation: none; }
}

.cookiebox__inner {
  padding: clamp(1.35rem, 3.5vw, 2.1rem);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cookiebox__eyebrow {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--pink-deep); margin: 0 0 .5rem;
}
.cookiebox__title {
  font-family: var(--display); font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .6rem; text-wrap: balance;
}
.cookiebox__text {
  margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.6; color: var(--ink-80);
  max-width: 40ch;
}
@media (min-width: 720px) { .cookiebox__text { max-width: 54ch; } }

/* Knoepfe: nebeneinander, gleich breit, gleiche Hoehe */
.cookiebox__actions { display: grid; gap: .6rem; }
@media (min-width: 520px) { .cookiebox__actions { grid-template-columns: 1fr 1fr; } }
.cookiebox__actions .btn { width: 100%; padding: .95rem 1.2rem; font-size: .98rem; }
/* Ablehnen muss genauso praesent sein wie Zustimmen - sonst ist die
   Einwilligung angreifbar. Gleiche Groesse, gleicher Kontrast, nur die
   Markenfarbe bleibt dem Ja vorbehalten. */
.cookiebox__actions .btn--ghost {
  background: var(--white); color: var(--ink);
  border-color: var(--ink); border-width: 1.5px;
}
.cookiebox__actions .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cookiebox__more {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.cookiebox__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: .88rem; font-weight: 600; color: var(--ink-80);
  border-bottom: 1.5px solid var(--pink); line-height: 1.4;
}
.cookiebox__link:hover { color: var(--ink); }
.cookiebox__link[hidden] { display: none; }
.cookiebox__legal { margin-left: auto; display: flex; gap: 1rem; }
.cookiebox__legal a { font-size: .82rem; color: var(--ink-60); text-decoration: none; }
.cookiebox__legal a:hover { color: var(--ink); text-decoration: underline; }

/* Kategorien */
.cookiebox__cats { display: grid; gap: .9rem; margin: 0 0 1.35rem; }
.cookiebox__cats[hidden] { display: none; }
.cookiebox__cat {
  border: 1px solid var(--line); border-radius: 1rem;
  padding: .95rem 1.05rem; background: var(--white);
}
.cookiebox__cathead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookiebox__catname { font-weight: 700; font-size: 1rem; cursor: pointer; }
.cookiebox__fixed {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-60); white-space: nowrap;
}
.cookiebox__cattext {
  margin: .45rem 0 0; font-size: .87rem; line-height: 1.55; color: var(--ink-80);
}

/* Schalter: eine echte Checkbox, nur anders gezeichnet - so bleibt sie
   bedienbar per Tastatur und wird von Screenreadern korrekt angesagt. */
.cookiebox__switch { position: relative; flex: none; width: 3rem; height: 1.7rem; }
.cookiebox__switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.cookiebox__track {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--ink-40); transition: background-color .22s var(--ease);
}
.cookiebox__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-soft);
  transition: transform .22s var(--ease);
}
.cookiebox__switch input:checked + .cookiebox__track { background: var(--pink-deep); }
.cookiebox__switch input:checked + .cookiebox__track::after { transform: translateX(1.3rem); }
.cookiebox__switch input:focus-visible + .cookiebox__track {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

/* Dienstetabelle */
.cookiebox__det { margin-top: .7rem; }
.cookiebox__det summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--pink-deep);
  list-style: none;
}
.cookiebox__det summary::-webkit-details-marker { display: none; }
.cookiebox__det summary::before { content: "+ "; font-family: var(--mono); }
.cookiebox__det[open] summary::before { content: "– "; }
.cookiebox__table {
  width: 100%; margin-top: .6rem; border-collapse: collapse;
  font-size: .78rem; line-height: 1.45;
}
.cookiebox__table th, .cookiebox__table td {
  text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cookiebox__table thead th {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-60); font-weight: 400;
}
.cookiebox__table tbody th { font-weight: 600; color: var(--ink); }
.cookiebox__table td { color: var(--ink-80); }

/* Widerruf im Fussbereich - sieht aus wie die Nachbarlinks */
.foot__consent {
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  display: inline-block; padding: .3rem 0;   /* gleiche Trefferfläche wie die Nachbarlinks */
}
.foot__consent:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Kapseln
   Farbige Kapsel mit Symbol, eingestreut in eine Überschrift. Das Stilmittel
   stammt von der alten Seite – dort war es der Grund, warum die Überschriften
   lebendiger wirkten. Hier ohne Animation: Es steht sofort da, auch ohne
   JavaScript, und kostet keine Ladezeit.

   Bewusst sparsam: zwei Kapseln im Hero, eine auf „Über uns". Mehr wirkt
   dekoriert statt gestaltet.                                              */
.pill {
  display: inline-grid; place-items: center; vertical-align: baseline;
  width: 1.2em; height: .78em;           /* etwa Versalhöhe, im Querformat */
  border-radius: 999px;
  margin-right: .1em;
  translate: 0 .02em;
  flex: none;
}
.pill__icon { width: .46em; height: .46em; display: block; stroke-width: 2.2; }
.pill--pink   { background: var(--pink);   color: var(--white); }
.pill--orange { background: var(--orange); color: var(--white); }
.pill--gelb   { background: var(--yellow); color: var(--ink); }
.pill--koralle { background: var(--coral); color: var(--white); }

/* ---------------------------------------- Bewegung der Markensymbole -----
   Alle farbigen Symbolflächen der Seite bewegen sich gleich: die Kapseln in den
   Überschriften und die Icon-Kacheln auf den Leistungskarten. Eine Bewegung,
   eine Dauer, eine Kurve – unterschiedliche Bewegungen für optisch verwandte
   Elemente wirken wie ein Versehen.

   Sie schweben auf und ab, das Symbol darin neigt sich gegenläufig. Die
   Amplitude steht in em und wächst deshalb mit der Schriftgröße mit: auf einer
   großen Überschrift sichtbar, auf einer kleinen Karte kaum mehr als ein
   Atmen.

   Der entscheidende Punkt ist die Ausfallsicherheit. Anfangs- und Endbild sind
   identisch, die Deckkraft bleibt durchgehend 1, und die Fläche ist zu jedem
   Zeitpunkt vollständig sichtbar. Hält der Browser die Animation an – im
   Hintergrundtab, bei wenig Rechenleistung, ohne JavaScript ohnehin – steht
   das Symbol ein paar Pixel versetzt. Das sieht niemand. Genau daran ist die
   alte Seite gescheitert: Dort war der Anfangszustand "unsichtbar", und wer
   die Animation nicht sah, sah den Inhalt nicht.                          */
@keyframes symbolSchweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.09em); }
}
@keyframes symbolNeigen {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.pill,
.card__icon {
  animation: symbolSchweben 4s var(--ease) infinite;
}
.pill__icon,
.card__glyph {
  animation: symbolNeigen 4s var(--ease) infinite;
}

/* Versetzt statt im Gleichtakt: Zehn Kacheln, die synchron wippen, wirken
   mechanisch. Der Versatz macht daraus eine ruhige Welle über das Raster. */
.grid--cards .card:nth-child(3n+2) .card__icon,
.grid--cards .card:nth-child(3n+2) .card__glyph { animation-delay: -1.3s; }
.grid--cards .card:nth-child(3n+3) .card__icon,
.grid--cards .card:nth-child(3n+3) .card__glyph { animation-delay: -2.6s; }
.pill:nth-of-type(2), .pill:nth-of-type(2) .pill__icon { animation-delay: -1.3s; }
.pill:nth-of-type(3), .pill:nth-of-type(3) .pill__icon { animation-delay: -2.6s; }

/* Beim Überfahren hält die Kachel still – dann liest jemand die Karte. */
.card:hover .card__icon,
.card:hover .card__glyph { animation-play-state: paused; }

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .pill, .pill__icon, .card__icon, .card__glyph { animation: none; }
}

/* Auf schmalen Schirmen zählt jede Zeile: Dort verschwinden die Kapseln,
   damit die Überschrift nicht zusätzlich umbricht. */
@media (max-width: 520px) { .pill { display: none; } }

/* Markierung für eine tatsächlich ausgeschriebene Stelle. Sie erscheint nur,
   wenn in data.py "open": True steht – dann liegt auch ein JobPosting-Eintrag
   für Google for Jobs auf der Seite. Beides hängt an derselben Bedingung,
   damit die Seite nie etwas behauptet, was das Schema nicht deckt. */
.role { position: relative; }
.role__open {
  display: inline-block; margin-bottom: .7rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: var(--grad-tx); color: var(--white);
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700;
}