:root{
  --navy:#112d4f;
  --navy2:#11407c;
  --blue:#3475b0;
  --cyan:#6fc2ef;
  --green:#55b833;
  --text:#142033;
  --muted:#647083;
  --bg:#f6f8fb;
  --line:#dce4ee;
  --container:1180px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:85px;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{color:inherit}

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


/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.nav{
  height:80px;
  display:flex;
  align-items:center;
  gap:28px;
}

.main-nav{
  display:flex;
  gap:25px;
  margin-left:auto;
}

.main-nav a{
  text-decoration:none;
  font-weight:650;
  color:#536075;
}

.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-weight:900;
  font-size:31px;
  letter-spacing:-3px;
  color:var(--navy);
  line-height:1;
}

.brand span{
  color:#165190;
}

.brand b{
  font-weight:900;
}

.brand i{
  width:8px;
  height:8px;
  background:var(--green);
  position:absolute;
  top:-5px;
  left:51px;
}


/* BUTTONS */

.btn{
  display:inline-flex;
  min-height:50px;
  padding:0 21px;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  text-decoration:none;
  font-weight:780;
  border:1px solid transparent;
}

.btn-small{
  min-height:43px;
}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--navy2),#2f8fd4);
}

.btn-secondary{
  color:#fff;
  border-color:#ffffff55;
}


/* HERO */

.hero{
  color:#fff;
  background:linear-gradient(125deg,#0b2340,#112d4f 55%,#11407c);
  overflow:hidden;
}

.hero-grid{
  min-height:680px;
  padding:85px 0;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}

.kicker,
.eyebrow{
  font-size:.8rem;
  font-weight:820;
  letter-spacing:.12em;
}

.kicker{
  color:#d7e4f0;
}

.green-dot{
  display:inline-block;
  width:9px;
  height:9px;
  background:var(--green);
  border-radius:50%;
  margin-right:9px;
}

.hero h1{
  margin:20px 0 0;
  font-size:clamp(3.2rem,6.5vw,6rem);
  line-height:1.08;
  letter-spacing:-.04em;
}

.hero h1 span{
  display:inline;
  color:#6fc2ef;
  -webkit-text-fill-color:#6fc2ef;
  background:none;
}

.lead{
  font-size:1.22rem;
  color:#d1deeb;
  max-width:720px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:30px 0;
}

.trust-row{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  color:#d7e4f0;
}

.trust-row div{
  color:var(--green);
}

.trust-row b{
  color:#fff;
  margin-left:5px;
}


/* HERO PANEL */

.hero-panel{
  padding:32px;
  border:1px solid #ffffff25;
  border-radius:26px;
  background:#ffffff0d;
}

.panel-head{
  color:#d4e1ee;
}

.hero-panel h2{
  font-size:3rem;
  line-height:1.05;
  margin:25px 0;
}

.hero-panel p{
  color:#c4d4e3;
}

.quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.quick-grid div{
  padding:15px;
  border:1px solid #ffffff20;
  border-radius:14px;
}

.quick-grid b,
.quick-grid small{
  display:block;
}

.quick-grid small{
  color:#b4c6d7;
}


/* =========================================================
   SCHWEBENDE SERVICE-WOLKE
   ========================================================= */

.strip{
  position:relative;
  background:#fff;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.strip .container{
  position:relative;
  min-height:235px;
  max-width:1180px;
  overflow:visible;
}

.strip .cloud-tag{
  position:absolute;
  display:inline-block;
  white-space:nowrap;
  font-weight:750;
  line-height:1;
  color:#6a778b;
  animation:cloudFloat 9s ease-in-out infinite;
  will-change:transform;
}


/* =========================================================
   DISIX WORD CLOUD
   35 Begriffe / kompakt / keine Überlappung
   ========================================================= */

.strip{
  background:#fff;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:10px 0 12px;
}

.strip .container{
  width:min(calc(100% - 40px),var(--container));
  margin:auto;

  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(7,34px);

  column-gap:4px;
  row-gap:2px;

  align-items:center;

  min-height:250px;
  overflow:hidden;
}


/* =========================================================
   BASIS
   ========================================================= */

.strip .cloud-tag{
  position:relative !important;

  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;

  display:block;

  width:max-content;
  max-width:100%;

  white-space:nowrap;

  justify-self:center;
  align-self:center;

  line-height:1;

  font-size:.82rem;
  font-weight:750;

  color:#68758a;

  will-change:transform;

  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}


/* =========================================================
   REIHE 1
   ========================================================= */

/* 01 Managed IT */
.strip .cloud-tag:nth-child(1){
  grid-column:1 / 3;
  grid-row:1;

  font-size:1.12rem;
  font-weight:900;
  color:var(--blue);

  animation:move1 9s infinite;
}

/* 02 Remote Support */
.strip .cloud-tag:nth-child(2){
  grid-column:3 / 5;
  grid-row:1;

  animation:move2 11s infinite;
}

/* 03 Microsoft 365 */
.strip .cloud-tag:nth-child(3){
  grid-column:5 / 8;
  grid-row:1;

  font-size:1.34rem;
  font-weight:900;
  color:var(--blue);

  animation:move3 10s infinite;
}

/* 04 Endpoint Security = Element 5 */
.strip .cloud-tag:nth-child(5){
  grid-column:8 / 10;
  grid-row:1;

  font-size:.80rem;

  animation:move5 13s infinite;
}

/* 05 Backup & Recovery = Element 6 */
.strip .cloud-tag:nth-child(6){
  grid-column:10 / 13;
  grid-row:1;

  font-size:1.02rem;
  font-weight:850;
  color:var(--blue);

  animation:move6 10.5s infinite;
}


/* =========================================================
   REIHE 2
   ========================================================= */

/* 04 Microsoft */
.strip .cloud-tag:nth-child(4){
  grid-column:1 / 3;
  grid-row:2;

  font-size:.92rem;
  font-weight:850;
  color:var(--navy2);

  animation:move4 12s infinite;
}

/* 07 E-Mail Security */
.strip .cloud-tag:nth-child(7){
  grid-column:3 / 5;
  grid-row:2;

  animation:move7 11.5s infinite;
}

/* 09 Antivirus */
.strip .cloud-tag:nth-child(9){
  grid-column:5 / 7;
  grid-row:2;

  font-size:1rem;
  font-weight:850;
  color:var(--blue);

  animation:move9 9.5s infinite;
}

/* 10 Künstliche Intelligenz */
.strip .cloud-tag:nth-child(10){
  grid-column:7 / 10;
  grid-row:2;

  font-size:.88rem;
  font-weight:850;
  color:var(--navy2);

  animation:move10 13s infinite;
}

/* 11 Monitoring */
.strip .cloud-tag:nth-child(11){
  grid-column:10 / 13;
  grid-row:2;

  font-size:.82rem;

  animation:move11 10s infinite;
}


/* =========================================================
   REIHE 3
   ========================================================= */

/* 08 Patch Management */
.strip .cloud-tag:nth-child(8){
  grid-column:1 / 4;
  grid-row:3;

  font-size:.76rem;

  animation:move8 14s infinite;
}

/* 14 Apple */
.strip .cloud-tag:nth-child(14){
  grid-column:4 / 5;
  grid-row:3;

  font-size:.88rem;
  font-weight:850;
  color:var(--navy2);

  animation:move14 12.5s infinite;
}

/* 12 DISIX Care */
.strip .cloud-tag:nth-child(12){
  grid-column:5 / 8;
  grid-row:3;

  font-size:1.5rem;
  font-weight:950;
  color:var(--navy);

  animation:move12 8.5s infinite;
}

/* 13 IT-Sicherheit */
.strip .cloud-tag:nth-child(13){
  grid-column:8 / 10;
  grid-row:3;

  font-size:1rem;
  font-weight:900;
  color:var(--blue);

  animation:move13 11s infinite;
}

/* 15 IT für KMU */
.strip .cloud-tag:nth-child(15){
  grid-column:10 / 13;
  grid-row:3;

  font-size:1.04rem;
  font-weight:900;
  color:var(--navy);

  animation:move15 9.5s infinite;
}


/* =========================================================
   REIHE 4
   ========================================================= */

/* 16 Server */
.strip .cloud-tag:nth-child(16){
  grid-column:1 / 2;
  grid-row:4;

  font-size:.78rem;

  animation:move16 13s infinite;
}

/* 17 Laptop */
.strip .cloud-tag:nth-child(17){
  grid-column:2 / 3;
  grid-row:4;

  font-size:.85rem;
  color:var(--blue);

  animation:move17 10s infinite;
}

/* 18 Arbeitsplatz */
.strip .cloud-tag:nth-child(18){
  grid-column:3 / 5;
  grid-row:4;

  animation:move18 12s infinite;
}

/* 19 KI */
.strip .cloud-tag:nth-child(19){
  grid-column:5 / 6;
  grid-row:4;

  font-size:1rem;
  font-weight:900;
  color:var(--navy);

  animation:move19 8.8s infinite;
}

/* 20 Updates */
.strip .cloud-tag:nth-child(20){
  grid-column:6 / 8;
  grid-row:4;

  font-size:.88rem;
  font-weight:850;
  color:var(--blue);

  animation:move20 11s infinite;
}

/* 21 IT-Dokumentation */
.strip .cloud-tag:nth-child(21){
  grid-column:8 / 10;
  grid-row:4;

  font-size:.74rem;

  animation:move21 13.5s infinite;
}

/* 22 Planbare IT-Kosten */
.strip .cloud-tag:nth-child(22){
  grid-column:10 / 13;
  grid-row:4;

  font-size:.91rem;
  font-weight:850;
  color:var(--navy2);

  animation:move22 10.5s infinite;
}


/* =========================================================
   REIHE 5
   ========================================================= */

/* 23 Cloud */
.strip .cloud-tag:nth-child(23){
  grid-column:1 / 2;
  grid-row:5;

  font-size:.88rem;
  font-weight:850;
  color:var(--blue);

  animation:move23 12s infinite;
}

/* 24 Linux */
.strip .cloud-tag:nth-child(24){
  grid-column:2 / 3;
  grid-row:5;

  font-size:.76rem;

  animation:move24 13s infinite;
}

/* 25 Phishing-Schutz */
.strip .cloud-tag:nth-child(25){
  grid-column:3 / 6;
  grid-row:5;

  font-size:.82rem;

  animation:move25 11s infinite;
}

/* 26 Software */
.strip .cloud-tag:nth-child(26){
  grid-column:6 / 8;
  grid-row:5;

  font-size:.84rem;

  animation:move26 12s infinite;
}

/* 27 AI */
.strip .cloud-tag:nth-child(27){
  grid-column:8 / 10;
  grid-row:5;

  font-size:1rem;
  font-weight:900;
  color:var(--blue);

  animation:move27 9s infinite;
}


/* =========================================================
   REIHE 6
   ========================================================= */

/* 28 IT-Betreuung */
.strip .cloud-tag:nth-child(28){
  grid-column:1 / 3;
  grid-row:6;

  font-size:1rem;
  font-weight:900;
  color:var(--blue);

  animation:move28 9.5s infinite;
}

/* 29 IT-Service */
.strip .cloud-tag:nth-child(29){
  grid-column:3 / 5;
  grid-row:6;

  font-size:.88rem;
  font-weight:850;
  color:var(--navy2);

  animation:move29 12s infinite;
}

/* 30 Managed Services */
.strip .cloud-tag:nth-child(30){
  grid-column:5 / 8;
  grid-row:6;

  font-size:.88rem;
  font-weight:850;
  color:var(--blue);

  animation:move30 10.5s infinite;
}

/* 31 Externe IT-Abteilung */
.strip .cloud-tag:nth-child(31){
  grid-column:8 / 12;
  grid-row:6;

  font-size:.96rem;
  font-weight:900;
  color:var(--navy);

  animation:move31 9s infinite;
}


/* =========================================================
   REIHE 7
   ========================================================= */

/* 32 Datensicherung */
.strip .cloud-tag:nth-child(32){
  grid-column:1 / 4;
  grid-row:7;

  font-size:.85rem;
  font-weight:850;
  color:var(--blue);

  animation:move32 12.5s infinite;
}

/* 33 Virenschutz */
.strip .cloud-tag:nth-child(33){
  grid-column:4 / 6;
  grid-row:7;

  font-size:.78rem;

  animation:move33 11s infinite;
}

/* 34 Systemwartung */
.strip .cloud-tag:nth-child(34){
  grid-column:7 / 10;
  grid-row:7;

  font-size:.80rem;

  animation:move34 13s infinite;
}

/* 35 Deutschlandweit */
.strip .cloud-tag:nth-child(35){
  grid-column:10 / 13;
  grid-row:7;

  font-size:.95rem;
  font-weight:900;
  color:var(--navy2);

  animation:move35 10s infinite;
}


/* =========================================================
   KEINE DEKO-PUNKTE
   ========================================================= */

.strip::before,
.strip::after,
.strip .cloud-tag::before,
.strip .cloud-tag::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   INDIVIDUELLE BEWEGUNGEN
   bewusst nur wenige Pixel, damit nichts kollidiert
   ========================================================= */

@keyframes move1{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(4px,-2px)}
}

@keyframes move2{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,2px)}
}

@keyframes move3{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,3px)}
}

@keyframes move4{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-4px,-2px)}
}

@keyframes move5{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,1px)}
}

@keyframes move6{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2px,-3px)}
}

@keyframes move7{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(4px,2px)}
}

@keyframes move8{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2px,3px)}
}

@keyframes move9{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,-2px)}
}

@keyframes move10{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,2px)}
}

@keyframes move11{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,-3px)}
}

@keyframes move12{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2px,-2px)}
}

@keyframes move13{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,3px)}
}

@keyframes move14{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,-1px)}
}

@keyframes move15{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,3px)}
}

@keyframes move16{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,1px)}
}

@keyframes move17{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,-3px)}
}

@keyframes move18{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2px,2px)}
}

@keyframes move19{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,-2px)}
}

@keyframes move20{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-4px,2px)}
}

@keyframes move21{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,2px)}
}

@keyframes move22{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2px,-3px)}
}

@keyframes move23{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,2px)}
}

@keyframes move24{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,-2px)}
}

@keyframes move25{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,3px)}
}

@keyframes move26{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-4px,1px)}
}

@keyframes move27{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,-2px)}
}

@keyframes move28{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2px,3px)}
}

@keyframes move29{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(4px,-2px)}
}

@keyframes move30{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,2px)}
}

@keyframes move31{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,-3px)}
}

@keyframes move32{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3px,-2px)}
}

@keyframes move33{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,3px)}
}

@keyframes move34{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-4px,1px)}
}

@keyframes move35{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2px,-2px)}
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .strip{
    padding:14px 0;
  }

  .strip .container{
    display:flex;
    flex-wrap:wrap;

    justify-content:center;
    align-items:center;

    min-height:auto;

    gap:11px 18px;
  }

  .strip .cloud-tag,
  .strip .cloud-tag:nth-child(n){
    position:relative !important;

    grid-column:auto;
    grid-row:auto;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    font-size:.82rem;
  }

  .strip .cloud-tag:nth-child(3){
    font-size:1.15rem;
  }

  .strip .cloud-tag:nth-child(12){
    font-size:1.25rem;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:680px){

  .strip{
    padding:13px 0;
  }

  .strip .container{
    width:min(calc(100% - 24px),var(--container));
    gap:9px 14px;
  }

  .strip .cloud-tag,
  .strip .cloud-tag:nth-child(n){
    font-size:.74rem;
  }

  .strip .cloud-tag:nth-child(1),
  .strip .cloud-tag:nth-child(3),
  .strip .cloud-tag:nth-child(10),
  .strip .cloud-tag:nth-child(13),
  .strip .cloud-tag:nth-child(15),
  .strip .cloud-tag:nth-child(28),
  .strip .cloud-tag:nth-child(31),
  .strip .cloud-tag:nth-child(35){
    font-size:.84rem;
  }

  .strip .cloud-tag:nth-child(12){
    font-size:1.05rem;
  }
}


/* =========================================================
   BEWEGUNG ABSCHALTEN, WENN VOM SYSTEM GEWÜNSCHT
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .strip .cloud-tag{
    animation:none !important;
    transform:none !important;
  }
}


/* DISIX Care grüner Punkt 
.strip .cloud-tag.highlight::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:8px;
  border-radius:50%;
  background:var(--green);
  vertical-align:middle;
}*/


/* Schwebe-Animation */
@keyframes cloudFloat{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  25%{
    transform:translate3d(8px,-7px,0);
  }

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

  75%{
    transform:translate3d(6px,3px,0);
  }
}


/* Punkte in der Cloud
.strip::before,
.strip::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  pointer-events:none;
  opacity:.7;
  animation:floatingDot 9s ease-in-out infinite;
}

.strip::before{
  left:23%;
  top:90px;
  background:var(--green);
  box-shadow:
    220px 45px 0 -1px var(--blue),
    410px -10px 0 -1px var(--green),
    620px 70px 0 -1px var(--blue),
    800px 8px 0 -1px var(--green),
    980px 95px 0 -1px var(--green);
}

.strip::after{
  left:7%;
  top:150px;
  background:var(--blue);
  box-shadow:
    190px -35px 0 -1px var(--green),
    360px 40px 0 -1px var(--green),
    580px -25px 0 -1px var(--blue),
    760px 35px 0 -1px var(--green),
    1010px -15px 0 -1px var(--blue);
  animation-delay:-4s;
}

@keyframes floatingDot{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}*/


/* SECTIONS */

.section{
  padding:100px 0;
}

.eyebrow{
  color:var(--blue);
  margin:0 0 12px;
}

.section h2,
.cta h2{
  font-size:clamp(2.2rem,4vw,3.8rem);
  line-height:1.06;
  letter-spacing:-.04em;
  margin:0;
  max-width:850px;
}

.section-head{
  display:grid;
  grid-template-columns:1fr .55fr;
  gap:60px;
  align-items:end;
  margin-bottom:45px;
}

.section-head>p{
  color:var(--muted);
}


/* CARDS */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.cards article{
  padding:27px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  min-height:245px;
}

.cards em{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  background:#edf5fb;
  border-radius:12px;
  color:var(--navy2);
  font-style:normal;
  font-weight:800;
}

.cards h3{
  margin-top:35px;
}

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


/* CARE */

.care{
  background:#edf4f9;
}

.care-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
  margin-top:40px;
}

.care-main{
  padding:32px;
  background:#fff;
  border-radius:24px;
  border:1px solid var(--line);
}

.badge{
  font-size:.75rem;
  font-weight:800;
  background:#edf8ef;
  color:#297241;
  padding:6px 10px;
  border-radius:999px;
}

.care-main h3{
  font-size:2rem;
}

.care-main ul{
  columns:2;
  padding-left:22px;
}

.care-main li{
  margin:8px 0;
}

.care-points{
  display:grid;
  gap:12px;
}

.care-points>div{
  padding:23px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
}

.care-points p{
  margin:4px 0;
  color:var(--muted);
}


/* DARK / CTA */

.dark,
.cta{
  color:#fff;
  background:linear-gradient(125deg,#0b2340,#112d4f 60%,#11407c);
}

.two{
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:70px;
  align-items:center;
}

.light{
  color:#8fd4ff;
}

.dark p,
.cta p{
  color:#c5d5e4;
}

.benefits{
  display:grid;
  gap:11px;
}

.benefits>div{
  padding:18px;
  border:1px solid #ffffff20;
  border-radius:15px;
  background:#ffffff0c;
  color:var(--green);
}

.benefits b{
  color:#fff;
  margin-left:8px;
}

.benefits p{
  margin:3px 0 0 24px;
}


/* FAQ */

.faq{
  display:grid;
  gap:10px;
  max-width:950px;
  margin-top:35px;
}

.faq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  padding:0 20px;
}

.faq summary{
  padding:18px 0;
  font-weight:780;
  cursor:pointer;
  color:var(--navy);
}

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


/* CTA */

.cta{
  padding:95px 0;
}

.contact{
  background:#fff;
  border-radius:24px;
  padding:32px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  box-shadow:0 18px 50px rgba(7,31,58,.12);
}

.contact > small{
  display:block;
  margin-bottom:10px;

  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;

  color:#68758a;
}

.contact-mail{
  display:inline-block;

  margin-bottom:22px;

  font-size:1.65rem;
  font-weight:900;
  line-height:1.1;

  color:var(--navy);
  text-decoration:none;
}

.contact-mail:hover{
  color:var(--blue);
}

.contact .btn{
  margin-bottom:26px;
}


/* Kontaktinformationen */

.contact-info{
  width:100%;

  padding-top:20px;

  border-top:1px solid var(--line);
}

.contact-row{
  display:grid;
  grid-template-columns:135px 1fr;
  gap:16px;

  padding:8px 0;

  font-size:.88rem;
  line-height:1.45;

  color:#52627a;
}

.contact-label{
  font-weight:800;
  color:var(--navy);
}

.contact-row a{
  color:#52627a;
  text-decoration:none;
}

.contact-row a:hover{
  color:var(--blue);
}


/* Datenschutzhinweis */

.contact-note{
  margin:20px 0 0 !important;
  padding-top:16px;

  border-top:1px solid var(--line);

  font-size:.76rem !important;
  line-height:1.5 !important;

  color:#7b8798 !important;
}


@media(max-width:680px){

  .contact{
    padding:25px 22px;
    border-radius:20px;
  }

  .contact-mail{
    font-size:1.35rem;
  }

  .contact-row{
    grid-template-columns:1fr;
    gap:2px;

    padding:8px 0;
  }
}


/* FOOTER */

footer{
  background:#fff;
  padding:35px 0;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.footer a{
  text-decoration:none;
  color:#536075;
}


/* ORIGINAL DISIX LOGO */

.logo-link{
  display:flex;
  align-items:center;
  width:180px;
  flex-shrink:0;
  text-decoration:none;
}

.logo-link img{
  display:block;
  width:100%;
  height:auto;
  max-height:54px;
  object-fit:contain;
  object-position:left center;
}

.footer-logo{
  width:145px;
}

.footer-logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}


/* TABLET */

@media(max-width:980px){

  .main-nav{
    display:none;
  }

  .nav .btn-small{
    margin-left:auto;
  }

  .hero-grid,
  .section-head,
  .care-grid,
  .two{
    grid-template-columns:1fr;
  }

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

  .hero-grid{
    padding:65px 0;
  }

  .hero-panel{
    margin-top:10px;
  }

  .strip .container{
    min-height:245px;
  }

  .strip .cloud-tag:nth-child(3){
    left:34%;
  }

  .strip .cloud-tag:nth-child(5){
    left:70%;
  }

  .strip .cloud-tag:nth-child(10){
    left:45%;
  }

  .strip .cloud-tag:nth-child(11){
    left:72%;
  }
}


/* MOBILE */

@media(max-width:680px){

  .container{
    width:min(calc(100% - 28px),var(--container));
  }

  .nav{
    height:70px;
  }

  .brand{
    font-size:27px;
  }

  .nav .btn-small{
    display:none;
  }

  .hero-grid{
    padding:60px 0;
    gap:35px;
  }

  .hero h1{
    font-size:clamp(2.65rem,12vw,3.7rem);
    line-height:1.08;
    letter-spacing:-.035em;
  }

  .lead{
    font-size:1.05rem;
  }

  .hero-actions .btn{
    width:100%;
  }

  .trust-row{
    display:grid;
    gap:7px;
  }

  .hero-panel h2{
    font-size:2.35rem;
  }

  .quick-grid,
  .cards{
    grid-template-columns:1fr;
  }

  .section{
    padding:70px 0;
  }

  .care-main ul{
    columns:1;
  }

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

  .logo-link{
    width:140px;
  }

  .logo-link img{
    max-height:46px;
  }

  .footer-logo{
    width:135px;
  }


  /* MOBILE CLOUD */

  .strip{
    padding:30px 0;
  }

  .strip .container{
    min-height:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:16px 20px;
    overflow:visible;
  }

  .strip .cloud-tag,
  .strip .cloud-tag:nth-child(n){
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    font-size:.9rem;
    animation:cloudFloatMobile 7s ease-in-out infinite;
  }

  .strip .cloud-tag:nth-child(3),
  .strip .cloud-tag:nth-child(8),
  .strip .cloud-tag:nth-child(11),
  .strip .cloud-tag:nth-child(17){
    font-size:1.05rem;
  }

  .strip .cloud-tag:nth-child(10){
    font-size:1.3rem;
    color:var(--navy);
    font-weight:900;
  }

  .strip::before,
  .strip::after{
    display:none;
  }

  @keyframes cloudFloatMobile{
    0%,
    100%{
      transform:translateY(0);
    }

    50%{
      transform:translateY(-4px);
    }
  }
}

/* PROCESS */

.process-section{
  padding-top:40px;
}

.process-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.process-grid li{
  min-height:235px;
  padding:26px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
}

.process-grid li > span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--navy2);
  font-weight:850;
  background:#edf5fb;
}

.process-grid h3{
  margin:42px 0 8px;
}

.process-grid p{
  margin:0;
  color:var(--muted);
}

/* Tablet */
@media (max-width: 1000px){
  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Mobile */
@media (max-width: 640px){
  .process-section{
    padding-top:25px;
  }

  .process-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .process-grid li{
    min-height:auto;
    padding:22px;
  }

  .process-grid h3{
    margin:24px 0 8px;
    font-size:1.1rem;
  }

  .process-grid p{
    font-size:.92rem;
    line-height:1.6;
  }

  .process-grid li > span{
    width:38px;
    height:38px;
    border-radius:10px;
  }
}

/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

  .strip .cloud-tag,
  .strip::before,
  .strip::after{
    animation:none;
  }

}

.care-includes{
  margin:24px 0;
}

.care-includes-title{
  margin:0 0 15px;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue);
}

.care-includes ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 26px;
}

.care-includes li{
  position:relative;
  padding-left:20px;
}

.care-includes li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  font-weight:850;
  color:var(--blue);
}

.care-includes strong{
  display:block;
  margin-bottom:3px;
  color:var(--navy);
  font-size:.93rem;
}

.care-includes span{
  display:block;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}

.care-support-note{
  margin:22px 0 14px;
  padding:15px 18px;
  border-radius:12px;
  background:#edf5fb;
}

.care-support-note strong{
  display:block;
  color:var(--navy);
  font-size:.95rem;
}

.care-support-note span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.82rem;
}

.care-excludes{
  margin:0 0 22px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.55;
}

@media(max-width:680px){

  .care-includes ul{
    grid-template-columns:1fr;
  }

}

.care-price{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin:24px 0 28px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.care-price small{
  display:block;
  margin-bottom:10px;
  color:var(--blue);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.07em;
}

.care-price-left > div{
  margin-bottom:5px;
}

.care-price-left strong{
  color:var(--navy);
  font-size:1.05rem;
}

.care-price-left p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:.78rem;
}

.care-price-right{
  padding-left:25px;
  border-left:1px solid var(--line);
}

.care-price-right strong{
  display:block;
  margin-bottom:5px;
  color:var(--navy);
  font-size:.95rem;
}

.care-price-right span{
  color:var(--muted);
  font-size:.82rem;
}

@media(max-width:680px){
  .care-price{
    grid-template-columns:1fr;
    gap:18px;
  }

  .care-price-right{
    padding-left:0;
    padding-top:18px;
    border-left:0;
    border-top:1px solid var(--line);
  }
}
.care-intro{
  text-align:justify;
}

.care-points{
  text-align:justify;
}