@charset "UTF-8";
/* ==========================================================================
   Leseansicht der Parteizeitung.
   Mobile first: am Handy eine Seite in voller Breite, am Tablet und PC
   zwei Seiten nebeneinander wie bei einer aufgeschlagenen Zeitung.
   ========================================================================== */

@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --blau-tief:#0B2C4C;--blau:#0E5C9E;--gelb:#FFCB05;
  --buehne:#1B2733;--papier:#fff;--linie:rgba(255,255,255,.16);
  --kopf:3.25rem;--fuss:3.5rem;
  --schrift:'Barlow',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.leser{
  margin:0;background:var(--buehne);color:#fff;font-family:var(--schrift);
  display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;
}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gelb);outline-offset:2px;border-radius:4px}
svg{width:1.25rem;height:1.25rem;flex:none}

/* ------------------------------------------------------------------ Kopf */
.leser__kopf{
  height:var(--kopf);flex:none;display:flex;align-items:center;gap:.5rem;
  padding:0 .6rem;padding-top:env(safe-area-inset-top,0);background:var(--blau-tief);
  border-bottom:1px solid var(--linie);height:calc(var(--kopf) + env(safe-area-inset-top,0px));
}
.leser__zurueck{
  display:inline-flex;align-items:center;gap:.35rem;color:#fff;text-decoration:none;
  font-weight:600;font-size:.95rem;padding:.5rem .4rem;border-radius:6px;flex:none;
}
.leser__zurueck:hover{background:rgba(255,255,255,.12)}
.leser__zurueck span{display:none}

.leser__titel{flex:1;min-width:0;text-align:center;line-height:1.15}
.leser__titel strong{
  display:block;font-family:'Barlow Condensed',var(--schrift);font-weight:700;font-size:1.05rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.leser__titel span{display:none;font-size:.8rem;color:#9FBAD2}

.leser__werkzeuge{display:flex;align-items:center;gap:.15rem;flex:none}
.wz{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;color:#fff;
  cursor:pointer;padding:.55rem;border-radius:6px;font:600 .9rem var(--schrift);text-decoration:none;
  min-width:2.5rem;min-height:2.5rem;justify-content:center;
}
.wz:hover{background:rgba(255,255,255,.14);color:#fff}
.wz[aria-pressed="true"]{background:var(--gelb);color:var(--blau-tief)}
.wz__text{display:none}
.leser__zoom{display:none;font-size:.85rem;color:#9FBAD2;min-width:3.2rem;text-align:center}

/* Am Handy nur die wichtigsten Knöpfe zeigen */
#knopfRaus,#knopfRein,#knopfVollbild{display:none}

@media (min-width:620px){
  .leser__zurueck span{display:inline}
  .leser__titel span{display:block}
  .leser__zoom{display:inline}
  #knopfRaus,#knopfRein{display:inline-flex}
  .wz__text{display:inline}
}
@media (min-width:900px){
  #knopfVollbild{display:inline-flex}
  .leser__kopf{padding:0 1rem;gap:1rem}
  .leser__titel strong{font-size:1.2rem}
}

/* ------------------------------------------------------------- Seiten */
.leser__buehne{
  flex:1;min-height:0;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;align-items:flex-start;justify-content:center;padding:.6rem;
  scroll-behavior:smooth;
}
.leser__seiten{display:flex;gap:.5rem;align-items:flex-start;justify-content:center;margin:auto}
.leser__seiten canvas{
  display:block;background:var(--papier);border-radius:3px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.9);max-width:100%;height:auto;
}
.leser__seiten.blaettert{opacity:.45;transition:opacity .12s linear}
@media (min-width:900px){
  .leser__buehne{padding:1.4rem}
  .leser__seiten{gap:.9rem}
}

/* ------------------------------------------------------------ Ladezustand */
.leser__status{
  position:absolute;inset:0;display:grid;place-content:center;gap:.9rem;justify-items:center;
  background:var(--buehne);color:#9FBAD2;font-size:.95rem;text-align:center;padding:1.5rem;
}
.leser__status[hidden]{display:none}
.leser__status p{margin:0}
.leser__balken{width:min(70vw,260px);height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.leser__balken span{display:block;height:100%;width:0;background:var(--gelb);transition:width .2s ease}
.leser__ersatz{position:absolute;inset:0;display:grid;place-content:center;gap:1rem;justify-items:center;text-align:center;padding:1.5rem}
.knopf{display:inline-block;background:var(--gelb);color:var(--blau-tief);font-weight:600;
  padding:.75rem 1.3rem;border-radius:6px;text-decoration:none}

/* ------------------------------------------------------------------- Fuß */
.leser__fuss{
  flex:none;display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;
  padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px));
  background:var(--blau-tief);border-top:1px solid var(--linie);min-height:var(--fuss);
}
.blaettern{
  background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;border-radius:50%;
  width:2.6rem;height:2.6rem;display:grid;place-items:center;flex:none;
}
.blaettern:hover{background:var(--gelb);color:var(--blau-tief)}
.blaettern:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.1);color:#fff}
.leser__anzeige{font-family:'Barlow Condensed',var(--schrift);font-weight:700;font-size:1.05rem;
  min-width:4.2rem;text-align:center;flex:none}

#regler{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;
  background:rgba(255,255,255,.25);cursor:pointer;
}
#regler::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--gelb);border:0;cursor:pointer}
#regler::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--gelb);border:0;cursor:pointer}

/* ------------------------------------------------------ Seitenübersicht */
.leser__uebersicht{
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:20;max-height:62vh;
  background:#16212C;border-top:1px solid var(--linie);padding:.8rem;overflow-y:auto;
  box-shadow:0 -18px 40px -24px #000;
}
.leser__uebersicht[hidden]{display:none}
.leser__uebersicht-titel{margin:0 0 .7rem;font-weight:600;font-size:.9rem;color:#9FBAD2}
.leser__thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.7rem}
.thumb{background:none;border:0;padding:0;cursor:pointer;display:block;text-align:center;color:#9FBAD2;font-size:.8rem}
.thumb canvas,.thumb .thumb__platz{
  width:100%;aspect-ratio:210/297;background:#0E1821;border-radius:3px;display:block;
  border:2px solid transparent;
}
.thumb[aria-current="true"] canvas,.thumb[aria-current="true"] .thumb__platz{border-color:var(--gelb)}
.thumb span{display:block;margin-top:.25rem}
@media (min-width:900px){
  .leser__uebersicht{top:calc(var(--kopf) + env(safe-area-inset-top,0px));bottom:0;right:auto;width:270px;
    max-height:none;border-top:0;border-right:1px solid var(--linie)}
  .leser__thumbs{grid-template-columns:repeat(2,1fr)}
  body.leser.uebersicht-offen .leser__buehne{margin-left:270px}
}

/* --------------------------------------------------------------- Nachbarn */
.leser__nachbarn{
  position:fixed;left:0;right:0;bottom:calc(var(--fuss) + env(safe-area-inset-bottom,0px));
  display:none;gap:1.5rem;justify-content:center;padding:.4rem;font-size:.85rem;
}
.leser__nachbarn a{color:#9FBAD2;text-decoration:none}
.leser__nachbarn a:hover{color:var(--gelb)}
@media (min-width:1100px){.leser__nachbarn{display:flex}}

@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}