/*
* Theme Name: Superb Pixels Child
* Theme URI: https://superbthemes.com/superb-pixels/superb-pixels-info/
* Template: superb-pixels
* Author: Superbthemescom
* Author URI: http://superbthemes.com/
* Description: Superb Pixels is a responsive WordPress theme for blogs, newspapers, and content creators ...
* Version: 2.9.1757060337
* Updated: 2025-09-05 10:18:57
*/

/*---------------------------------------
	Settings Parent Layout  
---------------------------------------
:root {
  --boxed-padding-large: 30px;
  --boxed-padding-medium: 20px;
  --boxed-padding-small: 15px;
  --superb-pixels-foreground: #111314;			Font - Blueish Black
  --superb-pixels-background: #ffffff;			Hintergrund für Gutenberg Block - White
  --superb-pixels-background-elements: #fbf7f5;	Hintergrund Website - Light Pink
  --superb-pixels-light-2: #efefef;				Light Grey
  --superb-pixels-dark-1: #717171;				Dark Grey
}


:root {
    --font-primary: 'Inter', 'helvetica neue', helvetica, arial, verdana;
    --font-primary-lineheight: 150%;
    --font-primary-default: 400;
    --font-primary-bold: 600;
    --font-primary-small: 14px;
    --font-primary-normal: 16px;
    --font-primary-medium: 18px;
    --font-primary-large: 24px;
    --font-primary-extra: 28px;
    --font-primary-xl: 32px;
    --font-primary-xxl: 48px;
    --font-primary-xxxl: 60px;
    --font-primary-xxxxl: 72px;
    --font-secondary: 'Lora', 'helvetica neue', helvetica, arial, verdana;
    --font-secondary-lineheight: 130%;
    --font-secondary-default: 400;
    --font-secondary-bold: 700;
    --font-secondary-small: 14px;
    --font-secondary-normal: 16px;
    --font-secondary-medium: 18px;
    --font-secondary-large: 24px;
    --font-secondary-extra: 28px;
    --font-secondary-xl: 32px;
    --font-secondary-xxl: 40px;
    --font-secondary-xxxl: 60px;
    --font-secondary-xxxxl: 72px;
    --font-tertiary: monospace, Consolas, "courier new";
    --font-tertiary-lineheight: 150%;
    --font-tertiary-normal: normal;
    --font-tertiary-default: bold;
}

/* var(--superb-pixels-primary) (Button und Highlight Color)
 * wird über den Customizer definiert und
 * via src/customizer/class-colorscheme.php abgerufen


:root {
    --superb-pixels-primary: #84df7c; /* Extra Light Green: Highlights, Buttons 
    --superb-pixels-primary-dark: #66c15e;
    --superb-pixels-secondary: #f7f7f8;
    --superb-pixels-secondary-dark: #d9d9da;

---------------------------------------*/



/*---------------------------------------
	Geänderte Parent root Definitionen 
---------------------------------------*/

/* Geänderte Parent Farbdefinitionen */
:root {
	--superb-pixels-foreground: #00282E; /* Dark Green: Text */
}

/* Geändertes Parent Padding für boxed Layout */
:root{
	--boxed-padding-large: 30px;
  	--boxed-padding-medium: 25px;
 	--boxed-padding-small: 15px;
}


/*---------------------------------------
	Zusätzliche root Definitionen  
---------------------------------------*/

/* Zusätzliche Farbdefinitionen */
:root {
	--white: #FFFFFF;			/* White */
	--green-light: #84DF7C;		/* Extra Light Green */   
	--green-mid: #39b72d;		/* Light Green alt */
	--green-dark: #00282E;		/* Dark Green */
	--grey-light: #F7F7F8;		/* Light Grey */
	--grey-border: #DEDEDF;		/* Mid Grey */
	--grey-dark: #DEDEE2;		/* Dark Grey */
}


/*---------------------------------------
	Globale Definitionen
---------------------------------------*/

/* Festlegen der Typografie-Basis: Schriftgröße des Root-Elements (rem) */ 
html {
  font-size: 16px;  /* 1rem = 16px */
}

/* Globale Website Hintergrund Farbe */ 
html, body {
  	background-color: var(--grey-light) !important; 
	width: 100vw;
}

/* Global Proportionale Verkleinerung Heading Font Size für kleinere Displays */		
@media screen and (max-width: 700px) {
	    h1 {
        font-size: var(--font-secondary-extra);
    }
}


/*---------------------------------------
   Zusätzliches CSS für Beiträge 
---------------------------------------*/

.para-block {
  margin: 20px 40px;
}


/*---------------------------------------
   Linkfarben Global
---------------------------------------*/
body a {
    color: var(--green-dark); 
}

body a:hover {
    color: var(--green-mid);   
}


/*---------------------------------------
   Seitentitel ausblenden
---------------------------------------*/

/* Startseite */
.page-id-85 .entry-title {
    display: none;
}

/* Datenschutzerklärung */
.page-id-101 .entry-title {
    display: none;
}

/*------------------------------------------------------------------------------
   Navigationsleiste über Header Image ausblenden
------------------------------------------------------------------------------*/

/* Menü im Header überall ausblenden */
header .top-nav-wrapper {
    display: none !important
}
 
header .super-menu {
    display: none !important;
}

/* Falls es mobile Overrides gibt, diese auch überschreiben */
@media (max-width: 600px) {
    header .super-menu {
        display: none !important;
    }
}

/* entfernt space unter header image */
header img,
.bottom-header-wrapper img,
#masthead img {
    display: block;
}

.bottom-header-wrapper,
#masthead,
.header-image-wrapper {
    margin-bottom: 0 !important;
}


/*------------------------------------------------------------------------------
   Neue Area für Titel und Menü unter dem Header image 
------------------------------------------------------------------------------*/

/* Area Definitionen */
.under-image-area {
	width: 100%;
	background: var(--white);
	display: flex;
	flex-direction: column;
	padding: 10px 0px 10px 0px;
	margin: 0px 0px 30px 0px;
	justify-content: center;
	text-align: center;
	color: var(--green-dark);
	font-size: 1rem;
	font-weight: var(--font-primary-bold);
	border-style: solid;
  	border-width: 2px 1px 1px 1px;
	border-color: var(--green-dark) var(--grey-border) var(--grey-border) var(--grey-border);
  	box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}

/* Schriftzug "Willkommen" */
.welcome-under-image {
	align-content: center;
	text-align: center;
	font-family: var(--font-secondary);
    font-size: 1.3rem;	
	line-height: 2rem;
	padding: 15px 0px 0px 0px;
}

/* Schriftzug Seitentitel "Rödelsperger Streuobstwiesen" */
.title-under-image {
	font-family: var(--font-secondary);
    font-size: 2.5rem;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-decoration: none;
	line-height: 3rem;
	color: #39b72d;
	padding: 15px 0px 50px 0px;
}

/* Bei hover über Bereich Maus Pointer anzeigen um Link anzuzeigen */
.title-under-image a:hover {
	pointer-events: auto;
	cursor: pointer;
}

/* Proportionale Text Verkleinerung für kleinere Displays */
@media (max-width: 600px) {
	.welcome-under-image {
		font-size: 1rem;
		line-height: 1.5rem;
	}
}

@media (max-width: 600px) {
	.title-under-image {
		font-size: 1.8rem;
		line-height: 2rem;
		padding: 0px 0px 20px 0px;
	}
}

/*------------------------------------------------------------------------------
   Menü unter Header Image 
------------------------------------------------------------------------------*/

/* Menü */
.simple-text-menu {
	width: 100%;
	display: flex;
	justify-content: center;
	border-top: 1px solid var(--green-dark);
    list-style: none;
    padding: 20px 0px 10px 0px;
	margin: 0px;
	align-content: center;
	text-align: center; 
	line-height: 1rem;
    gap: 25px;
}

/* Links nicht unterstrichen */
.simple-text-menu li a {
    text-decoration: none;
}


/*------------------------------------------------------------------------------
   Neue Area für Kategoriefilter auf Beitragsseite 
	übernimmt die Eigenschaften von under-image-area falls nicht anders definiert
------------------------------------------------------------------------------*/

/* Original Archive-Page-Header auf Kategorieseiten komplett ausblenden */
.archive .page-header {
    display: none !important;
}

/* Area für Kategoriefilter */
.under-image-area.archive-category-filter {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
  	border-width: 1px;
	border-color: var(--grey-border);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	gap: 20px;
}

/* Kategorie Filter Links im Button Style */
.category-filter-link {
	padding: 3px 7px 3px 7px;
	margin: 2px 0px 2px 0px;
    text-decoration: none;
	background: var(--superb-pixels-secondary);
	border-radius: 5px;
}

/* Kategorie im Filter bei Hover hervorheben */
.category-filter-link:hover {
	color: var(--green-dark);
    background: var(--superb-pixels-secondary-dark);
}

/* Aktive Kategorie im Filter hervorheben */
.category-filter-link.active {
    color: var(--green-mid);
}

/* Proportionale Verkleinerung für kleinere Displays */
@media (max-width: 600px) {
	.under-image-area.archive-category-filter{
		padding: 10px 0px 10px 0px;	
		margin: 0px 5px 30px 5px;
		gap: 10px;
	}
}

media (max-width: 600px) {
	.category-filter-link{
		
	}
}

/*---------------------------------------
   Buttons 
---------------------------------------*/
/* Gutenberg Block Button */
.wp-block-button__link {
	border-radius: 5px;
	display: flex;
	justify-content: center;
	}

/* Beitrag Card "Weiterlesen" Button */
.read-story {
	border-radius: 5px;
	display: flex;
	justify-content: center;
	font-size: 1rem;
}

/* Kontakt "Senden" Button */
.wpcf7-form .wpcf7-submit {
	border-radius: 5px;}

/* Button "Zu den Beiträgen" */
.back-button-wrapper {
	border-radius: 5px;
	display: flex;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: var(--font-primary-bold);
	}

/* Buttons zur Navigation zwischen Posts (Letzter/Nächster Beitrag) */
.post-navigation .nav-previous a, .posts-navigation .nav-previous a, .post-navigation .nav-next a, .posts-navigation .nav-next a {
	border-radius: 5px;}

/* Buttons für Kategorie Tags unter Beitrag */
.category-and-tags a {
	border-radius: 5px;
}
	
.category-and-tags a:hover {
	color: var(--green-dark)
}
		

/*---------------------------------------
	Beitragseite: Cards, Thumbnail, Text 
---------------------------------------*/
/* Card Design  */
.posts-entry {
  	background: var(--white);
	border-style: solid;
  	border-width: 1px;
	border-color: var(--grey-border);
  	box-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
}

/*
.content-wrapper {
	border-style: solid;
  	border-width: 0px 1px 1px 1px;
	border-color: var(--grey-border);
}

.featured-thumbnail {
	border-style: solid;
	border: 1px 1px 0px 1px var(--grey-border);
	box-shadow: 2px 0px 4px rgba(0,0,0,0.2);  
	}
*/



/* Wrapper für Post Meta (Kalender Icon, Datum, Reading-Time)  */
.post-meta-inner-wrapper {
	margin-bottom: 20px;
}

/* Datum unter Thumbnail  */
.post-author-data time {
	color: var(--green-dark); 
  	font-size: 16px;
  	font-weight: var(--font-primary-bold);
  	vertical-align: middle;
}

/* Kalender-Icon vor Datum anzeigen */
.post-author-data time::before {
  	content: "";
  	display: inline-block;
  	width: 20px;
  	height: 20px;
  	background-image: url('https://roedelsperger-streuobstwiesen.de/wp-content/themes/superb-pixels-child/Icons/icons8-kalender-100.png');
  	background-size: contain;
  	background-repeat: no-repeat;
  	margin-right: 4px;
  	vertical-align: middle;
}

/* Lesezeit und Wortzahl */
.reading-time {
	font-weight: var(--font-primary-default);
}

/* Beitragseite Textauszug und Postseite Text */
.entry-content {
	color: var(--green-dark);
	text-align: justify;
    hyphens: auto;     /* Aktiviert die automatische Silbentrennung */
}

/* Fix für Text Abstand zum Rand im boxed Layout */
@media screen and (max-width: 800px) {
    .content-wrapper {
        width: 100%;
        padding: var(--boxed-padding-medium);
    }
}

@media screen and (max-width: 700px) {
    .page .content-area .fbox, .single .content-area .fbox {
        display: inline-block;
        width: 100%;
        padding: var(--boxed-padding-medium);
    }
}


/*---------------------------------------
	Beitragsseite: Featured Thumbnail 
---------------------------------------*/

/* Farblayer bei Hover über Thumbnail */
.blog .featured-thumbnail:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    transition: background-color 0.3s ease;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Kategorie Label auf Post Image
 * color: setzt Textfarbe auch bei Hover (Farbe ändert sich nicht bei Hover) */
.featured-img-category {
    color: var(--green-dark);
}


/*------------------------------------------------------------------------------
	Eingebetteter Content (zB YouTube Videos)
------------------------------------------------------------------------------*/
.wp-block-embed__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}


/*---------------------------------------
   Sidebar Widget (Rechts) 
---------------------------------------*/
/* Sidebar Design */
#secondary {
	background-color: var(--white) !important;
  	padding: 18px;
 	border: 1px solid var(--grey-border);
  	box-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
	}

/* Removes decorative line under heading */
#secondary h2::after {
    display: none;
}
	

/*---------------------------------------
	Pfeil im Details-Block erzwingen 
---------------------------------------*/
details > summary {
  display: list-item;
}

details > summary::-webkit-details-marker {
  display: list-item;
}


/*---------------------------------------
   Kontaktformular   
---------------------------------------*/
/* Checkbox Datenschutz */
.wpcf7-acceptance input[type="checkbox"] {
  margin: 0;
  width: auto;
}

/* Text Datenschutz */
.wpcf7-acceptance {
  display: flex;
  align-items: center;
  gap: 8px; /* Abstand zwischen Checkbox und Text */
}


/*---------------------------------------
	Stats Item 
---------------------------------------*/

/* Item */
.stats-item {
    display: flex;				
    flex-direction: column;
	justify-content: center;
	align-items: center;		
	width: 100%;
	overflow-wrap: anywhere;
  	word-break: break-word;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--grey-border);
  	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    padding: 18px 20px;
}

/* Image Bereich */
.stats-icon {
    margin-bottom: 12px;
}

/* Image */
.stats-icon img {
    display: block;
    width: 64px;
    height: auto;
    object-fit: contain;
    max-width: none;
}

/* Zahl */
.stats-number {
    font-size: 2.5rem;
    font-weight: var(--font-primary-bold);
    line-height: 1.1;
    color: var(--green-dark);
}

/* Text Label */
.stats-label {
    margin-top: 8px;
    font-size: 1.2rem;
    font-weight: var(--font-primary-bold);
    color: var(--green-dark);
}

/* Proportionale Verkleinerung für kleinere Displays */
@media (max-width: 900px) {
	.stats-item 	{width: auto; margin: 0 auto; }
	.stats-icon img { width: 60px; }
    .stats-number 	{ font-size: 2rem; }
    .stats-label 	{ font-size: 1rem; }
}
	
@media (max-width: 600px) {
	.stats-item 	{width: auto; margin: 0 auto; }
    .stats-icon img { width: 55px; }
    .stats-number	{ font-size: 1.8rem; }
    .stats-label 	{ font-size: 1rem; margin-top: 2px; }
}



/*---------------------------------------
   Footer Style   
---------------------------------------*/
/* Grundeinstellung für Background und Font in Footer*/
.site-footer {
    background-color: var(--green-dark);  	
    color: var(--white);  
}

/* Menü Links in Footer */
.site-footer .menu a {
    color: var(--white); 
}

/* Footer Font Color when hover */
.site-footer .menu a:hover {
    color: var(--green-light); 
}