/* ==== Base ==== */
:root{
  --bg:#fafafa; --card:#ffffff; --text:#111111; --muted:#6b6b6b; --line:#e6e6e6;
  --accent:#1c1c1c; --radius:14px;
  --header-h-desktop:72px; --header-h-mobile:92px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,iframe,video,canvas,svg{max-width:100%;height:auto;display:block}
.container{max-width:1000px;margin:0 auto;padding-inline:clamp(14px,4vw,24px)}

/* ==== Header & Navigation ==== */
.brand-link{display:inline-flex;color:inherit;text-decoration:none}

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:var(--card); border-bottom:1px solid var(--line);
  padding-inline:clamp(14px,4vw,24px); width:100%;
}
@media (min-width:641px){ body{padding-top:var(--header-h-desktop)} }
@media (max-width:640px){ body{padding-top:var(--header-h-mobile)} }

.header-inner{padding:1rem 0}
@media (min-width:641px){ .header-inner{min-height:calc(var(--header-h-desktop) - 2px)} }
@media (max-width:640px){ .header-inner{min-height:calc(var(--header-h-mobile) - 2px)} }

.header-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.brand-logo{height:24px;width:auto;display:block}
.brand-title{font-weight:600}
.brand-subtitle{color:var(--muted);font-size:.95rem}

.nav{display:flex;gap:1.25rem;flex-wrap:wrap;min-width:0}
.nav a{color:var(--text);text-decoration:none;font-weight:500}
.nav a:hover{opacity:.7}

/* Burger-Button */
.menu-toggle{display:none;border:none;background:transparent;cursor:pointer;padding:8px;width:44px;height:44px;border-radius:8px}
.menu-toggle:focus{outline:none}
.menu-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.6) inset}
.menu-bar{width:22px;height:2px;background:#111;margin:4px 0;transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Desktop */
@media (min-width:641px){
  .header-inner{display:flex;align-items:center;gap:1rem}
  .header-bar{display:flex;align-items:center;gap:clamp(.5rem,2vw,1rem);flex:0 0 auto;min-width:0}
  .nav{margin-left:auto;display:flex!important;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:clamp(.75rem,2.2vw,1.5rem)}
  .nav a{white-space:nowrap;padding-inline:clamp(.25rem,.8vw,.6rem);font-size:clamp(.95rem,1.05vw,1rem)}
  .menu-toggle{display:none!important}
}

/* Mobile */
@media (max-width:640px){
  .menu-toggle{display:block;margin-left:auto}
  .header-inner{display:flex;flex-direction:column;align-items:flex-start;padding:.8rem 0;gap:.5rem;width:100%}
  .header-bar{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}
  .nav{display:none;flex-direction:column;gap:.75rem;width:100%}
  .nav.open{display:flex}
  body.menu-open .brand-link{display:none}
}

/* ==== Sections & Typography ==== */
.section{padding-block:clamp(2.5rem,5vw,4.25rem)}
.hero{padding-block:clamp(2rem,5vw,3.25rem)}
.center{text-align:center}
h1,h2{margin:.25rem 0 1rem;font-weight:600}
h1{font-size:clamp(1.8rem,2.5vw,2.4rem)}
h2{font-size:clamp(1.4rem,2vw,1.8rem)}
p{margin:0 0 1rem}

/* ==== Books ==== */
.book-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:2rem;margin-top:1.5rem}
@media (max-width:720px){ .book-grid{grid-template-columns:1fr} }

.book-cover{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 20px rgba(0,0,0,.05);overflow:hidden}
.book-cover img{width:100%;height:auto;display:block;object-fit:contain}

.book figcaption{margin-top:.75rem}
.book-title{font-weight:600}
.book-sub{color:var(--muted);margin-top:.15rem}
.book-pub{color:var(--muted);font-size:.95rem;margin-top:.25rem}

/* ==== Audio & Video ==== */
.audio{width:100%;max-width:640px;display:block;margin:0 auto}
.video-wrap{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.06)}
.video-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ==== CarlCAM / Promo ==== */
#produkt{
  position:relative; min-height:52vh; display:grid; place-items:center; text-align:center; color:#111;
  padding:5rem 1.25rem; margin-top:clamp(1rem,4vw,3rem);
  background:url("../images/carlcamBG.jpg") center/cover no-repeat; isolation:isolate;
}
#produkt::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    linear-gradient(0deg, rgba(255,255,255,.72), rgba(255,255,255,.72));
  z-index:-1;
}
#produkt .produkt-content{max-width:900px;margin-inline:auto;display:grid;gap:clamp(1rem,2vw,1.5rem);justify-items:center;text-align:center}
#produkt h2{font-size:clamp(1.6rem,3vw,2.6rem);margin:0;line-height:1.15}
#produkt .lead{font-size:clamp(1rem,1.6vw,1.15rem);margin:.25rem 0 1.5rem;opacity:.95}
#produkt .kicker{text-transform:uppercase;letter-spacing:.08em;color:#666;font-size:.9rem}

/* ==== Buttons ==== */
.button{
  display:inline-block;margin-top:1rem;background:var(--accent);color:#fff;text-decoration:none;
  padding:.9rem 1.5rem;border-radius:999px;font-weight:600;border:1px solid rgba(0,0,0,.25);box-shadow:0 8px 18px rgba(0,0,0,.15)
}
.button:hover{opacity:.95}
#produkt .button{font-size:.95rem;padding:.9rem 1.8rem;letter-spacing:.02em}

/* CarlCAM-Button: insgesamt kleiner + kleinere Schrift */
#produkt .button{
  font-size: 0.875rem;      /* zuvor ~0.95rem */
  padding: 0.75rem 1.4rem;  /* zuvor 0.9rem 1.8rem */
  letter-spacing: .02em;
}


/* ==== Footer ==== */
.site-footer{background:var(--card);border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem);font-size:.95rem}
.footer-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;row-gap:1rem}
.footer-col a{color:var(--text);text-decoration:none}
.footer-col a:hover{opacity:.7}

/* Burger ohne Umrandung/Fläche – 3 Striche + sauberes X (mobil) */
@media (max-width: 640px){
  .menu-toggle{
    display:block !important;
    border:none !important;
    background:transparent !important;
    padding:8px 10px;            /* Tap-Target erhalten */
    border-radius:10px;
    cursor:pointer;
  }
  /* Fokus gut sichtbar, aber ohne Rahmen */
  .menu-toggle:focus{ outline:none; }
  .menu-toggle:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px rgba(0,0,0,.45) inset;
  }
  /* Linien gestapelt lassen (wie zuvor) */
  .menu-bar{
    display:block;
    width:22px; height:2px; background:#111;
    margin:4px 0;
    transition:transform .2s ease, opacity .2s ease;
    transform-origin:center;
  }
  /* X-Animation */
  .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* Knallgelber Textmarker-Effekt bei Textauswahl */
::selection { background: #DFFD43; color: #111; }
::-moz-selection { background: #DFFD43; color: #111; }


/* Optional: Auswahl in Buttons/Links gut lesbar halten */
.button::selection,
a::selection { background: #ffe76a; color: #111; }
.button::-moz-selection,
a::-moz-selection { background: #ffe76a; color: #111; }