/* ============================================================
   PRESTIGE · gemeinsames Aussehen der oeffentlichen Seiten
   Entwurf Grossformat: schwarzes Papier, warmes Weiss, Gold nur
   als Haarlinie. Hier stehen Farben, Schriften, die Kopfleiste
   und der Fuss. Seitenspezifisches bleibt in der jeweiligen
   Datei. Wer etwas an Farbe oder Schrift aendern will, aendert
   es hier und es gilt ueberall.
   ============================================================ */

:root{
  --pd-tinte:#07070A;      /* Hintergrund, dunkelste Flaeche */
  --pd-nacht:#0D0D11;      /* abgesetzte Flaeche, Fuss */
  --pd-papier:#F4F1EA;     /* Schrift auf dunkel, Flaeche auf hell */
  --pd-grau:#9A9690;       /* Fliesstext auf dunkel */
  --pd-grau2:#4D4A45;      /* Fliesstext auf hell */
  --pd-gold:#BE9B4A;
  --pd-linie:rgba(244,241,234,.14);
  --pd-linie-hell:rgba(7,7,10,.14);
  --pd-disp:'Instrument Serif',Didot,Georgia,serif;
  --pd-text:'Inter Tight','Helvetica Neue',Arial,sans-serif;
}

/* ---------- Kopfleiste ---------- */
.pd-leiste{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:35;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.pd-leiste.fest{background:rgba(7,7,10,.9);backdrop-filter:blur(14px);
  border-bottom-color:var(--pd-linie)}
.pd-leiste.immer{position:sticky;background:var(--pd-tinte);border-bottom-color:var(--pd-linie)}
.pd-leiste .pd-innen{display:flex;align-items:center;gap:18px;min-height:64px}
.pd-marke{font-family:var(--pd-disp);font-size:25px;letter-spacing:.02em;
  text-decoration:none;color:var(--pd-papier);line-height:1}
.pd-menuknopf{display:none;margin-left:auto;background:none;border:0;color:var(--pd-papier);
  font:500 14px var(--pd-text);letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;padding:10px 2px}
/* max-height und overflow stehen hier ausdruecklich drin, weil einzelne
   Seiten eine eigene Regel fuer nav mitbringen, die die Leiste sonst
   zusammenfaltet. Die Klasse gewinnt gegen den nackten Elementnamen. */
.pd-nav{display:flex;align-items:center;gap:26px;margin-left:auto;
  max-height:none;overflow:visible;flex-direction:row;border:0;padding:0}
.pd-nav a{text-decoration:none;font-family:var(--pd-text);font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pd-papier);opacity:.72;white-space:nowrap;
  padding:6px 0;border-bottom:1px solid transparent}
.pd-nav a:hover,.pd-nav a[aria-current=page]{opacity:1;border-bottom-color:var(--pd-gold)}
.pd-nav a.pit{color:var(--pd-gold);opacity:1}
.pd-nav .pd-zu{display:none}
@media(max-width:920px){
  .pd-menuknopf{display:block}
  .pd-nav{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:4px;background:var(--pd-nacht);margin:0;max-height:none;overflow:auto;
    padding:0 max(22px,env(safe-area-inset-left,0px))}
  .pd-nav[hidden]{display:none}
  .pd-nav a{font-family:var(--pd-disp);font-size:clamp(30px,9vw,46px);letter-spacing:0;
    text-transform:none;opacity:1;padding:11px 0;border:0}
  .pd-nav .pd-zu{display:block;position:absolute;right:max(22px,env(safe-area-inset-right,0px));
    top:calc(env(safe-area-inset-top,0px) + 18px);background:none;border:0;color:var(--pd-papier);
    font:500 14px var(--pd-text);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 2px}
}

/* ---------- Fuss ---------- */
.pd-fuss{border-top:1px solid var(--pd-linie);background:var(--pd-nacht);
  color:var(--pd-grau);font-family:var(--pd-text);padding:38px 0 46px}
.pd-fuss .pd-imp{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:14px;line-height:1.8}
@media(max-width:700px){.pd-fuss .pd-imp{grid-template-columns:1fr}}
.pd-fuss .pd-imp b{display:block;font-family:var(--pd-disp);font-size:21px;font-weight:400;
  color:var(--pd-papier);margin-bottom:6px}
.pd-fuss a{color:var(--pd-grau)}
.pd-fuss .fehlt{font-style:italic;opacity:.8}
.pd-regionen{margin-top:28px;padding-top:20px;border-top:1px solid var(--pd-linie);
  font-size:13px;display:flex;flex-wrap:wrap;gap:7px 20px}
.pd-regionen a{text-decoration:none}
.pd-regionen a:hover{color:var(--pd-gold)}
.pd-regionen span{width:100%;font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.55}

/* ---------- Bausteine, die auf mehreren Seiten vorkommen ---------- */
.pd-innen{max-width:1240px;margin:0 auto}
.pd-gutter{padding-left:max(22px,env(safe-area-inset-left,0px));
  padding-right:max(22px,env(safe-area-inset-right,0px))}
.pd-marker{font-family:var(--pd-text);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pd-grau);padding-bottom:16px;border-bottom:1px solid var(--pd-linie);
  margin-bottom:clamp(26px,4vh,46px)}
.pd-knopf{display:inline-block;background:var(--pd-papier);color:var(--pd-tinte);text-decoration:none;
  font-family:var(--pd-text);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 26px;border:0;cursor:pointer}
.pd-knopf:hover{background:var(--pd-gold);color:var(--pd-tinte)}
.pd-knopf.dunkel{background:var(--pd-tinte);color:var(--pd-papier)}
.pd-knopf.dunkel:hover{background:var(--pd-gold);color:var(--pd-tinte)}

/* Abschnitte kommen beim Scrollen herein. Verdeckt wird nur per
   Skript, damit ohne Javascript alles sichtbar bleibt. */
.pd-kommt{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.pd-kommt.verdeckt{opacity:0;transform:translateY(34px)}
@media(prefers-reduced-motion:reduce){
  .pd-kommt{transition:none}
  .pd-kommt.verdeckt{opacity:1;transform:none}
}