/* Gruentoene fuer die Kategorie Naturbaden.

   Bewusst ein eigenes Stylesheet und keine Tailwind-Klassen: static/css/tailwind.css ist
   vorgebaut und eingecheckt, es gibt keine package.json und keine node_modules. Ein
   Neubau mit einer anderen Tailwind-Fassung wuerde 34 KB erprobtes CSS gegen ein
   ungeprueftes Ergebnis tauschen -- auf einer Seite, die automatisch deployt, ist das
   das groessere Risiko als diese paar Regeln von Hand.

   Die Werte sind dieselben wie in tailwind.config.js unter `natur`; wird das CSS spaeter
   doch neu gebaut, liefert Tailwind die Klassen und diese Datei kann entfallen. */
:root {
  --natur-50: #f0fdf4;
  --natur-100: #dcfce7;
  --natur-200: #bbf7d0;
  --natur-400: #4ade80;
  --natur-600: #16a34a;
  --natur-700: #15803d;
  --natur-800: #166534;
}

.text-natur-700 { color: var(--natur-700); }
.text-natur-800 { color: var(--natur-800); }
.bg-natur-50   { background-color: var(--natur-50); }
.bg-natur-100  { background-color: var(--natur-100); }
.bg-natur-600  { background-color: var(--natur-600); }
.border-natur-200 { border-color: var(--natur-200); }

.hover\:bg-natur-700:hover { background-color: var(--natur-700); }
.hover\:border-natur-400:hover { border-color: var(--natur-400); }

/* Abzeichen am Eintrag und in der Kartenblase */
.abzeichen-naturbad {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: 9999px;
  background-color: var(--natur-100);
  color: var(--natur-800);
  padding: .125rem .625rem;
  font-size: .75rem;
  font-weight: 600;
}

/* Nachgelieferte Tailwind-Utilities.

   static/css/tailwind.css ist vorgebaut und beim Bauen von ungenutzten Klassen befreit
   worden. Klassen, die damals in keiner Vorlage standen, fehlen deshalb -- und eine
   fehlende Klasse wirkt nicht etwa halb, sie wirkt gar nicht. Genau daran ist der
   Anzeigenblock zerbrochen: `w-full` galt, `sm:w-auto` existierte nicht, also blieb die
   Schaltflaechenspalte auf voller Breite und hat den Text zusammengequetscht.

   Diese Regeln bilden die fehlenden Klassen nach. Wird tailwind.css irgendwann neu
   gebaut, liefert Tailwind sie selbst und der Abschnitt kann entfallen. */
.h-24 { height: 6rem; }
.w-24 { width: 6rem; }
.underline-offset-2 { text-underline-offset: 2px; }
.whitespace-nowrap { white-space: nowrap; }
.p-1 { padding: 0.25rem; }
.hover\\:text-deep-600:hover { color: #4f5e7a; }

@media (min-width: 640px) {
  .sm\:w-auto { width: auto; }
}
.hover\:text-deep-600:hover { color: #4f5e7a; }

/* Der dritte Kartenschalter auf /in-der-naehe/ traegt dieselbe Farbe wie die Nadel,
   die er ein- und ausblendet. */
.border-natur-600 { border-color: var(--natur-600); }
.bg-natur-700 { background-color: var(--natur-700); }
.hover\:border-natur-700:hover { border-color: var(--natur-700); }

/* Naturbaden in Kopfzeile, Fusszeile und auf der Startseite. Dieselbe Logik wie oben:
   die Klassen standen in keiner Vorlage, als tailwind.css gebaut wurde. */
.hover\:bg-natur-50:hover  { background-color: var(--natur-50); }
.hover\:text-natur-700:hover { color: var(--natur-700); }
.hover\:text-natur-800:hover { color: var(--natur-800); }

/* Diese beiden fehlten schon vorher und wirkten deshalb nirgends. */
.opacity-60 { opacity: 0.6; }
@media (min-width: 640px) {
  .sm\:p-6 { padding: 1.5rem; }
}

/* Premium-Kacheln tragen einen Ring in der Farbe ihrer Art. */
.ring-natur-600\/10 { --tw-ring-color: rgb(22 163 74 / 0.1); }