/* Zentrale FUCHS-Kopfzeile. Module liefern nur Namen, Akzent und optionale Kontextaktionen. */
.app-header{
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  color:#fff;
  background:#17212b;
  border-bottom:3px solid var(--module-accent,var(--blue,var(--ci-orange,var(--accent,#e45b35))));
}
.app-header,
.app-header *,
.app-header *::before,
.app-header *::after{box-sizing:border-box}
.app-header .header-inner{
  width:min(1080px,100%);
  min-height:76px;
  margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) 18px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.app-header .brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
}
.app-header .brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:8px 2px;
  color:#fff;
  background:var(--module-accent,var(--blue,var(--ci-orange,var(--accent,#e45b35))));
  box-shadow:none;
  font-size:23px;
  font-weight:900;
  line-height:1;
}
.app-header .brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.app-header .brand-copy>span{
  display:block;
  order:-1;
  margin:0 0 3px;
  color:#bdc7ce;
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}
.app-header .brand-copy strong{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:17px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.app-header .portal-header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex:none;
}
.app-header .portal-context-link,
.app-header .portal-home-link{
  min-height:44px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #667581;
  border-radius:8px;
  color:#fff;
  background:#303f4b;
  box-shadow:none;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}
.app-header .portal-context-link b{font:inherit}
.app-header .portal-context-link.is-icon-only{
  width:44px;
  padding:0;
}
.app-header .portal-context-link.is-icon-only b{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.app-header .portal-context-link:hover,
.app-header .portal-context-link:focus-visible,
.app-header .portal-home-link:hover,
.app-header .portal-home-link:focus-visible{
  border-color:#87939c;
  background:#3b4d5a;
  outline:none;
  transform:translateY(-1px);
}
.app-header .portal-profile-link{
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  color:#fff;
  background:#303c47;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-decoration:none;
}
.app-header .portal-profile-link:hover,
.app-header .portal-profile-link:focus-visible{
  border-color:var(--module-accent,var(--blue,var(--ci-orange,var(--accent,#e45b35))));
  background:var(--module-accent,var(--blue,var(--ci-orange,var(--accent,#e45b35))));
  outline:none;
}
.module-back-nav{
  width:min(1080px,100%);
  margin:0 auto;
  padding:14px 18px 0;
  box-sizing:border-box;
}
.module-back-nav a{
  width:max-content;
  max-width:100%;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#43515b;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
}
.module-back-nav a span{font-size:18px;line-height:1}
.module-back-nav a:hover,.module-back-nav a:focus-visible{
  color:var(--module-accent,var(--blue,var(--ci-orange,var(--accent,#176e80))));
  outline:none;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:620px){
  .app-header .header-inner{min-height:70px;padding:12px 14px;gap:10px}
  .app-header .brand-mark{width:42px;height:42px}
  .app-header .brand-copy>span{font-size:9px}
  .app-header .brand-copy strong{font-size:15px}
  .app-header .portal-header-actions{gap:6px}
  .app-header .portal-context-link{max-width:145px;padding:0 10px;overflow:hidden;text-overflow:ellipsis}
  .app-header .portal-context-link b{overflow:hidden;text-overflow:ellipsis}
  .app-header .portal-home-link{width:44px;padding:0;font-size:0}
  .app-header .portal-home-link::before{content:'⌂';font-size:18px}
  .app-header .portal-profile-link{width:42px;height:42px}
  .module-back-nav{padding:10px 14px 0}
}
@media(max-width:430px){
  .app-header .brand-mark{display:grid}
  .app-header .brand-copy{display:flex}
  .app-header .portal-home-link{display:none}
  .app-header .portal-context-link.has-icon{width:42px;padding:0;font-size:0}
  .app-header .portal-context-link.has-icon span{font-size:20px}
  .app-header .portal-context-link.has-icon b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}
@media(max-width:360px){
  body.area-portal .app-header .header-inner{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));gap:6px}
  .app-header .brand{gap:6px}
  .app-header .brand-mark{width:38px;height:38px}
  .app-header .brand-copy strong{font-size:14px}
  .app-header .portal-header-actions{gap:4px}
  .app-header .portal-context-link.is-icon-only,.app-header .portal-profile-link{width:36px;height:36px;min-height:36px}
}