/* =============================================================================
   Portfolio Jennifer Knecht — Gestaltung (vereinfachte Fassung)
   -----------------------------------------------------------------------------
   Diese Datei bestimmt, wie die Website AUSSIEHT (Farben, Schriften, Abstände,
   Layout). Was die Website TUT (Formular prüfen, Filter, Klick-Reaktionen)
   steht in js/main.js.

   Zwei einfache Regeln, die überall gelten:
     1. FARBEN: Jeder helle Hintergrund (rosa-hell, rosa, creme) bekommt Text
        in Aubergine (dunkles Violett). Der dunkle Hintergrund (Aubergine)
        bekommt Text in Creme. So ist der Kontrast immer gut lesbar.
     2. SCHRIFTEN: Die Schreibschrift (Pinyon Script) ist nur für die
        Wortmarke "Jennifer Knecht" und für einzelne, hervorgehobene Wörter in
        Überschriften. Alles andere ist Roboto.

   Aufbau dieser Datei (mit Strg/Cmd+F nach der Zahl suchen):
     1. Grundfarben und Grössen (Variablen)
     2. Reset (Browser-Standardabstände entfernen)
     3. Schrift-Klassen
     4. Farbige Abschnitte (.block)
     5. Wellenkanten zwischen den Abschnitten
     6. Kopfzeile und Navigation
     7. Buttons
     8. Hero-Bereich (grosser Aufmacher oben)
     9. Blütenmaske (die Blüten-Form ums Portrait)
    10. Karten (Projekt-Kacheln)
    11. Kleine Zeichen/Icons
    12. Formular
    13. Fussbereich
    14. Fallstudien-Seiten (Zurück-Link, Eckdaten, Schritte, Tabelle, ...)
    15. Spezialteile nur für die Seite "Eigene Marke"
    16. Rücksicht auf Nutzer:innen (weniger Bewegung, Druckansicht)
   ========================================================================== */

/* ------------------------------------------------ 1. Grundfarben & Grössen */

:root {
  /* Die drei Marken-Farben. Wenn du eine Farbe änderst, ändert sich die
     ganze Website — weil alles andere unten aus diesen drei Werten gebaut ist. */
  --mauve: #d6abd0;
  --aubergine: #50224b;
  --creme: #fef2b9;

  /* Zwei helle Zwischentöne, gemischt aus Mauve. Wo sie herkommen, ist nicht
     wichtig — wichtig ist nur: sie sind hell, und Aubergine-Text liest sich
     gut darauf. */
  --rosa-hell: #faf5f9;
  --rosa: #e3c5de;
  --weiss: #fffdfb;

  /* "Rollen" statt fixer Farben: Jeder farbige Abschnitt (siehe Kapitel 4)
     setzt diese vier Variablen neu. Der Rest der Website benutzt nur noch
     --grund, --tinte usw. — nie --mauve direkt. Deshalb kann sich ein ganzer
     Abschnitt einfärben, ohne dass irgendwo sonst etwas geändert werden muss. */
  --grund: var(--rosa-hell);
  --tinte: var(--aubergine);
  --tinte-leise: #805d7c;
  --akzent: var(--aubergine);
  --linie: #d8cbd6;
  --linie-stark: #9b7f98;

  --schrift-display: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --schrift-script: "Pinyon Script", "Snell Roundhand", "Roboto", serif;
  --schrift-text: "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrössen. Auf dem Handy gelten diese Werte; ab einem breiteren
     Bildschirm werden die grossen Überschriften in Kapitel 15 noch etwas
     grösser gemacht. */
  --fs-mikro: 0.6875rem;
  --fs-klein: 0.875rem;
  --fs-text: 1rem;
  --fs-gross: 1.2rem;
  --fs-karte: 1.35rem;
  --fs-titel: 2rem;
  --fs-riese: 2.75rem;

  /* Genau drei Rundungen: für Bilder, für Karten, für Pillen-Buttons.
     Ein Radius für alles sieht schnell nach Baukasten aus — deshalb drei. */
  --radius-bild: 1rem;
  --radius-karte: 1.5rem;
  --radius-pille: 62.5rem;

  /* Abstands-Skala: z1 = klein, z4 = sehr gross. Wird an vielen Stellen im
     HTML direkt benutzt, z. B. style="margin-top:var(--z1)". */
  --rand: 1.25rem;
  --breite: 78rem;
  --z1: 1.25rem;
  --z2: 2rem;
  --z3: 3rem;
  --z4: 4.5rem;

  --takt: 160ms;
  --takt-lang: 420ms;
  --kurve: ease;
  --kopf: 3.5rem;
  --welle-hoehe: 3rem;

  color-scheme: only light;
}

/* Ab einem grösseren Bildschirm: mehr Rand links/rechts und grössere
   Überschriften. Das ersetzt die früheren clamp()-Formeln mit fixen,
   leichter nachvollziehbaren Werten an zwei Bildschirmgrössen. */
@media (min-width: 48rem) {
  :root {
    --rand: 2.5rem;
    --fs-gross: 1.375rem;
    --fs-karte: 1.75rem;
    --fs-titel: 3.25rem;
    --fs-riese: 4.25rem;
  }
}
/* Die grösste Stufe erst ab 75rem (1200px). Vorher stand hier 5.5rem ab
   48rem - aber die Hero-Spalte (1.25 von 2 Teilen ab 56rem) ist erst ab
   rund 1200px breit genug für «GESTALTUNG,» in 88px; darunter brach
   overflow-wrap das Wort zu «GESTALTUN-G». Gesehen am 17.09.2026 bei 960px. */
@media (min-width: 75rem) {
  :root { --fs-riese: 5.5rem; }
}
@media (min-width: 30rem) and (max-width: 47.99rem) {
  :root { --fs-riese: 4rem; --fs-titel: 2.5rem; }
}

/* ------------------------------------------------------------- 2. Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + var(--z2));
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: var(--fs-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
video { display: block; max-width: 100%; height: auto; border-radius: var(--radius-bild); background: #000; }
button, input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
.block--dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--creme); }

::selection { background: var(--aubergine); color: var(--creme); }

/* Nur für Screenreader sichtbar (Text bleibt im Code, ist aber unsichtbar). */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Der "Zum Inhalt springen"-Link. Unsichtbar, bis man ihn per Tastatur
   (Tab-Taste) anspringt — dann poppt er oben links auf. */
.sprung {
  position: fixed;
  top: -100%;
  left: var(--rand);
  z-index: 100;
  background: var(--aubergine);
  color: var(--creme);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pille);
  text-decoration: none;
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sprung:focus { top: 0.75rem; }

/* -------------------------------------------------------- 3. Schriften */

/* Die fette Versal-Überschrift — die "Stimme" der Seite. */
.display {
  font-family: var(--schrift-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  hyphens: manual;
  overflow-wrap: break-word;
}
.display--riese { font-size: var(--fs-riese); }
.display--titel { font-size: var(--fs-titel); }
.display--karte { font-size: var(--fs-karte); line-height: 1.1; }

/* Ein einzelnes Wort in Schreibschrift, mitten in einer Überschrift. */
.schwung {
  font-family: var(--schrift-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.2em;
  line-height: 0.8;
}

/* Die Wortmarke "Jennifer Knecht" oben in der Kopfzeile. */
.wortmarke {
  font-family: var(--schrift-script);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
}

.mikro {
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.mikro--leise { color: var(--tinte-leise); font-weight: 400; }

.lauf { max-width: 62ch; }
.lauf--gross { font-size: var(--fs-gross); line-height: 1.5; max-width: 46ch; }
.lauf + .lauf { margin-top: var(--z1); }
.lauf strong, .lauf b { font-weight: 700; }

.legende { font-size: var(--fs-klein); line-height: 1.55; color: var(--tinte-leise); max-width: 46ch; }

/* Unterstrichener Link-Text. Beim Hover wird der Strich dicker. */
.verweis {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--takt) linear;
}
.verweis:hover, .verweis:focus-visible { text-decoration-thickness: 3px; }

/* ------------------------------------------------------ 4. Farbige Abschnitte */

/* Ein .block ist ein Abschnitt mit eigenem Hintergrund. .block__innen sorgt
   für den Innenabstand und die maximale Breite. */
.block {
  position: relative;
  background: var(--grund);
  color: var(--tinte);
  padding-block: var(--z4);
}
.block__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Vier Farbthemen. Jedes setzt dieselben Variablen neu — deshalb reicht es,
   im HTML nur die Klasse zu wechseln (z. B. block--dunkel), und Text,
   Linien und Buttons darin passen sich automatisch an. */
.block--hell {
  --grund: var(--rosa-hell); --tinte: var(--aubergine);
  --tinte-leise: #805d7c; --linie-stark: #9b7f98; --linie: #d8cbd6;
  --akzent: var(--aubergine);
}
.block--rosa {
  --grund: var(--rosa); --tinte: var(--aubergine);
  --tinte-leise: #70466b; --linie-stark: #8b6386; --linie: #c09ebb;
  --akzent: var(--aubergine);
}
.block--creme {
  --grund: var(--creme); --tinte: var(--aubergine);
  --tinte-leise: #7d5868; --linie-stark: #9d7e7b; --linie: #d8c4a1;
  --akzent: var(--aubergine);
}
.block--dunkel {
  --grund: var(--aubergine); --tinte: var(--creme);
  --tinte-leise: #c6af96; --linie-stark: #997979; --linie: #9a6d94;
  --akzent: var(--mauve);
}

/* ------------------------------------------------ 5. Wellenkanten */

/* Die geschwungene Kante zwischen zwei farbigen Abschnitten. So gebaut:
     - Ein .welle-Container liegt am unteren (oder oberen) Rand eines
       .block und ragt ein kleines Stück in den nächsten Abschnitt hinein.
     - Darin liegt ein <svg>, das eine fertige Wellen-Form aus den
       <symbol>-Definitionen im HTML lädt (per <use href="#welle-...">).
     - Die Farbe der Welle kommt von "color: ..." (inline im HTML gesetzt)
       und wird über "fill: currentColor" ans SVG weitergegeben — so kann
       dieselbe Wellen-Form in jeder Situation eine andere Farbe annehmen:
       Sie bekommt die Hintergrundfarbe des NÄCHSTEN Abschnitts, damit es
       aussieht, als würde die Farbe darüber hinweg schwappen. */
.welle {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.welle svg {
  display: block;
  width: 100%;
  height: var(--welle-hoehe);
  fill: currentColor;
}
.welle--unten { bottom: -1px; }
.welle--oben { top: -1px; transform: scaleY(-1); }

/* -------------------------------------------------------------- 6. Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rosa-hell);
  border-bottom: 2px solid transparent;
  transition: border-color var(--takt) linear;
}
/* main.js setzt dieses data-Attribut auf "ja", sobald man ein Stück
   runtergescrollt hat — dadurch bekommt die Kopfzeile eine Trennlinie. */
.kopf[data-gescrollt="ja"] { border-bottom-color: var(--linie); }
.kopf__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding: 0.5rem var(--rand);
  min-height: var(--kopf);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z1);
}
.marke { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--aubergine); }
.marke svg, .marke img { width: 1.75rem; }

.nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav__eintrag {
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aubergine);
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 3px solid transparent;
  transition: border-color var(--takt) linear;
  white-space: nowrap;
}
.nav__eintrag:hover { border-bottom-color: var(--mauve); }
.nav__eintrag[aria-current="page"] { border-bottom-color: var(--aubergine); }

@media (max-width: 26rem) { .marke span { display: none; } }

/* --------------------------------------------------------------- 7. Buttons */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border: 2px solid var(--aubergine);
  border-radius: var(--radius-pille);
  background: var(--aubergine);
  color: var(--creme);
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--takt) linear, color var(--takt) linear;
}
.knopf:hover, .knopf:focus-visible { background: transparent; color: var(--aubergine); }
/* Die "offene" Variante ist von Anfang an durchsichtig (Umriss-Button). */
.knopf--offen { background: transparent; color: var(--aubergine); }
.knopf--offen:hover, .knopf--offen:focus-visible { background: var(--aubergine); color: var(--creme); }

.block--dunkel .knopf, .fuss .knopf {
  border-color: var(--creme); background: var(--creme); color: var(--aubergine);
}
.block--dunkel .knopf:hover, .block--dunkel .knopf:focus-visible,
.fuss .knopf:hover, .fuss .knopf:focus-visible { background: transparent; color: var(--creme); }

.knopf[disabled] { opacity: 0.55; cursor: progress; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--z1); margin-top: var(--z2); }

@media (max-width: 62rem) { .kopf .knopf--kopf { display: none; } }

/* ------------------------------------------------------------ 8. Hero */

.hero { padding-block: var(--z3) var(--z4); }
.hero__raster { display: grid; gap: var(--z2); align-items: center; }
@media (min-width: 56rem) {
  .hero__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--z3); }
}
.hero__titel { margin-block: var(--z1); }
.hero__zeile { max-width: 40ch; font-size: var(--fs-gross); }
.hero__bild { position: relative; justify-self: center; width: min(100%, 26rem); }

/* ------------------------------------------------------ 9. Blütenmaske */

/* Die Blüten-Form ums Portrait — dein wichtigstes Design-Element, deshalb
   wieder da. So funktioniert sie:

   Ein "clip-path" schneidet ein Element in eine Form zu, so wie eine
   Ausstech-Form beim Plätzchenbacken. Die Form selbst (acht Kreise im
   Kreis angeordnet, plus ein Kreis in der Mitte) ist unten im HTML als
   <clipPath id="bluete-8"> definiert — das ist reine Geometrie, keine Logik.
   Hier in der CSS-Datei wird diese Form nur noch AUFGERUFEN, mit
   "clip-path: url(#bluete-8)".

   Es sind zwei Blüten übereinander:
     1. .bluete::before — eine Fläche in Mauve, liegt ganz hinten (z-index:1)
        und füllt das ganze quadratische Feld.
     2. .bluete__bild — das Foto selbst, liegt vorne (z-index:2), ist etwas
        kleiner (inset: 8%) und leicht versetzt zur Blüte dahinter (die
        zweite Form "bluete-8b" ist die gleiche Blüte, nur um einen halben
        Blütenblatt-Abstand gedreht) — dadurch schaut die hintere Blüte an
        den Rändern hervor.

   aspect-ratio: 1 sorgt dafür, dass das Feld immer quadratisch bleibt,
   egal wie breit der Bildschirm ist — die Form setzt ein Quadrat voraus. */
.bluete { position: relative; aspect-ratio: 1; isolation: isolate; }
.bluete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--mauve);
  clip-path: url(#bluete-8b);
}
.bluete__bild {
  position: absolute;
  inset: 8%;
  z-index: 2;
  width: 84%;
  height: 84%;
  object-fit: cover;
  object-position: center 20%;
  clip-path: url(#bluete-8);
}
/* Falls ein Browser clip-path mit url() nicht kann: dann lieber ein
   normaler Kreis als ein eckiges, unbearbeitetes Foto. */
@supports not (clip-path: url(#bluete-8)) {
  .bluete__bild { clip-path: none; border-radius: 50%; }
  .bluete::before { display: none; }
}

/* ----------------------------------------------------------- 10. Karten */

.raster { display: grid; gap: var(--z2); }
@media (min-width: 40rem) { .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.raster > [hidden] { display: none; }

.karte { display: flex; flex-direction: column; }
.karte__link { color: inherit; text-decoration: none; display: block; }
.karte__bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-bild);
  aspect-ratio: 4 / 3;
  background: #f1e4ef; /* helle Platzhalterfarbe, solange das Bild lädt */
}
.karte__bild > img { width: 100%; height: 100%; object-fit: cover; }

/* Die dunkle Fläche, die beim Hover von unten über das Bild schiebt. */
.karte__tinte {
  position: absolute;
  inset: 0;
  background: rgba(80, 34, 75, 0.92);
  color: var(--creme);
  display: grid;
  align-content: end;
  padding: var(--z1);
  transform: translateY(101%);
  transition: transform var(--takt-lang) var(--kurve);
}
.karte__link:hover .karte__tinte,
.karte__link:focus-visible .karte__tinte { transform: translateY(0); }
.karte__tinte span { font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.karte__art { margin-top: var(--z1); font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-leise); }
.karte__titel { margin-top: 0.4rem; }
.karte__satz { margin-top: 0.6rem; font-size: var(--fs-klein); line-height: 1.55; color: var(--tinte-leise); }
.karte__link:hover .karte__titel,
.karte__link:focus-visible .karte__titel { text-decoration: underline; text-decoration-thickness: 3px; }

.zitat {
  background: rgba(254, 242, 185, 0.12);
  border: 2px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--z2);
}
.zitat p { font-size: var(--fs-gross); line-height: 1.45; }
.zitat footer { margin-top: var(--z1); font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); }

/* --------------------------------------------------------- 11. Zeichen */

.mal { fill: currentColor; display: inline-block; vertical-align: middle; color: var(--mauve); flex: none; }
.mal--s { width: 1rem; }
.mal--m { width: 1.75rem; }
.mal--l { width: 3rem; }

.ring { display: inline-block; border: 2px solid currentColor; border-radius: 50%; }
.ring--s { width: 0.5rem; height: 0.5rem; }
.ring--m { width: 0.875rem; height: 0.875rem; }
.ring--l { width: 1.375rem; height: 1.375rem; }

.kopfzeile { margin-bottom: var(--z2); }
.kopfzeile__auge { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--z1); color: var(--tinte-leise); }

/* ------------------------------------------------------- 12. Formular */

.feld { display: grid; gap: 0.4rem; margin-bottom: var(--z1); }
.feld > label { font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.feld input, .feld textarea {
  background: rgba(254, 242, 185, 0.1);
  border: 2px solid var(--linie-stark);
  border-radius: var(--radius-pille);
  color: inherit;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-text);
  width: 100%;
  transition: border-color var(--takt) linear;
}
.feld textarea { border-radius: var(--radius-karte); resize: vertical; min-height: 8rem; line-height: 1.6; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--tinte-leise); }
.feld input:hover, .feld textarea:hover { border-color: var(--akzent); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); }
.feld__hinweis, .feld__fehler { font-size: var(--fs-klein); text-transform: none; letter-spacing: 0; font-weight: 400; }
.feld__hinweis { color: var(--tinte-leise); }
.feld__fehler { color: #ffc9c9; min-height: 1.4em; }
.block--hell .feld__fehler, .block--rosa .feld__fehler, .block--creme .feld__fehler { color: #a4123c; }
/* main.js setzt data-fehler="ja" auf das Feld, wenn die Prüfung fehlschlägt. */
.feld[data-fehler="ja"] input, .feld[data-fehler="ja"] textarea { border-color: currentColor; }
.antwort { margin-top: var(--z1); font-size: var(--fs-klein); min-height: 1.5em; line-height: 1.55; }

/* Ohne Formular ist die Kontakt-Info nur noch eine einzelne, linksbuendige
   Spalte - etwas schmaler als der ganze Block, damit die Zeilen (E-Mail,
   Telefon, ...) nicht unnoetig in die Breite gezogen werden. */
.kontakt__info { max-width: 34rem; }

.direkt { border-top: 2px solid var(--linie); }
.direkt > * {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem var(--z1);
  align-items: baseline; justify-content: space-between;
  padding-block: var(--z1);
  border-bottom: 2px solid var(--linie);
  color: inherit; text-decoration: none;
  font-size: var(--fs-text);
}
.direkt__label { font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); }

/* ----------------------------------------------------------- 13. Fuss */

.fuss {
  background: var(--aubergine); color: var(--creme); padding-top: var(--z3); overflow: hidden;
  --tinte-leise: rgba(254, 242, 185, 0.72);
  --linie: rgba(214, 171, 208, 0.34);
}
.fuss__innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); padding-bottom: var(--z2); }
.fuss__raster { display: grid; gap: var(--z2); }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; } }
.fuss a { color: inherit; }
.fuss__liste { display: grid; gap: 0.6rem; }

/* Die grosse Wortmarke ganz unten — reines Dekor, deshalb für
   Screenreader versteckt (der Name steht daneben schon im Text). */
.fuss__marke {
  margin-top: var(--z3);
  font-family: var(--schrift-script);
  font-size: clamp(3rem, 14vw, 10rem);
  line-height: 0.9;
  color: var(--mauve);
  text-align: center;
}

/* -------------------------------------------------- 14. Fallstudien */

.zurueck {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: inherit; text-decoration: none;
}
.zurueck::before { content: "\2190"; }
.zurueck:hover, .zurueck:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; }

.eckdaten { display: grid; gap: var(--z1); margin-top: var(--z2); }
@media (min-width: 48rem) { .eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--z2); } }
.eckdaten > div { border-top: 3px solid var(--linie); padding-top: 0.75rem; }
.eckdaten dt { font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-leise); }
.eckdaten dd { margin: 0.5rem 0 0; font-size: var(--fs-klein); line-height: 1.55; }

/* Nummerierte Schritte. counter-reset/counter-increment lassen den Browser
   selbst mitzählen (01, 02, 03 …), statt die Nummern von Hand einzutippen. */
.schritte { counter-reset: schritt; display: grid; gap: var(--z2); margin-top: var(--z1); }
@media (min-width: 48rem) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z3) var(--z2); } }
.schritte li { counter-increment: schritt; }
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 2px solid var(--linie-stark);
  border-radius: var(--radius-pille);
  font-size: var(--fs-mikro); font-weight: 900;
  margin-bottom: var(--z1);
}
.schritte p { margin-top: 0.6rem; font-size: var(--fs-klein); line-height: 1.6; color: var(--tinte-leise); }

.rueckblick {
  border: 2px solid var(--linie-stark);
  border-radius: var(--radius-karte);
  padding: var(--z2);
  margin-top: var(--z3);
  max-width: 60ch;
}
.rueckblick p { margin-top: 0.6rem; font-size: var(--fs-klein); line-height: 1.6; }

.blaettern {
  display: flex; flex-wrap: wrap;
  gap: var(--z1) var(--z2);
  justify-content: space-between;
  border-top: 3px solid var(--linie);
  padding-top: var(--z2);
  margin-top: var(--z3);
}
.blaettern a { color: inherit; text-decoration: none; max-width: 22rem; }
.blaettern a:last-child { margin-inline-start: auto; text-align: right; }
.blaettern b { display: block; margin-top: 0.3rem; font-size: var(--fs-text); font-weight: 900; }
.blaettern a:hover b, .blaettern a:focus-visible b { text-decoration: underline; text-decoration-thickness: 3px; }

.tabelle { font-size: var(--fs-klein); }
.tabelle caption { text-align: left; padding-bottom: var(--z1); }
.tabelle th { text-align: left; font-weight: 400; }
.tabelle thead th {
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinte-leise);
  padding-block: 0 0.75rem; border-bottom: 3px solid var(--linie-stark);
}
.tabelle td, .tabelle tbody th { padding-block: var(--z1); border-bottom: 2px solid var(--linie); vertical-align: baseline; }
.tabelle__jahr { white-space: nowrap; font-weight: 900; width: 9rem; }
.tabelle__station { font-weight: 900; font-size: var(--fs-text); width: 32%; }
.tabelle__station span { display: block; font-weight: 400; font-size: var(--fs-klein); color: var(--tinte-leise); margin-top: 0.2rem; }
.tabelle__bem { color: var(--tinte-leise); line-height: 1.6; }
@media (max-width: 44rem) {
  /* Auf schmalen Bildschirmen wird aus der Tabelle eine Liste: Kopfzeile
     bleibt für Screenreader da, ist aber unsichtbar. */
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  .tabelle tr { display: grid; gap: 0.25rem; padding-block: var(--z1); border-bottom: 2px solid var(--linie); }
  .tabelle td, .tabelle tbody th { border: 0; padding: 0; }
  .tabelle__jahr, .tabelle__station { width: auto; }
}

/* Fachgebiete und Werkzeuge als Listen, keine Prozentbalken — die kann
   niemand nachprüfen. */
.fach { display: grid; gap: var(--z2); }
@media (min-width: 52rem) { .fach { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fach__gruppe { border-top: 3px solid var(--linie-stark); padding-top: var(--z1); }
.fach__satz { margin-top: 0.6rem; font-size: var(--fs-klein); line-height: 1.6; color: var(--tinte-leise); }
.fach__liste { margin-top: var(--z1); display: grid; gap: 0.85rem; }
.fach__liste li { font-size: var(--fs-klein); line-height: 1.55; }
.fach__liste b { display: block; font-weight: 900; font-size: var(--fs-text); }
.fach__liste span { color: var(--tinte-leise); }

/* Eigene Kachel-Symbole für Programme (Adobe/Figma/Canva-Logos sind
   geschützte Marken, deshalb eigene Buchstaben-Kacheln in der Marke). */
.wz {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: var(--radius-bild);
  background: var(--akzent);
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: 0.9375rem;
  color: var(--creme);
}
.wz--code { font-size: 0.75rem; letter-spacing: -0.03em; }
.block--dunkel .wz, .fuss .wz { background: var(--creme); color: var(--aubergine); }

.toolbox { border-top: 3px solid var(--linie-stark); margin-top: var(--z1); }
.toolbox > div {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem var(--z1); align-items: center;
  padding-block: var(--z1); border-bottom: 2px solid var(--linie);
}
.toolbox dt { display: flex; align-items: center; gap: 0.75rem; font-weight: 900; font-size: var(--fs-text); }
.toolbox dd { margin: 0; font-size: var(--fs-klein); line-height: 1.55; color: var(--tinte-leise); }
@media (max-width: 44rem) {
  .toolbox > div { grid-template-columns: minmax(0, 1fr); }
}

/* Die Filterleiste im Werkverzeichnis ist ohne JavaScript unsichtbar
   (dann steht einfach alles da — kein kaputter Zustand). Sobald js-an.js
   die Klasse "js" an <html> hängt, wird sie sichtbar. */
.filter { display: none; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--z2); }
.js .filter { display: flex; }
.filter__knopf {
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--linie-stark);
  border-radius: var(--radius-pille);
  background: transparent; color: inherit;
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer;
  transition: background-color var(--takt) linear, color var(--takt) linear, border-color var(--takt) linear;
}
.filter__knopf:hover { border-color: var(--akzent); }
/* main.js setzt aria-pressed="true" auf den aktiven Filter-Button. */
.filter__knopf[aria-pressed="true"] { background: var(--aubergine); border-color: var(--aubergine); color: var(--creme); }
.filter__zahl { align-self: center; margin-inline-start: auto; font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.12em; color: var(--tinte-leise); }

.platzhalter {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  text-align: center; padding: var(--z1);
  background: #f1e4ef;
}
.platzhalter__text {
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--aubergine);
  background: var(--weiss); padding: 0.6rem 1rem;
  border-radius: var(--radius-pille); line-height: 1.5;
}

/* ------------------------------------------- 15. Nur für "Eigene Marke" */

/* Diese Klassen kommen ausschliesslich auf arbeit/eigene-marke.html vor:
   Schutzzonen-Diagramm, Falsch-Beispiele, Farbtafel, Kontrasttabelle,
   Schriftmuster. */

.schutzzone {
  position: relative;
  width: 12rem;
  margin: 5rem auto;
}
.schutzzone__marke { width: 100%; }
.schutzzone__zone {
  position: absolute;
  inset: -4.5rem -3rem;
  border: 2px dashed var(--linie-stark);
  border-radius: var(--radius-karte);
  pointer-events: none;
}
.schutzzone__mass {
  position: absolute;
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  white-space: nowrap;
}
.schutzzone__mass--oben { top: -2.2rem; left: 0; }
.schutzzone__mass--rechts { top: 46%; left: calc(100% + 0.75rem); }
@media (max-width: 56rem) { .schutzzone__zone, .schutzzone__mass { display: none; } }

.fehlanwendung { display: grid; gap: var(--z2); margin-top: var(--z2); }
@media (min-width: 35rem) { .fehlanwendung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .fehlanwendung { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fehlanwendung figure { margin: 0; }
.fehlanwendung__feld {
  aspect-ratio: 1;
  border: 2px solid var(--linie);
  border-radius: var(--radius-karte);
  display: grid;
  place-items: center;
  padding: 20%;
  background: var(--weiss);
}
.fehlanwendung__feld--bunt { background: var(--creme); }
.marke-probe { width: 100%; }
.marke-probe--verzerrt { transform: scaleX(1.6) scaleY(0.72); }
.marke-probe--gedreht { transform: rotate(-24deg); }

.farbtafel { display: grid; gap: var(--z2); margin-top: var(--z2); }
@media (min-width: 35rem) { .farbtafel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.farbe { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; }
.farbe__feld {
  display: block;
  aspect-ratio: 1;
  border: 2px solid var(--linie);
  border-radius: var(--radius-karte);
  transition: border-color var(--takt) linear;
}
.farbe:hover .farbe__feld, .farbe:focus-visible .farbe__feld { border-color: var(--akzent); }
.farbe__name { display: block; margin-top: var(--z1); font-weight: 900; font-size: var(--fs-text); }
.farbe__wert { display: block; margin-top: 0.3rem; font-size: var(--fs-klein); color: var(--tinte-leise); line-height: 1.7; }
.farbe__rueck {
  display: block;
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--akzent);
  min-height: 1.5em; opacity: 0;
  transition: opacity var(--takt) linear;
}
/* main.js setzt data-kopiert="ja" für 2,4 Sekunden nach dem Klick. */
.farbe[data-kopiert="ja"] .farbe__rueck { opacity: 1; }

.kontrast { margin-top: var(--z3); font-size: var(--fs-klein); }
.kontrast caption, .kontrast th { text-align: left; }
.kontrast thead th {
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinte-leise);
  padding-block: 0 0.75rem; border-bottom: 3px solid var(--linie-stark);
}
.kontrast td, .kontrast tbody th { padding-block: var(--z1); border-bottom: 2px solid var(--linie); vertical-align: middle; }
.kontrast tbody th { font-weight: 900; }
.kontrast__probe { width: 4.5rem; }
.kontrast__probe span {
  display: grid; place-items: center;
  width: 3rem; height: 2.25rem;
  border-radius: var(--radius-pille);
  font-size: var(--fs-klein); font-weight: 700;
}
.kontrast__wert { font-weight: 900; white-space: nowrap; }
.kontrast__urteil { color: var(--tinte-leise); }

.muster { border-top: 3px solid var(--linie-stark); margin-top: var(--z2); }
.muster > div {
  display: grid; grid-template-columns: minmax(0, 1fr) 9rem;
  gap: var(--z1); align-items: baseline;
  padding-block: var(--z2); border-bottom: 2px solid var(--linie);
}
.muster__probe { min-width: 0; overflow: hidden; }
.muster__probe--script { font-family: var(--schrift-script); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; }
.muster__probe--bold { font-family: var(--schrift-display); font-weight: 900; text-transform: uppercase; font-size: var(--fs-karte); line-height: 1.05; }
.muster__probe--text { font-size: var(--fs-text); line-height: 1.6; }
.muster__daten { font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.1em; color: var(--tinte-leise); text-align: right; line-height: 1.8; }
@media (max-width: 44rem) {
  .muster > div { grid-template-columns: minmax(0, 1fr); }
  .muster__daten { text-align: left; }
}

/* ------------------------------------------------ 16. Rücksichtnahme */

/* Wer in den Systemeinstellungen "Bewegung reduzieren" aktiviert hat,
   bekommt keine Animationen und kein weiches Scrollen. */
@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;
  }
}

/* Beim Drucken: Kopfzeile, Formular und Sprungmarke ausblenden, alles in
   Schwarz auf Weiss. */
@media print {
  .kopf, form, .sprung, .fuss__marke { display: none !important; }
  body, .block { background: #fff !important; color: #000 !important; }
  .block--dunkel, .fuss { background: #fff !important; color: #50224b !important; }
  .karte__tinte { display: none; }
}