/* =============================================================================
   Portfolio Jennifer Knecht — «Retro Bloom»
   -----------------------------------------------------------------------------
   Die Seite handelt von IHR. Ihr Styleguide liefert die Farben, die Schriften
   und das Zeichen; die Formensprache kommt aus den Referenzen, die sie gezeigt
   hat: fette Versalien, grosse Farbfelder, Wellenkanten zwischen den
   Abschnitten, Bluetenmasken auf den Bildern, Pillenknoepfe.

   FARBREGEL, nachgerechnet und nicht verhandelbar:
     Auf JEDER hellen Flaeche (rosa-hell, rosa, mauve, creme) steht Text in
     Aubergine — 6.3:1 bis 11.1:1.
     Auf der dunklen Flaeche (pflaume) steht Text in Creme (11.1:1),
     Mauve (6.3:1) oder Weiss (12.6:1).
     Mauve auf hell ist 1.8:1 und traegt NIE Text — nur Flaeche, Linie, Zeichen.

   SCHRIFTROLLEN, damit die Schreibschrift nicht kitschig wird:
     Pinyon Script hat GENAU ZWEI Aufgaben: die Wortmarke, und je Seite
     hoechstens EIN hervorgehobenes Wort mitten in einer fetten Ueberschrift.
     Alles andere ist Roboto. Sobald die Schreibschrift Knoepfe, Navigation
     oder Bildlegenden traegt, kippt die Seite in die Hochzeitseinladung.

   VERBOTEN, absichtlich und dauerhaft:
     Verlaufsschrift, Prozentbalken fuer Faehigkeiten, Emoji als Piktogramme,
     hochzaehlende Zahlen, Glas-Effekt in der Kopfzeile, ein Radius fuer alles
     (es gibt genau drei Stufen),
     mehr als drei Bluetenformen pro Bildschirmseite.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Token */

:root {
  /* Marke — unveraendert aus ihrem Styleguide */
  --mauve: #d6abd0;
  --pflaume: #50224b;
  --creme: #fef2b9;

  /* Die hellen Flaechen entstehen aus MAUVE in Weiss, nicht aus Creme:
     ein cremegetoentes Papier haette gegen den Creme-Block kaum Abstand -
     die Wellenkante dazwischen verschwaende. Werte gerechnet, nicht
     geschaetzt; die Kontraste stehen als Kommentar dahinter. */
  --rosa-hell: #faf5f9;   /* Mauve 12 % in Weiss     · Aubergine 11.66:1 */
  --rosa: #e3c5de;        /* Mauve 65 % in rosa-hell · Aubergine  7.96:1 */
  --weiss: #fffdfb;

  /* Rollen statt Rohfarben — ein Abschnitt wechselt seine Flaeche und
     alles darin zieht mit. Die abgeleiteten Toene sind AUSGERECHNET und je
     Flaeche eigens gesetzt: eine einzige color-mix-Formel fuer alle vier
     Gruende trifft die Kontrastschwellen nicht.
     --linie-stark traegt Rahmen von Bedienelementen und muss deshalb
     ueberall ueber 3:1 liegen (WCAG 1.4.11). --linie ist reine Zier. */
  --grund: var(--rosa-hell);
  --tinte: var(--pflaume);
  --tinte-leise: #805d7c;    /* 5.16:1 auf rosa-hell */
  --akzent: var(--pflaume);
  --linie: #d8cbd6;
  --linie-stark: #9b7f98;    /* 3.31:1 auf rosa-hell */

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

  /* Typo. Fette Versalien brauchen engere Zeilen und engere Laufweite als
     Gemischtsatz — sonst franst der Block aus. clamp() bezogen auf
     360px bis 1600px Viewport. */
  --fs-mikro: 0.6875rem;
  --fs-klein: 0.875rem;
  --fs-text: clamp(1rem, 0.964rem + 0.161vw, 1.125rem);
  --fs-gross: clamp(1.125rem, 1.052rem + 0.323vw, 1.375rem);
  --fs-karte: clamp(1.25rem, 1.105rem + 0.645vw, 1.75rem);
  --fs-titel: clamp(1.875rem, 1.512rem + 1.613vw, 3.25rem);  /* 30 → 52 */
  --fs-riese: clamp(2.5rem, 1.694rem + 3.581vw, 5.5rem);   /* 40 → 88 */

  /* Genau drei Radien. Ein Radius fuer alles ist der schnellste Weg,
     nach Baukasten auszusehen. */
  --radius-bild: 1rem;
  --radius-karte: 1.5rem;
  --radius-pille: 62.5rem;

  --rand: clamp(1.25rem, 4.5vw, 4.5rem);
  --breite: 78rem;
  --z1: clamp(1rem, 2vw, 1.5rem);
  --z2: clamp(1.75rem, 4vw, 3rem);
  --z3: clamp(2.75rem, 7vw, 5.5rem);
  --z4: clamp(4rem, 11vw, 9rem);

  --welle-hoehe: clamp(2rem, 5vw, 5rem);

  --takt: 160ms;
  --takt-lang: 480ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kopf: 3.5rem;

  color-scheme: only light;
}

/* ------------------------------------------------------------- 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;
  font-synthesis: none;
  -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; }
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(--pflaume); color: var(--creme); }

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprung {
  position: fixed;
  top: -100%;
  left: var(--rand);
  z-index: 100;
  background: var(--pflaume);
  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. Typografie */

/* Die fette Versalie ist die Stimme der Seite. */
.display {
  font-family: var(--schrift-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* KEINE Silbentrennung in Schaugroessen: ein Trennstrich mitten in einem
     100px-Wort liest sich wie ein Fehler. Stattdessen ist die Skala so
     gedeckelt, dass das laengste Wort der Ueberschriften in die Spalte
     passt - und overflow-wrap faengt nur echte Extremfaelle ab. */
  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); letter-spacing: -0.015em; line-height: 1.05; }

/* Das eine Wort in Schreibschrift mitten in einer fetten Ueberschrift.
   Hoechstens einmal pro Seite. */
.schwung {
  font-family: var(--schrift-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.22em;      /* Schreibschriften laufen optisch kleiner */
  line-height: 0.8;
  padding-inline: 0.06em;
}

/* Die Wortmarke — die zweite und letzte Aufgabe der Schreibschrift. */
.wortmarke {
  font-family: var(--schrift-script);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  padding-block: 0.1em 0.18em;
}

.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; }

.verweis {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--takt) linear,
              text-decoration-color var(--takt) linear;
}
.verweis:hover, .verweis:focus-visible {
  text-decoration-thickness: 3px;
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------ 4. Farbbloecke */

.block {
  position: relative;
  background: var(--grund);
  color: var(--tinte);
  padding-block: var(--z4);
}
.block__innen {
  position: relative;
  z-index: 2;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.block--hell {
  --grund: var(--rosa-hell); --tinte: var(--pflaume);
  --tinte-leise: #805d7c;  /* 5.16:1 */
  --linie-stark: #9b7f98;  /* 3.31:1 */
  --linie: #d8cbd6;
  --akzent: var(--pflaume); --bluete-hinten: var(--mauve);
}
.block--rosa {
  --grund: var(--rosa); --tinte: var(--pflaume);
  --tinte-leise: #70466b;  /* 4.79:1 */
  --linie-stark: #8b6386;  /* 3.15:1 */
  --linie: #c09ebb;
  --akzent: var(--pflaume); --bluete-hinten: var(--creme);
}
.block--creme {
  --grund: var(--creme); --tinte: var(--pflaume);
  --tinte-leise: #7d5868;  /* 5.37:1 */
  --linie-stark: #9d7e7b;  /* 3.26:1 */
  --linie: #d8c4a1;
  --akzent: var(--pflaume); --bluete-hinten: var(--mauve);
}
.block--dunkel {
  --grund: var(--pflaume); --tinte: var(--creme);
  --tinte-leise: #c6af96;  /* 5.97:1 */
  --linie-stark: #997979;  /* 3.21:1 */
  --linie: #9a6d94;
  --akzent: var(--mauve); --bluete-hinten: var(--mauve);
}

/* Es gibt bewusst KEINE Flaeche in vollem Mauve. Darauf haette Aubergine
   nur 6.34:1 (erst ab 24px AAA), eine Mauve-Pille darauf waere mit 1.26:1
   unsichtbar, und die Primaerfarbe waere als Tapete verbraucht. Mauve ist
   Objektfarbe: Zeichen, Linien, Ringe, hintere Bluete, Akzent auf Dunkel. */

/* Baufehler sofort sichtbar machen statt erst im Abnahmelauf.
   hell neben creme hat nur 1.05:1 - eine Wellenkante dazwischen ist
   unsichtbar. Gleiche Toene nebeneinander ebenso. */
.block--hell + .block--creme, .block--creme + .block--hell,
.block--hell + .block--hell, .block--rosa + .block--rosa,
.block--creme + .block--creme, .block--dunkel + .block--dunkel {
  outline: 4px dashed red;
  outline-offset: -4px;
}

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

/* Die Kante zwischen zwei Farbfeldern. Gegen Haarrisse: die Welle sitzt IM
   oberen Abschnitt, ragt 1px in den naechsten hinein (bottom:-1px) und
   seitlich 1px hinaus (inset-inline:-1px) — beides faengt gebrochene
   Geraetepixel ab. Ihre Fuellung ist die Farbe des NAECHSTEN Abschnitts,
   gesetzt ueber `color`, damit beliebige Farbpaare moeglich sind.
   preserveAspectRatio="none" laesst sie in der Breite mitgehen. */
.welle {
  position: absolute;
  /* Seitlich buendig: mit width:100% und preserveAspectRatio="none" deckt
     die Welle die Breite exakt ab. Ein Ueberstand erzeugte nur 1px
     Scrollbreite. Der Ueberstand nach UNTEN bleibt - der faengt die
     gebrochenen Geraetepixel zwischen den zwei Flaechen ab. */
  inset-inline: 0;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.welle svg {
  display: block;        /* ohne das entsteht darunter eine Zeilenluecke */
  width: 100%;
  height: var(--welle-hoehe);
  /* fill gehoert AUF das <svg>, nicht auf den <path>: der Pfad liegt in
     einem <symbol> und wird per <use> geklont. Ein Selektor von aussen
     erreicht diesen Schattenbaum nicht - fill ist aber eine vererbte
     Darstellungseigenschaft und kommt so trotzdem an. */
  fill: currentColor;
}
.welle--unten { bottom: -1px; }
.welle--oben { top: -1px; transform: scaleY(-1); }

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

/* Ueber dem Kopf steht nichts mehr. Die Angabe "offen ab" sass frueher in
   einer Statuszeile ganz oben (entfernt am 06.09.2026), danach kurz in
   einem Band unter dem Hero (entfernt am 09.09.2026) und steht jetzt in
   der Mikrozeile des Titelblatts - dort, wo sie jemand liest, statt ueber
   der Navigation, wo sie vor dem Namen kam. */

/* Kein Glas, kein Blur, kein Schrumpfen. Die Kopfzeile ist eine Flaeche. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--rosa-hell);
  border-bottom: 2px solid transparent;
  transition: border-color var(--takt) linear;
}
.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(--pflaume); }
.marke svg, .marke img { width: 1.75rem; color: var(--mauve); }

.nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.8vw, 1.5rem); }
.nav__eintrag {
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pflaume);
  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(--pflaume); }

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

/* ------------------------------------------------------ 7. Pillenknopf */

.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(--pflaume);
  border-radius: var(--radius-pille);
  background: var(--pflaume);
  color: var(--creme);
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* Nur Farbe wechselt, der Knopf bewegt sich nicht. Ein hochschwebender
     Knopf mit groesserem Schatten ist der haeufigste Baukasten-Verraeter. */
  transition: background-color var(--takt) linear, color var(--takt) linear;
}
.knopf:hover, .knopf:focus-visible { background: transparent; color: var(--pflaume); }
.knopf--offen { background: transparent; color: var(--pflaume); }
.knopf--offen:hover, .knopf--offen:focus-visible { background: var(--pflaume); color: var(--creme); }

.block--dunkel .knopf, .fuss .knopf {
  border-color: var(--creme); background: var(--creme); color: var(--pflaume);
}
.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); }

/* Der Kopf-Knopf weicht zuerst, die Navigation bleibt bis 320px stehen.
   Diese Regel MUSS nach .knopf stehen: gleiche Spezifitaet, und sonst
   gewinnt das display:inline-flex von weiter oben. */
@media (max-width: 62rem) { .kopf .knopf--kopf { display: none; } }

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

.hero { padding-block: var(--z3) calc(var(--z4) + var(--welle-hoehe)); }
.hero__raster { display: grid; gap: var(--z2); align-items: center; }
@media (min-width: 56.25rem) {
  .hero__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--z2) 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%, 28rem); }

/* ---------------------------------------------------- 9. Bluetenmaske */

/* Acht Blaetter als clipPath in objectBoundingBox — dadurch skaliert die
   Form mit dem Bild statt eine feste Groesse zu haben. Die Form setzt ein
   quadratisches Feld voraus, deshalb aspect-ratio: 1. */
/* Die hintere Bluete fuellt das Feld, die vordere sitzt eingerueckt darin.
   So bleibt ALLES innerhalb der Box — die frueher gedrehte Rueckbluete
   ragte um 30 % hinaus (gedrehte Huellbox) und erzeugte auf dem Handy
   waagrechten Ueberlauf. Der Versatz kommt jetzt aus einer zweiten,
   um einen halben Blattabstand gedrehten Maske. */
.bluete { position: relative; aspect-ratio: 1; isolation: isolate; }
.bluete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bluete-hinten, var(--mauve));
  clip-path: url(#bluete-8b);
}
.bluete__bild {
  position: absolute;
  inset: 8%;
  z-index: 2;
  /* Breite und Hoehe AUSDRUECKLICH, nicht auto. Solange hier ein <div> als
     Platzhalter stand, fuellte inset: 8% den Kasten wie erwartet. Ein <img>
     ist ein ersetztes Element: bei width: auto nimmt es seine eigene
     Breite (gedeckelt durch max-width: 100% aus dem Reset) und ignoriert
     right - das Bild war 100 % statt 84 % gross und sass um 8 % nach rechts
     und unten verschoben. Weil die Bluetenmaske am Bildkasten haengt, sah
     es trotzdem nach Bluete aus; aufgefallen ist es erst als Ueberlauf bei
     375 px (12.09.2026). */
  width: 84%; height: 84%;
  object-fit: cover;
  clip-path: url(#bluete-8);
}
/* Ohne clip-path bleibt ein rundes Bild statt einer zerschnittenen Form. */
@supports not (clip-path: url(#bluete-8)) {
  .bluete__bild { clip-path: none; border-radius: 50%; }
  .bluete::before { display: none; }
}
@media (forced-colors: active) {
  .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: color-mix(in srgb, var(--mauve) 40%, var(--grund));
}
.karte__bild > img { width: 100%; height: 100%; object-fit: cover; }

/* Der Tintenaufzug: Aubergine steigt von unten auf, wie Farbe im Druck.
   Das Bild selbst steht still. */
.karte__tinte {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--pflaume) 92%, transparent);
  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: color-mix(in srgb, var(--tinte) 70%, var(--grund)); }
.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; text-underline-offset: 0.14em; }

.zitat {
  background: color-mix(in srgb, var(--creme) 12%, transparent);
  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 */

/* Dekor aus ihrem eigenen Vokabular. Nie mehr als drei pro Bildschirmseite —
   darueber sieht es nach Kinderzimmer aus. */
/* fill: currentColor ist noetig - ein <use> erbt die Farbe sonst nicht
   und faellt auf Schwarz zurueck. */
.mal { fill: currentColor; }
.mal { 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: color-mix(in srgb, var(--tinte) 70%, var(--grund)); }

/* ------------------------------------------------------- 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: color-mix(in srgb, var(--creme) 10%, transparent);
  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: color-mix(in srgb, currentColor 55%, transparent); }
.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; }
.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; }

.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(--pflaume); color: var(--creme); padding-top: var(--z3); overflow: hidden;
  --tinte-leise: color-mix(in srgb, var(--creme) 72%, var(--pflaume));
  --linie: color-mix(in srgb, var(--mauve) 34%, transparent); }
.fuss__innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.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 riesige Wortmarke am Blattende (Referenz B). Reines Dekor, deshalb
   fuer Vorleseprogramme versteckt — der Name steht daneben schon im Text. */
.fuss__marke {
  margin-top: var(--z3);
  font-family: var(--schrift-script);
  font-size: clamp(3rem, 14vw, 12rem);
  line-height: 0.9;
  color: var(--mauve);
  text-align: center;
  padding-block: 0.06em 0.14em;
  user-select: none;
}

/* -------------------------------------------------- 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; text-underline-offset: 0.2em; }

.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; }

.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; letter-spacing: 0.06em;
  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; text-underline-offset: 0.14em; }

.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 { font-variant-numeric: tabular-nums; 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: 43.75rem) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .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 — Listen, keine Prozentbalken.
   «Typografie 89 %» kann niemand nachpruefen und wirkt geliehen. */
.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); }

/* --------------------------------------------- Programmzeichen (eigene) */

/* Warum eigene und nicht die echten Programmsymbole:
   die Logos von Adobe, Figma und Canva sind eingetragene Marken. Fremde
   Markenzeichen im eigenen Portfolio zu fuehren ist heikel - und die
   Hausfarben der Programme (Magenta, Orange, Blau, Violett, Gruen) wuerden
   quer durch eine Seite laufen, die auf drei Farben aufgebaut ist. Sie
   waeren der einzige Ort mit fremden Farben und der einzige Ort mit
   fremden Formen.

   Uebernommen ist deshalb nur die KONVENTION - zwei helle Buchstaben auf
   einer gefuellten, gerundeten Kachel -, gezeichnet in ihrer Schrift, ihren
   Farben und ihrem Radius (--radius-bild, deutlich runder als das
   Adobe-Original, damit das Set sichtbar ihres ist). Ein Zeichen, eine
   Regel, acht Mal.

   Die gefuellte Flaeche ist der Grund, warum das Set ueberhaupt als
   Programmzeichen gelesen wird - nicht die Form. Eine erste Fassung hatte
   weisse Kacheln mit Kontur; die lasen sich als Merkzeichen, nicht als
   Programme. Gerechnet: Creme auf Aubergine 11.14:1, die Kachel gegen den
   rosa Block 7.96:1 - deshalb braucht sie keine Kontur mehr. Eine dritte
   Fassung mit mauvefarbener Kachel ist verworfen, sie kam auf 1.26:1 gegen
   den rosa Block und waere dort fast verschwunden.

   Die Kuerzel folgen derselben Logik wie bei Adobe: die Anfangsbuchstaben
   der beiden Wortteile. InDesign -> Id, Photoshop -> Ps, After Effects ->
   Ae. Einwortnamen bekommen den ersten Buchstaben plus den tragenden
   Konsonanten: Figma -> Fg, Canva -> Cv. Handcode traegt </>, weil dafuer
   kein Programmname existiert.

   Sie sind aria-hidden: der Name steht direkt daneben, ein Vorleseprogramm
   wuerde ihn sonst zweimal hoeren ("I D Adobe InDesign"). */
.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;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;        /* "Id", nicht "ID" - das Kuerzel ist gemischt */
  color: var(--creme);
  /* Optischer Ausgleich: die Versalien sitzen ohne Unterlaenge zu hoch. */
  padding-top: 0.0625rem;
}
/* Drei Zeichen statt zwei brauchen etwas weniger Breite. */
.wz--code { font-size: 0.75rem; letter-spacing: -0.03em; }

/* Auf der dunklen Flaeche kehrt sich die Kachel um - sonst stuende
   Aubergine auf Aubergine. */
.block--dunkel .wz, .fuss .wz {
  background: var(--creme);
  color: var(--pflaume);
}

.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: start;
  padding-block: var(--z1); border-bottom: 2px solid var(--linie);
}
/* Das Zeichen sitzt im <dt>, nicht als dritte Spalte: ein <div> in einer
   <dl> darf laut Inhaltsmodell nur <dt> und <dd> enthalten. */
.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);
  /* Das Zeichen macht das <dt> 2.5rem hoch, der Name sitzt darin mittig.
     Ohne diesen Versatz begaenne die Beschreibung weiter oben als der Name,
     zu dem sie gehoert - und bei zweizeiliger Beschreibung stuende der Name
     zwischen den Zeilen. Der Wert ist die halbe Differenz der beiden
     Zeilenmitten: 2.5rem/2 minus (0.875rem x 1.55)/2. */
  padding-top: 0.57rem;
}
/* Einspaltig steht die Beschreibung unter dem Namen - dann gibt es keine
   Zeilenmitten mehr auszurichten und der Versatz muss weg. */
@media (max-width: 43.75rem) {
  .toolbox > div { grid-template-columns: minmax(0, 1fr); }
  .toolbox dd { padding-top: 0; }
}

.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); }
.filter__knopf[aria-pressed="true"] { background: var(--pflaume); border-color: var(--pflaume); 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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-3.5 3.5 L3.5 -3.5 M0 14 L14 0 M10.5 17.5 L17.5 10.5' stroke='%23d6abd0' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
.platzhalter__text {
  font-size: var(--fs-mikro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pflaume);
  background: var(--weiss); padding: 0.6rem 1rem;
  border-radius: var(--radius-pille); line-height: 1.5;
}

/* ------------------------------------------- 15. Markenblatt (Fallstudie) */

/* Diese Bausteine kommen NUR auf arbeit/eigene-marke.html vor: Farbtafel,
   Kontrasttabelle, Schriftmuster, Schutzzone und die Falschanwendungen.
   Dort sind sie Beleg fuer eine Arbeit — nicht Thema der ganzen Website. */

.schutzzone {
  position: relative;
  inline-size: clamp(7rem, 15vw, 14rem);
  /* Die Zone ragt eine volle Logobreite hinaus und braucht diesen Platz,
     sonst wuerde die Regel im selben Atemzug gebrochen, in dem sie gezeigt wird. */
  margin: calc(var(--logo-h, 10.5rem) + var(--z1)) auto;
}
.schutzzone__marke { inline-size: 100%; }
.schutzzone__zone {
  position: absolute;
  inset: -75.2% -100%;    /* Hoehe = Breite / 1.3291 → 75.2 % */
  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 { inset-block-start: -42%; inset-inline-start: 0; }
.schutzzone__mass--rechts { inset-block-start: 46%; inset-inline-start: calc(100% + 0.75rem); }
@media (max-width: 56.25rem) { .schutzzone__zone, .schutzzone__mass { display: none; } .schutzzone { margin-block: var(--z2); } }

/* Vier Felder: einmal richtig, dreimal falsch — mit Begruendung darunter. */
.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: 56.25rem) { .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 { inline-size: 100%; }
.marke-probe--verzerrt { transform: scaleX(1.6) scaleY(0.72); }
.marke-probe--gedreht { transform: rotate(-24deg); }

/* Farbtafel */
.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;            /* span ist inline: ohne das kein Kasten */
  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); font-variant-numeric: tabular-nums; 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;
}
.farbe[data-kopiert="ja"] .farbe__rueck { opacity: 1; }

/* Kontrasttabelle — die Farbregel wird vorgefuehrt, nicht behauptet. */
.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-variant-numeric: tabular-nums; font-weight: 900; white-space: nowrap; }
.kontrast__urteil { color: var(--tinte-leise); }

/* Schriftmuster mit Grad und Durchschuss in der Marginalie */
.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; padding-block: 0.06em 0.2em; }
.muster__probe--bold { font-family: var(--schrift-display); font-weight: 900; text-transform: uppercase; font-size: var(--fs-karte); line-height: 1.05; letter-spacing: -0.015em; }
.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; font-variant-numeric: tabular-nums; }
@media (max-width: 43.75rem) {
  .muster > div { grid-template-columns: minmax(0, 1fr); }
  .muster__daten { text-align: left; }
}

/* ------------------------------------------------ 16. Ruecksichtnahmen */

@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;
  }
}

@media (forced-colors: active) {
  .welle { display: none; }
  .karte__tinte { forced-color-adjust: none; }
  .karte__bild, .zitat, .rueckblick { border: 2px solid CanvasText; }
}

@media print {
  .kopf, .welle, form, .sprung, .fuss__marke { display: none !important; }
  body, .block { background: #fff !important; color: #000 !important; }
  .block--dunkel, .fuss { background: #fff !important; color: #50224b !important; }
  .block { padding-block: 1.2cm; break-inside: avoid; }
  .karte__tinte { display: none; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}