/* mario.kocht, eigener Bereich. Schiefer und Paprika. Eigenständig, nutzt nur die Schriften der Seite. */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../fontsmsi/lora-regular.woff') format('woff')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../fontsmsi/lora-italic.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fontsmsi/poppins-regular.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fontsmsi/poppins-500.woff') format('woff')}
:root{
  --bg:#1f2326; --bg-tief:#181b1e; --linie:#343a3f; --linie-stark:#4a5258;
  --text:#efe9df; --text-leise:#c9c3b8; --text-matt:#a9a49b;
  --akzent:#e0663a; --akzent-hell:#e8794f; --auf-akzent:#1a1008;
  --serif:'Lora',Georgia,serif; --sans:'Poppins',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent-hell);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--akzent);color:var(--auf-akzent);padding:8px 14px;z-index:20}
.skip:focus{left:8px;top:8px}
/* Kopf */
.kopf{background:var(--bg-tief);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.marke{font:400 20px/1.2 var(--serif);color:var(--text)}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:14px}
.nav a{color:var(--text-matt);padding:4px 0}
.nav a[aria-current]{color:var(--text);border-bottom:2px solid var(--akzent)}
/* Hero */
.hero .wrap{padding-top:72px;padding-bottom:36px}
.ueber{margin:0 0 12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--akzent-hell);font-weight:500}
.hero h1{margin:0;font:400 clamp(44px,8vw,76px)/1.05 var(--serif)}
.hero h1 em{font-style:italic;color:var(--akzent-hell)}
.hero h1 .punkt{color:var(--akzent)}
.strich{width:56px;height:3px;background:var(--akzent);margin:26px 0}
.lead{margin:0;max-width:62ch;font-size:19px;color:var(--text-leise)}
.zahl{margin:22px 0 0;font-size:14px;color:var(--text-matt)}
/* Filter */
.filter{display:none}
.js .filter{display:block}
.filter .wrap{padding-top:8px;padding-bottom:20px}
.fgruppe{margin:0 0 18px}
.flabel{margin:0 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-matt);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1 var(--sans);color:var(--text);background:transparent;border:1px solid var(--linie-stark);border-radius:999px;padding:9px 16px;cursor:pointer}
.chip .n{color:var(--text-matt);font-weight:400;margin-left:4px;font-size:12px}
.chip:hover{border-color:var(--akzent-hell)}
.chip[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.chip[aria-pressed=true] .n{color:var(--auf-akzent)}
.chip[data-mehr]{display:none}
.alle .chip[data-mehr]{display:inline-block}
.mehr,.auswahl button{font:500 13px/1 var(--sans);color:var(--akzent-hell);background:none;border:0;padding:10px 4px;cursor:pointer;text-decoration:underline}
.auswahl{margin:4px 0 0;color:var(--text-leise);font-size:15px}
/* Raster */
.wand .wrap{padding-bottom:72px}
.raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kachel{position:relative;display:block;overflow:hidden;background:var(--bg-tief);aspect-ratio:1/1}
.kachel img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.kachel:hover img{transform:scale(1.04)}
.kachel .kt{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;background:linear-gradient(transparent,rgba(12,14,16,.88));color:var(--text);font-size:13px;line-height:1.35;opacity:0;transition:opacity .2s}
.kachel:hover .kt,.kachel:focus-visible .kt{opacity:1}
@media (hover:none){.kachel .kt{opacity:1;font-size:12px}}
.kachel[hidden]{display:none}
.leer{margin:40px 0;text-align:center;color:var(--text-matt)}
/* Detail */
.krumen{margin:32px 0 20px;font-size:14px}
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
.galerie{margin:0}
.galerie .gross{display:block;background:var(--bg-tief)}
.galerie .gross img{width:100%;height:auto;max-height:84vh;object-fit:contain;margin:0 auto}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.thumbs a{display:block;width:84px;height:84px;border:2px solid transparent}
.thumbs a[aria-current=true]{border-color:var(--akzent)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.text h1{margin:0 0 18px;font:400 clamp(26px,4vw,36px)/1.25 var(--serif)}
.text p{margin:0 0 16px;color:var(--text-leise);max-width:60ch}
.tags{margin-top:28px}
.tags ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags a{display:inline-block;border:1px solid var(--linie-stark);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--text)}
.tags a:hover{border-color:var(--akzent-hell);text-decoration:none}
.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:56px 0 72px;border-top:1px solid var(--linie);padding-top:24px}
.blaettern a{display:block;color:var(--text);font:400 17px/1.4 var(--serif)}
.blaettern a span{display:block;font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-hell);margin-bottom:4px}
.blaettern .vor{text-align:right}
/* Lightbox */
.box{position:fixed;inset:0;background:rgba(8,9,10,.94);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.box img{max-width:100%;max-height:100%;object-fit:contain}
.box button{position:absolute;top:14px;right:14px;font:500 14px/1 var(--sans);background:var(--bg-tief);color:var(--text);border:1px solid var(--linie-stark);border-radius:999px;padding:11px 18px;cursor:pointer}
/* Fuss */
.fuss{background:var(--bg-tief);border-top:1px solid var(--linie);margin-top:0}
.fuss .wrap{padding-top:32px;padding-bottom:28px}
.fuss-oben{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:baseline}
.fuss nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.fuss nav a,.fuss-unten a{color:var(--text-matt)}
.handle{font-weight:500}
.fuss-unten{display:flex;flex-wrap:wrap;gap:6px 32px;justify-content:space-between;margin:22px 0 0;font-size:13px;color:var(--text-matt)}
.hinweis{margin:22px 0 0;font-size:11px;line-height:1.5;color:var(--text-matt);opacity:.7;text-align:center}
@media (max-width:900px){.raster{grid-template-columns:repeat(3,minmax(0,1fr))}.detail{grid-template-columns:1fr;gap:24px}}
@media (max-width:560px){.wrap{padding:0 16px}.raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hero .wrap{padding-top:48px}.lead{font-size:17px}.blaettern{grid-template-columns:1fr}.blaettern .vor{text-align:left}}
@media (prefers-reduced-motion:reduce){.kachel img{transition:none}}