/* ============================================================ ZERO ONE IT — Managed-Hosting-Tarife Umschalter Monatlich/Jaehrlich und Preisdarstellung der Hosting-Karten. Bewusst nach dem Vorbild der Datenschutz- Preistafel gebaut (assets/css/preistafel-karten.css): gleiche Bahn, gleicher Schieber, gleiche Marke, gleiche Masse. Alle Farben kommen aus theme.css. Kein eigener Farbwert steht hier fest verdrahtet, damit Hell und Dunkel ohne Doppelpflege funktionieren. ============================================================ */ /* =================================================================== 1. Umschalter =================================================================== */ .hosting-schalter{ display:flex;flex-direction:column;align-items:center;gap:14px; margin:0 0 clamp(34px,4.6vw,52px)} .hosting-schalter[hidden]{display:none} .hts-fieldset{border:0;padding:0;margin:0;min-width:0} .hts-bahn{position:relative;display:inline-flex;align-items:stretch;padding:4px; background:var(--surface);border:1px solid var(--border);border-radius:100px} .hts-radio{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .hts-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)} .hts-option:hover{color:var(--text-1)} .hts-radio:checked + .hts-option{color:var(--accent-ink)} .hts-radio:focus-visible + .hts-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. */ .hts-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),box-shadow .5s var(--ease-out)} /* Der Teal-Glanz beim Wechsel in den Jahresmodus. Kein Dauerpuls: Der Schein gehoert zum Zustand, nicht zu einer laufenden Schleife. */ .hosting-schalter.ist-jahr .hts-schieber{ box-shadow:0 0 0 1px var(--border-accent), 0 0 22px -4px var(--accent)} .hts-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} .hts-radio:checked + .hts-option .hts-marke{ background:rgba(0,38,31,.14);border-color:rgba(0,38,31,.3);color:var(--accent-ink)} .hts-notiz{font-size:.8125rem;color:var(--text-3);text-align:center;max-width:58ch; line-height:1.6;margin:0} .hts-notiz b{color:var(--text-2);font-weight:500} .hts-still{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* --- Das kurze Spar-Element beim Umschalten --- Sitzt in einer Zeile, die dauerhaft Platz belegt. Dadurch entsteht beim Ein- und Ausblenden kein Layoutsprung. */ .hts-fanfare-zeile{min-height:26px;display:flex;align-items:center;justify-content:center} .hts-fanfare{ display:inline-flex;align-items:center;gap:7px; font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-text); opacity:0;transform:translateY(3px); transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)} .hts-fanfare.ist-an{opacity:1;transform:translateY(0)} .hts-fanfare svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .hts-fanfare.ist-an svg{animation:htsFunke .6s var(--ease-out) 1} @keyframes htsFunke{ 0%{opacity:.3;transform:scale(.7)} 55%{opacity:1;transform:scale(1.14)} 100%{opacity:1;transform:scale(1)}} /* =================================================================== 2. Preisdarstellung in den Karten =================================================================== */ /* Die Zeile unter dem Betrag traegt in beiden Modi Text und behaelt ihre Hoehe. Die Spar-Marke ist im Monatsmodus nicht entfernt, sondern nur unsichtbar - sonst wuerde die Karte beim Umschalten springen. Genau das soll nicht passieren. */ .rate-freq{display:flex;flex-direction:column;gap:5px;min-height:46px; font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em; text-transform:uppercase;color:var(--text-3)} .ht-jahrpreis{color:var(--text-2);font-weight:500; opacity:0;transition:opacity .3s var(--ease-out)} .rate-col.ist-jahr .ht-jahrpreis{opacity:1} .ht-spar{align-self:flex-start; font-size:.625rem;padding:3px 9px;border-radius:100px; background:var(--accent-dim);border:1px solid var(--border-accent);color:var(--accent-text); visibility:hidden;opacity:0; transition:opacity .3s var(--ease-out)} .rate-col.ist-jahr .ht-spar{visibility:visible;opacity:1} /* --- Der kurze Zahlenwechsel --- Nur waehrend der Klasse ht-wechsel, danach wieder still. */ .ht-wechsel .rate-betrag{animation:htWechsel .38s var(--ease-out) 1} @keyframes htWechsel{ 0%{opacity:.35;transform:translateY(-3px) scale(.965)} 60%{opacity:1;transform:translateY(0) scale(1.012)} 100%{opacity:1;transform:translateY(0) scale(1)}} /* Dezenter Teal-Rand an der Tafel, solange der Jahresmodus laeuft. */ #hostingRate.ist-jahr .rate-col.featured{border-color:var(--border-accent)} /* Die Grundregel reserviert drei Zeilen Beschreibung. Business Enterprise braucht vier - ohne diese Anhebung saessen Preis, Hinweiszeile und Schaltflaeche dieser Karte 22 px tiefer als bei den beiden anderen. Gilt nur, solange die Karten nebeneinander stehen; gestapelt gibt es nichts auszurichten. */ @media (min-width:901px){ #hostingRate .rate-desc{min-height:calc(1.7em * 4)} } /* Die Enterprise-Schaltflaeche ist bewusst ein Link statt eines Knopfes - sie fuehrt ins Kontaktformular und loest keine Buchung aus. Als erbt sie allerdings die Zeilenhoehe des Fliesstextes und stuende dadurch 6 px hoeher und 6 px zu hoch. Diese Regel gleicht sie exakt an die beiden Knoepfe daneben an. */ #hostingRate .rate-col > a.btn{line-height:normal;margin-top:6px} /* =================================================================== 3. Schmale Fenster =================================================================== */ @media (max-width:460px){ .hts-option{padding:0 14px;font-size:.875rem;gap:6px} .hts-marke{padding:3px 7px;font-size:.5625rem} .hts-notiz{font-size:.75rem} } /* =================================================================== 4. Bewegung reduzieren Der Zustand bleibt vollstaendig ablesbar - es entfaellt nur die Bewegung. Die Spar-Marke und der Jahrespreis bleiben sichtbar. =================================================================== */ @media (prefers-reduced-motion: reduce){ .hts-schieber,.hts-option,.hts-marke, .ht-jahrpreis,.ht-spar{transition:none} .ht-wechsel .rate-betrag{animation:none} .hts-fanfare{transition:none} .hts-fanfare.ist-an svg{animation:none} .hosting-schalter.ist-jahr .hts-schieber{box-shadow:0 0 0 1px var(--border-accent)} } /* ============================================================ ZERO ONE IT — Preiskarten mit 3D-Wendung Erweitert die beiden bestehenden Preistafeln, ohne ihr Aussehen zu ersetzen: #pricingRate Datenschutzpakete (index.html, .preiskarte) #hostingRate Managed Hosting (webdesign.html, .rate-col) Die Karten behalten Farben, Typografie, Abstaende, Rahmen und Schaltflaechen. Neu ist ausschliesslich die Bewegung: Die Leistungsliste, die bisher aufgeklappt wurde, sitzt jetzt auf der Rueckseite. Alle Farben kommen aus theme.css. Kein Wert ist hier fest verdrahtet, damit Hell und Dunkel weiter ohne Doppelpflege funktionieren. Die Struktur (pf-buehne / pf-innen / pf-seite) baut assets/js/preis-flip.js beim Start aus dem vorhandenen Markup auf - die Leistungen stehen also weiterhin im HTML und bleiben dort pflegbar. ============================================================ */ /* =================================================================== 1. Buehne und Wendung =================================================================== */ .pf-buehne{ position:relative; perspective:1600px; /* Die Hoehe setzt das Skript auf das Maximum aus Vorder- und Rueckseite. Dadurch aendert sich beim Wenden nichts am Layout. */ } .pf-innen{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.22,.68,.24,1); will-change:transform; /* Der Dreher selbst nimmt keine Klicks entgegen. Ohne das kann er bei 3D-Transformationen den Treffertest abfangen und Klicks auf die Schaltflaeche der Rueckseite schlucken. Die beiden Seiten holen sich die Klicks unten ausdruecklich zurueck. */ pointer-events:none} .pf-seite{ position:absolute; inset:0; display:flex; flex-direction:column; backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Verhindert das Durchscheinen der Rueckseitenkanten in Safari. */ transform:translateZ(0)} .pf-hinten{transform:rotateY(180deg) translateZ(0)} /* Das Empfohlen-Schild bleibt direktes Kind der Buehne, damit es sich weiter am Kartenrand ausrichtet. Ohne z-index legt sich die Vorderseite davor - sie hat durch translateZ(0) einen eigenen Stapelkontext. */ .pf-buehne > .pk-schild, .pf-buehne > .rate-popular{z-index:3} /* Gewendet wird auf zwei Wegen, die sich nicht in die Quere kommen: per Zeigegeraet ueber :hover, per Tastatur, Klick und Tippen ueber die Klasse. Beide fuehren zur selben Drehung. */ @media (hover:hover) and (pointer:fine){ .pf-buehne:hover .pf-innen{transform:rotateY(180deg)} } .pf-buehne.ist-gewendet .pf-innen{transform:rotateY(180deg)} /* Solange die Karte vorne liegt, darf die Rueckseite weder Fokus noch Scrollen aufnehmen - sonst springt der Tabulator in unsichtbare Inhalte. Das Skript setzt zusaetzlich inert/aria-hidden. */ /* Die jeweils sichtbare Seite holt sich die Klicks zurueck, die .pf-innen abgegeben hat. Die verdeckte bleibt aussen vor. */ .pf-vorn{pointer-events:auto} .pf-buehne:not(.ist-gewendet) .pf-hinten{pointer-events:none} @media (hover:hover) and (pointer:fine){ .pf-buehne:hover .pf-hinten{pointer-events:auto} .pf-buehne:hover .pf-vorn{pointer-events:none} } .pf-buehne.ist-gewendet .pf-hinten{pointer-events:auto} .pf-buehne.ist-gewendet .pf-vorn{pointer-events:none} /* Das Schild muss ebenfalls wieder anklickbar/sichtbar bleiben. */ .pf-buehne > .pk-schild, .pf-buehne > .rate-popular{pointer-events:none} /* =================================================================== 2. Tiefe auf der Vorderseite Sehr zurueckhaltend: ein Hauch Schatten, ein Hauch Staffelung. Lesbarkeit geht vor Effekt. =================================================================== */ .pf-buehne .pk-name, .pf-buehne .rate-name{ text-shadow:0 1px 0 rgba(var(--schatten-rgb),.45), 0 2px 10px rgba(var(--schatten-rgb),.28); transform:translateZ(14px)} .pf-buehne .pk-preis, .pf-buehne .rate-amount{ text-shadow:0 1px 0 rgba(var(--schatten-rgb),.5), 0 3px 18px rgba(var(--schatten-rgb),.34); transform:translateZ(26px)} .pf-buehne .pk-text, .pf-buehne .rate-desc{transform:translateZ(8px)} /* Der Lichtverlauf ueber der Oberflaeche. Liegt still, bis der Zeiger kommt, und wandert dann einmal weich durch - kein Dauerlauf. */ .pf-seite::after{ content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, transparent 38%, rgba(var(--akzent-rgb),.055) 48%, transparent 58%); opacity:0;transition:opacity .5s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .pf-buehne:hover .pf-seite::after{opacity:1} } /* Dezenter Teal-Schein am Rand der aktiven Karte. */ .pf-buehne .pf-seite{ transition:box-shadow .5s var(--ease-out),border-color .5s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .pf-buehne:hover .pf-seite{ box-shadow:0 0 0 1px var(--border-accent), 0 26px 64px -34px rgba(var(--schatten-rgb),.7)} } .pf-buehne.ist-gewendet .pf-seite{ box-shadow:0 0 0 1px var(--border-accent), 0 26px 64px -34px rgba(var(--schatten-rgb),.7)} /* =================================================================== 3. Rueckseite =================================================================== */ .pf-hinten{ background:var(--surface-up,var(--surface)); border:1px solid var(--border); border-radius:inherit; padding:clamp(22px,2.6vw,30px); gap:14px; overflow:hidden} .pf-hinten-kopf{ display:flex;align-items:baseline;justify-content:space-between; gap:12px;flex:0 0 auto; padding-bottom:12px;border-bottom:1px solid var(--border)} .pf-hinten-name{ font-family:var(--font-display);font-weight:700;font-size:1.0625rem; letter-spacing:-.01em;color:var(--text-1)} .pf-hinten-preis{ font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-text);white-space:nowrap} /* Der Bereich, in den die vorhandene Leistungsliste einzieht. Scrollt nur, wenn eine Liste laenger ist als die Karte hoch - die Enterprise-Karte mit 15 Punkten ist genau dieser Fall. */ .pf-hinten-inhalt{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--border) transparent} .pf-hinten-inhalt::-webkit-scrollbar{width:6px} .pf-hinten-inhalt::-webkit-scrollbar-thumb{ background:var(--border);border-radius:100px} /* Die eingezogenen Listen sollen auf der Rueckseite etwas kompakter sitzen als im aufgeklappten Zustand vorher. Das !important ist hier noetig und nicht bequem: preistafel-karten.css wird NACH dieser Datei geladen und haelt den Koerper mit .ptf-aktiv .pk-koerper{grid-template-rows:0fr} zusammengeklappt - bei gleicher Spezifitaet gewinnt die spaetere Datei. Auf der Rueckseite gibt es kein Aufklappen mehr, der Koerper ist immer offen. */ .pf-hinten-inhalt .pk-koerper, .pf-hinten-inhalt .rate-body{ display:block !important; grid-template-rows:1fr !important; overflow:visible !important; transition:none !important} .pf-hinten-inhalt .pk-koerper-innen, .pf-hinten-inhalt .rate-body-inner{overflow:visible !important} .pf-hinten-inhalt .pk-koerper-innen, .pf-hinten-inhalt .rate-body-inner{padding:0} .pf-hinten-inhalt .pk-liste, .pf-hinten-inhalt .rate-features{margin-top:0} /* --- Kompakte Vorschau auf der Rueckseite --- */ .pf-vorschau{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pf-vorschau li{display:flex;align-items:flex-start;gap:9px; color:var(--text-2);font-size:.875rem;line-height:1.5} .pf-vorschau svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px; stroke:var(--accent-text);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .pf-vorschau-rest{margin:12px 0 0; font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em; text-transform:uppercase;color:var(--text-3)} /* Die Listenquelle bleibt im Dokument, wird aber nie angezeigt - sie ist die Vorlage fuer das Fenster. */ .pf-quelle{display:none !important} .pf-hinten-fuss{ flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px; padding-top:14px;border-top:1px solid var(--border)} /* Der CTA ist jetzt der Hauptweg aus der Karte heraus und darf die volle Breite nehmen. Die Spezifitaet gleicht die Regeln aus hosting-tarife.css aus, die dort einen eigenen Abstand setzen. */ .pf-hinten-fuss > .btn, #hostingRate .pf-hinten-fuss > a.btn, #hostingRate .pf-hinten-fuss > button.btn{ margin-top:0;width:100%;justify-content:center} .pf-hinten-fuss > .pf-zurueck{align-self:center} /* Der Weg zurueck. Bewusst schlicht - er ist eine Nebensache. */ .pf-zurueck{ display:inline-flex;align-items:center;gap:7px;min-height:44px; background:none;border:0;padding:0;cursor:pointer; font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em; text-transform:uppercase;color:var(--text-3); transition:color .2s} .pf-zurueck:hover{color:var(--accent-text)} .pf-zurueck svg{width:13px;height:13px;stroke:currentColor;fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* =================================================================== 4. Die Umschaltflaeche Liegt als eigener Knopf ueber der Vorderseite. Dadurch ist die Wendung mit Tastatur bedienbar, ohne dass die Karte selbst zum Knopf wird - die Schaltflaeche darin bleibt eigenstaendig erreichbar. =================================================================== */ /* Die Vorderseite fuellt die Buehne. Damit die Karte nicht oben zusammengedraengt wirkt, wandern Schaltflaeche und Schalter an den unteren Rand - der Preis bleibt oben, dazwischen atmet die Karte. Die ID-Selektoren sind noetig, weil hosting-tarife.css den Abstand der Enterprise-Schaltflaeche bereits mit hoher Spezifitaet setzt. */ .pf-vorn > .pf-schalter{margin-top:auto;align-self:flex-start} /* Der alte Aufklapp-Hinweis samt Chevron wird durch den Schalter abgeloest. Sein display:flex aus der Grundregel wuerde das hidden-Attribut sonst uebersteuern - deshalb hier ausdruecklich. */ .pf-buehne .pk-tipp[hidden], .pf-buehne .rate-hint[hidden]{display:none} .pf-schalter{ display:inline-flex;align-items:center;gap:8px;min-height:44px; background:none;border:0;padding:0;cursor:pointer; font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em; text-transform:uppercase;color:var(--text-3); transition:color .22s} .pf-schalter:hover{color:var(--accent-text)} .pf-schalter svg{width:14px;height:14px;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; transition:transform .4s var(--ease-out)} .pf-schalter:hover svg{transform:rotate(180deg)} /* Fokus muss auf beiden Seiten deutlich sichtbar sein. */ .pf-buehne :is(button,a,input):focus-visible{ outline:2px solid var(--accent-text);outline-offset:3px;border-radius:8px} /* Wird die Karte per Tastatur erreicht, soll sie sich wenden, ohne dass der Zeiger beteiligt ist. */ .pf-buehne:focus-within .pf-seite{ box-shadow:0 0 0 1px var(--border-accent)} /* =================================================================== 5. Zeigerlose Geraete Ohne echten Hover gibt es nur den Knopf. Die Karte selbst wendet sich nicht bei Beruehrung - sonst dreht sie beim Scrollen mit. =================================================================== */ @media (hover:none),(pointer:coarse){ .pf-schalter{color:var(--accent-text)} .pf-buehne .pf-seite::after{opacity:0} } /* =================================================================== 6. Bewegung reduzieren Statt der Drehung ein einfacher Wechsel. Der Inhalt bleibt vollstaendig erreichbar - nur die Raeumlichkeit entfaellt. =================================================================== */ @media (prefers-reduced-motion: reduce){ .pf-innen{transition:none} .pf-buehne:hover .pf-innen, .pf-buehne.ist-gewendet .pf-innen{transform:none} .pf-seite{ backface-visibility:visible;-webkit-backface-visibility:visible; transition:opacity .2s linear} .pf-hinten{transform:none;opacity:0;pointer-events:none} .pf-vorn{opacity:1} .pf-buehne.ist-gewendet .pf-hinten{opacity:1;pointer-events:auto} .pf-buehne.ist-gewendet .pf-vorn{opacity:0;pointer-events:none} /* Ohne Zeigerbewegung kein Wenden per Hover - sonst flackerte die Karte beim blossen Darueberfahren. */ @media (hover:hover) and (pointer:fine){ .pf-buehne:hover .pf-hinten{opacity:0;pointer-events:none} .pf-buehne:hover .pf-vorn{opacity:1;pointer-events:auto} .pf-buehne.ist-gewendet:hover .pf-hinten{opacity:1;pointer-events:auto} .pf-buehne.ist-gewendet:hover .pf-vorn{opacity:0;pointer-events:none} } .pf-buehne .pk-name,.pf-buehne .rate-name, .pf-buehne .pk-preis,.pf-buehne .rate-amount, .pf-buehne .pk-text,.pf-buehne .rate-desc{transform:none} .pf-seite::after{display:none} .pf-schalter svg{transition:none} .pf-schalter:hover svg{transform:none} } /* =================================================================== 7. Leistungsfenster Gleiche Bauart wie die uebrigen Fenster der Website: transparenter , darin eine eigene Schale mit Rahmen, Radius und Schatten. =================================================================== */ /* Der selbst spannt die ganze Flaeche auf und zentriert die Schale darin. Der naheliegende Weg ueber margin:auto scheitert hier: Mit inset:0 und width:auto wird der Dialog so breit wie das Fenster, und die schmalere Schale klebt dann am linken Rand. Ein Raster mit place-items:center ist der zuverlaessige Weg. display gilt bewusst nur fuer [open] - sonst wuerde das Raster die Voreinstellung display:none des geschlossenen Dialogs aushebeln und das Fenster staende dauerhaft offen. */ .pf-dialog{width:100%;height:100%;max-width:none;max-height:none; inset:0;margin:0;padding:0;border:0; background:transparent;color:var(--text-1);overflow:visible} .pf-dialog[open]{display:grid;place-items:center} .pf-dialog::backdrop{background:var(--schleier); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .pf-dialog-schale{ position:relative; width:min(620px,calc(100vw - 32px)); max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px); overflow-y:auto;overscroll-behavior:contain; padding:clamp(26px,4vw,40px); border:1px solid var(--border-accent);border-radius:20px; background:var(--surface); box-shadow:0 28px 100px rgba(var(--schatten-rgb),.5)} .pf-dialog-zu{position:absolute;top:16px;right:16px; display:grid;place-items:center;width:44px;height:44px;padding:0; border:1px solid var(--border);border-radius:12px; background:var(--bg);color:var(--text-2); font:400 1.5rem/1 var(--font-body);cursor:pointer; transition:border-color .2s,color .2s,transform .16s var(--ease-out)} .pf-dialog-zu:hover{border-color:var(--accent-text);color:var(--accent-text)} .pf-dialog-zu:active{transform:scale(.97)} .pf-dialog-zu:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px} .pf-dialog-kopf{margin:0 56px 22px 0;padding-bottom:18px; border-bottom:1px solid var(--border)} .pf-dialog-name{font-family:var(--font-display);font-weight:700; font-size:clamp(1.25rem,3vw,1.625rem);letter-spacing:-.02em; color:var(--text-1);margin:0} .pf-dialog-preis{margin:8px 0 0; font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-text)} /* Der eingezogene Koerper darf hier vollstaendig aufklappen. */ .pf-dialog-inhalt .pk-koerper, .pf-dialog-inhalt .rate-body{ display:block !important;grid-template-rows:1fr !important; overflow:visible !important;transition:none !important} /* Und der Inhalt darin muss auch sichtbar sein. Die Karte blendet ihn beim Aufklappen ein (opacity 0 -> 1, 8px von unten); im Fenster gibt es kein Aufklappen, auf das dieser Uebergang warten koennte - ohne die naechsten beiden Zeilen stuende die Liste vollstaendig da, nur eben auf opacity:0. Genau das war der Fall: Ueberschrift und Preis sichtbar, darunter leer. Das !important ist noetig, nicht bequem. Die Gegenregeln stehen im Seitenkopf (.js .rate-body-inner in webdesign.html, .ptf-aktiv .pk-koerper-innen in preistafel-karten.css) und haben mit 0,2,0 dasselbe Gewicht wie der Selektor hier. Der Seitenkopf wird nach dieser Datei geladen und gewaenne den Gleichstand. */ .pf-dialog-inhalt .pk-koerper-innen, .pf-dialog-inhalt .rate-body-inner{ padding:0;overflow:visible !important; opacity:1 !important;transform:none !important;transition:none !important} .pf-dialog-inhalt .pk-liste, .pf-dialog-inhalt .rate-features{margin-top:0} .pf-dialog-inhalt .pk-koerper-innen>:last-child{margin-bottom:0} @media (prefers-reduced-motion: reduce){ .pf-dialog-zu{transition:none} .pf-dialog-zu:active{transform:none} } /* ========================================================================= 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 =====