/* ========================================
   EDITION NOTES - Hinweise zur Ausgabe
   ======================================== */

.edition-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--rounded-md, 0.375rem);
  font-size: 0.9rem;
  line-height: 1.6;
}

.edition-note p {
  margin: 0;
}

.edition-note strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* Seitengleiche Originalausgabe - dezent grün */
.edition-note--reprint {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #166534;
}

/* Digitalisierter Scan - dezent blau */
.edition-note--scan {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
}

/* ========================================
   FEATURED BOOKS - Hervorgehobene Bücher
   ======================================== */

.featured-book {
  border: 2px solid #fbbf24;
  background: linear-gradient(135deg, #fef3c7 0%, #ffffff 100%);
  border-radius: var(--rounded-lg, 0.5rem);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.featured-book__label {
  display: inline-block;
  background: #f59e0b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.featured-book__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--color-primary-800, #8b0000);
}

.featured-book__subtitle {
  font-size: 1rem;
  color: #6b7280;
  margin: 0 0 0.75rem 0;
  font-style: italic;
}

.featured-book__description {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.6;
}

/* ========================================
   BLOG - Interaktives Layout
   ======================================== */

.blog-interactive {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Scrollbare Tabelle */
.blog-posts-table-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-gray-200, #e5e5e5);
  border-radius: var(--rounded-md, 0.375rem);
}

.blog-posts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.blog-posts-table thead {
  position: sticky;
  top: 0;
  background: var(--color-gray-100, #f3f4f6);
  z-index: 1;
}

.blog-posts-table th,
.blog-posts-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200, #e5e5e5);
}

.blog-posts-table th {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600, #6b7280);
}

.blog-posts-table tbody tr {
  transition: background 0.15s ease;
}

.blog-posts-table tbody tr:hover {
  background: var(--color-gray-50, #f9fafb);
}

.blog-posts-table tbody tr.active {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
}

.blog-posts-table .post-date {
  white-space: nowrap;
  color: var(--color-gray-500, #6b7280);
  font-size: 0.85rem;
}

.blog-posts-table .post-title {
  font-weight: 500;
}

.blog-posts-table .post-title a {
  color: var(--color-primary-800, #8b0000);
  text-decoration: none;
}

.blog-posts-table .post-title a:hover {
  text-decoration: underline;
}

.blog-posts-table tbody tr.active .post-title a {
  font-weight: 700;
}

.blog-posts-table .post-tags {
  color: var(--color-gray-500, #6b7280);
  font-size: 0.85rem;
}

/* Post-Vorschau */
.blog-post-preview {
  padding: 1.5rem;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-200, #e5e5e5);
  border-radius: var(--rounded-lg, 0.5rem);
}

.blog-post-preview h2 {
  margin-top: 0;
  color: var(--color-primary-800, #8b0000);
}

.blog-post-preview .post-meta {
  font-size: 0.9rem;
  color: var(--color-gray-500, #6b7280);
  margin-bottom: 1rem;
}

.blog-post-preview .post-content {
  line-height: 1.7;
}

.blog-post-preview .read-more {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200, #e5e5e5);
}

.blog-post-preview .read-more a {
  font-weight: 500;
  color: var(--color-primary-800, #8b0000);
}

/* Post Navigation */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-gray-200, #e5e5e5);
}

.post-navigation .nav-prev,
.post-navigation .nav-next {
  padding: 0.5rem 1rem;
  background: var(--color-gray-100, #f3f4f6);
  border-radius: var(--rounded, 0.25rem);
  text-decoration: none;
  font-size: 0.9rem;
}

.post-navigation .nav-prev:hover,
.post-navigation .nav-next:hover {
  background: var(--color-gray-200, #e5e5e5);
}

/* Post Tags */
.post-tags {
  margin-bottom: 1rem;
}

.post-tags .tag {
  margin-right: 0.5rem;
}

/* Blog Article */
.blog-post {
  margin-top: 1.5rem;
}

.blog-post__header {
  margin-bottom: 1.5rem;
}

.blog-post__header h2 {
  margin-top: 0;
  color: var(--color-primary-800, #8b0000);
}

.blog-post__content {
  line-height: 1.8;
}

.blog-post__content h1,
.blog-post__content h2,
.blog-post__content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-post__content p {
  margin-bottom: 1rem;
}

.blog-post__content ul,
.blog-post__content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

/* ========================================
   BUNDLES - Sonderangebote
   ======================================== */

.bundles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.bundle-card {
  position: relative;
  border: 1px solid var(--color-gray-200, #e5e5e5);
  border-radius: var(--rounded-lg, 0.5rem);
  padding: 1.5rem;
  background: var(--color-white, #fff);
  transition: all 0.2s ease;
}

.bundle-card:hover {
  border-color: var(--color-primary-800, #8b0000);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
}

.bundle-card--featured {
  border: 2px solid #f59e0b;
  background: linear-gradient(135deg, #fef3c7 0%, #ffffff 50%);
}

.bundle-badge {
  position: absolute;
  top: -0.75rem;
  right: 1rem;
  background: #f59e0b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bundle-card__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
}

.bundle-card__title a {
  color: var(--color-primary-800, #8b0000);
  text-decoration: none;
}

.bundle-card__title a:hover {
  text-decoration: underline;
}

.bundle-card__description {
  font-size: 0.9rem;
  color: var(--color-gray-600, #6b7280);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.bundle-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.bundle-card__books {
  font-size: 0.9rem;
  color: var(--color-gray-500, #6b7280);
}

.bundle-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-800, #8b0000);
}

.bundle-card__savings {
  color: #059669;
  margin: 0 0 1rem 0;
}

.bundle-card__link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-primary-800, #8b0000);
  color: white !important;
  border-radius: var(--rounded, 0.25rem);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
}

.bundle-card__link:hover {
  background: var(--color-primary-700, #a01010);
}

/* Bundle Detail Page */
.bundle-detail__header {
  background: var(--color-gray-50, #f9fafb);
  padding: 2rem;
  border-radius: var(--rounded-lg, 0.5rem);
  margin-bottom: 2rem;
}

.bundle-detail__description {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
}

.bundle-detail__pricing {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.bundle-price__amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary-800, #8b0000);
  display: block;
}

.bundle-price__per-book {
  font-size: 0.9rem;
  color: var(--color-gray-500, #6b7280);
}

.bundle-savings {
  padding: 0.75rem 1rem;
  background: #d1fae5;
  border-radius: var(--rounded, 0.25rem);
}

.bundle-savings__original {
  display: block;
  font-size: 0.9rem;
  color: var(--color-gray-600, #6b7280);
  text-decoration: line-through;
}

.bundle-savings__amount {
  font-weight: 600;
  color: #059669;
}

.bundle-books-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.bundle-books-table th,
.bundle-books-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200, #e5e5e5);
}

.bundle-books-table th {
  background: var(--color-gray-100, #f3f4f6);
  font-weight: 600;
}

.bundle-books-table .price-cell {
  text-align: right;
  white-space: nowrap;
}

.bundle-books-table tfoot {
  background: var(--color-gray-50, #f9fafb);
}

.bundle-books-table .bundle-total {
  background: #d1fae5;
}

.bundle-books-table .bundle-total td {
  color: #059669;
}

.btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
}

/* Bundle-Note auf Buchseiten */
.bundle-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #fef3c7 0%, #fff8e1 100%);
  border: 1px solid #f59e0b;
  border-radius: var(--rounded-lg, 0.5rem);
}

.bundle-note strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #92400e;
}

.bundle-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.bundle-list li {
  margin: 0.25rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.bundle-list li::before {
  content: '\2192'; /*'→' */
  position: absolute;
  left: 0;
  color: #f59e0b;
}

.bundle-list a {
  color: #92400e;
  text-decoration: none;
  font-weight: 500;
}

.bundle-list a:hover {
  text-decoration: underline;
}

/* Werkausgabe-Info Box */
.werkausgabe-info {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid #3b82f6;
  border-radius: var(--rounded-lg, 0.5rem);
}

.werkausgabe-info h3 {
  margin-top: 0;
  color: #1e40af;
}

.werkausgabe-info ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.werkausgabe-info li {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.werkausgabe-info strong {
  color: #1e40af;
}

.werkausgabe-info p:last-child {
  margin-bottom: 0;
  padding: 1rem;
  background: #fef3c7;
  border-radius: var(--rounded, 0.25rem);
  font-size: 0.9rem;
}

/* Intro-Link auf Autorenseiten */
.intro-link {
  margin: 1.5rem 0;
}

.intro-link .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

/* ================================================
   COLLECTION LAYOUT STYLES
   ================================================ */

.collection-page {
  max-width: 900px;
  margin: 0 auto;
}

.collection-header {
  margin-bottom: 2rem;
}

.collection-type {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--color-primary-100, #e0f2fe);
  color: var(--color-primary-800, #075985);
  border-radius: var(--rounded, 0.25rem);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.collection-type.triade {
  background: #fef3c7;
  color: #92400e;
}

.collection-type.serie {
  background: #d1fae5;
  color: #065f46;
}

.collection-intro {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Kernthemen */
.collection-themes {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-surface, #f8fafc);
  border-radius: var(--rounded-lg, 0.5rem);
}

.themes-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.theme-item {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.theme-item::before {
  content: '\2192'; /*'→' */
  position: absolute;
  left: 0;
  color: var(--color-primary-600, #0284c7);
}

.theme-desc {
  color: var(--color-text-muted, #64748b);
}

/* Bücher-Grid in Collection */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.collection-book {
  position: relative;
  padding: 1.25rem;
  background: white;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--rounded-lg, 0.5rem);
  transition: box-shadow 0.2s;
}

.collection-book:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.book-number {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-primary-600, #0284c7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.collection-book h3 {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.collection-book .subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  margin: 0.25rem 0;
}

.collection-book .meta {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.5rem;
}

.collection-role {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-primary-700, #0369a1);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

.status-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--rounded, 0.25rem);
}

.status-badge.draft {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.planned {
  background: #e0e7ff;
  color: #3730a3;
}

/* Reading Paths */
.reading-paths {
  margin: 2rem 0;
}

.reading-path {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: var(--rounded-lg, 0.5rem);
}

.reading-path h3 {
  margin: 0 0 0.25rem;
  color: var(--color-primary-800, #075985);
}

.path-audience {
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  font-style: italic;
  margin-bottom: 1rem;
}

.path-steps {
  margin: 0;
  padding-left: 1.5rem;
}

.path-steps li {
  margin: 0.5rem 0;
  padding-left: 0.5rem;
}

.path-steps a {
  font-weight: 500;
  color: var(--color-primary-700, #0369a1);
}

.step-note {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 0.125rem;
}

/* Relations */
.collection-relations {
  margin: 2rem 0;
}

.relations-diagram {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.relation-item {
  padding: 1rem;
  background: var(--color-surface, #f8fafc);
  border-radius: var(--rounded, 0.25rem);
}

.relation-books {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}

.book-ref {
  padding: 0.25rem 0.5rem;
  background: white;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--rounded, 0.25rem);
}

.relation-arrow {
  color: var(--color-primary-600, #0284c7);
  font-size: 1.25rem;
}

.relation-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
}

/* Collection Navigation */
.collection-navigation {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.collection-navigation .nav-link {
  padding: 0.5rem 1rem;
  background: var(--color-surface, #f8fafc);
  border-radius: var(--rounded, 0.25rem);
  text-decoration: none;
  font-size: 0.875rem;
}

.collection-navigation .nav-link:hover {
  background: var(--color-primary-100, #e0f2fe);
}

/* Authors Grid auf Einstieg-Index */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.author-card {
  padding: 1.5rem;
  background: white;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--rounded-lg, 0.5rem);
}

.author-card h3 {
  margin-top: 0;
}

.author-card p {
  color: var(--color-text-muted, #64748b);
}

/* ================================================================
   LESBARKEIT LANGER TEXTE
   ================================================================

   Nach einem Gutachten, das Kai eingeholt hat. Es betrifft die
   Biographie, die Enzyklopädie-Kommentare und künftig die
   Suhrkamp-Bände — Texte, die man liest, nicht überfliegt.

   Umgesetzt sind die vier Punkte, die am meisten tragen und am
   wenigsten am Bestehenden rütteln. Die übrigen Vorschläge des
   Gutachtens sind Gestaltungsfragen, die Kai entscheiden sollte,
   nicht ich. */

/* ---- 1. Die Satzbreite ---------------------------------------
 *
 * Der wichtigste Punkt, und er ist messbar: eine Zeile von mehr
 * als 75 Zeichen zwingt das Auge, den Zeilenanfang zu suchen.
 * Bei Hegels Perioden, die über acht Zeilen laufen können, ist
 * das der Unterschied zwischen Lesen und Buchstabieren.
 *
 * '72ch' statt einer Pixelbreite: 'ch' ist die Breite der Ziffer
 * Null in der jeweiligen Schrift. Damit stimmt die Zeichenzahl
 * auch dann, wenn jemand die Schrift vergrößert — eine
 * Pixelbreite täte das nicht.
 *
 * Die Polsterung steht am äußeren Kasten, nicht am Text: sonst
 * zählt sie zur Breite und die Zeile wird schmaler als gewollt. */
.article > p,
.article > ul,
.article > ol,
.article > blockquote,
.article > h2,
.article > h3,
.article > h4,
.triangle-maintext > p,
.triangle-maintext > ul,
.triangle-maintext > ol {
  max-width: 72ch;
}

/* ---- 2. Schriftgröße und Zeilenabstand -----------------------
 *
 * 0.9rem ist eine Größe für Beschriftungen, nicht für Fließtext.
 * Wer eine Stunde liest, braucht mehr.
 *
 * Der Zeilenabstand wächst mit: je länger die Zeile, desto mehr
 * Luft braucht sie, damit das Auge die nächste findet. 1.7 ist
 * für eine 72-Zeichen-Zeile angemessen. */
.article,
.triangle-maintext {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Überschriften brauchen weniger Abstand als Fließtext - sie
 * sind kurz, und 1.7 ließe sie auseinanderfallen. */
.article h1,
.article h2,
.article h3 {
  line-height: 1.25;
}

/* ---- 3. Kein Blocksatz ---------------------------------------
 *
 * Ohne Silbentrennung reißt Blocksatz Löcher zwischen die
 * Wörter, und im Deutschen mit seinen langen Wörtern besonders.
 * Flatterrand liest sich ruhiger.
 *
 * 'hyphens: auto' dazu: wo der Browser trennen kann, tut er es -
 * das hilft schmalen Schirmen mehr als jede andere Maßnahme. */
.article,
.triangle-maintext {
  text-align: start;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---- 4. Der senkrechte Rhythmus ------------------------------
 *
 * Ein Absatz gehört zu dem, was über ihm steht - deshalb mehr
 * Abstand davor als danach. Eine Überschrift, die von ihrem
 * Text durch denselben Abstand getrennt ist wie vom
 * vorhergehenden, gehört optisch zu keinem von beiden. */
.article > p + p,
.triangle-maintext > p + p {
  margin-block-start: 0.9em;
}

.article > h2,
.article > h3 {
  margin-block-start: 2em;
  margin-block-end: 0.6em;
}

/* Der erste Absatz nach einer Überschrift rückt nicht ein und
 * bekommt keinen zusätzlichen Abstand. */
.article > h2 + p,
.article > h3 + p {
  margin-block-start: 0;
}

/* ---- 5. Der Weg zurück aufs Dreieck --------------------------
 *
 * Kai: „Der entsprechende Abschnitt / Paragraph im Originaltext
 * könnte auch einen (Rück)Sprunglink zu dem Dreieck haben, so
 * daß man zwischen beiden hin und her springen kann."
 *
 * Das Zeichen steht neben der Paragraphennummer, klein und ohne
 * Beschriftung: der Text soll nicht von Symbolen unterbrochen
 * werden. Wer den Weg sucht, findet ihn am Anfang des
 * Abschnitts.
 *
 * Es tritt erst hervor, wenn man darüber fährt — im Lesefluß
 * bleibt es zurückhaltend. */
a.zum-dreieck {
  display: inline-block;
  vertical-align: 0.1em;
  margin-inline-start: 0.35em;
  opacity: 0.45;
  transition: opacity 0.15s ease;
  text-decoration: none;
}

a.zum-dreieck:hover,
a.zum-dreieck:focus-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  a.zum-dreieck { transition: none; }
}

/* Beim Drucken ist ein Verweis sinnlos. */
@media print {
  a.zum-dreieck { display: none; }
}

/* ---- 6. Die Seitenmarke der Suhrkamp-Ausgabe ----------------
 *
 * Im Text steht an jedem Seitenumbruch '5/13' — Band und Seite.
 * Das ist die Angabe, mit der man zitiert, und sie soll da sein,
 * ohne den Lesefluß zu stören.
 *
 * Deshalb an den Rand, klein und blaß: wer liest, sieht sie
 * nicht; wer zitiert, findet sie. */
.werkseite {
  font-size: 0.75em;
  color: var(--color-gray-600, #666);
  user-select: all;
}

/* Auf breiten Schirmen an den Rand, wo Platz ist. */
@media (min-width: 60rem) {
  .werkseite {
    position: absolute;
    inset-inline-start: -4.5rem;
    text-align: end;
    width: 4rem;
  }
  .article > p {
    position: relative;
  }
}

/* 'user-select: all' oben: ein Klick wählt die ganze Angabe -
 * beim Zitieren will man '5/13', nicht '5' oder '13'. */

/* ---- 7. Zusatz, Anmerkung, Fußnote --------------------------
 *
 * Hegels Ausgabe unterscheidet dreierlei, und die Unterscheidung
 * ist keine Äußerlichkeit:
 *
 *   der Paragraph    Hegels Text, knapp und gedrängt
 *   die Anmerkung    seine eigene Erläuterung dazu
 *   der Zusatz       aus den Vorlesungen, von Schülern
 *
 * Wer beim Zitieren den Zusatz für Hegels Text hält, zitiert
 * einen Schüler. Deshalb müssen sie zu unterscheiden sein — und
 * zwar auch für den, der die Seite nur überfliegt. */
.werk-zusatz,
.werk-anmerkung,
.werk-fussnote {
  margin-block: 1.2em;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--hegel-rule, #ccc);
  font-size: 0.95em;
}

/* Der Zusatz stammt aus der Vorlesung — etwas gesprächiger als
 * der Paragraph, deshalb etwas leichter gesetzt. */
.werk-zusatz {
  border-inline-start-color: var(--hegel-accent, #7a6ea8);
}

/* Die Anmerkung ist Hegels eigene — sie steht dem Paragraphen
 * näher und bekommt deshalb dieselbe Farbe wie der Text. */
.werk-anmerkung {
  border-inline-start-color: var(--color-gray-500, #888);
}

.werk-fussnote {
  font-size: 0.85em;
  color: var(--color-gray-700, #555);
}

/* Das Zitat ist eine angeführte Stelle, kein eigener Abschnitt. */
.werk-zitat {
  font-style: italic;
}

/* ---- 8. Abstand nach der Jahreszahl -------------------------
 *
 * Kai: „Bei den Hegelianer-PDFs fehlt der Abstand zwischen der
 * Jahreszahl und dem Link auf die eigentliche PDF … auf die
 * Weise klebt direkt an der Jahreszahl dann diese PDF."
 *
 * Die Vorlage setzt Verfasser und Jahr in Elemente, die durch
 * Zeilenumbrüche im Quelltext getrennt sind — daraus macht der
 * Browser ein Leerzeichen. Der Verweis danach folgt aber
 * unmittelbar, ohne Umbruch dazwischen.
 *
 * Ein Rand am Element ist hier besser als ein Leerzeichen im
 * Quelltext: er bleibt auch dann, wenn jemand die Vorlage
 * umbricht oder zusammenzieht. */
.triangle-sidebar .year {
  margin-inline-end: 0.4em;
}

/* Und ein wenig Luft vor dem Verfasser, aus demselben Grund. */
.triangle-sidebar .author {
  margin-inline-end: 0.25em;
}

/* ---- 9. Was von den Typographie-Vorschlägen noch fehlte -----
 *
 * Kai: „Wir sollten auch nochmal prüfen, ob wir noch mehr von
 * ChatGPTs Vorschlägen/Tipps zur Typographie übernehmen können."
 *
 * Aus `chagpt-zum-hegelnet-v3-layout.md`. Umgesetzt sind
 * bereits: Satzbreite (1), Schrift und Zeilenabstand (3), kein
 * erzwungener Blocksatz (4), vertikaler Rhythmus (5). Was
 * folgt, sind die Punkte 6, 10 und 12. */

/* Punkt 6 — Überschriften brechen ausgewogen.
 *
 * Der Vorschlag: die H1 weniger als Website-Headline, mehr als
 * Buchtitel. `text-wrap: balance` verteilt die Wörter auf die
 * Zeilen, statt die letzte mit einem Wort enden zu lassen.
 *
 * Nur bis vier Zeilen wirksam — genau der Fall bei
 * Überschriften. Browser ohne Unterstützung brechen wie
 * bisher; nichts geht verloren. */
h1, h2, h3 {
  text-wrap: balance;
}

/* Der erste Absatz nach einer Überschrift bricht ebenfalls
 * ruhiger — `pretty` verhindert nur die einzelne Schlußzeile,
 * ohne den Umbruch insgesamt umzurechnen. */
p {
  text-wrap: pretty;
}

/* Punkt 10 — Zitate nicht kursiv, sondern eingerückt.
 *
 * Der Vorschlag ausdrücklich: „Nicht einfach alles kursiv
 * setzen." Ein längeres Zitat in Kursive liest sich mühsam;
 * die Einrückung mit Randlinie sagt dasselbe, ohne die Schrift
 * zu verändern.
 *
 * Der Farbwert kommt aus den Variablen, nicht als fester Wert:
 * so gilt er auch im dunklen Modus. */
blockquote {
  margin-block: 1.8rem;
  padding-inline-start: 1.25rem;
  padding-block: 0.2rem;
  border-inline-start: 3px solid var(--color-gray-300, rgba(0, 0, 0, 0.18));
  font-size: 0.98em;
  line-height: 1.65;
}

blockquote p:last-child {
  margin-block-end: 0;
}

/* Die Quellenangabe darunter, kleiner und abgesetzt. */
blockquote cite,
blockquote footer {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 0.9em;
  font-style: normal;
}

/* Punkt 12 — die Paragraphenzeichen als eigene Marke.
 *
 * Bei den Werktexten folgen `§ 21`, `§ 22`, `§ 23`
 * aufeinander. Als eigene Zeile gesetzt, wird die Gliederung
 * sichtbar, ohne daß der Text zerfällt.
 *
 * `werke_wandeln.py` setzt bereits Anker; diese Regel greift,
 * sobald eine Nummer in `<span class="paragraf">` steht. */
.paragraf,
.paragraph-number {
  display: block;
  margin-block-start: 1.6rem;
  margin-block-end: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* Springt man über einen Anker hierher, soll die Nummer nicht
 * am oberen Rand kleben. */
.paragraf:target,
[id^="P"]:target {
  scroll-margin-block-start: 4rem;
}

/* ---- 10. Das Spiel steht in der Mitte -----------------------
 *
 * Kai: „zunächst einmal wäre es gut, wenn der Text und die
 * Buttons über und unter dem Dreieck für das Spiel, zusammen mit
 * dem Dreieck selbst, mittig auf der Seite wären."
 *
 * Das Dreieck ist symmetrisch und zieht den Blick in seine
 * Mitte. Steht die Frage links und das Dreieck mittig, laufen
 * zwei Achsen nebeneinanderher — und das Auge muß bei jedem Zug
 * springen.
 *
 * `align-items: center` statt `text-align`, damit auch die
 * Schaltflächen mittig sitzen und nicht nur ihre Beschriftung. */
.quiz-seite .quiz {
  display: flex;
  flex-direction: column;
  /* NICHT 'center'.
   *
   * Bei einer Spalte schrumpft 'align-items: center' die Kinder
   * auf ihre Inhaltsbreite - ein SVG mit 'width: 100%' hat dann
   * keine 100% mehr, worauf es sich beziehen könnte. Das
   * Dreieck wurde dadurch winzig.
   *
   * 'stretch' läßt die volle Breite; zentriert wird über
   * 'margin-inline: auto' an den einzelnen Teilen. */
  align-items: stretch;
  text-align: center;
}

/* Das Dreieck behält seine Größe und sitzt mittig. */
.quiz-seite .quiz-bild {
  inline-size: 100%;
  /* SO GROSS WIE DAS NORMALE DREIECK.
   *
   * Kai: „bitte einheitlich die Größe ähnlich groß wie die
   * normale Dreiecksgröße, sie ist immer zu klein."
   *
   * 34rem war die Breite des Textbereichs. Das normale Dreieck
   * nimmt die volle Breite seines Behälters — beim Spiel ist es
   * die Hauptsache, keine Beigabe zum Text. */
  max-inline-size: min(100%, 46rem);
  margin-inline: auto;
  /* Luft nach oben und unten: das Dreieck ist die Hauptsache
   * und soll nicht zwischen den Schaltflächen klemmen. */
  margin-block: 1.4rem;
}

/* Die Frage darf breit sein, aber nicht beliebig: dieselbe
 * Satzbreite wie im übrigen Text, damit die Zeile lesbar
 * bleibt. */
.quiz-seite .quiz-frage,
.quiz-seite .quiz-meldung {
  max-inline-size: 46ch;
  margin-inline: auto;
}

/* Die Schaltflächen in einer Reihe, mit Umbruch auf schmalen
 * Geräten. */
.quiz-seite .quiz-steuerung,
.quiz-seite .quiz-wahl,
.quiz-seite .quiz-gebiete {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}


/* ---- 11. Buchstaben und Seitenwechsler nebeneinander --------
 *
 * Kai: „das eigentliche Problem ist, daß hier keine
 * Seitenwechsler-Navigation über und unter der Tabelle
 * angezeigt werden."
 *
 * Beide sitzen jetzt in derselben Leiste, in eigenen Fächern:
 * die Buchstaben als Sprung in die Liste, der Seitenwechsler
 * als Auskunft, wo man steht. */
.datatable-pagination {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.datatable-pagination .datatable-buchstaben,
.datatable-pagination .datatable-seiten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

/* Die Buchstaben etwas zurückgenommen: sie sind ein Werkzeug,
 * keine Überschrift. */
.datatable-pagination .datatable-buchstaben {
  font-size: 0.9em;
}

/* ---- Ausgegraut, wenn der Buchstabe nichts bedeutet ---------
 *
 * Kai: „wenn nach einer anderen Spalte sortiert wird, sind die
 * Buttons ausgegraut."
 *
 * Im zweisprachigen Glossar hängt der Anfangsbuchstabe an der
 * Spalte: 'Aufhebung' steht unter A, 'Sublation' unter S. Wird
 * nach Code oder nach den Sprachen sortiert, bedeutet ein
 * Anfangsbuchstabe gar nichts mehr.
 *
 * NICHT VERSTECKT, SONDERN AUSGESCHALTET. Eine Leiste, die
 * verschwindet und wiederkommt, läßt die Seite springen, und
 * wer sie sucht, hält sie für verloren. Ausgegraut sagt: es
 * gibt sie, nur jetzt nicht.
 *
 * 'cursor: not-allowed' auf dem Behälter, nicht auf den
 * Knöpfen: ein deaktivierter Knopf nimmt keine Zeigerereignisse
 * an, der Zeiger bliebe sonst der gewöhnliche. */
.datatable-pagination .datatable-buchstaben.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.datatable-pagination .datatable-buchstaben button[disabled] {
  pointer-events: none;
}

/* ---- 12. Die Flaggenleiste als Sprachfilter -----------------
 *
 * Kai: „die Flaggenleiste könnte ein guter Filter sein… dann
 * braucht es das extra Filter-Dropdown für die Sprache auch
 * nicht."
 *
 * Ein Auswahlfeld verlangt zwei Griffe — aufklappen, wählen.
 * Eine Leiste verlangt einen, und sie zeigt nebenbei, welche
 * Sprachen es überhaupt gibt. */
.datatable-flaggen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}

.datatable-flagge {
  border: 1px solid transparent;
  border-radius: 0.35rem;
  background: none;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  font-size: 1.25rem;
  line-height: 1.1;
  /* Ohne Übergang wirkt das Umschalten hart; mit ihm sieht man,
   * daß etwas geschehen ist. */
  transition: opacity 0.15s, border-color 0.15s;
}

/* Grau, wo keine Zeile vorliegt.
 *
 * Der Knopf bleibt sichtbar: er sagt, daß es die Sprache gibt
 * und dort noch nichts steht. Ihn zu verstecken hieße, die
 * Lücke zu verschweigen. */
.datatable-flagge--leer {
  filter: grayscale(100%);
  opacity: 0.35;
  cursor: default;
}

/* Die gewählte Sprache — auch ohne Farbe erkennbar, für alle,
 * die Farben schlecht unterscheiden. */
.datatable-flagge--an {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* Die Weltkugel steht vorn und etwas abgesetzt: sie ist keine
 * Sprache, sondern deren Aufhebung. */
.datatable-flagge--alle {
  margin-inline-end: 0.4rem;
  border-inline-end: 1px solid
    color-mix(in srgb, currentColor 25%, transparent);
  padding-inline-end: 0.5rem;
  border-radius: 0.35rem 0 0 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .datatable-flagge { transition: none; }
}

/* ---- 13. Die Fassungen eines Glossarbegriffs ----------------
 *
 * Kai: „wenn man Verweise baut, dann vermutlich am besten auf
 * die Sprachen, die vorliegen, mit Fahnen."
 *
 * Sie stehen neben dem Begriff und erscheinen nur, wo es mehr
 * als eine Fassung gibt — eine einzelne deutsche Flagge neben
 * jedem Eintrag wäre Lärm. */
.glossar-fassungen {
  display: inline-flex;
  gap: 0.2rem;
  margin-inline-start: 0.5rem;
  font-size: 0.85em;
  /* Etwas zurückgenommen: der Begriff ist die Hauptsache, die
   * Fassungen sind die Auskunft daneben. */
  opacity: 0.75;
}

.glossar-fassungen a {
  text-decoration: none;
  border-bottom: none;
}

.glossar-fassungen a:hover,
.glossar-fassungen a:focus {
  opacity: 1;
}