/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--scrim);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  height: 34px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.main-nav__links {
  display: flex;
  gap: var(--space-4);
}

.main-nav__links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.main-nav__links a:hover {
  color: var(--color-text);
}

.main-nav__links a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.utility-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 38px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.icon-btn:hover {
  border-color: var(--color-accent);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.lang-toggle {
  gap: var(--space-1);
}

.lang-toggle__option {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-soft);
  font-weight: 700;
  font-size: 0.78rem;
}

.lang-toggle__option[aria-current="true"] {
  color: var(--color-bg);
  background: var(--color-accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

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

.btn-primary {
  background: var(--color-accent);
  color: #10231f;
}

.btn-primary:hover {
  background: var(--color-accent-light);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-outline:hover {
  border-color: var(--color-accent);
}

/* ==========================================================================
   Cards / grids
   ========================================================================== */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* Long compound words (e.g. "Investorenkommunikation") must wrap inside the
   card instead of overflowing: hyphenate where possible, break as a fallback. */
.card h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.pill-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-1) 0;
  color: var(--color-text-muted);
}

.pill-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ==========================================================================
   Process steps
   ========================================================================== */

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-top: var(--space-5);
}

/* When the steps sit side by side, reserve equal space for the description so
   every "Ziel:" line starts at the same height regardless of text length. */
@media (min-width: 700px) {
  .process-step p {
    min-height: 6.5rem;
  }

  /* Defence market-entry flow (leistungen.html) has no "Ziel:" line but its
     titles vary between one and two lines — reserve two lines so all
     descriptions start at the same height, and drop the description reserve. */
  [data-tab-panel] .process-step h3 {
    min-height: 3.25rem;
  }

  [data-tab-panel] .process-step p {
    min-height: 0;
  }
}

.process-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #10231f;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.process-step__goal {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* ==========================================================================
   Stat cards
   ========================================================================== */

.stat-card {
  text-align: center;
}

.stat-card__value {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.stat-card__label {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* ==========================================================================
   Team
   ========================================================================== */

.team-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.team-card__photo {
  flex: none;
  width: 120px;
  height: 150px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-accent);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-weight: 700;
  font-size: 1.05rem;
}

.team-card__role {
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   Tabs (Mittelstand / Defence)
   ========================================================================== */

.tabbar {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.tabbar__btn {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  min-height: 44px;
}

.tabbar__btn[aria-selected="true"] {
  background: var(--color-accent);
  color: #10231f;
}

.tab-panel[hidden] {
  display: none;
}

/* ==========================================================================
   Callout / notice banners
   ========================================================================== */

.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated-2);
  border: 1px solid var(--color-border);
}

.callout p {
  margin: 0;
}

.notice-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(94, 196, 192, 0.12);
  border: 1px dashed var(--color-accent);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   Inhalt -> Wirkung abstract graphic
   ========================================================================== */

.transform-graphic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

/* Mirror the two columns: "Inhalt" hugs the left edge, "Wirkung" hugs the right
   edge, so both sit an equal distance from the centred arrow. The block shrinks
   to its content and is pushed right, so heading + bullets stay left-aligned
   within the block (heading sits above the first bullet). */
.transform-graphic__col--after {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

.transform-graphic__col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}

.transform-graphic__col--before li {
  color: var(--color-text-soft);
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.transform-graphic__col--after li {
  color: var(--color-text);
  font-weight: 600;
}

.transform-graphic__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #10231f;
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0 var(--space-4);
  margin-top: var(--space-7);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.site-footer__brand img {
  height: 28px;
  margin-bottom: var(--space-3);
}

.site-footer__brand p {
  font-size: 0.9rem;
  max-width: 260px;
}

.site-footer h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}

.site-footer__links li {
  margin-bottom: var(--space-2);
}

.site-footer__links a {
  color: var(--color-text-muted);
}

.site-footer__links a:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .main-nav__links {
    position: fixed;
    inset: 64px var(--space-4) auto var(--space-4);
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-card);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .main-nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .team-card {
    flex-direction: column;
  }

  /* On stacked (mobile) layout the full-width photo looked distorted — hide it
     and keep just the name, role and credentials. */
  .team-card__photo {
    display: none;
  }

  .transform-graphic {
    grid-template-columns: 1fr;
  }

  .transform-graphic__col--after {
    width: auto;
    margin-left: 0;
  }

  .transform-graphic__arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }
}