/*
 Theme Name:   Startup Blog Child
 Template:     startup-blog
 Version:      1.0
 Description:  Child-Theme für individuelle Anpassungen
*/

.max-width {
	max-width: 1000px; 
}

/* Pagination aktuelle Seite sehr hell türkis */
/* border-color: #b7dbe4;
/* background: #e9f4f7;

/* Navigaton unter dem Post, Hover */
/* background-color: #e9f4f7; */

:root {
	/* dunkel grau bis schwarz für den Text */
	--color-basic: #333333;
	/* dunkel blau vom Farbverlauf*/
    --color-dark: #2b3185;
	/* türkis vom Farbverlauf*/
	--color-light: #2db3b1;
	/* dunkleres türkis für Text und Links */
    --color-middle: #2d88a4;
	
	--font-headline: "Muli", sans-serif;
}

a:hover {
    color: var(--color-middle) !important;
}
a:visited {
    color: var(--color-basic);
}

.post-content a {
	color: var(--color-middle) !important;
}
.post-content a:hover {
	color: var(--color-dark) !important;
}

h1, h2, h3, h4, h5, h6, h1.post-title, 
h1 a, h2 a, h3 a,
.post-content h1 a, .post-content h2 a, .post-content h3 a {
	font-family: var(--font-headline);
	color: var(--color-basic) !important;
}
.post-content h1 a:hover, .post-content h2 a:hover, .post-content h3 a:hover {
	color: var(--color-middle) !important;
}

h1, h1.post-title, .search-header h1.post-title {
	font-size: 1.7em;
}
@media (max-width: 600px) {
	h1, h1.post-title, .search-header h1.post-title {
		font-size: 1.5em;
	}
}

.blog h1.post-title {
	margin-top: 2rem;
	text-align: center;
}

h2 {
	font-size: 1.3em;
}
h3 {
	font-size: 1.15em;
}

h2.wp-block-heading {
	margin: 0.75em 0;
}

.bb-slider .title {
	font-family: var(--font-headline);
    font-weight: bold;
}
.bb-slider .content-container p {
	font-size: 1em;
	line-height: 2;
}
.bb-slider .image-container {
	background-position: 50% 50%;
}

.menu-primary-items a {
	font-family: var(--font-headline);
	font-size: 1em;
	line-height: 2;
}
.menu-secondary-items a {
	font-family: var(--font-headline);
	font-size: 0.85em;
	line-height: 2;
}

.fa-phone::before {
  font-size: 90%;
}

.search-form label input,
button[type=submit],
input[type=submit],
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=tel],
input[type=url],
textarea, select, option {
	font-family: var(--font-headline);
	font-size: 1em;
	line-height: 1.5em;
	color: var(--color-basic);
	background: #f0f5f8;
	border: solid 1px var(--color-middle);
	border-radius: 6px;
	padding: 8px;
	width: 100%;
	-webkit-appearance: none;
	transition: background 0.15s, box-shadow 0.15s;
}
select, option {
	-webkit-appearance: auto;
	padding: 10px 8px;
}

button[type=submit] {
	width: auto;
}

button[type=submit],
input[type=submit] {
	/* font-weight: bold; */
	color: #fff;
	background: var(--color-middle) !important;
}
button[type=submit]:hover,
input[type=submit]:hover  {
	color: #fff;
	background: var(--color-dark) !important;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0;
  border-radius: 6px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #dc3232; /* dunkel rot */
}

/* Sidebar ausblenden */
.blog .sidebar,
.archive .sidebar,
.home .sidebar,
.home.page .sidebar {
    display: none !important;
}

.single-post .post-content {
	margin: 1.75em 0 0 0;
}
/* Post Meta ausblenden*/
.post-meta {
	display: none !important;
}

/* Main-Content auf volle Breite */
.blog .main,
.archive .main,
.home .main, 
.home.page .main,
.blog .site-inner,
.archive .site-inner,
.home .site-inner,
.home.page .site-inner  {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
}

/* Inhaltsbereich auf volle Breite */
.blog .content-container,
.archive .content-container,
.home .content-container,
.home.page .content-container {
    display: block;
    max-width: none !important;
    width: 100% !important;
}
@media (max-width: 600px) {
    .blog .content-container,
    .archive .content-container,
    .home .content-container,
	.home.page .content-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* === 404-Seite volle Breite === */
.search .main, 
.search-results .main,
.error404 .main {
	width: 100% !important;
}

.search .entry,
.search-results .entry,
.error404 .entry {
	max-width: 1000px;
    margin: 2rem auto;
	padding-bottom: 2.5rem;
}
.error404 .entry {
	padding-bottom: 0.75em;
}
.error404 .post-header {
	padding-top: 2.5rem;
} 
.error404 .post-content {
	padding-bottom: 1.75em;
}
.single-post .sidebar-primary, 
.search .sidebar-primary, 
.search-results .sidebar-primary,
.error404 .sidebar-primary {
	margin: 0;
}

/* === Beitragsseite volle Breite === */
.single-post .main {
	width: 100% !important;
}
.single-post .main .loop-container {
	display: block;
}

/* === Beitragsübersicht als 3-Spalten-Grid === */
.blog .loop-container,
.archive .loop-container,
.home .loop-container,
.main .loop-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 2rem auto;
}
.search-results .loop-container {
	margin-top: 1.25rem;
} 
@media (max-width: 1024px) {
	.blog .loop-container,
	.archive .loop-container,
	.home .loop-container,
	.main .loop-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
	.blog .loop-container,
	.archive .loop-container,
	.home .loop-container,
	.main .loop-container {
        grid-template-columns: 1fr;
    }
}

/* Statische Startseite: kein Grid, volle Breite */
.home.page .loop-container{
	display: block;
    grid-template-columns: 1fr;
}


/* Einzelner Beitrag als Karte */
.loop-container .post {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Beitragsbild oben */
.post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.wp-block-buttons {
	margin-bottom: 1.25em;
}
.wp-block-buttons .wp-block-button__link {
	color: var(--color-middle);
	font-size: 1em;
}

/* Read-more Button unter Beiträgen (Archiv / Blog) */
.wp-block-button__link, a.wp-element-button,
.related-post-card .custom-read-more,
.subpage-card .custom-read-more,
.search-results .custom-read-more,
.archive .custom-read-more,
.blog .custom-read-more,
.bb-slider .read-more {
	display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    background: #fff;
    color: var(--color-middle);
    border: 1px solid var(--color-middle);
    border-radius: 6px; 
	padding: 0.55rem 0.8rem 0.5rem 0.8rem;
	
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
}
/* Pfeil – standardmäßig unsichtbar */
.wp-block-button__link::after, a.wp-element-button::after,
.related-post-card .custom-read-more::after,
.subpage-card .custom-read-more::after,
.search-results .custom-read-more::after,
.archive .custom-read-more::after,
.blog .custom-read-more::after,
.bb-slider .read-more::after  {
    content: "\f061";       /* fa-arrow-right */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.25s ease;
}
/* Hover-Effekt */
.wp-block-button__link:hover, a.wp-element-button:hover,
.related-post-card .custom-read-more:hover,
.subpage-card .custom-read-more:hover,
.search-results .custom-read-more:hover,
.archive .custom-read-more:hover,
.blog .custom-read-more:hover,
.bb-slider .read-more:hover  {
	background: var(--color-middle);
    color: #fff !important;
	transform: none;
}
/* Pfeil beim Hover einblenden */
.wp-block-button__link:hover::after, a.wp-element-button:hover::after,
.related-post-card .custom-read-more:hover::after,
.subpage-card .custom-read-more:hover::after,
.search-results .custom-read-more:hover::after,
.archive .custom-read-more:hover::after,
.blog .custom-read-more:hover::after,
.bb-slider .read-more:hover::after  {
    opacity: 1;
    transform: translateX(4px);
}

.wp-block-button__link::after {
	opacity: 1;
    transform: translateX(0);
}

.loop-container .entry {
	margin: 0;
	padding-bottom: 1em;
}

/* Innenabstände & Typografie - Inhalt unter dem Bild */
.entry-header,
.entry-content {
    padding: 1.2rem 1.4rem;
}
.entry-title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.entry-meta {
    font-size: 0.8rem;
    opacity: 0.65;
}
.post-byline {
	color: #999;
	font-size: 0.9em !important;
}

/* Auszug begrenzen */
.entry-content p {
    margin-bottom: 0;
}



/* === HARTE FREIGABE: statische Startseite === */
.home.page .entry-content,
.home.page .entry-content *,
.home.page .entry-header,
.home.page .entry-header * {
    max-width: none !important;
    width: auto !important;
}
.home.page .entry-content > *,
.home.page .entry-header > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* === Pagination unter den Beiträgen === */
.page .loop-container,
.page .loop-wrapper {
    display: block !important;        /* Grid von oben entfernen */
}
.page .loop-pagination {
    display: flex !important;       /* Grid ersetzen */
    justify-content: center !important; /* horizontal zentrieren */
    align-items: center;            /* vertikal ausrichten */
    gap: 1rem;                      /* Abstand zwischen Links/Zahlen */
    width: 100% !important;   /* Container volle Breite */
    max-width: none !important;
    margin: 2rem 0 0 0;       /* Abstand nach oben, optional */
}

.page .loop-pagination a,
.page .loop-pagination span {
    margin: 0;
    padding: 0.5rem 1rem; /* optional, klickbare Fläche */
}

.pagination {
    display: flex;                /* Flexbox für Zentrierung */
    justify-content: center;      /* horizontal zentrieren */
	margin: 0.75em 0;
}

.pagination .nav-links {
    display: flex !important;     /* Flexbox statt Grid */
    justify-content: center;      /* Links innerhalb von nav-links zentrieren */
    gap: 1rem;                    /* Abstand zwischen den Links/Pfeilen */
    flex-wrap: wrap;              /* optional: bei vielen Seiten umbrechen */
    width: auto;                  /* Breite an Inhalt anpassen */
}
.pagination .nav-links a,
.pagination .nav-links span {
    margin: 0;           /* Blockabstände entfernen */
    padding: 0.5rem 1rem; /* klickbare Fläche */
	
	border: 1px solid var(--color-middle);
    border-radius: 6px; /* gleiche Rundung wie Button */
    background-color: #fff;
    color: var(--color-middle);
}
/* Hover-Effekt */
.pagination .nav-links a:hover,
.pagination .nav-links a:active,
.pagination .nav-links a:focus  {
    background-color: var(--color-middle);
    color: #fff !important;
}
/* Aktuelle Seite ohne Links und ausgegraut*/
.pagination .nav-links .current {
	border-color: #b7dbe4;	/* hell türkis */
    background: #e9f4f7;	/* sehr hell türkis */
    color: var(--color-middle);
    cursor: default;
    transform: none;
}
.pagination .prev::after, 
.pagination .next::after {
	font-size: 20px;
	top: 3px;
}

/* === Vor- und Zurueck-Navigation unter einem Beitrag === */
.post-nav-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
	gap: 2em;
	margin: 2em 0 0 0;
}
/* Wenn beim ersten Post nur ein Element im Grid ist */
.post-nav-row .next-post:only-child {
    grid-column: 2; 
}
@media(max-width: 700px) {
    .post-nav-row  {
        grid-template-columns: 1fr;
    }
	.post-nav-row .next-post:only-child {
        grid-column: auto;
    }
}

.post-nav-card {
    display: flex;
    border: 1px solid var(--color-middle);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    background: #fff;
}
.post-nav-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	background-color: #e9f4f7;
}

.post-nav-card .nav-thumb {
    width: 35%;
    overflow: hidden;
}
.post-nav-card .nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-nav-card .nav-content {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}
.post-nav-card .nav-label {
    color: var(--color-middle);
    margin-bottom: 6px;
	font-family: var(--font-headline);
}
.post-nav-card h4 {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.3;
}
.post-nav-card.next-post {
    text-align: right;
}
.post-nav-card.next-post .nav-content {
    align-items: flex-end;
}


.social-media-icons i {
	vertical-align: text-top;
	line-height: 1.7em;
}
.social-media-icons a {
    color: var(--color-middle) !important;
    background-color: #fff;
	border: 1px solid var(--color-middle);
	width: 1.9em;
	height: 1.9em;
}

/* Hover-Effekt mit Pfeil ersetzen wir durch Farbwechsel */
.social-media-icons a:hover {
    background-color: var(--color-middle) !important;
    color: #fff !important;
}



.bb-slider .max-width .title {
  max-width: 100% !important;
}
.bb-slider .max-width p {
  max-width: 100% !important;
}
.bb-slider .dot-navigation a {
  background: rgba(204, 204, 204, 0.5);
}


.primary-header {
	padding: 1.125em 1rem 0.75em 1rem;
}
.secondary-header {
	max-width: 1000px;
	padding: 0 1rem;
	margin: 0 auto;
}
.main-content-container {
	padding: 0 1rem;
	min-height: auto;
}
@media all and (min-width: 1024px) {
	.primary-header {
		padding: 1.125em 0 0.75em 0;
	}
	.secondary-header {
		padding: 0 0;
	}
	.main-content-container {
		padding: 0 0;
	}
}

.site-header .social-media-icons {
    margin: 0.85em 0 0.75em 0;
}
.menu-secondary-container {
	margin:0.75em 0 0.75em 11.112%;
}
.menu-secondary-text {
	margin: 0 auto 0.5em 0;
	color: var(--color-middle);
	font-family: var(--font-headline);
	font-size: 0.9em;
	line-height: 1.2;
	padding-top: 1.5em;
	padding-bottom: 0.5em;
}

p {
	margin: 0.75em 0;
}

/* .box { */
	/* border: 1px solid #aaa; */
/* } */

/* .post-meta { */
	/* padding-top: 0; */
/* } */
/* .post-categories { */
	/* font-size: 0.75em; */
	/* color: #999; */
	/* font-style: italic; */
/* } */
/* .post-categories a { */
	/* font-weight: normal; */
	/* color: rgba(39, 33, 237, 0.6); */
/* } */

/* ul.termine { */
	
/* } */
/* ul.termine li { */
	/* padding-bottom: 1em; */
	/* margin-bottom: 1.5em; */
	/* list-style-type: circle; */
	/* border-bottom: 1px solid transparent; */
	/* border-image-source: linear-gradient(to right, #2721ed, #17e6c3); */
	/* border-image-slice: 5; */
/* } */

.widget_custom_html .post-date {
    font-size: 12px;
    line-height: 1;
    font-style: italic;
}

.widget-title {
    font-size: 1em;
	text-transform: none;
	letter-spacing: 0;
}

.bbp-reply-post-date, .post-comments-link, .post-byline, .menu-unset ul a, .design-credit, .comment-list .comment-footer {
  font-size: 0.95em;
  line-height: 2;
}

.menu-primary-items li.menu-item-has-children > a::after, .menu-unset ul li.menu-item-has-children > a::after {
    font-size: 0.8em;
}


p.small-margin {
	margin: 0.1em 0;
}

.alignleft img {
	margin-right: 20px;
}
.alignright img {
	margin-left: 20px;
}


.search-header {
	margin-top: 2em;
	padding-bottom: 2.5em;
	padding-top: 2em;
}
/* @media all and (min-width: 62.5em) { */
	/* .search-header { */
		/* padding-top: 2em; */
	/* } */
/* } */

.entry .post-content .search-form {
	padding-bottom: 1.5rem;
}

/* Grundlayout */
.search-form {
    display: flex;
    gap: 10px;
	
}
/* Label sauber blocken */
.search-form label {
    flex: 1;
}
/* Suchfeld */
.search-form .search-field {
    width: 100%;
}

/* Button */
.search-form .search-submit {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 📱 Mobile Layout */
@media (max-width: 600px) {

    .search-form {
        flex-direction: column;     /* untereinander */
        align-items: center;        /* alles zentriert */
    }
    .search-form label,
    .search-form .search-submit {
        width: 100%;
        max-width: 320px;           /* schöne Handybreite */
    }
    .search-form .search-submit {
        margin-top: 12px;           /* Abstand */
        justify-content: center;    /* Text + Icon zentrieren */
    }
}


/* Header unter dem großen Bild mehr Abstand */
.page-template .post-header {
	padding-top: 2.5em;
}
/* Großes Bild oben auf der Seite 20% in der Höhe reduziert */
.single-post .featured-image,
.page .featured-image {
  padding-bottom: 40%;
}
.subpage-grid .featured-image,
.search-results .featured-image,
.page-related-posts .featured-image {
  padding-bottom: 50%;
}

/*Alle Spalten, die direkte Kinder eines .wp-block-columns-Containers sind und die Spalten auf Mobilgeräten gestapelt werden dürfen */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0; /* alle Spalten starten bei 0 Breite und werden dann gleichmäßig verteilt. */
    flex-grow: 1; /* alle Spalten sollen gleichmäßig den verfügbaren Platz ausfüllen. */
    padding-right: 25px;
}
/* Wenn der Inhalt auf schmalen Geräten untereinander dargestellt wird, kein Abstand links */
@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
    padding-left: 0;
  }
}

.wp-block-image img {
  border-radius: 12px;
}
.wp-block-image figcaption {
	font-size: 1em;
	color: #666;
	line-height: 1.2em;
	margin: 0.8em 0 0 0;
}
:where(.is-layout-grid) {
	gap: 1em;
}
 
 /* Mobile: Bilder im Grid zentrieren */
@media (max-width: 768px) {
    .wp-block-group.is-layout-grid figure.wp-block-image {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Grundlayout Footer */
.site-footer {
    background-color: #fff;
    color: #666 !important;
	border-top: 2px solid transparent;
    border-image: linear-gradient(to right, var(--color-dark), var(--color-light)) 1;
    text-align: center;
	margin-top: 2em;
}
/* Footer Texte untereinander */
.site-footer .site-credit,
.site-footer .design-credit {
    float: none;
}
.site-footer .site-credit {
	display: block;
	font-family: var(--font-headline);
	font-size: 0.85em;
	line-height: 1em;
}
.site-footer .design-credit {
	margin-top: 0.5em;
	font-size: 0.75em;
	line-height: 1.5em;
}
/* Alle Texte & Links */
.site-footer *,
.site-footer a {
    color: #666 !important;
}
/* Hover */
.site-footer a:hover {
    color: var(--color-middle) !important;
}

.site-footer .footer-menu {
	font-family: var(--font-headline);
    text-align: center;
}
.site-footer .footer-menu ul.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
	margin-bottom: 1.2em;
}
.site-footer .footer-menu ul.footer-nav li {
    display: inline-block;
}
.site-footer .footer-menu ul.footer-nav li a {
    color: #666;
    text-decoration: none;
    font-size: 0.85em;
	line-height: 1em;
}
.site-footer .footer-menu ul.footer-nav li + li::before {
    content: "|";
    margin: 0 12px;
    color: #bbb;
}


/* .site-footer .footer-menu ul.footer-nav li a:hover { */
    /* color: var(--color-middle); */
/* } */






hr.wp-block-separator {
    border: none;
    height: 2px;
    background: linear-gradient(to right, var(--color-dark), var(--color-light));
	margin: 2.25rem 0;
}

ul.wp-block-list {
	margin: 1em 2em;
}

.wp-block-media-text > .wp-block-media-text__content {
	padding-right: 0; 
}


.subpage-grid,
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 1024px) {
	.subpage-grid,
	.related-posts-grid	{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
	.subpage-grid,
	.related-posts-grid {
        grid-template-columns: 1fr;
    }
}

.subpage-card {
    border: 1px solid #ddd;
    border-radius: 6px;
	/* border-top: 2px solid transparent; */
    /* border-image: linear-gradient(to right, var(--color-dark), var(--color-light)) 1; */
}
.subpage-card .card-header {
	padding: 1rem;
	padding-bottom: 0;
	margin-bottom: 1.5rem;
}
.subpage-card .card-content {
	padding: 1rem;
	padding-top: 0;
	margin-top: 1em;
}

.subpage-card img,
.related-post-card img {
    width: 100%;
    height: auto;
	transition: transform 0.25s;
}
.subpage-card a.custom-read-more {
	margin-top: 1em;
}

.related-post-card {
	position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}
.related-post-card::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
	background-image: linear-gradient(to right, var(--color-dark), var(--color-light));
}
.related-post-card .post-header {
	padding: 1.5em 5.883804% 0;
	margin-bottom: 1.5rem;
}
.related-post-card .post-content {
	padding-bottom: 1rem;
	padding-top: 0;
}

h2.search-results-title,
h2.page-related-posts-title {
    text-align: center;
    margin-bottom: 1em;
}

.page-related-posts {
	margin-bottom: 2rem;
}