/* Montserrat — self-hosted, correct static weights (no external requests) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(./fonts/montserrat-300.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/montserrat-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./fonts/montserrat-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/montserrat-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/montserrat-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(./fonts/montserrat-900.woff2) format('woff2');
}


  
/* ══════════════════════════════════════════════════════════
   veche.design — shared stylesheet
   PALETTE: #C8332B red | #111111 black | #FFFFFF white | #F4F4F2 grey | #6E6E6E mid grey
   ══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',sans-serif;
  background:#fff;color:#111111;
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ── LANG SWITCH (pure CSS, no JS required for default state) ── */
[data-lang]{display:none;}
body.lang-en [data-lang="en"], body.lang-de [data-lang="de"]{display:block;}
span[data-lang],a[data-lang]{display:none;}
body.lang-en span[data-lang="en"], body.lang-de span[data-lang="de"],
body.lang-en a[data-lang="en"],   body.lang-de a[data-lang="de"]{display:inline;}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:300;
  background:#fff;border-bottom:1px solid rgba(17,17,17,0.08);
  padding:18px 48px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{display:inline-flex;align-items:center;text-decoration:none;}
.nav-brand svg{height:18px;width:auto;display:block;}
.nav-right{display:flex;align-items:center;gap:32px;}
.nav-links{display:flex;gap:26px;}
.nav-links a{
  font-size:0.8rem;font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:#111111;text-decoration:none;
  transition:color 0.2s;padding-bottom:2px;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:#C8332B;}
.nav-links a.active{color:#C8332B;border-bottom-color:#C8332B;}
.lang-toggle{display:flex;gap:6px;}
.lang-toggle button{
  background:none;border:1px solid rgba(110,110,110,0.3);
  font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;cursor:pointer;padding:4px 10px;
  color:#6E6E6E;transition:all 0.2s;font-weight:600;
}
.lang-toggle button.active,.lang-toggle button:hover{
  background:#6E6E6E;color:#fff;border-color:#6E6E6E;
}

main{flex:1;}

/* ── SHARED TYPE ── */
.section-tag{
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:#C8332B;margin-bottom:16px;display:block;font-weight:700;
}
.big-title{
  font-weight:900;font-size:clamp(1.5rem,3vw,2.7rem);
  line-height:1.12;letter-spacing:-0.02em;color:#111111;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#C8332B;color:#fff;border:none;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-size:13px;
  letter-spacing:0.04em;font-weight:700;padding:16px 40px;
  cursor:pointer;text-decoration:none;
  transition:background 0.2s,transform 0.15s;
}
.btn:hover{background:#a82a23;transform:translateY(-1px);}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.6);}
.btn-outline:hover{background:rgba(255,255,255,0.14);border-color:#fff;}
.btn-lg{padding:19px 48px;font-size:14px;letter-spacing:0.05em;}

/* ── 1. HERO — split, left-aligned, 2/3 content + 1/3 image ── */
.hero{
  display:grid;grid-template-columns:2fr 1fr;
  min-height:480px;
}
.hero-left{
  background:#C8332B;color:#fff;
  padding:clamp(48px,7vw,80px) clamp(32px,5vw,72px);
  display:flex;flex-direction:column;justify-content:center;
  text-align:left;
}
.hero-right{
  background-position:center;background-size:cover;background-repeat:no-repeat;
  min-height:320px;
}
.hero h1{
  font-weight:900;
  font-size:clamp(1.4rem,3vw,2.6rem);
  line-height:1.18;letter-spacing:-0.015em;
  text-transform:uppercase;max-width:620px;
}
.hero-sub{
  margin-top:22px;max-width:560px;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:rgba(255,255,255,0.9);line-height:1.6;
}
.hero-sub strong{font-weight:800;color:#fff;}
.hero-cta{margin-top:30px;}

/* ── 2. PROBLEM — no photo, headline + 3 boxes forming one sentence ── */
.problem{padding:clamp(64px,8vw,96px) 64px;background:#fff;}
.problem-head{max-width:760px;margin-bottom:40px;}
.problem-head h2{
  font-weight:900;font-size:clamp(1.4rem,2.6vw,2.2rem);
  line-height:1.2;letter-spacing:-0.015em;color:#111;
}
.pboxes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pbox{
  background:#fff;border:1px solid rgba(17,17,17,0.14);
  padding:40px 32px;
  display:flex;flex-direction:column;justify-content:center;
  transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s;
}
.pbox:hover{
  box-shadow:0 16px 36px rgba(17,17,17,0.1);
  transform:translateY(-3px);
  border-color:rgba(17,17,17,0.08);
}
/* Shared typography — same two sizes used consistently across all three boxes */
.p-big{
  font-weight:900;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.15;letter-spacing:-0.01em;color:#C8332B;margin-bottom:12px;
}
.p-reg{
  font-size:1.15rem;line-height:1.5;color:#333;font-weight:500;margin-bottom:12px;
}
body.lang-en .pbox > [data-lang="en"]:last-of-type{margin-bottom:0;}
body.lang-de .pbox > [data-lang="de"]:last-of-type{margin-bottom:0;}

/* ── 3. WE HELP BUILD — title block + 3 category tiles ── */
.build{padding:clamp(64px,8vw,96px) 64px;background:#F4F4F2;}
.build-head{max-width:760px;margin-bottom:44px;}
.build-head h2{
  font-weight:900;font-size:clamp(1.4rem,2.6vw,2.2rem);
  line-height:1.2;letter-spacing:-0.015em;color:#111;
}
.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.cat-name{
  font-weight:900;font-size:clamp(1.1rem,1.9vw,1.45rem);
  text-transform:uppercase;letter-spacing:0.01em;color:#C8332B;
  line-height:1.25;margin-bottom:18px;min-height:2.6em;
}
.cat-img{
  height:240px;background-position:center;background-size:cover;background-repeat:no-repeat;
  border:1px solid rgba(17,17,17,0.1);
}

/* ── 4. HOW WE WORK — bordered boxes, row of 4 ── */
.how{padding:clamp(64px,8vw,96px) 64px;background:#F4F4F2;}
.how-head{margin-bottom:48px;max-width:760px;}
.how-head h2{
  font-weight:900;font-size:clamp(1.35rem,2.4vw,2.1rem);
  line-height:1.2;letter-spacing:-0.015em;margin-bottom:10px;color:#111;
}
.how-head p{font-size:0.95rem;color:#555;line-height:1.6;}
.hboxes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.hbox{
  background:#fff;
  border:1px solid rgba(17,17,17,0.14);
  padding:30px 26px 34px;
  transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s;
}
.hbox:hover{
  box-shadow:0 16px 36px rgba(17,17,17,0.1);
  transform:translateY(-3px);
  border-color:rgba(17,17,17,0.08);
}
.hbox-name{
  font-size:0.95rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:#C8332B;margin-bottom:14px;line-height:1.35;
}
.hbox p{font-size:0.88rem;line-height:1.7;color:#333;}

/* ── 4. DATABASE PREVIEW ── */
.db-section{padding:clamp(64px,8vw,96px) 64px;background:#fff;}
.db-head{max-width:680px;margin-bottom:40px;text-align:left;}
.db-head h2{
  font-weight:900;font-size:clamp(1.35rem,2.4vw,2.1rem);
  line-height:1.2;letter-spacing:-0.015em;color:#111;margin-bottom:6px;
}
.db-head .db-sub2{font-size:1rem;color:#555;font-weight:500;}

.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px;}
.preview-grid-4{grid-template-columns:repeat(4,1fr);}
.preview-box{
  background:#fff;border:1px solid rgba(17,17,17,0.14);
  padding:16px 16px 22px;
  transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s;
}
.preview-box:hover{
  box-shadow:0 16px 36px rgba(17,17,17,0.1);
  transform:translateY(-3px);
  border-color:rgba(17,17,17,0.08);
}
.preview-img{
  height:200px;background:#e6e3dc;
  display:flex;align-items:center;justify-content:center;
  color:#9a948b;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  margin-bottom:16px;
}
.preview-title{font-weight:700;font-size:0.98rem;color:#111;line-height:1.3;}
.db-cta{text-align:left;}

/* ── 5. WHO IT'S FOR — small boxes, big names only ── */
.who{padding:clamp(64px,8vw,96px) 64px;background:#fff;color:#111;}
.who .section-tag{color:#C8332B;}
.who-head{max-width:700px;margin-bottom:44px;}
.who-head p{font-size:0.95rem;color:#555;line-height:1.6;margin-top:10px;}
.who-head h2{
  font-weight:900;font-size:clamp(1.35rem,2.4vw,2.1rem);
  line-height:1.2;letter-spacing:-0.015em;color:#111;
}
.who-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.who-box{
  background:#fff;
  border:1px solid rgba(17,17,17,0.14);
  padding:30px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s;
}
.who-box:hover{
  box-shadow:0 16px 36px rgba(17,17,17,0.1);
  transform:translateY(-3px);
  border-color:rgba(17,17,17,0.08);
}
.who-name{
  font-weight:800;font-size:clamp(1rem,1.5vw,1.2rem);
  text-transform:uppercase;letter-spacing:0.02em;color:#C8332B;
  margin-bottom:10px;
}
.who-desc{font-size:0.86rem;color:#555;line-height:1.5;}

/* ── CONTACT ── */
.contact{padding:clamp(72px,9vw,110px) 64px;background:#111111;color:#fff;text-align:center;}
.contact .section-tag{color:#e36a62;}
.contact h2{
  font-weight:900;font-size:clamp(1.8rem,4vw,3.4rem);
  letter-spacing:-0.025em;line-height:1.05;margin-bottom:40px;color:#fff;
}
.contact h2 em{font-style:normal;color:#e36a62;}

/* ── FOOTER ── */
footer{
  background:#fff;border-top:1px solid rgba(17,17,17,0.1);
  padding:24px 48px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:14px;
}
.ft-brand{font-size:0.9rem;font-weight:700;color:#C8332B;text-decoration:none;}
.ft-links{display:flex;gap:24px;}
.ft-links a{
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:#C8332B;text-decoration:none;transition:opacity 0.2s;
}
.ft-links a:hover{opacity:0.65;}

/* ── SUBPAGE CONTENT (impressum / privacy / database) ── */
.doc{padding:clamp(64px,8vw,96px) 64px;background:#F4F4F2;}
.doc-wrap{max-width:720px;}
.doc h1{font-weight:900;font-size:clamp(1.6rem,2.6vw,2.2rem);color:#111;margin-bottom:16px;}
.doc-updated{font-size:0.82rem;color:#6E6E6E;margin-bottom:44px;}
.doc-section{margin-bottom:40px;}
.doc-section h2{font-weight:700;font-size:1.05rem;color:#C8332B;margin-bottom:14px;}
.doc-section p{font-size:0.95rem;line-height:1.9;color:#333;margin-bottom:14px;}
.doc-section p:last-child{margin-bottom:0;}
.doc-section ul{margin:0 0 14px 0;padding-left:22px;}
.doc-section li{font-size:0.95rem;line-height:1.85;color:#333;margin-bottom:6px;}
.doc-section a{color:#C8332B;text-decoration:none;}
.doc-section a:hover{text-decoration:underline;}
.back-link{
  display:inline-block;margin-top:8px;font-size:0.85rem;
  font-weight:600;color:#C8332B;text-decoration:none;
}
.back-link:hover{text-decoration:underline;}

/* ── DATABASE SUBPAGE ── */
.db-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 40px;}
.tag-pill{
  font-size:0.76rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  background:#fff;border:1px solid rgba(17,17,17,0.16);color:#6E6E6E;
  padding:8px 16px;border-radius:999px;
}
.db-notice{
  border:1px dashed rgba(17,17,17,0.25);padding:32px;text-align:center;
  color:#6E6E6E;font-size:0.9rem;line-height:1.7;margin-top:8px;background:#fff;
}

/* Scroll-triggered reveal animation removed — content is always
   immediately visible, no JavaScript dependency for any content. */

/* ── RESPONSIVE ── */
@media (max-width:1000px){
  .hboxes{grid-template-columns:repeat(2,1fr);}
  .preview-grid{grid-template-columns:repeat(2,1fr);}
  .preview-grid-4{grid-template-columns:repeat(2,1fr);}
  .pboxes-3{grid-template-columns:1fr;}
  .categories{grid-template-columns:1fr;}
}
@media (max-width:900px){
  nav{padding:16px 24px;}
  .nav-right{gap:18px;}
  .nav-links{gap:16px;}
  .nav-links a{font-size:0.72rem;}
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-right{min-height:240px;order:-1;}
  .hero-left{padding:44px 24px 48px;}
  .problem,.build,.how,.db-section,.who,.contact,.doc{padding:56px 24px;}
  .who-boxes{grid-template-columns:1fr;}
  footer{padding:20px 24px;}
}
@media (max-width:600px){
  .hboxes{grid-template-columns:1fr;}
  .preview-grid{grid-template-columns:1fr;}
}