html {
  overflow-y: scroll;
}
/* Body auf volle Höhe */
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  background-color: #82A5B8;
  color: #F6F6F6;
  width: 100%;
}

main {
  flex: 1;
  padding: 1rem;
  /*max-width: 1000px;*/
  margin: 0 auto;
  background-color: #82A5B8;
  color: #333;
  padding-top: 11rem;
}

/* Header und Footer */
header, footer {
  background: #82A5B8;
  color: #F6F6F6;
}

header {
  display: flex;
  align-items: center;
  height: 10rem;
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

#logo {
  width: auto;
  height: 10rem;
  /*position: absolute;
  left: 0.5rem;
  top: 0rem;*/
  margin-left: 0.5rem;
}

nav {
  margin-left: auto;
  margin-right: auto;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
}

nav a {
  color: #F6F6F6;
  margin-right: 1rem;
  text-decoration: none;
  font-size: large;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

nav a:hover {
  text-decoration: underline;
}

footer {
  text-align: center;
}

footer a {
    /* 1. Unterstreichung entfernen */
    text-decoration: none;

    /* 2. Textfarbe auf die gewünschte Farbe (Weiß) setzen */
    color: #F6F6F6;

    /* 3. Sicherstellen, dass der Link nicht auf Hover blau wird */
    transition: none;
}

/* Optional: Beim Überfahren keine Unterstreichung/keine Änderung */
footer a:hover {
    text-decoration: none;
    color: #F6F6F6;
    cursor: pointer; /* Beibehaltung des Klick-Cursors */
}

#text {
  text-align: justify;
  text-justify: auto;
  hyphens: auto;
}

@media screen and (max-width: 1235px) {
  nav {
    margin-left: auto;
    margin-right: 0;
    text-align: center;
  }
}

@media (min-width: 768px) {
  nav a {
    margin-right: 2rem;
  }
}

.success {
  padding: 1em;
  margin: 1em 0;
  border: 1px solid #4CAF50;
  background-color: #E8F5E9;
  color: #2E7D32;
  border-radius: 8px;
  font-weight: 500;
}

.error {
  padding: 1em;
  margin: 1em 0;
  border: 1px solid #F44336;
  background-color: #FFEBEE;
  color: #C62828;
  border-radius: 8px;
  font-weight: 500;
}

.tile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.tile {
  max-width: calc((800px - 2 * 1.5rem) / 3);
  min-width: 240px;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
}

.lecture {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(130, 165, 184, 0.15);
  display: block;
  margin: 0 auto;
  padding: 0;
}

.lecture:hover {
  box-shadow: 0 4px 16px rgba(130, 165, 184, 0.25);
}

@media screen and (max-width: 767px) {
  .tile {
    flex: 3;
    max-width: 100%;
    margin: 0 auto;
  }
}

label.hamburg {
   display: none;
   background: #F6F6F6; width: 75px; height: 50px;
   position: relative;
   margin-left: auto; margin-right: auto;
   border-radius: 4px;
}

.line {
   position: absolute;
   left:10px;
   height: 4px; width: 55px;
   background: #82A5B8; border-radius: 2px;
   display: block;
   transition: 0.5s;
   transform-origin: center;
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

#hamburg {
   display: none;
}

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

    header {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 10rem;
    }

    nav.topbar {
        height: auto;
        max-height:0;
        overflow: hidden;
        transition: all 0.5s;
        position: absolute;
        top: 9rem;
        left: 0;
        width: 100%;
        background-color: #82A5B8;
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0;
    }

    nav.topbar a {
        /*float: center;*/
        text-align: center;
        display: block;
        margin: 0.5rem 0rem;
        width: 100%;
        background-color: #82A5B8;
        color: #f6f6f6;
        padding: 12pt 0;
        border: 3pt solid #f6f6f6;
        border-radius: 4px;
    }

    #hamburg:checked + .hamburg  + nav.topbar {
      max-height: 800px;
    }

    label.hamburg {
        display: block;
        position: absolute;
        right: 1rem;
    }
}
/* ================================================= */
/* NUR FÜR DIE PREISLISTENSEITE (KLASSE .preisliste-seite) */
/* ================================================= */

.tabelle-preise {
  margin-left: auto;
  margin-right: auto;
  max-width: 75%;
  text-align: center;
  margin-bottom: 30px;
}

/* Innenabstand (Padding) für die Zellen: Macht Platz zwischen Text und Zellenrand */
.preisliste-seite table th,
.preisliste-seite table td {
    padding: 4px 20px;
    text-align: left;
}

.preisliste-seite table td:first-child,
.preisliste-seite table th:first-child {
    width: 100px;
}

/* Definiert die Breite der Zelle "Preisgruppe" (2. Spalte) */
.preisliste-seite table td:nth-child(2),
.preisliste-seite table th:nth-child(2) {
    width: 200px;
    text-align: left;
}

/* Definiert die Breite der Zelle "Preis mtl." (3. Spalte) */
.preisliste-seite table td:nth-child(3),
.preisliste-seite table th:nth-child(3) {
    width: 200px;
    text-align: left;
}

/* Außenabstand (Margin) für die gesamte Tabelle */
.preisliste-seite table {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left:12%;
    width: 100%;
    border-collapse: collapse;
}

/* Außenabstand für die Überschriften (H2) zwischen den Sektionen */
.preisliste-seite h2 {
    margin-top: 40px;
    margin-bottom: 10px;
    margin-left: 12%;
    text-align: left;
}

/* Außenabstand für die Überschriften (H2) zwischen den Sektionen */
.preisliste-seite h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 12%;
    text-align: left;
}

#contactForm {
    max-width: 100%;/* Breite des Formulars festlegen */
    margin: 0; /* Vertikaler Abstand (40px) und horizontale Zentrierung (auto) */
    padding: 20px;
    border-radius: 8px;
}

#contactForm label {
    display: block; /* Lässt jedes Label eine neue Zeile beginnen */
    margin-top: 15px; /* Abstand über dem Label */
    margin-bottom: 5px; /* Abstand unter dem Label */
    font-weight: bold;
    color: #333;
}

/* Eingabefelder (Textfelder und Textareas) */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm textarea {
    width: 100%; /* Felder nehmen volle Formularbreite ein */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* WICHTIG: Padding wird zur inneren Breite gezählt */
    font-size: 16px;
}

/* Textarea für die Nachricht (größer machen) */
#contactForm textarea {
    resize: vertical; /* Nur vertikale Größenänderung zulassen */
    min-height: 150px; /* Mindesthöhe für das Nachrichtenfeld */
}

/* Fokus-Effekt (wenn ein Feld angeklickt wird) */
#contactForm input:focus,
#contactForm textarea:focus {
    border-color: #82A5B8; /* Deine Header-Farbe als Fokus-Rahmen */
    box-shadow: 0 0 5px rgba(130, 165, 184, 0.5);
    outline: none; /* Entfernt den Standard-Browser-Fokus */
}

#contactForm button[type="submit"] {
    background-color: #f6f6f6; /* Deine Header-Farbe */
    color: #333;
    padding: 12px 20px;
    margin-top: 25px; /* Abstand zum letzten Feld */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    width: 100%; /* Button nimmt volle Formularbreite ein */
    transition: background-color 0.3s ease;
}

/* Button Hover-Effekt */
#contactForm button[type="submit"]:hover {
    background-color: #698797a5; /* Dunklere Farbe beim Überfahren */
}

#formResult {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

/* Media Query für Bildschirme ab 801 Pixel Breite (Desktop) */
@media screen and (min-width: 801px) {

    /* Zuerst MAIN flexibler machen */
    main {
        max-width: 90vw; /* Maximal 90% der gesamten Bildschirmbreite */
        width: 100%;    /* Füllt verfügbaren Platz aus */
    }

    /* Dann das Formular auf 100% seiner neuen Breite setzen */
    #contactForm {
        max-width: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
  .logo-container {
    width: 100%;
  }
}

@media screen and (max-width: 750px){
  .preisliste-seite table {
margin-left: 0;
}

/* Außenabstand für die Überschriften (H2) zwischen den Sektionen */
.preisliste-seite h2 {
margin-left: 0;
}

/* Außenabstand für die Überschriften (H2) zwischen den Sektionen */
.preisliste-seite h1 {
    margin-left: 0;
}

.tabelle-preise {
  max-width: 100%;
}
}

.contact-grid {
    display: grid; /* Aktiviert Flexbox für die Spaltenanordnung */
    grid-template-columns: 300px 1fr;
    gap: 2rem;     /* Abstand zwischen linker und rechter Spalte */
    /*flex-wrap: nowrap;*/ /* WICHTIG: Erlaubt das Umbrechen auf kleinen Bildschirmen */
    max-width: 1000px;
    margin: 0 auto;
    margin-top: -2rem;
}

.contact-info {
    /* Nimmt ca. 1/3 der Breite ein */
    flex: 0 0 300px;
    min-width: 250px;
    max-width: 300px;
    align-self: start;
    padding: 10px 20px;
    margin-top: 19px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-form {
    /* Nimmt ca. 2/3 der Breite ein */
    flex: 1;
    align-self: start;
    padding: 0px 20px;
    background-color: #82A5B8;
    border-radius: 8px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

/* Anpassung des Formulars, da es jetzt im .contact-form Container ist */
#contactForm {
    /* Hintergrund, Border, Shadow wird jetzt vom .contact-info Container gehandhabt */
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
}

@media screen and (max-width: 700px) {
    .contact-info,
    .contact-form {
        flex: 0 0 100%; /* Beide Spalten nehmen volle Breite ein */
        max-width: 100%;
    }
}

/* ================================================= */
/* MEDIA QUERY: KONTAKT-LAYOUT AUF MOBILE ERZWINGEN */
/* ================================================= */

@media screen and (max-width: 767px) {
    /* ERMÖGLICHT DAS UMBRECHEN DER SPALTEN AUF MOBILEN GERÄTEN */
    .contact-grid {
        grid-template-columns: 1fr;
        /*flex-wrap: wrap;*/
        padding: 0;
        box-shadow: none;
    }

    /* Beide Spalten nehmen volle Breite ein */
    .contact-info,
    .contact-form {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem; /* Abstand zwischen den Blöcken auf Mobile */
    }

    /* Optional: Fügt das Styling des Kastens nur für die Info-Spalte auf Mobile hinzu */
    .contact-info {
        padding: 20px;
        background-color: #f6f6f6;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    /* Entfernt den Abstand oben vom Formular, da es jetzt unter den Infos steht */
    .contact-form {
        margin-top: 0;
    }
}

.text-philosophy {
    /* Zentriert den Text, der IN diesem Container liegt */
    text-align: center;
    /* Optional: Eine maximale Breite setzen, damit der Text nicht über die gesamte Seite geht */
    max-width: 800px;
    margin: 0 auto; /* Zentriert den Container selbst (falls er eine feste max-width hat) */
}

.header-philosophy {
  text-align: center;
}

.text-instruments {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.header-instruments {
  text-align: center;
}

.header-gesang {
  text-align: center;
}

.text-gesang {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.header-dudelsack {
  text-align: center;
}

.text-dudelsack {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.header-lehrer {
  text-align: center;
}

.text-lehrer {
  text-align: center;
}

.header-kevin {
  text-align: center;
}

.text-kevin {
  text-align: center;
  /*max-width: 800px;
  margin: 0 auto;*/
}

.Kevin-Bild-Bio { /* Das ist dein img-Tag */
    max-width: 100%; /* Das Bild soll nicht breiter sein als sein Eltern-Container */
    height: auto;    /* Verhindert Verzerrung, Höhe wird automatisch angepasst */
    display: block;  /* Entfernt eventuelle Leerräume unter dem Bild */
    border-radius: 10px;
}

/* NEU: Flexbox-Regeln für das Layout */
.bio-container-kevin {
    display: flex; /* Ordnet die Kinder (Bild und Text) nebeneinander an */
    gap: 30px; /* Abstand zwischen Bild und Text */
    align-items: flex-start; /* Stellt sicher, dass alles obenbündig ausgerichtet ist */
    max-width: 1200px; /* Maximale Breite des gesamten Blocks */
    margin: 0 auto; /* Zentriert den gesamten Block auf der Seite */
    padding: 20px;
}

/* NEU: Bildbreite festlegen */
.tile-Kevin-bio {
    flex-basis: 35%; /* Die Breite des Bildes (passe 300px an!) */
    flex-shrink: 0;
}

.bio-text-area {
    /* Nimmt den gesamten verbleibenden Platz ein */
    flex: 1;

    /* Stellt sicher, dass der Text oben beginnt (falls nötig) */
    align-self: flex-start;
}

/* NEU: Text soll den restlichen Platz einnehmen */
main {
    flex-grow: 1;
}

/* NEU: Anpassung für Handys/kleine Bildschirme */
@media (max-width: 768px) {
    .bio-container-kevin {
        flex-direction: column; /* Stapelt Bild und Text untereinander */
        align-items: center; /* Zentriert die Elemente in der Mitte */
    }
}

.header-sabrina {
  text-align: center;
}

.text-sabrina {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.Sabrina-Bild-Bio {
  display: block;
  margin: 0 auto;
  width: 60%;
  max-width: 600px;
  height: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

.header-jobs {
  text-align: center;
}

.text-jobs {
  text-align: center;
}

.hide-header-logo #logo {
    display: none !important;
}

#logo-placeholder {
    width: 15.54125rem; /* Basiert auf der geschätzten Logo-Breite */
    height: 10rem;
    margin-right: 0.5rem;
    visibility: hidden; /* Unsichtbar, aber Platz einnehmend */
    flex-shrink: 0; /* Verhindert, dass der Platzhalter schrumpft */
}

.hide-header-logo #logo-placeholder {
    display: none;
}

.logo-container {
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.main-logo {
    width: 90%;
    margin-top: -1rem;
    margin-left: auto;
    margin-right: auto;
}

.text-home {
  text-align: center;
  color: #f6f6f6;
}

/* ================================================= */
/* NEU: LÖSUNG GEGEN FLACKERN (FADE-IN) */
/* ================================================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    /* Stellt sicher, dass die Seite unsichtbar startet */
    opacity: 0;

    /* Die Animation zum Einblenden (0.3 Sekunden) */
    animation: fadeIn 0.05s ease-in-out forwards;
}

.download-button {
    /* Basisfarben */
    background-color: #f6f6f6; /* Heller Hintergrund */
    color: #333; /* Dunkle Schrift */

    /* Größe und Form */
    padding: 10px 20px;
    margin-top: 15px;
    display: inline-block; /* Wichtig, damit Padding funktioniert */
    text-decoration: none; /* Unterstreichung entfernen */
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;

    /* Übergang für Hover-Effekt */
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #698797a5; /* Dunklere Farbe beim Überfahren */
}