/* ==========================================================================
   Cubica IT — brand layer on top of Quark 2
   Accent green #4EA836 comes from the theme accent-color config; here we add
   the brand details: logo light/dark swap, the
   cube-hero tiles, the team grid and small content tweaks.
   ========================================================================== */

/* --- Type ---------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

h2 {
  font-weight: 700;
  margin-top: 2.2em;
}

h3 {
  font-weight: 600;
}

.lead, h1 + p {
  font-size: 1.15em;
  opacity: 0.85;
  max-width: 46em;
}

/* --- Header / logo ------------------------------------------------------- */

.navbar-brand img {
  height: 34px;
  width: auto;
  display: block;
}

/* Light wordmark on light backgrounds … */
.navbar-brand .logo-dark,
.mobile-logo .logo-dark {
  display: none !important;
}
.navbar-brand .logo-light,
.mobile-logo .logo-light {
  display: block !important;
}

/* … white wordmark on dark backgrounds. */
html[data-theme="dark"] .navbar-brand .logo-light,
html[data-theme="dark"] .mobile-logo .logo-light,
body.header-dark .navbar-brand .logo-light,
body.header-dark .mobile-logo .logo-light {
  display: none !important;
}
html[data-theme="dark"] .navbar-brand .logo-dark,
html[data-theme="dark"] .mobile-logo .logo-dark,
body.header-dark .navbar-brand .logo-dark,
body.header-dark .mobile-logo .logo-dark {
  display: block !important;
}

/* Navigation theme colors: guard against black-on-black in dark mode */
body.header-light:not(.header-transparent) #header .dropmenu > ul > li > a:not(.active),
html[data-theme="dark"] body.header-light #header .dropmenu > ul > li > a:not(.active) {
  color: var(--q2-text-strong);
}
body.header-light:not(.header-transparent) #header .navbar-brand,
html[data-theme="dark"] body.header-light #header .navbar-brand,
body.header-light:not(.header-transparent) #header .theme-toggle,
html[data-theme="dark"] body.header-light #header .theme-toggle {
  color: var(--q2-text-strong);
}

/* --- Language switcher ---------------------------------------------------- */

.lang-switch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.lang-switch a {
  display: inline-block;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--pico-font-family-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.lang-switch a:hover {
  opacity: 1;
  background: color-mix(in oklab, var(--q2-accent) 12%, transparent);
  color: var(--q2-accent);
}

/* --- Cube hero ------------------------------------------------------------ */

.cube-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 3rem;
}

.cube-hero-tile {
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  background: var(--pico-card-background-color, var(--q2-surface));
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}

.cube-hero-tile img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  align-self: flex-start;
  margin-bottom: auto;
}

.tile-accent {
  background: var(--q2-accent);
  color: #fff;
  border-color: transparent;
}

.cube-hero-tagline {
  font-family: var(--pico-font-family-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

.cube-hero-num {
  font-family: var(--pico-font-family-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--q2-accent);
}

.cube-hero-label {
  font-size: 0.9rem;
  opacity: 0.75;
}

.cube-hero-label-strong {
  font-family: var(--pico-font-family-display);
  font-weight: 700;
  font-size: 1.1rem;
}

@media (max-width: 720px) {
  .cube-hero {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Team ----------------------------------------------------------------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.team-card {
  border-radius: 14px;
  padding: 1.5rem;
  background: var(--pico-card-background-color, var(--q2-surface));
  border: 1px solid color-mix(in oklab, currentColor 10%, transparent);
}

.team-card .team-name {
  margin: 0.9rem 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.team-card .team-role {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--q2-accent);
  font-family: var(--pico-font-family-display);
}

.team-card .team-bio {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.85;
  line-height: 1.55;
}

.team-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.team-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  font-family: var(--pico-font-family-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--q2-accent), color-mix(in oklab, var(--q2-accent) 60%, #17151A));
}

/* --- Content tweaks ------------------------------------------------------- */

/* Industry lists read better as one flowing line with separators. */
p:has(> span[hidden]) {
  display: none;
}

/* CTA-style links in content */
a:only-child {
  text-decoration: none;
  font-weight: 600;
}

/* Imprint / DSGVO blocks */
#datenschutz, #data-protection {
  scroll-margin-top: 90px;
}

/* Footer */
#footer p {
  font-size: 0.85rem;
  opacity: 0.7;
}