/* Zielseite für Anzeigen-Besucher (R4, zuerst /fassadenreinigung): Zusatz zum Knopf, Vertrauensliste, Google-Zeile,
   Kundenstimmen. Eigene Datei, damit stil.css für alle anderen Seiten klein bleibt; eingebunden über „stile: [zielseite]“
   in den Kopfdaten der Seite, nach stil.css.
   Reihenfolge im Quelltext und am Handy: Text mit Knöpfen, Belege, Bildpaar. Ab 901 px steht das Bildpaar neben dem
   Text, die Belege laufen als Zeile über beide Spalten darunter. */
.knopf-zusatz{margin:12px 0 0;font-size:15px;line-height:1.4;color:var(--grau)}
.kaufgruende{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;padding:18px 0 0;border-top:1px solid var(--linie);font-size:16px;line-height:1.4}
.kaufgruende li{position:relative;padding-left:28px}
.kaufgruende li::before{content:"";position:absolute;left:2px;top:.32em;width:14px;height:7px;border-left:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);transform:rotate(-45deg)}
.kaufgruende b{display:block;color:var(--nacht)}
.kaufgruende span{display:block;font-size:15px;color:var(--grau)}
/* Ab 1100 px: vier Spalten in der Breite ihres Inhalts, gleiche Zwischenräume. So bleibt jeder Zusatz einzeilig. */
@media (min-width:1100px){.kaufgruende{grid-template-columns:repeat(4,auto);justify-content:space-between}}
@media (max-width:560px){.kaufgruende{grid-template-columns:1fr;gap:8px;padding-top:16px;font-size:15px}.kaufgruende b,.kaufgruende span{display:inline}.kaufgruende span{color:var(--anth)}}
.google-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0;font-size:16px;line-height:1.4}
.google-zeile a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.google-zeile .stern{width:18px;height:18px;flex:none;background:var(--cyan);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.google-stand{font-size:15px;color:var(--grau)}
.seitenkopf.zielseite{padding-top:clamp(20px,2.4vw,32px)}
.seitenkopf.mit-bild.zielseite h1{font-size:clamp(36px,4vw,57px)}
@media (max-width:374px){.seitenkopf.mit-bild.zielseite h1{font-size:32px}}
.seitenkopf.mit-bild.zielseite .wrap{row-gap:clamp(20px,2vw,28px)}
.zielseite .zs-text{grid-column:1;grid-row:1}
.zielseite .vn-paar{grid-column:2;grid-row:1}
.zielseite .zs-belege{grid-column:1/-1;grid-row:2}
.zielseite .vorspann{margin-bottom:clamp(20px,2.2vw,28px)}
.zielseite .knoepfe{flex-direction:row}
.zs-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 32px;margin-top:4px}
.zs-fuss .passt{margin:0}
@media (min-width:901px) and (max-width:1023px){.zielseite .knoepfe{flex-wrap:nowrap}.zielseite .knoepfe .knopf{padding:0 12px;white-space:nowrap}}
@media (max-width:900px){.seitenkopf.mit-bild.zielseite .wrap{row-gap:0}.zielseite .zs-text,.zielseite .zs-belege,.zielseite .vn-paar{grid-column:1;grid-row:auto}.zielseite .zs-belege{margin-top:18px}.zielseite .vn-paar{margin-top:28px}}
@media (max-width:560px){.zielseite .knoepfe .knopf{width:auto;padding:0 18px}.zielseite .knoepfe .knopf.nacht{flex:1}.zielseite .vorspann{font-size:18px}}
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt);margin-top:clamp(20px,2.6vw,32px)}
.stimme{display:flex;flex-direction:column;height:100%;background:var(--weiss);border-top:3px solid var(--nacht);padding:22px 24px 20px}
.stimme blockquote{margin:0 0 18px;font-size:18px;line-height:1.55}
.stimme blockquote p{margin:0}
.stimme figcaption{margin-top:auto;font-size:15px;line-height:1.4;color:var(--grau)}
.stimme figcaption b{display:block;font-size:16px;color:var(--nacht)}
@media (max-width:900px){.stimmen{grid-template-columns:1fr}}
.weiter-knoepfe .knopf-zusatz{color:var(--nebel);text-align:right}
@media (max-width:900px){.weiter-knoepfe .knopf-zusatz{text-align:left}}
.weiter .knopf-zusatz{margin-top:12px;font-size:15px}

/* Anzeigen-Zielseite am Handy: echte Safari-Sichtfläche (~660 px) fasst Überschrift, Knopf,
   Kaufgründe und Google-Zeile. Reiterzeile und Etikett entfallen hier, der Weg zu den
   anderen Leistungen bleibt im Menü (Review R4R, Soll 1, gemessen in varianten.txt). */
@media (max-width: 560px) {
  .reiter { display: none; }
  .zielseite .kolumne { display: none; }
  .zielseite .zs-belege { margin-top: 12px; }
  .kaufgruende { padding-top: 12px; }
}

/* Laptop mit niedrigem Fenster (1366 × 768 lässt rund 641 px Höhe, 1280 × 720 rund 593 px): Wie am Handy
   entfallen Reiterzeile und Etikett. Die Überschrift behält ihre Größe, die Abstände folgen der Fensterhöhe.
   So stehen Knöpfe, Kaufgründe und Google-Zeile im ersten Bildschirm (R5, gemessen mit werkzeug/falz.mjs). */
@media (min-width: 901px) and (max-height: 760px) {
  .reiter { display: none; }
  .zielseite .kolumne { display: none; }
  .seitenkopf.zielseite { padding-top: clamp(28px, 6vh, 44px); }
  .seitenkopf.mit-bild.zielseite h1 { margin-bottom: clamp(18px, min(2.4vw, 3.4vh), 28px); }
  .zielseite .vorspann { font-size: clamp(19px, min(1.7vw, 3.3vh), 23px); line-height: 1.55; margin-bottom: clamp(18px, min(2.2vw, 3.4vh), 28px); }
  .seitenkopf.mit-bild.zielseite .wrap { row-gap: clamp(18px, min(2vw, 3vh), 26px); }
  .kaufgruende { padding-top: 16px; }
}