/* LiebBlanco Gebäudereinigung. Vorbild: ruhige, großzügige Typografie und klarer Anfrage-Weg. */
:root {
  --schwarz: #0f1115;
  --text: #2b2f36;
  --grau: #5d6471;
  --linie: #e3e6ea;
  --hell: #f3f4f6;
  --weiss: #ffffff;
  --blau: #1c5fd8;
  --blau-dunkel: #1549ad;
  --nacht: #0f1a2e;
  --klein: 6px;
  --gross: 28px;
  --breite: 1200px;
  --schrift: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--schrift); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--weiss); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
h1, h2, h3 { color: var(--schwarz); font-weight: 700; margin: 0 0 .55em; hyphens: manual; overflow-wrap: break-word; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 32px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; background: var(--weiss); padding: 8px 12px; z-index: 30; }

/* Abschnittsmarke: kleine Großbuchstaben mit Pfeil */
.oberzeile { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--schwarz); margin-bottom: 1.1em; }
.oberzeile::after { content: "→"; color: var(--blau); font-size: 1rem; letter-spacing: 0; margin-left: 10px; }
.abschnitt-dunkel .oberzeile, .aufruf .oberzeile { color: var(--weiss); }
.abschnitt-dunkel .oberzeile::after { color: #7fa7ff; }

/* Kopf */
.kopf { background: var(--weiss); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 32px; min-height: 84px; }
.logo img { width: 190px; height: auto; }
.menue { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.menue a { color: var(--schwarz); text-decoration: none; font-weight: 700; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.menue a:hover { color: var(--blau); }
.menue a[aria-current="page"] { border-bottom-color: var(--blau); }
.kopf-kontakt { display: flex; align-items: center; gap: 20px; }
.kopf-tel { display: flex; flex-direction: column; text-decoration: none; color: var(--schwarz); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.kopf-tel span { font-size: .72rem; font-weight: 400; color: var(--grau); }
.menue-knopf { display: none; }
.menue-mobil-kontakt { display: none; }
.menue .menue-mobil-kontakt a { border-bottom: 1px solid var(--schwarz); justify-content: center; padding: 14px 22px; }
.menue .menue-mobil-kontakt .knopf-blau { color: var(--weiss); border-color: var(--blau); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: .98rem;
  padding: 14px 22px; border-radius: var(--klein); border: 1px solid var(--schwarz); background: var(--schwarz);
  color: var(--weiss); cursor: pointer; font-family: inherit; line-height: 1.2;
}
.knopf:hover { background: #2a2e36; border-color: #2a2e36; color: var(--weiss); }
.knopf-pfeil::after { content: "→"; font-size: 1.1rem; }
.knopf-blau { background: var(--blau); border-color: var(--blau); }
.knopf-blau:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf-rand { background: transparent; color: var(--schwarz); }
.knopf-rand:hover { background: var(--schwarz); color: var(--weiss); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.textlink { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--schwarz); text-decoration: none; }
.textlink::after { content: "→"; color: var(--blau); }
.textlink:hover { color: var(--blau); }

/* Abschnitte */
.abschnitt { padding: 104px 0; }
.abschnitt-hell { background: var(--hell); }
.abschnitt-dunkel { background: var(--nacht); color: #c9d2e3; }
.abschnitt-dunkel h2, .abschnitt-dunkel h3 { color: var(--weiss); }
.abschnitt-dunkel a:not(.knopf) { color: var(--weiss); }
.flaeche-rund { border-radius: var(--gross); margin: 0 16px; }
.kopfzeile { max-width: 760px; margin-bottom: 56px; }
.kopfzeile p { color: var(--grau); font-size: 1.08rem; }
.abschnitt-dunkel .kopfzeile p { color: #c9d2e3; }
.zeile-mit-link { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.zeile-mit-link .kopfzeile { margin-bottom: 0; }

/* Einstieg */
.einstieg { padding: 24px 0 0; }
.einstieg-raster { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: stretch; background: var(--hell); border-radius: var(--gross); overflow: hidden; }
.einstieg-text { padding: 72px 56px; display: flex; flex-direction: column; justify-content: center; }
.einstieg-text p { font-size: 1.12rem; color: var(--grau); max-width: 34em; }
.einstieg-bild img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; border-radius: 0 0 0 var(--gross); }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--linie); }
.fakt { padding: 28px 28px 0 0; }
.fakt + .fakt { padding-left: 28px; border-left: 1px solid var(--linie); }
.fakt strong { display: block; font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; color: var(--schwarz); margin-bottom: 10px; }
.fakt span { color: var(--grau); font-size: .98rem; }
.seitenkopf { padding: 88px 0 72px; }
.seitenkopf p { font-size: 1.12rem; color: var(--grau); max-width: 44em; }
.seitenkopf .zweispaltig img { border-radius: var(--gross); }

/* Große Aussage */
.aussage-raster { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.aussage { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.025em; color: var(--schwarz); font-weight: 700; margin-bottom: .8em; }
.aussage span { color: #9aa1ad; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie); margin-top: 16px; }
.drei > div { padding: 28px 28px 0 0; }
.drei > div + div { padding-left: 28px; border-left: 1px solid var(--linie); }
.drei p { color: var(--grau); margin: 0; }
.drei p + p { margin-top: 14px; }
.wert[id] { scroll-margin-top: 110px; }

/* Zwei Spalten */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zweispaltig img { border-radius: var(--gross); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.betont { font-weight: 700; color: var(--schwarz); }

/* Leistungskarten */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.karte { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.karte img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--gross); }
.karte-text { padding: 22px 4px 0; }
.karte-text h3 { margin-bottom: .35em; }
.karte-text p { margin: 0 0 14px; color: var(--grau); font-size: .98rem; }
.karte:hover h3 { color: var(--blau); }
.karte .textlink { font-size: .93rem; }

/* Gründe auf dunkler Fläche */
.gruende { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.grund { border-top: 1px solid #2c3a57; padding-top: 22px; counter-increment: grund; }
.gruende { counter-reset: grund; }
.grund::before { content: counter(grund, decimal-leading-zero); display: block; color: #7fa7ff; font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.grund p { margin: 0; color: #b6c0d3; }

/* Ablauf */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: schritt; }
.schritt { border-top: 2px solid var(--schwarz); padding-top: 20px; }
.schritt::before { counter-increment: schritt; content: counter(schritt, decimal-leading-zero); display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; color: var(--schwarz); line-height: 1; margin-bottom: 14px; }
.schritt h3 { margin-bottom: .3em; }
.schritt p { margin: 0; color: var(--grau); }

/* Häufige Fragen */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.faq details { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--schwarz); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blau); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 0; color: var(--grau); }

/* Aufruf-Streifen */
.aufruf-band { background: var(--blau); color: #e7eeff; border-radius: var(--gross); margin: 0 16px; padding: 72px 0; }
.aufruf { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.aufruf h2 { color: var(--weiss); margin-bottom: .3em; }
.aufruf p { max-width: 40em; margin: 0; }
.aufruf .knopf { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.aufruf .knopf:hover { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
.aufruf .knopf-rand { background: transparent; color: var(--weiss); border-color: var(--weiss); }
.aufruf .knopf-rand:hover { background: var(--weiss); color: var(--schwarz); }
.abstand-unten { margin-bottom: 104px; }

/* Leistungen im Detail */
.detail { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--linie); scroll-margin-top: 110px; }
.detail:last-child { border-bottom: 0; }
.detail:nth-child(even) .detail-bild { order: 2; }
.detail-bild img { border-radius: var(--gross); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Werte */
.werte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.wert { border-top: 2px solid var(--schwarz); padding-top: 20px; }
.wert p { margin: 0; color: var(--grau); }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; border-radius: var(--gross); }
.galerie figcaption { padding: 14px 4px 0; font-size: .95rem; color: var(--grau); }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.kontaktdaten dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); margin-top: 22px; }
.kontaktdaten dd { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; color: var(--schwarz); }
.kontaktdaten dd a { color: var(--schwarz); text-decoration: none; }
.kontaktdaten dd a:hover { color: var(--blau); }
.formular { background: var(--hell); border-radius: var(--gross); padding: 40px; }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { margin-bottom: 16px; }
.feld label, .gruppe legend { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; color: var(--schwarz); }
.feld input, .feld textarea { width: 100%; font: inherit; color: var(--text); padding: 13px 14px; border: 1px solid #cfd4db; border-radius: var(--klein); background: var(--weiss); }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
.feld textarea { min-height: 150px; resize: vertical; }
.gruppe { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.auswahl { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.auswahl label, .einwilligung { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text); }
.auswahl input, .einwilligung input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--blau); }
.einwilligung { font-size: .92rem; margin: 8px 0 22px; }
.hinweis { font-size: .9rem; color: var(--grau); }
.falle { position: absolute; left: -9999px; }

/* Rechtstexte */
.rechtstext { max-width: 820px; }
.rechtstext h1 { font-size: clamp(2rem, 4vw, 3rem); }
.rechtstext h2 { font-size: 1.3rem; letter-spacing: -.01em; margin-top: 1.8em; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.2em; }

/* Fuß */
.fuss { background: var(--weiss); color: var(--grau); padding: 64px 0 28px; font-size: .97rem; border-top: 1px solid var(--linie); margin-top: 104px; }
.fuss a { color: var(--schwarz); text-decoration: none; }
.fuss a:hover { color: var(--blau); }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.fuss-logo { width: 170px; margin-bottom: 16px; }
.fuss-titel { color: var(--schwarz); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1em; }
.fuss li { margin-bottom: 8px; }
.fuss-unten { border-top: 1px solid var(--linie); margin-top: 48px; padding-top: 22px; font-size: .88rem; }
.fuss-unten p { margin: 0; }
main > .aufruf-band:last-child, main > section:last-child.aufruf-band { margin-bottom: 0; }

/* Einwilligung */
.einwilligung-box { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--klein); box-shadow: 0 8px 30px rgba(15, 17, 21, .12); padding: 22px 0; font-size: .95rem; }
.einwilligung-box .rahmen { max-width: 960px; }
.einwilligung-titel { font-weight: 700; color: var(--schwarz); margin-bottom: .4em; }
.einwilligung-auswahl { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 12px; }
.einwilligung-auswahl[hidden] { display: none; }
.einwilligung-auswahl label { display: flex; gap: 8px; align-items: center; }
.einwilligung-box .knopf { padding: 11px 18px; }

/* Tablet */
@media (max-width: 1080px) {
  .kopf-tel { display: none; }
  .menue { gap: 20px; }
}
@media (max-width: 960px) {
  .karten, .gruende, .galerie { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: repeat(2, 1fr); }
  .einstieg-raster, .zweispaltig, .kontakt-raster, .detail, .aussage-raster { grid-template-columns: 1fr; gap: 32px; }
  .einstieg-text { padding: 48px 32px; }
  .einstieg-bild img { min-height: 320px; border-radius: 0; }
  .detail:nth-child(even) .detail-bild { order: 0; }
  .faq { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}

/* Handy */
@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.6rem; }
  .rahmen { padding: 0 16px; }
  .abschnitt { padding: 64px 0; }
  .abstand-unten { margin-bottom: 64px; }
  .kopf-innen { min-height: 66px; gap: 12px; }
  .logo img { width: 150px; }
  .kopf-kontakt { display: none; }
  .menue-knopf { display: block; margin-left: auto; font: inherit; font-weight: 700; color: var(--schwarz); background: var(--weiss); border: 1px solid var(--schwarz); border-radius: var(--klein); padding: 8px 14px; cursor: pointer; }
  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--weiss); border-bottom: 1px solid var(--linie); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; }
  .menue.offen { display: flex; }
  .menue a { padding: 13px 0; border-bottom: 1px solid var(--linie); }
  .menue a[aria-current="page"] { border-bottom-color: var(--linie); color: var(--blau); }
  .menue-mobil-kontakt { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
  .einstieg { padding: 12px 0 0; }
  .einstieg-raster { border-radius: 20px; }
  .einstieg-text { padding: 32px 18px; }
  .einstieg-bild img { min-height: 240px; }
  .fakten, .drei { grid-template-columns: 1fr; }
  .fakt, .drei > div { padding: 20px 0 0; }
  .fakt + .fakt, .drei > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); margin-top: 20px; }
  .karten, .gruende, .galerie, .ablauf, .werte, .feldreihe { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr; }
  .flaeche-rund, .aufruf-band { margin: 0 8px; border-radius: 20px; }
  .aufruf-band { padding: 48px 0; }
  .formular { padding: 24px 16px; border-radius: 20px; }
  .knopfreihe .knopf { flex: 1 1 100%; justify-content: center; }
  .einwilligung-box { left: 8px; right: 8px; bottom: 8px; padding: 16px 0; }
}

/* Ruhiges Einblenden beim Scrollen. Greift nur, wenn das Kopf-Skript die Klasse "bewegt" setzt
   (JavaScript an und keine Einstellung "weniger Bewegung"). Gleiche Liste wie in einblenden.js. */
.bewegt :where(.einstieg-text > *, .fakt, .seitenkopf .rahmen > *, .kopfzeile, .zeile-mit-link, .aussage-raster > div > *, .drei > div, .karte, .schritt, .grund, .faq details, .aufruf, .detail > *, .wert, .galerie figure, .kontakt-raster > *) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--verzug, 0s);
}
.bewegt .sichtbar { opacity: 1; transform: none; }
.bewegt .einstieg-bild img { opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 1.8s cubic-bezier(.22, .61, .36, 1); }
.bewegt .einstieg-bild.sichtbar img { opacity: 1; transform: none; }

/* Sanfte Hover-Bewegung */
.karte img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.karte:hover img { transform: scale(1.025); }
.textlink::after { transition: transform .3s ease; }
.textlink:hover::after, .karte:hover .textlink::after { transform: translateX(4px); }
.knopf, .karte h3, .textlink { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .karte img, .textlink::after { transition: none; }
  .karte:hover img { transform: none; }
}
@media print {
  .bewegt :where(.einstieg-text > *, .fakt, .seitenkopf .rahmen > *, .kopfzeile, .zeile-mit-link, .aussage-raster > div > *, .drei > div, .karte, .schritt, .grund, .faq details, .aufruf, .detail > *, .wert, .galerie figure, .kontakt-raster > *), .bewegt .einstieg-bild img { opacity: 1; transform: none; }
}