/* =========================================================
   IT-ACS Administration Consulting Support — Stylesheet (lebhaftes, farbiges Design)
   ========================================================= */

:root {
  --bg:         #FFFFFF;
  --bg-soft:    #F6F7FB;
  --ink:        #0F172A;
  --text:       #3B4658;
  --muted:      #677284;
  --line:       #E6E9F1;

  --blue:       #2D5BFF;
  --blue-deep:  #1E43D6;
  --blue-50:    #EEF2FF;
  --yellow:     #FFC53D;
  --yellow-deep:#E9AD1E;
  --yellow-50:  #FFF6DA;
  --coral:      #FF6B4A;
  --coral-50:   #FFEFEA;
  --mint:       #14C39A;
  --mint-50:    #E3FAF3;
  --violet:     #7C5CFF;
  --violet-50:  #F1EDFF;

  /* Schriftvarianten der Akzentfarben. Die Farben oben sind fuer Flaechen
     gedacht; als Text auf Weiss oder auf dem hellen Farbton erreichen sie
     die 4,5:1 nach WCAG AA nicht. Deshalb je ein eigener, dunklerer Ton. */
  --yellow-text:#916B0E;
  --coral-text: #D62700;
  --mint-text:  #0B7F64;
  --violet-text:#6C49FF;

  --font-head: "Plus Jakarta Sans", "Segoe UI", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-lg: 0 24px 60px rgba(15,23,42,0.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* Waagerechtes Übersteuern wird an der Wurzel abgeschnitten, nicht am body:
     overflow-x am body macht den body selbst zum Scroll-Container (overflow-y
     wird dabei laut Spezifikation zu auto). Auf dem Handy entsteht so eine
     zweite Scrollleiste neben der des Fensters, Wischen scrollt den falschen
     Container und der klebende Kopfbereich bezieht sich auf den body statt auf
     das Fenster — genau die Scroll-Probleme, die auf dem Handy auftraten.
     An html gesetzt wandert die Eigenschaft auf das Fenster: ein Scroll-
     Container, eine Scrollleiste. */
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.02em;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { left: 16px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow.coral { color: var(--coral-text); }
.eyebrow.mint { color: var(--mint-text); }
.eyebrow.violet { color: var(--violet-text); }
.eyebrow.yellow { color: var(--yellow-text); }
.eyebrow.on-dark { color: var(--yellow); }

.hl { color: var(--blue); }
.hl-yellow { color: var(--yellow-text); }
.hl-coral { color: var(--coral-text); }
.hl-mint { color: var(--mint-text); }
.hl-violet { color: var(--violet-text); }

.marker {
  isolation: isolate;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.marker::after {
  content: "";
  position: absolute;
  left: -0.05em; right: -0.05em; bottom: 0.05em;
  height: 0.38em;
  background: var(--yellow);
  border-radius: 6px;
  z-index: -1;
  transform: rotate(-1deg);
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 14px; }
.section-head .lede { margin-top: 16px; color: var(--muted); font-size: 17.5px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  padding: 14px 26px;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(45,91,255,0.28); }
.btn-primary:hover { background: var(--blue-deep); box-shadow: 0 12px 26px rgba(45,91,255,0.36); }
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 8px 20px rgba(255,197,61,0.35); }
.btn-yellow:hover { background: #FFD25E; box-shadow: 0 12px 26px rgba(255,197,61,0.45); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost.on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost.on-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-large { padding: 17px 32px; font-size: 17px; }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand .mark {
  width: auto; min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 6px 16px rgba(45,91,255,0.3);
  flex: none;
}
.brand .brand-sub { display: block; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; margin-top: -2px; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a:not(.btn) {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
  position: relative;
  transition: color 0.18s ease;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { padding: 11px 20px; font-size: 14.5px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 80px;
  background:
    radial-gradient(700px 400px at 8% 10%, rgba(45,91,255,0.10), transparent 60%),
    radial-gradient(600px 400px at 92% 20%, rgba(255,197,61,0.22), transparent 60%),
    radial-gradient(500px 400px at 70% 100%, rgba(20,195,154,0.14), transparent 60%),
    #fff;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.pill .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--mint-50); color: var(--mint-text); display: grid; place-items: center; font-size: 12px; }
.hero h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  margin-top: 22px;
  max-width: 14ch;
}
.hero .lede {
  margin-top: 22px;
  max-width: 50ch;
  color: var(--muted);
  font-size: 18.5px;
}
.hero .cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.trust-row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.trust-row li { display: flex; align-items: center; gap: 8px; }
.trust-row .check { width: 20px; height: 20px; border-radius: 50%; background: var(--mint); color: var(--ink); display: grid; place-items: center; font-size: 11px; flex: none; }

.hero-visual { position: relative; }
.hero-visual .mockup {
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  background: #fff;
  overflow: hidden;
  border: 1px solid var(--line);
}
.float-badge {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  animation: floaty 5s ease-in-out infinite;
}
.float-badge .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; }
.float-badge.b1 { top: -18px; left: -18px; animation-delay: 0s; }
.float-badge.b2 { bottom: 38px; left: -30px; animation-delay: 1.4s; }
.float-badge.b3 { top: 40%; right: -22px; animation-delay: 2.6s; }
.float-badge .ic.blue { background: var(--blue-50); color: var(--blue); }
.float-badge .ic.mint { background: var(--mint-50); color: var(--mint-text); }
.float-badge .ic.yellow { background: var(--yellow-50); color: var(--yellow-text); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- USP-Leiste ---------- */
.usp-band { padding: 0 0 20px; }
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: -20px;
}
.usp {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.usp:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.usp .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; flex: none; }
.usp h2 { font-size: 16.5px; line-height: 1.3; }
.usp p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.ic.blue { background: var(--blue-50); color: var(--blue); }
.ic.yellow { background: var(--yellow-50); color: var(--yellow-text); }
.ic.mint { background: var(--mint-50); color: var(--mint-text); }
.ic.coral { background: var(--coral-50); color: var(--coral-text); }
.ic.violet { background: var(--violet-50); color: var(--violet-text); }

/* ---------- Section ---------- */
.section { padding: 100px 0; }
.section.soft { background: var(--bg-soft); }
.section.tint-blue { background: linear-gradient(180deg, #fff 0%, var(--blue-50) 100%); }
/* Als Band angelegt, nicht als Verlauf nach Weiss: Der Abschnitt steht jetzt
   zwischen dem blau getönten „Über mich“ und den weissen Beispielen. */
.section.tint-yellow { background: linear-gradient(180deg, #fff 0%, var(--yellow-50) 45%, #fff 100%); }

/* ---------- Beispiele ---------- */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.example-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.example-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.example-preview { display: block; position: relative; overflow: hidden; }
.example-preview img {
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}
.example-card:hover .example-preview img { transform: scale(1.04); }
.example-preview .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,23,42,0.55));
  opacity: 0;
  transition: opacity 0.25s ease;
  display: flex; align-items: flex-end; justify-content: center; padding: 18px;
}
.example-card:hover .overlay { opacity: 1; }
.example-preview .overlay span {
  background: #fff; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 999px;
}
.example-info { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.example-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.example-tag.coral { background: var(--coral-50); color: var(--coral-text); }
.example-tag.mint { background: var(--mint-50); color: var(--mint-text); }
.example-tag.violet { background: var(--violet-50); color: var(--violet-text); }
.example-tag.blue { background: var(--blue-50); color: var(--blue); }
.example-tag.yellow { background: var(--yellow-50); color: #976800; }
.example-tag.sage { background: #E9F0E6; color: #46603F; }
.example-tag.green { background: #E8F5DD; color: #3E7A1E; }
.example-tag.pink { background: #FFE4EA; color: #C8284F; }
.example-info h3 { font-size: 18px; }
.example-info p { margin-top: 8px; color: var(--muted); font-size: 14px; flex: 1; }
.example-info .style-note { margin-top: 12px; font-size: 12px; color: var(--text); display: flex; gap: 8px; flex-wrap: wrap; }
.example-info .style-note span { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; }

/* ---------- Vergleich ---------- */
/* Der einzige Bereich der Seite mit eigener Scrollleiste. Die vier Spalten
   brauchen 720 px, damit sie lesbar bleiben — auf dem Handy wird also seitlich
   gescrollt. Die Leiste ist bewusst sichtbar gestaltet: Sie ist der Hinweis,
   dass es nach rechts weitergeht. overflow-y bleibt ausgeschaltet, damit hier
   nie eine zweite senkrechte Leiste auftaucht, und overscroll-behavior hält das
   seitliche Wischen im Container, statt die Seite mitzuziehen. */
.compare-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--yellow-deep) var(--bg-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: #fff;
}
.compare-wrap::-webkit-scrollbar { height: 10px; }
.compare-wrap::-webkit-scrollbar-track { background: var(--bg-soft); }
.compare-wrap::-webkit-scrollbar-thumb { background: var(--yellow-deep); border-radius: 999px; border: 2px solid var(--bg-soft); }
.compare-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink); }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare th, .compare td { padding: 18px 22px; text-align: center; font-size: 15px; border-bottom: 1px solid var(--line); }
.compare th { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--ink); background: var(--bg-soft); }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: 600; color: var(--ink); }
.compare tr:last-child td { border-bottom: none; }
.compare .col-jl { background: var(--yellow-50); }
.compare th.col-jl { background: var(--yellow); color: var(--ink); }
.compare th.col-jl small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.compare .yes, .compare .no, .compare .mid { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.compare .yes { background: var(--mint-50); color: var(--mint-text); }
.compare .no { background: var(--coral-50); color: var(--coral-text); }
.compare .mid { background: var(--yellow-50); color: var(--yellow-text); }
.compare td .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.compare td.price { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--ink); }
.compare-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }

/* ---------- Leistungen ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; }
.feature h3 { font-size: 19px; }
.feature p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* ---------- Preise ---------- */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.package-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.package-featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: scale(1.03);
}
.package-featured:hover { transform: scale(1.03) translateY(-5px); }
.package-featured h3, .package-featured .price { color: #fff; }
.badge-empfohlen {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255,197,61,0.4);
}
.package-card .pkg-ic { font-size: 30px; line-height: 1; margin-bottom: 14px; }
.package-card .tag { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.package-featured .tag { color: rgba(255,255,255,0.6); }
.package-card h3 { font-size: 24px; margin-top: 6px; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.price { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.price small { font-size: 18px; font-weight: 700; color: var(--muted); margin-right: 6px; letter-spacing: 0; }
.package-featured .price small { color: rgba(255,255,255,0.6); }
.price-note { font-size: 13px; color: var(--muted); font-weight: 600; }
.package-featured .price-note { color: rgba(255,255,255,0.6); }
.package-card .desc { margin-top: 14px; color: var(--muted); font-size: 15px; }
.package-featured .desc { color: rgba(255,255,255,0.75); }
.package-card .items { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text); flex: 1; display: flex; flex-direction: column; gap: 10px; }
.package-featured .items { border-top-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.88); }
.package-card .items li { display: flex; gap: 10px; align-items: flex-start; }
.package-card .items .check { width: 20px; height: 20px; border-radius: 50%; background: var(--mint-50); color: var(--mint-text); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; margin-top: 3px; }
.package-featured .items .check { background: var(--mint); color: var(--ink); }
.package-card .items .plus { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: -2px; }
.package-featured .items .plus { color: rgba(255,255,255,0.5); }
.package-btn { margin-top: 26px; width: 100%; }
.pricing-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 28px; }

/* ---------- Ablauf ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
}
.step {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  position: relative;
}
.step .num {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 18px; color: #fff;
  margin-bottom: 18px;
}
.step:nth-child(1) .num { background: var(--blue); }
.step:nth-child(2) .num { background: var(--violet); }
.step:nth-child(3) .num { background: var(--coral); }
.step:nth-child(4) .num { background: var(--mint); }
.step h3 { font-size: 18px; }
.step p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.step .dur { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--yellow-50); border-radius: 999px; padding: 4px 10px; }

/* ---------- Über mich ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 34px;
  position: relative;
}
.about-card::before {
  content: "";
  position: absolute; inset: -14px; z-index: -1;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--yellow-50), var(--blue-50), var(--mint-50));
  transform: rotate(-2deg);
}
.avatar {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 14px 32px rgba(15,23,42,0.18);
  border: 4px solid #fff;
}
.about-card .name { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--ink); margin-top: 18px; }
.about-card .role { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.about-stat { background: var(--bg-soft); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.about-stat .n { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--blue); line-height: 1; }
.about-stat:nth-child(2) .n { color: var(--coral-text); }
.about-stat:nth-child(3) .n { color: var(--mint-text); }
.about-stat:nth-child(4) .n { color: var(--violet-text); }
.about-stat .l { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.about-copy h2 { font-size: clamp(30px, 3.6vw, 42px); margin-top: 14px; }
.about-copy p { margin-top: 18px; color: var(--text); font-size: 16.5px; }
.about-copy p strong { color: var(--ink); }
.about-quote {
  margin-top: 26px;
  border-left: 4px solid var(--yellow);
  padding: 4px 0 4px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}
.about-timeline { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.about-block { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.about-year { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: #fff; background: var(--ink); border-radius: 8px; padding: 4px 9px; white-space: nowrap; margin-top: 2px; }
.about-block h3 { font-size: 15.5px; }
.about-block p { margin-top: 3px; font-size: 14px; color: var(--muted); }

/* ---------- Referenzkunden-Band ---------- */
.ref-band {
  padding: 0;
}
.ref-inner {
  background: linear-gradient(120deg, var(--blue) 0%, var(--violet) 55%, var(--coral) 100%);
  border-radius: 28px;
  padding: 56px 56px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ref-inner::after {
  content: "";
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: rgba(255,255,255,0.12); right: -100px; bottom: -160px;
}
.ref-inner h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-top: 12px; }
.ref-inner p { margin-top: 16px; color: rgba(255,255,255,0.86); font-size: 16.5px; max-width: 56ch; }
.ref-inner .ref-list { margin-top: 20px; display: grid; gap: 10px; }
.ref-inner .ref-list li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; }
.ref-inner .ref-list .check { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.ref-action { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease;
}
.faq-item[open] { border-color: var(--blue); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  /* Plus aus zwei CSS-Balken statt Textzeichen: Schriftzeichen sitzen nie exakt mittig im Kreis */
  content: "";
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background-color: var(--yellow-50);
  background-image:
    linear-gradient(var(--yellow-text), var(--yellow-text)),
    linear-gradient(var(--yellow-text), var(--yellow-text));
  background-size: 12px 2px, 2px 12px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--blue-50);
  background-image:
    linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue));
}
.faq-item p { padding: 0 24px 22px; color: var(--muted); font-size: 15.5px; }
.faq-cta { text-align: center; margin-top: 30px; font-size: 15.5px; color: var(--muted); }
.faq-cta a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--yellow); }
.faq-cta a:hover { color: var(--blue); text-decoration-color: var(--blue); }

/* ---------- Kontakt ---------- */
.contact-card {
  background: var(--ink);
  color: #fff;
  border-radius: 28px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.contact-card::before {
  content: "";
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,91,255,0.5), transparent 65%);
  left: -180px; top: -200px;
}
.contact-card::after {
  content: "";
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,197,61,0.35), transparent 65%);
  right: -120px; bottom: -180px;
}
.contact-card > * { position: relative; z-index: 1; }
.contact-card h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin-top: 12px; }
.contact-card .lede { margin-top: 16px; color: rgba(255,255,255,0.78); font-size: 16.5px; max-width: 50ch; }
.contact-ways { display: flex; flex-direction: column; gap: 14px; }
.contact-way {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 18px 20px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.contact-way:hover { background: rgba(255,255,255,0.13); transform: translateX(4px); }
.contact-way .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; flex: none; }
.contact-way .lbl { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; }
.contact-way .val { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; margin-top: 2px; }
.contact-way .hint { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.contact-person { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.contact-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--yellow); flex: none; }
.contact-person b { display: block; font-family: var(--font-head); font-size: 16px; color: #fff; }
.contact-person span { font-size: 13.5px; color: rgba(255,255,255,0.65); }
.response-note { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; }
.response-note .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(20,195,154,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(20,195,154,0.6); } 70% { box-shadow: 0 0 0 10px rgba(20,195,154,0); } 100% { box-shadow: 0 0 0 0 rgba(20,195,154,0); } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
  color: var(--muted);
  font-size: 14.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 0.8fr 0.8fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .brand { font-size: 15px; }
.footer-brand .brand .mark { width: auto; min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
.footer-brand p { margin-top: 16px; max-width: 34ch; }
.footer-contact { font-weight: 600; color: var(--ink); line-height: 1.8; }
.footer-col h3 {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { font-weight: 500; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--blue); }
.footer-demos { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.footer-demos a { white-space: nowrap; }
.footer-bottom { margin-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; }
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-demos { grid-template-columns: 1fr; }
}
.color-strip { height: 6px; background: linear-gradient(90deg, var(--blue), var(--violet), var(--coral), var(--yellow), var(--mint)); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ---------- Rechtliche Seiten ---------- */
.legal-page main.wrap { padding-top: 56px; padding-bottom: 96px; max-width: 800px; }
/* hyphens: „Datenschutzerklärung" ist ein Wort und steht bei 320 px Breite
   sonst über den Bildschirmrand hinaus. lang="de" liefert die Trennstellen. */
.legal-page h1 { font-size: clamp(30px, 4vw, 40px); margin-top: 14px; hyphens: auto; overflow-wrap: break-word; }
.legal-page h2 { font-size: 19px; margin-top: 40px; margin-bottom: 8px; }
.legal-page p, .legal-page li { color: var(--text); font-size: 15.5px; line-height: 1.7; }
.legal-page main.wrap p + p { margin-top: 12px; }
.legal-page main.wrap h3 { font-size: 15.5px; margin-top: 22px; margin-bottom: 4px; }
.legal-page section + section { margin-top: 4px; }
.legal-page a.inline { color: var(--blue); text-decoration: underline; }
.legal-page .back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 44px; font-family: var(--font-head); font-weight: 700; color: var(--blue); }
.legal-page .back-link:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .usp-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .examples-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { padding: 44px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  .hero h1 { max-width: none; }
  .hero-visual { max-width: 520px; margin: 0 auto; }
  .float-badge.b1 { left: 0; top: -14px; }
  .float-badge.b2 { left: 0; }
  .float-badge.b3 { right: 0; }
  .packages-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .package-featured, .package-featured:hover { transform: none; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-card { max-width: 480px; }
  .ref-inner { grid-template-columns: 1fr; padding: 40px 32px; }
  .ref-action { flex-direction: row; flex-wrap: wrap; }
  .contact-card { grid-template-columns: 1fr; padding: 40px 30px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }

  /* Auf dem Handy ohne backdrop-filter: Der Weichzeichner hinter dem klebenden
     Kopfbereich muss bei jedem Scroll-Bild neu berechnet werden und ist auf
     schwächeren Geräten die zweite Ursache für ruckelndes Scrollen. Statt
     dessen ein fast deckendes Weiss — optisch kaum zu unterscheiden. */
  .site-header { background: rgba(255,255,255,0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-toggle { display: grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 78px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 20px 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 16px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .usp-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .examples-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-large { width: 100%; }
  .hero .cta-row .btn { width: 100%; }
  .float-badge { font-size: 12.5px; padding: 8px 12px; }
  .float-badge.b3 { display: none; }
  .brand .brand-sub { display: none; }
  .site-header .brand > span:not(.mark) { display: none; }
  .ref-action .btn { width: 100%; }

  /* Der schräge Farbschein hinter der Über-mich-Karte ragt 14 px über die Karte
     hinaus, und die Drehung um 2° addiert bei der Kartenhöhe noch rund 9 px.
     Auf dem Handy ist der Seitenrand nur 20 px breit — zusammen schoben diese
     Werte die Seite um 5 px in die Breite, und genau das liess sich seitlich
     wegscrollen. Ohne Drehung bleiben die 14 px im Seitenrand. Auf dem Desktop
     bleibt die Karte schräg hinterlegt. */
  .about-card::before { transform: none; }

  /* Gedrängter, damit der seitliche Weg durch die Vergleichstabelle kurz bleibt */
  .compare { min-width: 560px; }
  .compare th, .compare td { padding: 14px 11px; font-size: 14px; }
  .compare th { font-size: 14.5px; }
  .compare td .sub { font-size: 11.5px; }
}

/* ---------- WhatsApp-Button (schwebend) ---------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wa-float::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid #25D366;
  animation: wa-ring 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.45); opacity: 0; } }
.wa-float:hover { background: #1EBE5A; box-shadow: 0 14px 32px rgba(37,211,102,0.55); transform: translateY(-2px); }
.wa-float .wa-label {
  /* Dunkel statt weiss: weisse Schrift auf dem WhatsApp-Gruen erreicht nur
     1,98:1. Das Logo selbst darf weiss bleiben — Markenzeichen sind von der
     Kontrastanforderung ausgenommen, Fliesstext daneben nicht. */
  color: var(--ink);
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  padding-left: 0;
  transition: max-width 0.3s ease, padding 0.3s ease;
}
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { max-width: 260px; padding-left: 22px; }
.wa-float .wa-icon { width: 62px; height: 62px; display: grid; place-items: center; flex: none; }
.wa-float .wa-icon svg { width: 34px; height: 34px; }
.ic.wa { background: #E3FAF3; color: #107E72; }
.contact-way .ic.wa svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  .wa-float { right: 14px; bottom: 14px; }
  .wa-float .wa-icon { width: 56px; height: 56px; }
}