/* Grundgestaltung nach dem Corporate Design des Gemünder Ferienpark Salzberg.
   Primärfarben: Lindgrün #878C38, Laubgrün #B1BC44, Beigebraun #F8E6AD.
   Hausschrift: Open Sans. */

:root {
  --lindgruen: #878C38;
  --laubgruen: #B1BC44;
  --sand: #F8E6AD;
  --dunkel: #2B2F16;
  --gedaempft: #6E7355;
  --linie: #E3DBC4;
  --flaeche: #FFFFFF;
  --grund: #F7F2E4;
  --gut: #1F7A38;
  --fehler: #9A3324;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--dunkel);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.huelle {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

header svg { width: 34px; height: 34px; color: var(--lindgruen); flex: none; }

h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 + p { margin: 2px 0 0; color: var(--gedaempft); font-size: 0.9rem; }

h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 4px;
}

h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: var(--laubgruen);
  margin-top: 7px;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}

.zeile:last-child { border-bottom: 0; }
.zeile span:first-child { color: var(--gedaempft); }
.zeile span:last-child { font-weight: 700; text-align: right; word-break: break-word; }

.merkmal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 11px;
  border-radius: 999px;
  background: #E1EFDD;
  color: var(--gut);
}

.merkmal.schlecht { background: #F6E3DF; color: var(--fehler); }
.merkmal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.hinweis { color: var(--gedaempft); font-size: 0.86rem; }
.fehlerhinweis { color: var(--fehler); }

.huelle-schmal { max-width: 380px; }

.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}

.navigation a {
  color: var(--dunkel);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.navigation a:hover { color: var(--lindgruen); }

.verlinkt {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  color: var(--gedaempft);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: underline;
}

.feld {
  display: block;
  margin-bottom: 14px;
}

.feld span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.86rem;
  color: var(--gedaempft);
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  background: var(--flaeche);
  color: var(--dunkel);
  resize: vertical;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--laubgruen);
  outline-offset: -1px;
}

.knopf {
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 8px;
  background: var(--lindgruen);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.knopf:hover { background: #767a2f; }

h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 18px 0 6px;
}

h3:first-child { margin-top: 0; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.knopf-klein {
  width: auto;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.knopf-zurueckhaltend {
  background: var(--flaeche);
  border: 1px solid var(--fehler);
  color: var(--fehler);
}

.knopf-zurueckhaltend:hover { background: #F6E3DF; }

.bildergalerie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.bildergalerie img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linie);
}

.entwurf { margin-bottom: 20px; }
.entwurf:last-child { margin-bottom: 0; }
.entwurf img { max-width: 100%; border-radius: 8px; border: 1px solid var(--linie); }

@media (max-width: 420px) {
  .zeile { flex-direction: column; gap: 2px; }
  .zeile span:last-child { text-align: left; }
}