.sw-h24 { position: relative; min-height: 100vh; background: #F6E8E6; color: #3B2B26; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.8rem clamp(2rem, 5vw, 4rem) 2rem; overflow: hidden; }
.sw-h24::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 420px at 50% -8%, rgba(255,255,255,0.65), rgba(255,255,255,0) 62%); pointer-events: none; }
.sw-h24-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 0.7rem; letter-spacing: 4px; text-transform: uppercase; font-weight: 600; color: #3B2B26; margin-bottom: 1.4rem; }
.sw-h24-dot { width: 8px; height: 8px; border-radius: 50%; background: #B5854B; }
.sw-h24-eyebrow-loc { font-style: normal; color: #8A6F63; font-weight: 500; }
.sw-h24-title { position: relative; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 54px; line-height: 0.98; letter-spacing: -1.2px; color: #3B2B26; margin: 0 auto 0.9rem; max-width: 22ch; }
.sw-h24-italic { font-style: italic; font-weight: 500; color: #B5854B; }
.sw-h24-sub { position: relative; font-size: 16px; line-height: 1.6; color: #8A6F63; max-width: 56ch; margin: 0 auto 0.6rem; }
.sw-h24-emphasis { position: relative; display: block; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; color: rgba(181,133,75,0.95); margin-bottom: 1.2rem; }
.sw-h24-vanity { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; width: 100%; max-width: 1060px; margin: 0 auto 1.4rem; }
.sw-h24-menu { display: flex; flex-direction: column; gap: 14px; }
.sw-h24-menu-left { text-align: right; align-items: flex-end; }
.sw-h24-menu-right { text-align: left; align-items: flex-start; padding-top: 3.2rem; }
.sw-h24-menu-kicker { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: #B5854B; }
.sw-h24-menu-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.25rem; color: #3B2B26; margin: 0 0 0.2rem; }
.sw-h24-treat { display: flex; gap: 12px; align-items: baseline; }
.sw-h24-menu-left .sw-h24-treat { flex-direction: row-reverse; }
.sw-h24-treat-num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 0.9rem; color: #B5854B; }
.sw-h24-treat-body { display: flex; flex-direction: column; gap: 2px; }
.sw-h24-treat-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.18rem; font-weight: 600; color: #3B2B26; }
.sw-h24-treat-meta { font-size: 0.72rem; letter-spacing: 0.08em; color: #8A6F63; }
.sw-h24-mirror { position: relative; padding: 15px; border: 7px dotted #D9B98C; border-radius: 50%; }
.sw-h24-mirror::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(181,133,75,0.55); border-radius: 50%; pointer-events: none; }
.sw-h24-mirror-photo { position: relative; width: min(250px, 22vw); height: min(330px, 42vh); border-radius: 50%; background-image: url('/studio/components/images/beauty-2-kosmetik.jpg'); background-size: cover; background-position: 50% 25%; box-shadow: 0 26px 50px -26px rgba(59,43,38,0.5), inset 0 0 0 1px rgba(255,255,255,0.4); }
.sw-h24-photo-credit { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246,232,230,0.95); background: rgba(59,43,38,0.45); padding: 4px 12px; border-radius: 999px; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sw-h24-actions { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 1.3rem; }
.sw-h24-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #3B2B26; color: #F6E8E6; font-size: 0.9rem; font-weight: 600; padding: 14px 30px; border-radius: 999px; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sw-h24-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(59,43,38,0.55); }
.sw-h24-cta-secondary { display: inline-flex; align-items: center; color: #3B2B26; font-size: 0.9rem; font-weight: 600; padding: 13px 26px; border: 1.5px solid rgba(181,133,75,0.55); border-radius: 999px; text-decoration: none; transition: border-color 0.25s ease, background 0.25s ease; }
.sw-h24-cta-secondary:hover { border-color: #B5854B; background: rgba(181,133,75,0.08); }
.sw-h24-foot { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 10px; padding-top: 1rem; border-top: 1px solid rgba(181,133,75,0.4); width: min(460px, 100%); margin: 0 auto; }
.sw-h24-foot-num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.05rem; font-weight: 600; color: #B5854B; white-space: nowrap; }
.sw-h24-foot-meta { font-size: 0.68rem; line-height: 1.5; color: #8A6F63; }
@media (max-width: 960px) { .sw-h24 { padding: 2.4rem 1.5rem 2rem; } .sw-h24-title { font-size: 38px; } .sw-h24-vanity { grid-template-columns: 1fr; gap: 1.6rem; } .sw-h24-menu-left { text-align: left; align-items: flex-start; } .sw-h24-menu-left .sw-h24-treat { flex-direction: row; } .sw-h24-menu-right { padding-top: 0; } .sw-h24-mirror { justify-self: center; order: -1; } .sw-h24-mirror-photo { width: min(230px, 60vw); height: min(300px, 38vh); } .sw-h24-actions { flex-wrap: wrap; } }