/* ================================================================
   SWN-KUNDEN-STYLING · Stand 23.07.2026

   Analysierte Quellen:
   - https://swnuernberg.de/
   - https://swnuernberg.de/wp-content/themes/emk_publisher/style.css?ver=1
   - https://swnuernberg.de/wp-content/plugins/emk-immosearch/css/emk-immosearch.css
   - https://swnuernberg.de/wp-content/themes/emk_publisher/style_immosearch_swn_bundler.css
   - https://swnuernberg.de/wp-content/themes/emk_publisher/style_immosearch_client_swn_ovr.css

   Das SWN-Theme liefert Montserrat (400/600/700) und Open Sans
   (400/600) als lokale Webfonts aus seinem Verzeichnis /fonts/ aus.

   "Direkt" bezeichnet einen auf der SWN-Webseite gefundenen Wert.
   "Abgeleitet" bezeichnet eine passende Ergänzung für den Rechner,
   wenn die Webseite dafür keinen eindeutigen Designwert vorgibt.

   Für einen anderen Kunden müssen nur die Werte im folgenden
   Block geändert werden. Das Rechner-Modul erbt alle Variablen.
   ================================================================ */
.swn-rechner-embed {
  color-scheme: light;

  /* Typografie: direkt aus dem SWN-Theme */
  --page-font-family: "Open Sans", Arial, sans-serif;
  --page-heading-font-family: "Montserrat", Arial, sans-serif;
  --page-title-size: clamp(2rem, 4vw, 36px);
  --page-intro-size: 16px;
  --page-eyebrow-size: 13px; /* abgeleitet aus kleinen SWN-Auszeichnungen */
  --swn-font-family: "Open Sans", Arial, sans-serif;
  --swn-heading-font-family: "Montserrat", Arial, sans-serif;
  --swn-button-font-family: "Montserrat", Arial, sans-serif;
  --swn-font-size: 16px;
  --swn-heading-size: clamp(24px, 3vw, 28px);
  --swn-button-font-size: 18px;
  --swn-caption-font-size: 13px; /* abgeleitet */
  --swn-help-font-size: 14px; /* abgeleitet */
  --swn-small-font-size: 13px; /* abgeleitet */
  --swn-result-lead-size: 17px; /* abgeleitet */
  --swn-housing-size: clamp(21px, 3vw, 26px); /* abgeleitet */
  --swn-body-line-height: 1.6;
  --swn-heading-line-height: 1.4;
  --swn-label-weight: 600;
  --swn-strong-weight: 700;

  /* Farben der umgebenden Seite: direkt */
  --page-background: #ffffff;
  --page-text: #64676e;
  --page-heading-color: #1f3058;
  --page-muted: #64676e;
  --page-eyebrow: #17a1d5;

  /* SWN-Marken- und Rechnerfarben: direkt */
  --swn-text: #64676e;
  --swn-heading-color: #1f3058;
  --swn-muted: #64676e;
  --swn-accent: #17a1d5;
  --swn-accent-strong: #1f3058;
  --swn-accent-soft: #e8f6fb;
  --swn-button-background: #e94e1b;
  --swn-button-hover: #ff551e;
  --swn-button-text: #ffffff;
  --swn-surface: #ffffff;
  --swn-surface-subtle: #f7f7f7;
  --swn-header-start: #e8f6fb;
  --swn-header-end: #ffffff;
  --swn-border: #b1b1b1;
  --swn-placeholder: #b1b1b1;

  /* Fehlerfarben: aus der SWN-CTA-Farbe abgeleitet */
  --swn-error: #e94e1b;
  --swn-error-strong: #b9380e;
  --swn-error-soft: #fef6f4;

  /* Formen und Effekte: Formfelder direkt, übrige Werte abgeleitet */
  --swn-card-radius: 0;
  --swn-control-radius: 5px;
  --swn-button-radius: 0;
  --swn-panel-radius: 6px;
  --swn-small-radius: 3px;
  --swn-shadow: 0 5px 20px rgba(23, 161, 213, 0.3);
  --swn-focus-ring: rgba(23, 161, 213, 0.28);

  /* Größen und Abstände: Breite und Feldhöhe direkt, Lücken abgeleitet */
  --page-content-width: 1140px;
  --page-side-gap: 16px;
  --swn-section-padding: clamp(24px, 4vw, 40px);
  --swn-result-padding: clamp(24px, 4vw, 40px);
  --swn-control-height: 45px;
  --swn-grid-row-gap: 26px;
  --swn-grid-column-gap: 28px;
}

.swn-rechner-embed,
.swn-rechner-embed * {
  box-sizing: border-box;
}

.swn-rechner-embed {
  margin: 0;
  color: var(--page-text);
  background: var(--page-background);
  font-family: var(--page-font-family);
  font-size: 16px;
  line-height: var(--swn-body-line-height);
}

.swn-rechner-embed__inner {
  width: min(
    calc(100% - var(--page-side-gap) - var(--page-side-gap)),
    var(--page-content-width)
  );
  margin-inline: auto;
  padding: clamp(24px, 5vw, 48px) 0;
}

.swn-rechner-embed .intro {
  max-width: 780px;
  margin-bottom: 28px;
}

.swn-rechner-embed .eyebrow {
  margin: 0 0 12px;
  color: var(--page-eyebrow);
  font-size: var(--page-eyebrow-size);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.swn-rechner-embed h1 {
  margin: 0;
  font-family: var(--page-heading-font-family);
  font-size: var(--page-title-size);
  font-weight: 600;
  line-height: 1.5;
  color: var(--page-heading-color);
}

.swn-rechner-embed .intro p:last-child {
  max-width: 700px;
  margin: 20px 0 0;
  color: var(--page-muted);
  font-size: var(--page-intro-size);
  line-height: var(--swn-body-line-height);
}