/* =========================================================
   AllCom – Kühle „Light Tech“-Variante
   Wird NACH css/style.css geladen.
   Kühles Blaugrau, weiße Karten mit feinen Rändern,
   Graphit/Navy-Text, Cobalt-Blau als Akzent.
   Bewusst ohne Glow, Farbverläufe und Glaseffekte.
   ========================================================= */

:root {
  --paper: #F8FAFC;
  --paper-2: #F1F5F9;
  --card: #FFFFFF;
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #475569;
  --line: #E2E8F0;
  --rule: #CBD5E1;
  --dark: #0F172A;        /* Kontaktbereich in Navy */
  --darker: #020617;      /* Footer */
  --on-dark: #F1F5F9;
  --on-dark-2: #CBD5E1;
  --on-dark-3: #94A3B8;

  --accent: #2563EB;          /* Cobalt – weißer Text darauf: 5,2:1 */
  --accent-hover: #1D4ED8;
  --accent-on-dark: #60A5FA;

  --serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.07);
}

a { color: var(--accent-hover); }
a:hover { color: var(--ink); }

/* Überschriften serifenlos, präzise */
.hero h1 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.h2 { font-weight: 600; letter-spacing: -0.025em; }
.service h3 { font-weight: 600; letter-spacing: -0.01em; }
.logo__word { font-weight: 600; letter-spacing: -0.03em; }
.step__num { font-family: var(--mono); font-weight: 500; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: #EFF4FF; color: var(--accent-hover); }

/* Buttons: leicht gerundet */
.btn { border-radius: 6px; }
.menu summary { border-radius: 6px; border-color: var(--rule); background: var(--card); }
.menu__panel { border-radius: var(--radius); border-color: var(--line); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); overflow: hidden; }

/* Header auf Weiß, Topbar kühl */
.topbar { background: var(--paper-2); border-bottom-color: var(--line); }
.header { background: var(--card); border-bottom: 1px solid var(--line); }
.hero { border-bottom-color: var(--line); }

/* Karten & Widgets */
.facts { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.facts__head { background: var(--paper-2); border-bottom-color: var(--line); color: var(--muted); }
.facts dd { font-family: var(--mono); font-weight: 500; color: var(--ink); }

.remote-box { background: var(--card); border: 1px solid var(--line); border-left-width: 1px; border-radius: var(--radius); box-shadow: var(--shadow); }
.remote-box__icon { color: var(--accent); }

.services { gap: 24px; }
.service { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.service__tags { color: var(--muted); }

.process-wrap { background: var(--paper-2); border-color: var(--line); }
.steps { gap: 24px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }

.about__photo { border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--paper-2); overflow: hidden; }
.about__placeholder { background: var(--card); border-radius: 6px; }
.promises { border-top-color: var(--rule); }
.promises svg { color: var(--accent); }

.partners { border-top-color: var(--line); }
.partners__list { border: 0; gap: 12px; }
.partners__list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

/* Kontaktbereich in Navy */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { background: #1E293B; border-color: #334155; border-radius: 6px; }
.contact-card { border-color: #334155; border-radius: var(--radius); overflow: hidden; }
.contact-card__block { border-bottom-color: #1E293B; }

.mobile-bar { background: var(--card); border-top-color: var(--line); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06); }

@media (max-width: 640px) {
  .service, .step { padding: 22px; }
}

.legal__note { border-radius: var(--radius); }
.legal__body section + section { padding-top: 32px; border-top: 1px solid var(--line); }
.hero h1 { font-size: clamp(38px, 4.9vw, 66px); }
.chips li { border-radius: 999px; border-color: #BFD3FB; background: #EFF4FF; color: #1E3A8A; }
.chips--muted li { background: var(--card); border-color: var(--line); color: var(--ink-2); }
.area__group--core h3 { color: var(--ink); }
.refs li { border-radius: var(--radius); box-shadow: var(--shadow); }
.refs-toggle { border-radius: 6px; }
.check__card { border-radius: var(--radius); box-shadow: var(--shadow); }