:root{
  --navy: #0E2A56;
  --navy-ink: #081B38;
  --accent: #E8552E;
  --accent-dim: #C94A22;
  --cream: #F6F2E9;
  --paper: #FFFFFF;
  --ink: #16202E;
  --slate: #5C6675;
  --line: #E3DCCC;
  --green: #2F7A4D;
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{
  font-family:'Big Shoulders Display', 'Arial Narrow', 'Oswald', Impact, sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:0.01em; line-height:1.05;
  color:var(--navy-ink);
}
.eyebrow{
  font-family:'IBM Plex Mono', 'Courier New', monospace; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dim);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--accent-dim); display:inline-block;}
.mono{font-family:'IBM Plex Mono', monospace;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:14px 24px; border:2px solid var(--navy-ink); border-radius:var(--radius);
  cursor:pointer; background:none; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-dim); border-color:var(--accent-dim); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--navy-ink);}
.btn-outline:hover{background:var(--navy-ink); color:#fff; transform:translateY(-2px);}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.btn-ghost:hover{transform:translateY(-2px); border-color:#fff;}

header.site-header{position:sticky; top:0; z-index:100; background:rgba(245,244,239,.95); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:38px; width:auto; border-radius:8px;}
.brand-text{font-family:'Big Shoulders Display'; font-weight:800; font-size:15px; color:var(--navy-ink); line-height:1.05;}
.brand-text span{display:block; font-family:'IBM Plex Mono'; font-weight:500; font-size:9px; letter-spacing:.1em; color:var(--slate); text-transform:uppercase;}
.nav-links{display:flex; gap:22px; align-items:center;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:110;}
.burger span{width:24px; height:2px; background:var(--navy-ink); display:block; transition:transform .2s ease, opacity .2s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-links a{font-size:13px; font-weight:600; color:var(--navy-ink); text-transform:uppercase; font-family:'IBM Plex Mono'; letter-spacing:.03em;}
.nav-links a:hover{color:var(--accent-dim);}

.hero{
  background:linear-gradient(120deg, rgba(8,27,56,.94) 0%, rgba(8,27,56,.88) 45%, rgba(8,27,56,.7) 100%), url('img/hero-bg.jpg');
  background-size:cover; background-position:center;
  padding:80px 0; position:relative; overflow:hidden;
}
.hero .wrap{position:relative; z-index:1;}
.stamp{
  position:absolute; top:34px; right:5%; width:118px; height:118px;
  border:2px dashed var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-12deg); background:rgba(8,27,56,.4);
}
.stamp-inner{
  width:96px; height:96px; border:1px solid var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'IBM Plex Mono'; color:var(--accent); font-size:9px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.5; padding:6px;
}
@media (max-width:960px){ .stamp{display:none;} }

.page-hero{
  background:linear-gradient(120deg, rgba(8,27,56,.92) 0%, rgba(8,27,56,.86) 50%, rgba(8,27,56,.68) 100%), url('img/hero-bg.jpg');
  background-size:cover; background-position:center;
  padding:44px 0 50px;
}
.page-hero .breadcrumb{color:#B9C7D6; padding-top:0;}
.page-hero .breadcrumb a{color:#B9C7D6;}
.page-hero .breadcrumb a:hover{color:#fff;}
.page-hero .section-head{margin-bottom:0; margin-top:16px;}
.page-hero .section-head h2{color:#fff;}
.page-hero .section-head p{color:#C9D4E0;}
.page-hero .eyebrow{color:var(--accent);}
.page-hero .eyebrow::before{background:var(--accent);}
.hero .eyebrow{color:var(--accent);}
.hero .eyebrow::before{background:var(--accent);}
.hero h1{color:#fff; font-size:clamp(32px,4.5vw,50px); max-width:700px; margin:14px 0 16px;}
.hero p{color:#C9D4E0; max-width:520px; font-size:16px; margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-stats{display:flex; align-items:flex-start; gap:0; border-top:1px solid rgba(255,255,255,.18); margin-top:40px;}
.hero-stats div{flex:1; padding:32px 20px 4px 24px; border-right:1px solid rgba(255,255,255,.18);}
.hero-stats div:first-child{padding-left:0;}
.hero-stats div:last-child{border-right:none;}
.hero-stats b{display:block; font-family:'Big Shoulders Display'; font-size:26px; color:var(--accent); font-weight:800;}
.hero-stats span{font-family:'IBM Plex Mono'; font-size:10.5px; color:#9FB0C2; text-transform:uppercase; letter-spacing:.04em;}

section{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:40px;}
.section-head h2{font-size:clamp(24px,3.2vw,36px); margin:12px 0 10px;}
.section-head p{color:var(--slate); font-size:15px;}
.tag-cream{background:var(--cream);} .tag-paper{background:var(--paper);} .tag-navy{background:var(--navy-ink); color:#fff;}
.tag-navy .section-head h2{color:#fff;} .tag-navy .section-head p{color:#B9C7D6;}
.tag-navy .eyebrow{color:var(--accent);} .tag-navy .eyebrow::before{background:var(--accent);}

.pill-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(178,58,46,.12); border:1px solid rgba(178,58,46,.35);
  color:var(--accent); font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600;
  padding:8px 16px; border-radius:30px; letter-spacing:.02em; margin-bottom:20px;
}
.tag-navy .pill-badge{background:rgba(178,58,46,.18); color:#FF8A78; border-color:rgba(178,58,46,.5);}
.hero h1 em{font-style:italic; color:var(--accent);}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feature-card{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--accent); padding:26px; box-shadow:0 2px 12px rgba(0,0,0,.05); position:relative;}
.feature-card .feat-num{font-family:'Big Shoulders Display'; font-weight:800; font-size:13px; color:var(--accent); letter-spacing:.05em; margin-bottom:10px; display:block;}
.feature-card h3{font-size:15px; text-transform:none; letter-spacing:0; margin-bottom:8px;}
.feature-card p{color:var(--slate); font-size:13.5px;}

.tag-navy .feature-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-top:3px solid var(--accent); box-shadow:none;}
.tag-navy .feature-card h3{color:#fff;}
.tag-navy .feature-card p{color:#B9C7D6;}

.cta-band{background:var(--accent); padding:60px 0; text-align:center;}
.cta-band h2{color:var(--navy-ink); font-size:clamp(24px,3.4vw,36px); margin-bottom:14px;}
.cta-band p{color:#5A2A14; font-size:15px; margin-bottom:26px; max-width:520px; margin-left:auto; margin-right:auto;}
.cta-band .btn-primary{background:var(--navy-ink); border-color:var(--navy-ink); color:#fff;}
.cta-band .btn-primary:hover{background:var(--navy); border-color:var(--navy);}

/* CHIPS & GRID (katalog) */
.chips{display:flex; gap:10px; flex-wrap:wrap; padding:26px 0 8px;}
.chip{
  font-family:'IBM Plex Mono'; font-size:12px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:9px 15px; border:1.5px solid var(--line); border-radius:20px; background:var(--paper); cursor:pointer;
  color:var(--slate); transition:all .15s ease;
}
.chip.active, .chip:hover{border-color:var(--navy-ink); color:var(--navy-ink);}
.chip.active{background:var(--navy-ink); color:#fff; border-color:var(--navy-ink);}

.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:24px 0 60px;}
.product-card{background:var(--paper); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;}
.product-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(10,40,67,.08);}
.product-photo{aspect-ratio:1/1; background:var(--cream); position:relative; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); overflow:hidden;}
.product-photo svg{width:44%; height:44%;}
.product-photo img{width:100%; height:100%; object-fit:cover;}
.icon-fallback{width:44%; height:44%; display:flex; align-items:center; justify-content:center;}
.photo-slot-tag{position:absolute; bottom:8px; right:8px; font-family:'IBM Plex Mono'; font-size:8.5px; color:var(--slate); background:rgba(255,255,255,.85); padding:2px 6px; border-radius:10px;}
.product-info{padding:15px; display:flex; flex-direction:column; gap:6px; flex:1;}
.product-cat{font-family:'IBM Plex Mono'; font-size:10px; color:var(--accent-dim); text-transform:uppercase; letter-spacing:.04em;}
.product-name{font-family:'Inter'; font-weight:700; font-size:13.5px; color:var(--navy-ink); text-transform:none;}
.wa-btn{
  margin-top:8px; text-align:center; padding:9px; border:1.5px solid var(--navy-ink); background:none;
  font-family:'IBM Plex Mono'; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em;
}
.wa-btn:hover{background:var(--navy-ink); color:#fff;}

/* BREADCRUMB */
.breadcrumb{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--slate); padding:20px 0 0; display:flex; gap:8px; align-items:center; text-transform:uppercase; letter-spacing:.03em;}

/* PRODUCT DETAIL */
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:30px 0 80px; align-items:start;}
.pd-photo{aspect-ratio:1/1; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.pd-photo svg{width:38%; height:38%;} .pd-photo img{width:100%; height:100%; object-fit:cover;}
.pd-cat{font-family:'IBM Plex Mono'; font-size:12px; color:var(--accent-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; display:block;}
.pd-title{font-size:clamp(24px,3.2vw,34px); margin-bottom:16px;}
.pd-desc{color:var(--slate); font-size:15px; max-width:460px; margin-bottom:26px;}
.pd-meta{border-top:1px solid var(--line); padding-top:20px; margin-bottom:30px;}
.pd-meta div{display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; border-bottom:1px dashed var(--line);}
.pd-meta div span:first-child{color:var(--slate); font-family:'IBM Plex Mono'; font-size:11.5px; text-transform:uppercase;}
.pd-meta div span:last-child{font-weight:600; color:var(--navy-ink);}
.trust-row{display:flex; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; margin-top:26px;}
.trust-item{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate); font-family:'IBM Plex Mono';}

footer.site-footer{background:var(--navy-ink); color:#B9C7D6; padding:40px 0; margin-top:40px; border-top:1px solid rgba(255,255,255,.12);}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-family:'IBM Plex Mono'; font-size:12px;}
.footer-social{display:flex; gap:14px; justify-content:center; margin-top:26px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.footer-social a:hover{background:var(--accent); transform:translateY(-2px);}
.footer-social svg{width:17px; height:17px;}
.footer-credit{text-align:center; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-family:'IBM Plex Mono'; font-size:11px; color:#7B8695;}
.footer-credit a{color:#9FB0C2; text-decoration:underline;}
.footer-credit a:hover{color:#fff;}

/* ADMIN */
.admin-wrap{max-width:980px; margin:0 auto; padding:40px 24px 100px;}
.admin-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px;}
.admin-table{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line);}
.admin-table th{text-align:left; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; color:var(--slate); padding:12px 14px; border-bottom:1px solid var(--line); background:var(--cream);}
.admin-table td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.tag-pill{font-family:'IBM Plex Mono'; font-size:10.5px; background:var(--cream); border:1px solid var(--line); padding:3px 9px; border-radius:10px; color:var(--slate);}
.row-actions button{background:none; border:none; cursor:pointer; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; margin-right:10px; color:var(--navy);}
.row-actions button.danger{color:#B23A3A;}
.modal-overlay{position:fixed; inset:0; background:rgba(10,40,67,.5); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;}
.modal-card{background:var(--paper); max-width:560px; width:100%; padding:30px; max-height:88vh; overflow:auto;}
.modal-card h3{font-size:18px; text-transform:none; letter-spacing:0; margin-bottom:20px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label{font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate);}
.field input, .field textarea, .field select{
  border:1.5px solid var(--line); padding:10px 12px; font-family:'Inter'; font-size:14px; border-radius:var(--radius); outline:none;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--navy-ink);}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px;}
.admin-note{background:#FFF7ED; border:1px solid #F0D9B5; padding:14px 18px; font-size:12.5px; color:#7A5720; margin-bottom:24px; line-height:1.6;}

.wa-float{position:fixed; bottom:24px; right:24px; z-index:150; background:var(--accent); color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.25);}

/* ARTIKEL */
.article-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:24px 0 60px;}
.article-card{background:var(--paper); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .15s ease;}
.article-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(10,40,67,.08);}
.article-meta{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--accent-dim); text-transform:uppercase; letter-spacing:.04em; display:flex; gap:10px; align-items:center;}
.article-title{font-family:'Inter'; font-weight:700; font-size:18px; color:var(--navy-ink); line-height:1.35;}
.article-excerpt{color:var(--slate); font-size:14px; line-height:1.6;}
.article-readmore{font-family:'IBM Plex Mono'; font-size:11.5px; font-weight:600; color:var(--navy); text-transform:uppercase; margin-top:4px;}

.article-detail{max-width:760px; margin:0 auto; padding:20px 0 70px;}
.article-detail .article-meta{margin-bottom:16px;}
.article-detail h1{font-size:clamp(26px,3.6vw,40px); margin-bottom:22px; text-transform:none; letter-spacing:0;}
.article-body p{color:var(--ink); font-size:16px; line-height:1.85; margin-bottom:20px;}
.article-cta{background:var(--cream); border:1px solid var(--line); padding:26px 30px; margin-top:40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.article-cta p{margin:0; font-size:14px; color:var(--slate); max-width:380px;}

@media (max-width:800px){ .article-grid{grid-template-columns:1fr;} }

@media (max-width:960px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .pd-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .article-grid{grid-template-columns:1fr;}
  .burger{display:flex;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:8px 24px 16px; z-index:99;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--line);}
  .nav-links a:last-child{border-bottom:none;}
}