@import url('assets/fonts/sora.css');

/* ============ BeCoo.Net — Stylesheet v2 ============ */
:root{
  --navy:#01013A; --navy2:#12124E; --navy3:#1D1D60; --ink:#1A1B2E; --muted:#55565F; --faint:#9A9B94;
  --accent:oklch(70% 0.14 45); --accent-soft:oklch(70% 0.14 45 / .14); --accent-strong:oklch(62% 0.15 45);
  --bg:#FCFBF9; --alt:#F4F2ED; --card:#FFFFFF; --line:#EAE8E2; --line2:#D8D6CF;
  --on-dark:#F4F3EE; --on-dark-muted:rgba(244,243,238,.68); --line-dark:rgba(244,243,238,.14);
  --head:'Sora',Helvetica,Arial,sans-serif; --body:Helvetica,Arial,sans-serif;
  --wrap:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px}

/* ---- Header ---- */
.site-header{background:var(--navy);color:var(--on-dark);position:sticky;top:0;z-index:50;border-top:3px solid var(--accent)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:18px;padding-bottom:18px}
.logo{text-decoration:none;display:flex;align-items:baseline;gap:2px;font-family:var(--head);font-size:21px;font-weight:800;letter-spacing:-.5px}
.logo .b{color:#fff} .logo .n{color:var(--accent)}
.header-nav{display:flex;align-items:center;gap:18px;font-size:15px;position:relative}
.header-nav a{text-decoration:none}
.header-phone{color:var(--on-dark);text-decoration:none;font-weight:700;white-space:nowrap;border:1px solid var(--line-dark);border-radius:999px;padding:9px 18px;transition:border-color .15s,background .15s}
.header-phone:hover{border-color:var(--accent);background:rgba(255,255,255,.05)}
/* Menüeinträge nur mobil hinter dem Burger */
.nav-toggle{display:none}
.nav-burger{display:none}
.header-menu{display:none}
.header-menu a{color:var(--muted);font-weight:500}
.header-menu a:hover{color:var(--navy)}

/* ---- Buttons ---- */
.btn{text-decoration:none;border-radius:8px;font-weight:700;font-size:15px;display:inline-block;cursor:pointer;border:none;font-family:var(--body);padding:13px 24px}
.btn-primary{background:var(--accent);color:var(--navy)}
.btn-primary:hover{background:var(--accent-strong);color:#fff}
.btn-outline{color:var(--navy);font-weight:600;border:1.5px solid var(--line2);background:transparent}
.btn-outline:hover{border-color:var(--navy)}

/* ---- Hero (dunkel, ruhig) ---- */
.hero{position:relative;overflow:hidden;padding:96px 0 88px;background:linear-gradient(150deg,var(--navy) 0%,var(--navy2) 70%,var(--navy3) 100%);color:var(--on-dark)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(244,243,238,.07) 1px,transparent 1.6px);background-size:30px 30px;mask-image:linear-gradient(115deg,transparent 45%,#000 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:760px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:48px;line-height:1.12;font-weight:800;margin:0 0 22px;letter-spacing:-1.2px;color:#fff}
.hero h1 .hl{color:var(--accent)}
.hero-lead{font-size:16.5px;line-height:1.65;color:var(--on-dark-muted);margin:0 0 34px;max-width:560px}
.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero .btn-outline{border-color:rgba(244,243,238,.35);color:var(--on-dark)}
.hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ---- Sections ---- */
.section{padding:80px 0}
.section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:28px;font-weight:800;color:var(--navy);margin:0 0 32px;letter-spacing:-.6px}
.section.dark{background:var(--navy);color:var(--on-dark)}
.section.dark h2{color:#fff}

/* ---- Über uns ---- */
.about-block{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.about-head{position:sticky;top:96px}
.about-head .eyebrow{color:var(--accent-strong)}
.about-head h2{margin:0}
.about-copy p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 16px}
.about-copy p:first-child{font-size:18px;color:var(--ink)}
.about-copy p:last-child{margin:0}
.about-copy strong{color:var(--navy);font-weight:700}

/* ---- Leistungen ---- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:svc}
.svc-card{background:var(--card);border-radius:12px;padding:26px 24px;border:1px solid var(--line);position:relative;counter-increment:svc;transition:border-color .15s,box-shadow .15s,transform .15s}
.svc-card:hover{border-color:var(--line2);box-shadow:0 10px 26px rgba(1,1,58,.07);transform:translateY(-2px)}
.svc-card::after{content:"0" counter(svc);position:absolute;top:22px;right:22px;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--line2)}
.svc-card .bar{width:26px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:16px}
.svc-card h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px}
.svc-card p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

/* ---- Kontakt (dunkler Abschluss) ---- */
.kontakt-grid{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:start}
.kontakt-intro p{font-size:15.5px;line-height:1.65;color:var(--on-dark-muted);margin:0 0 28px;max-width:460px}
.kontakt-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kontakt-phone{color:var(--on-dark);text-decoration:none;font-weight:700;font-size:16px;white-space:nowrap}
.kontakt-phone:hover{color:var(--accent)}
.kontakt-details{display:flex;flex-direction:column;gap:18px;font-size:14px;line-height:1.6;color:var(--on-dark-muted);border-left:1px solid var(--line-dark);padding-left:40px;padding-top:4px}
.kontakt-details .label{font-family:var(--head);font-size:12px;font-weight:700;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
.kontakt-details a{color:var(--on-dark);text-decoration:none;font-weight:600}
.kontakt-details a:hover{color:var(--accent)}

/* ---- Footer ---- */
.site-footer{background:var(--navy);padding:22px 0;border-top:1px solid var(--line-dark)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:rgba(244,243,238,.5);gap:16px;flex-wrap:wrap}
.site-footer a{color:rgba(244,243,238,.5);text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}

/* ---- Legal pages ---- */
.legal{padding:56px 0 80px}
.legal .wrap{max-width:800px}
.legal-head{margin-bottom:36px}
.legal-head .eyebrow{margin-bottom:12px;color:var(--accent-strong)}
.legal h1{font-size:34px;font-weight:800;color:var(--navy);letter-spacing:-.8px;margin:0}
.legal .updated{color:var(--faint);font-size:14px;margin:20px 0 0}
.legal h2{font-size:20px;color:var(--navy);margin:34px 0 12px}
.legal p,.legal li{font-size:15px;line-height:1.7;color:#3A3B45}
.legal a{color:var(--navy)}
.legal .box{background:var(--alt);border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:8px 0}
.legal .todo{background:#FFF7E6;border:1px solid #F5D488;border-radius:6px;padding:2px 8px;font-size:.92em;color:#7a5a00;font-weight:600}
.legal .back{margin-top:40px;display:inline-block;font-weight:600}

/* ============ Responsive ============ */
@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .about-block{grid-template-columns:1fr;gap:24px}
  .about-head{position:static}
  .kontakt-grid{grid-template-columns:1fr;gap:36px}
  .kontakt-details{border-left:none;border-top:1px solid var(--line-dark);padding-left:0;padding-top:28px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero{padding:64px 0 56px}
  .hero h1{font-size:31px}
  .section{padding:56px 0}
  .svc-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;text-align:center}
  .site-header .wrap{padding-top:14px;padding-bottom:14px}
  .header-phone{border:none;padding:0}
  .legal h1{font-size:28px}
  .site-footer .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  /* Mobiles Menü: Leistungen/Kontakt hinter Hamburger */
  .nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer}
  .nav-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .header-menu{position:absolute;top:calc(100% + 16px);right:0;flex-direction:column;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px rgba(1,1,58,.25);padding:6px;z-index:60}
  .nav-toggle:checked ~ .header-menu{display:flex}
  .header-menu a{padding:12px 16px;border-radius:7px}
  .header-menu a:hover{background:var(--alt)}
}