:root{

	--primary-color: #A02725;
}

.debug{
	height: 100rem;
	color: red;
}




.li_normal_text::marker{

	color: var(--primary-color);
}


.list{
	padding: 0;
    list-style-position: inside;
}

.list_check{

	padding: 0;
    list-style-position: inside;
	list-style-type: none; 
}

.li_checklist::before{

	content: "";
    background-image: url('/bilder/doghaus/check.png'); /* Pfad zum Bild anpassen */
    background-size: 20px 20px; /* Größe des Bildes festlegen */
    background-repeat: no-repeat; /* Wiederholung des Bildes verhindern */
    display: inline-block;
    width: 20px; /* Breite des Bilds festlegen */
    height: 20px; /* Höhe des Bilds festlegen */
    margin-right:0.8rem; /* Abstand zwischen Bild und Text */
    vertical-align: middle; /* Bild vertikal ausrichten */
	margin-bottom: 0.35rem;

}

.table_sec5{
	display: flex;
	flex-direction: row;
}

.big_list{
	display: flex;
	flex-direction: column;
}

.table_pictures{

	display: flex;
	flex-direction: column;
	gap:1.7rem;
	align-items: flex-end;
}

.little_list{

	display: flex;
	flex-direction: column;
	gap:0.6rem;
	width:150%;
}

.cutline{
	width: auto;
	height: 1px;
	background-color:#d5d5d5;
}

.elements{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.qsec5_pics{

	
	width: 43%;
}


.no-wrap {
    white-space: nowrap;
}

#godown2{
	padding-right: 3rem;
    padding-left: 3rem;
}

#godown3{
	padding-right: 3rem;
    padding-left: 3rem;
	
}

@media only screen and (max-width: 900px) {
	.li_normal_text{
		text-align: left;
	}

	.list{

		display: flex;
        flex-direction: column; /* Stellt sicher, dass die Elemente untereinander erscheinen */
        align-items: center; 
		gap: 1rem;
	}

	.li_normal_text{

		display: flex;
        flex-direction: column; /* Stellt sicher, dass die Elemente untereinander erscheinen */
        align-items: center; 
		text-align: center;
	}
	.list_check{

		display: flex;
        flex-direction: column; /* Stellt sicher, dass die Elemente untereinander erscheinen */
        align-items: center; 
		gap: 1rem;
		margin-top:2rem;
	}

	.li_checklist{

		display: flex;
        flex-direction: column; /* Stellt sicher, dass die Elemente untereinander erscheinen */
        align-items: center; 
	}

	.list{

		list-style-position: outside;
   		 padding-left: 1.5rem;
		 padding-left: 0rem;
		 list-style-position: unset;
	}

}


@media only screen and (max-width: 850px) {
	.doghausbg{
		background-position-x: 40%;
	}

}

@media only screen and (max-width: 900px) {
	.little_list{
		width:100%;
		
	}

	.table_pictures{
		align-items: center;
	}

	.table_sec5{
		flex-direction: column;
		gap:3rem;
	}

	.dog1{
		transform:translateX(-30%);
	}

	.dog2{

		transform:translate(30%,-25%);
	}

	.change{
		align-items: unset;
	}
	.doghaussec7{
		padding-top: 0rem;
	}
	.doghaussec5{
		padding-bottom:0rem;
	}
}

@media only screen and (max-width: 600px) {
	.little_list{
		font-size: .8rem;
		
	}

	#godown2{
		font-size: .8rem;
	}

	#godown3{
		font-size: .8rem;
	}
}


/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* CSS für line.php */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


.wrapper_line{

	display: flex;
	justify-content: center;
	margin-top: 5rem;
	margin-bottom: 5rem;
	clip-path: inset(0 0 0 0); 
}

.mobile_wrapper{

	display: flex;
	justify-content: center;
}


.grid-container {
	display: grid;
	grid-template-columns: 1fr 5rem 1fr;
	row-gap: 7rem;
	column-gap: 5rem;
	width: min(90vw, 65rem);

}


.grid-container_mobile {
	display: none;
	grid-template-columns: 1fr 1fr;
	row-gap: 7rem;
	column-gap: 5rem;
	width: min(90vw, 65rem);

}



.grid-item_left {
	display: flex;
	flex-direction: column;
	align-items:flex-start;
	opacity: 0;
    transform: translateX(-100px); /* Verschieben von links außerhalb des Bildschirms */
    transition: opacity 1s ease, transform 0.5s ease; /* Weiche Transition */
}

/* Fade-in-Klasse für die sichtbaren Boxen */
.grid-item_left.fade-in {
    opacity: 1;
    transform: translateX(0); /* Bewegt das Element zurück in seine ursprüngliche Position */
}

.grid-item_right{

	display: flex;
	flex-direction: column;
	align-items:flex-start;
	opacity: 0;
    transform: translateX(100px); /* Verschieben von rechts außerhalb des Bildschirms */
    transition: opacity 1s ease, transform 0.5s ease; /* Weiche Transition */
}

/* Fade-in-Klasse für die sichtbaren Boxen */
.grid-item_right.fade-in {
    opacity: 1;
    transform: translateX(0); /* Bewegt das Element zurück in seine ursprüngliche Position */
}


.grid-item.center {
	width: 3rem;
    height: 3rem;
    background-color: black;
    border-radius: 7px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto; /* Zentriert die Box in der Spalte */
}

.text-content {
	font-size: 18px;
}

.grid_header{

	margin: 0;
}


/* Erste Linie: durchgehend hellgrau von `data-index="1"` bis `data-index="8` */
.line1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%; /* Volle Höhe des Containers */
    background-color: lightgrey;
    z-index: -2; /* Hintergrundebene */
}

/* Zweite Linie: Farbverlauf, der scheinbar statisch bleibt */
.line2 {
    position: fixed; /* Positioniert die Linie fest im Viewport */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 28rem; /* Festgelegte Höhe für den Verlauf zwischen `data-index="1"` und `data-index="3` */
    top: 100px; /* Positionierung passend zur ersten Box, z.B. 100px vom oberen Rand */
    background: linear-gradient(to bottom, lightgrey, black);
    z-index: -1; /* Über der ersten Linie */
}

@media only screen and (max-width:1250px){

	.grid-container{

		width:min(75vw, 65rem);
	}
}

@media only screen and (max-width: 800px) {
	.grid-container {

		display: none;
	}

	.grid-container_mobile {

		display: grid;
	}
	
	.text-content{
		font-size: .8rem;
	}

	.grid_header{

		font-size: 1rem;
	}

	.grid-container_mobile {

		grid-template-columns: 1.5fr 1fr;
		row-gap:5rem;
		column-gap:0rem;
	}

	.line1{

		left:82%;
	}

	.line2{

		left:82%;
	}

	.grid-item.center{

		width:2rem;
		height:2rem;
		font-size:1rem;
	}

	.wrapper_line{

		justify-content: flex-end;
	}
}