/* ================================================================
   MAXXOGON — Website-Entwurf
   CI (aus Live-Seite ausgelesen): Maxxogon-Blau #0088cd,
   Akzent #cc3366, Hellblau #93c4e6, Textgrau #33373d.
   Fonts: Maven Pro (Headlines) + Roboto Slab (Fließtext).
   Exakte Markenwerte zentral hier in :root austauschbar.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500;600;700;800&family=Roboto+Slab:wght@300;400;500;600&display=swap');

:root{
  /* --- Markenfarben (CI der Live-Seite / Logo) --- */
  --brand:       #0088cd;   /* Primär / Maxxogon-Blau (Logo) — Hauptblau */
  --brand-dark:  #006ca3;   /* Blau für Hover         */
  --navy:        #0a5c88;   /* Dunkles Markenblau (dunkle Flächen) */
  --navy-2:      #0a72aa;   /* Blau, Zwischenton      */
  --blue:        #0a5c88;   /* Sekundärblau           */
  --light-blue:  #93c4e6;   /* Hellblauer Akzent      */
  --accent:      #cc3366;   /* Akzent / Highlight     */
  --accent-dark: #ad2953;

  /* --- Neutrale Töne --- */
  --ink:      #33373d;
  --muted:    #6a7078;
  --bg:       #ffffff;
  --bg-soft:  #f2f7fb;
  --bg-navy:  #063a58;
  --line:     #e2e9f0;
  --white:    #ffffff;

  --maxw: 1160px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(6,58,88,.12);
  --shadow-sm: 0 4px 14px rgba(6,58,88,.09);
  --font: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-head: "Maven Pro", "Segoe UI", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Typo ---------- */
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.2; margin:0 0 .5em; color:var(--navy); font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem, 4.4vw, 3.3rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size:1.25rem; }
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;
}
.lead{ font-size:1.15rem; color:var(--muted); max-width:62ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:1rem; padding:.85rem 1.6rem;
  border-radius:999px; border:2px solid transparent; transition:.2s; text-decoration:none;
}
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-ghost:hover{ background:var(--brand); color:#fff; text-decoration:none; }
.btn-light{ background:#fff; color:var(--brand); border-color:#fff; }
.btn-light:hover{ background:transparent; color:#fff; text-decoration:none; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--navy); font-size:1.35rem; letter-spacing:.02em; }
.brand img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav-links > li{ position:relative; }
.nav-links a{
  color:var(--ink); font-weight:600; font-size:.98rem; padding:.55rem .8rem;
  border-radius:8px; display:inline-block;
}
.nav-links a:hover{ color:var(--accent); text-decoration:none; background:var(--bg-soft); }
.nav-cta{ margin-left:.4rem; }

/* Dropdown Produkte */
.has-sub > .dropdown{
  position:absolute; top:100%; left:0; min-width:250px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:.5rem; opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s; list-style:none; margin:.4rem 0 0;
}
.has-sub:hover .dropdown, .has-sub:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:.55rem .7rem; border-radius:8px; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:26px; height:3px; background:var(--navy); border-radius:3px; margin:5px 0; transition:.2s; }

/* ---------- Sections ---------- */
section{ padding:88px 0; }
.section-soft{ background:var(--bg-soft); }
.section-head{ max-width:70ch; margin-bottom:2.6rem; }
.section-head-banner{ position:relative; max-width:none; padding:52px 44px; border-radius:var(--radius);
  overflow:hidden; background-size:cover; background-position:center; color:#fff; }
.section-head-banner::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,58,88,.9) 0%, rgba(6,58,88,.72) 50%, rgba(10,92,136,.45) 100%); }
.section-head-banner > *{ position:relative; z-index:1; }
.section-head-banner .eyebrow{ color:#ffd0d3; }
.section-head-banner h2{ color:#fff; }
.section-head-banner .lead{ color:#e3eef6; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff; background:var(--navy);
  min-height:560px; display:flex; align-items:center; padding:96px 0 88px;
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease; }
.hero-slide.is-active{ opacity:1; }
.hero-overlay{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(6,58,88,.85) 0%, rgba(6,58,88,.60) 45%, rgba(10,92,136,.22) 100%); }
.hero-content{ position:relative; z-index:2; width:100%; }
.hero-dots{ display:flex; gap:10px; margin-top:2rem; }
.hero-dot{ width:12px; height:12px; border-radius:50%; border:2px solid #fff; background:transparent;
  cursor:pointer; padding:0; transition:.2s; }
.hero-dot.is-active{ background:#fff; }
.hero-dot:hover{ transform:scale(1.15); }
.hero h1{ color:#fff; max-width:18ch; }
.hero .eyebrow{ color:#ffd0d3; }
.hero p{ color:#d8e3f0; font-size:1.2rem; max-width:56ch; margin:0 0 2rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Trust bar ---------- */
.trust{ background:var(--brand); color:#fff; padding:0; }
.trust .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.22); border-radius:0; }
.trust .stat{ background:var(--brand); padding:26px 18px; text-align:center; }
.trust .num{ font-family:var(--font-head); font-size:1.9rem; font-weight:800; color:#fff; }
.trust .lbl{ font-size:.9rem; color:#dcecf7; }

/* ---------- Cards / Grid ---------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow-sm); transition:.2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfd9e6; }
.card .icon{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:rgba(0,136,205,.10); color:var(--brand); font-size:1.5rem; margin-bottom:1rem;
}
.card ul{ margin:.6rem 0 0; padding-left:1.1rem; color:var(--muted); }
.card ul li{ margin:.3rem 0; }

/* Split (Text + Panel) */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.panel{
  background:linear-gradient(160deg,var(--brand),var(--navy)); color:#fff;
  border-radius:var(--radius); padding:38px; box-shadow:var(--shadow);
}
.panel h3{ color:#fff; }
.panel ul{ list-style:none; margin:1rem 0 0; padding:0; }
.panel li{ padding:.55rem 0 .55rem 1.9rem; position:relative; color:#e7eef6; border-top:1px solid rgba(255,255,255,.12); }
.panel li:first-child{ border-top:0; }
.panel li::before{ content:"✓"; position:absolute; left:0; color:#fff; font-weight:800; }

/* Anchor sub-blocks inside Produkte */
.product-block{ scroll-margin-top:90px; }

/* ---------- Produktgruppen: Bento (Startseite) ---------- */
.bento{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:stretch; }
.bento-hero{ background:linear-gradient(150deg,var(--brand) 0%,var(--navy-2) 55%,var(--navy) 100%);
  color:#fff; border-radius:var(--radius); padding:40px; display:flex; flex-direction:column; justify-content:center;
  text-decoration:none; box-shadow:var(--shadow); transition:.2s; }
.bento-hero:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(6,58,88,.22); text-decoration:none; }
.bento-hero .bico{ font-size:2.6rem; line-height:1; margin-bottom:.6rem; }
.bento-hero h3{ color:#fff; font-size:clamp(1.5rem,2.4vw,2rem); margin:.2rem 0 .5rem; }
.bento-hero p{ color:#e3eef8; margin:0 0 1.2rem; }
.bento-hero .fbadge{ align-self:flex-start; background:var(--accent); color:#fff; font-family:var(--font-head);
  font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem; }
.bento-hero .tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.4rem; padding:0; list-style:none; }
.bento-hero .tags li{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.35rem .8rem; font-size:.82rem; }
.bento-hero .fcount{ font-family:var(--font-head); font-weight:800; font-size:1.4rem; }
.bento-side{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bento-side .group-card{ padding:20px; }
.bento-side .group-card:last-child{ grid-column:span 2; }

.group-lead{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.group-rank{ background:var(--accent); color:#fff; font-family:var(--font-head); font-weight:700;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.4rem .85rem; border-radius:999px; }
.group-rank.alt{ background:var(--navy); }
.group-lead-label{ font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:1.05rem; }
.fnum{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.65); color:#fff; font-family:var(--font-head); font-weight:800;
  font-size:1.35rem; display:grid; place-items:center; margin-bottom:1rem; }
.featured{
  background:linear-gradient(150deg,var(--brand) 0%, var(--navy-2) 55%, var(--navy) 100%);
  color:#fff; border-radius:var(--radius); padding:44px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
}
.featured .flag{ display:inline-block; background:var(--accent); color:#fff; font-family:var(--font-head);
  font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem; }
.featured h3{ color:#fff; font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:.6rem; }
.featured p{ color:#e3eef8; margin:0 0 1.4rem; }
.featured .tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem; padding:0; list-style:none; }
.featured .tags li{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.4rem .85rem; font-size:.85rem; }
.featured .fcount{ font-family:var(--font-head); font-size:3.4rem; font-weight:800; line-height:1; }
.featured .fcount span{ font-size:1rem; font-weight:600; color:#cfe3f3; display:block; margin-top:.3rem; }

.group-card{ display:flex; flex-direction:column; }
.group-card .count{ font-family:var(--font-head); font-weight:700; font-size:.8rem; color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem; }
.group-card .more{ margin-top:auto; padding-top:1rem; font-weight:700; color:var(--brand); font-family:var(--font-head); }
.group-card:hover .more{ text-decoration:underline; }
a.group-card, a.group-card:hover{ text-decoration:none; color:inherit; }

/* ---------- Produkt-Detailseiten ---------- */
.product-detail{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  box-shadow:var(--shadow-sm); margin-bottom:26px; scroll-margin-top:90px;
}
.product-detail > h3{ font-size:1.4rem; margin-bottom:.2rem; display:flex; gap:.7rem; align-items:baseline; }
.product-detail .pnum{ background:rgba(0,136,205,.10); color:var(--brand); font-family:var(--font-head);
  font-weight:800; font-size:.95rem; width:34px; height:34px; border-radius:9px; display:inline-grid; place-items:center; flex:none; }
.spec{ display:grid; grid-template-columns:220px 1fr; gap:0 1.6rem; margin:1.2rem 0 0; }
.spec dt{ font-family:var(--font-head); font-weight:700; color:var(--navy); padding:.7rem 0; border-top:1px solid var(--line); }
.spec dd{ margin:0; color:var(--ink); padding:.7rem 0; border-top:1px solid var(--line); }
.sell-box{ margin-top:1.2rem; background:rgba(204,51,102,.06); border:1px solid rgba(204,51,102,.25);
  border-left:4px solid var(--accent); border-radius:10px; padding:14px 18px; }
.sell-box strong{ font-family:var(--font-head); color:var(--accent-dark); display:block; margin-bottom:.2rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }
.group-toc{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:1.6rem 0 0; padding:0; list-style:none; }
.group-toc a{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); border-radius:10px;
  padding:.6rem 1rem; font-family:var(--font-head); font-size:.92rem; font-weight:600; color:#fff; transition:.2s; }
.group-toc a:hover{ background:#fff; color:var(--navy); text-decoration:none; border-color:#fff; }

/* ---------- Kontakt ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start; }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--navy); }
.field input, .field textarea, .field select{
  width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:1rem; background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--blue); border-color:var(--blue); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.checkbox{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.checkbox input{ width:auto; margin-top:.25rem; }
.contact-info{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:32px; }
.contact-info a{ color:var(--navy); font-weight:600; }
.info-row{ display:flex; gap:.7rem; margin:.5rem 0; }

/* ---------- Service-Links ---------- */
.link-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.link-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; }
.link-card h4{ margin:.2rem 0 .4rem; color:var(--navy); font-size:1.05rem; }
.link-card p{ margin:0 0 .6rem; color:var(--muted); font-size:.92rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:#c6d4e4; padding:56px 0 28px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.site-footer h4{ color:#fff; font-size:1rem; letter-spacing:.02em; }
.site-footer a{ color:#c6d4e4; }
.site-footer a:hover{ color:#fff; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:.4rem 0; }
.footer-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:#9fb2c8;
}
.badge{ display:inline-block; background:rgba(255,255,255,.1); padding:.25rem .7rem; border-radius:999px; font-size:.78rem; }

/* ---------- Page hero (Unterseiten) ---------- */
.page-hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--brand),var(--navy)); color:#fff; padding:64px 0; }
.page-hero.has-image{ background-size:cover; background-position:center; }
.page-hero.has-image::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,58,88,.9) 0%, rgba(6,58,88,.68) 50%, rgba(10,92,136,.4) 100%); }
.page-hero > .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; margin:0; }
.breadcrumb{ font-size:.85rem; color:#b9c9dc; margin-bottom:.8rem; }
.breadcrumb a{ color:#dbe6f2; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .split, .contact-grid, .featured, .bento{ grid-template-columns:1fr; gap:24px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .link-grid{ grid-template-columns:repeat(2,1fr); }
  .group-toc{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  section{ padding:60px 0; }
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line); padding:12px 16px; gap:.2rem;
    display:none; box-shadow:var(--shadow);
  }
  .nav-links.open{ display:flex; }
  .has-sub > .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:.2rem 0 .2rem 1rem; }
  .nav-cta{ margin:.4rem 0 0; }
  .trust .container{ grid-template-columns:repeat(2,1fr); }
  .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; }
  .link-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .row-2{ grid-template-columns:1fr; }
  .featured{ padding:30px; }
  .bento-side{ grid-template-columns:1fr; }
  .bento-side .group-card:last-child{ grid-column:span 1; }
  .group-toc{ grid-template-columns:1fr; }
  .spec{ grid-template-columns:1fr; }
  .spec dt{ padding-bottom:0; border-top:1px solid var(--line); }
  .spec dd{ padding-top:.2rem; border-top:0; }
}