/* Fonts */

/* sedan regular - latin */
@font-face {
  font-family: 'Sedan';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../fonts/Sedan-Regular.ttf') format('truetype');
}

/* sedan italic - latin */
@font-face {
  font-family: 'Sedan Italic';
  font-style: italic;
  font-weight: 400;
  src: local(''),
    url('../fonts/Sedan-Italic.ttf') format('truetype');
}

/* lato sans 400 - latin */
@font-face {
  font-family: 'Lato Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../fonts/Lato-Regular.ttf') format('truetype');
}

/* Variablen */
:root {
  --methodem-green: #bdbf4d;
  --methodem-blue: #029bde;
  --methodem-yellow: #f3b502;
  --methodem-orange: #f39f01;
  --methodem-grey-lightest: #f7fafc;
  --methodem-white: #ffffff;
  --methodem-black: #171c1e;

  --font-sans: 'Lato Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-serif: 'Sedan', Georgia, 'Times New Roman', Times, serif;
  --font-serif-italic: 'Sedan Italic', Georgia, 'Times New Roman', Times, serif;

  --border-radius-small: 0.2rem;
}

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

html {
  height: 100%;
}

body {
  background-color: var(--methodem-grey-lightest);
  color: var(--methodem-black);
  font-family: var(--font-sans);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  line-height: 1.8;
  margin: 0;
  overflow-y: scroll;
  height: 100%;
}

@media (min-width:1401px) {
body {
  background-color: var(--methodem-yellow);
}
}

.wrapper {
  background-color: var(--methodem-grey-lightest);
  border-left: var(--methodem-white) 4px solid;
  border-right: var(--methodem-white) 4px solid;
  margin: 0 auto;
  max-width: 1400px;
}

/* Links */

.no-forwarding .more { display: none; }

/* Typo */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.375;
  margin-top: 0;
  margin-bottom: 1.25rem;
  /*letter-spacing: 0.05rem;*/
  /*text-transform: uppercase;*/
}

h1 small {
  display: block;
  font-size: 2rem;
  line-height: 1.5;
}

@media (max-width:699px) {
h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1.25rem;
}
}

h2 {
  font-size: 1.75rem;
  line-height: 1.3125;
  margin-top: 0;
  margin-bottom: 0.6875rem;
}

h3 {
  font-size: 2rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

@media (max-width:699px) {
h3 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
}

h4 {
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1rem;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.3125;
  margin-top: 0;
  margin-bottom: 1.6875rem;
}

h6 {
  font-size: 1.125rem;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1rem;
}

@media (max-width:699px) {
h4, h5, h6 {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1rem;
}
}

p {
  margin: 0 0 0.75rem 0;
}

.textbreite {
  max-width: 800px;
}

.zweispaltig p {
  column-count: 2;
  column-gap: 1.5rem;
}
strong {
  font-weight: 700;
}

em {
  font-family: var(--font-serif-italic);
  font-style: italic;
}

.ce_divider hr {
  margin: 2rem 0 3.5rem 0;
}

/* Links */

a {
  color: var(--methodem-blue);
}

a:visited {
  color: var(--methodem-black);
}

a:hover {
  color: var(--methodem-green);
}

a:active {
  color: var(--methodem-orange);
}

/* Bilder und Videos */

.flexible, .flexible img, .content-image img, figure img {
  height: auto;
  max-width: 100%;
}

.content-image {
  margin: 3rem 0;
}

.content-image img, .content-gallery img {
  border-radius: var(--border-radius-small);
}

.caption {
  font-style: normal;
  padding-top: 0.25rem;
}

/* Galerie */

.content-gallery {
  margin: 3rem 0;
}

.content-gallery ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.content-gallery li {
  margin: 0;
}

.content-gallery figure {
  margin: 0;
}

.content-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top: 30px;
}
 
.video-wrapper iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[data-splash-screen] {
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0 0 0.5rem 0;
  font-size: 0.9rem;
  border-radius: 0.25rem;
}

[data-splash-screen]:hover {
  background: rgba(0, 0, 0, 0.8);
}

[data-splash-screen] span {
  display: block;
  margin-top: 0.5rem;
}

/* Buttons */

input.button, .button a {
  color: var(--methodem-white);
  background-color: var(--methodem-blue);
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0;
  letter-spacing: 0.03125rem;
  line-height: 1.42857143;
  padding: 0.375rem 0.75rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  user-select: none;
}

input.button.active.focus {
  outline: 5px auto;
  outline-offset: -2px;
}

input.button:focus,
input.button.focus,
.button a:focus {
  color: var(--methodem-white);
  background-color: var(--methodem-green);
}
input.button:hover,
.button a:hover {
  color: var(--methodem-white);
  background-color: var(--methodem-green);
}
input.button:active,
input.button.active,
.button a:active {
  color: var(--methodem-white);
  background-color: var(--methodem-blue);
}
input.button:active:hover,
input.button.active:hover,
input.button:active.focus,
input.button.active.focus {
  color: var(--methodem-white);
  background-color: var(--methodem-green);
}
input.button:active,
input.button.active {
  background-image: none;
}

/* Header */

.header {
  background-color: var(--methodem-grey-lightest);
}

/* Hintergrundbilder */

.header-image {
  --header-image: url(../images/header-images/header-image-marianneyoga.jpg);
  --header-overlay: rgb(243 181 2 / 45%);
  background-image: linear-gradient(var(--header-overlay), var(--header-overlay)), var(--header-image);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--methodem-yellow);
  height: 200px;
}

@media (min-width:600px) {
.header-image {
  height: 350px;
}
}

.index .header-image {
  --header-image: url(../images/header-images/header-image-start.jpg);
  background-position: left top;
  height: 580px;
}

.projekte .header-image {
  --header-image: url(../images/header-images/der-koerper-im-fluss-2014.jpg);
  background-position: left bottom;
}

.unterricht .header-image {
  --header-image: url(../images/header-images/header-image-unterricht.jpg);
  background-position: right top;
}

.yoga .header-image {
  --header-image: url(../images/header-images/Panorama-Pfalz.jpg);
  background-position: right top;
}

.tanz .header-image {
  --header-image: url(../images/header-images/marianne-tanzt-solo-erhobene-Arme-1440px_web.jpg);
  background-position: right top;
}

.yota .header-image {
  --header-image: url(../images/header-images/yota-gruppe-tanzt-1440px_web.jpg);
  background-position: right top;
}

.vita .header-image {
  --header-image: url(../images/header-images/header-vita-web.jpg);
  background-position: right top;
}

.id-2019 .header-image, .id-2016 .header-image, .id-2014 .header-image, .id-2013 .header-image, .id-2011 .header-image, .id-2010 .header-image, .id-2009 .header-image {
  --header-image: url(../images/header-images/header-presse-web.jpg);
  background-position: right top;
}

/* Logo */

.header-image img {
  margin-top: 2rem;
  width: 30rem;
}

@media (max-width:1199px) {
.header-image img {
  width: 25rem;
}
}

@media (max-width:899px) {
.header-image img {
  width: 20rem;
}
}

@media (max-width:899px) {
.header-image img {
  display: none;
}
}

.top-logo {
  display: none;
}

@media (max-width:899px) {
.top-logo {
  display: block;
}

.top-logo img {
  margin: 2rem 0;
  width: 16.875rem;
}
}

@media (max-width:390px) {
.top-logo img {
  width: 14.375rem;
}
}

@media (max-width:350px) {
.top-logo img {
  margin: 2rem auto;
}
}

/* Neue Header-Bild-Lösung */

.header-image-responsive {
  position: relative;
  overflow: hidden;
  background-color: var(--methodem-yellow); /* Platzhalterfarbe, bis Bild geladen ist */
}
.header-image-responsive::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(243 181 2 / 45%); /* dein bisheriger Overlay-Ton */
  z-index: 1;
  display: block !important;
}
.header-image-responsive .content-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top; /* Ersatz für background-position */
  z-index: 0;
}
.header-image-responsive .container {
  position: relative;
  z-index: 2;
}

/* Höhen weiterhin pro Seite */
.index .header-image-responsive { height: 580px; }
.unterricht .header-image-responsive { 
  height: 200px; 
  object-position: right top; /* falls abweichend, sonst weglassen */
}
@media (min-width: 600px) {
  .header-image-responsive { height: 350px; }
}

/* Main */

.main {
  background-color: var(--methodem-grey-lightest);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 2;
  padding-top: 3rem;
  padding-bottom: 6rem;
}

.wordcloud {
  color: var(--methodem-white);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  margin-top: 2rem;
  text-align: right;
}

@media (max-width:599px) {
.wordcloud {
  color: var(--methodem-white);
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 16rem;
  text-align: center;
}

.wordcloud p {
  margin-bottom: 0.875rem;
}
}

.main-content {
  padding-right: 1.7rem;
}

@media (max-width:599px) {
.main-content {
  padding-right: 15px;
}
}

.main-content p {
  line-height: 1.875;
}

blockquote p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.5;
}

.beendet p {
  background-color: var(--methodem-orange);
  border-radius: var(--border-radius-small);
  padding: 0.1rem 1rem;
  width: max-content;
}

/* Grid Themenboxen, z.B. für Unterricht */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

@media (max-width: 900px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 699px) {
.grid { grid-template-columns: 1fr; }
}

.themebox {
  background-color: var(--methodem-white);
  border: 1px solid var(--methodem-black);
  border-radius: var(--border-radius-small);
  padding: 1rem;
  height: 100%;
}

.themebox h1, .themebox h2, .themebox h3, .themebox h4, .themebox h5, .themebox h6 {
  font-size: 1.5rem;
}

.themebox.tanz {
  border-top: 7px solid;
  border-top-color: var(--methodem-orange);
}
.themebox.yoga {
  border-top: 7px solid;
  border-top-color: var(--methodem-blue);
}
.themebox.yota {
  border-top: 7px solid;
  border-top-color: var(--methodem-green);
}

/* Sonstige Boxen */

.blockbox {
  border: 1px solid var(--methodem-black);
  border-radius: var(--border-radius-small);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* Akkordeon */

.content-accordion {
	border-bottom: none;
}

.text-akkordeon .handorgel__header__button {
  padding: 0.5rem 0.6rem;
  border-top: none;
  border-radius: var(--border-radius-small);
  background-color: var(--methodem-green);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.text-akkordeon .handorgel__header__button::before {
  content: "+";
  font-size: 1.25rem;
  text-decoration: none;
  margin-right: 0.3em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.text-akkordeon .handorgel__header__button::after {
  content: "mehr Infos";
  font-size: 1.25rem;
  font-weight: 400;
  vertical-align: middle;
}

.text-akkordeon .handorgel__header--open .handorgel__header__button::before,
.text-akkordeon .handorgel__header--opened .handorgel__header__button::before {
  content: "-";
}

.handorgel__content {
  border: none;
  background-color: var(--methodem-grey-lightest);
}

/* Aktuell (Nachrichten-Archiv) */

.layout_latest {
  background-color: var(--methodem-white);
  border: 1px solid var(--methodem-black);
  border-radius: var(--border-radius-small);
  margin-bottom: 2.5rem;
  padding: 1rem;
}

.info {
  font-size: 0.875em;
  font-style: normal;
}

/* Aside */

.aside {
  padding-left: 1.5rem;
}

@media (max-width:599px) {
.aside {
  padding-left: 0.9375rem;
  padding-top: 2rem;
}
}

.aside .mod_article {
  border-bottom: 1px dotted var(--methodem-black);
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}

.adress {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: 2rem;
}

@media (min-width:600px) {
.index .adress {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 2rem;
}
}

.adress p {
  margin: 0 0 0.5rem 0;
}

@media (max-width:599px) {
.adress {
  border-top: 1px dotted var(--methodem-black);
  border-bottom: 1px dotted var(--methodem-black);
  padding-top: 2rem;
  text-align: center;
}

}
/* Footer */

.footer {
  background-color: var(--methodem-grey-lightest);
  border-top: 1px dotted var(--methodem-black);
  padding-top: 2rem;
  padding-bottom: 6rem;
}

.footer-nav-container {
  text-align: right;
  text-transform: uppercase;
}

.footer-nav-container p {
  margin-bottom: 0.875rem;
}

.footer-nav-container p, .footer-nav-container nav {
  display: inline-block;
}

@media (max-width:600px) {
.footer-nav-container p, .footer-nav-container nav {
  display: block;
}
}

@media (max-width:599px) {

.footer-nav-container { text-align: center; }
.footer-logo img {
  margin: 0 auto 2rem auto;
  width: 15.625rem;
}
}

/* Formulare */

form {
  margin-top: 2rem;
}

.ce_form {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
}

.widget {
  margin-bottom: 1.5rem;
}

.ce_form label, .ce_form input {
  display: block;
}

.ce_form label {
  font-size: 0.9375rem;
  font-style: normal;
}

.ce_form input[type="text"],
.ce_form input[type="email"],
.ce_form textarea {
  appearance: none;
  border-radius: var(--border-radius-small);
  background-clip: padding-box;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.5;
  width: 100%;
  padding: 0.625rem 0.625rem 0.5625rem 0.625rem;
  box-shadow: inset 0 1px 1px var(--methodem-black);
  background: var(--methodem-grey-lightest);
  border: 1px solid var(--methodem-black);
  text-align: left;
}

/* Navigation */

nav li {
  float: left;
  text-transform: uppercase;
}

nav a, nav a:visited {
  color: var(--methodem-black);
  text-decoration: none;
}

nav a:hover, nav:active {
  color: var(--methodem-green);
  text-decoration: none;
}

.main-nav {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.main-nav {
  font-size: 1.25rem;
}

.main-nav ul {
  margin: 0;
  padding: 0;
}

.main-nav li {
  display: inline;
  margin: 0;
  padding: 0;
}

.main-nav li:after {
  content: "/";
  font-weight: 400;
  padding-right: 0.875rem;
  padding-left: 0.875rem;
}

.main-nav li.last:after {
  content: "";
  padding-right: 0;
}

.main-nav li.active {
  font-weight: 700;
}

@media (max-width:899px) {
.sub-nav {
  display: none;
}
}

.sub-nav {
  margin-bottom: 4rem;
}

.sub-nav li {
  border-bottom: 1px dotted var(--methodem-black);
  float: none;
  font-size: 1.125rem;
  letter-spacing: 0.015625rem;
  line-height: 1.375;
  padding: 1rem 0;
  text-transform: none;
}

.sub-nav li.first {
  padding-top: 0;
}

.sub-nav li.last {
  border-bottom: 0;
}

.sub-nav li.active, .sub-nav span.active {
  font-weight: 700;
}

.sub-nav .level_2 {
  margin-left: 1rem;
  margin-top: 1rem;
}

.sub-nav a {
  display: block;
  font-weight: 400;
}

.footer-nav li {
  padding-left: 1rem;
}

.footer-nav li:before {
  content: "/";
  padding-right: 0.875rem;
}

@media (max-width:599px) {
.footer-nav li {
  float: none;
  padding-left: 0rem;
}
.footer-nav li:before, .footer-nav li.first:before {
  content: "";
  padding-right: 0rem;
}
}

@media (min-width:600px) and (max-width:824px) {
.footer-nav li.first:before {
  content: "";
  padding-right: 1.375rem;
}
}

.footer-nav li.active, .footer-nav span.active {
  font-weight: 700;
}

.mod_mobile_menu {
  position: absolute;
  top: 2.75rem;
  right: 0.9375rem;
}

@media (max-width:350px) {
.mod_mobile_menu {
  position: relative;
  left: 80%;
  top: -1rem;
}
}

.mobile_menu {
  cursor: pointer;
  display: block;
  z-index: 5000;
}

.mobile_menu .inner {
  height: 100%;
  overflow-y: auto;
}

.mobile_menu_trigger { cursor: pointer; }

.mobile_menu_trigger .nav-icon {
  cursor: pointer;
  height: 45px;
  position: relative;
  width: 50px;
}

.mobile_menu_trigger .nav-icon span {
  background: var(--methodem-black);
  border-radius: 2px;
  height: 2px;
  left: 0;
  opacity: 1;
  position: absolute;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  width: 50px;
}

.mobile_menu_trigger .nav-icon span:nth-child(1) { top: 0px; }

.mobile_menu_trigger .nav-icon span:nth-child(2) { top: 15px; }

.mobile_menu_trigger .nav-icon span:nth-child(3) { top: 30px; }

.mobile_menu_trigger.active .nav-icon span:nth-child(1) {
  background: var(--methodem-black);
  top: 10px;
  transform: rotate(225deg);
}

.mobile_menu_trigger.active .nav-icon span:nth-child(2) { display: none; }

.mobile_menu_trigger.active .nav-icon span:nth-child(3) {
  background: var(--methodem-black);
  top: 10px;
  transform: rotate(-225deg);
}

.mobile_menu_overlay .background { background: rgba(255,255,255,0.6) !important; }

.mobile_menu .inner {
  background: var(--methodem-grey-lightest);
  height: 100%;
  padding-top: 3rem;
  overflow-y: auto;
}

.mobile_menu nav {
  font-size: 1.25rem;
}

.mobile_menu ul {
  text-align: center;
  text-transform: uppercase;
}

.mobile_menu .level_2 li {
  border-bottom: 0;
  text-transform: none;
}

.mobile_menu li {
  border-bottom: 1px dotted var(--methodem-black);
  float: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mobile_menu .mobile-nav-start li.first { border-top: 1px dotted var(--methodem-black); }

.mobile_menu a, .mobile_menu a:visited, .mobile_menu a:hover, .mobile_menu a:active {
  display: block;
  text-decoration: none;
}

.mobile_menu li.active a, .mobile_menu li.active span {
  display: block;
  font-weight: 700;
}

.mobile_menu li.active .level_2 a, .mobile_menu li.active .level_2 span {
  font-weight: 400;
}

@media (max-width:899px) {
.main-nav-container {
  display: none;
}
}

/* Z Hilfsklassen */

/* Automatically clear elements for standards-compliant browsers */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Trigger has-layout for IE compatibility */
.clearfix {
  zoom: 1;
}

.block:before,
.block:after {
  content: "";
  display: table;
}

.block:after {
  clear: both;
}

.invisible {
  border: 0 none;
  clip: rect(0px, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

/* Cookiebar */

#cookiebar {
  background-color: var(--methodem-grey-lightest);
  border-top: 1px solid var(--methodem-white);
  color: var(--methodem-black);
}
 
#cookiebar button {
  background-color: var(--methodem-blue);
}
 
#cookiebar a {
  color: var(--methodem-blue);
}