/**
 * screen_2026ux.css – wakeupevents.at
 * Vollständiges Replacement für screen.css
 *
 * Seiten: / | /wakeup-race-performance | /incentives | /blog |
 *         /blog?* | /kontakt | /newsletter | Angebotsdetails
 */


/* ═══════════════════════════════════════════════════════════════════
   1. RESET & BASIS
   ═══════════════════════════════════════════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Verhindert horizontalen Scroll auf allen Geräten */
html {
  overflow-x: hidden;
}

/* Bilder niemals breiter als ihr Container */
img {
  max-width: 100%;
  height: auto;
  border: none;
}
a img {
  border: none;
}


/* ═══════════════════════════════════════════════════════════════════
   2. TYPOGRAFIE
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Michroma';
  src: url('Michroma.ttf');
  font-display: swap;
}

body {
  font-family: "Verdana", "Arial", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  background-image: url('../hp_pics/body_bg.jpg');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #eeecea;
}
@media all and (min-width: 1920px) {
  body {
    background-size: cover;
  }
}

a {
  text-decoration: none;
  color: #fff;
}
a:hover {
  font-weight: bold;
}
a.donthoverbold:hover {
  font-weight: normal;
}

p {
  padding-top: 5px;
  padding-bottom: 3px;
}

h1, h2, h3, h4, h5 {
  color: #E15616;
  padding-top: 5px;
  padding-bottom: 3px;
}
h1, h2, h3 {
  font-family: 'Michroma', "Verdana", sans-serif;
}
h1, h2, h3, h4 {
  text-align: center;
}

/* Alte <font>-Tags in Blog-Einträgen nicht sichtbar falsch rendern */
font {
  font-family: inherit;
  font-size: inherit;
}


/* ═══════════════════════════════════════════════════════════════════
   3. LAYOUT-GERÜST
   ═══════════════════════════════════════════════════════════════════ */

#wrap {
  width: 950px;
  margin: 0 auto;
}

#spacerOben {
  height: 50px;
}

#main {
  overflow: auto;
  border: 3px solid #E15616;
  background-color: #000;
  box-shadow: 15px 15px 15px #555;
  color: #fff;
}
@media screen and (max-width: 979px) {
  #main {
    box-shadow: none;
    border: none;
  }
}

#heading {
  height: 100px;
  border-top: 2px solid #E15616;
  border-bottom: 2px solid #E15616;
  background-image: url('../hp_pics/lochgitter.jpg'), url('../hp_pics/lochgitter-mirror.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  text-align: left;
  font-family: 'Michroma', "Verdana", sans-serif;
  font-weight: bold;
  font-size: 27px;
  text-shadow: #000 1px 1px 0;
  padding: 0 25px;
}
#heading .spacer {
  /* Höhen-Platzhalter für vertical-align – nur Desktop */
  width: 1px;
  height: 99px;
  display: inline-block;
  vertical-align: middle;
}
#heading span {
  vertical-align: middle;
}

#content {
  padding: 15px 35px;
}


/* ═══════════════════════════════════════════════════════════════════
   4. NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

#mainMenu {
  list-style: none;
  padding: 15px;
  text-align: right;
  font-size: 13px;
}
#mainMenu li {
  display: inline;
  margin-left: 25px;
}
#mainMenu li a:hover {
  font-weight: normal;
  text-decoration: underline;
}
#mainMenu li.active a {
  font-weight: bold;
}
#mainMenu li.active a:hover {
  text-decoration: none;
}

#footerMenu {
  list-style: none;
  margin-left: 50px;
  text-align: right;
  font-size: 11px;
  display: inline;
}
#footerMenu li {
  display: inline;
  margin-left: 15px;
}
#footerMenu li a {
  color: #fff;
}
#footerMenu li a:hover,
#footerMenu li.active a {
  font-weight: normal;
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════
   5. ANGEBOTS-LISTE (Startseite)
   ═══════════════════════════════════════════════════════════════════ */

.angebotliste {
  list-style: none;
}
.angebotliste li {
  float: left;
  width: 204px;
  margin: 17px 7px;
  position: relative;
  padding-bottom: 50px;
}
.angebotliste li div.homeImgContainer {
  width: 200px;
  height: 100px;
  border: 2px solid #E15616;
  overflow: hidden;
  text-align: center;
}
/* Karten-Bilder: object-fit damit kein schwarzer Balken entsteht.
   jQuery setzt margin-top inline – !important neutralisiert das */
.angebotliste li div.homeImgContainer img {
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin-top: 0 !important;
}

.angeboteSlideshow {
  width: 100%;
  height: min(56.25vw, 490px);
}
/* bilder füllen immer slider-hohe und sind zentriert positioniert */
.angeboteSlide {
  position: relative;
  width: 100%;
  height:100%;
}
.angeboteSlide img {
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.slideTitle {
  font-size: 14px;
  position: absolute;
  bottom: 5px;
  left: 10px;
}
.slideTitle .actionButton {
  width:auto;
  min-width:200px;
}
.angeboteSlideshow .swiper-pagination-bullet {
  background: #fff;
  opacity: 1;                /* swiper sets opacity < 1 on inactive by default */
}
.angeboteSlideshow .swiper-pagination-bullet-active {
  background: #E15616;
}
.angeboteSlideshow.swiper {
  padding-bottom: 38px;  /* makes room for bullets outside the slide area */
}
.angeboteSlideshow .swiper-pagination {
  bottom: 0;
}
.scrollToOffers a{
  /* make less prominent than actionButton, but still visible on mobile */
  display: inline-block;
  float: right;
  margin: 10px 0;
  padding: 6px 12px;
  background-color: #fff;
  color: #E15616;
}
@media screen and (max-width: 979px) {
  .actionButton{
    font-size: 10px;
  }
}

/* Kulinarik-Variante */
.angebotliste.kulinarik li .actionButton {
  background-color: #94ce46;
  color: #333;
}
.angebotliste.kulinarik li .actionButton:hover {
  color: #39531d;
}
.angebotliste.kulinarik li h4 {
  color: #94ce46;
}
.angebotliste.kulinarik li div.homeImgContainer {
  border: 2px solid #94ce46;
}

.kulinarik-header {
  margin-top: 50px;
  max-width: 100%;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════
   6. ANGEBOTS-DETAIL
   ═══════════════════════════════════════════════════════════════════ */

#angeboteright {
  width: 360px;
  float: right;
}
#angeboteleft {
  width: 470px;
  float: left;
  text-align: justify;
}
#angeboteleft img {
  border: 1px solid #E15616;
}

#angeboteright .detailImgContainer {
  display: inline-block;
  height: 90px;
  width: 150px;
  border: 2px solid #fff;
  margin: 3px;
  overflow: hidden;
  text-align: center;
}
.galleryThumb {
  height: 90px;
  width: auto;
  max-width: none; /* Galerie-Thumbnails haben feste Höhe */
}
.fotovideogalleryThumb {
  height: 90px;
  border: 2px solid #fff;
  margin: 3px;
}
.glightbox-clean .gslide-description {
  display: none;
}

#paketliste {
  list-style: none;
}
#paketliste li {
  display: inline;
}

#picVidContainer {
  border: 2px solid #E15616;
  width: 380px;
  min-height: 227px;
}
.angebotthumb {
  width: 80px;
  border: 1px solid #E15616;
  margin-right: 3px;
  margin-bottom: 3px;
  cursor: pointer;
}

#slideshow {
  width: 470px;
  height: 257px;
  margin: 0 auto;
}
#slideshow img {
  width: 470px;
  height: 257px;
  max-width: none;
  border: 0;
}



/* YouTube-iFrames responsiv (ccco-Plugin rendert .iframevideocontainer) */
.iframevideocontainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 8px;
  border: 2px solid #fff;
}
.iframevideocontainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#mehrInfo {
  background-color: #000;
  padding: 15px;
  font-size: 11px;
}

#detailseiteliste {
  list-style: none;
}
#detailseiteliste li {
  display: inline;
}


/* ═══════════════════════════════════════════════════════════════════
   7. BLOG
   ═══════════════════════════════════════════════════════════════════ */

#blogliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
#blogliste li {
  margin: 25px 0;
  clear: both;
}
#blogliste li a:hover {
  font-weight: normal;
}
#blogliste li a h4 {
  text-align: left;
}
#blogliste li a .img {
  float: left;
  width: 250px;
  height: 150px;
  margin-right: 25px;
  overflow: hidden;
}
#blogliste li a .img img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
/* actionButton in der Blog-Liste ist kein absolut positioniertes Kind */
#blogliste li .actionButton {
  position: static;
  display: inline-block;
  width: auto;
  margin-top: 25px;
}

#blogentry .media {
  float: right;
  width: 340px;
  margin-left: 25px;
}
#blogentry .media img {
  width: 100%;
}
#blogentry .media a {
  display: block;
  border: 1px solid #999;
  text-align: center;
  margin: 5px 0;
}
#blogentry .media a p {
  padding: 0.5em;
}
#blogentry .media a p:empty {
  padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   8. FORMULARE
   ═══════════════════════════════════════════════════════════════════ */

#formular_buchung,
#formular_geschenk,
#formular_infos {
  font-size: 11px;
}

.formleft {
  float: left;
  width: 120px;
}

.formsubmit {
  background-color: #E15616;
  border-radius: 3px;
  color: #fff;
  font-family: 'Michroma', sans-serif;
  padding: 10px;
  text-shadow: #000 0.1em 0.1em 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
.formsubmit:hover {
  color: #E15616;
  background-color: #fff;
}

.invalidformcheckbox:after {
  content: '';
  position: absolute;
  background-color: red;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 8px;
}

.formDisclaimer {
  max-width: 500px;
}
.formDisclaimer a {
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════
   9. NEWSLETTER
   ═══════════════════════════════════════════════════════════════════ */

/* #newsletter ist im HTML ein <form>, kein <div> */
form#newsletter {
  border: 1px solid #E15616;
  box-shadow: 0 0 15px #E15616;
  border-radius: 15px;
  padding: 25px;
  max-width: 500px;
  margin-bottom: 25px;
}
form#newsletter p {
  font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════════
   10. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

/* Standard actionButton: absolut in .angebotli positioniert */
.actionButton {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #E15616;
  border-radius: 3px;
  color: #fff;
  font-family: 'Michroma', sans-serif;
  padding: 10px;
  text-shadow: #000 0.1em 0.1em 0.2em;
  text-transform: uppercase;
  width: 184px;
  margin: 5px 0;
  text-align: center;
}
.actionButton:hover {
  background-color: #fff;
  color: #E15616;
  font-weight: normal;
}

.buttonorange {
  background-image: url('../hp_pics/button_orange.png');
  background-repeat: no-repeat;
  width: 166px;
  display: inline-block;
  padding: 4px 0 6px 9px;
  margin: 3px;
  font-style: italic;
  font-size: 11px;
  color: #000;
  cursor: pointer;
}
.buttonorange:hover,
.buttonorange:focus {
  background-image: url('../hp_pics/button_grau.png');
  font-weight: normal;
}

.buttongelb {
  background-image: url('../hp_pics/button_gelb.png');
  background-repeat: no-repeat;
  width: 166px;
  display: inline-block;
  padding: 6px 0 4px 9px;
  margin: 3px;
  font-style: italic;
  font-size: 11px;
  color: #000;
  cursor: pointer;
}
.buttongelb:hover,
.buttongelb:focus {
  background-image: url('../hp_pics/button_grau_gr.png');
  font-weight: normal;
}


/* ═══════════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════════ */

#links_bottom {
  font-size: 11px;
  color: #000;
  padding: 5px 0 30px;
  text-align: center;
}
#links_bottom a {
  color: #000;
}
#links_bottom a:hover {
  font-weight: normal;
}


/* ═══════════════════════════════════════════════════════════════════
   12. UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

.clearer   { clear: both; }
.hidden    { display: none; }
.inline    { display: inline; }
.orange    { color: #E15616; }
.bold      { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.alignleft { text-align: left; }
.alignright{ text-align: right; }
.floatleft { float: left; }
.floatright{ float: right; }
.justify   { text-align: justify; }
.active a  { font-weight: bold; }
.black a   { color: #000; }

.warning {
  background-color: #c00;
  color: #fff;
  padding: 10px;
  text-align: center;
}


/* wu-accordion-btn gilt auf <a>-Tags – kein Reset nötig */
a.wu-accordion-btn {
  cursor: pointer;
}

/* ── Accordion-Formulare ──────────────────────────────────────────── */

#formulare {
  /* clear:both damit #formulare unter den gefloateten Spalten erscheint
     und nicht in den float-Kontext von #angeboteleft hineinfällt */
  clear: both;
  margin-top: 24px;
}
#formulare form {
  display: none;
  background-color: #1a1a1a;
  border: 1px solid #E15616;
  border-radius: 4px;
  padding: 16px 44px 16px 16px; /* rechts Platz für Close-Button */
  margin-top: 12px;
  position: relative;
  animation: wu-slidein 0.25s ease;
}
#formulare form.wu-accordion-open {
  display: block;
}
@keyframes wu-slidein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Close-Button */
.wu-form-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 2px solid #E15616;
  border-radius: 50%;
  color: #E15616;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: "Verdana", sans-serif;
  flex-shrink: 0;
}
.wu-form-close:hover {
  background: #E15616;
  color: #fff;
}

/* Newsletter-Submit: iOS-Default-Styling aufheben */
form#newsletter input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #E15616;
  border-radius: 3px;
  color: #fff;
  font-family: 'Michroma', sans-serif;
  padding: 10px 16px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  font-size: 12px;
}
form#newsletter input[type="submit"]:hover {
  background-color: #fff;
  color: #E15616;
}


/* ═══════════════════════════════════════════════════════════════════
   13. MOBILE (≤ 979px)
   ═══════════════════════════════════════════════════════════════════ */

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

  /* ── Gerüst ─────────────────────────────────────────────────────── */

  #wrap {
    width: 100%;
  }

  /* Kein künstlicher Abstand – Hamburger überlagert den Content */
  #spacerOben {
    height: 0;
  }

  #main {
    box-shadow: none;
  }

  #heading {
    height: auto;
    min-height: 48px;
    padding: 32px 58px 32px 14px; /* rechts Platz für Hamburger */
    font-size: 16px;
    background-size: cover;
    background-position: center right 50px, center right;
    background-color: #000;
  }
  #heading .spacer {
    display: none;
  }
  #heading span {
    display: block;
    vertical-align: middle;
    line-height: 1.3;
  }

  #content {
    padding: 12px 14px;
  }

  body {
    font-size: 15px;
  }

  /* Startseite: inline style="width:870px" auf der Table überschreiben */
  #content table {
    width: 100% !important;
    table-layout: fixed;
  }
  #content table td {
    display: block;
    width: 100% !important;
    padding: 0;
  }

  /* ── Navigation ──────────────────────────────────────────────────── */

  #mainMenu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;         /* volle Höhe → scrollbar in landscape */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9998;
    background: #111;
    padding: 54px 0 10px;
    margin: 0;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0,0,0,0.75);
  }
  #mainMenu.is-open {
    display: flex;
  }
  #mainMenu li {
    display: block !important;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #mainMenu li a {
    display: block;
    padding: 13px 20px;
    font-size: 15px;
  }

  /* Hamburger-Button – von script_2026ux.js eingefügt */
  #wu-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 5px;
    right: 10px;
    z-index: 9999;
    width: 42px;
    height: 42px;
    background: #E15616;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  #wu-nav-toggle span,
  #wu-nav-toggle span::before,
  #wu-nav-toggle span::after {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  #wu-nav-toggle span::before,
  #wu-nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
  }
  #wu-nav-toggle span::before { top: -7px; }
  #wu-nav-toggle span::after  { top:  7px; }
  #wu-nav-toggle.is-open span          { background: transparent; }
  #wu-nav-toggle.is-open span::before  { transform: rotate(45deg) translate(5px, 5px); }
  #wu-nav-toggle.is-open span::after   { transform: rotate(-45deg) translate(5px, -5px); }

  /* ── Angebots-Karten ─────────────────────────────────────────────── */

  .angebotliste li {
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px 0;
    padding-bottom: 0; /* actionButton wird static, kein absolutes Padding nötig */
  }
  .angebotliste li div.homeImgContainer {
    width: 100% !important;
    height: 180px;
  }
  .angebotliste li img {
    width: 100% !important;
    max-width: 100% !important;
    height: 180px;
  }
  /* actionButton: aus absoluter Positionierung raus, normal im Fluss */
  .angebotliste li .actionButton {
    position: static;
    display: block;
    width: 100%;
    margin: 8px 0 0 0;
    box-sizing: border-box;
  }
  /* jQuery setzt inline height="" auf .angebotli –
     !important überschreibt inline-styles (CSS-Spezifikation) */
  .angebotli {
    height: auto !important;
  }

  .kulinarik-header {
    width: 100%;
    margin-top: 20px;
  }

  /* ── Angebots-Detail ─────────────────────────────────────────────── */

  /* Spaltenreihenfolge umkehren:
     Desktop: angeboteleft=links, angeboteright=rechts (float-basiert)
     Mobil:   angeboteleft zuerst (Text/Buchung), angeboteright danach (Fotos)
     :has() wird von allen modernen Browsern unterstützt (2023+).
     Fallback: ohne :has() erscheinen die Spalten in DOM-Reihenfolge –
     angeboteright kommt im HTML zuerst, daher brauchen wir den Wrapper. */
  #content:has(#angeboteleft) {
    display: flex;
    flex-direction: column;
  }
  #angeboteleft {
    order: 1;
    text-align: left; /* justify macht auf Schmalseiten Lücken */
  }
  #angeboteright {
    order: 2;
    margin-top: 24px;
  }

  #angeboteright,
  #angeboteleft {
    float: none !important;
    width: 100% !important;
  }
  #angeboteright .detailImgContainer {
    width: 100px;
    height: 65px;
  }
  .galleryThumb {
    height: 65px;
  }
  #picVidContainer {
    width: 100% !important;
    min-height: 0;
  }
  #slideshow {
    width: 100%;
    height: auto;
  }
  #slideshow img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }
  #paketliste li {
    display: block;
    margin-bottom: 8px;
  }


  /* ── Blog-Liste ──────────────────────────────────────────────────── */

  #blogliste li a .img {
    float: none !important;
    width: 100% !important;
    height: auto;
    margin-right: 0;
    margin-bottom: 10px;
  }
  #blogliste li a .img img {
    width: 100%;
    max-height: none;
  }

  /* ── Blog-Artikel ────────────────────────────────────────────────── */

  #blogentry .media {
    float: none !important;
    width: 100% !important;
    margin-left: 0;
    margin-bottom: 14px;
  }

  /* ── Formulare ───────────────────────────────────────────────────── */

  .formleft {
    float: none !important;
    width: 100% !important;
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
  }
  /* Alle Texteingaben in Formularen: volle Breite, gut tippbar */
  #formular_buchung input[type="text"],
  #formular_buchung textarea,
  #formular_geschenk input[type="text"],
  #formular_geschenk textarea,
  #formular_infos input[type="text"],
  #formular_infos textarea,
  form#newsletter input[type="text"] {
    width: 100%;
    padding: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  /* Checkboxen und Radios: gut antippbar */
  #formular_buchung input[type="radio"],
  #formular_buchung input[type="checkbox"],
  #formular_geschenk input[type="radio"],
  #formular_geschenk input[type="checkbox"],
  #formular_infos input[type="checkbox"],
  form#newsletter input[type="radio"],
  form#newsletter input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
  }
  .formsubmit {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    margin-top: 8px;
    display: block;
  }

  /* ── Newsletter ──────────────────────────────────────────────────── */

  form#newsletter {
    max-width: 100%;
    padding: 16px;
  }

  /* ── Footer ──────────────────────────────────────────────────────── */

  #links_bottom {
    padding: 12px 14px 24px;
    text-align: left;
    font-size: 13px;
  }
  #footerMenu {
    display: block !important;
    margin-left: 0;
    text-align: left;
    margin-top: 8px;
  }
  #footerMenu li {
    display: block !important;
    margin-left: 0;
    padding: 4px 0;
  }

  /* Telefonnummern gut antippbar */
  a[href^="tel"] {
    font-size: 1.1em;
    font-weight: bold;
  }

  /* ── Überschriften ───────────────────────────────────────────────── */

  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.04rem; }

} /* Ende @media (max-width: 768px) */

@media screen and (max-width: 679px) {
  h1 { font-size: 1.1rem; }
  h2 { font-size: 1.07rem; }
  #heading {
    padding: 32px 58px 16px 14px; /* rechts Platz für Hamburger */
  }
  #heading span{
    background-color: #000;
    padding: 5px;
    display: inline-block;
    left: 3px;
    top: 48px;
    font-size: 10px;
    position: absolute;
  }
}