/* v27 „Maison“: minimalistische Startseite nach Luxus-Muster (Gucci-Struktur). Eigenständig, lädt style.css NICHT. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Playfair'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Playfair-400.woff2') format('woff2'); }
@font-face { font-family: 'Playfair'; font-style: italic; font-weight: 500 600; font-display: swap; src: url('../fonts/Playfair-600i.woff2') format('woff2'); }
:root { --ink: #141414; --grey: #6B6B6B; --line: #E4E0D8; --paper: #FAF8F4; --white: #FFF; --bordeaux: #5C1A24; --champ: #E2C799;
  --serif: 'Playfair', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(.2,.7,.2,1); --pad: clamp(20px, 4vw, 56px); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; }
.lbl { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.ln { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; display: inline-block; transition: opacity .3s; }
.ln:hover { opacity: .6; }
.h-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; margin: 0; }

/* Kopfzeile */
.mh { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 var(--pad); color: #fff; transition: background .4s, color .4s, box-shadow .4s; }
.mh.solid { background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mh-menu { justify-self: start; background: none; border: 0; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 0; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.mh-menu i { position: relative; width: 18px; height: 1px; background: currentColor; }
.mh-menu i::after { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 1px; background: currentColor; }
.mh-mark { font: 600 italic 26px/1 var(--serif); text-decoration: none; letter-spacing: -.01em; }
.mh-mark i { color: var(--champ); }
.mh-right { justify-self: end; display: flex; gap: 22px; align-items: center; }
.mh-right a { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.mh-lang { opacity: .7; }
@media (max-width: 640px) { .mh-cta { display: none; } .mh-menu span { display: none; } .mh-mark { font-size: 23px; } }

/* Menü */
.mm { position: fixed; inset: 0; z-index: 60; background: var(--white); display: flex; flex-direction: column; padding: 20px var(--pad) 40px; transform: translateY(-100%); transition: transform .7s var(--ease); visibility: hidden; }
.mm.open { transform: none; visibility: visible; }
.mm-close { align-self: flex-start; background: none; border: 0; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 14px 0; color: var(--ink); }
.mm ul { list-style: none; margin: auto 0; padding: 0; }
.mm li a { display: block; font: 400 clamp(34px, 6vw, 64px)/1.25 var(--serif); text-decoration: none; transition: opacity .3s, padding .4s var(--ease); }
.mm li a:hover { opacity: .55; padding-left: 10px; }
.mm-foot { display: flex; gap: 24px; flex-wrap: wrap; color: var(--grey); }
.mm-foot a { text-decoration: none; }

/* Hero */
.mx-hero { position: relative; height: 100svh; min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; color: #fff; overflow: hidden; }
.mx-hero figure { margin: 0; position: relative; overflow: hidden; }
.mx-hero figure img { width: 100%; height: 100%; object-fit: cover; animation: mx-zoom 18s ease-out both; }
.mx-hero .f1 img { object-position: 50% 22%; }
.mx-hero .f2 { background: #9FB4C4; }
.mx-hero .f2 .zep { position: absolute; left: 12%; width: 76%; top: 34%; height: auto; animation: mx-zep 14s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(0,0,0,.25)); }
@keyframes mx-zoom { from { transform: scale(1.08); } }
@keyframes mx-zep { 50% { transform: translate(2%, -5%) rotate(-2deg); } }
.mx-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.mx-hero-txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(40px, 8vh, 84px); text-align: center; padding: 0 var(--pad); }
.mx-hero-txt h1 { font-size: clamp(40px, 6.4vw, 92px); margin: 16px 0 14px; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.mx-hero-txt p { max-width: 46ch; margin: 0 auto 28px; font-size: clamp(15px, 1.3vw, 17px); color: rgba(255,255,255,.92); }
.mx-hero-links { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .mx-hero { grid-template-columns: 1fr; }
  .mx-hero .f2 { display: none; }
  .mx-hero-txt p { font-size: 15px; }
}

/* Sektionen */
.mx-sec { padding: clamp(72px, 10vw, 140px) var(--pad); }
.mx-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.mx-head h2 { font-size: clamp(30px, 3.6vw, 48px); margin-top: 14px; }
.mx-head p { color: var(--grey); max-width: 52ch; margin: 14px auto 0; }

/* Pakete wie Produktkacheln */
.mx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); max-width: 1400px; margin: 0 auto; }
.mx-tile { text-decoration: none; display: block; }
.mx-tile figure { margin: 0 0 18px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.mx-tile figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mx-tile:hover figure img { transform: scale(1.04); }
.mx-tile .lbl { color: var(--grey); }
.mx-tile h3 { font: 400 clamp(17px, 1.5vw, 21px)/1.25 var(--serif); margin: 8px 0 6px; }
.mx-tile .pr { font-size: 14px; }
.mx-tile .pr small { color: var(--grey); font-size: 12px; margin-left: 6px; }
.mx-note { text-align: center; margin-top: clamp(40px, 5vw, 64px); color: var(--grey); font-size: 13px; }
.mx-note .ln { margin-top: 18px; color: var(--ink); }
@media (max-width: 900px) { .mx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } }

/* Magazin-Banner */
.mx-mag { background: var(--bordeaux); color: #F4ECE0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); padding: clamp(72px, 10vw, 130px) var(--pad); overflow: hidden; }
.mx-mag-cover { justify-self: end; width: min(320px, 70vw); aspect-ratio: .71; position: relative; background: linear-gradient(180deg, #6B2330, #3E0F18); box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); transform: rotate(-3deg); animation: mx-float 8s ease-in-out infinite; display: flex; flex-direction: column; align-items: center; padding: 8% 7%; text-decoration: none; color: #F7F0E4; text-align: center; }
@keyframes mx-float { 50% { transform: rotate(-1.5deg) translateY(-10px); } }
.mx-mag-cover .lbl { font-size: 8px; color: var(--champ); border-bottom: 1px solid rgba(226,199,153,.4); padding-bottom: 8px; width: 100%; }
.mx-mag-cover b { font: 600 italic 40px/1 var(--serif); margin-top: 18px; }
.mx-mag-cover b i { color: var(--champ); }
.mx-mag-cover img { width: 86%; margin: auto 0; }
.mx-mag-cover em { font: 500 italic 16px/1.2 var(--serif); }
.mx-mag-txt { max-width: 440px; }
.mx-mag-txt .lbl { color: var(--champ); }
.mx-mag-txt h2 { font-size: clamp(32px, 4vw, 54px); margin: 16px 0 18px; color: #F7F0E4; }
.mx-mag-txt p { color: rgba(244,236,224,.8); margin: 0 0 30px; }
.mx-mag-txt .ln { color: #F7F0E4; }
@media (max-width: 760px) { .mx-mag { grid-template-columns: 1fr; text-align: center; } .mx-mag-cover { justify-self: center; width: 230px; } .mx-mag-txt { margin: 0 auto; } }

/* Zwei Kacheln */
.mx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 24px); max-width: 1400px; margin: 0 auto; }
.mx-duo a { text-decoration: none; display: block; }
.mx-duo figure { margin: 0 0 22px; aspect-ratio: 1 / 1.05; overflow: hidden; background: var(--paper); display: grid; place-items: center; }
.mx-duo figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mx-duo .fr-covers { display: flex; gap: 6%; width: 74%; }
.mx-duo .fr-covers img { width: 47%; height: auto; box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); }
.mx-duo .fr-covers img:last-child { transform: translateY(8%) rotate(3deg); }
.mx-duo .fr-covers img:first-child { transform: rotate(-3deg); }
.mx-duo a:hover figure > img { transform: scale(1.04); }
.mx-duo h3 { font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--serif); margin: 10px 0 10px; }
.mx-duo p { color: var(--grey); margin: 0 0 18px; max-width: 46ch; }
.mx-duo .lbl { color: var(--grey); }
@media (max-width: 760px) { .mx-duo { grid-template-columns: 1fr; row-gap: 56px; } }

/* Stimme */
.mx-quote { text-align: center; background: var(--paper); }
.mx-quote blockquote { margin: 0 auto; max-width: 820px; font: 400 italic clamp(24px, 3vw, 38px)/1.3 var(--serif); }
.mx-quote cite { display: block; margin-top: 26px; font-style: normal; color: var(--grey); }
.mx-quote .ln { margin-top: 34px; }

/* Newsletter */
.mx-news { text-align: center; border-top: 1px solid var(--line); }
.mx-news h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 14px 0 12px; }
.mx-news p { color: var(--grey); max-width: 46ch; margin: 0 auto 30px; }
.mx-news form { display: flex; max-width: 520px; margin: 0 auto; border-bottom: 1px solid var(--ink); }
.mx-news input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px/1 var(--sans); padding: 16px 4px; color: var(--ink); outline: none; }
.mx-news button { border: 0; background: none; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 0 4px 0 16px; color: var(--ink); }
.mx-news small { display: block; max-width: 520px; margin: 16px auto 0; color: var(--grey); font-size: 12px; line-height: 1.5; }
.mx-news small a { color: var(--grey); }

/* Fußzeile */
.mf { background: var(--ink); color: rgba(255,255,255,.75); padding: clamp(56px, 8vw, 96px) var(--pad) 32px; text-align: center; }
.mf-mark { font: 600 italic clamp(44px, 9vw, 120px)/1 var(--serif); color: #fff; text-decoration: none; letter-spacing: -.02em; }
.mf-mark i { color: var(--champ); }
.mf nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin: 40px 0 34px; }
.mf nav a { text-decoration: none; color: #fff; }
.mf p { font-size: 12px; margin: 6px 0; }

/* Einblenden */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* v27.1: Wolken, Dreh-Karten mit Preisen, Leopard-Akzent, wechselnde Stimmen */
:root { --leo2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23E2C799' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M14 22a9 8 0 0 1 16-4M33 26a9 9 0 0 1-5 11M22 39a9 8 0 0 1-10-9'/%3E%3Cpath d='M78 14a8 7 0 0 1 14-2M95 18a8 8 0 0 1-4 10M84 31a8 7 0 0 1-9-8'/%3E%3Cpath d='M112 58a9 8 0 0 1 16-3M130 63a9 9 0 0 1-6 11M118 76a9 8 0 0 1-9-9'/%3E%3Cpath d='M50 66a10 9 0 0 1 18-4M70 71a10 10 0 0 1-6 12M57 86a10 9 0 0 1-11-9'/%3E%3Cpath d='M10 98a8 7 0 0 1 14-3M26 102a8 8 0 0 1-5 9M15 114a8 7 0 0 1-8-8'/%3E%3Cpath d='M88 108a9 8 0 0 1 16-3M106 113a9 9 0 0 1-6 10M94 126a9 8 0 0 1-9-9'/%3E%3C/g%3E%3Cg fill='%23E2C799'%3E%3Cellipse cx='60' cy='36' rx='3.4' ry='2.6'/%3E%3Cellipse cx='124' cy='22' rx='2.8' ry='2.2'/%3E%3Cellipse cx='36' cy='70' rx='2.6' ry='2'/%3E%3Cellipse cx='130' cy='104' rx='3' ry='2.3'/%3E%3Cellipse cx='60' cy='122' rx='2.8' ry='2.1'/%3E%3Cellipse cx='96' cy='84' rx='2.4' ry='1.9'/%3E%3C/g%3E%3C/svg%3E"); }
.mx-hero .f2 > img:first-child { object-position: 50% 0%; }
.mx-hero .cl { position: absolute; left: -10%; width: 140%; max-width: none; height: auto; bottom: 14%; opacity: .9; mix-blend-mode: screen; animation: mx-cl 60s linear infinite alternate; }
.mx-hero .cl2 { bottom: 2%; width: 170%; left: -40%; opacity: .75; animation-duration: 80s; animation-direction: alternate-reverse; }
@keyframes mx-cl { to { transform: translateX(12%); } }
.mx-hero .f2 .zep { top: 26%; z-index: 1; }
.mx-hero .cl2 { z-index: 2; }
@media (max-width: 760px) {
  .mx-hero { grid-template-rows: 34svh 1fr; }
  .mx-hero .f2 { display: block; grid-row: 1; }
  .mx-hero .f1 { grid-row: 2; }
  .mx-hero .f2 .zep { top: 22%; left: 14%; width: 72%; }
  .mx-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
}
.mx-head p { font-size: 13px; }
.mx-card { perspective: 1800px; }
.mx-in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.mx-card.flipped .mx-in { transform: rotateY(180deg); }
.mx-front, .mx-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mx-front { cursor: pointer; }
.mx-front figure { position: relative; margin: 0 0 18px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.mx-front figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mx-front:hover figure img { transform: scale(1.04); }
.mx-badge { position: absolute; left: 12px; top: 12px; background: #fff; font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 8px 10px; }
.mx-card .lbl { color: var(--grey); }
.mx-card h3 { font: 400 clamp(17px, 1.5vw, 21px)/1.25 var(--serif); margin: 8px 0 6px; }
.mx-front .out { margin: 0 0 8px; font-size: 14px; color: #3A3A3A; }
.mx-front .hint { margin: 0 0 16px; font-size: 12px; color: var(--grey); }
.mx-front .ln { background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; color: var(--ink); padding: 0 0 6px; }
.mx-back { position: absolute; inset: 0; transform: rotateY(180deg); background: var(--paper); padding: 30px clamp(16px, 1.6vw, 24px) 20px; display: flex; flex-direction: column; overflow: auto; }
.mx-back::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #B88A55 var(--leo2); background-size: 60px 60px; }
.mx-back ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.mx-back li { padding: 7px 0 7px 18px; border-bottom: 1px solid var(--line); position: relative; }
.mx-back li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 6px; height: 1px; background: var(--bordeaux); }
.mx-back .feel { font: 400 italic 15px/1.4 var(--serif); margin: 14px 0 auto; padding-bottom: 14px; }
.mx-back .price { margin: 0 0 14px; }
.mx-back .price b { display: block; font: 400 30px/1.1 var(--serif); }
.mx-back .price small { color: var(--grey); font-size: 12px; }
.mx-btn { display: block; text-align: center; background: var(--ink); color: #fff; text-decoration: none; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 16px 10px; transition: background .3s; }
.mx-btn:hover { background: var(--bordeaux); }
.mx-back .safe { font-size: 11px; color: var(--grey); text-align: center; margin: 10px 0 6px; }
.mx-close { align-self: center; background: none; border: 0; cursor: pointer; font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); padding: 6px; }
.mx-card.rec .mx-front figure { outline: 1px solid var(--champ); outline-offset: 6px; }
.mx-note a:not(.ln) { color: var(--ink); }
@media (max-width: 900px) {
  .mx-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .mx-grid::-webkit-scrollbar { display: none; }
  .mx-card { flex: 0 0 min(78vw, 340px); scroll-snap-align: center; }
}
.mx-qs { display: grid; max-width: 820px; margin: 0 auto; }
.mx-qs blockquote { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); pointer-events: none; }
.mx-qs blockquote.on { opacity: 1; transform: none; pointer-events: auto; }
.mx-news { position: relative; }
.mx-news::before { content: ''; position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 120px; height: 6px; background: #B88A55 var(--leo2); background-size: 50px 50px; }
@media (max-width: 760px) { .mx-hero .f2 .zep { z-index: 3; top: 12%; } .mx-hero .cl { bottom: -6%; } .mx-hero .cl2 { bottom: -18%; } }
@media (max-width: 760px) { .mx-hero .f2 .zep { top: 26%; width: 64%; left: 18%; } }

/* ===== v27.2 VORHER/NACHHER auf Paketkarten ===== */
.mx-front figure.bf img { position: absolute; inset: 0; }
.bf-a { filter: grayscale(1) brightness(.82) contrast(1.05); }
.bf-b { clip-path: inset(0 100% 0 0); }
.bf-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--champ, #E2C799); box-shadow: 0 0 18px 4px rgba(226,199,153,.75); opacity: 0; pointer-events: none; }
.bf-l { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; font: 600 10.5px/1 var(--sans, Inter, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(15,15,15,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bf-lb { background: rgba(92,26,36,.82); opacity: 0; }
.bf.on .bf-b { animation: bf-wipe 8s var(--ease, ease) infinite; }
.bf.on .bf-line { animation: bf-line 8s var(--ease, ease) infinite; }
.bf.on .bf-la { animation: bf-la 8s linear infinite; }
.bf.on .bf-lb { animation: bf-lb 8s linear infinite; }
@keyframes bf-wipe { 0%,25% { clip-path: inset(0 100% 0 0); } 42%,88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes bf-line { 0%,25% { left: 0; opacity: 0; } 27% { opacity: 1; } 40% { opacity: 1; } 42% { left: calc(100% - 2px); opacity: 0; } 100% { left: calc(100% - 2px); opacity: 0; } }
@keyframes bf-la { 0%,30% { opacity: 1; } 34%,92% { opacity: 0; } 97%,100% { opacity: 1; } }
@keyframes bf-lb { 0%,36% { opacity: 0; } 42%,88% { opacity: 1; } 92%,100% { opacity: 0; } }
.mx-front:hover figure.bf img { transform: none; }
.bf.on .bf-b, .bf.on .bf-line, .bf.on .bf-la, .bf.on .bf-lb { animation-delay: var(--bfd, 0s); }
/* v27.3 echte Fotos: einheitlicher warmer Film-Look fuer "Dein Ziel" */
.bf-b { filter: sepia(.14) saturate(.92) contrast(1.03) brightness(1.02); }
.bf-a { filter: grayscale(1) brightness(.8) contrast(1.08); }
#p-match .bf-a { object-position: 40% 50%; }
#p-klarheit .bf-b { object-position: 70% 50%; }
.mx-duo .fr-covers { justify-content: center; }
.mx-duo .fr-covers img.solo { width: 52%; transform: rotate(-2deg); }

/* v30 Magazin-Teaser: Jaguar-Cover Nº 01 Schichten */
.mx-mag-cover.jag { overflow: hidden; background: #1A120A; }
.mx-mag-cover.jag img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 30% 50%; z-index: 0; }
.mx-mag-cover.jag::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent 32%, transparent 60%, rgba(0,0,0,.75)); }
.mx-mag-cover.jag > span, .mx-mag-cover.jag > b, .mx-mag-cover.jag > em { position: relative; z-index: 2; }
.mx-mag-cover.jag em { margin-top: auto; color: var(--champ); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-style: normal; font-family: inherit; font-weight: 600; }

/* v30.1 Teaser Vogue */
.mx-mag-cover.jag b { font-style: normal; font-weight: 500; font-size: 52px; letter-spacing: -.035em; margin-top: 0; }
.mx-mag-cover.jag { padding-top: 6%; }

/* v30.3 Magazin-Teaser: Ausblick statt Bordeaux (passt zur Magazinseite) */
.mx-mag { position: relative; isolation: isolate; background: #DCE6EE url(../img/heft/ausblick-1000.webp) center 58% / cover no-repeat; color: var(--ink, #141414); }
.mx-mag::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(247,243,236,0) 0%, rgba(247,243,236,.15) 38%, rgba(247,243,236,.88) 58%, rgba(247,243,236,.96) 100%); }
.mx-mag-txt .lbl { color: #7A5A2E; }
.mx-mag-txt h2 { color: #141414; }
.mx-mag-txt p { color: #3E3B36; }
.mx-mag-txt .ln { color: #141414; }
.mx-mag-cover { box-shadow: 0 40px 70px -30px rgba(10,25,45,.6); }
@media (max-width: 760px) {
  .mx-mag { background-position: 30% 60%; }
  .mx-mag::before { background: linear-gradient(180deg, rgba(247,243,236,0) 0%, rgba(247,243,236,.1) 34%, rgba(247,243,236,.9) 52%, rgba(247,243,236,.97) 100%); }
}

/* v34 KOSTENLOS-SIEGEL: Bordeaux-Siegel mit Champagner-Ring auf den Gratis-Titelbildern */
.dl-cover, .mx-duo .fr-covers { position: relative; }
.dl-cover::after, .mx-duo .fr-covers::after {
  content: "Kostenlos"; position: absolute; z-index: 2; display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 50%; padding: 0 6px; box-sizing: border-box; text-align: center;
  background: radial-gradient(circle at 35% 30%, #7a2533, #5C1A24 62%, #46121b);
  box-shadow: inset 0 0 0 4px #5C1A24, inset 0 0 0 5px rgba(226,199,153,.9), 0 14px 26px -12px rgba(0,0,0,.55);
  color: #E2C799; font: italic 600 17px/1 'Playfair Display', Georgia, serif; letter-spacing: .01em;
  transform: rotate(-9deg); pointer-events: none;
}
.dl-cover::after { right: 7%; bottom: 7%; }
.mx-duo .fr-covers::after { left: -4%; top: -6%; }
:lang(en) .dl-cover::after, :lang(en) .mx-duo .fr-covers::after { content: "Free"; font-size: 21px; }
:lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { content: "Ücretsiz"; }
@media (max-width: 700px) {
  .dl-cover::after, .mx-duo .fr-covers::after { width: 76px; height: 76px; font-size: 14px; }
  :lang(en) .dl-cover::after, :lang(en) .mx-duo .fr-covers::after { font-size: 17px; }
}

/* v39 PAKETKARTEN FLUESSIG (2026-10-15): Wechsel nur per opacity/transform (GPU), kein clip-path/left mehr;
   Rueckseite faengt nicht mehr das Scrollen ab (iOS), Hover-Zoom nur mit Maus. */
.mx-front figure.bf { transform: translateZ(0); }
.mx-front figure.bf img { will-change: opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bf-b { clip-path: none; opacity: 0; }
.bf.on .bf-b { animation: bf-fade 8s ease-in-out infinite; animation-delay: var(--bfd, 0s); }
@keyframes bf-fade { 0%,24% { opacity: 0; } 40%,86% { opacity: 1; } 98%,100% { opacity: 0; } }
.bf-line { left: 0; right: 0; width: auto; box-shadow: none; opacity: 1; background: linear-gradient(90deg, transparent 46%, rgba(226,199,153,.0) 47%, rgba(255,240,210,.9) 50%, rgba(226,199,153,0) 53%, transparent 54%); transform: translateX(-60%); will-change: transform; }
.bf.on .bf-line { animation: bf-sweep 8s ease-in-out infinite; animation-delay: var(--bfd, 0s); }
@keyframes bf-sweep { 0%,24% { transform: translateX(-60%); opacity: 0; } 26% { opacity: 1; } 40% { transform: translateX(60%); opacity: 1; } 42%,100% { transform: translateX(60%); opacity: 0; } }
.bf-l { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15,15,15,.62); will-change: opacity; }
.bf-lb { background: rgba(92,26,36,.88); }
.mx-front:hover figure img { transform: none; }
@media (hover: hover) and (pointer: fine) { .mx-front:hover figure:not(.bf) img { transform: scale(1.04); } }
.mx-card:not(.flipped) .mx-back { overflow: hidden; pointer-events: none; visibility: hidden; transition: visibility 0s 1s; }
.mx-card.flipped .mx-back { visibility: visible; transition: visibility 0s 0s; }
.mx-card.flipped .mx-front { pointer-events: none; }
@media (max-width: 900px) {
  .mx-grid { scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .mx-card { scroll-snap-stop: normal; }
}

/* ===== v41 SIEGEL KLEIN (2026-10-15): Kostenlos-Siegel kleiner, Kupfer-Orange, als Sticker an der Ecke ===== */
.dl-cover::after, .mx-duo .fr-covers::after {
  width: 66px; height: 66px; padding: 0 4px; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-style: normal; font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at 32% 28%, #F08A3C, #D9601E 58%, #B84A12); color: #FFF8EE;
  border: 0; box-shadow: 0 0 0 2px #FFF8EE, 0 0 0 3px rgba(184,74,18,.55), 0 6px 16px rgba(120,45,10,.32);
  transform: rotate(-10deg);
}
.dl-cover::after { right: -14px; bottom: auto; top: -14px; }
.mx-duo .fr-covers::after { left: -18px; top: -18px; }
:lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { font-size: 9.5px !important; letter-spacing: .08em; }
@media (max-width: 700px) {
  .dl-cover::after, .mx-duo .fr-covers::after { width: 56px; height: 56px; font-size: 9.5px !important; }
  :lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { font-size: 8.5px !important; }
  .dl-cover::after { right: -10px; top: -10px; }
  .mx-duo .fr-covers::after { left: -10px; top: -12px; }
}
.dl-cover { overflow: visible; } .dl-cover img { border-radius: 10px; }
/* v41.1: Schrift passt in den Kreis, Siegel unten rechts (Zeppelin frei) */
.dl-cover::after, .mx-duo .fr-covers::after { padding: 0 !important; letter-spacing: .04em !important; font-size: 9.5px !important; white-space: nowrap; }
:lang(en) .dl-cover::after, :lang(en) .mx-duo .fr-covers::after { font-size: 12px !important; letter-spacing: .12em !important; }
:lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { font-size: 8.5px !important; letter-spacing: .02em !important; }
.dl-cover::after { top: auto !important; bottom: -14px !important; right: -14px !important; }
@media (max-width: 700px) {
  .dl-cover::after, .mx-duo .fr-covers::after { font-size: 8.5px !important; }
  :lang(en) .dl-cover::after, :lang(en) .mx-duo .fr-covers::after { font-size: 11px !important; }
  :lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { font-size: 7.5px !important; }
  .dl-cover::after { bottom: -10px !important; right: -10px !important; }
}
/* v41.2 (15.10.): Siegel jetzt Etikett „Gratis für dich“, dunkles Orange auf Creme, leicht schwingend */
.dl-cover::after, .mx-duo .fr-covers::after {
  content: "Gratis für dich" !important; width: auto !important; height: auto !important; display: block !important;
  padding: 9px 16px 10px !important; border-radius: 3px !important; white-space: nowrap;
  font-family: "Playfair Display", Georgia, serif !important; font-style: italic !important; font-weight: 600 !important;
  font-size: 17px !important; letter-spacing: .01em !important; text-transform: none !important; line-height: 1 !important;
  color: #B8460E !important; background: #FFF8EE !important;
  box-shadow: inset 0 0 0 1.5px #B8460E, inset 0 0 0 4px #FFF8EE, inset 0 0 0 5px rgba(184,70,14,.35), 0 10px 22px -8px rgba(120,45,10,.45) !important;
  transform-origin: 50% 0; animation: tag-sway 5s ease-in-out infinite;
}
:lang(en) .dl-cover::after, :lang(en) .mx-duo .fr-covers::after { content: "Free for you" !important; font-size: 17px !important; letter-spacing: .01em !important; }
:lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { content: "Senin için ücretsiz" !important; font-size: 15px !important; letter-spacing: 0 !important; }
.dl-cover::after { top: auto !important; bottom: 18px !important; right: -22px !important; }
.mx-duo .fr-covers::after { left: -14px !important; top: -16px !important; }
@keyframes tag-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-3deg); } }
@media (max-width: 700px) {
  .dl-cover::after, .mx-duo .fr-covers::after { font-size: 14px !important; padding: 7px 12px 8px !important; }
  :lang(en) .dl-cover::after, :lang(en) .mx-duo .fr-covers::after { font-size: 14px !important; }
  :lang(tr) .dl-cover::after, :lang(tr) .mx-duo .fr-covers::after { font-size: 12.5px !important; }
  .dl-cover::after { bottom: 14px !important; right: -16px !important; }
  .mx-duo .fr-covers::after { left: -8px !important; top: -12px !important; }
}
.mx-duo .fr-covers::after { top: -30px !important; } @media (max-width: 700px) { .mx-duo .fr-covers::after { top: -22px !important; } }

/* v43 FLUESSIG: Farbe fest im Bild, 3D nur beim Umdrehen, kein Milchglas auf dem Handy */
.bf-a, .bf-b, #p-match .bf-a { filter: none; }
.mx-in { transform-style: flat; }
.mx-card.f3d .mx-in { transform-style: preserve-3d; }
.mx-card:not(.f3d) { perspective: none; }
.mx-front figure.bf { transform: none; contain: paint; }
@media (max-width: 900px) {
  .mh.solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}

/* v44 HERO EINGEMEISSELT: Cinzel, Zeilen rasten nacheinander ein */
@font-face { font-family: 'Cinzel'; font-weight: 400 900; font-display: swap; src: url('../fonts/Cinzel-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-weight: 400 900; font-display: swap; src: url('../fonts/Cinzel-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
.mx-hero-txt h1.h-cut { font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: clamp(38px, 7vw, 100px); line-height: 1.04; letter-spacing: .04em; color: var(--champ, #E2C799);
  text-shadow: 0 1px 0 rgba(255,240,210,.35), 0 -1px 0 rgba(0,0,0,.85), 0 2px 22px rgba(0,0,0,.55); }
.h-cut span { display: block; opacity: 0; transform: scale(1.18); filter: blur(6px); animation: cut-in .9s cubic-bezier(.2,.9,.25,1) forwards; }
.h-cut span:nth-child(1) { animation-delay: .25s; }
.h-cut span:nth-child(2) { color: #fff; animation-delay: .7s; }
.h-cut span:nth-child(3) { animation-delay: 1.15s; }
@keyframes cut-in { to { opacity: 1; transform: none; filter: none; } }
.mx-hero-txt h1.h-cut ~ p, .mx-hero-txt h1.h-cut ~ .mx-hero-links { opacity: 0; animation: cut-fade 1s 1.8s forwards; }
@keyframes cut-fade { to { opacity: 1; } }
@media (max-width: 760px) { .mx-hero-txt h1.h-cut { font-size: clamp(36px, 10.5vw, 52px); } }

/* v46 LICHTLINIE: Laptop Text mittig wie vorher, Goldlinie auf der Kante Foto/Himmel mit fallendem Licht, Knoepfe gleich breit */
@media (min-width: 761px) {
  .mx-hero-txt { z-index: 4; }
  .mx-hero-txt::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 14px); width: 1px; height: 100vh; transform: translateX(-.5px); pointer-events: none;
    background: linear-gradient(180deg, rgba(226,199,153,0) 0%, rgba(226,199,153,.35) 35%, rgba(226,199,153,.9) 100%); }
  .mx-hero-txt::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 14px); width: 3px; height: 90px; margin-left: -1.5px; border-radius: 2px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,240,210,0), #FFF3DC); box-shadow: 0 0 12px 2px rgba(255,236,200,.7); opacity: 0;
    animation: light-fall 6s cubic-bezier(.55,0,.6,1) 2.4s infinite; }
  @keyframes light-fall { 0% { transform: translateY(-100vh); opacity: 0; } 15% { opacity: 1; } 78% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
  .mx-hero-txt .lbl { position: relative; }
  .mx-hero-txt .lbl::before { content: ''; position: absolute; left: 50%; top: -14px; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #FFF3DC; box-shadow: 0 0 14px 4px rgba(255,236,200,.65); animation: light-glow 6s ease-in-out 2.4s infinite; }
  @keyframes light-glow { 0%, 70% { box-shadow: 0 0 10px 2px rgba(255,236,200,.45); } 80% { box-shadow: 0 0 26px 9px rgba(255,236,200,.95); } 100% { box-shadow: 0 0 10px 2px rgba(255,236,200,.45); } }
  .mx-hero-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; margin: 0 auto; }
  .mx-hero-links .ln { display: flex; align-items: center; justify-content: center; padding: 15px 12px; border: 1px solid rgba(226,199,153,.6); text-decoration: none; transition: background .3s, color .3s; }
  .mx-hero-links .ln:hover { opacity: 1; background: var(--champ, #E2C799); color: #141414; }
}
@media (max-width: 760px) {
  .mx-hero .f2 .zep { top: 23%; left: 29%; width: 42%; z-index: 1; }
}
@media (min-width: 761px) and (max-height: 860px) { .mx-hero .f2 .zep { top: 11%; width: 62%; left: 22%; } }

/* v47 RUHIG LIVE (Entscheidung Rumeysa 15.10.): Ueberschrift kleiner, weiss, sanft; ohne Untertitel; nur Knopf Kennenlernen */
.mx-hero-txt { bottom: clamp(48px, 11vh, 110px); }
.mx-hero-txt .lbl { opacity: .8; }
.mx-hero-txt h1.h-cut { font-size: clamp(30px, 3.6vw, 54px); font-weight: 500; letter-spacing: .14em; line-height: 1.25; color: #fff;
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 -1px 0 rgba(0,0,0,.5), 0 2px 26px rgba(0,0,0,.35); margin: 18px 0 30px; }
.h-cut span, .h-cut span:nth-child(2) { color: #fff; transform: none; filter: none; animation: calm-in 1.6s ease forwards; }
.h-cut span:nth-child(1) { animation-delay: .3s; } .h-cut span:nth-child(2) { animation-delay: .7s; } .h-cut span:nth-child(3) { animation-delay: 1.1s; }
@keyframes calm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mx-hero-txt p { display: none; }
.mx-hero-links a:first-child { display: none; }
.mx-hero-links { display: flex !important; justify-content: center; grid-template-columns: none !important; }
.mx-hero-links .ln { min-width: 260px; }
.mx-hero .f2 .zep { width: 52% !important; left: 24% !important; top: 16% !important; }
.mx-hero-txt::after { animation-duration: 9s !important; opacity: .7; }
@media (max-width: 760px) {
  .mx-hero-txt h1.h-cut { font-size: clamp(26px, 7.6vw, 34px); }
  .mx-hero .f2 .zep { width: 38% !important; left: 31% !important; top: 25% !important; }
  .mx-hero-links .ln { min-width: 0; padding: 15px 22px; border: 1px solid rgba(226,199,153,.6); }
}

/* ===== v50 ZEPPELIN-BANNER: Karte umdrehen → Zeppelin bringt den Paketnamen ===== */
.zban { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; width: min(760px, calc(100% - 24px)); display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 140px; background: #141414; color: #fff; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(226,199,153,.45); transform: translate(-50%, 180%); transition: transform .7s cubic-bezier(.2,1.25,.4,1); pointer-events: none; }
.zban.show { transform: translate(-50%, 0); pointer-events: auto; }
.zb-z { position: absolute; left: 4px; top: -38px; width: 140px; height: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
.zban.show .zb-z { animation: zbn-fly 1.6s cubic-bezier(.2,.9,.3,1) both, zbn-bob 5s ease-in-out 1.6s infinite; }
@keyframes zbn-fly { from { transform: translateX(min(110vw, 820px)) rotate(-6deg); } 70% { transform: translateX(-8px) rotate(2deg); } to { transform: none; } }
@keyframes zbn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
.zb-f { position: relative; flex: 1; min-width: 0; padding: 8px 28px 8px 16px; background: linear-gradient(90deg, #E2C799, #F3DFB6 55%, #D4B27A); color: #141414; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); }
.zb-f::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; border-top: 1px dashed #E2C799; }
.zban.show .zb-f { animation: zbn-unfurl 1.1s ease .9s both; }
@keyframes zbn-unfurl { from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); } }
.zb-f span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.zb-f b { display: block; font: italic 600 18px/1.2 'Playfair Display', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-a { flex: none; padding: 12px 18px; border: 1px solid #E2C799; color: #E2C799; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.zb-a:hover { background: #E2C799; color: #141414; }
.zban.show .zb-a { animation: zbn-pop .6s cubic-bezier(.3,1.6,.5,1) 1.5s both; }
@keyframes zbn-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.zb-x { flex: none; width: 34px; height: 34px; border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 600px) {
  .zban { flex-wrap: wrap; padding: 30px 10px 10px; gap: 8px; }
  .zb-z { width: 110px; top: -44px; left: 8px; }
  .zb-f { flex-basis: calc(100% - 44px); }
  .zb-a { flex: 1; text-align: center; }
}
@media (max-width: 600px) {
  .zb-x { position: absolute; top: 2px; right: 4px; }
  .zb-f { flex-basis: 100%; }
  .zc-btn { transition: translate .5s ease; }
  body.zb-on .zc-btn { translate: 0 -150px; }
}

/* ===== v53 Wolken ziehen auseinander + Banner-Zeppelin ganz versteckt (16.10.) ===== */
.mx-hero .cl { animation: mx-cl-l 11s cubic-bezier(.45,0,.25,1) .8s both; }
.mx-hero .cl2 { animation: mx-cl-r 13s cubic-bezier(.45,0,.25,1) .8s both; }
@keyframes mx-cl-l { from { transform: none; opacity: .9; } 70% { opacity: .35; } to { transform: translateX(-45%); opacity: 0; } }
@keyframes mx-cl-r { from { transform: none; opacity: .75; } 70% { opacity: .3; } to { transform: translateX(40%); opacity: 0; } }
.zban { visibility: hidden; transform: translate(-50%, calc(100% + 120px)); transition: transform .7s cubic-bezier(.2,1.25,.4,1), visibility 0s linear .7s; }
.zban.show { visibility: visible; transform: translate(-50%, 0); transition: transform .7s cubic-bezier(.2,1.25,.4,1), visibility 0s; }

/* ===== v54 Hero als Einheit: Porträt geht weich in den Himmel über, ein gemeinsamer warmer Ton (16.10.) ===== */
.mx-hero .f1 { z-index: 1; width: calc(100% + 12vw); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12vw), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 12vw), transparent 100%); }
.mx-hero .f1 img { filter: sepia(.2) saturate(1.1) contrast(1.03); }
.mx-hero .f2 > img:first-child { filter: saturate(.78) sepia(.16) brightness(1.02); }
.mx-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 70% at 50% 62%, rgba(226,199,153,.16), transparent 70%); mix-blend-mode: soft-light; }
@media (max-width: 760px) {
  .mx-hero .f1 { width: auto; margin-top: -14svh; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14svh); mask-image: linear-gradient(180deg, transparent 0, #000 14svh); }
}

/* ===== v54 Paketkarten: am 16.10. auf Wunsch zurückgenommen (Preise wieder nur auf der Rückseite) ===== */

/* ===== v55 Buch-Pop-up auf der Startseite (16.10.) ===== */
.bk-pop { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; }
.bk-pop[hidden] { display: none; }
.bk-pop-bg { position: absolute; inset: 0; background: rgba(12,10,9,.55); opacity: 0; transition: opacity .45s var(--ease); cursor: pointer; }
.bk-pop-card { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; width: min(640px, 100%); background: var(--paper, #F7F4EE); color: var(--ink); padding: 34px 34px 30px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.bk-pop-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #B88A55 var(--leo2); background-size: 50px 50px; }
.bk-pop.on .bk-pop-bg { opacity: 1; }
.bk-pop.on .bk-pop-card { opacity: 1; transform: none; }
.bk-pop-img img { display: block; width: 100%; height: auto; box-shadow: 0 22px 34px -16px rgba(40,10,14,.6); transform: rotate(-2deg); }
.bk-pop-txt .lbl { color: var(--bordeaux); }
.bk-pop-txt h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; margin: 10px 0 12px; }
.bk-pop-txt p { font-size: 14px; color: #3A3A3A; margin: 0 0 20px; }
.bk-pop-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font: 300 30px/1 var(--sans); color: var(--ink); cursor: pointer; }
.bk-pop-x:hover { color: var(--bordeaux); }
.bk-pop-later { display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer; font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); padding: 6px; }
@media (max-width: 600px) {
  .bk-pop { place-items: end center; padding: 0; }
  .bk-pop-card { grid-template-columns: 110px 1fr; gap: 18px; align-items: start; padding: 30px 20px 22px; transform: translateY(100%); }
  .bk-pop-txt h2 { font-size: 22px; margin: 8px 0 8px; }
  .bk-pop-txt p { font-size: 13px; margin-bottom: 14px; }
  .bk-pop-txt .mx-btn { padding: 14px 8px; }
}
/* v55 Lichtstrahl startet sofort: kurz Schwarz-Weiß, dann Licht und Farbe */
@keyframes bf-fade { 0%,6% { opacity: 0; } 20%,84% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes bf-sweep { 0%,5% { transform: translateX(-60%); opacity: 0; } 7% { opacity: 1; } 20% { transform: translateX(60%); opacity: 1; } 22%,100% { transform: translateX(60%); opacity: 0; } }
@keyframes bf-la { 0%,10% { opacity: 1; } 14%,92% { opacity: 0; } 97%,100% { opacity: 1; } }
@keyframes bf-lb { 0%,14% { opacity: 0; } 20%,86% { opacity: 1; } 92%,100% { opacity: 0; } }
/* Pop-up: Fokusrahmen nur bei Tastatur, Fragen-Wolke solange ausblenden */
.bk-pop-x:focus:not(:focus-visible) { outline: none; }
body.bk-on .zc-btn, body.bk-on .zc-panel { visibility: hidden; }
/* v55 Gratis-Kachel: Cover und Links laden direkt das PDF */
.mx-free .fr-covers a { width: 47%; display: block; }
.mx-free .fr-covers a img { width: 100%; height: auto; transform: none !important; }
.mx-free .fr-covers a:first-child { transform: rotate(-3deg); }
.mx-free .fr-covers a:last-child { transform: translateY(8%) rotate(3deg); }
.mx-free .dl2 { display: flex; flex-wrap: wrap; gap: 14px 26px; }
/* v55 „Tippe mich an“ auf dem Magazin-Cover der Startseite */
.mx-mag-cover.jag > .mx-tap { position: absolute; z-index: 3; right: 8%; top: 52%; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 99px; background: rgba(247,240,228,.95); color: #141414; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); animation: mx-tap-bob 2.6s ease-in-out infinite; }
.mx-tap i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--bordeaux); }
.mx-tap i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bordeaux); animation: mx-tap-ring 2.6s ease-out infinite; }
@keyframes mx-tap-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes mx-tap-ring { 0% { transform: scale(1); opacity: .9; } 70%,100% { transform: scale(2.8); opacity: 0; } }

/* ===== v57 Hero: ein Motiv (Himmel, Wolken, Zeppelin), Text links unten (17.10.) ===== */
.hx { position: relative; height: 100svh; min-height: 600px; overflow: hidden; color: #fff; background: #1d2b2a; }
.hx-sky, .hx-sky > * { position: absolute; pointer-events: none; }
.hx-sky { inset: 0; }
.hx-bg { inset: -3%; width: 106%; max-width: none; height: 106%; object-fit: cover; object-position: 50% 70%; filter: saturate(.85) sepia(.12); animation: hx-pan 70s ease-in-out infinite alternate; }
.hx-sun { right: 2vw; top: -6vw; width: 50vw; height: 50vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,218,166,.42), rgba(255,218,166,.1) 42%, transparent 68%); }
.hx::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 26%), linear-gradient(90deg, rgba(8,14,13,.5), transparent 58%), linear-gradient(0deg, rgba(8,8,8,.5), transparent 38%); }
.hx-cl { max-width: none; height: auto; mix-blend-mode: screen; will-change: transform; }
.hx-back { z-index: 1; width: 110vw; left: -5vw; bottom: -8%; opacity: .5; animation: hx-sway 80s ease-in-out infinite alternate; }
.hx-zep { z-index: 1; right: 15vw; top: 25%; width: min(21vw, 320px); animation: hx-glide 46s ease-in-out infinite alternate; }
.hx-zep img { display: block; width: 100%; height: auto; animation: hx-bob 8s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(0,0,0,.3)); }
.hx-front { z-index: 1; width: 58vw; top: 30%; opacity: .36; filter: blur(1px); animation: hx-pass 54s linear infinite; }
.hx-f2 { width: 42vw; top: 44%; opacity: .26; animation-duration: 74s; animation-delay: -34s; }
@keyframes hx-pan { to { transform: translate3d(-2%, 0, 0) scale(1.03); } }
@keyframes hx-sway { to { transform: translateX(-6%); } }
@keyframes hx-glide { from { transform: translateX(2vw); } to { transform: translateX(-4vw); } }
@keyframes hx-bob { 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes hx-pass { from { transform: translateX(110vw); } to { transform: translateX(-70vw); } }
.hx-txt { position: absolute; z-index: 3; left: var(--pad, 7vw); bottom: 12svh; max-width: 580px; }
.hx-txt .lbl { opacity: .85; }
.hx-h1 { font: 500 clamp(34px, 4.4vw, 64px)/1.15 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; margin: 18px 0 0; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hx-h1 span { opacity: 0; animation: cut-fade 1.2s ease forwards; }
.hx-h1 span:nth-child(2) { color: var(--champ, #E2C799); animation-delay: .35s; }
.hx-h1 span:nth-child(3) { animation-delay: .7s; }
:lang(tr) .hx-h1 span:nth-child(1) { color: var(--champ, #E2C799); }
:lang(tr) .hx-h1 span:nth-child(2) { color: #fff; }
.hx-txt p { margin: 18px 0 0; max-width: 440px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.9); }
.hx-btn { display: inline-block; margin-top: 30px; padding: 16px 28px; background: var(--champ, #E2C799); color: #141414; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; transition: background .3s; }
.hx-btn:hover { background: #fff; }
.hx-txt small { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .08em; opacity: .75; }
.hx-txt p, .hx-btn, .hx-txt small { opacity: 0; animation: cut-fade 1s 1.2s forwards; }
.hx-txt small { animation-name: hx-small; }
@keyframes hx-small { to { opacity: .75; } }
@media (max-width: 760px) {
  .hx-zep { right: auto; left: 50%; margin-left: -28vw; width: 56vw; top: 15%; }
  .hx-sun { right: -20vw; top: -14vw; width: 120vw; height: 120vw; }
  .hx-front { width: 120vw; top: 30%; } .hx-f2 { width: 90vw; top: 38%; }
  .hx-txt { left: 20px; right: 20px; bottom: 7svh; text-align: center; }
  .hx-txt p { margin: 16px auto 0; }
  .hx-h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .hx-btn { display: block; }
}

/* ===== v57 Über mich (Startseite) ===== */
.mx-ue { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 6vw; padding: clamp(70px, 12vh, 140px) var(--pad, 7vw); background: var(--paper, #F7F4EE); max-width: 1500px; margin: 0 auto; }
.mx-ue figure { margin: 0; }
.mx-ue img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 20%; filter: sepia(.18); display: block; }
.mx-ue .lbl { color: var(--bordeaux, #7a2a33); }
.mx-ue h2 { font: 500 clamp(28px, 3.2vw, 44px)/1.2 'Cinzel', Georgia, serif; letter-spacing: .06em; margin: 16px 0 22px; }
.mx-ue p { line-height: 1.75; color: #3f3833; max-width: 460px; margin: 0 0 14px; }
.mx-ue ul { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid #d9cfbf; max-width: 520px; }
.mx-ue li { padding: 12px 0; border-bottom: 1px solid #d9cfbf; font-size: 15px; color: #2b2622; }
.mx-ue li b { color: var(--bordeaux, #7a2a33); font-weight: 500; margin-right: 10px; }
.mx-ue .cred { margin-top: 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a7f73; line-height: 1.9; }
@media (max-width: 760px) { .mx-ue { grid-template-columns: 1fr; padding: 64px 20px; gap: 34px; } }
.mx-wb figure { background: #EFE8DC; }
.mx-wb figure img { width: 52% !important; height: auto !important; object-fit: contain !important; box-shadow: 0 24px 44px -20px rgba(0,0,0,.45); transform: rotate(-2deg); }

/* ===== v57.1 Hero: Hook in 1 Sekunde (17.10.) ===== */
.hx-h1 { font: 400 clamp(46px, 6.2vw, 92px)/1.02 var(--serif, 'Playfair Display', Georgia, serif); letter-spacing: -.01em; text-transform: none; margin: 16px 0 0; }
.hx-h1 span { display: block; }
.hx-h1 span:nth-child(2) { font-style: italic; }
.hx-txt { max-width: 640px; }
.hx-txt p { font-size: clamp(16px, 1.3vw, 18px); max-width: 470px; }
.hx-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }
.hx-row .hx-btn { margin-top: 0; }
.hx-ln { color: #fff; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 6px; }
.hx-proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #fff; font-size: 13px; text-decoration: none; opacity: .9; }
.hx-proof i { font-style: normal; color: var(--champ, #E2C799); letter-spacing: .12em; }
.hx-row, .hx-proof { opacity: 0; animation: cut-fade 1s 1.2s forwards; }
.hx-zep { width: min(17vw, 260px); top: 22%; right: 13vw; }
@media (max-width: 760px) {
  .hx { height: 92svh; min-height: 560px; }
  .hx-zep { width: 40vw; margin-left: -20vw; top: 11%; }
  .hx-h1 { font-size: clamp(42px, 12vw, 54px); }
  .hx-txt { bottom: 5svh; }
  .hx-row { flex-direction: column; gap: 18px; margin-top: 24px; }
  .hx-row .hx-btn { width: 100%; }
  .hx-proof { justify-content: center; margin-top: 14px; }
}
.hx-proof i { display: inline-flex; gap: 2px; }

/* ===== v57.2 Wolken stoeren nicht mehr (17.10.): keine vorbeiziehenden Schleier, Decke nur unten, ruhig ===== */
.hx-front { display: none; }
.hx-back { bottom: -22%; opacity: .32; animation-duration: 140s; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%); mask-image: linear-gradient(180deg, transparent 0, #000 45%); }
@media (max-width: 760px) { .hx-back { width: 220vw; left: -60vw; bottom: -12%; opacity: .26; } }

/* ===== v57.3 Hero „Maison“ wie vorher: mittig, ruhig, Versalien; nur Zeppelin + Angebot (17.10.) ===== */
.hx-zep { right: auto; left: 50%; top: 20%; width: min(26vw, 380px); margin-left: calc(min(26vw, 380px) / -2); }
.hx-sun { right: auto; left: 50%; top: -4vw; width: 56vw; height: 56vw; margin-left: -28vw; }
.hx::before { background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 28%), linear-gradient(0deg, rgba(8,8,8,.62), transparent 50%); }
.hx-txt { left: 0; right: 0; max-width: none; bottom: clamp(48px, 10vh, 104px); text-align: center; padding: 0 20px; }
.hx-txt .lbl { opacity: .85; }
.hx-h1 { font: 500 clamp(26px, 3.2vw, 46px)/1.3 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; margin: 18px 0 0; }
.hx-h1 span { display: inline; font-style: normal; color: #fff !important; }
.hx-txt p { margin: 16px auto 0; max-width: 520px; font-size: 15px; color: rgba(255,255,255,.85); }
.hx-row { justify-content: center; margin-top: 30px; }
.hx-btn { background: transparent; color: #fff; border: 1px solid rgba(226,199,153,.75); padding: 16px 30px; }
.hx-btn:hover { background: var(--champ, #E2C799); color: #141414; }
.hx-ln, .hx-proof { display: none !important; }
.hx-txt small { margin-top: 14px; }
@media (max-width: 760px) {
  .hx { height: 100svh; }
  .hx-zep { width: 62vw; margin-left: -31vw; top: 17%; }
  .hx-sun { width: 130vw; height: 130vw; margin-left: -65vw; top: -10vw; }
  .hx-h1 { font-size: clamp(22px, 6.6vw, 28px); letter-spacing: .12em; }
  .hx-txt { bottom: 7svh; }
  .hx-txt p { font-size: 14.5px; }
  .hx-row .hx-btn { width: auto; }
}
.hx-h1 span:nth-child(n) { font-style: normal; }

/* ===== v58 Zeppelin auf der Mittelachse + Licht sichtbar (17.10.) =====
   Zeppelin exakt mittig (kein seitliches Gleiten), Glow + Lichtkegel liegen UEBER der Abdunklung,
   Glanz laeuft ueber die Huelle, Horizont-Gold scheint hinter dem Text durch. */
.hx { --zw: min(28vw, 420px); --zt: 21svh; --zh: calc(var(--zw) * .387); }
.hx-zep { z-index: 2; left: 50%; right: auto; top: var(--zt); width: var(--zw); margin-left: calc(var(--zw) / -2); animation: hx-float 9s ease-in-out infinite; }
.hx-zep img { animation: none; filter: drop-shadow(0 22px 26px rgba(0,0,0,.28)); }
.hx-zep::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url(../img/zeppelin-unikat.webp?v=20261109) center / 100% 100% no-repeat; mask: url(../img/zeppelin-unikat.webp?v=20261109) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255,236,200,.55) 50%, transparent 58%) 160% 0 / 300% 100% no-repeat;
  animation: hx-sheen 11s ease-in-out 2.5s infinite; }
@keyframes hx-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-.6deg); } }
@keyframes hx-sheen { 0% { background-position: 160% 0; } 28%, 100% { background-position: -60% 0; } }
/* Glow: mittig hinter dem Zeppelin, ueber der Abdunklung, atmet langsam */
.hx-sun { z-index: 2; mix-blend-mode: screen; left: 50%; right: auto; width: calc(var(--zw) * 2.3); height: calc(var(--zw) * 2.3); margin-left: calc(var(--zw) * -1.15);
  top: calc(var(--zt) + var(--zh) / 2 - var(--zw) * 1.15);
  background: radial-gradient(circle, rgba(255,222,172,.38), rgba(255,210,150,.14) 34%, rgba(255,200,140,.04) 55%, transparent 70%);
  animation: hx-glow 9s ease-in-out infinite; }
@keyframes hx-glow { 50% { opacity: .7; transform: scale(.95); } }
/* Lichtkegel: faellt vom Zeppelin sanft Richtung Text */
.hx-sky::after { content: ''; position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  left: 50%; width: calc(var(--zw) * .55); margin-left: calc(var(--zw) * -.275);
  top: calc(var(--zt) + var(--zh) * .82); height: 24svh;
  background: linear-gradient(180deg, rgba(255,226,180,.2), rgba(255,226,180,.06) 55%, transparent);
  -webkit-mask: radial-gradient(50% 100% at 50% 0, #000 30%, transparent 100%); mask: radial-gradient(50% 100% at 50% 0, #000 30%, transparent 100%);
  animation: hx-glow 9s ease-in-out infinite; }
/* Abdunklung leichter, damit das Horizont-Gold durchkommt; Lesbarkeit ueber Textschatten */
.hx::before { background: linear-gradient(180deg, rgba(0,0,0,.32), transparent 22%), linear-gradient(0deg, rgba(8,8,8,.58), rgba(8,8,8,.22) 28%, transparent 50%); }
.hx::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(70% 26% at 50% 70%, rgba(255,188,120,.16), transparent 70%); }
.hx-h1 { text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.hx-txt p, .hx-txt small, .hx-txt .lbl { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 760px) {
  .hx { --zw: 64vw; --zt: 19svh; }
  .hx-zep { margin-left: calc(var(--zw) / -2); top: var(--zt); width: var(--zw); }
  .hx-sun { width: calc(var(--zw) * 2); height: calc(var(--zw) * 2); margin-left: calc(var(--zw) * -1); top: calc(var(--zt) + var(--zh) / 2 - var(--zw)); }
  .hx-sky::after { height: 20svh; }
}
@media (max-height: 640px) and (min-width: 761px) { .hx { --zt: 15svh; --zw: min(24vw, 340px); } }

/* ===== v58.1 Handy: Licht aus dem echten Horizont statt Effekten (17.10.) =====
   Ausschnitt links (Sonnenuntergang ueber die ganze Breite, Bildfehler faellt raus),
   kein Glow-Fleck/Lichtkegel, Zeppelin im Abendlicht getoent, damit er im Bild sitzt. */
@media (max-width: 760px) {
  .hx { --zw: 54vw; --zt: 18svh; }
  .hx-bg { object-position: 22% 50%; filter: saturate(.9) sepia(.08); animation: none; }
  .hx-sun, .hx-sky::after { display: none; }
  .hx-zep img { filter: brightness(.86) sepia(.18) saturate(.92) drop-shadow(-6px 16px 18px rgba(0,0,0,.35)); }
  .hx-zep::after { opacity: .6; }
  .hx::before { background: linear-gradient(180deg, rgba(0,0,0,.38), transparent 20%), linear-gradient(0deg, rgba(8,8,8,.6), rgba(8,8,8,.25) 30%, transparent 46%); }
  .hx::after { background: radial-gradient(120% 22% at 30% 74%, rgba(255,180,110,.2), transparent 70%); }
}

/* ===== v58.2 Zeppelin klar und kraeftig (17.10.): kein Glow/Kegel/Glanz am Zeppelin, der ihn blass macht ===== */
.hx-sun, .hx-sky::after, .hx-zep::after { display: none; }
.hx-zep img { filter: contrast(1.06) saturate(1.06) drop-shadow(0 20px 24px rgba(0,0,0,.32)); }
@media (max-width: 760px) { .hx-zep img { filter: contrast(1.06) saturate(1.04) drop-shadow(-4px 14px 16px rgba(0,0,0,.35)); } }

/* ===== v59 Workbook als ruhiges Banner (17.10.): kein Overlay, kein Fokus, klein unten ===== */
.bk-pop { inset: auto auto 24px 24px; display: block; padding: 0; width: 360px; pointer-events: none; }
.bk-pop-bg, .bk-pop-txt p, .bk-pop-later { display: none; }
.bk-pop-card { pointer-events: auto; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; width: 100%; padding: 16px 44px 16px 16px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.bk-pop-card::before { height: 3px; }
.bk-pop-img img { transform: rotate(-3deg); box-shadow: 0 10px 18px -8px rgba(40,10,14,.55); }
.bk-pop-txt .lbl { font-size: 9.5px; }
.bk-pop-txt h2 { font-size: 18px; line-height: 1.2; margin: 6px 0 8px; }
.bk-pop-txt .mx-btn { display: inline; padding: 0 0 3px; background: none; color: var(--ink); border: 0; border-bottom: 1px solid var(--bordeaux); font-size: 10px; letter-spacing: .18em; }
.bk-pop-txt .mx-btn:hover { color: var(--bordeaux); background: none; }
.bk-pop-x { top: 6px; right: 6px; width: 34px; height: 34px; font-size: 24px; color: #777; }
body.bk-on .zc-btn, body.bk-on .zc-panel { visibility: visible; }
@media (max-width: 760px) {
  .bk-pop { inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; width: auto; }
  .bk-pop-card { grid-template-columns: 50px 1fr; gap: 14px; padding: 12px 40px 12px 12px; transform: translateY(130%); }
  .bk-pop-txt h2 { font-size: 16px; margin: 4px 0 6px; }
  body.bk-on .zc-btn, body.bk-on .zc-panel { visibility: hidden; }
}

/* ===== v59 Handy-Hero: Zeppelin in die Bildmitte, fliegt sanft ein (17.10.) ===== */
@media (max-width: 760px) {
  .hx { --zw: 62vw; --zt: 25svh; }
  .hx-zep { animation: hx-arrive 3.2s cubic-bezier(.22,.7,.2,1) both, hx-float 9s ease-in-out 3.2s infinite; }
}
@keyframes hx-arrive { from { opacity: 0; transform: translate(18vw, 14px) scale(.92); } to { opacity: 1; transform: none; } }

/* ===== v60 Banner springt aesthetisch rein (17.10.): weiche Feder, Cover kippt nach, Goldlinie zeichnet sich ===== */
.bk-pop-card { opacity: 0; transform: translateY(40px) scale(.94); transition: opacity .45s ease, transform .8s cubic-bezier(.34,1.45,.5,1); }
.bk-pop.on .bk-pop-card { opacity: 1; transform: none; }
.bk-pop-card::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.22,.7,.2,1) .35s; }
.bk-pop.on .bk-pop-card::before { transform: scaleX(1); }
.bk-pop-img img { transform: translateY(-14px) rotate(-12deg); opacity: 0; transition: transform .9s cubic-bezier(.34,1.5,.5,1) .2s, opacity .4s ease .2s; }
.bk-pop.on .bk-pop-img img { transform: rotate(-3deg); opacity: 1; }
.bk-pop-txt > * { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.bk-pop.on .bk-pop-txt > * { opacity: 1; transform: none; }
.bk-pop.on .bk-pop-txt > :nth-child(1) { transition-delay: .3s; }
.bk-pop.on .bk-pop-txt > :nth-child(2) { transition-delay: .4s; }
.bk-pop.on .bk-pop-txt > :nth-child(3), .bk-pop.on .bk-pop-txt > :nth-child(4) { transition-delay: .5s; }
@media (max-width: 760px) { .bk-pop-card { transform: translateY(60px) scale(.96); } }

/* ===== v61 Banner beim Ankommen: oben unter der Kopfzeile, verdeckt weder Zeppelin-Text noch Knopf (17.10.) ===== */
.bk-pop.bk-top { inset: calc(var(--nav-h, 64px) + 14px) auto auto 24px; }
.bk-pop.bk-top .bk-pop-card { transform: translateY(-36px) scale(.95); }
.bk-pop.bk-top.on .bk-pop-card { transform: none; }
@media (max-width: 760px) {
  .bk-pop.bk-top { inset: calc(var(--nav-h, 64px) + 10px) 12px auto 12px; }
  body.bk-on:has(.bk-pop.bk-top) .zc-btn { visibility: visible; }
}

/* ===== v62 Workbook als schmale Leiste unten (17.10.): immer unten, ploppt von unten auf ===== */
.bk-pop, .bk-pop.bk-top { inset: auto 0 calc(18px + env(safe-area-inset-bottom)) 0; width: auto; display: flex; justify-content: center; padding: 0 16px; }
.bk-pop-card, .bk-pop.bk-top .bk-pop-card { display: flex; align-items: center; gap: 14px; width: auto; max-width: 600px; padding: 8px 8px 8px 14px; overflow: visible; transform: translateY(140%); }
.bk-pop.on .bk-pop-card, .bk-pop.bk-top.on .bk-pop-card { transform: none; }
.bk-pop-card::before { height: 2px; }
.bk-pop-img { flex: 0 0 34px; align-self: flex-end; margin-top: -22px; }
.bk-pop-img img { transform: rotate(-4deg); }
.bk-pop.on .bk-pop-img img { transform: rotate(-4deg); }
.bk-pop-txt { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.bk-pop-txt .lbl { white-space: nowrap; }
.bk-pop-txt h2 { font-size: 16px; margin: 0; white-space: nowrap; }
.bk-pop-txt .mx-btn { white-space: nowrap; }
.bk-pop-x { position: static; flex: 0 0 32px; width: 32px; height: 32px; font-size: 22px; }
@media (max-width: 760px) {
  .bk-pop, .bk-pop.bk-top { inset: auto 0 0 0; padding: 0; }
  .bk-pop-card, .bk-pop.bk-top .bk-pop-card { width: 100%; max-width: none; gap: 12px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) 14px; box-shadow: 0 -10px 30px -16px rgba(0,0,0,.35); }
  .bk-pop-img { flex-basis: 30px; margin-top: -20px; }
  .bk-pop-txt { flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; }
  .bk-pop-txt .lbl { display: none; }
  .bk-pop-txt h2 { font-size: 15px; }
  .bk-pop-txt .mx-btn { font-size: 9.5px; }
  body.bk-on .zc-btn, body.bk-on .zc-panel, body.bk-on:has(.bk-pop.bk-top) .zc-btn { visibility: hidden; }
}
.bk-pop-x { order: 9; margin-left: 4px; }

/* ===== v63 Handy-Leiste lesbarer und schoener (17.10.) ===== */
@media (max-width: 760px) {
  .bk-pop-card, .bk-pop.bk-top .bk-pop-card { gap: 14px; padding: 12px 4px calc(12px + env(safe-area-inset-bottom)) 16px; background: var(--paper, #F7F4EE); }
  .bk-pop-card::before { height: 2px; background: linear-gradient(90deg, transparent, #C9A56B 20%, #C9A56B 80%, transparent); }
  .bk-pop-img { flex-basis: 42px; margin-top: -26px; align-self: flex-end; }
  .bk-pop-img img { box-shadow: 0 8px 14px -6px rgba(40,10,14,.6); }
  .bk-pop-txt { gap: 4px; }
  .bk-pop-txt .lbl { display: block; font-size: 9px; letter-spacing: .2em; color: var(--bordeaux); }
  .bk-pop-txt h2 { font-size: 17px; line-height: 1.15; color: #141414; }
  .bk-pop-txt .mx-btn { margin-top: 2px; font-size: 10.5px; letter-spacing: .14em; color: var(--bordeaux); border-bottom-color: currentColor; }
  .bk-pop-x { flex-basis: 44px; width: 44px; height: 44px; font-size: 24px; color: #555; }
}

/* ===== v64 Workbook-Leiste mit Charakter (17.10.): Bordeaux wie das Buch, Herzschlag zeichnet sich, Cover schimmert ===== */
.bk-pulse { display: none; }
.bk-pop-card, .bk-pop.bk-top .bk-pop-card { position: relative; background: linear-gradient(100deg, #2A0B10, #4A1520 55%, #2A0B10); color: #F3E7D3; box-shadow: 0 18px 40px -16px rgba(30,5,10,.7); }
.bk-pop-card::before { height: 1px; background: linear-gradient(90deg, transparent, #E2C799 25%, #E2C799 75%, transparent); }
.bk-pulse { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.bk-pulse path { fill: none; stroke: #E2C799; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .28; stroke-dasharray: 100; stroke-dashoffset: 100; }
.bk-pop.on .bk-pulse path { animation: bk-beat 1.8s cubic-bezier(.4,0,.2,1) .5s forwards, bk-glow 3.2s ease-in-out 2.4s infinite; }
@keyframes bk-beat { to { stroke-dashoffset: 0; } }
@keyframes bk-glow { 0%, 100% { opacity: .28; } 12% { opacity: .7; } 30% { opacity: .28; } }
.bk-pop-img, .bk-pop-txt, .bk-pop-x { position: relative; z-index: 1; }
.bk-pop-img { overflow: visible; }
.bk-pop-img::after { content: ''; position: absolute; inset: 0; transform: rotate(-4deg); pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,240,215,.55) 50%, transparent 65%) 200% 0 / 300% 100% no-repeat; }
.bk-pop.on .bk-pop-img::after { animation: bk-shine 4.5s ease-in-out 1.2s infinite; }
@keyframes bk-shine { 0% { background-position: 200% 0; } 35%, 100% { background-position: -100% 0; } }
.bk-pop-img img { box-shadow: 0 10px 18px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(226,199,153,.25); }
.bk-pop-txt .lbl { color: #E2C799; }
.bk-pop-txt h2 { color: #FFF7EA; }
.bk-pop-txt .mx-btn { color: #F3E7D3; border: 1px solid rgba(226,199,153,.7); padding: 7px 10px; letter-spacing: .16em; transition: background .3s, color .3s; }
.bk-pop-txt .mx-btn:hover { background: #E2C799; color: #2A0B10; }
.bk-pop-x { color: rgba(243,231,211,.75); }
.bk-pop-x:hover { color: #fff; }
@media (max-width: 760px) {
  .bk-pop-card, .bk-pop.bk-top .bk-pop-card { background: linear-gradient(100deg, #2A0B10, #4A1520 60%, #2A0B10); padding-top: 13px; }
  .bk-pop-card::before { height: 1px; background: linear-gradient(90deg, transparent, #E2C799 20%, #E2C799 80%, transparent); }
  .bk-pop-txt .lbl { color: #E2C799; }
  .bk-pop-txt h2 { color: #FFF7EA; font-size: 17px; }
  .bk-pop-txt .mx-btn { color: #F3E7D3; border: 1px solid rgba(226,199,153,.7); padding: 6px 9px; margin-top: 5px; font-size: 9.5px; }
  .bk-pop-x { color: rgba(243,231,211,.75); }
}
.bk-pulse { top: auto; height: 55%; }

/* ===== v67 SPUREN (17.10.): "Erkennst du dich?" nach dem Hero ===== */
.mx-spur { background: var(--bg, #f8f6f2); }
.sp-list { list-style: none; counter-reset: sp; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.sp-list li { counter-increment: sp; position: relative; padding: 22px 0 22px 44px; border-top: 1px solid var(--line, #e5e1da); font: 400 clamp(17px, 1.5vw, 20px)/1.45 var(--serif, Georgia, serif); color: #141414; }
.sp-list li::before { content: counter(sp, decimal-leading-zero); position: absolute; left: 0; top: 26px; font: 600 11px/1 var(--sans, Inter, sans-serif); letter-spacing: .14em; color: var(--bordeaux, #5C1A24); }
.sp-end { max-width: 46ch; margin: clamp(36px, 4vw, 52px) auto 0; text-align: center; font: italic 400 clamp(19px, 1.9vw, 24px)/1.45 var(--serif, Georgia, serif); color: #141414; }
.sp-ln { text-align: center; margin-top: 22px; }
@media (max-width: 900px) { .sp-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sp-list { grid-template-columns: 1fr; } .sp-list li { padding: 18px 0 18px 40px; } .sp-list li::before { top: 22px; } }

/* v69 LANDING KURZ (18.10.): Muster-Check mit Auswertung, Wegleiste, Schluss mit 3 Schritten */
.hx-mini{display:block;margin-top:14px;font:600 11px/1 var(--sans,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.sp-tap{grid-template-columns:repeat(3,1fr);gap:10px;max-width:980px}
.sp-tap li{counter-increment:none;padding:0;border:0}.sp-tap li::before{content:none}
.sp-b{width:100%;height:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:18px;background:#fff;border:1px solid #e5e1da;font:400 18px/1.35 var(--serif,Georgia,serif);color:#141414;cursor:pointer;transition:border-color .25s,background .25s,transform .15s;-webkit-tap-highlight-color:transparent}
.sp-b:active{transform:scale(.98)}
.sp-b i{flex:0 0 22px;height:22px;border:1.5px solid #c9c2b6;border-radius:50%;position:relative;transition:.25s}
.sp-b[aria-pressed=true]{border-color:#5C1A24;background:#fbf6f3}
.sp-b[aria-pressed=true] i{background:#5C1A24;border-color:#5C1A24;animation:sq-pop .35s ease}
.sp-b[aria-pressed=true] i::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes sq-pop{50%{transform:scale(1.25)}}
.sq-res{max-width:640px;margin:30px auto 0;text-align:center}
.sq-bars{display:grid;gap:10px;margin:0 auto 18px;max-width:420px}
.sq-bar{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;text-align:left}
.sq-bar span{font:600 10.5px/1 var(--sans,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#666}
.sq-bar>i{height:6px;background:#ebe6de;position:relative;overflow:hidden}
.sq-bar>i i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#C9A96E,#5C1A24);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.sq-res .sp-msg{margin:12px auto 18px;max-width:34ch;font:italic 400 21px/1.4 var(--serif,Georgia,serif);color:#141414}
.sq-go,.sq-pk{display:inline-block;background:#141414;color:#fff;border:0;padding:17px 28px;font:600 11.5px/1.3 var(--sans,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:opacity .3s,background .3s}
.sq-go:hover,.sq-pk:hover{background:#5C1A24}
.sq-go:disabled{opacity:.25;cursor:default}
.sq-out{display:none;text-align:left;margin-top:30px}
.sq-out.on{display:block;animation:sq-in .7s cubic-bezier(.2,.8,.2,1)}
@keyframes sq-in{from{opacity:0;transform:translateY(16px)}}
.sq-r{background:#fff;border:1px solid #e5e1da;border-top:3px solid #5C1A24;padding:clamp(22px,4vw,36px)}
.sq-r .lbl{color:#5C1A24}
.sq-r h3{font-size:clamp(28px,3.4vw,38px);margin:8px 0 18px}
.sq-r dl{margin:0}
.sq-r dt{font:600 10.5px/1 var(--sans,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#888;margin:18px 0 6px}
.sq-r dd{margin:0;font-size:16px;line-height:1.6;color:#2b2b2b}
.sq-r dd.tip{background:#f8f4ee;border-left:2px solid #C9A96E;padding:12px 14px;font-style:italic}
.sq-pk{display:block;text-align:center;margin-top:24px}
.sq-also{margin:14px 0 0;font-size:14px;color:#555}
.sq-small{margin:12px 0 0;font-size:13px;color:#777;line-height:1.5}
.sq-small a{color:#141414}
.mx-card .lbl .pr{color:#5C1A24;font-weight:700}
.weg,.swipe{display:none}
@media (max-width:900px){
 .sp-tap{grid-template-columns:1fr}
 .weg{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin:0 auto 26px;max-width:520px}
 .weg-ln{position:absolute;left:12.5%;right:12.5%;top:9px;height:1px;background:#e0dbd2}
 .weg a{position:relative;text-align:center;text-decoration:none;color:#141414;padding-top:28px}
 .weg a>i{position:absolute;left:50%;top:9px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:1.5px solid #c9c2b6;transition:.3s}
 .weg a[data-i="0"]>i{width:10px;height:10px}.weg a[data-i="1"]>i{width:13px;height:13px}.weg a[data-i="2"]>i{width:16px;height:16px}.weg a[data-i="3"]>i{width:19px;height:19px}
 .weg a.on>i{background:#5C1A24;border-color:#5C1A24}
 .weg b{display:block;font:600 10px/1.25 var(--sans,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase;opacity:.55;transition:.3s}
 .weg a.on b{opacity:1}
 .weg small{display:block;margin-top:4px;font-size:11px;color:#888}
 .swipe{display:block;text-align:center;margin:14px 0 0;font:600 10px/1 var(--sans,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#888}
 .sw-n{color:#5C1A24;margin-right:8px}
 .mx-card{flex-basis:min(74vw,330px)}
}
.price s{color:#999}.price .deal{font:600 10px/1 var(--sans,Inter,sans-serif);letter-spacing:.08em;background:#5C1A24;color:#fff;padding:4px 6px;font-style:normal;margin-left:4px}
.mx-end{text-align:center;padding-block:clamp(72px,9vw,120px)}
.mx-end h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:28px}
.steps{list-style:none;display:flex;justify-content:center;gap:clamp(18px,4vw,48px);padding:0;margin:0 0 30px;flex-wrap:wrap}
.steps li{font:400 15px/1.3 var(--sans,Inter,sans-serif);color:#444;display:flex;align-items:center;gap:10px}
.steps b{width:28px;height:28px;border-radius:50%;border:1px solid #141414;display:grid;place-items:center;font:600 12px/1 var(--sans,Inter,sans-serif)}
.end-btn{display:inline-block;padding:16px 34px;background:#141414;color:#fff;font:600 13px/1 var(--sans,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.mx-end small{display:block;margin-top:18px;color:#777;font-size:14px}
.mx-end small a{color:#141414}
/* v69.2 Auswertung schlank: Kern sichtbar, Rest auf Knopfdruck */
.sq-r h3{margin-bottom:12px}
.sq-now{font-size:17px;line-height:1.55;color:#2b2b2b;margin:0 0 18px}
.sq-more{border-top:1px solid #ebe6de}
.sq-more:last-of-type{border-bottom:1px solid #ebe6de}
.sq-more summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font:600 11px/1 var(--sans,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#141414;-webkit-tap-highlight-color:transparent}
.sq-more summary::-webkit-details-marker{display:none}
.sq-more summary::after{content:"+";font:300 22px/1 var(--sans,Inter,sans-serif);color:#5C1A24;transition:transform .3s}
.sq-more[open] summary::after{transform:rotate(45deg)}
.sq-more p{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:#2b2b2b}
.sq-more[open] p{animation:sq-in .45s ease}
.sq-more .tip{background:#f8f4ee;border-left:2px solid #C9A96E;padding:12px 14px;font-style:italic}
.sq-fact{color:#555!important}
.sq-more .sq-src{font-size:11.5px;color:#999}

/* v78 AUDIT 05.11.: Über-mich-Überschrift kurz in Playfair (passt aufs Handy), Unterzeile kursiv, Qualifikationen ohne Versalien (§ 8a) */
.mx-ue h2 { font: 400 clamp(30px, 3.4vw, 46px)/1.12 var(--serif); letter-spacing: -.01em; text-transform: none; margin: 16px 0 14px; overflow-wrap: break-word; hyphens: auto; }
.mx-ue .ue-sub { font: italic 400 clamp(18px, 1.6vw, 22px)/1.4 var(--serif); margin: 0 0 20px; color: inherit; }
.mx-ue p.cred { text-transform: none !important; letter-spacing: .02em !important; }

/* v80 START WARM + WEGWEISER (07.11.): WhatsApp-Link im Hero, „Was möchtest du tun?“ mit 4 Kacheln */
.hx-wa { display: inline-block; margin-top: 14px; color: #fff; font: 400 15px/1.4 Inter, sans-serif; text-decoration: underline; text-underline-offset: 4px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.mx-go { background: #fff; padding: 72px 6vw 64px; text-align: center; }
.mx-go h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 34px; }
.go-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.go { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 26px 22px 22px; border: 1px solid rgba(20,20,20,.12); color: #141414; text-decoration: none; transition: border-color .25s, transform .25s; }
.go:hover { border-color: #141414; transform: translateY(-2px); }
.go svg { color: #5C1A24; margin-bottom: 6px; }
.go b { font: 400 23px/1.2 var(--serif, 'Playfair Display'), Georgia, serif; }
.go span { font: 400 14.5px/1.55 Inter, sans-serif; color: #555; flex: 1; }
.go i { font: 600 11px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; font-style: normal; margin-top: 10px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.go-main { background: #141414; color: #fff; border-color: #141414; }
.go-main svg { color: #E2C799; } .go-main span { color: rgba(255,255,255,.8); } .go-main i { color: #E2C799; }
.go-more { margin: 30px 0 0; font: 400 14.5px/1.8 Inter, sans-serif; color: #555; }
.go-more a { color: #141414; text-underline-offset: 4px; }
@media (max-width: 900px) { .go-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mx-go { padding: 52px 18px 44px; } .go-grid { gap: 10px; } .go { padding: 20px 16px 18px; } .go b { font-size: 19px; } .go span { font-size: 13.5px; } .go-main { grid-column: 1 / -1; } }

/* ===== v81 FLUSS (Handy: Pakete-Karussell fängt das Runterwischen nicht mehr ab) ===== */
@media (max-width: 900px) {
  .mx-grid { overflow-y: hidden; overscroll-behavior: auto; touch-action: auto; scroll-snap-type: x mandatory; padding-top: 6px; padding-bottom: 10px;
    opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease, ease), transform .9s var(--ease, ease); }
  .mx-grid.in { opacity: 1; transform: none; }
  .mx-card { scroll-snap-stop: always; }
  .mx-grid .mx-card.rv { opacity: .55; transform: scale(.93); transition: transform .5s var(--ease, ease), opacity .5s var(--ease, ease); }
  .mx-grid .mx-card.rv.act { opacity: 1; transform: none; }
  .mx-grid .mx-card:not(.act) .bf * { animation-play-state: paused !important; }
  body.zb-on .zc-btn { translate: 0 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
}

/* ===== v82 MUSTER-CHECK als Kartenstapel ===== */
.mc { position: relative; padding: clamp(56px, 7vw, 92px) var(--pad, 22px); background: radial-gradient(120% 80% at 50% 0%, #74242f 0%, #5C1A24 45%, #3d1017 100%); color: #fff; text-align: center; overflow: hidden; }
.mc::before { content: ''; position: absolute; left: 50%; top: 52%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(226,199,153,.22), transparent 65%); pointer-events: none; }
.mc-head .lbl { color: #E2C799; }
.mc-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 400; margin: 10px 0 8px; color: #fff; }
.mc-head p { margin: 0 auto; max-width: 40ch; color: rgba(255,255,255,.78); font-size: 14.5px; }
.mc-stage { position: relative; max-width: 420px; margin: clamp(26px, 3vw, 36px) auto 0; }
.mc-deck { position: relative; height: 270px; }
.mc-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 32px; background: #F7F4EE; color: #141414; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform .45s var(--ease, cubic-bezier(.2,.8,.2,1)), opacity .45s; will-change: transform; }
.mc-card::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(92,26,36,.14); pointer-events: none; }
.mc-card p { margin: 0; font: italic 400 clamp(22px, 2.4vw, 27px)/1.35 var(--serif, 'Playfair Display', serif); }
.mc-n { position: absolute; top: 22px; left: 0; right: 0; font: 600 10px/1 var(--sans, Inter, sans-serif); letter-spacing: .22em; color: #a3968a; }
.mc-card[data-pos="1"] { transform: translateY(12px) scale(.95) rotate(-2.5deg); }
.mc-card[data-pos="2"] { transform: translateY(22px) scale(.9) rotate(2deg); }
.mc-card[data-pos="3"], .mc-card[data-pos="4"], .mc-card[data-pos="5"] { transform: translateY(26px) scale(.86); opacity: 0; }
.mc-card.drag { transition: none; cursor: grabbing; }
.mc-card.out-yes { transform: translateX(130%) rotate(16deg) !important; opacity: 0; }
.mc-card.out-no { transform: translateX(-130%) rotate(-16deg) !important; opacity: 0; }
.mc-card.done { visibility: hidden; }
.mc-stamp { position: absolute; top: 22px; padding: 6px 10px; border: 2px solid; font: 700 11px/1 var(--sans, Inter, sans-serif); letter-spacing: .2em; text-transform: uppercase; opacity: 0; }
.mc-yes { right: 20px; color: #9a6b1f; transform: rotate(8deg); }
.mc-no { left: 20px; color: #8a8a8a; transform: rotate(-8deg); }
.mc-ctrl { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px auto 0; }
.mc-b { min-width: 124px; padding: 15px 18px; font: 600 11px/1 var(--sans, Inter, sans-serif); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; transition: background .3s, transform .2s; }
.mc-byes { background: #E2C799; border-color: #E2C799; color: #141414; }
.mc-b:active { transform: scale(.96); }
.mc-b:hover { background: rgba(255,255,255,.1); } .mc-byes:hover { background: #ecd6ae; }
.mc-dots { display: flex; gap: 6px; } .mc-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background .3s, transform .3s; }
.mc-dots i.on { background: #E2C799; transform: scale(1.25); } .mc-dots i.cur { background: #fff; }
.mc-priv { position: relative; margin: 22px 0 0; font-size: 12px; color: rgba(255,255,255,.6); }
.mc-priv a { color: rgba(255,255,255,.85); }
.mc.fin .mc-ctrl, .mc.fin .mc-deck { display: none; }
.mc-end { background: #F7F4EE; color: #141414; padding: 34px 28px 26px; text-align: left; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); animation: mc-in .7s var(--ease, ease) both; }
@keyframes mc-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.mc-end .lbl { color: #5C1A24; }
.mc-end h3 { font-size: 30px; font-weight: 400; font-style: italic; margin: 6px 0 10px; }
.mc-end .sq-now { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 14px; }
.mc-end .sq-more { border-top: 1px solid #e3ddd2; padding: 10px 0; font-size: 14px; color: #444; }
.mc-end .sq-more summary { cursor: pointer; font: 600 10.5px/1.4 var(--sans, Inter, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #141414; }
.mc-end .sq-src { font-size: 11.5px; color: #888; }
.mc-end .sq-pk { display: block; margin: 16px 0 0; padding: 15px 12px; text-align: center; background: #141414; color: #fff; text-decoration: none; font: 600 11px/1 var(--sans, Inter, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.mc-end .sq-also { font-size: 13px; color: #666; margin: 12px 0 0; }
.mc-end .sq-small { font-size: 12.5px; color: #777; margin: 12px 0 0; }
.mc-end .sq-small a { color: #141414; }
.mc-again { display: block; margin: 16px auto 0; background: none; border: 0; border-bottom: 1px solid #141414; padding: 4px 0; font: 600 10.5px/1 var(--sans, Inter, sans-serif); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; color: #141414; }
.mc-deck.hint .mc-card[data-pos="0"] { animation: mc-hint 1.6s var(--ease, ease) .4s 1; }
@keyframes mc-hint { 0%,100% { transform: none; } 30% { transform: translateX(26px) rotate(3deg); } 60% { transform: translateX(-14px) rotate(-1.5deg); } }
@media (max-width: 760px) {
  .mc-deck { height: 250px; }
  .mc-stage { max-width: 340px; }
  .mc-b { min-width: 0; flex: 1; padding: 15px 8px; }
  .mc-ctrl { max-width: 340px; gap: 12px; }
  .mc-dots { flex-direction: column; gap: 4px; } .mc-dots i { width: 5px; height: 5px; }
}
.mc-end .sq-r { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; max-width: none; }


/* v83: Was möchtest du tun? am Handy 2 x 2 */
@media (max-width: 560px) {
  .go-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .go-main { grid-column: auto; }
  .go { padding: 18px 14px 16px; gap: 6px; }
  .go svg { width: 22px; height: 22px; margin-bottom: 2px; }
  .go b { font-size: 17.5px; line-height: 1.2; }
  .go span { font-size: 12.5px; line-height: 1.45; }
  .go i { font-size: 9.5px; letter-spacing: .12em; margin-top: 6px; }
}


/* v84 MENÜ: Seitenleiste, eine Schrift */
.mm { right: auto; width: min(440px, 100%); padding: 0; transform: translateX(-100%); transition: transform .55s var(--ease), visibility 0s .55s; box-shadow: 0 0 60px rgba(0,0,0,.12); overflow-y: auto; }
.mm.open { transform: none; transition: transform .55s var(--ease); }
.mm-bg { position: fixed; inset: 0; z-index: 59; background: rgba(20,20,20,.38); opacity: 0; pointer-events: none; transition: opacity .45s; }
.mm.open + .mm-bg { opacity: 1; pointer-events: auto; }
.mm-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px; border-bottom: 1px solid #ece8e1; }
.mm-close { position: relative; width: 22px; height: 22px; padding: 0; align-self: center; }
.mm-close i, .mm-close::before { content: ''; position: absolute; left: 1px; top: 10px; width: 20px; height: 1px; background: var(--ink); transform: rotate(45deg); }
.mm-close::before { transform: rotate(-45deg); }
.mm-mark { font: 400 20px/1 var(--serif); font-style: italic; color: var(--ink); text-decoration: none; }
.mm-mark i { color: #5C1A24; }
.mm .mm-list { margin: 8px 0 0; padding: 0 28px; }
.mm .mm-list li a { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; border-bottom: 1px solid #ece8e1; font: 500 13.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.mm .mm-list li a svg { color: #b9b1a4; transition: transform .3s var(--ease), color .3s; }
.mm .mm-list li a:hover { opacity: 1; padding-left: 0; }
.mm .mm-list li a:hover svg { transform: translateX(4px); color: var(--ink); }
.mm-feat { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; margin: 32px 28px 0; padding: 14px; background: #f6f3ee; text-decoration: none; color: var(--ink); }
.mm-feat img { width: 92px; height: 110px; object-fit: cover; object-position: 50% 20%; display: block; }
.mm-feat span { display: grid; gap: 7px; }
.mm-feat small { font: 600 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #8a7f70; }
.mm-feat b { font: 500 15px/1.3 var(--sans); }
.mm-feat em { font: 400 13px/1.3 var(--sans); font-style: normal; color: #6b6b6b; }
.mm-feat:hover b { text-decoration: underline; text-underline-offset: 3px; }
.mm .mm-foot { margin-top: auto; padding: 28px; display: grid; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8a8a8a; }
.mm-foot span { display: flex; gap: 20px; flex-wrap: wrap; }
.mm-foot a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 480px) { .mm { box-shadow: none; } .mm-top, .mm .mm-list, .mm .mm-foot { padding-left: 22px; padding-right: 22px; } .mm-feat { margin: 26px 22px 0; } }

body:has(.mm.open) [class^="zc"], body:has(.mm.open) [id^="zc"] { display: none !important; }

/* v84 FÜHRUNG: Wegweiser in 3 Schritten */
.fx { padding: 0 var(--pad); background: #fff; border-bottom: 1px solid #ece8e1; }
.fx-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(3, 1fr); }
.fx-steps li + li { border-left: 1px solid #ece8e1; }
.fx-steps a { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 5px; align-items: baseline; padding: 30px 28px; text-decoration: none; color: var(--ink); transition: background .3s; }
.fx-steps a:hover { background: #faf8f4; }
.fx-steps b { grid-row: span 2; min-width: 1.6em; font: 400 28px/1 var(--serif); font-style: italic; color: #b08a4f; }
.fx-steps span { font: 500 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.fx-steps small { font: 400 13.5px/1.3 var(--sans); color: #6b6b6b; }
@media (max-width: 760px) {
  .fx { padding: 0 18px; }
  .fx-steps { grid-template-columns: 1fr; }
  .fx-steps li + li { border-left: 0; border-top: 1px solid #ece8e1; }
  .fx-steps a { padding: 18px 4px; }
  .fx-steps b { font-size: 24px; }
}
.mx-end .lbl { display: block; text-align: center; margin-bottom: 14px; }
.mx-end .end-lede { max-width: 30em; margin: 0 auto 26px; text-align: center; color: #555; }

.bk-pulse { display: none !important; }