body {
  font-family: Arial, sans-serif;
  margin: 0;
  text-align: center;
  background: #fff;
  color: #111827;
}

.container {
  width: calc(100% - 10cm);
  max-width: 1200px;
  margin: 40px auto;
}

/* Auf schmalen Viewports würde der 10cm-Abzug den Inhalt zerquetschen. */
@media (max-width: 900px) {
  .container {
    width: calc(100% - 32px);
    margin: 72px auto 40px;
  }
}

/* Sichtbarer Tastaturfokus (Barrierefreiheit, Phase 7). */
:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
}

button {
  font-size: 20px;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

input,
textarea,
select {
  font-size: 20px;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

input {
  margin: 5px;
  width: min(100%, 320px);
}

.status { min-height: 1.5em; margin-top: 10px; }

.side-menu {
  position: fixed;
  top: 0;
  left: -260px;
  width: 240px;
  height: 100vh;
  background: white;
  border-right: 1px solid #ccc;
  padding-top: 80px;
  padding-bottom: 20px;
  box-sizing: border-box;
  transition: left 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-menu.open { left: 0; }
.side-menu button { display: block; width: 200px; margin: 10px auto; text-align: left; }

.auth-bottom {
  width: 100%;
  margin-top: auto;
}

#authLoggedOut { flex-direction: column; gap: 10px; }
#authLoggedIn { display: none; }
#authLoggedOut button,
#authLoggedIn button { display: block; width: 200px; margin: 10px auto; text-align: left; background: white; }

.auth-startseite {
  min-height: 70vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 60px;
  margin-top: 60px;
}

.auth-karte {
  flex: 1;
  max-width: 520px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  padding: 48px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.auth-login-karte { text-align: left; }
.auth-login-karte input,
.auth-register-formular input {
  display: block;
  width: 100%;
  max-width: none;
  margin: 14px 0;
  padding: 18px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  font-size: 22px;
}
.auth-karte h2 { margin-top: 0; margin-bottom: 12px; font-size: 42px; }
.auth-hinweis { color: #6b7280; line-height: 1.6; }
.auth-register-karte { background: linear-gradient(135deg, #84cc16, #65a30d); color: white; }
.auth-register-karte .auth-hinweis { color: rgba(255,255,255,.92); }
.auth-primary,
.auth-cta {
  width: 100%;
  margin-top: 18px;
  padding: 18px 28px;
  border: none;
  border-radius: 18px;
  font-size: 24px;
  font-weight: bold;
}
.auth-primary { background: #111827; color: white; }
.auth-cta { background: #84cc16; color: white; }
.auth-secondary {
  width: 100%;
  margin-top: 12px;
  padding: 14px 24px;
  border: 2px solid #d1d5db;
  border-radius: 18px;
  background: white;
  color: #374151;
  font-weight: bold;
}

#meineTexteListe { margin-top: 30px; text-align: left; }
.titel-kopfzeile,
.titel-zeile {
  display: grid;
  grid-template-columns: 120px minmax(260px, 1fr) 180px 180px 50px;
  align-items: center;
  gap: 14px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.titel-kopfzeile { font-weight: bold; font-size: 20px; padding: 8px 12px; border-bottom: 2px solid #999; margin-top: 24px; margin-bottom: 12px; }
.titel-zeile { position: relative; padding: 8px 12px; font-size: 22px; border-radius: 10px; cursor: pointer; }
.titel-zeile:hover { background: #dbeafe; }
.titel-spalte { text-align: left; }
.datum-spalte { text-align: center; font-size: 18px; }
.veroeffentlichen-knopf { width: 130px; padding: 8px 12px; border: none; border-radius: 12px; background: #d4af37; color: #4a2f00; font-weight: bold; font-size: 16px; cursor: pointer; }
.loesch-knopf { width: 38px; height: 38px; border: none; border-radius: 12px; background: #dc2626; color: white; font-size: 22px; font-weight: bold; padding: 0; cursor: pointer; }

/* Status-Pastillen (Publikationszustand eines Carmens) */
.status-pastilla {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.status-pastilla--privatus    { background: #e5e7eb; color: #374151; }
.status-pastilla--submissus   { background: #dbeafe; color: #1e40af; }
.status-pastilla--in-lectorio { background: #fef3c7; color: #92400e; }
.status-pastilla--reddendus   { background: #fee2e2; color: #991b1b; }
.status-pastilla--publicatus  { background: #d1fae5; color: #065f46; }

/* Scriptorium */

#scriptoriumLayout {
  /*
   * Gemeinsame Höhe des unteren Arbeitsbereichs.
   * Die Variable wird auch von der Marginalie
   * verwendet, damit beide Bereiche einander
   * nicht überdecken.
   */
  --hexameter-arbeitsbereich-hoehe:
    clamp(
      390px,
      44vh,
      470px
    );

  display: block;
}

#poemArea {
  min-height:
    calc(
      100vh -
      180px
    );

  padding-bottom:
    calc(
      var(
        --hexameter-arbeitsbereich-hoehe
      ) +
      36px
    );

  box-sizing:
    border-box;
}

#hexameterArbeitsbereich {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height:
    var(
      --hexameter-arbeitsbereich-hoehe
    );

  min-height:
    320px;

  padding:
    24px
    28px
    22px;

  box-sizing:
    border-box;

  border-top:
    1px solid
    #e5e7eb;

  background:
    rgba(
      255,
      255,
      255,
      .98
    );

  box-shadow:
    0 -10px 28px
    rgba(
      0,
      0,
      0,
      .08
    );

  /*
   * Silbenkarten, Eingabezeile und
   * Suggestiones nutzen fast die gesamte
   * Bildschirmbreite.
   */
  --hexameter-centro-latitude:
    calc(
      100vw -
      56px
    );

  --hexameter-grid-gap:
    10px;

  --hexameter-slot-gap:
    8px;

  --hexameter-slot-min-height:
    58px;

  display:
    grid;

  grid-template-rows:
    minmax(
      104px,
      1fr
    )
    auto
    auto
    auto;

  gap:
    10px;

  z-index:
    940;
}

#hexameterArbeitsbereich.hexameter-arbeitsbereich--drop-activus {
  background: rgba(
    239,
    246,
    255,
    0.98
  );

  box-shadow:
    inset 0 0 0 4px
    rgba(
      147,
      197,
      253,
      0.55
    ),
    0 -10px 28px
    rgba(
      0,
      0,
      0,
      0.08
    );
}

.suggestio-button {
  cursor: grab;
}

.suggestio-button:active {
  cursor: grabbing;
}

.suggestio-button--tracta {
  opacity: 0.55;
}

.suggestio-drag-imago {
  position: fixed;
  left: -9999px;
  top: -9999px;

  display: flex;
  gap: 6px;

  padding: 8px;

  pointer-events: none;
}

.suggestio-drag-syllaba {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  min-height: 48px;

  padding: 6px 10px;
  box-sizing: border-box;

  border: 2px solid #cbd5e1;
  border-radius: 12px;

  background: #ffffff;
  box-shadow:
    0 6px 16px
    rgba(
      0,
      0,
      0,
      0.14
    );

  color: #111827;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 20px;
  line-height: 1.1;
}

.suggestio-drag-syllaba[data-quantitas="longa"] {
  background: #eff6ff;
}

.suggestio-drag-syllaba[data-quantitas="brevis"] {
  background: #f8fafc;
}

.suggestio-drag-syllaba[data-quantitas="ambigua"] {
  background: #faf5ff;
}

#hexameterSlots {
  min-height: 0;
  width: var(--hexameter-centro-latitude);
  max-width: 100%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(17, minmax(42px, 1fr));
  gap: var(--hexameter-grid-gap);
  align-items: end;
}

#versusInOpereOrdo {
  position: relative;

  width: fit-content;

  max-width:
    calc(
      var(
        --hexameter-centro-latitude
      ) -
      54px
    );

  margin: 0 auto;
}

#versusInOpereLinea {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;

  margin: 2px auto;

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;

  box-sizing: border-box;

  color: #475569;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 20px;
  line-height: 1.4;
  text-align: center;
}

.versus-in-opere-verbum {
  display: inline-block;

  padding: 2px 6px;

  border-radius: 8px;

  color: #334155;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease;
}

.versus-in-opere-verbum:hover,
.versus-in-opere-verbum:focus {
  outline: none;
  background: #eff6ff;
  color: #1d4ed8;
}

.versus-in-opere-verbum--selectum {
  background: #dbeafe;
  color: #1d4ed8;
}

.hexameter-slot--verbum-selectum {
  border-color: #60a5fa;
  background: #dbeafe;
}

.versus-in-opere-vacuum {
  position: relative;

  display: inline-flex;
  align-items: flex-end;
  justify-content: center;

  min-width: 18px;
  padding-top: 8px;

  color: #94a3b8;
}

.versus-in-opere-vacuum-signum {
  position: absolute;
  top: -2px;
  left: 50%;

  font-size: 16px;
  line-height: 1;

  transform:
    translateX(-50%);
}

.versus-in-opere-vacuum-linea {
  display: inline-block;

  font-size: 22px;
  line-height: 1;
}

.hexameter-slot-item {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hexameter-slot-gap);
}

.hexameter-slot-item--span-2 {
  grid-column: span 2;
}

.hexameter-slot-item--finis-pedis:not(:last-child)::after {
  content: "";
  position: absolute;

  top: 0;
  bottom: calc(
    var(--hexameter-slot-min-height) +
    var(--hexameter-slot-gap)
  );

  right: calc(
    var(--hexameter-grid-gap) / -2
  );

  width: 2px;
  background: #94a3b8;
  border-radius: 999px;

  transform: translateX(50%);
  opacity: 0.9;
  pointer-events: none;
}

.hexameter-slot-item--finis-pedis {
  margin-right: 12px;
}

.hexameter-slot-signum {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
  line-height: 1;
  color: #64748b;
  user-select: none;
}

.hexameter-slot-signum--repertum {
  color: #334155;
  font-weight: 700;
}

.hexameter-slot-signum--exspectatum {
  color: #94a3b8;
  font-weight: 400;
}

/*
 * Sicher erkannter metrischer Konflikt:
 * Auch das Breve oder Makron oberhalb
 * des Silbenplatzes wird rot.
 */
.hexameter-slot-signum--erroneum {
  color: #dc2626;
  font-weight: 700;
}

.hexameter-slot--contractus {
  width: 100%;
}

.hexameter-slot {
  width: 100%;
  position: relative;
  min-height: 58px;

  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 6px;
  box-sizing: border-box;

  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #ffffff;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.2;
  text-align: center;

  color: #111827;
}

.hexameter-slot--vacua {
  color: #cbd5e1;
}

.hexameter-slot--selectabilis {
  cursor: pointer;
}

.hexameter-slot--selectabilis:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

/*
 * Der aktuell ausgewählte Silbenplatz:
 * Hier wird das nächste Wort eingesetzt.
 */
.hexameter-slot--selectum {
  border-style: solid;
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(147, 197, 253, 0.22);
}

.hexameter-slot--plena {
  border-style: solid;
  border-color: #cbd5e1;
}

/*
 * Ein belegter, aber metrisch nicht
 * passender Silbenplatz bleibt sichtbar,
 * erhält jedoch einen roten Rahmen.
 */
.hexameter-slot--erronea {
  border-style: solid;
  border-color: #dc2626;
  box-shadow:
    0 0 0 4px
    rgba(
      220,
      38,
      38,
      0.16
    );
}

/*
 * Ist der fehlerhafte Slot zugleich der
 * aktuelle Cursor-Slot, soll auch die
 * äußere Markierung rot statt blau sein.
 */
.hexameter-slot--selectum.hexameter-slot--erronea {
  border-color: #dc2626;
  outline-color:
    rgba(
      220,
      38,
      38,
      0.30
    );
  box-shadow:
    0 0 0 5px
    rgba(
      220,
      38,
      38,
      0.18
    );
}

/*
 * Die obere Zeile ist ein reines
 * metrisches Silbenraster.
 *
 * Wortzugehörigkeiten werden nur noch
 * durch Bindestriche innerhalb des
 * sichtbaren Silbentextes angezeigt.
 * Optische Wortkapseln oder Brücken
 * zwischen benachbarten Slots gibt es
 * nicht mehr.
 */

.hexameter-slot[data-quantitas="longa"] {
  background: #eff6ff;
}

.hexameter-slot[data-quantitas="brevis"] {
  background: #f8fafc;
}

.hexameter-slot[data-quantitas="ambigua"] {
  background: #faf5ff;
}

.scriptorium-card {
  width: min(
    900px,
    calc(100vw - 680px)
  );

  margin: 110px auto 190px;
  padding: 34px 42px 42px;
  box-sizing: border-box;

  border-radius: 28px;
  background: white;
  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, .06);

  text-align: left;
}

.scriptorium-header {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom:
    1px solid #e5e7eb;
}

.scriptorium-auctor {
  margin: 0 0 4px;
  color: #6b7280;
  font-size: 18px;
}

.scriptorium-header h2 {
  margin: 0;
  font-size: 42px;
}

.scriptorium-versus {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}

.vers-zeile {
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr);

  align-items: baseline;
  gap: 14px;

  padding: 2px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.vers-zeile:hover {
  background: #f9fafb;
}

.vers-zeile.ausgewaehlt {
  background: #dbeafe;
}

.scriptorium-versus-numerus {
  color: #9ca3af;
  font-size: 16px;
  text-align: right;
}

.scriptorium-versus-textus {
  display: block;
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 23px;
  line-height: 1.55;
  text-align: center;
}

.vers-editor {
  grid-column: 2;

  box-sizing: border-box;
  max-width: 100%;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 23px;
  text-align: center;
}

#hexameterVorschau {
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#campusOrdo {
  width:
    var(
      --hexameter-centro-latitude
    );

  max-width: 100%;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#campusPurga,
#verbumInOpereDele {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  border: none;
  border-radius: 50%;

  font-size: 26px;
  line-height: 1;

  cursor: pointer;
}

#verbumInOpereDele[hidden] {
  display: none;
}

#campusPurga {
  background: #e5e7eb;
  color: #475569;
}

#campusPurga:hover,
#campusPurga:focus {
  outline: none;
  background: #cbd5e1;
  color: #1e293b;
}

#verbumInOpereDele {
  position: absolute;

  left:
    calc(
      100% +
      6px
    );

  top: 50%;

  transform:
    translateY(
      -50%
    );

  background: #3b82f6;
  color: #ffffff;
}

#verbumInOpereDele:hover,
#verbumInOpereDele:focus {
  outline: none;
  background: #2563eb;
}

#campus {
  display: block;

  width:
    clamp(
      280px,
      calc(
        var(--hexameter-centro-latitude) /
        3
      ),
      520px
    );

  min-height: 54px;
  margin: 0;

  box-sizing: border-box;

  padding: 10px 22px;

  border: 2px solid #d1d5db;
  border-radius: 999px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, .12);

  color: #111827;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 22px;
  line-height: 30px;
  text-align: center;

  outline: none;
}

#campus:focus {
  border-color: #93c5fd;

  box-shadow:
    0 0 0 4px
    rgba(147, 197, 253, .22),
    0 8px 24px
    rgba(0, 0, 0, .12);
}

.verbum-ok,
.verbum-malum {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
}

.verbum-ok {
  background: #dcfce7;
  color: #166534;
}

.verbum-malum {
  background: #fee2e2;
  color: #991b1b;
}

#suggestionesMetricae {
  position: relative;

  width: var(--hexameter-centro-latitude);
  max-width: 100%;
  min-width: 0;
  min-height: 48px;

  margin: 0 auto;

  overflow-x: hidden;
  overflow-y: visible;
}

/*
 * Der feste linke Bereich liegt über der
 * scrollbaren Leiste. Vorschläge gleiten
 * beim Scrollen unsichtbar dahinter.
 */
.suggestiones-renova-tectum {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 54px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  background: #ffffff;
  z-index: 3;
}

/*
 * Eine weiche unsichtbare Wand verhindert,
 * dass ein scrollender Vorschlag sichtbar
 * mit dem festen Kreispfeil kollidiert.
 */
.suggestiones-renova-tectum::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;

  width: 18px;

  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );

  pointer-events: none;
}

.suggestiones-renova {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;

  border: 1px solid #d1d5db;
  border-radius: 50%;

  background: #ffffff;
  color: #64748b;

  font-size: 23px;
  line-height: 1;

  cursor: pointer;
}

.suggestiones-renova:hover,
.suggestiones-renova:focus {
  outline: none;
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

.suggestiones-renova:active {
  transform: rotate(45deg);
}

#suggestionesMetricaeLista {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;

  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;

  padding:
    1px
    4px
    7px
    58px;

  box-sizing: border-box;

  /*
   * Safari benötigt die WebKit-Variante.
   * Links werden scrollende Wörter bereits
   * vor dem festen Kreispfeil ausgeblendet.
   */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      transparent 46px,
      #000 72px,
      #000 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      transparent 46px,
      #000 72px,
      #000 100%
    );

  scrollbar-width: thin;
}

.suggestio-item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 0;
  margin: 0;
  padding: 8px 15px;

  box-sizing: border-box;

  border-radius: 999px;
  background: #f8fafc;

  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
}

/* Scriptorium: einklappbare Lemma-Marginalie */

.scriptorium-marginalia {
  position: fixed;
  top: 120px;

  right:
    0;

  bottom:
    calc(
      var(
        --hexameter-arbeitsbereich-hoehe
      ) +
      20px
    );

  width: 320px;

  box-sizing: border-box;

  overflow: hidden;

  border: 1px solid #e5e7eb;
  border-right: none;
  border-radius: 24px 0 0 24px;

  background: #ffffff;

  box-shadow:
    -12px 0 30px
    rgba(0, 0, 0, .08);

  text-align: left;

  transform: translateX(0);

  transition:
    transform .22s ease;

  z-index: 900;
}

.scriptorium-marginalia--clausa {
  transform:
    translateX(
      calc(100% - 48px)
    );
}

.scriptorium-marginalia-kopf {
  min-height: 58px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;

  box-sizing: border-box;

  border-bottom:
    1px solid #e5e7eb;
}

.scriptorium-marginalia-kopf h3 {
  margin: 0;
  font-size: 20px;
}

.scriptorium-marginalia-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  margin: 0;
  padding: 0;

  border: 1px solid #d1d5db;
  border-radius: 50%;

  background: #ffffff;
  color: #64748b;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;
}

.scriptorium-marginalia-toggle:hover,
.scriptorium-marginalia-toggle:focus {
  outline: none;
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}

.scriptorium-marginalia-corpus {
  height:
    calc(100% - 58px);

  overflow-y: auto;

  padding: 16px 18px 22px;

  box-sizing: border-box;
}

.scriptorium-marginalia-vacua {
  margin: 0;
  color: #9ca3af;
  font-size: 16px;
}

.scriptorium-marginalia-lemma {
  margin: 0 0 4px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 30px;
}

.scriptorium-marginalia-pars {
  margin: 0 0 18px;
  color: #6b7280;
  font-size: 15px;
}

.scriptorium-marginalia-notae {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr);

  gap: 7px 12px;

  margin: 0;
}

.scriptorium-marginalia-notae dt {
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
}

.scriptorium-marginalia-notae dd {
  margin: 0;
  font-size: 15px;
}

.scriptorium-marginalia-plenum {
  display: inline-block;

  margin-top: 20px;

  color: #6d28d9;

  font-size: 15px;
  font-weight: 700;

  text-decoration: none;
}

.scriptorium-marginalia-plenum:hover,
.scriptorium-marginalia-plenum:focus {
  text-decoration: underline;
}

/* Vocabularium */
#vocabularium {
  max-width: 1100px;
  margin: 120px auto 40px;
  position: relative;
}

#vocabulariumQuaere {
  display: block;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 16px 22px;
  font-size: 24px;
  line-height: 1.2;
  border-radius: 22px;
  border: 2px solid #d1d5db;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#vocabulariumQuaere:focus { outline: none; border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(147,197,253,.28), 0 10px 28px rgba(0,0,0,.10); }
#vocabulariumQuaere::placeholder { color: #9ca3af; }
#vocabulariumSuggestiones { width: min(100%, 760px); margin: 8px auto 0; background: white; border: 1px solid #e5e7eb; border-radius: 0 0 18px 18px; box-shadow: 0 12px 28px rgba(0,0,0,.10); overflow: hidden; text-align: left; z-index: 1200; }
.vocabularium-suggestio { display: block; width: 100%; margin: 0; padding: 12px 20px; border: none; border-bottom: 1px solid #f3f4f6; border-radius: 0; background: white; color: #111827; font-size: 18px; text-align: left; cursor: pointer; }
.vocabularium-suggestio span { color: #6b7280; font-size: 16px; margin-left: 8px; }
#vocabulariumEventus { margin-top: 32px; }
.vocabularium-tabelle { width: min(100%, 920px); margin: 0 auto; border-collapse: collapse; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.vocabularium-tabelle thead { background: #f3f4f6; }
.vocabularium-tabelle th { text-align: left; padding: 14px 20px; font-size: 16px; letter-spacing: .03em; color: #4b5563; }
.vocabularium-tabelle td { padding: 16px 20px; font-size: 19px; border-top: 1px solid #e5e7eb; text-align: left; }
.vocabularium-tabelle tbody tr { transition: background .12s ease; cursor: pointer; }
.vocabularium-tabelle tbody tr:hover { background: #f9fafb; }

/* Lemma pages */
#lemmaTitulus { font-size: 2.6rem !important; line-height: 1.08; margin-bottom: .25rem; }
#lemmaPars { font-size: 1rem !important; color: #6b7280; }
.lemma-card { padding: 2.2rem 2.8rem !important; border-radius: 22px !important; }
.lemma-section { margin-top: 1.6rem !important; }
.lemma-section h2 { font-size: 1.45rem !important; margin-bottom: .65rem !important; }
.lemma-section p { font-size: 1rem !important; line-height: 1.45 !important; }
.flexio-numerus { font-size: 1.05rem !important; margin-top: 1.2rem !important; }
.flexio-tabelle th,
.flexio-tabelle td { font-size: .92rem !important; padding: .52rem .72rem !important; }

/* refined diphthong macrons */
.diphthongus {
  position: relative !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.diphthongus::before {
  content: "" !important;
  position: absolute !important;
  left: .10em !important;
  right: .10em !important;
  top: .06em !important;
  border-top: .038em solid currentColor !important;
  border-radius: 999px !important;
  opacity: .88 !important;
}

/* Stronger than lemma.html's inline macron rules. */
html body #lemmaTitulus .diphthongus::before,
html body .forma-prima .diphthongus::before,
html body .flexio-tabelle .diphthongus::before,
html body .lemma-card .diphthongus::before {
  top: .10em !important;
  border-top-width: .08em !important;
  opacity: 1 !important;
}

@media (max-width: 1100px) {
  .container {
    width: calc(100% - 40px);
  }

  .scriptorium-card {
    width: calc(100vw - 40px);
    margin-top: 90px;
    margin-bottom: 270px;
    padding: 24px 18px 30px;
  }

    .scriptorium-marginalia {
    top:
      96px;

    bottom:
      calc(
        var(
          --hexameter-arbeitsbereich-hoehe
        ) +
        16px
      );

    width:
      min(
        320px,
        calc(
          100vw -
          48px
        )
      );
  }

  #hexameterVorschau,
  #campus {
    left: 50%;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .vers-zeile {
    grid-template-columns:
      28px minmax(0, 1fr);

    gap: 9px;
  }

  .scriptorium-versus-textus,
  .vers-editor {
    font-size: 20px;
  }

  #hexameterArbeitsbereich {
    right:
      0;

    bottom:
      0;

    height:
      var(
        --hexameter-arbeitsbereich-hoehe
      );

    min-height:
      320px;
  }

  #hexameterSlots {
    grid-template-columns: repeat(17, minmax(32px, 1fr));
    gap: 6px;
  }

  .hexameter-slot-signum {
    font-size: 22px;
  }

  .hexameter-slot {
    min-height: 48px;
    font-size: 18px;
  }
}

#siteTitle {
  position: fixed;
  top: 20px;
  right: 20px;
  margin: 0;
  font-size: 32px;
  z-index: 1001;
  background: white;
  padding: 5px 10px;
}

.forma-metrice-incerta{
  border-color:#d1d5db;
  box-shadow:0 4px 18px rgba(107,114,128,.10);
}

/*
 * Lectorium: Der Lesetext nimmt die linken
 * drei Viertel des Fensters ein. Das rechte
 * Viertel bleibt für die Marginalie frei.
 */
#lectorium {
  width: calc(100vw - 48px);
  margin-left: calc(50% - 50vw + 24px);

  /*
   * Links bleibt Platz für das geöffnete
   * Toggle-Menü. Rechts bleibt weiterhin
   * Platz für die Marginalie.
   */
  padding-left: 240px;
  padding-right: calc(25vw + 24px);

  box-sizing: border-box;
}

.lectorium-card {
  width: min(100%, 900px);
  margin: 0 auto 48px;
  padding: 34px 42px 42px;
  border-radius: 28px;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  text-align: left;
}

.lectorium-header {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}

.lectorium-auctor {
  margin: 0 0 4px;
  color: #6b7280;
  font-size: 18px;
}

.lectorium-header h2 {
  margin: 0;
  font-size: 42px;
}

.lectorium-locus {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 18px;
}

.lectorium-versus {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lectorium-versus-linea {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
}

.lectorium-versus-numerus {
  color: #9ca3af;
  font-size: 16px;
  text-align: right;
}

.lectorium-versus-textus {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.55;
}

.lectorium-verbum {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lectorium-verbum:hover,
.lectorium-verbum:focus {
  outline: none;
  background: #ede9fe;
  color: #5b21b6;
}

@media (max-width: 620px) {
  .lectorium-card {
    padding: 24px 18px 30px;
  }

  .lectorium-versus-linea {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
  }

  .lectorium-versus-textus {
    font-size: 20px;
  }
}

/* Lectorium: lemma preview tooltips */

.lectorium-sprechbulla {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 24px;
  z-index: 1600;
  width: 25vw;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px 42px 20px 20px;
  border: 1px solid #ddd6fe;
  border-right: none;
  border-radius: 24px 0 0 24px;
  background: #ffffff;
  box-shadow: -12px 0 30px rgba(0, 0, 0, .12);
  text-align: left;
}

@media (max-width: 900px) {
  #lectorium {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .lectorium-sprechbulla {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 46vh;
    border-right: 1px solid #ddd6fe;
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .12);
  }
}

.lectorium-sprechbulla[hidden] {
  display: none;
}

.lectorium-bulla-claude {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.lectorium-bulla-claude:hover,
.lectorium-bulla-claude:focus {
  outline: none;
  background: #f3f4f6;
  color: #111827;
}

.lectorium-bulla-forma {
  display: block;
  margin-bottom: 10px;
  color: #111827;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.lectorium-bulla-candidatus {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fafafa;
}

.lectorium-bulla-lemma {
  display: block;
  color: #4c1d95;
  font-size: 20px;
}

.lectorium-bulla-pars,
.lectorium-bulla-analysis,
.lectorium-bulla-encliticum {
  display: block;
  margin-top: 5px;
  color: #6b7280;
  font-size: 14px;
}

.lectorium-bulla-encliticum {
  color: #7c3aed;
  font-weight: 700;
}

.lectorium-bulla-nota {
  margin: 6px 0;
  color: #6b7280;
  font-size: 14px;
}

.lectorium-bulla-error {
  margin: 8px 0;
  color: #b91c1c;
  font-size: 14px;
}

.lectorium-bulla-actiones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lectorium-bulla-actio,
.lectorium-bulla-lemma-optio {
  margin: 8px 6px 0 0;
  padding: 8px 11px;
  border: 1px solid #d1d5db;
  border-radius: 11px;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
}

.lectorium-bulla-actio:hover,
.lectorium-bulla-actio:focus,
.lectorium-bulla-lemma-optio:hover,
.lectorium-bulla-lemma-optio:focus {
  outline: none;
  background: #f5f3ff;
  border-color: #c4b5fd;
}

.lectorium-bulla-actio-principalis {
  border-color: #7c3aed;
  background: #7c3aed;
  color: #ffffff;
}

.lectorium-bulla-actio-principalis:hover,
.lectorium-bulla-actio-principalis:focus {
  background: #6d28d9;
  color: #ffffff;
}

.lectorium-bulla-actio-secundaria {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.lectorium-bulla-input {
  display: block;
  width: 100%;
  max-width: none;
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px solid #d1d5db;
  border-radius: 11px;
  font-size: 16px;
}

.lectorium-bulla-lemma-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.lectorium-bulla-lemma-optio {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
}

.adde-uerbum-panel--lectorium {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.adde-uerbum-panel--lectorium
.adde-form-head {
  padding: 16px;
  margin-bottom: 10px;
  border-top-width: 6px;
}

.adde-uerbum-panel--lectorium
.adde-form-head h2 {
  font-size: 24px;
}

.adde-uerbum-panel--lectorium
.adde-form-card {
  padding: 14px 16px;
  margin-bottom: 10px;
}

.adde-uerbum-panel--lectorium
.adde-uerbum-field input,
.adde-uerbum-panel--lectorium
.adde-uerbum-field select {
  font-size: 17px;
}

.adde-uerbum-panel--lectorium
.adde-uerbum-actions {
  flex-direction: column-reverse;
}

.adde-uerbum-panel--lectorium
.adde-uerbum-actions button {
  width: 100%;
}

.lectorium-verbum.lectorium-verbum--actuale {
  background: #dbeafe;
  color: #1d4ed8;
}

.lectorium-verbum.lectorium-verbum--actuale:hover,
.lectorium-verbum.lectorium-verbum--actuale:focus {
  background: #bfdbfe;
  color: #1d4ed8;
}

/* ---------- Lectorium moderatoris (Phase 3) ---------- */
.moderatorium-head { text-align: left; border-bottom: 2px solid #d4af37; padding-bottom: 12px; margin-bottom: 18px; }
.moderatorium-head h2 { margin: 0; }
.moderatorium-head p { margin: 4px 0 0; color: #6b7280; font-size: 15px; }

.moderatorium-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: start; text-align: left; }
.moderatorium-queue { border-right: 1px solid #e6e0d0; padding: 8px 16px 16px 0; }
.moderatorium-queue-titulus { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; margin: 0 0 12px; }
.moderatorium-vacua { color: #6b7280; font-size: 15px; }

.moderatorium-card { display: block; width: 100%; text-align: left; background: #faf7ef; border: 1px solid #e6e0d0; border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; cursor: pointer; font-size: 16px; }
.moderatorium-card:hover { border-color: #d4af37; }
.moderatorium-card.is-active { border-color: #d4af37; box-shadow: 0 2px 10px rgba(212,175,55,.25); }
.moderatorium-card .mc-titulus { font-weight: 700; font-size: 17px; }
.moderatorium-card .mc-auctor { color: #6b7280; font-size: 14px; margin-top: 2px; }
.moderatorium-card .mc-meta { display: flex; gap: 8px; margin-top: 8px; }
.moderatorium-card .pill { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-cat { background: #ede9fe; color: #5b21b6; }
.pill-submissus { background: #dbeafe; color: #1e40af; }
.pill-in_lectorio { background: #fef3c7; color: #92400e; }
.pill-reddendus { background: #fee2e2; color: #991b1b; }

.moderatorium-review { padding: 8px 4px 8px 28px; }
.rev-titulus { font-size: 24px; margin: 0; }
.rev-sub { color: #6b7280; margin: 4px 0 20px; font-size: 15px; }

.rev-versus { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 6px 10px; border-radius: 10px; }
.rev-versus:hover { background: #faf7ef; }
.rev-num { color: #6b7280; font-variant-numeric: tabular-nums; text-align: right; padding-top: 4px; }
.rev-linea { font-size: 22px; line-height: 1.7; }
.rev-verbum { cursor: pointer; padding: 1px 2px; border-radius: 4px; border-bottom: 2px solid transparent; }
.rev-verbum:hover { border-bottom-color: #d4af37; }
.rev-verbum.notatum { background: #fef3c7; border-bottom-color: #b45309; }

.rev-obiectio { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 6px 10px; margin: 6px 0 0 48px; max-width: 620px; }
.obiectio-tag { font-weight: 700; }
.obiectio-dele { border: none; background: transparent; color: #92400e; cursor: pointer; font-size: 16px; margin-left: auto; padding: 0 2px; }

.rev-composer { margin: 6px 0 0 48px; background: #fff; border: 1px dashed #b45309; border-radius: 10px; padding: 10px 12px; max-width: 620px; }
.composer-ctx { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
.composer-textus { width: 100%; font-size: 15px; border: 1px solid #e6e0d0; border-radius: 8px; padding: 8px; resize: vertical; min-height: 52px; }
.composer-row { display: flex; gap: 8px; margin-top: 8px; }
.composer-adde { border: none; border-radius: 9px; padding: 8px 16px; font-size: 15px; font-weight: 700; background: #b45309; color: #fff; cursor: pointer; }
.composer-cancel { border: none; border-radius: 9px; padding: 8px 16px; font-size: 15px; background: #f3f4f6; color: #1f2933; cursor: pointer; }

.rev-actiones { position: sticky; bottom: 0; background: linear-gradient(to top, #fff 72%, transparent); padding: 20px 0 8px; margin-top: 24px; display: flex; gap: 12px; align-items: center; }
.rev-spacer { flex: 1; color: #6b7280; font-size: 14px; }
.rev-redde { border: none; border-radius: 10px; padding: 12px 22px; font-size: 17px; font-weight: 700; background: #b91c1c; color: #fff; cursor: pointer; }
.rev-redde:disabled { background: #fca5a5; cursor: not-allowed; }
.rev-publica { border: none; border-radius: 10px; padding: 12px 22px; font-size: 17px; font-weight: 700; background: #047857; color: #fff; cursor: pointer; }
.rev-publica:disabled { background: #a7d7c5; cursor: not-allowed; }
.moderatorium-error { color: #b91c1c; font-weight: 600; }

@media (max-width: 780px) {
  .moderatorium-layout { grid-template-columns: 1fr; }
  .moderatorium-queue { border-right: none; border-bottom: 1px solid #e6e0d0; padding: 0 0 16px; }
  .moderatorium-review { padding: 16px 0 8px; }
}

/* ---------- Bibliotheca / Sozial / Persona (Phase 4) ---------- */
.biblioteca-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 8px auto 22px; max-width: 900px; }
.biblioteca-quaere { flex: 1; min-width: 220px; max-width: 420px; }
.biblioteca-select { font-size: 17px; padding: 8px 10px; border-radius: 8px; }
.biblioteca-ordo-label { color: #6b7280; font-size: 15px; }
.biblioteca-onus, .persona-vacua { color: #6b7280; }

.bibliotheca { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; text-align: left; }
.bibliotheca-card { position: relative; background: #faf7ef; border: 1px solid #e6e0d0; border-radius: 14px; padding: 18px 18px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bibliotheca-card:hover { border-color: #d4af37; box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.bibliotheca-card h3 { margin: 0 0 4px; font-size: 20px; }
.bibliotheca-locus { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; border-radius: 999px; background: #d4af37; color: #4a2f00; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.bibliotheca-auctor-link { border: none; background: none; padding: 0; color: #5b21b6; font-size: 15px; cursor: pointer; text-decoration: underline; }
.bibliotheca-meta { color: #6b7280; font-size: 13px; margin: 6px 0 2px; }
.bibliotheca-stats { color: #374151; font-size: 14px; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.bibliotheca-preview { color: #4b5563; font-size: 15px; font-style: italic; margin: 8px 0 12px; }
.lesen-knopf { border: none; border-radius: 10px; padding: 8px 18px; background: #d4af37; color: #4a2f00; font-weight: 700; font-size: 15px; cursor: pointer; }

/* Lesemodus + soziale Aktionen */
.actiones-sociales { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 18px 0; padding: 14px; background: #faf7ef; border-radius: 12px; }
.actio-applausus, .actio-favor { border: 1px solid #e6e0d0; background: #fff; border-radius: 10px; padding: 8px 16px; font-size: 16px; cursor: pointer; }
.actio-applausus.est-actus, .actio-favor.est-actus { background: #fef3c7; border-color: #d4af37; }
.actio-applausus:disabled, .actio-favor:disabled { opacity: .5; cursor: not-allowed; }
.bewertung-sterne { display: inline-flex; }
.bewertung-sterne button { border: none; background: none; font-size: 26px; color: #d1d5db; cursor: pointer; padding: 0 2px; }
.bewertung-sterne button.gewaehlt { color: #d4af37; }
.bewertung-sterne.inactiva { opacity: .5; pointer-events: none; }
.actiones-hint { flex-basis: 100%; color: #6b7280; font-size: 14px; margin: 0; }

/* Persona (öffentlich + eigene) */
.persona-summarium, .persona-status { display: flex; gap: 16px; justify-content: center; margin: 16px 0; }
.persona-status-card { background: #faf7ef; border: 1px solid #e6e0d0; border-radius: 14px; padding: 16px 26px; display: flex; flex-direction: column; align-items: center; }
.persona-status-numerus { font-size: 40px; font-weight: 800; color: #4a2f00; }
.persona-status-label { color: #6b7280; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.persona-editor { margin: 20px 0; }
.persona-carmina-titulus { margin-top: 26px; }
.persona-carmina, .persona-carmen-row { max-width: 640px; margin-left: auto; margin-right: auto; }
.persona-carmen-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #eee; text-align: left; }
.persona-carmen-titulus { font-weight: 700; }
.persona-carmen-stats { color: #6b7280; font-size: 14px; white-space: nowrap; }
.persona-publica { text-align: left; max-width: 1000px; margin: 0 auto; }
.persona-status { justify-content: flex-start; }
.persona-follow { border: 1px solid #5b21b6; background: #fff; color: #5b21b6; border-radius: 10px; padding: 8px 20px; font-size: 16px; cursor: pointer; margin-bottom: 10px; }
.persona-follow.est-actus { background: #ede9fe; }

/* ---------- Glossen + Stufen (Phase 5.1) ---------- */
.habet-glossam { border-bottom: 1px dotted #9ca3af; cursor: help; }
.glossa-bulla { position: absolute; z-index: 2000; max-width: 280px; background: #1f2933; color: #fff; font-size: 14px; line-height: 1.4; padding: 8px 12px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.glossa-bulla::before { content: ""; position: absolute; top: -6px; left: 14px; border: 6px solid transparent; border-top: none; border-bottom-color: #1f2933; }

.persona-modus { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin: 22px auto; max-width: 640px; text-align: left; }
.persona-modus-campus { flex: 1; min-width: 220px; }
.persona-modus-campus label { display: block; font-weight: 700; margin-bottom: 6px; }
.persona-modus-campus select { width: 100%; font-size: 18px; padding: 8px; border-radius: 8px; }
.persona-modus-hint { color: #6b7280; font-size: 14px; margin: 6px 0 0; }

/* Tiro-Stufe: dichte/fortgeschrittene Affordanzen zurücknehmen */
body[data-gradus="tiro"] .scriptorium-marginalia { display: none; }

/* ---------- Erklärte Skansion (Phase 5.2 im Scriptorium) ---------- */
.scansio-explicatio { margin-top: 14px; padding: 12px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; text-align: left; }
.scansio-explicatio-titulus { margin: 0 0 8px; color: #92400e; font-weight: 600; }
.scansio-explicatio-syllabae { display: flex; flex-wrap: wrap; gap: 6px; font-size: 20px; }
.expl-syllaba { padding: 2px 6px; border-radius: 6px; cursor: help; border-bottom: 2px solid transparent; }
.expl-longa { background: #e0e7ff; border-bottom-color: #4f46e5; }
.expl-brevis { background: #fee2e2; border-bottom-color: #dc2626; }
.expl-ambigua { background: #f3f4f6; border-bottom-color: #9ca3af; }
.scansio-explicatio-elisio { margin: 8px 0 0; color: #6b7280; font-size: 14px; }
.scansio-schola-link { margin-top: 10px; border: none; background: #ede9fe; color: #5b21b6; border-radius: 8px; padding: 6px 14px; font-size: 15px; cursor: pointer; }

/* ---------- Schola (Phase 5.3/5.6) ---------- */
.schola-head { text-align: left; border-bottom: 2px solid #d4af37; padding-bottom: 12px; margin-bottom: 18px; }
.schola-head h2 { margin: 0; }
.schola-head p { margin: 4px 0 0; color: #6b7280; font-style: italic; }
.schola-corpus { text-align: left; max-width: 760px; margin: 0 auto; }

.schola-cursus { display: flex; flex-direction: column; gap: 12px; }
.schola-lectio { display: flex; gap: 16px; align-items: center; text-align: left; background: #faf7ef; border: 1px solid #e6e0d0; border-radius: 14px; padding: 16px 18px; cursor: pointer; }
.schola-lectio:hover { border-color: #d4af37; }
.schola-lectio.est-completa { background: #ecfdf5; border-color: #6ee7b7; }
.schola-lectio-num { flex: none; width: 38px; height: 38px; border-radius: 999px; background: #d4af37; color: #4a2f00; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.schola-lectio.est-completa .schola-lectio-num { background: #10b981; color: #fff; }
.schola-lectio-corpus { display: flex; flex-direction: column; }
.schola-lectio-titulus { font-weight: 700; font-size: 18px; }
.schola-lectio-summa { color: #6b7280; font-size: 14px; margin-top: 2px; }

.schola-back { border: none; background: none; color: #5b21b6; cursor: pointer; font-size: 15px; padding: 0; margin-bottom: 8px; }
.schola-lectio-caput { margin: 6px 0 4px; }
.schola-lectio-explicatio { color: #374151; margin: 0 0 18px; }

.pensum-instr { color: #6b7280; }
.pensum-locus { color: #9ca3af; font-size: 14px; }
.pensum-linea { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pensum-syllaba { border: 1px solid #e6e0d0; background: #fff; border-radius: 8px; padding: 8px 12px; font-size: 20px; cursor: pointer; border-bottom: 3px solid transparent; }
.pensum-syllaba.mark-longa { background: #e0e7ff; border-bottom-color: #4f46e5; }
.pensum-syllaba.mark-brevis { background: #fee2e2; border-bottom-color: #dc2626; }
.pensum-syllaba.recta { outline: 2px solid #10b981; }
.pensum-syllaba.falsa { outline: 2px solid #dc2626; }
.pensum-proba, .pensum-candidatus { border: none; border-radius: 10px; padding: 10px 20px; font-size: 16px; font-weight: 700; cursor: pointer; margin: 6px 8px 6px 0; }
.pensum-proba { background: #d4af37; color: #4a2f00; }
.pensum-candidatus { background: #fff; border: 1px solid #e6e0d0; color: #1f2933; }
.pensum-candidatus.recta { background: #ecfdf5; border-color: #10b981; }
.pensum-candidatus.falsa { background: #fef2f2; border-color: #dc2626; }
.pensum-eventus { margin-top: 12px; }
.pensum-summa { font-size: 18px; font-weight: 700; }
.pensum-summa.est-perfectum { color: #047857; }
.pensum-hint { color: #6b7280; }
.pensum-supple-linea { font-size: 22px; margin: 14px 0; }
.pensum-lacuna { color: #b45309; font-weight: 700; letter-spacing: 2px; }
.pensum-optiones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Footer (rechtliche Links, Phase 7) ---------- */
.site-footer { margin: 48px auto 20px; padding-top: 20px; border-top: 1px solid #e6e0d0; text-align: center; color: #9ca3af; font-size: 14px; }
.site-footer a { color: #6b7280; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ================================================================
   REVAMP 2026-07-06 — eine Identität: Pergament, Tinte, Gold, Lorbeer.
   Diese Schicht überschreibt bewusst ältere Regeln (Kaskade).
   ================================================================ */
:root {
  --pergamena: #f7f3ea;
  --pergamena-obscura: #efe9db;
  --atramentum: #241f1a;
  --atramentum-lene: #5c554b;
  --aurum: #d4af37;
  --aurum-profundum: #8a6a1f;
  --purpura: #5b21b6;
  --laurus: #2f6b4f;
  --laurus-profunda: #23523c;
  --rubrica: #9f1d1d;
  --charta: #ffffff;
  --linea: #e3dccb;
  --serif-latina: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans-machinae: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
  font-family: var(--sans-machinae);
  color: var(--atramentum);
  background: var(--pergamena);
}

.container { margin-top: 96px; }
@media (max-width: 900px) { .container { margin-top: 88px; } }

/* ---------- Topbar (Titelseite eines Buchs) ---------- */
.tectum {
  position: fixed;
  inset: 0 0 auto 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--pergamena);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 1px 0 var(--aurum);
  z-index: 1001;
}
.tectum-titulus { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.tectum-nomen {
  font-family: var(--serif-latina);
  font-variant: small-caps;
  letter-spacing: .12em;
  font-size: 26px;
  font-weight: 600;
  color: var(--atramentum);
}
.tectum-dictum {
  font-family: var(--serif-latina);
  font-style: italic;
  font-size: 13px;
  color: var(--aurum-profundum);
}
.tectum-usor {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--atramentum-lene);
  background: var(--charta);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 6px 14px;
}
#menuButton {
  position: static;
  margin: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--charta);
  color: var(--atramentum);
}
#menuButton:hover { border-color: var(--aurum); }

/* ---------- Drawer + Velum ---------- */
.velum {
  position: fixed;
  inset: 0;
  background: rgba(36, 31, 26, .35);
  z-index: 999;
}
.velum[hidden] { display: none; }

.side-menu {
  top: 0;
  padding-top: 84px;
  background: var(--charta);
  border-right: 1px solid var(--linea);
  box-shadow: 8px 0 30px rgba(36,31,26,.12);
}
.side-menu button {
  width: 200px;
  margin: 4px auto;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--atramentum);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}
.side-menu button:hover { background: var(--pergamena); }
.side-menu button.est-activa {
  background: var(--pergamena-obscura);
  box-shadow: inset 3px 0 0 var(--aurum);
}
#authLoggedOut button, #authLoggedIn button {
  background: transparent;
  border: 1px solid var(--linea);
}

/* ---------- Hero (Landung ohne Ratio) ---------- */
.hero { max-width: 860px; margin: 24px auto 8px; text-align: center; }
.hero-super {
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--aurum-profundum);
  margin: 0 0 10px;
}
.hero-titulus {
  font-family: var(--serif-latina);
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 500;
  margin: 0 0 14px;
}
.hero-sub {
  font-family: var(--serif-latina);
  font-size: 21px;
  color: var(--atramentum);
  margin: 0;
}
.hero-glossa { color: var(--atramentum-lene); font-size: 15px; margin: 6px 0 22px; }
.hero-specimen {
  font-family: var(--serif-latina);
  font-size: clamp(17px, 2.6vw, 24px);
  color: var(--atramentum-lene);
  background: var(--charta);
  border: 1px solid var(--linea);
  border-radius: 14px;
  display: inline-block;
  padding: 12px 26px;
  margin: 0 0 24px;
}
.hero-specimen span { color: var(--aurum); padding: 0 4px; }
.hero-actiones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-cta {
  border: none;
  border-radius: 14px;
  background: var(--atramentum);
  color: var(--pergamena);
  font-size: 19px;
  font-weight: 700;
  padding: 14px 30px;
}
.hero-cta:hover { background: #3a332b; }
.hero-ghost {
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--charta);
  color: var(--atramentum);
  font-size: 17px;
  font-weight: 600;
  padding: 13px 22px;
}
.hero-ghost:hover { border-color: var(--aurum); }
.hero-nota { color: var(--atramentum-lene); font-size: 14px; margin-top: 14px; }

/* Auth-Karten auf die Palette bringen (Lindgrün → Lorbeer). */
.auth-startseite { min-height: 0; margin-top: 34px; gap: 32px; }
.auth-karte { box-shadow: 0 10px 30px rgba(36,31,26,.08); border-color: var(--linea); }
.auth-karte h2 { font-family: var(--serif-latina); font-weight: 600; }
.auth-register-karte { background: linear-gradient(150deg, var(--laurus), var(--laurus-profunda)); }
.auth-cta { background: var(--aurum); color: #3c2d05; }
.auth-cta:hover { background: #c9a530; }
.auth-primary { background: var(--atramentum); }

/* ---------- Lateinischer Lesetext in Serif ---------- */
.lektueremodus-text, .rev-linea, .lectorium-versus, .pensum-linea,
.scriptorium-versus-textus, .bibliotheca-preview, .hero-specimen,
#versusInOpereLinea, #hexameterVorschau {
  font-family: var(--serif-latina);
}

/* ---------- Erste-Schritte-Karte ---------- */
.salutatio {
  max-width: 640px;
  margin: 0 auto 26px;
  text-align: left;
  background: var(--charta);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--aurum);
  border-radius: 14px;
  padding: 20px 24px;
}
.salutatio h3 { margin: 0 0 6px; font-family: var(--serif-latina); }
.salutatio ul { margin: 8px 0 14px; padding-left: 4px; list-style: none; }
.salutatio li { margin: 7px 0; color: var(--atramentum-lene); font-size: 15px; }
.salutatio-nexus {
  border: none; background: none; padding: 0; margin: 0;
  color: var(--purpura); font-weight: 700; font-size: 15px;
  text-decoration: underline; cursor: pointer;
}
.salutatio-claude {
  border: none; border-radius: 10px; background: var(--atramentum);
  color: var(--pergamena); font-size: 15px; font-weight: 700; padding: 10px 18px;
}

/* ---------- Scriptorium-Feinschliff ---------- */
.schema-titulus {
  margin: 0;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--atramentum-lene);
  text-align: left;
}
.schema-hint { letter-spacing: 0; text-transform: none; color: #9a917f; margin-left: 10px; }
#hexameterArbeitsbereich {
  grid-template-rows: auto minmax(104px, 1fr) auto auto auto;
  background: rgba(255,255,255,.98);
}
#hexameterSlots { padding-top: 20px; overflow: visible; }

/* Karten global auf Pergament abstimmen */
.scriptorium-card, .lectorium-card { border: 1px solid var(--linea); }

@media (max-width: 640px) {
  .tectum { gap: 10px; padding: 0 12px; }
  .tectum-nomen { font-size: 20px; }
  .tectum-dictum { display: none; }
  .titel-kopfzeile, .titel-zeile {
    grid-template-columns: minmax(0,1fr) auto;
    grid-auto-rows: auto;
    row-gap: 4px;
  }
  .titel-kopfzeile .datum-spalte, .titel-zeile .datum-spalte { display: none; }
  .titel-kopfzeile span:first-child { display: none; }
  .titel-zeile { padding: 12px; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 8px; background: var(--charta); }
  .titel-zeile .veroeffentlichen-knopf { grid-row: 2; grid-column: 1; justify-self: start; }
  .titel-zeile .loesch-knopf { grid-column: 2; grid-row: 1; }
  .hero-actiones .hero-cta, .hero-actiones .hero-ghost { width: 100%; }
  .auth-startseite { flex-direction: column; gap: 20px; }
}

/* ---------- Lectorium v2 + Schola v2 (Datenpipeline-Tranche) ---------- */
.lect2-instrumenta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.lect2-toggle { border: 1px solid var(--linea); background: var(--charta); border-radius: 999px; padding: 6px 16px; font-size: 15px; cursor: pointer; }
.lect2-toggle.est-activum { background: var(--pergamena-obscura); border-color: var(--aurum); font-weight: 700; }
.lect2-hint { color: var(--atramentum-lene); font-size: 13px; }
.lect2-corpus { text-align: left; }
.lect2-linea { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 3px 6px; border-radius: 8px; }
.lect2-linea:hover { background: var(--pergamena); }
.lect2-numerus { color: #b3a98f; font-variant-numeric: tabular-nums; text-align: right; font-size: 14px; padding-top: 7px; }
.lect2-textus { font-family: var(--serif-latina); font-size: 22px; line-height: 1.75; }
.lect2-verbum { border: none; background: none; padding: 0 1px; font: inherit; cursor: pointer; border-radius: 4px; border-bottom: 2px solid transparent; }
.lect2-verbum:hover { border-bottom-color: var(--aurum); }
.lect2-syllaba { position: relative; padding-top: 12px; }
.lect2-syllaba::before { content: attr(data-q); position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--aurum-profundum); font-family: var(--sans-machinae); }
.lect2-q-E { opacity: .45; }
.lect2-carta { position: absolute; z-index: 1500; width: 280px; background: var(--charta); border: 1px solid var(--linea); border-top: 4px solid var(--aurum); border-radius: 14px; box-shadow: 0 14px 40px rgba(36,31,26,.18); padding: 14px 16px; text-align: left; }
.lect2-carta-caput { font-family: var(--serif-latina); font-size: 24px; font-weight: 600; }
.lect2-carta-locus { color: var(--atramentum-lene); font-size: 12px; margin-bottom: 10px; }
.lect2-carta-syllabae { display: flex; flex-wrap: wrap; gap: 6px; }
.lect2-chip { border: 1px solid var(--linea); border-radius: 8px; padding: 3px 9px; font-family: var(--serif-latina); font-size: 16px; }
.lect2-chip.lect2-q-L { background: #eef1ff; border-color: #8ea0e8; }
.lect2-chip.lect2-q-B { background: #fdeeee; border-color: #e39a9a; }
.lect2-carta-notae { margin-top: 10px; color: var(--aurum-profundum); font-size: 13px; }
.lect2-carta-quaere { margin-top: 12px; border: none; background: none; color: var(--purpura); font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.lect2-paginatio { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 18px 0 6px; }
.lect2-paginatio button { border: 1px solid var(--linea); background: var(--charta); border-radius: 10px; padding: 8px 16px; font-size: 15px; cursor: pointer; }
.lect2-paginatio button:disabled { opacity: .4; cursor: default; }
.lect2-paginatio-status { color: var(--atramentum-lene); font-size: 14px; }
.lect2-attributio { color: #b3a98f; font-size: 12px; text-align: center; margin-top: 14px; }
.lect2-attributio a { color: inherit; }

.schola-lingua { display: flex; gap: 8px; margin-bottom: 16px; }
.schola-lingua-optio { border: 1px solid var(--linea); background: var(--charta); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.schola-lingua-optio.est-activa { background: var(--pergamena-obscura); border-color: var(--aurum); font-weight: 700; }
.schola-doctrina { color: var(--atramentum); font-size: 17px; line-height: 1.65; max-width: 640px; }
.schola-exempla { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.schola-exemplum { font-family: var(--serif-latina); background: var(--charta); border: 1px solid var(--linea); border-radius: 10px; padding: 6px 12px; font-size: 17px; }
.schola-divisor { border: none; border-top: 1px solid var(--linea); margin: 20px 0; }
.schola-lectio-badge { align-self: flex-start; margin-top: 4px; background: var(--pergamena-obscura); border-radius: 999px; font-size: 11px; padding: 1px 8px; color: var(--atramentum-lene); }
.pensum-spatium { width: 14px; }
.pensum-syllaba.est-elisa { opacity: .4; text-decoration: line-through; cursor: default; }
.pensum-errata { margin: 10px 0 0; padding-left: 18px; color: var(--atramentum-lene); font-size: 15px; }
.pensum-errata li { margin: 4px 0; }