/* /fragen/ mit Bildsymbolen (26.10.2026, Daniel: "add the icons, make it more visual").
   Nur auf dieser Seite geladen (stil: leistungen, fragen). Die Symbole sind die des
   Design-Systems aus src/pages/icons.json ({{icon:name}}), keine Strichsymbole. */

/* Themen als Kacheln statt Chips */
.dt-land .fq-themen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.dt-land .fq-themen li { min-width: 0; }
.dt-land .fq-themen a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .85rem; row-gap: .15rem; height: 100%;
  padding: 1rem 1.1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dt-land .fq-themen a:hover { border-color: var(--color-blue); box-shadow: 0 12px 30px -18px rgba(14, 92, 196, .45); transform: translateY(-2px); }
.dt-land .fq-themen a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-cyan); }
.dt-land .fq-themen .dt-ico { grid-row: 1 / 4; display: block; align-self: start; }
.dt-land .fq-themen .dt-ico svg { display: block; width: 44px; height: 44px; }
.dt-land .fq-themen b { font: 600 1.02rem/1.25 var(--font-display); color: var(--text-strong); letter-spacing: -.01em; }
.dt-land .fq-themen span:not(.dt-ico) { font-size: .86rem; line-height: 1.4; color: var(--text-muted); }
.dt-land .fq-themen small { margin-top: .35rem; font: 600 .74rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--color-blue); }

/* Kopf jeder Gruppe: grosses Bildsymbol und Anzahl */
.dt-land .fq-gruppe__kopf { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.dt-land .fq-gruppe__kopf .dt-ico { display: block; }
.dt-land .fq-gruppe__kopf .dt-ico svg { display: block; width: 56px; height: 56px; }
.dt-land .fq-zahl { padding: .3rem .65rem; border-radius: 999px; background: var(--surface-muted, #f3f6fa); font: 600 .78rem/1 var(--font-display); color: var(--text-body); }
.dt-land .fq-gruppe > div:first-child { position: sticky; top: calc(var(--nav-h, 74px) + 1.5rem); align-self: start; }

/* Zeilen: Frage, darunter wo die Antwort steht */
.dt-land .fq-gruppe .ls-verweise a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "frage pfeil" "ort pfeil"; column-gap: 1rem; row-gap: .15rem; padding: .85rem .6rem; margin-inline: -.6rem; border-radius: 10px; transition: background .15s ease; }
.dt-land .fq-gruppe .ls-verweise a:hover { background: var(--surface-muted, #f3f6fa); }
.dt-land .fq-frage { grid-area: frage; }
.dt-land .fq-ort { grid-area: ort; font: 500 .8rem/1.3 var(--font-body); color: var(--text-muted); }
.dt-land .fq-gruppe .ls-verweise a > svg { grid-area: pfeil; align-self: center; transition: transform .2s ease, color .2s ease; }
.dt-land .fq-gruppe .ls-verweise a:hover > svg { transform: translateX(3px); color: var(--color-blue); }

/* Branchen als Kacheln mit Bildsymbol */
.dt-land .fq-branchen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.dt-land .fq-branchen li { border: 0; min-width: 0; }
.dt-land .fq-gruppe .fq-branchen a { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "bild frage pfeil" "bild ort pfeil"; margin: 0; height: 100%;
  padding: .9rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 16px); background: #fff; }
.dt-land .fq-gruppe .fq-branchen a:hover { border-color: var(--color-blue); background: #fff; }
.dt-land .fq-branchen .dt-ico { grid-area: bild; align-self: center; display: block; }
.dt-land .fq-branchen .dt-ico svg { display: block; width: 38px; height: 38px; }

@media (max-width: 1100px) { .dt-land .fq-themen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dt-land .fq-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .dt-land .fq-themen a { padding: .85rem .9rem; column-gap: .7rem; }
  .dt-land .fq-themen .dt-ico svg { width: 36px; height: 36px; }
  .dt-land .fq-gruppe > div:first-child { position: static; }
  .dt-land .fq-gruppe__kopf .dt-ico svg { width: 46px; height: 46px; }
}
@media (max-width: 560px) {
  .dt-land .fq-themen { grid-template-columns: minmax(0, 1fr); }
  .dt-land .fq-themen span:not(.dt-ico) { font-size: .84rem; }
  .dt-land .fq-branchen { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dt-land .fq-themen a, .dt-land .fq-gruppe .ls-verweise a > svg { transition: none; }
  .dt-land .fq-themen a:hover { transform: none; }
}