/* Erlebnisgarten Zwickau, Stildatei.

   Die Farben stammen aus dem Logo: das Gruen der Blaetter, das Lila des
   Lavendels, das Braun des Stammes, das warme Gelb der Note. Bewusst anders
   als beim Liederkarussell, das ist eine eigene Sache mit eigenem Traeger.

   Eine lange Seite mit Sprungmarken. Das Menue bleibt oben stehen, damit man
   von jeder Stelle aus wechseln kann, ohne zu scrollen.
*/

:root {
  --papier:   #f6f4ee;
  --karte:    #ffffff;
  --tinte:    #22301c;
  --leise:    #5c6b52;
  --linie:    #dcded2;
  --gruen:    #4a7a2a;
  --hell:     #74a83c;
  --lavendel: #8b7fbf;
  --warm:     #e0a02c;
  /* Das Blau des Foerderprogramms "Wir fuer Sachsen". Gehoert nicht zur
     Farbfamilie der Seite, und genau das ist der Zweck: der Foerderhinweis
     soll sich abheben, nicht sich einfuegen. */
  --amtsblau: #1d708c;
  --schatten: 0 1px 3px rgba(34, 48, 28, .07), 0 8px 24px rgba(34, 48, 28, .05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, soll sie auch
   hier nicht bekommen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  /* Die Schrift des Geraets, keine geladene. Das spart einen Netzaufruf und
     vermeidet, dass Besucherdaten an einen Schriftanbieter gehen. */
  font: 17px/1.65 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.innen { max-width: 1000px; margin: 0 auto; padding: 0 22px; }
.schmal { max-width: 680px; }

/* ---------------------------------------------------------------- */
/* Menue                                                            */
/* ---------------------------------------------------------------- */

.menue {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 244, 238, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.menue .innen {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
}
.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  color: var(--tinte);
  white-space: nowrap;
}
.marke img { width: 34px; height: 34px; display: block; }
.marke span { font-size: 15px; letter-spacing: .01em; }

.menue nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  /* Auf schmalen Geraeten wird das Menue seitlich schiebbar statt umbrechend,
     sonst wird die Kopfzeile zwei Zeilen hoch und frisst den halben Schirm. */
  scrollbar-width: none;
}
.menue nav::-webkit-scrollbar { display: none; }
.menue nav a {
  padding: 7px 12px;
  border-radius: 99px;
  text-decoration: none;
  color: var(--leise);
  font-size: 15px;
  white-space: nowrap;
}
.menue nav a:hover, .menue nav a:focus-visible {
  background: var(--karte);
  color: var(--gruen);
}

/* ---------------------------------------------------------------- */
/* Aufmacher                                                        */
/* ---------------------------------------------------------------- */

.aufmacher { position: relative; }
.aufmacher img {
  width: 100%;
  height: clamp(280px, 46vw, 460px);
  object-fit: cover;
  display: block;
}
.aufmacher .text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 60px 0 26px;
  background: linear-gradient(to top, rgba(20, 30, 16, .82), rgba(20, 30, 16, 0));
  color: #fff;
}
.aufmacher h1 {
  margin: 0;
  font-size: clamp(27px, 4.4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  text-wrap: balance;
}
.aufmacher p {
  margin: 8px 0 0;
  font-size: clamp(16px, 2vw, 19px);
  max-width: 34em;
  color: #e9efe2;
}

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

section { padding: 54px 0 8px; }
/* Damit eine Sprungmarke nicht unter dem stehenden Menue landet. */
section[id] { scroll-margin-top: 66px; }

h2 {
  margin: 0 0 6px;
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.2;
  font-weight: 700;
}
h2 + .vorspann { margin: 0 0 26px; color: var(--leise); max-width: 46em; }

h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }

a { color: var(--gruen); }
a:hover { color: var(--hell); }

/* ---------------------------------------------------------------- */
/* Termine                                                          */
/* ---------------------------------------------------------------- */

.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.termin {
  display: flex;
  gap: 16px;
  align-items: baseline;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--hell);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--schatten);
}
.termin .wann {
  font-weight: 700;
  color: var(--gruen);
  white-space: nowrap;
  min-width: 7.5em;
}
.termin .was { flex: 1; min-width: 0; }
.termin .dazu { display: block; color: var(--leise); font-size: 15px; }

/* Vergangene Termine bleiben stehen, treten aber zurueck. So sieht man, dass
   im Garten das ganze Jahr etwas los ist, ohne auf Abgelaufenes hereinzufallen. */
.termin.vorbei { border-left-color: var(--linie); opacity: .58; }
.termin.vorbei .wann { color: var(--leise); }

.merke {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 99px;
  background: var(--warm);
  color: #3a2a06;
  font-size: 13px;
  font-weight: 700;
  vertical-align: 2px;
}

/* ---------------------------------------------------------------- */
/* Karten                                                           */
/* ---------------------------------------------------------------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--schatten);
}
.karte p { margin: 0; color: var(--leise); }
.karte p + p { margin-top: 10px; }

/* Die Wirkungsbereiche, vier Stueck, mit farbigem Kopf. */
.wirkung .karte { border-top: 4px solid var(--hell); }
.wirkung .karte:nth-child(2) { border-top-color: var(--lavendel); }
.wirkung .karte:nth-child(3) { border-top-color: var(--warm); }
.wirkung .karte:nth-child(4) { border-top-color: var(--gruen); }

/* ---------------------------------------------------------------- */
/* Bild und Text nebeneinander                                      */
/* ---------------------------------------------------------------- */

.paar {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin-top: 22px;
}
.paar img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: var(--schatten);
}
.paar.gedreht > img { order: 2; }

@media (max-width: 720px) {
  .paar { grid-template-columns: 1fr; gap: 18px; }
  .paar.gedreht > img { order: 0; }
}

/* ---------------------------------------------------------------- */
/* Bilderreihe                                                      */
/* ---------------------------------------------------------------- */

.reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.reihe figure { margin: 0; }
.reihe img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.reihe figcaption { margin-top: 6px; color: var(--leise); font-size: 14px; }

/* ---------------------------------------------------------------- */
/* Listen mit Haken                                                 */
/* ---------------------------------------------------------------- */

.haken { list-style: none; margin: 12px 0 0; padding: 0; }
.haken li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 7px;
  color: var(--leise);
}
.haken li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hell);
}

/* ---------------------------------------------------------------- */
/* Angaben, etwa Preise und Anschriften                             */
/* ---------------------------------------------------------------- */

.fakten { margin: 18px 0 0; display: grid; gap: 12px; }
.fakten > div {
  display: grid;
  grid-template-columns: 10.5em 1fr;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}
.fakten dt { font-weight: 700; }
.fakten dd { margin: 0; color: var(--leise); }
.fakten dd p { margin: 0; }
.fakten dd p + p { margin-top: 4px; }

@media (max-width: 560px) {
  .fakten > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------------------------------------------------------------- */
/* Foerderer                                                        */
/* ---------------------------------------------------------------- */

.foerderer {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 18px;
}
.foerderer img {
  height: 46px;
  width: auto;
  /* Die Logos sind sehr verschieden bunt. Etwas zurueckgenommen stehen sie
     nebeneinander, ohne den Abschnitt zu uebertoenen. */
  opacity: .85;
}

/* ---------------------------------------------------------------- */
/* Aufruf, das Hinweisfenster beim Seitenaufruf                      */
/* ---------------------------------------------------------------- */

/* Es ist ein natives <dialog>. Damit kommen die Escape-Taste, das
   Festhalten der Tastaturbedienung im Fenster und das Abdunkeln des
   Hintergrunds vom Browser selbst, das muss nichts nachbauen.

   Das <dialog> ist durchsichtig und ohne Rand, die sichtbare Karte ist
   das Kind darin. Nur so laesst sich ein Klick daneben von einem Klick
   auf die Karte unterscheiden. */

.aufruf {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}
.aufruf::backdrop {
  background: rgba(24, 32, 20, .55);
  backdrop-filter: blur(3px);
}

.aufruf-karte {
  position: relative;
  outline: none;
  /* Etwa die halbe Bildschirmbreite, nach oben gedeckelt, damit der Text
     auf grossen Schirmen nicht ueber die ganze Wand laeuft. */
  width: min(56vw, 900px);
  min-width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 46px 50px 40px;
  border-radius: 18px;
  color: var(--tinte);
  text-align: center;
  /* Der Lavendel aus dem Abschnitt Themenbereiche, weit hinter einem
     weissen Schleier. Er soll gerade eben zu ahnen sein und dem Text nicht
     ins Gehege kommen. Die Stellschraube dafuer ist der weisse Schleier
     darueber, mehr Weiss macht den Lavendel blasser, weniger deutlicher.
     Die Datei ist eigens dafuer weichgezeichnet und wiegt 11 kB. */
  background-color: var(--karte);
  background-image:
    linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
    url("bilder/aufruf-grund.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Drei Schatten uebereinander. Ein enger dunkler direkt unter der Kante,
     ein mittlerer und ein weiter, sehr weicher. Erst diese Staffelung
     laesst die Karte schweben statt nur einen Rahmen zu haben. */
  box-shadow:
    0 2px 6px rgba(24, 32, 20, .20),
    0 18px 40px rgba(24, 32, 20, .26),
    0 60px 90px rgba(24, 32, 20, .20);
}

/* Beim Erscheinen kippt die Karte aus der Tiefe nach vorn. Die Perspektive
   steht in der Transformation selbst, weil ein <dialog> in der obersten
   Ebene des Browsers liegt und dort kein Elternteil sie vorgeben kann. */
@keyframes aufruf-auf {
  /* Die Karte wird eingeblendet. Die Durchsichtigkeit traegt den Auftritt,
     das Kippen aus der Tiefe ist nur noch angedeutet, damit die Tiefe
     erhalten bleibt, ohne dass es springt. Der Verlauf ist absichtlich
     lang und weich. */
  from { opacity: 0; transform: perspective(900px) translateY(16px) rotateX(6deg) scale(.97); }
  to   { opacity: 1; transform: perspective(900px) translateY(0)    rotateX(0)    scale(1); }
}
@keyframes aufruf-abdunkeln { from { opacity: 0; } to { opacity: 1; } }

/* Der Hintergrund dunkelt etwas schneller ab als die Karte erscheint. So
   ist die Buehne schon da, wenn der Text kommt, und nicht umgekehrt. */
.aufruf[open] .aufruf-karte { animation: aufruf-auf .85s ease-out both; }
.aufruf[open]::backdrop      { animation: aufruf-abdunkeln .55s ease both; }

@media (prefers-reduced-motion: reduce) {
  .aufruf[open] .aufruf-karte,
  .aufruf[open]::backdrop { animation: none; }
}

.aufruf-zu {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--leise);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.aufruf-zu:hover { background: var(--papier); color: var(--tinte); }

.aufruf-wann {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--warm);
}
.aufruf-karte h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 3vw, 35px);
  line-height: 1.2;
}
/* Eigener, dunklerer Ton als das uebrige Leise der Seite. Der Lavendel
   dahinter hebt den Grund an, mit var(--leise) faellt der Kontrast auf
   3,9 zu 1 und damit unter die Grenze von 4,5, ab der Text als lesbar
   gilt. Mit diesem Ton sind es 5,3 zu 1. */
.aufruf-text,
.aufruf-wer { color: #4a5642; }

.aufruf-text { margin: 0 0 30px; font-size: 18px; }

.aufruf-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.aufruf-knoepfe a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(24, 32, 20, .20);
}
/* Das bekannte WhatsApp-Gruen, damit der Knopf ohne Nachdenken erkannt
   wird. Die Farbe der Seite waere hier die schlechtere Wahl. */
.aufruf-wa,
.aufruf-wa:hover { color: #fff; }
.aufruf-wa        { background: #25d366; }
.aufruf-wa:hover  { background: #1eb257; }
.aufruf-wa svg    { width: 20px; height: 20px; fill: currentColor; }

.aufruf-tel,
.aufruf-tel:hover { color: #fff; }
.aufruf-tel       { background: var(--gruen); }
.aufruf-tel:hover { background: var(--hell); }

/* Die Karte nimmt die Tastatur nur auf, damit der Fokus beim Oeffnen im
   Fenster liegt und nicht auf dem Schliessen-Kreuz. Sie ist selbst kein
   Bedienelement, deshalb bekommt sie keinen Ring. Die Knoepfe darin
   behalten ihren, dort ist er noetig. Muss hinter der allgemeinen Regel
   fuer :focus-visible stehen, sonst gewinnt die. */
.aufruf-karte:focus,
.aufruf-karte:focus-visible { outline: none; }

.aufruf-wer { margin: 22px 0 0; font-size: 15px; }
.aufruf-wer span { white-space: nowrap; }

@media (max-width: 640px) {
  .aufruf-karte { padding: 32px 22px 26px; }
  .aufruf-knoepfe a { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- */
/* Foerderhinweis                                                   */
/* ---------------------------------------------------------------- */

/* Der Satz ueber die Steuermittel ist eine Auflage aus dem Zuwendungs-
   bescheid, und die Bewilligungsstelle sieht nach, ob er auf der Seite
   steht. Er bekommt deshalb eine eigene Karte und steht nicht klein
   zwischen den Spendern darueber. */

.foerderhinweis { padding-top: 20px; padding-bottom: 12px; }

.hinweiskarte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--amtsblau);
  border-radius: 12px;
  box-shadow: var(--schatten);
  padding: 28px 30px 26px;
}
.hinweiskarte h2 {
  color: var(--amtsblau);
  font-size: clamp(20px, 2.4vw, 26px);
  margin-bottom: 20px;
}

.hinweislogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}
/* Doppelt so hoch wie die Spenderreihe und ohne deren Zuruecknahme. Die
   beiden Logos sind verschieden gebaut, das eine steht als Block mit der
   Schrift darunter, das andere laeuft in die Breite. Gleiche Hoehe liesse
   das breite viel groesser wirken, deshalb zwei Werte. */
.hinweislogos img { width: auto; }
.hinweislogos .logo-wfs { height: 120px; }
.hinweislogos .logo-bsd { height: 50px; }

.hinweissatz {
  margin: 24px 0 0;
  max-width: 52em;
}

@media (max-width: 560px) {
  .hinweiskarte { padding: 22px 20px; }
  .hinweislogos { gap: 18px 26px; }
  .hinweislogos .logo-wfs { height: 92px; }
  .hinweislogos .logo-bsd { height: 40px; }
}

/* ---------------------------------------------------------------- */
/* Fuss                                                             */
/* ---------------------------------------------------------------- */

footer {
  margin-top: 56px;
  padding: 30px 0 40px;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: 15px;
}
footer .innen { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--leise); }

/* ---------------------------------------------------------------- */
/* Bedienbarkeit                                                    */
/* ---------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--hell); outline-offset: 2px; }

.springen {
  position: absolute;
  left: -9999px;
  background: var(--karte);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 30;
}
.springen:focus { left: 12px; top: 12px; }