/* LOLA POUR — lolapour.com
   Handgeschriebenes CSS, keine externen Abhaengigkeiten.
   Farbwelt uebernommen von der alten Google-Sites-Seite:
   Pink #E10E79, Schwarz, Weiss, Hellgrau #F2F2F2 / #E9E8E8   */

:root {
  --pink: #e10e79;
  --pink-dunkel: #b00b5f;
  --schwarz: #000000;
  --anthrazit: #1f2020;
  --weiss: #ffffff;
  --grau: #f2f2f2;
  --grau-2: #e9e8e8;
  --text: #202124;
  --text-hell: #5f6368;
  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --breite: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pink); }
a:hover, a:focus { color: var(--pink-dunkel); }

/* --- Sprungmarke fuer Tastatur und Screenreader --- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--pink); color: #fff; padding: .6em 1em; z-index: 100;
}
.skip:focus { left: 0; }

/* --- Ankuendigungsbalken --- */
.balken {
  background: var(--pink);
  color: var(--weiss);
  text-align: center;
  padding: .9rem 1rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem 1.4rem;
}
.balken a.knopf {
  color: var(--weiss);
  border: 1px solid rgba(255,255,255,.85);
  padding: .45em 1.3em;
  text-decoration: none;
  letter-spacing: .06em;
  white-space: nowrap;
}
.balken a.knopf:hover, .balken a.knopf:focus {
  background: var(--weiss);
  color: var(--pink);
}

/* --- Kopfzeile und Navigation --- */
.kopf {
  background: var(--schwarz);
  color: var(--weiss);
  position: sticky;
  top: 0;
  z-index: 50;
}
.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: .7rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.6rem;
}
.marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--weiss);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
/* Wortmarke von der alten Google-Sites-Seite (250 x 111 px, JPEG mit
   schwarzem Hintergrund - passt exakt zur schwarzen Kopfzeile).
   Ersatzfarbe Pink bleibt als Rueckfall, falls das Bild fehlt. */
.marke .logo {
  width: 59px; height: 26px;
  background: var(--pink) url("bilder/logo-lolapour.jpg") center/contain no-repeat;
  display: inline-block;
  flex: none;
}

.hauptnav { margin-left: auto; }
.hauptnav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.1rem;
}
.hauptnav a {
  color: var(--weiss);
  text-decoration: none;
  font-family: var(--serif);
  font-size: .97rem;
  padding: .35em 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.hauptnav a:hover, .hauptnav a:focus { color: var(--pink); }
.hauptnav a[aria-current="page"] {
  font-weight: 700;
  border-bottom-color: var(--pink);
  color: var(--weiss);
}

@media (max-width: 720px) {
  .kopf { position: static; }
  .kopf-innen { padding: .8rem 1rem; }
  .hauptnav { margin-left: 0; width: 100%; }
  .hauptnav ul { gap: .1rem .9rem; }
  .hauptnav a { font-size: .92rem; }
}

/* --- Kopfbild (Hero) --- */
.hero {
  position: relative;
  background: var(--anthrazit);
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.2rem;
  overflow: hidden;
}
/* Das Kopfbild ist rein dekorativ und liegt deshalb - wie auf der alten
   Seite - als CSS-Hintergrund vor. Fehlt die Datei noch, bleibt einfach
   die dunkle Flaeche stehen; es erscheint kein gebrochenes Bildsymbol. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--anthrazit) url("bilder/hero-clubsaal-lichtanlage.jpg") center / cover no-repeat;
  opacity: .55;
}
.hero-text {
  position: relative;
  color: var(--weiss);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5.2vw, 3.1rem);
  line-height: 1.28;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
@media (max-width: 720px) { .hero { min-height: 46vh; padding: 3rem 1rem; } }

/* --- Abschnitte --- */
.abschnitt { padding: 3.2rem 1.2rem; }
.abschnitt.grau { background: var(--grau); }
.abschnitt.grau-2 { background: var(--grau-2); }
.innen { max-width: var(--breite); margin: 0 auto; }
.innen.schmal { max-width: 780px; }

h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.25;
  color: var(--text);
}
h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); margin: 0 0 1.4rem; }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.85rem); margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
h2.pink { color: var(--pink); }

p { margin: 0 0 1.1rem; }
.klein { font-size: .93rem; color: var(--text-hell); }

.zitat {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-style: italic;
  text-align: center;
  color: var(--pink);
  margin: 2.4rem auto;
  max-width: 760px;
  line-height: 1.4;
}

/* --- Releases-Liste --- */
.releases { list-style: none; margin: 0; padding: 0; }
.releases li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.releases li:last-child { border-bottom: 0; }
.releases .titel { font-family: var(--serif); font-size: 1.08rem; }
.releases a { word-break: break-all; font-size: .92rem; }

/* --- Fakten-Bloecke --- */
.fakten { margin: 1.6rem 0; }
.fakten dt {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--pink);
  margin-top: 1.1rem;
}
.fakten dd { margin: .25rem 0 0; }

/* --- Ausklappbare Bloecke (details/summary, kein JavaScript) --- */
details.block {
  border-top: 1px solid rgba(0,0,0,.14);
  padding: .3rem 0;
}
details.block:last-of-type { border-bottom: 1px solid rgba(0,0,0,.14); }
details.block > summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  padding: 1rem .2rem;
  list-style: none;
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::before { content: "+ "; color: var(--pink); font-weight: 700; }
details.block[open] > summary::before { content: "– "; }
details.block > summary:hover { color: var(--pink); }
details.block .inhalt { padding: 0 .2rem 1.4rem; }

/* --- Bildraster und Platzhalter --- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.raster.breit { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

figure { margin: 0; }
figure img, .platzhalter {
  width: 100%;
  border-radius: 2px;
}
.platzhalter {
  background: var(--grau-2) repeating-linear-gradient(
    45deg, transparent, transparent 12px,
    rgba(0,0,0,.035) 12px, rgba(0,0,0,.035) 24px);
  border: 1px dashed rgba(0,0,0,.22);
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: .82rem;
  color: var(--text-hell);
  line-height: 1.4;
  word-break: break-word;
}
.platzhalter.quer { aspect-ratio: 16 / 9; }
figcaption {
  font-size: .88rem;
  color: var(--text-hell);
  margin-top: .5rem;
  line-height: 1.4;
}

/* --- Linklisten --- */
.linkliste { list-style: none; margin: .8rem 0 0; padding: 0; }
.linkliste li { padding: .42rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.linkliste li:last-child { border-bottom: 0; }
.linkliste a { word-break: break-all; }
.linkliste .dienst {
  display: inline-block;
  min-width: 9.5em;
  font-family: var(--serif);
  font-weight: 700;
}
@media (max-width: 560px) { .linkliste .dienst { min-width: 0; display: block; } }

/* --- Grosser Kontaktknopf --- */
.knopf-gross {
  display: inline-block;
  background: var(--pink);
  color: var(--weiss);
  text-decoration: none;
  padding: .85em 2.1em;
  font-family: var(--serif);
  font-size: 1.05rem;
  border-radius: 2px;
}
.knopf-gross:hover, .knopf-gross:focus { background: var(--pink-dunkel); color: var(--weiss); }

.kontakt-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.kontakt-zeile p { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; }

/* --- Rechtstexte --- */
.recht h2 { margin-top: 2.2rem; font-size: 1.2rem; }
.recht h2:first-of-type { margin-top: 0; }
.recht ul { padding-left: 1.3rem; }
.recht li { margin-bottom: .4rem; }
.recht address { font-style: normal; margin: .6rem 0 1.2rem; }
.hinweis {
  background: var(--grau);
  border-left: 4px solid var(--pink);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  font-size: .93rem;
}

/* --- Fusszeile --- */
.sozial {
  background: var(--pink);
  padding: 2rem 1.2rem;
}
.sozial ul {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .9rem;
}
.sozial a {
  display: block;
  text-align: center;
  background: var(--weiss);
  color: var(--pink);
  text-decoration: none;
  padding: .7em .6em;
  font-family: var(--serif);
  border-radius: 2px;
}
.sozial a:hover, .sozial a:focus { background: var(--schwarz); color: var(--weiss); }

.fuss {
  background: var(--weiss);
  padding: 2.2rem 1.2rem 3rem;
  text-align: center;
  font-size: .9rem;
  color: var(--text-hell);
}
.fuss p { margin: 0 0 .8rem; }
.fuss nav ul {
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .9rem;
}
.fuss nav li + li::before { content: "| "; color: rgba(0,0,0,.3); }
.fuss a { color: var(--text-hell); text-decoration: underline; }
.fuss a:hover, .fuss a:focus { color: var(--pink); }

/* --- Druck --- */
@media print {
  .balken, .kopf, .sozial { display: none; }
  body { font-size: 12pt; }
  details.block { border: 0; }
  details.block > summary { font-size: 1.05rem; }
}