/* Seitenspezifische Stile Chiemgau Reinigung (Unterseiten, Rechtstexte, Platzhalter).
   NUR var(--…) aus tokens.css verwenden – keine Hex-Werte, keine Schriftnamen, keine festen Abstände. */

/* ============ Platzhalter für offene Kundenangaben ============ */
/* <mark class="kunde">[KUNDE: …]</mark> – muss vor dem Launch verschwinden. */
.kunde {
  padding: 0 var(--space-1);
  background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-body); font-style: normal; font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); letter-spacing: 0; text-transform: none;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ============ Liquid Hero: Fallback ============ */
/* Fällt WebGL aus (kein WebGL2, GPU-Absturz, Kontextverlust), zeichnet Chrome für den leeren Canvas
   ein Platzhalter-Symbol oben links. Im statischen Zustand den Canvas daher ganz ausblenden. */
.lq-hero.is-static .lq-hero__canvas { display: none; }

/* ============ Allgemein ============ */
.page-head .chips { margin-top: var(--space-5); }
.page-head .lead { max-width: 44rem; }
.text-center { text-align: center; }
.after-block { margin-top: var(--space-6); }
.site-footer a, .legal a { overflow-wrap: anywhere; }
.site-footer address { font-style: normal; }
.footer-grid p { margin-bottom: var(--space-3); }
.chip--static:hover { background: var(--color-surface-raised); border-color: var(--color-border); color: var(--color-text); }

/* Zwei Spalten (Kontakt, Über uns) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 48rem) { .split { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ============ Startseite: Vorteile-Leiste (nur Stichworte) ============ */
.benefits--compact { list-style: none; padding: 0; margin-block: 0; }
.benefits--compact .benefit { align-items: center; }
.benefits--compact .benefit h3 { margin: 0; }

/* ============ Startseite: kompaktes Leistungsraster (Titel + eine Zeile) ============ */
.cards--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); }
.card--compact { gap: var(--space-2); }
.card--compact h3 a { color: inherit; text-decoration: none; }
.card--compact:has(.card__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 40rem) {          /* Handy: zwei Spalten statt zehn Karten untereinander */
  .cards--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .cards--compact .card--featured { grid-column: span 2; }
  .card--compact { padding: var(--space-4); }
  .card--compact h3 { hyphens: auto; overflow-wrap: anywhere; }
}

/* ============ Grafik Fensterscheibe (statt Foto) ============ */
.glass-art { display: block; width: 100%; height: auto; }

/* ============ Leistungen: weitere Leistungen als ruhiges Raster ============ */
.service-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--space-7) var(--space-6); }
.service-item { display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
.service-item .eyebrow { margin: var(--space-2) 0 0; }
.service-item h2 { font-size: var(--fs-lg); margin: 0; }
.service-item p { margin: 0; color: var(--color-text-muted); }

/* ============ Über uns: Inhaber (ohne Foto, mit Tropfen-Grafik) ============ */
.owner__media {
  margin: 0; display: grid; place-items: center; gap: var(--space-4);
  aspect-ratio: 1; padding: var(--space-6);
  border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 40%, var(--color-bg) 0 30%, var(--color-primary-soft) 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.owner__media img { width: min(85%, 24rem); height: auto; animation: lq-float 7s ease-in-out infinite; }   /* eigener Tropfen statt Foto */

/* ============ Rechtstexte ============ */
.legal h2 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.legal h2:first-child { margin-top: 0; }
.legal p { overflow-wrap: anywhere; }

/* ============ 404 ============ */
.notfound { margin-top: var(--space-5); }

/* Footer: Social-Icons (eigene Linien-Zeichnung, Kreis-Buttons) */
.site-footer .social-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.site-footer .social-links li { margin: 0; }
.social-links a {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-dark-border); color: var(--color-on-dark);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social-links a:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-dark); text-decoration: none; transform: translateY(-2px); }
.social-links svg { width: 22px; height: 22px; }

/* ============ Startseite: Google-Bewertungen ============ */
/* Manuell gepflegt in index.html (kein Google-Widget, kein Nachladen). Neue Bewertung bei Google →
   Karte ergänzen, Anzahl/Schnitt/Stand anpassen, keine Bewertung weglassen (sonst irreführend nach UWG). */
.reviews-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--fs-sm);
}
.reviews-score { color: var(--color-text); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.review-stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.review-stars svg { width: 1.1rem; height: 1.1rem; }
.reviews { columns: 3 18rem; column-gap: var(--space-5); }
.review-card {
  display: flex; flex-direction: column; gap: var(--space-4); break-inside: avoid;
  margin: 0 0 var(--space-5); padding: var(--space-5);
  background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.review-author { display: flex; align-items: center; gap: var(--space-3); }
.review-author > span:last-child { display: grid; min-width: 0; }
.review-author strong { overflow-wrap: anywhere; line-height: var(--lh-heading); }
.review-author small { color: var(--color-text-muted); font-size: var(--fs-xs); }
/* Initiale statt Profilbild: kein Nachladen von Google-Servern */
.review-avatar {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary-ink); font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.review-text { margin: 0; color: var(--color-text); }
.review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.review-date { color: var(--color-text-muted); font-size: var(--fs-xs); }
.reviews-note {
  max-width: var(--container-narrow); margin: var(--space-5) auto 0; text-align: center;
  color: var(--color-text-muted); font-size: var(--fs-xs);
}
.reviews-note .link-arrow { margin-left: var(--space-1); }
.js .review-text:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.review-more {
  align-self: flex-start; margin-top: calc(var(--space-2) * -1); padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--color-primary-ink); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 3px;
}
.review-more:hover { color: var(--color-primary-ink-hover); }
.review-more:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }