/* /css/frontend-plan.css */
/* Farben an Screenshot angelehnt */
:root{
    --fp-blue-dark: #1f455f;   /* Header-Datum */
    --fp-blue:       #8ec6df;  /* Zwischenleiste */
    --fp-grey:       #e5e7eb;  /* Tabellenlinien */
    --text:          #1a1a1a;
}

.plan3 {
    margin-top: 18px;
}

/* Kopf der 3-Tages-Ansicht */
.plan3__head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:10px;
}
.plan3__title{font-size:20px; font-weight:700; margin:0}
.plan3__nav{display:flex; gap:8px}

/* Grid mit drei Tagesblöcken */
.plan3__grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap:14px;
}

/* Tageskarte */
.daycard{
    background:#fff;
    border:1px solid var(--fp-grey);
    border-radius:12px;
    overflow:hidden;
}

/* Datum-Header (dunkelblau) */
.daycard__date{
    background:var(--fp-blue-dark);
    color:#fff;
    font-weight:700;
    text-align:center;
    padding:8px 10px;
    font-size:15px;
}

/* Zwischenstreifen (hellblau) — optisch wie im Screenshot */
.daycard__bar{
    background:var(--fp-blue);
    height:8px;
}

/* Tabelle */
.daycard table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}
.daycard thead th{
    background:#f3f4f6;
    text-align:left;
    padding:8px 10px;
    border-bottom:1px solid var(--fp-grey);
    position:relative;
}
.daycard thead th:not(:last-child){ border-right:1px solid var(--fp-grey); }
.daycard tbody td{
    padding:8px 10px;
    border-top:1px solid var(--fp-grey);
    vertical-align:top;
}
.daycard tbody td:not(:last-child){ border-right:1px solid var(--fp-grey); }

/* kleine Dreiecke rechts (optische Anmutung der Filterpfeile im Screenshot) */
.daycard thead th::after{
    content:"";
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:6px solid #9ca3af;
    opacity:.8;
}

/* Buttons (nutzen dein buttons.css, hier nur Größe) */
.plan3 .btn--sm{ padding:8px 12px; font-size:14px; border-radius:10px }

/* Responsive: unter 900px auf Stapel umschalten */
@media (max-width: 900px){
    .plan3__grid{ grid-template-columns: 1fr; }
}