/*
 * Linksammlung und Küngenfuchs – Elternrat Küngenmatt
 * Folgt dem Website-Styleguide docs/DESIGN.md: Tinte auf Weiss und Creme, Manrope aus dem
 * Theme, Pillen-Knöpfe mit 1 px Rahmen, eckige Felder, Zeilen statt Karten, keine
 * Akzentfarbe, keine Schatten. Alle Werte kommen aus den WordPress-Presets.
 */
.ls {
  --ls-tinte: var(--wp--preset--color--contrast, #111111);
  --ls-grund: var(--wp--preset--color--base, #FFFFFF);
  --ls-creme: var(--wp--preset--color--accent-5, #FBFAF3);
  --ls-grau: var(--wp--preset--color--accent-4, #686868);
  --ls-linie: color-mix(in srgb, var(--ls-tinte) 25%, transparent);
  --ls-klein: var(--wp--preset--font-size--medium, 1.125rem);
  --ls-text: var(--wp--preset--font-size--large, 1.375rem);
  --ls-abstand-s: var(--wp--preset--spacing--20, 10px);
  --ls-abstand-m: var(--wp--preset--spacing--30, 20px);
  --ls-abstand-l: var(--wp--preset--spacing--40, 30px);
  --ls-abstand-xl: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px));
  --ls-ease: cubic-bezier(0.25, 1, 0.5, 1);
  margin-block: var(--ls-abstand-l) var(--ls-abstand-xl);
  color: var(--ls-tinte);
}
.ls-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ls [hidden] { display: none !important; }
.ls p { margin: 0; }
.ls h2, .ls h3 { text-wrap: balance; }

/* ---------- Grundbausteine ---------- */
.ls-knopf,
.ls-pille {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  font: inherit; font-size: var(--ls-klein); font-weight: 300; line-height: 1.2;
  color: var(--ls-tinte); background: transparent;
  border: 1px solid var(--ls-tinte); border-radius: 9999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ls-ease), color .18s var(--ls-ease);
}
.ls-knopf { min-height: 52px; padding: 0 35px; }
.ls-pille { min-height: 40px; padding: 8px 18px; white-space: nowrap; }
.ls-pille--klein { min-height: 36px; padding: 6px 14px; font-size: .95rem; }
.ls-knopf:hover, .ls-pille:hover,
.ls-pille[aria-pressed="true"] { background: var(--ls-tinte); color: var(--ls-grund); }
.ls-knopf:focus-visible, .ls-pille:focus-visible,
.ls a:focus-visible, .ls-feld:focus-visible {
  outline: 2px solid var(--ls-tinte); outline-offset: 3px;
}
.ls-feld {
  width: 100%; min-width: 0; min-height: 52px; box-sizing: border-box;
  padding: 13px 15px; font: inherit; font-size: var(--ls-klein); font-weight: 300;
  color: var(--ls-tinte); background: var(--ls-grund);
  border: 1px solid var(--ls-tinte); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.ls-feld::placeholder { color: var(--ls-grau); opacity: 1; }

/* ---------- Küngenfuchs ---------- */
.ls-fuchs {
  background: var(--ls-creme);
  padding: var(--ls-abstand-xl);
  margin-bottom: var(--ls-abstand-xl);
}
.ls-fuchs__kopf {
  display: grid; grid-template-columns: auto 1fr; gap: var(--ls-abstand-l);
  align-items: center; margin-bottom: var(--ls-abstand-l);
}
.ls-fuchs__bild { display: block; width: 112px; height: auto; }
.ls-fuchs__titel {
  margin: 0; font-size: var(--wp--preset--font-size--x-large, 2rem); font-weight: 400; line-height: 1.125;
}
.ls-fuchs__untertitel { margin-top: var(--ls-abstand-s) !important; font-size: var(--ls-klein); line-height: 1.4; }

.ls-fuchs__verlauf {
  display: flex; flex-direction: column; gap: var(--ls-abstand-m);
  margin-bottom: var(--ls-abstand-l);
  border-top: 1px solid var(--ls-linie); padding-top: var(--ls-abstand-m);
}
.ls-nachricht { animation: ls-rein .24s var(--ls-ease) both; scroll-margin-top: var(--ls-abstand-m); }
.ls-nachricht--du {
  align-self: flex-end; max-width: 85%;
  padding: 10px 20px; border-radius: 9999px;
  background: var(--ls-tinte); color: var(--ls-grund);
  font-size: var(--ls-klein); line-height: 1.35;
}
.ls-nachricht--fuchs { max-width: 100%; }
.ls-nachricht__absender { font-size: .875rem; color: var(--ls-grau); margin-bottom: 4px !important; }
.ls-antwort { display: grid; gap: var(--ls-abstand-s); font-size: var(--ls-klein); line-height: 1.45; }
.ls-antwort__thema { font-size: var(--ls-text); font-weight: 400; line-height: 1.25; }
.ls-antwort__zwischentitel { font-weight: 400; margin-top: var(--ls-abstand-s) !important; }
.ls-antwort__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ls-linie); }
.ls-antwort__eintrag { border-bottom: 1px solid var(--ls-linie); }
.ls-antwort__link {
  display: grid; gap: 2px; padding: 12px 0; color: var(--ls-tinte); text-decoration: none;
}
.ls-antwort__titel {
  font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ls-antwort__text { font-size: .95rem; }
.ls-antwort__abc { padding: 14px 18px; background: var(--ls-grund); font-size: .95rem; }
.ls-antwort__abc-kopf { display: block; font-weight: 400; margin-bottom: 2px; }
.ls-antwort__abc a { color: var(--ls-tinte); text-underline-offset: 3px; }
.ls-antwort__weiter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--ls-abstand-s); }
.ls-antwort__frage { font-size: .95rem; margin-right: 4px; }

.ls-fuchs__form { display: grid; grid-template-columns: 1fr auto; gap: var(--ls-abstand-s); }
.ls-fuchs__vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--ls-abstand-m); }
.ls-fuchs__hinweis { margin-top: var(--ls-abstand-m) !important; font-size: .875rem; color: var(--ls-grau); line-height: 1.4; }

/* ---------- Startseite ---------- */
.ls--start { width: 100%; align-self: stretch; text-align: left; margin-block: var(--ls-abstand-l) 0; }
.ls--start .ls-fuchs { margin-bottom: 0; }
.ls-start__weiter { display: flex; flex-wrap: wrap; gap: var(--ls-abstand-s); margin-top: var(--ls-abstand-l) !important; }

/* ---------- Sammlung ---------- */
.ls-sammlung__titel { margin: 0 0 var(--ls-abstand-m); font-weight: 400; }
.ls-filter { margin-bottom: var(--ls-abstand-m); }
.ls-filter__leer { margin-top: var(--ls-abstand-s) !important; font-size: var(--ls-klein); }
.ls-rubriken { margin-bottom: var(--ls-abstand-xl); }
.ls-rubriken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.ls-rubrik { margin-bottom: var(--ls-abstand-xl); scroll-margin-top: var(--ls-abstand-m); }
.ls-rubrik__titel {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0; font-size: var(--wp--preset--font-size--x-large, 2rem); font-weight: 400; line-height: 1.125;
}
.ls-rubrik__anzahl { font-size: var(--ls-klein); color: var(--ls-grau); font-variant-numeric: tabular-nums; }
.ls-rubrik__text { margin: var(--ls-abstand-s) 0 var(--ls-abstand-m) !important; font-size: var(--ls-klein); }

.ls-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ls-tinte); }
.ls-eintrag { margin: 0; border-bottom: 1px solid var(--ls-linie); }
.ls-eintrag__link {
  display: grid; gap: 4px; padding: 16px 0;
  color: var(--ls-tinte); text-decoration: none;
}
.ls-eintrag__titel {
  font-size: var(--ls-text); font-weight: 400; line-height: 1.25;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ls-linie);
  transition: text-decoration-color .18s var(--ls-ease);
}
.ls-eintrag__pfeil {
  display: inline; text-decoration: none;
}
.ls-eintrag__link:hover .ls-eintrag__titel,
.ls-antwort__link:hover .ls-antwort__titel { text-decoration-color: currentColor; }
.ls-eintrag__text { font-size: var(--ls-klein); line-height: 1.4; }
.ls-eintrag__quelle { font-size: .875rem; color: var(--ls-grau); }
.ls-quelle { margin-top: var(--ls-abstand-xl) !important; font-size: .875rem; color: var(--ls-grau); line-height: 1.5; }
.ls-quelle a { color: inherit; }

@keyframes ls-rein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  .ls-fuchs { padding: var(--ls-abstand-l) var(--ls-abstand-m); margin-inline: calc(var(--ls-abstand-m) * -1); }
  .ls-fuchs__kopf { gap: var(--ls-abstand-m); }
  .ls-fuchs__bild { width: 76px; }
  .ls-fuchs__form { grid-template-columns: 1fr; }
  .ls-fuchs__senden { width: 100%; }
  .ls-rubriken ul {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--ls-abstand-m) * -1); padding-inline: var(--ls-abstand-m);
  }
  .ls-rubriken ul::-webkit-scrollbar { display: none; }
  .ls-rubriken li { flex: none; }
  .ls-nachricht--du { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-nachricht { animation: none; }
  .ls-knopf, .ls-pille, .ls-eintrag__titel { transition: none; }
}