.elementor-8 .elementor-element.elementor-element-a96f315{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-a96f315:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-a96f315 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFEDE6;}body.elementor-page-8:not(.elementor-motion-effects-element-type-background), body.elementor-page-8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>healconic – Home</title>
<style>
@import url('https://fonts.bunny.net/css?family=montserrat:300,400,500,600,700&display=swap');
</style>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

*, *:focus, *:active, *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
a, a:visited, a:hover, a:focus, a:active {
  color: inherit;
  text-decoration: none;
}

:root {
  --black:      #0a0a0a;
  --bg:         #EFEDE6;
  --mint:       #cdd4ae;   /* heller Olivton */
  --gray:       #888;
  --left-w:     25%;
  --title-size: clamp(52px, 8vw, 118px);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--black);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══ HERO – Bild + Titel überlappt ═══ */
.hero {
  position: relative;
  /* Genug Platz: Bild + halbe Titelzeile ragt raus */
  padding-bottom: calc(var(--title-size) * 1.05);
}

/* Linke mint-Bar läuft durch den ganzen Hero incl. Titelbereich */
.hero-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--left-w);
  background: var(--mint);
  z-index: 0;
}

/* Bild-Container */
.hero-img-wrap {
  position: relative;
  height: 58vh; min-height: 320px;
  z-index: 1;
  overflow: hidden;
}
.hero-img-wrap .slide-img {
  position: absolute;
  right: 0; top: 0;
  width: 75%; height: 100%;
  background: var(--black) center/cover no-repeat;
}

/* Slides */
.slides { position: absolute; inset: 0; z-index: 2; }
.slide  { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.slide.active { opacity: 1; }

/* Controls: mittig in der Bildhälfte der mint-Bar */
.hero-controls {
  position: absolute;
  /* sitzt bei 50% der Bildhöhe */
  top: calc(58vh / 2);
  transform: translateY(-50%);
  left: 44px;
  z-index: 10;
}
.ctrl-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 8px;
}
.dots { display: flex; gap: 5px; }

.dot {
  width: 34px !important; height: 34px !important;
  border: 1.5px solid var(--black) !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important; font-size: 13px !important;
  color: var(--black) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s, color .2s !important;
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  outline: none !important; box-shadow: none !important;
  user-select: none !important; -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
}
.dot:hover         { background: rgba(10,10,10,.12) !important; }
.dot.active        { background: var(--black) !important; color: var(--mint) !important; border-color: var(--black) !important; }
.dot:not(.active)  { background: transparent !important; color: var(--black) !important; }
.dot:focus, .dot:focus-visible { outline: none !important; box-shadow: none !important; }
.dot:active:not(.active) { background: rgba(10,10,10,.2) !important; }

/* Titel: absolut unten, überlappt Bild und mint-Bar */
.hero-title {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 10;
  padding: 0 44px 0 44px;
  pointer-events: none;
  /* Hintergrund: mint – damit Titel nahtlos in hero-sub übergeht */
  background: linear-gradient(to top, var(--mint) 60%, transparent 100%);
}
.hero-title h1 {
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  font-weight: 900;
  font-size: var(--title-size);
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: .92;
  color: var(--black);
  white-space: nowrap;
}

/* ═══ TEXT unter Hero ═══ */
.hero-sub {
  background: var(--mint);
  padding: calc(var(--title-size) * 0.55) 44px 52px 44px;
}
.hero-sub p {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--black);
  max-width: 860px;
}

/* ═══ SECTION LABEL ═══ */
.section-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 36px;
}

/* ═══ KARTEN ═══ */
.cards-section { padding: 64px 44px 80px; }
.cards-inner   { margin-left: var(--left-w); }
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 60px;
}
.card { cursor: pointer; }
.card-img {
  width: 100%; aspect-ratio: 3/2;
  background: #c8c8c8 center/cover no-repeat;
  margin-bottom: 18px;
  display: block; position: relative; overflow: hidden;
}
.card-img::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.18);
}
.card h4 {
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
  font-weight: 900; font-size: 20px;
  line-height: 1.2; margin-bottom: 7px;
  color: var(--black);
}
.card-meta {
  font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--black);
}
.card p {
  font-size: 13.5px; font-weight: 400;
  line-height: 1.65; color: var(--black); margin-bottom: 20px;
}

/* ═══ BTN ═══ */
.btn {
  display: inline-block;
  border: 1.5px solid var(--black);
  border-radius: 0;
  padding: 10px 20px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--black); background: transparent;
  text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s;
  font-family: 'Montserrat', sans-serif;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  outline: none; box-shadow: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:link, .btn:visited { color: var(--black); background: transparent; text-decoration: none; }
.btn:hover  { background: var(--black); color: var(--bg); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: none; }
.btn:active { background: var(--black); color: var(--bg); outline: none; }

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
  .hero-controls { top: 30vh; left: 20px; }
  .hero-title    { padding: 0 20px; }
  .hero-title h1 { white-space: normal; }
  .hero-sub      { padding: calc(var(--title-size) * 0.5) 24px 40px; }
  .cards-section { padding: 40px 24px 60px; }
  .cards-inner   { margin-left: 0; }
  .cards-grid    { grid-template-columns: 1fr; gap: 36px; }
}
</style>
</head>
<body>

<!-- HERO -->
<div class="hero">
  <div class="hero-bar"></div>

  <!-- Bild -->
  <div class="hero-img-wrap">
    <div class="slides">
      <div class="slide active" id="s0">
        <div class="slide-img" style="background: url('https://picsum.photos/seed/server/1400/800') center/cover no-repeat;"></div>
      </div>
      <div class="slide" id="s1">
        <div class="slide-img" style="background: url('https://picsum.photos/seed/hospital/1400/800') center/cover no-repeat;"></div>
      </div>
      <div class="slide" id="s2">
        <div class="slide-img" style="background: url('https://picsum.photos/seed/office/1400/800') center/cover no-repeat;"></div>
      </div>
    </div>
  </div>

  <!-- Dots: mittig in der Bild-Bar -->
  <div class="hero-controls">
    <div class="ctrl-label">Highlights</div>
    <div class="dots">
      <button class="dot active" onclick="goSlide(0)" tabindex="-1">1</button>
      <button class="dot" onclick="goSlide(1)" tabindex="-1">2</button>
      <button class="dot" onclick="goSlide(2)" tabindex="-1">3</button>
    </div>
  </div>

  <!-- Titel überlappt Bild unten -->
  <div class="hero-title">
    <h1>Ihre IT –<br>Smart &amp; Sicher.</h1>
  </div>
</div>

<!-- Fließtext unter Hero -->
<div class="hero-sub">
  <p>Wir von healconic machen Ihre IT smart und zukunftssicher. Mit maßgeschneiderten Lösungen begleiten wir Unternehmen und medizinische Einrichtungen auf dem Weg zu einer sicheren, effizienten und langfristig stabilen IT-Infrastruktur.</p>
</div>

<!-- KARTEN -->
<div class="cards-section">
  <div class="section-label" style="padding-left: var(--left-w);">Unsere Leistungen</div>
  <div class="cards-inner">
    <div class="cards-grid">

      <div class="card">
        <div class="card-img" data-label="IT-Sicherheit" style="background: url('https://picsum.photos/seed/security/800/600') center/cover no-repeat;"></div>
        <h4>IT-Sicherheit</h4>
        <div class="card-meta">Dienstleistung</div>
        <p>Beratung und Umsetzung im Bereich IT-Sicherheit, BSI-Grundschutz, ISO/IEC 2700x, NIS2 und DSGVO.</p>
        <a class="btn" href="https://healconic.de/dienstleistungen" tabindex="-1">Mehr erfahren</a>
      </div>

      <div class="card">
        <div class="card-img" data-label="Healthcare IT" style="background: url('https://picsum.photos/seed/medical/800/600') center/cover no-repeat;"></div>
        <h4>Healthcare &amp; Praxismanagement</h4>
        <div class="card-meta">Dienstleistung</div>
        <p>Lösungen für medizinische Versorgungszentren, Kliniken und Pflegeeinrichtungen – zertifiziert u.a. nach DIN VDE 0834.</p>
        <a class="btn" href="https://healconic.de/dienstleistungen" tabindex="-1">Mehr erfahren</a>
      </div>

      <div class="card">
        <div class="card-img" data-label="Transformation" style="background: url('https://picsum.photos/seed/transform/800/600') center/cover no-repeat;"></div>
        <h4>Transformation &amp; Governance</h4>
        <div class="card-meta">Dienstleistung</div>
        <p>Spezialisierte Digitalisierungs- und Transformationslösungen für Unternehmen, Kanzleien und medizinische Einrichtungen.</p>
        <a class="btn" href="https://healconic.de/dienstleistungen" tabindex="-1">Mehr erfahren</a>
      </div>

      <div class="card">
        <div class="card-img" data-label="Telekommunikation" style="background: url('https://picsum.photos/seed/network/800/600') center/cover no-repeat;"></div>
        <h4>Telekommunikation &amp; Netzwerktechnik</h4>
        <div class="card-meta">Dienstleistung</div>
        <p>Premium Networking Solutions – Informations- und Telekommunikationsinfrastruktur mit ausgewählten Partnern.</p>
        <a class="btn" href="https://healconic.de/dienstleistungen" tabindex="-1">Mehr erfahren</a>
      </div>

    </div>
  </div>
</div>

<script>
let cur = 0, timer;
function goSlide(n) {
  document.getElementById('s'+cur).classList.remove('active');
  document.querySelectorAll('.dot')[cur].classList.remove('active');
  cur = n;
  document.getElementById('s'+cur).classList.add('active');
  document.querySelectorAll('.dot')[cur].classList.add('active');
  clearInterval(timer);
  timer = setInterval(() => goSlide((cur+1)%3), 5000);
}
timer = setInterval(() => goSlide((cur+1)%3), 5000);
document.addEventListener('mousedown', e => {
  if (e.target.closest('button, a')) e.target.blur();
});
</script>
</body>
</html>/* End custom CSS */