/* ==========================================================================
   Gartenpflege und Hausreinigung-Azero – site styles

   This file is a 1:1 translation of the inline styles of the original design
   (Claude Design export). All values (colors, sizes, spacing) are unchanged.
   NOTE: there is intentionally NO global "box-sizing: border-box" reset,
   because the original design relies on the browser default (content-box).

   Sections in this file:
     1. Colors (variables) and base
     2. Header + navigation
     3. Hero
     4. Sections (Leistungen, Warum Azero, Galerie, Bewertungen, So arbeiten wir)
     5. Kontakt (info, map, form)
     6. Footer + sticky call button
     7. Legal pages (Impressum / Datenschutz)
   ========================================================================== */

/* ---- 1. Colors and base ------------------------------------------------- */
:root {
  --bg: #faf7ef;
  --text: #233020;
  --green-dark: #1e3822;
  --green: #2f5233;
  --green-light: #4a7c53;
  --sage: #eef3e4;
  --sage-border: #cfe0bb;
  --line: #e4ddc9;
  --card-line: #eae3cd;
  --input-line: #d8d0b8;
  --body-text: #3f4a38;
  --muted: #5a6350;
  --gold: #c99b1f;
  --whatsapp: #3fae4b;
  --footer-bg: #16281c;
  --footer-text: #cfd8c6;
  --footer-muted: #8fa085;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* :where() keeps the specificity at zero, so any class below wins over these. */
:where(a) { color: #2f5233; }
:where(a:hover) { color: #1e3822; }

/* Keep anchor jumps from hiding headings behind the sticky header. */
section[id] { scroll-margin-top: 72px; }

/* Neutral placeholder for photos that have not been uploaded yet.
   The small icon is centred at its natural size on a soft grey tile. */
img.is-placeholder {
  object-fit: none;
  object-position: center;
  background: rgba(127, 127, 127, 0.08);
}
img.photo { object-fit: cover; }

/* Visually hidden but still available to screen readers (used for the honeypot). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- 2. Header + navigation -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #faf7efee;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e4ddc9;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 20px;
  color: #1e3822;
  white-space: nowrap;
}
.logo-mark { width: 44px; height: 44px; flex: none; display: block; }
.logo-text span { color: #4a7c53; }

.nav-desktop {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.nav-desktop a, .nav-mobile a { text-decoration: none; color: #233020; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d8d0b8;
  background: #fff;
  cursor: pointer;
}
.menu-toggle .bars { display: flex; flex-direction: column; gap: 4px; }
.menu-toggle .bars span { width: 18px; height: 2px; background: #1e3822; display: block; }

.nav-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #faf7ef;
  border-bottom: 1px solid #e4ddc9;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
}
.nav-mobile[hidden] { display: none; }

@media (max-width: 859px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
}
@media (min-width: 860px) {
  .nav-mobile { display: none; }
}
/* Fix for small phones (the only deliberate deviation from the original design):
   the one-line logo was 351px wide and pushed the menu button off the screen (and made the
   page scroll sideways) on phones narrower than about 455px. Now the logo may wrap. */
@media (max-width: 480px) {
  .logo { white-space: normal; line-height: 1.2; gap: 8px; }
  .menu-toggle { flex-shrink: 0; }
}
@media (max-width: 360px) {
  .logo { font-size: 17px; }
}

/* ---- 3. Hero ------------------------------------------------------------ */
.hero {
  padding: 64px 24px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
}
.hero-text { flex: 1 1 420px; min-width: 0; }
.hero-media { flex: 1 1 420px; min-width: 280px; }
.hero-media img { width: 100%; height: 380px; display: block; border-radius: 20px; }

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef3e4;
  border: 1px solid #cfe0bb;
  color: #2f5233;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
}
.stars { color: #c99b1f; letter-spacing: 1px; }

.hero h1 {
  font-family: 'Lora', serif;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.15;
  color: #1e3822;
  margin: 0 0 20px;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #3f4a38;
  margin: 0 0 32px;
  max-width: 520px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }

.btn-primary {
  text-decoration: none;
  background: #2f5233;
  color: #fff;
  padding: 16px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline {
  text-decoration: none;
  background: #fff;
  color: #2f5233;
  border: 1.5px solid #2f5233;
  padding: 16px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
}

/* ---- 4. Content sections ------------------------------------------------ */
.section { padding: 72px 24px; max-width: 1180px; margin: 0 auto; }
.section-tinted { padding: 72px 24px; background: #eef3e4; }
.container { max-width: 1180px; margin: 0 auto; }

.section-title {
  font-family: 'Lora', serif;
  font-size: clamp(26px, 3vw, 36px);
  color: #1e3822;
  text-align: center;
  margin: 0 0 12px;
}
.section-title.spaced { margin-bottom: 48px; }
.section-lead {
  text-align: center;
  color: #5a6350;
  max-width: 560px;
  margin: 0 auto 48px;
  font-size: 16px;
}

/* Leistungen */
.service-grid {
  display: grid;
  /* min(320px, 100%): identical on wide screens; on phones narrower than 368px the cards
     shrink to the screen instead of pushing the page sideways (fix to the original design) */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
}
.service-card {
  background: #fff;
  border: 1px solid #eae3cd;
  border-radius: 16px;
  padding: 36px;
}
.service-card h3 {
  font-family: 'Lora', serif;
  font-size: 22px;
  color: #1e3822;
  margin: 0 0 20px;
}
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-list li {
  display: flex;
  gap: 12px;
  font-size: 15.5px;
  color: #3f4a38;
  line-height: 1.5;
}
.check-list li::before {
  content: "✓";
  content: "✓" / "";      /* decorative: screen readers skip it (where supported) */
  color: #4a7c53;
  font-weight: 700;
}

/* Warum Azero? */
.about-logo { display: block; width: 200px; height: auto; margin: 0 auto 28px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
}
.feature { background: #fff; border-radius: 14px; padding: 28px; text-align: center; }
.feature h3 { font-size: 17px; color: #1e3822; margin: 0 0 10px; font-weight: 600; }
.feature p { font-size: 14.5px; color: #5a6350; margin: 0; line-height: 1.55; }

/* Galerie */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.gallery-grid img { width: 100%; height: 220px; display: block; border-radius: 14px; }
.gallery-grid img[hidden] { display: none; }

/* Bewertungen */
.rating-line { display: flex; justify-content: center; margin-bottom: 48px; }
.rating-line > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c99b1f;
  font-size: 15px;
  font-weight: 600;
}
.rating-line .rating-text { color: #3f4a38; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.review { background: #fff; border-radius: 14px; padding: 28px; }
.review .stars { margin-bottom: 12px; }
.review-text { font-size: 15px; color: #3f4a38; line-height: 1.6; margin: 0 0 16px; }
.review-author { font-size: 14px; color: #1e3822; font-weight: 600; margin: 0; }
.reviews-more { text-align: center; margin-top: 32px; }
.reviews-more a {
  color: #2f5233;
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
}

/* So arbeiten wir */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.step { text-align: center; }
.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2f5233;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  margin: 0 auto 16px;
}
.step h3 { font-size: 16px; color: #1e3822; margin: 0 0 8px; font-weight: 600; }
.step p { font-size: 14px; color: #5a6350; margin: 0; line-height: 1.5; }

/* ---- 5. Kontakt --------------------------------------------------------- */
.contact { padding: 72px 24px; background: #1e3822; }
.contact-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; }
.contact-info { flex: 1 1 340px; min-width: 0; color: #eef3e4; }
.contact-info h2 {
  font-family: 'Lora', serif;
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 24px;
  color: #fff;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.contact-list strong { color: #fff; }
.contact-list a { color: #cfe0bb; }
.contact-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-white {
  text-decoration: none;
  background: #fff;
  color: #1e3822;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}
.btn-whatsapp {
  text-decoration: none;
  background: #3fae4b;
  color: #fff;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
}

/* Map: a saved picture (OpenStreetMap data) is shown at once, nothing is sent to third parties.
   The interactive Google map is loaded only after a click on "Interaktive Karte laden". */
.map-box {
  width: 100%;
  height: 220px;
  margin-top: 28px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: rgba(127, 127, 127, 0.08);
}
.map-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-box iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Credit required by the OpenStreetMap license */
.map-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #233020;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px 0 0 0;
}
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn-map {
  display: inline-block;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: #eef3e4;
  border: 1.5px solid #cfe0bb;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.btn-map-solid { background: #fff; color: #1e3822; border-color: #fff; }
.btn-map[hidden] { display: none; }
.map-notice { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #cfd8c6; }
.map-notice a { color: #cfe0bb; }

/* Contact form */
.contact-form-card {
  flex: 1 1 340px;
  min-width: 0;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
}
.contact-form-card h3 {
  font-family: 'Lora', serif;
  font-size: 20px;
  color: #1e3822;
  margin: 0 0 20px;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #3f4a38;
  margin-bottom: 6px;
}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #d8d0b8;
  font-size: 15px;
  font-family: inherit;
}
.contact-form textarea { resize: vertical; }
/* The submit button keeps the browser's default font, exactly like the original design. */
.contact-form button[type="submit"] {
  background: #2f5233;
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
}
.contact-form button[type="submit"]:disabled { opacity: 0.7; cursor: progress; }

/* Consent checkbox (new: required by GDPR) */
.consent { display: flex; gap: 10px; align-items: flex-start; }
.consent input { margin: 3px 0 0; flex: none; width: 16px; height: 16px; accent-color: #2f5233; }
.contact-form .consent label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #3f4a38;
}
.contact-form .consent a { color: #2f5233; }

/* Success / error message below the form (new) */
.form-status { border-radius: 8px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.form-status[hidden] { display: none; }
.form-status.success { background: #eef3e4; border: 1px solid #cfe0bb; color: #2f5233; }
.form-status.error { background: #fbeaea; border: 1px solid #e7b9b9; color: #8a2a2a; }

/* ---- 6. Footer + sticky call button ------------------------------------ */
.site-footer { background: #16281c; color: #cfd8c6; padding: 40px 24px 96px; }
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
}
.footer-company { display: flex; align-items: flex-start; gap: 16px; }
.footer-logo { width: 72px; height: 72px; flex: none; display: block; }
.footer-company a { color: #cfd8c6; }
.footer-brand { font-family: 'Lora', serif; font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 8px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: #cfd8c6; text-decoration: underline; }
.footer-copy { max-width: 1180px; margin: 24px auto 0; font-size: 13px; color: #8fa085; }

.sticky-call {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: #2f5233;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
}
.sticky-call a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 860px) {
  .sticky-call { display: none; }
}

/* ---- 7. Legal pages (Impressum / Datenschutz) --------------------------- */
.legal { max-width: 820px; margin: 0 auto; padding: 56px 24px 72px; color: #3f4a38; line-height: 1.7; font-size: 15.5px; }
.legal h1 { font-family: 'Lora', serif; font-size: clamp(30px, 4vw, 40px); line-height: 1.2; color: #1e3822; margin: 0 0 8px; }
.legal h2 { font-family: 'Lora', serif; font-size: 22px; color: #1e3822; margin: 40px 0 12px; }
.legal h3 { font-size: 16.5px; color: #1e3822; margin: 24px 0 8px; font-weight: 600; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal .stand { color: #5a6350; font-size: 14px; margin-bottom: 8px; }
/* Placeholders that must be replaced before going live are highlighted. */
.legal mark, mark.ph { background: #fff1b8; color: #233020; padding: 0 3px; border-radius: 3px; }