/* 
Theme Name: koehler-film.de Child Theme  
Theme URI: https://www.difool.de/ 
Description: difool.design Theme 
Author: Difool
Author URI: https://www.difool.de/
Template: hueman
Version: 1.0.0
*/
/*
#606060
#970007

#004389
focus #62ba46
focus dark-mode #ef07f7

*/

@font-face {
	font-display: swap;
  font-family: 'Mulish'; /* Name der Schriftart */
  src: url('fonts/Mulish-VariableFont_wght.ttf') format('truetype'); /* Pfad zur Datei */
  font-weight: normal;
  font-style: normal;
  }
@font-face {
font-display: swap;
  font-family: 'Jost'; /* Name der Schriftart */
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype'); /* Pfad zur Datei */
  font-weight: normal;
  font-style: normal;
  }


html { background: #616f34; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;    min-height: 100%; display: grid; }
body { font-family: 'Mulish', 'Jost', sans-serif; font-weight: 400; color: #222; background-color: #616f34; }
.boxed #wrapper { height: fit-content; }

#header { background-color: transparent; }
.central-header-zone { background: #fff; }
.logged_in_note { display: flex; justify-content: end; color: red; bottom: -.8em; position: absolute; width: 100px; right: 0; font-size: 1.6em; }

h1, h2, h3, h4, h5, h6 { color: #004389; }

.page-title h1 { font-size: 10.8px; bottom: -10px; position: relative; }
.entry h2 { font-size: 28.25px; }
.site-title a img { height: 80px; }

[aria-current]:not([aria-current="false"]) { color: #fff; text-decoration: underline; }
/*a[aria-current]:not([aria-current="false"]) { background-color: transparent; height: 65px; background-image: url('images/logo_play.png'); background-position: bottom center; background-size: 20px auto; background-repeat: no-repeat; }*/
/*nav ul li.current_page_item { background-color: transparent; height: 65px; background-image: url('images/logo_play.png'); background-position: bottom center; background-size: 20px auto; background-repeat: no-repeat; }*/

.current_page_item { position: relative; /* Ermöglicht absolute Positionierung des Icons */}
.current_page_item > a::before, .current_page_parent > a::before { /* Oder :after, je nach Wahl */
content: ''; position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background-image: url('images/logo_play.png'); background-size: contain; background-repeat: no-repeat; }

.sub-menu .current_page_item > a::before { top: .9em; left: 47px; position: relative; float: right; }

#header-widgets { text-align: center; /*top: 5px;*/ position: relative; }
#header-widgets img { filter: saturate(75%); float: right; width: 120px;        padding: 2px; margin-bottom: 1em; }
/* #header-widgets .textwidget.custom-html-widget a { display: block; height: 70px; padding: 4px; /* focus */ } */

/* focus #62ba46 */
*:focus:not(:focus-visible) { outline: none }
#header-widgets .textwidget.custom-html-widget { width: 150px; float: right; }
#header-widgets .textwidget.custom-html-widget a:focus-visible { outline: none; }
#header-widgets .textwidget.custom-html-widget a:focus-visible img { outline: 2px solid #62ba46; outline-offset: 2px; }
#header-widgets h1 { float: right; margin-top: -5px; padding-right: .3em; }
#header-widgets .mk-head { /*margin-top: -5px;*/     width: 112px; margin-bottom: .4em; }
.page-id-8 #header-widgets img.mk-data { width: 64px; padding-right: 1.8em; margin-bottom: .4em; }
.page-id-44 #header-widgets img.mk-data { width: 64px; padding-right: 2.2em; margin-bottom: .4em; }
.page-title { display: none; }

#crumbs { top: 3.7em; position: relative; color: #004389; font-family: 'Mulish', 'Jost', sans-serif; } /* ohne header-widgets */
#crumbs::before { content:'#'; font-weight: 500; display: inline-block; }
.home #crumbs::before { padding-right: .2rem; }

/* #crumbs { margin-top: -10px; color: #004389; } */ /* mit header-widgets */
/* #crumbs a { font-weight: 500;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE1MCAxMDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8cGF0aCBkPSJNMTYsMEwxMDAsMEw4NCwxMDBMMCwxMDBMMTYsMFoiIHN0eWxlPSJmaWxsOnJnYigxMDYsMTg2LDIzMCk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+Cjwvc3ZnPgo=) center top / auto 1.5rem space no-repeat padding-box, #6abae6 content-box;
    box-decoration-break: clone;
    color: white;
    display: inline;
    padding: 0px 2ch 0px 1ch;
    margin-right: -1ch; } */ /* rgb(106, 186, 230) #6abae6 --- #fff181 */
/*
#crumbs a:hover { color: #fff181; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE1MCAxMDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8cGF0aCBkPSJNMTYsMEwxMDAsMEw4NCwxMDBMMCwxMDBMMTYsMFoiIHN0eWxlPSJmaWxsOnJnYigwLDY3LDEzNyk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+Cjwvc3ZnPgo=) center top / auto 1.5rem space no-repeat padding-box, #004389 content-box; box-decoration-break: clone; }
*/

.dark-mode #crumbs a { color: #004389; }
.dark-mode #crumbs a:hover { color: #004; }
.dark-mode #crumbs a:focus { color: #004; outline: 2px solid #ef07f7; outline-offset: 2px; }

.dark-mode #nav-header .nav li a:focus { color: #004; background: #f0f8ffb3; }

/* transparent content background */
.boxed #page { background-color: rgba(255, 255, 255, 0.6); }
#page .container-inner { background: transparent; }
div.main { background-color: transparent !important; }
#footer { background: transparent; }
#footer-bottom { background-color: rgba(255, 255, 255, 0.6); }


.entry .row .col > h2 { font-size: 27.25px !important; font-weight: 500; letter-spacing: -.2px; color: #004389; padding-top: .3em; }
.entry .row .col > h3 { font-size: 19.25px !important; font-weight: 500; letter-spacing: -.2px; color: #004389; padding-top: .3em; }

.entry p { font-size: .96em; /*16px*/ line-height: 1.6em; }
.entry b { font-weight: 500; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTAgMTAwIiBmaWxsPSIjZmZmMTgxIj4KICA8cG9seWdvbiBwb2ludHM9IjE2LDAgMTAwLDAgODQsMTAwLCAwLDEwMCIgLz4KPC9zdmc+Cg==") center top / auto 1.5rem space no-repeat padding-box, rgb(255, 241, 129) content-box; box-decoration-break: clone; -webkit-box-decoration-break: clone; color: black; display: inline; padding: 0px 2ch 0px 1ch; margin-right: -1ch; }
.read-more { float: right; margin-left: auto; margin-top: auto; width: 100px; bottom: -20px; position: relative; right: 0px; }
.read-more:focus-visible {  }
space { display: block; margin: .5em 0; }
.entry blockquote, .entry blockquote::before { color: #004389; }


/* start flex grid */

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25em), 1fr)); padding:1rem; }
.entry .col { display: inline-flex; flex-direction: column; margin: 0.8em; background: #fff; padding: .6em .8em; }


/* start */
.grid_1   { flex-basis: 44.1%; }
.grid_1 p { margin-bottom: .4em; }
.grid_1 img { flex-shrink: 0; min-width: 100%; min-height: 100%; }

div[class*='grid_'] img:first-child { flex-shrink: 0; min-width: 100%; min-height: 100%; }
div[class*='grid_'] .wp-caption img:first-child { min-height: auto; }
.entry .wp-caption-text { color: #004389; margin-top: -16px; }

/* weisse raender deaktivieren
.home .entry .col:nth-child(2).grid_1 { padding: 0; }
.home .entry .col:nth-child(3).grid_1 { padding: 0; margin: 0.9em; }

.entry .col:nth-child(2).grid_2 { padding: 0; }
.entry .col:nth-child(3).grid_2 { padding: 0; margin: 0.9em; }
.entry .col.grid_2 img { flex-shrink: 0; min-width: 100%; min-height: 100%; }

.entry .col:nth-child(2).grid_3 { padding: 0; }
.entry .col:nth-child(3).grid_3 { padding: 0; margin: 0.9em; }
.entry .col.grid_3 img { flex-shrink: 0; min-width: 100%; min-height: 100%; }
*/

/* Themen --- von a bis z */ /* <span class="abstand abisz">&nbsp;</span> */
/* span.abstand { padding-top: .3em; font-size: 27.25px !important; font-weight: bold; margin-bottom: 14px; line-height: 1.3em; } */

/* span.abstand.abisz */
.page-id-57 .col.grid_3:nth-child(2) span { padding-top: 5.2em; }
/* span.abstand.tech */
.page-id-63 .col.grid_4:nth-child(2) span { padding-top: 3.2em; }
/* span.abstand.kunstoderhandwerk */
.page-id-71 .col.grid_4:nth-child(2) span { padding-top: 3.6em; }

/* end flex grid */

/* imprint & datenschutz */
.page-id-44 .entry { background: #fff; padding: 1em; margin-top: 2em; }
.privacy-policy .entry { background: #fff; padding: 1em; margin-top: 2em; }


/*** video files responsive ***/
.wp-video { width: 34em !important; display: inline-flex; }
.mejs-container { width: 100% !important; height: auto !important; padding-top: 56.25%; }
.mejs-overlay, .mejs-poster { width: 100% !important; height: 100% !important; }
.mejs-mediaelement video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; }
/*** subtitles input styles ***/
.themeform label.mejs-captions-selector-label { font-size: 1em; font-weight: 600; color: #fff181; padding: 5px 3px 0 3px; }
.themeform .mejs-captions-selector-input,
.themeform .mejs-chapters-selector-input { left: 5px; margin: 5px 3px 0 3px; }
.dark-mode img.mejs-poster-img { filter: invert(100%) hue-rotate(180deg) !important; }
.dark-mode .mejs-poster.mejs-layer { filter: invert(100%) hue-rotate(180deg) !important; }



/* impressum */
.difooldesign span:nth-child(2) { color: #606060; padding-left: .3em; }
.difooldesign span:nth-child(3) { color: #970007; }
article .entry a.webdesign { font-family: 'Jost'; text-decoration: none; padding: 0px 2ch 0px 1ch; }
article .entry a.webdesign:hover { font-weight: 500; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTAgMTAwIiBmaWxsPSIjZmZmMTgxIj4KICA8cG9seWdvbiBwb2ludHM9IjE2LDAgMTAwLDAgODQsMTAwLCAwLDEwMCIgLz4KPC9zdmc+Cg==") center top / auto 1.5rem space no-repeat padding-box, rgb(255, 241, 129) content-box; box-decoration-break: clone; color: black; display: inline; padding: 0px 2ch 0px 1ch; margin-right: -1ch; }
.fa-adjust::before { content: "\f042"; color: #970007; }

.impressum_mail { height: 1.1em !important; width: auto; bottom: -4.5px; position: relative; }

#footer-bottom #copyright, #footer-bottom #credit { color: #000; }

#footer-bottom #back-to-top { background: transparent; }
#footer-bottom #back-to-top i.fa-angle-up::before { filter: grayscale(1) brightness(120%); }

.fa-wordpress::before { content: url('images/no-cookies.webp') !important; width: 35px; height: 35px; display: flex; margin-top: -35px; filter: grayscale(1) brightness(120%); }
.fa-wordpress:hover::before { filter: sepia(0); }
.fa-wordpress:focus { outline: 2px solid #ef07f7; outline-offset: 2px; display: block; padding-right: 8px; margin-right: -8px; }
.fa-wordpress:focus-visible { outline: 2px solid #ef07f7; outline-offset: 2px; display: block; padding-right: 8px; margin-right: -8px; }
.dark-mode .fa-wordpress::before { filter: hue-rotate(190deg) saturate(0.5) contrast(1.1); }
.dark-mode .fa-wordpress:hover::before { filter: contrast(100%); }

/*******************************************************************
darkmode start // #dark-mode-floating-button.desktop.mobile
********************************************************************/
/*** dark mode toggle ***/
.btn-toggle { color: inherit; background: none; border-radius: 6px; font-size: 1.00rem; float: right; }
.dark-mode.btn-toggle { color: white; }
/* Container für den Floating Button */
#dark-mode-floating-button.desktop { float: right; margin: -.2em 0 0 1em; }

/* Styling für den Button selbst */
.btn-toggle-floating {
    background-color: #004389; /* Hintergrundfarbe im Light Mode */
    color: #FFFFFF;           /* Text-/Icon-Farbe im Light Mode */
    border: none;
    border-radius: 50%;       /* Macht ihn rund */
    width: 30px;              /* Breite des Buttons */
    height: 30px;             /* Höhe des Buttons */
    font-size: 1.1em;          /* Größe des Sonnen-/Mond-Symbols */
    display: flex;            /* Für Zentrierung des Symbols */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Kleiner Schatten für Tiefe */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Sanfte Übergänge */
}
.btn-toggle-floating:hover { filter: brightness(1.5) !important; }
@media only screen and (max-width: 719px) {
/* #dark-mode-floating-button.mobile { left: auto; right: 80px; top: 0px; z-index: 99; } */
#footer-bottom .one-half.last { margin: .5em 0 0 0; justify-content: center; display: flex; width: 100%; }
    #footer-bottom .social-links { float: none; width: 40px; }
#dark-mode-floating-button.mobile { top: 0px; z-index: 99; float: none; position: relative; width: 50px; left: -5px; }

#dark-mode-floating-button { top: 10px; left: 10px; position: absolute; }
}

/* Anpassungen im Dark Mode */
body.dark-mode #dark-mode-floating-button .btn-toggle-floating { background-color: #3c6188; color: #efefef; /*filter: hue-rotate(360deg) invert(1);*/ }

/* end dark-mode html */

/* Basis-Filter für den gesamten Body, wenn Dark Mode aktiv ist */
body.dark-mode { background-blend-mode: darken; backdrop-filter: brightness(60%) sepia(10%) invert(1); background-color: #fefefe; color: #15151a; background-size: cover; }
.dark-mode { filter: invert(100%) hue-rotate(180deg); }
/* Elemente, die auch invertiert werden sollen, wenn Dark Mode aktiv ist */

.dark-mode .site-title img { filter: invert(0%) hue-rotate(0deg); }
.dark-mode #header-widgets .textwidget.custom-html-widget img { filter: invert(100%) hue-rotate(180deg); }

.dark-mode img,
.dark-mode video,
.dark-mode iframe,
.dark-mode svg { filter: invert(100%) hue-rotate(180deg); }
/* Spezifische Regeln für den Dark Mode */
.dark-mode video:fullscreen { filter: none; }
.dark-mode .icon { filter: invert(15%) hue-rotate(180deg); }
.dark-mode pre { filter: invert(6%); }
.dark-mode li::marker { color: #666;  }
.dark-mode h1, h2, h3, h4, h5, h6 { color: #222; }
.dark-mode .impressum_mail { filter: invert(0%) hue-rotate(0deg); }
.dark-mode .entry b { filter: invert(1); background: none; color: #8bceff; padding: 0 1ch 0 0; }
.dark-mode article .entry a.webdesign * { filter: invert(100%) hue-rotate(180deg) brightness(0); }
.dark-mode article .entry a.webdesign:hover { filter: invert(1); }

.dark-mode a:focus {
  outline: 2px solid #ef07f7;
  outline-offset: 2px;
  /*padding: 3px;*/
}

.dark-mode button:focus {
  outline: 2px solid #ef07f7;
  outline-offset: 2px;
  background-color: rgba(187, 134, 252, 0.2);
  /*padding: 3px;*/
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
  outline: 2px solid #ef07f7;
  outline-offset: 2px;
  background-color: rgba(187, 134, 252, 0.2);
  /*padding: 3px;*/
}

.dark-mode .sidebar a:focus { border-radius: 16px; }
.dark-mode .sidebar button:focus { border-radius: 16px; }
.dark-mode .sidebar input:focus,
.dark-mode .sidebar select:focus,
.dark-mode .sidebar textarea:focus { border-radius: 16px; }

.dark-mode .wp-video:focus-visible, .dark-mode #mep_0:focus-visible, .dark-mode .mejs-mediaelement:focus-visible { outline: none; }
.dark-mode video:focus-visible, .dark-mode .mejs-overlay:focus-visible, .dark-mode .mejs-layers *:focus-visible, .dark-mode .mejs-button > button:focus-visible, .dark-mode .mejs-time-slider:focus-visible { 
	outline: 2px solid #ef07f7;
  outline-offset: 2px;
  background-color: rgba(187, 134, 252, 0.2); }

/* end dark-mode html */

/*******************************************************************
darkmode end
********************************************************************/



/*******************************************************************
responsive
********************************************************************/
@media only screen and (max-width: 479px) {
.content { min-height: 80vh; }    
}

@media only screen and (max-width: 719px) {
#header #nav-mobile { background-color: #fff; box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.4); }
.nav-wrap.container.submenu-click-expand.expanded, .nav-wrap.container.expanded { background-color: #004389; }
.ham__navbar-toggler-two { filter: invert(1); }
#header .mobile-title-logo-in-header .site-title a img { filter: invert(0%) hue-rotate(0deg); }
body { background: url('/wp-content/uploads/2025/08/koehler_hintergrundbild_reichstag.jpg') no-repeat center top, linear-gradient(0deg,rgba(97, 111, 52, 1) 70%, rgba(86, 149, 193, 1) 100%); background-size: contain; background-position-y: 10%; }

#header .nav-container .nav li.current-menu-item > a, #header .nav-container .nav li.current-post-parent > a, #header .nav-container .nav li.current_page_item > a { color: #004188; background: #ededed; font-weight: bold; }
#nav-mobile .nav li.current_page_item > a::before, .current_page_parent > a::before { content: ''; position: absolute;transform: translateX(-50%); width: 20px; height: 20px; background-image: url('images/logo_play.png'); background-size: contain; background-repeat: no-repeat; top: 10px; left: 94%; }
#nav-mobile .nav .sub-menu li.current_page_item > a::before { top: 8px; }

.home .entry .row .col.grid_1:nth-child(1) { order: 2; }
.home .entry .row .col.grid_1:nth-child(2) { order: 1; }
.home .entry .row .col.grid_1:nth-child(3) { order: 3; }
.home .entry .row .col.grid_1:nth-child(4) { order: 4; }

}

@media only screen and (device-width:768px) and (orientation:portrait) {
.row { display: grid; grid-template-columns: 1fr; padding: 0; }
.entry .col { width: 65%; margin: .8em 0; }
}

@media only screen and (max-width: 768px) {
.row { display: flex; flex-direction: column; padding: 0; }
.entry .row .col.grid_2:nth-child(2) h2 { height: .01em; }
.grid_1 img { width: 100%; }
.wp-video { width: 100% !important; display: inline-flex; }
.read-more { bottom: -10px; right: -25px; }
/* span.abstand.abisz */
.page-id-57 .col.grid_3:nth-child(2) span { padding-top: 1.2em; }
/* span.abstand.tech */
.page-id-63 .col.grid_4:nth-child(2) span { padding-top: 1.2em; }
/* span.abstand.kunstoderhandwerk */
.page-id-71 .col.grid_4:nth-child(2) span { padding-top: 1.2em; }
}
@media only screen and (max-width: 927px) {
.row { display: flex; flex-direction: column; padding: 0; }
.entry .row .col.grid_2:nth-child(2) h2 { height: .01em; }
.grid_1 img { width: 100%; }
.wp-video { width: 100% !important; display: inline-flex; }
/* span.abstand.abisz */
.page-id-57 .col.grid_3:nth-child(2) span { padding-top: 1.2em; }
/* span.abstand.tech */
.page-id-63 .col.grid_4:nth-child(2) span { padding-top: 1.2em; }
/* span.abstand.kunstoderhandwerk */
.page-id-71 .col.grid_4:nth-child(2) span { padding-top: 1.2em; }
}


@media only screen and (max-width: 800px) {
.row { display: grid; grid-template-columns: 1fr; padding: 0; }
.grid_1 img { width: 100%; }
.wp-video { width: 100% !important; display: inline-flex; }
}
@media only screen and (max-width: 810px) {
.row { display: grid; grid-template-columns: 1fr; padding: 0; }
.grid_1 img { width: 100%; }
.wp-video { width: 100% !important; display: inline-flex; }
}