/* Lagenwechsel: Vortragsfoto (Lage 1) links, Via auf der rechten Bildkante, Kette (Lage 2) rechts.
   Beide Spalten minmax(0,1fr), gap 0, sonst stimmt die Uebergabehoehe nicht (Formel in _lagenwechsel.php).
   Via-Radius 9 px = right:-9px / top:-9px. Breakpoint 920 px wie .speak-grid. Kein Rahmen am Bild
   (outline statt border), damit die Bildhoehe exakt w/h bleibt. grid-template-rows auto 1fr: der Ueberschuss der
   hoeheren Kettenspalte landet in Zeile 2, Zeile 1 bleibt exakt Bildhoehe (Caption sitzt 10 px unterm Foto).
   Hochformat-Zuschnitt (--ar-m) nur bis 600 px, identisch mit media= der <source> in _lagenwechsel.php. */
.lw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:0;row-gap:0;align-items:start;margin:44px 0 0}
.lw-img{position:relative;z-index:2;grid-column:1;grid-row:1}
.lw-img img{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;border-radius:0 var(--corner) 0 0;outline:1px solid var(--hairline);outline-offset:-1px;box-shadow:var(--sh-bild,0 1px 2px rgba(26,26,30,.08),0 10px 24px rgba(26,26,30,.12))}
.lw-img::after{content:"";position:absolute;right:-9px;top:calc(var(--exit) - 9px);width:18px;height:18px;border-radius:50%;border:2px solid var(--violet);background:radial-gradient(circle,var(--violet) 0 3px,var(--paper) 3.5px)}
.lw .caption{grid-column:1;grid-row:2;font-family:var(--cond);font-size:.84rem;color:var(--muted);margin-top:10px;padding-right:28px;max-width:none}
.lw-weiter{grid-column:2;grid-row:1/3;position:relative;z-index:1}
.lw-weiter svg{display:block;width:100%;height:auto;overflow:visible}
.lw-weiter .tr{stroke:#C9C6BF;stroke-width:2.4;fill:none}
.lw-weiter .rev{stroke-dasharray:3 4}
.lw-weiter .tear{fill:var(--violet-hi)}
.lw-weiter .pad{fill:var(--paper);stroke:var(--violet);stroke-width:2.4;transition:fill .15s}
.lw-weiter text{font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.lw-weiter .sub{font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:400;fill:var(--muted)}
.lw-weiter .mk{font-size:10.5px;letter-spacing:.09em;fill:var(--muted)}
.lw-weiter a{cursor:pointer}
.lw-weiter a:hover .pad,.lw-weiter a:focus-visible .pad{fill:var(--violet)}
.lw-weiter a:hover text,.lw-weiter a:focus-visible text{fill:var(--violet)}
.lw-weiter svg a:focus-visible{outline:none}
html[data-theme="dark"] .lw-weiter .tr{stroke:var(--grau-svg)}
.lw-mk{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}  /* Desktop: nur fuer Screenreader */
.lw-m,.lw-m-rev{display:none}
@media(prefers-reduced-motion:reduce){.lw-weiter .pad{transition:none}}

/* Unterseiten (/referent/, /en/speaker/): Folienfrage und Absaetze unter der Kette, Figur gedeckelt */
.lw-wrap .lw{max-width:1200px;margin-top:14px}
.lw-q{position:relative;font-family:var(--serif);font-style:italic;font-optical-sizing:none;font-variation-settings:"opsz" 14;font-size:1.35rem;line-height:1.4;color:var(--violet);margin:6px 0 0 24px;padding-top:14px;max-width:28ch}
.lw-q::before{content:"";position:absolute;top:0;left:0;width:76px;border-top:1px solid var(--violet)}
.lw-a{color:var(--muted);font-size:.97rem;margin:12px 0 0 24px;max-width:46ch}
.lw-a a{font-weight:600}

@media(max-width:920px){
  .lw{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .lw-img,.lw .caption,.lw-weiter{grid-column:1}
  .lw-img{grid-row:1}.lw .caption{grid-row:2;padding-right:0}.lw-weiter{grid-row:3;margin-top:26px}
  .lw-img::after{display:none}                  /* das Via wandert an den Kopf der Liste */
  .lw-weiter svg{display:none}
  .lw-list{border-left:2px solid var(--hairline);margin-left:8px}
  .lw-mk{position:relative;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
         font-family:var(--cond);font-weight:500;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:0 0 10px 24px;max-width:none}
  .lw-mk::before{content:"";position:absolute;left:-10px;top:-1px;width:18px;height:18px;border-radius:50%;border:2px solid var(--violet);background:radial-gradient(circle,var(--violet) 0 3px,var(--paper) 3.5px)}
  .lw-m{display:block;list-style:none;margin:0;padding:0}
  .lw-m li{position:relative;padding:12px 0 12px 24px}
  .lw-m li::before{content:"";position:absolute;left:-8px;top:17px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--violet)}
  .lw-m a{display:block;text-decoration:none;color:var(--ink)}
  /* Spezifitaet > globale Inhaltslink-Regel (main :is(li,...) a:not(...)x5 = 0,5,3) der Unterseiten */
  main .lw-m a:not(.btn):not(.plain):not(.konf):not(.quietlink):not(.hs-mehr),main .lw-m-rev a:not(.btn):not(.plain):not(.konf):not(.quietlink):not(.hs-mehr){text-decoration:none}
  .lw-m b{display:block;font-weight:600}
  .lw-m span{display:block;font-size:.9rem;color:var(--muted)}
  .lw-m a:hover b,.lw-m a:hover span{color:var(--violet)}
  .lw-m-rev{display:block;position:relative;padding:12px 0 0 24px;font-size:.9rem}
  .lw-m-rev::before{content:"";position:absolute;left:-7px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--violet)}
  .lw-m-rev a{color:var(--violet);text-decoration:none}
  .lw-q,.lw-a{margin-left:0}
}

/* Hochformat-Zuschnitt nur auf Telefonen; Grenze identisch mit media= der <source> in _lagenwechsel.php */
@media(max-width:600px){
  .lw-img img{aspect-ratio:var(--ar-m,var(--ar))}
}