/*
 Theme Name:   GeneratePress Child
 Description:  GeneratePress Child Theme
 Author:       Pixelpolka
 Author URI:   https://www.pixelpolka.de
 Template:     generatepress
 Version:      1.0
 Text Domain:  generatepress-child
*/


/* ==================================================== RESET ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
/*
ul[role=list],
ol[role=list] {
  list-style: none;
}
*/


/* =================================================== Custom props =============================================================== */

:root {
	--content-max-width: 1200px;
	--content-padding-inline: 40px;
	--clr-neutral-medium: #6b6b6b;
	--font-size-small: .9rem;
	--accent-light: #08748c;

/* IDGs */
/* Farben */


/* --accent (ALT) #157175 */
}

@media(max-width:768px) {
	:root {
		--content-padding-inline: 20px;
	}
}


/* ====================================  Basics ========================== */


body {
background: #D6E4E4;
background: radial-gradient(circle, rgba(214, 228, 228, .5) 0%, rgba(227, 236, 217, 1) 62%, rgba(249, 251, 248, .5) 100%);
background: radial-gradient(circle, rgba(214, 228, 228, .5) 0%, rgba(227, 236, 217, .6) 50%, rgba(249, 251, 248, .8) 70%);
font-family: roboto, sans-serif;
display: flex;
flex-direction: column
}
.site-footer {
	margin-top: auto;
	border-top: 1px solid #D9D9D9;
}

.site-header {
	border-bottom: 1px solid #D9D9D9;
}
.inside-header {
	align-items: end;
    padding-top: 0;
    margin-top: -10px;
}
.site.grid-container {
	padding-bottom: calc(3rem + 2vw);
}
.menu-hauptmenue-container {
	display: flex;
	justify-content: flex-end;
	.menu {
		text-align: right;
	}
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
	padding-inline: 0;
	font-size: min(calc(.95rem + .15vw), 1.2rem);
}

#primary-menu .menu-item {
	padding-left: min(calc(.1rem + .6vw), 12px);
    padding-right: min(calc(.1rem + .6vw), 12px);
}

#primary-menu .current_page_parent a {
	color: var(--accent) !important;
}

.menu-item-has-children .dropdown-menu-toggle {
	padding-left: 8px;
	padding-right: 0;
}

.site-footer .sub-menu {
	margin-top: 0;
}

.site-footer .sub-menu .menu-item {
	font-size: .9rem;
	margin-bottom: 0;
}

.site-footer .sub-menu .menu-item a::before {
	content: '– ';
}

#generate-slideout-menu .slideout-menu li {
	padding-inline: 1rem;
}

#generate-slideout-menu.main-navigation .main-nav .sub-menu {
	box-shadow: unset !important;
}

#generate-slideout-menu.main-navigation .main-nav .sub-menu .menu-item {
	text-indent: -.8rem;
	padding-inline: 0;
}

#generate-slideout-menu.main-navigation .main-nav .sub-menu .menu-item a::before{
	content: '– ';
}

/* ------------------------------------ Typo ------------------------------- */


/*
body {
	line-height: calc(1.2em + .2vw);
}
*/

h1, h2, h3, h4 {
	font-weight: 600;
}

h3 {
	margin-bottom: 1rem;
}

.entry-content p {
	margin-bottom: 1.5rem;
}

p.untertitel {
	margin-top: .3rem;
	margin-bottom: 3rem;
}

.entry-content a {
	font-weight: 600;
}
.read-more-link {
	display: block;
    width: fit-content;
    font-weight: bold;
    margin-top: 1rem;
}
.read-more-link::before {
	content: '→';
	margin-right: .25em;
    font-size: 1.2em;
}

a:not(.lb-badge, .generate-back-to-top, .sdg-item, .idg-item, .lb-transformationsfeld > a, .lb-fach > a, .lb-download-link, .wp-block-image a) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% .115em;
  padding-bottom: .02em; /* Abstand Text → Linie */
  transition: background-size 0.3s ease;
  &:hover,
  &:focus-visible {
  	background-size: 100% .115em;
	}
}

.wp-block-list {
    margin-left: 1.5rem;
    li {
	    margin-bottom: 1rem;
	    list-style: square;
    }
}


/* --------------------------------- home -------------------------------- */

@media (min-width:768px) {
	.lb-start-intro .wp-block-columns {
		display: flex;
		gap: 2rem;
	}

	.lb-frontpage-latest {
		margin-top: 2rem;
	}
}


/* --------------------------------- Über das Projekt --------------------- */


@media (min-width:782px) {
	.page-id-28 .wp-block-columns > .wp-block-column:nth-of-type(2) {
		border-left: 1px solid #D9D9D9;
	    padding-left: calc(1.5rem + .5vw);
	    font-size: .95rem;
	}
}

@media(max-width:1000px) {
	.page-id-28 .wp-block-columns {
		hyphens: auto;
	}
}

/* --------------------------------- Lehrbaustein-Loop -------------------- */


.lb-title_desc {
	h2 {
		margin-bottom: 0;
	}
}

.lb-form {
	background-color: #fff;
	padding: calc(1rem + .6vw);
	border-radius: calc(1rem + .5vw);
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
}

.select-columns {
	display:flex;
	gap:1rem;
	flex-wrap:wrap;
	align-items:end;
}

.select-wrapper {
	display: grid;
	gap: .5rem;
	label {
		font-weight: bold;
	}
}

select.postform {
	border-radius: .8rem;
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
    margin-right: 1rem;
    border-right: 1rem solid #fff;
    background-color: #fff;
    cursor: pointer;
	border-top: 0px;
	border-bottom: 0px;
	border-left: 0px;
}

.lb-counter {
	margin-top: calc(3rem + 1vw);
	margin-bottom: calc(1.5rem + .5vw);
}

.lb-wrapper {
	background-color: #fff;
	padding: calc(1rem + .6vw);
	margin-bottom: calc(1.5rem + 1vw);
	border-radius: calc(1rem + .5vw);
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
    display: grid;
    grid-template-columns: 3fr 2fr;
    a {
	    text-decoration: none;
    }
    gap: calc(1.5rem + .5vw);
    @media (max-width: 900px) {
	    hyphens: auto;
    }
}
.lb-meta {
	border-left: 1px solid #D9D9D9;
	padding-left: calc(1.5rem + .5vw);
}
.lb-transformationsfelder,
.lb-faecher {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .4rem;
}
.lb-transformationsfeld,
.lb-fach {
	border-radius: .65em;
	padding: .3em .7em;
	font-size: .9rem;
	transition: all .3s ease;
	a {
		color: #fff;
	}
}

.lb-transformationsfeld {
	background-color: #69A638;
	&:hover {
		background-color: #74bb39;
	}
}
.lb-fach {
	background-color: #07687E;
	&:hover {
		background-color: #1f879f;
	}
}

.lb-filter-bar {
	margin-top: 3rem;
}
.lb-filter-headline {
	font-weight: 500;
	font-size: 1.5rem;
    margin-bottom: calc(1.5rem + 1vw);
}

.lb-badges {
	display:flex;
	gap:0.5rem;
	flex-wrap:wrap;
	align-items:center;
}

.lb-badge {
	display:inline-flex;
	gap:0.4rem;
	align-items:center;
	padding:0.25rem 0.55rem;
	border:1px solid var(--contrast-3);
	border-radius:999px;
	text-decoration:none;
}

.close-x {
	font-weight:700;
}

.lb-post-date {
  margin-top: 0.25rem;
  font-size: var(--font-size-small);
  color: var(--clr-neutral-medium);
  margin-bottom: 2rem;
}


/* --------------------------------- Lehrbaustein - Single --------------------- */

.single-lehrbaustein {

	.site.grid-container {
		max-width: unset;
		margin-inline: 0;
	}
	.site-content {
		display: block;
	}
	.entry-header,
	aside.lb-related {
		margin-left: auto;
		margin-right: auto;
		max-width: 1200px;
		padding-inline: var(--content-padding-inline)
	}
	.entry-content {
		background-color: #fff;
		padding-block: calc(2rem + 2vw);
		> * {
		    margin-inline: auto !important;
		    max-width: 1200px;
			padding-inline: var(--content-padding-inline)
		}
	}
}

.lb-text-autor{
  font-size: var(--font-size-small);
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 0.35rem;

}


/*
.lb-h5p-hint{
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: #f4f7f7;
  border-left: 4px solid #1f6f6a;
  font-size: .9rem;
}
*/


.lb-h5p {
	margin-block: calc(1rem + 1vw);
}

/* ================= Entry Header Layout ================= */

.entry-header-inside {
	display: grid;
	padding-top: calc(1rem + 2vw);
	gap: 2rem;
}

@media (min-width: 568px) {
	.entry-header-inside {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}
}

.archive-title {
	margin-bottom: calc(1rem + 2vw);
}

h1, h2, h3, h4 {
	color: var(--accent);
}

h2, h3 {
	margin-bottom: calc(.5em + .5vw);
}

:where(p, ul, ol) + :is(h2, h3, h4) {
	margin-top: calc(1.4em + .4vw);
}

.header-2 {
	font-size: 2rem;
	line-height: 1.25;
	color: var(--accent);
	margin-bottom: calc(1rem + 1vw);
}

.kurzbeschreibung_title {
	font-weight: bold;
	font-size: 1.4rem;
	margin-bottom: .7rem;
	color: var(--accent);
}

.entry-header-col-2 {
	border-radius: 1rem;
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
    background-color: #fff;
    padding: calc(1rem + 1vw);
    .lb-meta {
	    border-left: unset;
	    padding-left: unset;
    }
}

/* ================= Meta-Bereich ================= */

.lb-meta > * + * {
	margin-top: 0.75rem;
}

.lb-transformationsfeld,
.lb-fach {
	margin-bottom: 0.25rem;
}

/* ================= SDG Grid ================= */

.sdg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
/*
    border-top: 1px solid #D9D9D9;
    padding-top: calc(1rem + .5vw);
*/
    margin-block: calc(1rem + .5vw);
}

.sdg-grid img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================= Download-Link ================= */

.lb-download-link {
	font-weight: 600;
	position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left calc(1.25em + .4rem) bottom;
    background-size: 0% .115em;
    padding-bottom: .02em;
	transition: background-size 0.3s ease;
}

.lb-download-link:hover,
.lb-download-link:focus-visible {
    background-size: calc(100% - (1.25em + .4rem)) .115em;
}

.lb-download-link::before{
    content: "";
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 1.25em;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23157175' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10M7.5 11.5 12 16l4.5-4.5M5 17v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.lb-download-link:hover::before{
    transform: translateY(3px);
}



/* -------------------- Breadcrumb -------------------------- */

.lb-breadcrumbs {
  margin: 0.75rem 0 1.25rem;
  font-size: 0.95rem;
}

.lb-breadcrumbs:not(.single .lb-breadcrumbs) {
	padding-inline: var(--content-padding-inline)
}

.lb-breadcrumbs__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  align-items: center;
}

.lb-breadcrumbs__sep,
.lb-breadcrumbs__current {
	color: var(--clr-neutral-medium);
}



.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
	background-color: transparent !important;
}


/* ------------------ Tooltip ------------------------------- */

/* ===== Reusable Tooltip ===== */
.lb-tooltip{
  position: relative;
  display: inline-block;
}

/* Tooltip-Box */
.lb-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  padding: .35rem .55rem;
  border-radius: .4rem;
  background: rgba(20, 20, 20, .95);
  color: #fff;
  font-size: .8rem;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 50;
  transition: opacity .18s ease, transform .18s ease;
}

/* Tooltip-Pfeil */
.lb-tooltip::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  border: 6px solid transparent;
  border-top-color: rgba(20, 20, 20, .95);
  z-index: 50;
  transition: opacity .18s ease, transform .18s ease;
}

/* Anzeigen bei Hover oder Keyboard-Focus */
.lb-tooltip:hover::after,
.lb-tooltip:focus-within::after,
.lb-tooltip:hover::before,
.lb-tooltip:focus-within::before{
  opacity: 1;
  transform: translateX(-50%) translateY(60px);
}

/* Optional: Fokus sichtbar machen */
.lb-tooltip:focus-within{
  outline: 2px solid rgba(31, 111, 106, .35);
  outline-offset: 4px;
  border-radius: .4rem;
}

/* Optional: für sehr schmale Screens Tooltip umbrechen lassen */
@media (max-width: 360px){
  .lb-tooltip::after{
    white-space: normal;
    width: min(240px, 90vw);
    text-align: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .lb-tooltip::after,
  .lb-tooltip::before{
    transition: none;
  }
}



/* ======================================================== Methoden CPT =======================================  */

/*
.idg-child[class*="idg-parent-"] {
    --idg-color: currentColor;
}
*/

.methode__header {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-inline: var(--content-padding-inline);
}

.methode-beschreibung {
	margin-top: calc(1.5rem + 1.5vw);
}

.methode-durchfuehrungsmoeglichkeit {
	margin-top: calc(2rem + 1vw);
}

:is(.single-methode, .page-template-page-methoden) .entry-content ol {
	max-width: 60ch;
	margin-left: 1.4rem;
	li {
		margin-bottom: 1rem;
		padding-left: .6rem;
		&::marker {
			font-weight: bold;
			color: var(--accent);
			font-size: 1.2rem;
		}
		> ol li {
			list-style-type: lower-latin;
			margin-bottom: .5rem;
			max-width: 40ch;
			&:nth-of-type(1) {
				margin-top: .5rem;
			}
			&:last-of-type {
				margin-bottom: 2rem;
			}
		}
	}
}

.methode__header .entry-header-inside {
	@media (min-width: 568px) {
        grid-template-columns: 3fr 1fr !important;
        align-items: start;
        gap: calc(2rem + 2vw);
    }
}

.methode__meta {
	margin-bottom: 2rem;
	width: fit-content;
}

.methode__sdg,
.methode__idg {
	margin-top: 1rem;
}

.methode__meta-label {
	font-weight: bold;
}

.idg-child {
    color: var(--idg-color);
    font-weight: bold;
}

/* .idg-parent-1 { --idg-color: #d1b280; } */
.idg-parent-1 { --idg-color: #DBC39C; }
.idg-parent-2 { --idg-color: #EB9AAF; }
.idg-parent-3 { --idg-color: #EF5944; }
.idg-parent-4 { --idg-color: #FF7F12; }
.idg-parent-5 { --idg-color: #7A273D; }


/* ===================================== Seite Methoden =================================  */

.teaser-section {
	margin-top: 3rem;
	column-gap: calc(.5rem + 3vw) !important;
	align-items: stretch;
}

.teaser {
	border-radius: 1rem;
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
    background-color: #fff;
    padding: calc(1rem + .5vw) calc(1rem + 1vw);
}

/* SDG Icon Grid: zwischen 3 und 7 Spalten, automatisch */
.methoden-sdg-page .sdg-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ab hier schrittweise hoch */
@media (min-width: 600px) {
  .methoden-sdg-page .sdg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 800px) {
  .methoden-sdg-page .sdg-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .methoden-sdg-page .sdg-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .methoden-sdg-page .sdg-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* Icons skalieren sauber */
.methoden-sdg-page .sdg-grid .sdg-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Section Layout: mobile stacked */
.methoden-sdg-page .sdg-section__header,
.methoden-idg-page .idg-parent-group {
  display: grid;
  column-gap: 2rem;
  align-items: start;
}

/* ab 550px: 2 Spalten */
@media (min-width: 768px) {
  .methoden-sdg-page .sdg-section__header,
  .methoden-idg-page .idg-parent-group {
    grid-template-columns: 230px 1fr; /* Icon-Spalte fix-ish, Content flexibel */
  }
}
.methoden-idg-page .idg-parent-group {
  align-items: stretch;
  margin-bottom: 4rem;
}

.methoden-idg-page .idg-parent-group__header {
	background-color: var(--idg-color);
}

.methoden-idg-page .idg-item img {
	width: 230px;
}

.methoden-idg-page .idg-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .methoden-idg-page .idg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .methoden-idg-page .idg-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.methoden-idg-page .idg-grid .idg-item img {
  width: 100%;
  height: auto;
  display: block;
}

.methoden-idg-page .sdg-grid {
  display: block;
  margin-top: 0;
}


.methoden-sdg-intro {
	margin-bottom: calc(2rem + 2vw);
}

.methoden-sdg-page .sdg-section__icon img {
  width: 100%;
  height: auto;
  display: block;
}

.methoden-sdg-nav,
.methoden-idg-nav {
	margin-bottom: calc(3rem + 2vw);
	border-radius: 1rem;
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
    background-color: #fff;
    padding: calc(.5rem + .2vw) calc(1rem + .6vw);
}
.sdg-section {
	margin-bottom: 6rem;
}

.sdg-section__icon {
	margin-top: 12px;
}

summary {
	padding: .5rem .5rem .5rem 0;
	border-bottom: 1px solid var(--accent-light);
	margin-bottom: 3px;
	cursor: pointer;
	&::marker {
		color: var(--accent);
	}
}

details summary:hover,
details[open] summary {
	border-bottom: 4px solid var(--accent-light);
	margin-bottom: 0;
}

summary > h3 {
	font-size: 1.45rem;
	display: inline;
}

.methoden-acc-panel {
	padding: 1.5rem 0 1rem 0;
}

.methoden-acc-grid h4 {
	font-size: 1.3rem;
	margin-bottom: .6rem;
}

@media (min-width: 768px) {
	.methoden-acc-grid {
		display: grid;
		grid-template-columns: 3fr 260px;
		column-gap: calc(2rem + 2vw);
	}
}

.methoden-acc-right {
	border-radius: 1rem;
    box-shadow: 0 0 20px rgb(0, 0, 0, .2);
    background-color: #fff;
    padding: calc(1rem + .5vw);
    margin-top: 7px;
    max-width: 300px;
    hyphens: auto;
    font-size: 1rem;
    .methode-field {
		margin-bottom: 1rem;
		line-height: 1.3;
	}
}
@media (max-width: 980px) {
	.methoden-acc-grid {
		display: flex;
		flex-direction: column-reverse;
	}
	.methoden-acc-right {
	    display: grid;
	    max-width: unset;
		grid-template-rows: min-content 1fr;
		grid-template-columns: 1fr 160px;
	    grid-template-areas: 'zeit idg'
	    					 'ziel idg';
	    column-gap: 1rem;
	    margin-bottom: 1rem;
	}
	.methode-field--zeitaufwand {
		grid-area: zeit;
	}
	.methode-field--ziel {
		grid-area: ziel;
	}
	.methode-field--idg {
		grid-area: idg;
	}
}

.methode__meta-label {
	margin-block: .5rem .25rem;
}

.idg-item img {
	width: 100%;
}
.idg-children {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0;
}

.idg-children li {
  margin-bottom: 0.25rem;
  display: inline;
  &:not(:nth-of-type(1))::before {
	  content: ' | ';
  }
}



/* ======================================= Akkordoen ======================== */

.plethoraplugins-accordion {
	padding: 0 !important;
	margin: 0 0 calc(2rem + 1vw) 0 !important;
	background-color: transparent !important;
}

.pds-accordion__title {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
    align-items: center;
	background-color: transparent !important;
	font-weight: 600;
	color: var(--accent) !important;
	font-size: 1.3rem !important;
	padding-block: .2em !important;

}

.pds-accordion__icon {
	position: relative !important;
}

.pds-accordion__icon:not(.is-open .pds-accordion__icon) {
	transform: translateY(0) !important;
}

.plethoraplugins-accordion.plethoraplugins-theme__minimal .is-open>.pds-accordion__title .pds-accordion__icon:not(.pds-accordion__icon--two-state) {
    transform: translateY(0) rotate(180deg) !important;
}

.pds-accordion__content {
	padding: .75rem 0 1rem 2rem !important;
}