.guidesHero {
  grid-template-columns: minmax(0, 1fr);
}

.guidesHero > div {
  max-width: 900px;
}

.guidesHeroSearch {
  margin-top: 28px;
}

/* Decorative hero illustration, desktop only. */
.guidesHeroArt {
  justify-self: end;
  align-self: center;
  width: 100%;
  max-width: 300px;
  height: auto;
}

@media (min-width: 941px) {
  .guidesHero {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
    align-items: center;
  }
}

@media (max-width: 940px) {
  .guidesHeroArt {
    display: none;
  }
}

.guidesSearchLabel {
  display: block;
  margin-bottom: 9px;
  color: var(--legal-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guidesSearchBox {
  position: relative;
  width: min(760px, 100%);
}

.guidesSearchBox::before {
  content: "⌕";
  position: absolute;
  top: 50%;
  left: 17px;
  color: var(--legal-mint);
  font-size: 24px;
  transform: translateY(-52%);
}

.guidesSearchBox input {
  width: 100%;
  min-height: 56px;
  border: 1px solid rgba(109, 145, 255, 0.42);
  border-radius: 13px;
  outline: none;
  background: rgba(3, 13, 25, 0.86);
  color: var(--legal-text);
  padding: 0 54px;
  font-size: 15px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
}

.guidesSearchBox input:focus {
  border-color: var(--legal-mint);
  box-shadow: 0 0 0 3px rgba(102, 214, 191, 0.12);
}

.guidesSearchBox kbd {
  position: absolute;
  top: 50%;
  right: 14px;
  border: 1px solid var(--legal-line);
  border-radius: 6px;
  background: #071524;
  color: #7e95b1;
  padding: 5px 7px;
  font: 700 9px/1 system-ui, sans-serif;
  transform: translateY(-50%);
}

.guidesLibrary {
  margin-top: 28px;
}

.guidesLibraryHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 13px;
}

.guidesLibraryHead h2 {
  margin: 0;
  font-family: var(--font-display), var(--font-geist-mono), "Segoe UI", sans-serif;
  font-size: 22px;
}

.guidesCount {
  color: var(--legal-mint);
  font-size: 11px;
  font-weight: 900;
}

.guidesGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* An element carrying [hidden] must stay hidden: the display rules below would
   otherwise beat the user-agent [hidden] rule and break the search filter. */
.guidesGrid [hidden] {
  display: none !important;
}

.guideCard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--legal-line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10, 27, 46, 0.78), rgba(4, 15, 27, 0.94));
  padding: 20px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.guideCard::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 214, 191, 0.55), transparent);
}

.guideCard:hover,
.guideCard:focus-within {
  border-color: var(--legal-line-strong);
  transform: translateY(-2px);
}

.guideCardCategory {
  display: block;
  margin-bottom: 11px;
  color: var(--legal-mint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guideCard h3 {
  margin: 0 0 10px;
  font-family: var(--font-display), var(--font-geist-mono), "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.3;
}

.guideCard h3 a {
  color: var(--legal-text);
  text-decoration: none;
}

.guideCard h3 a:hover,
.guideCard h3 a:focus-visible {
  color: #9af2df;
}

.guideCard > p {
  margin: 0 0 14px;
  color: var(--legal-muted);
  font-size: 14px;
  line-height: 1.65;
}

.guideCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.guideCardTags li {
  border: 1px solid rgba(129, 159, 198, 0.24);
  border-radius: 999px;
  background: rgba(6, 19, 34, 0.7);
  color: #91a8c2;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
}

.guideCardFoot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(118, 151, 191, 0.16);
  color: #7e95b1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.guideCardLink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-top: 12px;
  border: 1px solid rgba(109, 145, 255, 0.38);
  border-radius: 9px;
  background: rgba(16, 39, 68, 0.7);
  color: #cfe0f5;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.guideCardLink::after {
  content: "→";
  color: var(--legal-mint);
}

.guideCardLink:hover,
.guideCardLink:focus-visible {
  border-color: var(--legal-mint);
  color: #fff;
}

/* ------------------------------------------------------------ guide page */

.guideHero {
  grid-template-columns: minmax(0, 1fr);
}

.guideHero > div {
  max-width: 940px;
}

.guideHero .legalHeroMeta .isLive {
  gap: 7px;
}

.guideHeroMark {
  position: absolute;
  z-index: 1;
  top: 34px;
  right: 40px;
  display: grid;
  gap: 7px;
  justify-items: end;
  border-right: 1px solid rgba(102, 214, 191, 0.3);
  padding-right: 15px;
  text-align: right;
}

.guideHeroMark b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(102, 214, 191, 0.4);
  border-radius: 11px;
  background: rgba(102, 214, 191, 0.08);
  color: var(--legal-mint);
  font-family: var(--font-geist-mono), monospace;
  font-size: 13px;
  font-weight: 900;
}

.guideHeroMark span {
  color: #55708f;
  font-family: var(--font-geist-mono), monospace;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.14em;
}

.guideFacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.guideFact {
  border: 1px solid var(--legal-line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10, 27, 46, 0.72), rgba(4, 15, 27, 0.9));
  padding: 18px;
}

.guideFact span {
  display: block;
  margin-bottom: 9px;
  color: var(--legal-mint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guideFact b {
  display: block;
  margin-bottom: 7px;
  color: #e6f0fc;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.guideFact b a {
  color: inherit;
  text-decoration-color: rgba(90, 234, 203, 0.62);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.guideFact b a:hover,
.guideFact b a:focus-visible {
  color: var(--legal-mint);
}

.guideFact p {
  margin: 0;
  color: var(--legal-muted);
  font-size: 13px;
  line-height: 1.6;
}

.legalV2Layout {
  margin-top: 22px;
}

.guideSteps {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}

.guideStep {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid rgba(117, 150, 190, 0.2);
  border-radius: 12px;
  background: rgba(11, 29, 49, 0.6);
  padding: 16px;
}

.guideStepNum {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(102, 214, 191, 0.34);
  border-radius: 10px;
  background: rgba(102, 214, 191, 0.07);
  color: var(--legal-mint);
  font-family: var(--font-geist-mono), monospace;
  font-size: 11px;
  font-weight: 900;
}

.legalSection .guideStep h3 {
  margin: 3px 0 7px;
  font-size: 16px;
}

.legalSection .guideStep p {
  margin: 0;
  font-size: 15px;
}

.guideChecklist {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.legalSection .guideChecklist li {
  position: relative;
  margin: 0;
  border: 1px solid var(--legal-line);
  border-radius: 11px;
  background: rgba(7, 21, 36, 0.7);
  padding: 13px 15px 13px 48px;
}

.guideChecklist li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--legal-line-strong);
  border-radius: 5px;
  background: rgba(102, 214, 191, 0.06);
}

.guideChecklist li::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 20px;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--legal-mint);
  border-left: 2px solid var(--legal-mint);
  transform: rotate(-45deg);
}

.guideChecklist b {
  display: block;
  margin-bottom: 4px;
  color: #e0eaf6;
  font-size: 15px;
}

.guideChecklist span {
  display: block;
  color: var(--legal-muted);
  font-size: 14px;
  line-height: 1.6;
}

.guideFaq {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.guideFaq details {
  overflow: hidden;
  border: 1px solid var(--legal-line);
  border-radius: 12px;
  background: rgba(7, 21, 36, 0.72);
}

.guideFaq details[open] {
  border-color: var(--legal-line-strong);
}

.guideFaq summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
}

.guideFaq summary::-webkit-details-marker {
  display: none;
}

.guideFaq summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  color: var(--legal-mint);
  font-family: var(--font-geist-mono), monospace;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

.guideFaq details[open] summary::after {
  content: "–";
}

.guideFaq summary:focus-visible {
  outline: 2px solid var(--legal-mint);
  outline-offset: -3px;
}

.legalSection .guideFaq summary h3 {
  margin: 0;
  color: #dbe7f6;
  font-size: 16px;
  line-height: 1.45;
}

.guideFaq details > div {
  padding: 0 16px 15px;
}

.legalSection .guideFaq details > div p {
  margin: 0;
  font-size: 15px;
}

.guideSources {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.legalSection a.guideSource {
  display: block;
  border: 1px solid var(--legal-line);
  border-radius: 12px;
  background: rgba(7, 21, 36, 0.7);
  padding: 13px 15px;
  text-decoration: none;
}

.legalSection a.guideSource:hover,
.legalSection a.guideSource:focus-visible {
  border-color: var(--legal-line-strong);
}

.guideSource b {
  display: block;
  color: #e6f0fc;
  font-size: 15px;
  line-height: 1.45;
}

.guideSource > span {
  display: block;
  margin-top: 5px;
  color: var(--legal-mint);
  font-family: var(--font-geist-mono), monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.guideSource small {
  display: block;
  margin-top: 6px;
  color: var(--legal-muted);
  font-size: 13px;
  line-height: 1.6;
}

.guideLangSection .legalSectionNumber {
  color: var(--legal-mint);
  font-size: 15px;
}

.guideLangs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.legalSection .guideLangs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid rgba(129, 159, 198, 0.26);
  border-radius: 999px;
  background: rgba(6, 19, 34, 0.72);
  color: #cfe0f5;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.legalSection .guideLangs a:hover,
.legalSection .guideLangs a:focus-visible {
  border-color: var(--legal-mint);
  color: #fff;
}

.guideBackLink {
  margin: 16px 0 0 !important;
  font-size: 13px !important;
}

@media (max-width: 940px) {
  .guideFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guideHeroMark {
    display: none;
  }
}

.guidesEmpty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed rgba(109, 145, 255, 0.34);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(10, 27, 46, 0.72), rgba(4, 15, 27, 0.88));
  padding: 34px;
  text-align: center;
}

.guidesEmptyMark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border: 1px solid var(--legal-line-strong);
  border-radius: 18px;
  color: var(--legal-mint);
  font-family: var(--font-display), monospace;
  font-size: 24px;
  font-weight: 900;
}

.guidesEmpty h3 {
  margin: 0 0 9px;
  font-family: var(--font-display), var(--font-geist-mono), "Segoe UI", sans-serif;
  font-size: 21px;
}

.guidesEmpty p {
  max-width: 590px;
  margin: 0;
  color: var(--legal-muted);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .guidesGrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .guidesGrid { grid-template-columns: 1fr; }
  .guidesSearchBox kbd { display: none; }
  .guidesSearchBox input { padding-right: 18px; }

  .guideFacts {
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .guideStep {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .legalSection .guideChecklist li,
  .legalSection .guideStep p,
  .guideChecklist span,
  .guideFact p,
  .guideCard > p,
  .guideSource small {
    font-size: 15px;
  }

  .guideFaq summary {
    padding: 13px 14px;
  }

  .guideLangs a {
    flex: 1 1 42%;
    justify-content: center;
  }
}

/* Wave 2 (16 Sep 2026): long single words in German and Dutch titles
   ("Entscheidungsbaum", "regelgevingsstatus") ran past the hero card at
   390 px. Let the browser hyphenate them per the page language and, failing
   that, break anywhere rather than overflow. Desktop widths are untouched. */
@media (max-width: 720px) {
  .guideHero h1,
  .guideCard h3 {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}