/* Canonical public chrome for digitalisierungsplanung.de + subdomains.
   Loaded by shared-theme.js so all product repos inherit the same shell behavior. */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:68px;
  border-bottom:1px solid var(--line,#e2e8f0);
  background:rgba(252,252,253,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-header :is(.container,.shell,.bar,.header-row){
  width:min(1440px,calc(100% - 48px));
  max-width:none;
  min-height:68px;
  margin-inline:auto;
}
.site-header :is(.container,.shell,.bar,.header-row):not(.account-nav){
  display:flex;
  align-items:center;
  gap:24px;
}
.site-header .brand-link,
.site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex:0 0 auto;
  min-width:0;
  color:var(--text,#0f172a);
  text-decoration:none;
  font-weight:750;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.site-header .brand-link .brand-mark{width:28px;height:28px;flex:0 0 28px}
.site-header .brand-link > span > span,
.site-header .brand > span{color:var(--dim,#64748b);font-weight:450}
.site-header nav{min-width:0}
.site-header .nav-menu{flex-wrap:nowrap}
.site-header .nav-link{white-space:nowrap}
.site-header .account-nav{margin-left:auto}

.site-footer{
  padding:40px 0;
  border-top:1px solid var(--line,#e2e8f0);
  background:var(--paper,#fff);
}
.site-footer :is(.container,.shell,.wrap){
  width:min(1440px,calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
}
.site-footer .footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  color:var(--dim,#64748b);
  font-size:.84rem;
}
.site-footer .footer-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 18px;
}
.site-footer .footer-links a{
  color:var(--muted,#475569);
  text-decoration:none;
}
.site-footer .footer-links a:hover{color:var(--text,#0f172a)}

/* Shared table treatment, including server-rendered account/admin surfaces. */
.dp-table-wrap,
.table-wrap{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
html[data-dp-theme="dark"] :is(table,.table-wrap,.dp-table-wrap){border-color:var(--line,#1f3b5c)!important}
html[data-dp-theme="dark"] table{color:var(--text,#e5f0ff)!important;background:var(--paper,#0b1729)!important}
html[data-dp-theme="dark"] th{background:var(--soft,#0b1b2a)!important;color:var(--muted,#9fb6cc)!important;border-color:var(--line,#1f3b5c)!important}
html[data-dp-theme="dark"] td{color:var(--text,#e5f0ff)!important;border-color:var(--line,#1f3b5c)!important}
html[data-dp-theme="dark"] tr{border-color:var(--line,#1f3b5c)!important}

/* Avoid the desktop crunch zone: once brand + nav + authenticated account
   no longer fit side by side, drop only the marketing nav. Account controls stay
   intact and the same rule applies to root + all product subdomains. */
@media(max-width:1180px){
  .site-header :is(.container,.shell,.bar,.header-row){gap:14px}
  .site-header nav:has(.nav-menu){display:none!important}
  .site-header .nav-menu{display:none!important}
  .site-header .account-nav{
    margin-left:auto!important;
    min-width:0!important;
  }
}

/* Compact authenticated header. This starts before the old 820px cutoff so the
   e-mail, CTA, logout and theme control can never collide on tablet/narrow desktop. */
@media(max-width:920px){
  .site-header{min-height:62px}
  .site-header :is(.container,.shell,.bar,.header-row){
    width:min(100% - 28px,1440px);
    min-height:62px;
    gap:10px;
  }
  .site-header nav:has(.nav-menu){display:none}
  .site-header .nav-menu{display:none!important}
  .site-header .brand-link > span,
  .site-header .brand-wordmark,
  .site-header .brand > span{display:none!important}
  .site-header .brand-link,
  .site-header .brand{gap:0;max-width:36px}
  .site-header .account-nav{
    margin-left:auto;
    flex:1 1 auto;
    width:auto;
    max-width:none;
    grid-template-columns:minmax(0,1fr) 0 74px 38px!important;
    gap:6px!important;
  }
  .site-header .account-nav [data-account-identity],
  .site-header .account-nav .account-identity{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:right;
    font-size:.8rem!important;
    line-height:1.2;
  }
  .site-header .account-nav [data-account-primary],
  .site-header .account-nav .header-primary{display:none!important}
  .site-header .account-nav [data-account-logout]{min-width:0;padding-inline:7px;font-size:.78rem}
  .site-header .dp-theme-toggle{width:36px;height:36px;min-width:36px;min-height:36px}

  .site-footer{padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
  .site-footer :is(.container,.shell,.wrap){width:min(100% - 32px,1440px)}
  .site-footer .footer-row{display:block;font-size:.82rem}
  .site-footer .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-top:16px}
  .site-footer .footer-links a{min-height:34px;display:flex;align-items:center}
}

@media(max-width:700px){
  .site-header .brand-link > span,
  .site-header .brand-wordmark,
  .site-header .brand > span{display:none!important}
  .site-header .brand-link,
  .site-header .brand{gap:0;max-width:36px}
}

@media(max-width:520px){
  .site-header :is(.container,.shell,.bar,.header-row){width:min(100% - 20px,1440px)}
  .site-header .account-nav{grid-template-columns:minmax(0,1fr) 0 68px 36px!important}
  .site-header .account-nav [data-account-logout]{font-size:0;width:36px;padding:0}
  .site-header .account-nav [data-account-logout]::before{content:"↪";font-size:1rem}
  .site-footer .footer-links{grid-template-columns:1fr 1fr}
}