/* Projekt-Ansicht: schiebt sich von rechts über die Seite (wie officekgdvs.com) */
.schub {
  /* Klickfläche aller Knöpfe: 30px nach oben/unten, 60px nach links/rechts um das Zeichen herum */
  --hit-y: 30px;
  --hit-x: 60px;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: var(--weiss);
  transform: translateX(100%);
  will-change: transform;
  visibility: hidden;
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.1, 1), visibility 0s 650ms;
  font-weight: 700;
  text-transform: uppercase;
}
.schub.offen { transform: none; visibility: visible; transition-delay: 0s; }
.schub-leiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--rand);
  padding: var(--rand);
}
.schub-leiste > :last-child { justify-self: end; }
.schub-mitte { text-align: center; }
/* Obere Leiste: × auf Höhe von „Akos“, Kurs eine Zeile unter dem zweizeiligen Namen.
   Der negative Abstand unten hält die Leiste gleich hoch, das Plakat bleibt, wo es ist. */
.schub-leiste:first-child .schub-mitte { margin: 2.5em 0 -2.5em; }
.schub .schub-zu { margin-top: calc(var(--hit-y) * -1 + 0.15em); }
/* Name oben links, gleiche Stelle und Schrift wie im Kopf der Seite */
/* Die zweite Zeile ragt über die Leiste hinaus: Leiste bleibt einzeilig, Plakat so groß wie vorher */
.schub-name { letter-spacing: 0.01em; margin-bottom: -1.25em; }
.schub-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.schub button { font: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.schub button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Knöpfe sehen aus wie vorher, haben aber alle dieselbe große Klickfläche */
.schub .schub-infoknopf,
.schub .schub-infozu,
.schub .schub-zu {
  position: relative;
  z-index: 1;
  padding: var(--hit-y) var(--hit-x);
  margin: calc(var(--hit-y) * -1) calc(var(--hit-x) * -1);
}
.schub .schub-zu { font-size: 20px; line-height: 0.6; font-weight: 400; }
.schub .schub-zu:hover { text-decoration: none; }

.schub-buehne {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rand);
  padding: 0 calc(var(--rand) + 3em);
}
.schub-buehne img { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.schub-buehne.paar img { flex: 1 1 0; width: 0; height: 100%; }

/* Pfeile: nur da, wenn es links bzw. rechts eine Seite gibt */
.schub .schub-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 16px;
  font-weight: 400;
}
.schub .schub-pfeil:hover { text-decoration: none; }
.schub-pfeil.links { left: 0; padding: var(--hit-y) calc(var(--hit-x) * 2 - var(--rand)) var(--hit-y) var(--rand); }
.schub-pfeil.rechts { right: 0; padding: var(--hit-y) var(--rand) var(--hit-y) calc(var(--hit-x) * 2 - var(--rand)); }
.schub-pfeil[hidden] { display: none; }

/* Info: Tab kommt von unten, der Rest wird ausgegraut */
.schub-schleier {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
.schub-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: var(--rand) var(--rand) calc(var(--rand) * 2);
  background: var(--weiss);
  transform: translateY(100%);
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.1, 1);
  font-weight: 400;
  text-transform: none;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.schub.info-an .schub-schleier { opacity: 1; pointer-events: auto; }
.schub.info-an .schub-info { transform: none; }
.schub .schub-infozu { font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: calc(var(--rand) - var(--hit-y)); }
/* Eine gemeinsame Textspalte (Titel, Text, Betreuung gleich breit); Blocksatz mit Silbentrennung, letzte Zeile links */
.schub-info > div { max-width: 62ch; margin: 0 auto; }
/* Zeilenumbrüche im Projekttext (\n in projects.js) bleiben erhalten */
.schub-info p { white-space: pre-line; margin: 0 0 0.8em; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.schub-info .klein { color: var(--grau); font-size: 12px; }
.schub-info .info-titel { font-size: 12px; font-weight: 700; text-transform: uppercase; }
body.schub-an { overflow: hidden; }

@media (max-width: 700px) {
  .schub { --hit-y: 22px; --hit-x: 28px; }
  .schub-buehne { padding: 0 var(--rand); }
  .schub-buehne.paar { flex-direction: column; }
  .schub-buehne.paar img { width: 100%; height: 0; }
  .schub .schub-pfeil { top: auto; bottom: calc(var(--rand) * 2 + 3.5em); transform: none; }
  /* Oben: Name und × in einer Zeile, Kurs darunter über die volle Breite (überlappt nichts mehr) */
  .schub-leiste:first-child { grid-template-columns: 1fr auto; row-gap: 0.8em; }
  .schub-name { white-space: nowrap; margin-bottom: 0; }
  .schub-leiste:first-child .schub-mitte { grid-column: 1 / -1; grid-row: 2; margin: 0; text-align: left; transform: none !important; }
  /* Hochformat-Foto über der Zeichnung: auf deren Breite zugeschnitten (setzt schub.js) */
  .schub-buehne.paar img.zuschnitt { align-self: center; object-fit: cover; }
}
.schub-mitte { transition: transform 300ms ease; }

/* Bild groß ansehen: ganzer Bildschirm, Klick zoomt 2,5-fach an der Stelle */
.gross { position: fixed; inset: 0; z-index: 40; display: none; overflow: auto; background: var(--weiss); touch-action: pan-x pan-y pinch-zoom; }
.gross.offen { display: flex; }
.gross img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.gross.nah img { max-width: none; max-height: none; width: 250%; cursor: zoom-out; }
.gross-zu { position: fixed; top: var(--rand); right: var(--rand); z-index: 1; padding: 20px; margin: -20px; font: inherit; font-size: 20px; line-height: 0.6; color: var(--schwarz); background: none; border: 0; cursor: pointer; }
.schub-buehne img { cursor: zoom-in; }
.schub-mitte .rest { white-space: nowrap; }
@media (max-width: 700px) {
  .schub-mitte .trenn { display: none; }
  .schub-mitte .rest { display: block; }
}
.schub-buehne.paar img.zuschnitt { align-self: center; object-fit: cover; }

/* Foto + Zeichnung: oben Luft zur Kurs-Zeile (PAAR_LUFT = 3em, auch in schub.js) */
@media (min-width: 701px) { .schub-buehne.paar { padding-top: 3em; } }
/* Foto + Zeichnung (immer die letzte Seite, rechts kein Pfeil): gleiche Größe wie vorher,
   aber etwas nach rechts gerückt, damit das Foto nicht am linken Pfeil klebt */
@media (min-width: 701px) { .schub-buehne.paar { padding-left: calc(var(--rand) + 6em); padding-right: var(--rand); } }

/* Info-Tab: Sprachwahl EN/DE wie auf der About-Seite; aktive Sprache unterstrichen */
/* steht in der Zeile von „↓ Info“, rechts bündig mit dem Ende der Textspalte (62ch breit, mittig) */
.schub-info .schub-sprache { position: absolute; top: calc(var(--rand) + 2.5px); right: max(var(--rand), calc(50% - 31ch)); margin: 0; display: flex; gap: 0.5em; font-weight: 700; }
.schub-sprache button, .schub-sprache span { font-size: 12px; }
.schub .schub-sprache button { font-size: 12px; position: relative; z-index: 2; color: var(--grau); padding: 20px 12px; margin: -20px -12px; }
.schub .schub-sprache button[aria-pressed="true"] { color: var(--schwarz); text-decoration: underline; text-underline-offset: 2px; }
.schub .schub-sprache button:hover { color: var(--schwarz); }
.schub-sprache span { color: var(--grau); }