/* GreenTeam Gestaltungssystem
   ---------------------------------------------------------------
   Werte, die auf allen Seiten gelten sollen. Wird in jeder Seite
   im <head> eingebunden, vor dem seiteneigenen <style>.

   Warum die Selektoren mit :root beginnen: Die Seiten setzen ihre
   Farben in einem eigenen :root-Block, der spaeter im Dokument
   steht. Ohne das vorangestellte :root haetten die Regeln hier die
   gleiche oder eine geringere Spezifitaet und wuerden verlieren.
   --------------------------------------------------------------- */

/* Gruen auf dunklem Grund
   ------------------------
   #4a7000 ist der Ton fuer Text auf hellen Flaechen, dort traegt er
   mit mindestens 4,85:1. Auf fast schwarzem Grund faellt derselbe
   Ton aber auf 3,35:1 und ist nicht mehr lesbar. In dunklen
   Abschnitten gilt deshalb die Marken-Limette mit 12,37:1.
   Betroffen sind die Kleinversalien ueber den Abschnitten
   ("UNSERE LEISTUNGEN IN PORZ") und Verweise auf dunklem Grund. */
:root [style*="background:var(--forest)"],
:root [style*="background: var(--forest)"],
:root [style*="background:#060f02"],
:root [style*="background: #060f02"],
:root [style*="background:var(--forest-mid)"],
:root [style*="background:var(--forest-light)"],
:root .page-hero,
:root #hero,
:root footer {
  --lime-dark: #a8e000;
  --gruen-text: #a8e000;
  --verlauf-1: #c2f01f;
  --verlauf-2: #a8e000;
}

/* Ueberschriften mit Farbverlauf
   ------------------------------
   Der zweite Teil vieler Ueberschriften ist kein einfarbiger Text,
   sondern ein Verlauf, der als Fuellung in die Buchstaben gerechnet
   wird. Lief er zwischen zwei hellen Gruentoenen, stand er auf
   heller Flaeche mit rund 1,5:1 und war kaum zu lesen.

   Die beiden Token hier legen den Verlauf je nach Grund fest: auf
   hellen Flaechen zwei dunkle Toene, auf dunklen zwei helle (die
   stehen oben im Block fuer dunkle Abschnitte). Der Abstand zwischen
   den Toenen bleibt klein, damit die Ueberschrift ruhig wirkt und
   nicht auf halber Strecke die Helligkeit wechselt. */
:root {
  --verlauf-1: #5a8a00;
  --verlauf-2: #4a7000;

  /* Die beiden hellen Flaechen, im Wechsel zwischen den Abschnitten.
     Gleiche Werte wie auf der Startseite, damit die Gruentoene nicht
     auseinanderlaufen. Text darauf: --forest fuer Ueberschriften,
     #4d5a43 fuer Fliesstext (6,1:1 bis 6,9:1). */
  --flaeche: #f6faee;
  --flaeche-alt: #e4efcc;
}

/* Anfrageformular auf den Unterseiten
   -----------------------------------
   Die Orts- und Leistungsseiten hatten im Anfragebereich nur Telefon,
   WhatsApp und einen Mailverweis. Wer abends um zehn auf der Seite ist,
   ruft nicht an. Das Formular steht deshalb direkt darunter.

   Es sitzt immer auf dem dunklen Grund des Anfragebereichs, die Farben
   sind darauf gerechnet. Auf der Startseite gilt dieser Block nicht,
   die hat ihr eigenes Formular im Terminweg. */
.gt-anfrage {
  /* Manche Anfragebereiche legen Foto und Verlauf als absolut
     positionierte Schichten ueber die ganze Flaeche. Ohne eigene
     Stapelposition liegt das Formular darunter und ist unsichtbar,
     obwohl es im Dokument steht und Groesse hat. Genau das war auf
     den sechs Ratgeberseiten der Fall. */
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 44px auto 0;
  padding: 28px 24px 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  text-align: left;
}
.gt-anfrage h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 4px;
  text-align: center;
}
.gt-anfrage .gt-unter {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 20px;
  text-align: center;
}
.gt-anfrage label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  /* 13px ist die Untergrenze im Haus */
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.gt-anfrage .gt-reihe { margin-bottom: 14px; }
.gt-anfrage .gt-zwei {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.gt-feld {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: inherit;
  /* 16px, damit iPhones beim Antippen nicht hineinzoomen */
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.gt-feld::placeholder { color: rgba(255, 255, 255, 0.42); }
.gt-feld:focus {
  outline: none;
  border-color: var(--lime, #a8e000);
  background: rgba(255, 255, 255, 0.10);
}
.gt-feld:focus-visible { outline: 2px solid var(--lime, #a8e000); outline-offset: 1px; }
select.gt-feld option { background: #0e1f05; color: #fff; }
.gt-senden {
  width: 100%;
  margin-top: 4px;
  padding: 15px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #06220f;
  background: var(--lime, #a8e000);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gt-senden:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(168, 224, 0, 0.28); }
.gt-senden[disabled] { opacity: 0.7; cursor: default; transform: none; }
.gt-hinweis {
  margin: 12px 0 0;
  /* 13px ist die Untergrenze im Haus, darunter wird es am Handy muehsam */
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}
.gt-fehler {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 0.88rem;
  color: #ffd9d4;
  background: rgba(190, 60, 40, 0.25);
  border: 1px solid rgba(255, 140, 120, 0.4);
  border-radius: 10px;
}
/* Der Honigtopf gegen Formularroboter darf niemand sehen */
.gt-topf {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
}
@media (max-width: 480px) {
  .gt-anfrage { padding: 22px 16px 20px; margin-top: 32px; }
  .gt-anfrage .gt-zwei { grid-template-columns: 100px 1fr; }
}

/* Blog: Datum und Lesezeit
   ------------------------
   Die Zeile ist ein Flex-Element mit knappem Platz. Ohne nowrap
   bricht sie mitten im Begriff um ("7 Min." / "Lesezeit") und der
   Trennpunkt steht allein zwischen zwei Zeilen. */
:root .blog-card-date { gap: 8px; }
:root .blog-card-date span { white-space: nowrap; }
