/* ------------------------------------------------------------------ *
 *  werbung.css — die Bilderfolge zu testprofil.ch
 *
 *  Wird von der Einstiegsseite und von beiden Anwendungen geladen.
 *  Die Farbnamen sind dieselben wie in site.css, app.css und
 *  mindmap.css; die Ersatzwerte dahinter greifen nur, falls die Folge
 *  je auf einer Seite ohne diese Vorlagen landet.
 * ------------------------------------------------------------------ */

.wb{
  --wb-linie: var(--line, #E4E0D8);
  --wb-blatt: var(--card, #FFFFFF);
  --wb-text:  var(--ink, #1F1E1C);
  --wb-grau:  var(--ink-2, #6A665E);
  --wb-matt:  var(--ink-3, #969187);
  display:flex; flex-direction:column; gap:12px;
  font-family:inherit;
}

/* --- Bühne --------------------------------------------------------- */
.wb-buehne{
  position:relative;
  aspect-ratio:1240 / 613;
  border:1px solid var(--wb-linie);
  border-radius:8px;
  overflow:hidden;
  background:var(--wb-blatt);
}
.wb-bild{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .3s ease;
}
.wb-bild.an{ opacity:1 }
@media(prefers-reduced-motion:reduce){ .wb-bild{ transition:none } }

/* Die beiden Pfeile im Bild. Sie sind die einzige Bedienung, seit die
   Leiste darunter weggefallen ist, und deshalb immer sichtbar. */
.wb-pfeil-bild{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; padding:0;
  border:1px solid var(--wb-linie);
  border-radius:50%;
  background:rgba(255,255,255,.86);
  color:var(--wb-text);
  cursor:pointer;
  opacity:.9; transition:opacity .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.wb-pfeil-bild:hover{ opacity:1 }
.wb-pfeil-bild:disabled{ opacity:0; cursor:default }
.wb-links{ left:12px }
.wb-rechts{ right:12px }
.wb-pfeil-bild::before{
  content:""; position:absolute; top:50%; left:50%;
  width:10px; height:10px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
}
.wb-links::before{ transform:translate(-35%,-50%) rotate(-135deg) }
.wb-rechts::before{ transform:translate(-65%,-50%) rotate(45deg) }

/* Die Punkte stehen mittig unter dem Bild. */
.wb-punkte{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:-2px;
}
.wb-punkt{
  width:8px; height:8px; padding:0;
  border:1px solid var(--wb-matt);
  border-radius:50%;
  background:none;
  cursor:pointer;
}
.wb-punkt.an{ background:var(--wb-text); border-color:var(--wb-text) }
.wb-punkt:hover{ border-color:var(--wb-text) }

/* Unter dem Bild: Legende links, Verweis rechts. */
.wb-unten{
  display:flex; align-items:flex-start; gap:18px;
}
.wb-legende{
  margin:0; flex:1;
  font-size:13px; line-height:1.45;
  color:var(--wb-grau);
  min-height:2.9em;
}
.wb-verweis{
  flex:0 0 auto;
  text-decoration:none;
  padding:9px 20px;
  white-space:nowrap;
}

/* ------------------------------------------------------------------ *
 *  Die Sperre vor dem Druckdialog
 * ------------------------------------------------------------------ */
.wb-hinter{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(31, 30, 28, .38);
}
.wb-fenster{
  width:min(720px, 100%);
  max-height:100%;
  overflow:auto;
  background:var(--card, #FFFFFF);
  color:var(--ink, #1F1E1C);
  border:1px solid var(--line, #E4E0D8);
  border-radius:10px;
  padding:24px 26px;
  font-family:var(--ui, 'Montserrat', sans-serif);
}
.wb-titel{
  margin:0 0 6px;
  font-size:19px; font-weight:600; letter-spacing:-.02em;
}
.wb-hinweis{
  margin:0 0 16px;
  font-size:13.5px; line-height:1.55;
  color:var(--ink-2, #6A665E);
}
.wb-sperre[hidden]{ display:none }
.wb-sperre{
  margin:14px 0 0;
  font-size:12.5px;
  color:var(--ink-3, #969187);
}
.wb-sperre.wb-frei{ color:var(--ink-2, #6A665E) }

.wb-fuss{
  display:flex; justify-content:flex-end; gap:10px;
  margin-top:18px;
}
.wb-knopf{
  border:1px solid var(--line, #E4E0D8);
  background:var(--card, #FFFFFF);
  border-radius:6px;
  font:inherit; font-size:13.5px; font-weight:500;
  color:var(--ink, #1F1E1C);
  padding:9px 20px;
  cursor:pointer;
}
.wb-knopf:hover:not(:disabled){ border-color:var(--ink-3, #969187) }
.wb-knopf:disabled{ color:var(--ink-3, #969187); cursor:default }
.wb-knopf-haupt:not(:disabled){
  background:var(--ink, #1F1E1C);
  border-color:var(--ink, #1F1E1C);
  color:#fff;
}

@media(max-width:600px){
  .wb-fenster{ padding:18px 16px }
  .wb-legende{ font-size:12.5px }
  .wb-unten{ flex-direction:column; gap:12px }
  .wb-verweis{ align-self:stretch; text-align:center }
  .wb-pfeil-bild{ width:32px; height:32px }
}

/* Im Ausdruck hat die Werbung nichts verloren. */
@media print{
  .wb, .wb-hinter{ display:none !important }
}