/* CCS Toernliste - Variante 4
 * Alle Regeln unter #turnMemberPackage gescopet, damit sich die neue und die alte
 * Liste unter keinen Umstaenden vermischen.
 * Quelle: Claude-Design-Projekt ccs.css (Varianten A/B/C/3 entfernt).
 * Mobile laeuft ueber Media-Queries auf demselben DOM, nicht ueber --m Klassen.
 */

#turnMemberPackage {
    --red: #e42c2a;
    --red-d: #bf1f1d;
    --blue: #004e97;
    --ink: #222;
    --muted: #5f5f5f;
    --faint: #8f8f8f;
    --line: #e4e4e4;
    --line2: #d0d0d0;
    --bg: #fff;
    --panel: #f5f5f5;
    --member: #fbe9e9;
    --member-ink: #004e97;
    --member-bg: #eaf1f9;
    --member-line: #9dbcdb;
    --green-bg: #e6f4e7;
}

#turnMemberPackage,
#turnMemberPackage * {
    box-sizing: border-box;
}

/* Schutz gegen modulpark_standard.css `.center div { align-items:center }` -
   greift sonst auf jeden unserer Flex-Container ohne explizites align-items. */
#turnMemberPackage div {
    align-items: initial;
}

/* ---------- Page ---------- */
#turnMemberPackage .ccs-page,
#turnMemberPackage .ccs-page * {
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#turnMemberPackage .ccs-page {
    color: var(--ink);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.4;
}
#turnMemberPackage .ccs-page a:not(.ccs-btn) {
    color: var(--red);
    text-decoration: none;
}
#turnMemberPackage .ccs-page a:not(.ccs-btn):hover {
    color: #000;
}
#turnMemberPackage .ccs-pagehead h2 {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 600;
    color: #464646;
    text-transform: uppercase;
    letter-spacing: .2px;
}
#turnMemberPackage .ccs-pagehead h2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 22px;
    background: var(--red);
    border-radius: 2px;
    margin-right: 12px;
    vertical-align: -4px;
}

/* ---------- Atome ---------- */
#turnMemberPackage .ccs-drive,
#turnMemberPackage .ccs-radar,
#turnMemberPackage .ccs-typebadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 5px 9px;
    border-radius: 5px;
    margin: 0;
    white-space: nowrap;
}
#turnMemberPackage .ccs-drive svg,
#turnMemberPackage .ccs-radar svg {
    width: 12px;
    height: 12px;
    flex: none;
}
#turnMemberPackage .ccs-drive.is-sail {
    color: #004e97;
    background: #e6eef6;
}
#turnMemberPackage .ccs-drive.is-motor {
    color: #5a4a14;
    background: #f4efe0;
}
#turnMemberPackage .ccs-radar {
    color: var(--red);
    background: var(--member);
}
#turnMemberPackage .ccs-typebadge {
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
}
#turnMemberPackage .ccs-langs {
    display: inline-flex;
    gap: 3px;
    flex-wrap: wrap;
}
#turnMemberPackage .ccs-lang {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--muted);
    border: 1px solid var(--line2);
    border-radius: 3px;
    padding: 1px 4px;
    background: #fafbfb;
}

/* ---------- Buttons ---------- */
#turnMemberPackage .ccs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--red);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid var(--red);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background .14s;
}
#turnMemberPackage .ccs-btn:hover {
    background: var(--red-d);
    color: #fff !important;
}
#turnMemberPackage .ccs-btn--block {
    display: flex;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
}

/* ---------- Filter-Bar ---------- */
#turnMemberPackage .ccs-filter {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}
#turnMemberPackage .ccs-filter-row {
    display: flex;
    gap: 10px;
}
#turnMemberPackage .ccs-filter-row--2 {
    margin-top: 12px;
    align-items: flex-start;
}
#turnMemberPackage .ccs-filter-row--3 {
    margin-top: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}
#turnMemberPackage .ccs-field-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}
#turnMemberPackage .ccs-field-wrap.is-daterange {
    flex: 0 0 auto;
}
#turnMemberPackage .ccs-field-wrap.is-skipper {
    flex: 1;
    min-width: 200px;
}
#turnMemberPackage .ccs-field-l {
    display: block;
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--faint);
}
#turnMemberPackage .ccs-field {
    display: block;
    width: 100%;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
#turnMemberPackage .ccs-field-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 7px;
    padding: 9px 11px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
}
#turnMemberPackage .ccs-field-c > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#turnMemberPackage .ccs-field-c svg {
    color: var(--muted);
    flex: none;
    transition: transform .15s;
}
/* Aktiver Filter - sanftes Blau. Muss VOR .is-open stehen, gleiche Spezifitaet:
   beim geoeffneten Feld soll der rote Fokus-Ring gewinnen.
   Die Chips nutzen dieselben drei Token, stehen aber weiter unten in ihrem
   eigenen Block - sonst wuerde .ccs-chip:hover sie ueberschreiben. */
#turnMemberPackage .ccs-field.is-active .ccs-field-c,
#turnMemberPackage .ccs-date.is-active,
#turnMemberPackage .ccs-skippersearch.is-active {
    border-color: var(--member-line);
    background: var(--member-bg);
}
#turnMemberPackage .ccs-field.is-active .ccs-field-c > span:first-child,
#turnMemberPackage .ccs-date.is-active input,
#turnMemberPackage .ccs-skippersearch.is-active input {
    color: var(--member-ink);
    font-weight: 600;
}
#turnMemberPackage .ccs-field.is-open .ccs-field-c {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(228, 44, 42, .12);
}
#turnMemberPackage .ccs-field.is-open .ccs-field-c svg {
    transform: rotate(180deg);
}

/* Dropdown
   Die Optionen duerfen breiter werden als ihr Feld - Schiffsnamen und Toernarten
   sollen nicht auf Spaltenbreite abgeschnitten werden. min-width haelt das Panel
   buendig am Feld, max-content laesst den laengsten Eintrag die Breite bestimmen,
   max-width ist die Notbremse (darueber greift wieder die Ellipsis in .ccs-opt-l).
   Es wachsen dadurch nur Toernart und Schiff (Spalte 1 und 2) - Sprache und
   Kategorie sind kuerzer als ihr Feld und bleiben auf Feldbreite. */
#turnMemberPackage .ccs-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: 340px;
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 9px;
    box-shadow: 0 10px 30px rgba(20, 30, 40, .16);
    padding: 6px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 280px;
    overflow-y: auto;
}
#turnMemberPackage .ccs-dropdown.is-inline {
    position: static;
    margin-top: 6px;
    box-shadow: none;
    max-height: none;
}
#turnMemberPackage .ccs-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    width: 100%;
}
#turnMemberPackage .ccs-opt:hover {
    background: var(--panel);
}
#turnMemberPackage .ccs-opt-box {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid var(--line2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: none;
}
#turnMemberPackage .ccs-opt-box svg {
    opacity: 0;
}
#turnMemberPackage .ccs-opt-l {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#turnMemberPackage .ccs-opt-n {
    font-size: 11.5px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    flex: none;
}
#turnMemberPackage .ccs-opt-tick {
    color: var(--red);
    flex: none;
}
/* Option ohne Treffer: klickbar, aber deutlich zurueckgenommen */
#turnMemberPackage .ccs-opt.is-empty .ccs-opt-l,
#turnMemberPackage .ccs-opt.is-empty .ccs-opt-n {
    color: var(--line2);
}
#turnMemberPackage .ccs-opt.is-empty .ccs-opt-box {
    border-color: #e8e8e8;
}
#turnMemberPackage .ccs-opt.is-empty:hover {
    background: transparent;
}

#turnMemberPackage .ccs-opt.is-on {
    color: var(--red-d);
    font-weight: 600;
}
#turnMemberPackage .ccs-opt.is-on .ccs-opt-box {
    background: var(--red);
    border-color: var(--red);
}
#turnMemberPackage .ccs-opt.is-on .ccs-opt-box svg {
    opacity: 1;
}

/* Zeitraum */
#turnMemberPackage .ccs-daterange {
    display: flex;
    align-items: center;
    gap: 8px;
}
#turnMemberPackage .ccs-date {
    flex: none;
    width: 148px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 7px;
    padding: 8px 11px;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
#turnMemberPackage .ccs-date:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(228, 44, 42, .12);
}
#turnMemberPackage .ccs-date input {
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
    width: 100%;
    min-width: 0;
    padding: 0;
    cursor: pointer;
}
/* Ein leerer type="date"-Input zeigt das Formatmuster des Browsers (dd/mm/yyyy).
   Das laesst sich nicht per placeholder entfernen, nur ausblenden - und nur in
   WebKit/Blink; Firefox bietet dafuer kein Pseudo-Element und zeigt es weiter.
   Beim Fokus kommt es zurueck, sonst tippt man ins Blinde.
   Das ANZEIGEFORMAT eines gefuellten Feldes bestimmt die Browser-Locale und ist
   von hier aus nicht steuerbar - de-CH/fr-CH ergibt 14.07.2026. */
#turnMemberPackage .ccs-date.is-empty input::-webkit-datetime-edit {
    color: transparent;
}
#turnMemberPackage .ccs-date.is-empty input:focus::-webkit-datetime-edit {
    color: var(--ink);
}

#turnMemberPackage .ccs-date-sep {
    color: var(--faint);
    flex: none;
}

/* Skipper-Suche */
#turnMemberPackage .ccs-skippersearch {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 7px;
    padding: 8px 11px;
    color: var(--muted);
    margin: 0;
    font-weight: 400;
}
#turnMemberPackage .ccs-skippersearch:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(228, 44, 42, .12);
}
#turnMemberPackage .ccs-skippersearch svg {
    flex: none;
}
#turnMemberPackage .ccs-skippersearch input {
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    width: 100%;
    min-width: 0;
    padding: 0;
}

/* Chips */
#turnMemberPackage .ccs-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#turnMemberPackage .ccs-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    transition: all .12s;
}
#turnMemberPackage .ccs-chip svg {
    color: var(--faint);
    flex: none;
}
#turnMemberPackage .ccs-chip:hover {
    border-color: var(--muted);
}
/* Gleiches Blau wie ein aktives Filterfeld - "Filter gesetzt" sieht ueberall
   gleich aus. Muss NACH .ccs-chip:hover stehen, gleiche Spezifitaet: ein
   gesetzter Chip soll auch beim Hover blau bleiben. */
#turnMemberPackage .ccs-chip.is-on {
    color: var(--member-ink);
    border-color: var(--member-line);
    background: var(--member-bg);
}
#turnMemberPackage .ccs-chip.is-on svg {
    color: var(--member-ink);
}

/* Zaehler + Reset */
#turnMemberPackage .ccs-filter-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}
#turnMemberPackage .ccs-count {
    font-size: 13px;
    color: var(--muted);
}
#turnMemberPackage .ccs-count b {
    color: var(--ink);
    font-weight: 700;
}
#turnMemberPackage .ccs-reset {
    background: none;
    border: none;
    color: var(--red);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

/* ---------- Mobile-Filterbalken + Fullscreen-Overlay ---------- */
#turnMemberPackage .ccs-filter-m {
    display: none;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}
#turnMemberPackage .ccs-mbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#turnMemberPackage .ccs-mfilterbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 9px;
    padding: 9px 15px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
#turnMemberPackage .ccs-mfilterbtn svg {
    color: var(--muted);
    flex: none;
}
#turnMemberPackage .ccs-mbadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
#turnMemberPackage .ccs-mcount {
    font-size: 13px;
    color: var(--muted);
}
#turnMemberPackage .ccs-mcount b {
    color: var(--ink);
    font-weight: 700;
}

/* Fullscreen - laut HANDOFF.md ausdruecklich kein Bottom-Sheet */
#turnMemberPackage .ccs-sheet {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: #fff;
    z-index: 10000;
    display: flex;
    flex-direction: column;
}
#turnMemberPackage .ccs-sheet-head {
    flex: none;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#turnMemberPackage .ccs-sheet-head b {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}
#turnMemberPackage .ccs-sheet-x {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 4px;
    font-family: inherit;
}
#turnMemberPackage .ccs-sheet-x:hover {
    color: var(--red);
}
#turnMemberPackage .ccs-sheet-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#turnMemberPackage .ccs-sheet-body .ccs-field-wrap {
    flex: none;
}
/* Im Overlay klappt das Dropdown inline auf, nicht als Overlay ueber der Liste.
   width/max-width muessen zurueck: im Fluss wuerde max-content den Sheet
   horizontal aufreissen, hier ist die volle Sheet-Breite ohnehin vorhanden. */
#turnMemberPackage .ccs-sheet-body .ccs-dropdown {
    position: static;
    width: auto;
    max-width: none;
    margin-top: 6px;
    box-shadow: none;
    max-height: none;
}
#turnMemberPackage .ccs-sheet-body .ccs-date {
    flex: 1;
    width: auto;
    min-width: 0;
}
#turnMemberPackage .ccs-sheet-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}
#turnMemberPackage .ccs-sheet-reset {
    flex: none;
    background: none;
    border: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
}
#turnMemberPackage .ccs-sheet-apply {
    flex: 1;
    padding: 12px;
    font-size: 15px;
}

/* ---------- Ladezustand ---------- */
/* Angular liefert diese Regel selbst mit, aber erst wenn angular.js geparst ist.
   Das Script liegt am Seitenende - bis dahin waeren die rohen {{...}} sichtbar.
   Deshalb hier nochmal, damit sie ab dem ersten Paint greift. */
#turnMemberPackage[ng-cloak],
#turnMemberPackage [ng-cloak] {
    display: none !important;
}

#turnMemberPackage .ccs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 64px 2px 56px;
    font-size: 14px;
    color: var(--muted);
}
#turnMemberPackage .ccs-loading.is-done {
    display: none;
}
#turnMemberPackage .ccs-spinner {
    width: 15px;
    height: 15px;
    flex: none;
    border: 2px solid var(--line2);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: ccsSpin .7s linear infinite;
}
@keyframes ccsSpin {
    to { transform: rotate(360deg); }
}

/* display:none -> block laesst die Animation beim Einblenden neu starten,
   eine opacity-Transition wuerde schon waehrend des Ladens ablaufen. */
#turnMemberPackage .ccs-content {
    display: none;
}
#turnMemberPackage .ccs-content.is-ready {
    display: block;
    animation: ccsFadeIn .28s ease-out;
}
@keyframes ccsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #turnMemberPackage .ccs-content.is-ready { animation: none; }
    #turnMemberPackage .ccs-spinner { animation-duration: 2s; }
}

/* ---------- Leerzustand ---------- */
#turnMemberPackage .ccs-empty {
    margin: 0 0 16px;
    padding: 22px;
    border: 1px dashed var(--line2);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ---------- Kartenliste ---------- */
#turnMemberPackage .ccs-cardlist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#turnMemberPackage .ccs-card4 {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 350px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    position: relative;
    transition: box-shadow .16s, border-color .16s;
    cursor: pointer;
}
#turnMemberPackage .ccs-card4:hover {
    box-shadow: 0 8px 28px rgba(20, 30, 40, .09);
    border-color: var(--line2);
}

/* Datumsspalte */
#turnMemberPackage .ccs-c3-when {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    padding: 24px 14px 18px 22px;
    background: var(--panel);
    border-right: 1px solid var(--line);
    border-radius: 13px 0 0 13px;
}
#turnMemberPackage .ccs-cal-icon {
    display: none;
    color: var(--red);
    flex: none;
}
#turnMemberPackage .ccs-c3-d1,
#turnMemberPackage .ccs-c3-d2 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
    white-space: nowrap;
}
#turnMemberPackage .ccs-c3-dline {
    width: 1px;
    height: 11px;
    background: var(--line2);
    margin: 1px 0 1px 6px;
    flex: none;
}
#turnMemberPackage .ccs-c3-dur {
    margin-top: 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 5px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* Mittelspalte */
#turnMemberPackage .ccs-c4-main {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    justify-content: center;
}
#turnMemberPackage .ccs-c4-route {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
    position: relative;
}
/* Toern-Nummer als Referenz oben rechts an der Route. Absolut, weil .ccs-c4-main
   zentriert ist - im Fluss wuerde das zusaetzliche Element die Ortschaften nach
   unten und Tags/Crewinfo nach oben schieben. */
#turnMemberPackage .ccs-turnno {
    position: absolute;
    right: -1px;
    top: -10px;
    font-size: 11px;
    font-weight: 400;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Ein Klick markiert die ganze Nummer am Stueck. Ohne das zieht die Selektion
       in die Ortschaften weiter - die Nummer steht optisch rechts oben, im DOM aber
       vor ihnen, und markiert wird immer entlang der DOM-Reihenfolge. */
    -webkit-user-select: all;
    user-select: all;
    cursor: text;
}
/* Nur der Schraegstrich bekommt Luft, die Ziffern bleiben zusammen. Hier ist der
   einzige Ort, an dem der Abstand justiert wird. */
#turnMemberPackage .ccs-turnno-sep {
    margin: 0 3px;
}
#turnMemberPackage .ccs-c2-loc,
#turnMemberPackage .ccs-c2-loc a {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--ink) !important;
}
#turnMemberPackage .ccs-c2-loc a:hover {
    color: var(--red) !important;
}
#turnMemberPackage .ccs-c2-arrow {
    color: var(--red);
    display: flex;
    align-items: center;
    flex: none;
}
#turnMemberPackage .ccs-c4-tags {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

/* Schiff / Sprachen / Skipper */
#turnMemberPackage .ccs-crewinfo {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
#turnMemberPackage .ccs-ci-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
#turnMemberPackage .ccs-sk-l {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--faint);
    margin-bottom: 1px;
}
#turnMemberPackage .ccs-sk {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
}
#turnMemberPackage .ccs-sk-pos {
    min-width: 26px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--faint);
    letter-spacing: .3px;
    flex: none;
}
#turnMemberPackage .ccs-sk-n {
    color: var(--ink);
}
#turnMemberPackage .ccs-sk-n a {
    color: var(--ink) !important;
}
#turnMemberPackage .ccs-sk-n a:hover {
    color: var(--red) !important;
    text-decoration: underline !important;
}
#turnMemberPackage .ccs-shipname {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink) !important;
    text-decoration: none;
    align-self: flex-start;
}
/* modulpark_standard.css setzt `a { text-decoration:none !important }` -
   ohne !important bliebe der Hover hier wirkungslos. */
#turnMemberPackage .ccs-shipname:hover {
    color: var(--red) !important;
    text-decoration: underline !important;
}
#turnMemberPackage .ccs-shipclass {
    font-size: 12px;
    color: var(--faint);
}

/* Skipper-Blur fuer Nicht-Aktivmitglieder */
#turnMemberPackage .ccs-sk-n .blurred {
    filter: blur(4px);
    user-select: none;
    cursor: help;
}

/* Rechte Spalte */
#turnMemberPackage .ccs-c4-side {
    border-left: 1px solid var(--line);
    background: #fcfcfd;
    /* padding-bottom haelt den Platz fuer den absolut gesetzten Details-Link frei */
    padding: 18px 20px 46px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* oben ausrichten, damit Verfuegbarkeit und Preisbox auf jeder Karte
       auf derselben Hoehe stehen - zentriert wandern sie mit der Kartenhoehe */
    justify-content: flex-start;
    border-radius: 0 13px 13px 0;
}
#turnMemberPackage .ccs-detaillink {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #464646 !important;
    z-index: 3;
}
#turnMemberPackage .ccs-card4:hover .ccs-detaillink {
    text-decoration: underline !important;
}

/* Ausgebucht */
#turnMemberPackage .ccs-soldoutwrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 13px;
    pointer-events: none;
    z-index: 2;
}
#turnMemberPackage .ccs-soldout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    font-style: italic;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: 2px;
    color: var(--red);
    opacity: .22;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}
/* Schleier ueber den ganzen Karteninhalt. Der Schriftzug bleibt ausgenommen -
   er liegt auf dem Schleier, nicht darunter. Keine Farbe wird veraendert. */
#turnMemberPackage .ccs-card4.is-full > *:not(.ccs-soldoutwrap) {
    opacity: .35;
}

/* Verfuegbarkeits-Badge */
#turnMemberPackage .ccs-avail {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
}
#turnMemberPackage .ccs-avail b {
    margin-right: 4px;
    font-weight: 800;
    font-size: 13.5px;
}
#turnMemberPackage .ccs-avail.is-free {
    color: #037a0c;
    background: var(--green-bg);
}
#turnMemberPackage .ccs-avail.is-crewfull,
#turnMemberPackage .ccs-avail.is-full {
    color: #bf1f1d;
    background: #fbe9e9;
}
/* Zweitrenderung fuer Mobile - auf Desktop unsichtbar */
#turnMemberPackage .ccs-avail-m {
    display: none;
}

/* ---------- Preis-Kacheln ---------- */
#turnMemberPackage .ccs-ptbox {
    position: relative;
}
#turnMemberPackage .ccs-pt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}
#turnMemberPackage .ccs-pt.is-single {
    grid-template-columns: 1fr;
}
#turnMemberPackage .ccs-pt-col {
    background: #fff;
    padding: 12px 14px;
    min-width: 0;
}
#turnMemberPackage .ccs-pt-col.is-member4 {
    background: var(--member-bg);
}
#turnMemberPackage .ccs-pt-h {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
#turnMemberPackage .is-member4 .ccs-pt-h {
    color: var(--member-ink);
}
#turnMemberPackage .is-guest .ccs-pt-h {
    color: var(--muted);
}
#turnMemberPackage .ccs-pt-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0 0;
}
#turnMemberPackage .ccs-pt-row span {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}
#turnMemberPackage .ccs-pt-row b {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
    white-space: nowrap;
}
#turnMemberPackage .is-member4 .ccs-pt-row b {
    color: var(--member-ink);
}

/* Info-Icon - der Tooltip selbst kommt von tooltipster, nicht von hier. */
#turnMemberPackage .ccs-pinfo {
    position: absolute;
    top: -9px;
    right: -7px;
    z-index: 6;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line2);
    border-radius: 5px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
}
#turnMemberPackage .ccs-pinfo:hover,
#turnMemberPackage .ccs-pinfo.is-on {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

/* Tooltip zum Info-Icon - die einzige ungescopete Stelle dieser Datei:
   tooltipster haengt den Tooltip an <body>, also ausserhalb von #turnMemberPackage.
   Die Isolation kommt hier stattdessen vom eigenen Theme-Namen (theme-Option im
   Init), den sonst niemand verwendet - der globale tooltipster-default bleibt
   unangetastet. Aus demselben Grund feste Hexwerte statt der CSS-Variablen: die
   sind auf #turnMemberPackage deklariert und gelten hier draussen nicht.
   Werte = die des Karten-Designs (--line2, --ink, --muted, --faint).
   Der Pfeil braucht keine Regel: tooltipster v3 liest dafuer background-color
   und border-color des Tooltips aus. */
.tooltipster-ccsPrice {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 9px;
    box-shadow: 0 12px 34px rgba(20, 30, 40, .2);
}
.tooltipster-ccsPrice .tooltipster-content {
    padding: 12px 14px;
    font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #5f5f5f;
    text-align: left;
}
.tooltipster-ccsPrice b {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: #222;
}
.tooltipster-ccsPrice .ccs-tip-f {
    display: block;
    margin-top: 9px;
    font-size: 11px;
    color: #8f8f8f;
}

/* =====================================================================
   MOBILE - dasselbe DOM, andere Anordnung
   ===================================================================== */
@media (max-width: 767px) {

    #turnMemberPackage .ccs-page {
        font-size: 14px;
    }
    #turnMemberPackage .ccs-pagehead h2 {
        font-size: 20px;
    }

    /* Desktop-Filterbar aus, Mobile-Balken an */
    #turnMemberPackage .ccs-filter {
        display: none;
    }
    #turnMemberPackage .ccs-filter-m {
        display: block;
    }
    /* Im Overlay wird die Desktop-Filterbar wieder gebraucht, aber gestapelt */
    #turnMemberPackage .ccs-sheet-body .ccs-filter {
        display: block;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }
    #turnMemberPackage .ccs-sheet-body .ccs-filter-row,
    #turnMemberPackage .ccs-sheet-body .ccs-filter-row--2,
    #turnMemberPackage .ccs-sheet-body .ccs-filter-row--3 {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 14px;
        padding-top: 0;
        border-top: none;
    }
    #turnMemberPackage .ccs-sheet-body .ccs-filter-row:first-child {
        margin-top: 0;
    }
    #turnMemberPackage .ccs-sheet-body .ccs-filter-meta {
        display: none;
    }
    #turnMemberPackage .ccs-sheet-body .ccs-daterange {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* Karte stapeln */
    #turnMemberPackage .ccs-card4 {
        display: flex;
        flex-direction: column;
        gap: 13px;
        padding: 15px 16px 16px;
        grid-template-columns: none;
        cursor: default;
    }
    #turnMemberPackage .ccs-card4:hover {
        box-shadow: none;
        border-color: var(--line);
    }

    /* Datumszeile horizontal, mit Kalender-Icon */
    #turnMemberPackage .ccs-c3-when {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0 0 12px;
        background: none;
        border-right: none;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }
    #turnMemberPackage .ccs-cal-icon {
        display: block;
    }
    #turnMemberPackage .ccs-c3-d1,
    #turnMemberPackage .ccs-c3-d2 {
        font-size: 13.5px;
        font-weight: 600;
    }
    #turnMemberPackage .ccs-c3-dline {
        width: auto;
        height: auto;
        background: none;
        margin: 0;
    }
    #turnMemberPackage .ccs-c3-dline::after {
        content: "\2013";
        color: var(--faint);
    }
    #turnMemberPackage .ccs-c3-dur {
        margin-top: 0;
        margin-left: auto;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 20px;
        font-size: 11.5px;
    }

    #turnMemberPackage .ccs-c4-main {
        padding: 0;
        gap: 13px;
    }
    /* Ohne padding gibt es hier keinen Platz ueber der Route - die Nummer laeuft
       deshalb im Fluss mit. Die gestapelte Karte ist inhaltsgetrieben, dadurch
       verschiebt sich nichts relativ zueinander. flex-basis erzwingt die eigene
       Zeile in der umbrechenden Route. */
    #turnMemberPackage .ccs-turnno {
        position: static;
        flex-basis: 100%;
        margin-bottom: -6px;
    }
    #turnMemberPackage .ccs-c2-loc,
    #turnMemberPackage .ccs-c2-loc a {
        font-size: 20px;
    }
    #turnMemberPackage .ccs-crewinfo {
        padding-top: 12px;
        gap: 22px;
    }

    /* Verfuegbarkeit wandert unter die Route */
    #turnMemberPackage .ccs-avail-m {
        display: inline-flex;
    }
    #turnMemberPackage .ccs-c4-side > .ccs-avail {
        display: none;
    }

    #turnMemberPackage .ccs-c4-side {
        border-left: none;
        background: none;
        padding: 0;
        border-radius: 0;
        gap: 13px;
    }
    #turnMemberPackage .ccs-pt-row span {
        font-size: 11px;
    }
    #turnMemberPackage .ccs-pt-row b {
        font-size: 13px;
    }

    /* Auf Mobile laut HANDOFF nur der Badge, kein diagonaler Schriftzug */
    #turnMemberPackage .ccs-soldoutwrap {
        display: none;
    }
    #turnMemberPackage .ccs-card4.is-full > *:not(.ccs-soldoutwrap) {
        opacity: 1;
    }

    /* Detail-Link wird zum Block-Button */
    #turnMemberPackage .ccs-detaillink {
        display: none;
    }
}

/* Auf Desktop kein Block-Button */
@media (min-width: 768px) {
    #turnMemberPackage .ccs-btn--block {
        display: none;
    }
    #turnMemberPackage .ccs-filter-m {
        display: none;
    }
    #turnMemberPackage .ccs-sheet {
        display: none;
    }
}