/*
Theme Name: RITMO - ATELIER CAPREZ
Author: ATELIER CAPREZ - GC
Author URI: https://caprez.info
Description: Ritmo 03/25 - Template Atelier Caprez
Version: 1.0
License: GNU General Public License

-------------------------------------------------------------- */
/*@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Farben
   -------------------------------------------------------------- */
/* Ritmo Farben 
  Rot (main):  #fe2a2a
  Schwarz:     #000
  Secondary Rot:  #fe2a2a
  Menu hover / active: #f7902b
  Preloader Background: #f3300f
*/

/* ==== CSS Reset (modern, fokussiert) ==== */

/* Box-Sizing & Margin Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* Set line-height for readability */
html {
  line-height: 1.5;
}

/* Body settings */
body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Avoid text overflow */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Root stacking context (useful for modals, etc.) */
#root,
#__next {
  isolation: isolate;
}

/* Forms */
button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
  line-height: 1.15;
  color: inherit;
}

/* Remove default button styles in Safari */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/* Optional: neutralize `strong`, `b` */
b,
strong {
  font-weight: bolder;
}


/* TEMPLATE - Main Styles
   ========================================================================== */
/* Basis-Hintergrundfarbe für Dokument */
html,
body {
    background-color: #000;
}

/* Globale CSS-Variablen */
:root {
    /*--base-font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));*/
    --base-font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    --scale-ratio: 1.125; /* Typografische Skalierung – Major Second */
    --line-height-base: calc(var(--base-font-size) * 1.618); /* Basis-Zeilenhöhe */
}

/* Grundlegende Body-Stile */
body {
    font-size: var(--base-font-size);
    line-height: var(--line-height-base);
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 100vh;
    /*letter-spacing: 0.036em;*/
    letter-spacing: 0.04em;

    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #eee;

    background-color: #000;
    background-attachment: scroll;
    background-position: 50% 0%;
    background-size: auto;
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

/* Einheitliches Styling für Formular-Elemente */
button,
input,
select {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #eee;
    background-color: #333;
    border: none;
}

/* Layout-Container */
.main-fluid {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 1240px;
    height: 100%;
    margin: 0 auto;
    /*padding: 0 12px;*/4
    padding: 0;
}


/* Headings
   -------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    color: #fff;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-weight: 200;
}

h1, .h1-like {
    font-size: 2em;
    /* equiv 32px */
    line-height: 1.618;
    margin: 0 0 .809em 0;
}

h2, .h2-like {
    font-size: 1.8125em;
    /* equiv 29px */
    line-height: 1.7854;
    margin: 0 0 .8927em 0;
}

h3, .h3-like {
    font-size: 1.5em;
    /* equiv 24px */
    line-height: 1.0787;
    margin: 0 0 1.0787em 0;
}

h4, .h4-like {
    font-size: 1.4375em;
    /* equiv 23px */
    line-height: 1.1256;
    margin: 0 0 1.1256em 0;
}

h5, .h5-like {
    font-size: 1.25em;
    /* equiv 20px */
    line-height: 1.2944;
    margin: 0 0 1.2944em 0;
}

h6, .h6-like {
    font-size: 1.125em;
    /* equiv 18px */
    line-height: 1.4382;
    margin: 0 0 1.4382em 0;
}

.tanzkurse-container h2 {
    font-weight: 500;
}


/* avoid supp margin on nested elements */
li p,
li ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* avoid last-child bottom margin */
/*
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
  margin-bottom: 0;
  padding-bottom:0;
}*/

/* avoid collapsing margins
you might need this, depending on your design
*/
/*
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: -105px;
  padding-top: 0;
  border-bottom:0;
}
*/

.dnone {
    display: none !important;
}


/* ELEMENTE
   -------------------------------------------------------------- */
.alert{
    background: darkred;
    display: inline-block;
    padding: 0.125em 0.5em;
    border-radius: .25em;
    font-weight: 500;
    margin-top: 0.125em;
    margin-bottom: 0.125em;
}
/* Buttons */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    /* Improves usability and consistency of cursor style between image-type 'input' and others */
    -webkit-appearance: button;
    /* Corrects inability to style clickable 'input' types in iOS */
    font-size: 1rem;
    line-height: 1;
}

.button {
    font-size: 1rem;
    line-height: 1;
    box-shadow: rgba(255, 0, 0, 0.45) 0px 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    padding: 0.5em;
    border: 1px solid #cecece;
    display: inline-block;
    margin-bottom: 0.5em;
    color: #000;
}

/* Scrollbar 
-------------------------------------------------------------- */
:root {
    scrollbar-face-color: rgb(210, 210, 210);
    scrollbar-track-color: rgb(153 153 153);
    scrollbar-color: rgb(210, 210, 210) rgb(153 153 153);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px 0px #4d4c4d;
    border-radius: 10px;
    background: #b8bac6;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(210, 210, 210);
    border-radius: 10px;
}

/* Text elements & Typography
-------------------------------------------------------------- */
/* Alignment */
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto;
}

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

.center {
    text-align: center;
}

nobr {
    white-space: nowrap;
    hyphens: none;
}

p {
    margin: 0 0 1.618em 0;
}

b, strong {
    font-weight: bold;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

/* Listen */
ul {
    list-style: disc;
    padding-left: 1em;
}

ol {
    list-style: decimal;
}

ul ul, ol ol, ul ol, ol ul {
    margin-bottom: 0;
    margin-left: 1.5em;
}

/* Links */
a {
    -webkit-transition: color 0.25s ease-in-out;
    -moz-transition: color 0.25s ease-in-out;
    -o-transition: color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
    text-decoration: underline;
    color: white;
    text-align: left;
}

a:hover, a:focus .fixedhead nav ul li a:hover {
    color: rgb(255, 157, 31);
}

a:active {
    color: #0252D4;
}


/* Header
   ========================================================================== */
header {
    display: none;
}

.logotxt {
    margin: 0.5em auto 0;
    width: 100%;
    color: white;
}

/* Logo Image */
.logoimg {
    width: 55px;
    height: 55px;
    transform-origin: center;
}

.logoholder {
    transform-origin: right;
    position: absolute;
}

.site-header {
    z-index: 6;
}

#mini-logo {
    /*margin-top: 10px;*/
    margin-top: 5px;
    /*margin-bottom: 10px;*/
    position: absolute;
}

#mini-logo .logoimg {
    height: 90px;
    width: auto;
    display: block;
}

#mini-link {
    text-decoration: none;
}

#minilogo-slogan {
    color: #fff;
    position: relative;
    z-index: 100;
    font-size: 11px;
    left: 68px;
    top: -68px;
}

.menbg {
    width: 100vw;
    height: 146px;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    right: 0;
    z-index: 7;
}
.navbar-container {
    max-width: 1170px;
    margin: 0 auto;
    padding-top:1em;
    position: fixed;
    width: 93vw;
}


/* FOOTER
   ========================================================================== */
.footer-fluid {
    max-width: 1420px;
    margin-right: auto;
    margin-left: auto;
}

footer {
    z-index: 1;
    flex-shrink: 0;
}

/* Footer buttons */
footer a {
    text-decoration: none;
}

#fbbutton, #isbutton {
    margin-top: 0.5em;
}

#isbutton svg,
#fbbutton svg {
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 3px;
    margin-right: 0.25em;
    width:36px;
    height:36px;
}

#bottom-footer {
    background: -moz-linear-gradient(-45deg, rgba(204, 35, 20, 0.45) 0%, rgba(255, 48, 25, 0.48) 12%, rgba(207, 4, 4, 0.66) 86%, rgba(178, 28, 17, 0.7) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(204, 35, 20, 0.45) 0%, rgba(255, 48, 25, 0.48) 12%, rgba(207, 4, 4, 0.66) 86%, rgba(178, 28, 17, 0.7) 100%);
    background: linear-gradient(135deg, rgba(204, 35, 20, 0.45) 0%, rgba(255, 48, 25, 0.48) 12%, rgba(207, 4, 4, 0.66) 86%, rgba(178, 28, 17, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#73cc2314', endColorstr='#b3b21c11', GradientType=1);
    border-top: 3px solid #222;
    position: relative;
}

.copyright-txt {
    color: #691515;
    font-size: 1em;
    text-align: center;
    padding: 0.5em 1em 0.5em;
    margin-top: 8px;
}

.grecaptcha-badge {
    visibility: hidden;
}

.footer-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
    align-items: center;
    margin-top:1em;
}


.bannerholder a {
    max-width: 200px;
    display: inline-block;
    vertical-align: middle;
    height: auto;
}

.bannerlogo {
    /*max-width: 150px;*/
    max-width: 120px;
}

.impholder {
    color: #eee;
    margin-top: 1em;
}

/* NAVIGATION - Main Menu
========================================================================== */

/* Hauptmenü Container */
.menu {
    max-width: 1236px;
    margin: 0.2em auto;
  }
  
  /* Standardmenü (Desktop vermutlich versteckt) */
  .men {
    display: none;
  }
  
  /* Gemeinsame UL-Styles für Header-Navigation */
  header nav ul,
  .mobmen nav ul,
  .fixedhead nav ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }
  
  /* Gemeinsame Link-Styles */
  header nav ul li a,
  .fixedhead nav ul li a {
    text-decoration: none;
    color: #4f8c93;
    letter-spacing: 0.05em;
    font-weight: 400;
  }
  
  /* Mobile Menü Links */
  .mobmen nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.25em;
    line-height: 2em;
  }
  
  /* Aktive Seite im mobilen Menü */
  .mobmen a[aria-current="page"] {
    text-decoration: underline;
  }
  
  /* Submenü im aktuellen Menüpunkt */
  .current-menu-item .sub-menu a {
    text-decoration: none;
  }
  
  /* MOBILE MENU
  -------------------------------------------------------------- */
  .mobmen {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    height: 100vh;
    width: 100vw;
    padding: 3em 0;
    background: linear-gradient(to bottom, #2d0f00 0%, #000 115%);
  }
  
  .mobmen nav {
    margin: 2em 0;
  }
  
  .mobmen nav .sub-menu {
    display: none;
  }
  
  .mobmen nav ul li {
    margin-right: 0;
    float: none;
  }
  
  /* MENU TOGGLE BUTTON
  -------------------------------------------------------------- */
  .menu-toggle {
    position: fixed;
    top: 0.8rem;
    right: 20px;
    width: 33px;
    height: 30px;
    padding: 5px 5px 32px;
    z-index: 100;
    border-radius: 15px;
    background: rgba(10, 10, 10, 0.6);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* HAMBURGER LINIEN (gemeinsame Klassen zusammengeführt) */
  .a,
  .b,
  .one,
  .two,
  .three {
    width: 90%;
    height: 2px;
    margin: 5px auto;
    /*background: #84eed0; */
    background: #f95;
  }
  
  .a,
  .b {
    position: absolute;
    top: 25%;
  }
  
  /* LOGO MOBILE
  -------------------------------------------------------------- */
  .logoimg-mob {
    width: 100px;
    margin: 0 auto;
  }
  
  #moblogo,
  #moblogotxt {
    position: fixed;
    z-index: 6;
  }
  
  #moblogotxt,
  #moblogotxt-home {
    z-index: 8;
    top: 1rem;
    color: #000;
    white-space: nowrap;
    font-weight: 200;
    font-size: 1.1em;
    margin-left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
  }
  
#moblogotxt-home{
    position: absolute;
}
  
#moblogotxt-home .logotxt{
    white-space: initial;
    text-align: center;
}

/* Inline Navigation
-------------------------------------------------------------- */
.scrollTop {
    cursor: pointer;
    display: inline;
    
    display: block;
    width: 24px;
    height: 24px;
}

.scrollTop svg {
    border-radius: 50%;
    background-color: #fe2a2a;
    background-color: white;
}

.scrollTop polyline {
    stroke: white;
    stroke: black;
}

.btmCont .scrollTop {
    float: right;
}

/* NAVIGATION RITMO
   ---------------------------------------------------- */
/* Startseite */
.home #primary {
    padding: 0;
    margin: 0;
}

.home .content-box {
    background: none;
    outline: none;
    padding: 0;
    margin: 0;
}

.home .scrollTop {
    display: none;
}

/* BUTTON WRAPPER -------------------------------------------------- */
.customBubbleHolder {
    display: block;
    position: relative;
    text-align: center;
    width: 100%;
  }
  
  /* CUSTOM BUBBLE BUTTONS ------------------------------------------- */
  nav.custombubble-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }
  
  nav.custombubble-nav ul li {
    width: 85px;
    height: 85px;
    display: inline-table;
    border-radius: 135px;
    background: #fff;
    box-shadow: 0 0 2px #000;
    transition: all 0.6s ease-in-out;
  }
  
  /* Hintergrundfarben je Button */
  .custombubble-nav ul li:nth-child(1) { background: #9f5607; }
  .custombubble-nav ul li:nth-child(2) { background: #f96704; }
  .custombubble-nav ul li:nth-child(3) { background: #d672bb; }
  .custombubble-nav ul li:nth-child(4) { background: #c2350a; }
  .custombubble-nav ul li:nth-child(5) { background: #ae0761; }
  
  /* BUTTON TEXT */
  nav.custombubble-nav ul li a {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 400;
    color: #111;
    text-decoration: none;
    border-radius: 100px;
    transition: all 0.3s ease-in-out;
  }
  
  nav.custombubble-nav ul li a:hover {
    color: #fff;
  }
  
  /* Sonderfall: letzter Button */
  .custombubble-nav ul li:nth-child(5) a {
    color: #f85800;
  }
  .custombubble-nav ul li:nth-child(5) a:hover {
    color: #fff;
  }
  
  /* ROTIERTER BUTTON */
  #specialBtn-Bubble {
    /*margin-left: 2em;*/
    transform: rotate(7deg);
    transition: transform 0.3s ease-in-out;
  }
  #specialBtn-Bubble:hover {
    transform: rotate(0deg);
    transition: transform 0.4s ease-in-out;
  }
  
  /* HOVER-EFFEKT */
  nav.custombubble-ani ul li:hover {
    box-shadow: 0 0 25px #fff;
  }
  
  /* FLEX NAVIGATION ----------------------------------------------- */
  .mainmen-container ul {
    display: flex;
    justify-content: right;
    gap: .25em;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  
  .mainmen-container ul li {
    margin-left: 12px;
    list-style: none;
  }
  
  .main-menu > li > a {
    display: table-cell;
    width: 85px;
    height: 85px;
    font-size: 0.8em;
    font-family: 'Open Sans', 'Verdana', 'Arial', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    margin-right: 20px;
    border-radius: 90px;
    background: #fff;
    color: #222;
    box-shadow: 0 0 2px #000;
    transition: all 0.3s ease-in-out;
    line-height: 1.35; /* oder exakt zentriert: line-height: 85px; */
  }
  
  /* BUTTON HOVER */
  .main-menu > li > a:hover {
    color: #fff;
    box-shadow: 0 0 8px 6px rgba(255, 255, 255, 0.5);
  }
  
  /* EINZELNE BUTTONFARBEN */
  .main-menu > li:nth-child(1) > a       { background: hsl(31, 93%, 33%); }
  .main-menu > li:nth-child(1) > a:hover { background: hsl(31, 92%, 43%); }
  
  .main-menu > li:nth-child(2) > a       { background: hsl(24, 97%, 45%); }
  .main-menu > li:nth-child(2) > a:hover { background: hsl(24, 97%, 60%); }
  
  .main-menu > li:nth-child(3) > a       { background: hsl(316, 31%, 59%); }
  .main-menu > li:nth-child(3) > a:hover { background: hsl(316, 31%, 74%); }
  
  .main-menu > li:nth-child(4) > a       { background: hsl(14, 91%, 39%); }
  .main-menu > li:nth-child(4) > a:hover { background: hsl(14, 91%, 50%); }
  
  .main-menu > li:nth-child(5) > a {
    background: #ae0761;
    color: #f85800;
    transform: rotate(7deg);
    transition: transform 0.4s ease-in-out;
  }
  .main-menu > li:nth-child(5) > a:hover {
    background: #c3277b;
    color: #fff;
    transform: rotate(0deg);
  }
  
  /* AKTIVER BUTTON */
  .main-menu > .current-menu-item > a {
    color: #fff;
    box-shadow: 0 0 6px 5px rgba(255, 255, 255, 0.35);
  }
  
  /* SUBMIT BUTTONS */
  input[type="submit"],
  #mc-embedded-subscribe {
    background: #fe2a2a;
    border-radius: 4px;
  }
  
  input[type="submit"]:hover,
  #mc-embedded-subscribe:hover {
    background: #7a0544;
  }
  
  /* SUBMENÜ STYLES ----------------------------------------------- */
  .submenu-navigation {
    clear: both;
  }
  
  .menu-item-has-children .sub-menu {
    display: none;
  }
  
  .current-menu-item .sub-menu,
  .submen {
    position: absolute;
    display: flex;
    right: 0;
    background: none;
    font-size: 16px;
    padding: 1em 10px 1em 0;
  }
  
  .submen ul li,
  .current-menu-item .sub-menu ul li {
    float: left;
    margin-left: 1.25em;
    list-style: none;
    font-size: 1.2em;
    font-variant: all-small-caps;
    letter-spacing: 0.02em;
  }
  
  .submen ul li a,
  .sub-menu li a {
    color: #f95;
    white-space: nowrap;
    margin-left: 1em;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: none;
  }
  
  .sub-menu li a:hover {
    color: #fff;
    text-shadow: 0 0 10px #000;
  }
  
  /* MOBILE SUBMENÜ SICHTBAR */
  .mobileMenHolder .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    width: 100%;
    position: static;
    background: rgba(255, 255, 255, 0.7);
  }
  
  /* MISC CLEANUP -------------------------------------------------- */
  .nav li a {
    padding: 0;
  }
  
  #btn-menu-container {
    margin: 15px 30px 5px 0;
  }
  
  .mobmen a br {
    display: none;
  }
  
  .mobmen nav div .menu > li > a:hover {
    box-shadow: none !important;
  }
  

/* Images
   ========================================================================== */
.main-fluid img {
    height: auto;
    display: block;
    width: 100%;
}

iframe {    width: 100%;    }

/* Link Buttons */
.button {
    position: relative;
    overflow: hidden;
    z-index: 2;
    background-color: white;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Parallax Hintergrundbild animation
   ========================================================================== */
   .parallax-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .parallax-background {
    position: absolute;
    width: 100%;
    height: 150%; /* etwas größer für Parallax */
    background-size: cover;
    background-position: top center;
    will-change: transform;
    background-repeat: no-repeat;
  }

  .parallax-background.mobile {
    display: block;
  }
  
/* LAYOUT - Elemente
   ========================================================================== */

.fullwidth {
    max-width: 100vw !important;
}

#pagecontainer {
    height: 100%;
    overflow: hidden;
}

.container {
    width: 100%;
}

.the-content {
    margin-left: auto;
    margin-right: auto;
}

.page-template-page-kurse article{
    max-width: 920px;
    margin: 0 auto;
}

.content-box {
    /*padding: 35px;*/
    padding: 1em;
    background: -moz-linear-gradient(top, rgba(69, 72, 77, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: -webkit-linear-gradient(top, rgba(69, 72, 77, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    background: linear-gradient(to bottom, rgba(69, 72, 77, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9945484d', endColorstr='#99000000', GradientType=0);
    outline: 1px solid #ddd;
}

.section-page, .section {
    margin: 6em 0 0;
}

.mobilehide {
    display: none!important;
}

.clear {
    clear: both;
}

/* FLEX */
.flex-wrapper,
.flexrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.flexrow {
    margin-bottom: 1em;
}

.flexcol1,
.flexcol2,
.flexcol3 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

section {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

.column {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.columns {
    margin-bottom: 2em;
}

/* Hälfte */
.flex-1-2 {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 22px;
}

/* Zwei Drittel */
.flex-2-3 {
    flex-grow: 4;
    flex-shrink: 4;
    flex-basis: 66px;
}

/*
.flexcol-2-1 .column:first-of-type{
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 0;
}
*/

/* ABSTÄNDE Flex-Content */
/* ------------------------------------ */
article div:last-child() {
    margin-bottom: 0;
}

.row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 1em 0 0;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 30px;
}

/* Posts/Articles
-------------------------------------------------------------- */
/* Page loop styling */
.page article {
    border-bottom: none;
}

.error-title {
    font-size: min(max(2.1154141273rem, 5.041920391vw), 4.209rem);
    font-weight: 100;
    opacity: 0.95;
    border-bottom: none;
}

.error-link {
    text-align: center;
    color: white;
    margin-top: 3em;
    display: inline-block;
    background: white;
    padding: 5px;
    border-radius: 5px;
}

.error-link:hover {
    -webkit-box-shadow: 0 2px 5px 5px rgba(200, 200, 200, 0.8);
    box-shadow: 0 2px 5px 5px rgba(200, 200, 200, 0.8);
    cursor: pointer;
}

/* Allgemeine Seitenelemente */
/* Accordion */
dd {    display: none;  }
.accordionTitle {
    /*margin-top: 1em;*/
    padding: 0.5em 10px;
    color: #fff !important;

    font-weight: normal !important;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.5s ease-in-out;

    background: #fe2a2a none repeat scroll 0 0;
    border-radius: 3px;
    border: none;
}
#scroll-arrow {
    opacity: 0;
}

/* Animierte Objekte (Startseite)
/* ------------------------------------- */
#homelogo {
    position: absolute;
    left: 50%;
    top: 2vh;
    z-index: 10;
}

.home-logoimg {
    display: inline;
    width: 260px;
    height: auto;
}

#home-slogan {
    font-size: 1em;
    /*margin-top:0.5em;*/
}

/* ACF Elements
   ========================================================================== */
/* Stil für den flexiblen Container */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.post-flex-item {
    width: 100%;
    min-width: 100%;
    flex: 1;
    box-sizing: border-box;
    margin-bottom: 1.5em;
}

.flex-container .post-flex-item:last-child {
    margin-bottom: 0em;
}

/* 2-1 / 1-2 Bild-Textholder */
/* ------------------------------------ */
.flexholder {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
    gap: 2em;
}

.flex-column {
    flex-basis: 100%;
    max-width: 100%;
}

.flex-item,
.flex-item-2 {
    flex-basis: 100%;
    margin: 0 20px 1em;
}

.textbox-1 .titleholder h1,
.textbox-2 .titleholder h1,
.textbox-2 .titleholder h2 {
    background-position: 0 1.06em;
    background-size: 100%;
    background-repeat: repeat-x;
    padding-bottom: 0.5em;
    display: inline;
}

.columns p:last-child {
    margin-bottom: 0;
}

#primary {
    flex: 1 0 auto;
    z-index: 5;
    margin-top: 900px;
    padding: 160px 25px 3em;
}

.impressum {
    margin-top: 0px !important;
}

/* Open Street Map */
/* ------------------------------------ */
.leaflet-marker-icon {
    box-shadow: none !important;
}


/* STARTSEITE
   ========================================================================== */

.home .main-fluid {
    margin: 61vh auto 1vh;
}

#startMen {
    display: table;
    z-index: 4;
}

.menu-mask {
    position: absolute;
    bottom: 0;
}

/* Preloader */
#preloader {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(150% at 50% 50%);
    transition: none;
    overflow: hidden;
    pointer-events: none;   /* wichtig damit keine Klicks blockiert werden nach dem Ausblenden */
}

.spinner-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.circle {
    fill: none;
    stroke-width: 2;
}

.preloader-text {
    color: white;
    margin-top: 7.5vh;
    opacity: 1;
    scale: 0.75;
}

#masthead {
    z-index: 8;
    max-width: 1236px;
    margin: 0 auto;
}

.indextop {
    z-index: 2;
    position: relative;
    /*margin-top: 42vh;*/
}


/* Tabelle -------------------------------------------------------------- */
/* Zentrierung von Tabellen und Containern */
table.center,
.centerdiv,
.full-width-container {
    margin-left: auto;
    margin-right: auto;
}

.centerdiv,
.full-width-container {
    max-width: 920px;
}

.kurseintrag {
    margin-bottom:2em;
}

.lehrerinfo {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0 0;
}

.lehrer-card {
    width: 33%;
    width: 100%;
    display:flex;
    /*text-align: center;*/
    /*justify-content: space-between;*/
    gap:2em;
    flex-wrap: wrap;
    justify-content: space-around;
}

.lehrer-bild {
    width: 33%;
    height:auto;
    
    width: 175px;
    height: 175px;
    /*margin: 0 auto;*/
    overflow: hidden;
    border-radius: 50%;
}

.lehrer-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lehrer-text {
    /*margin-top: 0.5rem;*/
    font-size: 0.95rem;
    width:100%;

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




/* Kurstabellen-Design */
.rwd-table,
.specials-table {
    margin: 1em 0;
    
    /*min-width: 100%;*/

    border: none;
    border-radius: .4em;

    /* Hintergrund mit Verlauf */
    background: linear-gradient(to bottom, rgba(69, 72, 77, 0.6), rgba(0, 0, 0, 0.6));

    /* Fallbacks für ältere Browser */
    background: -webkit-linear-gradient(top, rgba(69, 72, 77, 0.6), rgba(0, 0, 0, 0.6));
    background: -moz-linear-gradient(top, rgba(69, 72, 77, 0.6), rgba(0, 0, 0, 0.6));
}

.kurs-table {
    max-width: 920px;
}

/* Spaltenbreiten für Kurs-Tabelle */
.kurs-table th:nth-child(1) { width: 20px; }
.kurs-table th:nth-child(2) { width: 110px; }
.kurs-table th:nth-child(3) { width: 225px; }
.kurs-table th:nth-child(4) { width: 83px; }
.kurs-table th:nth-child(5) { width: 115px; }
.kurs-table th:nth-child(6) { width: 90px; }

/* Responsive Table: rwd-table */
.rwd-table th {
    display: none;
    background-color: transparent;
}

.rwd-table td {
    display: block;
    text-align: left;
    margin: .5em 0;
    box-sizing: content-box;
}

.rwd-table td:first-child {
    padding-top: .5em;
}

.rwd-table td:last-child {
    padding-bottom: .5em;
    margin-bottom: 0;
}

.rwd-table td:before {
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 5.5em;
    display: inline-block;
}
.rwd-table tr{
/*border-bottom: 1em solid #ddd;*/
box-shadow: 0 8px 0 #fff;
}

.rwd-table .infocell {
    display: table-cell !important;
    font-weight: 200;
}

/* Allgemeine Tabellenstile (angelehnt an Bootstrap) */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #dddddd;
}

table th {
    background-color: #eee;
}

table th,
table td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border: 1px solid #dddddd;
}



/* Newsletter Anmeldung (Form aus Mailchimp)
-------------------------------------------------------------- */
#NewsletterTitle {
    text-align: center;
}

#mc_embed_signup {
    background: #fff;
    clear: left;
}

#mc_embed_signup .mc-field-group input {
    display: inline !important;
    margin: 1px;
}

.mc-field-group input {
    border: none !important;
    font-size: 1em!important;
}

.mc-field-group input:focus {
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 6px 1px rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
}

.mc-field-group {
    margin-bottom: 10px;
    display: flex;
    gap: 1em;
    flex-direction: column;
}

#mc-embedded-subscribe {
    border-radius: 5px;
    padding: 7px 20px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    color: #efefef;
}

#mc-embedded-subscribe:hover {
    background: #F47600;
    -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.4);
}

#mc_embed_signup {
    background: none;
    padding: 0px 30px 0;
    margin-top: 2em;
    text-align: center;
}

#optionHolder {
    text-align: center;
    color: #ddd;
}

#sexOpt1 {
    margin-right: 10px;
    display: inline-block;
}

#sexOpt2 {
    margin-left: 10px;
    display: inline-block;
}

#NewsletterTitle {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1em;
    font-weight: 400;
}

#NewsletterInfo {
    /*margin-bottom: 1em;*/
    color: #ffdcce;
    font-size: 9px;
    font-size: 0.7em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------
Ende Newsletter Anmeldung */



/* Formulare
  -------------------------------------------------------------- */

/* Fokus-Effekt speziell für Submit/Reset */
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="reset"]:active,
input[type="submit"]:active {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Optional: Farbe beim Fokus auf Eingabefeldern, wenn #101010 statt weiß erwünscht ist */
/*
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    color: #101010 !important;
}
*/

/* Basis Styles für Formulare */
input, select, textarea {
    border: 1px solid #aaa;
    outline: none;
    border-radius: 3px;
    font-size: 14px;
    color: #fff !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="color"],
.uneditable-input,
.mc-field-group input,
textarea,
select {
    max-width: 95%;
    padding: 5px 3px 3px 5px;
    background: rgba(0, 0, 0, 0.2);
}

/* Fokus-Stil */
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(247, 144, 43, 0.8);
    box-shadow: 0px 0px 6px 1px rgba(254, 42, 42, 0.4);
    outline: none;
}

/* Kontaktformularspezifisch */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.mc-field-group input {
    font-size: 1.1em;
    margin-bottom: 0 !important;
    width: 100%;
}

.wpcf7-form input[type="submit"],
#mc-embedded-subscribe {
    background: #fe2a2a !important;
    border-radius: 4px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    transition: all 0.2s ease-in-out;
}

.wpcf7-form input[type="submit"]:hover,
#mc-embedded-subscribe:hover {
    background: #7a0544 !important;
}

/* Zusätzliche Styles */
textarea {
    box-sizing: border-box;
    vertical-align: top;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    outline: none;
}

.wpcf7-form .row,
.wpcf7 .row .span-4 {
    margin: 0 !important;
}

.textarea-div p {
    padding: 0 !important;
}

.radio span {
    font-weight: 600;
    width: 100%;
}

.label-div {
    margin-bottom: 0.5em;
    width: 100%;
}

.label-p {
    margin-bottom: 0;
    margin-bottom: 0.5em;
}

.inputfield {
    margin-bottom: 1.5em;
}

.reqStar {
    color: red;
}

/* Fehleranzeige */
span.wpcf7-not-valid-tip {
    top: 0 !important;
}

div.wpcf7-validation-errors {
    border: 2px solid #f96704 !important;
    background: linear-gradient(to bottom, rgba(69, 72, 77, 0.6), rgba(0, 0, 0, 0.6));
}

.formText, .wpcf7 {
    margin-bottom: 1em;
}
/* Ende Formulare */




/* #Media Queries
================================================== */

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* ===================================================== */
@media only screen and (max-width: 479px) { }
@media only screen and (max-width: 767px) { }

/* smartphones, Android phones, landscape iPhone */
@media (min-width:480px) {
    .content-menu {
        margin: 1em auto 0;
    }
 
    h3, h4, h5, h6 {
        font-weight: 200;
    }

    .introtext {
        font-size: 1.1em;
    }

    footer {
        padding: 0.5em 0 0.25em;
    }

    .column-holder {
        padding: 0 10px;
    }
   

}

/* Tablets und größere Geräte in Hochformat */
/* ===================================================== */
@media only screen and (min-width: 768px) {
    :root {
        --base-font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
    }

    body {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #primary {
        padding: 2em 40px 5em;
    }
    .main-fluid {
        padding: 0;
    }
    .home .main-fluid {
        margin: 81vh auto 4vh;
    }

    .content-box {  padding: 2em;       
        }
    .section-page, .section {   margin: 160px 0 0;
        }
    .columns {      margin-bottom: 3em;
        }
    .row-fluid [class*="span"] {
        margin-bottom: 1em;
    }

    /* VISIBILITY */
    .mobmen,
    .menu-toggle,
    .mobiledd,
    .mobileshow,
    .mobileheader,
    #moblogo,
    #moblogotxt,
    #moblogotxt-home,
    .parallax-background.mobile {
        display: none;
    }
    .mobilehide {
        display: block!important;
    }

    /* LAYOUT
  /* -------------------------------------------------- */
    .row-fluid .span12  {   width: 100%;        }
    .row-fluid .span11  {   width: calc(100% * (11 / 12));  }
    .row-fluid .span10  {   width: calc(100% * (10 / 12));  }
    .row-fluid .span9   {   width: calc(100% * (9 / 12));   }
    .row-fluid .span8   {   width: calc(100% * (8 / 12));   }
    .row-fluid .span7   {   width: calc(100% * (7 / 12));   }
    .row-fluid .span6   {   width: calc(100% * (6 / 12));   }
    .row-fluid .span5   {   width: calc(100% * (5 / 12));   }
    .row-fluid .span4   {   width: calc(100% * (4 / 12));   }
    .row-fluid .span3   {   width: calc(100% * (3 / 12));   }
    .row-fluid .span2   {   width: calc(100% * (2 / 12));   }
    .row-fluid .span1   {   width: calc(100% * (1 / 12));   }

    /* ACF Flex */
    /* ------------------------------------ */
    .post-flex-item {
        min-width: initial;
        margin-bottom: 0;
    }

    .flex-column {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
    }

    .flex-column:first-child {
        margin-left: 0;
    }

    .f1 {
        flex: 1;
        flex-basis: 0;
        max-width: 38%;
        overflow: hidden;
    }

    .f2 {
        flex: 2;
        flex-basis: 0;
    }

    .f3 {
        flex-grow: 3;
    }


    /* Header */
    /* ------------------------------------ */
    header {
        display: block;
    }

    .column-holder {
        padding: 0;
    }

    .column-holder .columns:first-child {
        padding-left: 0;
    }

    .column-holder .columns:last-child {
        padding-right: 0;
    }

    .column-holder, .content-menu, .footer-fluid {
        max-width: 1236px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* Menü
    /* -------------------------------------------------- */
    .pin-spacer {
        z-index: 5 !important;
    }

    .menu {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding-left: 0;
    }

    .logotxt {
        text-align: right;
        margin-top: 0.8em;
        margin-bottom: 0.5em;
    }
    #specialBtn-Bubble {
        margin-left: 2em;
    }

    /* Newsletter */
    .mc-field-group {
        justify-content: center;
        gap: 1em;
        flex-direction: row;
    }

/* Kurse */
.lehrerinfo {
    flex-wrap:nowrap;
    margin: 1rem;
}
.lehrer-text{
    width: 66%;
    
}
.lehrer-text h3{
    text-align: left;
}

.lehrer-card {
       justify-content: space-between;
}


    /* Tabelle */
    .rwd-table td:before {
        display: none;
    }

    .rwd-table th, .rwd-table td {
        display: table-cell;
        padding: .25em .5em;
    }

    .rwd-table tr {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-color: #46627f;
        box-shadow: none;
    }

    .rwd-table th:first-child, .rwd-table td:first-child {
        padding-left: 0;
    }

    .rwd-table th:last-child, .rwd-table td:last-child {
        padding-right: 0;
    }

    .rwd-table th, .rwd-table td {
        padding: 10px 20px !important;
    }

    .rwd-table td:last-child {
        margin-bottom: 0.5em;
    }

    /* Anmeldeformular */
    .label-p {
        margin-top: 1em;
     /*   font-size: 14px;*/
    }

    /* INFO SEITE */
    .lokalimage {margin-right: 1em;}

    /* Newsletter Anmeldung */
    #mc_embed_signup .mc-field-group input {
       max-width: 215px;
    }
   
    .impressum {
        margin-top:150px!important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1023px) { }
/* Tablets und größere Geräte in Querformat */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {}

/* Tablets und größere Geräte in Querformat */
@media only screen and (min-width: 1024px) {
    #homelogo {
        top: 8vh;
    }
}

/* Desktops und größere Geräte */
@media only screen and (min-width: 1280px) {    }
/* Desktops und größere Geräte */
@media only screen and (min-width: 1440px) {}
/*@media only screen and (min-width: 1280px) {*/
@media only screen and (min-width: 1550px) {}
/* Desktops und größere Geräte */
@media only screen and (min-width: 1800px) {}

@media screen and (max-width: 820px) {
    #minilogo-slogan {
        display: none;
    }
}