.target-groups-special{hyphens:auto;overflow-wrap:anywhere; :where(ol, ul) { padding: 0px; margin: 0px; list-style-type: none; } ul { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); grid-template-rows: 1fr 30px min-content; column-gap: 50px; li { grid-row: 1 / 4; display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; position: relative; a { grid-column: 1 / 2; grid-row: 3 / 4; display: block; padding: 8px 15px 15px 15px; z-index: 1; background-color: var(--white-80); outline: none; text-align: center; text-decoration: none; color: var(--fsu-blue); &::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } &:focus-visible::after { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } @media (hover: hover) { &:hover::after { outline: 1px solid var(--hover-color-dark); outline-offset: 0px; } } } .title { font-weight: 500; font-variation-settings: var(--fsu-font-variation-headline-block); font-size: 1.375rem; line-height: 1.813rem; } .text { margin: 0px; text-wrap: balance; } figure { grid-column: 1 / 2; grid-row: 1 / 4; margin: 0px; img { width: 100%; display: block; aspect-ratio: 9 / 14; } figcaption { padding: 0px 2px; position: absolute; top: 0px; left: 100%; transform: rotate(180deg); writing-mode: vertical-rl; color: var(--copyright-color); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 0.750rem; line-height: 1.000rem; small { font-size: inherit; } } } .corners { grid-column: 1 / 2; grid-row: 2 / 3; display: grid; grid-template-columns: 30px 1fr 30px; &::before { content: ""; background: radial-gradient(circle 30px at top right, transparent 29px, var(--white-80) 30px); } div { background: linear-gradient(180deg, transparent 29px, var(--white-80) 30px); } &::after { content: ""; background: radial-gradient(circle 30px at top left, transparent 29px, var(--white-80) 30px); } } } } fieldset { display: none; }}@media(min-width:48.0000em) and (max-width:74.9375em){.js .target-groups-special{ul { grid-template-columns: repeat(4, calc((100% / 3) - (30px * 2 / 3))); } &:not(:has(ul > li:last-child:nth-child(1), ul > li:last-child:nth-child(2), ul > li:last-child:nth-child(3))) fieldset { display: flex; } :where(.tiny, .small) { display: none; }}}@media(max-width:74.9375em){.target-groups-special{ul li .title { font-size: clamp(var(--fsu-block-font-size-scale-min), var(--fsu-block-font-size-scale), var(--fsu-block-font-size-scale-max)); line-height: clamp(var(--fsu-block-line-height-scale-min), var(--fsu-block-line-height-scale), var(--fsu-block-line-height-scale-max)); } fieldset { align-items: center; margin-top: 20px; :where(fieldset > div.hidden, ol.hidden, li.hidden) { display: none; } :where(fieldset > div, ol) { flex-grow: 1; } button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; } & > div { text-align: center; color: var(--text-color); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 1.125rem; line-height: 1.500rem; } ol { display: flex; justify-content: center; li { & > button { background-color: var(--white-100); color: var(--button-color); &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: -6px; } @media (hover: hover) { &:hover { color: var(--hover-color-dark); i.icon { --icon-font-fill: 0; &::after { content: "\e39e"; } } } &[aria-current]:hover i.icon::after { content: "\e837"; } } } } } & > button { background-color: var(--button-color); color: var(--white-100); &:disabled { box-sizing: border-box; pointer-events: none; touch-action: none; background-color: var(--white-100); border: 1px solid var(--copyright-color); color: var(--copyright-color); } &:focus-visible { outline: 3px solid var(--white-100); outline-offset: -6px; } @media (hover: hover) { &:hover { background-color: var(--hover-color-dark); outline: 1px solid var(--white-100); outline-offset: -4px; } } } }}.js .target-groups-special{contain:layout;div[tabindex="-1"] { &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } ul { column-gap: 30px; &.transition { transition: transform 700ms ease-in-out 0ms; } li.opacity { pointer-events: none; transition: filter 500ms linear; filter: opacity(0.2); } } }}}@media(max-width:47.9375em){.target-groups-special ul li figure figcaption{padding:0}}@media(min-width:32.5000em) and (max-width:47.9375em){.js .target-groups-special{ul { grid-template-columns: repeat(4, calc(50% - (30px * 1 / 2))); } &:not(:has(ul > li:last-child:nth-child(1), ul > li:last-child:nth-child(2))) fieldset { display: flex; } &:where(.tiny, .medium) { display: none; }}}@media(max-width:32.4375em){.js .target-groups-special{ul { grid-template-columns: repeat(4, 100%); } &:not(:has(ul > li:last-child:nth-child(1), ul > li:last-child:nth-child(2))) fieldset { display: flex; } &:where(.small, .medium) { display: none; }}}.teaser-news-special{hyphens:auto;overflow-wrap:anywhere; :where(ol, ul) { padding: 0px; margin: 0px; list-style-type: none; } ol { display: flex; flex-direction: column; row-gap: 50px; & > li { display: grid; grid-template-columns: 50% minmax(0, 1fr); grid-template-rows: 1fr; position: relative; figure { grid-column: 1 / 2; grid-row: 1 / 2; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); margin: 0px; picture { grid-column: 1 / 2; grid-row: 1 / 2; align-self: center; overflow: hidden; &.bg { height: 100%; z-index: -1; img { height: 100%; filter: blur(10px) grayscale(60%); transform: scale(1.1); } } img { width: 100%; display: block; aspect-ratio: 16 / 9; } } figcaption { padding: 3px 0px; position: absolute; top: 100%; left: 0px; color: var(--copyright-color); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 0.750rem; line-height: 1.000rem; small { font-size: inherit; } } } .content { grid-column: 2 / 3; grid-row: 1 / 2; display: flex; flex-direction: column; justify-content: center; padding: 20px 40px; background-color: var(--block-background); ul { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; & > li { padding: 4px 5px 3px 5px; background-color: var(--white-100); text-transform: uppercase; color: var(--text-color); font-variation-settings: var(--fsu-font-variation-text-condensed); font-size: 0.750rem; line-height: 1.000rem; } } a { display: block; outline: none; text-decoration: none; &::after { content: ""; width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; } &:focus-visible::after { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } @media (hover: hover) { &:hover::after { outline: 1px solid var(--hover-color-dark); outline-offset: 0px; } } .title { color: var(--fsu-blue); font-weight: 500; font-variation-settings: var(--fsu-font-variation-headline-block); font-size: 1.375rem; line-height: 1.813rem; } .short { margin: 5px 0px 0px 0px; color: var(--text-color); } } } } & + a { width: fit-content; display: block; padding: var(--link-block-padding) 0px var(--link-block-padding) 0px; margin: 20px 0px 0px auto; text-decoration: underline 1px; text-underline-offset: 3px; color: var(--text-color); font-variation-settings: var(--fsu-font-variation-text-condensed); &:focus-visible { outline: 3px solid var(--hover-color-dark); outline-offset: 0px; } @media (hover: hover) { &:hover { text-decoration-thickness: 2px; } } } }}@media(min-width:48.0000em){.teaser-news-special{ol > li { grid-template-rows: 1fr; &:nth-child(even) { figure { grid-column: 2 / 3; figcaption { right: 0px; left: auto; } } .content { grid-column: 1 / 2; } ul { justify-content: flex-end; } a { text-align: right; } } } &:has(ol > li:last-child:nth-child(odd)) ol + a { margin-top: 0px; }}}@media(max-width:74.9375em){.teaser-news-special ol>li .content a .title{font-size:clamp(var(--fsu-block-font-size-scale-min),var(--fsu-block-font-size-scale),var(--fsu-block-font-size-scale-max));line-height:clamp(var(--fsu-block-line-height-scale-min),var(--fsu-block-line-height-scale),var(--fsu-block-line-height-scale-max))}}@media(max-width:47.9375em){.teaser-news-special ol{row-gap:35px;& + a { margin-top: 0px; } li { grid-template-columns: minmax(0px, 1fr); :is(figure, .author, .content) { grid-column: 1 / 2; grid-row: auto; } figure { picture.bg { display: none; } figcaption { position: static; padding-right: 5px; padding-left: 5px; background-color: var(--block-background); text-align: right; } } .content { padding: 10px; ul { column-gap: 10px; margin-bottom: 15px; } } }}}