/* ===== 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;
}

/* === Legal Page Styling (revised spacing) === */
body.legal::before {
  background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.6));
}

body.legal .legal-card {
  max-width: 60rem;
  margin: 4rem auto 6rem;
  padding: 2.4rem 2.6rem;
  background: rgba(0,0,0,.45);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 35px rgba(0,0,0,.3);
  color: #f1f1f1;
  line-height: 1.8;
  font-size: 1.05rem;
}

body.legal .legal-card h1 {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  margin-bottom: 1.6rem;
  color: #fff;
  font-weight: 700;
}

body.legal .legal-card h2 {
  font-size: 1.3rem;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  color: #f8f8f8;
  font-weight: 600;
}

body.legal .legal-card a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.legal .legal-card p {
  margin-bottom: 1rem;
}

body.legal .legal-card p:last-of-type {
  margin-bottom: 0;
}

/* ===== Legal page – gradient + airy layout (v1) ===== */

/* Nur auf der Legal-Seite die Vignette deutlich schwächer */
body.legal::before{
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.28));
}

/* Glass-Card: leicht, damit der Hintergrund sichtbar bleibt */
.legal-card{
  max-width: 56rem;
  margin: 0 auto 4rem;
  padding: 1.25rem 1.35rem;
  background: rgba(0,0,0,.32);           /* leichter als zuvor */
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Typo & Luft */
.legal-card .title{ margin: 0 0 .4rem; }
.legal-card .intro{ margin: 0 0 1.1rem; opacity:.9; }

.legal-card h2{
  margin: 1.05rem 0 .35rem;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
}

.legal-card p{
  margin: 0 0 .9rem;
  line-height: 1.58;
  color: #e8e8e8;
}

.legal-card a{ color:#fff; text-decoration: underline; }

/* Letzte Zeile dezenter Abstand */
.legal-card .last-updated{
  margin-top: 1.2rem;
  opacity:.75;
  font-size:.95rem;
}

/* Mobile Finetuning */
@media (max-width: 780px){
  .legal-card{ margin: 0 6vw 3.5rem; padding: 1rem 1.05rem; }
  .legal-card h2{ margin: .95rem 0 .35rem; }
}

/* === Legal tweaks: no card background + tighter rhythm === */

/* Vignette noch etwas schwächer, damit der Hintergrund heller wirkt */
body.legal::before{
  background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.20));
}

/* Card: komplett transparent, kein Blur/Shadow, etwas schmaler und weniger Padding */
.legal-card{
  max-width: 54rem;
  margin: 0 auto 3rem;
  padding: .8rem 0 0;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* oben auch weniger Luft */
body.legal main{ padding: 9vh 6vw 9vh; }

/* Überschriften & Text kompakter setzen */
.legal-card .title{ margin: 0 0 .3rem; }
.legal-card .intro{ margin: 0 0 .7rem; opacity:.9; }

.legal-card h2{
  margin: .7rem 0 .25rem;
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
}

.legal-card p{
  margin: 0 0 .6rem;
  line-height: 1.5;
  color: #eee;
}

.legal-card .last-updated{ margin-top: .8rem; opacity:.75; font-size:.95rem; }

/* Mobile weiterhin angenehm, aber ohne Card-Hintergrund */
@media (max-width:780px){
  .legal-card{ margin: 0 6vw 3rem; }
  .legal-card h2{ margin: .65rem 0 .25rem; }
}

/* === Legal Fine-Tune: compact spacing === */
body.legal::before{
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.18));
}

.legal-card{
  max-width: 52rem;
  margin: 0 auto 2.8rem;
  padding: .6rem 0 0;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Überschriften und Text rhythmisch enger */
.legal-card .title{ margin: 0 0 .25rem; }
.legal-card .intro{ margin: 0 0 .55rem; opacity:.9; }

.legal-card h2{
  margin: .55rem 0 .2rem;
  font-size: clamp(1.02rem, 1.2vw, 1.1rem);
  font-weight: 600;
}

.legal-card p{
  margin: 0 0 .45rem;
  line-height: 1.45;
  color: #f0f0f0;
}

/* Letzte Zeile */
.legal-card .last-updated{
  margin-top: .7rem;
  opacity: .75;
  font-size: .9rem;
}

/* Footer bleibt gleich, Mobile leicht angepasst */
@media (max-width:780px){
  .legal-card{ margin: 0 6vw 2.5rem; }
  .legal-card h2{ margin: .45rem 0 .2rem; }
}

/* === LEGAL — kompakt, aber mit etwas Luft um Überschriften === */
body.legal .content{
  max-width: 50rem;
  margin: 0 auto 2rem;
  padding-top: 2vh;
}

/* Überschrift + Unterzeile */
body.legal .content h1{ 
  margin: 0 0 .5rem; 
}
body.legal .content .intro{
  margin: 0 0 .8rem;
  opacity: .9;
}

/* Headlines mit etwas Luft */
body.legal .content h2{
  margin-top: .9rem;      /* mehr Abstand vor der Überschrift */
  margin-bottom: .4rem;   /* kleiner Abstand danach */
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  font-weight: 600;
}

/* Paragraphen bleiben eng und natürlich */
body.legal .content p,
body.legal .content li{
  margin: 0 0 .25rem;      /* nur dezenter Absatzabstand */
  line-height: 1.32;       /* dichter, wie im Original */
  color: #f0f0f0;
}

/* Footerzeile */
body.legal .content .last-updated{
  margin-top: .6rem;
  font-size: .9rem;
  opacity: .75;
}

/* Hintergrund leicht transparent, kein dunkler Kasten */
body.legal::before{
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.12));
}

/* Mobile minimal lockerer */
@media (max-width: 780px){
  body.legal .content{ margin: 0 6vw 2rem; }
  body.legal .content h2{ margin-top: .8rem; margin-bottom: .35rem; }
  body.legal .content p,
  body.legal .content li{ line-height: 1.34; }
}

/* === LEGAL: Fixed Panel (Desktop) + Mobile-Fallback === */

/* Desktop: Seite selbst nicht scrollen, Panel fixiert */
@media (min-width: 901px){
  body.legal{ overflow: hidden; }

  /* Panel im Viewport verankern */
  body.legal .content{
    position: fixed;
    /* Ränder zum Viewport – ggf. hier feintunen */
    top: 10vh;
    bottom: 12vh;           /* Platz für Footer-Glasleiste */
    left: 50%;
    transform: translateX(-50%);
    width: min(56rem, calc(100vw - 12vw));
    margin: 0;
    /* Lesbarkeit */
    line-height: 1.35;
    /* nur der Block scrollt */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile/Tablet: normales Verhalten (Seite scrollt) */
@media (max-width: 900px){
  body.legal{ overflow: auto; }
  body.legal .content{
    position: static;
    transform: none;
    width: auto;
    overflow: visible;
  }
}

/* === LEGAL: Headline nicht abschneiden + Innenabstand === */
body.legal .content{
  /* etwas Innenabstand, damit h1 nicht am Rand klebt/clippt */
  padding: 0.75rem 1rem 1rem;
}

/* Sicherheit: kein extra Außenabstand oben auf der Headline */
body.legal .content h1{
  margin-top: 0;
  padding-top: .2rem;
}

/* oben ein Tick mehr Luft, damit es überall sauber wirkt */
@media (min-width:901px){
  body.legal .content{ top: 12vh; }  /* vorher 10vh */
}

/* --- Legal: Headline darf nicht abgeschnitten werden --- */
body.legal main{
  /* genug Abstand nach oben, inkl. Notch/Safe-Area */
  padding-top: clamp(56px, 7vh, 96px) !important;
}

/* falls per Anker gesprungen wird, nicht unter die Kante scrollen */
body.legal .content h1{
  margin-top: 0;
  scroll-margin-top: 96px;
}

/* === VIGNETTE & GLASS-FEINSCHLIFF === */

/* Global: keine Vignette */
body::before {
  background: none !important;
}

/* Home: leichte, elegante Vignette */
body.home::before {
  background: linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.08)) !important;
}

/* Bio: glasklare Oberfläche */
body.bio article.card,
body.bio .presskit .card,
body.bio .presskit .thumb.pdf {
  background: rgba(0,0,0,.12) !important;   /* sehr leicht transparent */
  -webkit-backdrop-filter: blur(.5px);
  backdrop-filter: blur(.5px);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

/* === Bio: Helligkeit leicht anheben, damit ~gleich hell wie Home === */
body.bio::before{
  /* Das ::before-Element existiert bereits: wir geben nur eine helle,
     sehr dezente Overlay-Fläche, kein Blur, kein Heavy-Filter */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.10)
  ) !important;
}