/* ==========================================================================
   Tim Hallmann – Shopware Freelancer
   Design-System, angelehnt an websoft.one
   ========================================================================== */

/* --- Font (selbst gehostet, kein Google-CDN → DSGVO) --------------------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/sora-latin.d2909123.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/sora-latin-ext.df4fca18.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono für die Code-Demo – ebenfalls selbst gehostet.
   Ohne Webfont fällt der Browser je nach System auf eine Serifen-Schrift
   zurück, was bei Code schlecht lesbar ist. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.2c32b9b3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.d44eb193.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --bg: #080e10;
  --bg-raised: #0d1518;
  --bg-card: #101a1d;
  --bg-elevated: #142024;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #c0c0c0;
  --text-strong: #ffffff;
  --text-muted: #6d797c;

  --lime: #c8dd30;
  --lime-dim: #a9bd1f;
  --purple: #845aff;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --font: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

html { background: var(--bg); }

body {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text);
  /* transparent, damit der feststehende Hintergrund darunter sichtbar bleibt */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, canvas { display: block; max-width: 100%; height: auto; }
svg { display: block; }

/* Inline-Icons: Standardgröße, kontextabhängig überschrieben.
   Ohne feste Maße kollabieren sie in Flex-/Grid-Containern auf 0. */
.ico { width: 20px; height: 20px; flex: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--lime); color: #0a0f11; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Typo ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.3rem + 5.2vw, 5.6rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.5rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { text-wrap: pretty; }

strong, b { color: var(--text-strong); font-weight: 600; }

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.65;
  color: #a8b2b4;
  max-width: 62ch;
}

.accent { color: var(--lime); }
.accent-p { color: var(--purple); }

/* --- Layout -------------------------------------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }

.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--raised { background: rgba(13, 21, 24, 0.82); }

.section-head { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1.25rem; }
.section-head--center p { margin-inline: auto; }

/* Kicker */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.section-head--center .kicker::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--lime);
  --btn-fg: #0a0f11;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background-color 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.55), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(200, 221, 48, 0.55);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  border-color: var(--line-strong);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}
.btn--ghost::before { display: none; }

.btn--purple {
  --btn-bg: var(--purple);
  --btn-fg: #fff;
}
.btn--purple:hover { box-shadow: 0 14px 40px -12px rgba(132, 90, 255, 0.6); }

.btn--lg { padding: 1.15rem 2.4rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Auf schmalen Viewports darf der Button umbrechen statt überzulaufen –
   nowrap erzwingt sonst eine min-content-Breite über die Bildschirmbreite. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn--lg { padding: 1.05rem 1.5rem; }
}

.btn .ico { width: 18px; height: 18px; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--lime);
}
.link-arrow .ico { transition: transform 0.35s var(--ease); width: 15px; height: 15px; }
.link-arrow:hover .ico { transform: translateX(5px); }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease),
    backdrop-filter 0.45s var(--ease), transform 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(8, 14, 16, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  flex: none;
}
/* Marken-Icon – die Grafik bringt ihre runde Form selbst mit,
   deshalb kein zusätzlicher Hintergrund. */
.brand__mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.07);
  filter: drop-shadow(0 6px 18px rgba(170, 220, 70, 0.6));
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text b { font-size: 0.98rem; font-weight: 600; }
.brand__text span {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 400;
}
.nav__links a { position: relative; padding-block: 0.4rem; color: #b7c0c2; transition: color 0.3s; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover { color: var(--text-strong); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta { flex: none; }

.nav__burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__burger:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.nav__burger[aria-expanded='true'] {
  background: rgba(200, 221, 48, 0.12);
  border-color: rgba(200, 221, 48, 0.5);
}

/* Alle drei Striche liegen exakt im Mittelpunkt und werden nur über
   translateY auseinandergezogen. Dadurch sind die Abstände gleichmäßig
   und die Drehung zum X trifft ohne Versatz. */
.nav__burger span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 2px;
  margin: -1px 0 0 -9.5px;
  border-radius: 2px;
  background: var(--text-strong);
  transition: transform 0.4s var(--ease), opacity 0.2s var(--ease),
    background-color 0.3s var(--ease);
}
.nav__burger span:nth-child(1) { transform: translateY(-6px); }
.nav__burger span:nth-child(3) { transform: translateY(6px); }

.nav__burger[aria-expanded='true'] span { background: var(--lime); }
.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: rotate(-45deg); }

/* Scroll-Fortschritt */
.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--lime), var(--purple));
}

/* Mobile-Menü */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8, 14, 16, 0.97);
  backdrop-filter: blur(20px);
  padding: 110px var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-strong);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.02em;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.mobile-menu.is-open a { transform: none; opacity: 1; }
.mobile-menu .btn {
  margin-top: 2rem;
  font-size: 1rem;
  white-space: normal;
  border-bottom: 0;
  padding: 1.05rem 1.4rem;
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(8rem, 16vh, 11rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Feststehender Punktraster-Hintergrund über die ganze Seite.
   Liegt hinter allen Inhalten und scrollt bewusst nicht mit. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.8;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
.hero__glow--a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -12%; right: -8%;
  background: radial-gradient(circle, rgba(132, 90, 255, 0.3), transparent 68%);
}
.hero__glow--b {
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
  bottom: -18%; left: -10%;
  background: radial-gradient(circle, rgba(200, 221, 48, 0.16), transparent 68%);
}

.hero__inner { max-width: 60rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(8px);
  font-size: 0.8125rem;
  color: #c4ccce;
  margin-bottom: 2rem;
}
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(200, 221, 48, 0.7);
  animation: pulse 2.4s infinite;
  flex: none;
  margin-left: 0.35rem;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(200, 221, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 221, 48, 0); }
}

.hero h1 { text-transform: uppercase; container-type: inline-size; }
/* overflow:hidden braucht die Aufsteige-Animation. Umlaut-Punkte über
   Großbuchstaben (MÜNCHEN, KÖLN) ragen aber ~0,08 em über den Zeilenkasten
   und wurden gekappt – daher oben Luft, per negativem Rand neutralisiert. */
.hero h1 .line { display: block; overflow: hidden; padding-top: 0.14em; margin-top: -0.14em; }
/* Zeile passt sich der Spaltenbreite an: --chars kommt aus dem Markup
   (längstes Wort der Zeile), 0.76 em ist die Breite des breitesten
   Großbuchstabens in Sora Bold – gemessen, mit etwas Reserve. Passt die
   Zeile ohnehin, gewinnt 1em und nichts ändert sich. */
.hero h1 .line > span { font-size: min(1em, 100cqi / (var(--chars, 1) * 0.76)); }
.hero h1 .line > span {
  display: block;
  transform: translateY(110%);
  animation: riseIn 1s var(--ease) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: 0.1s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.2s; }
@keyframes riseIn { to { transform: none; } }

.hero__outline {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.42);
  color: transparent;
}

/* Rotierende Keywords */
.hero__focus {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  font-size: 1.05rem;
  color: #8f9a9c;
  animation: fadeUp 0.9s var(--ease) 0.42s both;
}
.rotator {
  display: inline-grid;
  overflow: hidden;
  /* 1.5em, damit Ober- und Unterlängen (g, ß) nicht abgeschnitten werden */
  height: 1.5em;
  line-height: 1.5;
  color: var(--lime);
  font-weight: 500;
}
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(100%);
  /* Standard = "wartend": sofort unsichtbar, kein Nachziehen */
  transition: opacity 0.01s linear 0.3s, transform 0.01s linear 0.3s;
  white-space: nowrap;
}
/* Eingehend: kommt von unten, leicht verzögert – so überlagern sich
   ein- und ausgehendes Wort nicht sichtbar. */
.rotator > span.is-active {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease) 0.22s, transform 0.5s var(--ease) 0.22s;
}
/* Ausgehend: fährt nach oben raus */
.rotator > span.is-out {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.28s var(--ease), transform 0.34s var(--ease);
}

.hero__sub {
  margin-top: 2rem;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  color: #a8b2b4;
  animation: fadeUp 0.9s var(--ease) 0.35s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
  animation: fadeUp 0.9s var(--ease) 0.5s both;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2.2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  animation: fadeUp 0.9s var(--ease) 0.65s both;
}
.hero__proof li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #9aa4a6;
}
.hero__proof .ico { width: 17px; height: 17px; color: var(--lime); }

/* --- Hero-Porträt ---------------------------------------------------------
   Das Porträt steht auf der Linie der Vertrauensleiste, die unter Text und
   Bild über die volle Breite läuft. Damit Leiste und Porträt Zellen
   desselben Rasters werden, hebt display: contents die Textspalte auf.
   Kinder von .hero__inner: 1 Badge · 2 H1 · 3 Text · 4 Schwerpunkt ·
   5 Buttons · 6 Vertrauensleiste.
   ------------------------------------------------------------------------- */
.hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__inner { display: contents; }
.hero__inner > * { grid-column: 1 / -1; min-width: 0; }
.hero__badge { justify-self: start; }
.hero__inner > .hero__proof { grid-row: 7; }

.hero__portrait {
  /* So weit ragt das Bild nach unten, bis es auf der Linie der Leiste steht –
     entspricht deren margin-top. */
  --stand: 3rem;
  grid-row: 6;
  position: relative;
  justify-self: center;
  margin: 2.5rem 0 calc(-1 * var(--stand));
  width: min(66vw, 340px);
  /* Mobil auf Kopf und Oberkörper zugeschnitten – das ganze Bild wäre auf
     dem Telefon fast eine Bildschirmhöhe. */
  aspect-ratio: 1 / 1.12;
  animation: fadeUp 1s var(--ease) 0.3s both;
}
/* Weicher Lichthof hinter der Person – bindet das helle Hemd in den
   dunklen Hintergrund ein, statt es "aufgeklebt" wirken zu lassen. */
.hero__portrait::before {
  content: '';
  position: absolute;
  inset: 12% -14% 0;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(200, 221, 48, 0.14), transparent 72%),
    radial-gradient(closest-side at 60% 40%, rgba(132, 90, 255, 0.18), transparent 80%);
  filter: blur(30px);
  pointer-events: none;
}
.hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  /* Der Verlauf kaschiert die gerade Schnittkante des Freistellers. */
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 99%);
  filter: contrast(1.04);
  user-select: none;
}

/* Namensschild – macht aus dem Foto eine Vorstellung. */
.hero__tag {
  position: absolute;
  left: -0.5rem;
  bottom: 22%;
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.95rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--lime);
  border-radius: 12px;
  background: rgba(13, 21, 24, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1.25;
  animation: fadeUp 0.9s var(--ease) 0.75s both;
}
.hero__tag b { font-size: 0.875rem; font-weight: 600; color: #fff; }
.hero__tag span { font-size: 0.72rem; color: #9aa4a6; letter-spacing: 0.01em; }

/* Ab Tablet: Porträt rechts neben dem Text.
   contain: size nimmt das Bild aus der Höhenberechnung der Zeilen heraus –
   sonst würde ein hohes Porträt die Textzeilen auseinanderziehen. Es füllt
   stattdessen genau die Höhe, die der Text vorgibt, und das Bild darin
   skaliert sich passend (unten verankert, nie breiter als die Spalte). */
@media (min-width: 600px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr) min(44vw, 340px);
    column-gap: 1.5rem;
  }
  .hero__inner > .hero__sub,
  .hero__inner > .hero__focus,
  .hero__inner > .hero__actions { grid-column: 1; }

  .hero__portrait {
    grid-column: 2;
    grid-row: 3 / 6;
    align-self: stretch;
    justify-self: stretch;
    contain: size;
    width: auto;
    aspect-ratio: auto;
    margin: 0 0 calc(-1 * var(--stand));
  }
  .hero__portrait img {
    position: absolute;
    inset: 0;
    object-fit: contain;
    object-position: 50% 100%;
  }
  /* Rechts: links steht Text, dort wird es eng. */
  .hero__tag { left: auto; right: -0.75rem; bottom: 16%; border-left-width: 1px; border-right: 2px solid var(--lime); text-align: right; }

  .hero__proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.6rem; }
}

/* Desktop: Das Porträt reicht neben Überschrift und Beschreibung hoch. */
@media (min-width: 1000px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1fr) min(42vw, 580px);
    column-gap: clamp(1rem, 2.5vw, 2.5rem);
  }
  .hero__inner > .hero__badge,
  .hero__inner > h1 { grid-column: 1; }
  .hero__portrait { grid-row: 1 / 6; }

  /* Vier Punkte in einer Reihe über die volle Breite. auto-Spalten lassen
     lange Punkte bei knappem Platz zweizeilig umbrechen, statt dass der
     letzte Punkt allein in eine neue Reihe rutscht. */
  .hero__proof { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 1rem 2rem; }
  .hero__portrait img {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  }
}

/* --- Ticker -------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line);
  padding-block: 1.35rem;
  overflow: hidden;
  background: rgba(13, 21, 24, 0.82);
  --dur: 46s;
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: marquee var(--dur) linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d8688;
  white-space: nowrap;
}
.ticker__item::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0.6;
}

/* --- Stats --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: rgba(8, 14, 16, 0.72);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  transition: background-color 0.4s var(--ease);
}
.stat:hover { background: var(--bg-card); }
.stat__value {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.stat__value .suffix { color: var(--lime); }
.stat__label { margin-top: 0.85rem; font-size: 0.9375rem; color: #b3bcbe; font-weight: 500; }
.stat__sub { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.15rem; }

/* --- Cards --------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }

/* Fällt in der letzten Zeile eine Karte allein an, rückt sie in die Mitte.
   Greift nur, wenn keine breiten Kacheln im Spiel sind. */
@media (min-width: 1000px) {
  .grid--3:not(:has(.svc--wide)) > :last-child:nth-child(3n + 1) { grid-column: 2; }
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
    background-color 0.5s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%),
    rgba(200, 221, 48, 0.09), transparent 42%);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 221, 48, 0.35);
  background: var(--bg-elevated);
}
.card:hover::before { opacity: 1; }

/* Feature-Icon in Info-Karten – gleiche Sprache wie die Leistungs-Icons,
   nur etwas kleiner. */
.feature-ico {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(200, 221, 48, 0.1);
  border: 1px solid rgba(200, 221, 48, 0.24);
  color: var(--lime);
  flex: none;
  transition: transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.feature-ico .ico { width: 25px; height: 25px; }
.card:hover .feature-ico {
  transform: rotate(-6deg) scale(1.06);
  background: rgba(200, 221, 48, 0.17);
}

/* Leistungs-Karte */
.svc { display: flex; flex-direction: column; }

/* Zwei doppelt breite Kacheln bringen 7 Leistungen auf 9 Spalteneinheiten –
   also drei vollständig gefüllte Reihen ohne Lücke. Nebenbei bekommen die
   beiden wichtigsten Leistungen optisch mehr Gewicht. */
@media (min-width: 1000px) {
  .svc--wide { grid-column: span 2; }
  .svc--wide .svc__head { min-height: 0; align-items: center; }
  .svc--wide h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }
  .svc--wide .svc__teaser { font-size: 1rem; max-width: 62ch; }
  /* Stichpunkte zweispaltig, damit die breite Kachel nicht leer wirkt */
  .svc--wide .svc__list { grid-template-columns: 1fr 1fr; gap: 0.65rem 2rem; }
  .svc--wide .svc__icon { width: 58px; height: 58px; border-radius: 17px; }
  .svc--wide .svc__icon .ico { width: 28px; height: 28px; }
}
/* min-height hält die Fließtexte über alle Karten hinweg auf einer Linie,
   auch wenn Überschriften unterschiedlich viele Zeilen brauchen. */
.svc__head { display: flex; align-items: flex-start; gap: 1.1rem; min-height: 5.4rem; }
.svc__list { flex: 1; align-content: start; }
.svc__icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(200, 221, 48, 0.1);
  border: 1px solid rgba(200, 221, 48, 0.24);
  color: var(--lime);
  flex: none;
  transition: transform 0.5s var(--ease), background-color 0.4s;
}
.card:hover .svc__icon { transform: rotate(-6deg) scale(1.06); background: rgba(200, 221, 48, 0.17); }
.svc__icon .ico { width: 24px; height: 24px; }

.svc__kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.svc h3 { margin-top: 0.2rem; }
.svc__teaser { margin-top: 1.1rem; font-size: 0.9375rem; color: #a3adaf; }

.svc__list { margin-top: 1.5rem; display: grid; gap: 0.65rem; }
.svc__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #9aa4a6;
}
.svc__list .ico { width: 16px; height: 16px; color: var(--lime); margin-top: 4px; }

.svc__outcome {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-strong);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.svc__outcome .ico { width: 16px; height: 16px; color: var(--lime); margin-top: 4px; }

/* --- Headless Scroll-Story ---------------------------------------------- */
.headless { position: relative; }

.headless__layout {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 42%);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.headless__steps { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }

.hstep {
  border-left: 2px solid var(--line);
  padding: 0.25rem 0 0.25rem 1.75rem;
  transition: border-color 0.5s var(--ease), opacity 0.5s var(--ease);
  opacity: 0.42;
}
.hstep.is-active { opacity: 1; border-left-color: var(--lime); }

.hstep__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.hstep h3 { margin-top: 0.4rem; }
.hstep p { margin-top: 0.85rem; font-size: 0.9375rem; color: #a3adaf; max-width: 52ch; }

.hstep__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: #98a2a4;
  background: rgba(255, 255, 255, 0.03);
}

.headless__visual {
  position: sticky;
  top: 120px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
}
.headless__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 34px 100%;
  pointer-events: none;
}

.arch { display: grid; gap: 0.85rem; position: relative; }
.arch__node {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.arch__node.is-lit {
  border-color: var(--lime);
  background: rgba(200, 221, 48, 0.08);
  transform: translateX(4px);
}
.arch__node b { display: block; font-size: 0.9375rem; color: var(--text-strong); font-weight: 600; }
.arch__node span { font-size: 0.78rem; color: var(--text-muted); }
.arch__node .badge {
  position: absolute;
  top: 1rem; right: 1.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.arch__node.is-lit .badge { color: var(--lime); }

.arch__wire {
  height: 26px;
  margin-inline: auto;
  width: 2px;
  background: linear-gradient(to bottom, var(--line-strong), var(--line-strong));
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.arch__wire::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--lime), transparent);
  transform: translateY(-100%);
  animation: flow 2.4s linear infinite;
}
@keyframes flow { to { transform: translateY(100%); } }

/* --- Referenzen ---------------------------------------------------------- */
.ref {
  display: grid;
  grid-template-columns: 1fr;
  /* Textbereich dehnt sich, damit die Kennzahlen-Leisten nebeneinander
     liegender Karten auf einer Linie sitzen. */
  grid-template-rows: 1fr auto;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color 0.5s var(--ease);
}
.ref:hover { border-color: rgba(255, 255, 255, 0.2); }

.ref__body { padding: clamp(1.75rem, 3vw, 2.5rem); }

.ref__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.ref__branch { color: var(--purple); }

.ref h3 { margin-top: 0.9rem; }

.ref__scope { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }

.ref__qa { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.ref__qa > div { display: grid; gap: 0.3rem; }
.ref__qa dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ref__qa dd { margin: 0; font-size: 0.9375rem; color: #a8b2b4; }

.ref__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.ref__metric { background: var(--bg-raised); padding: 1.3rem clamp(1rem, 2vw, 1.6rem); }
.ref__metric b {
  display: block;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--lime);
  line-height: 1.1;
}
.ref__metric span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; display: block; margin-top: 0.25rem; }

/* --- Code-Showcase ------------------------------------------------------- */
.code-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a1214;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.code-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  overflow-x: auto;
  scrollbar-width: none;
}
.code-bar::-webkit-scrollbar { display: none; }
.code-dots { display: flex; gap: 6px; margin-right: 0.8rem; flex: none; }
.code-dots i { width: 11px; height: 11px; border-radius: 50%; background: #232f32; display: block; }
.code-tab {
  padding: 0.4rem 0.95rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.code-tab:hover { color: #c9d1d3; }
.code-tab[aria-selected='true'] {
  color: var(--lime);
  background: rgba(200, 221, 48, 0.09);
  border-color: rgba(200, 221, 48, 0.3);
}

.code-pane { display: none; }
.code-pane.is-active { display: block; animation: fadeUp 0.45s var(--ease); }

.code-shell pre {
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  max-height: 480px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: clamp(0.72rem, 0.68rem + 0.18vw, 0.84rem);
  line-height: 1.75;
  color: #b9c4c7;
  tab-size: 2;
}
.code-shell pre::-webkit-scrollbar { width: 9px; height: 9px; }
.code-shell pre::-webkit-scrollbar-thumb { background: #1e2b2f; border-radius: 9px; }

/* Syntax-Farben */
.tok-c { color: #55686c; font-style: italic; }
.tok-k { color: var(--purple); }
.tok-s { color: var(--lime); }
.tok-f { color: #6fd0ff; }
.tok-n { color: #ff9f6e; }
.tok-a { color: #9aa4a6; }

/* --- Prozess ------------------------------------------------------------- */
.process { counter-reset: step; display: grid; gap: 0; }
.pstep {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
  position: relative;
  transition: background-color 0.4s var(--ease);
}
.pstep:last-child { border-bottom: 1px solid var(--line); }
.pstep::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  height: 1px;
  width: 0;
  background: var(--lime);
  transition: width 0.9s var(--ease);
}
.pstep.is-in::after { width: 100%; }
.pstep:hover { background: rgba(255, 255, 255, 0.018); }

.pstep__num {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.28);
  line-height: 1;
  transition: -webkit-text-stroke-color 0.4s, color 0.4s;
}
.pstep.is-in .pstep__num { -webkit-text-stroke-color: rgba(200, 221, 48, 0.7); }

.pstep__text p { margin-top: 0.7rem; font-size: 0.9375rem; color: #a3adaf; max-width: 58ch; }
.pstep__dur {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 0.5rem;
}

/* --- Trust --------------------------------------------------------------- */
/* Feste 3 Spalten: bei sechs Punkten ergibt das zwei volle Zeilen.
   auto-fit würde je nach Breite vier Spalten bilden und zwei Lücken lassen. */
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.trust__item {
  background: rgba(8, 14, 16, 0.72);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: background-color 0.4s var(--ease);
}
.trust__item:hover { background: var(--bg-card); }
.trust__item:hover .feature-ico { transform: rotate(-6deg) scale(1.06); background: rgba(200, 221, 48, 0.17); }
.trust__item h4 { margin-top: 1.1rem; }
.trust__item p { margin-top: 0.6rem; font-size: 0.875rem; color: #99a3a5; }

/* --- Über mich ----------------------------------------------------------- */
.about { display: grid; grid-template-columns: minmax(280px, 38%) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.about__figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-card);
  aspect-ratio: 4 / 5;
}
.about__figure img { width: 100%; height: 100%; object-fit: cover; }
.about__figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.4rem 1.3rem;
  background: linear-gradient(to top, rgba(8, 14, 16, 0.95), transparent);
  font-size: 0.8125rem;
  color: #b3bcbe;
}
.about__figure figcaption b { display: block; color: var(--text-strong); font-size: 1rem; }


.about__body p + p { margin-top: 1.1rem; }
.about__sig { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.about__quote {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--lime);
  background: rgba(200, 221, 48, 0.045);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.0625rem;
  color: var(--text-strong);
  font-weight: 400;
  font-style: italic;
}

/* --- Preise -------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; align-items: stretch; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.plan--best {
  border-color: rgba(200, 221, 48, 0.45);
  background: linear-gradient(180deg, rgba(200, 221, 48, 0.06), var(--bg-card) 42%);
}
.plan__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--lime);
  color: #0a0f11;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}
.plan__name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.plan__price {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-strong);
  line-height: 1;
}
.plan__unit { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.4rem; }
.plan__for { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: #a8b2b4; }
.plan__list { margin-top: 1.3rem; display: grid; gap: 0.7rem; flex: 1; align-content: start; }
.plan__list li { display: grid; grid-template-columns: 17px 1fr; gap: 0.7rem; font-size: 0.875rem; color: #9aa4a6; line-height: 1.5; }
.plan__list .ico { width: 15px; height: 15px; color: var(--lime); margin-top: 4px; }
.plan .btn { margin-top: 1.8rem; }

.plans__note {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Booking ------------------------------------------------------------- */
.booking {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(900px circle at 15% 0%, rgba(132, 90, 255, 0.12), transparent 55%),
    var(--bg-card);
}
/* Einspaltig gestapelt: Einleitung oben, Kalender darunter über die volle
   Breite. In einer schmalen Spalte klappt Cal.com auf sein gestapeltes
   Layout um und wird doppelt so hoch – über die volle Breite rendert es
   nebeneinander und fügt sich unauffällig ein. */
.booking__grid { display: grid; grid-template-columns: 1fr; }
.booking__intro {
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.booking__intro-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  /* Trennlinie zwischen Überschrift und Stichpunkten */
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.booking__free {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--lime);
}
.booking__free .ico { width: 15px; height: 15px; }
.booking__phones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.booking__phones > span { font-size: 0.85rem; color: var(--text-muted); margin-right: 0.2rem; }
.booking__phones .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

/* Feste 3 Spalten: bei fünf Punkten stehen in der zweiten Zeile zwei
   nebeneinander statt einer allein. */
.booking__list {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem 2rem;
}
.booking__list li { display: grid; grid-template-columns: 18px 1fr; gap: 0.75rem; font-size: 0.9rem; color: #a3adaf; }
.booking__list .ico { width: 16px; height: 16px; color: var(--lime); margin-top: 4px; }

/* Höhe reicht für die Monatsansicht, ohne dass im iframe gescrollt werden
   muss. Ohne Cal.com-Skript gibt es keine automatische Größenanpassung –
   deshalb hier fest genug Platz einplanen. */
/* padding-top gibt dem Kalender Luft nach oben – ohne das klebt der obere
   Rand von Cal.com direkt an der Trennlinie darüber. */
.booking__embed { position: relative; display: grid; min-height: 760px; padding-top: 1.6rem; }
.booking__embed iframe { width: 100%; border: 0; display: block; min-height: 760px; }

/* Schmale Fenster: Cal.com stapelt Kalender und Zeitliste, braucht mehr Platz.
   Die endgültige Höhe meldet Cal.com per postMessage – das hier verhindert
   nur, dass es bis dahin einen Scrollbalken im Rahmen gibt. */
@media (max-width: 900px) {
  .booking__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .booking__embed, .booking__embed iframe { min-height: 1150px; }
}

@media (max-width: 560px) {
  .booking__list { grid-template-columns: 1fr; }
  .booking__intro-head { display: block; }
  .booking__phones { margin-top: 1rem; }
}

.consent-gate {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 1rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  min-height: 560px;
}
.consent-gate .ico { width: 40px; height: 40px; color: var(--text-muted); }
.consent-gate p { font-size: 0.875rem; color: #9aa4a6; max-width: 42ch; }
.consent-gate small { font-size: 0.75rem; color: var(--text-muted); }

/* --- FAQ ----------------------------------------------------------------- */
/* Zwei Spalten ab Tablet – zehn Fragen untereinander wären sonst ein sehr
   langer Abschnitt. Jede Spalte öffnet unabhängig. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.faq__col { align-self: start; }
.faq__item { border-top: 1px solid var(--line); }
.faq__col > .faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.2rem, 2.5vw, 1.7rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  transition: color 0.3s;
}
.faq__q:hover { color: var(--lime); }
.faq__icon {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color 0.4s var(--ease), border-color 0.4s, transform 0.4s var(--ease);
  margin-top: 2px;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.faq__icon::before { width: 11px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 11px; }
.faq__item.is-open .faq__icon { background: var(--lime); border-color: var(--lime); color: #0a0f11; transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  font-size: 0.9375rem;
  color: #a3adaf;
  padding-bottom: 1.6rem;
  padding-right: 2.5rem;
}

/* --- Städte -------------------------------------------------------------- */
.cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 0.5rem;
}
.cities a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: #9aa4a6;
  background: var(--bg-card);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease);
}
.cities a:hover {
  color: var(--text-strong);
  border-color: rgba(200, 221, 48, 0.4);
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
.cities a .ico { width: 13px; height: 13px; color: var(--lime); }

/* --- Agenturen ----------------------------------------------------------- */
.agency-band {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 34%);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(800px circle at 10% 0%, rgba(200, 221, 48, 0.09), transparent 55%),
    var(--bg-card);
}
.agency-band__cta {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  align-self: start;
}

/* --- Shopware-Band ------------------------------------------------------- */
.sw-band {
  display: grid;
  grid-template-columns: minmax(200px, 26%) 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(700px circle at 12% 50%, rgba(200, 221, 48, 0.1), transparent 62%),
    var(--bg-card);
}
.sw-band__logo {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 1.6rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
}
.sw-band__logo img { width: 100%; max-width: 210px; height: auto; }
.sw-band__text p { margin-top: 0.9rem; font-size: 0.9375rem; color: #a3adaf; max-width: 62ch; }

.sw-band__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.sw-band__facts li {
  padding-left: 0.9rem;
  border-left: 2px solid var(--lime);
}
.sw-band__facts b { display: block; font-size: 0.9rem; color: var(--text-strong); font-weight: 600; }
.sw-band__facts span { font-size: 0.78rem; color: var(--text-muted); }

.sw-band__note {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}

/* Shopware-Wortmarke im Footer */
.footer-sw {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.footer-sw img { width: 118px; height: auto; opacity: 0.85; }
.footer-sw span { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }

/* --- Kontakt / CTA ------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
  background:
    radial-gradient(700px circle at 20% 10%, rgba(200, 221, 48, 0.13), transparent 55%),
    radial-gradient(700px circle at 85% 90%, rgba(132, 90, 255, 0.16), transparent 55%),
    var(--bg-card);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2.2rem; }

.contact-grid { display: grid; grid-template-columns: minmax(280px, 38%) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.contact-list { display: grid; gap: 1.25rem; margin-top: 2rem; }
.contact-list a, .contact-list div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
  align-items: center;
}
.contact-list .ci {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--lime);
  transition: background-color 0.3s, border-color 0.3s;
}
.contact-list a:hover .ci { background: rgba(200, 221, 48, 0.12); border-color: rgba(200, 221, 48, 0.35); }
.contact-list .ci .ico { width: 18px; height: 18px; }
.contact-list small { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.contact-list b { font-weight: 500; color: var(--text-strong); font-size: 0.9375rem; }

/* Formular */
.form {
  display: grid;
  gap: 1rem;
  /* Eigener Container, damit das Formular nicht im Nichts steht */
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.form:focus-within { border-color: var(--line-strong); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1.05rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text-strong);
  font-size: 0.9375rem;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d797c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.6rem;
}
.field select option { background: #101a1d; color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: #5c686b; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--lime);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(200, 221, 48, 0.14);
}
.field textarea { resize: vertical; min-height: 130px; }

.check { display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; align-items: start; font-size: 0.8125rem; color: #99a3a5; }
.check input { width: 20px; height: 20px; accent-color: var(--lime); margin-top: 1px; }
.check a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kurzes Hervorheben, wenn ein Button zum Formular führt.
   Animiert werden nur Rahmen und Schein – der Container-Hintergrund
   bleibt unangetastet. */
.form.is-highlighted { animation: formHinweis 2.2s var(--ease); }
@keyframes formHinweis {
  0%   { box-shadow: 0 0 0 0 rgba(200, 221, 48, 0);     border-color: var(--line); }
  12%  { box-shadow: 0 0 0 7px rgba(200, 221, 48, 0.20); border-color: rgba(200, 221, 48, 0.65); }
  60%  { box-shadow: 0 0 0 7px rgba(200, 221, 48, 0.14); border-color: rgba(200, 221, 48, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(200, 221, 48, 0);     border-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .form.is-highlighted {
    animation: none;
    box-shadow: 0 0 0 3px rgba(200, 221, 48, 0.35);
    border-color: rgba(200, 221, 48, 0.6);
  }
}

.form__note { font-size: 0.78rem; color: var(--text-muted); }
.form__note a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* Hinweise, wenn der Spam-Schutz nicht greifen kann – ohne JavaScript
   (form__noscript) oder wenn das Token nicht geladen wurde (form__error).
   Beide nennen immer einen direkten Kontaktweg. */
.form__noscript,
.form__error {
  margin: 0;
  padding: 0.9rem 1.05rem;
  border: 1px solid rgba(255, 176, 32, 0.35);
  border-left-width: 3px;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.08);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
}
.form__noscript a,
.form__error a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Das schwebende reCAPTCHA-Abzeichen am Bildschirmrand ausblenden.
   Google erlaubt das ausdrücklich, verlangt dafür aber den sichtbaren
   Hinweis mit den beiden Links – der steht unter dem Formular. */
.grecaptcha-badge { visibility: hidden !important; }

.recaptcha-note {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: rgba(13, 21, 24, 0.86);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer-col h4 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.footer-col ul { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.footer-col a { font-size: 0.875rem; color: #98a2a4; transition: color 0.3s; }
.footer-col a:hover { color: var(--lime); }

/* Exali-Haftpflichtsiegel */
.footer-exali {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.footer-exali a {
  display: block;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.footer-exali a:hover { transform: translateY(-2px); }
.footer-exali img { width: 58px; height: 65px; }
.footer-exali span { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }

/* Social-Profile.
   Selektor mit ul, weil `.footer-col ul { display: grid }` sonst gewinnt
   und die Symbole untereinander stapelt. */
.footer-col ul.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #98a2a4;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-social .ico { width: 17px; height: 17px; }
.footer-social a:hover {
  color: var(--lime);
  border-color: rgba(200, 221, 48, 0.4);
  background: rgba(200, 221, 48, 0.08);
  transform: translateY(-2px);
}

/* Kontaktzeilen mit vorangestelltem Symbol */
.footer-contact a {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 0.7rem;
}
.footer-contact .ico { width: 15px; height: 15px; color: var(--lime); }
.footer-contact a:hover .ico { color: var(--lime); }
.footer-about p { margin-top: 1.2rem; font-size: 0.875rem; color: #98a2a4; max-width: 38ch; }

.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-bottom a:hover { color: var(--lime); }

/* --- Floating Actions ---------------------------------------------------- */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab a, .fab button {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(13, 21, 24, 0.9);
  backdrop-filter: blur(12px);
  color: var(--text-strong);
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.3s, border-color 0.3s;
}
.fab a:hover, .fab button:hover { transform: scale(1.08); border-color: var(--lime); color: var(--lime); }
.fab .ico { width: 21px; height: 21px; }

/* --- Reveal-Animationen -------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal='fade'] { transform: none; }
[data-reveal='left'] { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }
/* Einspaltig auf dem Handy: Seitliches Hereingleiten schiebt das Element vor
   dem Einblenden über den Rand. overflow-x am Body versteckt das zwar, mobile
   Browser zoomen die Seite deswegen aber minimal heraus. Also von unten. */
@media (max-width: 680px) {
  [data-reveal='left']:not(.is-in),
  [data-reveal='right']:not(.is-in) { transform: translateY(22px); }
}
[data-reveal='scale'] { transform: scale(0.96); }

/* --- Breadcrumb ---------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--lime); }
.crumbs li::after { content: '/'; margin-left: 0.5rem; opacity: 0.4; }
.crumbs li:last-child::after { display: none; }
.crumbs li { display: flex; gap: 0.5rem; }

/* --- Blog: Karten -------------------------------------------------------- */
.post-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
    background-color 0.5s var(--ease);
}
.post-card > a {
  display: block;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 221, 48, 0.35);
  background: var(--bg-elevated);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-card__cat {
  color: var(--lime);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(200, 221, 48, 0.35);
  border-radius: 999px;
  background: rgba(200, 221, 48, 0.09);
}
/* Feste Höhe, damit die Titel über alle Karten hinweg auf einer Linie
   starten – auch wenn eine lange Kategorie in die zweite Zeile umbricht. */
.post-card:not(.post-card--featured) .post-card__meta { min-height: 3.1rem; align-content: start; }
.post-card h3 { margin-top: 1rem; }
.post-card__excerpt { margin-top: 0.9rem; font-size: 0.9rem; color: #99a3a5; }
.post-card .link-arrow { margin-top: 1.4rem; }

.post-card--featured > a {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.post-card--featured {
  background:
    radial-gradient(700px circle at 85% 20%, rgba(132, 90, 255, 0.14), transparent 58%),
    var(--bg-card);
}
.post-card--featured h3 { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem); margin-top: 1.1rem; }
.post-card--featured .post-card__excerpt { font-size: 1rem; margin-top: 0; }
.post-card--featured .post-card__aside {
  padding-left: clamp(0px, 2vw, 1.75rem);
  border-left: 1px solid var(--line);
}

/* --- Blog: Artikel ------------------------------------------------------- */
.post__head {
  position: relative;
  padding-top: clamp(8rem, 15vh, 11rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.post__glow {
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(600px circle at 75% 15%, rgba(132, 90, 255, 0.16), transparent 60%),
    radial-gradient(500px circle at 10% 90%, rgba(200, 221, 48, 0.1), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}

.post__cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 1rem;
}
.post__head h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  max-width: 20ch;
}
.post__lead {
  margin-top: 1.4rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: #a8b2b4;
  max-width: 62ch;
}

.post__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.post__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  border: 1px solid var(--line-strong);
}
.post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.post__byline > div b { display: block; font-size: 0.9375rem; color: var(--text-strong); }
.post__byline > div span { font-size: 0.78rem; color: var(--text-muted); }

.post__facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-left: auto; }
.post__facts dt {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post__facts dd { margin: 0.15rem 0 0; font-size: 0.85rem; color: #b3bcbe; }

.post__layout {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.post__layout > .post__body:only-child { grid-column: 1 / -1; max-width: 74ch; margin-inline: auto; }

/* Inhaltsverzeichnis */
.post-toc {
  position: sticky;
  top: 110px;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.post-toc__title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}
.post-toc ol { counter-reset: toc; display: grid; gap: 0.55rem; }
.post-toc li { counter-increment: toc; }
.post-toc a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #98a2a4;
  transition: color 0.3s;
}
.post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--lime);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.post-toc a:hover { color: var(--text-strong); }

/* Artikelinhalt */
.post__body { max-width: 74ch; font-size: 1.0625rem; }
.post__body > * + * { margin-top: 1.4rem; }
.post__body h2 {
  font-size: clamp(1.4rem, 1.2rem + 1.1vw, 2rem);
  margin-top: 3.2rem;
  scroll-margin-top: 110px;
}
.post__body h2 + * { margin-top: 1.1rem; }
.post__body h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); margin-top: 2.2rem; }
.post__body h3 + * { margin-top: 0.9rem; }
.post__body p { color: #b0babc; line-height: 1.8; }
.post__body a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.post__body ul, .post__body ol { display: grid; gap: 0.7rem; padding-left: 1.5rem; color: #a8b2b4; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { line-height: 1.7; padding-left: 0.3rem; }
.post__body li::marker { color: var(--lime); }
.post__body code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #d7dfe1;
}

.post-code {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a1214;
  margin-block: 2rem;
}
.post-code pre {
  margin: 0;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.75;
  color: #b9c4c7;
  tab-size: 2;
}
.post-code code { background: none; padding: 0; font-size: inherit; }
.post-code pre::-webkit-scrollbar { height: 9px; }
.post-code pre::-webkit-scrollbar-thumb { background: #1e2b2f; border-radius: 9px; }

.post-note {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.9rem;
  padding: 1.2rem 1.4rem;
  border-left: 2px solid var(--lime);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(200, 221, 48, 0.055);
  margin-block: 2rem;
}
.post-note .ico { width: 18px; height: 18px; color: var(--lime); margin-top: 4px; }
.post-note p { font-size: 0.9375rem; color: #b8c2c4; margin: 0; }

.post-table { overflow-x: auto; margin-block: 2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.post-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 460px; }
.post-table th, .post-table td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.post-table th {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.025);
}
.post-table td { color: #a8b2b4; }
.post-table tr:last-child td { border-bottom: 0; }
.post-table td:first-child { color: var(--text-strong); font-weight: 500; }

.post-cta {
  margin-block: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(200, 221, 48, 0.3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px circle at 15% 0%, rgba(200, 221, 48, 0.1), transparent 60%),
    var(--bg-card);
}
.post-cta p { font-size: 1.0625rem; color: var(--text-strong); margin: 0; }
.post-cta__row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }

/* --- AGB: Paragraphen und Absätze ---------------------------------------- */
.legal-toc {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.legal-toc__title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}
.legal-toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
}
.legal-toc a {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.3rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #98a2a4;
  text-decoration: none;
  transition: color 0.3s;
}
.legal-toc a > span:first-child { color: var(--lime); font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: var(--text-strong); }

/* Absätze werden automatisch als (1), (2), … nummeriert */
.legal-list {
  list-style: none;
  padding-left: 0;
  counter-reset: absatz;
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}
.legal-list > li {
  counter-increment: absatz;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #b0babc;
}
.legal-list > li::before {
  content: '(' counter(absatz) ')';
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
/* Eingerückte Aufzählung innerhalb eines Absatzes – ohne eigene Nummer */
.legal-list > li.legal-list__plain {
  counter-increment: none;
  grid-template-columns: 1fr;
  margin-left: 2.4rem;
}
.legal-list > li.legal-list__plain::before { content: none; }
.legal-list ul {
  list-style: disc;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

@media (max-width: 560px) {
  .legal-list > li { grid-template-columns: 1.9rem 1fr; }
  .legal-list > li.legal-list__plain { margin-left: 1.9rem; }
}

/* --- Legal-Seiten -------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin-top: 2.75rem; }
.prose h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.prose p, .prose ul { margin-top: 1rem; font-size: 0.9375rem; }
.prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.prose a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.prose address { font-style: normal; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  /* Trust-Raster: 6 Punkte, deshalb 2 volle Zeilen statt einer Lücke */
  .trust { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* FAQ einspaltig – zwei Spalten werden hier zu schmal */
  .faq { grid-template-columns: 1fr; }
  .faq__col > .faq__item:last-child { border-bottom: 0; }
  .faq__col:last-child > .faq__item:last-child { border-bottom: 1px solid var(--line); }
  .faq__a p { padding-right: 0; }
}

@media (max-width: 1024px) {
  .post__layout { grid-template-columns: 1fr; }
  .post-toc { position: relative; top: 0; }
  .post__body { max-width: 74ch; }
  .post-card--featured > a { grid-template-columns: 1fr; }
  .post-card--featured .post-card__aside { padding-left: 0; border-left: 0; }
  .agency-band { grid-template-columns: 1fr; }
  .sw-band { grid-template-columns: 1fr; }
  .sw-band__logo { max-width: 260px; }
  .headless__layout { grid-template-columns: 1fr; }
  .headless__visual { position: relative; top: 0; order: -1; }
  .about { grid-template-columns: 1fr; }
  .about__figure { max-width: 340px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav { height: 68px; }
  .pstep { grid-template-columns: 60px 1fr; }
  .pstep__dur { grid-column: 2; padding-top: 0.6rem; }
  .ref__metrics { grid-template-columns: 1fr; }
  .ref__metric { padding: 1rem 1.4rem; }
}

@media (max-width: 680px) {
  .trust { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .post__facts { margin-left: 0; width: 100%; }
  .sw-band__facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .hero__proof { gap: 0.9rem 1.4rem; }
  .cities { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr; }
  .sw-band__facts { grid-template-columns: 1fr; }
  .post-cta__row .btn,
  .booking__intro .btn,
  .about__sig .btn { width: 100%; }
  /* Karten und Abschnitte etwas kompakter */
  .card, .plan, .trust__item { padding: 1.5rem 1.25rem; }
  .post-card > a { padding: 1.4rem 1.25rem; }
  .feature-ico { width: 46px; height: 46px; border-radius: 13px; }
  .feature-ico .ico { width: 22px; height: 22px; }
}

@media (max-width: 400px) {
  .hero__badge { font-size: 0.75rem; }
  .brand__text b { font-size: 0.9rem; }
  .brand__mark { width: 36px; height: 36px; }
  .fab a, .fab button { width: 46px; height: 46px; }
  .fab .ico { width: 19px; height: 19px; }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .fab, .hero__canvas, .hero__glow, .booking__embed { display: none !important; }
  body { background: #fff; color: #111; }
  h1, h2, h3, h4 { color: #000; }
}