/* ============================================================
   Bauspielplatz Ost — Modern/Minimal Redesign
   ------------------------------------------------------------
   Viel Weißraum, ruhige Farbpalette, klare Typografie,
   dezente Schatten statt verspielter Rotationen.
   ============================================================ */

:root {
  --bg:         #FAFAF8;
  --surface:    #FFFFFF;
  --ink:        #1F2421;
  --ink-soft:   #5B6360;
  --line:       #E7E5E0;
  --accent:     #C9682F;   /* warmes Terrakotta, ein einziger Akzent */
  --accent-soft:#F3E4D8;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(31,36,33,0.06), 0 4px 16px -8px rgba(31,36,33,0.12);
  --content-max: 880px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Grundlagen ---------- */

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
a:hover, a:focus-visible { color: #a3521f; }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.hintergrund { overflow-x: hidden; }

.container.content {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.container.content > div:first-child { text-align: center; }

.container.content .welcome {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.abschnitt > .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Navigation ---------- */

.sub-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 24px auto;
  padding: 6px;
  max-width: fit-content;
  box-shadow: var(--shadow);
}

.sub-menu.stick-to-top {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
}

#sub-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
}

#sub-menu li a.scrollLink {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

#sub-menu li a.scrollLink:hover,
#sub-menu li a.scrollLink:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.menu-icon { font-size: 15px; opacity: 0.8; }

/* ---------- Willkommensbild ---------- */

.welcome {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 12px 0 40px;
}

/* ---------- Abschnitte ---------- */

.abschnitt {
  padding-top: 56px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.abschnitt:first-of-type {
  border-top: none;
  padding-top: 24px;
}

.row-was-fragen {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}
.row-was-fragen > .col-md-1 { display: none; }
.row-was-fragen > div[class*="col-md-8"] {
  flex: 2 1 480px;
  margin-left: 0;
  margin-right: 0;
}
.row-was-fragen > div[class*="col-md-3"] {
  flex: 1 1 260px;
}
@media (max-width: 767px) {
  .row-was-fragen { flex-direction: column; }
}

.abschnitt > .row > div[class*="col-md-10"],
.abschnitt > .row > div[class*="col-md-11"],
.abschnitt > .row > div[class*="col-md-8"],
.abschnitt > .row > div[class*="col-md-7"] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  margin: 8px 0 22px;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.abschnitt > .row > div[class*="col-md-10"] p,
.abschnitt > .row > div[class*="col-md-10"] ul,
.abschnitt > .row > div[class*="col-md-8"] p,
.abschnitt > .row > div[class*="col-md-8"] ul,
.abschnitt > .row > div[class*="col-md-7"] p,
.abschnitt > .row > div[class*="col-md-7"] ul {
  text-align: left;
  color: var(--ink-soft);
}

.abschnitt > .row > div[class*="col-md-10"] ul,
.abschnitt > .row > div[class*="col-md-8"] ul {
  display: block;
  margin: 0 0 16px;
  padding-left: 20px;
}

#news .news,
.abschnitt .row > div[class*="col-md-7"] .news {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 767px) {
  .abschnitt > .row > div[class*="col-md-10"],
  .abschnitt > .row > div[class*="col-md-11"],
  .abschnitt > .row > div[class*="col-md-8"],
  .abschnitt > .row > div[class*="col-md-7"] {
    padding: 22px 18px;
  }
}

/* ---------- Überschriften ---------- */

.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
  display: block;
  text-align: left;
  margin: 0 0 18px;
}

.section-heading--small {
  font-size: 17px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

h3 { font-family: var(--font-body); font-weight: 700; color: var(--ink); }

/* ---------- Fragen / Kontakt-Box ---------- */

.kontakt {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  height: 100%;
  box-sizing: border-box;
}
.kontakt .section-heading { color: var(--ink); }
.kontakt p { color: var(--ink-soft); }
.kontakt a { display: inline-block; margin-top: 10px; }
.kontakt .igel { max-width: 56px; }

/* ---------- Maskottchen (Igel) ---------- */

.igel img { opacity: 0.9; }

/* ---------- News- / Flyer-Karten ---------- */

.news {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 18px;
  max-width: 320px;
  box-shadow: var(--shadow);
  text-align: left;
}
.news h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.news img {
  border-radius: 6px;
  max-width: 100%;
}

/* ---------- Flyer-Archiv ---------- */

.flyer-archiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px 16px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

.flyer-archiv > h2 {
  flex-basis: 100%;
  width: 100%;
}

.flyer-archiv > h2:not(.section-heading) {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 28px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.flyer-archiv > h2:not(.section-heading):first-of-type {
  border-top: none;
  margin-top: 0;
}

.flyer-item {
  flex: 0 1 160px;
  max-width: 180px;
  margin: 0;
}

.flyer-item h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

.flyer-item img {
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.flyer-row {
  width: 100%;
  flex-basis: 100%;
}

.flyer-row--2025 {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px 16px;
}

/* ---------- Team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.teampic {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0;
  width: 100%;
  max-width: 190px;
  box-shadow: var(--shadow);
  text-align: center;
  float: none;
}
.teampic img { border-radius: 6px; }
.teampic h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

@media (max-width: 767px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Selbstverständnis / Downloads ---------- */

.link { text-align: left; padding: 0; }
.link a {
  display: block;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.link a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Partner ---------- */

ul li.partner { list-style: none; margin-bottom: 10px; }
ul li.partner a {
  display: inline-block;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
ul li.partner a:hover { border-color: var(--accent); color: var(--accent); }

.partner-logo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.partner-logo:hover { filter: grayscale(0%); opacity: 1; }

.footer {
  margin: 32px auto 0;
  padding: 24px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  max-width: 100%;
  text-align: center;
}

.footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.footer .partner-logo {
  max-width: 110px;
  margin: 0 auto;
}

/* ---------- Fotogalerie ---------- */

.foto-oeffner {
  text-align: left;
  max-width: 320px;
  margin: 0;
}
.foto-oeffner img {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  max-width: 100%;
}
.foto-oeffner a { display: inline-block; margin-top: 10px; }

.column { padding: 8px; }
.column img {
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.modal { background: rgba(20,22,20,0.94); }
.modal .modal-content,
.site-content .modal .modal-content {
  width: min(90vw, 800px) !important;
  max-width: 800px !important;
  margin: 40px auto !important;
}
.modal .modal-content .mySlides img,
.site-content .modal .modal-content .mySlides img {
  border-radius: var(--radius);
  border: none;
  width: 100% !important;
  height: 70vh !important;
  max-height: 560px !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}
@media (max-width: 767px) {
  .modal .modal-content,
  .site-content .modal .modal-content {
    width: 94vw !important;
    margin: 20px auto !important;
  }
  .modal .modal-content .mySlides img,
  .site-content .modal .modal-content .mySlides img {
    height: 50vh !important;
    max-height: 360px !important;
  }
}
.modal .close {
  background: var(--surface);
  color: var(--ink) !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.modal .prev,
.modal .next {
  background: var(--surface);
  color: var(--ink) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- iframe (YouTube) ---------- */

iframe {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 100%;
}