/* valcani: Grundlage fuer Cover und Unterseiten. Onyx, Perle, Platin, Smaragd; Playfair Display und Albert Sans lokal. */
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-latin-ext.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-italic-latin.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-italic-latin-ext.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";src:url(/assets/fonts/albert-sans-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";src:url(/assets/fonts/albert-sans-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans";src:url(/assets/fonts/albert-sans-italic-latin.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --onyx:#0f0f11;--ink:#17171a;--ink-2:#3a3a40;--mist:#6f6d68;--platinum:#c3c0ba;--line:#dcd7cf;
  --pearl:#f6f3ee;--pearl-2:#ede8e0;--white:#fffdfa;
  --emerald:#1d5b4b;--emerald-2:#2b7a64;--emerald-soft:#d9e8e2;--champagne:#cdb684;--champagne-2:#e2d3ae;
  --serif:"Playfair Display",Didot,"Bodoni 72",Georgia,serif;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px;--r-s:10px;
  --glass:rgba(255,253,250,.62);--glass-b:rgba(255,255,255,.7);--glass-dark:rgba(14,14,17,.42);--glass-dark-b:rgba(255,255,255,.16);
  --shadow:0 18px 50px -24px rgba(15,15,17,.35),0 2px 8px -4px rgba(15,15,17,.12);
  --ease:cubic-bezier(.22,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--pearl);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga"}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--emerald-2);outline-offset:3px}
.ic{width:1.15em;height:1.15em;flex:none}
.ic--big{width:2rem;height:2rem}
.ic--flip{transform:scaleX(-1)}
.glass{background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,253,250,.94)}}

/* KI-Badge (netzweit, 18 px seit 19.10.2026) */
/* ki-badge anfang */
.ki-bild{position:relative}
.ki-bild .ki-badge{position:absolute!important;left:10px!important;bottom:10px!important;top:auto!important;right:auto!important;width:auto!important;height:18px!important;max-width:none!important;aspect-ratio:auto!important;min-height:0!important;object-fit:contain!important;transform:none!important;filter:none!important;opacity:.92;z-index:3;pointer-events:none;border-radius:0!important;margin:0!important;inset:auto auto 10px 10px!important}
/* ki-badge ende */

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* valcani Unterseiten: Heftkopf zentriert, Haarlinien, Glas, Smaragd. Grundlage in base.css. */
html{scroll-behavior:smooth}
body{background:var(--pearl) radial-gradient(70% 45% at 85% -5%,rgba(29,91,75,.08),transparent 70%),radial-gradient(60% 40% at 0% 10%,rgba(205,182,132,.12),transparent 70%);background-attachment:fixed;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;margin:0}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.wrap--text{max-width:780px}
.wrap--tool{max-width:1040px}
.skip{position:absolute;left:-999px;top:8px;background:var(--onyx);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.kicker{font:650 .66rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--emerald);margin:0 0 .7rem}
.kicker--cat{display:flex;align-items:center;gap:.5rem;color:var(--tone,var(--emerald))}
.kicker--cat a{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none}
.kicker .ic{width:1.15rem;height:1.15rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.3rem;border-radius:999px;font:650 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.btn .ic{width:1rem;height:1rem}
.btn--ink{background:var(--onyx);color:var(--pearl)}
.btn--ink:hover{background:var(--emerald);transform:translateY(-1px)}
.btn--line{background:rgba(255,253,250,.6);border-color:var(--line);color:var(--ink)}
.btn--line:hover{background:var(--white);border-color:var(--platinum)}
.link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--emerald);color:var(--ink)}
.link:hover{color:var(--emerald)}
.link .ic{width:1rem;height:1rem}

/* ---------- Kopf: Heftkopf, beim Scrollen schmal ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--emerald),var(--champagne));z-index:70}
.hd{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(23,23,26,.08);transition:background .3s}
.hd.is-scrolled{background:rgba(246,243,238,.9)}
.hd__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;padding:.55rem 0}
.hd__menu{justify-self:start}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);justify-self:center}
.logo .mark{width:30px;height:30px}
.logo__word{font:500 1.75rem/1 var(--serif);letter-spacing:-.03em;transform:translateY(-.06em)}
.hd__nav{grid-column:1/-1;order:3;display:none}
.hd__nav ul{display:flex;justify-content:center;gap:clamp(.6rem,2vw,2.2rem);padding:.15rem 0 .55rem}
.hd__nav a{display:block;padding:.35rem 0;font:650 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hd__nav a:hover,.hd__nav a[aria-current]{color:var(--ink);border-color:var(--emerald)}
.hd__act{display:flex;align-items:center;gap:.15rem;justify-self:end}
.hd__btn{position:relative;display:inline-flex;align-items:center;gap:.45rem;height:40px;min-width:40px;padding:0 .6rem;border-radius:999px;border:0;background:transparent;color:var(--ink);text-decoration:none;transition:background .2s}
.hd__btn:hover{background:rgba(23,23,26,.06)}
.hd__btn kbd{font:600 .6rem var(--sans);letter-spacing:.08em;color:var(--mist);border:1px solid var(--line);border-radius:6px;padding:2px 5px}
.hd__lang{height:32px;min-width:0;padding:0 .65rem;margin-right:.2rem;border:1px solid var(--line);font:650 .64rem/1 var(--sans);letter-spacing:.16em;color:var(--ink-2)}
.hd__lang:hover{color:var(--ink);border-color:var(--platinum)}
.hd__count{position:absolute;top:3px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--emerald);color:#fff;font:650 .6rem/16px var(--sans);text-align:center;padding:0 4px}
@media (min-width:1080px){.hd__nav{display:block}.hd__menu{visibility:hidden}.hd.is-scrolled .hd__nav ul{padding-bottom:.4rem}}
@media (max-width:640px){.hd__btn kbd{display:none}.logo__word{font-size:1.55rem}}

/* Schublade und Suche */
.drawer,.search{position:fixed;inset:0;z-index:60;background:rgba(15,15,17,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.drawer__panel{position:absolute;top:0;left:0;bottom:0;width:min(440px,92vw);padding:28px 26px 40px;overflow:auto;border-radius:0 24px 24px 0;background:rgba(250,248,244,.94)}
.drawer__close{position:absolute;top:14px;right:14px}
.drawer__brand{font:500 2rem/1 var(--serif);letter-spacing:-.03em;margin:6px 0 24px}
.drawer__brand span{display:block;font:500 .66rem/1.3 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--emerald);margin-top:.6rem}
.drawer__list li a{display:grid;grid-template-columns:22px 1fr;gap:2px 12px;align-items:center;padding:.8rem 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;font:500 1.3rem/1.15 var(--serif)}
.drawer__list li a .ic{color:var(--emerald)}
.drawer__list li a small{grid-column:2;font:400 .82rem/1.35 var(--sans);color:var(--mist)}
.drawer__list--small li a{font:500 .95rem var(--sans)}
.drawer__foot{margin-top:24px;font-size:.85rem;color:var(--ink-2)}
.search{display:flex;justify-content:center;align-items:flex-start;padding:max(8vh,70px) 16px 16px}
.search__panel{width:min(720px,100%);max-height:80vh;overflow:auto;border-radius:24px;padding:12px;background:rgba(250,248,244,.95)}
.search__bar{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.search__bar input{flex:1;border:0;outline:0;background:transparent;font:400 1.05rem var(--sans);color:var(--ink);min-width:0}
.search__res{display:grid;gap:4px;margin-top:10px}
.search__res li a{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;padding:8px;border-radius:14px;text-decoration:none;color:inherit}
.search__res li a:hover,.search__res li a:focus{background:rgba(23,23,26,.05)}
.search__res img,.search__res .ph{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--emerald-soft)}
.search__res b{display:block;font:500 1.08rem/1.2 var(--serif)}
.search__res small{display:block;font:400 .8rem var(--sans);color:var(--mist)}
.search__res em{font:650 .6rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);font-style:normal}
.search__hint{font-size:.75rem;color:var(--mist);margin:10px 8px 4px}

/* ---------- Abschnitte, Karten ---------- */
.sec{padding:clamp(56px,7vw,104px) 0}
.sec__head{text-align:center;max-width:740px;margin:0 auto clamp(28px,4vw,48px)}
.sec__title{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.02}
.sec__dek{font:400 clamp(1rem,1.5vw,1.15rem)/1.55 var(--sans);color:var(--ink-2);margin:.8rem auto 0;max-width:62ch}
.lead--wide{font:italic 400 clamp(1.2rem,2vw,1.5rem)/1.5 var(--serif);max-width:820px;margin:0 auto clamp(32px,4vw,52px);text-align:center;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips--wrap{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,253,250,.6);font:600 .78rem/1 var(--sans);letter-spacing:.04em;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip .ic{width:1rem;height:1rem;color:var(--emerald)}
.chip:hover{border-color:var(--emerald)}
.chip[aria-pressed="true"]{background:var(--onyx);color:var(--pearl);border-color:var(--onyx)}
.grid{display:grid;gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid--3{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column}
.card__img{display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.card__img .pic{aspect-ratio:4/5;overflow:hidden}
.card__img img:not(.ki-badge){width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card__img img:not(.ki-badge){transform:scale(1.045)}
.card__body{display:flex;flex-direction:column;flex:1;padding:1.05rem .1rem 0}
.card__title{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.16;margin:0 0 .5rem}
.card__title a{text-decoration:none}
.card__title a:hover{color:var(--emerald)}
.card__dek{font:400 .95rem/1.55 var(--sans);color:var(--ink-2)}
.card__meta{display:flex;align-items:center;gap:.45rem;font:600 .72rem/1 var(--sans);letter-spacing:.06em;color:var(--mist);margin:auto 0 0;padding-top:.8rem;border-top:1px solid var(--line)}
.card__meta .ic{width:.95rem;height:.95rem}
.card__film{display:inline-flex;align-items:center;gap:.3rem;margin-left:.6rem;color:var(--emerald)}
.save{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:34px;width:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,253,250,.6);color:var(--ink-2);transition:background .2s,color .2s,border-color .2s}
.save .ic{width:1rem;height:1rem}
.save:hover{border-color:var(--emerald)}
.save[aria-pressed="true"]{background:var(--onyx);color:#fff;border-color:var(--onyx)}
.save[aria-pressed="true"] .ic{fill:currentColor}
.save--text{width:auto;padding:0 .8rem;border-radius:999px;font:600 .72rem/1 var(--sans);letter-spacing:.06em;margin-left:0}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.tcard{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem;border-radius:var(--r);color:inherit;text-decoration:none;transition:transform .35s var(--ease)}
.tcard:hover{transform:translateY(-4px)}
.tcard .ic--big{color:var(--emerald);margin-top:.2rem}
.tcard__body{display:grid;gap:.25rem;flex:1}
.tcard__body strong{font:500 1.35rem/1.15 var(--serif)}
.tcard__body span:last-child{font:400 .9rem/1.45 var(--sans);color:var(--ink-2)}
.tcard__arrow{color:var(--mist);margin-top:.4rem}
.cta{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;padding:clamp(24px,3vw,36px);border-radius:var(--r)}
.cta .ic--big{color:var(--emerald)}
.cta__title{font-size:clamp(1.6rem,3vw,2.2rem);margin:.2rem 0 .4rem}
.cta p:last-child{margin:0;color:var(--ink-2)}
@media (max-width:760px){.cta{grid-template-columns:1fr}}
.sec--sections{padding-top:0}
.sec--sections .kicker{text-align:center}

/* ---------- Seitenkopf mit Bild ---------- */
.phero,.art__hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.phero{min-height:68vh}
.phero--short{min-height:54vh}
.art__hero{min-height:78vh}
.pic.phero__img,.pic.art__img{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.phero__img img:not(.ki-badge),.art__img img:not(.ki-badge){width:100%;height:100%;object-fit:cover}
.phero__img .ki-badge,.art__img .ki-badge{inset:auto 14px 14px auto!important}
.phero__veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(246,243,238,0) 38%,rgba(246,243,238,.94) 100%)}
.phero__inner,.art__head{position:relative;z-index:1;width:min(1240px,100% - 32px);margin-inline:auto}
.phero__inner{padding:30vh 0 34px}
.art__head{padding:42vh 0 0}
.phero__card{padding:clamp(24px,3.4vw,42px);border-radius:var(--r);max-width:840px}
.art__card{padding:clamp(24px,3.4vw,46px);border-radius:var(--r) var(--r) 0 0;max-width:920px;margin-bottom:-1px}
.phero__title,.art__title{font-size:clamp(2.4rem,6vw,4.8rem);line-height:.98;margin:.12em 0 .25em}
.art__title{font-size:clamp(2.2rem,5.2vw,4.2rem)}
.phero__dek,.art__dek{font:400 clamp(1.05rem,1.9vw,1.3rem)/1.5 var(--sans);color:var(--ink-2);margin:0;max-width:58ch}
.phero__card .btn{margin-top:1rem}
.art__meta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;font:600 .78rem/1 var(--sans);color:var(--mist);margin:1.1rem 0 0}
.art__meta span{display:inline-flex;align-items:center;gap:.35rem}
.art__meta .ic{width:.95rem;height:.95rem}
.crumbs{font:600 .7rem/1.3 var(--sans);letter-spacing:.06em;color:var(--mist);margin-bottom:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{text-decoration:none}
.thero{padding:clamp(40px,6vw,80px) 0 8px}
.thero__title{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.02;display:flex;align-items:center;gap:1rem;margin:.1em 0 .3em}
.thero__title .ic--big{color:var(--emerald);width:2.6rem;height:2.6rem}
.thero__dek{font:400 clamp(1.05rem,1.9vw,1.3rem)/1.5 var(--sans);color:var(--ink-2);max-width:60ch;margin:0}
.thero+.sec{padding-top:28px}

/* ---------- Artikel ---------- */
.art__layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(30px,5vw,64px);padding-top:44px}
.art__aside{position:sticky;top:120px;align-self:start;display:grid;gap:18px}
.brief{padding:1.3rem 1.3rem 1rem;border-radius:var(--r)}
.brief li{position:relative;padding:.55rem 0 .55rem 1.1rem;font:400 .9rem/1.5 var(--sans);border-top:1px solid var(--line)}
.brief li:first-child{border-top:0;padding-top:0}
.brief li::before{content:"";position:absolute;left:0;top:1.05rem;width:6px;height:6px;transform:rotate(45deg);background:var(--emerald)}
.brief li:first-child::before{top:.5rem}
.atoc a{display:block;padding:.5rem 0;border-top:1px solid var(--line);font:500 .88rem/1.35 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .2s,padding-left .2s}
.atoc a:hover,.atoc a.is-current{color:var(--ink);padding-left:.4rem;box-shadow:inset 2px 0 0 var(--emerald)}
.aside-tool{display:flex;align-items:center;gap:.9rem;padding:1.1rem;border-radius:var(--r);text-decoration:none;color:inherit}
.aside-tool .ic--big{color:var(--emerald)}
.aside-tool span strong{font:500 1.15rem/1.2 var(--serif)}
.aside-tool>.ic:last-child{margin-left:auto}
@media (max-width:1000px){.art__layout{grid-template-columns:1fr}.art__aside{position:static;grid-template-columns:1fr 1fr}.atoc{display:none}.aside-tool{grid-column:1/-1}}
@media (max-width:640px){.art__aside{grid-template-columns:1fr}}
.prose{font:400 1.09rem/1.75 var(--sans);color:#24242a}
.prose>*{max-width:720px}
.prose h2{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.12;margin:1.7em 0 .55em;scroll-margin-top:130px}
.prose h2::before{content:"";display:block;width:34px;height:1px;background:var(--emerald);margin-bottom:.8rem}
.prose .lead{font:italic 400 clamp(1.2rem,2.1vw,1.45rem)/1.55 var(--serif);color:var(--ink)}
.prose .lead::first-letter{font-style:normal;float:left;font-size:3.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--emerald)}
.prose a{text-decoration-color:var(--emerald)}
.list{margin:0 0 1.2em}
.list li{position:relative;margin:.5em 0;padding-left:1.4em}
.list li::before{content:"";position:absolute;left:.1em;top:.66em;width:6px;height:6px;transform:rotate(45deg);background:var(--emerald)}
.pull{margin:2.6rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:1px solid var(--emerald)}
.pull p{font:italic 400 clamp(1.6rem,3vw,2.2rem)/1.22 var(--serif);margin:0;color:var(--ink)}
.tip{margin:2.4rem 0;padding:1.4rem 1.6rem;border-radius:var(--r)}
.tip p:last-child{margin:0}
.film{margin:2.6rem 0;max-width:820px}
.film__frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--onyx);box-shadow:var(--shadow);max-height:78vh;margin-inline:auto}
.film__frame video{width:100%;height:100%;object-fit:cover}
.film__play{position:absolute;inset:auto auto 18px 18px;display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(15,15,17,.45);color:#fff;font:650 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.film.is-playing .film__play{display:none}
.film figcaption{font:400 .88rem/1.5 var(--sans);color:var(--ink-2);margin-top:.7rem}
.film figcaption .kicker{display:inline;margin:0 .4rem 0 0}
.film figcaption small{display:block;color:var(--mist);margin-top:.2rem}
/* Hausanzeige: Desktop 16:9, Handy 9:16 */
.adv{margin:3rem 0}
.adv__label{font:650 .6rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mist);margin:0 0 .6rem}
.adv__card{position:relative;display:block;aspect-ratio:9/16;max-width:380px;border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);background:var(--onyx)}
.adv__img,.adv__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.adv__img--ph{background:linear-gradient(135deg,#1f2a27,#0f0f11)}
.adv__body{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:.45rem;padding:1.2rem 1.2rem 1.3rem;border-radius:14px}
.adv__brand{font:italic 500 .95rem/1 var(--serif);color:var(--emerald)}
.adv__title{font:500 1.6rem/1.08 var(--serif)}
.adv__text{font:400 .88rem/1.5 var(--sans);color:var(--ink-2)}
.adv__btn{display:inline-flex;align-items:center;gap:.45rem;font:650 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-top:.3rem}
@media (min-width:701px){
  .adv__card{aspect-ratio:16/9;max-width:none}
  .adv__img img{object-position:65% 40%}
  .adv__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,17,.55),rgba(15,15,17,0) 55%)}
  .adv__body{left:22px;right:auto;top:22px;bottom:22px;width:min(46%,340px);align-content:center}
}
.faq{margin-top:3rem}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-of-type{border-bottom:1px solid var(--line)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;font:500 1.2rem/1.3 var(--serif)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font:300 1.7rem/1 var(--sans);color:var(--emerald);transition:transform .3s}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{margin:0 0 1.1rem;font-size:1rem}
.gloss-mini{margin-top:2.6rem}
.gloss-mini dl div{padding:.75rem 0;border-top:1px solid var(--line)}
.gloss-mini dt{font:650 .95rem var(--sans)}
.gloss-mini dd{margin:.2rem 0 0;font:400 .95rem/1.5 var(--sans);color:var(--ink-2)}
.art__tags{margin-top:2rem}
.tag{display:inline-block;padding:.4rem .7rem;border-radius:999px;background:rgba(255,253,250,.6);border:1px solid var(--line);font:600 .72rem/1 var(--sans);letter-spacing:.04em;margin:0 .35rem .35rem 0}
.art__credit{font-size:.78rem;color:var(--mist)}
.art__nextprev{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:40px 0 0}
.art__nextprev a{display:flex;align-items:center;gap:.9rem;padding:1.2rem 1.3rem;border-top:1px solid var(--ink);text-decoration:none;color:inherit;font:500 1.15rem/1.2 var(--serif)}
.art__nextprev a:last-child{text-align:right;justify-content:flex-end}
.art__nextprev small{display:block;font:650 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-bottom:.4rem}
.art__nextprev .ic{color:var(--emerald)}
@media (max-width:640px){.art__nextprev{grid-template-columns:1fr}.art__nextprev a:last-child{text-align:left;justify-content:flex-start;flex-direction:row-reverse}}
.sec--related{padding-top:clamp(40px,5vw,70px)}

/* ---------- Werkzeuge ---------- */
.tool{padding:clamp(20px,3vw,34px);border-radius:var(--r)}
.tool__h{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 .7rem}
.tool__note{font-size:.82rem;color:var(--mist);margin:1rem 0 0}
.pick{display:grid;justify-items:center;gap:.4rem;padding:.7rem .4rem .6rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,253,250,.6);color:var(--ink-2);font:600 .74rem/1.2 var(--sans);text-align:center;transition:border-color .2s,background .2s,color .2s}
.pick:hover{border-color:var(--emerald)}
.pick[aria-checked="true"]{background:var(--onyx);color:var(--pearl);border-color:var(--onyx)}
.tool__pick,.shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
@media (max-width:720px){.tool__pick,.shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.tool__pick,.shapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bust{width:64px;height:70px}
.bust path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bust__neck{stroke-width:3.4}
.tool__out,.shape__out{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:center;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
@media (max-width:760px){.tool__out,.shape__out{grid-template-columns:1fr}}
.neck__visual svg{width:100%;max-width:340px;height:auto;margin-inline:auto;color:var(--ink)}
.neck__visual .bust__body,.neck__visual .bust__neck{stroke-width:1.6}
.neck__visual .chain{fill:none;stroke:var(--champagne);stroke-width:2;stroke-dasharray:1 3.2;stroke-linecap:round}
.neck__visual .chain--alt{stroke:var(--emerald)}
.neck__visual .stone{fill:var(--emerald)}
.neck__lengths{display:flex;flex-wrap:wrap;gap:.4rem}
.neck__lengths span{display:inline-flex;gap:.35rem;align-items:baseline;padding:.4rem .7rem;border-radius:999px;background:var(--emerald-soft);font:600 .78rem/1 var(--sans)}
.neck__lengths small{font-weight:500;color:var(--ink-2)}
.neck__dl div{padding:.7rem 0;border-top:1px solid var(--line)}
.neck__dl dt{font:650 .62rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--emerald)}
.neck__dl dd{margin:.25rem 0 0;font-size:.98rem;line-height:1.5}
.lengths,.settings{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.lengths ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
@media (max-width:720px){.lengths ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lengths li{padding:.6rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,253,250,.5);transition:background .25s,border-color .25s}
.lengths li.is-on{background:var(--emerald-soft);border-color:var(--emerald)}
.lengths b{display:block;font:500 1rem var(--serif)}
.lengths span{font-size:.78rem;color:var(--ink-2)}
.settings ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.4rem 1.4rem}
.settings li{padding:.55rem 0;border-top:1px solid var(--line);font-size:.92rem}
.settings b{display:block;font:500 1.02rem var(--serif)}
.settings span{color:var(--ink-2)}
.quiz__bar{display:flex;align-items:center;gap:.8rem;font:650 .7rem/1 var(--sans);letter-spacing:.14em;color:var(--mist)}
.quiz__track{flex:1;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.quiz__track i{display:block;height:100%;width:0;background:var(--emerald);transition:width .4s var(--ease)}
.quiz__stage{margin-top:1.4rem}
.quiz__q{font:500 clamp(1.4rem,2.6vw,1.9rem)/1.25 var(--serif);margin:0 0 1rem}
.quiz__opts{display:grid;gap:.6rem}
.quiz__opt{display:block;width:100%;text-align:left;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,253,250,.65);font:500 1rem/1.4 var(--sans);transition:border-color .2s,background .2s,transform .2s}
.quiz__opt:hover{border-color:var(--emerald);transform:translateX(3px)}
.quiz__result{text-align:center;padding:1rem 0}
.quiz__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.2rem}
.quiz__tone-text{color:var(--ink-2)}
.metal__swatches{display:flex;justify-content:center;gap:.6rem;margin-bottom:1rem}
.sw{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 2px 6px rgba(255,255,255,.7),0 6px 16px -6px rgba(0,0,0,.35);opacity:.35;transition:opacity .4s,transform .4s var(--ease)}
.sw.is-on{opacity:1;transform:scale(1.12)}
.sw--yellow{background:linear-gradient(135deg,#f4dd9b,#c79a3e 55%,#f1d690)}
.sw--white{background:linear-gradient(135deg,#f5f5f3,#b9bcc0 55%,#eceeee)}
.sw--rose{background:linear-gradient(135deg,#f6d2c2,#c98a72 55%,#f0c6b4)}
.pick--shape svg{width:56px;height:56px}
.pick--shape svg *{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.pick--shape svg>:not(:first-child){stroke-width:1;opacity:.55}
.shape__hand svg{width:100%;max-width:240px;height:auto;margin-inline:auto}
.shape__hand .finger{fill:#ead9cc;stroke:#c9ad98;stroke-width:1.2}
.shape__hand .band{fill:url(#none);fill:#d9c08a}
.shape__hand .stone *{fill:rgba(255,255,255,.85);stroke:#8aa;stroke-width:.6}
.shape__mm{text-align:center;font:600 .82rem var(--sans);color:var(--ink-2)}
.range{display:grid;gap:.4rem;margin:1rem 0}
.range span{display:flex;justify-content:space-between;font:600 .78rem var(--sans);color:var(--ink-2)}
.range b{color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--emerald)}
.field{display:grid;gap:.35rem;font:600 .78rem var(--sans);color:var(--ink-2)}
.field select{padding:.7rem .9rem;border-radius:12px;border:1px solid var(--line);background:#fff;font:500 1rem var(--sans);color:var(--ink)}
.tool--ring{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,36px)}
.tool--ring .ring__table,.tool--ring .ring__cal,.tool--ring .ring__how{grid-column:1/-1}
@media (max-width:760px){.tool--ring{grid-template-columns:1fr}}
.ring__dial{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.2rem 0 .2rem}
.ring__dial output{font:500 clamp(3rem,7vw,4.4rem)/1 var(--serif);min-width:3ch;text-align:center}
.ring__dial .hd__btn{border:1px solid var(--line);font-size:1.4rem;width:46px;height:46px;justify-content:center}
.ring__lab{text-align:center;font:650 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--emerald);margin:0 0 1rem}
.ring__view svg{width:100%;height:240px}
.ring__circle{fill:rgba(29,91,75,.06);stroke:var(--emerald);stroke-width:2}
.ring__table{width:100%;border-collapse:collapse}
.ring__table th,.ring__table td{padding:.65rem .4rem;border-top:1px solid var(--line);text-align:left;font-size:.95rem}
.ring__table th{font:650 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);width:45%}
.ring__table td{font:500 1.1rem var(--serif)}
.ring__cal summary{cursor:pointer;font-weight:600}
.card-cal{height:54px;border:1.5px dashed var(--emerald);border-radius:8px;margin:.8rem 0}
.ring__how ol{counter-reset:h;display:grid;gap:.4rem}
.ring__how li{counter-increment:h;position:relative;padding-left:2rem}
.ring__how li::before{content:counter(h);position:absolute;left:0;top:0;font:italic 500 1.1rem var(--serif);color:var(--emerald)}
.tool--watch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.tool--watch>.tool__note,.tool--watch>p:last-child{grid-column:1/-1}
@media (max-width:760px){.tool--watch{grid-template-columns:1fr}}
.watch__big{font:500 clamp(2rem,4.4vw,3rem)/1 var(--serif);margin:.2rem 0 .5rem}
.watch__verdict{display:inline-block;padding:.45rem .8rem;border-radius:999px;background:var(--emerald-soft);font:650 .76rem/1 var(--sans);letter-spacing:.04em}
.watch__view svg{width:100%;max-width:360px;margin-inline:auto}
.watch__view .wrist{fill:#ead9cc;stroke:#c9ad98;stroke-width:1}
.watch__view .strap{fill:#2a2a2e}
.watch__view .case{fill:#f3f1ec;stroke:#9a9890;stroke-width:2}
.watch__view .dial{fill:#fbfaf7;stroke:#d7d4cc;stroke-width:1}
.watch__view .hand{stroke:#17171a;stroke-width:2;stroke-linecap:round}
.watch__view .lug{fill:#cfccc5}
.gloss__bar{position:sticky;top:110px;z-index:5;padding:.9rem;border-radius:20px;display:grid;gap:.7rem;margin-bottom:1rem}
.gloss__search{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--line)}
.gloss__search input{flex:1;border:0;outline:0;background:transparent;font:400 1rem var(--sans);color:var(--ink);min-width:0}
.gloss__az{display:flex;flex-wrap:wrap;gap:.3rem}
.gloss__az a{font:650 .72rem/1 var(--sans);padding:.45rem .55rem;border-radius:8px;text-decoration:none;color:var(--ink-2);border:1px solid var(--line);background:rgba(255,253,250,.5)}
.gloss__list{columns:2;column-gap:2.6rem}
@media (max-width:800px){.gloss__list{columns:1}}
.gloss__letter{font:italic 500 2.2rem/1 var(--serif);color:var(--emerald);margin:1.2rem 0 .3rem;break-after:avoid}
.gloss__item{break-inside:avoid;padding:.85rem 0;border-top:1px solid var(--line);scroll-margin-top:200px}
.gloss__item dt{font:500 1.2rem/1.2 var(--serif)}
.gloss__item dd{margin:.3rem 0 0;font:400 .95rem/1.55 var(--sans);color:var(--ink-2)}
.gloss__cat{display:block;margin-top:.3rem;font:650 .6rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald)}
.gloss__item mark{background:rgba(29,91,75,.18);color:inherit;border-radius:3px}
.gloss__item.is-target{background:linear-gradient(90deg,rgba(29,91,75,.08),transparent)}

/* ---------- Einfache Seiten ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 2rem;max-width:none}
.contact__card{padding:1.4rem;border-radius:var(--r);display:grid;gap:.25rem;text-decoration:none;color:inherit}
.contact__card .ic--big{color:var(--emerald);margin-bottom:.5rem}
.contact__card strong{font:500 1.3rem/1.2 var(--serif)}
.contact__card span:last-child{font:400 .88rem/1.45 var(--sans);color:var(--ink-2)}
@media (max-width:640px){.contact{grid-template-columns:1fr}}
.edit h2{margin-top:1.6rem}
.edit__empty{font-size:.95rem;color:var(--ink-2)}
.results{display:grid;gap:12px;max-width:none}
.rcard{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:1rem 1.2rem;border-radius:16px;background:rgba(255,253,250,.6);border:1px solid var(--line)}
.rcard strong{font:500 1.25rem/1 var(--serif)}
.rcard small{font-size:.78rem;color:var(--mist);margin-left:auto}
.edit__actions{margin-top:1.2rem}
.prose .grid{max-width:none}

/* ---------- Fuss ---------- */
.ft{background:var(--onyx);color:#e8e4dd;padding:clamp(56px,7vw,88px) 0 28px;margin-top:40px}
.ft a{color:inherit}
.ft__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
.ft__brand p{font:400 .92rem/1.6 var(--sans);color:#bdb8b0;max-width:42ch}
.ft__tag{font:600 .66rem/1.3 var(--sans)!important;letter-spacing:.32em;text-transform:uppercase;color:var(--champagne)!important;margin:.8rem 0 .9rem!important}
.logo--ft{color:#fff}
.logo--ft .logo__word{font-size:2.1rem}
.ft__contact{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.ft__contact a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-size:.88rem}
.ft__contact .ic{color:var(--champagne)}
.ft__col h3{font:650 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);margin:0 0 .9rem}
.ft__col li{margin:0 0 .55rem}
.ft__col a{text-decoration:none;font:400 .92rem/1.4 var(--sans);color:#e8e4dd}
.ft__col a:hover{color:var(--champagne)}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.75rem;color:#9e9991;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:36px}
@media (max-width:900px){.ft__top{grid-template-columns:1fr 1fr}.ft__brand{grid-column:1/-1}}
@media (max-width:480px){.ft__top{grid-template-columns:1fr}}

/* Platzhalter, Einblendungen, Druck */
.pic{position:relative}
.pic.pic--ph{display:grid;place-items:center;aspect-ratio:4/5;background:linear-gradient(135deg,var(--emerald-soft),var(--pearl-2));color:var(--mist);font:italic 400 .95rem var(--serif);padding:20px;text-align:center}
html.reveal-armed [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.reveal-armed [data-reveal].in{opacity:1;transform:none}
@media print{.hd,.progress,.drawer,.search,.ft,.adv,.art__aside,.sec--related,.art__nextprev,.film{display:none!important}body{background:#fff;color:#000}.prose{font-size:12pt}}


.ftr__netz{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.ftr__netz-h{margin:0 0 .9rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:600}
.ftr__netz-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem 1.4rem;grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:1000px){.ftr__netz-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.ftr__netz-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr__netz-list li{margin:0;padding:0}
.ftr__netz-list li::before{content:none}
.ftr__netz-list a{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;line-height:1.3;padding:.15rem 0}
.ftr__netz-list a:hover b,.ftr__netz-list a:focus-visible b{text-decoration:underline}
.ftr__netz-list b{font-weight:600;font-size:.95rem}
.ftr__netz-list span{font-size:.78rem;opacity:.65}
.ftr__netz-dach{margin:1.2rem 0 0;font-size:.8rem;opacity:.7;max-width:62ch}
.ftr__netz-dach a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.ftr__netz-list{gap:.5rem 1rem}}