.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#DC0000;--e-global-color-text:#000000;--e-global-color-accent:#DC0000;--e-global-color-620ca0b:#FFFFFF;--e-global-color-9ba5374:#F7F7F7;--e-global-color-121bcde:#353535;--e-global-color-b017e38:#606792B3;--e-global-typography-primary-font-family:"NN Medien";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.5;--e-global-typography-secondary-font-family:"NN Medien";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.5;--e-global-typography-text-font-family:"NN Medien";--e-global-typography-text-font-size:24px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6;--e-global-typography-accent-font-family:"NN Medien";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.5;--e-global-typography-8966373-font-family:"NN Medien";--e-global-typography-8966373-font-size:24px;--e-global-typography-8966373-line-height:1.5;--e-global-typography-b61de18-font-family:"NN Medien";--e-global-typography-b61de18-font-size:16px;--e-global-typography-b61de18-line-height:1.5;--e-global-typography-63172d2-font-family:"NN Medien";--e-global-typography-63172d2-font-size:25px;--e-global-typography-63172d2-line-height:1.3;--e-global-typography-6241dc6-font-family:"NN Medien";--e-global-typography-6241dc6-font-size:50px;--e-global-typography-6241dc6-line-height:1.5;color:#000000;font-family:"NN Medien", Sans-serif;font-size:24px;line-height:1.6;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:20px;font-weight:400;line-height:1.5;color:var( --e-global-color-620ca0b );border-radius:0px 0px 0px 0px;padding:11px 19px 11px 19px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-kit-6 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:24px;font-weight:400;line-height:1.5;}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:24px;font-weight:400;line-height:1.5;}.elementor-kit-6 h3{color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:24px;font-weight:400;line-height:1.5;}.elementor-kit-6 h4{color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:24px;font-weight:400;line-height:1.5;}.elementor-kit-6 h5{color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:24px;font-weight:400;line-height:1.5;}.elementor-kit-6 h6{color:var( --e-global-color-primary );font-family:"NN Medien", Sans-serif;font-size:24px;font-weight:400;line-height:1.5;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:20px;--e-global-typography-secondary-font-size:20px;--e-global-typography-text-font-size:16px;--e-global-typography-8966373-font-size:20px;--e-global-typography-63172d2-font-size:20px;--e-global-typography-6241dc6-font-size:20px;font-size:16px;}.elementor-kit-6 h1{font-size:20px;}.elementor-kit-6 h2{font-size:20px;}.elementor-kit-6 h3{font-size:20px;}.elementor-kit-6 h4{font-size:20px;}.elementor-kit-6 h5{font-size:20px;}.elementor-kit-6 h6{font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-8966373-font-size:16px;--e-global-typography-63172d2-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================
   Gestaltungsbüro Hersberger – Kit-CSS
   Reihenfolge: 1 Off-Canvas-Basis (Wissensbasis 7.1), 2 Header,
   3 Footer, 4 Startseite, 5 Projekt-Kacheln, 6 Projekt-Einzelseiten,
   7 Bildunterschriften, 8 Text-Bild-Zeilen, 9 Spalten-Slider
   ========================================================== */

/* === 1. Animierter Burger-Trigger für Off-Canvas === */

/* Trigger über das Off-Canvas heben (Elementor: z-index 2147483630) */
.oc-trigger {
  position: relative;
  z-index: 2147483640;
}

.oc-trigger .elementor-icon-wrapper {
  line-height: 0;
}

.oc-trigger .elementor-icon {
  --oc-tap: 44px;
  --oc-width: 26px;
  --oc-bar: 2px;
  --oc-gap: 8px;
  position: relative;
  display: inline-block;
  width: var(--oc-tap);
  height: var(--oc-tap);
  padding: 0;
  font-size: 0;
  line-height: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--oc-width) var(--oc-bar);
  transition: background-size 0.2s ease, color 0.2s ease;
}

.oc-trigger .elementor-icon svg,
.oc-trigger .elementor-icon i {
  display: none;
}

.oc-trigger .elementor-icon::before,
.oc-trigger .elementor-icon::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--oc-width) / 2);
  width: var(--oc-width);
  height: var(--oc-bar);
  background-color: currentColor;
  transition: transform 0.3s ease, top 0.3s ease;
}

.oc-trigger .elementor-icon::before {
  top: calc(50% - var(--oc-bar) / 2 - var(--oc-gap));
}

.oc-trigger .elementor-icon::after {
  top: calc(50% - var(--oc-bar) / 2 + var(--oc-gap));
}

/* Zustand: Panel offen → X */
.oc-trigger.is-open .elementor-icon {
  background-size: 0 var(--oc-bar);
}

.oc-trigger.is-open .elementor-icon::before {
  top: calc(50% - var(--oc-bar) / 2);
  transform: rotate(45deg);
}

.oc-trigger.is-open .elementor-icon::after {
  top: calc(50% - var(--oc-bar) / 2);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .oc-trigger .elementor-icon,
  .oc-trigger .elementor-icon::before,
  .oc-trigger .elementor-icon::after {
    transition: none;
  }
}

/* Off-Canvas: Panel auf die sichtbare Höhe begrenzen (mobile Browser-Leiste) */
body .elementor-widget-off-canvas .e-off-canvas__content {
  max-height: 100%;
}

/* Overlay sanft ein-/ausblenden (synchron zur Panel-Animation) */
@keyframes oc-overlay-in {
  from { opacity: 0; }
  to   { opacity: var(--e-off-canvas-overlay-opacity, 1); }
}

@keyframes oc-overlay-out {
  from { opacity: var(--e-off-canvas-overlay-opacity, 1); }
  to   { opacity: 0; }
}

body .elementor-widget-off-canvas .e-off-canvas[aria-hidden="false"] .e-off-canvas__overlay {
  animation: oc-overlay-in var(--e-off-canvas-animation-duration-minimum, 0.5s) ease both;
}

body .animated-reverse-wrapper .e-off-canvas__overlay {
  animation: oc-overlay-out var(--e-off-canvas-animation-duration-minimum, 0.5s) ease both !important;
}

@media (prefers-reduced-motion: reduce) {
  body .elementor-widget-off-canvas .e-off-canvas[aria-hidden="false"] .e-off-canvas__overlay,
  body .animated-reverse-wrapper .e-off-canvas__overlay {
    animation: none !important;
  }
}


/* === 2. Header === */

/* Hauptmenü: außen ohne Innenabstand, wie alte Site (Spezifität > Template-CSS) */
body .elementor-widget-nav-menu.header-nav .elementor-nav-menu--main li:first-child .elementor-item {
  padding-left: 0;
}

body .elementor-widget-nav-menu.header-nav .elementor-nav-menu--main li:last-child .elementor-item {
  padding-right: 0;
}

/* Textmarke: "Hersberger" im Bold-Schnitt */
.header-brand strong {
  font-weight: 700;
}

/* Burger-Maße wie alte Site: 40px breit, 3px stark, 7px Luft */
.oc-trigger .elementor-icon {
  --oc-width: 40px;
  --oc-bar: 3px;
  --oc-gap: 10px;
}


/* === 3. Footer === */

/* Links im Footer-Text rot (Mailto), Hover ohne Änderung */
body .elementor-widget-text-editor.footer-text a,
body .elementor-widget-text-editor.footer-text a:hover {
  color: #dc0000;
  text-decoration: none;
}

/* Footer-Menü: Trennstriche wie alte Site */
body .elementor-widget-nav-menu.footer-nav .elementor-nav-menu--main li {
  margin: 0 10px 0 0;
}

body .elementor-widget-nav-menu.footer-nav .elementor-nav-menu--main li .elementor-item::after {
  content: "|";
  margin-left: 10px;
  color: #000;
}

body .elementor-widget-nav-menu.footer-nav .elementor-nav-menu--main li:last-child {
  margin-right: 0;
}

body .elementor-widget-nav-menu.footer-nav .elementor-nav-menu--main li:last-child .elementor-item::after {
  content: none;
}


/* === 4. Startseite === */

/* Slider: Pfeile wie alte Site, ohne Hintergrund */
body .start-slider .elementor-swiper-button {
  background: none;
}

/* === 5. Projekt-Kacheln (Loop-Item) === */

/* Kachel: festes Seitenverhältnis 3:2, Bild als Hintergrund (cover) */
body .projekt-kachel {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Overlay erst bei Hover */
body .projekt-kachel .kachel-overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
}

body .projekt-kachel:hover .kachel-overlay,
body .projekt-kachel:focus-within .kachel-overlay {
  opacity: 1;
}

/* Titel: Bold-Schnitt */
body .kachel-titel .elementor-heading-title {
  font-weight: 700;
}


/* === 6. Projekt-Einzelseiten === */

/* Beitragsinhalt (Gutenberg-HTML aus dem Import): Abstände wie alte Site */
body .projekt-inhalt h1,
body .projekt-inhalt h2,
body .projekt-inhalt h3 {
  margin: 0 0 20px 0;
}

body .projekt-inhalt p {
  margin: 0 0 20px 0;
}

body .projekt-inhalt figure.wp-block-image,
body .projekt-inhalt .wp-block-columns,
body .projekt-inhalt .wp-block-video {
  margin: 0 0 20px 0;
}

body .projekt-inhalt figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

body .projekt-inhalt figcaption {
  margin: 15px 0 0 0;
  font-size: 16px;
}

body .projekt-inhalt .wp-block-columns {
  gap: 20px;
}

body .projekt-inhalt .wp-block-column:last-child p:last-child {
  margin-bottom: 0;
}

/* Beitragsnavigation: keine Versalien, Schrift wie Fließtext */
body .projekt-nav .post-navigation__prev--label,
body .projekt-nav .post-navigation__next--label {
  text-transform: none;
  letter-spacing: 0;
}

body .projekt-nav .post-navigation__arrow-wrapper {
  color: #000;
}


/* === 7. Bildunterschriften: Hello-Theme-Reset (figcaption kursiv) aufheben === */
body figcaption,
body .widget-image-caption,
body .projekt-inhalt figcaption,
body .seiten-text figcaption {
  font-style: normal;
}


/* === 8. Text-Bild-Zeilen: Bildoberkante auf Versalhöhe der ersten Textzeile === */

/* Versatz = (Zeilenhöhe − Versalhöhe) / 2 der ersten Textzeile.
   Werte am Gerät/DevTools feinjustieren.
   Deckt beide Container-Strukturen ab: Zeile > Spalte (Full Width)
   und Zeile > .e-con-inner > Spalte (Boxed). */
:root {
  --bild-offset: 8px;
  --bild-offset-tablet: 6px;
}

/* Zeile ohne Inner-Wrapper */
body .e-con:has(> .e-con > .elementor-widget-text-editor:first-child)
  > .e-con
  > :is(.elementor-widget-image, .elementor-widget-slides, .elementor-widget-video):first-child,
/* Zeile mit Inner-Wrapper (Boxed) */
body .e-con:has(> .e-con-inner > .e-con > .elementor-widget-text-editor:first-child)
  > .e-con-inner
  > .e-con
  > :is(.elementor-widget-image, .elementor-widget-slides, .elementor-widget-video):first-child {
  margin-top: var(--bild-offset);
}

@media (max-width: 1024px) {
  body .e-con:has(> .e-con > .elementor-widget-text-editor:first-child)
    > .e-con
    > :is(.elementor-widget-image, .elementor-widget-slides, .elementor-widget-video):first-child,
  body .e-con:has(> .e-con-inner > .e-con > .elementor-widget-text-editor:first-child)
    > .e-con-inner
    > .e-con
    > :is(.elementor-widget-image, .elementor-widget-slides, .elementor-widget-video):first-child {
    margin-top: var(--bild-offset-tablet);
  }
}

@media (max-width: 767px) {
  body .e-con:has(> .e-con > .elementor-widget-text-editor:first-child)
    > .e-con
    > :is(.elementor-widget-image, .elementor-widget-slides, .elementor-widget-video):first-child,
  body .e-con:has(> .e-con-inner > .e-con > .elementor-widget-text-editor:first-child)
    > .e-con-inner
    > .e-con
    > :is(.elementor-widget-image, .elementor-widget-slides, .elementor-widget-video):first-child {
    margin-top: 0;
  }
}


/* === 9. Spalten-Slider (Wir, Obendrein): Höhe über Seitenverhältnis statt Pixel === */

/* Verhältnis = Breite / Höhe der Nachbarbilder (alte Site: 1480 × 994).
   Überschreibt die Höhen-Einstellung des Slides-Widgets auf allen Breakpoints;
   Spezifität bewusst über dem Widget-CSS (post-<id>.css). */
:root {
  --slider-ratio: 1480 / 994;
}

body .elementor-widget-slides.spalten-slider .elementor-slides .swiper-slide.swiper-slide {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--slider-ratio);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'NN Medien';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://gestaltungsbuero-hersberger.de/wp-content/uploads/2026/10/nn_medien_regular-webfont.woff') format('woff');
}
@font-face {
	font-family: 'NN Medien';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://gestaltungsbuero-hersberger.de/wp-content/uploads/2026/10/nn_medien_bold-webfont.woff') format('woff');
}
@font-face {
	font-family: 'NN Medien';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://gestaltungsbuero-hersberger.de/wp-content/uploads/2026/10/nn_medien_italic-webfont.woff') format('woff');
}
@font-face {
	font-family: 'NN Medien';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('https://gestaltungsbuero-hersberger.de/wp-content/uploads/2026/10/nn_medien_bold_italic-webfont.woff') format('woff');
}
/* End Custom Fonts CSS */