* { margin: 0; padding: 0; box-sizing: border-box; }  html, body {    height: 100%;    background: #f8f8ff;    overflow: hidden;  }    /* Wrapper, der die Breite vorgibt (voll auf dem Handy, mit Rand auf grosseren Screens) */  .phone {    height: 100dvh;    width: 100%;    margin: 0 auto;  }  /* Ausserer Container: vertikales Snap-Scrolling zwischen den Reihen */  .rows {    height: 100%;    width: 100%;    overflow-y: scroll;    overflow-x: hidden;    scroll-snap-type: y mandatory;    scroll-behavior: smooth;  }  /* Jede Reihe: horizontales Snap-Scrolling zwischen den Videos */  

p {
	margin: 0 0 .8rem 0;
}
.verdana-800 {
	font-family: Trebuchet MS;
	font-weight: 600;
}

.row {    
	height: 100%;    
	width: 100%;    
	scroll-snap-align: start;    
	scroll-snap-stop: always;    
	display: flex;    
	overflow-x: scroll;    
	overflow-y: hidden;    
	scroll-snap-type: x mandatory;    scroll-behavior: smooth;  
	}  
	
.slide {    
	flex: 0 0 100%;    
	height: 100%;    
	scroll-snap-align: start;    
	scroll-snap-stop: always;    
	position: relative;    
	display: flex;    
	align-items: center;    
	justify-content: center;    
	background: #111;  
	}    
	
.slide-white {    
	flex: 0 0 100%;    
	height: 100%;    
	scroll-snap-align: start;    
	scroll-snap-stop: always;    
	position: relative;    
	display: flex;    
	align-items: top;    
	justify-content: left;    
	padding: 2rem .5rem 0 1rem;    
	background: #f8f8ff;    
	color: black;    
	font-size: 1.35rem;    
	font-family: Abel;  
	}  
	
	.slide-black {    
	flex: 0 0 100%;    
	height: 100%;    
	scroll-snap-align: start;    
	scroll-snap-stop: always;    
	position: relative;    
	display: flex;    
	align-items: top;    
	justify-content: left;    
	padding: 2rem .5rem 0 1rem;    
	background: #222;    
	color: #f8f8ff;    
	font-size: 1.35rem;    
	font-family: Abel;  
	} 
	
/* Ab Tablet-/Desktop-Breite: Seite wie ein Handy-Bildschirm mittig mit Rand links/rechts */  
@media (min-width: 700px) {    
	.phone {      
		max-width: 430px;      
		box-shadow: 0 0 60px rgba(0,0,0,0.5);    
	} 
	}  
		
.slide video {    
	width: 100%;    
	height: 100%;    
	object-fit: cover;  
	} 
	
.arrow-right-black {    
	position: absolute;    
	bottom: 3%;    
	right: 2%;  
	width: 20px;
	color: black;   
	font-family: Abel;    
	font-size: 1rem;    
	background: transparent;  
	}
	
.arrow-right-white {    
	position: absolute;    
	bottom: 3%;    
	right: 2%;  
	width: 20px;
	color: #f8f8ff;   
	font-family: Abel;    
	font-size: 1rem;    
	background: transparent;  
	}
	
.arrow-left-black {    
	position: absolute;    
	bottom: 3%;    
	left: 2%;  
	width: 20px;
	color: black;   
	font-family: Abel;    
	font-size: 1rem;    
	background: transparent;  
	}
	
.arrow-left-white {    
	position: absolute;    
	bottom: 3%;    
	left: 2%;  
	width: 20px;
	color: #f8f8ff;   
	font-family: Abel;    
	font-size: 1rem;    
	background: transparent;  
	}
	
.arrow-bottom-black {    
	position: absolute;    
	bottom: 3%;    
	left: 49.5%;  
	width: 20px;
	color: black;   
	font-family: Abel;    
	font-size: 1rem;    
	background: transparent;  
	}

.label {    
	position: absolute;    
	bottom: 24px;    
	left: 16px;    
	color: #fff;    
	font-family: Abel;    
	font-size: 1.15rem;    
	font-weight: 400;    
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);    
	background: transparent;    
	padding: 6px 12px;    
	border-radius: 20px;    
	letter-spacing: 0.2px;  
	}    

.label-white {    
	position: absolute;    
	bottom: 24px;    
	left: 16px;    
	color: #f8f8ff;        
	font-size: 1.3rem;
   font-family: Abel;
	} 

.label-top {    
	position: absolute;    
	top: 3rem;    
	padding: 0 .5rem;
	color: black;   
	font-family: Abel;    
	font-size: 1.35rem;    
	background: transparent;  
	} 
	
.label-center {    
	position: relative;    
	top: 46%;    
	left: 50%;  
	width: 200px;
	margin-left: -65px;
	color: black;   
	font-family: Abel;    
	font-size: 1.35rem;    
	background: transparent;  
	} 
	
.label-center-black {    
	position: relative;    
	top: 46%;    
	left: 50%;  
	width: 200px;
	margin-left: -65px;
	color: #f8f8ff;;   
	font-family: Abel;    
	font-size: 1.5rem;
	letter-spacing: .15rem;
	background:;  
	} 
	
.label-center-fine {    
	position: relative;    
	top: 48%;    
	left:45%;  
	color: black;   
	font-family: Abel;    
	font-size: 1.35rem;    
	background: transparent;  
	} 
	
.label-top-fine {    
	position: relative;    
	top: 1%;    
	left:43%; 
	width: 30px;
	color: black;   
	font-family: Abel;    
	font-size: 1.35rem;  
	font-weight: 800;
	background: transparent;  
	} 
	
.label-left {    
	position: absolute;    
	top: 48%;    
	left: 3%;  
	color: black;   
	font-family: Abel;    
	font-size: 1.35rem;    
	background: transparent;  
	} 
	
.label-black {    
	position: absolute;    
	bottom: 24px;    
	left: 16px;    
	color: #111;    
	font-family: Abel;    
	font-size: 1.15rem;    
	font-weight: 400;       
	background: transparent;    
	padding: 6px 12px;    
	border-radius: 20px;    
	letter-spacing: 0.2px;  
	} 
	
.hint {    
	position: fixed;    
	top: 16px;    
	left: 50%;    
	transform: translateX(-50%);    
	color: rgba(255,255,255,0.7);    
	font-family: Abel;    
	font-size: 12px;    
	z-index: 10;    
	pointer-events: none;    
	text-align: center;    
	line-height: 1.4;  
	}
	
	/* Scrollbars ausblenden */  
	.rows::-webkit-scrollbar,  .row::-webkit-scrollbar { display: none; }  .rows, .row { scrollbar-width: none; -ms-overflow-style: none; }
	
	
	
	
a:link { color:black; text-decoration:none;opacity:1; }
a:visited { color:black; text-decoration:none;opacity:1; }
a:hover { color:black; text-decoration:none;opacity:1; }
a:active { color:black; text-decoration:none;opacity:1; }

a.red:link { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.red:visited { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.red:active { color:crimson; text-decoration:none;opacity:1; cursor:pointer; }


	
	
	/* === Like-Button rechts (TikTok-Style) === */
.like-bar {
  position: absolute;
  right: 6px;
  bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 999;
}

.like-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  font-size: 28px;
  line-height: 1;
}

.like-btn:hover {
  transform: scale(1.1);
}

.like-btn .heart {
  color: #f8f8ff;
  transition: color 0.2s ease, transform 0.3s ease;
}

.like-btn.liked .heart {
  color: darkred;
  animation: pop 0.4s ease;
}

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.like-count {
  color: #000;
  font-family: 'Abel', sans-serif;
  font-size: 1.1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}