/* Screen-reader only (toolbar sort icon replacement) */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#search-results-media.list-view .search-media-thumb .media-placeholder {
width: 330px;
height: 185px;
}
.search-block-right {
float: right;
display: flex;
align-items: center;
gap: 10px;
}
/* Shared toolbar row (home + details) */
.search-block.search-page.mp-toolbar-only .mp-toolbar-row {
width: 100%;
align-items: center !important;
}
/* Align toolbar container with header/logo (same padding as .content-wrap) */
.search-block.search-page.mp-toolbar-only {
padding-left: 2.1875rem;
padding-right: 2.1875rem;
}
/* Match Filter label to sort current value (Standard …), px-stable */
.search-block.search-page.mp-toolbar-only #search-filter {
font-size: 14px;
font-weight: 500;
color: #404040;
}
.search-block.search-page.mp-toolbar-only #search-filter .mp-filter-toolbar-icon {
font-size: 1em;
line-height: 1;
display: inline-block;
vertical-align: -0.08em;
opacity: 0.88;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-left {
flex: 1 1 auto;
min-width: 0;
align-self: center;
flex-direction: row;
}
.search-block.search-page.mp-toolbar-only .search-block-right {
float: none !important;
flex: 0 0 auto;
width: auto;
justify-content: flex-end;
margin-left: auto;
align-self: center !important;
}
.search-block.search-page.mp-toolbar-only .search-block-right .controls-row {
margin-left: auto;
align-items: flex-start !important;
}
/* Filter toggle should only show on mobile */
.search-block.search-page.mp-toolbar-only #search-filter {
display: none;
}
@media screen and (max-width: 800px) {
:root {
/* Align facets drawer with ILIAS mobile nav (navigation-profile ul top) */
--mp-mobile-header-offset: 5.3125rem;
}
/* Mobile toolbar: filter icon + label align */
.search-block.search-page.mp-toolbar-only #search-filter {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding-left: 0 !important;
color: #404040;
font-weight: 500;
line-height: 1;
}
.search-block.search-page.mp-toolbar-only #search-filter i {
font-size: 0.9em;
opacity: 0.85;
}
}
/* Start page: keep FAQ/About/Publish spacing identical to details */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions {
display: inline-flex;
align-items: center;
gap: 12px;
}
/* Details toolbar: make actions look identical to home */
.mp-details-toolbar .mp-toolbar-controls {
display: inline-flex;
align-items: center;
}
.mp-details-toolbar .mp-toolbar-actions {
display: inline-flex;
align-items: center;
gap: 18px;
font-size: 14px;
line-height: 1;
}
.mp-details-toolbar .mp-toolbar-actions a,
.mp-details-toolbar .mp-toolbar-actions #kit-publish-media-info-features a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: inherit;
line-height: 1;
}
.mp-details-toolbar .mp-toolbar-actions .mp-publish-btn {
font-size: inherit;
line-height: 1;
}
/* Toolbar primary button: keep icon+text perfectly centered */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn,
.mp-details-toolbar .mp-toolbar-actions .mp-publish-btn,
.mp-details-nav-right .mp-publish-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
min-height: var(--mp-toolbar-primary-height);
padding: 8px 14px;
line-height: 1;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn i.fas,
.mp-details-toolbar .mp-toolbar-actions .mp-publish-btn i.fas {
display: block;
line-height: 1;
align-self: center;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn span,
.mp-details-toolbar .mp-toolbar-actions .mp-publish-btn span {
display: block;
line-height: 1;
}
/* Start page: allow moving actions independently from sort/view */
.search-block.search-page.mp-toolbar-only .mp-toolbar-controls {
display: inline-flex;
align-items: center;
gap: 16px;
/* Einheitlicher Abstand Rail-Icon → erster Text (Standard / Grid / Zähler / FAQ …) */
--mp-toolbar-rail-gap: 0.5rem;
}
.search-block.search-page.mp-toolbar-only .controls-row::before {
display: none;
}
/* Start page: keep sort/view/badges perfectly centered */
.search-block.search-page.mp-toolbar-only .search-block-right .controls-row {
align-items: center !important;
}
.search-block.search.page.mp-toolbar-only .view-switcher {
align-items: center;
line-height: 1;
}
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton {
line-height: 1;
}
/* -------------------------------------------------------------------------- */
/* Toolbar micro-hierarchy (minimal markup changes) */
/* -------------------------------------------------------------------------- */
/* Sort + view dropdowns: current value + chevron (same flex rhythm; view lives under .view-controls) */
.sorting-controls .btn-sort-icon.mp-sort-select,
.view-controls .btn-sort-icon.mp-sort-select {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #374151;
font-size: 14px;
}
.sorting-controls .btn-sort-icon.mp-sort-select .btn-sort-text,
.view-controls .btn-sort-icon.mp-sort-select .btn-sort-text {
font-size: 14px;
font-weight: 500;
color: #6b7280;
}
.sorting-controls .btn-sort-icon.mp-sort-select i,
.view-controls .btn-sort-icon.mp-sort-select i {
color: #6b7280;
font-size: 14px;
}
/* Hover: also tint the rail icons (sort + view) for consistency */
.search-block.search-page.mp-toolbar-only .sorting-controls:hover .sort-label--icon i.mp-toolbar-rail-icon,
.search-block.search-page.mp-toolbar-only .view-controls:hover .view-label--icon i.mp-toolbar-rail-icon,
.search-block.search-page.mp-toolbar-only .sorting-controls:focus-within .sort-label--icon i.mp-toolbar-rail-icon,
.search-block.search-page.mp-toolbar-only .view-controls:focus-within .view-label--icon i.mp-toolbar-rail-icon {
color: #00876C;
}
/* Home toolbar: keep current sort subtle (like "Zusatzinfos") */
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select .btn-sort-text {
font-size: 14px;
font-weight: 500;
color: #6b7280;
}
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select:hover .btn-sort-text,
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select:focus-visible .btn-sort-text {
color: #00876C;
}
/* Match "Zusatzinfos" hover: entire sort trigger turns turquoise */
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select:hover,
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select:focus-visible {
color: #00876C;
background: transparent !important;
}
/* Chevron consistency: use the same small "▾" as Zusatzinfos */
.search-block.search-page.mp-toolbar-only #mp-sort-current-label::after {
content: none;
}
/* Left breadcrumb separator: use whitespace instead of "|" */
.search-block.search-page.mp-toolbar-only .mp-breadcrumb-sep,
.mp-details-nav .mp-breadcrumb-sep {
display: none;
}
.search-block.search-page.mp-toolbar-only .mp-back-to-ilias-link,
.mp-details-nav .mp-back-to-ilias-link {
margin-left: 12px;
}
/* Details: "Zur Startseite" link should match ILIAS green */
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link {
color: #009682;
transition: color 0.15s ease, gap 0.2s ease;
gap: 0.4rem;
}
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link i {
transition: transform 0.2s ease;
}
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link:hover,
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link:focus-visible {
color: #007d6a;
gap: 0.45rem;
text-decoration: none;
}
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link:hover i {
transform: translateX(-3px);
}
/* Breadcrumbs: 13px auf sehr großen Viewports (über typ. iPad Air quer ~1180px) */
@media screen and (min-width: 1181px) {
.mp-breadcrumb-current,
.mp-breadcrumb-link {
font-size: 13px;
}
.mp-breadcrumb-current i,
.mp-breadcrumb-link i {
font-size: 13px;
}
}
/* Details: reduce gap between toolbar and search (match home rhythm) */
.mp-details-search {
padding: 0;
}
/* Details: on small screens use same gutters as mobile toolbar */
@media screen and (max-width: 768px) {
.mp-details-search {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.mp-details-search-form {
max-width: none;
}
}
/* Details: toolbar embeds the real search form; undo main.css rule that hides all forms in .mp-toolbar-only */
.search-block.search-page.mp-toolbar-only .mp-details-search form {
display: block;
}
/* Details + Startseite: Suche mittig; :has vermeidet About/FAQ-Zweispalter */
@media screen and (min-width: 801px) {
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row:has(> .mp-details-search),
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row:has(> .mp-details-search) {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 12px;
}
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row:has(> .mp-details-search) .mp-toolbar-left,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row:has(> .mp-details-search) .mp-toolbar-left {
justify-self: start;
min-width: 0;
align-self: center;
}
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row:has(> .mp-details-search) > .mp-details-search,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row:has(> .mp-details-search) > .mp-details-search {
justify-self: center;
align-self: center;
}
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row:has(> .mp-details-search) .search-block-right,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row:has(> .mp-details-search) .search-block-right {
justify-self: end;
margin-left: 0;
min-width: 0;
}
}
/* Startseite: breitere Suche in der Toolbar (Facetten-Layout, bis 900px wie .mp-search-suggest-anchor) */
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-details-search-form {
max-width: min(100%, 900px);
width: min(100%, 900px);
}
/* Details search: ein Rahmen um die ganze Zeile (Icon + Feld), nicht nur um das Input */
/* Kein padding: 0 shorthand — sonst wird padding-left von #form-search-block verwischt und Icons sind gegenüber dem Panel nicht bündig */
.mp-details-search-input-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: var(--mp-search-rail-edge-padding) !important;
padding-right: 34px !important;
height: var(--mp-toolbar-primary-height);
max-height: var(--mp-toolbar-primary-height);
background: #fff !important;
}
.mp-details-search #search-text {
flex: 1 1 auto;
min-width: 0;
width: auto;
box-sizing: border-box;
height: var(--mp-toolbar-primary-height);
max-height: var(--mp-toolbar-primary-height);
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
line-height: var(--mp-toolbar-primary-height);
box-sizing: border-box;
display: block;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--mp-search-text);
font-size: 14px !important;
}
.mp-details-search #search-text::placeholder {
color: var(--mp-search-placeholder);
font-size: 14px !important;
}
/* Hover/Fokus am äußeren Wrap (main.css .mp-details-search-input-wrap) */
.mp-details-search #search-text:hover {
border: none !important;
box-shadow: none !important;
}
/* Details search: match widened default search field */
.mp-details-search-form {
max-width: 500px;
width: min(100%, 500px);
position: relative;
}
.mp-details-search-meta {
display: block;
}
.mp-details-search-sc {
margin-top: 8px;
font-size: 14px !important;
}
/* Im Panel: gleiche Schriftgröße wie Suchvorschläge; Farbe bleibt sekundär */
.mp-details-search .mp-search-suggest-panel-meta.mp-details-search-sc,
.mp-details-search .mp-search-suggest-panel-meta.mp-details-search-sc label {
font-size: 14px !important;
font-weight: 400 !important;
color: var(--mp-search-transcript) !important;
}
/* Toolbar: nur noch mobil „Publizieren“ unter der Suche — leeres Meta nicht anzeigen */
.mp-details-search-meta:empty {
display: none !important;
}
.mp-details-toolbar .mp-details-search {
overflow: visible;
}
.mp-search-suggest-panel-meta.mp-details-search-sc {
margin-top: 0;
}
.mp-details-mobile-publish {
display: none;
}
/* Vorschlagsliste: Overlay wie globales #search-text-suggest (kein relative — sonst Reflow) */
.mp-details-search-form .mp-search-suggest-anchor {
width: 100%;
max-width: 100%;
display: block;
}
.mp-details-search #search-text-suggest {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
}
.mp-details-search-form .mp-search-suggest-panel {
text-align: left;
}
/* Transkript: Checkbox optisch in derselben 22px-Rail wie Lupen-Icon; Text wie Vorschlag */
.mp-details-search .mp-search-suggest-panel-meta.mp-details-search-sc label {
gap: 0;
}
.mp-details-search .mp-search-suggest-panel-meta.mp-details-search-sc label::before {
margin-left: calc((var(--mp-search-rail-width) - 16px) / 2);
margin-right: calc(var(--mp-search-rail-text-gap) + (var(--mp-search-rail-width) - 16px) / 2);
}
/* Gleiche Textstartlinie wie Vorschlagszeilen (Facetten-Checkbox) */
.mp-search-suggest-panel-meta.mp-facets-search-sc label {
gap: 8px;
}
#facets-containter .mp-search-suggest-panel .mp-facets-search-sc,
#facets-containter .mp-search-suggest-panel .mp-facets-search-sc label {
font-size: 14px;
font-weight: 400;
color: var(--mp-search-transcript);
}
/* Badges: add label and keep it visually "secondary" */
.badges-toggle-control {
margin-left: 6px;
padding-left: 0;
}
.badges-toggle-control::before {
content: none;
}
.badges-toggle-control #badgesDropdownMenuButton {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.9rem;
color: #6b7280;
}
.badges-toggle-control #badgesDropdownMenuButton:hover,
.badges-toggle-control #badgesDropdownMenuButton:focus-visible {
color: #00876C;
}
.badges-toggle-control .mp-badges-count {
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* Make Badges clearly a dropdown + avoid any overlap */
.search-block.search-page.mp-toolbar-only .badges-toggle-control {
position: static;
padding-left: 0 !important;
}
.search-block.search-page.mp-toolbar-only .badges-toggle-control::before {
content: none !important;
}
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: var(--mp-toolbar-rail-gap, 0.5rem);
padding: 0;
border: 0;
background: transparent;
border-radius: 8px;
line-height: 1;
white-space: nowrap;
}
/* Override generic toolbar icon button sizing for the Badges dropdown */
.search-block.search-page.mp-toolbar-only .controls-row .badges-toggle-control #badgesDropdownMenuButton.btn-sort-icon {
width: auto !important;
height: auto !important;
justify-content: flex-start !important;
padding: 0 !important;
background: transparent !important;
}
/* Gleiche optische Icon-Spalte wie Sortierung/Ansicht (Rail 1.25rem) */
.search-block.search-page.mp-toolbar-only .controls-row .badges-toggle-control #badgesDropdownMenuButton .mp-badges-toolbar-icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 1.25rem;
flex-shrink: 0;
}
.search-block.search-page.mp-toolbar-only .controls-row .badges-toggle-control #badgesDropdownMenuButton .mp-badges-count {
display: inline-block;
}
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 150, 130, 0.18);
}
/* Shared SVG chevrons + outline icons */
.mp-dropdown-chevron,
.mp-outline-icon {
display: block;
color: currentColor;
flex-shrink: 0;
}
.mp-dropdown-chevron {
opacity: 0.9;
}
/* Pixel perfect: make both dropdown triggers identical (Standard / Zusatzinfos) */
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select,
.search-block.search-page.mp-toolbar-only .badges-toggle-control #badgesDropdownMenuButton {
color: #6b7280;
font-weight: 500;
}
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select:hover,
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select:focus-visible,
.search-block.search-page.mp-toolbar-only .badges-toggle-control #badgesDropdownMenuButton:hover,
.search-block.search-page.mp-toolbar-only .badges-toggle-control #badgesDropdownMenuButton:focus-visible {
color: #00876C;
}
.search-block.search-page.mp-toolbar-only #mp-sort-current-label,
.search-block.search-page.mp-toolbar-only #mp-view-current-label {
color: inherit;
font-size: 14px;
font-weight: 500;
}
/* Badges: icon + count stay neutral gray (same as former Zusatzinfos label); chevron follows hover */
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton .mp-badges-toolbar-icon,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton .mp-badges-count {
color: #6b7280;
font-size: 14px;
font-weight: 500;
}
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton:hover .mp-badges-toolbar-icon,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton:hover .mp-badges-count,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton:focus-visible .mp-badges-toolbar-icon,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton:focus-visible .mp-badges-count {
color: #00876C;
}
.search-block.search-page.mp-toolbar-only .sorting-controls .mp-dropdown-chevron,
.search-block.search-page.mp-toolbar-only .view-controls .mp-dropdown-chevron,
.search-block.search-page.mp-toolbar-only .badges-toggle-control .mp-dropdown-chevron {
color: inherit;
opacity: 0.9;
}
/* Toolbar: make outline icons match 14px text scale */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-outline-icon,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-outline-icon * {
vector-effect: non-scaling-stroke;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-outline-icon {
width: 14px;
height: 14px;
}
/* Toolbar: rely on flex centering (no baseline hacks) */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions a,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton,
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select,
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-view-select {
align-items: center;
}
.search-block.search-page.mp-toolbar-only .mp-dropdown-chevron {
width: 14px;
height: 14px;
}
/* FAQ/About: de-emphasize to link-style (start + details) */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features,
.mp-details-nav-right #kit-publish-media-info-features {
background: transparent;
padding: 0;
border-radius: 0;
margin: 0;
transform: none;
box-shadow: none;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features:hover,
.mp-details-nav-right #kit-publish-media-info-features:hover {
background: transparent;
box-shadow: none;
transform: none;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features a,
.mp-details-nav-right #kit-publish-media-info-features a,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-about-btn,
.mp-details-nav-right .mp-about-btn {
display: inline-flex;
align-items: center;
gap: var(--mp-toolbar-rail-gap, 0.5rem);
padding: 0;
border: 0;
background: transparent;
color: #6b7280;
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 1;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features a:hover,
.mp-details-nav-right #kit-publish-media-info-features a:hover,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-about-btn:hover,
.mp-details-nav-right .mp-about-btn:hover {
color: #00876C;
text-decoration: none;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features a i,
.mp-details-nav-right #kit-publish-media-info-features a i,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-about-btn i,
.mp-details-nav-right .mp-about-btn i {
font-size: 13px;
opacity: 0.9;
display: inline-block;
line-height: 1;
vertical-align: -0.125em;
}
/* Tablet: horizontale Toolbar zu schmal — Über/FAQ ausblenden (Smartphone: Profilmenü; Desktop: wieder sichtbar) */
@media screen and (min-width: 801px) and (max-width: 1279px) {
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-about-btn,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features,
.mp-details-nav-right .mp-about-btn,
.mp-details-nav-right #kit-publish-media-info-features {
display: none !important;
}
/*
* Überschreibt das Desktop-Grid (1fr auto 1fr + zentrierte Suche aus min-width:801px).
* Feste max. Breite für die Suchspalte; links flexibel, Kontrollen rechts auto — keine zentrierte Suche.
*/
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row:has(> .mp-details-search),
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row:has(> .mp-details-search),
.search-block.search-page.mp-toolbar-only.mp-details-toolbar > .mp-toolbar-row,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar > .mp-toolbar-row {
display: grid;
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(0, 210px) auto;
column-gap: 10px;
}
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row:has(> .mp-details-search) > .mp-details-search,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row:has(> .mp-details-search) > .mp-details-search,
.search-block.search-page.mp-toolbar-only.mp-details-toolbar > .mp-toolbar-row > .mp-details-search,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar > .mp-toolbar-row > .mp-details-search {
justify-self: start;
align-self: center;
width: 100%;
max-width: none;
min-width: 0;
}
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-details-search-form,
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-details-search-form {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
}
/* Keep icon/text baselines consistent across FA glyphs */
/* Publish: make primary (filled) only in the toolbar areas */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn,
.mp-details-nav-right .mp-publish-btn {
background: #009682;
border-color: #009682;
color: #fff;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn:hover,
.mp-details-nav-right .mp-publish-btn:hover {
background: #00876C;
border-color: #00876C;
color: #fff;
}
/* -------------------------------------------------------------------------- */
/* Facets sidebar: modern look (no rounding) */
/* -------------------------------------------------------------------------- */
.mp-search-page-wrap {
/* defaults: let mobile layout handle spacing */
display: block;
}
/* Desktop layout framing + sticky facets */
@media screen and (min-width: 801px) {
.mp-search-page-wrap {
max-width: 1720px;
margin-left: auto;
margin-right: auto;
padding-left: 2.1875rem;
padding-right: 2.1875rem;
/* contain floats (facets) */
display: flow-root;
}
/* Apply same side gutters to the top toolbar (search block) */
.search-block.search-page.mp-toolbar-only {
display: block;
max-width: 1720px;
margin-left: auto;
margin-right: auto;
padding-left: 2.1875rem;
padding-right: 2.1875rem;
padding-top: 1.5rem;
padding-bottom: 0;
background: transparent;
/* consistent vertical rhythm before results */
margin-bottom: 1rem;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-row {
width: 100%;
}
/* Match details header rhythm: keep toolbar row height consistent */
.search-block.search-page.mp-toolbar-only .mp-toolbar-row {
min-height: 46px;
}
#search-results-footer {
padding-left: 2.1875rem;
padding-right: 2.1875rem;
}
#facets-containter {
background: #fff;
border: 1px solid #e3e6e8;
border-radius: 0;
width: 240px;
/* Sticky sidebar (desktop) */
position: sticky;
/* Offset so it doesn't hide behind the sticky header */
top: 84px;
max-height: calc(100vh - 96px);
overflow: auto;
}
/* When facets are in normal flow (sticky), don't clear against the sidebar float */
#main-containter #search-results-media {
clear: none;
}
/* Match main content offset to sidebar */
#main-containter {
margin-left: 240px;
}
/* Align results area with toolbar right edge, keep left gap */
.mp-search-page-wrap #main-containter {
padding-left: 20px; /* space between facets and cards */
padding-right: 0;
}
.mp-search-page-wrap #search-results-media {
padding-left: 0;
padding-right: 0;
}
.mp-search-page-wrap #search-results-title {
padding-left: 0;
padding-right: 0;
}
}
/* Mobile search bar; Ergebnisse liegen in .mp-toolbar-actions (nur Smartphone sichtbar) */
.mp-mobile-search-bar,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-mobile-results-count {
display: none;
}
/* Mobile/tablet: ensure content isn't pushed right by desktop sidebar offsets */
@media screen and (max-width: 800px) {
/* Details / Startseite: weniger Abstand zwischen Breadcrumb-Zeile und Suchfeld */
.search-block.search-page.mp-toolbar-only.mp-details-toolbar,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar {
padding-bottom: 0 !important;
}
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-left,
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-left {
margin-bottom: 0.1rem;
}
.search-block.search-page.mp-toolbar-only.mp-details-toolbar .mp-toolbar-row {
gap: 0;
}
/* Details: gleiche mobile Such-Optik wie Startseite */
.mp-details-search {
padding-left: 0;
padding-right: 0;
width: 100%;
flex: none;
}
.mp-details-search-form {
max-width: 100%;
width: 100%;
}
/* Anchor + Panel exakt gleiche Breite wie Suchzeile (kein Full-Bleed — vermeidet Versatz) */
.search-block.search-page.mp-toolbar-only .mp-details-search .mp-search-suggest-anchor {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box;
}
.search-block.search-page.mp-toolbar-only .mp-details-search .mp-search-suggest-panel {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Details / Startseite mobil: gleiche Rail, Lupengröße, Abstand Icon→Text wie Vorschläge */
.mp-details-search .mp-details-search-input-wrap,
.mp-details-search #form-search-block,
.mp-details-search #form-search-block.mp-mobile-search-input-wrap {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--mp-search-rail-text-gap) !important;
background: #fff !important;
border: 1px solid #d1d5d9 !important;
border-radius: 4px !important;
padding: 8px var(--mp-search-rail-edge-padding) !important;
padding-right: 36px !important;
width: 100%;
box-shadow: none;
height: 42.55px !important;
min-height: 42.55px !important;
box-sizing: border-box;
}
.mp-details-search #form-search-block .fa-search {
position: static !important;
transform: none !important;
flex: 0 0 var(--mp-search-rail-width);
width: var(--mp-search-rail-width);
min-width: var(--mp-search-rail-width);
color: var(--mp-search-icon);
font-size: var(--mp-search-rail-icon-size) !important;
line-height: 1;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.mp-details-search #form-search-remove {
right: 10px;
color: var(--mp-search-icon);
font-size: 16px;
}
.mp-details-search #form-search-remove:hover {
color: var(--mp-search-icon-hover);
}
.mp-details-search #search-text {
border: none;
outline: none;
background: transparent;
flex: 1 1 auto;
min-width: 0;
width: auto !important;
font-size: 14px;
color: var(--mp-search-text);
height: 100% !important;
line-height: normal;
padding: 0 !important;
}
.search-block.search-page.mp-toolbar-only .mp-details-search #search-text-suggest ul li.mp-suggest-item {
gap: var(--mp-search-rail-text-gap);
padding-left: var(--mp-search-rail-edge-padding);
padding-right: var(--mp-search-rail-edge-padding);
}
.search-block.search-page.mp-toolbar-only .mp-details-search #search-text-suggest .mp-suggest-item-icon {
width: var(--mp-search-rail-width);
min-width: var(--mp-search-rail-width);
}
.search-block.search-page.mp-toolbar-only .mp-details-search #search-text-suggest .mp-suggest-item-icon .fa {
font-size: var(--mp-search-rail-icon-size);
}
.search-block.search-page.mp-toolbar-only .mp-details-search #search-text-suggest .mp-suggest-item-label {
font-size: 14px !important;
line-height: 18px !important;
font-weight: 400 !important;
}
/* Transkript-Zeile: gleiche Typo/Höhe wie Vorschlagszeilen (kein größer wirkender Text) */
.search-block.search-page.mp-toolbar-only .mp-details-search .mp-search-suggest-panel-meta,
.mp-details-search .mp-search-suggest-panel-meta {
padding-left: var(--mp-search-rail-edge-padding);
padding-right: var(--mp-search-rail-edge-padding);
gap: var(--mp-search-rail-text-gap);
min-height: 42.55px !important;
height: 42.55px !important;
font-size: 14px !important;
line-height: 18px !important;
font-weight: 400 !important;
}
.search-block.search-page.mp-toolbar-only .mp-details-search .mp-search-suggest-panel-meta.mp-details-search-sc label,
.search-block.search-page.mp-toolbar-only .mp-details-search .mp-search-suggest-panel-meta.mp-details-search-sc {
font-size: 14px !important;
line-height: 18px !important;
font-weight: 400 !important;
}
.mp-details-search #search-text-suggest {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
}
.mp-details-search-meta {
margin-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.mp-details-search-sc {
margin-top: 0;
flex: 1 1 auto;
min-width: 0;
font-size: 14px !important;
}
/* Desktop-Publish im Kopf auf Smartphone ausblenden */
.mp-details-toolbar .mp-toolbar-actions .mp-publish-btn {
display: none !important;
}
/* Publish unter der Suche */
.mp-details-mobile-publish {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
white-space: nowrap;
background: #009682 !important;
border: 1px solid #009682 !important;
color: #fff !important;
border-radius: 4px !important;
padding: 0.45rem 0.75rem !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: none !important;
}
.mp-details-mobile-publish span {
display: inline !important;
}
.mp-details-mobile-publish:hover,
.mp-details-mobile-publish:focus-visible {
background: #00876C !important;
border-color: #00876C !important;
color: #fff !important;
text-decoration: none !important;
}
.mp-mobile-search-bar {
display: block;
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.4rem;
}
.mp-mobile-search-form {
display: block !important;
width: 100%;
max-width: 100%;
position: relative;
}
.mp-mobile-search-bar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-mobile-results-count {
display: inline-flex !important;
align-items: center;
font-size: 14px !important;
color: #374151;
font-weight: 700;
white-space: nowrap;
margin-left: 0;
margin-right: auto;
flex-shrink: 0;
}
.mp-mobile-search-input-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
background: #fff;
border: 1px solid #d1d5d9;
border-radius: 4px;
padding: 0.5rem 0.85rem;
width: 100%;
box-shadow: none;
}
.mp-mobile-search-input-wrap i {
color: var(--mp-search-icon);
width: var(--mp-search-rail-width);
min-width: var(--mp-search-rail-width);
font-size: var(--mp-search-rail-icon-size);
line-height: 1;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mp-mobile-search-input-wrap input {
border: none;
outline: none;
background: transparent;
width: 100%;
font-size: 14px;
color: var(--mp-search-text);
}
.mp-mobile-search-input-wrap input::placeholder {
color: var(--mp-search-placeholder);
font-size: 14px !important;
}
/* Autocomplete unter der mobilen Startseiten-Suche (nicht im geschlossenen Filter-Drawer) */
#mp-mobile-search-suggest,
.mp-mobile-search-suggest {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-top: 4px;
border: 1px solid #d1d5d9;
border-radius: 4px;
background: #fff;
padding: 0;
position: relative;
z-index: 500;
display: none;
}
#mp-mobile-search-suggest ul {
list-style: none;
padding: 0;
margin: 0;
}
#mp-mobile-search-suggest ul li.mp-suggest-item {
display: flex;
align-items: center;
gap: var(--mp-search-rail-text-gap);
box-sizing: border-box;
min-height: 32px;
height: 32px;
padding: 0 var(--mp-search-rail-edge-padding);
margin: 0;
cursor: pointer;
list-style: none;
}
#mp-mobile-search-suggest .mp-suggest-item-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--mp-search-rail-width);
min-width: var(--mp-search-rail-width);
color: var(--mp-search-icon);
line-height: 1;
}
#mp-mobile-search-suggest .mp-suggest-item-icon .fa {
font-size: var(--mp-search-rail-icon-size);
color: var(--mp-search-icon);
opacity: 1;
}
#mp-mobile-search-suggest .mp-suggest-item-label {
flex: 1 1 auto;
min-width: 0;
line-height: 18px;
font-size: 14px;
color: var(--mp-search-text);
}
#mp-mobile-search-suggest ul li.mp-suggest-item:hover,
#mp-mobile-search-suggest li.mp-suggest-item.result-selected {
background-color: #f3f4f6;
}
/* Result cards: mobile type scale (grid + list; beat .list-view base + main.css) */
#main-containter #search-results-media .search-media-title,
#main-containter #search-results-media .search-media-title a {
font-size: 14px;
}
#main-containter #search-results-media .search-media-authors,
#main-containter #search-results-media.list-view .search-media-authors {
font-size: 12px;
}
/* Ergebnisse: Zeile mit Publizieren (siehe .mp-toolbar-actions) */
#main-containter {
margin-left: 0;
}
/* Facets: mobile drawer (replaces margin-left slide) */
#mp-facets-backdrop {
position: fixed;
top: var(--mp-mobile-header-offset);
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.32);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
z-index: 900;
}
#mp-facets-backdrop.show {
opacity: 1;
pointer-events: auto;
}
body.mp-facets-open {
overflow: hidden;
}
#facets-containter {
position: fixed;
left: 0;
top: var(--mp-mobile-header-offset);
height: calc(100vh - var(--mp-mobile-header-offset));
width: 100vw;
max-width: none;
margin-left: 0 !important;
transform: translateX(-110%);
/* wie .navigation-profile ul (ILIAS, max-width: 1024px) */
transition: transform 0.3s ease-in-out;
z-index: 2000;
box-shadow: none;
border-right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Slightly different from the white page background */
background: #f3f4f6;
}
#facets-containter.is-open {
transform: translateX(0);
}
/* Drawer header with close button */
#mp-facets-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
/* full-bleed header (align to drawer edges) */
margin: 0 -16px;
padding: 16px 20px;
background: #f3f4f6;
border-bottom: 0;
}
#mp-facets-header .mp-facets-header-title {
font-weight: 700;
font-size: 1.4rem;
color: #111;
}
#mp-facets-header .mp-facets-close {
width: 44px;
height: 44px;
border: 0;
background: transparent;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
margin-right: -8px;
}
#mp-facets-header .mp-facets-close:active {
background: rgba(0, 0, 0, 0.06);
}
/* Larger mobile typography inside drawer */
#facets-containter {
font-size: 18px;
padding: 0 16px 24px;
background: #f3f4f6;
}
/* Filter-Drawer Suche: wie mobile Startseiten-Suche */
#facets-containter .mp-facets-search {
padding-top: 12px;
}
#facets-containter .mp-facets-search #form-search-block {
display: flex !important;
align-items: center;
gap: 0.5rem;
background: #fff;
border: 1px solid #d1d5d9;
border-radius: 4px;
padding: 0.5rem 0.85rem;
width: 100%;
box-shadow: none;
}
#facets-containter .mp-facets-search #form-search-block .fa-search {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
color: var(--mp-search-icon);
font-size: 20px;
line-height: 1;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#facets-containter .mp-facets-search #form-search-remove {
position: static !important;
transform: none !important;
right: auto !important;
top: auto !important;
margin-left: auto;
color: var(--mp-search-icon);
font-size: 16px;
}
#facets-containter .mp-facets-search #form-search-remove:hover {
color: var(--mp-search-icon-hover);
}
#facets-containter .mp-facets-search #search-text {
border: none;
outline: none;
background: transparent;
width: 100%;
font-size: 14px !important;
color: var(--mp-search-text);
height: auto;
line-height: normal;
padding: 0;
}
#facets-containter .mp-facets-search-sc {
font-size: 1.02rem;
}
#facets-containter .mp-facets-search-total {
font-size: 18px !important;
}
#facets-containter .mp-facets-header {
font-size: 0.95rem;
}
#facets-containter summary.mp-facets-agg-header {
font-size: 1.15rem;
}
#facets-containter .mp-facets-agg-list a {
padding: 14px 0;
font-size: 1.05rem;
}
#facets-containter .mp-facets-count {
font-size: 0.9rem;
}
/* Mobile toolbar: remove empty left column, reduce left padding, prevent overflow */
.search-block.search-page.mp-toolbar-only {
display: block;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
margin-top: 0;
}
/* Startseite: mehr Abstand Breadcrumb („Startseite“) ↔ Suchleiste; mehr Luft unter der Toolbar (Publizieren ↔ Kacheln/Video) */
.search-block.search-page.mp-toolbar-only.mp-home-toolbar {
padding-bottom: 2.25rem !important;
}
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-row {
gap: 12px;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-left {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-bottom: 0.5rem;
gap: 8px;
}
.search-block.search-page.mp-toolbar-only.mp-home-toolbar .mp-toolbar-left {
margin-bottom: 0;
}
/* Breadcrumbs auf Smartphones kompakter */
.mp-toolbar-left .mp-breadcrumb-current,
.mp-toolbar-left .mp-breadcrumb-link {
font-size: 12px !important;
line-height: 1.25;
gap: 8px !important;
}
.mp-toolbar-left .mp-breadcrumb-link:hover,
.mp-toolbar-left .mp-breadcrumb-link:focus-visible {
gap: 8px !important;
}
/* Details: schlägt main.css + Desktop-.mp-details-toolbar gap */
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link,
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link:hover,
.mp-details-toolbar .mp-toolbar-left > a.mp-breadcrumb-current.mp-breadcrumb-link:focus-visible {
gap: 8px !important;
}
.mp-toolbar-left .mp-breadcrumb-current i,
.mp-toolbar-left .mp-breadcrumb-link i {
font-size: 12px !important;
width: 1em;
height: 1em;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-row {
flex-direction: column;
justify-content: flex-start;
gap: 4px;
align-items: flex-start;
}
.mp-details-toolbar .mp-toolbar-row .mp-toolbar-left,
.mp-details-toolbar .mp-toolbar-row .search-block-right,
.mp-home-toolbar .mp-toolbar-row .mp-toolbar-left,
.mp-home-toolbar .mp-toolbar-row .search-block-right {
flex: none;
}
.mp-details-toolbar .mp-toolbar-row > .mp-details-search,
.mp-home-toolbar .mp-toolbar-row > .mp-details-search {
width: 100%;
align-self: stretch;
}
.search-block.search-page.mp-toolbar-only .search-block-right {
width: 100%;
justify-content: flex-start;
margin-left: 0;
float: none !important;
flex-wrap: nowrap;
padding-top: 0;
align-items: center;
gap: 10px;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-controls {
display: grid;
width: 100%;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
align-items: start;
row-gap: 0;
column-gap: 0;
flex: 1 1 auto;
min-width: 0;
}
/* Zeile 1: Filter + Sortierung/Ansicht/Badges */
.search-block.search-page.mp-toolbar-only .controls-row {
order: 1;
width: 100%;
flex-wrap: nowrap;
gap: 6px;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
align-items: center;
max-width: 100%;
/* Dropdowns: nicht beschneiden (mobil ggf. position:fixed per JS) */
overflow: visible;
}
.search-block.search-page.mp-toolbar-only .controls-row #search-filter {
flex-shrink: 0;
align-self: center;
margin-top: 0;
gap: 8px;
}
/* Sortierung + Ansicht direkt in .controls-row (ohne Scroll-Strip) */
.search-block.search-page.mp-toolbar-only .controls-row > .sorting-controls,
.search-block.search-page.mp-toolbar-only .controls-row > .view-switcher {
flex-shrink: 0;
min-width: 0;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions {
order: 2;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
box-sizing: border-box;
padding-right: 0;
padding-left: 0;
}
/* Über + FAQ: nur noch im Smartphone-Profilmenü (Header), nicht in der Toolbar */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-about-btn,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features {
display: none !important;
}
/* Zweite Zeile ausblenden nur wenn weder Publizieren noch Ergebnis-Zähler */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions:not(:has(.mp-publish-btn)):has(.mp-mobile-results-count:empty) {
display: none !important;
margin-top: 0 !important;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn {
flex-shrink: 0;
margin-left: auto;
}
.search-block.search-page.mp-toolbar-only .view-switcher {
gap: 5px;
}
.search-block.search-page.mp-toolbar-only .controls-row .badges-toggle-control {
margin-left: 4px;
}
.search-block.search-page.mp-toolbar-only #search-filter {
font-size: 14px;
color: #6b7280;
gap: 8px;
}
.search-block.search-page.mp-toolbar-only #search-filter i {
color: #6b7280;
}
/* Mobile: make toolbar typography comfortably readable */
.search-block.search-page.mp-toolbar-only .mp-toolbar-controls,
.search-block.search-page.mp-toolbar-only .controls-row,
.search-block.search-page.mp-toolbar-only .sorting-controls,
.search-block.search-page.mp-toolbar-only .view-controls,
.search-block.search-page.mp-toolbar-only .view-switcher,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions {
font-size: 15px !important;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn {
font-size: 12px !important;
padding: 9px 14px;
}
.search-block.search-page.mp-toolbar-only .badges-toggle-control #badgesDropdownMenuButton {
font-size: 15px !important;
}
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton .mp-badges-toolbar-icon,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton .mp-badges-count {
font-size: 15px !important;
}
.search-block.search-page.mp-toolbar-only .sorting-controls .sort-label--icon i.mp-toolbar-rail-icon,
.search-block.search-page.mp-toolbar-only .view-controls .view-label--icon i.mp-toolbar-rail-icon {
font-size: 15px !important;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-outline-icon {
width: 16px;
height: 16px;
}
.search-block.search-page.mp-toolbar-only .mp-dropdown-chevron {
width: 16px;
height: 16px;
}
/* FAQ pill shouldn't push layout wider */
.search-block.search-page.mp-toolbar-only #kit-publish-media-info-features {
margin-right: 0;
margin-top: 0;
flex-shrink: 0;
}
/* Toolbar-Dropdowns mobil: ILIAS/Theme kann .show visuell überschreiben */
#sort-dropdown-menu.sort-dropdown-menu.show,
#view-dropdown-menu.sort-dropdown-menu.show,
#badges-dropdown-menu.sort-dropdown-menu.show {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition: none !important;
z-index: 400 !important;
background-color: #ffffff !important;
border: 1px solid #d1d5d9 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
color: #111111 !important;
}
#sort-dropdown-menu.sort-dropdown-menu.show .sort-dropdown-item,
#view-dropdown-menu.sort-dropdown-menu.show .sort-dropdown-item {
opacity: 1 !important;
visibility: visible !important;
color: #111111 !important;
background-color: transparent !important;
font-size: 13px !important;
-webkit-text-fill-color: #111111 !important;
}
/* Badges: kein global text-fill — sonst ::before-Häkchen schwarz */
#badges-dropdown-menu.sort-dropdown-menu.show .sort-dropdown-item {
opacity: 1 !important;
visibility: visible !important;
color: #111111 !important;
background-color: transparent !important;
font-size: 13px !important;
}
}
/* Ensure mobile drawer typography wins over later desktop rules */
@media screen and (max-width: 800px) {
#facets-containter .mp-facets-search-sc {
font-size: 14px !important;
}
#facets-containter .mp-facets-search #search-text {
font-size: 14px !important;
}
#facets-containter .mp-facets-agg-list a {
font-size: 14px !important;
}
#facets-containter .mp-facets-header {
font-size: 12px !important;
}
#facets-containter summary.mp-facets-agg-header {
font-size: 14px !important;
}
#facets-containter .mp-facets-count {
font-size: 0.9rem !important;
}
#facets-containter .mp-facets-more {
font-size: 1rem !important;
}
}
/* Facets scrollbar (subtle, no rounding) */
#facets-containter {
scrollbar-width: thin; /* Firefox */
scrollbar-color: #b8c0c6 transparent; /* Firefox */
}
#facets-containter::-webkit-scrollbar {
width: 10px;
}
#facets-containter::-webkit-scrollbar-track {
background: transparent;
}
#facets-containter::-webkit-scrollbar-thumb {
background-color: #b8c0c6;
border: 2px solid transparent;
background-clip: content-box;
border-radius: 0;
}
#facets-containter::-webkit-scrollbar-thumb:hover {
background-color: #98a2aa;
}
#facets-containter .mp-facets-search {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #eceff1;
}
/* Search (in facets) – modern, sharp corners */
#facets-containter .mp-facets-search #form-search-block {
width: 100%;
display: block;
}
#facets-containter .mp-facets-search #search-text {
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5d9;
border-radius: 4px;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
background-clip: padding-box;
outline: none;
height: var(--mp-toolbar-primary-height);
padding: 0 9px 0 34px;
font-size: 14px;
line-height: var(--mp-toolbar-primary-height);
background: #fff;
transition: none;
color: var(--mp-search-text);
}
#facets-containter .mp-facets-search #form-search-block .fa-search {
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--mp-search-icon);
font-size: 13px;
}
#facets-containter .mp-facets-search #form-search-remove {
top: 50%;
transform: translateY(-50%);
right: 10px;
color: var(--mp-search-icon);
font-size: 14px;
}
#facets-containter .mp-facets-search #form-search-remove:hover {
color: var(--mp-search-icon-hover);
}
#facets-containter .mp-facets-search #search-text:focus {
border-color: #009682;
box-shadow: none;
}
#facets-containter .mp-facets-search #search-text:focus-visible {
border-color: #009682;
box-shadow: none;
}
#facets-containter .mp-facets-search #search-text::placeholder {
color: var(--mp-search-placeholder);
font-size: 14px !important;
}
#facets-containter .mp-facets-search #search-text:hover {
border-color: #98a2aa;
box-shadow: none;
}
/* When user typed something: slightly stronger border (no green) */
#facets-containter .mp-facets-search #search-text:not(:placeholder-shown) {
border-color: #98a2aa;
}
#facets-containter .mp-facets-search-meta {
margin-top: 8px;
display: block;
}
#facets-containter .mp-facets-search-total {
font-weight: 700;
font-size: 1.15rem;
color: #111;
margin-top: 0;
padding-top: 0;
}
#facets-containter .mp-facets-search-sc {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 14px;
color: #6b7280;
}
/* Checkbox base styles (facets + badges dropdown) */
#facets-containter .mp-facets-search-sc input[type="checkbox"],
.badges-dropdown-menu .mp-facets-search-sc input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
#facets-containter .mp-facets-search-sc label,
.badges-dropdown-menu .mp-facets-search-sc label {
margin: 0;
line-height: 1;
font-weight: 400;
display: inline-flex;
align-items: baseline;
gap: 10px;
cursor: pointer;
}
#facets-containter .mp-facets-search-sc label::before,
.badges-dropdown-menu .mp-facets-search-sc label::before {
content: '✓';
width: 16px;
height: 16px;
box-sizing: border-box;
border: 2px solid #d1d5d9;
background: #fff;
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: transparent;
font-size: 0.82rem;
font-weight: 700;
line-height: 0;
padding-top: 2px;
}
#facets-containter .mp-facets-search-sc input[type="checkbox"]:checked + label::before,
.badges-dropdown-menu .mp-facets-search-sc input[type="checkbox"]:checked + label::before {
border-color: #009682;
background: #009682;
content: '✓';
color: #fff;
font-size: 0.82rem;
font-weight: 700;
line-height: 0;
padding-top: 1px;
}
/* Badges dropdown rows: match facets checkbox alignment */
.badges-dropdown-menu .mp-facets-search-sc,
.badges-dropdown-menu .mp-facets-search-sc label {
display: inline-flex;
align-items: center;
}
#facets-containter .mp-facets-search-sc input[type="checkbox"]:focus-visible + label::before,
.badges-dropdown-menu .mp-facets-search-sc input[type="checkbox"]:focus-visible + label::before {
box-shadow: 0 0 0 3px rgba(0, 150, 130, 0.16);
}
/* Keep checked state crisp even with subtle label */
#facets-containter .mp-facets-search-sc input[type="checkbox"]:checked + label {
color: #4b5563;
}
/* Badges-Toolbar-Dropdown: KIT-Checkboxen (rund, dünner Rand, türkises „an“) */
#badges-dropdown-menu .mp-facets-search-sc label {
align-items: center;
gap: 10px;
color: #111;
}
#badges-dropdown-menu .mp-facets-search-sc label::before {
width: 18px;
height: 18px;
border: 1px solid #c5cdd3;
border-radius: 4px;
background: #fff;
padding-top: 0;
font-size: 12px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
#badges-dropdown-menu .mp-facets-search-sc input[type="checkbox"]:checked + label::before {
border-color: #00876c;
background: #00876c;
color: #fff !important;
-webkit-text-fill-color: #ffffff !important;
padding-top: 0;
line-height: 1;
}
#badges-dropdown-menu .mp-facets-search-sc input[type="checkbox"]:focus-visible + label::before {
box-shadow: 0 0 0 2px rgba(0, 135, 108, 0.25);
}
/* Make the search block breathe a bit more */
#facets-containter .mp-facets-search {
margin-bottom: 16px;
padding-bottom: 16px;
}
/* Active filters block inside facets */
#facets-containter .mp-facets-active-filters {
margin: 16px 0 16px;
padding-bottom: 16px;
border-bottom: 1px solid #eceff1;
display: none;
}
#facets-containter .mp-facets-active-filters-label {
font-weight: 700;
font-size: 0.85rem;
color: #111;
margin-bottom: 8px;
}
#facets-containter .mp-facets-active-filters-items a.remove-filter {
margin-left: 0;
margin-right: 6px;
margin-bottom: 6px;
display: inline-flex;
align-items: center;
gap: 6px;
}
#facets-containter .mp-facets-header {
font-weight: 800;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4b5563;
margin: 0;
/* Proximity: separate from previous block, dock to following facets */
margin-top: 16px;
padding: 8px 0 8px;
}
/* First facets group should "dock" to the header */
#facets-containter .mp-facets-header + details.mp-facets-group {
padding-top: 10px;
}
/* Accordion headers */
#facets-containter details.mp-facets-group {
margin: 0;
padding: 16px 0;
border-bottom: 1px solid #eceff1;
}
#facets-containter details.mp-facets-group:last-child {
border-bottom: 0;
}
#facets-containter summary.mp-facets-agg-header {
padding: 4px 0 12px;
font-weight: 700;
font-size: 14px;
color: #111;
}
/* Replace "+ / −" with chevrons, keep it sharp */
#facets-containter details.mp-facets-group > summary.mp-facets-agg-header::after {
content: '';
width: 7px;
height: 7px;
border-right: 2px solid #7a8288;
border-bottom: 2px solid #7a8288;
transform: rotate(45deg);
transform-origin: 50% 50%;
display: inline-block;
margin-left: 8px;
position: relative;
top: -1px;
transition: transform 0.2s ease;
}
#facets-containter details.mp-facets-group[open] > summary.mp-facets-agg-header::after {
transform: rotate(-135deg);
}
/* Checkbox-like options */
#facets-containter .mp-facets-agg-list {
padding-bottom: 0;
}
#facets-containter .mp-facets-agg-list ul {
margin: 0;
padding: 0;
list-style: none;
}
#facets-containter .mp-facets-agg-list ul li {
margin: 0;
padding: 0;
}
/* "Mehr zeigen …" is an action row, not a checkbox */
#facets-containter .mp-facets-agg-list ul li.mp-facets-more {
display: block;
padding: 12px 0 0;
background: transparent;
color: #00876C;
font-weight: 500;
/* align with option text column (checkbox + gap) */
padding-left: 28px;
}
#facets-containter .mp-facets-item-label {
min-width: 0;
align-self: center;
line-height: 1.4;
}
#facets-containter .mp-facets-agg-list ul li.mp-facets-more::before,
#facets-containter .mp-facets-agg-list ul li.mp-facets-more::after {
content: none !important;
}
#facets-containter .mp-facets-agg-list ul li.mp-facets-more:hover {
background: transparent;
text-decoration: underline;
color: #006959;
}
#facets-containter .mp-facets-agg-list ul li.mp-facets-more-placeholder {
display: none !important;
}
/* Hide caret icon column from FontAwesome list */
#facets-containter .mp-facets-agg-list .fa-li {
display: none;
}
#facets-containter .mp-facets-agg-list ul.fa-ul {
margin-left: 0;
padding-left: 0;
}
#facets-containter .mp-facets-agg-list a {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
column-gap: 10px;
padding: 8px 0;
color: #111;
font-weight: 400;
text-decoration: none;
border-radius: 0;
min-width: 0;
font-size: 14px;
}
#facets-containter .mp-facets-agg-list a::before {
content: '';
width: 16px;
height: 16px;
box-sizing: border-box;
border: 2px solid #c3c9cd;
background: #fff;
border-radius: 2px;
align-self: center;
}
#facets-containter .mp-facets-agg-list a.is-active {
font-weight: 600;
}
#facets-containter .mp-facets-agg-list a.is-active::before {
border-color: #009682;
background: #009682;
content: '✓';
color: #fff;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
padding-top: 1px;
}
#facets-containter .mp-facets-agg-list a.is-active::after {
content: none;
}
/* remove-filter chips should not be indented */
a.remove-filter {
margin-left: 0 !important;
}
/* Active filters (top of results): add spacing and nicer flow */
#search-results-title {
margin-bottom: 16px;
}
#search-results-title a.remove-filter {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 16px;
margin-bottom: 8px;
}
#facets-containter .mp-facets-agg-list a:hover {
background: #f3f5f6;
color: #00876C;
}
#facets-containter .mp-facets-count {
color: #4b5563;
font-size: 0.78rem;
margin-left: 8px;
align-self: center;
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* "Mehr zeigen" as a subtle action */
#facets-containter .mp-facets-more {
padding: 12px 0 0;
color: #00876C;
font-weight: 500;
font-size: 0.9rem;
}
#facets-containter .mp-facets-more:hover {
text-decoration: underline;
color: #006959;
}
.search-block-right #kit-publish-media-info {
float: none;
width: auto;
padding-top: 0;
display: flex;
align-items: center;
gap: 10px;
}
.search-block-right #kit-publish-media-info-features {
margin-right: 0;
margin-top: 0;
}
.controls-row {
display: flex;
align-items: center;
gap: 10px;
border-left: none;
padding-left: 10px;
margin-left: 0;
position: relative;
white-space: nowrap;
}
/* Kurze vertikale Linie (FAQ-Höhe), nicht volle Toolbar-Höhe */
.controls-row::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 1.125rem;
margin-top: -0.5625rem;
background-color: #d1d5d9;
}
.sorting-controls {
display: flex;
align-items: center;
gap: 6px;
}
.sort-label {
font-size: 0.85rem;
font-weight: 300;
color: #666;
white-space: nowrap;
}
/* Toolbar: prevent sort-label overlap with the select */
.search-block.search-page.mp-toolbar-only .sorting-controls {
/* main.css adds margin-bottom for standalone sort; toolbar needs 0 */
margin-bottom: 0;
align-items: center;
/* don't rely on flex gap (older/embedded browsers): use margin on label */
gap: 0;
/* Ensure icon + label never overlap (Safari/Chrome) */
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--mp-toolbar-rail-gap, 0.5rem);
}
/* Grid already provides the spacing (match Über/FAQ gap exactly) */
.search-block.search-page.mp-toolbar-only .sorting-controls .sort-label {
margin-right: 0;
}
.search-block.search-page.mp-toolbar-only .view-controls {
position: relative;
margin-bottom: 0;
align-items: center;
gap: 0;
display: flex;
}
.search-block.search-page.mp-toolbar-only .view-controls .view-label {
flex: 0 0 auto;
flex-shrink: 0;
min-width: max-content;
margin-right: 0;
padding-right: 0;
font-size: 14px;
font-weight: 500;
color: #6b7280;
display: inline-block;
line-height: 1;
position: static;
}
.search-block.search-page.mp-toolbar-only .sorting-controls .sort-label {
flex: 0 0 auto;
flex-shrink: 0;
min-width: max-content;
margin-right: 0;
padding-right: 0;
font-size: 14px;
font-weight: 500;
color: #6b7280;
display: inline-block;
line-height: 1;
position: static;
}
.search-block.search-page.mp-toolbar-only .sorting-controls .sort-label--icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1em; /* match icon box to normal link icons (FAQ/Über) */
flex-shrink: 0;
}
.search-block.search-page.mp-toolbar-only .sorting-controls .sort-label--icon i.mp-toolbar-rail-icon {
font-size: 14px;
color: #6b7280;
}
/* Desktop toolbar: stable layout (no overlap) */
.search-block.search-page.mp-toolbar-only .controls-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 14px;
gap: 0; /* use column-gap */
}
.search-block.search-page.mp-toolbar-only .controls-row > #search-filter {
grid-column: 1;
}
.search-block.search-page.mp-toolbar-only .controls-row > .sorting-controls {
grid-column: 2;
min-width: 0;
}
.search-block.search-page.mp-toolbar-only .controls-row > .view-switcher {
grid-column: 3;
justify-self: end;
}
/* Sort trigger: show full label, wrap instead of truncating */
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
margin-left: 0;
}
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select .btn-sort-text {
white-space: normal; /* allow full label */
line-height: 1.15;
word-break: normal;
overflow-wrap: normal; /* prevent per-letter wrapping */
hyphens: none;
}
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select .mp-dropdown-chevron {
flex-shrink: 0;
}
/* Mobile: keep order Filter → Sort → View (no row swap) */
@media screen and (max-width: 800px) {
.search-block.search-page.mp-toolbar-only .controls-row {
/* Don't let sort take the full remaining width on phones */
grid-template-columns: auto max-content auto;
row-gap: 8px;
column-gap: 10px;
}
.search-block.search-page.mp-toolbar-only .controls-row > #search-filter {
grid-column: 1;
grid-row: 1;
}
.search-block.search-page.mp-toolbar-only .controls-row > .sorting-controls {
grid-column: 2;
grid-row: 1;
min-width: 0;
justify-self: start;
}
.search-block.search-page.mp-toolbar-only .controls-row > .view-switcher {
grid-column: 3;
grid-row: 1;
justify-self: end;
}
}
/* (replaced by grid rules above) */
.view-switcher {
flex-shrink: 0;
font-size: 1.1rem;
color: #ccc;
display: flex;
align-items: center;
gap: 6px;
}
.view-switcher .mp-view-toggle {
border: 0;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
color: #6b7280;
transition: color 0.18s ease, background-color 0.18s ease;
}
.view-switcher .mp-view-toggle[aria-pressed="true"] {
color: #009682; /* same as "Zurück zu ILIAS" */
background-color: rgba(0, 150, 130, 0.10);
}
.view-switcher .mp-view-toggle:hover,
.view-switcher .mp-view-toggle:focus-visible {
color: #00876C;
background-color: rgba(0, 135, 108, 0.10);
outline: none;
}
.view-switcher .mp-view-toggle:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 150, 130, 0.18);
}
.view-switcher .view-label {
font-size: 0.85rem;
margin-right: 0;
font-weight: 300;
color: #666;
}
/* Nur direkte Kind-Icons (Raster/Liste), nicht fa-tags im Badges-Button.
Quadratische Hitbox + Flex: FA-Glyphen wirken sonst optisch nach rechts versetzt. */
.view-switcher > i {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
padding: 0;
border-radius: 6px;
line-height: 1;
box-sizing: border-box;
transition:
color 0.18s ease,
background-color 0.18s ease;
}
.view-switcher > i:hover {
color: #00876C;
background-color: rgba(0, 135, 108, 0.1);
}
.view-switcher > i.active {
color: #007a6b;
background-color: rgba(0, 122, 107, 0.12);
}
/* Eleganter Strich statt „|“ zwischen Ansicht und Badges-Button */
.badges-toggle-control {
margin-left: 2px;
padding-left: 10px;
}
.badges-toggle-control::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 1rem;
margin-top: -0.5rem;
background-color: #d1d5d9;
}
/* -------------------------------------------------------------------------- */
/* Toolbar micro-spacing: unify icon sizes + gaps (start page only) */
/* -------------------------------------------------------------------------- */
.search-block.search-page.mp-toolbar-only .controls-row {
gap: 16px;
}
.search-block.search-page.mp-toolbar-only .view-switcher {
gap: 4px;
font-size: 14px;
color: #9aa3ab;
}
/* Ansicht: icon-only label (matches Sortierung icon rhythm) */
.search-block.search-page.mp-toolbar-only .view-controls .view-label.view-label--icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
min-width: 1.25rem;
flex-shrink: 0;
}
.search-block.search-page.mp-toolbar-only .view-controls .view-label--icon i.mp-toolbar-rail-icon,
.search-block.search-page.mp-toolbar-only .view-switcher .view-label--icon i.mp-toolbar-rail-icon {
font-size: 14px;
color: #6b7280;
}
.search-block.search-page.mp-toolbar-only .view-controls .btn-sort-icon.mp-view-select:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 150, 130, 0.18);
}
/* Make toolbar icons share the same optical box (exclude rail labels + badges trigger; they have dedicated sizes) */
.search-block.search-page.mp-toolbar-only .controls-row i.fas:not(.mp-toolbar-rail-icon):not(.mp-badges-toolbar-icon),
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions i.fas {
font-size: 13px;
line-height: 1;
}
/* Help/meta links: consistent spacing + alignment */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions {
gap: 14px;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions a,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features a {
gap: var(--mp-toolbar-rail-gap, 0.5rem);
}
/* Home toolbar typography: keep meta/actions compact */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions a,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features a,
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton {
font-size: 14px;
}
/* Toolbar: unify ALL right-side text sizes (px: stable vs theme html font-size) */
.search-block.search-page.mp-toolbar-only .mp-toolbar-controls,
.search-block.search-page.mp-toolbar-only .controls-row,
.search-block.search-page.mp-toolbar-only .sorting-controls,
.search-block.search-page.mp-toolbar-only .view-controls,
.search-block.search-page.mp-toolbar-only .view-switcher,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions {
font-size: 14px;
}
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select {
font-size: 14px;
}
/* Beat generic `.badges-toggle-control #badgesDropdownMenuButton { font-size: 0.9rem }` (id specificity) */
.search-block.search-page.mp-toolbar-only .badges-toggle-control #badgesDropdownMenuButton {
font-size: 14px;
}
/* Make icons follow link color (gray ↔ turquoise); badges toolbar icon keeps fixed gray via .mp-badges-toolbar-icon */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions a i.fas,
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions #kit-publish-media-info-features a i.fas {
color: currentColor;
}
/* Keep publish primary, but match smaller type scale */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn {
font-size: 14px;
padding: 0.45rem 0.75rem;
border-radius: 4px;
}
/* Badges button: align with link rhythm */
.search-block.search-page.mp-toolbar-only #badgesDropdownMenuButton {
gap: 8px;
}
/* -------------------------------------------------------------------------- */
/* Toolbar grouping without separators (start page) */
/* -------------------------------------------------------------------------- */
/* Big "invisible separator" between view controls and meta/help links */
.search-block.search-page.mp-toolbar-only .controls-row .badges-toggle-control {
margin-left: 0px;
}
/* Even spacing between Badges / Über / FAQ, and a larger gap before Publish */
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions {
gap: 18px;
}
.search-block.search-page.mp-toolbar-only .mp-toolbar-actions .mp-publish-btn {
margin-left: 14px;
}
/* -------------------------------------------------------------------------- */
/* Details page: match start page toolbar look */
/* -------------------------------------------------------------------------- */
.mp-details-nav {
align-items: center;
}
.mp-details-nav-right {
gap: 18px;
align-items: center;
}
.mp-details-nav-right a,
.mp-details-nav-right #kit-publish-media-info-features a {
font-size: 14px;
gap: 8px;
line-height: 1;
}
.mp-details-nav-right #kit-publish-media-info-features {
display: inline-flex;
align-items: center;
line-height: 1;
}
.mp-details-nav-right .mp-publish-btn {
font-size: 14px;
min-height: var(--mp-toolbar-primary-height);
padding: 8px 14px;
box-sizing: border-box;
border-radius: 4px;
margin-left: 16px;
}
.search-media-meta {
display: none;
}
.search-media-description {
display: none;
}
/* === LIST VIEW STYLES === */
#main-containter #search-results-media.list-view .search-result-media {
float: none;
width: 100%;
height: auto;
margin: 0 0 20px 16px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
display: grid;
grid-template-columns: 330px 1fr;
grid-template-rows: min-content min-content min-content min-content auto;
grid-template-areas:
"thumb title"
"thumb author"
"thumb meta"
"thumb desc"
"thumb caption";
grid-gap: 5px 20px;
align-items: start;
background-color: transparent;
box-shadow: none;
}
#main-containter #search-results-media.list-view .search-media-thumb {
grid-area: thumb;
width: 330px;
height: 185px;
min-height: 185px;
margin: 0;
padding: 0;
float: none;
background: transparent;
overflow: hidden;
box-sizing: border-box;
}
#main-containter #search-results-media.list-view .search-media-thumb a {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/* Wie in der Rasteransicht: über .media-placeholder (z-index 1), sonst nur Placeholder sichtbar */
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#main-containter #search-results-media.list-view .search-media-thumb img {
width: 100%;
height: 100%;
border: none;
display: block;
margin: 0;
padding: 0;
border-radius: 0;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
#main-containter #search-results-media.list-view .search-media-duration {
display: none;
}
#main-containter #search-results-media.list-view .search-media-title {
grid-area: title;
margin: 0 0 2px 0;
}
#main-containter #search-results-media.list-view .search-media-authors {
grid-area: author;
font-size: 0.9rem;
color: #555;
margin-bottom: 8px;
display: flex;
align-items: center;
}
#main-containter #search-results-media.list-view .search-media-meta {
grid-area: meta;
display: flex;
flex-wrap: wrap;
align-items: center;
color: #666;
font-size: 0.85rem;
margin-bottom: 8px;
margin-top: 0;
line-height: 1.6;
}
#main-containter #search-results-media.list-view .search-media-meta .meta-item {
margin-right: 20px;
display: inline-flex;
align-items: baseline;
max-width: 100%;
}
#main-containter #search-results-media.list-view .search-media-meta .meta-item i {
color: #00876C;
margin-right: 8px;
width: 18px;
text-align: center;
flex-shrink: 0;
opacity: 0.8;
}
#main-containter #search-results-media.list-view .search-media-meta a.meta-series-link {
color: #00876C;
text-decoration: none;
line-height: 1.3;
display: inline-block;
}
#main-containter #search-results-media.list-view .search-media-meta a.meta-series-link:hover {
text-decoration: underline;
}
#main-containter #search-results-media.list-view .search-media-description {
grid-area: desc;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
margin: 0 0 8px 0;
}
#main-containter #search-results-media.list-view .search-media-description-inner {
color: #555;
font-size: 0.9rem;
line-height: 1.5;
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
}
#main-containter #search-results-media.list-view .search-media-description-expand-icon {
display: none;
align-self: flex-end;
flex-shrink: 0;
flex-direction: row;
align-items: center;
gap: 6px;
color: #00876c;
font-size: 0.7rem;
line-height: 1;
margin-top: 1px;
opacity: 0.95;
}
#main-containter #search-results-media.list-view .search-media-description-expand-label {
font-size: 12px;
font-weight: 500;
color: #00876c;
white-space: nowrap;
}
#main-containter #search-results-media.list-view .search-media-description-expand-icon i {
display: block;
transition: transform 0.2s ease;
}
#main-containter #search-results-media.list-view .search-media-description.is-expandable .search-media-description-expand-icon {
display: flex;
align-items: center;
justify-content: center;
}
#main-containter #search-results-media.list-view .search-media-description.is-expandable {
cursor: pointer;
}
#main-containter #search-results-media.list-view .search-media-description.is-expandable:hover .search-media-description-inner,
#main-containter #search-results-media.list-view .search-media-description.is-expandable:hover .search-media-description-expand-icon {
color: #333;
}
#main-containter #search-results-media.list-view .search-media-description.is-expandable:focus-visible {
outline: 2px solid #00876c;
outline-offset: 2px;
}
#main-containter #search-results-media.list-view .search-media-description.is-expanded .search-media-description-inner {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
-webkit-box-orient: unset;
}
#main-containter #search-results-media.list-view .search-media-description.is-expanded .search-media-description-expand-icon i {
transform: rotate(180deg);
}
#main-containter #search-results-media.list-view .search-media-captions {
grid-area: caption;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
color: #555;
font-size: 13px;
}
/* Mobile Breakpoint */
@media screen and (max-width: 768px) {
#main-containter #search-results-media.list-view .search-result-media {
grid-template-columns: 140px 1fr;
grid-gap: 0 15px;
padding-bottom: 15px;
margin-left: 0;
}
#main-containter #search-results-media.list-view .search-media-thumb {
width: 140px;
height: auto;
min-height: auto;
aspect-ratio: 16/9;
}
#main-containter #search-results-media.list-view .search-media-thumb img {
object-fit: cover;
}
#main-containter #search-results-media.list-view .search-media-title a {
font-size: 14px;
}
#main-containter #search-results-media.list-view .search-media-meta {
font-size: 0.8rem;
}
#main-containter #search-results-media.list-view .search-media-meta .meta-item {
margin-right: 10px;
margin-bottom: 2px;
}
}
.controls-row .sorting-controls {
position: relative;
margin-bottom: 0;
justify-content: flex-start;
}
.controls-row .btn-sort-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 15px;
color: #555;
border-radius: 6px;
line-height: 1;
box-sizing: border-box;
transition:
color 0.18s ease,
background-color 0.18s ease;
}
/* Toolbar: the sort dropdown trigger is NOT icon-only (avoid overlap with label). */
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select {
width: auto;
height: auto;
justify-content: flex-start;
gap: var(--mp-toolbar-rail-gap, 0.5rem);
padding: 0;
}
.search-block.search-page.mp-toolbar-only .controls-row .btn-sort-icon.mp-sort-select .btn-sort-text {
display: inline-block;
white-space: nowrap; /* keep label readable */
}
/* main.css skaliert fa-sort — in der Toolbar wirkt das „schief“ */
.controls-row .btn-sort-icon i.fas.fa-sort,
.controls-row .btn-sort-icon i.fas.fa-sort-amount-down-alt {
display: block;
transform: none;
font-size: 14px;
line-height: 1;
}
.controls-row .badges-toggle-control .btn-sort-icon i {
display: block;
line-height: 1;
}
.controls-row .btn-sort-icon:hover {
color: #00876C;
background-color: rgba(0, 135, 108, 0.1);
}
.controls-row .btn-sort-icon:focus-visible {
color: #00876C;
background-color: rgba(0, 135, 108, 0.08);
outline: 2px solid #00876C;
outline-offset: 2px;
}
@media screen and (max-width: 768px) {
.search-block-right {
float: none;
width: 100%;
justify-content: flex-end;
margin-top: 6px;
}
.controls-row {
border-left: none;
padding-left: 0;
margin-left: 0;
}
.controls-row::before {
display: none;
}
/* Keep about/FAQ/publish visible on mobile */
#kit-publish-media-info {
display: inline-flex !important;
}
}
.mp-details-series-header {
flex-direction: column !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
}
.mp-details-series-header .mr-auto {
font-weight: 600;
font-size: 16px;
margin-right: 0 !important;
padding-right: 0 !important;
margin-bottom: 0.5rem;
width: 100%;
}
.mp-details-series-header > .d-flex.align-items-center {
width: 100%;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start;
gap: 0.5rem 1rem;
margin-top: 0 !important;
}
.mp-details-series-header .btn-sort-icon {
color: #333;
transition: color 0.15s ease;
}
.mp-details-series-header .btn-sort-icon:hover,
.mp-details-series-header .btn-sort-icon:focus-visible {
color: #00876c;
}
/* Ensure label follows hover color (beats generic toolbar text color rules) */
.mp-details-series-header .btn-sort-icon:hover .btn-sort-text,
.mp-details-series-header .btn-sort-icon:focus-visible .btn-sort-text {
color: inherit;
}
.mp-details-series-header .btn-sort-icon .btn-sort-text {
font-size: 14px;
color: inherit;
}
.mp-details-series-header .btn-sort-icon i.fas.fa-sort,
.mp-details-series-header .btn-sort-icon i.fas.fa-sort-amount-down-alt {
display: inline-block;
font-size: 0.9rem;
color: currentColor;
transform: none;
transition: transform 0.18s ease, color 0.15s ease;
}
/* Keep details sort hover consistent with home toolbar (no icon scaling) */
.mp-details-series-header #mp-details-series-episode {
float: none;
margin-left: auto;
font-size: 14px;
color: #666;
}
@media (max-width: 640px) {
.mp-details-series-episode-total {
display: none;
}
}
.mp-series-nav-arrows {
display: flex;
align-items: center;
margin-right: 15px;
gap: 8px;
}
.mp-series-arrow {
display: inline-flex;
align-items: center;
color: #6b7280; /* match "Standard" neutral toolbar tone */
text-decoration: none;
transition: color 0.15s ease;
gap: 3px;
}
.mp-series-arrow + .mp-series-arrow {
margin-left: 12px;
}
.mp-series-nav-label {
margin: 0;
font-size: 14px;
font-weight: 500;
}
.mp-series-arrow.disabled {
color: #d1d5d9;
cursor: default;
pointer-events: none;
}
/* Ensure disabled state is visually obvious (beats link/icon color rules) */
.mp-details-series-header .mp-series-arrow.disabled {
color: #d1d5d9 !important;
opacity: 0.75;
}
.mp-details-series-header .mp-series-arrow.disabled .mp-series-nav-label,
.mp-details-series-header .mp-series-arrow.disabled i {
color: #d1d5d9 !important;
}
.mp-series-arrow:not(.disabled):hover {
color: #00876c;
text-decoration: none;
}
/* Hover like sorting: color change only (no icon movement) */
.mp-label-short {
display: none;
}
@media (max-width: 640px) {
.mp-label-full {
display: none;
}
.mp-label-short {
display: inline;
}
.mp-series-arrow {
padding: 6px 4px;
}
.mp-series-arrow + .mp-series-arrow {
margin-left: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.controls-row .btn-sort-icon {
transition: none;
}
#main-containter #search-results-media.list-view .search-media-description-expand-icon i {
transition: none;
}
}
#search-results-media:not(.list-view) .search-result-media {
position: relative;
isolation: isolate;
/* unify card + gap tint (so there's no white band) */
--yt-card-tint: rgba(0, 150, 130, 0.081);
transition: transform 0.22s ease;
border-radius: 4px;
}
/* Tinted backdrop behind the growing frame (fills the outer "white gap") */
#search-results-media:not(.list-view) .search-result-media::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 4px;
background: var(--yt-card-tint);
opacity: 0;
transform: scale(0.90);
transition: opacity 0.18s ease, transform 0.18s ease, inset 0.18s ease;
pointer-events: none;
z-index: 1;
}
#search-results-media:not(.list-view) .search-result-media:hover::before {
inset: -6px;
opacity: 1;
transform: scale(1);
}
/* Keep content above the tinted backdrop */
#search-results-media:not(.list-view) .search-result-media > .search-media-thumb,
#search-results-media:not(.list-view) .search-result-media > .yt-card-body {
position: relative;
z-index: 2;
}
/* Thumbnail + badges should stay visually unchanged */
#search-results-media:not(.list-view) .search-media-thumb {
background: #fff;
overflow: hidden;
}
/* Tint only the text/info area, not the thumbnail/badges */
#search-results-media:not(.list-view) .yt-card-body {
border-radius: 0 0 4px 4px;
padding: 10px 10px 12px;
}
#search-results-media:not(.list-view) .search-result-media:hover .yt-card-body {
background: transparent;
}
#search-results-media:not(.list-view) .yt-card-body .search-media-title {
margin-top: 0;
}
/* Modern style: soft frame grows from center (whole card) */
#search-results-media:not(.list-view) .search-result-media::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 4px;
box-shadow: 0 0 0 1px var(--yt-card-tint) inset;
opacity: 0;
transform: scale(0.90);
transition: opacity 0.18s ease, transform 0.18s ease, inset 0.18s ease;
pointer-events: none;
z-index: 5;
}
#search-results-media:not(.list-view) .search-result-media:hover::after {
inset: -6px;
opacity: 1;
transform: scale(1);
}
.search-media-hover-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.88);
width: clamp(39px, 11.6%, 54px);
aspect-ratio: 1;
height: auto;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #007a6b;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 4;
pointer-events: none;
/*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);*/
}
/* Größeres Play-Zeichen: ~hälftige Kreishöhe wirkt proportional zum Durchmesser */
.search-media-hover-overlay--play {
font-size: clamp(1.05rem, 0.58rem + 1.42vw, 1.48rem);
}
/* FA-Glyphen: kein margin-left; Box + Flex für echte optische Mitte im Kreis */
.search-media-hover-overlay i {
margin: 0;
padding: 0;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: inherit;
}
/* fa-play: Glyphe sitzt in der EM-Box nach links; kleiner Schub nach rechts = optische Mitte */
.search-media-hover-overlay--play .fas.fa-play {
width: 1em;
height: 1em;
transform: translateX(0.11em);
}
.search-media-hover-overlay--series {
font-size: clamp(0.77rem, 0.46rem + 0.88vw, 1.08rem);
}
.search-result-media:hover .search-media-hover-overlay {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/*
* Abdunklung per Link-Overlay (kein filter auf ![]()
).
* Zoom per transform auf .search-media-thumb-zoom – ![]()
selbst unskaliert (object-fit/cover + Subpixel).
*/
#search-results-media:not(.list-view) .search-media-thumb a::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
#search-results-media:not(.list-view) .search-result-media:hover .search-media-thumb a::before {
opacity: 0.18;
}
/* Zoom auf Wrapper – ![]()
ohne transform (object-fit + replaced element verursacht sonst oft 1px-Sprung) */
.search-media-thumb a .search-media-thumb-zoom {
display: block;
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
#search-results-media:not(.list-view) .search-media-thumb a .search-media-thumb-zoom {
transform: translateZ(0) scale(1);
transform-origin: 50% 50%;
transition: transform 0.22s ease;
}
#search-results-media:not(.list-view) .search-result-media:hover .search-media-thumb a .search-media-thumb-zoom {
transform: translateZ(0) scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
#search-results-media:not(.list-view) .search-result-media,
.search-media-hover-overlay,
#search-results-media:not(.list-view) .search-media-thumb a .search-media-thumb-zoom,
#search-results-media:not(.list-view) .search-media-thumb a::before {
transition: none;
}
#search-results-media:not(.list-view) .search-result-media:hover .search-media-thumb a .search-media-thumb-zoom {
transform: translateZ(0) scale(1);
}
}
/* Final mobile override: facets search should be a single-frame input */
@media screen and (max-width: 800px) {
#facets-containter .mp-facets-search #form-search-block {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
border: 1px solid #d1d5d9 !important;
border-radius: 4px !important;
background: #fff !important;
padding: 0.5rem 0.85rem !important;
box-shadow: none !important;
height: 42.55px !important;
min-height: 42.55px !important;
box-sizing: border-box !important;
}
#facets-containter .mp-facets-search #form-search-block .fa-search {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
font-size: 20px !important;
color: var(--mp-search-icon) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
#facets-containter .mp-facets-search #form-search-remove {
position: static !important;
right: auto !important;
top: auto !important;
transform: none !important;
margin-left: auto !important;
color: var(--mp-search-icon) !important;
font-size: 16px !important;
}
#facets-containter .mp-facets-search #form-search-remove:hover {
color: var(--mp-search-icon-hover) !important;
}
#facets-containter .mp-facets-search #search-text {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
height: 100% !important;
line-height: normal !important;
width: 100% !important;
/* keep a little breathing room from the icon */
padding: 0 9px 0 7px !important;
margin: 0 !important;
font-size: 14px !important;
color: var(--mp-search-text) !important;
}
}