/**
 * Theme Name:     Vinzenz Pauli Astra Child
 * Template:       astra
 * Text Domain:    vinzenz-pauli-astra-child
 * Version:        1.0.0
 */

:root{
  --vp-bg:#1A1A1A; --vp-text:#FFFFFF;
  --vp-primary:#4B6E6A; --vp-secondary:#609896;
}

/* Basis */
body{ background:var(--vp-bg); color:var(--vp-text); }
img,svg,video{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--vp-secondary); color:#000; }
:focus-visible{ outline:2px solid var(--vp-secondary); outline-offset:2px; }
.ast-page-title,.entry-title,.page .entry-header{ display:none !important; }
.page .entry-header{ margin:0 !important; padding:0 !important; }

/* Buttons/Menü */
.elementor-button, .elementor-button:visited{ font-family:"New Tegomin",serif; }
.elementor-button--view-primary{ background:var(--vp-primary); color:#fff; border-color:var(--vp-primary); }
.elementor-button--view-primary:hover, .elementor-button--view-primary:focus{ background:var(--vp-secondary); border-color:var(--vp-secondary); color:#fff; }
.elementor-button:hover, .elementor-button:focus{ text-decoration:none; }
.main-header-menu a, .main-header-menu a:visited{ font-family:"Cormorant",serif; text-transform:uppercase; color:var(--vp-primary); }
.main-header-menu a:hover, .main-header-menu a:focus{ text-decoration:none; }
.site-header, .elementor-location-header{ background:#fff; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Map */
.vp-map iframe{ width:100%; height:360px; border:0; display:block; filter:grayscale(70%); -webkit-filter:grayscale(70%); }
.vp-map, .vp-map .elementor-widget-container{ margin:0 !important; padding:0 !important; }

/* PDF */
.pdf-view{ position:relative; width:100%; max-width:1000px; margin:0 auto .75rem; border-radius:4px; overflow:hidden; background:#000; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.pdf-view--a4-landscape{ aspect-ratio:297/210; }
.pdf-view--a4-portrait{ aspect-ratio:210/297; }
.pdf-view--narrow{ max-width:680px; } .pdf-view--small{ max-width:640px; }
.pdf-view iframe, .pdf-view embed{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:768px){ .pdf-view{ max-width:100%; box-shadow:0 8px 20px rgba(0,0,0,.3); } }


/* Scroll-top Button – VP Style + erst nach 600px sichtbar */

#ast-scroll-top {
    background: #76a8a3 !important;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999;
    opacity: 0 !important;            /* Start: unsichtbar */
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

/* SVG korrekt einpassen */
#ast-scroll-top .ast-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Pfeil weiß */
#ast-scroll-top .ast-icon svg path {
    fill: #ffffff !important;
}

/* Sichtbarer Zustand – wird per JS hinzugefügt */
#ast-scroll-top.vp-scroll-visible {
    opacity: 0.95 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Hover nur im sichtbaren Zustand */
#ast-scroll-top.vp-scroll-visible:hover {
    background: #5d8b86 !important;
    transform: translateY(-3px);
}

/* Scroll-top-Button komplett ausblenden – wegen Molzait */
#ast-scroll-top {
    display: none !important;
}


/* ============================================================
Header
============================================================ */

/* Header auf sehr großen Bildschirmen optisch „zusammenziehen“ */
@media (min-width: 1440px) {
  .vp-header-bar {
    max-width: 1300px;      /* Breite der Header-Leiste */
    margin: 0 auto;         /* zentriert im Viewport */
    padding-left: 40px;     /* etwas Innenabstand */
    padding-right: 40px;
  }
}





/* ============================================================
Footer Contact
============================================================ */
/* Logo-Bilder */
.vp-footer-logo img {
  max-height: 130px;            /* Höhe nach Geschmack anpassen */
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Tablet: Logos kleiner */
@media (max-width: 768px) {
  .vp-footer-logo img {
  max-height: 80px !important; 
     }
}



/* Handy: 2 Logos pro Zeile */
@media (max-width: 600px) {
  .vp-footer-logo-600 img {        
  width: auto;
  max-width: 100%;
  height: 120px; /* Höhe nach Geschmack anpassen */
  object-fit: contain;
}
  }





  .vp-footer-logo {
    flex: 0 0 50%;        /* zwei pro Reihe */
    text-align: center;
  }

  .vp-footer-logo img {
    max-height: 70px !important;
  }
}

/* --- Text + Karte zwei Spalten, gleiche Höhe --- */


/* Wrapper: Kontakt + Karte */
.vp-contact-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;     /* Spalten auf gleiche Höhe ziehen */
}

/* Beide Spalten nehmen gleich viel Platz */
.vp-contact-left,
.vp-contact-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

/* Map soll die komplette Spaltenhöhe füllen */
.vp-contact-right .elementor-widget-google_maps iframe {
  height: 100% !important;
  width: 100%;
}

/* Unter 768px: Kontakt + Karte untereinander */
@media (max-width: 767px) {
  .vp-contact-row {
    flex-direction: column;
  }

  .vp-contact-left,
  .vp-contact-right {
    width: 100%;
    flex: 0 0 100%;
  }

  .vp-contact-right .elementor-widget-google_maps iframe {
    height: 260px !important; /* angenehme Mobile-Höhe */
    width: 100%;
  }
}

/* Speziell für sehr kleine Screens (≤600px) – etwas kompakter */
@media (max-width: 600px) {
  .vp-contact-right .elementor-widget-google_maps iframe {
    height: 220px !important;
  }
}


/* ----- Werner-Block auf kleinen Screens kompakter darstellen --------- */
@media (max-width: 600px) {
  .vp-werner-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* oder flex-start, wenn du ihn eher linksbündig willst */
    gap: 16px;
    text-align: left;
  }

  /* Bild-Widget im Container */
  .vp-werner-box .elementor-widget-image {
    margin-bottom: 0 !important;
  }

  .vp-werner-box .elementor-widget-image img {
    max-width: 90px;      /* Portrait kleiner machen */
    height: auto;
  }

  /* Name + Claim etwas kleiner */
  .vp-werner-box .elementor-heading-title {
    font-size: 18px;      /* "Werner Punz" */
    line-height: 1.2;
  }

  .vp-werner-box p,
  .vp-werner-box .elementor-widget-text-editor {
    font-size: 14px;      /* "Kocht. Führt. Macht's möglich." */
    text-align: center;
       line-height: 1.3;
  }
}

@media (max-width: 600px) {
  h2.elementor-heading-title {
    margin-top: 20px !important;
  }
}

/* --- FOOTER – Kontakt Icons --- */

/* Footer: Telefon & Mail Icon-List weiß darstellen */
.vp-footer-icons .elementor-icon-list-icon i,
.vp-footer-icons .elementor-icon-list-text,
.vp-footer-icons .elementor-icon-list-item a {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Optional: beim Hover etwas abdunkeln (kannst du auch weglassen) */
.vp-footer-icons .elementor-icon-list-item:hover i,
.vp-footer-icons .elementor-icon-list-item:hover .elementor-icon-list-text {
  opacity: 0.8 !important;
}

/* ============================================================
   LIEFERANTEN – Full width + 100px Rand + Columns-Masonry 4/3/2/1
============================================================ */
.vp-lieferanten-wrap{
  max-width:100%;
  width:100%;
  margin:0;
  padding:0 100px;              /* Desktop-Rand */
}
@media (max-width:1099.98px){ .vp-lieferanten-wrap{ padding:0 60px; } }
@media (max-width:899.98px){  .vp-lieferanten-wrap{ padding:0 40px; } }
@media (max-width:599.98px){  .vp-lieferanten-wrap{ padding:0 24px; } }

/* Masonry via CSS-Columns */
.vp-lieferanten-grid{
  display:block !important;
  grid-template-columns:unset !important;  /* evtl. alte Grid-Regeln neutralisieren */
  gap:0 !important;

  column-count:4;           /* Desktop */
  column-gap:20px;          /* Horizontaler Abstand */
}
@media (max-width:1099.98px){ .vp-lieferanten-grid{ column-count:3; } }
@media (max-width:899.98px){  .vp-lieferanten-grid{ column-count:2; } }
@media (max-width:599.98px){  .vp-lieferanten-grid{ column-count:1; } }

/* Cards */
.vp-lieferant{
  position:relative;        /* für Overlay-Link */
  display:inline-block;     /* nötig für Columns */
  width:100%;
  vertical-align:top;
  break-inside:avoid;

  background:#1A1A1A;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  margin:0 0 2.5rem 0;      /* Vertikaler Abstand */

  transition:box-shadow .2s ease, transform .2s ease;
}
.vp-lieferant:hover{
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  transform:translateY(-2px);
}

/* Unsichtbarer Overlay-Link für die ganze Card (wenn URL vorhanden) */
.vp-li-cardlink{
  position:absolute; inset:0;
  z-index:5;
  text-indent:-9999px;      /* unsichtbar, aber fokussierbar */
  overflow:hidden;
  background:transparent;
}
.vp-li-cardlink:focus{ outline:2px solid var(--vp-secondary); outline-offset:-2px; }

/* Bild */
.vp-lieferant .vp-li-image img{ width:100%; height:auto; display:block; border-radius:0; }

/* Credit */
.vp-lieferanten-grid .vp-li-image + .vp-li-credit{
  text-align:right; margin-top:2px !important; margin-bottom:.6rem !important;
  font-family:"New Tegomin",serif; font-size:12px; font-weight:400; color:#fff; opacity:.9;
}

/* Titel */
.vp-lieferanten-grid .vp-li-name{
  font-family:"Cormorant",serif; font-weight:600; font-size:28px; text-transform:uppercase;
  line-height:1.05 !important; margin:.5rem 0 .6rem !important;
}
.vp-lieferanten-grid .vp-li-name a{ color:#fff !important; text-decoration:none !important; }
.vp-lieferanten-grid .vp-li-name a:hover, .vp-lieferanten-grid .vp-li-name a:focus{ text-decoration:none !important; }

/* Adresse + Produkte */
.vp-lieferanten-grid .vp-li-address, .vp-lieferanten-grid .vp-li-products{
  font-family:"New Tegomin",serif; font-size:18px; line-height:1.3 !important;
}

/* Trenner bewusst aus (wir nutzen das Label) */
.vp-lieferanten-grid .vp-li-sep{ display:none !important; }

/* Mint-Label-Prefix */
.vp-lieferanten-grid .vp-li-products-prefix{
  display:inline-block;
  background:var(--vp-secondary);
  color:#000;
  font-family:"Cormorant",serif;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:2px 6px;
  margin:1.6rem 0 .3rem 0 !important;  /* oben mehr, unten weniger */
}

/* Produkte-Text */
.vp-lieferanten-grid .vp-li-products-text{
  margin-top:.2rem;
  line-height:1.4;
}

/* Mehr laden */

.js-vp-li-item.is-hidden { 
    display: none; 
}
.vp-li-more-wrap { 
    text-align: center; 
    margin-top: 1rem; 
}
.vp-li-more { 							/* Button Standard */
    font-family: "New Tegomin", serif;
    font-size: 18px;
    padding: .6rem 1.2rem;
    background: var(--vp-primary);   /* Grün */
    color: #fff;                     /* Weiß */
    border: 1px solid #fff;          /* Weißer Rahmen */
    cursor: pointer;
    border-radius: 0;                /* Kein Radius */
    transition: all .25s ease;
}

.vp-li-more:hover,						/* Hover */
.vp-li-more:focus {
    background: var(--vp-secondary); /* Dunkler Ton */
    color: #fff;
    border-color: var(--vp-secondary); /* Dunkler Ton */
}

.vp-li-more.is-hidden {     		/* Button ausblenden */
    display: none; 
}




/* --- Lieferanten: fester Spalten- und Kartenabstand --- */
.vp-lieferanten-wrap .vp-lieferanten-grid{
  column-gap: 20px !important;        /* horizontaler Abstand zwischen den Spalten */
  -webkit-column-gap: 20px !important;/* Safari */
  -moz-column-gap: 20px !important;   /* Firefox */
}

.vp-lieferanten-wrap .vp-lieferanten-grid .vp-lieferant{
  margin: 0 0 20px 0 !important;      /* vertikaler Abstand zwischen den Karten */
  display: inline-block !important;   /* sicherheitshalber fürs Columns-Layout */
  width: 100% !important;
  break-inside: avoid !important;
}

/* =========================================
   VERANSTALTUNGEN – Teaser-Grid Startseite
   ========================================= */

.vp-events-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px;
  max-width:1100px;
  margin:0 auto 3rem;
  text-align:center;
}

@media (max-width:899.98px){
  .vp-events-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
  }
}
@media (max-width:768px){
  .vp-events-grid{
    grid-template-columns:1fr !important;
  }
}


.vp-event-teaser{
  font-family:"New Tegomin",serif;
}

/* Bildrahmen – gleiche Höhe, Motiv volle Höhe (kein Beschnitt) */
.vp-event-thumb{
  width:150px;
  height:150px;
  margin:0 auto .75rem;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Bild: immer 100% Höhe, Breite passt sich an (Hochformat wird schmäler) */
.vp-event-thumb-img{
  display:block;
  height:100% !important;
  width:auto !important;
}


/* Titel: etwas kleiner, uppercase, ohne Unterstreichung */
.vp-event-title{
  font-family:"Cormorant",serif;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 .25rem;
}
.vp-event-title a{
  color:#fff;
  text-decoration:none !important;
  border-bottom:none !important;
}
.vp-event-title a:hover,
.vp-event-title a:focus{
  color:var(--vp-secondary);
  text-decoration:none !important;
  border-bottom:none !important;
}

/* Datum/Uhrzeit: deutlicher hervorgehoben */
.vp-event-date{
  font-family:"New Tegomin",serif;
  font-size:15px;
  font-weight:600;
  margin-bottom:.7rem;
  color:#fff;
  opacity:.95;
}

/* Textauszug */
.vp-event-excerpt{
  font-family:"New Tegomin",serif;
  font-size:16px;
  line-height:1.5;
  max-width:320px;
  margin:0 auto;
}


/* Veranstaltungen – "Mehr laden" Button + versteckte Items */
.js-vp-ev-item.is-hidden{
  display:none;
}

.vp-ev-more-wrap{
  text-align:center;
  margin-top:1.5rem;
}

.vp-ev-more{
  font-family:"New Tegomin",serif;
  font-size:18px;
  padding:.6rem 1.2rem;
  border:1px solid var(--vp-text);
  background:var(--vp-primary);
  color:#fff;
  cursor:pointer;
}

/* Button wirklich ausblenden, wenn JS .is-hidden setzt */
.vp-ev-more.is-hidden {
  display: none !important;
}

.vp-ev-more-wrap.is-hidden {
  display: none !important;
}

/* Hover-Zustand */
.vp-ev-more:hover,
.vp-ev-more:focus{
  background:var(--vp-secondary);
  border-color:var(--vp-secondary);
}

/* Veranstaltungen – Items, die erst nach "Mehr laden" sichtbar werden */
.js-vp-ev-item.is-hidden{
  display:none;
}

/* =========================================
   VERANSTALTUNGEN – Animiertes Grid
   ========================================= */

/* Grundzustand: Karten kommen von unten rein und blenden ein */
.vp-events-grid .vp-event-teaser {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  animation: vp-event-fade-up 0.7s ease-out forwards;
}

/* Stagger-Effekt: jede Karte startet etwas später */
.vp-events-grid .vp-event-teaser:nth-child(1) {
  animation-delay: 0.05s;
}
.vp-events-grid .vp-event-teaser:nth-child(2) {
  animation-delay: 0.15s;
}
.vp-events-grid .vp-event-teaser:nth-child(3) {
  animation-delay: 0.25s;
}
/* Wenn du mehr als 3 Veranstaltungen hast, kannst du das fortsetzen: */
.vp-events-grid .vp-event-teaser:nth-child(4) {
  animation-delay: 0.35s;
}
.vp-events-grid .vp-event-teaser:nth-child(5) {
  animation-delay: 0.45s;
}
.vp-events-grid .vp-event-teaser:nth-child(6) {
  animation-delay: 0.55s;
}

/* Keyframes fürs Einblenden */
@keyframes vp-event-fade-up {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Bild normal */
.vp-event-thumb-img{
  display:block;
  height:100% !important;
  width:auto !important;
  transform-origin: center center;
}

/* Nur das Bild wackelt, wenn man über die ganze Karte fährt */
.vp-events-grid .vp-event-teaser:hover .vp-event-thumb-img{
  animation: vp-thumb-wiggle 0.5s ease-out;
}

/* Wackel-Animation NUR für das Bild */
@keyframes vp-thumb-wiggle {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-3px) rotate(-1deg); }
  50%  { transform: translateY(-5px) rotate(1deg); }
  75%  { transform: translateY(-3px) rotate(-0.5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* =========================================
   VERANSTALTUNGEN – Scroll-Intro-Animation
   ========================================= */

/* Grundzustand: noch nicht im Viewport */
.vp-events-grid .vp-event-teaser{
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Linke Spalte – kommt zusätzlich von links */
.vp-events-grid .vp-event-teaser:nth-child(3n+1){
  transform: translate(-40px, 30px);
}

/* Mittlere Spalte – nur von unten */
.vp-events-grid .vp-event-teaser:nth-child(3n+2){
  transform: translateY(30px);
}

/* Rechte Spalte – zusätzlich von rechts */
.vp-events-grid .vp-event-teaser:nth-child(3n+3){
  transform: translate(40px, 30px);
}

/* Wenn im Viewport: alles an seinen Platz, sichtbar */
.vp-events-grid .vp-event-teaser.is-inview{
  opacity: 1;
  transform: translate(0,0);
}

/* Für kleinere Screens (1-spaltig): alles einfach von unten */
@media (max-width: 599.98px){
  .vp-events-grid .vp-event-teaser{
    transform: translateY(30px);
  }
}



/* =========================================
   EINZELSEITE – VERANSTALTUNG
   ========================================= */

.vp-event-single-wrap {
  background-color: #1a1a1a;
  color: #FFFFFF;
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto 3rem auto;
  border-radius: 0;
}

.single-veranstaltung .site-content,
.single-veranstaltung .ast-container,
.single-veranstaltung .content-area,
.single-veranstaltung .entry-content {
  background-color: #1A1A1A;
  color: #FFFFFF;
}


.vp-event-single-title {
  font-family: "Cormorant", serif;
  font-size: 42px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25em;
  color: #FFFFFF;
}

.vp-event-single-meta {
  font-family: "New Tegomin", serif;
  font-size: 16px;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.vp-event-single-gallery,
.vp-event-gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 2.5rem;
}

.vp-event-single-figure,
.vp-event-gallery-item {
  flex: 1 1 340px;
  max-width: 400px; /* etwas kleiner als vorher */
}


.vp-event-single-figure img,
.vp-event-gallery-item img,
.vp-event-single-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}


.vp-event-single-content {
  font-family: "New Tegomin", serif;
  font-size: 18px;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.vp-event-single-back {
  margin-top: 3rem;
}

.vp-btn {
  display: inline-block;
  background-color: #4B6E6A; /* Primärgrün */
  color: #FFFFFF;
  padding: 0.7rem 1.8rem;
  font-family: "New Tegomin", serif;
  font-size: 18px;
  text-decoration: none;
  border: 1px solid #4B6E6A;
  transition: all 0.2s ease-in-out;
}

.vp-btn:hover,
.vp-btn:focus {
  background-color: #609896; /* Sekundärton */
  border-color: #609896;
  color: #FFFFFF;
  text-decoration: none;
}

@media (max-width: 768px) {
  .vp-event-single-wrap {
    padding: 2rem 1rem;
  }
  .vp-event-single-title {
    font-size: 32px;
  }
}

/* =========================================
   ASTRA Default-Container für Veranstaltung deaktivieren
   ========================================= */

.single-veranstaltung .site,
.single-veranstaltung .site-content,
.single-veranstaltung .ast-container,
.single-veranstaltung .content-area,
.single-veranstaltung .entry-content,
.single-veranstaltung .entry-header,
.single-veranstaltung article {
  background: none !important;
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}

.single-veranstaltung .entry-content p,
.single-veranstaltung .entry-content h1,
.single-veranstaltung .entry-content h2,
.single-veranstaltung .entry-content h3,
.single-veranstaltung .entry-content h4,
.single-veranstaltung .entry-content h5,
.single-veranstaltung .entry-content h6 {
  color: #FFFFFF !important;
}

.single-veranstaltung .ast-container {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* =========================================
   EINZELSEITE – VERANSTALTUNG (Finale Optimierung)
   ========================================= */

.vp-event-single-wrap {
  background-color: #1a1a1a;
  color: #FFFFFF;
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 900px;
  margin: 0 auto 4rem auto; /* zentriert */
  border-radius: 0;
}

/* Überschrift und Metadaten */
.vp-event-single-title {
  font-family: "Cormorant", serif;
  font-size: 42px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25em;
  color: #FFFFFF;
}

.vp-event-single-meta {
  font-family: "New Tegomin", serif;
  font-size: 16px;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* Galerie / Bildgröße */
.vp-event-single-gallery,
.vp-event-gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 2.5rem;
}

.vp-event-gallery-item,
.vp-event-single-thumb {
  flex: 1 1 340px;
  max-width: 400px;
  margin: 0 auto;
}

.vp-event-gallery-item img,
.vp-event-single-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Textbereich */
.vp-event-single-content {
  font-family: "New Tegomin", serif;
  font-size: 18px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 3rem;
  color: #FFFFFF;
}

/* Buttonbereich */
.vp-event-single-back {
  margin-top: 3rem;
}

/* Button-Styling */
.vp-btn {
  display: inline-block;
  background-color: #4B6E6A; /* Primärgrün */
  color: #FFFFFF !important;
  padding: 0.7rem 1.8rem;
  font-family: "New Tegomin", serif;
  font-size: 18px;
  text-decoration: none;
  border: 1px solid #4B6E6A;
  transition: all 0.2s ease-in-out;
  border-radius: 0;
}

.vp-btn:hover,
.vp-btn:focus {
  background-color: #3D5D59; /* dunkleres Grün */
  border-color: #3D5D59;
  color: #FFFFFF !important; /* bleibt weiß */
  text-decoration: none;
}

/* Responsiv */
@media (max-width: 768px) {
  .vp-event-single-wrap {
    padding: 2rem 1rem;
    max-width: 100%;
  }
  .vp-event-single-title {
    font-size: 32px;
  }
}


/* =========================================
   Feintuning Veranstaltungsseite
   ========================================= */

/* Ganze Seite zentrieren – egal was Astra außenrum macht */
.single-veranstaltung .site-content {
  display: flex;
  justify-content: center;
}

.single-veranstaltung .vp-event-single-wrap {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

/* Abstand nach dem Bild zum Text */
.vp-event-single-thumb,
.vp-event-gallery-item {
  margin-bottom: 30px;
}

/* Sicherheitshalber: Textfarbe in der Hauptspalte */
.single-veranstaltung .vp-event-single-content p {
  color: #FFFFFF !important;
}




/* =========================================
   Jobseite
   ========================================= */

/* === JOB GRID – [vp_job_grid] ============================================== */

.vp-job-grid{
  display:grid;
  gap:32px;
}
.vp-job-grid--cols-1{ grid-template-columns:1fr; }
.vp-job-grid--cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.vp-job-grid--cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width: 860px){
  .vp-job-grid--cols-2,
  .vp-job-grid--cols-3{
    grid-template-columns:1fr;
    gap:24px;
  }
}

/* Karten-Optik sehr dezent – du kannst im Elementor-Container drumherum alles steuern */
.vp-job-card{
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Jobtitel */
.vp-job-title{
  font-family: "Cormorant", serif;
  font-size: 22px;
  font-weight: 700;
  color:#fff;
  margin:0 0 6px;
}

/* Label für Ausmaß / Zeitraum */
.vp-job-tag{
  display:inline-block;
  margin:4px 0 14px;
  padding:6px 10px;
  background: var(--vp-primary) !important;
  color:#ffffff !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:13px;
  font-weight:700;
  border-color: var(--vp-primary) !important;
}

/* Zwischenüberschriften im Fließtext-Stil */
.vp-job-card h4{
  font-family: "New Tegomin", sans-serif; /* deine Body-Font */
  font-size: 15px;
  font-weight: 600;
  margin:16px 0 6px;
  color:#eaeaea;
}

/* Listen-Texte */
.vp-job-card ul{
  margin:0 0 .6em 1.1em;
}
.vp-job-card li{
  line-height:1.6;
}

.vp-job-card p,
.vp-job-card li {
    font-size: 15px;
    line-height: 1.55;
}

.vp-job-grid--cols-2 .vp-job-card {
    padding-right: 60px;   /* mehr Abstand */
}

@media (max-width: 900px){
    .vp-job-grid--cols-2 .vp-job-card {
        padding-right: 0;
    }
}


/* ============================================================
   JOB CARD – Hand-Drawn Sketch Frame
   ============================================================ */

.vp-job-card{
  position: relative;
  padding: 30px 25px;
  margin-bottom: 40px;
}

/* Zarter, unperfekter Strich oben */
.vp-job-card:before{
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 60%;
  height: 0;
  border-top: 2px solid var(--vp-primary);
  transform: rotate(-1.5deg);
  opacity: .7;
}

/* Zarter Strich rechts */
.vp-job-card:after{
  content: "";
  position: absolute;
  top: 25px;
  right: 12px;
  height: 70%;
  width: 0;
  border-right: 2px solid var(--vp-secondary);
  transform: rotate(1deg);
  opacity: .6;
}

/* Zwei kleinere Striche als "Skizzen-Effekt" */
.vp-job-card .vp-sketch-1,
.vp-job-card .vp-sketch-2{
  content: "";
  position: absolute;
  border-bottom: 2px solid var(--vp-secondary);
  opacity: .6;
}

.vp-job-card .vp-sketch-1{
  bottom: 10px;
  left: 25px;
  width: 40%;
  transform: rotate(-2deg);
}

.vp-job-card .vp-sketch-2{
  bottom: 18px;
  right: 35px;
  width: 25%;
  transform: rotate(3deg);
}




/* ============================================
   JOBSEITE – Jobtitel & Tag hervorheben
   ============================================ */

/* Jobtitel Box */
.vp-job-title {
    background: #ffffff;
    color: #000000;
    padding: 8px 14px;
    display: inline-block;
    font-size: 22px;
    margin-bottom: 10px;   /* Abstand nach unten */
    margin-top: 20px;      /* Abstand nach oben */
    letter-spacing: 0.5px;
}

/* Vollzeit/Teilzeit Tag */
.vp-job-tag {
    background: #ffffff;
    color: #000000;
    padding: 6px 12px;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 20px; /* Abstand zum Text */
    border: 1px solid #e6e6e6;
    letter-spacing: 0.5px;
}

/* Abstand der Jobkarten voneinander */
.vp-job-card {
    padding-right: 40px;
}

/* Überschriften in Fließtext-Schrift, nicht im Display-Font */
.vp-job-card h4 {
    font-family: 'Crimson Text', serif !important;
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Listen optisch deutlicher machen */
.vp-job-card ul {
    margin-top: 6px;
    margin-bottom: 20px;
}

/* ============================================
   JOB – KORREKTUR: Titel einzeilig, weißes Label,
   Beschäftigungstag wieder grün
   ============================================ */

/* Jobtitel – weiß hinterlegt, schwarz, EINZEILIG */
.vp-job-title {
    background: #ffffff;
    color: #000000 !important;
    padding: 8px 14px;
    display: inline-block;
    white-space: nowrap;      /* <<< WICHTIG: macht EINZEILIG */
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 12px;
    margin-top: 25px;
    font-weight: 700;
}

/* Beschäftigungstag (Vollzeit...) – wieder GRÜN wie früher */
.vp-job-tag {
    background: #76a8a3;      /* VP-GRÜN (aus deinen Labels) */
    color: #000000;
    padding: 6px 12px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;      /* bleibt schön einzeilig */
    margin-bottom: 25px;
    border-radius: 0px;
	border-color: #76a8a3;
}

/* Abstand zwischen Jobkarten */
.vp-job-card {
    padding-right: 40px;
}

/* Zwischenüberschriften modernisieren (Fließtext-Font) */
.vp-job-card h4 {
    font-family: 'New Tegomin', serif !important;
    font-weight: 700;
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 8px;
}

/* Schönere Listen */
.vp-job-card ul {
    margin-top: 4px;
    margin-bottom: 22px;
}

/* ============================================
   JOBSEITE – Mobile Optimierung
   ============================================ */
@media (max-width: 768px) {

  /* Karten insgesamt schmaler & ohne extra Rechts-Padding */
  .vp-job-card {
      padding: 20px 16px 24px;
      padding-right: 16px;   /* überschreibt die 40px */
      margin-bottom: 32px;
  }

  /* Jobtitel darf umbrechen & wird kleiner */
  .vp-job-title {
      font-size: 18px;
      white-space: normal;   /* <<< kein Zwang einzeilig */
      line-height: 1.3;
      margin-top: 18px;
      margin-bottom: 10px;
  }

  /* Tag (Vollzeit/Teilzeit) ebenfalls mehr Handy-freundlich */
  .vp-job-tag {
      font-size: 11px;
      white-space: normal;   /* darf umbrechen */
      margin-bottom: 18px;
  }

  /* Optional: Deko-Striche ausblenden, damit nix übersteht */
  .vp-job-card:before,
  .vp-job-card:after,
  .vp-job-card .vp-sketch-1,
  .vp-job-card .vp-sketch-2 {
      display: none;
  }
}



/* =========================================
   AKTUELLES
   ========================================= */

/*Laufband (Tomate + Text im grünen Label) */

.vp-laufband{
  width:100%;
  height:0;              /* kein eigener Streifen erzeugen */
  padding:0;
  margin:0;
  overflow:visible;
  position:relative;
  z-index:99;
  text-align:center;
  font-family:'New Tegomin',serif;
  font-weight:bold;
}

/* Das komplette Label schwebt über dem Bild */
.vp-laufband-inner{
  position:absolute;
  top:10px;                 /* Abstand vom oberen Bildrand – bei Bedarf anpassen */
  left:0;
  display:inline-block;
  white-space:nowrap;
  animation: vp-laufband-move 15s linear infinite;
}


/* GRÜNES LABEL – HINTER TOMATE + TEXT */
.vp-laufband-label{
  display:inline-flex;
  align-items:center;
  background:#609896 ;    /* helles Mint-Grün */
  padding:6px 20px;
  border-radius:6px;   /* wenig Radius */
}

/* Tomate-Icon im Label */
.vp-laufband-icon{
  display:inline-block;
  width:40px;              /* Größe der Tomate */
  height:40px;
  margin-right:12px;
  background-image:url('https://vinzenzpauli.dieinternette.com/wp-content/themes/vinzenz-pauli-astra-child/assets/Rastergrafik-Tomate-VinzenzPauli.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  animation:vp-laufband-bounce 2s ease infinite;
}


.vp-laufband-icon img{
  display:block;
  height:40px;
  animation:vp-laufband-bounce 2s ease infinite;
}

/* Text im Label */
.vp-laufband-text{
  display:inline-block;
  color:#ffffff;            /* gut lesbar auf Grün */
  font-size:14px;
}


/* Bewegung: Start ganz rechts außerhalb, läuft komplett nach links raus */
@keyframes vp-laufband-move{
  from {
    /* Start: laufband ist um eine ganze Viewport-Breite nach rechts geschoben */
    transform: translateX(100vw);
  }
  to {
    /* Ende: komplette Breite des Labels nach links rausgeschoben */
    transform: translateX(-100%);
  }
}



@keyframes vp-laufband-bounce{
  0%,100%{transform:translateY(0);}
  15%{transform:translateY(-8px);}
  30%{transform:translateY(0);}
  45%{transform:translateY(-4px);}
  60%{transform:translateY(0);}
  75%{transform:translateY(-2px);}
  85%{transform:translateY(0);}
}

/* Schneller auf Tablets */
@media (max-width: 1024px) {
  .vp-laufband-inner {
    animation-duration: 10s !important;
  }
}

/* Noch schneller auf Smartphones */
@media (max-width: 605px) {
  .vp-laufband-inner {
    animation-duration: 9s !important;
  }
}


/* Block "Aktuelle Empfehlungen" ein-/ausblenden */
.vp-hide-empfehlungen .vp-empfehlungen-block {
  display: none !important;
}


/* =========================================
   Single Seite Veranstalung - Oberen Footerteil einfach umfärben im Background
   ========================================= */

/* Footer-Kontaktbereich NUR auf Veranstaltungs-Einzelseiten */
.single-veranstaltung .elementor-801 .elementor-element.elementor-element-6d05c53 {
    background-color: #4B6E6A !important;
}

/* =========================================
  Wichtig: KEIN OVERFLOW überall!!
   ========================================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/* =========================================
   SPEISEKARTEN Wein
   ========================================= */

/* Wrapper mit Seitenverhältnis */
.vp-pdf-frame {
    position: relative;
    width: 100%;
    max-width: 1000px;   /* optional: begrenzt die Breite auf großen Screens */
    margin: 0 auto;
    background: #111;    /* gleich wie Seitenhintergrund, damit nix blinkt */
    overflow: hidden;
}

/* A4 quer: Verhältnis Höhe/Breite ≈ 1 / 1.414 ≈ 70,7% */
.vp-pdf-frame--landscape::before {
    content: "";
    display: block;
    padding-top: 70.7%;
}

/* A4 hoch: Verhältnis Höhe/Breite ≈ 1.414 ≈ 141,4% */
.vp-pdf-frame--portrait::before {
    content: "";
    display: block;
    padding-top: 141.4%;
}

/* PDF füllt den Wrapper komplett */
.vp-pdf-frame .vp-pdf-object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Handy: Embed ausblenden, nur Link zeigen */
@media (max-width: 600px) {
    .vp-pdf-embed {
        display: none;
    }
}


/* ------------------------------------------
   COMPLIANZ COOKIE BANNER – GLOBAL FIX
   ------------------------------------------ */

/* Container/Banner höher setzen & über Molzait legen */
#cmplz-cookiebanner,
#cmplz-cookiebanner-container,
div[class*="cmplz-cookiebanner"] {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    bottom: 120px !important;           /* Abstand vom unteren Rand */
    z-index: 2147483647 !important;     /* über allem, auch Molzait */
}

/* Text größer & gut lesbar */
#cmplz-cookiebanner .cmplz-message,
#cmplz-cookiebanner-container .cmplz-message,
div[class*="cmplz-cookiebanner"] .cmplz-message {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
}

/* Buttons kleiner, kompakter */
#cmplz-cookiebanner .cmplz-buttons a,
#cmplz-cookiebanner .cmplz-buttons button,
#cmplz-cookiebanner-container .cmplz-buttons a,
#cmplz-cookiebanner-container .cmplz-buttons button,
div[class*="cmplz-cookiebanner"] .cmplz-buttons a,
div[class*="cmplz-cookiebanner"] .cmplz-buttons button {
    padding: 8px 18px !important;       /* weniger Höhe */
    font-size: 14px !important;
    border-radius: 6px !important;
    min-width: unset !important;
}

/* Farben der Buttons im Vinzenz-Pauli-Style */
#cmplz-cookiebanner .cmplz-btn-accept,
#cmplz-cookiebanner-container .cmplz-btn-accept,
div[class*="cmplz-cookiebanner"] .cmplz-btn-accept {
    background-color: #5bacae !important;
    color: #ffffff !important;
}

#cmplz-cookiebanner .cmplz-btn-deny,
#cmplz-cookiebanner .cmplz-btn-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn-deny,
#cmplz-cookiebanner-container .cmplz-btn-view-preferences,
div[class*="cmplz-cookiebanner"] .cmplz-btn-deny,
div[class*="cmplz-cookiebanner"] .cmplz-btn-view-preferences {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Innenabstand etwas schlanker */
#cmplz-cookiebanner .cmplz-cookiebanner,
#cmplz-cookiebanner-container .cmplz-cookiebanner,
div[class*="cmplz-cookiebanner"] .cmplz-cookiebanner {
    padding: 20px !important;
}

/* Mobile: nicht ganz so hoch, aber über Molzait */
@media (max-width: 768px) {
    #cmplz-cookiebanner,
    #cmplz-cookiebanner-container,
    div[class*="cmplz-cookiebanner"] {
        bottom: 120px !important;
    }
}