/* ==========================================================================
   Jeddeloh – Basis-Theme (Body, Typografie, Buttons, Container, Inputs)
   Framework-agnostisch. Reihenfolge: fonts.css → design-tokens.css → theme.css → components.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--fs-body-lh);
  background: var(--color-white);
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}
@media (min-width: 1200px) { .container { max-width: var(--container-xl); } }
@media (min-width: 1660px) { .container { max-width: var(--container-xxl); } }

.container-slim { max-width: var(--container-slim); margin-inline: auto; padding-inline: var(--page-pad-x); }

/* Header/Footer/Home spannen die weite Maximalbreite (Vollbreiten-Look);
   der Inhalts-Container (.container) bleibt bewusst schmaler. Konsolidiert aus der
   früheren Doppel-Definition (theme.css + responsive.css) auf den real gerenderten Wert. */
.container-wide {
  width: 100%;
  margin-inline: auto;
  max-width: var(--container-wide);
  padding-inline: var(--page-pad-x);
}

/* ---------- Überschriften ---------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-text); }

/*
  Signatur-Headline mit grünem Unterstreich-Balken.
  Markup:  <h1 class="headline">Unsere <span>Pflanzen</span></h1>
  Das hervorgehobene Wort in <span> setzen (fett + liegt über dem Balken).
*/
.headline {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  text-transform: uppercase;
  color: var(--color-text);
  font-size: var(--fs-h1);
  line-height: var(--fs-h1-lh);
  margin: 0 0 20px 0;
}
.headline > span { position: relative; font-weight: var(--fw-bold); z-index: 1; }
.headline::after {
  content: "";
  position: absolute;
  bottom: 3px;
  height: 9px;
  width: 100%;
  background-color: var(--color-tertiary);
  z-index: -1;
}
@media (min-width: 768px) {
  .headline { font-size: 40px; line-height: 50px; }
  .headline::after { height: 12px; bottom: 4px; }
}
@media (min-width: 1200px) {
  .headline { font-size: 50px; line-height: 60px; }
  .headline::after { height: 14px; bottom: 5px; }
}

/* ---------- Fließtext ---------- */
p {
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 1rem 0;
}
@media (min-width: 768px)  { p { font-size: 16px; line-height: 24px; } }
@media (min-width: 1200px) { p { font-size: 18px; line-height: 26px; } }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-base);
}
a:hover { color: var(--color-tertiary); }

/* ---------- hidden schlaegt Layout ----------
   Das HTML-Attribut ``hidden`` wirkt nur ueber ``display: none`` aus dem Browser-
   Standard. Jede eigene Regel mit ``display: flex`` (Cookie-Hinweis!) gewinnt dagegen
   — das Element bleibt sichtbar, obwohl der Code es versteckt. Deshalb hier einmal
   zentral: ``hidden`` gilt. */
[hidden] { display: none !important; }

/* ---------- Buttons ----------
   Scharfe Ecken, 2px Rahmen, Open Sans Condensed.
   .btn-primary  : transparenter Grund, grüner Text → Hover: grün gefüllt, weißer Text
   .btn-block    : weißer Grund, grüner Text (Vollbreite-Variante)
   .btn-secondary: für dunkle Flächen (weißer Rahmen/Text)                      */
.btn {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-none);
  font-family: var(--font-heading);
  font-size: var(--fs-button);
  line-height: 1.4;
  text-align: center;
  transition: all var(--duration-base);
}

.btn-primary {
  border: 2px solid var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  padding: 4px 30px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-block {
  display: block;
  width: 100%;
  border: 2px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
  padding: 7px 12px;
}
.btn-block:hover, .btn-block:focus, .btn-block:active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-secondary {
  border: 2px solid var(--color-white);
  background-color: transparent;
  color: var(--color-white);
  padding: 4px 30px;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Formularfelder ---------- */
input, select, textarea {
  border-radius: var(--radius-none);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: max(16px, 1em);  /* < 16px löst auf iOS Auto-Zoom bei Feldfokus aus */
  padding: 0.5rem 0.75rem;
}
input::placeholder, textarea::placeholder { font-family: var(--font-body); color: var(--color-muted); }
input:focus, select:focus, textarea:focus { outline-color: var(--color-tertiary); }