/* ==========================================================================
   arminschneider.de – gemeinsame Styles (Header, Navigation, Footer, Icons)
   Palette an Logo angeglichen; Variablen stehen zusätzlich im :root jeder Seite.
   ========================================================================== */
:root{
  --navy:#001B4D; --navy-deep:#0A1224; --navy-mid:#0040A8; --blue:#0040A8;
  --amber:#F8B000; --amber-bright:#FFD200; --amber-deep:#8B5A00; --link:#8B5A00;
  --ice:#F3F6FB; --white:#FFFFFF; --text:#1A2332; --muted:#5C6577; --line:#E1E6EF;
}

/* ---------- Icons (inline SVG, Strich-Icons) ---------- */
.ico{ width:1.15em; height:1.15em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; }
.ic-box{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:12px; background:var(--navy); color:var(--amber); }
.ic-box .ico{ width:22px; height:22px; }

/* ---------- Fokus (Tastatur) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; }
.hero a:focus-visible, .page-hero a:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible,
.cta-band a:focus-visible, .promo-band a:focus-visible, .price-panel a:focus-visible{ outline-color:var(--amber-bright); }

/* Anruf-Button: Gelb mit Navy-Text (8.9:1) */
.btn-call{ background:var(--amber); color:var(--navy); }
.btn-call:hover{ background:var(--amber-bright); transform:translateY(-2px); box-shadow:0 10px 24px rgba(248,176,0,.28); }
.btn .ico{ width:1.2em; height:1.2em; }

/* ---------- Header ---------- */
.topbar{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.topbar-inner{ max-width:1180px; margin:0 auto; padding:.7rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; }
.logo{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.logo img{ height:72px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{ font-size:.88rem; font-weight:500; text-decoration:none; color:var(--navy); opacity:.8; padding:.2rem 0 3px; border-bottom:2px solid transparent; transition:opacity .2s ease, border-color .2s ease; }
.nav a:hover, .nav a.active{ opacity:1; border-color:var(--amber); }
.nav a.active{ font-weight:600; }
.call-btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--navy); color:var(--white); text-decoration:none; padding:.6rem 1.1rem; border-radius:999px; font-size:.84rem; font-weight:600; white-space:nowrap; transition:background .2s ease; }
.call-btn:hover{ background:var(--blue); }
.call-btn .ico{ color:var(--amber); }
.nav-toggle{ display:none; }
.topbar-actions{ display:flex; align-items:center; gap:.5rem; }

@media (max-width: 1023px){
  .logo img{ height:60px; }
  .topbar-inner{ gap:1rem; }
  .nav{ gap:1.1rem; }
}

/* Handy: Logo 52 px, Anruf-Icon + Menü-Button, Navigation als Ausklappmenü */
@media (max-width: 767px){
  .topbar-inner{ padding:.45rem 1rem; flex-wrap:wrap; gap:.5rem; }
  .logo img{ height:52px; }
  .call-btn{ padding:0; width:44px; height:44px; justify-content:center; }
  .call-btn .call-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .call-btn .ico{ width:20px; height:20px; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px;
    border:1.5px solid var(--line); background:var(--white); color:var(--navy); cursor:pointer; padding:0; }
  .nav-toggle .ico{ width:22px; height:22px; }
  .nav-toggle .ico-close{ display:none; }
  .nav-toggle[aria-expanded="true"] .ico-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .ico-close{ display:block; }
  .topbar-actions{ order:2; }
  /* ohne JavaScript: Navigation einfach als Zeile darunter */
  .nav{ order:3; flex-basis:100%; justify-content:space-between; gap:.4rem; overflow-x:auto; }
  .nav a{ font-size:.84rem; white-space:nowrap; }
  /* mit JavaScript: Ausklappmenü */
  .js .nav{ display:none; flex-direction:column; align-items:stretch; gap:0; padding:.3rem 0 .6rem; border-top:1px solid var(--line); }
  .js .nav.is-open{ display:flex; }
  .js .nav a{ padding:.8rem .2rem; font-size:.98rem; border-bottom:1px solid var(--line); opacity:1; }
  .js .nav a:last-child{ border-bottom:none; }
  .js .nav a.active{ border-bottom-color:var(--line); box-shadow:inset 3px 0 0 var(--amber); padding-left:.8rem; }
}
@media (max-width: 767px){ .js .nav-toggle{ display:inline-flex; } }
html:not(.js) .nav-toggle{ display:none !important; }

/* Anker-Sprünge nicht unter dem Sticky-Header */
[id]{ scroll-margin-top:110px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.75); padding:3rem 1.4rem 1.6rem; }
.footer-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.2rem; margin-bottom:2.2rem; }
.footer-grid h2, .footer-grid h4{ color:var(--white); font-size:.9rem; font-weight:600; margin-bottom:.9rem; }
.footer-grid p, .footer-grid a{ font-size:.84rem; color:rgba(255,255,255,.7); text-decoration:none; line-height:1.9; display:block; }
.footer-grid a:hover{ color:var(--amber); }
.footer-bottom{ max-width:1180px; margin:0 auto; border-top:1px solid rgba(255,255,255,.12); padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:.76rem; color:rgba(255,255,255,.6); }
.footer-bottom a{ color:rgba(255,255,255,.6); text-decoration:none; }
.footer-bottom a:hover{ color:var(--amber); }
@media (max-width: 800px){ .footer-grid{ grid-template-columns:1fr; } }

/* Footer-Hintergrund (Designer, 2026-10) */
.site-footer{
  background:#0A1224 url(bilder/footer-bg-desktop.svg) center/cover no-repeat;
  box-shadow:inset 0 -4px 0 #F8B000;
}
@media (max-width:800px){
  .site-footer{ background-image:url(bilder/footer-bg-mobil.svg); }
}
