/* E-079: Shared design tokens and opt-in layout primitives (pub29 pilot).
   E-082: Minimal document baseline on pages without hello reset/theme. */

:root {
  --hit-blue: #2a82c9;
  --hit-blue-light: #45c6fe;
  --hit-blue-dark: #0082cb;
  --hit-text: #6c6c6c;
  --hit-muted: #6c6c6c;
  --hit-heading: #1f1f1f;
  --hit-bg-light: #f2f2f2;
  --hit-bg-card: #f7f7f7;
  --hit-container: 1140px;
  --hit-container-wide: 1200px;
  --hit-gutter: 15px;
  --hit-section-y: 50px;
  --hit-radius: 6px;
  --hit-font-body: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hit-font-heading: "PT Sans Narrow", "PT Sans", Arial, sans-serif;

  /* CSS-003a: CTA-/Link-Tokens (CTA-001–003); Adoptiert in CSS-003b–003f (home, news-overview, back, cyberseal). */
  --hit-cta-primary-bg: var(--hit-blue);
  --hit-cta-primary-fg: #ffffff;
  --hit-cta-primary-hover-bg: #2374b5;
  --hit-cta-primary-active-bg: #1f679f;
  --hit-cta-primary-padding-block: 0.65rem;
  --hit-cta-primary-padding-inline: 1.1rem;
  --hit-cta-primary-radius: 5px;
  --hit-cta-primary-font-size: 18px;
  --hit-cta-primary-line-height: 1.25;
  --hit-cta-primary-font-weight: 600;

  --hit-cta-back-bg: var(--hit-blue);
  --hit-cta-back-fg: #ffffff;
  --hit-cta-back-hover-bg: var(--hit-cta-primary-hover-bg);
  --hit-cta-back-active-bg: var(--hit-cta-primary-active-bg);
  --hit-cta-back-padding-block: 7px;
  --hit-cta-back-padding-inline: 25px;
  --hit-cta-back-radius: var(--hit-cta-primary-radius);
  --hit-cta-back-font-size: var(--hit-cta-primary-font-size);
  --hit-cta-back-line-height: var(--hit-cta-primary-line-height);
  --hit-cta-back-font-weight: var(--hit-cta-primary-font-weight);

  --hit-cta-focus-outline-on-primary: 2px solid #ffffff;
  --hit-cta-focus-offset-on-primary: 2px;
  --hit-cta-focus-outline-on-light: 2px solid rgba(42, 130, 201, 0.45);
  --hit-cta-focus-offset-on-light: 3px;

  --hit-cta-transition: background-color 0.15s ease, color 0.15s ease;
}

/* E-082: hello reset/theme replacement (Impressum/Datenschutz pilot) */

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

body {
  margin: 0;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto;
  clip-path: none;
  color: #333;
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 12px 24px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Opt-in helpers — not used in HTML until explicitly adopted */

.native-container {
  box-sizing: border-box;
  max-width: var(--hit-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hit-gutter);
  padding-right: var(--hit-gutter);
}

.native-section {
  box-sizing: border-box;
  padding-top: var(--hit-section-y);
  padding-bottom: var(--hit-section-y);
}

.native-section--light {
  background-color: var(--hit-bg-light);
}

.native-grid {
  display: grid;
  gap: 1rem;
}

.native-button {
  display: inline-block;
  box-sizing: border-box;
  padding: 7px 25px;
  border: 0;
  border-radius: var(--hit-radius);
  background-color: var(--hit-blue-light);
  color: var(--hit-blue);
  font-family: var(--hit-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.native-button:hover,
.native-button:focus-visible {
  background-color: var(--hit-blue);
  color: #ffffff;
  text-decoration: none;
}

.native-card {
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--hit-radius);
  background: var(--hit-bg-card);
}

/* CSS-001c: Tel-/Mailto — auch Normalzustand ohne Unterstreichung (gegen WP-Global-Styles) */
a[href^="tel:"],
a[href^="mailto:"] {
  text-decoration: none;
  border-bottom: none;
}

/* CSS-001b: Tel-/Mailto — interaktive Zustände optisch = Normalzustand (kein Outline/Rahmen/Sprung) */
a[href^="tel:"]:hover,
a[href^="tel:"]:focus,
a[href^="tel:"]:focus-visible,
a[href^="tel:"]:active,
a[href^="tel:"]:visited,
a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus,
a[href^="mailto:"]:focus-visible,
a[href^="mailto:"]:active,
a[href^="mailto:"]:visited {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: none;
  background: transparent;
  background-color: transparent;
}