/* ----------------------------------------------------------------
	Custom CSS – Werbewerk Ratingen

	Wird laut Template-Doku als letzte Datei nach stylesheet.css und
	color-orange.css eingebunden und überschreibt nur, was nötig ist.
-----------------------------------------------------------------*/

/* Schrift: Montserrat, selbst gehostet (keine Verbindung zu Google) */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Logofarben */
:root {
  --bs-themecolor: #FF5A00;
  --bs-themecolor-rgb: 255, 90, 0;
  --bs-themehovercolor: #E04F00;
  --bs-themehovercolor-rgb: 224, 79, 0;
  --bs-primary-text-emphasis: #662400;
  --bs-primary-bg-subtle: #FFE6D9;
  --bs-primary-border-subtle: #FFC4A3;
  --bs-body-font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --ww-dark: #1A1A1A;
  --ww-heading: #1A1A1A;
  --ww-muted: #5c5c5c;
  --ww-surface: #fff;
  --ww-border: #ececec;
}

body { font-family: var(--bs-body-font-family); }

/* Header-Logo */
#header .logo img { height: 46px; width: auto; }
@media (max-width: 575.98px) { #header .logo img { height: 38px; } }

/* Überschriften im Stil des Schriftzugs */
.ww-display {
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}
.ww-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bs-themecolor);
}

/* Hero */
#home .hero-mask { background: linear-gradient(120deg, #fff 0%, #fff4ee 100%) !important; opacity: 1 !important; }
.ww-usp { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.25rem; }
.ww-usp li { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.ww-usp i { color: var(--bs-themecolor); }
@media (max-width: 991.98px) { .ww-usp { max-width: 420px; margin-left: auto; margin-right: auto; text-align: left; } }

/* Leistungs-Karten */
.ww-card {
  height: 100%;
  background: var(--ww-surface);
  border: 1px solid var(--ww-border);
  border-radius: .75rem;
  padding: 2rem 1.75rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ww-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(0,0,0,.08); border-color: var(--bs-primary-border-subtle); }
.ww-card .ww-icon {
  width: 56px; height: 56px; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-primary-bg-subtle); color: var(--bs-themecolor);
  font-size: 1.5rem; margin-bottom: 1.25rem;
}
.ww-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .6rem; }
.ww-card p { margin-bottom: 0; color: var(--ww-muted); }

/* Vorteile-Band (ersetzt den Zähler – keine erfundenen Zahlen) */
.ww-benefit { text-align: center; color: #fff; }
.ww-benefit i { font-size: 2.2rem; color: var(--bs-themecolor); margin-bottom: 1rem; }
.ww-benefit h4 { color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; }
.ww-benefit p { color: rgba(255,255,255,.7); margin: 0; font-size: .95rem; }

/* Ablauf */
.ww-step { position: relative; text-align: center; padding: 0 .75rem; }
.ww-step-num {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ww-dark); color: #fff; font-weight: 900; font-style: italic; font-size: 1.4rem;
  margin-bottom: 1.25rem; position: relative; z-index: 1;
  box-shadow: 0 0 0 6px var(--bs-body-bg), 0 0 0 8px var(--bs-themecolor);
}
.ww-step h3 { font-size: 1.1rem; font-weight: 700; }
.ww-step p { color: var(--ww-muted); font-size: .95rem; }
@media (min-width: 992px) {
  .ww-step:not(:last-child)::after {
    content: ""; position: absolute; top: 32px; left: calc(50% + 40px); right: calc(-50% + 40px);
    border-top: 2px dashed var(--bs-primary-border-subtle);
  }
}

/* Referenzen: Platzhalter, bis echte Fotos da sind */
.ww-ref {
  position: relative; overflow: hidden; border-radius: .75rem; aspect-ratio: 4 / 3; margin: 0;
  background: #2a2a2a center / cover no-repeat;
}
.ww-ref.is-placeholder {
  background-image: repeating-linear-gradient(-55deg, #232323 0 18px, #2b2b2b 18px 36px);
  display: flex; align-items: center; justify-content: center;
}
.ww-ref.is-placeholder > i { font-size: 2.5rem; color: rgba(255,255,255,.18); }
.ww-ref figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff;
}
.ww-ref figcaption strong { display: block; font-size: 1rem; }
.ww-ref figcaption span { font-size: .85rem; color: rgba(255,255,255,.75); }

/* CTA-Band */
.ww-cta .btn { min-width: 220px; }
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1ebe5a; border-color: #1ebe5a; color: #fff; }

/* Kontakt */
#contact .form-check-label { font-size: .875rem; color: var(--ww-muted); }
.ww-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ww-contact-line a { color: inherit; text-decoration: none; }
.ww-contact-line a:hover { color: var(--bs-themecolor); }

/* Platzhalter sichtbar machen, damit nichts davon live geht */
.ww-todo { background: #fff3a8; color: #6b5800; padding: 0 .3em; border-radius: .2em; font-style: normal; }

/* Footer */
#footer .ww-footer-logo { height: 54px; width: auto; }

/* Überschriften in Logo-Schwarz statt Template-Grau */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--ww-heading); }
.text-white h2, h2.text-white, .ww-benefit h4 { color: #fff; }

/* Auswahlfeld wie die übrigen Eingabefelder */
#contact-form .form-select { border-width: 2px; padding-top: .8rem; padding-bottom: .8rem; }

/* ----------------------------------------------------------------
	Hell / Dunkel
	Umschaltung über data-bs-theme auf <html> (Bootstrap 5.3).
	Das Template selbst kennt keinen Dunkelmodus, daher werden hier
	die fest eingetragenen Weißtöne aus stylesheet.css überschrieben.
-----------------------------------------------------------------*/

/* Umschalter */
.ww-theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ww-border); background: transparent; color: var(--ww-heading);
  font-size: 1rem; transition: border-color .2s, color .2s;
}
.ww-theme-toggle:hover { border-color: var(--bs-themecolor); color: var(--bs-themecolor); }
.ww-icon-sun, [data-bs-theme="dark"] .ww-icon-moon { display: none; }
[data-bs-theme="dark"] .ww-icon-sun { display: inline; }
@media (max-width: 991.98px) { .ww-theme-toggle { margin-right: 1rem; } }

/* Logo-Variante je nach Modus */
#header .logo .ww-logo-dark, [data-bs-theme="dark"] #header .logo .ww-logo-light { display: none; }
[data-bs-theme="dark"] #header .logo .ww-logo-dark { display: block; }

[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-body-bg-rgb: 18, 18, 18;
  --bs-body-color: #c4c4c4;
  --bs-secondary-bg: #1e1e1e;
  --bs-tertiary-bg: #1a1a1a;
  --bs-border-color: #2e2e2e;
  --ww-heading: #f2f2f2;
  --ww-muted: #a3a3a3;
  --ww-surface: #1a1a1a;
  --ww-border: #2c2c2c;
  --bs-primary-bg-subtle: rgba(255, 90, 0, .14);
  --bs-primary-border-subtle: rgba(255, 90, 0, .45);
  color-scheme: dark;
}
[data-bs-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .preloader { background-color: var(--bs-body-bg); }

/* Header */
[data-bs-theme="dark"] .primary-menu,
[data-bs-theme="dark"] #header .logo { background: #161616; }
[data-bs-theme="dark"] .primary-menu { border-bottom: 1px solid #242424; }
[data-bs-theme="dark"] .primary-menu ul.navbar-nav > li > a:not(.btn) { color: #e6e6e6; }
[data-bs-theme="dark"] .primary-menu ul.navbar-nav > li:hover > a:not(.btn),
[data-bs-theme="dark"] .primary-menu ul.navbar-nav > li > a.active:not(.btn) { color: var(--bs-themecolor); }
[data-bs-theme="dark"] .navbar-toggler span { background: #e6e6e6; }
@media (max-width: 991.98px) {
  [data-bs-theme="dark"] .navbar-expand-lg .navbar-collapse { background: #161616; box-shadow: 0 10px 20px rgba(0,0,0,.5); }
}

/* Flächen */
[data-bs-theme="dark"] #home .hero-mask { background: linear-gradient(120deg, #121212 0%, #1f1510 100%) !important; }
[data-bs-theme="dark"] .bg-light { background-color: #181818 !important; }
[data-bs-theme="dark"] .ww-card:hover { box-shadow: 0 1rem 2rem rgba(0,0,0,.5); }
[data-bs-theme="dark"] .ww-step-num { background: #262626; }
[data-bs-theme="dark"] .ww-ref.is-placeholder { background-image: repeating-linear-gradient(-55deg, #1c1c1c 0 18px, #232323 18px 36px); }
[data-bs-theme="dark"] .featured-box:not(.style-5) .featured-box-icon { color: #d6d6d6; }
[data-bs-theme="dark"] .lead { color: var(--bs-body-color); }

/* Buttons */
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #f2f2f2; --bs-btn-border-color: #f2f2f2; --bs-btn-hover-bg: #f2f2f2; --bs-btn-hover-color: #121212; --bs-btn-hover-border-color: #f2f2f2; }

/* FAQ */
[data-bs-theme="dark"] .accordion .accordion-header .accordion-button,
[data-bs-theme="dark"] .accordion .accordion-header .accordion-button.collapsed { background: transparent; color: #e6e6e6; }
[data-bs-theme="dark"] .accordion .accordion-header .accordion-button:not(.collapsed) { color: var(--bs-themecolor); }
[data-bs-theme="dark"] .accordion-item { background: transparent; }

/* Formular */
[data-bs-theme="dark"] #contact-form .form-control,
[data-bs-theme="dark"] #contact-form .form-select { background-color: #1a1a1a; border-color: #333; color: #eee; }
[data-bs-theme="dark"] #contact-form .form-control::placeholder { color: #8a8a8a; }
[data-bs-theme="dark"] .ww-todo { background: #4a3f00; color: #ffe680; }

/* Footer etwas absetzen */
[data-bs-theme="dark"] #footer { background-color: #0b0b0b !important; border-top: 1px solid #222; }