/* Kawala EDV-Systeme — Übergangs- und Wartungsseite.

   DESIGN-TOKENS aus dem Kickoff-Deck der Claude Design Canvas
   (Kickoff Consulting-Landingpage.dc.html), per DesignSync aus dem
   Projekt gelesen — exakte Werte aus der Quelle, nicht geschätzt.

   Das Deck ist zweifarbig: Navy-Folien und Off-White-Folien.
   Diese Seite nutzt Off-White als Grund und Navy als Fussband.

   Schriften sind SELBST GEHOSTET (SIL OFL). Das Deck laedt sie von
   Google Fonts — hier nicht: die Seite soll ohne einen einzigen
   externen Request auskommen (CSP default-src 'none', DSGVO). */

@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Grundfarben */
  --navy:        #16233F;
  --paper:       #F4F2ED;
  --accent:      #1F6FEB;

  /* auf hellem Grund */
  --ink:         #16233F;
  --ink-body:    #33405F;
  --ink-muted:   #4A5675;
  --label-light: #6B7794;
  --mono-light:  #8C8677;
  --rule-light:  #C9C4B8;

  /* auf Navy */
  --on-navy:     #F4F2ED;
  --on-navy-dim: #C3CEE4;
  --mono-navy:   #8F9EBC;
  --rule-navy:   #3A4A70;

  --sans: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box}

/* Die Seite ist bewusst einfarbig hell — kein Dunkelmodus.
   color-scheme sagt das dem Browser, sonst greift auf Android
   die automatische Verdunklung ("Auto Dark Theme") ein.
   Der Hintergrund steht zusaetzlich auf html: faellt body je aus,
   scheint sonst das weisse Standard-Canvas durch. */
html{
  -webkit-text-size-adjust:100%;
  color-scheme:light;
  background:var(--paper);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap{
  width:100%; max-width:62rem; margin:0 auto;
  padding:clamp(2.5rem,7vw,5.5rem) clamp(1.25rem,5vw,3.5rem);
  flex:1 0 auto;
}

/* Kopfzeile: [ kawala ] —— LABEL — Muster von Folie 1 */
.eyebrow{display:flex; align-items:center; gap:1.125rem; flex-wrap:wrap; margin:0 0 clamp(3rem,9vw,5.5rem)}
.mark{font-family:var(--mono); font-size:1rem; letter-spacing:.14em; color:var(--ink); white-space:nowrap}
.rule{width:4rem; height:2px; background:var(--accent); flex:none}
.label{font-family:var(--mono); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--label-light)}

h1{
  margin:0 0 1.75rem;
  font-size:clamp(2.2rem,6.4vw,4.25rem);
  line-height:1.06; font-weight:600; letter-spacing:-.025em;
  color:var(--ink); text-wrap:pretty;
}
.lead{
  margin:0 0 clamp(2.5rem,6vw,3.75rem);
  font-size:clamp(1.1rem,2.3vw,1.45rem); line-height:1.4;
  color:var(--ink-body); max-width:38ch;
}

/* Leistungen — Zahlenraster von Folie 5 */
.services{
  list-style:none; margin:0 0 clamp(2.5rem,6vw,3.75rem); padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:1.75rem 2.25rem;
}
.services li{
  border-top:1px solid var(--rule-light); padding-top:1.4rem;
  font-size:1.05rem; line-height:1.3; font-weight:600; color:var(--ink);
}
.services .n{
  display:block; font-family:var(--mono); font-size:.85rem;
  color:var(--mono-light); margin-bottom:.6rem; font-weight:400;
}

.contact{margin:0; font-size:1.05rem; color:var(--ink-muted)}
a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

/* Fussband — Navy, Muster der Schlussfolie */
footer{flex:none; background:var(--navy); color:var(--on-navy)}
.footer-inner{max-width:62rem; margin:0 auto; padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,5vw,3.5rem)}
.footer-top{display:flex; align-items:center; gap:2rem; flex-wrap:wrap; margin:0 0 1.5rem}
.footer-top .mark{color:var(--on-navy); font-size:1rem; letter-spacing:.12em}
.footer-top .item{font-size:.95rem; color:var(--on-navy-dim)}
.footer-top a{color:var(--on-navy-dim); border-bottom-color:var(--rule-navy)}
.footer-top a:hover{color:var(--on-navy); border-bottom-color:var(--accent)}
.who{font-weight:600; font-size:1rem; margin:0 0 .4rem; color:var(--on-navy)}
.meta{font-family:var(--mono); font-size:.82rem; letter-spacing:.06em; line-height:1.9; color:var(--mono-navy); margin:0}

@media (max-width:30rem){ .eyebrow{gap:.75rem} .rule{width:2.25rem} .footer-top{gap:1rem} }