body{

margin: 0 auto;

}

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:#212529;
  text-align:left;
  background-color:#fff
}
.blocksatz {text-align: justify;}
img {max-width:100%; height:auto;}

/* ----- typography ----- */
h1, h2, h3, h4, h6 {color:#434343 ; font-weight: 600;}

h1 {font-size:2em}

h2 {font-size:1.7em}

h3 {font-size:1.4em}

h4 {font-size:1.1em}

h5 {
	font-size:1.2em;
	font-weight: bold;
  line-height: 28px;
  color:#000;
}


h6 {font-size:2.9em}

p {
	/*text-align:justify;*/
	color:#666  ;
	line-height:1.3em;
	margin:0 0 0.8em 0;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

a {color: #990000; text-decoration: none; line-height: inherit; font-weight: bold; }
a:hover {color: #FD7901; text-decoration: underline; }
a:focus {color: #FD7901; outline: none; }

hr{
	border:solid #666 1px; height:1px;
	clear:both;
}

li {
	padding-bottom: 4px;
}

ul {
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
	list-style-type: square
}

.play {list-style-image: url("images/play.png");}
.ok {list-style-image: url("images/ok.png");}

ol {
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
}


address {
	margin: 10px 0 20px 0;
	padding-left: 10px;
	border-left: 8px solid #ccc;
	font-style: normal;
  font-size: 16px;
  background-color: #F1F1F1;
}
	


pre, code {
	padding: 5px 0 10px 6px;
	margin: 3px 0 20px 0;
	font-size:1em;
	overflow:auto;
	line-height:1.5em;
	color:#eee;
}

input , textarea, pre, code, blockquote, select {
	border: 1px solid #ccc;  background:;  color: #000;
}

.imgl {
float:left;
margin:0 15px 10px 0
}

.imgr {
float:right;
margin:0 0 10px 15px
}

.picfull {width:100%; height:auto;}
.pic2left {float:left; max-width:49%; margin: 3px 1% 2px 0; height:auto;}
.pic2right {float:right; max-width:49%; margin: 3px 0 2px 0.5%; height:auto;}

.pic3left {float:left; max-width:32%; margin: 3px 1.5% 2px 0; height:auto;}
.pic3right {float:right; max-width:32%; margin: 3px 0 2px 0.3%; height:auto;}

.pic4left {float:left; max-width:24%; margin: 3px 1% 2px 0; height:auto;}
.pic4right {float:right; max-width:24%; margin: 3px 0 2px 0.5%; height:auto;}


/*Show and Hide Responsive*/
.hideOnDesktops {display: none;}

/* Small devices (tablets, up to 768px) */
@media (max-width: 600px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}

	/*Show and Hide Responsive*/
	body .hideOnTablets {display: none;}
	.hideOnDesktops {display: block;}
}

/* Small devices (Smartphone, up to <480px) */
@media (max-width: 479px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}

	/*Show and Hide Responsive*/
	.hideOnMobiles {display: none;}
	body .hideOnTablets {display: block;}
	body .hideOnDesktops {display: block;}
}





/*===== // Resonsive Vertical Timeline =====*/


/*===== Vertical Timeline =====*/
#conference-timeline {
  position: relative;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
#conference-timeline .timeline-start,
#conference-timeline .timeline-end {
  display: table;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  background: #ff4208;
  padding: 15px 23px;
  color: #fff;
  max-width: 5%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#conference-timeline .conference-center-line {
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -2px;
  background: #ff4208;
  z-index: -1;
}
#conference-timeline .conference-timeline-content {
  padding-top: 67px;
  padding-bottom: 67px;
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}
.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #242424;
  text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
  border: 1px solid #ddd;
  background-color: #eee;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 27px 20px;
}
.timeline-article p {
  margin: 0 0 0 60px;
  padding: 0;
  font-weight: 400;
  color: #242424;
  font-size: 14px;
  line-height: 24px;
  position: relative;
}
.timeline-article p span.article-number {
  position: absolute;
  font-weight: 300;
  font-size: 24px;
  top: 10px;
  left: -75px;
  color: #ff6708;
}
.timeline-article .content-left-container {
  float: left;
}
.timeline-article .content-right-container {
  float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{
  position: absolute;
  top: 20px;
  font-size: 55px;
  font-family: "FontAwesome";
  color: #eee;
}
.timeline-article .content-left:before {
  content: "\f0da";
  right: -15px;
}
.timeline-article .content-right:before {
  content: "\f0d9";
  left: -15px;
}
.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  color: #fff;
  border-radius: 100%;
  background: #990000;
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
  display: block;
  text-align: center;
  font-weight: 900;
}
.timeline-article .meta-date .date {
  font-size: 30px;
  line-height: 40px;
}
.timeline-article .meta-date .month {
  font-size: 40px;
  line-height: 10px;
  padding-top: 7px;
}
/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
  #conference-timeline .timeline-start,
  #conference-timeline .timeline-end {
    margin: 0;
  }
  #conference-timeline .conference-center-line {
    margin-left: 0;
    left: 50px;
  }
  .timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
  }
  .timeline-article .content-left-container,
  .timeline-article .content-right-container {
    max-width: 100%;
    width: auto;
    float: none;
    margin-left: 110px;
    min-height: 53px;
  }
  .timeline-article .content-left-container {
    margin-bottom: 20px;
  }
  .timeline-article .content-left,
  .timeline-article .content-right {
    padding: 10px 25px;
    min-height: 65px;
  }
  .timeline-article .content-left:before {
    content: "\f0d9";
    right: auto;
    left: -8px;
  }
  .timeline-article .content-right:before {
    display: none;
  }
}
@media only screen and (max-width: 400px) {
  .timeline-article p {
    margin: 0;
  }
  .timeline-article p span.article-number {
    display: none;
  }
  
}
/*===== // Resonsive Vertical Timeline =====*/

.button-dark, a.button-dark {
  background: rgba(20, 22, 24, 0.9);
  color: rgba(255, 255, 255, 0.9);
  padding: 15px;
}
.info{
  background-color: #FFF8B3;
  padding: 6px;
  border: 1px solid #FFB54C;
  -moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
 .kurse {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 30.333%;
    margin: 9px;
  }
  
.footer-links li {
	padding-bottom: 8px;
  color: #FFF8B3;
  text-align:left;
  list-style-type: square:
}  



.client-box {
  display: inline-block;
  text-align: center;
}

.client-box a img {
  opacity: 0.5;
  -webkit-transition: ease-out 0.14s;
  transition: ease-out 0.14s;
}

.client-box a:hover img, .client-box a:focus img {
  opacity: 1;
}

.clients-grid {
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: center;
}

.clients-grid li {
  list-style-type: none;
  position: relative;
  float: left;
  width: 16.6%;
  margin: 0;
  padding: 34px 30px;
}

.clients-grid li:before, .clients-grid li:after {
  content: '';
  position: absolute;
}

.clients-grid li:before {
  top: 0;
  left: -1px;
  height: 100%;
  border-left: 1px dashed #e3e6e9;
}

.clients-grid li:after {
  left: 0;
  bottom: -1px;
  width: 100%;
  border-bottom: 1px dashed #e3e6e9;
}

.clients-grid li a img {
  opacity: 0.5;
  -webkit-transition: ease-out 0.14s;
  transition: ease-out 0.14s;
}

.clients-grid li a:hover img, .clients-grid li a:focus img {
  opacity: 1;
}

@media (max-width: 991.98px) {
  .clients-grid li {
    width: 25%;
  }
}

@media (max-width: 767.98px) {
  .clients-grid li {
    width: 33.3%;
  }
}

@media (max-width: 575.98px) {
  .clients-grid li {
    width: 50%;
  }
}

.clients-grid.column-5 li {
  width: 20%;
}

@media (max-width: 991.98px) {
  .clients-grid.column-5 li {
    width: 25%;
  }
}

@media (max-width: 767.98px) {
  .clients-grid.column-5 li {
    width: 33.3%;
  }
}

@media (max-width: 575.98px) {
  .clients-grid.column-5 li {
    width: 50%;
  }
}

.clients-grid.column-4 li, .clients-grid.masonry.column-5 li, .clients-grid.masonry.column-6 li, .clients-grid.portfolio-masonry.column-5 li, .clients-grid.portfolio-metro.column-5 li, .clients-grid.portfolio-masonry.column-6 li, .clients-grid.portfolio-metro.column-6 li {
  width: 25%;
}

@media (max-width: 767.98px) {
  .clients-grid.column-4 li, .clients-grid.masonry.column-5 li, .clients-grid.masonry.column-6 li, .clients-grid.portfolio-masonry.column-5 li, .clients-grid.portfolio-metro.column-5 li, .clients-grid.portfolio-masonry.column-6 li, .clients-grid.portfolio-metro.column-6 li {
    width: 33.3%;
  }
}

@media (max-width: 575.98px) {
  .clients-grid.column-4 li, .clients-grid.masonry.column-5 li, .clients-grid.masonry.column-6 li, .clients-grid.portfolio-masonry.column-5 li, .clients-grid.portfolio-metro.column-5 li, .clients-grid.portfolio-masonry.column-6 li, .clients-grid.portfolio-metro.column-6 li {
    width: 50%;
  }
}

.clients-grid.column-3 li {
  width: 33.3%;
}

@media (max-width: 767.98px) {
  .clients-grid.column-3 li {
    width: 50%;
  }
}

.clients-grid.column-2 li {
  width: 50%;
}

.clients-grid.border-style-solid {
  border: 0;
}

.clients-grid.border-style-solid li:before {
  border-left-style: solid;
}

.clients-grid.border-style-solid li:after {
  border-bottom-style: solid;
}

.clients-grid.border-style-dotted {
  border: 0;
}

.clients-grid.border-style-dotted li:before {
  border-left-style: dotted;
}

.clients-grid.border-style-dotted li:after {
  border-bottom-style: dotted;
}

div[class^='bg-dark'] .clients-grid li:before, div[class^='bg-dark'] .clients-grid li:after, div[class*=' bg-dark'] .clients-grid li:before, div[class*=' bg-dark'] .clients-grid li:after, .bg-black .clients-grid li:before, .bg-black .clients-grid li:after {
  border-color: rgba(255, 255, 255, 0.2);
}



.testimonial-box .quote {
  position: relative;
  background: #eee;
  border-radius: 0.5em;
  padding: 30px;
  font-size: 15px;

}

.testimonial-box .quote::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 40px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #eee;
  width: 17px;
  height: 17px;
}

.testimonial-box .avatar {
  position: relative;
  min-height: 60px;
  margin-top: 20px;
  vertical-align: middle;
}
.testimonial-box p {
 color: #000;
}
.angebot {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.angebot:hover {
    border-color: #ff9900;
}

/* Kategorie (Neuer Tanzkurs) */
.angebot h4 {
    color: #333;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Kurs-Titel */
.angebot h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* Preis-Sektion */
.angebot h6 {
    font-size: 36px;
    font-weight: 800;
    margin: 20px 0 0 0;
    color: #8356D9;
}

.preis-info {
    font-size: 14px;
    color: #888;
    margin-bottom: 25px;
}

/* Die Checkliste (Vorteile) */
.ok {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    text-align: left; /* Links bündig ist leichter zu lesen */
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.ok li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #555;
}

/* Schicke Häkchen statt Standard-Bullets */
.ok li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #ff9900;
    font-weight: bold;
}

/* Button-Styling (Orange -> Schwarz) */
.angebotbutton {
    width: 100%; /* Button über die ganze Breite wirkt moderner */
    background-color: #ff9900 !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 15px 20px !important;
    font-weight: bold;
    border: none !important;
    transition: all 0.3s ease !important;
}

.angebotbutton:hover {
    background-color: #000 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .angebot {
        padding: 25px 15px;
        margin-bottom: 20px;
    }
}


.online-kurs-container {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.kurs-card {
    flex: 1;
    min-width: 300px;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    border: 1px solid #ddd;
}

.kurs-card:hover {
    transform: translateY(-5px);
}

.basics-card {
    background: linear-gradient(135deg, #f9f9f9 0%, #e8f5e9 100%); /* Dezentes Grün für 'Frei' */
    border-left: 5px solid #4caf50;
}

.exklusiv-card {
    background: linear-gradient(135deg, #f9f9f9 0%, #fff3e0 100%); /* Dezentes Gold/Orange für 'Premium' */
    border-left: 5px solid #ff9800;
}

.kurs-card h3 {
    margin-top: 0;
    color: #333;
}


.info-section-footer {
    display: flex;
    gap: 25px;
    margin-top: 60px;
    padding: 40px 20px;
    background: #fdfdfd;
    border-top: 2px solid #eee;
    flex-wrap: wrap;
}

.info-card {
    flex: 1;
    min-width: 300px;
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.info-card h3 {
    color: #333;
    border-bottom: 2px solid #e30613;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.info-card.highlight {
    background: #fffafa;
    border: 1px solid #ffebeb;
}

.info-card strong {
    color: #e30613;
}












.check-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.check-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 0.95em;
    line-height: 1.4;
    color: #444;
}

/* Die roten Häkchen/Punkte */
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #e30613; /* Dein Tanzschul-Rot */
    font-weight: bold;
}

.info-card.highlight .check-list li::before {
    content: "★"; /* Ein Stern für den exklusiven Bereich */
}






.salsa-wrapper {
    width: 100%;
    clear: both;
    display: block;
    margin-bottom: 50px;
}

.salsa-grid {
    display: grid;
    /* Nutzt Bootstrap-ähnliche Abstände, aber als modernes Grid */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin: 20px 0;
}

.level-card {
    background: #ffffff;
    border-radius: 15px;
    border: 2px solid #ff9800; /* Dein Orange */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none !important;
    height: 100%; /* Sorgt für einheitliche Höhe */
}

.level-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(255, 152, 0, 0.2);
    border-color: #e30613;
}

.level-header {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.level-header img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
}

.level-header h3 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 700;
    color: #333;
}

.level-body {
    background: #fafafa;
    padding: 20px;
    flex-grow: 1;
}

.level-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.level-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #444;
}

.level-list li::before {
    content: "➔";
    color: #ff9800;
    position: absolute;
    left: 0;
}

.level-footer {
    padding: 12px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}


.level-footer {
    padding: 12px;
    text-align: center;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
}

/* Stil für Gratis/Frei */
.footer-free {
    background: #4caf50;
    color: #fff;
}

/* Stil für Geschlossen/Schüler */
.footer-locked {
    background: #333;
    color: #fff;
}

/* Das Schloss-Symbol über HTML-Code */
.icon-unlock::before { content: "\1F513"; } /* Offenes Schloss */
.icon-lock::before { content: "\1F512"; }   /* Geschlossenes Schloss */



.level-footer {
    padding: 12px;
    text-align: center;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    display: flex; /* Wichtig für die Ausrichtung des Icons */
    align-items: center;
    justify-content: center;
}

.footer-free {
    background: #4caf50;
    color: #fff;
}

.footer-locked {
    background: #333;
    color: #fff;
}

.level-footer svg {
    flex-shrink: 0; /* Verhindert, dass das Icon gequetscht wird */
}












.contact-card {
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #ff9800;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 30px;
    max-width: 800px;
    margin: 40px auto;
}

.contact-card h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-card .form-group {
    margin-bottom: 20px;
}

.contact-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    font-size: 0.9em;
}

.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="tel"],
.contact-card textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1em;
    transition: all 0.3s ease;
    background: #fafafa;
}

.contact-card input:focus,
.contact-card textarea:focus {
    border-color: #ff9800;
    background: #fff;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.2);
    outline: none;
}

/* Button im Stil deiner Kurs-Footer */
.contact-card .submit-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.contact-card .submit-btn:hover {
    background: #e30613; /* Wechselt auf dein Rot beim Hover */
}

.error-field {
    border-color: #e30613 !important;
    background: #fff0f0 !important;
}

.captcha-wrapper {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}







.btn-tanz-zugang {
    display: inline-block;
    padding: 15px 35px;
    background-color: #ff9800; /* Dein Orange */
    color: #ffffff !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px; /* Abgerundeter "Pillen"-Look */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-tanz-zugang:hover {
    background-color: #333333; /* Dunkel bei Hover */
    color: #ffffff !important;
    transform: translateY(-3px); /* Kleiner Sprung-Effekt nach oben */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btn-tanz-zugang:active {
    transform: translateY(0);
}




/* Cookies Einstellung ausblenden */

.cc-revoke {
    display: none !important;
}
/* Cookies Einstellung */

.cc-window {
    border-radius: 15px !important;       /* Abgerundete Ecken */
    border: 2px solid #474747 !important; /* Dein Tanzschul-Rot als Rahmen */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* Eleganter Schatten */
    padding: 20px !important;             /* Etwas mehr Platz im Inneren */
    margin-bottom: 15px !important;       /* Abstand zum Bildschirmrand */
    margin-right: 15px !important;
  }

  /* Die Buttons (Akzeptieren / Ablehnen) */
  .cc-btn {
    border-radius: 8px !important;        /* Abgerundete Ecken für die Buttons */
    padding: 8px 20px !important;         /* Buttons etwas breiter machen */
    font-weight: bold !important;         /* Text fetten */
    transition: all 0.3s ease !important; /* Sanfter Effekt beim Drüberfahren */
  }

  /* Hover-Effekt für die Buttons */
  .cc-btn:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px);          /* Button hebt sich leicht an */
  }

  /* Der Link zur Datenschutzerklärung */
  .cc-link {
    text-decoration: underline !important;
    opacity: 0.8;
  }
  .cc-link:hover {
    opacity: 1;
    color: #E07B1A !important;
  }
  
  
  
/* Abrundung und Hover-Effekt für die "Zu den Kursen" Buttons */
.onlinekurse-link a, 
.mod_nwi_teasertext a,
a[href*="onlinekurse"] {
    border-radius: 12px !important; /* Etwas runder für einen modernen Look */
    transition: all 0.3s ease !important;
    display: inline-block !important;
}








blockquote {
    position: relative !important;
    margin: 40px 0 40px 10px !important; /* Weiter nach links gerückt */
    padding: 30px 40px 30px 50px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf5 100%) !important;
    border: none !important;
    border-radius: 15px !important;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.05) !important; /* Dezentere Tiefe */
    max-width: 95% !important; /* Nutzt mehr Breite aus */
    overflow: visible !important;
}

/* Der feste orangefarbene Akzent-Balken links */
blockquote::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 8px !important;
    background: #ff8800 !important;
    border-radius: 15px 0 0 15px !important;
}

/* Das große, dezente Anführungszeichen */
blockquote::after {
    content: "\201C" !important;
    position: absolute !important;
    top: -15px !important;
    right: 20px !important;
    font-size: 8rem !important;
    font-family: 'Georgia', serif !important;
    color: #ff8800 !important;
    opacity: 0.1 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* Der Text im Zitat */
blockquote p {
    font-family: 'Georgia', serif !important;
    font-style: italic !important;
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Optional: Autor/Quelle */
blockquote cite {
    display: block !important;
    margin-top: 15px !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    font-style: normal !important;
    color: #ff8800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}



.video-liste {
        list-style: none;
        padding: 0;
        margin: 0;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    /* Styling für jedes Listenelement */
    .video-liste li {
        margin-bottom: 15px;
        background: #ffffff;
        border: 1px solid #eaeaea;
        border-radius: 8px;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    /* Hover-Effekt für das Listenelement */
    .video-liste li:hover {
        background-color: #fff5e6; /* Sehr helles Orange */
        border-color: #ff9800; /* Dein Orange */
        transform: translateX(5px);
    }

    /* Styling für den eigentlichen Link */
    .video-link {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        display: flex; /* Nutzt Flexbox, um Icon und Text auszurichten */
        align-items: center; /* Zentriert Icon und Text vertikal */
        padding: 15px 20px;
        font-size: 1.1rem;
    }

    /* Hover-Effekt für den Link-Text */
    .video-link:hover {
        color: #f57c00; /* Etwas dunkleres Orange */
    }

    /* --- DAS CSS VIDEO-ICON (PLAY-BUTTON) --- */
    
    /* 1. Der äußere Kreis */
    .video-icon {
        width: 30px;
        height: 30px;
        background-color: #ff9800; /* Dein Orange */
        border-radius: 50%; /* Macht es kreisrund */
        margin-right: 15px; /* Abstand zum Text */
        position: relative; /* Basis für die Positionierung des Dreiecks */
        display: inline-block;
        flex-shrink: 0; /* Verhindert, dass das Icon gestaucht wird */
    }

    /* 2. Das Dreieck (Play-Symbol) - erstellt mit dem ::after Pseudoelement */
    .video-icon::after {
        content: '';
        position: absolute;
        
        /* Positionierung innerhalb des Kreises */
        top: 50%;
        left: 55%; /* Leicht nach rechts verschoben, damit es optisch zentrierter wirkt */
        transform: translate(-50%, -50%); /* Exakte Zentrierung */

        /* Dreiecks-Erstellung per Border-Trick */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 7px 0 7px 11px; /* Höhe und Breite des Dreiecks */
        border-color: transparent transparent transparent #ffffff; /* Weißes Dreieck */
    }
	
	
	
	
	
	/* Google Rezension button */
@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 152, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
    }
}

.review-section {
    background: #fdfdfd;
    border: 2px dashed #ff9800;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    margin-bottom: 30px;
}

.review-section p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}

/* Der animierte Button */
.button-review-animate {
    animation: pulse-orange 2s infinite;
    display: inline-block !important;
    transition: transform 0.2s;
}

.button-review-animate:hover {
    transform: scale(1.05);
    animation: none; /* Stoppt beim Hover */
}



/* Die Sterne als CSS-Form */
.star-rating {
    display: inline-flex;
    gap: 5px;
    vertical-align: middle;
}

.css-star {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .9em;
    margin-right: .9em;
    margin-bottom: 1.2em;
    border-right:  .3em solid transparent;
    border-bottom: .7em  solid #ff9800; /* Sternfarbe */
    border-left:   .3em solid transparent;
    font-size: 14px; /* Steuert die Größe der Sterne */
}

.css-star:before, .css-star:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: .6em;
    left: -1em;
    border-right:  1em solid transparent;
    border-bottom: .7em  solid #ff9800;
    border-left:   1em solid transparent;
    transform: rotate(-35deg);
}

.css-star:after {
    transform: rotate(35deg);
}

/* Deine Textfarbe falls nötig */
.text-yellow-orange {
    color: #ff9800;
}



/* --- TEAM SEKTION EXTERNAL CSS --- */

.team-wrapper {
    padding: 60px 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.team-intro {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 60px;
    color: #e0e0e0;
}

/* Team Card Styling */
.team-member-card {
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.team-member-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-10px);
    border-color: rgba(255, 152, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Bild-Container & Oranger Ring */
.member-img-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 25px;
}

.member-img-container::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff9800, #f57c00); 
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.team-member-card:hover .member-img-container::before {
    opacity: 1;
}

.member-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    border: 4px solid #1a1a1a; /* Hintergrundfarbe deiner Seite */
    transition: transform 0.5s ease;
}

.team-member-card:hover .member-img {
    transform: scale(1.05);
}

/* Namen & Rollen */
.member-name {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.member-role {
    color: #ff9800;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

/* Trennlinie */
.member-divider {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 15px auto;
    transition: all 0.3s ease;
}

.team-member-card:hover .member-divider {
    width: 80px;
    background: #ff9800 !important;
}

/* Social Icons */
.social-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icon {
    color: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-icon:hover {
    color: #ff9800 !important;
    transform: translateY(-3px) scale(1.1);
}

/* Tanzschule seite */

    .tanz-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        padding: 20px 0;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    .tanz-card {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 25px;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .tanz-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-color: #ff9800; /* Orangefarbener Rahmen beim Hover */
    }

    .tanz-card h3 {
        color: #333;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }

    .tanz-card p {
        color: #666;
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 25px;
        flex-grow: 1;
    }

    .tanz-btn {
        display: inline-block;
        background-color: #ff9800; /* DEIN ORANGE */
        color: #ffffff !important;
        padding: 12px 24px;
        text-decoration: none;
        border-radius: 30px;
        font-weight: 600;
        transition: background 0.3s ease;
        text-transform: uppercase;
        font-size: 0.9rem;
        border: none;
    }

    .tanz-btn:hover {
        background-color: #f57c00; /* Etwas dunkleres Orange beim Drüberfahren */
        text-decoration: none;
        color: #ffffff !important;
    }
	
	
	
/* ------- SALSA BAMBERG SPECIAL DESIGN v2 ------- */

/* Container Fix für den oberen Abstand */
.salsa-main-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Die farbigen Highlight-Boxen */
.salsa-highlight-box {
    padding: 30px;
    border-radius: 15px;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.salsa-highlight-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.box-orange {
    background-color: #fffaf2; 
    border-top: 5px solid #ff9900;
}

.box-dark {
    background-color: #fdfdfd;
    border-top: 5px solid #333;
}

.box-number {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.text-orange { color: #ff9900; }
.text-dark { color: #333; }

/* Standort-Box */
.location-box {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
}

/* FAQ Styling */
.faq-item {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}


/* Design für die Kundenbewertungen */
.review-quote {
    border-left: 4px solid #f39c12; /* Der orangefarbene Balken links */
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #555;
    line-height: 1.6;
}