/* ============================================================
   jpf. studios — Rechtsseiten (Impressum / Datenschutz)
   Schlankes Lese-Layout im cineastischen Look der Hauptseite.
   Nutzt fonts.css (lokal gehostete Schriften).
   ============================================================ */

:root{
  --navy:      #181A5E;
  --navy-2:    #14164E;
  --ink:       #0A0B28;
  --indigo:    #2A2E90;
  --cream:     #F4EFE3;
  --gold:      #C9A46A;
  --gold-hi:   #E6C98E;

  --cream-08:  rgba(244,239,227,.08);
  --cream-14:  rgba(244,239,227,.14);
  --cream-45:  rgba(244,239,227,.45);
  --cream-62:  rgba(244,239,227,.62);
  --cream-80:  rgba(244,239,227,.80);

  --maxw: 900px;
  --pad: clamp(20px, 5vw, 84px);
  --ease: cubic-bezier(.19,1,.22,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--navy); color:var(--cream);
  font-family:"Schibsted Grotesk", sans-serif; font-weight:400;
  line-height:1.7; letter-spacing:.005em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column;
}
::selection{ background:var(--gold); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:"Fraunces", serif; font-weight:400; line-height:1.02; letter-spacing:-.015em; }

/* Film-grain overlay */
.grain{
  position:fixed; inset:-50%; width:200%; height:200%;
  background-image:var(--grain); opacity:.05; z-index:9000; pointer-events:none; mix-blend-mode:overlay;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Header ---------- */
.lheader{
  position:sticky; top:0; z-index:800; padding-block:16px;
  background:rgba(20,22,78,.78); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--cream-08);
}
.lheader__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.lbrand img{ height:28px; width:auto; transition:opacity .4s; }
.lbrand:hover img{ opacity:.82; }
.lback{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Space Mono", monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-80); border:1px solid var(--cream-14); border-radius:999px; padding:.7em 1.2em; transition:.4s var(--ease);
}
.lback:hover{ color:var(--ink); background:var(--gold); border-color:var(--gold); }

/* ---------- Hero / page head ---------- */
.lhero{ padding-block:clamp(48px,8vw,96px) clamp(24px,4vw,44px); position:relative; }
.lhero__eyebrow{
  display:inline-flex; align-items:center; gap:.85em;
  font-family:"Space Mono", monospace; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.lhero__eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); opacity:.6; }
.lhero__title{ font-size:clamp(2.6rem,8vw,5rem); margin-top:.35em; }
.lhero__title em{ font-style:italic; color:var(--gold); }
.lhero__meta{ margin-top:1.2em; font-family:"Space Mono", monospace; font-size:.68rem; letter-spacing:.18em; color:var(--cream-45); text-transform:uppercase; }

/* ---------- Content flow ---------- */
main{ flex:1 0 auto; padding-bottom:clamp(56px,8vw,110px); }

.note{
  border:1px solid var(--gold); background:rgba(201,164,106,.08); border-radius:8px;
  padding:clamp(16px,2.4vw,24px); margin-bottom:clamp(32px,5vw,56px);
  font-size:.94rem; color:var(--cream-80);
}
.note b{ color:var(--gold-hi); font-weight:400; font-family:"Fraunces", serif; }

.prose > section{ margin-bottom:clamp(30px,4.5vw,52px); }
.prose h2{
  font-size:clamp(1.5rem,3.2vw,2.1rem); color:var(--cream); margin-bottom:.6em;
  padding-top:clamp(14px,2vw,20px); border-top:1px solid var(--cream-14);
  display:flex; align-items:baseline; gap:.7em;
}
.prose h2 .no{ font-family:"Space Mono", monospace; font-size:.72rem; letter-spacing:.2em; color:var(--gold); }
.prose h3{ font-size:clamp(1.1rem,2vw,1.35rem); color:var(--cream); margin:1.5em 0 .4em; }
.prose p{ color:var(--cream-80); margin-bottom:1em; max-width:70ch; }
.prose ul{ list-style:none; margin:0 0 1em; padding:0; max-width:70ch; }
.prose li{ color:var(--cream-80); position:relative; padding-left:1.5em; margin-bottom:.5em; }
.prose li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
.prose a{ color:var(--gold-hi); border-bottom:1px solid var(--cream-14); transition:border-color .3s; }
.prose a:hover{ border-bottom-color:var(--gold); }
.prose strong{ color:var(--cream); font-weight:600; }
.prose small{ font-family:"Space Mono", monospace; font-size:.66rem; letter-spacing:.16em; color:var(--cream-45); text-transform:uppercase; }

/* Highlighted placeholder — leicht auffindbar zum Ausfüllen */
.ph{
  font-family:"Space Mono", monospace; font-size:.9em; color:var(--gold-hi);
  background:rgba(201,164,106,.14); border:1px dashed rgba(201,164,106,.5);
  padding:.05em .45em; border-radius:4px; overflow-wrap:break-word;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

.addr{ font-style:normal; color:var(--cream-80); line-height:1.9; }

/* ---------- Footer ---------- */
.lfooter{
  flex-shrink:0; background:var(--ink); border-top:1px solid var(--cream-08);
  padding-block:28px; font-family:"Space Mono", monospace; font-size:.66rem;
  letter-spacing:.14em; color:var(--cream-45); text-transform:uppercase;
}
.lfooter__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.lfooter a{ color:var(--cream-62); transition:color .3s; }
.lfooter a:hover{ color:var(--gold); }

@media (max-width: 560px){
  .lhero__title{ font-size:clamp(2.2rem,11vw,3.2rem); }
  .prose h2{ flex-direction:column; gap:.2em; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
}