/*
Theme Name: Customify Child
Theme URI: https://fernklang.de
Description: Child-Theme für Customify
Author: Deniz Tutkan
Template: customify
Version: 1.0
*/



/* Hintergrundfarbe der Website mit Farbverlauf */
body {
  background: linear-gradient(to bottom, #1c3350, #0d0f12) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
}

/* In der Kontakt-Bestätigung-Seite den Header ausblenden  */
body.page-id-38 #header, 
body.page-id-38 .builder-header-html-item, 
body.page-id-38 .customify-builder-btn, 
body.page-id-38 .site-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* In der Kommentar-fehlgeschlagen-Seite den Header ausblenden  */
body.page-id-2594 #header, 
body.page-id-2594 .builder-header-html-item, 
body.page-id-2594 .customify-builder-btn, 
body.page-id-2594 .site-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

body .jetpack-likes-widget-wrapper {
    margin-top: 70px !important;
}

/* „Beitragsautor“ leserlich machen (Kommentarbereich) */
.comment-author span {
    background: transparent !important;
    color: yellow !important;
}



/* Standard-Trennlinien entfernen */
.entry-inner, 
.entry-article-part, 
.entry-article-footer {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
    background: none !important;
}



/* Eigene Trennlinie unter Beiträgen */
.entry-inner::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
rgba(200, 200, 200, 0),
    rgba(200, 200, 200, 0.3),
    rgba(200, 200, 200, 0)
  );
  margin-top: 30px;
}




.home #main.content-area { padding-top: 0; }
.home .entry-content > .alignfull:first-child { margin-top: 0; }

.entry-meta * { display: none; }

.page .jetpack-likes-widget-wrapper { display: none !important; }

/* Kommentarbereich: Labels */
#comments label {
    color: darkorange !important;
    font-weight: bold !important;
}

/* Kommentarbereich: Felder */
.comment-form input,
.comment-form textarea {
    background-color: #2a3745 !important;
    color: #ffffff !important;
    border: 1px solid #3a4755;
    padding: 10px;
    border-radius: 5px;
}
.comment-form input:focus,
.comment-form textarea:focus {
    background-color: #354555 !important;
    border-color: black;
}



/* WPForms – Feldlabels */
.wpforms-field-label {}
.wpforms-field-label { color: #FF8C00 !important; }

/* wpform - Haupt-Container - der Rahmen, der erzeugt wird */
.wpforms-form {
    background: linear-gradient(to bottom, #1c242d) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 20px 15px !important;
    border: 2px solid #696969 !important;
    border-radius: 20px !important;
    box-shadow: 10px 6px 45px rgba(0, 0, 0, 1.5) !important; /* Schatteneffekt */
}


/* Widget ausblenden (mobile) */
@media (max-width: 768px) {
   #block-13 { display: none; }
}

/* Audio-Element Styling – Kommentar geschlossen & gültige Farben/Werte */
audio {
    background-color: #2292cc; /* Dunkler Hintergrund (ehem. Hinweis: #25292c) */
    border: 1px solid #9F6347; /* Rahmenfarbe */
    border-radius: 12px;       /* Abgerundete Ecken */
    padding: 5px;              /* Innenabstand */
}

/* Suche */
.header-search_modal-wrapper,
.header-search_modal { width: 100%; }
.header-search-form .search-field {
    width: calc(100% - 40px);
    padding: 10px;
    border-radius: 8px;
}

/* Header-Button-Container Feinausrichtung */
.item--inner.builder-item--button { margin-left: -2px; }
.item--inner.builder-item--button { position: relative; left: 18px; }

/* Layoutbreiten (≥ 992px) */
@media (min-width: 992px) {
    .sidebar-primary {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
    /* Breite des Hauptinhalts/Textes */
    .content-area {
        flex: 0 0 90% !important;
        max-width: 85% !important;
    }
}

/* Maximalbreite Content + Zentrierung */
.content-area {
    max-width: 650px;
    margin: 0 auto;
    text-align: left;
}


/* Inhalt des Footers zentrieren */
.site-footer {
    text-align: center !important;
}


/* Vollbreite-Bilder (Mobil) */
@media only screen and (max-width: 768px) {
    .entry-content-data img,
    .entry-content-data figure,
    .entry-content-data .wp-block-image {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}



/* Sidebar (Mobil) ausblenden */
@media screen and (max-width: 768px) {
  #sidebar-primary, 
  .sidebar-primary-inner, 
  #block-8 {
    display: none;
  }
}



/* Block-Editor: Plain Text */
textarea.block-editor-plain-text {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

/* Icons Hover */
a img { transition: transform 0.1s ease, opacity 0.1s ease; }
a:hover img { transform: scale(1.15); }







/* PAGINATION, Nummerierung 1,2,3... Weiter, Größe, Ecken abrunden etc., mit Hover */
:where(#main,.site-main,.content-area) .navigation.pagination .page-numbers{
  border-radius:7px;
  padding:6px 12px;
  font-size:15px;
  transition: transform 1.05s cubic-bezier(.22,.55,.1,1);
  will-change: transform;
}
:where(#main,.site-main,.content-area) .navigation.pagination .page-numbers:hover{
  transform: scale(1.15);
}









/* Code für Datum der jeweiligen Beiträge */
.entry-excerpt sub,
.entry-content sub, /* Falls sub in Beitragstexten vorkommt */
.page-content sub, /* Falls sub in statischen Seiten vorkommt */
.site-content sub { /* Falls eine allgemeinere Klasse nötig ist */
  display: inline-block;
  font-size: 11.5px;
  color: #ffffff;
  background: rgba(105, 55, 75, 0.7);
  padding: 4px 8px;
  border-radius: 5px;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.entry-excerpt sub:hover,
.entry-content sub:hover,
.page-content sub:hover,
.site-content sub:hover {
  transform: scale(1.05);
  background-color: rgba(20, 114, 214, 0.6);
  color: #fff;
}

/* <hr>-Styling (Beiträge & Seiten) */ 
hr, 
.single hr, 
.page hr { 
 border: none; 
 height: 2px; 
 background: linear-gradient(to right, rgba(255, 213, 135, 0), rgba(155, 123, 175, 0.7), rgba(255, 213, 135, 0)); 
 margin-top: 5px; 
 margin-bottom: 10px; 
}


/* Jetpack „Gefällt mir“-Titel entfernen */
h3.sd-title { display: none !important; }

/* Bilder: Schatten + Hover */
img { box-shadow: 7px 14px 18px rgba(0, 0, 0, 0.5); border-radius: 10px; }
img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
img:hover { transform: scale(1.02); box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.5); }


/* Header-Icons Größe (Desktop/Mobil) */
@media (min-width: 768px) {
  .builder-header-html-item img {
    width: 29px;
    height: auto;
    transition: transform 0.3s ease;
  }
}
@media (max-width: 767px) {
  .builder-header-html-item img {
    width: 28px;
    height: auto;
    transition: transform 0.3s ease;
  }
}

/* Kontakt-Button im Header */
a.item--button.customify-btn.customify-builder-btn {
    background-color: #192d60;   /* Hintergrundfarbe */
    color: #ffffff;              /* Textfarbe */
    border: 1px solid #8b8b8b;   /* Rahmenfarbe und -dicke */
    border-radius:12px;         /* Rundung der Ecken */
    padding: 8px 16px;           /* Innenabstand */
    transition: all 0.3s ease;   /* weicher Übergang bei Hover */
}
/* Hover-Effekt */
a.item--button.customify-btn.customify-builder-btn:hover {
    background-color: #7d0000;   /* Hintergrundfarbe beim Hover */
    color: #ffffff;              /* Textfarbe beim Hover */
    border-color: #8b8b8b;       /* Rahmenfarbe beim Hover */
}

/* Alle Seiten- und Beitragstitel ausblenden - Titel auf Seiten ausblenden */
.entry-title {
    display: none !important;
}

/* ===== Header Linie + dezenter anthrazit-blauer Verlauf des Headers (Desktop & Mobile) ===== */
/* Desktop */
@media screen and (min-width: 769px) {
    .header--row-inner {
        background: linear-gradient(
            90deg, 
            rgba(70, 70, 70, 0.1) 0%,     /* linkes Spektrum */
            rgba(30, 30, 30, 0.5) 100%   /* dunkler Abschluss */
        ) !important;
        border-top: 1px solid rgba(254, 254, 254, 0);
        border-bottom: 1px solid rgba(254, 254, 254, 0.5);
        padding: 0;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 2;
    }
}
/* Mobile */
@media screen and (max-width: 768px) {
    .header--row-inner {
        background: linear-gradient(
            90deg,
           rgba(70, 70, 70, 0.1) 0%,     /* linkes Spektrum */
    rgba(30, 30, 30, 0.5) 100%   /* dunkler Abschluss */
        ) !important;
        border-top: 1px solid rgba(254, 254, 254, 0);
        border-bottom: 1px solid rgba(254, 254, 254, 0.8);
        padding: 1px 0;
        border-radius: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 2;
    }
}

/* ===== Header Scroll-Effekt mit sanftem Gradient-Wechsel - beim Scrollen Header sanft verdunkeln ===== */
/* Basis */
.header--row-inner {
  position: relative;
  z-index: 1;
}
/* Unsichtbarer Gradient als Overlay */
.header--row-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 25, 40, 0.95) 0%,
    rgba(10, 10, 20, 0.98) 100%
  );
  opacity: 0; /* Start: unsichtbar */
  transition: opacity 1.9s ease; /* langsames Einblenden */
  z-index: 0; /* liegt direkt hinter den Inhalten */
}

/* Wenn gescrollt: Gradient sichtbar machen */
.site-header.scrolled .header--row-inner::before {
  opacity: 1;
}

/* ===== FIX: Blockierendes Overlay aus style.css für Mobile deaktivieren ===== */
@media (max-width: 768px) {
  .header-top.header--row::before,
  .cb-row--mobile::before {
    background: none !important;  /* damit der Scroll-Overlay sichtbar wird */
  }
}









/* Sicherstellen, dass Icons über dem Overlay liegen */
.builder-header-html-item img {
  position: relative;
  z-index: 2;
  display: inline-block;
}





/* ===== Farbe und Dicke der horizontalen Linie im Header (Desktop & Mobile) ===== */
@media screen and (min-width: 769px) {
    .header--row-inner {
        background-color: transparent !important; /* entfernt das Blau */
        border-bottom: 0.8px solid #979696 !important; /* frei wählbare Farbe */
        position: relative;
        z-index: 2; /* Linie über Overlay */
    }
}
@media screen and (max-width: 768px) {
    .header--row-inner {
        background-color: transparent !important; /* entfernt das Blau */
        border-bottom: 0.8px solid #979696 !important; /* frei wählbare Farbe */
        position: relative;
        z-index: 2; /* Linie über Overlay */
    }
}
/* Overlay bleibt hinten */
.header-top.header--row::before,
.cb-row--mobile::before {
    z-index: 0 !important;
}



/* === Menü Header bei Scroll fixieren === */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}







/* Weiterlesen: Schriftgröße */
.readmore-button { font-size: 8.5px !important; }

/* Einzelbeitrag: Fließtextgröße */
.single .entry-content {
    font-size: 17px;
    line-height: 1.8;
}

/* „Zurück zur Startseite“ – Stil */
.back-to-home a {
    font-weight: bold;
    color: darkorange;
    text-decoration: underline;
}
.back-to-home a:hover {
    color: #be0000;
    text-decoration: underline;
}



/* Icons auf Einzelbeitragsseiten ausblenden (nur Home-Icon bleibt) */
body.single .builder-header-html-item p a:not(:first-child) { display: none !important; }


/* Leeren Footerbereich zuverlässig entfernen */
html { height: auto !important; min-height: 100% !important; }
body { min-height: 100vh !important; }












/* FIX: Suchfeld nicht vom Header abschneiden */
.header-top.header--row,
.cb-row--mobile.header--row {
  overflow: visible !important;
}

/* Sicherheitshalber: Such-Modal über alles legen */
.header-search_modal-wrapper,
.header-search_modal {
  position: relative;
  z-index: 9999;
}

/* Optional: das Eingabefeld klar sichtbar machen */
.header-search-form .search-field {
  background: #1f2430;
  border: 1px solid #3a4755;
  color: #fff;
}



























/* 1) Such-Eingabefeld - Suchen, Suchfeld: immer dunkel, auch im Fokus */
.header-search-form .search-field,
.header-search-form .search-field:focus {
  background: #1f2430 !important;
  color: #ffffff !important;
  border: 1px solid #3a4755 !important;
  outline: none !important;
}
.header-search-form .search-field::placeholder {
  color: #b7c3d0 !important;
  opacity: 1;
}
/* Optional: Lesbarkeit der Markierung beim Tippen - Suchfeld */
.header-search-form .search-field::selection {
  background: #3a4755;
  color: #ffffff;
}
/* 2) Weißer Kasten um das Suchfeld entfernen */
.header-search_modal-wrapper,
.header-search_modal {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Falls das Theme das Formular selbst weiß hinterlegt: */
.header-search_modal .search-form,
.header-search_modal .header-search-form {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Button passend dunkel lassen */
.header-search-form .search-submit {
  background: #0e3a60 !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Den weißen Block des Suchformulars entfernen */
form.header-search-modal.header-search-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}



@media (min-width: 1024px) {
  /* Desktop: Seitenbreite (Header + Content + Footer) */
  body .site,
  body #page,
  body .page-wrapper,
  body .wrapper,
  body .layout-wrapper {
    max-width: 650px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Desktop: Textbreite (nur Fließtext-Bereich) */
  body .posts-layout .entry-content-data {
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}