:root {
  --bg: #ffffff;
  --bg-soft: #f8f5f1;
  --panel: #fffdfb;
  --card: #ffffff;
  --ink: #141414;
  --muted: #4f4f4f;
  --line: rgba(20, 20, 20, 0.08);
  --accent: #f56a1e;
  --accent-dark: #d95d1a;
  --accent-soft: #fbe7dc;
  --accent-strong: #a94a11;
  --warm-sand: #f0e8df;
  --charcoal: #121212;
  --shadow: 0 24px 60px rgba(20, 20, 20, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Poppins", "Segoe UI", sans-serif;
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.contactbar {
  background: #fbfaf9;
  border-bottom: 1px solid rgba(20, 20, 20, 0.07);
}

.contactbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 26px;
  min-height: 38px;
  padding: 2px 0;
}

.contactbar-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.85rem;
  font-weight: 500;
}

.contactbar-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.contactbar-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.contactbar-link:hover,
.contactbar-link:focus-visible {
  color: var(--accent);
  background: #ffffff;
  border-color: rgba(20, 20, 20, 0.1);
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.07);
}

.contactbar-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  flex-shrink: 0;
}

.badge-phone {
  background: var(--charcoal);
}

.badge-whatsapp {
  background: #25d366;
}

.badge-mail {
  background: var(--accent);
}

.contactbar-badge svg {
  width: 14px;
  height: 14px;
}

.contactbar-location svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.contactbar .icon-fill {
  fill: currentColor;
}

.contactbar .icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
  margin-top: 4px;
}

.brand img {
  width: 162px;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translateY(5px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  margin-left: auto;
}

.nav-links a {
  transition: color 180ms ease;
  font-weight: 600;
}

.nav-cta {
  margin-left: 10px;
  /* Sonst staucht der Button bei mittleren Breiten und die Beschriftung
     bricht auf zwei Zeilen um. */
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
}

.nav-cta,
.button,
.button-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.nav-cta,
.button {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  box-shadow: 0 14px 30px rgba(245, 106, 30, 0.22);
}

.button-light {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.nav-cta:hover,
.button:hover,
.button-light:hover,
.nav-cta:focus-visible,
.button:focus-visible,
.button-light:focus-visible {
  transform: translateY(-1px);
}

/* Leichter warmer Schimmer rechts hinter dem Foto. Beide Ellipsen laufen
   vor der Unterkante vollstaendig aus, damit zum folgenden weissen
   Abschnitt keine sichtbare Kante entsteht. */
.hero {
  padding: 54px 0 48px;
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, rgba(245, 106, 30, 0.16) 0%, rgba(245, 106, 30, 0) 100%),
    radial-gradient(ellipse 32% 38% at 100% 62%, rgba(245, 106, 30, 0.13) 0%, rgba(245, 106, 30, 0) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 52px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1.2rem;
  background: var(--accent);
  border-radius: 999px;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(245, 106, 30, 0.18);
}

.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}

h1 {
  margin: 18px 0 22px;
  font-size: clamp(2.1rem, 2.8vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.lead {
  max-width: 640px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 1.04rem;
}

.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 560px;
}

.bullet-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(245, 106, 30, 0.15);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.trust-panel {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 760px;
}

.trust-card {
  background: #f3f3f3;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 18px;
  padding: 16px 14px 14px;
  min-height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.trust-card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.trust-card strong {
  display: block;
  font-size: clamp(1.3rem, 1.55vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.trust-card small {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  color: rgba(20, 20, 20, 0.72);
  font-weight: 500;
}

.stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #f7b500;
  font-size: 0.9rem;
  line-height: 1;
  margin-bottom: 0;
}

.hero-visual {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 560px;
  box-shadow: none;
  display: grid;
  place-items: center;
}

.hero-photo-wrap {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
  border-radius: 30px;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  filter: saturate(1.05) contrast(1.02) drop-shadow(0 18px 34px rgba(17, 17, 17, 0.18))
    drop-shadow(0 6px 12px rgba(17, 17, 17, 0.08));
}

/* Ein Mass fuer alle Seiten. Vorher 90 px: Zwischen zwei Abschnitten
   standen damit 180 px Leerraum, auf der Startseite durch Einzelregeln
   nur rund 140 px. 72 px gleicht die Unterseiten an die Startseite an. */
.section {
  padding: 72px 0;
}

@media (max-width: 760px) {
  .section {
    padding: 56px 0;
  }
}

#leistungen {
  padding-bottom: 0;
}

.tools-section {
  background: linear-gradient(180deg, rgba(255, 239, 228, 0.9) 0%, rgba(255, 226, 205, 0.78) 100%);
  padding: 28px 0 52px;
}

.tools-wrap {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 10px;
}

.tools-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 10px 22px 9px;
  border-radius: 999px;
  background: #f56a1e;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(245, 106, 30, 0.22);
}

.tools-kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}

.tools-title {
  margin: 0;
  max-width: 1120px;
  text-align: center;
  font-size: clamp(1.8rem, 2.3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
  font-weight: 700;
}

.tools-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px 18px;
  margin-top: 8px;
}

.tool-card {
  min-height: 104px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 10px;
  box-shadow: 0 10px 18px rgba(17, 17, 17, 0.02);
}

.tool-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(17, 17, 17, 0.88);
  font-size: clamp(0.9rem, 1.2vw, 1.3rem);
}

.google-mark {
  font-size: 2.4rem;
  color: #1a73e8;
}

.google-mark::before {
  content: "G";
}

.tool-card.text-only {
  padding: 10px 8px;
}

@media (max-width: 900px) {
  .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.reviews-section {
  padding: 10px 0 24px;
}

.reviews-wrap {
  background: #eaeaea;
  border-radius: 0;
  padding: 26px 18px 18px;
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2.8fr);
  gap: 36px;
  align-items: center;
  min-height: 310px;
}

.reviews-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 8px;
}

.reviews-summary h2 {
  margin: 0;
  font-size: clamp(1.9rem, 2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.06em;
}

.reviews-stars {
  color: #f7b500;
  letter-spacing: 0.12em;
  font-size: 2.2rem;
  line-height: 1;
  margin: 18px 0 10px;
}

.reviews-meta {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
}

.reviews-meta strong {
  font-weight: 700;
}

.google-word {
  margin-top: 10px;
  font-size: clamp(2.4rem, 2.7vw, 3.5rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.06em;
  background: linear-gradient(90deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reviews-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.rating-card {
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 26px;
  min-height: 250px;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, #e16f35, #d95d1a);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}

.avatar.alt-2 {
  background: linear-gradient(135deg, #8d7ef2, #4a6cf2);
}

.avatar.alt-3 {
  background: linear-gradient(135deg, #ffc25c, #f59e0b);
}

.person {
  display: flex;
  flex-direction: column;
}

.person strong {
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.person span {
  color: var(--muted);
  font-size: 0.8rem;
}

.review-stars {
  color: #f7b500;
  letter-spacing: 0.12em;
  font-size: 1.35rem;
  line-height: 1;
  margin: 12px 0 14px;
}

.rating-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.5;
}

.review-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.96rem;
  color: var(--ink);
  opacity: 0.9;
  text-decoration: underline;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin-bottom: 26px;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  max-width: 540px;
}

.leistungen-wrap {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 26px;
}

.leistungen-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 9px 18px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(245, 106, 30, 0.18);
}

.leistungen-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}

.leistungen-heading {
  margin: 0;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
  max-width: 640px;
}

.leistungen-copy {
  margin: 0;
  max-width: 440px;
  justify-self: end;
  color: rgba(20, 20, 20, 0.74);
  font-size: 1.02rem;
  line-height: 1.6;
}

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.leistung-card {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 26px;
  min-height: 520px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.02);
}

/* Leistungen: Umbruch fuer schmale Bildschirme */
@media (max-width: 1000px) {
  .leistungen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .leistungen-wrap {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .leistungen-copy {
    justify-self: start;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .leistungen-grid {
    grid-template-columns: 1fr;
  }

  .leistung-card {
    min-height: 0;
  }
}

.leistung-top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  margin-bottom: 12px;
}

.leistung-icon {
  width: 42px;
  height: 42px;
  padding: 5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f3e4d9;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(20, 20, 20, 0.08);
  box-sizing: border-box;
}

.leistung-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leistung-card:nth-child(2) .leistung-icon {
  background: #111111;
  color: #ffffff;
}

.leistung-card:nth-child(3) .leistung-icon {
  background: #f8e4d7;
}

.leistung-label {
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.leistung-card h3 {
  margin: 10px 0 14px;
  font-size: clamp(1.8rem, 2vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.leistung-copy {
  margin: 0 0 14px;
  color: rgba(20, 20, 20, 0.72);
  font-size: 0.98rem;
  line-height: 1.55;
}

.leistung-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
}

.leistung-list li {
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
  padding: 12px 0;
  color: rgba(20, 20, 20, 0.82);
  font-size: 0.96rem;
  line-height: 1.45;
}

.leistung-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.leistung-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  border-top: 1px solid rgba(20, 20, 20, 0.08);
  text-decoration: none;
  position: relative;
}

.leistung-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 106, 30, 0.9);
}

.quote-strip {
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(20, 20, 20, 0.09);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(20, 20, 20, 0.8);
}

.quote-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: rgba(245, 106, 30, 0.12);
  flex-shrink: 0;
}

.quote-badge svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote-strip p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.quote-strip .emphasis {
  font-weight: 700;
  color: var(--ink);
}

.results-header {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: end;
  gap: 18px;
  margin: 0 0 26px;
}

.results-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 3vw, 3.6rem);
  line-height: 0.94;
  letter-spacing: -0.07em;
  max-width: 500px;
}

.results-header p {
  margin: 0;
  color: rgba(20, 20, 20, 0.78);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 500px;
  justify-self: end;
}

@media (max-width: 920px) {
  .results-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .results-header p {
    justify-self: start;
    max-width: none;
  }
}

.results-panel {
  background: linear-gradient(180deg, #1f2b33 0%, #232b34 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 44px;
  box-shadow: 0 18px 36px rgba(17, 17, 17, 0.12);
}

.results-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px 48px;
  align-items: center;
}

.case-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.case-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  padding: 20px 24px;
}

.case-brand-mark {
  width: 100%;
  height: 100%;
  min-height: 120px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.07em;
  color: #191919;
  font-size: clamp(1.3rem, 2.3vw, 2.4rem);
}

.case-brand-mark-img {
  width: 100%;
  height: auto;
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.metric-box {
  min-height: 110px;
  padding: 20px 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metric-box:nth-child(-n + 2) {
  border-top: none;
}

.metric-box:nth-child(odd) {
  border-left: none;
}

.metric-box:nth-child(1),
.metric-box:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.metric-value {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: clamp(2.1rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.06em;
  font-weight: 800;
}

.metric-value .plus {
  color: var(--accent);
}

.metric-label {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.5;
}

.case-copy {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.case-title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.case-description {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 500px;
}

.case-meta {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.client-wall {
  margin-top: 28px;
  text-align: center;
}

.client-wall-label {
  margin: 0 0 18px;
  color: rgba(20, 20, 20, 0.66);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 18px;
  justify-items: center;
}

.logo-card {
  min-width: 0;
  width: 100%;
  min-height: 104px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(20, 20, 20, 0.09);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  font-weight: 700;
  color: rgba(20, 20, 20, 0.78);
  letter-spacing: -0.04em;
  font-size: clamp(0.8rem, 1vw, 1.2rem);
}

.logo-card img {
  display: block;
  width: auto;
  max-width: 76%;
  max-height: 54px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@media (hover: none) {
  .logo-card img {
    filter: grayscale(0);
    opacity: 1;
  }
}

.logo-card.light {
  background: rgba(255, 255, 255, 0.45);
}

.logo-card.small {
  font-size: clamp(0.68rem, 0.8vw, 0.96rem);
}

.cta-more {
  margin: 28px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(20, 20, 20, 0.06);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cta-more:hover,
.cta-more:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(245, 106, 30, 0.45);
  box-shadow: 0 12px 26px rgba(20, 20, 20, 0.09);
}

.cta-more:hover span,
.cta-more:focus-visible span {
  color: var(--accent);
}

.cta-more span {
  font-size: 1.2rem;
  line-height: 1;
}

.grid-two {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: stretch;
}

.intro-card,
.steps,
.cta-box,
.stats-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(20, 20, 20, 0.04);
}

.intro-card {
  padding: 28px 26px;
}

.intro-card h3,
.steps h3,
.cta-box h3,
.stats-panel h3 {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.intro-card p,
.steps p,
.cta-box p,
.stats-panel p {
  margin: 0;
  color: var(--muted);
}

.stats-panel {
  padding: 24px 22px;
  display: grid;
  gap: 18px;
}

.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.metric:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.metric strong {
  font-size: 1.4rem;
  letter-spacing: -0.06em;
}

.steps {
  padding: 26px 22px;
}

.list {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.list-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.list-item:first-child {
  border-top: none;
  padding-top: 0;
}

.list-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

.list-item strong {
  display: block;
  margin-bottom: 4px;
}

.cta-box {
  padding: 26px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

footer {
  padding: 18px 0 54px;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  color: var(--muted);
}

#referenzen {
  padding-bottom: 34px;
}

.vorteile-section {
  background: #f8f8f8;
  padding-top: 62px;
}

.vorteile-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 40px;
}

.vorteile-subkicker {
  margin: 0 0 16px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vorteile-heading {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  max-width: 560px;
}

.vorteile-intro {
  margin: 0;
  max-width: 460px;
  justify-self: end;
  color: rgba(20, 20, 20, 0.72);
  font-size: 1.02rem;
  line-height: 1.6;
}

.compare-card {
  background: #ffffff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(17, 17, 17, 0.06);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare-table .col-label {
  width: 29%;
}

.compare-table .col-me {
  width: 36%;
}

/* Vier Spalten (Label, hervorgehoben, zwei Vergleiche): gleichmaessiger verteilt */
.compare-table-4 .col-label {
  width: 22%;
}

.compare-table-4 .col-me {
  width: 30%;
}

/* Logo-Beispiele im Fliesstext: 2x2 Karten mit Logo und Beschriftung */
.logo-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.logo-showcase-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
}

/* Weisse Flaeche, weil einige Logo-PNGs keinen transparenten Hintergrund haben */
.logo-showcase-img {
  display: grid;
  place-items: center;
  height: 120px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
}

/* Hoehere Spezifitaet als .article-figure img (dort width:100%), sonst verzerrt */
.article-figure .logo-showcase-img img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.logo-showcase-item strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.logo-showcase-item span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .logo-showcase {
    grid-template-columns: 1fr;
  }
}

/* Breite Variante als eigener Abschnitt (Logo-Seite): vier Karten nebeneinander */
.logo-showcase.is-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.logo-showcase.is-wide .logo-showcase-img {
  height: 150px;
}

.logo-showcase.is-wide .logo-showcase-img img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 84px;
  object-fit: contain;
}

@media (max-width: 1020px) {
  .logo-showcase.is-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .logo-showcase.is-wide {
    grid-template-columns: 1fr;
  }
}

.compare-table th,
.compare-table td {
  padding: 26px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(20, 20, 20, 0.07);
}

.compare-table tbody tr:last-child > * {
  border-bottom: none;
}

.compare-table thead th,
.compare-table thead td {
  padding: 24px;
  color: rgba(20, 20, 20, 0.4);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare-table .is-me {
  background: #fff1e9;
}

.compare-table thead th.is-me {
  color: var(--accent);
}

.compare-table tbody th {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.compare-table td {
  color: rgba(20, 20, 20, 0.84);
  font-size: 0.95rem;
  line-height: 1.55;
}

.compare-table td:not(.is-me) {
  color: rgba(20, 20, 20, 0.62);
}

.compare-yes,
.compare-no {
  display: flex;
  gap: 12px;
}

.compare-yes::before,
.compare-no::before {
  flex-shrink: 0;
  width: 12px;
  font-weight: 700;
}

.compare-yes::before {
  content: "✓";
  color: var(--accent);
}

.compare-no::before {
  content: "–";
  color: rgba(20, 20, 20, 0.45);
}

.vorteile-subkicker {
  margin-top: 48px;
  color: rgba(20, 20, 20, 0.62);
}

.industry-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.industry-pills li {
  padding: 8px 16px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.vorteile-note {
  margin: 48px 0 0;
  max-width: 660px;
  color: rgba(20, 20, 20, 0.68);
  font-size: 1.02rem;
  line-height: 1.65;
}

.ablauf-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 44px;
}

.ablauf-heading {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  max-width: 520px;
}

.ablauf-intro {
  margin: 0;
  max-width: 460px;
  justify-self: end;
  color: rgba(20, 20, 20, 0.72);
  font-size: 1.02rem;
  line-height: 1.6;
}

.ablauf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.ablauf-step {
  padding-top: 20px;
  border-top: 2px solid rgba(20, 20, 20, 0.12);
}

.ablauf-step.is-active {
  border-top-color: var(--accent);
}

.ablauf-step-label {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ablauf-step h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.ablauf-step p {
  margin: 0;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ablauf-cta {
  margin-top: 44px;
  gap: 10px;
}

.review-bar-section {
  padding: 0 0 80px;
}

.review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  background: #ffffff;
  border: 1px solid rgba(20, 20, 20, 0.09);
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.05);
}

.google-logo {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.g-blue {
  color: #4285f4;
}

.g-red {
  color: #ea4335;
}

.g-yellow {
  color: #fbbc05;
}

.g-green {
  color: #34a853;
}

.review-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.review-stars {
  color: #f7b500;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.review-score strong {
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.review-count {
  color: rgba(20, 20, 20, 0.6);
  font-size: 0.9rem;
}

.review-people {
  display: flex;
  align-items: center;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-left: -12px;
  border: 3px solid #ffffff;
  background: linear-gradient(135deg, #e16f35, #d95d1a);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.review-avatar:first-child {
  margin-left: 0;
}

.review-avatar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.review-avatar.alt-2 {
  background: linear-gradient(135deg, #8d7ef2, #4a6cf2);
}

.review-avatar.alt-3 {
  background: linear-gradient(135deg, #ffc25c, #f59e0b);
}

.review-avatar.more {
  background: var(--charcoal);
}

.review-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--charcoal);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.review-cta:hover,
.review-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.18);
}

.review-cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.faq-section {
  background: #f8f8f8;
}

.faq-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 36px;
}

.faq-heading {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  max-width: 520px;
}

.faq-intro {
  margin: 0;
  max-width: 440px;
  justify-self: end;
  color: rgba(20, 20, 20, 0.72);
  font-size: 1.02rem;
  line-height: 1.6;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.03);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--accent);
}

.faq-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 250ms ease;
}

.faq-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 24px 24px;
  max-width: 900px;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.96rem;
  line-height: 1.7;
}

#kontakt {
  background: linear-gradient(180deg, #1f2b33 0%, #232b34 100%);
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
}

.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-intro h2 {
  margin: 18px 0 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.contact-intro p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  line-height: 1.6;
}

.contact-facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.contact-facts li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.5;
}

.contact-facts li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.contact-direct {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: 100%;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-direct .contactbar-badge {
  width: 26px;
  height: 26px;
}

.contact-direct .contactbar-badge svg {
  width: 16px;
  height: 16px;
}

.contact-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.contact-direct-link:hover,
.contact-direct-link:focus-visible {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.contact-direct .badge-phone {
  background: #ffffff;
  color: var(--charcoal);
}

.contact-direct .icon-fill {
  fill: currentColor;
}

.contact-direct .icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-form {
  display: grid;
  gap: 16px;
  align-content: start;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-label em {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.45);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 180ms ease, background 180ms ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}

.field-choice {
  margin: 0;
  padding: 0;
  border: 0;
}

.field-choice legend {
  display: block;
  margin-bottom: 10px;
  padding: 0;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice span {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.choice span:hover {
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
}

.choice input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.choice input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  line-height: 1.5;
}

.field-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.contact-submit {
  justify-self: start;
  margin-top: 4px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-drop {
  position: static;
  display: inline-flex;
}

.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  height: 52px;
}

.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease;
}

.nav-drop-toggle:hover,
.nav-drop:focus-within .nav-drop-toggle {
  color: var(--ink);
}

/* Aktiver Bereich in der Navigation. Nur die Farbe aendert sich:
   Ein fetterer Schnitt macht das Wort breiter, und das Menue verrutscht
   beim Wechsel zwischen Startseite und Unterseiten. */
.nav-drop-toggle.is-current {
  color: var(--ink);
}

.nav-drop-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.nav-drop:hover .nav-drop-icon,
.nav-drop:focus-within .nav-drop-icon {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 18px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 26px 60px rgba(17, 17, 17, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

.nav-drop:hover .mega-menu,
.nav-drop:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: background 180ms ease, border-color 180ms ease;
}

.mega-item:hover,
.mega-item:focus-visible {
  background: #faf9f8;
  border-color: rgba(20, 20, 20, 0.08);
}

.mega-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: #f3e4d9;
  color: var(--ink);
  transition: background 180ms ease, color 180ms ease;
}

.mega-item:hover .mega-icon,
.mega-item:focus-visible .mega-icon {
  background: var(--accent);
  color: #ffffff;
}

.mega-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Echte Bildmarken statt Symbole. Bitmaps lassen sich nicht per currentColor
   einfaerben, deshalb hier weisse Kachel mit Rahmen statt Farbumschlag. */
.mega-icon.is-logo {
  padding: 7px;
  border: 1px solid rgba(20, 20, 20, 0.1);
  background: #ffffff;
}

.mega-icon.is-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mega-item:hover .mega-icon.is-logo,
.mega-item:focus-visible .mega-icon.is-logo {
  background: #ffffff;
  border-color: rgba(245, 106, 30, 0.5);
}

.mega-text {
  display: grid;
  gap: 5px;
}

.mega-text strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mega-text span {
  color: rgba(20, 20, 20, 0.6);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
}

.mega-item[aria-current="page"] .mega-text strong {
  color: var(--accent);
}

/* ---------- Mega-Menue mit Spalten (Leistungen) ---------- */

.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mega-col {
  padding: 14px 14px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: background 180ms ease, border-color 180ms ease;
}

.mega-col:hover {
  background: #faf9f8;
  border-color: rgba(20, 20, 20, 0.07);
}

.mega-col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.07);
}

.mega-col-head .mega-text {
  gap: 2px;
}

.mega-col-head .mega-text span {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.mega-col:hover .mega-icon {
  background: var(--accent);
  color: #ffffff;
}

.mega-col-list {
  display: grid;
  gap: 1px;
}

.mega-col-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  color: rgba(20, 20, 20, 0.66);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background 150ms ease, color 150ms ease;
}

.mega-col-list a:hover,
.mega-col-list a:focus-visible {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(17, 17, 17, 0.06);
}

.mega-col-list .leistung-pill {
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .mega-col {
    padding: 12px 10px 13px;
  }

  .mega-col-list a {
    padding: 6px 8px;
    font-size: 0.84rem;
  }
}

.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  padding: 15px 18px;
  border-radius: 16px;
  background: #f6f5f4;
  color: rgba(20, 20, 20, 0.68);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 180ms ease;
}

.mega-foot:hover,
.mega-foot:focus-visible {
  background: #f0eeec;
}

.mega-foot strong {
  color: var(--ink);
  font-weight: 700;
}

.mega-foot-cta {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.page-head-section {
  padding-top: 64px;
}

.page-heading {
  margin: 18px 0 0;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  max-width: 780px;
}

.page-intro {
  margin: 20px 0 0;
  max-width: 720px;
  color: rgba(20, 20, 20, 0.72);
  font-size: 1.05rem;
  line-height: 1.65;
}

.page-placeholder {
  margin-top: 44px;
  max-width: 760px;
  padding: 32px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: #f8f8f8;
}

.page-placeholder p {
  margin: 0 0 10px;
  color: rgba(20, 20, 20, 0.72);
  font-size: 1rem;
  line-height: 1.6;
}

.page-placeholder p strong {
  color: var(--ink);
}

.page-placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .mega-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Menues mit vier Eintraegen sonst: drei oben, einer allein darunter.
     Zwei Spalten ergeben 2 + 2 und damit eine ruhige Aufteilung. */
  .mega-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .nav-links {
    display: none;
  }

  .hero-grid,
  .services,
  .grid-two {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 56px;
  }

  .hero-visual {
    min-height: 440px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .results-panel {
    padding: 28px 24px;
  }

  .results-panel-inner {
    grid-template-columns: 1fr;
  }

  .vorteile-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vorteile-intro {
    justify-self: start;
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ablauf-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 32px;
  }

  .ablauf-intro {
    justify-self: start;
  }

  .ablauf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .review-bar {
    justify-content: center;
    text-align: center;
  }

  .faq-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 28px;
  }

  .faq-intro {
    justify-self: start;
  }

  .faq-item summary {
    padding: 18px 20px;
    font-size: 0.95rem;
  }

  .faq-answer {
    padding: 0 20px 20px;
  }

  .contact-panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-facts {
    margin-top: 24px;
  }

  .contact-direct {
    margin-top: 26px;
  }
}

@media (max-width: 720px) {
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tbody tr {
    padding: 20px;
    border-bottom: 1px solid rgba(20, 20, 20, 0.07);
  }

  .compare-table tbody tr:last-child {
    border-bottom: none;
  }

  .compare-table tbody th,
  .compare-table td {
    border-bottom: none;
  }

  .compare-table tbody th {
    padding: 0 0 12px;
  }

  .compare-table td {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .compare-table td + td {
    margin-top: 6px;
  }

  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: rgba(20, 20, 20, 0.4);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .compare-table td.is-me::before {
    color: var(--accent);
  }
}

@media (max-width: 560px) {
  .brand img {
    width: 130px;
  }

  .hero-actions,
  .stats {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Ohne Umbruch der Kopfzeile wird der Button aus dem Container gedraengt,
     weil er weder schrumpfen noch umbrechen darf. */
  .nav {
    flex-wrap: wrap;
  }

  .nav-cta {
    width: 100%;
    margin-left: 0;
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contactbar-location {
    display: none;
  }

  .contactbar-inner {
    justify-content: center;
    min-height: 34px;
  }

  .contactbar-links {
    justify-content: center;
    gap: 4px 6px;
  }

  .contactbar-link {
    font-size: 0.74rem;
    gap: 8px;
    padding: 4px 10px;
  }

  .contactbar-badge {
    width: 20px;
    height: 20px;
  }

  .contactbar-badge svg {
    width: 13px;
    height: 13px;
  }

  .ablauf-grid {
    grid-template-columns: 1fr;
  }

  .ablauf-cta {
    width: 100%;
  }

  .review-bar {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }

  .review-cta {
    width: 100%;
    justify-content: center;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .contact-submit {
    justify-self: stretch;
    width: 100%;
  }
}


/* ---------- Ueber mich ---------- */

.about-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
}

.about-hero .about-photo {
  max-width: 92%;
  margin-left: auto;
}

.about-facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.about-facts li {
  position: relative;
  padding-left: 26px;
  color: rgba(20, 20, 20, 0.78);
  font-size: 1rem;
  line-height: 1.5;
}

.about-facts li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.about-photo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(17, 17, 17, 0.16));
}

.about-values-section {
  background: #f8f8f8;
}

.about-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.about-card {
  padding: 28px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: #ffffff;
}

.about-card h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.about-card p {
  margin: 0;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.97rem;
  line-height: 1.6;
}

.about-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 34px;
}

.about-branchen {
  margin-top: 40px;
}

.cta-band {
  background: linear-gradient(180deg, #1f2b33 0%, #232b34 100%);
}

.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}

.cta-band h2 {
  margin: 0;
  max-width: 620px;
  color: #ffffff;
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.cta-band p {
  margin: 12px 0 0;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cta-band .button-light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 920px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-card-grid,
  .about-focus-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Werdegang ---------- */

.cv-list {
  display: grid;
  margin-top: 38px;
}

.cv-item {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 30px;
}

.cv-period {
  padding-top: 2px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cv-body {
  position: relative;
  padding: 0 0 38px 30px;
  border-left: 2px solid rgba(20, 20, 20, 0.1);
}

.cv-item:last-child .cv-body {
  padding-bottom: 0;
  border-left-color: transparent;
}

.cv-body::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(20, 20, 20, 0.18);
}

.cv-item.is-current .cv-body::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(245, 106, 30, 0.15);
}

.cv-body h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.cv-company {
  margin: 6px 0 0;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
}

.cv-body p:last-child {
  margin: 10px 0 0;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 640px;
}

.edu-block {
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}

.edu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.edu-card {
  padding: 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #ffffff;
}

.edu-card .cv-period {
  padding-top: 0;
}

.edu-card h3 {
  margin: 10px 0 0;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.edu-card p {
  margin: 6px 0 0;
  color: rgba(20, 20, 20, 0.66);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* ---------- Kompetenzen und Sprachen ---------- */

.skill-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.skill-group {
  padding: 26px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: #ffffff;
}

.skill-group h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.lang-block {
  margin-top: 40px;
}

.lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.lang-item {
  padding: 12px 20px;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 16px;
  background: #ffffff;
  font-size: 0.92rem;
}

.lang-item strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.lang-item span {
  color: rgba(20, 20, 20, 0.6);
}

@media (max-width: 920px) {
  .cv-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cv-body {
    padding-left: 22px;
  }

  .edu-grid,
  .skill-groups {
    grid-template-columns: 1fr;
  }
}

/* ---------- Farbflaechen fuer Unterseiten ---------- */

.section-warm {
  background: linear-gradient(180deg, rgba(255, 239, 228, 0.9) 0%, rgba(255, 226, 205, 0.78) 100%);
}

.section-dark {
  background: linear-gradient(180deg, #1f2b33 0%, #232b34 100%);
}

.section-dark .section-head h2 {
  color: #ffffff;
}

.section-dark .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

.section-dark .about-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.section-dark .about-card h3 {
  color: #ffffff;
}

.section-dark .about-card p {
  color: rgba(255, 255, 255, 0.74);
}

.about-story {
  max-width: 760px;
  margin-top: 30px;
}

.about-story p {
  margin: 0 0 14px;
  color: rgba(20, 20, 20, 0.74);
  font-size: 1.04rem;
  line-height: 1.7;
}

.about-story p:last-child {
  margin-bottom: 0;
}

.about-story strong {
  color: var(--ink);
}

/* ---------- Abschnittskopf: Feinschliff ---------- */

.section-head .leistungen-kicker {
  margin-bottom: 12px;
}

.section-head.is-stacked {
  display: block;
  margin-bottom: 0;
}

.about-story {
  margin-top: 24px;
}

/* ---------- Subline-Pille: Korrekturen ---------- */

.leistungen-kicker {
  padding: 10px 18px;
  line-height: 1;
}

.section-head .leistungen-kicker {
  color: #ffffff;
  margin-bottom: 12px;
}

/* ---------- Google-Logo in der Bewertungsleiste ---------- */

.google-logo-img {
  width: auto;
  height: 30px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .google-logo-img {
    height: 26px;
  }
}

/* ---------- Pillen: Hover und breite Gruppe ---------- */

.industry-pills li {
  cursor: default;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.industry-pills li:hover {
  color: var(--accent);
  border-color: rgba(245, 106, 30, 0.55);
  box-shadow: 0 6px 16px rgba(245, 106, 30, 0.2);
  transform: translateY(-1px);
}

.skill-group.is-wide {
  grid-column: 1 / -1;
}

/* ---------- Blog ---------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 38px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: #ffffff;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.blog-card:hover,
.blog-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(245, 106, 30, 0.35);
  box-shadow: 0 20px 40px rgba(17, 17, 17, 0.08);
}

.blog-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f2f1f0;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.blog-card:hover .blog-thumb img {
  transform: scale(1.04);
}

.blog-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
}

.blog-cat {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 14px 0 10px;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.blog-card p {
  margin: 0;
  color: rgba(20, 20, 20, 0.68);
  font-size: 0.94rem;
  line-height: 1.6;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.8rem;
  font-weight: 600;
}

.blog-meta .blog-more {
  color: var(--accent);
}

.blog-card.is-featured {
  grid-column: span 2;
  flex-direction: row;
}

.blog-card.is-featured .blog-thumb {
  flex: 0 0 46%;
  aspect-ratio: auto;
}

.blog-card.is-featured .blog-body {
  padding: 30px 30px 26px;
}

.blog-card.is-featured h3 {
  font-size: 1.45rem;
}

.blog-note {
  margin-top: 34px;
  padding: 20px 24px;
  border: 1px solid rgba(20, 20, 20, 0.09);
  border-radius: 18px;
  background: #ffffff;
  color: rgba(20, 20, 20, 0.68);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card.is-featured {
    grid-column: span 1;
    flex-direction: column;
  }

  .blog-card.is-featured .blog-thumb {
    flex: none;
    aspect-ratio: 16 / 9;
  }

  .blog-card.is-featured .blog-body {
    padding: 22px 22px 20px;
  }

  .blog-card.is-featured h3 {
    font-size: 1.2rem;
  }
}

/* ---------- Blog: Ersatzflaeche ohne Bild ---------- */

.blog-thumb.is-placeholder {
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #1f2b33 0%, #2c3a44 100%);
  text-align: center;
}

.blog-thumb.is-placeholder span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.blog-thumb.is-placeholder span em {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Blog: Filter und Themenkacheln ---------- */

.blog-filter input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.blog-filter-row label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.blog-filter-row label:hover {
  color: var(--accent);
  border-color: rgba(245, 106, 30, 0.5);
}

#f-all:checked ~ .blog-filter-row label[for="f-all"],
#f-seo:checked ~ .blog-filter-row label[for="f-seo"],
#f-local:checked ~ .blog-filter-row label[for="f-local"],
#f-conversion:checked ~ .blog-filter-row label[for="f-conversion"],
#f-performance:checked ~ .blog-filter-row label[for="f-performance"],
#f-webdesign:checked ~ .blog-filter-row label[for="f-webdesign"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(245, 106, 30, 0.22);
}

#f-seo:checked ~ .blog-grid > *:not([data-cat="seo"]),
#f-local:checked ~ .blog-grid > *:not([data-cat="local"]),
#f-conversion:checked ~ .blog-grid > *:not([data-cat="conversion"]),
#f-performance:checked ~ .blog-grid > *:not([data-cat="performance"]),
#f-webdesign:checked ~ .blog-grid > *:not([data-cat="webdesign"]) {
  display: none;
}

.blog-visual {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
}

.blog-visual svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 300ms ease;
}

.blog-card:hover .blog-visual svg {
  transform: scale(1.08);
}

.cat-seo {
  background: linear-gradient(135deg, #f56a1e 0%, #d95d1a 100%);
  color: #ffffff;
}

.cat-local {
  background: linear-gradient(135deg, #1f2b33 0%, #2f3f4a 100%);
  color: #ffffff;
}

.cat-conversion {
  background: linear-gradient(135deg, #f2e9e1 0%, #e4d2c1 100%);
  color: #1f2b33;
}

.cat-performance {
  background: linear-gradient(135deg, #121212 0%, #2e2e2e 100%);
  color: #ffffff;
}

.cat-webdesign {
  background: linear-gradient(135deg, #fbe7dc 0%, #f6cdb2 100%);
  color: #1f2b33;
}

/* ---------- Blogartikel ---------- */

.article-head-section {
  padding-bottom: 34px;
}

.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 18px;
  color: rgba(20, 20, 20, 0.55);
  font-size: 0.88rem;
  font-weight: 600;
}

.article-title {
  margin: 0;
  max-width: 900px;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.article-lede {
  margin: 22px 0 0;
  max-width: 780px;
  color: rgba(20, 20, 20, 0.75);
  font-size: 1.12rem;
  line-height: 1.7;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}

.article-toc {
  position: sticky;
  top: 110px;
  padding: 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.04);
}

.article-toc p {
  margin: 0 0 14px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.article-toc a {
  color: rgba(20, 20, 20, 0.72);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 160ms ease;
}

.article-toc a:hover,
.article-toc a:focus-visible {
  color: var(--accent);
}

.prose {
  max-width: 760px;
}

.prose h2 {
  margin: 48px 0 14px;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  scroll-margin-top: 120px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 36px 0 10px;
  font-size: 1.22rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
  scroll-margin-top: 120px;
}

.prose p {
  margin: 0 0 16px;
  color: rgba(20, 20, 20, 0.78);
  font-size: 1.02rem;
  line-height: 1.75;
}

.prose strong {
  color: var(--ink);
  font-weight: 700;
}

.prose ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.prose ul li {
  position: relative;
  padding-left: 26px;
  color: rgba(20, 20, 20, 0.78);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Nummerierte Listen im Fliesstext: gleiche Abstaende wie ul, Zahl in Orange.
   Nur direkte Kinder von .prose, damit das Inhaltsverzeichnis (.toc-inline ol)
   in den Blogartikeln unveraendert bleibt. */
.prose > ol {
  list-style: none;
  counter-reset: prose-ol;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.prose > ol > li {
  position: relative;
  counter-increment: prose-ol;
  padding-left: 34px;
  color: rgba(20, 20, 20, 0.78);
  font-size: 1.02rem;
  line-height: 1.65;
}

.prose > ol > li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(245, 106, 30, 0.14);
}

.tip-box {
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid rgba(245, 106, 30, 0.28);
  border-radius: 18px;
  background: rgba(251, 231, 220, 0.55);
}

.tip-box p {
  margin: 0;
  color: rgba(20, 20, 20, 0.8);
  font-size: 0.98rem;
  line-height: 1.65;
}

.tip-box span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
  padding: 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 22px;
  background: #f8f8f8;
}

.article-author img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.article-author strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.article-author p {
  margin: 6px 0 0;
  color: rgba(20, 20, 20, 0.68);
  font-size: 0.94rem;
  line-height: 1.6;
}

.article-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 1000px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .article-toc {
    position: static;
    order: -1;
  }
}

@media (max-width: 700px) {
  .article-next {
    grid-template-columns: 1fr;
  }

  .article-author {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Artikel: Neuaufbau ---------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

@supports (animation-timeline: scroll()) {
  .reading-progress {
    animation: grow-progress linear;
    animation-timeline: scroll();
  }
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  color: rgba(20, 20, 20, 0.45);
  font-size: 0.82rem;
  font-weight: 600;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb span {
  color: rgba(20, 20, 20, 0.3);
}

.quick-answer {
  margin: 30px 0 0;
  padding: 30px 32px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1f2b33 0%, #232b34 100%);
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.07);
}

.quick-answer p.quick-label {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quick-answer p.quick-text {
  margin: 0;
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.65;
  font-weight: 500;
}

.quick-answer ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 10px;
}

.quick-answer li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.97rem;
  line-height: 1.55;
}

.quick-answer li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

.toc-inline {
  margin: 0 0 40px;
  padding: 24px 26px;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 20px;
  background: #fbfaf9;
}

.toc-inline p {
  margin: 0 0 14px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toc-inline ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}

.toc-inline li {
  counter-increment: toc;
}

.toc-inline a {
  display: flex;
  gap: 10px;
  color: rgba(20, 20, 20, 0.78);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 160ms ease;
}

.toc-inline a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent);
  font-weight: 800;
}

.toc-inline a:hover {
  color: var(--accent);
}

.article-body-section {
  background: #ffffff;
}

.tip-box {
  margin: 30px 0;
  padding: 22px 26px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #f56a1e 0%, #e0631d 100%);
  box-shadow: 0 14px 30px rgba(245, 106, 30, 0.2);
}

.tip-box span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tip-box p {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.65;
}

.tip-box a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tip-step {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  margin: 26px 0;
  padding-top: 22px;
  border-top: 2px solid rgba(20, 20, 20, 0.1);
}

.tip-step:first-of-type {
  border-top-color: var(--accent);
}

.tip-step-num {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.tip-step h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
  scroll-margin-top: 120px;
}

.tip-step p {
  margin: 0 0 14px;
}

.tip-step p:last-child {
  margin-bottom: 0;
}

.article-figure {
  margin: 34px 0;
  padding: 26px;
  border: 1px solid rgba(20, 20, 20, 0.09);
  border-radius: 22px;
  background: #fbfaf9;
}

.article-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

.article-figure figcaption {
  margin-top: 16px;
  color: rgba(20, 20, 20, 0.55);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Gezeichnete Grafiken am Handy: Ab 600 px werden Spalten-Grafiken so klein,
   dass die Beschriftung unlesbar ist. Die Grafik behaelt dann ihre Mindestbreite
   und laesst sich seitlich wischen, die Bildunterschrift bleibt stehen. */
.figure-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Rasterspalten schrumpfen sonst nicht unter die Breite ihres Inhalts:
   Eine breite Grafik wuerde die ganze Textspalte aus dem Bildschirm schieben. */
.article-layout > * {
  min-width: 0;
}

@media (max-width: 600px) {
  .figure-scroll {
    overflow-x: auto;
    margin: 0 -26px;
    padding: 0 26px 6px;
  }

  .figure-scroll svg {
    min-width: 560px;
  }

  .figure-scroll + figcaption::before {
    content: "Seitlich wischen \2192  ";
    color: var(--accent);
    font-weight: 700;
  }
}

/* Echte Screenshots in Ratgebern */
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

/* Vergleichstabelle im Fliesstext: kompakter als auf den Leistungsseiten */
.prose .compare-card {
  margin: 24px 0 30px;
}

/* Nur ab Tablet: Darunter stapelt sich die Tabelle zu Karten mit eigenen
   Abstaenden, die diese Regel sonst ueberschreiben wuerde. */
@media (min-width: 721px) {
  .prose .compare-table th,
  .prose .compare-table td,
  .prose .compare-table thead th,
  .prose .compare-table thead td {
    padding: 16px 18px;
  }
}

.key-points {
  margin: 40px 0 0;
  padding: 28px 30px;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 22px;
  background: #f8f8f8;
}

.key-points h2 {
  margin: 0 0 16px;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.key-points ul {
  margin: 0;
}

/* Kontaktbox in der Seitenleiste */

.article-aside {
  position: sticky;
  top: 140px;
}

.contact-card {
  padding: 26px 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.07);
  text-align: center;
}

.contact-card img {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-card strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.contact-card .contact-role {
  margin: 4px 0 18px;
  color: rgba(20, 20, 20, 0.55);
  font-size: 0.85rem;
}

.contact-card .contact-lead {
  margin: 0 0 18px;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.92rem;
  line-height: 1.55;
}

.contact-pills {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.contact-pill:hover,
.contact-pill:focus-visible {
  color: var(--accent);
  background: #ffffff;
  border-color: rgba(20, 20, 20, 0.1);
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.07);
}

.contact-pill .contactbar-badge {
  width: 26px;
  height: 26px;
}

.contact-pill .contactbar-badge svg {
  width: 15px;
  height: 15px;
}

.contact-card .button {
  width: 100%;
}

.contact-card .icon-fill {
  fill: currentColor;
}

.contact-card .icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1000px) {
  .article-aside {
    position: static;
    order: 2;
  }

  .toc-inline ol {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .quick-answer {
    padding: 24px 22px;
  }

  .tip-step {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------- Glossar ---------- */

.glossar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 30px;
}

.glossar-nav a,
.glossar-nav span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
}

.glossar-nav a {
  border: 1px solid rgba(20, 20, 20, 0.12);
  background: #ffffff;
  color: var(--ink);
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.glossar-nav a:hover,
.glossar-nav a:focus-visible {
  color: var(--accent);
  border-color: rgba(245, 106, 30, 0.5);
  box-shadow: 0 6px 14px rgba(245, 106, 30, 0.18);
}

.glossar-nav span {
  border: 1px solid transparent;
  color: rgba(20, 20, 20, 0.25);
}

.glossar-filter input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.glossar-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.glossar-filter-row label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.glossar-filter-row label:hover {
  color: var(--accent);
  border-color: rgba(245, 106, 30, 0.5);
}

#g-all:checked ~ .glossar-filter-row label[for="g-all"],
#g-seo:checked ~ .glossar-filter-row label[for="g-seo"],
#g-sea:checked ~ .glossar-filter-row label[for="g-sea"],
#g-web:checked ~ .glossar-filter-row label[for="g-web"],
#g-analyse:checked ~ .glossar-filter-row label[for="g-analyse"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(245, 106, 30, 0.22);
}

#g-seo:checked ~ .glossar-body .glossar-card:not([data-cat="seo"]),
#g-sea:checked ~ .glossar-body .glossar-card:not([data-cat="sea"]),
#g-web:checked ~ .glossar-body .glossar-card:not([data-cat="web"]),
#g-analyse:checked ~ .glossar-body .glossar-card:not([data-cat="analyse"]) {
  display: none;
}

#g-seo:checked ~ .glossar-body .glossar-letter:not(:has(.glossar-card[data-cat="seo"])),
#g-sea:checked ~ .glossar-body .glossar-letter:not(:has(.glossar-card[data-cat="sea"])),
#g-web:checked ~ .glossar-body .glossar-letter:not(:has(.glossar-card[data-cat="web"])),
#g-analyse:checked ~ .glossar-body .glossar-letter:not(:has(.glossar-card[data-cat="analyse"])) {
  display: none;
}

.glossar-letter {
  margin-top: 46px;
  scroll-margin-top: 130px;
}

.glossar-letter:first-child {
  margin-top: 38px;
}

.glossar-letter h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.glossar-letter h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(20, 20, 20, 0.12);
}

.glossar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.glossar-card {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #ffffff;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.glossar-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 106, 30, 0.32);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.07);
}

.glossar-card h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.glossar-card p {
  margin: 0;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
}

.glossar-tag {
  align-self: flex-start;
  margin-top: 16px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .glossar-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Referenzen ---------- */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 38px;
}

/* Bleibt in der letzten Reihe nur eine Karte uebrig, rueckt sie in die Mitte. */
@media (min-width: 1001px) {
  .ref-grid > :last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

.ref-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 24px;
  background: #ffffff;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.ref-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 106, 30, 0.3);
  box-shadow: 0 22px 44px rgba(17, 17, 17, 0.09);
}

.ref-shot {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(20, 20, 20, 0.06);
  background: linear-gradient(180deg, #faf8f6 0%, #f1ede9 100%);
}

.ref-shot img {
  width: auto;
  height: auto;
  max-width: 74%;
  max-height: 62%;
  object-fit: contain;
}

.ref-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 24px;
}

.ref-body h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.ref-body p {
  margin: 0;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.96rem;
  line-height: 1.6;
}

.ref-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ref-tags span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ref-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.85rem;
  font-weight: 600;
}

.ref-foot .ref-link {
  color: var(--accent);
}

/* Kundenstimmen: Google-Bewertungen als Karussell.
   Die Bewertungen stehen fest im HTML (statische Seite), das Skript
   assets/reviews.js ergaenzt nur Pfeile, Punkte und "mehr lesen".
   Ohne Skript bleibt die Leiste wischbar und alle Texte lesbar. */

.gr {
  margin-top: 30px;
}

.gr-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 22px;
}

.gr-summary strong {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.gr-summary-stars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gr-summary-stars .gr-stars {
  font-size: 1.25rem;
}

.gr-summary-stars small {
  color: var(--muted);
  font-size: 0.85rem;
}

.gr-stars {
  color: #fbbc05;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.gr-carousel {
  position: relative;
}

.gr-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 10px;
}

.gr-track::-webkit-scrollbar {
  display: none;
}

.gr-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.04);
}

.gr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gr-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(20, 20, 20, 0.55);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.gr-source svg {
  width: 16px;
  height: 16px;
}

.gr-text {
  display: -webkit-box;
  margin: 14px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: rgba(20, 20, 20, 0.78);
  font-size: 0.93rem;
  line-height: 1.6;
}

.gr-text.is-open {
  display: block;
  -webkit-line-clamp: unset;
}

.gr-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.gr-more:hover {
  color: var(--accent-dark);
}

.gr-more[hidden] {
  display: none;
}

.gr-more svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  transition: transform 180ms ease;
}

.gr-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.gr-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.gr-text + .gr-foot,
.gr-more + .gr-foot {
  margin-top: 16px;
}

.gr-foot {
  border-top: 1px solid var(--line);
}

.gr-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #7b8794;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
}

.gr-card:nth-child(6n + 2) .gr-avatar { background: #5c6bc0; }
.gr-card:nth-child(6n + 3) .gr-avatar { background: #e16f35; }
.gr-card:nth-child(6n + 4) .gr-avatar { background: #26a69a; }
.gr-card:nth-child(6n + 5) .gr-avatar { background: #8d6e63; }
.gr-card:nth-child(6n + 6) .gr-avatar { background: #ab47bc; }

.gr-foot strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

.gr-foot span:not(.gr-avatar) {
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.78rem;
}

.gr-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 160ms ease, color 160ms ease;
}

.gr-nav:hover {
  color: var(--accent);
}

.gr-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.gr-nav.prev { left: -20px; }
.gr-nav.next { right: -20px; }

.gr-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

.gr-nav[hidden] {
  display: none;
}

.gr-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
}

.gr-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gr-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.2);
  transition: background 160ms ease, transform 160ms ease;
}

.gr-dots button.is-active::before {
  background: var(--accent);
  transform: scale(1.25);
}

.gr-cta {
  margin-top: 22px;
}

@media (max-width: 1020px) {
  .gr-card { flex-basis: calc((100% - 18px) / 2); }
}

@media (max-width: 680px) {
  .gr-track { gap: 14px; }
  .gr-card { flex-basis: 86%; }
  .gr-nav { display: none; }
}

/* Fallstudie */

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.1);
}

.case-fact {
  padding: 22px 24px;
  background: #ffffff;
}

.case-fact span {
  display: block;
  margin-bottom: 8px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-fact strong {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.case-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.case-metric {
  padding: 26px;
  border: 1px solid rgba(245, 106, 30, 0.22);
  border-radius: 22px;
  background: rgba(251, 231, 220, 0.4);
}

.case-metric strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.case-metric b {
  display: block;
  margin: 10px 0 8px;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.case-metric p {
  margin: 0;
  color: rgba(20, 20, 20, 0.68);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .ref-grid,
  .quote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-facts,
  .case-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ref-grid,
  .quote-grid,
  .case-facts,
  .case-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fallstudie: Markenbausteine ---------- */

.brand-logo-panel {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  margin: 30px 0;
  padding: 28px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #f0ece7;
}

.brand-logo-panel img {
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 72%;
  object-fit: contain;
}

.brand-palette {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0;
}

.brand-swatch {
  overflow: hidden;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 16px;
  background: #ffffff;
}

.brand-chip {
  display: block;
  height: 92px;
}

.brand-swatch div {
  padding: 12px 14px 14px;
}

.brand-swatch strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.brand-swatch code {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(20, 20, 20, 0.52);
}

.brand-type {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0;
}

.type-card {
  padding: 24px 26px 26px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #ffffff;
}

.type-label {
  margin: 0 0 14px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.type-serif {
  margin: 0 0 10px;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1.28;
  color: #1a283b;
}

.type-sans {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(20, 20, 20, 0.74);
}

.type-note {
  margin: 14px 0 0;
  font-size: 0.84rem;
  color: rgba(20, 20, 20, 0.5);
}

.brand-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
  padding: 26px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 20px;
  background: #f7f5f2;
}

.mi-btn {
  padding: 13px 26px;
  border-radius: 3px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mi-btn.is-primary {
  border: 1px solid #1a283b;
  background: #1a283b;
  color: #ffffff;
}

.mi-btn.is-secondary {
  border: 1px solid #1a283b;
  background: #ffffff;
  color: #1a283b;
}

.mi-btn.is-beige {
  border: 1px solid #c9a27a;
  background: #c9a27a;
  color: #1a283b;
}

@media (max-width: 760px) {
  .brand-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-type {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fallstudie: Sortiment und Hinweis ---------- */

.shop-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0;
}

.shop-item {
  padding: 16px 18px 17px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 14px;
  background: #ffffff;
}

.shop-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.shop-item span {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(20, 20, 20, 0.52);
}

.note-box {
  margin: 26px 0;
  padding: 20px 24px 22px;
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  background: #f7f5f2;
}

.note-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .shop-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* In der schmalen Textspalte sind vier Kennzahlen zu eng: 2 x 2 statt 4 x 1.
   Erst ab 761px, damit die einspaltige Handyansicht erhalten bleibt. */
@media (min-width: 761px) {
  .prose .case-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Fallstudie: Produktbilder ---------- */

.shop-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0;
}

.shop-gallery figure {
  margin: 0;
}

.shop-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 16px;
  background: #f7f5f2;
}

.shop-gallery figcaption {
  margin-top: 9px;
  color: rgba(20, 20, 20, 0.55);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .shop-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Belege: Screenshots von KI-Antworten ----------
   Anders als .shop-gallery ohne quadratischen Zuschnitt: Bei Chat-
   Screenshots wuerde ein Zuschnitt genau den Text abschneiden, um den
   es geht. Die Bilder behalten ihr Seitenverhaeltnis. */
/* Reiter statt drei Belege untereinander: Immer ist genau einer sichtbar,
   gross genug zum Lesen, und der Block bleibt kompakt. Ohne JavaScript,
   nach demselben Prinzip wie der Themenfilter im Blog. Die Bilder sind
   verlinkt und oeffnen sich in voller Groesse. */
.ki-proof {
  position: relative;
}

.ki-proof > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ki-proof-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.ki-proof-tabs label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(20, 20, 20, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: rgba(20, 20, 20, 0.7);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.ki-proof-tabs label:hover {
  color: var(--accent);
  border-color: rgba(245, 106, 30, 0.5);
}

#kb-1:checked ~ .ki-proof-tabs label[for="kb-1"],
#kb-2:checked ~ .ki-proof-tabs label[for="kb-2"],
#kb-3:checked ~ .ki-proof-tabs label[for="kb-3"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(245, 106, 30, 0.22);
}

#kb-1:focus-visible ~ .ki-proof-tabs label[for="kb-1"],
#kb-2:focus-visible ~ .ki-proof-tabs label[for="kb-2"],
#kb-3:focus-visible ~ .ki-proof-tabs label[for="kb-3"] {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ki-proof figure {
  margin: 0;
  display: none;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

#kb-1:checked ~ figure:nth-of-type(1),
#kb-2:checked ~ figure:nth-of-type(2),
#kb-3:checked ~ figure:nth-of-type(3) {
  display: grid;
}

/* Einzelner Beleg ohne Reiter, etwa auf der Local-SEO-Seite */
.ki-proof-single figure {
  display: grid;
}

.ki-proof figure a {
  display: block;
  cursor: zoom-in;
}

.ki-proof img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.06);
}

.ki-proof figcaption {
  color: rgba(20, 20, 20, 0.72);
  font-size: 1rem;
  line-height: 1.65;
}

.ki-proof figcaption strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 1.15rem;
}

.ki-proof-zoom {
  display: block;
  margin-top: 12px;
  color: rgba(20, 20, 20, 0.5);
  font-size: 0.84rem;
}

@media (max-width: 920px) {
  .ki-proof figure {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------- Hero auf Leistungsseiten ----------
   Die Startseite nutzt fuer h1 clamp(2.6rem, 15vw, 4rem). Das passt dort,
   weil die Ueberschrift aus kurzen Woertern besteht. Bei laengeren
   Ueberschriften ergibt 15vw auf dem Telefon rund 58px und laeuft aus dem
   Bild. Leistungsseiten bekommen deshalb ein eigenes, ruhigeres Mass. */

.hero-leistung h1 {
  font-size: clamp(1.85rem, 6.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  max-width: 15ch;
}

@media (min-width: 921px) {
  .hero-leistung h1 {
    max-width: none;
  }
}

/* Sicherheitsnetz: lange Woerter duerfen nie aus dem Container laufen */
.hero-leistung h1,
.hero-leistung .lead {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Das Hero-Bild ist 1203 x 1301 px (Verhaeltnis 0,93). Am Telefon steht
   eine Flaeche von rund 350 x 440 zur Verfuegung (Verhaeltnis 0,80), und
   object-fit: cover schneidet davon seitlich 14 Prozent ab - genau den
   Rand, auf dem die Kennzahlen-Kachel liegt. Unterhalb der Umbruchbreite
   deshalb das ganze Bild zeigen und die Hoehe aus dem Seitenverhaeltnis
   ergeben lassen. */
@media (max-width: 920px) {
  .hero .hero-visual {
    min-height: 0;
  }

  .hero .hero-photo-wrap {
    min-height: 0;
    height: auto;
  }

  .hero .hero-photo {
    height: auto;
    object-fit: contain;
  }
}

/* Folgt ein Abschnitt direkt auf die Bewertungsleiste, summieren sich drei
   Abstaende: 80px Innenabstand unten an der Leiste, 90px oben am naechsten
   Abschnitt und 30px Aussenabstand der Kurzantwort-Box. Alle drei muessen
   zurueckgenommen werden, sonst bleibt eine grosse Luecke.
   Die Regel greift nur vor einem eng gesetzten Abschnitt, damit die
   Startseite mit derselben Leiste unveraendert bleibt. */
.section-tight {
  padding-top: 0;
}

.review-bar-section:has(+ .section-tight) {
  padding-bottom: 36px;
}

.section-tight .quick-answer {
  margin-top: 0;
}

/* ---------- Abschnitte sichtbar voneinander trennen ----------
   Mehrere helle Abschnitte hintereinander liefen optisch ineinander.
   Ein warmer Tonwert im Wechsel mit Weiss gibt der Seite Rhythmus. */

.section-tint {
  background: #faf8f6;
  border-top: 1px solid rgba(20, 20, 20, 0.06);
  border-bottom: 1px solid rgba(20, 20, 20, 0.06);
}

/* Die FAQ hat mit #f8f8f8 einen eigenen Grauton, der von #faf8f6 optisch
   nicht zu unterscheiden ist. Folgt sie direkt auf einen getoenten
   Abschnitt, verschmelzen beide zu einer einzigen grossen Flaeche.
   Dann bleibt die FAQ weiss, damit der Wechsel erhalten bleibt.
   Betrifft nur seo-content.html und seo-freelancer.html; auf der
   Startseite steht vor der FAQ kein getoenter Abschnitt. */
.section-tint + .faq-section {
  background: #ffffff;
}

/* Folgen zwei ungetoente Abschnitte aufeinander, trennt sie eine feine Linie. */
.section-line {
  border-top: 1px solid rgba(20, 20, 20, 0.08);
}

/* ---------- Pillen: ein einheitliches Mass fuer alle Seiten ----------
   Vorher hatten .eyebrow, .tools-kicker und .leistungen-kicker drei
   verschiedene Polsterungen, Schriftgroessen und Gewichte. Diese Regel
   steht bewusst am Ende und setzt alle auf denselben Wert. */

.eyebrow,
.tools-kicker,
.leistungen-kicker {
  padding: 10px 20px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* Kleine Etiketten an Karten: eigenes, ebenfalls einheitliches Mass */
.blog-cat,
.glossar-tag,
.ref-tags span {
  padding: 5px 12px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* ---------- Links im Fliesstext ---------- */

/* Nur Absaetze und Listen direkt im Fliesstext.
   Das Inhaltsverzeichnis liegt in einem eigenen div und bleibt so unberuehrt.
   .vorteile-note steht ausserhalb der Prosa, enthaelt aber ebenfalls
   Verweise auf andere Seiten. Ohne diese Zeile saehen sie aus wie
   normaler Text und wuerden nicht angeklickt. */
.prose p a,
.prose > ul a,
.prose > ol a,
.vorteile-note a,
.compare-table td a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.prose p a:hover,
.prose p a:focus-visible,
.prose > ul a:hover,
.prose > ul a:focus-visible,
.prose > ol a:hover,
.prose > ol a:focus-visible,
.vorteile-note a:hover,
.vorteile-note a:focus-visible,
.compare-table td a:hover,
.compare-table td a:focus-visible {
  color: var(--accent-dark);
}

/* Auf farbigen Flaechen erbt der Link die Textfarbe.
   .prose-Varianten noetig, weil ".prose p a" sonst spezifischer ist und orange faerbt. */
.tip-box a,
.quick-answer a,
.prose .tip-box p a,
.prose .quick-answer p a,
.prose .tip-box p a:hover,
.prose .tip-box p a:focus-visible,
.prose .quick-answer p a:hover,
.prose .quick-answer p a:focus-visible {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Subline-Pillen: Markenzeichen und feste Abstaende ---------- */
/* Eine Regel fuer alle Sublines (.eyebrow, .leistungen-kicker, .tools-kicker):
   gleiche Groesse, RB-Zeichen statt Punkt, fester Abstand zur Ueberschrift.
   Pille -> h1: --pill-abstand-h1, Pille -> h2: --pill-abstand-h2. */

:root {
  --pill-abstand-h1: 20px;
  --pill-abstand-h2: 14px;
}

/* Grossbuchstaben sitzen in der Zeilenbox 1px zu hoch: Inhalt 1px tiefer
   setzen (oben 11, unten 9), das Zeichen per translate wieder exakt mittig. */
.eyebrow,
.tools-kicker,
.leistungen-kicker {
  gap: 8px;
  padding: 11px 20px 9px 16px;
}

.eyebrow::before,
.tools-kicker::before,
.leistungen-kicker::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 14px;
  border-radius: 0;
  background: #ffffff;
  transform: translateY(-1px);
  -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat;
  mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZEAAAHYCAYAAACMdtXzAAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR4nO3d3XEbV9LG8ceuvacyEDaAHdIRcByBuBEIrnrn2nQEhiIwdY0LgREsFYHBCEwigQUjWDECvReNMUASH4PBzPT5+P+qULYoieqSKD3o0+ec+eH79+/KTlWUq/8brV61Uv1arl59mnfwOR40XXzr4PMASNwPyYZIVVxIupCFRCnpnaRzx4pS9yipSfB8k/Rw4McstT9sCTkgEGmESFWMZEFxsfovYZGv+x0ff9D2kJtv/bGEFNBInCFSFe9kYXG1+u97z3KQvCetO6M6jOy/08XcqSYgCPGEiAXH1er1wbkaYNOzLFTWr+ni0JIdkITwQ6QqxiI4EKd7rYNlruli6VsO0L0wQ8RmHGNJ15LOXGsBuvMkm8HYi1BBAsIKEQuPiaSPvoUAg3iSdKd1qDDMR3TCCBHbjnsj6dK7FMDRV1mg3NGlIBa+IULnAezyKOtS7hjSI2Q+IWI7ra4l/T78Lw5Ep172mhEoCM3wIWJXjszE2Q6gjSfZ0i9LXgjCcCFi3cdE0q/D/IJA8h61DhSG8nAxTIjY4PxOdB9AX77KlrvuvAtBXvoPkaq4lvRHv78IgJVn2XLxDctdGEJ/IWLLVzdi5xXg5V7Wncy8C0G6+gkRC5C5uE0XCMGz7A3djO4EXes+RGz+MRMBAoToVhYmc+9CkIZuQ8QCZC7uuwJCdy+bmzCIx0m6CxECBIjRk6QJcxO01U2IECBA7AgTtHJ6iNgQ/UGcAQFSQJjgKKeFCLuwgFQRJmjkxxN//kwECJCi95K+qCoeVvfdAVu170SqYiJu4QVycS9pzDkTvNYuROydyZ9dFwMgeJ9ly1xc+AhJbULE5iBLsRMLyNWzpGvmJZDazURmIkCAnJ3J5iXz1fZ+ZOy4TqQqriT9p7dqAMTok+z0O0tcGWoeIixjAdjtSTZ4n3sXgmEds5w1EQECYLv3kv5UVdys3nAiE806kaoYSfpv38UASMKjrCt58C4E/Wvaicz6LAJAUs4l/bV6qikSd7gT4UwIgPbuJV0xdE9Xk05k0ncRAJJ1KWnJ1Snp2h8i9gd/OUglAFJ1Jhu6s7yVoEOdCH/oALryh6pixu6ttOyeibAjC0A/HiWVzEnSsK8ToQsB0Idz2ZyEK1MSsC9ExkMVASA7Z5LmqoqxdyE4zfYQsT9YTqcD6FN9kePYuxC0t6sTuRq0CgA5+7J6yB0i9Hawbjsn/udSDYCc3Wq6GHsXgeNs60ToQgB4+KiqmHkXgeMQIgBCQpBEZluIfBi8CgBYI0gi8jJEuN8GQBgIkki87kRYygIQCoIkAq9DpPQoAgB2+Mg5krC9DpFzlyoAYDcOJAZsHSLMQwCE6wt3bYVpsxMpvYoAgAbmBEl4NkOEPxwAITuTxPNIArMZIiOvIgCgoXNJM+8isLYZIgzVAcTgAxc2hsMuYLR1xr+8iwGAI/ys6WLuXUTu6k6ENUYAsbljPuKvDpHSswgAaOFM0p13Ebnb93hcAAjdJfMRX3WIsL0XQKx+5/yIH2YiAFIw8y4gV4QIgBScs6zlow4RzogAiB3LWg7+4V0AJElPkpar/583+PHfJD2c9CsOvb/etmLu+wu+6/vLV9++7KokJOlG7DYdVH3Y8Lt3IRl5lAXFg6Qlh6VOYO8666XYcvXf+mMjSe+HLwoB+EXTxcy7iFwQIsP4KtvPfqfp4pt3MVmpipEsUOpwKUXApO5Z0oi/a8P44fv//eudpP95F5KgJ0kTERzhsmfojFavUhY0Z271oEufNF1MvIvIwQ/f/+9fpaQ/vQtJyL2kCctUkbLO5WL1KkWwxOyfmi6W3kWkjsF6d54kXWu64BqGmNk/OkttXqdhwVJqHSrsZozDRNLYuYbk0Yl0g9Y5J7bTrNx4ESrh4qbfntGJnOZJ0pWmi9O22yIuNuO6U92tvOxUrsTyV0gmYstvr+hE2ruXBQhDc7xkW4/HoksJBd1Ij+hE2rnVdDH2LgKBss70WlLdpVzJQoVA8TER3Uhv6ESOR4CgnXWgXItzKkOjG+kJzxM5DgGC9qaLpaaLG00XI0k/SbqVHYxD/8beBaSKEGnuUfUSBXCq6eJh9YZkJOk32SYN9OfjqhNExwiRZp7FEB19mC6+bXQnv4gw6dPEu4AUESLNjDn5it5NFzPCpFdXqzM+6BAhctg9p9AxKMKkL2eyjQ3oECFy2Ni7AGTKrjO/kPTJuZKUTLwLSA0hst8ty1hwZTOTiaR/yg644jTvefphtwiR/SbeBQCS6u3BpWwnF9uCT8Muyw4RIrvRhSA808WNbInr0buUiDEX6RAhstuNdwHAVtaVXEj67F1KpM5UFWPvIlJBiGz3yM28CN50cS3bwYXj0Y10hBDZbuZdANCI7eD6ScxJjvWBMyPdIES2m3sXADRmXXMpzpQci26kA4TIW08sZSE69jXLwP04hEgHCJG3CBDEye52K0WQNFV6F5ACQuStuXcBQGsWJGMxI2niTFVBN3IiQuQtOhHEbT0jIUgOK70LiB0h8hYhgvhtPqIX+5TeBcSOEHmNZ4YgFbb9lwOJ+53zsKrTECIvMZBEWuxAIhc37ld6FxAzQuQluhCkaCzmI/uU3gXEjBABUmcXiU6cqwhZ6V1AzAgRIAd2+y/LWtu95wqU9giRl9iZhZSxW2u30ruAWBEiLzETQbps2++tdxmB4mmHLREiQF4m3gUEqvQuIFaECJATG7LTjbxFJ9ISIQLkZ+JdQIDOOHTYDiEC5Ma6ka/eZQRo5F1AjAgRIE8z7wICVHoXECNCBMjRdHEnnoT42si7gBgRIkC+7rwLCMzIu4AYESJAvmbeBQSGHVotECJAruzwIUtaa2feBcSIEAHyxpLWpqoovUuIDSEC5G3uXQDiRogAeZt7FxCY0ruA2BAiQM7scdA80ROtESIA5t4FBGTkXUBsCBEAS+8CAjLyLiA2hAgAHsaG1ggRAITIGgcOj0SIALmz4fqzdxmB4MDhkQgRABLdCFoiRAAArREiACQ6kTWuPjkKIQJAkr55F4A4ESIAgNYIEQASnQhaIkQASMxE0BIhAgBojRABALRGiAAAWiNEAACtESIAgNYIEQBAa4QIAEl6510A4kSIAJB4jgZaIkQAAK0RIgCA1ggRABIzEbREiACQmImgJUIEANAaIQJAkkbeBQRjuph7lxATQgSAJL33LgBxIkSA3FUF8xC0RogAYGfW2rN3AbEhRACU3gUEhCc8HokQATDyLgDxIkQAMBNZW3oXEBtCBMhZVbyTdO5dRkCW3gXEhhAB8kYX8tI37wJiQ4gAeSu9CwgMg/UjESJA3q68CwgMnciRCBEgV8xD3pou6ESORIgA+aILeenJu4AYESJAvgiRl5beBcSIEAFyZEtZH7zLCMzcu4AYESJAnuhC3lp6FxAjQgTI09i7gAAtvQuIESEC5KYqRpIuvcsIDg+jaoUQAfIz8S4gQI/eBcSKEAFyYgP1j95lBIjzIS0RIkBerr0LCBQh0hIhAuTCZiGEyHaESEuECJCPiaQz7yKCxFC9NUIEyEFVXIhZyC733gXEjBAB8jDzLiBgc+8CYkaIAKmrimtxW+8+c+8CYkaIACmzZayJdxlBYx5yEkIESJWdCZmJYfo+X70LiB0hAqTrRixjHTL3LiB2hAiQoqoYi91YTdx5FxA7QgRITVVcSfriXUYEHjVdLL2LiB0hAqTEBukz7zIiMfcuIAWECJAKC5C5GKQ3NfMuIAWECJACAuRYT5ouuC+rA4QIEDsbos9FgByDgXpHCBEgZnYa/YsIkGPdeBeQin94FwCgBTtIeCO28bbBrqwOESJAbNY7sDhI2A5dSIdYzgJiYstXcxEgp2Ae0iE6ESAG1n3cSLr0LiVyt5ouvnkXkRJCBAiZzT6uJf3uXUoiZt4FpIYQAUJlW3dvxM6rrjxy7Xv3CBEgNBYeE0nvfQtJDgP1HhAiQAhs2epKhEdfnjRdzLyLSBEhAniqipGksWzuwbJVf2beBaSKEAE82JLVlaQPzpXk4FksZfWGEAGGYs/5qF90HcO5YVtvfwgRoC/rOUcpgsMLXUjPCBGgS3YosJSFBgcD/dGF9IwQAU5hg/FSdBshogsZACECHGPdaZSSLsR23JBN6EL6R4gAu1iXcbF6lWJ5KiZPmi7oQgZAiACSVBWlpJHWoXEhlqZidu1dQC4IEeTDdktdyMJiJOsuRmJJKjX3mi647n0ghAjSYktQm68LSe/EUlROxt4F5IQQQVxs2Ulah8No40VHgU88+nZYhAjCsA6H0eol2XJT/TECAoc8iS29gyNE0K91ONT/HWkdEgyv0aUxW3qHR4igGza0LrXeDjsS3QOG85kHTvkgRNCeXShYrl7nrrUgZ0+y57DAASGC49iJ7WtxxQfCwTKWI0IEzdjzL65Fx4GwsIzljBDBfjzvG+F61HTByXRnhAi2s2WrG3FID2F6li2pwtmP3gUgQFVxLekvESAI15hDhWGgE8GabdOdied+I2yfuRsrHIQIjAXIXAzOEbZ75iBhYTkLBAhi8SjmIMEhRHJHgCAOz+I8SJAIEcxFgCB8paaLB+8i8BYhkrOquBEBgvD9QoCEixDJld2u+6t3GcABv2i6mHkXgd0IkRytt/ICIftMgISPEMnTtbjGBGG7ZStvHAiR3NgzyH/3LgPY41bTxdi7CDRDiORn4l0AsAcBEhlCJCfWhXz0LgPYgQCJECGSl7F3AcAOBEikCJG8jL0LALb4RIDEiwsYc2HPQ2dHFkLDOZDI0Ynkg4vrEJJnESBJoBPJR+ldALDyLO7CSgadSA7sUbcsZSEEj5IuCJB00InkofQuAJD0VSld525vzt5p/9+vB0nfNF3MhyjJAyGShwvvApC9T5ouJt5FtGb3zZUbr+Nuv64KybqwB9njF+5SCVNCJA8j7wKQrfphUnE+E70qxrJNKR86+Gznq9dHSV9UFV8l3SnyQCFE8kAnAg/2ONvpYuldyFGs67hevc56/JU+rF43qoqZpJvofq/EYD0Xff5FALb5LNuBtfQupLGqeKeqmEhayi4pHervzZns2T7/VVXcrEIsGoQIgC49S/q3povrqJZobNlqqWHDY5tfJS1VFdFcg89yFoCu3MuWr2IKj5HsAW2XvoW8cCbpj9UtE+PQuzk6EQCnepb0m6aLMrIAuZLtlgopQDZdSnpYdUnBIkQAnOJednjwxruQo9js4z8Kf154JtvJFezvL8tZANp4ljSJLjwkrXZCxfZcnV//3jUWWLdHJ5KHR+8CkJQ4uw8p1gCpfZQ0D233FiGSh6V3AUjCk2znVVxbd2txB0jtXIEFCSGSBy67w6k+ybqPWE+eTxR/gNTOZTvKgkCI5GHuXQCidS/pn5ouJqGtxTdmu7B+9y6jYx9WnZU7QiQHdoPos3cZiMqTpJ+jXbqqrc+BpOhjCNt/CZF8xLkMgaHVTxwcJXJ9+Uzhb+M9xZfVlfRufkzkCwWHESLY51k29xgl88hae5ce6kHCLt15DtrpRHJhA9En7zIQnM3wiHfusd3Eu4CBvJfktt2aEMnLzLsABCPl8Ki7kJweCe02HyFE8nIjBuy5Szs81ibeBTi4WW0kGBQhkhP7B2PiXQZc5BIe9ZbenLqQ2pkcVhsIkdzYVRXMRvKSR3isjb0LcHQ59LNICJE8jb0LwCC+KvaDgseyXUpdPA89Zn8Mue2XEMmRbev+7F0GelMfFIzv+eanK70LCMRsqF+IEMnVdHEtbvdN0a3sjqu5dyFOSu8CAnG+ui+sd4RI3q7Ebq1U1CfNx9ksXW1XehcQkOshdmsRIjmzpY5SBEnsniWVyZw0P825dwEBGWS3FiGSu+niQdKguznQqTpAuO7f+Q6pQF32fQiREIFW72B/8S4DrRAga8E8qCkwN33erUWIwBAkMfpEgKCBM/V4txYhgrV1kDAjCd+TpouJdxGBKb0LCNhHVUXZxycmRPCSBUkpgiR0bre2Ilq9fM38yDAKb9gSSSmCJGRz7wIQnfM+huw/imEUtiFIwsYsZBt+Tw7rfMjOchZ2s3+oLsTJdsQh50OWTZ2p4y39P0padvkJkZj1gUSCBEjD712eZP9RUmefDImyazRKESTh6GmnTdTyvS+sjUlXn4jlLDQzXXzTdHEhu+AP/q68CwgUz8pp5mNXm6oIERxnuhiLIAnB2LuAQDFcb66TLb+ECI5nQfKbdxmZO+v7TqRIzb0LiMhlF8uihAjascfsck2Kr17vRIrU3LuAyExO/QSECNqz0+0/ibMkXs7U4YA0CbYtnblIcyd3I4QITrM+lMhfXB+/slPrjTvvAiIzOeUnEyI4HYcSvd2xrPXCzLuAyJzUjRAi6Mb6LMlX50pydCZpTpCs2Jsa3tAcZ9L2JxIi6I6dJbkSW4A9nIubfTfxe3Gcy7an2AkRdM+2ALNza3gfVRUz7yKCYJs+mNMdZ9LmJxEi6If9Jf632Lk1NIJkbeJdQGQ+tulGCBH0Z7q4Ezu3PHzkIKLoRtoZH/sTCBH0i51bXr6oKibeRQRg7F1AZI6+Jp4QQf+4vNHL79kvbdnNvuwYbO7o63QIEQyHO7c8MCOxd9fM5po7qhshRDAsu3OLgfuw8g4Se7AaW36bOz/mmnhCBMNj4O4h9yCZiK+3YzTuRggR+GDg7uGjqiLnK1LG3gVE5Krp1wkhAj8M3D18UK5XpNiQna+1Zs7U8OmZhAj8ccJ9aOfKNUgYsh+j0ZIWIYIw8GySoeUZJHZR6MS7jEicNznBToggHDYnGYk5yVDqIBl5FzIo2yF4711GJA52I4QIwrK+Up6162GcS3o4ZktnIo4+mZ2pg3MRQgThsYH7WBxMHEr9PJJ8gsS63s/eZUTg/aGvC0IE4bJlh5/FnGQI+QWJzUb42jpsvO87CRGEzbZlcp5kGHkFiS2dsqx12N4lLUIE4bNrK0oxJxnCmaS/srlK3nYFMmTfb++SFiGCOKznJJwnGcaXbIKELb9NjHd9ByGCuHCeZEh5BAkn2Zsod30HIYL4cJ5kSHkECd3IITsPHhIiiNP63i22afYv/ack2tztk3cZgds6YCdEELfp4lo2J2F5q185PCXxRnwd7VNu+yAhgvjZnKQUz4voW9rPJLEtvzy8arcP2z5IiCAN6+eT8DztfqUdJHQj+1VF+fpDhAjSYXOSK7G23bd0g4Ru5JDy9QcIEaTHHoXKdSn9+qiqeEj0Knm6kd3K1x8gRJAmrksZQprPJKEb2efy9QcIEaSL61KGkGaQECK7vZqLECJIG9elDCG9ILFuhDcf25Wb3yBEkIf1dSlsA+5HekFCN7JLufkNQgT5WG8D5tbWfqQVJPb1wkztrRc3+hIiyIstb5XiupS+nEtaJvRMErqRt84279EiRJAnuy7l32IrZx9SerjVnXcBgfr7z5YQQb6mizvZ+i5LFt1LI0hswM4tCG8RIoCket27FP9Q9CGNIJFm3gUEqKz/hxAB1tel/OZdSoJSCJK5dwEBohMB3pgubsR1KX2IO0hY0trmrN6FR4gAm7gupS9xBwkD9m0uJEIEeIvrUvpSB8nIu5AW5t4FBIgQAXZaX5fCnKRbZ5LuojuQaG8s6E5fYjkLOIg5SR/OFeeOp7l3AYEpJUIEOIw5SR8+qCquvYs40ty7gBARIkATzEn68Edkg/YH7wICcykRIkBzzEn6MPMuoDF7I8Et0K8QIsCxmJN06TyyZS26kU1VURIiQBvMSbo0iWi3FiHyCiECtLWek3Ca+TRnkmLpRgiRly4IEeAU63u3PnmXErnrSLqRpXcBgXlHiABdmC4msue4Mydp50zS2LuIg+zWZ2wgRICu2HPcSxEkbcWypMWf7xrLWUCn7J3qSAzc23gfybkRupE1lrOAztnV4aU4mNjG2LsAHIcQAfqwPpjIwP04V94FNDD3LiAkhAjQp/XAHc28j/Sq+FwxEwF6ZwP3n8RAtqkY5iIwZ4QIMAQbuHPCvZnQQ+SbdwEhIUSAoaxPuN/7FhK80EOE3VkbCBFgSDZwL8XOrX1iOLmOFUIE8MDOrX0IkYgQIoAXdm7tcu5dAJojRABPtnOLZ5MgWoQI4M2eTVKKIIkFy20bCBEgBGwB3hT67rXQd48NihABQrHeAkyQIBqECBASLm+UOMwXFUIECM368sZcgyT0w3wj7wJCQogAoco3SObeBRww8i4gIPeECBAyC5LczpKE3omwO2sDIQKEzs6S5BIkj6u5UMg4DLmBEAFikE+QzLwL2Ksq6EJeIUSAWORxuv3Ou4ADOCPy0gMhAsQk7dPt96uzMiEjRF76RogAsbHT7aXSO5Q48S6ggZF3AaEhRIAYpRck96suK3R0Ii/NCREgVnYo8UJpnCWZeBfQ0KV3AaEhRIDYxX+W5GsUXUhV0IW8tSREgBTYzq2fJD05V3KsZ0nX3kU0VHoXEJzpghABkrG+Tv6rdylHuI5gR1at9C4gME8Sy1lAWmxOciXpN4W/Dfh21UHFovQuIDBLiRAB0jRd3Mi6klAf8PS4muXEweYhZ95lBOZBIkSAdE0XS00XpcLrSh4V37v6K+8CAvRNIkSA9FlXMlIYW4EtQMK/ZPE1QuStuUSIAHlYP+jqZ/ktccUZIFUxEjf3brOUCBEgL9PFfLXENXSY3CrGADF0IW8917vq/uFcCAAP9UWOVVHKzml86OlXepY01nQR+u28+4y9CwjQ3w8OoxMBcmadyZWkf0r6pO4OKz6vPt8o6gCxXVksZb31d4jQiQDQamliImmy+oezlC3jHHtX1FfZM0HuIl26em3sXUCgCBEAO9jJ9wdJN5Lqd+MjvbzBdqTVYFW21fMhivuvjjf2LiBQhAiAhtahEu+yVBtVMRYHDLd5Xn1NSGImAgC7jL0LCNTD5jcIEQB4zXat8eyQ7eab3yBEAOCtsXcBAZtvfoMQAYBNdkL9o3cZwXq1gYIQAYCXJt4FBOzNLQeECADU6EIOmb/+ACECAGs33gUEbv76A4QIAEj1jqy+7hBLwfO2A6WECACYiXcBgZtv+yAhAgB2Op1zIfttvbGAEAGQt6p4J2YhTRAiALDFRNyRdcjjrluZCREA+bJh+q/eZURgtus7CBEAOWMZq5mdNzgTIgDyVBU34qmFTTzWz1PfhhABkB+WsY4x2/edhAiAvNhurLwesHWavb9XhAiA3MzEbqymvu5bypIIkdfeeRcAoEdVMRFXmxzjYMdGiLx04V0AgJ5UxZWk373LiMizpovZoR9EiABIX1Vc6MCAGG80mhsRIgDSZoP0mZiDHKvRGRpC5KWRdwEAOmQBMhfnQY51r+niockPJEReeu9dAIBOcaCwnVnTH0iIvGZrpwBiVxUz8ajbNhoN1GuEyFsj7wIAnIgAOcVR94kRIm/RiQAxI0BORYicqPQuAEBLBMipbnc9N2QXQuQtHpEJxIgA6cLk2J9AiGxjJ1sBxKAq3qkq7kSAnOr20D1Z2xAi2xEiQAzW50C4D+t0kzY/iRDZjhABQmfb8R/EOZAutOpCJOlHTRfzbmtJwpmqYuxdBIAdbMl5Lg4Id2XS9ifSiex27V0AgC3sOvf/iLuwutK6C5EIkX3OV4/QBBACG6DPxXXuXZuc8pMJkf0m3gUAUL18tRRb8Lt2UhciESKHXDIbARxZ93Ejlq/68KwOlu0JkcNuVtsIAQzJlpMfJP3qXEmqbo49nb7NP7qoJHFnsmuR2fYLDMHetN2Iw4N9etKRd2TtQifSzAeWtYAB2N+zpQiQvl130YVI0g/fv3+XquJ7F58sAz81fdoXgCPY0hUPkBrGvaaLsqtPRidynDkPrQI6VBWj1b1Xf4oAGcq4y09GiBznTAQJcDoLj5mk/4p7r4b06dQtva8RIserg6T0LgSITlVcbIQHc49hdTZM30SItHMm6U9VBVejAE1UxdXqtPlfIjy8jLsapm9isH66r+rpDweImm3VHcsOtHFRoq/Pmi56edNLJ3K6D5KWbAEGVqzruJP0P0l/iADx9qQer3CiE+nWo2z/9dy7EGBQdrdV/eJ6krD83Oe/SYRIP+4lzTRdzLwLAXpRFSNJpSw0ShEcoeptGatGiPTrWXZlyoxDiojaOjTqF0tU4XuSdNH3vJYQGc6T7Els9up4rzbQGTsHNZJ0IQuMC9FpxGiQGzYIET9PsjuC5pK+yW4rFfMU9MoCor6VerR6vZMFxUh0GKn4TdNF52dCtiFE0lWHFNLAw5jQVKd3Yx3CVfDpei/eVQK5edbAj63gnAgApKMc+uAzIQIAafjNYxdoHSL3Q//CAIDO3A41SH+NTgQA4mY3ZTghRAAgXs9ymINsqkNk7lUAAKAV9wCR6EQAIFbjEK5TohMBgPj8ounizrsIaR0iPFAJAOJwG9IN4XbticTVJwAQvltNF2PvIjZtzkQ4KwIA4QouQKSXIeI+oAEAbOV6FmQfQgQAwvaoALby7rIZInOvIgAAWwUdINJmiNiT9p7cKgEAbAo+QKS3hw3nHkUAAF6IIkCktyESxOEVAMhYNAEibZ4TqXFeBAC83Eu6iiVApO2Px/0q6cPQhQBA5oI8B3LItgsYWdICgGFFGSDStuUsSaqKb5LOBq8GAPLzm9dTCbuw6yp4uhEA6N8vMQeItDtEJkMWAQCZeZb0U0i38ba1PUTs4CEXMgJA9+otvElcNbXvyYaToYoAgEzcK6EAkXYN1mtVsZT0fqhiACBhnzVdBHkT7ykOPWN9MkQRAJCwZ0n/TjFApEOdiCRVxYOk80GqAYC0PEoap7R89dqhTkQK9EEoABC4WyU2/9jmcCciSVUxl3TZdzEAkIBnSdcpbN9tokknIknjPosAgEQ8SrrIJUCkpp2IJFXFRNLvfRYDABH7pOli4l3E0JqHiMSQHQDeepJd35707GOXpstZtXEfRQBApD7Llq+yDBDp2E5EYlkLAKz7GGu6mHsX4sYy/sgAAAIVSURBVO34EJHYrQUgZ1nOPnbZ9mTDJq4kLcUzRwDk417WfSy9CwlJu05EkqriQtJfnVYDAOHJ6tzHsY4drK/ZIOmX7koBgOB8kjQiQHZr34nUquJG0q+dVAMAYWDpqqHTQ0SSqmIm6ePpnwgAXD3Klq7m3oXEopsQkQgSADF7kjRh2ep43YWIRJAAiA3hcaJuQ0QiSADEgPDoSPchIhEkAEJFeHSsnxCRpKoYS/rSzycHgKMQHj3pL0QkqSpKSXfiZDsAH/eSbjRd3HkXkqp+Q0SSqmIkCxKukAcwlFtZeGR7u+5Q+g8RSaqKd5Im4lAigP48SZrJwuObcy3ZGCZEalVxJftDZnkLQFe+SpqxZOVj2BCR6q5kJunDsL8wgITUXceMq0l8DR8iNRu6zyS99ykAQGSeZfPVGdeShMMvRGr2pMRrscQF4K06OO5YrgqTf4hIDN4BbCI4IhJGiNRsO/BE9uREOhMgH0+S5iI4ohNWiNSsM7mWNBYzEyBV97KOY855jniFGSKb7PqUsaRL30IAnOhR1m3Yi7McSQg/RGq21HUlCxROvwPhIzQyEE+IbFoHSinOmwAheJb0oHVoPBAaeYgzRF6zMyf160IM5YE+PUlaqg4LC4ylYz1wlEaIvGadysXG650IF+BYm2HxTevAoMPA39IMkX0sYEYbH3n97dCU3gVEYu5dQMTqgKgRFGjs/wHyFLpqEX2eZwAAAABJRU5ErkJggg==") center / contain no-repeat;
}

/* Abstand kommt allein von der Ueberschrift, nicht von der Pille */
.eyebrow:has(+ h1, + h2),
.tools-kicker:has(+ h1, + h2),
.leistungen-kicker:has(+ h1, + h2),
.section-head .leistungen-kicker:has(+ h1, + h2) {
  margin-bottom: 0;
}

:is(.eyebrow, .tools-kicker, .leistungen-kicker) + h1 {
  margin-top: var(--pill-abstand-h1);
}

:is(.eyebrow, .tools-kicker, .leistungen-kicker) + h2 {
  margin-top: var(--pill-abstand-h2);
}

/* Tools-Bereich: dort setzt das Grid den Abstand (gap 18px) */
.tools-wrap > .tools-kicker:has(+ h2) {
  margin-bottom: calc(var(--pill-abstand-h2) - 18px);
}

.tools-wrap > .tools-kicker + h2 {
  margin-top: 0;
}
/* ---------- Ende Subline-Pillen ---------- */

/* ---------- Mobiles Menue (Hamburger) ---------- */
/* Aufbau per assets/nav.js aus der Desktop-Navigation. Ab 920px Breite
   ersetzt der Hamburger die Navigation, unter 560px wandert auch der
   Gespraechs-Button ins Menue, damit die Kopfzeile einzeilig bleibt. */

.nav-burger {
  display: none;
}

.mobile-nav[hidden],
.mnav-body[hidden] {
  display: none !important;
}

.leistung-list a {
  color: inherit;
  transition: color 180ms ease;
}

.leistung-list a:hover,
.leistung-list a:focus-visible {
  color: var(--accent);
}

@media (max-width: 920px) {
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    margin-left: 10px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 200ms ease, opacity 200ms ease;
  }

  .nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-cta {
    margin-left: auto;
  }

  html.mnav-open {
    overflow: hidden;
  }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 29;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--line);
    background: #ffffff;
  }

  .mobile-nav-inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 20px 36px;
  }

  .mnav-sec {
    border-bottom: 1px solid var(--line);
  }

  .mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 2px;
    border: none;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
  }

  .mnav-head svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms ease;
  }

  .mnav-head[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .mnav-body {
    padding: 0 0 16px;
  }

  .mnav-group + .mnav-group {
    border-top: 1px solid rgba(20, 20, 20, 0.06);
  }

  .mnav-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 12px;
    border: none;
    border-radius: 12px;
    background: none;
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  .mnav-group-head svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms ease;
  }

  .mnav-group-head[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .mnav-group-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .mnav-group-text small {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .mnav-group-text strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .mnav-group-head svg {
    color: var(--accent);
  }

  .mnav-group-list {
    padding: 0 0 10px;
  }

  .mnav-group-list[hidden] {
    display: none !important;
  }

  .mnav-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 10px;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
  }

  .mnav-all::after {
    content: "\2192";
    color: var(--accent);
  }

  .mnav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: 12px;
    color: rgba(20, 20, 20, 0.78);
    font-size: 1rem;
    font-weight: 600;
  }

  .mnav-link:hover,
  .mnav-link:focus-visible,
  .mnav-link.is-active {
    background: var(--accent-soft);
    color: var(--ink);
  }

  .mnav-more {
    display: inline-block;
    margin: 8px 12px 0;
    color: var(--accent);
    font-weight: 700;
  }

  .mnav-actions {
    display: grid;
    gap: 14px;
    padding-top: 24px;
  }

  .mnav-cta {
    width: 100%;
    min-height: 52px;
    margin-bottom: 14px;
  }

  .mnav-contacts {
    display: grid;
    gap: 10px;
  }

  .mnav-trust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #fff4ec 100%);
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.06);
    color: var(--ink);
  }

  .mnav-trust-g {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.1);
  }

  .mnav-trust-g svg {
    width: 24px;
    height: 24px;
  }

  .mnav-trust-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mnav-trust-row strong {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .mnav-trust-stars {
    color: #fbbc05;
    font-size: 1.05rem;
    letter-spacing: 1px;
    line-height: 1;
  }

  .mnav-trust-sub {
    display: block;
    margin-top: 4px;
    color: rgba(20, 20, 20, 0.62);
    font-size: 0.86rem;
    font-weight: 600;
  }

  .mnav-trust-arrow {
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 700;
  }

  .mnav-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    font-weight: 600;
  }

  .mnav-contact .icon-fill {
    fill: currentColor;
  }

  .mnav-contact .icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (max-width: 560px) {
  .nav {
    flex-wrap: nowrap;
  }

  .nav-cta {
    display: none;
  }
}
/* ---------- Ende mobiles Menue ---------- */

/* ---------- Einheitliche Typo-Skala ---------- */
/* Eine Groesse je Rolle, auf allen Seitentypen gleich. Flussig zwischen
   Handy (390 px) und Desktop, mit festen Ober- und Untergrenzen.
   Hero-H1: Startseite, Leistungsseiten, Uebersichtsseiten (ca. 34 -> 51 px)
   Artikel-H1: Glossar, Blog, Fallstudien (ca. 31 -> 46 px)
   Abschnitts-H2: alle Abschnittsueberschriften (ca. 28 -> 42 px)
   Die H2 im Fliesstext (.prose h2) bleiben bewusst kleiner. */

:root {
  --typo-h1-hero: clamp(2.1rem, 1.55rem + 2.4vw, 3.2rem);
  --typo-h1-artikel: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
  --typo-h2-abschnitt: clamp(1.75rem, 1.35rem + 1.7vw, 2.65rem);
}

.hero h1,
.hero-leistung h1,
.page-heading {
  font-size: var(--typo-h1-hero);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.article-title {
  font-size: var(--typo-h1-artikel);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.section-head h2,
.vorteile-heading,
.ablauf-heading,
.faq-heading,
.leistungen-heading,
.results-header h2,
.tools-title {
  font-size: var(--typo-h2-abschnitt);
  line-height: 1.08;
  letter-spacing: -0.05em;
}
/* ---------- Ende Typo-Skala ---------- */

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: 80px 0 30px;
  background:
    radial-gradient(760px 340px at 100% 0%, rgba(245, 106, 30, 0.2), transparent 65%),
    radial-gradient(620px 300px at 0% 100%, rgba(245, 106, 30, 0.07), transparent 70%),
    linear-gradient(160deg, #26323b 0%, #1c252c 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.68);
}

/* Trennlinie mit Akzent, falls ein dunkler Abschlussblock direkt darüber liegt */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(1180px, calc(100% - 40px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(245, 106, 30, 0.55), transparent);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(0, 3fr);
  gap: 56px;
}

.footer-logo img {
  width: 158px;
  height: auto;
}

.footer-claim {
  margin: 20px 0 24px;
  max-width: 340px;
  font-size: 0.95rem;
  line-height: 1.65;
}

.footer-trust {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.footer-trust:hover,
.footer-trust:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 106, 30, 0.45);
}

.footer-trust-g {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.footer-trust-g svg {
  width: 24px;
  height: 24px;
}

.footer-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-trust-row strong {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.footer-trust-stars {
  color: #fbbc05;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1;
}

.footer-trust-sub {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.84rem;
  font-weight: 600;
}

.footer-trust-arrow {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
}

.footer-facts {
  display: flex;
  gap: 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.footer-facts li {
  display: flex;
  flex-direction: column;
}

.footer-facts strong {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.footer-facts span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.footer-head {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.footer-head span {
  display: block;
  margin-bottom: 2px;
  color: #ff8a4c;
  font-size: 0.78rem;
  font-weight: 600;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li + li {
  margin-top: 9px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.4;
  transition: color 160ms ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #ffffff;
}

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 56px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(420px 160px at 100% 50%, rgba(245, 106, 30, 0.14), transparent 70%),
    rgba(255, 255, 255, 0.04);
}

.footer-contact-text strong {
  display: block;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
}

.footer-contact-text span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
}

.footer-contact-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 16px 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 160ms ease, background 160ms ease;
}

.footer-pill:hover,
.footer-pill:focus-visible {
  border-color: rgba(245, 106, 30, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.footer-pill .contactbar-badge {
  width: 28px;
  height: 28px;
}

.footer-pill .contactbar-badge svg {
  width: 15px;
  height: 15px;
}

.footer-pill .badge-phone {
  background: #ffffff;
  color: #141414;
}

.footer-pill .icon-fill {
  fill: currentColor;
}

.footer-pill .icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-socials {
  display: inline-flex;
  gap: 10px;
}

.footer-social {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.footer-social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.footer-social svg.is-stroke {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.footer-social svg.is-stroke .is-dot {
  fill: currentColor;
  stroke: none;
}

.footer-social:hover,
.footer-social:focus-visible {
  transform: translateY(-2px);
  border-color: transparent;
}

.footer-social.is-xing:hover,
.footer-social.is-xing:focus-visible {
  background: #0698a0;
}

.footer-social.is-instagram:hover,
.footer-social.is-instagram:focus-visible {
  background: linear-gradient(45deg, #f9a825 0%, #e1306c 50%, #833ab4 100%);
}

.footer-cta {
  min-height: 46px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

.footer-copy {
  margin: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.footer-legal a,
.footer-consent {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: color 160ms ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-consent:hover,
.footer-consent:focus-visible {
  color: #ffffff;
}

.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 1080px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .footer-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    grid-template-areas:
      "logo trust"
      "claim facts";
    gap: 0 48px;
    align-items: center;
  }

  .footer-logo {
    grid-area: logo;
  }

  .footer-claim {
    grid-area: claim;
    margin-bottom: 0;
  }

  .footer-trust {
    grid-area: trust;
    width: 100%;
  }

  .footer-facts {
    grid-area: facts;
    align-self: start;
    margin-top: 20px;
  }
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 58px;
  }

  .footer-brand {
    display: block;
  }

  .footer-claim {
    margin-bottom: 24px;
  }

  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }

  .footer-contact {
    padding: 20px;
  }

  .footer-contact-links,
  .footer-pill,
  .footer-cta {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ---------- Ende Footer ---------- */

/* ---------- Werkzeug-Laufband ---------- */
.tools-section {
  overflow: hidden;
  padding-bottom: 60px;
}

.tools-marquee {
  display: grid;
  gap: 16px;
  width: 100vw;
  margin: 18px calc(50% - 50vw) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.tools-row {
  overflow: hidden;
  padding: 8px 0 14px;
}

.tools-track {
  display: flex;
  width: max-content;
  animation: tools-nach-links 70s linear infinite;
  will-change: transform;
}

.tools-row-rechts .tools-track {
  animation-name: tools-nach-rechts;
  animation-duration: 64s;
}

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

.tools-group {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}

@keyframes tools-nach-links {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes tools-nach-rechts {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.tool-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 176px;
  height: 90px;
  padding: 0 34px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(169, 74, 17, 0.09);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.tool-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(169, 74, 17, 0.15);
}

.tool-logo img {
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.tool-logo.is-wide img {
  height: 29px;
  max-width: 200px;
}

.tool-logo.is-xwide img {
  height: 26px;
  max-width: 215px;
}

.tool-logo.is-mid img {
  height: 40px;
}

.tool-logo.is-square img {
  height: 46px;
}

.tool-logo.is-stack img {
  height: 62px;
  max-width: 160px;
}

@media (max-width: 560px) {
  .tools-marquee {
    gap: 10px;
  }

  .tools-group {
    gap: 12px;
    padding-right: 12px;
  }

  .tool-logo {
    min-width: 132px;
    height: 74px;
    padding: 0 24px;
    border-radius: 18px;
  }

  .tool-logo img {
    max-width: 115px;
  }

  .tool-logo.is-wide img {
    height: 22px;
    max-width: 150px;
  }

  .tool-logo.is-xwide img {
    height: 19px;
    max-width: 165px;
  }

  .tool-logo.is-mid img {
    height: 31px;
  }

  .tool-logo.is-square img {
    height: 38px;
  }

  .tool-logo.is-stack img {
    height: 52px;
    max-width: 125px;
  }

  .tools-track {
    animation-duration: 55s;
  }

  .tools-row-rechts .tools-track {
    animation-duration: 50s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tools-marquee {
    width: 100%;
    margin: 18px 0 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tools-track {
    width: auto;
    animation: none;
  }

  .tools-group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }

  .tools-group[aria-hidden="true"] {
    display: none;
  }
}
/* ---------- Ende Werkzeug-Laufband ---------- */