:root{
  --brand-dark:#1b2a4a;
  --brand-dark-2:#2a4d8f;
  --text:#333;
  --muted:#555;
  --bg:#f9fbfd;
  --border:#dbe9f5;
  --accent:#2f8e6e;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Open Sans","Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
header{
  background:var(--brand-dark);
  color:#fff;
  padding:1rem 2rem;
}
.header-top{
  display:flex;
  align-items:center;
  gap:1rem;
}
header img{
  height:45px;
  width:auto;
  display:block;
}
header .brand{
  font-weight:600;
  font-size:1.2rem;
}

/* Breadcrumb */
.breadcrumb{
  margin-top:0.4rem;
  font-size:0.9rem;
  color:#dbe9f5;
}
.breadcrumb a{
  color:#dbe9f5;
  text-decoration:none;
}
.breadcrumb a:hover{
  color:#fff;
  text-decoration:underline;
}
.breadcrumb span{
  margin:0 0.3rem;
}

/* Screenreader Utility */
.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.sr-only-focusable:focus {
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
}

/* Main */
main{
  max-width:1100px;
  margin:0 auto;
  padding:2.2rem 1.2rem;
  text-align:center;
}
h1{ margin:.2rem 0 .4rem; color:var(--brand-dark); font-size:2.2rem }
p{ color:var(--muted); font-size:1.05rem; line-height:1.55 }
.hint{
  margin:1.2rem 0;
  color:var(--accent);
  font-weight:500;
  font-size:1.1rem;
}

/* Cards */
.manual-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:2rem;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 3px 8px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 6px 14px rgba(0,0,0,.1) }
.card img{
  max-width:140px;
  height:auto;
  margin:0 auto 1rem;
  display:block;
}
.card h2{
  margin:.5rem 0 1rem;
  font-size:1.3rem;
  color:var(--brand-dark);
}
.cta{
  display:inline-block;
  padding:.8rem 1.4rem;
  border-radius:8px;
  background:var(--brand-dark);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:background .2s ease, transform .06s ease;
}
.cta:hover{ background:var(--brand-dark-2) }
.cta:active{ transform:translateY(1px) }

/* Footer */
footer.site-footer{
  background:var(--brand-dark);
  color:#fff;
  margin-top:3rem;
  padding:2rem 1rem 1rem;
}
.footer-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
  max-width:1100px;
  margin:0 auto 2rem;
}
.footer-col h3{
  font-size:1.1rem;
  margin-bottom:1rem;
  color:#fff;
  border-bottom:1px solid var(--brand-dark-2);
  padding-bottom:.4rem;
}
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col ul li{ margin:.4rem 0 }
.footer-col ul li a{
  color:#dbe9f5;
  text-decoration:none;
  font-size:.95rem;
  transition:color .2s ease;
}
.footer-col ul li a:hover{ color:#fff }

/* Zertifikats-Logos */
.cert-logos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.cert-logos img {
  max-width: 120px;
  height: auto;
  border: none !important;
}

/* Shop-Spalte im Footer */
.shop-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Erzwinge Button-Optik */
.shop-button {
  display: inline-block;
  background: var(--accent) !important;
  color: #fff !important;
  padding: 1.2rem 2.4rem !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  text-decoration: none !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
  transition: background .2s ease, transform .08s ease;
}
.shop-button:hover { background: #249161 !important; }
.shop-button:active { transform: translateY(2px) !important; }



.footer-bottom{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--brand-dark-2);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.footer-claim{
  font-size:1rem;
  font-weight:500;
  color:#dbe9f5;
  line-height:1.4;
}
.footer-copy{
  font-size:.85rem;
  color:#bbb;
}

/* Kleinbildschirm-Feinschliff */
@media (max-width:480px){
  header{ padding:0.8rem 1rem }
  .header-top{ flex-direction:column; gap:0.5rem }
  main{ padding:1.6rem 1rem }
  .card{ padding:1.2rem }
}