@charset "utf-8";
* { margin: 0; padding: 0; }
body, p, h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
}
p { margin-top: 5px; }    /* normaler Text */
p.abstand { margin-top: calc(5px + 1.5em); }     /* ersetzt eine Leerzeile vor dem Absatz */
p.abstand-2 { margin-top: calc(5px + 3em); }
h6 { font-size: 13px; font-weight: bold; color: #ff0004; }
h5 { font-weight: normal; text-decoration: underline; }
h4 { font-size: 13px; margin: 5px 0; color: #590000; font-weight: bold; }   /* Event-Überschrift */
h3 { margin-bottom: 3px; color: #590000; font-weight: bold; }   /* Programm-Überschriften */
h2 { font-size: 10px; font-weight: normal; margin-bottom: 6px; }   /* Aktuell */
h1 { font-size: 9px; font-weight: normal; margin-bottom: 6px; }   /* Subline (Footer) */

a:link, a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; color: #000; }
a:focus, a:active { text-decoration: none; color: #000; }

a.proheading:link, a.proheading:visited { color: #590000; text-decoration: none; }
a.proheading:hover, a.proheading:focus, a.proheading:active { color: #905555; text-decoration: none; }

a:link img { opacity: 1; }
a:hover img { opacity: 0.7; }

/* Menü */
a.chosen, a.menupunkt, a.submenupunkt, a.subchosen, a.subsubmenupunkt, a.subsubchosen {
  font-size: 12px;
  display: block;
  padding: 0 15px;
  text-align: left;
  color: #000;
  text-decoration: none;
}
a.chosen { background-color: #999; }
a.menupunkt { background-color: #d9d9d9; }
a.menupunkt:active, a.menupunkt:hover, a.menupunkt:focus { background-color: #bfbfbf; }
a.submenupunkt, a.subchosen { background-color: #c3c7d9; }
a.submenupunkt:active, a.submenupunkt:hover, a.submenupunkt:focus { background-color: #acafbf; }
a.subsubmenupunkt, a.subsubchosen { background-color: #999fbf; }
a.subsubmenupunkt:active, a.subsubmenupunkt:hover, a.subsubmenupunkt:focus { background-color: #858aa6; }
a.subchosen, a.subsubchosen { font-weight: bold; }
.button { width: 200px; margin: 0 12px 3px 5px; }
.subbutton { width: 190px; margin: 0 12px 3px 15px; }
.subsubbutton { width: 180px; margin: 0 12px 3px 25px; }
.hide { display: none; }

/* Layout */
html { overflow-y: scroll; }
body { background: url(./img/bg_blass.gif) fixed; }
#main {
  display: table;
  margin: 20px auto;
  width: 860px;
  background-color: #fff;
  box-shadow: 0 0 10px #888;
}
#titelleer {
  clear: both;
  float: left;
  margin: 0 12px 0 5px;
  line-height: 2.2em;
}
#titelzeile {
  float: left;
  margin: 0;
  font-size: 12px;
  width: 628px;
  padding: 0 5px;
  background-color: #ec9b9b;
  text-align: left;
  font-weight: bold;
  line-height: 2.2em;
}
#menu {
  clear: both;
  width: 217px;
  float: left;
  line-height: 2.2em;
}
#inhalt, #inhaltprogramm {
  float: right;
  min-height: 430px;
  background: url(./img/wasserzeichen.png) no-repeat;
}
#inhalt { width: 608px; padding: 10px 30px 20px 5px; }
#inhaltprogramm { text-align: left; width: 638px; padding: 5px 5px 20px 0; }
#subline {
  display: table;
  clear: both;
  padding-top: 10px;
  width: 100%;
}
img { border: 0; }

/* Kopf und Navigation (include/nav.php) */
.kopf-logo { float: left; margin: 27px 12px 0 5px; }
.kopf-bild { float: left; margin-top: 5px; }
.nav-logos { padding: 10px 12px 10px 5px; text-align: center; }
.nav-logos .logo-skilehrer { padding-top: 5px; }

/* Footer (include/subline.php) */
.fuss-verein { float: left; padding: 0 10px; }
#subline p { font-size: 9px; margin: 0 0 6px; }
.trenner, .fuss-trenner { margin: 0 .6em; }
.versal { text-transform: uppercase; }
.fuss-kontakt { float: left; padding: 0 0 0 25px; }
.fuss-social { float: right; padding: 0 8px; position: relative; bottom: 3px; }
.fuss-social a { margin-left: 6px; }
.fuss-social img { vertical-align: middle; }

/* Guides */
.guides-gruppe { margin-bottom: 20px; }
.guides-gruppe img { display: block; max-width: 100%; height: auto; }
.guide { clear: both; display: flow-root; margin-bottom: 25px; }
.guidesbild { float: left; width: 210px; }
.guidesbild img { display: block; }
.guidestext { float: left; width: 398px; }
.guide-name { font-size: 13px; font-weight: bold; color: #000; margin: 0 0 6px; }
.guide-liste { margin: 0 0 10px; padding-left: 16px; list-style: disc; }
.guide-liste li { margin-left: 0; font-size: 10px; line-height: 1.6em; }
.guidestext p { margin-top: 0; margin-bottom: 8px; }
.guide-kontakt span { text-decoration: underline; }
.guides-hinweis { clear: both; padding: 15px 0 10px; text-align: center; }
.guides-hinweis p { font-size: 13px; color: #ce0003; margin: 0 0 1.5em; }

/* Partner */
.partner-name, .partner-logo { text-align: center; }
.partner-erster { margin-top: 50px; }
.partner-logo { margin-bottom: 70px; }

/* Programm & Events */
.probild { float: left; width: 253px; height: 100px; overflow: hidden; }
.proschrift {
  float: left;
  width: 375px;
  height: 90px;
  overflow: hidden;
  padding: 5px;
  background-color: #ffe8e8;
}
.propunkt, #programmpunkt { clear: both; float: left; margin-bottom: 3px; }
.pro-titel { font-size: 11px; margin: 0 0 3px; color: #590000; font-weight: bold; }
.pro-kuerzel { font-size: 8px; }
.rechts { text-align: right; }
/* Programm-Kachel: Text muss in die 100 px Bildhöhe passen, "» Details" mit Abstand zum Rand */
.proschrift p { margin-top: 2px; }
.pro-datum { font-style: italic; font-weight: bold; }   /* Termine fett und kursiv */
.pro-datum.anfrage { font-weight: normal; }
.proschrift .pro-titel { margin-bottom: 1px; }
.proschrift .rechts { padding-right: 3px; }
.interesse {
  line-height: 1.8em;
  font-size: 12px;
  font-weight: bold;
  padding-top: 20px;
}
.hometext {
  position: relative;
  top: 320px;
  float: right;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: right;
  border-radius: 10px 0 0 10px;
  padding: 5px 5px 5px 10px;
}
.welcome { letter-spacing: 0.2em; font-size: 13px; text-transform: uppercase; }
h1.welcome, h2.welcome { margin: 5px 0 0; font-weight: bold; }
#slideshow { position: absolute; width: 638px; height: 425px; overflow: hidden; }
a.blink:link, a.blink:visited { color: #ce0003; font-weight: bold; }
a.blink:hover, a.blink:active, a.blink:focus { font-weight: bold; text-decoration: underline; color: #ff5d60; }
.book { text-align: right; padding: 0 30px 20px 0; }
.eventPunkte { padding: 0 20px 0 10px; }
.eventPunktHeading { margin-top: 15px; margin-bottom: 5px; font-size: 11px; font-weight: normal; text-decoration: underline; }
.zurueck { font-size: 9px; text-align: right; margin: 0 3px 6px 0; }
.event-titel { font-size: 13px; margin: 5px 0; color: #590000; font-weight: bold; }
.event-titel .pro-kuerzel { margin-left: .4em; }
.event-kopf { padding: 0 30px 0 5px; }
.event-bild { width: 317px; margin: 0; border: 0; overflow: hidden; float: left; }
.event-bild-links { padding: 0 2px 4px 0; }
.event-bild-rechts { padding: 0 0 4px 2px; }
/* Rahmen um die zwei Bilder: am Desktop ohne eigene Box, unter 880 px die Diashow */
.event-bilder { display: contents; }
.event-bilder-unten { width: 100%; display: inline-block; }
li { margin-left: 25px; }
.eventText { padding: 20px 30px 20px 5px; }
.eventPunktText { margin-left: 10px; }
.eventPunktInfo { color: #666; font-size: 10px; }
.full { color: #f00; font-weight: bold; text-transform: uppercase; }
.newsletterH1 { margin-top: 20px; margin-bottom: 10px; font-size: 16px; font-weight: bold; }
.impH1 { margin-top: 40px; margin-bottom: 20px; font-size: 17px; font-weight: bold; color: #590000; }
.impH2 { margin-top: 10px; margin-left: 15px; font-weight: bold; }
.impT { margin-left: 60px; }
.impEinleitung { margin-left: 15px; }
.eventbox {
  width: 500px;
  border-radius: 10px;
  border: thin dashed #ce0003;
  margin: 25px auto 10px;
  padding: 5px;
  text-align: center;
}

/* Formulare */
.formbox {
  border: 1px solid #ddd;
  margin: 30px auto 0;
  width: 400px;
  background-color: #f7f7f7;
  padding: 20px;
  box-shadow: 0 15px 20px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
}
.formitem { margin-bottom: 20px; }
.formlabel { font-size: 13px; margin-bottom: 10px; display: block; font-style: italic; }
.forminput {
  background-color: #f7f7f7;
  margin-left: 10px;
  font-size: 16px;
  box-shadow: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 368px;
  padding: 5px;
  transition: all .3s;
}
.forminput:hover { border-color: #000; background-color: #fff; }
.forminput:focus { border-color: #000; outline: none; }
.forminput:focus::placeholder { color: #d6d6d6; }
.forminput:invalid:focus { border-color: red; }
.forminput:valid:focus { border-color: green; }
.submit {
  margin-left: 10px;
  margin-top: 20px;
  background-color: #e5e5e5;
  box-shadow: none;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  font-size: 15px;
  padding: 10px 30px;
  text-transform: uppercase;
  transition: all .3s;
}
.submit:hover { background-color: #aba8a8; border-color: #ababab; color: #fff; }
.submit:focus { border-color: #555; outline: none; }
input[type="radio"] { height: 15px; width: 15px; margin: 5px 0 0 10px; }
input[type="radio"]:focus { outline-width: 2px; outline-color: rgba(0, 0, 0, 0.2); }
.radiowrap { display: inline; }
.terminwrap { display: block; }
.radiowrap:hover, .terminwrap:hover { opacity: 0.5; }
.radio label { vertical-align: top; line-height: 24px; font-size: 13px; margin: 0 5px; }
.error { color: red; }
.formerror { color: red; text-align: left; font-size: 14px; margin: 20px 0 10px 10px; }
p.sendsuccess { line-height: 18px; margin: 10px; font-size: 12px; }

/* ===== Responsiv: Tablet und Handy (Desktop-Regeln oben bleiben unverändert) ===== */
.menu-toggle, .abzeichen-mobil, .event-bilder-punkte, .event-bild-mobil { display: none; }

@media (max-width: 879px) {
  body { background: #fff; }
  #main { display: block; width: auto; margin: 0; box-shadow: none; }

  /* Kopf: nur Logo und Menü-Button */
  .kopf-logo { margin: 10px 0 10px 10px; }
  .kopf-bild, #titelleer { display: none; }
  /* Titelzeile: randlos, zentriert, dezent; auf der Startseite ausgeblendet */
  #titelzeile {
    float: none;
    clear: both;
    width: auto;
    padding: 7px 10px;
    background-color: #905555;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5em;
    text-align: center;
    letter-spacing: 0.03em;
  }
  .seite-home #titelzeile { display: none; }
  .js .menu-toggle {
    display: block;
    float: right;
    width: 44px;
    height: 44px;
    margin: 37px 10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px auto;
    border-radius: 2px;
    background-color: #333;
    transition: transform .2s, opacity .2s;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu-toggle:focus-visible { outline: 2px solid #999; outline-offset: 2px; }

  /* Menü */
  #menu { float: none; width: auto; padding: 0 20px 5px; }
  .js #menu { display: none; }
  .js #menu.offen { display: block; }
  .button, .subbutton, .subsubbutton { width: auto; margin-right: 0; }
  .button { margin-left: 0; }
  .subbutton, .nav-ebene2 { margin-left: 15px; }
  .subsubbutton, .nav-ebene3 { margin-left: 30px; }
  /* Programm-Untermenü: erster Tipp auf "Programm" zeigt alle Unterpunkte (js/menu.js) */
  /* Eingeklappt auch auf Programm-Seiten (dort zeigt navcalc.php die Unterpunkte sonst immer an) */
  .js #menu:not(.programm-offen) .nav-ebene2, .js #menu:not(.programm-offen) .nav-ebene3 { display: none; }
  #menu.programm-offen .hide { display: block; }
  .nav-ebene2, .nav-ebene3 { margin-bottom: 3px; }
  .js #menu:not(.programm-offen) .nav-programm a::after { content: "\25BE"; float: right; font-size: 22px; color: #444; }
  a.chosen, a.menupunkt, a.submenupunkt, a.subchosen, a.subsubmenupunkt, a.subsubchosen { font-size: 16px; line-height: 48px; }
  .nav-logos { display: none; }

  /* Inhalt */
  #content { clear: both; }
  #inhalt, #inhaltprogramm { float: none; width: auto; min-height: 0; padding: 10px 20px; }

  /* Lesbare Schrift (Google-Empfehlung: Basis 16 px, nichts unter 12 px) */
  body, p, li { font-size: 16px; line-height: 1.6; }
  li { margin-bottom: 4px; }
  p.abstand { margin-top: calc(5px + 1.6em); }
  p.abstand-2 { margin-top: calc(5px + 3.2em); }
  h2, h5 { font-size: 14px; }
  h3 { font-size: 16px; line-height: 1.4; }
  h4, h6 { font-size: 18px; line-height: 1.4; }
  .pro-kuerzel { font-size: 12px; }
  .pro-titel { font-size: 16px; line-height: 1.4; }
  .event-titel { font-size: 18px; line-height: 1.4; }
  .eventPunktHeading { font-size: 16px; }
  .zurueck { font-size: 14px; }
  .proschrift { height: auto; }
  .eventPunktInfo { font-size: 13px; }
  .impH1, .newsletterH1 { font-size: 20px; line-height: 1.3; }
  .radio label { font-size: 16px; }
  .formerror { font-size: 15px; }
  p.sendsuccess { font-size: 16px; line-height: 1.5; }

  /* Abzeichen über dem Footer */
  .abzeichen-mobil { display: block; clear: both; padding: 20px 10px 5px; text-align: center; }
  .abzeichen-mobil .logo-skilehrer { padding-top: 5px; }

  /* Footer */
  #subline { display: block; padding: 15px 0; text-align: center; }
  .fuss-verein, .fuss-kontakt, .fuss-social { float: none; padding: 0 10px; }
  #subline p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
  /* Trennstriche ausblenden, jeder Teil steht in eigener Zeile (keine hängenden "|") */
  .fuss-trenner { display: block; height: 0; overflow: hidden; margin: 0; }
  .fuss-social { bottom: 0; margin-top: 8px; }
  .fuss-social a { margin: 0 6px; }
  .fuss-social img { width: 28px; height: 28px; }

  /* Lange Adressen und Links umbrechen statt die Seite zu verbreitern */
  #inhalt, #inhaltprogramm { overflow-wrap: anywhere; }

  /* Partner: Logos skalieren und zentrieren, deutlicher Abstand zwischen den Partnern */
  .partner-logo img { max-width: 100%; height: auto; }
  .partner-erster { margin-top: 45px; }
  .partner-name { margin-bottom: 8px; }
  .partner-logo { margin-bottom: 80px; }

  /* Guides: Gruppenbild randlos direkt unter der Titelzeile; Bild und Name zentriert, Texte linksbündig */
  .guides-gruppe { margin: -10px -20px 25px; }
  .guides-gruppe img { width: 100%; max-width: none; }
  .guide { margin-bottom: 45px; }
  .guidesbild, .guidestext { float: none; width: auto; }
  .guidesbild img { margin: 0 auto; }
  .guide-name { margin: 12px 0 12px; font-size: 19px; text-align: center; }
  .guide-liste { margin: 0 0 18px; }
  .guide-liste li { font-size: 15px; line-height: 1.5; margin-bottom: 6px; }
  .guides-hinweis p { font-size: 16px; line-height: 1.6; }
  .guidestext p { margin-bottom: 12px; }
  .guide-kontakt { margin-top: 18px; }
  .guides-hinweis { padding-top: 30px; text-align: left; }

  /* Newsletter: Formular passt sich der Breite an */
  .formbox { width: auto; max-width: 400px; margin: 25px auto 0; padding: 20px 15px; box-sizing: border-box; }
  .forminput { width: 100%; margin-left: 0; box-sizing: border-box; }
  .submit, .formerror { margin-left: 0; }
  input[type="radio"] { margin-left: 0; }

  /* Programm-Seiten: Veranstaltungen als Karten, Bild und Text gleich breit */
  .propunkt {
    float: none;
    clear: none;
    max-width: 520px;
    margin: 0 auto 25px;
    background-color: #ffe8e8;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .probild { float: none; width: auto; height: auto; }
  .probild img { display: block; width: 100%; height: auto; aspect-ratio: 250 / 100; object-fit: cover; }
  .proschrift { float: none; width: auto; height: auto; padding: 12px 15px 10px; background: none; }
  .proschrift p { margin-top: 5px; }
  .proschrift .pro-titel { margin-bottom: 3px; }
  .proschrift .rechts { margin-top: 8px; }

  /* Event-Seite: große Bilder als Diashow zum Wischen (Punkte darunter: js/event-bilder.js) */
  #programmpunkt { float: none; margin-bottom: 0; }
  .event-kopf { padding: 0; }
  .event-bilder {
    display: flex;
    width: auto;
    margin-top: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .event-bilder::-webkit-scrollbar { display: none; }
  .event-bild { float: none; flex: 0 0 100%; width: auto; padding: 0; scroll-snap-align: start; }
  /* Bilder 3 und 4 laufen oben in der Diashow mit, das Bildpaar unten entfällt */
  .event-bild-mobil { display: block; }
  .event-bilder-unten { display: none; }
  .event-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  .js .event-bilder-punkte { display: flex; justify-content: center; margin-top: 4px; }
  .event-bilder-punkte button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .event-bilder-punkte button::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #ccc;
    transition: background-color .2s;
  }
  .event-bilder-punkte button[aria-current="true"]::before { background-color: #ce0003; }
  .event-bilder-punkte button:focus-visible { outline: 2px solid #999; outline-offset: -4px; }

  /* Event-Seite: Text über die ganze Breite, mehr Luft zwischen den Punkten und um den Hinweis-Rahmen */
  .eventText { padding: 20px 0; }
  .eventPunkte { padding: 0; }
  .eventPunktHeading { margin-top: 30px; margin-bottom: 6px; }
  .book { padding: 0 0 20px; }
  .eventbox {
    box-sizing: border-box;
    width: calc(100% - 20px);
    max-width: 500px;
    margin: 45px auto;
    padding: 12px 18px;
  }

  /* Kontakt/Impressum: kleiner Einzug */
  .impH1 { margin-top: 30px; margin-bottom: 12px; }
  .impH2 { margin-left: 0; margin-top: 14px; }
  .impT { margin-left: 12px; }
  .impEinleitung { margin-left: 0; }

  /* Startseite: Slideshow skalieren (slideShow.js setzt feste Pixelmaße inline) */
  #slideshow { position: relative; width: 100%; height: auto; }
  #slideShowImages { width: 100% !important; height: auto !important; aspect-ratio: 638 / 425; }
  #slideShowImages img { width: 100%; height: auto; top: 0 !important; left: 0 !important; }
  .hometext {
    position: static;
    float: none;
    top: auto;
    border-radius: 0;
    background: none;
    text-align: left;
    padding: 15px 0 5px;
  }
  .welcome { font-size: 18px; line-height: 1.4; }
}

@media (max-width: 599px) {
  .kopf-logo { margin: 8px 0 8px 10px; }
  .kopf-logo img { width: 150px; height: auto; }
  .js .menu-toggle { margin-top: 23px; }
  #menu { padding: 0 10px 5px; }
  #inhalt, #inhaltprogramm { padding: 10px; background-image: none; }
  /* Slideshow und Guides-Gruppenbild randlos bis an die Bildschirmkanten */
  #slideshow { width: auto; margin: 0 -10px; }
  .guides-gruppe { margin: -10px -10px 25px; }
  .event-bilder { margin-left: -10px; margin-right: -10px; }
  .impT { margin-left: 8px; }
}

/* Tablet: Veranstaltungen im Raster, zwei Spalten */
@media (min-width: 600px) and (max-width: 879px) {
  #inhaltprogramm:has(> .propunkt) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  #inhaltprogramm:has(> .propunkt) .propunkt { max-width: none; margin: 0; display: flex; flex-direction: column; }
  #inhaltprogramm:has(> .propunkt) .proschrift { flex: 1; display: flex; flex-direction: column; }
  #inhaltprogramm:has(> .propunkt) .proschrift .rechts { margin-top: auto; padding-top: 8px; }
}

/* Ohne JavaScript läuft keine Slideshow: dann nur das erste Bild zeigen */
html:not(.js) #slideShowImages img + img { display: none; }