/* kiphilip.eu: Markensystem für alle Seiten.
   Quelle: Visuelles System KI Philip (Vault) und leadmagneten/vorlage/ci.css.
   Elektroblau als Fläche mit Punktraster, Karte für alles mit Fließtext,
   Tinte für Text, Konturen und harte Schatten, Limette nur als Fläche
   (nie als Text auf Blau). */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blau: #2f6bff;
  --limette: #c6ff3d;
  --karte: #eef3ff;
  --tinte: #0a1033;
  --weiss: #ffffff;
  --tinte-leise: rgba(10, 16, 51, 0.74);
  --raster: rgba(10, 16, 51, 0.13);

  /* scrollcraft-Token */
  --sc-canvas: var(--blau);
  --sc-surface: var(--karte);
  --sc-ink: var(--tinte);
  --sc-ink-soft: var(--tinte-leise);
  --sc-accent: var(--limette);
  --sc-accent-ink: var(--tinte);
  --sc-font-display: "Archivo", "Arial", sans-serif;
  --sc-font-text: "Archivo", "Arial", sans-serif;
  --sc-font-mono: "JetBrains Mono", "Menlo", monospace;

  /* Form: Video 8 px Kontur und 16 px Schatten bei 1080 px, fürs Web skaliert */
  --kontur: 3px solid var(--tinte);
  --kontur-fein: 2px solid var(--tinte);
  --schatten: 6px 6px 0 var(--tinte);
  --schatten-klein: 4px 4px 0 var(--tinte);
  --schatten-limette: 6px 6px 0 var(--limette);
  --radius: 18px;
  --radius-klein: 10px;
  --rund: 999px;
  --leiste: 0px;
}

html { background: var(--blau); }
body {
  background-color: var(--blau);
  background-image: radial-gradient(var(--raster) 1.7px, transparent 2.2px);
  background-size: 28px 28px;
  color: var(--tinte);
  font-weight: 400;
  line-height: 1.55;
}
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 6px; }
.auf-tinte :focus-visible, .auf-tinte:focus-visible { outline-color: var(--limette); }
::selection { background: var(--limette); color: var(--tinte); }
a { color: inherit; }
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Bausteine ---------- */
.karte {
  background: var(--karte);
  border: var(--kontur);
  box-shadow: var(--schatten);
  border-radius: var(--radius);
}
.badge {
  display: inline-block;
  padding: 0.3em 0.95em 0.36em;
  background: var(--limette);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: var(--rund);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transform: rotate(-3deg);
  white-space: nowrap;
}
.handle {
  display: inline-block;
  padding: 0.4em 0.95em;
  background: var(--tinte);
  color: var(--karte);
  border-radius: var(--rund);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out);
}
a.handle:active { transform: translateY(1px); }
.beispiel {
  display: inline-block;
  padding: 0.18em 0.6em;
  background: var(--tinte);
  color: var(--limette);
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  transform: rotate(4deg);
}
.tag {
  display: inline-block;
  padding: 0.2em 0.75em 0.24em;
  background: var(--tinte);
  color: var(--limette);
  border-radius: var(--rund);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.mark {
  background-image: linear-gradient(var(--limette), var(--limette));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 44%;
  padding: 0 0.12em;
  margin: 0 -0.12em;
}
code, .mono { font-family: var(--sc-font-mono); font-size: 0.9em; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.72em 1.25em 0.78em;
  background: var(--limette);
  color: var(--tinte);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: var(--rund);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.knopf--karte { background: var(--karte); }
.knopf--tinte { background: var(--tinte); color: var(--karte); box-shadow: var(--schatten-limette); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinte); }
  .knopf--tinte:hover { box-shadow: 8px 8px 0 var(--limette); }
}
.knopf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinte); }

/* ---------- Kopfleiste (Startseite, Rechtliches) ---------- */
.kopfleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--sc-gutter) 0;
}
.wortmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  padding: 0.18em 0.42em 0.24em;
  background: var(--karte);
  border: var(--kontur);
  box-shadow: var(--schatten-klein);
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  transform: rotate(-2deg);
}
.wortmarke b {
  font-weight: 900;
  background: var(--limette);
  border: var(--kontur-fein);
  border-radius: 7px;
  padding: 0.04em 0.18em 0.08em;
}

/* ---------- Fuß ---------- */
.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0 var(--sc-gutter);
  padding: 1rem 1.25rem;
  background: var(--tinte);
  color: var(--karte);
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600;
  font-size: 0.9rem;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.fuss a { color: var(--karte); text-underline-offset: 0.25em; }
.fuss a:hover { color: var(--limette); }

/* ---------- Rechtliche Seiten ---------- */
.recht {
  max-width: 46rem;
  margin: 2.5rem auto 4rem;
  padding: 0 var(--sc-gutter);
}
.recht__blatt {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.recht__stempel {
  position: absolute;
  top: -1rem;
  right: 1.25rem;
  padding: 0.35em 0.8em;
  background: var(--tinte);
  color: var(--limette);
  border: 2px solid var(--limette);
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  transform: rotate(2deg);
}
.recht h1 {
  font-weight: 900;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
}
.recht h2 {
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 2.25rem 0 0.5rem;
}
.recht p, .recht li { max-width: 62ch; }
.recht p { margin: 0 0 0.75rem; }
.recht ul { padding-left: 1.2rem; margin: 0 0 0.75rem; }
.platz {
  background: var(--limette);
  border: 1.5px solid var(--tinte);
  border-radius: 5px;
  padding: 0 0.3em;
  font-weight: 700;
  font-family: var(--sc-font-mono);
  font-size: 0.86em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}
.recht__hinweis {
  margin: 0 0 1.5rem;
  padding: 0.8rem 1rem;
  background: var(--weiss);
  border: var(--kontur-fein);
  border-radius: var(--radius-klein);
  font-weight: 600;
}