/* Schnittbogen: Musterpapier mit Zentimeterraster, jeder Raum ist ein Schnittteil mit Naht, Knipsen und Fadenlauf.
   Hell = Seidenpapier mit Kopierrad-Blau und Schneiderkreide-Rot, dunkel = Kreide auf dunklem Stoff. */
@font-face { font-family: "TJ Zier"; src: url("/schrift/tj-zier.woff2") format("woff2"); font-display: swap; }

:root {
  --papier: #fbfbf7;
  --teil: #fefefb;
  --raster: rgba(31, 95, 168, .10);
  --raster-fein: rgba(31, 95, 168, .045);
  --tinte: #17191c;
  --grau: #5a5f66;
  --linie: #c9ccd0;
  --kreide: #c4322a;
  --rad: #1f5fa8;
  --wasser: #dbe7f1;
  --zier: "TJ Zier", "Avenir Next", "Avenir", system-ui, sans-serif;
  --text: "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cm: 40px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #1a1c20; --teil: #202328; --raster: rgba(236, 232, 222, .07); --raster-fein: rgba(236, 232, 222, .03);
    --tinte: #ece8de; --grau: #a4a49c; --linie: #3a3e45; --kreide: #ff8f80; --rad: #8db8ff; --wasser: #22303d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #1a1c20; --teil: #202328; --raster: rgba(236, 232, 222, .07); --raster-fein: rgba(236, 232, 222, .03);
  --tinte: #ece8de; --grau: #a4a49c; --linie: #3a3e45; --kreide: #ff8f80; --rad: #8db8ff; --wasser: #22303d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinte); font: 17px/1.55 var(--text);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px),
    linear-gradient(var(--raster-fein) 1px, transparent 1px), linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px);
  background-size: var(--cm) var(--cm), var(--cm) var(--cm), calc(var(--cm) / 5) calc(var(--cm) / 5), calc(var(--cm) / 5) calc(var(--cm) / 5);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; text-decoration-color: var(--kreide); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--kreide); }
:focus-visible { outline: 2px solid var(--rad); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { text-wrap: balance; line-height: 1.15; margin: 0; }
p { margin: 0; }
.bogen { max-width: 1160px; margin: 0 auto; padding-block: 28px 64px; display: grid; gap: 40px; }

.raum { display: grid; gap: 40px; min-width: 0; }

/* Kopf */
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; }
.name { font: 400 clamp(26px, 4vw, 36px)/1 var(--zier); text-decoration: none; letter-spacing: .01em; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 13px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.kopf nav a { text-decoration: none; color: var(--grau); }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--kreide); }
.sprache { font: 500 13px/1 var(--mono); color: var(--grau); }

/* Schild (Atelier offen/geschlossen) */
.schild { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.3 var(--mono); color: var(--grau); text-decoration: none; }
.schild b { font: 400 15px/1 var(--zier); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px 5px; border: 1.5px solid currentColor; border-radius: 3px; color: var(--grau); }
.schild.offen b { color: var(--kreide); }
.schild.offen b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 2px; }

/* Schnittteil */
.teil {
  position: relative; background: var(--teil); border: 1.5px solid var(--tinte);
  padding: 30px 28px 26px; min-width: 0;
}
.teil::before { /* Nahtzugabe */
  content: ""; position: absolute; inset: 10px; border: 1px dashed var(--grau); pointer-events: none; opacity: .55;
}
.teil > * { position: relative; }
.knips { position: absolute; width: 0; height: 0; border: 7px solid transparent; }
.knips.o { top: -1.5px; border-top-color: var(--tinte); }
.knips.u { bottom: -1.5px; border-bottom-color: var(--tinte); }
.knips.l { left: -1.5px; border-left-color: var(--tinte); }
.knips.r { right: -1.5px; border-right-color: var(--tinte); }
.etikett { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kreide); }
.fadenlauf { position: absolute; right: 22px; top: 34px; bottom: 30px; width: 10px; color: var(--rad); opacity: .7; }
.fadenlauf svg { width: 10px; height: 100%; display: block; overflow: visible; }

/* Bogen auf der Startseite */
.vorspann { display: grid; gap: 14px; max-width: 64ch; }
.vorspann h1 { font: 400 clamp(36px, 6.4vw, 72px)/1.02 var(--zier); }
.vorspann p { font-size: 19px; color: var(--grau); }
.teile { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.teile .teil { grid-column: span 4; display: grid; gap: 10px; align-content: start; text-decoration: none; transition: transform .2s; }
.teile .teil.breit { grid-column: span 8; }

.teile a.teil:hover { transform: rotate(-.5deg); color: inherit; }
.teile a.teil:hover h2 { color: var(--kreide); }
.teile h2 { font: 400 28px/1.1 var(--zier); padding-right: 24px; }
.teile p { color: var(--grau); padding-right: 24px; }
.probe { margin-top: 8px; padding-right: 24px; }
.probe .zahl { font: 400 54px/1 var(--zier); color: var(--tinte); }
.probe .klein { font: 13px/1.4 var(--mono); color: var(--grau); }
@media (max-width: 900px) { .teile .teil, .teile .teil.breit,  }
@media (max-width: 600px) { .teile { grid-template-columns: 1fr; } .teile .teil, .teile .teil.breit, .teile .teil.halb { grid-column: auto; } }

.andere { display: flex; flex-wrap: wrap; gap: 10px 28px; font: 14px/1.5 var(--mono); color: var(--grau); }
.andere a { color: var(--tinte); }

/* Raumseiten */
.raumkopf { display: grid; gap: 12px; max-width: 70ch; }
.raumkopf h1 { font: 400 clamp(34px, 5.6vw, 60px)/1.05 var(--zier); }
.raumkopf p { color: var(--grau); font-size: 18px; }
.lauf { max-width: 66ch; display: grid; gap: 14px; }
.klein { font: 13px/1.5 var(--mono); color: var(--grau); }

/* Zähler: Massbänder */
.masse { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.mass { display: grid; gap: 8px; }
.mass .zahl { font: 400 clamp(48px, 7vw, 76px)/1 var(--zier); font-variant-numeric: tabular-nums; }
.mass .was { font-weight: 600; }
.band { height: 22px; border: 1.5px solid var(--tinte); border-left-width: 3px; position: relative; overflow: hidden; background: var(--teil); }
.band i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--kreide) 0 1.5px, transparent 1.5px 8px); opacity: .55; }
.band i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--kreide); }

/* Jahrbuch */
.regal { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding: 12px 4px 0; border-bottom: 3px solid var(--tinte); }
.ruecken {
  flex: 0 0 auto; width: 54px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  border: 1.5px solid var(--tinte); border-bottom: 0; background: var(--teil); text-decoration: none; padding: 10px 0;
  transition: transform .2s;
}
.ruecken:hover { transform: translateY(-8px); color: var(--kreide); }
.ruecken b { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 26px/1 var(--zier); }
.ruecken span { font: 11px/1 var(--mono); color: var(--grau); }
.buch { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 520px); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border: 1.5px solid var(--tinte); background: var(--teil); }
.seite { scroll-snap-align: start; padding: 32px 30px 26px; border-right: 1px dashed var(--linie); display: grid; gap: 16px; align-content: start; height: min(680px, 82vh); overflow-y: auto; min-width: 0; }
.seite h2 { font: 400 34px/1.05 var(--zier); }
.seite .nr { font: 12px/1 var(--mono); color: var(--grau); }
.deckel { background: var(--tinte); color: var(--papier); align-content: space-between; }
.deckel h2 { font-size: clamp(90px, 16vw, 150px); }
.deckel .klein { color: var(--papier); opacity: .75; }
.eintrag { display: grid; gap: 6px; }
.eintrag img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border: 1px solid var(--linie); }
.eintrag h3 { font-size: 17px; font-weight: 600; }
.buchnav { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.knopf { font: 500 14px/1 var(--text); color: var(--tinte); background: var(--teil); border: 1.5px solid var(--tinte); border-radius: 999px; padding: 10px 16px; cursor: pointer; text-decoration: none; }
.knopf:hover { color: var(--kreide); border-color: var(--kreide); }
.knopf.voll { background: var(--tinte); color: var(--papier); }
.knopf.voll:hover { background: var(--kreide); color: var(--papier); }

/* Namen */
.vollname { display: flex; flex-wrap: wrap; gap: 0 .06em; font: 400 clamp(38px, 7.5vw, 92px)/1.1 var(--zier); }
.vollname span { transition: color .2s, opacity .2s; position: relative; }
.vollname .lu { width: .3em; }
.vollname.zeigt span { opacity: .18; }
.vollname.zeigt span.an { opacity: 1; color: var(--kreide); }
.vollname span sup { position: absolute; left: 50%; top: -.1em; transform: translateX(-50%); font: 600 12px/1 var(--mono); color: var(--kreide); opacity: 0; }
.vollname.zeigt span.an sup { opacity: 1; }
.namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.namen a.teil { text-decoration: none; }
.namen a.teil:hover h2 { color: var(--kreide); }
.namen a.teil .klein { text-decoration: underline; text-decoration-color: var(--kreide); }
.namen .teil { display: grid; gap: 12px; align-content: start; cursor: default; }
.namen .zeichen { height: 64px; display: flex; align-items: center; color: var(--tinte); }
.namen .zeichen img, .namen .zeichen svg { height: 56px; width: auto; max-width: 140px; }
.namen h2 { font: 400 32px/1 var(--zier); }
.mini { font: 500 15px/1 var(--mono); letter-spacing: .12em; color: var(--linie); word-break: break-all; }
.mini b { color: var(--kreide); font-weight: 600; }

/* Karte */
.kartenrahmen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .kartenrahmen { grid-template-columns: 1fr; } }
.kartenrahmen > svg { position: sticky; top: 16px; }
.karte { width: 100%; height: auto; display: block; border: 1.5px solid var(--tinte); background: var(--teil); }
.karte .wasser { fill: var(--wasser); }
.karte .ufer { stroke: var(--rad); stroke-width: 1.4; fill: none; }
.karte .wl { stroke: var(--rad); fill: none; }
.karte .punkt circle { fill: var(--kreide); stroke: var(--teil); stroke-width: 3; }
.karte .punkt text, .karte .rand text { font: 600 22px var(--text); fill: var(--tinte); paint-order: stroke; stroke: var(--teil); stroke-width: 6px; }
.karte .punkt .nr { font: 700 15px var(--mono); fill: var(--teil); stroke: none; }
.karte .rand path { stroke: var(--kreide); stroke-width: 2; fill: none; }
.karte .netz { stroke: var(--raster); stroke-width: 1; }
.orte { display: grid; gap: 18px; counter-reset: ort; }
.ort { display: grid; gap: 6px; }
.ort h3 { font-size: 17px; display: flex; gap: 10px; align-items: baseline; }
.ort h3 i { font: 700 13px/1 var(--mono); font-style: normal; color: var(--teil); background: var(--kreide); border-radius: 50%; width: 24px; height: 24px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.ort ul { margin: 0; padding-left: 34px; display: grid; gap: 3px; font-size: 15px; }

/* Atelier */
.tafel { display: grid; justify-items: start; gap: 18px; }
.tafel .gross { font: 400 clamp(56px, 12vw, 132px)/1 var(--zier); letter-spacing: .04em; text-transform: uppercase; padding: 18px 28px 12px; border: 4px solid currentColor; border-radius: 8px; color: var(--grau); }
.tafel.offen .gross { color: var(--kreide); }
.tafel .woran { font-size: 22px; }

/* Briefkasten */
.postkarte { aspect-ratio: 148 / 105; max-width: 760px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; background: var(--teil); border: 1.5px solid var(--tinte); padding: 6% 5%; gap: 6%; position: relative; box-shadow: 6px 6px 0 var(--linie); }
.postkarte .links { display: grid; align-content: space-between; gap: 12px; border-right: 1.5px solid var(--linie); padding-right: 6%; font-size: clamp(13px, 1.9vw, 17px); }
.postkarte .links b { font: 400 clamp(20px, 3.4vw, 32px)/1.05 var(--zier); }
.postkarte .rechts { display: grid; align-content: end; gap: 6px; font: clamp(14px, 2.3vw, 22px)/1.5 var(--text); }
.postkarte .rechts div { border-bottom: 1.5px solid var(--linie); padding-bottom: 2px; }
.marke { position: absolute; top: 6%; right: 5%; width: 16%; aspect-ratio: 4 / 5; border: 2px dashed var(--kreide); display: grid; place-items: center; font: 600 clamp(9px, 1.4vw, 12px)/1.2 var(--mono); color: var(--kreide); text-align: center; padding: 4px; }
@media (max-width: 520px) { .postkarte { aspect-ratio: auto; grid-template-columns: 1fr; } .postkarte .links { border-right: 0; border-bottom: 1.5px solid var(--linie); padding: 0 0 14px; } .marke { position: static; width: 80px; justify-self: end; } }
.pinnwand { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.pinnwand figure { margin: 0; background: var(--teil); border: 1.5px solid var(--tinte); padding: 10px; display: grid; gap: 8px; }
.pinnwand figure:nth-child(odd) { transform: rotate(-1.2deg); }
.pinnwand figure:nth-child(even) { transform: rotate(.9deg); }
.leer { border: 1.5px dashed var(--grau); padding: 28px; color: var(--grau); max-width: 60ch; }

/* Collage */
.collage { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .collage { grid-template-columns: 1fr; } }
.collage canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; border: 1.5px solid var(--tinte); background: var(--teil); display: block; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hören */
.hoeren { display: grid; gap: 22px; max-width: 70ch; }
.hoeren .text { font: 400 clamp(20px, 2.6vw, 26px)/1.55 var(--text); }
.hoeren .text span { transition: color .12s; color: var(--grau); opacity: .55; }
.hoeren .text span.war { opacity: 1; color: var(--tinte); }
.hoeren .text span.jetzt { opacity: 1; color: var(--kreide); }
.welle { display: flex; align-items: center; gap: 3px; height: 60px; }
.welle i { flex: 1; background: var(--linie); border-radius: 2px; }

/* Fuss */
.fuss { display: grid; gap: 10px; border-top: 1.5px solid var(--tinte); padding-top: 18px; font: 13px/1.6 var(--mono); color: var(--grau); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }