/* Gemeinsames Stylesheet der Unterseiten.
   Farben und Schriften sind aus index.html uebernommen — dort stehen sie
   inline, weil die Startseite eine einzelne Datei ist. Neue Seiten teilen
   sich diese Datei, damit eine Designaenderung nicht an n Stellen passiert. */

:root {
  --black:#0a0a0a; --dark:#111111; --card:#181818;
  --border:#2a2a2a; --gold:#c9a96e; --gold-light:#e2c99a;
  --white:#f5f0e8; --muted:#888;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--sans); font-weight:300; font-size:1rem; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--gold);}

.bahn{max-width:52rem;margin:0 auto;padding:0 6%;}

/* Kopfleiste */
.kopf{
  position:sticky;top:0;z-index:10;background:rgba(10,10,10,.94);
  border-bottom:1px solid var(--border);backdrop-filter:blur(8px);
}
.kopf-innen{
  max-width:72rem;margin:0 auto;padding:1rem 6%;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--white);}
.marke img{width:26px;height:26px;}
.marke span{font-family:var(--serif);font-size:1.3rem;letter-spacing:.06em;}
.kopf-links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.kopf-links a{
  color:var(--white);opacity:.8;text-decoration:none;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.kopf-links a:hover{opacity:1;color:var(--gold);}
.kopf-cta{
  border:1px solid var(--gold);color:var(--gold);text-decoration:none;
  padding:.45rem 1.1rem;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
}
.kopf-cta:hover{background:var(--gold);color:var(--black);}

/* Titelbereich */
.titelbereich{padding:4.5rem 0 2.5rem;text-align:center;}
.oberzeile{
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
h1{
  font-family:var(--serif);font-weight:300;line-height:1.1;
  font-size:clamp(2.3rem,6vw,3.6rem);margin:0 0 1.4rem;
}
h1 em{font-style:italic;color:var(--gold-light);}
.vorspann{font-size:1.08rem;line-height:1.8;color:#cfc9c0;max-width:38em;margin:0 auto;}
.gold-linie{width:40px;height:1px;background:var(--gold);margin:2.5rem auto 0;border:0;}

/* Fliesstext */
main{padding-bottom:4rem;}
h2{
  font-family:var(--serif);font-weight:300;line-height:1.15;
  font-size:clamp(1.7rem,4vw,2.4rem);margin:3.5rem 0 1.2rem;
}
h2 em{font-style:italic;color:var(--gold-light);}
h3{font-size:1rem;font-weight:500;letter-spacing:.02em;margin:2rem 0 .5rem;color:var(--gold-light);}
p{margin:0 0 1.3rem;color:#c8c2ba;}
strong{color:var(--white);font-weight:500;}

/* Faktenkasten */
.fakten{
  background:var(--card);border:1px solid var(--border);
  padding:1.8rem 1.8rem .6rem;margin:2rem 0;
}
.fakten dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.6rem;}
.fakten dt{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding-top:.35rem;white-space:nowrap;
}
.fakten dd{margin:0 0 .9rem;color:var(--white);}

/* Frage-Antwort */
.fa{border-top:1px solid var(--border);padding:1.4rem 0;}
.fa:last-of-type{border-bottom:1px solid var(--border);}
.fa h3{margin:0 0 .5rem;color:var(--white);font-size:1.02rem;font-weight:500;}
.fa p{margin:0;}

/* Handlungsaufforderung */
.cta-block{
  border:1px solid var(--border);background:var(--card);
  padding:2.4rem 2rem;text-align:center;margin:3.5rem 0 0;
}
.cta-block p{margin:0 0 1.6rem;}
.knopf{
  display:inline-block;padding:.85rem 2.2rem;border:1px solid var(--gold);
  color:var(--gold);text-decoration:none;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;margin:.3rem;
}
.knopf:hover{background:var(--gold);color:var(--black);}
.knopf.voll{background:var(--gold);color:var(--black);}
.knopf.voll:hover{background:var(--gold-light);border-color:var(--gold-light);}

/* Fuss */
.fuss{border-top:1px solid var(--border);padding:2.5rem 0;text-align:center;
  font-size:.76rem;color:var(--muted);line-height:2;}
.fuss a{color:var(--gold-light);text-decoration:none;}

/* Unterhalb von 900px passen Marke + 5 Links + Telefon nicht mehr in eine Zeile.
   Statt die Links umbrechen und unter die Marke rutschen zu lassen, bekommen sie
   eine eigene, volle Zeile. */
@media (max-width:900px){
  .kopf-innen{flex-wrap:wrap;row-gap:.7rem;justify-content:space-between;}
  .kopf-links{order:3;width:100%;justify-content:center;gap:1.1rem;
    border-top:1px solid var(--border);padding-top:.7rem;}
}
@media (max-width:640px){
  .kopf-links{gap:.8rem;font-size:.9em;}
  .marke span{font-size:1.15rem;}
  .fakten dl{grid-template-columns:1fr;gap:0;}
  .fakten dt{padding-top:.8rem;}
  .cta-block{padding:1.8rem 1.2rem;}
}