/* ===== Farbpalette ======================================================= */
:root {
  --c-bg: #ffffff;
  --c-dark: #1b1b1f;
  --c-accent: #0078ff;
  --c-muted: #f0f3f6;
  --c-text: #2d2d33;
  --c-overlay: rgba(0, 0, 0, 0.55);
  --radius: 12px;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

*,
*::before,
*::after {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.5;
}

/* === HERO ================================================= */
.hero { position: relative; height: 100vh; background: url("background.jpg") center/cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0;background: #1b1b1f; opacity: 0.70; pointer-events: none; z-index: 0;}
.monitor { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 820px; max-width: 80%; }
.monitor__bezel { background:#0e0e12;border:12px solid #1f1f26;border-radius:18px;padding:1.5rem;box-shadow:0 20px 35px rgba(0,0,0,.4);}
.monitor__screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.monitor__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.monitor__screen img.active{opacity:1;}
.monitor__led{width:8px;height:8px;border-radius:50%;background:#24e65d;margin:6px auto 0;}
.monitor__stand{width:120px;height:10px;margin:14px auto 0;background:#1f1f26;border-radius:3px;}
.hero__overlay{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:40%;text-align:left;color:#fff;}
.logo{width:200px;height:auto;margin-bottom:1rem;}
.hero__overlay h1{font-size:2.5rem;margin-bottom:.5rem;}
.hero__overlay p{font-size:1.2rem;}

/* === SECTION ============================================================ */

.section{padding:4rem 1.5rem;text-align:center;}
.section h2{font-size:2.2rem;margin-bottom:2rem;}

/* === TEAM with hover zoom ============================================== */
.team{--min:260px;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));justify-items:center;}
.card{background: url("card_bg.png");border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.25);padding:1.5rem 1rem 2rem;width:100%;max-width:320px;transition:transform .25s ease,box-shadow .25s ease;cursor:pointer;}
.card:hover{transform:scale(1.06);box-shadow:0 12px 30px rgba(0,0,0,.45);}
.card img{width:120px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;margin:-60px auto 1rem;box-shadow:var(--shadow);}
.card h3{margin-top:.5rem;font-size:1.1rem;color:var(--c-dark);}
.card p{font-size:.9rem;}

/* === MODAL ============================================================= */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.modal.open{opacity:1;pointer-events:auto;}
.modal__content{position:relative;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);padding:1rem;border-radius:var(--radius);box-shadow:0 12px 26px rgba(0,0,0,.4);}
.modal__content img{width:340px;max-width:90vw;height:auto;border-radius:var(--radius);}
.modal__close{position:absolute;top:-14px;right:-14px;width:32px;height:32px;background:#fff;border-radius:50%;display:grid;place-content:center;font-weight:bold;cursor:pointer;}

/* === FOOTER ============================================================ */
footer{background:var(--c-dark);color:#fff;text-align:center;padding:2rem 1rem;display:grid;gap:1rem;}
.footer__qr{display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;}
.footer__qr img{width:90px;border-radius:var(--radius);background:#e6e6e6;}

/* === MEDIA ============================================================= */
@media(max-width:600px){
 .hero__overlay h1{font-size:1.8rem;}
 .hero__overlay{max-width:60%;}
 .monitor{width:90%;right:2%;}
}