:root{
  --pn-primary:#96144b;
  --pn-secondary:#008897;
  --pn-accent:#ff9f1a;
  --pn-ink:#111114;
  --pn-muted:#6b7280;
  --pn-bg:#f6f7fb;
  --pn-card:#ffffff;
  --pn-border:#e6e7ef;
  --radius:18px;
  --shadow:0 10px 30px rgba(17,17,20,.08);
  --shadow-lg:0 25px 55px rgba(17,17,20,.12);
  --glass:backdrop-filter:saturate(140%) blur(8px);
  --ring:0 0 0 3px rgba(139,61,255,.12);
}
    html{scroll-behavior:smooth} *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--pn-ink);background:
      radial-gradient(1200px 600px at 100% -50%, rgba(139,61,255,.08), transparent 60%),
      radial-gradient(900px 500px at -20% 20%, rgba(255,90,60,.06), transparent 60%), var(--pn-bg);
      font-family:stratos,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; 
    }
    a{
      color:var(--pn-secondary);
      text-decoration:none;
      transition: 0.2s;
    }
    a:hover{
      color: var(--pn-primary);
      transition: 0.2s;
      scale: 1.1;
    }
    .container{
      max-width:1180px;
      margin-inline:auto;
      padding:28px;
    }
    .hcontainer {
      max-width:1180px;
      margin-inline:auto;
      padding: 28px 28px 0px 28px;
    }
    .ncontainer {
      max-width:1180px;
      margin-inline:auto;
      padding: 0px 28px 0px 28px;
    }
    .nav{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.75);
      border-bottom:1px solid var(--pn-border);
      backdrop-filter:saturate(140%) blur(8px);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-size: 40px;
    }
    .brand .dot{
      width:30px;
      height:30px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--pn-secondary),var(--pn-primary));
    }
    .nav .links{
      display:flex;
      gap:18px;
      align-items:center;}
    .nav a{
      position:relative;
      padding:6px 0;
    }
    .xtnbtn {
      border: 0px black solid;
      border-radius: 999px;
      padding: 4px 10px 4px 10px !important;
      border: 2px solid var(--pn-primary);
      color: var(--pn-primary);
      transition: 0.2s; 
    }
    .xtnbtn:hover{
      background: var(--pn-primary);
      color: white;
      transition: 0.2s;
      scale: 1.1;
    }
    .xtnbtn-a {
      border: 0px black solid;
      border-radius: 999px;
      padding: 4px 10px 4px 10px !important;
      background: var(--pn-primary);
      border: 2px solid var(--pn-primary);
      color: white;
      transition: 0.2s; 
    }
    .xtnbtn-a:hover{
      scale:1.1;
    }
    .hero{
      position:relative;
      border-radius:28px;
      padding:64px 48px;
      overflow:hidden;
      color:#fff;
      box-shadow:var(--shadow-lg);
      background:var(--pn-primary);
      background-image: url(../images/header-centra.png);
      }
    .hero h1{
      font-size:clamp(30px,5.4vw,48px);
      line-height:1.08;
      font-weight: 100;
    }
    .hero p{
      margin:0 0 24px;
      opacity:.98;
      font-size:clamp(16px,2.4vw,19px);
      color: #f5a9c9;
    }
    h2{
      margin:0 0 10px;
      font-size:22px;
      font-weight: 100;
    }
    p{
      margin:0 0 10px;
      color:var(--pn-muted);
    }
    .section{background:var(--pn-card);border:1px solid var(--pn-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
    .grid{display:grid;gap:18px}
    .grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
    .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--pn-border);padding:6px 10px;border-radius:999px;background:#fff;font-size:12px}
    .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
    .muted{color:var(--pn-muted);font-size:13px}
    .prod{
      border:1px solid var(--pn-border);
      border-radius:9px;
      overflow:hidden;
      background:#fff;
      display:flex;
      flex-direction:column;
    }
    .thumb{
      aspect-ratio:16/9;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(139,61,255,.25), rgba(255,90,60,.25));
        color:#fff;
        font-size:22px;
        letter-spacing:.08em;
      }
    .body{
      padding:12px 15px 15px 15px;
      display:flex;
      flex-direction:column;
      gap:15px;
      border-top: 1px solid var(--pn-border);
    }
    .tags{display:flex;flex-wrap:wrap;gap:6px}
    .actions{margin-top:auto;display:flex;gap:8px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--pn-border);border-radius:999px;padding:8px 10px;text-decoration:none;background:#fff;flex:1}
    .btn.primary{
      background:var(--pn-primary);
      color:#fff;border:none;
    }
    .btn.primary:hover{
      background:var(--pn-secondary);
    }
    footer{
      color:var(--pn-muted);
      font-size:12px;
      margin:0 0 12px;
      text-align:center;
    }
/* =========================
   RESPONSIVE TWEAKS (gentle only)
   ========================= */
/* Tablets */
@media (max-width: 1024px){
  .container{ padding:24px; }
  .nav .links{ gap:16px; flex-wrap: wrap; }
  .hero{ padding:56px 40px; }
}

/* Large phones / small tablets */
@media (max-width: 900px){
  .container{ max-width: 940px; padding:22px; }
  .grid.cards{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .toolbar{ gap:8px; }
  .btn{ padding:10px 12px; }
}

/* Phones */
@media (max-width: 700px){
  .container{ padding:20px; }
  .hero{ padding:44px 24px; }
  .grid.cards{ grid-template-columns: 1fr 1fr; }
  .actions{ gap:10px; }
  .btn{ padding:12px 14px; border-radius:999px; }
  .chip{ padding:6px 10px; }
  .nav .links a{ padding:6px 0; }
  .xtnbtn{ display:inline-flex; align-items:center; }
}

/* Small phones */
@media (max-width: 520px){
  .container{ padding:18px; }
  .grid.cards{ grid-template-columns: 1fr; }
  .actions{ flex-direction: column; }
  .btn{ width:100%; }
  .hero p{ font-size:16px; } /* clamp already helps; this is just to keep copy comfy */
}

/* Extra small */
@media (max-width: 380px){
  .container{ padding:16px; }
  .nav .links{ gap:10px; }
}

/* Hover effects only on hover-capable devices */
@media (hover: hover){
  a:hover{ scale: 1.1; }
  .xtnbtn:hover{ scale: 1.1; }
}
@media (hover: none){
  a:hover, .xtnbtn:hover{ transform:none; scale:1; }
}

/* Avoid layout shifts for long link labels */
.nav .links{ flex-wrap: wrap; }

/* Make hero text wrap nicely on tiny screens (clamp already set, this is a safety) */
.hero h1{ word-break: break-word; }
/* --- Scroll-Offset für Ankerziele wegen Sticky-Nav --- */
[id]::before {
  content: "";
  display: block;
  height: 90px; /* Höhe deiner Navigationsleiste */
  margin-top: -90px; /* Negativer Ausgleich der Höhe */
  visibility: hidden;
}
/* Offset für Ankerziele hinter Sticky-Nav */
#mitel, #yealink, #cisco {
  scroll-margin-top: 96px; /* Höhe der Sticky-Nav + etwas Luft */
}
/* === Footer Logos sauber nebeneinander === */
.footerlogos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.footerlogos span {
  font-size: 12px;
  color: var(--pn-muted);
}

.footerlogos .logorow {
  display: flex;
  align-items: center;      /* vertikal mittig */
  justify-content: center;  /* horizontal mittig */
  gap: 18px;                /* Abstand zwischen Logos */
  margin: 10px 0px;
}

.footerlogos .logorow img {
  object-fit: contain;      /* sorgt für sauberes Skalieren */
}
.ftln {
  padding: 0px 30px 0px 30px;
}
.availability {
  float: right;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pn-muted);
  color: white;
  opacity: 0.9;
}

.available {
  background: #e5f7ec; /* grün */
  border: 1px solid #16a34a;
  color: #16a34a;
}

.unavailable {
  border: 1px solid var(--pn-border);
  background: white;
  color: var(--pn-ink);
  cursor: help;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}