/* ══════════════════════════════════════════════════════════════════════ Storefront des LaStore. Die Werte stammen 1:1 aus Neue Webseite/website/assets/css/site.css — der Shop ist eigenständig, aber er ist dieselbe Marke. Abweichungen sind in design-system/lets-automate/pages/shop.md begründet und stehen nicht hier. Aeonik wird lokal ausgeliefert, wie auf www.letsautomate.ch. Als OTF und nicht als WOFF2, weil es die Dateien so gibt — WOFF2 wäre ein Drittel der Grösse und steht auf der Liste. Die Webfont-Lizenz ist ebenfalls offen; solange nur der Entwicklungsserver sie ausliefert, ist das folgenlos. ══════════════════════════════════════════════════════════════════════ */ @font-face { font-family:"Aeonik"; src:url("/fonts/Aeonik-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("/fonts/Aeonik-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Aeonik"; src:url("/fonts/Aeonik-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; } :root { --navy:#12316F; --navy-600:#1B4093; --navy-900:#0C1F47; --lime:#A1CA3B; --lime-600:#8CB32C; --lime-ink:#5A7A19; --lime-200:#DDECB4; --ink:#141414; --bg:#FFFFFF; --bg-soft:#F4F6FB; --bg-tint:#F5F9EC; --surface:#FFFFFF; --surface-2:#F8FAFD; --text:#141414; --text-strong:#0C1F47; --text-muted:#55606F; --border:#E3E8F1; --border-strong:#CBD4E3; --shadow-sm:0 1px 2px rgba(12,31,71,.06),0 2px 6px rgba(12,31,71,.05); --shadow-md:0 2px 4px rgba(12,31,71,.05),0 12px 28px -8px rgba(12,31,71,.14); --shadow-lg:0 4px 8px rgba(12,31,71,.05),0 32px 64px -24px rgba(12,31,71,.22); --on-navy:#EEF2FA; --on-navy-muted:#A9B8D6; --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --gutter:clamp(1.25rem,4vw,2.5rem); --container:1200px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --t-fast:140ms; --t:220ms; --t-slow:380ms; --ease:cubic-bezier(.22,.61,.36,1); --section-y:clamp(3rem,5vw,4.5rem); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0B1122; --bg-soft:#0F172C; --bg-tint:#111C2C; --surface:#131D34; --surface-2:#182444; --text:#E9EEF7; --text-strong:#FFFFFF; --text-muted:#9DAAC2; --border:#233250; --border-strong:#31456B; --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.28); --shadow-md:0 2px 6px rgba(0,0,0,.34),0 14px 32px -10px rgba(0,0,0,.6); --shadow-lg:0 6px 12px rgba(0,0,0,.4),0 36px 72px -28px rgba(0,0,0,.8); } } :root[data-theme="dark"] { --bg:#0B1122; --bg-soft:#0F172C; --bg-tint:#111C2C; --surface:#131D34; --surface-2:#182444; --text:#E9EEF7; --text-strong:#FFFFFF; --text-muted:#9DAAC2; --border:#233250; --border-strong:#31456B; --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.28); --shadow-md:0 2px 6px rgba(0,0,0,.34),0 14px 32px -10px rgba(0,0,0,.6); --shadow-lg:0 6px 12px rgba(0,0,0,.4),0 36px 72px -28px rgba(0,0,0,.8); } * { box-sizing: border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:"Aeonik","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } .container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } h1,h2,h3 { color:var(--text-strong); margin:0; text-wrap:balance; } h1 { font-size:clamp(2.35rem,1.5rem + 3.1vw,3.7rem); font-weight:700; line-height:1.04; letter-spacing:-.035em; } h2 { font-size:clamp(1.85rem,1.35rem + 1.9vw,2.6rem); font-weight:700; line-height:1.1; letter-spacing:-.03em; } h3 { font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem); font-weight:700; line-height:1.3; } p { margin:0; } /* Linkfarbe je Modus - ABER vollständig in :where() gekapselt, damit die Spezifität null ist. Ohne das gewann die Modusregel gegen .btn--primary und setzte lime auf den Lime-Knopf: gemessene 1.00:1, der Text war unsichtbar. Komponentenfarben müssen immer stärker sein als Modusregeln. */ :where(a) { color:var(--navy); } :where(:root[data-theme="dark"] a) { color:var(--lime); } @media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"]) a) { color:var(--lime); } } .lead { font-size:clamp(1.09rem,1.03rem + .4vw,1.3rem); line-height:1.6; color:var(--text-muted); max-width:62ch; } .muted { color:var(--text-muted); } .small { font-size:.9375rem; line-height:1.55; } .xsmall { font-size:.8125rem; line-height:1.5; } .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin-bottom:var(--sp-4); } .eyebrow::before { content:""; width:26px; height:2px; background:var(--lime); border-radius:2px; } :root[data-theme="dark"] .eyebrow { color:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color:var(--lime); } } .btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.9rem 1.5rem; border-radius:var(--r-pill); border:2px solid transparent; font:inherit; font-weight:700; font-size:1rem; letter-spacing:-.01em; cursor:pointer; min-height:52px; text-decoration:none; transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease), color var(--t) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease); } .btn:hover { transform:translateY(-2px); } .btn:active { transform:translateY(0); } .btn:focus-visible { outline:3px solid var(--navy); outline-offset:3px; } :root[data-theme="dark"] .btn:focus-visible { outline-color:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:focus-visible { outline-color:var(--lime); } } .btn--primary { background:var(--lime); color:var(--ink); box-shadow:0 6px 20px -8px rgba(161,202,59,.9); } .btn--primary:hover { background:var(--lime-600); } .btn--secondary { background:transparent; border-color:var(--border-strong); color:var(--text-strong); } .btn--secondary:hover { border-color:var(--navy); } .btn--sm { min-height:44px; padding:.6rem 1.1rem; font-size:.9375rem; } .btn svg { width:18px; height:18px; flex:none; } .iconbtn { width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-strong); cursor:pointer; transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease); } .iconbtn:hover { border-color:var(--navy); } .iconbtn:focus-visible { outline:3px solid var(--navy); outline-offset:2px; } .iconbtn svg { width:20px; height:20px; } /* ── Marke und Bedienelemente im Kopf ─────────────────────────────── */ .skip { position:absolute; left:-9999px; top:0; z-index:60; background:var(--surface); color:var(--text-strong); font-weight:700; padding:.7rem 1.1rem; border:2px solid var(--navy); border-radius:0 0 var(--r-sm) 0; } .skip:focus { left:0; } .brand { display:flex; align-items:center; text-decoration:none; color:var(--text-strong); } /* Die Wortmarke im Logo steht auf currentColor - deshalb folgt sie hier dem Textton des Modus. Das Lime im Bildzeichen ist im SVG festgelegt. */ .brand svg.brand__logo { height:34px; width:auto; display:block; } @media (min-width:760px) { .brand svg.brand__logo { height:40px; } } .top__tools { display:flex; align-items:center; gap:var(--sp-3); margin-inline-start:auto; } .top nav { margin-inline-start:var(--sp-6); } #theme .i-moon { display:none; } :root[data-theme="dark"] #theme .i-sun { display:none; } :root[data-theme="dark"] #theme .i-moon { display:block; } /* ── Fuss ─────────────────────────────────────────────────────────── */ .foot { border-top:1px solid var(--border); background:var(--bg-soft); padding-block:var(--sp-7) var(--sp-6); } .foot__grid { display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .foot h3 { font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--sp-3); } .foot ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .foot a { color:var(--text-muted); text-decoration:none; font-size:.9375rem; } .foot a:hover { color:var(--text-strong); text-decoration:underline; } .foot address { font-style:normal; color:var(--text-muted); font-size:.9375rem; line-height:1.7; } /* Die Höhe muss auf das SVG, nicht auf den Behälter: im Entwurf war .foot__logo das SVG selbst, hier ist es ein
darum. Ohne diese Regel zeichnet das SVG in seiner Eigengrösse — 2635 Einheiten breit — und läuft in die Adresszeile darunter. */ .foot__logo { margin-bottom:var(--sp-4); color:var(--text-strong); } .foot__logo svg { height:30px; width:auto; display:block; } .foot__bar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; border-top:1px solid var(--border); margin-top:var(--sp-6); padding-top:var(--sp-5); } .foot__legal { color:var(--text-muted); font-size:.875rem; } /* Das Label des Verbands wird nicht umgefärbt. Sein Rot liest sich in beiden Modi (4.35:1 auf Weiss, 4.32:1 auf dem dunklen Grund), also braucht es keine weisse Unterlage. */ .sms { display:flex; align-items:center; gap:var(--sp-3); } .sms img { height:34px; width:auto; display:block; } .sms span { font-size:.8125rem; color:var(--text-muted); max-width:22ch; line-height:1.45; } /* ── Kopf ─────────────────────────────────────────────────────────── */ .top { border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:20; } .top__in { display:flex; align-items:center; gap:var(--sp-6); min-height:76px; } /* Die Wortmarke ist Teil des SVG und kein Text daneben — font-weight und font-size hätten hier nichts zu tun. Sie standen in einer früheren Fassung mit Textwortmarke und sind entfernt. */ .brand { display:flex; align-items:center; text-decoration:none; color:var(--text-strong); } .top nav ul { list-style:none; display:flex; gap:var(--sp-5); margin:0; padding:0; align-items:center; } .top nav a { color:var(--text-muted); text-decoration:none; font-size:.9375rem; font-weight:500; } .top nav a[aria-current] { color:var(--text-strong); font-weight:700; } .top nav a:hover { color:var(--text-strong); } .count { background:var(--navy); color:#fff; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; padding:1px 7px; margin-inline-start:.35rem; font-variant-numeric:tabular-nums; } /* ── Hero-Slider ──────────────────────────────────────────────────── */ .hero { padding-block:var(--section-y); } .slider { position:relative; } .slider__viewport { overflow:hidden; border-radius:var(--r-lg); } .slider__track { display:flex; transition:transform 420ms var(--ease); } .slide { flex:0 0 100%; min-width:0; display:grid; gap:var(--sp-6); align-items:center; grid-template-columns:1fr; padding:clamp(1.5rem,4vw,2.75rem); background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-lg); } /* Text und Bild gleich breit. Vorher 1.15fr .85fr -- die Bildspalte bekam 42,5 Prozent und damit 424 Pixel, in die ein 1600 Pixel breiter Bildschirmabzug auf 26,5 Prozent geschrumpft wurde. Eine Schrift, die im Original 14 Pixel hoch war, wurde damit 3,7 Pixel hoch und zu grauem Brei. */ @media (min-width:820px) { .slide { grid-template-columns:1fr 1fr; } } .slide__art { display:grid; place-items:center; order:-1; } @media (min-width:820px) { .slide__art { order:0; } } .slide__art .logotile { width:clamp(132px,17vw,180px); aspect-ratio:1; display:block; filter:drop-shadow(0 20px 38px rgba(12,31,71,.22)); } .slide__art .logotile .logo { width:100%; height:100%; } /* ── Bildschirmbild im Rahmen ──────────────────────────────────────── Software verkauft sich mit Bildern. Der Rahmen ist bewusst ein Anwendungsfenster und kein Browserfenster: das Modul laeuft IN FreeScout, und eine Adresszeile wuerde etwas anderes behaupten. Die Flaechen darin sind gezeichnet und keine echten Aufnahmen - in einem Entwurf ist das ehrlicher als ein Bild, das spaeter nicht stimmt. Auf der echten Seite stehen hier product_media-Bilder. */ .shot { /* max-width war 520px und deckelte das Bild auch dort, wo die Spalte mehr hergäbe. Jetzt bestimmt die Spalte die Breite; die Grenze bleibt nur, weil ein Bildschirmabzug ab einer bestimmten Grösse nicht mehr besser wird, sondern nur noch mehr Bytes kostet. */ width:100%; max-width:720px; border-radius:var(--r-md); overflow:hidden; background:var(--bg); border:1px solid var(--border); box-shadow:0 24px 48px -18px rgba(12,31,71,.34); position:relative; } .shot__bar { display:flex; align-items:center; gap:.4rem; padding:.5rem .7rem; background:var(--bg-soft); border-bottom:1px solid var(--border); } .shot__dot { width:9px; height:9px; border-radius:50%; background:var(--border); flex:none; } .shot__title { font-size:.7rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); margin-inline-start:.35rem; } .shot__badge { position:absolute; inset-block-start:.5rem; inset-inline-end:.6rem; width:26px; height:26px; border-radius:7px; background:var(--bg); border:1px solid var(--border); background-size:cover; background-position:center; } .shot__body { padding:.75rem .8rem .9rem; display:grid; gap:.42rem; } .shot__row { display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center; padding:.42rem .55rem; border-radius:var(--r-sm); background:var(--bg-soft); font-size:.72rem; color:var(--text-muted); } .shot__row--head { background:transparent; padding-block:.1rem; font-weight:700; color:var(--text-strong); } .shot__row--hot { background:var(--bg-tint); color:var(--text-strong); font-weight:600; } .shot__num { font-variant-numeric:tabular-nums; color:var(--text-strong); font-weight:600; } .shot__pill { display:inline-block; padding:.06rem .4rem; border-radius:var(--r-pill); background:var(--lime-200); color:var(--lime-ink); font-size:.62rem; font-weight:700; } .shot__note { font-size:.66rem; color:var(--text-muted); padding-inline:.55rem; } /* ── Videofläche ───────────────────────────────────────────────────── Das Vorschaubild liegt hier, der Player nicht. Er entsteht erst beim Klick - vorher gibt es keine Verbindung zu YouTube und damit auch nichts, wofuer man eine Einwilligung braeuchte. */ .vid { position:relative; aspect-ratio:16/9; width:100%; max-width:520px; } .vid__poster { position:absolute; inset:0; border-radius:var(--r-md); overflow:hidden; background:linear-gradient(150deg,var(--navy-900),var(--navy) 62%,var(--navy-600)); border:1px solid var(--border); box-shadow:0 24px 48px -18px rgba(12,31,71,.34); } .vid__poster::after { content:""; position:absolute; inset:0; background: radial-gradient(120px 80px at 78% 22%, rgba(161,202,59,.32), transparent 70%), repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px); } .vid__play { position:absolute; inset:0; display:grid; place-items:center; gap:.5rem; background:transparent; border:0; cursor:pointer; color:#fff; border-radius:var(--r-md); align-content:center; } .vid__play:focus-visible { outline:3px solid var(--lime); outline-offset:3px; } .vid__disc { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:rgba(12,31,71,.72); border:2px solid rgba(255,255,255,.55); transition:transform .18s ease, background .18s ease; } .vid__play:hover .vid__disc { transform:scale(1.07); background:rgba(12,31,71,.86); } .vid__disc svg { width:24px; height:24px; margin-inline-start:3px; } .vid__label { font-size:.82rem; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.45); } .vid__hint { position:absolute; inset-block-end:.55rem; inset-inline:.7rem; font-size:.66rem; color:var(--on-navy-muted); text-align:center; line-height:1.35; } /* ── Bilderstreifen auf der Detailseite ──────────────────────────── */ .strip { display:grid; gap:var(--sp-4); margin-top:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:start; } .strip figure { margin:0; display:grid; gap:.5rem; } .strip .shot, .strip .vid { max-width:none; } .strip figcaption { font-size:.8rem; color:var(--text-muted); } /* ── Sprachwahl ─────────────────────────────────────────────────── */ .langpick { position:relative; display:inline-flex; align-items:center; } .langpick select { appearance:none; font:inherit; font-size:.875rem; font-weight:600; color:var(--text-strong); background:var(--bg); cursor:pointer; border:1px solid var(--border); border-radius:var(--r-sm); padding:.42rem 1.9rem .42rem .55rem; } .langpick select:focus-visible { outline:3px solid var(--navy); outline-offset:2px; } .langpick svg { position:absolute; inset-inline-end:.5rem; width:15px; height:15px; color:var(--text-muted); pointer-events:none; } /* ── Support ────────────────────────────────────────────────────── */ .support { background:var(--bg-soft); padding-block:var(--section-y); } /* Zwei Drittel Fragen, ein Drittel Ticket. minmax(0,…) und nicht 2fr/1fr allein: eine fr-Spalte ist mindestens so breit wie ihr laengster unteilbarer Inhalt. In den FAQ-Antworten stehen eine Tabelle und lange Wortzusammensetzungen -- ohne die 0 als Untergrenze schiebt eines davon die Spalte auf und der Teiler stimmt nicht mehr. Unter 900px eine Spalte: ein Drittel von 899px waere kein Formular mehr. */ .support__spalten { display:grid; gap:var(--sp-6); } /* Auf dem Telefon zuerst das Ticket, dann die Fragen. Einspaltig laege die Ticketbox sonst hinter zehn FAQ-Eintraegen -- gemessen etwa vier Bildschirmhoehen tief. Wer auf einer Support-Seite landet, will fragen oder lesen; das Fragen darf nicht das weiter entfernte von beiden sein. Nur die SICHTBARE Reihenfolge dreht sich. Im Markup bleiben die Fragen vorn, und in dieser Reihenfolge liest eine Vorlesesoftware sie auch -- inhaltlich ist das die richtige, hier verschiebt sich nur die Fläche. */ .support__seite { order:-1; } @media (min-width:900px) { .support__spalten { grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--sp-6); align-items:start; } .support__seite { order:0; } } /* Karten wie auf der Kasse -- die Klasse bleibt, weil checkout.blade.php sie benutzt. Auf der Support-Seite selbst gibt es sie seit dem 08.09.2026 nicht mehr. */ .support__card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-5); } .support__card h3 { margin:0 0 var(--sp-2); font-size:1.05rem; } .support__card p { margin:0; color:var(--text-muted); font-size:.9375rem; } .support__card a { font-weight:600; } /* Der Platzhalter fuers Ticketformular. Bauart wie .buybox auf der Kasse. */ .ticketbox { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); padding:var(--sp-5); box-shadow:var(--shadow-sm); } /* NICHT klebend -- und das ist eine Korrektur, keine Unterlassung. Bis zum 23.09.2026 stand hier position:sticky auf .support__seite. Das war richtig, solange in der Box drei Zeilen und ein Knopf standen: 300 Pixel, die beim Lesen der FAQ mitwandern. Seit dort das Ticketformular steht, ist die Box 980 Pixel hoch -- gemessen bei 1440x900, also hoeher als der Bildschirm. Sticky haelt ein Element an top:96px fest; was unten herausragt, ist damit nicht mehr erreichbar, und das Untere sind hier das Dateifeld und der Senden-Knopf. Heute faellt das nicht auf: die FAQ-Spalte ist kuerzer als das Formular, also gibt es gar keine Strecke, auf der etwas kleben koennte. Es faellt erst auf, wenn jemand ueber die Veroeffentlichungsschnittstelle FAQ- Eintraege ergaenzt -- und dann sucht er den Grund in der FAQ und nicht hier. Deshalb weg, bevor es soweit ist. */ .ticketbox h2 { margin:0 0 var(--sp-3); font-size:1.35rem; } /* Der Abstand zwischen «SUPPORT-TICKET» und «Ticket eröffnen». .eyebrow bringt ihn selbst mit (margin-bottom:var(--sp-4)) -- hier stand er trotzdem auf 0, gemessen. Der Grund ist .ticketbox p { margin:0 } eine Zeile weiter unten: zwei Klassen gegen eine, die Kartenregel gewinnt gegen die Bauteilregel. In der FAQ-Spalte, wo dieselbe Klasse an derselben Stelle steht, sind es 16 Pixel. Zwei Klassen im Selektor, damit es nicht noch einmal passiert. */ .ticketbox .eyebrow { margin-bottom:var(--sp-3); } .ticketbox p { margin:0; color:var(--text-muted); font-size:.9375rem; line-height:1.6; } .ticketbox hr { border:0; border-top:1px solid var(--border); margin-block:var(--sp-5); } .ticketbox__hinweis { font-size:.875rem; } /* ── Das Ticketformular aus dem FormBuilder ────────────────────── Das eingebettete Formular bringt ABSICHTLICH kein Stylesheet mit: es soll das Design der Wirtsseite übernehmen. Der Server liefert nur Markup mit kurzen ff-Klassen; wie es aussieht, wird hier entschieden. Ohne diesen Block stünden in der Box Browser-Standardfelder -- graue Kästchen in Times, mitten in Aeonik. Das ist kein Schönheitsfehler: ein Formular, das aussieht wie von einer anderen Seite, wirkt wie eines, dem man seine Mailadresse nicht gibt. Die Klassen sind unter .ticketbox gebunden. Steht das Formular später irgendwo sonst im Shop, braucht es dort eigene Regeln -- das ist gewollt: die Felder sollen sich ihrer Umgebung anpassen, nicht umgekehrt. */ .ticketbox { /* Zwei eigene Töne, weil der Shop keine semantischen Farben hat. Grün ist das Lime der Marke in seiner lesbaren Fassung -- auf Weiss hat das helle Lime als Textfarbe keine 2:1. */ --ff-bad:#B3261E; --ff-ok:var(--lime-ink); } :root[data-theme="dark"] .ticketbox { --ff-bad:#F2B8B5; --ff-ok:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ticketbox { --ff-bad:#F2B8B5; --ff-ok:var(--lime); } } .ticketbox__formular { margin-top:var(--sp-4); } .ticketbox .ff { display:grid; gap:var(--sp-4); } .ticketbox .ff-fields { display:grid; gap:var(--sp-4); } /* «Mit * markierte Felder sind Pflichtfelder.» -- eine Fussnote, die oben steht, weil sie erst dort nützt. */ .ticketbox .ff-hint { font-size:.8125rem; color:var(--text-muted); } .ticketbox .ff-row { display:grid; gap:var(--sp-2); } .ticketbox .ff-label { font-size:.875rem; font-weight:600; color:var(--text-strong); line-height:1.4; } /* Der Stern trägt keine Aussage allein -- required und aria-required stehen im Markup. Er ist die zweite Spur, deshalb darf er auffallen. */ .ticketbox .ff-req { margin-inline-start:.2em; color:var(--ff-bad); } .ticketbox .ff-in, .ticketbox .ff-ta, .ticketbox .ff-sel { width:100%; font:inherit; font-size:.9375rem; color:var(--text); background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:.65rem .8rem; transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .ticketbox .ff-ta { resize:vertical; min-height:7rem; line-height:1.6; } /* appearance:none nimmt dem Auswahlfeld den Systemlook -- sonst steht ein macOS-Knopf zwischen zwei Aeonik-Feldern. Der Pfeil kommt als Hintergrund, nicht als SVG-Element: er gehört zum Feld, nicht ins Markup. */ .ticketbox .ff-sel { appearance:none; cursor:pointer; padding-inline-end:2.2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355606F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; background-size:15px; } .ticketbox .ff-in:focus-visible, .ticketbox .ff-ta:focus-visible, .ticketbox .ff-sel:focus-visible { outline:3px solid var(--navy); outline-offset:1px; border-color:var(--navy); } :root[data-theme="dark"] .ticketbox .ff-in:focus-visible, :root[data-theme="dark"] .ticketbox .ff-ta:focus-visible, :root[data-theme="dark"] .ticketbox .ff-sel:focus-visible { outline-color:var(--lime); border-color:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ticketbox .ff-in:focus-visible, :root:not([data-theme="light"]) .ticketbox .ff-ta:focus-visible, :root:not([data-theme="light"]) .ticketbox .ff-sel:focus-visible { outline-color:var(--lime); border-color:var(--lime); } } /* Das Dateifeld. Der Systemknopf darin lässt sich nicht erben -- also bekommt er wenigstens dieselbe Form wie alles andere. */ .ticketbox .ff-in[type="file"] { padding:.5rem .6rem; font-size:.875rem; cursor:pointer; } .ticketbox .ff-in[type="file"]::file-selector-button { font:inherit; font-size:.8125rem; font-weight:600; cursor:pointer; margin-inline-end:.7rem; padding:.4rem .8rem; color:var(--text-strong); background:var(--bg-soft); border:1px solid var(--border-strong); border-radius:var(--r-pill); } /* Auswahlgruppen und die Einwilligung. */ .ticketbox .ff-fs { border:0; margin:0; padding:0; display:grid; gap:var(--sp-2); } .ticketbox .ff-lg { padding:0; font-size:.875rem; font-weight:600; color:var(--text-strong); } .ticketbox .ff-opt, .ticketbox .ff-consent { display:flex; align-items:start; gap:.6rem; font-size:.9375rem; line-height:1.5; cursor:pointer; } .ticketbox .ff-opt input, .ticketbox .ff-consent input { margin:.2rem 0 0; width:18px; height:18px; flex:none; accent-color:var(--navy); } /* Ein Feld, das der Server bemängelt hat. Rahmen UND Text -- die Farbe allein sagt einem Rot-Grün-Auge nichts. */ .ticketbox .ff-bad .ff-in, .ticketbox .ff-bad .ff-ta, .ticketbox .ff-bad .ff-sel { border-color:var(--ff-bad); } .ticketbox .ff-err { font-size:.8125rem; font-weight:600; color:var(--ff-bad); } /* Die Fehlerübersicht oben. Sie bekommt den Fokus, wenn der Server ablehnt -- deshalb muss man sehen, wo er gelandet ist. */ .ticketbox .ff-errors { border:1px solid var(--ff-bad); border-inline-start-width:4px; border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4); font-size:.875rem; color:var(--ff-bad); } .ticketbox .ff-errors:focus-visible { outline:3px solid var(--ff-bad); outline-offset:2px; } .ticketbox .ff-errors ul { margin:var(--sp-2) 0 0; padding-inline-start:1.1rem; } /* Überschriften und Absätze, die im Formular selbst stehen können. */ .ticketbox .ff-h { font-size:1.05rem; margin:var(--sp-2) 0 0; } .ticketbox .ff-p { font-size:.9375rem; color:var(--text-muted); } /* Der Absendeknopf trägt keine .btn-Klasse -- das Markup kommt vom Modul und weiss nichts von unseren Klassennamen. Also hier dasselbe Aussehen. */ .ticketbox .ff-send { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:.9rem 1.5rem; font:inherit; font-weight:700; font-size:1rem; letter-spacing:-.01em; cursor:pointer; color:var(--ink); background:var(--lime); border:2px solid transparent; border-radius:var(--r-pill); box-shadow:0 6px 20px -8px rgba(161,202,59,.9); transition:background-color var(--t) var(--ease),transform var(--t-fast) var(--ease); } .ticketbox .ff-send:hover { background:var(--lime-600); transform:translateY(-2px); } .ticketbox .ff-send:active { transform:translateY(0); } .ticketbox .ff-send:focus-visible { outline:3px solid var(--navy); outline-offset:3px; } :root[data-theme="dark"] .ticketbox .ff-send:focus-visible { outline-color:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ticketbox .ff-send:focus-visible { outline-color:var(--lime); } } /* Während des Sendens: der Knopf ist aus und sagt «Wird gesendet …». Ohne sichtbaren Unterschied klickt jemand ein zweites Mal, und dann liegen zwei Tickets im Postfach. */ .ticketbox .ff-send:disabled { opacity:.55; cursor:default; } .ticketbox .ff-send:disabled:hover { background:var(--lime); transform:none; } /* Die Meldung nach dem Absenden. Bei Erfolg ist sie das EINZIGE, was noch in der Box steht -- das Formular ist dann weg. Sie darf also nicht wie eine Randnotiz aussehen. */ .ticketbox .ff-msg { margin:0; font-size:.9375rem; font-weight:600; line-height:1.6; border-radius:var(--r-sm); padding:var(--sp-4); } .ticketbox .ff-msg:focus-visible { outline:3px solid var(--navy); outline-offset:2px; } .ticketbox .ff-msg-ok { color:var(--ff-ok); background:var(--bg-tint); border:1px solid var(--lime); } .ticketbox .ff-msg-error { color:var(--ff-bad); background:var(--bg-soft); border:1px solid var(--ff-bad); } /* Der Fehlerfall lässt das Formular STEHEN und schiebt die Meldung davor. Getippte Sätze verschwinden dabei nicht -- jemand tippt sie kein zweites Mal. Hier nur der Abstand dafür. */ .ticketbox .ff-msg-error { margin-bottom:var(--sp-4); } /* Der Weg für alle, bei denen das Formular nicht ankommt. */ .ticketbox__weg { font-size:.875rem; } .ticketbox__weg a { font-weight:600; } /* ── Anleitungen ────────────────────────────────────────────────── */ /* Der Abschnittskopf ist auf 64ch begrenzt -- fuer Lesetexte richtig, fuer eine Ueberschrift zu eng: "Anleitungen zu den Modulen" braucht einzeilig 737 Pixel bei 680 verfuegbaren, im 1200 breiten Behaelter. Der Einstiegstext behaelt seine Lesebreite ueber sein eigenes max-width. ZWEI Klassen im Selektor, und das ist nicht Zierde: .section-head steht weiter unten im Stilblatt, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Mit .section-head--weit allein blieb max-width auf 680 -- gemessen, nicht vermutet. Dieselbe Falle wie beim Deckel des Hero-Bildes, zwei Stunden vorher. */ .section-head.section-head--weit { max-width:none; } /* Der Schnellstart. Sieht anders aus als die Liste, weil er etwas anderes ist: ohne LaStore installiert man kein gekauftes Modul auf Knopfdruck. Akzent links, damit die Reihenfolge auch ohne Farbe erkennbar bleibt. */ .schnellstart { display:flex; align-items:center; gap:var(--sp-5); text-decoration:none; background:var(--bg); border:1px solid var(--border); border-inline-start:4px solid var(--lime); border-radius:var(--r-md); padding:var(--sp-5); margin-bottom:var(--sp-5); box-shadow:var(--shadow-sm); } .schnellstart:hover .schnellstart__name { text-decoration:underline; } .schnellstart:focus-visible { outline:3px solid var(--navy); outline-offset:3px; } .schnellstart__bild { flex:0 0 auto; width:104px; height:104px; border-radius:var(--r-sm); object-fit:cover; object-position:center; background:var(--bg-soft); border:1px solid var(--border); } .schnellstart__bild--leer { display:flex; align-items:center; justify-content:center; background:var(--bg-tint); color:var(--navy); } .schnellstart__bild--leer svg { width:52px; height:52px; } .schnellstart__wort { min-width:0; } .schnellstart__eyebrow { display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .schnellstart__name { display:block; margin-top:.1rem; font-size:1.35rem; font-weight:800; letter-spacing:-.01em; color:var(--text-strong); } .schnellstart__text { display:block; margin-top:.35rem; color:var(--text-muted); font-size:.9375rem; line-height:1.55; max-width:64ch; } @media (max-width:560px) { .schnellstart { align-items:flex-start; gap:var(--sp-3); } .schnellstart__bild { width:72px; height:72px; } .schnellstart__bild--leer svg { width:38px; height:38px; } .schnellstart__name { font-size:1.15rem; } } /* Der LaStore-Kasten: im Laden ueber dem Katalog, im Warenkorb und an der Kasse als Erstes. Kein Kaufknopf und kein Preis -- es kostet nichts, und eine Position in der Bestellung waere es faelschlich. */ .lastorebox { display:flex; align-items:flex-start; gap:var(--sp-5); background:var(--bg-tint); border:1px solid var(--border); border-inline-start:4px solid var(--lime); border-radius:var(--r-md); padding:var(--sp-5); margin-bottom:var(--sp-6); } .lastorebox__bild { flex:0 0 auto; width:88px; height:88px; border-radius:var(--r-sm); object-fit:cover; object-position:center; background:var(--bg); border:1px solid var(--border); } .lastorebox__bild--leer { display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--navy); } .lastorebox__bild--leer svg { width:44px; height:44px; } .lastorebox__wort { min-width:0; } .lastorebox__eyebrow { margin:0; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .lastorebox__titel { margin:.1rem 0 0; font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:var(--text-strong); } .lastorebox__text { margin:.35rem 0 0; color:var(--text-muted); font-size:.9375rem; line-height:1.55; max-width:64ch; } /* Knopf und Verweis nebeneinander, mit Abstand und umbruchfaehig: auf dem Telefon stehen sie sonst gequetscht in einer Zeile. */ .lastorebox__wege { margin:var(--sp-4) 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); } .lastorebox__wege a:not(.btn) { font-weight:600; font-size:.9375rem; } @media (max-width:560px) { .lastorebox { gap:var(--sp-3); padding:var(--sp-4); } .lastorebox__bild { width:64px; height:64px; } .lastorebox__bild--leer svg { width:34px; height:34px; } } /* Eine Liste und kein Kachelraster: die Einträge sind gleichrangig und werden gelesen, nicht verglichen. Ein Raster verspricht einen Unterschied, den es hier nicht gibt. */ .anleitungen { list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); max-width:56rem; } .anleitungen__item { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-3); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); } /* Der ganze Block ist der Verweis, nicht nur der Name -- ein Ziel von 40 Pixeln Hoehe trifft man auch mit dem Daumen. Das Symbol liegt mit drin: ein Bild, das aussieht wie ein Knopf, soll auch einer sein. */ .anleitungen__link { flex:1 1 24rem; min-width:0; text-decoration:none; display:flex; align-items:center; gap:var(--sp-4); } /* Das Symbol traegt die Liste. Mit dem Auge findet man ein Bild schneller als eine Zeile Text -- bei acht Modulen ist das bequem, bei dreissig ist es der Unterschied zwischen Finden und Suchen. QUADRATISCH, obwohl die Vorlagen 640x360 sind. object-fit:cover schneidet dafuer links und rechts ab -- das geht, weil die Grafik in allen sieben Vorlagen mittig sitzt und in der Hoehe Platz laesst; nachgesehen wurde jedes einzelne. object-position bleibt bewusst auf center: waere die Grafik in einer neuen Vorlage nicht mittig, faellt es hier auf und nicht erst beim Kunden. flex-shrink:0, damit ein langer Name das Symbol nicht schmaler zieht. */ .anleitungen__bild { flex:0 0 auto; width:88px; height:88px; border-radius:var(--r-sm); object-fit:cover; object-position:center; background:var(--bg-soft); border:1px solid var(--border); } /* Kein Bild hinterlegt: ruhige Flaeche mit dem Anfangsbuchstaben. Eine Luecke im Raster sieht nach einem Fehler aus. */ .anleitungen__bild--leer { display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem; color:var(--text-muted); background:var(--bg-tint); } .anleitungen__wort { min-width:0; } .anleitungen__name { display:block; font-weight:700; color:var(--text-strong); } .anleitungen__link:hover .anleitungen__name { text-decoration:underline; } .anleitungen__text { display:block; margin-top:.15rem; color:var(--text-muted); font-size:.9375rem; line-height:1.5; } /* Auf dem Telefon kleiner, aber nicht weg: es ist der Grund, warum die Liste mit dem Auge durchsuchbar ist. */ @media (max-width:560px) { .anleitungen__bild { width:64px; height:64px; } /* Oben statt mittig: schmal bricht die Beschreibung auf acht Zeilen um, und ein mittig ausgerichtetes Symbol schwebt dann irgendwo in der Zeile statt neben dem Namen zu stehen. Breit sind es zwei bis drei Zeilen, dort ist mittig richtig. */ .anleitungen__link { gap:var(--sp-3); align-items:flex-start; } } .anleitungen__produkt { flex:0 0 auto; font-size:.875rem; font-weight:600; } /* "Anleitung folgt" ist kein Verweis und sieht auch nicht wie einer aus: der Eintrag fuehrt dann auf die Produktseite, und das steht am Namen. Ein zweiter Verweis daneben, der aussieht wie einer und keiner ist, waere genau die Sorte Knopf, die nichts tut. */ .anleitungen__offen { flex:0 0 auto; font-size:.8125rem; color:var(--text-muted); border:1px dashed var(--border-strong, var(--border)); border-radius:var(--r-pill); padding:.15rem .6rem; white-space:nowrap; } .anleitungen__link:focus-visible, .anleitungen__produkt:focus-visible { outline:3px solid var(--navy); outline-offset:3px; border-radius:4px; } .slide h1 { font-size:clamp(1.9rem,1.3rem + 2.2vw,2.85rem); } .slide .lead { margin-top:var(--sp-4); max-width:48ch; } .slide__actions { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); align-items:center; } .slide__price { font-weight:700; color:var(--text-strong); font-size:1.15rem; font-variant-numeric:tabular-nums; } .slide__price small { font-weight:400; color:var(--text-muted); font-size:.85rem; } .mark { position:relative; white-space:nowrap; } .mark::after { content:""; position:absolute; inset-inline:-.12em; bottom:.08em; height:.42em; background:var(--lime); opacity:.42; z-index:-1; border-radius:2px; } .badge-new { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .65rem; border-radius:var(--r-sm); background:var(--lime-200); color:#31450C; margin-bottom:var(--sp-4); } :root[data-theme="dark"] .badge-new { background:rgba(161,202,59,.18); color:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-new { background:rgba(161,202,59,.18); color:var(--lime); } } .slider__bar { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap; } .dots { display:flex; gap:.4rem; margin-inline:auto; } .dot { width:44px; height:44px; display:grid; place-items:center; border:0; background:none; cursor:pointer; padding:0; } .dot::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--border-strong); transition:background-color var(--t) var(--ease),transform var(--t) var(--ease); } .dot[aria-current="true"]::before { background:var(--navy); transform:scale(1.35); } :root[data-theme="dark"] .dot[aria-current="true"]::before { background:var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot[aria-current="true"]::before { background:var(--lime); } } .dot:focus-visible { outline:3px solid var(--navy); outline-offset:0; border-radius:var(--r-sm); } /* ── Katalog ───────────────────────────────────────────────────────── */ .catalog { padding-block:0 var(--section-y); } .section-head { max-width:64ch; margin-bottom:var(--sp-6); } /* Ueberschriften haben margin:0, und .lead hatte keinen oberen Abstand -- der Einstiegstext klebte damit an der Ueberschrift. Auf einer Zeile faellt das kaum auf, bei drei Zeilen sehr: auf der Support-Seite bricht die Ueberschrift im Deutschen dreizeilig, und der naechste Satz begann ohne Luecke. .slide .lead hatte diesen Abstand seit je -- nur die Abschnittsköpfe nicht. */ .section-head .lead { margin-top:var(--sp-4); } .chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-6); } .chip { font:inherit; font-size:.9375rem; cursor:pointer; min-height:44px; padding:.5rem 1.1rem; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); color:var(--text-muted); } .chip[aria-pressed="true"] { border-color:var(--navy); color:var(--text-strong); font-weight:700; background:var(--bg-tint); } .chip:focus-visible { outline:3px solid var(--navy); outline-offset:2px; } .grid { display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } /* Produktkarte nach dem Muster von .postcard aus site.css: Bild als 16:9-Band am oberen Rand, Radius --r-xl, Bild zoomt bei Hover. Bewusst dieselbe Form wie die Blogkarten - der Shop bringt kein zweites Kartenmuster in die Seite. Die ganze Karte ist anklickbar, aber KEIN um die Karte: ein