/* ============================================================
   Bits & Brain — gemeinsame Chrome- und Sektions-Stile
   für alle Unterseiten (leistungen, ueber-uns, kalender,
   kontakt, impressum, datenschutz).
   Lädt nach colors_and_type.css.
   ============================================================ */

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-1); color: var(--ink-1); font-family: var(--font-sans); }
a { color: var(--brand-500); }

/* ---------- Header (sticky) ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); height: 108px; }
.hd__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); display: flex; align-items: center; gap: var(--sp-8); height: 100%; }
body { padding-top: 108px; }
.hd__lg { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.hd__lg img { height: 72px; width: 72px; border-radius: 10px; }
.hd__wm { font: 700 28px/1 var(--font-sans); color: var(--ink-1); letter-spacing: -.01em; }
.hd__wm .amp { color: var(--brand-500); margin: 0 4px; font-weight: 500; }
.hd__nav { margin-left: var(--sp-10); display: flex; gap: var(--sp-8); }
.hd__nav a { color: var(--ink-2); text-decoration: none; font-size: 20px; font-weight: 500; }
.hd__nav a:hover, .hd__nav a.is-active { color: var(--brand-500); }
.hd__cta { margin-left: var(--sp-8); background: var(--brand-500); color: #fff; text-decoration: none; padding: 13px 0; border-radius: var(--r-2); font-size: 20px; font-weight: 600; width: 240px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hd__cta:hover { background: var(--brand-700); color: #fff; }

/* ---------- Mobile-Nav (Hamburger + Slide-out) ---------- */
.mob-burger,
.mob-panel,
.mob-overlay { display: none; }

@media (max-width: 900px) {
  .hd__in { padding: 0 var(--sp-5); height: 72px; gap: 12px; }
  body { padding-top: 72px; }
  .hd__lg img { height: 48px; width: 48px; border-radius: 8px; }
  .hd__lg { gap: 12px; }
  .hd__wm { font-size: 22px; }
  .hd__nav { display: none; }
  .hd__cta { display: none; }

  .mob-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer; padding: 0;
    flex: 0 0 auto;
  }
  .mob-burger__icon {
    position: relative; display: block; width: 24px; height: 2px; background: var(--ink-1);
    transition: background 180ms;
  }
  .mob-burger__icon::before,
  .mob-burger__icon::after {
    content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink-1);
    transition: transform 220ms, top 220ms;
  }
  .mob-burger__icon::before { top: -8px; }
  .mob-burger__icon::after  { top:  8px; }
  .mob-burger.is-open .mob-burger__icon { background: transparent; }
  .mob-burger.is-open .mob-burger__icon::before { top: 0; transform: rotate(45deg); }
  .mob-burger.is-open .mob-burger__icon::after  { top: 0; transform: rotate(-45deg); }

  .mob-overlay {
    display: block;
    position: fixed; top: 72px; right: 0; bottom: 0; left: 0;
    background: rgba(17,25,42,.4);
    opacity: 0; pointer-events: none;
    transition: opacity 220ms;
    z-index: 90;
  }
  .mob-overlay.is-open { opacity: 1; pointer-events: auto; }

  .mob-panel {
    display: flex; flex-direction: column;
    position: fixed; top: 72px; right: 0; bottom: 0;
    width: min(82vw, 320px);
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(17,25,42,.12);
    transform: translateX(100%);
    transition: transform 240ms ease-out;
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
    z-index: 95;
    overflow-y: auto;
  }
  .mob-panel.is-open { transform: translateX(0); }
  .mob-panel a {
    display: block;
    padding: 16px 0;
    font-size: 20px; font-weight: 500;
    color: var(--ink-1);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
  }
  .mob-panel a:hover, .mob-panel a.is-active { color: var(--brand-500); }
  .mob-panel .mob-cta {
    margin-top: var(--sp-6);
    background: var(--brand-500);
    color: #fff;
    text-align: center;
    border-radius: var(--r-2);
    border-bottom: 0;
    padding: 16px 18px;
    font-weight: 600;
  }
  .mob-panel .mob-cta:hover { background: var(--brand-700); color: #fff; }
}

/* Sehr schmale Geräte: Wortmarke ausblenden */
@media (max-width: 420px) {
  .hd__wm { display: none; }
}

/* Hero, Section-Spacing schlanker auf Mobile */
@media (max-width: 700px) {
  .ph { padding: var(--sp-12) 0 var(--sp-10); }
  .ph h1 { font-size: clamp(28px, 7vw, 38px); }
  .sec { padding: var(--sp-12) 0; }
  .sec__head { margin-bottom: var(--sp-6); }
  .sec__h { font-size: clamp(24px, 6vw, 32px); }
}
@media (max-width: 760px) { .hd__nav { display: none; } }

/* ---------- Page hero ---------- */
.ph { background: var(--brand-500); color: #fff; padding: var(--sp-20) 0 var(--sp-16); position: relative; overflow: hidden; }
.ph::after { content: ''; position: absolute; inset: 0; background-image: url("assets/bg-blue-white.svg"); background-size: cover; background-position: center; opacity: .25; pointer-events: none; }
.ph__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); position: relative; z-index: 1; }
.ph__eb { font: 600 12px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: var(--sp-4); }
.ph__crumb { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: var(--sp-6); }
.ph__crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.ph__crumb a:hover { text-decoration: underline; }
.ph h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; margin: 0 0 var(--sp-5); font-weight: 800; letter-spacing: -.015em; max-width: 18ch; }
.ph__lede { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 60ch; margin: 0; }
/* Schrift im blauen Page-Hero durchgehend weiß */
.ph, .ph * { color: #fff; }
.ph .ph__eb { color: rgba(255,255,255,.7); }
.ph .ph__crumb { color: rgba(255,255,255,.65); }
.ph .ph__crumb a { color: rgba(255,255,255,.85); }
.ph .ph__lede { color: rgba(255,255,255,.9); }

/* ---------- Section ---------- */
.sec { padding: var(--sp-20) 0; border-bottom: 1px solid var(--border); }
.sec--alt { background: var(--paper); }
.sec__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); }
.sec__head { max-width: 56rem; margin-bottom: var(--sp-10); }
.sec__eb { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-500); margin-bottom: var(--sp-3); }
.sec__h { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 0 0 var(--sp-4); letter-spacing: -.01em; color: var(--ink-1); }
.sec__lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 64ch; }

/* numbered head (for leistungen-style pages) */
.sec__head--num { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-6); align-items: start; }
.sec__num { font: 700 56px/1 var(--font-sans); color: var(--brand-200); letter-spacing: -.02em; }
@media (max-width: 700px) { .sec__head--num { grid-template-columns: 1fr; } .sec__num { font-size: 42px; } }

/* Two-column block */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12) var(--sp-16); }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; gap: var(--sp-8); } }
.col h3 { font-size: 19px; line-height: 1.25; margin: 0 0 var(--sp-4); color: var(--ink-1); letter-spacing: -.005em; }
.col p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 var(--sp-3); max-width: 56ch; }
.col p em { font-style: normal; color: var(--brand-700); font-weight: 600; }

/* Bullet list (-) */
.bul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.bul li { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; padding-left: var(--sp-4); position: relative; }
.bul li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--brand-500); }
.bul li strong { color: var(--ink-1); font-weight: 600; }

/* Highlight box */
.hl { margin-top: var(--sp-6); padding: var(--sp-6); border-left: 3px solid var(--brand-500); background: var(--brand-50); border-radius: 0 var(--r-3) var(--r-3) 0; }
.hl p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.hl strong { color: var(--ink-1); }

/* Values definition list */
.values { margin: 0; display: grid; gap: var(--sp-4); }
.values > div { padding-left: var(--sp-4); border-left: 2px solid var(--brand-200); }
.values dt { font: 600 13px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); margin-bottom: var(--sp-1); }
.values dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ---------- Footer ---------- */
.ft { background: var(--brand-700); color: #fff; padding: var(--sp-16) 0 var(--sp-8); }
.ft__in { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-10); }
@media (max-width: 900px) { .ft__in { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
@media (max-width: 600px) { .ft__in { grid-template-columns: 1fr; } }
.ft__lockup { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ft__lockup img { height: 48px; width: 48px; border-radius: 8px; }
.ft__wm { font: 700 22px/1 var(--font-sans); color: #fff; }
.ft__wm .amp { color: #B9CFE8; margin: 0 4px; font-weight: 500; }
.ft__brand p { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.65; margin: 0 0 var(--sp-3); max-width: 36ch; }
.ft__h { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: var(--sp-3); }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft__col a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 14px; }
.ft__col a:hover { color: #fff; text-decoration: underline; }
.ft__legal { max-width: 1200px; margin: var(--sp-10) auto 0; padding: var(--sp-5) var(--sp-8) 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: var(--sp-4); font-size: 12.5px; color: rgba(255,255,255,.6); flex-wrap: wrap; }

/* ---------- Legal blocks (Impressum/Datenschutz) ---------- */
.lg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-10); }
@media (max-width: 760px) { .lg__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
.lg__block h3 { font: 600 13px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); margin: 0 0 var(--sp-3); }
.lg__block dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); font-size: 14.5px; line-height: 1.55; }
.lg__block dt { color: var(--ink-3); }
.lg__block dd { color: var(--ink-1); margin: 0; }
.lg__block dd a { color: var(--brand-700); text-decoration: none; }
.lg__block dd a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lg__block p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 var(--sp-3); }
.lg__block p:last-child { margin-bottom: 0; }
.lg__block p strong { color: var(--ink-1); font-weight: 600; }
.lg__full { grid-column: 1 / -1; }
.lg__note { margin-top: var(--sp-8); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); background: var(--paper); border-radius: var(--r-3); color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }
.lg__note strong { color: var(--ink-2); font-weight: 600; }

/* ---------- Generic content prose ---------- */
.prose { max-width: 64ch; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 var(--sp-4); }
.prose h3 { font-size: 19px; line-height: 1.3; color: var(--ink-1); margin: var(--sp-8) 0 var(--sp-3); }
.prose h4 { font-size: 15.5px; font-weight: 600; color: var(--ink-1); margin: var(--sp-5) 0 var(--sp-2); }
.prose ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }
.prose ul li { margin-bottom: var(--sp-1); }
.prose strong { color: var(--ink-1); }
.prose a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }