/* ==========================================================================
   mikrozirkulation-verstehen.de — Corporate Design nach BEMER Guidelines
   Farben, Typografie (Barlow) und Basislayout
   ========================================================================== */

:root{
  /* Primärfarben (BEMER Corporate Design) */
  --c-orange:        #EB5A23; /* BEMER-Orange (Human Line) */
  --c-orange-light:  #EF7D30; /* Helles Orange */
  --c-anthrazit:     #4B4A50; /* BEMER-Anthrazit */
  --c-beige:         #ECE3DC; /* BEMER-Beige */
  /* Sekundärfarben */
  --c-grau-dunkel:   #6F6D73;
  --c-grau-mittel:   #948F93;
  --c-grau-hell:     #B9B0B0;
  --c-grau-pastell:  #D8CFCA;
  /* Funktional */
  --c-weiss:         #FFFFFF;
  --c-text:          #33323a;
  --c-text-soft:     #6F6D73;
  --c-bg:             #FFFFFF;
  --c-bg-soft:        #F8F5F2;
  --c-border:          #E6DFD8;
  --c-success:         #4E7A51;

  --font-head: "Barlow", Arial, Helvetica, sans-serif;
  --font-body: "Barlow", Arial, Helvetica, sans-serif;

  --maxw: 1180px;
  --radius: 14px;
  --shadow-soft: 0 10px 30px -12px rgba(75,74,80,0.18);
  --shadow-card: 0 4px 18px -6px rgba(75,74,80,0.14);
}

/* ---------- Fonts (self-hosted, DSGVO-konform) ---------- */
@font-face{
  font-family:"Barlow";
  src:url("../fonts/barlow-100.woff2") format("woff2");
  font-weight:100; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fonts/barlow-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fonts/barlow-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fonts/barlow-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;
  user-select:none;
}
/* Formularfelder, Adress-/Kontaktangaben bleiben normal markierbar/kopierbar
   (Telefon, E-Mail, Anschrift sollen abgetippt/kopiert werden koennen). */
input,textarea,select,.copyable,address,[data-copyable],
a[href^="tel:"],a[href^="mailto:"],.contact-block,.footer-address{
  -webkit-user-select:text;
  user-select:text;
}
img{max-width:100%;display:block;height:auto;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;}
a{color:var(--c-orange);text-decoration:none;}
a:hover{text-decoration:none;}
ul{padding-left:1.2em;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:300;
  color:var(--c-anthrazit);
  line-height:1.2;
  margin:0 0 .5em;
}
h1{font-weight:100; font-size:clamp(2.1rem,4.2vw,3.4rem); letter-spacing:-.01em;}
h2{font-size:clamp(1.6rem,3vw,2.3rem);}
h3{font-size:1.3rem; font-weight:400;}
strong,b{font-weight:600;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:72px 0;}
@media(max-width:640px){ section{padding:48px 0;} }

/* ---------- Skip-Link (Barrierefreiheit) ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--c-anthrazit); color:#fff;
  padding:10px 16px; z-index:1000;
}
.skip-link:focus{left:10px; top:10px;}

/* ---------- Kontaktleiste (Top-Bar) ---------- */
.top-bar{
  background:var(--c-anthrazit); color:#e9e6e3; font-size:.85rem;
}
.top-bar .container{
  display:flex; justify-content:flex-end; align-items:center; gap:22px; padding-top:7px; padding-bottom:7px;
}
.top-bar a{
  color:#e9e6e3; display:inline-flex; align-items:center; gap:6px; font-weight:500;
}
.top-bar a:hover{color:var(--c-orange-light);}
.top-bar svg{width:15px; height:15px; fill:currentColor;}
@media(max-width:640px){ .top-bar .container{justify-content:center;} }

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:#ffffff;
  border-bottom:1px solid var(--c-border);
}
.nav-wrap{
  max-width:var(--maxw); margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.brand img{height:46px; width:auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.25; white-space:nowrap;}
.brand-text .bt-name{
  font-family:var(--font-head); font-weight:600; color:var(--c-orange); font-size:1rem;
}
.brand-text .bt-partner{
  font-family:var(--font-head); font-weight:400; color:var(--c-orange); font-size:.78rem;
  letter-spacing:.01em;
}
@media(max-width:560px){
  .brand img{height:40px;}
  .brand-text{display:none;}
}
nav.main-nav{display:flex; gap:22px; align-items:center;}
nav.main-nav a{
  color:var(--c-anthrazit); font-weight:500; font-size:.98rem; white-space:nowrap;
}
nav.main-nav a:hover{color:var(--c-orange); text-decoration:none;}
.nav-cta{
  background:var(--c-orange); color:#fff !important; padding:10px 20px; border-radius:999px;
  font-weight:600; letter-spacing:.01em;
}
.nav-cta:hover{background:var(--c-orange-light); text-decoration:none;}
.nav-toggle{display:none;}
@media(max-width:900px){
  nav.main-nav{
    /* top/height werden per JS exakt auf die Kopfzeilen-Höhe gesetzt (main.js) */
    position:fixed; top:0; left:0; right:0; height:100vh;
    background:#fff; flex-direction:column;
    padding:30px 24px; gap:18px; transform:translateY(-120%); transition:transform .25s ease;
    overflow-y:auto; visibility:hidden;
  }
  nav.main-nav.open{transform:translateY(0); visibility:visible;}
  .nav-toggle{
    display:inline-flex; background:none; border:0; font-size:1.6rem; color:var(--c-anthrazit);
    cursor:pointer; padding:4px 8px;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--c-bg-soft);
  padding:0;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px;
  max-width:var(--maxw); margin:0 auto; padding:64px 24px;
}
.hero-copy .eyebrow{
  color:var(--c-orange); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem; margin-bottom:14px; display:block;
}
.hero-copy p.lead{font-size:1.15rem; color:var(--c-text-soft); max-width:46ch;}
.hero-media{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft), 0 0 36px 7px rgba(235,90,35,.30), 0 0 70px 20px rgba(235,90,35,.14);
}
.hero-media img{width:100%; height:100%; object-fit:cover;}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding:36px 20px 48px;}
  .hero-media{order:-1;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:1rem; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none;}
.btn-primary{background:var(--c-orange); color:#fff;}
.btn-primary:hover{background:var(--c-orange-light); color:#fff;}
.btn-outline{background:transparent; border-color:var(--c-anthrazit); color:var(--c-anthrazit);}
.btn-outline:hover{background:var(--c-anthrazit); color:#fff;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}

/* ---------- Cards / Grids ---------- */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .grid-3, .grid-2{grid-template-columns:1fr;} }

.card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-card);
}
.card h3{margin-bottom:.4em;}
.card .icon{margin-bottom:14px; display:inline-flex;}
.card .icon svg{width:34px; height:34px; fill:var(--c-orange);}

.section-head{max-width:720px; margin:0 auto 44px;}
.section-head.left{margin:0 0 44px;}
.section-head .eyebrow{
  color:var(--c-orange); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem;
}
.center{text-align:center;}

.bg-soft{background:var(--c-bg-soft);}
.bg-anthrazit{background:var(--c-anthrazit); color:#fff;}
.bg-anthrazit h2, .bg-anthrazit h3{color:#fff;}
.bg-beige{background:var(--c-beige);}

/* ---------- Bild + Text Reihen ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.split.reverse .media{order:2;}
.split .media{
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card), 0 0 32px 6px rgba(235,90,35,.26), 0 0 60px 18px rgba(235,90,35,.12);
}
@media(max-width:800px){
  .split{grid-template-columns:1fr; gap:24px;}
  .split.reverse .media{order:0;}
}

/* ---------- Timeline / Ablauf ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step;}
.step{position:relative; padding-top:44px;}
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%;
  background:var(--c-orange); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:600;
}
@media(max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .steps{grid-template-columns:1fr;} }

/* ---------- Produktkarten (Sets) ---------- */
.product-card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
  position:relative;
}
.product-card.is-highlight{border-color:var(--c-orange); box-shadow:0 12px 32px -10px rgba(235,90,35,.35);}
.product-card .ribbon{
  position:absolute; top:16px; right:-6px; background:var(--c-orange); color:#fff;
  font-size:.75rem; font-weight:600; padding:6px 14px; border-radius:6px 0 0 6px;
  letter-spacing:.03em;
}
.product-card .pc-media{
  padding:20px;
  background:radial-gradient(circle at 50% 42%, rgba(235,90,35,.38) 0%, rgba(235,90,35,.14) 42%, var(--c-beige) 72%);
}
.product-card .pc-body{padding:24px; display:flex; flex-direction:column; gap:14px; flex:1;}
.product-card ul{margin:0; padding-left:1.1em; font-size:.95rem; color:var(--c-text-soft);}
.product-card ul li{margin-bottom:6px;}
.product-card .pc-foot{margin-top:auto; padding-top:8px;}

/* ---------- FAQ (Accordion, ohne JS-Abhängigkeit via <details>) ---------- */
.faq-item{
  border-bottom:1px solid var(--c-border); padding:18px 0;
}
.faq-item summary{
  font-weight:600; color:var(--c-anthrazit); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.4rem; color:var(--c-orange); font-weight:300;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{color:var(--c-text-soft); margin:14px 0 0;}

/* ---------- Testimonial / Zitat ---------- */
blockquote.quote{
  border-left:4px solid var(--c-orange); margin:0; padding:6px 0 6px 22px;
  font-size:1.2rem; font-style:italic; color:var(--c-anthrazit);
}

/* ---------- Öffnungszeiten-Tabelle ---------- */
.hours-table{width:100%; border-collapse:collapse; font-size:.95rem;}
.hours-table tr{border-bottom:1px solid var(--c-border);}
.hours-table tr:last-child{border-bottom:0;}
.hours-table th, .hours-table td{
  text-align:left; padding:8px 0; font-weight:400; color:var(--c-text);
}
.hours-table th{font-weight:600; width:55%;}
.hours-table td{color:var(--c-text-soft); text-align:right;}
.hours-note{color:var(--c-orange); font-size:.85rem; margin-top:10px;}

/* ---------- Hinweisbox / Disclaimer ---------- */
.notice{
  background:var(--c-bg-soft); border:1px solid var(--c-border); border-left:4px solid var(--c-grau-mittel);
  border-radius:8px; padding:18px 22px; font-size:.92rem; color:var(--c-text-soft);
}
.notice strong{color:var(--c-anthrazit);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem; color:var(--c-text-soft); padding:16px 0 0;}
.breadcrumb a{color:var(--c-text-soft);}
.breadcrumb a:hover{color:var(--c-orange);}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--c-anthrazit); color:#e9e6e3; padding:56px 0 24px; margin-top:64px;}
footer.site-footer a{color:#e9e6e3;}
footer.site-footer a:hover{color:var(--c-orange-light);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
.footer-grid h4{color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; font-size:.92rem;}
.footer-brand img{height:40px; width:auto; margin-bottom:14px;}
.footer-brand p{color:#c9c5c1; font-size:.88rem; max-width:32ch;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#b8b4b0;
}
@media(max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- Utilities ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-soft{color:var(--c-text-soft);}
.badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--c-beige); color:var(--c-anthrazit);
  padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:600;
}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* ---------- Benefit-Grid (Vertriebspartner werden) ---------- */
.benefit-item{background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:24px;}
.benefit-item h3{font-size:1.05rem; margin-bottom:.35em;}
.benefit-item p{font-size:.92rem; margin:0;}
.benefit-check{display:inline-flex; margin-bottom:12px;}
.benefit-check svg{width:28px; height:28px; fill:var(--c-orange);}

/* ---------- Lazy Loading Platzhalter ---------- */
img[loading="lazy"]{background:var(--c-beige);}

/* ---------- Floating Buttons (WhatsApp + Nach oben) ---------- */
.floating-actions{
  position:fixed; right:20px; bottom:20px; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px -4px rgba(0,0,0,.35); color:#fff; border:0; cursor:pointer;
  transition:transform .15s ease, opacity .2s ease;
}
.fab:hover{transform:translateY(-2px);}
.fab svg{width:26px; height:26px; fill:#fff;}
.fab-whatsapp{background:#25D366;}
.fab-top{
  background:var(--c-anthrazit); opacity:0; pointer-events:none; transform:translateY(10px);
}
.fab-top.is-visible{opacity:1; pointer-events:auto; transform:translateY(0);}
.fab-top:hover{background:var(--c-orange);}
@media(max-width:640px){
  .floating-actions{right:14px; bottom:14px;}
  .fab{width:46px; height:46px;}
  .fab svg{width:22px; height:22px;}
}