/*
  Layoutgrundlage: die bereitgestellte Hessen-FAQ-Referenz.
  Für Anleitungen wird die FAQ-spezifische Accordion-Logik bewusst nicht
  übernommen. Die Hauptschritte stehen offen und in fester Reihenfolge.

  Hessen Gellix wird als bevorzugte Schriftfamilie referenziert. Eine
  Schriftdatei ist nicht Bestandteil dieses Pakets. Ist die Schrift in der
  späteren Webumgebung verfügbar, wird sie verwendet; sonst greifen die
  definierten Fallbacks.
*/

* { box-sizing: border-box; }

:root {
  --hessen-blau: #14006e;
  --hessen-rot: #e12d37;
  --text: #232328;
  --muted: #5a5a5f;
  --border: #d8d8dd;
  --surface: #f7f7f9;
  --surface-light: #fbfbfc;
  --white: #ffffff;
  --max-width: 1040px;
  --content-width: 900px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: "Hessen Gellix", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a {
  color: var(--hessen-blau);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--hessen-rot); }

a:focus-visible {
  outline: 3px solid var(--hessen-rot);
  outline-offset: 3px;
}

.site-strip {
  border-top: 6px solid var(--hessen-blau);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.site-strip-inner {
  display: flex;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 28px 16px;
}

.hessen-logo {
  display: block;
  width: 430px;
  max-width: 100%;
  height: auto;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 42px 28px 54px;
}

.breadcrumb {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

h1,
h2,
h3 {
  color: var(--hessen-blau);
}

h1 {
  max-width: 900px;
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h1::after {
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 22px;
  content: "";
  background: var(--hessen-rot);
}

h2 {
  margin: 0 0 18px;
  font-size: 1.55rem;
  line-height: 1.28;
}

h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  line-height: 1.35;
}

p { margin: 0 0 14px; }

ul,
ol {
  margin: 8px 0 18px;
  padding-left: 26px;
}

li { margin-bottom: 7px; }

.zeitraum {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 1.05rem;
}

.intro {
  max-width: 850px;
  margin-bottom: 30px;
  font-size: 1.08rem;
}

.meta-inline {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Inhaltsübersicht: optisch an der Fragenübersicht der Referenz orientiert. */
.inhaltsuebersicht {
  margin: 34px 0 38px;
  padding: 24px 26px 20px;
  background: var(--surface);
  border-left: 4px solid var(--hessen-blau);
}

.inhaltsuebersicht h2 {
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.toc-list {
  margin-bottom: 0;
  padding-left: 0;
  columns: 2;
  column-gap: 52px;
  list-style: none;
}

.toc-list li {
  break-inside: avoid;
  padding-right: 18px;
}

/* Hauptstruktur einer Anleitung: keine ausklappbaren FAQ-Elemente. */
.instruction-flow {
  border-top: 1px solid var(--border);
}

.instruction-section {
  max-width: var(--content-width);
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 20px;
}

.instruction-section > h2 {
  max-width: 820px;
}

.section-content > :first-child { margin-top: 0; }
.section-content > :last-child { margin-bottom: 0; }

/* Unterpunkte innerhalb eines Hauptschritts.
   Keine Unter-Nummerierung und keine runden Nummern-Badges: Die Gliederung
   erfolgt ausschließlich über sprechende Zwischenüberschriften. */
.steps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.steps > li {
  margin: 0;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}

.steps > li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.steps h3 {
  margin-bottom: 12px;
  font-size: 1.18rem;
  line-height: 1.35;
}

.button-label {
  font-weight: 700;
  color: var(--hessen-blau);
}

.notice {
  margin: 18px 0;
  padding: 18px 20px 14px;
  background: var(--surface);
  border-left: 4px solid var(--hessen-blau);
}

.notice--important,
.notice[data-notice-type="important"],
.notice[data-notice-type="warning"] {
  border-left-color: var(--hessen-rot);
}

.notice__title { font-weight: 700; }

.result {
  margin: 18px 0;
  padding: 18px 20px 14px;
  background: var(--surface);
  border-left: 4px solid var(--hessen-rot);
}

figure { margin: 22px 0; }

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--border);
}

figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.wide-figure { max-width: 900px; }
.narrow-figure { max-width: 620px; }

.image-grid {
  display: grid;
  gap: 22px;
  margin: 22px 0;
}

.image-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.image-card { margin: 0; }

.image-card img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  padding: 10px;
}

code {
  padding: 1px 4px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.92em;
}

footer {
  margin-top: 40px;
  padding-top: 18px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .site-strip-inner { padding: 14px 20px 13px; }
  .hessen-logo { width: 350px; max-width: 100%; }
  main { padding: 30px 20px 42px; }
  h1 { font-size: clamp(2rem, 10vw, 2.8rem); }

  .inhaltsuebersicht {
    margin-top: 28px;
    padding: 20px 20px 16px;
  }

  .toc-list { columns: 1; }

  .instruction-section {
    padding: 28px 0 24px;
  }

  .steps > li { padding: 22px 0; }
  .steps > li:first-child { padding-top: 2px; }

  .image-grid--2,
  .image-grid--3 { grid-template-columns: 1fr; }

  .image-card img { height: auto; max-height: 520px; }
}

@media print {
  body { font-size: 11pt; }
  .site-strip { border-top-width: 3pt; }

  .site-strip-inner,
  main {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .hessen-logo { width: 92mm; }
  .toc-list { columns: 1; }

  .instruction-section {
    max-width: none;
    break-inside: auto;
  }

  .steps > li,
  figure,
  .notice,
  .result {
    break-inside: avoid;
  }

  .image-grid { display: block; }
  .image-card { margin-bottom: 14pt; }
}


/* Gemeinsame Übersichtsseite des Anleitungspakets */
.collection-nav {
  margin: 0 0 22px;
  font-size: 0.95rem;
}

.guide-groups {
  max-width: var(--content-width);
  border-top: 1px solid var(--border);
}

.guide-group {
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--border);
}

.guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.guide-list li {
  margin: 0;
  padding: 20px 22px 17px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--hessen-blau);
}

.guide-list h3 {
  margin-bottom: 8px;
  font-size: 1.12rem;
}

.guide-list p {
  margin-bottom: 8px;
  color: var(--text);
}

.guide-list .guide-meta {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .guide-list { grid-template-columns: 1fr; }
}

/* Startseite: eigenständige Kachelansicht */
.home-page main {
  padding-top: 0;
}

.home-hero {
  margin: 0 -28px;
  padding: 48px 28px 42px;
  background: linear-gradient(135deg, #f7f6fb 0%, #ffffff 72%);
  border-bottom: 1px solid var(--border);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 34px;
  align-items: end;
}

.home-hero h1 {
  margin-bottom: 16px;
}

.home-lead {
  max-width: 720px;
  margin: 0;
  font-size: 1.14rem;
}

.home-quick {
  padding: 24px 26px 22px;
  color: var(--white);
  background: var(--hessen-blau);
}

.home-quick h2,
.home-quick a {
  color: var(--white);
}

.home-quick h2 {
  margin-bottom: 10px;
  font-size: 1.42rem;
}

.home-quick p {
  margin-bottom: 14px;
}

.home-quick-label,
.section-kicker,
.guide-category {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-quick-label {
  color: #dcd6ff;
}

.home-section {
  padding: 44px 0 10px;
}

.home-section-heading {
  margin-bottom: 22px;
}

.home-section-heading h2,
.info-tile h2 {
  margin-bottom: 0;
  font-size: 1.75rem;
}

.section-kicker,
.guide-category {
  color: var(--hessen-rot);
}

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

.guide-card {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-top: 5px solid var(--hessen-blau);
}

.guide-card--primary {
  background: #f4f2fb;
  border-top-color: var(--hessen-rot);
}

.guide-card h3 {
  margin-bottom: 10px;
  font-size: 1.26rem;
}

.guide-card h3 a {
  text-decoration: none;
}

.guide-card > p:not(.guide-category) {
  margin-bottom: 22px;
}

.tile-action {
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
}

.home-section--info {
  padding-top: 30px;
}

.info-tile {
  max-width: 760px;
  padding: 26px 28px 24px;
  background: var(--surface);
  border-left: 5px solid var(--hessen-rot);
}

.site-footer {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.94rem;
}

.site-footer a {
  font-weight: 600;
}

/* Impressum / Datenschutz */
.legal-header {
  margin-bottom: 26px;
}

.legal-content {
  max-width: 900px;
}

.legal-section {
  padding: 8px 0 30px;
}

.legal-section + .legal-section {
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

.legal-section h2 {
  margin-top: 0;
  font-size: 1.85rem;
}

.legal-section h3 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 1.28rem;
}

.legal-section h4 {
  margin: 24px 0 8px;
  color: var(--text);
  font-size: 1.05rem;
}

.legal-section address {
  margin-bottom: 22px;
  font-style: normal;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 720px) {
  .home-hero {
    margin: 0 -20px;
    padding: 34px 20px 30px;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-card {
    min-height: 0;
  }
}

/* Wissensseiten und FAQ */
.article-flow,
.faq-flow {
  border-top: 1px solid var(--border);
}

.link-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--hessen-blau);
}

.link-card:hover {
  color: var(--text);
  border-left-color: var(--hessen-rot);
  background: var(--surface);
}

.link-card strong {
  color: var(--hessen-blau);
  font-size: 1.04rem;
}

.link-card span {
  color: var(--muted);
  font-size: 0.94rem;
}

.faq-section {
  max-width: var(--content-width);
  padding: 34px 0 28px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 20px;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-list details {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-list summary {
  position: relative;
  padding: 19px 48px 19px 16px;
  color: var(--hessen-blau);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::after {
  position: absolute;
  top: 14px;
  right: 0;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  content: "+";
  color: var(--hessen-blau);
  border: 1px solid var(--hessen-blau);
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "−";
  color: var(--white);
  background: var(--hessen-blau);
}

.faq-list summary:hover,
.faq-list summary:focus-visible {
  color: var(--hessen-rot);
}

.faq-answer {
  max-width: 820px;
  padding: 0 48px 18px 16px;
}

.faq-answer > :last-child { margin-bottom: 0; }

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

@media (max-width: 800px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .link-cards { grid-template-columns: 1fr; }
}

/* Startseite: Einordnung der Schul-ID und eingebettetes Video */
.home-quote {
  max-width: 690px;
  margin: 24px 0 0;
  padding: 14px 0 14px 22px;
  color: var(--hessen-blau);
  border-left: 5px solid var(--hessen-rot);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.35;
}

.home-about-section {
  padding: 44px 0 12px;
}

.home-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 34px;
  align-items: start;
}

.home-about-copy {
  padding: 4px 0;
}

.home-about-copy h2,
.video-panel h2 {
  font-size: 1.75rem;
}

.video-panel {
  padding: 24px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-top: 5px solid var(--hessen-blau);
}

.video-panel h2 {
  margin-bottom: 16px;
}

.video-consent {
  min-height: 270px;
  display: grid;
  place-items: center;
  padding: 28px;
  background: #efeff3;
  border: 1px solid var(--border);
}

.video-consent-inner {
  max-width: 510px;
  text-align: center;
}

.video-load-button {
  display: inline-block;
  margin: 8px 0 12px;
  padding: 12px 18px;
  color: var(--white);
  background: var(--hessen-blau);
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.video-load-button:hover,
.video-load-button:focus-visible {
  background: var(--hessen-rot);
}

.video-direct-link,
.video-credit {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.video-credit {
  margin-top: 9px;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Smartphonewechsel */
.phone-figure {
  max-width: 320px;
}

.phone-figure img {
  width: 100%;
  padding: 10px;
  object-fit: contain;
}

.support-card {
  max-width: 620px;
  margin: 20px 0 0;
  padding: 20px 22px 16px;
  background: var(--surface);
  border-left: 4px solid var(--hessen-blau);
}

.support-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .home-about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .video-panel {
    padding: 20px;
  }

  .video-consent {
    min-height: 220px;
    padding: 22px 18px;
  }
}


/* v5: lokale Volltextsuche auf der Startseite */
.home-search-section {
  padding: 34px 0 8px;
}

.home-search-panel {
  padding: 28px 30px 26px;
  background: #f4f2fb;
  border-left: 5px solid var(--hessen-rot);
}

.home-search-panel h2 {
  margin-bottom: 8px;
  font-size: 1.75rem;
}

.search-intro {
  max-width: 790px;
  margin-bottom: 18px;
}

.search-box {
  display: flex;
  gap: 10px;
  max-width: 820px;
}

.search-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 13px 15px;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--hessen-blau);
  border-radius: 2px;
  font: inherit;
}

.search-input:focus {
  outline: 3px solid rgba(225, 45, 55, 0.22);
  outline-offset: 2px;
}

.search-clear {
  flex: 0 0 auto;
  padding: 11px 15px;
  color: var(--hessen-blau);
  background: var(--white);
  border: 1px solid var(--hessen-blau);
  border-radius: 2px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.search-clear:hover,
.search-clear:focus-visible {
  color: var(--white);
  background: var(--hessen-blau);
}

.search-help {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.search-results {
  max-width: 900px;
  margin-top: 22px;
  background: var(--white);
  border: 1px solid var(--border);
}

.search-results-header {
  margin: 0;
  padding: 12px 16px;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 700;
}

.search-result {
  display: block;
  padding: 16px 18px 15px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.search-result:last-child {
  border-bottom: 0;
}

.search-result:hover,
.search-result:focus-visible {
  color: var(--text);
  background: var(--surface-light);
  box-shadow: inset 4px 0 0 var(--hessen-rot);
}

.search-result-type {
  display: block;
  margin-bottom: 3px;
  color: var(--hessen-rot);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-result-title {
  display: block;
  color: var(--hessen-blau);
  font-size: 1.08rem;
  font-weight: 700;
}

.search-result-section {
  display: block;
  margin-top: 1px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.search-result-snippet {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.search-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
}

/* Rechtliches bleibt ausschließlich über die Fußzeile erreichbar. */
.knowledge-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

@media (max-width: 720px) {
  .home-search-panel { padding: 22px 20px 20px; }
  .search-box { flex-direction: column; }
  .search-clear { align-self: flex-start; }
  .knowledge-grid { grid-template-columns: 1fr; }
}


/* v6: FAQ-Prominenz, Schul-ID-Visuals und lokale Videowiedergabe */
.home-hero-copy { min-width: 0; }
.home-hero-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-hero-visual {
  margin: 0;
  padding: 16px 18px;
  background: #f8f4ef;
  border: 1px solid var(--border);
}

.home-hero-visual img,
.faq-highlight-logo {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: transparent;
}

.home-hero-visual img {
  max-width: 420px;
  margin: 0 auto;
}

.home-faq-highlight-section {
  padding: 10px 0 6px;
}

.faq-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 22px;
  padding: 28px 30px 26px;
  background: #fff8f6;
  border: 1px solid var(--border);
  border-top: 5px solid var(--hessen-rot);
}

.faq-highlight-copy h2 {
  margin-bottom: 10px;
  font-size: 1.75rem;
}

.topic-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.topic-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--hessen-blau);
  background: var(--white);
  border: 1px solid #d6d0f7;
  font-size: 0.92rem;
  font-weight: 700;
}

.faq-highlight-aside {
  padding: 20px 22px 18px;
  background: var(--white);
  border: 1px solid var(--border);
}

.faq-highlight-logo {
  max-width: 240px;
  margin: 0 0 12px;
}

.faq-highlight-points {
  margin: 14px 0 0;
  padding-left: 20px;
}

.faq-highlight-points li:last-child {
  margin-bottom: 0;
}

.faq-search-panel {
  margin: 0 0 34px;
  padding: 24px 26px 22px;
  background: #f4f2fb;
  border-left: 5px solid var(--hessen-rot);
}

.faq-search-status {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
}

.faq-search-empty {
  margin: 14px 0 0;
  padding: 15px 18px;
  background: var(--white);
  border: 1px solid var(--border);
}

.faq-list details[hidden],
.faq-section[hidden] {
  display: none;
}

.local-video {
  max-width: 920px;
}

.local-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 1px solid var(--border);
}

@media (max-width: 900px) {
  .faq-highlight {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .home-hero-visual {
    padding: 14px;
  }

  .faq-highlight {
    padding: 22px 20px 20px;
  }

  .faq-search-panel {
    padding: 20px;
  }
}


/* v7: Startseite reduziert; FAQ-Stichworte links ausgerichtet */
.home-hero-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.7fr);
  align-items: start;
}

.home-hero-side {
  display: block;
}

.faq-highlight {
  display: block;
}

.faq-highlight-copy {
  max-width: 850px;
}

.topic-pills {
  justify-content: flex-start;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
  }
}


/* v8: Beantragung und Helpdesk auf der Startseite */
.home-application-section {
  padding: 44px 0 10px;
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.application-card {
  padding: 24px 26px 22px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-top: 5px solid var(--hessen-blau);
}

.application-card--wide {
  grid-column: 1 / -1;
  border-top-color: var(--hessen-rot);
}

.application-card h3 {
  margin-bottom: 10px;
  font-size: 1.26rem;
}

.application-card p:last-child {
  margin-bottom: 0;
}

.application-link,
.application-links a {
  font-weight: 700;
  text-decoration: none;
}

.application-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.application-links a {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--hessen-blau);
}

.application-links a:hover,
.application-links a:focus-visible {
  color: var(--hessen-rot);
  border-left-color: var(--hessen-rot);
}

.home-helpdesk-section {
  padding: 50px 0 4px;
}

.helpdesk-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
  gap: 34px;
  align-items: center;
  padding: 30px 32px;
  color: var(--white);
  background: var(--hessen-blau);
  border-top: 5px solid var(--hessen-rot);
}

.helpdesk-panel h2,
.helpdesk-panel .section-kicker,
.helpdesk-panel a {
  color: var(--white);
}

.helpdesk-panel h2 {
  margin-bottom: 8px;
  font-size: 1.9rem;
}

.helpdesk-panel .section-kicker {
  opacity: 0.8;
}

.helpdesk-lead {
  margin-bottom: 0;
  font-size: 1.08rem;
}

.helpdesk-contact {
  padding: 2px 0;
}

.helpdesk-label {
  margin-bottom: 2px;
  opacity: 0.78;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.helpdesk-phone {
  margin-bottom: 14px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.helpdesk-phone a {
  text-decoration: none;
}

.helpdesk-button {
  display: inline-block;
  margin-top: 4px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,0.72);
  font-weight: 700;
  text-decoration: none;
}

.helpdesk-button:hover,
.helpdesk-button:focus-visible {
  color: var(--hessen-blau);
  background: var(--white);
}

@media (max-width: 900px) {
  .application-links {
    grid-template-columns: 1fr;
  }
  .helpdesk-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .application-grid {
    grid-template-columns: 1fr;
  }
  .application-card--wide {
    grid-column: auto;
  }
  .helpdesk-panel {
    padding: 24px 22px;
  }
  .helpdesk-phone {
    font-size: 1.4rem;
  }
}


/* v10: Informationsarchitektur, kompakte Karten und gemeinsame Navigation */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.site-nav-inner {
  display: flex;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.site-nav a {
  flex: 0 0 auto;
  padding: 12px 15px 11px;
  color: var(--hessen-blau);
  border-bottom: 3px solid transparent;
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--hessen-rot);
  border-bottom-color: var(--hessen-rot);
}

.home-hero-simple {
  max-width: 820px;
}

.home-priority-section {
  padding: 42px 0 12px;
}

.priority-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.priority-card {
  display: flex;
  min-height: 185px;
  flex-direction: column;
  padding: 20px 21px 18px;
  color: var(--text);
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-top: 4px solid var(--hessen-blau);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.priority-card--primary {
  background: #f4f2fb;
  border-top-color: var(--hessen-rot);
}

.priority-card:hover,
.priority-card:focus-visible,
.compact-guide-card:hover,
.compact-guide-card:focus-visible {
  color: var(--text);
  border-color: #c9c6d7;
  box-shadow: 0 8px 22px rgba(20,0,110,0.08);
  transform: translateY(-2px);
}

.priority-kicker {
  margin-bottom: 8px;
  color: var(--hessen-rot);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.priority-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--hessen-blau);
  font-size: 1.12rem;
  line-height: 1.3;
}

.priority-card > span:last-child {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.92rem;
}

.section-intro {
  max-width: 760px;
  margin-top: 8px;
  color: var(--muted);
}

.home-guides-section {
  padding-top: 52px;
}

.guide-category-block {
  display: grid;
  grid-template-columns: minmax(215px, 0.72fr) minmax(0, 2fr);
  gap: 26px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.guide-category-block:last-child {
  border-bottom: 1px solid var(--border);
}

.guide-category-heading {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-content: start;
}

.guide-category-number {
  margin: 2px 0 0;
  color: var(--hessen-rot);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.guide-category-heading h3 {
  margin-bottom: 6px;
  font-size: 1.28rem;
}

.guide-category-heading p:not(.guide-category-number) {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

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

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

.compact-guide-card {
  display: flex;
  min-height: 205px;
  flex-direction: column;
  padding: 19px 20px 17px;
  color: var(--text);
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--hessen-blau);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.compact-guide-card--primary {
  min-height: 160px;
  background: #f4f2fb;
  border-left-color: var(--hessen-rot);
}

.compact-guide-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--hessen-blau);
  font-size: 1.08rem;
  line-height: 1.35;
}

.compact-guide-card > span:not(.guide-category):not(.compact-guide-action) {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.48;
}

.compact-guide-action {
  margin-top: auto;
  padding-top: 14px;
  color: var(--hessen-blau);
  font-size: 0.9rem;
  font-weight: 700;
}

.topic-pill {
  text-decoration: none;
}

.topic-pill:hover,
.topic-pill:focus-visible {
  color: var(--white);
  background: var(--hessen-blau);
  border-color: var(--hessen-blau);
}

.home-knowledge-section {
  padding: 44px 0 4px;
}

.knowledge-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 28px;
  align-items: center;
  padding: 26px 28px;
  background: var(--surface);
  border-left: 5px solid var(--hessen-blau);
}

.knowledge-panel h2 {
  margin-bottom: 8px;
}

.knowledge-panel p:last-child {
  margin-bottom: 0;
}

.knowledge-action {
  display: block;
  padding: 16px 18px;
  color: var(--white);
  background: var(--hessen-blau);
  font-weight: 700;
  text-decoration: none;
}

.knowledge-action:hover,
.knowledge-action:focus-visible {
  color: var(--white);
  background: var(--hessen-rot);
}

/* FAQ: direkte Sprungziele */
.faq-item {
  scroll-margin-top: 82px;
}

.faq-item:target {
  background: #fff8f6;
  border-radius: 12px;
  box-shadow: inset 4px 0 0 var(--hessen-rot), 0 0 0 1px rgba(20, 0, 110, 0.08);
}

/* Lange Anleitungen: auf Desktop mit fester Seitennavigation */
.guide-page .site-header {
  max-width: 900px;
}

.guide-layout {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-top: 28px;
}

.guide-sidebar {
  min-width: 0;
}

.guide-page .page-toc {
  position: sticky;
  top: 72px;
  margin: 0;
  padding: 20px 19px 17px;
  border-left: 4px solid var(--hessen-blau);
}

.guide-page .page-toc h2 {
  font-size: 1.12rem;
}

.guide-page .page-toc .toc-list {
  columns: 1;
  font-size: 0.9rem;
  line-height: 1.42;
}

.guide-page .page-toc .toc-list li {
  margin-bottom: 10px;
  padding-right: 0;
}

.guide-page .guide-main-content,
.guide-page .instruction-section {
  min-width: 0;
  max-width: none;
}

.guide-page .instruction-flow {
  border-top: 1px solid var(--border);
}

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

  .guide-category-block {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .compact-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .guide-page .page-toc {
    position: static;
    margin: 0 0 24px;
  }
}

@media (max-width: 720px) {
  .site-nav-inner {
    padding: 0 8px;
  }

  .site-nav a {
    padding: 10px 11px 9px;
    font-size: 0.88rem;
  }

  .priority-grid,
  .compact-guide-grid {
    grid-template-columns: 1fr;
  }

  .priority-card,
  .compact-guide-card {
    min-height: 0;
  }

  .guide-category-heading {
    grid-template-columns: 34px 1fr;
  }

  .knowledge-panel {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
}


/* v13: Direktzugriff auf Login, Sicherheitsinformationen und Kennwortrücksetzung */
.home-access-section {
  padding: 38px 0 10px;
  scroll-margin-top: 72px;
}

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

.access-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 20px 21px 18px;
  color: var(--text);
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-top: 4px solid var(--hessen-blau);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.access-card--primary {
  background: #f4f2fb;
  border-top-color: var(--hessen-rot);
}

.access-card:hover,
.access-card:focus-visible {
  color: var(--text);
  border-color: #c9c6d7;
  box-shadow: 0 8px 22px rgba(20,0,110,0.08);
  transform: translateY(-2px);
}

.access-card-kicker {
  margin-bottom: 8px;
  color: var(--hessen-rot);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.access-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--hessen-blau);
  font-size: 1.08rem;
  line-height: 1.35;
}

.access-card > span:last-child {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.92rem;
}

.access-trouble-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  margin-top: 16px;
  padding: 16px 18px;
  background: #fff8f6;
  border-left: 4px solid var(--hessen-rot);
}

.access-trouble-note strong {
  color: var(--hessen-blau);
}

.access-trouble-note span {
  color: var(--text);
  font-size: 0.94rem;
}

.access-trouble-note a {
  font-weight: 700;
  white-space: nowrap;
}

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

  .access-card {
    min-height: 0;
  }

  .access-trouble-note {
    grid-template-columns: 1fr;
  }

  .access-trouble-note a {
    white-space: normal;
  }
}