/* Ute Höfner – Musikgarten. Werte nach dem bisherigen Wix-Layout (980px, zentriert). */
:root {
    --c-bg: #bada55;
    --c-band: #819446;
    --c-text: #605e5e;
    --c-dark: #000;
    --c-red: #8b0000;
    --c-nav: #ccc;
    --c-nav-active: #a0a09f;
    --c-footer: #a0a09f;
    --c-border: #2f2e2e;
    --f-sans: 'Barlow', 'DIN Next', 'Helvetica Neue', Arial, sans-serif;
    --f-serif: 'Libre Caslon Text', 'Adobe Caslon Pro', Georgia, serif;
    --w-container: 980px;
    --gap: 25px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font: 300 17px/1.4 var(--f-sans);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

strong, b { font-weight: 500; }

h1, h2, h3, p, ul, ol { margin: 0; }

.container {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: #fff;
    padding: .5rem 1rem;
}

/* --- Header --------------------------------------------------------------- */

.site-header__top {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 143px;
    padding: 6px 14px 0;
}

.site-logo { flex: 0 0 auto; }
.site-logo img { width: 200px; height: auto; }

.site-headline {
    font: 500 40px/1.2 var(--f-sans);
    color: var(--c-text);
}

/* --- Navigation ----------------------------------------------------------- */

.main-nav { position: relative; z-index: 10; }

.main-nav__toggle { display: none; }

.main-nav__list {
    display: flex;
    list-style: none;
    padding: 0;
    background: var(--c-nav);
}

.main-nav__item {
    position: relative;
    flex: 1 1 auto;
    text-align: center;
}
.main-nav__item + .main-nav__item { border-left: 1px solid rgba(255, 255, 255, .6); }

.main-nav a {
    display: block;
    padding: 0 20px;
    font-size: 16px;
    line-height: 29px;
    text-decoration: none;
    color: var(--c-text);
    white-space: nowrap;
}

.main-nav__item.is-active > a,
.main-nav__item > a:hover,
.main-nav__item > a:focus-visible {
    background: var(--c-nav-active);
    color: #fff;
}

.main-nav__sub {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100%;
    list-style: none;
    padding: 0;
    background: var(--c-nav);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
}
.main-nav__sub li + li { border-top: 1px solid rgba(255, 255, 255, .6); }
.main-nav__sub a:hover,
.main-nav__sub a:focus-visible,
.main-nav__sub .is-active > a {
    background: var(--c-nav-active);
    color: #fff;
}
.main-nav__item:hover > .main-nav__sub,
.main-nav__item:focus-within > .main-nav__sub {
    visibility: visible;
    opacity: 1;
}

/* --- Content areas -------------------------------------------------------- */

main { padding-bottom: 60px; }

.content-area {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--gap);
    padding-top: 13px;
}

.band {
    margin-top: 8px;
    margin-bottom: -60px;
    padding-bottom: 40px;
    min-height: 179px;
    background: var(--c-band);
}
.band .content-area { padding-top: 17px; }
main > .container + .band { margin-top: 40px; }

.ce { flex: 0 0 100%; min-width: 0; }
.ce.w-third { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
.ce.w-half { flex-basis: calc((100% - var(--gap)) / 2); }
.ce.w-twothirds { flex-basis: calc((100% - var(--gap)) / 3 * 2); }

.ce-text, .ce-textpic, .ce-header, .ce-bullets, .ce-uploads,
.ce-form_formframework, .ce-utehoefner_karte { padding-inline: 24px; }

.space-before-extra-small { margin-top: 15px; }
.space-before-small { margin-top: 30px; }
.space-before-medium { margin-top: 60px; }
.space-before-large { margin-top: 100px; }
.space-before-extra-large { margin-top: 150px; }
.space-after-extra-small { margin-bottom: 15px; }
.space-after-small { margin-bottom: 30px; }
.space-after-medium { margin-bottom: 60px; }
.space-after-large { margin-bottom: 100px; }
.space-after-extra-large { margin-bottom: 150px; }

/* --- Typography ----------------------------------------------------------- */

.ce h2 {
    font: 700 27px/1.25 var(--f-serif);
    margin-bottom: .35em;
}
.ce h3 {
    font: 300 21px/1.3 var(--f-sans);
    margin-bottom: .3em;
}
.ce p, .ce ul, .ce ol { margin-bottom: 0; }
.ce ul, .ce ol { padding-left: 2em; }
.ce * + h2, .ce * + h3 { margin-top: .6em; }

.serif { font-family: var(--f-serif) !important; font-weight: 700 !important; }
.sans { font-family: var(--f-sans) !important; font-weight: 300 !important; }
.text-small { font-size: 15px !important; line-height: 1.25 !important; }
.text-medium { font-size: 21px !important; line-height: 1.3 !important; }
.text-large { font-size: 27px !important; line-height: 1.25 !important; }
.text-larger { font-size: 32px !important; line-height: 1.2 !important; }
.text-xlarge { font-size: 40px !important; line-height: 1.2 !important; }
.text-huge { font-size: 72px !important; line-height: 1.2 !important; }
.text-dark { color: var(--c-dark); }
.text-red { color: var(--c-red); }
.text-white { color: #fff; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text with the round e-mail symbol (layout "Mit E-Mail-Symbol") */
.layout-1 p {
    display: flex;
    align-items: center;
    gap: 20px;
}
.layout-1 p::before {
    content: '';
    flex: 0 0 50px;
    height: 50px;
    border-radius: 50%;
    background: #0e2f44 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346b4e6' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E") center / 28px no-repeat;
}

/* --- Images & galleries --------------------------------------------------- */

.ce-gallery { margin: 0; }
.ce-gallery .ce-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}
.ce-gallery[data-ce-columns="2"] .ce-row { gap: 35px; }
.ce-center .ce-row { justify-content: center; }
.ce-left .ce-gallery { padding-left: 14px; }
.ce-gallery .ce-column { flex: 0 0 auto; }
.ce-gallery figure.image { display: table; margin: 0; }
.ce-gallery .image-caption { display: table-caption; caption-side: bottom; }
.image-caption {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.25;
}
.image-caption::first-line {
    font: 700 27px/1.4 var(--f-serif);
}
.ce-gallery a.lightbox { display: block; cursor: zoom-in; }

/* --- Course card ---------------------------------------------------------- */

/* Cards keep their Wix size (258px). "Halbe Breite" = two per row, "Ein Drittel" = three per row. */
.ce.ce-utehoefner_kurs {
    flex: 0 0 277px;
    padding-left: 19px;
    margin-bottom: 23px;
}
.ce.ce-utehoefner_kurs.w-half:nth-child(2n of .ce-utehoefner_kurs.w-half) { margin-right: 200px; }
.kurs {
    max-width: 258px;
    border: 1px solid var(--c-border);
    background: rgba(255, 255, 255, .5);
    padding: 7px 13px 10px;
    min-height: 462px;
}
.kurs--hell { background: rgba(255, 255, 255, .8); }
.kurs p { margin-top: 23.8px; }
.kurs__ort {
    font: 300 40px/56px var(--f-sans) !important;
    margin: 0 0 3px !important;
}

/* --- Home teaser ---------------------------------------------------------- */

.teaser__media a,
.teaser__media { position: relative; display: block; }
.teaser__image { width: 100%; aspect-ratio: 310 / 200; object-fit: cover; }
.teaser__label {
    position: absolute;
    left: 0;
    top: 24px;
    white-space: nowrap;
    padding: 4px 21px 4px 25px;
    background: var(--c-nav-active);
    color: #fff;
    font-size: 22px;
    line-height: 27px;
}
.teaser__title {
    margin-top: 18px !important;
    font: 500 15px/1.2 var(--f-sans) !important;
}
.teaser p { font-size: 15px; line-height: 1.2; }

/* --- Map ------------------------------------------------------------------ */

.karte {
    max-width: 608px;
    aspect-ratio: 608 / 280;
    margin-inline: auto;
    background: #e8eedc;
    display: grid;
    place-items: center;
    text-align: center;
}
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte__consent { padding: 20px; font-size: 15px; }
.karte__button,
.form-navigation button,
.ce-form_formframework [type="submit"] {
    margin: 12px 0;
    border: 0;
    padding: 6px 18px;
    background: var(--c-nav-active);
    color: #fff;
    font: 300 15px var(--f-sans);
    cursor: pointer;
}
.karte__button:hover,
.ce-form_formframework [type="submit"]:hover { background: var(--c-text); }

/* --- Contact form --------------------------------------------------------- */

.ce-form_formframework form > div:first-of-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    font-size: 14px;
}
.ce-form_formframework .form-element { margin-bottom: 6px; }
.ce-form_formframework .form-element-textarea {
    grid-column: 2;
    grid-row: 1 / span 3;
}
.ce-form_formframework .actions,
.ce-form_formframework .form-navigation { grid-column: 1 / -1; text-align: right; }
.ce-form_formframework label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.ce-form_formframework input,
.ce-form_formframework textarea {
    width: 100%;
    border: 1px solid #fff;
    background: #fff;
    padding: 3px 6px;
    color: var(--c-text);
    font: 300 14px var(--f-sans);
}
.ce-form_formframework textarea { height: 100%; min-height: 86px; resize: vertical; }
.ce-form_formframework .error input,
.ce-form_formframework .error textarea { border-color: var(--c-red); }
.ce-form_formframework .help-block,
.ce-form_formframework .error .help-block { color: var(--c-red); font-size: 13px; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    min-height: 74px;
    padding: 18px 24px;
    background: var(--c-footer);
    color: #fff;
    font-size: 14px;
}
.site-footer__copy { flex: 0 0 370px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* --- Lightbox (site.js) --------------------------------------------------- */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .85);
}
.lightbox-overlay img { max-width: 92vw; max-height: 88vh; }
.lightbox-overlay button {
    position: absolute;
    border: 0;
    background: none;
    color: #fff;
    font: 300 44px/1 var(--f-sans);
    padding: 12px 18px;
    cursor: pointer;
}
.lightbox-close { top: 8px; right: 8px; }
.lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); }

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 1000px) {
    .container { padding-inline: 16px; }
    .site-footer { margin-inline: 16px; width: auto; }
}

@media (max-width: 760px) {
    :root { --gap: 16px; }
    .site-header__top { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px 16px 16px; }
    .site-logo img { width: 150px; }
    .site-headline { font-size: 26px; }

    .main-nav__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 0;
        padding: 10px 14px;
        background: var(--c-nav);
        color: var(--c-text);
        font: 300 17px var(--f-sans);
        cursor: pointer;
    }
    .main-nav__icon,
    .main-nav__icon::before,
    .main-nav__icon::after {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
    }
    .main-nav__icon { position: relative; }
    .main-nav__icon::before, .main-nav__icon::after { content: ''; position: absolute; left: 0; }
    .main-nav__icon::before { top: -6px; }
    .main-nav__icon::after { top: 6px; }
    .main-nav__list { display: none; flex-direction: column; }
    .main-nav.is-open .main-nav__list { display: flex; }
    .main-nav__item { text-align: left; }
    .main-nav__item + .main-nav__item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .6); }
    .main-nav a { line-height: 40px; }
    .main-nav__sub { position: static; visibility: visible; opacity: 1; background: #ddd; }
    .main-nav__sub a { padding-left: 36px; }

    .ce.w-third, .ce.w-half, .ce.w-twothirds { flex-basis: 100%; }
    .ce + .ce { margin-top: 24px; }
    .space-before-large, .space-before-extra-large { margin-top: 50px; }
    .ce-text, .ce-textpic, .ce-header, .ce-bullets, .ce-uploads,
    .ce-form_formframework, .ce-utehoefner_karte { padding-inline: 0; }
    .ce-left .ce-gallery { padding-left: 0; }
    .ce.ce-utehoefner_kurs { flex-basis: 100%; margin: 0 0 16px; padding-left: 0; }
    .kurs { min-height: 0; max-width: none; }
    .teaser__label { white-space: normal; }
    .text-huge { font-size: 42px !important; }
    .text-xlarge { font-size: 30px !important; }
    .ce-form_formframework form > div:first-of-type { grid-template-columns: 1fr; }
    .ce-form_formframework .form-element-textarea { grid-column: 1; grid-row: auto; }
    .site-footer { flex-direction: column; gap: 4px; }
    .site-footer__copy { flex-basis: auto; }
}