/*
 Theme Name:   SFV Norderstedt Child
 Theme URI:    https://example.com/
 Description:  SFV Norderstedt Child Theme von Astra
 Author:       Matthias
 Template:     astra
 Version:      1.1
*/

/* ===== SFVN Termine – Basis ===== */

.sfvn-public{
  --sfvn-w-termin:220px;
  --sfvn-w-title:0.7fr;
  --sfvn-w-loc:160px;
  --sfvn-w-note:1.3fr;
}

.sfvn-tight-top{ margin-top:-12px; }

.sfvn-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #e9edf3;
}

.sfvn-row{
  display:grid;
  grid-template-columns:var(--sfvn-w-termin) var(--sfvn-w-title) var(--sfvn-w-loc) var(--sfvn-w-note);
  gap:16px;
  align-items:center;
  border-bottom:1px solid #e9edf3;
  padding:8px 0;
}

.sfvn-head{
  font-weight:700;
  color:#334;
  background:#fafbfe;
}

.sfvn-cell{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* Termin: Wochentag + Datum fett, Zeit kleiner in einer Zeile */
.termin-date{ font-weight:700; }
.termin-time{ font-size:.9em; opacity:.9; }
.termin-wd{ font-weight:600; opacity:.85; margin-right:2px; }

/* Titel betonen und – falls Status – nur den Titel durchstreichen */
.sfvn-col-title{ font-weight:700; }
.sfvn-col-title a{ text-decoration:none; }
.is-struck-title{ text-decoration:line-through; opacity:.75; }

/* Desktop: dezentes Padding, damit der Klickbereich nicht nur der Text ist */
.sfvn-col-title a{
  text-decoration:none;
  display:inline-block;
  padding:2px 0;
}

/* Ort & Info so klein wie Zeit */
.sfvn-col-loc,
.sfvn-col-note{
  font-size:.9em;
  opacity:.85;
}

/* Temp-Termin: ganze Zeile etwas heller */
.sfvn-row.sfvn-temp .sfvn-col-termin,
.sfvn-row.sfvn-temp .sfvn-col-title,
.sfvn-row.sfvn-temp .sfvn-col-loc,
.sfvn-row.sfvn-temp .sfvn-col-note{
  opacity:0.65;
}

/* ===== SFVN Termine – mobiles 2x2-Layout erzwingen ===== */
@media (max-width: 900px){
  /* 2x2-Layout erzwingen – das hast du schon ähnlich drin */
  .sfvn-public .sfvn-head{
    display:none !important;
  }

  .sfvn-public .sfvn-row{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "termin title"
      "loc    note";
    row-gap: 4px;
    column-gap: 12px;
    padding:10px 0 12px;
    border-bottom:1px solid #e9edf3;
  }

  .sfvn-public .sfvn-col-termin{ grid-area: termin; }
  .sfvn-public .sfvn-col-title { grid-area: title; }
  .sfvn-public .sfvn-col-loc   { grid-area: loc; }
  .sfvn-public .sfvn-col-note  { 
    grid-area: note; 
    white-space: normal; 
    display:block !important;
  }

  /* Typo: etwas kompakter und harmonisch */
  .sfvn-public .sfvn-col-termin{
    font-size: .95em;
    line-height: 1.3;
  }

  .sfvn-public .sfvn-col-title{
    line-height: 1.3;
  }

  .sfvn-public .sfvn-col-loc,
  .sfvn-public .sfvn-col-note{
    font-size: .9em;
    opacity: .85;
  }

  .sfvn-col-title a{
    display:inline-block;
    width:100%;
    padding:4px 0;
  }
}

/* Extra schmal */
@media (max-width: 360px){
  .sfvn-public .sfvn-row{ gap:4px 8px; }
}

/* =========================================================
   SFVN – Breitere, harmonische Badges
   ========================================================= */

/* Basis-Badge: jetzt etwas breiter, mehr Luft */
.sfvn-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;                   /* mehr Abstand zwischen Icon & Text */
    padding:3px 10px;          /* breiteres Badge */
    border-radius:7px;
    font-size:.85em;
    font-weight:700;
    vertical-align:middle;
    line-height:1.1;
}

/* Icons -------------------------------------------------- */
.sfvn-badge.badge-temp::before{
    content:"⚠";
    display:inline-block;
}
.sfvn-badge.badge-cancelled::before{
    content:"⛔";
    display:inline-block;
}
.sfvn-badge.badge-postponed::before{
    content:"↷";
    display:inline-block;
}

/* Farben -------------------------------------------------- */
.sfvn-badge.badge-cancelled{
    background:#d9534f;
    color:#fff;
}
.sfvn-badge.badge-postponed{
    background:#f0ad4e;
    color:#fff;
}
.sfvn-badge.badge-temp{
    background:#f0ad4e;
    color:#fff;
}

/* Mobile Variante – etwas kompakter */
@media (max-width: 900px){
    .sfvn-badge{
        padding:3px 8px;       /* mobile etwas schmaler */
        gap:4px;
        font-size:.78em;
        border-radius:6px;
    }
}