/* ---------------------------------------------------------------------------
   E30-Kalender
   Farben und Typografie sind aus dem IPSFocus-Theme von e30-talk.com
   übernommen, damit sich die Unterseite nahtlos anfühlt.
   --------------------------------------------------------------------------- */

:root {
  --page-bg:        #55728b;   /* Seitenhintergrund (theme-page_background) */
  /* Das Forum legt über den Seitenhintergrund eine weiße Schicht (dort
     --content--overlay auf .ortem-content). Sichtbar ist deshalb kein Blau,
     sondern ein sehr helles Grau. */
  --page-overlay:   linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .85));
  --header-bg:      #262626;   /* Kopfbereich (theme-header) */
  --brand:          #55728b;   /* Akzentfarbe (theme-brand_primary) */
  --brand-dark:     #294d66;   /* Buttonleiste / Breadcrumb (theme-button_bar) */
  --content-bg:     #ffffff;   /* Inhaltsflächen (theme-area_background_reset) */
  --content-alt:    #e4e4e4;   /* zweite Ebene (theme-area_background) */
  --text:           #222222;   /* theme-text_color */
  --text-muted:     #6b6b6b;
  --link:           #313131;   /* theme-link */
  --link-hover:     #55728b;   /* theme-link_hover */
  --border:         #d5d5d5;
  --nav-bg:         #ffffff;   /* theme-main_nav_tab */
  --nav-fg:         #000000;   /* theme-main_nav_font */

  --ok-bg:    #e3f2e3;  --ok-fg:    #1f6127;  --ok-border:   #a9d3ab;
  --warn-bg:  #fdf3dc;  --warn-fg:  #7a5a12;  --warn-border: #e8d197;
  --err-bg:   #fbe4e4;  --err-fg:   #8d2020;  --err-border:  #e5aeae;

  --radius: 0;  /* das Forum-Theme arbeitet durchgehend ohne Rundungen */
  --shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--page-bg);
  background-image: var(--page-overlay);
  color: var(--text);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0 0 .6em; line-height: 1.25; font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Volle Fensterbreite mit schmalem Rand – genau wie .ipsLayout_container im
   Forum, damit Kopf, Navigation und Inhalt an denselben Kanten stehen. */
.wrap { max-width: 97%; margin: 0 auto; padding: 0 15px; }

.skip-link {
  position: absolute; left: -9999px;
  background: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 10px; top: 10px; }

/* --- Kopfbereich --------------------------------------------------------- */

/* Hintergrundbild und Ausrichtung sind aus dem Forum übernommen:
   #ipsLayout_header header nutzt dort dieselbe Grafik mit background-size:
   cover und background-position: 50% 0. Die Farbe darunter greift, solange
   das Bild lädt und an den Rändern sehr breiter Fenster. */
.site-header {
  background-color: var(--header-bg);
  background-image: url("../img/header-bg.jpg");
  background-position: 50% 0;
  background-size: cover;
  background-repeat: repeat;
}

/* 150px ist die Höhe des Forum-Kopfbereichs; das Logo füllt sie dort in seiner
   natürlichen Größe von 448 × 150 px aus. */
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 150px; flex-wrap: wrap;
}

.site-header__logo img { width: 448px; max-width: 100%; height: auto; }

.site-header__user {
  display: flex; align-items: center; gap: 18px;
  color: #f0f0f0; font-size: 14px;
  /* Der Text steht jetzt auf einem Foto statt auf einfarbigem Dunkelgrau –
     der Schatten hält ihn über hellen Bildstellen lesbar. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6);
}
.site-header__name strong { color: #fff; }

/* Der Admin-Hinweis steht direkt neben „wechseln“ und bekommt deshalb dieselben
   Maße wie die Schaltfläche – gleiche Polsterung, gleiche Schriftgröße und ein
   unsichtbarer Rahmen, damit beide exakt gleich hoch sind. */
.site-header__user .tag {
  padding: 5px 10px; font-size: 14px; line-height: 1.2;
  border: 1px solid transparent;
  /* Zwischen Name und Etikett steht sonst nur das Leerzeichen aus dem Markup.
     Zusammen mit dem ergibt das denselben Abstand wie zur Schaltfläche. */
  margin-left: 14px;
}
.site-header__user .btn--small { font-size: 14px; }

/* --- Navigation ---------------------------------------------------------- */

.mainnav { background: var(--nav-bg); box-shadow: rgba(0, 0, 0, .1) 0 1px 2px; }

.mainnav ul {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}

.mainnav a {
  display: block; padding: 15px 18px;
  color: rgba(0, 0, 0, .7);
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em;
}
.mainnav a:hover { color: var(--nav-fg); background: rgba(0, 0, 0, .05); text-decoration: none; }
.mainnav a.is-active { color: var(--nav-fg); box-shadow: inset 0 -3px 0 var(--brand); }

/* Alle dunkelblauen Leisten – Breadcrumb, Panel-Kopf, Stimmenzähler – tragen
   dieselbe Schriftgröße, damit die Seite nicht zwischen 12 und 14px springt. */
.breadcrumb {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, .75);
  font-size: 14px; padding: 10px 0;
}
.breadcrumb a { color: #fff; }
.breadcrumb__sep { padding: 0 6px; opacity: .5; }

/* --- Inhaltsflächen ------------------------------------------------------ */

main.wrap { padding-top: 18px; padding-bottom: 40px; }

.panel {
  background: var(--content-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.panel__head {
  background: var(--brand-dark);
  color: #fff;
  font-size: 14px;
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.panel__head h1, .panel__head h2 { margin: 0; font-size: 15px; color: #fff; font-weight: 600; }
/* Der Zusatz rechts im Kopf ist ein .small – hier zieht die Leistengröße. */
.panel__head .small { font-size: 14px; }
.panel__head a { color: #fff; text-decoration: underline; }

.panel__body { padding: 18px 16px; }
.panel__body > :last-child { margin-bottom: 0; }

.panel__foot {
  background: var(--content-alt);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}

.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.center { text-align: center; }

/* Aufzählung im Fließtext, z. B. die Teilnahmeregeln auf der Startseite. */
.rules { margin: 0; padding-left: 20px; }
.rules li { margin-bottom: .7em; }
.rules li:last-child { margin-bottom: 0; }

/* --- Hinweise ------------------------------------------------------------ */

.notice {
  padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid; font-size: 13px;
}
.notice--success { background: var(--ok-bg);   color: var(--ok-fg);   border-color: var(--ok-border); }
.notice--info    { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.notice--error   { background: var(--err-bg);  color: var(--err-fg);  border-color: var(--err-border); }

.phase-box {
  background: var(--content-alt);
  border-left: 4px solid var(--brand);
  padding: 14px 16px; margin-bottom: 18px;
}
.phase-box h2 { margin-bottom: .35em; }

/* Überschrift und Countdown nebeneinander, auf schmalen Schirmen untereinander */
.phase-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
.phase-head h2 { margin-bottom: .35em; }

/* --- Countdown ----------------------------------------------------------- */

.countdown {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: var(--brand-dark); color: #fff;
  padding: 6px 12px; margin-bottom: .35em;
  white-space: nowrap;
}

.countdown__value {
  font-weight: 700; font-size: 14px;
  /* Gleich breite Ziffern, sonst zappelt die Anzeige im Sekundentakt */
  font-variant-numeric: tabular-nums;
}

.countdown__label { font-size: 11px; opacity: .8; }

.countdown.is-over { background: var(--warn-bg); color: var(--warn-fg); }
.countdown.is-over .countdown__label { opacity: 1; }

/* --- Zeitplan ------------------------------------------------------------ */

.timeline { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 700px) { .timeline { grid-template-columns: repeat(3, 1fr); } }

.timeline__step { background: #fff; padding: 12px 14px; }
.timeline__step.is-current { background: var(--brand); color: #fff; }
.timeline__step.is-current .timeline__label { color: rgba(255, 255, 255, .8); }
.timeline__step.is-done { background: #f2f2f2; color: var(--text-muted); }
.timeline__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.timeline__value { font-weight: 600; }

/* --- Schaltflächen ------------------------------------------------------- */

.btn {
  display: inline-block; cursor: pointer;
  padding: 9px 16px; border: 1px solid transparent;
  background: var(--content-alt); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.2;
  border-radius: var(--radius);
}
.btn:hover { text-decoration: none; filter: brightness(.95); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; filter: none; }

.btn--primary { background: var(--brand-dark); color: #fff; }
.btn--primary:hover { background: #20415a; color: #fff; }
.btn--ghost { background: transparent; border-color: currentColor; color: #d8d8d8; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn--danger { background: #8d2020; color: #fff; }
.btn--danger:hover { background: #741a1a; color: #fff; }
.btn--small { padding: 5px 10px; font-size: 12px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- Formulare ----------------------------------------------------------- */

.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; margin-bottom: 5px; }
.field__hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

input[type="text"], input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font: inherit; border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

.field--check { display: flex; gap: 9px; align-items: flex-start; }
.field--check input { margin-top: 2px; flex: none; }
.field--check label { font-weight: normal; }

.grid-2 { display: grid; gap: 0 20px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; gap: 0 20px; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.dropzone {
  border: 2px dashed var(--border); background: #fafafa;
  padding: 28px 20px; text-align: center; cursor: pointer;
}
.dropzone.is-over { border-color: var(--brand); background: #eef2f6; }
.dropzone input[type="file"] { display: none; }
.dropzone__hint { color: var(--text-muted); font-size: 12px; margin-top: 6px; }

/* Während der Übertragung: keine neue Auswahl mehr annehmen. */
.dropzone.is-busy { pointer-events: none; opacity: .55; }

/* --- Fortschritt beim Upload --------------------------------------------- */

.upload-progress { margin-top: 16px; }
.upload-progress[hidden] { display: none; }

.upload-progress__track {
  height: 10px; background: var(--content-alt);
  border: 1px solid var(--border); overflow: hidden;
}

.upload-progress__bar {
  height: 100%; width: 0;
  background: var(--brand-dark);
  transition: width .2s linear;
}

.upload-progress__text {
  margin: 6px 0 0; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.filelist { list-style: none; margin: 14px 0 0; padding: 0; font-size: 12px; }
.filelist li {
  padding: 8px 0; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.filelist .is-bad { color: var(--err-fg); }
.filelist .is-good { color: var(--ok-fg); }

/* Vorschau der ausgewählten Datei. Feste Höhe, freie Breite: das Bild behält
   sein Seitenverhältnis, und genau das ist hier eine Prüfbedingung – ein
   zugeschnittenes Vorschaubild würde die Beanstandung im Text widerlegen. */
.filelist__thumb {
  height: 64px; width: auto; max-width: 140px;
  flex: none; cursor: pointer;
  border: 1px solid var(--border); background: #f2f2f2;
}
.filelist__thumb:hover { border-color: var(--brand); }

/* Schiebt das Häkchen an den rechten Rand, egal wie kurz der Text ist. */
.filelist__name { flex: 1; }

/* --- Bildraster ---------------------------------------------------------- */

/* Bilderraster.
   Unterhalb von 1000px füllt der Browser selbst auf, damit die Kacheln auf
   Telefon und Tablet nicht zu schmal werden. Erst darüber greift die im
   Backend eingestellte Spaltenzahl, die als --spalten am Element hängt. */
.gallery {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

@media (min-width: 1000px) {
  .gallery { grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); }
}

.card {
  background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}

.card__image { position: relative; display: block; background: #111; }
.card__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__image::after {
  content: "Vergrößern"; position: absolute; inset: auto 0 0 0;
  background: rgba(0, 0, 0, .65); color: #fff;
  font-size: 11px; text-align: center; padding: 5px;
  opacity: 0; transition: opacity .15s;
}
.card__image:hover::after, .card__image:focus-visible::after { opacity: 1; }

.card__body { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1; }
.card__member { font-weight: 600; }
.card__meta { color: var(--text-muted); font-size: 11px; }

.card--rejected { opacity: .55; }
.card--rejected .card__image img { filter: grayscale(1); }

/* --- Kalenderblatt-Optik ------------------------------------------------- */

/* Die Bildkacheln in Galerie, Einsendungen, Ergebnis und Archiv sehen aus wie
   kleine Wandkalender: Drahtkammbindung über der Oberkante, ringsum ein
   Papierrand. Alles reines CSS, das Markup bleibt unberührt. */
.card,
.podium__item {
  position: relative;
  padding: 28px 12px 14px;  /* oben die Bindung, ringsum Papierrand */
}

/* Der Bildrand soll auf dem weißen Papier nicht ausfransen, wenn das Foto
   selbst hell ist – eine Haarlinie statt eines vollen Rahmens. */
.card__image img,
.podium__image img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }

/* Die Beschriftung rückt näher an die Bildkante als der Papierrand, sonst
   steht sie auf schmalen Kacheln unnötig weit innen. */
.card__body,
.podium__body { padding-left: 2px; padding-right: 2px; }

/* Drahtkammbindung: greift über die Papierkante. Die drei Farbstopps je Draht
   – hell, dunkel, hell – lassen ihn rund und metallisch wirken. */
.card::before,
.podium__item::before {
  content: "";
  position: absolute;
  top: -2px; left: 14px; right: 14px; height: 19px;
  background-image: repeating-linear-gradient(to right,
    transparent 0 2.6px, #9aa1a8 2.6px 3.5px, #4a5058 3.5px 5.4px,
    #b0b6bc 5.4px 6.2px, transparent 6.2px 9px);
  pointer-events: none;
  z-index: 2;
}

/* Daumen-Schaltfläche */
.vote {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
}
.vote:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.vote.is-voted { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* Ohne diese Regel greift beim Hovern eines vergebenen Daumens die Zeile
   darüber: blaue Schrift auf dunkelblauem Grund, also kaum lesbar.
   Die Auswahl ist eine Klasse spezifischer und gewinnt damit. */
.vote.is-voted:hover:not(:disabled) {
  background: #20415a; border-color: #20415a; color: #fff;
}
.vote:disabled { opacity: .45; cursor: not-allowed; }
.vote__icon { font-size: 15px; line-height: 1; }

.vote-status {
  position: sticky; top: 0; z-index: 20;
  background: var(--brand-dark); color: #fff;
  font-size: 14px;
  padding: 10px 16px; margin-bottom: 16px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.vote-status strong { color: #fff; }
.vote-status .small { font-size: 14px; }

/* Umschalter zwischen allen Bildern und den selbst gewählten. Sitzt in der
   dunklen Leiste und ist deshalb hell umrandet statt flächig. */
.vote-filter { display: inline-flex; gap: 6px; }
.vote-filter[hidden] { display: none; }

.vote-filter__btn {
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  background: transparent; color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .35);
}
.vote-filter__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vote-filter__btn.is-active { background: #fff; color: var(--brand-dark); border-color: #fff; }

/* Gefilterte Ansicht: nur die beim Umschalten gewählten Kacheln bleiben
   stehen. Nimmt jemand danach eine Stimme zurück, bleibt die Kachel sichtbar
   und blendet sich ab – sie verschwindet erst beim nächsten Umschalten. */
.gallery.is-filtered .card:not(.is-shown) { display: none; }
.gallery.is-filtered .card[data-voted="0"] { opacity: .45; }

/* --- Ergebnisliste ------------------------------------------------------- */

.podium { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (min-width: 1000px) {
  .podium { grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); }
}

.podium__item { position: relative; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); }
/* Bündig mit der linken oberen Bildecke – nicht auf dem Papierrand und nicht
   in der Bindung. */
.podium__rank {
  position: absolute; top: 28px; left: 12px; z-index: 2;
  background: var(--brand-dark); color: #fff;
  font-size: 15px; font-weight: 700;
  min-width: 42px; padding: 8px 10px; text-align: center;
}
.podium__item--top .podium__rank { background: #b8860b; }

/* Kalendermonat – steht der Platzierung gegenüber, sobald die Verwaltung die
   Blätter verteilt hat. Vorher fehlt das Element ganz. */
.podium__month {
  position: absolute; top: 28px; right: 12px; z-index: 2;
  background: rgba(0, 0, 0, .72); color: #fff;
  font-size: 12px; font-weight: 600; padding: 8px 10px;
}

.podium__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.podium__body { padding: 10px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.podium__votes { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }

/* --- Ankündigungstext ---------------------------------------------------- */

/* Monospace und enger Zeilenabstand: der Text geht als BBCode ins Forum, da
   hilft es zu sehen, wo Zeilen und Klammern stehen. */
textarea.announce {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.55;
  background: #fafbfc; resize: vertical;
}

/* --- Monatszuordnung ----------------------------------------------------- */

.monthgrid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.monthpick {
  border: 1px solid var(--border); background: #fafbfc;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}

.monthpick__thumb {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; cursor: pointer;
  border: 1px solid var(--border);
}
.monthpick__thumb:hover { border-color: var(--brand); }

.monthpick__label { font-size: 12px; font-weight: 600; }
.monthpick__label .muted { display: block; font-weight: normal; font-size: 11px; }

/* Doppelt vergebener Monat – der Server weist das ohnehin zurück, aber nicht
   erst nach dem Absenden. */
.monthpick select.is-duplicate {
  border-color: var(--err-border); background: var(--err-bg); color: var(--err-fg);
}

/* --- Kennzahlen ---------------------------------------------------------- */

/* Gleiche Machart wie die Zeitleiste: 1px-Abstände auf farbigem Grund
   erzeugen die Trennlinien, ohne dass Ränder doppelt aufeinandertreffen. */
.statgrid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--border); border: 1px solid var(--border);
}

.stat { background: #fff; padding: 14px 16px; }

.stat__value {
  display: block;
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block; margin-top: 5px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text);
}

.stat__hint { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }

/* --- Tabellen ------------------------------------------------------------ */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); }

table.data { width: 100%; border-collapse: collapse; font-size: 12px; }

table.data th, table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  /* Oben ausgerichtet: viele Zellen haben zwei Zeilen, mittig sähe das
     gegenüber den einzeiligen Nachbarn schief aus. */
  vertical-align: top;
}

table.data thead th {
  background: var(--brand-dark); color: #fff;
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; border-bottom: 0;
  position: sticky; top: 0; z-index: 1;
}

table.data tbody tr:nth-child(even) td { background: #fafbfc; }
table.data tbody tr:hover td { background: #eef2f6; }
table.data tbody tr:last-child td { border-bottom: 0; }

/* Zahlenspalten rechtsbündig – und zwar Kopfzeile UND Zelle, sonst steht die
   Überschrift links und der Wert darunter rechts. */
table.data td.num,
table.data thead th.num { text-align: right; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Für Werte, die zwar aus Ziffern bestehen, aber keine Größe zum Vergleichen
   sind – etwa Bildmaße. Linksbündig wie die Kopfzeile, nur ohne Umbruch. */
table.data td.nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }

table.data td .muted { font-size: 11px; margin-top: 2px; }

table.data img.mini {
  width: 96px; aspect-ratio: 3 / 2; object-fit: cover;
  cursor: pointer; border: 1px solid var(--border);
}
table.data img.mini:hover { border-color: var(--brand); }

/* Aktionsspalte: alle Schaltflächen in genau einer Reihe.
   width:1% + nowrap heißt „so breit wie nötig, nicht breiter“ – ohne das
   nowrap schrumpft die Spalte auf eine Schaltflächenbreite und der Rest
   klappt untereinander, was die Zeilen unnötig hoch macht. Reicht der Platz
   nicht, scrollt der umgebende .table-scroll waagerecht. */
table.data td.actions { width: 1%; white-space: nowrap; }

.actionbar { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; }
/* inline-flex statt display:contents – Letzteres nimmt das Formular in
   einigen Browsern aus dem Accessibility-Baum. */
.actionbar form { display: inline-flex; margin: 0; }
.actionbar .btn { white-space: nowrap; }

.btn--ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.btn--ok:hover { background: #d4ead6; color: var(--ok-fg); }

.btn--pinned { background: var(--brand-dark); color: #fff; }
.btn--pinned:hover { background: #20415a; color: #fff; }

.tag {
  display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 600;
  background: var(--content-alt); color: var(--text-muted);
}
.tag--admin  { background: #b8860b; color: #fff; }
.tag--dev    { background: #8d2020; color: #fff; }
.tag--ok     { background: var(--ok-bg);   color: var(--ok-fg); }
.tag--bad    { background: var(--err-bg);  color: var(--err-fg); }
.tag--pin    { background: var(--brand-dark); color: #fff; }

/* --- Vollbildansicht ----------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 60px;
}
.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; object-fit: contain; }
.lightbox__figure figcaption { color: #ddd; font-size: 13px; text-align: center; }

/* Der Daumen im Vollbild braucht eigenen Platz – sonst reicht das Bild bis
   unter die Schaltfläche. Die Klasse setzt das Skript nur, wenn der Daumen
   für dieses Bild überhaupt erscheint. */
.lightbox.has-vote .lightbox__figure img { max-height: calc(100vh - 180px); }
.lightbox__vote[hidden] { display: none; }

.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff;
  border: 0; cursor: pointer; line-height: 1;
}
.lightbox__close { top: 14px; right: 16px; font-size: 30px; width: 44px; height: 44px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 40px; width: 48px; height: 76px; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox__nav { width: 38px; height: 60px; font-size: 30px; }
}

/* --- Fußbereich ----------------------------------------------------------
   Aufbau wie #ipsLayout_footer im Forum: keine eigene Fläche, sondern der
   durchscheinende Seitenhintergrund, die Rechtstexte links, der Namenszug
   rechts. */

.site-footer { padding: 20px 0; font-size: 12px; color: #36393c; }
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 15px;
}
.site-footer__links {
  display: flex; flex-wrap: wrap; gap: 0 15px;
  margin: 0; padding: 0; list-style: none;
}
.site-footer__copyright { margin: 0; }
.site-footer a { color: #36393c; }
.site-footer a:hover { color: var(--link-hover); }

@media (max-width: 640px) {
  .site-footer__inner { justify-content: center; text-align: center; }
  .site-footer__links { justify-content: center; }
}

/* --- Testlogin ----------------------------------------------------------- */

.devlogin { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.devlogin button { width: 100%; text-align: left; }