/* ===== Jesse B. Foerster — style.css (final, path fix) ===== */

/* --- Base --- */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
:root{--wrap:62rem;--glass:rgba(0,0,0,.36);--glass-strong:rgba(0,0,0,.48);--radius:14px;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#fff;background:#000;overflow-x:hidden;}

/* Backgrounds (mobile first) 
   IMPORTANT: root-absolute paths so they work from /assets/css/style.css */
body.home{background:url("/assets/img/home-mobile.jpg") center/cover no-repeat fixed;}
body.bio{background:url("/assets/img/bio-mobile.jpg") center/cover no-repeat fixed;}
body.contact{background:url("/assets/img/contact-mobile.jpg") center/cover no-repeat fixed;}
body.legal{background:url("/assets/img/legal-mobile.jpg") center/cover no-repeat fixed;}
@media (min-width:768px){
  body.home{background-image:url("/assets/img/home-desktop.jpg");}
  body.bio{background-image:url("/assets/img/bio-desktop.jpg");}
  body.contact{background-image:url("/assets/img/contact-desktop.jpg");}
  body.legal{background-image:url("/assets/img/legal-desktop.jpg");}
}

/* vignette */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.42));}

/* Layout */
main{position:relative;z-index:1;min-height:90vh;padding:12vh 6vw 12vh;}
.content{max-width:var(--wrap);margin:0 auto;text-align:left;}
h1{font-weight:800;letter-spacing:.2px;font-size:clamp(2.2rem,5.2vw,4.25rem);line-height:1.05;text-shadow:0 2px 24px rgba(0,0,0,.35);}
.lead{margin:.6rem 0 0;opacity:.9;font-size:clamp(1rem,1.3vw,1.15rem);}

/* Home Q&A */
.qna{margin:1.25rem auto 0;padding:1.1rem 1.25rem;background:var(--glass);border-radius:var(--radius);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);max-width:var(--wrap);max-height:60vh;overflow:auto;}
.qna h2{font-size:clamp(1.15rem,1.6vw,1.35rem);margin:.9rem 0 .35rem;}
.qna p{color:#e8e8e8;line-height:1.6;font-size:clamp(.95rem,1.1vw,1.05rem);}

/* Bio grid */
.bio-intro{margin:1rem auto;padding:1.1rem 1.25rem;max-width:var(--wrap);background:var(--glass);border-radius:var(--radius);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.presskit{list-style:none;padding:0;margin:1rem auto 0;max-width:70rem;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.pkcard{background:var(--glass-strong);border-radius:var(--radius);padding:12px;box-shadow:0 8px 32px rgba(0,0,0,.28);}
.pkcard img{width:100%;height:220px;object-fit:cover;border-radius:10px;display:block;}
.pkcard h3{margin:.6rem 0 .15rem;font-size:1.06rem;}
.pkcard .meta{opacity:.85;font-size:.9rem;}
.pkcard .btn{display:inline-block;margin-top:.55rem;padding:.55rem .8rem;border-radius:10px;background:#fff;color:#111;font-weight:700;text-decoration:none;}

/* Contact */
.form-card{max-width:60rem;margin:.5rem auto 0;padding:1rem;background:var(--glass);border-radius:var(--radius);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
input[type="text"],input[type="email"],input[type="url"],textarea{width:100%;padding:.7rem .8rem;border:0;border-radius:10px;background:rgba(255,255,255,.94);color:#111;font:inherit;}
textarea{min-height:180px;resize:vertical;}
.actions{display:flex;gap:.6rem;align-items:center;margin-top:.6rem;}
.btn{padding:.6rem .9rem;border-radius:10px;background:#fff;color:#111;font-weight:800;border:0;cursor:pointer;}
.btn.clear{background:#e9e9e9;}
.gdpr-note{font-size:.9rem;opacity:.85;margin-top:.5rem;}

/* Legal */
.legal-card{max-width:56rem;margin:0 auto;padding:1.1rem 1.25rem;background:var(--glass);border-radius:var(--radius);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.legal-card h1{margin-bottom:.6rem;}
.legal-card p,.legal-card li{color:#e8e8e8;line-height:1.6;}

/* Footer */
.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:2;text-align:center;padding:.9rem 0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px);font-weight:600;}
.footer-nav a{color:#fff;text-decoration:none;margin:0 .5rem;}
.footer-nav a:hover{color:#bbb;}
.dot{opacity:.6;color:#fff;}
.copyright{display:block;margin-top:.35rem;font-size:.8rem;color:#aaa;}

/* Responsive */
@media (max-width:780px){
  main{padding:10vh 6vw 12vh;}
  .presskit{grid-template-columns:1fr 1fr;gap:12px;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .presskit{grid-template-columns:1fr;}
}

/* PDF-Platzhalter-Kachel ohne Bild */
.presskit .thumb.pdf{
  height: 220px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* === Fix: PDF-Kachel richtig ausrichten === */
body.bio .presskit .thumb.pdf {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;              /* gleiche Höhe wie die Bildkacheln */
  background: var(--glass-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  text-align: center;
}

body.bio .presskit .thumb.pdf .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* === Scroll indicator === */
.scroll-indicator {
  position: fixed;
  bottom: 88px; /* über dem Footer */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  color: rgba(255,255,255,0.75);
  animation: bounce 1.8s infinite;
  user-select: none;
  pointer-events: none;
  z-index: 3;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -8px); }
  60% { transform: translate(-50%, -4px); }
}

/* === Interview credits (Sophia Blake) === */
.credits {
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: right;
  margin-top: 1.4rem;
  padding-right: 0.5rem;
}

/* Pfeil in der Q&A-Box unten mittig */
.qna {
  position: relative;
  padding-bottom: 2.8rem; /* Platz für den Pfeil */
}
.scroll-indicator {
  position: absolute;
  bottom: .9rem;     /* näher am Text */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  color: rgba(255,255,255,0.78);
  animation: bounce 1.8s infinite;
  user-select: none;
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s ease;
}
.scroll-indicator.hide { opacity: 0; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -6px); }
  60% { transform: translate(-50%, -3px); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -8px); }
  60% { transform: translate(-50%, -4px); }
}

.credits {
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: right;
  margin-top: 1.4rem;
  padding-right: 0.5rem;
}