/* ============================================================================
   CLEANY24 BRAND STYLESHEET
   ============================================================================
   Extracted from the Cleany24 booking platform (apps/web/index.html,
   buchung.css, driver.css, admin.css) so the same colors/fonts/type can be
   applied to the separate cleany-vollreinigung marketing site.

   HOW TO USE
   ----------
   1. Copy this whole docs/brand/ folder (this .css file + its fonts/
      subfolder) into that site's repo, e.g. as css/cleany24/, keeping the
      fonts/ subfolder alongside the .css file so the relative url(...)
      paths below still resolve.

   2. Link it AFTER the site's existing stylesheet, so these rules can
      override defaults:
        <link rel="stylesheet" href="css/cleany24/cleany24-style.css" />

   3. Fonts are self-hosted -- the actual .woff2 files ship in fonts/
      alongside this file, no external font CDN request of any kind.
      This is a firm rule for every Cleany24 property, not a preference:
      loading fonts from Google's servers sends visitor IP addresses to
      Google before any cookie-consent decision is made, which German
      courts (e.g. LG München I, 2022) have held violates the GDPR.
      Never add a fonts.googleapis.com / fonts.gstatic.com link anywhere,
      on this site or any other Cleany24 property -- self-host instead.

   4. Everything is driven by the CSS custom properties in :root, so the
      quickest way to reskin an existing page is to just replace its own
      color hex codes with the var(--cleany-*) names below. The base
      element rules (body/h1-h6/a/button) apply automatically without any
      markup changes. The component classes (.btn-primary, .badge, .card,
      .section-label) are opt-in -- add them to existing elements where
      you want an exact match to the booking platform's look.
   ============================================================================ */

/* ---- Fonts (self-hosted -- see fonts/ next to this file) ------------------ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-800-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/playfair-display-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/playfair-display-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/playfair-display-600-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/playfair-display-600-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand core */
  --cleany-navy: #0a192f;        /* headings, top bars, borders on dark cards */
  --cleany-blue: #1e50a2;        /* primary accent -- links, buttons, active states */
  --cleany-blue-dark: #173e7f;   /* gradient partner for --cleany-blue */
  --cleany-blue-soft: #e0ecfb;   /* pale blue tint -- badges, icon backgrounds */
  --cleany-blue-soft-2: #c4ddf8; /* gradient partner for --cleany-blue-soft */
  --cleany-blue-pale-text: #93c5fd; /* blue accent readable on dark navy backgrounds */

  /* Secondary flow accents (dropoff / laundry -- from the driver app) */
  --cleany-green: #2f9e5e;
  --cleany-green-dark: #1f7a46;
  --cleany-amber: #d98a2b;
  --cleany-amber-dark: #b06a17;

  /* Neutrals */
  --cleany-bg: #f4f6f9;          /* page background */
  --cleany-bg-panel: #e9edf2;    /* slightly cooler alt background (admin-style panels) */
  --cleany-border: #e2e8f0;
  --cleany-text: #1e293b;        /* body copy */
  --cleany-text-muted: #64748b;  /* secondary copy, captions */
  --cleany-text-faint: #94a3b8;  /* placeholders, least-important labels */
  --cleany-dark-panel: #11223d;  /* dark navy section background (CTA/"why us" blocks) */
  --cleany-dark-panel-border: #1e3a5f;

  /* Status colors */
  --cleany-success-bg: #dff0d8;
  --cleany-success-text: #3c763d;
  --cleany-success-border: #d6e9c6;
  --cleany-error-bg: #f2dede;
  --cleany-error-text: #a94442;
  --cleany-error-border: #ebccd1;
  --cleany-warning-bg: #fdf3d8;
  --cleany-warning-text: #8a6d1d;
  --cleany-warning-border: #f2e2ab;

  /* Type */
  --cleany-font-body: 'Plus Jakarta Sans', Arial, sans-serif;
  --cleany-font-accent: 'Playfair Display', Georgia, serif; /* italic-only accent face, used for emphasized words inside headings */

  /* Shape */
  --cleany-radius-sm: 10px;
  --cleany-radius-md: 16px;
  --cleany-radius-lg: 24px;
  --cleany-radius-pill: 9999px;

  /* Shadows */
  --cleany-shadow-card: 0px 1px 2px rgba(0,0,0,0.05), 0px 8px 16px -4px rgba(27,46,94,0.08);
}

/* ---- Base elements ------------------------------------------------------- */
body {
  font-family: var(--cleany-font-body);
  background: var(--cleany-bg);
  color: var(--cleany-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cleany-font-body);
  font-weight: 800;
  color: var(--cleany-navy);
  letter-spacing: -0.02em;
}

/* Emphasized word inside a heading, e.g. <h1>Wäsche, <em>neu gedacht</em></h1> --
   matches the italic Playfair Display accent used in the booking platform's hero. */
h1 em, h2 em, .cleany-accent {
  font-family: var(--cleany-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--cleany-blue);
}

a {
  color: var(--cleany-blue);
}
a:hover {
  color: var(--cleany-navy);
}

/* ---- Buttons -------------------------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--cleany-radius-pill);
  background: linear-gradient(135deg, var(--cleany-blue) 0%, var(--cleany-blue-dark) 100%);
  color: white;
  font-family: var(--cleany-font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--cleany-border);
  border-radius: var(--cleany-radius-pill);
  background: white;
  color: var(--cleany-text);
  font-family: var(--cleany-font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px 1px 0px rgba(255,255,255,0.6);
  transition: background 0.15s, transform 0.15s;
}
.btn-outline:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

.btn-text {
  background: none;
  border: none;
  padding: 8px 4px;
  color: var(--cleany-text-muted);
  text-decoration: underline;
  font-family: var(--cleany-font-body);
  cursor: pointer;
}
.btn-text:hover {
  color: var(--cleany-navy);
}

/* ---- Badges & labels ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--cleany-radius-pill);
  border: 1px solid var(--cleany-border);
  background: white;
  color: var(--cleany-text-muted);
  font-size: 14px;
  font-family: var(--cleany-font-body);
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cleany-blue);
  display: inline-block;
  flex-shrink: 0;
}

.section-label {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 12px;
  font-family: var(--cleany-font-body);
  margin-bottom: 24px;
  color: var(--cleany-blue);
}
/* Use this variant when the label sits on a dark/navy background */
.section-label-on-dark {
  color: var(--cleany-blue-pale-text);
}

/* ---- Cards ----------------------------------------------------------------- */
.card {
  background: white;
  border: 1px solid var(--cleany-border);
  border-radius: var(--cleany-radius-lg);
  padding: 24px;
  box-shadow: var(--cleany-shadow-card);
}

.card-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cleany-blue-soft) 0%, var(--cleany-blue-soft-2) 100%);
  box-shadow: inset 0px 1px 1px rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cleany-blue);
  flex-shrink: 0;
}

/* Dark navy section (used for "why us" / CTA blocks) */
.section-dark {
  background: var(--cleany-dark-panel);
  color: var(--cleany-blue-pale-text);
}
.section-dark h1, .section-dark h2, .section-dark h3 {
  color: white;
}
.section-dark .card, .section-dark .step-card {
  background: var(--cleany-dark-panel);
  border: 1px solid var(--cleany-dark-panel-border);
  color: var(--cleany-text-faint);
}

/* ---- Status messages ------------------------------------------------------- */
.message-ok {
  background: var(--cleany-success-bg);
  color: var(--cleany-success-text);
  border: 1px solid var(--cleany-success-border);
  border-radius: var(--cleany-radius-md);
  padding: 12px 16px;
}
.message-err {
  background: var(--cleany-error-bg);
  color: var(--cleany-error-text);
  border: 1px solid var(--cleany-error-border);
  border-radius: var(--cleany-radius-md);
  padding: 12px 16px;
}
.message-notice {
  background: var(--cleany-warning-bg);
  color: var(--cleany-warning-text);
  border: 1px solid var(--cleany-warning-border);
  border-radius: var(--cleany-radius-md);
  padding: 12px 16px;
}