,
mit Textlink ohne Bild: Button am unteren Kartenrand, damit er
* beim Wechsel der Slides an derselben Stelle bleibt
*
* Kontraste (WCAG AA):
* #666666 "Anzeige" 5,7:1 auf #fff
* #111111 "Anzeige" VGA 9,3:1 auf #fca311
* #00529b VGA-Slogan 6,9:1 auf #ffefc9 (hellste Stelle #fffcf0: 7,6:1)
*/
.ct-sidebar {
--sidebar-widgets-spacing: 36px;
--btd-logo-hoehe: 88px;
--btd-akzent: #fca311;
--btd-label-farbe: #666666;
--btd-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11l6-6M6 5h5v5'/%3E%3C/svg%3E");
}
/* Karte: voller oranger Rahmen, Schatten wie die Beitragskarten */
.ct-sidebar .ct-widget:has(.custom-widget-slider, .vga-section):not(#_) {
position: relative;
display: flex;
flex-direction: column;
padding: 24px 22px;
border: 2px solid var(--btd-akzent);
border-radius: 8px;
box-shadow: 0 12px 18px -6px rgba(34, 56, 101, 0.08);
}
/*
* Kennzeichnung als Werbung, oben rechts im Rahmen. Der Hintergrund kommt
* von der Karte (inherit) und unterbricht die Rahmenlinie.
*/
.ct-sidebar .ct-widget:has(.custom-widget-slider, .vga-section)::before {
content: "Anzeige";
position: absolute;
top: -1px;
right: 16px;
transform: translateY(-50%);
padding: 0 8px;
background: inherit;
color: var(--btd-label-farbe);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.6;
text-transform: uppercase;
}
.ct-sidebar .ct-widget:has(.custom-widget-slider, .vga-section) > .textwidget {
flex: 1;
display: flex;
flex-direction: column;
}
/*
* Slider: Die Slides liegen per Grid übereinander, der Slider wird so hoch
* wie seine längste Slide (statt der festen Mindesthöhen aus der Datenbank),
* größerer Text wird nicht abgeschnitten. overflow: visible, damit der
* Fokusrahmen der Buttons nicht abgeschnitten wird.
*/
.ct-sidebar .custom-widget-slider {
flex: 1;
display: grid;
min-height: 0;
padding: 0;
overflow: visible;
}
.ct-sidebar .custom-widget-slider .slide {
grid-area: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
}
/* Logo: feste Zeile, Logo darin mittig eingepasst */
.ct-sidebar .custom-widget-slider .slide > img:first-child,
.ct-sidebar .custom-widget-slider .slide > a:first-child > img {
width: 100%;
height: var(--btd-logo-hoehe);
max-width: none;
max-height: none;
margin: 0;
padding: 0 6%;
object-fit: contain;
}
.ct-sidebar .custom-widget-slider .slide > :is(img, a):first-child {
display: block;
flex: none;
margin: 0 0 18px;
}
/* Text; die
zwischen den Absätzen (Datenbank) ergäben doppelte Lücken */
.ct-sidebar .custom-widget-slider :is(p, ul) {
margin: 0 0 0.6em;
font-size: 0.9em;
line-height: 1.55;
}
.ct-sidebar .custom-widget-slider li {
font-size: inherit;
}
.ct-sidebar .custom-widget-slider .slide > br {
display: none;
}
.ct-sidebar .custom-widget-slider p img {
margin: 0 auto;
}
/* Link-Absatz ans Kartenende; HK-BUR hat stattdessen einen Bild-Button */
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)),
.ct-sidebar .custom-widget-slider .slide > p:has(> a > .bur-button-image) {
margin: auto 0 0;
padding-top: 12px;
}
.ct-sidebar .custom-widget-slider .bur-button-image {
width: 100%;
max-width: 292px;
max-height: none;
}
/* Zweites Logo nach dem Button (BT Professional) */
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) ~ p {
margin: 16px 0 0;
}
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) ~ p img {
max-height: 56px;
}
/* Button: Umriss wie "weiterlesen" in der Beitragsliste, Pfeil statt Plugin-Icon */
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) > a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 42px;
padding: 0.5em 1em;
border: 1px solid #eba000;
border-radius: 4px;
background: transparent;
color: #9a5a00;
font-weight: 600;
line-height: 1.3;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) > a::after {
content: "";
flex: none;
width: 0.85em;
height: 0.85em;
background-color: currentColor;
-webkit-mask: var(--btd-pfeil) center / contain no-repeat;
mask: var(--btd-pfeil) center / contain no-repeat;
}
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) > a:hover {
border-color: var(--btd-akzent);
background-color: var(--btd-akzent);
color: #111111;
text-decoration: none;
}
/*
* VGA-Karte (#custom_html-10) hebt sich von den übrigen ab: dickerer Rahmen,
* warmer Verlauf statt Weiß, oranger Lichtkranz, stärkerer Schatten, leicht
* gedreht (im Zusatz-CSS 5°), Slogan in VGA-Blau, "Anzeige" als gefülltes
* Schild. Das Widget bringt eigenes CSS mit (.vga-section usw.), hier auf die
* Maße der übrigen Karten gebracht.
*/
.ct-sidebar .ct-widget:has(.vga-section):not(#_) {
padding: 28px 24px 26px;
border: 3px solid var(--btd-akzent);
border-radius: 10px;
background: linear-gradient(165deg, #fffcf0 0%, #fff6dc 55%, #ffefc9 100%);
box-shadow: 0 0 0 5px rgba(252, 163, 17, 0.16), 0 22px 38px -16px rgba(150, 85, 0, 0.45);
transform: rotate(2deg);
}
.ct-sidebar .ct-widget:has(.vga-section)::before {
top: -1.5px;
padding: 1px 10px;
border-radius: 999px;
background: var(--btd-akzent);
color: #111111;
}
.ct-sidebar .vga-section {
max-width: none;
padding: 0;
}
.ct-sidebar .vga-logo-small {
width: 160px;
margin: 2px auto 14px;
}
/* Slogan darf bei größerer Schrift umbrechen (Widget-CSS: nowrap) */
.ct-sidebar .vga-cta {
margin: 0 0 16px;
font-size: 1.05em;
line-height: 1.3;
white-space: normal;
text-wrap: balance;
}
.ct-sidebar :is(.vga-cta, .vga-cta strong) {
color: #00529b;
}
.ct-sidebar .vga-banner-small {
margin: 0 auto 18px;
border-radius: 6px;
box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.45);
}
.ct-sidebar .vga-description {
margin: 0 0 0.6em;
font-size: 0.9em;
line-height: 1.55;
}
.ct-sidebar .vga-description:last-child {
margin-bottom: 0;
}
/*
* Tablet: Die Seitenleiste steht unter dem Inhalt und ist so breit wie die
* Seite. VGA-Karte über die ganze Breite, die Slider-Karten zu zweit
* nebeneinander (gleich hoch pro Reihe).
*/
@media (min-width: 690px) and (max-width: 999.98px) {
.ct-sidebar[data-widgets="separated"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sidebar-widgets-spacing);
}
.ct-sidebar .ct-widget:not(:last-child) {
margin-bottom: 0;
}
.ct-sidebar > .ct-widget:not(:has(.custom-widget-slider)) {
grid-column: 1 / -1;
}
.ct-sidebar .ct-widget:has(.vga-section):not(#_) {
transform: rotate(1deg);
}
.ct-sidebar .vga-section {
max-width: 30em;
margin-inline: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.ct-sidebar .custom-widget-slider .slide {
transform: none;
transition: opacity 0.6s ease;
}
.ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) > a {
transition: none;
}
}
/* ------------------------------------------------------------------
* Dunkelmodus (Palette in kontrast.css). Karten in der Kartenfarbe #363636,
* die VGA-Karte in warmem Braun (#3a3328 bis #4a3b1f).
* #fca311 Button-Text/-Rahmen 6,0:1 auf #363636
* #111111 Button-Text (Hover) 9,3:1 auf #fca311
* #b5b5b5 "Anzeige" 5,9:1 auf #363636
* #e0e0e0 Text VGA 8,2:1 auf #4a3b1f
* #fca311 Link VGA 5,4:1 auf #4a3b1f
* #9cc8f7 VGA-Slogan 6,2:1 auf #4a3b1f
* ------------------------------------------------------------------ */
[data-color-mode*="dark"] .ct-sidebar {
--btd-label-farbe: #b5b5b5;
}
[data-color-mode*="dark"] .ct-sidebar .ct-widget:has(.custom-widget-slider, .vga-section):not(#_) {
box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.4);
}
/* VGA-Karte: Das Zusatz-CSS gibt ihr einen festen hellen Grund (#fffff0) */
[data-color-mode*="dark"] .ct-sidebar .ct-widget:has(.vga-section):not(#_) {
background: linear-gradient(165deg, #3a3328 0%, #4a3b1f 100%);
box-shadow: 0 0 0 5px rgba(252, 163, 17, 0.14), 0 22px 38px -16px rgba(0, 0, 0, 0.7);
}
[data-color-mode*="dark"] .ct-sidebar :is(.vga-cta, .vga-cta strong) {
color: #9cc8f7;
}
/* Links im VGA-Widget haben eine feste Farbe im Widget-HTML */
[data-color-mode*="dark"] .ct-sidebar .vga-link {
color: #fca311;
}
[data-color-mode*="dark"] .ct-sidebar .vga-link:hover {
color: #fdc300;
}
/* Das Zusatz-CSS setzt .custom-widget-slider a auf #0073aa (2,5:1 auf #363636) */
[data-color-mode*="dark"] .custom-widget-slider a {
color: #fca311;
}
[data-color-mode*="dark"] .custom-widget-slider a:hover {
color: #fdc300;
}
[data-color-mode*="dark"] .ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) > a {
border-color: #fca311;
color: #fca311;
}
[data-color-mode*="dark"] .ct-sidebar .custom-widget-slider .slide > p:has(> a):not(:has(img)) > a:hover {
color: #111111;
}
/*
* Partner-Logos (Bilder aus den Widgets in der Datenbank, daher per
* Dateiname): dunkle Schrift auf transparentem oder weißem Grund. Der
* SVG-Filter #btd-logo-hell (functions.php) macht dunkle Schrift hell, lässt
* farbige Teile nah am Original und setzt Weiß auf die Kartenfarbe #363636,
* sodass die Logos ohne Kasten erscheinen. Fotos und farbige Grafiken
* (VGA-Banner, butler, HK-BUR, Walhalla) bleiben, wie sie sind. Ein neues
* Logo mit dunkler Schrift hier ergänzen.
*/
[data-color-mode*="dark"] .ct-sidebar :is(
img[src*="VGA_Logo_blau"],
img[src*="bt-pro2023.jpg"],
img[src*="Akademie-HELP"],
img[src*="wings-fernstudium"],
img[src*="Weinsberg-Forum-Logo"],
img[src*="Betreuer-Weiterbildung_Logo"],
img[src*="fbb-logo"]
) {
filter: url(#btd-logo-hell);
}