/* ============================================================================
   die-steuers-wedding - Hochzeitsgalerie Layana & Dennis, 08.08.2026
   Child-Theme von modus. Nur Optik, keine Template-Overrides.

   Diese Datei wird in template/header.tpl direkt als <link> eingebunden, nicht
   ueber Piwigos CSS-Combiner - der schreibt relative Pfade nicht um. Deshalb
   duerfen Bild-URLs hier relativ zum Theme-Ordner stehen.
   ========================================================================= */

:root {
  --ds-paper:      #ffffff;
  --ds-paper-warm: #fcfdff;
  --ds-cloud-1:    #eef3fa;   /* hellste Wolkenlage */
  --ds-cloud-2:    #dde8f5;   /* mittlere Wolkenlage */
  --ds-cloud-3:    #c6d8ec;   /* Maserungskante */
  --ds-blue:       #7d9bc1;   /* Akzent */
  --ds-blue-deep:  #476a92;   /* Akzent, dunkel genug fuer Text auf Weiss */
  --ds-ink:        #2c3542;
  --ds-ink-soft:   #6b7787;
  --ds-line:       rgba(125, 155, 193, 0.28);
  /* Bodoni Moda fuer Titel: hoher Strichkontrast, moderne Didone-Anmutung.
     DM Sans fuer alles Uebrige - ruhige Grotesk, die der Bodoni nicht die
     Aufmerksamkeit streitig macht. Beide self-hosted, siehe fonts/. */
  --ds-serif:      'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --ds-sans:       'DM Sans', system-ui, sans-serif;
}

/* --------------------------------------------------------------- Grundlage */

body {
  background-color: var(--ds-paper);
  color: var(--ds-ink);
  /* modus setzt Open Sans auf body; ohne diese Zeile bliebe der Fliesstext
     bei der Schrift des Eltern-Themes. */
  font-family: var(--ds-sans);
}

/* Wolkenmaserung in Wischtechnik. Liegt fest im Viewport, damit beim Scrollen
   die Fotos wandern und nicht der Untergrund. Die Struktur selbst steckt in
   images/wolken.svg - dort ist auch erklaert, wie der Wischeffekt entsteht. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Auf Weiss gelegt und zurueckgenommen: die Maserung soll den Blick tragen,
     nicht die Fotos ueberstimmen. Weiss bleibt die Hauptfarbe. */
  opacity: 0.55;
  background-image: url('images/wolken.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Zarte Koernung darueber, damit die grossen Flaechen nicht zu glatt wirken. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='4' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.66 0 0 0 0 0.74 0 0 0 0 0.85 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 900px 900px;
}

/* ------------------------------------------------------------- Typografie */

h1, h2, h3, h4,
.pageTitle,
#theHeader .banner,
.thumbLegend .thumbTitle,
#imageTitleContainer {
  font-family: var(--ds-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

a { color: var(--ds-blue-deep); }
a:hover { color: var(--ds-ink); }

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

/* .ds-hero wird in template/header.tpl ausgegeben. Auf der Startseite
   vollflaechig mit Titelbild, auf allen Unterseiten als schmaler Textkopf. */
.ds-hero {
  text-align: center;
  padding: 2rem 1rem 1.6rem;
  border-bottom: 1px solid var(--ds-line);
}

.ds-hero__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ds-hero__link:hover { color: inherit; }

.ds-hero__names {
  margin: 0;
  font-family: var(--ds-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.14em;
  color: var(--ds-ink);
}

.ds-hero__amp {
  font-style: italic;
  color: var(--ds-blue-deep);
  padding: 0 0.15em;
}

.ds-hero__date {
  margin: 0.5rem 0 0;
  font-family: var(--ds-sans);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}

/* Startseite: Titelbild ueber die volle Breite, Text darueber. */
.ds-hero--home {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(68vh, 640px);
  padding: 4rem 1.5rem;
  border-bottom: 0;
  /* Neutraler statt blaeulicher Abdunkler - das Titelbild ist schwarzweiss und
     bekaeme sonst einen Farbstich. Oben etwas dunkler, damit die weisse Schrift
     traegt, unten offener, damit das Bild nicht zugedeckt wird. */
  background-image:
    linear-gradient(rgba(26, 26, 28, 0.34), rgba(26, 26, 28, 0.18)),
    url('images/hero.jpg');
  background-size: cover;
  /* Bildmitte etwas hoeher anfassen, sonst schneidet der Beschnitt die Koepfe. */
  background-position: center 22%;
}

.ds-hero--home .ds-hero__names {
  font-size: clamp(1.9rem, 6.2vw, 4.6rem);
  letter-spacing: 0.1em;
  color: #ffffff;
  text-shadow: 0 2px 28px rgba(18, 30, 46, 0.5);
}

.ds-hero--home .ds-hero__amp {
  color: rgba(255, 255, 255, 0.82);
}

.ds-hero--home .ds-hero__date {
  margin-top: 1.1rem;
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 18px rgba(18, 30, 46, 0.55);
}



/* -------------------------------------------------------------- Inhalt */

#content,
.content {
  background: transparent;
}

/* modus laesst Inhalt und Raster buendig an den Fensterrand laufen. Ein Rand
   gibt den Fotos Luft und verhindert, dass die erste Spalte angeschnitten
   wirkt. Nach oben begrenzt, damit die Reihen auf breiten Schirmen nicht
   auseinanderfallen. */
ul.albThumbs,
ul.thumbnails,
.ds-nbpp-leiste,
#content > .titrePage {
  box-sizing: border-box;
  max-width: 1680px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(0.9rem, 2.5vw, 2.5rem) !important;
  padding-right: clamp(0.9rem, 2.5vw, 2.5rem) !important;
}

ul.albThumbs,
ul.thumbnails {
  padding-top: clamp(1rem, 2vw, 1.8rem) !important;
  padding-bottom: clamp(1rem, 2vw, 1.8rem) !important;
}

/* Der modus-Skin "clear" faerbt Titelleiste, Menue und Albumkacheln in Graustufen
   (#eee/#ccc). Die folgenden Regeln ersetzen diese Graustufen durch Weiss mit
   wolkenblauen Kanten - deshalb stehen hier durchgehend Farben statt Erben. */

.titrePage,
#content > .titrePage {
  background-color: rgba(255, 255, 255, 0.82);
  background-image: none;
  color: var(--ds-ink);
  font-family: var(--ds-serif);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ds-line);
  padding: 0.5rem 1rem;
}

.titrePage a,
.titrePage h2,
.titrePage h2 a,
#breadcrumb,
#breadcrumb a {
  color: var(--ds-ink);
  font-family: var(--ds-serif);
}

.titrePage a:hover,
#breadcrumb a:hover {
  color: var(--ds-blue-deep);
}

/* ------------------------------------------------------ Alben (Startseite)

   modus rendert die Alben als ul.albThumbs mit <img class="albImg"> und einer
   Textzeile .albLegend - nicht als .thumbnailCategory, wie man nach den
   Piwigo-Standardthemes vermuten wuerde.

   Gestaltung: laengliche Karten, links das Titelbild, rechts die Angaben zum
   Album auf hellem Grund. Das gibt den Albumnamen mehr Ruhe als eine
   Bildunterschrift und laesst das Foto unangetastet.
   ---------------------------------------------------------------------- */

ul.albThumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 20px;
  height: auto !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.albThumbs > li {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  background: transparent;
  border: 0;
  list-style: none;
}

/* Der Anker umschliesst Bild und Text - er ist die Karte. */
ul.albThumbs > li > a {
  display: flex;
  align-items: stretch;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 16px rgba(71, 106, 146, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

ul.albThumbs > li > a:hover {
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(71, 106, 146, 0.22);
  transform: translateY(-3px);
}

/* Das Titelbild wird eingepasst, nicht beschnitten - passend zu den
   Vorschaubildern in den Alben. Die unbeschnittene Ableitung liefert
   themeconf.inc.php (siehe ds_albumbilder_ohne_beschnitt). */
ul.albThumbs img.albImg {
  flex: 0 0 44%;
  width: 44% !important;
  height: auto !important;
  min-height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  display: block;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.6s ease;
}

ul.albThumbs > li > a:hover img.albImg {
  transform: scale(1.04);
}

/* Rechte Haelfte: Albumname und Anzahl, mittig in der Hoehe. */
/* modus setzt hier height:4em, overflow:hidden, text-indent und einen dunklen
   Verlauf - alles fuer eine Bildunterschrift gedacht. Fuer die Textspalte muss
   das raus, sonst wird der Albumname auf 4em Hoehe abgeschnitten. */
ul.albThumbs .albLegend {
  position: static !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  background-image: none !important;
  padding: 1.3rem 1.4rem;
  background: none;
  color: var(--ds-ink);
  text-align: left;
}

/* Der 1em-Aussenabstand von modus schiebt den Titel sonst aus der Karte. */
ul.albThumbs .albLegend h4 {
  margin: 0 !important;
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--ds-ink);
  text-shadow: none;
}

ul.albThumbs .albLegend > div:not(.albLegendRight) {
  font-family: var(--ds-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}

/* Feiner Strich als Abschluss, greift die Akzentfarbe auf. */
ul.albThumbs .albLegend::after {
  content: '';
  display: block;
  width: 2.2rem;
  height: 1px;
  margin-top: 0.35rem;
  background: var(--ds-blue);
  transition: width 0.3s ease;
}

ul.albThumbs > li > a:hover .albLegend::after {
  width: 3.6rem;
}

/* Das Neu-Zeichen von modus passt nicht zur ruhigen Anmutung. */
ul.albThumbs .albLegendRight,
ul.albThumbs .albSymbol {
  display: none;
}

/* Auf schmalen Schirmen wird aus der laenglichen Karte wieder eine gestapelte. */
@media (max-width: 520px) {
  ul.albThumbs {
    grid-template-columns: 1fr;
  }
  ul.albThumbs > li > a {
    display: block;
    min-height: 0;
  }
  ul.albThumbs img.albImg {
    width: 100% !important;
    height: 180px !important;
    min-height: 0;
  }
}

/* Aufklapp-Menues des Skins sind sonst grau (#ccc). */
.switchBox,
#menubar DD,
#albumActionsSwitcher + .categoryActions,
#imageActionsSwitch + .imageActions {
  background-color: #ffffff;
  border: 1px solid var(--ds-line);
  border-radius: 3px;
  box-shadow: 0 6px 22px rgba(71, 106, 146, 0.16);
  color: var(--ds-ink);
}

/* Menue in der Grotesk: die Bodoni traegt Titel, nicht Navigation. In ihr
   liefe die Leiste ausserdem so breit, dass "Anmeldung" rechts abgeschnitten
   wird. */
#menubar DT,
#menubar,
#menubar A {
  font-family: var(--ds-sans);
  font-weight: 400;
}

#menubar DT {
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

/* Alben- und Bildkacheln: heller Grund, weiche Kante, kein harter Rahmen. */
ul.thumbnails li,
ul.thumbnails .wrap2,
#content ul.thumbnails li .wrap2 {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--ds-line);
  border-radius: 3px;
  box-shadow: 0 2px 14px rgba(71, 106, 146, 0.09);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

ul.thumbnails li:hover .wrap2,
ul.thumbnails li:hover {
  box-shadow: 0 8px 30px rgba(71, 106, 146, 0.18);
  transform: translateY(-2px);
}

.thumbLegend,
.thumbLegend .thumbTitle {
  color: var(--ds-ink);
  font-family: var(--ds-serif);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Keine Bildunterschriften in der Albumansicht: die Dateinamen bzw.
   automatisch vergebenen Titel sagen nichts und stoeren die Bildwirkung.
   Betrifft nur Fotos - die Albumtitel auf der Startseite bleiben. */
ul.thumbnails .overDesc,
ul.thumbnails .thumbLegend {
  display: none;
}

/* Gleichmaessiges Raster statt modus-Mosaik.
   modus setzt Breite und Hoehe jeder Kachel per JavaScript als Inline-Style,
   damit die Zeilen buendig abschliessen - daher das durchgehende !important:
   eine CSS-Regel ohne !important verliert gegen Inline-Styles. Die Bilder
   werden mittig beschnitten (object-fit), damit jede Vorschau gleich gross
   und rechteckig ist, egal ob Hoch- oder Querformat. */
ul.thumbnails {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  height: auto !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.thumbnails li {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ds-line);
}

/* modus verschachtelt jede Kachel als li > span.wrap1 > span.wrap2 > a > img
   und positioniert den Anker absolut. Sein Bezugsrahmen ist dabei nicht die
   Kachel, sondern ein Vorfahre weiter oben - der Anker wurde dadurch breiter
   als seine Kachel. Beim frueheren Beschnitt fiel das nicht auf, weil der
   Ueberstand weggeschnitten wurde; beim Einpassen landet das Bild sonst
   ausserhalb der sichtbaren Flaeche. Deshalb werden die beiden Huellen und
   der Anker hier auf den normalen Fluss zurueckgeholt. */
ul.thumbnails li .wrap1,
ul.thumbnails li .wrap2,
ul.thumbnails li a {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Ganzes Bild zeigen statt beschneiden: object-fit "contain" skaliert das
   Foto so, dass es vollstaendig in die Kachel passt. Hoch- und Querformate
   lassen dabei seitlich bzw. oben und unten Raum frei - der bekommt einen
   sehr hellen Grund, damit die Kacheln trotzdem als gleiche Rechtecke lesbar
   bleiben. */
ul.thumbnails li img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Auswahl der Bilderzahl in der Blaetternavigation. */
.ds-nbpp {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-left: 1.4rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--ds-line);
}

.ds-nbpp__label {
  font-family: var(--ds-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}

.ds-nbpp__wahl,
.ds-nbpp__aktiv {
  font-family: var(--ds-sans);
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}

.ds-nbpp__aktiv {
  background: var(--ds-blue-deep);
  color: #ffffff;
}

@media (max-width: 560px) {
  .ds-nbpp {
    display: flex;
    margin: 0.8rem 0 0;
    padding: 0.8rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--ds-line);
    justify-content: center;
  }
}

.thumbLegend .thumbInfo,
.thumbLegend .nb-images {
  font-family: var(--ds-sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}

/* ------------------------------------------------------------- Menueleiste */

#menubar,
.menubar,
#menuSwitcher {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ds-line);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  /* modus setzt width:100%. Ohne border-box addiert sich der Rahmen darauf,
     die Leiste wird breiter als das Fenster und "Anmeldung" rutscht rechts
     aus dem sichtbaren Bereich. */
  box-sizing: border-box;
}

/* Etwas Luft an den Enden, damit der erste und der letzte Eintrag nicht am
   Rahmen kleben. */
#menubar {
  padding-left: 0.4rem;
  padding-right: 0.8rem;
}

#menubar dt,
#menubar .menuTitle {
  font-family: var(--ds-serif);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--ds-ink);
  border-bottom: 1px solid var(--ds-line);
}

/* ---------------------------------------------------------- Bildansicht */

#theImageBox,
#theImage,
.imageContainer {
  background: transparent;
}

#imageHeaderBar,
#imageToolBar,
.navigationBar,
.wide #imageInfos,
#imageInfos,
.commentElement {
  background: rgba(255, 255, 255, 0.86);
  background-image: none;
  border: 1px solid var(--ds-line);
  border-radius: 3px;
  color: var(--ds-ink);
}

#imageInfos dt,
#imageInfos .imageInfoTitle {
  font-family: var(--ds-sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
}

#imageTitleContainer {
  font-family: var(--ds-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ds-ink);
}

#theImage img {
  box-shadow: 0 10px 44px rgba(44, 53, 66, 0.22);
  border-radius: 2px;
}

/* ------------------------------------------------------------- Fusszeile */

#copyright {
  font-family: var(--ds-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
  border-top: 1px solid var(--ds-line);
  padding-top: 1.2rem;
}

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

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--ds-line);
  border-radius: 2px;
  color: var(--ds-ink);
}

input[type="submit"],
button,
.buttonLike {
  background: var(--ds-blue);
  border: 1px solid var(--ds-blue-deep);
  border-radius: 2px;
  color: #ffffff;
  font-family: var(--ds-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0.55rem 1.2rem;
}

input[type="submit"]:hover,
button:hover,
.buttonLike:hover {
  background: var(--ds-blue-deep);
}

/* ------------------------------------------------- Bewegung respektieren */

@media (prefers-reduced-motion: reduce) {
  ul.thumbnails li,
  ul.thumbnails .wrap2 {
    transition: none;
  }
  ul.thumbnails li:hover,
  ul.thumbnails li:hover .wrap2 {
    transform: none;
  }
}

/* Auswahlleiste, wenn keine Blaetternavigation vorhanden ist. */
.ds-nbpp-leiste {
  text-align: center;
  padding: 1.4rem 1rem 0.2rem;
}

.ds-nbpp-leiste .ds-nbpp {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* ----------------------------------------------- Ausgeblendete Bedienelemente

   Eine private Hochzeitsgalerie braucht weder Volltextsuche noch die
   Kalenderansichten von Piwigo - die Gaeste gehen ueber die Alben.

   Ausgeblendet wird per CSS, weil beides aus modus' menubar.tpl bzw. aus dem
   Piwigo-Kern kommt und eine Template-Kopie nur Wartungslast waere. display:none
   nimmt die Felder auch aus der Tab-Reihenfolge, sie sind also nicht
   "unsichtbar bedienbar".

   Wer sie ganz aus dem Quelltext haben will, schaltet die Menue-Bloecke in
   Piwigo unter Administration -> Konfiguration -> Menue ab. Das liegt dann
   allerdings in der Datenbank und nicht mehr hier im Repo.
   ---------------------------------------------------------------------- */

/* Schnellsuche in der Menueleiste */
#quicksearch,
#qsearchInput {
  display: none !important;
}

/* Kalender- und Monatslisten-Ansichten */
.categoryActions li:has(> a[href*="monthly-list"]),
.categoryActions li:has(> a[href*="monthly-calendar"]),
#menubar li:has(> a[href*="monthly-calendar"]),
#menubar li:has(> a[href*="monthly-list"]) {
  display: none !important;
}

/* Rueckfallebene fuer Browser ohne :has() - blendet zumindest den Link aus. */
.categoryActions a[href*="monthly-list"],
.categoryActions a[href*="monthly-calendar"],
#menubar a[href*="monthly-calendar"],
#menubar a[href*="monthly-list"] {
  display: none !important;
}

/* "Entdecken" und "Neueste Fotos" aus der Menueleiste.

   "Entdecken" ist der Block #mbSpecials und laesst sich ueber die ID treffen.
   "Neueste Fotos" hat weder ID noch Klasse - einzig verlaessliches Merkmal ist
   das Ziel des Links, deshalb der Zugriff ueber den Verweis auf recent_pics.

   "Am haeufigsten angesehen" (#mbMostVisited) bleibt bewusst stehen; es war
   nicht Teil des Wunsches. Zum Entfernen genuegt die ID in der Liste unten. */
#menubar > #mbSpecials,
#menubar > dl:has(> dt > a[href*="recent_pics"]) {
  display: none !important;
}

/* Rueckfallebene ohne :has(): dann verschwindet zumindest der Verweis. */
#menubar > dl > dt > a[href*="recent_pics"] {
  display: none !important;
}