/* ============================================================ ZL RÄUMUNGEN — Schlusszeile, fünf Varianten Umschaltbar über — beim Bauen mit SLZ=3 npm run build, zum Ausprobieren über die Design-Leiste. Die Grundfassung steht in style.css unter «.slz» — weisser Grund, Navy-Text, roter Abschlussknopf. Hier stehen nur die Abweichungen. Jede Variante setzt --slz auf ihre tatsächliche Höhe, damit alle Rechnungen im Projekt weiter stimmen: das Polster unter dem Inhalt, die Höhe des Startbereichs und die Höhe der Formularseite lesen alle diese eine Variable. ============================================================ */ /* ------------------------------------------------------------ 1 — Balken (Ausgangsfassung) Drei gleich breite Felder über die volle Breite, das letzte rot. Vertraut und eindeutig; auf dem Desktop aber schwer, und sie wiederholt, was im Kopf schon steht. ------------------------------------------------------------ */ .slz-info{display:none} /* ------------------------------------------------------------ 2 — Handlung gewichtet Telefon und WhatsApp schrumpfen auf Symbolfelder, «Offerte anfragen» bekommt den ganzen Rest. Wer unschlüssig ist, landet beim Formular statt bei drei gleichwertigen Möglichkeiten. ------------------------------------------------------------ */ [data-slz="2"] .slz .slz-tel, [data-slz="2"] .slz .slz-wa{flex:none; width:64px; gap:0} [data-slz="2"] .slz .slz-tel .lbl-lang, [data-slz="2"] .slz .slz-tel .lbl-kurz, [data-slz="2"] .slz .slz-wa .lbl-lang, [data-slz="2"] .slz .slz-wa .lbl-kurz{display:none} [data-slz="2"] .slz .slz-tel svg, [data-slz="2"] .slz .slz-wa svg{width:21px; height:21px} [data-slz="2"] .slz .slz-cta{flex:1; font-size:14px} /* ------------------------------------------------------------ 3 — Schwebend Kein durchgehender Balken, sondern eine abgesetzte Leiste mit Luft zum Rand. Gibt den Blick auf den Inhalt frei und wirkt leichter — der Preis ist etwas weniger Fläche zum Treffen. ------------------------------------------------------------ */ [data-slz="3"]{--slz:78px} [data-slz="3"] .slz{ left:auto; right:auto; bottom:14px; left:50%; transform:translateX(-50%); width:min(560px, calc(100% - 28px)); height:56px; border:1px solid var(--line); box-shadow:0 8px 30px rgba(30,33,36,.16); } [data-slz="3"] .slz .slz-a{font-size:12.5px; letter-spacing:.06em} [data-slz="3"] .slz .slz-a svg{width:17px; height:17px} /* ------------------------------------------------------------ 4 — Mit Aussage Links eine kurze Zeile, rechts die Handlungen. Nutzt die Breite auf dem Desktop für ein Argument, statt drei Felder zu strecken. Auf dem Mobilgerät fällt die Zeile weg — dort zählt der Platz. ------------------------------------------------------------ */ [data-slz="4"]{--slz:64px} [data-slz="4"] .slz{height:64px; padding-left:var(--sp)} [data-slz="4"] .slz-info{ display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; padding-right:20px; } [data-slz="4"] .slz-info b{ font-family:var(--fd); font-size:13.5px; font-weight:700; color:var(--hd); letter-spacing:.02em; line-height:1.2; white-space:nowrap; } [data-slz="4"] .slz-info small{ font-size:11.5px; color:var(--tx-mut); line-height:1.3; white-space:nowrap; } [data-slz="4"] .slz .slz-a{flex:none; padding-inline:22px} [data-slz="4"] .slz .slz-cta{padding-inline:28px} @media (max-width:720px){ [data-slz="4"] .slz-info{display:none} [data-slz="4"] .slz{padding-left:0} [data-slz="4"] .slz .slz-a{flex:1; padding-inline:10px} } /* ------------------------------------------------------------ 5 — Nur auf dem Mobilgerät Auf dem Desktop stehen Telefonnummer und Offerten-Knopf bereits im Kopf — dort verschwindet die Leiste ganz und der Inhalt bekommt den Platz zurück. Auf dem Mobilgerät, wo der Kopf nur den Menüknopf zeigt, bleibt sie vollständig. ------------------------------------------------------------ */ @media (min-width:901px){ [data-slz="5"]{--slz:0px} [data-slz="5"] .slz{display:none} }