@font-face {
  font-family: 'Average-Regular';
  src: url('./Average-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gabarito-Variable';
  src: url('./Gabarito-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'fa-brands.ttf';
  src: url('./fa-brands-400.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PoorStory-Regular';
  src: url('./PoorStory-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


:root {
  --grün:#4d711b !important;
  --grünActiveSelected:#588913;
  --rot: #C50D0D;
  --rotActiveSelected: #891313;
  --gelb: #FFC107;
  --gelbActiveSelected: #ac840d;
  --beigeGlass: #eae4d6f2;
  --border-radius: 12px;
  --padding: 2rem;
  --btns-headings-font-neu: "Gabarito-Variable", sans-serif;
  --body-font: sans-serif;
  --beige-bg: #ddd3c6;
  --button-bg: #e9e2e1b3;
  --button-bg-hover: #d2c5c3;
}


@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a {
    color: var(--rotActiveSelected);
    font-weight: 600;
}

.inputgroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 2rem;
    flex-wrap: wrap;
}
#route h2 {font-family: var(--btns-headings-font-neu);}

/* Auch Kontaktformular: */
form#contactForm {
    margin: 0 auto;
    width: 100%;
}
.form_group {
    display: flex;
}
#ds_checkbox_formgrp {
    margin-top: 1.5rem;
    justify-content: center;
}
label {
    font-family: var(--body-font);
    width: 260px;
    text-align: right;
    padding-right: 1rem;
    display: inline-block;
}
input[type="text"], input[type="email"], input[type="phone"] {
    padding: 12px;
    font-size: 18px;
}
input[type="checkbox"] {
    width: auto;
}
label[for="datenschutz_checkbox"] {
    width: auto;
}
input, textarea {
    margin-bottom: 0.5rem;
    width: 450px;
}
textarea#message {
    padding: 0.75rem;
}
button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    border: none;
    text-decoration: none;
    font-family: Gabarito-Variable;
    font-kerning: none;
    background: var(--button-bg);
    color: var(--rotActiveSelected);
    transition: all 0.3s ease;
    transition: all 0.3s ease;
}
button:hover {
  background: var(--button-bg-hover);
}

html {
    height: 100%;
    width: 100%;
}

body {
    position: relative;
    font-family: var(--body-font);
    font-size: 1.15rem;
    height: 100%;
    overflow: auto;
    background: #4a4845;
}

p {
    margin-block-end: 1rem;
}
h2 {
    margin-bottom: 2rem;
}

#header_home_wrapper {
    text-decoration: none;
    color: #4b4b4b;
    min-width: 250px;
    display: flex;
    font-family: var(--btns-headings-font-neu);
    width: 100%;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 3rem;
    align-items: center;
}
#start_frag #header_home_wrapper {
    position: fixed;
    top: 50px;
    right: 50px;
    display: block;
}
.header_links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-start;
    column-gap: 20px;
    cursor: pointer;
}

#start_frag #header_logo {max-width: 100px;}

.header_rechts {width: 100%;}
.content_side #header_logo {
    max-width: 72px;
}

.header_firmenname {
    text-shadow: -1px -1px 0 #ddd3c6,  
      1px -1px 0 #ddd3c6,
      -1px 1px 0 #ddd3c6,
       1px 1px 0 #ddd3c6;
    font-size: 1.5rem;
    width: auto;
    margin-bottom: 0;
    flex-shrink: 0;
}

.landing_slogan {
    font-family: var(--btns-headings-font-neu);
    font-size: 38pt;
    margin-bottom: 32px;
}

.extra_oeffnungszeiten {
    font-size: 20px;
    margin-top: 4px;
}

#hours {
  margin-bottom: 1rem;
  font-family: var(--btns-headings-font-neu);color: var(--rotActiveSelected);font-weight: 600;font-size: 1.2rem;
}
#address {
    margin-top: 3rem;
}
#address li {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}
#address a {
    color: var(--rotActiveSelected);
    font-family: var(--btns-headings-font-neu);
}

.dates img {float: left;}

#no_smoking, .dates {display:flex;align-items: center;column-gap: 12px;margin-top: 3rem;}
#no_smoking, .dates span {
    font-weight: 600;font-family: var(--btns-headings-font-neu);font-size: 21px;color: #616161;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  left: 20px;
  position: relative;
}

/* Track */
::-webkit-scrollbar-track {
  background: #CCC5B8;
  border-radius: 30px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #9A3951;
  border-radius: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.hg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../IMG/hg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(8px) sepia(0.5);
}

.page {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    position: relative;
    transition: bottom 0.8s ease;
}

.invisible {opacity: 0;}


main {opacity: 0;transition: width 0.2s ease-in;}
main, .fullwidth_wrapper {
    height: 100%;
    width: 67%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    background: oklch(0.92 0.02 88.54 / 0.95);
    box-shadow: -4px 0 20px 12px rgba(0,0,0,0.5);
    transition: opacity 1s ease-in;
}

.content_area {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    padding: 50px 0;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2rem;
    flex-direction: column;
}
.content_side {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    padding-bottom: 3rem;
}
#start_frag {
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 0;
}
.heading_slogan {
    font-size: 43pt;
    font-family: var(--btns-headings-font-neu);
    margin-bottom: 2rem;
    margin-top: 3rem;
    display: inline-block;
}
.content_wrapper {
    width: 100%;
    position: relative;
    height: auto;
}
.row_wrapper {
    height: auto;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 80px;
}
.row_wrapper div {width: 50%;}
.bilder_wrapper {
    height: auto;
    width: 100%;
    position: relative;
    display: block;
}
.ueberschrift {font-family: var(--btns-headings-font-neu);}
#essen_anfrage_erklaerung {
    margin-top: 2rem;
    margin-bottom: 0;
    font-style: italic;
}
#essen_anfrage {
    padding: 0;
    width: 30%;
    font-size: 16pt;
    margin: 0 auto;
    margin-top: 0;
}
#essen_anfrage a {
    padding: 2rem !important;
}
#essen_anfrage_link_im_text {color: var(--rotActiveSelected);font-weight: 700;}

.fullwidth_wrapper {
  background: #d0cabe;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s;
  padding-top: 5%;
}
.whitebg {background: #fff;}
#fullwidth_wrapper_anfahrt {
  justify-content: normal;
  padding-top: 0;
  display: inherit;
}


/* AKTUELLES */

.infobubble {
    display: flex;
    align-items: center;
    column-gap: 2rem;
    padding: 2rem;
    border-radius: 12px;
    background: white;
    box-shadow: 0 0 24px 1px rgba(0,0,0,0.12);
    margin-bottom: 1.25rem;
}
.side_emoji {
    margin: 0;
    font-size: 38px;
}
.aktuelles_item {
    font-size: 24px;
    margin: 0;
}
.aktuelles_item p {margin-block-end: 0;}


.label, .image {
    border: 1px solid darkgrey;
    border-radius: 8px;
    background-color: #fff;
    height: 110px;
    background: linear-gradient(white, white) padding-box, linear-gradient(to right top, #63636369, #ffffffd1) border-box;
    border: 2px solid transparent;
    overflow: hidden;
}
.label {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 126px);
    transition: all 0.2s ease-in;
}
.label h3 {
    font-size: 25px;
}
.label p {
    font-size: 18px;
}

.image {
    width: 110px;
}
.image div {
  background-size:cover;
  background-position:center;
  height: 100%;
}


.anfahrt_view {
  height: 50%;
  width: 100%;
  position: relative;
  border-radius: 32px;
  transition: 1s opacity ease;
  opacity: 0;
  overflow: hidden;
}
#anfahrt_view_img_wrapper {
  height: 100%;
  width: 100%;
}

.anfahrt_view_img {
  height: 100%;
  width: 100%;
  position: relative;
  transition: 2s opacity ease;
  opacity: 0;
}

div#anschrift {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 3rem;
}

.hoz_divider {
  width: 100%;
  height: 10px;
  display: flex;
  margin-bottom: 1em;
}




.infobox_inner {
    background: #CCC5B8;
    width: 100%;
    height: 100%;
    border-radius: 29px;
    padding: 50px;
    overflow-y: auto;
    overflow-x: hidden;
}

.infobox_inner h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}


#anfahrt_info_dynamic {
  color: #B96E81;
  margin-top: 1em;
  display: block;
  font-weight: bold;
}

.rightside_full_img {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
  transition: 1s opacity ease;
}
.leftside_full_img {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0;
  transition: 1s opacity ease;
}


body.swal2-shown.swal2-height-auto {
    height: 100% !important;
}

/*------- MAP --------------*/

/*#previews_anfahrt {
  filter:contrast(88%) brightness(1.1) hue-rotate(-15deg) sepia(50%);
}*/

.karte {
    width: auto;
    height: 500px;
    background: url('../IMG/anfahrt.jpg');
    background-position: center;
    background-size: cover;
    cursor: pointer;
    margin-left: -5rem;
    margin-right: -5rem;
}
.bildunterschrift, #anschrift_wrapper {
  text-align: center;
  font-family: var(--btns-headings-font-neu);
  font-size: 1.15rem;
  margin-top: 1rem;
}
#route {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--beige-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-top: 2.6rem;
}
#route button, #mitglieder_profilbild_upload, #kontakt_absenden {
    padding: 24px;
    letter-spacing: 0;
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/* ------ VORSTAND---------- */

#vorstand_frag .content_wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    margin-top: 4rem;
    width: 100%;
    flex-direction: row;
  display: flex;
  justify-content: center;
  gap: 40px; /* Adjust spacing between items */
}

.avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.avatar img {
    width: 60%;
}
.avatar p {
    font-family: var(--btns-headings-font-neu);
}

p.vorstand_name {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}
p.vorstand_titel {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 0;
}

/* ------ FOOTER ------------- */

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding-right: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.impressum {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    column-gap: 32px;
    height: 100%;
    align-content: center;
}

.impressum_link {
  text-decoration: none;
  color: #4b4b4b;
  font-family: var(--btns-headings-font-neu);
}


/*-----------Kalender ---------------*/

.deaktiviert .card_strip {background: #6d6d6d;}
.abgelaufen .card_strip {background: #978080;}
.anmeldeschluss .card_strip {background: #c4ad8d;}
.anmeldeschluss .event_tn_btn {
    background: #d0bda2;
}
.anmeldeschluss .event_tn {
    background: #c8b59a;
}
.anmeldeschluss .event_tn_btn:hover .event_tn {
    background: #c8b59a;
}
.membersOnly {border: 2px dashed var(--gelbActiveSelected);}


ul {list-style: none}
#infobox_padding_calendar {
    padding: 3rem;
    padding-left: var(--border-radius);
    padding-right: var(--border-radius);
}

#infobox_padding_calendar h2, #infobox_padding_calendar h1 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-family: var(--btns-headings-font-neu);
    letter-spacing: 1px;
}

#infobox_padding_calendar ul {
    list-style: none;
    display: flex;
    column-gap: 5%;
}

#infobox_padding_calendar #vertical_list {
    flex-direction: column;
    row-gap: var(--border-radius);
    align-items: center;
}

#infobox_padding_calendar ul#vertical_list li {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.card_strip {
    padding: 2rem;
    border-radius: 16px;
    background: var(--beige-bg);
    width: 100%;
}
.event_strip {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: var(--body-font);
}
.event_strip_L {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.event_h2 {display: inline-block;}
.camera_icon {
    width: 36px;
    position: relative;
    top: 12px;
    cursor: pointer;
    margin-top: -18px;
}
.bilder_pfadnamen {display: none;}
#bilder_wrapper img {max-height: 80dvh;}
.expired {
  background:#ece7e1;
  display:none;
}
.expired .event_tn_btn {
  cursor: initial;pointer-events: none;
}
.expired .event_tn {
    pointer-events: none;
    cursor: unset;
}
#infobox_padding_calendar .event_h2 {
    margin-bottom: 16px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rotActiveSelected);
    padding-right: 1rem;
}
#infobox_padding_calendar .expired .event_h2 {
    color: grey;
}
.event_text, .event_location_fee {
    padding-right: 1rem;
}
.event_time {
    pointer-events: none;
    padding: 1rem;
}
.event_time, .event_date, .event_tn {
    margin: 0;
    margin-block-end: 0;
}
.event_date {
    display: inline-block;
    font-size: 1.5rem;
    margin: 0;
    margin-block-end: 0;
}
.year_big {
    font-size: 1.65rem;
    color: #979797;
    font-weight: 600;
}
#infobox_padding_calendar p {
    
    max-width: 100%;
}
#infobox_padding_calendar p.event_text {margin-bottom: 1rem;}
.event_strip_R {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.event_tn_btn {
    border-radius: var(--border-radius);
    overflow: hidden;
    width: 170px;
    background: white;
    text-align: center;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all .4s ease;
    font-family: var(--btns-headings-font-neu);
}
.event_tn_btn:hover .event_tn {
  background: var(--button-bg-hover);
} 
.event_tn  {
    padding-bottom: 1rem;
    padding-top: 1rem;
    background: var(--button-bg);
    font-family: var(--btns-headings-font-neu);
    color: var(--rotActiveSelected);
    pointer-events: none;
    transition: all 0.3s ease;
}
.date_centerer {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #d9d9d9;
    pointer-events: none;
}

.gallery-nav {
    font-size: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
}




#speisen_frag .infobox h2, #anfahrt_frag h2 {
    font-size: 1.5rem;
}
#speisen_frag p {
    font-size: 1.2rem;
}

#speisen_frag .content_wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    padding-bottom: 3rem;
}

.rightalign_wrapper {flex-direction: row-reverse;}

.leftalign_wrapper img {float: right;}
.rightalign_wrapper h2, .rightalign_wrapper p {text-align: right;}


/* ------------- SWAL ------------------ */


.link_datenschutz {color: var(--grünActiveSelected);text-decoration: none;font-weight: 600;}


div:where(.swal2-container) h2:where(.swal2-title) {
  margin-bottom: 2rem;
  font-family: var(--btns-headings-font-neu);
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--grünActiveSelected) !important;
    box-shadow: none !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
    background-color: var(--grün) !important;
}

.swal-gallery {
    background: #111111bf;
    color: #eee;
    padding: 2rem;
    width: 100vw;
    height: 100vh;
}
div:where(.swal2-container) {
    padding: 0 !important;
}
label {font-family: var(--body-font);}

.swal-gallery-fade {
  animation: fadeIn 0.35s ease-out !important;
}
div:where(.swal2-container) button:where(.swal2-close):focus {
    box-shadow: none !important;
}
#whatsapp_link a {
    color: var(--grün);
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* === BILDUPLOAD PAGE === */

#preview-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.cropper-container {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
}
#preview img {
  display: block;
  max-width: 100%;
  height: auto;
}
.privacy-note {
  margin-top: 1rem;
  font-size: 0.9em;
  color: #333;
}




/* Media query to handle screen widths below 756px */
@media (max-width: 1560px) {
  .infobox_outer {left:0;}
}

@media (max-width: 1350px) {

  .row_wrapper {
    flex-direction: column;
    row-gap: 24px;
    padding-left: 6%;
    padding-right: 6%;
  }
  #essen_anfrage {width: 90%;}
  #vorstand_frag .content_wrapper {gap:20px;}
  .row_wrapper div {
    width: 100%;
  }
  .row_wrapper .ueberschrift, .row_wrapper p {text-align: left !important;}
}

@media (max-width: 1300px) {
  .content_area {
    padding: 2rem;
  }
}

@media (max-width: 1120px) {
    .infobubble {
        flex-direction: column;
        row-gap: 1.25rem;
    }
}

@media (max-width: 1000px) {
  button.nav_button {font-size: 1.25rem;}
}

@media (max-width: 900px) {
    .event_strip {
        flex-direction: column;
        row-gap: 1rem;
        align-items: center;
    }
    .event_strip_R {
        width: 100%;
    }
    .event_tn_btn {width: 100%}
}
@media (max-width: 800px) {
  #header_startseite {pointer-events: all;}
  .container {width: 100%;}
  .content_area {padding: 0;}
  .content_wrapper {padding-left: 1rem;padding-right: 1rem;}
  .label, .image {height: auto !important;min-height: 110px;}
  .leftside, .rightside {
    width: 100%;
  }
    .infobubble {
        flex-direction: row;
    }
  .leftalign_wrapper p {
    text-align: right;
  }
  .leftalign_wrapper:first-child p {text-align: left;}
  div#header_home_wrapper {
    width: 100%;
    margin-top: 32px;
    position: relative;
  }
  .content_side {padding-bottom: 1rem;}
.heading_slogan {
    max-width: none;
    font-size: 36pt;
    padding-left: 1rem;
    /*word-break: break-word;*/
    /*overflow-wrap: break-word;*/ 
    /*hyphens: auto;*/
}
  h2.heading_slogan {
    width: 100%;
    position: relative;
    max-width: 100%;
  }
  div#infobox_padding_calendar {
    padding-top: 0;
  }
  .event_strip {
    flex-direction: row;
    column-gap: 1rem;
  }
  .event_strip_R {
    align-items: flex-end;
  }
  .event_tn_btn {width: 150px;}
  .event_text, .event_location_fee {
    padding-right: 0;
  }
  .row_wrapper div {
    width: 100%;
    margin-bottom: 1rem;
  }
  .row_wrapper .ueberschrift {
    text-align: center !important;
  }
  .bilder_wrapper {
    margin-bottom: 0 !important;
  }
  #route {row-gap: 2rem;}
  .inputgroup {row-gap: 1rem;}
  #route h2 {margin-bottom: 0;}
  div#anschrift_wrapper {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 16pt;
    text-align: center;
  }
  #route button {
    padding: 15px;
    width: 100%;
    font-size: 16pt;
  }
  input[type="text"] {width: 100%;}
  div:where(.swal2-container).swal2-center>.swal2-popup {width: 100% !important;}
  footer {background: var(--beigeGlass);}
}







@media (max-width: 550px) {
    .infobubble {
        flex-direction: column;
    }
    .event_strip {
        flex-direction: column;
        row-gap: 1rem;
        align-items: center;
    }
    .event_strip_R {
        width: 100%;
    }
    .event_tn_btn {
        width: 100%;
    }
}