/* Popphilosophie – Platzhalterseite
   Angelehnt an das frühere Theme „Hemingway“: großes dunkles Kopfbild,
   zentrierter Titel, ruhige Textspalte, Akzentfarbe Türkis.
   Keine externen Schriften (Datenschutz): Systemschriften als Ersatz für Lato/Raleway. */

:root {
  --akzent: #1abc9c;
  --akzent-dunkel: #16a085;
  --text: #444;
  --text-hell: #777;
  --linie: #e4e4e4;
  --hinter: #fff;
  --kopf: #111;
  --spalte: 44rem;
  --schrift: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --titel: "Raleway", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hinter);
  color: var(--text);
  font: 1.0625rem/1.75 var(--schrift);
}

a { color: var(--akzent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--akzent-dunkel); text-decoration: underline; }

/* ---------- Kopf ---------- */
.kopf {
  background-color: var(--kopf);
  /* KOPFBILD: Datei nach /bilder legen und Zeile einkommentieren:
  background-image: url("bilder/cropped-Schwarzbild_Homepage.jpg"); */
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 5.5rem 1rem 5rem;
}

.kopf-inhalt { max-width: var(--spalte); margin: 0 auto; }

.logo {
  display: block;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.85);
}

.logo-platzhalter {
  display: grid;
  place-items: center;
  font: 600 .8rem/1 var(--titel);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  border-style: dashed;
  border-color: rgba(255,255,255,.35);
}

.titel {
  margin: 0;
  font: 700 clamp(2rem, 6vw, 3rem)/1.15 var(--titel);
  letter-spacing: .02em;
}

.untertitel {
  margin: .5rem 0 0;
  font: 400 1.05rem/1.4 var(--titel);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* ---------- Inhalt ---------- */
main { max-width: var(--spalte); margin: 0 auto; padding: 0 1rem; }

.hinweis {
  text-align: center;
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--linie);
}

.hinweis .gross {
  margin: 0 0 .75rem;
  font: 700 clamp(1.6rem, 4.5vw, 2.1rem)/1.2 var(--titel);
  color: #222;
}

.hinweis .gross::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--akzent);
  margin: 1rem auto 0;
}

.hinweis p:last-child { margin: 1.25rem auto 0; max-width: 34rem; color: var(--text-hell); }

.block { padding: 3rem 0; border-bottom: 1px solid var(--linie); }
.block:last-of-type { border-bottom: 0; }

h2 {
  margin: 0 0 1.5rem;
  font: 700 .85rem/1.3 var(--titel);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-hell);
}

.lead {
  margin: 0 0 .75rem;
  font: 700 1.45rem/1.3 var(--titel);
  color: #222;
}

.klein { font-size: .9rem; color: var(--text-hell); margin: 1.5rem 0 0; }

/* ---------- Videos ---------- */
.videos {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.video { margin: 0; }

.video-start,
.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
}

.video-start {
  position: relative;
  cursor: pointer;
  background: linear-gradient(135deg, #1d1d1d, #2e2e2e);
  color: #fff;
  font: inherit;
  overflow: hidden;
}

.video-start:hover, .video-start:focus-visible { background: linear-gradient(135deg, #222, #3a3a3a); outline: none; }
.video-start:focus-visible { box-shadow: 0 0 0 3px var(--akzent); }

.play {
  position: absolute;
  top: 50%; left: 50%;
  width: 4rem; height: 4rem;
  margin: -2.4rem 0 0 -2rem;
  border-radius: 50%;
  background: var(--akzent);
  transition: transform .15s ease;
}

.play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .7rem 0 .7rem 1.15rem;
  border-color: transparent transparent transparent #fff;
}

.video-start:hover .play { transform: scale(1.08); }

.video-hinweis {
  position: absolute;
  left: 0; right: 0; bottom: .7rem;
  font-size: .75rem;
  color: rgba(255,255,255,.6);
}

.video figcaption {
  margin-top: .6rem;
  font: 700 1.05rem/1.35 var(--titel);
  color: #222;
}

/* ---------- Poster ---------- */
.poster {
  display: block;
  margin: 2rem auto 0;
  max-width: 34rem;
  text-align: center;
}

.poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
}

.poster-hinweis { display: inline-block; margin-top: .75rem; font-size: .9rem; }

audio { width: 100%; margin-top: .5rem; }

/* ---------- Fuß ---------- */
.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  padding: 2rem 1rem;
  background: #1d1d1d;
  color: #999;
  font-size: .85rem;
}

.fuss a { color: #ccc; }
.fuss a:hover { color: var(--akzent); }

/* ---------- Impressum ---------- */
.rechtliches { padding: 3rem 0; }
.rechtliches h1 { font: 700 1.8rem/1.2 var(--titel); color: #222; margin: 0 0 2rem; }
.rechtliches h2 { margin-top: 2.5rem; }
.rechtliches h3 { font: 700 1.05rem/1.4 var(--titel); color: #222; margin: 2rem 0 .5rem; }
.rechtliches p { margin: 0 0 1rem; }
.zurueck { display: inline-block; margin-bottom: 2rem; font-size: .9rem; }
.kopf.schmal { padding: 2.5rem 1rem 2.25rem; }
.kopf.schmal .titel { font-size: 1.6rem; }
.kopf.schmal a { color: #fff; text-decoration: none; }