/* * Die Button-Varianten: blaue und orange Kachel, orange Handlungsfläche, helle * Karte, Sand-Zeile. Eine neue Variante braucht hier eine Regel * .spo-button-- und sonst nichts. * * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in * MenuStylesheets — Kaskade heißt, dass sie zählt. */ /* ---- Buttons ---- */ /* * Gemeinsame Grundlage aller Varianten. Alles hier und in den Varianten * kommt aus dem Design und ist im Backend nicht einstellbar – wer eine andere * Farbe braucht, wählt einen anderen Button-Typ. * * Das Aussehen kommt über Custom Properties herein und nicht als Wert an der * Variante: Grund, Schrift, Schatten und Rahmen stehen damit an *einer* Stelle, * und die Hover-Sperre am Ende dieser Datei kann sie wieder herstellen, ohne * sie ein zweites Mal hinzuschreiben. Zwei Sätze derselben Werte liefen * auseinander, sobald einer angepasst wird. */ .spo-button { display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; text-align: center; text-decoration: none; font-family: inherit; padding: var(--spo-button-padding, 0); border: var(--spo-button-border, 0); background: var(--spo-button-bg, transparent); color: var(--spo-button-fg, inherit); box-shadow: var(--spo-button-shadow, none); opacity: var(--spo-button-opacity, 1); } .spo-button-text { display: flex; flex-direction: column; gap: 2px; } .spo-button-label { font-size: calc(14px - var(--spo-text-shrink)); font-weight: 500; line-height: 1.2; letter-spacing: .02em; } /* * Die Kachel-Form des Designs: Innenabstand 14px, Icon über dem Text, alles * mittig. Zwei Varianten teilen sie — die blaue und die orange; unterschieden * sind sie nur durch Fläche und Schriftfarbe darunter. * * Deshalb steht die Form hier einmal und nicht zweimal: liefe sie auseinander, * wären es zwei verschiedene Kacheln im selben Raster. */ .spo-button--blue, .spo-button--orange-tile { flex-direction: column; gap: 10px; --spo-button-padding: 14px; /* * Die Kachel des Designs ist quadratisch, und das ist ihre Form und nicht * eine Höhe: wird die Spalte halb so breit, wird die Kachel halb so hoch und * bleibt ein Quadrat. Vorher kam die Höhe als Pixelwert von der Reihe * (85/122/166px) — ein Maß ohne Bezug zur Breite, und auf dem Telefon stand * eine 85px breite Kachel 166px hoch da. */ aspect-ratio: 1; } /* * Design: der Blau-Verlauf der Kacheln, weiße Schrift (--spo-tile-gradient). * * Hier stand, im Design gebe es genau einen Blau-Verlauf und die Kachel teile * ihn mit dem Band des Umschalters. Das war falsch: nachgemessen am Bild ist die * Kachel dunkler und ihr Verlauf steiler (oben #02527B, unten #04233F) als das * Band (#025F8D nach #003C6E). Die Zahlen stehen in tokens.css. */ .spo-button--blue { --spo-button-bg: var(--spo-tile-gradient); --spo-button-fg: #fff; } /* * Dieselbe Kachel in Orange, mit blauer Schrift. * * Das Paar Dunkelblau auf Orange kommt auf 5,4:1 und ist dasselbe, das das * Design für die Handlungsfläche und den CTA der Leiste verwendet. Weiß auf * diesem Orange wären 2,1:1. * * Der Verlauf ist hier der Schalter und nicht die Vorgabe: im Design ist das * Orange der Flächen flach, den Verlauf trägt allein die Buchen-Fläche der * Leiste (OrangeTileButtonTypeDefinition). Deshalb steht das flache Orange am * Grund und der Verlauf in der Regel darunter — umgekehrt zum Blau. */ .spo-button--orange-tile { --spo-button-bg: var(--spo-orange); --spo-button-fg: var(--spo-blue-dark); /* * 34px, vorgegeben und auf jeder Fläche dieselben — zehn mehr als die 24 der * blauen Kachel. Es ist die Größe, die das Design den beiden orangen Flächen * der Buchen-Ebene gibt ("Unterkünfte", "Erlebnis-Shop"). */ --spo-icon-size: 34px; } /* * Der blaue Button ohne Verlauf. * * Der Schalter steht im Design (`tileGradient`, Vorgabe an), und die flache * Fläche ist dort das dunkle Blau — nicht das hellere obere Ende des Verlaufs. * So stehen im Export die drei Kacheln unter den Meldungen der Live-Ebene. * * Die Regel steht nach .spo-button--blue, weil sie deren Grund überschreibt: * gleiche Spezifität, also zählt die Reihenfolge. */ .spo-button--blue.spo-button--flat { --spo-button-bg: var(--spo-blue-dark); } /* * Die orange Kachel *mit* Verlauf — die Klasse fehlt, wenn er an ist, denn beim * Orange ist Flach die Vorgabe. Genommen ist der Verlauf des Designs, der auf * der Buchen-Fläche der Leiste liegt (--spo-orange-gradient, tokens.css), damit * es im Menü nicht zwei verschiedene orange Verläufe gibt. */ .spo-button--orange-tile:not(.spo-button--flat) { --spo-button-bg: var(--spo-orange-gradient); } /* * Icon neben dem Text statt darüber — im Design der Warenkorb-Button der * Buchen-Ebene, dieselbe Fläche in der anderen Anordnung. Der Abstand bleibt * derselbe (gap: 10px aus der Form), mittig ist es über * align-items/justify-content der Grundlage schon. * * `flex-shrink: 0` am Icon: es ist eine Maske mit gesetzter Breite und hat keine * Eigengröße, die es verteidigen würde. Ohne die Zeile nimmt eine lange * Beschriftung ihm in der Zeile Breite weg, und aus dem Icon wird ein Streifen. * Senkrecht kann das nicht passieren, deshalb steht die Regel hier und nicht * bei der Variante. */ .spo-button--blue.spo-button--horizontal, .spo-button--orange-tile.spo-button--horizontal { flex-direction: row; } .spo-button--blue.spo-button--horizontal .spo-tile-icon, .spo-button--orange-tile.spo-button--horizontal .spo-tile-icon { flex-shrink: 0; } /* * Die Aufschrift der blauen Kachel läuft mit der Fensterbreite: 14px auf dem * Schreibtisch, 12px auf dem Telefon, dazwischen linear (tokens.css). Das ist * dieselbe Größe wie bei `.spo-tile` — der blaue Button *ist* im Frontend die * Kachel des Designs, `.spo-tile` trägt nur die Platzhalter der Plugins. * * Nicht in der waagerechten Anordnung: das ist im Design der Warenkorb-Knopf, * eine Zeile mit Icon daneben, und der behält seine 14px. */ .spo-button--blue:not(.spo-button--horizontal) .spo-button-label { font-size: var(--spo-text-tile); } /* * Die Aufschrift der orangen Kachel ist vorgegeben und läuft nicht mit: 15px, * Gewicht 500, Laufweite .01em, mittig. Ein fester Wert und keine Spanne — die * vier Angaben stehen so in der Vorgabe. * * Deshalb steht sie nicht in der Regel darüber: die mitlaufende Kachelgröße wäre * auf dem Telefon 12px, und das ist hier nicht gewollt. Auch die Laufweite ist * eine eigene: die gemeinsame Grundlage trägt .02em. * * `text-align: center` hat die Grundlage schon (.spo-button). Es steht hier noch * einmal, weil es Teil der Vorgabe ist und weil die Sperre gegen das Stylesheet * der Website nur Innenabstand und Rahmen zurückholt — eine Ausrichtung von * dort würde sie nicht bemerken. */ .spo-button--orange-tile .spo-button-label { font-size: calc(15px - var(--spo-text-shrink)); font-weight: 500; letter-spacing: .01em; text-align: center; } /* * Design: die orange Handlungsfläche des Menüs — im Export die Kachel mit * `isCta`, im Menü "Jetzt buchen". #FF9D2E, blaue Schrift, Icon über der * Beschriftung, darunter die zweite Zeile. * * Seitenverhältnis 2.08 und Schlagschatten trägt im Export die Kachel, in der * die Fläche liegt; hier stehen sie am Button, weil er selbst diese Kachel ist. * * Im Export liegt der Inhalt in einer eigenen Ebene über der Kachel * (position: absolute; inset: 0) — dort kann ein Bild darunter liegen. Der * Button hat keins, also ist die Fläche selbst der Flex-Container: dasselbe * Ergebnis mit einer Ebene weniger. * * Die zwei Spalten des Designs (grid-column: span 2) stehen bewusst nicht hier: * wie breit ein Element ist, entscheidet im Menü die Aufteilung seiner Reihe. */ .spo-button--orange { flex-direction: column; gap: 0; --spo-button-padding: 0 18px; aspect-ratio: 2.08; overflow: hidden; /* * Design: 28px – vier mehr als bei den übrigen Buttons. * * Im Export sitzt dieses 28px-Icon in einer 22px breiten Hülle und läuft * dort über den Rand hinaus; übernommen ist die Größe, die man sieht, und * nicht die Hülle, die man nicht sieht. */ --spo-icon-size: 28px; --spo-button-bg: var(--spo-orange); --spo-button-fg: var(--spo-blue-dark); --spo-button-shadow: 0 6px 16px rgba(45, 32, 10, .18); } /* * Design: 22px, Gewicht 400, Laufweite -.02em, Zeilenhöhe 1 — die große, * leichte Beschriftung der Handlungsfläche und nicht die 14px der übrigen * Buttons. */ .spo-button--orange .spo-button-label { /* 22px auf dem Schreibtisch, 18px auf dem Telefon (tokens.css) */ font-size: var(--spo-text-cta); font-weight: 400; letter-spacing: -.02em; line-height: 1; } /* * Die Abstände kommen im Design von den Zeilen selbst (4px unter dem Icon, 3px * über der zweiten Zeile) und nicht von einer Lücke des Flex-Containers. * Deshalb steht oben `gap: 0`: sonst käme beides zusammen. * * Volle Deckkraft: die .95 aus 50-grid.css sind die der Kachel-Icons, dieses * hier steht im Design ungedämpft. */ .spo-button--orange .spo-tile-icon { margin-bottom: 4px; opacity: 1; } .spo-button--orange .spo-button-text { gap: 0; } /* * Design: 14px, Gewicht 500, volle Deckkraft — hier gibt das Design die zweite * Zeile vor ("unsere besten Unterkünfte"), sie ist also nicht die gedämpfte * Nebenzeile der anderen Buttons (60-element.css). */ .spo-button--orange .spo-button-note { margin-top: 3px; /* 14px auf dem Schreibtisch, 11px auf dem Telefon (tokens.css) */ font-size: var(--spo-text-cta-note); font-weight: 500; opacity: 1; } /* * Design: helle Karte der Schnellzugriffe – Seitenverhältnis 87:71, Text * unten, blaue Schrift. */ .spo-button--white { flex-direction: column; justify-content: flex-end; gap: 8px; --spo-button-padding: 14px 8px; aspect-ratio: 87 / 71; --spo-button-bg: var(--spo-sand-card); --spo-button-fg: var(--spo-blue-dark); } /* * Design: die Angebots-Zeilen der Buchen-Ebene. Sandfläche mit Rahmen und * flachem Schatten, Icon links, Text daneben. * * Die einzige Variante, die eine Zeile ist und keine Kachel: deshalb steht hier * `justify-content: flex-start` gegen das `center` der Grundlage und * `text-align: left` gegen deren `center`. Ohne die beiden Zeilen stünde bei * kurzem Text die Gruppe aus Icon und Beschriftung mittig, und mehrere Zeilen * untereinander hätten ihre Icons an verschiedenen Stellen. * * Die Mindesthöhe ist eine Mindesthöhe und keine Höhe: zwei Zeilen Text sollen * die Fläche wachsen lassen. Ein Seitenverhältnis trägt diese Variante nicht — * sie ist eine Zeile und keine Kachel, ihre Höhe ist die ihres Textes. */ .spo-button--sand { justify-content: flex-start; gap: 12px; --spo-button-padding: 16px 15px; min-height: 62px; text-align: left; /* * Design: 30px — größer als die 24 der übrigen Buttons, weil das Icon hier * neben dem Text steht und nicht über ihm. * * Der Export ist bei diesen Zeilen nicht einheitlich (30, 28 und 26 px je * Eintrag); 30 ist der Wert der Mehrheit und der der Vorlage, aus der dieser * Baustein entstanden ist. Auf dem Telefon sind es dieselben Maße — die * Buchen-Ebene ist in beiden Vorlagen dieselbe. */ --spo-icon-size: 30px; --spo-button-bg: var(--spo-sand-warm); --spo-button-fg: var(--spo-blue-dark); --spo-button-shadow: 0 4px 12px rgba(60, 45, 15, .08); --spo-button-border: 1px solid rgba(120, 98, 55, .2); } /* * 14px mit engerer Laufweite. Der Export trägt hier 14,5px — die halbe Stufe ist * ausdrücklich abbestellt, die Zeile steht auf demselben Wert wie die Kacheln des * Schreibtischs. * * Die Laufweite bleibt die eigene: die gemeinsame Grundlage trägt .02em, hier * sind es -.01em, weil das Wort neben dem Icon steht und nicht darunter. */ .spo-button--sand .spo-button-label { font-size: calc(14px - var(--spo-text-shrink)); letter-spacing: -.01em; } /* * Das Icon schrumpft nicht mit: bei langem Text gäbe der Flex-Container ihm * sonst Breite weg, und aus dem 30px-Icon würde ein schmaler Streifen. * Volle Deckkraft wie im Export (die .95 aus 50-grid.css sind die der * Kachel-Icons). */ .spo-button--sand .spo-tile-icon { flex-shrink: 0; opacity: 1; } .spo-button--hidden { outline: 1px dashed rgba(0, 60, 110, .5); --spo-button-opacity: .4; } /* * Kein Hover. Auch dann nicht, wenn die Website einen hat. * * Die Buttons des Menüs kennen keinen Zeiger-Zustand: das Design zeigt sie in * einer Fassung, und eine zweite ist nicht vorgesehen. Bis hierher stand das * nur dadurch da, dass keine Regel es sagte — und das ist keine Zusage: das * Menü liegt im Seitentemplate einer Website, und deren * `a:hover { text-decoration: underline }` oder `button:hover { background: … }` * trifft diese Flächen mit, weil sie und