:root{
  --red:#E42612;
  --red-dark:#C61F10;
  --text:#111;
  --muted:#444;
  --bg:#fff;
  --soft: rgba(228, 38, 18, 0.06);
  --border: rgba(228, 38, 18, 0.22);
}

/* Inter lokal (statische Schnitte) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width:min(1200px, 92%);
  /* Content width (Desktop): 1200px, zentriert. */
  margin:0 auto;
}

/* Startseiten-Hinweis (Customizer) */
.site-notice{
  background: #f6f6f6;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.site-notice-inner{
  padding: 0.65rem 0;
}
.site-notice p{
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}
.site-notice p + p{
  margin-top: 0.35rem;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
}

.brand{
  font-weight:900;
  color:var(--text);
  text-decoration:none;
}

.nav-list{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav-list a{ color:var(--text); text-decoration:none; font-weight:600; }
.nav-list a:hover{ color:var(--red); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.85rem 1.1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  border:2px solid transparent;
}
.btn-primary{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  box-shadow:0 10px 22px rgba(0,0,0,0.10);
}
.btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:rgba(0,0,0,0.14);
}
.btn-ghost:hover{ border-color:rgba(0,0,0,0.3); }
.btn-block{ width:100%; }

.hero{
  background: var(--soft);
  border-bottom:1px solid var(--border);
  padding: 2.25rem 0 1.25rem;
}
.hero-inner h1{ margin:0 0 0.5rem; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.lead{ color:var(--muted); font-size:1.05rem; line-height:1.55; margin:0 0 1rem; }
.hero-actions{ display:flex; gap:0.75rem; flex-wrap:wrap; margin: 0.75rem 0 1.25rem; }

.content{ padding: 1.5rem 0; }
.prose{ line-height:1.7; }

/* Standard-Seiten (Impressum, Datenschutz, ...) */
.page-hero{
  background: var(--soft);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0 0.85rem;
}
.page-hero-inner{ padding: 0.25rem 0; }
.page-title{
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}
.page-lead{
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Typografie für Editor-Inhalte */
.entry-content h2,
.entry-content h3,
.entry-content h4{
  color: var(--text);
  margin: 1.25rem 0 0.6rem;
  line-height: 1.2;
}
.entry-content h2{ font-size: 1.35rem; }
.entry-content h3{ font-size: 1.15rem; }
.entry-content p{ margin: 0 0 0.85rem; }
.entry-content a{ color: var(--red); text-decoration: none; font-weight: 700; }
.entry-content a:hover{ text-decoration: underline; }
.entry-content ul,
.entry-content ol{ padding-left: 1.1rem; }
.entry-content li{ margin: 0.35rem 0; }
.entry-content hr{ border: 0; border-top: 1px solid rgba(0,0,0,0.08); margin: 1.25rem 0; }

.page-links{ margin-top: 1rem; }
.page-links a{ margin-left: 0.35rem; }

.cta-box{
  margin: 1rem 0 0;
  padding: 1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
.cta-hint{ color:var(--muted); font-size:0.95rem; margin:0.5rem 0 0; }

.mini-stat{
  margin-top: 1rem;
  padding: 1rem;
  background:#fff;
  border:1px solid rgba(228, 38, 18, 0.25);
  border-radius:14px;
}
.mini-stat-top{ display:flex; align-items:center; gap:0.75rem; }
.mini-stat-badge{
  display:inline-flex; align-items:baseline; gap:0.25rem;
  padding:0.35rem 0.6rem; border-radius:999px;
  background: rgba(228, 38, 18, 0.10);
  font-weight:900;
}
.mini-stat-badge .num{ color:var(--red); font-size:1.35rem; line-height:1; }
.mini-stat-title{ margin:0; font-weight:900; }
.mini-stat-bar{ height:10px; border-radius:999px; background:rgba(0,0,0,0.08); overflow:hidden; margin:0.75rem 0; }
.mini-stat-bar > span{ display:block; height:100%; width:99%; background:var(--red); border-radius:999px; }
.mini-stat-sub{ margin:0; color:#222; line-height:1.45; }
.mini-stat-note{ margin:0.5rem 0 0; color:var(--muted); font-size:0.95rem; }

.faq-accordion details{
  border:1px solid rgba(228, 38, 18, 0.25);
  border-radius:12px;
  padding:0.9rem 1rem;
  background:#fff;
  margin-bottom:0.75rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}
.faq-accordion summary{
  font-weight:800;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.faq-accordion summary::marker{ display:none; }
.faq-accordion summary::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  background:var(--red);
}
.faq-accordion summary::after{
  content:"+";
  margin-left:auto;
  font-size:1.3rem;
  color:var(--red);
  font-weight:900;
}
.faq-accordion details[open] summary::after{ content:"–"; color:var(--red-dark); }
.faq-accordion p{ margin:0.75rem 0 0; line-height:1.55; color:#222; }

.site-footer{
  border-top:1px solid rgba(0,0,0,0.06);
  padding: 2rem 0 1.25rem;
  color:var(--muted);
}

/* Footer – 3 Bereiche */
.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.footer-col{ min-width:0; }
.footer-title{
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  color:#111;
}
.footer-text p{ margin: 0 0 0.65rem; }
.footer-text p:last-child{ margin-bottom:0; }
.footer-text a{ color: var(--red-dark); text-decoration:none; }
.footer-text a:hover{ text-decoration:underline; }

/* Footer-Menü (aus WordPress-Menüs) */
.footer-menu{ margin-top: 0.75rem; }
.footer-menu-list{ list-style:none; margin:0; padding:0; }
.footer-menu-list li{ margin: 0 0 0.55rem; }
.footer-menu-list li:last-child{ margin-bottom:0; }
.footer-menu-list a{ color: var(--red-dark); text-decoration:none; }
.footer-menu-list a:hover{ text-decoration:underline; }

.footer-bottom{
  border-top:1px solid rgba(0,0,0,0.06);
  padding-top: 1rem;
  font-size: 0.95rem;
}
.footer-bottom p{ margin:0; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* Sticky Mobile CTA */
.mobile-sticky-cta{ display:none; }
@media (max-width: 768px){
  body{ padding-bottom: 90px; }
  .header-cta{ display:none; } /* oben weniger clutter am Handy */

  .mobile-sticky-cta{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:9999;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border-top:1px solid rgba(228,38,18,0.25);
  }
  .mobile-sticky-cta a{
    width:100%;
    max-width:520px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0.95rem 1.2rem;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    text-decoration:none;
    font-weight:900;
    font-size:1.05rem;
    box-shadow:0 10px 24px rgba(0,0,0,0.18);
  }
  .mobile-sticky-cta a:hover{ background:var(--red-dark); }
}

@media (max-width: 600px){
  .hero{ padding: 1.75rem 0 1rem; }
}

/* Burger Button */
.nav-toggle{
  display:none;
  width:46px; height:46px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.nav-toggle-lines{
  position:relative;
  width:20px; height:2px;
  background: var(--red);
  display:block;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;
  width:20px; height:2px;
  background: var(--red);
}
.nav-toggle-lines::before{ top:-6px; }
.nav-toggle-lines::after{ top:6px; }

/* Overlay */
.nav-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index: 9980;
}

/* Mobile Nav Drawer */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }

  .nav{
    position:fixed;
    top:0;
    right:-320px;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    background:#fff;
    z-index: 9990;
    padding: 1rem;
    border-left:1px solid rgba(0,0,0,0.08);
    box-shadow: -18px 0 40px rgba(0,0,0,0.18);
    transition: right 0.18s ease;
    display:flex;
    flex-direction:column;
    gap: 0.75rem;
  }

  .nav.is-open{ right: 0; }

  .nav-list{
    flex-direction:column;
    gap:0.25rem;
  }

  .nav-list a{
    display:block;
    padding: 0.8rem 0.75rem;
    border-radius: 12px;
    background: rgba(0,0,0,0.03);
  }

  .nav-cta{
    width:100%;
    margin-top:auto;
  }

  /* Desktop-CTA im Header am Handy ausblenden */
  .header-cta{ display:none; }
}

/* Logo im Header */
.brand-logo img{
  height: 38px;
  width: auto;
  display:block;
}
@media (max-width: 600px){
  .brand-logo img{ height: 34px; }
}

.share-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0.9rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(228,38,18,0.25);
  background: #fff;
  text-decoration:none;
  font-weight: 800;
  color: #111;
}

.share-btn:hover{
  border-color: rgba(228,38,18,0.45);
  color: var(--red);
}

@media (max-width: 600px){
  .share-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}