/* ************************************ */
/* style.css - Einfaches Parallax-Theme */
/* ************************************ */

/* Grundlegende Stile */
* { box-sizing: border-box; }
body, html { 
  margin:0;
  padding:0; 
  font-family: Arial, Helvetica, sans-serif; 
  scroll-behavior: smooth;
  overflow-x: hidden; /* verhindert rechten weißen Rand durch horizontales Overflow */
}

/* Navigationsleiste Stil */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;    /* <--- zentriert horizontal */
  align-items: center;        /* <--- zentriert vertikal */
  gap: 40px;                  /* <--- Abstand zwischen Links */
  z-index: 1000;
}

/* Menü Links Stil */
.topnav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: color 0.2s;
}

/* Menu Hover Effekt */
.topnav a:hover {
  color: #f0c040; 
}

/* Dropdown Menü für Mobilgeräte */
.menu-toggle {
  display: none;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 700;
}

.menu-items { display: flex; gap: 40px; }

@media (max-width: 700px) {
  .topnav { gap: 0; height: auto; padding: 8px 12px; justify-content: space-between; }
  .menu-toggle { display: inline-block; font-size: 1.05em; line-height: 1.2; }
  .menu-items { display: none; width: 100%; flex-direction: column; gap: 10px; margin-top: 8px; }
  .menu-items a { display: block; padding: 8px 12px; }
  .topnav.open .menu-items { display: flex; }
  .topnav.open { align-items: stretch; }
  .topnav a { font-size: 1.05em; padding: 8px 0; }
}

/* Parallax Abschnitte Stil */
.parallax { 
   position: relative; 
   min-height:100vh;
   background-attachment: fixed; 
   background-position:center; 
   background-repeat:no-repeat; 
   background-size:cover; 
   display:flex; 
   align-items:center; 
   justify-content:center; 
}

/* Text innerhalb der Parallax Abschnitte */
.parallax .texthome     { background: rgba( 231, 86, 112, 0.85 );  padding:30px 40px; border-radius:8px; color:#fff; text-align:center; max-width:900px; }
.parallax .textuebermich{ background: rgba( 231, 86, 112, 0.85 );  padding:30px 40px; border-radius:8px; color:#fff; text-align:center; max-width:990px; }
.parallax .textkalender { background: rgba( 162, 61, 61,  0.85 );  padding:30px 40px; border-radius:8px; color:#fff; text-align:center; max-width:990px; }
.parallax .texttermine  { background: rgba( 231, 86, 112, 0.85 );  padding:30px 40px; border-radius:8px; color:#fff; text-align:center; max-width:990px; }
.parallax .textvideos   { background: rgba( 231, 71, 112, 0.85 );  padding:30px 40px; border-radius:8px; color:#fff; text-align:center; max-width:1100px; }
.parallax .textkontakt  { background: rgba( 231, 71, 112, 0.85 );  padding:30px 40px; border-radius:8px; color:#fff; text-align:center; max-width:790px; }
.parallax .text h1 { margin:0 0 10px 0; font-size: clamp(28px, 4vw, 56px); }
.parallax .text .lead { margin:0; font-size:18px; opacity:0.95; }
.content { padding:80px 20px; background:#f7f7f7; color:#222; text-align:center; }
.content h2 { margin-top:0; }
.button { display:inline-block; padding:12px 20px; background:#ffffff; color:#111; text-decoration:none; border-radius:6px; font-weight:700; margin-top:10px; }



/* Tanzpädagogik Block Stil */
.tanzpaedagogik-block {
    max-width: 800px;
    margin: 60px auto;   /* mittig auf der Seite */
    text-align: left;    /* Text linksbündig */
    padding: 10px;
    background: rgba( 231, 86, 112, 0.25 ); /* halbtransparent, gut sichtbar auf weiß/grau */
    box-shadow: 0 2px 12px rgba( 0,0,0,0.08 ); /* optional */
    border-radius: 8px;  /* optional */
}

/* Überschrift im Tanzpädagogik Block Stil */
.tanzpaedagogik-block h2 {
    text-align: center;  /* Überschrift zentriert */
}




/* Footer Stil */
.footer { 
   padding:20px;
   background:#111;
   color:#fff;
   text-align:center;
}

/* Footer Links Stil */
.footer a {
  color: #fff;
  text-decoration: underline;
  margin: 0 5px;
  transition: color 0.2s ease;
}

/* Footer Link Hover Effekt */
.footer a:hover {
  color: #f0c040;
}

@media( max-width: 700px ) {
  .footer {
    font-size: 1.1em;
    padding: 28px 8px;
  }
  .footer a {
    font-size: 1.1em;
    margin: 0 8px;
  }
}

/* Mobile-Optimierung für Termine-Block: weniger Rand rechts/links */
@media (max-width: 700px) {
  .parallax .texttermine {
    padding: 18px 12px;   /* zuvor 30px 40px */
    max-width: 100%;      /* volle Breite auf kleinen Screens nutzen */
    text-align: left;     /* Inhalte (Tabelle) besser lesbar linksbündig */
  }
}