@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Playfair+Display|Righteous');
a{
    text-decoration: none !important;
}
html, body{
	margin: 0;
	padding: 0;
	background-color: #F3F3F3;
	color: #000;
}

*{
	box-sizing: border-box;
}

a{
	color: rgb(255, 255, 255) !important;
}


section.wrapper_aufklappen .aufklappen_wrap{
	width: calc(100% - 20px);
	max-width: 1100px;
	margin: 0 auto;
}

section.wrapper_aufklappen .aufklappen_wrap .einzeln{
	margin-bottom: 10px;
}

section.wrapper_aufklappen .aufklappen_wrap .titel_wrap{
	cursor: pointer;
	text-align: center;
	border-bottom: 4px solid #FF9102;
	border-left: 20px solid #FF9102;
	width: 100%;
	padding: 20px 0;
	position: relative;
}

section.wrapper_aufklappen .aufklappen_wrap .titel_wrap h3{
	position: relative;
	margin: 0;
}


section.wrapper_aufklappen .aufklappen_wrap .titel_wrap h3:after{
	content: '';
	position: absolute;
	background-image: url(images/arrowred.svg);
	background-position: top right;
	background-repeat: no-repeat;
	height: 70%;
	top: 15%;
	width: 100%;
	right: 0;
	background-size: contain;
}

section.wrapper_aufklappen .aufklappen_wrap .beschreibung_wrap{
	display: none;
	padding: 20px;
}

@keyframes shake {
	0% { 
		transform: rotate(15deg);
	}
	18% { 
		opacity: 1;
		transform: rotate(-13deg);
	}
	36% { 
		opacity: 1;
		transform: rotate(11deg);
	}
	54% { 
		opacity: 1;
		transform: rotate(-9deg);
	}
	72% { 
		opacity: 1;
		transform: rotate(7deg);
	}
	84% { 
		opacity: 1;
		transform: rotate(-5deg);
	}
	100% { 
		opacity: 1;
		transform: rotate(0deg);
	}
}
/* ===== City Links (unten) ===== */
.impresssum .content{
  max-width: 1100px;
  margin: 0 auto;
}

.citylinks{
  padding: 20px 10px 10px;
  text-align: center;
}

.citylinks__title{
  font-weight: 700;
  margin-bottom: 12px;
  color: #233451;
}

.citylinks__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-bottom: 15px;
}

/* wichtig: überschreibt dein globales a{color: white !important;} */
.citylinks__item{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 20px;
  background: #d2d6dc;
  color: #fff !important;
  font-weight: 700;
  border: 2px solid #FF9102;
  transition: 0.2s ease;
}

.citylinks__item:hover{
  background: #FF9102;
  color: #233451 !important;
}

/* Impressum Link darunter sauber lesbar */
.impressum-link{
  display: inline-block;
  margin-top: 10px;
  color: #233451 !important;
  font-weight: 700;
}
/* =========================
   MOBILE FIXES (Banner + Citylinks)
   ========================= */
@media (max-width: 520px){

  /* Orange Banner / Titel oben */
  .Sign{
    transform: none !important;        /* nimmt extreme Rotation/Skalierung raus (falls vorhanden) */
    margin: 10px auto 10px !important;
    width: calc(100% - 20px) !important;
    max-width: 420px !important;
  }

  .Sign .Text,
  .Text.Highlite1{
    font-size: 34px !important;        /* kleiner */
    line-height: 1.05 !important;
    padding: 12px 14px !important;
    text-align: center !important;
    white-space: normal !important;    /* darf umbrechen */
    word-break: normal !important;
  }
}

@media (max-width: 380px){
  .Sign .Text,
  .Text.Highlite1{
    font-size: 28px !important;
    padding: 10px 12px !important;
  }
}
@media (max-width: 520px){

  .citylinks{
    padding: 16px 10px 10px !important;
  }

  .citylinks__title{
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  /* statt flex -> grid: 2 Buttons nebeneinander */
  .citylinks__grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-items: stretch !important;
  }

  .citylinks__item{
    font-size: 14px !important;
    padding: 10px 10px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  /* Impressum daneben: unter die Buttons, sonst wirkt es “schief” */
  .impressum-link{
    display: block !important;
    margin: 14px auto 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 360px){
  .citylinks__grid{
    grid-template-columns: 1fr !important; /* ganz kleine Handys: 1 Spalte */
  }
}
/* ===== MOBILE HERO TITLE FIX ===== */
@media (max-width: 768px) {
  .hero .Sign h1 {
    font-size: 34px !important;
    transform: rotate(-5deg) !important;
    padding: 8px 14px !important;
    line-height: 1.2;
    text-align: center;
    max-width: 95%;
  }
}

@media (max-width: 480px) {
  .hero .Sign h1 {
    font-size: 28px !important;
    transform: rotate(0deg) !important;
    border-radius: 16px;
  }
}
/* ===== CITY LINKS OPTIMIERUNG ===== */
.citylinks_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 25px;
}

.citylinks_item {
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 18px;
  font-weight: 600;
  text-align: center;
}

/* Mobile Feinschliff */
@media (max-width: 600px) {
  .citylinks_grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .citylinks_item {
    font-size: 14px;
    padding: 8px 10px;
  }
}

@media (max-width: 400px) {
  .citylinks_grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Fix: City Buttons Text bleibt im Kasten ===== */
.citylinks__item,
.citylinks_item {                 /* falls bei dir mal _ oder ohne _ */
  white-space: normal !important;
  word-break: break-word !important;
  overflow: hidden !important;
  line-height: 1.15 !important;
  padding: 10px 10px !important;
  min-height: 56px;              /* sorgt dafür, dass 2 Zeilen sauber reinpassen */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* ===== Fix: Banner wieder leicht schräg ===== */
@media (max-width: 520px){
  .Sign .Text,
  .Text.Highlite1{
    transform: rotate(-6deg) !important;
    transform-origin: center !important;
    display: inline-block !important;
    max-width: 92vw !important;
  }
}

@media (max-width: 380px){
  .Sign .Text,
  .Text.Highlite1{
    transform: rotate(-3deg) !important; /* auf sehr kleinen Handys weniger schräg */
  }
}
/* ===== Banner (orange) wieder schräg + mobile sauber ===== */
@media (max-width: 520px){
  .hero .Sign h1{
    transform: rotate(-8deg) !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    padding: 12px 16px !important;
    max-width: 92vw !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

@media (max-width: 380px){
  .hero .Sign h1{
    transform: rotate(-5deg) !important;
    font-size: 26px !important;
  }
}
/* ===== HERO BACKGROUND MOBILE FIX ===== */
@media (max-width: 768px){
  .hero,
  #section1 {
    min-height: 520px !important;              /* gibt dem Bild Platz */
    background-size: contain !important;       /* GANZ WICHTIG */
    background-repeat: no-repeat !important;
    background-position: center top !important;
  }
}

@media (max-width: 480px){
  .hero,
  #section1 {
    min-height: 460px !important;
  }
}
/* ===== MOBILE HERO IMAGE (NUR HANDY) ===== */
@media (max-width: 768px){
  .hero,
  #section1{
    background-image: url("static/img/hero-mobile.jpg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    min-height: 520px !important;
  }
}

@media (max-width: 480px){
  .hero,
  #section1{
    min-height: 480px !important;
  }
}
@media (max-width: 768px){
  .textbox1,
  .textbox2{
    padding: 14px 16px;
    line-height: 1.35;
    border-radius: 10px;
  }
}
@media (max-width: 768px){
  .sign h1{
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  }
}
.content .row .pic img,
.content .row img.img-fluid {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
/* ===== iPhone/Safari FIX: Hero-Bild muss sichtbar sein ===== */
@media (max-width: 768px){
  .hero,
  #section1{
    background-image: url("/static/img/hero-mobile.jpg") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* WICHTIG für iOS Safari */
    background-attachment: scroll !important;
  }
}
/* ===== HERO: Mobile Bild weiter weg (weniger Zoom) ===== */
@media (max-width: 768px){
  .hero,
  #section1{
    background-size: contain !important;   /* WICHTIG */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-color: #6fa9d8; /* hellblau statt weiß */
  }
}
.citylinks,
.citylinks_grid{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}