/* Juliane Sachse Design. Siehe DESIGN.md: weißer Grund, Tinte, Barlow Condensed + Source Serif 4, Petrol nur für Links und Fokus. */
@font-face { font-family: "Barlow Condensed"; src: url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600 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-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 700; font-display: swap; }
:root {
  --papier: #fff; --tinte: #15191B; --schiefer: #4B5559; --flaeche: #F1F3F3; --linie: #D4D9DA; --petrol: #00949F; --petrol-d: #00717A;
  --kopf: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rand: clamp(16px, 4vw, 56px); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 56px; --s7: 96px; --s8: 160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 18px/1.65 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; background: var(--flaeche); outline: 1px solid rgba(21, 25, 27, .08); outline-offset: -1px; }
.marke img, .fuss-marke img { background: none; outline: 0; }
a { color: var(--petrol-d); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
p { margin: 0 0 1.1em; max-width: 62ch; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 600; color: var(--tinte); margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.05; margin-bottom: var(--s4); }
h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); line-height: 1.1; margin-bottom: var(--s3); }
.h-gross { font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.6rem); line-height: .98; letter-spacing: -.005em; }
.h-arbeit { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem); }
.h-mittel { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); }
.klein { font-size: .9rem; color: var(--schiefer); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tinte); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--rand); }
.bn { font-family: var(--kopf); font-weight: 600; letter-spacing: .02em; color: var(--tinte); }
.vorzeile { font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; color: var(--schiefer); margin-bottom: var(--s4); }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); background: var(--papier); }
.kopf-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 76px; }
.marke { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--tinte); }
.marke img { width: 44px; height: 44px; }
.marke-wort { font-family: var(--kopf); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 1.4rem; line-height: 1; }
.hauptnav ul { display: flex; gap: var(--s6); list-style: none; margin: 0; padding: 0; }
.hauptnav a { font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1.15rem; color: var(--tinte); text-decoration: none; padding: 8px 0; position: relative; }
.hauptnav a:hover { color: var(--petrol-d); }
.hauptnav a[aria-current] { font-weight: 600; }
.hauptnav a[aria-current]::before { content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--petrol); }
.menu-knopf { display: none; font: 500 1.15rem var(--kopf); text-transform: uppercase; letter-spacing: .08em; background: none; border: 1px solid var(--tinte); padding: 8px 16px; color: var(--tinte); min-height: 44px; cursor: pointer; }
.krumen { padding-block: var(--s4) 0; font-family: var(--kopf); font-weight: 500; font-size: 1rem; letter-spacing: .04em; color: var(--schiefer); }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.krumen li + li::before { content: "›"; margin: 0 10px; color: var(--linie); }
.krumen a { color: var(--schiefer); }

/* Start */
.held { padding-block: var(--s6) var(--s7); }
.held h1 { max-width: 14em; margin-bottom: var(--s6); }
.held-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 24px; align-items: start; }
.held-text { grid-column: 1 / span 5; }
.held-bild { grid-column: 6 / -1; margin: 0; }
.held-bild img { width: 100%; }
.held-bild figcaption, .portrait figcaption, .letzt-bild figcaption { font-family: var(--kopf); font-weight: 500; font-size: 1.05rem; color: var(--schiefer); margin-top: var(--s2); }
.held-bild figcaption a { color: var(--schiefer); }
.aufruf-klein { margin-top: var(--s5); }
.unterschrift { margin-top: var(--s5); color: var(--schiefer); font-size: 1rem; }
.kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.kopfzeile h2 { margin: 0; }
.werkwand { padding-bottom: var(--s7); }
.kacheln { display: block; }
.kachel-zeile { list-style: none; display: flex; gap: 24px; margin: 0 0 var(--s6); padding: 0; max-width: calc(var(--s) * 360px); }
.kachel { flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.kachel a { display: block; text-decoration: none; color: var(--tinte); }
.kachel img { width: 100%; }
.kachel-text { display: block; margin-top: var(--s3); }
.kachel .nr { font-family: var(--kopf); font-weight: 600; font-size: 1.15rem; margin-right: 10px; letter-spacing: .02em; }
.kachel-name { font-family: var(--kopf); font-weight: 500; font-size: 1.5rem; line-height: 1.1; }
.kachel-meta { display: block; font-size: .95rem; line-height: 1.4; color: var(--schiefer); margin-top: 2px; }
.kachel a:hover .kachel-name { color: var(--petrol-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kachel a:hover .nr { color: var(--petrol-d); }
.shop { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 24px; align-items: center; padding-block: 0 var(--s7); }
.shop-bild { grid-column: 1 / span 5; margin: 0; }
.shop-bild img { width: 100%; }
.shop-text { grid-column: 7 / span 6; }
.shop-text h2 { margin-bottom: var(--s4); }
.video { padding-bottom: var(--s7); }
.video-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 24px; align-items: start; }
.einbettung-video { grid-column: 1 / span 7; }
.video-text { grid-column: 9 / span 4; }
.einbettung-video { display: grid; }
.einbettung-video img { grid-area: 1 / 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.einbettung-video .abspielen { grid-area: 1 / 1; align-self: end; justify-self: start; margin: var(--s4); }
.einbettung-hinweis { grid-area: 2 / 1; font-size: .9rem; color: var(--schiefer); margin: var(--s2) 0 0; }
.einbettung iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; grid-area: 1 / 1; }
.einbettung-yumpu iframe { aspect-ratio: 16 / 11; max-height: 80vh; }
.einbettung-yumpu .einbettung-in { background: var(--flaeche); padding: var(--s5); max-width: 40rem; }
.einbettung-yumpu { margin: 0 0 var(--s5); }
.abspielen, .knopf { display: inline-block; font: 600 1.15rem var(--kopf); text-transform: uppercase; letter-spacing: .08em; background: var(--petrol-d); color: #fff; border: 2px solid var(--petrol-d); border-radius: 0; padding: 12px 26px; text-decoration: none; cursor: pointer; min-height: 48px; line-height: 1.2; }
.abspielen:hover, .knopf:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.textlink { font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; color: var(--petrol-d); }
.aufruf { padding-block: 0 var(--s7); }
.aufruf-gross { font-family: var(--kopf); font-weight: 600; font-size: clamp(2rem, 1rem + 3.2vw, 4rem); line-height: 1.02; max-width: 17em; margin-bottom: var(--s5); }
.aufruf-tel { margin-left: var(--s3); color: var(--schiefer); }
.aufruf-klein-flaeche { padding-top: var(--s5); }

/* Seitenköpfe, Referenzen */
.seitenkopf { padding-block: var(--s6) var(--s5); }
.seitenkopf h1 { max-width: 16em; }
.seitenkopf-text { margin-top: var(--s5); }
.seitenkopf-text p { max-width: 56ch; }
.arbeit-kopf { padding-block: var(--s5) var(--s5); }
.tafelzeile { font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1.1rem; margin-bottom: var(--s3); color: var(--schiefer); max-width: none; }
.tafelzeile .bn { font-weight: 600; margin-right: var(--s4); }
.arbeit-kopf h1 { max-width: 18em; }
.lead { margin-top: var(--s5); font-size: 1.25rem; line-height: 1.5; max-width: 40ch; }
.abschnitt { margin-bottom: var(--s6); }
.abschnitt-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s4) 24px; margin-bottom: var(--s5); }
.a-text { grid-column: 1 / span 7; }
.a-credits { grid-column: 9 / span 4; }
.mitwirkende { margin: 0; }
.mitwirkende div { margin-bottom: var(--s3); }
.mitwirkende dt { font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--schiefer); }
.mitwirkende dd { margin: 0; font-size: .95rem; line-height: 1.45; }
.bz-wand { margin-block: var(--s4) var(--s5); }
.bz-zeile { display: flex; gap: 12px; margin-bottom: 14px; max-width: calc(var(--s) * 620px); }
.bz { flex: var(--ar) 1 0; margin: 0; min-width: 0; }
.bz-link { display: block; cursor: zoom-in; }
.bz img { width: 100%; }
.bz figcaption { font-family: var(--kopf); font-weight: 500; font-size: 1rem; letter-spacing: .02em; color: var(--schiefer); padding-top: 6px; line-height: 1.25; }
.bz figcaption .bn { margin-right: 6px; }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding-block: var(--s5) var(--s6); margin-top: var(--s6); border-top: 1px solid var(--linie); }
.blaettern-zu { text-decoration: none; color: var(--tinte); display: block; }
.blaettern-nach { text-align: right; }
.blaettern .etikett { display: block; font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; color: var(--schiefer); }
.blaettern .name { font-family: var(--kopf); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); line-height: 1.05; }
.blaettern-zu:hover .name { color: var(--petrol-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* Über mich */
.ueber-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 24px; padding-bottom: var(--s7); align-items: start; }
.portrait { grid-column: 1 / span 4; margin: 0; }
.portrait img { width: 100%; max-width: 480px; background: none; outline: 0; }
.ueber-text { grid-column: 6 / span 7; }
.ueber-text h2 { margin-top: var(--s6); }
.ueber-text > p:first-child { font-size: 1.25rem; line-height: 1.5; }
.netz { padding-bottom: var(--s7); }
.netz-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 24px; }
.netz-raster > div { grid-column: 1 / span 6; }
.netz-raster > ul { grid-column: 8 / span 5; }
.punkte { list-style: none; margin: 0 0 1.2em; padding: 0; }
.punkte li { position: relative; padding-left: 22px; margin-bottom: .35em; }
.punkte li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--petrol); }
.punkte-gross li { font-family: var(--kopf); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.2; margin-bottom: .45em; padding-left: 26px; }
.punkte-gross li::before { top: .5em; }
.letzt { padding-bottom: var(--s7); }
.letzt-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 24px; align-items: start; }
.letzt-raster > div { grid-column: 1 / span 5; }
.letzt-bild { grid-column: 7 / span 5; margin: 0; }
.letzt-bild img { width: 100%; }

/* Kontakt, Rechtstexte */
.kontakt-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s6) 24px; padding-bottom: var(--s7); align-items: start; }
.kontakt-text { grid-column: 1 / span 5; }
.kontakt-text address { font-style: normal; margin-top: var(--s5); line-height: 1.7; }
.formular { grid-column: 7 / span 6; max-width: 640px; position: relative; }
.feld { margin-bottom: var(--s4); }
.feld label { display: block; font-family: var(--kopf); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; margin-bottom: 6px; }
.feld .opt { text-transform: none; letter-spacing: 0; color: var(--schiefer); font-family: var(--text); font-size: .9rem; }
.feld input, .feld textarea { width: 100%; font: 400 1.05rem/1.5 var(--text); color: var(--tinte); background: #fff; border: 1px solid #8A9396; border-radius: 0; padding: 12px 14px; min-height: 48px; }
.feld textarea { resize: vertical; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #B3261E; box-shadow: inset 0 0 0 1px #B3261E; }
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: var(--s4) 0 0; min-height: 1.5em; }
.form-status.fehler { color: #B3261E; }
.formular-erfolg { background: var(--flaeche); padding: var(--s5); }
.formular-erfolg h2 { font-size: 2rem; margin-bottom: var(--s3); }
.rechtstext { padding-bottom: var(--s7); max-width: 56rem; margin-left: 0; }
.rechtstext h2 { font-size: 1.7rem; margin-top: var(--s5); margin-bottom: var(--s3); }
.rechtstext p { max-width: 70ch; }
.sitemap { padding-bottom: var(--s7); }
.sitemap ul { list-style: none; padding-left: var(--s4); margin: 4px 0; }
.sitemap > ul { padding-left: 0; }
.sitemap li { margin: 4px 0; }

/* Fuß */
.fuss { background: var(--tinte); color: #E7EBEC; padding-block: var(--s6) var(--s5); }
.fuss a { color: #fff; }
.fuss a:hover { color: #fff; text-decoration-thickness: 2px; }
.fuss-raster { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr; gap: var(--s5) var(--s6); }
.fuss-marke img { margin-bottom: var(--s3); }
.fuss-name { font-family: var(--kopf); font-weight: 600; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.fuss-claim { font-family: var(--kopf); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 1.05rem; color: #B7C0C3; margin: 4px 0 0; }
.fuss-h { font-family: var(--kopf); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; color: #B7C0C3; margin-bottom: var(--s3); }
.fuss p { font-size: 1rem; line-height: 1.6; }
.fuss-refs ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s5); }
.fuss-refs li { break-inside: avoid; margin-bottom: 4px; font-size: 1rem; line-height: 1.35; }
.fuss-unten { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; border-top: 1px solid #39434A; margin-top: var(--s6); padding-top: var(--s4); font-size: .95rem; }
.fuss-unten ul { list-style: none; display: flex; gap: var(--s4); flex-wrap: wrap; margin: 0; padding: 0; }
.fuss-unten p { margin: 0; color: #B7C0C3; }

/* Großansicht */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(21, 25, 27, .97); display: grid; place-items: center; padding: 56px 16px 64px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(96vw, 2000px); max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; background: #fff; outline: 0; }
.lb-text { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; color: #fff; font-family: var(--kopf); font-weight: 500; letter-spacing: .03em; font-size: 1.1rem; max-width: none; text-align: center; }
.lightbox button { position: absolute; background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; width: 48px; height: 48px; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 4px; }
.lightbox button:hover { background: #fff; color: var(--tinte); }
.lb-zu { top: 8px; right: 8px; }
.lb-zurueck { left: 8px; top: 50%; margin-top: -24px; }
.lb-vor { right: 8px; top: 50%; margin-top: -24px; }

/* Responsiv */
@media (max-width: 999.98px) {
  .held-text, .held-bild { grid-column: 1 / -1; }
  .held-bild { order: -1; }
  .shop-bild, .shop-text { grid-column: 1 / -1; }
  .einbettung-video, .video-text { grid-column: 1 / -1; }
  .a-text, .a-credits { grid-column: 1 / -1; }
  .portrait, .ueber-text { grid-column: 1 / -1; }
  .netz-raster > div, .netz-raster > ul { grid-column: 1 / -1; }
  .letzt-raster > div, .letzt-bild { grid-column: 1 / -1; }
  .kontakt-text, .formular { grid-column: 1 / -1; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-refs { grid-column: 1 / -1; }
}
@media (max-width: 759.98px) {
  .menu-knopf { display: inline-flex; align-items: center; }
  .kopf-in { flex-wrap: wrap; }
  .hauptnav { display: none; width: 100%; order: 3; border-top: 1px solid var(--linie); padding: var(--s3) 0; }
  .hauptnav.offen { display: block; }
  .hauptnav ul { flex-direction: column; gap: 0; }
  .hauptnav a { display: block; padding: 14px 0; font-size: 1.4rem; }
  .hauptnav a[aria-current]::before { left: -14px; }
  .marke-wort { font-size: 1.2rem; }
  .held { padding-block: var(--s5) var(--s6); }
  .kachel-zeile { flex-direction: column; max-width: none; gap: var(--s5); margin-bottom: var(--s5); }
  .kachel { flex: none; width: 100%; }
  .bz-zeile { flex-direction: column; max-width: none; }
  .bz { flex: none; width: 100%; }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern-nach { text-align: left; }
  .fuss-raster { grid-template-columns: 1fr; }
  .fuss-refs ul { columns: 1; }
  .aufruf-tel { display: block; margin: var(--s3) 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .kachel .kachel-name, .blaettern .name, .knopf { transition: color .15s, background-color .15s; }
}
@media print { .kopf, .fuss, .menu-knopf, .lightbox { display: none; } body { font-size: 11pt; } }
/* Polish: Tippflächen mindestens 44 px, Hover nur wo es ihn gibt */
.textlink { display: inline-block; padding-block: 10px; }
.fuss-unten a, .fuss-refs a, .krumen a { display: inline-block; padding-block: 8px; }
.fuss-refs li { margin-bottom: 0; }
@media (hover: none) { .kachel a:hover .kachel-name { text-decoration: none; } }