.main-navigation { display: flex; gap: 5px; width: fit-content; max-width: 100%; margin: 28px auto 0; padding: 5px; border: 1px solid #e7e5dc; border-radius: 16px; background: #eeede7; }
.main-navigation a { min-height: 46px; display: grid; place-items: center; padding: 10px 22px; border-radius: 11px; color: #646b64; font-weight: 650; font-size: 15px; text-decoration: none; }
.main-navigation a[aria-current="page"] { background: #fffefa; color: #293f33; box-shadow: 0 2px 6px #333b2410; }
#wortnetz-section { max-width: 900px; margin: auto; }
.wn-intro { margin-top: 36px; }
.wn-intro h1 { font-size: clamp(30px, 6vw, 40px); }
.wn-intro p { line-height: 1.7; }
.wn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 4px; }
#wn-context { text-align: center; color: #737970; font-size: 13px; }
.wn-quiet-button { min-height: 44px; border: 1px solid #dedfd6; border-radius: 12px; background: #fffefa; color: #465148; padding: 9px 13px; font-size: 13px; font-weight: 600; }
.wn-quiet-button:disabled { opacity: .4; cursor: default; }
.wn-network { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding: 20px 0; isolation: isolate; }
.wn-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; }
.wn-lines path { fill: none; stroke: #d8dccf; stroke-width: 1.5; stroke-linecap: round; }
.wn-center { grid-column: 1 / -1; justify-self: center; width: min(240px, 85%); padding-bottom: 8px; }
.wn-related { display: contents; }
.wn-node { --wn-accent: #60616a; --wn-tint: #f0eff2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; width: 100%; min-width: 0; min-height: 162px; padding: 15px 8px 13px; border: 1px solid #e4e4dc; border-radius: 22px; background: #fffefa; box-shadow: 0 4px 14px #333b2407; color: var(--wn-accent); transition: box-shadow .2s, transform .2s; }
.wn-node[data-gender="der"] { --wn-accent: var(--blue); --wn-tint: #edf4fe; }
.wn-node[data-gender="die"] { --wn-accent: var(--red); --wn-tint: #fff0f1; }
.wn-node[data-gender="das"] { --wn-accent: var(--green); --wn-tint: #ecf7f1; }
.wn-visual { display: grid; place-items: center; width: 84px; height: 84px; max-width: 100%; border-radius: 23px; background: var(--wn-tint); }
.wn-visual img { width: 74px; height: 74px; object-fit: contain; }
.wn-visual svg { width: 50px; height: 50px; }
.wn-word { font-family: 'Manrope', sans-serif; font-weight: 750; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; max-width: 100%; }
.wn-type { font-size: 12px; font-weight: 500; color: #6f7079; }
.wn-center .wn-node { min-height: 214px; padding: 20px; border-width: 2px; border-color: var(--wn-accent); box-shadow: 0 8px 24px #333b2410; }
.wn-center .wn-visual { width: 110px; height: 110px; border-radius: 30px; }
.wn-center .wn-visual img { width: 96px; height: 96px; }
.wn-center .wn-visual svg { width: 66px; height: 66px; }
.wn-center .wn-word { font-size: 30px; }
.wn-center-hint { font-size: 11px; color: #7c8178; font-weight: 500; }
.wn-more-row { display: flex; justify-content: center; }
.wn-status { min-height: 20px; text-align: center; color: #737970; font-size: 13px; line-height: 1.6; }
.wn-detail { max-width: 560px; margin: 20px auto 0; padding: 22px; border: 1px solid #e3e5db; border-radius: 22px; background: #fffefa; box-shadow: 0 6px 22px #333b2408; }
.wn-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #787e75; font-size: 13px; }
.wn-detail h2 { margin: 12px 0 18px; font-size: 28px; letter-spacing: -.6px; }
.wn-detail dl { margin: 0; display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 14px 18px; line-height: 1.6; }
.wn-detail dt { color: #777d73; font-size: 13px; }
.wn-detail dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.wn-detail dd[lang="fa"] { text-align: left; font-size: 20px; }
.wn-detail-image { float: right; width: 72px; height: 72px; object-fit: contain; margin: 10px 0 10px 14px; padding: 6px; border-radius: 18px; background: #f3f3ed; }
.wn-detail::after { content: ''; display: block; clear: both; }
.wn-hint { margin: 24px 0 0; text-align: center; font-size: 12px; line-height: 1.9; color: #7a8077; }
.wn-flying { position: fixed; margin: 0; z-index: 20; pointer-events: none; }
@media (hover: hover) { .wn-node:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #333b2414; } .wn-quiet-button:not(:disabled):hover { background: #f3f4ed; } }
@media (min-width: 760px) {
  .wn-network { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: 28px 38px; align-items: center; padding: 22px 16px; }
  .wn-center { grid-area: 2 / 2; width: 100%; padding: 0; }
  .wn-related > :nth-child(1) { grid-area: 1 / 1; }
  .wn-related > :nth-child(2) { grid-area: 1 / 3; }
  .wn-related > :nth-child(3) { grid-area: 2 / 1; }
  .wn-related > :nth-child(4) { grid-area: 2 / 3; }
  .wn-related > :nth-child(5) { grid-area: 3 / 1; }
  .wn-related > :nth-child(6) { grid-area: 3 / 3; }
  .wn-node { min-height: 172px; }
  .wn-center .wn-node { min-height: 234px; }
}
@media (max-width: 759px) {
  .wn-intro { margin: 20px 0 14px; }
  .wn-toolbar { margin-top: 4px; }
  .wn-network { display: block; height: 554px; max-width: 440px; margin: 6px auto 0; padding: 0; }
  .wn-node { width: 104px; min-height: 104px; padding: 2px 0; gap: 4px; border: 0; border-radius: 18px; background: transparent; box-shadow: none; justify-content: flex-start; }
  .wn-node:hover { box-shadow: none; }
  .wn-related > .wn-node { position: absolute; margin-left: -52px; }
  .wn-related > :nth-child(1) { left: 30%; top: 0; }
  .wn-related > :nth-child(2) { left: 78%; top: 50px; }
  .wn-related > :nth-child(3) { left: 18%; top: 132px; }
  .wn-related > :nth-child(4) { left: 82%; top: 225px; }
  .wn-related > :nth-child(5) { left: 24%; top: 410px; }
  .wn-related > :nth-child(6) { left: 76%; top: 424px; }
  .wn-visual { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--wn-accent) 35%, transparent); box-shadow: 0 3px 12px #333b2406; }
  .wn-visual img { width: 56px; height: 56px; }
  .wn-visual svg { width: 38px; height: 38px; }
  .wn-word { font-size: 20px; line-height: 1.25; padding: 3px 2px; border-radius: 9px; background: var(--wn-tint); white-space: nowrap; }
  .wn-type { font-size: 11px; line-height: 1.1; }
  .wn-center { position: absolute; left: 42%; top: 258px; width: 140px; margin-left: -70px; padding: 0; }
  .wn-center .wn-node { width: 140px; height: 140px; min-height: 140px; padding: 8px; gap: 3px; justify-content: center; border: 2px solid var(--wn-accent); border-radius: 50%; background: #fffefa; box-shadow: 0 6px 20px #333b240c; }
  .wn-center .wn-visual { width: 68px; height: 68px; border: 0; border-radius: 50%; box-shadow: none; }
  .wn-center .wn-visual img { width: 60px; height: 60px; }
  .wn-center .wn-visual svg { width: 42px; height: 42px; }
  .wn-center .wn-word { font-size: 24px; line-height: 1.15; padding: 0; background: transparent; }
  .wn-center-hint { display: none; }
  .wn-lines path { stroke: #c9cfc2; stroke-width: 1.6; }
  .wn-detail { margin-top: 10px; padding: 16px; border-radius: 18px; }
  .wn-detail h2 { font-size: 25px; margin: 8px 0 12px; }
  .wn-detail dl { gap: 8px 12px; grid-template-columns: 64px minmax(0, 1fr); }
  .wn-detail dd { font-size: 16px; }
  .wn-detail dd[lang="fa"] { font-size: 19px; }
  .wn-status { margin: 6px 0; }
}
@media (max-width: 360px) {
  .wn-node { width: 96px; }
  .wn-related > .wn-node { margin-left: -48px; }
  .wn-center { left: 40%; width: 124px; margin-left: -62px; }
  .wn-center .wn-node { width: 124px; height: 124px; min-height: 124px; }
  .wn-center .wn-visual { width: 56px; height: 56px; }
  .wn-center .wn-visual img { width: 52px; height: 52px; }
  .wn-center .wn-word { font-size: 22px; }
  .wn-toolbar { gap: 4px; }
  .wn-quiet-button { padding: 9px; }
  #wn-context { font-size: 12px; }
}