@layer settings, generic, elements, objects, components, pages, utilities;

@layer settings {
/*
  Farben aus der bisherigen Joomla-Seite (custom.css, SP Page Builder):
  Vereinsrot #a90001, Graublau #98a7b5, Text #212529, Footer #171717.
  Graublau hat auf Weiß zu wenig Kontrast für Text, nur als Fläche oder Linie nutzen.
*/
:root {
--rgb-shade: 23 23 23;
--color-ink: #212529;
--color-ink-muted: #5a6169;
--color-paper: #fff;
--color-surface: #f4f6f8;
--color-surface-hover: #e9edf1;
--color-accent: #a90001;
--color-accent-dark: #7d0001;
--color-on-accent: #fff;
--color-secondary: #98a7b5;
--color-secondary-light: #dde3e9;
--color-border: #c9d1d9;
--color-footer: #171717;
--color-on-footer: #fff;
--color-on-footer-muted: #b5b5b5;
--color-focus: #1d4ed8;
--color-status-voll: #a90001;
--color-status-warteliste: #7a4f00;
--color-status-offen: #1e6b2f;
--font-body: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
--font-heading: var(--font-body);
--step-small: clamp(0.88rem, 0.84rem + 0.16vw, 0.94rem);
--step-0: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
--step-1: clamp(1.15rem, 1.06rem + 0.4vw, 1.35rem);
--step-2: clamp(1.4rem, 1.22rem + 0.8vw, 1.85rem);
--step-3: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
--step-4: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);
--space-1: 0.5rem;
--space-2: 0.75rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 2rem;
--space-6: 3rem;
--space-7: 4.5rem;
--space-8: 6rem;
--radius-small: 0.35rem;
--radius-medium: 0.6rem;
--radius-large: 1rem;
--shadow-card: 0 0.35rem 1.2rem rgb(var(--rgb-shade) / 10%);
--content-width: 75rem;
--text-width: 44rem;
}
}

@layer generic {
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}

ul,
ol {
margin: 0;
padding: 0;
}

img,
picture {
display: block;
max-width: 100%;
}

img {
height: auto;
}

button,
input,
select,
textarea {
font: inherit;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

[hidden] {
display: none !important;
}
}

@layer elements {
body {
min-width: 20rem;
color: var(--color-ink);
background: var(--color-paper);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.6;
}

h1,
h2,
h3,
h4 {
color: var(--color-ink);
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
text-wrap: balance;
}

h1 {
font-size: var(--step-4);
}

h2 {
font-size: var(--step-3);
}

h3 {
font-size: var(--step-2);
}

h4 {
font-size: var(--step-1);
}

p {
max-width: 70ch;
}

/* Fließtext aus dem CMS (Markdown) bringt eigene Listen mit */
main ul,
main ol {
padding-inline-start: 1.25em;
}

a {
color: var(--color-accent);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}

a:hover {
color: var(--color-accent-dark);
text-decoration-thickness: 0.14em;
}

:focus-visible {
border-radius: 0.2rem;
outline: 0.2rem solid var(--color-focus);
outline-offset: 0.2rem;
}

::selection {
color: var(--color-on-accent);
background: var(--color-accent);
}

/* Anker-Sprünge (z. B. aus dem Wochenplan) nicht unter der fixierten Kopfzeile enden lassen */
html {
scroll-padding-top: 7rem;
}

@media (width >= 62rem) {
html {
scroll-padding-top: 9rem;
}
}

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
}

@layer elements {
table {
width: 100%;
border-collapse: collapse;
}

th,
td {
padding: var(--space-1) var(--space-2);
border-bottom: 1px solid var(--color-border);
text-align: start;
vertical-align: top;
}

th {
font-weight: 700;
}
}

@layer objects {
.o-container {
width: min(100% - 2rem, var(--content-width));
margin-inline: auto;
}

.o-container--text {
width: min(100% - 2rem, var(--text-width));
}

.o-stack > * + * {
margin-block-start: var(--flow-space, var(--space-4));
}

.o-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: var(--grid-gap, var(--space-4));
}

/* Breite Tabellen (Wochenplan) scrollen in sich statt die Seite zu verbreitern */
.o-scroll-x {
overflow-x: auto;
}
}

@layer components {
.c-site-main {
padding-block: var(--space-5) var(--space-7);
}

.c-site-main:focus {
outline: none;
}

.c-button {
display: inline-block;
padding: 0.55rem 1.1rem;
border: 2px solid var(--color-accent);
border-radius: var(--radius-small);
color: var(--color-on-accent);
background: var(--color-accent);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}

.c-button:hover {
border-color: var(--color-accent-dark);
color: var(--color-on-accent);
background: var(--color-accent-dark);
}
}

@layer components {
/* Kopfzeile bleibt beim Scrollen oben stehen */
.c-site-header {
position: sticky;
top: 0;
z-index: 10;
border-bottom: 4px solid var(--color-accent);
background: var(--color-paper);
}

.c-site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
padding-block: var(--space-2);
}

.c-site-header__inner,
.c-site-header__logo img {
transition: padding 0.2s ease, height 0.2s ease;
}

.c-site-header__logo img {
width: auto;
height: 4.5rem;
}

/* Beim Runterscrollen (Klasse von navigation.js) wird die Kopfzeile schmaler */
.c-site-header.is-klein .c-site-header__inner {
padding-block: 0.35rem;
}

.c-site-header.is-klein .c-site-header__logo img {
height: 3rem;
}

@media (width >= 62rem) {
.c-site-header__logo img {
height: 6rem;
}

.c-site-header.is-klein .c-site-header__logo img {
height: 3.5rem;
}
}

/* Aufgeklapptes Handy-Menü scrollt in sich, wenn es länger als der Bildschirm ist */
@media (width < 62rem) {
.c-nav.is-open {
max-height: calc(100dvh - 6.5rem);
overflow-y: auto;
}
}
}

@layer components {
/* Mobil: Menü-Knopf, Navigation untereinander über die volle Breite */
.c-nav-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.55rem 0.9rem;
border: 2px solid var(--color-ink);
border-radius: var(--radius-small);
color: var(--color-ink);
background: transparent;
font-weight: 700;
cursor: pointer;
}

.c-nav-toggle__icon,
.c-nav-toggle__icon::before,
.c-nav-toggle__icon::after {
display: block;
width: 1.2rem;
height: 2px;
background: currentcolor;
}

.c-nav-toggle__icon {
position: relative;
}

.c-nav-toggle__icon::before,
.c-nav-toggle__icon::after {
position: absolute;
left: 0;
content: "";
}

.c-nav-toggle__icon::before {
top: -0.4rem;
}

.c-nav-toggle__icon::after {
top: 0.4rem;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__icon {
background: transparent;
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__icon::before {
top: 0;
transform: rotate(45deg);
}

.c-nav-toggle[aria-expanded="true"] .c-nav-toggle__icon::after {
top: 0;
transform: rotate(-45deg);
}

.c-nav {
flex-basis: 100%;
}

.js .c-nav:not(.is-open) {
display: none;
}

.c-nav__list,
.c-nav__sub,
.c-nav__extra {
list-style: none;
}

.c-nav__link,
.c-nav__sublink {
display: block;
width: 100%;
padding: 0.7rem 0.25rem;
border: 0;
color: var(--color-ink);
background: none;
font-weight: 700;
text-align: start;
text-decoration: none;
cursor: pointer;
}

.c-nav__item + .c-nav__item {
border-top: 1px solid var(--color-border);
}

.c-nav__sublink {
padding-inline-start: var(--space-4);
font-weight: 400;
}

.c-nav__link:hover,
.c-nav__sublink:hover,
.c-nav__link[aria-current="page"],
.c-nav__link[data-aktiv],
.c-nav__sublink[aria-current="page"] {
color: var(--color-accent);
}

.c-nav__toggle::after {
display: inline-block;
width: 0.45em;
height: 0.45em;
margin-inline-start: 0.5em;
border-right: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
content: "";
transform: translateY(-0.2em) rotate(45deg);
}

.c-nav__toggle[aria-expanded="true"]::after {
transform: translateY(0.05em) rotate(-135deg);
}

.js .c-nav__toggle[aria-expanded="false"] + .c-nav__sub {
display: none;
}

.c-nav__extra {
display: flex;
align-items: center;
gap: var(--space-5);
padding-block: var(--space-3);
}

.c-nav__instagram {
display: inline-flex;
padding: 0.3rem;
color: var(--color-ink);
}

.c-nav__instagram:hover {
color: var(--color-accent);
}

/* Desktop: Leiste neben dem Logo, Untermenüs als Aufklapper */
@media (width >= 62rem) {
.c-nav-toggle {
display: none;
}

.c-nav,
.js .c-nav:not(.is-open) {
display: flex;
flex-basis: auto;
align-items: center;
gap: var(--space-4);
}

.c-nav__list {
display: flex;
gap: var(--space-1);
}

.c-nav__item {
position: relative;
}

.c-nav__item + .c-nav__item {
border-top: 0;
}

.c-nav__link {
padding: 0.6rem 0.7rem;
}

/* Desktop: Untermenüs öffnen beim Drüberfahren. Statt display schalten Sichtbarkeit und
   Deckkraft um, damit das Schließen 0,25 s wartet, wenn die Maus kurz danebenrutscht.
   Versteckte Untermenüs (visibility: hidden) sind für die Tastatur nicht erreichbar. */
.c-nav__sub,
.js .c-nav__item > .c-nav__toggle + .c-nav__sub {
position: absolute;
top: 100%;
left: 0;
display: block;
min-width: 15rem;
padding-block: var(--space-1);
border-top: 3px solid var(--color-accent);
background: var(--color-paper);
box-shadow: var(--shadow-card);
visibility: hidden;
opacity: 0;
transform: translateY(0.35rem);
transition: opacity 0.15s ease 0.25s, transform 0.15s ease 0.25s, visibility 0s linear 0.4s;
}

.c-nav__sublink {
padding: 0.5rem 1rem;
}

/* Öffnen: beim Drüberfahren, per Knopf (Klick, Touch, Tastatur), ohne JavaScript auch per Fokus */
.js .c-nav__item:hover > .c-nav__toggle + .c-nav__sub,
.js .c-nav__item > .c-nav__toggle[aria-expanded="true"] + .c-nav__sub,
:root:not(.js) .c-nav__item:hover > .c-nav__sub,
:root:not(.js) .c-nav__item:focus-within > .c-nav__sub {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0s;
}

.c-nav__extra {
padding-block: 0;
}
}
}

@layer components {
.c-site-footer {
color: var(--color-on-footer);
background: var(--color-footer);
font-size: var(--step-small);
}

.c-site-footer__inner {
display: grid;
gap: var(--space-5);
padding-block: var(--space-6);
}

@media (width >= 48rem) {
.c-site-footer__inner {
grid-template-columns: 1fr auto;
}
}

.c-site-footer__title {
margin-block-end: var(--space-2);
color: var(--color-on-footer);
font-size: var(--step-1);
}

.c-site-footer address {
font-style: normal;
}

.c-site-footer a {
color: var(--color-on-footer);
}

.c-site-footer a:hover {
color: var(--color-on-footer-muted);
}

.c-site-footer__nav ul {
display: grid;
gap: var(--space-1);
list-style: none;
}

.c-site-footer__copy {
grid-column: 1 / -1;
max-width: none;
padding-block-start: var(--space-4);
border-top: 1px solid rgb(255 255 255 / 20%);
color: var(--color-on-footer-muted);
}
}

@layer components {
/* Status einer Gruppe: steht immer als Text da, Farbe ist nur Zusatz */
.c-status {
font-weight: 700;
white-space: nowrap;
}

.c-status--voll {
color: var(--color-status-voll);
}

.c-status--warteliste {
color: var(--color-status-warteliste);
}

.c-status--offen {
color: var(--color-status-offen);
}
}

@layer components {
/* Spartenseite: Einleitung, Wochenraster der Sparte, Gruppen mit Gesichtern */
.c-sparte__kopf {
max-width: var(--text-width);
margin-block-end: var(--space-6);
}

.c-sparte__einleitung {
font-size: var(--step-1);
line-height: 1.5;
}

.c-sparte__woche > h2,
.c-sparte__gruppen > h2,
.c-sparte__text > h2 {
margin-block-end: var(--space-4);
font-size: var(--step-2);
}

.c-sparte__wochenplan {
margin-block-start: var(--space-3);
font-weight: 700;
}

.c-sparte__gruppen {
margin-block-start: var(--space-7);
}

.c-sparte__text {
max-width: var(--text-width);
margin-block-start: var(--space-7);
}

/* Wochenraster: mobil Tage untereinander, ab Tablet nebeneinander; nur Tage mit Training */
.c-woche {
display: grid;
gap: var(--space-4);
}

.c-woche__tag {
display: grid;
grid-template-columns: 2.75rem 1fr;
gap: var(--space-2);
align-items: start;
}

.c-woche__name {
padding-block-start: 0.55rem;
color: var(--color-ink-muted);
font-size: var(--step-small);
letter-spacing: 0.06em;
text-transform: uppercase;
}

.c-woche__lang {
display: none;
}

.c-woche__liste {
display: grid;
gap: var(--space-1);
list-style: none;
padding: 0;
}

/* Blöcke sind Links zur Gruppe: Vereinsfarben, roter Streifen und Pfeil zeigen, dass man klicken kann */
.c-woche__block {
position: relative;
display: grid;
gap: 0.1rem;
padding: 0.65rem 2rem 0.65rem 0.9rem;
border-inline-start: 4px solid var(--color-accent);
border-radius: var(--radius-medium);
color: var(--color-ink);
background: var(--color-secondary-light);
line-height: 1.3;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.c-woche__block::after {
position: absolute;
top: 50%;
right: 0.8rem;
color: var(--color-accent);
font-size: 1.4rem;
font-weight: 700;
content: "›";
transform: translateY(-55%);
}

.c-woche__block--voll,
.c-woche__block--warteliste {
background: #f6e3e3;
}

.c-woche__block:hover,
.c-woche__block:focus-visible {
color: var(--color-on-accent);
background: var(--color-accent);
transform: translateY(-1px);
}

.c-woche__block:hover::after,
.c-woche__block:focus-visible::after,
.c-woche__block:hover .c-woche__zeit,
.c-woche__block:focus-visible .c-woche__zeit,
.c-woche__block:hover .c-status,
.c-woche__block:focus-visible .c-status {
color: var(--color-on-accent);
}

.c-woche__zeit {
color: var(--color-accent-dark);
font-size: var(--step-small);
font-variant-numeric: tabular-nums;
font-weight: 700;
}

.c-woche__block .c-status {
font-size: var(--step-small);
white-space: normal;
}

@media (width >= 48rem) {
.c-woche {
grid-auto-columns: minmax(0, 15rem);
grid-auto-flow: column;
gap: var(--space-3);
}

.c-woche__tag {
display: flex;
flex-direction: column;
gap: var(--space-1);
align-items: stretch;
}

.c-woche__name {
padding: 0 0 var(--space-1) 0.9rem;
}

.c-woche__lang {
display: inline;
}

.c-woche__kurz {
display: none;
}
}

/* Gruppen: Gesichter über dem Namen, damit alle Texte an derselben Kante beginnen */
/* Mobil eine Spalte: die Spalten-Hüllen lösen sich auf, `order` stellt die Reihenfolge 1, 2, 3 … her */
.c-gruppen {
display: flex;
flex-direction: column;
gap: var(--space-3);
}

.c-gruppen__spalte {
display: contents;
}

/* Desktop: zwei voneinander unabhängige Spalten, Aufklappen schiebt nur die eigene */
@media (width >= 62rem) {
.c-gruppen {
flex-direction: row;
align-items: flex-start;
gap: var(--space-5);
}

.c-gruppen__spalte {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
}

.c-gruppe {
display: flex;
flex-direction: column;
gap: var(--space-2) var(--space-3);
align-items: start;
padding: var(--space-4);
border-radius: var(--radius-large);
scroll-margin-top: var(--space-4);
transition: background-color 0.2s ease;
}

.c-gruppe:target {
background: var(--color-surface);
}

.c-gruppe__gesichter {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
gap: var(--space-1);
}

.c-gruppe__gesichter img {
width: 4rem;
height: 4rem;
border-radius: 50%;
object-fit: cover;
}

@media (width >= 36rem) {
.c-gruppe__gesichter img {
width: 5rem;
height: 5rem;
}
}

.c-gruppe__inhalt {
display: grid;
flex: 1;
gap: 0.3rem;
min-width: 0;
}

.c-gruppe__kopf {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
}

.c-gruppe__name {
font-size: var(--step-1);
}

.c-gruppe__kopf .c-status {
font-size: var(--step-small);
}

.c-gruppe__wann {
font-weight: 700;
}

.c-gruppe__wo {
color: var(--color-ink-muted);
}

.c-gruppe__kurz {
margin-block-start: var(--space-1);
}

.c-gruppe__mehr summary {
width: fit-content;
color: var(--color-accent);
font-weight: 700;
cursor: pointer;
}

.c-gruppe__mehr[open] summary {
margin-block-end: var(--space-2);
}

.c-gruppe__trainer-titel {
margin-block: var(--space-4) var(--space-2);
font-size: var(--step-0);
}

/* Übungsleitung im aufgeklappten Teil: nur Name und Mailadresse, die Fotos stehen schon oben */
.c-trainer {
display: grid;
gap: var(--space-1);
list-style: none;
padding: 0;
}

.c-trainer li {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-2);
}

.c-trainer a {
overflow-wrap: anywhere;
}

.c-trainer__name {
font-weight: 700;
}
}

@layer components {
/* News-Übersicht: Bild oben, darunter Datum, Titel, Anriss. Ganze Kachel ist der Link */
.c-news {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
gap: var(--space-5) var(--space-4);
list-style: none;
padding: 0;
}

.c-news__link {
display: grid;
gap: var(--space-2);
color: var(--color-ink);
text-decoration: none;
}

.c-news__bild {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: var(--radius-medium);
background: var(--color-surface);
object-fit: cover;
transition: transform 0.2s ease;
}

.c-news__bild--ohne {
display: grid;
place-items: center;
background: var(--color-secondary-light);
}

.c-news__bild--ohne img {
width: auto;
height: 45%;
opacity: 0.55;
}

.c-news__link:hover .c-news__bild {
transform: scale(1.015);
}

.c-news__text {
display: grid;
gap: 0.3rem;
}

.c-news__datum {
color: var(--color-ink-muted);
font-size: var(--step-small);
font-weight: 700;
}

.c-news__titel {
font-size: var(--step-1);
font-weight: 700;
line-height: 1.25;
}

.c-news__link:hover .c-news__titel {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}

.c-news__anriss {
display: -webkit-box;
overflow: hidden;
color: var(--color-ink-muted);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

/* Seitenzahlen */
.c-seiten {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-block-start: var(--space-7);
}

.c-seiten__liste {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
list-style: none;
padding: 0;
}

.c-seiten__nr,
.c-seiten__pfeil {
display: inline-grid;
place-items: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding-inline: 0.6rem;
border-radius: 999px;
color: var(--color-accent-dark);
font-weight: 700;
text-decoration: none;
}

.c-seiten__nr:hover,
.c-seiten__pfeil:hover {
color: var(--color-accent-dark);
background: #f6e3e3;
}

.c-seiten__nr[aria-current="page"] {
color: var(--color-on-accent);
background: var(--color-accent);
}

/* Beitragsseite */
.c-beitrag {
max-width: var(--text-width);
margin-inline: auto;
}

.c-beitrag__kopf {
display: grid;
gap: var(--space-2);
margin-block-end: var(--space-4);
}

.c-beitrag__kopf h1 {
font-size: var(--step-3);
}

.c-beitrag__zurueck {
font-weight: 700;
text-decoration: none;
}

.c-beitrag__bild {
width: 100%;
margin-block-end: var(--space-5);
border-radius: var(--radius-medium);
}

.c-beitrag__text img {
border-radius: var(--radius-medium);
}

.c-beitrag__weiter {
display: grid;
gap: var(--space-3);
margin-block-start: var(--space-7);
padding-block-start: var(--space-4);
border-top: 1px solid var(--color-border);
}

@media (width >= 48rem) {
.c-beitrag__weiter {
grid-template-columns: 1fr 1fr;
}
}

.c-beitrag__weiter a {
display: grid;
gap: 0.2rem;
color: var(--color-ink);
font-weight: 700;
text-decoration: none;
}

.c-beitrag__weiter a:hover {
color: var(--color-accent);
}

.c-beitrag__weiter span {
color: var(--color-ink-muted);
font-size: var(--step-small);
}

.c-beitrag__neuer {
text-align: end;
}
}

@layer pages {
/* Filter nach Zielgruppe: Knöpfe in Pillenform, die Auswahl ist rot gefüllt */
.c-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin-block-end: var(--space-5);
}

.c-filter__titel {
font-weight: 700;
}

.c-filter__liste {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
list-style: none;
padding: 0;
}

.c-filter__knopf {
display: inline-block;
padding: 0.45rem 1rem;
border: 2px solid var(--color-accent);
border-radius: 999px;
color: var(--color-accent-dark);
background: var(--color-paper);
font-weight: 700;
text-decoration: none;
}

.c-filter__knopf:hover {
color: var(--color-accent-dark);
background: #f6e3e3;
}

.c-filter__knopf[aria-current="true"] {
color: var(--color-on-accent);
background: var(--color-accent);
}

/* Im Wochenplan aller Sparten steht die Sparte klein über der Gruppe */
.c-woche__sparte {
color: var(--color-ink-muted);
font-size: var(--step-small);
font-weight: 700;
letter-spacing: 0.02em;
}

.c-woche__block:hover .c-woche__sparte,
.c-woche__block:focus-visible .c-woche__sparte {
color: var(--color-on-accent);
}

.c-woche--alle .c-woche__leer {
padding: 0.65rem 0.9rem;
color: var(--color-ink-muted);
font-size: var(--step-small);
}

@media (width >= 48rem) {
.c-woche--alle {
grid-auto-columns: minmax(0, 1fr);
}
}
}

@layer pages {
/* Abstand zwischen den Bereichen der Startseite */
.c-start-hero,
.c-start-finden,
.c-start-sparten,
.c-start-news,
.c-start-partner,
.c-start-kontakt {
margin-block-end: var(--space-7);
}

.c-start-finden > h2,
.c-start-sparten > h2,
.c-start-partner > h2,
.c-start-kontakt > h2,
.c-start__kopfzeile h2 {
margin-block-end: var(--space-3);
font-size: var(--step-2);
}

/* Willkommen: Text links, Bild rechts */
.c-start-hero {
display: grid;
gap: var(--space-5);
align-items: center;
}

@media (width >= 56rem) {
.c-start-hero {
grid-template-columns: 1fr 1fr;
}
}

.c-start-hero h1 {
font-size: var(--step-3);
}

.c-start-hero__text p {
font-size: var(--step-1);
line-height: 1.5;
}

.c-start-hero__knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}

.c-start-hero__bild {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-large);
object-fit: cover;
}

.c-button--leise {
color: var(--color-accent-dark);
background: transparent;
}

.c-button--leise:hover {
color: var(--color-accent-dark);
background: #f6e3e3;
}

/* Training finden: Zielgruppen als Einstieg in den Wochenplan */
.c-start-finden {
padding: var(--space-5);
border-radius: var(--radius-large);
background: var(--color-secondary-light);
}

.c-start-finden > p {
margin-block-end: var(--space-3);
}

.c-filter__knopf--voll {
color: var(--color-on-accent);
background: var(--color-accent);
}

.c-filter__knopf--voll:hover {
color: var(--color-on-accent);
background: var(--color-accent-dark);
}

/* Spartenkacheln mit Piktogramm */
/* Kacheln: eine pro Zeile auf sehr schmalen Geräten, zwei am Handy, drei ab Tablet.
   Piktogramm und Schrift wachsen mit der Breite */
.c-kacheln {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(0.5rem, 2vw, var(--space-4));
list-style: none;
padding: 0;
}

@media (width >= 22rem) {
.c-kacheln {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (width >= 48rem) {
.c-kacheln {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.c-kachel {
display: grid;
align-content: center;
justify-items: center;
gap: 0.3rem;
height: 100%;
padding: clamp(var(--space-3), 4vw, var(--space-6)) clamp(0.4rem, 2vw, var(--space-4));
border-radius: var(--radius-large);
color: var(--color-ink);
background: var(--color-surface);
text-align: center;
text-decoration: none;
transition: background-color 0.15s ease, transform 0.15s ease;
}

.c-kachel:hover {
background: var(--color-secondary-light);
transform: translateY(-2px);
}

.c-kachel__icon {
width: clamp(4rem, 12vw, 8rem);
height: clamp(4rem, 12vw, 8rem);
margin-block-end: var(--space-2);
object-fit: contain;
mix-blend-mode: multiply;
}

.c-kachel__name {
font-size: clamp(0.9rem, 0.7rem + 1vw, var(--step-2));
font-weight: 700;
line-height: 1.2;
hyphens: auto;
overflow-wrap: break-word;
}

.c-kachel:hover .c-kachel__name {
color: var(--color-accent);
}

/* Aktuelles */
.c-start__kopfzeile {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
}

.c-start__kopfzeile a {
font-weight: 700;
}

/* Werbepartner: Logos in Graustufen, beim Drüberfahren farbig */
.c-start-partner > p {
max-width: var(--text-width);
margin-block-end: var(--space-4);
color: var(--color-ink-muted);
}

.c-partner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-6);
list-style: none;
padding: 0;
}

.c-partner img {
width: auto;
max-width: 10rem;
height: 3.5rem;
object-fit: contain;
filter: grayscale(1);
opacity: 0.8;
transition: filter 0.2s ease, opacity 0.2s ease;
}

.c-partner a:hover img,
.c-partner a:focus-visible img {
filter: none;
opacity: 1;
}

/* Kontakt */
.c-start-kontakt__spalten {
display: grid;
gap: var(--space-3) var(--space-5);
}

@media (width >= 48rem) {
.c-start-kontakt__spalten {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.c-start-kontakt address {
font-style: normal;
}
}

@layer utilities {
.u-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

.c-skip-link {
position: absolute;
z-index: 100;
top: var(--space-2);
left: var(--space-2);
padding: 0.7rem 1rem;
border-radius: var(--radius-small);
color: var(--color-paper);
background: var(--color-ink);
font-weight: 700;
text-decoration: none;
transform: translateY(-200%);
}

.c-skip-link:focus {
color: var(--color-paper);
transform: translateY(0);
}
}