:root{
  /* Brand (aus dem Logo) */
  --brand: #0086AE;
  --brand-hover: #006B8A;
  --brand-soft: rgba(0,134,174,.10);

  /* Neutrals */
  --text: #1C1F23;
  --muted: #5F6B7A;
  --border: #E3E8EF;

  /* Layout */
  --header-h: 72px;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ================== HEADER ================== */
.ibk-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--border);
  font-family: var(--font);
}

.ibk-header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;

  /* volle Breite */
  max-width: none;
  margin: 0;
  padding: 0 12px;
}

/* Logo links */
.ibk-brand{
  order: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ibk-brand img{
  height: 42px;
  width: auto;
  display: block;
}

/* NAV links */
.header-nav-container{
  order: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-actions{
  order: 3;                 /* ganz am Ende */
  display: flex;
  align-items: center;
  margin-left: auto;        /* nach ganz rechts schieben */
  gap: 8px;
}
/* Titel mittig */
.ibk-header-title{
  order: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.ibk-header-title span{
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================== HEADER BUTTONS (Ghost) ================== */
.header-btn{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);

  padding: 10px 12px;
  border-radius: 10px;

  font-size: .95rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;

  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}

.header-btn:hover{
  background: var(--brand-soft);
  border-color: rgba(0,134,174,.18);
  color: var(--brand-hover);
}

.header-btn:active{
  transform: translateY(1px);
}

/* aktive Seite */
.header-btn.is-active{
  background: rgba(0,134,174,.14);
  border-color: rgba(0,134,174,.28);
  color: var(--brand-hover);
}

/* Logout */
.header-btn.is-danger{
  color: #9B1C1C;
}
.header-btn.is-danger:hover{
  background: rgba(155,28,28,.08);
  border-color: rgba(155,28,28,.18);
  color: #7A1414;
}

/* ================== DROPDOWN ================== */
.dropdown{
  position: relative;
  display: inline-flex;
}

/* Caret */
.dropdown > .header-btn::after{
  content: "▾";
  font-size: .85em;
  opacity: .75;
  margin-left: 2px;
}

/* Hover-Brücke gegen “zuklappen beim rüberfahren” */
.dropdown::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.dropdown-content{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  left: 0;

  min-width: 220px;
  padding: 6px;

  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);

  overflow: hidden; /* damit Hover nicht “breiter” wirkt */
  z-index: 2000;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{
  display:block;
}

.dropdown-content .header-btn{
  width: 100%;
  justify-content: flex-start;

  padding: 10px 10px;
  border: 0 !important;
  border-radius: 10px;

  background: transparent;
  color: var(--text);
}

.dropdown-content .header-btn:hover{
  background: var(--brand-soft);
  color: var(--brand-hover);
}

/* Responsive */
@media (max-width: 860px){
  .ibk-header-title{ display:none; }
  .ibk-brand img{ height: 38px; }
}