/* Design-Variablen (Farben, Schatten, Radius, Übergänge) */
:root {
  --bg: #f4f7fb;
  --bg-soft: #eef3f9;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --primary: #0f4c81;
  --primary-soft: #e8f1fb;
  --accent: #1d8cf8;
  --logo-blue: #005b96;
  --logo-red: #ed1f34;
  --logo-gray: #414042;
  --coral: #ed1f34;
  --coral-soft: #fff0f2;
  --line: #ffb3b3;
  --shadow: 0 20px 50px rgba(15, 76, 129, .10);
  --shadow-soft: 0 12px 32px rgba(15, 76, 129, .08);
  --radius: 24px;
  --transition: all .35s ease;
}

/* Globales Box-Modell für berechenbares Layout */
* {
  box-sizing: border-box;
}

/* Weiches Scrollen zu Anker-Links (z. B. #kontakt) */
html {
  scroll-behavior: smooth;
}

/* Grundlayout und Hintergrundatmosphäre der gesamten Seite */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(29, 140, 248, .10), transparent 28%),
    radial-gradient(circle at top left, rgba(15, 76, 129, .10), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
  overflow-x: hidden;
}

/* Standard-Link-Dekoration entfernen (Styling erfolgt pro Komponente) */
a {
  text-decoration: none;
}

/* Wiederverwendbare Section-Abstände und Überschriften-Stile */
.section-padding {
  padding: 100px 0;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: #10233d;
}

.section-subtitle {
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Primärer CTA-Button (Gradient + Hover-Lift) */
.btn-main {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.btn-main:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 18px 36px rgba(15, 76, 129, .18);
}

/* Sekundärer CTA-Button (hell, zurückhaltend) */
.btn-soft {
  background: #fff;
  border: 1px solid rgba(15, 76, 129, .12);
  color: var(--primary);
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  transition: var(--transition);
}

.btn-soft:hover {
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-2px);
}

/* Navbar: ruhige Hero-Navigation */
.navbar {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(15, 76, 129, .05);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: .2px;
}

.navbar-brand-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid rgba(0, 91, 150, .18);
  background: #fff;
}

.navbar-brand-text {
  line-height: 1;
  color: var(--logo-gray);
  font-size: 1.35rem;
}

.navbar-nav .nav-link {
  color: var(--logo-gray);
  font-weight: 650;
  margin: 0 .35rem;
}

.navbar-nav .nav-link:hover {
  color: var(--logo-red);
}

.navbar-nav .dropdown-menu {
  border: none;
  border-radius: 16px;
  padding: .55rem;
  margin-top: .55rem;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.navbar-nav .dropdown-item {
  border-radius: 10px;
  font-weight: 600;
  color: #17324d;
  padding: .55rem .85rem;
}

.navbar-nav .dropdown-item:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Hero-Bereich nach klarer Akademie-/Landingpage-Anmutung */
.hero {
  position: relative;
  padding: 165px 0 135px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
}

.hero>.container {
  position: relative;
  z-index: 2;
}

.hero::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -74px;
  height: 160px;
  background: linear-gradient(180deg, rgba(0, 91, 150, .10), rgba(0, 91, 150, .18));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  right: 14%;
  top: 170px;
  width: 18px;
  height: 18px;
  background: var(--logo-red);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: transparent !important;
  color: var(--logo-blue);
  padding: 0;
  border-radius: 0;
  box-shadow: none !important;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-size: .82rem;
}

.hero h1 {
  font-size: clamp(3rem, 5.7vw, 5.65rem);
  font-weight: 900;
  line-height: 1.03;
  color: var(--logo-gray);
  margin-bottom: 1.55rem;
  letter-spacing: -.02em;
}

.hero h1 span {
  color: var(--logo-blue);
}

.hero p {
  font-size: 1.35rem;
  line-height: 1.75;
  color: #4f4f51;
  max-width: 690px;
  margin-bottom: 2.65rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 3.8rem;
}

.hero .btn-main,
.navbar .btn-main {
  background: var(--logo-red);
  color: #fff;
  border: 2px solid var(--logo-red);
  box-shadow: none;
}

.hero .btn-main {
  min-width: 245px;
  justify-content: center;
  padding: 20px 34px;
  border-radius: 999px;
  font-size: 1.05rem;
}

.navbar .btn-main {
  background: transparent;
  color: var(--logo-red);
  padding: 13px 30px;
  border-radius: 999px;
}

.hero .btn-main:hover {
  background: #d7192d;
  border-color: #d7192d;
  transform: translateY(-2px);
}

.navbar .btn-main:hover {
  background: var(--logo-red);
  color: #fff;
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #7890a3;
  font-size: .95rem;
}

.hero-note i {
  color: #94a9b6;
  font-size: 1.55rem;
  transform: rotate(-28deg);
}

.hero-trust p {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--logo-gray);
  font-weight: 850;
}

.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-source {
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 91, 150, .13);
  border-radius: 12px;
  background: #fff;
}

.trust-source i {
  color: var(--logo-blue);
}

.trust-source span {
  color: var(--logo-gray);
  font-weight: 800;
  font-size: .94rem;
}

.hero-card {
  position: relative;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 32px;
  box-shadow: var(--shadow);
  padding: 30px;
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
  pointer-events: none;
}

.hero-card>* {
  position: relative;
  z-index: 2;
}

.preview-logo {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.2rem;
}

.hero-feature {
  background: #fff;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-feature i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.hero-feature h6 {
  margin: 0 0 4px;
  font-weight: 800;
}

.hero-feature p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--muted);
}

.hero-visual {
  width: min(100%, 520px);
  min-height: 460px;
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-blob {
  position: absolute;
  inset: 22px 0 8px 26px;
  background: var(--logo-blue);
  border-radius: 44% 56% 44% 58% / 48% 38% 62% 52%;
  transform: rotate(-8deg);
  z-index: 0;
}

.hero-main-image {
  position: relative;
  z-index: 3;
  width: 78%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px 38px 8px 38px;
  box-shadow: 0 26px 60px rgba(8, 60, 84, .20);
  background: #fff;
}

.hero-spark {
  position: absolute;
  z-index: 3;
  color: var(--logo-red);
  font-size: 1.5rem;
}

.hero-spark-one {
  top: 58px;
  left: 18px;
}

.hero-spark-two {
  bottom: 86px;
  right: 4px;
  color: var(--logo-red);
  font-size: 1.15rem;
}

.hero-logo-badge {
  position: absolute;
  top: 92px;
  right: 34px;
  z-index: 4;
  width: 86px;
  height: 86px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 42px rgba(0, 91, 150, .18);
  border: 1px solid rgba(0, 91, 150, .12);
}

.hero-logo-badge img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: none;
}

.hero-floating-card {
  position: absolute;
  left: 34px;
  bottom: 42px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 260px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 91, 150, .18);
  color: var(--logo-gray);
  font-weight: 800;
}

.hero-floating-card i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--logo-red);
  flex-shrink: 0;
}

/* Schnellvorteile direkt unter dem Hero */
.info-strip {
  margin-top: 0;
  padding: 26px 0 18px;
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(15, 76, 129, .08);
  border-bottom: 1px solid rgba(15, 76, 129, .08);
}

.info-strip-card {
  padding: 0;
}

.mini-stat {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0 10px;
  border-radius: 0;
  transition: var(--transition);
}

.mini-stat:hover {
  background: transparent;
  transform: none;
}

.mini-stat i {
  width: 38px;
  height: 38px;
  border-radius: 6px 14px 6px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.mini-stat h6 {
  margin: 0 0 4px;
  font-weight: 850;
  color: #071b33;
}

.mini-stat p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: .92rem;
}

/* IT-Fahrplan im DA-inspirierten Roadmap-Layout */
.roadmap-section {
  background: #f4f7f8;
  position: relative;
  overflow: hidden;
}

.roadmap-section .container {
  max-width: 1100px;
}

.roadmap {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 0 190px;
}

.roadmap-line {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.roadmap-curve-layer {
  position: absolute;
  inset: 0;
}

.roadmap-static-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.roadmap-static-path {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.roadmap-static-path-background {
  stroke: #FED1CD;
}

.roadmap-static-path-active {
  stroke: #FD8A81;
  stroke-dasharray: var(--roadmap-static-length, 1);
  stroke-dashoffset: var(--roadmap-static-offset, 1);
  transition: stroke-dashoffset 80ms linear;
  will-change: stroke-dashoffset;
}

.roadmap-static-dot {
  fill: #FD8A81;
  stroke: #fff;
  stroke-width: 180;
}

.roadmap-static-dot-ring {
  fill: #fff;
  stroke: #FD8A81;
  stroke-width: 420;
}

.timeline-curve-svg {
  position: absolute;
  display: block;
  overflow: visible;
}

.timeline-curve-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.timeline-curve-path-background {
  stroke: #FED1CD;
}

.timeline-curve-path-active {
  stroke: #FD8A81;
  stroke-dasharray: var(--timeline-path-length, 1);
  stroke-dashoffset: var(--timeline-path-offset, var(--timeline-path-length, 1));
  transition: stroke-dashoffset 80ms linear;
}

.timeline-point {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.timeline-point-filled {
  background: #FD8A81;
}

.timeline-point-ring {
  background: #fff;
  border: 2px solid #FD8A81;
}

.roadmap-faze {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 36px;
  z-index: 2;
  margin-bottom: 184px;
}

.roadmap-faze-reverse {
  flex-direction: row-reverse;
}

.roadmap-faze-services {
  padding-top: 450px;
}

.roadmap-faze-workflow {
  transform: translateY(90px);
}

.roadmap-faze-final,
.roadmap-faze:last-child {
  margin-bottom: 0;
}

.roadmap-faze-final {
  flex-direction: row;
  justify-content: flex-start;
  min-height: 520px;
}

.roadmap-faze-final .roadmap-map {
  max-width: 620px;
  margin: 0;
  transform: translate(125px, 255px);
}

.roadmap-copy,
.roadmap-map {
  flex: 1;
  min-width: 0;
}

.roadmap-copy {
  max-width: 470px;
  padding-left: 64px;
}

.roadmap-faze-reverse .roadmap-copy {
  padding-left: 64px;
}

.roadmap-map {
  position: relative;
  max-width: 470px;
  margin-left: 52px;
}

.roadmap-faze-reverse .roadmap-map {
  margin-left: 0;
  margin-right: 52px;
}

.roadmap-map-part {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 34px;
  margin-bottom: 34px;
}

.roadmap-map-part:last-child {
  margin-bottom: 0;
}

.roadmap-map-title {
  position: relative;
  display: flex;
  align-items: center;
  color: #06364f;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.35;
  margin: 0 0 8px;
}

.roadmap-map-title .timeline-point {
  display: none;
}

.roadmap-kicker {
  display: block;
  color: var(--logo-blue);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 900;
  margin-bottom: 14px;
}

.roadmap-copy h2 {
  color: #06364f;
  font-size: clamp(1.85rem, 3.5vw, 3.25rem);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0 0 1.35rem;
}

.roadmap-copy p {
  color: #31566b;
  font-size: .95rem;
  line-height: 1.8;
  margin: 0 0 1.45rem;
}

.roadmap-copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roadmap-copy li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #31566b;
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 9px;
}

.roadmap-copy li i {
  color: var(--logo-blue);
  margin-top: 5px;
  font-size: .8rem;
}

.roadmap-map-part p {
  color: #31566b;
  font-size: .86rem;
  line-height: 1.65;
  margin: 0 0 11px;
}

.roadmap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.roadmap-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 91, 150, .10);
  color: #31566b;
  font-size: .8rem;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(0, 91, 150, .05);
}

.roadmap-tags i {
  color: var(--logo-red);
  font-size: .82rem;
}

.roadmap-map-services {
  display: grid;
  grid-template-columns: 1fr;
}

.roadmap-map-part-hover {
  margin-bottom: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.roadmap-hover-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: #31566b;
  font-size: .86rem;
  line-height: 1.55;
  transition: max-height .22s ease, opacity .18s ease, margin-top .18s ease;
}

.roadmap-map-part-hover:hover .roadmap-hover-detail,
.roadmap-map-part-hover:focus-within .roadmap-hover-detail {
  max-height: 82px;
  opacity: 1;
  margin-top: 2px;
}

/* Über-uns-Bereich im sachlichen Systemhaus-Stil */
.arados-style-section {
  padding-top: 120px;
  padding-bottom: 120px;
  background: linear-gradient(180deg, rgba(248, 251, 255, .35), rgba(239, 245, 252, .55));
}

.arados-style-section .container {
  max-width: 1180px;
}

.about-card {
  padding: 0;
  height: 100%;
  max-width: 520px;
}

.arados-style-section .section-title {
  max-width: 520px;
  font-size: clamp(2.35rem, 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: 0;
  color: #071b33;
}

.arados-style-section .text-relaxed {
  color: #5f7188 !important;
  font-size: 1rem;
  line-height: 1.9;
}

.about-list {
  padding: 0;
  margin: 1.9rem 0 0;
  list-style: none;
}

.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 15px;
  color: #5f7188;
  line-height: 1.75;
}

.about-list i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #1677d2;
  font-size: .58rem;
  margin-top: 5px;
  flex-shrink: 0;
}

.about-visual {
  padding: 0;
  height: 100%;
  position: relative;
}

.about-media {
  min-height: 330px;
  border-radius: 4px 30px 4px 30px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(7, 27, 51, .16);
  background: #103d6c;
}

.about-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 35, 67, .92), rgba(17, 91, 156, .68));
  z-index: 1;
}

.about-media::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 150px;
  height: 150px;
  border-radius: 0 32px 0 32px;
  background: rgba(29, 140, 248, .18);
  z-index: 2;
}

.about-media img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
  object-fit: cover;
  filter: saturate(.85);
}

.about-media-caption {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  z-index: 3;
  color: #fff;
  max-width: 460px;
}

.about-media-caption h5 {
  font-size: 1.25rem;
  font-weight: 850;
  margin: 0 0 .7rem;
}

.about-media-caption p {
  margin: 0;
  line-height: 1.75;
  color: rgba(255, 255, 255, .88);
}

.about-facts {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-fact {
  background: #fff;
  border: 1px solid rgba(15, 76, 129, .10);
  border-radius: 3px 18px 3px 18px;
  padding: 20px 18px 18px;
  min-height: 170px;
  box-shadow: 0 14px 35px rgba(15, 76, 129, .08);
}

.about-fact span {
  display: block;
  font-weight: 900;
  color: #1677d2;
  font-size: .86rem;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.about-fact h6 {
  font-size: 1rem;
  font-weight: 850;
  color: #071b33;
  margin: 0 0 .5rem;
}

.about-fact p {
  color: #64748b;
  font-size: .92rem;
  line-height: 1.65;
  margin: 0;
}

/* Leistungssektion mit radialem Hub-and-Spoke-Layout */
.leistungen-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.leistungen-section>.container {
  position: relative;
  z-index: 2;
}

.section-head {
  max-width: 680px;
}

.leistungen-wrapper {
  margin-top: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 251, 255, .95));
  border-radius: 36px;
  box-shadow: var(--shadow);
  padding: 50px 30px;
}

.layout {
  position: relative;
  width: min(100%, 1100px);
  height: 780px;
  margin: 0 auto;
  isolation: isolate;
}

/* Zentrales Marken-Element im Leistungsdiagramm */
.center-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 24px 50px rgba(15, 76, 129, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 5;
  padding: 20px;
  overflow: hidden;
}

.center-box::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
}

.center-box-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.center-logo-img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .16);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.center-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.center-logo-img i {
  font-size: 2rem;
  color: #fff;
}

.center-box h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Positionierte Leistungsknoten rund um das Zentrum */
.node {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.service {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(15, 76, 129, .07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(29, 140, 248, .10), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}

.service i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.service-title {
  font-weight: 800;
  color: #15314d;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

.info-box {
  width: 300px;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  padding: 22px 22px 20px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, 12px);
  transition: var(--transition);
  text-align: left;
  border: 1px solid rgba(15, 76, 129, .07);
  z-index: 8;
}

.info-box h5 {
  margin: 0 0 .6rem;
  font-weight: 800;
  color: #15314d;
}

.info-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.node:hover .service {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 24px 46px rgba(15, 76, 129, .18);
  background: #fff;
}

.node:hover .service::before {
  opacity: 1;
}

.node:hover .info-box {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.node-bottom .info-box {
  top: auto;
  bottom: calc(100% + 18px);
  transform: translate(-50%, -12px);
}

.node-bottom:hover .info-box {
  transform: translate(-50%, 0);
}

/* node-1 = Mitte links: IT-Support */
.node-1 {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.node-1:hover .service {
  transform: translateX(-6px) translateY(-6px) scale(1.04);
}

/* node-2 = unten links: Netzwerk */
.node-2 {
  left: 22%;
  bottom: 0;
  transform: translateX(-50%);
}

.node-2:hover .service {
  transform: translateY(8px) scale(1.04);
}

/* node-3 = unten rechts: Sicherheit */
.node-3 {
  right: 22%;
  bottom: 0;
  transform: translateX(50%);
}

.node-3:hover .service {
  transform: translateY(8px) scale(1.04);
}

/* node-4 = Mitte rechts: Cloud & Backup */
.node-4 {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.node-4:hover .service {
  transform: translateX(6px) translateY(-6px) scale(1.04);
}

/* node-5 = oben rechts: Arbeitsplätze */
.node-5 {
  right: 22%;
  top: 0;
  transform: translateX(50%);
}

.node-5:hover .service {
  transform: translateY(-8px) scale(1.04);
}

/* node-6 = oben links: Web & Automatisierung */
.node-6 {
  left: 22%;
  top: 0;
  transform: translateX(-50%);
}

.node-6:hover .service {
  transform: translateY(-8px) scale(1.04);
}

/* node-7 = unten mittig: SmartHome */
.node-7 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.node-7:hover .service {
  transform: translateY(8px) scale(1.04);
}

/* node-8 = oben mittig: Webdesign */
.node-8 {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.node-8:hover .service {
  transform: translateY(-8px) scale(1.04);
}

.service-network-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.service-network-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.service-network-line-bg {
  stroke: #FED1CD;
}

.service-network-line-active {
  stroke: #FD8A81;
  opacity: .42;
  stroke-dasharray: 18 14;
  animation: serviceNetworkFlow 3s linear infinite;
  transition: opacity .2s ease, stroke-width .2s ease, filter .2s ease;
}

.service-network-branch.is-muted .service-network-line-active {
  opacity: .12;
}

.service-network-branch.is-active .service-network-line-bg {
  stroke: #FD8A81;
  opacity: .24;
}

.service-network-branch.is-active .service-network-line-active {
  opacity: 1;
  stroke-width: 4;
  filter: drop-shadow(0 0 10px rgba(253, 138, 129, .9));
  animation:
    serviceNetworkFlow 1.1s linear infinite,
    serviceNetworkPulse .8s ease-in-out infinite;
}

@keyframes serviceNetworkFlow {
  to {
    stroke-dashoffset: -64;
  }
}

@keyframes serviceNetworkPulse {
  0%,
  100% {
    stroke-width: 3;
  }

  50% {
    stroke-width: 5;
  }
}

/* Verbindungslinien zwischen Zentrum und Leistungsnodes */
.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  overflow: hidden;
  z-index: 2;
  border-radius: 999px;
}

.line::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 59, 59, .0) 20%, rgba(255, 59, 59, .95) 50%, rgba(255, 59, 59, .0) 80%, transparent 100%);
  width: 180px;
  animation: dataFlowX 2.2s linear infinite;
  filter: blur(.2px);
}

.line-vertical {
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}

.line-vertical::before {
  width: 100%;
  height: 180px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 59, 59, .0) 20%, rgba(255, 59, 59, .95) 50%, rgba(255, 59, 59, .0) 80%, transparent 100%);
  animation: dataFlowY 2.2s linear infinite;
}

.line-left {
  top: 50%;
  left: 130px;
  width: 320px;
  height: 3px;
  transform: translateY(-50%);
}

.line-right {
  top: 50%;
  right: 130px;
  width: 320px;
  height: 3px;
  transform: translateY(-50%);
}

.line-top {
  left: 50%;
  top: 130px;
  width: 3px;
  height: 210px;
  transform: translateX(-50%);
}

.line-bottom {
  left: 50%;
  bottom: 130px;
  width: 3px;
  height: 210px;
  transform: translateX(-50%);
}

.line-diagonal {
  width: 260px;
  height: 3px;
}

.line-top-left {
  left: 265px;
  top: 245px;
  transform: rotate(-34deg);
}

.line-top-right {
  right: 265px;
  top: 245px;
  transform: rotate(34deg);
}

.line-bottom-left {
  left: 265px;
  bottom: 245px;
  transform: rotate(34deg);
}

.line-bottom-right {
  right: 265px;
  bottom: 245px;
  transform: rotate(-34deg);
}

@keyframes dataFlowX {
  0% {
    transform: translateX(-180px);
  }

  100% {
    transform: translateX(420px);
  }
}

@keyframes dataFlowY {
  0% {
    transform: translateY(-180px);
  }

  100% {
    transform: translateY(260px);
  }
}

/* Vorteile-Grid und Karten */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.why-card {
  background: #fff;
  border-radius: 24px;
  padding: 26px;
  box-shadow: var(--shadow-soft);
  height: 100%;
  transition: var(--transition);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(15, 76, 129, .14);
}

.why-card i {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.why-card h5 {
  font-weight: 800;
  margin-bottom: .7rem;
  color: #15314d;
}

.why-card p {
  margin: 0;
  line-height: 1.8;
  color: var(--muted);
}

/* Call-to-Action-Block vor dem Kontaktbereich */
.cta-box {
  background: linear-gradient(135deg, #10233d, #0f4c81 60%, #1d8cf8);
  border-radius: 34px;
  box-shadow: var(--shadow);
  padding: 48px 34px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-box::before {
  content: "";
  position: absolute;
  right: -110px;
  top: -110px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
}

.cta-box h2 {
  font-weight: 900;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}

.cta-box p {
  color: rgba(255, 255, 255, .86);
  line-height: 1.9;
  position: relative;
  z-index: 2;
}

/* Kontaktkarten und Formular-UI */
.contact-card {
  background: #fff;
  border-radius: 30px;
  padding: 34px;
  box-shadow: var(--shadow);
  height: 100%;
}

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.contact-item i {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.contact-item h6 {
  margin: 0 0 4px;
  font-weight: 800;
  color: #15314d;
}

.contact-item p,
.contact-item a {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.contact-form .form-control {
  border-radius: 16px;
  min-height: 54px;
  border: 1px solid rgba(15, 76, 129, .12);
  padding: 14px 16px;
  box-shadow: none;
}

.contact-form .form-control:focus {
  border-color: rgba(29, 140, 248, .55);
  box-shadow: 0 0 0 .25rem rgba(29, 140, 248, .12);
}

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

/* Footer-Abschlussbereich */
footer {
  padding: 28px 0 40px;
  color: var(--muted);
}

.footer-box {
  background: #fff;
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: var(--shadow-soft);
}

/* Breakpoint: große Tablets / kleine Laptops */
@media (max-width: 1199.98px) {
  .layout {
    height: 860px;
  }

  .line-left,
  .line-right {
    width: 255px;
  }

  .line-diagonal {
    width: 220px;
  }

  .line-top,
  .line-bottom {
    height: 190px;
  }

  .node-1 {
    left: 8px;
  }

  .node-4 {
    right: 8px;
  }

  .info-box {
    width: 270px;
  }
}

/* Breakpoint: Tablets (Layout wird vertikaler) */
@media (max-width: 991.98px) {
  .section-padding {
    padding: 82px 0;
  }

  .hero {
    padding: 145px 0 88px;
    text-align: center;
  }

  .hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .hero-trust-row {
    justify-content: center;
  }

  .hero-visual {
    margin: 38px auto 0;
    min-height: 420px;
  }

  .hero-floating-card {
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
  }

  .hero-logo-badge {
    top: 72px;
    right: 72px;
  }

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

  .roadmap {
    padding: 32px 0 70px;
  }

  .roadmap-line {
    display: none;
  }

  .roadmap .timeline-point {
    display: none;
  }

  .roadmap-faze,
  .roadmap-faze-reverse {
    flex-direction: column;
    gap: 42px;
    margin-bottom: 76px;
  }

  .roadmap-faze-services,
  .roadmap-faze-workflow,
  .roadmap-faze-final .roadmap-map {
    padding-top: 0;
    padding-left: 0;
    transform: none;
  }

  .roadmap-copy,
  .roadmap-map {
    max-width: none;
  }

  .roadmap-copy,
  .roadmap-faze-reverse .roadmap-copy {
    padding-left: 0;
  }

  .roadmap-map,
  .roadmap-faze-reverse .roadmap-map {
    margin: 0;
  }

  .roadmap-map-part {
    padding-left: 0;
  }

  .arados-style-section {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .about-card,
  .about-visual {
    max-width: none;
  }

  .about-facts {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-fact {
    min-height: auto;
  }

  .leistungen-wrapper {
    padding: 38px 22px;
  }

  .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    height: auto;
    width: 100%;
  }

  .center-box {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 170px;
    height: 170px;
    margin-bottom: 6px;
  }

  .line,
  .line-vertical,
  .line-diagonal,
  .service-network-svg {
    display: none;
  }

  .node {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none !important;
    width: 100%;
    align-items: center;
    gap: 14px;
  }

  .node:hover .service,
  .node-1:hover .service,
  .node-2:hover .service,
  .node-3:hover .service,
  .node-4:hover .service,
  .node-5:hover .service,
  .node-6:hover .service,
  .node-7:hover .service,
  .node-8:hover .service {
    transform: none;
  }

  .service {
    width: 132px;
    height: 132px;
  }

  .service i {
    font-size: 1.75rem;
  }

  .service-title {
    font-size: .96rem;
  }

  .info-box {
    width: min(100%, 520px);
    opacity: 1;
    visibility: visible;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    text-align: center;
  }

  .node-bottom .info-box {
    bottom: auto;
    transform: none;
  }
}

/* Breakpoint: Smartphones */
@media (max-width: 767.98px) {
  .section-padding {
    padding: 72px 0;
  }

  .hero {
    padding: 122px 0 76px;
  }

  .navbar-brand-logo {
    width: 40px;
    height: 40px;
  }

  .navbar-brand-text {
    font-size: 1.25rem;
  }

  .hero-badge {
    font-size: .92rem;
  }

  .hero p {
    font-size: 1.08rem;
    line-height: 1.8;
  }

  .hero .btn-main,
  .hero .btn-soft {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 15px 22px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px !important;
    margin-bottom: 2.6rem;
  }

  .hero-note {
    justify-content: center;
  }

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

  .trust-source {
    min-width: 0;
    justify-content: center;
  }

  .hero-visual {
    width: min(100%, 360px);
    min-height: 360px;
  }

  .hero-main-image {
    width: 76%;
  }

  .hero-blob {
    inset: 28px 14px 22px 24px;
  }

  .hero-floating-card {
    max-width: 250px;
    width: calc(100% - 44px);
    font-size: .9rem;
  }

  .hero-logo-badge {
    top: 58px;
    right: 40px;
    width: 70px;
    height: 70px;
    border-radius: 18px;
  }

  .hero-logo-badge img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .hero-spark-one {
    left: 0;
    top: 48px;
  }

  .info-strip {
    margin-top: 0;
  }

  .roadmap {
    padding-bottom: 56px;
  }

  .roadmap-copy h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .roadmap-tags span {
    font-size: .8rem;
  }

  .info-strip-card,
  .about-card,
  .about-visual,
  .leistungen-wrapper,
  .contact-card,
  .cta-box {
    border-radius: 24px;
  }

  .about-card,
  .about-visual,
  .contact-card {
    padding: 24px;
  }

  .arados-style-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .arados-style-section .section-title {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .about-card,
  .about-visual {
    padding: 0;
  }

  .about-media {
    min-height: 280px;
    border-radius: 4px 24px 4px 24px;
  }

  .about-media img {
    min-height: 280px;
  }

  .about-media-caption {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .center-box {
    width: 150px;
    height: 150px;
  }

  .center-logo-img {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }

  .center-box h4 {
    font-size: 1rem;
  }

  .service {
    width: 118px;
    height: 118px;
    padding: 12px;
  }

  .service i {
    font-size: 1.55rem;
    margin-bottom: 8px;
  }

  .service-title {
    font-size: .9rem;
  }

  .info-box {
    padding: 18px;
    border-radius: 20px;
  }

  .info-box h5 {
    font-size: 1.08rem;
  }

  .info-box p {
    font-size: .97rem;
    line-height: 1.75;
  }

  .mini-stat {
    padding: 10px;
  }

  .mini-stat i,
  .contact-item i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

/* Touch-Geräte: Hover-Transformationen entschärfen */
@media (hover: none) {

  .node:hover .service,
  .node-1:hover .service,
  .node-2:hover .service,
  .node-3:hover .service,
  .node-4:hover .service,
  .node-5:hover .service,
  .node-6:hover .service,
  .node-7:hover .service,
  .node-8:hover .service {
    transform: none;
  }

  .service {
    cursor: default;
  }

  .about-card:hover,
  .about-visual:hover {
    transform: none;
  }
}

/* Utility classes moved from inline style attributes */
.text-comfort {
  line-height: 1.8;
}

.text-relaxed {
  line-height: 1.9;
}

.eyebrow-accent {
  letter-spacing: .14em;
  color: var(--accent);
}

.service-icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 10px;
}

.cta-copy {
  max-width: 760px;
}

.cta-title {
  color: #fff;
}

/* Arbeitsplaetze-Unterseite: grosse Content-Container im B2B-Stil */
.workplace-page {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4f9 100%);
}

.service-page .workplace-hero h1 {
  font-size: clamp(2.7rem, 5vw, 5rem);
}

.service-page .cloud-pc-device,
.service-page .cloud-pc-cloud {
  width: 148px;
  height: 132px;
  text-align: center;
}

.service-page .cloud-pc-device span,
.service-page .cloud-pc-cloud span {
  display: block;
  max-width: 110px;
  line-height: 1.2;
}

.workplace-hero {
  padding: 158px 0 96px;
  background:
    radial-gradient(circle at 82% 18%, rgba(237, 31, 52, .08), transparent 26%),
    radial-gradient(circle at 10% 10%, rgba(0, 91, 150, .13), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.workplace-hero h1,
.workplace-panel h2,
.workplace-request-box h2 {
  color: #06364f;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.workplace-hero h1 {
  font-size: clamp(2.8rem, 5.3vw, 5.4rem);
  margin: 0 0 1.4rem;
}

.workplace-hero p,
.workplace-panel p,
.workplace-request-box p {
  color: #31566b;
  line-height: 1.85;
}

.workplace-hero p {
  font-size: 1.18rem;
  max-width: 640px;
}

.workplace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.workplace-hero-media,
.workplace-panel,
.workplace-request-box {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 91, 150, .10);
  box-shadow: var(--shadow);
}

.workplace-hero-media {
  position: relative;
  margin: 0;
  padding: 14px;
  border-radius: 30px;
  overflow: hidden;
}

.workplace-hero-media img,
.workplace-panel-media img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.workplace-hero-media img {
  aspect-ratio: 16 / 10;
  border-radius: 22px;
}

.workplace-hero-media figcaption {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #06364f;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(0, 91, 150, .14);
}

.workplace-hero-media figcaption i {
  color: var(--logo-red);
}

.workplace-section {
  padding: 92px 0 70px;
}

.workplace-panel {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  margin-bottom: 34px;
  padding: clamp(24px, 4vw, 46px);
  border-radius: 30px;
}

.workplace-panel-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
}

.workplace-panel-media {
  overflow: hidden;
  border-radius: 24px;
  background: #eaf2fa;
}

.workplace-panel-media img {
  aspect-ratio: 16 / 10;
  transition: transform .5s ease;
}

.workplace-panel:hover .workplace-panel-media img {
  transform: scale(1.035);
}

.workplace-panel h2 {
  font-size: clamp(2rem, 3.8vw, 3.65rem);
  margin: 0 0 1.2rem;
}

.workplace-panel p,
.workplace-request-box p {
  font-size: 1rem;
  margin-bottom: 1.35rem;
}

.workplace-checks,
.workplace-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workplace-checks span,
.workplace-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 91, 150, .10);
  color: #31566b;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(0, 91, 150, .05);
}

.workplace-checks i,
.workplace-tags i {
  color: var(--logo-red);
}

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

.workplace-cloud-list div {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(0, 91, 150, .10);
}

.workplace-cloud-list strong,
.workplace-cloud-list span {
  display: block;
}

.workplace-cloud-list strong {
  color: #06364f;
  margin-bottom: 4px;
}

.workplace-cloud-list span {
  color: #527084;
  line-height: 1.65;
}

.cloud-pc-visual {
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 22%, rgba(237, 31, 52, .14), transparent 24%),
    radial-gradient(circle at 24% 74%, rgba(29, 140, 248, .20), transparent 28%),
    linear-gradient(145deg, #f8fcff, #e9f4ff);
  border: 1px solid rgba(0, 91, 150, .10);
}

.cloud-pc-visual::before {
  content: "";
  position: absolute;
  left: 31%;
  right: 31%;
  top: 51%;
  height: 2px;
  border-radius: 999px;
  background: #FED1CD;
  transform: rotate(-28deg);
  transform-origin: left center;
  z-index: 1;
}

.cloud-pc-visual::after {
  content: "";
  position: absolute;
  left: 53%;
  top: 47%;
  width: 18px;
  height: 18px;
  border: 4px solid rgba(253, 138, 129, .22);
  border-radius: 50%;
  background: #FD5B4F;
  box-shadow: 0 0 0 8px rgba(253, 138, 129, .10), 0 0 22px rgba(253, 91, 79, .42);
  transform: translate(-50%, -50%);
  z-index: 5;
  animation: serviceRoadmapDot 1.65s ease-in-out infinite;
}

.cloud-pc-device,
.cloud-pc-cloud {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .94);
  color: #06364f;
  box-shadow: 0 22px 46px rgba(0, 91, 150, .16);
  font-weight: 900;
  z-index: 3;
}

.cloud-pc-device {
  left: 13%;
  top: 54%;
  animation: cloud-pc-float 5.4s ease-in-out infinite;
}

.cloud-pc-cloud {
  right: 13%;
  top: 18%;
  animation: cloud-pc-float 5.4s ease-in-out infinite reverse;
}

.cloud-pc-device i,
.cloud-pc-cloud i {
  color: var(--logo-blue);
  font-size: 2.45rem;
  margin-bottom: 8px;
}

.cloud-pc-line {
  position: absolute;
  left: 31%;
  right: 31%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #FD8A81 18%, #FD5B4F 52%, #FD8A81 82%, transparent);
  transform-origin: left center;
  opacity: .88;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(253, 138, 129, .35));
  animation: serviceRoadmapLine 2.8s ease-in-out infinite;
}

.cloud-pc-line-one {
  top: 51%;
  transform: rotate(-28deg);
}

.cloud-pc-line-two {
  top: 57%;
  transform: rotate(-28deg);
  opacity: .24;
}

.cloud-pc-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--logo-red);
  box-shadow: 0 0 0 8px rgba(237, 31, 52, .12);
  z-index: 4;
  animation: cloud-pc-transfer 3.2s ease-in-out infinite;
}

.cloud-pc-pulse-one {
  left: 31%;
  top: 53%;
}

.cloud-pc-pulse-two {
  left: 31%;
  top: 62%;
  animation-delay: 1.2s;
}

@keyframes serviceRoadmapLine {
  0%,
  100% {
    opacity: .42;
  }

  50% {
    opacity: 1;
  }
}

@keyframes serviceRoadmapDot {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(.86);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}

.workplace-request-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 28px;
}

.workplace-request-box h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: .7rem;
}

.workplace-request-box p {
  max-width: 760px;
  margin-bottom: 0;
}

/* SmartHome-Unterseite: klickbare Demo fuer Kamera, Jalousie, Tuer und Fingerabdruck. */
.webdesign-page {
  background:
    radial-gradient(circle at 82% 8%, rgba(253, 138, 129, .11), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #edf4fa 100%);
}

.webdesign-page .workplace-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(253, 138, 129, .12), transparent 24%),
    radial-gradient(circle at 18% 8%, rgba(0, 91, 150, .16), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
}

.webdesign-page .workplace-hero-media,
.webdesign-page .workplace-panel,
.webdesign-page .workplace-request-box {
  border-color: rgba(0, 91, 150, .14);
  box-shadow: 0 30px 70px rgba(0, 48, 82, .12);
}

.webdesign-page .workplace-hero-media {
  padding: 10px;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(237, 246, 255, .92));
}

.webdesign-page .workplace-hero-media img,
.webdesign-page .workplace-panel-media img {
  border-radius: 26px;
}

.webdesign-page .workplace-panel,
.webdesign-page .workplace-request-box {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 250, 255, .94));
}

.webdesign-page .workplace-checks span,
.webdesign-page .workplace-cloud-list div {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(0, 91, 150, .12);
}

.webdesign-process-media {
  min-height: 420px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .66);
}

.webdesign-process-media img {
  height: 100%;
  min-height: 420px;
}

.webdesign-hosting-panel {
  grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
}

.webdesign-hosting-visual {
  min-height: 360px;
  background:
    radial-gradient(circle at 78% 24%, rgba(253, 138, 129, .16), transparent 26%),
    radial-gradient(circle at 18% 76%, rgba(0, 91, 150, .18), transparent 30%),
    linear-gradient(145deg, #f9fcff, #eaf5ff);
}

.webdesign-hosting-visual .cloud-pc-device,
.webdesign-hosting-visual .cloud-pc-cloud {
  border-radius: 34px;
}

.smarthome-page .workplace-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(237, 31, 52, .11), transparent 24%),
    radial-gradient(circle at 16% 16%, rgba(0, 91, 150, .16), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
}

.smarthome-control-panel {
  grid-template-columns: minmax(0, .78fr) minmax(440px, 1fr);
}

.smarthome-dashboard {
  position: relative;
  min-height: 510px;
  padding: 18px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 10%, rgba(29, 140, 248, .24), transparent 26%),
    radial-gradient(circle at 88% 24%, rgba(237, 31, 52, .18), transparent 24%),
    linear-gradient(145deg, #101821 0%, #17232e 58%, #0d141c 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 56px rgba(0, 32, 55, .24);
  color: #eef8ff;
}

.smarthome-dashboard::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 52%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #FED1CD, #FD8A81 42%, #FD5B4F 58%, #FED1CD);
  opacity: .5;
  transform: rotate(-18deg);
  transform-origin: left center;
  z-index: 0;
  animation: serviceRoadmapLine 2.8s ease-in-out infinite;
}

.smarthome-dashboard::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 43%;
  width: 18px;
  height: 18px;
  border: 4px solid rgba(253, 138, 129, .20);
  border-radius: 50%;
  background: #FD5B4F;
  box-shadow: 0 0 0 8px rgba(253, 138, 129, .10), 0 0 22px rgba(253, 91, 79, .42);
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: serviceRoadmapDot 1.65s ease-in-out infinite;
}

.smart-dashboard-header,
.smart-dashboard-grid {
  position: relative;
  z-index: 2;
}

.smart-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 4px 4px 0;
}

.smart-dashboard-header strong,
.smart-dashboard-kicker {
  display: block;
}

.smart-dashboard-kicker {
  color: rgba(238, 248, 255, .62);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.smart-dashboard-header strong {
  margin-top: 2px;
  font-size: 1.12rem;
}

.smart-live-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--logo-red);
  box-shadow: 0 0 0 9px rgba(237, 31, 52, .16), 0 0 26px rgba(237, 31, 52, .7);
}

.smarthome-dashboard[data-camera="on"] .smart-live-dot {
  animation: smartLivePulse 1.2s ease-in-out infinite;
}

.smart-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.smart-card {
  min-height: 210px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.smart-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: #f8fcff;
  font-weight: 900;
}

.smart-card-title i {
  color: #52b7ff;
}

.smart-camera-view {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(0, 91, 150, .18), rgba(237, 31, 52, .14)),
    url("../img/service-smarthome-dashboard.png") center / cover;
  border: 1px solid rgba(255, 255, 255, .12);
}

.smart-camera-view::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 26, .28);
}

.smart-camera-scan {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  z-index: 2;
  background: rgba(253, 138, 129, .95);
  box-shadow: 0 0 18px rgba(253, 138, 129, .85);
  opacity: 0;
}

.smarthome-dashboard[data-camera="on"] .smart-camera-scan {
  animation: smartCameraScan 1.8s ease-in-out infinite;
  opacity: 1;
}

.smart-camera-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 3;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(13, 20, 28, .72);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}

.smart-window {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #dcefff, #8fc8ec 48%, #234b67);
  border: 1px solid rgba(255, 255, 255, .12);
}

.smart-window span {
  position: relative;
  z-index: 2;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 5px 14px rgba(0, 39, 67, .18);
}

.smart-blind-cover {
  position: absolute;
  inset: 0 0 auto;
  height: 100%;
  background: repeating-linear-gradient(180deg, rgba(15, 37, 51, .95) 0 13px, rgba(35, 71, 91, .95) 13px 21px);
  transform: translateY(-44%);
  transition: transform .45s ease;
  z-index: 1;
}

.smarthome-dashboard[data-blinds="closed"] .smart-blind-cover {
  transform: translateY(0);
}

.smarthome-dashboard[data-blinds="open"] .smart-blind-cover {
  transform: translateY(-86%);
}

.smart-door-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  perspective: 500px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(0, 91, 150, .18), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .10);
}

.smart-door-frame {
  position: absolute;
  width: 66px;
  height: 94px;
  border: 3px solid rgba(255, 255, 255, .24);
  border-radius: 10px 10px 4px 4px;
}

.smart-door {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 86px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(145deg, #f7fbff, #91b9d4);
  transform-origin: left center;
  transition: transform .45s ease, box-shadow .45s ease;
}

.smart-door::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 44%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--logo-red);
}

.smarthome-dashboard[data-door="open"] .smart-door {
  transform: rotateY(-50deg);
  box-shadow: 16px 0 26px rgba(82, 183, 255, .24);
}

.smart-fingerprint {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 112px;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at center, rgba(82, 183, 255, .19), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .10);
}

.smart-fingerprint i {
  color: rgba(238, 248, 255, .72);
  font-size: 4.4rem;
}

.smart-fingerprint span {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 3px;
  background: var(--logo-red);
  box-shadow: 0 0 22px rgba(237, 31, 52, .9);
  opacity: 0;
}

.is-fingerprint-scan .smart-fingerprint span {
  animation: smartFingerprintScan 1.35s ease-in-out;
}

.smart-action {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: #f8fcff;
  font-weight: 900;
  transition: var(--transition);
}

.smart-action:hover,
.smart-action:focus-visible {
  background: var(--logo-red);
  border-color: var(--logo-red);
  color: #fff;
  outline: 0;
}

@keyframes smartLivePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(.74);
    opacity: .62;
  }
}

@keyframes smartCameraScan {
  0% {
    transform: translateY(-42px);
  }

  50% {
    transform: translateY(42px);
  }

  100% {
    transform: translateY(-42px);
  }
}

@keyframes smartFingerprintScan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  12%,
  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(112px);
    opacity: 0;
  }
}

@keyframes cloud-pc-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes cloud-pc-transfer {
  0% {
    transform: translate3d(0, 0, 0) scale(.72);
    opacity: 0;
  }

  14%,
  72% {
    opacity: 1;
  }

  100% {
    transform: translate3d(190px, -98px, 0) scale(1);
    opacity: 0;
  }
}

@media (max-width: 991.98px) {
  .workplace-hero {
    padding: 138px 0 76px;
    text-align: center;
  }

  .workplace-hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .workplace-actions {
    justify-content: center;
  }

  .workplace-panel,
  .workplace-panel-reverse,
  .smarthome-control-panel {
    grid-template-columns: 1fr;
  }

  .workplace-panel-reverse .cloud-pc-visual {
    order: -1;
  }

  .smarthome-dashboard {
    min-height: auto;
  }

  .workplace-request-box {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .workplace-hero {
    padding: 122px 0 64px;
  }

  .workplace-hero h1 {
    font-size: clamp(2.45rem, 13vw, 3.5rem);
  }

  .workplace-hero-media figcaption {
    position: static;
    margin-top: 12px;
    border-radius: 18px;
    align-items: flex-start;
  }

  .workplace-section {
    padding: 64px 0 52px;
  }

  .workplace-panel {
    border-radius: 24px;
    padding: 20px;
  }

  .smart-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .smarthome-dashboard {
    padding: 14px;
    border-radius: 22px;
  }

  .smart-card {
    min-height: 190px;
  }

  .cloud-pc-visual {
    min-height: 330px;
  }

  .cloud-pc-device,
  .cloud-pc-cloud {
    width: 106px;
    height: 106px;
    border-radius: 24px;
  }

  .service-page .cloud-pc-device,
  .service-page .cloud-pc-cloud {
    width: 106px;
    height: 106px;
  }

  .cloud-pc-device i,
  .cloud-pc-cloud i {
    font-size: 2rem;
  }

  .cloud-pc-pulse {
    animation-name: cloud-pc-transfer-mobile;
  }
}

@keyframes cloud-pc-transfer-mobile {
  0% {
    transform: translate3d(0, 0, 0) scale(.72);
    opacity: 0;
  }

  14%,
  72% {
    opacity: 1;
  }

  100% {
    transform: translate3d(112px, -72px, 0) scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-pc-device,
  .cloud-pc-cloud,
  .cloud-pc-visual::after,
  .cloud-pc-line,
  .cloud-pc-pulse,
  .smarthome-dashboard::before,
  .smarthome-dashboard::after,
  .smart-live-dot,
  .smart-camera-scan,
  .smart-fingerprint span {
    animation: none !important;
  }

  .cloud-pc-pulse {
    opacity: .7;
  }
}