/*
  Theme CSS for Kurino - Calm, harmonious, and modern
  UI text: German only (kept in HTML/JS)
  Code comments: English only (this file)

  This stylesheet provides a gentle color palette, refined typography,
  and component-level polishing that overrides legacy scattered fixes.
  It is designed to be appended last so it safely overrides previous rules.
*/

:root {
  /* Color palette (calm blues/greens) */
  --primary-color: #446B8A;      /* main brand accent */
  --secondary-color: #7AA5C2;    /* supporting accent */
  --accent-color: #A3D1C6;       /* subtle highlight */
  --bg-color: #F6F9FB;           /* page background */
  --surface-color: #FFFFFF;      /* cards, sections */
  --text-color: #1F2D3D;         /* primary text */
  --muted-text: #5B6B7A;         /* secondary text */
  --border-color: #DFE7EE;       /* soft borders */
  --shadow-color: 27, 39, 51;    /* for shadows rgba() */

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --h1-size: clamp(28px, 3.5vw, 42px);
  --h2-size: clamp(22px, 2.8vw, 32px);
  --h3-size: clamp(18px, 2.2vw, 24px);
  --body-size: 16px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
}

/* Global base */
html, body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Header */
.header {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(var(--shadow-color), 0.04);
}

.nav__logo-text {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.nav__link {
  color: var(--text-color);
}

.nav__link:hover,
.nav__link:focus {
  color: var(--primary-color);
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(180deg, #F9FBFD 0%, #F4F8FB 100%);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ECF4FA;
  color: var(--primary-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(var(--shadow-color), 0.05);
}

.hero__title {
  color: var(--text-color);
}

.hero__title-highlight {
  color: var(--primary-color);
}

.hero__subtitle {
  color: var(--muted-text);
}

.hero__button {
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(68, 107, 138, 0.15);
}

.hero__button--primary {
  background: var(--primary-color);
  color: #fff;
}

.hero__button--primary:hover { filter: brightness(0.96); }

.hero__button--secondary {
  background: #ECF4FA;
  color: var(--primary-color);
}

/* Sections */
.section__title {
  color: var(--text-color);
  font-size: var(--h2-size);
}

.section__subtitle {
  color: var(--muted-text);
}

/* Cards, surfaces */
.features .features__container .card,
.hours .feature__card,
.footer .footer__container {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Cities section enhancements */
.cities__search-input {
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 10px;
}

.cities__pills-grid .pill {
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: #fff;
}

/* Hours section */
.hours__container {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(var(--shadow-color), 0.05);
}

.status__dot--active {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

/* Contact form */
.contact__form-input,
.contact__form-textarea {
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-color);
  border-radius: 10px;
}

.contact__form-button {
  background: var(--primary-color);
  color: #fff;
  border-radius: 12px;
}

/* Footer */
/* Default footer styles are defined below for light and dark modes explicitly. */
/* Hover color remains accent across themes. */
.footer__link:hover { color: var(--accent-color); }

/* Utility */
.shadow-soft { box-shadow: 0 10px 24px rgba(var(--shadow-color), 0.08); }
.border-soft { border: 1px solid var(--border-color); border-radius: 12px; }

/* Global unified page background + LIGHT theme defaults */
/* Hint browsers that both color schemes are supported */
:root {
  color-scheme: light dark;
  --page-bg: #F5FAFD;
  /* Light theme defaults to make non-header sections respond to theme */
  --bg-color: #FFFFFF;
  --surface-color: #FFFFFF;
  --text-color: #0F1C28;
  --muted-text: #4A6A80;
  --border-color: #E3EDF5;
  --shadow-color: 16, 42, 67;
}
html, body { background: var(--page-bg); }
html, body { overflow-x: hidden; }
/* Make all major sections inherit unified background */
section, .hero, .features, .hours, .cities, .about, .contact, .cta, .services, .pricing {
  background: transparent !important;
  box-shadow: none;
}

/* Global text colors bound to theme variables */
body { color: var(--text-color); }
h1, h2, h3, h4, h5, h6,
.section__title { color: var(--text-color); }
.section__subtitle, .muted, .text--muted { color: var(--muted-text); }

/* Common cards draw from surface/border vars by default */
.card, .panel, .box, .feature__card, .cities__map-card, .cities__list-card,
.hours__container, .footer .footer__container, .border-soft { 
  background: var(--surface-color);
  border-color: var(--border-color);
}

/* Hours heading: force black in light mode */
.hours .section__title { color: #000000; text-shadow: none; }

/* Footer default (light mode) — flat style (no inner box) */
.footer { background: #F5FAFD; color: var(--text-color); }
.footer .footer__container,
.footer .border-soft { background: transparent; border-color: transparent; box-shadow: none; }
.footer p, .footer li, .footer small { color: #456175; }
.footer__link { color: #2F5E7A; }
.footer__link:hover { color: var(--accent-color); }

@media (prefers-color-scheme: light) {
  .footer { background: #F5FAFD; color: var(--text-color); }
  .footer .footer__container,
  .footer .border-soft { background: transparent; border-color: transparent; box-shadow: none; }
  .footer p, .footer li, .footer small { color: #456175; }
  .footer__link { color: #2F5E7A; }
}

/* Explicit light theme override via data attribute (mobile/manual toggle) */
html[data-theme="light"] {
  --bg-color: #FFFFFF;
  --surface-color: #FFFFFF;
  --text-color: #0F1C28;
  --muted-text: #4A6A80;
  --border-color: #E3EDF5;
  --shadow-color: 16, 42, 67;
  --page-bg: #F5FAFD;
}
html[data-theme="light"] body { background: var(--page-bg); }
html[data-theme="light"] .header { background: #FFFFFF; border-bottom-color: #E3EDF5; }
html[data-theme="light"] .nav__link, html[data-theme="light"] .nav__logo-text { color: var(--text-color); }
html[data-theme="light"] .hero { background: transparent; }
html[data-theme="light"] .section__subtitle { color: #5C7E94; }
html[data-theme="light"] .footer { background: #F5FAFD; color: var(--text-color); }
html[data-theme="light"] .footer .footer__container, html[data-theme="light"] .footer .border-soft { background: transparent; border-color: transparent; box-shadow: none; }
html[data-theme="light"] .footer p, html[data-theme="light"] .footer li, html[data-theme="light"] .footer small { color: #456175; }
html[data-theme="light"] .footer__link { color: #2F5E7A; }

/* mobile-specific overrides are now in /css/mobile.css */

/*
  Dark mode tuning
  - Fix logo/text visibility
  - Improve feature descriptions contrast
  - Correct footer colors and surfaces
  Works with OS dark mode and common custom togglers (class 'dark' or data-theme="dark").
*/
@media (prefers-color-scheme: dark) {
  :root { --page-bg: #0F1C28; }
  :root {
    --bg-color: #0F1C28;
    --surface-color: #152635;
    --text-color: #EAF1F7;
    --muted-text: #B7C6D3;
    --border-color: #1F3344;
    --shadow-color: 3, 12, 20;
  }
  .header { background: var(--surface-color); border-bottom-color: var(--border-color); }
  .nav__link { color: var(--text-color); }
  .nav__logo-text { color: var(--text-color); }
  .nav__logo-icon { color: var(--accent-color); }

  .hero { background: transparent; }
  .hero__badge { background: rgba(255,255,255,0.06); border-color: var(--border-color); color: var(--accent-color); }
  .hero__subtitle { color: var(--muted-text); }
  /* Hours heading in dark mode stays light */
  .hours .section__title { color: #EAF1F7; }

  /* Cards and features */
  .features .features__container .card,
  .hours .feature__card { background: #0F1C28; border-color: #1F3344; box-shadow: 0 12px 30px rgba(3,12,20,0.35) inset, 0 8px 24px rgba(3,12,20,0.25); }
  .features .card h3, .features h3 { color: #EAF1F7; }
  .features p,
  .features .card p,
  .features .card .card__desc { color: #FFFFFF; }
  .section__subtitle { color: var(--muted-text); }

  /* Cities/search surfaces */
  .cities__search-input { background: #0F1C28; color: var(--text-color); border-color: var(--border-color); }

  /* Footer (flat in dark, remove inner box) */
  .footer { background: #0B1620; color: #EAF1F7; }
  .footer .footer__container,
  .footer .border-soft { background: transparent; border-color: transparent; box-shadow: none; }
  .footer p, .footer li, .footer small { color: #D9E5EE; }
  .footer__link { color: #D9E5EE; }
  .footer__link:hover { color: var(--accent-color); }

  /* Footer social icons visibility (light and dark) */
  .footer .social a, .footer .footer__social a, .footer .social__link { 
    background: transparent; border: 1px solid transparent; box-shadow: none; color: #2F5E7A; opacity: 1; 
  }
  .footer .social a i, .footer .footer__social a i, .footer .social__link i { color: #2F5E7A; }

  .footer .social a, .footer .footer__social a, .footer .social__link { color: #EAF1F7; }
  .footer .social a i, .footer .footer__social a i, .footer .social__link i { color: #EAF1F7; }

  /* Arbeitszeiten section tuning in dark */
  .hours__container { background: #0F1C28; border-color: #1F3344; }
  .hours__container .hours__header h3,
  .hours__container h3 { color: #EAF1F7; }
  .hours__container .hours__day { background: #122535; border-color: #1F3344; }
  .hours__container .hours__day--closed { background: #2b1f22; border-color: #4a2c33; }
  .status__dot--active { background: linear-gradient(135deg, #4cd97b, #2ecc71); box-shadow: 0 0 0 6px rgba(46,204,113,.18); }
  .status__dot--inactive { background: #e74c3c; box-shadow: 0 0 0 6px rgba(231,76,60,.15); }
}

/* Support custom togglers across mobile/desktop */
html.dark, body.dark,
html.dark-mode, body.dark-mode,
html.theme-dark, body.theme-dark,
[data-theme="dark"] {
  --bg-color: #0F1C28;
  --surface-color: #152635;
  --text-color: #EAF1F7;
  --muted-text: #B7C6D3;
  --border-color: #1F3344;
  --shadow-color: 3, 12, 20;
  --page-bg: #0F1C28;
}
html.dark .header, body.dark .header,
html.dark-mode .header, body.dark-mode .header,
html.theme-dark .header, body.theme-dark .header,
[data-theme="dark"] .header { background: var(--surface-color); border-bottom-color: var(--border-color); }
html.dark .nav__link, body.dark .nav__link,
html.dark-mode .nav__link, body.dark-mode .nav__link,
html.theme-dark .nav__link, body.theme-dark .nav__link,
[data-theme="dark"] .nav__link { color: var(--text-color); }
html.dark .nav__logo-text, body.dark .nav__logo-text,
html.dark-mode .nav__logo-text, body.dark-mode .nav__logo-text,
html.theme-dark .nav__logo-text, body.theme-dark .nav__logo-text,
[data-theme="dark"] .nav__logo-text { color: var(--text-color); }
html.dark .nav__logo-icon, body.dark .nav__logo-icon,
html.dark-mode .nav__logo-icon, body.dark-mode .nav__logo-icon,
html.theme-dark .nav__logo-icon, body.theme-dark .nav__logo-icon,
[data-theme="dark"] .nav__logo-icon { color: var(--accent-color); }
html.dark .hero, body.dark .hero,
html.dark-mode .hero, body.dark-mode .hero,
html.theme-dark .hero, body.theme-dark .hero,
[data-theme="dark"] .hero { background: transparent; }
html.dark .hero__badge, body.dark .hero__badge,
html.dark-mode .hero__badge, body.dark-mode .hero__badge,
html.theme-dark .hero__badge, body.theme-dark .hero__badge,
[data-theme="dark"] .hero__badge { background: rgba(255,255,255,0.06); border-color: var(--border-color); color: var(--accent-color); }
html.dark .hero__subtitle, body.dark .hero__subtitle,
html.dark-mode .hero__subtitle, body.dark-mode .hero__subtitle,
html.theme-dark .hero__subtitle, body.theme-dark .hero__subtitle,
[data-theme="dark"] .hero__subtitle { color: var(--muted-text); }
/* Hours heading in custom dark toggles */
html.dark .hours .section__title, body.dark .hours .section__title, [data-theme="dark"] .hours .section__title { color: #EAF1F7; }
html.dark .features .features__container .card, body.dark .features .features__container .card,
html.dark-mode .features .features__container .card, body.dark-mode .features .features__container .card,
html.theme-dark .features .features__container .card, body.theme-dark .features .features__container .card,
[data-theme="dark"] .features .features__container .card { background: #0F1C28; border-color: #1F3344; box-shadow: 0 12px 30px rgba(3,12,20,0.35) inset, 0 8px 24px rgba(3,12,20,0.25); }
html.dark .features .card h3, body.dark .features .card h3,
html.dark-mode .features .card h3, body.dark-mode .features .card h3,
html.theme-dark .features .card h3, body.theme-dark .features .card h3,
[data-theme="dark"] .features .card h3 { color: #EAF1F7; }
html.dark .features p, body.dark .features p,
html.dark-mode .features p, body.dark-mode .features p,
html.theme-dark .features p, body.theme-dark .features p,
[data-theme="dark"] .features p,
html.dark .features .card p, body.dark .features .card p,
html.dark-mode .features .card p, body.dark-mode .features .card p,
html.theme-dark .features .card p, body.theme-dark .features .card p,
[data-theme="dark"] .features .card p,
html.dark .features .card .card__desc, body.dark .features .card .card__desc,
html.dark-mode .features .card .card__desc, body.dark-mode .features .card .card__desc,
html.theme-dark .features .card .card__desc, body.theme-dark .features .card .card__desc,
[data-theme="dark"] .features .card .card__desc { color: #FFFFFF; }
html.dark .section__subtitle, body.dark .section__subtitle,
html.dark-mode .section__subtitle, body.dark-mode .section__subtitle,
html.theme-dark .section__subtitle, body.theme-dark .section__subtitle,
[data-theme="dark"] .section__subtitle { color: var(--muted-text); }
html.dark .footer, body.dark .footer,
html.dark-mode .footer, body.dark-mode .footer,
html.theme-dark .footer, body.theme-dark .footer,
[data-theme="dark"] .footer { background: #0B1620; color: #EAF1F7; }
html.dark .footer .footer__container, body.dark .footer .footer__container,
html.dark-mode .footer .footer__container, body.dark-mode .footer .footer__container,
html.theme-dark .footer .footer__container, body.theme-dark .footer .footer__container,
[data-theme="dark"] .footer .footer__container { background: transparent; border-color: transparent; box-shadow: none; }
html.dark .footer p, body.dark .footer p, [data-theme="dark"] .footer p,
html.dark .footer li, body.dark .footer li, [data-theme="dark"] .footer li,
html.dark .footer small, body.dark .footer small, [data-theme="dark"] .footer small { color: #D9E5EE; }
html.dark .footer__link, body.dark .footer__link,
html.dark-mode .footer__link, body.dark-mode .footer__link,
html.theme-dark .footer__link, body.theme-dark .footer__link,
[data-theme="dark"] .footer__link { color: #D9E5EE; }
html.dark .footer__link:hover, body.dark .footer__link:hover,
html.dark-mode .footer__link:hover, body.dark-mode .footer__link:hover,
html.theme-dark .footer__link:hover, body.theme-dark .footer__link:hover,
[data-theme="dark"] .footer__link:hover { color: var(--accent-color); }

/* Force LIGHT theme when html[data-theme="light"] is present (overrides any OS dark rules) */
html[data-theme="light"] {
  --page-bg: #F5FAFD;
  --bg-color: #FFFFFF;
  --surface-color: #FFFFFF;
  --text-color: #0F1C28;
  --muted-text: #4A6A80;
  --border-color: #E3EDF5;
  --shadow-color: 16, 42, 67;
}
html[data-theme="light"] html, html[data-theme="light"] body { background: var(--page-bg); }
html[data-theme="light"] .header { background: #FFFFFF; border-bottom-color: #E3EDF5; }
html[data-theme="light"] .nav__link, html[data-theme="light"] .nav__logo-text { color: var(--text-color); }
html[data-theme="light"] .hero { background: transparent; }
html[data-theme="light"] .hero__subtitle, html[data-theme="light"] .section__subtitle { color: var(--muted-text); }
html[data-theme="light"] .features .features__container .card,
html[data-theme="light"] .card, html[data-theme="light"] .panel, html[data-theme="light"] .box { background: var(--surface-color); border-color: var(--border-color); }
html[data-theme="light"] .features .card h3 { color: var(--text-color); }
html[data-theme="light"] .features .card p, html[data-theme="light"] .features .card .card__desc { color: var(--muted-text); }
html[data-theme="light"] .hours__container { background: var(--surface-color); border-color: var(--border-color); }
html[data-theme="light"] .hours__container h3, html[data-theme="light"] .hours__container .hours__header h3 { color: var(--text-color); }
html[data-theme="light"] .cities__map-card, html[data-theme="light"] .cities__list-card { background: var(--surface-color); border-color: var(--border-color); }
html[data-theme="light"] .footer { background: #F5FAFD; color: var(--text-color); }
html[data-theme="light"] .footer .footer__container, html[data-theme="light"] .footer .border-soft { background: transparent; border-color: transparent; box-shadow: none; }
html[data-theme="light"] .footer p, html[data-theme="light"] .footer li, html[data-theme="light"] .footer small { color: #456175; }
html[data-theme="light"] .footer__link { color: #2F5E7A; }

/* Footer social icons visibility (light) */
.footer .social a, .footer .footer__social a, .footer .social__link { 
  background: transparent; border: 1px solid transparent; box-shadow: none; color: #2F5E7A; opacity: 1; 
}
.footer .social a i, .footer .footer__social a i, .footer .social__link i { color: #2F5E7A; }

/* Footer social icons (dark) */
@media (prefers-color-scheme: dark) {
  .footer .social a, .footer .footer__social a, .footer .social__link { color: #EAF1F7; }
  .footer .social a i, .footer .footer__social a i, .footer .social__link i { color: #EAF1F7; }
}
html.dark .footer .social a, body.dark .footer .social a, [data-theme="dark"] .footer .social a,
html.dark .footer .footer__social a, body.dark .footer .footer__social a, [data-theme="dark"] .footer .footer__social a,
html.dark .footer .social__link, body.dark .footer .social__link, [data-theme="dark"] .footer .social__link { color: #EAF1F7; }
html.dark .footer .social a i, body.dark .footer .social a i, [data-theme="dark"] .footer .social a i,
html.dark .footer .footer__social a i, body.dark .footer .footer__social a i, [data-theme="dark"] .footer .footer__social a i,
html.dark .footer .social__link i, body.dark .footer .social__link i, [data-theme="dark"] .footer .social__link i { color: #EAF1F7; }

/* Arbeitszeiten dark for custom togglers */
html.dark .hours__container, body.dark .hours__container, [data-theme="dark"] .hours__container { background: #0F1C28; border-color: #1F3344; }
html.dark .hours__container .hours__header h3, body.dark .hours__container .hours__header h3, [data-theme="dark"] .hours__container .hours__header h3,
html.dark .hours__container h3, body.dark .hours__container h3, [data-theme="dark"] .hours__container h3 { color: #EAF1F7; }
html.dark .hours__container .hours__day, body.dark .hours__container .hours__day, [data-theme="dark"] .hours__container .hours__day { background: #122535; border-color: #1F3344; }
html.dark .hours__container .hours__day--closed, body.dark .hours__container .hours__day--closed, [data-theme="dark"] .hours__container .hours__day--closed { background: #2b1f22; border-color: #4a2c33; }
html.dark .status__dot--active, body.dark .status__dot--active, [data-theme="dark"] .status__dot--active { background: linear-gradient(135deg, #4cd97b, #2ecc71); box-shadow: 0 0 0 6px rgba(46,204,113,.18); }
html.dark .status__dot--inactive, body.dark .status__dot--inactive, [data-theme="dark"] .status__dot--inactive { background: #e74c3c; box-shadow: 0 0 0 6px rgba(231,76,60,.15); }

/* Contact placeholder color in dark */
@media (prefers-color-scheme: dark) {
  ::placeholder { color: #AFC2D0; opacity: 1; }
  .contact__form-input::placeholder { color: #AFC2D0; }
  /* Force Nachricht (textarea) placeholder to BLACK in dark; broaden selectors for robustness */
  .contact__form-textarea::placeholder,
  .contact__form textarea::placeholder,
  .contact textarea::placeholder,
  textarea#nachricht::placeholder,
  textarea[name="nachricht"]::placeholder,
  textarea[name="message"]::placeholder,
  textarea::placeholder { color: #000000 !important; }
  /* Vendor pseudo-elements for cross-browser */
  .contact__form-textarea::-webkit-input-placeholder { color: #000000 !important; }
  .contact__form-textarea::-moz-placeholder { color: #000000 !important; }
  .contact__form-textarea:-ms-input-placeholder { color: #000000 !important; }
  .contact__form-textarea::-ms-input-placeholder { color: #000000 !important; }
  /* Ensure actual textarea text (not placeholder) is BLACK in dark */
  .contact__form-textarea,
  .contact__form textarea,
  .contact textarea,
  textarea#nachricht,
  textarea[name="nachricht"],
  textarea[name="message"],
  textarea { color: #000000 !important; background: #FFFFFF; }
}
html.dark ::placeholder, body.dark ::placeholder, [data-theme="dark"] ::placeholder { color: #AFC2D0; opacity: 1; }
html.dark .contact__form-input::placeholder, body.dark .contact__form-input::placeholder, [data-theme="dark"] .contact__form-input::placeholder { color: #AFC2D0; }
/* Force Nachricht (textarea) placeholder to BLACK in dark for custom togglers */
html.dark .contact__form-textarea::placeholder, body.dark .contact__form-textarea::placeholder, [data-theme="dark"] .contact__form-textarea::placeholder,
html.dark .contact__form textarea::placeholder, body.dark .contact__form textarea::placeholder, [data-theme="dark"] .contact__form textarea::placeholder,
html.dark .contact textarea::placeholder, body.dark .contact textarea::placeholder, [data-theme="dark"] .contact textarea::placeholder,
html.dark textarea#nachricht::placeholder, body.dark textarea#nachricht::placeholder, [data-theme="dark"] textarea#nachricht::placeholder,
html.dark textarea[name="nachricht"]::placeholder, body.dark textarea[name="nachricht"]::placeholder, [data-theme="dark"] textarea[name="nachricht"]::placeholder,
html.dark textarea[name="message"]::placeholder, body.dark textarea[name="message"]::placeholder, [data-theme="dark"] textarea[name="message"]::placeholder,
html.dark textarea::placeholder, body.dark textarea::placeholder, [data-theme="dark"] textarea::placeholder { color: #000000 !important; }
/* Vendor pseudo-elements for cross-browser */
html.dark .contact__form-textarea::-webkit-input-placeholder, body.dark .contact__form-textarea::-webkit-input-placeholder, [data-theme="dark"] .contact__form-textarea::-webkit-input-placeholder { color: #000000 !important; }
html.dark .contact__form-textarea::-moz-placeholder, body.dark .contact__form-textarea::-moz-placeholder, [data-theme="dark"] .contact__form-textarea::-moz-placeholder { color: #000000 !important; }
html.dark .contact__form-textarea:-ms-input-placeholder, body.dark .contact__form-textarea:-ms-input-placeholder, [data-theme="dark"] .contact__form-textarea:-ms-input-placeholder { color: #000000 !important; }
html.dark .contact__form-textarea::-ms-input-placeholder, body.dark .contact__form-textarea::-ms-input-placeholder, [data-theme="dark"] .contact__form-textarea::-ms-input-placeholder { color: #000000 !important; }

/* Ensure actual textarea text (not placeholder) is BLACK in dark for custom togglers */
html.dark .contact__form-textarea, body.dark .contact__form-textarea, [data-theme="dark"] .contact__form-textarea,
html.dark .contact__form textarea, body.dark .contact__form textarea, [data-theme="dark"] .contact__form textarea,
html.dark .contact textarea, body.dark .contact textarea, [data-theme="dark"] .contact textarea,
html.dark textarea#nachricht, body.dark textarea#nachricht, [data-theme="dark"] textarea#nachricht,
html.dark textarea[name="nachricht"], body.dark textarea[name="nachricht"], [data-theme="dark"] textarea[name="nachricht"],
html.dark textarea[name="message"], body.dark textarea[name="message"], [data-theme="dark"] textarea[name="message"],
html.dark textarea, body.dark textarea, [data-theme="dark"] textarea { color: #000000 !important; background: #FFFFFF; }

/*
  New Hero Visual v2: Horizontal Delivery Track (no circles)
  - Curved road path with animated truck
  - Semantic checkpoints with subtle chip labels
  - Calmer motion and cleaner composition
*/
.delivery-track {
  position: relative;
  width: min(640px, 95vw);
  height: 240px;
  margin-inline: auto;
}

.road-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.checkpoint { position: absolute; display: inline-flex; align-items: center; gap: 8px; }
.checkpoint i { color: var(--primary-color); background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; box-shadow: 0 8px 18px rgba(var(--shadow-color), 0.06); }
.checkpoint .chip { background: #fff; border: 1px solid var(--border-color); color: var(--muted-text); border-radius: 999px; padding: 4px 10px; font-size: 12px; }

/* place checkpoints along the bezier visually */
.checkpoint--start { left: 12px; top: 150px; }
.checkpoint--middle { left: 46%; top: 110px; transform: translateX(-50%); }
.checkpoint--end { right: 12px; top: 152px; }

.truck {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--primary-color);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(68, 107, 138, 0.22);
  offset-path: path('M20,160 C180,120 320,120 580,160');
  offset-distance: 0%;
  animation: drive 10s ease-in-out infinite;
}

.truck i { font-size: 18px; }

@keyframes drive {
  0%   { offset-distance: 0%;   transform: translate(-50%, -50%) rotate(-6deg); }
  50%  { offset-distance: 50%;  transform: translate(-50%, -50%) rotate(0deg); }
  100% { offset-distance: 100%; transform: translate(-50%, -50%) rotate(6deg); }
}

/*
  Hero Visual Grid: Illustration (left) + Mini Map (right)
*/
.hero-visual-grid {
  display: grid;
  grid-template-columns: 1fr; /* single element inside, aligned to end */
  gap: 28px;
  align-items: center;
  justify-items: end;
}

/* moved tablet/mobile responsive rules to mobile.css */

.illustration-card,
.map-card {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px rgba(var(--shadow-color), 0.06);
  padding: 14px;
}

/* 3D neo look for the illustration card */
.neo-3d {
  border-radius: 20px;
  box-shadow:
    0 18px 40px rgba(var(--shadow-color), 0.12),
    0 4px 10px rgba(var(--shadow-color), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.courier-illustration { width: min(900px, 96vw); height: auto; display: block; }

.courier-illustration { width: 100%; height: auto; display: block; }

/* Photorealistic image card styles */
.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    0 22px 48px rgba(var(--shadow-color), 0.14),
    0 6px 14px rgba(var(--shadow-color), 0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
  width: clamp(420px, 40vw, 760px);
  max-width: 100%;
}

.photo-courier {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}

.brand-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px rgba(var(--shadow-color), 0.08);
}

.brand-tag i { color: var(--primary-color); }
.brand-tag span { font-weight: 600; }

.map-header {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-color);
  font-weight: 600;
  padding: 6px 8px 10px;
}

.mini-map {
  position: relative;
  height: 220px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: linear-gradient(180deg, #F5FAFD 0%, #EEF6FA 100%);
  overflow: hidden;
}

/* Simple abstract map shapes */
.mini-map::before,
.mini-map::after {
  content: "";
  position: absolute;
  border-radius: 20px;
  background: rgba(122, 165, 194, 0.12);
}
.mini-map::before { width: 160px; height: 60px; left: 18px; top: 28px; transform: rotate(-6deg); }
.mini-map::after  { width: 200px; height: 70px; right: 16px; bottom: 24px; transform: rotate(7deg); }

/* legacy pin style (kept for reference if needed elsewhere) */
.map-pin {
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #2ecc71; /* fast by default */
  box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.15), 0 10px 18px rgba(var(--shadow-color), 0.08);
  cursor: pointer;
}

.map-pin::after {
  /* tooltip using data-tip attribute */
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  background: #0F1C28;
  color: #EAF1F7;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.map-pin:hover::after { opacity: 1; transform: translateX(-50%) translateY(-2px); }

/* modern svg pins are inside .mini-map-svg; keep positions only if we fallback */
.pin--1 { left: 20%; top: 38%; }
.pin--2 { left: 46%; top: 26%; background: #f59e0b; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15), 0 10px 18px rgba(var(--shadow-color), 0.08); }
.pin--3 { left: 63%; top: 56%; }
.pin--4 { left: 78%; top: 42%; background: #f59e0b; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.15), 0 10px 18px rgba(var(--shadow-color), 0.08); }
.pin--5 { left: 36%; top: 70%; }

/* truck icon moving along the mini map path */
.truck-mini {
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: #fff; background: var(--primary-color);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(68, 107, 138, 0.18);
  offset-path: path('M20 150 C100 80 200 80 280 150');
  offset-distance: 0%;
  animation: driveMini 8s ease-in-out infinite;
}
.truck-mini i { font-size: 16px; }

@keyframes driveMini {
  0%   { offset-distance: 0%;   transform: translate(-50%, -50%) rotate(-8deg); }
  50%  { offset-distance: 50%;  transform: translate(-50%, -50%) rotate(0deg); }
  100% { offset-distance: 100%; transform: translate(-50%, -50%) rotate(8deg); }
}

/* SVG pin colors */
.mini-map-svg .pin.pin--fast { fill: #2ecc71; filter: drop-shadow(0 0 6px rgba(46,204,113,0.25)); }
.mini-map-svg .pin.pin--normal { fill: #f59e0b; filter: drop-shadow(0 0 6px rgba(245,158,11,0.25)); }

.map-legend {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted-text);
  font-size: 13px;
  padding: 10px 6px 6px;
}

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot--fast { background: #2ecc71; box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.15); }
.dot--normal { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }

/* Subtle motion for modern look */
.anim-float { animation: floatY 3.8s ease-in-out infinite; }
.anim-sway  { animation: swayX 4.6s ease-in-out infinite; }
.blink-light { animation: blink 1.8s ease-in-out infinite; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes swayX {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%      { transform: translateX(3px) rotate(0.3deg); }
}

@keyframes blink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}