/* Seite /gebaeudereiniger: Beispiel-Websites für Gebäudereiniger.
   Nutzt die Tokens aus /styles.css, eigene Datei wegen CSP style-src 'self'. */

.beispiel-liste { display: grid; gap: var(--s-7); }

.beispiel-karte {
  display: grid; grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.beispiel-bild { position: relative; background: var(--bg-alt); }
.beispiel-bild img { display: block; height: auto; }
.beispiel-bild .bild-desktop { width: 100%; }
.beispiel-bild .bild-mobil { display: none; }
.beispiel-text { padding: var(--s-6); }
.beispiel-text .eyebrow { margin-bottom: var(--s-2); }
.beispiel-text h2 { font-size: var(--fs-xl); }
.beispiel-text p { margin-top: var(--s-3); color: var(--text-2); }
.beispiel-text .btn { margin-top: var(--s-5); }

.beispiel-umfang { display: grid; gap: var(--s-3); margin-top: var(--s-5); list-style: none; padding: 0; max-width: var(--measure); }
.beispiel-umfang li { position: relative; padding-left: var(--s-6); color: var(--text-2); }
.beispiel-umfang li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
}
.beispiel-hinweis { margin-top: var(--s-6); color: var(--text-2); font-size: var(--fs-sm); max-width: var(--measure); }

@media (min-width: 900px) {
  .beispiel-karte { grid-template-columns: 1.55fr 1fr; align-items: center; }
  .beispiel-bild { padding: var(--s-6) 0 var(--s-6) var(--s-6); background: transparent; }
  .beispiel-bild .bild-desktop { border: 1px solid var(--border); border-radius: var(--r-sm, 8px); box-shadow: 0 10px 30px rgba(15, 42, 71, .10); }
  .beispiel-bild .bild-mobil {
    display: block; position: absolute; right: -12px; bottom: var(--s-4); width: 26%;
    border: 5px solid var(--ink); border-radius: 16px; box-shadow: 0 14px 30px rgba(15, 42, 71, .25);
  }
  .beispiel-text { padding: var(--s-7) var(--s-7) var(--s-7) var(--s-8); }
}