/* Gutschein-Shop — Gestaltung. * * ⛔ BEWUSST OHNE EIGENE SCHRIFTFAMILIE. Die Seite liegt im Enfold-Theme des * Betriebs, und die Website laedt die Hausschriften bereits (Instrument Serif * fuer Ueberschriften, Inter fuer Fliesstext). `font: inherit` holt sie damit * von selbst — eine eigene Angabe hier waere eine zweite Wahrheit und waere * beim naechsten Themenwechsel falsch. * ⛔ Das ist der GEGENSATZ zum PDF: Dort gibt es kein Theme, das etwas laedt, * also muessen die Schriftdateien dort mitgeliefert werden. * * ⛔ UEBERARBEITET 2026-10-14 nach dem Layout der Webseite (Vorgabe Markus: * „Die Formularseite zum Gutschein kaufen ist auch nicht ueberarbeitet / * nicht im Layout", davor „Oben und unten sind die Abstaende zu gering"). * Vorbild ist habsgut.at — ⛔ OHNE die Weihnachtsfarben jener Seite. * * Was sich geaendert hat und warum: * · Grosszuegige Abstaende oben und unten. Vorher klebte der Block unter * der Brotkrume; die Seiten des Hauses arbeiten mit viel Luft. * · Keine Karte mehr mit Rahmen und Schatten. Eine umrandete weisse Box auf * einer ruhigen Seite sieht aus wie ein eingeklebtes Fremdstueck — genau * das, was die alte Fassung vermeiden wollte und doch erzeugt hat. * · ⛔ Das Olivgruen #5a6e2f ist RAUS. Es war erfunden und steht in keiner * Farbdefinition des Hauses. Es gelten #3e4844 (Dunkelgrau) und #dddddd * (Hauptflaeche) aus R:\Design\Farm-habsgut\Gutschein-Layout\colors.txt. */ :root { --hg-dunkel: #3e4844; --hg-linie: rgba(62, 72, 68, .18); } /* ⛔ DIE LUFT OBEN UND UNTEN. Das war die Beanstandung. 5rem ist kein Geschmack, sondern der Rhythmus der uebrigen Seitenabschnitte. */ #hg-gutschein-shop { max-width: 720px; margin: 0 auto; padding: 5rem 1.25rem 6rem; color: var(--hg-dunkel); } @media (max-width: 680px) { #hg-gutschein-shop { padding: 3rem 1rem 4rem; } } /* Keine Karte: kein Rahmen, kein Schatten, kein Weiss. Die Seite traegt die Flaeche, das Formular steht darauf. */ .hg-gs-box { font: inherit; border: 0; border-radius: 0; padding: 0; background: transparent; } /* Ueberschrift in der Hausschrift der Seite — `inherit` genuegt, Enfold setzt h3 bereits auf Instrument Serif. */ .hg-gs-box h3 { margin: 0 0 .9rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.15; } .hg-gs-descr { margin: 0 0 3rem; font-size: 1.05rem; line-height: 1.65; opacity: .85; max-width: 54ch; } /* Abschnitt = Eyebrow plus Inhalt, wie jede Sektion der Webseite. */ .hg-gs-fs { border: 0; border-top: 1px solid var(--hg-linie); margin: 3rem 0 0; padding: 2rem 0 0; } .hg-gs-fs legend { padding: 0; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; opacity: .6; } /* Betragsstufen: grosse Flaechen, weil sie am Telefon getroffen werden muessen. ⛔ Die Auswahl zeigt sich in der HAUSFARBE, nicht in einem erfundenen Gruen. */ .hg-gs-stufen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; } .hg-gs-stufe { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--hg-linie); border-radius: 2px; padding: .85rem 1.3rem; cursor: pointer; font-weight: 500; transition: border-color .15s ease, background .15s ease; } .hg-gs-stufe:hover { border-color: var(--hg-dunkel); } /* ⛔ DIE AUSWAHL KEHRT NICHT UM (Befund Markus 2026-10-14: „Achtung Text invers wenn ausgewählt"). Die erste Fassung setzte dunklen Grund und `color: #fff` auf das Label — der Betrag steht aber in einem ``, und Enfold faerbt den mit hoeherer Spezifitaet. Ergebnis: dunkle Flaeche, unsichtbarer Text. ⛔ Den Span zu uebersteuern waere ein Wettlauf um Spezifitaet in einem Theme, das uns nicht gehoert und sich mit jedem Update aendert. Die Auswahl zeigt sich deshalb ueber RAHMEN und eine leichte Toenung — die Schriftfarbe wird gar nicht erst angefasst, also kann sie auch nicht verschwinden. */ .hg-gs-stufe:has(input:checked) { border-color: var(--hg-dunkel); box-shadow: inset 0 0 0 1px var(--hg-dunkel); background: rgba(62, 72, 68, .07); } .hg-gs-weg { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; cursor: pointer; } /* Telefon: Vorwahl + Nummer nebeneinander (2026-10-17). ⛔ Mit der Container-id, nicht nur mit Klassen (Fix 2026-10-25): Enfold setzt `#top select { width: 100% }` per id-Regel, und die schlaegt jede reine Klassenregel. Ohne die id nahm die Vorwahl die ganze Breite ein und das Nummernfeld schrumpfte auf wenige Pixel — gemeldet Markus 2026-10-25, in Chrome und WebKit reproduziert. */ .hg-phonerow { display: flex; gap: 8px; } #hg-gutschein-shop .hg-phonerow select { width: 170px; flex: none; } #hg-gutschein-shop .hg-phonerow input { flex: 1; min-width: 0; } .hg-gs-l { display: block; margin-top: 1.4rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; } .hg-gs-l input, .hg-gs-l textarea, .hg-gs-l select { display: block; width: 100%; margin-top: .45rem; font: inherit; font-weight: 400; font-size: 1rem; padding: .75rem 0; /* ⛔ Nur eine Grundlinie statt eines Kastens — so setzt die Webseite ihre Formulare. Ein gerahmtes Feld wirkt darauf wie ein Fremdkoerper. */ border: 0; border-bottom: 1px solid var(--hg-linie); border-radius: 0; background: transparent; box-sizing: border-box; color: inherit; } .hg-gs-l input:focus, .hg-gs-l textarea:focus, .hg-gs-l select:focus { outline: none; border-bottom-color: var(--hg-dunkel); } .hg-gs-l textarea { resize: vertical; min-height: 5.5rem; } .hg-gs-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } @media (max-width: 520px) { .hg-gs-zwei { grid-template-columns: 1fr; } } .hg-gs-post { margin-top: 1rem; } .hg-gs-hint { margin: .45rem 0 0; font-size: .82rem; opacity: .65; line-height: 1.5; } /* Groesser als zuvor (.9rem) — Vorgabe Markus 2026-10-16: „Die beiden Links am Ende des Formulars sind sehr klein". */ .hg-gs-check { display: flex; align-items: flex-start; gap: .6rem; margin-top: 2rem; font-size: 18px; cursor: pointer; line-height: 1.5; } /* ⛔ In px, nicht rem, UND mit der id davor: Das Theme setzt das rem auf rund 12 px und ueberschreibt `label` mit einer id-Regel (#top label), die jede Klassenregel schlaegt — gemessen 2026-10-16 (12,5 px trotz 18 px). */ #hg-gutschein-shop .hg-gs-check { font-size: 18px; line-height: 1.5; } /* Versandkosten im Post-Block und Gesamtbetrag vor dem Knopf. */ .hg-gs-porto { margin: .6rem 0 0; font-size: 18px; font-weight: 600; } .hg-gs-summe { margin: 2rem 0 0; font-size: 20px; font-weight: 600; } /* Knopf in der Hausfarbe, eckig wie auf der Webseite. */ .hg-gs-btn { display: inline-block; margin-top: 2.5rem; font: inherit; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; padding: 1.05rem 2.4rem; border: 1px solid var(--hg-dunkel); border-radius: 2px; background: var(--hg-dunkel); color: #fff; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease; } /* ⛔ MIT DER ID DAVOR, und das ist kein Schoenheitsfehler: Ein `