/* Gemeinsam für die Anleitungen mit Seitenleiste: Seitenleiste, Raster, Kopfausrichtung, FAQ-Spalte */
/* Breite 1320 px: Kopf und Inhalt bis 1320 px, 24 px Rand bleiben */
.guide-head .container,
.guide-body .container { max-width: 1368px; }
@media (min-width: 900px) {
  /* Überschrift und Kennzeichnung an der Textkante, nicht an der Leiste */
  .guide-head .eyebrow,
  .guide-head .guide-subtitle,
  .guide-head .guide-hero-title { padding-left: calc(280px + clamp(20px, 4vw, 56px)); }
}

/* Raster: Leiste 280 px, Inhalt rechts mit gleichem Innenabstand */
.benennen-raster {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.benennen-inhalt { min-width: 0; }
@media (min-width: 900px) {
  .benennen-inhalt { padding-inline: clamp(20px, 4vw, 56px); }
}

/* Seitenleiste (ab 900 px) */
.leiste-gross {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  align-self: start;
}
.leiste-klein { display: none; }
.leiste-kopf {
  margin: 0 0 12px;
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.leiste-kopf a { color: inherit; }
.leiste-kopf a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Einleitung mit Bild daneben: bei schmaler Inhaltsspalte untereinander */
@media (max-width: 1199px) {
  .benennen-inhalt .guide-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .benennen-inhalt .guide-intro-figure { width: min(100%, 620px); margin-inline: 0; }
}
.leiste-liste { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
.leiste-liste li { margin: 0; }
.leiste-liste a,
.leiste-liste span {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 15px;
  line-height: 1.4;
}
.leiste-liste a { color: var(--ink); }
.leiste-liste a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.leiste-liste a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leiste-liste .leiste-aktuell { color: var(--accent-deep); font-weight: 650; border-left-color: var(--accent-deep); }
.leiste-liste .leiste-aus { color: #8A8F98; }


/* Überschriften im Text wie auf den übrigen Seiten mit Leiste (gleiche Werte wie benennen.css);
   gilt nur dort, wo leiste.css geladen wird, und überstimmt .guide h2 aus anleitung.css (Größe, Abstand, 26ch) */
.benennen-inhalt h2,
.benennen-inhalt .guide h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: clamp(64px, 8vw, 96px) 0 18px;
  max-width: none;
}

/* Hinweis zur App-Sprache unter dem ersten Bildschirmfoto: eigene Zeile unter der Bildunterschrift */
.walk-media .bild-unterschrift span.bild-unterschrift { display: block; margin: .5em auto 0; }

/* FAQ innerhalb der Inhaltsspalte */
/* FAQ: Überschrift links, Abstand darunter wie bei den anderen Überschriften, Frage fett, Antwort grau, ohne Trennlinien */
#faq { padding-top: 0; }
#faq .faq-head { margin: 0 0 20px; }
#faq .faq-head h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: clamp(64px, 8vw, 96px) 0 0;
  max-width: none;
}
#faq .faq { max-width: none; margin-inline: 0; }
#faq .qa { padding: 0; border: 0; margin: 0 0 26px; }
#faq .qa h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; margin: 0 0 6px; }
#faq .qa p { font-size: 1.08rem; line-height: 1.65; color: #44474E; margin: 0; }
#faq .qa h3, #faq .qa p, #faq .faq > p { max-width: 64ch; }
#faq .faq > p { font-size: 1.08rem; line-height: 1.65; color: #44474E; margin: 0 0 26px; }

/* Unter 900 px: Seitenleiste oben als einklappbare Liste, zu Beginn geschlossen */
@media (max-width: 899px) {
  .benennen-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .leiste-gross { display: none; }
  .leiste-klein {
    display: block;
    margin: 0 0 32px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: #F8FAFC;
  }
  .leiste-klein > summary {
    cursor: pointer;
    padding: 14px 18px;
    color: var(--accent-deep);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .leiste-klein > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .leiste-klein .leiste-kopf { margin: 4px 18px 8px; }
  .leiste-klein .leiste-liste { margin: 0 18px 14px; border-left-color: var(--hairline); }
  .leiste-klein .leiste-liste a,
  .leiste-klein .leiste-liste span { padding: 9px 0 9px 14px; }
}

/* Vorspann und Testhinweis wie in den Business-Anleitungen */
.guide .guide-vorspann {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 34ch;
  margin: 0 0 20px;
  color: var(--ink);
}
.guide .guide-vorspann:lang(ja), .guide .guide-vorspann:lang(ko), .guide .guide-vorspann:lang(zh) { max-width: 22em; }
.guide .guide-hint.guide-intro-hint { margin: 0 0 36px; font-size: 1rem; line-height: 1.6; max-width: 645px; color: #44474E; }
.guide .guide-hint.guide-intro-hint a { font-weight: inherit; }
.benennen-inhalt .guide-intro-grid { align-items: start; }
/* KI-Anleitung: Testhinweis direkt über der Voraussetzung, so breit wie die Textspalte darüber */
.ki-testhinweis { margin-top: 22px; }
.guide.ki-testhinweis .guide-hint.guide-intro-hint { margin: 0; max-width: none; }
.ki-testhinweis + .guide-voraussetzung { margin-top: 12px; }