/*== /styles/domain/kommunikation/komm-verlauf.css ==*/















.komm-sec-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.komm-sec-zahl {
  margin-left: var(--space-2); padding: 0 var(--space-1-5);
  border-radius: var(--radius-pill); background: var(--bg-secondary);
  color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}



.komm-sec-zusatz { color: var(--color-text-muted); font-size: var(--fs-caption); }




.app-scope .komm-sec-facette {
  display: inline-flex; align-items: center; gap: var(--space-1);
  
  padding: var(--space-1) var(--space-3-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--card-bg, #fff); color: var(--color-text-muted);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); cursor: pointer;
}
.app-scope .komm-sec-facette:hover { border-color: var(--color-border-hover); color: var(--lod-darkblue-900); }
.app-scope .komm-sec-facette:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .komm-sec-facette.is-active {
  border-color: var(--lod-turquoise);
  background: color-mix(in srgb, var(--lod-turquoise) 10%, var(--card-bg, #fff));
  color: var(--lod-darkblue-900); font-weight: var(--fw-semibold);
}
.komm-sec-facette span { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.komm-sec-facetten { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: var(--space-2) 0 var(--space-3); }


.komm-sec-suche { max-width: 280px; margin-bottom: var(--space-3); }



.komm-sec-pins {
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}
.komm-sec-pins-titel {
  display: flex; align-items: center; gap: var(--space-1);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted);
}
.komm-sec-pins-titel .ui-ico .ui-ico-svg { width: 13px; height: 13px; opacity: .6; }






.komm-sec-vorschlaege { margin: var(--space-2) 0 var(--space-3); }
.komm-sec-vorschlaege-kopf { font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.komm-vorschlag-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.komm-vorschlag { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.komm-vorschlag-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.komm-vorschlag-betreff { font-size: var(--fs-body); color: var(--color-text); }
.komm-vorschlag-meta { font-size: var(--fs-caption); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komm-vorschlag-btn { flex-shrink: 0; }



.komm-vorschlag-mehr { width: 100%; margin-top: var(--space-2); justify-content: center; }


.app-scope .komm-sec-mehr {
  display: block; width: 100%; margin-top: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  background: transparent; color: var(--lod-darkblue);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); cursor: pointer;
}
.app-scope .komm-sec-mehr:hover { background: var(--bg-secondary); border-color: var(--color-border-hover); }
.app-scope .komm-sec-mehr:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }






@media (max-width: 999px) {
  .app-scope .komm-sec-facette { min-height: var(--touch-ziel); }
  .app-scope .komm-sec-mehr { min-height: var(--touch-ziel); }
}



@media (max-width: 599px) {
  .komm-vorschlag { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .komm-vorschlag-btn { align-self: flex-start; }
}


/*== /styles/sections/mein-bereich/mb-outlook.css ==*/




























































.mbo-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  

}




























.mbo-ident,
.mbo-haupt,
.mbo-tz,
.mbo-sig,
.mbo-tri-item {
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  background: var(--surface-bg);
}









.mbo-ident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
}
.mbo-ident-ident {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}



.mbo-ident-eyebrow,
.mbo-tri-vorschlag-label {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


.mbo-ident-postfach {
  font-size: var(--font-size-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mbo-ident-zustand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}
.mbo-ident-zustand-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}










.mbo-tri-liste { display: flex; flex-direction: column; }




















.mbo-tri-item {
  display: grid;
  grid-template-columns: auto minmax(16rem, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}



.mbo-tri-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-ziel);
  height: var(--touch-ziel);
  margin: calc(var(--space-2) * -1) 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1);
  cursor: pointer;
}
.mbo-tri-item.ist-gewaehlt { background: var(--color-bg-subtle); }





.mbo-tri-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mbo-tri-titel { font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--color-text); }





.mbo-tri-meta { font-size: var(--font-size-xs); line-height: var(--lh-base); color: var(--color-text-muted); }




.mbo-tri-auszug { font-size: var(--font-size-xs); line-height: var(--lh-base); color: var(--color-text-secondary); }




.mbo-tri-vorschlaege {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}










.mbo-tri-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: var(--surface-border);
}






.mbo-tri-sprung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: 32px;
  padding-left: var(--space-1-5);
  padding-right: var(--space-1-5);
  margin-left: var(--space-1);
}




.mbo-tri-sprung-leer { visibility: hidden; pointer-events: none; }














.mbo-root .mbo-tri-chip {
  max-width: 12rem;
  border-color: var(--lod-darkblue-200);
  color: var(--lod-darkblue);
}
.mbo-root .mbo-tri-chip:hover {
  background: var(--lod-darkblue-50);
  border-color: var(--lod-darkblue-400);
  color: var(--lod-darkblue);
}





.mbo-root .mbo-tri-vorschlaege:has(> .mbo-tri-chip:only-of-type) .mbo-tri-chip { max-width: 20rem; }
.mbo-tri-chip-text { min-width: 0; }





.mbo-tri-sammel-wirt:empty { display: none; }
.mbo-tri-sammel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--surface-radius);
  background: var(--color-bg-subtle);
}
.mbo-tri-sammel-zahl {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}


.mbo-tri-sammel-spacer { flex: 1 1 auto; }





.mbo-tri-leer { padding: var(--space-6) 0; }
.mbo-tri-riegel { margin-top: 0; }
.mbo-tri-riegel p { margin: 0; }
.mbo-tri-riegel p + p { margin-top: var(--space-1); }
.mbo-tri-gekappt {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}





.mbo-zu-gegenstand { font-weight: var(--fw-medium); color: var(--color-text); }




.mbo-zu-label {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.mbo-zu-hinweis {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}












.mbo-spalten {
  display: grid;
  








  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.mbo-haupt {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}























@media (min-width: 1000px) {
  .mbo-haupt .set-row { --set-label: 176px; }
}






.mbo-spalten--nur-auskunft { grid-template-columns: minmax(0, 1fr); }





.mbo-kanal { min-width: 0; }
.mbo-kanal-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mbo-kanal-titel {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  min-width: 0;
}
.mbo-kanal-was {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 70ch;
}







.mbo-kanal-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.mbo-kanal-aktion-hinweis {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  

  flex: 1 1 24ch;
  min-width: 24ch;
}









.mbo-sperre {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.mbo-sperre-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mbo-sperre-titel {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  min-width: 0;
}
.mbo-sperre-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 70ch;
}





.mbo-hinweis {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border-hover);
  padding: var(--space-1) var(--space-2);
}




.mbo-geplant {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.mbo-geplant-label {
  font-size: var(--font-size-sm);
  
  color: var(--color-text-tertiary);
}










.mbo-sig {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.mbo-sig-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.mbo-sig-titel {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}



.mbo-sig-wahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 11rem));
  gap: var(--space-2);
}
.mbo-sig-satz {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}


.mbo-sig-satz--leise { color: var(--color-text-muted); }



.mbo-sig-melden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-1);
}












.mbo-sig-buehne {
  max-width: 100%;
  overflow: auto;
}
.mbo-sig-rahmen {
  width: 100%;
  height: 15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--surface-radius);
  background: #fff;
  

  display: block;
}








.mbo-tz {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  


  padding: var(--space-4) var(--space-5);
}
.mbo-tz-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.mbo-tz-h {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.mbo-tz-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.mbo-tz-zeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}
.mbo-tz-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mbo-tz-wert {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
.mbo-tz-ul {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}




@media (max-width: 1399px) {
  #mb-outlook-content .mbv-body { max-width: none; }
  

  .mbo-spalten { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--space-4); }
}





@media (max-width: 999px) {
  















  .mbo-tri-actions .btn,
  .mbo-tri-sprung {
    display: inline-flex; align-items: center;
    min-height: var(--touch-ziel);
  }
  


  .mbo-tri-sprung { min-width: var(--touch-ziel); }
  








     ★★ JEDE ZELLE WIRD EXPLIZIT GESETZT, und das ist keine Umständlichkeit. Ein
     einzelnes `grid-column` auf den Chips reicht NICHT: die Automatik legt den Knoten
     dann in die erste Zeile, in der diese Spalten frei sind — also unter den Text —
     und der Cursor der Automatik steht danach hinter ihm, sodass die Knopfspur eine
     DRITTE Zeile aufmacht statt neben dem Betreff zu bleiben. Gemessen bei 820px:
     Zeilen mit Vorschlag wurden 159px hoch, der Betreff rutschte in die Mitte und
     die zwei Entscheidungen standen allein unter der Karte. Mit Zeile UND Spalte an
     jeder der vier Zellen gibt es keine Automatik, die etwas anders einsortieren
     könnte. */
  .mbo-tri-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mbo-tri-check { grid-column: 1; grid-row: 1; }
  .mbo-tri-text { grid-column: 2; grid-row: 1; }
  .mbo-tri-actions { grid-column: 3; grid-row: 1; }
  .mbo-tri-vorschlaege {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  
  .mbo-root .mbo-tri-chip { max-width: 100%; }
  



  .mbo-tri-vorschlaege:empty { display: none; }
  .mbo-spalten { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mbo-haupt { order: 0; }
  .mbo-root { gap: var(--space-4); }
  

  .mbo-ident-zustand { width: 100%; }
}


@media (max-width: 599px) {
  .mbo-root { gap: var(--space-3); }
  .mbo-ident { padding: var(--space-3); }
  .mbo-tz,
  .mbo-sig,
  .mbo-haupt { padding: var(--space-3); }
  


  .mbo-sig-wahl { grid-template-columns: minmax(0, 1fr); width: 100%; }
  
  .mbo-sig-rahmen { height: 12rem; }
  



  


  .mbo-tri-item {
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--space-3);
    row-gap: var(--space-2);
  }
  .mbo-tri-vorschlaege,
  .mbo-tri-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  


  .mbo-tri-vorschlaege { grid-row: 2; }
  .mbo-tri-actions { grid-row: 3; }
  

  .mbo-tri-actions { padding-left: 0; border-left: none; }
  


  .mbo-tri-sprung { margin-left: auto; }
  


}

/*== /styles/sections/einstellungen/einstellungen-outlook-addin.css ==*/







.oad-root { display: flex; flex-direction: column; gap: var(--space-2); }
.oad-karte { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }


.oad-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.oad-name { font-weight: 600; color: var(--color-text); min-width: 0; overflow-wrap: anywhere; }
.oad-titel { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--color-text); }


.oad-fakten { margin: 0; display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-1) var(--space-3); }
.oad-fakt { display: contents; }
.oad-fakt dt { margin: 0; font-size: var(--fs-meta); color: var(--color-text-secondary); }
.oad-fakt dd { margin: 0; font-size: var(--fs-meta); color: var(--color-text); overflow-wrap: anywhere; min-width: 0; }
.oad-schritte { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text); }


.oad-detail { margin: 0; font-size: var(--fs-meta); color: var(--color-text-secondary); }


.oad-aktiv[data-oad-aktiv="1"] { color: var(--color-text); }
.oad-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 999px) {
  

  .oad-aktionen .btn { display: inline-flex; min-height: var(--touch-ziel); }
}
@media (max-width: 599px) {
  

  .oad-fakten { grid-template-columns: minmax(0, 1fr); }
  .oad-aktionen { flex-direction: column; align-items: stretch; }
  .oad-aktionen .btn { justify-content: center; }
}