/* ========================================================================= Zero One IT - Preistafel als Karten (Vanilla-Portierung) ========================================================================= Dieselbe Sektion wie components/ui/pricing.tsx, nur ohne React: reines HTML/CSS/JS, damit sie in dieser statischen Seite laeuft. Alle Farben, Schriften, Radien und Kurven kommen aus den bestehenden Tokens in index.html (:root) und assets/css/theme.css - die Datei fuehrt keinen einzigen eigenen Farbwert. Ohne JavaScript (kein .ptf-aktiv am Abschnitt) steht alles ruhig und vollstaendig da: Karten sichtbar, Monatspreise gesetzt, kein Umschalter, kein Sternenfeld. Der Umschalter ist Komfort, die Preise sind Inhalt. ========================================================================= */ /* ===== GRUND UND PUNKTE: EIN AUFBAU, ZWEI SAETZE WERTE ===== Der Abschnitt bringt seinen Hintergrund selbst mit, statt den Seitengrund durchscheinen zu lassen. Beide Themen benutzen dieselben drei Regeln; was sich unterscheidet, steht ausschliesslich in diesen fuenf Variablen. So gibt es keine zweite Fassung der Sektion, die man mitpflegen muesste. --ptf-wasch flaechiger Verlauf hinter allem --ptf-schein Akzentschimmer oben --ptf-punkt Farbe der Punkte --ptf-halo Schein um jeden Punkt --ptf-funken Spitzenhelligkeit beim Funkeln DUNKEL traegt der Seitengrund die Tiefe schon selbst - dort genuegt der Schimmer, die Punkte leuchten als Licht auf dunklem Grund. HELL funktioniert das nicht: ein Teal mit 7 % Deckkraft auf #EEF1F7 ist praktisch unsichtbar, und blanke Punkte ohne Schein lesen sich als Staub auf dem Bildschirm. Deshalb bekommt Hell drei Dinge: einen Verlauf, der nach oben bis ins Weiss aufhellt (die Logik des Tagbilds aus theme.css), einen deutlich kraeftigeren Schimmer, und einen weichen Halo um jeden Punkt. Damit werden aus Staubkoernern Lichtpartikel - dasselbe Bild wie nachts, nur bei Tag. */ .preistafel{position:relative;overflow:hidden;isolation:isolate; --ptf-wasch:none; --ptf-schein:radial-gradient(64% 46% at 50% 14%,var(--accent-glow),transparent 72%); --ptf-punkt:var(--accent); --ptf-halo:0 0 0 rgba(0,0,0,0); --ptf-funken:1; background:var(--ptf-wasch)} /* Beide Verlaeufe klingen INNERHALB des Abschnitts aus, nicht an seiner Kante. Eine Wasch, die oben bei voller Deckkraft beginnt, setzt eine sichtbare Naht zum Abschnitt darueber - der Grund springt dort um mehrere Stufen. Deshalb faengt sie durchsichtig an, hat ihr Maximum bei 26 % und ist bei 72 % wieder weg; der Schimmer sitzt aus demselben Grund bei 14 % statt am oberen Rand. Der Uebergang passiert damit im Verlauf und nicht als Linie. */ :root[data-theme="light"] .preistafel{ --ptf-wasch:linear-gradient(180deg, rgba(var(--hoch-rgb),0) 0%, rgba(var(--hoch-rgb),.92) 26%, rgba(var(--hoch-rgb),.5) 48%, rgba(var(--grund-rgb),0) 74%); --ptf-schein:radial-gradient(62% 44% at 50% 16%,rgba(var(--akzent-rgb),.16),transparent 72%); --ptf-halo:0 0 6px rgba(var(--akzent-rgb),.42); --ptf-funken:.92} .preistafel-schimmer{position:absolute;inset:0;pointer-events:none;z-index:0; background:var(--ptf-schein)} /* ===== STERNENFELD ===== Die Punkte liegen in Prozent im Abschnitt. Bewegt wird ausschliesslich transform - kein top/left im Frame, damit nichts neu layoutet wird. */ .preistafel-sterne{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .ptf-stern{position:absolute;border-radius:50%;background:var(--ptf-punkt);opacity:0; box-shadow:var(--ptf-halo);will-change:transform,opacity} .ptf-aktiv .ptf-stern{animation:ptf-funkeln var(--dauer,3s) linear var(--verzug,0s) infinite} @keyframes ptf-funkeln{0%,100%{opacity:0}50%{opacity:var(--ptf-funken,1)}} .preistafel-inhalt{position:relative;z-index:1} .preistafel-kopf{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:44px} .preistafel-kopf p{max-width:520px;color:var(--text-2);font-size:1.0625rem;line-height:1.6;margin-top:20px} /* ===== ABRECHNUNGSUMSCHALTER ===== Zwei echte Radiofelder in einem Fieldset: Pfeiltasten wechseln die Auswahl, Screenreader melden Gruppe und Zustand von sich aus. */ .preistafel-schalter{display:none;flex-direction:column;align-items:center;gap:16px;margin-bottom:56px} .ptf-aktiv .preistafel-schalter{display:flex} .ptf-fieldset{border:0;padding:0;margin:0;min-width:0} .ptf-bahn{position:relative;display:inline-flex;align-items:stretch;padding:4px; background:var(--surface);border:1px solid var(--border);border-radius:100px} .ptf-radio{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .ptf-option{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center; gap:9px;min-height:44px;padding:0 22px;border-radius:100px;font-family:var(--font-display); font-size:.9375rem;font-weight:600;color:var(--text-2);cursor:pointer;white-space:nowrap; transition:color .28s var(--ease-out)} .ptf-option:hover{color:var(--text-1)} .ptf-radio:checked + .ptf-option{color:var(--accent-ink)} .ptf-radio:focus-visible + .ptf-option{outline:2px solid var(--accent);outline-offset:3px} /* Breite und Versatz setzt das Skript - auch nach dem Nachladen der Schrift, sonst sitzt der Schieber neben der Beschriftung. */ .ptf-schieber{position:absolute;top:4px;left:4px;bottom:4px;width:0;border-radius:100px; background:var(--accent);transition:transform .34s var(--ease-out),width .34s var(--ease-out)} .ptf-marke{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.06em; text-transform:uppercase;padding:3px 9px;border-radius:100px;background:var(--accent-dim); border:1px solid var(--border-accent);color:var(--accent-text); transition:background .28s,border-color .28s,color .28s} .ptf-radio:checked + .ptf-option .ptf-marke{background:rgba(0,38,31,.14);border-color:rgba(0,38,31,.3);color:var(--accent-ink)} .ptf-notiz{font-size:.8125rem;color:var(--text-3);text-align:center;max-width:56ch;line-height:1.6;margin:0} .ptf-notiz b{color:var(--text-2);font-weight:500} .ptf-still{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @media(max-width:400px){ .ptf-option{padding:0 14px;font-size:.875rem;gap:6px} .ptf-marke{padding:3px 7px;font-size:.5625rem} } /* ===== KARTENRASTER ===== align-items:stretch statt start: die Vorlage laesst die Karten unterschiedlich hoch enden, dann stehen die drei Knoepfe auf drei Hoehen. Die bestehende Tafel auf der Website richtet Preise und Knoepfe bewusst aus - das bleibt so. Die Hebung der hervorgehobenen Karte ist ein transform und beruehrt die Hoehe der Nachbarn nicht. */ .preistafel-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:32px} @media(max-width:1023.98px){.preistafel-raster{grid-template-columns:minmax(0,1fr);gap:26px;max-width:520px;margin:0 auto}} .preiskarte{position:relative;display:flex;flex-direction:column;padding:32px; border:1px solid var(--border);border-radius:var(--radius); background:rgba(var(--flaeche-rgb),.72);backdrop-filter:blur(6px);text-align:center} .preiskarte.hervor{border-color:var(--accent); background:linear-gradient(180deg,var(--accent-dim),transparent 58%),rgba(var(--flaeche-rgb),.9); box-shadow:0 28px 70px -34px rgba(var(--akzent-rgb),.5)} /* Einflug: gestaffelt, Verzug je Karte setzt das Skript. Die hervorgehobene Karte bleibt ab 1024 px 20 px hoeher stehen - unter 1024 px stehen die Karten untereinander, dort waere die Hebung nur ein Versatz. */ .ptf-aktiv .preiskarte{opacity:0;transform:translateY(50px); transition:opacity .5s ease var(--verzug,0s),transform .7s cubic-bezier(.16,1,.3,1) var(--verzug,0s)} .ptf-aktiv .preiskarte.ist-da{opacity:1;transform:translateY(0)} @media(min-width:1024px){.ptf-aktiv .preiskarte.hervor.ist-da{transform:translateY(-20px)}} .pk-schild{position:absolute;top:0;left:50%;transform:translate(-50%,-50%); display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:100px; background:var(--accent);color:var(--accent-ink-2); font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase} .pk-schild svg{width:13px;height:13px;fill:currentColor} /* ===== KOPFZONE ALS DISCLOSURE =====