.foe-uebersicht,
.foe-lernmix {
--foe-navy: #22315e;
--foe-navy-dark: #1a2649;
--foe-panel: #6b78a8;
--foe-gold: #f0b323;
--foe-white: #ffffff;
--foe-radius: 14px;
--foe-radius-pill: 999px;
--foe-gap: 18px;
}
.foe-uebersicht {
box-sizing: border-box;
color: var(--foe-navy);
}
.foe-uebersicht *,
.foe-uebersicht *::before,
.foe-uebersicht *::after,
.foe-lernmix,
.foe-lernmix *,
.foe-lernmix *::before,
.foe-lernmix *::after {
box-sizing: border-box;
}
.foe-uebersicht .screen-reader-text,
.foe-lernmix .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.foe-uebersicht__heading {
margin: 0 0 24px;
text-align: center;
color: var(--foe-navy);
}
.foe-uebersicht__notice {
padding: 16px;
border: 1px dashed var(--foe-panel);
border-radius: var(--foe-radius);
color: var(--foe-navy);
} .foe-tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.foe-tab {
padding: 16px 14px;
border: 2px solid var(--foe-navy);
border-radius: 6px;
background: var(--foe-navy);
color: var(--foe-white);
font-weight: 700;
font-size: 15px;
line-height: 1.25;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.foe-tab:hover {
background: var(--foe-navy-dark);
}
.foe-tab.is-active {
background: var(--foe-white);
border-color: var(--foe-gold);
color: var(--foe-navy);
}
.foe-tab:focus-visible {
outline: 3px solid var(--foe-gold);
outline-offset: 2px;
} .foe-panel[hidden] {
display: none;
}
.foe-panel__text {
padding: 24px 0;
} .foe-filterwrap {
margin-bottom: 28px;
}
.foe-filter {
position: relative;
padding: 14px 24px 22px;
border-radius: var(--foe-radius);
background: var(--foe-panel);
color: var(--foe-white);
} .foe-filter__caret {
display: block;
width: 34px;
height: 34px;
margin-bottom: 6px;
color: var(--foe-white);
pointer-events: none;
transition: transform 0.2s ease;
display: none;
}
.foe-filter__caret svg {
width: 100%;
height: 100%;
} .foe-filter__caret--plain {
margin-bottom: 14px;
color: var(--foe-navy);
}
.foe-filter__row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 7px 0;
}
.foe-filter__row[hidden] {
display: none;
}
.foe-filter__label {
flex: 0 0 90px;
padding-top: 8px;
font-size: 15px;
font-weight: 500;
color: var(--foe-white);
}
.foe-filter__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.foe-chip {
padding: 5px 12px;
border: 2px solid transparent;
border-radius: var(--foe-radius-pill);
background: var(--foe-navy);
color: var(--foe-white);
font-size: 14px;
font-weight: 400;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.foe-chip[hidden] {
display: none;
}
.foe-chip:hover {
background: var(--foe-navy-dark);
}
.foe-chip:focus-visible {
outline: 3px solid var(--foe-white);
outline-offset: 2px;
}
.foe-chip[aria-pressed="true"] {
box-shadow: 0 0 0 2px var(--foe-white);
}
.foe-chip--gold {
background: var(--foe-gold);
color: var(--foe-navy);
}
.foe-chip--gold:hover {
background: #e0a417;
} .foe-chip--sub {
padding: 5px 10px;
font-size: 12px;
background: var(--foe-navy-dark);
}
.foe-filter__row--sub .foe-filter__label {
padding-top: 6px;
font-size: 13px;
} .foe-chip--wissen {
background: #eef0f6;
color: var(--foe-navy);
}
.foe-chip--wissen:hover {
background: #dfe3ee; 
}
.foe-chip--austausch {
background: var(--foe-gold);
color: var(--foe-navy);
}
.foe-chip--austausch:hover {
background: #e0a417;
}
.foe-chip--uben {
background: var(--foe-navy);
color: var(--foe-white);
}
.foe-filter__actions {
padding-top: 6px;
}
.foe-filter__reset {
padding: 6px 0;
border: 0;
background: none;
color: var(--foe-white);
font-size: 14px;
text-decoration: underline;
cursor: pointer;
}
.foe-filter__reset[hidden] {
display: none;
} .foe-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
}
.foe-empty {
padding: 28px 0;
text-align: center;
color: var(--foe-navy);
}
.foe-empty[hidden] {
display: none;
}  .foe-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--foe-radius);
background: var(--foe-navy);
color: var(--foe-white);
} .foe-card:hover,
.foe-card:focus-within {
z-index: 10;
}
.foe-card.is-hidden {
display: none;
} .foe-card__flag {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 6px 16px;
border-radius: var(--foe-radius) 0 8px 0;
background: var(--foe-gold);
color: var(--foe-navy);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.foe-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--foe-radius) var(--foe-radius) 0 0;
background: var(--foe-navy-dark);
} .foe-card__medialink {
display: block;
width: 100%;
height: 100%;
}
.foe-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.foe-card__media-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #2c3d70, #1a2649);
}
.foe-card__meta {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 26px;
padding: 0 16px;
margin-top: -22px;
z-index: 2;
}
.foe-card__format {
padding: 5px 10px;
border-radius: var(--foe-radius-pill);
background: var(--foe-gold);
color: var(--foe-navy);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
}
.foe-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 10px;
padding: 14px 18px 20px;
}
.foe-card__title {
margin: 0;
font-size: 17px;
line-height: 1.3;
font-weight: 700;
color: var(--foe-white);
}
.foe-card__title a {
color: inherit;
text-decoration: none;
}
.foe-card__title a:hover {
text-decoration: underline;
} .foe-card__sub {
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82);
}
.foe-card__facts {
list-style: none;
margin: 4px 0 0;
padding: 0;
padding-left: 0!important;
font-size: 14px;
}
.foe-card__facts li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 4px 0;
color: var(--foe-white);
}
.foe-card__factbody {
display: flex;
flex-direction: column;
gap: 2px;
}
.foe-card__facts .amount,
.foe-card__facts bdi {
color: var(--foe-white);
}
.foe-card__icon {
flex: 0 0 20px;
display: inline-flex;
margin-top: 1px;
}
.foe-card__icon svg {
width: 20px;
height: 20px;
}
.foe-card__info {
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
}
.foe-card__pricenote {
font-size: 11px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.7);
}
.foe-card__free {
font-weight: 700;
color: var(--foe-gold);
}
.foe-card__button {
align-self: center;
margin-top: auto;
padding: 10px 26px;
border-radius: var(--foe-radius-pill);
background: rgba(255, 255, 255, 0.16);
color: var(--foe-white);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease;
}
.foe-card__button:hover {
background: rgba(255, 255, 255, 0.28);
color: var(--foe-white);
}
.foe-card__button:focus-visible {
outline: 3px solid var(--foe-gold);
outline-offset: 2px;
}
.foe-card--tile .foe-card__body {
padding-top: 18px;
} .foe-card--noimage .foe-card__body {
padding-top: 24px;
} .foe-card__text {
overflow: hidden;
max-height: 8.7em;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82);
}
.foe-card__text > *:first-child {
margin-top: 0;
}
.foe-card__text > *:last-child {
margin-bottom: 0;
}
.foe-card__text p,
.foe-card__text ul,
.foe-card__text ol {
margin: 0 0 10px;
}
.foe-card__text ul,
.foe-card__text ol {
padding-left: 18px;
} .foe-card__text h2,
.foe-card__text h3,
.foe-card__text h4,
.foe-card__text h5,
.foe-card__text h6 {
margin: 14px 0 6px;
color: var(--foe-white);
font-weight: 700;
line-height: 1.25;
}
.foe-card__text h2 {
font-size: 17px;
}
.foe-card__text h3 {
font-size: 16px;
}
.foe-card__text h4,
.foe-card__text h5,
.foe-card__text h6 {
font-size: 15px;
}
.foe-card__text a {
color: var(--foe-white);
text-decoration: underline;
} @supports (grid-template-rows: subgrid) {
.foe-card {
display: grid;
grid-row: span 6;
grid-template-rows: subgrid;
row-gap: 0;
}
.foe-card__media {
grid-row: 1;
}
.foe-card__meta {
grid-row: 2;
}
.foe-card__body {
display: grid;
grid-row: 3 / span 4;
grid-template-rows: subgrid;
row-gap: 10px;
}
.foe-card__title {
grid-row: 1;
}
.foe-card__sub,
.foe-card__text {
grid-row: 2;
}
.foe-card__facts {
grid-row: 3;
}
.foe-card__button {
grid-row: 4;
align-self: end;
justify-self: center;
} .foe-card--noimage,
.foe-card--noimage .foe-card__body {
display: flex;
flex-direction: column;
}
.foe-card--noimage .foe-card__button {
align-self: center;
}
} .foe-lernmix {
position: relative;
flex: 0 0 auto;
}
.foe-lernmix__trigger {
display: block;
padding: 0;
border: 0;
background: none;
cursor: pointer;
line-height: 0;
}
.foe-lernmix__trigger:focus-visible {
outline: 3px solid var(--foe-gold);
outline-offset: 3px;
border-radius: 50%;
}
.foe-lernmix__chart {
display: block;
border-radius: 50%;
background: var(--foe-white);
}
.foe-lernmix--sm .foe-lernmix__chart {
width: 54px;
height: 54px;
box-shadow: 0 0 0 3px var(--foe-navy);
}
.foe-lernmix--lg .foe-lernmix__chart {
width: 120px;
height: 120px;
} .foe-lernmix--standalone {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.foe-lernmix__letter {
font-size: 23px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: central;
}
.foe-lernmix__panel {
position: absolute;
top: calc(100% + 12px);
left: 0;
z-index: 20;
width: max(280px, 30vw);
max-width: min(520px, 90vw);
padding: 18px;
border-radius: var(--foe-radius);
background: var(--foe-navy-dark);
color: var(--foe-white);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.foe-lernmix__panel[hidden] {
display: none;
}
.foe-lernmix__panel-inner {
display: flex;
align-items: flex-start;
gap: 16px;
}
.foe-lernmix__panel-chart .foe-lernmix__chart {
width: 92px;
height: 92px;
}
.foe-lernmix__legend {
flex: 1 1 auto;
margin: 0;
font-size: 13px;
line-height: 1.4;
}
.foe-lernmix__row {
padding: 4px 0;
transition: color 0.15s ease;
}
.foe-lernmix__row dt {
font-weight: 700;
}
.foe-lernmix__row dd {
margin: 0;
color: rgba(255, 255, 255, 0.85);
} .foe-lernmix__row.is-active dt,
.foe-lernmix__row.is-active dd {
color: var(--foe-white);
} .foe-lernmix__row--empty dt,
.foe-lernmix__row--empty dd,
.foe-lernmix__row--empty.is-active dt,
.foe-lernmix__row--empty.is-active dd {
color: rgba(255, 255, 255, 0.4);
}
.foe-lernmix__info {
margin: 14px 0 0;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 12px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.8);
} @media (min-width: 1181px) {
.foe-card:nth-child(4n) .foe-lernmix__panel {
left: auto;
right: 0;
}
}
@media (min-width: 861px) and (max-width: 1180px) {
.foe-card:nth-child(3n) .foe-lernmix__panel {
left: auto;
right: 0;
}
}
@media (min-width: 561px) and (max-width: 860px) {
.foe-card:nth-child(2n) .foe-lernmix__panel {
left: auto;
right: 0;
}
} @media (max-width: 1180px) {
.foe-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.foe-tabs {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.foe-tab {
padding: 12px 10px;
font-size: 14px;
}
}
@media (max-width: 860px) {
.foe-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.foe-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 720px) {
.foe-filter {
padding: 12px 16px 18px;
}
.foe-filter__row {
flex-direction: column;
gap: 8px;
}
.foe-filter__label {
flex: none;
padding-top: 0;
}
.foe-lernmix__panel {
position: fixed;
left: 12px;
right: 12px;
top: auto;
bottom: 12px;
width: auto;
max-width: none;
}
.foe-lernmix__panel-inner {
flex-direction: column;
align-items: center;
text-align: center;
}
}  @keyframes foe-fade-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
} .foe-panel.is-active {
animation: foe-fade-up 240ms ease-out both;
} .foe-grid.is-refreshed .foe-card:not(.is-hidden) {
animation: foe-fade-up 220ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.foe-uebersicht * {
transition: none !important;
animation: none !important;
}
}.foe-warenkorb {
--foe-badge-bg: var(--wp--preset--color--gold, #f8bf3b);
--foe-badge-text: var(--wp--preset--color--navy, #142543);
--foe-badge-size: 11px;
position: relative;
display: inline-flex;
align-items: center;
color: inherit;
line-height: 1;
text-decoration: none;
}
.foe-warenkorb__icon {
display: block;
}
.foe-warenkorb__zahl {
position: absolute;
top: -0.4em;
right: -0.6em;
min-width: 1.5em;
padding: 0 0.35em;
box-sizing: border-box;
border-radius: 999px;
background: var(--foe-badge-bg);
color: var(--foe-badge-text);
font-size: var(--foe-badge-size);
font-weight: 700;
line-height: 1.5em;
text-align: center;
white-space: nowrap; pointer-events: none;
} .foe-warenkorb__zahl:empty {
display: none;
}