/* ================================= */
/* ALLGEMEIN & HINTERGRÜNDE */
/* ================================= */

/* Header dunkler */
.site-header:after {
  background: rgba(0,0,0,0.25);
}

/* Cover Overlay */
.wp-block-cover__background {
  background-color: rgba(0,0,0, 0.1) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Checkbox */
input[type="checkbox"] {
  background-color: #FFFFFF;
}

body, p, h1, h2, h3, h4, h5, h6 {
    color: #e5e5e5 !important;
    opacity: 1 !important;
}


/* ==========================================
   TEXT-LINKS (Global)
   ========================================== */
a, a:link, a:visited {
    color: #eecc66 !important;
    text-decoration: none !important; /* Unterstreichung entfernt */
}

a:hover, a:active, a:focus {
    color: #ffd875 !important;
    text-decoration: underline !important; /* Unterstreichung nur beim Hovern */
}


/* ==========================================
   ELEMENTE AUSBLENDEN (Seitenende)
   ========================================== */
.related-posts,
.related_posts,
#jp-relatedposts,
.wp-block-jetpack-related-posts {
    display: none !important;
}

.post-navigation, .posts-navigation, nav.navigation.post-navigation {     
    display: none !important;
} 


/* ==========================================
   1. INHALTS-BLÖCKE (Dunkelgrau für Besucher)
   ========================================== */
:root {
    --wp--preset--color--2-d-5-5-7-a: #e5e5e5 !important;
    --wp--preset--color--2d557a: #e5e5e5 !important;
    --wp--preset--color--custom-2d557a: #e5e5e5 !important;
}

[style*="--wp--preset--color--2d557a"], 
[style*="background-color: #2d557a"], 
[style*="background-color:#2d557a"] {
    background-color: #656565 !important;
}

[class*="has-2d557a-color"],
[style*="color: #2d557a"], 
[style*="color:#2d557a"] {
    color: #e5e5e5 !important;
}

body:not(.wp-admin) .wp-block-group, 
body:not(.wp-admin) .wp-block-columns, 
body:not(.wp-admin) .wp-block-column,
body:not(.wp-admin) .has-background:not(input):not(button):not(.tnp-submit):not(.wp-block-button__link) {
    background-color: #656565 !important;
}

body:not(.wp-admin) .wp-block-group, 
body:not(.wp-admin) .wp-block-columns, 
body:not(.wp-admin) .wp-block-column {
    color: #e5e5e5 !important;
}


/* ==========================================
   2. NEWSLETTER BUTTON
   ========================================== */
input.tnp-submit,
input[type="submit"].tnp-submit,
.tnp-subscription input[type="submit"],
form.tnp-subscription .tnp-submit,
.tnp-submit {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #eecc66 !important;
    background-color: #eecc66 !important; 
    color: #e5e5e5 !important;
    font-weight: bold !important;
    border: 2px solid #eecc66 !important;
    box-shadow: none !important;
}

input.tnp-submit:hover,
input[type="submit"].tnp-submit:hover,
.tnp-subscription input[type="submit"]:hover,
form.tnp-subscription .tnp-submit:hover,
.tnp-submit:hover {
    background: #eecc66 !important;
    background-color: #eecc66 !important; 
    color: #e5e5e5 !important;
    border: 2px solid #eecc66 !important;
}


/* ==========================================
   3. WORDPRESS EDITOR STYLES
   ========================================== */
.editor-styles-wrapper, 
.editor-styles-wrapper p, 
.editor-styles-wrapper h1, 
.editor-styles-wrapper h2, 
.editor-styles-wrapper h3, 
.editor-styles-wrapper h4,
.editor-styles-wrapper .wp-block-paragraph,
.editor-styles-wrapper [style*="color"] {
    color: #222222 !important;
}


/* ================================= */
/* PORTFOLIO – ALLGEMEIN */
/* ================================= */
.project .entry-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project .entry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

.wp-block-button__link {
    background-color: #eecc66 !important;
    color: #656565 !important; 
    line-height: 30px !important;
}

.wp-block-button__link:hover,
.wp-block-button__link:active,
.wp-block-button__link:focus {
    background-color: #656565 !important; 
    color: #eecc66 !important;                       
    border: 2px solid #eecc66 !important;                        
    box-shadow: none !important;                     
}

.entry-content p {
    margin-bottom: 20px !important;
}


/* ================================= */
/* PORTFOLIO – DESKTOP GRID & EFFEKTE */
/* ================================= */
@media (min-width: 900px) {
  .projects.grid {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .projects.grid .project {
    width: 25% !important;
    padding: 4px;
    box-sizing: border-box;
  }
}

@media (hover: hover) {
  .projects.grid .project {
    background: #f5f6f7;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: relative;
  }
  .projects.grid .project:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
  .project .entry-media img {
    transition: transform 0.6s ease;
  }
  .project:hover .entry-media img {
    transform: scale(1.08);
  }
  .project .entry-text {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
  }
  .project:hover .entry-text {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================================= */
/* MOBILE ANPASSUNGEN & AUSNAHMEN */
/* ================================= */
@media (hover: none), (pointer: coarse) {
  .projects.grid {
    padding: 4px;
    background: #2f2f2f;
  }
  .projects.grid .project {
    padding: 6px;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .project .entry-media + .entry-text {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
  }
  .project .entry-text {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.0) 100__) !important;
  }
  .project .entry-header,
  .project .entry-title {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .project .entry-title {
    color: #fff !important;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
  }
	
  body.page-id-22117 .sidebar,
  body.page-id-22117 #secondary {
      display: none !important;
  }
  body.page-id-22117 .content-area,
  body.page-id-22117 #primary {
      width: 100% !important;
      float: none !important;
  }
}


/* ==========================================================
   COVER-BLÖCKE (Abstand & Zeilenhöhe optimiert)
   ========================================================== */
.wp-block-cover {
    padding-bottom: 5px !important; 
}

.wp-block-cover .wp-block-cover__inner-container {
    margin-bottom: 0 !important; 
}

.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container p,
.wp-block-cover .wp-block-cover__inner-container a {
    line-height: 1.25 !important; 
}

/* ==========================================================
   LAYOUT-FEINTUNING (Header, Menü & Seiten-Überschriften)
   ========================================================== */
.site-content, #content, .content-area, main {
    padding-top: 15px !important;
    margin-top: 0 !important;
}

.site-header, #masthead {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}

/* Schritt 1: Menüzeile (Größe auf 14px fixiert) */
.main-navigation a, 
.nav-menu a, 
#site-navigation a,
ul.menu a,
.menu-item a {
    font-size: 14px !important; 
}

/* Schritt 2: Seiten-Überschriften im Header (z. B. "Kontakt") dauerhaft vergrößern */
html body .site-header .header-inner h1,
html body .site-header .header-inner.container h1,
.header-inner h1 {
    font-size: 42px !important; /* Hier deine Wunschgröße eintragen (z. B. 42px, 48px etc.) */
    display: block !important;
    transform: none !important;
}

/* Erzeugt einen maximal intensiven, tiefdunklen Schatten direkt hinter dem Text im Cover */
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container a {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.90),   /* Harter, tiefer Kernschatten */
                 -1px -1px 2px rgba(0, 0, 0, 0.95), /* Schützt die Kanten nach oben/links */
                 0px 0px 12px rgba(0, 0, 0, 0.90) !important; /* Breiter, dunkler Schein nach außen */
}

/* ==========================================================
   LESBARKEIT: TEXTSCHATTEN FÜR PORTFOLIO & STANDARDSEITEN
   ========================================================== */

/* 1. Schatten für alle großen Seiten-Überschriften (Pages & Portfolios) */
html body .site-header .header-inner h1,
body.page .entry-title, 
body.page h1.page-title,
body.single-project .entry-title,
body.post-type-archive-jetpack-portfolio .page-title {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Schatten für den normalen Fließtext in den Beiträgen und Seiten */
.entry-content p, 
.entry-content li,
.project .entry-text,
.wp-block-paragraph {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================
   HEADER-OPTIMIERUNG: TITEL & MENÜ FETT + SCHATTEN
   ========================================================== */

/* 1. Seitentitel ("Freizeit-Touristik") fett stellen und schattieren */
.site-title, 
.site-branding h1, 
.site-logo-text,
.site-title a {
    font-weight: bold !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7) !important;
}

/* 2. Menüzeile (Navigationslinks) fett stellen und schattieren */
.main-navigation a, 
.nav-menu a, 
#site-navigation a,
ul.menu a,
.menu-item a {
    font-weight: bold !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================
   HEADER: UNTERTITEL (SLOGAN) VERGRÖSSERN & WEISS FÄRBEN
   ========================================================= */
.site-description,
.site-branding .site-description,
p.site-description {
    font-size: 14px !important;       /* Macht die Schrift größer (Standard ist oft 13px) */
    color: #ffffff !important;         /* Erzwingt ein reines, klares Weiß */
    font-weight: normal !important;    /* Hält die Schrift elegant (nicht fett) */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important; /* Gibt auch dieser Zeile den passenden Schatten */
}

/* ==========================================================
   DESKTOP & NOTEBOOK: UNFEHLBARER AUTOMATISCHER BILDABSTAND
   ========================================================== */
@media (min-width: 768px) {
    /* Verwandelt den Inhaltsbereich auf Notebooks in ein intelligentes Raster */
    .entry-content, 
    .project-content,
    .page-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* Erzwingt automatisch 20px Luft zwischen ALLEN Elementen (Texten, Bildern, Galerien) */
    }

    /* KORREKTUR: Verhindert, dass Bilder INNERHALB einer Galerie auseinandergerissen werden */
    .wp-block-gallery, 
    .gallery,
    .blocks-gallery-grid {
        display: flex !important;
        flex-direction: row !important; /* Hält die Fotos in der Galerie horizontal nebeneinander */
        gap: 16px !important;           /* Normaler, enger Abstand zwischen den Galerie-Fotos */
    }
    
    /* Schützt Einzelbild-Blöcke im Inneren */
    .wp-block-gallery .wp-block-image,
    .gallery-item {
        margin: 0 !important;
    }
}