/* Moved from WordPress Additional CSS; preserved as source of truth in theme. */
/* Contact-Vorschau und leere weisse Karte aus der Startseitenübersicht entfernen. */ body.home .dp-project-grid > .dp-project-card[href="https://davezehnder.ch/portfolio/contact"], body.home .dp-project-grid > .dp-project-card[href="https://davezehnder.ch/portfolio/1313"] { display: none !important; } /* Kompaktes mitlaufendes Menü; Logo und Titel bleiben am Seitenanfang. */ @media(min-width:761px) { body.dp-menu-top.dp-is-scrolled .site-sidebar > nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: none; margin: 0; padding: 12px 4vw; background: var(--dp-header-background, #181818); z-index: 80; } body.dp-menu-top.dp-is-scrolled .site-sidebar > nav .portfolio-menu { justify-content: flex-end; } } @media(max-width:760px) { body .mobile-header .menu-toggle { position: fixed; top: 10px; right: 14px; width: 44px; height: 44px; z-index: 90; background: var(--dp-header-background, #181818) !important; } body .site-sidebar { position: fixed; inset: 64px 0 0; width: 100%; height: calc(100dvh - 64px); z-index: 85; overflow-y: auto; } } /* Rote Bildanzahl im Karussell und in der Grossansicht. */ body .site-main .dz-gallery[data-mode=carousel] .carousel-count, body .dz-lightbox figcaption { color: #FFFFFF !important; } /* Rote Bildwechsel-Pfeile im Karussell und in der Grossansicht. */ body .site-main .dz-gallery[data-mode=carousel] .carousel-button, body .site-main .dz-gallery[data-mode=carousel] .carousel-button:hover, body .site-main .dz-gallery[data-mode=carousel] .carousel-button:focus, body .dz-lightbox .lightbox-prev, body .dz-lightbox .lightbox-next { color: #FFFFFF !important; } /* Einheitlicher Abstand zwischen Bildern und Textbalken. */ body .site-main .project-layout { gap: 40px !important; } body .site-main .project-layout-below .project-description { margin-top: 40px !important; } @media(max-width:1200px) { body .site-main .project-layout-side .project-description, body .site-main .project-layout-left .project-description, body .site-main .project-layout-above .project-description { margin-top: 0 !important; margin-bottom: 0 !important; } } /* Post-it-gelbes Schliessen-Kreuz. */ body .site-main .project-close, body .site-main .project-close:visited, body .dz-lightbox .lightbox-close { color: #FFF59D !important; } body .site-main .project-close:hover, body .site-main .project-close:focus-visible, body .dz-lightbox .lightbox-close:hover, body .dz-lightbox .lightbox-close:focus-visible { color: #FFFFFF !important; } /* Schliessen-Link auf blauem Hintergrund sichtbar halten. */ body .site-main .project-close, body .site-main .project-close:visited { color: #FFFFFF; } body .dz-lightbox .lightbox-close { color: #FFF59D !important; } body .dz-lightbox .lightbox-close:hover, body .dz-lightbox .lightbox-close:focus-visible { color: #FFFFFF !important; } body .site-main .project-close:hover, body .site-main .project-close:focus-visible { color: #FFFFFF; } /* Kontaktformular auf blauem Hintergrund lesbar halten. */ body .dp-contact .dp-contact-form label, body .dp-contact .dp-form-note, body .dp-contact .dp-form-note a, body .dp-contact .dp-form-status { color: var(--projekt-schriftfarbe, #FFFFFF); } body .dp-contact .dp-contact-form button { background: #FFF59D !important; color: #181818 !important; border: 1px solid #FFF59D; } /* Rote Links und aktive Menüpunkte. */ body .site-sidebar .portfolio-menu a, body .site-sidebar .portfolio-menu a:visited { color: #FFF59D !important; } body .site-sidebar .portfolio-menu a:hover, body .site-sidebar .portfolio-menu a:focus-visible, body .site-sidebar .portfolio-menu a:active, body .site-sidebar .portfolio-menu .current-menu-item > a, body .site-sidebar .portfolio-menu .current_page_item > a, body .site-sidebar .portfolio-menu .current-menu-ancestor > a, body .site-sidebar .portfolio-menu a[aria-current], body .site-main .entry-content a, body .site-main .project-description a, body .site-main figcaption a, body .dp-form-note a { color: #FFFFFF !important; } /* Alte Layouttabellen im Projekttext passen sich der Textspalte an. */ body .site-main .project-description { min-width: 0; overflow-wrap: anywhere; } body .site-main .project-description table, body .site-main .project-description tbody, body .site-main .project-description tr, body .site-main .project-description td { display: block; width: 100% !important; max-width: 100%; min-width: 0; } body .site-main .project-description td:empty { display: none; } /* Breite Portrait-Vorschaubilder: keine leeren Rasterspalten vor dem Text. */ @media(min-width:1201px) { body .site-main .project-layout-side:has(.dz-gallery.has-custom-thumb-sizes > .is-style-thumb-wide) { grid-template-columns: minmax(0,46%) minmax(290px,35%); gap: 40px; } body .site-main .project-layout-side .dz-gallery.has-custom-thumb-sizes:has(> .is-style-thumb-wide) { grid-template-columns: repeat(6,minmax(0,1fr)); } } /* Horizontaler Slide: Textbalken näher an die Bilder. */ body.gallery-layout-horizontal .site-main .project-description, body .site-main .project-layout:has(.dz-gallery[data-mode=horizontal]) .project-description { margin-top: 16px; } @media(min-width:1201px) { body.gallery-layout-horizontal .site-main .project-layout-side, body .site-main .project-layout-side:has(.dz-gallery[data-mode=horizontal]) { gap: 16px; } body.gallery-layout-horizontal .site-main .project-layout-side .project-description, body .site-main .project-layout-side:has(.dz-gallery[data-mode=horizontal]) .project-description { margin-top: 0; } } /* Projekttexte im gelben Balken mit anthrazitfarbener Schrift. */ body .site-main .project-description { background: #FFF59D; padding: 20px 24px; color: #181818 !important; } body .site-main .project-description .project-description-title, body .site-main .project-description .entry-title, body .site-main .project-description p, body .site-main .project-description a, body .site-main .project-description a:visited, body .site-main .project-description a:hover { color: #181818 !important; } body .site-main .project-description a { text-decoration: underline; text-underline-offset: 3px; } @media(max-width:760px) { body .site-main .project-description { padding: 16px 18px; } } /* Weisse Menüschrift und Projekttexte. */ :root { --menue-schriftfarbe: #FFF59D; --projekt-schriftfarbe: #F5F2E9; } body .site-sidebar .portfolio-menu a, body .site-sidebar .portfolio-menu a:hover, body .site-sidebar .portfolio-menu a:visited, body .site-sidebar .portfolio-menu a[aria-current], body .site-sidebar .dp-social-links a, body .menu-toggle { color: var(--menue-schriftfarbe); } body .site-main .entry-title, body .site-main .entry-title a, body .site-main .project-description-title, body .site-main .project-description, body .site-main .project-description a, body .site-main .entry-content, body .site-main .entry-content a, body .site-main .carousel-legend, body .site-main figcaption, body .site-main figcaption a { color: var(--projekt-schriftfarbe); } /* Pfeil auf Höhe der Footer-E-Mail. */ body .dp-page-footer { align-items: center; min-height: 56px; } body .dp-back-to-top { width: 58px; height: 58px; margin: -61px 4vw 11px auto; } @media(max-width:760px) { body .dp-page-footer .dp-footer-languages:empty { display: none; } body .dp-back-to-top { width: 46px; height: 46px; margin: -55px 20px 9px auto; } } /* Footer-Farben im Customizer unter Zusätzliches CSS ändern. */ :root { --footer-schriftfarbe: #FFF59D; --footer-pfeilfarbe: #FFF59D; } body .dp-page-footer, body .dp-page-footer a, body .sidebar-footer, body .sidebar-footer a { color: var(--footer-schriftfarbe) !important; } body .dp-back-to-top, body .dp-back-to-top:visited { color: var(--footer-pfeilfarbe); } body .dp-back-to-top:hover, body .dp-back-to-top:focus-visible { color: #FFFFFF; } /* Seitenhintergrund: diese Farbe im Customizer unter Zusätzliches CSS ändern. */ :root { --seitenhintergrund: #181818; --paper: var(--seitenhintergrund); } html, body, .site-main { background-color: var(--seitenhintergrund); } /* Kleine Bildschirme und Touch: kompakte Textfelder unter dem Foto. */ @media(max-width:760px), (hover:none), (pointer:coarse) { body.home.dp-home-full-overlay .dp-project-grid .dp-project-card .dp-hover-title, body .dp-project-grid .dp-project-card:hover .dp-hover-title, body .dp-project-grid .dp-project-card:focus-visible .dp-hover-title { position: static !important; inset: auto !important; width: 100%; height: auto !important; min-height: 0 !important; max-height: none; opacity: 1; padding: 10px 12px !important; font-size: 14px; line-height: 1.35; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 4px; } body .dp-project-grid .dp-hover-title small { font-size: 11px; line-height: 1.3; } } /* Hoverflächen mit sichtbarem Bildrand. */ @media(hover:hover) and (pointer:fine) { body.home.dp-home-full-overlay .dp-project-grid .dp-project-card .dp-hover-title { inset: 20px; } } /* Schwarze Hoverflächen mit weisser Schrift. */ body .dp-project-grid { --dp-hover-background: #FFF59D; --dp-hover-color: #000000; } body .dp-project-grid .dp-project-card .dp-hover-title, body.dp-home-full-overlay .dp-project-card .dp-hover-title { background: #FFF59D !important; color: #000000 !important; } body .dp-project-grid .dp-hover-title span, body .dp-project-grid .dp-hover-title small { color: #000000 !important; } /* Logo und Schriftzug bleiben am Seitenanfang. */ body .dp-floating-brand { display: none !important; } body .site-sidebar { position: relative; top: auto; } /* Auf kleinen Bildschirmen bleibt das Logo am Seitenanfang. */ @media(max-width:760px) { body .mobile-header { position: relative; top: auto; } body .dp-floating-brand { display: none !important; } } /* Schriftzug unter dem mitlaufenden Logo. */ body .dp-floating-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } body .dp-floating-brand[hidden] { display: none; } body .dp-floating-brand::after { content: "DAVID ZEHNDER PHOTOGRAPHY"; display: block; font-size: var(--dp-brand-text-size, 10px); font-weight: 400; line-height: 1.25; color: #0000FF; } body.dp-is-scrolled .dp-brand-text { visibility: visible; color: #0000FF; } body .dp-floating-brand:hover::after, body.dp-is-scrolled .dp-brand:hover .dp-brand-text { color: #FFFFFF; } /* Logo und Schriftzug beim Hover rot. */ body .dp-brand:hover .dp-brand-text { color: #FFFFFF; } body .dp-brand:hover .dp-logo { filter: brightness(0) invert(1); } /* Weisses Logo und Websitename; beim Scrollen wird nur das Logo blau. */ body .dp-brand-text, body .site-title { color: #FFF59D; } body .dp-logo { filter: brightness(0) saturate(100%) invert(93%) sepia(24%) saturate(708%) hue-rotate(354deg) brightness(106%) contrast(101%); } body.dp-is-scrolled .dp-logo { filter: brightness(0) saturate(100%) invert(8%) sepia(100%) saturate(7499%) hue-rotate(247deg) brightness(101%) contrast(145%); } /* Keep gallery photos bright; use the hand cursor in masonry and slide views. */ body .site-main .dz-gallery[data-mode] figure img, body .site-main .dz-gallery[data-mode] figure:hover img { opacity: 1 !important; filter: none !important; } body:not(.home):not(.lightbox-open) .site-main .dz-gallery[data-mode] figure, body:not(.home):not(.lightbox-open) .site-main .dz-gallery[data-mode] figure a, body:not(.home):not(.lightbox-open) .site-main .dz-gallery[data-mode] figure img { cursor: pointer !important; }
/* Dezente Lupe mit hellgelbem Kreis */
.dz-gallery[data-mode="masonry"] figure:has(img)::after {
  background: rgba(255, 248, 204, 0.65) !important;
  color: #111 !important;
}

/* Einheitliches Hellgelb für alle Projekt-Textbalken */
:root {
  --dz-ui-yellow: #FFF8CC;
  --dp-hover-background: #FFF8CC;
}

.dp-project-grid .dp-project-card .dp-hover-title,
.dp-project-card:hover .dp-hover-title,
.dp-project-card:focus-visible .dp-hover-title,
.dp-titles-always .dp-hover-title,
body.dp-home-full-overlay .dp-project-card .dp-hover-title {
  background: #FFF8CC !important;
  background-color: #FFF8CC !important;
  color: #111 !important;
}

/* Offene Winkel für die Karussell-Navigation */
.carousel-button::before,
.dz-lightbox .lightbox-prev::before,
.dz-lightbox .lightbox-next::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.carousel-button.prev::before,
.dz-lightbox .lightbox-prev::before {
  transform: rotate(-135deg) !important;
}

.carousel-button.next::before,
.dz-lightbox .lightbox-next::before {
  transform: rotate(45deg) !important;
}

/* Gleiches Hellgelb für die Navigationszeichen */
.carousel-button,
.dz-lightbox .lightbox-prev,
.dz-lightbox .lightbox-next {
  color: #FFF8CC !important;
}

/* Masonry: überall 12 px Bildabstand */
.dz-gallery[data-mode="masonry"] {
  background: transparent !important;
  column-gap: 12px !important;
  gap: 12px !important;
}

.dz-gallery[data-mode="masonry"] > figure {
  background: transparent !important;
  margin-bottom: 12px !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Masonry mit individuellen Bildgrössen */
.dz-gallery[data-mode="masonry"].has-custom-thumb-sizes {
  gap: 12px !important;
}


/* Masonry: überall 12 px Abstand */
.dz-gallery[data-mode="masonry"] {
  column-gap: 12px !important;
  gap: 12px !important;
  background: transparent !important;
}

.dz-gallery[data-mode="masonry"] > figure {
  margin-bottom: 12px !important;
  background: transparent !important;
}

/* Slides: Anthrazit */
.dz-gallery[data-mode="horizontal"],
.dz-gallery[data-mode="vertical"],
.dz-gallery[data-mode="horizontal"] figure,
.dz-gallery[data-mode="vertical"] figure {
  background: #181818 !important;
}

/* Karussell: Tiefschwarz */
.dz-gallery[data-mode="carousel"],
.dz-gallery[data-mode="carousel"] figure {
  background: #000000 !important;
}

/* Einzelbilder: Anthrazit */
.dz-gallery[data-mode="single"],
.dz-gallery.dz-single-gallery,
.dz-gallery.dz-single-gallery figure {
  background: #181818 !important;
}

/* Keine weissen Bildränder */
.dz-gallery figure,
.dz-gallery figure a,
.dz-gallery figure img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Karussell: Bildzähler rechts unter dem Bild */
.dz-gallery[data-mode="carousel"] {
  position: relative;
  margin-bottom: 0 !important;
}

.dz-gallery[data-mode="carousel"] .carousel-count {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 12px !important;
  background: transparent !important;
  color: #FFF8CC !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  z-index: 5;
}

.dz-gallery[data-mode="carousel"] + .carousel-legend {
  margin-top: 12px !important;
  padding: 0 !important;
  color: #FFF8CC !important;
  line-height: 1.4 !important;
}

/* Karussell: Querformat ohne seitliche Balken */
.dz-gallery[data-mode="carousel"] {
  width: 100% !important;
  background: #000 !important;
}

.dz-gallery[data-mode="carousel"] figure {
  background: #000 !important;
}

.dz-gallery[data-mode="carousel"] figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Bildtitel immer links */
.dz-gallery[data-mode="carousel"] + .carousel-legend {
  margin-top: 12px !important;
  text-align: left !important;
  color: #FFF8CC !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Bildzähler rechts auf derselben Linie */
.dz-gallery[data-mode="carousel"] .carousel-count {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  bottom: auto !important;
  margin-top: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #FFF8CC !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* Standard: schwarzer Karussellhintergrund */
.dz-gallery[data-mode="carousel"],
.dz-gallery[data-mode="carousel"] figure {
  background-color: #000 !important;
}

/* Nur Querformat: Anthrazit */
.dz-gallery[data-mode="carousel"]:has(
  figure.is-active img[data-orientation="landscape"]
),
.dz-gallery[data-mode="carousel"] figure:has(
  img[data-orientation="landscape"]
) {
  background-color: #181818 !important;
}

/* Hochformat: Schwarz */
.dz-gallery[data-mode="carousel"]:has(
  figure.is-active img[data-orientation="portrait"]
),
.dz-gallery[data-mode="carousel"] figure:has(
  img[data-orientation="portrait"]
) {
  background-color: #000 !important;
}