/* =============================================================================
   AIR Planung – Ergänzungen zum Style „AIR Planung“
   Wird von YOOtheme Pro automatisch geladen (Child Theme yootheme_air).
   Klassen mit Präfix „air-“ werden im Builder im Feld „CSS-Klasse“
   (Erweitert → Klasse) des jeweiligen Elements oder der Section eingetragen.
   ============================================================================= */

/* Schrift: Source Sans 3 (SIL Open Font License), lokal ausgeliefert
   -------------------------------------------------------------------------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/source-sans-3-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

:root {
  --air-petrol: #00677d;
  --air-petrol-dark: #004f5f;
  --air-petrol-tint: #e3eef0;
  --air-orange: #e84226;
  --air-orange-dark: #c9381d;
  --air-yellow: #feca40;
  --air-sage: #9ebfbe;
  --air-sage-tint: #e8f0ef;
  --air-salmon: #f4a087;
  --air-salmon-tint: #fdece6;
  --air-grey: #e2e3e4;
  --air-grey-light: #f2f3f3;
  --air-ink: #1b2a2e;
  --air-muted: #4f6164;
  --air-border: #daddde;
  --air-radius: 6px;
}

/* Grundelemente
   -------------------------------------------------------------------------- */
.uk-button { border-radius: var(--air-radius); font-weight: 700; text-transform: none; letter-spacing: 0; }
.uk-button-secondary { border: 2px solid var(--air-petrol); line-height: calc(52px - 4px); }
.uk-button-large.uk-button-secondary { line-height: calc(58px - 4px); }
.uk-light .uk-button-secondary, .uk-section-primary .uk-button-secondary { border-color: #fff; color: #fff; }
.uk-button-default { border: 1.5px solid var(--air-border); }

.uk-card { border-radius: var(--air-radius); }
.uk-card-default { box-shadow: none; border: 1px solid var(--air-border); }
.uk-card-default.uk-card-hover:hover { box-shadow: 0 16px 40px rgba(0, 61, 74, 0.08); }
.uk-card-media-top img, .uk-card .el-image { border-radius: var(--air-radius) var(--air-radius) 0 0; }

.uk-label { border-radius: 999px; padding: 3px 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }

.uk-input, .uk-select, .uk-textarea { border: 1.5px solid #c2c9ca; border-radius: var(--air-radius); }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: var(--air-petrol); }
:focus-visible { outline: 3px solid var(--air-petrol); outline-offset: 3px; }

/* Toolbar in CI-Grau, aktiver Menüpunkt mit orangem Unterstrich */
.tm-toolbar, .tm-toolbar-default { background: var(--air-grey); color: var(--air-ink); font-size: 14px; }
.uk-navbar-nav > li > a { text-transform: none; font-weight: 600; }
.uk-navbar-nav > li.uk-active > a {
  text-decoration: underline; text-decoration-color: var(--air-orange);
  text-decoration-thickness: 3px; text-underline-offset: 12px;
}

/* Subnav „Pill“ als Sprungmarken / Filter */
.uk-subnav-pill > * > :first-child {
  border: 1.5px solid #c9d3d3; border-radius: 999px; color: var(--air-ink);
  font-weight: 600; text-transform: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px;
}
.uk-subnav-pill > .uk-active > a { border-color: var(--air-petrol); }

/* Accordion als weiße Boxen */
.air-faq .el-item { background: #fff; border-radius: var(--air-radius); padding: 0 24px; margin-top: 12px; }
.air-faq .el-title { min-height: 64px; display: flex; align-items: center; font-weight: 700; font-size: 18px; color: var(--air-ink); }
.air-faq .el-content { padding-bottom: 20px; }


/* Section-Hintergründe (Section → Erweitert → Klasse)
   -------------------------------------------------------------------------- */
.uk-section.air-bg-sage   { background: var(--air-sage-tint); }
.uk-section.air-bg-salmon { background: var(--air-salmon-tint); }
.uk-section.air-bg-grey   { background: var(--air-grey-light); }

/* Kreis-Motiv aus dem Logo an einer Section: großer Salbei-Kreis rechts oben,
   kleiner gelber Punkt. Klasse „air-deco“ an der Section. */
.air-deco { position: relative; overflow: hidden; }
.air-deco > * { position: relative; z-index: 1; }
.air-deco::before {
  content: ""; position: absolute; z-index: 0; right: -120px; top: -140px;
  width: 520px; height: 520px; border-radius: 50%; background: var(--air-sage); opacity: 0.6; pointer-events: none;
}
.air-deco::after {
  content: ""; position: absolute; z-index: 0; right: 330px; bottom: 44px;
  width: 72px; height: 72px; border-radius: 50%; background: var(--air-yellow); pointer-events: none;
}
.air-deco.air-deco-salmon::before { background: var(--air-salmon); opacity: 0.45; }
/* Ring-Variante für dunkle Sections */
.air-ring { position: relative; overflow: hidden; }
.air-ring > * { position: relative; z-index: 1; }
.air-ring::before {
  content: ""; position: absolute; z-index: 0; right: -120px; top: -160px;
  width: 420px; height: 420px; border-radius: 50%; border: 56px solid rgba(255, 255, 255, 0.07); pointer-events: none;
}

/* Startbild mit Salbei-Kreis dahinter und gelbem Punkt (Image-Element) */
.air-hero-image { position: relative; }
.air-hero-image img { position: relative; z-index: 1; border-radius: var(--air-radius); }
.air-hero-image::before {
  content: ""; position: absolute; z-index: 0; top: -64px; right: -88px;
  width: 420px; height: 420px; border-radius: 50%; background: var(--air-sage);
}
.air-hero-image::after {
  content: ""; position: absolute; z-index: 2; left: -36px; bottom: 56px;
  width: 88px; height: 88px; border-radius: 50%; background: var(--air-yellow);
}

@media (max-width: 759px) {
  .air-deco::before, .air-deco::after, .air-hero-image::before, .air-hero-image::after, .air-ring::before { display: none; }
}


/* Karten-Raster (Grid-Element → Klasse)
   -------------------------------------------------------------------------- */

/* Angebotskarten: Meta = Preis groß */
.air-offers .el-meta { font-size: 15px; color: var(--air-muted); }
.air-offers .el-meta strong, .air-price { font-size: 21px; color: var(--air-ink); font-weight: 700; }
.air-offers .el-link { font-weight: 700; }

/* Stufen: nummerierte Kreise vor dem Titel (Grid-Element oder List-Element) */
.air-stages { counter-reset: air-stage; }
.air-stages .el-item { counter-increment: air-stage; }
.air-stages .el-item .el-title::before {
  content: counter(air-stage); display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%;
  background: var(--air-petrol); color: #fff; font-weight: 700; font-size: 20px;
}
.air-stages .el-meta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--air-border); font-size: 21px; font-weight: 700; color: var(--air-ink); }
.air-stages.air-stages-yellow .el-item .el-title::before { background: var(--air-yellow); color: var(--air-ink); }

/* Stufenliste mit Preis rechts (List-Element, Inhalt „Titel | Preis“ als zwei Spans) */
.air-steps > .uk-list, .air-steps .uk-list { counter-reset: air-step; }
.air-steps .uk-list > li { counter-increment: air-step; position: relative; padding: 18px 0 18px 56px; border-bottom: 1px solid var(--air-border); margin: 0; }
.air-steps .uk-list > li::before {
  content: counter(air-step); position: absolute; left: 0; top: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--air-petrol); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.air-steps .air-step-price { float: right; font-weight: 700; color: var(--air-ink); margin-left: 16px; }

/* Häkchen-Liste mit Salbei-Kreisen */
.air-check .uk-list > li { position: relative; padding-left: 40px; }
.air-check .uk-list > li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--air-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b2a2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Ampel-Liste (Machbarkeitscheck): 1 grün, 2 gelb, 3 rot – immer mit Textlabel */
.air-ampel .uk-list > li { position: relative; padding: 16px 18px 16px 52px; border: 1px solid var(--air-border); border-radius: var(--air-radius); }
.air-ampel .uk-list > li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 22px; height: 22px; border-radius: 50%; }
.air-ampel .uk-list > li:nth-child(1)::before { background: #2f7a52; }
.air-ampel .uk-list > li:nth-child(2)::before { background: var(--air-yellow); }
.air-ampel .uk-list > li:nth-child(3)::before { background: var(--air-orange); }

/* Kennzahlen auf Petrol: Titel = Zahl in Gelb */
.air-stats .el-title { color: var(--air-yellow) !important; font-size: 52px; line-height: 1; font-weight: 700; }
.air-stats .el-content { color: #fff; font-size: 17px; }

/* Icon im Kreis (Icon-Element oder Grid-Panel mit Icon) */
.air-icon-circle .uk-icon, .air-icon-circle .el-image.uk-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--air-sage); color: var(--air-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.air-icon-circle.air-icon-petrol .uk-icon { background: var(--air-petrol-tint); color: var(--air-petrol); }

/* Projektkarten: Kompetenzfeld-Label auf dem Bild */
.air-projects .el-item { position: relative; }
.air-projects .uk-label { position: absolute; left: 14px; top: 14px; z-index: 2; }

/* Team: Gesellschafter:innen (Grid mit Bild oben) */
.air-team .el-image { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.air-team .el-title { color: var(--air-petrol); font-size: 19px; line-height: 1.25; }
.air-team .el-meta { font-size: 15px; color: var(--air-muted); }
.air-team .el-content { font-size: 13px; color: var(--air-muted); }
/* Team kompakt (Grid mit Bild links) */
.air-team-compact .el-image { width: 104px; height: 130px; object-fit: cover; border-radius: 4px; }

/* Zitat */
.air-quote blockquote { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; font-weight: 600; color: var(--air-ink); font-style: normal; }
.air-quote blockquote::before {
  content: "\201C"; display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; padding-top: 22px; box-sizing: border-box;
  margin-bottom: 16px; border-radius: 50%; background: var(--air-yellow); font-size: 72px; line-height: 1; font-weight: 700;
}

/* Hinweisbox / Newsletter-Box */
.air-box-salmon { background: var(--air-salmon-tint); border-radius: var(--air-radius); padding: 32px; }
.air-box-sage { background: var(--air-sage-tint); border-radius: var(--air-radius); padding: 24px; }


/* Mobile Schnellkontakt (Modul „Benutzerdefiniert“ in Position „bottom“)
   -------------------------------------------------------------------------- */
.air-mobilbar { display: none; }
@media (max-width: 639px) {
  .air-mobilbar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 980;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--air-border);
  }
  .air-mobilbar .uk-button { flex: 1; padding: 0 8px; }
  body { padding-bottom: 80px; }
}