/*
  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;
  }
}


/* v16: stärkere visuelle Hierarchie der Startseite */
.home16-page main {
  max-width: none;
  padding: 0;
}

.home16-page main > header,
.home16-page main > section,
.home16-page main > footer {
  padding-left: max(28px, calc((100vw - var(--max-width)) / 2 + 28px));
  padding-right: max(28px, calc((100vw - var(--max-width)) / 2 + 28px));
}

.home16-page .site-footer {
  max-width: none;
  margin-top: 0;
  padding-top: 20px;
  padding-bottom: 30px;
}

.home16-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  gap: 50px;
  align-items: center;
  padding-top: 58px;
  padding-bottom: 58px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f4fb 100%);
  border-bottom: 1px solid var(--border);
}

.home16-hero-copy {
  max-width: 650px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--hessen-rot);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.home16-hero h1 {
  margin-bottom: 16px;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
}

.home16-lead {
  max-width: 610px;
  margin-bottom: 18px;
  font-size: 1.18rem;
  line-height: 1.58;
}

.home16-quote {
  max-width: 580px;
  margin: 24px 0 0;
  padding: 12px 0 12px 20px;
  color: var(--hessen-blau);
  border-left: 4px solid var(--hessen-rot);
  font-size: 1.16rem;
  font-weight: 700;
}

.home16-search-shell {
  padding: 30px;
  background: var(--hessen-blau);
  box-shadow: 0 18px 42px rgba(20, 0, 110, 0.16);
}

.home16-search-shell h2,
.home16-search-shell p,
.home16-search-shell .section-kicker {
  color: var(--white);
}

.home16-search-copy h2 {
  margin-bottom: 8px;
  font-size: 1.72rem;
}

.home16-search-shell .search-box--hero {
  max-width: none;
  margin-top: 18px;
}

.home16-search-shell .search-input {
  border-color: var(--white);
}

.home16-search-shell .search-help {
  color: rgba(255,255,255,0.74);
}

.home16-search-shell .search-results {
  margin-top: 16px;
  border: 0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

.home16-band,
.home16-guides,
.home16-application,
.home16-security {
  padding-top: 58px;
  padding-bottom: 58px;
}

.home16-band--priority {
  background: var(--white);
}

.home16-section-head {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: end;
  margin-bottom: 26px;
}

.home16-section-head h2 {
  margin-bottom: 0;
  font-size: 2rem;
}

.home16-section-head > p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
}

.home16-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 18px;
}

.home16-feature-card {
  position: relative;
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: 34px;
  overflow: hidden;
  color: var(--white);
  background: var(--hessen-blau);
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(20,0,110,0.15);
}

.home16-feature-card::after {
  position: absolute;
  right: -72px;
  bottom: -86px;
  width: 250px;
  height: 250px;
  content: "";
  border: 46px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}

.home16-feature-card:hover,
.home16-feature-card:focus-visible {
  color: var(--white);
  background: #1d0a78;
  transform: translateY(-2px);
}

.home16-feature-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: auto;
  place-items: center;
  color: var(--hessen-blau);
  background: var(--white);
  border-radius: 50%;
}

.home16-feature-icon svg,
.ui-icon svg,
.home16-round-icon svg,
.home16-step-icon svg,
.home16-security-icon svg,
.home16-helpdesk-icon svg,
.home16-status svg,
.quick-arrow svg,
.home16-card-link svg,
.home16-helpdesk-button svg {
  width: 1.45em;
  height: 1.45em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home16-card-kicker {
  margin-top: 30px;
  color: #ddd7ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home16-feature-card strong {
  max-width: 620px;
  margin-top: 8px;
  font-size: clamp(1.8rem, 3.4vw, 2.55rem);
  line-height: 1.1;
}

.home16-card-copy {
  max-width: 610px;
  margin-top: 14px;
  color: rgba(255,255,255,0.82);
}

.home16-card-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  font-weight: 800;
}

.home16-card-link svg { width: 18px; height: 18px; }

.home16-quick-stack {
  display: grid;
  gap: 14px;
}

.home16-quick-card,
.home16-medium-card,
.home16-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-light);
  border: 1px solid var(--border);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.home16-quick-card {
  min-height: 124px;
  padding: 22px 22px;
}

.ui-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  flex: none;
  color: var(--hessen-blau);
  background: #efecfb;
  border-radius: 50%;
}

.home16-quick-card small,
.home16-medium-card small {
  display: block;
  margin-bottom: 2px;
  color: var(--hessen-rot);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home16-quick-card strong,
.home16-medium-card strong {
  display: block;
  color: var(--hessen-blau);
  font-size: 1.08rem;
  line-height: 1.3;
}

.home16-quick-card em,
.home16-medium-card em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.89rem;
  font-style: normal;
}

.quick-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--hessen-blau);
}

.quick-arrow svg { width: 18px; height: 18px; }

.home16-quick-card:hover,
.home16-quick-card:focus-visible,
.home16-medium-card:hover,
.home16-medium-card:focus-visible,
.home16-action-card:hover,
.home16-action-card:focus-visible {
  color: var(--text);
  border-color: #c8c2df;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(20,0,110,0.08);
  transform: translateY(-2px);
}

.home16-band--faq {
  background: #f8f3f1;
  border-top: 1px solid #eee3df;
  border-bottom: 1px solid #eee3df;
}

.home16-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 46px;
  align-items: center;
}

.home16-round-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  place-items: center;
  color: var(--white);
  background: var(--hessen-rot);
  border-radius: 50%;
}

.home16-round-icon--blue { background: var(--hessen-blau); }

.home16-faq-intro h2 {
  margin-bottom: 12px;
  font-size: 2rem;
}

.text-action {
  display: inline-block;
  margin-top: 12px;
  font-weight: 800;
  text-decoration: none;
}

.home16-faq-search {
  padding: 26px;
  background: var(--white);
  border: 1px solid #e4d9d5;
  box-shadow: 0 12px 28px rgba(72,35,29,0.06);
}

.home16-faq-search h3 {
  margin-bottom: 13px;
  font-size: 1.25rem;
}

.home16-faq-search .search-input {
  width: 100%;
}

.home-faq-results {
  margin-top: 14px;
  border-top: 1px solid var(--border);
}

.home-faq-result {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.home-faq-result strong {
  color: var(--hessen-blau);
  font-size: 0.94rem;
}

.home-faq-result span {
  flex: none;
  color: var(--muted);
  font-size: 0.82rem;
}

.home-faq-empty {
  margin: 14px 0 0;
  color: var(--muted);
}

.home16-access {
  background: var(--white);
}

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

.home16-action-card {
  min-height: 116px;
  padding: 18px 18px;
}

.home16-action-card--primary {
  background: #f1eefb;
  border-color: #d8d0f4;
}

.home16-action-card strong { display: block; color: var(--hessen-blau); }
.home16-action-card small { display: block; margin-top: 2px; color: var(--muted); }

.home16-inline-note {
  display: flex;
  gap: 10px 18px;
  align-items: center;
  margin-top: 16px;
  padding: 16px 18px;
  background: #fff8f6;
  border-left: 4px solid var(--hessen-rot);
}

.home16-inline-note strong { color: var(--hessen-blau); }
.home16-inline-note span { flex: 1 1 auto; }
.home16-inline-note a { flex: none; font-weight: 800; }

.home16-guides {
  background: #f7f7f9;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home16-section-head--guides {
  margin-bottom: 30px;
}

.home16-guide-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);
  gap: 24px;
  margin-bottom: 30px;
  padding: 30px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 6px solid var(--hessen-rot);
}

.home16-guide-feature-copy h3 {
  margin: 4px 0 10px;
  font-size: 1.65rem;
}

.home16-guide-feature-copy p { max-width: 700px; }

.home16-guide-feature-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  color: var(--hessen-blau);
  background: #f3f1fb;
}

.home16-guide-feature-meta span { color: var(--muted); font-size: 0.9rem; }
.home16-guide-feature-meta strong { margin-top: 6px; font-size: 1.2rem; }

.button-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding: 10px 15px;
  color: var(--white);
  background: var(--hessen-blau);
  font-weight: 800;
  text-decoration: none;
}

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

.home16-guide-group {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--border);
}

.home16-guide-group-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-content: start;
}

.home16-group-index {
  color: var(--hessen-rot);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.home16-guide-group-head h3 { margin: 0 0 6px; font-size: 1.25rem; }
.home16-guide-group-head p { margin: 0; color: var(--muted); font-size: 0.92rem; }

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

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

.home16-medium-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  min-height: 210px;
  padding: 20px;
}

.home16-medium-card .quick-arrow {
  grid-column: 2;
  justify-self: end;
  margin-top: auto;
}

.home16-link-list {
  background: var(--white);
  border: 1px solid var(--border);
}

.home16-link-list > a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 17px 20px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.home16-link-list > a:last-child { border-bottom: 0; }
.home16-link-list > a:hover,
.home16-link-list > a:focus-visible { background: #faf9fc; }
.home16-link-list > a > span:first-child { display: flex; gap: 14px; align-items: center; }
.home16-link-list strong { display: block; color: var(--hessen-blau); }
.home16-link-list small { display: block; margin-top: 2px; color: var(--muted); }
.home16-link-list .ui-icon { width: 40px; height: 40px; }

.home16-about {
  background: #fbfaf7;
  border-bottom: 1px solid #ece8df;
}

.home16-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
  gap: 40px;
  align-items: start;
}

.home16-about-copy {
  max-width: 680px;
  padding-top: 8px;
}

.home16-about-copy h2 { font-size: 2rem; }
.home16-video { margin: 0; background: var(--white); }

.home16-application {
  background: var(--white);
}

.home16-application-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home16-application-step {
  position: relative;
  min-height: 320px;
  padding: 26px 24px 22px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-top: 4px solid var(--hessen-blau);
}

.home16-step-no {
  position: absolute;
  top: 16px;
  right: 18px;
  color: #b7b2c7;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.home16-step-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  place-items: center;
  color: var(--hessen-blau);
  background: #efecfb;
  border-radius: 50%;
}

.home16-application-step h3 { font-size: 1.22rem; }
.home16-application-step > a { font-weight: 800; }

.home16-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  color: var(--hessen-blau);
  font-size: 0.9rem;
  font-weight: 800;
}

.home16-status svg { width: 18px; height: 18px; }

.home16-more-links {
  margin-top: 14px;
  border-top: 1px solid var(--border);
}

.home16-more-links summary {
  padding: 12px 0 7px;
  color: var(--hessen-blau);
  font-weight: 800;
  cursor: pointer;
}

.home16-more-links div {
  display: grid;
  gap: 8px;
  padding: 5px 0 8px;
}

.home16-security {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  color: var(--white);
  background: #2a2573;
}

.home16-security h2,
.home16-security p,
.home16-security .section-kicker { color: var(--white); }
.home16-security h2 { margin-bottom: 5px; }
.home16-security p:last-child { margin-bottom: 0; color: rgba(255,255,255,0.82); }

.home16-security-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: var(--hessen-blau);
  background: var(--white);
  border-radius: 50%;
}

.button-link--light {
  margin: 0;
  color: var(--hessen-blau);
  background: var(--white);
}
.button-link--light:hover,
.button-link--light:focus-visible { color: var(--white); background: var(--hessen-rot); }

.home16-helpdesk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.7fr);
  gap: 44px;
  align-items: center;
  padding-top: 54px;
  padding-bottom: 54px;
  color: var(--white);
  background: var(--hessen-blau);
}

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

.home16-helpdesk h2 { margin-bottom: 10px; font-size: 2.2rem; }
.home16-helpdesk-intro > p:last-child { max-width: 600px; color: rgba(255,255,255,0.82); }

.home16-helpdesk-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  place-items: center;
  color: var(--hessen-blau);
  background: var(--white);
  border-radius: 50%;
}

.home16-helpdesk-contact {
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.07);
}

.home16-phone {
  display: block;
  margin: 3px 0 14px;
  font-size: 1.75rem;
  font-weight: 800;
  text-decoration: none;
}

.home16-helpdesk-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  padding: 11px 15px;
  color: var(--hessen-blau) !important;
  background: var(--white);
  font-weight: 800;
  text-decoration: none;
}

.home16-helpdesk-button svg { width: 17px; height: 17px; }
.home16-helpdesk-button:hover,
.home16-helpdesk-button:focus-visible { color: var(--white) !important; background: var(--hessen-rot); }

@media (max-width: 980px) {
  .home16-hero,
  .home16-faq-grid,
  .home16-about-grid,
  .home16-helpdesk {
    grid-template-columns: 1fr;
  }

  .home16-bento { grid-template-columns: 1fr; }
  .home16-feature-card { min-height: 330px; }
  .home16-action-row { grid-template-columns: 1fr; }
  .home16-guide-feature { grid-template-columns: 1fr; }
  .home16-guide-group { grid-template-columns: 1fr; }
  .home16-medium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home16-application-flow { grid-template-columns: 1fr; }
  .home16-application-step { min-height: 0; }
  .home16-security { grid-template-columns: auto 1fr; }
  .home16-security .button-link { grid-column: 2; justify-self: start; }
}

@media (max-width: 720px) {
  .home16-page main > header,
  .home16-page main > section,
  .home16-page main > footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .home16-hero { padding-top: 34px; padding-bottom: 36px; gap: 28px; }
  .home16-search-shell { padding: 22px 20px; }
  .home16-band,
  .home16-guides,
  .home16-application,
  .home16-security { padding-top: 38px; padding-bottom: 38px; }

  .home16-section-head { display: block; }
  .home16-section-head > p { margin-top: 8px; }
  .home16-feature-card { min-height: 310px; padding: 26px 22px; }
  .home16-quick-card { min-height: 0; padding: 18px 16px; }
  .home16-medium-grid { grid-template-columns: 1fr; }
  .home16-medium-card { min-height: 0; }
  .home16-inline-note { display: block; }
  .home16-inline-note span,
  .home16-inline-note a { display: block; margin-top: 6px; }
  .home16-guide-feature { padding: 24px 20px; }
  .home16-guide-group-head { grid-template-columns: 30px 1fr; }
  .home16-link-list > a { align-items: flex-start; padding: 16px; }
  .home16-security { grid-template-columns: 1fr; }
  .home16-security .button-link { grid-column: auto; justify-self: start; }
  .home16-helpdesk { padding-top: 38px; padding-bottom: 38px; gap: 26px; }
  .home16-helpdesk-contact { padding: 20px; }
  .home-faq-result { display: block; }
  .home-faq-result span { display: block; margin-top: 3px; }
}


/* v20: Einführung mit Video und vollbreiter Suche */
.home20-intro {
  align-items: start;
  background: linear-gradient(135deg, #ffffff 0%, #f8f7fb 100%);
}

.home20-intro .home16-hero-copy {
  padding-top: 10px;
}

.home20-intro .home16-quote {
  margin-bottom: 18px;
}

.home20-faq-link {
  display: inline-flex;
  margin-top: 4px;
  font-weight: 800;
}

.home20-intro .home16-video {
  align-self: start;
}

.home16-search-band {
  padding-top: 32px;
  padding-bottom: 32px;
  background: var(--hessen-blau);
}

.home16-search-band .home16-search-shell--wide {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px 38px;
  align-items: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.home16-search-band .home16-search-copy h2 {
  margin-bottom: 6px;
}

.home16-search-band .home16-search-copy p:last-child {
  margin-bottom: 0;
  color: rgba(255,255,255,0.82);
}

.home16-search-band .search-box--hero {
  margin-top: 0;
}

.home16-search-band .search-results {
  grid-column: 2;
  width: 100%;
  margin-top: 0;
}

@media (max-width: 980px) {
  .home16-search-band .home16-search-shell--wide {
    grid-template-columns: 1fr;
  }
  .home16-search-band .search-results {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .home16-search-band {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}


/* E-Mail-Hilfe: wiederverwendete Originalkomponenten der Schul-ID-Vorlage v21.
   Blau betont die Interaktion; Rot bleibt ein zurückhaltender Akzent. */
.eyebrow, .guide-category, .section-kicker, .home16-quick-card small,
.home16-medium-card small, .home16-group-index, .search-result-type { color: var(--hessen-blau); }
.home16-search-band .section-kicker, .home16-helpdesk .section-kicker,
.home16-security .section-kicker { color: var(--white); }
.home16-band--faq { background:#f3f4fa; border-color:#e4e5f0; }
.home16-faq-search { border-color:#e0e0e9; box-shadow:0 12px 28px rgba(20,0,110,.06); }
.faq-search-panel { border-left-color:var(--hessen-blau); }
.home16-guide-feature { border-left-color:var(--hessen-blau); }
.home16-feature-card:after { pointer-events:none; }
.home16-inline-note { border-left-color:var(--hessen-blau); background:#f5f4fa; }
.home16-quick-card:hover,.home16-link-list>a:hover,.link-card:hover { border-left-color:var(--hessen-blau); }
.home16-quote { border-left-color:var(--hessen-blau); }
.faq-item:target { background:#f4f2fb; border-radius:0; box-shadow:inset 4px 0 0 var(--hessen-blau); }
.email-home .home16-hero h1 { font-size:clamp(2.55rem,4.1vw,3.7rem); }
.email-home .home16-lead { font-size:1.11rem; }
.email-home .home16-quote { font-size:1.07rem; }
.email-orientation { min-width:0; }
.email-orientation .guide-category { margin-bottom:6px; }
.email-orientation h2 { font-size:1.65rem; line-height:1.25; }
.email-orientation-content { padding:18px 18px 20px; background:#efeff3; border:1px solid var(--border); }
.email-orientation-steps { list-style:none; margin:0 0 13px; padding:0; }
.email-orientation-steps li { display:flex; gap:13px; align-items:flex-start; padding:12px 0; border-bottom:1px solid #d8d8e2; margin:0; }
.email-orientation-steps li:first-child { padding-top:0; }
.email-orientation-steps li:last-child { border-bottom:0; }
.email-orientation-steps li>span { flex:0 0 29px; height:29px; display:grid; place-items:center; border-radius:50%; color:var(--hessen-blau); background:white; font-size:.75rem; font-weight:800; }
.email-orientation-steps li strong { display:block; line-height:1.35; color:var(--hessen-blau); font-size:.98rem; }
.email-orientation-steps li small { display:block; color:var(--muted); line-height:1.4; font-size:.86rem; margin-top:3px; }
.email-orientation .button-link { margin-top:2px; }
.email-orientation .button-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.email-address { overflow-wrap:anywhere; font-size:1.06rem !important; }
.email-related { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:28px 0 16px; }
.email-related .text-action { margin-top:7px; }
.email-subpage .intro { max-width:850px; }
.email-subpage h1, .email-subpage h2, .email-subpage h3 { overflow-wrap:anywhere; hyphens:auto; }
.email-subpage .site-header { max-width:900px; }
.email-subpage .instruction-section { max-width:900px; }
.email-subpage .notice { max-width:900px; }
.email-subpage .legal-content { max-width:900px; overflow-wrap:anywhere; }
.email-subpage .email-table-wrap { max-width:860px; width:100%; overflow-x:auto; }
.email-data-table { border-collapse:collapse; width:100%; min-width:400px; margin:18px 0 23px; font-size:.96rem; }
.email-data-table th, .email-data-table td { padding:11px 15px; text-align:left; border-bottom:1px solid var(--border); }
.email-data-table th { background:#f4f2fb; color:var(--hessen-blau); border-top:2px solid var(--hessen-blau); }
.email-data-table tbody tr:nth-child(even) { background:#fbfbfc; }
.email-data-table tbody tr td:last-child { font-weight:700; color:var(--hessen-blau); }
.email-subpage .link-cards { max-width:860px; }
.email-subpage .notice ul { margin-bottom:0; }
.email-footer { max-width:none; padding:20px max(28px, calc((100vw - var(--max-width))/2 + 28px)) 30px; margin:0; border-top:1px solid var(--border); background:#fff; }
.email-footer-inner { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.email-footer-inner span { margin-left:auto; }
@media (max-width:720px) {
 .email-home .home16-hero h1 { font-size:clamp(2.3rem,9vw,2.9rem); overflow-wrap:normal; }
 .home16-guide-group { grid-template-columns:minmax(0,1fr); }
 .home16-guide-group-head { grid-template-columns:36px minmax(0,1fr); }
 .home16-guide-group-head>div, .home16-link-list>a>span:first-child { min-width:0; }
 .home16-link-list strong { overflow-wrap:anywhere; }
 .email-orientation-content { padding:16px; }
 .email-footer { padding-left:20px; padding-right:20px; }
 .email-footer-inner span { margin-left:0; width:100%; }
 .email-related { align-items:flex-start; flex-direction:column; }
 .email-subpage .faq-list summary { padding-left:8px; }
 .email-subpage .faq-answer { padding-left:8px; }
}