/* * Thera X Szenen – Gestaltung und Effekt-Bausteine * Datei: wp-content/plugins/thera-x-szenen/assets/css/szenen.css * Aufbau: * 1. Design-Werte (Farben, Abstände) 6. Szene Verordnung (Ampel, roter Faden) * 2. Grundlagen (Typo, Knöpfe, Chips) 7. Szene Sicherheit, Abrechnung * 3. Geräterahmen (Laptop, Tablet, Handy) 8. Szene Geräte-Wechsel, Zeitleiste * 4. Erzählung (Schritte + feste Bühne) 9. Rechner, Vergleichstabelle, Karten * 5. Szene Körperkarte 10. Bewegung aus (reduced motion) * Alle Klassen beginnen mit „txs-“, damit das Theme sie nicht überschreibt. */ /* ---------- 0. Schrift Inter (lokal, OFL – keine Verbindung zu Google) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- 1. Design-Werte ---------- */ :root { --tx-navy: #0B2545; --tx-navy-2: #0E3A63; --tx-blau: #0E72AE; --tx-blau-d: #0B5E8C; --tx-mint: #7DD3C7; --tx-mint-d: #2E9E8F; --tx-mint-h: #E7F6F3; --tx-himmel: #EAF3FA; --tx-flaeche: #F5F7FA; --tx-text: #17283A; --tx-grau: #5A6B7C; --tx-linie: #DFE6EE; --tx-neu: #E8590C; --tx-rot: #D64545; --tx-gelb: #E9A825; --tx-gruen: #2E9E5B; --tx-radius: 18px; --tx-schatten: 0 24px 60px -24px rgba(11, 37, 69, .35); --tx-glas: rgba(255, 255, 255, .06); --tx-glas-rand: rgba(255, 255, 255, .12); } /* ---------- 2. Grundlagen ---------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .txs-dunkel { color: #DCE6F0; } .txs-dunkel h1, .txs-dunkel h2, .txs-dunkel h3, .txs-dunkel h4 { color: #fff; } .txs-verlauf-dunkel { background: radial-gradient(120% 90% at 85% 0%, var(--tx-navy-2) 0%, var(--tx-navy) 55%, #071a33 100%) !important; } .txs-obertitel, .txs-obertitel .elementor-heading-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-blau) !important; } .txs-dunkel .txs-obertitel, .txs-dunkel .txs-obertitel .elementor-heading-title { color: var(--tx-mint) !important; } .txs-mint { color: var(--tx-mint); } .txs-blau { color: var(--tx-blau); } /* Wortwechsel in der H1 (Text bleibt im HTML vollständig lesbar) */ .txs-wechsel { display: block; min-height: 2.12em; color: var(--tx-mint); transition: opacity .45s ease, transform .45s ease; } .txs-wechsel.txs-aus { opacity: 0; transform: translateY(.35em); } /* Chips / Abzeichen */ .txs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .txs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 14px; line-height: 1.2; background: var(--tx-himmel); color: var(--tx-blau-d); font-weight: 500; } .txs-dunkel .txs-chip { background: var(--tx-glas); color: #E6EEF6; border: 1px solid var(--tx-glas-rand); } .txs-abzeichen { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--tx-neu); color: #fff; vertical-align: middle; } .txs-abzeichen--status { background: var(--tx-himmel); color: var(--tx-blau-d); } .txs-abzeichen--pilot { background: #FFF3E6; color: #9A3D00; } .txs-abzeichen--entw { background: #EEF0F3; color: #44505C; } /* Knöpfe: gleiche Höhe, sichtbarer Fokus */ .elementor-button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(14, 114, 174, .6); } a:focus-visible, button:focus-visible, .elementor-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--tx-mint) !important; outline-offset: 3px !important; } /* Karten */ .txs-karte { background: #fff; border: 1px solid var(--tx-linie); border-radius: var(--tx-radius); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .txs-karte:hover { transform: translateY(-4px); box-shadow: var(--tx-schatten); border-color: #C9D8E6; } .txs-dunkel .txs-karte, .txs-karte--glas { background: var(--tx-glas) !important; border-color: var(--tx-glas-rand) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Einblenden beim Scrollen (Grundzustand nur, wenn JS aktiv ist) */ .txs-js .txs-einblenden > .e-con-inner > *, .txs-js .txs-einblenden:not(:has(> .e-con-inner)) > * { opacity: 0; transform: translate3d(0, 36px, 0); } .txs-js .txs-einblenden.txs-sichtbar > .e-con-inner > *, .txs-js .txs-einblenden.txs-sichtbar:not(:has(> .e-con-inner)) > * { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); /* Apple-ähnliche Ausklingkurve */ } .txs-js .txs-einblenden.txs-sichtbar > * > *:nth-child(2), .txs-js .txs-einblenden.txs-sichtbar > *:nth-child(2) { transition-delay: .08s; } .txs-js .txs-einblenden.txs-sichtbar > * > *:nth-child(3), .txs-js .txs-einblenden.txs-sichtbar > *:nth-child(3) { transition-delay: .16s; } .txs-js .txs-einblenden.txs-sichtbar > * > *:nth-child(4), .txs-js .txs-einblenden.txs-sichtbar > *:nth-child(4) { transition-delay: .24s; } .txs-js .txs-einblenden.txs-sichtbar > * > *:nth-child(5), .txs-js .txs-einblenden.txs-sichtbar > *:nth-child(5) { transition-delay: .32s; } .txs-js .txs-einblenden.txs-sichtbar > * > *:nth-child(n+6), .txs-js .txs-einblenden.txs-sichtbar > *:nth-child(n+6) { transition-delay: .4s; } /* ---------- 3. Geräterahmen ---------- */ .txs-laptop { position: relative; width: 100%; max-width: 980px; margin: 0 auto; perspective: 1600px; } .txs-laptop__deckel { position: relative; background: #1B2733; border-radius: 18px 18px 6px 6px; padding: 2.2% 2.2% 2.6%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06); transform-origin: 50% 100%; will-change: transform; } .txs-laptop__deckel img { display: block; width: 100%; height: auto; border-radius: 6px; } .txs-laptop__basis { height: 14px; margin: 0 -5%; border-radius: 0 0 16px 16px; background: linear-gradient(#3A4A5A, #222E3A); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); } .txs-handy { position: relative; width: 100%; max-width: 260px; aspect-ratio: 720 / 1600; background: #111A23; border-radius: 34px; padding: 9px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); } .txs-handy img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; } .txs-tablet { position: relative; width: 100%; max-width: 760px; background: #16212C; border-radius: 26px; padding: 2.4%; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .5); } .txs-tablet img { display: block; width: 100%; height: auto; border-radius: 12px; } /* Startbereich: Laptop + Handy */ .txs-hero-geraete { position: relative; padding: 2% 0 10%; } .txs-hero-geraete .txs-handy { position: absolute; right: 2%; bottom: 0; width: 23%; min-width: 120px; } @media (max-width: 767px) { .txs-hero-geraete { padding-bottom: 16%; } .txs-hero-geraete .txs-handy { width: 30%; right: 0; border-radius: 22px; padding: 6px; } .txs-hero-geraete .txs-handy img { border-radius: 17px; } } /* ---------- 4. Erzählung: Schritte links, feste Bühne rechts ---------- */ .txs-erzaehlung { position: relative; } .txs-schritt { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s ease; } .txs-schritt.txs-aktiv { opacity: 1; } .txs-buehne-spalte { align-self: stretch !important; } .txs-buehne-spalte > .elementor-widget, .txs-buehne-halter { position: sticky !important; top: 12vh; } .txs-buehne { position: relative; width: 100%; min-height: 76vh; display: flex; align-items: center; justify-content: center; } .txs-schritt__nr { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; background: var(--tx-himmel); color: var(--tx-blau-d); margin-bottom: 12px; } .txs-dunkel .txs-schritt__nr { background: rgba(125, 211, 199, .15); color: var(--tx-mint); } @media (max-width: 1024px) { /* Handy/Tablet: Bühne bleibt oben stehen (deckend), Schritte laufen darunter hindurch */ .txs-erzaehlung { flex-direction: column !important; } .txs-buehne-spalte { order: -1; position: sticky !important; top: 60px; z-index: 5; width: 100% !important; background: #fff; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); padding-bottom: 18px !important; margin-left: -24px; margin-right: -24px; padding-left: 24px !important; padding-right: 24px !important; width: calc(100% + 48px) !important; } .txs-dunkel .txs-buehne-spalte { background: #0A2342; } .txs-buehne-spalte > .elementor-widget, .txs-buehne-halter { position: relative !important; top: 0; } .txs-buehne { min-height: 0; height: 50vh; } .txs-schritt { min-height: 55vh; position: relative; z-index: 1; opacity: 1; justify-content: flex-start; padding-top: 8px !important; } .txs-vo { transform: scale(.78); transform-origin: 50% 0; margin-top: 4px; } .txs-geraet-buehne { min-height: 0; } } @media (max-width: 767px) { /* Handy: Seitenabstand der Container ist hier 18 px – Bühne exakt bündig, kein Querscrollen */ .txs-buehne-spalte { margin-left: -18px; margin-right: -18px; padding-left: 18px !important; padding-right: 18px !important; width: calc(100% + 36px) !important; } } /* Sicherheitsnetz gegen waagerechtes Scrollen (clip statt hidden, damit sticky funktioniert) */ html, body { overflow-x: clip; } /* ---------- 5. Szene Körperkarte ---------- */ .txs-koerper { perspective: 1400px; } .txs-koerper__glow { position: absolute; inset: 10% 15%; border-radius: 50%; background: radial-gradient(closest-side, rgba(125, 211, 199, .28), rgba(14, 114, 174, .12) 60%, transparent 75%); transition: transform 1s ease, opacity 1s ease; will-change: transform, opacity; /* weicher Verlauf ohne teuren Blur-Filter */ } .txs-koerper__dreher { position: relative; height: 70vh; aspect-ratio: 800 / 1600; } .txs-koerper__ebene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s ease; } /* Zustand 0: die drei 2D-Ebenen wechseln sich ab (Regionen → Muskeln → Skelett) */ .txs-koerper[data-zustand="0"] .txs-k-regionen, .txs-koerper[data-zustand="0"] .txs-k-muskel, .txs-koerper[data-zustand="0"] .txs-k-skelett { animation: txs-ebenen 7.5s ease-in-out infinite; } .txs-koerper[data-zustand="0"] .txs-k-muskel { animation-delay: 2.5s; } .txs-koerper[data-zustand="0"] .txs-k-skelett { animation-delay: 5s; } @keyframes txs-ebenen { 0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } /* Zustand 1: 3D-Bildfolge (Canvas, vom Scrollen gedreht) · Zustand 2/3: Rückansicht mit Markierungen */ .txs-k3d { transform: scale(1.18); transform-origin: 50% 46%; } .txs-koerper[data-zustand="1"] .txs-k3d, .txs-koerper[data-zustand="2"] .txs-k-markiert, .txs-koerper[data-zustand="3"] .txs-k-markiert { opacity: 1; } .txs-koerper[data-zustand="1"] .txs-koerper__glow { transform: scale(1.08); } .txs-marke { position: absolute; display: flex; gap: 10px; align-items: flex-start; max-width: 240px; padding: 10px 14px; border-radius: 14px; background: rgba(11, 37, 69, .78); border: 1px solid var(--tx-glas-rand); color: #E8F0F7; font-size: 13px; line-height: 1.35; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .5s ease; } .txs-marke strong { display: block; color: #fff; font-size: 13.5px; } .txs-marke__punkt { flex: 0 0 12px; height: 12px; margin-top: 3px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); } .txs-koerper[data-zustand="2"] .txs-marke, .txs-koerper[data-zustand="3"] .txs-marke--aus { opacity: 1; transform: none; } .txs-marke { transition-delay: calc(var(--i, 0) * .12s); } .txs-koerper[data-zustand="3"] .txs-marke:not(.txs-marke--aus) { transition-delay: 0s; } .txs-ebenen-name { position: absolute; z-index: 3; bottom: 2%; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(11, 37, 69, .82); border: 1px solid var(--tx-glas-rand); font-size: 12.5px; color: #B9C8D8; white-space: nowrap; } .txs-ebenen-name span { padding: 5px 12px; border-radius: 999px; transition: background .4s, color .4s; } .txs-koerper[data-zustand="0"] .txs-en-0, .txs-koerper[data-zustand="1"] .txs-en-1, .txs-koerper[data-zustand="2"] .txs-en-2, .txs-koerper[data-zustand="3"] .txs-en-2 { background: var(--tx-mint); color: var(--tx-navy); font-weight: 700; } .txs-tippen { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); width: min(92%, 440px); padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--tx-text); font-size: 15px; box-shadow: var(--tx-schatten); opacity: 0; transition: opacity .5s ease; } .txs-tippen::before { content: "Beschwerden beschreiben"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-blau); margin-bottom: 4px; } .txs-tippen__text::after { content: "|"; margin-left: 1px; animation: txs-cursor 1s steps(1) infinite; color: var(--tx-blau); } .txs-koerper[data-zustand="3"] .txs-tippen { opacity: 1; } @keyframes txs-cursor { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .txs-koerper .txs-koerper__ebene { animation: none !important; } } @media (max-width: 1024px) { .txs-koerper__dreher { height: 40vh; } .txs-marke { max-width: 180px; font-size: 12.5px; padding: 7px 10px; } .txs-marke--klein-aus { display: none; } .txs-ebenen-name { font-size: 12px; } } /* ---------- 6. Szene Verordnung ---------- */ .txs-vo { position: relative; width: min(100%, 560px); } .txs-vo__formular { position: relative; background: #fff; border-radius: 20px; border: 1px solid var(--tx-linie); box-shadow: var(--tx-schatten); padding: 22px; overflow: hidden; } .txs-vo__kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--tx-text); margin-bottom: 14px; } .txs-vo__feld { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--tx-linie); font-size: 14px; } .txs-vo__feld span:first-child { color: var(--tx-grau); } .txs-vo__wert { font-weight: 600; color: var(--tx-text); clip-path: inset(0 100% 0 0); transition: clip-path .8s ease; } .txs-vo[data-zustand]:not([data-zustand="0"]) .txs-vo__wert { clip-path: inset(0 0 0 0); } .txs-vo__feld:nth-child(3) .txs-vo__wert { transition-delay: .15s; } .txs-vo__feld:nth-child(4) .txs-vo__wert { transition-delay: .3s; } .txs-vo__feld:nth-child(5) .txs-vo__wert { transition-delay: .45s; } .txs-vo__feld:nth-child(6) .txs-vo__wert { transition-delay: .6s; } .txs-vo__foto { background: #FFFDF6; padding: 14px; display: grid; gap: 7px; border: 1px solid #E8E1CC; position: absolute; right: -6%; top: -8%; width: 46%; border-radius: 14px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .45); transform: rotate(7deg) translate(8%, -4%); opacity: 1; transition: transform 1s cubic-bezier(.6, .05, .25, 1), opacity .8s ease; } .txs-vo[data-zustand]:not([data-zustand="0"]) .txs-vo__foto { background: #FFFDF6; padding: 14px; display: grid; gap: 7px; border: 1px solid #E8E1CC; transform: rotate(0) translate(-60%, 60%) scale(.3); opacity: 0; } .txs-vo__pruefung { margin-top: 14px; display: grid; gap: 6px; font-size: 13.5px; } .txs-vo__pruefung div { display: flex; gap: 8px; align-items: center; opacity: .25; transition: opacity .4s ease; } .txs-vo__pruefung div::before { content: "✓"; display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--tx-mint-h); color: var(--tx-mint-d); } .txs-vo[data-zustand="1"] .txs-vo__pruefung div, .txs-vo[data-zustand="2"] .txs-vo__pruefung div, .txs-vo[data-zustand="3"] .txs-vo__pruefung div { opacity: 1; } .txs-vo__pruefung div:nth-child(2) { transition-delay: .15s; } .txs-vo__pruefung div:nth-child(3) { transition-delay: .3s; } .txs-vo__pruefung div:nth-child(4) { transition-delay: .45s; } .txs-vo__pruefung div:nth-child(5) { transition-delay: .6s; } /* Ampel */ .txs-ampel { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--tx-flaeche); border: 1px solid var(--tx-linie); } .txs-ampel__gehaeuse { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: #1B2733; } .txs-ampel__licht { width: 20px; height: 20px; border-radius: 50%; background: #3A4653; transition: background .4s, box-shadow .4s; } .txs-ampel__text { font-size: 14px; color: var(--tx-text); } .txs-ampel__text strong { display: block; font-size: 15px; } .txs-ampel__text span { display: none; } .txs-vo[data-ampel="rot"] .txs-ampel__licht--rot { background: var(--tx-rot); box-shadow: 0 0 16px 2px rgba(214, 69, 69, .7); } .txs-vo[data-ampel="gelb"] .txs-ampel__licht--gelb { background: var(--tx-gelb); box-shadow: 0 0 16px 2px rgba(233, 168, 37, .7); } .txs-vo[data-ampel="gruen"] .txs-ampel__licht--gruen { background: var(--tx-gruen); box-shadow: 0 0 16px 2px rgba(46, 158, 91, .7); } .txs-vo[data-ampel="rot"] .txs-at-rot, .txs-vo[data-ampel="gelb"] .txs-at-gelb, .txs-vo[data-ampel="gruen"] .txs-at-gruen { display: block; } .txs-vo:not([data-ampel]) .txs-at-leer { display: block; } /* Roter Faden */ .txs-faden { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); margin-top: 18px; font-size: 11px; color: var(--tx-grau); text-align: center; } .txs-faden::before, .txs-faden__fort { content: ""; position: absolute; left: 6.25%; right: 6.25%; top: 10px; height: 3px; background: var(--tx-linie); border-radius: 3px; } .txs-faden__fort { right: auto; width: 87.5%; background: var(--tx-rot); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); } .txs-vo[data-zustand="3"] .txs-faden__fort { transform: scaleX(1); } .txs-faden > span:not(.txs-faden__fort) { position: relative; padding-top: 26px; } .txs-faden > span:not(.txs-faden__fort)::before { content: ""; position: absolute; top: 3px; left: 50%; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: #fff; border: 3px solid var(--tx-linie); transition: border-color .4s, background .4s; } .txs-vo[data-zustand="3"] .txs-faden > span:not(.txs-faden__fort)::before { border-color: var(--tx-rot); background: var(--tx-rot); } .txs-vo[data-zustand="3"] .txs-faden > span:nth-child(n+8)::before { background: #fff; transition-delay: 0s; } @media (max-width: 767px) { .txs-vo__formular { padding: 14px; } .txs-vo__feld { grid-template-columns: 100px 1fr; font-size: 12.5px; padding: 5px 0; } .txs-vo__pruefung { display: none; } .txs-faden { font-size: 0; } } /* ---------- 7. Sicherheit, Abrechnung ---------- */ .txs-schild { position: relative; width: 120px; height: 140px; margin: 0 auto 10px; } .txs-schild svg { width: 100%; height: 100%; filter: drop-shadow(0 0 0 rgba(125, 211, 199, 0)); transition: filter 1.2s ease; } .txs-sichtbar .txs-schild svg, .txs-schild.txs-sichtbar svg { filter: drop-shadow(0 0 22px rgba(125, 211, 199, .55)); } .txs-verschluesseln { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .02em; color: var(--tx-mint); background: rgba(0, 0, 0, .25); border: 1px solid var(--tx-glas-rand); border-radius: 12px; padding: 12px 16px; display: inline-block; min-width: 280px; } .txs-stapel { position: relative; min-height: 460px; } .txs-stapel__karte { position: absolute; width: 82%; border-radius: 14px; overflow: hidden; box-shadow: var(--tx-schatten); border: 1px solid var(--tx-linie); background: #fff; will-change: transform; } .txs-stapel__karte img { display: block; width: 100%; height: auto; } .txs-stapel__karte:nth-child(1) { left: 0; top: 0; } .txs-stapel__karte:nth-child(2) { right: 0; top: 46%; width: 70%; } .txs-summe { position: absolute; left: 6%; bottom: -4%; padding: 14px 18px; border-radius: 16px; background: var(--tx-navy); color: #fff; box-shadow: var(--tx-schatten); font-size: 13px; } .txs-summe b { display: block; font-size: 26px; color: var(--tx-mint); font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .txs-stapel { min-height: 330px; } .txs-summe b { font-size: 21px; } } /* ---------- 8. Geräte-Wechsel, Zeitleiste ---------- */ .txs-geraet-buehne { display: flex; align-items: center; justify-content: center; min-height: 70vh; } .txs-geraet { position: relative; width: min(92%, 760px); aspect-ratio: 16 / 10; background: #16212C; border-radius: 18px; padding: 12px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); transition: width .9s cubic-bezier(.6, .05, .25, 1), aspect-ratio .9s cubic-bezier(.6, .05, .25, 1), border-radius .9s ease, padding .9s ease; } .txs-geraet__bild { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: cover; object-position: top left; border-radius: 8px; opacity: 0; transition: opacity .6s ease; } .txs-geraet[data-form="desktop"] .txs-gb-desktop, .txs-geraet[data-form="server"] .txs-gb-desktop, .txs-geraet[data-form="tablet"] .txs-gb-tablet, .txs-geraet[data-form="handy"] .txs-gb-handy { opacity: 1; } .txs-geraet[data-form="tablet"] { width: min(80%, 620px); aspect-ratio: 16 / 10; border-radius: 28px; padding: 16px; } .txs-geraet[data-form="tablet"] .txs-geraet__bild { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); border-radius: 12px; } .txs-geraet[data-form="handy"] { width: min(42%, 270px); aspect-ratio: 720 / 1600; border-radius: 38px; padding: 9px; } .txs-geraet[data-form="handy"] .txs-geraet__bild { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); border-radius: 30px; } .txs-geraet[data-form="server"] { box-shadow: 0 0 0 2px var(--tx-mint), 0 40px 80px -30px rgba(0, 0, 0, .55); } .txs-geraet__schild { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--tx-navy); color: #fff; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } .txs-zeitleiste { position: relative; padding-left: 34px; } .txs-zeitleiste::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--tx-linie); } .txs-zeitleiste__fort { position: absolute; left: 11px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(var(--tx-blau), var(--tx-mint)); transform-origin: 50% 0; will-change: transform; } .txs-zeitleiste__punkt { position: relative; padding: 0 0 26px; } .txs-zeitleiste__punkt::before { content: ""; position: absolute; left: -29px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--tx-blau); } .txs-zeitleiste__punkt h3, .txs-zeitleiste__punkt h4 { margin: 0 0 4px; font-size: 17px; line-height: 1.35; } .txs-zeitleiste__punkt p { margin: 0; color: var(--tx-grau); font-size: 15px; } .txs-dunkel .txs-zeitleiste__punkt p { color: #B9C8D8; } /* ---------- 9. Rechner, Vergleich, Bild-Zoom ---------- */ .txs-rechner { background: #fff; border: 1px solid var(--tx-linie); border-radius: 22px; padding: 26px; box-shadow: var(--tx-schatten); color: var(--tx-text); } .txs-rechner label { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 6px; } .txs-rechner output { float: right; font-weight: 800; color: var(--tx-blau-d); font-variant-numeric: tabular-nums; } .txs-rechner input[type=range] { width: 100%; accent-color: var(--tx-blau); height: 28px; } .txs-rechner__ergebnis { margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--tx-himmel); } .txs-rechner__gross { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 800; color: var(--tx-blau-d); line-height: 1.1; font-variant-numeric: tabular-nums; } .txs-rechner__klein { font-size: 13px; color: var(--tx-grau); margin-top: 10px; } .txs-vergleich { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid var(--tx-linie); background: #fff; } .txs-vergleich table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; margin: 0; } .txs-vergleich th, .txs-vergleich td { padding: 12px 14px; border-bottom: 1px solid var(--tx-linie); text-align: center; vertical-align: middle; border-left: 0; border-right: 0; border-top: 0; } .txs-vergleich thead th { background: var(--tx-flaeche); font-size: 13.5px; position: sticky; top: 0; z-index: 1; } .txs-vergleich th:first-child, .txs-vergleich td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 2; font-weight: 600; min-width: 210px; box-shadow: 1px 0 0 var(--tx-linie); } .txs-vergleich thead th:first-child { background: var(--tx-flaeche); z-index: 3; } .txs-vergleich .txs-wir { background: var(--tx-himmel) !important; font-weight: 700; color: var(--tx-blau-d); } .txs-vergleich thead .txs-wir { background: var(--tx-blau) !important; color: #fff; font-size: 15px; } .txs-ja, .txs-nein, .txs-bald, .txs-teil { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .txs-ja { background: #DDF3E6; color: #1F7A45; } .txs-ja::before { content: "✓"; } .txs-nein { background: #FBE3E3; color: #B42F2F; } .txs-nein::before { content: "✕"; } .txs-bald { background: #FFF0E3; color: #A44A00; } .txs-bald::before { content: "◷"; } .txs-teil { background: #EEF0F3; color: #44505C; } .txs-teil::before { content: "◐"; } .txs-vergleich small { display: block; color: var(--tx-grau); font-size: 12.5px; font-weight: 400; margin-top: 2px; } .txs-zoom { overflow: hidden; border-radius: var(--tx-radius); } .txs-zoom img { will-change: transform; transform-origin: 50% 60%; } .txs-galerie .txs-handy { width: 220px; } /* Grundwert; Raster-Darstellung siehe „Galerie Praxisalltag“ (1.5.0) am Dateiende */ .txs-bildnachweis { font-size: 12px; color: #556778; margin-top: 8px; } .txs-bildnachweis a { color: inherit; text-decoration: underline; } /* ---------- 10. Bewegung aus ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .txs-js .txs-einblenden > .e-con-inner > *, .txs-js .txs-einblenden > * { opacity: 1 !important; transform: none !important; } .txs-schritt { opacity: 1; } } .txs-ohne-effekte .txs-einblenden > .e-con-inner > *, .txs-ohne-effekte .txs-einblenden > * { opacity: 1 !important; transform: none !important; } /* ---------- 11. Kennzahlen, TI-Zahlen, Preise, Ansprechpartner, Ampel-Karten ---------- */ .txs-kennzahl__wert { display: block; font-size: clamp(34px, 4vw, 46px); font-weight: 800; color: var(--tx-blau-d); letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; } .txs-kennzahl__text { display: block; margin-top: 8px; color: var(--tx-grau); font-size: 15.5px; line-height: 1.5; } .txs-ti-zahlen { display: grid; gap: 14px; } .txs-ti-zahlen--quer { grid-template-columns: repeat(3, 1fr); } .txs-ti-zahl { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--tx-linie); box-shadow: var(--tx-schatten); } .txs-ti-zahlen--quer .txs-ti-zahl { flex-direction: column; align-items: flex-start; gap: 8px; } .txs-ti-zahl b { flex: 0 0 auto; min-width: 128px; font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -1px; color: var(--tx-navy); line-height: 1; } .txs-ti-zahl span { color: var(--tx-text); font-size: 16px; line-height: 1.45; } .txs-ti-zahl small { color: var(--tx-grau); font-size: 13px; } .txs-ti-zahl--rot b { color: var(--tx-rot); } .txs-ti-zahl--gruen { background: var(--tx-navy); border-color: var(--tx-navy); } .txs-ti-zahl--gruen b { color: var(--tx-mint); } .txs-ti-zahl--gruen span { color: #E6EEF6; } @media (max-width: 767px) { .txs-ti-zahlen--quer { grid-template-columns: 1fr; } .txs-ti-zahl { flex-direction: column; align-items: flex-start; gap: 6px; } } .txs-preis-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 767px) { .txs-preis-raster { grid-template-columns: 1fr; } } .txs-preis { height: 100%; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--tx-linie); box-shadow: var(--tx-schatten); color: var(--tx-text); } .txs-preis--hervor { background: var(--tx-navy); border-color: var(--tx-navy); color: #E6EEF6; } .txs-preis h3 { margin: 0 0 6px; font-size: 20px; color: inherit; } .txs-preis--hervor h3 { color: #fff; } .txs-preis__betrag { margin: 0; font-size: 15px; } .txs-preis__betrag b { font-size: 48px; font-weight: 800; letter-spacing: -1.5px; color: var(--tx-blau-d); margin-right: 4px; } .txs-preis--hervor .txs-preis__betrag b { color: var(--tx-mint); } .txs-preis__fuer { font-size: 14px; color: var(--tx-grau); margin: 6px 0 14px; } .txs-preis--hervor .txs-preis__fuer { color: #B9C8D8; } .txs-preis ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15.5px; } .txs-preis li::before { content: "✓"; color: var(--tx-mint-d); font-weight: 800; margin-right: 8px; } .txs-preis--hervor li::before { color: var(--tx-mint); } .txs-rechenbeispiel { width: 100%; max-width: 520px; margin: 22px auto 0; border-collapse: collapse; font-size: 16px; } .txs-rechenbeispiel caption { text-align: left; font-weight: 700; margin-bottom: 8px; } .txs-rechenbeispiel td, .txs-rechenbeispiel th { padding: 8px 0; border-bottom: 1px solid var(--tx-linie); text-align: left; } .txs-rechenbeispiel td:last-child, .txs-rechenbeispiel th:last-child { text-align: right; font-variant-numeric: tabular-nums; } .txs-ansprechpartner { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 18px; background: var(--tx-flaeche); border: 1px solid var(--tx-linie); } /* 1.3.0: Porträt größer (Wunsch 27.10.2026), Gesicht bleibt mittig im Quadrat */ .txs-ansprechpartner__bild { width: 168px !important; height: 168px !important; object-fit: cover; object-position: 50% 30%; border-radius: 20px; flex: 0 0 168px; background: #EBEBEB; } @media (max-width: 767px) { .txs-ansprechpartner { flex-direction: column; align-items: flex-start; } .txs-ansprechpartner__bild { width: 140px !important; height: 140px !important; flex-basis: 140px; } } .txs-ansprechpartner div { display: grid; gap: 2px; font-size: 15.5px; } .txs-ansprechpartner strong { font-size: 17px; color: var(--tx-text); } .txs-ansprechpartner span { color: var(--tx-grau); } .txs-ansprechpartner a { color: var(--tx-blau); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; } .txs-ampel-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 767px) { .txs-ampel-karten { grid-template-columns: 1fr; } } .txs-ampel-karte { padding: 20px; border-radius: 18px; border: 1px solid var(--tx-linie); background: #fff; display: grid; gap: 6px; border-top: 6px solid; } .txs-ampel-karte b { font-size: 17px; } .txs-ampel-karte span { color: var(--tx-grau); font-size: 15.5px; } .txs-ampel-karte--rot { border-top-color: var(--tx-rot); } .txs-ampel-karte--gelb { border-top-color: var(--tx-gelb); } .txs-ampel-karte--gruen { border-top-color: var(--tx-gruen); } .txs-rechtstext h2 { font-size: 22px; margin: 28px 0 8px; color: var(--tx-text); } .txs-sicherheit { position: relative; } .txs-dunkel .txs-karte .elementor-icon-box-description a, .txs-karte .elementor-icon-box-description a { font-weight: 600; } .elementor-widget-icon-box .elementor-icon-box-title { margin-top: 0; } .txs-karte .elementor-icon-box-wrapper { text-align: left; } .txs-vo__foto i { display: block; height: 7px; border-radius: 4px; background: #E6DFC8; } .txs-vo__foto i:nth-child(2n) { width: 70%; } .txs-vo__foto i:nth-child(3n) { width: 85%; } .txs-vo__foto b { font-size: 11px; letter-spacing: .08em; color: #6E6240; text-transform: uppercase; } /* Logo im Kopf: Bild und Schriftzug auf einer Linie */ .txs-marke-logo .elementor-widget-html, .txs-marke-logo .elementor-widget-container { display: flex; align-items: center; gap: 10px; } @media (max-width: 767px) { .txs-vergleich th:first-child, .txs-vergleich td:first-child { min-width: 132px; font-size: 13px; } .txs-vergleich table { font-size: 13px; min-width: 760px; } .txs-vergleich th, .txs-vergleich td { padding: 10px 8px; } .txs-buehne { height: 48vh; } .txs-vo { transform: scale(.7); } } /* ---------- 12. Ratgeber (Beiträge und Übersicht) ---------- */ .txs-brotkrumen { margin: 0; font-size: 14px; color: #B9C8D8; } .txs-brotkrumen a { color: var(--tx-mint); text-decoration: none; } .txs-autor { margin: 0; color: #B9C8D8; font-size: 15px; } .txs-artikel-bild img { width: 100%; height: auto; border-radius: 18px; } .txs-artikel { font-size: 18.5px; line-height: 1.75; color: #24364A; } .txs-artikel .txs-lead { font-size: 21px; line-height: 1.6; color: var(--tx-text); font-weight: 500; } .txs-artikel h2 { font-size: 30px; line-height: 1.2; margin: 44px 0 14px; color: var(--tx-text); letter-spacing: -.4px; } .txs-artikel h3 { font-size: 21px; margin: 28px 0 8px; color: var(--tx-text); } .txs-artikel ul, .txs-artikel ol { padding-left: 1.3em; margin: 0 0 1.2em; } .txs-artikel li { margin: 6px 0; } .txs-artikel a { color: var(--tx-blau); text-underline-offset: 3px; } .txs-artikel table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: 16px; display: block; overflow-x: auto; } .txs-artikel th, .txs-artikel td { padding: 11px 12px; border-bottom: 1px solid var(--tx-linie); text-align: left; vertical-align: top; } .txs-artikel thead th { background: var(--tx-himmel); color: var(--tx-blau-d); } .txs-artikel caption { text-align: left; font-weight: 700; padding: 0 0 8px; color: var(--tx-navy, #0B2545); } .elementor-widget-theme-post-title h1, .elementor-widget-heading h1 { text-wrap: balance; } .txs-kasten { margin: 24px 0; padding: 18px 20px; border-radius: 16px; background: var(--tx-mint-h); border-left: 5px solid var(--tx-mint-d); } .txs-kasten p { margin: 6px 0 0; } .txs-kasten--warnung { background: #FFF4E8; border-left-color: var(--tx-neu); } .txs-quellen { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--tx-linie); font-size: 15px; color: var(--tx-grau); } .txs-quellen h2 { font-size: 20px; margin-top: 0; } .txs-autorbox { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; background: var(--tx-flaeche); border: 1px solid var(--tx-linie); } .txs-autorbox img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; } .txs-autorbox p { margin: 4px 0 0; color: var(--tx-grau); font-size: 15.5px; } .txs-ratgeber-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } .txs-ratgeber-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tx-linie); border-radius: 20px; overflow: hidden; text-decoration: none !important; color: var(--tx-text); transition: transform .3s ease, box-shadow .3s ease; } .txs-ratgeber-karte:hover { transform: translateY(-4px); box-shadow: var(--tx-schatten); } .txs-ratgeber-karte__bild { height: 190px; overflow: hidden; } .txs-ratgeber-karte__bild img { display: block; width: 100%; height: 190px !important; object-fit: cover; } @media (max-width: 767px) { .txs-artikel table { font-size: 14px; } .txs-artikel th, .txs-artikel td { padding: 8px 8px; } .txs-artikel td:first-child, .txs-artikel th:first-child { min-width: 110px; } } .txs-ratgeber-karte__text { display: grid; gap: 8px; padding: 20px; } .txs-ratgeber-karte__text strong { font-size: 19px; line-height: 1.3; } .txs-ratgeber-karte__text span { color: var(--tx-grau); font-size: 15.5px; line-height: 1.5; } .txs-ratgeber-karte__text em { color: var(--tx-blau); font-style: normal; font-weight: 700; font-size: 15px; } @media (max-width: 767px) { .txs-artikel { font-size: 17px; } .txs-artikel .txs-lead { font-size: 18.5px; } .txs-artikel h2 { font-size: 25px; } } /* ---------- 13. Barrierefreiheit (Kontrast, Links im Fließtext) ---------- */ .txs-dunkel .txs-bildnachweis { color: #A9BACB; } .elementor-widget-text-editor a:not(.elementor-button), .txs-artikel p a, .txs-artikel li a, .txs-kasten a { text-decoration: underline; text-underline-offset: 2px; } .txs-sprungziel { display: block; height: 0; overflow: hidden; } /* ---------- 14. Video (Körperkarte) ---------- */ .txs-video-rahmen { position: relative; max-width: 320px; margin: 0 auto !important; /* Elementor setzt figure-Ränder mit hoher Spezifität auf 0 */ border-radius: 28px; overflow: hidden; background: #0A2342; box-shadow: var(--tx-schatten); aspect-ratio: 9 / 16; } .txs-video-rahmen--quer { max-width: 960px; aspect-ratio: 16 / 9; } .txs-video { display: block; width: 100%; height: 100%; object-fit: cover; } .txs-video-ki { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; line-height: 1.4; } /* ---------- 15. Responsiv: Feinschliff (Review 27.10.2026) ---------- */ /* Laptop-Unterteil darf auf schmalen Geräten nicht über den Rand ragen */ @media (max-width: 1024px) { .txs-laptop__basis { margin: 0 -2%; } } @media (max-width: 860px) { .txs-laptop__basis { margin: 0; } } /* Mindestgröße für Bedienelemente auf Touch-Geräten (WCAG 2.5.8) */ .e-n-menu-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } @media (pointer: coarse) { .e-n-menu-title { min-height: 44px; } .txs-fusszeile .elementor-icon-list-item a { min-height: 32px; display: inline-flex; align-items: center; } } /* KI-Hinweis der Mediathek lesbar halten */ .prm-kz-hinweis { font-size: 12px !important; } /* Handy quer (niedrige Höhe): Erzählungen zweispaltig wie am Desktop – Bühne links, Text rechts */ @media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) { .txs-erzaehlung { flex-direction: row !important; flex-wrap: nowrap !important; gap: 24px !important; } .txs-erzaehlung > .e-con { width: 50% !important; } .txs-buehne-spalte { order: 0; position: relative !important; top: auto; z-index: auto; width: 50% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; -webkit-mask-image: none; mask-image: none; } .txs-buehne-spalte > .elementor-widget, .txs-buehne-halter { position: sticky !important; top: 76px; } .txs-buehne { min-height: 0; height: calc(100vh - 90px); } .txs-koerper__dreher { height: calc(100vh - 130px); } .txs-schritt { min-height: 100vh; } .txs-vo { transform: scale(.5); transform-origin: 50% 0; margin-top: 0; } .txs-marke--klein-aus { display: none; } } /* ---------- 16. Weiches Scrollen (Lenis) und flüssige Szenen ---------- */ html.txs-weich { scroll-behavior: auto; } html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* Szenen-Elemente als eigene Ebenen: Transformationen laufen auf der Grafikkarte */ .txs-hero-text, .txs-laptop__deckel, .txs-hero-geraete .txs-handy, .txs-stapel__karte, .txs-zoom img { will-change: transform; backface-visibility: hidden; } .txs-schritt { transition: opacity .7s cubic-bezier(.16, 1, .3, 1); } .txs-koerper__dreher canvas { image-rendering: auto; } @media (prefers-reduced-motion: reduce) { .txs-faden__fort { transform: none; } } /* ---------- 17. Programmansichten, Bereichs-Navigation, klickbare Karten (1.2.0) ---------- */ /* Fensterrahmen um Bildschirmfotos aus Thera X; Klick öffnet die Großansicht (Elementor-Lightbox) */ .txs-fenster { margin: 0; border-radius: 14px; background: #fff; border: 1px solid var(--tx-linie); box-shadow: var(--tx-schatten); overflow: hidden; } .txs-fenster__leiste { display: flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px; background: linear-gradient(#F7F9FB, #EEF2F6); border-bottom: 1px solid var(--tx-linie); } .txs-fenster__leiste i { width: 10px; height: 10px; border-radius: 50%; background: #D5DDE6; } .txs-fenster__leiste i:first-child { background: #F08A7E; } .txs-fenster__leiste i:nth-child(2) { background: #F3C969; } .txs-fenster__leiste i:nth-child(3) { background: #7CCB8E; } .txs-fenster__bild { position: relative; display: block; cursor: zoom-in; background: #F5F7FA; } .txs-fenster__bild img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.16, 1, .3, 1); } .txs-fenster__bild:hover img, .txs-fenster__bild:focus-visible img { transform: scale(1.015); } .txs-fenster__lupe { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(11, 37, 69, .82); box-shadow: 0 6px 18px rgba(11, 37, 69, .3); opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .3s ease; } .txs-fenster__lupe::before { content: ""; position: absolute; left: 11px; top: 10px; width: 13px; height: 13px; border: 2.5px solid #fff; border-radius: 50%; } .txs-fenster__lupe::after { content: ""; position: absolute; left: 25px; top: 25px; width: 8px; height: 2.5px; background: #fff; transform: rotate(45deg); transform-origin: left center; border-radius: 2px; } .txs-fenster__bild:hover .txs-fenster__lupe, .txs-fenster__bild:focus-visible .txs-fenster__lupe { opacity: 1; transform: none; } @media (hover: none) { .txs-fenster__lupe { opacity: .9; transform: none; } } .txs-fenster figcaption { padding: 10px 14px 12px; font-size: 13.5px; line-height: 1.45; color: var(--tx-grau); border-top: 1px solid var(--tx-linie); background: #fff; } .txs-fenster__bild:focus-visible { outline: 3px solid var(--tx-blau); outline-offset: -3px; } .txs-dunkel .txs-fenster { border-color: rgba(255, 255, 255, .14); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); } .txs-hero-fenster { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transition: transform .8s cubic-bezier(.16, 1, .3, 1); } .txs-hero-fenster:hover { transform: none; } @media (max-width: 1024px) { .txs-hero-fenster { transform: none; } } .txs-fenster-raster { display: grid; gap: 22px; align-items: start; } .txs-fenster-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .txs-fenster-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .txs-fenster-raster--1 { max-width: 1100px; margin: 0 auto; width: 100%; } @media (max-width: 1024px) { .txs-fenster-raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .txs-fenster-raster--2, .txs-fenster-raster--3 { grid-template-columns: 1fr; } } /* Brotkrumen im dunklen Kopfbereich */ .txs-brotkrumen { margin: 0 0 4px; font-size: 14px; color: #9FB3C8; } .txs-brotkrumen a { color: #C9D6E3; text-decoration: none; border-bottom: 1px solid rgba(201, 214, 227, .35); } .txs-brotkrumen a:hover { color: #fff; border-bottom-color: #fff; } .txs-brotkrumen span { color: var(--tx-mint); } /* Bereichs-Navigation am Seitenende */ .txs-bereich-nav__kopf { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 18px; } .txs-bereich-nav__zurueck { font-weight: 700; font-size: 15px; color: var(--tx-blau-d); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; } .txs-bereich-nav__zurueck:hover { text-decoration: underline; } .txs-bereich-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .txs-bereich-nav li a { display: flex; gap: 10px; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tx-linie); color: var(--tx-text); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .txs-bereich-nav li a i { flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--tx-himmel); color: var(--tx-blau); font-size: 15px; } .txs-bereich-nav li a:hover, .txs-bereich-nav li a:focus-visible { border-color: var(--tx-blau); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(11, 37, 69, .45); } .txs-bereich-nav li a.ist-aktiv { background: var(--tx-navy); border-color: var(--tx-navy); color: #fff; } .txs-bereich-nav li a.ist-aktiv i { background: rgba(125, 211, 199, .18); color: var(--tx-mint); } @media (max-width: 767px) { .txs-bereich-nav ul { grid-template-columns: 1fr 1fr; } .txs-bereich-nav li a { font-size: 14px; padding: 8px 10px; } .txs-bereich-nav li a i { flex-basis: 28px; height: 28px; } } /* Klickbare Karten: der Titel-Link deckt die ganze Karte ab */ .txs-karte--link { position: relative; cursor: pointer; } .txs-karte--link .elementor-icon-box-title a { color: inherit; text-decoration: none; } .txs-karte--link .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .txs-karte--link .elementor-icon-box-description::after { content: "Mehr erfahren →"; display: block; margin-top: 10px; font-weight: 700; font-size: 14.5px; color: var(--tx-blau); transition: transform .3s cubic-bezier(.16, 1, .3, 1); } .txs-dunkel .txs-karte--link .elementor-icon-box-description::after { color: var(--tx-mint); } .txs-karte--link:hover .elementor-icon-box-description::after { transform: translateX(4px); } .txs-karte--link:focus-within { outline: 3px solid var(--tx-blau); outline-offset: 2px; } .txs-karte--link .elementor-icon-box-description a { position: relative; z-index: 2; } /* ---------- 18. Preise: Rechner mit Beleg, Gesamtkosten, Praxisgrößen ---------- */ .txs-regler { margin-top: 16px; } .txs-regler label { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px !important; } .txs-regler label i { color: var(--tx-blau); width: 18px; } .txs-regler output { float: none !important; min-width: 44px; text-align: center; padding: 4px 10px; border-radius: 999px; background: var(--tx-himmel); font-size: 17px; } .txs-regler__zeile { display: flex; gap: 10px; align-items: center; } .txs-regler__zeile input[type=range] { flex: 1 1 auto; min-width: 0; } .txs-rechner .txs-regler__knopf { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tx-linie); background: #fff; color: var(--tx-blau-d); font-size: 20px; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .txs-rechner .txs-regler__knopf:hover { background: var(--tx-himmel); border-color: var(--tx-blau); } .txs-regler__knopf:focus-visible { outline: 3px solid var(--tx-blau); outline-offset: 2px; } .txs-rechner--beleg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; max-width: 1040px; margin: 8px auto 0; } .txs-rechner--beleg .txs-rechner__eingabe { padding: 34px; } .txs-rechner__titel { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--tx-text); } .txs-rechner__inklusive { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 14.5px; } .txs-rechner__inklusive li::before { content: "✓"; color: var(--tx-mint-d); font-weight: 800; margin-right: 7px; } .txs-beleg { padding: 34px; background: var(--tx-navy); color: #DCE6F0; display: flex; flex-direction: column; gap: 14px; } .txs-beleg__titel { margin: 0; font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; } .txs-beleg__titel span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(125, 211, 199, .16); color: var(--tx-mint); } .txs-beleg dl { margin: 0; display: grid; } .txs-beleg dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed rgba(255, 255, 255, .16); font-size: 16px; } .txs-beleg dt { font-weight: 400; margin: 0; } .txs-beleg dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; white-space: nowrap; } .txs-beleg dt b { color: var(--tx-mint); } .txs-beleg .txs-beleg__summe { border-bottom-style: solid; border-bottom-color: rgba(255, 255, 255, .35); } .txs-beleg .txs-beleg__summe dt, .txs-beleg .txs-beleg__summe dd { font-weight: 800; color: #fff; font-size: 18px; } .txs-beleg .txs-beleg__brutto { border-bottom: 0; } .txs-beleg .txs-beleg__brutto dd { font-size: 26px; font-weight: 800; color: var(--tx-mint); } .txs-beleg__zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .txs-beleg__zeitraum div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 2px; } .txs-beleg__zeitraum span { font-size: 13px; color: #B9C8D8; } .txs-beleg__zeitraum b { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; } .txs-beleg__fuss { margin: 0; font-size: 13.5px; color: #B9C8D8; } .txs-blink { animation: txs-blink .5s ease; } @keyframes txs-blink { 0% { opacity: .35; } 100% { opacity: 1; } } @media (max-width: 860px) { .txs-rechner--beleg { grid-template-columns: 1fr; } .txs-rechner--beleg .txs-rechner__eingabe, .txs-beleg { padding: 24px 20px; } } @media (max-width: 420px) { .txs-rechner__inklusive { grid-template-columns: 1fr; } .txs-beleg__zeitraum { grid-template-columns: 1fr; } } .txs-gesamt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; } .txs-gesamt__haupt, .txs-gesamt__neben { border-radius: 22px; padding: 30px; border: 1px solid var(--tx-linie); } .txs-gesamt__haupt { background: linear-gradient(150deg, #fff 0%, var(--tx-himmel) 100%); box-shadow: var(--tx-schatten); } .txs-gesamt__neben { background: #fff; } .txs-gesamt__label { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-blau); } .txs-gesamt__wert { margin: 0; font-size: clamp(44px, 6vw, 64px); font-weight: 800; letter-spacing: -2px; line-height: 1.05; color: var(--tx-navy); font-variant-numeric: tabular-nums; } .txs-gesamt__basis { margin: 8px 0 18px; color: var(--tx-grau); font-size: 15px; } .txs-gesamt__basis a { color: var(--tx-blau); font-weight: 600; } .txs-gesamt__reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .txs-gesamt__reihe li { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tx-linie); display: grid; gap: 2px; } .txs-gesamt__reihe span { font-size: 13px; color: var(--tx-grau); } .txs-gesamt__reihe b { font-size: 19px; color: var(--tx-text); font-variant-numeric: tabular-nums; } .txs-gesamt__neben ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; } .txs-gesamt__neben li { display: flex; gap: 14px; align-items: flex-start; } .txs-gesamt__neben li i { flex: 0 0 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tx-mint-h); color: var(--tx-mint-d); font-size: 16px; } .txs-gesamt__neben li span { display: grid; gap: 2px; font-size: 15px; color: var(--tx-grau); line-height: 1.45; } .txs-gesamt__neben li b { color: var(--tx-text); font-size: 16px; } @media (max-width: 860px) { .txs-gesamt { grid-template-columns: 1fr; } .txs-gesamt__haupt, .txs-gesamt__neben { padding: 22px 20px; } } .txs-groessen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .txs-groesse { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 20px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--tx-linie); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease; } .txs-groesse:hover { transform: translateY(-4px); box-shadow: var(--tx-schatten); border-color: #C9D8E6; } .txs-groesse--hervor { border: 2px solid var(--tx-blau); box-shadow: var(--tx-schatten); } .txs-groesse__marke { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 999px; background: var(--tx-blau); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .txs-groesse__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tx-himmel); color: var(--tx-blau); font-size: 18px; } .txs-groesse h3 { margin: 4px 0 0; font-size: 19px; color: var(--tx-text); } .txs-groesse__geraete { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .txs-groesse__geraete span { font-size: 13px; padding: 4px 9px; border-radius: 999px; background: var(--tx-flaeche); color: var(--tx-text); } .txs-groesse__geraete i { color: var(--tx-blau); margin-right: 3px; } .txs-groesse__preis { margin: 6px 0 0; font-size: 14px; color: var(--tx-grau); } .txs-groesse__preis b { display: block; font-size: 36px; font-weight: 800; letter-spacing: -1px; color: var(--tx-blau-d); line-height: 1.1; font-variant-numeric: tabular-nums; } .txs-groesse__klein { margin: 0; font-size: 13px; color: var(--tx-grau); } .txs-groesse__text { margin: 4px 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--tx-text); flex: 1 1 auto; } .txs-groessen .txs-groesse__knopf { align-self: stretch; min-height: 44px; border-radius: 999px; border: 1px solid var(--tx-blau); background: #fff; color: var(--tx-blau-d); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .2s ease, color .2s ease; } .txs-groessen .txs-groesse__knopf:hover, .txs-groessen .txs-groesse--hervor .txs-groesse__knopf { background: var(--tx-blau); color: #fff; } .txs-groesse__knopf:focus-visible { outline: 3px solid var(--tx-blau); outline-offset: 2px; } @media (max-width: 1024px) { .txs-groessen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } } @media (max-width: 480px) { .txs-groessen { grid-template-columns: 1fr; } } /* ---------- 19. Kontaktformular (Elementor Pro) – luftig, klare Felder, gut bedienbar ---------- */ .txs-formular-karte { padding: clamp(22px, 4vw, 40px) !important; } .txs-formular .elementor-form-fields-wrapper { row-gap: 0; } .txs-formular .elementor-field-group { margin-bottom: 22px !important; } .txs-formular .elementor-field-group > label, .txs-formular .elementor-field-label { display: block; margin-bottom: 10px !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--tx-text) !important; } .txs-formular .elementor-mark-required .elementor-field-label::after { color: var(--tx-rot) !important; } .txs-formular .elementor-field-textual, .txs-formular .elementor-select-wrapper select { min-height: 52px !important; padding: 13px 16px !important; font-size: 16px !important; line-height: 1.4 !important; color: var(--tx-text) !important; background: #fff !important; border: 1.5px solid #C9D6E3 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(11, 37, 69, .04) inset; transition: border-color .2s ease, box-shadow .2s ease; } .txs-formular textarea.elementor-field-textual { min-height: 150px !important; resize: vertical; } .txs-formular .elementor-field-textual::placeholder { color: #8A9AAA; opacity: 1; } .txs-formular .elementor-field-textual:hover, .txs-formular .elementor-select-wrapper select:hover { border-color: #9FB6CC !important; } .txs-formular .elementor-field-textual:focus, .txs-formular .elementor-select-wrapper select:focus { outline: none !important; border-color: var(--tx-blau) !important; box-shadow: 0 0 0 4px rgba(14, 114, 174, .16) !important; } .txs-formular .elementor-select-wrapper::before { right: 16px !important; color: var(--tx-blau) !important; font-size: 13px !important; } .txs-formular .elementor-select-wrapper select { padding-right: 44px !important; } .txs-formular .elementor-field-type-acceptance { margin-top: 4px; } .txs-formular .elementor-field-type-acceptance .elementor-field-subgroup { padding: 14px 16px; border-radius: 12px; background: var(--tx-flaeche); border: 1px solid var(--tx-linie); } .txs-formular .elementor-field-option { display: flex !important; gap: 12px; align-items: flex-start; } .txs-formular .elementor-field-option input[type=checkbox] { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tx-blau); } .txs-formular .elementor-field-option label { font-size: 14.5px !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--tx-grau) !important; margin: 0 !important; } .txs-formular .elementor-field-option label a { color: var(--tx-blau); text-decoration: underline; } .txs-formular .e-form__buttons, .txs-formular .elementor-field-type-submit { margin-top: 8px !important; margin-bottom: 0 !important; } .txs-formular .elementor-button[type=submit] { min-height: 56px !important; padding: 16px 28px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: .01em; box-shadow: 0 14px 30px -14px rgba(14, 114, 174, .7); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, background-color .25s ease !important; } .txs-formular .elementor-button[type=submit]:hover { transform: translateY(-2px); background-color: var(--tx-blau-d) !important; box-shadow: 0 18px 36px -14px rgba(14, 114, 174, .75); } .txs-formular .elementor-button[type=submit]:focus-visible { outline: 3px solid var(--tx-navy); outline-offset: 3px; } .txs-formular .elementor-message { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: 15px; } .txs-formular .elementor-message-success { background: #DDF3E6; color: #1F7A45; } .txs-formular .elementor-message-danger { background: #FBE3E3; color: #B42F2F; } .txs-formular .elementor-field-group .elementor-message { margin-top: 6px; padding: 0; background: none; font-size: 13.5px; } @media (max-width: 767px) { .txs-formular .elementor-field-group { margin-bottom: 18px !important; } } /* ---------- 20. Seite „Alle Leistungen im Detail“ (/leistungen/) – Suche, Sprungleiste, Katalog ---------- */ /* Anker sitzen im HTML-Baustein unter der Überschrift: nach oben versetzt, damit Obertitel und H2 sichtbar bleiben */ .txs-anker { display: block; position: relative; top: -190px; height: 0; visibility: hidden; pointer-events: none; } /* Werkzeugleiste: Suchfeld, Trefferzahl, Sprungleiste, Legende */ .txs-leistungen-werkzeug { display: grid; gap: 22px; } .txs-leistungen-suche { display: grid; gap: 8px; max-width: 720px; } .txs-leistungen-suche label { font-weight: 700; font-size: 15px; color: var(--tx-text); } .txs-leistungen-suche__feld { position: relative; } .txs-leistungen-suche__feld i, .txs-leistungen-suche__feld .txs-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--tx-blau); font-size: 16px; pointer-events: none; } .txs-leistungen-suche input[type=search] { width: 100%; min-height: 56px; padding: 14px 18px 14px 48px !important; font-size: 17px !important; line-height: 1.4; color: var(--tx-text) !important; background: #fff !important; border: 1.5px solid #C9D6E3 !important; border-radius: 999px !important; box-shadow: 0 10px 28px -18px rgba(11, 37, 69, .45); transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .txs-leistungen-suche input[type=search]::placeholder { color: #8A9AAA; opacity: 1; } .txs-leistungen-suche input[type=search]:focus { outline: none; border-color: var(--tx-blau) !important; box-shadow: 0 0 0 4px rgba(14, 114, 174, .16); } .txs-leistungen-zahl { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--tx-grau); font-variant-numeric: tabular-nums; } .txs-leistungen-keine { margin: 0; padding: 14px 16px; border-radius: 14px; background: #FFF0E3; color: #7A3A00; font-size: 15px; } .txs-leistungen-keine a { color: inherit; font-weight: 700; text-decoration: underline; } .txs-leistungen-keine[hidden] { display: none; } .txs-leistungen-sprung ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .txs-leistungen-sprung a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--tx-linie); color: var(--tx-text); text-decoration: none; font-size: 14.5px; font-weight: 600; line-height: 1.2; transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1); } .txs-leistungen-sprung a i, .txs-leistungen-sprung a .txs-icon { color: var(--tx-blau); font-size: 13px; width: 16px; text-align: center; } .txs-leistungen-sprung a small { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--tx-himmel); color: var(--tx-blau-d); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .txs-leistungen-sprung a:hover, .txs-leistungen-sprung a:focus-visible { border-color: var(--tx-blau); background: var(--tx-himmel); transform: translateY(-1px); } .txs-leistungen-sprung a:focus-visible { outline: 3px solid var(--tx-blau); outline-offset: 2px; } .txs-leistungen-legende { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; color: var(--tx-grau); } /* Statusabzeichen (Pillen) */ .txs-leistungen-marke { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 999px; vertical-align: 1px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; background: #EEF0F3; color: #44505C; border: 1px solid transparent; } .txs-leistungen-legende .txs-leistungen-marke { margin-left: 0; } .txs-leistungen-marke--ki { background: #EFE9FB; color: #5B3BA8; } .txs-leistungen-marke--test { background: #FFF0E3; color: #A44A00; } .txs-leistungen-marke--entw { background: #EEF0F3; color: #44505C; border-color: #D5DDE6; } .txs-leistungen-marke--ti { background: var(--tx-himmel); color: var(--tx-blau-d); } .txs-leistungen-marke--pilot { background: #FFF6DA; color: #7A5600; } .txs-leistungen-marke--teil { background: var(--tx-mint-h); color: #1F6F64; } .txs-leistungen-marke--erprobung { background: #FFF6DA; color: #7A5600; border-color: #F1DB9A; } /* Katalog je Bereich: Liste zweispaltig, mit Bild einspaltig + Bild rechts (mitlaufend) */ .txs-leistungen-bereich { display: block; } .txs-leistungen-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; } .txs-leistungen-liste li { position: relative; break-inside: avoid; -webkit-column-break-inside: avoid; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--tx-linie); font-size: 15.5px; line-height: 1.5; color: var(--tx-text); } .txs-leistungen-liste li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tx-mint-h); color: var(--tx-mint-d); font-weight: 800; font-size: 12px; line-height: 1; } .txs-leistungen-liste li.txs-leistungen-aus { display: none; } .txs-leistungen-bereich--bild { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; } .txs-leistungen-bereich--bild .txs-leistungen-liste { columns: 1; grid-column: 1; grid-row: 1; } .txs-leistungen-bild { grid-column: 2; grid-row: 1; position: sticky; top: 110px; } .txs-leistungen-bild .txs-fenster { margin: 0; } /* Links unter der Liste */ .txs-leistungen-mehr { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 15px; } .txs-leistungen-mehr a { color: var(--tx-blau-d); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .txs-leistungen-mehr a:hover { text-decoration: underline; } .txs-leistungen-mehr__tief { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--tx-grau); } .txs-leistungen-mehr__tief > span { font-weight: 600; } .txs-leistungen-mehr__tief a { font-weight: 600; min-height: 36px; } .txs-leistungen-mehr__oben { margin-left: auto; color: var(--tx-grau) !important; font-weight: 600 !important; } /* Suche: Bereiche ohne Treffer ganz ausblenden (ganze Elementor-Sektion) */ .txs-leistungen-leer { display: none !important; } @media (max-width: 1024px) { .txs-leistungen-bereich--bild { grid-template-columns: 1fr; gap: 24px; } .txs-leistungen-bild { grid-column: 1; grid-row: 1; position: static; max-width: 640px; } .txs-leistungen-bereich--bild .txs-leistungen-liste { grid-row: 2; columns: 2; } } @media (max-width: 767px) { .txs-anker { top: -150px; } .txs-leistungen-liste, .txs-leistungen-bereich--bild .txs-leistungen-liste { columns: 1; } .txs-leistungen-liste li { font-size: 15px; } .txs-leistungen-sprung ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px; } .txs-leistungen-sprung li { flex: 0 0 auto; scroll-snap-align: start; } .txs-leistungen-mehr__oben { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .txs-leistungen-sprung a, .txs-leistungen-suche input[type=search] { transition: none; } } /* ---------- 21. Inline-SVG-Symbole (Elementor „Inline-Schriftsymbole“) in eigenen Bausteinen ---------- */ .txs-icon, svg.txs-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex: 0 0 auto; } .txs-bereich-nav li a .txs-icon { box-sizing: content-box; width: 15px; height: 15px; padding: 9.5px; border-radius: 10px; background: var(--tx-himmel); fill: var(--tx-blau); } .txs-bereich-nav li a.ist-aktiv .txs-icon { background: rgba(125, 211, 199, .18); fill: var(--tx-mint); } .txs-groesse__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tx-himmel); color: var(--tx-blau); font-size: 18px; } .txs-gesamt__symbol { flex: 0 0 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tx-mint-h); color: var(--tx-mint-d); font-size: 16px; } .txs-regler label .txs-icon { color: var(--tx-blau); margin-right: 4px; } .txs-groesse__geraete .txs-icon { color: var(--tx-blau); margin-right: 3px; } @media (max-width: 767px) { .txs-bereich-nav li a .txs-icon { width: 13px; height: 13px; padding: 7.5px; } } .txs-leistungen-suche__feld .txs-icon, .txs-leistungen-sprung a .txs-icon { fill: var(--tx-blau); width: 16px; height: 16px; } .txs-bereich-nav li a span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; } .txs-bereich-nav ul { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media (max-width: 767px) { .txs-bereich-nav ul { grid-template-columns: 1fr 1fr; } } .txs-leistungen-werkzeug, .txs-leistungen-suche { grid-template-columns: minmax(0, 1fr); min-width: 0; } .txs-leistungen-suche input[type=search] { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Abzeichen „Neu · in Kürze“ (Funktionen kurz vor der Veröffentlichung, Schalter $PR_NEU in part3a) */ .txs-abzeichen--bald, .txs-leistungen-marke--bald { background: #FFF0E3; color: #A44A00; border: 1px solid #F6D2B0; } .txs-abzeichen--bald { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; white-space: nowrap; } /* ---------- Startbühne im Apple-Stil (seit 1.3.0, nur große Bildschirme; Steuerung in szenen.js › startbuehne) ---------- */ .txs-buehne-aktiv .txs-hero-geraete { will-change: transform; transform-origin: 50% 50%; } .txs-buehne-aktiv .txs-hero-geraete > .txs-laptop, .txs-buehne-aktiv .txs-hero-geraete > .txs-handy { z-index: 1; } /* Lichtschein hinter den Geräten (Mint → Blau, ohne Blur-Filter = günstig zu zeichnen) */ .txs-hero-schein { position: absolute; left: 50%; top: 46%; width: 125%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(125, 211, 199, .34), rgba(14, 114, 174, .20) 42%, rgba(14, 114, 174, 0) 72%); } /* Glanz, der einmal über den Bildschirm läuft */ .txs-buehne-aktiv .txs-laptop__deckel { overflow: hidden; } .txs-hero-glanz { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .20) 50%, rgba(255, 255, 255, 0) 64%); transform: translateX(-130%); } /* Karten schweben als Glas-Hinweise über der Bühne */ .txs-buehne-aktiv .txs-karte--glas { position: relative; z-index: 3; will-change: transform, opacity; /* !important nötig: Elementor setzt den Kartenhintergrund mit höherer Spezifität; über dem hellen Bildschirm braucht es Deckkraft für Kontrast */ background: rgba(11, 37, 69, .9) !important; border-color: rgba(125, 211, 199, .4); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .65); } /* Kartenreihe liegt immer über der Geräte-Ebene (Handy überdeckt sonst die rechte Karte) */ .txs-buehne-aktiv > .e-con-inner > .elementor-element:last-child { position: relative; z-index: 5; } /* Ausgeblendeter Text darf nicht mehr anklickbar sein */ .txs-buehne-weiter .txs-hero-text { pointer-events: none; } @media (max-width: 1024px), (prefers-reduced-motion: reduce) { .txs-hero-schein, .txs-hero-glanz { display: none; } } /* ---------- Porträt- und Dialog-Abschnitte (seit 1.3.0; Inhalt über pr-setup/run-portraets.php in Elementor) ---------- */ .txs-portraet { margin: 0; display: grid; gap: 10px; } .txs-portraet img, .txs-portraet video { display: block; width: 100%; height: auto; border-radius: var(--tx-radius); background: #EBEBEB; box-shadow: var(--tx-schatten); border: 1px solid var(--tx-linie); } .txs-portraet video { aspect-ratio: 16 / 9; object-fit: cover; } .txs-portraet figcaption { margin: 0; } /* KI-Kennzeichen der Mediathek auf dem kleinen Porträt: bleibt sichtbar, rutscht aber vom Gesicht in die untere Ecke */ .txs-ansprechpartner .prm-kz { flex: 0 0 auto; position: relative; display: block; } .txs-ansprechpartner .prm-kz-hinweis { top: auto !important; bottom: 6px !important; left: 6px !important; right: auto !important; font-size: 10px !important; line-height: 1.3 !important; padding: 2px 6px !important; max-width: calc(100% - 12px); } /* Übergang Startbühne → nächster Abschnitt (1.3.1): Folgeabschnitt gleitet mit runden Ecken über die Bühne */ .txs-buehne-folge { position: relative; z-index: 6; border-radius: 36px 36px 0 0; box-shadow: 0 -36px 80px -28px rgba(0, 0, 0, .55); } .txs-hero-dunkel { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #061629; opacity: 0; } @media (max-width: 1024px) { .txs-hero-dunkel { display: none; } } /* ---------- Datenschutz-Vorführung „Patientenakte“ (seit 1.4.0; Markup aus pr-setup/part3b-datenschutz-demo.php) ---------- */ .txs-akte { width: 100%; max-width: 780px; margin: 6px auto 4px; text-align: left; color: #EAF2F8; background: rgba(4, 18, 38, .55); border: 1px solid var(--tx-glas-rand); border-radius: 22px; padding: 22px 26px 18px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); } .txs-akte__kopf { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 14px; } .txs-akte__titel { margin: 0; font-weight: 700; font-size: 17px; color: #fff; display: flex; align-items: center; gap: 10px; } .txs-akte__titel small { font-weight: 500; font-size: 13px; color: #9FB3C8; } .txs-akte__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--tx-mint); box-shadow: 0 0 0 4px rgba(125, 211, 199, .18); transition: background .4s, box-shadow .4s; } .txs-akte[data-ansicht="geheim"] .txs-akte__punkt { background: var(--tx-gelb); box-shadow: 0 0 0 4px rgba(233, 168, 37, .2); } .txs-akte__schalter { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--tx-glas-rand); } .txs-akte__schalter button { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; min-height: 40px; padding: 0 18px; border-radius: 999px; color: #C9D6E3; background: transparent; transition: background .3s, color .3s; } /* Gegen Theme-Farben absichern (Hello färbt button:hover/:focus sonst pink #CC3366) */ .txs-akte .txs-akte__schalter button, .txs-akte .txs-akte__schalter button:hover, .txs-akte .txs-akte__schalter button:focus, .txs-akte .txs-akte__schalter button:active { background: transparent !important; color: #C9D6E3 !important; box-shadow: none !important; text-decoration: none !important; } .txs-akte .txs-akte__schalter button:hover { color: #FFFFFF !important; background: rgba(255, 255, 255, .08) !important; } .txs-akte .txs-akte__schalter button[aria-pressed="true"], .txs-akte .txs-akte__schalter button[aria-pressed="true"]:hover, .txs-akte .txs-akte__schalter button[aria-pressed="true"]:focus { background: var(--tx-mint) !important; color: var(--tx-navy) !important; } .txs-akte__schalter button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .txs-akte__felder { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .08); } .txs-akte__feld { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .txs-akte__feld dt { margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #8FA6BD; } .txs-akte__feld dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; min-width: 0; } .txs-akte__wert { font-size: 16px; color: #fff; overflow-wrap: anywhere; transition: color .4s; } .txs-akte[data-ansicht="geheim"] .txs-akte__wert { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14.5px; color: var(--tx-mint); letter-spacing: .02em; } .txs-akte__marke { font-style: normal; font-size: 12px; color: #9FB3C8; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 1px 9px; white-space: nowrap; } .txs-akte__fuss { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 14px; font-size: 14.5px; color: #C9D6E3; } .txs-akte__schloss { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--tx-navy); background: var(--tx-mint); border-radius: 999px; padding: 4px 11px; } .txs-akte__schloss svg { width: 14px; height: 14px; } .txs-akte__protokoll { margin: 10px 0 0; font-size: 13px; color: #8FA6BD; } .txs-akte__protokoll span:first-child { font-weight: 700; color: #C9D6E3; margin-right: 6px; } @media (max-width: 600px) { .txs-akte { padding: 18px 16px 14px; border-radius: 18px; } .txs-akte__feld { grid-template-columns: 1fr; gap: 2px; } .txs-akte__schalter { width: 100%; } .txs-akte__schalter button { flex: 1; } } /* ---------- Willkommensblock „Es gibt keine dummen Fragen“ (seit 1.4.2; Markup aus pr-setup/part3c-willkommen.php) ---------- */ .txs-willkommen { display: grid; gap: 14px; padding: 20px 22px; border-radius: var(--tx-radius); background: var(--tx-mint-h); border: 1px solid rgba(46, 158, 143, .28); border-left: 5px solid var(--tx-mint-d); } .txs-willkommen__punkt { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; } .txs-willkommen__symbol { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #FFFFFF; color: var(--tx-mint-d); box-shadow: 0 6px 14px -8px rgba(11, 37, 69, .35); } .txs-willkommen__symbol svg { width: 24px; height: 24px; } .txs-willkommen p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tx-text); } .txs-willkommen p.txs-willkommen__titel { font-size: 18px; font-weight: 700; color: var(--tx-navy); margin-bottom: 4px; } @media (max-width: 767px) { .txs-willkommen { padding: 16px; } .txs-willkommen__punkt { grid-template-columns: 38px 1fr; gap: 12px; } .txs-willkommen__symbol { width: 38px; height: 38px; } } /* ---------- Galerie Praxisalltag (seit 1.5.0): ruhiges Raster statt Querscroller ---------- * Spalten Handy : Foto = 0,62 : 1,38 → bei Handy-Seitenverhältnis 720/1600 sind Fotos (1:1) genau so hoch wie die Handys. * Fotos sitzen leicht versetzt (Rhythmus), keine Bildlaufleiste, Tablet/Handy: 2 Spalten (Handy + Foto je Zeile). */ .txs-galerie { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr) minmax(0, .62fr) minmax(0, 1.38fr); gap: 24px; align-items: start; overflow: visible; padding: 8px 0 52px; } .txs-galerie > * { min-width: 0; } .txs-galerie > .txs-handy { width: 100% !important; max-width: none; } .txs-galerie > .txs-zoom { width: auto !important; height: auto; aspect-ratio: 1 / 1; margin-top: 52px; box-shadow: var(--tx-schatten); } .txs-galerie > .txs-zoom .prm-kz { display: block; height: 100%; } /* Hülle des KI-Kennzeichens: volle Höhe, sonst bleibt das Foto halb leer */ .txs-galerie > .txs-zoom img { display: block; width: 100%; height: 100% !important; object-fit: cover; } @media (max-width: 1024px) { .txs-galerie { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 20px; padding-bottom: 36px; } .txs-galerie > .txs-zoom { margin-top: 36px; } } @media (max-width: 600px) { .txs-galerie { gap: 12px; padding-bottom: 20px; } .txs-galerie > .txs-zoom { margin-top: 20px; } .txs-galerie > .txs-handy { border-radius: 20px; padding: 5px; } .txs-galerie > .txs-handy img { border-radius: 16px; } } /* ---------- Zwei Tablets versetzt (seit 1.5.0; Markup aus pr-setup/part3d-tablet-duo.php) ---------- */ .txs-duo-flaeche { background: linear-gradient(180deg, var(--tx-flaeche) 0%, #FFFFFF 60%) !important; } .txs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 12px; } .txs-duo__item { display: grid; gap: 22px; } .txs-duo__item:nth-child(2) { margin-top: 140px; } .txs-duo__geraet { position: relative; will-change: transform; } .txs-duo__geraet::before { content: ""; position: absolute; inset: 8% -6% -10%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(125, 211, 199, .38), rgba(14, 114, 174, .10) 60%, rgba(14, 114, 174, 0) 75%); } .txs-duo__geraet .txs-tablet { position: relative; z-index: 1; max-width: none; box-shadow: 0 40px 80px -36px rgba(11, 37, 69, .55); } .txs-duo__item:nth-child(1) .txs-tablet { transform: rotate(-1.6deg); } .txs-duo__item:nth-child(2) .txs-tablet { transform: rotate(1.6deg); } .txs-duo__text { display: grid; gap: 8px; max-width: 520px; } .txs-duo__marke { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mint-d); } .txs-duo__text h3 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--tx-navy); } .txs-duo__text p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tx-grau); } .txs-duo__text a { justify-self: start; font-weight: 700; color: var(--tx-blau); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; } .txs-duo__text a:hover, .txs-duo__text a:focus-visible { text-decoration: underline; } @media (max-width: 1024px) { .txs-duo { gap: 40px; } .txs-duo__item:nth-child(2) { margin-top: 90px; } .txs-duo__text h3 { font-size: 24px; } } @media (max-width: 767px) { .txs-duo { grid-template-columns: 1fr; gap: 48px; } .txs-duo__item:nth-child(2) { margin-top: 0; } .txs-duo__item .txs-tablet { transform: none !important; } }