/* =========================================================================
   SOLUTIVE AG — Corporate Design CSS für Zoho Marketing Landingpages
   Version 1.0 | Basierend auf CI-Leitfaden Solutive AG
   =========================================================================

   EINBAU IN ZOHO:
   1. Im Landingpage-Editor → Settings / Page Settings → Custom CSS
   2. ODER: <style>-Block in ein Custom-HTML-Element ganz oben einfügen
   3. Google Fonts werden via @import geladen — keine separate Einbindung nötig

   NUTZUNG:
   • Verwende Custom-HTML-Blöcke mit den .sol-* Klassen für volle Kontrolle
   • Für Zoho-Default-Elemente versuche ich am Ende einige Overrides

   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Sans+Display:wght@500;600;700;800&display=swap');

/* =========================================================================
   1. DESIGN TOKENS (CSS Variables — hier zentral anpassen)
   ========================================================================= */
:root {
  /* Farben — laut CI Solutive AG */
  --sol-black:        #222223;   /* Primärfarbe / Neutral-Schwarz */
  --sol-grey-light:   #E5E1E6;   /* Sekundärfarbe / Hellgrau */
  --sol-orange:       #FF8200;   /* Akzentfarbe / Orange */
  --sol-grey-dark:    #54585A;   /* Akzentfarbe 2 / Dunkelgrau */

  /* Abgeleitete Töne */
  --sol-white:        #FFFFFF;
  --sol-grey-bg:      #F7F6F8;   /* sehr helles Grau für Sections */
  --sol-orange-hover: #E67400;   /* Orange dunkler für Hover */
  --sol-border:       #DCD8DD;   /* Border auf Hellgrau-Basis */

  /* Typografie */
  --sol-font-body:    'Noto Sans', system-ui, -apple-system, sans-serif;
  --sol-font-heading: 'Noto Sans Display', 'Noto Sans', sans-serif;

  /* Font-Größen (fluid via clamp) */
  --sol-fs-h1:        clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --sol-fs-h2:        clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --sol-fs-h3:        clamp(1.35rem, 1.5vw + 1rem, 1.75rem);
  --sol-fs-h4:        1.25rem;
  --sol-fs-body:      1.0625rem;   /* 17px — gut lesbar */
  --sol-fs-small:     0.9375rem;   /* 15px */

  /* Spacing */
  --sol-space-xs:     0.5rem;
  --sol-space-sm:     1rem;
  --sol-space-md:     1.75rem;
  --sol-space-lg:     3rem;
  --sol-space-xl:     5rem;
  --sol-space-2xl:    7rem;

  /* Layout */
  --sol-container:    1200px;
  --sol-container-sm: 800px;
  --sol-radius:       6px;
  --sol-radius-lg:    12px;

  /* Effekte */
  --sol-shadow-sm:    0 1px 3px rgba(34, 34, 35, 0.08);
  --sol-shadow-md:    0 4px 16px rgba(34, 34, 35, 0.08);
  --sol-shadow-lg:    0 12px 32px rgba(34, 34, 35, 0.12);
  --sol-transition:   180ms ease;
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
.sol-page,
.sol-page * {
  box-sizing: border-box;
}

.sol-page {
  font-family: var(--sol-font-body);
  font-size: var(--sol-fs-body);
  line-height: 1.6;
  color: var(--sol-black);
  background: var(--sol-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sol-page p {
  margin: 0 0 var(--sol-space-sm) 0;
  color: var(--sol-grey-dark);
}

.sol-page a {
  color: var(--sol-black);
  text-decoration: underline;
  text-decoration-color: var(--sol-orange);
  text-underline-offset: 3px;
  transition: color var(--sol-transition);
}
.sol-page a:hover {
  color: var(--sol-orange);
}

/* =========================================================================
   3. TYPOGRAFIE
   ========================================================================= */
.sol-h1, .sol-h2, .sol-h3, .sol-h4 {
  font-family: var(--sol-font-heading);
  color: var(--sol-black);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sol-space-sm) 0;
  text-align: left;            /* CI: Hauptüberschriften linksbündig */
}

.sol-h1 { font-size: var(--sol-fs-h1); font-weight: 800; letter-spacing: -0.02em; }
.sol-h2 { font-size: var(--sol-fs-h2); }
.sol-h3 { font-size: var(--sol-fs-h3); }
.sol-h4 { font-size: var(--sol-fs-h4); font-weight: 600; }

.sol-lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--sol-grey-dark);
  max-width: 60ch;
  margin: 0 0 var(--sol-space-md) 0;
}

.sol-eyebrow {
  display: inline-block;
  font-size: var(--sol-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sol-orange);
  margin-bottom: var(--sol-space-sm);
}

/* =========================================================================
   4. LAYOUT — Sections & Container
   ========================================================================= */
.sol-section {
  padding: var(--sol-space-xl) var(--sol-space-sm);
}
.sol-section--lg { padding: var(--sol-space-2xl) var(--sol-space-sm); }
.sol-section--sm { padding: var(--sol-space-lg) var(--sol-space-sm); }

.sol-section--dark {
  background: var(--sol-black);
  color: var(--sol-white);
}
.sol-section--dark .sol-h1,
.sol-section--dark .sol-h2,
.sol-section--dark .sol-h3,
.sol-section--dark .sol-h4 { color: var(--sol-white); }
.sol-section--dark p { color: var(--sol-grey-light); }

.sol-section--grey {
  background: var(--sol-grey-bg);
}

.sol-container {
  max-width: var(--sol-container);
  margin: 0 auto;
  padding: 0 var(--sol-space-sm);
}
.sol-container--narrow {
  max-width: var(--sol-container-sm);
}

/* Divider / Trennlinie zwischen Textblöcken (CI: visuelle Trennung) */
.sol-divider {
  border: 0;
  border-top: 1px solid var(--sol-border);
  margin: var(--sol-space-lg) 0;
}

/* =========================================================================
   5. HERO SECTION
   ========================================================================= */
.sol-hero {
  padding: var(--sol-space-2xl) var(--sol-space-sm);
  background: var(--sol-white);
  position: relative;
}
.sol-hero--dark {
  background: var(--sol-black);
  color: var(--sol-white);
}
.sol-hero--dark .sol-h1 { color: var(--sol-white); }
.sol-hero--dark .sol-lead { color: var(--sol-grey-light); }

.sol-hero__inner {
  max-width: var(--sol-container);
  margin: 0 auto;
}
.sol-hero__content {
  max-width: 720px;
}

/* =========================================================================
   6. BUTTONS / CTAs
   ========================================================================= */
.sol-btn {
  display: inline-block;
  font-family: var(--sol-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.75rem;
  border-radius: var(--sol-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--sol-transition);
  letter-spacing: 0.01em;
}

/* Primary: Orange — der Eyecatcher */
.sol-btn--primary {
  background: var(--sol-orange);
  color: var(--sol-white);
  border-color: var(--sol-orange);
}
.sol-btn--primary:hover {
  background: var(--sol-orange-hover);
  border-color: var(--sol-orange-hover);
  color: var(--sol-white);
  transform: translateY(-1px);
  box-shadow: var(--sol-shadow-md);
}

/* Secondary: Schwarz */
.sol-btn--secondary {
  background: var(--sol-black);
  color: var(--sol-white);
  border-color: var(--sol-black);
}
.sol-btn--secondary:hover {
  background: var(--sol-grey-dark);
  border-color: var(--sol-grey-dark);
  color: var(--sol-white);
}

/* Outline: für sekundäre Aktionen */
.sol-btn--outline {
  background: transparent;
  color: var(--sol-black);
  border-color: var(--sol-black);
}
.sol-btn--outline:hover {
  background: var(--sol-black);
  color: var(--sol-white);
}

/* Outline auf dunklem Hintergrund */
.sol-section--dark .sol-btn--outline,
.sol-hero--dark .sol-btn--outline {
  color: var(--sol-white);
  border-color: var(--sol-white);
}
.sol-section--dark .sol-btn--outline:hover,
.sol-hero--dark .sol-btn--outline:hover {
  background: var(--sol-white);
  color: var(--sol-black);
}

/* Button-Gruppe */
.sol-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sol-space-sm);
  margin-top: var(--sol-space-md);
}

/* =========================================================================
   7. GRID & CARDS
   ========================================================================= */
.sol-grid {
  display: grid;
  gap: var(--sol-space-md);
}
.sol-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sol-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sol-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.sol-card {
  background: var(--sol-white);
  border: 1px solid var(--sol-border);
  border-radius: var(--sol-radius-lg);
  padding: var(--sol-space-md);
  transition: all var(--sol-transition);
}
.sol-card:hover {
  border-color: var(--sol-grey-dark);
  box-shadow: var(--sol-shadow-md);
  transform: translateY(-2px);
}

.sol-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sol-grey-bg);
  border-radius: var(--sol-radius);
  margin-bottom: var(--sol-space-sm);
  color: var(--sol-orange);
  font-size: 1.5rem;
}

.sol-card__title {
  font-family: var(--sol-font-heading);
  font-size: var(--sol-fs-h4);
  font-weight: 600;
  color: var(--sol-black);
  margin: 0 0 var(--sol-space-xs) 0;
}

/* =========================================================================
   8. FORMULARE (für Custom HTML — Zoho-Forms haben eigene Klassen,
      siehe Override-Sektion am Ende)
   ========================================================================= */
.sol-form {
  display: flex;
  flex-direction: column;
  gap: var(--sol-space-sm);
  max-width: 480px;
}

.sol-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sol-form__label {
  font-size: var(--sol-fs-small);
  font-weight: 600;
  color: var(--sol-black);
}

.sol-form__input,
.sol-form__textarea,
.sol-form__select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: var(--sol-font-body);
  font-size: 1rem;
  color: var(--sol-black);
  background: var(--sol-white);
  border: 1.5px solid var(--sol-border);
  border-radius: var(--sol-radius);
  transition: border-color var(--sol-transition), box-shadow var(--sol-transition);
}
.sol-form__input:focus,
.sol-form__textarea:focus,
.sol-form__select:focus {
  outline: none;
  border-color: var(--sol-orange);
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.15);
}

.sol-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.sol-form__hint {
  font-size: 0.8125rem;
  color: var(--sol-grey-dark);
}

/* Checkbox / DSGVO */
.sol-form__check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: var(--sol-fs-small);
  color: var(--sol-grey-dark);
}
.sol-form__check input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--sol-orange);
}

/* =========================================================================
   9. LISTEN, BADGES, UTILITIES
   ========================================================================= */
.sol-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sol-space-md) 0;
}
.sol-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--sol-grey-dark);
}
.sol-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--sol-orange);
  border-radius: 2px;
}

.sol-badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--sol-grey-light);
  color: var(--sol-black);
}
.sol-badge--orange { background: var(--sol-orange); color: var(--sol-white); }
.sol-badge--dark   { background: var(--sol-black);  color: var(--sol-white); }

/* Text-Utilities */
.sol-text-center { text-align: center; }
.sol-text-orange { color: var(--sol-orange); }
.sol-text-muted  { color: var(--sol-grey-dark); }
.sol-mt-0  { margin-top: 0; }
.sol-mb-0  { margin-bottom: 0; }
.sol-mt-md { margin-top: var(--sol-space-md); }
.sol-mt-lg { margin-top: var(--sol-space-lg); }

/* Akzentlinie (für Sektion-Trennung im CI-Stil) */
.sol-accent-line {
  width: 64px;
  height: 4px;
  background: var(--sol-orange);
  border: 0;
  margin: 0 0 var(--sol-space-md) 0;
}

/* =========================================================================
   10. FOOTER (minimal)
   ========================================================================= */
.sol-footer {
  background: var(--sol-black);
  color: var(--sol-grey-light);
  padding: var(--sol-space-lg) var(--sol-space-sm);
  font-size: var(--sol-fs-small);
}
.sol-footer a {
  color: var(--sol-grey-light);
  text-decoration: none;
}
.sol-footer a:hover { color: var(--sol-orange); }

/* =========================================================================
   11. RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
  .sol-section { padding: var(--sol-space-lg) var(--sol-space-sm); }
  .sol-hero    { padding: var(--sol-space-lg) var(--sol-space-sm); }
  .sol-btn     { width: 100%; text-align: center; }
  .sol-btn-group { flex-direction: column; }
}

/* =========================================================================
   12. ZOHO-DEFAULT-OVERRIDES
   ----------------------------------------------------------------
   Zoho Marketing Automation / LandingPage vergibt eigene Klassen.
   Die häufigsten sind unten gelistet — !important nötig, weil Zoho
   teilweise inline-Styles setzt.
   ⚠️ Falls Selektoren bei dir nicht greifen: in DevTools die echte
   Klasse abgreifen und hier nachpflegen.
   ========================================================================= */

/* Zoho-Buttons (häufige Klassen: .zcbtn, .zForm-button, .zc-button) */
.zcbtn,
.zForm-button,
.zc-button,
button[type="submit"].zForm-Submit,
input[type="submit"].zForm-Submit {
  background: var(--sol-orange) !important;
  border: 2px solid var(--sol-orange) !important;
  color: var(--sol-white) !important;
  font-family: var(--sol-font-body) !important;
  font-weight: 600 !important;
  padding: 0.95rem 1.75rem !important;
  border-radius: var(--sol-radius) !important;
  transition: all var(--sol-transition) !important;
  cursor: pointer !important;
}
.zcbtn:hover,
.zForm-button:hover,
.zc-button:hover,
button[type="submit"].zForm-Submit:hover,
input[type="submit"].zForm-Submit:hover {
  background: var(--sol-orange-hover) !important;
  border-color: var(--sol-orange-hover) !important;
}

/* Zoho-Form-Inputs (häufig: .zForm-input, .zc-input) */
.zForm-input,
.zc-input,
input[type="text"].zForm,
input[type="email"].zForm,
textarea.zForm {
  border: 1.5px solid var(--sol-border) !important;
  border-radius: var(--sol-radius) !important;
  padding: 0.75rem 0.9rem !important;
  font-family: var(--sol-font-body) !important;
  font-size: 1rem !important;
  color: var(--sol-black) !important;
}
.zForm-input:focus,
.zc-input:focus {
  border-color: var(--sol-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.15) !important;
  outline: none !important;
}

/* Zoho-Labels */
.zForm-label,
.zc-label {
  font-family: var(--sol-font-body) !important;
  font-size: var(--sol-fs-small) !important;
  font-weight: 600 !important;
  color: var(--sol-black) !important;
}

/* Generische Heading-Overrides (falls Zoho-Builder eigene Klassen vergibt) */
.lp-page h1, .lpEditor h1,
.lp-page h2, .lpEditor h2,
.lp-page h3, .lpEditor h3 {
  font-family: var(--sol-font-heading) !important;
  color: var(--sol-black) !important;
  letter-spacing: -0.01em !important;
}

/* Body-Default für gesamten Page-Wrapper (falls Zoho einen body-ähnlichen Container nutzt) */
.lp-page,
.lpEditor-page {
  font-family: var(--sol-font-body) !important;
  color: var(--sol-black) !important;
}

/* =========================================================================
   ENDE
   ========================================================================= */