/* ==========================================================================
   EinsatzSuite – Vorabseite
   Token-System zentral über CSS-Variablen (siehe :root)
   ========================================================================== */

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/Sora-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/Sora-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root{
  /* Farben */
  --color-navy:        #0B2447;
  --color-navy-deep:   #071630;
  --color-petrol:      #12888A;
  --color-petrol-light:#57C2C0;
  --color-bg:          #FFFFFF;
  --color-bg-alt:      #F5F7F9;
  --color-text:        #17222E;
  --color-text-muted:  #5C6B7A;
  --color-line:        #E1E7EC;
  --color-on-navy:     #EAF1F6;
  --color-on-navy-muted:#93A9BE;

  /* Typografie */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

  /* Layout */
  --wrap-width: 1120px;
  --radius: 10px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.wrap{
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--color-navy); color:#fff; padding:10px 16px; z-index:1000;
}
.skip-link:focus{ left: var(--space-2); top: var(--space-2); }

:focus-visible{
  outline: 3px solid var(--color-petrol);
  outline-offset: 2px;
}

/* ---------------- Header ---------------- */
.site-header{
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  position: sticky; top:0; z-index: 100;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.brand__logo{ height:32px; width:auto; }
.site-nav{ display:flex; align-items:center; gap: var(--space-3); }
.site-nav__link{
  font-size: 14px; font-weight:500; text-decoration:none; color: var(--color-text-muted);
}
.site-nav__link:hover{ color: var(--color-navy); }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-weight:600; font-size:15px;
  padding: 13px 24px; border-radius: var(--radius);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  min-height:48px;
}
.btn--primary{ background: var(--color-petrol); color:#fff; }
.btn--primary:hover{ background:#0E7274; }
.btn--outline{ background:transparent; color: var(--color-navy); border-color: var(--color-line); }
.btn--outline:hover{ border-color: var(--color-navy); }
.btn--small{ padding:9px 16px; font-size:14px; min-height:40px; }
.btn--full{ width:100%; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing:.08em;
  color: var(--color-petrol);
  margin: 0 0 var(--space-2);
}
.eyebrow--center{ text-align:center; }

/* ---------------- Hero ---------------- */
.hero{
  background: linear-gradient(180deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
  color: var(--color-on-navy);
  padding: var(--space-6) 0 0;
}
.hero__inner{ padding-bottom: var(--space-6); text-align:center; max-width: 760px; }
.hero .eyebrow{ color: var(--color-petrol-light); }
.hero__headline{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(36px, 6vw, 60px);
  margin: 0 0 var(--space-2);
  letter-spacing:-.01em;
}
.hero__sub{
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight:500;
  color: var(--color-on-navy);
  margin: 0 0 var(--space-3);
}
.hero__text{
  font-size:16px; color: var(--color-on-navy-muted);
  max-width: 620px; margin: 0 auto var(--space-4);
}
.hero__actions{ display:flex; gap: var(--space-2); justify-content:center; flex-wrap:wrap; }
.hero .btn--outline{ color:#fff; border-color: rgba(255,255,255,.35); }
.hero .btn--outline:hover{ border-color:#fff; }

/* Signatur-Element: ruhige Statuszeile, Anklang an die Produkt-UI */
.statusline{
  border-top: 1px solid rgba(255,255,255,.12);
  background: var(--color-navy-deep);
  display:flex; align-items:center; gap: var(--space-2);
  padding: 12px var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-on-navy-muted);
  overflow:hidden;
}
.statusline__dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--color-petrol-light);
  box-shadow: 0 0 0 4px rgba(87,194,192,.15);
  flex: none;
}
.statusline__text{ letter-spacing:.06em; white-space:nowrap; }
.statusline__text--muted{ margin-left:auto; opacity:.7; }
.statusline__bars{ display:flex; align-items:flex-end; gap:3px; height:10px; }
.statusline__bars span{
  width:3px; background: var(--color-petrol-light); border-radius:1px; opacity:.85;
}
.statusline__bars span:nth-child(1){ height:3px; }
.statusline__bars span:nth-child(2){ height:6px; }
.statusline__bars span:nth-child(3){ height:9px; }
.statusline__bars span:nth-child(4){ height:10px; }

/* ---------------- Pillars ---------------- */
.pillars{ padding: var(--space-6) 0; }
.pillars__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-top: var(--space-4);
}
.pillar-card{
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-alt);
}
.pillar-card__number{
  font-family: var(--font-mono);
  color: var(--color-petrol);
  font-size:13px;
  display:block; margin-bottom: var(--space-2);
}
.pillar-card__title{
  font-family: var(--font-display); font-weight:600; font-size:20px;
  margin: 0 0 8px; color: var(--color-navy);
}
.pillar-card__text{ margin:0; color: var(--color-text-muted); font-size:15px; }

/* ---------------- Practice ---------------- */
.practice{ background: var(--color-navy); color: var(--color-on-navy); padding: var(--space-6) 0; }
.practice__inner{ max-width: 700px; text-align:center; }
.practice__title{ font-family: var(--font-display); font-weight:600; font-size: clamp(24px,3.4vw,32px); margin:0 0 var(--space-2); }
.practice__text{ color: var(--color-on-navy-muted); font-size:16px; margin:0 0 var(--space-2); }
.practice__attribution{ font-size:13px; color: var(--color-petrol-light); font-family: var(--font-mono); letter-spacing:.02em; }

/* ---------------- Status ---------------- */
.status{ padding: var(--space-6) 0; background: var(--color-bg-alt); }
.status__inner{ max-width:700px; text-align:center; }
.status__badge{
  display:inline-block; font-family: var(--font-mono); font-size:11px; letter-spacing:.08em;
  color: var(--color-petrol); border:1px solid var(--color-petrol); border-radius:20px;
  padding:4px 12px; margin-bottom: var(--space-2);
}
.status__title{ font-family: var(--font-display); font-weight:600; font-size: clamp(22px,3vw,28px); margin:0 0 var(--space-2); color: var(--color-navy); }
.status__text{ color: var(--color-text-muted); font-size:16px; margin:0; }

/* ---------------- Contact ---------------- */
.contact{ padding: var(--space-6) 0; }
.contact__inner{ max-width: 560px; }
.contact__title{ font-family: var(--font-display); font-weight:600; font-size: clamp(24px,3.4vw,30px); margin:0 0 var(--space-4); color: var(--color-navy); }

.form-success{
  background: rgba(18,136,138,.1); border:1px solid var(--color-petrol);
  color: var(--color-navy); padding: var(--space-3); border-radius: var(--radius); font-size:15px;
}
.form-error-summary{
  background: #FBEAEA; border:1px solid #D9534F; color:#7A2320;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-3); font-size:14px;
}
.contact-form{ display:flex; flex-direction:column; gap: var(--space-3); }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-size:14px; font-weight:500; color: var(--color-text); }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row select,
.form-row textarea{
  font-family: var(--font-body); font-size:15px;
  border:1px solid var(--color-line); border-radius:8px;
  padding: 12px 14px; min-height:48px; background:#fff; color: var(--color-text);
}
.form-row textarea{ min-height:110px; resize:vertical; }
.form-row--checkbox label{
  display:flex; align-items:flex-start; gap:10px; font-weight:400; font-size:14px; color: var(--color-text-muted);
}
.form-row--checkbox input{ margin-top:3px; width:18px; height:18px; flex:none; }
.field-error{ font-size:13px; color:#C0392B; }

.hp-field{ position:absolute; left:-9999px; top:-9999px; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--color-line); background: var(--color-bg-alt); }
.site-footer__inner{
  padding: var(--space-4) var(--space-3);
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-3);
  justify-content:space-between;
}
.site-footer__brand{ display:flex; align-items:center; gap:10px; }
.site-footer__slogan{ font-size:13px; color: var(--color-text-muted); font-family: var(--font-mono); }
.site-footer__links{ display:flex; gap: var(--space-3); font-size:14px; }
.site-footer__links a{ text-decoration:none; color: var(--color-text-muted); }
.site-footer__links a:hover{ color: var(--color-navy); }
.site-footer__copyright{ width:100%; font-size:12px; color: var(--color-text-muted); margin:0; order:99; }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px){
  .pillars__grid{ grid-template-columns: 1fr; }
  .statusline__text--muted{ display:none; }
}
@media (max-width: 600px){
  .hero{ padding-top: var(--space-5); }
  .hero__inner{ padding-bottom: var(--space-5); }
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; }
  .site-footer__inner{ flex-direction:column; align-items:flex-start; }
}

/* Simple content pages (Impressum/Datenschutz/404) */
.simple-page{ padding: var(--space-6) 0; max-width: 760px; margin:0 auto; }
.simple-page h1{ font-family: var(--font-display); color: var(--color-navy); }
.simple-page h2{ font-family: var(--font-display); color: var(--color-navy); font-size:20px; }