:root {
  --sf-orange: #F08A1C;
  --sf-blue: #0D2D5C;
  --sf-blue-dark: #07224A;
  --sf-gray: #8A8F98;
  --sf-text: #172033;
  --sf-muted: #5B6472;
  --sf-soft: #F3F8FF;
  --sf-line: #DDE5F0;
  --sf-white: #FFFFFF;
  --sf-shadow: 0 12px 30px rgba(13,45,92,.08);
  --sf-radius: 14px;
  --sf-container: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, Inter, "Segoe UI", Arial, sans-serif;
  color: var(--sf-text);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .accent { stroke: var(--sf-orange); }
.sf-container { width: min(var(--sf-container), calc(100% - 48px)); margin-inline: auto; }

.sf-header {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e7edf5;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.sf-header__inner {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.sf-brand { width: 265px; flex: 0 0 auto; }
.sf-brand img { width: 265px; max-height: 66px; object-fit: contain; object-position: left center; }
.sf-nav { margin-left: auto; }
.sf-menu { list-style: none; display: flex; gap: 34px; align-items: center; padding: 0; margin: 0; }
.sf-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #1a2941;
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.sf-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 99px;
  background: transparent;
}
.sf-menu a:hover::after,
.sf-menu a.is-active::after,
.sf-menu .current-menu-item > a::after { background: var(--sf-orange); }
.sf-header-actions { display: flex; gap: 12px; align-items: center; }
.sf-login-btn, .sf-cart-btn {
  min-height: 44px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  padding: 0 18px;
  border: 1px solid var(--sf-line);
}
.sf-login-btn { color: #fff; background: var(--sf-blue); box-shadow: 0 7px 18px rgba(13,45,92,.18); border-color: var(--sf-blue); }
.sf-cart-btn { color: #1b2740; background: #fff; }
.sf-nav-toggle { display: none; background: #fff; border: 1px solid var(--sf-line); border-radius: 8px; width: 44px; height: 42px; padding: 9px; }
.sf-nav-toggle span { display: block; height: 2px; background: var(--sf-blue); margin: 5px 0; border-radius: 4px; }

.sf-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #edf7ff 0%, #fff 38%, #fff 52%, #edf5ff 100%);
  border-bottom: 1px solid #eaf0f7;
}
.sf-hero__inner {
  min-height: 410px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 48px 0 42px;
  position: relative;
}
.sf-hero__content { max-width: 560px; z-index: 2; }
.sf-hero h1 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(36px, 4.3vw, 58px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  font-weight: 800;
}
.sf-hero p { margin: 0 0 26px; max-width: 525px; color: #263446; font-size: 18px; line-height: 1.55; }
.sf-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.sf-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 8px;
  font-weight: 800;
  padding: 0 24px;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sf-btn:hover { transform: translateY(-1px); }
.sf-btn--primary { background: var(--sf-blue); color: #fff; box-shadow: 0 9px 22px rgba(13,45,92,.22); }
.sf-btn--outline { background: #fff; color: var(--sf-orange); border-color: var(--sf-orange); }
.sf-hero__visual { min-height: 330px; position: relative; display: flex; align-items: center; justify-content: center; }
.sf-hero__visual img { position: relative; z-index: 2; width: min(430px, 82%); filter: drop-shadow(0 16px 24px rgba(13,45,92,.14)); }
.sf-light { position: absolute; height: 12px; width: 760px; right: -360px; border-radius: 999px; filter: blur(.5px); opacity: .72; transform-origin: left center; }
.sf-light--one { top: 36%; background: linear-gradient(90deg, rgba(240,138,28,.05), rgba(240,138,28,.95), rgba(240,138,28,0)); transform: rotate(-20deg); }
.sf-light--two { top: 50%; background: linear-gradient(90deg, rgba(13,45,92,.03), rgba(108,164,255,.75), rgba(108,164,255,0)); transform: rotate(-7deg); }
.sf-light--three { top: 62%; background: linear-gradient(90deg, rgba(240,138,28,.05), rgba(255,190,115,.65), rgba(255,190,115,0)); transform: rotate(10deg); }

.sf-home-stack { background: #fff; padding: 30px 0 18px; }
.sf-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: -4px; }
.sf-service-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  min-height: 155px;
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 24px 22px;
  box-shadow: 0 10px 26px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-service-card:hover { transform: translateY(-2px); border-color: #cbd9ec; box-shadow: var(--sf-shadow); }
.sf-service-card__icon { color: var(--sf-blue); display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.sf-service-card__icon svg { width: 52px; height: 52px; stroke-width: 1.8; }
.sf-service-card__body { display: flex; flex-direction: column; gap: 7px; }
.sf-service-card strong { color: var(--sf-blue-dark); font-size: 19px; line-height: 1.2; }
.sf-service-card em { font-style: normal; color: #263446; font-size: 14px; line-height: 1.45; }
.sf-service-card span span { color: var(--sf-blue); font-weight: 800; font-size: 14px; margin-top: auto; }

.sf-trust-strip,
.sf-domain-search {
  margin-top: 24px;
  border: 1px solid var(--sf-line);
  background: linear-gradient(180deg,#f8fbff 0%,#f3f8ff 100%);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}
.sf-trust-strip { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 16px 28px; }
.sf-trust-strip__lead { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sf-trust-icon { width: 52px; height: 52px; flex: 0 0 auto; color: var(--sf-blue); display: grid; place-items: center; }
.sf-trust-icon svg { width: 48px; height: 48px; }
.sf-trust-strip strong { display: block; color: var(--sf-blue-dark); font-size: 17px; }
.sf-trust-strip span span { display: block; color: #3d4b5f; font-size: 14px; }
.sf-trust-strip__items { display: flex; align-items: center; gap: 0; margin-left: auto; }
.sf-trust-strip__items > div { min-width: 150px; display: flex; align-items: center; gap: 13px; padding: 0 22px; border-left: 1px solid #d5dfec; color: var(--sf-blue); }
.sf-trust-strip__items svg { width: 34px; height: 34px; }
.sf-trust-strip__items strong { font-size: 14px; line-height: 1.05; }
.sf-trust-strip__items span { color: #203047; font-size: 13px; line-height: 1.15; }

.sf-domain-search { min-height: 82px; display: grid; grid-template-columns: 390px 1fr; align-items: center; gap: 28px; padding: 16px 28px; background: #fff; }
.sf-domain-search__intro { display: flex; align-items: center; gap: 20px; }
.sf-domain-search__intro > span { color: var(--sf-blue); }
.sf-domain-search__intro svg { width: 50px; height: 50px; }
.sf-domain-search__intro strong { display: block; color: var(--sf-blue-dark); font-size: 17px; }
.sf-domain-search__intro em { display: block; color: #3d4b5f; font-style: normal; font-size: 14px; }
.sf-domain-search__fields { display: grid; grid-template-columns: 1fr 130px 160px; gap: 0; }
.sf-domain-search input, .sf-domain-search select, .sf-domain-search button {
  height: 48px;
  font: inherit;
  border: 1px solid #d7e0ec;
  background: #fff;
}
.sf-domain-search input { border-radius: 7px 0 0 7px; padding: 0 20px; color: #1d2a3c; }
.sf-domain-search select { border-left: 0; padding: 0 18px; color: #15233a; font-weight: 700; }
.sf-domain-search button { border-radius: 7px; margin-left: 18px; background: var(--sf-blue); color: #fff; font-weight: 800; border-color: var(--sf-blue); display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 8px 20px rgba(13,45,92,.16); }

.sf-footer { margin-top: 0; border-top: 1px solid #e5ecf5; background: #f9fbfe; }
.sf-footer__grid { display: grid; grid-template-columns: 1.45fr .8fr .85fr .85fr 1.45fr; gap: 44px; padding: 28px 0 24px; }
.sf-footer__brand img { width: 240px; margin-bottom: 14px; }
.sf-footer__brand p, .sf-footer__col a, .sf-footer__contact p, .sf-footer__bottom { color: #435064; font-size: 14px; }
.sf-footer h3 { color: var(--sf-blue-dark); margin: 0 0 14px; font-size: 15px; }
.sf-footer__col { display: flex; flex-direction: column; gap: 8px; }
.sf-footer__col a:hover, .sf-footer__contact a:hover, .sf-footer__bottom a { color: var(--sf-blue); text-decoration: underline; }
.sf-socials { display: flex; gap: 10px; margin-top: 18px; }
.sf-socials a { width: 30px; height: 30px; border-radius: 50%; background: var(--sf-blue); color: #fff; display: grid; place-items: center; }
.sf-socials svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sf-footer__contact p { margin: 0 0 12px; display: flex; gap: 12px; align-items: flex-start; }
.sf-footer__contact svg { color: var(--sf-blue); width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.sf-footer__bottom { border-top: 1px solid #e5ecf5; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 14px 24px 18px; font-size: 13px; }
.sf-footer__bottom span:not(:last-child)::after { content: "|"; margin-left: 20px; color: #a0a8b4; }

.sf-page-hero { background: linear-gradient(90deg, #f3f8ff, #fff); border-bottom: 1px solid #e7edf5; padding: 52px 0; }
.sf-page-hero h1 { margin: 0; color: var(--sf-blue-dark); font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.sf-page-content { padding: 42px 0 64px; background: #fff; }
.sf-content-card { background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); padding: clamp(24px, 4vw, 48px); }
.sf-content-card h2, .sf-content-card h3 { color: var(--sf-blue-dark); }
.sf-content-card a { color: var(--sf-blue); text-decoration: underline; }

@media (max-width: 1180px) {
  .sf-header__inner { gap: 18px; }
  .sf-brand, .sf-brand img { width: 225px; }
  .sf-menu { gap: 22px; }
  .sf-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-trust-strip { align-items: flex-start; flex-direction: column; }
  .sf-trust-strip__items { width: 100%; margin-left: 0; }
  .sf-trust-strip__items > div:first-child { border-left: 0; padding-left: 0; }
  .sf-domain-search { grid-template-columns: 1fr; }
  .sf-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (max-width: 920px) {
  .sf-header__inner { min-height: 74px; width: min(100% - 30px, 1320px); }
  .sf-brand, .sf-brand img { width: 205px; }
  .sf-nav-toggle { display: block; margin-left: auto; }
  .sf-nav { display: none; position: absolute; left: 15px; right: 15px; top: 74px; background: #fff; border: 1px solid var(--sf-line); border-radius: 12px; box-shadow: var(--sf-shadow); padding: 14px; }
  .sf-nav.is-open { display: block; }
  .sf-menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .sf-menu a { min-height: 40px; padding: 0 10px; }
  .sf-header-actions { display: none; }
  .sf-hero__inner { grid-template-columns: 1fr; padding: 38px 0 28px; }
  .sf-hero__visual { min-height: 230px; order: -1; opacity: .96; }
  .sf-hero__content { max-width: 100%; }
  .sf-hero p { font-size: 16px; }
  .sf-domain-search__fields { grid-template-columns: 1fr; gap: 10px; }
  .sf-domain-search input, .sf-domain-search select, .sf-domain-search button { border-radius: 7px; border: 1px solid #d7e0ec; margin: 0; }
}
@media (max-width: 680px) {
  .sf-container { width: min(100% - 28px, var(--sf-container)); }
  .sf-card-grid { grid-template-columns: 1fr; gap: 16px; }
  .sf-service-card { min-height: auto; }
  .sf-trust-strip__items { flex-direction: column; align-items: stretch; }
  .sf-trust-strip__items > div { border-left: 0; border-top: 1px solid #d5dfec; padding: 14px 0 0; min-width: 0; }
  .sf-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .sf-footer__bottom { display: block; text-align: center; }
  .sf-footer__bottom span { display: block; margin: 5px 0; }
  .sf-footer__bottom span:not(:last-child)::after { content: none; }
}

/* Service Fuchs V2 Feinschliff nach erstem Live-Screenshot */
.sf-header__inner {
  min-height: 104px;
  width: min(1320px, calc(100% - 58px));
}
.sf-brand { width: 330px; }
.sf-brand img {
  width: 330px;
  max-height: 86px;
  object-fit: contain;
  object-position: left center;
}
.sf-menu { gap: 32px; }
.sf-login-btn, .sf-cart-btn { min-height: 46px; }

.sf-hero {
  background:
    radial-gradient(circle at 79% 28%, rgba(240,138,28,.28) 0%, rgba(240,138,28,.13) 18%, rgba(240,138,28,0) 42%),
    radial-gradient(circle at 94% 48%, rgba(90,145,230,.30) 0%, rgba(90,145,230,.14) 22%, rgba(90,145,230,0) 48%),
    linear-gradient(90deg, #eaf6ff 0%, #f7fbff 30%, #ffffff 48%, #eef6ff 100%);
}
.sf-hero::before,
.sf-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  width: 52vw;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  opacity: .92;
  filter: blur(.3px);
  transform-origin: left center;
}
.sf-hero::before {
  top: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(240,138,28,.74), rgba(255,214,154,.18));
  transform: rotate(-21deg);
}
.sf-hero::after {
  top: 53%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(85,147,240,.65), rgba(190,216,255,.12));
  transform: rotate(-7deg);
}
.sf-hero__inner {
  min-height: 470px;
  grid-template-columns: minmax(590px, .98fr) 1.02fr;
  gap: 32px;
  padding: 50px 0 44px;
}
.sf-hero__content { max-width: 650px; }
.sf-hero h1 {
  font-size: clamp(38px, 3.85vw, 54px);
  line-height: 1.11;
  letter-spacing: -1.35px;
}
.sf-hero p { max-width: 565px; }
.sf-hero__visual {
  min-height: 360px;
  overflow: visible;
  justify-content: center;
}
.sf-hero__visual img {
  width: min(470px, 88%);
  max-height: 390px;
  object-fit: contain;
  object-position: center;
}
.sf-light {
  right: -300px;
  width: 820px;
  height: 14px;
  opacity: .88;
}
.sf-light--one { top: 29%; transform: rotate(-20deg); }
.sf-light--two { top: 47%; transform: rotate(-7deg); }
.sf-light--three { top: 64%; transform: rotate(11deg); }

.sf-home-stack { padding-top: 26px; }
.sf-footer__brand img { width: 255px; }
.sf-socials a[aria-label="Instagram"] svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (max-width: 1180px) {
  .sf-header__inner { min-height: 92px; }
  .sf-brand, .sf-brand img { width: 270px; }
  .sf-hero__inner { grid-template-columns: 1fr 1fr; }
  .sf-hero h1 { font-size: clamp(36px, 4vw, 48px); }
}
@media (max-width: 920px) {
  .sf-header__inner { min-height: 78px; }
  .sf-brand, .sf-brand img { width: 220px; }
  .sf-nav { top: 78px; }
  .sf-hero__inner { grid-template-columns: 1fr; min-height: auto; padding: 34px 0 30px; }
  .sf-hero__visual { order: -1; min-height: 220px; }
  .sf-hero__visual img { width: min(310px, 75%); max-height: 280px; }
  .sf-hero h1 { font-size: clamp(34px, 8vw, 46px); }
}
@media (max-width: 680px) {
  .sf-header__inner { width: min(100% - 28px, 1320px); }
  .sf-brand, .sf-brand img { width: 190px; }
  .sf-hero h1 br { display: none; }
}
















.sf-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 38%;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(14deg, transparent 52%, rgba(240,138,28,0.42) 53%, transparent 55%),
    linear-gradient(20deg, transparent 54%, rgba(240,138,28,0.34) 55%, transparent 57%),
    linear-gradient(26deg, transparent 56%, rgba(255,170,70,0.30) 57%, transparent 59%),
    linear-gradient(2deg, transparent 48%, rgba(90,145,230,0.30) 49%, transparent 51%),
    linear-gradient(6deg, transparent 50%, rgba(13,45,92,0.22) 51%, transparent 53%),
    linear-gradient(-3deg, transparent 49%, rgba(130,175,245,0.24) 50%, transparent 52%),
    linear-gradient(10deg, transparent 47%, rgba(255,255,255,0.55) 48%, transparent 50%),
    linear-gradient(-10deg, transparent 50%, rgba(255,255,255,0.42) 51%, transparent 53%),
    linear-gradient(-14deg, transparent 55%, rgba(240,138,28,0.28) 56%, transparent 58%),
    linear-gradient(-20deg, transparent 57%, rgba(255,180,90,0.22) 58%, transparent 60%);
}
/* =========================================================
   Service Fuchs Webspace-Seite /webspace/
   Datei kann unten an assets/css/servicefuchs.css angehängt werden.
========================================================= */
.sf-webspace-page {
  background: #fff;
}
.sf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sf-orange);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sf-section-head {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}
.sf-section-head h2,
.sf-ws-trust h2,
.sf-ws-contract h2,
.sf-ws-closing h2 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.9px;
}
.sf-section-head p,
.sf-ws-contract p,
.sf-ws-closing p {
  margin: 0;
  color: #3d4b5f;
  font-size: 17px;
}

.sf-ws-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e7edf5;
  background:
    radial-gradient(circle at 86% 26%, rgba(240,138,28,.18), rgba(240,138,28,0) 35%),
    radial-gradient(circle at 92% 66%, rgba(100,155,235,.20), rgba(100,155,235,0) 38%),
    linear-gradient(90deg, #eaf6ff 0%, #f8fbff 46%, #fff 100%);
}
.sf-ws-hero__inner {
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: center;
  gap: 48px;
  padding: 58px 0;
}
.sf-ws-hero__content h1 {
  margin: 0 0 16px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.35px;
  font-weight: 850;
}
.sf-ws-hero__content p {
  margin: 0 0 26px;
  color: #263446;
  max-width: 690px;
  font-size: 18px;
  line-height: 1.58;
}
.sf-ws-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sf-ws-hero__panel {
  border: 1px solid var(--sf-line);
  background: rgba(255,255,255,.82);
  box-shadow: var(--sf-shadow);
  border-radius: 18px;
  padding: 26px;
  display: grid;
  gap: 14px;
  backdrop-filter: blur(10px);
}
.sf-ws-proof {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e1e9f3;
  padding-bottom: 13px;
}
.sf-ws-proof:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-ws-proof strong { color: var(--sf-blue-dark); font-size: 24px; line-height: 1; }
.sf-ws-proof span { color: #4b596c; font-size: 14px; text-align: right; }

.sf-ws-trust,
.sf-ws-packages,
.sf-ws-addons,
.sf-ws-faq {
  padding: 54px 0;
}
.sf-ws-trust { background: #fff; }
.sf-ws-trust h2 { text-align: center; margin-bottom: 28px; }
.sf-ws-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sf-ws-trust-grid article,
.sf-ws-addon-card,
.sf-ws-package {
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  box-shadow: 0 10px 26px rgba(13,45,92,.045);
}
.sf-ws-trust-grid article {
  padding: 24px;
}
.sf-ws-trust-grid span {
  color: var(--sf-blue);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.sf-ws-trust-grid svg { width: 48px; height: 48px; }
.sf-ws-trust-grid h3,
.sf-ws-addon-card h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: 19px;
}
.sf-ws-trust-grid p,
.sf-ws-addon-card p {
  margin: 0;
  color: #3d4b5f;
  font-size: 14px;
  line-height: 1.55;
}

.sf-ws-packages {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  border-top: 1px solid #edf3fa;
  border-bottom: 1px solid #edf3fa;
}
.sf-ws-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.sf-ws-package {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px;
  min-height: 520px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-ws-package:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: #cbd9ec;
}
.sf-ws-package.is-recommended {
  border-color: rgba(240,138,28,.55);
  box-shadow: 0 18px 42px rgba(13,45,92,.10);
}
.sf-ws-package.is-premium {
  background: linear-gradient(180deg, #0D2D5C 0%, #07224A 100%);
  color: #fff;
  border-color: #0D2D5C;
}
.sf-ws-package.is-premium h3,
.sf-ws-package.is-premium p,
.sf-ws-package.is-premium .sf-ws-price,
.sf-ws-package.is-premium .sf-ws-features li { color: #fff; }
.sf-ws-package.is-premium .sf-ws-package__badge { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.sf-ws-package__badge {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid rgba(240,138,28,.34);
  background: #fff7ef;
  color: var(--sf-orange);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 14px;
}
.sf-ws-package h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}
.sf-ws-package__top p {
  margin: 0;
  color: #3d4b5f;
  font-size: 14px;
  line-height: 1.55;
  min-height: 88px;
}
.sf-ws-price {
  margin: 22px 0 18px;
  color: var(--sf-blue-dark);
  font-size: 44px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -1px;
}
.sf-ws-price span { font-size: 22px; margin-right: 3px; vertical-align: super; }
.sf-ws-price em {
  display: block;
  margin-top: 7px;
  color: #5b6472;
  font-style: normal;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}
.sf-ws-package.is-premium .sf-ws-price em { color: rgba(255,255,255,.76); }
.sf-ws-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 11px;
}
.sf-ws-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #263446;
  font-size: 14px;
  line-height: 1.35;
}
.sf-ws-features span {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f4f9ff;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
}
.sf-ws-package__cta {
  margin-top: auto;
  min-height: 46px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 800;
  padding: 0 18px;
  box-shadow: 0 8px 20px rgba(13,45,92,.16);
}
.sf-ws-package.is-premium .sf-ws-package__cta {
  background: #fff;
  color: var(--sf-blue-dark);
}
.sf-ws-price-note {
  margin: 18px 0 0;
  text-align: center;
  color: #5b6472;
  font-size: 13px;
}

.sf-ws-compare { padding: 34px 0; background: #fff; }
.sf-ws-compare-toggle {
  width: 100%;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: #f8fbff;
  color: var(--sf-blue-dark);
  min-height: 56px;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.sf-ws-compare-panel {
  margin-top: 18px;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.sf-ws-table-wrap { overflow-x: auto; }
.sf-ws-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.sf-ws-table th,
.sf-ws-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #e8eef6;
  text-align: left;
  font-size: 14px;
}
.sf-ws-table th { background: #f3f8ff; color: var(--sf-blue-dark); }
.sf-ws-table td:not(:first-child) { font-weight: 750; color: var(--sf-blue-dark); }
.sf-ws-compare-note { margin: 0; padding: 16px 18px; color: #5b6472; font-size: 14px; }

.sf-ws-addons { background: #fff; }
.sf-ws-addon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sf-ws-addon-card { padding: 23px; }
.sf-ws-addon-card strong {
  display: inline-flex;
  margin-top: 14px;
  color: var(--sf-orange);
  font-size: 14px;
}

.sf-ws-contract {
  padding: 48px 0;
  background: linear-gradient(90deg, #eaf6ff 0%, #fff 100%);
  border-top: 1px solid #edf3fa;
  border-bottom: 1px solid #edf3fa;
}
.sf-ws-contract__box {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 34px;
  align-items: center;
}
.sf-ws-contract ul {
  list-style: none;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  display: grid;
  gap: 12px;
}
.sf-ws-contract li {
  display: flex;
  gap: 10px;
  color: var(--sf-blue-dark);
  font-weight: 750;
}
.sf-ws-contract li span { color: var(--sf-orange); }

.sf-ws-faq { background: #fff; }
.sf-ws-faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.sf-ws-faq-item {
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.sf-ws-faq-item summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--sf-blue-dark);
  font-weight: 850;
}
.sf-ws-faq-item div {
  padding: 0 20px 18px;
  color: #3d4b5f;
  line-height: 1.6;
}

.sf-ws-closing {
  padding: 56px 0 64px;
  background: #f8fbff;
}
.sf-ws-closing__box {
  border-radius: 18px;
  border: 1px solid var(--sf-line);
  background: #fff;
  box-shadow: var(--sf-shadow);
  padding: clamp(28px, 4vw, 46px);
  text-align: center;
}
.sf-ws-closing__box p {
  max-width: 720px;
  margin: 0 auto 24px;
}
.sf-ws-closing .sf-ws-hero__actions {
  justify-content: center;
}

@media (max-width: 1180px) {
  .sf-ws-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .sf-ws-hero__panel { grid-template-columns: repeat(3, 1fr); }
  .sf-ws-proof { display: block; text-align: center; border-bottom: 0; padding: 0; }
  .sf-ws-proof span { display: block; text-align: center; margin-top: 5px; }
  .sf-ws-trust-grid, .sf-ws-addon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .sf-ws-package-grid { grid-template-columns: 1fr; }
  .sf-ws-package { min-height: auto; }
  .sf-ws-package__top p { min-height: 0; }
  .sf-ws-contract__box { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sf-ws-hero__inner { padding: 38px 0; }
  .sf-ws-hero__panel { grid-template-columns: 1fr; }
  .sf-ws-trust-grid, .sf-ws-addon-grid { grid-template-columns: 1fr; }
  .sf-ws-hero__actions { display: grid; }
  .sf-ws-hero__actions .sf-btn { width: 100%; }
}






/* =========================================================
   Internet Service Fuchs STRAHL
   Für Überschriften: class="isf-strahl"
   Farbwelt: Fuchs-Orange + warmes Gelb, dezent auf Service-Fuchs CI
   ========================================================= */
.isf-status-section-title,
.isf-strahl {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}

.isf-status-section-title::after,
.isf-strahl::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 64% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(240,138,28,1) 0%,
    rgba(255,190,72,.92) 45%,
    rgba(240,138,28,0) 100%
  ) !important;
}

/* Wenn der Strahl in zentrierten Bereichen steht, bleibt er optisch ruhig. */
.sf-section-head .isf-strahl,
.sf-ws-trust > .sf-container > .isf-strahl,
.sf-ws-closing__box .isf-strahl {
  margin-left: auto;
  margin-right: auto;
}






/* =========================================================
   Service Fuchs Webspace V3
   Add-on-Seiten / WordPress-Fokus
   ========================================================= */
.sf-ws-wordpress-focus {
  margin: 0 0 24px;
  border: 1px solid rgba(240,138,28,.28);
  background:
    radial-gradient(circle at 92% 20%, rgba(240,138,28,.16), rgba(240,138,28,0) 38%),
    linear-gradient(90deg, #fffaf3 0%, #ffffff 54%, #f4f9ff 100%);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 26px;
}
.sf-ws-wordpress-focus h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.13;
  letter-spacing: -.5px;
}
.sf-ws-wordpress-focus p {
  margin: 0;
  color: #3d4b5f;
  font-size: 16px;
  line-height: 1.6;
  max-width: 800px;
}
.sf-ws-addon-card--link {
  display: flex;
  flex-direction: column;
  min-height: 235px;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-ws-addon-card--link:hover {
  transform: translateY(-2px);
  border-color: rgba(240,138,28,.40);
  box-shadow: var(--sf-shadow);
}
.sf-ws-addon-card.is-highlight {
  border-color: rgba(240,138,28,.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-ws-addon-card__link {
  display: inline-flex;
  margin-top: auto;
  padding-top: 16px;
  color: var(--sf-blue);
  font-size: 14px;
  font-weight: 850;
}
.sf-ws-addon-card strong {
  margin-top: 12px;
}
@media (max-width: 920px) {
  .sf-ws-wordpress-focus {
    grid-template-columns: 1fr;
  }
  .sf-ws-wordpress-focus .sf-btn {
    width: 100%;
  }
}


/* =========================================================
   Service Fuchs Starter Webspace Detailseite
   ========================================================= */
.sf-product-detail {
  background: #fff;
}
.sf-detail-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.14), rgba(240,138,28,0) 34%),
    radial-gradient(circle at 92% 70%, rgba(90,145,230,.16), rgba(90,145,230,0) 38%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #f6fbff 100%);
}
.sf-detail-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 44px;
  align-items: center;
  padding: 62px 0;
}
.sf-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: #eaf6ff;
  color: var(--sf-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
.sf-detail-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
}
.sf-detail-hero p {
  max-width: 720px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}
.sf-detail-hero__actions,
.sf-detail-closing__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.sf-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.sf-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8e4f1;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #22324a;
  font-size: 13px;
  font-weight: 700;
}
.sf-detail-meta svg { width: 17px; height: 17px; color: var(--sf-orange); }
.sf-price-card {
  border: 1px solid #dce6f2;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 45px rgba(13,45,92,.12);
  padding: 28px;
}
.sf-price-card__badge {
  display: inline-flex;
  padding: 6px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(240,138,28,.12);
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-price-card h2 { margin: 0 0 12px; color: var(--sf-blue-dark); font-size: 31px; }
.sf-price-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.sf-price-card__price strong { color: var(--sf-blue-dark); font-size: 42px; line-height: 1; }
.sf-price-card__price span { color: #667085; font-weight: 700; }
.sf-price-card p { color: #415066; margin: 0 0 20px; }
.sf-price-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 11px; }
.sf-price-card li { display: flex; gap: 9px; align-items: center; color: #22324a; font-weight: 700; font-size: 14px; }
.sf-price-card li svg { color: var(--sf-orange); width: 18px; height: 18px; flex: 0 0 auto; }
.sf-price-card__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  border-radius: 8px;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(13,45,92,.20);
}
.sf-price-card small { display: block; margin-top: 14px; color: #667085; font-size: 12px; line-height: 1.45; }
.sf-detail-section { padding: 58px 0; }
.sf-detail-section--soft { background: #f6faff; border-block: 1px solid #e8eef6; }
.sf-section-head { max-width: 820px; margin-bottom: 28px; }
.sf-section-head h2,
.sf-split h2,
.sf-history-box h2 { margin: 0 0 14px; color: var(--sf-blue-dark); font-size: clamp(28px, 3vw, 40px); line-height: 1.14; }
.sf-section-head p,
.sf-split p,
.sf-history-box p { margin: 0 0 14px; color: #435064; font-size: 16px; line-height: 1.7; }
.sf-feature-grid { display: grid; gap: 20px; }
.sf-feature-grid--six { grid-template-columns: repeat(3, 1fr); }
.sf-feature-box {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-feature-box > svg { width: 42px; height: 42px; color: var(--sf-blue); margin-bottom: 14px; }
.sf-feature-box strong { display: block; color: var(--sf-blue-dark); font-size: 18px; margin-bottom: 8px; }
.sf-feature-box span { display: block; color: #435064; font-size: 14px; line-height: 1.55; }
.sf-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: center; }
.sf-info-panel {
  border-radius: 16px;
  border: 1px solid #dbe7f4;
  background: #fff;
  padding: 26px;
  box-shadow: 0 12px 28px rgba(13,45,92,.06);
}
.sf-info-panel strong { display: block; color: var(--sf-orange); font-size: 15px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.sf-info-panel .sf-btn { width: 100%; margin-top: 10px; }
.sf-text-link { color: var(--sf-blue); font-weight: 900; text-decoration: none; }
.sf-text-link:hover { text-decoration: underline; }
.sf-compare-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sf-mini-package {
  border: 1px solid #dfe8f4;
  border-radius: 15px;
  background: #fff;
  padding: 24px;
}
.sf-mini-package.is-current { border-color: rgba(240,138,28,.45); box-shadow: 0 12px 28px rgba(240,138,28,.10); }
.sf-mini-package > span { color: var(--sf-orange); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.sf-mini-package h3 { color: var(--sf-blue-dark); margin: 8px 0 8px; font-size: 24px; }
.sf-mini-package p { color: #435064; margin: 0 0 14px; min-height: 72px; }
.sf-mini-package strong { display: block; color: var(--sf-blue-dark); margin-bottom: 10px; }
.sf-mini-package a { color: var(--sf-blue); font-weight: 900; }
.sf-addon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sf-addon-tile {
  display: block;
  padding: 22px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-addon-tile strong { display: block; color: var(--sf-blue-dark); font-size: 18px; margin-bottom: 8px; }
.sf-addon-tile span { color: #435064; font-size: 14px; line-height: 1.55; }
.sf-addon-tile:hover { border-color: rgba(240,138,28,.50); transform: translateY(-1px); }
.sf-history-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: 34px;
  background: linear-gradient(90deg, #fff 0%, #f7fbff 100%);
}
.sf-history-numbers { display: grid; gap: 14px; }
.sf-history-numbers div { border-radius: 14px; background: #fff; border: 1px solid #dbe7f4; padding: 20px; }
.sf-history-numbers strong { display: block; color: var(--sf-orange); font-size: 36px; line-height: 1; }
.sf-history-numbers span { color: #435064; font-weight: 700; }
.sf-faq-list { display: grid; gap: 12px; }
.sf-faq-item { border: 1px solid #dfe8f4; border-radius: 12px; background: #fff; overflow: hidden; }
.sf-faq-item summary { cursor: pointer; padding: 18px 20px; color: var(--sf-blue-dark); font-weight: 900; }
.sf-faq-item div { padding: 0 20px 18px; color: #435064; line-height: 1.65; }
.sf-detail-closing { background: var(--sf-blue-dark); color: #fff; padding: 42px 0; }
.sf-detail-closing__inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.sf-detail-closing h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 38px); }
.sf-detail-closing p { margin: 0; color: rgba(255,255,255,.82); }
.sf-detail-closing .sf-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
@media (max-width: 980px) {
  .sf-detail-hero__inner,
  .sf-split,
  .sf-history-box { grid-template-columns: 1fr; }
  .sf-price-card { max-width: 480px; }
  .sf-feature-grid--six,
  .sf-compare-cards,
  .sf-addon-row { grid-template-columns: 1fr 1fr; }
  .sf-detail-closing__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .sf-detail-hero__inner { padding: 42px 0; }
  .sf-detail-hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .sf-feature-grid--six,
  .sf-compare-cards,
  .sf-addon-row { grid-template-columns: 1fr; }
  .sf-detail-section { padding: 42px 0; }
  .sf-history-box { padding: 24px; }
}














/* Service Fuchs Dropdown-Menü */
.sf-menu li {
  position: relative;
}

.sf-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(13,45,92,.14);
  z-index: 999;
}

.sf-menu li:hover > .sub-menu,
.sf-menu li:focus-within > .sub-menu {
  display: block;
}

.sf-menu .sub-menu a {
  display: flex;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 13px;
}

.sf-menu .sub-menu a:hover {
  background: #f3f8ff;
  color: var(--sf-blue);
}

.sf-menu .sub-menu a::after {
  display: none;
}

@media (max-width: 920px) {
  .sf-menu .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 4px 0 4px 18px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}


/* =========================================================
   Service Fuchs Business Webspace Detailseite
   Ergänzung zu servicefuchs.css
========================================================= */
.sf-business-page .sf-price-card__badge,
.sf-business-page .sf-kicker {
  background: #fff7ef;
  color: #b75f00;
}
.sf-business-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 92% 72%, rgba(90,145,230,.18), rgba(90,145,230,0) 38%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--business {
  border-color: rgba(240,138,28,.42);
  box-shadow: 0 20px 48px rgba(13,45,92,.12), 0 0 0 4px rgba(240,138,28,.06);
}
.sf-business-page .sf-addon-row {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1180px) {
  .sf-business-page .sf-addon-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .sf-business-page .sf-addon-row { grid-template-columns: 1fr; }
}




/* =========================================================
   Service Fuchs Professional Webspace Detailseite
   Zusätzlicher Feinschliff zu bestehenden Detailseiten-Klassen
========================================================= */
.sf-professional-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 92% 70%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #f6fbff 100%);
}
.sf-price-card--professional {
  border-color: rgba(13,45,92,.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 38%),
    #fff;
}
.sf-professional-page .sf-price-card__badge {
  background: rgba(13,45,92,.10);
  color: var(--sf-blue-dark);
}
.sf-mini-package--professional {
  border-color: rgba(13,45,92,.36);
  box-shadow: 0 12px 28px rgba(13,45,92,.10);
}
.sf-professional-page .sf-addon-row {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  .sf-professional-page .sf-addon-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .sf-professional-page .sf-addon-row { grid-template-columns: 1fr; }
}




/* =========================================================
   Service Fuchs Website Builder / Baukasten
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */

.sf-builder-page .sf-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.16), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 70%, rgba(90,145,230,.18), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-builder-hero .sf-price-card {
  border-color: rgba(240,138,28,.32);
}

.sf-builder-steps {
  display: grid;
  gap: 14px;
}

.sf-builder-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-builder-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-builder-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-builder-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-builder-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-builder-choice-card {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  display: flex;
  flex-direction: column;
  min-height: 430px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-builder-choice-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-builder-choice-card.is-current {
  border-color: rgba(240,138,28,.48);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-builder-choice-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-builder-choice-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}

.sf-builder-choice-card p {
  margin: 0 0 18px;
  color: #435064;
  line-height: 1.62;
}

.sf-builder-choice-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 9px;
}

.sf-builder-choice-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
}

.sf-builder-choice-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-builder-choice-card a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .sf-builder-choice-grid {
    grid-template-columns: 1fr;
  }
  .sf-builder-choice-card {
    min-height: auto;
  }
}



/* =========================================================
   Service Fuchs WordPress Add-on
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-wordpress-page .sf-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 70%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--wordpress {
  border-color: rgba(240,138,28,.36);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 38%),
    #fff;
}
.sf-wordpress-page .sf-kicker,
.sf-wordpress-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-wp-badges span {
  background: rgba(255,255,255,.78);
}
.sf-wordpress-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-wordpress-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-wordpress-badge-section {
  background: #fff;
}
.sf-wp-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-wp-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-wp-usecase-grid article:hover {
  border-color: rgba(240,138,28,.44);
  transform: translateY(-1px);
}
.sf-wp-usecase-grid span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-wp-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-wp-usecase-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}
.sf-wp-steps {
  display: grid;
  gap: 14px;
}
.sf-wp-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-wp-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
.sf-wp-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}
.sf-wp-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}
.sf-wp-combo-cards .sf-mini-package.is-current {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-wp-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-wp-usecase-grid,
  .sf-wp-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 780px) {
  .sf-wp-usecase-grid,
  .sf-wp-related-row {
    grid-template-columns: 1fr;
  }
  .sf-wordpress-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
/* =========================================================
   Service Fuchs WooCommerce Add-on
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-woocommerce-page .sf-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 70%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--woocommerce {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-woocommerce-page .sf-kicker,
.sf-woocommerce-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-wc-badges span {
  background: rgba(255,255,255,.78);
}
.sf-woocommerce-intro .sf-info-panel,
.sf-woocommerce-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-woocommerce-feature-grid .sf-feature-box {
  min-height: 230px;
}
.sf-woocommerce-badge-section {
  background: #fff;
}
.sf-wc-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-wc-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-wc-usecase-grid article:hover {
  border-color: rgba(240,138,28,.44);
  transform: translateY(-1px);
}
.sf-wc-usecase-grid span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-wc-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-wc-usecase-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}
.sf-wc-steps {
  display: grid;
  gap: 14px;
}
.sf-wc-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-wc-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
.sf-wc-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}
.sf-wc-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}
.sf-wc-combo-cards .sf-mini-package.is-current {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-wc-notice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-wc-notice-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-wc-notice-grid svg {
  width: 42px;
  height: 42px;
  color: var(--sf-blue);
  margin-bottom: 14px;
}
.sf-wc-notice-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 18px;
  margin-bottom: 8px;
}
.sf-wc-notice-grid span {
  display: block;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}
.sf-wc-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-wc-usecase-grid,
  .sf-wc-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-wc-notice-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .sf-wc-usecase-grid,
  .sf-wc-related-row {
    grid-template-columns: 1fr;
  }
  .sf-woocommerce-feature-grid .sf-feature-box {
    min-height: auto;
  }
}








/* =========================================================
   Service Fuchs PHP Legacy Support
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-legacy-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--legacy {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-legacy-page .sf-kicker,
.sf-legacy-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-legacy-badges span {
  background: rgba(255,255,255,.80);
}
.sf-legacy-intro .sf-info-panel,
.sf-legacy-sidebox,
.sf-legacy-warningbox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-legacy-version-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-legacy-version-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-legacy-version-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-legacy-version-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-legacy-version-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 24px;
  letter-spacing: -.3px;
}
.sf-legacy-version-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}
.sf-legacy-version-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 25px;
  margin: 0 0 15px;
}
.sf-legacy-version-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 9px;
}
.sf-legacy-version-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.sf-legacy-version-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}
.sf-legacy-version-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-legacy-version-card a:hover {
  text-decoration: underline;
}
.sf-legacy-version-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-legacy-version-card.is-standard {
  border-color: rgba(13,45,92,.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.11), rgba(90,145,230,0) 42%),
    #fff;
}
.sf-legacy-version-card.is-standard > span {
  background: #eaf6ff;
  color: var(--sf-blue);
}
.sf-legacy-version-card.is-old {
  border-color: rgba(13,45,92,.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(13,45,92,.09), rgba(13,45,92,0) 42%),
    #fff;
}
.sf-legacy-feature-grid .sf-feature-box {
  min-height: 230px;
}
.sf-legacy-compat-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.sf-legacy-compat-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #263446;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.45;
}
.sf-legacy-compat-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--sf-orange);
  margin-top: 1px;
}
.sf-legacy-path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-legacy-path-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  display: flex;
  flex-direction: column;
  min-height: 315px;
}
.sf-legacy-path-grid article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 14px;
}
.sf-legacy-path-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-legacy-path-grid p {
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sf-legacy-path-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-legacy-path-grid a:hover {
  text-decoration: underline;
}
.sf-legacy-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-legacy-version-grid,
  .sf-legacy-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-legacy-path-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .sf-legacy-version-grid,
  .sf-legacy-related-row {
    grid-template-columns: 1fr;
  }
  .sf-legacy-version-card,
  .sf-legacy-path-grid article,
  .sf-legacy-feature-grid .sf-feature-box {
    min-height: auto;
  }
}




/* =========================================================
   Service Fuchs Premium SSL
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-ssl-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--ssl {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-ssl-page .sf-kicker,
.sf-ssl-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-ssl-badges span {
  background: rgba(255,255,255,.80);
}
.sf-ssl-intro .sf-info-panel,
.sf-ssl-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-ssl-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.sf-ssl-product-card {
  display: flex;
  flex-direction: column;
  min-height: 470px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-ssl-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-ssl-product-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-ssl-product-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-ssl-product-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}
.sf-ssl-product-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}
.sf-ssl-product-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  margin: 0 0 16px;
}
.sf-ssl-product-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.sf-ssl-product-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.sf-ssl-product-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}
.sf-ssl-product-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-ssl-product-card a:hover {
  text-decoration: underline;
}
.sf-ssl-feature-grid .sf-feature-box {
  min-height: 230px;
}
.sf-ssl-usecase-section {
  background: #f6faff;
}
.sf-ssl-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-ssl-compare-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  display: flex;
  flex-direction: column;
  min-height: 315px;
}
.sf-ssl-compare-grid article > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-ssl-compare-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-ssl-compare-grid p {
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sf-ssl-compare-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-ssl-compare-grid a:hover {
  text-decoration: underline;
}
.sf-ssl-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-ssl-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-ssl-product-grid,
  .sf-ssl-compare-grid {
    grid-template-columns: 1fr;
  }
  .sf-ssl-product-card,
  .sf-ssl-compare-grid article,
  .sf-ssl-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-ssl-related-row {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Service Fuchs E-Mail Landingpage
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-email-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--email {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-email-page .sf-kicker,
.sf-email-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-email-badges span {
  background: rgba(255,255,255,.80);
}
.sf-email-intro .sf-info-panel,
.sf-email-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-email-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-email-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.sf-email-package-card {
  display: flex;
  flex-direction: column;
  min-height: 455px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-email-package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-email-package-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-email-package-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-email-package-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}
.sf-email-package-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}
.sf-email-package-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 28px;
  margin: 0 0 16px;
}
.sf-email-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.sf-email-package-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.sf-email-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}
.sf-email-package-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-email-package-card a:hover {
  text-decoration: underline;
}
.sf-email-price-note {
  margin: 20px auto 0;
  max-width: 860px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.sf-email-link-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.sf-email-link-list a {
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-email-link-list a:hover {
  text-decoration: underline;
}
.sf-email-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sf-email-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 20px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-email-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
.sf-email-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}
.sf-email-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}
.sf-email-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-email-steps,
  .sf-email-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-email-package-grid {
    grid-template-columns: 1fr;
  }
  .sf-email-package-card,
  .sf-email-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-email-steps,
  .sf-email-related-row {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Service Fuchs E-Mail Adresse Detailseite
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-email-address-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--email-address {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-email-address-page .sf-kicker,
.sf-email-address-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-email-address-badges span {
  background: rgba(255,255,255,.80);
}

.sf-email-address-intro .sf-info-panel,
.sf-email-address-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-address-feature-grid .sf-feature-box {
  min-height: 225px;
}

.sf-email-address-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-email-address-package-card {
  display: flex;
  flex-direction: column;
  min-height: 455px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-email-address-package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-email-address-package-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-address-package-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-email-address-package-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}

.sf-email-address-package-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}

.sf-email-address-package-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 28px;
  margin: 0 0 16px;
}

.sf-email-address-package-card strong small {
  color: #667085;
  font-size: 14px;
}

.sf-email-address-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.sf-email-address-package-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.sf-email-address-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}

.sf-email-address-package-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-email-address-package-card a:hover {
  text-decoration: underline;
}

.sf-email-address-price-note {
  margin: 20px auto 0;
  max-width: 880px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.sf-email-address-price-note a {
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-email-address-steps {
  display: grid;
  gap: 14px;
}

.sf-email-address-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-email-address-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-email-address-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-email-address-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-email-address-related-row {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1180px) {
  .sf-email-address-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-email-address-package-grid {
    grid-template-columns: 1fr;
  }

  .sf-email-address-package-card,
  .sf-email-address-feature-grid .sf-feature-box {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .sf-email-address-related-row {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   Service Fuchs E-Mail Speichererweiterung
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-email-storage-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--email-storage {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-email-storage-page .sf-kicker,
.sf-email-storage-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-email-storage-badges span {
  background: rgba(255,255,255,.80);
}

.sf-email-storage-intro .sf-info-panel,
.sf-email-storage-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-storage-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-email-storage-product-card {
  display: flex;
  flex-direction: column;
  min-height: 455px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-email-storage-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-email-storage-product-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-storage-product-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-email-storage-product-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}

.sf-email-storage-product-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}

.sf-email-storage-product-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 28px;
  margin: 0 0 16px;
}

.sf-email-storage-product-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.sf-email-storage-product-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.sf-email-storage-product-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}

.sf-email-storage-product-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-email-storage-product-card a:hover {
  text-decoration: underline;
}

.sf-email-storage-price-note {
  margin: 20px auto 0;
  max-width: 880px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.sf-email-storage-feature-grid .sf-feature-box {
  min-height: 225px;
}

.sf-email-storage-steps {
  display: grid;
  gap: 14px;
}

.sf-email-storage-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-email-storage-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-email-storage-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-email-storage-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-email-storage-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 11px;
}

.sf-email-storage-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #263446;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.45;
}

.sf-email-storage-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--sf-orange);
  margin-top: 1px;
}

.sf-email-storage-related-row {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1180px) {
  .sf-email-storage-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-email-storage-product-grid {
    grid-template-columns: 1fr;
  }

  .sf-email-storage-product-card,
  .sf-email-storage-feature-grid .sf-feature-box {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .sf-email-storage-related-row {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Service Fuchs IT-Service Landingpage
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-it-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--it {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-it-page .sf-kicker,
.sf-it-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-it-badges span {
  background: rgba(255,255,255,.80);
}
.sf-it-intro .sf-info-panel,
.sf-it-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-it-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sf-it-service-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-it-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-it-service-card.is-highlight {
  border-color: rgba(240,138,28,.56);
}
.sf-it-service-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f6faff;
  border-bottom: 1px solid #e7edf5;
}
.sf-it-service-card > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}
.sf-it-service-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-it-service-card span svg {
  width: 16px;
  height: 16px;
}
.sf-it-service-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.25px;
}
.sf-it-service-card p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}
.sf-it-service-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-it-service-card a:hover {
  text-decoration: underline;
}
.sf-it-viennaweb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-it-vw-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.10), rgba(90,145,230,0) 42%),
    #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-it-vw-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(13,45,92,.28);
}
.sf-it-vw-card > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}
.sf-it-vw-card > span svg {
  width: 25px;
  height: 25px;
}
.sf-it-vw-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 9px;
}
.sf-it-vw-card em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.sf-it-vw-card b {
  margin-top: auto;
  color: var(--sf-blue);
  font-size: 14px;
}
.sf-it-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-it-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}
@media (max-width: 1180px) {
  .sf-it-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-it-viennaweb-grid {
    grid-template-columns: 1fr;
  }
  .sf-it-vw-card,
  .sf-it-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-it-service-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Service Fuchs IT Fernwartung
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-fernwartung-remote-support.webp
========================================================= */
.sf-it-single {
  background: #fff;
}

.sf-it-single-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 47%, #fff8ef 100%);
}

.sf-it-single-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 50%, rgba(240,138,28,.32) 51%, transparent 53%),
    linear-gradient(4deg, transparent 49%, rgba(90,145,230,.24) 50%, transparent 52%),
    linear-gradient(-8deg, transparent 56%, rgba(255,255,255,.46) 57%, transparent 59%);
  opacity: .85;
}

.sf-it-single-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.sf-it-single-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 850;
}

.sf-it-single-hero p {
  max-width: 730px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}

.sf-it-single-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.sf-it-single-hero__actions svg {
  width: 20px;
  height: 20px;
}

.sf-it-single-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.sf-it-single-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8e4f1;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #22324a;
  font-size: 13px;
  font-weight: 750;
}

.sf-it-single-badges svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
}

.sf-it-single-hero__side {
  position: relative;
}

.sf-it-single-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(221,229,240,.86);
  box-shadow: 0 24px 54px rgba(13,45,92,.15);
  background: #f6faff;
}

.sf-it-price-panel {
  position: relative;
  width: calc(100% - 40px);
  margin: -42px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(240,138,28,.32);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(13,45,92,.12);
  backdrop-filter: blur(10px);
}

.sf-it-price-panel span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-it-price-panel strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.sf-it-price-panel p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-remote-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-remote-feature-grid .sf-feature-box {
  min-height: 230px;
}

.sf-remote-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-remote-steps {
  display: grid;
  gap: 14px;
}

.sf-remote-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-remote-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-remote-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-remote-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-remote-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-remote-trust-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-remote-trust-grid article:hover {
  border-color: rgba(240,138,28,.44);
  transform: translateY(-1px);
}

.sf-remote-trust-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-remote-trust-grid svg {
  width: 25px;
  height: 25px;
}

.sf-remote-trust-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-remote-trust-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-remote-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-remote-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-remote-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-remote-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-remote-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-remote-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-remote-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-remote-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-it-single-hero__inner {
    grid-template-columns: 1fr;
  }
  .sf-it-single-hero__side {
    max-width: 760px;
  }
  .sf-remote-trust-grid,
  .sf-remote-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-remote-price-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-it-single-hero__inner {
    padding: 42px 0;
  }
  .sf-it-single-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .sf-it-single-badges {
    display: grid;
  }
  .sf-it-single-hero__actions {
    display: grid;
  }
  .sf-it-single-hero__actions .sf-btn {
    width: 100%;
  }
  .sf-it-price-panel {
    width: calc(100% - 22px);
    margin-top: -28px;
  }
  .sf-remote-trust-grid,
  .sf-remote-related-row {
    grid-template-columns: 1fr;
  }
  .sf-remote-feature-grid .sf-feature-box {
    min-height: auto;
  }
}


/* =========================================================
   Service Fuchs IT Migration & Systemumzug
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-migration.webp
========================================================= */
.sf-it-single {
  background: #fff;
}

.sf-it-single-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 47%, #fff8ef 100%);
}

.sf-it-single-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 50%, rgba(240,138,28,.32) 51%, transparent 53%),
    linear-gradient(4deg, transparent 49%, rgba(90,145,230,.24) 50%, transparent 52%),
    linear-gradient(-8deg, transparent 56%, rgba(255,255,255,.46) 57%, transparent 59%);
  opacity: .85;
}

.sf-it-single-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.sf-it-single-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 850;
}

.sf-it-single-hero p {
  max-width: 740px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}

.sf-it-single-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.sf-it-single-hero__actions svg {
  width: 20px;
  height: 20px;
}

.sf-it-single-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.sf-it-single-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8e4f1;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #22324a;
  font-size: 13px;
  font-weight: 750;
}

.sf-it-single-badges svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
}

.sf-it-single-hero__side {
  position: relative;
}

.sf-it-single-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(221,229,240,.86);
  box-shadow: 0 24px 54px rgba(13,45,92,.15);
  background: #f6faff;
}

.sf-it-price-panel {
  position: relative;
  width: calc(100% - 40px);
  margin: -42px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(240,138,28,.32);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(13,45,92,.12);
  backdrop-filter: blur(10px);
}

.sf-it-price-panel span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-it-price-panel strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.sf-it-price-panel p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-migration-hero {
  background:
    radial-gradient(circle at 83% 17%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 93% 68%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #fff8ef 100%);
}

.sf-migration-hero-panel {
  border-color: rgba(240,138,28,.36);
}

.sf-migration-sidebox,
.sf-migration-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-migration-feature-grid .sf-feature-box {
  min-height: 230px;
}

.sf-migration-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-migration-steps {
  display: grid;
  gap: 14px;
}

.sf-migration-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-migration-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-migration-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-migration-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-migration-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-migration-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-migration-usecase-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.44);
}

.sf-migration-usecase-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-migration-usecase-grid svg {
  width: 25px;
  height: 25px;
}

.sf-migration-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-migration-usecase-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-migration-viennaweb-section {
  background: #fff;
}

.sf-migration-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-migration-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-migration-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-migration-viennaweb-links {
  display: grid;
  gap: 12px;
}

.sf-migration-viennaweb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-migration-viennaweb-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-migration-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-migration-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-migration-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-migration-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-migration-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-migration-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-migration-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-migration-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-it-single-hero__inner {
    grid-template-columns: 1fr;
  }
  .sf-it-single-hero__side {
    max-width: 820px;
  }
  .sf-migration-usecase-grid,
  .sf-migration-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-migration-viennaweb-box,
  .sf-migration-price-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-it-single-hero__inner {
    padding: 42px 0;
  }
  .sf-it-single-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .sf-it-single-badges,
  .sf-it-single-hero__actions {
    display: grid;
  }
  .sf-it-single-hero__actions .sf-btn {
    width: 100%;
  }
  .sf-it-price-panel {
    width: calc(100% - 22px);
    margin-top: -28px;
  }
  .sf-migration-usecase-grid,
  .sf-migration-related-row {
    grid-template-columns: 1fr;
  }
  .sf-migration-feature-grid .sf-feature-box {
    min-height: auto;
  }
}




/* =========================================================
   Service Fuchs IT PHP & Datenbank Services
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-php-datenbank.webp
========================================================= */
.sf-phpdb-hero {
  background:
    radial-gradient(circle at 83% 17%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 93% 68%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #fff8ef 100%);
}

.sf-phpdb-hero-panel,
.sf-phpdb-sidebox,
.sf-phpdb-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-phpdb-feature-grid .sf-feature-box {
  min-height: 230px;
}

.sf-phpdb-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-phpdb-steps {
  display: grid;
  gap: 14px;
}

.sf-phpdb-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-phpdb-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-phpdb-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-phpdb-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-phpdb-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-phpdb-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-phpdb-usecase-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.44);
}

.sf-phpdb-usecase-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-phpdb-usecase-grid svg {
  width: 25px;
  height: 25px;
}

.sf-phpdb-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-phpdb-usecase-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-phpdb-viennaweb-section {
  background: #fff;
}

.sf-phpdb-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-phpdb-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-phpdb-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-phpdb-viennaweb-links {
  display: grid;
  gap: 12px;
}

.sf-phpdb-viennaweb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-phpdb-viennaweb-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-phpdb-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-phpdb-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-phpdb-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-phpdb-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-phpdb-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-phpdb-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-phpdb-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-phpdb-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-phpdb-usecase-grid,
  .sf-phpdb-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-phpdb-viennaweb-box,
  .sf-phpdb-price-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-phpdb-usecase-grid,
  .sf-phpdb-related-row {
    grid-template-columns: 1fr;
  }
  .sf-phpdb-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
/* =========================================================
   Service Fuchs Webseiten-Erstellung
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-webseiten-erstellung.webp
========================================================= */
.sf-webdev-hero {
  background:
    radial-gradient(circle at 83% 17%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 93% 68%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #fff8ef 100%);
}

.sf-webdev-hero-panel,
.sf-webdev-sidebox,
.sf-webdev-seo-panel,
.sf-webdev-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-webdev-feature-grid .sf-feature-box {
  min-height: 235px;
}

.sf-webdev-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-webdev-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-webdev-package-card {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-webdev-package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-webdev-package-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-webdev-package-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-webdev-package-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}

.sf-webdev-package-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}

.sf-webdev-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.sf-webdev-package-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.sf-webdev-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}

.sf-webdev-package-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-webdev-package-card a:hover {
  text-decoration: underline;
}

.sf-webdev-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 11px;
}

.sf-webdev-checklist li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #263446;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.45;
}

.sf-webdev-checklist svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--sf-orange);
  margin-top: 1px;
}

.sf-webdev-steps {
  display: grid;
  gap: 14px;
}

.sf-webdev-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-webdev-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-webdev-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-webdev-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-webdev-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-webdev-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-webdev-usecase-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.44);
}

.sf-webdev-usecase-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-webdev-usecase-grid svg {
  width: 25px;
  height: 25px;
}

.sf-webdev-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-webdev-usecase-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-webdev-viennaweb-section {
  background: #fff;
}

.sf-webdev-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-webdev-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-webdev-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-webdev-viennaweb-links {
  display: grid;
  gap: 12px;
}

.sf-webdev-viennaweb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-webdev-viennaweb-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-webdev-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-webdev-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-webdev-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-webdev-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-webdev-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-webdev-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-webdev-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-webdev-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-webdev-usecase-grid,
  .sf-webdev-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-webdev-package-grid,
  .sf-webdev-viennaweb-box,
  .sf-webdev-price-box {
    grid-template-columns: 1fr;
  }
  .sf-webdev-package-card,
  .sf-webdev-feature-grid .sf-feature-box {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .sf-webdev-usecase-grid,
  .sf-webdev-related-row {
    grid-template-columns: 1fr;
  }
}






/* =========================================================
   Service Fuchs Statusseite
   Ergänzung zu assets/css/servicefuchs.css
   URL: /status/ oder /service/status/
========================================================= */
.sf-status-page {
  background: #fff;
}

.sf-status-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 47%, #fff8ef 100%);
}

.sf-status-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 50%, rgba(240,138,28,.32) 51%, transparent 53%),
    linear-gradient(4deg, transparent 49%, rgba(90,145,230,.24) 50%, transparent 52%),
    linear-gradient(-8deg, transparent 56%, rgba(255,255,255,.46) 57%, transparent 59%);
  opacity: .85;
}

.sf-status-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.sf-status-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 850;
}

.sf-status-hero p {
  max-width: 740px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}

.sf-status-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sf-status-hero__panel,
.sf-status-current-card,
.sf-status-availability-box,
.sf-status-incidents-box {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(13,45,92,.10);
}

.sf-status-hero__panel {
  padding: 28px;
  backdrop-filter: blur(10px);
}

.sf-status-hero__panel > span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-status-hero__panel strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  line-height: 1.12;
  margin-bottom: 10px;
}

.sf-status-hero__panel p {
  margin: 0 0 14px;
  font-size: 15px;
  color: #435064;
}

.sf-status-hero__panel small {
  color: #667085;
  font-weight: 700;
}

.sf-status-current-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 4vw, 38px);
  margin-bottom: 28px;
}

.sf-status-current-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.sf-status-current-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--sf-blue);
  font-size: 28px;
  font-weight: 900;
}

.sf-status-current-card h2 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.sf-status-current-card p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-status-current-meta {
  border-left: 1px solid #dfe8f4;
  padding-left: 24px;
}

.sf-status-current-meta strong,
.sf-status-current-meta span,
.sf-status-current-meta em {
  display: block;
}

.sf-status-current-meta strong {
  color: var(--sf-orange);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.sf-status-current-meta span {
  color: var(--sf-blue-dark);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.sf-status-current-meta em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
}

.sf-status-service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.sf-status-service-card {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-status-service-card span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf6ff;
  color: var(--sf-blue);
  font-weight: 900;
  margin-bottom: 12px;
}

.sf-status-service-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 15px;
  margin-bottom: 4px;
}

.sf-status-service-card em {
  color: #435064;
  font-style: normal;
  font-size: 13px;
  font-weight: 750;
}

.sf-status-email-details {
  margin-top: 22px;
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.sf-status-email-details summary {
  cursor: pointer;
  min-height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sf-blue-dark);
  font-weight: 900;
}

.sf-status-email-details summary strong {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  color: #fff;
  background: var(--sf-blue);
}

.sf-status-email-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 20px 20px;
}

.sf-status-email-detail-card {
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 16px;
}

.sf-status-email-detail-card div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.sf-status-email-detail-card span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
}

.sf-status-email-detail-card strong {
  color: var(--sf-blue-dark);
}

.sf-status-email-detail-card em {
  margin-left: auto;
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.sf-status-email-detail-card p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-status-history-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-status-history-card {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-status-history-card span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-status-history-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-status-history-card p {
  margin: 0 0 12px;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-status-history-card em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 750;
}

.sf-status-availability-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 34px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
}

.sf-status-availability-box h2,
.sf-status-incidents-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-status-availability-box p,
.sf-status-incidents-box p {
  margin: 0 0 22px;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-status-90day-months,
.sf-status-90day-grid {
  display: grid;
  gap: 4px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sf-status-90day-months {
  margin-top: 20px;
  margin-bottom: 6px;
  min-height: 18px;
}

.sf-status-90day-months span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.sf-status-90day-week {
  display: grid;
  grid-template-rows: repeat(7, 16px);
  gap: 4px;
}

.sf-status-90day-cell {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #dfe8f4;
}

.sf-status-90day-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: #435064;
  font-size: 13px;
  font-weight: 800;
}

.sf-status-90day-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sf-status-availability-side {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-status-availability-side > span {
  display: block;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.sf-status-availability-side > strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 38px;
  line-height: 1;
  margin-bottom: 20px;
}

.sf-status-availability-side div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #e8eef6;
}

.sf-status-availability-side em {
  color: #435064;
  font-style: normal;
  font-size: 14px;
}

.sf-status-availability-side b {
  color: var(--sf-blue-dark);
}

.sf-status-incidents-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  padding: clamp(28px, 4vw, 44px);
}

.sf-status-incidents-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sf-status-incidents-box li {
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  background: #fff;
  padding: 13px 15px;
  color: #435064;
}

.sf-status-incidents-box li strong {
  color: var(--sf-blue-dark);
}

.isf-ok .sf-status-current-icon,
.sf-status-service-card.isf-ok span,
.sf-status-email-detail-card.isf-ok span,
.sf-status-90day-cell.isf-ok,
.isf-ok.sf-status-90day-cell {
  background: #16a34a;
}

.isf-warn .sf-status-current-icon,
.sf-status-service-card.isf-warn span,
.sf-status-email-detail-card.isf-warn span,
.sf-status-90day-cell.isf-warn,
.isf-warn.sf-status-90day-cell {
  background: #f59e0b;
}

.isf-bad .sf-status-current-icon,
.sf-status-service-card.isf-bad span,
.sf-status-email-detail-card.isf-bad span,
.sf-status-90day-cell.isf-bad,
.isf-bad.sf-status-90day-cell {
  background: #dc2626;
}

.isf-maint .sf-status-current-icon,
.sf-status-service-card.isf-maint span,
.sf-status-email-detail-card.isf-maint span,
.sf-status-90day-cell.isf-maint,
.isf-maint.sf-status-90day-cell {
  background: #64748b;
}

.sf-status-hero__panel.isf-ok,
.sf-status-current-card.isf-ok {
  border-color: rgba(22,163,74,.30);
}

.sf-status-hero__panel.isf-warn,
.sf-status-current-card.isf-warn {
  border-color: rgba(245,158,11,.35);
}

.sf-status-hero__panel.isf-bad,
.sf-status-current-card.isf-bad {
  border-color: rgba(220,38,38,.35);
}

.sf-status-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-status-hero__inner,
  .sf-status-current-card,
  .sf-status-availability-box,
  .sf-status-incidents-box {
    grid-template-columns: 1fr;
  }

  .sf-status-service-grid,
  .sf-status-history-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-status-current-meta {
    border-left: 0;
    border-top: 1px solid #dfe8f4;
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 780px) {
  .sf-status-hero__inner {
    padding: 42px 0;
  }

  .sf-status-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }

  .sf-status-hero__actions,
  .sf-status-email-detail-grid,
  .sf-status-service-grid,
  .sf-status-history-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sf-status-hero__actions .sf-btn {
    width: 100%;
  }

  .sf-status-current-main {
    flex-direction: column;
  }
}



/* =========================================================
   Service Fuchs Kontakt & Anfrage
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-contact-page { background:#fff; }
.sf-contact-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-contact-hero__inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:44px;
  align-items:center;
  padding:62px 0;
}
.sf-contact-hero h1 {
  margin:0 0 18px;
  color:var(--sf-blue-dark);
  font-size:clamp(38px,4.4vw,60px);
  line-height:1.08;
  letter-spacing:-1.5px;
}
.sf-contact-hero p {
  max-width:740px;
  margin:0 0 28px;
  color:#263446;
  font-size:18px;
  line-height:1.62;
}
.sf-contact-hero__actions { display:flex; gap:16px; flex-wrap:wrap; }
.sf-contact-hero__panel {
  border:1px solid rgba(240,138,28,.34);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(13,45,92,.12);
  padding:28px;
}
.sf-contact-hero__panel span {
  display:inline-flex;
  padding:6px 11px;
  margin-bottom:14px;
  border-radius:999px;
  background:#fff7ef;
  color:#b75f00;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.sf-contact-hero__panel strong { display:block; color:var(--sf-blue-dark); font-size:28px; line-height:1.12; margin-bottom:10px; }
.sf-contact-hero__panel p { margin:0; font-size:14px; color:#435064; }
.sf-contact-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 26px;
}
.sf-contact-tabs a {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 15px;
  border:1px solid #dce6f2;
  border-radius:999px;
  background:#fff;
  color:#22324a;
  font-size:13px;
  font-weight:850;
  box-shadow:0 8px 18px rgba(13,45,92,.035);
}
.sf-contact-tabs a:hover,
.sf-contact-tabs a.is-active {
  border-color:rgba(240,138,28,.55);
  background:#fff7ef;
  color:#b75f00;
}
.sf-contact-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:26px;
  align-items:start;
}
.sf-contact-box {
  border:1px solid #dfe8f4;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--sf-shadow);
  overflow:hidden;
}
.sf-contact-block { padding:28px; border-bottom:1px solid #e8eef6; }
.sf-contact-block:last-child { border-bottom:0; }
.sf-contact-block-title {
  color:var(--sf-blue-dark);
  font-size:20px;
  font-weight:900;
  margin:0 0 18px;
}
.sf-contact-grid { display:grid; gap:18px; }
.sf-contact-grid-2 { grid-template-columns:repeat(2,1fr); }
.sf-contact-grid-1 { grid-template-columns:1fr; }
.sf-contact-field-wide { grid-column:1 / -1; }
.sf-contact-field label {
  display:block;
  color:var(--sf-blue-dark);
  font-size:14px;
  font-weight:850;
  margin-bottom:7px;
}
.sf-contact-required { color:var(--sf-orange); }
.sf-contact-field input,
.sf-contact-field textarea,
.sf-contact-field select {
  width:100%;
  border:1px solid #d7e0ec;
  border-radius:10px;
  background:#fff;
  color:#172033;
  font:inherit;
  padding:13px 14px;
  outline:none;
}
.sf-contact-field textarea { min-height:150px; resize:vertical; }
.sf-contact-field input:focus,
.sf-contact-field textarea:focus,
.sf-contact-field select:focus {
  border-color:rgba(240,138,28,.65);
  box-shadow:0 0 0 4px rgba(240,138,28,.10);
}
.sf-contact-honeypot { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.sf-contact-checkbox { display:flex; gap:10px; align-items:flex-start; color:#435064; font-size:14px; line-height:1.55; }
.sf-contact-checkbox input { margin-top:4px; }
.sf-contact-checkbox a { color:var(--sf-blue); font-weight:900; text-decoration:underline; }
.sf-contact-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; }
.sf-contact-submit {
  min-height:50px;
  border:0;
  border-radius:8px;
  background:var(--sf-blue);
  color:#fff;
  font-weight:900;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(13,45,92,.20);
}
.sf-contact-response-info { color:#435064; font-size:14px; font-weight:750; }
.sf-contact-alert {
  border-radius:14px;
  padding:16px 18px;
  margin:0 0 22px;
  font-weight:750;
}
.sf-contact-alert-success { border:1px solid rgba(21,128,61,.25); background:#effcf4; color:#166534; }
.sf-contact-alert-error { border:1px solid rgba(185,28,28,.25); background:#fff1f2; color:#991b1b; }
.sf-contact-alert ul { margin:0; padding-left:20px; }
.sf-contact-upload-box {
  border:2px dashed #cbd9ec;
  border-radius:14px;
  background:#f8fbff;
  padding:24px;
  text-align:center;
  cursor:pointer;
  display:grid;
  gap:5px;
}
.sf-contact-upload-box.is-dragover { border-color:var(--sf-orange); background:#fff7ef; }
.sf-contact-upload-box input { display:none; }
.sf-contact-upload-icon { font-size:30px; }
.sf-contact-upload-main { color:var(--sf-blue-dark); font-weight:900; }
.sf-contact-upload-sub { color:#5B6472; font-size:14px; }
.sf-contact-upload-row {
  margin-top:9px;
  padding:9px 12px;
  border:1px solid #dfe8f4;
  border-radius:10px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:14px;
}
.sf-contact-upload-row button { border:0; background:#fff7ef; color:#b75f00; border-radius:999px; padding:5px 10px; font-weight:850; cursor:pointer; }
.sf-contact-side {
  border:1px solid #dfe8f4;
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  box-shadow:0 10px 24px rgba(13,45,92,.045);
  padding:24px;
  display:grid;
  gap:12px;
}
.sf-contact-side strong { color:var(--sf-orange); text-transform:uppercase; font-size:13px; letter-spacing:.04em; }
.sf-contact-side p { margin:0; color:#435064; font-size:14px; line-height:1.6; }
.sf-contact-side a {
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #dce6f2;
  border-radius:10px;
  background:#fff;
  padding:0 13px;
  color:var(--sf-blue);
  font-weight:900;
  font-size:14px;
}
.sf-contact-side a::after { content:"→"; color:var(--sf-orange); }
.sf-contact-summary { padding:30px; }
.sf-contact-summary h2 { margin:0 0 18px; color:var(--sf-blue-dark); font-size:30px; }
.sf-contact-summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sf-contact-summary-grid div { border:1px solid #dfe8f4; border-radius:12px; padding:14px; background:#f8fbff; }
.sf-contact-summary-grid strong { display:block; color:var(--sf-blue-dark); font-size:13px; margin-bottom:4px; }
.sf-contact-summary-grid span { color:#435064; font-size:14px; }
.sf-contact-message-preview { margin-top:16px; border:1px solid #dfe8f4; border-radius:12px; background:#fff; padding:16px; color:#435064; line-height:1.65; }
.sf-contact-turnstile { display:flex; justify-content:flex-start; }
@media (max-width:980px) {
  .sf-contact-hero__inner,
  .sf-contact-layout { grid-template-columns:1fr; }
  .sf-contact-hero__panel { max-width:520px; }
}
@media (max-width:680px) {
  .sf-contact-hero__inner { padding:42px 0; }
  .sf-contact-grid-2,
  .sf-contact-summary-grid { grid-template-columns:1fr; }
  .sf-contact-block { padding:22px; }
  .sf-contact-actions { display:grid; }
  .sf-contact-submit { width:100%; }
}





/* =========================================================
   Service Fuchs Partnerprogramm Hinweis-Seite
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-partner-page {
  background: #fff;
}
.sf-partner-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--partner {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-partner-page .sf-kicker,
.sf-partner-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-partner-badges span {
  background: rgba(255,255,255,.82);
}
.sf-partner-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-partner-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-partner-target-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-partner-target-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-partner-target-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}
.sf-partner-target-grid svg {
  width: 25px;
  height: 25px;
}
.sf-partner-target-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}
.sf-partner-target-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}
.sf-partner-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-partner-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}
.sf-partner-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}
.sf-partner-viennaweb-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-partner-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}
.sf-partner-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}
.sf-partner-link-grid {
  display: grid;
  gap: 12px;
}
.sf-partner-link-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}
.sf-partner-link-grid a::after {
  content: "→";
  color: var(--sf-orange);
}
.sf-partner-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}
@media (max-width: 1180px) {
  .sf-partner-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-partner-viennaweb-box {
    grid-template-columns: 1fr;
  }
  .sf-partner-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-partner-target-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Service Fuchs Wissensdatenbank Landingpage
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-kb-page {
  background: #fff;
}

.sf-kb-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--kb {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-kb-page .sf-kicker,
.sf-kb-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-kb-badges span {
  background: rgba(255,255,255,.82);
}

.sf-kb-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-kb-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-kb-topic-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-kb-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-kb-topic-card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-kb-topic-card__icon svg {
  width: 27px;
  height: 27px;
}

.sf-kb-topic-card em {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-kb-topic-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.3px;
}

.sf-kb-topic-card p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-kb-topic-card ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.sf-kb-topic-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #263446;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.sf-kb-topic-card li svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-kb-topic-card > a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sf-kb-topic-card > a:hover {
  text-decoration: underline;
}

.sf-kb-topic-card > a svg {
  width: 18px;
  height: 18px;
  color: var(--sf-orange);
}

.sf-kb-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-kb-quick-grid a {
  display: flex;
  flex-direction: column;
  min-height: 160px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.10), rgba(90,145,230,0) 42%),
    #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-kb-quick-grid a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-kb-quick-grid strong {
  color: var(--sf-blue-dark);
  font-size: 18px;
  margin-bottom: 8px;
}

.sf-kb-quick-grid span {
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-kb-support-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-kb-support-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-kb-support-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-kb-support-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-kb-support-links {
  display: grid;
  gap: 12px;
}

.sf-kb-support-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-kb-support-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-kb-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-kb-topic-grid,
  .sf-kb-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-kb-support-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-kb-topic-grid,
  .sf-kb-quick-grid {
    grid-template-columns: 1fr;
  }

  .sf-kb-topic-card,
  .sf-kb-quick-grid a {
    min-height: auto;
  }
}


/* =========================================================
   Service Fuchs Domains / Domaincheck
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-domains-page {
  background: #fff;
}

.sf-domains-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--domains {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-domains-page .sf-kicker,
.sf-domains-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-domains-badges span {
  background: rgba(255,255,255,.82);
}

.sf-domain-check-form {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 30px rgba(13,45,92,.07);
  padding: 22px;
  max-width: 820px;
}

.sf-domain-check-form label {
  display: block;
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
}

.sf-domain-check-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
  gap: 10px;
}

.sf-domain-check-fields input,
.sf-domain-check-fields select,
.sf-domain-check-fields button {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  font: inherit;
}

.sf-domain-check-fields input {
  padding: 0 16px;
}

.sf-domain-check-fields select {
  padding: 0 14px;
  font-weight: 800;
}

.sf-domain-check-fields button {
  border-color: var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-domain-check-form p {
  margin: 10px 0 0;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.5;
}

.sf-domain-notice {
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(13,45,92,.14);
  border-radius: 14px;
  background: #f8fbff;
  color: #263446;
}

.sf-domain-notice strong {
  color: var(--sf-blue-dark);
  font-size: 17px;
}

.sf-domain-notice--error {
  border-color: rgba(185,28,28,.25);
  background: #fff1f2;
}

.sf-domain-result-grid {
  display: grid;
  gap: 16px;
}

.sf-domain-result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-domain-result-card.is-free {
  border-color: rgba(22,163,74,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(22,163,74,.09), rgba(22,163,74,0) 36%),
    #fff;
}

.sf-domain-result-card.is-taken {
  border-color: rgba(245,158,11,.30);
}

.sf-domain-result-card.is-error {
  border-color: rgba(100,116,139,.30);
}

.sf-domain-result-card span {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #eaf6ff;
  color: var(--sf-blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domain-result-card.is-free span {
  background: #effcf4;
  color: #15803d;
}

.sf-domain-result-card.is-taken span {
  background: #fff7ed;
  color: #b45309;
}

.sf-domain-result-card h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
}

.sf-domain-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sf-blue-dark);
}

.sf-domain-price strong {
  font-size: 24px;
  font-weight: 950;
}

.sf-domain-price em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.sf-domain-price__old {
  color: #8A8F98;
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 800;
}

.sf-domain-result-card form button,
.sf-domain-result-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 9px 20px rgba(13,45,92,.16);
}

.sf-domain-result-secondary {
  background: #fff;
  color: var(--sf-blue);
  border: 1px solid #dce6f2;
  box-shadow: none;
}

.sf-domain-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: #263446;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.sf-domain-select input {
  width: 17px;
  height: 17px;
  accent-color: var(--sf-orange);
}

.sf-domain-bulkbar {
  margin: 22px 0 0;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sf-shadow);
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.sf-domain-bulkbar strong {
  display: block;
  color: var(--sf-blue-dark);
}

.sf-domain-bulkbar small {
  color: #5B6472;
}

.sf-domain-bulkbar button {
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: var(--sf-orange);
  color: #fff;
  font-weight: 950;
  padding: 0 18px;
  cursor: pointer;
}

.sf-domain-bulkbar button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sf-domain-tld-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-domain-tld-card {
  overflow: hidden;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domain-tld-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domain-tld-card img,
.sf-domain-tld-card__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background:
    radial-gradient(circle at 70% 20%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    linear-gradient(135deg, #eaf6ff, #fff8ef);
}

.sf-domain-tld-card__placeholder {
  display: grid;
  place-items: center;
  color: var(--sf-blue-dark);
  font-size: 54px;
  font-weight: 950;
}

.sf-domain-tld-card > div {
  padding: 24px;
}

.sf-domain-tld-card span {
  display: inline-flex;
  padding: 6px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domain-tld-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}

.sf-domain-tld-card p {
  margin: 0 0 16px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
  min-height: 70px;
}

.sf-domain-tld-card a {
  display: inline-flex;
  margin-top: 16px;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-domain-tld-card a:hover {
  text-decoration: underline;
}

.sf-domain-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domains-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-domain-tld-grid {
    grid-template-columns: 1fr;
  }

  .sf-domain-tld-card {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .sf-domain-tld-card p {
    min-height: auto;
  }
}

@media (max-width: 980px) {
  .sf-domain-check-fields,
  .sf-domain-result-card {
    grid-template-columns: 1fr;
  }

  .sf-domain-result-card form button,
  .sf-domain-result-secondary {
    width: 100%;
  }

  .sf-domain-bulkbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-domain-bulkbar button {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .sf-domain-tld-card {
    display: block;
  }
}






/* =========================================================
   Service Fuchs Domains V2 Ergebnis-Fix
   Nach servicefuchs-domains-patch.css anhängen.
========================================================= */

.sf-domain-result-grid {
  gap: 20px;
}

.sf-domain-result-card {
  border-width: 2px;
  box-shadow: 0 14px 34px rgba(13,45,92,.08);
}

.sf-domain-result-card.is-free {
  border-color: #16a34a;
  background:
    linear-gradient(90deg, rgba(22,163,74,.13) 0%, rgba(255,255,255,1) 42%),
    radial-gradient(circle at 100% 0%, rgba(22,163,74,.16), rgba(22,163,74,0) 38%),
    #fff;
}

.sf-domain-result-card.is-taken {
  border-color: #f97316;
  background:
    linear-gradient(90deg, rgba(249,115,22,.14) 0%, rgba(255,255,255,1) 42%),
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.16), rgba(249,115,22,0) 38%),
    #fff;
}

.sf-domain-result-card.is-error {
  border-color: #64748b;
  background:
    linear-gradient(90deg, rgba(100,116,139,.12) 0%, rgba(255,255,255,1) 42%),
    radial-gradient(circle at 100% 0%, rgba(100,116,139,.14), rgba(100,116,139,0) 38%),
    #fff;
}

.sf-domain-result-card span {
  font-size: 13px;
  padding: 7px 13px;
}

.sf-domain-result-card.is-free span {
  background: #16a34a;
  color: #fff;
}

.sf-domain-result-card.is-taken span {
  background: #f97316;
  color: #fff;
}

.sf-domain-result-card.is-error span {
  background: #64748b;
  color: #fff;
}

.sf-domain-result-card h3 {
  font-weight: 950;
}

.sf-domain-result-card.is-free h3::after {
  content: " verfügbar";
  display: inline-flex;
  margin-left: 10px;
  color: #15803d;
  font-size: 15px;
  vertical-align: middle;
}

.sf-domain-result-card.is-taken h3::after {
  content: " vergeben";
  display: inline-flex;
  margin-left: 10px;
  color: #c2410c;
  font-size: 15px;
  vertical-align: middle;
}

.sf-domain-result-card form button {
  background: #16a34a;
  box-shadow: 0 10px 22px rgba(22,163,74,.22);
}

.sf-domain-result-card.is-free .sf-domain-price strong {
  color: #15803d;
}

.sf-domain-result-card.is-taken .sf-domain-result-secondary {
  border-color: rgba(249,115,22,.40);
  color: #c2410c;
  background: #fff7ed;
}

.sf-domain-result-card.is-error .sf-domain-result-secondary {
  border-color: rgba(100,116,139,.36);
  color: #334155;
  background: #f8fafc;
}



/* =========================================================
   Service Fuchs Domains V3 Ergänzung
   Nur neue Blöcke: Vollständiger Checker + weitere Endungen
========================================================= */
.sf-domain-notice--fullcheck {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(240,138,28,.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domain-notice--fullcheck a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 9px;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.sf-domain-more-check {
  margin: 22px 0 0;
  border: 1px solid rgba(240,138,28,.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 18px;
  align-items: center;
}

.sf-domain-more-check strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 18px;
  margin-bottom: 4px;
}

.sf-domain-more-check span {
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

.sf-domain-more-check__links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sf-domain-more-check__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #dce6f2;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  font-size: 13px;
}

.sf-domain-more-check__links a:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

.sf-domain-transfer-btn {
  background: var(--sf-orange) !important;
  color: #fff !important;
}

@media (max-width: 780px) {
  .sf-domain-notice--fullcheck,
  .sf-domain-more-check {
    grid-template-columns: 1fr;
  }

  .sf-domain-notice--fullcheck a {
    width: 100%;
  }
}

/* =========================================================
   Service Fuchs Domains Landingpage
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-domains-landing {
  background: #fff;
}

.sf-domains-landing-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--domains-landing {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-domains-landing .sf-kicker,
.sf-domains-landing .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-domains-landing-badges span {
  background: rgba(255,255,255,.82);
}

.sf-domain-landing-search {
  max-width: 830px;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(13,45,92,.07);
  padding: 22px;
}

.sf-domain-landing-search label {
  display: block;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 10px;
}

.sf-domain-landing-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 185px;
  gap: 10px;
}

.sf-domain-landing-search input,
.sf-domain-landing-search button {
  width: 100%;
  min-height: 52px;
  border-radius: 10px;
  font: inherit;
}

.sf-domain-landing-search input {
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  padding: 0 16px;
}

.sf-domain-landing-search button {
  border: 1px solid var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-domain-landing-search button svg {
  width: 19px;
  height: 19px;
}

.sf-domain-landing-search small {
  display: block;
  margin-top: 10px;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.5;
}

.sf-domain-landing-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domain-landing-tld-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.sf-domain-landing-tld-card {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domain-landing-tld-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domain-landing-tld-card img,
.sf-domain-landing-tld-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  background:
    radial-gradient(circle at 70% 20%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    linear-gradient(135deg, #eaf6ff, #fff8ef);
}

.sf-domain-landing-tld-placeholder {
  display: grid;
  place-items: center;
  color: var(--sf-blue-dark);
  font-size: 46px;
  font-weight: 950;
}

.sf-domain-landing-tld-card > div {
  padding: 24px;
}

.sf-domain-landing-tld-card span {
  display: inline-flex;
  padding: 6px 11px;
  margin-bottom: 13px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domain-landing-tld-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}

.sf-domain-landing-tld-card p {
  margin: 0 0 16px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-domain-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sf-blue-dark);
}

.sf-domain-price strong {
  font-size: 24px;
  font-weight: 950;
}

.sf-domain-price em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.sf-domain-price__old {
  color: #8A8F98;
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 800;
}

.sf-domain-landing-tld-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sf-domain-landing-tld-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid #dce6f2;
  color: var(--sf-blue);
  background: #fff;
}

.sf-domain-landing-tld-actions a:first-child {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #fff;
}

.sf-domain-landing-usecase-grid,
.sf-domain-landing-transfer-grid {
  display: grid;
  gap: 20px;
}

.sf-domain-landing-usecase-grid {
  grid-template-columns: repeat(4, 1fr);
}

.sf-domain-landing-transfer-grid {
  grid-template-columns: repeat(3, 1fr);
}

.sf-domain-landing-usecase-grid article,
.sf-domain-landing-transfer-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domain-landing-usecase-grid article:hover,
.sf-domain-landing-transfer-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domain-landing-usecase-grid span,
.sf-domain-landing-transfer-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-domain-landing-usecase-grid svg,
.sf-domain-landing-transfer-grid svg {
  width: 25px;
  height: 25px;
}

.sf-domain-landing-usecase-grid strong,
.sf-domain-landing-transfer-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-domain-landing-usecase-grid p,
.sf-domain-landing-transfer-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}

.sf-domain-landing-transfer-grid a {
  display: inline-flex;
  margin-top: 16px;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-domain-landing-transfer-grid a:hover {
  text-decoration: underline;
}

.sf-domain-landing-combo-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-domain-landing-combo-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-domain-landing-combo-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-domain-landing-combo-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-domain-landing-combo-links {
  display: grid;
  gap: 12px;
}

.sf-domain-landing-combo-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-domain-landing-combo-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-domains-landing-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-domain-landing-tld-grid,
  .sf-domain-landing-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-domain-landing-tld-card {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-domain-landing-combo-box,
  .sf-domain-landing-transfer-grid {
    grid-template-columns: 1fr;
  }

  .sf-domain-landing-tld-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-domain-landing-search > div,
  .sf-domain-landing-tld-card,
  .sf-domain-landing-usecase-grid {
    grid-template-columns: 1fr;
  }

  .sf-domain-landing-tld-card img,
  .sf-domain-landing-tld-placeholder {
    min-height: 210px;
  }
}


/* =========================================================
   Service Fuchs Domaincheck V2
   Ergebnisansicht ohne großen Hero
========================================================= */
.sf-domain-check-compact {
  padding: 24px 0 18px;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.12), rgba(240,138,28,0) 34%),
    linear-gradient(90deg, #eef7ff 0%, #fff 58%, #fff8ef 100%);
  border-bottom: 1px solid #e8eef6;
}

.sf-domain-check-form--compact {
  max-width: none;
  margin: 0;
}

.sf-domain-result-section {
  padding-top: 30px;
}

.sf-domain-result-section .sf-section-head {
  margin-bottom: 22px;
}

@media (max-width: 780px) {
  .sf-domain-check-compact {
    padding: 18px 0 14px;
  }

  .sf-domain-result-section {
    padding-top: 24px;
  }
}
/* =========================================================
   Service Fuchs Domaincheck V3
   Weitere Domains anzeigen + Preisfußnote
========================================================= */
.sf-domain-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 30px 0 12px;
}

.sf-domain-load-more {
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  padding: 0 24px;
  background: var(--sf-orange);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(13,45,92,.10);
}

.sf-domain-load-more:hover {
  transform: translateY(-1px);
}

.sf-domain-load-more:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.sf-domain-price-footnote {
  margin: 12px 0 0;
  text-align: center;
  color: #5B6472;
  font-size: 14px;
  line-height: 1.5;
}
/* =========================================================
   Service Fuchs Domaincheck V4
   Preis-Fußnote + kompaktes Formularfeld
========================================================= */

/* Aktionspreis-Fußnote direkt beim Preis */
.sf-domain-price-foot {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  color: inherit;
  vertical-align: super;
}

/* Zusatz-Button im Service-Fuchs-Orange, nicht hellblau */
.sf-domain-load-more {
  background: var(--sf-orange) !important;
  color: #fff !important;
}

/* Formular: Eingabefeld etwas kleiner, TLD-Auswahl deutlich breiter */
.sf-domain-check-fields {
  grid-template-columns: minmax(0, 1fr) 230px 170px;
}

/* Ergebnisansicht oben: genug Platz für "Top-Endungen prüfen" */
.sf-domain-check-form--compact .sf-domain-check-fields {
  grid-template-columns: minmax(0, 1fr) 235px 170px;
}

.sf-domain-check-fields select {
  min-width: 220px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Auf mittleren Breiten nicht zu früh umbrechen */
@media (max-width: 1180px) {
  .sf-domain-check-form--compact .sf-domain-check-fields,
  .sf-domain-check-fields {
    grid-template-columns: minmax(0, 1fr) 230px 165px;
  }
}

@media (max-width: 860px) {
  .sf-domain-check-form--compact .sf-domain-check-fields,
  .sf-domain-check-fields {
    grid-template-columns: 1fr;
  }

  .sf-domain-check-fields select {
    min-width: 0;
    width: 100%;
  }
}



.sf-domain-tld-card .sf-domain-price {
  display: flex !important;
  width: 100%;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px !important;
}

.sf-domain-tld-card .sf-domain-price + a {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 0 !important;
}





/* =========================================================
   Service Fuchs Domainberatung
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-domainberatung-page {
  background: #fff;
}

.sf-domainberatung-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--domainberatung {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-domainberatung-page .sf-kicker,
.sf-domainberatung-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-domainberatung-badges span {
  background: rgba(255,255,255,.82);
}

.sf-domainberatung-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domainberatung-tld-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-domainberatung-tld-grid article,
.sf-domainberatung-choice-grid article {
  display: flex;
  flex-direction: column;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domainberatung-tld-grid article:hover,
.sf-domainberatung-choice-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domainberatung-tld-grid article > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domainberatung-tld-grid h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.25px;
}

.sf-domainberatung-tld-grid p,
.sf-domainberatung-choice-grid p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-domainberatung-tld-grid a,
.sf-domainberatung-choice-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-domainberatung-tld-grid a:hover,
.sf-domainberatung-choice-grid a:hover {
  text-decoration: underline;
}

.sf-domainberatung-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-domainberatung-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 20px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-domainberatung-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-domainberatung-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-domainberatung-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-domainberatung-combo-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-domainberatung-combo-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-domainberatung-combo-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-domainberatung-combo-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-domainberatung-link-grid {
  display: grid;
  gap: 12px;
}

.sf-domainberatung-link-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-domainberatung-link-grid a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-domainberatung-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-domainberatung-choice-grid article > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-domainberatung-choice-grid article > span svg {
  width: 25px;
  height: 25px;
}

.sf-domainberatung-choice-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-domainberatung-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-domainberatung-tld-grid,
  .sf-domainberatung-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-domainberatung-combo-box,
  .sf-domainberatung-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-domainberatung-tld-grid,
  .sf-domainberatung-steps {
    grid-template-columns: 1fr;
  }
}





/* =========================================================
   Service Fuchs dynamische TLD-Seiten
   URL: /domains/{tld}-domain/
========================================================= */
.sf-tld-dynamic-page {
  background: #fff;
}

.sf-tld-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-tld-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 44px;
  align-items: center;
  padding: 62px 0;
}

.sf-price-card--tld,
.sf-tld-sidebox {
  border-color: rgba(240,138,28,.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-tld-dynamic-page .sf-kicker,
.sf-tld-dynamic-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-tld-badges span {
  background: rgba(255,255,255,.82);
}

.sf-tld-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
}

.sf-domain-price-foot {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  color: inherit;
  vertical-align: super;
}

.sf-tld-image-section {
  padding-bottom: 0;
}

.sf-tld-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #dfe8f4;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(13,45,92,.10);
  background: #f6faff;
}

.sf-tld-db-content {
  max-width: 980px;
  margin: 0 auto;
  color: #435064;
  font-size: 16px;
  line-height: 1.75;
}

.sf-tld-db-content h2,
.sf-tld-db-content h3 {
  color: var(--sf-blue-dark);
  line-height: 1.18;
}

.sf-tld-db-content h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3vw, 40px);
}

.sf-tld-db-content h3 {
  margin: 28px 0 10px;
  font-size: 24px;
}

.sf-tld-db-content p {
  margin: 0 0 16px;
}

.sf-tld-db-content a {
  color: var(--sf-blue);
  font-weight: 900;
  text-decoration: underline;
}

.sf-tld-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-tld-combo-grid article {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-tld-combo-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-tld-combo-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-tld-combo-grid svg {
  width: 25px;
  height: 25px;
}

.sf-tld-combo-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-tld-combo-grid p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-tld-combo-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-tld-combo-grid a:hover {
  text-decoration: underline;
}

.sf-tld-related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sf-tld-related-grid a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-tld-related-grid a:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

.sf-tld-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 980px) {
  .sf-tld-hero__inner,
  .sf-tld-combo-grid {
    grid-template-columns: 1fr;
  }

  .sf-price-card--tld {
    max-width: 480px;
  }
}

@media (max-width: 680px) {
  .sf-tld-hero__inner {
    padding: 42px 0;
  }

  .sf-tld-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
}



/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V2
   Ergänzung: Alle Informationen / Tabs
========================================================= */
.sf-tld-all-info-section {
  background: #fff;
}
.sf-tld-tabs {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  overflow: hidden;
}
.sf-tld-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px;
  border-bottom: 1px solid #e8eef6;
  background: linear-gradient(90deg, #f8fbff 0%, #fff7ef 100%);
}
.sf-tld-tab {
  min-height: 42px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue-dark);
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.sf-tld-tab.is-active,
.sf-tld-tab:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}
.sf-tld-tab-panel {
  display: none;
  padding: clamp(22px, 3vw, 32px);
}
.sf-tld-tab-panel.is-active {
  display: block;
}
.sf-tld-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sf-tld-kv div {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 14px 16px;
}
.sf-tld-kv span,
.sf-tld-contract-grid article > span {
  color: var(--sf-blue-dark);
  font-size: 13px;
  font-weight: 900;
}
.sf-tld-kv strong {
  color: #435064;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sf-tld-contract-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.sf-tld-contract-grid article {
  min-height: 160px;
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.035);
}
.sf-tld-contract-grid article > span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-tld-contract-grid article > strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 24px;
  line-height: 1.15;
}
.sf-tld-contract-grid p {
  margin: 10px 0 0;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.5;
}
.sf-tld-kv--compact {
  grid-template-columns: repeat(3, 1fr);
}
.sf-tld-other-box {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #f8fbff;
  padding: 22px;
  color: #435064;
  line-height: 1.65;
}
.sf-tld-other-box p:last-child {
  margin-bottom: 0;
}
.sf-tld-other-box a {
  color: var(--sf-blue);
  font-weight: 900;
  text-decoration: underline;
}
@media (max-width: 1180px) {
  .sf-tld-contract-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-tld-kv, .sf-tld-kv--compact { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sf-tld-tab-buttons { display: grid; }
  .sf-tld-tab { width: 100%; }
  .sf-tld-kv div { grid-template-columns: 1fr; gap: 5px; }
  .sf-tld-contract-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V2.1
   Fix: Alle Informationen Tabs / Tabellen / Vertragskarten
========================================================= */

.sf-tld-all-info-section {
  background: #fff;
}

.sf-tld-tabs {
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13,45,92,.07);
  overflow: hidden;
}

.sf-tld-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #f8fbff;
  border-bottom: 1px solid #e8eef6;
}

.sf-tld-tab {
  min-height: 42px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue-dark);
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.sf-tld-tab.is-active,
.sf-tld-tab:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

.sf-tld-tab-panel {
  display: none;
  padding: clamp(22px, 3vw, 34px);
}

.sf-tld-tab-panel.is-active {
  display: block;
}

.sf-tld-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sf-tld-kv > div {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid #e1e9f3;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}

.sf-tld-kv span,
.sf-tld-contract-grid article > span {
  color: var(--sf-blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.sf-tld-kv strong {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
}

.sf-tld-contract-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.sf-tld-contract-grid article {
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.08), rgba(240,138,28,0) 42%),
    #fff;
  padding: 18px;
  min-height: 145px;
}

.sf-tld-contract-grid article > span {
  display: block;
  margin-bottom: 10px;
  color: var(--sf-orange);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-tld-contract-grid article > strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 22px;
  line-height: 1.2;
}

.sf-tld-contract-grid article p {
  margin: 10px 0 0;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

.sf-tld-kv--compact {
  grid-template-columns: repeat(3, 1fr);
}

.sf-tld-kv--compact > div {
  grid-template-columns: 1fr;
  gap: 5px;
}

.sf-tld-other-box {
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  color: #435064;
  line-height: 1.7;
}

.sf-tld-other-box ul {
  margin: 0;
  padding-left: 22px;
}

.sf-tld-other-box li {
  margin: 0 0 8px;
}

.sf-tld-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-tld-combo-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-tld-combo-grid article > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-tld-combo-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-tld-combo-grid p {
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.sf-tld-combo-grid a {
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-tld-related-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.sf-tld-related-grid a {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  font-size: 14px;
}

.sf-tld-related-grid a:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

@media (max-width: 1180px) {
  .sf-tld-contract-grid,
  .sf-tld-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-tld-kv {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .sf-tld-combo-grid,
  .sf-tld-kv--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sf-tld-tab-buttons {
    display: grid;
  }

  .sf-tld-tab {
    width: 100%;
  }

  .sf-tld-kv > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .sf-tld-contract-grid,
  .sf-tld-related-grid {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V3
   Bottom Domain Check + Rewrite-Hinweis
========================================================= */

.sf-tld-bottom-check-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-tld-bottom-check-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-tld-bottom-check-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.sf-tld-bottom-check-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-tld-bottom-check-form {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-tld-bottom-check-form label {
  display: block;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 9px;
}

.sf-tld-bottom-check-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 155px;
  gap: 10px;
}

.sf-tld-bottom-check-form input,
.sf-tld-bottom-check-form button {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font: inherit;
}

.sf-tld-bottom-check-form input {
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  padding: 0 14px;
}

.sf-tld-bottom-check-form button {
  border: 1px solid var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-tld-bottom-check-form small {
  display: block;
  margin-top: 10px;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .sf-tld-bottom-check-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sf-tld-bottom-check-form > div {
    grid-template-columns: 1fr;
  }
}












/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V3
   Bottom Domain Check + Rewrite-Hinweis
========================================================= */

.sf-tld-bottom-check-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-tld-bottom-check-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-tld-bottom-check-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.sf-tld-bottom-check-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-tld-bottom-check-form {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-tld-bottom-check-form label {
  display: block;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 9px;
}

.sf-tld-bottom-check-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 155px;
  gap: 10px;
}

.sf-tld-bottom-check-form input,
.sf-tld-bottom-check-form button {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font: inherit;
}

.sf-tld-bottom-check-form input {
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  padding: 0 14px;
}

.sf-tld-bottom-check-form button {
  border: 1px solid var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-tld-bottom-check-form small {
  display: block;
  margin-top: 10px;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .sf-tld-bottom-check-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sf-tld-bottom-check-form > div {
    grid-template-columns: 1fr;
  }
}







/* =========================================================
   Service Fuchs Hilfe Landingpage
   Optionaler CSS-Patch, falls die Hilfe-Karten noch nicht gestylt sind.
========================================================= */
.sf-help-page {
  background: #fff;
}

.sf-help-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--help,
.sf-help-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-help-page .sf-kicker,
.sf-help-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-help-badges span {
  background: rgba(255,255,255,.82);
}

.sf-help-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.sf-help-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-help-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-help-card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-help-card__icon svg {
  width: 27px;
  height: 27px;
}

.sf-help-card em {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-help-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 24px;
  line-height: 1.2;
}

.sf-help-card p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-help-card ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.sf-help-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #263446;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.sf-help-card li svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-help-card > strong {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sf-help-card > strong svg {
  width: 18px;
  height: 18px;
  color: var(--sf-orange);
}

.sf-help-quick-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-help-quick-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-help-quick-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-help-quick-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-help-quick-links {
  display: grid;
  gap: 12px;
}

.sf-help-quick-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-help-quick-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-help-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-help-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-help-quick-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-help-card-grid {
    grid-template-columns: 1fr;
  }

  .sf-help-card {
    min-height: auto;
  }
}





/* =========================================================
   Service Fuchs Kundenlogin / Kundenbereich
   Optionaler CSS-Patch, falls die Loginfelder noch nicht gestylt sind.
========================================================= */
.sf-login-page,
.sf-customer-page {
  background: #fff;
}

.sf-login-hero,
.sf-customer-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-login-card,
.sf-customer-card {
  border-color: rgba(240,138,28,.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-login-page .sf-kicker,
.sf-customer-page .sf-kicker,
.sf-login-page .sf-price-card__badge,
.sf-customer-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-login-form {
  display: grid;
  gap: 14px;
}

.sf-login-form label span:first-child {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 14px;
  font-weight: 850;
  margin-bottom: 7px;
}

.sf-login-form input {
  width: 100%;
  height: 48px;
  border: 1px solid #d7e0ec;
  border-radius: 10px;
  padding: 0 14px;
  color: #172033;
  font: inherit;
}

.sf-login-form input:focus {
  outline: none;
  border-color: rgba(240,138,28,.65);
  box-shadow: 0 0 0 4px rgba(240,138,28,.10);
}

.sf-password-wrap {
  position: relative;
  display: block;
}

.sf-password-wrap input {
  padding-right: 48px;
}

.sf-password-toggle {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.sf-password-toggle:hover {
  background: #f3f8ff;
}

.sf-login-error {
  margin: 0 0 16px;
  padding: 13px 15px;
  border: 1px solid rgba(185,28,28,.25);
  border-radius: 12px;
  background: #fff1f2;
  color: #991b1b;
  font-weight: 750;
}

.sf-login-note {
  margin-top: 14px !important;
  font-size: 13px !important;
}

.sf-customer-page .sf-history-numbers strong {
  font-size: 34px;
}




:root {
  --sf-orange: #F08A1C;
  --sf-blue: #0D2D5C;
  --sf-blue-dark: #07224A;
  --sf-gray: #8A8F98;
  --sf-text: #172033;
  --sf-muted: #5B6472;
  --sf-soft: #F3F8FF;
  --sf-line: #DDE5F0;
  --sf-white: #FFFFFF;
  --sf-shadow: 0 12px 30px rgba(13,45,92,.08);
  --sf-radius: 14px;
  --sf-container: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, Inter, "Segoe UI", Arial, sans-serif;
  color: var(--sf-text);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .accent { stroke: var(--sf-orange); }
.sf-container { width: min(var(--sf-container), calc(100% - 48px)); margin-inline: auto; }

.sf-header {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e7edf5;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.sf-header__inner {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.sf-brand { width: 265px; flex: 0 0 auto; }
.sf-brand img { width: 265px; max-height: 66px; object-fit: contain; object-position: left center; }
.sf-nav { margin-left: auto; }
.sf-menu { list-style: none; display: flex; gap: 34px; align-items: center; padding: 0; margin: 0; }
.sf-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #1a2941;
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.sf-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 99px;
  background: transparent;
}
.sf-menu a:hover::after,
.sf-menu a.is-active::after,
.sf-menu .current-menu-item > a::after { background: var(--sf-orange); }
.sf-header-actions { display: flex; gap: 12px; align-items: center; }
.sf-login-btn, .sf-cart-btn {
  min-height: 44px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  padding: 0 18px;
  border: 1px solid var(--sf-line);
}
.sf-login-btn { color: #fff; background: var(--sf-blue); box-shadow: 0 7px 18px rgba(13,45,92,.18); border-color: var(--sf-blue); }
.sf-cart-btn { color: #1b2740; background: #fff; }
.sf-nav-toggle { display: none; background: #fff; border: 1px solid var(--sf-line); border-radius: 8px; width: 44px; height: 42px; padding: 9px; }
.sf-nav-toggle span { display: block; height: 2px; background: var(--sf-blue); margin: 5px 0; border-radius: 4px; }

.sf-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #edf7ff 0%, #fff 38%, #fff 52%, #edf5ff 100%);
  border-bottom: 1px solid #eaf0f7;
}
.sf-hero__inner {
  min-height: 410px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 48px 0 42px;
  position: relative;
}
.sf-hero__content { max-width: 560px; z-index: 2; }
.sf-hero h1 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(36px, 4.3vw, 58px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  font-weight: 800;
}
.sf-hero p { margin: 0 0 26px; max-width: 525px; color: #263446; font-size: 18px; line-height: 1.55; }
.sf-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; }
.sf-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 8px;
  font-weight: 800;
  padding: 0 24px;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sf-btn:hover { transform: translateY(-1px); }
.sf-btn--primary { background: var(--sf-blue); color: #fff; box-shadow: 0 9px 22px rgba(13,45,92,.22); }
.sf-btn--outline { background: #fff; color: var(--sf-orange); border-color: var(--sf-orange); }
.sf-hero__visual { min-height: 330px; position: relative; display: flex; align-items: center; justify-content: center; }
.sf-hero__visual img { position: relative; z-index: 2; width: min(430px, 82%); filter: drop-shadow(0 16px 24px rgba(13,45,92,.14)); }
.sf-light { position: absolute; height: 12px; width: 760px; right: -360px; border-radius: 999px; filter: blur(.5px); opacity: .72; transform-origin: left center; }
.sf-light--one { top: 36%; background: linear-gradient(90deg, rgba(240,138,28,.05), rgba(240,138,28,.95), rgba(240,138,28,0)); transform: rotate(-20deg); }
.sf-light--two { top: 50%; background: linear-gradient(90deg, rgba(13,45,92,.03), rgba(108,164,255,.75), rgba(108,164,255,0)); transform: rotate(-7deg); }
.sf-light--three { top: 62%; background: linear-gradient(90deg, rgba(240,138,28,.05), rgba(255,190,115,.65), rgba(255,190,115,0)); transform: rotate(10deg); }

.sf-home-stack { background: #fff; padding: 30px 0 18px; }
.sf-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: -4px; }
.sf-service-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  min-height: 155px;
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  padding: 24px 22px;
  box-shadow: 0 10px 26px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-service-card:hover { transform: translateY(-2px); border-color: #cbd9ec; box-shadow: var(--sf-shadow); }
.sf-service-card__icon { color: var(--sf-blue); display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.sf-service-card__icon svg { width: 52px; height: 52px; stroke-width: 1.8; }
.sf-service-card__body { display: flex; flex-direction: column; gap: 7px; }
.sf-service-card strong { color: var(--sf-blue-dark); font-size: 19px; line-height: 1.2; }
.sf-service-card em { font-style: normal; color: #263446; font-size: 14px; line-height: 1.45; }
.sf-service-card span span { color: var(--sf-blue); font-weight: 800; font-size: 14px; margin-top: auto; }

.sf-trust-strip,
.sf-domain-search {
  margin-top: 24px;
  border: 1px solid var(--sf-line);
  background: linear-gradient(180deg,#f8fbff 0%,#f3f8ff 100%);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}
.sf-trust-strip { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 16px 28px; }
.sf-trust-strip__lead { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sf-trust-icon { width: 52px; height: 52px; flex: 0 0 auto; color: var(--sf-blue); display: grid; place-items: center; }
.sf-trust-icon svg { width: 48px; height: 48px; }
.sf-trust-strip strong { display: block; color: var(--sf-blue-dark); font-size: 17px; }
.sf-trust-strip span span { display: block; color: #3d4b5f; font-size: 14px; }
.sf-trust-strip__items { display: flex; align-items: center; gap: 0; margin-left: auto; }
.sf-trust-strip__items > div { min-width: 150px; display: flex; align-items: center; gap: 13px; padding: 0 22px; border-left: 1px solid #d5dfec; color: var(--sf-blue); }
.sf-trust-strip__items svg { width: 34px; height: 34px; }
.sf-trust-strip__items strong { font-size: 14px; line-height: 1.05; }
.sf-trust-strip__items span { color: #203047; font-size: 13px; line-height: 1.15; }

.sf-domain-search { min-height: 82px; display: grid; grid-template-columns: 390px 1fr; align-items: center; gap: 28px; padding: 16px 28px; background: #fff; }
.sf-domain-search__intro { display: flex; align-items: center; gap: 20px; }
.sf-domain-search__intro > span { color: var(--sf-blue); }
.sf-domain-search__intro svg { width: 50px; height: 50px; }
.sf-domain-search__intro strong { display: block; color: var(--sf-blue-dark); font-size: 17px; }
.sf-domain-search__intro em { display: block; color: #3d4b5f; font-style: normal; font-size: 14px; }
.sf-domain-search__fields { display: grid; grid-template-columns: 1fr 130px 160px; gap: 0; }
.sf-domain-search input, .sf-domain-search select, .sf-domain-search button {
  height: 48px;
  font: inherit;
  border: 1px solid #d7e0ec;
  background: #fff;
}
.sf-domain-search input { border-radius: 7px 0 0 7px; padding: 0 20px; color: #1d2a3c; }
.sf-domain-search select { border-left: 0; padding: 0 18px; color: #15233a; font-weight: 700; }
.sf-domain-search button { border-radius: 7px; margin-left: 18px; background: var(--sf-blue); color: #fff; font-weight: 800; border-color: var(--sf-blue); display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 8px 20px rgba(13,45,92,.16); }

.sf-footer { margin-top: 0; border-top: 1px solid #e5ecf5; background: #f9fbfe; }
.sf-footer__grid { display: grid; grid-template-columns: 1.45fr .8fr .85fr .85fr 1.45fr; gap: 44px; padding: 28px 0 24px; }
.sf-footer__brand img { width: 240px; margin-bottom: 14px; }
.sf-footer__brand p, .sf-footer__col a, .sf-footer__contact p, .sf-footer__bottom { color: #435064; font-size: 14px; }
.sf-footer h3 { color: var(--sf-blue-dark); margin: 0 0 14px; font-size: 15px; }
.sf-footer__col { display: flex; flex-direction: column; gap: 8px; }
.sf-footer__col a:hover, .sf-footer__contact a:hover, .sf-footer__bottom a { color: var(--sf-blue); text-decoration: underline; }
.sf-socials { display: flex; gap: 10px; margin-top: 18px; }
.sf-socials a { width: 30px; height: 30px; border-radius: 50%; background: var(--sf-blue); color: #fff; display: grid; place-items: center; }
.sf-socials svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sf-footer__contact p { margin: 0 0 12px; display: flex; gap: 12px; align-items: flex-start; }
.sf-footer__contact svg { color: var(--sf-blue); width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
.sf-footer__bottom { border-top: 1px solid #e5ecf5; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 14px 24px 18px; font-size: 13px; }
.sf-footer__bottom span:not(:last-child)::after { content: "|"; margin-left: 20px; color: #a0a8b4; }

.sf-page-hero { background: linear-gradient(90deg, #f3f8ff, #fff); border-bottom: 1px solid #e7edf5; padding: 52px 0; }
.sf-page-hero h1 { margin: 0; color: var(--sf-blue-dark); font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.sf-page-content { padding: 42px 0 64px; background: #fff; }
.sf-content-card { background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); padding: clamp(24px, 4vw, 48px); }
.sf-content-card h2, .sf-content-card h3 { color: var(--sf-blue-dark); }
.sf-content-card a { color: var(--sf-blue); text-decoration: underline; }

@media (max-width: 1180px) {
  .sf-header__inner { gap: 18px; }
  .sf-brand, .sf-brand img { width: 225px; }
  .sf-menu { gap: 22px; }
  .sf-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-trust-strip { align-items: flex-start; flex-direction: column; }
  .sf-trust-strip__items { width: 100%; margin-left: 0; }
  .sf-trust-strip__items > div:first-child { border-left: 0; padding-left: 0; }
  .sf-domain-search { grid-template-columns: 1fr; }
  .sf-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
@media (max-width: 920px) {
  .sf-header__inner { min-height: 74px; width: min(100% - 30px, 1320px); }
  .sf-brand, .sf-brand img { width: 205px; }
  .sf-nav-toggle { display: block; margin-left: auto; }
  .sf-nav { display: none; position: absolute; left: 15px; right: 15px; top: 74px; background: #fff; border: 1px solid var(--sf-line); border-radius: 12px; box-shadow: var(--sf-shadow); padding: 14px; }
  .sf-nav.is-open { display: block; }
  .sf-menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .sf-menu a { min-height: 40px; padding: 0 10px; }
  .sf-header-actions { display: none; }
  .sf-hero__inner { grid-template-columns: 1fr; padding: 38px 0 28px; }
  .sf-hero__visual { min-height: 230px; order: -1; opacity: .96; }
  .sf-hero__content { max-width: 100%; }
  .sf-hero p { font-size: 16px; }
  .sf-domain-search__fields { grid-template-columns: 1fr; gap: 10px; }
  .sf-domain-search input, .sf-domain-search select, .sf-domain-search button { border-radius: 7px; border: 1px solid #d7e0ec; margin: 0; }
}
@media (max-width: 680px) {
  .sf-container { width: min(100% - 28px, var(--sf-container)); }
  .sf-card-grid { grid-template-columns: 1fr; gap: 16px; }
  .sf-service-card { min-height: auto; }
  .sf-trust-strip__items { flex-direction: column; align-items: stretch; }
  .sf-trust-strip__items > div { border-left: 0; border-top: 1px solid #d5dfec; padding: 14px 0 0; min-width: 0; }
  .sf-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .sf-footer__bottom { display: block; text-align: center; }
  .sf-footer__bottom span { display: block; margin: 5px 0; }
  .sf-footer__bottom span:not(:last-child)::after { content: none; }
}

/* Service Fuchs V2 Feinschliff nach erstem Live-Screenshot */
.sf-header__inner {
  min-height: 104px;
  width: min(1320px, calc(100% - 58px));
}
.sf-brand { width: 330px; }
.sf-brand img {
  width: 330px;
  max-height: 86px;
  object-fit: contain;
  object-position: left center;
}
.sf-menu { gap: 32px; }
.sf-login-btn, .sf-cart-btn { min-height: 46px; }

.sf-hero {
  background:
    radial-gradient(circle at 79% 28%, rgba(240,138,28,.28) 0%, rgba(240,138,28,.13) 18%, rgba(240,138,28,0) 42%),
    radial-gradient(circle at 94% 48%, rgba(90,145,230,.30) 0%, rgba(90,145,230,.14) 22%, rgba(90,145,230,0) 48%),
    linear-gradient(90deg, #eaf6ff 0%, #f7fbff 30%, #ffffff 48%, #eef6ff 100%);
}
.sf-hero::before,
.sf-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  width: 52vw;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  opacity: .92;
  filter: blur(.3px);
  transform-origin: left center;
}
.sf-hero::before {
  top: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(240,138,28,.74), rgba(255,214,154,.18));
  transform: rotate(-21deg);
}
.sf-hero::after {
  top: 53%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(85,147,240,.65), rgba(190,216,255,.12));
  transform: rotate(-7deg);
}
.sf-hero__inner {
  min-height: 470px;
  grid-template-columns: minmax(590px, .98fr) 1.02fr;
  gap: 32px;
  padding: 50px 0 44px;
}
.sf-hero__content { max-width: 650px; }
.sf-hero h1 {
  font-size: clamp(38px, 3.85vw, 54px);
  line-height: 1.11;
  letter-spacing: -1.35px;
}
.sf-hero p { max-width: 565px; }
.sf-hero__visual {
  min-height: 360px;
  overflow: visible;
  justify-content: center;
}
.sf-hero__visual img {
  width: min(470px, 88%);
  max-height: 390px;
  object-fit: contain;
  object-position: center;
}
.sf-light {
  right: -300px;
  width: 820px;
  height: 14px;
  opacity: .88;
}
.sf-light--one { top: 29%; transform: rotate(-20deg); }
.sf-light--two { top: 47%; transform: rotate(-7deg); }
.sf-light--three { top: 64%; transform: rotate(11deg); }

.sf-home-stack { padding-top: 26px; }
.sf-footer__brand img { width: 255px; }
.sf-socials a[aria-label="Instagram"] svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (max-width: 1180px) {
  .sf-header__inner { min-height: 92px; }
  .sf-brand, .sf-brand img { width: 270px; }
  .sf-hero__inner { grid-template-columns: 1fr 1fr; }
  .sf-hero h1 { font-size: clamp(36px, 4vw, 48px); }
}
@media (max-width: 920px) {
  .sf-header__inner { min-height: 78px; }
  .sf-brand, .sf-brand img { width: 220px; }
  .sf-nav { top: 78px; }
  .sf-hero__inner { grid-template-columns: 1fr; min-height: auto; padding: 34px 0 30px; }
  .sf-hero__visual { order: -1; min-height: 220px; }
  .sf-hero__visual img { width: min(310px, 75%); max-height: 280px; }
  .sf-hero h1 { font-size: clamp(34px, 8vw, 46px); }
}
@media (max-width: 680px) {
  .sf-header__inner { width: min(100% - 28px, 1320px); }
  .sf-brand, .sf-brand img { width: 190px; }
  .sf-hero h1 br { display: none; }
}
















.sf-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 38%;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(14deg, transparent 52%, rgba(240,138,28,0.42) 53%, transparent 55%),
    linear-gradient(20deg, transparent 54%, rgba(240,138,28,0.34) 55%, transparent 57%),
    linear-gradient(26deg, transparent 56%, rgba(255,170,70,0.30) 57%, transparent 59%),
    linear-gradient(2deg, transparent 48%, rgba(90,145,230,0.30) 49%, transparent 51%),
    linear-gradient(6deg, transparent 50%, rgba(13,45,92,0.22) 51%, transparent 53%),
    linear-gradient(-3deg, transparent 49%, rgba(130,175,245,0.24) 50%, transparent 52%),
    linear-gradient(10deg, transparent 47%, rgba(255,255,255,0.55) 48%, transparent 50%),
    linear-gradient(-10deg, transparent 50%, rgba(255,255,255,0.42) 51%, transparent 53%),
    linear-gradient(-14deg, transparent 55%, rgba(240,138,28,0.28) 56%, transparent 58%),
    linear-gradient(-20deg, transparent 57%, rgba(255,180,90,0.22) 58%, transparent 60%);
}
/* =========================================================
   Service Fuchs Webspace-Seite /webspace/
   Datei kann unten an assets/css/servicefuchs.css angehängt werden.
========================================================= */
.sf-webspace-page {
  background: #fff;
}
.sf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sf-orange);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sf-section-head {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}
.sf-section-head h2,
.sf-ws-trust h2,
.sf-ws-contract h2,
.sf-ws-closing h2 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.9px;
}
.sf-section-head p,
.sf-ws-contract p,
.sf-ws-closing p {
  margin: 0;
  color: #3d4b5f;
  font-size: 17px;
}

.sf-ws-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e7edf5;
  background:
    radial-gradient(circle at 86% 26%, rgba(240,138,28,.18), rgba(240,138,28,0) 35%),
    radial-gradient(circle at 92% 66%, rgba(100,155,235,.20), rgba(100,155,235,0) 38%),
    linear-gradient(90deg, #eaf6ff 0%, #f8fbff 46%, #fff 100%);
}
.sf-ws-hero__inner {
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  align-items: center;
  gap: 48px;
  padding: 58px 0;
}
.sf-ws-hero__content h1 {
  margin: 0 0 16px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.35px;
  font-weight: 850;
}
.sf-ws-hero__content p {
  margin: 0 0 26px;
  color: #263446;
  max-width: 690px;
  font-size: 18px;
  line-height: 1.58;
}
.sf-ws-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sf-ws-hero__panel {
  border: 1px solid var(--sf-line);
  background: rgba(255,255,255,.82);
  box-shadow: var(--sf-shadow);
  border-radius: 18px;
  padding: 26px;
  display: grid;
  gap: 14px;
  backdrop-filter: blur(10px);
}
.sf-ws-proof {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e1e9f3;
  padding-bottom: 13px;
}
.sf-ws-proof:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-ws-proof strong { color: var(--sf-blue-dark); font-size: 24px; line-height: 1; }
.sf-ws-proof span { color: #4b596c; font-size: 14px; text-align: right; }

.sf-ws-trust,
.sf-ws-packages,
.sf-ws-addons,
.sf-ws-faq {
  padding: 54px 0;
}
.sf-ws-trust { background: #fff; }
.sf-ws-trust h2 { text-align: center; margin-bottom: 28px; }
.sf-ws-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sf-ws-trust-grid article,
.sf-ws-addon-card,
.sf-ws-package {
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
  box-shadow: 0 10px 26px rgba(13,45,92,.045);
}
.sf-ws-trust-grid article {
  padding: 24px;
}
.sf-ws-trust-grid span {
  color: var(--sf-blue);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.sf-ws-trust-grid svg { width: 48px; height: 48px; }
.sf-ws-trust-grid h3,
.sf-ws-addon-card h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: 19px;
}
.sf-ws-trust-grid p,
.sf-ws-addon-card p {
  margin: 0;
  color: #3d4b5f;
  font-size: 14px;
  line-height: 1.55;
}

.sf-ws-packages {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  border-top: 1px solid #edf3fa;
  border-bottom: 1px solid #edf3fa;
}
.sf-ws-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.sf-ws-package {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px;
  min-height: 520px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-ws-package:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: #cbd9ec;
}
.sf-ws-package.is-recommended {
  border-color: rgba(240,138,28,.55);
  box-shadow: 0 18px 42px rgba(13,45,92,.10);
}
.sf-ws-package.is-premium {
  background: linear-gradient(180deg, #0D2D5C 0%, #07224A 100%);
  color: #fff;
  border-color: #0D2D5C;
}
.sf-ws-package.is-premium h3,
.sf-ws-package.is-premium p,
.sf-ws-package.is-premium .sf-ws-price,
.sf-ws-package.is-premium .sf-ws-features li { color: #fff; }
.sf-ws-package.is-premium .sf-ws-package__badge { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.sf-ws-package__badge {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid rgba(240,138,28,.34);
  background: #fff7ef;
  color: var(--sf-orange);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 14px;
}
.sf-ws-package h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}
.sf-ws-package__top p {
  margin: 0;
  color: #3d4b5f;
  font-size: 14px;
  line-height: 1.55;
  min-height: 88px;
}
.sf-ws-price {
  margin: 22px 0 18px;
  color: var(--sf-blue-dark);
  font-size: 44px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -1px;
}
.sf-ws-price span { font-size: 22px; margin-right: 3px; vertical-align: super; }
.sf-ws-price em {
  display: block;
  margin-top: 7px;
  color: #5b6472;
  font-style: normal;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}
.sf-ws-package.is-premium .sf-ws-price em { color: rgba(255,255,255,.76); }
.sf-ws-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 11px;
}
.sf-ws-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #263446;
  font-size: 14px;
  line-height: 1.35;
}
.sf-ws-features span {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f4f9ff;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
}
.sf-ws-package__cta {
  margin-top: auto;
  min-height: 46px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 800;
  padding: 0 18px;
  box-shadow: 0 8px 20px rgba(13,45,92,.16);
}
.sf-ws-package.is-premium .sf-ws-package__cta {
  background: #fff;
  color: var(--sf-blue-dark);
}
.sf-ws-price-note {
  margin: 18px 0 0;
  text-align: center;
  color: #5b6472;
  font-size: 13px;
}

.sf-ws-compare { padding: 34px 0; background: #fff; }
.sf-ws-compare-toggle {
  width: 100%;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: #f8fbff;
  color: var(--sf-blue-dark);
  min-height: 56px;
  padding: 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.sf-ws-compare-panel {
  margin-top: 18px;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.sf-ws-table-wrap { overflow-x: auto; }
.sf-ws-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.sf-ws-table th,
.sf-ws-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #e8eef6;
  text-align: left;
  font-size: 14px;
}
.sf-ws-table th { background: #f3f8ff; color: var(--sf-blue-dark); }
.sf-ws-table td:not(:first-child) { font-weight: 750; color: var(--sf-blue-dark); }
.sf-ws-compare-note { margin: 0; padding: 16px 18px; color: #5b6472; font-size: 14px; }

.sf-ws-addons { background: #fff; }
.sf-ws-addon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sf-ws-addon-card { padding: 23px; }
.sf-ws-addon-card strong {
  display: inline-flex;
  margin-top: 14px;
  color: var(--sf-orange);
  font-size: 14px;
}

.sf-ws-contract {
  padding: 48px 0;
  background: linear-gradient(90deg, #eaf6ff 0%, #fff 100%);
  border-top: 1px solid #edf3fa;
  border-bottom: 1px solid #edf3fa;
}
.sf-ws-contract__box {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 34px;
  align-items: center;
}
.sf-ws-contract ul {
  list-style: none;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  display: grid;
  gap: 12px;
}
.sf-ws-contract li {
  display: flex;
  gap: 10px;
  color: var(--sf-blue-dark);
  font-weight: 750;
}
.sf-ws-contract li span { color: var(--sf-orange); }

.sf-ws-faq { background: #fff; }
.sf-ws-faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.sf-ws-faq-item {
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.sf-ws-faq-item summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--sf-blue-dark);
  font-weight: 850;
}
.sf-ws-faq-item div {
  padding: 0 20px 18px;
  color: #3d4b5f;
  line-height: 1.6;
}

.sf-ws-closing {
  padding: 56px 0 64px;
  background: #f8fbff;
}
.sf-ws-closing__box {
  border-radius: 18px;
  border: 1px solid var(--sf-line);
  background: #fff;
  box-shadow: var(--sf-shadow);
  padding: clamp(28px, 4vw, 46px);
  text-align: center;
}
.sf-ws-closing__box p {
  max-width: 720px;
  margin: 0 auto 24px;
}
.sf-ws-closing .sf-ws-hero__actions {
  justify-content: center;
}

@media (max-width: 1180px) {
  .sf-ws-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .sf-ws-hero__panel { grid-template-columns: repeat(3, 1fr); }
  .sf-ws-proof { display: block; text-align: center; border-bottom: 0; padding: 0; }
  .sf-ws-proof span { display: block; text-align: center; margin-top: 5px; }
  .sf-ws-trust-grid, .sf-ws-addon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .sf-ws-package-grid { grid-template-columns: 1fr; }
  .sf-ws-package { min-height: auto; }
  .sf-ws-package__top p { min-height: 0; }
  .sf-ws-contract__box { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sf-ws-hero__inner { padding: 38px 0; }
  .sf-ws-hero__panel { grid-template-columns: 1fr; }
  .sf-ws-trust-grid, .sf-ws-addon-grid { grid-template-columns: 1fr; }
  .sf-ws-hero__actions { display: grid; }
  .sf-ws-hero__actions .sf-btn { width: 100%; }
}






/* =========================================================
   Internet Service Fuchs STRAHL
   Für Überschriften: class="isf-strahl"
   Farbwelt: Fuchs-Orange + warmes Gelb, dezent auf Service-Fuchs CI
   ========================================================= */
.isf-status-section-title,
.isf-strahl {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}

.isf-status-section-title::after,
.isf-strahl::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 64% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(240,138,28,1) 0%,
    rgba(255,190,72,.92) 45%,
    rgba(240,138,28,0) 100%
  ) !important;
}

/* Wenn der Strahl in zentrierten Bereichen steht, bleibt er optisch ruhig. */
.sf-section-head .isf-strahl,
.sf-ws-trust > .sf-container > .isf-strahl,
.sf-ws-closing__box .isf-strahl {
  margin-left: auto;
  margin-right: auto;
}






/* =========================================================
   Service Fuchs Webspace V3
   Add-on-Seiten / WordPress-Fokus
   ========================================================= */
.sf-ws-wordpress-focus {
  margin: 0 0 24px;
  border: 1px solid rgba(240,138,28,.28);
  background:
    radial-gradient(circle at 92% 20%, rgba(240,138,28,.16), rgba(240,138,28,0) 38%),
    linear-gradient(90deg, #fffaf3 0%, #ffffff 54%, #f4f9ff 100%);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 26px;
}
.sf-ws-wordpress-focus h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.13;
  letter-spacing: -.5px;
}
.sf-ws-wordpress-focus p {
  margin: 0;
  color: #3d4b5f;
  font-size: 16px;
  line-height: 1.6;
  max-width: 800px;
}
.sf-ws-addon-card--link {
  display: flex;
  flex-direction: column;
  min-height: 235px;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-ws-addon-card--link:hover {
  transform: translateY(-2px);
  border-color: rgba(240,138,28,.40);
  box-shadow: var(--sf-shadow);
}
.sf-ws-addon-card.is-highlight {
  border-color: rgba(240,138,28,.45);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-ws-addon-card__link {
  display: inline-flex;
  margin-top: auto;
  padding-top: 16px;
  color: var(--sf-blue);
  font-size: 14px;
  font-weight: 850;
}
.sf-ws-addon-card strong {
  margin-top: 12px;
}
@media (max-width: 920px) {
  .sf-ws-wordpress-focus {
    grid-template-columns: 1fr;
  }
  .sf-ws-wordpress-focus .sf-btn {
    width: 100%;
  }
}


/* =========================================================
   Service Fuchs Starter Webspace Detailseite
   ========================================================= */
.sf-product-detail {
  background: #fff;
}
.sf-detail-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.14), rgba(240,138,28,0) 34%),
    radial-gradient(circle at 92% 70%, rgba(90,145,230,.16), rgba(90,145,230,0) 38%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #f6fbff 100%);
}
.sf-detail-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 44px;
  align-items: center;
  padding: 62px 0;
}
.sf-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: #eaf6ff;
  color: var(--sf-blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
.sf-detail-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
}
.sf-detail-hero p {
  max-width: 720px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}
.sf-detail-hero__actions,
.sf-detail-closing__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.sf-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.sf-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8e4f1;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #22324a;
  font-size: 13px;
  font-weight: 700;
}
.sf-detail-meta svg { width: 17px; height: 17px; color: var(--sf-orange); }
.sf-price-card {
  border: 1px solid #dce6f2;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 45px rgba(13,45,92,.12);
  padding: 28px;
}
.sf-price-card__badge {
  display: inline-flex;
  padding: 6px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(240,138,28,.12);
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-price-card h2 { margin: 0 0 12px; color: var(--sf-blue-dark); font-size: 31px; }
.sf-price-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.sf-price-card__price strong { color: var(--sf-blue-dark); font-size: 42px; line-height: 1; }
.sf-price-card__price span { color: #667085; font-weight: 700; }
.sf-price-card p { color: #415066; margin: 0 0 20px; }
.sf-price-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 11px; }
.sf-price-card li { display: flex; gap: 9px; align-items: center; color: #22324a; font-weight: 700; font-size: 14px; }
.sf-price-card li svg { color: var(--sf-orange); width: 18px; height: 18px; flex: 0 0 auto; }
.sf-price-card__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  border-radius: 8px;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(13,45,92,.20);
}
.sf-price-card small { display: block; margin-top: 14px; color: #667085; font-size: 12px; line-height: 1.45; }
.sf-detail-section { padding: 58px 0; }
.sf-detail-section--soft { background: #f6faff; border-block: 1px solid #e8eef6; }
.sf-section-head { max-width: 820px; margin-bottom: 28px; }
.sf-section-head h2,
.sf-split h2,
.sf-history-box h2 { margin: 0 0 14px; color: var(--sf-blue-dark); font-size: clamp(28px, 3vw, 40px); line-height: 1.14; }
.sf-section-head p,
.sf-split p,
.sf-history-box p { margin: 0 0 14px; color: #435064; font-size: 16px; line-height: 1.7; }
.sf-feature-grid { display: grid; gap: 20px; }
.sf-feature-grid--six { grid-template-columns: repeat(3, 1fr); }
.sf-feature-box {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-feature-box > svg { width: 42px; height: 42px; color: var(--sf-blue); margin-bottom: 14px; }
.sf-feature-box strong { display: block; color: var(--sf-blue-dark); font-size: 18px; margin-bottom: 8px; }
.sf-feature-box span { display: block; color: #435064; font-size: 14px; line-height: 1.55; }
.sf-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: center; }
.sf-info-panel {
  border-radius: 16px;
  border: 1px solid #dbe7f4;
  background: #fff;
  padding: 26px;
  box-shadow: 0 12px 28px rgba(13,45,92,.06);
}
.sf-info-panel strong { display: block; color: var(--sf-orange); font-size: 15px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.sf-info-panel .sf-btn { width: 100%; margin-top: 10px; }
.sf-text-link { color: var(--sf-blue); font-weight: 900; text-decoration: none; }
.sf-text-link:hover { text-decoration: underline; }
.sf-compare-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sf-mini-package {
  border: 1px solid #dfe8f4;
  border-radius: 15px;
  background: #fff;
  padding: 24px;
}
.sf-mini-package.is-current { border-color: rgba(240,138,28,.45); box-shadow: 0 12px 28px rgba(240,138,28,.10); }
.sf-mini-package > span { color: var(--sf-orange); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.sf-mini-package h3 { color: var(--sf-blue-dark); margin: 8px 0 8px; font-size: 24px; }
.sf-mini-package p { color: #435064; margin: 0 0 14px; min-height: 72px; }
.sf-mini-package strong { display: block; color: var(--sf-blue-dark); margin-bottom: 10px; }
.sf-mini-package a { color: var(--sf-blue); font-weight: 900; }
.sf-addon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sf-addon-tile {
  display: block;
  padding: 22px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-addon-tile strong { display: block; color: var(--sf-blue-dark); font-size: 18px; margin-bottom: 8px; }
.sf-addon-tile span { color: #435064; font-size: 14px; line-height: 1.55; }
.sf-addon-tile:hover { border-color: rgba(240,138,28,.50); transform: translateY(-1px); }
.sf-history-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: 34px;
  background: linear-gradient(90deg, #fff 0%, #f7fbff 100%);
}
.sf-history-numbers { display: grid; gap: 14px; }
.sf-history-numbers div { border-radius: 14px; background: #fff; border: 1px solid #dbe7f4; padding: 20px; }
.sf-history-numbers strong { display: block; color: var(--sf-orange); font-size: 36px; line-height: 1; }
.sf-history-numbers span { color: #435064; font-weight: 700; }
.sf-faq-list { display: grid; gap: 12px; }
.sf-faq-item { border: 1px solid #dfe8f4; border-radius: 12px; background: #fff; overflow: hidden; }
.sf-faq-item summary { cursor: pointer; padding: 18px 20px; color: var(--sf-blue-dark); font-weight: 900; }
.sf-faq-item div { padding: 0 20px 18px; color: #435064; line-height: 1.65; }
.sf-detail-closing { background: var(--sf-blue-dark); color: #fff; padding: 42px 0; }
.sf-detail-closing__inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.sf-detail-closing h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 38px); }
.sf-detail-closing p { margin: 0; color: rgba(255,255,255,.82); }
.sf-detail-closing .sf-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
@media (max-width: 980px) {
  .sf-detail-hero__inner,
  .sf-split,
  .sf-history-box { grid-template-columns: 1fr; }
  .sf-price-card { max-width: 480px; }
  .sf-feature-grid--six,
  .sf-compare-cards,
  .sf-addon-row { grid-template-columns: 1fr 1fr; }
  .sf-detail-closing__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .sf-detail-hero__inner { padding: 42px 0; }
  .sf-detail-hero h1 { font-size: clamp(34px, 9vw, 44px); }
  .sf-feature-grid--six,
  .sf-compare-cards,
  .sf-addon-row { grid-template-columns: 1fr; }
  .sf-detail-section { padding: 42px 0; }
  .sf-history-box { padding: 24px; }
}














/* Service Fuchs Dropdown-Menü */
.sf-menu li {
  position: relative;
}

.sf-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(13,45,92,.14);
  z-index: 999;
}

.sf-menu li:hover > .sub-menu,
.sf-menu li:focus-within > .sub-menu {
  display: block;
}

.sf-menu .sub-menu a {
  display: flex;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 13px;
}

.sf-menu .sub-menu a:hover {
  background: #f3f8ff;
  color: var(--sf-blue);
}

.sf-menu .sub-menu a::after {
  display: none;
}

@media (max-width: 920px) {
  .sf-menu .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    padding: 4px 0 4px 18px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}


/* =========================================================
   Service Fuchs Business Webspace Detailseite
   Ergänzung zu servicefuchs.css
========================================================= */
.sf-business-page .sf-price-card__badge,
.sf-business-page .sf-kicker {
  background: #fff7ef;
  color: #b75f00;
}
.sf-business-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 92% 72%, rgba(90,145,230,.18), rgba(90,145,230,0) 38%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--business {
  border-color: rgba(240,138,28,.42);
  box-shadow: 0 20px 48px rgba(13,45,92,.12), 0 0 0 4px rgba(240,138,28,.06);
}
.sf-business-page .sf-addon-row {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1180px) {
  .sf-business-page .sf-addon-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .sf-business-page .sf-addon-row { grid-template-columns: 1fr; }
}




/* =========================================================
   Service Fuchs Professional Webspace Detailseite
   Zusätzlicher Feinschliff zu bestehenden Detailseiten-Klassen
========================================================= */
.sf-professional-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 92% 70%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #f6fbff 100%);
}
.sf-price-card--professional {
  border-color: rgba(13,45,92,.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 38%),
    #fff;
}
.sf-professional-page .sf-price-card__badge {
  background: rgba(13,45,92,.10);
  color: var(--sf-blue-dark);
}
.sf-mini-package--professional {
  border-color: rgba(13,45,92,.36);
  box-shadow: 0 12px 28px rgba(13,45,92,.10);
}
.sf-professional-page .sf-addon-row {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  .sf-professional-page .sf-addon-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .sf-professional-page .sf-addon-row { grid-template-columns: 1fr; }
}




/* =========================================================
   Service Fuchs Website Builder / Baukasten
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */

.sf-builder-page .sf-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.16), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 70%, rgba(90,145,230,.18), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-builder-hero .sf-price-card {
  border-color: rgba(240,138,28,.32);
}

.sf-builder-steps {
  display: grid;
  gap: 14px;
}

.sf-builder-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-builder-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-builder-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-builder-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-builder-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-builder-choice-card {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  display: flex;
  flex-direction: column;
  min-height: 430px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-builder-choice-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-builder-choice-card.is-current {
  border-color: rgba(240,138,28,.48);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-builder-choice-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-builder-choice-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}

.sf-builder-choice-card p {
  margin: 0 0 18px;
  color: #435064;
  line-height: 1.62;
}

.sf-builder-choice-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 9px;
}

.sf-builder-choice-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
}

.sf-builder-choice-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-builder-choice-card a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .sf-builder-choice-grid {
    grid-template-columns: 1fr;
  }
  .sf-builder-choice-card {
    min-height: auto;
  }
}



/* =========================================================
   Service Fuchs WordPress Add-on
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-wordpress-page .sf-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 70%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--wordpress {
  border-color: rgba(240,138,28,.36);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 38%),
    #fff;
}
.sf-wordpress-page .sf-kicker,
.sf-wordpress-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-wp-badges span {
  background: rgba(255,255,255,.78);
}
.sf-wordpress-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-wordpress-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-wordpress-badge-section {
  background: #fff;
}
.sf-wp-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-wp-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-wp-usecase-grid article:hover {
  border-color: rgba(240,138,28,.44);
  transform: translateY(-1px);
}
.sf-wp-usecase-grid span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-wp-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-wp-usecase-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}
.sf-wp-steps {
  display: grid;
  gap: 14px;
}
.sf-wp-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-wp-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
.sf-wp-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}
.sf-wp-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}
.sf-wp-combo-cards .sf-mini-package.is-current {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-wp-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-wp-usecase-grid,
  .sf-wp-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 780px) {
  .sf-wp-usecase-grid,
  .sf-wp-related-row {
    grid-template-columns: 1fr;
  }
  .sf-wordpress-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
/* =========================================================
   Service Fuchs WooCommerce Add-on
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-woocommerce-page .sf-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 70%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--woocommerce {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-woocommerce-page .sf-kicker,
.sf-woocommerce-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-wc-badges span {
  background: rgba(255,255,255,.78);
}
.sf-woocommerce-intro .sf-info-panel,
.sf-woocommerce-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-woocommerce-feature-grid .sf-feature-box {
  min-height: 230px;
}
.sf-woocommerce-badge-section {
  background: #fff;
}
.sf-wc-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-wc-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-wc-usecase-grid article:hover {
  border-color: rgba(240,138,28,.44);
  transform: translateY(-1px);
}
.sf-wc-usecase-grid span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-wc-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-wc-usecase-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}
.sf-wc-steps {
  display: grid;
  gap: 14px;
}
.sf-wc-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-wc-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
.sf-wc-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}
.sf-wc-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}
.sf-wc-combo-cards .sf-mini-package.is-current {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-wc-notice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-wc-notice-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}
.sf-wc-notice-grid svg {
  width: 42px;
  height: 42px;
  color: var(--sf-blue);
  margin-bottom: 14px;
}
.sf-wc-notice-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 18px;
  margin-bottom: 8px;
}
.sf-wc-notice-grid span {
  display: block;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}
.sf-wc-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-wc-usecase-grid,
  .sf-wc-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-wc-notice-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .sf-wc-usecase-grid,
  .sf-wc-related-row {
    grid-template-columns: 1fr;
  }
  .sf-woocommerce-feature-grid .sf-feature-box {
    min-height: auto;
  }
}








/* =========================================================
   Service Fuchs PHP Legacy Support
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-legacy-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--legacy {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-legacy-page .sf-kicker,
.sf-legacy-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-legacy-badges span {
  background: rgba(255,255,255,.80);
}
.sf-legacy-intro .sf-info-panel,
.sf-legacy-sidebox,
.sf-legacy-warningbox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-legacy-version-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-legacy-version-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-legacy-version-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-legacy-version-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-legacy-version-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 24px;
  letter-spacing: -.3px;
}
.sf-legacy-version-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}
.sf-legacy-version-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 25px;
  margin: 0 0 15px;
}
.sf-legacy-version-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 9px;
}
.sf-legacy-version-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.sf-legacy-version-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}
.sf-legacy-version-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-legacy-version-card a:hover {
  text-decoration: underline;
}
.sf-legacy-version-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-legacy-version-card.is-standard {
  border-color: rgba(13,45,92,.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.11), rgba(90,145,230,0) 42%),
    #fff;
}
.sf-legacy-version-card.is-standard > span {
  background: #eaf6ff;
  color: var(--sf-blue);
}
.sf-legacy-version-card.is-old {
  border-color: rgba(13,45,92,.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(13,45,92,.09), rgba(13,45,92,0) 42%),
    #fff;
}
.sf-legacy-feature-grid .sf-feature-box {
  min-height: 230px;
}
.sf-legacy-compat-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.sf-legacy-compat-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #263446;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.45;
}
.sf-legacy-compat-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--sf-orange);
  margin-top: 1px;
}
.sf-legacy-path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-legacy-path-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  display: flex;
  flex-direction: column;
  min-height: 315px;
}
.sf-legacy-path-grid article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 14px;
}
.sf-legacy-path-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-legacy-path-grid p {
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sf-legacy-path-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-legacy-path-grid a:hover {
  text-decoration: underline;
}
.sf-legacy-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-legacy-version-grid,
  .sf-legacy-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-legacy-path-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .sf-legacy-version-grid,
  .sf-legacy-related-row {
    grid-template-columns: 1fr;
  }
  .sf-legacy-version-card,
  .sf-legacy-path-grid article,
  .sf-legacy-feature-grid .sf-feature-box {
    min-height: auto;
  }
}




/* =========================================================
   Service Fuchs Premium SSL
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-ssl-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--ssl {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-ssl-page .sf-kicker,
.sf-ssl-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-ssl-badges span {
  background: rgba(255,255,255,.80);
}
.sf-ssl-intro .sf-info-panel,
.sf-ssl-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-ssl-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.sf-ssl-product-card {
  display: flex;
  flex-direction: column;
  min-height: 470px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-ssl-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-ssl-product-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-ssl-product-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-ssl-product-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}
.sf-ssl-product-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}
.sf-ssl-product-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  margin: 0 0 16px;
}
.sf-ssl-product-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.sf-ssl-product-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.sf-ssl-product-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}
.sf-ssl-product-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-ssl-product-card a:hover {
  text-decoration: underline;
}
.sf-ssl-feature-grid .sf-feature-box {
  min-height: 230px;
}
.sf-ssl-usecase-section {
  background: #f6faff;
}
.sf-ssl-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-ssl-compare-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  display: flex;
  flex-direction: column;
  min-height: 315px;
}
.sf-ssl-compare-grid article > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-ssl-compare-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.sf-ssl-compare-grid p {
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sf-ssl-compare-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-ssl-compare-grid a:hover {
  text-decoration: underline;
}
.sf-ssl-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-ssl-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-ssl-product-grid,
  .sf-ssl-compare-grid {
    grid-template-columns: 1fr;
  }
  .sf-ssl-product-card,
  .sf-ssl-compare-grid article,
  .sf-ssl-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-ssl-related-row {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Service Fuchs E-Mail Landingpage
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-email-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--email {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-email-page .sf-kicker,
.sf-email-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-email-badges span {
  background: rgba(255,255,255,.80);
}
.sf-email-intro .sf-info-panel,
.sf-email-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-email-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-email-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.sf-email-package-card {
  display: flex;
  flex-direction: column;
  min-height: 455px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-email-package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-email-package-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-email-package-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-email-package-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}
.sf-email-package-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}
.sf-email-package-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 28px;
  margin: 0 0 16px;
}
.sf-email-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}
.sf-email-package-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.sf-email-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}
.sf-email-package-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-email-package-card a:hover {
  text-decoration: underline;
}
.sf-email-price-note {
  margin: 20px auto 0;
  max-width: 860px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.sf-email-link-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.sf-email-link-list a {
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-email-link-list a:hover {
  text-decoration: underline;
}
.sf-email-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sf-email-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 20px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}
.sf-email-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}
.sf-email-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}
.sf-email-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}
.sf-email-related-row {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .sf-email-steps,
  .sf-email-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-email-package-grid {
    grid-template-columns: 1fr;
  }
  .sf-email-package-card,
  .sf-email-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-email-steps,
  .sf-email-related-row {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Service Fuchs E-Mail Adresse Detailseite
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-email-address-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--email-address {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-email-address-page .sf-kicker,
.sf-email-address-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-email-address-badges span {
  background: rgba(255,255,255,.80);
}

.sf-email-address-intro .sf-info-panel,
.sf-email-address-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-address-feature-grid .sf-feature-box {
  min-height: 225px;
}

.sf-email-address-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-email-address-package-card {
  display: flex;
  flex-direction: column;
  min-height: 455px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-email-address-package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-email-address-package-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-address-package-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-email-address-package-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}

.sf-email-address-package-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}

.sf-email-address-package-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 28px;
  margin: 0 0 16px;
}

.sf-email-address-package-card strong small {
  color: #667085;
  font-size: 14px;
}

.sf-email-address-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.sf-email-address-package-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.sf-email-address-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}

.sf-email-address-package-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-email-address-package-card a:hover {
  text-decoration: underline;
}

.sf-email-address-price-note {
  margin: 20px auto 0;
  max-width: 880px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.sf-email-address-price-note a {
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-email-address-steps {
  display: grid;
  gap: 14px;
}

.sf-email-address-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-email-address-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-email-address-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-email-address-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-email-address-related-row {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1180px) {
  .sf-email-address-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-email-address-package-grid {
    grid-template-columns: 1fr;
  }

  .sf-email-address-package-card,
  .sf-email-address-feature-grid .sf-feature-box {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .sf-email-address-related-row {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   Service Fuchs E-Mail Speichererweiterung
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-email-storage-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--email-storage {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-email-storage-page .sf-kicker,
.sf-email-storage-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-email-storage-badges span {
  background: rgba(255,255,255,.80);
}

.sf-email-storage-intro .sf-info-panel,
.sf-email-storage-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-storage-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-email-storage-product-card {
  display: flex;
  flex-direction: column;
  min-height: 455px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-email-storage-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-email-storage-product-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-email-storage-product-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-email-storage-product-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}

.sf-email-storage-product-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}

.sf-email-storage-product-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 28px;
  margin: 0 0 16px;
}

.sf-email-storage-product-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.sf-email-storage-product-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.sf-email-storage-product-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}

.sf-email-storage-product-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-email-storage-product-card a:hover {
  text-decoration: underline;
}

.sf-email-storage-price-note {
  margin: 20px auto 0;
  max-width: 880px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.sf-email-storage-feature-grid .sf-feature-box {
  min-height: 225px;
}

.sf-email-storage-steps {
  display: grid;
  gap: 14px;
}

.sf-email-storage-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-email-storage-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-email-storage-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-email-storage-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-email-storage-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 11px;
}

.sf-email-storage-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #263446;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.45;
}

.sf-email-storage-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--sf-orange);
  margin-top: 1px;
}

.sf-email-storage-related-row {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1180px) {
  .sf-email-storage-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-email-storage-product-grid {
    grid-template-columns: 1fr;
  }

  .sf-email-storage-product-card,
  .sf-email-storage-feature-grid .sf-feature-box {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .sf-email-storage-related-row {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Service Fuchs IT-Service Landingpage
   Ergänzung zu assets/css/servicefuchs.css
   ========================================================= */
.sf-it-page .sf-detail-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--it {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-it-page .sf-kicker,
.sf-it-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-it-badges span {
  background: rgba(255,255,255,.80);
}
.sf-it-intro .sf-info-panel,
.sf-it-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-it-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.sf-it-service-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-it-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-it-service-card.is-highlight {
  border-color: rgba(240,138,28,.56);
}
.sf-it-service-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f6faff;
  border-bottom: 1px solid #e7edf5;
}
.sf-it-service-card > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}
.sf-it-service-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-it-service-card span svg {
  width: 16px;
  height: 16px;
}
.sf-it-service-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.25px;
}
.sf-it-service-card p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}
.sf-it-service-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}
.sf-it-service-card a:hover {
  text-decoration: underline;
}
.sf-it-viennaweb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sf-it-vw-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.10), rgba(90,145,230,0) 42%),
    #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-it-vw-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(13,45,92,.28);
}
.sf-it-vw-card > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}
.sf-it-vw-card > span svg {
  width: 25px;
  height: 25px;
}
.sf-it-vw-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 9px;
}
.sf-it-vw-card em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.sf-it-vw-card b {
  margin-top: auto;
  color: var(--sf-blue);
  font-size: 14px;
}
.sf-it-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-it-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}
@media (max-width: 1180px) {
  .sf-it-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-it-viennaweb-grid {
    grid-template-columns: 1fr;
  }
  .sf-it-vw-card,
  .sf-it-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-it-service-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Service Fuchs IT Fernwartung
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-fernwartung-remote-support.webp
========================================================= */
.sf-it-single {
  background: #fff;
}

.sf-it-single-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 47%, #fff8ef 100%);
}

.sf-it-single-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 50%, rgba(240,138,28,.32) 51%, transparent 53%),
    linear-gradient(4deg, transparent 49%, rgba(90,145,230,.24) 50%, transparent 52%),
    linear-gradient(-8deg, transparent 56%, rgba(255,255,255,.46) 57%, transparent 59%);
  opacity: .85;
}

.sf-it-single-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.sf-it-single-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 850;
}

.sf-it-single-hero p {
  max-width: 730px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}

.sf-it-single-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.sf-it-single-hero__actions svg {
  width: 20px;
  height: 20px;
}

.sf-it-single-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.sf-it-single-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8e4f1;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #22324a;
  font-size: 13px;
  font-weight: 750;
}

.sf-it-single-badges svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
}

.sf-it-single-hero__side {
  position: relative;
}

.sf-it-single-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(221,229,240,.86);
  box-shadow: 0 24px 54px rgba(13,45,92,.15);
  background: #f6faff;
}

.sf-it-price-panel {
  position: relative;
  width: calc(100% - 40px);
  margin: -42px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(240,138,28,.32);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(13,45,92,.12);
  backdrop-filter: blur(10px);
}

.sf-it-price-panel span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-it-price-panel strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.sf-it-price-panel p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-remote-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-remote-feature-grid .sf-feature-box {
  min-height: 230px;
}

.sf-remote-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-remote-steps {
  display: grid;
  gap: 14px;
}

.sf-remote-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-remote-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-remote-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-remote-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-remote-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-remote-trust-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-remote-trust-grid article:hover {
  border-color: rgba(240,138,28,.44);
  transform: translateY(-1px);
}

.sf-remote-trust-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-remote-trust-grid svg {
  width: 25px;
  height: 25px;
}

.sf-remote-trust-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-remote-trust-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-remote-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-remote-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-remote-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-remote-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-remote-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-remote-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-remote-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-remote-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-it-single-hero__inner {
    grid-template-columns: 1fr;
  }
  .sf-it-single-hero__side {
    max-width: 760px;
  }
  .sf-remote-trust-grid,
  .sf-remote-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-remote-price-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-it-single-hero__inner {
    padding: 42px 0;
  }
  .sf-it-single-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .sf-it-single-badges {
    display: grid;
  }
  .sf-it-single-hero__actions {
    display: grid;
  }
  .sf-it-single-hero__actions .sf-btn {
    width: 100%;
  }
  .sf-it-price-panel {
    width: calc(100% - 22px);
    margin-top: -28px;
  }
  .sf-remote-trust-grid,
  .sf-remote-related-row {
    grid-template-columns: 1fr;
  }
  .sf-remote-feature-grid .sf-feature-box {
    min-height: auto;
  }
}


/* =========================================================
   Service Fuchs IT Migration & Systemumzug
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-migration.webp
========================================================= */
.sf-it-single {
  background: #fff;
}

.sf-it-single-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 47%, #fff8ef 100%);
}

.sf-it-single-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 50%, rgba(240,138,28,.32) 51%, transparent 53%),
    linear-gradient(4deg, transparent 49%, rgba(90,145,230,.24) 50%, transparent 52%),
    linear-gradient(-8deg, transparent 56%, rgba(255,255,255,.46) 57%, transparent 59%);
  opacity: .85;
}

.sf-it-single-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.sf-it-single-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 850;
}

.sf-it-single-hero p {
  max-width: 740px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}

.sf-it-single-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.sf-it-single-hero__actions svg {
  width: 20px;
  height: 20px;
}

.sf-it-single-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.sf-it-single-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #d8e4f1;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #22324a;
  font-size: 13px;
  font-weight: 750;
}

.sf-it-single-badges svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
}

.sf-it-single-hero__side {
  position: relative;
}

.sf-it-single-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(221,229,240,.86);
  box-shadow: 0 24px 54px rgba(13,45,92,.15);
  background: #f6faff;
}

.sf-it-price-panel {
  position: relative;
  width: calc(100% - 40px);
  margin: -42px auto 0;
  padding: 22px 24px;
  border: 1px solid rgba(240,138,28,.32);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(13,45,92,.12);
  backdrop-filter: blur(10px);
}

.sf-it-price-panel span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-it-price-panel strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.sf-it-price-panel p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-migration-hero {
  background:
    radial-gradient(circle at 83% 17%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 93% 68%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #fff8ef 100%);
}

.sf-migration-hero-panel {
  border-color: rgba(240,138,28,.36);
}

.sf-migration-sidebox,
.sf-migration-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-migration-feature-grid .sf-feature-box {
  min-height: 230px;
}

.sf-migration-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-migration-steps {
  display: grid;
  gap: 14px;
}

.sf-migration-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-migration-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-migration-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-migration-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-migration-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-migration-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-migration-usecase-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.44);
}

.sf-migration-usecase-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-migration-usecase-grid svg {
  width: 25px;
  height: 25px;
}

.sf-migration-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-migration-usecase-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-migration-viennaweb-section {
  background: #fff;
}

.sf-migration-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-migration-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-migration-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-migration-viennaweb-links {
  display: grid;
  gap: 12px;
}

.sf-migration-viennaweb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-migration-viennaweb-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-migration-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-migration-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-migration-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-migration-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-migration-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-migration-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-migration-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-migration-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-it-single-hero__inner {
    grid-template-columns: 1fr;
  }
  .sf-it-single-hero__side {
    max-width: 820px;
  }
  .sf-migration-usecase-grid,
  .sf-migration-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-migration-viennaweb-box,
  .sf-migration-price-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-it-single-hero__inner {
    padding: 42px 0;
  }
  .sf-it-single-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
  .sf-it-single-badges,
  .sf-it-single-hero__actions {
    display: grid;
  }
  .sf-it-single-hero__actions .sf-btn {
    width: 100%;
  }
  .sf-it-price-panel {
    width: calc(100% - 22px);
    margin-top: -28px;
  }
  .sf-migration-usecase-grid,
  .sf-migration-related-row {
    grid-template-columns: 1fr;
  }
  .sf-migration-feature-grid .sf-feature-box {
    min-height: auto;
  }
}




/* =========================================================
   Service Fuchs IT PHP & Datenbank Services
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-php-datenbank.webp
========================================================= */
.sf-phpdb-hero {
  background:
    radial-gradient(circle at 83% 17%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 93% 68%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #fff8ef 100%);
}

.sf-phpdb-hero-panel,
.sf-phpdb-sidebox,
.sf-phpdb-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-phpdb-feature-grid .sf-feature-box {
  min-height: 230px;
}

.sf-phpdb-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-phpdb-steps {
  display: grid;
  gap: 14px;
}

.sf-phpdb-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-phpdb-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-phpdb-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-phpdb-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-phpdb-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-phpdb-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-phpdb-usecase-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.44);
}

.sf-phpdb-usecase-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-phpdb-usecase-grid svg {
  width: 25px;
  height: 25px;
}

.sf-phpdb-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-phpdb-usecase-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-phpdb-viennaweb-section {
  background: #fff;
}

.sf-phpdb-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-phpdb-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-phpdb-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-phpdb-viennaweb-links {
  display: grid;
  gap: 12px;
}

.sf-phpdb-viennaweb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-phpdb-viennaweb-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-phpdb-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-phpdb-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-phpdb-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-phpdb-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-phpdb-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-phpdb-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-phpdb-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-phpdb-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-phpdb-usecase-grid,
  .sf-phpdb-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-phpdb-viennaweb-box,
  .sf-phpdb-price-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-phpdb-usecase-grid,
  .sf-phpdb-related-row {
    grid-template-columns: 1fr;
  }
  .sf-phpdb-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
/* =========================================================
   Service Fuchs Webseiten-Erstellung
   Ergänzung zu assets/css/servicefuchs.css
   Bildpfad im Template: assets/img/sf-it-webseiten-erstellung.webp
========================================================= */
.sf-webdev-hero {
  background:
    radial-gradient(circle at 83% 17%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 93% 68%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 46%, #fff8ef 100%);
}

.sf-webdev-hero-panel,
.sf-webdev-sidebox,
.sf-webdev-seo-panel,
.sf-webdev-intro .sf-info-panel {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-webdev-feature-grid .sf-feature-box {
  min-height: 235px;
}

.sf-webdev-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}

.sf-webdev-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-webdev-package-card {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-webdev-package-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-webdev-package-card.is-highlight {
  border-color: rgba(240,138,28,.56);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-webdev-package-card > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-webdev-package-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 26px;
  letter-spacing: -.3px;
}

.sf-webdev-package-card p {
  margin: 0 0 16px;
  color: #435064;
  line-height: 1.62;
}

.sf-webdev-package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.sf-webdev-package-card li {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.sf-webdev-package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sf-orange);
  font-weight: 900;
}

.sf-webdev-package-card a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-webdev-package-card a:hover {
  text-decoration: underline;
}

.sf-webdev-checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 11px;
}

.sf-webdev-checklist li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #263446;
  font-weight: 750;
  font-size: 14px;
  line-height: 1.45;
}

.sf-webdev-checklist svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--sf-orange);
  margin-top: 1px;
}

.sf-webdev-steps {
  display: grid;
  gap: 14px;
}

.sf-webdev-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 18px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-webdev-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-webdev-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-webdev-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-webdev-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-webdev-usecase-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-webdev-usecase-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.44);
}

.sf-webdev-usecase-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-webdev-usecase-grid svg {
  width: 25px;
  height: 25px;
}

.sf-webdev-usecase-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-webdev-usecase-grid em {
  display: block;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
}

.sf-webdev-viennaweb-section {
  background: #fff;
}

.sf-webdev-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-webdev-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-webdev-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-webdev-viennaweb-links {
  display: grid;
  gap: 12px;
}

.sf-webdev-viennaweb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-webdev-viennaweb-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-webdev-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 36px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-webdev-price-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-webdev-price-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-webdev-price-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.sf-webdev-price-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #263446;
  font-weight: 750;
  line-height: 1.45;
}

.sf-webdev-price-box li svg {
  width: 20px;
  height: 20px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-webdev-related-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-webdev-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-webdev-usecase-grid,
  .sf-webdev-related-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-webdev-package-grid,
  .sf-webdev-viennaweb-box,
  .sf-webdev-price-box {
    grid-template-columns: 1fr;
  }
  .sf-webdev-package-card,
  .sf-webdev-feature-grid .sf-feature-box {
    min-height: auto;
  }
}

@media (max-width: 780px) {
  .sf-webdev-usecase-grid,
  .sf-webdev-related-row {
    grid-template-columns: 1fr;
  }
}






/* =========================================================
   Service Fuchs Statusseite
   Ergänzung zu assets/css/servicefuchs.css
   URL: /status/ oder /service/status/
========================================================= */
.sf-status-page {
  background: #fff;
}

.sf-status-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 47%, #fff8ef 100%);
}

.sf-status-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 38%;
  pointer-events: none;
  background:
    linear-gradient(16deg, transparent 50%, rgba(240,138,28,.32) 51%, transparent 53%),
    linear-gradient(4deg, transparent 49%, rgba(90,145,230,.24) 50%, transparent 52%),
    linear-gradient(-8deg, transparent 56%, rgba(255,255,255,.46) 57%, transparent 59%);
  opacity: .85;
}

.sf-status-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.sf-status-hero h1 {
  margin: 0 0 18px;
  color: var(--sf-blue-dark);
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 850;
}

.sf-status-hero p {
  max-width: 740px;
  margin: 0 0 28px;
  color: #263446;
  font-size: 18px;
  line-height: 1.62;
}

.sf-status-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sf-status-hero__panel,
.sf-status-current-card,
.sf-status-availability-box,
.sf-status-incidents-box {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(13,45,92,.10);
}

.sf-status-hero__panel {
  padding: 28px;
  backdrop-filter: blur(10px);
}

.sf-status-hero__panel > span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #b75f00;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-status-hero__panel strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 30px;
  line-height: 1.12;
  margin-bottom: 10px;
}

.sf-status-hero__panel p {
  margin: 0 0 14px;
  font-size: 15px;
  color: #435064;
}

.sf-status-hero__panel small {
  color: #667085;
  font-weight: 700;
}

.sf-status-current-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 4vw, 38px);
  margin-bottom: 28px;
}

.sf-status-current-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.sf-status-current-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: var(--sf-blue);
  font-size: 28px;
  font-weight: 900;
}

.sf-status-current-card h2 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.sf-status-current-card p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-status-current-meta {
  border-left: 1px solid #dfe8f4;
  padding-left: 24px;
}

.sf-status-current-meta strong,
.sf-status-current-meta span,
.sf-status-current-meta em {
  display: block;
}

.sf-status-current-meta strong {
  color: var(--sf-orange);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.sf-status-current-meta span {
  color: var(--sf-blue-dark);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.sf-status-current-meta em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
}

.sf-status-service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.sf-status-service-card {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-status-service-card span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf6ff;
  color: var(--sf-blue);
  font-weight: 900;
  margin-bottom: 12px;
}

.sf-status-service-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 15px;
  margin-bottom: 4px;
}

.sf-status-service-card em {
  color: #435064;
  font-style: normal;
  font-size: 13px;
  font-weight: 750;
}

.sf-status-email-details {
  margin-top: 22px;
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.sf-status-email-details summary {
  cursor: pointer;
  min-height: 58px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sf-blue-dark);
  font-weight: 900;
}

.sf-status-email-details summary strong {
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  color: #fff;
  background: var(--sf-blue);
}

.sf-status-email-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 20px 20px;
}

.sf-status-email-detail-card {
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 16px;
}

.sf-status-email-detail-card div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.sf-status-email-detail-card span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
}

.sf-status-email-detail-card strong {
  color: var(--sf-blue-dark);
}

.sf-status-email-detail-card em {
  margin-left: auto;
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.sf-status-email-detail-card p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-status-history-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-status-history-card {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-status-history-card span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-status-history-card strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-status-history-card p {
  margin: 0 0 12px;
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-status-history-card em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 750;
}

.sf-status-availability-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 34px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
}

.sf-status-availability-box h2,
.sf-status-incidents-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-status-availability-box p,
.sf-status-incidents-box p {
  margin: 0 0 22px;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-status-90day-months,
.sf-status-90day-grid {
  display: grid;
  gap: 4px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sf-status-90day-months {
  margin-top: 20px;
  margin-bottom: 6px;
  min-height: 18px;
}

.sf-status-90day-months span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.sf-status-90day-week {
  display: grid;
  grid-template-rows: repeat(7, 16px);
  gap: 4px;
}

.sf-status-90day-cell {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #dfe8f4;
}

.sf-status-90day-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: #435064;
  font-size: 13px;
  font-weight: 800;
}

.sf-status-90day-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sf-status-availability-side {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-status-availability-side > span {
  display: block;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.sf-status-availability-side > strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 38px;
  line-height: 1;
  margin-bottom: 20px;
}

.sf-status-availability-side div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #e8eef6;
}

.sf-status-availability-side em {
  color: #435064;
  font-style: normal;
  font-size: 14px;
}

.sf-status-availability-side b {
  color: var(--sf-blue-dark);
}

.sf-status-incidents-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  padding: clamp(28px, 4vw, 44px);
}

.sf-status-incidents-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sf-status-incidents-box li {
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  background: #fff;
  padding: 13px 15px;
  color: #435064;
}

.sf-status-incidents-box li strong {
  color: var(--sf-blue-dark);
}

.isf-ok .sf-status-current-icon,
.sf-status-service-card.isf-ok span,
.sf-status-email-detail-card.isf-ok span,
.sf-status-90day-cell.isf-ok,
.isf-ok.sf-status-90day-cell {
  background: #16a34a;
}

.isf-warn .sf-status-current-icon,
.sf-status-service-card.isf-warn span,
.sf-status-email-detail-card.isf-warn span,
.sf-status-90day-cell.isf-warn,
.isf-warn.sf-status-90day-cell {
  background: #f59e0b;
}

.isf-bad .sf-status-current-icon,
.sf-status-service-card.isf-bad span,
.sf-status-email-detail-card.isf-bad span,
.sf-status-90day-cell.isf-bad,
.isf-bad.sf-status-90day-cell {
  background: #dc2626;
}

.isf-maint .sf-status-current-icon,
.sf-status-service-card.isf-maint span,
.sf-status-email-detail-card.isf-maint span,
.sf-status-90day-cell.isf-maint,
.isf-maint.sf-status-90day-cell {
  background: #64748b;
}

.sf-status-hero__panel.isf-ok,
.sf-status-current-card.isf-ok {
  border-color: rgba(22,163,74,.30);
}

.sf-status-hero__panel.isf-warn,
.sf-status-current-card.isf-warn {
  border-color: rgba(245,158,11,.35);
}

.sf-status-hero__panel.isf-bad,
.sf-status-current-card.isf-bad {
  border-color: rgba(220,38,38,.35);
}

.sf-status-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-status-hero__inner,
  .sf-status-current-card,
  .sf-status-availability-box,
  .sf-status-incidents-box {
    grid-template-columns: 1fr;
  }

  .sf-status-service-grid,
  .sf-status-history-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-status-current-meta {
    border-left: 0;
    border-top: 1px solid #dfe8f4;
    padding-left: 0;
    padding-top: 20px;
  }
}

@media (max-width: 780px) {
  .sf-status-hero__inner {
    padding: 42px 0;
  }

  .sf-status-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }

  .sf-status-hero__actions,
  .sf-status-email-detail-grid,
  .sf-status-service-grid,
  .sf-status-history-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sf-status-hero__actions .sf-btn {
    width: 100%;
  }

  .sf-status-current-main {
    flex-direction: column;
  }
}



/* =========================================================
   Service Fuchs Kontakt & Anfrage
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-contact-page { background:#fff; }
.sf-contact-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e8eef6;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.18), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-contact-hero__inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:44px;
  align-items:center;
  padding:62px 0;
}
.sf-contact-hero h1 {
  margin:0 0 18px;
  color:var(--sf-blue-dark);
  font-size:clamp(38px,4.4vw,60px);
  line-height:1.08;
  letter-spacing:-1.5px;
}
.sf-contact-hero p {
  max-width:740px;
  margin:0 0 28px;
  color:#263446;
  font-size:18px;
  line-height:1.62;
}
.sf-contact-hero__actions { display:flex; gap:16px; flex-wrap:wrap; }
.sf-contact-hero__panel {
  border:1px solid rgba(240,138,28,.34);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(13,45,92,.12);
  padding:28px;
}
.sf-contact-hero__panel span {
  display:inline-flex;
  padding:6px 11px;
  margin-bottom:14px;
  border-radius:999px;
  background:#fff7ef;
  color:#b75f00;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.sf-contact-hero__panel strong { display:block; color:var(--sf-blue-dark); font-size:28px; line-height:1.12; margin-bottom:10px; }
.sf-contact-hero__panel p { margin:0; font-size:14px; color:#435064; }
.sf-contact-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 26px;
}
.sf-contact-tabs a {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 15px;
  border:1px solid #dce6f2;
  border-radius:999px;
  background:#fff;
  color:#22324a;
  font-size:13px;
  font-weight:850;
  box-shadow:0 8px 18px rgba(13,45,92,.035);
}
.sf-contact-tabs a:hover,
.sf-contact-tabs a.is-active {
  border-color:rgba(240,138,28,.55);
  background:#fff7ef;
  color:#b75f00;
}
.sf-contact-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:26px;
  align-items:start;
}
.sf-contact-box {
  border:1px solid #dfe8f4;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--sf-shadow);
  overflow:hidden;
}
.sf-contact-block { padding:28px; border-bottom:1px solid #e8eef6; }
.sf-contact-block:last-child { border-bottom:0; }
.sf-contact-block-title {
  color:var(--sf-blue-dark);
  font-size:20px;
  font-weight:900;
  margin:0 0 18px;
}
.sf-contact-grid { display:grid; gap:18px; }
.sf-contact-grid-2 { grid-template-columns:repeat(2,1fr); }
.sf-contact-grid-1 { grid-template-columns:1fr; }
.sf-contact-field-wide { grid-column:1 / -1; }
.sf-contact-field label {
  display:block;
  color:var(--sf-blue-dark);
  font-size:14px;
  font-weight:850;
  margin-bottom:7px;
}
.sf-contact-required { color:var(--sf-orange); }
.sf-contact-field input,
.sf-contact-field textarea,
.sf-contact-field select {
  width:100%;
  border:1px solid #d7e0ec;
  border-radius:10px;
  background:#fff;
  color:#172033;
  font:inherit;
  padding:13px 14px;
  outline:none;
}
.sf-contact-field textarea { min-height:150px; resize:vertical; }
.sf-contact-field input:focus,
.sf-contact-field textarea:focus,
.sf-contact-field select:focus {
  border-color:rgba(240,138,28,.65);
  box-shadow:0 0 0 4px rgba(240,138,28,.10);
}
.sf-contact-honeypot { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.sf-contact-checkbox { display:flex; gap:10px; align-items:flex-start; color:#435064; font-size:14px; line-height:1.55; }
.sf-contact-checkbox input { margin-top:4px; }
.sf-contact-checkbox a { color:var(--sf-blue); font-weight:900; text-decoration:underline; }
.sf-contact-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:18px; }
.sf-contact-submit {
  min-height:50px;
  border:0;
  border-radius:8px;
  background:var(--sf-blue);
  color:#fff;
  font-weight:900;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(13,45,92,.20);
}
.sf-contact-response-info { color:#435064; font-size:14px; font-weight:750; }
.sf-contact-alert {
  border-radius:14px;
  padding:16px 18px;
  margin:0 0 22px;
  font-weight:750;
}
.sf-contact-alert-success { border:1px solid rgba(21,128,61,.25); background:#effcf4; color:#166534; }
.sf-contact-alert-error { border:1px solid rgba(185,28,28,.25); background:#fff1f2; color:#991b1b; }
.sf-contact-alert ul { margin:0; padding-left:20px; }
.sf-contact-upload-box {
  border:2px dashed #cbd9ec;
  border-radius:14px;
  background:#f8fbff;
  padding:24px;
  text-align:center;
  cursor:pointer;
  display:grid;
  gap:5px;
}
.sf-contact-upload-box.is-dragover { border-color:var(--sf-orange); background:#fff7ef; }
.sf-contact-upload-box input { display:none; }
.sf-contact-upload-icon { font-size:30px; }
.sf-contact-upload-main { color:var(--sf-blue-dark); font-weight:900; }
.sf-contact-upload-sub { color:#5B6472; font-size:14px; }
.sf-contact-upload-row {
  margin-top:9px;
  padding:9px 12px;
  border:1px solid #dfe8f4;
  border-radius:10px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:14px;
}
.sf-contact-upload-row button { border:0; background:#fff7ef; color:#b75f00; border-radius:999px; padding:5px 10px; font-weight:850; cursor:pointer; }
.sf-contact-side {
  border:1px solid #dfe8f4;
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  box-shadow:0 10px 24px rgba(13,45,92,.045);
  padding:24px;
  display:grid;
  gap:12px;
}
.sf-contact-side strong { color:var(--sf-orange); text-transform:uppercase; font-size:13px; letter-spacing:.04em; }
.sf-contact-side p { margin:0; color:#435064; font-size:14px; line-height:1.6; }
.sf-contact-side a {
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #dce6f2;
  border-radius:10px;
  background:#fff;
  padding:0 13px;
  color:var(--sf-blue);
  font-weight:900;
  font-size:14px;
}
.sf-contact-side a::after { content:"→"; color:var(--sf-orange); }
.sf-contact-summary { padding:30px; }
.sf-contact-summary h2 { margin:0 0 18px; color:var(--sf-blue-dark); font-size:30px; }
.sf-contact-summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sf-contact-summary-grid div { border:1px solid #dfe8f4; border-radius:12px; padding:14px; background:#f8fbff; }
.sf-contact-summary-grid strong { display:block; color:var(--sf-blue-dark); font-size:13px; margin-bottom:4px; }
.sf-contact-summary-grid span { color:#435064; font-size:14px; }
.sf-contact-message-preview { margin-top:16px; border:1px solid #dfe8f4; border-radius:12px; background:#fff; padding:16px; color:#435064; line-height:1.65; }
.sf-contact-turnstile { display:flex; justify-content:flex-start; }
@media (max-width:980px) {
  .sf-contact-hero__inner,
  .sf-contact-layout { grid-template-columns:1fr; }
  .sf-contact-hero__panel { max-width:520px; }
}
@media (max-width:680px) {
  .sf-contact-hero__inner { padding:42px 0; }
  .sf-contact-grid-2,
  .sf-contact-summary-grid { grid-template-columns:1fr; }
  .sf-contact-block { padding:22px; }
  .sf-contact-actions { display:grid; }
  .sf-contact-submit { width:100%; }
}





/* =========================================================
   Service Fuchs Partnerprogramm Hinweis-Seite
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-partner-page {
  background: #fff;
}
.sf-partner-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}
.sf-price-card--partner {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}
.sf-partner-page .sf-kicker,
.sf-partner-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}
.sf-partner-badges span {
  background: rgba(255,255,255,.82);
}
.sf-partner-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}
.sf-partner-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sf-partner-target-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-partner-target-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}
.sf-partner-target-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}
.sf-partner-target-grid svg {
  width: 25px;
  height: 25px;
}
.sf-partner-target-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}
.sf-partner-target-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}
.sf-partner-feature-grid .sf-feature-box {
  min-height: 225px;
}
.sf-partner-feature-grid .sf-feature-box svg {
  color: var(--sf-blue);
}
.sf-partner-viennaweb-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}
.sf-partner-viennaweb-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.sf-partner-viennaweb-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}
.sf-partner-viennaweb-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}
.sf-partner-link-grid {
  display: grid;
  gap: 12px;
}
.sf-partner-link-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}
.sf-partner-link-grid a::after {
  content: "→";
  color: var(--sf-orange);
}
.sf-partner-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}
@media (max-width: 1180px) {
  .sf-partner-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 980px) {
  .sf-partner-viennaweb-box {
    grid-template-columns: 1fr;
  }
  .sf-partner-feature-grid .sf-feature-box {
    min-height: auto;
  }
}
@media (max-width: 780px) {
  .sf-partner-target-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Service Fuchs Wissensdatenbank Landingpage
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-kb-page {
  background: #fff;
}

.sf-kb-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.20), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--kb {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-kb-page .sf-kicker,
.sf-kb-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-kb-badges span {
  background: rgba(255,255,255,.82);
}

.sf-kb-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-kb-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-kb-topic-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-kb-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-kb-topic-card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-kb-topic-card__icon svg {
  width: 27px;
  height: 27px;
}

.sf-kb-topic-card em {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-kb-topic-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.3px;
}

.sf-kb-topic-card p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-kb-topic-card ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.sf-kb-topic-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #263446;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.sf-kb-topic-card li svg {
  width: 17px;
  height: 17px;
  color: var(--sf-orange);
  flex: 0 0 auto;
  margin-top: 1px;
}

.sf-kb-topic-card > a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sf-kb-topic-card > a:hover {
  text-decoration: underline;
}

.sf-kb-topic-card > a svg {
  width: 18px;
  height: 18px;
  color: var(--sf-orange);
}

.sf-kb-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-kb-quick-grid a {
  display: flex;
  flex-direction: column;
  min-height: 160px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.10), rgba(90,145,230,0) 42%),
    #fff;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-kb-quick-grid a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-kb-quick-grid strong {
  color: var(--sf-blue-dark);
  font-size: 18px;
  margin-bottom: 8px;
}

.sf-kb-quick-grid span {
  color: #435064;
  font-size: 14px;
  line-height: 1.55;
}

.sf-kb-support-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-kb-support-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-kb-support-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-kb-support-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-kb-support-links {
  display: grid;
  gap: 12px;
}

.sf-kb-support-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-kb-support-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-kb-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-kb-topic-grid,
  .sf-kb-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-kb-support-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-kb-topic-grid,
  .sf-kb-quick-grid {
    grid-template-columns: 1fr;
  }

  .sf-kb-topic-card,
  .sf-kb-quick-grid a {
    min-height: auto;
  }
}


/* =========================================================
   Service Fuchs Domains / Domaincheck
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-domains-page {
  background: #fff;
}

.sf-domains-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--domains {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-domains-page .sf-kicker,
.sf-domains-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-domains-badges span {
  background: rgba(255,255,255,.82);
}

.sf-domain-check-form {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 30px rgba(13,45,92,.07);
  padding: 22px;
  max-width: 820px;
}

.sf-domain-check-form label {
  display: block;
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
}

.sf-domain-check-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
  gap: 10px;
}

.sf-domain-check-fields input,
.sf-domain-check-fields select,
.sf-domain-check-fields button {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  font: inherit;
}

.sf-domain-check-fields input {
  padding: 0 16px;
}

.sf-domain-check-fields select {
  padding: 0 14px;
  font-weight: 800;
}

.sf-domain-check-fields button {
  border-color: var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-domain-check-form p {
  margin: 10px 0 0;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.5;
}

.sf-domain-notice {
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(13,45,92,.14);
  border-radius: 14px;
  background: #f8fbff;
  color: #263446;
}

.sf-domain-notice strong {
  color: var(--sf-blue-dark);
  font-size: 17px;
}

.sf-domain-notice--error {
  border-color: rgba(185,28,28,.25);
  background: #fff1f2;
}

.sf-domain-result-grid {
  display: grid;
  gap: 16px;
}

.sf-domain-result-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-domain-result-card.is-free {
  border-color: rgba(22,163,74,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(22,163,74,.09), rgba(22,163,74,0) 36%),
    #fff;
}

.sf-domain-result-card.is-taken {
  border-color: rgba(245,158,11,.30);
}

.sf-domain-result-card.is-error {
  border-color: rgba(100,116,139,.30);
}

.sf-domain-result-card span {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #eaf6ff;
  color: var(--sf-blue);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domain-result-card.is-free span {
  background: #effcf4;
  color: #15803d;
}

.sf-domain-result-card.is-taken span {
  background: #fff7ed;
  color: #b45309;
}

.sf-domain-result-card h3 {
  margin: 0 0 8px;
  color: var(--sf-blue-dark);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
}

.sf-domain-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sf-blue-dark);
}

.sf-domain-price strong {
  font-size: 24px;
  font-weight: 950;
}

.sf-domain-price em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.sf-domain-price__old {
  color: #8A8F98;
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 800;
}

.sf-domain-result-card form button,
.sf-domain-result-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 9px 20px rgba(13,45,92,.16);
}

.sf-domain-result-secondary {
  background: #fff;
  color: var(--sf-blue);
  border: 1px solid #dce6f2;
  box-shadow: none;
}

.sf-domain-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: #263446;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.sf-domain-select input {
  width: 17px;
  height: 17px;
  accent-color: var(--sf-orange);
}

.sf-domain-bulkbar {
  margin: 22px 0 0;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sf-shadow);
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.sf-domain-bulkbar strong {
  display: block;
  color: var(--sf-blue-dark);
}

.sf-domain-bulkbar small {
  color: #5B6472;
}

.sf-domain-bulkbar button {
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: var(--sf-orange);
  color: #fff;
  font-weight: 950;
  padding: 0 18px;
  cursor: pointer;
}

.sf-domain-bulkbar button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sf-domain-tld-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-domain-tld-card {
  overflow: hidden;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domain-tld-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domain-tld-card img,
.sf-domain-tld-card__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background:
    radial-gradient(circle at 70% 20%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    linear-gradient(135deg, #eaf6ff, #fff8ef);
}

.sf-domain-tld-card__placeholder {
  display: grid;
  place-items: center;
  color: var(--sf-blue-dark);
  font-size: 54px;
  font-weight: 950;
}

.sf-domain-tld-card > div {
  padding: 24px;
}

.sf-domain-tld-card span {
  display: inline-flex;
  padding: 6px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domain-tld-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}

.sf-domain-tld-card p {
  margin: 0 0 16px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
  min-height: 70px;
}

.sf-domain-tld-card a {
  display: inline-flex;
  margin-top: 16px;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-domain-tld-card a:hover {
  text-decoration: underline;
}

.sf-domain-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domains-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-domain-tld-grid {
    grid-template-columns: 1fr;
  }

  .sf-domain-tld-card {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .sf-domain-tld-card p {
    min-height: auto;
  }
}

@media (max-width: 980px) {
  .sf-domain-check-fields,
  .sf-domain-result-card {
    grid-template-columns: 1fr;
  }

  .sf-domain-result-card form button,
  .sf-domain-result-secondary {
    width: 100%;
  }

  .sf-domain-bulkbar {
    align-items: stretch;
    flex-direction: column;
  }

  .sf-domain-bulkbar button {
    width: 100%;
  }
}

@media (max-width: 780px) {
  .sf-domain-tld-card {
    display: block;
  }
}






/* =========================================================
   Service Fuchs Domains V2 Ergebnis-Fix
   Nach servicefuchs-domains-patch.css anhängen.
========================================================= */

.sf-domain-result-grid {
  gap: 20px;
}

.sf-domain-result-card {
  border-width: 2px;
  box-shadow: 0 14px 34px rgba(13,45,92,.08);
}

.sf-domain-result-card.is-free {
  border-color: #16a34a;
  background:
    linear-gradient(90deg, rgba(22,163,74,.13) 0%, rgba(255,255,255,1) 42%),
    radial-gradient(circle at 100% 0%, rgba(22,163,74,.16), rgba(22,163,74,0) 38%),
    #fff;
}

.sf-domain-result-card.is-taken {
  border-color: #f97316;
  background:
    linear-gradient(90deg, rgba(249,115,22,.14) 0%, rgba(255,255,255,1) 42%),
    radial-gradient(circle at 100% 0%, rgba(249,115,22,.16), rgba(249,115,22,0) 38%),
    #fff;
}

.sf-domain-result-card.is-error {
  border-color: #64748b;
  background:
    linear-gradient(90deg, rgba(100,116,139,.12) 0%, rgba(255,255,255,1) 42%),
    radial-gradient(circle at 100% 0%, rgba(100,116,139,.14), rgba(100,116,139,0) 38%),
    #fff;
}

.sf-domain-result-card span {
  font-size: 13px;
  padding: 7px 13px;
}

.sf-domain-result-card.is-free span {
  background: #16a34a;
  color: #fff;
}

.sf-domain-result-card.is-taken span {
  background: #f97316;
  color: #fff;
}

.sf-domain-result-card.is-error span {
  background: #64748b;
  color: #fff;
}

.sf-domain-result-card h3 {
  font-weight: 950;
}

.sf-domain-result-card.is-free h3::after {
  content: " verfügbar";
  display: inline-flex;
  margin-left: 10px;
  color: #15803d;
  font-size: 15px;
  vertical-align: middle;
}

.sf-domain-result-card.is-taken h3::after {
  content: " vergeben";
  display: inline-flex;
  margin-left: 10px;
  color: #c2410c;
  font-size: 15px;
  vertical-align: middle;
}

.sf-domain-result-card form button {
  background: #16a34a;
  box-shadow: 0 10px 22px rgba(22,163,74,.22);
}

.sf-domain-result-card.is-free .sf-domain-price strong {
  color: #15803d;
}

.sf-domain-result-card.is-taken .sf-domain-result-secondary {
  border-color: rgba(249,115,22,.40);
  color: #c2410c;
  background: #fff7ed;
}

.sf-domain-result-card.is-error .sf-domain-result-secondary {
  border-color: rgba(100,116,139,.36);
  color: #334155;
  background: #f8fafc;
}



/* =========================================================
   Service Fuchs Domains V3 Ergänzung
   Nur neue Blöcke: Vollständiger Checker + weitere Endungen
========================================================= */
.sf-domain-notice--fullcheck {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(240,138,28,.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domain-notice--fullcheck a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 9px;
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.sf-domain-more-check {
  margin: 22px 0 0;
  border: 1px solid rgba(240,138,28,.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 40%),
    #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 18px;
  align-items: center;
}

.sf-domain-more-check strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 18px;
  margin-bottom: 4px;
}

.sf-domain-more-check span {
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

.sf-domain-more-check__links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sf-domain-more-check__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #dce6f2;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  font-size: 13px;
}

.sf-domain-more-check__links a:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

.sf-domain-transfer-btn {
  background: var(--sf-orange) !important;
  color: #fff !important;
}

@media (max-width: 780px) {
  .sf-domain-notice--fullcheck,
  .sf-domain-more-check {
    grid-template-columns: 1fr;
  }

  .sf-domain-notice--fullcheck a {
    width: 100%;
  }
}

/* =========================================================
   Service Fuchs Domains Landingpage
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-domains-landing {
  background: #fff;
}

.sf-domains-landing-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--domains-landing {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-domains-landing .sf-kicker,
.sf-domains-landing .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-domains-landing-badges span {
  background: rgba(255,255,255,.82);
}

.sf-domain-landing-search {
  max-width: 830px;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(13,45,92,.07);
  padding: 22px;
}

.sf-domain-landing-search label {
  display: block;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
  margin: 0 0 10px;
}

.sf-domain-landing-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 185px;
  gap: 10px;
}

.sf-domain-landing-search input,
.sf-domain-landing-search button {
  width: 100%;
  min-height: 52px;
  border-radius: 10px;
  font: inherit;
}

.sf-domain-landing-search input {
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  padding: 0 16px;
}

.sf-domain-landing-search button {
  border: 1px solid var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-domain-landing-search button svg {
  width: 19px;
  height: 19px;
}

.sf-domain-landing-search small {
  display: block;
  margin-top: 10px;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.5;
}

.sf-domain-landing-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domain-landing-tld-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.sf-domain-landing-tld-card {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domain-landing-tld-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domain-landing-tld-card img,
.sf-domain-landing-tld-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  background:
    radial-gradient(circle at 70% 20%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    linear-gradient(135deg, #eaf6ff, #fff8ef);
}

.sf-domain-landing-tld-placeholder {
  display: grid;
  place-items: center;
  color: var(--sf-blue-dark);
  font-size: 46px;
  font-weight: 950;
}

.sf-domain-landing-tld-card > div {
  padding: 24px;
}

.sf-domain-landing-tld-card span {
  display: inline-flex;
  padding: 6px 11px;
  margin-bottom: 13px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domain-landing-tld-card h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 25px;
  letter-spacing: -.3px;
}

.sf-domain-landing-tld-card p {
  margin: 0 0 16px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-domain-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sf-blue-dark);
}

.sf-domain-price strong {
  font-size: 24px;
  font-weight: 950;
}

.sf-domain-price em {
  color: #667085;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

.sf-domain-price__old {
  color: #8A8F98;
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 800;
}

.sf-domain-landing-tld-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sf-domain-landing-tld-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid #dce6f2;
  color: var(--sf-blue);
  background: #fff;
}

.sf-domain-landing-tld-actions a:first-child {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #fff;
}

.sf-domain-landing-usecase-grid,
.sf-domain-landing-transfer-grid {
  display: grid;
  gap: 20px;
}

.sf-domain-landing-usecase-grid {
  grid-template-columns: repeat(4, 1fr);
}

.sf-domain-landing-transfer-grid {
  grid-template-columns: repeat(3, 1fr);
}

.sf-domain-landing-usecase-grid article,
.sf-domain-landing-transfer-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domain-landing-usecase-grid article:hover,
.sf-domain-landing-transfer-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domain-landing-usecase-grid span,
.sf-domain-landing-transfer-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-domain-landing-usecase-grid svg,
.sf-domain-landing-transfer-grid svg {
  width: 25px;
  height: 25px;
}

.sf-domain-landing-usecase-grid strong,
.sf-domain-landing-transfer-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 19px;
  margin-bottom: 8px;
}

.sf-domain-landing-usecase-grid p,
.sf-domain-landing-transfer-grid p {
  margin: 0;
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
}

.sf-domain-landing-transfer-grid a {
  display: inline-flex;
  margin-top: 16px;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-domain-landing-transfer-grid a:hover {
  text-decoration: underline;
}

.sf-domain-landing-combo-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-domain-landing-combo-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-domain-landing-combo-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-domain-landing-combo-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-domain-landing-combo-links {
  display: grid;
  gap: 12px;
}

.sf-domain-landing-combo-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-domain-landing-combo-links a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-domains-landing-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-domain-landing-tld-grid,
  .sf-domain-landing-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-domain-landing-tld-card {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-domain-landing-combo-box,
  .sf-domain-landing-transfer-grid {
    grid-template-columns: 1fr;
  }

  .sf-domain-landing-tld-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-domain-landing-search > div,
  .sf-domain-landing-tld-card,
  .sf-domain-landing-usecase-grid {
    grid-template-columns: 1fr;
  }

  .sf-domain-landing-tld-card img,
  .sf-domain-landing-tld-placeholder {
    min-height: 210px;
  }
}


/* =========================================================
   Service Fuchs Domaincheck V2
   Ergebnisansicht ohne großen Hero
========================================================= */
.sf-domain-check-compact {
  padding: 24px 0 18px;
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.12), rgba(240,138,28,0) 34%),
    linear-gradient(90deg, #eef7ff 0%, #fff 58%, #fff8ef 100%);
  border-bottom: 1px solid #e8eef6;
}

.sf-domain-check-form--compact {
  max-width: none;
  margin: 0;
}

.sf-domain-result-section {
  padding-top: 30px;
}

.sf-domain-result-section .sf-section-head {
  margin-bottom: 22px;
}

@media (max-width: 780px) {
  .sf-domain-check-compact {
    padding: 18px 0 14px;
  }

  .sf-domain-result-section {
    padding-top: 24px;
  }
}
/* =========================================================
   Service Fuchs Domaincheck V3
   Weitere Domains anzeigen + Preisfußnote
========================================================= */
.sf-domain-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 30px 0 12px;
}

.sf-domain-load-more {
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  padding: 0 24px;
  background: var(--sf-orange);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(13,45,92,.10);
}

.sf-domain-load-more:hover {
  transform: translateY(-1px);
}

.sf-domain-load-more:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.sf-domain-price-footnote {
  margin: 12px 0 0;
  text-align: center;
  color: #5B6472;
  font-size: 14px;
  line-height: 1.5;
}
/* =========================================================
   Service Fuchs Domaincheck V4
   Preis-Fußnote + kompaktes Formularfeld
========================================================= */

/* Aktionspreis-Fußnote direkt beim Preis */
.sf-domain-price-foot {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  color: inherit;
  vertical-align: super;
}

/* Zusatz-Button im Service-Fuchs-Orange, nicht hellblau */
.sf-domain-load-more {
  background: var(--sf-orange) !important;
  color: #fff !important;
}

/* Formular: Eingabefeld etwas kleiner, TLD-Auswahl deutlich breiter */
.sf-domain-check-fields {
  grid-template-columns: minmax(0, 1fr) 230px 170px;
}

/* Ergebnisansicht oben: genug Platz für "Top-Endungen prüfen" */
.sf-domain-check-form--compact .sf-domain-check-fields {
  grid-template-columns: minmax(0, 1fr) 235px 170px;
}

.sf-domain-check-fields select {
  min-width: 220px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Auf mittleren Breiten nicht zu früh umbrechen */
@media (max-width: 1180px) {
  .sf-domain-check-form--compact .sf-domain-check-fields,
  .sf-domain-check-fields {
    grid-template-columns: minmax(0, 1fr) 230px 165px;
  }
}

@media (max-width: 860px) {
  .sf-domain-check-form--compact .sf-domain-check-fields,
  .sf-domain-check-fields {
    grid-template-columns: 1fr;
  }

  .sf-domain-check-fields select {
    min-width: 0;
    width: 100%;
  }
}



.sf-domain-tld-card .sf-domain-price {
  display: flex !important;
  width: 100%;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px !important;
}

.sf-domain-tld-card .sf-domain-price + a {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 0 !important;
}





/* =========================================================
   Service Fuchs Domainberatung
   Ergänzung zu assets/css/servicefuchs.css
========================================================= */
.sf-domainberatung-page {
  background: #fff;
}

.sf-domainberatung-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-price-card--domainberatung {
  border-color: rgba(240,138,28,.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.12), rgba(240,138,28,0) 40%),
    #fff;
}

.sf-domainberatung-page .sf-kicker,
.sf-domainberatung-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-domainberatung-badges span {
  background: rgba(255,255,255,.82);
}

.sf-domainberatung-sidebox {
  border-color: rgba(240,138,28,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.09), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-domainberatung-tld-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-domainberatung-tld-grid article,
.sf-domainberatung-choice-grid article {
  display: flex;
  flex-direction: column;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-domainberatung-tld-grid article:hover,
.sf-domainberatung-choice-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-domainberatung-tld-grid article > span {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 11px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-domainberatung-tld-grid h3 {
  margin: 0 0 10px;
  color: var(--sf-blue-dark);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.25px;
}

.sf-domainberatung-tld-grid p,
.sf-domainberatung-choice-grid p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-domainberatung-tld-grid a,
.sf-domainberatung-choice-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-domainberatung-tld-grid a:hover,
.sf-domainberatung-choice-grid a:hover {
  text-decoration: underline;
}

.sf-domainberatung-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.sf-domainberatung-steps > div {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 16px;
  padding: 20px;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.04);
}

.sf-domainberatung-steps strong {
  grid-area: num;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-blue);
  color: #fff;
  font-size: 19px;
  line-height: 1;
}

.sf-domainberatung-steps span {
  grid-area: title;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 17px;
}

.sf-domainberatung-steps em {
  grid-area: text;
  color: #435064;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
}

.sf-domainberatung-combo-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 100% 0%, rgba(90,145,230,.12), rgba(90,145,230,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-domainberatung-combo-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-domainberatung-combo-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.14;
}

.sf-domainberatung-combo-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-domainberatung-link-grid {
  display: grid;
  gap: 12px;
}

.sf-domainberatung-link-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-domainberatung-link-grid a::after {
  content: "→";
  color: var(--sf-orange);
}

.sf-domainberatung-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-domainberatung-choice-grid article > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-domainberatung-choice-grid article > span svg {
  width: 25px;
  height: 25px;
}

.sf-domainberatung-choice-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-domainberatung-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 1180px) {
  .sf-domainberatung-tld-grid,
  .sf-domainberatung-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .sf-domainberatung-combo-box,
  .sf-domainberatung-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .sf-domainberatung-tld-grid,
  .sf-domainberatung-steps {
    grid-template-columns: 1fr;
  }
}





/* =========================================================
   Service Fuchs dynamische TLD-Seiten
   URL: /domains/{tld}-domain/
========================================================= */
.sf-tld-dynamic-page {
  background: #fff;
}

.sf-tld-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(240,138,28,.20), rgba(240,138,28,0) 36%),
    radial-gradient(circle at 94% 72%, rgba(90,145,230,.22), rgba(90,145,230,0) 40%),
    linear-gradient(90deg, #eef7ff 0%, #fff 48%, #fff8ef 100%);
}

.sf-tld-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 44px;
  align-items: center;
  padding: 62px 0;
}

.sf-price-card--tld,
.sf-tld-sidebox {
  border-color: rgba(240,138,28,.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #fff;
}

.sf-tld-dynamic-page .sf-kicker,
.sf-tld-dynamic-page .sf-price-card__badge {
  background: #fff7ef;
  color: #b75f00;
}

.sf-tld-badges span {
  background: rgba(255,255,255,.82);
}

.sf-tld-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
}

.sf-domain-price-foot {
  display: inline-block;
  margin-left: 2px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  color: inherit;
  vertical-align: super;
}

.sf-tld-image-section {
  padding-bottom: 0;
}

.sf-tld-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #dfe8f4;
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(13,45,92,.10);
  background: #f6faff;
}

.sf-tld-db-content {
  max-width: 980px;
  margin: 0 auto;
  color: #435064;
  font-size: 16px;
  line-height: 1.75;
}

.sf-tld-db-content h2,
.sf-tld-db-content h3 {
  color: var(--sf-blue-dark);
  line-height: 1.18;
}

.sf-tld-db-content h2 {
  margin: 0 0 18px;
  font-size: clamp(28px, 3vw, 40px);
}

.sf-tld-db-content h3 {
  margin: 28px 0 10px;
  font-size: 24px;
}

.sf-tld-db-content p {
  margin: 0 0 16px;
}

.sf-tld-db-content a {
  color: var(--sf-blue);
  font-weight: 900;
  text-decoration: underline;
}

.sf-tld-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-tld-combo-grid article {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sf-tld-combo-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow);
  border-color: rgba(240,138,28,.42);
}

.sf-tld-combo-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-tld-combo-grid svg {
  width: 25px;
  height: 25px;
}

.sf-tld-combo-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-tld-combo-grid p {
  margin: 0 0 18px;
  color: #435064;
  font-size: 14px;
  line-height: 1.62;
}

.sf-tld-combo-grid a {
  margin-top: auto;
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-tld-combo-grid a:hover {
  text-decoration: underline;
}

.sf-tld-related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sf-tld-related-grid a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(13,45,92,.035);
}

.sf-tld-related-grid a:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

.sf-tld-closing .sf-btn--primary {
  background: #fff;
  color: var(--sf-blue-dark);
}

@media (max-width: 980px) {
  .sf-tld-hero__inner,
  .sf-tld-combo-grid {
    grid-template-columns: 1fr;
  }

  .sf-price-card--tld {
    max-width: 480px;
  }
}

@media (max-width: 680px) {
  .sf-tld-hero__inner {
    padding: 42px 0;
  }

  .sf-tld-hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }
}



/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V2
   Ergänzung: Alle Informationen / Tabs
========================================================= */
.sf-tld-all-info-section {
  background: #fff;
}
.sf-tld-tabs {
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
  overflow: hidden;
}
.sf-tld-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px;
  border-bottom: 1px solid #e8eef6;
  background: linear-gradient(90deg, #f8fbff 0%, #fff7ef 100%);
}
.sf-tld-tab {
  min-height: 42px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue-dark);
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.sf-tld-tab.is-active,
.sf-tld-tab:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}
.sf-tld-tab-panel {
  display: none;
  padding: clamp(22px, 3vw, 32px);
}
.sf-tld-tab-panel.is-active {
  display: block;
}
.sf-tld-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sf-tld-kv div {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 12px;
  background: #f8fbff;
  padding: 14px 16px;
}
.sf-tld-kv span,
.sf-tld-contract-grid article > span {
  color: var(--sf-blue-dark);
  font-size: 13px;
  font-weight: 900;
}
.sf-tld-kv strong {
  color: #435064;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sf-tld-contract-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.sf-tld-contract-grid article {
  min-height: 160px;
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.035);
}
.sf-tld-contract-grid article > span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sf-tld-contract-grid article > strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 24px;
  line-height: 1.15;
}
.sf-tld-contract-grid p {
  margin: 10px 0 0;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.5;
}
.sf-tld-kv--compact {
  grid-template-columns: repeat(3, 1fr);
}
.sf-tld-other-box {
  border: 1px solid #dfe8f4;
  border-radius: 14px;
  background: #f8fbff;
  padding: 22px;
  color: #435064;
  line-height: 1.65;
}
.sf-tld-other-box p:last-child {
  margin-bottom: 0;
}
.sf-tld-other-box a {
  color: var(--sf-blue);
  font-weight: 900;
  text-decoration: underline;
}
@media (max-width: 1180px) {
  .sf-tld-contract-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-tld-kv, .sf-tld-kv--compact { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .sf-tld-tab-buttons { display: grid; }
  .sf-tld-tab { width: 100%; }
  .sf-tld-kv div { grid-template-columns: 1fr; gap: 5px; }
  .sf-tld-contract-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V2.1
   Fix: Alle Informationen Tabs / Tabellen / Vertragskarten
========================================================= */

.sf-tld-all-info-section {
  background: #fff;
}

.sf-tld-tabs {
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(13,45,92,.07);
  overflow: hidden;
}

.sf-tld-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.10), rgba(240,138,28,0) 42%),
    #f8fbff;
  border-bottom: 1px solid #e8eef6;
}

.sf-tld-tab {
  min-height: 42px;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue-dark);
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.sf-tld-tab.is-active,
.sf-tld-tab:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

.sf-tld-tab-panel {
  display: none;
  padding: clamp(22px, 3vw, 34px);
}

.sf-tld-tab-panel.is-active {
  display: block;
}

.sf-tld-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sf-tld-kv > div {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px solid #e1e9f3;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}

.sf-tld-kv span,
.sf-tld-contract-grid article > span {
  color: var(--sf-blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.sf-tld-kv strong {
  color: #263446;
  font-size: 14px;
  line-height: 1.45;
}

.sf-tld-contract-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.sf-tld-contract-grid article {
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.08), rgba(240,138,28,0) 42%),
    #fff;
  padding: 18px;
  min-height: 145px;
}

.sf-tld-contract-grid article > span {
  display: block;
  margin-bottom: 10px;
  color: var(--sf-orange);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sf-tld-contract-grid article > strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 22px;
  line-height: 1.2;
}

.sf-tld-contract-grid article p {
  margin: 10px 0 0;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

.sf-tld-kv--compact {
  grid-template-columns: repeat(3, 1fr);
}

.sf-tld-kv--compact > div {
  grid-template-columns: 1fr;
  gap: 5px;
}

.sf-tld-other-box {
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background: #fff;
  padding: 22px;
  color: #435064;
  line-height: 1.7;
}

.sf-tld-other-box ul {
  margin: 0;
  padding-left: 22px;
}

.sf-tld-other-box li {
  margin: 0 0 8px;
}

.sf-tld-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.sf-tld-combo-grid article {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-tld-combo-grid article > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ff;
  color: var(--sf-blue);
  margin-bottom: 14px;
}

.sf-tld-combo-grid strong {
  display: block;
  color: var(--sf-blue-dark);
  font-size: 20px;
  margin-bottom: 8px;
}

.sf-tld-combo-grid p {
  color: #435064;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.sf-tld-combo-grid a {
  color: var(--sf-blue);
  font-weight: 900;
}

.sf-tld-related-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.sf-tld-related-grid a {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce6f2;
  border-radius: 999px;
  background: #fff;
  color: var(--sf-blue);
  font-weight: 900;
  font-size: 14px;
}

.sf-tld-related-grid a:hover {
  border-color: rgba(240,138,28,.55);
  background: #fff7ef;
  color: #b75f00;
}

@media (max-width: 1180px) {
  .sf-tld-contract-grid,
  .sf-tld-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-tld-kv {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .sf-tld-combo-grid,
  .sf-tld-kv--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sf-tld-tab-buttons {
    display: grid;
  }

  .sf-tld-tab {
    width: 100%;
  }

  .sf-tld-kv > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .sf-tld-contract-grid,
  .sf-tld-related-grid {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V3
   Bottom Domain Check + Rewrite-Hinweis
========================================================= */

.sf-tld-bottom-check-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-tld-bottom-check-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-tld-bottom-check-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.sf-tld-bottom-check-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-tld-bottom-check-form {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-tld-bottom-check-form label {
  display: block;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 9px;
}

.sf-tld-bottom-check-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 155px;
  gap: 10px;
}

.sf-tld-bottom-check-form input,
.sf-tld-bottom-check-form button {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font: inherit;
}

.sf-tld-bottom-check-form input {
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  padding: 0 14px;
}

.sf-tld-bottom-check-form button {
  border: 1px solid var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-tld-bottom-check-form small {
  display: block;
  margin-top: 10px;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .sf-tld-bottom-check-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sf-tld-bottom-check-form > div {
    grid-template-columns: 1fr;
  }
}












/* =========================================================
   Service Fuchs Dynamische TLD-Seiten V3
   Bottom Domain Check + Rewrite-Hinweis
========================================================= */

.sf-tld-bottom-check-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 34px;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 18px;
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at 100% 0%, rgba(240,138,28,.11), rgba(240,138,28,0) 42%),
    linear-gradient(90deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 12px 30px rgba(13,45,92,.055);
}

.sf-tld-bottom-check-box > div > span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--sf-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.sf-tld-bottom-check-box h2 {
  margin: 0 0 14px;
  color: var(--sf-blue-dark);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.14;
}

.sf-tld-bottom-check-box p {
  margin: 0;
  color: #435064;
  font-size: 16px;
  line-height: 1.7;
}

.sf-tld-bottom-check-form {
  border: 1px solid #dfe8f4;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(13,45,92,.045);
}

.sf-tld-bottom-check-form label {
  display: block;
  color: var(--sf-blue-dark);
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 9px;
}

.sf-tld-bottom-check-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 155px;
  gap: 10px;
}

.sf-tld-bottom-check-form input,
.sf-tld-bottom-check-form button {
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  font: inherit;
}

.sf-tld-bottom-check-form input {
  border: 1px solid #d7e0ec;
  background: #fff;
  color: #172033;
  padding: 0 14px;
}

.sf-tld-bottom-check-form button {
  border: 1px solid var(--sf-blue);
  background: var(--sf-blue);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 22px rgba(13,45,92,.18);
}

.sf-tld-bottom-check-form small {
  display: block;
  margin-top: 10px;
  color: #5B6472;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .sf-tld-bottom-check-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sf-tld-bottom-check-form > div {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Service Fuchs Mobile Header-Menü V2
   Untermenüs am Handy standardmäßig geschlossen.
   Öffnung über JS-Button .sf-submenu-toggle.
========================================================= */
@media (max-width: 920px) {
  .sf-nav {
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sf-menu {
    gap: 6px;
  }

  .sf-menu > li {
    position: relative;
    border-bottom: 1px solid #edf3fa;
  }

  .sf-menu > li:last-child {
    border-bottom: 0;
  }

  .sf-menu > li > a {
    min-height: 46px;
    padding: 0 54px 0 12px;
    font-size: 15px;
    font-weight: 850;
    color: var(--sf-blue-dark);
  }

  .sf-menu li.menu-item-has-children > a,
  .sf-menu li.page_item_has_children > a {
    padding-right: 54px;
  }

  .sf-menu .sub-menu {
    position: static !important;
    display: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 10px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .sf-menu li.is-submenu-open > .sub-menu {
    display: grid !important;
    gap: 4px;
  }

  .sf-menu .sub-menu a {
    min-height: 38px;
    padding: 7px 12px;
    border-radius: 8px;
    background: #f8fbff;
    color: #314057;
    white-space: normal;
    font-size: 13px;
    font-weight: 750;
  }

  .sf-menu .sub-menu a:hover {
    background: #fff7ef;
    color: var(--sf-blue);
  }

  .sf-submenu-toggle {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 38px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #dce6f2;
    border-radius: 9px;
    background: #fff;
    color: var(--sf-blue);
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(13,45,92,.045);
  }

  .sf-submenu-toggle::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .sf-menu li.is-submenu-open > .sf-submenu-toggle {
    background: var(--sf-blue);
    color: #fff;
    border-color: var(--sf-blue);
  }

  .sf-menu li.is-submenu-open > .sf-submenu-toggle::before {
    content: "–";
    font-size: 24px;
    transform: translateY(-2px);
  }

  .sf-menu li:hover > .sub-menu,
  .sf-menu li:focus-within > .sub-menu {
    display: none;
  }

  .sf-menu li.is-submenu-open:hover > .sub-menu,
  .sf-menu li.is-submenu-open:focus-within > .sub-menu {
    display: grid !important;
  }
}

@media (min-width: 921px) {
  .sf-submenu-toggle {
    display: none !important;
  }
}






/* =========================================================
   Service Fuchs Mobile Header-Menü V3
   Login + Warenkorb im Hamburger-Menü sichtbar machen.
   Ursache vorher: .sf-header-actions { display:none; } unter 920px.
========================================================= */
@media (max-width: 920px) {
  .sf-mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 0 2px;
    margin-top: 10px;
    border-top: 1px solid #edf3fa;
  }

  .sf-mobile-menu-actions .sf-login-btn,
  .sf-mobile-menu-actions .sf-cart-btn {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .sf-mobile-menu-actions .sf-cart-btn {
    background: #fff;
  }
}

@media (min-width: 921px) {
  .sf-mobile-menu-actions {
    display: none !important;
  }
}