/* FM Portfolio – Styles
   Schriften lokal (DSGVO): Jost (variabel 100–900), IBM Plex Mono 400 – SIL Open Font License */
@font-face{font-family:"Jost";src:url("fonts/jost-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --fmp-bg:#f7f7f5; --fmp-fg:#151514; --fmp-muted:#7a7a74; --fmp-line:#dcdcd6; --fmp-frame:#1b1b1a;
  --fmp-ov:rgba(250,250,247,.5);
  --fmp-sans:"Jost","Futura",ui-sans-serif,system-ui,sans-serif;
  --fmp-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fmp-max:1440px;
}

/* Grundlage für die ganze Website */
body{background:var(--fmp-bg);color:var(--fmp-fg);font-family:var(--fmp-sans)}
#page-container,#main-content{background:var(--fmp-bg)}
h1,h2,h3,h4,h5,h6{font-family:var(--fmp-sans);color:var(--fmp-fg)}
#top-menu a,.et_pb_menu a,.et_mobile_menu a{text-transform:lowercase;font-family:var(--fmp-sans)}

/* Seiten-Wrapper der Plugin-Vorlagen */
.fmp-main{padding-block:8px 64px}
.fmp-wrap{max-width:var(--fmp-max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.fmp-page #main-content .container:before{display:none}

/* Projektzeilen (Startseite, Kategorieseiten) */
.fmp-grid{display:flex;flex-direction:column;gap:12px}
.fmp-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;text-decoration:none;color:var(--fmp-fg)}
.fmp-still{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--fmp-frame)}
.fmp-still img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fmp-row:hover .fmp-still img{transform:scale(1.03)}
.fmp-ov{position:absolute;inset:0;background:var(--fmp-ov);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;opacity:0;transition:opacity .35s}
.fmp-row:hover .fmp-ov,.fmp-row:focus-visible .fmp-ov{opacity:1}
.fmp-ov b{font-family:var(--fmp-sans);font-weight:500;font-size:18px;line-height:1.3;color:var(--fmp-fg)}
.fmp-ov span{font-family:var(--fmp-mono);font-size:11px;letter-spacing:.04em;opacity:.7;color:var(--fmp-fg)}
.fmp-row:focus-visible{outline:2px solid var(--fmp-fg);outline-offset:3px}
@media (max-width:820px){
  .fmp-grid{gap:20px}
  .fmp-row{grid-template-columns:minmax(0,1fr)}
  .fmp-still:nth-child(n+2){display:none}
}
@media (max-width:820px),(hover:none){
  .fmp-ov{position:static;opacity:1;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;align-items:flex-start;text-align:left;padding:8px 0 0;gap:2px}
  .fmp-ov b{font-size:16px}
}
.fmp-empty{font-family:var(--fmp-mono);font-size:12px;color:var(--fmp-muted);border:1px dashed var(--fmp-line);padding:12px}

/* Projektseite */
.fmp-back{display:inline-block;margin:0 0 14px;font-size:13px;color:var(--fmp-muted);text-decoration:none;text-transform:lowercase}
.fmp-back:hover{color:var(--fmp-fg)}
.fmp-player{position:relative;aspect-ratio:16/9;background:var(--fmp-frame);overflow:hidden}
.fmp-player .fmp-poster{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.6)}
.fmp-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fmp-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:none;border:0;cursor:pointer;color:#f4f4f2;padding:16px;text-align:center;font:inherit}
.fmp-playicon{width:72px;height:50px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center}
.fmp-playicon:after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.fmp-play:hover .fmp-playicon{background:rgba(255,255,255,.24)}
.fmp-play:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.fmp-note{font-family:var(--fmp-mono);font-size:11px;letter-spacing:.03em;opacity:.8;max-width:46ch}
.fmp-note-static{position:absolute;left:16px;bottom:14px;color:#f4f4f2}
.fmp-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;padding:26px 0 30px;border-bottom:1px solid var(--fmp-line);margin-bottom:24px}
.fmp-meta h1{margin:0;padding:0;font-size:34px;font-weight:500;letter-spacing:-.01em;line-height:1.1}
.fmp-meta dl{margin:0;display:grid;grid-template-columns:auto auto;gap:4px 18px;font-family:var(--fmp-mono);font-size:11px;line-height:1.5}
.fmp-meta dt{color:var(--fmp-muted)}
.fmp-meta dd{margin:0}
.fmp-text{max-width:62ch;margin:0 0 24px;font-size:17px;line-height:1.6}
.fmp-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fmp-lb-item{display:block;width:100%;padding:0;border:0;background:var(--fmp-frame);cursor:zoom-in;overflow:hidden}
.fmp-gallery .fmp-lb-item{aspect-ratio:2.39/1}
.fmp-lb-item img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
.fmp-lb-item:hover img{opacity:.82}
.fmp-pager{display:flex;justify-content:space-between;gap:16px;padding-top:34px;font-size:13px}
.fmp-pager a{color:var(--fmp-muted);text-decoration:none}
.fmp-pager a:hover{color:var(--fmp-fg)}
@media (max-width:760px){
  .fmp-meta{grid-template-columns:minmax(0,1fr)}
  .fmp-meta h1{font-size:26px}
  .fmp-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Seite „stills“ */
.fmp-wall{columns:3 260px;column-gap:10px}
.fmp-wall .fmp-lb-item{margin:0 0 10px;break-inside:avoid}
.fmp-wall .fmp-lb-item img{height:auto}

/* Textseiten (about, contact, impressum) */
.fmp-textpage{max-width:62ch;padding:40px 0 40px}
.fmp-textpage p{font-size:18px;line-height:1.6;margin:0 0 18px;padding:0}
.fmp-textpage .fmp-label{display:block;font-family:var(--fmp-mono);font-size:11px;letter-spacing:.04em;color:var(--fmp-muted);margin:0 0 2px}
.fmp-textpage .fmp-small{font-size:15px;color:var(--fmp-muted)}
.fmp-textpage h2{font-size:15px;font-weight:600;margin:28px 0 8px}
.fmp-textpage img{max-width:340px;width:100%;height:auto;margin:0 0 28px;display:block}

/* Lightbox */
.fmp-lb{position:fixed;inset:0;z-index:100000;background:rgba(8,8,8,.94);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.fmp-lb[hidden]{display:none}
.fmp-lb img{max-width:min(1600px,100%);max-height:86vh;width:auto;height:auto}
.fmp-lb button{background:none;border:0;color:#eee;cursor:pointer;font-family:var(--fmp-sans)}
.fmp-lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));font-size:13px}
.fmp-lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:30px;padding:16px}
.fmp-lb-prev{left:env(safe-area-inset-left,0px)}
.fmp-lb-next{right:env(safe-area-inset-right,0px)}
.fmp-lb-ix{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));color:#aaa;font-family:var(--fmp-mono);font-size:11px}

@media (prefers-reduced-motion:reduce){.fmp-still img,.fmp-ov,.fmp-lb-item img{transition:none}}