/* Mansoura – neue Startseite „Saal“ (13.10.2026)
   Dunkel & edel nach der Vorlage des Nutzers: großer goldener Torbogen, Säulen, Vorhänge,
   goldene Schwunglinie, runde Gold-Medaillons, dezente marokkanische Ornamente (ohne Schrift, ohne Religiöses).
   Knopf-Regel: auf Gold → lila, auf dunkel → gold. */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Italic.ttf") format("truetype"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --nacht: #0F0616;
  --nacht-2: #170A22;
  --samt: #2B0F3D;
  --lila: #4A1A63;
  --amethyst: #6B2C91;
  --elfenbein: #FBF3E4;
  --text: #D9CBE3;
  --text-leise: #A996B5;
  --gold-hell: #FCE9B0;
  --gold: #E3B858;
  --gold-tief: #A87824;
  /* echtes Metall-Gold (kein Beige) */
  --gold-metall: linear-gradient(100deg, #8F611B 0%, #C9952F 16%, #F3D68A 36%, #FFF1C2 48%, #E8BE5E 62%, #B98326 84%, #8F611B 100%);
  --gold-flaeche: radial-gradient(60% 38% at 50% 26%, rgba(255, 244, 200, .8) 0%, rgba(255, 244, 200, 0) 70%), linear-gradient(180deg, #F2D17E 0%, #DDAA48 38%, #C38E2E 72%, #9F6E1F 100%);
  --linie: rgba(227, 184, 88, .38);
  --f-edel: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-ui: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-text: "Inter", "Segoe UI", Arial, sans-serif;
  --bogen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='140' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V40C0 22 14 10 30 6C40 3.5 46 2 50 0C54 2 60 3.5 70 6C86 10 100 22 100 40V140Z' fill='%23000'/%3E%3C/svg%3E");
  /* Khatam-Sternmuster (8-zackig), Gold mit sehr wenig Deckkraft */
  --khatam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23E3B858' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M48 0L62.06 14.06L81.94 14.06L81.94 33.94L96 48L81.94 62.06L81.94 81.94L62.06 81.94L48 96L33.94 81.94L14.06 81.94L14.06 62.06L0 48L14.06 33.94L14.06 14.06L33.94 14.06Z'/%3E%3Cpath d='M48 33.6L52.22 37.82L58.18 37.82L58.18 43.78L62.4 48L58.18 52.22L58.18 58.18L52.22 58.18L48 62.4L43.78 58.18L37.82 58.18L37.82 52.22L33.6 48L37.82 43.78L37.82 37.82L43.78 37.82Z'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nacht); color: var(--text); font: 400 16px/1.7 var(--f-text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
::selection { background: #E3B858; color: #1E0A2A; }

/* Gold-Schrift */
.goldtext, .abschnitt-kopf h2, .gross-zitat, .preis b, .siegen, .abschluss h2, .tk-text h2, .ueber-text h2 {
  background: var(--gold-metall); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker { font: 600 11.5px/1.4 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 15px 34px; border-radius: 999px; text-decoration: none; font: 600 13px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-align: center; cursor: pointer; transition: filter .2s ease, box-shadow .2s ease, transform .2s ease; }
.knopf-gold { background: var(--gold-metall); color: #1E0A2A; border: 1px solid #F3D68A; box-shadow: 0 12px 30px -12px rgba(227, 184, 88, .55), inset 0 1px 0 rgba(255, 255, 255, .55); }
.knopf-lila { background: linear-gradient(180deg, #6B2C91 0%, #3B1252 100%); color: var(--gold-hell); border: 1px solid #F3D68A; box-shadow: 0 10px 24px -10px rgba(30, 6, 42, .85), inset 0 1px 0 rgba(255, 255, 255, .18); }
.knopf:hover { filter: brightness(1.07); transform: translateY(-1px); }
.knopf-gold:hover { box-shadow: 0 0 0 1px #FFF1C2, 0 0 30px rgba(243, 214, 138, .55); }

/* ---------- Geschenkleiste + Kopf ---------- */
.geschenkleiste { display: block; padding: 9px 16px; text-align: center; text-decoration: none; font: 500 13px/1.4 var(--f-ui); letter-spacing: .04em; color: var(--text); background: #1B0A26; border-bottom: 1px solid var(--linie); }
.geschenkleiste b { color: var(--gold-hell); font-weight: 600; }
.geschenkleiste:hover { color: var(--gold-hell); }
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(15, 6, 22, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 28px; width: min(1180px, 100% - 32px); margin-inline: auto; padding-block: 12px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marke img { width: 36px; height: auto; }
.marke span { font: 600 26px/1 var(--f-edel); letter-spacing: .04em; background: var(--gold-metall); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hauptmenue { display: flex; gap: 30px; margin-left: auto; }
.hauptmenue a { position: relative; text-decoration: none; font: 500 12px var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: #E9DDF0; padding-block: 6px; }
.hauptmenue a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .25s ease; }
.hauptmenue a:hover { color: var(--gold-hell); }
.hauptmenue a:hover::after { transform: scaleX(1); }
.hauptmenue .nur-handy { display: none; }
.meine-kurse { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 600 11px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hell); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 16px; transition: background .2s ease, color .2s ease; }
.meine-kurse svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.meine-kurse:hover { background: var(--gold-metall); color: #1E0A2A; }
.menue-auf { display: none; width: 44px; height: 44px; padding: 11px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.menue-auf span { display: block; height: 2px; border-radius: 2px; background: var(--gold-hell); transition: transform .25s ease, opacity .25s ease; }
@media (max-width: 900px) {
  .kopf-innen { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
  .menue-auf { display: flex; }
  .marke { justify-self: center; }
  .meine-kurse { justify-self: end; width: 42px; height: 42px; padding: 0; justify-content: center; }
  .meine-kurse span { display: none; }
  .meine-kurse svg { width: 18px; height: 18px; }
  .hauptmenue { position: fixed; inset: 0; top: 0; z-index: -1; display: grid; align-content: center; justify-items: center; gap: 26px; margin: 0; background: radial-gradient(70% 50% at 50% 30%, #3B1252 0%, var(--nacht) 80%); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  .hauptmenue a { font-size: 14px; }
  .hauptmenue .nur-handy { display: block; color: var(--gold-hell); }
  .menue-offen .hauptmenue { opacity: 1; visibility: visible; }
  .menue-offen { overflow: hidden; }
  .menue-offen .menue-auf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-offen .menue-auf span:nth-child(2) { opacity: 0; }
  .menue-offen .menue-auf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Goldene Bogen-Rahmen (SVG über Fenstern und Bögen) ---------- */
.rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.rahmen path { fill: none; stroke: url(#gold-strich); stroke-width: 3; vector-effect: non-scaling-stroke; }
.rahmen path.innen { stroke-width: 1; opacity: .9; }

/* ---------- SAAL ---------- */
.saal { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(45% 55% at 50% 8%, rgba(150, 70, 200, .55) 0%, rgba(150, 70, 200, 0) 70%),
    var(--khatam) center top / 72px 72px,
    linear-gradient(180deg, #2A0C3A 0%, #1A0826 55%, var(--nacht) 100%);
}
.vorhang { position: absolute; top: 0; width: 24%; height: 78%; z-index: 0; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); pointer-events: none; }
.vorhang.links { left: 0; }
.vorhang.rechts { right: 0; transform: scaleX(-1); }
.buehne { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 34px 1.35fr 34px 1fr; align-items: end; gap: clamp(14px, 2.4vw, 34px); width: min(1180px, 100% - 32px); margin-inline: auto; padding-top: clamp(36px, 5vw, 72px); }
.fenster { position: relative; }
.fenster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; }
.fenster .kerzen-ebene { -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; }
.fenster.seite { height: clamp(330px, 34vw, 450px); }
.fenster.seite img { filter: brightness(.88) saturate(1.05); }
.saeule { position: relative; height: clamp(360px, 38vw, 500px); align-self: end;
  background:
    repeating-linear-gradient(90deg, rgba(90, 55, 10, .35) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, #7A5016 0%, #D9AA4C 26%, #FFF0B8 44%, #E2B456 60%, #9A6A20 100%);
  border-radius: 2px;
}
.saeule::before, .saeule::after { content: ""; position: absolute; left: -9px; right: -9px; height: 16px; background: var(--gold-metall); border-radius: 2px; box-shadow: 0 2px 0 rgba(60, 30, 0, .45); }
.saeule::before { top: -16px; height: 20px; border-radius: 6px 6px 2px 2px; }
.saeule::after { bottom: 0; }
.goldbogen { position: relative; height: clamp(500px, 52vw, 660px); display: grid; place-items: center; filter: drop-shadow(0 0 50px rgba(227, 184, 88, .28)); }
.goldbogen::before { content: ""; position: absolute; inset: 0; background: var(--gold-flaeche); -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; }
.goldbogen .rahmen path { stroke: #FFF1C2; stroke-width: 2.5; }
.goldbogen .rahmen path.innen { stroke: #8A5E1A; stroke-width: 1.2; }
.gb-inhalt { position: relative; z-index: 3; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24% 9% 9%; color: #2A0C3A; }
.gb-kicker { font: 600 11px/1.4 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: #5C3A10; }
.gb-inhalt h1 { font: 600 clamp(52px, 6.6vw, 86px)/.95 var(--f-edel); letter-spacing: .16em; text-transform: uppercase; color: #22082F; margin-right: -.16em; text-shadow: 0 1px 0 rgba(255, 241, 194, .6); }
.gb-zeile { font: italic 600 clamp(28px, 3.3vw, 40px)/1.15 var(--f-edel); color: #4A1A63; }
.gb-unter { font: 500 14px/1.6 var(--f-ui); color: #3D2410; letter-spacing: .02em; }
.gb-inhalt .knopf { margin-top: 10px; }
.gb-link { font: 600 13px var(--f-ui); letter-spacing: .05em; color: #3B1252; text-decoration: none; border-bottom: 1px solid rgba(59, 18, 82, .5); padding-bottom: 2px; }
.gb-link:hover { border-color: #3B1252; }
.balustrade { position: relative; z-index: 1; display: block; width: 100%; height: clamp(50px, 7vw, 90px); margin-top: -2px; }

/* Medaillons */
.medaillons { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1080px, 100% - 32px); margin-inline: auto; padding-block: clamp(18px, 3vw, 36px) clamp(56px, 7vw, 88px); }
.medaillons a { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 6px clamp(10px, 2vw, 26px); text-align: center; text-decoration: none; font-size: 14px; line-height: 1.5; color: var(--text-leise); }
.medaillons a + a { border-left: 1px solid var(--linie); }
.medaillons b { margin-top: 8px; font: 600 12px var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hell); }
.medaillon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #7A35A3 0%, #3B1252 72%); box-shadow: 0 0 0 2px #D7A947, 0 0 0 7px rgba(227, 184, 88, .12), 0 0 0 8px rgba(227, 184, 88, .45), 0 14px 30px -10px rgba(0, 0, 0, .8); transition: box-shadow .25s ease, transform .25s ease; }
.medaillon svg { width: 32px; height: 32px; fill: none; stroke: var(--gold-hell); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.medaillons a:hover .medaillon { transform: translateY(-2px); box-shadow: 0 0 0 2px #FFF1C2, 0 0 0 7px rgba(227, 184, 88, .2), 0 0 0 8px rgba(227, 184, 88, .7), 0 0 30px rgba(227, 184, 88, .4); }
.medaillons a:hover b { color: #FFF1C2; }

@media (max-width: 900px) {
  .buehne { grid-template-columns: 1fr; padding-top: 28px; }
  .fenster.seite, .saeule { display: none; }
  .goldbogen { height: auto; min-height: 560px; width: min(460px, 100%); justify-self: center; }
  .gb-inhalt { padding: 130px 9% 48px; }
  .vorhang { width: 34%; height: 46%; opacity: .8; }
  .medaillons { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .medaillons a:nth-child(3) { border-left: 0; }
}

/* ---------- Zier-Trenner (Stern mit Goldlinien) ---------- */
.zier { display: block; width: 220px; height: 22px; margin: 0 auto; }
.zier path, .zier rect { fill: none; stroke: url(#gold-strich); stroke-width: 1.2; }
.zier .strich { stroke: url(#gold-quer); }

/* ---------- Abschnitte allgemein ---------- */
section { position: relative; }
.abschnitt-kopf { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.abschnitt-kopf h2 { font: 600 clamp(36px, 5vw, 56px)/1.1 var(--f-edel); }
.unterzeile { font: italic 500 clamp(20px, 2.4vw, 24px)/1.4 var(--f-edel); color: var(--text); }

/* Versprechen */
.versprechen { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(56px, 7vw, 90px) 16px; background: var(--nacht-2); border-block: 1px solid var(--linie); }
.gross-zitat { font: italic 600 clamp(32px, 4.6vw, 54px)/1.15 var(--f-edel); }
.versprechen p:last-child { max-width: 34em; color: var(--text); font-size: 17px; }

/* Angebote */
.angebote { padding: clamp(72px, 9vw, 120px) 0; width: min(1120px, 100% - 32px); margin-inline: auto; }
.angebot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.angebot + .angebot { margin-top: clamp(72px, 9vw, 120px); }
.angebot.gespiegelt .schaufenster { order: 2; }
.schaufenster { position: relative; display: block; aspect-ratio: 5 / 6; max-width: 480px; width: 100%; justify-self: center; }
.sf-buehne { position: absolute; inset: 0; display: grid; place-items: center; padding: 22% 10% 10%;
  background: radial-gradient(55% 45% at 50% 55%, rgba(227, 184, 88, .22) 0%, rgba(227, 184, 88, 0) 70%), radial-gradient(120% 90% at 50% 0%, #4A1A63 0%, #24092F 60%, #14051C 100%);
  -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; }
.sf-buehne img { max-height: 100%; width: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)); transition: transform .5s ease; }
.sf-buehne img.rund { width: 88%; height: auto; filter: drop-shadow(0 0 0 #000) drop-shadow(0 24px 34px rgba(0, 0, 0, .65)); border-radius: 50%; box-shadow: 0 0 0 2px #D7A947, 0 0 0 9px rgba(227, 184, 88, .14); }
.schaufenster:hover .sf-buehne img { transform: scale(1.03); }
.angebot-text { display: grid; justify-items: start; gap: 16px; }
.angebot-text h3 { font: 600 clamp(38px, 4.6vw, 54px)/1.05 var(--f-edel); color: var(--elfenbein); }
.angebot-satz { font: italic 500 clamp(20px, 2.2vw, 24px)/1.4 var(--f-edel); color: var(--gold-hell); }
.sterne { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.sterne li { position: relative; padding-left: 30px; color: var(--text); }
.sterne li::before { content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg fill='none' stroke='%23E3B858' stroke-width='1.6'%3E%3Crect x='-6' y='-6' width='12' height='12'/%3E%3Crect x='-6' y='-6' width='12' height='12' transform='rotate(45)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.preis b { font: 600 clamp(46px, 5vw, 58px)/1 var(--f-edel); }
.preis s { font-size: 18px; color: var(--text-leise); }
.preis small { font: 600 12px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 4px; }
.mehr-link { font: 600 13px var(--f-ui); letter-spacing: .08em; color: var(--gold-hell); text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.mehr-link:hover { border-color: var(--gold-hell); }
.klein { font-size: 13px; color: var(--text-leise); }
@media (max-width: 820px) {
  .angebot { grid-template-columns: 1fr; }
  .angebot.gespiegelt .schaufenster { order: 0; }
  .schaufenster { max-width: 380px; }
}

/* Geschenk (Journal) */
.geschenk { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); margin-top: clamp(80px, 10vw, 130px); padding: clamp(28px, 4vw, 52px); border-radius: 18px; background: radial-gradient(80% 120% at 0% 50%, rgba(227, 184, 88, .14) 0%, transparent 60%), linear-gradient(135deg, #2B0F3D 0%, #170A22 100%); box-shadow: 0 0 0 1px var(--linie); }
.geschenk::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(227, 184, 88, .22); border-radius: 12px; pointer-events: none; }
.geschenk img { width: 100%; max-width: 440px; justify-self: center; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
.geschenk-text { display: grid; justify-items: start; gap: 14px; }
.geschenk-text h3 { font: 600 clamp(32px, 4vw, 44px)/1.1 var(--f-edel); color: var(--elfenbein); }
.geschenk-text p { font-size: 17px; }
@media (max-width: 760px) { .geschenk { grid-template-columns: 1fr; text-align: center; } .geschenk-text { justify-items: center; } }

/* Methode */
.methode { padding: clamp(72px, 9vw, 110px) 16px; background: linear-gradient(180deg, var(--nacht-2) 0%, var(--nacht) 100%), var(--khatam); border-block: 1px solid var(--linie); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px); width: min(980px, 100%); margin-inline: auto; }
@media (max-width: 760px) { .zwei { grid-template-columns: 1fr; } }
.saeulen-karte { display: grid; justify-items: center; gap: 16px; text-align: center; padding: clamp(30px, 4vw, 44px) clamp(22px, 3vw, 36px); border-radius: 16px; background: linear-gradient(180deg, rgba(74, 26, 99, .45) 0%, rgba(23, 10, 34, .6) 100%); box-shadow: 0 0 0 1px var(--linie); }
.saeulen-karte h3 { font: 600 32px/1.1 var(--f-edel); color: var(--elfenbein); margin-top: 6px; }

/* Stimmen */
.stimmen { padding: clamp(72px, 9vw, 110px) 0; width: min(1160px, 100% - 32px); margin-inline: auto; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .drei { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.stimme { position: relative; margin: 0; display: grid; align-content: space-between; gap: 22px; padding: 46px 28px 28px; border-radius: 16px; background: var(--nacht-2); box-shadow: 0 0 0 1px var(--linie); }
.stimme::before { content: "“"; position: absolute; top: -6px; left: 24px; font: 600 96px/1 var(--f-edel); background: var(--gold-metall); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stimme blockquote { margin: 0; font: italic 500 19px/1.55 var(--f-edel); color: var(--elfenbein); }
.stimme figcaption { display: flex; align-items: center; gap: 12px; font: 600 13px var(--f-ui); letter-spacing: .08em; color: var(--gold-hell); }
.stimme figcaption span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 12px; color: #1E0A2A; background: var(--gold-metall); }

/* Tageskarte */
.tageskarte { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 80px); width: min(940px, 100% - 32px); margin-inline: auto; padding-block: clamp(72px, 9vw, 110px); border-top: 1px solid var(--linie); }
.tk-rueckseite { position: relative; display: grid; place-items: center; width: 190px; aspect-ratio: 360 / 620; border-radius: 14px; background: radial-gradient(70% 55% at 50% 45%, #6B2C91 0%, #3B1252 60%, #22082F 100%); box-shadow: 0 0 0 2px #D7A947, 0 30px 50px -24px rgba(0, 0, 0, .9), 0 0 50px rgba(227, 184, 88, .18); transform: rotate(-5deg); transition: transform .35s ease; }
.tk-rueckseite::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(243, 214, 138, .7); border-radius: 9px; }
.tk-rueckseite:hover { transform: rotate(0) translateY(-4px); }
.tk-rueckseite img { width: 62%; aspect-ratio: 1; object-fit: contain; padding: 11%; border-radius: 50%; background: radial-gradient(circle, #FFFDF8 0%, #F3E2B3 100%); box-shadow: 0 0 0 2px #D7A947, 0 0 0 6px rgba(227, 184, 88, .2), 0 0 24px rgba(227, 184, 88, .35); }
.tk-text { display: grid; justify-items: start; gap: 14px; }
.tk-text h2 { font: 600 clamp(36px, 4.6vw, 50px)/1.1 var(--f-edel); }
.haken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font: 500 13px var(--f-ui); color: var(--text); }
.haken li::before { content: "✓"; margin-right: 7px; color: var(--gold); font-weight: 700; }
@media (max-width: 680px) { .tageskarte { grid-template-columns: 1fr; justify-items: center; text-align: center; } .tk-text { justify-items: center; } .haken { justify-content: center; } }

/* Über Mansoura */
.ueber { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(36px, 6vw, 90px); width: min(1100px, 100% - 32px); margin-inline: auto; padding-block: clamp(72px, 9vw, 120px); }
.fenster.portraet { aspect-ratio: 4 / 5; max-width: 440px; width: 100%; justify-self: center; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.ueber-text { display: grid; gap: 18px; }
.ueber-text h2 { font: 600 clamp(36px, 4.6vw, 52px)/1.1 var(--f-edel); }
.siegen { font: italic 600 clamp(28px, 3.4vw, 36px)/1.2 var(--f-edel); margin-top: 6px; }
@media (max-width: 820px) { .ueber { grid-template-columns: 1fr; } .fenster.portraet { max-width: 340px; } }

/* Abschluss */
.abschluss { display: grid; justify-items: center; gap: 26px; text-align: center; padding: clamp(80px, 10vw, 130px) 16px; background: radial-gradient(60% 80% at 50% 0%, rgba(150, 70, 200, .45) 0%, rgba(150, 70, 200, 0) 70%), var(--khatam) center / 72px 72px, linear-gradient(180deg, #24092F 0%, var(--nacht) 100%); border-top: 1px solid var(--linie); }
.abschluss-logo img { width: 160px; aspect-ratio: 1; object-fit: contain; padding: 26px; border-radius: 50%; background: radial-gradient(circle, #FFFDF8 0%, #F3E2B3 100%); box-shadow: 0 0 0 2px #D7A947, 0 0 0 8px rgba(227, 184, 88, .18), 0 0 0 9px rgba(227, 184, 88, .55), 0 0 60px rgba(227, 184, 88, .3); transition: transform .3s ease; }
.abschluss-logo:hover img { transform: scale(1.03); }
.abschluss h2 { font: 600 clamp(40px, 5.6vw, 64px)/1.1 var(--f-edel); }

/* Fußzeile */
.fuss { display: grid; justify-items: center; gap: 22px; padding: 56px 16px calc(36px + env(safe-area-inset-bottom, 0px)); text-align: center; background: #0A040F; border-top: 1px solid var(--linie); }
.fuss .marke span { font-size: 30px; }
.fuss-links, .recht { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.fuss-links a, .recht a { text-decoration: none; font: 500 12px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.recht a { letter-spacing: .06em; text-transform: none; font-size: 13px; color: var(--text-leise); }
.fuss a:hover { color: var(--gold-hell); }
.social { display: flex; gap: 14px; }
.social-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linie); color: var(--gold-hell); transition: background .2s ease, color .2s ease; }
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.social-icon:hover { background: var(--gold-metall); color: #1E0A2A !important; }
.widerruf { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 12px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #1E0A2A; background: var(--gold-metall); border: 1px solid #F3D68A; border-radius: 999px; padding: 12px 24px; }
.widerruf svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hinweis { max-width: 46em; font-size: 12.5px; line-height: 1.6; color: var(--text-leise); }
.copy { font-size: 12px; color: var(--text-leise); }

/* Handy: feste Buchungsleiste unten */
.handy-leiste { display: none; }
@media (max-width: 760px) {
  .handy-leiste { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font: 600 12.5px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #1E0A2A; background: var(--gold-metall); border: 1px solid #F3D68A; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8); }
  .handy-leiste b { font: 600 22px/1 var(--f-edel); letter-spacing: 0; }
  .fuss { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* Kerzen-Flackern (für kerzen.js) */
.kerzen-ebene { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.kerzen-flamme, .kerzen-schein { position: absolute; display: block; mix-blend-mode: screen; will-change: transform, opacity; }
.kerzen-flamme { border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; background: radial-gradient(ellipse 50% 60% at 50% 68%, rgba(255, 255, 245, .95) 0%, rgba(255, 233, 160, .85) 32%, rgba(255, 176, 70, .5) 62%, rgba(255, 140, 40, 0) 78%); filter: blur(1.2px); transform-origin: 50% 95%; animation: kerze-flackern 1.7s ease-in-out infinite alternate; }
.kerzen-schein { border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 110, .38) 0%, rgba(255, 170, 80, .16) 40%, rgba(255, 150, 60, 0) 70%); animation: kerze-schein 2.7s ease-in-out infinite alternate; }
@keyframes kerze-flackern { 0% { transform: scale(1, 1) skewX(0); opacity: .9; } 18% { transform: scale(.95, 1.07) skewX(2.5deg); opacity: 1; } 36% { transform: scale(1.04, .94) skewX(-2deg); opacity: .82; } 55% { transform: scale(.97, 1.05) skewX(1.5deg); opacity: .95; } 74% { transform: scale(1.02, .97) skewX(-1deg); opacity: .86; } 100% { transform: scale(.99, 1.03) skewX(.5deg); opacity: 1; } }
@keyframes kerze-schein { 0% { opacity: .55; transform: scale(.94); } 45% { opacity: .9; transform: scale(1.04); } 100% { opacity: .65; transform: scale(.98); } }

/* Cookie-Banner (einwilligung.js) im dunklen Stil */
.einwilligung { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(24px); transition: opacity .3s ease, transform .3s ease; }
.einwilligung.sichtbar { opacity: 1; transform: none; }
.ew-karte { pointer-events: auto; width: min(760px, 100%); background: #1B0A26; border-radius: 18px; box-shadow: 0 0 0 1px var(--linie), 0 30px 60px -20px rgba(0, 0, 0, .9); padding: 22px 24px; display: grid; grid-template-columns: 80px 1fr; gap: 6px 20px; align-items: start; max-height: calc(100vh - 32px); overflow-y: auto; }
.keks { width: 80px; height: 80px; grid-row: span 2; filter: drop-shadow(0 6px 12px rgba(227, 184, 88, .3)); }
.ew-text { display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text); }
.ew-text > b { font: 600 24px var(--f-edel); color: var(--gold-hell); }
.ew-text a { color: var(--gold-hell); }
.ew-option { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; cursor: pointer; }
.ew-option input { width: 18px; height: 18px; margin-top: 1px; accent-color: #E3B858; }
.ew-option.ew-fix { cursor: default; opacity: .8; }
.ew-knoepfe { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.ew-knopf { font: 600 12px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; padding: 13px 22px; border-radius: 999px; cursor: pointer; border: 1px solid #F3D68A; background: var(--gold-metall); color: #1E0A2A; }
.ew-link { background: none; border: 0; font: 600 13px var(--f-ui); color: var(--gold-hell); text-decoration: underline; cursor: pointer; padding: 8px 4px; }
@media (max-width: 560px) { .ew-karte { grid-template-columns: 1fr; padding: 18px; } .keks { grid-row: auto; width: 60px; height: 60px; justify-self: center; } .ew-knoepfe { grid-column: 1; } .ew-knopf { flex: 1 1 140px; } }

[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .knopf, .medaillon, .tk-rueckseite, .sf-buehne img, .abschluss-logo img { transition: none; } }

/* waagerechte Linien: Verlauf funktioniert bei Höhe 0 nicht → feste Goldfarbe */
.zier .strich { stroke: #C9952F; }

/* Handy: ohne Unschärfe-Effekt, sonst öffnet sich das Menü nicht über die ganze Seite */
@media (max-width: 900px) { .kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0F0616; } .hauptmenue { padding-top: 70px; } }

/* ================= Shop-Optik (13.10.) ================= */
.shop { padding: clamp(72px, 9vw, 120px) 0; width: min(1180px, 100% - 32px); margin-inline: auto; }
.reiter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -12px 0 clamp(32px, 4vw, 48px); }
.reiter button { font: 600 11.5px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); background: transparent; border: 1px solid var(--linie); border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.reiter button:hover { border-color: var(--gold); }
.reiter button[aria-pressed="true"] { background: var(--gold-metall); color: #1E0A2A; border-color: #F3D68A; }
.regal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); align-items: stretch; }
@media (max-width: 980px) { .regal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .regal { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; } }
.ware { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 26px; border-radius: 18px; background: linear-gradient(180deg, #1F0C2C 0%, #140820 100%); box-shadow: 0 0 0 1px var(--linie), 0 30px 50px -30px rgba(0, 0, 0, .9); transition: transform .3s ease, box-shadow .3s ease; }
.ware:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #E3B858, 0 0 40px -6px rgba(227, 184, 88, .35), 0 30px 50px -30px rgba(0, 0, 0, .9); }
.ware.hervor { box-shadow: 0 0 0 1.5px #D7A947, 0 0 50px -10px rgba(227, 184, 88, .35), 0 30px 50px -30px rgba(0, 0, 0, .9); }
.ware-fenster { position: relative; display: block; aspect-ratio: 5 / 5.4; width: 100%; }
.ware-fenster .sf-buehne { padding: 26% 8% 8%; }
.ware-fenster .sf-buehne img.rund { width: 80%; }
.ware:hover .sf-buehne img { transform: scale(1.04); }
.schild { position: absolute; z-index: 3; top: 30%; right: -6px; font: 700 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #1E0A2A; background: var(--gold-metall); border: 1px solid #F3D68A; border-radius: 999px; padding: 7px 13px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8); }
.schild.rabatt { font-size: 13px; letter-spacing: .04em; }
.ware-text { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 8px 0; }
.ware-text h3 { font: 600 clamp(28px, 2.6vw, 32px)/1.1 var(--f-edel); color: var(--elfenbein); }
.ware-text h3 a { text-decoration: none; }
.ware-text h3 a:hover { color: var(--gold-hell); }
.ware-text > p { font: italic 500 19px/1.4 var(--f-edel); color: var(--gold-hell); }
.ware-text .sterne { gap: 7px; font-size: 14.5px; }
.ware-text .sterne li { padding-left: 26px; }
.ware-text .sterne li::before { width: 13px; height: 13px; }
.ware-text .preis { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(227, 184, 88, .2); }
.ware-text .preis b { font-size: 46px; }
.knopf.breit { width: 100%; margin-top: 6px; }
.ware-text .mehr-link { align-self: center; margin-top: 4px; font-size: 12px; }
@media (min-width: 981px) { .ware-text > p { min-height: 2.8em; } .ware-text .sterne { min-height: 4.6em; } }

/* Vertrauensleiste */
.vertrauen { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 22px clamp(16px, 3vw, 32px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; border-radius: 16px; background: rgba(43, 15, 61, .45); box-shadow: 0 0 0 1px var(--linie); }
.vertrauen li { display: flex; align-items: center; gap: 14px; font-size: 13px; line-height: 1.45; color: var(--text-leise); }
.vertrauen svg { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 50%; fill: none; stroke: var(--gold-hell); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 0 0 1px #D7A947; background: radial-gradient(circle at 50% 30%, #6B2C91, #3B1252); }
.vertrauen b { display: block; font: 600 11.5px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 2px; }
@media (max-width: 980px) { .vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vertrauen { grid-template-columns: 1fr; } }
/* Tor: weniger Text, mehr Luft */
.gb-inhalt { gap: 18px; padding-top: 30%; }
.gb-inhalt .gb-kicker { margin-top: 2px; }
.gb-inhalt .knopf { margin-top: 16px; }
@media (max-width: 900px) { .goldbogen { min-height: 500px; } .gb-inhalt { padding: 150px 9% 56px; } }

@media (max-width: 420px) { .knopf.breit { font-size: 12px; letter-spacing: .08em; padding-inline: 18px; } }

/* ================= Wärmer & freundlicher (13.10., Vorlage Instagram-Beitrag) =================
   Dunkel jetzt warmes Pflaume statt kühlem Blau-Violett; drei Abschnitte mit Verlauf bis Orchidee. */
:root {
  --nacht: #170B16;
  --nacht-2: #211020;
  --samt: #3A1838;
  --text: #E6D6E2;
  --text-leise: #B9A2B4;
  --orchidee: linear-gradient(180deg, #170B16 0%, #3A1736 22%, #6A2B5F 50%, #A2559A 78%, #B866A8 100%);
}
body { background: var(--nacht); }
.geschenkleiste { background: #241022; }
.kopf { background: rgba(23, 11, 22, .92); }
@media (max-width: 900px) { .kopf { background: #170B16; } .hauptmenue { background: radial-gradient(70% 50% at 50% 30%, #6A2B5F 0%, #170B16 80%); } }
.saal { background:
    radial-gradient(45% 55% at 50% 8%, rgba(190, 90, 170, .5) 0%, rgba(190, 90, 170, 0) 70%),
    var(--khatam) center top / 72px 72px,
    linear-gradient(180deg, #3A1434 0%, #241020 55%, var(--nacht) 100%); }
.ware { background: linear-gradient(180deg, #2A1228 0%, #1B0C1A 100%); }
.sf-buehne { background: radial-gradient(55% 45% at 50% 55%, rgba(227, 184, 88, .22) 0%, rgba(227, 184, 88, 0) 70%), radial-gradient(120% 90% at 50% 0%, #6A2B5F 0%, #3A1736 55%, #1E0C1C 100%); }
.medaillon, .vertrauen svg { background: radial-gradient(circle at 50% 30%, #9A4A8E 0%, #4E1C4A 72%); }
.vertrauen { background: rgba(58, 23, 54, .5); }
.stimme { background: var(--nacht-2); }
.tk-rueckseite { background: radial-gradient(70% 55% at 50% 45%, #9A4A8E 0%, #4E1C4A 60%, #2A0F28 100%); }
.fuss { background: #120810; }

/* Orchideen-Verlauf: Versprechen + Methode (dunkel → Orchidee → dunkel), Abschluss (dunkel → Orchidee) */
.versprechen, .methode { background: linear-gradient(180deg, var(--nacht) 0%, #4A1C45 28%, #8E4686 55%, #4A1C45 82%, var(--nacht) 100%); border-block: 0; }
.abschluss { background: var(--khatam) center / 72px 72px, var(--orchidee); border-top: 0; }
.versprechen .gross-zitat, .methode .abschnitt-kopf h2, .abschluss h2 { background: none; color: #FFF6EA; text-shadow: 0 2px 24px rgba(40, 10, 40, .45); }
.versprechen p:last-child, .methode .unterzeile, .methode p { color: #F6E8F0; }
.methode .kicker, .versprechen .kicker { color: #FCE9B0; }
.saeulen-karte { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 236, 214, .32); backdrop-filter: blur(4px); }
.saeulen-karte h3 { color: #FFF6EA; }
.abschluss .knopf-gold { box-shadow: 0 14px 30px -12px rgba(40, 10, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .55); }
/* ================= Ruhiger & hochkonvertierend (13.10.) ================= */
.saal { padding-bottom: clamp(24px, 4vw, 48px); }
.versprechen { padding-block: clamp(48px, 6vw, 72px); }
.tageskarte { padding-block: clamp(56px, 7vw, 84px); }

/* Logo unten: echter Goldring (Metall-Verlauf rundherum, feine Innenlinien, Leuchten) */
.abschluss-logo { display: grid; place-items: center; width: 184px; aspect-ratio: 1; border-radius: 50%; padding: 6px; text-decoration: none;
  background: conic-gradient(from 200deg, #8F611B, #E3B858, #FFF1C2, #D7A947, #9A6A20, #E3B858, #FFF6D6, #C9952F, #8F611B);
  box-shadow: 0 0 0 1px rgba(255, 241, 194, .6), 0 0 0 11px rgba(255, 236, 200, .08), 0 0 0 12px rgba(227, 184, 88, .55), 0 0 70px rgba(243, 214, 138, .45), 0 24px 44px -14px rgba(40, 10, 40, .7);
  transition: transform .3s ease, box-shadow .3s ease; }
.abschluss-logo img { width: 100%; height: 100%; padding: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #FFFEFA 0%, #F8EEDA 70%, #EEDDB8 100%); box-shadow: inset 0 0 0 1.5px #B98326, inset 0 0 0 5px #FFF9EC, inset 0 0 0 6px rgba(185, 131, 38, .7), inset 0 8px 18px rgba(120, 80, 20, .22); transition: none; }
.abschluss-logo:hover { transform: scale(1.03); box-shadow: 0 0 0 1px #FFF1C2, 0 0 0 11px rgba(255, 236, 200, .12), 0 0 0 12px rgba(243, 214, 138, .8), 0 0 90px rgba(243, 214, 138, .6), 0 24px 44px -14px rgba(40, 10, 40, .7); }
.abschluss-logo:hover img { transform: none; }
/* ================= Mehr helles Lila (13.10., Nutzerwunsch) =================
   Grundton jetzt mittleres Pflaume-Lila statt fast Schwarz; dunkel nur noch in Karten/Fußzeile. */
:root {
  --nacht: #4A2150;
  --nacht-2: #57285E;
  --samt: #6A3270;
  --text: #F5E9F1;
  --text-leise: #DCC6D8;
  --linie: rgba(243, 214, 138, .45);
  --orchidee: linear-gradient(180deg, #4A2150 0%, #6A3070 30%, #9A4F92 60%, #BE72B0 85%, #C985BC 100%);
}
body { background: var(--nacht); }
.geschenkleiste { background: #3A1840; }
.kopf { background: rgba(58, 24, 64, .94); }
@media (max-width: 900px) { .kopf { background: #3A1840; } .hauptmenue { background: radial-gradient(70% 50% at 50% 30%, #9A4F92 0%, #4A2150 80%); } }
.saal { background:
    radial-gradient(50% 60% at 50% 6%, rgba(235, 150, 215, .55) 0%, rgba(235, 150, 215, 0) 70%),
    var(--khatam) center top / 72px 72px,
    linear-gradient(180deg, #7A3A80 0%, #5E2A64 55%, var(--nacht) 100%); }
.ware { background: linear-gradient(180deg, #3E1A44 0%, #2F1234 100%); }
.sf-buehne { background: radial-gradient(55% 45% at 50% 55%, rgba(243, 214, 138, .25) 0%, rgba(243, 214, 138, 0) 70%), radial-gradient(120% 90% at 50% 0%, #A0549A 0%, #6A3070 55%, #42194A 100%); }
.medaillon, .vertrauen svg { background: radial-gradient(circle at 50% 30%, #B566AA 0%, #6A2E66 72%); }
.vertrauen { background: rgba(255, 255, 255, .07); }
.stimme { background: linear-gradient(180deg, #3E1A44 0%, #2F1234 100%); }
.tk-rueckseite { background: radial-gradient(70% 55% at 50% 45%, #B566AA 0%, #6A2E66 60%, #3E1A44 100%); }
.versprechen { background: linear-gradient(180deg, var(--nacht) 0%, #7A3A80 35%, #B060A6 60%, #7A3A80 85%, var(--nacht) 100%); }
.fuss { background: #2A1030; }
.reiter button { background: rgba(255, 255, 255, .06); }
.hauptmenue a { color: #FFF4FA; }
.ware-text .preis { border-top-color: rgba(243, 214, 138, .3); }
/* ================= Feinschliff 13.10. abends ================= */
/* Produktbilder im Bogenfenster NIE abschneiden: ganz zeigen, nicht strecken */
.sf-buehne { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.sf-buehne img, .fenster .sf-buehne img { position: static; inset: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; -webkit-mask: none; mask: none; justify-self: center; align-self: center; }
.sf-buehne img.rund, .fenster .sf-buehne img.rund { width: 86%; height: auto; max-height: 100%; aspect-ratio: 1; }

/* Emojis dezent */
.emo { font-size: .55em; vertical-align: .18em; letter-spacing: .12em; opacity: .9; }

/* Produktkarten: kompakter ohne Aufzählung */
.ware-text { gap: 8px; }
.ware-text > p { min-height: 0; }
@media (min-width: 981px) { .ware-text > p { min-height: 2.8em; } }

/* Fußzeile: ruhig und geordnet (3 Spalten + feine Hinweiszeile) */
.fuss { display: block; padding: clamp(48px, 6vw, 72px) 16px calc(28px + env(safe-area-inset-bottom, 0px)); text-align: left; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px 48px; width: min(1100px, 100%); margin-inline: auto; padding-bottom: 36px; border-bottom: 1px solid rgba(243, 214, 138, .2); }
.fuss-marke { display: grid; justify-items: start; gap: 14px; }
.fuss-marke p { font: 500 11.5px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--text-leise); }
.fuss-marke .social { gap: 10px; margin-top: 4px; }
.fuss-marke .social-icon { width: 38px; height: 38px; }
.fuss-marke .social-icon svg { width: 16px; height: 16px; }
.fuss-spalte { display: grid; align-content: start; justify-items: start; gap: 10px; }
.fuss-spalte b { margin-bottom: 4px; font: 600 11px var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.fuss-spalte a { text-decoration: none; font-size: 14px; color: var(--text); }
.fuss-spalte a:hover { color: var(--gold-hell); }
.fuss .widerruf { margin-top: 8px; padding: 9px 16px; font-size: 11px; letter-spacing: .12em; color: var(--gold-hell); background: transparent; border: 1px solid var(--gold); }
.fuss .widerruf:hover { color: #1E0A2A; background: var(--gold-metall); }
.fuss-unten { display: grid; gap: 8px; width: min(1100px, 100%); margin: 24px auto 0; }
.fuss-unten p { max-width: none; font-size: 12px; line-height: 1.6; color: var(--text-leise); opacity: .85; }
.fuss-unten .copy { margin-top: 6px; }
@media (max-width: 760px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .fuss-raster { grid-template-columns: 1fr; } }
/* Menü nie umbrechen */
.hauptmenue a, .meine-kurse { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 901px) { .kopf-innen { gap: 20px; } .hauptmenue { gap: 20px; } .hauptmenue a { letter-spacing: .14em; font-size: 11.5px; } .marke span { font-size: 23px; } }

/* Emojis noch dezenter, nie schräg */
.emo { font-style: normal; font-size: .42em; opacity: .75; vertical-align: .3em; }

/* ================= Nur EIN Torbogen im Saal (13.10.) ================= */
.buehne { grid-template-columns: 34px minmax(0, 560px) 34px; justify-content: center; gap: clamp(18px, 3vw, 40px); }
.goldbogen { height: clamp(540px, 54vw, 680px); }
.saeule { height: clamp(420px, 42vw, 540px); }
.gb-inhalt { padding-inline: 12%; }
@media (max-width: 900px) { .buehne { grid-template-columns: 1fr; } }

/* Tageskarte: goldene Tarotkarten als zarter Hintergrund (volle Breite) */
.tageskarte { width: 100%; max-width: none; padding-inline: max(16px, calc((100% - 940px) / 2)); border-top: 1px solid var(--linie);
  background: linear-gradient(180deg, rgba(74, 33, 80, .95) 0%, rgba(74, 33, 80, .82) 50%, rgba(74, 33, 80, .95) 100%), url("img/neu_karten.webp") center / cover no-repeat; }
/* Tor: „Tarot · Psychologie · Spiritualität" groß statt „TAROT" */
.gb-saeulen { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .45em; font: 600 clamp(22px, 2.6vw, 32px)/1.25 var(--f-edel); letter-spacing: .14em; text-transform: uppercase; color: #22082F; text-shadow: 0 1px 0 rgba(255, 241, 194, .6); }
.gb-saeulen span { color: #8A5E1A; }
.gb-inhalt h1.gb-zeile { font: italic 600 clamp(38px, 4.6vw, 58px)/1.08 var(--f-edel); letter-spacing: 0; text-transform: none; color: #4A1A63; margin: 6px 0 0; text-shadow: 0 1px 0 rgba(255, 241, 194, .5); }
@media (max-width: 420px) { .gb-saeulen { flex-direction: column; align-items: center; gap: 2px; } .gb-saeulen span { display: none; } }
.gb-saeulen { flex-direction: column; align-items: center; gap: 2px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .22em; margin-right: -.22em; }
.gb-saeulen span { display: block; font-size: 14px; line-height: .9; letter-spacing: 0; color: #9A6A20; }

/* ================= „Erkennst du dich wieder?" (13.10.) ================= */
.gb-inhalt h1.gb-zeile { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12; }
.erkennen { display: grid; justify-items: center; gap: clamp(28px, 4vw, 44px); padding: clamp(64px, 8vw, 104px) 16px; text-align: center;
  background: linear-gradient(180deg, var(--nacht) 0%, #7A3A80 30%, #A0549A 62%, #7A3A80 85%, var(--nacht) 100%); }
.erkennen .abschnitt-kopf { margin-bottom: 0; }
.erkennen .abschnitt-kopf h2 { background: none; color: #FFF6EA; text-shadow: 0 2px 24px rgba(40, 10, 40, .4); }
.erkennen .kicker { color: #FCE9B0; }
.gedanken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(860px, 100%); }
.gedanken li { padding: 20px 24px; border-radius: 14px; font: italic 500 clamp(20px, 2.2vw, 24px)/1.35 var(--f-edel); color: #FFF6EA; background: rgba(30, 10, 34, .28); box-shadow: 0 0 0 1px rgba(255, 236, 214, .35); }
@media (max-width: 640px) { .gedanken { grid-template-columns: 1fr; } }
.tiefer { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 0; }
.tiefer li { display: grid; justify-items: center; gap: 10px; width: 170px; position: relative; }
.tiefer li + li::before { content: ""; position: absolute; top: 40px; right: calc(50% + 50px); width: 70px; height: 1px; background: linear-gradient(90deg, transparent, #F3D68A); }
.tiefer .medaillon { font: 600 30px var(--f-edel); color: var(--gold-hell); }
.tiefer b { font: 600 12px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #FFF6EA; }
@media (max-width: 560px) { .tiefer li { width: 33%; } .tiefer li + li::before { display: none; } .tiefer .medaillon { width: 64px; height: 64px; font-size: 24px; } .tiefer b { font-size: 10.5px; letter-spacing: .08em; } }
.dreiklang { font: italic 600 clamp(28px, 3.6vw, 42px)/1.3 var(--f-edel); background: var(--gold-metall); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(40, 10, 40, .35)); }
/* ================= Torbogen: echtes Gold-Schimmern (13.10.) =================
   Poliertes Metall (mehrere Lichtbänder), feine Körnung, Tiefe von oben nach unten
   und ein sanfter Lichtstreif, der alle paar Sekunden über das Gold gleitet. */
.goldbogen::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 35%, rgba(90, 50, 0, 0) 70%, rgba(90, 50, 0, .28) 100%),
    radial-gradient(55% 32% at 50% 20%, rgba(255, 249, 220, .85) 0%, rgba(255, 249, 220, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .18 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(110deg, #9A6A20 0%, #D3A44A 12%, #F8DE98 22%, #FFF6D6 28%, #E9C163 38%, #C58F30 52%, #EBC877 64%, #FFF0C2 71%, #D9A948 84%, #A2701F 100%);
}
.goldbogen::after {
  background: linear-gradient(105deg, rgba(255, 255, 240, 0) 38%, rgba(255, 255, 240, .6) 49%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: goldglanz 7s ease-in-out infinite;
}
@keyframes goldglanz { 0%, 50% { background-position: 160% 0; } 100% { background-position: -110% 0; } }
.goldbogen { filter: drop-shadow(0 0 60px rgba(243, 214, 138, .35)) drop-shadow(0 30px 40px rgba(40, 10, 40, .45)); }
.goldbogen .rahmen path { stroke: #FFF6D6; stroke-width: 3; }
.goldbogen .rahmen path.innen { stroke: #7A5214; stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) { .goldbogen::after { animation: none; } }
@media (max-width: 900px) { .gb-inhalt { padding: 140px 9% 52px; } }
/* „Erkennst du dich wieder?": 3 Ebenen mit den Gedanken der Kundin */
.ebenen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(1000px, 100%); counter-reset: e; }
.ebenen li { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 28px 22px 30px; border-radius: 16px; background: rgba(30, 10, 34, .3); box-shadow: 0 0 0 1px rgba(255, 236, 214, .32); }
.ebenen li + li::before { content: ""; position: absolute; top: 68px; left: -18px; width: 18px; height: 1px; background: #F3D68A; }
.ebenen .medaillon { font: 600 30px var(--f-edel); color: var(--gold-hell); }
.ebenen b { font: 600 12px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: #FCE9B0; }
.ebenen q { font: italic 500 clamp(21px, 2.2vw, 25px)/1.35 var(--f-edel); color: #FFF6EA; quotes: "„" "“"; }
.ebenen li:last-child { background: rgba(30, 10, 34, .45); box-shadow: 0 0 0 1.5px #D7A947, 0 0 40px -10px rgba(243, 214, 138, .45); }
@media (max-width: 760px) { .ebenen { grid-template-columns: 1fr; max-width: 440px; } .ebenen li + li::before { top: -18px; left: 50%; width: 1px; height: 18px; } }
/* ================= Handy: schneller zum Produkt (13.10.) ================= */
@media (max-width: 760px) {
  .buehne { padding-top: 18px; }
  .goldbogen { min-height: 430px; width: min(400px, 100%); }
  .gb-inhalt { padding: 104px 8% 36px; gap: 12px; }
  .gb-saeulen { font-size: 20px; }
  .gb-inhalt h1.gb-zeile { font-size: 30px; }
  .gb-inhalt .knopf { margin-top: 8px; }
  .vorhang { height: 34%; }
  .balustrade { height: 34px; }
  .saal { padding-bottom: 8px; }
  .shop { padding-top: 36px; }
  .shop .abschnitt-kopf { margin-bottom: 18px; gap: 6px; }
  .shop .abschnitt-kopf h2 { font-size: 32px; }
  .shop .unterzeile { font-size: 19px; }
  .reiter { display: none; }
  /* Produkte seitlich wischen wie in einem Shop */
  .shop .regal { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 14px; max-width: none; margin-inline: -16px; padding: 4px 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .shop .regal::-webkit-scrollbar { display: none; }
  .shop .ware { scroll-snap-align: center; }
  .shop .ware:hover { transform: none; }
  .shop .ware-fenster { aspect-ratio: 5 / 4.4; }
  .wischhinweis { display: block; }
}
.wischhinweis { display: none; margin: -4px 0 0; text-align: center; font: 600 11px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-leise); }
@media (max-width: 760px) { .goldbogen { height: auto; min-height: 420px; } .shop .ware-fenster { aspect-ratio: 5 / 3.8; } }

/* rundes Foto immer kreisrund */
.sf-buehne img.rund, .ware-fenster .sf-buehne img.rund, .fenster .sf-buehne img.rund { width: auto; height: auto; max-width: 86%; max-height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ware-fenster .sf-buehne img.rund { max-width: 80%; }

@media (max-width: 760px) { .shop .ware-fenster { aspect-ratio: 5 / 4.2; } .shop .ware-fenster .sf-buehne { padding: 19% 7% 5%; } }

/* Wechselnde Zeile unter dem Tor */
.fuer-dich { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 6px 16px 18px; text-align: center; }
.fd-anfang { font: 600 11.5px var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.fd-satz { display: block; min-height: 2.6em; max-width: 30em; font: italic 600 clamp(22px, 2.6vw, 30px)/1.3 var(--f-edel); color: #FFF6EA; transition: opacity .5s ease, transform .5s ease; }
.fd-satz.weg { opacity: 0; transform: translateY(6px); }
@media (min-width: 761px) { .fd-satz { min-height: 1.4em; } }
.fd-satz, .fd-satz.weg { min-height: 2.6em; display: grid; place-items: center; }

/* Torbogen etwas kleiner (13.10.): Bogen + „Für dich"-Zeile im ersten Bildschirm */
@media (min-width: 761px) {
  .buehne { grid-template-columns: 30px minmax(0, 480px) 30px; padding-top: clamp(24px, 3vw, 44px); }
  .goldbogen { height: clamp(460px, 44vw, 560px); }
  .saeule { height: clamp(360px, 35vw, 450px); }
  .gb-saeulen { font-size: clamp(20px, 2.2vw, 27px); }
  .gb-inhalt h1.gb-zeile { font-size: clamp(30px, 3.2vw, 40px); }
  .gb-inhalt { padding-top: 27%; }
}
@media (max-width: 760px) { .goldbogen { min-height: 390px; } .gb-inhalt { padding-top: 92px; padding-bottom: 30px; } }
@media (min-width: 761px) { .goldbogen { height: clamp(440px, 38vw, 500px); } .saeule { height: clamp(340px, 30vw, 400px); } .gb-inhalt { padding-top: 24%; gap: 12px; } .buehne { padding-top: 20px; } .balustrade { height: 56px; } .fuer-dich { padding-bottom: 8px; } .shop { padding-top: 56px; } }

@media (min-width: 761px) { .goldbogen { height: clamp(484px, 38vw, 510px); } .gb-inhalt { padding-top: 22%; padding-bottom: 6%; } }

/* Eigene Fotos im Bogenfenster: füllen den ganzen Bogen */
.sf-buehne img.foto, .fenster .sf-buehne img.foto, .ware-fenster .sf-buehne img.foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 42%; filter: none; }
.schaufenster:hover .sf-buehne img.foto, .ware:hover .sf-buehne img.foto { transform: scale(1.03); }
/* Nur EIN Goldstrich an allen Torbögen, keine Säulen (13.10.) */
.rahmen path.innen { display: none; }
.saeule { display: none; }
.buehne { grid-template-columns: minmax(0, 480px); }
@media (max-width: 760px) { .buehne { grid-template-columns: minmax(0, 400px); } }

/* sanftes Einblenden (nur wenn JavaScript läuft) */
.einblend-an main > section:not(.saal) > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.einblend-an main > section:not(.saal) > .da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .einblend-an main > section > * { opacity: 1 !important; transform: none !important; } }

/* Einblenden – neue, sichere Fassung: nur Elemente unterhalb des Bildschirms starten unsichtbar */
.einblend-an main > section:not(.saal) > * { opacity: 1; transform: none; }
main > section > * { transition: opacity .8s ease, transform .8s ease; }
main > section > .spaeter { opacity: 0; transform: translateY(18px); }

/* ================= Variante B (Nutzer-Entscheidung 14.10.): kleines Tor, Shop direkt darunter ================= */
@media (min-width: 761px) { .goldbogen { height: 400px; } .buehne { grid-template-columns: minmax(0, 380px); padding-top: 16px; } .gb-inhalt { padding-top: 22%; gap: 10px; } .gb-saeulen { font-size: 19px; } .gb-inhalt h1.gb-zeile { font-size: 31px; } }
@media (max-width: 760px) { .goldbogen { min-height: 340px; } .gb-inhalt { padding: 78px 8% 26px; } .gb-saeulen { font-size: 17px; } .gb-inhalt h1.gb-zeile { font-size: 26px; } }
.saal { padding-bottom: 0; }
.balustrade { height: 40px; }
.shop { padding-top: 24px; }
.shop .abschnitt-kopf { margin-bottom: 20px; }
.shop .abschnitt-kopf h2 { font-size: clamp(28px, 3.4vw, 38px); }
/* kleines goldenes Herz vor Liebe */
.unterzeile .herz { display: inline-block; width: .82em; height: .76em; margin: 0 .22em 0 .12em; vertical-align: -.04em; fill: url(#gold-strich); filter: drop-shadow(0 0 6px rgba(243, 214, 138, .55)); }

.unterzeile .herz-ende { margin: 0 .1em 0 .3em; }

/* Positionierung 15.10.: „Liebeslegungen mit Schattenarbeit" */
.gb-saeulen span { font: italic 500 15px/1 var(--f-edel); letter-spacing: .04em; text-transform: none; color: #8A5E1A; margin: 2px 0; }
.positionierung { position: relative; z-index: 2; margin: 6px auto 14px; padding: 0 16px; max-width: 720px; text-align: center;
  font: italic 500 clamp(19px, 2vw, 24px)/1.35 var(--f-edel); color: #F6E7C8; text-shadow: 0 1px 12px rgba(30, 8, 34, .6); }
.positionierung .nur-handy { display: none; }
@media (max-width: 560px) { .positionierung .nur-handy { display: inline; } }

.gb-themen { margin: -2px 0 0; font: 600 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #5C3A10; }
@media (max-width: 760px) { .gb-themen { font-size: 10.5px; letter-spacing: .12em; } }

/* Damast-Muster (aus Mansouras Foto, 15.10.) ganz zart in Gold hinter dem Bogen – wie Stoff im Hintergrund */
.saal::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("img/damast_gold.webp") center top / 330px auto repeat; opacity: .14;
  -webkit-mask: radial-gradient(ellipse 30% 55% at 50% 42%, transparent 0 45%, #000 100%);
          mask: radial-gradient(ellipse 30% 55% at 50% 42%, transparent 0 45%, #000 100%); }
@media (max-width: 760px) { .saal::before { background-size: 220px auto; opacity: .12;
  -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000); } }

/* Feinschliff 15.10.: Themen-Zeile in einer Zeile, Text unter dem Bogen auf ruhigem Grund */
.gb-themen { font-size: 10.5px; letter-spacing: .1em; }
@media (max-width: 760px) { .gb-themen { font-size: 9.5px; letter-spacing: .05em; } }
.positionierung, .fuer-dich { position: relative; z-index: 1; }
.positionierung::before, .fuer-dich::before { content: ""; position: absolute; inset: -14px -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(74, 33, 80, .85), rgba(74, 33, 80, 0) 100%); }

/* 15.10.: goldene Schwunglinie unter dem Tor entfernt (Nutzerwunsch – mit Damast-Muster nicht mehr nötig) */
.saal .balustrade { display: none; }
.saal .positionierung { margin-top: clamp(22px, 3vw, 34px); }

/* 15.10.: Vorhang-Striche dünn & zart; Damast ganz zart in Fußzeile und Kopf der Unterseiten */
.vorhang path[stroke] { stroke-width: 1.2; opacity: .55; }
.fuss, .seite-kopf { position: relative; overflow: hidden; isolation: isolate; }
.fuss::before, .seite-kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/damast_gold.webp") center top / 300px auto repeat; opacity: .06; }
.seite-kopf::before { opacity: .09; }
@media (max-width: 760px) { .fuss::before, .seite-kopf::before { background-size: 200px auto; } }

/* 15.10.: Vorhänge am Tor weg; Sternmuster (Khatam) weg, wo jetzt Damast liegt und auf der Tageskarte-Seite.
   Fußzeile überall gleich (mit zartem Damast). */
.saal .vorhang { display: none; }
.saal { background:
    radial-gradient(50% 60% at 50% 6%, rgba(235, 150, 215, .55) 0%, rgba(235, 150, 215, 0) 70%),
    linear-gradient(180deg, #7A3A80 0%, #5E2A64 55%, var(--nacht) 100%); }
body .seite-kopf { background: radial-gradient(50% 60% at 30% 0%, rgba(235, 150, 215, .45) 0%, rgba(235, 150, 215, 0) 70%),
    linear-gradient(180deg, #7A3A80 0%, #5E2A64 60%, var(--nacht) 100%); }
body.seite-tageskarte main { background: radial-gradient(50% 45% at 50% 30%, rgba(235, 150, 215, .35) 0%, rgba(235, 150, 215, 0) 70%); }

/* 15.10.: Sternmuster (Khatam) überall entfernt – u. a. bei „Warum warten? Starte noch heute!" */
:root { --khatam: none; }

/* 15.10.: Damast in der Fußzeile wieder raus (Nutzerin: stört) – Fußzeile überall schlicht */
.fuss::before { display: none; }
/* 15.10.: Onlinekurs-Seite ohne Damast im Kopf (Nutzerwunsch) */
.seite-kopf:has(img[src*="neu_kurs"])::before { display: none; }
/* 15.10.: Mitgliederbereich – Damast zart oben, läuft nach unten sanft aus */
body.seite-mitglieder main { position: relative; isolation: isolate; }
body.seite-mitglieder main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1; pointer-events: none;
  background: url("img/damast_gold.webp") center top / 300px auto repeat; opacity: .09;
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
@media (max-width: 760px) { body.seite-mitglieder main::before { background-size: 200px auto; height: 520px; } }

/* 15.10.: Zwei echte Tarotkarten fächern sich hinter dem Tor auf (Zwei + Zehn der Kelche, ohne Nacktheit/Religiöses),
   warm-golden getönt – damit man in 1 Sekunde „Tarot" erkennt */
.buehne { position: relative; }
.karten-faecher { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.karten-faecher img { position: absolute; top: 70px; left: 50%; width: 175px; aspect-ratio: 360 / 620; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 0 2px #D7A947, 0 0 0 6px rgba(243, 214, 138, .18), 0 30px 50px -20px rgba(0, 0, 0, .7);
  filter: sepia(.45) saturate(.8) brightness(.92) contrast(1.05); }
.karten-faecher img:nth-child(1) { transform: translateX(calc(-50% - 215px)) rotate(-12deg); }
.karten-faecher img:nth-child(2) { transform: translateX(calc(-50% + 215px)) rotate(12deg); }
.goldbogen { position: relative; z-index: 1; }
/* Handy: Bogen etwas schmaler, Karten links und rechts gut sichtbar */
@media (max-width: 760px) {
  .buehne { grid-template-columns: minmax(0, min(70%, 300px)); }
  .karten-faecher img { width: 92px; top: 56px; border-radius: 7px; box-shadow: 0 0 0 1.5px #D7A947, 0 16px 30px -12px rgba(0, 0, 0, .7); }
  .karten-faecher img:nth-child(1) { transform: translateX(calc(-50% - min(35vw, 165px))) rotate(-10deg); }
  .karten-faecher img:nth-child(2) { transform: translateX(calc(-50% + min(35vw, 165px))) rotate(10deg); }
  .gb-saeulen { font-size: 15px; }
  .gb-themen { font-size: 9px; letter-spacing: .03em; }
  .gb-inhalt { padding-inline: 7%; }
}

/* ================= 15.10.: Helles Foto-Tor (Rosenquarz auf goldenen Karten) statt Damast + Goldbogen ================= */
.saal.hero-foto { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start;
  background: #F4EAE6; padding: 0; }
.saal.hero-foto::before { display: none; }
.hf-bild, .hf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-bild { z-index: -2; }
.hf-bild img { object-fit: cover; object-position: 70% 50%; }
/* heller Schleier links für gut lesbare Schrift */
.saal.hero-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 243, 240, .96) 0%, rgba(250, 243, 240, .88) 34%, rgba(250, 243, 240, .35) 56%, rgba(250, 243, 240, 0) 70%); }
.hf-inhalt { display: grid; justify-items: start; gap: 14px; text-align: left;
  width: min(1180px, 100% - 32px); margin-inline: auto; padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.hf-inhalt > * { max-width: 520px; }
.hero-foto .gb-saeulen { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .4em; margin: 0;
  font: 600 clamp(15px, 1.5vw, 18px)/1.3 var(--f-edel); letter-spacing: .24em; color: #6A2E66; text-shadow: none; }
.hero-foto .gb-saeulen span { display: inline; font: italic 500 1em/1 var(--f-edel); letter-spacing: .02em; text-transform: none; color: #A9843A; margin: 0; }
.hero-foto h1.gb-zeile { font: italic 600 clamp(40px, 5vw, 64px)/1.05 var(--f-edel); color: #3E1546; text-shadow: none; margin: 4px 0 0; letter-spacing: 0; text-transform: none; }
.hero-foto .gb-themen { font: 600 12px/1.4 var(--f-ui); letter-spacing: .18em; color: #8A6420; margin: 0; }
.hero-foto .positionierung { margin: 6px 0 8px; padding: 0; text-align: left; max-width: 30em; font: italic 500 clamp(19px, 1.8vw, 23px)/1.4 var(--f-edel); color: #5E2A64; text-shadow: none; }
.hero-foto .positionierung::before, .hero-foto .fuer-dich::before { display: none; }
.hero-foto .knopf { margin-top: 6px; }
/* Übergang ins Lila: „Für dich, wenn du dich fragst" auf weichem Pflaume-Band */
.hero-foto .fuer-dich { position: relative; z-index: 1; margin: 0; padding: 26px 16px 30px;
  background: linear-gradient(180deg, rgba(74, 33, 80, 0) 0%, rgba(74, 33, 80, .82) 38%, #4A2150 100%); }

@media (max-width: 760px) {
  .hf-bild img { object-position: 50% 78%; }
  .saal.hero-foto::after { background: linear-gradient(180deg, rgba(250, 243, 240, .95) 0%, rgba(250, 243, 240, .9) 42%, rgba(250, 243, 240, .25) 66%, rgba(250, 243, 240, 0) 78%); }
  .hf-inhalt { justify-items: center; text-align: center; gap: 10px; padding-block: 34px 150px; }
  .hero-foto .gb-saeulen { justify-content: center; font-size: 14px; letter-spacing: .18em; }
  .hero-foto h1.gb-zeile { font-size: 36px; }
  .hero-foto .gb-themen { font-size: 10px; letter-spacing: .1em; }
  .hero-foto .positionierung { text-align: center; font-size: 18px; margin: 2px 0 4px; }
}

/* Handy: Text oben auf hellem Grund, darunter das Foto mit Rosenquarz gut sichtbar */
@media (max-width: 760px) {
  .saal.hero-foto { background: #F7EFEC; }
  .saal.hero-foto::after { display: none; }
  .hf-inhalt { order: 1; padding-block: 30px 22px; }
  .hf-bild { order: 2; position: relative; inset: auto; display: block; width: 100%; height: 78vw; max-height: 420px; z-index: 0; }
  .hf-bild img { position: absolute; inset: 0; object-position: 50% 30%; }
  .hero-foto .fuer-dich { order: 3; margin-top: -90px; padding-top: 70px; }
}

/* ================= 15.10.: FREUNDLICH & HELL (Startseite) =================
   Kopfleiste + Fußzeile bleiben dunkles Pflaume (Logo), alles dazwischen hell und warm wie das Rosenquarz-Foto.
   Lila + Gold nur noch als Akzent (Überschriften, Knöpfe, Preise, feine Linien). */
body.freundlich { --text: #4E3A55; --text-leise: #7D6984; --linie: rgba(169, 132, 58, .32);
  background: #FBF6F2; color: var(--text); color-scheme: light; }
body.freundlich main { background: #FBF6F2; }

/* Überschriften: tiefes Pflaume statt Goldverlauf (Gold auf Hell wäre schlecht lesbar) */
body.freundlich main .abschnitt-kopf h2, body.freundlich .ueber-text h2, body.freundlich .tk-text h2, body.freundlich .abschluss h2 {
  background: none; -webkit-text-fill-color: currentColor; color: #3E1546; text-shadow: none; }
body.freundlich main .kicker { color: #A9843A; }
body.freundlich main .unterzeile { color: #6A4E70; }

/* Übergang Foto -> Shop: zartes Rosé statt Pflaume-Band */
body.freundlich .hero-foto .fuer-dich { background: linear-gradient(180deg, rgba(246, 236, 236, 0) 0%, rgba(246, 236, 236, .9) 40%, #F6ECEC 100%); }
body.freundlich .hero-foto .fd-anfang { color: #A9843A; }
body.freundlich .hero-foto .fd-satz { color: #3E1546; text-shadow: none; }

/* Shop */
body.freundlich .shop { background: linear-gradient(180deg, #F6ECEC 0%, #FBF6F2 30%); }
body.freundlich .ware { background: #FFFFFF; color: var(--text);
  box-shadow: 0 0 0 1px rgba(169, 132, 58, .35), 0 24px 44px -28px rgba(74, 33, 80, .45); }
body.freundlich .ware.hervor { box-shadow: 0 0 0 1.5px #C9A24A, 0 28px 50px -26px rgba(74, 33, 80, .5); }
body.freundlich .ware h3, body.freundlich .ware h3 a { color: #3E1546; }
body.freundlich .ware-text p { color: #6A4E70; }
body.freundlich .ware .preis b { background: none; -webkit-text-fill-color: currentColor; color: #4A1A63; }
body.freundlich .ware .preis small, body.freundlich .ware .preis s { color: #8A6420; }
body.freundlich .ware .kicker { color: #A9843A; }
body.freundlich .sf-buehne { background: radial-gradient(55% 45% at 50% 55%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%),
  radial-gradient(120% 90% at 50% 0%, #F3E4EC 0%, #E8D3E2 60%, #DCC2D6 100%); }
body.freundlich .reiter button { color: #6A2E66; border-color: rgba(169, 132, 58, .45); background: #FFFFFF; }
body.freundlich .reiter button[aria-pressed="true"] { color: #2A0F2E; }
body.freundlich .wisch-hinweis { color: #7D6984; }

/* Vertrauensleiste */
body.freundlich .vertrauen { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(169, 132, 58, .3); }
body.freundlich .vertrauen b, body.freundlich .vertrauen strong { color: #3E1546; }
body.freundlich .vertrauen span, body.freundlich .vertrauen small, body.freundlich .vertrauen li { color: #6A4E70; }
body.freundlich .vertrauen svg { background: radial-gradient(circle at 50% 30%, #F3E4EC 0%, #E2CADB 72%); color: #6A2E66; }

/* Über Mansoura */
body.freundlich .ueber { background: #F6ECEA; border-color: transparent; }
body.freundlich .ueber-text p { color: #4E3A55; }
body.freundlich .ueber-text .siegen, body.freundlich .siegen { background: none; -webkit-text-fill-color: currentColor; color: #8A6420; }

/* Tageskarte: hell, Karten-Hintergrund nur noch als Hauch */
body.freundlich .tageskarte { border-color: transparent;
  background: linear-gradient(180deg, rgba(251, 246, 242, .93) 0%, rgba(251, 246, 242, .88) 50%, rgba(251, 246, 242, .93) 100%), url("img/neu_karten.webp") center / cover no-repeat; }
body.freundlich .tk-text p { color: #4E3A55; }
body.freundlich .haken li { color: #4E3A55; }

/* Abschluss „Warum warten?": zartes Rosé-Lila, führt sanft in die dunkle Fußzeile */
body.freundlich .abschluss { background: linear-gradient(180deg, #FBF6F2 0%, #EFDCE6 55%, #D9B9CF 100%); border: 0; }

/* Feinschliff hell: dunkle Leisten oben/unten behalten helle Schrift */
body.freundlich .geschenkleiste, body.freundlich .kopf, body.freundlich .fuss { --text: #D9CBE3; --text-leise: #A996B5; --linie: rgba(227, 184, 88, .38); color: var(--text); }
body.freundlich .fuss a, body.freundlich .fuss p, body.freundlich .fuss li { color: var(--text); }
body.freundlich .vertrauen svg { stroke: #7A3A80; background: radial-gradient(circle at 50% 30%, #FBF1F5, #EBD6E3); box-shadow: 0 0 0 1px #C9A24A; }
body.freundlich .ueber { background: transparent; }
body.freundlich .tageskarte { background: linear-gradient(180deg, rgba(246, 236, 236, .94) 0%, rgba(246, 236, 236, .88) 50%, rgba(246, 236, 236, .94) 100%), url("img/neu_karten.webp") center / cover no-repeat; }

/* 15.10.: Kartenlegung am Telefon – deutlich im Shop-Fenster */
.fenster-band { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase;
  color: #FCE9B0; background: rgba(62, 21, 70, .9); box-shadow: 0 0 0 1px rgba(243, 214, 138, .6), 0 10px 22px -10px rgba(30, 8, 34, .8); }
.fenster-band svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 420px) { .fenster-band { font-size: 10.5px; padding: 7px 12px; letter-spacing: .08em; } }

/* 15.10.: Shop in zwei Gruppen (Legungen | Kurse & Selbstlernen) + Ausverkauft */
.regal-gruppe { display: grid; gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.shop .regal-gruppe:first-of-type { margin-top: 8px; }
.regal-kopf { display: grid; justify-items: center; gap: 4px; text-align: center; }
.regal-kopf h3 { font: 600 clamp(28px, 3.2vw, 38px)/1.1 var(--f-edel); color: #3E1546; }
.regal.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(820px, 100%); margin-inline: auto; }
@media (max-width: 760px) { .shop .regal.zwei { width: auto; } }
.schild.aus { color: #6A4E70; background: #F1E6EE; border-color: #D9C6D4; box-shadow: 0 8px 18px -10px rgba(74, 33, 80, .5); }
.ware.ausverkauft .sf-buehne img { filter: saturate(.75); }
.knopf.knopf-aus { cursor: not-allowed; color: #7D6984; background: #F1E6EE; border: 1px solid #D9C6D4; box-shadow: none; }
.knopf.knopf-aus:hover { transform: none; filter: none; }
.shop .regal-gruppe:first-of-type { margin-top: clamp(22px, 3vw, 34px); }

/* 15.10.: Schattenarbeit-Legung komplett als ausverkauft markiert */
.ware.ausverkauft .sf-buehne img { filter: grayscale(.55) brightness(1.05); opacity: .8; }
.ware.ausverkauft .ware-fenster::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(251, 246, 242, .28); pointer-events: none; }
.ausverkauft-stempel { position: absolute; z-index: 4; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg);
  padding: 10px 26px; border: 2px solid #6A2E66; border-radius: 10px; background: rgba(255, 255, 255, .92);
  font: 700 clamp(16px, 2vw, 20px)/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: #6A2E66;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 14px 28px -14px rgba(62, 21, 70, .6); white-space: nowrap; }
.ware.ausverkauft h3 a, .ware.ausverkauft .preis b { color: #7D6984; }
.ware.ausverkauft .preis small { color: #6A2E66; font-weight: 700; }
.knopf.knopf-aus.breit { display: flex; justify-content: center; width: 100%; }
.ware.ausverkauft .ware-fenster::after { display: none; }

/* 15.10.: Shop mit weniger Text – Gruppentitel als Hauptüberschrift */
.regal-kopf h2 { font: 600 clamp(32px, 3.8vw, 44px)/1.1 var(--f-edel); color: #3E1546; }
.shop .regal-gruppe:first-of-type { margin-top: 0; }

/* 16.10.: Ankündigungsleiste als goldenes Laufband (Text wandert von links nach rechts) */
.geschenkleiste.laufband { display: block; overflow: hidden; padding: 9px 0; white-space: nowrap; text-align: left;
  background: var(--gold-metall); color: #2A0F2E; border-bottom: 1px solid #B8923A; }
.geschenkleiste.laufband b { color: #3E1546; }
.lb-spur { display: inline-flex; width: max-content; animation: lb-lauf 38s linear infinite; }
.lb-teil { flex: none; padding-inline: 2.2em; font: 600 13px/1.4 var(--f-ui); letter-spacing: .05em; }
.lb-teil::after { content: "♥"; margin-left: 4.4em; color: #6A2E66; font-size: 11px; }
.geschenkleiste.laufband:hover .lb-spur { animation-play-state: paused; }
@keyframes lb-lauf { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .lb-spur { animation: none; width: 100%; justify-content: center; }
  .lb-teil[aria-hidden="true"] { display: none; }
  .lb-teil::after { display: none; }
}
body.freundlich .geschenkleiste.laufband, body .geschenkleiste.laufband, .geschenkleiste.laufband:hover { color: #2A0F2E; }
body .geschenkleiste.laufband b { color: #3E1546; }

/* 16.10.: Handy – Produkte wieder seitlich wischen (eine große Karte), nicht zwei schmale Spalten */
@media (max-width: 760px) { .shop .regal.zwei { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; } }

/* 16.10.: Texte in Produktkarten und Knöpfen mittig */
.ware-text { align-items: center; text-align: center; padding-inline: 14px; }
.ware-text .preis { justify-content: center; width: 100%; }
.ware-text .knopf, .ware-text .knopf-aus { width: 100%; justify-content: center; text-align: center; }
.knopf { justify-content: center; text-align: center; }

/* 16.10.: Handy – feste Kaufleiste verdeckt die Fußzeile nicht mehr */
@media (max-width: 760px) { body:has(.handy-leiste) .fuss { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } }

/* 17.10. neues Logo (nur Herz): mehr Luft im Medaillon, damit das Herz oben ganz zu sehen ist */
.abschluss-logo img { padding: 38px 36px 32px; }
.tk-rueckseite img { padding: 17% 16% 14%; }


/* 17.10. Medaillons: Kreis als Hintergrund zeichnen statt das Bild rund abzuschneiden
   (border-radius am Bild hat die Herz-Spitzen oben abgeschnitten) */
.abschluss-logo img { border-radius: 0; box-shadow: none; padding: 34px;
  background: radial-gradient(circle closest-side, #FFFEFA 0%, #F8EEDA 64%, #EEDDB8 92%, #B98326 92.6%, #B98326 93.6%, #FFF9EC 94.2%, #FFF9EC 98.4%, #B98326 99%, transparent 100%); }
.tk-rueckseite img { border-radius: 0; box-shadow: none; padding: 15%;
  background: radial-gradient(circle closest-side, #FFFDF8 0%, #F3E2B3 94%, #D7A947 94.5%, #D7A947 100%, transparent 100.5%);
  filter: drop-shadow(0 0 12px rgba(227, 184, 88, .35)); }


/* 23.10. Handy: Produktfenster kompakter (Nutzerin: Fenster zu groß, man muss scrollen, um alles zu sehen).
   Alle Infos bleiben – nur Bild flacher, Schrift + Abstände kleiner, damit die ganze Karte auf einen Blick passt. */
@media (max-width: 760px) {
  .ware { padding: 12px 12px 16px; border-radius: 16px; }
  .ware-fenster, .shop .ware-fenster { aspect-ratio: 16 / 9 !important; }
  .shop .ware-fenster .sf-buehne, .ware-fenster .sf-buehne { padding: 10% 6% 4%; }
  .ware-text { gap: 4px; padding: 12px 6px 0; }
  .ware-text .kicker { font-size: 10.5px; letter-spacing: .14em; }
  .ware-text h3 { font-size: 24px; }
  .ware-text > p { font-size: 15.5px; line-height: 1.35; }
  .ware-text .preis { padding-top: 8px; margin-top: 6px; }
  .ware-text .preis b { font-size: 32px; }
  .ware-text .preis small, .ware-text .preis s { font-size: 12px; }
  .ware-text .knopf, .ware-text .knopf-aus { padding-top: 12px; padding-bottom: 12px; margin-top: 4px; }
  .fenster-band { font-size: 10px; padding: 5px 10px; }
}

/* 23.10. (2) Nutzerin: Bilder zu klein, Tarotkarten kaum erkennbar → Bild höher, Produkte größer im Rahmen,
   Schilder kleiner (verdecken weniger); dafür Text darunter noch etwas kompakter. */
@media (max-width: 760px) {
  .ware-fenster, .shop .ware-fenster { aspect-ratio: 4 / 3.1 !important; }
  .shop .ware-fenster .sf-buehne, .ware-fenster .sf-buehne { padding: 7% 3% 2%; }
  .ware-fenster .sf-buehne img.foto { object-position: 45% 55%; }
  .schild { top: 20%; right: -4px; font-size: 9px; letter-spacing: .1em; padding: 4px 9px; }
  .schild.rabatt { font-size: 11px; }
  .fenster-band { bottom: 8px; font-size: 9px; padding: 4px 9px; gap: 6px; }
  .fenster-band svg { width: 13px; height: 13px; }
  .ware-text { gap: 2px; padding-top: 10px; }
  .ware-text .kicker { font-size: 10px; }
  .ware-text h3 { font-size: 22px; }
  .ware-text > p { font-size: 14.5px; }
  .ware-text .preis { padding-top: 6px; margin-top: 4px; }
  .ware-text .preis b { font-size: 28px; }
  .ware-text .knopf, .ware-text .knopf-aus { padding-top: 10px; padding-bottom: 10px; }
}

/* 23.10. (3) Knöpfe beim Wischen auf gleicher Höhe: Preis + Knopf immer ganz unten in der Karte */
@media (max-width: 760px) {
  .shop .regal { align-items: stretch; }
  .ware { height: 100%; }
  .ware-text { flex: 1; }
  .ware-text .preis { margin-top: auto !important; }
}

/* 23.10. (4) Themenzeile „Liebe · schwere Zeiten · Entscheidungen“ am Handy immer in EINER Zeile
   (auf schmalen Handys rutschte das letzte Herz in die nächste Zeile) */
@media (max-width: 760px) {
  .hero-foto .gb-themen { white-space: nowrap; font-size: min(10px, 2.55vw); letter-spacing: .07em; }
}