/* ============================================================
   Logopädie im DLZ Ramstein — Corporate Design Stylesheet
   Version 1.0 · Grundlage für die Website-Programmierung
   Bezug: CI Design Manual (CI-Design-Manual.dc.html)
   ============================================================ */

/* ---------- 1. Design Tokens (CSS Custom Properties) ---------- */
:root {
  /* Primär & Akzent */
  --c-forest:      #2F524B;  /* Tannengrün – dunkle Bänder, Highlights */
  --c-sage:        #4A7A6F;  /* Salbei (Marke) – Akzente, Links, Icons */
  --c-btn:         #4D7D72;  /* Button-Grün – primäre Buttons */
  --c-btn-hover:   #3A6459;  /* Hover-Zustand */

  /* Flächen & Neutral */
  --c-mint:        #EEF4F2;  /* Sektionsflächen */
  --c-bg:          #F6F8F7;  /* Seitenhintergrund (Body) */
  --c-rose:        #F7EDE9;  /* Hero-Hintergrund warm */
  --c-border:      #E4EBE8;  /* Rahmen, Trennlinien */
  --c-border-in:   #D7E0DC;  /* Formularfeld-Rahmen */
  --c-line-soft:   #EEF2F0;  /* dünne Innen-Trennlinien */
  --c-surface:     #FFFFFF;  /* Karten, Panels */

  /* Text */
  --c-text:        #2C322F;  /* primär – Überschriften, Fließtext */
  --c-text-2:      #4A524E;  /* Fließtext lang */
  --c-text-3:      #66716C;  /* sekundär – Beschreibungen */
  --c-text-4:      #9AA39F;  /* tertiär – Labels, Platzhalter */

  /* Signal (knappe Verfügbarkeit) */
  --c-signal:      #A6552F;
  --c-signal-bg:   #F6E7DD;

  /* Auf Dunkel */
  --c-on-dark:     #EAF1EE;
  --c-on-dark-2:   #CFDEDB;
  --c-on-dark-3:   #A9C4BD;

  /* Typografie */
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fw-normal: 400;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1.2;
  --lh-body: 1.65;

  --fs-display: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-label: 13px;

  /* Abstands-Skala (8er-System) */
  --s-1: 8px;
  --s-2: 14px;
  --s-3: 20px;
  --s-4: 28px;
  --s-5: 52px;

  /* Layout */
  --wrap: 1180px;      /* Inhaltsbreite Website */
  --wrap-doc: 1080px;  /* Dokumente / Manual */
  --gutter: 28px;      /* Seitenrand */
  --measure: 720px;    /* max. Textbreite */
  --section-y: 72px;   /* vertikales Sektions-Padding */

  /* Radien */
  --r-btn: 4px;
  --r-input: 8px;
  --r-card: 14px;
  --r-pill: 999px;

  /* Schatten */
  --sh-card: 0 1px 3px rgba(0,0,0,.04);
  --sh-float: 0 4px 16px rgba(20,40,36,.06);
}

/* ---------- 2. Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-sage); text-decoration: none; }
a:hover { color: var(--c-btn-hover); }

img { max-width: 100%; display: block; }

/* ---------- 3. Typografie ---------- */
h1, h2, h3 { margin: 0; color: var(--c-text); font-weight: var(--fw-black); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

.display { font-size: var(--fs-display); font-weight: var(--fw-black); letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
.lead { font-size: var(--fs-body); color: var(--c-text-3); max-width: var(--measure); }
.text { color: var(--c-text-2); }
.muted { color: var(--c-text-3); }

.overline {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-4);
}
.overline--dark { color: var(--c-on-dark-3); }

/* Akzentbalken vor Sektionsüberschriften */
.accent-bar { width: 44px; height: 4px; background: var(--c-sage); }
.accent-bar--center { margin-left: auto; margin-right: auto; }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap--doc { max-width: var(--wrap-doc); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.surface-mint { background: var(--c-mint); }
.surface-forest { background: var(--c-forest); color: var(--c-on-dark); }
.surface-rose { background: var(--c-rose); }

.grid { display: grid; gap: var(--s-3); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--s-2); }
.row { display: flex; gap: var(--s-2); align-items: center; }
.row-wrap { flex-wrap: wrap; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 26px;
}
.site-header__logo { flex: none; display: flex; align-items: center; }
.site-header__logo img { height: 52px; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; }
.site-nav a { color: #3A413E; }
.site-nav a.is-active { color: var(--c-forest); font-weight: var(--fw-black); }

/* ---------- 6. Buttons & Links ---------- */
.btn {
  display: inline-block;
  font-weight: var(--fw-bold);
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--r-btn);
  border: none;
  cursor: pointer;
  line-height: 1;
  text-align: center;
}
.btn--primary { background: var(--c-btn); color: #fff; }
.btn--primary:hover { background: var(--c-btn-hover); color: #fff; }
.btn--secondary { background: #fff; color: var(--c-btn-hover); border: 1px solid #CBDBD5; }
.btn--secondary:hover { border-color: var(--c-sage); color: var(--c-btn-hover); }
.btn--outline-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn--outline-dark:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.btn--block { width: 100%; }
.btn--sm { font-size: 14px; padding: 11px 20px; border-radius: 6px; }
.btn--dashed { background: var(--c-mint); color: var(--c-btn-hover); border: 1px dashed #B6CEC7; border-radius: var(--r-input); font-size: 14px; padding: 11px 18px; }

.link-arrow {
  font-weight: var(--fw-bold);
  color: var(--c-btn-hover);
  border-bottom: 2px solid var(--c-sage);
  padding-bottom: 2px;
}

/* ---------- 7. Tags & Badges ---------- */
.tag {
  display: inline-block;
  font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: .03em;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  color: var(--c-btn-hover);
  background: #E6EFEC;
}
.badge { display: inline-block; font-size: 12px; font-weight: var(--fw-bold); padding: 5px 11px; border-radius: var(--r-pill); }
.badge--ok { color: var(--c-btn-hover); background: var(--c-mint); }
.badge--low { color: var(--c-signal); background: var(--c-signal-bg); }
.badge--box { display: block; text-align: center; padding: 8px; border-radius: var(--r-input); font-size: 13px; }
.badge--box.badge--ok { color: var(--c-btn-hover); background: var(--c-mint); }
.badge--box.badge--low { color: var(--c-signal); background: var(--c-signal-bg); }

/* Filter-Chips */
.chip {
  font-size: 13px; font-weight: var(--fw-bold);
  padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border-in);
  background: #fff; color: #3A413E;
  cursor: pointer;
}
.chip.is-active { border-color: var(--c-forest); background: var(--c-forest); color: #fff; }

/* ---------- 8. Formulare ---------- */
.field {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--c-border-in);
  border-radius: var(--r-input);
  outline: none;
  font-family: inherit; font-size: 15px;
  color: var(--c-text);
  background: #fff;
}
.field::placeholder { color: var(--c-text-4); }
.field:focus { border: 2px solid var(--c-btn); padding: 10px 12px; }

.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-forest); color: #fff;
  font-size: 14px; font-weight: var(--fw-black);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* ---------- 9. Karten & Panels ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.card--pad { padding: 28px 30px; }
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 26px;
  box-shadow: var(--sh-float);
}
.panel--sticky { position: sticky; top: 88px; }

/* Kurskarte */
.course-card { display: flex; flex-direction: column; overflow: hidden; }
.course-card__head { padding: 22px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.course-card__body { padding: 14px 24px 0; flex: 1; }
.course-card__facts { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; color: #3A413E; }
.course-card__facts span { color: var(--c-text-4); }
.course-card__foot {
  padding: 18px 24px 22px; margin-top: 18px;
  border-top: 1px solid var(--c-line-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.price { font-size: 20px; font-weight: var(--fw-black); color: var(--c-text); }
.price--lg { font-size: 24px; }

/* Sticky-Box Zeilen */
.spec-row { display: flex; justify-content: space-between; font-size: 15px; }
.spec-row span { color: var(--c-text-4); }
.spec-divider { margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); }

/* ---------- 10. Highlight-Band ---------- */
.highlight { background: var(--c-forest); color: var(--c-on-dark); border-radius: var(--r-card); }
.highlight h2, .highlight h3 { color: #fff; }
.fact-tile {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 22px;
}
.fact-tile__num { font-size: 28px; font-weight: var(--fw-black); color: #fff; }
.fact-tile__label { font-size: 14px; color: var(--c-on-dark-2); margin-top: 4px; }

/* ---------- 11. Hero ---------- */
.hero { position: relative; overflow: hidden; min-height: 903px; background: var(--c-rose); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter); display: flex; justify-content: flex-end; align-items: center; min-height: 903px; }
.hero__content { width: min(520px, 50%); text-align: right; }

/* ---------- 12. Footer ---------- */
.site-footer { border-top: 1px solid var(--c-border); background: var(--c-surface); padding: 40px var(--gutter); }
.site-footer__inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center; }
.site-footer img { height: 52px; width: auto; display: block; }
.site-footer__mid { text-align: center; font-size: 14px; color: var(--c-text-2); line-height: 1.8; }
.site-footer__links { text-align: right; font-size: 14px; line-height: 1.9; }
.site-footer__links a { display: block; color: var(--c-sage); }
.site-footer__links a:hover { color: var(--c-btn-hover); }

/* ---------- 13. Utilities ---------- */
.u-center { text-align: center; }
.u-right { text-align: right; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }

/* ---------- 13b. Mobile-Navigation (Hamburger) — Erweiterung der Header-Komponente ---------- */
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 11px; margin-left: auto;
  border: 1px solid var(--c-border-in); border-radius: var(--r-input);
  background: var(--c-surface); cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--c-text); border-radius: 2px; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 14. Responsive ---------- */
@media (max-width: 860px) {
  :root { --fs-h1: 30px; --fs-h2: 24px; --section-y: 52px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; width: 100%; order: 3; flex-direction: column; align-items: flex-start;
    gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line-soft);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 2px; font-size: 16px; width: 100%; }
  .hero { min-height: 0; }
  .hero__img { position: relative; width: 100%; height: 300px; object-position: left center; }
  .hero__inner { min-height: 0; padding: 32px var(--gutter); }
  .hero__content { width: 100%; text-align: left; }
  .panel--sticky { position: static; }
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .site-footer img { margin: 0 auto; }
  .site-footer__mid, .site-footer__links { text-align: center; }
}