:root{
  --orange:#ff6600;
  --orange-dark:#e45b00;
  --white:#ffffff;
  --black:#111111;

  --font-nav:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head:"Merriweather", Georgia, "Times New Roman", serif;
  --font-body:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --content-max:1060px;
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--orange);
  color:var(--black);
  font-family:var(--font-body);
  line-height:1.55;
}

/* Skip Link */
.skip-link{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:14px;
  top:14px;
  width:auto;
  height:auto;
  padding:10px 12px;
  background:var(--white);
  color:var(--black);
  z-index:9999;
  text-decoration:none;
}

/* Header */
.site-header{
  padding:18px 16px 10px;
}
.header-inner{
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

/* Branding */
.brand{ min-width:180px; }

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--white);
}

.logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:var(--white);
  color:var(--orange);
  font-family:var(--font-nav);
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:lowercase;
}

.logo-text{
  font-family:var(--font-head);
  font-weight:900;
  font-size:22px;
}

.brand-sub{
  margin-top:4px;
  color:rgba(255,255,255,0.92);
  font-size:14px;
}

/* Navigation */
.nav{
  flex:1;
  display:flex;
  justify-content:flex-end;
}

.nav-box{
  background:var(--white);
  padding:10px 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.nav-box a{
  font-family:var(--font-nav);
  font-weight:600;
  font-size:14px;
  color:var(--orange);
  text-decoration:none;
  padding:6px 8px;
}

.nav-box a:hover,
.nav-box a:focus{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Main */
.main{ padding:8px 16px 24px; }

.page{
  max-width:var(--content-max);
  margin:0 auto;
}

.content-box{
  background:var(--white);
  padding:clamp(18px,3vw,28px);
  border-radius:0 0 18px 0;
}

/* Typography */
h1,h2,h3,h4{
  font-family:var(--font-head);
  margin:0 0 10px;
  color:var(--orange);
  line-height:1.2;
}

h1{ font-size:clamp(28px,3.4vw,42px); }
h2{ font-size:clamp(20px,2.3vw,28px); margin-top:22px; }
h3{ font-size:clamp(18px,2.1vw,24px); margin-top:18px; }
h4{ font-size:clamp(16px,1.9vw,20px); margin-top:16px; }

p{
  margin:0 0 14px;
  font-size:18px;
}

.note{
  margin-top:18px;
  font-size:16px;
}

/* Fließtext-Links NUR im Content */
.content-box p a,
.content-box li a,
.content-box td a,
.content-box .note a{
  color:var(--black);
  text-decoration:underline;
  text-underline-offset:3px;
}

.content-box p a:hover,
.content-box li a:hover,
.content-box td a:hover,
.content-box .note a:hover{
  color:var(--black);
}

/* Layout */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:18px 0 10px;
}

.card{
  padding:14px;
  background:var(--white);
}

.checklist{
  margin:10px 0 0;
  padding-left:18px;
}
.checklist li{
  margin:6px 0;
  font-size:16px;
}

.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border:0;
  text-decoration:none;
  font-family:var(--font-nav);
  font-weight:600;
  font-size:14px;
  background:var(--orange);
  color:var(--white);
}

.btn:hover,
.btn:focus{
  background:var(--orange-dark);
}

.btn-ghost{
  background:var(--white);
  color:var(--orange);
  border:2px solid var(--orange);
  padding:8px 10px;
}

.btn-ghost:hover,
.btn-ghost:focus{
  border-color:var(--orange-dark);
  color:var(--orange-dark);
}

/* CTA */
.cta{
  display:grid;
  grid-template-columns:1.25fr 0.75fr;
  gap:16px;
  margin:18px 0 6px;
}

.cta-media{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.product-shot{
  width:100%;
  background:var(--white);
}
.product-shot svg{
  width:100%;
  display:block;
}

.caption{
  font-size:14px;
  color:rgba(17,17,17,0.85);
}

/* Table */
.table-wrap{
  overflow:auto;
  margin:10px 0 0;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}

th,td{
  text-align:left;
  padding:10px;
  border-bottom:1px solid rgba(17,17,17,0.12);
  font-size:15px;
}

th{
  font-family:var(--font-nav);
  color:var(--orange);
}

/* Footer */
.site-footer{ padding:10px 0 0; }

.footer-line{
  text-align:center;
  margin-top:10px;
  color:#1e1e1e;
  font-family:var(--font-nav);
  font-size:14px;
}

/* Responsive */
@media (max-width:920px){
  .header-inner{
    flex-direction:column;
    align-items:stretch;
  }
  .nav{ justify-content:flex-start; }
  .grid-2{ grid-template-columns:1fr; }
  .cta{ grid-template-columns:1fr; }
  p{ font-size:17px; }
}

@media (max-width:520px){
  .nav-box{ gap:6px; }
  .nav-box a{
    padding:6px;
    font-size:13px;
  }
}