/* ENTLICHTUNG.de · Fotografie von Rafael Luge (Neubau 28.10.2026, statisch)
   Aufbau wie das Original 2015–2024 (Enfold, „boxed“): schwarze Box auf Betontextur, Herz-Logo, Menü rechts mit gelber Linie,
   Titelleiste mit „Du bist hier“, Masonry mit schwarzem Titelstreifen beim Darüberfahren, Serien einspaltig (Titel, Kategorien, Fotos, Text). Filter als Schaltflächen mit Zähler im Stil der Blog-Filter von kopfundstift.de. Lato, Gelb #ffcc00, Orange #ff9900. */
@font-face{font-family:"Lato";src:url("/assets/lato-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Lato";src:url("/assets/lato-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url("/assets/lato-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--gelb:#ffcc00;--orange:#ff9900;--ink:#ffffff;--text:#cfcfcf;--muted:#9c9c9c;--linie:#222;--abstand:12px}
*{box-sizing:border-box}
html{background:#000 url("/assets/hintergrund.webp") center top/cover fixed;color-scheme:dark}
body{margin:0;color:var(--text);font:300 18px/1.65 "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gelb);text-decoration:none}
a:hover{color:var(--orange)}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px;top:0;background:var(--gelb);color:#000;padding:8px 14px;z-index:9;font-weight:700}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--gelb);outline-offset:2px}

.box{width:94%;max-width:1400px;margin:0 auto;background:#000;border-top:1px solid #3d3300;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* Kopf */
.kopf{display:flex;justify-content:space-between;align-items:stretch;height:88px;border-bottom:1px solid #3d3300;padding:0 2.5% 0 4px}
.logo{display:block;align-self:flex-start}
.logo img{width:282px;height:88px}
.menue{display:flex;align-items:stretch}
.menue a{display:flex;align-items:center;padding:0 18px;font:700 16px/1 "Lato",sans-serif;color:#888;border-bottom:2px solid transparent;margin-bottom:-1px}
.menue a:hover{color:#fff}
.menue a.an{color:#fff;border-bottom-color:var(--gelb)}

/* Titelleiste */
.titelleiste{display:flex;justify-content:space-between;align-items:center;gap:6px 20px;flex-wrap:wrap;padding:14px 4%;border-bottom:1px solid var(--linie)}
.titelleiste .t{margin:0;font:700 15px/1.3 "Lato",sans-serif;color:#fff}
.krumen{margin:0;font:400 11px/1.4 "Lato",sans-serif;color:#cfcfcf}
.krumen a{color:#cfcfcf}
.krumen a:hover{color:var(--gelb)}

/* Filter: Schaltflächen mit Zähler im Stil der Blog-Filter von kopfundstift.de. Inaktiv grau, aktiv und beim Darüberfahren gelb. */
.filter{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:32px 4% 34px}
.filter a{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border:2px solid #3a3a3a;border-radius:8px;color:#9c9c9c;font:700 15.5px/1.4 "Lato",sans-serif;letter-spacing:.2px;white-space:nowrap;transition:background .25s ease-out,color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out,transform .25s ease-out}
.filter .zahl{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:#262626;color:#8a8a8a;font:700 12px/1 "Lato",sans-serif;transition:background .25s,color .25s}
.filter a:hover,.filter a:focus-visible{background:var(--gelb);border-color:var(--gelb);color:#000;box-shadow:5px 5px 0 var(--orange);transform:translate(-2px,-2px)}
.filter a:hover .zahl,.filter a:focus-visible .zahl{background:#000;color:var(--gelb)}
.filter a:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--orange);transition-duration:.08s}
.filter a.an{background:var(--gelb);border-color:var(--gelb);color:#000;box-shadow:5px 5px 0 var(--orange)}
.filter a.an .zahl{background:#000;color:var(--gelb)}
.js .filter a{animation:hochkommen .5s cubic-bezier(.2,.75,.2,1) backwards}
.js .filter a:nth-child(1){animation-delay:95ms}
.js .filter a:nth-child(2){animation-delay:130ms}
.js .filter a:nth-child(3){animation-delay:165ms}
.js .filter a:nth-child(4){animation-delay:200ms}
.js .filter a:nth-child(5){animation-delay:235ms}
.js .filter a:nth-child(6){animation-delay:270ms}
.js .filter a:nth-child(7){animation-delay:305ms}
.js .filter a:nth-child(8){animation-delay:340ms}
.js .filter a:nth-child(9){animation-delay:375ms}
.js .filter a:nth-child(10){animation-delay:410ms}
.js .filter a:nth-child(11){animation-delay:445ms}
.js .filter a:nth-child(12){animation-delay:480ms}
.js .filter a:nth-child(13){animation-delay:515ms}
.js .filter a:nth-child(14){animation-delay:550ms}
.js .filter a:nth-child(15){animation-delay:585ms}

/* Masonry */
.kacheln{padding:0 var(--abstand) var(--abstand)}
.kacheln,.galerie{columns:3 290px;column-gap:var(--abstand)}
.galerie{columns:2 250px}
.mauer{columns:auto;display:flex;gap:var(--abstand);align-items:flex-start}
.mauer>.spalte{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--abstand)}
.kacheln:not(.mauer)>*,.galerie:not(.mauer)>*{break-inside:avoid;margin-bottom:var(--abstand)}
.kachel{position:relative;display:block;overflow:hidden;background:#111}
.kachel img{width:100%;transition:transform .6s ease}
.kachel .ueber{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:12px 16px 13px;background:#000;transform:translateY(101%);transition:transform .28s ease}
.kachel .ueber strong{font:700 17px/1.3 "Lato",sans-serif;color:#fff}
.kachel .ueber span{font:400 12px/1.4 "Lato",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gelb)}
.kachel .ueber::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gelb);transition:width .45s .12s ease}
.kachel:hover .ueber,.kachel:focus-visible .ueber{transform:none}
.kachel:hover .ueber::before,.kachel:focus-visible .ueber::before{width:100%}
.kachel:hover img{transform:scale(1.03)}
@media(hover:none){.kachel .ueber{transform:none;padding:9px 12px 10px}.kachel .ueber strong{font-size:15px}}

/* Serien: Titel, Kategorien, Fotos, Text */
.inhalt{padding:40px 4% 54px;max-width:1000px}
.inhalt.breit{max-width:none;padding:38px 2.5% 54px}
.serie h1,.text h1{font:700 clamp(26px,3vw,36px)/1.15 "Lato",sans-serif;color:var(--gelb);text-transform:uppercase;margin:0 0 14px;letter-spacing:.01em}
.kats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.kats a{padding:4px 11px 5px;border:1px solid #3a3a3a;border-radius:6px;color:#9c9c9c;font:700 12px/1.3 "Lato",sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:border-color .2s,color .2s,background .2s}
.kats a:hover{border-color:var(--gelb);color:#000;background:var(--gelb)}
.text{overflow-wrap:break-word;max-width:72ch}
.text p,.text li{color:var(--text)}
.text a{overflow-wrap:anywhere}
.text h2{font:700 20px/1.3 "Lato",sans-serif;color:#fff;margin:28px 0 8px}
.serie .text{margin:34px 0 10px}
.serie .text>:first-child{margin-top:0}
/* Bildband: Zeilen mit wechselnder Bildzahl, alle Bilder einer Zeile gleich hoch */
.reihen{display:flex;flex-direction:column;gap:var(--abstand)}
.reihe{display:flex;gap:var(--abstand)}
.reihe .foto{flex-basis:0;flex-shrink:1;min-width:0}
.reihe.hoch{justify-content:center}
.reihe.hoch .foto{flex:none}
.foto{display:block;background:#111;overflow:hidden;cursor:zoom-in}
.foto img{width:100%;transition:transform .6s ease,opacity .5s ease}
.foto:hover img{transform:scale(1.03)}
.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--linie);padding-top:22px;margin-top:34px}
.blaettern a{font:700 17px/1.3 "Lato",sans-serif;color:#fff}
.blaettern a span{display:block;font:400 11px/1.4 "Lato",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gelb);margin-bottom:3px}
.blaettern a:hover{color:var(--gelb)}
.blaettern .weiter{text-align:right}
.linkliste{padding-left:1.1em}
.recht h2{font:700 18px/1.3 "Lato",sans-serif;color:#fff;margin:26px 0 6px}

/* Einblenden: Bilder gleiten nach Spalte versetzt herein, geladene Bilder blenden weich auf */
@keyframes hochkommen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.js .kachel,.js .foto{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .75s cubic-bezier(.2,.75,.2,1),transform .95s cubic-bezier(.2,.75,.2,1);transition-delay:var(--v,0ms)}
.js .kachel.sichtbar,.js .foto.sichtbar{opacity:1;transform:none}
.js .laedt img{opacity:0}
.js .logo img{animation:einblenden .9s ease both}
.js .menue a{animation:hochkommen .6s cubic-bezier(.2,.75,.2,1) .15s backwards}
.js .titelleiste,.js .serie h1,.js .kats{animation:hochkommen .6s cubic-bezier(.2,.75,.2,1) .1s backwards}

/* Pfeile am Rand wie bei Enfold */
.pfeil{position:fixed;top:50%;z-index:5;display:flex;align-items:center;height:64px;margin-top:-32px;background:rgba(0,0,0,.85);color:var(--gelb);border:1px solid #2a2a2a;font:700 14px/1.3 "Lato",sans-serif;overflow:hidden;max-width:30px;transition:max-width .35s ease,background .2s}
.pfeil::before{flex:none;width:30px;text-align:center;font-size:26px}
.pfeil span{white-space:nowrap;padding:0 14px 0 4px}
.pfeil-l{left:0}.pfeil-l::before{content:"‹"}
.pfeil-r{right:0;flex-direction:row-reverse}.pfeil-r::before{content:"›"}
.pfeil-r span{padding:0 4px 0 14px}
.pfeil:hover,.pfeil:focus-visible{max-width:360px;background:#000;color:var(--gelb)}

/* Sockel */
.sockel{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;border-top:1px solid var(--linie);padding:16px 4%;font:400 13px/1.5 "Lato",sans-serif;color:#777}
.sockel p{margin:0}
.sockel a{color:#999}
.sockel a:hover{color:var(--gelb)}
.fehler{padding:44px 4%}

/* Lightbox */
html.lb-offen{overflow:hidden}
.lb{position:fixed;inset:0;z-index:20;background:#000;display:none;align-items:center;justify-content:center}
.lb.auf{display:flex}
.lb figure{margin:0;max-width:calc(100vw - 130px);transform-origin:center;max-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0}
.lb img{max-width:100%;max-height:calc(100vh - 90px);object-fit:contain;will-change:transform}
.lb figcaption{color:var(--muted);font:400 14px "Lato",sans-serif;margin-top:12px;display:flex;gap:16px}
.lb .lb-zahl{color:var(--gelb)}
.lb button{position:absolute;border:0;color:#fff;font:300 34px/1 "Lato",sans-serif;cursor:pointer;width:52px;height:52px;padding:0;background:rgba(255,255,255,.1)}
.lb button:hover{background:var(--gelb);color:#000}
.lb-zu{top:10px;right:10px}
.lb-vor{left:10px;top:50%;transform:translateY(-50%)}
.lb-nach{right:10px;top:50%;transform:translateY(-50%)}
.lb-einzeln .lb-vor,.lb-einzeln .lb-nach{display:none}

@media(max-width:767px){
  .box{width:100%}
  .kopf{height:auto;flex-wrap:wrap;padding:0}
  .logo img{width:226px;height:70px}
  .menue{width:100%;border-top:1px solid var(--linie)}
  .menue a{padding:14px 16px}
  .inhalt,.inhalt.breit{padding:28px 8px 40px}
  .reihe{flex-direction:column}
  .reihe .foto,.reihe.hoch .foto{flex:none;width:100%!important}
  .serie h1,.serie .kats,.serie .text,.blaettern{padding-left:8px;padding-right:8px}
  .titelleiste{padding:12px 16px}
  .filter{padding:22px 12px 26px;gap:9px}
  .filter a{font-size:14px;padding:6px 6px 6px 11px}
  .kacheln{padding:0 8px 8px}
  :root{--abstand:8px}
  .pfeil{display:none}
  .blaettern{grid-template-columns:1fr}
  .blaettern .weiter{text-align:left}
  .lb figure{max-width:100vw;padding:60px 0}
  .lb-vor,.lb-nach{top:auto;bottom:12px;transform:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.js .kachel,.js .foto{opacity:1;transform:none}}

/* erzeugt: Bildband-Zeilen */
.q31{flex-grow:0.31}.q47{flex-grow:0.47}.q49{flex-grow:0.49}.q59{flex-grow:0.59}.q66{flex-grow:0.66}.q67{flex-grow:0.67}.q71{flex-grow:0.71}.q73{flex-grow:0.73}.q75{flex-grow:0.75}.q77{flex-grow:0.77}.q89{flex-grow:0.89}.q100{flex-grow:1.00}.q102{flex-grow:1.02}.q105{flex-grow:1.05}.q111{flex-grow:1.11}.q119{flex-grow:1.19}.q121{flex-grow:1.21}.q123{flex-grow:1.23}.q132{flex-grow:1.32}.q133{flex-grow:1.33}.q143{flex-grow:1.43}.q148{flex-grow:1.48}.q149{flex-grow:1.49}.q150{flex-grow:1.50}.q151{flex-grow:1.51}.q160{flex-grow:1.60}.q161{flex-grow:1.61}.q170{flex-grow:1.70}.q178{flex-grow:1.78}.q182{flex-grow:1.82}.q184{flex-grow:1.84}.q185{flex-grow:1.85}.q190{flex-grow:1.90}.q191{flex-grow:1.91}.q194{flex-grow:1.94}.q201{flex-grow:2.01}.q202{flex-grow:2.02}.q204{flex-grow:2.04}.q212{flex-grow:2.12}.q215{flex-grow:2.15}.q224{flex-grow:2.24}.q238{flex-grow:2.38}.q272{flex-grow:2.72}.q281{flex-grow:2.81}.q295{flex-grow:2.95}.q299{flex-grow:2.99}.q308{flex-grow:3.08}.q319{flex-grow:3.19}.q331{flex-grow:3.31}.q353{flex-grow:3.53}.q354{flex-grow:3.54}.q357{flex-grow:3.57}.q361{flex-grow:3.61}.q362{flex-grow:3.62}.q369{flex-grow:3.69}.q371{flex-grow:3.71}.q376{flex-grow:3.76}.q387{flex-grow:3.87}.q395{flex-grow:3.95}.q398{flex-grow:3.98}.q407{flex-grow:4.07}.q429{flex-grow:4.29}.q441{flex-grow:4.41}.q442{flex-grow:4.42}.q445{flex-grow:4.45}.q447{flex-grow:4.47}.q459{flex-grow:4.59}.q464{flex-grow:4.64}.q474{flex-grow:4.74}.q491{flex-grow:4.91}.q514{flex-grow:5.14}.q517{flex-grow:5.17}.q535{flex-grow:5.35}.q583{flex-grow:5.83}.q654{flex-grow:6.54}.q833{flex-grow:8.33}.q847{flex-grow:8.47}.q976{flex-grow:9.76}.h31 .foto{width:min(56%,calc(86vh * 0.31))}.h47 .foto{width:min(56%,calc(86vh * 0.47))}.h49 .foto{width:min(56%,calc(86vh * 0.49))}.h59 .foto{width:min(56%,calc(86vh * 0.59))}.h66 .foto{width:min(56%,calc(86vh * 0.66))}.h67 .foto{width:min(56%,calc(86vh * 0.67))}.h71 .foto{width:min(56%,calc(86vh * 0.71))}.h73 .foto{width:min(56%,calc(86vh * 0.73))}.h75 .foto{width:min(56%,calc(86vh * 0.75))}.h77 .foto{width:min(56%,calc(86vh * 0.77))}.h89 .foto{width:min(56%,calc(86vh * 0.89))}