/*
  Himmelfreund – Design-Tokens für WiseCP 5 (Theme WStyle, Bootstrap 5)
  Hell: [data-bs-theme="light"]  ·  Dunkel: [data-bs-theme="dark"]
  Primär und Sekundär zusätzlich im WiseCP-Theme-Editor setzen (Hell-Werte).
  Schriften lokal über libs/fonts/himmelfreund/fonts.css (keine Google-Server).
*/


:root,
[data-bs-theme="light"] {
  --hf-font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --hf-font-body: "Figtree", system-ui, sans-serif;
  --bs-body-font-family: var(--hf-font-body);
  --bs-body-font-size: 1.0625rem;      /* 17 px */
  --bs-body-line-height: 1.55;

  --bs-primary: #015C91;      --bs-primary-rgb: 1, 92, 145;
  --hf-primary-hover: #014A75;
  --hf-on-primary: #FFFFFF;
  --bs-secondary: #0B3556;    --bs-secondary-rgb: 11, 53, 86;
  --hf-accent: #F49602;
  --hf-on-accent: #0B3556;     /* nie Weiß auf Akzent */
  --hf-sky: #00A9E4;           /* nur dekorativ */

  --bs-body-bg: #FFFFFF;
  --bs-tertiary-bg: #F2F8FC;
  --hf-surface-accent: #E2F4FB;
  --bs-border-color: #D6DEE8;
  --hf-border-strong: #A9B8CC; /* Formularfelder */
  --bs-emphasis-color: #0B3556;
  --bs-heading-color: #0B3556;
  --bs-body-color: #2B3D57;
  --bs-secondary-color: #4F5B6E;
  --bs-link-color: #015C91;
  --bs-link-hover-color: #014A75;

  --bs-success: #1E7F4F;       --bs-success-bg-subtle: #E6F4EC;  --bs-success-text-emphasis: #1E7F4F;
  --bs-warning: #F49602;       --bs-warning-bg-subtle: #FFF3E0;  --bs-warning-text-emphasis: #7A4A00; --bs-warning-border-subtle: #F4B860;
  --bs-danger: #B42318;        --bs-danger-bg-subtle: #FEECEB;   --bs-danger-text-emphasis: #B42318;
  --bs-info: #015C91;          --bs-info-bg-subtle: #E2F4FB;     --bs-info-text-emphasis: #015C91;

  --hf-band-bg: #0B3556;       /* dunkles CTA-Band */
  --hf-band-text: #D3DEEC;

  /* Formen */
  --hf-radius-sm: 8px;
  --hf-radius-control: 10px;   /* Buttons, Felder */
  --hf-radius-card: 18px;
  --hf-radius-price: 20px;
  --hf-radius-hero: 28px;
  --bs-border-radius: var(--hf-radius-control);
  --bs-border-radius-lg: var(--hf-radius-card);
  --bs-border-radius-xl: var(--hf-radius-hero);

  /* Inhaltsbreiten (WiseCP: standard / breit / breiter) */
  --hf-width-standard: 1176px;
  --hf-width-wide: 1320px;
  --hf-width-wider: 1480px;

  /* Abstände */
  --hf-section-gap: 64px;
  --hf-gutter: 20px;
  --bs-focus-ring-color: rgba(1, 92, 145, 0.45);
}

@media (min-width: 768px) {
  :root { --hf-gutter: 32px; }
}
@media (min-width: 992px) {
  :root { --hf-section-gap: 112px; }
}

[data-bs-theme="dark"] {
  --bs-primary: #3FA9E8;      --bs-primary-rgb: 63, 169, 232;
  --hf-primary-hover: #6BBDEE;
  --hf-on-primary: #0B1622;
  --bs-secondary: #A9DDF2;    --bs-secondary-rgb: 169, 221, 242;
  --hf-accent: #F5A524;
  --hf-on-accent: #0B1622;

  --bs-body-bg: #0B1622;
  --bs-tertiary-bg: #102233;
  --hf-surface-accent: #15304A;
  --bs-border-color: #24405C;
  --hf-border-strong: #24405C;
  --bs-emphasis-color: #F2F6FA;
  --bs-heading-color: #F2F6FA;
  --bs-body-color: #C9D6E3;
  --bs-secondary-color: #8FA3B8;
  --bs-link-color: #3FA9E8;
  --bs-link-hover-color: #6BBDEE;

  --bs-success: #4CC38A;       --bs-success-bg-subtle: #12301F;  --bs-success-text-emphasis: #4CC38A;
  --bs-warning: #F5A524;       --bs-warning-bg-subtle: #3A2A0F;  --bs-warning-text-emphasis: #F5B54A; --bs-warning-border-subtle: #F5A524;
  --bs-danger: #F97066;        --bs-danger-bg-subtle: #3B1714;   --bs-danger-text-emphasis: #F97066;
  --bs-info: #3FA9E8;          --bs-info-bg-subtle: #15304A;     --bs-info-text-emphasis: #3FA9E8;

  --hf-band-bg: #15304A;
  --hf-band-text: #C9D6E3;
  --bs-focus-ring-color: rgba(63, 169, 232, 0.5);
}

/* Grundstile */
h1, h2, h3, h4, .hf-heading { font-family: var(--hf-font-heading); font-weight: 700; color: var(--bs-heading-color); }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.375rem, 1.6vw, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.1875rem; }
.hf-lead { font-size: clamp(1.25rem, 1.4vw, 1.3125rem); line-height: 1.5; }
.hf-prose p, .hf-prose li { font-size: 1.125rem; line-height: 1.7; }
.hf-prose { max-width: 760px; }

.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.375rem; min-height: 48px; border-radius: var(--hf-radius-control); }
.btn-sm { min-height: 40px; }
.btn-lg { min-height: 56px; }
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--hf-on-primary);
  --bs-btn-hover-bg: var(--hf-primary-hover); --bs-btn-hover-border-color: var(--hf-primary-hover); --bs-btn-hover-color: var(--hf-on-primary); }
.btn-accent { --bs-btn-bg: var(--hf-accent); --bs-btn-border-color: var(--hf-accent); --bs-btn-color: var(--hf-on-accent);
  --bs-btn-hover-bg: var(--hf-accent); --bs-btn-hover-color: var(--hf-on-accent); filter: none; }
.btn-soft { --bs-btn-bg: var(--hf-surface-accent); --bs-btn-border-color: var(--hf-surface-accent); --bs-btn-color: var(--bs-heading-color); }
:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }

.form-control, .form-select { min-height: 48px; border-color: var(--hf-border-strong); border-radius: var(--hf-radius-control); font-size: 1.0625rem; }
.form-label { font-weight: 600; font-size: .9375rem; color: var(--bs-heading-color); }

.card { --bs-card-border-radius: var(--hf-radius-card); --bs-card-border-color: var(--bs-border-color); box-shadow: none; }
.hf-hero { background: var(--hf-surface-accent); border-radius: var(--hf-radius-hero); }
.hf-band { background: var(--hf-band-bg); color: var(--hf-band-text); border-radius: var(--hf-radius-card); }
.hf-band h2, .hf-band h3 { color: #FFFFFF; }
.hf-price { border: 1px solid var(--bs-border-color); border-radius: var(--hf-radius-price); padding: 1.625rem 1.5rem 1.75rem; }
.hf-price.is-recommended { border: 2px solid var(--bs-primary); }
.hf-section { padding-block: var(--hf-section-gap) 0; }
.hf-container { max-width: var(--hf-width-standard); margin-inline: auto; padding-inline: var(--hf-gutter); }
.hf-container--wide { max-width: var(--hf-width-wide); }
.hf-container--wider { max-width: var(--hf-width-wider); }