/* =========================================================
   fobi · Sicherheit & Datenschutz · finale Fassung
   ========================================================= */

.fsd-section{
  --fsd-bg:#001f41;
  --fsd-accent-on-dark:#9eddf5;
  --fsd-white-70:rgb(255 255 255 / 70%);
  --fsd-white-55:rgb(255 255 255 / 55%);
  --fsd-border:rgb(255 255 255 / 10%);
  --fsd-card-bg:rgb(255 255 255 / 4%);

  width:100%;
  padding:120px 0;
  background:var(--fsd-bg);
  color:#fff;
}

.fsd-layout{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:64px;
  align-items:start;
}


/* =========================================================
   LINKER TEXTBLOCK
   ========================================================= */

.fsd-copy{
  max-width:390px;
  opacity:0;
  transform:translateY(10px);
  transition:
    opacity 420ms var(--fw-ease),
    transform 420ms var(--fw-ease);
}

.fsd-section.is-visible .fsd-copy{
  opacity:1;
  transform:none;
}

.fsd-eyebrow{
  margin-bottom:22px;
  color:var(--fsd-accent-on-dark);
}

.fsd-copy h2{
  max-width:370px;
  margin:0;
  color:#fff;
  font-size:var(--fw-h2);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.035em;
}

.fsd-intro{
  margin:28px 0 0;
  color:var(--fsd-white-70);
  font-size:1rem;
  line-height:1.7;
}

.fsd-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  margin-top:36px;
}

.fsd-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 0 7px;
  color:#fff;
  font-size:.875rem;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
}

.fsd-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--fsd-accent-on-dark);
  transform-origin:left;
  opacity:.8;
}

.fsd-links .icon{
  width:15px;
  height:15px;
  transition:transform 180ms var(--fw-ease);
}

@media(hover:hover) and (pointer:fine){
  .fsd-links a:hover .icon{
    transform:translateX(3px);
  }
}


/* =========================================================
   RECHTER BEREICH
   ========================================================= */

.fsd-content{
  min-width:0;
}

.fsd-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
}

.fsd-card{
  min-width:0;
  min-height:224px;
  padding:24px;
  border:1px solid var(--fsd-border);
  border-radius:var(--fw-radius-card);
  background:var(--fsd-card-bg);

  opacity:0;
  transform:translateY(10px);
  transition:
    opacity 420ms var(--fw-ease),
    transform 420ms var(--fw-ease);
  transition-delay:calc(var(--i) * 60ms);
}

.fsd-section.is-visible .fsd-card{
  opacity:1;
  transform:none;
}


/* ICONS */

.fsd-icon{
  width:20px;
  height:20px;
  display:block;
  margin-bottom:28px;
  color:var(--fsd-accent-on-dark);
}

.fsd-icon .icon{
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* TEXT DER KACHEL */

.fsd-card h3{
  margin:0;
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
}

.fsd-fact{
  margin:9px 0 0;
  color:var(--fsd-accent-on-dark);
  font-family:
    ui-monospace,
    "SFMono-Regular",
    "SF Mono",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.fsd-description{
  margin:16px 0 0;
  color:var(--fsd-white-70);
  font-size:14px;
  line-height:1.6;
}


/* FOOTNOTE */

.fsd-footnote{
  display:flex;
  align-items:center;
  gap:8px;
  margin:20px 0 0;
  color:var(--fsd-white-55);
  font-size:13px;
  line-height:1.5;
}

.fsd-footnote span + span::before{
  content:"·";
  margin-right:8px;
}


/* =========================================================
   TABLET · 768–1023
   ========================================================= */

@media(max-width:1023px) and (min-width:768px){

  .fsd-section{
    padding:96px 0;
  }

  .fsd-layout{
    grid-template-columns:1fr;
    gap:48px;
  }

  .fsd-copy{
    max-width:720px;
  }

  .fsd-copy h2{
    max-width:600px;
  }

  .fsd-intro{
    max-width:700px;
  }

  .fsd-links{
    flex-direction:row;
    flex-wrap:wrap;
    gap:18px 30px;
  }

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

  .fsd-card{
    min-height:210px;
  }
}


/* =========================================================
   SMARTPHONE
   Keine Kacheln – kompakte Datenliste
   ========================================================= */

@media(max-width:767px){

  .fsd-section{
    padding:72px 0;
  }

  .fsd-layout{
    display:block;
  }

  .fsd-copy{
    max-width:none;
  }

  .fsd-eyebrow{
    margin-bottom:18px;
  }

  .fsd-copy h2{
    max-width:340px;
    font-size:30px;
    line-height:1.08;
  }

  .fsd-intro{
    margin-top:20px;
    font-size:.9375rem;
    line-height:1.65;
  }

  .fsd-links{
    gap:14px;
    margin-top:28px;
  }

  .fsd-content{
    margin-top:42px;
  }

  .fsd-grid{
    display:block;
    border-top:1px solid var(--fsd-border);
  }

  .fsd-card{
    min-height:0;
    display:grid;
    grid-template-columns:24px minmax(0,1fr);
    gap:16px;
    padding:20px 0;
    border:0;
    border-bottom:1px solid var(--fsd-border);
    border-radius:0;
    background:transparent;
  }

  .fsd-icon{
    width:20px;
    height:20px;
    margin:2px 0 0;
  }

  .fsd-card h3{
    font-size:15px;
  }

  .fsd-fact{
    margin-top:6px;
    font-size:11px;
  }

  .fsd-description{
    display:none;
  }

  .fsd-footnote{
    display:grid;
    gap:4px;
    margin-top:20px;
    font-size:13px;
  }

  .fsd-footnote span + span::before{
    content:none;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  .fsd-copy,
  .fsd-card,
  .fsd-section.is-visible .fsd-copy,
  .fsd-section.is-visible .fsd-card{
    opacity:1;
    transform:none;
    transition:none;
  }

  .fsd-links .icon{
    transition:none;
  }
}