/* =========================================================================== Ankauf-Funnel im Shopify-Theme — Plan 0065, S-1. **Die Farben gehören dem Theme.** Der Funnel hat eigene Namen (`--paper`, `--ink`, `--fill` …) und genau eine Stelle, an der sie gefüllt werden: aus `assets/tp-tokens.css` des Themes, das seine Tokens am `` unter `[data-tptheme]` führt und mit dem Umschalter im Kopf zwischen Hell und Dunkel wechselt. Hinter jedem Theme-Namen steht ein Rückfallwert — das Netz für den Fall, dass der Funnel ohne `tp-tokens.css` im Shop landet. Drei Regeln, die hier nicht gebrochen werden: 1. **Alles unter `.tpa`** — wie `.bb-root` im alten Fragment. Das Theme gehört dem Shop; dieses Fragment färbt nichts außerhalb seiner Wurzel. 2. **Keine Schrift wird geladen.** Plus Jakarta Sans kommt vom Theme; fehlt sie, greift die Systemschrift. Ein `@font-face` hier wäre ein zweiter Download derselben Datei (Mockup-Lücke b). 3. **Kein `shopcloud-ui`.** Das Entwurfssystem der Konsole gehört nicht in den Shop; was hier wie eine Komponente aussieht, ist Markup. =========================================================================== */ .tpa { /* Die Schrift-Rampe: vier Stufen, vier Theme-Tokens. Für Fließtext gibt es keinen eigenen Namen im Theme — `--nav` ist die stärkste Stufe unter der Überschriftfarbe (dort die Kopfzeilen-Links), die borgen wir uns. */ --paper: var(--color-page, #fff); --ink: var(--color-text, #0e1726); --ink2: var(--nav, #44546a); --ink3: var(--color-muted, #5a6b82); --ink4: var(--color-muted-2, #636e7c); --soft: var(--surface-2, #eef2f8); --soft2: var(--surface, #f6f8fc); --line: var(--divider, rgba(20,42,82,.12)); /* Die feine Trennlinie **innerhalb** einer Karte: dieselbe Linie, schwächer. */ --line2: color-mix(in oklab, var(--line) 55%, transparent); /* **Schreiben und Tragen sind zwei Rollen.** Der Hauptknopf war eine `--ink`-Fläche mit festem weißem Text — jetzt, wo `--ink` mit dem Theme umschlägt, wäre er im Dunkeln weiß auf weiß. `--fill` ist die Marken-Handlungsfarbe des Themes: Blau im Hellen, Grün im Dunkeln. */ --fill: var(--cta-bg, #1d4b8e); --on-fill: var(--cta-fg, #fff); /* Der Hinweiston bleibt **blau**, in beiden Modi — die Akzentfarbe des Themes ist im Dunkeln exakt die Farbe von `--ok`, Hinweis und Erfolg sähen gleich aus. Das Marken-Blau allein trägt nur auf einer Fläche (`--tp-blue-bright` 4,4:1 auf Weiß, `--tp-blue` 1,9:1 auf Dunkel); die Mischung mit `--ink` zieht im Hellen ins Tiefe, im Dunkeln ins Helle, weil `--ink` selbst umschaltet. */ --blue: color-mix(in oklab, var(--tp-blue-bright, #3a78d6) 70%, var(--ink)); --ok: var(--success, #2f9e54); --bad: var(--danger, #c2362f); /* Warnton: das Theme führt Orange als Textfarbe themeabhängig. */ --warn: var(--tp-orange-text, #b85c00); /* Die blassen Flächen hinter den Signalfarben entstehen **aus** ihnen, gemischt auf die Seitenfläche — im Dunkeln also dunkel. Feste Pastelltöne waren der Grund, warum die Seite vorher nur hell konnte. */ --blue-soft: color-mix(in oklab, var(--blue) 14%, var(--paper)); --ok-soft: color-mix(in oklab, var(--ok) 14%, var(--paper)); --warn-soft: color-mix(in oklab, var(--warn) 14%, var(--paper)); --bad-soft: color-mix(in oklab, var(--bad) 14%, var(--paper)); --r-btn: var(--r-md, 14px); --r-card: var(--r-md, 14px); --r-in: var(--r-sm, 10px); --f: var(--ff, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif); /* Der eigene Seitenrand als Wert: die klebende Preisleiste zieht ihn negativ wieder heraus und läuft damit über die ganze Breite. */ --pad: 1.5rem; font-family: var(--f); /* **Die Luft oben gehört hierher und nicht auf die Seite** (Befund K1). Sie stand vorher in der Fortschrittsleiste — wer keine hat (die Codetür, „Geschlossen", die Sackgassen), klebte unter der Shop-Navigation, und vier Seiten flickten es mit einem eigenen `padding-top` im Markup. Eine Wurzel, ein Wert, jede Seite gleich. */ padding: 1.6rem var(--pad) 2.5rem; line-height: 1.5; color: var(--ink); } .tpa *, .tpa *::before, .tpa *::after { box-sizing: border-box } .tpa h1, .tpa h2, .tpa h3, .tpa h4, .tpa p, .tpa ul, .tpa ol, .tpa dl, .tpa figure { margin: 0 } .tpa a { color: inherit } .tpa button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer } .tpa input, .tpa textarea, .tpa select { font: inherit; color: inherit } .tpa .wrap { max-width: 980px; margin: 0 auto } .tpa .wrap-n { max-width: 720px; margin: 0 auto } /* --- Bausteine ----------------------------------------------------------- */ .tpa .eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4) } .tpa .h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.12 } .tpa .h2 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em } .tpa .h3 { font-size: .95rem; font-weight: 700 } .tpa .title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: .3rem 0 .9rem } .tpa .lead { font-size: 1rem; color: var(--ink2) } .tpa .small { font-size: .8rem; color: var(--ink3) } .tpa .tiny { font-size: .72rem; color: var(--ink4) } .tpa .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em } .tpa .mt { margin-top: .9rem } .tpa .mb { margin-bottom: .9rem } .tpa .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--r-btn); padding: .85rem 1.4rem; font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .15s, color .15s, border-color .15s } .tpa .btn-p { background: var(--fill); color: var(--on-fill); border: 0 } .tpa .btn-p:hover { filter: brightness(1.08) } /* Der zweite Knopf ist durchsichtig, nicht weiß — genau wie im Theme (`--color-secondary-button-background: transparent` in der Bridge): eine weiße Fläche stünde im Dunkeln als Leuchtfleck da. */ .tpa .btn-s { background: transparent; color: var(--ink); border: 1px solid var(--ink) } .tpa .btn-s:hover { background: color-mix(in oklab, var(--ink) 8%, transparent) } .tpa .btn-q { background: transparent; color: var(--ink2); border: 1px solid var(--line) } .tpa .btn-q:hover { border-color: var(--ink3) } .tpa .btn-sm { padding: .55rem 1rem; font-size: .82rem } .tpa .btn[disabled], .tpa .btn[aria-disabled="true"] { background: var(--soft); color: var(--ink4); border-color: var(--line); cursor: not-allowed; pointer-events: none } .tpa .btn-row { display: flex; gap: .7rem; flex-wrap: wrap } .tpa .card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper) } .tpa .card-p { padding: 1.1rem 1.2rem } .tpa .card-h { padding: .75rem 1.2rem; border-bottom: 1px solid var(--line2); display: flex; align-items: center; justify-content: space-between; gap: .75rem } .tpa .card-h .h3 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); font-weight: 700 } .tpa .pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .2rem .6rem; font-size: .7rem; font-weight: 700; background: var(--soft); color: var(--ink2) } .tpa .pill-ok { background: var(--ok-soft); color: var(--ok) } .tpa .pill-bad { background: var(--bad-soft); color: var(--bad) } /* C ist kein Grund für Grün, „defekt" erst recht nicht (Befund K8). */ .tpa .pill-warn { background: var(--warn-soft); color: var(--warn) } /* Der Ampelpunkt steht **nur** an Zustandsabzeichen: ein Punkt an jeder Pille wäre Dekoration, hier ist er die Farbe noch einmal für alle, die sie nicht unterscheiden. */ .tpa .pill-ok::before, .tpa .pill-warn::before, .tpa .pill-bad::before { content: ""; width: .44rem; height: .44rem; border-radius: 999px; background: currentColor; opacity: .75 } .tpa .banner { display: flex; gap: .7rem; padding: .8rem 1rem; border-radius: var(--r-card); font-size: .85rem; line-height: 1.45; border: 1px solid } .tpa .banner b { display: block; font-weight: 700; margin-bottom: .1rem } .tpa .banner-info { background: var(--blue-soft); border-color: color-mix(in oklab, var(--blue) 35%, transparent); color: var(--blue) } .tpa .banner-bad { background: var(--bad-soft); border-color: color-mix(in oklab, var(--bad) 35%, transparent); color: var(--bad) } .tpa .banner-ok { background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 35%, transparent); color: var(--ok) } .tpa .banner-mute { background: var(--soft); border-color: var(--line); color: var(--ink2) } .tpa .banner ul { margin: .4rem 0 0; padding-left: 1.1rem } .tpa .banner a { font-weight: 700 } /* Stepper */ /* Die Brotkrumenleiste (Plan 0074, Nachtrag) — der Rückweg, den bis dahin keine Seite hatte. Kein eigenes Farbkonzept: dieselben Stufen der Textrampe, die `small` und `tiny` schon benutzen. Das Trennzeichen ist ein `::before` und kein Text — als Text läse ein Vorleseprogramm „Startseite größer als Ankauf" mit vor. Die Zeile darf umbrechen (`flex-wrap`), damit sie auf schmalen Geräten nicht seitlich hinausläuft. */ .tpa .krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .72rem; color: var(--ink4) } .tpa .krumen li { display: flex; align-items: center; gap: .2rem .45rem } .tpa .krumen li + li::before { content: "\203A"; color: var(--line) } .tpa .krumen a { color: var(--ink3); text-decoration: none } .tpa .krumen a:hover { color: var(--ink); text-decoration: underline } .tpa .krumen [aria-current="page"] { color: var(--ink2); font-weight: 700 } .tpa .step { display: flex; align-items: center; gap: .45rem; padding: 0 0 1.1rem; flex-wrap: wrap } .tpa .step-i { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; color: var(--ink4) } .tpa .step-i i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--line); font-style: normal; font-size: .68rem; background: var(--paper) } .tpa .step-i.is-done { color: var(--ink2) } .tpa .step-i.is-done i { background: var(--fill); border-color: var(--fill); color: var(--on-fill) } .tpa .step-i.is-on { color: var(--ink) } .tpa .step-i.is-on i { border-color: var(--fill); border-width: 2px; color: var(--ink) } .tpa .step-x { width: 16px; height: 1px; background: var(--line) } /* Erledigte Schritte sind Rückwege (Plan 0079, G14) — als `` gerendert, ohne Unterstreichung, weil die Leiste eine Leiste bleibt. */ .tpa a.step-i { text-decoration: none; cursor: pointer } .tpa a.step-i:hover { color: var(--ink) } /* Zwei Spalten: Frage links, Schiene rechts */ .tpa .cols { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start } .tpa .rail { position: sticky; top: 1rem; display: grid; gap: .8rem } .tpa .rail-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: .9rem 1rem; background: var(--paper) } .tpa .rail-card.is-quiet { background: var(--soft2) } .tpa .rail-k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4) } /* Faktenliste */ .tpa .facts { display: grid; gap: 0 } .tpa .facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line2); font-size: .86rem } .tpa .facts div:last-child { border-bottom: 0 } .tpa .facts dt { color: var(--ink3) } .tpa .facts dd { margin: 0; font-weight: 700; text-align: right } .tpa .facts .open { color: var(--ink4); font-weight: 600 } /* „Ändern" je Zeile (Befund K9) — ruhig, aber anklickbar groß genug. */ .tpa .fact-edit { display: inline-block; margin-left: .5rem; font-size: .76rem; font-weight: 700; color: var(--ink3); text-decoration: underline; padding: .15rem 0 } .tpa .fact-edit:hover { color: var(--ink) } /* Auswahlkacheln — ein Radio, das wie eine Kachel aussieht */ .tpa .opts { display: grid; gap: .5rem } .tpa .opt { display: flex; gap: .7rem; align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); padding: .75rem .85rem; background: var(--paper); cursor: pointer } .tpa .opt:hover { border-color: var(--ink3) } .tpa .opt input { position: absolute; opacity: 0; width: 0; height: 0 } .tpa .opt-dot { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--line); margin-top: .15rem } .tpa .opt:has(input:checked) { border-color: var(--fill); box-shadow: inset 0 0 0 1px var(--fill) } .tpa .opt:has(input:checked) .opt-dot { border: 5px solid var(--fill) } .tpa .opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px } .tpa .opt-t { display: block; font-size: .88rem; font-weight: 700 } .tpa .opt-d { display: block; font-size: .76rem; color: var(--ink3); line-height: 1.35; margin-top: .1rem } .tpa .opt-x { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--ink3); white-space: nowrap } /* Zwei gleich große Entscheidungskarten (Angebot) und Kacheln, die selbst der Knopf sind — ein Radio ist es hier nicht: die Wahl führt weiter. */ .tpa .opts.two { grid-template-columns: 1fr 1fr } .tpa a.opt { text-decoration: none } .tpa .opt-col { flex-direction: column; gap: .2rem } .tpa .opt-num { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em } .tpa .opt .btn { width: 100%; margin-top: .6rem } /* Farb-/Wertfelder. **Nicht `.swatch`**: so heißt der Farbschalter des Horizon-Themes (`base.css`), und dessen Regeln lagen über unseren — die Kacheln standen übereinander (Plan 0087). */ .tpa .farben { display: flex; gap: .5rem; flex-wrap: wrap } .tpa .farbe { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 32px; padding: .35rem .8rem; font-size: .82rem; font-weight: 600; cursor: pointer } .tpa .farbe input { position: absolute; opacity: 0; width: 0; height: 0 } .tpa .farbe:has(input:checked) { border-color: var(--fill); box-shadow: inset 0 0 0 1px var(--fill) } .tpa .farbe:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px } /* Der Farbpunkt — nur, wo wir die Farbe wirklich kennen (siehe `view::farbpunkt`); ein falscher Punkt ist schlechter als keiner. **Zwei feste Ringe statt eines Rahmens** (Plan 0079, G2): außen der tragende Ton gegen die Kachel, innen der helle gegen die Farbe, im Dunkeln getauscht. Mit `--line` (12 % Deckung) verschwand „Schwarz" im Dark Mode und sah aus wie ein leerer Radioknopf. */ .tpa .farbe-punkt { width: 15px; height: 15px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .35) } [data-tptheme="dark"] .tpa .farbe-punkt { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(0, 0, 0, .35) } /* Der Haken steht bei jeder Farbe im Markup und nur bei der gewählten im Bild — damit der Punkt nicht mehr wie ein leerer Radioknopf wirkt. */ .tpa .farbe-ok { display: none; font-size: .78rem; color: var(--fill); line-height: 1 } .tpa .farbe:has(input:checked) .farbe-ok { display: inline } /* Fragenliste (dicht) */ .tpa .qs { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden } .tpa .q { display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line2) } .tpa .q:last-child { border-bottom: 0 } .tpa .q:nth-child(odd) { background: var(--soft2) } .tpa .q-t { flex: 1; font-size: .85rem; font-weight: 600 } .tpa .q-h { font-size: .72rem; color: var(--ink4); font-weight: 500; display: block; margin-top: .05rem } /* Ein Bild je Frage — und ein gelber Rand, solange sie unbeantwortet ist (Befund K-18: vorher stand alles auf „Ja"). */ .tpa .q-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; font-size: .95rem; line-height: 1 } .tpa .q.is-open .q-ico { border-color: var(--warn); background: var(--warn-soft) } /* **Und der Punkt geht aus, sobald geantwortet ist** — ohne Neuladen: htmx tauscht nur den Preis-Kasten, die Klasse oben bliebe stehen. */ .tpa .q:has(input:checked) .q-ico { border-color: var(--line); background: var(--paper) } /* Segment (Ja/Nein) */ .tpa .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft2) } .tpa .seg label { border-radius: 999px; padding: .34rem .8rem; font-size: .78rem; font-weight: 700; color: var(--ink3); cursor: pointer } .tpa .seg label input { position: absolute; opacity: 0; width: 0; height: 0 } .tpa .seg label:has(input:checked) { background: var(--fill); color: var(--on-fill) } .tpa .seg label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px } /* **Ein „Nein" sieht anders aus als ein „Ja"** (Plan 0079, G7): beide trugen dieselbe Fläche, obwohl ein „Nein" den Preis auf den Defekt-Preis zieht. Warnton statt Handlungsfarbe; vorbelegt ist weiterhin keins von beiden. */ .tpa .seg label:has(input[value="nein"]:checked) { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn) } /* Suche + Trefferliste */ .tpa .search { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--ink); border-radius: var(--r-btn); padding: .8rem 1rem; background: var(--paper) } .tpa .search input { border: 0; outline: 0; flex: 1; font-size: .95rem; font-weight: 600; background: transparent } .tpa .search input::placeholder { color: var(--ink4); font-weight: 500 } .tpa .hits { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: .7rem } .tpa .hit { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line2); background: var(--paper); text-decoration: none } .tpa .hit:last-child { border-bottom: 0 } .tpa .hit:hover { background: var(--soft2) } .tpa .hit-th { width: 34px; height: 46px; border-radius: 3px; background: var(--soft); border: 1px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; color: var(--ink4) } .tpa .hit-t { display: block; font-size: .88rem; font-weight: 700 } .tpa .hit-s { display: block; font-size: .74rem; color: var(--ink3) } /* Der Titel darf schrumpfen, der Betrag nie (Befund K-16). */ .tpa .hit > span:nth-child(2) { min-width: 0 } .tpa .hit-go { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--ink3); text-align: right; flex: 0 0 auto; white-space: nowrap } /* Formular */ .tpa .form { display: grid; gap: 1.1rem } .tpa .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem } .tpa .field { display: grid; gap: .25rem } .tpa .field label { font-size: .78rem; font-weight: 700 } .tpa .input { border: 1px solid var(--line); border-radius: var(--r-in); padding: .6rem .7rem; font-size: .88rem; background: var(--paper); width: 100% } .tpa .input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue) } .tpa .input::placeholder { color: var(--ink4) } .tpa .hint { font-size: .72rem; color: var(--ink4) } .tpa .err { font-size: .74rem; font-weight: 700; color: var(--bad) } /* Die grüne Gegenprobe — IBAN (Befund K-3) und IMEI (Plan 0099, E5). */ .tpa .ok-t { font-size: .74rem; font-weight: 700; color: var(--ok) } .tpa .is-bad .input { border-color: var(--bad); background: var(--bad-soft) } .tpa .is-ok .input { border-color: var(--ok) } .tpa .check { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; line-height: 1.4 } .tpa .check input { margin-top: .2rem } /* Ankaufbedingungen und Datenschutz sind Links und sehen so aus (Plan 0106, 1) — `.tpa a` erbt sonst die Textfarbe. */ .tpa .check a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px } /* Die weiteren Wege zur IMEI klappen auf (Plan 0099, E4). */ .tpa .card-p > details > summary { cursor: pointer } .tpa .card-p > details ul, .tpa .card-p > details ol { margin: .4rem 0 0; padding-left: 1.1rem; line-height: 1.6 } /* In Link-Optik mit eigenem Pfeil — das Theme blendet den Marker aus (Plan 0105, A1; Muster `.preis > summary`). */ .tpa .imei-wege > summary { display: inline-block; list-style: none; font-weight: 700; text-decoration: underline; text-underline-offset: 2px } .tpa .imei-wege > summary::-webkit-details-marker { display: none } .tpa .imei-wege > summary::after { content: "\25BE"; display: inline-block; margin-left: .3rem } .tpa .imei-wege[open] > summary::after { content: "\25B4" } .tpa .imei-wege > p { margin: .4rem 0 0 } /* Auszahlungswege: der gewählte Block zeigt sich, ohne eine Zeile JavaScript. Ohne `:has` bleiben alle Blöcke sichtbar — sichtbar zu viel ist besser als ein Feld, das niemand ausfüllen kann. */ .tpa .pay-block { display: grid; gap: .8rem } @supports selector(:has(*)) { .tpa .pay-block { display: none } .tpa .paybox:has(input[value="paypal"]:checked) ~ .pay-paypal, .tpa .paybox:has(input[value="iban"]:checked) ~ .pay-iban, .tpa .paybox:has(input[value="voucher"]:checked) ~ .pay-voucher { display: grid } } /* Belege der Bewertung (Plan 0065, B-3) — ein Bild wird angesehen, nicht geöffnet: eine Adresse als Fließtext beantwortet die Frage nicht, um die es geht („worüber redet die Begründung?"). Die volle Datei bleibt einen Klick entfernt. */ .tpa .belege { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem } .tpa .beleg { display: block; width: 5.5rem; height: 5.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper) } .tpa .beleg:hover { border-color: var(--ink3) } .tpa .beleg img { width: 100%; height: 100%; object-fit: cover; display: block } .tpa .endangebot-grund { margin: .35rem 0 .9rem } /* Der Rücksende-Weg klappt auf (Plan 0099, E3): die `summary` trägt die Knopf-Klassen und braucht nur Zeiger und Abstand, wenn sie offen ist. */ .tpa .endangebot-zurueck > summary { cursor: pointer; list-style: none } .tpa .endangebot-zurueck > summary::-webkit-details-marker { display: none } .tpa .endangebot-zurueck[open] > summary { margin-bottom: .7rem } /* Preis-Held — **das Hero-Band des Themes**, nicht ein eigenes Schwarz. `--hero-*` ist im Theme mit Absicht themeunabhängig: tiefes Marken-Blau mit grünem Lichtkegel, hell beschriftet, im Hellen wie im Dunkeln dasselbe. Der Betrag steht damit dort, wo der Shop auch sonst feiert. Ohne Theme greifen die Rückfallwerte. */ .tpa .hero-price { background: var(--hero-bg, linear-gradient(155deg,#14315c 0%,#163f73 55%,#122f5e 100%)); color: var(--hero-fg, #fff); border-radius: var(--r-card); padding: 1.6rem 1.4rem; position: relative; overflow: hidden } .tpa .hero-price::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hero-cone, radial-gradient(58% 80% at 80% 82%, rgba(81,195,109,.42) 0%, transparent 60%)) } .tpa .hero-price > * { position: relative } .tpa .hero-price .eyebrow { color: var(--hero-eyebrow, #6fe39a) } .tpa .hero-num { font-size: 3.4rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: .35rem 0 .1rem } .tpa .hero-sub { color: var(--hero-fg-muted, rgba(231,240,250,.74)); font-size: .84rem } /* Der Betrag, der nicht mehr gilt — durchgestrichen und ruhig. */ .tpa .hero-was { color: var(--hero-fg-muted, rgba(231,240,250,.74)); font-size: .8rem; text-decoration: line-through } .tpa .foot-nav { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line2) } /* --- Der Preis-Kasten, der ab Schritt 2 auf jeder Seite mitläuft --------- */ /* **Ein Ding in drei Größen, kein zweites Markup** (Plan 0065, S-5, Befunde K-14/K-15). Ein `
`: breit blendet CSS die Zusammenfassungs- zeile aus, und es ist die klebende Karte oben in der Schiene; schmal ist die `summary` eine klebende Leiste am unteren Rand, die der Kunde selbst zuklappt. **Kein JavaScript und kein `position: fixed`** — ein `fixed` Element kollidiert im Theme mit Sticky-Kopfzeile und Cookie-Banner. */ .tpa .preis { border: 1px solid var(--ink); border-radius: var(--r-card); background: var(--paper) } .tpa .preis > summary { display: none } .tpa .preis-b { padding: .9rem 1rem } .tpa .preis-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; display: block } /* Geschätzt ist nicht versprochen: „bis zu" steht ruhiger da als der feste Betrag. */ .tpa .preis-num.is-est { color: var(--ink2) } .tpa .preis-alt { display: block; font-size: .82rem; font-weight: 700; color: var(--ok); margin-top: .1rem } .tpa .preis-note { font-size: .72rem; color: var(--ink4); margin-top: .35rem; line-height: 1.4 } /* --- „So läuft es", Vertrauenszeile, Modellkacheln ----------------------- */ .tpa .ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; counter-reset: a; margin: 0; padding: 0 } .tpa .ablauf li { list-style: none; counter-increment: a; border-top: 2px solid var(--ink); padding-top: .5rem; font-size: .8rem; font-weight: 700; line-height: 1.35 } .tpa .ablauf li::before { content: counter(a); display: block; font-size: .68rem; color: var(--ink4); margin-bottom: .15rem } .tpa .ablauf span { display: block; font-size: .74rem; font-weight: 500; color: var(--ink3); margin-top: .15rem } .tpa .trust { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .76rem; color: var(--ink2); font-weight: 600 } .tpa .trust i { font-style: normal; color: var(--ok); margin-right: .25rem } /* --- „Dein nächster Schritt" (Statusseite, Meine Ankäufe) ---------------- */ /* Die eine Frage, mit der diese Seiten geöffnet werden: muss ich etwas tun? Der linke Balken sagt es, bevor jemand liest. */ .tpa .next { display: block; border: 1px solid var(--ink); border-left-width: 4px; border-radius: var(--r-card); padding: 1rem 1.1rem; background: var(--paper); text-decoration: none } .tpa .next-k { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4) } .tpa .next-h { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline } .tpa .next-t { font-size: 1.05rem; font-weight: 800; margin: .2rem 0 .3rem; letter-spacing: -.01em } /* Wir sind dran — grau, damit „du musst nichts tun" auch so aussieht. */ .tpa .next.is-wait { border-color: var(--line); border-left-color: var(--ink4) } /* Etwas zu tun — der ruhige Warnton, nie Rot: „Angebot" ist keine Panne. */ .tpa .next.is-act { border-left-color: var(--warn) } .tpa .next.is-done { border-left-color: var(--ok) } .tpa a.next:hover { border-color: var(--ink) } .tpa .next-go { display: block; font-size: .72rem; font-weight: 700; color: var(--ink); margin-top: .6rem } /* --- schmal (bis hinunter auf 400 px) ------------------------------------ */ /* --- Statusseite: Zeitstrahl, Faden, Kopierlink (Befunde P-1, P-2) ------- */ /* Der Zeitstrahl zeigt **erreichte** Stationen; was nicht erreicht ist, bleibt grau — ein Strahl, auf dem alles grün ist, sagt nichts. */ .tpa .tl { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem } .tpa .tl-i { display: grid; grid-template-columns: 1rem 1fr auto; align-items: center; gap: .6rem; padding: .45rem 0; font-size: .85rem; color: var(--ink4); position: relative } .tpa .tl-i + .tl-i::before { content: ""; position: absolute; left: .44rem; top: -.35rem; width: 2px; height: .7rem; background: var(--line) } .tpa .tl-d { width: .62rem; height: .62rem; border-radius: 999px; margin-left: .15rem; background: var(--line); border: 2px solid var(--line) } .tpa .tl-i.is-done { color: var(--ink2) } .tpa .tl-i.is-done .tl-d { background: var(--ok); border-color: var(--ok) } .tpa .tl-i.is-on { color: var(--ink); font-weight: 700 } .tpa .tl-i.is-on .tl-d { background: var(--paper); border-color: var(--ok) } .tpa .tl-w { font-size: .75rem; color: var(--ink4); font-weight: 400 } /* Der Faden: unsere Nachrichten links, seine rechts — beide als **Text**, nichts wird gerendert (C-1 Entscheidung 9). */ .tpa .msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem } .tpa .msg { border: 1px solid var(--line2); border-radius: var(--r-card); padding: .6rem .75rem; background: var(--soft2); max-width: 46ch } .tpa .msg.is-mine { background: var(--paper); border-color: var(--line); margin-left: auto } .tpa .msg-h { display: flex; justify-content: space-between; gap: .8rem; font-size: .72rem; color: var(--ink4); margin-bottom: .25rem } .tpa .msg-a { font-weight: 700; color: var(--ink2) } .tpa .msg-b { font-size: .87rem; line-height: 1.55; white-space: normal } .tpa .msg-b p + p { margin-top: .5rem } .tpa textarea.input { min-height: 5.5rem; resize: vertical } .tpa .input:disabled, .tpa .btn:disabled { opacity: .55; cursor: not-allowed } /* Der Link zum Kopieren — ohne JavaScript bleibt das Feld markierbar. */ .tpa .copy { display: flex; gap: .5rem; align-items: center } .tpa .copy-in { flex: 1; font-size: .78rem } @media (max-width: 900px) { /* **Kein Gitter mehr, und die Schiene löst sich auf** (Befund K-14). Ein klebender Kasten in einer Gitterzelle kann sich nur in seiner eigenen Zeile bewegen — er stünde am Fuß der Seite und wäre genau dann weg, wenn der Kunde antwortet. Als Blockfluss ist sein Bezugsrahmen die ganze Spalte: die Leiste klebt über die **ganze** Seite am unteren Rand. */ .tpa .cols { display: block } .tpa .rail { display: contents } .tpa .rail > * + *, .tpa .cols > div + .rail-card, .tpa .rail-card { margin-top: .9rem } .tpa .cols > div { margin-bottom: .9rem } .tpa .opts.two { grid-template-columns: 1fr } .tpa .ablauf { grid-template-columns: 1fr 1fr } /* Die Karte wird zur klebenden Leiste am unteren Rand — zuklappbar, und aufgeklappt höchstens ein Drittel des Bildes. */ .tpa .preis { position: sticky; bottom: 0; z-index: 20; margin: .9rem calc(var(--pad) * -1) 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -8px 24px rgba(0,0,0,.18) } .tpa .preis > summary { display: flex; align-items: center; gap: .6rem; padding: .6rem var(--pad); cursor: pointer; font-size: .85rem; font-weight: 800; list-style: none } .tpa .preis > summary::-webkit-details-marker { display: none } .tpa .preis > summary::after { content: "\25BE"; margin-left: auto; font-size: .8rem; color: var(--ink3) } .tpa .preis[open] > summary::after { content: "\25B4" } .tpa .preis .sum-alt { font-weight: 700; color: var(--ok); font-size: .78rem } .tpa .preis-b { padding: .2rem var(--pad) .9rem; border-top: 1px solid var(--line2); max-height: 34vh; overflow-y: auto } .tpa .preis-num { font-size: 1.5rem } } @media (max-width: 640px) { .tpa { --pad: 1rem; padding: 1.2rem var(--pad) 2rem } .tpa .h1 { font-size: 1.6rem } .tpa .title { font-size: 1.3rem } .tpa .hero-num { font-size: 2.8rem } .tpa .fgrid { grid-template-columns: 1fr } .tpa .q { flex-wrap: wrap; gap: .5rem } .tpa .q .seg { width: 100%; display: flex } .tpa .q .seg label { flex: 1; text-align: center } .tpa .step-x { display: none } .tpa .step { gap: .3rem; padding: 0 0 .8rem } .tpa .step-i span { display: none } .tpa .step-i.is-on span { display: inline } .tpa .btn-row .btn { width: 100% } .tpa .foot-nav { flex-direction: column-reverse; align-items: stretch } .tpa .msg { max-width: 100% } .tpa .copy { flex-direction: column; align-items: stretch } } /* =========================================================================== Dev-Hülle (ANKAUF_DEV_SHELL=1) — im Shop rendert das Theme Kopf und Fuß. Nur hier, damit ein Entwickler den Funnel ohne Shopify ansehen kann. **Die Palette steht nicht hier, sondern in `schale.css`** — die Route `/static/schale.css` liefert sie, oder mit `ANKAUF_THEME_ASSETS` gleich die echten Theme-Dateien. Alles darunter liest dieselben Namen wie im Shop. =========================================================================== */ .tpa-shell { margin: 0; background: var(--surface-2); color: var(--color-text); font-family: var(--ff) } .tpa-shell .shop { max-width: 1240px; margin: 0 auto; background: var(--color-page); min-height: 100vh } .tpa-shell .an-bar { background: #14315c; color: #e7f0fa; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-align: center; padding: .5rem 1rem } .tpa-shell .sh-head { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--divider) } .tpa-shell .sh-logo { font-weight: 800; letter-spacing: .16em; font-size: 1.02rem } .tpa-shell .sh-logo span { color: var(--accent-ink) } .tpa-shell .sh-nav { display: flex; gap: 1.15rem; font-size: .83rem; font-weight: 600; color: var(--nav); flex: 1 } .tpa-shell .sh-nav a { color: inherit; text-decoration: none } /* Der Umschalter — im Shop macht ihn das Theme, hier steht er selbst da, damit beide Modi ohne Shopify abgenommen werden können. */ .tpa-shell .sh-mode { border: 1px solid var(--divider); border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; font-weight: 700; color: var(--color-text); background: var(--surface) } .tpa-shell .sh-foot { background: var(--surface); border-top: 1px solid var(--divider); padding: 1.6rem 1.5rem; font-size: .78rem; color: var(--color-muted) }