/* Ausgelagert aus: trainingszeiten.php – CSS-Variablen-kompatibel */

.tz-topbar { height: 5px; background: var(--red); }
.tz-hero { background: var(--bg-section); padding: 44px 24px 36px; text-align: center; border-bottom: 1px solid var(--border-col); }
.tz-hero h1 { font-family: 'Oswald', sans-serif; font-size: clamp(1.8em, 4vw, 2.8em); color: var(--text-main); margin: 0 0 8px; }
.tz-hero p { color: var(--text-muted); font-size: .95em; margin: 0; }

.tz-tab-nav { display: flex; gap: 0; background: var(--bg-page); border-bottom: 2px solid var(--border-col); padding: 0 20px; max-width: 1200px; margin: 0 auto; }
.tz-tab-link { padding: .75rem 1.5rem; font-family: 'Oswald', sans-serif; font-size: .9em; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none; transition: color .15s, border-color .15s; letter-spacing: .06em; text-transform: uppercase; }
.tz-tab-link:hover { color: var(--text-main); }
.tz-tab-link.active { color: var(--red); border-bottom-color: var(--red); }

.tz-tab-content { display: none; }
.tz-tab-content.active { display: block; }

.tz-wrap { max-width: 1100px; margin: 0 auto; padding: 36px 20px 60px; }
.tz-day { margin-bottom: 36px; }
.tz-day__header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tz-day__name { font-family: 'Oswald', sans-serif; font-size: 1.15em; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.tz-day__line { flex: 1; height: 2px; background: var(--border-col); border-radius: 2px; }
.tz-day__count { font-size: .72em; color: var(--text-muted); background: var(--bg-section); padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.tz-table { width: 100%; border-collapse: collapse; }
.tz-table thead th { background: var(--bg-section); color: var(--text-muted); font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border-col); }
.tz-table tbody tr { border-bottom: 1px solid var(--border-col); transition: background .15s; }
.tz-table tbody tr:hover { background: var(--bg-card); }
.tz-table tbody td { padding: 11px 14px; color: var(--text-main); font-size: .9em; vertical-align: middle; }
.tz-table .td-team  { font-weight: 700; color: var(--text-main); }
.tz-table .td-time  { font-family: 'Oswald', sans-serif; font-size: 1em; color: var(--red); white-space: nowrap; font-weight: 600; }
.tz-table .td-platz { color: var(--text-muted); }
.tz-table .td-bereich { font-size: .8em; background: var(--bg-section); color: var(--text-muted); padding: 3px 10px; border-radius: 20px; display: inline-block; white-space: nowrap; }
@media (max-width: 640px) {
    .tz-table thead { display: none; }
    .tz-table, .tz-table tbody, .tz-table tr, .tz-table td { display: block; width: 100%; }
    .tz-table tbody tr { background: var(--bg-card); border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--border-col); padding: 12px 14px; }
    .tz-table tbody td { padding: 3px 0; border: none; }
    .tz-table .td-time { font-size: 1.1em; }
}

/* TAB 2 – Platzplan (eigene Farbvariablen, Dark-only by design) */
#pp-outer {
    max-width: 1400px; margin: 0 auto; padding: 24px 20px 60px;
    --pp-red: #cc0000; --pp-red2: #e60000;
    --pp-blk: #0a0a0a; --pp-blk2: #111111; --pp-blk3: #1a1a1a; --pp-blk4: #222222;
    --pp-wh: #ffffff; --pp-wh2: #f0f0f0; --pp-wh3: #d0d0d0; --pp-wh4: #909090;
    --pp-bd: #2a2a2a; --pp-bd2: #333333;
    --pp-green: #1a3a1a; --pp-green2: #2a5a2a; --pp-green3: #4ade80;
    --pp-blue: #12122a; --pp-blue2: #2a2a6a; --pp-blue3: #60a5fa;
    --pp-orange: #2a1a0a; --pp-orange2: #5a3a0a; --pp-orange3: #fb923c;
    --pp-purple: #1a0a2a; --pp-purple2: #3a0a5a; --pp-purple3: #c084fc;
}
.pp-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.pp-ctrl-group { display: flex; align-items: center; gap: 6px; }
.pp-ctrl-label { font-size: 10px; font-weight: 700; color: var(--pp-wh4); text-transform: uppercase; letter-spacing: .08em; }
.pp-day-btn, .pp-view-btn { background: var(--pp-blk3); border: 1px solid var(--pp-bd2); color: var(--pp-wh4); font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .5px; padding: 6px 14px; border-radius: 4px; cursor: pointer; transition: all .15s; text-transform: uppercase; }
.pp-day-btn:hover, .pp-view-btn:hover { color: var(--pp-wh); border-color: #555; }
.pp-day-btn.active { background: var(--pp-red); border-color: var(--pp-red); color: var(--pp-wh); }
.pp-view-btn.active { background: var(--pp-blk4); border-color: var(--pp-red); color: var(--pp-wh); }
.pp-panel { display: none; }
.pp-panel.active { display: block; }
.pitch-wrapper { background: var(--pp-blk3); border: 1px solid var(--pp-bd); border-radius: 8px; padding: 16px; margin-bottom: 16px; overflow-x: auto; }
.pitch-container { display: flex; gap: 12px; min-width: 800px; align-items: stretch; }
.pitch-divider { width: 2px; background: var(--pp-red); opacity: .4; border-radius: 1px; flex-shrink: 0; position: relative; }
.pitch-divider::after { content: '↕ Straße'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); font-size: 9px; color: var(--pp-red); white-space: nowrap; background: var(--pp-blk3); padding: 2px 6px; }
.pitch-block { flex: 1; min-width: 0; background: var(--pp-green); border: 2px solid var(--pp-green2); border-radius: 8px; overflow: hidden; position: relative; }
.pitch-block.cplace      { background: var(--pp-blue);   border-color: var(--pp-blue2); }
.pitch-block.fahrenhorst { background: var(--pp-orange);  border-color: var(--pp-orange2); }
.pitch-block.brinkum     { background: var(--pp-purple);  border-color: var(--pp-purple2); }
.pitch-block-header { background: rgba(0,0,0,.4); padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
.pitch-block-name { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .5px; }
.pitch-block:not(.cplace):not(.fahrenhorst):not(.brinkum) .pitch-block-name { color: var(--pp-green3); }
.pitch-block.cplace      .pitch-block-name { color: var(--pp-blue3); }
.pitch-block.fahrenhorst .pitch-block-name { color: var(--pp-orange3); }
.pitch-block.brinkum     .pitch-block-name { color: var(--pp-purple3); }
.pitch-block-loc { font-size: 10px; color: var(--pp-wh4); }
.pitch-segments { display: flex; flex-direction: column; gap: 0; padding: 8px; }
.pitch-segment { border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; min-height: 60px; border: 1px solid rgba(255,255,255,.08); position: relative; cursor: default; transition: border-color .2s; }
.pitch-segment:last-child { margin-bottom: 0; }
.pitch-segment-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.pitch-segment-teams { display: flex; flex-wrap: wrap; gap: 4px; }
.pitch-team-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 3px; font-size: 10px; font-weight: 600; cursor: pointer; transition: filter .15s; white-space: nowrap; }
.pitch-team-chip:hover { filter: brightness(1.2); }
.pitch-team-chip .chip-time { font-size: 9px; opacity: .75; font-weight: 400; }
.pitch-empty { font-size: 10px; color: rgba(255,255,255,.2); font-style: italic; }
.seg-nord  { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.2) !important; }
.seg-mitte { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2) !important; }
.seg-sued  { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.2) !important; }
.seg-nord .pitch-segment-label  { color: rgba(34,197,94,.6); }
.seg-mitte .pitch-segment-label { color: rgba(245,158,11,.6); }
.seg-sued .pitch-segment-label  { color: rgba(239,68,68,.6); }
.seg-d1  { background: rgba(14,116,144,.1);  border-color: rgba(14,116,144,.3) !important; }
.seg-d2n { background: rgba(29,78,216,.1);   border-color: rgba(29,78,216,.3) !important; }
.seg-d2s { background: rgba(109,40,217,.1);  border-color: rgba(109,40,217,.3) !important; }
.seg-d3  { background: rgba(180,83,9,.1);    border-color: rgba(180,83,9,.3) !important; }
.seg-d1 .pitch-segment-label  { color: rgba(14,116,144,.8); }
.seg-d2n .pitch-segment-label { color: rgba(96,165,250,.8); }
.seg-d2s .pitch-segment-label { color: rgba(167,139,250,.8); }
.seg-d3 .pitch-segment-label  { color: rgba(251,146,60,.8); }
.seg-fh-nord { background: rgba(251,146,60,.08); border-color: rgba(251,146,60,.2) !important; }
.seg-fh-sued { background: rgba(251,100,30,.08); border-color: rgba(251,100,30,.2) !important; }
.seg-fh-nord .pitch-segment-label { color: rgba(251,146,60,.7); }
.seg-fh-sued .pitch-segment-label { color: rgba(251,100,30,.7); }
.seg-bk-nord { background: rgba(192,132,252,.08); border-color: rgba(192,132,252,.2) !important; }
.seg-bk-sued { background: rgba(167,100,230,.08); border-color: rgba(167,100,230,.2) !important; }
.seg-bk-nord .pitch-segment-label { color: rgba(192,132,252,.7); }
.seg-bk-sued .pitch-segment-label { color: rgba(167,100,230,.7); }
.timeline-wrapper { background: var(--pp-blk3); border: 1px solid var(--pp-bd); border-radius: 8px; overflow: hidden; }
.timeline-scroll { overflow-x: auto; }
.tl-header { display: flex; position: sticky; top: 0; z-index: 10; background: var(--pp-blk); border-bottom: 2px solid var(--pp-bd2); }
.tl-time-col { width: 52px; min-width: 52px; flex-shrink: 0; background: var(--pp-blk); border-right: 2px solid var(--pp-bd2); }
.tl-time-col-right { width: 52px; min-width: 52px; flex-shrink: 0; background: var(--pp-blk); border-left: 2px solid var(--pp-bd2); }
.tl-place-header { display: flex; flex: 1; }
.tl-place-group { display: flex; flex-direction: column; border-right: 2px solid var(--pp-bd2); }
.tl-place-group:last-child { border-right: none; }
.tl-place-name { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-align: center; padding: 5px 4px; border-bottom: 1px solid var(--pp-bd2); white-space: nowrap; }
.tl-place-name.aplace      { color: var(--pp-green3);  background: rgba(34,197,94,.05); }
.tl-place-name.cplace      { color: var(--pp-blue3);   background: rgba(96,165,250,.05); }
.tl-place-name.fahrenhorst { color: var(--pp-orange3); background: rgba(251,146,60,.05); }
.tl-place-name.brinkum     { color: var(--pp-purple3); background: rgba(192,132,252,.05); }
.tl-place-name.other       { color: var(--pp-wh4); }
.tl-seg-headers { display: flex; }
.tl-seg-header { font-size: 9px; font-weight: 700; color: var(--pp-wh4); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 4px 2px; border-right: 1px solid var(--pp-bd); white-space: nowrap; overflow: hidden; }
.tl-seg-header:last-child { border-right: none; }
.tl-body { display: flex; position: relative; }
.tl-time-axis { width: 52px; min-width: 52px; flex-shrink: 0; background: var(--pp-blk); border-right: 2px solid var(--pp-bd2); }
.tl-time-axis-right { width: 52px; min-width: 52px; flex-shrink: 0; background: var(--pp-blk); border-left: 2px solid var(--pp-bd2); }
.tl-time-slot { height: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; font-size: 10px; color: var(--pp-wh4); border-bottom: 1px solid #1a1a1a; }
.tl-time-slot.full-hour { color: var(--pp-wh3); font-weight: 600; border-bottom-color: var(--pp-bd); }
.tl-grid { display: flex; flex: 1; position: relative; }
.tl-col { flex-shrink: 0; position: relative; border-right: 1px solid #1e1e1e; }
.tl-col.place-last { border-right: 2px solid var(--pp-bd2); }
.tl-cell { height: 40px; border-bottom: 1px solid #1a1a1a; transition: background .1s; }
.tl-cell.full-hour { border-bottom-color: var(--pp-bd); }
.tl-cell:hover { background: rgba(255,255,255,.03); }
.tl-block { position: absolute; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; cursor: pointer; z-index: 5; transition: filter .12s, transform .1s; border: 2px solid transparent; padding: 2px 4px; }
.tl-block:hover { filter: brightness(1.2); transform: scaleX(1.01); z-index: 10; }
.tl-block-name { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 95%; }
.tl-block-time { font-size: 8px; opacity: .75; white-space: nowrap; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--pp-bd); background: var(--pp-blk3); }
.pp-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--pp-wh4); }
.pp-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pp-tooltip { position: fixed; z-index: 9999; background: var(--pp-blk); border: 1px solid var(--pp-bd2); border-radius: 6px; padding: 8px 12px; font-size: 11px; color: var(--pp-wh2); pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 4px 20px rgba(0,0,0,.6); max-width: 200px; }
.pp-tooltip.show { opacity: 1; }
.pp-tooltip-name { font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.pp-tooltip-row { color: var(--pp-wh4); margin-top: 2px; }
.pp-no-data { text-align: center; padding: 40px; color: var(--pp-wh4); font-size: 13px; }
.pp-pdf-btn { background: rgba(204,0,0,.13); border: 1px solid var(--red); color: var(--red); font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .5px; padding: 6px 16px; border-radius: 4px; cursor: pointer; transition: all .15s; text-transform: uppercase; }
.pp-pdf-btn:hover { background: rgba(204,0,0,.26); }

@media print {
    body * { visibility: hidden; }
    #pp-outer, #pp-outer * { visibility: visible; }
    #pp-outer { position: absolute; left: 0; top: 0; width: 100%; }
    .pp-controls { display: none !important; }
    .pp-panel { display: block !important; }
    .pitch-wrapper, .timeline-wrapper { break-inside: avoid; }
    @page { size: A4 landscape; margin: 10mm; }
}
@media (max-width: 700px) {
    .pitch-container { flex-direction: column; min-width: unset; }
    .pitch-divider { width: 100%; height: 2px; }
    .pp-controls { gap: 8px; }
    .pp-day-btn { padding: 5px 10px; font-size: 11px; }
}