/* =====================================================================
   Kürnbacher Märchenwald - Entwurf
   Warm, hell, ruhig. Bewusst anders als Gigis Werkstatt-Grün: dort geht es
   um Handwerk, hier um Wald und Kinder. Cremeweiß statt Sandstein, damit
   der Text auch bei Sonne auf dem Handy lesbar bleibt.
   ===================================================================== */

:root {
  --wald:        #1f4332;   /* tiefes Waldgruen, Ueberschriften und Flaechen */
  --wald-hell:   #3f6d52;
  --moos:        #6b9a7a;
  --honig:       #b3701c;   /* warmer Akzent, das Maerchenhafte */
  --honig-hell:  #e8a33f;
  --rinde:       #4a3728;
  --creme:       #faf6ee;   /* Hintergrund */
  --creme-tief:  #f0e9db;
  --text:        #2a2620;
  --text-leise:  #5c554a;
  --rot:         #9c3521;   /* geschlossen */

  --radius: 14px;
  --schrift-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --schrift-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--schrift-sans);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--schrift-serif); line-height: 1.25; color: var(--wald); }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.6rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
a { color: var(--wald-hell); }

/* --- Entwurfsband, damit niemand das hier fuer die echte Seite haelt --- */
.entwurfsband {
  background: repeating-linear-gradient(45deg, #3a3229, #3a3229 12px, #2f2822 12px, #2f2822 24px);
  color: #f3ece0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.5rem 1rem;
}

/* --- Kopf --- */
.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.4rem clamp(1rem, 4vw, 3rem);
  background: var(--wald);
  color: #f4efe4;
}
.marke { text-decoration: none; color: inherit; display: block; }
.marke-name { display: block; font-family: var(--schrift-serif); font-size: 1.5rem; }
.marke-zusatz { display: block; font-size: 0.85rem; color: #b9d3c2; font-style: italic; }
.nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.nav a { color: #d9e8de; text-decoration: none; font-size: 0.95rem; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--honig-hell); }

/* --- Der wichtigste Block: heute --- */
.heute {
  background: var(--creme-tief);
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 3rem);
}
.heute-innen { max-width: 62rem; margin: 0 auto; }

.status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--creme-tief);
  box-shadow: 0 3px 14px rgba(74, 55, 40, 0.10);
}
.status-punkt {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text-leise);
}
.status-text strong { display: block; font-family: var(--schrift-serif); font-size: 1.45rem; color: var(--wald); }
.status-text span { display: block; color: var(--text-leise); font-size: 0.98rem; }

.status[data-zustand="offen"]        { border-color: var(--moos); }
.status[data-zustand="offen"] .status-punkt { background: #2e8b57; }
.status[data-zustand="zu"]           { border-color: #d8a99c; }
.status[data-zustand="zu"] .status-punkt    { background: var(--rot); }
.status[data-zustand="zu"] .status-text strong { color: var(--rot); }
.status[data-zustand="ruhetag"]      { border-color: #cfc4ae; }
.status[data-zustand="ruhetag"] .status-punkt { background: #9a8f7c; }

.wetterhinweis { margin: 0.8rem 0 0; color: var(--text-leise); font-size: 0.98rem; }
.wetterhinweis:empty { display: none; }

.merkposten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 0;
}
.merk {
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: center;
}
.merk-zahl { display: block; font-family: var(--schrift-serif); font-size: 1.8rem; color: var(--honig); }
.merk-text { display: block; font-size: 0.9rem; color: var(--text-leise); }

.bargeld {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  background: #fff6e4;
  border-left: 5px solid var(--honig-hell);
  border-radius: 6px;
  font-size: 1rem;
}

/* --- Wetterausblick --- */
.ausblick { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) 0; }
.ausblick .unter { color: var(--text-leise); margin-top: 0; }
.tage {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.7rem;
}
.tag {
  background: #fff;
  border-radius: var(--radius);
  padding: 0.9rem 0.6rem;
  text-align: center;
  border: 2px solid transparent;
}
.tag-name { display: block; font-size: 0.85rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.06em; }
.tag-bild { display: block; font-size: 1.9rem; line-height: 1.4; }
.tag-grad { display: block; font-family: var(--schrift-serif); font-size: 1.15rem; color: var(--wald); }
.tag-urteil { display: block; font-size: 0.8rem; margin-top: 0.2rem; }

.tag[data-urteil="ideal"]   { border-color: var(--moos); }
.tag[data-urteil="ideal"]   .tag-urteil { color: #2e8b57; }
.tag[data-urteil="geht"]    .tag-urteil { color: var(--honig); }
.tag[data-urteil="schlecht"] .tag-urteil { color: var(--rot); }
.tag[data-urteil="ruhetag"] { background: #efeade; opacity: 0.75; }
.tag[data-urteil="ruhetag"] .tag-urteil { color: var(--text-leise); }

.quelle { font-size: 0.82rem; color: var(--text-leise); margin-top: 1rem; }

/* --- Textabschnitte --- */
.text-abschnitt { max-width: 48rem; margin: 0 auto; padding: clamp(2.2rem, 6vw, 3.6rem) clamp(1rem, 4vw, 3rem) 0; }
.text-abschnitt .gross { font-size: 1.2rem; }
.text-abschnitt .klein { font-size: 0.92rem; color: var(--text-leise); }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.karte { background: #fff; border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.karte p { margin: 0; font-size: 0.97rem; }

.preise { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.preise td { padding: 0.7rem 0.2rem; border-bottom: 1px solid #e2d9c6; }
.preise td:last-child { text-align: right; font-family: var(--schrift-serif); font-size: 1.1rem; color: var(--wald); white-space: nowrap; }
.preise .betont td { font-weight: 600; border-bottom: none; }
.beispiel { margin-top: 1rem; font-size: 1.05rem; }

.knopf {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--wald);
  color: #f4efe4;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-size: 0.98rem;
}
.knopf:hover { background: var(--wald-hell); }

/* --- Offene Fragen sichtbar machen, statt sie zu erfinden --- */
.frage-block {
  background: #fdf3e0;
  border: 1px dashed var(--honig);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  color: #6b4a15;
}
.frage-marke {
  display: inline-block;
  background: var(--honig);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.bildraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; margin-top: 1.2rem; }
.bildplatz {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #efe8da, #efe8da 10px, #eae2d2 10px, #eae2d2 20px);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--text-leise);
  font-size: 0.86rem;
  padding: 0.5rem;
}
.bildplatz em { font-style: normal; opacity: 0.7; font-size: 0.78rem; }

/* --- Fuss --- */
.fuss { margin-top: clamp(2.5rem, 7vw, 4.5rem); background: var(--wald); color: #dfe9e1; padding: 2rem clamp(1rem, 4vw, 3rem) 1.2rem; }
.fuss-innen { max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; font-size: 0.95rem; }
.fuss a { color: #b9d3c2; }
.fuss-hinweis { max-width: 62rem; margin: 1.6rem auto 0; font-size: 0.8rem; color: #9db5a6; }

@media (max-width: 560px) {
  .status { flex-direction: row; align-items: flex-start; }
  .status-text strong { font-size: 1.25rem; }
}

/* --- Zustandsbild --- */
.status-bild {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: block;
}
/* "Laut Plan offen, aber unbestaetigt": dieselbe Tuer, nur zurueckgenommen.
   Die Seite weiss es nicht sicher, also soll sie auch nicht so aussehen. */
.status[data-zustand="plan"] .status-bild { opacity: 0.55; filter: saturate(0.55); }
.status[data-zustand="laedt"] .status-bild { opacity: 0.3; }

/* --- Vorschau-Schalter, nur im Entwurf --- */
.vorschau-schalter { display: inline-block; margin-left: 0.6rem; }
.vorschau-schalter a {
  color: #f6d9a0;
  text-decoration: none;
  border-bottom: 1px dotted #b99a63;
  margin-left: 0.5rem;
}
.vorschau-schalter a:hover { color: #fff; border-bottom-style: solid; }

@media (max-width: 560px) {
  .status-bild { width: 56px; height: 56px; }
  .vorschau-schalter { display: block; margin: 0.4rem 0 0; }
}

/* --- Kopfbild -------------------------------------------------------- 
   Bewusst als eigenes Band statt als Hintergrund hinter der Kopfzeile:
   ein Waldfoto unter Text kostet Lesbarkeit, und die haben wir bei den
   Farben gerade erst mühsam hergestellt. So darf das Bild ein Bild sein.
   Die Höhe ist gedeckelt, damit der Zustandskasten auf dem Handy nicht
   unter die Falte rutscht - der ist wichtiger als jede Stimmung. */
.kopfbild {
  margin: 0;
  position: relative;
  background: var(--creme-tief);
}
.kopfbild img {
  display: block;
  width: 100%;
  height: clamp(180px, 34vh, 320px);
  object-fit: cover;
  /* etwas oberhalb der Mitte, damit das Tor beim Beschneiden im Bild bleibt */
  object-position: center 42%;
}

/* Auf breiten Schirmen wird das Band sehr flach und der Ausschnitt entsprechend
   eng - dann schneidet er die Burgzinnen ab. Etwas mehr Hoehe und ein hoeherer
   Bildausschnitt holen das Tor wieder ganz ins Bild. */
@media (min-width: 700px) {
  .kopfbild img {
    height: clamp(220px, 44vh, 400px);
    object-position: center 34%;
  }
}

/* Sehr breite Schirme: der feste Deckel von 400px macht das Band wieder zu
   einem Schlitz. Hoehe darf mitwachsen, der Ausschnitt bleibt derselbe. */
@media (min-width: 1500px) {
  .kopfbild img { height: clamp(320px, 46vh, 540px); }
}
.kopfbild figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem clamp(1rem, 4vw, 3rem) 0.7rem;
  font-size: 0.85rem;
  color: #f2ece0;
  background: linear-gradient(to top, rgba(31, 67, 50, 0.85), rgba(31, 67, 50, 0));
}

@media (max-width: 560px) {
  .kopfbild figcaption { font-size: 0.78rem; padding-bottom: 0.5rem; }
}

/* Kurze Handy-Schirme: dort entscheidet jeder Pixel darueber, ob der
   Zustandskasten noch ohne Scrollen zu sehen ist. Im Zweifel gewinnt er. */
@media (max-width: 700px) and (max-height: 700px) {
  .kopfbild img { height: 140px; }
}