/* ============================================================
   JROVS-Kopfzeile fuer Seiten mit eigenem Stylesheet (03.10.2026)
   Zuerst fuer ki-orientierung.html: Dort gilt stil-ki-orientierung.css,
   stil.css wuerde mit dessen .hero/.btn/.about kollidieren. Darum hier
   nur der Kopf, nachgebaut aus stil.css und unter .jrovs-kopf gekapselt.
   Eigene Klassennamen (kopf-*), weil .menu-toggle dort schon belegt ist.
   ============================================================ */
@font-face { font-family:"Archivo"; src:url("fonts/archivo-var.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Caveat"; src:url("fonts/caveat-var.woff2") format("woff2"); font-weight:400 700; font-display:swap; }

.jrovs-kopf{background:#0a1310; font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.6; position:relative; z-index:40}
.jrovs-kopf *{box-sizing:border-box}
.jrovs-kopf a{color:inherit; text-decoration:none}
.jrovs-kopf .kopf-nav{
  max-width:2200px; margin:0 auto; padding:clamp(14px,1.2vw,22px) clamp(20px,4.9vw,110px);
  display:flex; align-items:center; gap:clamp(22px,2.4vw,44px);
}
.jrovs-kopf .kopf-brand{display:flex; align-items:center; gap:clamp(10px,.8vw,15px)}
.jrovs-kopf .kopf-brand img{display:block; width:clamp(38px,4.1vw,82px); height:clamp(38px,4.1vw,82px)}
.jrovs-kopf .kopf-brand b{display:block; color:#fff; font-size:clamp(21px,1.75vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1}
.jrovs-kopf .kopf-brand span span{display:block; color:#7d8c85; font-size:clamp(10px,.72vw,13px); letter-spacing:.03em; margin-top:4px}

.jrovs-kopf .kopf-menu{display:flex; align-items:center; gap:clamp(18px,1.5vw,30px); font-size:clamp(14px,.9vw,17px); color:rgba(255,255,255,.86); margin:0; padding:0}
.jrovs-kopf .kopf-menu > li{list-style:none}
.jrovs-kopf .kopf-menu a:hover{color:#fff}
.jrovs-kopf .kopf-menu .current{color:#fff; padding-bottom:6px; border-bottom:2px solid #7ed957}

.jrovs-kopf .kopf-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  padding:clamp(13px,.95vw,18px) clamp(22px,1.7vw,32px);
  border-radius:7px; font-size:clamp(14.5px,.9vw,17px); font-weight:600; white-space:nowrap;
  background:#7ed957; color:#0a1310; transition:.18s ease;
}
.jrovs-kopf .kopf-btn:hover{background:#6ac544}
.jrovs-kopf .kopf-claim{
  color:rgba(255,255,255,.45); font-size:clamp(9.5px,.62vw,12px); font-weight:600;
  letter-spacing:.14em; line-height:1.7; text-transform:uppercase; margin:0;
}
.jrovs-kopf .kopf-toggle, .jrovs-kopf .kopf-menu-btn{display:none}

@media (max-width:1120px){
  .jrovs-kopf .kopf-nav{flex-wrap:wrap; gap:16px 20px}
  .jrovs-kopf .kopf-claim{display:none}
}
@media (max-width:680px){
  .jrovs-kopf .kopf-nav{gap:10px 12px; padding:12px 20px}
  .jrovs-kopf .kopf-brand img{width:34px; height:34px}
  .jrovs-kopf .kopf-brand b{font-size:18px}
  .jrovs-kopf .kopf-brand span span{font-size:9px}
  .jrovs-kopf .kopf-btn{padding:9px 12px; font-size:12.5px; gap:6px}
  .jrovs-kopf .kopf-menu{display:none}
  .jrovs-kopf .kopf-menu-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px;
    border:1px solid rgba(255,255,255,.35); border-radius:8px; color:#fff; cursor:pointer; background:rgba(10,19,16,.55)}
  .jrovs-kopf .kopf-menu-btn svg{width:22px; height:22px}
  .jrovs-kopf .kopf-menu-btn .ico-close{display:none}
  .jrovs-kopf .kopf-toggle:checked ~ .kopf-menu-btn .ico-open{display:none}
  .jrovs-kopf .kopf-toggle:checked ~ .kopf-menu-btn .ico-close{display:block}
  .jrovs-kopf .kopf-toggle:checked ~ .kopf-menu{display:flex; flex-direction:column; align-items:stretch; flex-basis:100%; order:10; gap:0;
    background:#132119; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.45); font-size:16px}
  .jrovs-kopf .kopf-toggle:checked ~ .kopf-menu > li > a{display:block; padding:12px 14px; border-radius:6px}
  .jrovs-kopf .kopf-toggle:checked ~ .kopf-menu .current{border-bottom:0; border-left:3px solid #7ed957; padding-bottom:12px}
}
@media print{.jrovs-kopf{display:none}}

/* 18.10.2026: gemeinsame Navigation mit Preisrechner, "Kontakt" nur im Handy-Menue (Desktop: Knopf "Kennenlernen") */
.jrovs-kopf .kopf-menu .nur-handy{display:none}
@media (max-width:680px){
  .jrovs-kopf .kopf-toggle{display:block; position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
  .jrovs-kopf .kopf-toggle:focus-visible ~ .kopf-menu-btn{outline:2px solid #7ed957; outline-offset:2px}
  .jrovs-kopf .kopf-toggle:checked ~ .kopf-menu .nur-handy{display:block}
}