/* Jenne Baule-Prinz, Illustration & Design. Designsprache siehe DESIGN.md: Atelierwand, Tusche und Karmin, Familjen Grotesk + Source Serif 4. */
@font-face { font-family: "Familjen Grotesk"; src: url(/assets/fonts/familjen-grotesk-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url(/assets/fonts/familjen-grotesk-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/assets/fonts/source-serif-4-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/assets/fonts/source-serif-4-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --tusche: #14110F; --wand: #FFFFFF; --karmin: #E01850; --karmin-d: #B80F3E; --blatt: #F1F0EE; --linie: #D9D6D2; --grau: #5E5A56;
  --kopf: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif; --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rand: 16px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --s7: 64px; --s8: 104px; --max: 1480px;
}
@media (min-width: 900px) { :root { --rand: 40px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--wand); color: var(--tusche); font: 400 18px/1.6 var(--text); }
body.menue-offen { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s; }
a:hover { color: var(--karmin-d); }
:focus-visible { outline: 3px solid var(--karmin); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; margin: 0 0 var(--s4); }
h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--tusche); color: #fff; padding: 12px 16px; z-index: 100; }
.skip:focus { left: 0; }
[hidden] { display: none !important; }
.knopf { display: inline-block; background: var(--tusche); color: #fff; font: 500 15px/1 var(--kopf); text-transform: uppercase; letter-spacing: .08em; padding: 17px 24px; border: 0; text-decoration: none; cursor: pointer; transition: background .15s; }
.knopf:hover { background: var(--karmin-d); color: #fff; }
.einleitung { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.5; max-width: 38em; }

/* Kopf */
.kopf { position: relative; z-index: 20; }
.kopf-in { max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--rand); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.marke { display: block; width: clamp(190px, 26vw, 340px); }
.marke:hover { color: inherit; }
.hauptnav ul { list-style: none; display: flex; gap: clamp(20px, 3vw, 44px); }
.hauptnav a { font: 500 14px/1 var(--kopf); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.hauptnav a:hover { color: var(--karmin-d); }
.hauptnav a[aria-current] { color: var(--karmin-d); border-bottom-color: var(--karmin); }
.menu-knopf { display: none; background: none; border: 0; font: 500 14px/1 var(--kopf); text-transform: uppercase; letter-spacing: .08em; padding: 14px 0 14px 14px; cursor: pointer; color: inherit; }
@media (max-width: 719.98px) {
  .menu-knopf { display: block; position: relative; z-index: 31; }
  .hauptnav { position: fixed; inset: 0; background: var(--wand); z-index: 30; display: none; padding: 112px var(--rand) var(--s6); }
  .hauptnav.offen { display: block; }
  .hauptnav ul { flex-direction: column; gap: 0; }
  .hauptnav a { display: block; font-size: 2.2rem; letter-spacing: -.01em; text-transform: none; font-weight: 700; padding: 14px 0; border-bottom: 1px solid var(--linie); }
}

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--rand) var(--s8); }

/* Start */
.start-kopf { display: grid; gap: var(--s6); margin: var(--s6) 0 var(--s7); align-items: end; }
@media (min-width: 900px) { .start-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s7); margin-top: var(--s7); } }
.start-kopf h1 { max-width: 14ch; margin-bottom: var(--s5); }
.start-bild { margin: 0; }
.start-bild figcaption { font: 400 14px/1.4 var(--kopf); color: var(--grau); margin-top: var(--s2); }
.register ol { list-style: none; border-top: 1px solid var(--linie); }
.schublade { display: grid; gap: var(--s3) var(--s6); padding: var(--s6) 0; border-bottom: 1px solid var(--linie); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .schublade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "name streifen" "kurz streifen" "mehr streifen"; align-content: start; row-gap: var(--s3); }
  .s-name { grid-area: name; } .s-kurz { grid-area: kurz; } .s-streifen { grid-area: streifen; grid-row: 1 / span 4; } .s-mehr { grid-area: mehr; align-self: start; }
}
.s-name { display: block; text-decoration: none; }
.s-nr { display: block; font: 500 14px/1 var(--kopf); letter-spacing: .08em; color: var(--karmin-d); margin-bottom: var(--s3); }
.s-titel { display: block; font: 700 clamp(2.4rem, 1.2rem + 4.4vw, 5.2rem)/.98 var(--kopf); letter-spacing: -.025em; overflow-wrap: anywhere; }
.s-name:hover .s-titel { color: var(--karmin-d); }
.s-kurz { font-style: italic; color: var(--grau); margin: 0; }
.s-mehr { font: 500 14px/1.3 var(--kopf); text-transform: uppercase; letter-spacing: .06em; }
.s-streifen { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s3); scrollbar-width: thin; scrollbar-color: var(--linie) transparent; height: clamp(230px, 26vw, 360px); box-sizing: content-box; }
.s-streifen a { flex: 0 0 auto; height: 100%; aspect-ratio: var(--r); scroll-snap-align: start; }
.s-streifen img { height: 100%; width: auto; max-width: none; }
.start-news { margin-top: var(--s7); }
.kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.kopfzeile a { font: 500 14px/1.3 var(--kopf); text-transform: uppercase; letter-spacing: .06em; }
.start-kontakt { margin-top: var(--s7); padding: var(--s6); background: var(--blatt); }
.start-kontakt h2 { margin-bottom: var(--s3); }
@media (min-width: 900px) { .start-kontakt { padding: var(--s7) var(--s7); } }

/* Beiträge (Start und News) */
.posts { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .posts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.posts-alle { display: block; column-gap: var(--s5); columns: 1; }
@media (min-width: 640px) { .posts-alle { columns: 2; } }
@media (min-width: 1100px) { .posts-alle { columns: 3; } }
.posts-alle .post { break-inside: avoid; margin-bottom: var(--s6); }
.post h2, .post h3 { font: 700 1.15rem/1.2 var(--kopf); letter-spacing: -.005em; margin: var(--s3) 0 var(--s1); }
.post h2 a, .post h3 a { text-decoration: none; }
.post h2 a:hover, .post h3 a:hover { text-decoration: underline; }
.post-bild { display: block; background: var(--blatt); }
.post-meta { font: 400 14px/1.4 var(--kopf); color: var(--grau); margin: 0; }
.leer-hinweis { color: var(--grau); }
.news-kopf { margin: var(--s6) 0 var(--s6); }
.filter { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); }
.filter button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 0; font: 500 14px/1.2 var(--kopf); text-transform: uppercase; letter-spacing: .06em; color: var(--grau); cursor: pointer; }
.filter button:hover { color: var(--tusche); }
.filter button[aria-pressed="true"] { color: var(--karmin-d); border-bottom-color: var(--karmin); }

/* Kategorie */
.kat { display: grid; gap: var(--s6); margin-top: var(--s5); }
@media (min-width: 1000px) { .kat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7); align-items: start; } .kat-info { position: sticky; top: var(--s5); } }
.kat-nr { font: 500 14px/1 var(--kopf); letter-spacing: .08em; color: var(--karmin-d); margin-bottom: var(--s4); text-transform: uppercase; }
.kat-info h1 { font-size: clamp(2.4rem, 1.2rem + 3.2vw, 4.4rem); }
.kat-text { max-width: 34em; }
.kat-text p:first-child { font-style: italic; }
.ref { font-size: 16px; color: var(--grau); }
.kat-anz { font: 500 14px/1 var(--kopf); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s5); }
.kat-nav { margin-top: var(--s6); border-top: 1px solid var(--linie); padding-top: var(--s4); }
.kat-nav h2 { font: 500 14px/1 var(--kopf); text-transform: uppercase; letter-spacing: .08em; color: var(--grau); margin-bottom: var(--s3); }
.kat-nav ul { list-style: none; }
.kat-nav a { display: inline-block; padding: 4px 0; text-decoration: none; font-family: var(--kopf); font-weight: 500; }
.kat-nav a:hover { color: var(--karmin-d); text-decoration: underline; }
.kat-werke { counter-reset: w; }
.werk { margin: 0 0 var(--s7); counter-increment: w; scroll-margin-top: var(--s5); }
.w-bilder { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.werk-mehr .w-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.werk-mehr .w-erstes { grid-column: 1 / -1; }
.w-bild, .a-bild { display: block; cursor: zoom-in; background: var(--blatt); }
.w-bild img, .a-bild img { width: 100%; height: auto; }
.werk figcaption, .n-bild figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); margin-top: var(--s3); font: 500 15px/1.4 var(--kopf); }
.werk figcaption::before { content: counter(w, decimal-leading-zero); color: var(--karmin-d); font-size: 13px; letter-spacing: .06em; }
.werk figcaption a { text-decoration: none; }
.werk figcaption a:hover { text-decoration: underline; }
.werk figcaption span, .werk figcaption em, .n-bild figcaption { font: italic 400 16px/1.4 var(--text); color: var(--grau); }
.werk figcaption em { margin-left: auto; font-size: 14px; }

/* Einzelne Arbeit und Beitrag */
.arbeit, .beitrag { max-width: 1100px; margin: var(--s5) auto 0; }
.a-kat, .n-meta { font: 500 14px/1 var(--kopf); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s4); }
.a-kat a, .n-meta a { color: var(--karmin-d); text-decoration: none; }
.a-unter { font: italic 400 1.2rem/1.4 var(--text); color: var(--grau); }
.a-bilder, .n-bilder { display: grid; gap: var(--s5); margin: var(--s5) 0 var(--s6); }
.n-bilder.n-mehr { display: block; columns: 1; column-gap: var(--s5); }
@media (min-width: 720px) { .n-bilder.n-mehr { columns: 2; } }
.n-bilder.n-mehr .n-bild { break-inside: avoid; margin-bottom: var(--s5); }
.n-bild { margin: 0; }
.n-bild a { display: block; cursor: zoom-in; background: var(--blatt); }
.a-text, .n-text { max-width: 36em; }
.a-link { font: 500 15px/1.4 var(--kopf); }
.n-kat { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); font: 500 14px/1 var(--kopf); }
.n-kat a { color: var(--grau); }
.a-nav { display: grid; gap: var(--s4); margin-top: var(--s7); border-top: 1px solid var(--linie); padding-top: var(--s5); }
@media (min-width: 720px) { .a-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } .a-nav > :nth-child(2) { text-align: center; } .a-nav > :nth-child(3) { text-align: right; } }
.a-nav a { text-decoration: none; font: 700 1.05rem/1.25 var(--kopf); }
.a-nav a span { display: block; font: 500 12px/1 var(--kopf); text-transform: uppercase; letter-spacing: .08em; color: var(--karmin-d); margin-bottom: var(--s2); }
.a-nav a:hover { text-decoration: underline; }

/* About */
.about { display: grid; gap: var(--s6) var(--s7); margin-top: var(--s5); }
@media (min-width: 1000px) {
  .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "kopf bild" "cv bild" "shop shop" "quali quali" "refs refs"; align-items: start; }
  .ab-kopf { grid-area: kopf; } .ab-bild { grid-area: bild; } .ab-cv { grid-area: cv; } .ab-shop { grid-area: shop; } .ab-quali { grid-area: quali; } .ab-refs { grid-area: refs; }
}
.ab-bild { margin: 0; } .ab-bild figcaption { font: 400 14px/1.4 var(--kopf); color: var(--grau); margin-top: var(--s2); }
.cv-z { display: grid; gap: var(--s1) var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--linie); }
@media (min-width: 640px) { .cv-z { grid-template-columns: 11rem minmax(0, 1fr); } }
.cv-z dt { font: 500 14px/1.6 var(--kopf); letter-spacing: .04em; color: var(--karmin-d); }
.cv-z dd { margin: 0; }
.cv-z:last-child { border-bottom: 1px solid var(--linie); }
.ab-shop { display: grid; gap: var(--s5) var(--s7); padding: var(--s6); background: var(--tusche); color: #fff; }
@media (min-width: 900px) { .ab-shop { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); padding: var(--s7); } .ab-shop h2, .ab-shop .ab-datum, .ab-shop p, .ab-shop .knopf { grid-column: 1; } .ab-shop figure { grid-column: 2; grid-row: 1 / span 5; align-self: center; } }
.ab-shop a { color: #fff; } .ab-shop .knopf { background: var(--karmin); } .ab-shop .knopf:hover { background: #fff; color: var(--tusche); }
.ab-datum { font: 500 14px/1 var(--kopf); letter-spacing: .08em; color: #FF8FAE; margin: 0; }
.ab-shop figure { margin: 0; }
.ab-quali p { max-width: 40em; font-size: 1.15rem; }
.ref-raster { display: grid; gap: var(--s5) var(--s7); }
@media (min-width: 900px) { .ref-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref-block { scroll-margin-top: var(--s5); }
.ref-block h3 { font: 500 14px/1.2 var(--kopf); text-transform: uppercase; letter-spacing: .08em; color: var(--karmin-d); }
.ref-block p { font-size: 16px; line-height: 1.7; }
.shop-zeile { margin-top: var(--s5); font: 500 15px/1.4 var(--kopf); }

/* Kontakt */
.k-kopf { margin-top: var(--s5); }
.k-spalten { display: grid; gap: var(--s7); margin-top: var(--s5); }
@media (min-width: 1000px) { .k-spalten { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start; } }
.k-adresse address { font-style: normal; font-size: 1.4rem; line-height: 1.45; margin-bottom: var(--s5); }
.k-adresse a { font-weight: 600; }
.k-partner { margin-top: var(--s7); }
.k-partner h2 { font-size: 1.5rem; }
.k-partner ul { list-style: none; border-top: 1px solid var(--linie); }
.k-partner li { padding: var(--s4) 0; border-bottom: 1px solid var(--linie); font-size: 16px; line-height: 1.55; }
.k-form { background: var(--blatt); padding: var(--s5); }
@media (min-width: 900px) { .k-form { padding: var(--s6); } }
.feld { margin-bottom: var(--s5); }
.feld label { display: block; font: 500 14px/1.3 var(--kopf); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s2); }
.feld label span { text-transform: none; letter-spacing: 0; color: var(--grau); font-weight: 400; }
.feld input, .feld textarea { width: 100%; background: #fff; border: 0; border-bottom: 2px solid var(--tusche); border-radius: 0; padding: 14px 12px; font: 400 18px/1.4 var(--text); color: var(--tusche); }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--karmin); outline-offset: 0; }
.feld.ungueltig input, .feld.ungueltig textarea { border-bottom-color: var(--karmin); background: #FFF3F6; }
.feld-fall { position: absolute; left: -9999px; }
.hinweis { font-size: 15px; color: var(--grau); }
.form-status { margin: var(--s4) 0 0; min-height: 1.5em; font-size: 16px; }
.form-status.fehler { color: var(--karmin-d); font-weight: 600; }
.formular-erfolg { padding: var(--s5) 0; }

/* Recht */
.recht { max-width: 46em; margin-top: var(--s6); }
.recht h2 { font-size: 1.5rem; margin-top: var(--s6); }
.recht p, .recht li { font-size: 17px; }
.recht ul { padding-left: 1.2em; margin-bottom: var(--s4); }
.recht li { margin-bottom: var(--s2); }

/* Fuß */
.fuss { background: var(--tusche); color: #fff; }
.fuss-in { max-width: var(--max); margin: 0 auto; padding: var(--s7) var(--rand) var(--s5); display: grid; gap: var(--s5) var(--s6); }
@media (min-width: 900px) { .fuss-in { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); align-items: start; } .fuss-c { grid-column: 1 / -1; } }
.fuss-marke { display: block; width: min(100%, 380px); }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: #FF8FAE; text-decoration: underline; }
.fuss address { font-style: normal; font-size: 16px; line-height: 1.7; }
.fuss ul { list-style: none; font: 500 15px/1.9 var(--kopf); }
.fuss-c { font: 400 13px/1.4 var(--kopf); color: #B9B4AE; margin: var(--s5) 0 0; padding-top: var(--s5); border-top: 1px solid #3a3531; }

/* Lichtkasten */
.lichtkasten { position: fixed; inset: 0; z-index: 90; background: rgba(20, 17, 15, .97); display: flex; align-items: center; justify-content: center; padding: 56px 16px 72px; animation: ein .15s ease-out; }
@keyframes ein { from { opacity: 0; } to { opacity: 1; } }
.lichtkasten img { max-width: min(96vw, 1800px); max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; }
.lb-text { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 16px 72px; text-align: center; color: #fff; font: 500 15px/1.4 var(--kopf); }
.lb-text small { display: block; color: #B9B4AE; font-weight: 400; margin-top: 2px; }
.lichtkasten button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; width: 56px; height: 56px; }
.lichtkasten button:hover { color: var(--karmin); }
.lb-zu { top: 8px; right: 8px; font-size: 40px; } .lb-zurueck { left: 4px; top: 50%; transform: translateY(-50%); } .lb-vor { right: 4px; top: 50%; transform: translateY(-50%); }
@media (max-width: 719.98px) { .lb-zurueck, .lb-vor { top: auto; bottom: 8px; transform: none; } }
@media print { .kopf, .fuss, .lichtkasten { display: none; } }