@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/ebgaramond-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/ebgaramond-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Mounas Portfolio – öffentliche Darstellung (nach dem Vorbild der Portfoliobox-Seite) */
:root{--bg:#FCFBF8;--fg:#000;--leise:#6b6760;--linie:#e6e2da;--rand:5%;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'EB Garamond',Georgia,serif;font-size:95%;line-height:1.5}
@media (min-width:1600px){body{font-size:105%}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:400;margin:0;line-height:1.2}
h1{font-size:2.8em}
h2{font-size:1.6em;margin-bottom:.7em}
h3{font-size:1.2em;margin:1em 0 .4em}

/* Kopf und Menü */
.kopf{display:flex;flex-direction:column;align-items:center;gap:.6em;padding:2.2em var(--rand) 1.2em;text-align:center}
.logo{font-size:1.45em;text-decoration:none}
.menue{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em 1.6em;font-size:1.1em}
.menue a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.menue a:hover,.menue a[aria-current]{border-bottom-color:currentColor}
.burger{display:none}
@media (max-width:700px){
  .kopf{flex-direction:row;justify-content:space-between;text-align:left;padding:1.2em 16px;flex-wrap:wrap}
  .burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
  .burger span{display:block;width:24px;height:1.5px;background:var(--fg)}
  .menue{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.8em;padding:1em 0 .4em}
  .kopf.offen .menue{display:flex}
}

/* Abschnitte */
.sec{padding:4vh var(--rand)}
.sec-heading{text-align:center;padding-top:4vh;padding-bottom:2vh}
.sec-heading .titel{max-width:800px;margin:0 auto}
.sec-text .spalte{max-width:760px;margin:0 auto}
.langtext{line-height:1.7em;overflow-wrap:anywhere}
.langtext p{margin:0 0 1em}
.langtext a{text-decoration:underline;text-underline-offset:2px}

/* Text mit Bild */
.sec-textimage{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
.sec-textimage.bild-left .ti-bild{order:-1}
.sec-textimage .ti-bild img{width:100%}
.sec-textimage.fuellen{padding:0;gap:0;align-items:stretch}
.sec-textimage.fuellen .ti-text{padding:8vh 5vw 8vh var(--rand)}
.sec-textimage.fuellen.bild-left .ti-text{padding:8vh var(--rand) 8vh 5vw}
.sec-textimage.fuellen .ti-bild{position:relative;min-height:70vh}
.sec-textimage.fuellen .ti-bild img{position:sticky;top:0;width:100%;height:100vh;object-fit:cover}
@media (max-width:800px){
  .sec-textimage,.sec-textimage.fuellen{grid-template-columns:1fr;gap:2em}
  .sec-textimage.fuellen .ti-text{padding:4vh 16px}
  .sec-textimage .ti-bild{order:-1}
  .sec-textimage.fuellen .ti-bild{min-height:0}
  .sec-textimage.fuellen .ti-bild img{position:static;height:auto;max-height:80vh}
}

/* Einzelbild */
.sec-image figure{margin:0 auto;max-width:1000px}
.sec-image.voll{padding-left:0;padding-right:0}
.sec-image.voll figure{max-width:none}
.sec-image.voll img{width:100%}
figcaption{font-size:.95em;color:var(--leise);margin-top:.5em}
.sec-image figcaption{padding:0 var(--rand)}

/* Galerie */
.galerie{--abstand:1.1vw}
.gi{margin:0}
.gi-bild{display:block;cursor:zoom-in}
.anordnung-rows .galerie{display:flex;flex-wrap:wrap;gap:var(--abstand)}
.anordnung-rows .galerie::after{content:"";flex-grow:999}
.anordnung-rows .gi{flex-grow:calc(var(--ar) * 100);flex-basis:calc(var(--ar) * 230px)}
.anordnung-rows .gi img{width:100%;aspect-ratio:var(--ar);object-fit:cover}
.anordnung-grid .galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--abstand)}
.anordnung-grid .gi img{width:100%;aspect-ratio:3/4;object-fit:cover}
.anordnung-columns .galerie{columns:3;column-gap:var(--abstand)}
.anordnung-columns .gi{break-inside:avoid;margin-bottom:var(--abstand)}
.anordnung-columns .gi img{width:100%}
@media (max-width:700px){
  .galerie{--abstand:8px}
  .anordnung-grid .galerie{grid-template-columns:repeat(2,1fr)}
  .anordnung-columns .galerie{columns:2}
  .anordnung-rows .gi{flex-basis:calc(var(--ar) * 160px)}
}

/* Seitenkacheln */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2vw}
.kachel{text-decoration:none;display:block}
.kachel-bild{aspect-ratio:3/4;overflow:hidden;background:#efece6;position:relative}
.kachel-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.kachel:hover .kachel-bild img{opacity:.8}
.kachel-titel{display:block;font-size:1.2em;margin-top:.5em}
@media (max-width:700px){.kacheln{grid-template-columns:repeat(2,1fr);gap:12px}}

/* Großansicht */
.lb{position:fixed;inset:0;background:rgba(252,251,248,.97);display:flex;align-items:center;justify-content:center;z-index:100}
.lb img{max-width:94vw;max-height:90vh;width:auto;height:auto}
.lb button{position:absolute;background:none;border:0;font:inherit;font-size:2em;cursor:pointer;padding:.4em .6em;color:var(--fg)}
.lb .zu{top:0;right:0}.lb .vor{right:0;top:50%;transform:translateY(-50%)}.lb .zurueck{left:0;top:50%;transform:translateY(-50%)}
.lb .unterschrift{position:absolute;bottom:2vh;left:0;right:0;text-align:center;color:var(--leise)}

/* Anmeldung */
.anmelden{display:flex;min-height:100vh;align-items:center;justify-content:center}
.anmeldung{display:flex;flex-direction:column;gap:1em;width:min(340px,92vw)}
.anmeldung h1{font-size:2em;text-align:center;margin-bottom:.4em}
.anmeldung label{display:flex;flex-direction:column;gap:.3em;font-size:1.05em}
.anmeldung input{font:inherit;padding:.55em .7em;border:1px solid #cfc9bf;border-radius:6px;background:#fff}
.anmeldung button{font:inherit;font-size:1.1em;padding:.6em;border:0;border-radius:6px;background:#000;color:#fff;cursor:pointer;margin-top:.4em}
.meldung{color:#a02c1c;margin:0;text-align:center}