/* Werkverzeichnis – Joel Reinhard. Schriften: Zodiak + Switzer (Fontshare, ITF Free Font License), unverändert selbst gehostet. */
@font-face{font-family:"Zodiak";src:url("fonts/Zodiak-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("fonts/Switzer-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --grund:#f6f7f9; --flaeche:#ffffff; --text:#0e1116; --gedaempft:#5b6472;
  --linie:rgba(14,17,22,.14); --akzent:#1f3fff; --tint:rgba(31,63,255,.06);
  --serif:"Zodiak",Georgia,"Times New Roman",serif;
  --sans:"Switzer",Arial,"Helvetica Neue",sans-serif;
  --rand:clamp(20px,4vw,40px); --spalte:clamp(14px,2vw,28px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--grund:#0c0e12; --flaeche:#14171d; --text:#eef1f5; --gedaempft:#9aa3b2;
    --linie:rgba(238,241,245,.16); --akzent:#7d92ff; --tint:rgba(125,146,255,.09)}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--sans);font-weight:400;
  font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);line-height:1.55;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:var(--akzent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
em{font-style:normal;font-weight:500}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px}
::selection{background:var(--akzent);color:var(--grund)}

.skip{position:absolute;left:var(--rand);top:-60px;background:var(--text);color:var(--grund);padding:10px 16px;z-index:100;border-radius:0 0 6px 6px;text-decoration:none}
.skip:focus{top:0}

.huelle{width:min(1240px,100% - 2*var(--rand));margin-inline:auto}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalte)}
.serif{font-family:var(--serif)}
.leise{color:var(--gedaempft)}

/* Kopf */
.kopf{border-bottom:1px solid var(--linie)}
.kopf .huelle{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 28px;padding:18px 0 16px}
.marke{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;font-size:.9375rem}
.nav a{color:var(--text);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--akzent);color:var(--akzent)}
.sprache{display:inline-flex;gap:2px;margin-left:6px;font-size:.875rem;letter-spacing:.04em}
.sprache a,.sprache span{padding:4px 7px;border:1px solid var(--linie);color:var(--gedaempft);text-decoration:none;border-radius:0}
.sprache [aria-current]{color:var(--grund);background:var(--text);border-color:var(--text)}
.sprache a:hover{border-color:var(--akzent);color:var(--akzent)}

/* Kopfbereich */
.hero{padding:clamp(56px,10vw,150px) 0 clamp(40px,6vw,80px)}
.hero .raster{row-gap:clamp(20px,3vw,36px)}
.kicker{grid-column:1/-1;margin:0;font-size:.9375rem;color:var(--gedaempft)}
.kicker b{color:var(--akzent);font-weight:500}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:0}
h1{grid-column:1/-1;font-size:clamp(2.4rem,1rem + 8.4vw,5.6rem);line-height:.98;font-weight:500;letter-spacing:-.03em}
.hero-meta{grid-column:1/4;margin:6px 0 0;font-size:.9375rem;color:var(--gedaempft);line-height:1.6}
.lede{grid-column:4/12;margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,1rem + 1.7vw,2.35rem);line-height:1.2;letter-spacing:-.015em;max-width:30ch}
.zahlen{margin:clamp(36px,5vw,64px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--spalte);border-top:1px solid var(--linie)}
.zahlen li{padding:18px 0 0;font-size:.9375rem;color:var(--gedaempft);line-height:1.35}
.zahlen strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1;color:var(--akzent);margin-bottom:8px;letter-spacing:-.02em}

/* Sektionen */
.sektion{border-top:1px solid var(--linie);padding:clamp(56px,8vw,120px) 0}
.sektion .raster{row-gap:clamp(24px,3vw,44px)}
.etikett{grid-column:1/4;margin:6px 0 0;font-size:.9375rem;color:var(--gedaempft)}
.etikett b{display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--akzent);margin-bottom:2px}
h2{grid-column:4/-1;font-size:clamp(2.4rem,1.3rem + 3.8vw,4.4rem);line-height:1.02}
.inhalt{grid-column:4/-1;min-width:0}
.voll{grid-column:1/-1;min-width:0}
.text{max-width:66ch;margin:0 0 1em}

/* Arbeitsweise */
.schritte{list-style:none;margin:0;padding:0;counter-reset:s}
.schritte li{display:grid;grid-template-columns:3.2rem minmax(0,12rem) minmax(0,1fr);column-gap:var(--spalte);padding:22px 0;border-top:1px solid var(--linie)}
.schritte li:last-child{border-bottom:1px solid var(--linie)}
.schritte .n{font-family:var(--serif);font-size:1.5rem;color:var(--akzent);line-height:1.2}
.schritte h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15}
.schritte p{margin:0;max-width:52ch}

/* Verzeichnis */
.filter{display:none;flex-wrap:wrap;gap:6px 22px;margin:0 0 18px;padding:0;font-size:.9375rem}
.js .filter{display:flex}
.filter button{font:inherit;color:var(--gedaempft);background:none;border:0;border-bottom:2px solid transparent;padding:6px 0;cursor:pointer}
.filter button span{font-variant-numeric:tabular-nums;margin-left:5px;opacity:.8}
.filter button:hover{color:var(--text)}
.filter button[aria-pressed="true"]{color:var(--akzent);border-bottom-color:var(--akzent);font-weight:500}
.zaehler{margin:0 0 6px;font-size:.875rem;color:var(--gedaempft)}
.kopfzeile,.zeile{display:grid;grid-template-columns:3.4rem minmax(0,5fr) minmax(0,3fr) minmax(0,3fr) 7.5rem;column-gap:var(--spalte);align-items:baseline}
.kopfzeile{padding:10px 0;border-top:1px solid var(--text);font-size:.8125rem;color:var(--gedaempft);letter-spacing:.02em}
.verzeichnis{border-bottom:1px solid var(--linie)}
.werk{border-top:1px solid var(--linie)}
.werk[hidden]{display:none}
.werk>summary{list-style:none;cursor:pointer;padding:18px 0 17px}
.werk>summary::-webkit-details-marker{display:none}
.werk>summary:hover{background:var(--tint)}
.werk .nr{font-family:var(--serif);font-size:1.25rem;color:var(--akzent);font-weight:500}
.werk .titel{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,1.05rem + 1.2vw,2.1rem);line-height:1.12;letter-spacing:-.015em}
.werk .titel small{display:block;margin-top:5px;font-family:var(--sans);font-size:.8125rem;letter-spacing:.02em;color:var(--gedaempft);font-weight:400}
.werk:hover .titel,.werk[open] .titel{color:var(--akzent)}
.werk .art,.werk .pruef{font-size:.9375rem;line-height:1.4}
.werk .pruef{color:var(--gedaempft)}
.werk .rechts{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.9375rem}
.werk .rechts .pm{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--gedaempft)}
.werk .rechts .pm::before{content:"+"}
.werk[open] .rechts .pm::before{content:"–"}
.live{font-weight:500;white-space:nowrap}
.werk-koerper{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalte);row-gap:24px;padding:8px 0 40px;background:transparent;animation:ein .4s ease both}
.werk-text{grid-column:1/6;grid-row:1}
.werk-text p{margin:0 0 1.1em;max-width:52ch}
.werk-text dl{margin:0 0 1.4em;display:grid;gap:12px}
.werk-text dt{font-size:.8125rem;letter-spacing:.02em;color:var(--gedaempft)}
.werk-text dd{margin:2px 0 0;font-size:.9375rem;max-width:52ch}
.werk-bilder{grid-column:6/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--spalte)}
.werk-bilder a{display:block;border-radius:6px;overflow:hidden;background:var(--flaeche);border:1px solid var(--linie);aspect-ratio:16/10}
.werk-bilder a:first-child{grid-column:1/-1}
.werk-bilder a:first-child:nth-last-child(2){grid-column:1/-1}
.werk-bilder img{width:100%;height:100%;object-fit:cover;object-position:top center}
.werk-bilder img.passt{object-fit:contain;object-position:center}
.werk-bilder a:hover{border-color:var(--akzent)}
@keyframes ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#vorschau{position:fixed;left:0;top:0;width:300px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--linie);background:var(--flaeche);pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:50}
#vorschau.an{opacity:1}
#vorschau.passt{object-fit:contain;object-position:center}
@media (hover:none){#vorschau{display:none}}

/* Leistungen */
.preise{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--linie)}
.preise li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) 8.5rem;column-gap:var(--spalte);align-items:baseline;padding:20px 0;border-top:1px solid var(--linie)}
.preise h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);line-height:1.15}
.preise p{margin:0;font-size:.9375rem;color:var(--gedaempft)}
.preise .preis{font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--akzent);font-weight:500;text-align:right;white-space:nowrap;line-height:1.1}
.preise .preis small{display:block;font-family:var(--sans);font-size:.8125rem;color:var(--gedaempft);font-weight:400;margin-top:4px}
.preise .bsp{font-size:.875rem;margin-top:4px;display:block}
.hinweis{margin:20px 0 0;font-size:.9375rem;color:var(--gedaempft);max-width:66ch}

/* Ehrlich */
.ehrlich{margin:0;padding:0;list-style:none}
.ehrlich li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);column-gap:var(--spalte);padding:20px 0;border-top:1px solid var(--linie)}
.ehrlich li:last-child{border-bottom:1px solid var(--linie)}
.ehrlich h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.15}
.ehrlich p{margin:0;max-width:56ch}

/* Kontakt */
.kontakt{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);line-height:1.2;margin:0 0 .6em;max-width:28ch}
.kontakt-liste{margin:0;padding:0;list-style:none}
.kontakt-liste li{padding:12px 0;border-top:1px solid var(--linie);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);column-gap:var(--spalte)}
.kontakt-liste li:last-child{border-bottom:1px solid var(--linie)}
.kontakt-liste span{color:var(--gedaempft);font-size:.9375rem}

.fuss{border-top:1px solid var(--linie);padding:36px 0 56px;font-size:.875rem;color:var(--gedaempft)}
.fuss .raster{row-gap:18px}
.fuss p{margin:0 0 .6em;max-width:70ch}
.fuss a{color:var(--text)}
.fuss .links{grid-column:1/4}
.fuss .nachweise{grid-column:4/-1}

/* Seiten ohne Verzeichnis */
.schlicht{padding:clamp(48px,8vw,110px) 0}
.schlicht h1{font-size:clamp(2.4rem,1.2rem + 5vw,4.4rem);margin-bottom:.5em}
.schlicht h2{grid-column:auto;font-size:1.6rem;margin:1.6em 0 .4em}
.schlicht p,.schlicht li{max-width:66ch}
.platz{padding:2px 6px;background:var(--tint);border-bottom:1px solid var(--akzent)}

/* Einblenden */
.js .ein{opacity:0;transform:translateY(12px)}
.js .ein.da{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
@media (prefers-reduced-motion:reduce){
  .js .ein{opacity:1;transform:none}
  .werk-koerper{animation:none}
  *{scroll-behavior:auto!important;transition:none!important}
}

@media (max-width:900px){
  .etikett,h2,.inhalt,.lede,.hero-meta{grid-column:1/-1}
  .etikett{margin-bottom:-8px}
  .lede{max-width:none}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .zahlen li{border-top:0}
  .kopfzeile{display:none}
  .zeile{grid-template-columns:2.6rem minmax(0,1fr) auto;row-gap:6px}
  .werk>summary{padding:16px 0}
  .zeile .titel{grid-column:2/3}
  .zeile .art,.zeile .pruef{grid-column:2/-1}
  .zeile .rechts{grid-column:3;grid-row:1;flex-direction:column;align-items:flex-end;gap:6px}
  .werk .rechts .pm{order:2}
  .werk-text{grid-column:1/-1}
  .werk-bilder{grid-column:1/-1;grid-row:2}
  .schritte li{grid-template-columns:2.2rem minmax(0,1fr);row-gap:6px}
  .schritte li p{grid-column:2}
  .preise li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .preise li>div:nth-child(2){grid-column:1/-1;grid-row:2}
  .preise .preis{grid-column:2;grid-row:1}
  .ehrlich li,.kontakt-liste li{grid-template-columns:1fr;row-gap:6px}
  .fuss .links,.fuss .nachweise{grid-column:1/-1}
}
@media (max-width:480px){
  .werk-bilder{grid-template-columns:1fr}
  .werk-bilder a:first-child{grid-column:auto}
}