/* --- Globales Uppercase für alle h4-Überschriften --- */
h4,
h4 a {           /* nimmt verlinkte Überschriften gleich mit */
    text-transform: uppercase !important;   /* !important sticht Theme-Vorgaben aus */
}

.ce_iconbox_v2.style3 .content {
color: #333333;
}

/* -------------------------------------------------
   GRID GALLERY: Background-Zoom (ohne Inhalt)
   ------------------------------------------------- */
.ce_grid_gallery_start li.grid-item {
    background-size: 100%;          /* Ausgangsgröße */
    background-position: center center;
    background-repeat: no-repeat;
    
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;

    /* Übergang nur für background-size */
    transition: background-size 0.5s ease-out;
    -webkit-transition: background-size 0.5s ease-out;
    -moz-transition: background-size 0.5s ease-out;
    -o-transition: background-size 0.5s ease-out;
}

/* Zoomt NUR das Bild (auf 105 %), Inhalt bleibt unverändert */
.ce_grid_gallery_start li.grid-item:hover {
    background-size: 105%;
}

/* -----------------------------------------------
   Zusatz: Titel-Zoom beim Hover
   ----------------------------------------------- */
.ce_grid_gallery_start li.grid-item .title {
    display: inline-block;          /* damit transform wirkt */
    transform: scale(1);
    transition: transform 0.5s ease;
}

.ce_grid_gallery_start li.grid-item:hover .title {
    transform: scale(1.12);         /* gewünschtes Zoom-Level anpassen */
}

.ce_grid_gallery_start li.grid-item.image-height-s {
  height: 25vw;
  max-height: 400px !important;
}


/* Standard-Icon ausblenden */
.ce_linkbox a i:before,
.ce_linkbox a i:after {
    display: none;
}

/* Individuelle Icons pro Box */
.icon-piercing a i {
    background-image: url('/files/icons/icon-piercing-weiss.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-piercingschule a i {
    background-image: url('/files/icons/icon-piercingschule-weiss.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-schlupfwarzen a i {
    background-image: url('/files/icons/icon-schlupfwarzen-weiss.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-hygiene a i {
    background-image: url('/files/icons/icon-hygiene-weiss.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ce_linkbox a i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background-color: transparent;
height: 100px;
width: 100px;
transform: scale(0);
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-webkit-backface-visibility: hidden;
}

.ce_linkbox .ce_linkbox_overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(30,81,135,0.7);
opacity: 0;
border-radius: 20px;
transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
}

img {
    border-radius: 20px;
}

.ce_linkbox .headline {
margin-top: 30px;
margin-bottom: 20px;
}

.ce_linkbox {
height: 87%;

}

.ce_iconbox_v2.style3 .ce_iconbox_outside {
padding: 35px;
background: rgba(255,255,255,0.9);
border-radius: 20px;
border: 1px solid rgb(220,220,220);
height: 100%;
}

.newsreader .info {display:none;}
.newsreader .news-date {display:none;}
.mod_newsreader .info {display:none;}

.mod_newsreader h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #00518b;
  margin-bottom: 0.3rem;
}
.mod_newsreader h2 {
  font-size: 2.2rem;
  font-weight: 400;
  color: #00518b;
  margin-bottom: 1rem;
}
.mod_newsreader .ce_teambox_simple .name.font_headline.h3 {
  font-size: 1rem;           /* Schriftgröße anpassen */
}


/* Alle Aufzählungen im Inhaltsbereich: keine Standard-Bullets */
.ce_text ul li,
.ce_text_extented ul li,
.ce_iconbox_vertical ul li,
.ce_iconbox_v2 ul li {
  position: relative;
  padding-left: 24px;
  list-style: none !important;  /* <-- Diese Zeile jetzt zusätzlich */
    margin-bottom: 0.6em; /* Gern anpassen z. B. auf 12px oder 1em */
}




/* SVG-Pfeil als Icon links vom Text */
.ce_text ul li::before,
.ce_text_extented ul li::before{
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 14px;
  height: 14px;
  background-image: url('/files/icons/pfeil.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* SVG-Pfeil als Icon links vom Text */
.ce_iconbox_v2 ul li::before,
.ce_iconbox_vertical ul li::before{
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 14px;
  height: 14px;
  background-image: url('/files/icons/pfeil.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mod_newslist.block {
  display: flex;
  flex-wrap: wrap;
  gap: 0rem;
  justify-content: space-between;
}

.mod_newslist.block .newslist-v4 {
  flex: 0 0 calc(50% - 1.33rem); /* etwas Spielraum fürs gap */
  max-width: calc(50% - 1.33rem);
  box-sizing: border-box;
}
.newslist-v4 .info,
.newslist-v4 .author {
  display: none;
}

/* ===============================
   News-Teaser: Outline & Padding entfernen
   =============================== */

.newslist-v4 .content {
  border: none;              /* Entfernt Outline */
  padding: 10px;
  padding-top: 10px;
  padding-bottom: 50px;
}






.newslist-v4 .link {
  position: relative;
  padding-left: 24px;
  font-weight: bold;
  font-size: 1rem;
  display: inline-block;
  color: #00518b;
}

.newslist-v4 .link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-image: url('/files/icons/pfeil.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

/*──────────────────────────────────────────────────────────────
  BASIS – Wrapper & Kartenlayout
──────────────────────────────────────────────────────────────*/
.ce_accordion {                    /* gesamtes Akkordeon */
  margin-bottom: 1px;
  border: none;
  color: #00518b;
}

.ce_accordion.block {             /* einzelne Karte (Section) */
  margin: 2rem 0;
  padding: 0;                     /* Innenabstand folgt im Header/Content */
  border: 1px solid #e4e4e4;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;               /* Rundungen respektieren */
}

/* geringfügiger Einzug für evtl. verschachtelte .accordion-Elemente */
.ce_accordion .accordion { padding-left: 2px; }

/*──────────────────────────────────────────────────────────────
  HEADER / TOGGLER
──────────────────────────────────────────────────────────────*/
.ce_accordion .toggler {
  position: relative;                                /* Bezugsrahmen fürs Icon */
  font-family: Ubuntu, Arial, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.3em;
  padding: 2rem 3.6rem 2rem 2rem;              /* Platz rechts fürs Icon */
  background: transparent;                           /* übernimmt Kartenfarbe */
  border: none;                                 /* alte Linien killen    */
  cursor: pointer;
}

/* Hover-Farbe */
.ce_accordion .toggler:hover { color: #050505; }

/* Unterlinie bei geöffnetem Header entfernen */
.ce_accordion .toggler.ui-state-active { border-bottom: 0; }

/*──────────────────────────────────────────────────────────────
  ICON rechtsbündig
──────────────────────────────────────────────────────────────*/
.ce_accordion .toggler::before {
  content: "+";                  /* Standard-Icon */
  position: absolute;
  right: 2rem;                   /* Abstand zum Kartenrand */
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 2em;
  font-weight: 100;
  line-height: 0.8;              /* kompakter Look */
}

/* Minus (En-Dash) bei geöffnetem Eintrag */
.ce_accordion .toggler.ui-state-active::before {
  content: "\2013";              /* – */
}

/*──────────────────────────────────────────────────────────────
  CONTENT
──────────────────────────────────────────────────────────────*/
.ce_accordion .ui-accordion-content {
  padding: 0rem 4rem 0rem 2rem;      /* oben bündig zum Header */
}

.toggler::first-line {
  font-weight: normal;
}


.ce_iconbox_vertical[data-size="large"] .icon .icon_inside {
width: 80px;
height: 80px;
line-height: 80px;
font-size: 26px;
font-weight: 400;
color: #00518b;
}



.ce_pricelist .item {
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}

.ce_pricelist .label {
float: left;
padding-right: 10px;
font-size: 1.2em;
font-weight: 400;
color: #00518b;
}

.ce_pricelist .price {
float: right;
padding-left: 10px;
font-size: 1.2em;
color: #00518b;
}

.ce_gallery .gallery-margin {
margin-left: 0;
margin-right: 0;
}

.ce_gallery .content {
border-radius: 20px;
background: rgba(0,81,139,0.8);
}



/* Anker */
.header.original .mod_navigation,
.header.cloned  .mod_navigation {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;  /* Abstand unterhalb der Linie */
}

/* Balken: fixe Höhe, zentriert, Full-Width. Seitlich wird abgeschnitten */
.header.original .mod_navigation::before {
  content: "";
  position: absolute;
  top: -22px;                  /* Abstand zum Logo nach Bedarf anpassen */
  left: 50%;
  transform: translateX(-50%); /* exakt mittig zum Viewport */
  width: 100vw;                /* über die gesamte Fensterbreite */
  height: 30px;                /* feste Höhe, bleibt immer gleich */
  z-index: 1;
  pointer-events: none;

  background-image: url("/files/logo/line.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 110%;  /* Höhe füllen, Breite proportional. Überschuss wird links/rechts beschnitten */
}


@media only screen and (max-width: 767px) {
  .ce_pricelist .subline {
    line-height: 1.2;
  }
}


@media only screen and (max-width: 767px) {
  .ce_iconbox_vertical .content {
    font-size: 16px;
    line-height: 1.35;
  }

  .ce_iconbox_vertical .content li {
    font-size: 16px;
    line-height: 1.35;
  }

  .ce_iconbox_vertical .headline {
    font-size: 20px;
    line-height: 1.35;
  }
}

.mod_newsreader { overflow: visible; }

.mod_newsreader .is-sticky{
  position: sticky;
}

.partner .ce_image_extended img,
.partner .ce_image img {
  width: 100%;
  height: 200px !important;
  object-fit: cover !important;
}

/* 
 * @change:    Individuelle Farbanpassung nach subheadline / Inhalt wird im Template als Klasse genutzt
 * @page:      	Veranstaltungen
 * @module:     news_newslist_v4
 * @date:      	2026-02-03
 * @author:    	Thomas Cramer
 */

.subheadline.hygiene-sachkunde-1, .subheadline.hygiene-sachkunde-2, h2.hygiene-sachkunde-2, h2.hygiene-sachkunde-1  {
    background: #00518b;
    color: #fff;
    padding: 4px;
    font-size:16px;
    display: inline;
}

.date.bg-accent.hygiene-sachkunde-1, .date.bg-accent.hygiene-sachkunde-2 {
    background: #00518b;
}
.h6.hygiene-sachkunde-1 a, .h6.hygiene-sachkunde-2 a, h1.hygiene-sachkunde-2, h1.hygiene-sachkunde-1 {
  color:#00518b;
}

.subheadline.piercing-workshop, .subheadline.piercing-ausbildung, h2.piercing-ausbildung, h2.piercing-workshop  {
    background: #336666;
    color: #fff;
    padding: 4px;
    font-size:16px;
    display: inline;
}

.date.bg-accent.piercing-workshop, .date.bg-accent.piercing-ausbildung {
    background: #336666;
}
.h6.piercing-workshop a, .h6.piercing-ausbildung a, h1.piercing-ausbildung, h1.piercing-workshop {
  color:#336666;
}

.subheadline.erste-hilfe, h2.erste-hilfe  {
    background: #159044;
    color: #fff;
    padding: 4px;
    font-size:16px;
    display: inline;
}

.date.bg-accent.erste-hilfe {
    background: #159044;
}
.h6.erste-hilfe a, h1.erste-hilfe {
  color:#159044;
}
.mod_newsreader h1 {width:66%;}


/* 
 * @change:    Newsliste mobil einspaltig; Desktop bleibt zweispaltig
 * @page:      
 * @module:    mod_newslist
 * @date:      2026-02-20
 * @author:    Steffi Petschnik
 */

/* Mobile Darstellung: Beiträge untereinander statt nebeneinander */
@media (max-width: 767px) {

  .mod_newslist.block {
    flex-direction: column;
  }

  .mod_newslist.block .newslist-v4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

}