Header

Änderungsprotokolle User, Suchen, Markierungen

                
                
                    
<div class="stg-grid_2_col_header" style="align-items: center;">
    <div class="stg-header_grid_elemente">
        <div>
            <img src="./images/logo_zugangsverwaltung.png" alt="Logo Zugangsverwaltung">
        </div>
        <span class="stg-fliesstext_14 stg-cp" style="margin-right: 40px">Änderungsprotokolle</span>
        <span class="stg-fliesstext_14 stg-cp">
            User, Suchen, Markierungen
        </span>
        <button type="button" class="stg-header_buttons stg-header_outline_btn_orange stg-cp">Exports und Abfragen</button>
        <button type="button"class="stg-header_buttons stg-btn_orange stg-cp" style="display: flex; align-items: center;">
            <img src="./images/icon_plus_without_border.png" alt="" class="stg-pr_5"/>
            Neuen Kunden anlegen
        </button>
        <a href="##">
            <svg style="width:20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="#fff" d="M569 337C578.4 327.6 578.4 312.4 569 303.1L425 159C418.1 152.1 407.8 150.1 398.8 153.8C389.8 157.5 384 166.3 384 176L384 256L272 256C245.5 256 224 277.5 224 304L224 336C224 362.5 245.5 384 272 384L384 384L384 464C384 473.7 389.8 482.5 398.8 486.2C407.8 489.9 418.1 487.9 425 481L569 337zM224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160z"/></svg>
        </a>
    </div>
</div>

                
                
                    
.stg-grid_2_col_header {
  background-color: var(--grau_1);    
}

.stg-header_grid_elemente {
  gap: 30px; 
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  font-weight: 400;
  color: var(--weiss);
  font-size: 16px;
  letter-spacing: 2px;
  padding: 20px 5px;
}

.stg-fliesstext_14 {
  font-weight: 400;
  font-size: 14px;
}

.stg-cp {
  cursor: pointer;
}

.stg-header_buttons {
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 30px;
  padding: 20px 28px;
}

.stg-header_outline_btn_orange {
  border: 2px solid var(--orange);
  margin-right: 5px;
  background-color: var(--grau1);
  color: var(--weiss);
}

.stg-btn_orange {
  border: 2px solid var(--orange);
  background-color: var(--orange);
  color: var(--grau_1);
}

/* Hover-Zustand */
.stg-btn_orange:hover {
  border-color: #d98800;
}

/* Aktiver (Klick-)Zustand */
.stg-btn_orange:active {
  background-color: #d98800;
  border-color: #d98800;
}

.stg-pr_5 {
  padding-right: 5px;
}

#header #headerelement #header fullsize #headerbanner #header logo