/* Hauptseite – gemeinsamer Nenner der Projekte: Barlow, Papierton, Kompass-Orange. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(schrift/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(schrift/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(schrift/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(schrift/barlow-latin-600-normal.woff2) format("woff2"); }

:root {
  --tinte: #1B2430;
  --tinte-tief: #121922;
  --papier: #F4F1EA;
  --karte: #FFFFFF;
  --text: #1B2430;
  --leise: #5B6573;
  --linie: #DCD6C8;
  --orange: #E0661A;
  --orange-dunkel: #A9480C;
  --schmal: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --normal: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #15191F;
    --karte: #1E242C;
    --text: #E8E4DA;
    --leise: #A3A9B2;
    --linie: #2F3741;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--text); font: 18px/1.55 var(--normal); }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--schmal); font-weight: 700; line-height: 1.02; letter-spacing: -.005em; }
.breite { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Kopf ---------- */
.kopf { background: var(--tinte); color: #fff; padding: 28px 0 72px; position: relative; overflow: hidden; }
.kopf::after { /* Kompassrose als Wasserzeichen */
  content: ""; position: absolute; right: -140px; top: -60px; width: 560px; height: 560px; pointer-events: none; opacity: .07;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23fff'%3E%3Ccircle cx='50' cy='50' r='48' stroke-width='.6'/%3E%3Ccircle cx='50' cy='50' r='38' stroke-width='.4'/%3E%3Cpath d='M50 0v100M0 50h100M15 15l70 70M85 15 15 85' stroke-width='.3'/%3E%3Cpath d='M50 6 57 50 50 94 43 50Z M6 50 50 43 94 50 50 57Z' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
}
.kopf.klein { padding: 22px 0 20px; }
.kopf.klein::after { display: none; }
.oben { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.marke { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font: 700 30px/1 var(--schmal); letter-spacing: .01em; --papier: var(--tinte); }
.oben nav { display: flex; gap: 22px; }
.oben nav a { color: #C9D0DA; text-decoration: none; font-size: 16px; }
.oben nav a:hover { color: #fff; text-decoration: underline; }
.vorzeile { position: relative; margin: 64px 0 10px; color: var(--orange); font: 600 18px/1 var(--schmal); text-transform: uppercase; letter-spacing: .14em; }
.kopf h1 { position: relative; font-size: clamp(44px, 7.4vw, 88px); line-height: .94; margin: 0 0 22px; max-width: 15ch; }
.kopf .zusage { position: relative; font-size: clamp(18px, 2vw, 22px); color: #C9D0DA; max-width: 36em; margin: 0; }

/* ---------- Projekte ---------- */
.projekte { padding: 0 0 72px; }
.abschnittkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  padding: 52px 0 4px; }
.abschnittkopf h2 { font-size: clamp(36px, 5vw, 52px); margin: 0; }
.abschnittkopf p { margin: 0; color: var(--leise); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.filter button { font: 600 16px/1 var(--normal); color: var(--text); background: var(--karte); border: 1px solid var(--linie);
  padding: 9px 16px; border-radius: 99px; cursor: pointer; }
.filter button:hover { border-color: var(--text); }
.filter button[aria-pressed="true"] { background: var(--text); color: var(--papier); border-color: var(--text); }
.filter button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.projekt[hidden] { display: none; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 28px; margin-top: 24px; }

.projekt { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 12px 32px -18px rgba(27,36,48,.35); transition: transform .18s ease, box-shadow .18s ease; }
.projekt:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 20px 40px -18px rgba(27,36,48,.45); }
.schild { display: flex; align-items: center; gap: 18px; padding: 26px 28px; background: var(--farbe); color: #fff; text-decoration: none;
  position: relative; border-bottom: 6px solid color-mix(in srgb, var(--farbe) 70%, #000); }
.schild img, .schild .initial { width: 72px; height: 72px; flex: none; border-radius: 16px; }
.schild img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.schild .initial { display: grid; place-items: center; background: rgba(255,255,255,.16); font: 700 40px/1 var(--schmal); }
.schild h3 { font-size: clamp(32px, 3.6vw, 42px); margin: 2px 0 0; }
.kategorie { display: block; font: 600 15px/1 var(--schmal); text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.koerper { padding: 22px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.koerper p { margin: 0 0 12px; }
.stempel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--leise); }
.status { display: inline-flex; align-items: center; gap: 7px; font: 600 15px/1 var(--schmal); text-transform: uppercase; letter-spacing: .08em;
  color: #1E7A3C; background: #E3F3E8; padding: 6px 10px 5px; border-radius: 99px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-test .status { color: #9A5300; background: #FCEBD7; }
.status-entwicklung .status { color: #2F5A92; background: #E2ECF8; }
.status-archiv .status { color: var(--leise); background: color-mix(in srgb, var(--leise) 14%, transparent); }
.status-archiv .schild { filter: grayscale(.7); }
@media (prefers-color-scheme: dark) {
  .status { color: #7FD69A; background: rgba(127,214,154,.12); }
  .status-test .status { color: #F3B26B; background: rgba(243,178,107,.12); }
  .status-entwicklung .status { color: #8FB7EA; background: rgba(143,183,234,.12); }
}
.kurz { font: 600 21px/1.3 var(--normal); }
.merkmale { list-style: none; padding: 0; margin: 4px 0 18px; }
.merkmale li { padding: 7px 0 7px 28px; border-top: 1px solid var(--linie); position: relative; font-size: 17px; }
.merkmale li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 11px; height: 11px;
  background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); transform: rotate(90deg); }
.aktionen { margin-top: auto !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 6px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--orange); color: #fff; text-decoration: none;
  font: 700 22px/1 var(--schmal); padding: 14px 22px 13px; border-radius: 10px; box-shadow: 0 4px 0 var(--orange-dunkel); }
.knopf:hover { background: #EE7428; }
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-dunkel); }
.knopf svg { transition: transform .15s; }
.knopf:hover svg { transform: translateX(3px); }
.nebenlink { font-weight: 600; font-size: 17px; }
.leer { padding: 28px; border: 2px dashed var(--linie); border-radius: 16px; color: var(--leise); }
code { font-size: .9em; background: color-mix(in srgb, var(--leise) 14%, transparent); padding: 1px 6px; border-radius: 5px; }

/* ---------- Arbeitsweise ---------- */
.arbeitsweise { border-top: 1px solid var(--linie); padding: 64px 0 72px; }
.arbeitsweise h2 { font-size: clamp(34px, 4.4vw, 48px); margin: 0 0 30px; }
.grundsaetze { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; counter-reset: g; }
.grundsaetze li { counter-increment: g; border-top: 3px solid var(--text); padding-top: 14px; }
.grundsaetze li::before { content: "0" counter(g); font: 700 18px/1 var(--schmal); color: var(--orange); letter-spacing: .08em; }
.grundsaetze h3 { font-size: 27px; margin: 10px 0 8px; }
.grundsaetze p { margin: 0; color: var(--leise); font-size: 17px; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--tinte); color: #fff; padding: 52px 0; }
.kontakt .breite { display: flex; justify-content: space-between; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.kontakt h2 { font-size: clamp(32px, 4vw, 44px); margin: 0 0 8px; }
.kontakt p { margin: 0; color: #C9D0DA; max-width: 34em; }
.knopf.hell { background: #fff; color: var(--tinte); box-shadow: 0 4px 0 #9AA5B3; font-size: 21px; overflow-wrap: anywhere; }
.knopf.hell:hover { background: #F2EEE6; }

/* ---------- Prüfansicht ---------- */
.pruefen { padding: 40px 0; }
.pruefen table { border-collapse: collapse; width: 100%; background: var(--karte); font-size: 16px; }
.pruefen th, .pruefen td { text-align: left; padding: 8px 12px; border: 1px solid var(--linie); }
.pruefen .fehler td { color: #B3261E; }

/* ---------- Fuß und Unterseiten ---------- */
.fuss { background: var(--tinte-tief); color: #A3ACB8; font-size: 15px; padding: 22px 0; }
.fuss .breite { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.fuss a { color: #DCE2EA; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.text { max-width: 780px; padding-top: 36px; padding-bottom: 56px; }
.text h1 { font-size: clamp(38px, 6vw, 56px); margin: 0 0 20px; }
.text h2 { font-size: 26px; margin: 30px 0 6px; }
.text a { color: var(--orange-dunkel); }
@media (prefers-color-scheme: dark) { .text a { color: #F59A4A; } }
.text .klein { font-size: 15px; color: var(--leise); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .breite { padding: 0 16px; }
  .oben nav { gap: 16px; }
  .vorzeile { margin-top: 44px; }
  .kopf { padding-bottom: 52px; }
  .abschnittkopf { padding-top: 36px; }
  .schild { padding: 20px; gap: 14px; }
  .schild img, .schild .initial { width: 56px; height: 56px; border-radius: 12px; }
  .koerper { padding: 18px 20px 22px; }
  .kurz { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }