/* ============================================================
 * styles-modern.css – Minimal-Variante (v4)
 *
 * Wird NACH Styles.css geladen.
 * Scope: body:not(.body_home) – Homepage bleibt 1:1 unberührt.
 *
 * v4: Subtraktiv. Layout bleibt UNANGETASTET. Nur:
 *   - Typografie-Feintuning (Grössenskala)
 *   - News-Teaser bekommen Card-Look (Schatten, Radius)
 *   - Formular-Inputs moderner
 *   - Buttons & Pagination runder
 *   - Focus-States für Accessibility
 *
 * KEINE Layout-Overrides, KEINE Flex/Grid-Umbauten, KEIN Float-Override.
 * ============================================================ */

:root {
  --color-accent: #4C864E;
  --color-accent-dark: #355f37;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-heading: #111827;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-border-strong: #cbd5e1;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ------------------------------------------------------------
 * 1. Typografie – leicht angehoben, sonst nichts
 * ------------------------------------------------------------ */
body:not(.body_home) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:not(.body_home) h1 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
body:not(.body_home) h2 {
  font-size: clamp(1.375rem, 1.25vw + 0.875rem, 1.75rem);
  line-height: 1.3;
  color: var(--color-heading);
}
body:not(.body_home) h3 {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.3;
  color: var(--color-heading);
}

/* ------------------------------------------------------------
 * 2. News-Teaser Card-Look
 * ------------------------------------------------------------ */
body:not(.body_home) .layout_latest,
body:not(.body_home) .layout_full {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base);
}
body:not(.body_home) .layout_latest:hover,
body:not(.body_home) .layout_full:hover {
  box-shadow: var(--shadow-md);
}
body:not(.body_home) .layout_latest img,
body:not(.body_home) .layout_full img,
body:not(.body_home) .news_latest_slider img {
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------
 * 3. Buttons / Submit
 * ------------------------------------------------------------ */
body:not(.body_home) input[type="submit"],
body:not(.body_home) button[type="submit"],
body:not(.body_home) .submit {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
body:not(.body_home) input[type="submit"]:hover,
body:not(.body_home) button[type="submit"]:hover,
body:not(.body_home) .submit:hover {
  background: var(--color-accent-dark);
}

/* ------------------------------------------------------------
 * 4. Formulare (nur im mod_form-Kontext)
 * ------------------------------------------------------------ */
body:not(.body_home) .mod_form input[type="text"],
body:not(.body_home) .mod_form input[type="email"],
body:not(.body_home) .mod_form input[type="tel"],
body:not(.body_home) .mod_form input[type="url"],
body:not(.body_home) .mod_form input[type="password"],
body:not(.body_home) .mod_form input[type="number"],
body:not(.body_home) .mod_form input[type="date"],
body:not(.body_home) .mod_form textarea,
body:not(.body_home) .mod_form select {
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body:not(.body_home) .mod_form input:focus-visible,
body:not(.body_home) .mod_form textarea:focus-visible,
body:not(.body_home) .mod_form select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(76, 134, 78, 0.15);
}

/* ------------------------------------------------------------
 * 5. Pagination
 * ------------------------------------------------------------ */
body:not(.body_home) .pagination a,
body:not(.body_home) .pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
body:not(.body_home) .pagination a:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
body:not(.body_home) .pagination strong {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ------------------------------------------------------------
 * 6. Version-Hinweis neben Datenschutzerklärung-Link
 *    Klein + unauffällig, global (inkl. body_home), damit man
 *    beim Browsen immer sieht ob das die neue Contao-5-Seite ist.
 * ------------------------------------------------------------ */
a[href*="datenschutzerklaerung"]::after {
  content: " · Contao 5.3 (neu)";
  color: var(--color-accent, #4C864E);
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
 * 7. Focus-States für Accessibility
 * ------------------------------------------------------------ */
body:not(.body_home) a:focus-visible,
body:not(.body_home) button:focus-visible,
body:not(.body_home) input:focus-visible,
body:not(.body_home) select:focus-visible,
body:not(.body_home) textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}