/* ===== Subtle green accents via lines/ornaments; text remains neutral ===== */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }

:root{
  --bg:#0a0a0a;            /* dark background */
  --fg:#f5f5f5;            /* main text */
  --muted:#bdbdbd;         /* secondary text */
  --border:#1e1e1e;        /* base borders */
  --accent:#8fbf8a;        /* olive-green accent for lines */
  --accent-weak: rgba(143,191,138,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.6);
  --radius: 18px;
  --container: 1200px;
}

body{
  margin:0;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  line-height:1.5;
  background:var(--bg);
  color:var(--fg);
}

a{ color:inherit; text-decoration:none; }
a:focus{ outline:2px dashed var(--accent); outline-offset:2px; }

img{ max-width:100%; height:auto; display:block; } /* original images, no filter */

.container{ width:min(var(--container),92vw); margin-inline:auto; }

/* ===== Header / Navigation ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.9);
  backdrop-filter:saturate(0) blur(2px);
  border-bottom:1px solid var(--border);
}

.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; }
.brand{ letter-spacing:.08em; font-weight:700; font-size:1.1rem; text-transform:uppercase; }
.brand small{ display:block; font-weight:400; font-size:.7rem; color:var(--muted); letter-spacing:.18em; }

nav ul{ display:flex; gap:1.4rem; list-style:none; margin:0; padding:0; }
nav a{ position:relative; padding-block:.25rem; }
nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, transparent 0 10%, var(--accent) 50%, transparent 90% 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav a:hover::after, nav a:focus::after{ transform:scaleX(1); }

.menu-btn{ display:none; border:1px solid var(--border); background:#111; color:var(--fg); padding:.5rem .7rem; border-radius:10px; }

/* ===== Hero ===== */
.hero{ isolation:isolate; position:relative; }
.hero .bg{ position:absolute; inset:0; background:linear-gradient(180deg,#111 0%, #0a0a0a 60%); z-index:-1; }
.hero .inner{ padding:9rem 0 6rem; }
.kicker{ font-family:ui-sans-serif, system-ui; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); font-size:.8rem; }
h1{ font-size:clamp(2.1rem,4.5vw,4rem); line-height:1.05; margin:.3rem 0 1rem; }

/* ===== Sections & ornament lines ===== */
.section{ padding:4.2rem 0; border-top:1px solid var(--accent-weak); } /* subtle green divider */
h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 .75rem 0; position:relative; }
h2::after{
  content:""; display:block; height:1px; width:min(160px,40%);
  background:linear-gradient(90deg, var(--accent), transparent);
  margin-top:.4rem;
  opacity:.7;
}

.meta{ color:var(--muted); font-size:.95rem; }

/* ===== Cards / Panels ===== */
.history{ display:grid; gap:2rem; grid-template-columns:1.1fr .9fr; align-items:start; }
.panel{
  background:#0f0f0f; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow);
  position:relative;
}
/* ornamental corner lines on panels */
.panel::before, .panel::after{
  content:""; position:absolute; width:38px; height:10px;
  border-top:1px solid var(--accent-weak); border-left:1px solid var(--accent-weak);
  top:10px; left:10px;
}
.panel::after{
  left:auto; right:10px; border-left:none; border-right:1px solid var(--accent-weak);
}

/* ===== Product cards ===== */
.products{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); }
.card{ display:flex; flex-direction:column; gap:.9rem; background:#0f0f0f; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); }
.badge{ font-size:.75rem; border:1px solid var(--accent-weak); border-radius:999px; padding:.25rem .6rem; color:var(--muted); align-self:flex-start; }
.card h3{ margin:.2rem 0 .1rem; font-size:1.1rem; } /* keep text neutral */
.card .info{ color:var(--muted); font-size:.9rem; }

/* ===== Process steps with line top ===== */
.process{ display:grid; gap:1.2rem; grid-template-columns:repeat(4,1fr); }
.step{ background:#0f0f0f; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; position:relative; }
.step::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent-weak);
}

/* ===== Shop (subtle hover frame) ===== */
.shop-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.shop-item{ background:#0f0f0f; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); transition:border-color .2s ease, box-shadow .2s ease; }
.shop-item:hover{ border-color:var(--accent-weak); box-shadow:0 0 0 1px var(--accent-weak), var(--shadow); }
.price{ color:var(--muted); font-size:.95rem; }
button{ cursor:pointer; background:#111; border:1px solid #fff; color:#fff; border-radius:12px; padding:.8rem 1rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; transition:border-color .2s ease, box-shadow .2s ease; }
button:hover{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-weak); }

/* ===== Awards ===== */
.awards{ display:grid; gap:1.2rem; grid-template-columns:repeat(3,1fr); }
.award{ background:#0f0f0f; border:1px solid var(--border); border-radius:var(--radius); padding:1rem; position:relative; }
.award::after{ content:""; position:absolute; left:1rem; right:1rem; bottom:.6rem; height:1px; background:linear-gradient(90deg, transparent, var(--accent-weak), transparent); }

.medal{ font-family:ui-sans-serif, system-ui; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:#fff; border:1px solid var(--accent-weak); border-radius:999px; padding:.25rem .6rem; display:inline-block; background:#0f0f0f; }

/* ===== Contact ===== */
.contact{ display:grid; gap:2rem; grid-template-columns:1.1fr .9fr; }
.field{ display:flex; flex-direction:column; gap:.3rem; }
input, textarea{ background:#0f0f0f; color:#fff; border:1px solid var(--border); border-radius:12px; padding:.9rem; font-size:1rem; }
textarea{ min-height:130px; resize:vertical; }
input:focus, textarea:focus{ outline: none; box-shadow:0 0 0 2px var(--accent-weak); border-color:var(--accent-weak); }

/* ===== Footer with ornamental rule ===== */
.site-footer{ border-top:1px solid var(--accent-weak); padding:2rem 0; color:var(--muted); font-size:.95rem; position:relative; }
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0 5%, var(--accent-weak) 50%, transparent 95% 100%);
}
.foot-nav{ margin-top:.6rem; }

/* ===== Responsive ===== */
@media (max-width:920px){
  .history, .contact{ grid-template-columns:1fr; }
  .products{ grid-template-columns:1fr 1fr; }
  .awards{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .shop-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  nav ul{ display:none; }
  .menu-btn{ display:inline-block; }
  .products, .awards, .process, .shop-grid{ grid-template-columns:1fr; }
  .hero .inner{ padding:6.5rem 0 4.5rem; }
}
/* === Hero-Layout: Logo links, Text rechts === */
.hero-flex {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.hero-left {
  flex: 0 0 200px;
  display: flex;
  justify-content: center;
}
.hero-logo {
  max-width: 180px;
  height: auto;
}
.hero-right {
  flex: 1 1 400px;
  min-width: 280px;
}
@media (max-width: 720px) {
  .hero-flex { 
    flex-direction: column; 
    text-align: center; 
  }
  .hero-left { 
    margin-bottom: 1.5rem; 
  }
}