/* Pro-Anleitungen „Dateien benennen“: Kopf, Kästen und Walkthrough wie die Vorlage
   intelligente-ausrichtung. Dazu die Seitenleiste mit den Seiten dieses Themas. */

/* Kopfbereich */
.guide-head { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(15px, 2.1vw, 24px); }
.guide-head .container { text-align: left; }
.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; }
.guide-head .eyebrow { font-size: 1.3rem; margin-bottom: 8px; text-transform: none; letter-spacing: .02em; }
.guide-hero-title {
  font-size: clamp(2.05rem, 4.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
  margin: 0 0 16px;
  text-align: left;
}
.guide-hero-title .hl { color: var(--accent-deep); }
.guide-divider { height: 7px; }

/* Abstand des Inhaltsbereichs; Vorspann und Testhinweis stehen in leiste.css */
.guide-body { padding-top: clamp(22px, 3.5vw, 40px); padding-bottom: clamp(24px, 4vw, 48px); }

/* Schrift im Anleitungstext */
.guide strong, .walk-text strong { font-weight: 600; }
.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;
}
.guide p {
  font-size: 1.12rem; line-height: 1.72;
  color: #000; margin-bottom: 1.1em;
}
.benennen-inhalt > p { max-width: 64ch; }
.guide .walk-body { margin: 1.1em 0 0; font-size: 1.15rem; line-height: 1.6; color: #000; }
.guide .walk-body + .walk { margin-top: 28px; }

/* Abstand nach einer Überschrift */
.guide h2 + .walk { margin-top: clamp(32px, 4.5vw, 52px); }

/* Walkthrough: Schritte in .walk, Text und Bild je halbe Spalte,
   gerade Schritte mit Bild links, Bild mitlaufend, ab 821 px zwei Spalten */
.walk { display: grid; gap: clamp(48px, 7vw, 84px); margin: 0 0 clamp(48px, 7vw, 84px); }
.walk-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.walk-step:nth-child(even) .walk-media { order: -1; }
.walk-step:has(> .walk-text > .walk-body) { align-items: start; }
.walk-step:has(.walk-zusatz) { align-items: start; }
.walk-step:has(.walk-zusatz) > .walk-text { padding-top: 24px; }
.walk-step:has(> .walk-text > ol) > .walk-media { position: sticky; top: 24px; }
.walk-media { margin: 0; }
.walk-media img { display: block; width: 100%; height: auto; }
.walk-media .walk-zusatz { margin: 1.4em 0 0; }
.walk-media .bild-unterschrift { max-width: 460px; margin: .9em auto 0; text-align: center; font-size: .9rem; line-height: 1.5; color: var(--ink-faint); }
.walk-text ol { margin: 0; padding-left: 1.5em; }
.walk-text li {
  font-size: 1.15rem; line-height: 1.6; color: #000;
  margin-bottom: .7em; padding-left: .2em;
}
.walk-text li::marker { color: var(--accent-deep); font-weight: 700; }

/* Bis 820 px: untereinander, Bild nach dem Text, nichts mitlaufend */
@media (max-width: 820px) {
  .walk-step { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .walk-step .walk-media { order: 0 !important; position: static !important; }
}


/* Bildrahmen, Marken, Lupe und Vergrößerung */
.benennen-inhalt { --marke: 26px; }
.bild-rahmen {
  position: relative; display: block; width: 100%; padding: 0; font: inherit; color: inherit;
  border: 0; border-radius: 12px; background: none; cursor: zoom-in;
}
.bild-rahmen img { display: block; width: 100%; height: auto; border-radius: 11px; }
.walk-media .bild-rahmen {
  max-width: 460px; margin-inline: auto;
  filter: drop-shadow(0 18px 40px rgba(16, 24, 40, .16));
}
.bild-rahmen:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Bilder mit eingebautem Fensterschatten und durchsichtigem Rand: kein zweiter Schatten */
.walk-media .bild-rahmen.bild-eigener-schatten { filter: none; }
.bild-rahmen.bild-eigener-schatten img { border-radius: 0; }
.bild-rahmen.bild-eigener-schatten .zoom-hinweis { right: calc(7.7% - 14px); bottom: calc(11% - 14px); }
.zoom-hinweis {
  position: absolute; right: -14px; bottom: -14px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18), 0 4px 12px rgba(16, 24, 40, .12);
  transition: transform .15s ease;
}
.zoom-hinweis svg { width: 18px; height: 18px; }
.bild-rahmen:hover .zoom-hinweis { transform: scale(1.08); }
.marke {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: var(--marke); height: var(--marke); 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;
}
.marke[data-seite="links"] { transform: translate(calc(-100% - 8px), -50%); }
.marke[data-seite="rechts"] { transform: translate(8px, -50%); }
.marke[data-seite="mitte"] { transform: translate(-50%, -50%); }
@media (max-width: 640px) {
  .benennen-inhalt { --marke: 22px; }
  .marke { font-size: 12px; }
}
@media (max-width: 820px) {
  .walk-media .bild-rahmen { margin-inline: 0; }
}

/* Vergrößerung: Rahmen samt Marken, halbe Pixelbreite = Fenstergröße auf dem Mac */
dialog.benennen-zoom {
  --marke: 26px;
  border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
  width: 100vw; height: 100vh; height: 100dvh; margin: 0; overflow: auto; overscroll-behavior: contain;
}
dialog.benennen-zoom::backdrop { background: rgba(29, 29, 31, .38); }
dialog.benennen-zoom[open] { display: grid; justify-items: center; align-items: center; align-items: safe center; padding: 64px 2vw 32px; }
.benennen-zoom .zoom-schliessen {
  position: fixed; top: 16px; right: 16px; z-index: 2;
  font: inherit; font-size: .9rem; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--hairline); background: #fff; color: #44474E; cursor: pointer;
}
.benennen-zoom-bild {
  width: min(96vw, var(--voll, 760px), calc((100vh - 112px) * var(--seiten, 1.5)));
  width: min(96vw, var(--voll, 760px), calc((100dvh - 112px) * var(--seiten, 1.5)));
}
.benennen-zoom-bild figure { max-width: none; margin: 0; }
.benennen-zoom-bild .bild-rahmen { max-width: none; cursor: zoom-out; filter: none; }
.benennen-zoom-bild .zoom-hinweis, .benennen-zoom-bild figcaption { display: none; }
@media (max-width: 640px) {
  dialog.benennen-zoom { --marke: 22px; }
  dialog.benennen-zoom .marke { font-size: 12px; }
}

/* Hinweise, Bildblöcke nur mit Hinweis und Zwischenüberschrift */
.benennen-inhalt .walk-text li > p { margin: 0; }
.benennen-inhalt .walk-text li > p.walk-note,
.benennen-inhalt .walk-text > p.walk-note:only-child {
  position: relative; margin: .6em 0 0; padding: .65em .9em .65em 2.5em;
  background: #F4F5F7; border-radius: 10px; font-size: 1rem; line-height: 1.6; color: #44474E;
}
.benennen-inhalt .walk-text li > p.walk-note + p.walk-note { margin-top: .4em; }
.benennen-inhalt .walk-text > p.walk-note:only-child { margin: 0; }
.benennen-inhalt .walk-text li > p.walk-note::before,
.benennen-inhalt .walk-text > p.walk-note:only-child::before {
  content: ""; position: absolute; left: .85em; top: .85em; width: 1.1em; height: 1.1em;
  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-step.nur-hinweis { grid-template-columns: minmax(0, 460px); gap: 16px; }
.walk-step.nur-hinweis .walk-media { order: -1; position: static; }
.walk-step.nur-hinweis .walk-media .bild-rahmen { margin-inline: 0; }
.benennen-inhalt > h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.25; margin: 48px 0 10px; }
.benennen-inhalt > h2[id] { scroll-margin-top: 24px; }

/* Abschlussstreifen */
.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: 720px) {
  .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; }
}