/* =============================================================
   Studio Kamélie – pages.css
   Startseite: Struktur und Maße aus dem Wix-CSS abgeleitet,
   als responsives Grid/Flex statt absoluter Offsets.
   ============================================================= */

/* =============================================================
   1 – HERO   (weiß, 234 px, Icon 145 + Schriftzug 600)
   ============================================================= */
.start-hero {
    background: var(--clr-white);
    padding-block: 38px 24px;
}

.start-hero__inner {
    display: flex;
    align-items: flex-start;
    gap: 82px;
    padding-left: 18px;
}

.start-hero__icon {
    width: 145px;
    height: 145px;
    flex: 0 0 145px;
    margin-top: 8px;
}

.start-hero__text {
    flex: 0 1 600px;
    min-width: 0;
}

.start-hero__schriftzug { width: 600px; max-width: 100%; height: auto; }

/* Tagline: Montserrat 22 px / 39,6 px, lila, rechtsbündig */
.start-hero__tagline {
    font-family: var(--ff-ui);
    font-size: var(--fz-lead);
    font-weight: 400;
    line-height: 1.8;
    color: var(--clr-lila);
    text-align: right;
}

/* =============================================================
   2 – WILLKOMMEN
   BG-Bild bei 40 % Deckkraft, darüber ein weißer Block.
   Block 1028 breit = 980 Inhalt + 24 Padding je Seite.
   Innen: Headline zentriert, darunter Bild 490 | Text 490.
   ============================================================= */
.start-willkommen {
    position: relative;
    padding-block: 63px 43px;
    isolation: isolate;
}

/* Wix setzt die Deckkraft auf dem Bild selbst (0.4), nicht als Overlay */
.start-willkommen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--section-bg);
    background-size: cover;
    background-position: center;
    opacity: .4;
}

.start-willkommen__box {
    width: min(calc(var(--content-w) + 48px), 100% - 2 * var(--gutter));
    margin-inline: auto;
    background: var(--clr-white);
    padding: 22px 24px 24px;
}

/* Headline: Agathe Ledden 72 px, line-height normal, zentriert.
   Im Original ein Link auf /atelier – ohne Unterstreichung. */
.start-willkommen__box h1 {
    text-align: center;
    line-height: normal;
    margin-bottom: 0;
}

.start-willkommen__box h1 a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.start-willkommen__box h1 a:hover {
    color: var(--clr-lila-mid);
    text-decoration: none;
}

.start-willkommen__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

/* Bild im Original 490 × 410, beschnitten (Wix: cover) */
.start-willkommen__img-wrap img {
    width: 100%;
    aspect-ratio: 490 / 410;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* =============================================================
   2b – DIASHOW in der Willkommen-Box
   Gleiche Fläche wie das feste Bild (490 : 410), die Bilder
   liegen übereinander und werden nur überblendet – die Box
   ändert ihre Größe also nie. Keine Bedienung: kein Klick,
   kein Vergrößern, keine Pfeile. Sichtbar ist allein der
   Zähler n/x, der beim Überfahren einblendet.
   Taktung steckt in diashow.js (data-intervall).

   Die Werte des Zähler-Balkens sind in der Vorlage nur im
   Hover-Zustand sichtbar und darum noch nicht gemessen.
   ============================================================= */
.diashow {
    /* NICHT BELEGT – aus dem Screenshot geschätzt, Vorlage zeigt
       den Balken nur bei Mouseover. Nach der Messung genügt es,
       diese vier Zeilen anzufassen. */
    --dia-info-bg:   rgba(255, 255, 255, .72);
    --dia-info-pad:  6px 14px;
    --dia-info-fz:   14px;
    --dia-info-clr:  var(--clr-text);

    --dia-blende:    .9s;       /* Überblenddauer */

    position: relative;
    width: 100%;
    aspect-ratio: 490 / 410;
    overflow: hidden;
}

.start-willkommen__img-wrap .diashow__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity var(--dia-blende) ease-in-out;
}

.start-willkommen__img-wrap .diashow__bild.is-aktiv { opacity: 1; }

/* Zähler: unten über die volle Breite, Text rechtsbündig */
.diashow__info {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--dia-info-pad);
    background: var(--dia-info-bg);
    color: var(--dia-info-clr);
    font-family: var(--ff-ui);
    font-size: var(--dia-info-fz);
    line-height: 1.2;
    text-align: right;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.diashow:hover .diashow__info,
.diashow:focus-within .diashow__info { opacity: 1; }

/* Textspalte mit 27 px Einzug (Wix: left 27 in der 490er-Spalte) */
.start-willkommen__text { padding-left: 27px; }

.start-willkommen__text p {
    font-family: var(--ff-ui);
    font-size: var(--fz-lead);
    line-height: var(--lh-lead);
    font-weight: 400;
    color: var(--clr-text-muted);     /* #404040, nicht schwarz */
}

.start-willkommen__text a { text-decoration: underline; }

/* =============================================================
   3 – TEASER   (lila-hell 80 %, 3 × 2, runde Bilder 121 px)
   Titel: Montserrat 22 px, lila
   Text + Link: Montserrat 16 px / 1.8em, schwarz
   (alle drei aus den inneren Spans der Vorlage belegt)
   ============================================================= */
.start-teaser {
    background: var(--clr-veil);
    padding-block: 74px 45px;
}

.start-teaser__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px var(--sp-xl);
}

.start-teaser__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--clr-text);
    text-decoration: none;
}

.start-teaser__item:hover { text-decoration: none; }
.start-teaser__item:hover h2 { color: var(--clr-lila-mid); }

.start-teaser__round-img {
    width: 121px;
    height: 121px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 22px;
}

.start-teaser__round-img img { width: 100%; height: 100%; object-fit: cover; }

.start-teaser__item h2 {
    font-family: var(--ff-ui);
    font-size: clamp(1.0rem, 0.85rem + 0.5vw, 1.375rem);   /* → 22px */
    font-weight: 400;
    line-height: normal;
    color: var(--clr-lila);
    max-width: 240px;
    margin-bottom: 16px;
    transition: color .2s;
}

.start-teaser__item p {
    font-family: var(--ff-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--clr-text);
    max-width: 226px;
}

/* Folgt direkt auf den Text, kein zusätzlicher Abstand */
.start-teaser__link {
    font-family: var(--ff-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--clr-text);
    text-decoration: underline;
}

/* =============================================================
   4 – KÜNSTLERIN
   Full-bleed-Strip mit 60 px Padding rundum, Spalten 579 : 281.
   Der Textcontainer ist 548 px breit und in der Spalte zentriert.
   Aus dem DOM: alles Montserrat 400 – 46 / 22 / 16 px.
   ============================================================= */
.start-kuenstlerin {
    background: var(--clr-veil);
    padding: 60px;
}

.start-kuenstlerin__inner {
    display: grid;
    grid-template-columns: minmax(0, 579fr) minmax(0, 281fr);
    align-items: stretch;
}

.start-kuenstlerin__box {
    background: var(--clr-white);
    min-height: 552px;
    padding-block: 56px 24px;
}

/* Textspalte 548 px, zentriert */
.start-kuenstlerin__box > * {
    width: min(548px, 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.start-kuenstlerin__box h2 {
    font-family: var(--ff-ui);
    font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.875rem);   /* → 46px */
    font-weight: 400;
    line-height: normal;
    color: var(--clr-lila);
    margin-bottom: 8px;
}

.start-kuenstlerin__name {
    font-family: var(--ff-ui);
    font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);   /* → 22px */
    font-weight: 400;
    line-height: normal;
    color: var(--clr-text);
    margin-bottom: 23px;
}

.start-kuenstlerin__box p:not(.start-kuenstlerin__name) {
    font-family: var(--ff-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;                                    /* → 28,8px */
    color: var(--clr-text);
}

.start-kuenstlerin__box a { text-decoration: underline; }

/* Foto füllt die Spalte, ohne deren Höhe zu bestimmen –
   sonst diktiert das hochformatige Bild die Zeilenhöhe. */
.start-kuenstlerin__foto {
    position: relative;
    overflow: hidden;
    background: var(--clr-lila-lt);
    min-height: 552px;
}

.start-kuenstlerin__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =============================================================
   5 – INSTAGRAM   (weiß, Absatz 22 px + Icon-Link)
   Reiner Verweis auf den Kanal. Link ist im Original schwarz,
   nicht lila. Die Bildergalerie steht in Sektion 5b.
   ============================================================= */
.start-instagram {
    background: var(--clr-white);
    padding-block: 59px 61px;
    text-align: center;
}

/* Absatz und Link: Montserrat 22 px / 39,6 px, schwarz */
.start-instagram p {
    font-family: var(--ff-ui);
    font-size: var(--fz-lead);
    font-weight: 400;
    line-height: 1.8;
    color: var(--clr-text);
    margin-bottom: 22px;
}

.start-instagram__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ff-ui);
    font-size: clamp(1.0rem, 0.85rem + 0.5vw, 1.375rem);   /* → 22px */
    font-weight: 400;
    line-height: 1.8;
    color: var(--clr-text);
    text-decoration: underline;
}

.start-instagram__link:hover { color: var(--clr-lila); }
.start-instagram__link img { width: 39px; height: 39px; flex: 0 0 39px; }

/* =============================================================
   5b – STARTSEITEN-GALERIE
   Eigene Sektion: die Bilder gehören nicht zum Instagram-Block
   darüber, der nur auf den Kanal verweist.
   Streifen wie auf /atelier (Sektion 9), im Original 1216 breit.
   Kachelhöhe 464 – in der Vorlage rendern alle Bilder auf h_464.
   Abstand zum Instagram-Link 70 = 61 unten + 9 hier; dadurch
   bleibt der Seitenschluss korrekt, wenn die Galerie entfällt.
   Der Automatiklauf steckt in galerie.js (data-autoplay).
   ============================================================= */
.start-galerie {
    background: var(--clr-white);
    padding-block: 9px 61px;
}

/* =============================================================
   6 – SEITENTITEL   (Unterseiten)
   Vorlage: eigene weiße Full-bleed-Zone zwischen Header und
   erster Sektion. Höhe 133 = 54 + Zeile 59,8 + 19.
   h1: Montserrat 46 / 59,8 (1.3), w400, letter-spacing 3,22 px
   (= 0.07em), #620674, zentriert.
   Bewusst eigene Klasse: das globale h1 bleibt Agathe Ledden 72
   für die Willkommen-Headline der Startseite.
   ============================================================= */
.page-title {
    background: var(--clr-white);
    padding-block: 54px 19px;
}

.page-title h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.07em;
    color: var(--clr-lila);
    text-align: center;
}

/* =============================================================
   7 – ATELIER: INTRO
   Full-bleed Band in --clr-veil. Bild links, weißer Kasten rechts,
   überlappend. Vorlage bei 980 Content-Breite:
     Band   558 hoch  (43 oben / 50 unten)
     Bild   702 × 345, links bündig, Bandkante + 0
     Kasten 614 breit, rechts bündig, Bandkante + 118
     Überlappung 337
   Als Prozent der Content-Spalte, damit das Verhältnis beim
   Schrumpfen erhalten bleibt.
   ============================================================= */
.atelier-intro {
    background: var(--clr-veil);
    padding-block: 43px 50px;
}

.atelier-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* Beide Kinder in dieselbe Grid-Zelle → Überlappung ohne position */
.atelier-intro__img,
.atelier-intro__box {
    grid-area: 1 / 1;
}

.atelier-intro__img {
    width: 71.633%;                 /* 702 / 980 */
    justify-self: start;
}

.atelier-intro__img img {
    width: 100%;
    aspect-ratio: 702 / 345;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.atelier-intro__box {
    width: 62.653%;                 /* 614 / 980 */
    justify-self: end;
    margin-top: 12.041%;            /* 118 / 980 – %-Margin bezieht sich auf die Breite */
    background: var(--clr-white);
    padding: 21px 19px 29px;
    z-index: 1;
}

.atelier-intro__box h2 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.07em;
    color: var(--clr-lila-mid);     /* #b183ba, nicht #620674 */
    text-align: center;
    margin-bottom: 31px;
}

.atelier-intro__box p {
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;               /* → 28,8 px */
    color: var(--clr-text-muted);   /* #404040 */
}

/* =============================================================
   8 – ATELIER: VIDEO
   Vorlage: 979 × 547 in der Content-Spalte, 70 px Abstand oben
   und unten, nativ 1920 × 1080, ohne Ton, ohne Loop.
   ============================================================= */
.atelier-video {
    padding-block: 70px;
}

.atelier-video video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background: var(--clr-text);
    object-fit: contain;
}

/* =============================================================
   9 – ATELIER: GALERIE
   Waagerechter Streifen, feste Bildhöhe, Breite nach Seitenverhältnis.
   Pfeile scrollen um 90 % der sichtbaren Breite, Anschlag statt Loop.
   Vorlage: Video endet 1411, Galerie-Band ab 1481, erste Kachel 1491
   → 70 px Abstand kommen vom Video, hier nur die restlichen 10 px.
   ============================================================= */
.atelier-galerie {
    padding-block: 10px 70px;
}

.galerie {
    --galerie-h: 380px;             /* Kachelhöhe /atelier */
    position: relative;
    width: min(1216px, 100% - 2 * var(--gutter));
    margin-inline: auto;
}

/* Startseite: Kachelhöhe 464, aus der Vorlage gemessen. */
.galerie--start { --galerie-h: 464px; }

.galerie__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.galerie__track::-webkit-scrollbar { display: none; }

.galerie__item {
    flex: 0 0 auto;
    height: var(--galerie-h);
    aspect-ratio: var(--ar, 3 / 2);
    padding: 0;
    border: 0;
    background: var(--clr-lila-lt);
    cursor: zoom-in;
    scroll-snap-align: start;
}

.galerie__item img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

.galerie__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--clr-white);
    color: var(--clr-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    cursor: pointer;
    z-index: 2;
    transition: background .2s, color .2s;
}

.galerie__nav:hover { background: var(--clr-lila); color: var(--clr-white); }
.galerie__nav[hidden] { display: none; }
.galerie__nav svg { width: 22px; height: 22px; }
.galerie__nav--prev { left: -12px; }
.galerie__nav--next { right: -12px; }

/* --- Lightbox ------------------------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 70px;
}

.lightbox[hidden] { display: none; }

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-out;
}

.lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--clr-text);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.lightbox__btn:hover { background: var(--clr-lila-lt); color: var(--clr-lila); }
.lightbox__btn svg { width: 24px; height: 24px; }

.lightbox__full  { top: 20px; left: 20px; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev  { top: 50%; left: 20px;  transform: translateY(-50%); }
.lightbox__next  { top: 50%; right: 20px; transform: translateY(-50%); }

/* =============================================================
   10 – ATELIER: KURSE-TEASER
   Drei Karten, Kreisbild ragt 70 px über die obere Kante.
   Karte 320 breit, Innenabstand 24, Kreis 140.
   Bewusst ohne Termine – die stehen in einer eigenen Sektion.
   ============================================================= */
.kurse-teaser {
    padding-block: 70px;
}

.kurse-teaser__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-top: 70px;
}

.kurs-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px 32px;
    border: 1px solid var(--clr-border);
    color: var(--clr-text);
    text-decoration: none;
    transition: border-color .2s;
}

.kurs-karte:hover { border-color: var(--clr-lila-mid); text-decoration: none; }
.kurs-karte:hover .kurs-karte__titel { color: var(--clr-lila); }

/* Kreis überlappt die Kartenkante nach oben */
.kurs-karte__bild {
    width: 140px;
    height: 140px;
    margin-top: -70px;
    margin-bottom: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--clr-lila-lt);
    flex-shrink: 0;
}

.kurs-karte__bild img { width: 100%; height: 100%; object-fit: cover; }

.kurs-karte__titel {
    font-family: var(--ff-ui);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--clr-text);
    transition: color .2s;
}

/* Schlusszeile steht unter beiden Blöcken. Der Abstand richtet
   sich danach, was direkt darüber liegt – ohne Termine rückt sie
   automatisch an die Karten heran. */
.kurse-teaser__link {
    font-family: var(--ff-ui);
    font-size: 16px;
    line-height: 1.8;
    color: var(--clr-text);
}

.kurse-teaser__grid + .kurse-teaser__link { margin-top: 40px; }
.naechste-termine + .kurse-teaser__link   { margin-top: 28px; }

.kurse-teaser__link a { text-decoration: underline; }

/* =============================================================
   11 – ATELIER: NÄCHSTE TERMINE
   Bewusst getrennt vom Teaser: kurze chronologische Liste über
   alle Kurse. Verschwindet komplett, wenn nichts ansteht.
   ============================================================= */
.naechste-termine {
    margin-top: 48px;
}

.naechste-termine h2 {
    font-family: var(--ff-ui);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    color: var(--clr-lila);
    margin-bottom: var(--sp-md);
}

.termin-liste { list-style: none; }

.termin-zeile + .termin-zeile { border-top: 1px solid var(--clr-border); }

.termin-zeile a {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 100px) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-md);
    padding-block: 14px;
    font-family: var(--ff-ui);
    font-size: 16px;
    line-height: 1.8;
    color: var(--clr-text);
    text-decoration: none;
    transition: color .2s;
}

.termin-zeile a:hover { color: var(--clr-lila); text-decoration: none; }
.termin-zeile__zeit { color: var(--clr-text-muted); }
.termin-zeile__kurs { text-decoration: underline; }

/* =============================================================
   12 – KÜNSTLERIN: INTRO   (Seite /kuenstlerin)
   Weiße Fläche zwischen Seitentitel (endet y236) und Footer
   (beginnt y1211). Vorlage bei 1350 Seitenbreite, Content 980
   auf x185–1165 – alle Werte gemessen:
     Sektion     51 oben / 38 unten
     Spalten     501 : 446, Abstand 33   (= 980)
     Foto        x276 y287  410 × 516  (ar 0,795, cover)
     Deko        x200 y490  348 × 382, liegt hinter dem Foto
     Instagram   Icon 39 × 39 auf x276, Fotounterkante + 14,
                 Schriftzug direkt anschließend auf x316,
                 18 / 25,2 schwarz unterstrichen, mittig zum Icon
     Textspalte  x719  Breite 446, Oberkante bündig mit dem Foto
     H3          x719 y287, 22 / 30,8 #620674, 20 nach unten
     Absätze     16 / 28,8 schwarz, dazwischen jeweils ein leerer
                 Absatz (29)
     Textblock   y338 h835 → Unterkante 1173, + 38 = Footer
   Die Dekofläche ist in der Vorlage ein <svg> mit fill, ohne
   background-color – deshalb tauchte sie im ersten Mess-Snippet
   nicht auf. Hier als Rechteck nachgebaut, in Prozent der
   linken Spalte, damit das Verhältnis beim Schrumpfen hält.
   ============================================================= */
.kuenstlerin-intro {
    /* Dekofläche, bezogen auf die 501 px breite linke Spalte */
    --deco-x: 2.994%;           /* 15 / 501   linker Versatz  */
    --deco-y: 40.519%;          /* 203 / 501  oberer Versatz  */
    --deco-w: 69.461%;          /* 348 / 501  Breite          */
    --deco-ar: 348 / 382;       /* Seitenverhältnis           */

    /* Die Dekofläche skaliert mit der Spalte, die Instagram-Zeile
       darunter nicht: Icon 39 und Abstand 14 sind feste Größen.
       Bei 501 Spaltenbreite ragt der Kasten 69 unter das Foto,
       die Zeile braucht 53 – bleiben 16 Luft. Schrumpft die
       Spalte, schrumpft nur der Überstand, und die Zeile klebt
       an der Kante. Unten wird darum ergänzt, was zum Vorlagen-
       maß fehlt; bei 501 ist das genau 0.
         --deco-ueber = natürlicher Überstand aus der Geometrie:
         40,519 % + 69,461 % · 382/348 − 81,836 % · 516/410
       --deco-luft ist die Stellschraube für mehr Großzügigkeit. */
    --deco-ueber: 13.772%;
    --deco-luft:  69px;

    /* Dasselbe waagerecht: der Schriftzug neben dem Icon ist rund
       190 breit und skaliert nicht mit. In der Vorlage reicht die
       Dekokante 272 über die linke Fotokante hinaus (548 − 276),
       das sind 82 Luft hinter dem Text. Natürlicher Wert:
         2,994 % + 69,461 % − 18,164 %  =  54,291 %
       Ergänzt wird nur bis zur Spaltenkante, sonst liefe der
       Kasten auf schmalen Geräten aus der Spalte heraus. */
    --deco-rechts:     272px;
    --deco-rechts-nat: 54.291%;

    background: var(--clr-white);
    padding-block: 51px 38px;
}

.kuenstlerin-intro__inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 501fr) minmax(0, 446fr);
    column-gap: 3.367%;                 /* 33 / 980 */
    align-items: start;
}

/* Deko und Foto liegen in derselben Grid-Zelle → Überlappung ohne position */
.kuenstlerin-intro__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.kuenstlerin-intro__deco,
.kuenstlerin-intro__foto {
    grid-area: 1 / 1;
}

.kuenstlerin-intro__deco {
    width: var(--deco-w);
    aspect-ratio: var(--deco-ar);
    margin-top: var(--deco-y);          /* %-Margin bezieht sich auf die Spaltenbreite */
    margin-left: var(--deco-x);
    /* content-box, damit das Seitenverhältnis für die Fläche selbst
       gilt und die Ergänzungen wirklich zusätzlich anfallen – über
       die Breite dürfen sie nicht laufen, sonst zöge das
       Seitenverhältnis die Höhe mit hoch. */
    box-sizing: content-box;
    padding-bottom: max(0px, calc(var(--deco-luft) - var(--deco-ueber)));
    padding-right: min(
        calc(100% - var(--deco-x) - var(--deco-w)),
        max(0px, calc(var(--deco-rechts) - var(--deco-rechts-nat)))
    );
    justify-self: start;
    display: block;
    background: var(--clr-lila-lt);     /* Ton wie Footer, rgb(216,193,221) */
}

.kuenstlerin-intro__foto {
    width: 81.836%;                     /* 410 / 501 */
    justify-self: end;
    z-index: 1;
}

.kuenstlerin-intro__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 410 / 516;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.kuenstlerin-intro__ig {
    display: flex;
    align-items: center;
    gap: 1px;                           /* Icon endet auf 315, Text beginnt 316 */
    margin-top: 14px;                   /* Fotounterkante 803 → Icon 817 */
    font-family: var(--ff-ui);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;                   /* → 25,2 px */
    color: var(--clr-text);
    text-decoration: underline;
}

.kuenstlerin-intro__ig img {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    object-fit: contain;
}

.kuenstlerin-intro__text h2 {
    font-family: var(--ff-ui);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;                   /* → 30,8 px */
    color: var(--clr-lila);
    margin: 0 0 20px;                   /* Box endet 317,8 → Absatz 338 */
}

.kuenstlerin-intro__text p {
    font-family: var(--ff-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;                   /* → 28,8 px */
    color: var(--clr-text);
    margin: 0;
}

/* Vorlage setzt zwischen alle Absätze einen leeren Absatz (29 hoch),
   auch vor den Schlussblock. */
.kuenstlerin-intro__text p + p { margin-top: 29px; }

/* Textlinks: schwarz und unterstrichen wie im Footer */
.kuenstlerin-intro__text a { color: inherit; text-decoration: underline; }

/* =============================================================
   13 – MEIN ANGEBOT   (Seite /angebot)
   Weiße Fläche zwischen Seitentitel (endet y236) und Footer
   (beginnt y1931). Vorlage bei 1350 Seitenbreite, Content 980
   auf x185–1165 – alle Werte gemessen:
     Sektion      20 oben / 38 unten, Bandabstand 40
     Band         980 breit, exakt halbiert: 490 Bild | 490 Text
     Bandhöhen    374 · 391 · 324 · 425  (aus dem Bildzuschnitt)
     Wechsel      Bild links · rechts · links · rechts
     H2           36 / 46, w400, #620674
     Absätze      16 / 28,8 schwarz, untereinander ohne Abstand
     CTA-Zeile    28,8 darüber (Wix-Leerabsatz), Link lila
                  unterstrichen, Ziel /kontakt

   Die Bandhöhe kommt in der Vorlage vom Bild, nicht vom Text:
   Wix rendert jedes Bild auf feste 490 × h. Deshalb trägt hier
   die Bildzelle ein --band-ar, und die Textfläche zieht sich
   über align-items: stretch auf dieselbe Höhe. Wird der Text
   höher als das Bild (schmale Viewports, längerer Text), wächst
   die Zeile und das Bild füllt sie über object-fit weiter aus –
   die Sektion kann also nicht brechen.

   Vereinheitlicht (Wix-Handplatzierung, Abweichungen gemessen):
     Innenabstand oben     31 / 36 / 31 / 37   → 31
     H2 nach unten         25 / 18 / 31 / 31   → 31
     Innenabstand seitlich 56 / 39 / 56 / 56   → 56
     H2-Ausrichtung        links / zentriert / links / links
                           → links. Die H2 in Band 2 füllt ihre
                             Box fast aus, der Versatz beträgt 4.
     Innenabstand unten    70 / 89 / 43 / 80. Reiner Restraum, weil
                           die Bandhöhe vom Bild kommt. Als Mindest-
                           wert steht der kleinste gemessene: 43.
     Flächenfarbe          Wix legt in Band 1 und 3 zwei Veil-
                           Schichten übereinander (≈ #dac3df), in
                           Band 2 und 4 nur eine (#e0cde4). Beides
                           auf --clr-lila-lt #d8c1dd vereinheitlicht;
                           das ist zugleich die Farbe, die Wix in
                           Band 1 und 3 deckend selbst setzt.
   ============================================================= */
.angebot {
    background: var(--clr-white);
    padding-block: 20px 38px;
}

.angebot__inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.angebot-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Bandhöhen aus der Vorlage: Breite 490, Höhe gemessen */
.angebot-band--1 { --band-ar: 490 / 374; }
.angebot-band--2 { --band-ar: 490 / 391; }
.angebot-band--3 { --band-ar: 490 / 324; }
.angebot-band--4 { --band-ar: 490 / 425; }

.angebot-band__bild {
    margin: 0;
    aspect-ratio: var(--band-ar);
}

.angebot-band__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Band 2 und 4: Bild rechts. Im Markup steht es immer zuerst,
   damit es beim Umbruch in einer Spalte oben bleibt. */
.angebot-band--rechts .angebot-band__bild { order: 2; }

.angebot-band__text {
    background: var(--clr-lila-lt);
    padding: 31px 56px 43px;
}

.angebot-band__text h2 {
    font-family: var(--ff-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 46px;
    letter-spacing: normal;
    color: var(--clr-lila);
    text-align: left;
    margin: 0 0 31px;
}

.angebot-band__text p {
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
    margin: 0;
}

/* Wix setzt vor die Anfrage-Zeile einen leeren Absatz.
   Muss über .angebot-band__text laufen, sonst gewinnt die
   margin-Nullung der Absatzregel darüber. */
.angebot-band__text .angebot-band__cta { margin-top: 28.8px; }

.angebot-band__cta a {
    color: var(--clr-lila);
    text-decoration: underline;
}

.angebot-band__cta a:hover { color: var(--clr-lila-mid); }


/* =============================================================
   STATISCHE SEITEN
   ============================================================= */
.content-wrap {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
    padding-block: var(--sp-2xl);
}

.page-hero { padding-bottom: 0; }
.page-hero h1 { margin-bottom: var(--sp-lg); }
.page-hero__img { width: 100%; height: auto; }
.content-text h2 { margin-bottom: var(--sp-md); }
.content-text p { line-height: 1.8; margin-bottom: var(--sp-md); }


.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }


/* =============================================================
   14 – LEGAL-SEITEN   (/impressum /datenschutz /agb /versand-rueckgabe)
   Gemeinsame Sektion für alle vier. Gemessen auf /impressum und
   /agb, Viewport 1365, Content 980 auf x185–1165:

     Kein Seitentitel-Band. Die H1 steht im Textfluss, links-
     bündig, Montserrat 46 in #b183ba. Header endet 103, H1
     beginnt y108 → 5 oben. Deshalb trägt keine dieser Seiten
     .page-title – die Vorlage kennt sie hier nicht.

     H1 Zeilenhöhe   /agb 64,4  ·  /impressum normal (58)  → 64,4
     H1 nach unten   /agb 43    ·  /impressum 46           → 43
     Absätze         16 / 22,4 schwarz, untereinander ohne Abstand
     Blocktrennung   Wix setzt Leerabsätze (22,4); Überschriften
                     haben nach unten 0
     Seitenschluss   /agb 40  ·  /impressum 29  → 38 (Site-Wert,
                     wie /kuenstlerin und /angebot)

   Vereinheitlicht (die Vorlage platziert jede Seite anders):
     H1-Lage      /agb x185 w980  ·  /impressum x260 w886
     Textspalte   /agb x220 w908  ·  /impressum x260 w709
                  → beides auf die Content-Spalte 980 auf x185,
                    das ist zugleich die H1-Lage von /agb.

   Überschriftengrößen: /impressum rendert h2 und h3 identisch
   mit 22 / 30,8 schwarz. /agb taggt die §§ als h4 mit 16 / 22,4 –
   also exakt Fließtextgröße, vom Absatz nicht zu unterscheiden.
   Hier steht deshalb eine Stufung: h2/h3 auf den gemessenen 22,
   h4 auf den gemessenen 16. Die Hierarchie zwischen h2 und h3
   läuft über den Abstand nach oben (44,8 = zwei Leerabsätze
   gegen 22,4 = einer), nicht über erfundene Schriftgrade.

   --legal-h2-fz ist die eine Stellschraube: auf 16px gesetzt
   rendern die AGB-Paragraphen wieder exakt wie in der Vorlage.
   ============================================================= */
.legal {
    --legal-h2-fz: 22px;
    --legal-h2-lh: 30.8px;
    --legal-leer: 22.4px;      /* Wix-Leerabsatz bei 16 / 22,4 */

    /* Absätze stehen in der Vorlage ohne Abstand untereinander –
       auf /impressum und /agb beide Male mit 0 gemessen. Auf den
       langen Prosaseiten liest sich das dicht; hier steht die eine
       Stellschraube, falls Luft gewünscht ist. */
    --legal-p-abstand: 0px;

    background: var(--clr-white);
    padding-block: 5px 38px;
}

.legal__inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.legal h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 64.4px;
    letter-spacing: normal;
    color: var(--clr-lila-mid);
    text-align: left;
    margin: 0 0 43px;
}

.legal h2,
.legal h3 {
    font-family: var(--ff-display);
    font-size: var(--legal-h2-fz);
    font-weight: 400;
    line-height: var(--legal-h2-lh);
    color: var(--clr-text);
    margin: 0;
}

.legal h4 {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    color: var(--clr-text);
    margin: 0;
}

/* Abstand nach oben trägt die Hierarchie, nach unten steht 0 –
   so hält es die Vorlage. */
.legal h2 { margin-top: calc(2 * var(--legal-leer)); }
.legal h3,
.legal h4 { margin-top: var(--legal-leer); }

/* Die erste Überschrift schließt an die H1 an; die Ränder fallen
   zusammen, es bleibt der größere von beiden. */

.legal p {
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 22.4px;
    color: var(--clr-text);
    margin: 0;
}

.legal p + p { margin-top: var(--legal-p-abstand); }

/* Wo die Vorlage zwischen zwei Absätzen einen Leerabsatz stehen hat,
   trägt der folgende Absatz diese Klasse. Steht bewusst über
   --legal-p-abstand: der Abstand ist gemessen, nicht Geschmack. */
.legal .legal__abstand { margin-top: var(--legal-leer); }

.legal ul,
.legal ol {
    margin: var(--legal-leer) 0 0;
    padding-left: var(--legal-leer);
}

.legal li {
    font-size: 16px;
    line-height: 22.4px;
    color: var(--clr-text);
    margin: 0;
}

/* Textlinks: schwarz und unterstrichen wie im Footer */
.legal a { color: inherit; text-decoration: underline; }

/* =============================================================
   15 - KONTAKT: KOPF   (Seite /kontakt)
   Vorlage /kontakt, Viewport 1365, Seitenbreite 1350, Header
   endet y103. Gemessen am innersten Textknoten:

     Band        y103-317, 214 hoch, weiss (Seitengrund)
     Titel       Box y138 h58  ->  35 oben
                 Montserrat 46 / normal (Boxhoehe 58 bei einer
                 Zeile), w400, letter-spacing normal, #b183ba,
                 zentriert
     Abstand     196 -> 214 = 18
     Einleitung  zwei Absaetze 22 / 39,6 schwarz, zentriert,
                 untereinander ohne Abstand (2 x 39,6 = 79,2)
     Band unten  317 - 293,2 = 23,8  ->  24

   Rechnung: 35 + 58 + 18 + 79,2 + 24 = 214,2  (gemessen 214)

   Bewusst kein .page-title: die Vorlage setzt hier eine andere
   Zeile. .page-title ist 46 / 59,8 in #620674 mit 0,07em
   Laufweite auf 133 Bandhoehe; hier steht 46 / normal in
   #b183ba ohne Laufweite, und die Einleitung gehoert mit ins
   selbe Band.

   Vereinheitlicht: Wix platziert Titel (x210 w930) und
   Einleitung (x219 w912) handgesetzt, beide seitenzentriert auf
   x675. Uebernommen wird die Content-Spalte 980 auf x185 - die
   Zeilen brechen dadurch identisch (laengste Zeile 861).

   Zeilenhoehe des Titels bewusst als Pixelwert: 'normal' haengt
   an den Font-Metriken und ist nicht reproduzierbar; gemessen
   ist die Box mit 58.
   ============================================================= */
.kontakt-kopf {
    background: var(--clr-white);
    padding-block: 35px 24px;
}

.kontakt-kopf__inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.kontakt-kopf h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 58px;
    letter-spacing: normal;
    color: var(--clr-lila-mid);
    text-align: center;
    margin-bottom: 18px;
}

.kontakt-kopf p {
    font-family: var(--ff-body);
    font-size: 22px;
    font-weight: 400;
    line-height: 39.6px;
    color: var(--clr-text);
    text-align: center;
    margin: 0;
}


/* =============================================================
   16 - KONTAKT: FORMULARBAND   (Seite /kontakt)
   Vorlage /kontakt, Viewport 1365, Seite 1350, Content 980 auf
   x185-1165. Gemessen:

     Band        y317-863, 546 hoch, weiss
                 37 oben / 40 unten (37 + 469 + 40 = 546)
     Foto        x261 y354 w329 h408   -> LINKE Spalte
     Formular    x643 y354 w458 h469   -> RECHTE Spalte
     Abstand     590 -> 643 = 53

   Vereinheitlicht: Wix setzt die Spalten handplatziert, 76 links
   und 64 rechts von der Content-Spalte. Beide Spalten werden hier
   zusammen zentriert (je 70). Differenz 6 px je Seite.

   Formular innen (x-Werte gemessen):
     Innenabstand   links 18 (643->661), rechts 19 (1082->1101)
     Feldbreite     421
     Zwei Felder    202 | 17 | 202   (661 / 881, 202*2+17 = 421)
     Label          Montserrat 16 / 16, w400, schwarz
     Zeilenraster   Label 16 + 12 + Feld 36 + 12 = 76
                    (gemessen Zeile 1->2 = 76, Zeile 2->3 = 80;
                     auf 76 vereinheitlicht)
     Nachricht      Label y526, Textarea y551 h86 -> Abstand 9,
                    Innenabstand 12px 10px 3px, weiss
     Button         x964-1081 y741-774 -> 117 x 33, rechtsbuendig
                    an der Feldkante, #620674, Text 16/22,4 weiss
     Erfolgstext    Montserrat 14 / 19,6 in #620674

   Felder in der Vorlage: weiss mit duennem dunklem Rahmen, keine
   Rundung. Das weicht vom globalen Formularstil in main.css ab
   (lila gefuellt, 2 px Unterkante) - deshalb hier ueberschrieben
   und ausdruecklich auf .kontakt-form begrenzt.

   Bewusst NICHT uebernommen: der reCAPTCHA-Block der Vorlage
   (v2-Checkbox, x669-897 y671-730, auf 0,76 skaliert). Google
   verlangt dafuer inzwischen ein Cloud-Projekt und liefert bei
   neuen Schluesseln nicht mehr zwingend ein klassisches Secret;
   dazu kaeme ein Einwilligungsklick vor jedem Absenden und ein
   eigener Abschnitt im Datenschutz. Bei unter 10 Anfragen im
   Monat steht das in keinem Verhaeltnis. Das Formular ist damit
   derzeit ohne Spamschutz - Honeypot plus Zeitfalle waere der
   naechste Schritt.
   Folge fuer die Geometrie: der Button ruecken um 70 nach oben
   (59 Widget + 11 Abstand), die Formularspalte ist entsprechend
   kuerzer als die 469 der Vorlage.
   ============================================================= */
.kontakt-form {
    /* NICHT BELEGT - Dekoflaeche hinter dem Foto.
       Snippet 1 findet sie nicht: Wix rendert sie ohne eigene
       background-color in der Flaechenliste. Werte stammen aus
       dem 1:1-Screenshot der Vorlage (Foto dort 329 x 408, also
       massstabsgetreu), umgerechnet ueber den Versatz x-192 /
       y-69: Flaeche x199-478 y518-817. Relativ zum Foto:
         links  261-199 = 62   ueber die linke Fotokante hinaus
         oben   518-354 = 164  unter der Fotooberkante
         Breite 279
         Hoehe  299            -> 55 unter die Fotounterkante

       Bezugsgroessen: x und w in Prozent der Zellbreite (329),
       y und h in Prozent der Zellhoehe. Die Zelle ist Foto (408)
       plus die 55 Reserve unten = 463:
         y  164 / 463 = 35.42 %
         h  299 / 463 = 64.58 %
       Beides zusammen 100 % - die Flaeche endet also exakt an der
       Zellunterkante. Damit skaliert die Deko in jeder Breite mit,
       und die Zelle umschliesst sie vollstaendig.

       Nach der Messung mit Snippet 2 sind nur diese vier Zeilen
       anzufassen. */
    --kontakt-deko-x: -18.8%;
    --kontakt-deko-y: 35.42%;
    --kontakt-deko-w: 84.8%;
    --kontakt-deko-h: 64.58%;

    background: var(--clr-white);
    padding-block: 37px 40px;
}

.kontakt-form__inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 329px 458px;
    column-gap: 53px;
    justify-content: center;
    align-items: start;
}

/* Fotospalte: Foto und Dekoflaeche liegen uebereinander, das Foto
   deckt die Flaeche teilweise ab. Die Flaeche ragt links und unten
   heraus, deshalb kein overflow: hidden.

   Der Ueberhang nach unten (55 bei 329 Spaltenbreite) wird als
   padding-bottom reserviert - Prozent bezieht sich auf die eigene
   Breite, skaliert also mit. Ohne diese Reserve ist die Zelle nur
   so hoch wie das Foto: nebeneinander faellt das nicht auf, beim
   Spaltenumbruch laeuft die Flaeche dann aber ueber die ersten
   Formularlabels. 55 / 329 = 16.72 %. */
.kontakt-form__media {
    position: relative;
    padding-bottom: 16.72%;
}

.kontakt-form__media::before {
    content: '';
    position: absolute;
    left: var(--kontakt-deko-x);
    top: var(--kontakt-deko-y);
    width: var(--kontakt-deko-w);
    height: var(--kontakt-deko-h);
    background: var(--clr-lila-lt);
    z-index: 0;
}

.kontakt-form__foto {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 329 / 408;
    object-fit: cover;
}

/* --- Formular ------------------------------------------------ */
/* Innenabstand: oben 16 (Formularkante 354 -> erstes Label 370),
   links 18 / rechts 19, unten 49 (Buttonunterkante 774 -> 823). */
.kontakt-form__spalte { padding: 16px 19px 49px 18px; }

.kontakt-form .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 17px;
}

.kontakt-form .form-group { margin-bottom: 12px; }

.kontakt-form label {
    font-family: var(--ff-ui);
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    color: var(--clr-text);
    margin-bottom: 12px;
}

.kontakt-form input[type="text"],
.kontakt-form input[type="email"] {
    height: 36px;
    padding: 0 10px;
    background: var(--clr-white);
    border: 1px solid var(--clr-text);
    border-radius: 0;
    font-size: 16px;
    line-height: 34px;
}

/* Nachricht: Label -> Textarea 9 statt 12 */
.kontakt-form .form-group--nachricht label { margin-bottom: 9px; }

.kontakt-form textarea {
    height: 86px;
    min-height: 0;
    padding: 12px 10px 3px;
    background: var(--clr-white);
    border: 1px solid var(--clr-text);
    border-radius: 0;
    font-size: 16px;
    line-height: 22.4px;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus { outline: none; border-color: var(--clr-lila); }

/* Buttonzeile: Button rechts an der Feldkante.
   In der Vorlage sitzt zwischen Textarea und Button ein
   reCAPTCHA (34 darueber, 11 darunter). Das ist bewusst nicht
   uebernommen - siehe Kommentar in Sektion 16. Der Abstand 34
   bleibt, der Button ruecken damit um 70 nach oben. */
.kontakt-form__aktion {
    margin-top: 34px;
    display: flex;
    justify-content: flex-end;
}

.kontakt-form__aktion .btn {
    width: 117px;
    height: 33px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 22.4px;
    border-color: var(--clr-lila);
}

/* Erfolgsmeldung. In der Vorlage steht sie linksbuendig an der
   Feldkante unmittelbar ueber der Buttonzeile (y738, 14 / 19,6 in
   #620674) - dort, wo sonst der reCAPTCHA-Block sitzt. Das Formular
   bleibt stehen, die Felder sind geleert.
   Der Abstand darunter ist die gemessenen 11 der Vorlage; deshalb
   ueberschreibt die Meldung den 34er Abstand der Buttonzeile. */
.kontakt-form__meldung {
    margin-top: 34px;
    font-family: var(--ff-ui);
    font-size: 14px;
    line-height: 19.6px;
    color: var(--clr-lila);
}

.kontakt-form__meldung + .kontakt-form__aktion { margin-top: 11px; }

/* Hinweis auf die Datenschutzerklaerung unter dem Formular.
   NICHT IN DER VORLAGE - Wix hat den Absatz nicht, die rechte Spalte
   wird dadurch um eine Zeile laenger. Typografie von
   .kontakt-form__meldung uebernommen (14 / 19,6 in der UI-Schrift),
   damit der Fuss des Formulars einheitlich wirkt; die Farbe bleibt
   die Textfarbe, weil dies kein Erfolgshinweis ist. */
.kontakt-form__hinweis {
    margin-top: 24px;
    font-family: var(--ff-ui);
    font-size: 14px;
    line-height: 19.6px;
    color: var(--clr-text-muted);
}

.kontakt-form__hinweis a {
    color: var(--clr-lila);
    text-decoration: underline;
}

.kontakt-form__hinweis a:hover { color: var(--clr-lila-mid); }

/* Feldfehler zeigt die Vorlage ohne Text: das Feld bekommt einen
   roten Rahmen, die Meldung steht im title und erscheint als Tooltip.
   Fuer Tastatur und Screenreader haengt dieselbe Meldung zusaetzlich
   ueber aria-describedby an einem unsichtbaren Absatz - ein Tooltip
   allein erreicht nur die Maus. */
/* Ueber den Container qualifiziert: .kontakt-form input[type="email"]
   hat (0,2,1) und schlaegt ein blosses .kontakt-form [aria-invalid]
   mit (0,2,0). Beim Textarea faellt das nicht auf, weil dessen Regel
   nur (0,1,1) hat - deshalb war die Nachricht rot, das E-Mail-Feld
   aber nicht. Mit .form-group davor sind es (0,3,1) und die Regel
   greift bei beiden. Der Fokusfall muss mit, sonst faerbt
   .kontakt-form input:focus den Rahmen beim Hineinklicken um. */
.kontakt-form .form-group input[aria-invalid="true"],
.kontakt-form .form-group textarea[aria-invalid="true"],
.kontakt-form .form-group input[aria-invalid="true"]:focus,
.kontakt-form .form-group textarea[aria-invalid="true"]:focus {
    border-color: var(--clr-error);
}


/* =============================================================
   17 - KONTAKT: ADRESSBAND   (Seite /kontakt)
   Band y863-1227 (Footer beginnt 1227), 364 hoch.
   Links Adressblock, rechts die Karte.

   Aus der DevTools-Messung belegt:
     "Adresse:"   x306 y926 h27, Montserrat 22 / 39,6, #620674
     Instagram    Text x340 y1078, Montserrat 18 / 25,2 schwarz,
                  Icon-Box 39 direkt davor (301-340, kein Abstand)

   Die drei Adresszeilen fehlen in Snippet 1, weil sie ueber <br>
   im selben Absatz haengen. Hergeleitet aus dem 1:1-Screenshot
   der Vorlage ueber den Breitenvergleich der laengsten Zeile
   ("D-26810 Westoverledingen": 214 px dort gegen 296 px bei 22 px
   hier, Faktor 0,73):

     Adresszeilen  16 / 28,8 schwarz   <- NICHT direkt gemessen
     Leerzeile     28,8 zwischen Adresse und Instagram-Zeile
                   (Wix-Leerabsatz, Luecke gemessen ~30)

   Blockhoehe damit 39,6 + 3 x 28,8 + 28,8 + 25,2 = 180.

   Karte: in der Wix-Vorlage nicht vorhanden, aus der Vorgabe
   uebernommen. Screenshotwerte x669-1093 y911-1196, also 424 x 285.
   Auf die Formularspalte verbreitert (458), Hoehe 285 bleibt.

   Bandrechnung: 48 + 285 + 31 = 364 ist die gemessene Bandhoehe.
   Der Adressblock beginnt 9 unter der Kartenoberkante (920).

   Vereinheitlicht: Wix setzt den Adressblock auf x306, also 45
   rechts neben der Fotokante. Der Einzug wird uebernommen, aber
   relativ zur Fotospalte, nicht als absoluter x-Wert.
   ============================================================= */
.kontakt-adresse {
    background: var(--clr-white);
    padding-block: 48px 31px;
}

.kontakt-adresse__inner {
    width: min(var(--content-w), 100% - 2 * var(--gutter));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 329px 458px;
    column-gap: 53px;
    justify-content: center;
    align-items: start;
}

.kontakt-adresse__block {
    margin-top: 9px;
    padding-left: 45px;
    font-family: var(--ff-body);
    font-style: normal;
    color: var(--clr-text);
}

.kontakt-adresse__titel {
    font-size: 22px;
    line-height: 39.6px;
    color: var(--clr-lila);
}

.kontakt-adresse__zeilen {
    font-size: 16px;
    line-height: 28.8px;
}

/* Wix-Leerabsatz zwischen Adresse und Instagram-Zeile */
.kontakt-adresse__insta { margin-top: 28.8px; }

.kontakt-adresse__insta a {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 18px;
    line-height: 25.2px;
    color: var(--clr-text);
    text-decoration: none;
}

.kontakt-adresse__insta a:hover { color: var(--clr-lila); text-decoration: none; }

/* Randluft gehoert ins Asset, nicht in den Abstand - wie auf
   /kuenstlerin. Icon-Box 39, sichtbare Grafik kleiner. */
.kontakt-adresse__insta img { width: 39px; height: 39px; }


/* =============================================================
   17b - KONTAKT: KARTE
   Google Maps laedt erst nach Klick. Damit findet vor der
   Einwilligung keine Uebertragung an Google statt und die Seite
   kommt ohne Cookie-Banner aus. Der Platzhalter hat exakt die
   Kartenmasse, die Sektion springt beim Laden also nicht.
   ============================================================= */
.kontakt-karte {
    position: relative;
    width: 100%;
    aspect-ratio: 458 / 285;
    background: var(--clr-lila-lt);
}

.kontakt-karte iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.kontakt-karte__platzhalter {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 22.4px;
    color: var(--clr-text);
}

.kontakt-karte__platzhalter a { color: var(--clr-lila); text-decoration: underline; }


/* =============================================================
   18 - NEWSLETTER   (Footer-Block + Landingpage /newsletter)
   Der Footer-Block selbst (.newsletter, .newsletter__row,
   .newsletter__check) ist in main.css definiert und bleibt
   unangetastet. Gemessene Werte der Vorlage: Block 448 breit,
   Input 32 hoch, Button 42, Checkbox 16, Ueberschrift
   "Newsletter abonnieren" 22 / 33 in #620674.
   Hier stehen nur die Ergaenzungen, die der Double-Opt-In
   gebracht hat: Rueckmeldungen, laengere Einwilligungszeile,
   Honeypot und die Landingpage.
   ============================================================= */

/* Der Honeypot .formular-hp steht in main.css (Abschnitt
   FORMULARE). Hier stand bis zuletzt eine zweite, fast gleiche
   Kopie - sie unterschied sich nur um ein top: auto, was bei
   position: absolute ohnehin der Vorgabewert ist. Da pages.css
   nach main.css laedt, gewann die Kopie und verdeckte das
   Original. Entfernt; die Klasse wird von lib/formular.php und
   lib/newsletter.php gleichermassen benutzt und gehoert deshalb
   nach main.css. */

/* Rueckmeldungen unter der Ueberschrift.
   Schriftgroesse wie die Erfolgsmeldung auf /kontakt (14 / 19,6),
   Breite auf die gemessenen 448 des Newsletter-Blocks gedeckelt. */
.newsletter__danke,
.newsletter__fehler {
    margin: 0 0 4px;
    max-width: 448px;
    font-size: 14px;
    line-height: 19.6px;
}

.newsletter__danke  { color: var(--clr-lila); }

.newsletter__fehler {
    color: var(--clr-error);
    margin-bottom: 12px;
}

/* Einwilligungszeile. Der Text nennt jetzt Zweck und Widerruf und
   ist dadurch mehrzeilig. Die Checkbox darf nicht mitwachsen und
   muss an der ersten Zeile stehen bleiben - deshalb flex-start
   statt der sonst geerbten Zentrierung. */
.newsletter__check { align-items: flex-start; }

.newsletter__check input[type="checkbox"] {
    flex: 0 0 16px;          /* gemessen: 16 */
    margin-top: 2px;         /* optische Mitte der ersten Zeile */
}

.newsletter__check label {
    font-size: 13px;
    line-height: 18.2px;
}

.newsletter__check label a {
    color: inherit;
    text-decoration: underline;
}

/* Landingpage /newsletter.
   Die Vorlage kennt diese Seite nicht - es gibt hier nichts
   nachzumessen. Sie laeuft deshalb bewusst im Rahmen der
   Legal-Seiten (Sektion 14, .legal), gleiche Spaltenbreite,
   gleiche H1. Der Button nutzt die Basisklasse .btn aus
   main.css, mit denselben 117 x 33 wie auf /kontakt. */
.newsletter-aktion { margin: 28px 0 32px; }

.newsletter-aktion .btn {
    min-width: 117px;
    height: 33px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 22.4px;
    border-color: var(--clr-lila);
}




/* =============================================================
   19 - KURSE: LISTE   (/kurse)
   Gemessen an der Vorlage, Viewport 1350, Content 980 auf
   x185-1165. Alle Werte aus der DevTools-Messung:

     Kopf        H1 46 / 64,4 in #620674, zentriert, ls normal.
                 Bewusst NICHT .page-title - die ist 46 / 59,8 mit
                 0,07em Laufweite. Hier ist die Zeile hoeher und
                 ohne Sperrung, gemessen y136-201.
     Intro       16 / 28,8 zentriert, Abstand zur H1 30.
                 Zwei Zeilen in EINEM Absatz: der Zeilenabstand
                 betraegt exakt 28,8 - ein zweiter Absatz haette
                 einen groesseren Abstand. Deshalb <br>.
     Karte       940 breit, zentriert in 980 (x205-1145),
                 1 px solid rgba(0,0,0,.2), Hoehe 460.
                 Innen 938 = 469 Bild | 469 Text.
     Textspalte  padding 60 rundum -> Textbreite 349.
     Innen       Titel 22 / 29,26 in #000
                 +13  Kurztext   16 / 24
                 +12  Weiterlesen 16 / 24, unterstrichen
                 +24  Trennlinie 1 px rgba(0,0,0,.2), Breite 349
                 +24  Metazeilen 16 / 32, lueckenlos gestapelt
                 +20  Buchen-Knopf 100 x 40, padding 11/16,
                      #620674 auf 1 px #620674, Text 16/16 weiss
     Abstaende   Intro -> erste Karte 83, Karte -> Karte 60,
                 letzte Karte -> Footer 49, Header -> H1 33.

   Die Vorlage legt hinter jedes Bild eine Flaeche rgba(0,0,0,.2).
   Sie liegt im Elternpfad des <img>, wird von diesem (cover, volle
   Flaeche) vollstaendig verdeckt und ist deshalb nicht uebernommen.

   Die Kartenhoehe ist min-height, nicht height: die Vorlage hat
   durchgaengig einzeilige Kurztexte, unsere kommen aus der Admin
   und koennen laenger werden. Bei den vier echten Kursen ergibt
   sich exakt die gemessene 460.
   ============================================================= */
.kurse-liste {
    background: var(--clr-white);
    padding-block: 33px 49px;
}

.kurse-liste__kopf h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 64.4px;
    letter-spacing: normal;
    color: var(--clr-lila);
    text-align: center;
}

.kurse-liste__intro {
    margin-top: 30px;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
    text-align: center;
}

/* Der Gruppenevents-Link steht in der Vorlage in Textfarbe, nur
   unterstrichen - nicht in Lila wie sonst auf der Site. */
.kurse-liste__intro a {
    color: inherit;
    text-decoration: underline;
}

.kurse-liste__intro a:hover { color: var(--clr-lila); }

.kurse-liste__leer {
    margin-top: 83px;
    font-size: 16px;
    line-height: 28.8px;
    text-align: center;
}

.kurse-liste__bahn {
    margin-top: 83px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.kurs-band {
    width: 940px;
    max-width: 100%;
    margin-inline: auto;
    min-height: 460px;
    background: var(--clr-white);
    border: 1px solid rgba(0, 0, 0, .2);
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 938 innen -> 469 | 469 */
}

/* Die Bildzelle darf zur Zeilenhoehe NICHTS beitragen, sonst zieht
   ein hochformatiges Bild die ganze Karte auf und die Baender
   werden unterschiedlich hoch. height:100% auf dem <img> genuegt
   dafuer nicht: die Hoehe der Zelle haengt dann von ihrem Inhalt
   ab und der Inhalt von der Zelle - der Browser loest das zirkulaer
   auf, behandelt height als auto und nimmt die natuerliche
   Bildhoehe. Deshalb liegen Link und Bild absolut in der Zelle.
   Die Kartenhoehe kommt damit allein aus min-height und der
   Textspalte, genau wie in der Vorlage. */
.kurs-band__bild {
    position: relative;
    overflow: hidden;
    background: var(--clr-lila-lt);
}

.kurs-band__bild a {
    position: absolute;
    inset: 0;
    display: block;
}

/* Die absolute Positionierung schlaegt zugleich das globale
   img{height:auto} aus main.css - Spezifitaet 0,1,1 gegen 0,0,1. */
.kurs-band__bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kurs-band__text {
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kurs-band__titel {
    font-family: var(--ff-ui);
    font-size: 22px;
    font-weight: 400;
    line-height: 29.26px;
    color: var(--clr-text);
}

.kurs-band__titel a { color: inherit; text-decoration: none; }

/* nicht belegt - die Vorlage laesst sich im Ruhezustand messen,
   der Hover-Zustand nicht. Uebernommen aus dem Kurse-Teaser
   (Sektion 10), damit sich beide gleich anfuehlen. */
.kurs-band__titel a:hover { color: var(--clr-lila); text-decoration: none; }

.kurs-band__kurz {
    margin-top: 13px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.kurs-band__mehr {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    text-decoration: underline;
}

.kurs-band__mehr:hover { color: var(--clr-lila); }

.kurs-band__trenner {
    width: 100%;
    height: 1px;
    margin-top: 24px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.kurs-band__meta { margin-top: 24px; }

.kurs-band__meta p {
    font-size: 16px;
    line-height: 32px;
    color: var(--clr-text);
}

.kurs-band__buchen { margin-top: 20px; }

/* .btn ist Basisklasse in main.css und wird hier qualifiziert
   ueberschrieben - gemessen 100 x 40 bei padding 11/16. */
.kurs-band__buchen .btn {
    min-width: 100px;
    height: 40px;
    padding: 11px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 16px;
    background: var(--clr-lila);
    border: 1px solid var(--clr-lila);
    color: var(--clr-white);
}

.kurs-band__buchen .btn:hover {
    background: var(--clr-lila-mid);
    border-color: var(--clr-lila-mid);
    color: var(--clr-white);
    text-decoration: none;
}


/* =============================================================
   20 - KURSE: DETAIL   (/kurse/detail)
   Gemessen an /service-page/handlettering-workshop-1,
   Viewport 1350. Alle Werte aus der DevTools-Messung:

     Spalte      Inhalt 720 auf x315-1035. Das ist die bekannte
                 980er-wrap bei x185 mit 130 px Innenabstand je
                 Seite (315-185 = 130, 1165-1035 = 130) - keine
                 neue Rasterbreite.
     Breadcrumb  y155, 16 / 20 in #000, Elemente x315 / x424 / x546.
                 Zwischen den Gliedern steht ein Chevron. Die
                 Elementpositionen oben schliessen es ein: die
                 Luecke Text-Chevron-Text betraegt rund 33 gesamt.
                 Nachgebaut mit gap 12 je Seite plus dem Zeichen.
     H1          y203, 46 / 57, ls normal, #620674, LINKSBUENDIG.
                 Das ist eine vierte H1-Variante. Keine der drei
                 dokumentierten passt: .page-title ist 46 / 59,8 mit
                 0,07em Laufweite und zentriert, die Legal-Seiten
                 sind 46 / 64,4 in #b183ba, /kurse ist 46 / 64,4
                 zentriert. Deshalb hier ein eigener Wert.
     Kurztext    y276, 16 / 24 in #000.
     Metazeile   y332, Gruppe 302 x 58, Rahmen OBEN UND UNTEN
                 1 px rgba(0,0,0,.2). Zellen 77 / 70 / 155 breit,
                 lueckenlos, je padding 16.
                 Die Breite ergibt sich aus dem Inhalt: 16 + Text
                 + 16. Deshalb inline-flex statt fester Breiten -
                 unsere Texte kommen aus der Admin.
                 KORRIGIERT: Hier stand "Rahmen nur oben". Die
                 Vorlage setzt SENKRECHTE Trenner zwischen die
                 Zellen, nicht waagerechte auf jede Zelle. Der
                 waagerechte Rahmen liegt allein auf der Gruppe;
                 waere er zusaetzlich auf jeder Zelle, stuende in
                 der ersten Zeile eine doppelte Linie.
     Knopf       132 x 40, padding 12/16, #620674, radius 0,
                 Text 16 / 16 weiss zentriert. 132 = 32 Polsterung
                 + 100 Inhaltsbreite, der Text "Weiter" ist nur 53
                 breit und sitzt mittig -> min-width 132.
     Trennlinie  <hr> 720 x 1 in rgba(0,0,0,.2), 32 darueber und
                 32 darunter.
     H2          22 / 27 in #000, links, danach 16.
     Galerie     3 x 210 x 210, Luecke 45, object-fit cover.
                 3 * 210 + 2 * 45 = 720, geht exakt auf.

                 KORRIGIERT, und die Korrektur ist der Grund fuer
                 diesen Absatz: Hier stand "3 x 232 x 232, Luecke
                 12". Das sind die Werte UNSERES Nachbaus, nicht
                 die der Vorlage - beim Messen wurde offenbar das
                 falsche Dokument erwischt. Gegengerechnet an einem
                 Bildschirmfoto der Vorlage: dort liegen Galerie
                 und Metazeile im selben Massstab (Metagruppe 288
                 statt 302, Galeriebahn 689 statt 720, beides
                 Faktor 0,955). Auf 720 hochgerechnet ergibt das
                 210er Bilder mit 45 Luecke.
                 Die 45 passen zugleich in die Abstandskette, die
                 sonst mit 44 arbeitet.

                 NICHT NACHGEMESSEN: die Zahlen stammen aus dem
                 Bildschirmfoto, nicht aus DevTools. Wenn du die
                 Vorlage noch einmal offen hast, ist das der Wert,
                 den ich bestaetigt haben moechte.

   Abstandskette der Vorlage:
     Breadcrumb +28 H1 +16 Kurztext +32 Meta +32 Knopf +32 <hr>
     +32 H2 +16 Text +44 Galerie +44 H2 Termine ... Knopf +32
     <hr> +32 H2 Kontaktangaben +16 Adresse.

   ZWEI ABWEICHUNGEN VOM MUSTER, ausdruecklich so gemessen:

   1. Zwischen Galerie und "Termine" steht KEINE Trennlinie, nur
      44 px. Die beiden <hr> folgen ausschliesslich auf einen
      Knopf. Die Galerie gehoert damit zum Beschreibungsband,
      nicht zu einem eigenen.
   2. Der Kontaktblock ist 487 breit, nicht 720. Uebernommen als
      max-width, damit die Zeilen nicht ueber die volle Spalte
      laufen.

   EIGENBAU ohne Vorlage: die Terminliste. Die Vorlage bucht ueber
   ein Wix-Kalender-Widget mit 24 Terminen und Blaetterung, das es
   im Relaunch nicht gibt. Uebernommen sind die Typografie der
   Zeilen - Datum 16 / 20 in #000, Zusatzzeile 14 / 17 in #404040,
   Zeilenabstand 85 - und der umlaufende Rahmen des Widgets: die
   Vorlage stellt die Termine in einen Kasten mit Zeilentrennern,
   nicht frei auf die Seite. Innenabstand 16 seitlich, aus dem
   Bildschirmfoto abgeleitet. Der Zeilenaufbau bleibt unserer
   (Datum, Zusatzzeile, Buchen-Link) - die dreispaltige Anordnung
   der Vorlage haengt an ihrem Widget.
   ============================================================= */
.kursdetail {
    background: var(--clr-white);
    padding-block: 48px 32px;
}

/* 130 Innenabstand je Seite -> 720 Inhalt in der 980er-wrap. */
.kursdetail__inner {
    padding-inline: 130px;
}

/* --- Breadcrumb --- */
.kursdetail__pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    font-size: 16px;
    line-height: 20px;
    color: var(--clr-text);
}

/* Das Trennzeichen ist ein eigenes Element, kein ::before auf dem
   Link: als Pseudoelement im <a> wuerde es beim Ueberfahren
   mitunterstrichen und zaehlte zur Klickflaeche.
   12 + Zeichen + 12 ergibt rund 30 - vorher standen 32 ohne
   Zeichen, die Zeile wird also nicht laenger. */
.kursdetail__pfad-trenner {
    font-size: 18px;
    line-height: 20px;
    color: var(--clr-text-muted);
}

.kursdetail__pfad a {
    color: var(--clr-text);
    text-decoration: none;
}

.kursdetail__pfad a:hover {
    text-decoration: underline;
}

/* --- Kopf --- */
.kursdetail__titel {
    margin-top: 28px;
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 57px;
    letter-spacing: normal;
    color: var(--clr-lila);
    text-align: left;
}

.kursdetail__kurz {
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

/* --- Metazeile ---
   Rahmen oben und unten liegen auf der Gruppe, senkrechte Trenner
   zwischen den Zellen. So entsteht die gemessene Hoehe
   58 = 1 + 56 + 1 bei Zellhoehe 56 = 16 + 24 + 16.

   Nur zwischen den Zellen, keine Seitenkanten aussen: in der
   Vorlage beginnt "2 Std." buendig mit dem Anfang der oberen
   Linie, links steht keine senkrechte Kante. */
.kursdetail__meta {
    display: inline-flex;
    flex-wrap: wrap;
    margin-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.kursdetail__meta-zelle {
    padding: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    white-space: nowrap;
}

/* Der Nachbar-Kombinator statt eines Rahmens auf jeder Zelle: so
   entsteht keine Kante vor der ersten. Traegt auch den Fall, dass
   nur eine oder zwei der drei Zellen gesetzt sind - Dauer, Preis
   und Ort koennen einzeln fehlen. */
.kursdetail__meta-zelle + .kursdetail__meta-zelle {
    border-left: 1px solid rgba(0, 0, 0, .2);
}

/* --- Knopf ---
   .btn ist die Basisklasse in main.css, hier qualifiziert
   ueberschrieben. Gemessen 132 x 40 bei padding 12/16 - die 132
   sind eine Mindestbreite, der Text sitzt mittig darin. */
.kursdetail__aktion {
    margin-top: 32px;
}

.kursdetail .btn.kursdetail__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 16px;
    background: var(--clr-lila);
    border: 1px solid var(--clr-lila);
    border-radius: 0;
    color: var(--clr-white);
    text-decoration: none;
}

.kursdetail .btn.kursdetail__btn:hover {
    background: var(--clr-lila-mid);
    border-color: var(--clr-lila-mid);
    color: var(--clr-white);
    text-decoration: none;
}

/* --- Trennlinie --- */
.kursdetail__trenner {
    height: 0;
    margin-block: 32px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

/* --- Ueberschriften der Baender --- */
.kursdetail__h2 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 27px;
    color: var(--clr-text);
    text-align: left;
}

/* Der Abstand H2 -> Inhalt betraegt durchgaengig 16. */
.kursdetail__h2 + * {
    margin-top: 16px;
}

/* --- Beschreibung --- */
.kursdetail__text {
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

/* Absaetze der Vorlage stehen ohne Zwischenraum untereinander;
   getrennt wird ueber die Leerzeile im Quelltext, die eine eigene
   Zeilenhoehe erzeugt. */
.kursdetail__text p + p {
    margin-top: 24px;
}

/* --- Galerie --- */
.kursdetail__galerie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 45px;
    margin-top: 44px;
    list-style: none;
}

.kursdetail__galerie li {
    aspect-ratio: 1 / 1;
}

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

/* Nach der Galerie folgt die Termine-Ueberschrift mit 44, nicht
   mit einer Trennlinie. Gilt auch, wenn die Galerie fehlt: dann
   traegt der Textblock den Abstand. */
.kursdetail__galerie + .kursdetail__h2,
.kursdetail__text + .kursdetail__h2 {
    margin-top: 44px;
}

/* --- Terminliste (Eigenbau, Rahmen nach der Vorlage) ---
   Typografie aus dem Kalender der Vorlage uebernommen:
   Datum 16 / 20 in #000, Zusatz 14 / 17 in #404040, Zeilenpitch 85.
   Der umlaufende Rahmen ebenfalls - die Vorlage stellt die Termine
   in einen Kasten. Zeilenaufbau und Buchen-Link sind eigene
   Entscheidung.

   Der Kasten traegt die aeussere Linie, die Zeilen nur ihre
   Trennlinie nach unten - und die letzte auch die nicht, sonst
   staende sie doppelt auf der Kante des Kastens. Dasselbe gilt oben:
   das fruehere border-top auf der ersten Zeile ist entfallen. */
.kursdetail__termine {
    list-style: none;
    border: 1px solid rgba(0, 0, 0, .2);
    padding-inline: 16px;
}

.kursdetail__termin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    padding-block: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.kursdetail__termin:last-child {
    border-bottom: 0;
}

.kursdetail__termin-tag {
    flex: 1 1 220px;
    font-size: 16px;
    line-height: 20px;
    color: var(--clr-text);
}

.kursdetail__termin-zusatz {
    flex: 1 1 240px;
    font-size: 14px;
    line-height: 17px;
    color: var(--clr-text-muted);
}

.kursdetail__termin-btn {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-lila);
    text-decoration: underline;
}

.kursdetail__termin-aus {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 24px;
    color: var(--clr-text-muted);
}

.kursdetail__leer {
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

/* Die Terminliste ist ein <ul> direkt nach der H2 - der
   16er-Abstand aus .kursdetail__h2 + * greift. Der Knopf darunter
   bekommt seine 32 aus .kursdetail__aktion. */

/* --- Kontaktangaben ---
   Gemessen 487 breit statt 720. */
.kursdetail__kontakt {
    max-width: 487px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.kursdetail__kontakt a {
    color: var(--clr-text);
    text-decoration: none;
}

.kursdetail__kontakt a:hover {
    text-decoration: underline;
}


/* =============================================================
   21 - KURSE: BUCHUNG   (/kurse/buchen)
   KEINE VORLAGE. Die Wix-Seite bucht ueber ein Kalender-Widget
   (/booking-calendar/...), das es im Relaunch nicht gibt - unsere
   Termine stehen in termine.csv. Ein Nachbau ist damit
   ausgeschlossen, die Seite ist Eigenbau.

   Uebernommen sind ausschliesslich belegte Werte aus Sektion 20
   und dem Kontaktformular (Sektion 16): Spaltenbreite 720 ueber
   130 Innenabstand, H1 46 / 57 in #620674 links, Fliesstext
   16 / 24, Knopf 132 x 40 bei padding 12/16.

   Alles Uebrige - Feldabstaende, Feldhoehen, Meldungsfarben - ist
   eigene Entscheidung und NICHT gemessen.
   ============================================================= */
.buchung {
    background: var(--clr-white);
    padding-block: 48px 32px;
}

.buchung .wrap {
    padding-inline: 130px;
}

.buchung__kopf h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 57px;
    letter-spacing: normal;
    color: var(--clr-lila);
    text-align: left;
}

.buchung__kurs {
    margin-top: 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.buchung__danke,
.buchung__leer {
    margin-top: 32px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

/* Links im Meldungstext folgen dem Muster von /angebot
   (.angebot-band__cta a): lila und unterstrichen. Hier ausdruecklich
   gesetzt statt aus main.css geerbt - sonst haenge die Darstellung
   an einer Regel, die fuer einen ganz anderen Zusammenhang gemacht
   ist. Betrifft "zum Kontaktformular" bei ausgebuchtem Kurs und die
   beiden Links im Hinweis, wenn kein Mailtext hinterlegt ist. */
.buchung__leer a {
    color: var(--clr-lila);
    text-decoration: underline;
}

.buchung__leer a:hover {
    color: var(--clr-lila-mid);
}

.buchung__fehler {
    margin-top: 32px;
    padding: 16px;
    border: 1px solid var(--clr-error);
    list-style: none;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-error);
}

.buchung__zurueck {
    margin-top: 32px;
}

.buchung-form {
    margin-top: 32px;
    max-width: 458px;
}

.buchung-form__feld + .buchung-form__feld {
    margin-top: 20px;
}

.buchung-form__feld label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.buchung-form__feld input,
.buchung-form__feld select,
.buchung-form__feld textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    background: var(--clr-white);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
}

.buchung-form__feld textarea {
    resize: vertical;
}

.buchung-form__feld [aria-invalid="true"] {
    border-color: var(--clr-error);
}

.buchung-form__meldung {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--clr-error);
}

.buchung-form__aktion {
    margin-top: 32px;
}

/* Rechtshinweis unter dem Formular. Gleiche Typografie wie
   .kontakt-form__hinweis - zwei Seiten, die dasselbe sagen, sollen
   auch gleich aussehen. Die Breite folgt dem Formular (458), damit
   der Absatz nicht ueber die Spalte hinauslaeuft.

   Bewusst KEINE Aufhebung im Mobilblock: .buchung-form behaelt seine
   458 auch dort, der Hinweis darunter darf also nicht breiter
   werden. Unter 458 Viewportbreite begrenzt ohnehin die Spalte. */
.buchung__hinweis {
    margin-top: 24px;
    max-width: 458px;
    font-family: var(--ff-ui);
    font-size: 14px;
    line-height: 19.6px;
    color: var(--clr-text-muted);
}

.buchung__hinweis a {
    color: var(--clr-lila);
    text-decoration: underline;
}

.buchung__hinweis a:hover { color: var(--clr-lila-mid); }

.buchung .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 16px;
    background: var(--clr-lila);
    border: 1px solid var(--clr-lila);
    border-radius: 0;
    color: var(--clr-white);
    text-decoration: none;
}

.buchung .btn:hover {
    background: var(--clr-lila-mid);
    border-color: var(--clr-lila-mid);
    color: var(--clr-white);
    text-decoration: none;
}


/* =============================================================
   RESPONSIVE
   ============================================================= */

/* Tablet: Hero enger, Künstlerin-Padding runter */
@media (max-width: 1019px) {
    .start-hero__inner { gap: var(--sp-2xl); padding-left: 0; }
    .start-kuenstlerin { padding: var(--sp-xl); }
    .start-willkommen { padding-block: var(--sp-xl); }
}

/* Teaser 3 → 2 Spalten */
@media (max-width: 899px) {
    .start-teaser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2xl) var(--sp-lg); }
    /* nicht belegt – Mobil-Vorlage nicht gemessen, provisorisch */
    .galerie        { --galerie-h: 300px; }
    .galerie--start { --galerie-h: 360px; }

    /* Einspaltig. Die Mediaspalte behält ihre 501er Bezugsbreite –
       Foto und Dekofläche sind in Prozent davon definiert, damit
       bleibt ihr Verhältnis auf jeder Breite erhalten. Deshalb hier
       ausdrücklich keine eigenen Werte für Foto und Deko. */
    .kuenstlerin-intro__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-xl); }
    .kuenstlerin-intro__media { width: 100%; max-width: 501px; }

    /* Angebot: einspaltig, Bild oben. nicht belegt – die Vorlage
       hat für Mobil ein eigenes Wix-Layout, provisorisch. */
    .angebot-band { grid-template-columns: minmax(0, 1fr); }
    .angebot-band--rechts .angebot-band__bild { order: 0; }
    .angebot-band__text { padding: 28px 32px 36px; }
    .angebot-band__text h2 { font-size: 30px; line-height: 38px; margin-bottom: 24px; }

    /* nicht belegt – Mobil-Vorlage nicht gemessen, provisorisch */
    .legal h1 { font-size: 36px; line-height: 50px; margin-bottom: 32px; }

    /* nicht belegt – Vorlage hat eigene Mobil-Werte, noch nicht gemessen */
    .page-title { padding-block: 40px 16px; }
    .page-title h1,
    .atelier-intro__box h2 { font-size: 36px; }
    .atelier-intro__box { padding: 18px 16px 24px; }
    .atelier-intro__box h2 { margin-bottom: 24px; }

    /* nicht belegt - Mobil-Vorlage nicht gemessen, provisorisch */
    .kontakt-kopf h1 { font-size: 36px; line-height: 46px; margin-bottom: 14px; }
    .kontakt-kopf p  { font-size: 18px; line-height: 32px; }

    /* nicht belegt - Mobil-Vorlage nicht gemessen, provisorisch.
       Einspaltig, Foto oben. Die Fotospalte behaelt ihre 329er
       Bezugsbreite, damit die Dekoflaeche ihr Verhaeltnis haelt. */
    .kontakt-form__inner,
    .kontakt-adresse__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-xl); }
    /* Einspaltig: die Fotospalte behaelt ihre 329er Bezugsbreite.
       Der Deko-Ueberhang nach links (62 bei 329) wird als Rand
       davorgesetzt, sonst laeuft die Flaeche aus der Content-
       Spalte heraus. Die max-width zieht sich auf schmalen
       Viewports entsprechend zurueck, damit nichts ueberlaeuft. */
    .kontakt-form__media {
        width: 100%;
        max-width: min(329px, 100% - 62px);
        margin-left: 62px;
    }
    .kontakt-form__spalte { padding: 0; }
    .kontakt-adresse { padding-block: var(--sp-xl); }
    .kontakt-adresse__block { padding-left: 0; margin-top: 0; }

    /* Kurse-Liste: einspaltig, Bild oben. nicht belegt - die
       Vorlage hat fuer Mobil ein eigenes Wix-Layout, provisorisch.
       Das Seitenverhaeltnis des Bildes bleibt das gemessene
       469 : 458, damit die Zuschnitte gleich wirken. */
    .kurs-band { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    /* Einspaltig gibt es keine Textspalte mehr, die die Hoehe
       traegt - hier setzt das aspect-ratio die Bildhoehe. */
    .kurs-band__bild { aspect-ratio: 469 / 458; }
    .kurs-band__text { padding: 36px 32px 40px; }
    .kurse-liste__bahn { margin-top: var(--sp-2xl); gap: var(--sp-xl); }
    .kurse-liste__leer { margin-top: var(--sp-2xl); }
    .kurse-liste__kopf h1 { font-size: 36px; line-height: 50px; }
}

/* Mobil: alles einspaltig */
@media (max-width: 767px) {
    .start-hero { padding-block: var(--sp-xl); }
    .start-hero__inner { flex-direction: column; align-items: center; gap: var(--sp-md); }
    .start-hero__icon { width: 90px; height: 90px; flex-basis: 90px; margin-top: 0; }
    .start-hero__text { flex-basis: auto; width: 100%; }
    .start-hero__schriftzug { width: 100%; max-width: 320px; margin-inline: auto; }
    .start-hero__tagline { text-align: center; font-size: 16px; }

    .start-willkommen { padding-block: var(--sp-lg); }
    .start-willkommen__box { padding: var(--sp-md); }
    .start-willkommen__cols { grid-template-columns: 1fr; row-gap: var(--sp-lg); }
    .start-willkommen__text { padding-left: 0; }

    .start-teaser { padding-block: var(--sp-2xl); }
    .start-teaser__grid { gap: var(--sp-xl) var(--sp-md); }
    .start-teaser__round-img { width: 90px; height: 90px; margin-bottom: var(--sp-md); }

    .start-kuenstlerin { padding: 0; }
    .start-kuenstlerin__inner { grid-template-columns: 1fr; }
    .start-kuenstlerin__box { min-height: 0; padding-block: var(--sp-xl); }
    .start-kuenstlerin__foto { min-height: 0; aspect-ratio: 4 / 3; }

    .start-instagram { padding-block: var(--sp-xl); }
    .start-instagram p { margin-bottom: var(--sp-md); }
    .start-galerie { padding-block: 0 var(--sp-xl); }

    /* nicht belegt – provisorisch */
    .angebot__inner { gap: 32px; }
    .angebot-band__text { padding: 24px 20px 28px; }
    .angebot-band__text h2 { font-size: 26px; line-height: 34px; margin-bottom: 20px; }
    .legal h1 { font-size: 30px; line-height: 42px; margin-bottom: 26px; }
    .legal { padding-block: 5px var(--sp-xl); }

    .atelier-video { padding-block: var(--sp-xl); }
    .atelier-galerie { padding-block: 0 var(--sp-xl); }
    .kurse-teaser { padding-block: var(--sp-xl); }
    .kurse-teaser__grid { grid-template-columns: 1fr; gap: 70px; }
    .naechste-termine { margin-top: var(--sp-xl); }
    .termin-zeile a { grid-template-columns: 1fr; gap: 0; padding-block: var(--sp-sm); }
    /* nicht belegt – Mobil-Vorlage nicht gemessen, provisorisch */
    .galerie        { --galerie-h: 240px; }
    .galerie--start { --galerie-h: 290px; }
    .galerie__nav--prev { left: 0; }
    .galerie__nav--next { right: 0; }
    .lightbox { padding: 56px 12px; }
    .lightbox__prev { left: 4px; }
    .lightbox__next { right: 4px; }
    .form-row-2 { grid-template-columns: 1fr; }

    /* nicht belegt – provisorisch bis zur Messung der Mobil-Vorlage */
    .page-title { padding-block: var(--sp-xl) var(--sp-md); }
    .page-title h1,
    .atelier-intro__box h2 { font-size: 30px; }

    .atelier-intro { padding-block: var(--sp-xl); }
    .atelier-intro__inner { grid-template-columns: 1fr; }
    .atelier-intro__img,
    .atelier-intro__box { grid-area: auto; width: 100%; }
    .atelier-intro__box { margin-top: 0; padding: var(--sp-lg) var(--sp-md); }
    .atelier-intro__box h2 { margin-bottom: var(--sp-md); }

    .kuenstlerin-intro { padding-block: var(--sp-xl); }
    .kuenstlerin-intro__text p + p { margin-top: var(--sp-md); }

    /* nicht belegt - provisorisch */
    .kontakt-kopf { padding-block: var(--sp-xl) var(--sp-md); }
    .kontakt-kopf h1 { font-size: 30px; line-height: 40px; margin-bottom: 12px; }
    .kontakt-kopf p  { font-size: 16px; line-height: 28.8px; }

    /* nicht belegt - provisorisch */
    .kontakt-form { padding-block: var(--sp-xl); }
    .kontakt-form__aktion { justify-content: flex-start; }
    .kontakt-adresse__titel { font-size: 20px; line-height: 34px; }

    /* Newsletter. nicht belegt - die Vorlage hat fuer Mobil ein
       eigenes Wix-Layout und kennt die Landingpage gar nicht. */
    .newsletter__danke,
    .newsletter__fehler { max-width: none; }
    .newsletter-aktion .btn { width: 100%; }

    /* nicht belegt - provisorisch */
    .kurse-liste { padding-block: var(--sp-lg) var(--sp-xl); }
    .kurse-liste__kopf h1 { font-size: 30px; line-height: 42px; }
    .kurse-liste__intro { margin-top: var(--sp-lg); }
    .kurs-band__text { padding: 28px 20px 32px; }
    .kurs-band__buchen .btn { width: 100%; }
}

/* Sehr schmal: Teaser einspaltig */
@media (max-width: 479px) {
    .start-teaser__grid { grid-template-columns: 1fr; }

    /* nicht belegt – provisorisch */
    .page-title h1,
    .atelier-intro__box h2 { font-size: 26px; }
    .kontakt-kopf h1 { font-size: 26px; line-height: 34px; }

    /* nicht belegt - provisorisch */
    .kurse-liste__kopf h1 { font-size: 26px; line-height: 36px; }
}

/* Kursdetail und Buchung: Innenabstand runter, Galerie zweispaltig.
   NICHT BELEGT - die Mobil-Vorlage der service-page ist nicht
   gemessen. Provisorisch, wie die uebrigen Mobilwerte. */
@media (max-width: 1019px) {
    .kursdetail__inner,
    .buchung .wrap { padding-inline: 60px; }
}

@media (max-width: 767px) {
    .kursdetail__inner,
    .buchung .wrap { padding-inline: 0; }

    .kursdetail__titel,
    .buchung__kopf h1 { font-size: 34px; line-height: 42px; }

    .kursdetail__galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Untereinander statt nebeneinander: der senkrechte Trenner
       wird zum waagerechten, sonst stuende er quer zur Leserichtung. */
    .kursdetail__meta { display: block; }
    .kursdetail__meta-zelle { display: block; padding-inline: 0; }
    .kursdetail__meta-zelle + .kursdetail__meta-zelle {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, .2);
    }

    .kursdetail__termin { gap: 4px 12px; }
}

@media (max-width: 479px) {
    .kursdetail__galerie { grid-template-columns: minmax(0, 1fr); }
    /* Ein Wert je Seite des Trennzeichens, nicht mehr zwischen zwei
       Woertern - deshalb 8 statt der frueheren 16. */
    .kursdetail__pfad { gap: 0 8px; }
}