/* Seitenstil der Pro-Anleitungen (aus hotfolder-einrichten übernommen) + Ergänzungen */
    /* Kopfbereich: Abstand wie auf den Guide-Seiten, nicht der Landing-Hero */
.guide-head { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(15px, 2.1vw, 24px); }
.guide-head .container { text-align: left; }
/* Markenlogo wie auf der Startseite, hier jedoch zentriert */
.guide-brand { justify-content: flex-start; margin-bottom: 32px; }
.guide-brand-link { width: fit-content; color: inherit; text-decoration: none; }
.guide-brand-link:hover { text-decoration: none; }
.guide-brand-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 16px; }
.trial-strip .container {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-content: center;
  column-gap: 28px;
  row-gap: 8px;
  min-height: 180px;
}
.trial-strip .container > p {
  grid-column: 1;
  grid-row: 2;
}
.guide-final-badge {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  text-align: center;
}
.guide-final-badge .badge {
  display: block;
}
.guide-final-badge .req-note {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin-top: 0;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (max-width: 760px) {
  .trial-strip .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    text-align: center;
  }
  .trial-strip .container > p { grid-column: 1; grid-row: 1; }
  .guide-final-badge { grid-column: 1; grid-row: 2; }
  .guide-final-badge .req-note {
    position: static;
    transform: none;
    width: auto;
    margin-top: 14px;
  }
}
.guide-hero-title { text-align: left; }
.guide-hero-title .hl { color: var(--accent-deep); }
/* Trennstreifen: leer und halb so hoch wie zuvor */
.guide-divider { height: 7px; }
.guide-head .eyebrow { font-size: 1.3rem; margin-bottom: 8px; text-transform: none; letter-spacing: .02em; }

/* Titel: gleiche Schriftart/-dicke wie der Startseiten-Titel,
   Größe leicht gezähmt, damit der Titel auf dem Desktop in einer Zeile bleibt */
.guide-hero-title {
  font-size: clamp(2.05rem, 4.8vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
  margin: 0 0 16px;
}
/* Untertitel: kleiner, ruhiger — Stil wie die Lead-Texte der Startseite */
.guide-subtitle {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
  text-align: left;
  text-wrap: pretty;
}
.guide-subtitle strong { font-weight: 600; }

/* Inhaltsbereich: ruhige, links ausgerichtete Lesespalte auf Weiß,
   gleiche linke Kante wie der Kopfbereich */
.guide { max-width: 70ch; margin-inline: 0; }
.guide-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: center;
  max-width: none;
}
.guide-intro-card {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(234,242,249,.72), #F8FAFC 72%);
}
.guide .guide-intro-label {
  margin: 0 0 12px;
  color: var(--accent-ink);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .035em;
}
.guide-intro-card .guide-lead {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.65;
}
.guide-intro-figure { margin: 0; }
/* Business-Hinweis breit unter dem Kasten „Kurz erklärt“ */
.guide .guide-hint.guide-intro-hint { margin: 18px 0 0; font-size: .95rem; }
.guide-intro-main { min-width: 0; }
.guide-intro-figure img {
  width: 100%;
  filter: drop-shadow(0 18px 40px rgba(16,24,40,.16));
}
@media (max-width: 860px) {
  .guide-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .guide-intro-figure { width: min(100%, 620px); margin-inline: auto; }
}
/* Hervorhebungen bewusst nur halbfett, nicht zu wuchtig */
.guide strong, .walk-text strong { font-weight: 600; }
/* Textbereich näher an die Trennleiste rücken */
.guide-body { padding-top: clamp(22px, 3.5vw, 40px); }
/* FAQ dichter an die Anleitung: weniger Abstand unten/oben */
.guide-body { padding-bottom: clamp(24px, 4vw, 48px); }
#faq { padding-top: clamp(16px, 2.5vw, 32px); }
.guide h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-top: clamp(22px, 2.8vw, 34px);
  margin-bottom: 20px;
  max-width: 26ch;
}
.guide .guide-first-heading {
  font-size: clamp(1.45rem, 2.7vw, 2rem);
}
.guide p {
  font-size: 1.12rem; line-height: 1.72;
  color: #000; margin-bottom: 1.1em;
}
/* Einleitungstext über der ersten Überschrift – hervorgehoben */
.guide-lead {
  font-size: 1.5rem; font-weight: 400;
  line-height: 1.5; margin-bottom: 1.3em;
}
.guide p.walk-lead { font-size: 1.22rem; font-weight: 600; margin-bottom: 0; }
.guide-outro { margin-top: clamp(40px, 6vw, 64px); }
.guide p.walk-restart { color: #44474E; }
.guide p.press-note {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  color: #44474E;
}

/* Walkthrough: Screenshot neben Text, Reihen wechseln die Seite */
.walk {
  max-width: 960px; margin: clamp(30px, 4vw, 44px) 0 0;
  display: grid; gap: clamp(44px, 6vw, 72px);
}
.walk-step {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.walk-step:nth-child(even) .walk-media { order: -1; }
.walk-media { margin: 0; }
.walk-media img {
  display: block; width: 100%; max-width: 440px;
  height: auto; margin-inline: auto;
}
.walk-media-large img { width: 110%; max-width: 484px; }
.walk-text ol { margin: 0; padding-left: 1.5em; }
.walk-text li {
  font-size: 1.1rem; line-height: 1.6; color: #000;
  margin-bottom: .7em; padding-left: .2em;
}
.walk-text li::marker { color: var(--accent-deep); font-weight: 700; }
.walk-note {
  margin: 1.8em 0 0; font-size: .98rem; line-height: 1.6;
  color: #44474E;
}
/* Wie der normale Anleitungstext (nicht das graue Hinweis-Layout) */
.walk-text .walk-body {
  margin: 1.1em 0 0; font-size: 1.1rem; line-height: 1.6; color: #000;
}

@media (max-width: 720px) {
  .walk-step { grid-template-columns: 1fr; gap: 20px; }
  .walk-step .walk-media { order: 0 !important; }
  .walk-media img { max-width: 420px; margin-inline: 0; }
  .walk-media-large img { width: 100%; max-width: 462px; }
}
/* ---- Ergänzungen für die Anleitung „Mit lokaler KI benennen“ ---- */
/* Nummern-Markierungen auf den Bildern, wie in den Business-Anleitungen */
.walk-media .marke {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-ink); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(16, 24, 40, .28); pointer-events: none;
}
.walk-media .marke[data-seite="links"] { transform: translate(calc(-100% - 8px), -50%); }
.walk-media .marke[data-seite="rechts"] { transform: translate(8px, -50%); }
@media (max-width: 720px) { .walk-media .marke { width: 22px; height: 22px; font-size: 12px; } }
/* Hinweise (i) innerhalb eines Schritts */
.walk-text .walk-hinweis {
  position: relative; margin: .7em 0 0; padding: .55em .8em .55em 2.3em;
  background: #F4F5F7; border-radius: 10px; font-size: .96rem; line-height: 1.55; color: #44474E;
}
.walk-text .walk-hinweis::before {
  content: ""; position: absolute; left: .75em; top: .75em; width: 1.05em; height: 1.05em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='8.2' fill='none' stroke='%237A7F88' stroke-width='1.5'/><circle cx='10' cy='6.3' r='1.1' fill='%237A7F88'/><path d='M10 9v5.2' stroke='%237A7F88' stroke-width='1.7' stroke-linecap='round'/></svg>") no-repeat center / contain;
}
.walk-text code { font-size: .95em; padding: .1em .35em; border-radius: 5px; background: #F4F5F7; }
/* Beispielschreiben: Papier mit feinem Rand und Schatten */
.dok-rahmen img { border: 1px solid var(--hairline); border-radius: 4px; box-shadow: 0 10px 28px rgba(16,24,40,.12); }
.dok-rahmen .bildzoom-hinweis { right: 10px; bottom: 10px; }
.walk-step.nur-hinweis .walk-note { margin-top: 0; font-size: 1.1rem; color: #000; }
/* Weitere Beispielschreiben als Galerie: ein Blatt, Punkte darunter (wie das Karussell der Business-Startseite) */
.dok-galerie { width: 100%; max-width: 300px; margin: 0 auto; }
/* Beispielschreiben links, Ergebnis rechts: in Lesereihenfolge, nicht im Seitenwechsel */
.walk-paar .walk-media { order: 0 !important; }
.dok-galerie .bild-rahmen { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.dok-galerie .bild-rahmen:focus-visible { outline: 3px solid var(--accent, #1D6FD8); outline-offset: 3px; }
.dok-galerie img { display: block; width: 100%; height: auto; }
.galerie-punkte { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.galerie-punkt { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: #D2D5DB; cursor: pointer; }
.galerie-punkt.is-active { background: #44474E; }
.galerie-punkt:focus-visible { outline: 3px solid var(--accent, #1D6FD8); outline-offset: 3px; }
/* Blättern in der Vergrößerung */
.bildzoom-nav {
  position: fixed; top: 50%; z-index: 2; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0 0 4px;
  border: 1px solid #E6E8EC; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1D1D1F;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.bildzoom-nav[hidden] { display: none; }
.bildzoom-nav:hover { background: #fff; }
.bildzoom-nav:focus-visible { outline: 3px solid var(--accent, #1D6FD8); outline-offset: 3px; }
.bildzoom-zurueck { left: 16px; }
.bildzoom-weiter { right: 16px; }
@media (max-width: 720px) { .bildzoom-nav { width: 40px; height: 40px; font-size: 1.6rem; } .bildzoom-zurueck { left: 8px; } .bildzoom-weiter { right: 8px; } }
/* Ergebnis-Screenshot neben der Einleitung: bringt seinen Fensterschatten selbst mit */
.guide-intro-figure.intro-ergebnis img { filter: none; }
.guide-intro-figure.intro-ergebnis .bild-rahmen { max-width: 520px; }
.intro-ergebnis figcaption { margin: -22px auto 0; max-width: 440px; text-align: center; font-size: .9rem; line-height: 1.45; color: var(--ink-faint, #6E7178); }