.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
/* profimedien.ai · Landingpage KI-Ready-Check
   Dunkler Look, Türkis-Grün-Verlauf als Leitfarbe, Gelb nur als Signal */

/* Ubuntu lokal eingebunden, kein externer Font-Dienst */
@font-face { font-family: Ubuntu; src: url("../../files/themes/profimedien-ai/css/font/Ubuntu-Light.woff2") format("woff2");   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Ubuntu; src: url("../../files/themes/profimedien-ai/css/font/Ubuntu-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Ubuntu; src: url("../../files/themes/profimedien-ai/css/font/Ubuntu-Medium.woff2") format("woff2");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Ubuntu; src: url("../../files/themes/profimedien-ai/css/font/Ubuntu-Bold.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg:        #121316;
  --bg-2:      #17191D;
  --surface:   #1E2126;
  --surface-2: #24282E;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --text:      #F1F3F5;
  --muted:     #9BA2AA;
  --tq:        #00E7D7;
  --tq-2:      #24D6B9;
  --gr:        #64E983;
  --ye:        #F7ED07;
  --grad:      linear-gradient(125deg, #00E7D7 0%, #24D6B9 45%, #64E983 100%);

  --wrap: 1180px;
  --pad: 24px;
  --r: 18px;
  --r-sm: 12px;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--tq); text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrap-narrow { max-width: 820px; }

section { position: relative; padding: var(--s8) 0; }
section.tight { padding: var(--s6) 0; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
  /* verteilt die Zeilen gleichmäßig, damit nie ein einzelnes Wort allein steht */
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 4.9vw, 3.6rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* Fließtext: letzte Zeile bekommt mindestens zwei Wörter */
p, li, .lead, figcaption, label, .faq-a { text-wrap: pretty; }

/* kurze Auszeichnungen und Schaltflächen sollen gar nicht erst umbrechen */
.eyebrow, .btn, .hero-badge, .sim-chip { text-wrap: balance; }

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  color: var(--muted);
  line-height: 1.6;
  font-weight: 300;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tq);
  margin-bottom: var(--s3);
}

/* Signet: das M aus der Wortmarke, ersetzt jeden dekorativen Strich */
.eyebrow::before {
  content: "";
  width: 26px;
  height: 19px;
  background: url("../../files/themes/profimedien-ai/css/m-signet.png") center/contain no-repeat;
  flex: 0 0 auto;
}

/* hält Eigennamen mit Bindestrich zusammen, etwa Baden-Württemberg */
.nowrap { white-space: nowrap; }

/* Ortsbezug bleibt in der H1, tritt aber optisch hinter die Aussage zurück */
.h1-ort {
  display: block;
  margin-top: 14px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.muted { color: var(--muted); }

.section-head { max-width: 760px; margin-bottom: var(--s6); }
.section-head p { margin-top: var(--s3); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 30px;
  border: 0;
  border-radius: 100px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, color .25s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--grad);
  color: #0C1512;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,231,215,.22);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,231,215,.36);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-2);
}

.btn-ghost:hover {
  border-color: var(--tq);
  color: var(--tq);
  transform: translateY(-3px);
}

.btn-sm { padding: 12px 22px; font-size: .93rem; }

.btn .arr { transition: transform .25s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 20px 0;
  transition: background .35s, padding .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}

.site-header.stuck {
  background: rgba(18,19,22,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  padding: 12px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.site-header .wrap > a:first-child { flex: 0 0 auto; }
.site-header .logo { height: 50px; width: auto; max-width: none; transition: height .35s; }
.site-header.stuck .logo { height: 42px; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.nav a {
  color: var(--muted);
  font-size: .95rem;
  transition: color .2s;
}

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

/* ---------- Hero ---------- */

.hero {
  padding: 190px 0 var(--s8);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s7);
  align-items: center;
}

.hero h1 { margin-bottom: var(--s3); }

.hero .lead { max-width: 44ch; margin-bottom: var(--s5); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

/* Bewusst keine Pille und kein Rahmen: der Hinweis steht neben zwei
   Schaltflächen und soll nicht wie eine dritte aussehen. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: .88rem;
  color: var(--muted);
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ye);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(247,237,7,.45);
  animation: pulse 3.2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(247,237,7,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(247,237,7,0); }
  100% { box-shadow: 0 0 0 0 rgba(247,237,7,0); }
}

/* Hero-Hintergrund: bewegter Verlauf */

.hero-bg {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 900px;
  z-index: -1;
  pointer-events: none;
}

/* Wrapper trägt die Mausbewegung, der Blob darin sein eigenes Driften */
.blob-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .32;
  will-change: transform;
}

.blob-1 {
  width: 620px; height: 620px;
  background: #00E7D7;
  top: 4%; right: 2%;
  animation: drift1 22s ease-in-out infinite;
}

.blob-2 {
  width: 520px; height: 520px;
  background: #64E983;
  top: 34%; right: 26%;
  opacity: .2;
  animation: drift2 27s ease-in-out infinite;
}

.blob-3 {
  width: 440px; height: 440px;
  background: #24D6B9;
  top: 12%; left: 2%;
  opacity: .14;
  animation: drift3 31s ease-in-out infinite;
}

@keyframes drift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-70px, 60px) scale(1.12); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(80px, -50px) scale(.9); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(50px, 70px) scale(1.15); }
}

/* Hero-Visual: Simulation des Checks, endet im Score */

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
}

.check-sim { width: 100%; max-width: 450px; }

/* Chips = die vier Dimensionen */

/* Die vier Dimensionen sitzen als Reiter auf dem Fenster, wie in einem Browser.
   Bewusst keine Schaltflächen-Optik, damit sie nicht mit den CTAs konkurrieren. */
.sim-chips {
  display: flex;
  gap: 3px;
  margin-bottom: 0;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.sim-chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 7px 10px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: rgba(255,255,255,.022);
  font-size: .72rem;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s, background .35s, border-color .35s;
}

/* der aktive Reiter sitzt auf dem Fensterkopf auf */
.sim-chip.on {
  color: var(--text);
  background: #191B1F;
  border-color: var(--line-2);
  font-weight: 500;
  margin-bottom: -1px;
  padding-bottom: 11px;
}

/* bereits durchlaufen: nur ein Punkt als Marke, keine Farbfläche */
.sim-chip.fertig { color: rgba(0,231,215,.85); }

.sim-chip.fertig::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tq);
  margin-right: 6px;
  vertical-align: middle;
}

/* Fenster */

.sim-window {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #0E0F12;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.sim-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--line);
}

.sim-bar span { width: 11px; height: 11px; border-radius: 50%; background: #3A3F46; }
.sim-bar span:nth-child(1) { background: #E5534B; }
.sim-bar span:nth-child(2) { background: #E0B341; }
.sim-bar span:nth-child(3) { background: #4AA85A; }

.sim-body { padding: 22px 20px 20px; min-height: 268px; }

.sim-q {
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--tq);
  min-height: 3em;
}

.sim-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--gr);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.sim-a {
  margin: 0 0 var(--s3);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
  min-height: 2.6em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s, transform .4s;
}

.sim-a.zeigen { opacity: 1; transform: none; }

/* Balken je Dimension */

.sim-scores { display: grid; gap: 11px; }

.sim-row {
  display: grid;
  grid-template-columns: 92px 1fr 28px;
  align-items: center;
  gap: 11px;
  font-size: .76rem;
  color: #6D747C;
  opacity: .45;
  transition: opacity .4s, color .4s;
}

.sim-row.aktiv { opacity: 1; color: var(--muted); }

.sim-row .track {
  height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}

.sim-row .track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--grad);
  transition: width 1s cubic-bezier(.16,.84,.44,1);
}

.sim-row .val { text-align: right; font-variant-numeric: tabular-nums; }

/* Ergebnis-Ansicht, legt sich über den Fensterinhalt */

.sim-result {
  position: absolute;
  inset: 46px 0 0 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: #0E0F12;
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
  transition: opacity .5s, transform .5s cubic-bezier(.16,.84,.44,1);
}

.sim-result.zeigen { opacity: 1; transform: none; }

.sim-stufe {
  margin-top: 6px;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid rgba(0,231,215,.4);
  background: rgba(0,231,215,.09);
  color: var(--tq);
  font-size: .85rem;
  font-weight: 500;
}

.sim-note { font-size: .72rem; color: #5D646C; letter-spacing: .06em; }

.ring-card {
  position: relative;
  width: 186px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(0,231,215,.1), transparent 62%);
}

.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }

/* Track als fünf Segmente: die fünf Reifestufen 0-29, 30-49, 50-79, 80-94, 95-100.
   Umfang bei r=48 ist 301.6, die Segmente entsprechen 30/20/30/15/5 Prozent. */
.ring-track {
  fill: none;
  stroke: rgba(255,255,255,.09);
  stroke-width: 2;
  stroke-dasharray: 86.5 4 56.3 4 86.5 4 41.2 4 11.1 4;
}

.ring-arc {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 301.6;
  stroke-dashoffset: 301.6;
}

/* Trennmarken an den Stufengrenzen, liegen über dem Bogen */
.ring-ticks {
  fill: none;
  stroke: var(--bg);
  stroke-width: 5;
  stroke-dasharray: 0 86.5 4 56.3 4 86.5 4 41.2 4 11.1 4;
}

/* Aufleuchten, sobald die 80 erreicht ist */
.ring-card.done .ring-arc { animation: arcGlow 1.5s ease-out; }

@keyframes arcGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(0,231,215,0)); }
  35%  { filter: drop-shadow(0 0 12px rgba(0,231,215,.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(0,231,215,0)); }
}

.ring-card.done { animation: breathe 6s ease-in-out 1.2s infinite; }

@keyframes breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.018); }
}

.ring-core { text-align: center; z-index: 1; }
.ring-core .big {
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.ring-core .cap {
  display: block;
  margin: 7px auto 0;
  font-size: .65rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Trust-Zeile ---------- */

.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: var(--s5) 0;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: .97rem;
  color: var(--muted);
  line-height: 1.5;
}

.trust-item strong { color: var(--text); font-weight: 500; }

.trust-item .ic {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0,231,215,.11);
  color: var(--tq);
  margin-top: 1px;
}

/* Logo-Leiste */

.logos {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.logos-cap {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6D747C;
  margin-bottom: var(--s3);
}

/* Laufende Logo-Leiste, Logos einheitlich hell */

.logo-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: max-content;
  animation: marquee 74s linear infinite;
}

.logo-marquee:hover .logo-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* feste Box je Logo, damit unterschiedliche Seitenverhältnisse gleich wirken */
.logo-track img {
  width: 138px;
  height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .52;
  transition: opacity .25s;
  flex: 0 0 auto;
}

.logo-track img:hover { opacity: .9; }

/* ---------- Karten-Raster ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }

.card {
  position: relative;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, background .3s;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.3,1);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-2);
  background: var(--surface-2);
}

.card:hover::before { transform: scaleX(1); }

.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: .97rem; margin: 0; }

.card-ic {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(0,231,215,.1);
  color: var(--tq);
  margin-bottom: var(--s3);
  transition: background .3s, transform .3s;
}

.card:hover .card-ic { background: rgba(0,231,215,.18); transform: scale(1.06); }

.card-num {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tq);
  margin-bottom: 14px;
}

/* ---------- Check-Sektion ---------- */

.check-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: start;
}

.check-list { list-style: none; margin: 0; padding: 0; }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.check-list li:last-child { border-bottom: 0; }

.check-list .tick {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #0C1512;
  margin-top: 2px;
}

.price-box {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r);
  border: 1px solid rgba(247,237,7,.24);
  background: linear-gradient(140deg, rgba(247,237,7,.07), rgba(247,237,7,.02));
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.price-old {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(247,237,7,.6);
}

.price-new {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ye);
  line-height: 1;
}

.price-box p { font-size: .97rem; color: var(--muted); margin: 0; }

/* ---------- Ablauf ---------- */

/* Score-Skala */

.scale {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.scale-head { margin-bottom: var(--s4); }
.scale-head h3 { font-size: 1.15rem; margin-bottom: 8px; }
.scale-head p { font-size: .95rem; margin: 0; }

/* Laufender Score-Balken, füllt sich beim Scrollen auf 80 */

.meter {
  position: relative;
  margin: var(--s4) 0 var(--s5);
  padding-top: 38px;
}

.meter-marke {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  transition: left 1.7s cubic-bezier(.16,.84,.44,1);
}

.meter-marke b {
  display: block;
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--grad);
  color: #0C1512;
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(0,231,215,.28);
}

.meter-marke::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: var(--gr);
}

.meter-track {
  height: 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}

.meter-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--grad);
  transition: width 1.7s cubic-bezier(.16,.84,.44,1);
}

.meter-enden {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: .75rem;
  color: #6D747C;
}

.scale-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.scale-bar .lv {
  display: block;
  padding: 16px 14px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: .93rem;
  font-weight: 500;
  color: var(--muted);
  transition: transform .3s, border-color .3s, color .3s;
}

.scale-bar .lv em {
  display: block;
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .1em;
  color: #6D747C;
  margin-bottom: 7px;
}

.scale-bar .lv:hover { transform: translateY(-4px); border-color: var(--line-2); }

.scale-bar .lv.on {
  border-color: rgba(0,231,215,.4);
  background: linear-gradient(145deg, rgba(0,231,215,.1), rgba(100,233,131,.05));
  color: var(--text);
}

.scale-bar .lv.on em { color: var(--tq); }

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), var(--line-2), transparent);
}

.step { position: relative; padding-top: 0; }

.step-dot {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--s3);
  position: relative;
  z-index: 1;
  transition: border-color .3s, color .3s, box-shadow .3s;
}

.step:hover .step-dot {
  border-color: var(--tq);
  color: var(--tq);
  box-shadow: 0 0 26px rgba(0,231,215,.22);
}

.step h3 { font-size: 1.12rem; margin-bottom: 10px; }
.step p { font-size: .95rem; color: var(--muted); margin: 0; }

.step-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: .97rem;
}

.step-note::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 22px;
  margin-top: 2px;
  background: url("../../files/themes/profimedien-ai/css/m-signet.png") center/contain no-repeat;
}

/* ---------- Zahlen ---------- */

.stats { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

.stat {
  text-align: center;
  padding: var(--s4) var(--s3);
}

.stat .num {
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.stat p { font-size: .97rem; color: var(--muted); margin: 0; max-width: 30ch; margin-inline: auto; }

.stat.todo .num { background: none; color: #5A6069; -webkit-text-fill-color: #5A6069; }

.stat-hint {
  margin-top: var(--s4);
  text-align: center;
  font-size: .85rem;
  color: #6D747C;
}

/* Warum wir das machen: steht unter den Zahlen, aber deutlicher als die Fußnote */
.stat-regio {
  max-width: 62ch;
  margin: var(--s5) auto 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
}

.stat-regio strong {
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Zitat unter den Problem-Karten: der Satz bekommt ein Gesicht */
.zitat {
  max-width: 760px;
  margin: var(--s6) auto 0;
  padding: 0;
  text-align: center;
}

.zitat blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zitat figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: var(--s3);
}

.zitat figcaption img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.zitat figcaption span {
  text-align: left;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--muted);
}

.zitat figcaption strong {
  display: block;
  font-weight: 500;
  color: var(--text);
}

/* ---------- Leistungen ---------- */

.svc {
  display: block;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, background .3s;
}

.svc:hover { transform: translateY(-6px); border-color: var(--tq); background: var(--surface-2); }

.svc h3 { font-size: 1.15rem; margin-bottom: 10px; }
.svc p { font-size: .94rem; color: var(--muted); margin: 0 0 var(--s3); }

.svc .go { font-size: .88rem; color: var(--tq); display: inline-flex; align-items: center; gap: 7px; }
.svc:hover .go .arr { transform: translateX(4px); }

/* ---------- Team ---------- */

.team-split { display: grid; grid-template-columns: 1fr .8fr; gap: var(--s7); align-items: center; }

.team-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.person {
  padding: var(--s4) var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
  transition: border-color .3s, transform .3s;
}

.person:hover { border-color: var(--line-2); transform: translateY(-4px); }

.portrait {
  width: 168px; height: 168px;
  margin: 0 auto var(--s2);
  border-radius: 50%;
  overflow: hidden;
  padding: 3px;
  background: var(--grad);
}

.portrait img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.person .nm { font-weight: 500; font-size: 1.05rem; }
.person .ro { font-size: .87rem; color: var(--muted); margin-top: 4px; }
.person .tx { font-size: .87rem; color: var(--muted); margin-top: 12px; line-height: 1.5; }

.todo-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(247,237,7,.12);
  border: 1px solid rgba(247,237,7,.3);
  color: #E8DE6A;
  font-size: .72rem;
  letter-spacing: .04em;
}

/* ---------- FAQ ---------- */

.faq { max-width: 860px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 24px 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}

.faq-q:hover { color: var(--tq); }

.faq-ic {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .3s, background .3s;
}

.faq-item.open .faq-ic { transform: rotate(45deg); border-color: var(--tq); background: rgba(0,231,215,.1); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2,.8,.3,1);
}

.faq-a p {
  padding: 0 60px 26px 0;
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

/* ---------- Formular ---------- */

.form-section {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.form-glow {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: #00E7D7;
  filter: blur(150px);
  opacity: .13;
  top: -220px; left: 50%;
  margin-left: -350px;
  pointer-events: none;
}

.form-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 26px;
  overflow: hidden;
}

/* Signet als dezentes Wasserzeichen */
.form-card::before {
  content: "";
  position: absolute;
  top: -34px;
  right: -26px;
  width: 240px;
  height: 174px;
  background: url("../../files/themes/profimedien-ai/css/m-signet.png") center/contain no-repeat;
  opacity: .07;
  pointer-events: none;
}

.form-head { text-align: center; margin-bottom: var(--s5); }
.form-head h2 { margin-bottom: var(--s2); }
.form-head p { color: var(--muted); margin: 0; }

.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.f-full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: .87rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}

.field label .req { color: var(--tq); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA2AA' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}

.field textarea { min-height: 116px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--tq);
  box-shadow: 0 0 0 3px rgba(0,231,215,.13);
  background: var(--bg-2);
}

.field input::placeholder,
.field textarea::placeholder { color: #5F666E; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: var(--s2) 0 var(--s4);
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
}

.consent input {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 2px;
  accent-color: var(--tq);
  cursor: pointer;
}

.form-actions { text-align: center; }
.form-actions .btn { width: 100%; max-width: 360px; }


/* ---------- Footer ---------- */

.site-footer {
  padding: var(--s6) 0 var(--s4);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.site-footer .logo { height: 56px; width: auto; margin-bottom: var(--s3); }

.foot-brand p { font-size: .93rem; color: var(--muted); max-width: 34ch; }

.foot-col h4 {
  font-size: .8rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #6D747C;
  font-weight: 500;
  margin-bottom: var(--s2);
}

.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 10px; }

/* Kontaktzeilen mit Bootstrap-Icons, lokal eingebettet */
.foot-contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
}

.foot-contact .bi {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  color: var(--tq);
}

.foot-contact span { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.foot-col a, .foot-col span { color: var(--muted); font-size: .95rem; transition: color .2s; }
.foot-col a:hover { color: var(--tq); }

.foot-bottom {
  padding-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: .87rem;
  color: #6D747C;
}

.foot-bottom nav { display: flex; gap: var(--s3); }
.foot-bottom a { color: #6D747C; }
.foot-bottom a:hover { color: var(--text); }

/* ---------- Cookie-Hinweis ---------- */

.cookie-hinweis {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 200;
  width: calc(100% - 48px);
  max-width: 720px;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 18px 22px;
  background: rgba(30,33,38,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  animation: ckRein .5s cubic-bezier(.2,.8,.3,1);
}

.cookie-hinweis[hidden] { display: none; }

@keyframes ckRein {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.cookie-hinweis p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted);
}

.cookie-hinweis .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .cookie-hinweis {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    bottom: 16px;
    width: calc(100% - 32px);
  }
}

/* ---------- Scroll-Reveal ---------- */

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}

.rv.is-visible { opacity: 1; transform: none; }

.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .nav { gap: var(--s3); }
}

/* ---------- Freie Plätze über dem Formular ---------- */

.plaetze {
  max-width: 520px;
  margin: 0 auto var(--s4);
  text-align: left;
}

.plaetze-zeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.plaetze-zahl {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.plaetze-text { font-size: 1rem; color: var(--text); }
.plaetze-text b { font-weight: 500; }
.plaetze-text .monat { color: var(--ye); font-weight: 500; }

.plaetze-balken {
  position: relative;
  height: 13px;
  border-radius: 100px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 9px;
}

.plaetze-balken i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 100px;
  background: var(--grad);
  transition: width 1.4s cubic-bezier(.2,.8,.3,1);
}

.plaetze-balken.laeuft i { width: var(--anteil); }

.plaetze-skala {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: .82rem;
}

@media (prefers-reduced-motion: reduce) {
  .plaetze-balken i { transition: none; }
}

/* ---------- Menü für schmale Geräte ---------- */

.menue-schalter {
  display: none;
  width: 44px;
  height: 40px;
  flex: 0 0 auto;
  padding: 11px 9px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  cursor: pointer;
}

.menue-schalter span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s;
}

.menue-schalter span + span { margin-top: 4.5px; }

.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menue {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: 104px var(--pad) var(--s5);
  background: rgba(18,19,22,.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow-y: auto;
  opacity: 0;
  transition: opacity .28s ease;
}

.menue[hidden] { display: none; }
.menue.offen { opacity: 1; }

.menue-links { display: flex; flex-direction: column; }

.menue-links a {
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(10px);
  transition: color .2s;
}

.menue.offen .menue-links a { animation: menueEin .42s cubic-bezier(.2,.8,.3,1) forwards; }
.menue.offen .menue-links a:nth-child(1) { animation-delay: .04s; }
.menue.offen .menue-links a:nth-child(2) { animation-delay: .08s; }
.menue.offen .menue-links a:nth-child(3) { animation-delay: .12s; }
.menue.offen .menue-links a:nth-child(4) { animation-delay: .16s; }
.menue.offen .menue-links a:nth-child(5) { animation-delay: .20s; }
.menue.offen .menue-links a:nth-child(6) { animation-delay: .24s; }

@keyframes menueEin { to { opacity: 1; transform: none; } }

.menue-links a:active { color: var(--tq); }

.menue-kontakt { margin-top: auto; padding-top: var(--s3); }
.menue-kontakt .eyebrow { margin-bottom: var(--s2); }

.menue-kontakt a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-size: 1rem;
  padding: 9px 0;
}

.menue-kontakt a svg { color: var(--tq); flex: 0 0 auto; }

.menue-cta { width: 100%; }

.menue-fuss {
  color: var(--muted);
  font-size: .84rem;
  text-align: center;
  margin: 0;
}

body.menue-offen { overflow: hidden; }

@media (max-width: 1040px) {
  .nav { display: none; }
  .menue-schalter { display: block; }

  /* Der KI-Check steckt im Menü, oben bleibt es dadurch ruhig */
  .kopf-cta { display: none; }

  /* Ohne Scrollen liegt hier der Farbnebel des Heros hinter der Kopfzeile.
     Deshalb gilt der abgesetzte Grund sofort, nicht erst ab .stuck. */
  .site-header {
    background: rgba(18,19,22,.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--line);
  }
}

/* Ab hier wird die längste Beschriftung knapp. Statt vier abgeschnittener
   Reiter steht nur noch der, der gerade abgefragt wird, und wechselt mit der
   Simulation durch. */
@media (max-width: 1060px) {
  .sim-chip { display: none; }

  .sim-chip.on,
  .sim-chips:not(:has(.sim-chip.on)) .sim-chip:last-child {
    display: block;
    flex: 0 1 auto;
    padding-inline: 16px;
    font-size: .78rem;
  }
}

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-visual { max-width: 340px; margin: 0 auto; }
  .check-split, .team-split { grid-template-columns: 1fr; gap: var(--s5); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s3); }
  .steps::before { display: none; }
  .scale-bar { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: var(--s7) 0; }
  .hero { padding: 150px 0 var(--s7); }
  .nav { display: none; }
  .grid-3, .grid-2, .trust-row, .stat-row { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }
  .form-card { padding: var(--s4) var(--s3); }
  .logo-row { gap: var(--s2) var(--s3); }
  .logo-mark { font-size: .9rem; }
  .faq-a p { padding-right: 0; }
  .btn { width: 100%; }
  .hero-cta { flex-direction: column; }
  .site-header .btn { width: auto; padding: 11px 18px; font-size: .88rem; }
  .site-header .logo { height: 38px; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: 1fr; }
  .scale-bar { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}

/* ------------------------------------------------- Newsletter-Einstiege */
/* Footer: Button mit Pfeil, fuehrt zur Anmeldesektion der Startseite. */
#footer .foot-nl-text, .foot-nl-text { margin-top: var(--s3); color: var(--muted); font-size: .95rem; }
.foot-nl-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s1);
  padding: 13px 24px; border-radius: var(--r-sm); background: var(--grad);
  color: #0B0C0E !important; font-weight: 700; text-decoration: none; transition: .2s;
}
.foot-nl-btn::after { content: "\2192"; font-size: 1.1em; line-height: 1; transition: transform .2s; }
.foot-nl-btn:hover { filter: brightness(1.08); }
.foot-nl-btn:hover::after { transform: translateX(4px); }

/* Slide-in: dunkle Karte rechts unten, gleiche Sprache wie die Sektionen. */
.nl-layer { position: fixed; right: 20px; bottom: 20px; z-index: 950;
  width: min(360px, calc(100vw - 40px)); opacity: 0; transform: translateY(24px);
  transition: opacity .3s ease, transform .3s ease; }
.nl-layer.ist-offen { opacity: 1; transform: translateY(0); }
.nl-layer[hidden] { display: none !important; }
.nl-layer:not(.ist-offen) { pointer-events: none; }
.nl-layer.ist-offen { pointer-events: auto; }
.nl-layer-box { position: relative; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55); }
.nl-layer-box h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--text); }
.nl-layer-box > p { margin: 0 0 16px; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.nl-layer-box a { color: var(--tq); }
.nl-layer-zu { position: absolute; top: 6px; right: 10px; background: none; border: 0;
  padding: 4px 8px; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.nl-layer-zu:hover { color: var(--tq); }
.nl-layer-form input[type="text"], .nl-layer-form input[type="email"] {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; }
.nl-layer-form input:focus { outline: 2px solid var(--tq); outline-offset: 1px; border-color: transparent; }
.nl-layer-form label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.nl-layer-form .checkbox_container label { display: inline; font-size: .82rem; line-height: 1.5; }
.nl-layer-form .widget { margin-bottom: 12px; }
.nl-layer-form .submit { width: 100%; padding: 13px 20px; border: 0; border-radius: var(--r-sm);
  background: var(--grad); color: #0B0C0E; font-weight: 700; cursor: pointer; }
.nl-layer-form .submit:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
  .nl-layer { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .nl-layer-box { padding: 20px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-layer { transition: opacity .2s ease; transform: none; }
}

/* Zweite Gelegenheit in der Bestaetigung des KI-Ready-Checks: nur sichtbar,
   wenn im Formular kein Newsletter-Haken gesetzt war. */
.nl-zweitchance { position: relative; margin-top: var(--s4); padding: 22px 24px 18px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.nl-zweitchance::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad); }
.nl-zweitchance-titel { margin: 0 0 6px; font-weight: 700; color: var(--text); }
.nl-zweitchance p { margin: 0 0 10px; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.nl-zweitchance-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 11px 20px; border-radius: var(--r-sm); background: var(--grad); color: #0B0C0E !important;
  font-weight: 700; text-decoration: none; }
.nl-zweitchance-btn::after { content: "\2192"; }
.nl-zweitchance-btn:hover { filter: brightness(1.08); }

/* profimedien.ai · Contao-Ergänzungen
   ------------------------------------------------------------------
   Das Markup entspricht dank eigener Templates der Vorlage, deshalb
   greift style.css unverändert. Hier stehen nur die Stellen, an denen
   Contao zwingend eigenes Markup erzeugt.
   ------------------------------------------------------------------ */

/* Layout-Gerüst von Contao: Kopf- und Fußzeile sowie der Inhaltsbereich
   sollen keine eigene Breite oder Abstände beisteuern. */
#wrapper,
#container,
#main,
#main > .inside,
#header,
#header > .inside,
#footer,
#footer > .inside {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Sprungmarken der Navigationsmodule und das Pflichtfeld-Präfix im Formular */
.invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Der Formulargenerator setzt das Formular in einen Wrapper und ergänzt
   Fehlermeldungen sowie das Spamschutz-Feld, beides kennt die Vorlage nicht. */
.ce_form { margin: 0; }

.field p.error,
.form-card p.error {
  margin: 0 0 8px;
  color: #FF8A8A;
  font-size: .88rem;
}

.widget-altcha { margin-bottom: var(--s3); }

/* ALTCHA bringt einen eigenen grauen Kasten mit. Der passt nicht zum
   Formular, das Widget läuft ohne Rahmen mit. */
.widget-altcha .altcha {
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Das Feld-Label „Spam-Schutz" wiederholt nur, was die Checkbox daneben schon
   sagt. Optisch weg, damit die Checkbox direkt unter dem vorigen Feld sitzt.
   Für Screenreader bleibt es erhalten, weil es zum Eingabefeld gehört. */
.widget-altcha > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Zeile „Geschützt durch ALTCHA" unter der Checkbox. Die Bibliothek steht unter
   MIT, die verlangt den Lizenzhinweis in der Datei, nicht in der Oberfläche. */
.altcha-footer { display: none; }

/* Bestätigungstext nach dem Absenden */
.ce_form .confirmation { text-align: center; color: var(--tq); }

/* Die Vorlage nutzt an sechs Stellen Inline-Styles. tl_content hat in Contao 5.3
   keine style-Spalte, deshalb dieselben Werte als Klasse. */
.card--p40 { padding: 40px; }
.h3--mb24 { margin-bottom: 24px; }
.btn--block { margin-top: 32px; width: 100%; }
.head--640 { max-width: 640px; }
.head--center { text-align: center; margin-inline: auto; }
.portrait--marco img { object-position: 41% 30%; }
.portrait--julia img { object-position: 56% 26%; }

/* Stapelreihenfolge auf schmalen Geräten: Cookiebar 9999 < Menü 10000 < Kopfzeile.
   Die Cookiebar deckt beim ersten Besuch den ganzen Viewport, ohne die Anhebung
   öffnet das Menü dahinter und wirkt, als ginge es gar nicht auf. Die Kopfzeile
   muss wiederum über dem Menü liegen, sonst verdeckt das Panel den Schalter zum
   Schließen (das Panel hält oben 104px frei, genau dafür). */
.menue { z-index: 10000; }
.site-header { z-index: 10001; }

/* ---------- Cookiebar (oveleon/contao-cookiebar) ----------
   Optik nach dem Vorbild von .cookie-hinweis in style.css:
   dunkle Karte, heller Rahmen, 18px Radius, Ubuntu, Verlaufs-Button. */

.contao-cookiebar,
.contao-cookiebar * { font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.contao-cookiebar .cc-inner {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  max-width: 720px;
}

.contao-cookiebar .cc-head,
.contao-cookiebar .cc-info,
.contao-cookiebar .cc-cookie-desc,
.contao-cookiebar .cc-group p { color: var(--muted); font-size: .95rem; line-height: 1.6; }

.contao-cookiebar .cc-head { color: var(--text); }
.contao-cookiebar a { color: var(--tq); }

.contao-cookiebar .cc-group,
.contao-cookiebar .cc-cookie {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

html body .contao-cookiebar .cc-btn {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  padding: 12px 22px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, color .25s;
}

html body .contao-cookiebar .cc-btn:hover { border-color: var(--tq); color: var(--tq); transform: translateY(-2px); }

/* Zustimmen entspricht .btn.btn-primary */
html body .contao-cookiebar .cc-btn.success,
html body .contao-cookiebar .cc-btn.save {
  background: var(--grad);
  border: 0;
  color: #0C1512;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,231,215,.22);
}

html body .contao-cookiebar .cc-btn.success:hover,
html body .contao-cookiebar .cc-btn.save:hover {
  color: #0C1512;
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,231,215,.36);
}

.contao-cookiebar input[type="checkbox"] { accent-color: var(--tq); }

/* eRecht24-Rechtstexte: die vom Generator gelieferte H1 ausblenden,
   die eigene Contao-Seitenüberschrift steht bereits darüber (sonst doppelt) */
.ce_er24_legal_text h1 { display: none; }

/* ============ Accessibility: WCAG-AA-Kontraste (Lighthouse) ============ */

/* Das ALTCHA-Logo ist ein Link mit aria-hidden="true", also fokussierbar und
   für Screenreader zugleich versteckt. Aus dem Tab-Fluss nehmen. */
.altcha-logo { display: none; }

/* Gedämpftes Grau #6D747C erreicht auf dem dunklen Grund nur 3,9:1. Auf ein
   Grau mit ausreichendem Kontrast heben (rund 5,5:1). */
.logos-cap,
.foot-bottom span,
.foot-bottom a { color: #868D96; }

/* Footer-Spaltenüberschriften sind jetzt h3 statt h4 (die Reihenfolge sprang
   vorher von h2 auf h4). Optik unverändert wie zuvor die h4, plus der
   kontraststärkere Grauton. */
.foot-col h3 {
  font-size: .8rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #868D96;
  font-weight: 500;
  margin-bottom: var(--s2);
}

/* Inaktive Terminal-Zeilen im Hero waren mit #6D747C bei 45% Deckung zu dunkel
   (1,7:1). Heller, aber über die niedrige Deckung weiter gedämpft (rund 5:1).
   Der aktive Zustand bleibt klar abgesetzt. */
.check-sim .sim-row:not(.aktiv) { color: #CDD2D8; opacity: .62; }

/* Farbnebel im Hero abschwächen, damit das türkise Eyebrow darüber genügend
   Kontrast hat (lag über einem grünen Blob bei nur 3:1). */
.hero .blob-1 { opacity: .18; }
.hero .blob-2 { opacity: .12; }
.hero .blob-3 { opacity: .09; }

/* Inaktive Terminal-Reiter hatten eine fast durchsichtige Fläche, dadurch schien
   der Farbnebel durch und das Grau fiel unter 4,5:1. Opake dunkle Fläche, dann
   trägt das gedämpfte Grau wieder. Der aktive Reiter (.on) hebt sich weiter ab. */
.check-sim .sim-chip:not(.on) { background: var(--bg); }

/* Die Fußnote im Ergebnis war mit #5D646C dauerhaft zu dunkel (3,3:1). */
.check-sim .sim-note { color: #868D96; }

/* Antwortzeile und Ergebnisfläche blendeten über die Deckkraft ein. Wird ein
   solcher Zwischenschritt gemessen, liegt der Text kurzzeitig weit unter dem
   Kontrastminimum. Die Deckkraft schaltet jetzt hart, die Bewegung bleibt.
   Damit ist Text immer entweder unsichtbar oder voll lesbar. */
.check-sim .sim-a { transition: transform .4s; }
.check-sim .sim-result { transition: transform .5s cubic-bezier(.16,.84,.44,1); }

/* Cookiebar-Fließtext: die Bundle-CSS setzt die <p> auf #868686 (nur 4,4:1).
   Mit ausreichendem Kontrast überschreiben. */
.contao-cookiebar .cc-head p,
.contao-cookiebar .cc-info p,
.contao-cookiebar .cc-cookie-desc p,
.contao-cookiebar .cc-group p { color: var(--muted); }

/* ====== WebKit/iOS: Kompositions-Last auf schmalen Geräten senken ======
   Blur-Flächen von 120 bis 150 px auf großen, teils animierten Ebenen bremsen
   Safari auf dem iPhone sekundenlang aus. Weil der Inhalt bis zum Auslösen des
   Observers auf opacity 0 steht, wirkt die Seite in dieser Zeit leer.
   Auf schmalen Geräten erzeugen weiche Verläufe denselben Farbnebel, ohne dass
   eine Blur-Ebene gerastert werden muss. Die backdrop-filter liegen ohnehin auf
   fast deckendem Grund (Alpha .82 bis .97), dort fällt optisch nichts weg.
   Der Desktop bleibt unverändert. */
@media (max-width: 900px) {
  .blob {
    filter: none;
    animation: none;
    will-change: auto;
  }

  .blob-1 { background: radial-gradient(circle, #00E7D7 0%, rgba(0,231,215,0) 70%); }
  .blob-2 { background: radial-gradient(circle, #64E983 0%, rgba(100,233,131,0) 70%); }
  .blob-3 { background: radial-gradient(circle, #24D6B9 0%, rgba(36,214,185,0) 70%); }

  .form-glow {
    filter: none;
    background: radial-gradient(circle, #00E7D7 0%, rgba(0,231,215,0) 70%);
  }

  .site-header,
  .site-header.stuck,
  .menue {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============ Layout-Feinschliff (Expert-Feedback) ============ */

/* Ready-Check-Sektion: die rechte Karte wird auf die volle Höhe der linken
   Spalte gezogen, damit ihre Unterkante mit der Preis-Box abschließt. Der CTA
   sitzt dabei am Kartenende. Greift nur zweispaltig, mobil ist es einspaltig. */
.check-split { align-items: stretch; }
.check-split > .rv.rv-d1 > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.check-split .btn--block { margin-top: auto; }

/* Mobil: die Karten-Sektionen liefen eine Karte pro Zeile und machten die Seite
   sehr lang. Zwei Spalten halbieren die Länge. Eine ungerade letzte Karte
   (Problem: 3, Ablauf: 5) läuft über beide Spalten, damit keine halbe Lücke
   bleibt. Innenabstände enger, damit bei schmaler Spalte Platz bleibt. */
@media (max-width: 760px) {
  #problem .grid-3,
  #methodik .grid-4,
  #usecases .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  #problem .grid-3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  #problem .grid-3 > .card,
  #methodik .grid-4 > .card,
  #usecases .grid-4 > .card {
    padding: 18px;
  }

  #methodik .grid-4 > .card h3,
  #usecases .grid-4 > .card h3 {
    font-size: 1.02rem;
  }
}

/* ---- Fade-Karussell (mobil): Karten liegen übereinander, es wird immer nur
   eine gezeigt und sanft übergeblendet. Spart Höhe. Genutzt für die Reifestufen
   und die Ablauf-Schritte. Steuerung (Punkte, Pfeile) baut site.js dazu. ---- */
.fade-steuer { display: none; }

@media (max-width: 760px) {
  .fade-karussell {
    display: block;
    position: relative;
  }

  .fade-karussell > .fade-item {
    position: absolute;
    top: 0; left: 0; right: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
  }

  .fade-karussell > .fade-item.sichtbar {
    opacity: 1;
    pointer-events: auto;
  }

  .steps.fade-karussell::before { display: none; }

  .fade-steuer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
  }

  .fade-punkte { display: flex; gap: 9px; }

  .fade-punkt {
    width: 8px; height: 8px;
    padding: 0; border: 0;
    border-radius: 50%;
    background: var(--line-2);
    transition: background .3s, transform .3s;
    cursor: pointer;
  }

  .fade-punkt.an { background: var(--tq); transform: scale(1.3); }

  .fade-pfeil {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
  }

  .fade-pfeil:active { border-color: var(--tq); color: var(--tq); }

  @media (prefers-reduced-motion: reduce) {
    .fade-karussell > .fade-item { transition: none; }
  }
}

/* ---- FAQ: Listen in der Werte-Antwort und Info-Zeile unter der FAQ ---- */
.faq-a ul {
  margin: 0 0 22px;
  padding: 0 40px 0 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.faq-a li { margin-bottom: 7px; }
.faq-a .faq-label { padding-bottom: 8px !important; color: var(--text); }
.faq-a .faq-label strong { font-weight: 600; }
.faq-a > *:last-child { padding-bottom: 26px; }

.faq-fuss {
  margin: 30px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
}
.faq-fuss a { color: var(--tq); }

/* ================= Newsletter KI-Impulse ================= */
/* Sitzt zwischen Anwendungen und Zahlen. Ruhiger als die Bewerbung weiter
   unten: eine Karte, kein eigener Farbnebel, damit der Haupt-CTA vorne bleibt. */

.nl { background: var(--bg-2); }

.nl-karte {
  position: relative;
  display: grid;
  /* Formularspalte breit genug für zwei Felder nebeneinander. Dadurch bleibt
     das Formular flacher und passt besser zur Höhe der drei Punkte daneben. */
  grid-template-columns: 1fr 480px;
  gap: var(--s6);
  align-items: center;
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
}

.nl-karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad);
}

/* Nennt den Begriff über den drei Punkten, damit klar ist, worum es geht. */
.nl-nutzen-titel {
  margin: 0 0 var(--s4);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tq);
}

.nl-punkt {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-bottom: var(--s4);
}

.nl-punkt:last-child { margin-bottom: 0; }

.nl-ic {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(0,231,215,.1);
  color: var(--tq);
}

.nl-punkt-text h3 {
  font-size: 1.06rem;
  margin: 0 0 6px;
}

.nl-punkt-text p {
  margin: 0;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
}

.nl-form {
  padding: var(--s4);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}

.nl-form-titel {
  font-weight: 600;
  font-size: 1.08rem;
  margin: 0 0 var(--s3);
}

/* Die Einwilligung trägt den längeren Text, deshalb hier kleiner als im
   Bewerbungsformular. */
.nl-form .consent label { font-size: .87rem; line-height: 1.5; }
.nl-form .form-actions { margin-top: var(--s3); }
.nl-form .form-actions .btn { width: 100%; justify-content: center; }

.nl-klein {
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

/* Die Formularspalte steht fest auf 480 Pixel. Bliebe die Karte weiter unten
   zweispaltig, würde die Textspalte daneben zu schmal. Deshalb hier früher
   umbrechen als bei den übrigen Rastern. */
@media (max-width: 1100px) {
  .nl-karte {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

@media (max-width: 900px) {
  .nl-karte { padding: var(--s4); }
}

/* Die Einträge der Kopfnavigation bleiben einzeilig. „KI-Ready-Check" bricht
   sonst am Bindestrich um und die Kopfzeile wird zweizeilig. */
.nav a { white-space: nowrap; }

/* ---- Cookiebar als flacher Balken am unteren Rand ----
   Voreingestellt ist ein Kasten, der mittig über dem Inhalt schwebt und auf der
   Startseite genau die Zeile unter den Hero-Schaltflächen verdeckt. Als Balken
   am Rand bleibt der erste Bildausschnitt frei. Ab 900 Pixel stehen Text und
   Knöpfe nebeneinander, darunter untereinander. */
.contao-cookiebar.cc-bottom .cc-inner {
  display: block;
  width: 100%;
  max-width: none;
  border-radius: 0;
  padding: 18px 24px;
}

.contao-cookiebar.cc-bottom .cc-head p { margin-bottom: 0; }

@media (min-width: 900px) {
  .contao-cookiebar.cc-bottom .cc-inner {
    display: flex;
    /* Ohne Umbruch bliebe der Erklärsatz in derselben Zeile und würde neben
       den Knöpfen zusammengequetscht. */
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    padding: 16px 32px;
  }

  /* Grundbreite 0, damit der Text auf den verbleibenden Platz schrumpft und
     neben den Knöpfen bleibt. Mit auto würde er die ganze Zeile belegen und
     die Knöpfe in die nächste drücken. */
  .contao-cookiebar.cc-bottom .cc-head {
    flex: 1 1 0;
    min-width: 280px;
    margin: 0;
  }

  /* Die Knöpfe behalten ihre Breite und rutschen nicht in die Textspalte. */
  .contao-cookiebar.cc-bottom .cc-footer {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    gap: 10px;
    white-space: nowrap;
  }

  /* Die Gruppenauswahl klappt erst nach dem Klick auf die Einstellungen auf.
     Sie gehört unter den Balken, nicht in die Zeile. Der Erklärsatz darunter
     ebenso, sonst wird er neben den Knöpfen zusammengequetscht. */
  .contao-cookiebar.cc-bottom .cc-groups,
  .contao-cookiebar.cc-bottom .cc-info { flex-basis: 100%; }

  .contao-cookiebar.cc-bottom .cc-info {
    margin: 4px 0 0;
    font-size: .85rem;
  }

  .contao-cookiebar.cc-bottom .cc-info p { margin: 0; }
}

/* ---- Social-Profile im Fußbereich ---- */
.foot-social {
  display: flex;
  gap: 12px;
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}

.foot-social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--muted);
  transition: color .25s, border-color .25s, background .25s;
}

.foot-social a:hover {
  color: var(--tq);
  border-color: var(--tq);
  background: rgba(0,231,215,.08);
}

.foot-social .bi { width: 17px; height: 17px; }