/* ═══════════════════════════════════════════════════════════════════════
   lofter.works — Markensystem
   Stand 29.08.2026

   AUFBAU IN ZWEI EBENEN. Die Trennung ist der ganze Zweck dieser Datei:

     Ebene 1  --p-*     Rohe Farbwerte. NIE direkt in einer Regel benutzen.
     Ebene 2  Rollen    Was tatsächlich verwendet wird. Der Name sagt, wofür.

   Wer eine Farbe braucht, nimmt eine Rolle. Gibt es für den Zweck keine
   Rolle, ist der Zweck vermutlich falsch — nicht die Palette.

   WARUM DIE STRENGE: Zwei der vier Markenfarben können keine Schrift
   tragen. Koralle erreicht auf hellem Grund 2,45:1, Altrosa 3,39:1 — nötig
   sind 4,5:1. Es gibt deshalb absichtlich keine Rolle, die Koralle zu Text
   macht. Die Regel lautet:

        BLAU TRÄGT.  KORALLE ZEIGT.

   UND EINE ZWEITE REGEL, DIE LEICHT ÜBERSEHEN WIRD: keine opacity auf
   Text. Sie mischt die Schriftfarbe in den Untergrund und senkt den
   Kontrast, ohne dass ein Prüfwerkzeug es meldet — getComputedStyle gibt
   die deklarierte Farbe zurück, nicht die gemischte. Tinte auf Grund
   fällt mit opacity .62 von 14,06:1 auf 4,26:1 und damit durch. Wer
   gedämpften Text will, nimmt --text-leise.

   ═══════════════════════════════════════════════════════════════════════ */


/* ── Schriften ─────────────────────────────────────────────────────────
   Selbst gehostet, nicht von fonts.googleapis.com. Das Einbinden über
   Google überträgt die IP jedes Besuchers in die USA, bevor irgendeine
   Einwilligung vorliegt — dafür hat das LG München 2022 Schadenersatz
   zugesprochen. Beide Familien stehen unter der SIL Open Font License,
   Nachweis in fonts/OFL.txt.

   Archivo ist ein Variable Font: eine Datei deckt 100–900 ab.
   DM Mono ist es nicht, deshalb zwei Schnitte einzeln.
   ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ═══ EBENE 1 — PALETTE ═════════════════════════════════════════════════
   Rohwerte. In keiner Regel unterhalb dieses Blocks direkt verwenden.

   Die vier Markenfarben bilden einen Übergang von kühl nach warm. Das ist
   keine Dekoration, sondern die Aussage: Blau ist meine Seite, Koralle die
   des Kunden. Erst gemeinsam, dann allein.

   Farbe          Wert      auf --p-grund   Weiß darauf   Tauglich für
   ─────────────────────────────────────────────────────────────────────
   Blau           #355c7d      6,68:1         7,05:1      Text, Flächen
   Violett        #725a7a      5,75:1         6,07:1      Text, Flächen
   Altrosa        #c56c86      3,39:1         3,58:1      nur Flächen
   Koralle        #ff7582      2,45:1         2,59:1      nur Flächen
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* Die vier Originalfarben — unverändert */
  --p-blau:        #355c7d;
  --p-violett:     #725a7a;
  --p-altrosa:     #c56c86;
  --p-koralle:     #ff7582;

  /* Ergänzt, weil eine Rampe aus vier Akzenten kein System ergibt.
     Alle aus den Originalen abgeleitet, nicht dazuerfunden. */
  --p-tinte:       #17293a;  /* Blau abgedunkelt — 14,1:1 */
  --p-nebel:       #4a5d73;  /* Blau entsättigt   —  6,4:1 */
  --p-blau-tief:   #2b4b66;  /* Blau für Knöpfe   —  9,1:1 mit Weiß */
  --p-koralle-tx:  #c23e53;  /* Koralle abgedunkelt —  4,8:1 */
  --p-grund:       #fbf8f8;  /* warmes Weiß mit einem Hauch Rosé */
  --p-weiss:       #ffffff;
  --p-warmweiss:   #fff7f7;  /* Fläche für den Zielzustand */
  --p-linie:       #ece5e7;
  --p-linie-stark: #d9cfd2;
}


/* ═══ EBENE 2 — ROLLEN ══════════════════════════════════════════════════
   Nur diese Namen gehören in Regeln. Jede Rolle sagt, wofür sie da ist.

   ES GIBT BEWUSST KEINE ROLLE, DIE KORALLE ODER ALTROSA ZU TEXT MACHT.
   Wer koralleroten Text braucht, nimmt --text-signal (#c23e53). Wer eine
   koralle Fläche mit Schrift braucht, braucht sie nicht — dafür ist die
   Farbe zu hell.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Untergründe ─────────────────────────────────────────── */
  --grund:            var(--p-grund);      /* Seitenhintergrund */
  --flaeche:          var(--p-weiss);      /* Karten, Kästen */
  --flaeche-ziel:     var(--p-warmweiss);  /* nur der Zielzustand „Enablement“
                                              und das Versprechen darunter */

  /* ── Schrift ─────────────────────────────────────────────── */
  --text:             var(--p-tinte);      /* 14,1:1 — alles Normale */
  --text-leise:       var(--p-nebel);      /*  6,4:1 — Nebentext, Hilfen */
  --text-struktur:    var(--p-blau);       /*  6,7:1 — Etiketten, Nummern */
  --text-zweitrang:   var(--p-violett);    /*  5,8:1 — zweite Ebene */
  --text-signal:      var(--p-koralle-tx); /*  4,8:1 — die EINZIGE Koralle,
                                                  die Schrift sein darf */

  /* ── Linien ──────────────────────────────────────────────── */
  --linie:            var(--p-linie);
  --linie-stark:      var(--p-linie-stark);
  --linie-akzent:     var(--p-blau);

  /* ── Bedienelemente ──────────────────────────────────────── */
  --knopf-grund:      var(--p-blau-tief);  /* Weiß darauf: 9,1:1 */
  --knopf-text:       var(--p-weiss);
  --knopf-grund-hover: var(--p-blau);      /* Weiß darauf: 7,1:1 */
  --fokus:            var(--p-koralle-tx); /* Fokusring — kräftig, aber nicht Blau,
                                              damit er sich von Bedienfarben abhebt */

  /* ── Schmuck: Flächen, Bänder, Punkte. NIEMALS Text. ─────── */
  --flaeche-1:        var(--p-blau);
  --flaeche-2:        var(--p-violett);
  --flaeche-3:        var(--p-altrosa);
  --flaeche-4:        var(--p-koralle);
  --punkt-uebergabe:  var(--p-koralle);    /* der Punkt in lofter.works */

  /* ── Maße ────────────────────────────────────────────────── */
  --zeile:            64ch;      /* Lesebreite für Fließtext */
  --bahn:             1140px;    /* Satzspiegel */
  --radius:           3px;
  --luft:             clamp(2.6rem, 6vw, 4.5rem);
}


/* ═══ GRUNDLAGEN ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x gehört an html, nicht an body. Am body wird dieser zum
   eigenen Scroll-Container; scrollgesteuerte Animationen binden sich dann
   an ein Element, das sich nie bewegt, und bleiben stehen. Das ist hier
   schon einmal passiert. */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Sichtbarer Fokus überall. Ohne den ist die Seite mit Tastatur unbedienbar. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ═══ TYPOGRAFIE ═══════════════════════════════════════════════════════
   Eine Familie für alles. Der Unterschied kommt aus Größe und Gewicht,
   nicht aus einem zweiten Schriftcharakter — das hält den Auftritt ruhig
   und spart eine Schriftdatei.
   ═══════════════════════════════════════════════════════════════════ */

.t-riesig, .t-gross, .t-mittel, h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

.t-riesig, h1 { font-size: clamp(2.2rem, 6.5vw, 4rem); }
.t-gross,  h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.t-mittel, h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -0.02em; }

h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

p { max-width: var(--zeile); }
p + p { margin-top: 1.1rem; }

.t-lead { font-size: 1.08rem; color: var(--text-leise); }
.t-leise { color: var(--text-leise); }

/* Etikett: kleine Versalien in Mono. Für Nummern, Rollen, Zustände. */
.t-etikett {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-struktur);
}

.t-mono { font-family: 'DM Mono', ui-monospace, Menlo, monospace;
          font-variant-numeric: tabular-nums; }

a { color: var(--text-struktur); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-signal); }


/* ═══ BAUSTEIN — WORTMARKE ═════════════════════════════════════════════
   Durchgehend klein. Der Punkt ist der Übergabepunkt: Er steht in der
   Farbe des Zustands, in dem lofter nicht mehr gebraucht wird. Deshalb
   trägt er nie Schrift und muss nie lesbar sein — er ist ein Zeichen,
   kein Wort.
   ═══════════════════════════════════════════════════════════════════ */

.marke {
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--text);
  font-size: 1.4rem;
  text-decoration: none;
}
.marke__punkt { color: var(--punkt-uebergabe); }
.marke:hover { color: var(--text); }

.marke--gross { font-size: clamp(1.9rem, 5.5vw, 3.2rem); }


/* ═══ BAUSTEIN — KNOPF ═════════════════════════════════════════════════ */

.knopf {
  display: inline-block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.78rem 1.45rem;
  border: none;
  border-radius: var(--radius);
  background: var(--knopf-grund);
  color: var(--knopf-text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}
.knopf:hover { background: var(--knopf-grund-hover); color: var(--knopf-text); }

.knopf--leise {
  background: transparent;
  color: var(--text-struktur);
  border: 1px solid var(--linie-stark);
}
.knopf--leise:hover { background: transparent; border-color: var(--text-struktur); color: var(--text-struktur); }


/* ═══ BAUSTEIN — DER BOGEN ═════════════════════════════════════════════
   Die vier Stufen des Ablaufs. Hier — und nur hier — tragen alle vier
   Markenfarben gleichzeitig, weil sie eine Reihenfolge zeigen. Die Farbe
   sitzt im Band über der Stufe, nie in der Schrift.

   Stufe 4 ist kein Arbeitsschritt, sondern der Zielzustand. Sie bekommt
   deshalb eine eigene Fläche statt Weiß.
   ═══════════════════════════════════════════════════════════════════ */

.bogen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.stufe { background: var(--flaeche); }
.stufe__band { height: 6px; }
.stufe__innen { padding: 1.15rem 1.05rem 1.25rem; }
.stufe__rolle { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em; }
.stufe h4 { margin: 0.4rem 0 0.3rem; }
.stufe p { font-size: 0.9rem; color: var(--text-leise); max-width: none; }

.stufe--1 .stufe__band { background: var(--flaeche-1); }
.stufe--2 .stufe__band { background: var(--flaeche-2); }
.stufe--3 .stufe__band { background: var(--flaeche-3); }
.stufe--4 .stufe__band { background: var(--flaeche-4); }

/* Die Beschriftung folgt der Regel: Blau und Violett dürfen Schrift sein,
   Altrosa und Koralle nicht — dort steht die abgedunkelte Variante. */
.stufe--1 .stufe__rolle { color: var(--text-struktur); }
.stufe--2 .stufe__rolle { color: var(--text-zweitrang); }
.stufe--3 .stufe__rolle { color: var(--text-signal); }
.stufe--4 .stufe__rolle { color: var(--text-signal); }

.stufe--4 { background: var(--flaeche-ziel); }


/* ═══ BAUSTEIN — KARTE UND RASTER ══════════════════════════════════════ */

.bahn { max-width: var(--bahn); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.4rem); }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.karte { background: var(--flaeche); padding: 1.4rem 1.3rem; }
.karte h4 { margin-bottom: 0.4rem; }
.karte p { font-size: 0.94rem; color: var(--text-leise); max-width: none; }


/* ═══ BAUSTEIN — MERKKASTEN ════════════════════════════════════════════ */

.merk {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie-akzent);
  padding: 1.25rem 1.35rem;
}
.merk p { max-width: none; }


/* ═══ ABSCHNITTE ═══════════════════════════════════════════════════════ */

.abschnitt { padding-block: var(--luft) 0; }
.abschnitt__kopf { border-bottom: 1px solid var(--linie-stark); padding-bottom: 0.75rem; margin-bottom: 1.6rem; }
.abschnitt__kopf .t-etikett { display: block; margin-bottom: 0.45rem; }