/* =========================================================================
   Altius Service Menu (bereinigt) – Mobile First
   ========================================================================= */

:root{
  --tf-sm-border:#a8996e;
  --tf-sm-text:#a8996e;
  --tf-sm-muted:#9c906a;
  --tf-sm-bg:#fff;

  --tf-sm-icon:30px;
  --tf-sm-pad-y:9px;
  --tf-sm-pad-x:20px;

  --tf-sm-font-weight:700;
  --tf-sm-font-size:16px;

  --back-size:55px; /* Quadratgröße Back */
}

/* Grundlayout */
.tf-sm{
  display:grid;
  gap:0;
  width:100%;
}

/* Kachel */
.tf-sm__tile{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; background:var(--tf-sm-bg);
  padding:var(--tf-sm-pad-y) var(--tf-sm-pad-x);
  border-bottom:1px solid var(--tf-sm-border);
  transition:background-color .3s ease;
}

/* Icon */
.tf-sm__icon{ flex:0 0 var(--tf-sm-icon); display:flex; align-items:center; justify-content:center; }
.tf-sm__icon img,
.tf-sm__icon svg{ width:var(--tf-sm-icon); height:var(--tf-sm-icon); display:block; object-fit:contain; }

/* Text */
.tf-sm__content{ flex:1 1 auto; min-width:0; }
.tf-sm__label{ display:block; font-weight:var(--tf-sm-font-weight); font-size:var(--tf-sm-font-size); text-transform:uppercase; color:var(--tf-sm-text); }
.tf-sm__teaser{ display:block; margin-top:0; font-size:14px; line-height:1.3; color:var(--tf-sm-muted); }

/* Chevron */
.tf-sm__chev{ margin-left:auto; font-size:24px; color:var(--tf-sm-muted); transition:transform .15s ease; }
.tf-sm__tile:hover .tf-sm__chev{ transform:translateX(3px); }

/* Zustände */
.tf-sm__tile[aria-current="page"], .tf-sm__tile.is-active{ background-color:#f9f9f9; }
.tf-sm__tile.is-ancestor{ outline:2px dashed var(--tf-sm-border); outline-offset:-2px; }
.tf-sm__tile:hover{ background-color:#f9f9f9; }
.tf-sm__tile:focus-visible{ outline:3px solid var(--tf-sm-text); outline-offset:2px; }

/* Back (Quadrat nur Icon) */
.tf-sm__back{ padding:0 !important; width:var(--back-size) !important; display:flex; align-items:center; justify-content:flex-start; }
.tf-sm__backbox{
  width:calc(var(--back-size) - 2px);
  display:flex; align-items:center;
  justify-content: center;
  color:var(--tf-sm-text);
}
.tf-sm__back .tf-sm__content,
.tf-sm__back .tf-sm__chev{ display:none !important; }

/* Mobile: 1 Spalte */
@media (max-width:767.98px){
  .tf-sm{ grid-template-columns:1fr !important; }
}

/* =========================================================================
   Desktop: immer eine Zeile
   – mit Back:   var(--back-size) + repeat(var(--content-cols), 1fr)
   – ohne Back:  repeat(var(--content-cols), 1fr)
   ========================================================================= */
@media (min-width:768px){
  /* Spaltenaufbau */
  .tf-sm--has-back{
    grid-template-columns: var(--back-size) repeat(var(--content-cols), 1fr) !important;
  }
  .tf-sm:not(.tf-sm--has-back){
    grid-template-columns: repeat(var(--content-cols), 1fr) !important;
  }

  /* Linien NUR zwischen Spalten – rechts/links außen keine Linie */
  .tf-sm > .tf-sm__tile{ border-right:1px solid var(--tf-sm-border); }
  .tf-sm > .tf-sm__tile:last-child{ border-right:none; }

  /* Back bekommt ebenfalls eine rechte Trennlinie */
  .tf-sm--has-back > .tf-sm__back{ border-right:1px solid var(--tf-sm-border); }
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  .tf-sm__chev{ transition:none; }
}

/* ===== Back mobil: wie ein normaler Zeilen-Eintrag ===== */
@media (max-width: 767.98px){
  /* Back-Kachel wie die übrigen: volle Breite, Standard-Padding */
  .tf-sm__back{
    width:auto !important;
    padding:var(--tf-sm-pad-y) var(--tf-sm-pad-x) !important;
    border-right:none !important; /* mobil keine vertikale Trennlinie */
    gap:12px;
  }

  /* Aus dem Quadrat wird links nur ein Icon ohne Rahmen */
  .tf-sm__backbox{
    width:var(--tf-sm-icon);
    height:var(--tf-sm-icon);
    border:none;
    border-radius:0;
    display:flex; align-items:center; justify-content:center;
    margin-right:0;
  }

  /* Das mobile Label anzeigen */
  .tf-sm__backlabel{
    display:inline-block;
    font-weight:var(--tf-sm-font-weight);
    font-size:var(--tf-sm-font-size);
    text-transform:uppercase;
    color:var(--tf-sm-text);
  }
}

/* ===== Back Desktop: Label ausblenden, Quadrat bleibt ===== */
@media (min-width: 768px){
  .tf-sm__backlabel{ display:none; }
}