/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* === Schriftgrößen === */
h1 {
    font-size: clamp(1.2rem, 1.5vw + 1.0rem, 1.8rem); 
}

h2 {
    font-size: clamp(0.5rem, 3vw + 1rem, 2.5rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw + 0.8rem, 2rem);
  line-height: 1.3;
}

h4 {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
}

body, p {
    font-size: clamp(1rem, 0.5vw + 1rem, 1.125rem);
}

/* =======================================================
   SEITENTITEL (H1) UM 4REM EINRÜCKEN
   Zielt auf den Standardtitel von GeneratePress ab.
   ======================================================= */

.entry-title {
    /* Wichtig: Nutzt margin-left, um den Textblock einzurücken. */
    margin-left: 4rem !important; 
    
    /* Optional: Passt den padding-left an, falls ein Standard-Padding
       des Containers stört (meist nicht nötig, aber sicherheitshalber) */
    padding-left: 0 !important; 
}


/* =======================================================
   CSS-AUSNAHMEREGEL FÜR ÜBERSCHRIFTEN-EINZUG   ======================================================= */

h1, h2, h3, h4 {
    margin-left: 3rem; 
}


/* AUSNAHMEREGEL: Die Klasse .kein-einzug */
.kein-einzug {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.kein-einzug {
    margin-right: 0 !important;
}



/* ==== Diverse typo === */

/* Alle Links ohne Unterstreichung */
a {
  text-decoration: none;
}

/* =======================================================
   FLIESSTEXT: Automatische Silbentrennung für bessere Lesbarkeit
   Aktiviert die Trennung im Deutschen ('de')
   ======================================================= */

p {
    /* Aktiviert die Silbentrennung */
    hyphens: auto; 
    
    /* Cross-Browser-Kompatibilität */
    -webkit-hyphens: auto; 
    -ms-hyphens: auto;     
    
    /* Verbessert das Aussehen von längeren Textblöcken */
    text-align: justify; 
}

/* Optional: Auch für Listenelemente, um Konsistenz zu gewährleisten */
li {
    hyphens: auto; 
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* =======================================================
   MOBILE ICON ZWANGSAUSTAUSCH FÜR GENERATEPRESS
   Tauscht das Standard-Mobile-Icon (.menu-toggle) gegen
   das benutzerdefinierte Off-Canvas-Icon (.slideout-toggle) aus.
   ======================================================= */

/* 1. Größenkorrektur für BEIDE Icons (um die 32px zu gewährleisten) */
.slideout-toggle .gp-icon,
.slideout-toggle .gp-icon svg,
.menu-toggle .gp-icon,
.menu-toggle .gp-icon svg {
    width: 32px !important; 
    height: 32px !important;
}

/* 2. Logik, die NUR auf Handy-Bildschirmen (max. 768px) angewendet wird */
@media (max-width: 768px) {
    
    /* 2a. Versteckt den STANDARD-Mobile-Toggle. Dieser enthält das unerwünschte Icon. */
    /* Dies gilt für den Fall, dass das mobile Menü in der Hauptnavigation aktiviert ist. */
    .menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* 2b. Erzwingt die Anzeige Ihres BENUTZERDEFINIERTEN Off-Canvas-Toggles. */
    /* Dies überschreibt die eventuell vorhandene "hide-on-mobile"-Einstellung. */
    .slideout-toggle {
        /* Wichtig: Nutzt 'flex', um es korrekt zu zentrieren und anzuzeigen */
        display: flex !important; 
        visibility: visible !important;
    }

    /* 2c. Stellt sicher, dass das benutzerdefinierte Icon nicht durch andere Klassen versteckt wird. */
    .slideout-toggle.hide-on-mobile {
        display: flex !important;
    }
}

/* =======================================================
   BLOCK-ELEMENTE IN EINE ZEILE ZWINGEN (SEO-KONFORM)
   Die Klasse .inline-seo-h3-container wird dem übergeordneten Div gegeben.
   ======================================================= */

/* Setzt alle direkten Kinder im Container auf Inline-Block */
.inline-seo-h3-container > * {
    display: inline-block;
    /* Optional: Entfernt den Standard-Innenabstand des H3-Tags, falls nötig */
    margin: 0;
    padding: 0;
}

/* Optional: Korrigiert den vertikalen Abstand der Elemente */
.inline-seo-h3-container {
    line-height: 1.2;
}

/* Stellt sicher, dass das H3-Tag keine standardmäßigen Abstände erzeugt */
.inline-seo-h3-container h3 {
    margin: 0 0 0 5px !important; /* Fügt einen kleinen Abstand vor dem H3 hinzu */
    padding: 0 !important;
}


/* ==== 
 * Galerie: legt Position und Overflow fest ==== */
.ek-cover-box {
  position: relative;
  overflow: hidden;
}

/* Bild im Container: echtes "cover"-Verhalten */
.ek-cover-box .gb-image,
.ek-cover-box .wp-block-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.ek-cover-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ================================================================
   EK – Query Loop nur für dieses Raster (.ek-loop)
   ================================================================ */

/* 1) Raster: 1 Spalte */
.ek-loop {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 32px);
}

/* 2) Zeile pro Beitrag */
.ek-loop .post-row {
  position: relative;
  display: flex;
  align-items: center;          /* Text vertikal Mittig */
  justify-content: space-between;
  flex-direction: row;          /* Default: Bild links, Text rechts */
  gap: clamp(16px, 2vw, 32px);
  max-height: 845px;
  overflow: hidden;
}

/* 3) Spalten */
.ek-loop .post-media {
  flex: 1 1 48%;
  position: relative;
  overflow: hidden;
}
.ek-loop .post-content {
  flex: 1 1 52%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;      /* immer linksbündig */
  padding: clamp(12px, 2vw, 24px);
  /*background: var(--base-3, #fff);*/
  box-sizing: border-box;
  max-height: 400px;
  overflow: hidden;
  margin-left: -10%;            /* Überlappung 10% */
}

/* 4) Cover-Bild */
.ek-loop .post-media .gb-image,
.ek-loop .post-media .wp-block-image { position:absolute; inset:0; width:100%; height:100%; }
.ek-loop .post-media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* 5) Wechsel Bild↔Text */
.ek-loop > .gb-query-loop-item:nth-child(even) .post-row { flex-direction: row-reverse; }
.ek-loop > .gb-query-loop-item:nth-child(even) .post-content { margin-left:0; margin-right:-10%; }

/* 6) Fallbacks */
.ek-loop .post-media:empty { display:none; }
.ek-loop .post-media:empty + .post-content { flex-basis:100%; margin-left:0; margin-right:0; }

/* 7) Responsive */
@media (max-width: 768px){
  .ek-loop .post-row { flex-direction: column; align-items: stretch; max-height:none; }
  .ek-loop > .gb-query-loop-item:nth-child(even) .post-row { flex-direction: column; }
  .ek-loop .post-content { margin-left:0; margin-right:0; max-height:none; }
}

.entry-content ul, /* Stellt sicher, dass die Listen im Hauptinhalt betroffen sind */
.inside-article ul {
    /* 1. Einzug definieren */
    /* Setzt den Einzug der gesamten Liste von links auf 4rem */
    padding-left: 4rem; 
}

/*==========*/
.entry-content ul, 
.inside-article ul {
    /* Setzt den Einzug der gesamten Liste von links auf 4rem */
    padding-left: 1rem; 
    
    /* Fallback-Form für ältere Browser */
    list-style-type: square;
}

/* Styling des Listenpunkt-Markers selbst (bevorzugte Methode) */
.entry-content ul li::marker,
.inside-article ul li::marker {
    /* 1. Form definieren: Quadrat */
    list-style-type: square;

    /* 2. Farbe definieren: Nutzt die GeneratePress Variable --base-3 */
    /* Die Fallback-Farbe (#fff) wird nur geladen, wenn die Variable nicht definiert ist. */
    color: var(--base-3, #eee); 
}
/*=============
/*Lightbox
/*=============*/
.ek-glightbox-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/*Eigene Feile*/
/* Standard-Icons in den GLightbox-Buttons ausblenden */
.gprev svg,
.gnext svg {
  display: none !important;
}
.gprev.gbtn,
.gnext.gbtn {
  background-color: transparent !important;
  box-shadow: none !important;
}
.gprev.gbtn:hover,
.gnext.gbtn:hover {
  background-color: transparent !important;
}




/* Basis-Layout für beide Buttons */
.gprev.gbtn,
.gnext.gbtn {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  padding: 0;
  opacity: 1;
}

/* rechter Pfeil – Original */
.gnext.gbtn {
  background-image: url('https://erikkrueger.de/wp-content/uploads/arrow-right_w.svg');
}

/* linker Pfeil – derselbe, nur gespiegelt */
.gprev.gbtn {
  background-image: url('https://erikkrueger.de/wp-content/uploads/arrow-right_w.svg');
  transform: scaleX(-1);
}

.gprev.gbtn,
.gnext.gbtn {
  width: 48px !important;
  height: 48px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}