/*
Theme Name: Kinderthema für VEDD
Template: generatepress
Author: Bettina Heuser
Author URI: https://avida-design.de
*/


/* ==========================================================
   1. SCHRIFTEN
   ========================================================== */

/* Roboto Regular */
@font-face {
    font-display: fallback;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('https://vedd.de/fonts/roboto-v51-latin-regular.woff2') format('woff2');
}

/* Roboto Italic */
@font-face {
    font-display: fallback;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('https://vedd.de/fonts/roboto-v51-latin-italic.woff2') format('woff2');
}

/* Roboto 500 */
@font-face {
    font-display: fallback;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('https://vedd.de/fonts/roboto-v51-latin-500.woff2') format('woff2');
}

/* Roboto 500 Italic */
@font-face {
    font-display: fallback;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url('https://vedd.de/fonts/roboto-v51-latin-500italic.woff2') format('woff2');
}

/* Roboto 600 */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: url('https://vedd.de/fonts/roboto-v51-latin-600.woff2') format('woff2');
}

/* Roboto 600 Italic */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 600;
    src: url('https://vedd.de/fonts/roboto-v51-latin-600italic.woff2') format('woff2');
}

/* Roboto 700 */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('https://vedd.de/fonts/roboto-v51-latin-700.woff2') format('woff2');
}

/* Roboto 700 Italic */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url('https://vedd.de/fonts/roboto-v51-latin-700italic.woff2') format('woff2');
}

/* Roboto 800 */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 800;
    src: url('https://vedd.de/fonts/roboto-v51-latin-800.woff2') format('woff2');
}

/* Roboto 800 Italic */
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 800;
    src: url('https://vedd.de/fonts/roboto-v51-latin-800italic.woff2') format('woff2');
}


/* ==========================================================
   2. VARIABLEN
   ========================================================== */

:root {
    --vedd-blau: #003e7d;
    --vedd-blau-event: #004b8d;
    --vedd-orange: #f59c00;

    --vedd-grau: #f4f4f4;
    --vedd-grau-hell: #f0f0f0;
    --vedd-border: #ddd;

    --vedd-text-grau: #555;
    --vedd-text-hell: #666;

    --vedd-weiss: #fff;
    --vedd-inhaltsbreite: 1160px;
}


/* ==========================================================
   3. BASIS & TYPOGRAFIE
   ========================================================== */

html {
    font-size: 100%;
    -webkit-hyphens: auto;
    hyphens: auto;

    /* Wortlänge min. 8 Zeichen, mind. 4 vor und 4 nach dem Trennstrich */
    hyphenate-limit-chars: 8 4 4;

    /* Safari (ungeprüft) */
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
}

/* Überschriften und Inhaltsverzeichnis: strenger */
h1, h2, h3, h4,
.eb-toc-container {
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
    overflow-wrap: break-word;
}

body,
.entry-content {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
}

p,
.entry-title a,
.sidebar .widget .widget-title {
    -moz-hyphens: auto;
    hyphens: auto;
}

.site-description {
    font-weight: 500;
}
/* Seitentitel nur auf direkten Unterseiten von „Projekte“ einblenden */
.page.parent-pageid-876 h1.entry-title {
    display: block;
    font-weight:normal;}
 .page .featured-image img {margin-top:24px;}   

h2.entry-title {
    font-size: 1.2em;
}

.single-post .entry-title {
    text-align: left;
}

.one-container .site-content {
    padding-top: 2%;
}


/* Links */

a:hover,
a:focus,
a:active {
    color: var(--vedd-blau);
}


/* Überschriften */

h1 {
    font-size: 1.75em;
    line-height: 1.5;
    font-weight: 500;
}

h2 {
    font-size: 1.5em;
    line-height: 1.5;
    font-weight: 400;
}

h3 {
    font-size: 1.25em;
    line-height: 1.5;
    font-weight: 400;
}

h4 {
    font-size: 1.1em;
    line-height: 1.5;
    font-weight: 400;
}


/* Hervorgehobener Text */

strong {
    color: var(--vedd-blau);
}


/* Zitate */

blockquote {
    font-size: 1em;
    border-left-color: var(--vedd-blau);
    padding-top: 7px;
    padding-bottom: 12px;
}


/* Beitragsbilder */

.featured-image img {
    border: 1px solid #dfdfdf;
}

/* 2. Icons vor Überschrift */
.icon-vorlage-ueberschrift {
    margin: -7px 10px 7px 0 !important;
}


/* ----------------------------------------------------------
   Veröffentlichungen
   ---------------------------------------------------------- */

/* Beitragsdatum auf Einzelseiten ausblenden */
.single.vedd-veroeffentlichung .entry-meta {
    display: none;
}

/* Beitragsbild auf Einzelseiten */
.single.vedd-veroeffentlichung .featured-image img {
    width: 300px;
}

/* ==========================================================
   4. HEADER / SERVICELEISTE
   ========================================================== */

/* Website-Untertitel */
.site-description a:hover {
    color: var(--vedd-blau) !important;
    text-decoration: none;
}


/* Obere Serviceleiste */

.serviceleiste-inner {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px 10px;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kontaktbereich {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 25px;
    margin-left: auto;
}

.kontaktbereich p {
    margin-top: 0;
    margin-bottom: 0;
}

.mail-kontakt {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mail-kontakt a {
    text-decoration: none;
}


/* ==========================================================
   5. STARTSEITE
   ========================================================== */


/* ----------------------------------------------------------
   Startseiten-Kacheln
   ---------------------------------------------------------- */

/* Desktop: 4er-Raster, Aktuell-Kachel über zwei Spalten */
.wp-block-columns.startseiten-kachelreihe-oben,
.wp-block-columns.startseiten-kachelreihe-unten {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem !important;
}

.wp-block-columns.startseiten-kachelreihe-oben > .wp-block-column:first-child {
    grid-column: span 2;
}

/* WordPress-Spaltenbreiten zurücksetzen */
.wp-block-columns.startseiten-kachelreihe-oben > .wp-block-column,
.wp-block-columns.startseiten-kachelreihe-unten > .wp-block-column {
    width: auto !important;
    flex: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
    min-width: 0;
}

/* Kacheln auf volle Höhe */
.startseiten-kachelreihe > .wp-block-column {
    display: flex;
}

/* Kachel vertikal aufbauen */
.startseiten-kachel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Letztes Element / Pfeil nach unten */
.startseiten-kachel > :last-child {
    margin-top: auto;
}

/* Überschriften in den Startseiten-Kacheln */
.startseiten-kachel h2,
.startseiten-kachel h3 {
    font-weight: 500;
}
/* ----------------------------------------------------------
   Kachel-Rahmen / Kreuz
   ---------------------------------------------------------- */

.kachel-rahmen,
.kachel-rahmen-aktuell {
    position: relative;
}

/* Senkrechte Linie */
.kachel-rahmen::before,
.kachel-rahmen-aktuell::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 0;
    bottom: 0;
    width: 10px;
}

/* Waagerechte Linie */
.kachel-rahmen::after,
.kachel-rahmen-aktuell::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1.3rem;
    width: 5rem;
    height: 10px;
}

/* Weißes Kreuz */
.kachel-rahmen::before,
.kachel-rahmen::after {
    background: var(--vedd-weiss);
}

/* Oranges Kreuz in der Aktuell-Kachel */
.kachel-rahmen-aktuell::before,
.kachel-rahmen-aktuell::after {
    background: var(--vedd-orange);
}


/* ----------------------------------------------------------
   Animation nur für die Aktuell-Kachel
   ---------------------------------------------------------- */

/* Senkrechte Linie fährt von oben nach unten ein */
.kachel-rahmen-aktuell::before {
    transform: scaleY(0);
    transform-origin: top;
    animation: vedd-linie-senkrecht 0.7s ease-out forwards;
}

/* Waagerechte Linie fährt anschließend nach rechts ein */
.kachel-rahmen-aktuell::after {
    transform: scaleX(0);
    transform-origin: left;
    animation: vedd-linie-waagerecht 0.7s ease-out 0.35s forwards;
}

@keyframes vedd-linie-senkrecht {
    to {
        transform: scaleY(1);
    }
}

@keyframes vedd-linie-waagerecht {
    to {
        transform: scaleX(1);
    }
}
/*das buch animieren*/
.vedd-buch-animiert {
    transform-origin: center;
    animation: vedd-buch 2.4s ease-in-out;
}

@keyframes vedd-buch {
    0% {        transform: scale(1) rotate(0deg);    }

    20% {        transform: scale(1.04) rotate(-1deg);    }

    40% {        transform: scale(1.04) rotate(1deg);    }

    60% {        transform: scale(1) rotate(0deg);    }

    100% {        transform: scale(1) rotate(0deg);    }
}
/* ----------------------------------------------------------
   Pfeil / klickbare Kacheln
   ---------------------------------------------------------- */

.kachel-pfeil {
    margin: 0;
    color: var(--vedd-blau) !important;
}

.kachel-pfeil a {
    text-decoration: none;
    color: var(--vedd-blau) !important;
}

/* Ganze Kachel klickbar, wenn der Pfeil verlinkt ist */
.startseiten-kachel .kachel-pfeil a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
}


/* ----------------------------------------------------------
   News
   ---------------------------------------------------------- */

.news-startseite-ueberschrift a {
    text-decoration: none;
}


/* ----------------------------------------------------------
   Veranstaltungen auf der Startseite
   ---------------------------------------------------------- */

.home .tribe-events-widget-events-list__header {
    display: none !important;
}

.tribe-common h3 {
    font-size: 1.1em !important;
}

.tribe-events-widget-events-list__events {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

/* Einzelne Veranstaltung als Karte */
.tribe-events-widget-events-list__event-row {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin: 0 !important;
    padding: 1rem !important;
    background: var(--vedd-grau);
}

/* Datum links */
.tribe-events-widget-events-list__event-date-tag {
    min-width: 3.5rem;
    text-align: center;
}

.tribe-events-widget-events-list__event-date-tag-month {
    display: block;
    color: #444;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
        border-left:5px orange solid !important;
}

.tribe-events-widget-events-list__event-date-tag-daynum {
    display: block;
    color: var(--vedd-blau-event);
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
}

/* Rechter Bereich */
.tribe-events-widget-events-list__event-wrapper {
    min-width: 0;
}

/* "Kalender anzeigen" */
.tribe-events-widget-events-list__view-more {
    margin-top: 1.5rem;
    text-align: right;
}


/* ==========================================================
   6. BLOG / ARCHIVE
   ========================================================== */

/* Karte: Bild links, Inhalt rechts */
.blog .inside-article,
.archive .inside-article {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto;
    background: var(--vedd-grau);
    padding: 0;
    overflow: hidden;
}

/* Bild links */
.blog .post-image,
.archive .post-image {
    grid-column: 1;
    grid-row: 1 / 4;
    margin: 0;
    overflow: hidden;
    align-self: start;
    height: 240px;
}

.blog .post-image a,
.archive .post-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Alle Bilder gleich hoch */
.blog .post-image img,
.archive .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Datum und Titel */
.blog .entry-header,
.archive .entry-header {
    grid-column: 2;
    grid-row: 1;
    padding: 0.75rem 1.5rem 0;
    display: flex;
    flex-direction: column;
}

/* Datum über Titel */
.blog .entry-header .entry-meta,
.archive .entry-header .entry-meta {
    order: -1;
    margin-bottom: 0.6rem;
}

/* Titel */
.blog .entry-title,
.archive .entry-title {
    font-size: 1.1em;
    line-height: 1.3;
    margin: 0;
}

/* Kategorie unter dem Titel */
.blog footer.entry-meta,
.archive footer.entry-meta {
    display: block;
    grid-column: 2;
    grid-row: 2;
    padding: 0.5rem 1.5rem 0;
    margin: 0;
    font-size: 0.85em;
}

/* Weiterlesen-Bereich */
.blog .entry-summary,
.archive .entry-summary {
    grid-column: 2;
    grid-row: 3;
    padding: 1rem 1.5rem 1.5rem;
    margin: 0;
}

/* Auszug ausblenden */
.blog .entry-summary > p:not(.read-more-container),
.archive .entry-summary > p:not(.read-more-container) {
    display: none;
}

/* Weiterlesen */
.blog .read-more-container,
.archive .read-more-container {
    display: block;
    margin: 0;
}

.blog .read-more,
.archive .read-more {
    display: inline-block;
    text-decoration: none;
}

/* Letzter Beitrag: Bild auf volle Kartenhöhe */
.blog article:last-of-type .post-image,
.archive article:last-of-type .post-image {
    height: 100%;
}

.blog article:last-of-type .post-image img,
.archive article:last-of-type .post-image img {
    aspect-ratio: 2 / 1;
}


/* ==========================================================
   7. SIDEBAR
   ========================================================== */

.sidebar-box {
    background: var(--vedd-grau);
    padding: 20px;
}

/* Aktuelles: einzelne Beiträge */
.sidebar-aktuelles-item {
    border-bottom: 1px solid var(--vedd-border);
    padding-bottom: 12px;
    margin-bottom: -20px;
}

/* Beim letzten Beitrag keine Linie */
.sidebar-aktuelles-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/*Fusszeile weisser text links*/
.footer-bar-align-right .copyright-bar {font-size:1rem;}

/* ==========================================================
   7. Footer
   ========================================================== */
.logo-footer {margin-top:20px}

.footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 6px;
}

.footer-menu li a {
	text-decoration:none;}

.footer-menu .sub-menu {
    padding-left: 18px;
	padding-top:5px;
}

.icon-vorlage-ueberschrift-footer  {margin: -7px 10px 15px -5px;}
.footer-menu h3 {font-size:1.5em !important;}


.site-footer {border-top: 4px solid #f5a000;}
.site-footer a {text-decoration:none;}
.footer-bar .widget_nav_menu li {padding:0;}

/* ==========================================================
   8. INHALTSSEITEN
   ========================================================== */


/* ----------------------------------------------------------
   Inhaltsverzeichnis
   ---------------------------------------------------------- */

.eb-toc-container {
    padding: 10px 10px 12px 18px !important;
    color: #003e7d;
    background: transparent !important;
    border-left: 3px solid var(--vedd-orange);
    margin: 2% 0 3% !important;
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
}
.eb-toc-container.list-style-none .eb-toc__list li a::before {
    content: "▾";
    margin-right: 8px;
}

.eb-toc-title {
    color: var(--vedd-blau) !important;
    font-size: 1.2em !important;
}

.eb-toc-container .eb-toc__list-wrap > .eb-toc__list li > a {
    font-size: 1rem;
    padding-right:0px !important;
}
@media (max-width: 768px) {
    .eb-toc-container {
        padding-left: 10px !important;
        padding-right: 5px !important;
			margin-bottom:20px !important;
    }}

/* ----------------------------------------------------------
   Verband > Geschichte
   ---------------------------------------------------------- */

.geschichte-epoche {
    background: var(--vedd-grau-hell);
    padding: 12px 18px;
    margin-top: 45px;
    margin-bottom: 25px;
}


/* ----------------------------------------------------------
   Breadcrumbs
   ---------------------------------------------------------- */

.vedd-breadcrumbs {
    background: var(--vedd-grau);
    padding: 10px 20px;
    margin: -27px 0 0;
    font-size: 0.9rem;
    color: var(--vedd-text-hell);
}

.vedd-breadcrumbs a {
    color: var(--vedd-blau);
    text-decoration: none;
}

.vedd-breadcrumbs a:hover {
    text-decoration: underline;
}

.vedd-breadcrumbs .breadcrumb_last,
.vedd-breadcrumbs .breadcrumb_last strong {
    color: var(--vedd-blau);
    font-weight: 600;
}

/* "Start" durch Haus-Icon ersetzen */
.vedd-breadcrumbs > div > span > span:first-child > a {
    font-size: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("https://vedd.de/fonts/home.png") center / contain no-repeat;
    vertical-align: 20px;
}



/* ----------------------------------------------------------
   Gemeinschaften
   ---------------------------------------------------------- */

.gemeinschaften-card {
    display: grid;
    grid-template-columns: 42% 58%;
    background: var(--vedd-grau);
    margin-bottom: 30px;
    overflow: hidden;
}

/* Beitragsbild */
.gemeinschaften-card > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Textbereich */
.gemeinschaften-card-content {
    padding: 28px 32px;
}

.gemeinschaften-card-content > * {
    margin-top: 0;
    margin-bottom: 10px;
}

.gemeinschaften-card h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 2px;
    font-weight:500;
}

.gemeinschaften-card h3 a {
    text-decoration: none;
}



/* ----------------------------------------------------------
   Karte
   ---------------------------------------------------------- */

.vedd-karte-bereich {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* ----------------------------------------------------------
   H2-Balken Fullwidth
   ---------------------------------------------------------- */

.h2-balken {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 30px;
    background: var(--vedd-grau);
}

.h2-balken h2 {
    font-size: 1.5em;
}

.h2-balken-inner {
    max-width: var(--vedd-inhaltsbreite);
    margin: 0 auto;
    padding: 10px 0;
}


/* 1. Download Button zu erst - # danach  */

.wp-block-file {
    display: flex  !important;
    align-items: center  !important;
    gap: 15px  !important;
}

.wp-block-file .wp-block-file__button {
    order: 1  !important;
}

.wp-block-file > a:not(.wp-block-file__button) {
    order: 2  !important;
}
.wp-block-file__button {
	background-color: #003e7d !important;
    border-radius: 6px !important;
}
.wp-block-file__button:hover,
.wp-block-file__button:focus {
    background-color: #00a46a !important;
    color: #000 !important;
}




/* ----------------------------------------------------------
   Accordion
   ---------------------------------------------------------- */

span.sp-eab-accordion-title-text {
    hyphens: none !important;
    overflow-wrap: normal;
    word-break: normal;
}


/* ==========================================================
   9. THE EVENTS CALENDAR
   ========================================================== */


/* ----------------------------------------------------------
   Einzelveranstaltung
   ---------------------------------------------------------- */

.tribe-events-event-image {
    max-width: 500px;
    margin: 0 0 30px;
}

.tribe-events-meta-group,
.tribe-events-venue-map {
    width: auto;
}

.tribe-events-meta-group {
    margin-left: 2%;
}


/* ----------------------------------------------------------
   Veranstaltungsliste
   ---------------------------------------------------------- */

/* Suchleiste */
.tribe-events-c-events-bar {
    background: var(--vedd-grau);
    border: 0;
    padding: 12px 16px;
}

/* Suchfeld */
.tribe-events-c-search__input-control input {
    background: var(--vedd-weiss);
    border: 1px solid var(--vedd-border);
    min-height: 46px;
    padding: 0 15px;
}

/* Ansichten Liste / Monat / Tag */
.tribe-events-c-view-selector__list-item-link {
    color: var(--vedd-blau-event);
    text-decoration: none;
}

.tribe-events-c-view-selector__list-item--active
.tribe-events-c-view-selector__list-item-link {
    font-weight: 700;
}

/* Große Tageszahl links */
.tribe-events-calendar-list__event-date-tag-daynum {
    color: var(--vedd-blau-event);
    font-size: 2.1rem;
    font-weight: 600;
}


/* ----------------------------------------------------------
   Veranstaltung – Bild und Text
   ---------------------------------------------------------- */

/* Bild und Text auf gleiche Höhe bringen */
.tribe-events-calendar-list__event-wrapper {
    align-items: stretch !important;
}

/* Bildbereich */
.tribe-events-calendar-list__event-featured-image-wrapper {
    display: flex;
    overflow: hidden;
}

/* Bild füllt seinen Bereich vollständig */
.tribe-events-calendar-list__event-featured-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Textbereich */
.tribe-events-calendar-list__event-details {
    background: var(--vedd-grau);
    padding: 2rem !important;
}


/* ----------------------------------------------------------
   Veranstaltungsinformationen
   ---------------------------------------------------------- */

/* Titel */
.tribe-events-calendar-list__event-title-link {
    color: var(--vedd-blau-event) !important;
    font-size: 1.5rem;
    line-height: 1.25;
}

/* Datum / Uhrzeit */
.tribe-events-calendar-list__event-datetime-wrapper {
    margin-bottom: 0.75rem !important;
    color: var(--vedd-text-grau);
}

/* Veranstaltungsort */
.tribe-events-calendar-list__event-venue {
    margin-bottom: 1rem !important;
    font-style: normal !important;
}

.tribe-events-calendar-list__event-venue-title {
    color: #222;
    font-weight: 600;
}


/* ----------------------------------------------------------
   Weiterlesen
   ---------------------------------------------------------- */

.tribe-events-calendar-list .read-more-container {
    margin-top: 1.25rem;
}

.tribe-events-calendar-list .read-more.button {
    display: inline-block;
    background: var(--vedd-blau-event);
    color: var(--vedd-weiss) !important;
    text-decoration: none;
    padding: 0.65rem 1rem;
}


/* ----------------------------------------------------------
   Navigation
   ---------------------------------------------------------- */

/* Navigation ausblenden */
.tribe-events-calendar-list-nav {
    display: none !important;
}

/* Buttons */
.tribe-common button {
    padding: 10px;
}

/* ==========================================================
   10. GENERATEBLOCKS / GLOBALE ANPASSUNGEN
   ========================================================== */

/*
 * Diese beiden Regeln sind relativ global.
 * Vorerst beibehalten, später ggf. auf konkrete Bereiche begrenzen.
 */

.gb-text {
    margin-bottom: 2px;
}

.gb-loop-item {
    padding: 0 !important;
}

/* ==========================================================
   11. RESPONSIVE – TABLET
   ========================================================== */

@media (min-width: 601px) and (max-width: 1024px) {

    /* Startseiten-Kacheln: 2 Spalten */
    .wp-block-columns.startseiten-kachelreihe-oben,
    .wp-block-columns.startseiten-kachelreihe-unten {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Aktuell-Kachel über volle Breite */
    .wp-block-columns.startseiten-kachelreihe-oben > .wp-block-column:first-child {
        grid-column: 1 / -1;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {

    /* Beitragsbild */
    .featured-image {
        width: 100%;
        max-width: 100%;
    }
}


@media (max-width: 1024px) {

    /* Karte */
    .container-karte {
        width: 90%;
    }

    /* Veranstaltungen Startseite */
    .tribe-events-widget-events-list__events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================
   12. RESPONSIVE – MOBIL
   ========================================================== */
   
/* Tablet und Handy Überschrift-HG grau  */
@media (max-width: 1024px) {
    .h2- {
        padding-left: 30px !important;
    }
}
    /* Bilder im text auf 100% */

@media (max-width: 768px) {
    .single-post .entry-content .wp-block-image img,
    .parent-pageid-876 .entry-content .wp-block-image img {
        width: 100% !important;
        height: auto;
    }
}
   

@media (max-width: 768px) {

    /* Serviceleiste */
    .serviceleiste-inner {
        display: flex;
        flex-direction: column !important;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
    }

    .social-icons {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .kontaktbereich {
        margin-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    .kontaktbereich p {
        margin: 0;
        white-space: nowrap;
    }

    .mail-kontakt {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Gemeinschaften */
    .gemeinschaften-card {
        grid-template-columns: 1fr;
    }

    .gemeinschaften-card > img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    .gemeinschaften-card-content {
        padding: 10px;
    }

    /* Accordion */
    span.sp-eab-accordion-title-text {
        font-size: 16px !important;
        line-height: 1.3 !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }
}


@media (max-width: 600px) {

    /* Startseiten-Kacheln */
    .wp-block-columns.startseiten-kachelreihe-oben,
    .wp-block-columns.startseiten-kachelreihe-unten {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .wp-block-columns.startseiten-kachelreihe-oben > .wp-block-column:first-child {
        grid-column: span 1;
    }

    /* Veranstaltungen Startseite */
    .tribe-events-widget-events-list__events {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ==========================================================
   Veröffentlichungen – responsive Karten
   ========================================================== */

/* ----------------------------------------------------------
   Tablet hochkant: drei Karten
   ---------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {

    :is(#impulse, #buecher, #abschlussarbeiten),
    :is(#impulse, #buecher, #abschlussarbeiten) > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    :is(#impulse, #buecher, #abschlussarbeiten) .vedd-buchcover {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 30px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    :is(#impulse, #buecher, #abschlussarbeiten)
    .vedd-buchcover .gb-loop-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        box-sizing: border-box !important;
    }

    :is(#impulse, #buecher, #abschlussarbeiten)
    .vedd-buchcover .gb-loop-item > img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4;
        object-fit: cover !important;
        object-position: center !important;
    }
}


/* ----------------------------------------------------------
   Handy: zwei Karten
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    /* Gesamte Bereiche auf die sichtbare Breite begrenzen */
    :is(#impulse, #buecher, #abschlussarbeiten),
    :is(#impulse, #buecher, #abschlussarbeiten) > div {
        width: calc(100vw - 48px) !important;
        max-width: calc(100vw - 48px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Zwei Karten nebeneinander */
    :is(#impulse, #buecher, #abschlussarbeiten) .vedd-buchcover {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Einzelne Karte */
    :is(#impulse, #buecher, #abschlussarbeiten)
    .vedd-buchcover .gb-loop-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        box-sizing: border-box !important;
    }

    /* Einheitliches Hochformat */
    :is(#impulse, #buecher, #abschlussarbeiten)
    .vedd-buchcover .gb-loop-item > img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        box-sizing: border-box !important;
    }

    /* Schrift für die schmaleren Karten anpassen */
    :is(#impulse, #buecher, #abschlussarbeiten)
    .gb-loop-item :is(h2, h3) {
        font-size: 17px !important;
        line-height: 1.35 !important;
		margin-top:10px;
        overflow-wrap: anywhere;
    }

    :is(#impulse, #buecher, #abschlussarbeiten)
    .gb-loop-item p {
        font-size: 15px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere;
    }

    :is(#impulse, #buecher, #abschlussarbeiten)
    .gb-loop-item a {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    /* Paginierung über die volle sichtbare Breite */
    :is(#impulse, #buecher, #abschlussarbeiten) nav,
    :is(#impulse, #buecher, #abschlussarbeiten) .pagination {
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}
/* ==========================================================
   13. ACCESSIBILITY / BEWEGUNG
   ========================================================== */

/*
 * Hier können wir später die Animation der Aktuell-Kachel ergänzen.
 * prefers-reduced-motion kommt dann ebenfalls hier hinein.
 */