/* ========================================================= SEMINARE 2026 Seminarübersicht – komplette Seminarzeile inkl. eingebetteter SVG-Icons ========================================================= */ :root { --icon-termin-kalender: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M256.0%20153.58333439999998C176.29728%20153.58333439999998%20110.91666773333333%20218.96394666666666%20110.91666773333333%20298.66666666666663V768.0C110.91666773333333%20847.7026986666666%20176.29728%20913.0833493333332%20256.0%20913.0833493333332H768.0C847.7026986666666%20913.0833493333332%20913.0833493333332%20847.7026986666666%20913.0833493333332%20768.0V298.66666666666663C913.0833493333332%20218.96394666666666%20847.7026986666666%20153.58333439999998%20768.0%20153.58333439999998H256.0ZM256.0%20230.4166656H768.0C806.483968%20230.4166656%20836.249984%20260.18271999999996%20836.249984%20298.66666666666663V768.0C836.249984%20806.483968%20806.483968%20836.249984%20768.0%20836.249984H256.0C217.51605333333333%20836.249984%20187.7499989333333%20806.483968%20187.7499989333333%20768.0V298.66666666666663C187.7499989333333%20260.18272%20217.51605333333333%20230.4166656%20256.0%20230.4166656Z%22%2F%3E%3Cpath%20d%3D%22M341.3333333333333%2089.58333439999998C320.11258010347996%2089.5741221208523%20302.90745545418565%20106.7792467701466%20302.9166677333333%20127.99999999999997V256.0C302.90745545418565%20277.22075322985336%20320.11258010347996%20294.4258778791477%20341.3333333333333%20294.4166656C362.55408656318673%20294.4258778791477%20379.75921121248103%20277.22075322985336%20379.7499989333333%20256.0V128.0C379.75921121248103%20106.77924677014661%20362.55408656318673%2089.57412212085228%20341.3333333333333%2089.58333439999998ZM682.6666666666666%2089.58333439999998C661.445906771866%2089.5741126865055%20644.2407717138609%20106.77924010110468%20644.2499840000002%20128.0L644.2499839999999%20256.0C644.2407717138609%20277.2207598988953%20661.445906771866%20294.42588731349446%20682.6666666666666%20294.4166656C703.8874265614674%20294.42588731349446%20721.0925616194723%20277.2207598988953%20721.0833493333331%20256.0L721.0833493333332%20128.0C721.0925616194723%20106.77924010110465%20703.8874265614674%2089.5741126865055%20682.6666666666666%2089.58333439999998ZM149.33333333333331%20345.5833344C128.11258010347998%20345.57412212085234%20110.90745545418568%20362.7792467701466%20110.91666773333333%20384.0C110.9074554541856%20405.22075322985336%20128.1125801034799%20422.4258778791477%20149.3333333333333%20422.4166656H874.6666666666666C895.8874265614674%20422.4258873134945%20913.0925616194723%20405.22075989889527%20913.0833493333331%20384.0C913.0925616194723%20362.7792401011046%20895.8874265614674%20345.57411268650554%20874.6666666666666%20345.5833344H149.33333333333331Z%22%2F%3E%3C%2Fsvg%3E"); --icon-seminar-online-bildschirm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M183.49999786666666%20153.58333439999998C120.34341546666667%20153.58333439999998%2068.25000106666667%20205.67674879999998%2068.25000106666667%20268.8333312V648.5000106666666C68.25000106666667%20711.656576%20120.34341546666667%20763.750016%20183.49999786666666%20763.750016H840.5000106666666C903.656576%20763.750016%20955.750016%20711.656576%20955.750016%20648.5000106666666V268.8333312C955.750016%20205.67674879999998%20903.656576%20153.5833344%20840.5000106666666%20153.5833344L183.49999786666666%20153.58333439999998ZM183.49999786666666%20230.4166656H840.5000106666666C862.4378026666666%20230.4166656%20878.9166506666667%20246.89552213333332%20878.9166506666667%20268.8333312V648.5000106666666C878.9166506666667%20670.4378026666666%20862.4378026666666%20686.9166506666667%20840.5000106666666%20686.9166506666667H183.49999786666666C161.5621888%20686.9166506666667%20145.08333226666667%20670.4378026666667%20145.08333226666667%20648.5000106666666V268.8333312C145.08333226666667%20246.89552213333334%20161.5621888%20230.41666560000002%20183.49999786666666%20230.41666560000002V230.4166656Z%22%2F%3E%3Cpath%20d%3D%22M512.0%20686.9166506666667C490.77923343615663%20686.9074289461776%20473.5740956128442%20704.1125667694901%20473.5833173333333%20725.3333333333333V857.5833173333333H362.66666666666663C341.44590676777136%20857.574105047194%20324.2407793531722%20874.7792401051993%20324.25000106666664%20896.0C324.2407793531721%20917.2207598948005%20341.4459067677713%20934.4258949528058%20362.66666666666663%20934.4166826666666H512.0H661.3333333333333C682.5540998971767%20934.4259043871558%20699.7592377204892%20917.2207665638432%20699.7500160000001%20896.0C699.7592377204892%20874.7792334361566%20682.5540998971767%20857.5740956128444%20661.3333333333334%20857.5833173333335L550.4166826666667%20857.5833173333333V725.3333333333333C550.4259043871558%20704.1125667694901%20533.2207665638433%20686.9074289461774%20512.0%20686.9166506666667Z%22%2F%3E%3C%2Fsvg%3E"); --icon-ort-marker: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20d%3D%22M512.0%2091.74999893333333C327.4510293333333%2091.74999893333333%20177.08333226666664%20242.11755946666668%20177.08333226666664%20426.66666666666663C177.08333226666664%20548.4698453333333%20257.76541439999994%20668.8390826666666%20334.5833344%20762.6666666666666C411.4012544%20856.4942506666666%20488.166656%20923.3333333333333%20488.166656%20923.3333333333333C501.8250567791597%20935.2396520914428%20522.1749432208403%20935.2396520914431%20535.833344%20923.3333333333333C535.833344%20923.3333333333333%20612.5987413333334%20856.4942506666666%20689.4166613333333%20762.6666666666666C766.2345813333333%20668.8390826666666%20846.9166506666667%20548.4698453333333%20846.9166506666667%20426.66666666666663C846.9166506666667%20242.11755946666665%20696.5489493333334%2091.74999893333332%20512.0%2091.74999893333332V91.74999893333333ZM512.0%20164.25000106666667C657.34912%20164.25000106666667%20774.4166826666666%20281.31745706666663%20774.4166826666666%20426.66666666666663C774.4166826666666%20513.9301546666666%20705.7654186666666%20628.1776213333333%20633.2500053333333%20716.7499946666667C572.6371413333333%20790.784256%20530.2802346666666%20827.2310613333334%20512.0%20843.750016C493.7197653333333%20827.2310613333334%20451.3628586666667%20790.784256%20390.7499989333333%20716.7499946666667C318.23458559999995%20628.1776213333333%20249.5833344%20513.9301546666666%20249.5833344%20426.66666666666663C249.5833344%20281.31745706666663%20366.6508842666666%20164.25000106666664%20512.0%20164.25000106666664V164.25000106666667Z%22%2F%3E%3Cpath%20d%3D%22M512.0%20279.49999786666666C431.1332693333334%20279.49999786666666%20364.83333546666665%20345.7999189333333%20364.83333546666665%20426.66666666666663C364.83333546666665%20507.53339733333326%20431.1332693333334%20573.8333439999999%20512.0%20573.8333439999999C592.8667306666666%20573.8333439999999%20659.1666773333333%20507.53339733333326%20659.1666773333333%20426.66666666666663C659.1666773333333%20345.7999189333333%20592.8667306666666%20279.49999786666666%20512.0%20279.49999786666666ZM512.0%20352.0C553.6668159999999%20352.0%20586.6666666666666%20384.9998421333333%20586.6666666666666%20426.66666666666663C586.6666666666666%20468.33348266666667%20553.6668159999999%20501.3333333333333%20512.0%20501.3333333333333C470.33318399999996%20501.3333333333333%20437.3333333333333%20468.33348266666667%20437.3333333333333%20426.66666666666663C437.3333333333333%20384.9998421333333%20470.33318399999996%20352.0%20512.0%20352.0Z%22%2F%3E%3C%2Fsvg%3E"); } /* ========================================================= 1. SEMINARKARTE / GRUNDLAYOUT ========================================================= */ .seminare-seminar-card { display: grid; grid-template-columns: 55px 12px 220px minmax(0, 1fr) 220px; grid-template-areas: "month gap image info action"; width: 100%; min-height: 146px; margin: 4px 0; padding: 0; background: var(--seminare-loop-card-background, #ffffff); border-radius: 10px; overflow: visible; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10); box-sizing: border-box; } .seminare-seminar-card > * { box-sizing: border-box; } .seminare-seminar-card::before { content: ""; grid-area: gap; } /* ========================================================= 2. MONATSSPALTE ========================================================= */ .seminare-seminar-month { grid-area: month; width: 55px; min-width: 55px; max-width: 55px; display: flex; align-items: center; justify-content: center; background-color: var(--seminare-monat-hintergrund); color: var(--seminare-monat-textfarbe); border-radius: 10px 0 0 10px; overflow: hidden; } .seminare-seminar-month-text { display: block; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: inherit; font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } /* ========================================================= 3. SEMINARBILD ========================================================= */ .seminare-seminar-image { grid-area: image; display: block; width: 220px; height: 146px; min-height: 146px; margin: 0; padding: 0; align-self: center; border-radius: 10px; overflow: hidden; text-decoration: none; } .seminare-seminar-image-img, .seminare-seminar-image img { display: block; width: 220px !important; height: 146px !important; min-height: 146px; margin: 0 !important; padding: 0 !important; object-fit: cover; object-position: center; border-radius: 10px; border: 0; } /* ========================================================= 4. SEMINARINFORMATIONEN ========================================================= */ .seminare-seminar-info { grid-area: info; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 18px 24px; background: var(--seminare-loop-card-background, #ffffff); } /* ========================================================= 5. SEMINARTITEL ========================================================= */ .seminare-seminar-title { display: block; margin: 0 0 18px 0; padding: 0; color: #1a202c; font-family: inherit; font-size: 19px; line-height: 1.35; font-weight: 700; text-decoration: none; overflow-wrap: break-word; } .seminare-seminar-title:hover, .seminare-seminar-title:focus { text-decoration: none; } /* ========================================================= 6. META-INFORMATIONEN ========================================================= */ .seminare-seminar-meta { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; } .seminare-seminar-meta-row { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: 15px; line-height: 1.45; font-weight: 400; } .seminare-seminar-meta-row > span:last-child { min-width: 0; overflow-wrap: break-word; } .seminare-seminar-time { white-space: nowrap; } /* ========================================================= 7. SEMINARE META-ICONS ========================================================= */ .seminare-seminar-meta-icon { display: inline-block; width: 19px; min-width: 19px; max-width: 19px; height: 19px; min-height: 19px; max-height: 19px; margin-top: 1px; flex: 0 0 19px; background-color: var(--global-palette1, #3182ce); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .seminare-icon-calendar { -webkit-mask-image: var(--icon-termin-kalender); mask-image: var(--icon-termin-kalender); } .seminare-icon-online { -webkit-mask-image: var(--icon-seminar-online-bildschirm); mask-image: var(--icon-seminar-online-bildschirm); } .seminare-icon-location { -webkit-mask-image: var(--icon-ort-marker); mask-image: var(--icon-ort-marker); } /* ========================================================= 8. PREIS- UND BUTTONBEREICH ========================================================= */ .seminare-seminar-action { grid-area: action; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; padding: 16px 18px; background: var(--seminare-loop-card-background, #ffffff); } /* ========================================================= 9. PREIS ========================================================= */ .seminare-seminar-price { width: 100%; margin: 0; padding: 0; } .seminare-price-net { margin: 0; font-family: inherit; font-size: 20px; line-height: 1.25; font-weight: 700; } .seminare-price-net small { font-size: 12px; line-height: 1.3; font-weight: 400; } .seminare-price-gross { margin-top: 3px; font-family: inherit; font-size: 12px; line-height: 1.4; font-weight: 400; } .seminare-price-gross small { font-size: 12px; line-height: inherit; font-weight: 400; } /* ========================================================= 10. BUTTON ========================================================= */ .seminare-seminar-button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; margin-top: 18px; padding: 10px 20px; box-sizing: border-box; border: 0; border-radius: 8px; background-color: var(--seminare-loop-button-bg, var(--global-palette-btn-bg, var(--global-palette1, #3182ce))); color: var(--seminare-loop-button-color, var(--global-palette-btn, #ffffff)) !important; font-family: inherit; font-size: 15px; line-height: 1.4; font-weight: 700; text-align: center; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .seminare-seminar-button:hover, .seminare-seminar-button:focus { background-color: var(--seminare-loop-button-hover-bg, var(--global-palette-btn-bg-hover, var(--global-palette2, #2b6cb0))); color: var(--seminare-loop-button-hover-color, var(--global-palette-btn-hover, #ffffff)) !important; text-decoration: none !important; } /* ========================================================= 11. TABLET ========================================================= */ @media (max-width: 1024px) { .seminare-seminar-card { grid-template-columns: 55px 12px 220px minmax(0, 1fr); grid-template-areas: "month gap image info" "month gap image action"; } .seminare-seminar-info { justify-content: flex-end; padding: 18px 24px 10px 24px; } .seminare-seminar-action { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 24px 18px 24px; } .seminare-seminar-price { width: auto; } .seminare-seminar-button { flex-shrink: 0; margin-top: 0; } } /* ========================================================= 12. KLEINERE TABLETS ========================================================= */ @media (max-width: 850px) { .seminare-seminar-card { grid-template-columns: 55px 10px 190px minmax(0, 1fr); } .seminare-seminar-info { padding-left: 18px; padding-right: 18px; } .seminare-seminar-action { padding-left: 18px; padding-right: 18px; } .seminare-seminar-image { width: 190px; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 190px !important; } .seminare-seminar-title { font-size: 18px; } .seminare-seminar-meta-row { font-size: 14px; } } /* ========================================================= 13. SMARTPHONE ========================================================= */ @media (max-width: 767px) { .seminare-seminar-card { grid-template-columns: 55px 10px minmax(0, 1fr); grid-template-areas: "month gap image" "info info info" "action action action"; min-height: 0; } .seminare-seminar-month { width: 55px; min-width: 55px; max-width: 55px; min-height: 200px; border-radius: 10px 0 0 10px; } .seminare-seminar-month-text { font-size: 12px; letter-spacing: 2px; } .seminare-seminar-image { width: 100%; height: 200px; min-height: 200px; border-radius: 10px; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 100% !important; height: 200px !important; min-height: 200px; border-radius: 10px; } .seminare-seminar-info { justify-content: flex-start; padding: 20px; } .seminare-seminar-title { margin-bottom: 16px; font-size: 18px; line-height: 1.4; } .seminare-seminar-meta { gap: 8px; } .seminare-seminar-meta-row { font-size: 15px; } .seminare-seminar-time { white-space: normal; } .seminare-seminar-action { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; padding: 0 20px 20px 20px; } .seminare-seminar-price { width: 100%; } .seminare-seminar-button { width: 100%; margin: 0; box-sizing: border-box; } } /* ========================================================= 14. SEHR KLEINE SMARTPHONES ========================================================= */ @media (max-width: 480px) { .seminare-seminar-card { grid-template-columns: 55px 8px minmax(0, 1fr); } .seminare-seminar-image { height: 175px; min-height: 175px; } .seminare-seminar-image-img, .seminare-seminar-image img { height: 175px !important; min-height: 175px; } .seminare-seminar-month { min-height: 175px; } .seminare-seminar-info { padding: 18px; } .seminare-seminar-action { padding: 0 18px 18px 18px; } .seminare-seminar-title { font-size: 17px; } } /* ========================================================= SEMINARE 2026 – FINAL LAYOUT OVERRIDES Korrektur: - geringerer Abstand zwischen Seminarzeilen - 12px Abstand Monatsleiste -> Bild - Desktop-Bild fest 220 x 146px - ca. 10px Luft oben/unten bei 166px Kartenhöhe ========================================================= */ .seminare-seminar-card { display: grid; grid-template-columns: 55px 232px minmax(0, 1fr) 220px; grid-template-areas: "month image info action"; width: 100%; min-height: 166px; margin: 0 0 12px 0; padding: 0; background: var(--seminare-loop-card-background, #ffffff); border-radius: 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10); overflow: visible; box-sizing: border-box; } .seminare-seminar-card::before { display: none !important; content: none !important; } .seminare-seminar-month { grid-area: month; width: 55px; min-width: 55px; max-width: 55px; display: flex; align-items: center; justify-content: center; background-color: var(--seminare-monat-hintergrund); color: var(--seminare-monat-textfarbe); border-radius: 10px 0 0 10px; overflow: hidden; } .seminare-seminar-image { grid-area: image; display: block; width: 220px; height: 146px; min-height: 0 !important; max-height: 146px; margin: 0 0 0 12px; padding: 0; align-self: center; border-radius: 10px; overflow: hidden; text-decoration: none; } .seminare-seminar-image-img, .seminare-seminar-image img { display: block; width: 220px !important; height: 146px !important; min-height: 0 !important; max-height: 146px !important; margin: 0 !important; padding: 0 !important; object-fit: cover; object-position: center; border-radius: 10px; border: 0; } .seminare-seminar-info { grid-area: info; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 14px 24px; background: var(--seminare-loop-card-background, #ffffff); } .seminare-seminar-action { grid-area: action; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; padding: 14px 18px; background: var(--seminare-loop-card-background, #ffffff); } @media (max-width: 1024px) { .seminare-seminar-card { grid-template-columns: 55px 232px minmax(0, 1fr); grid-template-areas: "month image info" "month image action"; min-height: 166px; margin: 0 0 12px 0; } } @media (max-width: 850px) { .seminare-seminar-card { grid-template-columns: 55px 202px minmax(0, 1fr); } .seminare-seminar-image { width: 190px; margin-left: 12px; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 190px !important; } } @media (max-width: 767px) { .seminare-seminar-card { grid-template-columns: 55px minmax(0, 1fr); grid-template-areas: "month image" "info info" "action action"; min-height: 0; margin: 0 0 12px 0; } .seminare-seminar-month { min-height: 180px; } .seminare-seminar-image { width: calc(100% - 12px); height: 160px; min-height: 0 !important; max-height: 160px; margin: 10px 0 10px 12px; align-self: center; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 100% !important; height: 160px !important; min-height: 0 !important; max-height: 160px !important; } } @media (max-width: 480px) { .seminare-seminar-card { margin-bottom: 10px; } .seminare-seminar-month { min-height: 175px; } .seminare-seminar-image { width: calc(100% - 10px); height: 155px; max-height: 155px; margin: 10px 0 10px 10px; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 100% !important; height: 155px !important; max-height: 155px !important; } } /* ========================================================= SEMINARE 2026 – BORDER-RADIUS KORREKTUR Rechte Ecken der Seminarzeile ========================================================= */ .seminare-seminar-card { border-radius: 10px; overflow: hidden; } .seminare-seminar-action { border-radius: 0 10px 10px 0; } /* Auf Tablet liegt der Action-Bereich in der unteren rechten Ecke. */ @media (max-width: 1024px) { .seminare-seminar-action { border-radius: 0 0 10px 0; } } /* Auf Smartphone laufen Info und Action über die volle Kartenbreite. */ @media (max-width: 767px) { .seminare-seminar-action { border-radius: 0 0 10px 10px; } } /* ========================================================= SEMINARE 2026 – BREITE DURCH KADENCE Kadence steuert Contentbreite und äußeres Padding. Die Seminarzeile nutzt 100% der verfügbaren Breite. ========================================================= */ .seminare-seminar-card { width: 100%; max-width: none; margin: 0 0 8px 0; } /* ========================================================= SEMINARE 2026 – KOMPAKTER ABSTAND IM SEMINAR-LOOP Abstand wird nur noch über row-gap gesteuert. ========================================================= */ .seminare-seminar-card { margin: 0 !important; } .woocommerce ul.products li.product:has(.seminare-seminar-card), .woocommerce-page ul.products li.product:has(.seminare-seminar-card) { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= SEMINARE 2026 – TABLET HOCHFORMAT FINAL 768px bis 1024px Bild: 16px Weißraum oben/unten, 12px links ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .seminare-seminar-image { width: 220px; height: calc(100% - 32px); min-height: 0 !important; max-height: none !important; margin: 16px 0 16px 12px; padding: 0; align-self: stretch; border-radius: 10px; overflow: hidden; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 220px !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover; object-position: center; border-radius: 10px; } } @media (min-width: 768px) and (max-width: 850px) { .seminare-seminar-image { width: 190px; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 190px !important; } } /* ========================================================= SEMINARE 2026 – SMARTPHONE FINAL Referenz: Moto G4 / 360 x 640 - Monatsleiste unten ohne Radius - Bild unten bündig mit Monatsleiste - Bildabstand oben 10px - Bildabstand links/rechts 12px ========================================================= */ @media (max-width: 767px) { .seminare-seminar-month { width: 55px; min-width: 55px; max-width: 55px; min-height: 180px; border-radius: 10px 0 0 0; } .seminare-seminar-image { width: auto; height: 170px; min-height: 170px !important; max-height: 170px !important; margin: 10px 12px 0 12px; padding: 0; align-self: end; border-radius: 10px; overflow: hidden; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 100% !important; height: 170px !important; min-height: 170px !important; max-height: 170px !important; margin: 0 !important; padding: 0 !important; object-fit: cover; object-position: center; border-radius: 10px; } } /* Moto G4 liegt unter 480px. Daher die älteren 480px-Bildwerte gezielt neutralisieren, damit die obigen Mobile-Werte gelten. */ @media (max-width: 480px) { .seminare-seminar-month { min-height: 180px; border-radius: 10px 0 0 0; } .seminare-seminar-image { width: auto; height: 170px; min-height: 170px !important; max-height: 170px !important; margin: 10px 12px 0 12px; } .seminare-seminar-image-img, .seminare-seminar-image img { width: 100% !important; height: 170px !important; min-height: 170px !important; max-height: 170px !important; } } /* ========================================================= SEMINARE 2026 – CARD SHADOW + HOVER Werte analog zur Musterseite ========================================================= */ .seminare-seminar-card { box-shadow: 0 4px 18px rgba(31, 41, 55, .10); transition: box-shadow .2s, transform .2s; } .seminare-seminar-card:hover { box-shadow: 0 10px 28px rgba(46, 67, 150, .18); transform: translateY(-2px); } /* Loop-Metaicons: Form aus der jeweiligen produktbezogenen Infocardzeile. Größe, Farbe, Position und Abstände bleiben unverändert aus dem Loop-CSS. */ .seminare-seminar-meta-icon.seminare-icon-infocard { -webkit-mask-image: var(--seminare-loop-icon-mask) !important; mask-image: var(--seminare-loop-icon-mask) !important; } /* v1.6.287 – native WooCommerce-/Rechtsplugin-Preis einzeilig und rechtsbündig */ .seminare-seminar-price{ text-align:right; white-space:nowrap; } .seminare-seminar-price .seminare-loop-native-legal{ display:inline; margin:0 0 0 4px; } /* v1.6.288 – native Woo-/Rechtsplugin-Preis definitiv einzeilig */ .seminare-seminar-action .seminare-seminar-price{ width:100%; text-align:right !important; white-space:nowrap !important; } .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price bdi{ display:inline !important; font-size:23px !important; font-weight:700 !important; line-height:28px !important; white-space:nowrap !important; } .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-legal{ display:inline !important; margin:0 0 0 4px !important; padding:0 !important; font-size:11px !important; font-weight:400 !important; line-height:1.25 !important; white-space:nowrap !important; } /* v1.6.298 – eigene Variante „Bruttopreis zuerst“ * Nur diese Variante: rechtsbündig, 56px Abstand oben, * beide Preiszeilen direkt untereinander. */ /* erste Zeile */ .seminare-seminar-price .seminare-price-mode-gross-first{ display:block !important; margin:0 !important; padding:0 !important; line-height:1.15 !important; white-space:nowrap !important; } /* Bruttopreis + Währungszeichen */ .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value bdi{ font-size:23px !important; font-weight:700 !important; line-height:28px !important; } /* Abstand zwischen € und inkl. */ .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value{ margin-right:0.28em !important; } /* Zusatz erste Zeile */ .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-suffix{ font-size:13px !important; font-weight:400 !important; line-height:1.15 !important; white-space:nowrap !important; } /* Das vorhandene
erzeugt keinen zusätzlichen Abstand mehr */ .seminare-seminar-price .seminare-price-mode-gross-first + br{ display:none !important; } /* zweite Zeile direkt darunter */ .seminare-seminar-price .seminare-price-mode-gross-first ~ .seminare-dynamic-gross{ display:block !important; margin:0 !important; padding:0 !important; font-size:13px !important; font-weight:400 !important; line-height:1.15 !important; text-align:left !important; } /* v1.6.301 – eigene Variante „Nettopreis zuerst“ * Gleiche Darstellung wie „Bruttopreis zuerst“: * Hauptpreis 20px/700, Preisblock rechts, zweite Zeile linksbündig. */ .seminare-seminar-price .seminare-price-mode-net-first{ display:block !important; margin:0 !important; padding:0 !important; line-height:1.15 !important; white-space:nowrap !important; } .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value bdi{ font-size:23px !important; font-weight:700 !important; line-height:28px !important; } .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value{ margin-right:0.28em !important; } .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-suffix{ font-size:13px !important; font-weight:400 !important; line-height:1.15 !important; white-space:nowrap !important; } .seminare-seminar-price .seminare-price-mode-net-first + br{ display:none !important; } .seminare-seminar-price .seminare-price-mode-net-first ~ .seminare-dynamic-gross{ display:block !important; margin:0 !important; padding:0 !important; font-size:13px !important; font-weight:400 !important; line-height:1.15 !important; text-align:left !important; } /* v1.6.302 – „Nettopreis zuerst“: Hauptzeile linksbündig */ .seminare-seminar-price .seminare-dynamic-net.seminare-price-mode-net-first{ text-align:left !important; } /* v1.6.303 – eigene Preisvariante „Nur Bruttopreis“ * Nur diese Variante wird angepasst. */ .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value bdi{ font-size:23px !important; font-weight:700 !important; line-height:28px !important; } /* Leerstelle zwischen Währungszeichen und „inkl.“ */ .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value{ margin-right:0.28em !important; } /* Zusatz der Bruttopreis-Zeile */ .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-suffix{ font-size:13px !important; font-weight:400 !important; line-height:1.2 !important; white-space:nowrap !important; } /* v1.6.305 – eigene Preisvariante „Nur Nettopreis“ * Analog zur fertig abgestimmten Variante „Nur Bruttopreis“. */ .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value bdi{ font-size:23px !important; font-weight:700 !important; line-height:28px !important; } /* Leerstelle zwischen Währungszeichen und „netto“ */ .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value{ margin-right:0.28em !important; } /* Zusatz „netto“ */ .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-suffix{ font-size:13px !important; font-weight:400 !important; line-height:1.2 !important; white-space:nowrap !important; } /* v1.6.306 – eigene Preisvariante „Nur Nettopreis“ * Preiszeile linksbündig; sonst keine Änderung. */ .seminare-seminar-action .seminare-seminar-price:has(.seminare-price-mode-net-only){ text-align:left !important; } .seminare-seminar-price .seminare-price-mode-net-only{ text-align:left !important; } /* Preis + Währungszeichen */ .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-loop-native-price bdi{ font-size:23px !important; font-weight:700 !important; line-height:28px !important; } /* Leerstelle zwischen Währungszeichen und Rechtsplugin-Zusatz */ .seminare-seminar-price .seminare-loop-native-price{ margin-right:0.28em !important; } /* Woo-/Germanized-Zusatz */ .seminare-seminar-price .seminare-loop-native-legal{ display:inline !important; font-size:13px !important; font-weight:400 !important; line-height:1.2 !important; white-space:nowrap !important; } .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount{font-size:23px !important;} /* v1.6.439 – Seminar-Loop: zweizeiliger Desktop-Actionbereich mit definierter Innenausrichtung. * Die rechte Spalte besitzt genau zwei Zeilen: * 1) vollständige Preisdarstellung * 2) Detailbutton * Historische vertikale Preis-/Button-Margins aus v1.6.289–1.6.307 sind entfernt. * Preisrenderer und Preisvarianten selbst bleiben unverändert. */ .seminare-seminar-button{ transition:background-color .2s ease, color .2s ease, box-shadow .2s, transform .2s; } .seminare-seminar-button:hover, .seminare-seminar-button:focus{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(46,67,150,.18); } @media (min-width:1025px){ .seminare-seminar-action{ display:grid; grid-template-rows:minmax(0,1fr) minmax(0,1fr); align-items:stretch; justify-items:stretch; gap:0; } .seminare-seminar-action .seminare-seminar-price, .seminare-seminar-action:has(.seminare-loop-native-price) .seminare-seminar-price{ position:static !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; align-self:end !important; justify-self:stretch; text-align:right; transform:none !important; } .seminare-seminar-action .seminare-seminar-button, .seminare-seminar-action:has(.seminare-loop-native-price) .seminare-seminar-button{ margin:14px 0 0 !important; align-self:start !important; justify-self:end; } } /* v1.6.440 – Desktop: Buttonposition vollständig von der Preisvariante entkoppeln. * Preisrenderer bleibt unverändert. Die Action-Spalte hat eine feste 1-Spalten-Gridbasis; * der Button richtet sich ausschließlich an der rechten Kante dieser Spalte aus. */ @media (min-width:1025px){ .seminare-seminar-action{ grid-template-columns:minmax(0,1fr); } .seminare-seminar-action > .seminare-seminar-button{ width:max-content !important; max-width:100%; margin-top:14px !important; margin-right:0 !important; margin-bottom:0 !important; margin-left:auto !important; justify-self:end !important; align-self:start !important; } } @media (min-width:768px) and (max-width:850px){ .seminare-seminar-action .seminare-seminar-button{ margin-left:auto !important; margin-right:0 !important; } } /* ========================================================= v1.6.443 – Responsive Contentbreite + iPad Querformat - Der Loop-Theme-Container besitzt kein eigenes Edge-Padding mehr. Seitenabstände kommen ausschließlich aus Theme/Kadence. - iPad Querformat 851–1024px behält die Desktop-Card in EINER Zeile. - Längere Ortsangaben dürfen in der Informationsspalte umbrechen. - Preis und Button bleiben wie auf Desktop rechts ausgerichtet. ========================================================= */ @media (min-width:851px) and (max-width:1024px) and (orientation:landscape){ .seminare-seminar-card{ grid-template-columns:55px 232px minmax(0,1fr) 220px; grid-template-areas:"month image info action"; min-height:166px; } .seminare-seminar-image{ width:220px; height:146px; min-height:0 !important; max-height:146px !important; margin:0 0 0 12px; align-self:center; } .seminare-seminar-image-img, .seminare-seminar-image img{ width:220px !important; height:146px !important; min-height:0 !important; max-height:146px !important; } .seminare-seminar-info{ justify-content:flex-start; padding:16px 18px 14px 24px; } .seminare-seminar-meta-row > span:last-child{ min-width:0; white-space:normal; overflow-wrap:anywhere; } .seminare-seminar-action{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); align-items:stretch; justify-items:stretch; gap:0; padding:14px 18px; border-radius:0 10px 10px 0; } .seminare-seminar-action .seminare-seminar-price, .seminare-seminar-action:has(.seminare-loop-native-price) .seminare-seminar-price{ position:static !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; align-self:end !important; justify-self:stretch !important; text-align:right; transform:none !important; } .seminare-seminar-action .seminare-seminar-button, .seminare-seminar-action:has(.seminare-loop-native-price) .seminare-seminar-button{ width:max-content !important; max-width:100%; margin:14px 0 0 auto !important; align-self:start !important; justify-self:end !important; flex-shrink:0; } } /* v1.6.444 – optionaler Aktivzustand des Loop-Buttons. */ .seminare-seminar-button:active { background-color: var(--seminare-loop-button-active-bg, var(--seminare-loop-button-hover-bg, var(--global-palette-btn-bg-hover, var(--global-palette2, #2b6cb0)))); color: var(--seminare-loop-button-active-color, var(--seminare-loop-button-hover-color, var(--global-palette-btn-hover, #ffffff))) !important; } /* v1.6.457 – einheitlicher Hauptpreis im Seminar-Template. * Desktop/Tablet 23px / 28px / 700; zweite Preiszeile bleibt 13px. */ .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value bdi, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price bdi { font-size:23px !important; line-height:28px !important; font-weight:700 !important; } @media (max-width:767px){ .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value bdi, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price bdi { font-size:23px !important; line-height:24px !important; } } /* v1.6.458 – einheitliche große Preis-Typografie im Seminar-Loop * Desktop/Tablet 23px/28px/700, Mobile 20px/24px/700. * Sekundäre Preiszeilen bleiben unverändert klein. */ .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price bdi, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value bdi { font-size:23px !important; line-height:28px !important; font-weight:700 !important; } @media (max-width:767px) { .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price bdi, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-first .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-gross-only .seminare-seminare-price-main-value bdi, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-price-mode-net-only .seminare-seminare-price-main-value bdi { font-size:23px !important; line-height:24px !important; } } /* v1.6.459 – Mobile-Hauptpreise im Seminar-Loop. */ @media (max-width:767px){ .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-amount, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price .woocommerce-Price-currencySymbol, .seminare-seminar-action .seminare-seminar-price .seminare-loop-native-price bdi, .seminare-seminar-price .seminare-seminare-price-main-value, .seminare-seminar-price .seminare-seminare-price-main-value .woocommerce-Price-amount, .seminare-seminar-price .seminare-seminare-price-main-value .woocommerce-Price-currencySymbol, .seminare-seminar-price .seminare-seminare-price-main-value bdi{ font-size:20px !important; line-height:24px !important; font-weight:700 !important; } } /* v1.6.461 – Desktop: nur die rechte Action-Spalte (Preis + Button) verbreitern. * Bestehendes Card-Grid bleibt vollständig erhalten. * Keine Änderung an Preislogik oder Typografie. */ @media (min-width:1025px){ .seminare-seminar-card{ grid-template-columns:55px 232px minmax(0,1fr) 260px !important; } .seminare-seminar-action{ min-width:260px; } .seminare-seminar-action .seminare-seminar-price, .seminare-seminar-action .seminare-seminar-price *{ white-space:nowrap; } }