/* Self-hosted variable font: Big Shoulders */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/big-shoulders-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Root palette */
:root{
  --pink-1:#F5CEEB;
  --pink-2:#F5B0E6;
  --black:#000000;
  --text:#f5f5f5;
  --frame:#1f1f1f;
  --frame-bg:#0e0e0e;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: "Big Shoulders", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background:var(--black);
  color:var(--text);
  line-height:1.6;
}

/* Header mit Logos */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 1rem;
  background:#090909;
  border-bottom:1px solid #1b1b1b;
}
.brand img{
  display:block;
  height:48px;
  width:auto;
  object-fit:contain;
}
.brand--right img{
  height:128px;
  width:auto;
}
@media (max-width:720px){
  .brand img{height:36px}
  .brand--right img{height:36px}
}

header{
  text-align:center;
  padding:2.5rem 1rem 2rem;
  background:linear-gradient(135deg,var(--pink-2),var(--black));
  color:#000;
}
header h1{
  margin:0 0 .5rem;
  font-size:2rem;
  color:var(--pink-1);
}
header p{
  margin:0;
  font-size:1.05rem;
  color:var(--text);
  opacity:.9;
}

section{
  max-width:900px;
  margin:2rem auto;
  padding:0 1rem;
}
h2{
  margin:2rem 0 1rem;
  font-size:1.5rem;
  color:var(--pink-1);
  display:inline-block;
  padding-bottom:.3rem;
  border-bottom:2px solid var(--pink-2);
}
ul{margin:0; padding:0; list-style:none}
ul li{margin:.7rem 0}
a{color:var(--pink-2); text-decoration:none; font-weight:700}
a:hover{color:var(--pink-1); text-decoration:underline}
.icon,i{margin-right:.5rem; color:var(--pink-1)}

/* Einheitliche Bilddarstellung */
.figure{
  margin:1rem auto 1.25rem;
  border:1px solid var(--frame);
  background:var(--frame-bg);
  border-radius:12px;
  overflow:hidden;
  width:100%;
}
.figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

/* Spezifische Maximalbreiten + Ratio per Typ */
.figure--16x9{
  max-width:900px;
  aspect-ratio:16/9;
}
.figure--poster{
  max-width:480px;
  aspect-ratio:1080/1350;
}
.figure--avatar{
  max-width:480px;
  aspect-ratio:1170/1623;
}

/* Responsive embeds */
.embed {
  margin: 1rem auto 1.25rem;
  max-width: 900px; /* matches .figure--16x9 width */
}

/* Modern approach (preferred): native aspect-ratio */
.embed iframe,
.embed .podigee-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Compatibility fallback using intrinsic ratio box */
.embed.embed--intrinsic {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}
.embed.embed--intrinsic iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Podigee audio players can be shorter; override if desired */
.embed--audio iframe {
  aspect-ratio: auto;     /* audio players are not 16:9 */
  height: 120px;          /* reasonable default for audio iframe */
}


footer{
  text-align:center;
  margin-top:3rem;
  padding:2rem 1rem;
  background:#111;
  font-size:.9rem;
}
footer a{color:var(--pink-2); text-decoration:none}
footer a:hover{color:var(--pink-1); text-decoration:underline}