/* chrome.css - gemeinsame Chrome-Schicht fuer alle 13 SSI-Seiten
   Reset, :root-Tokens, Header/Nav (Dropdown+Hamburger+Pill), geteilte Buttons,
   Footer, Back-to-top, Cookie-Banner. Extrahiert aus index.html - #1017, 2026-08-18. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { font-family: 'IBM Plex Sans', system-ui, Arial, sans-serif; color: #5a6b78; line-height: 1.65; overflow-x: hidden; background: #eef2f6; }

h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; }

a { color: #1470ad; text-decoration: none; }

ul { list-style: none; }

img { max-width: 100%; display: block; }

button { font-family: inherit; }

:root {
      --blue: #1a82c4; --blue-bright: #2196f3; --blue-section: #0f2e46;
      --blue-600: #1470ad; --blue-700: #0f5688;
      --ink: #14232e; --charcoal: #0f2e46; --text: #5a6b78; --muted: #90a0ac;
      --line: #e6edf3; --input-bg: #ffffff; --white: #ffffff;
      --section-pad: 96px; --max-w: 1200px; --radius: 12px; --radius-lg: 16px; --trans: 0.25s ease;
    }

#site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: #ffffff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px -6px rgba(15,46,70,0.18); }

nav { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; height: 78px; display: flex; align-items: center; justify-content: space-between; }

.nav-logo img { height: 52px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 30px; }

.nav-links a { font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #5a6b78; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color var(--trans), border-color var(--trans); }

.nav-links a:hover, .nav-links a.active { color: var(--blue); border-bottom-color: var(--blue); }

.nav-dropdown{position:relative}

.nav-drop-toggle{cursor:pointer}

.nav-caret{font-size:9px;display:inline-block;margin-left:4px;transition:transform var(--trans)}

.nav-dropdown:hover .nav-caret{transform:rotate(180deg)}

.nav-dropdown::before{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:20px}

.nav-sub{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:264px;background:#fff;border-radius:14px;box-shadow:0 18px 44px -14px rgba(15,46,70,0.32);padding:10px;opacity:0;visibility:hidden;transition:opacity var(--trans),transform var(--trans);z-index:60}

.nav-dropdown:hover .nav-sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.nav-sub li{width:100%}

.nav-sub a{display:block;padding:9px 14px;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:none;color:#3a4a56;border-bottom:none;border-radius:9px;white-space:nowrap}

.nav-sub a:hover{background:#eef5fb;color:var(--blue);border-bottom:none}

.nav-links a.nav-drop-toggle{background:var(--blue);color:#fff;padding:8px 16px;border-radius:999px;border-bottom:none;box-shadow:0 6px 16px -6px rgba(26,130,196,0.55);transition:background var(--trans),box-shadow var(--trans)}

.nav-links a.nav-drop-toggle:hover{background:var(--blue-600);color:#fff;border-bottom:none;box-shadow:0 8px 20px -6px rgba(26,130,196,0.7)}

.nav-hamburger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px; }

.nav-hamburger span { display: block; width: 26px; height: 2px; background: #5a6b78; border-radius: 2px; transition: all var(--trans); }

.btn { display: inline-block; padding: 13px 30px; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: all var(--trans); text-align: center; }

.btn-blue { background: var(--blue); color: var(--white); border-color: var(--blue); box-shadow: 0 10px 22px -12px rgba(26,130,196,0.8); }

.btn-blue:hover { background: var(--blue-600); border-color: var(--blue-600); transform: translateY(-1px); }

.btn-outline-blue { background: transparent; color: var(--blue); border-color: var(--blue); }

.btn-outline-blue:hover { background: var(--blue); color: var(--white); }

footer { background: #0b2536; color: var(--white); padding: 56px 28px 30px; }

.footer-inner { max-width: var(--max-w); margin: 0 auto; }

.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; gap: 32px; }

.footer-brand h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.3px; }

.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.55); }

.footer-links { display: flex; flex-direction: column; gap: 9px; text-align: right; flex-shrink: 0; }

.footer-links a { font-size: 13px; color: rgba(255,255,255,0.72); transition: color var(--trans); }

.footer-links a:hover { color: var(--white); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }

.footer-contacts { display: flex; gap: 20px; flex-wrap: wrap; }

.footer-contacts a { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: rgba(255,255,255,0.88); transition: color var(--trans); }

.footer-contacts a:hover { color: var(--white); }

.footer-contacts .ic-phone, .footer-contacts .ic-mail { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }

.footer-contacts .ic-phone { color: #ff7a6b; background: rgba(231,76,60,0.16); }

.footer-contacts .ic-mail { color: #7cc0e8; background: rgba(26,130,196,0.2); }

.footer-cr { font-size: 13px; color: rgba(255,255,255,0.4); }

#btt { position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: var(--white); border: none; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--trans), background var(--trans), transform var(--trans); z-index: 800; box-shadow: 0 12px 26px -12px rgba(15,46,70,0.6); }

#btt.show { opacity: 1; pointer-events: all; }

#btt:hover { background: var(--blue); transform: translateY(-2px); }

#cookie-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(920px, calc(100% - 40px)); background: rgba(15,35,46,0.97); color: var(--white); z-index: 1000; padding: 18px 24px; display: none; align-items: center; gap: 20px; flex-wrap: wrap; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6); }

#cookie-banner.show { display: flex; }

#cookie-banner p { flex: 1; min-width: 200px; font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5; }

#cookie-banner p a { color: #7cc0e8; text-decoration: underline; }

.ck-btns { display: flex; gap: 10px; flex-shrink: 0; }

.ck-btn { padding: 9px 22px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.35); transition: all var(--trans); }

.ck-accept { background: var(--blue); color: var(--white); border-color: var(--blue); }

.ck-reject { background: transparent; color: var(--white); }

.ck-accept:hover { background: var(--blue-600); }

.ck-reject:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 960px){
  .footer-top { flex-direction: column; }
  .footer-links { text-align: left; }
}

@media (max-width: 600px){
  nav { height: 66px; }
  .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: flex-start; padding: 16px 24px 20px; gap: 14px; box-shadow: 0 10px 24px -12px rgba(15,46,70,0.25); }
  .nav-links.open { display: flex; }
  .nav-dropdown{width:100%}
  .nav-sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:transparent;padding:2px 0 6px 14px;min-width:0;max-height:0;overflow:hidden;transition:max-height var(--trans)}
  .nav-dropdown.open .nav-sub{max-height:680px}
  .nav-sub a{padding:8px 6px;font-size:13px}
  .nav-dropdown.open .nav-caret{transform:rotate(180deg)}
  .nav-dropdown:hover .nav-sub{transform:none}  /* Touch: Sticky-Hover darf die Mobile-Akkordeon-Liste nicht verschieben */
  .nav-hamburger { display: flex; }
  .nav-logo img { height: 44px; }
  .footer-contacts { flex-direction: column; gap: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}