/*
 arche medica – Entwurf mobiles Template
 Prototyp im Arbeitsordner, nicht auf archemedica.de eingebaut.
 Alles gilt nur unter 744 px Breite. Ab 744 px bleibt das Theme, wie es ist.
*/

/* Die neuen Elemente sind auf Tablet und Desktop unsichtbar */
.mBar,
.mPanel,
.mCrumb {
  display: none;
}

@media (max-width: 743px) {

  /* Farbe von Kopfleiste und Menüknöpfen: Oliv, auf Seiten eines Angebotsbereichs dessen Farbe
     wie bei den Knöpfen des Themes. So steht auf den Heilpraktiker-Seiten kein Grün. */
  html {
    --mFarbe: #576325;
    --mLinie: #5e6a29;
  }
  html:has(.contentContainer .category-heilpraktiker) {
    --mFarbe: #9f2914;
    --mLinie: #9f2914;
  }
  html:has(.contentContainer .category-pruefung) {
    --mFarbe: #be560f;
    --mLinie: #be560f;
  }
  html:has(.contentContainer .category-naturheilkunde) {
    --mFarbe: #c47900;
    --mLinie: #c47900;
  }
  html:has(.contentContainer .category-seminare) {
    --mFarbe: #5b7712;
    --mLinie: #5b7712;
  }

  /* Grundgerüst ++++++++++++++++++++++++++++++ */
  html {
    scroll-padding-top: 92px;
  }
  html.mOpen,
  html.mOpen body {
    overflow: hidden;
  }
  .container {
    width: auto;
    margin: 0 16px;
  }

  /* Alter Kopf und gestapeltes Hauptmenü entfallen auf dem Handy */
  .header,
  .content .mainNavigation {
    display: none;
  }

  /* Kopfleiste ++++++++++++++++++++++++++++++ */
  .mBar {
    display: flex;
    align-items: center;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 900;
    height: 78px;
    padding: 0 8px 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--mLinie);
  }
  .mBar-logo {
    margin-right: auto;
    line-height: 0;
  }
  .mBar-logo img {
    display: block;
    width: auto;
    height: 60px;
  }
  .mBar-tel,
  .mBar-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    font-size: 26px;
    color: var(--mFarbe);
    text-decoration: none;
  }
  /* Menü- und Schließen-Knopf: Symbol mit kleinem Wort darunter, ohne Kasten, in der Farbe von Lupe und Telefon */
  .mBar-menu,
  .mPanel-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 52px;
    height: 52px;
    margin-left: 2px;
    padding: 0;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    color: var(--mFarbe);
    background: transparent;
    border: 0;
  }
  .mBar-menu .fa,
  .mPanel-close .fa {
    font-size: 26px;
    line-height: 1;
  }
  .mBar-search {
    font-size: 24px;
  }
  /* Das Lupen-Zeichen der Schriftart sitzt 2 px zu tief */
  .mBar-search .fa {
    position: relative;
    top: -2px;
  }

  /* Kein Aufblitzen und kein blauer Rahmen beim Antippen; bei Bedienung mit der Tastatur
     ein Rahmen in der Farbe der Seite */
  .mBar a,
  .mPanel a,
  .mPanel button {
    -webkit-tap-highlight-color: transparent;
  }
  .mBar a:focus,
  .mPanel a:focus,
  .mPanel button:focus {
    outline: none;
  }
  .mBar a:focus-visible,
  .mPanel a:focus-visible,
  .mPanel button:focus-visible {
    outline: 2px solid var(--mFarbe);
    outline-offset: -2px;
  }

  /* Menüfläche ++++++++++++++++++++++++++++++ */
  .mPanel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  /* :target öffnet das Menü auch ohne JavaScript */
  html:not(.mJs) .mPanel:target,
  html.mOpen .mPanel {
    visibility: visible;
    opacity: 1;
    transition: opacity .18s ease;
  }
  .mPanel-head {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    height: 78px;
    padding: 0 8px 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--mLinie);
  }
  .mPanel-head .mBar-logo img {
    height: 60px;
  }

  /* Suche: dasselbe WordPress-Suchformular wie im Kopf des Themes (.searchBox) */
  .mSearch {
    color: var(--mFarbe);
    float: none;
    width: auto;
    margin: 16px;
  }
  .mSearch input[type=search] {
    height: 48px;
    padding: 2px 56px 2px 14px;
    border: 1px solid var(--mFarbe);
    border-radius: 0;
  }
  .mSearch input[type=submit],
  .mSearch input[type=submit]:hover {
    top: 0;
    width: 52px;
    height: 48px;
  }
  .mSearch:before {
    top: 12px;
    right: 4px;
  }

  .mNav ul {
    list-style: none;
  }
  .mNav li {
    display: flex;
    flex-wrap: wrap;
  }
  .mNav li > a {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 6px 16px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    color: inherit;
    text-decoration: none;
  }
  .mNav li > .sub-menu {
    flex: 0 0 100%;
  }
  .mNav .sub-menu a {
    min-height: 46px;
    padding-left: 30px;
    font-size: 18px;
  }
  .mNav .sub-menu .sub-menu a {
    padding-left: 46px;
    font-size: 17px;
  }
  .mNav li.current-menu-item > a {
    box-shadow: inset 5px 0 0 currentColor;
  }

  /* Auf- und Zuklappen der Unterpunkte (Knopf setzt mobil.js ein) */
  .mSub {
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: inherit;
    border-left: 1px solid rgba(255, 255, 255, .8);
    cursor: pointer;
  }
  .mSub .fa {
    transition: transform .18s ease;
  }
  .mSub[aria-expanded=true] .fa {
    transform: rotate(180deg);
  }
  .mNav.is-js li.menu-item-has-children > .sub-menu {
    display: none;
  }
  .mNav.is-js li.menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  /* Farben der Bereiche wie im Seitenmenü des Themes */
  .mNav > ul > li {
    margin-bottom: 3px;
    color: #576325;
    background: #e2e4cb;
  }
  .mNav > ul > li > .sub-menu {
    background: #f1f2e5;
  }
  .mNav > ul > li > .sub-menu .sub-menu {
    background: #f8f8f2;
  }
  .mNav > ul > li.heilpraktiker {
    color: #9f2914;
    background: #e8c4b0;
  }
  .mNav > ul > li.heilpraktiker > .sub-menu {
    background: #f4e2d8;
  }
  .mNav > ul > li.heilpraktiker > .sub-menu .sub-menu {
    background: #f9f0eb;
  }
  .mNav > ul > li.pruefung {
    color: #be560f;
    background: #f1d3ba;
  }
  .mNav > ul > li.pruefung > .sub-menu {
    background: #f8e9dd;
  }
  .mNav > ul > li.pruefung > .sub-menu .sub-menu {
    background: #fcf4ee;
  }
  .mNav > ul > li.naturheilkunde {
    color: #c47900;
    background: #eed8bc;
  }
  .mNav > ul > li.naturheilkunde > .sub-menu {
    background: #f7ecde;
  }
  .mNav > ul > li.naturheilkunde > .sub-menu .sub-menu {
    background: #fbf5ee;
  }
  .mNav > ul > li.seminare {
    color: #5b7712;
    background: #d1d9bd;
  }
  .mNav > ul > li.seminare > .sub-menu {
    background: #e8ecde;
  }
  .mNav > ul > li.seminare > .sub-menu .sub-menu {
    background: #f4f6ef;
  }

  .mContact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 24px 16px 8px 16px;
  }
  .mContact a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 10px;
    font-size: 17px;
    color: #fff;
    text-decoration: none;
    background: var(--mFarbe);
  }
  /* Meta-Menü des Themes: Home und Kontakt stehen schon an anderer Stelle */
  .mMeta {
    display: flex;
    flex-wrap: wrap;
    margin: 0 16px 40px 16px;
    list-style: none;
  }
  .mMeta li:first-child,
  .mMeta li:last-child {
    display: none;
  }
  .mMeta a {
    display: block;
    padding: 14px 22px 14px 0;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: var(--mFarbe);
    text-decoration: none;
  }

  /* Bühne und Wegzeile ++++++++++++++++++++++++++++++ */
  .stage {
    margin-bottom: 0;
  }
  .stage .container {
    margin: 0;
  }
  /* Kopfbild höher: mittiger Ausschnitt im Verhältnis 2:1 statt des schmalen Streifens (2,7:1).
     Die Bilder liegen in 1000 × 370 px vor; höher als 2:1 würden sie am Handy sichtbar weich. */
  .stage .headerImg img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
  }
  /* Ausnahmen, je nach Dateiname des Kopfbilds: Ausschnitt nach links oder rechts rücken,
     wo sonst eine Person am Rand angeschnitten würde */
  .stage .headerImg img[src*="Kontakt_Banner"],
  .stage .headerImg img[src*="header_muendliche"],
  .stage .headerImg img[src*="header_schuelerbereich"],
  .stage .headerImg img[src$="Heilpraktikerausbildung_Berlin.jpg"] {
    object-position: left center;
  }
  .stage .headerImg img[src*="ressourcenorientierte_Traumatherapie"],
  .stage .headerImg img[src*="Heilpraktikerausbildung_Berlin_Vollzeit"],
  .stage .headerImg img[src*="Heilpraktikerausbildungen_arche_medica"] {
    object-position: right center;
  }
  /* Gruppenfoto und Grafiken mit Schrift bleiben ganz zu sehen */
  .stage .headerImg img[src*="IMG_4333"],
  .stage .headerImg img[src*="header_coaching"],
  .stage .headerImg img[src*="header_knobelaufgaben"] {
    aspect-ratio: auto;
    object-fit: fill;
  }
  .mCrumb {
    display: block;
    overflow-x: auto;
    padding: 0 16px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    scrollbar-width: none;
    color: #576325;
    background: #f1f2e5;
  }
  .mCrumb ol {
    display: flex;
    list-style: none;
  }
  .mCrumb li + li:before {
    content: "\f105";
    font-family: FontAwesome;
    font-weight: 400;
    padding: 0 10px;
    opacity: .7;
  }
  .mCrumb a {
    display: inline-block;
    padding: 14px 0;
    text-decoration: none;
  }
  .mCrumb.heilpraktiker {
    color: #9f2914;
    background: #f4e2d8;
  }
  .mCrumb.pruefung {
    color: #be560f;
    background: #f8e9dd;
  }
  .mCrumb.naturheilkunde {
    color: #c47900;
    background: #f7ecde;
  }
  .mCrumb.seminare {
    color: #5b7712;
    background: #e8ecde;
  }

  /* Inhalt ++++++++++++++++++++++++++++++ */
  .content {
    padding-top: 24px;
  }
  h1 {
    font-size: 30px;
    line-height: 1.15;
    margin-bottom: 16px;
    /* Hauptüberschrift nicht mitten im Wort trennen (das Theme trennt h1 bis h3 unter 744 px automatisch);
       ein Wort, das allein nicht in die Zeile passt, bricht trotzdem um */
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
  }

  /* Tabellen mit zwei Spalten: Zellen untereinander. Feste Breiten und Höhen aus dem Editor
     (style="width: 537px; height: 125px") gelten dabei nicht, sonst überlagern sich die Zeilen. */
  .contentContainer table:not(:has(tr > :nth-child(3))),
  .contentContainer table:not(:has(tr > :nth-child(3))) > :is(thead, tbody, tfoot),
  .contentContainer table:not(:has(tr > :nth-child(3))) > :is(thead, tbody, tfoot) > tr,
  .contentContainer table:not(:has(tr > :nth-child(3))) > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: none;
  }
  .contentContainer table:not(:has(tr > :nth-child(3))) > colgroup,
  .contentContainer table:not(:has(tr > :nth-child(3))) > :is(thead, tbody, tfoot) > tr > td:empty {
    display: none;
  }
  .contentContainer table:not(:has(tr > :nth-child(3))) > :is(thead, tbody, tfoot) > tr > td {
    border-left: none;
  }
  /* Tabellen ab drei Spalten: in sich seitlich wischbar, die Seite bleibt stehen */
  .contentContainer table:has(tr > :nth-child(3)) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Lange Knöpfe dürfen umbrechen */
  .contentContainer .button,
  .contentContainer a.button,
  .contentContainer a.button-contact,
  .contentContainer a.button-anmelden {
    max-width: 100%;
    white-space: normal;
  }

  /* Audio-Player: WordPress gibt 300 px Mindestbreite vor, in eingerückten Blöcken stünde er über */
  .contentContainer audio,
  .contentContainer video {
    min-width: 0;
    max-width: 100%;
  }

  /* Eingebettete Videos behalten ihr Seitenverhältnis */
  .contentContainer iframe[src*="youtube"],
  .contentContainer iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Startseite: fünf Symbole in zwei Spalten */
  .teaserBar,
  .infoBar {
    padding: 36px 0;
  }
  .teaserArea:has(> .columns5) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 12px;
  }
  .teaserArea .columns5 {
    float: none;
    width: auto;
    margin: 0;
  }

  /* Fuß: nur die Bereichsüberschriften. Alle Unterpunkte stehen auch im Menü (abgeglichen am 16.10.2026);
     „Vertrag kündigen“ und „Vertrag widerrufen“ stehen zusätzlich in der Zeile ganz unten (Menü „Fußzeile unten“).
     Bevor hier neue Punkte verschwinden: prüfen, dass jedes Ziel im Menü oder in der Zeile ganz unten steht. */
  .footer {
    padding: 36px 0 24px 0;
  }
  .footer .widgetArea {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
  }
  /* Adresse ans Ende, damit die Bereichslinks zusammenstehen */
  .footer .widgetArea .widget.widget_text {
    order: 10;
  }
  .footer .widget h3 {
    margin: 16px 0 6px 0;
  }
  .footer .widgetArea .widget {
    float: none;
    width: auto;
    margin: 0 0 4px 0;
  }
  .footer .widget.widget_nav_menu li.menu-item-has-children > .sub-menu {
    display: none;
  }
  .footer .widget a {
    display: inline-block;
    padding: 9px 0;
  }
  .footer .widget.widget_text {
    margin: 20px 0;
  }
}

/* Schmale Handys (320 px): Logo und Knöpfe etwas kleiner, damit Lupe, Telefon und Menü nebeneinander passen */
@media (max-width: 359px) {
  .mBar {
    gap: 0;
    padding-left: 12px;
  }
  .mBar-logo img,
  .mPanel-head .mBar-logo img {
    height: 50px;
  }
  .mBar-tel,
  .mBar-search {
    width: 36px;
  }
  .mBar-menu,
  .mPanel-close {
    width: 46px;
    margin-left: 0;
  }
}

/* Angemeldete Nutzer: Die WordPress-Leiste steht ab 601 px fest über der Seite */
@media (min-width: 601px) and (max-width: 743px) {
  .admin-bar .mBar {
    top: 46px;
  }
}

@media (max-width: 743px) and (prefers-reduced-motion: reduce) {
  .mPanel,
  html:not(.mJs) .mPanel:target,
  html.mOpen .mPanel,
  .mSub .fa {
    transition: none;
  }
}