/* =========================================================
   HC Empor Rostock – Unterseiten (Tickets, Spielplan, News)
   Variablen (--hce-*) kommen aus hce-layout.css
   ========================================================= */

body.hce-subpage {
    --hce-elev: 0 1px 2px rgba(8, 58, 87, .12), 0 12px 32px rgba(8, 58, 87, .18);
    --hce-edge: 1px solid rgba(8, 58, 87, .10);
    /* Dunkelblau wie der Footer: unter kurzen Seiten bleibt so kein heller Streifen */
    background: var(--hce-navy);
    color: var(--hce-navy);
}
.hce-subpage .hce-footer { margin-top: 0; }

/* ---------- Seitengerüst ---------- */
.hce-page {
    min-height: 60vh;
    padding-block: 44px 72px;
    background-color: var(--hce-yellow);
    background-image: url("hintergrund/Hintergrund Textur.webp");
}
.hce-page--dark {
    background-color: var(--hce-navy);
    background-image: radial-gradient(ellipse at 80% -10%, rgba(254, 201, 11, .12), transparent 55%);
    background-size: auto;
    color: var(--hce-white);
}
.hce-page__narrow { max-width: 900px; }

.hce-page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}
.hce-page__title {
    font: 700 56px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-page__lead {
    margin-top: 8px;
    font: 600 15px/1.4 var(--hce-body);
    color: var(--hce-muted);
}
.hce-page__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--hce-navy);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-page__empty {
    padding: 28px 0;
    font: 500 15px/1.5 var(--hce-body);
    color: var(--hce-muted);
}
.hce-page--dark .hce-page__title { color: var(--hce-white); }
.hce-page--dark .hce-page__lead,
.hce-page--dark .hce-page__empty { color: var(--hce-soft); }
.hce-page--dark .hce-page__icon { stroke: var(--hce-yellow); }

/* "Präsentiert von" (Spielplan) */
.hce-presented {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--hce-white);
    border-radius: 12px;
    text-decoration: none;
    box-shadow: var(--hce-elev);
    flex-shrink: 0;
}
.hce-presented span {
    font: 700 11px/1.2 var(--hce-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hce-muted);
    max-width: 80px;
}
.hce-presented img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }

/* ---------- Umschalter (Tabs) ---------- */
.hce-seg {
    display: flex;
    gap: 28px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(8, 58, 87, .2);
}
.hce-seg button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--hce-muted);
    font: 700 15px/1 var(--hce-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.hce-seg button span {
    min-width: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(8, 58, 87, .12);
    font: 700 11px/1 var(--hce-body);
    letter-spacing: 0;
}
.hce-seg button[aria-selected="true"] {
    color: var(--hce-navy);
    border-bottom-color: var(--hce-navy);
}
.hce-seg button:focus-visible { outline: 2px solid var(--hce-navy); outline-offset: 4px; }

.hce-page--dark .hce-seg { border-bottom-color: rgba(255, 255, 255, .14); }
.hce-page--dark .hce-seg button { color: rgba(255, 255, 255, .6); }
.hce-page--dark .hce-seg button span { background: rgba(255, 255, 255, .12); }
.hce-page--dark .hce-seg button[aria-selected="true"] {
    color: var(--hce-yellow);
    border-bottom-color: var(--hce-yellow);
}

/* ---------- Spielkarten (Tickets + Spielplan) ---------- */
.hce-matchlist {
    display: grid;
    gap: 14px;
    list-style: none;
}
.hce-match {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

/* Datumsblock */
.hce-match__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.hce-match__month {
    font: 800 13px/1 var(--hce-body);
    letter-spacing: .12em;
    color: var(--hce-navy);
}
.hce-match__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 50px;
    border-radius: 6px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 700 34px/1 var(--hce-display);
    padding-top: 3px;
}
.hce-match__wd {
    font: 800 12px/1 var(--hce-body);
    letter-spacing: .1em;
    color: var(--hce-muted);
}

/* Karte */
.hce-match__card {
    display: grid;
    /* Links eine gleich breite Leerspalte, damit die Teams immer genau mittig stehen –
       egal ob rechts Buttons sind oder nicht */
    grid-template-columns: 140px minmax(0, 1fr) 140px;
    grid-template-areas: ". teams actions" ". meta actions";
    align-items: center;
    gap: 12px 28px;
    padding: 20px 24px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 14px;
    box-shadow: var(--hce-elev);
}
.hce-match__teams {
    grid-area: teams;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
}
.hce-match__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: center;
}
.hce-match__team .hce-crest { width: 62px; height: 62px; }
.hce-match__team > span:last-child {
    font: 800 13px/1.25 var(--hce-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-match__vs {
    font: 700 30px/1 var(--hce-display);
    color: var(--hce-navy);
    letter-spacing: .04em;
}
/* Ergebnis (vergangene Spiele) */
.hce-match__score {
    font: 700 42px/1 var(--hce-display);
    color: var(--hce-navy);
    letter-spacing: .02em;
    white-space: nowrap;
}
.hce-match__score i {
    font: inherit;
    font-style: normal;
    color: var(--hce-yellow-2);
    margin: 0 4px;
}
.hce-match__score--open { color: var(--hce-muted); font-size: 32px; }
.hce-match__badge--win  { background: var(--hce-navy); color: var(--hce-yellow); }
.hce-match__badge--loss { background: rgba(8, 58, 87, .1); color: var(--hce-muted); }
.hce-match__badge--draw { background: var(--hce-soft); color: var(--hce-navy); }

.hce-match__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 13px/1.3 var(--hce-body);
    color: var(--hce-muted);
    text-align: center;
}
.hce-match__badge {
    padding: 4px 8px;
    border-radius: 4px;
    font: 800 10px/1 var(--hce-body);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.hce-match__badge--home { background: var(--hce-yellow); color: var(--hce-navy); }
.hce-match__badge--away { background: rgba(8, 58, 87, .1); color: var(--hce-navy); }

.hce-match__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hce-match__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 100%;
    padding: 0 18px;
    border-radius: 8px;
    border: 2px solid var(--hce-navy);
    color: var(--hce-navy);
    font: 800 13px/1 var(--hce-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.hce-match__btn:hover { background: var(--hce-navy); color: var(--hce-white); }
.hce-match__btn--primary {
    background: var(--hce-yellow);
    border-color: var(--hce-yellow);
}
.hce-match__btn--primary:hover {
    background: var(--hce-yellow-2);
    border-color: var(--hce-yellow-2);
    color: var(--hce-navy);
}
.hce-match__none {
    font: 600 12px/1.3 var(--hce-body);
    color: var(--hce-muted);
    text-align: center;
}

/* Dunkle Variante */
.hce-page--dark .hce-match__month { color: var(--hce-yellow); }
.hce-page--dark .hce-match__day { background: var(--hce-yellow); color: var(--hce-navy); }
.hce-page--dark .hce-match__wd { color: var(--hce-soft); }
.hce-page--dark .hce-match__card {
    background: var(--hce-navy-2);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}
.hce-page--dark .hce-match__team > span:last-child { color: var(--hce-white); }
.hce-page--dark .hce-match__vs { color: var(--hce-yellow); }
.hce-page--dark .hce-match__score { color: var(--hce-white); }
.hce-page--dark .hce-match__score i { color: var(--hce-yellow); }
.hce-page--dark .hce-match__score--open { color: var(--hce-soft); }
.hce-page--dark .hce-match__badge--win  { background: var(--hce-yellow); color: var(--hce-navy); }
.hce-page--dark .hce-match__badge--loss { background: rgba(255, 255, 255, .14); color: var(--hce-soft); }
.hce-page--dark .hce-match__meta,
.hce-page--dark .hce-match__none { color: var(--hce-soft); }
.hce-page--dark .hce-match__badge--away { background: rgba(255, 255, 255, .14); color: var(--hce-white); }
.hce-page--dark .hce-match__btn { border-color: rgba(255, 255, 255, .7); color: var(--hce-white); }
.hce-page--dark .hce-match__btn:hover { background: var(--hce-white); color: var(--hce-navy); }
.hce-page--dark .hce-match__btn--primary { border-color: var(--hce-yellow); color: var(--hce-navy); }
.hce-page--dark .hce-match__btn--primary:hover { background: var(--hce-yellow-2); border-color: var(--hce-yellow-2); }

/* Tabelle (Bild) */
.hce-page__link {
    flex-shrink: 0;
    padding-bottom: 4px;
    border-bottom: 3px solid var(--hce-navy);
    color: var(--hce-navy);
    font: 800 16px/1.2 var(--hce-body);
    text-decoration: none;
    white-space: nowrap;
}
.hce-page__link span { font: inherit; }
.hce-standings { padding: 20px; min-width: 0; }
.hce-standings__scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: var(--hce-edge);
    background: var(--hce-bg);
}
.hce-standings__img { display: block; }
.hce-standings__img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
}
.hce-standings__hint--mobile { display: none; }
.hce-standings__hint {
    margin-top: 12px;
    text-align: center;
    font: 500 13px/1.4 var(--hce-body);
    color: var(--hce-muted);
}

/* =========================================================
   MANNSCHAFT
   ========================================================= */
.hce-teamphoto {
    margin: 0 0 36px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    background: #000;
}
.hce-teamphoto img { display: block; width: 100%; height: auto; }

.hce-team__title {
    padding-bottom: 14px;
    border-bottom: 8px solid var(--hce-white);
    font: 700 72px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-white);
}

/* Spielplan/Tabelle-Links (Jugendteams, handball.net) */
.hce-team__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}
.hce-teamlink {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--hce-navy-2);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--hce-white);
    text-decoration: none;
    transition: background .2s, transform .2s;
}
.hce-teamlink:hover { background: #0d5a80; transform: translateY(-2px); }
.hce-teamlink:focus-visible { outline: 3px solid var(--hce-yellow); outline-offset: 3px; }
.hce-teamlink__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
}
.hce-teamlink__icon svg { width: 24px; height: 24px; }
/* Nachwuchs: Foto unter der Überschrift */
.hce-youth__photo { margin: 28px 0 0; }
.hce-teamlink__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hce-teamlink__text strong { font: 700 26px/1 var(--hce-display); letter-spacing: .04em; text-transform: uppercase; }
.hce-teamlink__text span { font: 500 13px/1.3 var(--hce-body); color: var(--hce-soft); }
.hce-teamlink__go { font: 700 24px/1 var(--hce-body); color: var(--hce-yellow); transition: transform .2s; }
.hce-teamlink:hover .hce-teamlink__go { transform: translateX(4px); }

/* Bereich mit großer, blasser Überschrift im Hintergrund */
.hce-team__group {
    position: relative;
    padding-top: 44px;
    scroll-margin-top: 140px;
}
.hce-team__ghost {
    margin-bottom: -16px;
    padding-top: 12px;
    font: 700 104px/1.1 var(--hce-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .1);
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}
.hce-team__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Spielerkarten */
.hce-players {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
}
.hce-player {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--hce-navy-2);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    outline: none;
    isolation: isolate;
}
.hce-player:focus-visible { box-shadow: 0 0 0 3px var(--hce-yellow), 0 10px 26px rgba(0, 0, 0, .28); }
.hce-player__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .08), transparent 65%),
        var(--hce-navy-2);
}
.hce-player__media img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .5s ease;
}
.hce-player__initials {
    font: 700 56px/1 var(--hce-display);
    color: rgba(255, 255, 255, .25);
}

/* Name + Nummer: erscheint beim Hovern von unten */
.hce-player__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 60px 18px 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 58, 87, .75) 45%, rgba(5, 30, 45, .96) 100%);
    transition: opacity .3s ease, transform .3s ease;
}
.hce-player__nr {
    flex-shrink: 0;
    font: 700 56px/.85 var(--hce-display);
    color: var(--hce-yellow);
}
.hce-player__name {
    padding-bottom: 2px;
    font: 700 21px/1.05 var(--hce-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hce-white);
}
/* Standard: verborgen. Desktop: beim Hovern, Handy: nach Antippen (.is-open per JS) */
.hce-player { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hce-player__info { opacity: 0; transform: translateY(24px); }
.hce-player.is-open .hce-player__info,
.hce-player:focus-visible .hce-player__info { opacity: 1; transform: none; }
.hce-player.is-open .hce-player__media img { transform: scale(1.05); }
@media (hover: hover) {
    .hce-player:hover .hce-player__info { opacity: 1; transform: none; }
    .hce-player:hover .hce-player__media img,
    .hce-player:focus-visible .hce-player__media img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .hce-player__info, .hce-player__media img { transition: none; }
}

/* =========================================================
   PRESSE
   ========================================================= */
.hce-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Suchleiste */
.hce-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    padding: 8px 8px 8px 18px;
    background: var(--hce-white);
    border: 2px solid var(--hce-navy);
    border-radius: 999px;
    box-shadow: var(--hce-elev);
}
.hce-search svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--hce-navy);
    stroke-width: 2;
    stroke-linecap: round;
}
.hce-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: 0;
    background: none;
    color: var(--hce-navy);
    font: 500 16px/1.2 var(--hce-body);
    outline: none;
}
.hce-search input::placeholder { color: var(--hce-muted); }
.hce-search button {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 800 15px/1 var(--hce-body);
    cursor: pointer;
    transition: background .2s;
}
.hce-search button:hover { background: var(--hce-navy-2); }
.hce-search:focus-within { box-shadow: 0 0 0 4px rgba(8, 58, 87, .2), var(--hce-elev); }

.hce-results {
    margin: 18px 0 24px;
    font: 500 14px/1.4 var(--hce-body);
    color: var(--hce-navy);
}
.hce-results strong { font-weight: 800; }
.hce-results a { color: var(--hce-navy); font-weight: 700; }

/* Dateikarten */
.hce-files {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.hce-file {
    display: flex;
    flex-direction: column;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--hce-elev);
    transition: transform .25s;
}
.hce-file:hover { transform: translateY(-3px); }
.hce-file__preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: var(--hce-navy);
    border-bottom: 4px solid var(--hce-yellow);
}
/* Bilder auf Schachbrett, damit transparente Logos sichtbar sind */
.hce-file__preview--img {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eef1f3 25%, transparent 25%),
        linear-gradient(-45deg, #eef1f3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef1f3 75%),
        linear-gradient(-45deg, transparent 75%, #eef1f3 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.hce-file__preview img {
    position: absolute;
    inset: 18px;
    z-index: 1;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: contain;
}
.hce-file__ext {
    font: 700 40px/1 var(--hce-display);
    letter-spacing: .06em;
    color: var(--hce-yellow);
}
.hce-file__preview--img .hce-file__ext { color: rgba(8, 58, 87, .25); }

.hce-file__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 18px 20px 20px;
}
.hce-file__name {
    font: 800 17px/1.3 var(--hce-body);
    color: var(--hce-navy);
}
.hce-file__text {
    font: 400 14px/1.55 var(--hce-body);
    color: var(--hce-muted);
}
.hce-file__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}
.hce-file__tag {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(8, 58, 87, .08);
    color: var(--hce-navy);
    font: 700 11px/1 var(--hce-body);
    letter-spacing: .04em;
}
.hce-file__tag--type { background: var(--hce-yellow); }
.hce-file__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-top: 6px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 14px/1 var(--hce-body);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.hce-file__btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-file__btn:hover { background: var(--hce-navy); color: var(--hce-yellow); }
.hce-files__empty { text-align: center; }
.hce-files__empty h2 { font: 700 34px/1 var(--hce-display); text-transform: uppercase; color: var(--hce-navy); }
.hce-files__empty p { margin: 10px 0 16px; color: var(--hce-muted); font: 500 15px/1.5 var(--hce-body); }

/* =========================================================
   ÜBER UNS
   ========================================================= */
.hce-about__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(540px, 70vh);
    overflow: hidden;
    isolation: isolate;
}
.hce-about__hero-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
/* Verlauf von links, damit der Text immer lesbar ist */
.hce-about__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(8, 58, 87, .94) 0%, rgba(8, 58, 87, .78) 38%, rgba(8, 58, 87, .15) 75%, transparent 100%);
}
.hce-about__hero-inner { padding-block: 64px; }
.hce-about__title {
    max-width: 640px;
    font: 700 84px/.95 var(--hce-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hce-white);
}
.hce-about__lead {
    max-width: 440px;
    margin-top: 18px;
    padding-left: 14px;
    border-left: 4px solid var(--hce-yellow);
    font: 500 18px/1.5 var(--hce-body);
    color: var(--hce-white);
}

.hce-about__h2 {
    margin-bottom: 36px;
    text-align: center;
    font: 700 56px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}

/* Geschichte: drei Spalten mit Trennlinien */
.hce-about__story {
    padding-block: 72px;
    background: var(--hce-white);
}
.hce-about__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hce-about__col { padding: 0 32px; }
.hce-about__col + .hce-about__col { border-left: 1px solid rgba(8, 58, 87, .18); }
.hce-about__col:first-child { padding-left: 0; }
.hce-about__col:last-child { padding-right: 0; }
.hce-about__col h3 {
    display: inline-block;
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--hce-yellow);
    font: 800 18px/1.2 var(--hce-body);
    color: var(--hce-navy);
}
.hce-about__col p {
    font: 400 15px/1.75 var(--hce-body);
    color: rgba(8, 58, 87, .78);
}
.hce-about__col p + p { margin-top: 12px; }
.hce-about__col strong { font-weight: 700; color: var(--hce-navy); }

/* Werte auf gelbem Punktmuster */
.hce-about__values {
    padding-block: 72px;
    background-color: var(--hce-yellow);
    background-image: url("hintergrund/Hintergrund Textur.webp");
}
.hce-about__value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.hce-value {
    position: relative;
    padding: 28px 26px 30px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 18px;
    box-shadow: var(--hce-elev);
    overflow: hidden;
}
.hce-value__nr {
    position: absolute;
    top: 10px;
    right: 18px;
    font: 700 72px/1 var(--hce-display);
    color: rgba(8, 58, 87, .07);
}
.hce-value__title {
    margin-bottom: 12px;
    font: 700 44px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-value__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 10px;
    background: var(--hce-yellow);
}
.hce-value p {
    position: relative;
    font: 400 15px/1.7 var(--hce-body);
    color: rgba(8, 58, 87, .8);
}

/* Zahlen */
.hce-about__stats { background: var(--hce-navy); padding-block: 56px; }
.hce-about__stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    text-align: center;
}
.hce-stat { display: flex; flex-direction: column; gap: 8px; }
.hce-stat + .hce-stat { border-left: 1px solid rgba(255, 255, 255, .14); }
.hce-stat__nr { font: 700 76px/1 var(--hce-display); color: var(--hce-yellow); }
.hce-stat__label {
    font: 700 13px/1.2 var(--hce-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hce-white);
}

/* =========================================================
   MITGLIED WERDEN
   ========================================================= */
/* Vorteile */
.hce-perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
.hce-perk {
    padding: 24px 22px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 18px;
    box-shadow: var(--hce-elev);
}
.hce-perk__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--hce-navy);
}
.hce-perk__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--hce-yellow);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-perk h2,
.hce-perk h3 {
    margin-bottom: 6px;
    font: 800 17px/1.3 var(--hce-body);
    color: var(--hce-navy);
}
.hce-perk p { font: 400 14px/1.55 var(--hce-body); color: var(--hce-muted); }

/* SEPA-Hinweis */
.hce-sepa {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 28px 0;
    padding: 22px 26px;
    background: var(--hce-navy);
    border-radius: 18px;
    box-shadow: var(--hce-elev);
    color: var(--hce-white);
}
.hce-sepa__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 700 24px/1 var(--hce-display);
    padding-top: 2px;
}
.hce-sepa__text { flex: 1; min-width: 0; }
.hce-sepa__text h2 { font: 800 17px/1.3 var(--hce-body); color: var(--hce-white); }
.hce-sepa__text p { margin-top: 4px; font: 400 14px/1.5 var(--hce-body); color: var(--hce-soft); }
.hce-sepa__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 14px/1 var(--hce-body);
    text-decoration: none;
    transition: background .2s;
}
.hce-sepa__btn:hover { background: var(--hce-yellow-2); }
.hce-sepa__btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Formular + Seitenleiste */
.hce-member {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}
.hce-form-panel { padding: 30px 32px 34px; }
.hce-form__title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    font: 700 40px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-form__set {
    min-width: 0;
    margin: 0;
    padding: 22px 0 6px;
    border: 0;
    /* Trennlinie als Hintergrund – eine echte Rahmenlinie würde durch die Überschrift laufen */
    background: linear-gradient(var(--hce-line), var(--hce-line)) top / 100% 1px no-repeat;
}
.hce-form__set:first-of-type { background: none; padding-top: 10px; }
/* legend wie eine normale Überschrift behandeln */
.hce-form__set legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 14px;
    font: 800 13px/1 var(--hce-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-form__set legend::after {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    margin-top: 8px;
    background: var(--hce-yellow);
}
.hce-form__set legend + * { clear: both; }
.hce-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}
.hce-form__row--plz { grid-template-columns: 140px minmax(0, 1fr); }

.hce-field { margin-bottom: 16px; }
.hce-field label,
.hce-field__label {
    display: block;
    margin-bottom: 6px;
    font: 600 14px/1.35 var(--hce-body);
    color: var(--hce-navy);
}
.hce-field label span,
.hce-form__note span,
.hce-check em { color: #c0392b; font-style: normal; }
.hce-field input[type="text"],
.hce-field input[type="email"],
.hce-field input[type="tel"],
.hce-field input[type="date"],
.hce-field select,
.hce-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid rgba(8, 58, 87, .22);
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--hce-navy);
    font: 500 15px/1.3 var(--hce-body);
    transition: border-color .2s, box-shadow .2s, background .2s;
    appearance: none;
}
.hce-field textarea { min-height: 90px; resize: vertical; }
.hce-field select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23083A57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}
.hce-field input::placeholder,
.hce-field textarea::placeholder { color: rgba(8, 58, 87, .4); }
.hce-field input:focus,
.hce-field select:focus,
.hce-field textarea:focus {
    outline: none;
    border-color: var(--hce-navy);
    background: var(--hce-white);
    box-shadow: 0 0 0 4px rgba(254, 201, 11, .45);
}
.hce-field__error {
    margin-top: 8px;
    font: 600 13px/1.4 var(--hce-body);
    color: #c0392b;
}

/* Ja/Nein als Schalter */
.hce-choice { display: flex; gap: 10px; }
.hce-choice label { margin: 0; cursor: pointer; }
.hce-choice input { position: absolute; opacity: 0; pointer-events: none; }
.hce-field .hce-choice span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid rgba(8, 58, 87, .22);
    border-radius: 999px;
    font: 700 14px/1 var(--hce-body);
    color: var(--hce-navy);
    transition: background .2s, border-color .2s;
}
.hce-field .hce-choice input:checked + span { background: var(--hce-yellow); border-color: var(--hce-yellow); }
.hce-choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--hce-navy); }

/* Upload */
.hce-upload {
    position: relative;
    border: 2px dashed rgba(8, 58, 87, .3);
    border-radius: 14px;
    background: #fbfcfd;
    transition: border-color .2s, background .2s;
}
.hce-upload:hover,
.hce-upload.is-drag { border-color: var(--hce-navy); background: rgba(254, 201, 11, .12); }
.hce-upload.has-file { border-style: solid; border-color: var(--hce-navy); }
.hce-upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.hce-upload:focus-within { box-shadow: 0 0 0 4px rgba(254, 201, 11, .45); }
.hce-upload__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    text-align: center;
    pointer-events: none;
}
.hce-upload__empty svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--hce-navy);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-upload__empty strong { font: 700 15px/1.3 var(--hce-body); color: var(--hce-navy); }
.hce-upload__empty span { font: 500 13px/1.3 var(--hce-body); color: var(--hce-muted); }
.hce-upload__file {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font: 600 14px/1.3 var(--hce-body);
    color: var(--hce-navy);
    pointer-events: none;
}
.hce-upload__file[hidden],
.hce-upload__empty[hidden],
.hce-field[hidden] { display: none; }
.hce-upload__file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hce-upload__file button {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--hce-navy);
    color: var(--hce-white);
    font: 400 20px/1 var(--hce-body);
    cursor: pointer;
    pointer-events: auto;
}

/* Checkboxen */
.hce-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    cursor: pointer;
}
.hce-check input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--hce-navy);
}
.hce-check span { font: 400 14px/1.55 var(--hce-body); color: rgba(8, 58, 87, .85); }

.hce-form__note { margin: 10px 0 14px; font: 500 13px/1.4 var(--hce-body); color: var(--hce-muted); }
.hce-form__submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 17px/1 var(--hce-body);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(254, 201, 11, .35);
    transition: background .2s, transform .2s;
}
.hce-form__submit:hover { background: var(--hce-yellow-2); transform: translateY(-1px); }
.hce-form__submit:focus-visible { outline: 3px solid var(--hce-navy); outline-offset: 3px; }

/* Seitenleiste */
.hce-member__side {
    position: sticky;
    top: calc(96px + env(safe-area-inset-top, 0px));
    display: grid;
    gap: 18px;
}
.hce-fees { padding: 24px 24px 22px; }
.hce-fees__title {
    margin-bottom: 14px;
    font: 700 32px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-fees h3,
.hce-contactcard h3 {
    margin: 16px 0 8px;
    font: 800 13px/1 var(--hce-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-fees__table { width: 100%; border-collapse: collapse; }
.hce-fees__table td {
    padding: 9px 0;
    border-bottom: 1px solid var(--hce-line);
    font: 500 14px/1.3 var(--hce-body);
    color: var(--hce-navy);
}
.hce-fees__table td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.hce-fees__table tr:last-child td { border-bottom: 0; }
.hce-fees__list { list-style: none; display: grid; gap: 8px; }
.hce-fees__list li {
    padding-left: 14px;
    border-left: 3px solid var(--hce-yellow);
    font: 400 14px/1.5 var(--hce-body);
    color: rgba(8, 58, 87, .85);
}
.hce-panel.hce-contactcard { padding: 22px 24px; background: var(--hce-navy); border-color: transparent; }
.hce-contactcard h3 { margin-top: 0; color: var(--hce-yellow); }
.hce-contactcard p { font: 400 14px/1.5 var(--hce-body); color: var(--hce-soft); }
.hce-contactcard__name { margin-top: 10px; color: var(--hce-white) !important; font-weight: 700 !important; }
.hce-contactcard__mail {
    display: inline-block;
    margin-top: 4px;
    color: var(--hce-yellow);
    font: 700 15px/1.3 var(--hce-body);
    text-decoration: none;
    border-bottom: 2px solid rgba(254, 201, 11, .4);
}
.hce-contactcard__mail:hover { border-bottom-color: var(--hce-yellow); }

/* =========================================================
   SPONSOREN & PARTNER
   ========================================================= */
.hce-partners + .hce-partners { margin-top: 44px; }
.hce-partners__title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    font: 700 34px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-partners__title::after {
    content: '';
    flex: 1;
    height: 3px;
    background: var(--hce-navy);
    opacity: .2;
}
.hce-partners__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}

.hce-partner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--hce-elev);
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}
a.hce-partner:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(8, 58, 87, .12), 0 18px 36px rgba(8, 58, 87, .22); }
a.hce-partner:focus-visible { outline: 3px solid var(--hce-navy); outline-offset: 3px; }
.hce-partners__grid > li { display: flex; min-width: 0; }
/* Feste Höhen, damit jede Kachel exakt gleich groß ist – egal wie das Logo geformt ist */
.hce-partner { width: 100%; }
.hce-partner__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 20px 24px;
    overflow: hidden;
}
.hce-partner__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    transition: transform .3s;
}
a.hce-partner:hover .hce-partner__logo img { transform: scale(1.04); }
.hce-partner__logo img + .hce-partner__fallback { display: none; }
.hce-partner__fallback {
    font: 700 22px/1.1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: center;
    color: var(--hce-navy);
}
.hce-partner__info {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 52px;
    flex-shrink: 0;
    margin-top: auto;
    padding: 9px 14px 0;
    border-top: 3px solid var(--hce-yellow);
    background: #fafbfc;
    font: 600 13px/1.35 var(--hce-body);
    color: var(--hce-navy);
    text-align: center;
}

/* =========================================================
   CLUB 100
   ========================================================= */
.hce-club__hero { min-height: min(480px, 64vh); }
.hce-club__kicker {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 12px/1 var(--hce-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.hce-club .hce-about__lead { max-width: 680px; font-size: 17px; }

.hce-club__quote {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 34px 40px 34px 76px;
    border-radius: 20px;
    background: var(--hce-bg);
    border-left: 6px solid var(--hce-yellow);
    font: 500 20px/1.6 var(--hce-body);
    color: var(--hce-navy);
}
.hce-club__quote::before {
    content: '„';
    position: absolute;
    left: 22px;
    top: -6px;
    font: 700 110px/1 var(--hce-display);
    color: var(--hce-yellow);
}
.hce-club__h2-spaced { margin-top: 64px; }

/* Checkliste auf Dunkelblau */
.hce-club__insights { padding-block: 64px; background: var(--hce-navy); }
.hce-club__insights .hce-about__h2 { color: var(--hce-white); }
.hce-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    max-width: 920px;
    margin: 0 auto;
    list-style: none;
}
.hce-checklist li {
    position: relative;
    padding: 16px 18px 16px 58px;
    border-radius: 14px;
    background: var(--hce-navy-2);
    font: 600 16px/1.45 var(--hce-body);
    color: var(--hce-white);
}
.hce-checklist li::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: var(--hce-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23083A57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Leistungen */
.hce-club__benefit-title {
    margin-bottom: 10px;
    padding-right: 60px;
    font: 800 18px/1.3 var(--hce-body);
    color: var(--hce-navy);
}
.hce-club__benefit-title::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    margin-top: 10px;
    background: var(--hce-yellow);
}

/* Kontakt */
.hce-club__contact-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: center;
}
.hce-club__h2-left { text-align: left; margin-bottom: 16px; }
.hce-club__contact-text p { font: 400 16px/1.7 var(--hce-body); color: rgba(8, 58, 87, .8); }
.hce-club__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.hce-club__cta-secondary {
    padding-bottom: 3px;
    border-bottom: 3px solid var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 15px/1.2 var(--hce-body);
    text-decoration: none;
}
.hce-club__contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--hce-white);
    font: 600 15px/1.3 var(--hce-body);
    text-decoration: none;
}
.hce-club__contact-line:hover { color: var(--hce-yellow); }
.hce-club__contact-line svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--hce-yellow);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   HANDBALLCAMPS
   ========================================================= */
.hce-campgroup {
    padding: 30px 32px 32px;
    border-radius: 24px;
    background: var(--hce-white);
    border: var(--hce-edge);
    box-shadow: var(--hce-elev);
}
.hce-campgroup + .hce-campgroup { margin-top: 24px; }
.hce-campgroup__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px 24px;
    margin-bottom: 22px;
}
.hce-campgroup__title {
    grid-column: 1;
    font: 700 46px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-campgroup__text {
    grid-column: 1;
    max-width: 640px;
    font: 500 15px/1.55 var(--hce-body);
    color: var(--hce-muted);
}
.hce-campgroup__poster {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding-bottom: 3px;
    border-bottom: 3px solid var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 14px/1.2 var(--hce-body);
    text-decoration: none;
    white-space: nowrap;
}
.hce-camps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.hce-camp {
    position: relative;
    padding: 22px 22px 20px;
    border-radius: 18px;
    background: var(--hce-bg);
    border-top: 5px solid var(--hce-yellow);
}
.hce-camp__tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 800 11px/1 var(--hce-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hce-camp__list { display: grid; gap: 14px; margin: 0; }
.hce-camp__list > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hce-line);
}
.hce-camp__list > div:first-child { padding-top: 0; border-top: 0; }
.hce-camp__list dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 700 20px/1.1 var(--hce-display);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-camp__list dt svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--hce-yellow-2);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-camp__list dd {
    margin: 0;
    font: 500 15px/1.5 var(--hce-body);
    color: var(--hce-navy);
}
.hce-camp__list dd strong { display: block; font: 700 22px/1.15 var(--hce-display); letter-spacing: .03em; }
.hce-camp__list dd span { color: var(--hce-muted); font-size: 14px; }

/* Torwartcamps dunkel */
.hce-campgroup--alt { background: var(--hce-navy); border-color: transparent; }
.hce-campgroup--alt .hce-campgroup__title { color: var(--hce-white); }
.hce-campgroup--alt .hce-campgroup__text { color: var(--hce-soft); }
.hce-campgroup--alt .hce-campgroup__poster { color: var(--hce-white); }
.hce-campgroup--alt .hce-camp { background: var(--hce-navy-2); }
.hce-campgroup--alt .hce-camp__tag { background: var(--hce-yellow); color: var(--hce-navy); }
.hce-campgroup--alt .hce-camp__list > div { border-top-color: rgba(255, 255, 255, .12); }
.hce-campgroup--alt .hce-camp__list > div:first-child { border-top: 0; }
.hce-campgroup--alt .hce-camp__list dt,
.hce-campgroup--alt .hce-camp__list dd { color: var(--hce-white); }
.hce-campgroup--alt .hce-camp__list dt svg { stroke: var(--hce-yellow); }
.hce-campgroup--alt .hce-camp__list dd span { color: var(--hce-soft); }

/* Preis + Anmeldung */
.hce-campcta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin-top: 24px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--hce-elev);
}
.hce-campcta__price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 30px 32px;
    background: var(--hce-white);
}
.hce-campcta__amount { font: 700 72px/1 var(--hce-display); color: var(--hce-navy); }
.hce-campcta__label { font: 600 15px/1.4 var(--hce-body); color: var(--hce-muted); }
.hce-campcta__signup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 30px 32px;
    background: var(--hce-navy);
    color: var(--hce-white);
}
.hce-campcta__signup h2 { font: 700 36px/1 var(--hce-display); letter-spacing: .03em; text-transform: uppercase; color: var(--hce-white); }
.hce-campcta__signup p { font: 400 15px/1.5 var(--hce-body); color: var(--hce-soft); }
.hce-campcta__signup p strong { color: var(--hce-yellow); font-weight: 700; word-break: break-all; }
.hce-campcta__signup .hce-sepa__btn { margin-top: 8px; }

/* =========================================================
   KONTAKT
   ========================================================= */
.hce-contacts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}
.hce-person {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 18px;
    box-shadow: var(--hce-elev);
}
.hce-person__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 700 22px/1 var(--hce-display);
    letter-spacing: .04em;
    padding-top: 2px;
}
.hce-person__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hce-person__role {
    font: 800 11px/1.3 var(--hce-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hce-muted);
}
.hce-person__name { font: 700 24px/1.05 var(--hce-display); letter-spacing: .03em; text-transform: uppercase; color: var(--hce-navy); }
.hce-person__org { font: 500 13px/1.3 var(--hce-body); color: var(--hce-muted); }
.hce-person__mail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 700 13px/1.2 var(--hce-body);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background .2s, color .2s;
}
.hce-person__mail svg { flex-shrink: 0; }
.hce-person__mail:hover { background: var(--hce-navy); color: var(--hce-yellow); }
/* Mehr Kontrast: Texte auf Gelb in vollem Dunkelblau, Funktion als dunkles Etikett */
.hce-page--contact .hce-page__lead { color: var(--hce-navy); font-weight: 700; }
.hce-page--contact .hce-partners__title::after { height: 3px; opacity: .45; }
.hce-person__role {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    letter-spacing: .08em;
}
.hce-person__name { font-size: 26px; color: var(--hce-navy); }
.hce-person__org { color: rgba(8, 58, 87, .85); font-weight: 600; }
.hce-person__avatar { box-shadow: 0 0 0 3px var(--hce-yellow); }
@media (max-width: 960px) {
    .hce-contacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .hce-contacts__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hce-person { padding: 16px; gap: 14px; }
    .hce-person__avatar { width: 44px; height: 44px; font-size: 19px; }
    .hce-person__name { font-size: 22px; }
}

/* =========================================================
   MATCHDAY TALK (Videos)
   ========================================================= */
.hce-video {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--hce-navy-2);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.hce-video__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}
.hce-video__player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.hce-video__empty { display: flex; align-items: center; justify-content: center; color: var(--hce-yellow); background: var(--hce-navy); }
.hce-video__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.hce-video__tag {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 11px/1 var(--hce-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hce-video__title { font: 700 24px/1.1 var(--hce-display); letter-spacing: .03em; text-transform: uppercase; color: var(--hce-white); }
.hce-video__text {
    font: 400 14px/1.6 var(--hce-body);
    color: var(--hce-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hce-video__date { margin-top: auto; padding-top: 6px; font: 600 12px/1 var(--hce-body); color: var(--hce-yellow); letter-spacing: .04em; }

/* Großes Video: Player links, Text rechts */
.hce-video--main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); border-top: 6px solid var(--hce-yellow); }
.hce-video--main .hce-video__player { aspect-ratio: auto; min-height: 420px; }
.hce-video--main .hce-video__body { justify-content: center; padding: 30px 32px; gap: 12px; }
.hce-video--main .hce-video__title { font-size: 40px; line-height: 1; }
.hce-video--main .hce-video__text { -webkit-line-clamp: 8; line-clamp: 8; font-size: 15px; }
.hce-video--main .hce-video__date { margin-top: 6px; }

.hce-videos { margin-top: 48px; }
.hce-videos__title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    font: 700 34px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-white);
}
.hce-videos__title::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .15); }
.hce-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.hce-page--dark .hce-pager a { background: var(--hce-navy-2); color: var(--hce-white); box-shadow: none; border: 1px solid rgba(255, 255, 255, .12); }
.hce-page--dark .hce-pager a:hover { background: var(--hce-yellow); color: var(--hce-navy); }
.hce-page--dark .hce-pager strong { background: var(--hce-yellow); color: var(--hce-navy); }

@media (max-width: 960px) {
    .hce-video--main { grid-template-columns: minmax(0, 1fr); }
    .hce-video--main .hce-video__player { aspect-ratio: 16 / 9; min-height: 0; }
    .hce-video--main .hce-video__body { padding: 22px 20px; }
    .hce-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .hce-video { border-radius: 14px; }
    .hce-video--main .hce-video__title { font-size: 30px; }
    .hce-videos { margin-top: 36px; }
    .hce-videos__title { font-size: 28px; }
    .hce-videos__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* =========================================================
   KARRIERE & JOBS
   ========================================================= */
.hce-jobfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 20px;
}
.hce-jobfilter__search { flex: 1 1 420px; min-width: 0; max-width: none; }
.hce-jobfilter__search input { width: 100%; }
.hce-jobfilter__selects { display: flex; gap: 14px; flex: 1 1 380px; }
.hce-jobfilter__field { display: grid; gap: 6px; flex: 1; min-width: 0; }
.hce-jobfilter__field span {
    padding-left: 16px;
    font: 800 12px/1 var(--hce-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-jobfilter__field select {
    width: 100%;
    min-height: 56px;
    padding: 0 44px 0 18px;
    border: 2px solid var(--hce-navy);
    border-radius: 999px;
    background: var(--hce-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23083A57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
    box-shadow: var(--hce-elev);
    color: var(--hce-navy);
    font: 600 15px/1.2 var(--hce-body);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.hce-jobfilter__field select:focus { outline: none; box-shadow: 0 0 0 4px rgba(8, 58, 87, .2), var(--hce-elev); }

.hce-jobs { display: grid; gap: 22px; }
.hce-job {
    position: relative;
    padding: 28px 32px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-left: 6px solid var(--hce-navy);
    border-radius: 20px;
    box-shadow: var(--hce-elev);
}
.hce-job__top {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 11px/1 var(--hce-body);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hce-job__title {
    font: 700 36px/1.05 var(--hce-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hce-navy);
    overflow-wrap: anywhere;
}
.hce-job__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hce-job__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--hce-soft);
    color: var(--hce-navy);
    font: 700 13px/1 var(--hce-body);
}
.hce-job__badge--type { background: var(--hce-navy); color: var(--hce-yellow); }
.hce-job__badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.hce-job__section { margin-top: 22px; min-width: 0; }
.hce-job__label {
    margin-bottom: 10px;
    font: 800 13px/1 var(--hce-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-job__text { font: 400 15px/1.65 var(--hce-body); color: rgba(8, 58, 87, .88); }
.hce-job__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.hce-job__list { list-style: none; display: grid; gap: 8px; }
.hce-job__list li {
    position: relative;
    padding-left: 20px;
    font: 400 14px/1.5 var(--hce-body);
    color: rgba(8, 58, 87, .88);
}
.hce-job__list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--hce-yellow);
}
.hce-job__list--check li::before {
    top: .3em;
    width: 12px;
    height: 12px;
    left: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23083A57' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hce-job__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--hce-line);
}
.hce-job__info { display: grid; gap: 4px; }
.hce-job__deadline { font: 800 15px/1.3 var(--hce-body); color: var(--hce-navy); }
.hce-job__deadline--soon { color: #c0392b; }
.hce-job__contact { font: 500 14px/1.4 var(--hce-body); color: var(--hce-muted); }

.hce-jobs__none { text-align: center; }
.hce-jobs__none h2 {
    margin-bottom: 10px;
    font: 700 32px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-jobs__none p { font: 400 15px/1.6 var(--hce-body); color: rgba(8, 58, 87, .85); }
.hce-jobs__none .hce-sepa__btn { margin-top: 20px; }

.hce-jobcontact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 24px 40px;
    align-items: center;
    margin-top: 48px;
    padding: 30px 34px;
    border-radius: 24px;
    background: var(--hce-navy);
    box-shadow: var(--hce-elev);
}
.hce-jobcontact__title {
    font: 700 34px/1.05 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-white);
}
.hce-jobcontact__intro p { margin-top: 8px; font: 400 15px/1.5 var(--hce-body); color: var(--hce-soft); }
.hce-jobcontact__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hce-jobcontact__list li {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--hce-navy-2);
    border: 1px solid rgba(255, 255, 255, .1);
    font: 600 14px/1.5 var(--hce-body);
    color: var(--hce-white);
    overflow-wrap: anywhere;
}
.hce-jobcontact__list a { color: var(--hce-yellow); text-decoration: none; font-weight: 700; }
.hce-jobcontact__list a:hover { text-decoration: underline; }
.hce-jobcontact__label {
    font: 800 11px/1 var(--hce-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hce-soft);
}

@media (max-width: 960px) {
    .hce-jobcontact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hce-jobfilter { gap: 14px; }
    .hce-jobfilter__search, .hce-jobfilter__selects { flex-basis: 100%; width: 100%; }
    .hce-jobfilter__search button { padding: 0 14px; }
    .hce-jobfilter__selects { flex-direction: column; gap: 12px; }
    .hce-jobfilter__field select { min-height: 50px; }
    .hce-job { padding: 20px 18px; border-radius: 16px; border-left-width: 5px; }
    .hce-job__title { font-size: 28px; }
    .hce-job__cols { grid-template-columns: minmax(0, 1fr); }
    .hce-job__foot .hce-sepa__btn { width: 100%; justify-content: center; }
    .hce-jobcontact { padding: 22px 18px; border-radius: 18px; margin-top: 36px; }
    .hce-jobcontact__title { font-size: 28px; }
    .hce-jobcontact__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* =========================================================
   ADMIN (editor.php)
   ========================================================= */
.hce-page--admin .hce-page__lead { color: var(--hce-navy); }
.hce-page--admin .hce-page__lead strong { font-weight: 800; }
.hce-admin__logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 800 14px/1 var(--hce-body);
    text-decoration: none;
    transition: background .2s;
}
.hce-admin__logout:hover { background: var(--hce-navy-2); }
.hce-admin__logout svg,
.hce-admin__icon svg,
.hce-admin__go svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-admin + .hce-admin { margin-top: 36px; }
.hce-admin__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}
.hce-admin__grid > li { display: flex; min-width: 0; }
.hce-admin__tile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 14px 16px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 16px;
    box-shadow: var(--hce-elev);
    color: var(--hce-navy);
    text-decoration: none;
    transition: transform .2s, background .2s, color .2s;
}
.hce-admin__tile:hover { transform: translateY(-2px); background: var(--hce-navy); color: var(--hce-white); }
.hce-admin__tile:focus-visible { outline: 3px solid var(--hce-navy); outline-offset: 3px; }
.hce-admin__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    transition: background .2s, color .2s;
}
.hce-admin__icon svg { width: 22px; height: 22px; }
.hce-admin__tile:hover .hce-admin__icon { background: var(--hce-yellow); color: var(--hce-navy); }
.hce-admin__name { flex: 1; min-width: 0; font: 700 15px/1.3 var(--hce-body); overflow-wrap: anywhere; }
.hce-admin__go { flex-shrink: 0; font: 700 18px/1 var(--hce-body); color: var(--hce-navy); transition: transform .2s; }
.hce-admin__go svg { width: 18px; height: 18px; }
.hce-admin__tile:hover .hce-admin__go { color: var(--hce-yellow); transform: translateX(3px); }

@media (max-width: 960px) {
    .hce-admin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .hce-admin + .hce-admin { margin-top: 28px; }
    .hce-admin__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .hce-admin__tile { min-height: 64px; padding: 10px 14px; }
    .hce-admin__icon { width: 40px; height: 40px; }
    .hce-admin__logout { align-self: stretch; justify-content: center; }
}

/* ---------- Admin-Unterseiten (Werbung, Sponsoren, Jobs …) ---------- */
.hce-admbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.hce-admbar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font: 800 13px/1 var(--hce-body);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.hce-admbar__back { background: var(--hce-white); color: var(--hce-navy); box-shadow: var(--hce-elev); }
.hce-admbar__back:hover { background: var(--hce-navy); color: var(--hce-white); }
.hce-admbar__logout { background: var(--hce-navy); color: var(--hce-yellow); }
.hce-admbar__logout:hover { background: var(--hce-navy-2); }
.hce-admbar svg,
.hce-admbtn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hce-notice {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    border-left: 6px solid;
    background: var(--hce-white);
    box-shadow: var(--hce-elev);
    font: 700 15px/1.4 var(--hce-body);
    overflow-wrap: anywhere;
}
.hce-notice--ok { border-color: #2e8b57; color: #1d5e3a; }
.hce-notice--error { border-color: #c0392b; color: #8e2a1f; }

.hce-admbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 2px solid transparent;
    border-radius: 999px;
    font: 800 14px/1 var(--hce-body);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.hce-admbtn--lg { min-height: 50px; padding: 0 22px; flex-shrink: 0; }
.hce-admbtn--primary { background: var(--hce-navy); color: var(--hce-yellow); }
.hce-admbtn--primary:hover { background: var(--hce-navy-2); }
.hce-admbtn--ghost { background: transparent; border-color: var(--hce-navy); color: var(--hce-navy); }
.hce-admbtn--ghost:hover { background: var(--hce-navy); color: var(--hce-white); }
.hce-admbtn--danger { background: transparent; border-color: #c0392b; color: #c0392b; }
.hce-admbtn--danger:hover { background: #c0392b; color: var(--hce-white); }
.hce-admbtn:focus-visible { outline: 3px solid var(--hce-navy); outline-offset: 2px; }
.hce-admbtn[hidden] { display: none; }

/* Formular-Karte */
.hce-admpanel { margin-bottom: 40px; padding: 26px 30px 28px; }
.hce-admpanel__title {
    margin-bottom: 18px;
    font: 700 34px/1 var(--hce-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-field input[type="number"],
.hce-field input[type="url"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid rgba(8, 58, 87, .22);
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--hce-navy);
    font: 500 15px/1.3 var(--hce-body);
}
.hce-field input[type="number"]:focus,
.hce-field input[type="url"]:focus { outline: none; border-color: var(--hce-navy); box-shadow: 0 0 0 4px rgba(254, 201, 11, .45); }
.hce-field input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 2px dashed rgba(8, 58, 87, .3);
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--hce-navy);
    font: 500 14px/1.3 var(--hce-body);
    cursor: pointer;
}
.hce-field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 800 13px/1 var(--hce-body);
    cursor: pointer;
}
.hce-field__hint { display: block; margin-top: 6px; font: 500 13px/1.4 var(--hce-body); color: var(--hce-muted); }
.hce-check--box {
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1.5px solid rgba(8, 58, 87, .22);
    border-radius: 12px;
    background: #fbfcfd;
}
.hce-field .hce-check--box { display: flex; margin: 0; }
.hce-check--box input { margin-top: 0; }
.hce-field .hce-check--box span { font-weight: 700; color: var(--hce-navy); }
.hce-admfile {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--hce-bg);
    font: 500 14px/1.4 var(--hce-body);
    color: var(--hce-navy);
}
.hce-admfile[hidden] { display: none; }
.hce-admfile img,
.hce-admfile video { display: block; max-width: 100%; max-height: 160px; margin: 10px 0 4px; border-radius: 8px; }
.hce-admform__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hce-admform__actions .hce-admbtn { min-height: 50px; padding: 0 24px; }

/* Karten-Liste */
.hce-admlist + .hce-admlist { margin-top: 36px; }
.hce-admcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
}
.hce-admcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--hce-elev);
}
.hce-admcard.is-off .hce-admcard__media { opacity: .45; }
.hce-admcard__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--hce-navy);
    border-bottom: 4px solid var(--hce-yellow);
}
.hce-admcard__media img,
.hce-admcard__media video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.hce-admcard__media--logo { aspect-ratio: 16 / 8; padding: 18px 24px; background: var(--hce-white); border-bottom-color: var(--hce-line); }
.hce-admcard__media--logo img { object-fit: contain; background: none; }
.hce-admcard__nologo { font: 700 20px/1 var(--hce-display); text-transform: uppercase; letter-spacing: .05em; color: var(--hce-muted); }
.hce-admcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.hce-admcard__name { font: 800 17px/1.3 var(--hce-body); color: var(--hce-navy); overflow-wrap: anywhere; }
.hce-admcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hce-admtag {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--hce-soft);
    color: var(--hce-navy);
    font: 800 11px/1 var(--hce-body);
    letter-spacing: .06em;
}
.hce-admtag--on { background: #d8f0e2; color: #1d5e3a; }
.hce-admtag--off { background: #f8dcd8; color: #8e2a1f; }
.hce-admcard__text { font: 400 14px/1.5 var(--hce-body); color: rgba(8, 58, 87, .85); }
.hce-admcard__link { font: 600 13px/1.4 var(--hce-body); color: var(--hce-navy); overflow-wrap: anywhere; }
.hce-admcard__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.hce-admcard__actions > * { flex: 1; }
.hce-admcard__actions form { display: flex; }
.hce-admcard__actions .hce-admbtn { width: 100%; }
.hce-admcard--plain { border-top: 5px solid var(--hce-navy); }
.hce-admcard--plain.is-off { border-top-color: rgba(8, 58, 87, .25); }
.hce-admcard--plain.is-off .hce-admcard__name { opacity: .6; }
.hce-admcard__facts { display: grid; gap: 6px; margin: 0; }
.hce-admcard__facts > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
.hce-admcard__facts dt { font: 800 11px/1.6 var(--hce-body); letter-spacing: .08em; text-transform: uppercase; color: var(--hce-muted); }
.hce-admcard__facts dd { margin: 0; font: 600 14px/1.4 var(--hce-body); color: var(--hce-navy); overflow-wrap: anywhere; }
.hce-admcard__facts dd.is-late { color: #c0392b; }

/* Reihenfolge direkt in der Karte */
.hce-admorder { display: flex; align-items: center; gap: 8px; }
.hce-admorder label { font: 700 13px/1 var(--hce-body); color: var(--hce-muted); }
.hce-admorder input {
    width: 72px;
    min-height: 38px;
    padding: 0 8px;
    border: 1.5px solid rgba(8, 58, 87, .22);
    border-radius: 10px;
    text-align: center;
    color: var(--hce-navy);
    font: 700 15px/1 var(--hce-body);
}
.hce-admorder button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--hce-yellow);
    color: var(--hce-navy);
    font: 800 16px/1 var(--hce-body);
    cursor: pointer;
}
.hce-admorder button:hover { background: var(--hce-yellow-2); }

@media (max-width: 960px) {
    .hce-admcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .hce-admbar a { min-height: 38px; padding: 0 14px; font-size: 12px; }
    .hce-admbtn--lg { align-self: stretch; }
    .hce-admpanel { padding: 18px 16px 20px; margin-bottom: 32px; }
    .hce-admpanel__title { font-size: 28px; }
    .hce-admform__actions .hce-admbtn { flex: 1 1 100%; }
    .hce-admcards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hce-admcard__media--logo { aspect-ratio: auto; height: 110px; padding: 14px 20px; }
    .hce-field input[type="number"],
    .hce-field input[type="url"],
    .hce-admorder input { font-size: 16px; }   /* verhindert Zoom auf iOS */
}

/* =========================================================
   LOGIN
   ========================================================= */
.hce-page--login { display: flex; align-items: center; min-height: 70vh; }
.hce-page--login .hce-container { width: 100%; }
.hce-login {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 34px 34px 30px;
    background: var(--hce-white);
    border: var(--hce-edge);
    border-top: 6px solid var(--hce-navy);
    border-radius: 24px;
    box-shadow: var(--hce-elev);
    text-align: center;
}
.hce-login__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--hce-navy);
    color: var(--hce-yellow);
}
.hce-login__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hce-login__title {
    font: 700 52px/1 var(--hce-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hce-navy);
}
.hce-login__lead { margin: 6px 0 22px; font: 600 14px/1.4 var(--hce-body); color: var(--hce-muted); }
.hce-login .hce-notice { text-align: left; box-shadow: none; background: #fdf1ef; }
.hce-login__form { text-align: left; }
.hce-login__form .hce-field input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid rgba(8, 58, 87, .22);
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--hce-navy);
    font: 500 15px/1.3 var(--hce-body);
}
.hce-login__form .hce-field input[type="password"]:focus { outline: none; border-color: var(--hce-navy); background: var(--hce-white); box-shadow: 0 0 0 4px rgba(254, 201, 11, .45); }
.hce-login__pw { position: relative; }
.hce-login__pw input { padding-right: 52px !important; }
.hce-login__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--hce-muted);
    cursor: pointer;
}
.hce-login__toggle:hover,
.hce-login__toggle[aria-pressed="true"] { color: var(--hce-navy); background: var(--hce-bg); }
.hce-login__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hce-login .hce-form__submit { margin-top: 8px; }
@media (max-width: 640px) {
    .hce-page--login { min-height: 60vh; }
    .hce-login { padding: 26px 18px 22px; border-radius: 18px; }
    .hce-login__title { font-size: 44px; }
    .hce-login__form .hce-field input { font-size: 16px; }   /* verhindert Zoom auf iOS */
}

/* Ticketshop (Leoticket-Widget) */
.hce-ticketshop { min-height: 420px; padding: 24px; }
.hce-ticketshop leoticket-events { display: block; width: 100%; min-width: 0; }

/* =========================================================
   NEWS
   ========================================================= */
.hce-panel {
    background: var(--hce-white);
    border: var(--hce-edge);
    border-radius: 24px;
    padding: 26px 32px 34px;
    box-shadow: var(--hce-elev);
}
.hce-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font: 500 14px/1.3 var(--hce-body);
    color: var(--hce-muted);
}
.hce-crumbs a { color: var(--hce-muted); text-decoration: none; }
.hce-crumbs a:hover { color: var(--hce-navy); }
.hce-crumbs strong {
    color: var(--hce-navy);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hce-newsfeature__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    margin-top: 20px;
    align-items: start;
}

/* Großer Artikel */
.hce-lead__media-link { display: block; border-radius: 18px; overflow: hidden; }
.hce-lead__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
}
.hce-lead__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.hce-lead__media-link:hover img { transform: scale(1.03); }
.hce-lead__title {
    margin: 24px 0 12px;
    font: 800 30px/1.25 var(--hce-body);
    color: var(--hce-navy);
    text-wrap: balance;
}
.hce-lead__title a { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; }
.hce-lead__title a:hover { text-decoration: underline; text-decoration-color: var(--hce-yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }

.hce-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    font: 500 13px/1.3 var(--hce-body);
    color: var(--hce-muted);
}
.hce-meta li { display: inline-flex; align-items: center; gap: 7px; }
.hce-meta svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hce-lead__text {
    margin-top: 16px;
    font: 400 16px/1.75 var(--hce-body);
    color: rgba(8, 58, 87, .86);
}
.hce-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--hce-navy);
    color: var(--hce-white);
    font: 700 14px/1 var(--hce-body);
    text-decoration: none;
    transition: background .2s;
}
.hce-readmore span { font: inherit; transition: transform .2s; }
.hce-readmore:hover { background: var(--hce-navy-2); }
.hce-readmore:hover span { transform: translateX(3px); }

/* Weitere News (rechts) */
.hce-related__title {
    margin-bottom: 14px;
    padding-left: 12px;
    border-left: 3px solid var(--hce-navy);
    font: 700 15px/1.2 var(--hce-body);
    color: var(--hce-navy);
}
.hce-related__card {
    display: block;
    margin-bottom: 16px;
    border: var(--hce-edge);
    border-radius: 16px;
    overflow: hidden;
    background: var(--hce-white);
    box-shadow: 0 1px 2px rgba(8, 58, 87, .08), 0 8px 20px rgba(8, 58, 87, .10);
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}
.hce-related__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(8, 58, 87, .1), 0 14px 30px rgba(8, 58, 87, .16);
}
.hce-related__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 7;
}
.hce-related__media img,
.hce-archive__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hce-related__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}
.hce-related__headline {
    font: 600 15px/1.4 var(--hce-body);
    color: var(--hce-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hce-related__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 500 12px/1.2 var(--hce-body);
    color: var(--hce-muted);
}
.hce-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hce-navy);
    color: var(--hce-yellow);
    font: 800 9px/1 var(--hce-body);
    flex-shrink: 0;
}

/* Archiv */
.hce-archive { margin-top: 48px; }
.hce-archive__title { font-size: 44px; margin-bottom: 22px; }
.hce-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.hce-archive__card {
    display: flex;
    flex-direction: column;
    border: var(--hce-edge);
    border-radius: 16px;
    overflow: hidden;
    background: var(--hce-white);
    box-shadow: var(--hce-elev);
    text-decoration: none;
    transition: transform .25s;
}
.hce-archive__card:hover { transform: translateY(-3px); }
.hce-archive__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
}
.hce-archive__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 20px;
}
.hce-archive__date { font: 500 12px/1 var(--hce-body); color: var(--hce-muted); }
.hce-archive__headline {
    font: 800 16px/1.35 var(--hce-body);
    color: var(--hce-navy);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hce-archive__text {
    font: 400 14px/1.55 var(--hce-body);
    color: var(--hce-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Seitenzahlen */
.hce-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}
.hce-pager a,
.hce-pager strong,
.hce-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font: 700 14px/1 var(--hce-body);
    text-decoration: none;
}
.hce-pager a { background: var(--hce-white); color: var(--hce-navy); box-shadow: 0 2px 8px rgba(8, 58, 87, .12); }
.hce-pager a:hover { background: var(--hce-navy); color: var(--hce-white); }
.hce-pager strong { background: var(--hce-navy); color: var(--hce-yellow); }
.hce-pager span { color: var(--hce-navy); }

/* =========================================================
   Tablet + Mobil
   ========================================================= */
@media (max-width: 960px) {
    .hce-newsfeature__grid { grid-template-columns: minmax(0, 1fr); }
    .hce-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .hce-related__title { grid-column: 1 / -1; margin-bottom: 0; }
    .hce-related__card { margin-bottom: 0; }
    .hce-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hce-players { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hce-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hce-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hce-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hce-member { grid-template-columns: minmax(0, 1fr); }
    .hce-member__side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

    .hce-about__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .hce-about__col,
    .hce-about__col:first-child,
    .hce-about__col:last-child { padding: 0; }
    .hce-about__col + .hce-about__col { border-left: 0; border-top: 1px solid rgba(8, 58, 87, .18); padding-top: 28px; }
    .hce-about__value-grid { grid-template-columns: minmax(0, 1fr); }
    .hce-club .hce-about__value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hce-camps { grid-template-columns: minmax(0, 1fr); }
    .hce-club__contact-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .hce-about__stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .hce-stat:nth-child(3) { border-left: 0; }
    .hce-team__ghost { font-size: 84px; margin-bottom: -13px; }
}

@media (max-width: 640px) {
    .hce-page { padding-block: 28px 48px; }
    .hce-page__head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 20px; }
    .hce-page__title { font-size: 44px; }
    .hce-page__icon { display: none; }
    .hce-presented { align-self: stretch; justify-content: space-between; }

    .hce-seg { gap: 22px; }
    .hce-seg button { font-size: 13px; }

    .hce-match { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
    .hce-match__day { width: 50px; height: 46px; font-size: 30px; }
    .hce-match__card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "teams" "meta" "actions";
        gap: 12px;
        padding: 16px 14px;
    }
    .hce-match__teams { gap: 8px; }
    .hce-match__team .hce-crest { width: 52px; height: 52px; }
    .hce-match__team > span:last-child { font-size: 12px; }
    .hce-match__vs { font-size: 26px; }
    .hce-match__score { font-size: 34px; }
    .hce-match__actions { flex-direction: row; }
    .hce-match__btn { flex: 1; min-height: 44px; }
    .hce-match__none { flex: 1; }

    .hce-panel { border-radius: 18px; padding: 16px 16px 24px; }
    .hce-lead__media-link { border-radius: 14px; }
    .hce-lead__title { font-size: 24px; margin-top: 18px; }
    .hce-lead__text { font-size: 15px; }
    .hce-readmore { width: 100%; justify-content: center; }

    .hce-related { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hce-related__card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
    }
    .hce-related__media { aspect-ratio: auto; height: 100%; min-height: 96px; }
    .hce-related__body { padding: 12px 14px; gap: 8px; }
    .hce-related__headline { font-size: 14px; }

    .hce-archive { margin-top: 36px; }
    .hce-archive__title { font-size: 38px; }
    .hce-archive__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    /* Partner */
    .hce-partners + .hce-partners { margin-top: 32px; }
    .hce-partners__title { font-size: 28px; }
    .hce-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hce-partner__logo { height: 110px; padding: 14px 16px; }
    .hce-partner__info { font-size: 12px; height: 46px; padding: 8px 10px 0; }

    /* Mitglied werden */
    .hce-perks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hce-perk { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
    .hce-perk__icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
    .hce-perk__icon svg { width: 24px; height: 24px; }
    .hce-sepa { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .hce-sepa__btn { width: 100%; justify-content: center; }
    .hce-form-panel { padding: 20px 16px 24px; }
    .hce-form__title { font-size: 32px; }
    .hce-form__row,
    .hce-form__row--plz { grid-template-columns: minmax(0, 1fr); }
    .hce-member__side { grid-template-columns: minmax(0, 1fr); }

    /* Über uns */
    .hce-about__hero { min-height: 420px; align-items: flex-end; }
    .hce-about__hero::before { background: linear-gradient(180deg, rgba(8, 58, 87, .15) 0%, rgba(8, 58, 87, .7) 45%, rgba(8, 58, 87, .96) 100%); }
    .hce-about__hero-inner { padding-block: 40px 32px; }
    .hce-about__title { font-size: 54px; }
    .hce-about__lead { font-size: 16px; }
    .hce-about__h2 { font-size: 40px; margin-bottom: 24px; }
    .hce-about__story,
    .hce-about__values { padding-block: 48px; }
    .hce-value__title { font-size: 36px; }
    .hce-stat__nr { font-size: 60px; }

    /* Handballcamps */
    .hce-campgroup { padding: 20px 16px 18px; border-radius: 18px; }
    .hce-campgroup__head { grid-template-columns: minmax(0, 1fr); }
    .hce-campgroup__title { font-size: 36px; }
    .hce-campgroup__poster { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
    .hce-camp { padding: 18px 16px; }
    .hce-camp__list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .hce-campcta { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
    .hce-campcta__price,
    .hce-campcta__signup { padding: 24px 20px; }
    .hce-campcta__amount { font-size: 56px; }
    .hce-campcta__signup .hce-sepa__btn { width: 100%; justify-content: center; }

    /* Club 100 */
    .hce-club .hce-about__lead { font-size: 15px; }
    .hce-club__quote { padding: 26px 20px 24px 52px; font-size: 17px; }
    .hce-club__quote::before { left: 12px; font-size: 80px; }
    .hce-club__h2-spaced { margin-top: 44px; }
    .hce-club__insights { padding-block: 44px; }
    .hce-checklist { grid-template-columns: minmax(0, 1fr); }
    .hce-club .hce-about__value-grid { grid-template-columns: minmax(0, 1fr); }
    .hce-club__cta .hce-sepa__btn { width: 100%; justify-content: center; }

    /* Presse */
    .hce-search { padding-left: 14px; }
    .hce-search button { padding: 0 16px; }
    .hce-files { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    /* Mannschaft */
    .hce-team__links { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
    .hce-teamlink { padding: 16px; }
    .hce-teamphoto { margin-bottom: 24px; border-radius: 12px; }
    .hce-team__title { font-size: 46px; border-bottom-width: 6px; padding-bottom: 10px; }
    .hce-team__group { padding-top: 30px; scroll-margin-top: 124px; }
    .hce-team__ghost { font-size: 60px; margin-bottom: -9px; padding-top: 6px; }
    .hce-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hce-player { border-radius: 12px; }
    .hce-player__info { padding: 44px 12px 12px; gap: 8px; }
    .hce-player__nr { font-size: 40px; }
    .hce-player__name { font-size: 16px; }

    /* Tabelle: passt sich der Bildschirmbreite an */
    .hce-standings { padding: 8px; border-radius: 14px; }
    .hce-standings__scroll { border-radius: 10px; }
    .hce-page__link { align-self: flex-start; }

    /* Tickets: kompakter Kopf, Shop über die volle Bildschirmbreite */
    .hce-page--tickets { padding-block: 20px 0; }
    .hce-page--tickets .hce-page__head { margin-bottom: 16px; }
    .hce-page--tickets .hce-page__title { font-size: 38px; }
    .hce-page--tickets .hce-page__lead { display: none; }
    .hce-ticketshop {
        margin-inline: calc(var(--hce-gutter) * -1);
        min-height: 60vh;
        padding: 8px 6px 24px;
        overflow-x: clip;   /* Sicherheitsnetz, falls das Widget doch etwas breiter rendert */
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 20px rgba(8, 58, 87, .12);
    }
}