/*
 Theme Name:     Divi Child Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Child Theme for Divi Theme by Elegant Themes
 Author:         Divi.world
 Author URI:     http://divi.world
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/*

body * {
	z-index: 0;
}

*/


.home .et_pb_ajax_pagination_container article.et_pb_post {
	display: block !important;
}

.et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title span{
	padding: 0 10px !important;
	line-height: 1.2;
}

.et_pb_accordion_item.et_pb_toggle:hover .et_pb_toggle_title span {
	background-image: linear-gradient(to top,#95c120 60%,transparent 40%);
}

#chaos-modal {
	z-index: 9999;
}

.partymodusImage {
	display: none;
}

.effect-overlay {
	  position: absolute;
  inset: 0;
  background: black;
  pointer-events: none; 
  mask-image: radial-gradient(circle at 50% 50%, transparent 100px, black 150px);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  transition: mask-image 0.2s ease-out;
}

/* Section establishes the containing block */
.hero {
  position: relative;
  overflow: hidden;
}

/* Content stays in normal flow, below the overlay */
.hero .hero-content-row {
  position: relative;
  z-index: 1; /* below the canvas row */
  padding-top: 150px; /* your spacing */
}

/* The overlay row that holds the canvas */
.hero .hero-canvas-row {
  position: absolute;
  inset: 0;         /* top/right/bottom/left: 0 */
  z-index: 10;      /* above content rows */
  pointer-events: none; /* optional: lets clicks pass through */
}

/* Make the canvas fill the overlay row */
.scratch-canvas {
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 640 640'>\
  <path fill='%23ffd54a' d='M420.9 448C428.2 425.7 442.8 405.5 459.3 388.1C492 353.7 512 307.2 512 256C512 150 426 64 320 64C214 64 128 150 128 256C128 307.2 148 353.7 180.7 388.1C197.2 405.5 211.9 425.7 219.1 448L420.8 448zM416 496L224 496L224 512C224 556.2 259.8 592 304 592L336 592C380.2 592 416 556.2 416 512L416 496zM312 176C272.2 176 240 208.2 240 248C240 261.3 229.3 272 216 272C202.7 272 192 261.3 192 248C192 181.7 245.7 128 312 128C325.3 128 336 138.7 336 152C336 165.3 325.3 176 312 176z'/>\
</svg>") 10 10, pointer !important;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 2000px; 
  pointer-events: auto;   /* wichtig für Interaktion */
  touch-action: pan-y;  
}


.circle-button:hover {
	background-color: #95C120;
	cursor: pointer;
}

.circle-button p {
	font-family: 'PP Telegraf Ultra',Helvetica,Arial,Lucida,sans-serif;
	font-size: 30px;
}

.circle-button:hover p {
	color: white;
}


/* Pillenform, Knopf usw. bleiben wie zuvor */
:root{
  --w: 110px;
  --h: 44px;
  --bd: 3px;
  --pad: 6px;
}

.toggle-outline{ 
	float: right;
 cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; line-height:0; 
	  display: inline-flex;      /* macht Kinder zu Flex-Items */
  align-items: center;       /* vertikal zentrieren */
  gap: .6rem;                /* Abstand zwischen Text und Schalter */
  line-height: 1;      
}
.toggle-outline input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; }
.toggle-outline .track{
  position:relative; display:inline-block; width:var(--w); height:var(--h);
  box-sizing:border-box; background:#fff; border:var(--bd) solid #000; border-radius:999px;
}

.toggle-title {
	font-family: 'PP Telegraf Ultra',Helvetica,Arial,Lucida,sans-serif;
}

/* Knopf */
.toggle-outline .knob{
  position:absolute; top:50%; left:var(--pad);
  width:calc(var(--h) - 2*var(--pad)); height:calc(var(--h) - 2*var(--pad));
  transform:translateY(-50%); background:#000; border-radius:50%;
  transition:left .22s cubic-bezier(.22,.61,.36,1), right .22s cubic-bezier(.22,.61,.36,1);
}
.toggle-outline input:checked + .track .knob{ left:auto; right:var(--pad); }

/* Labels */
.toggle-outline .label{
  position:absolute; top:50%; transform:translateY(-50%);
  font: 800 calc(var(--h)*0.42)/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.5px; color:#000; transition:opacity .15s ease;
  pointer-events:none; /* damit Klicks nicht blockiert werden */
}

/* ON links … */
.toggle-outline .label-on{ left:calc(var(--bd) + var(--pad) + 4px); }
/* … OFF rechts */
.toggle-outline .label-off{ right:calc(var(--bd) + var(--pad) + 4px); }

/* Sichtbarkeit je Zustand */
.toggle-outline input:checked + .track .label-on{ opacity:1; }
.toggle-outline input:checked + .track .label-off{ opacity:0; }

.toggle-outline input:not(:checked) + .track .label-on{ opacity:0; }
.toggle-outline input:not(:checked) + .track .label-off{ opacity:1; }

/* Fokus */
.toggle-outline input:focus-visible + .track{ box-shadow:0 0 0 3px rgba(0,0,0,.18); }


@media screen and (max-width: 1100px) {
	#chaos-modal h2 {
		font-size: 40px;
	}
	
	#chaos-modal p {
		padding: 0 !important;
	}
}

@media screen and (max-width: 750px) {
	#chaos-modal {
		max-height: 500px !important;
		padding: 1rem !important;
	}
	
}

@media screen and (max-width: 480px) {
	#chaos-modal h2 {
		font-size: 30px;
	}
	
	#chaos-modal .modal-button {
		margin: 0 auto !important;
		text-align: center;
		margin-top: .75rem !important;
	}
}



header {
	position: relative;
	z-index: 9999999;
}


/* ===== Divi Blog: Ein Artikel = 2 Spalten (Bild | Text) + Alternierung ===== */

/* 0) Divi-Defaults neutralisieren */
.et_pb_ajax_pagination_container article.et_pb_post::before,
.et_pb_ajax_pagination_container article.et_pb_post::after{
  content: none !important;
  display: none !important;
}
.et_pb_ajax_pagination_container article.et_pb_post > *{
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* ===== Divi Blog: Ein Artikel = 2 Spalten (Bild | Text) + Alternierung + gleiche Bildbreite ===== */

/* 0) Divi-Defaults neutralisieren */
.et_pb_ajax_pagination_container article.et_pb_post::before,
.et_pb_ajax_pagination_container article.et_pb_post::after{
  content: none !important;
  display: none !important;
}
.et_pb_ajax_pagination_container article.et_pb_post > *{
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

/* 1) Grundlayout: 2 Spalten, vertikal zentriert, großzügiger Abstand
      -> Einheitliche Bildspalten-Breite via CSS-Variable */
.et_pb_ajax_pagination_container article.et_pb_post{
  --img-col: minmax(300px, 50%);                       /* <- Bildbreite hier anpassen */
  display: grid !important;
  grid-template-columns: var(--img-col) 1fr !important;/* Bild | Text (ungerade Artikel) */
  align-items: center !important;
  column-gap: clamp(24px, 5vw, 56px) !important;
  row-gap: 0 !important;
  margin: clamp(28px, 6vw, 80px) 0 !important;
  clear: both !important;
}

/* 2) Bild-Spalte (links als Standard) */
.et_pb_ajax_pagination_container article.et_pb_post > .entry-featured-image-url{
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;     /* Bild über die Textzeilen spannen */
  display: block !important;
  margin: 0 !important;
}
.et_pb_ajax_pagination_container article.et_pb_post > .entry-featured-image-url img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* 3) Text-Spalte (rechts): Datum, Titel, Inhalt gestapelt */
.et_pb_ajax_pagination_container article.et_pb_post > .post-meta,
.et_pb_ajax_pagination_container article.et_pb_post > .entry-title,
.et_pb_ajax_pagination_container article.et_pb_post > .post-content{
  grid-column: 2 !important;
  margin: 0 !important;
  max-width: 52ch !important;           /* angenehme Lesebreite */
}
.et_pb_ajax_pagination_container article.et_pb_post > .post-meta{
  margin-bottom: 10px !important;
  opacity: .9 !important;
	order: -1;
}
.et_pb_ajax_pagination_container article.et_pb_post > .entry-title{
  margin-bottom: 14px !important;
  line-height: 1.15 !important;
}
.et_pb_ajax_pagination_container article.et_pb_post > .post-content{
  margin-top: 6px !important;
}

/* 4) Alternierung: Gerade Artikel = Spalten getauscht (Text | Bild),
      Bildbreite bleibt identisch durch geänderte Grid-Definition */
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even){
  grid-template-columns: 1fr var(--img-col) !important; /* Text | Bild */
}
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .entry-featured-image-url{
  grid-column: 2 !important;
}
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .post-meta,
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .entry-title,
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .post-content{
  grid-column: 1 !important;
}

/* 5) Responsive: untereinander stapeln (Tablet/Mobile) */
@media (max-width: 980px){
.et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title span{
	padding: 0 !important;
}
  .et_pb_ajax_pagination_container article.et_pb_post,
	.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even){
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    align-items: start !important;
  }
	.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .post-meta,
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .entry-title,
.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .post-content,
	.et_pb_ajax_pagination_container article.et_pb_post:nth-of-type(even) > .entry-featured-image-url,
  .et_pb_ajax_pagination_container article.et_pb_post > .entry-featured-image-url,
  .et_pb_ajax_pagination_container article.et_pb_post > .post-meta,
  .et_pb_ajax_pagination_container article.et_pb_post > .entry-title,
  .et_pb_ajax_pagination_container article.et_pb_post > .post-content{
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: none !important;
  }
}

/* 6) (Optional) Mini-Hammer, falls ein anderes CSS Kindern 100% Breite gibt */
.et_pb_ajax_pagination_container article.et_pb_post > * { width: auto !important; }

/* 7) (Optional) Exakt gleiche Höhe erzwingen (hartes Cropping):
.et_pb_ajax_pagination_container article.et_pb_post > .entry-featured-image-url img{
  height: 260px !important;
  width: 100% !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
}
*/