/*
Theme Name: mitsarah
Theme URI: https://mitsarah.de
Author: Sarah Schmidt
Description: Eigenes Theme für mitsarah.de. Texte stehen in den Vorlagen, Bilder kommen aus der Mediathek.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mitsarah
*/

/* ---------- Grundwerte ---------- */

:root {
    --gruen: #2b4743;
    --gruen-tief: #213835;
    --rot: #8c3839;
    --rose: #da7073;
    --gold: #dda83f;
    --sand: #efe4d3;
    --creme: #f7f1e8;
    --weiss: #fffdf9;

    --schrift-titel: "Epilogue", "Segoe UI", system-ui, sans-serif;
    --schrift-text: "Inter", "Segoe UI", system-ui, sans-serif;

    --rand: clamp(1.25rem, 5vw, 2.5rem);
    --luft: clamp(3.5rem, 9vw, 7rem);
    --rund: 1.5rem;
    --schatten: 0 1px 2px rgba(43, 71, 67, .06), 0 12px 32px -12px rgba(43, 71, 67, .22);
    --kurve: cubic-bezier(.2, .7, .2, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--creme);
    color: var(--gruen);
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
    margin: 0 0 .6em;
    font-family: var(--schrift-titel);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); letter-spacing: -.01em; }
h3 small { font-family: var(--schrift-text); font-size: .7em; font-weight: 500; letter-spacing: 0; opacity: .75; }

p { margin: 0 0 1.1em; text-wrap: pretty; }

a { color: var(--rot); text-underline-offset: .2em; }
a:hover { color: var(--gruen); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: .25rem; }

.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.sprung {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .75rem 1rem; background: var(--gruen); color: var(--weiss); border-radius: .5rem;
}
.sprung:focus { top: 1rem; color: var(--weiss); }

.breite { width: min(100% - 2 * var(--rand), 72rem); margin-inline: auto; }
.breite--schmal { width: min(100% - 2 * var(--rand), 46rem); }
.mitte { text-align: center; }

/* ---------- Kopf und Menü ---------- */

.kopf {
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow .3s;
}
/* Der Schleier liegt auf einem eigenen Element, damit das mobile Menü den ganzen Bildschirm füllen kann. */
.kopf::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(247, 241, 232, .86);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.kopf.ist-gerollt { box-shadow: 0 1px 0 rgba(43, 71, 67, .08), 0 10px 30px -18px rgba(43, 71, 67, .35); }

.kopf__innen {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 4.5rem; transition: min-height .3s var(--kurve);
}
.kopf.ist-gerollt .kopf__innen { min-height: 3.75rem; }

.marke {
    font-family: var(--schrift-titel); font-weight: 600; font-size: 1.5rem;
    letter-spacing: -.04em; text-transform: lowercase; text-decoration: none; color: var(--gruen);
}
.marke span { color: var(--rot); margin-left: .12em; }
.marke--gross { font-size: clamp(3rem, 12vw, 6.5rem); line-height: 1; color: var(--creme); }
.marke--gross span { color: var(--gold); }
.marke--gross:hover { color: var(--creme); }

.menue ul { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); margin: 0; padding: 0; list-style: none; }
.menue a {
    position: relative; display: block; padding: .5rem 0;
    color: var(--gruen); font-weight: 500; text-decoration: none;
}
.menue a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px;
    background: var(--rot); transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--kurve);
}
.menue a:hover::after, .menue a[aria-current="page"]::after { transform: scaleX(1); }

.menue-knopf { display: none; }

@media (max-width: 52rem) {
    .menue-knopf {
        position: relative; z-index: 60; display: grid; place-items: center;
        width: 3rem; height: 3rem; margin-right: -.6rem;
        background: none; border: 0; color: var(--gruen); cursor: pointer;
    }
    .menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after {
        display: block; width: 1.6rem; height: 2px; border-radius: 2px; background: currentColor;
        transition: transform .35s var(--kurve), background-color .2s;
    }
    .menue-knopf__striche { position: relative; }
    .menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
    .menue-knopf__striche::before { transform: translateY(-.45rem); }
    .menue-knopf__striche::after { transform: translateY(.45rem); }
    .menue-knopf[aria-expanded="true"] .menue-knopf__striche { background: transparent; }
    .menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { transform: rotate(45deg); }
    .menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { transform: rotate(-45deg); }

    /* Ohne JavaScript bleibt das Menü als einfache Zeile sichtbar. */
    html:not(.js) .menue-knopf { display: none; }
    html:not(.js) .kopf__innen { flex-wrap: wrap; padding-block: .5rem; }
    html:not(.js) .menue ul { flex-wrap: wrap; gap: .25rem 1rem; }

    .js .menue {
        position: fixed; inset: 0; z-index: 55;
        display: grid; align-content: center;
        padding: 5rem var(--rand) 2rem;
        height: 100vh; height: 100dvh;
        background: var(--creme);
        visibility: hidden; opacity: 0; transform: translateY(-1rem);
        transition: opacity .3s, transform .4s var(--kurve), visibility 0s .4s;
    }
    .js .menue.ist-offen { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    .js .menue ul { flex-direction: column; gap: .25rem; }
    .js .menue a {
        padding: .7rem 0; font-family: var(--schrift-titel); font-size: clamp(1.8rem, 8vw, 2.4rem);
        font-weight: 600; letter-spacing: -.02em;
        opacity: 0; transform: translateY(1rem);
        transition: opacity .4s, transform .5s var(--kurve);
    }
    .js .menue a::after { display: none; }
    .js .menue a[aria-current="page"] { color: var(--rot); }
    .js .menue.ist-offen a { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .05s); }
    body.menue-offen { overflow: hidden; }
}

/* ---------- Knöpfe ---------- */

.knopf {
    display: inline-flex; align-items: center; gap: .6em;
    min-height: 3rem; padding: .8rem 1.5rem;
    background: var(--gruen); color: var(--weiss);
    border-radius: 99rem; font-weight: 600; text-decoration: none; line-height: 1.2;
    box-shadow: 0 8px 20px -10px rgba(43, 71, 67, .6);
    transition: transform .3s var(--kurve), box-shadow .3s, background-color .3s;
}
.knopf::after { content: "→"; transition: transform .3s var(--kurve); }
.knopf:hover { background: var(--rot); color: var(--weiss); transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(140, 56, 57, .7); }
.knopf:hover::after { transform: translateX(4px); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf--klein { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .95rem; }
.knopf--gold { background: var(--gold); color: var(--gruen-tief); box-shadow: none; }
.knopf--gold:hover { background: var(--weiss); color: var(--gruen-tief); box-shadow: none; }

/* ---------- Einstieg (oberster Abschnitt) ---------- */

.held { position: relative; padding: clamp(2rem, 6vw, 4.5rem) 0 var(--luft); }
.held__raster { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.held__text p { max-width: 36rem; }
.held__text > p:last-child { margin-bottom: 0; }

.held__bild { position: relative; justify-self: center; width: min(100%, 30rem); }
.held__bild img {
    position: relative; width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%;
    box-shadow: var(--schatten);
    animation: form 16s ease-in-out infinite alternate;
}
.held__bild--hoch img { aspect-ratio: 4 / 5; }

.fleck { position: absolute; border-radius: 50%; filter: blur(2px); }
.fleck--gold { width: 42%; aspect-ratio: 1; right: -8%; top: -6%; background: var(--gold); opacity: .55; animation: schweben 9s ease-in-out infinite alternate; }
.fleck--rose { width: 30%; aspect-ratio: 1; left: -7%; bottom: 2%; background: var(--rose); opacity: .45; animation: schweben 11s ease-in-out infinite alternate-reverse; }

@keyframes schweben { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-10px, 16px, 0) scale(1.08); } }
@keyframes form {
    from { border-radius: 58% 42% 47% 53% / 46% 52% 48% 54%; }
    to { border-radius: 44% 56% 55% 45% / 55% 44% 56% 45%; }
}

/* Handy: Bild zuerst und kompakt, damit man nicht erst durch den ganzen Text scrollen muss. */
@media (max-width: 51.99rem) {
    .held { padding-top: 1.25rem; }
    .held__raster { gap: 1.75rem; }
    .held__bild { order: -1; width: min(76%, 19rem); }
    .held__bild--hoch img { aspect-ratio: 1; object-position: center 30%; }
}

@media (min-width: 52rem) {
    .held__raster { grid-template-columns: 1.1fr .9fr; }
    .held--start .held__raster { min-height: min(70vh, 40rem); }
    .held__bild { justify-self: end; }
}

.held--text { padding-bottom: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.held--text p { margin-inline: auto; max-width: 40rem; }

.marker {
    display: inline-block; margin-bottom: 1.1rem; padding: .35rem .9rem;
    background: var(--sand); color: var(--rot); border-radius: 99rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.marker--gold { background: var(--gold); color: var(--gruen-tief); }

.eckdaten { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.eckdaten li { padding: .45rem .95rem; background: var(--weiss); border: 1px solid rgba(43, 71, 67, .12); border-radius: 99rem; font-size: .95rem; font-weight: 500; }

/* ---------- Abschnitte ---------- */

.abschnitt { padding: var(--luft) 0; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--creme { background: var(--creme); }
.abschnitt--gruen { background: var(--gruen); color: var(--creme); }
.abschnitt--eng { padding-top: clamp(2rem, 5vw, 3.5rem); }
.abschnitt--oben { padding-top: clamp(2rem, 6vw, 4rem); }
.abschnitt + .abschnitt:not(.abschnitt--sand):not(.abschnitt--gruen):not(.abschnitt--creme) { padding-top: var(--luft); }

.abschnitt__kopf { max-width: 44rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
.abschnitt__kopf > :last-child { margin-bottom: 0; }

.ruf h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.ruf p { opacity: .9; }
.abschnitt--gruen a:not(.knopf) { color: var(--gold); }
.abschnitt--gruen a:not(.knopf):hover { color: var(--creme); }

/* Karten: Angebote */

.karten { display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .karten { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }

.karte {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten);
}
.karte__bild { overflow: hidden; aspect-ratio: 4 / 3; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--kurve); }
.karte__text { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 1.5rem; }
.karte__text p { flex: 1; }

@media (hover: hover) {
    .karte { transition: transform .45s var(--kurve), box-shadow .45s; }
    .karte:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(43, 71, 67, .06), 0 28px 48px -20px rgba(43, 71, 67, .4); }
    .karte:hover .karte__bild img { transform: scale(1.06); }
}

/* Fakten: Kursdetails */

.fakten { display: grid; gap: 1rem; margin: 0 0 2.5rem; }
@media (min-width: 36rem) { .fakten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .fakten { grid-template-columns: repeat(4, 1fr); } }

.fakt { padding: 1.5rem; background: var(--weiss); border-radius: var(--rund); border-top: 4px solid var(--gold); box-shadow: var(--schatten); }
.fakt:nth-child(2) { border-top-color: var(--rose); }
.fakt:nth-child(3) { border-top-color: var(--rot); }
.fakt:nth-child(4) { border-top-color: var(--gruen); }
.fakt dt { margin-bottom: .4rem; font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 600; }
.fakt dd { margin: 0; }

/* Urkunden */

.urkunden { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.urkunden figure { margin: 0; padding: .6rem; background: var(--weiss); border-radius: 1rem; box-shadow: var(--schatten); }
.urkunden img { width: 100%; border-radius: .5rem; }

/* Zwei Spalten, Kästen, Listen */

.zwei { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .zwei { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); } }

.kasten { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); }
.kasten > :last-child { margin-bottom: 0; }

.haken { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.haken li { position: relative; padding: .55rem 0 .55rem 2.2rem; border-bottom: 1px solid rgba(43, 71, 67, .1); }
.haken li:last-child { border-bottom: 0; }
.haken li::before {
    content: ""; position: absolute; left: 0; top: .78rem; width: 1.35rem; height: 1.35rem;
    border-radius: 50%; background: var(--gold);
}
.haken li::after {
    content: ""; position: absolute; left: .45rem; top: 1.08rem; width: .45rem; height: .25rem;
    border-left: 2px solid var(--gruen-tief); border-bottom: 2px solid var(--gruen-tief); transform: rotate(-45deg);
}

/* Bilder im Text */

.eindruck { margin: 0; overflow: hidden; border-radius: var(--rund); box-shadow: var(--schatten); }
.eindruck img { width: 100%; max-height: 34rem; object-fit: cover; }

.geschichte { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.geschichte__bild { margin: 0; overflow: hidden; border-radius: var(--rund); box-shadow: var(--schatten); }
.geschichte__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 52rem) { .geschichte { grid-template-columns: .85fr 1.15fr; } }

/* Stimmen: Zitat-Blöcke aus der WordPress-Seite „stimmen“ */

.stimmen { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .stimmen { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.stimmen blockquote {
    position: relative; margin: 0; padding: 2.75rem 1.5rem 1.5rem;
    background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten);
}
.stimmen blockquote::before {
    content: "„"; position: absolute; right: 1.25rem; top: -.35rem;
    font-family: var(--schrift-titel); font-size: 4.5rem; line-height: 1; color: var(--rose);
}
.stimmen blockquote p:last-of-type { margin-bottom: 1rem; }
.stimmen cite { display: block; font-style: normal; font-weight: 600; color: var(--rot); }
.stimmen img { width: 3.5rem; height: 3.5rem; margin-bottom: .75rem; border-radius: 50%; object-fit: cover; }
.stimmen figure { margin: 0; }

/* Fragen und Antworten */

.faq__eintrag { border-bottom: 1px solid rgba(43, 71, 67, .16); }
.faq__frage { margin: 0; font-size: 1.1rem; letter-spacing: 0; }
.faq__frage button {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: 3.5rem; padding: 1.1rem 0;
    background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.faq__zeichen { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sand); transition: background-color .3s, transform .4s var(--kurve); }
.faq__zeichen::before, .faq__zeichen::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; margin: -1px 0 0 -.4rem;
    background: var(--gruen); transition: transform .4s var(--kurve);
}
.faq__zeichen::after { transform: rotate(90deg); }
.faq__frage button[aria-expanded="true"] .faq__zeichen { background: var(--gold); transform: rotate(180deg); }
.faq__frage button[aria-expanded="true"] .faq__zeichen::after { transform: rotate(0); }

.faq__antwort p { margin: 0; padding: 0 3rem 1.25rem 0; }
.js .faq__antwort { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--kurve), visibility 0s .45s; }
.js .faq__antwort > div { overflow: hidden; }
.js .faq__antwort.ist-offen { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }

/* Formulare */

.formular { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); }
.formular .wpforms-container { margin: 0; }
.formular input[type="text"], .formular input[type="email"], .formular textarea {
    width: 100%; max-width: 100% !important; min-height: 3rem; padding: .7rem .9rem;
    background: var(--creme); border: 1px solid rgba(43, 71, 67, .25); border-radius: .75rem;
    color: var(--gruen); font: inherit; transition: border-color .2s, box-shadow .2s;
}
.formular input:focus, .formular textarea:focus { outline: 0; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(221, 168, 63, .45); }
.formular button[type="submit"] {
    min-height: 3rem; padding: .8rem 1.6rem !important; height: auto !important;
    background: var(--gruen) !important; color: var(--weiss) !important; border: 0 !important; border-radius: 99rem !important;
    font: inherit !important; font-weight: 600 !important; cursor: pointer;
    transition: transform .3s var(--kurve), background-color .3s !important;
}
.formular button[type="submit"]:hover { background: var(--rot) !important; transform: translateY(-2px); }

.anmeldung { display: block; border: 0; border-radius: var(--rund); background: var(--weiss); box-shadow: var(--schatten); }
.hinweis { padding: 1rem 1.25rem; background: var(--weiss); border-left: 4px solid var(--rot); border-radius: .5rem; }

/* Fließtext: Impressum, Datenschutz */

.fliesstext h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); overflow-wrap: anywhere; }
.fliesstext h2 { margin-top: 1.8em; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.fliesstext h3 { margin-top: 1.5em; }
.fliesstext { overflow-wrap: break-word; }

/* ---------- Fuß ---------- */

.fuss { padding: clamp(3rem, 8vw, 5rem) 0 2rem; background: var(--gruen-tief); color: var(--creme); }
.fuss__innen { display: grid; gap: 1.5rem; }
.fuss__links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.fuss a { color: var(--creme); }
.fuss__links a { display: inline-block; padding: .4rem 0; }
.fuss__links a:hover { color: var(--gold); }
.fuss__recht { margin: 0; padding-top: 1.5rem; border-top: 1px solid rgba(247, 241, 232, .18); font-size: .9rem; opacity: .75; }

/* ---------- Einblenden beim Scrollen ----------
   Nur mit JavaScript; ohne JavaScript ist alles sofort sichtbar. */

.js .zeig {
    opacity: 0; transform: translate3d(0, 1.75rem, 0);
    transition: opacity .8s var(--kurve), transform .9s var(--kurve);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.js .zeig--bild { transform: scale(.94); transition-duration: 1s, 1.2s; }
.js .zeig.ist-da { opacity: 1; transform: none; }

/* Häkchen zeichnen sich ein, sobald der Listenpunkt erscheint. */
.js .haken li::before { transform: scale(0); transition: transform .5s var(--kurve) calc(var(--i, 0) * 90ms + .15s); }
.js .haken li.ist-da::before { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .js .zeig, .js .zeig--bild { opacity: 1; transform: none; }
    .js .haken li::before { transform: none; }
}