/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  position: relative;
  padding-top: 38px;
  background: transparent;
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  box-shadow: 1px 1px 5px rgba(0,0,0,0.15);
  border-radius: 40px;
  width: calc(100% - 160px); /* 80px Aussenrand links + rechts */
  max-width: 1760px; /* Rahmen stoppt bei Viewport 1920px */
  margin: 0 auto;
  padding: 0 38px;
  height: 127px;
}

/* --- Logo --- */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: 32px;
  width: auto;
}

/* --- Nav --- */
.header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item {
  display: inline-block;                 /* inline-block, damit text-box-trim greift */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  padding: 18px 27px;                    /* symmetrisch statt 14/12 — Trim zentriert optisch */
  border: 2px solid transparent;
  border-radius: 20px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
  font-size: 34px;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.nav-item:hover {
  border-color: var(--color-black);
}

.nav-item.is-active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}


/* ============================================================
   MEGA MENU
   ============================================================ */

.mega-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.mega-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Overlay backgrounds — auf .mega-menu selbst damit y=0 sicher farbig */
.mega-menu[data-overlay="project"] { background: var(--taldis-project-menu); }
.mega-menu[data-overlay="print"]   { background: var(--taldis-print-menu); }
.mega-menu[data-overlay="beige"]   { background: var(--taldis-beige-menu); }

.mega-menu__overlay {
  padding-top: 38px;
  padding-bottom: 60px;
}

/* Header bar inside mega menu — identisch zum Hauptbalken */
.mega-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  box-shadow: 1px 1px 5px rgba(0,0,0,0.15);
  border-radius: 40px;
  width: calc(100% - 160px);
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 38px;
  height: 127px;
}

.mega-menu__bar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mega-menu__bar-logo img {
  height: 32px;
  width: auto;
}

.mega-menu__bar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Content area — gleicher Aussenrand wie Balken (80px), stoppt bei 1920px */
.mega-menu__content {
  max-width: 1920px;
  margin: 40px auto 0;
  padding: 0 80px;
}

/* Masonry: Position/Breite der Kacheln setzt das JS (rechtsbündig, zeilenweise rechts→links) */
.mega-menu__grid {
  position: relative;
}
.mega-menu__card,
.mega-menu__panel {
  box-sizing: border-box;
}

/* Login-Panel — gleiche Grösse und Optik wie eine Card */
.mega-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-white);
  border-radius: 22px;
  padding: 30px;
  transition: background 0.2s;
}

/* Felder-Gruppe: 14px zwischen Inputs und Button */
.mega-menu__panel-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Login-Kachel ist kein Link → kein Hover-Dim (Felder & Button bleiben ausgespart) */

/* Spacer für Menus ohne Panel — schiebt Cards nach rechts */
.mega-menu__panel-spacer {
  /* 1 Spalte = Über uns: spacer + 3 cards = 4 */
}

.mega-menu__panel-spacer--wide {
  grid-column: span 3;
}

.mega-menu__panel-logo img {
  height: 32px;
  width: auto;
}

/* Cards werden direkte Grid-Kinder via display:contents */
.mega-menu__cards {
  display: contents;
}

/* Jede Card: 1 Grid-Spalte */
.mega-menu__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  background: var(--color-white);
  border-radius: 22px;
  text-decoration: none;
  color: var(--color-black);
  transition: background-color 0.2s ease;
}

/* Hover: Kachel bekommt eine deckende 8%-Aufhellung + Marker-Farbe je Overlay */
.mega-menu[data-overlay="project"] .mega-menu__card { --title-marker: var(--taldis-project-hover); }
.mega-menu[data-overlay="print"]   .mega-menu__card { --title-marker: var(--taldis-print-hover); }
.mega-menu[data-overlay="beige"]   .mega-menu__card { --title-marker: var(--taldis-beige-hover); }
.mega-menu[data-overlay="project"] .mega-menu__card:hover { background: var(--taldis-project-tint); }
.mega-menu[data-overlay="print"]   .mega-menu__card:hover { background: var(--taldis-print-tint); }
.mega-menu[data-overlay="beige"]   .mega-menu__card:hover { background: var(--taldis-beige-tint); }

/* Leading nur an den Aussenkanten wegschneiden → optisches Padding = echte 30px,
   innerer Abstand bleibt natürlich (generisch über Erst-/Letzt-/Einziges-Kind) */
.mega-menu__card > :first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.mega-menu__card > :last-child  { text-box-trim: trim-end;   text-box-edge: cap alphabetic; }
.mega-menu__card > :only-child  { text-box-trim: trim-both; }

/* Read-More-Links in der Kachel */
.mega-menu__card-links {
  display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
  margin-top: 4px;
}

.mega-menu__card-title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 28px;
  line-height: 1.2;
}

/* Titel bekommt beim Hover über die Kachel den read-more-Marker (Höhe 0.7em, skaliert mit Schrift) */
.mega-menu__card-title span {
  background-image: linear-gradient(var(--title-marker, transparent), var(--title-marker, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0;
  padding-bottom: 2px;                        /* schafft Platz, damit der Balken 2px tiefer sitzt */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.2s ease;
}
.mega-menu__card:hover .mega-menu__card-title span { background-size: 100% calc(0.7em - 3px); }  /* 3px dünner */

.mega-menu__card-text {
  font-family: var(--font-family);
  font-weight: var(--font-weight-thin);
  font-size: 20px;
  line-height: 1.4;
}