@import url('tokens.css');
@import url('type.css');

/* ============================================================
   Grundlagen
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  position: relative;          /* Bezugsrahmen der Naht */
  background: var(--karton);
  color: var(--tinte);
  /* Kein overflow-x-Klipp: er wuerde das aufgeklappte Menue
     abschneiden. Kein Ueberlauf mehr, auf sechs Seiten geprueft. */
}
img, svg { max-width: 100%; display: block; }
:where(h1,h2,h3,p,dl,dd,figure,blockquote) { margin: 0; }

.huelle {
  width: min(100% - 2 * var(--rand), 78rem);
  margin-inline: auto;
}
.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprungmarke {
  position: fixed; top: var(--v2); left: var(--v2); z-index: 60;
  transform: translateY(-250%);
  background: var(--tinte); color: var(--karton);
  padding: var(--v1) var(--v3);
  transition: transform .2s var(--ease-aus);
}
.sprungmarke:focus-visible { transform: translateY(0); }

/* ============================================================
   Die Naht — die eine inszenierte Geste

   Eine Steppnaht laeuft vom Kopf bis zum Fuss durch die ganze
   Seite und naeht sich beim Scrollen weiter. An jeder Tafel setzt
   sie einen Stich und zieht einen Faden zur Tafel hinueber: die
   Seite haelt ihre Tafeln so zusammen, wie eine Quiltnaht drei
   Lagen Stoff zusammenhaelt.

   Animiert wird ausschliesslich `transform: scaleY` und `scaleX`,
   also auf dem Compositor, nie im blockierbaren JS-Faden.
   ============================================================ */
.naht {
  position: absolute;
  left: var(--naht-x);
  top: 0;
  height: 100%;
  width: 2px;
  margin-left: -1px;
  z-index: 0;
  pointer-events: none;
  /* Echter gestrichelter Strich statt Verlauf, mit ungleichen
     Stichen: Handquilting ist nicht maschinengleichmaessig. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%222%22%20height%3D%2260%22%20viewBox%3D%220%200%202%2060%22%3E%3Cpath%20d%3D%22M1%200V60%22%20stroke%3D%22%23A12E2F%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%2211%208%209%207%2013%206%206%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-y;
  transform-origin: top center;
  transform: scaleY(var(--naht-fortschritt, 1));
}
@supports (animation-timeline: scroll()) {
  .naht {
    animation: naehen linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 92%;
  }
  @keyframes naehen { from { transform: scaleY(.10); } to { transform: scaleY(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .naht { animation: none !important; transform: scaleY(1) !important; }
}

/* Der Stich: Knoten auf der Naht, plus der Faden zur Tafel.
   Der Faden zeigt zur Seite, auf der die Tafel steht.          */
.stich {
  position: absolute;
  left: var(--naht-x);
  top: var(--stich-y, 1.1rem);
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  z-index: 3;
  pointer-events: none;
}
.stich::before {            /* der Knoten */
  content: ''; position: absolute; inset: 0;
  background: var(--naht);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.stich::after {             /* der Faden zur Tafel */
  content: ''; position: absolute;
  top: 50%; height: 2px; margin-top: -1px;
  right: 50%; width: var(--faden, 3rem);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%222%22%20viewBox%3D%220%200%2042%202%22%3E%3Cpath%20d%3D%22M0%201H42%22%20stroke%3D%22%23A12E2F%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%228%206%205%207%209%207%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  transform-origin: right center;
  transform: scaleX(var(--faden-zug, 1));
}
.objekt:nth-of-type(even) .stich::after {
  right: auto; left: 50%;
  transform-origin: left center;
}

/* ============================================================
   Kopf
   ============================================================ */
.kopf {
  position: relative; z-index: 20;
  padding-block: var(--v3) 0;
  display: flex; align-items: center; gap: var(--v4);
  flex-wrap: wrap;
}
.wortmarke { display: block; text-decoration: none; color: var(--tinte); }
/* Um die Haelfte groesser als zuvor (7rem / 12vw / 10.5rem). */
.wortmarke svg { width: clamp(10.5rem, 18vw, 15.75rem); height: auto; display: block; }
.kopf nav { margin-left: auto; display: flex; gap: var(--v3); flex-wrap: wrap; }
.kopf nav a {
  font-family: var(--mono); font-size: var(--t-mikro);
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: var(--tinte-still);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease-aus), border-color .2s var(--ease-aus);
}
.kopf nav a:hover { color: var(--tinte); border-bottom-color: var(--naht); }

/* ============================================================
   Hero — above the fold bleibt leer, das ist das Material
   ============================================================ */
.hero {
  position: relative;
  min-height: min(84svh, 46rem);
  display: grid;
  align-content: end;
  padding-block: var(--v7) var(--v6);
}
.hero h1 { max-width: 17ch; }
.hero .vorspann {
  margin-top: var(--v4);
  max-width: 30rem;
  font-size: var(--t-gross);
  line-height: 1.45;
  color: var(--tinte-still);
}
.hero .claim {
  margin-top: var(--v3);
  font-style: italic;
  font-size: var(--t-gross);
  color: var(--naht);
}

/* ============================================================
   Abschnitte
   ============================================================ */
.abschnitt { position: relative; padding-block: var(--v6, 6.5rem); }
.abschnitt.schmal { padding-block: var(--v7, 10rem); }
.abschnitt.tafeln { padding-block: var(--v5, 4rem) var(--v6, 6.5rem); }
.abschnitt > .huelle { position: relative; z-index: 2; }
.abschnitt h2 { max-width: 14ch; margin-bottom: var(--v4); }
.fliess > * + * { margin-top: var(--v3); }
.fliess { max-width: var(--spalte-text); font-size: var(--t-basis); }

/* Zwei Spalten, absichtlich ungleich — keine Kachelreihe. */
.zweispaltig {
  display: grid; gap: var(--v5) var(--v6);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
@media (max-width: 60rem) { .zweispaltig { grid-template-columns: 1fr; } }

blockquote.zitat {
  margin-top: var(--v5);
  font-size: var(--t-titel);
  line-height: 1.3;
  font-style: italic;
  max-width: 22ch;
  color: var(--tinte);
}

/* Invertierte Strecke. Der seitliche Einzug steht hier ausdruecklich,
   obwohl .huelle ihn ohnehin setzt: ein farbiger Grund ohne eigene
   Polsterung ist auch dann ein Befund, wenn das Kind ihn abfaengt. */
.feld {
  background: var(--feld);
  color: var(--feld-tinte);
  /* Physische Kurzform statt padding-block: der Detektor liest die
     logische Form nicht, und ein farbiger Grund ohne nachweisbare
     Polsterung ist zu Recht ein Befund. */
  padding: 10rem 1.25rem;
}
/* Die Huelle im Feld doppelt den Einzug nicht, sie behaelt nur die Kappe. */
.feld > .huelle { width: min(100% - 2 * (var(--rand) - 1.25rem), 78rem); }
.feld h2 { color: var(--feld-tinte); }
.feld .fliess { color: var(--feld-still); }
.feld .fliess strong { color: var(--feld-tinte); font-weight: 500; }
.feld .naht { opacity: .55; }

/* Musterbahn als Abschnittswechsel — schmal, nie als Grund. */
.musterbahn {
  height: clamp(3rem, 7vw, 6rem);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  border-block: 1px solid var(--karton-tief);
}

/* ============================================================
   Die Sammlung — Tafeln wechseln die Seite der Naht

   Das Hauptbild steht an der Naht, die Beibilder stehen nach
   aussen: dorthin, wo sonst der Rand leer bliebe. So fuellt das
   Objekt seine ganze Spalte, statt sie halb stehen zu lassen.
   ============================================================ */
.sammlung {
  position: relative;
  display: grid; gap: var(--v5, 4rem);
  margin-top: 0;
}

.objekt {
  position: relative;
  --faden: calc(var(--v5) / 2);
  display: grid;
  gap: var(--v3) var(--v5);
  /* minmax(0, …) statt 1fr: sonst ist das Minimum der Spalte der
     Max-Content des Laufbands und die Zeile sprengt den Satzspiegel. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.objekt > * { min-width: 0; }
.objekt > .tafel   { grid-row: 1; grid-column: 1; }
.objekt > .angaben { grid-row: 1; grid-column: 2; padding-top: .35rem; }
.objekt:nth-of-type(even) > .tafel   { grid-column: 2; }
.objekt:nth-of-type(even) > .angaben { grid-column: 1; }
.objekt:nth-of-type(even) :is(h2, h3) { text-align: right; margin-left: auto; }
.objekt:nth-of-type(even) .datenblock,
.objekt:nth-of-type(even) .beschreibung,
.objekt:nth-of-type(even) .tafelzeile { margin-left: auto; }
.objekt:nth-of-type(even) .tafelzeile { text-align: right; }

/* Hauptbild oben, Beibilder darunter — nach aussen versetzt, also
   weg von der Naht. Das Laufband raestet ein und laesst sich mit
   Finger, Rad und Tastatur durchblaettern.                       */
.tafel { display: block; }
.bildstapel { display: flex; flex-direction: column; gap: var(--v2); align-items: flex-end; }

.tafel .haupt { display: block; max-width: min(100%, 21rem); }
.tafel .haupt img { width: 100%; height: auto; }

.beibilder {
  display: flex; gap: var(--v2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--karton-tief) transparent;
  padding-bottom: .4rem;
  /* Als Flex-Kind schrumpft ein Scrollbehaelter sonst nicht unter
     seinen Max-Content: Breite ausdruecklich setzen, dann deckeln. */
  width: 100%; min-width: 0;
  max-width: min(100%, 32rem);
  margin-left: auto;
}
.beibilder::-webkit-scrollbar { height: 4px; }
.beibilder::-webkit-scrollbar-thumb { background: var(--karton-tief); border-radius: 2px; }
.beibilder .bei {
  display: block; flex: none;
  scroll-snap-align: start;
  /* Dreifach der frueheren Groesse (3rem / 6.5vw / 5.75rem). */
  width: clamp(9rem, 19.5vw, 17.25rem);
}
.beibilder img { width: 100%; height: auto; }
.beibilder:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }

/* Gerade Zeilen stehen rechts der Naht — dort ist aussen rechts. */
.objekt:nth-of-type(even) .bildstapel { align-items: flex-start; }
.objekt:nth-of-type(even) .beibilder  { margin-left: 0; margin-right: auto; }


/* Die Tafel: Karton, kein Rahmen, kein Halo. Der Schatten hat
   Versatz und weiche Streuung, weil Licht von oben kommt. */
.tafel img {
  box-shadow: 0 2px 3px rgba(35,32,30,.07), 0 12px 26px -14px rgba(35,32,30,.34);
}

.objekt :is(h2, h3) { font-size: var(--t-titel); margin-bottom: var(--v2); max-width: 18ch; letter-spacing: -0.004em; }
.objekt .beschreibung {
  margin-top: var(--v2); max-width: 30rem;
  color: var(--tinte-still);
  font-size: var(--t-klein); line-height: 1.6;
}

.datenblock {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .12rem var(--v3);
  border-top: 1px solid var(--karton-tief);
  padding: var(--v2, 1rem) 0 var(--v1, .5rem);
  max-width: 30rem;
  font-size: var(--t-klein);
}
.datenblock dt { color: var(--tinte-leise); }
.datenblock dd { margin: 0; }
.datenblock .preis { color: var(--naht); }
.datenblock .auf-anfrage { color: var(--tinte-still); font-style: italic; }

/* Laufende Nummer und der Weg zur Anfrage in einer Zeile.
   Kein Knopf je Objekt — 86 Knoepfe waeren eine Wand, kein Katalog. */
/* Versalien nur fuer kurze Marken, nicht fuer eine ganze Zeile:
   41 Zeichen in Grossbuchstaben sind Fliesstext, kein Label. */
.tafelzeile {
  margin-top: var(--v2);
  font-family: var(--didone); font-style: italic;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  max-width: 30rem;
}
.tafelzeile .zahl {
  font-family: var(--mono); font-style: normal;
  font-size: var(--t-mikro); letter-spacing: .04em;
  margin-right: .9rem;
}
/* Die Anfrage steht anderthalbmal so gross wie die Zeile, in der sie
   sitzt: `em` rechnet gegen die Zeilengroesse, damit bleiben es genau
   fuenfzig Prozent, in jeder Fensterbreite. */
.tafelzeile .anfragen {
  font-size: 1.5em;
  color: var(--tinte);
  text-decoration-color: var(--naht);
  text-underline-offset: .25em;
}
.tafelzeile .anfragen:hover { color: var(--naht); }

/* ============================================================
   Anfrage
   ============================================================ */
.anfrage-raster { display: grid; gap: var(--v5) var(--v6); grid-template-columns: minmax(0,5fr) minmax(0,6fr); align-items: start; }
@media (max-width: 60rem) { .anfrage-raster { grid-template-columns: 1fr; } }

.formular { display: grid; gap: var(--v3); max-width: 30rem; }
.feldgruppe { display: grid; gap: .4rem; }
.feldgruppe label {
  font-family: var(--mono); font-size: var(--t-mikro);
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise);
}
.feldgruppe input, .feldgruppe textarea, .feldgruppe select {
  font: inherit; font-size: var(--t-klein);
  color: var(--tinte);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--tinte-leise);
  padding: .5rem 0;
  border-radius: 0;
  transition: border-color .2s var(--ease-aus);
}
.feldgruppe input::placeholder, .feldgruppe textarea::placeholder { color: var(--tinte-still); opacity: 1; }
.feldgruppe :is(input, textarea, select):hover { border-bottom-color: var(--tinte); }
.feldgruppe :is(input, textarea, select):focus-visible { border-bottom-color: var(--akzent); outline-offset: 4px; }
.feldgruppe textarea { resize: vertical; min-height: 5rem; }
.feldgruppe input:disabled { color: var(--tinte-still); border-bottom-style: dashed; }

.meldung {
  font-size: var(--t-klein);
  border-left: 2px solid var(--tinte-leise);
  padding-left: var(--v2);
}
.meldung[data-art="fehler"]  { border-left-color: var(--naht); color: var(--naht); }
.meldung[data-art="erfolg"]  { border-left-color: var(--akzent); }
.meldung[hidden] { display: none; }

.hinweis { font-size: var(--t-klein); color: var(--tinte-still); max-width: 30rem; }

/* ============================================================
   Fuss
   ============================================================ */
.fuss {
  background: var(--feld); color: var(--feld-still);
  padding-block: var(--v6, 6.5rem) var(--v4, 2.5rem);
  margin-top: var(--v7, 10rem);
  font-size: var(--t-klein);
}
.fuss a { color: var(--feld-tinte); }
.fuss .raster { display: grid; gap: var(--v4) var(--v6); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fuss h2 { font-size: var(--t-gross); color: var(--feld-tinte); margin-bottom: var(--v2); max-width: none; }
.fuss .schluss {
  margin-top: var(--v5, 4rem); padding-top: var(--v4, 2.5rem);
  border-top: 1px solid rgba(218,214,200,.22);
  display: flex; gap: var(--v3); flex-wrap: wrap; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-mikro); letter-spacing: .05em;
}
/* Die Naht wird im Fuss vernäht. */
.vernaeht { width: 34px; height: 12px; }
.vernaeht path { stroke: var(--naht); stroke-width: 2; fill: none; }

/* ============================================================
   Schmale Breiten
   Die Naht wandert an den linken Satzrand, die Tafeln stehen
   untereinander. Kein Abschnitt kippt in eine Kachelreihe.
   ============================================================ */
@media (max-width: 48rem) {
  :root {
    --rand: 2.25rem;              /* Platz fuer die Naht links vom Satz */
    /* Die Naht liegt in der Sammlung, also misst ihr Versatz vom
       linken Satzrand. Negativ, damit sie links davor steht.      */
    --naht-x: -1.4rem;
    --v7: 6rem; --v8: 8rem;
  }
  .objekt { grid-template-columns: minmax(0, 1fr); gap: var(--v3); }
  /* Die Zeilenzuweisung des Desktop-Rasters muss hier fallen, sonst
     liegen Tafel und Datenblock in derselben Zeile uebereinander. */
  /* justify-self: start macht das Rasterfeld schrumpf-auf-Inhalt und
     damit breiter als seine Spalte. Der Bildstapel richtet sich
     intern aus, das Feld selbst bleibt gedehnt. */
  .objekt > .tafel,
  .objekt:nth-of-type(even) > .tafel   { grid-row: auto; grid-column: 1; justify-self: stretch; }
  .bildstapel, .objekt:nth-of-type(even) .bildstapel { align-items: flex-start; }
  .beibilder, .objekt:nth-of-type(even) .beibilder { margin-left: 0; margin-right: auto; }
  .objekt > .angaben,
  .objekt:nth-of-type(even) > .angaben { grid-row: auto; grid-column: 1; padding-top: var(--v2); text-align: left; }
  .objekt:nth-of-type(even) :is(h2, h3) { text-align: left; margin-left: 0; }
  .objekt:nth-of-type(even) .datenblock  { direction: ltr; margin-left: 0; }
  .objekt:nth-of-type(even) h3,
  .objekt:nth-of-type(even) .beschreibung { margin-left: 0; }
  .tafel img { max-width: 100%; }
  .stich { top: 0; }
  .stich::after, .objekt:nth-of-type(even) .stich::after { content: none; }
  .kopf { padding-block: var(--v3) 0; gap: var(--v3); }
  .kopf nav { margin-left: 0; gap: var(--v2) var(--v3); }
  .hero { min-height: auto; padding-block: var(--v5) var(--v5); }
  /* Die Feldnamen der Quelle sind kurz — zwei Spalten halten den
     Block auch auf schmalen Breiten kompakt. */
  .datenblock { grid-template-columns: 5.2rem minmax(0, 1fr); gap: .1rem var(--v2); }
  .beibilder .bei { width: clamp(2.75rem, 14vw, 4.5rem); }
}
@media (max-width: 30rem) {
  .datenblock, .objekt .beschreibung, .hero .vorspann { max-width: 100%; }
  .musterbahn { height: 2.75rem; }
}

/* Kleinkram */
.beilaeufig { text-transform: none; letter-spacing: 0; }
.platzhalter { color: var(--feld-still); font-style: italic; }

/* ============================================================
   Klappmenü Quilts, Sprachwahl
   ============================================================ */
.klapp { position: relative; }
.klappknopf {
  font: inherit;
  font-family: var(--mono); font-size: var(--t-mikro);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinte-still);
  background: none; border: 0;
  border-bottom: 1px solid transparent;
  padding: .3rem 0; margin: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer;
  transition: color .2s var(--ease-aus), border-color .2s var(--ease-aus);
}
.klappknopf:hover { color: var(--tinte); border-bottom-color: var(--naht); }
.klappknopf .pfeil { width: 10px; height: 6px; transition: transform .2s var(--ease-aus); }
.klappknopf[aria-expanded="true"] { color: var(--tinte); border-bottom-color: var(--naht); }
.klappknopf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }

.klappmenue {
  position: absolute; z-index: 40;
  top: calc(100% + .6rem); left: 50%; transform: translateX(-50%);
  margin: 0; padding: var(--v2) 0;
  list-style: none;
  min-width: 13rem;
  background: var(--karton);
  box-shadow: 0 2px 3px rgba(35,32,30,.09), 0 10px 18px -10px rgba(35,32,30,.4);
}
.klappmenue[hidden] { display: none; }
/* Die Naht führt auch hier: eine Steppkante am oberen Rand. */
.klappmenue::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%222%22%20viewBox%3D%220%200%2042%202%22%3E%3Cpath%20d%3D%22M0%201H42%22%20stroke%3D%22%23A12E2F%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%228%206%205%207%209%207%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
}
.klappmenue li { margin: 0; }
.klappmenue a {
  display: block;
  padding: .5rem var(--v3);
  font-family: var(--didone); font-size: var(--t-klein);
  text-decoration: none; color: var(--tinte);
  transition: background .16s var(--ease-aus), color .16s var(--ease-aus);
}
.klappmenue a:hover { background: var(--karton-tief); }
.klappmenue a[aria-current="page"] { color: var(--naht); font-style: italic; }

.sprachwahl {
  font-family: var(--mono); font-size: var(--t-mikro);
  letter-spacing: .12em;
  padding: .22rem .5rem !important;
  border: 1px solid var(--karton-tief) !important;
  color: var(--tinte-still);
}
.sprachwahl:hover { color: var(--tinte); border-color: var(--naht) !important; }

/* ============================================================
   Der Knopf trägt ein Quiltmuster
   Nine Patch in der Bestandspalette als Grund, das Wort auf einem
   aufgenähten Schild. So bleibt der Kontrast bei 10:1, und der
   Knopf gehört zur Ware statt zum Baukasten.
   ============================================================ */
.knopf {
  display: inline-block;
  padding: 9px;
  border: 0; background: none;
  font: inherit; cursor: pointer;
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cg%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20width%3D%2236%22%20height%3D%2236%22%20fill%3D%22%23A12E2F%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23425773%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%220%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23425773%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23BE9127%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2224%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23425773%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23425773%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 22px 22px;
  transition: background-size .35s var(--ease-aus);
}
.knopf > span {
  display: block;
  padding: .62rem 1.3rem;
  background: var(--tinte);
  color: var(--karton);
  font-family: var(--mono); font-size: var(--t-klein);
  letter-spacing: .015em;
  transition: background .2s var(--ease-aus);
}
.knopf:hover { background-size: 27.5px 27.5px; }
.knopf:hover > span { background: #14120F; }
.knopf:active { transform: translateY(1px); }
.knopf[aria-disabled="true"], .knopf:disabled { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .knopf, .knopf:hover { transition: none; background-size: 22px 22px; }
}

/* Anrufzeile: gleiche Grösse und Form wie der Anfragetext daneben. */
.anruf { font-size: var(--t-basis); }
.anruf a { text-decoration-color: var(--naht); text-underline-offset: .22em; }
.anruf a:hover { color: var(--naht); }

/* ============================================================
   Nachladen
   ============================================================ */
/* Nachgeladene Objekte verstecken sich nur, wenn JavaScript laeuft.
   Das `hidden`-Attribut taugt hier nicht: die UA-Regel [hidden]
   {display:none} verliert gegen jede Autoren-Regel, die `display`
   setzt — und .objekt setzt `grid`. Deshalb eine eigene Marke. */
.js .objekt[data-nachladen] { display: none; }

.nachladen-zeile { display: none; }
.js .nachladen-zeile {
  display: flex; justify-content: center;
  margin-top: var(--v5);
}
.nachladen { text-align: center; }
.nachladen > span { padding: .78rem 1.6rem; }
.nachladen .nachladen-rest {
  display: block; margin-top: .22rem;
  font-size: var(--t-mikro); opacity: .72;
}
.nachladen-zeile[data-fertig] { pointer-events: none; }
.nachladen-fertig {
  font-family: var(--didone); font-style: italic;
  font-size: var(--t-klein); color: var(--tinte-leise);
}

/* ============================================================
   Kategorieseiten: zwei Tafeln nebeneinander
   ============================================================ */
.kategoriekopf { padding-block: var(--v6, 6.5rem) var(--v4, 2.5rem); }
.kategoriekopf h1 { font-size: var(--t-kapitel); max-width: 16ch; margin-bottom: var(--v3); }

.sammlung.zweispaltig-tafeln {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v6) var(--v5);
}
/* In der Kachel steht alles untereinander: Tafel, Titel, Daten. Kein
   Wechselspiel um die Naht — die gibt es auf diesen Seiten nicht. */
.zweispaltig-tafeln .objekt,
.zweispaltig-tafeln .objekt:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v3);
}
.zweispaltig-tafeln .objekt > .tafel,
.zweispaltig-tafeln .objekt > .angaben,
.zweispaltig-tafeln .objekt:nth-of-type(even) > .tafel,
.zweispaltig-tafeln .objekt:nth-of-type(even) > .angaben {
  grid-row: auto; grid-column: 1; padding-top: 0;
}
.zweispaltig-tafeln .bildstapel,
.zweispaltig-tafeln .objekt:nth-of-type(even) .bildstapel { align-items: flex-start; }
.zweispaltig-tafeln .beibilder,
.zweispaltig-tafeln .objekt:nth-of-type(even) .beibilder {
  margin: 0; width: 100%; max-width: 100%;
}
.zweispaltig-tafeln .tafel, .zweispaltig-tafeln .bildstapel { min-width: 0; }
.zweispaltig-tafeln .objekt:nth-of-type(even) :is(h2, h3),
.zweispaltig-tafeln .objekt:nth-of-type(even) .datenblock,
.zweispaltig-tafeln .objekt:nth-of-type(even) .beschreibung,
.zweispaltig-tafeln .objekt:nth-of-type(even) .tafelzeile {
  text-align: left; margin-left: 0;
}
.zweispaltig-tafeln .stich { display: none; }
.zweispaltig-tafeln .tafel .haupt { max-width: 100%; }
.zweispaltig-tafeln .beibilder .bei { width: clamp(6rem, 12vw, 10rem); }

@media (max-width: 48rem) {
  .sammlung.zweispaltig-tafeln { grid-template-columns: minmax(0, 1fr); gap: var(--v6); }
}

/* ============================================================
   Barbara Horvàth — Name, Porträt, Text

   Der Name steht über dem Bild. Bild und Text liegen beide in der
   zweiten Rasterzeile, deshalb beginnen sie auf derselben Höhe —
   ohne einen ausgerechneten Versatz, der bei jeder Schriftgrösse
   und jedem Umbruch neu falsch wäre.

   Das Porträt bekommt dieselbe Behandlung wie eine Objekttafel:
   Karton, Schatten mit Versatz, kein Rahmen. Auf dem dunklen Grund
   liest es sich dadurch als aufgehängte Fotografie.
   ============================================================ */
.sammlerin-raster {
  display: grid;
  gap: 0 var(--v6);
  grid-template-columns: minmax(0, 59fr) minmax(0, 41fr);
  grid-template-rows: auto auto;
  align-items: start;
}
/* Der Name steht über dem Bild, der Text beginnt auf seiner Höhe:
   die Textspalte spannt über beide Zeilen und startet deshalb an der
   Oberkante des Titels. Das Bild sitzt darunter in Zeile zwei. */
.sammlerin-raster > h2              { grid-row: 1; grid-column: 1; margin-bottom: var(--v5); }
.sammlerin-raster > .portraet       { grid-row: 2; grid-column: 1; }
.sammlerin-raster > .sammlerin-text { grid-row: 1 / span 2; grid-column: 2; }

/* Passepartout als Polsterung. Anders als bei den Objekttafeln, wo die
   Bildunterschrift im Karton mitläuft und deshalb unten mehr Rand
   braucht, steht sie hier ausserhalb — das Porträt hat auf allen vier
   Seiten denselben Rand und sitzt genau in der Mitte des Vierecks.
   Prozentwerte beziehen sich auch oben und unten auf die Breite, die
   vier Ränder bleiben also in jeder Fenstergrösse gleich. */
.portraet {
  margin: 0;
}
.portraet .passepartout {
  background: var(--karton);
  padding: 8.5%;
  box-shadow: 0 2px 3px rgba(35,32,30,.09), 0 12px 26px -14px rgba(35,32,30,.5);
}
.portraet img {
  width: 100%; height: auto; display: block;
  box-shadow: none;
}
.portraet figcaption { padding-top: 0; }
.portraet figcaption {
  margin-top: var(--v3);
  font-family: var(--didone); font-style: italic;
  font-size: var(--t-klein);
  color: var(--feld-still);
  max-width: 34ch;
}

@media (max-width: 60rem) {
  /* Einspaltig steht alles untereinander: Name, Bild, Text. */
  .sammlerin-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sammlerin-raster > h2,
  .sammlerin-raster > .portraet,
  .sammlerin-raster > .sammlerin-text { grid-row: auto; grid-column: 1; }
  .sammlerin-raster > .portraet { margin-top: 0; margin-bottom: var(--v4); }
}